/* ════════════════════════════════════════════════════════════════════ */
/* NOIR BLACKJACK - STYLING                                             */
/* ════════════════════════════════════════════════════════════════════ */

/* GLOBAL RESETS AND ROOT VARIABLES */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* CSS Custom Properties for theme colors */
:root {
  --bg:#080c0f;                          /* Main background dark color */
  --bg2:#0d1318;                         /* Secondary background */
  --bg3:#111820;                         /* Tertiary background */
  --felt:#0a1f15;                        /* Felt table light green */
  --felt2:#0c2419;                       /* Felt table darker green */
  --gold:#c8a84b;                        /* Primary accent gold */
  --gold2:#e8c96a;                       /* Secondary gold */
  --gold-border:rgba(200,168,75,0.3);    /* Gold border color */
  --gold-dim:rgba(200,168,75,0.1);       /* Dimmed gold */
  --white:#f0ead8;                       /* Text white */
  --muted:rgba(240,234,216,0.45);        /* Muted text */
  --red:#c0392b;                         /* Dark red for losses */
  --red2:#e74c3c;                        /* Bright red */
  --green:#1db954;                       /* Green for wins */
  --shadow:0 24px 80px rgba(0,0,0,0.9);  /* Deep shadow */
}

/* BASE HTML AND BODY STYLES */
html,body { background:var(--bg); color:var(--white); font-family:'Rajdhani',sans-serif; min-height:100vh; overflow-x:hidden; }

/* Textured noise overlay for background depth */
body::before { 
  content:''; position:fixed; inset:0; 
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); 
  pointer-events:none; z-index:9999; opacity:0.5; 
}

/* ════════════════════════════════════════════════════════════════════ */
/* HEADER STYLING */
/* ════════════════════════════════════════════════════════════════════ */
header { 
  display:flex; align-items:center; justify-content:space-between; 
  padding:18px 48px; border-bottom:1px solid var(--gold-border); 
  background:linear-gradient(180deg,rgba(200,168,75,0.05) 0%,transparent 100%); 
  flex-wrap:wrap; gap:12px; 
}
.logo { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--gold); letter-spacing:6px; text-transform:uppercase; }
.logo span { color:var(--white); font-weight:300; font-style:italic; }
.header-right { display:flex; gap:24px; align-items:center; }
.hinfo-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); display:block; }
.hinfo-val { font-size:18px; font-weight:700; color:var(--gold); }
.rules-btn { background:none; border:1px solid rgba(200,168,75,0.2); color:var(--muted); font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:8px 14px; border-radius:4px; cursor:pointer; transition:all .2s; }
.rules-btn:hover { color:var(--gold); border-color:var(--gold-border); }

/* ════════════════════════════════════════════════════════════════════ */
/* MAIN CONTAINER */
/* ════════════════════════════════════════════════════════════════════ */
main { max-width:1200px; margin:0 auto; padding:28px 32px 40px; display:flex; flex-direction:column; gap:18px; }

/* ════════════════════════════════════════════════════════════════════ */
/* LOBBY SCREEN STYLING */
/* ════════════════════════════════════════════════════════════════════ */
#lobby-screen { display:flex; flex-direction:column; align-items:center; gap:32px; padding:20px 0; }
.lobby-title { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:700; color:var(--gold); text-align:center; letter-spacing:6px; }
.lobby-sub { font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* Game mode selection cards */
.lobby-modes { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:700px; }
.lobby-card { background:var(--bg3); border:1px solid rgba(200,168,75,0.12); border-radius:18px; padding:34px 30px; cursor:pointer; transition:all .25s; position:relative; overflow:hidden; }
.lobby-card:hover { border-color:var(--gold-border); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.lobby-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(200,168,75,0.05),transparent); opacity:0; transition:opacity .25s; }
.lobby-card:hover::before { opacity:1; }
.lobby-icon { font-size:40px; margin-bottom:14px; }
.lobby-card-title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--white); margin-bottom:8px; }
.lobby-card-desc { font-size:13px; color:var(--muted); line-height:1.65; }
.lobby-badge { position:absolute; top:16px; right:16px; background:rgba(200,168,75,0.12); border:1px solid var(--gold-border); color:var(--gold); font-size:9px; letter-spacing:3px; text-transform:uppercase; padding:4px 11px; border-radius:20px; }

/* ════════════════════════════════════════════════════════════════════ */
/* SETUP SCREEN STYLING */
/* ════════════════════════════════════════════════════════════════════ */
#setup-screen { display:none; flex-direction:column; align-items:center; gap:22px; padding:10px 0; }
.setup-title { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:700; color:var(--gold); }

/* Player input slots */
.setup-players { display:flex; flex-direction:column; gap:10px; width:100%; max-width:520px; }
.player-slot { display:flex; align-items:center; gap:12px; background:var(--bg3); border:1px solid rgba(200,168,75,0.15); border-radius:10px; padding:13px 16px; }
.player-num { width:28px; height:28px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0; }
.player-name-inp { flex:1; background:transparent; border:none; outline:none; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600; color:var(--white); letter-spacing:1px; }
.player-name-inp::placeholder { color:rgba(240,234,216,0.2); }
.rm-btn { background:none; border:none; color:rgba(240,234,216,0.2); font-size:18px; cursor:pointer; padding:4px 6px; transition:color .2s; }
.rm-btn:hover { color:var(--red2); }

/* Add player button */
.add-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px dashed rgba(200,168,75,0.2); color:rgba(200,168,75,0.4); border-radius:10px; padding:13px; font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s; width:100%; max-width:520px; }
.add-btn:hover { border-color:var(--gold-border); color:var(--gold); }

/* Starting chips selection */
.chips-row { display:flex; align-items:center; gap:16px; max-width:520px; width:100%; }
.chips-lbl { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.chips-opts { display:flex; gap:8px; flex-wrap:wrap; }
.chips-opt { padding:7px 16px; border:1px solid rgba(200,168,75,0.2); border-radius:6px; background:transparent; color:var(--muted); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; letter-spacing:1px; }
.chips-opt.sel { border-color:var(--gold); color:var(--gold); background:rgba(200,168,75,0.1); }

/* ════════════════════════════════════════════════════════════════════ */
/* GAME SCREEN */
/* ════════════════════════════════════════════════════════════════════ */
#game-screen { display:none; flex-direction:column; gap:18px; }

/* ════════════════════════════════════════════════════════════════════ */
/* TABLE STYLING */
/* ════════════════════════════════════════════════════════════════════ */
.table-wrap { 
  background:radial-gradient(ellipse 80% 60% at 50% 50%,var(--felt2) 0%,var(--felt) 60%,#050f09 100%); 
  border-radius:120px 120px 60px 60px / 60px 60px 30px 30px; 
  border:2px solid rgba(200,168,75,0.2); 
  box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,0.1); 
  padding:32px 52px 28px; position:relative; display:flex; flex-direction:column; gap:14px; 
  min-height:380px; justify-content:space-between; 
}
.table-wm { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:8px; color:rgba(200,168,75,0.06); white-space:nowrap; pointer-events:none; }

/* Zone labels (Dealer, Player) */
.zone-label { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:rgba(200,168,75,0.4); margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.zone-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(200,168,75,0.2),transparent); }

/* Score display pills */
.score-pill { display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:3px 12px; border-radius:20px; background:rgba(0,0,0,0.5); border:1px solid var(--gold-border); font-size:13px; font-weight:700; color:var(--gold); letter-spacing:1px; transition:all .3s; }
.score-pill.bust { border-color:var(--red); color:var(--red); }
.score-pill.bj { border-color:var(--green); color:var(--green); }

/* Hand display area */
.hand { display:flex; align-items:flex-end; gap:8px; min-height:130px; flex-wrap:wrap; }

/* Message display */
.msg-wrap { text-align:center; min-height:36px; display:flex; align-items:center; justify-content:center; }
.msg-text { font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; font-weight:300; color:var(--muted); transition:all .3s; }
.msg-text.win { color:var(--green); font-weight:600; }
.msg-text.lose { color:var(--red2); }
.msg-text.push { color:var(--gold2); }
.msg-text.info { color:var(--white); font-style:normal; }

/* ════════════════════════════════════════════════════════════════════ */
/* CARD STYLING */
/* ════════════════════════════════════════════════════════════════════ */
.card { width:82px; height:118px; border-radius:9px; flex-shrink:0; transform-origin:bottom center; animation:cDeal .35s cubic-bezier(0.22,1,0.36,1) both; box-shadow:4px 6px 20px rgba(0,0,0,0.7); }

/* Card deal animation */
@keyframes cDeal { from{transform:translateY(-40px) rotate(-8deg) scale(0.85);opacity:0} to{transform:translateY(0) rotate(0);opacity:1} }

/* Card front (face) styling */
.cfront { width:100%; height:100%; background:#fdfaf2; border-radius:9px; border:1px solid #e0d8c8; display:flex; flex-direction:column; justify-content:space-between; padding:7px; position:relative; overflow:hidden; }
.cfront::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,transparent 50%); border-radius:9px; pointer-events:none; }
.crank { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; line-height:1; }
.csuit-sm { font-size:13px; line-height:1; }
.csuit-c { font-size:38px; line-height:1; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.cbot { transform:rotate(180deg); display:flex; flex-direction:column; align-items:flex-start; }

/* Card suit colors */
.card.red .crank,.card.red .csuit-sm,.card.red .csuit-c { color:#9b1a1a; }
.card.black .crank,.card.black .csuit-sm,.card.black .csuit-c { color:#1a1a2e; }

/* Card back (hidden) styling */
.cback { width:100%; height:100%; border-radius:9px; background:#1a1a2e; border:1px solid rgba(200,168,75,0.3); overflow:hidden; position:relative; }
.cback::before { content:''; position:absolute; inset:6px; border:1px solid rgba(200,168,75,0.2); border-radius:5px; background:repeating-linear-gradient(45deg,rgba(200,168,75,0.04) 0px,rgba(200,168,75,0.04) 2px,transparent 2px,transparent 8px); }
.cback::after { content:'♦'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:26px; color:rgba(200,168,75,0.25); }

/* Small cards for player panels */
.card.sm { width:46px; height:66px; border-radius:6px; }
.card.sm .cfront { padding:4px; border-radius:6px; }
.card.sm .crank { font-size:12px; }
.card.sm .csuit-sm { font-size:9px; }
.card.sm .csuit-c { font-size:22px; }
.card.sm .cback { border-radius:6px; }
.card.sm .cback::after { font-size:16px; }

/* ════════════════════════════════════════════════════════════════════ */
/* STATS BAR (SOLO) */
/* ════════════════════════════════════════════════════════════════════ */
.stats-bar { display:flex; gap:2px; border:1px solid rgba(200,168,75,0.1); border-radius:10px; overflow:hidden; background:var(--bg2); }
.stat-item { flex:1; padding:12px 14px; text-align:center; border-right:1px solid rgba(200,168,75,0.08); }
.stat-item:last-child { border-right:none; }
.stat-lbl { display:block; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.stat-val { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--white); }
.stat-val.pos { color:var(--green); }
.stat-val.neg { color:var(--red2); }
.stat-val.g { color:var(--gold); }

/* ════════════════════════════════════════════════════════════════════ */
/* BETTING SECTION */
/* ════════════════════════════════════════════════════════════════════ */
.bet-section { background:var(--bg3); border:1px solid rgba(200,168,75,0.12); border-radius:14px; padding:20px 26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.bet-lbl { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.chips-w { flex:1; min-width:250px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }

/* Chip buttons (clickable) */
.chip { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer; transition:transform .15s,box-shadow .15s; position:relative; border:3px solid transparent; }
.chip::before { content:''; position:absolute; inset:3px; border-radius:50%; border:2px dashed rgba(255,255,255,0.3); }
.chip:hover { transform:translateY(-4px) scale(1.08); }
.chip:active { transform:scale(0.95); }

/* Chip colors by denomination */
.chip-1{background:#8B1A1A;border-color:#b02020;color:#ffd0d0;box-shadow:0 4px 12px rgba(139,26,26,.4)} /* Red $1 */
.chip-5{background:#1a3a8b;border-color:#2a5ab5;color:#d0d8ff;box-shadow:0 4px 12px rgba(26,58,139,.4)} /* Blue $5 */
.chip-10{background:#1a6b3a;border-color:#2a9b55;color:#d0ffe0;box-shadow:0 4px 12px rgba(26,107,58,.4)} /* Green $10 */
.chip-25{background:#6b1a6b;border-color:#9b2a9b;color:#ffd0ff;box-shadow:0 4px 12px rgba(107,26,107,.4)} /* Purple $25 */
.chip-50{background:#7a4a00;border-color:#c9a84c;color:#fff0c0;box-shadow:0 4px 12px rgba(122,74,0,.4)} /* Orange $50 */
.chip-100{background:#1a2e2e;border-color:#2a8b8b;color:#c0ffff;box-shadow:0 4px 12px rgba(26,46,46,.4)} /* Cyan $100 */

/* Bet display */
.bet-disp-w { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:100px; }
.bet-big { font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:700; color:var(--gold); line-height:1; }
.bet-pre { font-size:20px; font-weight:300; color:var(--muted); }

/* ════════════════════════════════════════════════════════════════════ */
/* BUTTONS */
/* ════════════════════════════════════════════════════════════════════ */
.btn-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.btn { padding:11px 26px; border:1px solid; border-radius:6px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.3; cursor:not-allowed; pointer-events:none; }

/* Button variants */
.btn-p { background:linear-gradient(135deg,#a07830,var(--gold)); border-color:var(--gold2); color:#1a1200; } /* Primary (gold) */
.btn-p:hover { box-shadow:0 0 30px rgba(200,168,75,.3); }
.btn-g { background:transparent; border-color:rgba(240,234,216,0.2); color:var(--white); } /* Generic (white) */
.btn-g:hover { border-color:rgba(240,234,216,.5); }
.btn-d { background:transparent; border-color:rgba(192,57,43,.5); color:var(--red2); } /* Danger (red) */
.btn-d:hover { border-color:var(--red2); }
.btn-s { background:transparent; border-color:rgba(29,185,84,.4); color:var(--green); } /* Success (green) */
.btn-s:hover { border-color:var(--green); }

/* ════════════════════════════════════════════════════════════════════ */
/* GAME PHASES */
/* ════════════════════════════════════════════════════════════════════ */
.phase { display:none; }
.phase.on { display:flex; }
.ctrl-panel { display:flex; flex-direction:column; gap:12px; align-items:center; }

/* ════════════════════════════════════════════════════════════════════ */
/* TURN BANNER (MULTIPLAYER) */
/* ════════════════════════════════════════════════════════════════════ */
.turn-banner { background:linear-gradient(135deg,rgba(200,168,75,.08),rgba(200,168,75,.03)); border:1px solid var(--gold-border); border-radius:10px; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; width:100%; }
.turn-pname { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--gold); }
.turn-meta { text-align:right; }
.turn-step { font-size:12px; color:var(--muted); letter-spacing:2px; }
.turn-bal { font-size:17px; font-weight:700; color:var(--white); margin-top:2px; }

/* ════════════════════════════════════════════════════════════════════ */
/* PLAYER PANELS (MULTIPLAYER) */
/* ════════════════════════════════════════════════════════════════════ */
.pgrid { display:grid; gap:10px; }
.pgrid.n1{grid-template-columns:1fr}
.pgrid.n2{grid-template-columns:1fr 1fr}
.pgrid.n3{grid-template-columns:1fr 1fr 1fr}
.pgrid.n4{grid-template-columns:1fr 1fr 1fr 1fr}

/* Player panel card */
.ppanel { background:var(--bg3); border:1px solid rgba(200,168,75,0.1); border-radius:12px; padding:14px 15px; transition:all .3s; position:relative; overflow:hidden; }
.ppanel.act { border-color:var(--gold); box-shadow:0 0 0 1px rgba(200,168,75,.15),0 8px 32px rgba(200,168,75,.06); }
.ppanel.busted { opacity:0.45; }
.ppanel.done { border-color:rgba(29,185,84,.25); }

/* Player panel header */
.ppanel-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ppanel-name { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:700; color:var(--white); }
.ppanel-name.act { color:var(--gold); }
.ppanel-bal { font-size:12px; font-weight:700; color:var(--muted); }

/* Player hand display */
.ppanel-hand { display:flex; gap:5px; flex-wrap:wrap; min-height:68px; align-items:flex-end; }

/* Bet display row */
.pbet-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12px; gap:6px; }
.pbet-lbl { color:var(--muted); letter-spacing:1px; }
.pbet-val { color:var(--gold); font-weight:700; }

/* Result badges */
.res-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:10px; }
.rb-win{background:rgba(29,185,84,.15);border:1px solid rgba(29,185,84,.4);color:var(--green)} /* Win badge */
.rb-lose{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.4);color:var(--red2)} /* Lose badge */
.rb-push{background:rgba(200,168,75,.1);border:1px solid var(--gold-border);color:var(--gold)} /* Push badge */

/* Turn tag indicator */
.turn-tag { position:absolute; top:-1px; left:14px; transform:translateY(-50%); background:var(--gold); color:#1a1200; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:10px; white-space:nowrap; }

/* ════════════════════════════════════════════════════════════════════ */
/* ROUND SUMMARY */
/* ════════════════════════════════════════════════════════════════════ */
.summary-box { background:var(--bg3); border:1px solid rgba(200,168,75,.12); border-radius:14px; padding:20px 24px; }
.summary-ttl { font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--gold); margin-bottom:14px; text-align:center; letter-spacing:2px; }
.sum-row { display:flex; align-items:center; justify-content:space-between; padding:9px 13px; border-radius:8px; background:rgba(0,0,0,.25); margin-bottom:6px; }
.sum-row:last-child { margin-bottom:0; }
.sum-left { display:flex; align-items:center; gap:10px; }
.sum-num { width:24px; height:24px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold); }
.sum-name { font-size:15px; font-weight:600; }
.sum-sub { font-size:12px; color:var(--muted); }
.sum-chg { font-size:16px; font-weight:700; }
.chg-pos{color:var(--green)}
.chg-neg{color:var(--red2)}
.chg-zero{color:var(--muted)}

/* ════════════════════════════════════════════════════════════════════ */
/* SCOREBOARD */
/* ════════════════════════════════════════════════════════════════════ */
.sboard { background:var(--bg3); border:1px solid rgba(200,168,75,.12); border-radius:14px; padding:16px 20px; }
.sboard-ttl { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.srow { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid rgba(200,168,75,.06); }
.srow:last-child { border-bottom:none; }
.srank { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:rgba(200,168,75,.2); width:22px; }
.srank.f { color:var(--gold); }
.sname { flex:1; font-size:15px; font-weight:600; }
.schips { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; color:var(--gold); }
.sdelta { font-size:12px; font-weight:700; margin-left:6px; }

/* ════════════════════════════════════════════════════════════════════ */
/* TABLE ANIMATIONS */
/* ════════════════════════════════════════════════════════════════════ */
@keyframes wf { 0%,100%{box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,.1)} 50%{box-shadow:var(--shadow),0 0 60px rgba(29,185,84,.2),inset 0 1px 0 rgba(29,185,84,.3)} } /* Win flash */
@keyframes lf { 0%,100%{box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,.1)} 50%{box-shadow:var(--shadow),0 0 60px rgba(192,57,43,.2),inset 0 1px 0 rgba(192,57,43,.3)} } /* Lose flash */
.tw { animation:wf .8s ease 2; }
.tl { animation:lf .8s ease 1; }

/* ════════════════════════════════════════════════════════════════════ */
/* RULES PANEL */
/* ════════════════════════════════════════════════════════════════════ */
.rules-panel { background:var(--bg2); border:1px solid rgba(200,168,75,.1); border-radius:10px; padding:18px 22px; display:none; grid-template-columns:1fr 1fr; gap:8px; }
.rules-panel.open { display:grid; }
.rule { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muted); line-height:1.5; }
.rule::before { content:'◆'; color:var(--gold); font-size:8px; margin-top:4px; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════════════ */
/* HAND HISTORY */
/* ════════════════════════════════════════════════════════════════════ */
.hist-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:6px 0; }
.hb { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.hb.W{background:rgba(29,185,84,.15);border:1px solid rgba(29,185,84,.4);color:var(--green)} /* Win */
.hb.L{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.4);color:var(--red2)} /* Loss */
.hb.P{background:rgba(200,168,75,.1);border:1px solid var(--gold-border);color:var(--gold)} /* Push */
.hb.BJ{background:rgba(29,185,84,.25);border:1px solid var(--green);color:var(--green);font-size:7px} /* Blackjack */

/* ════════════════════════════════════════════════════════════════════ */
/* MODAL DIALOG */
/* ════════════════════════════════════════════════════════════════════ */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-bg.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg3); border:1px solid var(--gold-border); border-radius:16px; padding:36px 44px; text-align:center; max-width:420px; width:90%; transform:scale(.9); transition:transform .3s; box-shadow:0 40px 120px rgba(0,0,0,.9); }
.modal-bg.open .modal { transform:scale(1); }
.modal-icon { font-size:52px; margin-bottom:14px; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.modal-body { font-size:15px; color:var(--muted); line-height:1.6; margin-bottom:24px; }

/* ════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN */
/* ════════════════════════════════════════════════════════════════════ */
.logo { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--gold); letter-spacing:6px; text-transform:uppercase; }
.logo span { color:var(--white); font-weight:300; font-style:italic; }
.header-right { display:flex; gap:24px; align-items:center; }
.hinfo-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); display:block; }
.hinfo-val { font-size:18px; font-weight:700; color:var(--gold); }
.rules-btn { background:none; border:1px solid rgba(200,168,75,0.2); color:var(--muted); font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:8px 14px; border-radius:4px; cursor:pointer; transition:all .2s; }
.rules-btn:hover { color:var(--gold); border-color:var(--gold-border); }

main { max-width:1200px; margin:0 auto; padding:28px 32px 40px; display:flex; flex-direction:column; gap:18px; }

/* LOBBY */
#lobby-screen { display:flex; flex-direction:column; align-items:center; gap:32px; padding:20px 0; }
.lobby-title { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:700; color:var(--gold); text-align:center; letter-spacing:6px; }
.lobby-sub { font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.lobby-modes { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:700px; }
.lobby-card { background:var(--bg3); border:1px solid rgba(200,168,75,0.12); border-radius:18px; padding:34px 30px; cursor:pointer; transition:all .25s; position:relative; overflow:hidden; }
.lobby-card:hover { border-color:var(--gold-border); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.lobby-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(200,168,75,0.05),transparent); opacity:0; transition:opacity .25s; }
.lobby-card:hover::before { opacity:1; }
.lobby-icon { font-size:40px; margin-bottom:14px; }
.lobby-card-title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--white); margin-bottom:8px; }
.lobby-card-desc { font-size:13px; color:var(--muted); line-height:1.65; }
.lobby-badge { position:absolute; top:16px; right:16px; background:rgba(200,168,75,0.12); border:1px solid var(--gold-border); color:var(--gold); font-size:9px; letter-spacing:3px; text-transform:uppercase; padding:4px 11px; border-radius:20px; }

/* SETUP */
#setup-screen { display:none; flex-direction:column; align-items:center; gap:22px; padding:10px 0; }
.setup-title { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:700; color:var(--gold); }
.setup-players { display:flex; flex-direction:column; gap:10px; width:100%; max-width:520px; }
.player-slot { display:flex; align-items:center; gap:12px; background:var(--bg3); border:1px solid rgba(200,168,75,0.15); border-radius:10px; padding:13px 16px; }
.player-num { width:28px; height:28px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0; }
.player-name-inp { flex:1; background:transparent; border:none; outline:none; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600; color:var(--white); letter-spacing:1px; }
.player-name-inp::placeholder { color:rgba(240,234,216,0.2); }
.rm-btn { background:none; border:none; color:rgba(240,234,216,0.2); font-size:18px; cursor:pointer; padding:4px 6px; transition:color .2s; }
.rm-btn:hover { color:var(--red2); }
.add-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px dashed rgba(200,168,75,0.2); color:rgba(200,168,75,0.4); border-radius:10px; padding:13px; font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s; width:100%; max-width:520px; }
.add-btn:hover { border-color:var(--gold-border); color:var(--gold); }
.chips-row { display:flex; align-items:center; gap:16px; max-width:520px; width:100%; }
.chips-lbl { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.chips-opts { display:flex; gap:8px; flex-wrap:wrap; }
.chips-opt { padding:7px 16px; border:1px solid rgba(200,168,75,0.2); border-radius:6px; background:transparent; color:var(--muted); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; letter-spacing:1px; }
.chips-opt.sel { border-color:var(--gold); color:var(--gold); background:rgba(200,168,75,0.1); }

/* GAME */
#game-screen { display:none; flex-direction:column; gap:18px; }

/* TABLE */
.table-wrap { background:radial-gradient(ellipse 80% 60% at 50% 50%,var(--felt2) 0%,var(--felt) 60%,#050f09 100%); border-radius:120px 120px 60px 60px / 60px 60px 30px 30px; border:2px solid rgba(200,168,75,0.2); box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,0.1); padding:32px 52px 28px; position:relative; display:flex; flex-direction:column; gap:14px; min-height:380px; justify-content:space-between; }
.table-wm { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:8px; color:rgba(200,168,75,0.06); white-space:nowrap; pointer-events:none; }
.zone-label { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:rgba(200,168,75,0.4); margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.zone-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(200,168,75,0.2),transparent); }
.score-pill { display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:3px 12px; border-radius:20px; background:rgba(0,0,0,0.5); border:1px solid var(--gold-border); font-size:13px; font-weight:700; color:var(--gold); letter-spacing:1px; transition:all .3s; }
.score-pill.bust { border-color:var(--red); color:var(--red); }
.score-pill.bj { border-color:var(--green); color:var(--green); }
.hand { display:flex; align-items:flex-end; gap:8px; min-height:130px; flex-wrap:wrap; }
.msg-wrap { text-align:center; min-height:36px; display:flex; align-items:center; justify-content:center; }
.msg-text { font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; font-weight:300; color:var(--muted); transition:all .3s; }
.msg-text.win { color:var(--green); font-weight:600; }
.msg-text.lose { color:var(--red2); }
.msg-text.push { color:var(--gold2); }
.msg-text.info { color:var(--white); font-style:normal; }

/* CARDS */
.card { width:82px; height:118px; border-radius:9px; flex-shrink:0; transform-origin:bottom center; animation:cDeal .35s cubic-bezier(0.22,1,0.36,1) both; box-shadow:4px 6px 20px rgba(0,0,0,0.7); }
@keyframes cDeal { from{transform:translateY(-40px) rotate(-8deg) scale(0.85);opacity:0} to{transform:translateY(0) rotate(0);opacity:1} }
.cfront { width:100%; height:100%; background:#fdfaf2; border-radius:9px; border:1px solid #e0d8c8; display:flex; flex-direction:column; justify-content:space-between; padding:7px; position:relative; overflow:hidden; }
.cfront::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,transparent 50%); border-radius:9px; pointer-events:none; }
.crank { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; line-height:1; }
.csuit-sm { font-size:13px; line-height:1; }
.csuit-c { font-size:38px; line-height:1; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.cbot { transform:rotate(180deg); display:flex; flex-direction:column; align-items:flex-start; }
.card.red .crank,.card.red .csuit-sm,.card.red .csuit-c { color:#9b1a1a; }
.card.black .crank,.card.black .csuit-sm,.card.black .csuit-c { color:#1a1a2e; }
.cback { width:100%; height:100%; border-radius:9px; background:#1a1a2e; border:1px solid rgba(200,168,75,0.3); overflow:hidden; position:relative; }
.cback::before { content:''; position:absolute; inset:6px; border:1px solid rgba(200,168,75,0.2); border-radius:5px; background:repeating-linear-gradient(45deg,rgba(200,168,75,0.04) 0px,rgba(200,168,75,0.04) 2px,transparent 2px,transparent 8px); }
.cback::after { content:'♦'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:26px; color:rgba(200,168,75,0.25); }
/* Small cards for panels */
.card.sm { width:46px; height:66px; border-radius:6px; }
.card.sm .cfront { padding:4px; border-radius:6px; }
.card.sm .crank { font-size:12px; }
.card.sm .csuit-sm { font-size:9px; }
.card.sm .csuit-c { font-size:22px; }
.card.sm .cback { border-radius:6px; }
.card.sm .cback::after { font-size:16px; }

/* STATS BAR */
.stats-bar { display:flex; gap:2px; border:1px solid rgba(200,168,75,0.1); border-radius:10px; overflow:hidden; background:var(--bg2); }
.stat-item { flex:1; padding:12px 14px; text-align:center; border-right:1px solid rgba(200,168,75,0.08); }
.stat-item:last-child { border-right:none; }
.stat-lbl { display:block; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.stat-val { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--white); }
.stat-val.pos { color:var(--green); } .stat-val.neg { color:var(--red2); } .stat-val.g { color:var(--gold); }

/* BETTING */
.bet-section { background:var(--bg3); border:1px solid rgba(200,168,75,0.12); border-radius:14px; padding:20px 26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.bet-lbl { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.chips-w { flex:1; min-width:250px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer; transition:transform .15s,box-shadow .15s; position:relative; border:3px solid transparent; }
.chip::before { content:''; position:absolute; inset:3px; border-radius:50%; border:2px dashed rgba(255,255,255,0.3); }
.chip:hover { transform:translateY(-4px) scale(1.08); } .chip:active { transform:scale(0.95); }
.chip-1{background:#8B1A1A;border-color:#b02020;color:#ffd0d0;box-shadow:0 4px 12px rgba(139,26,26,.4)}
.chip-5{background:#1a3a8b;border-color:#2a5ab5;color:#d0d8ff;box-shadow:0 4px 12px rgba(26,58,139,.4)}
.chip-10{background:#1a6b3a;border-color:#2a9b55;color:#d0ffe0;box-shadow:0 4px 12px rgba(26,107,58,.4)}
.chip-25{background:#6b1a6b;border-color:#9b2a9b;color:#ffd0ff;box-shadow:0 4px 12px rgba(107,26,107,.4)}
.chip-50{background:#7a4a00;border-color:#c9a84c;color:#fff0c0;box-shadow:0 4px 12px rgba(122,74,0,.4)}
.chip-100{background:#1a2e2e;border-color:#2a8b8b;color:#c0ffff;box-shadow:0 4px 12px rgba(26,46,46,.4)}
.bet-disp-w { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:100px; }
.bet-big { font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:700; color:var(--gold); line-height:1; }
.bet-pre { font-size:20px; font-weight:300; color:var(--muted); }

/* BUTTONS */
.btn-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.btn { padding:11px 26px; border:1px solid; border-radius:6px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.btn:active { transform:scale(0.97); } .btn:disabled { opacity:0.3; cursor:not-allowed; pointer-events:none; }
.btn-p { background:linear-gradient(135deg,#a07830,var(--gold)); border-color:var(--gold2); color:#1a1200; }
.btn-p:hover { box-shadow:0 0 30px rgba(200,168,75,.3); }
.btn-g { background:transparent; border-color:rgba(240,234,216,0.2); color:var(--white); }
.btn-g:hover { border-color:rgba(240,234,216,.5); }
.btn-d { background:transparent; border-color:rgba(192,57,43,.5); color:var(--red2); }
.btn-d:hover { border-color:var(--red2); }
.btn-s { background:transparent; border-color:rgba(29,185,84,.4); color:var(--green); }
.btn-s:hover { border-color:var(--green); }

/* PHASE */
.phase { display:none; }
.phase.on { display:flex; }
.ctrl-panel { display:flex; flex-direction:column; gap:12px; align-items:center; }

/* TURN BANNER */
.turn-banner { background:linear-gradient(135deg,rgba(200,168,75,.08),rgba(200,168,75,.03)); border:1px solid var(--gold-border); border-radius:10px; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; width:100%; }
.turn-pname { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--gold); }
.turn-meta { text-align:right; }
.turn-step { font-size:12px; color:var(--muted); letter-spacing:2px; }
.turn-bal { font-size:17px; font-weight:700; color:var(--white); margin-top:2px; }

/* PLAYER PANELS */
.pgrid { display:grid; gap:10px; }
.pgrid.n1{grid-template-columns:1fr} .pgrid.n2{grid-template-columns:1fr 1fr} .pgrid.n3{grid-template-columns:1fr 1fr 1fr} .pgrid.n4{grid-template-columns:1fr 1fr 1fr 1fr}
.ppanel { background:var(--bg3); border:1px solid rgba(200,168,75,0.1); border-radius:12px; padding:14px 15px; transition:all .3s; position:relative; overflow:hidden; }
.ppanel.act { border-color:var(--gold); box-shadow:0 0 0 1px rgba(200,168,75,.15),0 8px 32px rgba(200,168,75,.06); }
.ppanel.busted { opacity:0.45; }
.ppanel.done { border-color:rgba(29,185,84,.25); }
.ppanel-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ppanel-name { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:700; color:var(--white); }
.ppanel-name.act { color:var(--gold); }
.ppanel-bal { font-size:12px; font-weight:700; color:var(--muted); }
.ppanel-hand { display:flex; gap:5px; flex-wrap:wrap; min-height:68px; align-items:flex-end; }
.pbet-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12px; gap:6px; }
.pbet-lbl { color:var(--muted); letter-spacing:1px; }
.pbet-val { color:var(--gold); font-weight:700; }
.res-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:10px; }
.rb-win{background:rgba(29,185,84,.15);border:1px solid rgba(29,185,84,.4);color:var(--green)}
.rb-lose{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.4);color:var(--red2)}
.rb-push{background:rgba(200,168,75,.1);border:1px solid var(--gold-border);color:var(--gold)}
.turn-tag { position:absolute; top:-1px; left:14px; transform:translateY(-50%); background:var(--gold); color:#1a1200; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:10px; white-space:nowrap; }

/* ROUND SUMMARY */
.summary-box { background:var(--bg3); border:1px solid rgba(200,168,75,.12); border-radius:14px; padding:20px 24px; }
.summary-ttl { font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--gold); margin-bottom:14px; text-align:center; letter-spacing:2px; }
.sum-row { display:flex; align-items:center; justify-content:space-between; padding:9px 13px; border-radius:8px; background:rgba(0,0,0,.25); margin-bottom:6px; }
.sum-row:last-child { margin-bottom:0; }
.sum-left { display:flex; align-items:center; gap:10px; }
.sum-num { width:24px; height:24px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold); }
.sum-name { font-size:15px; font-weight:600; }
.sum-sub { font-size:12px; color:var(--muted); }
.sum-chg { font-size:16px; font-weight:700; }
.chg-pos{color:var(--green)} .chg-neg{color:var(--red2)} .chg-zero{color:var(--muted)}

/* SCOREBOARD */
.sboard { background:var(--bg3); border:1px solid rgba(200,168,75,.12); border-radius:14px; padding:16px 20px; }
.sboard-ttl { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.srow { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid rgba(200,168,75,.06); }
.srow:last-child { border-bottom:none; }
.srank { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:rgba(200,168,75,.2); width:22px; }
.srank.f { color:var(--gold); }
.sname { flex:1; font-size:15px; font-weight:600; }
.schips { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; color:var(--gold); }
.sdelta { font-size:12px; font-weight:700; margin-left:6px; }

/* TABLE FLASH */
@keyframes wf { 0%,100%{box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,.1)} 50%{box-shadow:var(--shadow),0 0 60px rgba(29,185,84,.2),inset 0 1px 0 rgba(29,185,84,.3)} }
@keyframes lf { 0%,100%{box-shadow:var(--shadow),inset 0 1px 0 rgba(200,168,75,.1)} 50%{box-shadow:var(--shadow),0 0 60px rgba(192,57,43,.2),inset 0 1px 0 rgba(192,57,43,.3)} }
.tw { animation:wf .8s ease 2; } .tl { animation:lf .8s ease 1; }

/* RULES */
.rules-panel { background:var(--bg2); border:1px solid rgba(200,168,75,.1); border-radius:10px; padding:18px 22px; display:none; grid-template-columns:1fr 1fr; gap:8px; }
.rules-panel.open { display:grid; }
.rule { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muted); line-height:1.5; }
.rule::before { content:'◆'; color:var(--gold); font-size:8px; margin-top:4px; flex-shrink:0; }

/* HISTORY */
.hist-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:6px 0; }
.hb { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.hb.W{background:rgba(29,185,84,.15);border:1px solid rgba(29,185,84,.4);color:var(--green)}
.hb.L{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.4);color:var(--red2)}
.hb.P{background:rgba(200,168,75,.1);border:1px solid var(--gold-border);color:var(--gold)}
.hb.BJ{background:rgba(29,185,84,.25);border:1px solid var(--green);color:var(--green);font-size:7px}

/* MODAL */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-bg.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg3); border:1px solid var(--gold-border); border-radius:16px; padding:36px 44px; text-align:center; max-width:420px; width:90%; transform:scale(.9); transition:transform .3s; box-shadow:0 40px 120px rgba(0,0,0,.9); }
.modal-bg.open .modal { transform:scale(1); }
.modal-icon { font-size:52px; margin-bottom:14px; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.modal-body { font-size:15px; color:var(--muted); line-height:1.6; margin-bottom:24px; }

/* RESPONSIVE DESIGN */
@media(max-width:1024px){
  header{padding:16px 32px} main{padding:20px 24px} .table-wrap{padding:28px 40px}
  .lobby-modes{gap:12px} .lobby-card{padding:28px 24px}
  .pgrid.n3,.pgrid.n4{grid-template-columns:1fr 1fr}
  .card{width:72px;height:104px} .card.sm{width:42px;height:60px}
}

@media(max-width:768px){
  *, *::before, *::after { box-sizing: border-box; }
  header{padding:12px 18px;justify-content:flex-start}
  .logo{flex:1}
  .header-right{width:auto;gap:8px;margin-left:auto}
  main{padding:16px 18px;gap:14px}
  .lobby-modes{grid-template-columns:1fr;max-width:100%}
  .lobby-card{padding:24px 20px}
  .lobby-title{font-size:40px}
  .setup-players{max-width:100%}
  .chips-row{flex-direction:column;align-items:flex-start;gap:10px}
  .table-wrap{padding:20px 18px;border-radius:80px 80px 40px 40px/40px 40px 20px 20px;min-height:340px;gap:12px}
  .zone-label{font-size:9px}
  .hand{min-height:110px;gap:6px}
  .card{width:66px;height:94px;box-shadow:3px 4px 16px rgba(0,0,0,0.7)}
  .card.sm{width:38px;height:54px}
  .stats-bar{flex-direction:column;gap:0}
  .stat-item{border-right:none;border-bottom:1px solid rgba(200,168,75,0.08);padding:10px 12px}
  .stat-item:last-child{border-bottom:none}
  .bet-section{flex-direction:column;gap:16px}
  .chips-w{min-width:100%;flex:1}
  .bet-disp-w{min-width:100%;flex:1}
  .chips{justify-content:center}
  .chip{width:44px;height:44px;font-size:10px}
  .btn{padding:10px 18px;font-size:12px;letter-spacing:2px}
  .turn-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .turn-meta{text-align:left;align-self:flex-start}
  .pgrid.n3,.pgrid.n4{grid-template-columns:1fr}
  .ppanel{padding:12px 13px}
  .ppanel-hand{min-height:60px}
  .msg-text{font-size:18px}
  .modal{padding:28px 32px;max-width:90vw}
}

@media(max-width:480px){
  html,body{font-size:14px}
  header{padding:10px 12px;justify-content:flex-start}
  .logo{font-size:18px;letter-spacing:3px;flex:1}
  .header-right{width:auto;gap:8px}
  .hinfo-label{font-size:8px;display:none}
  .hinfo-val{font-size:14px;display:none}
  .rules-btn{padding:6px 10px;font-size:9px;margin-left:auto}
  main{padding:12px;gap:12px}
  .lobby-title{font-size:32px;letter-spacing:4px}
  .lobby-sub{font-size:10px;letter-spacing:3px;margin-top:4px}
  .lobby-card{padding:20px 16px}
  .lobby-icon{font-size:32px;margin-bottom:10px}
  .lobby-card-title{font-size:20px}
  .lobby-card-desc{font-size:12px}
  .setup-title{font-size:26px}
  .player-slot{padding:10px 12px;gap:8px}
  .player-num{width:24px;height:24px;font-size:10px}
  .player-name-inp{font-size:13px}
  .add-btn{padding:10px;font-size:10px}
  .chips-opts{gap:6px}
  .chips-opt{padding:5px 12px;font-size:11px}
  .table-wrap{padding:16px 12px;border-radius:60px 60px 25px 25px/25px 25px 12px 12px;min-height:300px;gap:10px}
  .table-wm{font-size:9px;letter-spacing:5px}
  .zone-label{font-size:8px;gap:6px}
  .score-pill{font-size:11px;padding:2px 8px;min-width:32px}
  .hand{min-height:100px;gap:5px;flex-wrap:wrap}
  .card{width:58px;height:82px;box-shadow:2px 3px 12px rgba(0,0,0,0.7)}
  .card.sm{width:34px;height:48px}
  .msg-text{font-size:16px}
  .stats-bar{gap:1px}
  .stat-item{padding:8px 10px}
  .stat-lbl{font-size:8px}
  .stat-val{font-size:16px}
  .bet-section{padding:16px 18px;gap:12px}
  .bet-lbl{font-size:9px}
  .chips{gap:6px}
  .chip{width:40px;height:40px;font-size:9px}
  .chip::before{inset:2px;border-width:1px}
  .chip:hover{transform:translateY(-3px) scale(1.05)}
  .bet-big{font-size:28px}
  .bet-pre{font-size:16px}
  .btn-row{gap:6px}
  .btn{padding:8px 14px;font-size:11px;letter-spacing:1px}
  .turn-banner{padding:10px 14px;border-radius:8px}
  .turn-pname{font-size:18px}
  .turn-step{font-size:10px}
  .turn-bal{font-size:14px}
  .ppanel{padding:10px 12px;border-radius:10px}
  .ppanel-hdr{margin-bottom:8px}
  .ppanel-name{font-size:13px}
  .ppanel-bal{font-size:11px}
  .ppanel-hand{min-height:54px;gap:4px}
  .pbet-row{font-size:10px;margin-top:6px}
  .res-badge{font-size:8px;padding:2px 6px}
  .turn-tag{font-size:8px;padding:2px 8px}
  .summary-box{padding:16px 18px}
  .summary-ttl{font-size:16px;margin-bottom:10px}
  .sum-row{padding:7px 10px;margin-bottom:4px}
  .sum-num{width:20px;height:20px;font-size:10px}
  .sum-name{font-size:13px}
  .sum-sub{font-size:11px}
  .sum-chg{font-size:14px}
  .sboard{padding:12px 16px}
  .sboard-ttl{font-size:9px;margin-bottom:10px}
  .srow{padding:6px 0;gap:8px}
  .srank{font-size:18px;width:18px}
  .sname{font-size:13px}
  .schips{font-size:16px}
  .sdelta{font-size:10px}
  .hist-row{padding:4px 0}
  .hb{width:22px;height:22px;font-size:8px}
  .modal{padding:24px 20px}
  .modal-icon{font-size:40px;margin-bottom:10px}
  .modal-title{font-size:24px}
  .modal-body{font-size:13px;margin-bottom:16px}
}