@font-face { font-family:'Press Start 2P'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/press-start-2p-latin.woff2) format('woff2'); }
  @font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/chakra-petch-400-latin.woff2) format('woff2'); }
  @font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/chakra-petch-600-latin.woff2) format('woff2'); }
  @font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/chakra-petch-700-latin.woff2) format('woff2'); }
  /* selectable fonts (self-hosted from /fonts — never Google's CDN at runtime) */
  @font-face { font-family:'Special Elite'; font-weight:400; font-display:swap; src:url(/fonts/special-elite-400.woff2) format('woff2'); }
  @font-face { font-family:'Black Ops One'; font-weight:400; font-display:swap; src:url(/fonts/black-ops-one-400.woff2) format('woff2'); }
  @font-face { font-family:'Oswald'; font-weight:400; font-display:swap; src:url(/fonts/oswald-400.woff2) format('woff2'); }
  @font-face { font-family:'Oswald'; font-weight:600; font-display:swap; src:url(/fonts/oswald-600.woff2) format('woff2'); }
  @font-face { font-family:'Oswald'; font-weight:700; font-display:swap; src:url(/fonts/oswald-700.woff2) format('woff2'); }
  @font-face { font-family:'Staatliches'; font-weight:400; font-display:swap; src:url(/fonts/staatliches-400.woff2) format('woff2'); }
  @font-face { font-family:'Roboto Slab'; font-weight:400; font-display:swap; src:url(/fonts/roboto-slab-400.woff2) format('woff2'); }
  @font-face { font-family:'Roboto Slab'; font-weight:700; font-display:swap; src:url(/fonts/roboto-slab-700.woff2) format('woff2'); }
  @font-face { font-family:'Archivo Narrow'; font-weight:400; font-display:swap; src:url(/fonts/archivo-narrow-400.woff2) format('woff2'); }
  @font-face { font-family:'Archivo Narrow'; font-weight:700; font-display:swap; src:url(/fonts/archivo-narrow-700.woff2) format('woff2'); }
  @font-face { font-family:'IBM Plex Sans Condensed'; font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-sans-condensed-400.woff2) format('woff2'); }
  @font-face { font-family:'IBM Plex Sans Condensed'; font-weight:600; font-display:swap; src:url(/fonts/ibm-plex-sans-condensed-600.woff2) format('woff2'); }
  :root {
    --font:'Chakra Petch';
    --bg:#0b0e16; --panel:#121726; --panel2:#1a2133; --line:#242c42; --ink:#eef2ff; --mut:#8b96b4;
    --gold:#d6a73f; --good:#3fae73; --cop:#d07070; --accent:#4f86bf; --mode:#4f86bf; --dmg:#ef4444;
    --r:6px; --safe-b: env(safe-area-inset-bottom, 0px);
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  button, input, select, textarea { font-family:inherit; }
  * { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 26%, transparent) transparent; }
  *::-webkit-scrollbar { width:7px; height:7px; }
  *::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--ink) 22%, transparent); border-radius:6px; }
  /* Base font scales with DEVICE size on BOTH axes (was fixed above 600px). Everything sized in rem/em rides this. */
  html { font-size:clamp(11px, calc(0.5em + 0.5vh + 0.28vw), 16px); }
  html,body { margin:0; height:100%; overflow:hidden; color:var(--ink); overscroll-behavior:none;
    font-family:var(--font),'Chakra Petch',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
  body { background:linear-gradient(to top, var(--bg1,#000220), var(--bg2,#142648)) fixed; }
  #app { display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:560px; margin:0 auto; padding:0.4rem; gap:0.4rem; overflow:hidden; }
  .sect { border-radius:11px; border:1px solid rgba(255,255,255,.05); }
  header.sect { flex:none; display:flex; align-items:center; gap:0.62rem; padding:0.45rem 0.7rem; background:rgba(255,255,255,.035); }
  header .spacer { flex:1; }
  .brandbtn { display:flex; align-items:center; gap:5px; border:0; background:transparent; padding:2px; cursor:pointer; }
  .brand { font-family:var(--font),sans-serif; font-size:1.25rem; font-weight:900; letter-spacing:2px; line-height:1.2;
    background:linear-gradient(90deg,var(--accent),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .balwrap { display:flex; align-items:center; gap:6px; }
  .bal { font-size:0.95rem; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer; }
  .bal:active { filter:brightness(1.25); }
  .bal.spin { animation:balspin .6s linear; }
  .balicon { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--mut); font-size:1.2rem; width:1.35rem; height:1.35rem; cursor:pointer; }
  .balicon:active { color:var(--ink); }
  .balicon.spin { animation:balspin .6s linear; }
  @keyframes balspin { to { transform:rotate(360deg); } }

  .gamewrap { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; gap:0.32rem; padding:0.26rem;
    background:color-mix(in srgb, var(--mode) 12%, rgba(255,255,255,.015)); }
  .cornerbtn { position:absolute; z-index:4; top:8px; right:8px; width:1.7rem; height:1.7rem; border-radius:50%; border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.34); color:var(--ink); font-size:0.85rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
  .cornerbtn:active { background:rgba(0,0,0,.6); }
  #gear.cornerbtn { top:8px; right:8px; } .cornerbtn.help { top:auto; bottom:8px; right:8px; } .cornerbtn.hist { top:auto; bottom:8px; left:8px; right:auto; }
  .boardcol { align-self:center; display:flex; flex-direction:column; gap:5px; max-width:100%; }
  /* level (left) + live multiplier (right), ABOVE the board, aligned to the board's edges */
  .ovbar { display:flex; align-items:baseline; justify-content:space-between; padding:0 3px; }
  .ov-lvl { font-size:1.0rem; font-weight:800; color:var(--mut); white-space:nowrap; } .ov-lvl b { color:var(--gold); }
  .ov-mult { font-size:1.0rem; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:.3px; }
  .ov-mult.dead { color:var(--dmg); } .ov-mult.win { color:var(--gold); }
  .ov-mult.mpop { animation:mpop .35s ease-out; }   /* renamed from .pop — .pop is a full-screen overlay class; the collision blanked the whole page every level */
  .multgrp { display:flex; align-items:center; gap:5px; }
  .ov-arrow { font-size:0.85rem; font-weight:900; opacity:0; line-height:1; }
  .ov-arrow.up { color:var(--good); } .ov-arrow.down { color:var(--dmg); }
  .ov-arrow.show { animation:arrowpop .7s ease-out; }
  @keyframes arrowpop { 0%{opacity:0;transform:translateY(5px) scale(.6)} 25%{opacity:1;transform:translateY(0) scale(1.2)} 100%{opacity:0;transform:translateY(-9px) scale(1)} }
  #boardwrap { position:relative; overflow:hidden; border-radius:10px; background:#080b12; width:100%; }
  #board { display:block; width:100%; height:100%; }
  @keyframes mpop { 0%{transform:scale(1)} 45%{transform:scale(1.28)} 100%{transform:scale(1)} }
  #vignette { position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0; border-radius:10px; }
  #vignette.dmg { background:radial-gradient(ellipse at center,transparent 76%,rgba(239,68,68,0.20) 116%); animation:vfade .3s ease-out; }
  #vignette.heal { background:radial-gradient(ellipse at center,#22c55e55 0%,transparent 60%); animation:vfade .55s ease-out; }
  #vignette.big { background:radial-gradient(ellipse at center,#ffcf3a66 0%,transparent 72%); animation:vfade .8s ease-out; }
  #vignette.crash { background:radial-gradient(ellipse at center,transparent 15%,#7f1d1d 120%); animation:vfade .6s ease-out; }
  @keyframes vfade { 0%{opacity:1} 100%{opacity:0} }
  #boardwrap.danger::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:4; box-shadow:inset 0 0 55px 8px #ef444466; animation:danger 1s infinite; border-radius:10px; }
  @keyframes danger { 0%,100%{opacity:.3} 50%{opacity:.85} }
  #banner { position:absolute; left:0; right:0; top:38%; text-align:center; font-weight:900; font-size:1.7rem; letter-spacing:2px;
    pointer-events:none; z-index:8; opacity:0; text-shadow:0 3px 14px #000; }
  #banner.show { animation:banner 1.2s ease-out forwards; }
  @keyframes banner { 0%{opacity:0;transform:scale(.6)} 18%{opacity:1;transform:scale(1.12)} 72%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }
  .badge { position:absolute; pointer-events:none; z-index:7; font-weight:900; font-size:0.95rem; text-shadow:0 2px 6px #000; white-space:nowrap; animation:badge 1s ease-out forwards; }
  @keyframes badge { 0%{opacity:0;transform:translate(-50%,4px) scale(.7)} 20%{opacity:1;transform:translate(-50%,-4px) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-34px) scale(1)} }
  /* below the board: history btn · centered HP bar · help btn */
  #hpwrap { display:none; }   /* ESC/HP bar under the map REMOVED — redundant with the HP bar drawn over Klepto's head; reclaims vertical space */
  #heart { font-size:1.05rem; filter:drop-shadow(0 1px 2px #000); }
  #hpwrap.low #heart { animation:beat .55s infinite; }
  @keyframes beat { 0%,100%{transform:scale(1)} 30%{transform:scale(1.3)} }
  #hptrack { flex:1; height:15px; border-radius:8px; background:#000a; border:1px solid var(--line); overflow:hidden; position:relative; }
  #hpghost { position:absolute; top:0; bottom:0; background:#ffffffaa; width:0; }
  #hpbar { position:absolute; top:0; bottom:0; left:0; width:100%; background:linear-gradient(90deg,#16a34a,#22c55e); transition:width .18s; }
  #hptxt { min-width:32px; text-align:right; font-size:0.85rem; font-weight:900; color:#fff; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums; }
  .status { display:none; }   /* status prompts live in the betting card / toasts — no clutter line under the map */

  .betwrap { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0.32rem 0.5rem 0.2rem; background:rgba(255,255,255,.05); }
  .bettabs { display:flex; gap:2px; margin-bottom:8px; border-bottom:1px solid var(--line); flex:none; }
  .bettabs button { position:relative; flex:1; height:2.5rem; border:0; background:transparent; color:var(--mut); font-weight:700; font-size:0.82rem;
    cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; justify-content:center; gap:4px; }
  .bettabs button.on { color:#fff; border-bottom-color:var(--accent); }
  .bettabs button.cash { color:var(--gold); } .bettabs button.cash.on { border-bottom-color:var(--gold); }
  .bettabs .badge2 { position:static; animation:none; display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:var(--accent); color:#fff; font-size:0.62rem; }
  .betbody { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 4px 4px 0; }
  .mkt-info { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:11px 12px; }
  .mkt-info .big { font-size:1.05rem; font-weight:800; color:var(--gold); }
  .mkt-info p { margin:6px 0 0; font-size:0.76rem; color:#cfd6ea; line-height:1.45; }
  .featbtn { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:clamp(30px,4.2vh,42px); width:100%; margin-top:7px;
    border:2px solid transparent; border-radius:8px; padding:clamp(4px,0.9vh,8px) 0.7rem; cursor:pointer; color:#fff; text-align:left; }
  .featbtn:first-child { margin-top:0; }
  .featbtn:active { filter:brightness(1.1); }
  .featbtn .f-lbl { font-weight:700; font-size:0.82rem; line-height:1.2; }
  .featbtn .f-lbl small { display:block; color:var(--mut); font-weight:600; font-size:0.66rem; }
  .featbtn .f-od { font-weight:800; font-size:0.92rem; font-variant-numeric:tabular-nums; }
  .featbtn.run { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 26%,#161c2b),#141b29); border-color:color-mix(in srgb,var(--accent) 40%,#2c3550); }
  .featbtn.run .f-od { color:#ffe07a; }
  .featbtn.survive { background:linear-gradient(180deg,color-mix(in srgb,#06b6d4 24%,#141c26),#111820); border-color:color-mix(in srgb,#06b6d4 38%,#2c3550); }
  .featbtn.survive .f-od { color:#7ce7f5; }
  .featbtn.placed { background:var(--panel2); border-color:#06b6d4; color:#8ceaf7; cursor:default; }
  .featbtn:disabled { opacity:.5; cursor:default; }
  .featbtn.placed:disabled { opacity:1; }
  .boosttag { display:inline-block; font-size:0.56rem; font-weight:800; letter-spacing:.4px; color:#20160a;
    background:linear-gradient(90deg,#ffcf3a,#f59e0b); padding:1px 5px; border-radius:4px; vertical-align:middle; margin-left:2px; }
  .featbtn.boosted { background:linear-gradient(180deg,color-mix(in srgb,#ffcf3a 17%,#161206),#141b29); border-color:color-mix(in srgb,#ffcf3a 42%,#2c3550); }
  .featbtn.boosted .f-od { color:#ffcf3a; }
  .featbtn.mkt { background:linear-gradient(180deg,color-mix(in srgb,#7c6cff 17%,#161c2b),#141b29); border-color:color-mix(in srgb,#7c6cff 34%,#2c3550); color:#fff; }
  .featbtn.mkt .f-od { color:#c3b8ff; }
  .featbtn.mkt.placed { background:var(--panel2); border-color:#7c6cff; color:#c8bfff; }
  .slip { margin-top:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:8px 10px; }
  .slip .sliphd { font-size:0.64rem; color:var(--mut); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }
  .sliprow { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:0.75rem; padding:4px 0; border-top:1px solid #1b2334; }
  .sliprow:first-of-type { border-top:0; }
  .sliprow .sl-l { color:#cfd6ea; } .sliprow .sl-l b { color:var(--mut); font-weight:700; }
  .sliprow .win { color:var(--good); font-weight:800; } .sliprow .lose { color:var(--cop); } .sliprow .mut { color:var(--mut); }
  .cashbtn { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:clamp(30px,4.2vh,42px); width:100%; margin-top:7px;
    border:0; border-radius:8px; padding:clamp(4px,0.9vh,8px) 0.7rem; cursor:pointer; background:linear-gradient(180deg,#22c55e,#13a152); color:#062013; font-weight:800; text-align:left; }
  .cashbtn:active { filter:brightness(1.08); }
  .cashbtn .cm { font-size:0.8rem; font-weight:800; } .cashbtn .cv { font-size:0.92rem; font-variant-numeric:tabular-nums; }
  .ridecard { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-align:center; }
  .ridecard .rl { font-size:0.68rem; color:var(--mut); text-transform:uppercase; letter-spacing:.6px; }
  .ridecard .rm { font-size:1.6rem; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums; }
  .hint { font-size:0.74rem; color:var(--mut); text-align:center; padding:16px 8px; border:1px dashed var(--line); border-radius:7px; }
  .outcard { text-align:center; padding:8px 6px; } .outcard .ot { font-size:1.15rem; font-weight:900; } .outcard.win .ot{color:var(--good);} .outcard.lose .ot{color:var(--cop);}
  .outcard .os { font-size:0.8rem; color:#cfd6ea; margin-top:6px; }

  .botbar { flex:none; padding:0.5rem 0.7rem calc(0.5rem + var(--safe-b)); background:rgba(255,255,255,.07); }
  .stakerow { display:flex; align-items:center; gap:5px; }
  .stval { flex:none; color:var(--gold); font-size:0.8rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:62px; }
  .round { width:2.2rem; height:2.2rem; border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:#fff; font-size:1.05rem; cursor:pointer; flex:none; padding:0; }
  .round:active { filter:brightness(1.2); } #stdots { font-size:1.2rem; }
  input[type=range] { flex:1 1 auto; min-width:34px; margin:0; accent-color:var(--mode); }
  .playout { display:none; align-items:center; gap:7px; font-size:0.7rem; color:var(--mut); margin:8px 2px 0; cursor:pointer; user-select:none; }  /* hidden for now */
  .playout input { width:15px; height:15px; accent-color:var(--accent); }
  .cta { width:100%; margin-top:8px; min-height:clamp(36px,5.0vh,48px); padding:clamp(7px,1.3vh,11px) clamp(6px,1.2vw,10px); border:0; border-radius:7px; font-size:clamp(0.84rem,2.0vh,0.98rem); font-weight:800; cursor:pointer; letter-spacing:.3px;
    background:linear-gradient(90deg,var(--accent),#8a6cff); color:#fff; }
  .cta.go { background:linear-gradient(90deg,var(--good),#13b06a); }
  .betbody > .cashall.cta { margin:2px 0 8px; }   /* Cash Out All pinned as the first row of the cash-out list */
  .cta:disabled { opacity:.5; cursor:default; }
  .cta .ctamain { display:block; }
  .cta .ctaac { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:3px; font-size:.6rem; font-weight:800; letter-spacing:.3px; color:#ffe6c2; }
  .cta .ctaac .acbar { flex:1; }
  #cashallbtn { padding-inline:clamp(12px,2.6vw,17px);   /* Cashout All: a bit more left/right breathing room than the default .cta */
    /* darker than .cta.go but KEEP the 3D feel: a VERTICAL top-lit gradient (lighter top edge → darker
       bottom = raised/convex button) + a hairline top highlight & soft bottom shade. A flat-luminance
       darken read dead-flat. Armed-orange state still wins via its !important. */
    background:linear-gradient(180deg,#2f9760,#0b5a37);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 5px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28); }

  /* popups + modal */
  .pop { position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column; }
  .pop.hidden { display:none; }
  .pophead { flex:none; display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); }
  .pophead h3 { margin:0; font-size:0.95rem; }
  .pophead .x { width:32px; height:32px; border:1px solid var(--line); background:var(--panel2); color:#fff; border-radius:6px; font-size:1rem; cursor:pointer; }
  .popbody { flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px; max-width:560px; margin:0 auto; width:100%; }
  .popbody h4 { font-size:0.7rem; color:var(--mut); text-transform:uppercase; letter-spacing:.6px; margin:14px 0 7px; }
  .popbody h4:first-child { margin-top:2px; }
  .popbody .hp { font-size:0.82rem; line-height:1.55; color:#cfd6ea; margin:0 0 6px; }
  .histgame { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-bottom:9px; }
  .histgame .gh { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .histgame .gh .res { font-weight:800; font-size:0.86rem; } .histgame .gh .res.escaped{color:var(--accent);} .histgame .gh .res.caught{color:var(--cop);}
  .histgame .gh .when { font-size:0.66rem; color:var(--mut); white-space:nowrap; }
  .histgame .gsub { font-size:0.68rem; color:var(--mut); margin-top:3px; font-variant-numeric:tabular-nums; }
  .histgame .gid { font-family:ui-monospace,monospace; font-size:0.6rem; color:var(--mut); word-break:break-all; margin-top:3px; }
  .histempty { text-align:center; color:var(--mut); padding:34px 10px; font-size:0.86rem; }
  .auditlink { display:block; text-align:center; color:var(--accent); text-decoration:none; font-weight:700; font-size:0.82rem; padding:10px; margin-top:4px; }
  .modal { position:fixed; inset:0; background:rgba(4,6,12,.66); backdrop-filter:blur(3px); z-index:50; display:grid; place-items:end center; }
  .modal.hidden { display:none; }
  .sheet { width:100%; max-width:560px; max-height:94vh; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--panel); border:1px solid var(--line); border-radius:10px 10px 0 0; padding:14px 14px calc(18px + var(--safe-b)); }
  /* auto cash-out panel */
  .acpanel { margin-top:8px; }
  .acpanel.hidden { display:none; }
  .acnote { font-size:.62rem; color:var(--mut); line-height:1.35; margin-bottom:7px; }
  .acmk-h { font-size:.58rem; text-transform:uppercase; letter-spacing:.7px; color:var(--mut); margin:10px 0 3px; }
  .acmklist { max-height:32vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:3px; }
  .acrow2 { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
  .acrow2 .acname { font-size:.74rem; font-weight:700; color:#dfe6f2; }
  .acctl { display:flex; align-items:center; gap:4px; }
  .acctl input[type=number] { flex:1; min-width:40px; text-align:center; background:var(--panel2); border:1px solid var(--line); color:#fff; border-radius:5px; padding:6px 4px; font-size:.82rem; font-family:inherit; font-variant-numeric:tabular-nums; }
  .acstep, .acclr { flex:none; width:30px; height:32px; padding:0; border:1px solid var(--line); background:var(--panel2); color:#fff; border-radius:5px; font-size:1rem; font-weight:800; line-height:1; cursor:pointer; }
  .acstep:active, .acclr:active { filter:brightness(1.35); }
  .acclr { color:#ff9a9a; font-size:.9rem; }
  .acrow2 input[type=range].acsl { width:100%; margin:0; accent-color:#ff9d2f; }
  /* per-market % row: slider + live % label inline */
  .acpctrow .acctl { gap:8px; }
  .acpctrow .acctl input[type=range].acsl { flex:1; width:auto; }
  .acpctv { flex:none; min-width:42px; text-align:right; font-size:.8rem; font-weight:800; color:#ffcf7a; font-variant-numeric:tabular-nums; }
  /* the DISTINCT auto-cashout fill bar — striped orange→pink, deliberately unlike the smooth blue/green progress bars */
  .acbar { display:inline-block; width:50px; height:9px; vertical-align:middle; border-radius:3px; overflow:hidden;
    background:repeating-linear-gradient(45deg,rgba(255,157,47,.16),rgba(255,157,47,.16) 4px,rgba(255,157,47,.05) 4px,rgba(255,157,47,.05) 8px);
    border:1px solid rgba(255,157,47,.55); box-sizing:border-box; }
  .acbar .acfill { display:block; height:100%; background:linear-gradient(90deg,#ff9d2f,#ff4d6d); }
  .acbar.big { display:block; width:100%; height:9px;
    background:repeating-linear-gradient(45deg,rgba(255,157,47,.16),rgba(255,157,47,.16) 4px,rgba(255,157,47,.05) 4px,rgba(255,157,47,.05) 8px), linear-gradient(rgba(20,90,60,.5),rgba(20,90,60,.5)), var(--bg); }   /* run CTA (Cashout All): the per-market bars are transparent over the DARK-GREEN .cashrow (linear-gradient rgba(20,90,60,.5) over the dark body). Replicate that exact backdrop opaquely (else the bright-green CTA gradient shows through and looks different). */
  .acbar.full { border-color:#ffd75e; box-shadow:0 0 6px rgba(255,215,94,.75); }
  .acbar.full .acfill { background:linear-gradient(90deg,#ffd75e,#ffb02f); }
  .actag { color:#ffb057; font-weight:700; white-space:nowrap; }
  /* Auto cash-out section on the STAKE screen (#stakepop is text-centred; this block is left-aligned) */
  .acsec { text-align:left; margin:2px 0 16px; padding-top:13px; border-top:1px solid var(--line); }
  .acsec-h { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:800; }
  .acsec-tog .opts { margin-top:0; }
  .sheet h3 { margin:2px 0 4px; font-size:0.95rem; }
  .sheet .grp { margin-top:13px; } .sheet .grp > span { font-size:0.66rem; color:var(--mut); text-transform:uppercase; letter-spacing:.7px; }
  .sheet .grp b { color:var(--accent); }
  .opts { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .opts button { border:1px solid var(--line); background:var(--panel2); color:#fff; border-radius:5px; padding:7px 11px; font-weight:700; font-size:0.78rem; cursor:pointer; }
  .opts button.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
  .sheet input[type=range] { width:100%; accent-color:var(--accent); margin-top:8px; }
  .sheet .close { width:100%; margin-top:15px; padding:11px; border:0; border-radius:6px; background:var(--panel2); color:#fff; font-weight:800; cursor:pointer; }
  .stakein { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--panel2); }
  .stakein span { color:var(--mut); font-weight:700; } .stakein input { flex:1; min-width:0; background:transparent; border:0; color:#fff; font-size:1.4rem; font-weight:800; outline:none; }
  .stakehint { color:var(--mut); font-size:0.72rem; margin:8px 2px 14px; }
  .stakepbtns { display:flex; gap:8px; } .stakepbtns .round.wide { width:auto; flex:1; height:42px; font-size:0.85rem; } .stakepbtns .cta { flex:2; margin:0; }
  .toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:80; max-width:80%; background:var(--cop); color:#fff; font-weight:700;
    font-size:0.8rem; padding:9px 16px; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.5); text-align:center; transition:opacity .25s; }
  .toast.hidden { display:none; }

/* ══════ NEW betting UI (v90): market toggles, cash-out rows, settle badges, credits roll ══════ */
.ov-steps{ margin-left:.55rem; color:#8fa3c7; font-weight:800; font-size:.9em; }
#badges{ position:absolute; top:.12rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:.2rem; align-items:center; z-index:8; pointer-events:none; width:92%; }
.setbadge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:800; padding:.13rem .5rem; max-width:90%; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.4); letter-spacing:.01em; opacity:.94; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:opacity .3s, transform .3s; white-space:nowrap; }
.setbadge b{ font-weight:900; overflow:hidden; text-overflow:ellipsis; }
.setbadge .amt{ font-weight:900; font-variant-numeric:tabular-nums; }
.setbadge .bagfx{ position:relative; display:inline-block; line-height:1; }
.setbadge .bagfx .cn{ position:absolute; left:50%; top:-12px; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe98a,#d99a1e); transform:translateX(-50%); opacity:0; animation:coindrop .55s ease-in forwards; }
.setbadge .bagfx .cn.c2{ animation-delay:.12s; left:38%; }
.setbadge .bagfx .cn.c3{ animation-delay:.24s; left:62%; }
@keyframes coindrop{ 0%{opacity:0;top:-14px;transform:translateX(-50%) scale(.6)} 25%{opacity:1} 100%{opacity:0;top:3px;transform:translateX(-50%) scale(.85)} }
.setbadge.win{ background:linear-gradient(90deg,rgba(17,107,52,.8),rgba(24,165,75,.8)); color:#eafff0; }
.setbadge.cash{ background:linear-gradient(90deg,rgba(15,90,134,.8),rgba(43,134,200,.8)); color:#eaf6ff; }
.setbadge.lose{ background:rgba(90,32,32,.78); color:#ffd9d9; }
.setbadge.fade{ opacity:0; transform:translateY(-8px); }
#credits{ position:absolute; inset:0; display:none; flex-direction:column; justify-content:center; align-items:center; gap:.2rem; background:rgba(6,10,20,.72); z-index:7; padding:1rem; }
#credits.show{ display:flex; animation:credin .4s ease; }
@keyframes credin{ from{opacity:0} to{opacity:1} }
.credhd{ font-weight:900; letter-spacing:.08em; color:#ffd75e; margin-bottom:.4rem; font-size:1rem; }
.credrow{ display:flex; justify-content:space-between; gap:1.4rem; width:min(88%,340px); font-weight:800; font-size:.92rem; padding:.16rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); }
.credrow.cw span:last-child{ color:#33d17a; } .credrow.cl span:last-child{ color:#ff7676; }
.credrow.cl{ opacity:.72; }
.mkgroup{ font-size:.66rem; font-weight:800; letter-spacing:.12em; color:#7889a8; margin:.5rem .1rem .25rem; text-transform:uppercase; }
.mkbtn{ display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; gap:.5rem;
  background:linear-gradient(180deg,rgba(40,54,84,.5),rgba(28,38,60,.5)); border:1.5px solid rgba(120,150,210,.16); color:var(--edge,#cfe0f5);
  border-radius:.6rem; padding:.5rem .7rem; margin-bottom:.34rem; cursor:pointer; font-family:inherit; transition:border-color .12s, background .12s, transform .06s; }
.mkbtn:active{ transform:scale(.99); }
.mkbtn.on{ border-color:var(--accent,#4f86bf); background:linear-gradient(180deg,rgba(52,92,150,.55),rgba(36,60,98,.55)); box-shadow:0 0 0 1px var(--accent,#4f86bf) inset; }
.mkbtn.riding{ opacity:.85; cursor:default; border-style:dashed; }
.mk-l{ display:flex; flex-direction:column; font-weight:800; font-size:.92rem; line-height:1.12; }
.mk-l small{ font-weight:600; font-size:.68rem; color:#8395b5; margin-top:.12rem; }
.mk-o{ font-weight:900; font-size:1rem; color:#ffe08a; white-space:nowrap; }
/* JACKPOT (Heistmaster) — bright gold gradient chip in place of odds */
.jkpt{ font-weight:900; letter-spacing:.04em; font-size:.9rem; white-space:nowrap;
  background:linear-gradient(180deg,#ffe487 8%,#ffb03a 58%,#ff8f2e); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* MEGA JACKPOT (Kleptomaniac) — shinier: magenta+gold stamped MEGA over a shimmering gold JACKPOT, stacked */
.jkpt.mega{ display:inline-flex; flex-direction:column; align-items:center; gap:0; line-height:.9; text-align:center;
  background:none; -webkit-text-fill-color:currentColor; filter:drop-shadow(0 0 5px rgba(255,170,60,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.jkpt.mega .mt{ font-size:.66rem; font-weight:900; letter-spacing:.11em; transform:scaleX(1.08);
  background:linear-gradient(180deg,#fff1a6,#ff5c8a 55%,#d81e6a); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:.6px #ffe08a; }
.jkpt.mega .mb{ font-size:.98rem; font-weight:900; letter-spacing:.01em; margin-top:-1px;
  background:linear-gradient(100deg,#ffcf5a 0%,#fff7e0 44%,#ffcf5a 52%,#ffb43a 60%,#ff9d2e 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:megashine 2.4s linear infinite; }
@keyframes megashine{ 0%{ background-position:220% 0; } 100%{ background-position:-60% 0; } }
@media (prefers-reduced-motion:reduce){ .jkpt.mega .mb{ animation:none; background-position:44% 0; } }
.bettot{ margin-top:.5rem; padding:.5rem .6rem; text-align:center; font-size:.82rem; color:#b9c8e2; background:rgba(30,42,66,.5); border-radius:.55rem; }
.bettot b{ color:#fff; font-weight:900; }
.cashrow{ display:flex; justify-content:space-between; align-items:center; width:100%; gap:.5rem; text-align:left; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,rgba(20,90,60,.5),rgba(14,64,44,.5)); border:1.5px solid rgba(60,200,130,.3); color:#dfffec; border-radius:.6rem; padding:.55rem .7rem; margin-bottom:.34rem; transition:transform .06s; }
.cashrow:active{ transform:scale(.99); }
.cashrow .mk-l{ color:#eafff2; }
.cashrow .cv{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; white-space:nowrap; }
.cashrow .cvamt{ font-weight:900; color:#7dffb0; font-size:.95rem; }
.cashrow .accol{ display:flex; align-items:center; gap:5px; font-size:.6rem; font-weight:700; color:#ffb057; }   /* AC target + distinct bar, BELOW the cash-out amount */
.outcard .creditlist{ margin-top:.5rem; display:flex; flex-direction:column; gap:.12rem; }
.crow{ display:flex; justify-content:space-between; gap:1rem; font-weight:700; font-size:.85rem; padding:.16rem .3rem; border-bottom:1px solid rgba(255,255,255,.05); }
.crow.cwin span:last-child{ color:#33d17a; font-weight:900; } .crow.clost{ opacity:.7; } .crow.clost span:last-child{ color:#ff8080; }
/* two-step cash-out confirm */
.cta.arm{ background:linear-gradient(180deg,#f0a020,#d97a12)!important; animation:armpulse .8s ease-in-out infinite; }
.cashrow.armed{ outline:2px solid #f0a020; outline-offset:-2px; }
.cashrow.armed .cvamt{ color:#ffcf3a; font-weight:800; }
@keyframes armpulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.25); } }

/* ══════ LANDSCAPE (handheld, short viewport) — game LEFT, betting RIGHT ══════
   Portrait keeps the top/bottom stack (#app is a centred flex column, max-width 560).
   In landscape on a short screen (phones held sideways) we reflow #app to a CSS GRID —
   NO DOM change, grid-areas place the existing children: header spans the top, the game
   (board) fills a tall left column, the bet tabs/body scroll in the right column with the
   bet controls (botbar) pinned beneath them. Board sizing follows in loot.js sizeBoard()
   (targetH becomes the left column's leftover height, not boardVh×innerHeight). */
@media (orientation: landscape) and (max-height: 600px) {
  #app {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(272px, 38%);
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas:
      "hdr  hdr"
      "game bets"
      "game bar";
    column-gap: 0.4rem;
    row-gap: 0.32rem;
    padding: 0.3rem;
  }
  header.sect { grid-area: hdr; }
  .gamewrap   { grid-area: game; min-height: 0; overflow: hidden; justify-content: center; }
  .betwrap    { grid-area: bets; min-height: 0; }
  .botbar     { grid-area: bar; }
  /* the board column must not force its own min-width and blow out the grid track */
  .boardcol   { min-width: 0; }
}