/* 고이타 온라인 — 스타일 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }  /* display:flex 등이 hidden 속성을 덮지 않도록 */
:root {
  --bg:#14100d; --panel:#1e1712; --panel2:#2a1f16; --line:#3d2e1f;
  --text:#efe3cb; --dim:#a08d76; --gold:#ffd24d; --red:#e0452e; --teamA:#e0b45c; --teamB:#6fa8dc;
  --wood1:#d9b48c; --wood2:#a97c50; --wood3:#7c4f2d;
}
html,body { height:100%; }
body { display:flex; flex-direction:column; }
main { flex:1; min-height:0; position:relative; }
body { background:radial-gradient(1200px 700px at 50% -10%, #241a10 0%, var(--bg) 55%); color:var(--text);
  font-family:"Hiragino Sans","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif; overflow:hidden; }
button { font-family:inherit; cursor:pointer; }
input { font-family:inherit; }

/* ---------- 공통 버튼 ---------- */
button.primary { background:linear-gradient(180deg,#c8352b,#9e241c); color:#fff; border:none; border-radius:6px;
  padding:10px 26px; font-size:15px; font-weight:700; letter-spacing:.05em; box-shadow:0 3px 10px rgba(0,0,0,.35); }
button.primary:hover { filter:brightness(1.12); }
button.primary:disabled { filter:grayscale(.8) brightness(.6); cursor:not-allowed; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:9px 20px; font-size:14px; }
button.ghost:hover { background:var(--panel2); }

/* ---------- 로비 ---------- */
#lobby { height:100%; display:flex; align-items:center; justify-content:center; }
.lobby-card { width:min(420px,92vw); background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:34px 30px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.lobby-card h1 { font-size:44px; letter-spacing:.3em; margin-right:-.3em; color:#f2e3c6; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
.lobby-card .sub { color:var(--dim); font-size:12px; letter-spacing:.12em; margin:8px 0 26px; }
.lobby-card input { width:100%; background:#0f0b08; border:1px solid var(--line); color:var(--text); border-radius:8px;
  padding:12px 14px; font-size:15px; margin-bottom:12px; outline:none; }
.lobby-card input:focus { border-color:#8a6a3a; }
.lobby-card .row { display:flex; gap:8px; }
.lobby-card .row button { flex:1; padding:13px 0; font-size:15px; }
.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:#6e5d4c; 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(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:28px 26px; text-align:center; }
.code-label { color:var(--dim); font-size:12px; letter-spacing:.3em; }
.code { font-size:44px; font-weight:900; letter-spacing:.5em; margin-right:-.5em; color:var(--gold); margin:6px 0 14px;
  text-shadow:0 0 24px rgba(255,210,77,.25); }
.room-card .primary.big { width:100%; padding:14px 0; margin-top:16px; }
#btnCopy { margin-bottom:18px; }
#seatList { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.seat-slot { background:#0f0b08; border:1px solid var(--line); border-radius:10px; padding:12px 8px; min-height:64px; }
.seat-slot .who { font-size:14px; font-weight:700; }
.seat-slot .me-tag.bot { color:#9ad0ff; border-color:#5aa0d0; }
.bot-row { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.bot-row button { flex:1; padding:9px 6px; font-size:12px; }
#btnRemove { background:transparent; }
.tip2 { margin-top:10px; color:#5d4f3e; font-size:10px; line-height:1.6; }
.seat-slot .team { font-size:11px; color:var(--dim); margin-top:4px; letter-spacing:.08em; }
.seat-slot.open { border-style:dashed; color:#5d4f3e; 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; }
.hint { margin-top:12px; color:var(--dim); font-size:12px; }

/* ---------- 게임 ---------- */
#gameView { height:100%; position:relative; padding:0 8px; }
#table { height:100%; display:flex; flex-direction:column; max-width:1100px; margin:0 auto; }
#topbar { display:flex; align-items:center; gap:12px; padding:8px 16px; border-bottom:1px solid var(--line); background:rgba(20,14,10,.72); backdrop-filter:blur(4px); }
#topbar .brand { font-weight:900; letter-spacing:.18em; color:#f2e3c6; font-size:15px; white-space:nowrap; }
#topbar .brand em { font-style:normal; color:#6e5d4c; font-size:10px; margin-left:2px; }
#scorebar { flex:1; display:flex; justify-content:center; gap:26px; align-items:center; }
.score-chip { text-align:center; padding:2px 16px; border-radius:8px; border:1px solid transparent; }
.score-chip .t { font-size:10px; letter-spacing:.25em; opacity:.75; }
.score-chip .p { font-size:20px; font-weight:900; }
.score-chip.me .t { color:var(--gold); }
.score-chip.me { border-color:rgba(255,210,77,.4); background:rgba(255,210,77,.07); }
.score-chip.tA .p { color:var(--teamA); } .score-chip.tB .p { color:var(--teamB); }
#codebadge { color:var(--dim); font-size:11px; letter-spacing:.15em; border:1px solid var(--line); padding:3px 10px; border-radius:20px; white-space:nowrap; }

#middle { flex:1; display:grid; grid-template-columns:minmax(88px,140px) 1fr minmax(88px,140px); gap:8px; min-height:0; padding:8px 0; }

.seat-area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:12px; padding:4px; position:relative; min-height:0; }
.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:var(--text); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-label .cnt { background:rgba(0,0,0,.35); border:1px solid #4a3a28; border-radius:8px; font-size:10px; padding:1px 6px; color:#e8d9bd; }
.tag { font-size:10px; padding:1px 5px; border-radius:3px; letter-spacing:.05em; }
.seat-area .played { display:flex; gap:4px; align-items:flex-end; justify-content:center; min-height:50px; flex-wrap:wrap; }
.seat-area .no-play { display:none; }
.tag.team0 { background:rgba(224,180,92,.15); color:var(--teamA); border:1px solid rgba(224,180,92,.4); }
.tag.team1 { background:rgba(111,168,220,.15); color:var(--teamB); border:1px solid rgba(111,168,220,.4); }
.tag.dealer { background:rgba(255,210,77,.15); color:var(--gold); border:1px solid rgba(255,210,77,.5); }
.seat-area.turn-on { outline:2px solid rgba(255,210,77,.55); outline-offset:2px; box-shadow:0 0 18px rgba(255,210,77,.15) inset; }
.seat-area .back-pile, .mini { display:none; }


/* 카드(타일) */
.tile { width:56px; height:80px; border-radius:5px; background:linear-gradient(160deg,var(--wood1),var(--wood2) 65%,#8f613a);
  border:1px solid #4a2c14; position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,235,200,.14); 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:30px; font-weight:900; color:#3a2415; line-height:1; text-shadow:0 1px 0 rgba(255,240,210,.4); }
.tile .pt { font-size:9px; color:#6b4526; margin-top:4px; letter-spacing:0; }
.tile.king .ch { color:#a01810; }
.tile.back { background:linear-gradient(145deg,var(--wood2),var(--wood3)); }
.tile.back::after { content:''; position:absolute; inset:4px; border:1px solid rgba(255,220,170,.2); border-radius:3px; }
.tile.small { width:34px; height:50px; } .tile.small .ch { font-size:18px; } .tile.small .pt { display:none; }
.tile.big { width:84px; height:120px; } .tile.big .ch { font-size:46px; } .tile.big .pt { font-size:12px; margin-top:6px; }
.tile.hidden-card { width:38px; height:54px; } .tile.hidden-card::after { content:''; position:absolute; inset:4px; border:1px solid rgba(255,220,170,.2); border-radius:3px; }

/* 내 손패 */
#south { border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(30,22,15,.0), rgba(30,22,15,.9)); padding:8px 4px 10px; min-height:132px; display:flex; flex-direction:column; align-items:center; gap:6px; }
#myhand { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:1000px; }
#south .tile { cursor:pointer; }
#south .tile:hover { transform:translateY(-6px); }
#south .tile:disabled { opacity:.55; cursor:not-allowed; transform:none; }
#south .tile.sel0 { transform:translateY(-14px); box-shadow:0 0 0 3px #ffd24d, 0 6px 12px rgba(0,0,0,.5); }
#south .tile.sel1 { transform:translateY(-8px); box-shadow:0 0 0 3px #e0452e, 0 6px 12px rgba(0,0,0,.5); }
.tile .badge { position:absolute; top:-8px; font-size:9px; font-weight:700; padding:2px 6px; border-radius:8px; color:#1a0e06; letter-spacing:.02em; }
.badge.one { background:#ffd24d; } .badge.two { background:#ff7a5c; } .badge.hid { background:#9aa7b8; }

/* 중앙 */
#center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:0; border-radius:14px; }
#centerAttack { min-height:130px; display:flex; align-items:center; justify-content:center; gap:10px; }
#centerInfo { text-align:center; font-size:12px; color:var(--dim); line-height:1.6; }
#centerInfo b { color:var(--gold); }
#centerInfo .sub2 { display:block; font-size:11px; color:#7d6a55; margin-top:2px; }
#actbar { display:flex; align-items:center; gap:8px; min-height:46px; }
#actHint { color:var(--dim); font-size:12px; max-width:240px; text-align:center; }
#actbar button { padding:10px 22px; border-radius:8px; font-size:14px; }
#btnPass { background:#2c2320; color:#cfc4b4; border:1px solid #4a3a2c; }
#btnPass:disabled { opacity:.35; cursor:not-allowed; }
#btnPass:not(:disabled):hover { background:#3a2e28; }

/* 로그 */
#logPanel { position:absolute; left:12px; bottom:10px; width:190px; max-height:120px; overflow:hidden; font-size:10px; color:#7d6a55; line-height:1.7;
  background:rgba(15,10,7,.5); border-radius:8px; padding:6px 9px; 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(20,14,9,.92); border:1px solid #6a5236; color:var(--text); padding:10px 20px; border-radius:8px; font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.5); animation:tin .25s ease; max-width:86vw; }
.toast.err { border-color:#a03a28; color:#ffb0a0; }
.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(0,0,0,.66); display:flex; align-items:center; justify-content:center; z-index:60; }
.modal-box { background:linear-gradient(180deg,#2a1f16,#1b130d); border:1px solid #5a452a; border-radius:14px; padding:28px 26px; min-width:min(340px,88vw);
  text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.7); }
#modalTitle { font-size:17px; font-weight:800; margin-bottom:8px; color:var(--gold); }
#modalBody { font-size:13px; color:#cbb99e; line-height:1.7; margin-bottom:18px; }
#modalActions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
#pawnBanner { text-align:center; background:linear-gradient(90deg,transparent,rgba(160,60,20,.35),transparent); color:#ffc9a0;
  padding:5px; font-size:12px; letter-spacing:.05em; }

/* 위/아래 영역 */
#north, #south { min-height:120px; }
#north { min-height:88px; border-bottom:1px solid var(--line); }
#west, #east { border-left:1px solid var(--line); border-right:1px solid var(--line); }
#west { border-right:none; } #east { border-left:none; }

/* 모바일 — 컴팩트 레이아웃 */
@media (max-width:640px) {
  .tile { width:40px; height:58px; } .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:58px; height:84px; } .tile.big .ch { font-size:32px; } .tile.big .pt { font-size:9px; }
  .tile.hidden-card { width:26px; height:38px; }
  #middle { grid-template-columns:minmax(52px,74px) 1fr minmax(52px,74px); gap:2px; padding:2px 0; overflow-y:auto; }
  #north { min-height:60px; } #south { min-height:80px; }
  #south { padding:4px 2px 6px; gap:4px; }
  #myhand { gap:3px; }
  #south .tile { width:38px; height:55px; } #south .tile .ch { font-size:20px; }
  #south .tile.sel0 { transform:translateY(-9px); } #south .tile.sel1 { transform:translateY(-5px); }
  .seat-label { font-size:10px; gap:2px; }
  .seat-label .nm { max-width:64px; }
  .seat-area .played { min-height:40px; }
  #centerAttack { min-height:92px; }
  #centerInfo { font-size:11px; }
  #topbar { padding:4px 8px; gap:6px; }
  #topbar .brand { font-size:12px; }
  .score-chip { padding:1px 5px; } .score-chip .p { font-size:14px; } .score-chip .t { font-size:8px; }
  #codebadge { font-size:9px; padding:2px 7px; }
  #logPanel { display:none; }
  .badge { font-size:8px; }
}

/* 작은 폰(가로가 특히 좁은 경우) 내 손은 두 줄 허용 */
@media (max-width:400px) {
  #south .tile { width:34px; height:50px; } #south .tile .ch { font-size:18px; }
  #myhand { gap:3px; }
}