/* ══════════════════════════════════════════════
   XXXtreme Lightning Baccarat — style.css
══════════════════════════════════════════════ */

/* ── 변수 ── */
:root {
  --gold:    #c9a84c;
  --gold2:   #f5d67a;
  --ltng:    #ffe047;
  --ltng2:   #ffb800;
  --blue:    #4a8fff;
  --blue2:   #93c5fd;
  --red:     #ff5b5b;
  --red2:    #fca5a5;
  --teal:    #2dd4bf;
  --green:   #4ade80;
  --purple:  #c084fc;
  --dark:    #06080e;
  --dark2:   #0b0f1e;
  --dark3:   #111827;
  --felt:    #063318;
  --border:  rgba(201,168,76,.2);
  --text:    #e8dfc8;
  --dim:     rgba(232,223,200,.5);
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body {
  font-family: 'Rajdhani', sans-serif;
  background: var(--dark);
  color: var(--text);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(37,99,216,.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 105%, rgba(192,57,43,.15) 0%, transparent 55%);
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; }

/* ══════════════════════════════════════════════
   배경 번개
══════════════════════════════════════════════ */
#bg-bolts {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bolt {
  position: absolute; top: -5%; width: 1px; height: 110%;
  background: linear-gradient(to bottom, transparent, var(--ltng) 50%, transparent);
  opacity: 0; filter: blur(.5px);
}
.bolt:nth-child(1) { left: 8%;  animation: bfall 3.5s 0s   infinite; }
.bolt:nth-child(2) { left: 28%; animation: bfall 4.8s 1.1s infinite; }
.bolt:nth-child(3) { left: 55%; animation: bfall 3.2s 2.3s infinite; }
.bolt:nth-child(4) { left: 74%; animation: bfall 4.2s 0.7s infinite; }
.bolt:nth-child(5) { left: 91%; animation: bfall 3.8s 3.1s infinite; }
@keyframes bfall {
  0%   { opacity:0; transform:scaleY(.05) translateY(-100%); }
  8%   { opacity:.9; }
  12%  { opacity:.2; }
  16%  { opacity:.85; }
  22%  { opacity:0; transform:scaleY(1) translateY(5%); }
  100% { opacity:0; }
}

/* ══════════════════════════════════════════════
   토스트
══════════════════════════════════════════════ */
#toast {
  position: fixed; top: 68px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 300; opacity: 0; transition: all .28s;
  pointer-events: none;
  background: rgba(6,8,16,.95);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: .45rem 1.1rem;
  font-family: 'Cinzel', serif; font-size: .85rem; color: var(--gold2);
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════
   라이트닝 폭발 오버레이
══════════════════════════════════════════════ */
#lightning-burst {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,224,71,.08);
  pointer-events: none;
  animation: burst-bg .7s ease-out forwards;
}
@keyframes burst-bg {
  0%   { background: rgba(255,224,71,.28); }
  100% { background: rgba(255,224,71,.0);  }
}
.burst-inner {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  animation: burst-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes burst-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
.burst-icon {
  font-size: 5rem;
  filter: drop-shadow(0 0 24px var(--ltng));
}
.burst-mult {
  font-family: 'Cinzel', serif; font-size: 2.5rem; font-weight: 900;
  color: var(--ltng); text-shadow: 0 0 30px rgba(255,224,71,.8);
}

/* ══════════════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════════════ */
#auth-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,8,16,.97);
  display: flex; align-items: center; justify-content: center;
}
.auth-box {
  background: linear-gradient(145deg, #0c1428, #060c1a);
  border: 1px solid var(--gold); border-radius: 20px;
  padding: 2.5rem 2rem; width: 100%; max-width: 420px;
  box-shadow: 0 0 80px rgba(201,168,76,.15), 0 0 150px rgba(37,99,216,.1);
  position: relative; z-index: 1;
}
.auth-logo {
  font-family: 'Cinzel', serif; font-size: .78rem;
  letter-spacing: .35em; color: var(--dim);
  text-align: center; margin-bottom: .35rem;
}
.auth-title {
  font-family: 'Cinzel', serif; font-size: 1.7rem; font-weight: 900;
  text-align: center; line-height: 1.15; margin-bottom: 1.6rem;
  background: linear-gradient(135deg, var(--gold), var(--ltng), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-tabs {
  display: flex; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); margin-bottom: 1.2rem;
}
.atab {
  flex: 1; padding: .6rem; text-align: center;
  font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .1em;
  background: transparent; border: none; color: var(--dim); transition: all .2s;
}
.atab.active { background: var(--gold); color: #000; font-weight: 700; }
.auth-err {
  background: rgba(255,91,91,.1); border: 1px solid rgba(255,91,91,.35);
  border-radius: 6px; padding: .5rem .8rem;
  font-size: .82rem; color: #ff8080; margin-bottom: .8rem;
}
.form-group { margin-bottom: .85rem; }
.form-group label {
  display: block; font-size: .7rem; letter-spacing: .15em;
  color: var(--gold); margin-bottom: .3rem; text-transform: uppercase;
}
.form-group small {
  font-size: .68rem; color: var(--dim);
  margin-top: .2rem; display: block;
}
.form-inp {
  width: 100%; padding: .65rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: 'Rajdhani', sans-serif;
  font-size: .95rem; outline: none; transition: border-color .2s;
}
.form-inp:focus { border-color: var(--gold); }
.btn-auth {
  width: 100%; padding: .82rem; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #000; font-family: 'Cinzel', serif; font-size: .9rem;
  font-weight: 700; letter-spacing: .1em; transition: all .2s;
  box-shadow: 0 4px 20px rgba(201,168,76,.3);
}
.btn-auth:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(201,168,76,.45);
}

/* ══════════════════════════════════════════════
   APP 레이아웃
══════════════════════════════════════════════ */
#app {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ── NAV ── */
#topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.4rem;
  background: rgba(6,8,16,.92); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 50; flex-shrink: 0;
}
.nav-brand { display: flex; flex-direction: column; }
.nav-logo {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: .95rem;
  background: linear-gradient(90deg, var(--gold), var(--ltng));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-sub {
  font-size: .6rem; letter-spacing: .25em;
  color: var(--dim); margin-top: .05rem;
}
.nav-right { display: flex; align-items: center; gap: .6rem; }
.nav-av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--gold); object-fit: cover;
}
.nav-nm { font-size: .88rem; font-weight: 600; }
.nav-pts {
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 20px; padding: .22rem .75rem;
  font-family: 'Cinzel', serif; font-size: .8rem; color: var(--gold2);
}
.btn-nav {
  padding: .32rem .75rem; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  color: var(--dim); font-family: 'Cinzel', serif;
  font-size: .7rem; letter-spacing: .06em; transition: all .2s;
}
.btn-nav:hover { border-color: var(--gold); color: var(--gold); }
.btn-nav.admin {
  border-color: rgba(255,150,80,.3);
  color: #ff9a60; background: rgba(255,120,50,.08);
}

/* ── MAIN GRID ── */
#main {
  display: grid; grid-template-columns: 1fr 290px; gap: 1rem;
  padding: .9rem 1.4rem; flex: 1;
  max-width: 1400px; width: 100%; margin: 0 auto;
}



#game-col { display: flex; flex-direction: column; gap: .85rem; }

/* ── 상태 바 ── */
#status-bar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem 1rem;
}
.spill {
  display: inline-flex; align-items: center;
  padding: .28rem .75rem; border-radius: 20px;
  font-family: 'Cinzel', serif; font-size: .72rem;
  letter-spacing: .1em; font-weight: 700;
}
.spill.idle    { background:rgba(120,120,120,.15); border:1px solid rgba(120,120,120,.3); color:#888; }
.spill.open    {
  background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.35); color:var(--green);
  animation: pulse-sp 1.4s ease-in-out infinite;
}
.spill.lightning{ background:rgba(255,224,71,.15);  border:1px solid rgba(255,224,71,.5);  color:var(--ltng);
  animation: pulse-sp 0.8s ease-in-out infinite; }
.spill.dealing { background:rgba(74,143,255,.1);  border:1px solid rgba(74,143,255,.3);  color:var(--blue2); }
.spill.result  { background:rgba(201,168,76,.1);   border:1px solid rgba(201,168,76,.35); color:var(--gold2); }
@keyframes pulse-sp {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.35); }
  50%     { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
#status-desc { font-size: .8rem; color: var(--dim); flex: 1; }
#timer-wrap  { display: flex; align-items: center; gap: .4rem; }
.timer-ring  { width: 42px; height: 42px; transform: rotate(-90deg); }
.t-bg  { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.t-arc {
  fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .95s linear, stroke .3s;
}
#t-num { font-family:'Cinzel',serif; font-size:.9rem; font-weight:700; color:var(--gold2); }
.t-label { font-size:.7rem; color:var(--dim); }
.fee-notice {
  font-size: .72rem; color: var(--ltng2);
  background: rgba(255,184,0,.08);
  border: 1px solid rgba(255,184,0,.25);
  border-radius: 5px; padding: .2rem .55rem;
}

/* ── 라이트닝 패널 ── */
#lightning-panel {
  background: linear-gradient(135deg, rgba(255,224,71,.05), rgba(74,143,255,.06));
  border: 1px solid rgba(255,224,71,.35); border-radius: 12px;
  padding: .8rem 1rem; overflow: hidden; position: relative;
}
/* 패널 등장 */
#lightning-panel.reveal-start {
  animation: lp-flash-in .35s ease-out;
}
@keyframes lp-flash-in {
  0%   { background: rgba(255,224,71,.3); box-shadow: 0 0 40px rgba(255,224,71,.5); }
  100% { background: linear-gradient(135deg, rgba(255,224,71,.05), rgba(74,143,255,.06)); box-shadow: none; }
}
.lp-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem;
}
.lp-bolt {
  font-size: 1.2rem; filter: drop-shadow(0 0 8px var(--ltng));
  animation: flicker 1.5s infinite;
}
@keyframes flicker {
  0%,100%{opacity:1} 45%{opacity:.7} 50%{opacity:1} 70%{opacity:.5} 75%{opacity:1}
}
.lp-title {
  font-family: 'Cinzel', serif; font-size: .82rem; letter-spacing: .22em;
  color: var(--ltng); text-shadow: 0 0 12px rgba(255,224,71,.5);
}
.lp-count { font-size: .75rem; color: var(--dim); margin-left: auto; }
.lp-cards { display: flex; flex-wrap: wrap; gap: .45rem; }

/* 라이트닝 카드 미니 — 번개치며 등장 */
.lc-mini {
  display: flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,224,71,.3);
  border-radius: 7px; padding: .28rem .55rem;
  font-family: 'Cinzel', serif; font-size: .78rem;
  opacity: 0;
  animation: lc-strike .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes lc-strike {
  0%   { transform: scale(1.6) rotate(-8deg); opacity:0;
         filter: brightness(3) drop-shadow(0 0 12px var(--ltng)); }
  40%  { transform: scale(.9) rotate(2deg);  opacity:1;
         filter: brightness(1.8) drop-shadow(0 0 6px var(--ltng)); }
  70%  { filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0);      opacity:1;
         filter: brightness(1) drop-shadow(0 0 2px rgba(255,224,71,.3)); }
}
.lc-mini .lc-card { font-size: .85rem; }
.lc-mini.red   .lc-card { color: #e05555; }
.lc-mini.black .lc-card { color: #e0d8c8; }
.lc-mini .lc-m { color: var(--ltng); font-weight: 700; font-size: .82rem; }

/* 화면 번쩍임 (라이트닝 카드 공개 시) */
@keyframes screen-flash {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}
#ln-flash {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(255,224,71,1);
  pointer-events: none; opacity: 0;
}

/* ══════════════════════════════════════════════
   카드 테이블
══════════════════════════════════════════════ */
#card-table {
  background: linear-gradient(160deg, var(--felt), #041a0c);
  border: 2px solid rgba(201,168,76,.22); border-radius: 18px;
  position: relative; overflow: visible;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: .5rem; padding: 1.1rem .9rem;
}
.table-felt {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 50% 120%, rgba(22,163,74,.1), transparent 60%),
    repeating-linear-gradient(90deg, transparent, transparent 50px,
      rgba(255,255,255,.007) 50px, rgba(255,255,255,.007) 51px),
    repeating-linear-gradient(0deg,  transparent, transparent 50px,
      rgba(255,255,255,.007) 50px, rgba(255,255,255,.007) 51px);
}

/* 핸드 존 */
.hand-zone {
  display: flex; flex-direction: column;
  align-items: center; gap: .5rem;
  position: relative; z-index: 1;
}
.hz-header  { display: flex; align-items: center; gap: .5rem; }
.hz-label   { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.22em; }
.player-col { color: var(--red); }
.banker-col { color: var(--blue); }
.hz-score-wrap { display: flex; align-items: center; gap: .3rem; }
.hz-score {
  font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900;
  min-width: 2.6rem; text-align: center; line-height: 1;
  transition: color .25s ease;
  display: inline-block;
}
/* 카드 공개 시 점수 튀는 애니메이션 */
@keyframes score-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); filter: brightness(1.6); }
  65%  { transform: scale(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}
.hz-score.score-bump { animation: score-bump .45s cubic-bezier(.2,1.5,.4,1); }
.hz-mult {
  font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700;
  color: var(--ltng); background: rgba(255,224,71,.12);
  border: 1px solid rgba(255,224,71,.35);
  border-radius: 5px; padding: .15rem .38rem;
}
.card-row {
  display: flex; gap: .45rem;
  min-height: 92px; align-items: center;
  justify-content: center; flex-wrap: nowrap;
  overflow: visible; padding: .3rem .2rem;
}

/* VS 열 */
.vs-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .35rem; padding-top: 1.2rem; z-index: 1;
}
.vs-line {
  width: 1px; height: 35px;
  background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.vs-text {
  font-family: 'Cinzel', serif; font-size: .78rem;
  color: var(--dim); letter-spacing: .15em;
}
.natural-badge {
  font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .12em;
  color: var(--ltng); animation: badge-pop .3s ease;
}
.tie-badge {
  font-family: 'Cinzel', serif; font-size: .7rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 12px;
  background: rgba(45,212,191,.15); border: 1px solid rgba(45,212,191,.4);
  color: var(--teal); animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
.win-badge {
  font-family: 'Cinzel', serif; font-size: .7rem;
  font-weight: 700; letter-spacing: .08em;
  padding: .25rem .75rem; border-radius: 20px;
  animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}
.wb-player { background:rgba(255,91,91,.2);  border:1px solid rgba(255,91,91,.5);  color:var(--red); }
.wb-banker { background:rgba(74,143,255,.2); border:1px solid rgba(74,143,255,.5); color:var(--blue); }
.pair-badge {
  font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .1em;
  padding: .18rem .55rem; border-radius: 10px;
  background: rgba(255,224,71,.12); border: 1px solid rgba(255,224,71,.35);
  color: var(--ltng); animation: badge-pop .3s ease;
}
@keyframes badge-pop {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

/* ══════════════════════════════════════════════
   플레이잉 카드
══════════════════════════════════════════════ */
.card {
  /* 실제 카드 비율 63:88 (약 2:2.8) */
  width: 63px; height: 88px;
  border-radius: 7px;
  position: relative;
  perspective: 700px;
  flex-shrink: 0;
}
.card-inner {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  transform: rotateY(180deg);
}
.card.flipped .card-inner { transform: rotateY(0deg); }
.card-front, .card-back {
  position: absolute; inset: 0;
  border-radius: 7px; backface-visibility: hidden;
}

/* 뒷면 */
.card-back {
  background: linear-gradient(135deg, #1a0a2e, #0d1a3d);
  border: 2px solid rgba(201,168,76,.4);
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg,  transparent, transparent 5px,
      rgba(201,168,76,.07) 5px, rgba(201,168,76,.07) 6px),
    repeating-linear-gradient(-45deg, transparent, transparent 5px,
      rgba(201,168,76,.07) 5px, rgba(201,168,76,.07) 6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; transform: rotateY(180deg);
}

/* 앞면 */
.card-front {
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,.15);
  overflow: hidden;
}

/* 좌상단 숫자 — 절대위치 */
.c-rank {
  font-family: 'Cinzel', serif;
  font-size: .72rem; font-weight: 700;
  line-height: 1;
  position: absolute;
  top: 4px; left: 5px;
  z-index: 1;
}
.card-front.red   .c-rank { color: #c0392b; }
.card-front.black .c-rank { color: #111; }

/* 중앙 심볼 — 절대위치 완전 중앙 */
.c-mid {
  font-size: 1.85rem; line-height: 1;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.card-front.red   .c-mid { color: #c0392b; }
.card-front.black .c-mid { color: #111; }

/* 라이트닝 카드 강조 */
.card.lightning-card .card-front {
  box-shadow: inset 0 0 0 2px rgba(255,224,71,.5),
              0 0 16px rgba(255,224,71,.6);
}
.card.lightning-card::after {
  content: '⚡';
  position: absolute; top: -8px; right: -5px;
  font-size: .75rem;
  filter: drop-shadow(0 0 4px var(--ltng));
  animation: ltng-badge 1s ease-in-out infinite;
  z-index: 10;
}
@keyframes ltng-badge {
  0%,100% { transform:scale(1) rotate(0); }
  50%     { transform:scale(1.2) rotate(10deg); }
}

/* 카드 등장 */
@keyframes card-enter {
  from { transform: translateY(-25px) scale(.85); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}
.card-entering { animation: card-enter .3s ease-out; }

/* ══════════════════════════════════════════════
   베팅 패널
══════════════════════════════════════════════ */
#bet-panel {
  background: linear-gradient(160deg,
    rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: 14px; padding: .95rem;
}

/* ① 메인 베팅: PLAYER | TIE | BANKER */
.main-zones {
  display: grid; grid-template-columns: 1fr 72px 1fr;
  gap: .5rem; margin-bottom: .55rem;
}
.mzone {
  border-radius: 12px; padding: .9rem .4rem;
  text-align: center; cursor: pointer;
  transition: all .2s; border: 2px solid transparent;
  min-height: 90px; position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem;
}
.mz-player { background:rgba(255,91,91,.1);   border-color:rgba(255,91,91,.3); }
.mz-player:hover, .mz-player.sel {
  background:rgba(255,91,91,.22); border-color:var(--red);
  box-shadow:0 0 20px rgba(255,91,91,.25); transform:translateY(-2px);
}
.mz-tie { background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.25); }
.mz-tie:hover, .mz-tie.sel {
  background:rgba(45,212,191,.18); border-color:var(--teal);
  box-shadow:0 0 16px rgba(45,212,191,.2); transform:translateY(-2px);
}
.mz-banker { background:rgba(74,143,255,.1);  border-color:rgba(74,143,255,.3); }
.mz-banker:hover, .mz-banker.sel {
  background:rgba(74,143,255,.22); border-color:var(--blue);
  box-shadow:0 0 20px rgba(74,143,255,.25); transform:translateY(-2px);
}
.mz-name { font-family:'Cinzel',serif; font-size:.63rem; letter-spacing:.18em; color:var(--dim); }
.mz-odds { font-family:'Cinzel',serif; font-size:1.45rem; font-weight:900; line-height:1; }
.mz-player .mz-odds { color:var(--red); }
.mz-tie    .mz-odds { color:var(--teal); font-size:1.15rem; }
.mz-banker .mz-odds { color:var(--blue); }
.mz-stat   { font-size:.64rem; color:var(--dim); }

/* ② 페어 사이드베팅: PLAYER PAIR | BANKER PAIR */
.pair-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem; margin-bottom: .65rem;
}
.pair-zone {
  border-radius: 9px; padding: .55rem .5rem;
  text-align: center; cursor: pointer;
  transition: all .2s; border: 2px solid transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .18rem;
}
.pz-pp { background:rgba(255,91,91,.07);  border-color:rgba(255,91,91,.2); }
.pz-pp:hover, .pz-pp.sel {
  background:rgba(255,91,91,.17); border-color:var(--red);
  box-shadow:0 0 14px rgba(255,91,91,.2);
}
.pz-bp { background:rgba(74,143,255,.07); border-color:rgba(74,143,255,.2); }
.pz-bp:hover, .pz-bp.sel {
  background:rgba(74,143,255,.17); border-color:var(--blue);
  box-shadow:0 0 14px rgba(74,143,255,.2);
}
.pz-name { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.1em; color:var(--dim); }
.pz-odds { font-family:'Cinzel',serif; font-size:.95rem; font-weight:700; color:var(--ltng); }
.pz-amt  { font-size:.68rem; color:var(--dim); }

/* ── 칩 ── */
.chips-row {
  display: flex; gap: .38rem; justify-content: center;
  margin-bottom: .6rem;
}
.chip {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 2.5px solid; font-family: 'Cinzel', serif;
  font-size: .62rem; font-weight: 700; line-height: 1.2;
  cursor: pointer; transition: all .15s; user-select: none;
  position: relative;
}
.chip:hover  { transform: scale(1.15) translateY(-3px); filter:brightness(1.2); }
.chip:active { transform: scale(.91); }
.chip.active {
  transform: scale(1.18) translateY(-4px);
  box-shadow: 0 0 16px currentColor;
  filter: brightness(1.35);
}
.chip.active::after {
  content: ''; position:absolute; inset:-4px;
  border-radius: 50%; border: 2px solid currentColor;
  opacity: .5; animation: chip-ring .6s ease-out;
}
@keyframes chip-ring {
  from { transform:scale(.85); opacity:.8; }
  to   { transform:scale(1.2); opacity:0; }
}
.c-100 { border-color:var(--blue);   color:var(--blue);   background:rgba(74,143,255,.12); }
.c-500 { border-color:var(--red);    color:var(--red);    background:rgba(255,91,91,.12);  }
.c-1k  { border-color:var(--gold);   color:var(--gold);   background:rgba(201,168,76,.12); }
.c-5k  { border-color:var(--purple); color:var(--purple); background:rgba(192,132,252,.12);}
.c-10k { border-color:var(--green);  color:var(--green);  background:rgba(74,222,128,.12); }
.c-all { border-color:var(--ltng);   color:var(--ltng);   background:rgba(255,224,71,.08); font-size:.52rem; }

/* ── 존 위 베팅 금액 표시 ── */
.mz-bet-amt {
  font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700;
  color: var(--gold2); min-height: 1.1em; line-height: 1;
  transition: all .2s;
}
.mz-bet-amt.bump {
  animation: amt-bump .35s cubic-bezier(.2,1.5,.4,1);
}
@keyframes amt-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); color: var(--ltng); }
  100% { transform: scale(1); }
}

/* ── 액션 바 (수수료 + 버튼) ── */
.bet-action-bar {
  display: flex; flex-direction: column; gap: .4rem;
  margin-top: .5rem;
}
.bet-action-btns {
  display: flex; gap: .5rem; align-items: center;
}
.btn-clr {
  padding: .55rem .9rem; border: 1px solid var(--border);
  border-radius: 8px; background: transparent;
  color: var(--dim); transition: all .2s;
  font-size: .78rem; white-space: nowrap;
}
.btn-clr:hover { border-color:var(--red); color:var(--red); }
.btn-bet {
  flex: 1; padding: .6rem 1rem; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #000; font-family: 'Cinzel', serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  transition: all .2s; white-space: nowrap;
}
.btn-bet:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(201,168,76,.45);
  transform: translateY(-1px);
}
.btn-bet:disabled { opacity:.3; cursor:not-allowed; }
.cost-notice {
  font-size: .74rem; color: var(--ltng2);
  background: rgba(255,184,0,.07);
  border: 1px solid rgba(255,184,0,.18);
  border-radius: 6px; padding: .3rem .65rem;
  line-height: 1.5;
}
.my-bet {
  background: rgba(201,168,76,.07);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 8px; padding: .4rem .65rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: .6rem;
}
.my-bet-info { font-size: .82rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-bet-cancel {
  flex-shrink: 0;
  padding: .32rem .7rem; border-radius: 6px;
  border: 1px solid rgba(255,91,91,.4);
  background: rgba(255,91,91,.1); color: var(--red);
  font-size: .72rem; font-weight: 600; transition: all .18s;
  white-space: nowrap;
}
.btn-bet-cancel:hover:not(:disabled) {
  background: rgba(255,91,91,.22);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255,91,91,.25);
}
.btn-bet-cancel:disabled { opacity: .3; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   결과 오버레이
══════════════════════════════════════════════ */
/* ── 결과 배너 (인라인, 카드 테이블 위) ── */
#result-banner {
  width: 100%; border-radius: 10px; overflow: hidden;
  margin-bottom: .5rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; gap: .6rem;
  animation: rb-slide-in .35s cubic-bezier(.2,1.2,.4,1);
}
#result-banner.hidden { display: none; }
@keyframes rb-slide-in {
  from { opacity:0; transform:translateY(-12px) scaleY(.85); }
  to   { opacity:1; transform:translateY(0)     scaleY(1);   }
}
/* 결과별 색상 */
#result-banner.rb-player {
  background: linear-gradient(90deg, rgba(192,57,43,.28), rgba(192,57,43,.08));
  border: 1px solid rgba(192,57,43,.45);
}
#result-banner.rb-banker {
  background: linear-gradient(90deg, rgba(52,152,219,.28), rgba(52,152,219,.08));
  border: 1px solid rgba(52,152,219,.45);
}
#result-banner.rb-tie {
  background: linear-gradient(90deg, rgba(241,196,15,.22), rgba(241,196,15,.06));
  border: 1px solid rgba(241,196,15,.4);
}
.rb-left {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex:1;
}
#rb-icon  { font-size: 1.5rem; line-height:1; }
#rb-title {
  font-family:'Cinzel',serif; font-size:1.05rem; font-weight:900;
  letter-spacing:.06em;
}
#rb-mults { font-size:.75rem; color:var(--ltng); font-family:'Cinzel',serif; }
#rb-pairs { font-size:.75rem; color:var(--teal); }
#rb-cd    { font-size:.68rem; color:var(--dim); white-space:nowrap; flex-shrink:0; }

/* 진행 바 */
#rb-progress {
  position: absolute; bottom:0; left:0; height:2px;
  background: linear-gradient(90deg,var(--gold),var(--ltng));
  transition: width 1s linear;
  border-radius: 0 0 10px 10px;
}

/* ── 당첨자 슬라이드 토스트 (화면 하단) ── */
#winner-toast {
  position: fixed; bottom: 1.2rem; left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 200; min-width: 240px; max-width: 380px; width: 90%;
  background: linear-gradient(145deg,#0d1428,#070b18);
  border: 1px solid rgba(74,222,128,.35);
  border-radius: 12px; padding: .7rem 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: transform .4s cubic-bezier(.2,1.2,.4,1);
}
#winner-toast.show {
  transform: translateX(-50%) translateY(0);
}
#winner-toast.hidden { display:none; }
.wt-inner { display:flex; flex-direction:column; gap:.3rem; }
.wt-label { font-size:.7rem; color:var(--green); letter-spacing:.1em;
            font-family:'Cinzel',serif; margin-bottom:.2rem; }
.wrow {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(74,222,128,.07);
  border-radius: 5px; padding: .22rem .5rem; font-size: .8rem;
}
.wrow-gain { color:var(--green); font-family:'Cinzel',serif; font-weight:700; font-size:.78rem; }

/* ══════════════════════════════════════════════
   사이드바
══════════════════════════════════════════════ */
#sidebar { display:flex; flex-direction:column; gap:.75rem; }

/* 데스크탑/모바일 전용 */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* 모바일 탭 래퍼 */
.mobile-tabs-wrap {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.mob-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.mob-tab {
  flex: 1; padding: .55rem .2rem;
  font-family: 'Cinzel', serif; font-size: .62rem;
  letter-spacing: .06em; color: var(--dim);
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  transition: all .18s; white-space: nowrap;
}
.mob-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(201,168,76,.06);
}
.mob-tab:hover:not(.active) { color: var(--text); }
.mob-tab-body { position: relative; }
.mob-pane { min-height: 160px; }
.mob-pane .panel-body { max-height: 200px; }
.mob-pane .road-wrap  { max-height: 200px; overflow-y: auto; }
.panel {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.panel-head {
  padding: .55rem .9rem; border-bottom: 1px solid var(--border);
  font-family: 'Cinzel', serif; font-size: .72rem;
  letter-spacing: .14em; color: var(--gold);
}
.panel-body { padding: .65rem; }
.scrollable { max-height: 165px; overflow-y: auto; }

/* 기록 */
.hist-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .76rem;
}
.hist-row:last-child { border: none; }
.hbadge {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: .62rem;
  font-weight: 700; flex-shrink: 0;
}
.hb-p { background:rgba(255,91,91,.2);  border:1px solid rgba(255,91,91,.4);  color:var(--red);  }
.hb-b { background:rgba(74,143,255,.2); border:1px solid rgba(74,143,255,.4); color:var(--blue); }
.hb-t { background:rgba(45,212,191,.2); border:1px solid rgba(45,212,191,.4); color:var(--teal); }

/* 로드맵 */
.road-wrap { display:flex; flex-wrap:wrap; gap:3px; padding:.5rem; }
.rdot {
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 700;
}
.rd-p { border-color:var(--red);  color:var(--red);  }
.rd-b { border-color:var(--blue); color:var(--blue); }
.rd-t { border-color:var(--teal); color:var(--teal); }

/* 내 내역 */
.mhrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .74rem;
}
.mhrow:last-child { border: none; }
.mhd-plus  { color:var(--green); font-family:'Cinzel',serif; font-size:.78rem; }
.mhd-minus { color:var(--red);   font-family:'Cinzel',serif; font-size:.78rem; }
.mhd-text  { color:var(--dim); font-size:.68rem; }

/* 순위 */
.rank-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .78rem;
}
.rank-row:last-child { border: none; }
.rnum     { width:18px; text-align:center; color:var(--dim); font-size:.72rem; }
.rnum.top { color:var(--gold); font-family:'Cinzel',serif; font-weight:700; }
.rav      { width:22px; height:22px; border-radius:50%; border:1px solid var(--border); }
.rnm      { flex:1; font-size:.76rem; }
.rpts     { color:var(--gold2); font-family:'Cinzel',serif; font-size:.73rem; }

/* 관리자 패널 스타일은 admin.css 로 분리됨 */

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
/* 존별 취소 버튼 */
.mz-undo {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.4); color: var(--dim);
  font-size: .65rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; padding: 0; z-index: 2;
}
.mz-undo:hover { border-color:var(--red); color:var(--red); background:rgba(255,91,91,.15); }

/* ══════════════════════════════════════
   모바일 공통 (1050px: 사이드바 아래로)
══════════════════════════════════════ */
@media (max-width: 1050px) {
  #main { grid-template-columns: 1fr; }
  #sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .6rem;
  }
  /* 1050px~641px 구간: 데스크탑 패널 유지, 모바일탭 숨김 */
  .desktop-only { display: block !important; }
  .mobile-only  { display: none !important; }
}

/* ══════════════════════════════════════
   모바일 (640px 이하)
══════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── 네비 ── */
  #topnav       { padding: .42rem .65rem; gap: .35rem; }
  .nav-sub      { display: none; }
  .nav-logo     { font-size: .75rem; }
  .nav-nm       { display: none; }
  .nav-av       { width: 24px; height: 24px; }
  .nav-pts      { font-size: .7rem; padding: .15rem .5rem; }
  .btn-nav      { font-size: .6rem; padding: .22rem .5rem; }

  /* ── 레이아웃 ── */
  #main         { padding: .3rem .35rem; gap: .45rem; }
  #game-col     { gap: .45rem; }

  /* ── 상태 바 ── */
  #status-bar   { padding: .4rem .65rem; gap: .45rem; flex-wrap: nowrap; }
  #status-desc  { font-size: .68rem; flex: 1; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spill        { font-size: .62rem; padding: .2rem .55rem; white-space: nowrap; }
  #timer-wrap   { flex-shrink: 0; }

  /* ── 라이트닝 패널 ── */
  #lightning-panel { padding: .45rem .55rem; }
  .lp-header    { gap: .35rem; }
  .lp-title     { font-size: .68rem; }
  .lp-cards     { gap: .25rem; flex-wrap: wrap; }
  .lc-mini      { font-size: .7rem; padding: .15rem .3rem; }

  /* ── 카드 테이블 ── */
  #card-table   {
    padding: .55rem .4rem; gap: .25rem;
    grid-template-columns: 1fr 32px 1fr;
    border-radius: 12px;
  }
  .hand-zone    { gap: .3rem; }
  .hz-header    { gap: .3rem; }
  .hz-label     { font-size: .58rem; letter-spacing: .1em; }
  .hz-score     { font-size: 1.6rem; min-width: 1.8rem; }
  .hz-mult      { font-size: .56rem; padding: .08rem .25rem; }
  .card-row     { gap: .28rem; min-height: 70px; padding: .15rem .05rem; }
  .card         { width: 50px; height: 72px; border-radius: 5px; }
  .c-rank       { font-size: .6rem; top: 2px; left: 3px; }
  .c-mid        { font-size: 1.3rem; }
  .card-back    { font-size: 1rem; }
  .vs-col       { padding-top: .8rem; }
  .vs-text      { font-size: .58rem; }
  .vs-line      { height: 18px; }
  .win-badge    { font-size: .58rem; padding: .18rem .38rem; }
  .pair-badge   { font-size: .55rem; padding: .12rem .3rem; }

  /* ── 결과 배너 ── */
  #result-banner { padding: .4rem .6rem; border-radius: 8px; }
  .rb-left      { gap: .4rem; }
  #rb-icon      { font-size: 1.15rem; }
  #rb-title     { font-size: .85rem; letter-spacing: .04em; }
  #rb-mults     { font-size: .68rem; }
  #rb-pairs     { font-size: .68rem; }
  #rb-cd        { font-size: .62rem; }

  /* ── 베팅 패널 ── */
  #bet-panel    { padding: .55rem .45rem; border-radius: 10px; }

  /* 칩: 6개 한 줄, 균등 배치 */
  .chips-row    {
    gap: .22rem; justify-content: space-between;
    margin-bottom: .45rem;
  }
  .chip         { width: 42px; height: 42px; font-size: .56rem; border-width: 2px; }

  /* 메인 존 */
  .main-zones   {
    grid-template-columns: 1fr 52px 1fr;
    gap: .28rem; margin-bottom: .35rem;
  }
  .mzone        { min-height: 72px; padding: .55rem .2rem; border-radius: 9px; border-width: 1.5px; }
  .mz-name      { font-size: .52rem; letter-spacing: .08em; }
  .mz-odds      { font-size: 1.05rem; }
  .mz-bet-amt   { font-size: .72rem; }
  .mz-stat      { font-size: .52rem; }
  .mz-undo      { width: 16px; height: 16px; font-size: .55rem; top: 3px; right: 3px; }

  /* 페어 존 */
  .pair-row     { gap: .28rem; margin-bottom: .4rem; }
  .pair-zone    { padding: .38rem .3rem; border-radius: 7px; border-width: 1.5px; }
  .pz-name      { font-size: .52rem; letter-spacing: .06em; }
  .pz-odds      { font-size: .8rem; }
  .pz-amt       { font-size: .6rem; }

  /* 액션 바 */
  .bet-action-bar  { gap: .28rem; margin-top: .38rem; }
  .bet-action-btns { gap: .38rem; }
  .btn-clr      { padding: .48rem .65rem; font-size: .7rem; border-radius: 7px; }
  .btn-bet      { padding: .52rem .9rem;  font-size: .75rem; border-radius: 7px; }
  .cost-notice  { font-size: .65rem; padding: .22rem .5rem; line-height: 1.55; }
  .my-bet       { font-size: .7rem; padding: .28rem .5rem; }

  /* ── 사이드바 → 탭 패널로 전환 ── */
  #sidebar        { gap: 0; }
  .desktop-only   { display: none !important; }
  .mobile-only    { display: block !important; }

  .mob-tabs       { }
  .mob-tab        { font-size: .65rem; padding: .58rem .15rem; }
  .mob-pane       { min-height: 140px; }
  .mob-pane .panel-body  { max-height: 180px; padding: .5rem; }
  .mob-pane .road-wrap   { max-height: 180px; padding: .45rem; gap: 4px; }
  .rdot           { width: 19px; height: 19px; font-size: .58rem; }

  /* ── 당첨 토스트 ── */
  #winner-toast { bottom: .55rem; max-width: 92vw; padding: .55rem .75rem; }
  .wt-label     { font-size: .65rem; }
  .wrow         { font-size: .72rem; padding: .18rem .42rem; }
}

/* ══════════════════════════════════════
   초소형 (375px 이하)
══════════════════════════════════════ */
@media (max-width: 375px) {
  .chips-row    { gap: .15rem; }
  .chip         { width: 38px; height: 38px; font-size: .5rem; }
  .card         { width: 44px; height: 63px; }
  .hz-score     { font-size: 1.35rem; }
  .mzone        { min-height: 64px; padding: .45rem .15rem; }
  .mz-odds      { font-size: .95rem; }
  .main-zones   { grid-template-columns: 1fr 46px 1fr; gap: .22rem; }
  #card-table   { grid-template-columns: 1fr 28px 1fr; }
  .vs-line      { height: 14px; }
  #bet-panel    { padding: .45rem .35rem; }
}
  .card { width: 46px; height: 66px; }
  .hz-score { font-size: 1.45rem; }
  .mzone { min-height: 68px; }
  .main-zones { grid-template-columns: 1fr 50px 1fr; }
}

/* ══════════════════════════════════════
   게임 정지 오버레이
══════════════════════════════════════ */
.paused-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: fade-in .4s ease;
}
.paused-overlay.hidden { display: none; }
.paused-box {
  background: linear-gradient(145deg,#1a0a2e,#0d1a3d);
  border: 2px solid rgba(220,50,50,.4);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  text-align: center;
  box-shadow: 0 0 40px rgba(220,50,50,.2);
}
.paused-icon  { font-size: 3rem; margin-bottom: .8rem;
                animation: paused-pulse 1.5s ease-in-out infinite; }
.paused-title { font-family:'Cinzel',serif; font-size: 1.6rem;
                font-weight:700; color:#e05555; letter-spacing:.1em; }
.paused-sub   { margin-top:.6rem; color:rgba(255,255,255,.5); font-size:.9rem; }