/* 고이타 온라인 — play-goita.com 참조 다크 슬레이트 UI */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }

:root {
  --bg:#111827;            /* gray-900 */
  --bg2:#1f2937;           /* gray-800 */
  --panel:#1f2937;
  --panel2:#374151;        /* gray-700 */
  --line:#374151;
  --line2:#4b5563;
  --text:#f9fafb;
  --dim:#9ca3af;           /* gray-400 */
  --faint:#6b7280;
  --blue:#3b82f6;          /* blue-500 팀A(청) */
  --red:#ef4444;           /* red-500 팀B(적) */
  --gold:#fbbf24;
  --purple:#8b5cf6;
  --ok:#10b981;

  /* 기물별 색상 (참조 사이트 팔레트) */
  --rk-ou:#10b981;  --rk-gy:#34d399;
  --rk-hi:#f97316;  --rk-ka:#9333ea;
  --rk-ki:#eab308;  --rk-gi:#c7ccd4;
  --rk-uma:#92400e; --rk-ko:#475569;
  --rk-shi:#dc2626;
}

html,body { height:100%; }
body { display:flex; flex-direction:column; background:radial-gradient(1200px 800px at 50% -10%, #1e293b 0%, var(--bg) 60%);
  color:var(--text); font-family:"Hiragino Sans","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif; overflow:hidden; }
main { flex:1; min-height:0; position:relative; }
button { font-family:inherit; cursor:pointer; }
input { font-family:inherit; }

/* ---------- 버튼 ---------- */
button.primary { background:var(--purple); color:#fff; border:none; border-radius:8px;
  padding:11px 28px; font-size:15px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:filter .15s; }
button.primary:hover { filter:brightness(1.15); }
button.primary:disabled { filter:grayscale(.7) brightness(.55); cursor:not-allowed; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--line2); border-radius:8px; padding:9px 18px; font-size:13px; }
button.ghost:hover { background:var(--panel2); }
button.ghost:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- 로비 ---------- */
#lobby { height:100%; display:flex; align-items:center; justify-content:center; }
.lobby-card { width:min(420px,92vw); background:linear-gradient(180deg,var(--panel2),var(--bg2)); border:1px solid var(--line2);
  border-radius:16px; padding:36px 30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.lobby-card h1 { font-size:46px; letter-spacing:.3em; margin-right:-.3em; color:#fff; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
.lobby-card .sub { color:var(--dim); font-size:12px; letter-spacing:.1em; margin:10px 0 28px; }
.lobby-card input { width:100%; background:#0b1120; border:1px solid var(--line2); color:var(--text); border-radius:10px;
  padding:13px 14px; font-size:15px; margin-bottom:12px; outline:none; }
.lobby-card input:focus { border-color:var(--blue); }
.lobby-card .row { display:flex; gap:8px; }
.lobby-card .row button { flex:1; padding:14px 0; font-size:15px; }
.lobby-card .row button:first-child { background:var(--blue); }
.lobby-card .join { margin-top:10px; }
.lobby-card .join input { flex:2; margin-bottom:0; text-align:center; letter-spacing:.35em; font-weight:700; }
.lobby-card .tip { margin-top:18px; color:var(--faint); font-size:11px; line-height:1.7; }

/* ---------- 대기실 ---------- */
#roomView { height:100%; display:flex; align-items:center; justify-content:center; }
.room-card { width:min(420px,92vw); background:linear-gradient(180deg,var(--panel2),var(--bg2)); border:1px solid var(--line2);
  border-radius:16px; padding:30px 26px; text-align:center; }
.code-label { color:var(--dim); font-size:12px; letter-spacing:.3em; }
.code { font-size:46px; font-weight:900; letter-spacing:.5em; margin-right:-.5em; color:var(--gold); margin:8px 0 16px;
  text-shadow:0 0 26px rgba(251,191,36,.3); }
.room-card .primary.big { width:100%; padding:15px 0; margin-top:16px; }
#btnCopy { margin-bottom:18px; }
#seatList { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.seat-slot { background:#0b1120; border:1px solid var(--line2); border-radius:12px; padding:12px 8px; min-height:66px; }
.seat-slot .who { font-size:14px; font-weight:700; }
.seat-slot .who .team-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.seat-slot .team { font-size:11px; color:var(--dim); margin-top:4px; letter-spacing:.05em; }
.seat-slot.open { border-style:dashed; color:var(--faint); display:flex; align-items:center; justify-content:center; font-size:12px; }
.seat-slot .me-tag { color:var(--gold); font-size:10px; border:1px solid var(--gold); border-radius:3px; padding:1px 4px; margin-left:4px; }
.seat-slot .me-tag.bot { color:#7dd3fc; border-color:#38bdf8; }
.bot-row { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.bot-row button { flex:1; padding:9px 6px; font-size:12px; }
.tip2 { margin-top:10px; color:var(--faint); font-size:10px; line-height:1.6; }
.hint { margin-top:12px; color:var(--dim); font-size:12px; }

/* ---------- 탑바(점수) ---------- */
#topbar { display:flex; align-items:center; gap:10px; padding:6px 14px; border-bottom:1px solid var(--line);
  background:rgba(17,24,39,.85); backdrop-filter:blur(6px); flex:0 0 auto; }
#topbar .brand { font-weight:900; letter-spacing:.15em; color:#fff; font-size:14px; white-space:nowrap; }
#topbar .brand em { font-style:normal; color:var(--faint); font-size:10px; margin-left:2px; }
#scorebar { flex:1; display:flex; justify-content:center; gap:12px; align-items:center; }
.score-chip { display:flex; align-items:center; gap:8px; padding:2px 14px; border-radius:20px; border:1px solid var(--line2); background:rgba(0,0,0,.2); }
.score-chip .dot { width:9px; height:9px; border-radius:50%; }
.score-chip.team0 .dot { background:var(--blue); } .score-chip.team0.me { border-color:var(--blue); }
.score-chip.team1 .dot { background:var(--red); }  .score-chip.team1.me { border-color:var(--red); }
.score-chip .t { font-size:10px; letter-spacing:.1em; opacity:.8; white-space:nowrap; }
.score-chip .p { font-size:19px; font-weight:900; min-width:26px; text-align:center; }
.score-chip.team0 .p { color:#93c5fd; } .score-chip.team1 .p { color:#fca5a5; }
#goal { color:var(--faint); font-size:11px; letter-spacing:.05em; white-space:nowrap; }
#goal b { color:var(--dim); }
#codebadge { color:var(--dim); font-size:11px; letter-spacing:.12em; border:1px solid var(--line); padding:3px 10px; border-radius:20px; white-space:nowrap; }

/* ---------- 게임 보드 ---------- */
#gameView { height:100%; position:relative; }
#table { height:100%; display:flex; flex-direction:column; max-width:1080px; margin:0 auto; }
#pawnBanner { text-align:center; background:linear-gradient(90deg,transparent,rgba(220,38,38,.28),transparent); color:#fecaca;
  padding:5px; font-size:12px; letter-spacing:.05em; flex:0 0 auto; }

.seat-area { position:relative; border-radius:12px; padding:5px 7px; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(31,41,55,.55); border:1px solid transparent; min-height:0; }
.seat-area.turn-on { border-color:var(--gold); box-shadow:0 0 0 1px rgba(251,191,36,.5), 0 0 18px rgba(251,191,36,.12); }
.seat-label { display:flex; align-items:center; gap:4px; font-size:12px; flex-wrap:wrap; justify-content:center; }
.seat-label .nm { font-weight:700; color:#fff; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-label .tag { font-size:10px; padding:1px 6px; border-radius:10px; letter-spacing:.03em; font-weight:600; }
.tag.team0 { background:rgba(59,130,246,.2); color:#93c5fd; border:1px solid rgba(59,130,246,.5); }
.tag.team1 { background:rgba(239,68,68,.18); color:#fca5a5; border:1px solid rgba(239,68,68,.5); }
.tag.dealer { background:rgba(251,191,36,.15); color:var(--gold); border:1px solid rgba(251,191,36,.5); }
.tag.you { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
.seat-label .cnt { background:rgba(0,0,0,.4); border-radius:8px; font-size:10px; padding:1px 7px; color:#d1d5db; font-weight:700; }
.seat-area .played { display:flex; gap:5px; align-items:flex-end; justify-content:center; min-height:54px; flex-wrap:wrap; }
.seat-area .no-play { display:none; }

/* ---------- 카드(타일) — 기물별 색상 ---------- */
.tile { width:58px; height:84px; border-radius:7px; position:relative; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.55); color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif KR",serif; user-select:none;
  transition:transform .12s, box-shadow .12s, opacity .2s; }
.tile .ch { font-size:32px; font-weight:900; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.tile .pt { font-size:9px; margin-top:3px; opacity:.9; text-shadow:0 1px 1px rgba(0,0,0,.5); }
.tile.darktext { color:#111827; } .tile.darktext .ch, .tile.darktext .pt { text-shadow:0 1px 0 rgba(255,255,255,.25); }

.rk-王 { background:linear-gradient(160deg,#0d9488,#059669); }
.rk-玉 { background:linear-gradient(160deg,#10b981,#0d9488); }
.rk-飛 { background:linear-gradient(160deg,#fb923c,#ea580c); }
.rk-角 { background:linear-gradient(160deg,#a855f7,#7c3aed); }
.rk-金 { background:linear-gradient(160deg,#facc15,#eab308); color:#111827; }
.rk-銀 { background:linear-gradient(160deg,#d1d5db,#9ca3af); color:#111827; }
.rk-馬 { background:linear-gradient(160deg,#a16207,#854d0e); }
.rk-香 { background:linear-gradient(160deg,#64748b,#475569); }
.rk-歩 { background:linear-gradient(160deg,#f87171,#dc2626); }
.rk-金 .pt, .rk-銀 .pt, .rk-金 .ch, .rk-銀 .ch { text-shadow:0 1px 0 rgba(255,255,255,.3); }

.tile.back { background:repeating-linear-gradient(45deg,#374151,#374151 6px,#2a3546 6px,#2a3546 12px); color:transparent; }
.tile.back::after { content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.14); border-radius:4px; }

.tile.small { width:36px; height:52px; } .tile.small .ch { font-size:19px; } .tile.small .pt { display:none; }
.tile.big { width:96px; height:138px; } .tile.big .ch { font-size:54px; } .tile.big .pt { font-size:13px; margin-top:7px; }
.tile.hidden-card { width:30px; height:44px; }
.tile.dim { opacity:.45; }

/* 내 손 */
#south { flex:0 0 auto; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(31,41,55,.15), rgba(17,24,39,.92));
  padding:6px 4px 8px; min-height:128px; display:flex; flex-direction:column; align-items:center; gap:5px; }
#myhand { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:1000px; }
#south .tile { cursor:pointer; }
#south .tile:not(:disabled):hover { transform:translateY(-7px); }
#south .tile:disabled { filter:saturate(.55) brightness(.8); cursor:not-allowed; }
#south .tile.sel0 { transform:translateY(-16px); box-shadow:0 0 0 3px var(--gold), 0 8px 14px rgba(0,0,0,.5); }
#south .tile.sel1 { transform:translateY(-9px); box-shadow:0 0 0 3px #f472b6, 0 8px 14px rgba(0,0,0,.5); }

/* 유효 카드 하이라이트 / 비유효 디밍 */
#south .tile.hl-match { box-shadow:0 0 0 2.5px #22d3ee, 0 0 16px rgba(34,211,238,.55); animation:pulseM 1.6s ease-in-out infinite; }
#south .tile.hl-atk   { box-shadow:0 0 0 2.5px #f472b6, 0 0 16px rgba(244,114,182,.55); }
@keyframes pulseM { 0%,100% { box-shadow:0 0 0 2.5px #22d3ee, 0 0 10px rgba(34,211,238,.4);} 50% { box-shadow:0 0 0 3.5px #22d3ee, 0 0 22px rgba(34,211,238,.75);} }
#south .tile.notpick { filter:brightness(.48) saturate(.55); }
#south .tile.hl-match.sel0, #south .tile.hl-atk.sel1 { animation:none; }

/* 상대 패 8칸 — 위(파트너)는 가로 1줄, 좌/우는 세로 1열 (참조 스타일) */
.opp-pile { display:flex; justify-content:center; gap:3px; }
#north .opp-pile { flex-direction:row; flex-wrap:wrap; max-width:100%; }
#west .opp-pile, #east .opp-pile { flex-direction:column; }
.tile.back.opp { width:24px; height:33px; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.tile.back.opp::after { inset:3px; }
#north .tile.back.opp { width:30px; height:40px; }

/* 플레이어 필드 줄: [버림] [공격] [패스] — 4명 동일 구조 */
.frow { display:flex; align-items:center; gap:4px; justify-content:center; width:100%; }
.flabel { font-size:8px; color:#8b98a9; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  padding:1px 5px; border-radius:4px; letter-spacing:.08em; white-space:nowrap; }
.flabel.bad { color:#f87171; border-color:rgba(220,38,38,.55); background:rgba(220,38,38,.12); font-weight:700; }
.fcards { display:flex; gap:2px; flex-wrap:wrap; align-items:center; justify-content:center; }
.fcards .empty { color:#4b5563; font-size:9px; }
.pass-chip { display:inline-flex; align-items:center; padding:2px 8px; border:1.5px solid #dc2626; border-radius:7px;
  background:#3a1215; color:#f87171; font-size:10px; font-weight:800; letter-spacing:.05em; box-shadow:0 1px 3px rgba(0,0,0,.4); }
/* 버림/공격 카드 크기: 위/아래(가로 넓음) 30px, 좌/우 22px */
#north .fcards .tile.small, #south .fcards .tile.small { width:30px; height:42px; }
#north .fcards .tile.small .ch, #south .fcards .tile.small .ch { font-size:16px; }
#north .fcards .tile.hidden-card, #south .fcards .tile.hidden-card { width:30px; height:42px; }
#west .fcards .tile.small, #east .fcards .tile.small { width:22px; height:32px; }
#west .fcards .tile.small .ch, #east .fcards .tile.small .ch { font-size:12px; }
#west .fcards .tile.hidden-card, #east .fcards .tile.hidden-card { width:22px; height:32px; }
/* 패스 봉 (마작 리치봉 느낌) — 패와 중앙 사이 */
.passbars { display:flex; gap:4px; justify-content:center; min-height:0; }
.richi { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:15px; padding:0 7px;
  border-radius:5px; background:linear-gradient(180deg,#7f1d1d,#450a0a); border:1.5px solid #ef4444; color:#fecaca;
  font-size:8px; font-weight:800; letter-spacing:.25em; text-indent:.25em; box-shadow:0 0 8px rgba(239,68,68,.45), inset 0 1px 0 rgba(255,255,255,.15); }

/* 좌/우(서/동) 플레이어 카드는 앉은 방향으로 90° 회전 */
#west .opp-pile .tile, #west .ocards .tile { transform:rotate(90deg); }
#east .opp-pile .tile, #east .ocards .tile { transform:rotate(-90deg); }
#west .opp-pile, #east .opp-pile { gap:1px; }
#west .opp-pile .tile, #east .opp-pile .tile { margin:-4px 0; }
#west .ocards, #east .ocards { gap:1px; }
#west .ocards .tile, #east .ocards .tile { margin:-5px 0; }

/* 좌/우 3열 병렬: 패 | 공격 | 버림 (서) / 버림 | 공격 | 패 (동) */
.o3 { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:12px; }
.o3col { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.o3col .flabel { margin-bottom:1px; }
.ocards { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ocards .empty { color:#4b5563; font-size:9px; }
#west .ocards .tile.small, #east .ocards .tile.small { width:22px; height:32px; }
#west .ocards .tile.small .ch, #east .ocards .tile.small .ch { font-size:12px; }
#west .ocards .tile.hidden-card, #east .ocards .tile.hidden-card { width:22px; height:32px; }
#west .pass-chip, #east .pass-chip { padding:1px 5px; font-size:8px; }
.pass-chip.late { border-color:#f59e0b; color:#fbbf24; }
.badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; padding:2px 7px;
  border-radius:9px; color:#111827; letter-spacing:.02em; box-shadow:0 1px 3px rgba(0,0,0,.4); white-space:nowrap; z-index:2; }
.badge.one { background:var(--gold); } .badge.two { background:#f472b6; color:#fff; } .badge.hid { background:#64748b; color:#fff; }

/* 중앙 */
#center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; border-radius:14px;
  background:radial-gradient(ellipse at 50% 40%, rgba(55,65,81,.5), rgba(17,24,39,.2)); }
#centerAttack { min-height:150px; display:flex; align-items:center; justify-content:center; }
/* 카드는 항상 중앙 고정, 화살표는 카드 주변 절대 배치 */
.atkstage { position:relative; width:150px; height:190px; display:flex; align-items:center; justify-content:center; }
.arr { position:absolute; font-size:20px; line-height:1; color:var(--gold); text-shadow:0 0 10px rgba(251,191,36,.55), 0 1px 2px rgba(0,0,0,.7); }
.arr.top    { top:-8px; left:50%; transform:translateX(-50%); }
.arr.bottom { bottom:-8px; left:50%; transform:translateX(-50%); }
.arr.left   { left:-22px; top:50%; transform:translateY(-50%); }
.arr.right  { right:-22px; top:50%; transform:translateY(-50%); }
#centerInfo { text-align:center; font-size:13px; color:var(--dim); line-height:1.6; }
#centerInfo b { color:var(--gold); }
#centerInfo .sub2 { display:block; font-size:11px; color:var(--faint); margin-top:2px; }
#actbar { display:flex; align-items:center; gap:10px; min-height:52px; }
#actHint { color:var(--dim); font-size:12px; max-width:260px; text-align:center; line-height:1.5; }
#btnPass { background:#262f3f; color:#d1d5db; border:1px solid var(--line2); padding:10px 24px; border-radius:10px; font-size:14px; font-weight:600; }
#btnPass:disabled { opacity:.35; cursor:not-allowed; }
#btnPass:not(:disabled):hover { background:#334155; }
#btnPlay { padding:11px 30px; font-size:15px; }
#btnPlay:not(:disabled) { background:var(--purple); box-shadow:0 0 18px rgba(139,92,246,.35); }

#middle { flex:1; display:grid; grid-template-columns:minmax(140px,200px) 1fr minmax(140px,200px); grid-template-rows:minmax(0,1fr); gap:8px; min-height:0; padding:8px 4px; }
#north { border-bottom:1px solid var(--line); border-radius:0 0 14px 14px; flex:0 0 auto; min-height:74px;
  background:linear-gradient(180deg, rgba(31,41,55,.3), rgba(31,41,55,.65)); }
#north .seat-label { flex-direction:row; }
#south .seat-label { margin-bottom:2px; }
#west, #east { border-radius:12px; overflow-y:auto; justify-content:flex-start; }
#west .seat-label, #east .seat-label { margin-bottom:2px; }
#north { overflow:visible; }
#north { min-height:64px; } #south { min-height:104px; }

/* 로그/토스트/모달 */
#logPanel { position:absolute; left:10px; bottom:8px; width:180px; max-height:110px; overflow:hidden; font-size:10px; color:var(--faint);
  line-height:1.7; background:rgba(10,14,22,.6); border-radius:8px; padding:5px 8px; pointer-events:none; }
#toastWrap { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:rgba(17,24,39,.95); border:1px solid var(--line2); color:var(--text); padding:10px 20px; border-radius:10px;
  font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:tin .25s ease; max-width:86vw; }
.toast.err { border-color:#a03a28; color:#fecaca; }
.toast.gold { border-color:var(--gold); color:var(--gold); }
@keyframes tin { from { opacity:0; transform:translateY(-10px);} to {opacity:1; transform:none;} }

.backdrop { position:fixed; inset:0; background:rgba(3,7,18,.7); display:flex; align-items:center; justify-content:center; z-index:60; }
.modal-box { background:linear-gradient(180deg,#263245,#151d2b); border:1px solid var(--line2); border-radius:16px; padding:30px 26px;
  min-width:min(340px,88vw); text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.7); }
#modalTitle { font-size:18px; font-weight:800; margin-bottom:8px; color:var(--gold); }
#modalBody { font-size:13px; color:#cbd5e1; line-height:1.7; margin-bottom:18px; }
#modalActions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
#modalActions button.primary { background:var(--blue); }

/* ---------- 모바일 ---------- */
@media (max-width:640px) {
  .tile { width:41px; height:60px; border-radius:5px; } .tile .ch { font-size:22px; } .tile .pt { font-size:7px; margin-top:2px; }
  .tile.small { width:26px; height:38px; } .tile.small .ch { font-size:14px; }
  .tile.big { width:64px; height:92px; } .tile.big .ch { font-size:36px; } .tile.big .pt { font-size:10px; }
  .tile.hidden-card { width:24px; height:36px; }
  .tile.back.opp { width:16px; height:23px; }
  #north .tile.back.opp { width:22px; height:30px; }
  .opp-pile { gap:2px; }
  .pass-chip { padding:1px 6px; font-size:8px; }
  #north .fcards .tile.small, #south .fcards .tile.small { width:24px; height:34px; }
  #north .fcards .tile.small .ch, #south .fcards .tile.small .ch { font-size:13px; }
  #north .fcards .tile.hidden-card, #south .fcards .tile.hidden-card { width:24px; height:34px; }
  #west .ocards .tile.small, #east .ocards .tile.small { width:17px; height:24px; }
  #west .ocards .tile.small .ch, #east .ocards .tile.small .ch { font-size:9px; }
  #west .ocards .tile.hidden-card, #east .ocards .tile.hidden-card { width:17px; height:24px; }
  .flabel { font-size:7px; padding:0 3px; }
  .o3 { flex-direction:row; gap:6px; justify-content:center; }
  .o3col { gap:2px; }
  #middle { grid-template-columns:minmax(92px,104px) 1fr minmax(92px,104px); gap:3px; padding:4px 2px; overflow-y:auto; }
  #north { min-height:58px; }
  #south { min-height:100px; padding:4px 2px 6px; gap:3px; }
  #myhand { gap:4px; }
  #south .tile { width:38px; height:56px; } #south .tile .ch { font-size:20px; }
  #south .tile.sel0 { transform:translateY(-10px); } #south .tile.sel1 { transform:translateY(-5px); }
  .seat-label { font-size:10px; }
  .seat-label .nm { max-width:58px; }
  .seat-area .played { min-height:40px; }
  #centerAttack { min-height:104px; }
  .atkstage { width:110px; height:150px; }
  .arr { font-size:15px; }
  .arr.left { left:-16px; } .arr.right { right:-16px; }
  .arr.top { top:-6px; } .arr.bottom { bottom:-6px; }
  #centerAttack .atk-caption { font-size:11px; }
  #topbar { padding:2px 6px; gap:5px; }
  #topbar .brand { font-size:12px; }
  #topbar .brand em { display:none; }
  .score-chip { padding:0 7px; gap:4px; border-radius:14px; }
  .score-chip .dot { width:7px; height:7px; }
  .score-chip .p { font-size:15px; min-width:18px; }
  .score-chip .t { display:none; }
  #goal { font-size:9px; white-space:nowrap; }
  #codebadge { font-size:8px; padding:1px 6px; }
  #logPanel { display:none; }
  .badge { font-size:8px; }
  #actbar { flex-wrap:wrap; justify-content:center; }
}
@media (max-width:400px) {
  #south .tile { width:34px; height:50px; } #south .tile .ch { font-size:18px; }
}

/* ---------- 시작 전 카드 뽑기 오버레이 ---------- */
#drawOverlay .draw-box { max-width:430px; width:92%; padding:20px 18px; text-align:center; }
.draw-title { font-size:18px; font-weight:800; color:var(--gold,#eab308); margin-bottom:14px; letter-spacing:.5px; }
.draw-hero { margin-bottom:14px; }
.draw-mine { display:flex; justify-content:center; }
.draw-mine .tile.big { animation:drawPop .45s ease-out; }
.draw-mine-txt { margin-top:8px; font-size:14px; color:#e5e7eb; }
.draw-mine-txt b { color:#fde68a; font-size:16px; }
.draw-rows { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.draw-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.05); font-size:13px; }
.draw-row.me { outline:2px solid var(--gold,#eab308); background:rgba(234,179,8,.12); }
.draw-row.t0 .dr-team { color:#fbbf24; }
.draw-row.t1 .dr-team { color:#60a5fa; }
.dr-seat { width:34px; color:#9ca3af; }
.dr-name { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-card { display:flex; }
.dr-team { width:56px; text-align:right; font-weight:700; }
.dr-dealer { background:var(--gold,#eab308); color:#111827; font-weight:800; border-radius:999px; padding:1px 8px; font-size:11px; }
.dr-bot { color:#9ca3af; font-size:11px; }
.draw-tip { font-size:12px; color:#9ca3af; margin-top:6px; line-height:1.5; }
@keyframes drawPop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }

/* ---------- 핸드 결과 모달 (마지막 2장) ---------- */
.lr-line { display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 10px; }
.lr-line .tile.small { width:46px; height:64px; }
.lr-line .tile.small .ch { font-size:25px; }
.lr-back { display:inline-flex; width:46px; height:64px; border-radius:6px; background:repeating-linear-gradient(45deg,#374151,#374151 6px,#2a3546 6px,#2a3546 12px); color:#9ca3af; font-size:22px; align-items:center; justify-content:center; }
.lr-plus { color:#9ca3af; font-size:18px; font-weight:700; }
.lr-x2 { background:var(--gold,#eab308); color:#111827; font-weight:900; border-radius:999px; padding:2px 10px; font-size:13px; margin-left:6px; }
.lr-score { font-size:16px; color:#e5e7eb; margin-bottom:6px; }
.lr-score b { color:#fde68a; }
.lr-note { font-size:12px; color:#9ca3af; line-height:1.5; }