:root{
    /* Orbitron: hero/impact moments (countdown, FIGHT, win/lose titles, brand).
       Rajdhani: everything else — labels, buttons, stats, tables. Both are
       built for exactly this kind of condensed, letter-spaced gaming HUD
       text, unlike the plain system-font stack this replaces. */
    --font-display:'Orbitron',ui-sans-serif,sans-serif;
    --font-ui:'Rajdhani',Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --bg:#05070d;
    --bg-deep:#04060b;
    --panel:#0b1522;
    --panel2:#101d30;
    --line:rgba(140,180,255,.14);
    --line-soft:rgba(255,255,255,.07);
    --text:#eef4fc;
    --muted:#8291b2;
    --muted2:#5b6a87;
    --brand-deep:#0b3fae;
    --brand:#2f8cff;
    --brand-light:#6fd0ff;
    --brand-glow:#a9e6ff;
    --rock:#ffab4d;
    --paper:#eef3fb;
    --scissors:#ff5d87;
    --danger:#ff3d5f;
    --gold:#ffcf5c;
    /* Subtle top-lit "glass panel" gradient + hairline inner highlight,
       used everywhere a flat var(--panel) fill used to sit alone. */
    --panel-fill:linear-gradient(180deg,#101d30 0%,#0d1728 55%,#0a1220 100%);
    --panel-edge:inset 0 1px 0 rgba(140,180,255,.08),inset 0 -1px 0 rgba(0,0,0,.3);
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui)}
  /* Belt-and-braces double-tap-zoom prevention: the viewport meta's
     user-scalable=no covers most browsers, touch-action:manipulation
     catches the rest (notably some in-app / WebView contexts). */
  html{touch-action:manipulation}
  button,a,input,.pick,.risk-tick,.chip,.bet-btn{touch-action:manipulation}
  body{
    position:relative;overflow-x:hidden;
    background:
      radial-gradient(circle at 50% -10%,rgba(47,140,255,.18),transparent 38%),
      radial-gradient(circle at 100% 8%,rgba(111,208,255,.08),transparent 40%),
      linear-gradient(180deg,#070b14 0%,#04060b 100%);
  }
  body::before{
    content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
    background:
      radial-gradient(38% 30% at 18% 20%,rgba(47,140,255,.10),transparent 60%),
      radial-gradient(30% 26% at 85% 78%,rgba(111,208,255,.08),transparent 60%);
    animation:driftGlow 22s ease-in-out infinite alternate;
  }
  /* A film-grain layer used to sit here for texture, but mix-blend-mode on
     a full-viewport layer forces the browser to recomposite that blend on
     every single frame the canvas underneath repaints — over an already-
     demanding 300-fighter simulation that was a real, measurable slowdown,
     not just a theoretical one. Cut entirely; raw performance wins here. */
  @keyframes driftGlow{
    0%{transform:translate3d(0,0,0) scale(1)}
    100%{transform:translate3d(2%,3%,0) scale(1.06)}
  }
  button,input{font:inherit}
  .app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
  .topbar{
    height:72px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--line);background:rgba(5,7,13,.82);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20
  }
  .brand{display:flex;align-items:center;gap:11px}
  .brand-mark{width:38px;height:38px;display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(47,140,255,.55))}
  .brand-mark svg{width:100%;height:100%;display:block}
  .brand strong{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:.03em;font-size:17px;background:linear-gradient(120deg,var(--text) 30%,var(--brand-light) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand strong b{background:linear-gradient(120deg,var(--brand-light),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.18em;margin-top:2px}
  .topstats{display:flex;align-items:center;gap:8px}
  .topstat{
    min-width:92px;height:44px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:#ffffff05
  }
  .topstat span{display:block;color:var(--muted);font-size:8px;letter-spacing:.14em}
  .topstat strong{display:block;margin-top:3px;font-size:12px;transition:transform .25s ease}
  .topstat strong.pulse{animation:statPulse .5s ease}
  .faction strong.pulse{display:inline-block;animation:statPulse .38s ease}
  @keyframes statPulse{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
  .balance{border-color:rgba(47,140,255,.32);background:rgba(47,140,255,.08)}
  .balance strong{color:var(--brand-light)}
  .sound-btn{
    width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#ffffff05;color:var(--muted);
    display:grid;place-items:center;cursor:pointer;transition:.16s;margin-left:2px
  }
  .sound-btn:hover{border-color:rgba(111,208,255,.4);color:var(--brand-light)}
  .sound-btn svg{width:18px;height:18px}
  .sound-btn.muted .icon-on{display:none}
  .sound-btn:not(.muted) .icon-off{display:none}
  .shell{width:min(1100px,100%);margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px;flex:1}
  .arena-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel-fill);box-shadow:var(--panel-edge),0 30px 90px -40px rgba(47,140,255,.35)}
  .arena-head{
    height:50px;padding:0 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:#0a1220
  }
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-light);box-shadow:0 0 12px var(--brand-light);animation:livePulse 1.4s ease-in-out infinite}
  @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
  .arena-head strong{font-size:10px;letter-spacing:.14em}
  .arena-head .meta{margin-left:auto;display:flex;gap:8px;align-items:center}
  .tag{font-size:8px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 8px;transition:.16s}
  .tag.active{color:var(--brand-light);border-color:rgba(111,208,255,.32);background:rgba(47,140,255,.08)}
  .tag.sudden{color:#ff90a3;border-color:rgba(255,61,95,.4);background:rgba(255,61,95,.1);animation:pulseTag .55s ease-in-out infinite alternate}
  @keyframes pulseTag{from{box-shadow:0 0 0 rgba(255,61,95,.0)}to{box-shadow:0 0 14px rgba(255,61,95,.55)}}
  .arena-wrap{position:relative;min-height:620px;background:
      linear-gradient(rgba(111,168,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(111,168,255,.045) 1px,transparent 1px),
      radial-gradient(circle at 50% 45%,rgba(47,140,255,.10),transparent 34%),
      #070d18;
      background-size:38px 38px,38px 38px,auto,auto;
      transition:box-shadow .3s ease;
  }
  .arena-wrap.shake{animation:screenShake .32s cubic-bezier(.36,.07,.19,.97)}
  @keyframes screenShake{
    10%,90%{transform:translate3d(-1px,0,0)}
    20%,80%{transform:translate3d(2px,-1px,0)}
    30%,50%,70%{transform:translate3d(-4px,1px,0)}
    40%,60%{transform:translate3d(4px,-1px,0)}
  }
  canvas{display:block;width:100%;height:620px}
  .hud-top{
    position:absolute;left:16px;right:16px;top:15px;display:grid;grid-template-columns:repeat(3,1fr) 130px;gap:8px;pointer-events:none
  }
  .faction{
    /* No backdrop-filter here on purpose: this sits directly over the
       continuously-redrawing arena canvas, and blurring a live canvas
       behind it every frame is one of the most expensive things a browser
       can be asked to do — it was the single biggest cause of the
       "too slow, especially at Apocalypse" slowdown. A near-opaque solid
       fill looks almost identical without forcing that recomposite. */
    min-height:60px;border:1px solid var(--line);border-radius:12px;background:rgba(8,12,20,.94);padding:10px 12px;display:flex;align-items:center;gap:10px;transition:.2s
  }
  .faction.leading{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset,0 0 18px -4px currentColor}
  .faction i{width:10px;height:10px;border-radius:50%;display:block;box-shadow:0 0 12px currentColor}
  .faction.rock{color:var(--rock)}.faction.rock i{background:var(--rock)}
  .faction.paper{color:var(--paper)}.faction.paper i{background:var(--paper)}
  .faction.scissors{color:var(--scissors)}.faction.scissors i{background:var(--scissors)}
  .faction span{display:block;color:var(--muted);font-size:7px;letter-spacing:.12em}
  .faction strong{display:block;font-size:17px;margin-top:2px;color:var(--text)}
  .timer{
    min-height:60px;border:1px solid rgba(255,61,95,.28);border-radius:12px;background:rgba(28,8,14,.68);padding:10px 12px;text-align:right
  }
  .timer span{display:block;color:#e0a2ae;font-size:7px;letter-spacing:.12em}
  .timer strong{display:block;font-size:17px;margin-top:2px;color:#ff7c90}
  .selected-badge{
    /* Same reasoning as .faction above — this also floats over the live
       canvas, so no backdrop-filter. */
    position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
    min-width:310px;max-width:calc(100% - 30px);padding:12px 18px;border:1px solid rgba(111,208,255,.32);border-radius:14px;
    background:rgba(7,11,19,.96);text-align:center;box-shadow:0 10px 40px -10px rgba(47,140,255,.4)
  }
  .selected-badge small{display:block;color:var(--muted);font-size:7px;letter-spacing:.15em}
  .selected-badge strong{display:block;font-size:17px;margin-top:3px}
  .selected-badge em{font-style:normal;color:var(--brand-light)}
  .countdown{
    position:absolute;inset:0;display:none;place-items:center;background:rgba(5,7,13,.16);backdrop-filter:blur(2px);
    font-family:var(--font-display);font-size:96px;font-weight:900;font-style:italic;
    color:var(--text);text-shadow:0 12px 40px #000,0 0 60px rgba(47,140,255,.5)
  }
  .countdown.show{display:grid}
  .countdown span{display:inline-block;animation:countPop .3s cubic-bezier(.2,1.4,.4,1)}
  .countdown span.fight{background:linear-gradient(120deg,var(--brand-light),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  @keyframes countPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
  .finish{
    position:absolute;inset:0;display:none;place-items:center;background:rgba(4,6,11,.78);backdrop-filter:blur(7px);text-align:center;padding:20px;overflow:hidden
  }
  .finish.show{display:grid}
  .finish-card{width:min(520px,100%);border:1px solid var(--line);border-radius:22px;background:#0a1220;padding:28px 24px;box-shadow:0 30px 100px #0009;position:relative;animation:cardPop .38s cubic-bezier(.2,1.3,.3,1)}
  @keyframes cardPop{0%{transform:scale(.86) translateY(10px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
  .finish-card small{color:var(--muted);font-size:8px;letter-spacing:.17em}
  .finish-card h2{margin:8px 0 6px;font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:.01em;font-style:italic}
  .finish-card p{margin:0;color:#a9b6d6;font-size:12px}
  .finish-card .payout{margin-top:16px;font-size:24px;font-weight:950;color:var(--brand-light)}
  .finish-card .payout.win{color:var(--gold);text-shadow:0 0 26px rgba(255,207,92,.45)}
  .finish-card button{
    margin-top:18px;border:0;border-radius:11px;color:#04101f;
    font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.03em;padding:13px 18px;cursor:pointer;transition:.15s;
    background:linear-gradient(180deg,#9fe4ff 0%,var(--brand-light) 25%,var(--brand) 68%,var(--brand-deep) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(11,63,174,.5),0 6px 16px -4px rgba(0,0,0,.5)
  }
  .finish-card button:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .finish-card button:active{transform:translateY(0) scale(.97)}
  .finish-card button:disabled{opacity:.5;cursor:not-allowed}
  .victory-rays{
    position:absolute;inset:-50%;pointer-events:none;opacity:0;transition:opacity .4s;z-index:0;
    background:repeating-conic-gradient(from 0deg, rgba(255,207,92,.16) 0deg 6deg, transparent 6deg 24deg);
    animation:raysSpin 16s linear infinite;
  }
  .victory-rays.show{opacity:1}
  @keyframes raysSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .confetti-piece{position:absolute;top:-12px;border-radius:2px;opacity:.95;animation:confettiFall linear forwards}
  @keyframes confettiFall{
    0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
    100%{transform:translate3d(var(--drift),640px,0) rotate(var(--spin));opacity:0}
  }
  .panel{border:1px solid var(--line);border-radius:18px;background:var(--panel-fill);box-shadow:var(--panel-edge);padding:14px}
  .panel h3{font-size:10px;letter-spacing:.14em;margin:0 0 10px;color:#dbe4fb}

  /* Control deck: Pick / Risk / Bet, all inlined below the arena. */
  .control-deck{border:1px solid var(--line);border-radius:18px;background:var(--panel-fill);box-shadow:var(--panel-edge);padding:14px;display:flex;flex-direction:column;gap:14px}
  .deck-section{display:flex;flex-direction:column;gap:8px}
  .deck-section + .deck-section{padding-top:14px;border-top:1px solid var(--line-soft)}
  .deck-label{font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:700}

  .pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .pick{
    min-height:64px;border:1px solid var(--line);border-radius:11px;background:#0d1626;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;transition:.18s;position:relative;overflow:hidden
  }
  .pick:hover:not(:disabled){transform:translateY(-2px);border-color:#ffffff26}
  .pick:active:not(:disabled){transform:translateY(0) scale(.97)}
  .pick.active{border-color:rgba(111,208,255,.5);background:rgba(47,140,255,.09);box-shadow:0 0 0 1px rgba(111,208,255,.12) inset,0 0 22px -6px rgba(47,140,255,.6)}
  .pick:disabled{opacity:.5;cursor:not-allowed}
  .pick .glyph{width:28px;height:28px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:iconFloat 3.2s ease-in-out infinite;flex:none}
  .pick .glyph img{width:100%;height:100%;display:block}
  .pick:nth-child(2) .glyph{animation-delay:.3s}
  .pick:nth-child(3) .glyph{animation-delay:.6s}
  @keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(-2deg)}}
  .pick strong{font-size:10px;letter-spacing:.08em}

  /* Risk / density slider */
  .risk-current{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .risk-current strong{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.03em;font-style:italic;transition:color .15s}
  .risk-current span{font-size:9px;color:var(--muted);white-space:nowrap}
  .risk-slider{
    -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;cursor:pointer;outline:none;
    background:linear-gradient(90deg,#22c55e,#84cc16,#eab308,#f97316,#ef4444);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.4);margin:6px 0 2px
  }
  .risk-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-7px;
    background:radial-gradient(circle at 35% 30%,#fff,var(--brand-light) 55%,var(--brand));
    border:2px solid #fff;box-shadow:0 0 12px rgba(47,140,255,.8),0 2px 6px rgba(0,0,0,.5);cursor:pointer
  }
  .risk-slider::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff,var(--brand-light) 55%,var(--brand));
    border:2px solid #fff;box-shadow:0 0 12px rgba(47,140,255,.8);cursor:pointer
  }
  .risk-slider::-moz-range-track{background:transparent;height:8px;border-radius:999px}
  .risk-slider:disabled{opacity:.45;cursor:not-allowed}
  .risk-ticks{display:flex;justify-content:space-between}
  .risk-tick{background:none;border:0;color:var(--muted2);font-size:7px;letter-spacing:.05em;cursor:pointer;padding:4px 2px;font-weight:800;transition:.15s;flex:1;text-align:center}
  .risk-tick:first-child{text-align:left}
  .risk-tick:last-child{text-align:right}
  .risk-tick:hover:not(:disabled){color:var(--text)}
  .risk-tick.active{color:var(--text)}
  .risk-tick:disabled{cursor:not-allowed}

  /* Bet + Start, inlined into one Aviator-style bar */
  .bet-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
  .bet-chips{display:flex;gap:6px;flex:0 0 auto}
  .chip{
    width:52px;height:44px;flex:none;border:1px solid var(--line);border-radius:9px;background:#0c1524;color:var(--brand-light);
    font-size:10px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:.15s
  }
  .chip:hover:not(:disabled){border-color:rgba(111,208,255,.45);background:rgba(47,140,255,.1);transform:translateY(-1px)}
  .chip:active:not(:disabled){transform:translateY(0) scale(.93)}
  .chip:disabled{opacity:.35;cursor:not-allowed}
  .bet-stepper{display:flex;gap:6px;flex:1 1 190px;min-width:170px}
  .bet-btn,.bet-value{height:44px;border:1px solid var(--line);border-radius:9px;background:#0c1524;color:white}
  .bet-btn{cursor:pointer;font-size:19px;flex:0 0 42px;display:grid;place-items:center;transition:.15s}
  .bet-btn:hover:not(:disabled){border-color:rgba(111,208,255,.4);color:var(--brand-light)}
  .bet-btn:active:not(:disabled){transform:scale(.92)}
  .bet-btn:disabled,.bet-value:disabled{opacity:.4;cursor:not-allowed}
  .bet-value{
    font-weight:900;background:#080d17;text-align:center;flex:1 1 auto;min-width:0;padding:0 6px;
    transition:.15s;-moz-appearance:textfield
  }
  .bet-value:focus{outline:none;border-color:rgba(111,208,255,.55);box-shadow:0 0 0 3px rgba(47,140,255,.16)}
  .potential-inline{
    display:flex;flex-direction:column;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:9px;
    background:#0a1220;flex:1 1 130px;min-width:120px
  }
  .potential-inline span{font-size:7px;color:var(--muted);letter-spacing:.1em}
  .potential-inline strong{font-size:14px;margin-top:2px;color:var(--brand-light)}
  .bet-hint{font-size:7px;color:var(--muted);letter-spacing:.06em;min-height:9px}
  .bet-hint.err{color:var(--danger)}
  .start{
    flex:1 1 190px;min-width:170px;height:44px;border:0;border-radius:10px;color:#04101f;
    font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.04em;cursor:pointer;
    background:linear-gradient(180deg,#9fe4ff 0%,var(--brand-light) 25%,var(--brand) 68%,var(--brand-deep) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(11,63,174,.5),0 0 26px rgba(47,140,255,.35),0 6px 16px -4px rgba(0,0,0,.5);
    transition:.15s;position:relative;overflow:hidden
  }
  .start:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
  .start:active:not(:disabled){transform:translateY(0) scale(.98)}
  .start:disabled{opacity:.4;cursor:not-allowed}

  .info-panel .rules{font-size:9px;line-height:1.55;color:#93a1c2}
  .info-panel .rules b{color:#dbe4fb}
  .info-panel .rules + .rules-table{margin-top:12px}
  .rules-table{width:100%;border-collapse:collapse;font-size:9px;margin:12px 0}
  .rules-table th{text-align:left;color:var(--muted);font-size:8px;letter-spacing:.08em;padding:6px 8px;border-bottom:1px solid var(--line)}
  .rules-table td{padding:6px 8px;border-bottom:1px solid var(--line-soft);color:#dbe4fb}
  .rules-table tr:first-child td{padding-top:9px}
  .history-panel{width:min(1100px,100%);margin:0 auto;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel-fill);box-shadow:var(--panel-edge)}
  .history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .history-head h3{font-size:10px;letter-spacing:.14em;margin:0;color:#dbe4fb}
  .history-empty{font-size:9px;color:var(--muted);letter-spacing:.06em}
  .history-scroll{max-height:280px;overflow:auto;border-radius:12px}
  .history-table{width:100%;min-width:560px;border-collapse:collapse;font-size:10px}
  .history-table thead th{position:sticky;top:0;background:#0a1220;color:var(--muted);text-align:left;padding:8px 10px;font-size:8px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
  .history-table tbody td{padding:8px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap;color:var(--text)}
  .history-table tbody tr:hover{background:rgba(47,140,255,.05)}
  .history-cell{display:inline-flex;align-items:center;gap:6px}
  .history-cell img{width:16px;height:16px;display:block}
  .history-risk-dot{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
  .history-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.06em}
  .history-badge.win{background:rgba(255,207,92,.14);color:var(--gold)}
  .history-badge.lose{background:#ffffff0d;color:var(--muted)}
  .history-payout.win{color:var(--gold);font-weight:800}
  .footer{min-height:42px;border-top:1px solid var(--line);padding:0 18px;display:flex;align-items:center;gap:16px;color:#5c6a8a;font-size:8px;letter-spacing:.09em}
  .footer span:last-child{margin-left:auto}
  @media(max-width:520px){
    .topbar{height:62px;padding:0 11px}.topstat:not(.balance){display:none}.brand small{display:none}
    .shell{padding:7px;gap:10px}.arena-wrap{min-height:480px}canvas{height:480px}
    .hud-top{grid-template-columns:repeat(3,1fr);top:10px;left:8px;right:8px;gap:4px}.timer{grid-column:1/-1;min-height:42px;text-align:center;display:flex;justify-content:center;gap:8px;align-items:center;padding:6px}.timer span,.timer strong{display:inline;margin:0}
    .faction{min-height:48px;padding:7px 8px;gap:6px}.faction strong{font-size:14px}.faction span{font-size:6px}.faction i{width:7px;height:7px}
    .selected-badge{bottom:9px;min-width:0;width:calc(100% - 18px);padding:9px 11px}.selected-badge strong{font-size:14px}

    .control-deck{padding:11px;border-radius:14px;gap:11px}
    .deck-section + .deck-section{padding-top:11px}
    .pick-grid{gap:5px}.pick{min-height:56px;gap:6px}.pick strong{font-size:9px}.pick .glyph{width:24px;height:24px}
    .risk-current strong{font-size:13px}.risk-current span{font-size:7.5px}
    .risk-tick{font-size:6.5px}

    /* Resetting flex-basis on the bar's direct children matters here: the
       desktop values (190px/130px) are a target WIDTH in the row layout,
       but once .bet-bar switches to a column, the exact same numbers would
       be read as a target HEIGHT instead — leaving tall empty boxes. */
    .bet-bar{flex-direction:column}
    .bet-bar > *{flex:0 0 auto}
    .bet-chips{width:100%}.chip{flex:1;width:auto}
    .bet-stepper{width:100%;min-width:0}
    .potential-inline{width:100%;flex-direction:row;justify-content:space-between;align-items:center;padding:9px 12px}
    .start{width:100%;min-width:0;height:48px}

    .footer{padding:0 10px;gap:9px;overflow-x:auto;white-space:nowrap}.footer span:last-child{margin-left:0}
    .history-panel{padding:10px;border-radius:14px}
  }