:root{
    /* --- Lady Rodeo palette: soft brown, baby blue, subtle pink --- */
    --brown-950:#07172e;
    --brown-900:#0c203c;
    --brown-800:#122b4c;
    --brown-700:#1a3658;
    --brown-600:#244467;
    --brown-500:#315274;
    --brown-400:#496783;
    --cream:#ffffff;
    --cream-dim:#ccd3dc;

    --blue:#fff0a0;
    --blue-mid:#ffe263;
    --blue-deep:#f8cf32;

    --pink:#e1e5ec;        /* used sparingly */
    --pink-soft:rgba(231,171,195,.22);

    --gold:#ffdf42;        /* money / cash-out */
    --gold-deep:#e9ba14;

    --danger:#cbd3df;      /* bucked-off theme (maroon) */

    --panel:rgba(58,39,26,.72);
    --panel-2:rgba(43,28,18,.85);
    --stroke:rgba(244,231,214,.14);
    --shadow:0 18px 44px rgba(0,0,0,.45);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
    color:var(--cream);
    background:
      radial-gradient(120% 90% at 50% -10%, #25405d 0%, var(--brown-900) 42%, var(--brown-950) 100%);
    min-height:100dvh;
    display:flex;
    justify-content:center;
    overflow-x:hidden;
  }

  .app{
    width:100%;
    max-width:480px;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    padding:12px 12px calc(14px + env(safe-area-inset-bottom));
    gap:12px;
  }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    position:relative;
    z-index:6;
    margin-bottom:-36px;      /* let the big logo dip into the game image */
    pointer-events:none;
  }
  .topbar .menu-btn{ pointer-events:auto; }
  .brand{ display:flex; align-items:center; height:92px; }   /* doubled logo */
  .brand img{ height:100%; width:auto; filter:drop-shadow(0 5px 10px rgba(0,0,0,.65)); }

  .menu-btn{
    width:46px; height:46px; flex:0 0 46px;
    border-radius:50%;
    border:1px solid var(--stroke);
    background:linear-gradient(180deg,var(--brown-500),var(--brown-700));
    color:var(--cream);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:var(--shadow);
  }
  .menu-btn svg{ width:22px; height:22px; }
  .menu-btn:active{ transform:scale(.94); }
  .menu-btn .ic-close{ display:none; }
  .menu-btn.open .ic-open{ display:none; }
  .menu-btn.open .ic-close{ display:block; }
  .menu-btn.open{ background:linear-gradient(180deg,var(--blue),var(--blue-deep)); color:var(--brown-950); }

  /* vertical icon rail that drops from the menu button (labels appear on hover / tap) */
  .menu-rail{
    position:absolute; top:56px; right:0; z-index:9;
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    opacity:0; transform:translateY(-8px) scale(.96);
    pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  }
  .menu-rail.open{ opacity:1; transform:none; pointer-events:auto; }
  .rail-item{
    display:flex; flex-direction:row; align-items:center; gap:10px;
    border:none; background:transparent; padding:0; cursor:pointer;
  }
  .rail-item .rail-ic{
    width:46px; height:46px; flex:0 0 46px; border-radius:50%;
    background:linear-gradient(180deg,var(--brown-500),var(--brown-700));
    border:1px solid var(--stroke); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; color:var(--cream);
  }
  .rail-item .rail-ic svg{ width:20px; height:20px; }
  .rail-item .rail-label{
    order:-1;                       /* label sits to the LEFT of the icon */
    font-size:13px; font-weight:800; letter-spacing:.5px; color:var(--cream);
    background:var(--panel-2); border:1px solid var(--stroke);
    padding:7px 12px; border-radius:10px; white-space:nowrap;
    box-shadow:var(--shadow);
    opacity:0; transform:translateX(10px); pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .rail-item:hover .rail-label,
  .rail-item:focus-visible .rail-label,
  .rail-item.reveal .rail-label{ opacity:1; transform:none; }
  .rail-item:active .rail-ic{ transform:scale(.94); }
  /* volume row: its label is always visible (not hover-only) so the slider is usable */
  .rail-item.rail-vol .rail-label{ opacity:1; transform:none; pointer-events:auto; }
  .rail-item.rail-vol .vol-row{ display:flex; align-items:center; gap:8px; }
  .rail-item.rail-vol input[type=range]{
    width:104px; accent-color:var(--blue); cursor:pointer; vertical-align:middle;
  }
  .rail-item.rail-vol #volPct{ min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }

  /* ---------- Game stage ---------- */
  .stage{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    overflow:hidden;
    background:var(--brown-800);
    border:1px solid var(--stroke);
    box-shadow:var(--shadow);
  }
  .stage video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .18s ease;
  }
  .stage video.active{ opacity:1; }
  /* the ride-loop pair crossfades slowly so the loop seam dissolves instead of snapping */
  #vLoop, #vLoop2{ transition:opacity .55s ease; }

  /* soften the crowd: blur only the outer ring, keep the bull (centre) sharp.
     The radial mask means the blur fades in from ~42% radius out to the edges. */
  /* mask lives on the PARENT; the backdrop blur on the CHILD.
     (Putting mask + backdrop-filter on the same element disables the blur in Chromium.)
     Keep the ring + bull (centre) sharp, blur the crowd that sits beyond the ring. */
  .crowd-blur{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    -webkit-mask-image:radial-gradient(125% 86% at 50% 46%,
      rgba(0,0,0,0) 46%, rgba(0,0,0,.7) 60%, #000 74%);
            mask-image:radial-gradient(125% 86% at 50% 46%,
      rgba(0,0,0,0) 46%, rgba(0,0,0,.7) 60%, #000 74%);
  }
  .crowd-blur-fx{
    position:absolute; inset:0;
    -webkit-backdrop-filter:blur(11px) saturate(.9);
            backdrop-filter:blur(11px) saturate(.9);
  }

  /* Crowd cover-up: black out chunks of the audience (breaks the obvious AI repetition)
     and drop a few coloured bar-lights on top to add life. Centre (bull) stays untouched. */
  .crowd-fx{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .crowd-fx .dark{
    position:absolute; inset:0;
    background:
      radial-gradient(30% 24% at 10% 14%, rgba(0,0,0,.82), rgba(0,0,0,0) 72%),
      radial-gradient(28% 22% at 90% 12%, rgba(0,0,0,.80), rgba(0,0,0,0) 72%),
      radial-gradient(20% 30% at 2% 52%,  rgba(0,0,0,.68), rgba(0,0,0,0) 74%),
      radial-gradient(20% 30% at 99% 50%, rgba(0,0,0,.68), rgba(0,0,0,0) 74%),
      radial-gradient(34% 16% at 50% 4%,  rgba(0,0,0,.6),  rgba(0,0,0,0) 78%),
      radial-gradient(16% 18% at 30% 6%,  rgba(0,0,0,.55), rgba(0,0,0,0) 75%),
      radial-gradient(16% 18% at 68% 5%,  rgba(0,0,0,.55), rgba(0,0,0,0) 75%);
  }
  .crowd-fx .lights{
    position:absolute; inset:0;
    mix-blend-mode:screen; opacity:.55;
    background:
      radial-gradient(9% 7%  at 22% 9%,  rgba(124,196,255,.65), rgba(0,0,0,0) 70%),
      radial-gradient(8% 6%  at 76% 8%,  rgba(255,138,196,.6),  rgba(0,0,0,0) 70%),
      radial-gradient(7% 9%  at 5% 42%,  rgba(124,196,255,.5),  rgba(0,0,0,0) 70%),
      radial-gradient(7% 9%  at 96% 40%, rgba(255,182,120,.5),  rgba(0,0,0,0) 70%),
      radial-gradient(6% 6%  at 50% 5%,  rgba(255,138,196,.5),  rgba(0,0,0,0) 70%);
    animation:crowdPulse 3.6s ease-in-out infinite;
  }
  @keyframes crowdPulse{ 0%,100%{ opacity:.42; } 50%{ opacity:.62; } }

  /* brighten ONLY the central focal point (the lady + bull) — soft-light lifts the
     midtones there without blowing out colour, and it fades out before the crowd */
  .focal-bright{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    mix-blend-mode:soft-light; opacity:1;
    background:radial-gradient(44% 42% at 50% 45%,
      rgba(255,249,238,.95) 0%, rgba(255,249,238,.5) 34%, rgba(255,249,238,0) 66%);
  }

  /* soft top/bottom shading so the HUD reads on any frame */
  .stage::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.10) 100%);
  }
  /* vignette: keep the bull (centre) bright, darken the edges where the crowd is,
     so the repeating, in-sync audience is less noticeable each loop */
  .stage::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(125% 82% at 50% 44%,
      rgba(0,0,0,0) 42%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.4) 88%, rgba(0,0,0,.56) 100%);
  }

  .multi-wrap{
    position:absolute; z-index:5; left:0; right:0; top:6px;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    pointer-events:none;
  }
  .multi{
    font-weight:800;
    font-size:clamp(31px,9.9vw,52px);   /* 10% smaller */
    line-height:1;
    letter-spacing:1px;
    color:var(--blue);
    text-shadow:
      0 0 2px var(--brown-950),
      0 3px 0 var(--brown-800),
      0 5px 14px rgba(0,0,0,.55);
    transition:color .15s ease, transform .15s ease;
  }
  .multi .x{ font-size:.55em; opacity:.85; margin-left:.04em; }

  /* small status word under the multiplier (CASHED OUT / BUCKED OFF) */
  .multi-sub{
    margin-top:1px; font-size:11px; font-weight:800; letter-spacing:2.5px;
    text-transform:uppercase; color:var(--cream-dim);
    text-shadow:0 2px 6px rgba(0,0,0,.7);
    opacity:0; transition:opacity .15s ease;
  }
  .multi-sub.show{ opacity:1; }
  .stage.is-cashout .multi-sub{ color:var(--gold); }
  .stage.is-crash .multi-sub{ color:var(--danger); }

  /* live / crash / cashout states of the multiplier */
  .stage.is-crash .multi{
    color:var(--danger); transform:scale(.96);
    /* white trim so the maroon reads clearly against the dark stage */
    text-shadow:
      -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff,
      -1.5px  1.5px 0 #fff, 1.5px  1.5px 0 #fff,
       0 -1.5px 0 #fff, 0 1.5px 0 #fff,
      -1.5px 0 0 #fff, 1.5px 0 0 #fff,
       0 5px 14px rgba(0,0,0,.55);
  }
  .stage.is-cashout .multi{ color:var(--gold); }
  /* hide the multiplier entirely on the landing / idle screen (no faint shadow) */
  .stage.is-idle .multi,
  .stage.is-idle .multi-sub{ opacity:0; }

  /* message banner — always along the bottom of the game image, below the bull */
  .banner{
    position:absolute; z-index:4; left:0; right:0; bottom:0;
    text-align:center; padding:0 12px 12px;
    pointer-events:none;
    font-weight:800; font-size:clamp(14px,4.4vw,20px); letter-spacing:1.5px;
    color:var(--cream);
    text-shadow:0 2px 8px rgba(0,0,0,.8);
    transition:color .15s ease;
  }
  .banner.pop{ animation:bannerPop .55s ease; }
  @keyframes bannerPop{
    0%{ transform:scale(.7); opacity:.2; }
    45%{ transform:scale(1.14); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  /* ---------- Controls ---------- */
  .controls{ display:flex; flex-direction:column; gap:10px; }

  .stepper{
    display:flex; align-items:center;
    background:var(--panel);
    border:1px solid var(--stroke);
    border-radius:14px;
    height:52px;
    overflow:hidden;
  }
  .stepper button{
    width:56px; height:100%;
    border:none; background:transparent;
    color:var(--cream); font-size:26px; font-weight:700;
    cursor:pointer;
  }
  .stepper button:active{ background:rgba(255,255,255,.06); }
  .stepper .amount{
    flex:1; text-align:center;
    font-size:20px; font-weight:800; letter-spacing:.5px;
  }
  .stepper .amount small{ opacity:.6; font-size:13px; font-weight:700; }

  .row{ display:flex; align-items:center; gap:8px; }
  .chips{ display:flex; gap:6px; flex:1; }
  .chip{
    flex:1;
    height:38px;
    border-radius:10px;
    border:1px solid var(--stroke);
    background:var(--panel-2);
    color:var(--cream);
    font-weight:700; font-size:14px;
    cursor:pointer;
  }
  .chip:active{ transform:scale(.95); }
  .chip.sel{
    background:linear-gradient(180deg,var(--blue),var(--blue-deep));
    color:var(--brown-900);
    border-color:transparent;
  }

  .auto{
    display:flex; align-items:center; gap:8px;
    font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color:var(--cream-dim);
    white-space:nowrap;
  }
  .toggle{
    width:46px; height:26px; border-radius:20px;
    background:var(--brown-700);
    border:1px solid var(--stroke);
    position:relative; cursor:pointer; flex:0 0 46px;
    transition:background .2s ease;
  }
  .toggle::after{
    content:""; position:absolute; top:2px; left:2px;
    width:20px; height:20px; border-radius:50%;
    background:var(--cream);
    transition:transform .2s ease;
  }
  .toggle.on{ background:linear-gradient(90deg,var(--blue-deep),var(--pink)); }
  .toggle.on::after{ transform:translateX(20px); }

  /* Auto cash-out target slider — only visible while Auto is ON */
  .auto-target{
    display:none; flex-direction:column; gap:8px;
    background:var(--panel); border:1px solid var(--stroke);
    border-radius:14px; padding:10px 14px;
  }
  .auto-target.show{ display:flex; }
  .auto-target .at-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color:var(--cream-dim);
  }
  .auto-target .at-right{ display:flex; align-items:center; gap:10px; }
  .auto-target .at-val{ color:var(--blue); font-size:16px; letter-spacing:.5px; }
  .auto-target .at-close{
    width:26px; height:26px; flex:0 0 26px; border-radius:50%;
    border:1px solid var(--stroke); background:var(--brown-900);
    color:var(--cream); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .auto-target .at-close svg{ width:14px; height:14px; }
  .auto-target .at-close:active{ transform:scale(.92); }
  .auto-target input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:8px; border-radius:8px; margin:2px 0;
    background:linear-gradient(90deg,var(--blue-deep),var(--pink));
    outline:none; cursor:pointer;
  }
  .auto-target input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:24px; height:24px; border-radius:50%;
    background:var(--cream); border:3px solid var(--blue-deep);
    box-shadow:var(--shadow); cursor:pointer;
  }
  .auto-target input[type=range]::-moz-range-thumb{
    width:24px; height:24px; border-radius:50%;
    background:var(--cream); border:3px solid var(--blue-deep);
    box-shadow:var(--shadow); cursor:pointer;
  }

  /* Main action button */
  .action{
    height:64px;
    border:none; border-radius:16px;
    font-size:24px; font-weight:800; letter-spacing:2px;
    color:var(--brown-950);
    cursor:pointer;
    box-shadow:var(--shadow);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1.05;
    transition:transform .08s ease, filter .15s ease;
  }
  .action:active{ transform:translateY(1px) scale(.995); }
  .action .sub{ font-size:12px; font-weight:700; letter-spacing:1px; opacity:.8; margin-top:2px; }
  .action.stop .sub{font-size:clamp(15px,4vw,18px);letter-spacing:.2px;opacity:1;line-height:1.15;padding:0 10px;margin-top:4px;}

  /* START = baby blue */
  .action.start{
    background:linear-gradient(180deg,#c2e8f6,var(--blue-deep));
  }
  /* STOP / cash out = warm gold with a subtle pink glow */
  .action.stop{
    background:linear-gradient(180deg,#f4cf86,var(--gold-deep));
    box-shadow:0 0 0 2px var(--pink-soft), var(--shadow);
    animation:pulse 1.1s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 2px var(--pink-soft), var(--shadow); }
    50%{ box-shadow:0 0 0 6px var(--pink-soft), var(--shadow); }
  }
  /* outcome announcements shown ON the action button (mirrors reference UI) */
  .action.won{
    background:linear-gradient(180deg,#8fe3a0,#3fae5a);
    color:#08210f; animation:none;
  }
  .action.bust{
    background:linear-gradient(180deg,#a84357,#5c1a26);
    color:#ffffff; animation:none;
  }
  .action:disabled{ cursor:not-allowed; }
  /* keep outcome colours vivid even while disabled; only dim the neutral states */
  .action.start:disabled,
  .action.stop:disabled{ filter:grayscale(.5) brightness(.8); animation:none; }

  /* ---------- Footer stats ---------- */
  .stats{
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:2px 4px 0;
  }
  .stats .lbl{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cream-dim); }
  .stats .val{ font-size:18px; font-weight:800; }
  .stats .win .val{ color:var(--gold); }
  .stats .win{ text-align:right; }

  /* recent multipliers strip */
  .history{
    display:flex; gap:6px; overflow-x:auto; padding:2px 0 2px;
    scrollbar-width:none;
  }
  .history::-webkit-scrollbar{ display:none; }
  .history .h{
    flex:0 0 auto;
    padding:4px 9px; border-radius:20px;
    font-size:12px; font-weight:800;
    background:var(--panel-2); border:1px solid var(--stroke);
    color:var(--cream);
  }
  .history .h.win{ color:var(--blue); }
  .history .h.bust{ color:var(--danger); }
  .history-tabs{display:flex;gap:8px;margin:16px 0 12px;}
  .history-tabs button{flex:1;border:1px solid var(--stroke);border-radius:10px;padding:10px 8px;background:var(--panel-2);color:var(--cream);font-size:12px;font-weight:700;cursor:pointer;}
  .history-tabs button[aria-selected="true"]{background:var(--gold);color:var(--brown-950);}
  #crashList strong{color:var(--gold);font-variant-numeric:tabular-nums;}

  /* ---------- My bets (full history table) ---------- */
  .mybets-head{
    display:flex; align-items:center; justify-content:space-between;
    margin:18px 0 8px;
  }
  .mybets-head h3{ margin:0; font-size:15px; letter-spacing:.04em; }
  .link-btn{
    background:none; border:none; color:var(--cream-dim); cursor:pointer;
    font-size:12px; font-weight:700; text-decoration:underline; padding:4px;
  }
  .link-btn:hover{ color:var(--danger); }
  /* horizontal scroll for the extra columns on narrow screens */
  .mybets-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--stroke); border-radius:12px;
    background:var(--brown-900);
  }
  .mybets{
    width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap;
  }
  .mybets th, .mybets td{
    padding:8px 10px; text-align:left;
    border-bottom:1px solid var(--stroke);
  }
  .mybets thead th{
    position:sticky; top:0;
    background:var(--brown-800);
    color:var(--cream-dim); font-weight:800;
    font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  }
  .mybets tbody tr:last-child td{ border-bottom:none; }
  .mybets .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--cream-dim); }
  .mybets .res-win{ color:var(--gold); font-weight:800; }
  .mybets .res-bust{ color:var(--danger); font-weight:800; }

  /* ---------- Menu / modal ---------- */
  .overlay{
    position:fixed; inset:0; z-index:20;
    background:rgba(20,12,7,.6);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center; justify-content:center;
    padding:20px;
  }
  .overlay.show{ display:flex; }

  .sheet{
    width:100%; max-width:420px;
    background:linear-gradient(180deg,var(--brown-700),var(--brown-800));
    border:1px solid var(--stroke);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:18px;
    max-height:84dvh; overflow-y:auto;
  }
  .sheet h2{
    margin:0 0 4px; font-size:20px; letter-spacing:.5px;
    color:var(--blue);
  }
  .sheet h3{ margin:16px 0 6px; font-size:14px; color:var(--pink); letter-spacing:.5px; }
  .sheet p, .sheet li{ font-size:14px; line-height:1.5; color:var(--cream); }
  .sheet ul{ padding-left:18px; margin:6px 0; }
  .sheet .key{
    display:inline-block; padding:1px 8px; border-radius:6px; font-weight:800;
    background:var(--brown-900); border:1px solid var(--stroke);
  }
  .sheet .key.start{ color:var(--blue); }
  .sheet .key.stop{ color:var(--gold); }

  .sheet-head{ display:flex; align-items:center; justify-content:space-between; }
  .icon-btn{
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--stroke); background:var(--brown-600);
    color:var(--cream); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:active{ transform:scale(.94); }
  .icon-btn svg{ width:20px; height:20px; }

  .toast{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
    background:var(--brown-900); border:1px solid var(--stroke);
    color:var(--cream); padding:10px 16px; border-radius:12px;
    font-size:13px; font-weight:700; z-index:40;
    opacity:0; pointer-events:none; transition:all .25s ease;
    box-shadow:var(--shadow);
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  @media (min-width:481px){
    .app{ margin-top:8px; }
  }

  /* phones: let the game image stretch to fill the leftover viewport height instead of
     sitting at a short 16:9 (object-fit:cover keeps the centred rider in frame) */
  @media (max-width:600px){
    .stage{ aspect-ratio:auto; flex:1 1 auto; min-height:46vh; }
  }

:root{--panel:#132d4e;--panel-2:#0d2340;--stroke:rgba(220,230,240,.2);--pink-soft:rgba(255,220,50,.18)}
.brand{height:72px}.brand .wordmark{font-size:24px;line-height:.93;font-weight:900;letter-spacing:-1px;text-shadow:0 3px 5px #07172e}.wordmark em{color:#ffdc38;font-style:normal}.brand img{max-width:260px;object-fit:contain}.topbar{margin-bottom:-20px}
.stage video{object-fit:cover;transition:opacity .20s linear;filter:none}.stage{aspect-ratio:16/9}.stage::before,.stage::after{background:none}
.multi{color:white;text-shadow:0 2px 6px #07172e}.multi .x{color:#ffdc38}.action.start,.action.stop,.action.won{background:linear-gradient(180deg,#fff0a0,#f8cf32);color:#0c203c}.action.bust{background:linear-gradient(180deg,#315274,#0c203c);color:#fff}
.toggle{padding:0}.toggle.on{background:#f8cf32}.action:focus-visible,button:focus-visible{outline:3px solid white;outline-offset:3px}button{font-family:inherit}button:disabled{cursor:default;opacity:.6}.action.won:disabled,.action.bust:disabled{opacity:1}.sheet h3{color:#ffdf42}.menu-rail{z-index:12}.demo{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;color:#ccd3dc;text-align:center;margin:4px 0}.stats{padding-top:4px}.mybets-head{margin-top:8px}.empty{color:#ccd3dc}
@media(max-width:600px){.stage{min-height:36vh;flex:0 0 auto;aspect-ratio:16/9}.app{gap:10px}.multi{font-size:38px}.brand{height:64px}}
@media(min-width:601px){.stage{min-height:258px}}
@media(min-width:768px){
  .app{max-width:840px;}
  .stage{flex:0 0 auto;}
  .controls,.stats{width:100%;max-width:480px;align-self:center;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Crop only the supplied logo's white outer canvas in the layout. */
.topbar{align-items:center;margin-bottom:0;}
.menu-rail{top:calc(50% + 33px);}
.brand{height:auto;width:min(400px,calc(100% - 60px));flex:0 1 400px;}
.logo-crop{position:relative;width:100%;aspect-ratio:1654/580;overflow:hidden;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 70%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.brand .logo-crop img{position:absolute;max-width:none;width:101.572%;height:auto;left:-.907%;top:-37.069%;object-fit:initial;filter:none;}
@media(min-width:768px){
  .topbar{justify-content:center;}
  .brand{width:400px;flex:0 1 400px;}
  .topbar .menu-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);}
}