/* ============================================================
 * LAS VEGAS HOLD'EM — 스타일
 * ============================================================ */
:root {
  --pink: #ff2d95;
  --gold: #ffd166;
  --gold2: #d4af37;
  --cyan: #4cc9f0;
  --green: #06d6a0;
  --night: #0b0420;
  --panel: rgba(18, 8, 40, 0.78);
  --felt: #0f6b3a;
  --accent: #ffd166;
  --s: 1;
  --font-ko: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--night);
  color: #f5f0ff;
  font-family: var(--font-ko);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------------- 밤하늘 & 스카이라인 ---------------- */
#sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 45, 149, 0.45), transparent 60%),
    radial-gradient(ellipse at 15% 100%, rgba(76, 201, 240, 0.25), transparent 50%),
    linear-gradient(180deg, #05010f 0%, #1a0838 55%, #3a0c4f 100%);
}
#sky .stars { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 10%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 55% 25%, #fff, transparent), radial-gradient(1px 1px at 70% 8%, #fff, transparent),
  radial-gradient(1px 1px at 85% 30%, #fff, transparent), radial-gradient(1px 1px at 92% 12%, #fff, transparent),
  radial-gradient(1px 1px at 22% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 5%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 1; } }
#sky svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 42vh; }
#sky .win { animation: winblink 3s steps(2) infinite; }
@keyframes winblink { 50% { opacity: 0.25; } }
#sky .searchlight { position: absolute; bottom: 0; width: 6vw; height: 120vh; transform-origin: bottom center;
  background: linear-gradient(0deg, rgba(255,255,255,0.18), transparent 80%); filter: blur(6px); animation: sweep 9s ease-in-out infinite alternate; }
#sky .searchlight.l { left: 22%; }
#sky .searchlight.r { right: 18%; animation-delay: -4s; }
@keyframes sweep { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }

/* ---------------- 화면 전환 ---------------- */
.screen { position: fixed; inset: 0; z-index: 1; display: none; }
.screen.active { display: flex; }

/* ---------------- 로비 ---------------- */
#lobby { flex-direction: column; align-items: center; overflow-y: auto; padding: 18px 16px 30px; gap: 14px; }
.vegas-sign {
  position: relative; margin-top: 6px; padding: 16px 46px 18px; text-align: center;
  background: radial-gradient(ellipse, #fffaf0 0%, #f4ecd8 100%);
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  box-shadow: 0 0 40px rgba(255, 209, 102, 0.5);
}
.vegas-sign .welcome { font-family: 'Playfair Display', serif; font-weight: 900; color: #c1121f; letter-spacing: 3px; font-size: clamp(12px, 2vw, 18px); }
.vegas-sign .fab { font-family: 'Pacifico', cursive; color: #1d3557; font-size: clamp(14px, 2.4vw, 22px); line-height: 1; }
.vegas-sign .lv { font-family: 'Playfair Display', serif; font-weight: 900; color: #c1121f; font-size: clamp(28px, 6vw, 58px); line-height: 1; letter-spacing: 2px; }
.vegas-sign .lv span { display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; margin: 0 2px; border-radius: 50%; background: #c1121f; color: #fff; font-size: 0.58em; vertical-align: 0.2em; text-align: center; }
.vegas-sign .nev { font-family: 'Playfair Display', serif; font-weight: 700; color: #1d3557; letter-spacing: 6px; font-size: clamp(10px, 1.6vw, 14px); }
.bulbs { position: absolute; inset: 4px; pointer-events: none; }

.neon-title { margin: 6px 0 0; text-align: center; line-height: 1.05; }
.neon-title .t1 { display: block; font-family: 'Monoton', cursive; font-weight: 400; font-size: clamp(30px, 7vw, 76px); color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 12px var(--pink), 0 0 24px var(--pink), 0 0 48px var(--pink); animation: flicker 6s infinite; }
.neon-title .t2 { display: block; font-family: 'Monoton', cursive; font-weight: 400; font-size: clamp(18px, 4vw, 42px); color: #fff8e1; margin-top: 4px;
  text-shadow: 0 0 5px #fff, 0 0 12px var(--gold), 0 0 26px var(--gold), 0 0 44px #ff9f1c; }
.neon-title .t3 { display: block; font-family: 'Black Han Sans', sans-serif; font-size: clamp(14px, 2.4vw, 22px); color: var(--cyan); letter-spacing: 6px; margin-top: 6px;
  text-shadow: 0 0 8px var(--cyan); }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.45; } }

.lobby-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 16px; width: min(1220px, 100%); }
@media (max-width: 1000px) { .lobby-grid { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid rgba(255, 209, 102, 0.35); border-radius: 16px; padding: 16px;
  box-shadow: 0 0 22px rgba(255, 45, 149, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); }
.panel h3 { margin: 0 0 12px; font-family: 'Black Han Sans', sans-serif; font-weight: 400; color: var(--gold); letter-spacing: 1px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #c9b8e8; margin-bottom: 5px; }
.field input[type=text], .field select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid #5b3f8c; background: #140a2c; color: #fff; font-size: 14px; }
.av-pick { display: flex; gap: 10px; }
.av-pick button { flex: 1; background: #140a2c; border: 2px solid #3a2766; border-radius: 12px; padding: 6px; color: #ddd; font-size: 12px; }
.av-pick button img { width: 64px; height: 64px; display: block; margin: 0 auto 4px; }
.av-pick button.sel { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 209, 102, 0.6); color: var(--gold); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: #3a2766; border-radius: 24px; transition: 0.2s; }
.switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.switch input:checked + span { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.switch input:checked + span::after { transform: translateX(20px); }
.vip { margin-top: 14px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #3d2a00, #1a1200); border: 1px solid var(--gold2); text-align: center; }
.vip small { color: #e9d8a6; display: block; font-size: 11px; letter-spacing: 2px; }
.vip b { font-family: 'Orbitron', sans-serif; font-size: 26px; color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 102, 0.7); }
.btn-small { width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; border: 1px solid #5b3f8c; background: #1d1040; color: #e6dcff; font-size: 13px; }
.btn-small:hover { border-color: var(--gold); color: var(--gold); }

.stages { display: flex; flex-direction: column; gap: 12px; }
.stage-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 18px; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--sc, var(--gold)); background: linear-gradient(120deg, rgba(0,0,0,0.65), rgba(0,0,0,0.35)), var(--sbg, #0f6b3a);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sc, #ffd166) 45%, transparent); }
.stage-card .grade { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: 'Black Han Sans', sans-serif; font-size: 14px; background: var(--sc); color: #111; margin-right: 8px; }
.stage-card .stage-no { font-family: 'Orbitron', sans-serif; font-size: 12px; color: #ddd; letter-spacing: 2px; }
.stage-card h4 { margin: 8px 0 4px; font-family: 'Monoton', cursive; font-weight: 400; font-size: clamp(18px, 2.6vw, 28px); color: #fff; text-shadow: 0 0 10px var(--sc); }
.stage-card p { margin: 0 0 10px; font-size: 13px; color: #ddd; line-height: 1.5; }
.stage-card .faces { display: flex; }
.stage-card .faces img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); margin-right: -8px; background: #222; }
.stage-card .play { align-self: center; padding: 14px 22px; border-radius: 14px; border: none; font-family: 'Black Han Sans', sans-serif; font-size: 18px; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff3b0, var(--gold) 40%, #c98b00); color: #2b1600; box-shadow: 0 4px 0 #7a5200, 0 0 20px rgba(255, 209, 102, 0.6); }
.stage-card .play:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5200; }
.stage-card.locked { filter: grayscale(0.85) brightness(0.6); }
.stage-card.locked .play { background: #444; color: #aaa; box-shadow: none; cursor: not-allowed; }
.stage-card .clear-stamp { position: absolute; right: 120px; top: 12px; transform: rotate(-12deg); border: 3px solid var(--green); color: var(--green); font-family: 'Orbitron', sans-serif; font-weight: 900; padding: 2px 10px; border-radius: 8px; font-size: 14px; text-shadow: 0 0 8px var(--green); }
@media (max-width: 600px) { .stage-card { grid-template-columns: 1fr; } .stage-card .clear-stamp { right: 14px; } }
.lobby-foot { font-size: 11px; color: #9a88c0; text-align: center; max-width: 900px; line-height: 1.6; }
.lobby-foot a { color: #c9b8ff; }

/* ---------------- 게임 화면 ---------------- */
#game { flex-direction: column; }
.hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: rgba(5, 2, 15, 0.75); border-bottom: 1px solid rgba(255, 209, 102, 0.25); z-index: 5; }
.hud .venue { font-family: 'Monoton', cursive; color: #fff; text-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent); font-size: 18px; margin-right: 6px; white-space: nowrap; }
.hud .grade-chip { font-family: 'Black Han Sans', sans-serif; background: var(--accent); color: #111; padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.hud-item { font-size: 12px; color: #c9b8e8; background: rgba(255,255,255,0.06); padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.hud-item b { color: #fff; font-family: 'Orbitron', sans-serif; font-size: 13px; margin-left: 4px; }
.hud-btns { margin-left: auto; display: flex; gap: 6px; }
.hud-btns button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 8px; padding: 5px 9px; font-size: 14px; }
.hud-btns button.off { opacity: 0.4; }

#game > * { min-width: 0; max-width: 100vw; }
.table-wrap { position: relative; flex: 1; min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 30px 60px 40px; }
.table { position: relative; width: 100%; aspect-ratio: 2.05 / 1; max-height: 100%; }
.rail { position: absolute; inset: 0; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 30%, #6b3b1f, #3b1d0b 70%, #1f0e04);
  box-shadow: 0 25px 60px rgba(0,0,0,0.75), 0 0 0 3px #b8860b, 0 0 0 6px #3b1d0b, 0 0 40px rgba(255, 45, 149, 0.35); }
.rail::before { /* 레일 조명 */ content: ''; position: absolute; inset: 6px; border-radius: 999px; border: 2px dotted rgba(255, 230, 150, 0.85); animation: chase 1.2s linear infinite; }
@keyframes chase { 50% { border-color: rgba(255, 120, 200, 0.85); } }
.felt { position: absolute; inset: calc(26px * var(--s)); border-radius: 999px;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--felt) 100%, #fff 12%), var(--felt) 45%, color-mix(in srgb, var(--felt) 100%, #000 45%) 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.65), inset 0 0 0 2px rgba(255, 209, 102, 0.3); }
.felt::after { content: ''; position: absolute; inset: 10%; border-radius: 999px; border: 2px solid rgba(255, 209, 102, 0.18); }
.felt-logo { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); font-family: 'Monoton', cursive; font-size: calc(30px * var(--s)); color: rgba(255,255,255,0.13); letter-spacing: 4px; white-space: nowrap; }
.felt-logo small { display: block; text-align: center; font-family: 'Playfair Display', serif; font-size: calc(13px * var(--s)); letter-spacing: 8px; }
.board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: calc(8px * var(--s)); z-index: 2; }
.board .slot { width: calc(64px * var(--s)); height: calc(90px * var(--s)); border-radius: calc(7px * var(--s)); border: 2px dashed rgba(255,255,255,0.12); }
.pot { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 2; display: none; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255, 209, 102, 0.5); padding: calc(4px * var(--s)) calc(14px * var(--s)); border-radius: 999px;
  font-family: 'Orbitron', sans-serif; font-size: calc(16px * var(--s)); color: var(--gold); white-space: nowrap; }
.pot.show { display: flex; }
.pot small { font-family: var(--font-ko); color: #ddd; font-size: 0.75em; }
.table-msg { position: absolute; left: 50%; top: 72%; transform: translateX(-50%); z-index: 3; font-size: calc(15px * var(--s)); color: #fff; text-shadow: 0 0 6px #000; white-space: nowrap; font-weight: 700; }

/* 카드 (3D 플립) */
.card { position: relative; width: calc(64px * var(--s)); height: calc(90px * var(--s)); perspective: 600px; flex: none; }
.card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.45s ease; transform: rotateY(180deg); }
.card.up .inner { transform: rotateY(0deg); }
.card .face { position: absolute; inset: 0; border-radius: calc(7px * var(--s)); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.card .front { background: linear-gradient(160deg, #ffffff, #f1ece1); color: #111; font-family: 'Playfair Display', serif; }
.card.red .front { color: #d00028; }
.card .back { transform: rotateY(180deg); border: calc(3px * var(--s)) solid #fff;
  background: repeating-linear-gradient(45deg, #b0123a 0 calc(5px * var(--s)), #7a0a28 calc(5px * var(--s)) calc(10px * var(--s))); }
.card .back::after { content: '♠ LV ♥'; position: absolute; inset: 18% 12%; border: 1px solid rgba(255, 209, 102, 0.8); border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: calc(10px * var(--s)); color: var(--gold); background: rgba(60, 0, 20, 0.85); font-weight: 700; }
.card .corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 0.95; font-weight: 700; font-size: calc(17px * var(--s)); }
.card .corner .s { font-size: 0.8em; }
.card .corner.tl { left: calc(4px * var(--s)); top: calc(4px * var(--s)); }
.card .corner.br { right: calc(4px * var(--s)); bottom: calc(4px * var(--s)); transform: rotate(180deg); }
.card .pip { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-size: calc(36px * var(--s)); line-height: 1; }
.card .pip.face-letter { font-size: calc(30px * var(--s)); font-weight: 900; width: 58%; height: 58%; display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 1px solid currentColor; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 209, 102, 0.35), rgba(255,255,255,0)); }
.card .pip.face-letter i { font-style: normal; font-size: 0.5em; }
.card.win .face { box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold); }
.card.dim { filter: brightness(0.45); }
.card.deal { animation: dealIn 0.38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dealIn { from { transform: translate(var(--dx, 0), var(--dy, -200px)) rotate(-40deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.card.muck { animation: muck 0.45s ease forwards; }
@keyframes muck { to { transform: translate(var(--dx, 0), var(--dy, -100px)) scale(0.4) rotate(30deg); opacity: 0; } }

/* 좌석 */
.seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 4; width: calc(150px * var(--s)); }
.seat.top { flex-direction: column-reverse; }
.seat .cards { display: flex; gap: calc(3px * var(--s)); height: calc(90px * var(--s) * 0.78); margin: calc(2px * var(--s)) 0; }
.seat .cards .card { width: calc(50px * var(--s)); height: calc(70px * var(--s)); }
.seat .cards .card .corner { font-size: calc(14px * var(--s)); }
.seat .cards .card .pip { font-size: calc(26px * var(--s)); }
.seat .cards .card .pip.face-letter { font-size: calc(22px * var(--s)); }
.seat.me .cards { height: calc(100px * var(--s)); }
.seat.me .cards .card { width: calc(66px * var(--s)); height: calc(94px * var(--s)); }
.seat.me .cards .card .corner { font-size: calc(18px * var(--s)); }
.seat.me .cards .card .pip { font-size: calc(36px * var(--s)); }
.seat .who { position: relative; display: flex; align-items: center; }
.seat .ava { position: relative; width: calc(66px * var(--s)); height: calc(66px * var(--s)); border-radius: 50%; border: calc(3px * var(--s)) solid #8a6fbf; background: #222; overflow: visible; flex: none; z-index: 2; transition: 0.3s; }
.seat .ava img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.seat .plate { margin-left: calc(-12px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(4px * var(--s)) calc(16px * var(--s)); background: rgba(10, 4, 25, 0.88); border: 1px solid rgba(255,255,255,0.18); border-radius: 0 12px 12px 0; min-width: calc(84px * var(--s)); }
.seat .plate .nm { font-size: calc(13px * var(--s)); font-weight: 700; white-space: nowrap; max-width: calc(90px * var(--s)); overflow: hidden; text-overflow: ellipsis; }
.seat .plate .st { font-family: 'Orbitron', sans-serif; font-size: calc(13px * var(--s)); color: var(--gold); }
.seat .pos-tag { position: absolute; left: calc(-6px * var(--s)); bottom: calc(-4px * var(--s)); z-index: 3; font-size: calc(9px * var(--s)); font-weight: 900; background: #fff; color: #111; padding: 0 4px; border-radius: 6px; font-family: 'Orbitron', sans-serif; }
.seat .pos-tag:empty { display: none; }
.seat.active .ava { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.4), 0 0 24px var(--gold); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.15), 0 0 34px var(--gold); } }
.seat.folded { opacity: 0.45; }
.seat.out { opacity: 0.25; filter: grayscale(1); }
.seat.out .plate .st::after { content: ' OUT'; color: #ff4d6d; }
.seat.winner .ava { border-color: var(--green); box-shadow: 0 0 30px var(--green); }
.seat .bubble { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px) scale(0.6); opacity: 0; transition: 0.2s; z-index: 6;
  background: #fff; color: #111; font-weight: 800; padding: calc(4px * var(--s)) calc(10px * var(--s)); border-radius: 12px; font-size: calc(13px * var(--s)); white-space: nowrap; pointer-events: none; }
.seat.top .bubble { bottom: auto; top: 100%; transform: translate(-50%, 6px) scale(0.6); }
.seat .bubble.show { opacity: 1; transform: translate(-50%, -6px) scale(1); }
.seat.top .bubble.show { transform: translate(-50%, 6px) scale(1); }
.seat .bubble.fold { background: #6c757d; color: #fff; }
.seat .bubble.raise, .seat .bubble.bet { background: var(--pink); color: #fff; }
.seat .bubble.allin { background: linear-gradient(90deg, #ff006e, #ffbe0b); color: #fff; font-size: calc(15px * var(--s)); }
.seat .bubble.call { background: var(--cyan); color: #04121c; }
.seat .bubble.check { background: #e9ecef; }
.seat .bubble.chat { background: #fff8e1; color: #333; font-weight: 500; }
.seat .hand-label { position: absolute; top: calc(-4px * var(--s)); left: 50%; transform: translateX(-50%); z-index: 7; background: rgba(0,0,0,0.85); border: 1px solid var(--gold); color: var(--gold);
  padding: 1px 8px; border-radius: 999px; font-size: calc(12px * var(--s)); font-weight: 700; white-space: nowrap; display: none; }
.seat.top .hand-label { top: auto; bottom: calc(-4px * var(--s)); }
.seat .hand-label.show { display: block; }
.seat .eq { position: absolute; right: calc(-8px * var(--s)); top: 30%; z-index: 7; background: #000; color: #fff; font-family: 'Orbitron', sans-serif; font-size: calc(12px * var(--s)); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--cyan); display: none; }
.seat .eq.show { display: block; }
.seat .grade-tag { font-size: calc(10px * var(--s)); color: #c9b8e8; }
.seat .think { position: absolute; right: calc(-4px * var(--s)); top: calc(-4px * var(--s)); width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-radius: 50%; background: #fff; color: #111; font-size: calc(10px * var(--s)); display: none; align-items: center; justify-content: center; z-index: 4; }
.seat.thinking .think { display: flex; animation: bob 0.6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-4px); } }

.bet { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: none; align-items: center; gap: 4px; transition: left 0.45s ease, top 0.45s ease, opacity 0.45s; }
.bet.show { display: flex; }
.bet .chips { position: relative; width: calc(22px * var(--s)); height: calc(22px * var(--s)); }
.bet .chips i { position: absolute; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.9); box-shadow: 0 1px 2px #000; }
.bet .amt { font-family: 'Orbitron', sans-serif; font-size: calc(12px * var(--s)); background: rgba(0,0,0,0.6); padding: 1px 6px; border-radius: 8px; color: #fff; }
.dealer-btn { position: absolute; transform: translate(-50%, -50%); z-index: 3; width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-radius: 50%; background: radial-gradient(#fff, #ddd); color: #111;
  font-weight: 900; font-family: 'Playfair Display', serif; font-size: calc(14px * var(--s)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px #000, inset 0 0 0 2px #c1121f; transition: left 0.6s, top 0.6s; }

/* 액션 바 */
.action-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 10px 14px 14px; background: linear-gradient(0deg, rgba(5,2,15,0.95), rgba(5,2,15,0.6)); border-top: 1px solid rgba(255, 209, 102, 0.25); min-height: 86px; }
.my-hand { min-width: 180px; font-size: 13px; color: #c9b8e8; line-height: 1.5; }
.my-hand b { color: var(--gold); font-size: 15px; }
.my-hand .eqv { color: var(--cyan); font-family: 'Orbitron', sans-serif; }
.act-btns { display: flex; gap: 10px; align-items: stretch; }
.act { min-width: 112px; padding: 12px 16px; border-radius: 14px; border: none; font-family: 'Black Han Sans', sans-serif; font-size: 18px; letter-spacing: 1px; color: #fff; transition: transform 0.1s, filter 0.2s; }
.act small { display: block; font-family: 'Orbitron', sans-serif; font-size: 12px; opacity: 0.9; letter-spacing: 0; }
.act:active { transform: translateY(2px); }
.act:disabled { filter: grayscale(1) brightness(0.5); cursor: default; }
.act.fold { background: linear-gradient(180deg, #6c757d, #343a40); box-shadow: 0 3px 0 #1d2124; }
.act.call { background: linear-gradient(180deg, #4cc9f0, #0077b6); box-shadow: 0 3px 0 #023e8a, 0 0 14px rgba(76, 201, 240, 0.5); }
.act.raise { background: linear-gradient(180deg, #ff5fa2, #c9184a); box-shadow: 0 3px 0 #800f2f, 0 0 14px rgba(255, 45, 149, 0.5); }
.raise-box { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.presets { display: flex; gap: 5px; }
.presets button { flex: 1; padding: 5px 4px; font-size: 12px; border-radius: 8px; border: 1px solid #5b3f8c; background: #1d1040; color: #e6dcff; }
.presets button:hover { border-color: var(--pink); }
.raise-box input[type=range] { width: 100%; accent-color: var(--pink); }
.action-bar.wait .act-btns, .action-bar.wait .raise-box { opacity: 0.35; pointer-events: none; }
.keys { font-size: 11px; color: #7d6aa3; }

/* 로그 */
.log { position: fixed; right: 10px; top: 56px; bottom: 110px; width: 280px; z-index: 8; background: rgba(8, 3, 20, 0.92); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 10px; overflow-y: auto; font-size: 12px; line-height: 1.6; display: none; }
.log.show { display: block; }
.log .h { color: var(--gold); margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 4px; }

/* ---------------- 연출 레이어 ---------------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 49; opacity: 0; }
#flash.go { animation: flash 0.6s ease-out; }
@keyframes flash { from { opacity: 0.55; } to { opacity: 0; } }
#game.shake { animation: shake 0.5s; }
@keyframes shake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }
.banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0.3); opacity: 0; z-index: 60; pointer-events: none; text-align: center; transition: transform 0.35s cubic-bezier(.2,1.6,.4,1), opacity 0.3s; }
.banner.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.banner .b-title { font-family: 'Monoton', cursive; font-size: clamp(30px, 7vw, 84px); color: #fff; white-space: nowrap;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--bc, var(--cyan)), 0 0 38px var(--bc, var(--cyan)), 0 0 70px var(--bc, var(--cyan)); }
.banner .b-sub { font-family: 'Black Han Sans', sans-serif; font-size: clamp(16px, 2.6vw, 28px); color: #fff; text-shadow: 0 0 10px #000, 0 0 4px #000; margin-top: 6px; }
.banner.info { --bc: var(--cyan); }
.banner.good { --bc: var(--green); }
.banner.great { --bc: var(--pink); }
.banner.jackpot { --bc: var(--gold); }
.banner.jackpot .b-title { animation: rainbow 0.6s linear infinite; }
.banner.bad { --bc: #ff4d6d; }
@keyframes rainbow { 0% { color: #fff; } 33% { color: #ffe066; } 66% { color: #ff9ecf; } }
#slot { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); z-index: 61; transition: transform 0.4s cubic-bezier(.2,1.5,.4,1); text-align: center;
  background: linear-gradient(180deg, #c1121f, #6a040f); border: 6px solid var(--gold); border-radius: 24px; padding: 18px 26px; box-shadow: 0 0 60px var(--gold); }
#slot.show { transform: translate(-50%, -50%) scale(1); }
#slot .reels { display: flex; gap: 10px; }
#slot .reel { width: 90px; height: 100px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 900; color: #c1121f; font-family: 'Playfair Display', serif; box-shadow: inset 0 6px 10px rgba(0,0,0,0.4); }
#slot .reel.lock { animation: lock 0.3s; }
@keyframes lock { 50% { transform: scale(1.15); } }
#slot .slot-text { font-family: 'Monoton', cursive; color: var(--gold); font-size: 36px; margin-top: 10px; text-shadow: 0 0 12px var(--gold); }

/* 모달 */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.show { display: flex; }
.modal-box { width: min(620px, 100%); max-height: 88vh; overflow-y: auto; background: linear-gradient(160deg, #1d0b3d, #0b0420); border: 2px solid var(--gold); border-radius: 18px; padding: 22px 24px; box-shadow: 0 0 40px rgba(255, 45, 149, 0.4); user-select: text; }
.modal-box h2 { margin: 0 0 10px; font-family: 'Monoton', cursive; font-weight: 400; color: #fff; text-shadow: 0 0 12px var(--pink); font-size: 30px; text-align: center; }
.modal-box h3 { color: var(--gold); margin: 16px 0 6px; font-size: 16px; }
.modal-box p, .modal-box li { font-size: 14px; line-height: 1.7; color: #e6dcff; }
.modal-box table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modal-box td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.modal-actions button { padding: 12px 22px; border-radius: 12px; border: none; font-family: 'Black Han Sans', sans-serif; font-size: 17px; }
.modal-actions .primary { background: linear-gradient(180deg, #fff3b0, var(--gold) 40%, #c98b00); color: #2b1600; }
.modal-actions .secondary { background: #3a2766; color: #fff; }
.result-big { text-align: center; font-size: 15px; color: #ddd; }
.result-big .pts { font-family: 'Orbitron', sans-serif; color: var(--gold); font-size: 24px; }
.start-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(5,1,15,0.85); flex-direction: column; gap: 16px; cursor: pointer; }
.start-overlay .neon-title .t1 { font-size: clamp(28px, 6vw, 60px); }
.start-overlay .tap { font-family: 'Black Han Sans', sans-serif; color: var(--gold); font-size: 20px; animation: flicker 2s infinite; }

/* 메이드 배지 (내 자리) */
.made-badge { position: absolute; bottom: calc(100% + 6px * var(--s)); left: 50%; transform: translateX(-50%) scale(0.6); opacity: 0; z-index: 8; pointer-events: none;
  display: flex; align-items: center; gap: calc(6px * var(--s)); white-space: nowrap; padding: calc(4px * var(--s)) calc(10px * var(--s));
  border-radius: 999px; background: rgba(10, 4, 25, 0.92); border: 2px solid var(--mb, var(--green)); font-size: calc(13px * var(--s));
  box-shadow: 0 0 14px var(--mb, var(--green)); transition: transform 0.3s cubic-bezier(.2,1.6,.4,1), opacity 0.25s; }
.made-badge.show { opacity: 1; transform: translateX(-50%) scale(1); }
.made-badge .mb-tag { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.8em; color: #111; background: var(--mb, var(--green)); padding: 0 6px; border-radius: 6px; }
.made-badge b { color: #fff; }
.made-badge .mb-grade { font-weight: 900; color: var(--mb, var(--green)); }
.made-badge .mb-eq { font-family: 'Orbitron', sans-serif; color: var(--cyan); }
.made-badge.nuts { --mb: var(--gold); animation: nutsGlow 1.2s ease-in-out infinite alternate; }
.made-badge.top { --mb: var(--pink); }
.made-badge.high { --mb: var(--green); }
.made-badge.mid { --mb: var(--cyan); }
.made-badge.low { --mb: #ff9f1c; }
@keyframes nutsGlow { to { box-shadow: 0 0 26px var(--gold), 0 0 6px #fff; } }
.made-line b.g-nuts { color: var(--gold); } .made-line b.g-top { color: var(--pink); } .made-line b.g-high { color: var(--green); }
.made-line b.g-mid { color: var(--cyan); } .made-line b.g-low { color: #ff9f1c; }
.made-line small { color: #9a88c0; }

/* 세로(모바일) 테이블 */
.table.portrait .felt-logo { top: 20%; font-size: calc(24px * var(--s)); }
.table.portrait .pot { top: 34%; }
.table.portrait .board { gap: calc(4px * var(--s)); }
.table.portrait .table-msg { top: 64%; white-space: normal; width: 70%; text-align: center; }

/* 반응형 */
@media (max-width: 760px) {
  .table-wrap { padding: 26px 8px 34px; }
  .hud { gap: 4px; padding: 6px 8px; }
  .hud .venue { font-size: 13px; }
  .hud-item { font-size: 10px; padding: 3px 6px; }
  .hud-item b { font-size: 11px; }
  .hud-btns { margin-left: 0; flex-wrap: wrap; }
  .hud-btns button { padding: 3px 6px; font-size: 12px; }
  .act { min-width: 86px; font-size: 15px; padding: 10px; }
  .raise-box { min-width: 200px; }
  .my-hand { min-width: 0; width: 100%; text-align: center; }
  .keys { display: none; }
  .log { width: auto; left: 10px; }
}