/* 홀덤 나이트 — 모바일 포커 앱 스타일 */
:root {
  --bg: #070b10;
  --bg2: #0f161f;
  --panel: #141d28;
  --panel2: #1b2633;
  --line: #263444;
  --text: #eef3f8;
  --muted: #8a9bb0;
  --gold: #f5c451;
  --gold2: #d9a52e;
  --green: #26c281;
  --blue: #3d8bfd;
  --red: #ef4b5a;
  --felt1: #1c8a66;
  --felt2: #0f5e46;
  --felt3: #0a3f30;
  --rim1: #2b1d12;
  --rim2: #5a3d22;
  --card-w: clamp(36px, 11vw, 48px);
  --card-h: calc(var(--card-w) * 1.4);
  --seat-card-w: clamp(24px, 7.2vw, 32px);
  --my-card-w: clamp(48px, 15vw, 62px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overscroll-behavior: none; }
body {
  background:
    radial-gradient(ellipse at 50% 30%, #13202c 0%, transparent 60%),
    radial-gradient(ellipse at 50% 110%, #0c1a14 0%, transparent 55%),
    var(--bg);
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
#app { max-width: 560px; margin: 0 auto; height: 100dvh; position: relative; overflow: hidden; }
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ── 버튼/입력 ── */
.btn { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 15px; transition: transform .08s, filter .15s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.big { width: 100%; padding: 16px; font-size: 17px; border-radius: 14px; }
.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.btn.primary { background: linear-gradient(180deg, #ffd66b, var(--gold2)); color: #2a1c00; box-shadow: 0 6px 18px rgba(245, 196, 81, .25), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.secondary { background: linear-gradient(180deg, #2c7cf6, #1f5fc4); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.danger { background: linear-gradient(180deg, #f0606d, #c93847); color: #fff; }
.btn.dark { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.icon-btn { width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.06); border-radius: 12px; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.icon-btn:active { background: rgba(255,255,255,.12); }
input[type=text], input:not([type]), input[type=number] {
  width: 100%; background: #0c131b; border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 13px 14px; font-size: 16px; outline: none;
}
input:focus { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245,196,81,.15); }

/* ── 첫 화면 ── */
.home-wrap { margin: auto 0; padding: 24px 22px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.logo { text-align: center; margin-bottom: 14px; }
.logo h1 { margin: 12px 0 4px; font-size: 32px; letter-spacing: 2px; font-weight: 900; }
.logo h1 b { color: var(--gold); }
.logo p { margin: 0; color: var(--muted); font-size: 14px; }
.logo-cards { height: 92px; position: relative; }
.lc { position: absolute; left: 50%; top: 6px; width: 58px; height: 82px; border-radius: 9px; background: #fff; color: #111; font-weight: 900; font-size: 22px; padding: 6px 8px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.lc i { display: block; font-style: normal; font-size: 30px; text-align: center; margin-top: 4px; }
.lc1 { transform: translateX(-80%) rotate(-10deg); }
.lc2 { transform: translateX(-20%) rotate(9deg); color: var(--red); }
.field span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 2px; }
.or { text-align: center; color: var(--muted); font-size: 13px; position: relative; margin: 6px 0; }
.or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.or span { background: var(--bg); padding: 0 10px; position: relative; }
.join-row { display: flex; flex-direction: column; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: 4px; font-weight: 800; text-align: center; }
/* 7차: "방 만들기"와 "참가"를 같은 크기·같은 무게로 (색만 금색/파랑으로 구분) */
/* 10차: 코드 5자리 전엔 참가 버튼을 흐리게 */
.btn.secondary.big.dim { opacity: .45; filter: saturate(.4); box-shadow: none; }
/* 10차: 대기실 채팅 · 관전자 줄 */
.lobby-spec { font-size: 12px; color: var(--muted); margin: 6px 2px 0; }
.lobby-chat .lchat-list { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; max-height: 118px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.lobby-chat .lcm { font-size: 13px; color: #e0d4ff; word-break: break-all; }
.lobby-chat .lcm.empty { color: var(--muted); }
.lobby-chat .chat-row .btn { white-space: nowrap; flex: 0 0 76px; }
/* 10차: 내 차례 띠의 😀는 폴드와 간격을 두어 잘못 누르지 않게 */
.ab-row > .btn.tool + .btn.act-fold { margin-left: 6px; }
.btn.secondary.big { box-shadow: 0 6px 18px rgba(44, 124, 246, .25), inset 0 1px 0 rgba(255,255,255,.25); }
/* 7차: 상단 남은 인원 / 카드 글자 색 / 폴드 후 공개 버튼 */
.level-box .lv { white-space: nowrap; }
.level-box .lv .left-cnt { color: #cfe0f2; font-weight: 700; letter-spacing: 0; }
.level-box .spec-btn { font: inherit; color: inherit; background: rgba(245,196,81,.14); border: 1px solid rgba(245,196,81,.35); border-radius: 8px; padding: 0 5px; line-height: 1.3; cursor: pointer; }
.level-box .spec-btn:active { background: rgba(245,196,81,.35); }
.lbl-red { color: #ff6b7a; }
.ab-row > .btn.ps { font-size: 13px; padding: 6px 2px; min-width: 0; }
.ab-row > .btn.sc { font-size: 15px; }
.ab-top .cmp.small { font-size: 12px; color: var(--muted); }
.home-foot { text-align: center; font-size: 12px; color: #5d6d80; margin: 8px 0 0; }

/* ── 일반 페이지 ── */
.page { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: calc(10px + var(--safe-t)) 16px 0; }
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.page-head h2 { margin: 0; font-size: 20px; }
.sticky-foot { position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 calc(14px + var(--safe-b)); background: linear-gradient(180deg, transparent, var(--bg) 30%); display: flex; gap: 10px; flex-direction: column; }
.sec-title { font-size: 14px; color: var(--muted); margin: 18px 2px 8px; font-weight: 700; }
.center-box { margin: auto; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.center-box p { color: var(--muted); margin: 0; line-height: 1.5; white-space: pre-line; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.1); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 설정 폼 */
.set-group { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin-bottom: 12px; }
.set-group h4 { margin: 12px 0 4px; font-size: 13px; color: var(--gold); letter-spacing: .5px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.set-row:last-child { border-bottom: 0; }
.set-row .lbl { font-size: 15px; }
.set-row .lbl small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.set-row input[type=number] { width: 110px; text-align: right; padding: 9px 10px; font-weight: 700; }
.seg { display: inline-flex; background: #0c131b; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.seg button.on { background: var(--gold); color: #2a1c00; }
/* 7차: 앤티 방식·BB 앤티 금액 줄은 글씨 위, 버튼 아래 (폰에서 좁아지지 않게) */
.set-row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.set-row.stack .seg { display: flex; }
.set-row.stack .seg button { flex: 1; white-space: nowrap; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 50px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #2a3747; border-radius: 30px; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
.schedule { font-size: 12px; color: var(--muted); padding: 4px 0 12px; line-height: 1.7; }
.schedule b { color: var(--text); font-weight: 700; }

/* 대기실 */
.room-code-card { background: linear-gradient(135deg, #1c2a3a, #122030); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; }
.rc-label { color: var(--muted); font-size: 13px; }
.rc-code { font-size: 44px; font-weight: 900; letter-spacing: 10px; color: var(--gold); margin: 6px 0 12px; padding-left: 10px; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.members li { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.members .av { width: 36px; height: 36px; font-size: 15px; }
.members .mn { flex: 1; font-weight: 700; }
.members .mn small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.off { background: #56606c; box-shadow: none; }
/* 대기실 준비 완료: 초록불 / 빨간불 */
.members li.ready { border-color: rgba(38,194,129,.55); box-shadow: inset 0 0 0 1px rgba(38,194,129,.25); }
.members li.notready { border-color: rgba(239,75,90,.45); }
.ready-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.ready-pill i { width: 10px; height: 10px; border-radius: 50%; }
.ready-pill.ready { color: #7ef0bd; background: rgba(38,194,129,.14); }
.ready-pill.ready i { background: var(--green); box-shadow: 0 0 10px var(--green); animation: readyGlow 1.4s ease-in-out infinite alternate; }
.ready-pill.notready { color: #ff9aa4; background: rgba(239,75,90,.12); }
.ready-pill.notready i { background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes readyGlow { to { box-shadow: 0 0 16px var(--green); } }
.rc-btns { display: flex; gap: 8px; justify-content: center; }
/* 복사가 막혔을 때 보여주는 링크 칸 */
.share-box { background: #0c131b; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.share-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.share-box input { width: 100%; background: transparent; border: 0; padding: 4px 0; font-size: 14px; color: var(--text); user-select: all; -webkit-user-select: all; }
.share-code { font-size: 28px; font-weight: 900; letter-spacing: 6px; color: var(--gold); user-select: all; -webkit-user-select: all; }
.settings-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.9; }
.settings-summary b { color: var(--gold); font-weight: 700; }
.wait-note { text-align: center; color: var(--muted); font-size: 14px; padding: 8px; }

/* ── 게임 화면 ── */
#scr-game { background: radial-gradient(ellipse at 50% 45%, #122231 0%, #0a1119 55%, #06090d 100%); }
.topbar { display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--safe-t)) 10px 6px; z-index: 5; }
.top-right { display: flex; gap: 5px; }
.top-left { display: flex; gap: 5px; align-items: center; } /* 13차: ☰ 옆 💬 채팅 기록 */
#btn-chat { width: 36px; height: 36px; font-size: 17px; }
/* 13차: 💬가 늘어도 가운데 안내 칸이 오른쪽 버튼(☷)을 화면 밖으로 밀지 않게 — 안내 칸은 남는 폭 안에서만, 넘치면 자르지 않고 다음 줄로(👀 버튼이 가려지지 않게) */
.topbar .level-box { min-width: 0; }
.topbar .level-box .lv { white-space: normal; }
@media (max-width: 420px) {
  .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .top-left, .top-right { gap: 4px; }
  #btn-menu { width: 34px; height: 34px; font-size: 18px; }
  #btn-chat, .top-right .icon-btn { width: 32px; height: 32px; font-size: 16px; }
}
.top-right .icon-btn { width: 36px; height: 36px; font-size: 17px; }
.level-box { flex: 1; text-align: center; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 5px 8px; line-height: 1.25; }
.level-box .lv { font-size: 11px; color: var(--gold); font-weight: 800; letter-spacing: .5px; }
.level-box .bl { font-size: 16px; font-weight: 900; }
.level-box .nx { font-size: 11px; color: var(--muted); }
.level-box .nx b { color: #cfe0f2; font-weight: 700; }
.banner { margin: 0 10px 4px; padding: 7px 10px; border-radius: 10px; font-size: 13px; text-align: center; background: rgba(245,196,81,.14); border: 1px solid rgba(245,196,81,.35); color: var(--gold); z-index: 5; }
.banner.warn { background: rgba(239,75,90,.14); border-color: rgba(239,75,90,.4); color: #ff9aa4; }

.table-area { flex: 1; position: relative; min-height: 0; }
.felt { position: absolute; left: 10%; right: 10%; top: 12%; bottom: 19%; border-radius: 999px; padding: 11px;
  background: linear-gradient(160deg, var(--rim2), var(--rim1) 60%, #1a120b);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 2px #0d0906, inset 0 2px 1px rgba(255,220,160,.25), inset 0 -3px 6px rgba(0,0,0,.6); }
.felt-inner { width: 100%; height: 100%; border-radius: 999px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--felt1) 0%, var(--felt2) 55%, var(--felt3) 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(245,196,81,.25); }
.felt-inner::after { content: ""; position: absolute; inset: 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.07); }
.felt-logo { position: absolute; left: 0; right: 0; top: 64%; text-align: center; font-weight: 900; letter-spacing: 4px; font-size: 13px; color: rgba(255,255,255,.08); }

.center { position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 2; width: 86%; }
.pot { background: rgba(0,0,0,.4); border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pot .chipi { width: 14px; height: 14px; }
.sidepots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sidepots span { background: rgba(0,0,0,.3); border-radius: 12px; padding: 2px 8px; font-size: 11px; color: #d7e6f3; }
.board { display: flex; gap: 4px; min-height: var(--card-h); position: relative; }
/* 런잇트와이스: 보드마다 왼쪽에 승자 표시 */
.bwin { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 10px; line-height: 14px; font-weight: 900; color: #2a1c00; background: var(--gold); padding: 0 7px; border-radius: 7px; white-space: nowrap; box-shadow: 0 0 10px rgba(245,196,81,.6); animation: popScale .35s ease; }
.bwin.tie { background: #d9dde3; color: #111; box-shadow: none; }
.board .slot { width: var(--card-w); height: var(--card-h); border-radius: 6px; border: 1px dashed rgba(255,255,255,.1); }
.board-label { position: relative; z-index: 3; font-size: 10px; color: rgba(255,255,255,.55); font-weight: 700; margin-bottom: -4px; }
.result-banner { background: linear-gradient(180deg, rgba(245,196,81,.97), rgba(217,165,46,.97)); color: #2a1c00; font-weight: 900; font-size: 13px; padding: 4px 12px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 16px rgba(245,196,81,.5); text-align: center; animation: pop .35s ease; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-banner small { display: inline; font-weight: 700; font-size: 11px; margin-left: 4px; }
.result-banner small::before { content: "("; }
.result-banner small::after { content: ")"; }
.center .msg { font-size: 12px; color: rgba(255,255,255,.7); text-align: center; }
.center.two { top: 37%; gap: 4px; --card-w: clamp(32px, 9.5vw, 42px); --card-h: calc(var(--card-w) * 1.4); }
.center.two .board-label { font-size: 9px; margin-bottom: -3px; }
.sd-msg { font-weight: 800; color: var(--gold) !important; animation: pop .3s; }
.result-banner.compact { font-size: 12px; padding: 3px 10px; white-space: normal; }

/* 카드 */
.card { width: var(--card-w); height: var(--card-h); border-radius: 6px; background: linear-gradient(180deg, #ffffff, #eef1f5); color: #111; position: relative; box-shadow: 0 3px 8px rgba(0,0,0,.45); font-weight: 900; flex: 0 0 auto; user-select: none; }
.card .r { position: absolute; left: 4px; top: 2px; font-size: calc(var(--card-w) * .42); line-height: 1; letter-spacing: -1px; }
.card .s { position: absolute; left: 4px; top: calc(var(--card-w) * .44); font-size: calc(var(--card-w) * .3); line-height: 1; }
.card .big { position: absolute; right: calc(var(--card-w) * .06); bottom: calc(var(--card-w) * .07); font-size: calc(var(--card-w) * .58); line-height: 1; } /* 13차: 큰 무늬 밑이 카드 아래 테두리 밖으로 살짝 삐져나오던 것 → 조금 올리고 작게 */
.card.s0 { color: #13874a; } /* ♣ 초록 */
.card.s1 { color: #1f63d8; } /* ♦ 파랑 */
.card.s2 { color: #d8283a; } /* ♥ 빨강 */
.card.s3 { color: #111; }    /* ♠ 검정 */
/* 13차: 카드 4색 보기(☰ 메뉴, 내 화면에만) — 바탕을 무늬 색으로, 글씨는 흰색. 조커·뒷면은 그대로 */
html.fc4 .card:not(.back):not(.jk) { color: #fff; }
html.fc4 .card.s0:not(.back):not(.jk) { background: linear-gradient(180deg, #1aa35c, #0f7a43); } /* ♣ 초록 */
html.fc4 .card.s1:not(.back):not(.jk) { background: linear-gradient(180deg, #2f78ea, #1a56c2); } /* ♦ 파랑 */
html.fc4 .card.s2:not(.back):not(.jk) { background: linear-gradient(180deg, #e53a4c, #b81f30); } /* ♥ 빨강 */
html.fc4 .card.s3:not(.back):not(.jk) { background: linear-gradient(180deg, #3a4048, #16191d); } /* ♠ 검정 */
html.fc4 .card:not(.back):not(.jk)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); pointer-events: none; } /* 초록 카드가 초록 테이블에 묻히지 않게 얇은 흰 테두리 */
.card.back { background: repeating-linear-gradient(45deg, #b3203a 0 4px, #8e1428 4px 8px); border: 2px solid #fff; }
.card.back::after { content: ""; position: absolute; inset: 3px; border-radius: 3px; border: 1px solid rgba(255,255,255,.4); }
.card.dim { filter: brightness(.45) saturate(.6); }
.card.hl, .card.lo { transition: transform .45s cubic-bezier(.2,.8,.3,1.2), filter .45s, box-shadow .45s; }
.card.hl { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245,196,81,.8); transform: translateY(-7px) !important; z-index: 2; }
.card.lo { filter: brightness(.42) saturate(.5); transform: translateY(6px) scale(.94) !important; }
.card.flip-in { animation: flipIn .45s ease both; }
.card.deal-in { animation: dealIn .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes flipIn { 0% { transform: rotateY(90deg) scale(.9); filter: brightness(.3); } 100% { transform: none; filter: none; } }
@keyframes dealIn { 0% { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(.5) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }

/* 좌석 */
.seat { position: absolute; transform: translate(-50%, -50%); width: 92px; display: flex; flex-direction: column; align-items: center; z-index: 3; }
.seat .scards { display: flex; gap: 2px; height: calc(var(--seat-card-w) * 1.4); margin-bottom: -10px; z-index: 1; --card-w: var(--seat-card-w); --card-h: calc(var(--seat-card-w) * 1.4); }
/* 13차: 손패 기울기(±6°) 삭제 — 카드 나눠 주는 효과가 끝나면 원래 똑바로 서 있었는데, 화면이 다시 그려지면(폰 돌리기·키보드 등) 숨은 기울기가 드러나 판 중간에 카드가 기울던 것. 항상 똑바로 */
.seat .scards .card.hl { transform: translateY(-4px); }
.seat.revealed .scards { --seat-card-w: clamp(30px, 9vw, 38px); }
.av-wrap { position: relative; width: 50px; height: 50px; z-index: 2; }
.av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 19px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.2); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.ring { position: absolute; inset: -5px; width: 60px; height: 60px; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.ring .bgc { stroke: rgba(0,0,0,.35); }
.ring .fg { stroke: var(--green); transition: stroke .3s; }
.ring.warn .fg { stroke: var(--red); }
/* 이름표: 박스 없이 이름 + 칩 숫자만 (시야 확보). 초록 테이블 위에서도 읽히게 글씨 그림자 */
.plate { margin-top: -4px; background: transparent; border: 0; border-radius: 10px; padding: 1px 4px 0; min-width: 0; text-align: center; z-index: 2; cursor: pointer; }
.plate .nm { font-size: 11px; color: #dbe6f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 86px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); }
.plate .st { font-size: 13.5px; font-weight: 900; color: #fff; line-height: 1.1; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.95); }
.seat.acting .plate .nm { color: #7ef0bd; }
.seat.acting .plate .st { color: #b6f0d4; }
.seat.acting .av { animation: avPulse 1.1s ease-in-out infinite; border-color: #7ef0bd; }
.seat.acting.warn .plate .nm, .seat.acting.warn .plate .st { color: #ff9aa4; }
.seat.acting.warn .av { animation: avPulseRed .55s ease-in-out infinite; border-color: #ff9aa4; }
@keyframes actPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--green), 0 0 8px rgba(38,194,129,.35); } 50% { box-shadow: 0 0 0 2px #7ef0bd, 0 0 24px rgba(38,194,129,.95); } }
@keyframes avPulse { 0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 0 rgba(38,194,129,.8), 0 0 10px rgba(38,194,129,.5); } 50% { box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 8px rgba(38,194,129,0), 0 0 22px rgba(38,194,129,.9); } }
@keyframes actPulseRed { 0%, 100% { box-shadow: 0 0 0 1px var(--red), 0 0 8px rgba(239,75,90,.4); } 50% { box-shadow: 0 0 0 2px #ff9aa4, 0 0 24px rgba(239,75,90,1); } }
@keyframes avPulseRed { 0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 0 rgba(239,75,90,.8); } 50% { box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 0 7px rgba(239,75,90,0); } }
.secs-badge { position: absolute; right: -8px; bottom: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 5px; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.secs-badge:empty { display: none; }
.seat.in-duel .scards, .seat.in-duel .hname, .seat.in-duel .eq { visibility: hidden; }
.tc { display: inline-flex; gap: 3px; margin-top: 2px; justify-content: center; }
.tc i { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 4px #3b82f6; transition: .3s; }
.tc i.off { background: #2a3747; box-shadow: none; }
.plate .tc { display: flex; }
.seat.folded .av, .seat.folded .plate { opacity: .45; }
/* 탈락한 자리: 아바타·이름·칩은 흐리게, "N위 · 관전 중/나감" 표시는 또렷하게 (8차) */
.seat.out .av, .seat.out .plate > :not(.tag) { opacity: .3; filter: grayscale(1); }
.seat.winner .av { border-color: var(--gold); animation: winnerGlow 1s ease-in-out infinite alternate; }
.seat.winner .plate .st { color: var(--gold); }
@keyframes winnerGlow { from { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245,196,81,.75); } to { box-shadow: 0 0 0 3px var(--gold), 0 0 34px rgba(245,196,81,1); } }
/* 3명 이상 올인: 각자 자리에서 카드를 크게 공개 + 승률 */
.seat.reveal-big .scards { --seat-card-w: clamp(36px, 10.5vw, 46px); margin-bottom: -6px; }
.seat.reveal-big .scards .card:first-child, .seat.reveal-big .scards .card:last-child { transform: rotate(0); }
.seat.reveal-big .eq { bottom: auto; top: 100%; margin-top: 2px; }
.seat.reveal-big.lost .scards, .seat.reveal-big.lost .av, .seat.reveal-big.lost .plate { opacity: .45; filter: grayscale(.6); }
/* 올인 대결 패널 */
.duel { position: absolute; left: 4%; right: 4%; top: 1.5%; z-index: 4; background: rgba(5,10,16,.86); border: 1px solid rgba(245,196,81,.4); border-radius: 16px; padding: 5px 8px 8px; backdrop-filter: blur(3px); animation: pop .35s ease; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.dtitle { text-align: center; font-size: 11px; letter-spacing: 2px; color: var(--gold); font-weight: 900; margin-bottom: 3px; }
.drow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.dp { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 12px; border: 1px solid transparent; transition: opacity .4s, filter .4s, box-shadow .4s; }
.dcards { display: flex; gap: 4px; --card-w: clamp(38px, 11.5vw, 50px); --card-h: calc(var(--card-w) * 1.4); }
.drow.many .dcards { --card-w: clamp(30px, 8.5vw, 40px); }
.dname { font-size: 12px; font-weight: 700; color: #cfe0f2; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deq { font-size: 19px; font-weight: 900; color: #fff; line-height: 1; transition: color .3s; }
.dp.lead .deq { color: var(--gold); text-shadow: 0 0 12px rgba(245,196,81,.7); }
.dp.won { border-color: var(--gold); box-shadow: 0 0 20px rgba(245,196,81,.65); background: rgba(245,196,81,.08); }
.dp.lost { opacity: .4; filter: grayscale(.7); }
.dhand { font-size: 12px; font-weight: 800; color: var(--gold); background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 8px; }
.dp.lost .dhand { color: #cfe0f2; }
.vs { font-weight: 900; font-size: 15px; color: #ff9aa4; font-style: italic; letter-spacing: 1px; }
.my-turn-flash { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); font-size: 28px; font-weight: 900; color: var(--gold); text-shadow: 0 0 18px rgba(245,196,81,.9), 0 2px 6px rgba(0,0,0,.7); pointer-events: none; z-index: 9; animation: turnFlash 1.5s ease forwards; letter-spacing: 1px; }
@keyframes turnFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
.float-text { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); color: #9cc3ff; font-weight: 900; font-size: 24px; text-shadow: 0 0 14px #3b82f6; pointer-events: none; z-index: 9; animation: floatUp 1.4s ease forwards; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60px); } }
.plate { position: relative; }
.tag { position: absolute; top: -11px; right: -8px; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 8px; white-space: nowrap; z-index: 4; animation: pop .25s ease; }
.tag.fold { background: #3a4552; color: #b8c4d0; }
.tag.check { background: #2b5f94; color: #fff; }
.tag.call { background: #1e7d52; color: #fff; }
.tag.bet, .tag.raise { background: #c9831d; color: #fff; }
.tag.allin { background: linear-gradient(90deg, #e2334a, #ff7a2f); color: #fff; }
.tag.sitout, .tag.away { background: #56606c; color: #fff; }
/* 8차: 탈락한 사람 — 관전 중(연결됨)은 차분한 청록, 나감(연결 끊김)은 흐린 회색 */
.tag.watching { background: #1f5f5a; color: #c8f1ec; }
.tag.gone { background: #3a4552; color: #9aa6b4; }
.hname { margin-top: 3px; font-size: 10.5px; font-weight: 800; color: #2a1c00; background: var(--gold); border-radius: 8px; padding: 1px 7px; white-space: nowrap; z-index: 4; line-height: 1.3; text-align: center; }
.hname.lose { background: #394656; color: #d7e2ee; }
.hname.win { background: var(--gold); animation: pop .35s; }
.hname:not(.win):not(.lose) { background: #d9dde3; color: #111; }
.eq { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 9px; background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2); white-space: nowrap; z-index: 5; }
.eq.lead { color: var(--gold); border-color: var(--gold2); }
.dealer { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dde3); color: #111; font-weight: 900; font-size: 12px; display: grid; place-items: center; transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0,0,0,.5); z-index: 3; transition: left .5s, top .5s; }
.pos-badge { position: absolute; transform: translate(-50%, -50%); font-size: 9px; font-weight: 900; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #cfe0f2; z-index: 3; }
.bet { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; z-index: 3; background: rgba(0,0,0,.45); padding: 2px 7px 2px 3px; border-radius: 12px; white-space: nowrap; animation: popScale .2s ease; }
.chipi { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #f5c451 0 35%, #fff 36% 42%, #d33 43% 100%); border: 1px dashed #fff; flex: 0 0 auto; }
.fly-chip { position: absolute; width: 16px; height: 16px; z-index: 20; transition: left .45s cubic-bezier(.3,.7,.3,1), top .45s cubic-bezier(.3,.7,.3,1), opacity .45s; pointer-events: none; }

/* 내 자리 */
/* 내 자리: 아바타(+이름표)는 왼쪽, 홀카드는 아바타 오른쪽 옆에 크게 → 세로로 짧아져 베팅 칩·팟과 안 부딪힘 */
.seat.me { width: 192px; display: grid; grid-template-columns: 72px auto; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; justify-items: center; }
.seat.me .av-wrap { grid-column: 1; grid-row: 1; }
.seat.me .plate { grid-column: 1; grid-row: 2; margin-top: -2px; }
.seat.me .hname { grid-column: 1; grid-row: 3; }
.seat.me .scards { grid-column: 2; grid-row: 1 / span 3; --card-w: var(--my-card-w); --card-h: calc(var(--my-card-w) * 1.4); height: calc(var(--my-card-w) * 1.4); margin: 0; gap: 4px; align-self: center; }
/* 13차: 내 카드 기울기(±3°)도 삭제 — 위와 같은 이유 */
.seat.me .scards .card.hl { transform: translateY(-6px); }
.seat.me .eq { left: 36px; }
.seat.me.in-duel .scards { visibility: hidden; }
.my-hand { font-size: 11px; font-weight: 800; color: #cfe0f2; background: rgba(0,0,0,.55); border-radius: 8px; padding: 2px 8px; margin-top: 3px; white-space: nowrap; z-index: 4; }
.bubble { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); background: #fff; color: #111; border-radius: 12px; padding: 5px 9px; font-size: 13px; font-weight: 700; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; z-index: 30; animation: bubble 3s ease forwards; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.bubble { cursor: pointer; } /* 9차: 누르면 핸드 기록(채팅)이 열림 */
.bubble.emoji { background: transparent; box-shadow: none; font-size: 38px; padding: 0; animation: emojiPop 2.4s ease forwards; }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 6px); } 8% { opacity: 1; transform: translate(-50%, -4px); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes emojiPop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -10px) scale(1.25); } 25% { transform: translate(-50%, -6px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }

/* 액션 바 */
/* 액션 바는 높이를 고정해서 어떤 상태(레이즈 창 포함)에서도 테이블 크기가 변하지 않게 */
.actionbar { height: calc(156px + var(--safe-b)); padding: 6px 10px calc(10px + var(--safe-b)); display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; z-index: 6; position: relative; transition: box-shadow .3s; }
.actionbar.my-turn { animation: barGlow 1.2s ease-in-out infinite alternate; }
@keyframes barGlow { from { box-shadow: inset 0 2px 0 rgba(38,194,129,.5), inset 0 14px 24px -14px rgba(38,194,129,.35); } to { box-shadow: inset 0 3px 0 #7ef0bd, inset 0 26px 40px -14px rgba(38,194,129,.65); } }
.ab-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.rank-chip { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 10px; background: rgba(255,255,255,.08); color: #cfe0f2; white-space: nowrap; }
.rank-chip.pair { color: #b6f0d4; background: rgba(38,194,129,.2); }
.rank-chip.gold { color: #2a1c00; background: var(--gold); box-shadow: 0 0 12px rgba(245,196,81,.5); }
.rank-chip.made { animation: made .8s cubic-bezier(.2,.9,.3,1.3); }
@keyframes made { 0% { transform: scale(1); } 35% { transform: scale(1.3); box-shadow: 0 0 22px rgba(245,196,81,1); } 100% { transform: scale(1); } }
.secs { font-size: 14px; font-weight: 800; color: #cfe0f2; white-space: nowrap; }
.secs.warn { color: var(--red); animation: hot .5s ease-in-out infinite alternate; }
.secs b { color: var(--gold); }
.cmp { font-size: 13px; color: #cfe0f2; }
.cmp b { color: var(--gold); }
.cmp b.lose { color: #ff9aa4; }
.ab-info.small { font-size: 12px; padding: 0 2px; }
.raise-top { justify-content: flex-start; }
.raise-top .numbox { position: relative; width: 118px; flex: 0 0 auto; }
.raise-top input[type=number] { width: 100%; text-align: center; padding: 6px; font-weight: 800; font-size: 15px; }
/* 12차: BB로 볼 때 [−1] [▼ 12.5 BB ▲] [+1] — ▼▲를 칸 양옆에 크게 둬서 폰에서 손가락으로 누르기 쉽게 */
.raise-top .numbox.bbmode { width: 164px; display: flex; align-items: stretch; gap: 3px; }
.raise-top .numbox.bbmode .nwrap { position: relative; flex: 1; min-width: 0; display: flex; }
.raise-top .numbox.bbmode input[type=number] { padding: 6px 24px 6px 4px; -moz-appearance: textfield; appearance: textfield; }
.raise-top .numbox.bbmode input::-webkit-outer-spin-button, .raise-top .numbox.bbmode input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.raise-top .nunit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; color: var(--muted); pointer-events: none; }
.raise-top .fbtn { flex: 0 0 32px; min-height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #0f1720; color: var(--text); font-size: 12px; line-height: 1; cursor: pointer; }
.raise-top .fbtn:active { background: var(--gold); color: #2a1c00; }
.raise-top .stepper.bb1 { font-size: 14px; letter-spacing: -.5px; }
.raise-top .stepper { width: 34px; height: 34px; font-size: 18px; flex: 0 0 34px; }
.raise-top .secs { margin-left: auto; }
.btn.act-raise.confirm { animation: confirmPulse .8s ease-in-out infinite alternate; }
.btn.act-raise.confirm .fit { display: block; white-space: nowrap; line-height: 20px; height: 20px; }
@keyframes confirmPulse { from { box-shadow: 0 0 0 0 rgba(245,196,81,.6); } to { box-shadow: 0 0 0 4px rgba(245,196,81,.15), 0 0 18px rgba(245,196,81,.7); } }
.tbank .tc { margin: 0 4px 0 6px; }
.tbank .tc i { width: 9px; height: 9px; background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.8); }
.tbank .tc i.off { background: rgba(255,255,255,.25); box-shadow: none; }
.tbank .tbn { opacity: .85; font-weight: 700; }
.tbank:disabled { opacity: .4; }
.timebar.extend i { animation: extendBar .7s ease; }
@keyframes extendBar { 0% { box-shadow: 0 0 0 0 #3b82f6; filter: brightness(1.8); } 100% { box-shadow: 0 0 12px 2px rgba(59,130,246,0); filter: brightness(1); } }

/* 레이즈 창: 테이블 위에 겹쳐 뜨는 부채꼴 버튼 + 오른쪽 세로 슬라이더 */
.raise-layer { position: absolute; inset: 0; z-index: 7; }
.raise-bg { position: absolute; inset: 0; }
/* 오른쪽 아래 구석 세로 패널 (로얄홀덤·WPL 방식): 왼쪽 빠른 버튼 알약 + 오른쪽 "+ / 슬라이더 / −" */
.rpanel { position: absolute; right: 8px; bottom: 6px; height: 214px; display: flex; gap: 6px; align-items: stretch; animation: slideUp .2s ease; }
.rpresets { display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 4px; }
.rpill { width: 58px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(14,22,32,.9); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: fanIn .22s ease both; animation-delay: calc(var(--i) * 30ms); }
.rpill b { font-size: 12px; font-weight: 900; }
.rpill small { font-size: 9.5px; opacity: .75; font-weight: 700; }
.rpill.on { background: var(--gold); color: #2a1c00; border-color: #fff; }
.rpill.allin { background: linear-gradient(135deg, #e2334a, #ff7a2f); border-color: #ffb199; }
.rpill.allin.on { background: #fff; color: #c9203a; }
.rslider { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(14,22,32,.82); border: 1px solid rgba(255,255,255,.15); border-radius: 22px; padding: 4px 0; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.rstep { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: #1b2733; color: #fff; font-size: 20px; font-weight: 800; line-height: 1; padding: 0; flex: 0 0 34px; }
.rstep:active { background: var(--gold); color: #2a1c00; }
.rslider .vtrack { position: relative; flex: 1; width: 12px; }
@keyframes fanIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.vtrack { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; touch-action: none; cursor: pointer; }
.vtrack::before { content: ""; position: absolute; left: -17px; right: -17px; top: -8px; bottom: -8px; } /* 손가락 영역 넓히기 */
.vfill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #ffd66b, var(--gold2)); border-radius: 8px; height: 0; }
/* 손잡이 자체가 금액 말풍선 (겹칠 글씨 없음) */
.vthumb { position: absolute; left: 50%; bottom: 0; width: 40px; height: 26px; border-radius: 13px; background: linear-gradient(180deg, #ffe08a, var(--gold)); transform: translate(-50%, 50%); box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.35); pointer-events: none; display: grid; place-items: center; }
.vbubble { color: #2a1c00; font-size: 11px; font-weight: 900; white-space: nowrap; line-height: 1; }
@media (max-height: 700px) {
  .actionbar { height: calc(142px + var(--safe-b)); gap: 5px; }
  .rpanel { height: 190px; }
  .rpill { width: 54px; height: 33px; }
  .rpill b { font-size: 11px; }
  .rpill small { font-size: 9px; }
  .rstep { width: 30px; height: 30px; flex-basis: 30px; font-size: 18px; }
}
/* 쇼다운 족보 엠블럼: 가운데에 크게 떴다가 사라짐 */
.emblem { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; animation: emblemIn 1.6s ease forwards; }
.emblem-text { font-weight: 900; letter-spacing: 3px; white-space: nowrap; padding: 6px 22px; border-radius: 14px; color: #2a1c00; background: linear-gradient(180deg, #ffe08a, var(--gold) 55%, #d9a52e); box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 10px 30px rgba(0,0,0,.6), 0 0 26px rgba(245,196,81,.8); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.emblem.small .emblem-text { font-size: 18px; padding: 4px 16px; letter-spacing: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 8px 20px rgba(0,0,0,.5); background: linear-gradient(180deg, #e9eef3, #c9d2dc); }
.emblem.big .emblem-text { font-size: 30px; }
.emblem.epic .emblem-text { font-size: 34px; background: linear-gradient(180deg, #fff3b0, #ffd15c 45%, #ff8a3d); box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 12px 34px rgba(0,0,0,.7), 0 0 44px rgba(255,140,61,.9); }
.emblem i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 8px #ffd15c; transform: rotate(var(--a)) translateX(0); animation: spark .9s ease-out forwards; }
@keyframes emblemIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 28% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.9); } }
@keyframes spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); } }
.ab-row { display: flex; gap: 8px; align-items: stretch; }
.ab-row > .btn { flex: 1; min-height: 52px; font-size: 15px; line-height: 1.15; padding: 8px 6px; border-radius: 14px; }
.ab-row > .btn small { display: block; font-size: 12px; opacity: .9; font-weight: 700; }
.btn.act-fold { background: linear-gradient(180deg, #3b4654, #2a333e); color: #fff; }
.btn.act-call { background: linear-gradient(180deg, #25b57a, #178a5b); color: #fff; }
.btn.act-raise { background: linear-gradient(180deg, #ffcf5c, #e0a32c); color: #2a1c00; }
.btn.act-allin { background: linear-gradient(90deg, #e2334a, #ff7a2f); color: #fff; }
.btn.pre { background: #16202b; border: 1px solid var(--line); color: #cfe0f2; font-size: 13px; }
.btn.pre.on { background: #1d3b2e; border-color: var(--green); color: #b6f0d4; }
.btn.tool { flex: 0 0 52px; background: #16202b; border: 1px solid var(--line); font-size: 20px; }
.tbank { display: flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; border-radius: 12px; font-weight: 800; font-size: 13px; padding: 8px; border: 0; }
.tbank-row { display: flex; gap: 6px; }
.tbank-row .tbank { flex: 1; }
/* 타임칩 자동 사용 스위치 (각자 설정) */
.autotc { flex: 0 0 auto; border: 1px solid rgba(59,130,246,.5); background: #0f1a2b; color: #9cc3ff; border-radius: 12px; font-size: 12px; font-weight: 800; padding: 6px 10px; white-space: nowrap; }
.autotc b { color: #6b7f99; margin-left: 2px; }
.autotc.on { background: rgba(59,130,246,.22); border-color: #3b82f6; color: #fff; }
.autotc.on b { color: #7ef0bd; }
.ab-top .autotc { padding: 3px 9px; font-size: 11px; margin-right: auto; margin-left: 6px; }
.tbank.hot { animation: hot .6s ease-in-out infinite alternate; }
@keyframes hot { to { box-shadow: 0 0 0 3px rgba(59,130,246,.5), 0 0 18px rgba(59,130,246,.8); } }
.timebar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.timebar i { display: block; height: 100%; background: var(--green); transition: width .25s linear; }
.timebar.warn i { background: var(--red); }
.raise-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; animation: slideUp .18s ease; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } }
.presets { display: flex; gap: 6px; }
.presets button { flex: 1; border: 1px solid var(--line); background: #0f1720; border-radius: 10px; padding: 8px 2px; font-size: 12px; font-weight: 800; color: #dce8f4; }
.presets button:active { background: #1b2a3a; }
.slider-row { display: flex; gap: 10px; align-items: center; }
.slider-row input[type=range] { flex: 1; accent-color: var(--gold); height: 28px; }
.slider-row input[type=number] { width: 110px; text-align: right; padding: 9px; font-weight: 800; }
.stepper { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #0f1720; font-size: 20px; font-weight: 800; }
.ab-info { text-align: center; color: var(--muted); font-size: 13px; padding: 6px; }
.ab-info b { color: var(--text); }

/* 시트/모달 */
#sheet-root { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.overlay { position: absolute; inset: 0; background: rgba(3,6,10,.6); backdrop-filter: blur(2px); pointer-events: auto; animation: fade .2s ease; display: flex; flex-direction: column; justify-content: flex-end; }
.overlay.centered { justify-content: center; align-items: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--bg2); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 16px 16px calc(18px + var(--safe-b)); max-height: 86%; overflow-y: auto; animation: slideUp .22s ease; }
.overlay.centered .sheet { border-radius: 20px; border: 1px solid var(--line); width: 100%; max-width: 420px; }
.sheet h3 { margin: 0 0 12px; font-size: 18px; }
.sheet p { color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.sheet .row-btns { display: flex; gap: 10px; }
.sheet .row-btns .btn { flex: 1; }
.sheet .countdown { color: var(--gold); font-weight: 800; }
.menu-list { display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; }
.menu-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.menu-item .btn { flex: 0 0 auto; }
.menu-sec { font-size: 12px; color: var(--gold); font-weight: 800; margin: 16px 4px 2px; letter-spacing: .5px; }
.emote-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.emote-grid button { font-size: 30px; background: #16202b; border: 1px solid var(--line); border-radius: 14px; padding: 8px 0; }
.chat-row { display: flex; gap: 8px; }
.chat-row .btn { flex: 0 0 72px; }

/* 기록 패널 */
.log-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(88%, 380px); background: var(--bg2); border-left: 1px solid var(--line); pointer-events: auto; display: flex; flex-direction: column; animation: slideLeft .22s ease; }
@keyframes slideLeft { from { transform: translateX(30px); opacity: 0; } }
/* 13차: 채팅 기록 패널 (💬가 왼쪽 위라 왼쪽에서 열림) */
.log-panel.chat-panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); animation-name: slideRight; }
@keyframes slideRight { from { transform: translateX(-30px); opacity: 0; } }
.chat-panel .log-list .le { color: #e0d4ff; }
.chat-panel .log-list .le.empty { color: var(--muted); }
.chat-panel .chat-row { padding: 8px 14px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); }
.chat-panel .chat-row input { flex: 1; min-width: 0; }
.chat-panel .chat-row .btn { white-space: nowrap; }
/* 14차: 방장 옮기기 창의 방 코드·번호 상자 */
.mv-box { flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.mv-box small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.mv-box b { font-size: 24px; letter-spacing: 3px; color: var(--gold); font-weight: 900; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--safe-t)) 14px 10px; border-bottom: 1px solid var(--line); }
.log-head h3 { margin: 0; font-size: 17px; }
.log-list { flex: 1; overflow-y: auto; padding: 8px 14px calc(14px + var(--safe-b)); font-size: 13px; line-height: 1.55; }
.log-list .le { padding: 3px 0; color: #c8d6e5; }
.log-list .le.hand { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--gold); font-weight: 800; }
.log-list .le.win { color: #7ef0bd; font-weight: 700; }
.log-list .le.level { color: #ffb86b; font-weight: 800; }
.log-list .le.timechip, .log-list .le.timeout { color: #8fb8ff; }
.log-list .le.board { color: #fff; }
.log-list .le.show { color: #ffe29a; }
.log-list .le.chat { color: #e0d4ff; }
.log-list .le.out, .log-list .le.bust { color: #ff9aa4; }

/* 다시보기 */
.replay-board { display: flex; gap: 4px; justify-content: center; margin: 8px 0; min-height: var(--card-h); }
.replay-board + .replay-board { margin-top: -2px; }
.replay-players { display: flex; flex-direction: column; gap: 6px; }
.rp { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; --card-w: 30px; --card-h: 42px; }
.rp.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.rp.folded { opacity: .5; }
.rp .nm { flex: 1; font-size: 14px; font-weight: 700; }
.rp .nm small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.rp .cards { display: flex; gap: 3px; }
.rp .act { font-size: 12px; font-weight: 800; color: var(--gold); min-width: 64px; text-align: right; }
.replay-step { text-align: center; font-size: 14px; font-weight: 700; margin: 10px 0; min-height: 22px; }
.replay-ctrl { display: flex; gap: 8px; }
.replay-ctrl .btn { flex: 1; }

/* 첫 딜러 뽑기 (11차): 뒷면 6장 중 한 장씩 골라 모두 고르면 같이 공개 */
.draw-overlay { overflow-y: auto; justify-content: safe center; }
.overlay.centered .sheet.draw-sheet { max-width: 440px; max-height: none; overflow: visible; text-align: center; padding: 18px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt1) 0%, var(--felt2) 60%, var(--felt3) 100%); border: 0; box-shadow: inset 0 0 0 6px #3a2716, inset 0 0 0 8px #5b3d22, 0 20px 50px rgba(0,0,0,.5); border-radius: 28px; }
.dstat { min-height: 58px; }
.dstat b { display: block; font-size: 18px; color: var(--gold); }
.dstat span { font-size: 12.5px; color: #d6eadf; }
.dtimer { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 10px; }
.dgrid { display: grid; grid-template-columns: repeat(3, var(--card-w)); gap: 30px 16px; margin-bottom: 20px; --card-w: min(68px, 18vw); --card-h: calc(var(--card-w) * 1.4); }
.dslot { width: var(--card-w); height: var(--card-h); position: relative; perspective: 600px; }
.dslot .din { position: absolute; inset: 0; transition: transform .55s ease; transform-style: preserve-3d; }
.dslot.flip .din { transform: rotateY(180deg); }
.dslot .din > .card.back, .dslot .dfw { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dslot .din > .card.back { width: 100%; height: 100%; border-radius: 8px; }
.dslot .dfw { transform: rotateY(180deg); }
.dslot .dfw > .card, .dmini > .card { width: 100%; height: 100%; border-radius: 8px; }
.dslot.free { cursor: pointer; }
.dslot.free .card.back { box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.45); }
.dslot.free:active .din { transform: scale(.95); }
.dslot.taken:not(.flip) .card.back { filter: brightness(.55); }
.dslot.mine .card { box-shadow: 0 0 0 3px #7dd3fc, 0 0 14px rgba(125,211,252,.6); }
.dslot.dim { opacity: .4; }
.dslot.lose .dfw { filter: brightness(.8); }
.dslot.win .card { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(245,196,81,.95); }
.dslot.win { animation: dpulse 1s ease-in-out infinite alternate; z-index: 2; }
@keyframes dpulse { to { transform: scale(1.06); } }
.dslot .who { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; background: rgba(0,0,0,.6); color: #fff; padding: 1px 8px; border-radius: 8px; z-index: 2; pointer-events: none; }
.dslot .who.me { background: #0c4a6e; }
.dslot .who.win { background: var(--gold); color: #2a1c00; }
.dbadge { position: absolute; right: -11px; top: -11px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #111; font-weight: 900; font-size: 15px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0,0,0,.5); z-index: 3; animation: dpop .4s ease-out; }
@keyframes dpop { from { transform: scale(0); } }
.card.jk { background: #fff; overflow: hidden; }
.card.jk .jv { position: absolute; left: 3px; top: 4px; writing-mode: vertical-rl; text-orientation: upright; font-weight: 900; font-size: calc(var(--card-w) * .12); letter-spacing: -1px; color: #111; line-height: 1; }
.card.jkc .jv { color: #d11f3a; }
.jk-art { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); }
.jk-art.w { width: 70%; }
.jk-art.m { height: 70%; }
.jk-art.t { height: 88%; top: 52%; }
.dplayers { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.dp { font-size: 12px; background: rgba(0,0,0,.35); border-radius: 12px; padding: 3px 9px; }
.dp.done { color: #7fe0b5; }
.dp.me { outline: 1px solid #7dd3fc; }
.dlegend { width: 100%; background: rgba(8,14,20,.75); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 8px 6px 7px; display: grid; gap: 5px; }
.dlegend .t { font-size: 12px; color: var(--muted, #9aa8b6); }
.dlegend .lrow { display: flex; align-items: center; justify-content: center; gap: 3px; --card-w: min(38px, 10vw); --card-h: calc(var(--card-w) * 1.4); }
.dmini { width: var(--card-w); height: var(--card-h); position: relative; }
.dmini .card .r { font-size: calc(var(--card-w) * .36); }
.dlegend .gt { color: var(--gold); font-weight: 900; font-size: 12px; }
.dlegend .lab { display: flex; justify-content: space-between; font-size: 11px; padding: 0 6px; }
.dlegend .lab .w { color: var(--gold); } .dlegend .lab .l { color: #9ca3af; }
@media (prefers-reduced-motion: reduce) { .dslot .din { transition: none; } .dslot.win { animation: none; } }

/* 결과 */
.results-overlay { overflow: hidden; }
.results-sheet { position: relative; z-index: 2; }
.res-head { text-align: center; font-size: 15px; font-weight: 800; color: var(--muted); letter-spacing: 1px; margin-bottom: 8px; }
.champ { position: relative; text-align: center; padding: 26px 12px 16px; margin: 0 0 12px; border-radius: 18px; border: 1px solid rgba(245,196,81,.55);
  background: radial-gradient(ellipse at 50% 0%, rgba(245,196,81,.35), transparent 60%), linear-gradient(180deg, #3a2e10, #1b1a14);
  box-shadow: 0 0 34px rgba(245,196,81,.35), inset 0 1px 0 rgba(255,255,255,.15); animation: pop .5s cubic-bezier(.2,.9,.3,1.3); }
.champ.me { border-color: var(--gold); box-shadow: 0 0 44px rgba(245,196,81,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.champ .crown { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 40px; animation: crownBob 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@keyframes crownBob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); } 50% { transform: translateX(-50%) translateY(-5px) rotate(6deg); } }
.champ .av.big { width: 72px; height: 72px; font-size: 30px; margin: 8px auto 8px; border: 3px solid var(--gold); box-shadow: 0 0 0 4px rgba(245,196,81,.25), 0 8px 20px rgba(0,0,0,.5); }
.champ-title { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: 1px; text-shadow: 0 2px 12px rgba(245,196,81,.6); }
.champ-name { font-size: 20px; font-weight: 800; margin-top: 2px; }
.champ-sub { font-size: 12px; color: #d9c48a; margin-top: 4px; }
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.confetti i { position: absolute; top: -12px; height: 12px; border-radius: 2px; opacity: .95; animation: confettiFall linear infinite; }
@keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .6; } }
.results-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.results-list li { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.results-list li.mine { border-color: #3d8bfd; }
.results-list li.last { border-color: rgba(239,75,90,.5); background: linear-gradient(135deg, #2a1418, #151a24); }
.results-list li.last small { color: #ff9aa4; }
.results-list .place { font-size: 22px; width: 34px; text-align: center; font-weight: 900; }
.results-list .nm { flex: 1; font-weight: 800; }
.results-list .nm small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.results-stats { display: flex; gap: 8px; margin-bottom: 14px; }
.results-stats div { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.results-stats b { display: block; color: var(--text); font-size: 18px; margin-top: 2px; }

/* 토스트 */
#toasts { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: 92%; }
.toast { background: rgba(15,22,31,.95); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.5); animation: toastIn .25s ease; text-align: center; max-width: 100%; }
.toast.level { background: linear-gradient(90deg, #ff9f43, #f5c451); color: #2a1c00; font-size: 15px; }
.toast.gold { border-color: var(--gold2); color: var(--gold); }
.toast.blue { border-color: #3b82f6; color: #9cc3ff; }
.toast.out { opacity: 0; transform: translateY(-8px); transition: .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

/* 아바타 색 */
.av.c0 { background: linear-gradient(135deg, #f0a13a, #c56a12); }
.av.c1 { background: linear-gradient(135deg, #3fb6f0, #1a74c4); }
.av.c2 { background: linear-gradient(135deg, #b46cf5, #7a34c9); }
.av.c3 { background: linear-gradient(135deg, #f16a8b, #c2304f); }
.av.c4 { background: linear-gradient(135deg, #46d39a, #16925f); }
.av.c5 { background: linear-gradient(135deg, #f5d442, #c89b0e); }
.av.c6 { background: linear-gradient(135deg, #7d8ff7, #4552c4); }
.av.c7 { background: linear-gradient(135deg, #ff8a5c, #d9471a); }

@media (min-width: 561px) {
  #app { border-left: 1px solid #111a24; border-right: 1px solid #111a24; }
}
@media (max-height: 700px) {
  .ab-row > .btn { min-height: 46px; }
}
@media (max-width: 420px) {
  .plate { min-width: 76px; padding: 2px 6px; }
  .plate .nm { max-width: 78px; }
  .seat { width: 88px; }
}
.inapp { margin: calc(8px + var(--safe-t)) 14px 0; background: rgba(245,196,81,.12); border: 1px solid rgba(245,196,81,.45); border-radius: 12px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
/* 위치를 translate로 맞추는 요소(베팅 칩, 보드 승자 표시)용 튀어나오기: transform 대신 scale 속성을 써서 위치가 흔들리지 않게 */
@keyframes popScale { 0% { scale: .6; opacity: 0; } 70% { scale: 1.06; } 100% { scale: 1; opacity: 1; } }
/* 4차: 런잇트와이스(보드 2개)일 땐 강조 카드를 조금만 띄워서 "1번 보드" 글씨를 가리지 않게 */
.center.two .card.hl { transform: translateY(-3px) !important; }
/* 4차: 런잇트와이스 족보 이름이 길어져도 VS 창의 두 사람이 옆으로 나란히 (세로로 쌓여 1번 보드를 가리지 않게) */
.drow:not(.many) { flex-wrap: nowrap; }
.dhand { text-align: center; line-height: 1.35; white-space: nowrap; }
/* 4차: 짧은 폰(375×640 등)에서 런잇트와이스 보드 2개 + 팟이 내 카드 밑으로 들어가지 않게 조금 위로, 보드 카드만 살짝 작게 */
@media (max-height: 700px) {
  .center.two { top: 30%; --card-w: clamp(28px, 8vw, 34px); }
  /* 결과 글씨는 한 줄씩만 (족보 이름은 자리·VS 창에 이미 있음) → 내 자리와 안 겹치게 */
  .center.two .result-banner { font-size: 11px; padding: 2px 10px; white-space: nowrap; }
  .center.two .result-banner small { display: none; }
}

/* ═════════ 5차: 태블릿 가로 / PC 넓은 화면 (html.wide 일 때만. 폰 세로 화면은 그대로) ═════════ */
body { touch-action: manipulation; } /* 두 번 톡톡 눌러도 화면이 확대되지 않게 (아이패드 사파리) */
html.wide {
  --card-w: 56px;
  --seat-card-w: 36px;
  --my-card-w: 70px;
}
html.wide #app { max-width: none; border: 0; }
/* 게임 밖 화면(첫 화면·방 설정·대기실·연결 중)은 가운데 보기 좋은 폭으로 */
html.wide .page, html.wide .home-wrap { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
html.wide .home-wrap { margin-top: auto; margin-bottom: auto; }
html.wide .inapp { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
/* 아래에서 올라오는 창 → 가운데 떠 있는 창 */
html.wide .overlay { justify-content: center; align-items: center; padding: 24px; }
html.wide .overlay .sheet { width: 100%; max-width: 540px; border-radius: 20px; border: 1px solid var(--line); max-height: 90%; }
html.wide .overlay.centered .sheet { max-width: 460px; }
html.wide #toasts { left: 50%; right: auto; width: 480px; max-width: 90%; transform: translateX(-50%); }

/* 상단: 가운데 레벨 상자는 너무 길게 늘이지 않기 */
html.wide .topbar { padding-left: 16px; padding-right: 16px; }
html.wide .level-box { flex: 0 1 420px; margin: 0 auto; }
html.wide .banner { max-width: 560px; margin-left: auto; margin-right: auto; }

/* 테이블: 옆으로 긴 타원 */
html.wide .felt { left: 11%; right: 11%; top: 11%; bottom: 17%; padding: 13px; }
html.wide .felt-logo { font-size: 16px; letter-spacing: 6px; }
html.wide .center { width: 64%; top: 39%; gap: 8px; }
html.wide .pot { font-size: 14px; }
html.wide .bet { font-size: 13px; }
html.wide .seat { width: 100px; }
html.wide .plate .nm { font-size: 12px; max-width: 96px; }
html.wide .plate .st { font-size: 15px; }
html.wide .hname { font-size: 11.5px; }
html.wide .seat.revealed .scards { --seat-card-w: 44px; }
html.wide .seat.reveal-big .scards { --seat-card-w: 50px; }
html.wide .seat.me { width: max-content; grid-template-columns: 76px auto 76px; } /* 오른쪽에 아바타와 같은 폭의 빈 칸 → 내 카드 두 장의 가운데가 자리 기준점(x)에 옴 */
/* 런잇트와이스 보드 2개: 가로에선 좌우로 나란히 (세로 높이를 아낌) */
html.wide .center.two { top: 38%; --card-w: 46px; display: grid; grid-template-columns: auto auto; column-gap: 26px; row-gap: 4px; justify-content: center; justify-items: center; align-items: end; }
html.wide .center.two > :nth-child(1) { grid-column: 1; grid-row: 1; }
html.wide .center.two > :nth-child(2) { grid-column: 1; grid-row: 2; }
html.wide .center.two > :nth-child(3) { grid-column: 2; grid-row: 1; }
html.wide .center.two > :nth-child(4) { grid-column: 2; grid-row: 2; }
html.wide .center.two > :nth-child(n+5) { grid-column: 1 / -1; margin-top: 4px; }
html.wide .center.two .board-label { font-size: 11px; margin-bottom: 0; }
/* 2명 올인 VS 창: 가로에선 가운데 적당한 폭 */
html.wide .duel { left: 50%; right: auto; width: 560px; transform: translateX(-50%); top: 2%; }
html.wide .dcards { --card-w: 52px; }
html.wide .drow.many .dcards { --card-w: 44px; }

/* 행동 버튼: 아래 오른쪽에 모으고, 왼쪽 아래엔 이모티콘·내 족보 */
html.wide .actionbar { padding-left: 16px; padding-right: 16px; }
html.wide .actionbar > * { width: 520px; max-width: calc(100% - 180px); margin-left: auto; margin-right: auto; }
html.wide .actionbar .ab-row > .btn.tool { position: absolute; left: 16px; bottom: calc(10px + var(--safe-b)); width: 60px; height: 56px; flex: none; }
html.wide .actionbar .rank-chip { position: absolute; left: 16px; bottom: calc(76px + var(--safe-b)); font-size: 13px; padding: 5px 12px; }
html.wide .actionbar .ab-info { text-align: center; }
/* 레이즈 패널: 오른쪽 아래 구석 (자리 배치가 이 구석을 비워둠) */
html.wide .rpanel { right: 14px; bottom: 8px; height: 236px; }
html.wide .rpill { width: 64px; height: 42px; }
html.wide .rpill b { font-size: 13px; }
html.wide .seat .av-wrap, html.wide .seat .av { width: 56px; height: 56px; }
html.wide .seat .av { font-size: 21px; }
html.wide .seat .ring { width: 66px; height: 66px; }