:root{
  --bg:#0c1210; --bg-2:#0f1714; --surface:#14201b; --surface-2:#1b2a24;
  --line:#2a3a33; --line-soft:#213029;
  --felt:#0f5132; --felt-hi:#177f4e; --felt-lo:#083526;
  --rail:#3a2a1c; --rail-hi:#5b4126;
  --gold:#d4af37; --gold-soft:#ead08a; --gold-dim:#9c7f2e;
  --fg:#edeae1; --muted:#9aa79f; --faint:#64726b;
  --red:#d0453a; --blue:#2f82c4; --green:#2aa36a; --ok:#39b57a;
  --font-disp:"Cinzel",Georgia,serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-num:"Space Grotesk","Manrope",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(1200px 600px at 50% -10%,#16231d,transparent 60%),var(--bg);
  color:var(--fg);font-family:var(--font-body);line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none!important}
button{font-family:var(--font-body)}

.chip-logo{width:52px;height:52px;border-radius:50%;flex:none;margin:0 auto;
  background:conic-gradient(from 0deg,var(--red) 0 25%,#fff 0 50%,var(--red) 0 75%,#fff 0 100%);
  position:relative;box-shadow:0 0 0 4px var(--red),0 2px 10px rgba(0,0,0,.6)}
.chip-logo::after{content:"";position:absolute;inset:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1c2a24,#0c1210);border:2px dashed rgba(255,255,255,.25)}
.chip-logo.sm{width:30px;height:30px;box-shadow:0 0 0 2px var(--red)}
.chip-logo.sm::after{inset:6px;border-width:1.5px}

.btn{font-weight:700;font-size:.85rem;border-radius:9px;padding:10px 16px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg);letter-spacing:.01em;transition:.12s}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:.78rem}
.btn-gold,.btn.raise{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1a1206;border-color:var(--gold);font-weight:800}
.btn.fold{color:var(--red);border-color:rgba(208,69,58,.45)}
.btn.check{color:var(--fg)}

/* ---------- GATE ---------- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{width:340px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px;text-align:center;box-shadow:0 30px 70px -30px #000}
.gate-card h1{font-family:var(--font-disp);color:var(--gold-soft);letter-spacing:.08em;font-size:1.3rem;margin:16px 0 4px}
.gate-card .tag{color:var(--muted);font-size:.78rem;margin:0 0 20px}
.gate-card label{display:block;text-align:left;font-size:.74rem;color:var(--muted);margin:0 0 5px}
.gate-card input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;color:var(--fg);
  padding:11px 12px;font-size:.95rem;margin-bottom:16px}
.gate-card .btn{width:100%}
.conn{font-size:.72rem;color:var(--faint);margin:14px 0 0}
.conn.ok{color:var(--ok)}
.gate-actions{display:flex;gap:8px;margin-top:4px}
.gate-actions .btn{flex:1}
.gate-msg{font-size:.76rem;color:var(--red);margin:10px 0 0;min-height:16px}

/* wallet + profile */
.wallet{font-family:var(--font-num);color:var(--gold-soft);font-size:.86rem;border:1px solid var(--gold-dim);
  border-radius:999px;padding:4px 12px;background:rgba(212,175,55,.06);white-space:nowrap}
.appbar .wallet{margin-left:auto}
.appbar.game-bar .wallet{margin-left:0}
.modal-card.wide{width:460px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:9px 6px;text-align:center}
.stat span{display:block;font-size:.64rem;color:var(--muted);margin-bottom:3px}
.stat b{font-family:var(--font-num);font-size:.92rem}
.pos{color:var(--ok)} .neg{color:var(--red)}
.hist-title{font-size:.76rem;letter-spacing:.1em;color:var(--gold-soft);margin:4px 0 8px}
.hist-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.hist{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px}
.hist .h1{display:flex;justify-content:space-between;font-size:.8rem}
.hist .ht{font-weight:600}
.hist .hn{font-family:var(--font-num);font-weight:700}
.hist .h2{font-size:.68rem;color:var(--muted);margin-top:4px}
.cm{font-family:var(--font-num);color:#dfe6e1} .cm.r{color:#e06a60}
.muted{color:var(--muted);font-size:.8rem}
@media(max-width:620px){.stat-row{grid-template-columns:repeat(2,1fr)}.modal-card.wide{width:100%}}

/* ---------- APPBAR ---------- */
.appbar{display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(12,18,16,.97),rgba(12,18,16,.85));border-bottom:1px solid var(--line-soft)}
.appbar .logo{display:flex;align-items:center;gap:9px;margin-right:auto}
.appbar .logo b{font-family:var(--font-disp);color:var(--gold-soft);letter-spacing:.05em;font-size:1rem}
.appbar .who{color:var(--muted);font-size:.82rem}
.appbar .who b{color:var(--gold-soft)}

/* ---------- LOBBY ---------- */
.lobby-view{height:100%;display:flex;flex-direction:column}
.lobby-wrap{flex:1;overflow-y:auto;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));max-width:980px;margin:0 auto;width:100%}
.sec-title{font-family:var(--font-disp);color:var(--gold-soft);font-size:1.1rem;letter-spacing:.04em;margin:4px 0 16px}
.table-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 17px}
.tcard .r1{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tcard .tn{font-weight:700;font-size:.98rem}
.tcard .st{margin-left:auto;font-family:var(--font-num);color:var(--gold-soft);font-size:.86rem;
  border:1px solid var(--gold-dim);border-radius:999px;padding:3px 10px}
.tcard .r2{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--muted);margin-bottom:14px}
.tcard .seats{font-family:var(--font-num)}
.tcard .seats.full{color:var(--red)}
.tcard .seats.open{color:var(--ok)}
.tcard .playing{color:var(--gold-soft);font-size:.68rem;border:1px solid var(--gold-dim);border-radius:5px;padding:1px 6px}
.tcard .join{width:100%}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;backdrop-filter:blur(3px)}
.modal-card{width:360px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.modal-card h3{margin:0 0 16px;font-family:var(--font-disp);color:var(--gold-soft);letter-spacing:.04em;font-size:1.05rem}
.modal-card label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:12px}
.modal-card input[type=text],.modal-card input[type=number],.modal-card input:not([type]){width:100%;margin-top:5px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:9px 11px;font-size:.9rem;font-family:var(--font-num)}
.modal-card input[type=range]{width:100%;margin-top:8px;accent-color:var(--gold)}
.row2{display:flex;gap:10px}.row2 label{flex:1}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.hint{font-size:.72rem;color:var(--faint);margin:2px 0 14px;font-family:var(--font-num)}
output{font-family:var(--font-num);color:var(--gold-soft)}

/* ---------- GAME ---------- */
.game-view{height:100%;display:flex;flex-direction:column}
.game-bar .table-name{font-family:var(--font-disp);color:var(--gold-soft);font-size:.92rem;margin-right:auto;letter-spacing:.03em}
.game-bar .pot-head{font-family:var(--font-num);color:var(--gold-soft);font-size:.82rem;margin-right:10px}
.tourney-bar{padding:7px 16px;background:linear-gradient(180deg,rgba(212,175,55,.1),rgba(212,175,55,.03));
  border-bottom:1px solid var(--gold-dim);color:var(--gold-soft);font-size:.78rem;text-align:center;font-family:var(--font-num)}
.tourney-bar b{color:var(--fg)}
.game-main{flex:1;display:flex;min-height:0}
.table-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:2.2% 2.5%;min-width:0}

.felt{position:relative;width:100%;max-width:min(1100px,calc((100vh - 230px)*1.78));aspect-ratio:16/9;border-radius:46%/46%;
  background:radial-gradient(120% 130% at 50% 38%,var(--felt-hi),var(--felt) 42%,var(--felt-lo));
  border:12px solid;border-color:var(--rail-hi) var(--rail) var(--rail) var(--rail-hi);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 0 0 2px #0a0f0d,0 20px 44px -18px #000}
.felt::before{content:"";position:absolute;inset:16px;border-radius:46%/46%;border:1.5px solid rgba(212,175,55,.26);pointer-events:none}
.table-logo{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:.45;pointer-events:none}
.table-logo b{font-family:var(--font-disp);color:var(--gold-soft);letter-spacing:.13em;font-size:clamp(.7rem,2.2vw,1.2rem)}
.table-logo span{display:block;font-size:.5rem;letter-spacing:.4em;color:var(--gold-dim);text-transform:uppercase;margin-top:3px}

.board{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);display:flex;gap:clamp(3px,.8vw,7px)}
.pot{position:absolute;top:61%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.42);border:1px solid var(--gold-dim);border-radius:999px;padding:3px 12px;
  font-family:var(--font-num);font-size:clamp(.55rem,1.4vw,.8rem);color:var(--gold-soft);white-space:nowrap}
.pot .chipdot{width:12px;height:12px;border-radius:50%;background:conic-gradient(var(--red) 0 50%,#fff 0 100%)}

.card{width:clamp(22px,4vw,40px);aspect-ratio:5/7;border-radius:4px;background:linear-gradient(#fdfbf4,#efe9db);
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1px,.5vw,4px);
  font-family:var(--font-num);font-weight:700;font-size:clamp(.5rem,1.6vw,1rem);line-height:1;box-shadow:0 3px 7px rgba(0,0,0,.45);color:#111}
.card .suit{align-self:flex-end;font-size:1.05em}
.card.red{color:#c0392b}.card.blk{color:#1a1a1a}
.card.back{background:repeating-linear-gradient(45deg,#8e1b17 0 5px,#7a1512 5px 10px);border:2px solid #fdfbf4}
.card.ph{background:rgba(0,0,0,.18);border:1px dashed rgba(255,255,255,.14);box-shadow:none}

/* seats */
.seat{position:absolute;transform:translate(-50%,-50%);width:clamp(76px,13vw,124px);text-align:center}
.seat .avatar{width:clamp(34px,6vw,54px);height:clamp(34px,6vw,54px);border-radius:50%;margin:0 auto;position:relative;
  background:radial-gradient(circle at 35% 30%,#2b3a33,#141f1b);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:clamp(.85rem,2.2vw,1.35rem)}
.seat.active .avatar{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.3),0 0 18px rgba(212,175,55,.4)}
.seat.fold{opacity:.4}
.seat.me .nameplate{border-color:var(--gold-dim)}
.seat .nameplate{margin-top:4px;background:rgba(0,0,0,.52);border:1px solid var(--line);border-radius:7px;padding:3px 6px;
  font-size:clamp(.5rem,1.3vw,.74rem);line-height:1.25}
.seat .nm{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .stk{display:block;font-family:var(--font-num);color:var(--gold-soft);font-size:.95em}
.seat .holecards{display:flex;gap:2px;justify-content:center;margin-bottom:3px;height:clamp(22px,3.6vw,36px)}
.seat .holecards .card{width:clamp(16px,2.7vw,27px)}
.seat .emptyseat{width:clamp(34px,6vw,54px);height:clamp(34px,6vw,54px);border-radius:50%;margin:0 auto;border:2px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.62rem;cursor:pointer;background:rgba(0,0,0,.2)}
.seat .emptyseat:hover{border-color:var(--gold-dim);color:var(--gold-soft)}
.badge{position:absolute;width:clamp(16px,2.6vw,22px);height:clamp(16px,2.6vw,22px);border-radius:50%;
  font-size:clamp(.5rem,1.2vw,.68rem);font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid #b9b2a0}
.badge.D{background:#fdfbf4;color:#111;right:-4px;bottom:-2px}
.badge.SB{background:var(--blue);color:#fff;left:-6px;bottom:-2px}
.badge.BB{background:var(--gold);color:#1a1206;left:-6px;bottom:-2px}
.bet-chip{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);font-family:var(--font-num);
  font-size:clamp(.5rem,1.2vw,.72rem);color:var(--gold-soft);background:rgba(0,0,0,.5);border-radius:999px;padding:1px 8px;white-space:nowrap}
.timer-ring{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid rgba(212,175,55,.2)}
.timer-ring.run{border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.allin-tag{color:var(--red);font-weight:700}

.winner-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;
  background:rgba(10,15,13,.9);border:1px solid var(--gold);border-radius:12px;padding:12px 20px;text-align:center;
  box-shadow:0 0 30px rgba(212,175,55,.3);font-size:.9rem}
.winner-banner b{color:var(--gold-soft)}

/* chat */
.chat-rail{width:260px;flex:none;border-left:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);
  font-size:.74rem;letter-spacing:.08em;color:var(--gold-soft)}
.rail-head .btn{display:none}
.chatlog{flex:1;overflow-y:auto;padding:11px;font-size:.76rem;display:flex;flex-direction:column;gap:7px}
.chatlog .m b{color:var(--gold-soft)}
.chatlog .m.sys{color:var(--faint);font-style:italic}
.chat-in{border-top:1px solid var(--line);padding:9px}
.chat-in input{width:100%;background:var(--surface);border:1px solid var(--line-soft);border-radius:7px;color:var(--fg);padding:8px 11px;font-size:.78rem}

/* action zone */
.actionzone{border-top:1px solid var(--line);background:linear-gradient(180deg,#0e1612,#0a0f0d);
  padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px}
.myhand{display:flex;align-items:center;gap:10px;justify-content:center;min-height:30px;flex-wrap:wrap}
.myhand .card{width:34px}
.myhand .lbl{font-size:.78rem;color:var(--muted)}
.myhand .lbl b{color:var(--gold-soft)}
.controls{display:flex;flex-direction:column;gap:9px}
.bet-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bet-presets{display:flex;gap:6px}
.bet-presets button{font-size:.66rem;color:var(--muted);background:var(--surface);border:1px solid var(--line-soft);
  border-radius:7px;padding:6px 9px;cursor:pointer}
.bet-presets button:hover{color:var(--gold-soft);border-color:var(--gold-dim)}
.bet-slider{flex:1;min-width:140px;accent-color:var(--gold)}
.bet-out{font-family:var(--font-num);color:var(--gold-soft);min-width:70px;text-align:right;font-size:.9rem}
.action-btns{display:flex;gap:8px}
.action-btns .btn{flex:1;padding:13px 0}
.wait-msg{text-align:center;color:var(--muted);font-size:.8rem;min-height:18px}

.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--red);
  color:var(--fg);padding:10px 16px;border-radius:9px;font-size:.82rem;z-index:80;box-shadow:0 10px 30px -10px #000}

/* ---------- RESPONSIVE (mobile) ---------- */
@media(max-width:860px){
  .game-main{flex-direction:column}
  .felt{max-width:100%;aspect-ratio:1/1.02;border-radius:50%/42%}
  .felt::before{border-radius:50%/42%}
  .table-stage{padding:10px 6px 4px}
  .board{top:44%}.pot{top:57%}
  .chat-rail{position:fixed;inset:0;z-index:70;width:100%;transform:translateX(100%);transition:transform .2s}
  .chat-rail.open{transform:none}
  .rail-head .btn{display:inline-block}
  .board .card{width:30px}
  .seat{width:clamp(60px,20vw,92px)}
  .seat .avatar{width:34px;height:34px;font-size:.95rem}
  .seat .holecards .card{width:17px}
  .bet-presets button{padding:7px 8px}
}
@media(min-width:861px){ .chat-toggle{display:none} }