:root{
    color-scheme: dark; /* stops mobile browsers' force-dark from inverting the white cards */
    /* Pebel brand tokens (aligned with pebel.app) */
    --bg0:#0d141b; --bg1:#141c24; --bg-warm:#1b242d;
    --panel:rgba(20,28,36,.88); --panel-line:#212c36;
    /* felt matches the Pebel spade logo background (#01291e) so the mark blends seamlessly */
    --felt:#01291e; --felt-dark:#001b13; --rail:#121a22;
    --text:#d8dfe7; --muted:#a3aebb; --faint:#838f9e;
    --accent:#f4a93c; --accent2:#e09328; --accent-ink:#0d141b;
    --green:#4ed9a4; --blue:#4f9bf5; --gold:#f4a93c;
    --loss:#f2607a;
    --spade:#23272e; --heart:#c22b35; --diamond:#2b5cc7; --club:#2c9450;
    --r-lg:12px; --r-md:8px;
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --font-display:'Bungee', system-ui, sans-serif;
    --font-body:'Inter', system-ui, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{
    background:
      radial-gradient(900px 520px at 50% -8%, rgba(29,71,57,.42), transparent 58%),
      radial-gradient(700px 480px at 80% 20%, rgba(244,169,60,.08), transparent 55%),
      linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh; letter-spacing:.01em;
  }

  /* ================= top bar ================= */
  .topbar{
    background:rgba(13,20,27,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--panel-line);
    position:sticky; top:0; z-index:20;
  }
  .topbar .logo{
    display:inline-flex; align-items:center;
    text-decoration:none; color:var(--accent); cursor:pointer;
    line-height:0;
  }
  .topbar .logo-lockup{
    height:52px; width:auto; max-width:min(240px, 42vw);
    display:block; object-fit:contain;
  }
  .topbar .hint{font-size:.72rem; color:var(--muted); font-weight:500;}

  /* ================= navigation ================= */
  .nav{
    display:flex; gap:4px; background:rgba(255,255,255,.04); padding:4px;
    border-radius:var(--r-md); border:1px solid var(--panel-line);
  }
  .nav-btn{
    padding:8px 16px; border-radius:var(--r-md); font-size:.78rem; font-weight:600;
    background:transparent; border:none; color:var(--muted); cursor:pointer;
    font-family:inherit; transition:all .15s ease;
  }
  .nav-btn:hover{color:var(--text);}
  .nav-btn.on{
    background:var(--accent);
    color:var(--accent-ink); box-shadow:0 3px 12px rgba(244,169,60,.28);
  }

  /* ================= views / pages ================= */
  .view{display:none; min-height:calc(100vh - 56px);}
  .view.view-active{display:block;}
  .page-wrap{max-width:960px; margin:0 auto; padding:20px 16px 40px;}
  .page-wrap.narrow{max-width:520px;}
  .page-title{font-size:1.5rem; font-weight:800; margin-bottom:6px;}
  .page-sub{font-size:.85rem; color:var(--muted); line-height:1.55; margin-bottom:20px;}
  .page-sub a{color:var(--gold);}
  .page-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  .page-card{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
    padding:16px; box-shadow:var(--shadow);
  }
  .page-card.full{grid-column:1/-1;}
  .page-card h2{font-size:.95rem; margin-bottom:8px;}
  .page-card input, .page-card textarea{
    width:100%; margin-bottom:8px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    color:var(--text); padding:10px 12px; border-radius:var(--r-md); font-size:.85rem; font-family:inherit;
  }
  .page-card .card-hint{font-size:.74rem; color:var(--muted); margin-bottom:10px; line-height:1.5;}
  .card-head-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
  .card-actions{display:flex; gap:6px; flex-wrap:wrap;}
  .library-status{font-size:.8rem; color:var(--muted); min-height:1.2em; margin-bottom:12px;}
  .library-status b{color:var(--gold);}
  .results-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
  button.ghost{background:var(--bg1); border:1px solid var(--panel-line); color:var(--text);}
  button.ghost:hover{color:var(--text); border-color:var(--gold);}
  .notice ol{margin:10px 0 10px 18px; font-size:.82rem; color:var(--muted); line-height:1.7;}
  .auth-btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  .account-email-line{margin-bottom:12px; font-size:.88rem;}
  .account-stats{display:flex; gap:16px; margin-bottom:14px;}
  .account-stat .k{display:block; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}
  .account-stat .v{font-size:1.4rem; font-weight:800; color:var(--gold);}
  .account-status{font-size:.78rem; color:var(--muted); margin-top:10px; min-height:1.2em;}
  .coming-soon{margin-top:20px; padding-top:16px; border-top:1px solid var(--panel-line);}
  .coming-soon h3{font-size:.82rem; color:var(--gold); margin-bottom:8px;}
  .coming-soon ul{font-size:.78rem; color:var(--muted); margin-left:18px; line-height:1.8;}

  /* ================= range chart ================= */
  .range-panel{margin-top:16px; padding-top:14px; border-top:1px solid var(--panel-line);}
  .range-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
  .range-title{font-size:.78rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.08em;}
  .range-pos-sel{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:var(--text); padding:6px 10px; border-radius:var(--r-md); font-size:.8rem; font-family:inherit;
  }
  .range-legend{font-size:.68rem; color:var(--muted); margin-left:auto;}
  .range-legend .lg{display:inline-block; width:10px; height:10px; border-radius:2px; margin:0 4px 0 10px; vertical-align:middle;}
  .range-legend .lg.r{background:var(--green);}
  .range-legend .lg.f{background:rgba(255,255,255,.08);}
  .range-grid-wrap{overflow-x:auto;}
  .range-row{display:flex; gap:2px; margin-bottom:2px; align-items:center;}
  .range-lbl{width:14px; font-size:.55rem; color:var(--muted); font-weight:700; text-align:center;}
  .range-cell{
    width:28px; height:22px; border-radius:3px; font-size:.45rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.04);
  }
  .range-cell.r{background:rgba(62,207,111,.35); color:#b8f5d0; border-color:rgba(62,207,111,.4);}
  .range-cell.f{background:rgba(255,255,255,.04);}
  .range-cell.hl{box-shadow:0 0 0 2px var(--gold); color:#fff;}
  .range-note{font-size:.66rem; color:var(--muted); margin-top:8px;}

  .logo{cursor:pointer;}

  /* ================= deck strip ================= */
  .deck-wrap{
    padding:6px 12px 4px; display:flex; flex-direction:column; align-items:stretch;
    width:100%; max-width:none; margin:0; box-sizing:border-box;
  }
  .deck-label{
    font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
    color:var(--muted); margin-bottom:4px; align-self:flex-start; padding-left:2px;
  }
  .deck{
    display:flex; flex-direction:column; gap:4px; width:100%; max-width:680px; margin:0 auto;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
    padding:7px 9px; box-shadow:var(--shadow);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-sizing:border-box;
  }
  .deck-row{
    display:grid; grid-template-columns:repeat(13, minmax(0, 1fr));
    gap:clamp(3px, 0.5vw, 6px); width:100%;
  }
  /* deck cards match the table cards: white stock, centered rank over suit */
  .strip-card{
    width:100%; min-width:0; aspect-ratio:5/7; height:auto;
    border-radius:6px; cursor:pointer; user-select:none; position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    background:linear-gradient(160deg,#ffffff 0%, #f7f8fa 100%);
    color:#1a1a1a; font-weight:800; line-height:1;
    border:1px solid rgba(0,0,0,.22);
    box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
  }
  .strip-card .r{
    font-size:clamp(.6rem, 1.5vw, 1.05rem); font-weight:800; letter-spacing:-.02em;
  }
  .strip-card .s{
    font-size:clamp(.5rem, 1.2vw, .85rem); line-height:1;
  }
  .strip-card .pip{display:none;}
  .strip-card:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 9px 18px rgba(0,0,0,.5), 0 0 0 2px var(--gold); z-index:3;}
  /* used cards keep the same white face — only the ink fades */
  .strip-card.used{
    border-color:rgba(0,0,0,.12); box-shadow:none;
  }
  .strip-card.used .r, .strip-card.used .s{opacity:.25; filter:grayscale(.6);}
  /* 4-color deck for instant readability */
  .suit-0{color:#1a1a1a;}                 /* spades — black */
  .suit-1{color:#d0212f;}                 /* hearts — red */
  .suit-2{color:#1c62d6;}                 /* diamonds — blue */
  .suit-3{color:#1f9a4d;}                 /* clubs — green */

  /* ================= buttons ================= */
  button{
    background:rgba(255,255,255,.06); color:var(--text);
    border:1px solid var(--panel-line); padding:9px 16px;
    border-radius:var(--r-md); font-weight:600; font-size:.85rem; cursor:pointer;
    font-family:inherit; letter-spacing:.01em;
    transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  }
  button:hover{border-color:rgba(244,169,60,.55); box-shadow:0 4px 14px rgba(0,0,0,.35); transform:translateY(-1px);}
  button:active{transform:translateY(0);}
  button.primary{
    background:var(--accent);
    border:none; color:var(--accent-ink); box-shadow:0 6px 18px rgba(244,169,60,.28);
  }
  button.primary:hover{filter:brightness(1.06); box-shadow:0 8px 22px rgba(244,169,60,.38);}
  button.mic.on{background:var(--accent); color:var(--accent-ink); border:none; animation:pulse 1.2s infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,169,60,.45);}50%{box-shadow:0 0 0 12px rgba(244,169,60,0);}}

  /* ================= voice / type ================= */
  .voice-status{max-width:940px; margin:8px auto 0; padding:0 16px; text-align:center; font-size:.8rem; color:var(--muted); min-height:1.2em;}
  .voice-status b{color:var(--gold);}
  .type-row{max-width:600px; margin:6px auto 0; padding:0 16px; display:flex; gap:8px;}
  .type-row input{
    flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    color:var(--text); padding:10px 14px; border-radius:var(--r-md); font-size:.85rem; font-family:inherit;
  }
  .type-row input:focus{outline:none; border-color:var(--gold);}

  /* ================= table ================= */
  .table-area{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:12px 16px 16px; overflow:visible; min-height:0;
  }
  .table-area.has-live-eq{padding-bottom:28px;}
  .poker-table{
    position:relative; width:min(720px, 92%); aspect-ratio:16/10;
    /* flat center (same color as the logo image) with a soft edge vignette */
    background:radial-gradient(ellipse at center, var(--felt) 0%, var(--felt) 58%, var(--felt-dark) 100%);
    border-radius:48% / 52%;
    border:12px solid var(--rail);
    box-shadow:
      0 24px 60px rgba(0,0,0,.65),
      0 0 0 3px rgba(244,169,60,.18),
      inset 0 0 80px rgba(0,0,0,.45),
      inset 0 2px 14px rgba(255,255,255,.09);
    margin:28px 32px 24px;
    overflow:visible;
  }
  .poker-table::before{
    content:''; position:absolute; inset:26px 44px; border-radius:48%/52%;
    border:2px solid rgba(255,255,255,.10); pointer-events:none;
  }
  /* Pebel mark printed on the felt, above where community cards are dealt.
     mix-blend lighten drops the mark's dark navy background so only the
     gold spade + white P print onto the felt like a real table logo. */
  .poker-table .brand{
    position:absolute; top:34%; left:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:0;
  }
  .poker-table .brand-mark{
    /* logo background is the exact felt color, so it prints seamlessly */
    height:clamp(64px, 18%, 110px); width:auto; display:block;
  }
  .pot-chip{
    position:absolute; top:70%; left:50%; transform:translateX(-50%);
    background:rgba(13,20,27,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(244,169,60,.55); color:var(--gold);
    font-family:var(--font-body); font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; font-variant-numeric:tabular-nums;
    padding:4px 15px; border-radius:999px; white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    z-index:2;
  }

  /* seats */
  .seat{
    position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px;
    /* seat coords come from --sx/--sy (percent numbers); --seat-spread pushes them outward from center */
    left:calc(50% + (var(--sx, 50) - 50) * var(--seat-spread-x, var(--seat-spread, 1)) * 1%);
    top:calc(50% + (var(--sy, 50) - 50) * var(--seat-spread, 1) * 1%);
    transform:translate(-50%,-50%); transition:opacity .25s ease, filter .25s ease; z-index:4;
  }
  /* hero: label above cards so stack text doesn't cover live equity below */
  .hero-seat{z-index:5; transform:translate(-50%,-62%);}
  .hero-seat .tag{white-space:nowrap; max-width:none; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.35;}
  .hero-seat .tag-row{display:block;}
  .hero-seat .tag-stk{font-size:.56rem; color:var(--faint); font-weight:500; letter-spacing:.01em; font-variant-numeric:tabular-nums;}
  .seat.folded{opacity:.3; filter:grayscale(.9);}

  /* clean table: empty villain seats show only their tag — tap it to pop the slots open */
  .seat:not(.hero-seat) .tag{cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .seat.v-collapsed .cards{display:none;}
  .seat.v-collapsed .tag::after{content:'▾'; margin-left:5px; opacity:.5; font-size:.85em;}
  .seat:not(.hero-seat):not(.v-collapsed) .cards{
    animation:seat-pop .34s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes seat-pop{
    from{transform:scale(.25) translateY(-8px); opacity:0;}
    to{transform:scale(1) translateY(0); opacity:1;}
  }
  .seat .tag{
    font-family:var(--font-body);
    font-size:.62rem; font-weight:500; color:rgba(255,255,255,.9);
    letter-spacing:.01em; font-variant-numeric:tabular-nums;
    background:rgba(13,20,27,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    padding:4px 12px; border-radius:999px; white-space:nowrap; text-align:center; line-height:1.5;
    border:1px solid rgba(255,255,255,.10); box-shadow:0 4px 10px rgba(0,0,0,.35);
  }
  .seat .tag b{color:var(--gold); font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
  .seat .tag .inv{color:var(--green); font-weight:600;}
  .seat .tag .stk-click{cursor:pointer; border-bottom:1px dotted var(--faint);}
  .seat .tag .stk-click:hover{color:var(--gold); border-color:var(--gold);}
  .seat .tag{transition:border-color .4s ease, box-shadow .4s ease;}
  .seat .tag .eqp{font-weight:800; font-size:.7rem; letter-spacing:.01em; font-variant-numeric:tabular-nums;}
  .board{
    position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
    display:flex; gap:8px; z-index:3; pointer-events:auto;
  }
  .cards{display:flex; gap:6px;}
  .slot.slot-hidden{display:none !important;}

  /* card slots */
  .slot{
    width:44px; height:62px; border-radius:8px; cursor:pointer; user-select:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    /* classic card back — patterned red with white frame */
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 15%, transparent 16%),
      repeating-linear-gradient(45deg, #7d1722 0 6px, #5e1018 6px 12px);
    border:2.5px solid #f2f2f2;
    color:transparent; font-size:.5rem; /* hide slot labels — it's a card back */
    box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35);
    transition:transform .12s ease, box-shadow .12s ease, border-color .15s ease;
  }
  .hero-seat .slot, .board .slot{width:56px; height:78px; border-radius:9px; border-width:3px;}
  /* board community slots — show Flop / Turn / River labels */
  .board .slot:not(.filled){
    color:rgba(255,255,255,.92);
    font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    line-height:1.15; text-align:center;
    background:
      radial-gradient(circle at 50% 32%, rgba(244,169,60,.22) 0 16%, transparent 17%),
      repeating-linear-gradient(45deg, #7d1722 0 6px, #5e1018 6px 12px);
  }
  .board .slot:not(.filled).future{opacity:.28; pointer-events:none;}
  .board .slot:not(.filled).deal-next{
    color:var(--gold);
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(244,169,60,.35), 0 0 18px rgba(244,169,60,.3);
    animation:board-pulse 1.3s ease-in-out infinite;
  }
  @keyframes board-pulse{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
  }
  .slot:hover{transform:translateY(-3px); border-color:var(--gold);}
  .slot.sel{
    border:2px solid var(--accent); border-style:solid; color:#fff;
    box-shadow:0 0 0 4px rgba(244,169,60,.25), 0 0 18px rgba(244,169,60,.4);
  }
  .slot.filled{
    background:linear-gradient(165deg,#ffffff 0%, #f2efe6 100%);
    color:#191919; font-size:1.2rem; font-weight:800; border:1px solid rgba(0,0,0,.25); border-style:solid;
    box-shadow:0 5px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .hero-seat .slot.filled, .board .slot.filled{font-size:1.5rem; box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);}
  .board .slot.filled{z-index:1;}
  .slot.filled .s{font-size:1rem; line-height:1;}
  .hero-seat .slot.filled .s, .board .slot.filled .s{font-size:1.2rem;}
  /* same 4-color scheme as the deck: hearts red, diamonds blue, clubs green (spades default black) */
  .slot.filled.c-1{color:#cf2430;} .slot.filled.c-2{color:#1c62d6;} .slot.filled.c-3{color:#1f9a4d;}
  .slot.filled:hover::after{
    content:'×'; position:absolute; top:-9px; right:-9px; width:20px; height:20px;
    background:var(--accent); color:var(--accent-ink); border-radius:50%; font-size:.8rem;
    display:flex; align-items:center; justify-content:center; font-weight:800;
    box-shadow:0 3px 8px rgba(0,0,0,.45);
  }

  /* ================= live equity ================= */
  .live-eq{max-width:min(940px,96vw); margin:16px auto 10px; padding:0 16px; position:relative; z-index:2; clear:both;}
  .live-eq-label{font-size:.68rem; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.14em; font-weight:600;}
  .live-eq-label b{color:var(--gold);}
  .live-eq .equity-bar{height:20px; font-size:.68rem;}

  /* ================= panels ================= */
  .bet-panel{max-width:none; margin:4px 0; padding:0 12px;}
  .bet-box{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
    padding:16px; box-shadow:var(--shadow);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .bet-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
  .bet-head .title{
    font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:var(--gold);
  }
  .bet-head label{font-size:.7rem; color:var(--muted); font-weight:600;}
  .tabs{display:flex; gap:4px; margin-left:auto; background:rgba(255,255,255,.05); padding:4px; border-radius:999px;}
  .tab{
    padding:6px 15px; border-radius:999px; font-size:.74rem; font-weight:700; cursor:pointer;
    color:var(--muted); transition:all .15s ease;
  }
  .tab.active{background:var(--accent); color:var(--accent-ink); box-shadow:0 3px 10px rgba(244,169,60,.3);}
  select{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text);
    padding:8px 10px; border-radius:var(--r-md); font-size:.82rem; font-family:inherit; font-weight:600;
  }
  input[type=number]{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text);
    padding:8px 10px; border-radius:var(--r-md); width:76px; font-size:.85rem; font-family:inherit; font-weight:600;
  }
  input[type=number]:focus, select:focus{outline:none; border-color:var(--gold);}

  /* ================= wizard ================= */
  .wiz-banner{
    text-align:center; font-size:1rem; font-weight:700; padding:14px 12px;
    border-radius:var(--r-md);
    background:linear-gradient(135deg, rgba(244,169,60,.10), rgba(244,169,60,.04));
    border:1px solid rgba(244,169,60,.35);
    margin-bottom:12px; line-height:1.55;
  }
  .wiz-banner.turn{
    border-color:rgba(62,207,111,.5);
    background:linear-gradient(135deg, rgba(62,207,111,.12), rgba(62,207,111,.04));
    box-shadow:0 0 24px rgba(62,207,111,.12);
  }
  .wiz-banner small{display:block; font-weight:500; font-size:.74rem; color:var(--muted); margin-top:4px;}
  .wiz-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; align-items:center;}
  .wiz-actions button.big{padding:13px 20px; font-size:.92rem; border-radius:var(--r-md);}
  .wiz-actions button.act-fold{border-color:rgba(242,96,122,.55); color:#f2607a;}
  .wiz-actions button.act-call{border-color:rgba(91,155,255,.55); color:#8ab6ff;}
  .wiz-actions button.act-raise{border-color:rgba(62,207,111,.55); color:#6fe096;}
  .wiz-actions button.act-fold:hover{background:rgba(242,96,122,.12);}
  .wiz-actions button.act-call:hover{background:rgba(91,155,255,.12);}
  .wiz-actions button.act-raise:hover{background:rgba(62,207,111,.12);}
  .wiz-actions input{width:96px;}
  .wiz-log{
    font-size:.78rem; color:var(--muted); line-height:2; margin-bottom:10px;
    max-height:140px; overflow-y:auto; padding:2px 10px;
    border-left:2px solid rgba(255,255,255,.08);
  }
  .wiz-log .street-sep{color:var(--gold); font-weight:800; letter-spacing:.04em;}
  .wiz-log .you{color:var(--text); font-weight:700;}
  details.adv{margin-top:10px;}
  details.adv summary{cursor:pointer; color:var(--muted); font-size:.74rem; padding:6px 0; font-weight:600; letter-spacing:.04em;}
  details.adv summary:hover{color:var(--gold);}

  /* betting rows */
  .brow{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md);
    border:1px solid transparent; cursor:pointer; font-size:.83rem; flex-wrap:wrap;
    margin-bottom:4px; background:rgba(255,255,255,.03);
    transition:all .15s ease;
  }
  .brow:hover{background:rgba(255,255,255,.07);}
  .brow.sel{border-color:rgba(244,169,60,.6); background:rgba(244,169,60,.08);}
  .brow.folded{opacity:.35;}
  .brow .nm{width:120px; font-weight:700;}
  .brow .nm b{color:var(--gold);}
  .brow .amt{font-weight:800; color:var(--gold); width:96px;}
  .brow .toact{
    font-size:.6rem; font-weight:800; letter-spacing:.08em;
    background:linear-gradient(135deg,#3ecf6f,#1f9e4d); color:#fff; padding:3px 10px; border-radius:999px;
    box-shadow:0 2px 8px rgba(62,207,111,.4);
  }
  .brow .stk-wrap{font-size:.7rem; color:var(--muted); margin-left:auto; display:flex; align-items:center; gap:5px;}
  .brow input.stk{width:66px; padding:4px 6px; font-size:.75rem;}
  .brow .qa{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); padding:5px 12px; font-size:.72rem; border-radius:999px;}
  .brow .qa:hover{border-color:var(--gold);}
  .brow .qa.fold{color:#f2607a;}
  .brow .clr{background:none; border:none; color:#f2607a; font-size:1rem; padding:2px 6px; box-shadow:none;}
  .brow .clr:hover{transform:none; box-shadow:none;}

  /* chips */
  .chips{display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
  .chip{
    width:52px; height:52px; border-radius:50%; cursor:grab; user-select:none;
    display:flex; align-items:center; justify-content:center; position:relative;
    font-weight:800; font-size:.78rem; color:#fff;
    border:5px dashed rgba(255,255,255,.9);
    box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.3), inset 0 8px 12px rgba(255,255,255,.25);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .chip:hover{transform:translateY(-5px) scale(1.08); box-shadow:0 12px 22px rgba(0,0,0,.55), inset 0 0 0 3px rgba(0,0,0,.3), inset 0 8px 12px rgba(255,255,255,.25);}
  .chip:active{cursor:grabbing;}
  .ch-1{background:radial-gradient(circle at 35% 30%, #b8b8b8, #7c7c7c);}
  .ch-5{background:radial-gradient(circle at 35% 30%, #e05545, #a52a1c);}
  .ch-25{background:radial-gradient(circle at 35% 30%, #35b262, #167a3c);}
  .ch-100{background:radial-gradient(circle at 35% 30%, #3d434d, #0d0f13);}
  .ch-500{background:radial-gradient(circle at 35% 30%, #9d55c4, #64307f);}
  .ch-1000{background:radial-gradient(circle at 35% 30%, #e3b23c, #96700f);}
  .bet-summary{display:flex; gap:18px; justify-content:center; margin-top:14px; font-size:.82rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-weight:600;}
  .bet-summary b{color:var(--gold); font-weight:800;}
  .chip-hint{text-align:center; font-size:.66rem; color:var(--muted); margin-top:8px; letter-spacing:.02em;}

  /* ================= results ================= */
  .results{max-width:780px; margin:12px auto 34px; padding:0 16px; display:none;}
  .equity-bar{
    display:flex; height:30px; border-radius:999px; overflow:hidden; margin:10px 0; font-size:.72rem; font-weight:800;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.4); background:rgba(255,255,255,.05);
  }
  .equity-bar div{
    display:flex; align-items:center; justify-content:center; color:#fff; min-width:0; white-space:nowrap;
    transition:width .5s ease;
  }
  .eq-win{background:linear-gradient(180deg,#4adb7c,#28a355);}
  .eq-tie{background:linear-gradient(180deg,#8b8b8b,#666);}
  .eq-lose{background:linear-gradient(180deg,#ff5d64,#c9222d);}
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;}
  .stat{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-md); padding:10px 12px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .stat .k{font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-weight:700;}
  .stat .v{font-size:.95rem; font-weight:800; margin-top:3px;}
  .advice{
    background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--gold);
    border-radius:var(--r-md); padding:14px 16px; margin-top:12px; font-size:.9rem; line-height:1.6; white-space:pre-wrap;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .advice .verdict{font-weight:800; font-size:1.08rem; letter-spacing:.02em;}
  .verdict.raise{color:var(--green);} .verdict.call{color:var(--blue);} .verdict.fold{color:var(--loss);} .verdict.check{color:var(--muted);}
  details.llm summary{cursor:pointer; color:var(--muted); font-size:.8rem; margin-top:14px; font-weight:600;}
  details.llm summary:hover{color:var(--gold);}
  details.llm input{
    width:100%; margin:8px 0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    color:var(--text); padding:9px 12px; border-radius:var(--r-md); font-family:inherit;
  }
  .foot{
    text-align:center; color:var(--muted); font-size:.7rem; padding:0 16px 28px; line-height:1.7; opacity:.9;
    display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  }
  .foot-mark{height:16px; width:auto; vertical-align:middle;}
  .foot-word{font-family:var(--font-display); color:var(--accent); font-size:.78rem; text-transform:uppercase;}
  .foot a{color:var(--gold); text-decoration:none;}
  .foot a:hover{text-decoration:underline;}

  /* ================= iOS-style controls ================= */
  .ctrl{
    display:flex; flex-direction:column; gap:2px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
    border-radius:14px; padding:7px 13px; min-width:86px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .ctrl label{
    font-size:.56rem; text-transform:uppercase; letter-spacing:.14em;
    color:var(--muted); font-weight:700;
  }
  .ctrl select, .ctrl input[type=number]{
    background:transparent; border:none; padding:0; border-radius:0;
    font-size:.95rem; font-weight:800; color:var(--text); width:auto;
    -webkit-appearance:none; appearance:none;
  }
  .ctrl input[type=number]{width:70px;}
  .ctrl select{max-width:150px; cursor:pointer;}
  .ctrl select:focus, .ctrl input:focus{outline:none; border:none;}
  .ctrl:focus-within{border-color:rgba(244,169,60,.55);}
  .seg{
    display:flex; background:rgba(0,0,0,.45); border-radius:9px; padding:2px;
    cursor:pointer; user-select:none; margin-top:2px;
  }
  .seg span{
    padding:3px 13px; border-radius:7px; font-size:.72rem; font-weight:700;
    color:var(--muted); transition:all .18s ease;
  }
  .seg span.on{background:#e9e9ec; color:#111; box-shadow:0 1px 4px rgba(0,0,0,.45);}

  /* position badges (SB / BB / BTN color-coded like poker apps) */
  .seat .tag b, .brow .nm b{
    display:inline-block; padding:1px 8px; border-radius:999px; font-size:.58rem;
    font-family:var(--font-body); font-weight:700; text-transform:uppercase;
    background:rgba(244,169,60,.14); border:1px solid rgba(244,169,60,.4); color:var(--gold);
    letter-spacing:.07em; vertical-align:middle;
  }
  .seat .tag b[data-pos="SB"], .brow .nm b[data-pos="SB"]{
    background:rgba(91,155,255,.18); border-color:rgba(91,155,255,.55); color:#9cc1ff;
  }
  .seat .tag b[data-pos="BB"], .brow .nm b[data-pos="BB"]{
    background:rgba(242,96,122,.18); border-color:rgba(242,96,122,.55); color:#f2607a;
  }
  .seat .tag b[data-pos="BTN"], .brow .nm b[data-pos="BTN"]{
    background:#e9e9ec; border-color:#fff; color:#111; font-weight:800;
  }

  /* ================= responsive layout ================= */
  .main{display:flex; flex-direction:column; min-width:0; overflow:visible;}
  .col-left, .col-right{min-width:0; overflow:visible;}

  /* --- desktop: lock analyze to one viewport --- */
  @media (min-width:1100px){
    body:has(#view-analyze.view-active){
      height:100vh; height:100dvh; overflow:hidden;
    }
    .topbar{padding:8px 16px; flex-wrap:nowrap;}
    .topbar .logo-lockup{height:40px; max-width:180px;}
    .topbar .hint{font-size:.65rem; white-space:nowrap;}
    .nav-btn{padding:6px 12px; font-size:.72rem;}

    #view-analyze.view-active{
      height:calc(100vh - 56px); height:calc(100dvh - 56px);
      min-height:0; overflow:hidden; display:flex; flex-direction:column;
    }
    #view-analyze .main{
      flex:1; min-height:0; height:100%;
      display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,0.85fr);
      gap:6px 10px; max-width:1680px; margin:0 auto; align-items:stretch;
      padding:6px 12px 8px; width:100%; box-sizing:border-box;
    }
    .col-left{
      display:flex; flex-direction:column; min-height:0; height:100%; gap:2px;
      position:relative;
      /* permanent slot for the live-equity bar so the table never resizes
         when cards get picked (equity is absolutely placed in this space) */
      padding-bottom:52px;
    }
    .col-right{
      display:flex; flex-direction:column; min-height:0; height:100%;
      max-height:none; overflow:hidden; padding-top:0; gap:4px;
    }
    .deck-wrap{flex:0 0 auto; padding:2px 4px 0; max-width:none;}
    .deck{padding:6px 8px; gap:3px; width:100%; max-width:600px;}
    .deck-row{gap:clamp(2px,0.35vw,4px);}
    .strip-card .r{font-size:clamp(.5rem, 1vw, .82rem);}
    .strip-card .s{font-size:clamp(.4rem, 0.8vw, .6rem);}
    .strip-card .pip{font-size:clamp(.8rem, 1.7vw, 1.25rem);}

    .table-area{
      flex:1 1 auto; min-height:0; padding:2px 4px 4px;
      overflow:hidden; display:flex; align-items:center; justify-content:center;
      container-type:size;
    }
    /* equity showing must not steal height from the table */
    .table-area.has-live-eq{padding-bottom:4px;}
    .poker-table{
      width:min(calc(100cqi - 32px), calc((100cqb - 22px) * 1.6));
      max-width:calc(100cqi - 32px);
      max-height:calc(100cqb - 22px);
      aspect-ratio:16/10;
      height:auto;
      margin:14px auto;
      border-width:12px;
      overflow:visible;
    }
    .poker-table .brand{top:34%;}
    .poker-table .brand-mark{height:clamp(52px, 16cqb, 92px);}
    .board{top:52%; gap:10px;}
    .pot-chip{top:70%; font-size:.72rem; padding:4px 14px;}
    .hero-seat .slot, .board .slot{width:52px; height:72px;}
    .slot{width:40px; height:56px;}
    .seat .tag{font-size:.58rem; padding:3px 9px;}
    .seat{gap:4px;}
    .hero-seat{transform:translate(-50%,-60%);}

    .talk-panel{
      flex:0 0 auto; max-width:none; width:100%;
      padding:2px 6px 6px; margin:0;
    }
    .mic-main{min-height:40px; font-size:.92rem; box-shadow:0 4px 14px rgba(244,169,60,.28);}
    .talk-hint{margin:4px 0 2px; font-size:.7rem;}
    .voice-status{margin:2px 0; padding:0; min-height:0; font-size:.72rem;}
    .villain-profile-row{margin-bottom:6px; gap:3px; font-size:.65rem;}
    .villain-profile-sel{padding:6px 8px; font-size:.78rem;}
    .talk-input{min-height:52px; padding:8px 10px; font-size:.8rem; border-radius:var(--r-md);}
    .talk-actions{margin-top:6px; gap:6px;}
    .talk-actions button{padding:7px 12px; font-size:.78rem;}
    .story-timeline{margin-top:8px; gap:4px; max-height:120px; overflow-y:auto;}
    .fold-range{margin-top:8px; max-height:160px; overflow-y:auto;}

    .bet-panel{
      flex:0 0 auto; max-width:none; width:100%;
      margin:0; padding:0 6px;
    }
    .bet-box{padding:10px 12px; border-radius:12px;}
    .hand-setup-row{gap:8px;}
    .hand-setup-row label{font-size:.65rem;}
    .hand-setup-actions .big-start{padding:9px 14px; font-size:.85rem;}
    .wiz-log{max-height:72px;}
    .adv summary{font-size:.7rem; padding:4px 0;}

    .results{
      flex:1 1 auto; min-height:0; max-width:none; width:100%;
      margin:0; padding:0 6px 4px; overflow-y:auto;
    }
    .foot{display:none;}
    /* live-equity bar lives in the reserved slot at the very bottom of the
       left column — absolutely placed so showing/hiding it never changes the
       table size */
    .live-eq{
      position:absolute; left:0; right:0; bottom:4px;
      margin:0; padding:0 10px; z-index:2;
    }
  }

  /* --- mobile: compact, single column, no horizontal overflow --- */
  @media (max-width:700px){
    .topbar{padding:9px 14px;}
    .topbar .logo-lockup{height:42px; max-width:min(200px, 55vw);}
    .topbar .hint{display:none;}
    .poker-table .brand-mark{height:clamp(40px, 14%, 64px);}
    .deck-wrap{padding:8px 8px 4px; max-width:none;}
    .deck{padding:6px 6px; gap:4px; border-radius:12px; width:100%; max-width:none;}
    .deck-row{gap:3px;}
    .strip-card{border-radius:4px;}
    .strip-card .r{font-size:.5rem; top:2px; left:2px;}
    .strip-card .s{font-size:.4rem; top:calc(2px + .5rem); left:3px;}
    .strip-card .pip{font-size:.72rem; right:2px; bottom:1px;}
    .table-area{padding:18px 12px 24px; overflow:visible;}
    .poker-table{border-width:9px; margin:36px 28px 32px; border-radius:46%/50%; overflow:visible;}
    .poker-table::before{inset:14px 24px;}
    .poker-table .brand{top:34%;}
    .pot-chip{font-size:.62rem; padding:3px 10px; top:70%;}
    .board{top:52%; gap:3px;}
    .hero-seat .slot, .board .slot{width:38px; height:53px; border-width:2px; border-radius:6px;}
    .board .slot:not(.filled){font-size:.42rem; letter-spacing:.02em;}
    .slot.filled{font-size:.78rem;}
    .hero-seat .slot.filled, .board .slot.filled{font-size:1rem;}
    .slot.filled .s{font-size:.66rem;}
    .hero-seat .slot.filled .s, .board .slot.filled .s{font-size:.82rem;}
    .slot.filled:hover::after{width:16px; height:16px; font-size:.65rem; top:-7px; right:-7px;}
    .slot{width:27px; height:38px; border-width:1.5px; border-radius:5px;}
    .seat{gap:3px;}
    .hero-seat{transform:translate(-50%,-58%);}
    .hero-seat .tag{white-space:normal; max-width:min(220px, 72vw);}
    .hero-seat .tag-stk{font-size:.5rem;}
    .seat .tag{font-size:.47rem; padding:2px 7px; line-height:1.45; border-radius:8px;}
    .seat .tag b, .brow .nm b{font-size:.46rem; padding:1px 5px;}
    .live-eq{padding:0 10px;}
    .live-eq-label{font-size:.56rem; letter-spacing:.08em;}
    .live-eq .equity-bar{height:16px; font-size:.58rem;}
    .bet-panel{padding:0 8px;}
    .bet-box{padding:12px 10px; border-radius:14px;}
    .bet-head{gap:6px;}
    .bet-head .title{display:none;}
    .ctrl{padding:5px 9px; min-width:0; border-radius:11px;}
    .ctrl label{font-size:.5rem;}
    .ctrl select, .ctrl input[type=number]{font-size:.85rem;}
    .ctrl input[type=number]{width:56px;}
    .ctrl select{max-width:118px;}
    button{padding:8px 12px; font-size:.76rem; border-radius:10px;}
    .wiz-banner{font-size:.85rem; padding:10px 8px;}
    .wiz-banner small{font-size:.66rem;}
    .wiz-actions{gap:6px;}
    .wiz-actions button.big{padding:10px 12px; font-size:.78rem;}
    .wiz-actions input{width:78px;}
    .wiz-log{font-size:.7rem; max-height:100px;}
    .type-row input{padding:8px 10px; font-size:.78rem;}
    .voice-status{font-size:.7rem;}
    .brow{padding:7px 8px; gap:6px; font-size:.76rem;}
    .brow .nm{width:auto; min-width:86px;}
    .brow .amt{width:auto; min-width:70px;}
    .brow .qa{padding:4px 9px; font-size:.64rem;}
    .brow input.stk{width:54px;}
    .chips{gap:8px; margin-top:10px;}
    .chip{width:40px; height:40px; font-size:.62rem; border-width:4px;}
    .bet-summary{gap:10px; font-size:.72rem;}
    .chip-hint{font-size:.58rem;}
    .stat-grid{grid-template-columns:1fr 1fr; gap:6px;}
    .stat .v{font-size:.8rem;}
    .advice{font-size:.8rem; padding:11px 12px;}
    .results{padding:0 8px;}
    .equity-bar{height:24px; font-size:.62rem;}
    .foot{font-size:.6rem;}
  }

  /* scrollbars */
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:4px;}
  ::-webkit-scrollbar-track{background:transparent;}

/* ================= saved hands ================= */
.saved-hands-panel{
  max-width:940px; margin:0 auto 24px; padding:0 16px;
}
.saved-hands-panel summary{
  cursor:pointer; color:var(--gold); font-size:.82rem; font-weight:700;
  padding:10px 0; letter-spacing:.04em;
}
.saved-hands-panel summary:hover{filter:brightness(1.1);}
.saved-save-block{
  display:flex; flex-direction:column; gap:8px; margin-bottom:12px;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-md);
  padding:12px;
}
.saved-save-block input,
.saved-save-block textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:10px 12px; border-radius:var(--r-md); font-size:.85rem; font-family:inherit;
  width:100%;
}
.saved-save-block textarea{resize:vertical; min-height:52px;}
.saved-save-block input:focus,
.saved-save-block textarea:focus{outline:none; border-color:var(--gold);}
.saved-check{
  font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:8px; cursor:pointer;
}
.saved-hands-list{display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto;}
.saved-empty{font-size:.78rem; color:var(--muted); text-align:center; padding:16px 8px;}
.saved-item{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-md);
  padding:10px 12px; transition:border-color .15s ease;
}
.saved-item.is-struggled{border-color:rgba(242,96,122,.35);}
.saved-item-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.saved-title{font-size:.88rem; color:var(--text);}
.saved-tag{
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:999px;
}
.saved-tag.struggled{background:rgba(242,96,122,.15); color:#f2607a; border:1px solid rgba(242,96,122,.4);}
.saved-tag.favorite{background:rgba(244,169,60,.12); color:var(--gold); border:1px solid rgba(244,169,60,.4);}
.saved-eq{font-size:.72rem; font-weight:800; color:var(--green); margin-left:auto;}
.saved-meta{font-size:.7rem; color:var(--muted); margin-top:4px; line-height:1.4;}
.saved-notes{font-size:.78rem; color:var(--text); margin-top:6px; opacity:.9; font-style:italic;}
.saved-item-actions{display:flex; gap:6px; margin-top:8px;}
.saved-item-actions button{
  font-size:.72rem; padding:6px 12px; min-height:36px;
}
.saved-item-actions .saved-del{color:#f2607a; border-color:rgba(242,96,122,.4);}
.saved-item-actions .saved-fav{
  min-width:40px; color:var(--gold); border-color:rgba(244,169,60,.45);
}
.saved-io{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.saved-io button{font-size:.74rem; padding:8px 14px;}

/* ================= hand history import ================= */
details.hh-import{margin:10px 0 12px;}
details.hh-import summary{
  cursor:pointer; color:var(--blue); font-size:.78rem; font-weight:700;
  padding:6px 0; letter-spacing:.02em;
}
details.hh-import summary:hover{color:#8ab6ff;}
.hh-hint{font-size:.72rem; color:var(--muted); line-height:1.5; margin:6px 0 10px;}
.hh-hint code{font-size:.68rem; background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px;}
.hh-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center;}
.hh-row input, .hh-import textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:10px 12px; border-radius:var(--r-md); font-size:.82rem; font-family:inherit;
}
.hh-row input{flex:1; min-width:140px;}
.hh-import textarea{width:100%; resize:vertical; min-height:72px; margin-bottom:8px;}
.hh-import textarea:focus, .hh-row input:focus{outline:none; border-color:var(--blue);}
.hh-picker{margin-top:8px;}
.hh-pick-label{font-size:.72rem; color:var(--muted); display:block; margin-bottom:4px;}
.hh-picker select{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:var(--text); padding:8px 10px; border-radius:var(--r-md); font-size:.8rem; font-family:inherit;
}

/* ================= deck horizontal scroll (mobile) ================= */
.deck-scroll{
  width:100%; overflow-x:visible; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; padding-bottom:2px;
}
.deck-scroll .deck{width:100%; min-width:0; margin:0;}

/* ================= voice ask + review extras ================= */
.voice-status .ask-list{text-align:left; display:inline-block; margin:6px auto 0; padding-left:1.2em;}
.voice-status .ask-list li{margin:4px 0; color:var(--text);}
.voice-status .ask-partial{color:var(--muted); font-size:.92em;}
#review .review-dec{margin:10px 0; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06);}
#review .review-villain{opacity:.55; margin:4px 0;}
#review .review-sizing,#review .review-range{
  margin-top:5px; font-size:.78rem; color:rgba(255,255,255,.82); line-height:1.45;
}
#review .review-sizing b,#review .review-range b{color:var(--gold); font-weight:700;}
#review .review-range em{display:block; margin-top:2px; font-style:normal; color:var(--muted);}

/* ================= mobile UX improvements ================= */
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  padding-top:max(12px, env(safe-area-inset-top));
}
button, .strip-card, .slot, .tab, .chip{
  touch-action:manipulation;
}
@media (max-width:700px){
  .nav{order:3; width:100%; justify-content:center; margin-top:4px;}
  .topbar{justify-content:space-between;}
  .page-grid{grid-template-columns:1fr;}
  .range-cell{width:22px; height:18px; font-size:.4rem;}
  .deck-scroll{margin:0 -4px; padding:0 4px; overflow-x:visible;}
  .deck{min-width:0; width:100%;}
  .poker-table{
    width:min(100%, 92vw);
    aspect-ratio:4/3;
    margin:28px 18px 26px;
    border-width:8px;
    overflow:visible;
  }
  .poker-table::before{inset:12px 18px;}
  .seat .tag{max-width:92px; white-space:normal; text-align:center;}
  .hero-seat .slot, .board .slot{width:36px; height:50px;}
  .slot{width:25px; height:35px;}
  button{min-height:44px;}
  .wiz-actions button.big{min-height:48px; flex:1 1 calc(50% - 6px);}
  .saved-hands-panel{padding:0 8px; margin-bottom:16px;}
  .saved-hands-list{max-height:240px;}
  .bet-head button{flex:1 1 auto;}
  .type-row{flex-direction:column;}
  .type-row button{width:100%;}
  .col-right{padding-bottom:8px;}
}
@media (max-width:400px){
  .strip-card .r{font-size:.46rem;}
  .strip-card .pip{font-size:.66rem;}
  .poker-table{margin:18px 10px 16px;}
  .seat .tag{font-size:.44rem; max-width:80px;}
}

/* ================= talk mode (voice-first) ================= */
/* Tell-your-hand is hidden for launch — basic calculator only */
.talk-panel{display:none;}
.talk-panel{
  max-width:none; margin:0; padding:10px 12px 12px;
}
.mic-main{
  width:100%; min-height:48px; font-size:1rem; font-weight:700;
  background:var(--accent);
  border:none; color:var(--accent-ink); border-radius:var(--r-md);
  box-shadow:0 6px 20px rgba(244,169,60,.3);
  cursor:pointer; font-family:inherit;
}
.mic-main:hover{filter:brightness(1.05);}
.mic-main.on{animation:pulse 1.2s infinite;}
.talk-hint{
  font-size:.74rem; color:var(--muted); line-height:1.35;
  margin:6px 0 4px; text-align:center;
}
.villain-profile-row{
  display:flex; flex-direction:column; gap:4px; margin-bottom:8px;
  font-size:.7rem; color:var(--muted); font-weight:600;
}
.villain-profile-sel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:var(--text); padding:7px 10px; border-radius:var(--r-md); font-size:.8rem; font-family:inherit;
}
.villain-profile-tag{
  font-size:.68rem; color:var(--gold); font-weight:700; display:none;
}
.talk-input{
  width:100%; resize:vertical; min-height:56px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:var(--text); padding:10px 12px; border-radius:var(--r-md);
  font-size:.82rem; font-family:inherit; line-height:1.45;
}
.talk-input:focus{outline:none; border-color:var(--gold);}
.talk-actions{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.talk-actions .primary{flex:1;}
.talk-actions .ghost{flex:0 0 auto;}

/* ================= spot coach ================= */
.spot-coach-panel{margin-top:14px;}
.spot-coach{
  background:rgba(10,4,6,.55); border:1px solid rgba(244,169,60,.35);
  border-radius:var(--r-lg); padding:14px 16px; text-align:left;
}
.spot-coach-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:12px;}
.spot-coach-title{font-size:.95rem; font-weight:800; color:var(--gold);}
.spot-coach-sub{font-size:.72rem; color:var(--muted); font-weight:600;}
.spot-section{margin-bottom:12px;}
.spot-section:last-child{margin-bottom:0;}
.spot-section-title{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); margin-bottom:6px; padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.spot-list{list-style:none; margin:0; padding:0;}
.spot-list li{
  font-size:.82rem; line-height:1.55; color:var(--text);
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.spot-list li:last-child{border-bottom:none;}
.spot-list b{color:var(--gold); font-weight:700;}
.stat .v{font-variant-numeric:tabular-nums;}
.story-timeline{
  margin-top:16px; display:flex; flex-direction:column; gap:8px;
}
.story-timeline-hint{
  font-size:.68rem; color:var(--muted); text-align:center; margin-bottom:8px;
}
.story-street{
  display:block; width:100%; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-line);
  border-radius:var(--r-md); padding:10px 12px; font-size:.78rem;
  cursor:pointer; font-family:inherit; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.story-street:hover:not(:disabled){border-color:rgba(244,169,60,.5); background:rgba(255,255,255,.06);}
.story-street.on{border-color:var(--gold); background:rgba(244,169,60,.08); box-shadow:0 0 0 1px rgba(244,169,60,.25);}
.story-street:disabled{opacity:.35; cursor:default;}
.story-street b{color:var(--gold); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; display:block;}
.story-street .story-board{display:block; color:var(--muted); margin-top:4px; font-size:.74rem;}
.story-street .story-acts{display:block; margin-top:6px; color:var(--text); line-height:1.45; font-size:.76rem;}
.fold-range{margin-top:14px;}
.range-analysis{
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow);
}
.range-analysis-head{font-size:.92rem; font-weight:700; margin-bottom:6px; line-height:1.4;}
.range-analysis-head b{color:var(--gold);}
.range-analysis-sub{font-size:.72rem; color:var(--muted); margin-bottom:12px; line-height:1.45;}
.range-bucket{
  display:flex; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.76rem; line-height:1.4;
}
.range-bucket:last-of-type{border-bottom:none;}
.range-bucket-k{flex:0 0 88px; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;}
.range-bucket.value .range-bucket-k{color:var(--green);}
.range-bucket.bluff .range-bucket-k{color:var(--blue);}
.range-bucket.medium .range-bucket-k{color:var(--gold);}
.range-bucket.unlikely .range-bucket-k{color:var(--muted);}
.range-bucket-v{flex:1; color:var(--text);}
.range-verdict{margin-top:12px; font-size:.8rem; color:var(--muted); line-height:1.5; padding-top:10px; border-top:1px solid var(--panel-line);}
.bet-panel:not(.hand-active) .wiz-actions,
.bet-panel:not(.hand-active) .wiz-banner{display:none;}
.hand-setup-row{
  display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; align-items:flex-end;
}
.hand-setup-row label{
  font-size:.72rem; color:var(--muted); display:flex; flex-direction:column; gap:4px; flex:1 1 120px;
}
.hand-setup-actions{display:flex; gap:8px; margin-bottom:4px;}
.hand-setup-actions .big-start{
  flex:1; padding:13px 20px; font-size:.92rem; font-weight:800; border-radius:var(--r-md);
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.adv-settings{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.adv-settings label{font-size:.72rem; color:var(--muted); display:flex; flex-direction:column; gap:4px;}
.adv-settings select,
.adv-settings input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:var(--text); padding:8px 10px; border-radius:var(--r-md); font-size:.82rem;
}
@media (max-width:900px){
  .talk-panel{max-width:none; padding:12px 10px 20px;}
  .col-right{order:-1;}
  .main{display:flex; flex-direction:column;}
}

/* ================= pot odds glance + spot check ================= */
.odds-glance{
  margin:12px 0 4px; padding:14px 16px;
  background:linear-gradient(135deg, rgba(244,169,60,.16), rgba(78,217,164,.08));
  border:1px solid rgba(244,169,60,.4);
  border-radius:var(--r-md);
  text-align:center;
}
.odds-glance-main{
  font-family:var(--font-display); font-size:1.55rem; color:var(--accent); line-height:1.1;
}
.odds-glance-main b{color:var(--text);}
.odds-glance-sub{font-size:.82rem; color:var(--muted); margin-top:6px;}

.spot-check{
  margin-bottom:14px; padding:16px 18px;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  text-align:center;
}
.spot-check-verdict{
  font-family:var(--font-display); font-size:1.85rem; letter-spacing:.02em;
  line-height:1.1; margin-bottom:8px;
}
.spot-check-why{
  font-size:.9rem; color:var(--text); line-height:1.45; max-width:36em; margin:0 auto;
}
.spot-check-why b{color:var(--gold);}
.spot-check-more{
  margin-top:10px; font-size:.82rem; color:var(--muted); line-height:1.55;
}
.spot-check-more summary{
  cursor:pointer; color:var(--gold); font-weight:600; list-style:none;
}
.spot-check-more summary:hover{filter:brightness(1.1);}
.spot-check-more[open] summary{margin-bottom:8px;}
.talk-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.talk-actions .primary{flex:1 1 140px;}
.talk-actions .ghost{flex:0 1 auto;}
@media (max-width:700px){
  .spot-check-verdict{font-size:1.45rem;}
  .odds-glance-main{font-size:1.3rem;}
}