:root{
  --felt:#0b3d2e; --felt2:#0f5942; --rail:#1b2a24; --gold:#d4af37;
  --ink:#0d1411; --paper:#f4f1ea; --line:rgba(255,255,255,.12);
  --txt:#eef3f0; --muted:#9fb3aa; --accent:#36b37e; --danger:#e5534b;
  --raise:#e8a33d; --call:#3a8fd6; --chip:#1f3a30;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--ink); color:var(--txt); overscroll-behavior:none;
}
#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top) + 10px) 16px 10px;
  background:linear-gradient(#10221a,#0b1813);border-bottom:1px solid var(--line);
}
.brand{font-weight:700;letter-spacing:.3px}
.brand .suit{color:var(--gold)}
.sync-badge{
  font-size:11px;padding:4px 9px;border-radius:999px;background:#23332c;color:var(--muted);
  border:1px solid var(--line);text-transform:lowercase
}
.sync-badge.synced{color:#0b1813;background:var(--accent);border-color:transparent}
.sync-badge.syncing{color:var(--ink);background:var(--gold)}
.sync-badge.error{color:#fff;background:var(--danger)}
.sync-badge.offline{color:var(--muted)}

/* Views */
#views{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.view{display:none;padding:14px 14px 90px}
.view.active{display:block}

/* Tab bar */
.tabbar{
  position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  background:#0c1813;border-top:1px solid var(--line);
  padding-bottom:var(--safe-bot);
}
.tab{
  background:none;border:none;color:var(--muted);font-size:11px;padding:10px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer
}
.tab span{font-size:18px}
.tab.active{color:var(--accent)}

/* Buttons */
.btn{
  border:none;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;
  background:#22332b;color:var(--txt);cursor:pointer;border:1px solid var(--line)
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#062018;border-color:transparent}
.btn.gold{background:var(--gold);color:#2a2206;border-color:transparent}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn.sm{padding:8px 10px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.4}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row.tight{gap:6px}

/* Forms */
label.fld{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
input,select,textarea{
  width:100%;background:#0f1c16;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px 12px;font-size:15px;font-family:inherit
}
textarea{min-height:64px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* Table */
.table-wrap{position:relative;margin:6px auto 4px;max-width:560px}
.felt{
  position:relative;width:100%;aspect-ratio:1.35/1;border-radius:46% / 46%;
  background:radial-gradient(ellipse at 50% 40%,var(--felt2),var(--felt) 72%);
  border:10px solid #06120d;box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45);
}
.felt::after{
  content:"";position:absolute;inset:7%;border:2px solid rgba(212,175,55,.35);border-radius:46% / 46%;
  pointer-events:none;
}
.board{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:5;
  display:flex;gap:5px;align-items:center;flex-wrap:nowrap
}
.board .card{position:relative;z-index:5}
.seat{z-index:6}
.pot-chip{
  position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.45);border:1px solid var(--gold);color:var(--gold);
  font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap
}
/* seats positioned via JS as % */
.seat{
  position:absolute;transform:translate(-50%,-50%);width:74px;text-align:center;
}
.seat .pod{
  background:#0c1c15;border:1px solid var(--line);border-radius:10px;padding:5px 4px;
  font-size:11px;line-height:1.2
}
.seat.hero .pod{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.3)}
.seat.active .pod{border-color:#5effa0;box-shadow:0 0 0 2px #5effa0,0 0 12px 2px rgba(94,255,160,.75)}
.seat.folded{opacity:.4}
.seat.folded.active{opacity:1}   /* selected/acting player stays bright even when folding */
.seat .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .pos{color:var(--gold);font-size:10px}
.seat .stk{color:var(--muted)}
.seat .hole{display:flex;gap:2px;justify-content:center;margin-top:3px}
.seat .bet{
  margin-top:3px;font-size:10px;color:var(--call);min-height:12px
}
.bet-chip{
  position:absolute;transform:translate(-50%,-50%);z-index:5;
  background:rgba(0,0,0,.55);border:1px solid var(--gold);color:#ffe9a8;
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;
  display:flex;align-items:center;gap:4px;box-shadow:0 1px 3px rgba(0,0,0,.45)
}
.bet-chip .chip-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
  background:radial-gradient(circle at 30% 30%,#f5d67b,#c99a2e);border:1px solid #8a6d1e
}
.dealer-btn{
  position:absolute;width:18px;height:18px;border-radius:50%;background:var(--paper);
  color:#222;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);border:1px solid #999
}

/* Cards */
.card{
  width:26px;height:36px;border-radius:4px;background:var(--paper);color:#111;
  display:inline-flex;align-items:center;justify-content:center;flex-direction:column;
  font-weight:700;font-size:13px;border:1px solid #000;line-height:1;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.4)
}
.card.lg{width:34px;height:48px;font-size:16px}
.card.empty{background:rgba(255,255,255,.08);color:var(--muted);border:1px dashed var(--line)}
.card .r{font-size:1em}
.card .s{font-size:.85em;margin-top:-1px}
.card.red{color:#c0392b}
.card.hole-mini{width:18px;height:25px;font-size:10px;border-radius:3px}

/* Street control */
.street-head{
  display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px
}
.street-tabs{display:flex;gap:6px;flex-wrap:wrap}
.street-tabs .chip{
  padding:6px 10px;border-radius:999px;background:#1a2a22;border:1px solid var(--line);
  font-size:12px;color:var(--muted)
}
.street-tabs .chip.on{background:var(--accent);color:#062018;border-color:transparent}
.street-tabs .chip.done{color:var(--txt)}

.actor-bar{font-size:13px;color:var(--muted);margin:6px 0}
.actor-bar b{color:var(--txt)}
.action-log{
  font-size:12px;color:var(--muted);background:#0e1a14;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;margin-top:8px;max-height:120px;overflow:auto;white-space:pre-wrap
}
.bet-controls{margin-top:8px}
.bet-controls .row .btn{flex:1;min-width:64px}
.amt-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.amt-row input{flex:1}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.quick .btn{flex:1;min-width:48px}

/* Cards list (history) */
.hand-card{
  background:#10201a;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px
}
.hand-card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hand-card .res{font-weight:700}
.res.win{color:var(--accent)} .res.loss{color:var(--danger)}
.hand-card .meta{font-size:12px;color:var(--muted);margin-top:2px}
.hand-card .mini-cards{display:flex;gap:3px;margin-top:8px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;font-size:11px;background:#23332c;border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;margin:2px 4px 0 0;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:50}
#cardPicker{z-index:120}
.modal.hidden{display:none}
.modal-card{
  background:#12211b;width:100%;max-width:560px;border-radius:18px 18px 0 0;
  padding:14px 14px calc(14px + var(--safe-bot));border:1px solid var(--line);max-height:80vh;overflow:auto
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600}
.modal-head .x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.card-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin-bottom:10px}
.card-grid .card{width:100%;height:40px}
.suit-row-label{grid-column:1/-1;font-size:11px;color:var(--muted);margin-top:6px}

/* Misc */
.section-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 8px}
.empty-state{text-align:center;color:var(--muted);padding:40px 16px}
.empty-state .big{font-size:42px;margin-bottom:8px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#10201a;border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .v{font-size:24px;font-weight:700}
.stat .v.win{color:var(--accent)} .stat .v.loss{color:var(--danger)}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:#23332c;border:1px solid var(--line);color:var(--txt);
  padding:10px 16px;border-radius:999px;font-size:13px;z-index:80;box-shadow:0 6px 18px rgba(0,0,0,.4)
}
.toast.hidden{display:none}
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.hint code{background:#0e1a14;padding:1px 5px;border-radius:5px}
.replay-actions{font-size:13px;line-height:1.6}
.replay-street{margin-top:10px}
.replay-street h4{margin:0 0 2px;color:var(--gold);font-size:12px;text-transform:uppercase}
hr.sep{border:none;border-top:1px solid var(--line);margin:16px 0}
.pill-toggle{display:flex;gap:6px;flex-wrap:wrap}
.pill-toggle button{flex:1;min-width:60px}
.pill-toggle button.on{background:var(--accent);color:#062018;border-color:transparent}

/* Login gate */
.login-gate{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 50% 30%,var(--felt2),var(--ink) 75%);
}
.login-gate.hidden{display:none}
.login-card{
  max-width:360px;width:100%;text-align:center;background:rgba(8,18,13,.7);
  border:1px solid var(--line);border-radius:20px;padding:32px 24px;backdrop-filter:blur(6px)
}
.login-logo{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:var(--felt2);border:2px solid var(--gold)
}
.login-logo .suit{color:var(--gold)}
.login-card h1{font-size:20px;margin:0 0 8px}
.login-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 20px}
.btn.google{
  width:100%;background:#fff;color:#1f1f1f;border:none;display:flex;align-items:center;
  justify-content:center;gap:10px;font-weight:600;padding:13px
}
.login-foot{font-size:12px;color:var(--muted);margin-top:16px !important;opacity:.8}
.account-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#10201a;border:1px solid var(--line);border-radius:12px;padding:12px
}
.account-row .who{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-row .who small{display:block;color:var(--muted);font-size:11px}
.sync-badge.signed-out{color:var(--danger)}