/* =====================================================================
   SpinRush MARQUEE 24 — the design system for the whole product.
   Loaded LAST. Every rule is scoped under body.mq so it deliberately
   supersedes the five legacy layers (studio9 → vegas23), which remain
   only for structure/behaviour (dialog mechanics, pick board, coin
   labels, payline overlay, the 5:4 reel viewport tested by
   qa/test-vegas23.cjs).

   Presentation only: no game logic, odds, paytables, storage or
   artwork are touched by this file. Approved Theatre 1.8 art is shown
   by cropping (object-fit / background-size:cover), never stretched.
   ===================================================================== */

:root{
  /* velvet + night */
  --mq-velvet:#8c1238;      --mq-velvet-deep:#560a2c;   --mq-wine:#3d0828;
  --mq-plum:#36104d;        --mq-night:#1f0a35;         --mq-ink:#2b0d17;
  /* metals */
  --mq-gold-hi:#fff4c7;     --mq-gold:#f3c95f;          --mq-gold-mid:#d79e35;   --mq-gold-lo:#94621c;
  /* neon accents (sparing) */
  --mq-pink:#ff4fae;        --mq-cyan:#48e3ff;          --mq-lime:#b7ff5a;
  /* bulbs */
  --mq-bulb:#fff6d2;        --mq-bulb-glow:#ffc94a;
  /* text */
  --mq-text:#fff3dc;        --mq-text-dim:#e9cfb0;      --mq-text-faint:#c9a98f;
  --mq-display:Cinzel,Georgia,serif;
  --mq-ui:Manrope,Arial,sans-serif;
  /* shared surfaces */
  --mq-gold-sheen:linear-gradient(135deg,#fff8d9 0%,#f6d77f 22%,#d9a03c 48%,#fbe39a 66%,#b47a26 100%);
  --mq-gold-edge:linear-gradient(135deg,#fff4c4,#e8b852 30%,#9a6620 55%,#f7d88a 78%,#a8701f);
  --mq-panel:linear-gradient(160deg,#6e1240f0 0%,#47103ff2 48%,#2c0f45f5 100%);
  --mq-panel-soft:linear-gradient(160deg,#5c1440d9,#2f1048e0);
  --mq-radius:16px;
  /* one bulb, drawn as a gradient so a whole border of them costs no DOM */
  --mq-bulb-dot:radial-gradient(circle,var(--mq-bulb) 0 1.9px,#ffe08a 2.4px 3px,#ffb83866 3.4px 4.6px,transparent 5px);
  --mq-bulb-dim:radial-gradient(circle,#ffd77a88 0 1.6px,#c27d2455 2.2px 3px,transparent 3.6px);
}

/* ------------------------------------------------------------------ */
/* 1. Canvas: velvet room, casino carpet, stage light                  */
/* ------------------------------------------------------------------ */
.mq{font-family:var(--mq-ui);color:var(--mq-text);
  background:
    radial-gradient(1100px 520px at 50% -160px,#ff4fae38,transparent 70%),
    radial-gradient(760px 620px at -8% 28%,#b0144a55,transparent 72%),
    radial-gradient(820px 640px at 108% 46%,#4a1fb055,transparent 72%),
    radial-gradient(circle at 50% 50%,#f3c95f12 0 1.2px,transparent 1.8px) 0 0/34px 34px,
    repeating-conic-gradient(from 45deg,#ffffff07 0 25%,transparent 0 50%) 0 0/68px 68px,
    linear-gradient(180deg,#4a0c35 0%,#300a3b 34%,#250b3c 70%,#1f0a35 100%);
  background-attachment:fixed;
}
.mq ::selection{background:#f3c95f;color:var(--mq-ink)}
.mq button,.mq input{font-family:var(--mq-ui)}

/* Stage curtains: velvet swags at the far left/right of every non-game page */
.mq:not(.in-game)::before,.mq:not(.in-game)::after{
  content:"";position:fixed;top:0;bottom:0;width:clamp(10px,2.6vw,46px);z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,#00000038 0 3px,transparent 3px 11px,#ffffff10 11px 13px,transparent 13px 18px),
    linear-gradient(90deg,#4a0620,#9b1540 45%,#5a0a28);
  box-shadow:0 0 30px #000a;
}
.mq:not(.in-game)::before{left:0;border-right:2px solid #f3c95f66}
.mq:not(.in-game)::after{right:0;border-left:2px solid #f3c95f66}

/* ------------------------------------------------------------------ */
/* 2. Marquee bulbs (shared utility via pseudo elements)               */
/* ------------------------------------------------------------------ */
@keyframes mq-chase{
  to{background-position:18px 0,-18px 100%,0 -18px,100% 18px}
}
@keyframes mq-chase-in{
  to{background-position:18px 1px,-18px calc(100% - 1px),1px -18px,calc(100% - 1px) 18px}
}
@keyframes mq-strip{to{background-position:18px 50%}}
@keyframes mq-glow{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes mq-sweep{0%{transform:translateX(-30%) rotate(18deg)}100%{transform:translateX(30%) rotate(-18deg)}}

/* ------------------------------------------------------------------ */
/* 3. Masthead: the sign over the door                                 */
/* ------------------------------------------------------------------ */
.mq .masthead,.mq:not(.in-game) .masthead,.mq.in-game .masthead{
  position:sticky;top:0;z-index:40;height:70px;padding:0 clamp(16px,3.4vw,52px);gap:clamp(14px,2.4vw,36px);
  background:
    linear-gradient(180deg,#ffffff12,transparent 45%),
    linear-gradient(100deg,#6b0f35 0%,#8d1640 34%,#5b1150 68%,#3a1162 100%);
  border-bottom:0;box-shadow:0 10px 30px #12041f80;color:var(--mq-text);
}
.mq .masthead::after{ /* running bulb strip under the sign */
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:12px;pointer-events:none;
  background:var(--mq-bulb-dot) 0 50%/18px 12px repeat-x,linear-gradient(#5a0d2c,#3a0a2a) 0 50%/100% 8px no-repeat;
  border-top:1px solid #f3c95f99;border-bottom:1px solid #f3c95f66;
  animation:mq-strip 2.4s linear infinite;
}
.mq .wordmark{font-family:var(--mq-ui);font-weight:800;letter-spacing:.02em;color:var(--mq-gold-hi);
  text-shadow:0 0 14px #ffcf5a88,0 2px 0 #7a3a10}
.mq .wordmark span{color:var(--mq-gold)}
.mq .wordmark small{color:#ffd9a6b0;letter-spacing:.32em}
.mq .brand-star{color:var(--mq-gold);filter:drop-shadow(0 0 8px #ffcf5a)}
.mq .masthead .nav-link,.mq:not(.in-game) .masthead .nav-link{
  color:#ffe2c2;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;min-height:40px;border:1px solid transparent;border-radius:999px;transition:background .2s,border-color .2s,color .2s}
.mq .masthead .nav-link:hover{background:#ffffff12;border-color:#f3c95f55;color:#fff}
.mq .masthead .nav-link.selected,.mq:not(.in-game) .masthead .nav-link.selected{
  color:var(--mq-ink);background:var(--mq-gold-sheen);border-color:#fff3c4;box-shadow:0 0 18px #ffcf5a66}
.mq .demo-pill{color:#ffe2c2;border-color:#f3c95f55;background:#00000026;font-weight:800;letter-spacing:.14em}
.mq .demo-pill i{background:var(--mq-lime);box-shadow:0 0 8px var(--mq-lime)}
.mq .masthead .wallet,.mq:not(.in-game) .masthead .wallet,.mq.in-game .masthead .wallet{
  background:var(--mq-gold-sheen);border:1px solid #fff3c4;color:var(--mq-ink);border-radius:12px;
  box-shadow:inset 0 1px #fffbe6,inset 0 -2px #8a560f55,0 0 0 3px #3a0a2a,0 0 0 4px #f3c95f88,0 6px 18px #12041f88}
.mq .masthead .wallet small{color:#6b3a14;letter-spacing:.16em}
.mq .masthead .wallet b{font-family:var(--mq-ui);font-weight:800;color:var(--mq-ink)}
.mq .round-button{background:#00000030;border:1px solid #f3c95f77;color:var(--mq-gold-hi)}
.mq .round-button:hover{background:#ffffff18}

/* ------------------------------------------------------------------ */
/* 4. Lobby shell: no dashboard sidebar; the floor is centred           */
/* ------------------------------------------------------------------ */
.mq:not(.in-game) .casino-sidebar{display:none}
.mq #lobbyView,.mq #dashboardView{position:relative;z-index:2;max-width:1480px;margin:0 auto;
  padding:30px clamp(18px,4vw,64px) 0}
.mq .eyebrow,.mq .eyebrow.red,.mq .section-kicker,.mq .row-heading span,.mq .section-heading .eyebrow{
  color:var(--mq-gold);font-weight:800;letter-spacing:.24em;font-size:11px;text-shadow:0 0 12px #ffcf5a44}
.mq h1,.mq h2,.mq h3{color:var(--mq-text)}
.mq .discovery-top h1,.mq .lounge-heading h1{font-family:var(--mq-display);font-weight:600;
  font-size:clamp(30px,4.2vw,58px);line-height:1.02;letter-spacing:.01em;
  background:linear-gradient(180deg,#fffaf0 10%,#ffe39a 55%,#e3a548 95%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #5a1424) drop-shadow(0 0 24px #ff9f4033)}
.mq .lounge-heading h1 em{font-style:normal}
.mq .lounge-heading p,.mq .discovery-top p{color:var(--mq-text-dim)}

/* search: a brass-rimmed field */
.mq .search{background:#1d0828cc;border:1px solid #f3c95f88;border-radius:999px;box-shadow:inset 0 2px 10px #0008,0 0 0 4px #f3c95f14}
.mq .search input{color:var(--mq-text)}
.mq .search input::placeholder{color:#e9cfb0aa}
.mq .search span,.mq .search kbd{color:var(--mq-gold);border-color:#f3c95f55;background:transparent}

/* LED ticker */
.mq .casino-marquee{position:relative;overflow:hidden;border-radius:999px;margin:20px 0 18px;padding:9px 22px;
  background:linear-gradient(90deg,#1b0626,#2a0a33 50%,#1b0626);border:1px solid #f3c95f88;
  box-shadow:inset 0 0 18px #000c,0 0 0 3px #4a0c2b,0 0 0 4px #f3c95f55;
  color:var(--mq-gold-hi);font-weight:800;letter-spacing:.3em;font-size:11px;text-shadow:0 0 8px #ffcf5a}
.mq .casino-marquee i{color:var(--mq-pink);text-shadow:0 0 8px var(--mq-pink)}
.mq .casino-marquee::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,#ffffff14 0 .8px,transparent 1.3px) 0 0/4px 4px}

/* ------------------------------------------------------------------ */
/* 5. Headliner hero: a lit marquee with curtains and spotlights        */
/* ------------------------------------------------------------------ */
.mq .lobby-showcase{gap:22px}
.mq .grand-hero{position:relative;isolation:isolate;overflow:hidden;height:clamp(400px,40vw,520px);border-radius:22px;
  border:0;background:#1a0624;
  box-shadow:0 0 0 2px #f3c95f,0 0 0 4px #2a0820,0 0 0 5px #f3c95f88,0 26px 60px #12041fb0,0 0 70px #ff4fae33}
.mq .grand-hero::before{ /* chasing bulb ring on a velvet band inside the edge */
  content:"";position:absolute;inset:0;border-radius:22px;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 0 11px #5a0c2c,inset 0 0 0 12px #f3c95fcc,inset 0 0 26px 12px #12041f99;
  background:var(--mq-bulb-dot) 0 1px/18px 9px repeat-x,var(--mq-bulb-dot) 0 calc(100% - 1px)/18px 9px repeat-x,
             var(--mq-bulb-dot) 1px 0/9px 18px repeat-y,var(--mq-bulb-dot) calc(100% - 1px) 0/9px 18px repeat-y;
  animation:mq-chase-in 2.6s linear infinite}
.mq .grand-hero-scene{border-radius:20px;overflow:hidden;background-size:cover;background-position:center}
.mq .grand-hero::after{ /* spotlight cones + floor wash, under the copy */
  content:"";position:absolute;inset:0;border-radius:20px;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,#1b0420f2 0%,#3a0a2ec4 30%,#2a0a3a40 58%,transparent 76%),
    linear-gradient(0deg,#1b0420cc,transparent 40%),
    conic-gradient(from 160deg at 18% -10%,transparent 0 8deg,#fff1c722 12deg 20deg,transparent 26deg),
    conic-gradient(from 178deg at 62% -10%,transparent 0 6deg,#ffd6f022 10deg 18deg,transparent 24deg)}
.mq .grand-hero-subject{z-index:2;filter:drop-shadow(0 0 30px #ffcf5a55) drop-shadow(0 20px 30px #000a)}
.mq .grand-hero-copy{z-index:3}
.mq .grand-kicker,.mq .grand-overline{color:var(--mq-gold);letter-spacing:.26em;font-weight:800;text-shadow:0 0 10px #ffcf5a66}
.mq .grand-kicker i{color:var(--mq-pink)}
.mq #grandTitle{font-family:var(--mq-display);font-weight:600;font-size:clamp(40px,5.4vw,82px);line-height:.95;
  background:linear-gradient(180deg,#fffdf4 0%,#ffe7a1 45%,#f0ad45 80%,#b86a1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #5a1424) drop-shadow(0 0 30px #ffb54a55)}
.mq #grandDescription{color:#ffe9d0;font-size:16px;text-shadow:0 2px 8px #000}
.mq .grand-facts{color:var(--mq-gold-hi);letter-spacing:.2em;font-weight:800}
.mq .grand-facts i{color:var(--mq-pink)}
.mq .grand-hero-nav{z-index:4}
.mq .grand-hero-nav button{background:#1b0626cc;border:1px solid #f3c95f99;color:var(--mq-gold-hi)}
.mq .hero-dots button{background:#ffffff40;border:0}
.mq .hero-dots button.active{background:var(--mq-gold);box-shadow:0 0 10px var(--mq-gold)}
.mq #grandIndex{color:var(--mq-gold-hi)}

/* the gold call-to-action every page uses */
.mq .gold-button,.mq #heroPlay,.mq .lounge-wallet button,.mq #loungeFeatureButton{
  background:var(--mq-gold-sheen);color:var(--mq-ink);border:1px solid #fff3c4;border-radius:999px;font-weight:800;letter-spacing:.06em;
  box-shadow:inset 0 1px #fffbe6,inset 0 -3px #8a560f66,0 0 0 3px #3a0a2a,0 0 0 4px #f3c95f88,0 10px 24px #12041f99,0 0 26px #ffcf5a55;
  transition:transform .15s,box-shadow .2s,filter .2s}
.mq .gold-button:hover,.mq #heroPlay:hover{filter:brightness(1.07);transform:translateY(-1px)}
.mq .gold-button:active,.mq #heroPlay:active{transform:translateY(1px)}
.mq .grand-secondary,.mq .lounge-outline,.mq .row-heading button,.mq .section-heading button,.mq [data-jump-collection],.mq [data-free-collection]{
  background:#1b0626a6;color:var(--mq-gold-hi);border:1px solid #f3c95f99;border-radius:999px;font-weight:800;letter-spacing:.08em}
.mq .grand-secondary:hover,.mq .row-heading button:hover,.mq .lounge-outline:hover{background:#ffffff14;border-color:var(--mq-gold)}

/* companion headliners */
.mq .companion{position:relative;overflow:hidden;border-radius:18px;border:0;
  box-shadow:0 0 0 2px #f3c95fcc,0 0 0 6px #4a0a2a,0 0 0 7px #f3c95f66,0 14px 34px #12041fa0;transition:transform .25s,box-shadow .25s}
.mq .companion:hover{transform:translateY(-3px);box-shadow:0 0 0 2px #fff0bd,0 0 0 6px #6b0f35,0 0 0 7px #f3c95f,0 20px 40px #12041fc0,0 0 30px #ff4fae44}
.mq .companion-scene{background-size:cover;background-position:center}
.mq .companion-copy{background:none;position:relative;z-index:2;text-shadow:0 2px 10px #000}
.mq .companion::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:18px;
  background:linear-gradient(90deg,#1b0420e6 0%,#3a0a2e99 42%,transparent 75%),linear-gradient(0deg,#1b042099,transparent 50%)}
.mq .companion-copy small{color:var(--mq-gold);letter-spacing:.22em;font-weight:800}
.mq .companion-copy b{font-family:var(--mq-display);font-weight:600;color:#fff1cf;text-shadow:0 2px 0 #5a1424,0 0 18px #ffb54a55}
.mq .companion-copy span{color:var(--mq-gold-hi);font-weight:800}

/* credit bar under the hero */
.mq .landing-glance{margin-top:22px;border-radius:999px;padding:10px 12px 10px 26px;border:0;
  background:linear-gradient(90deg,#4a0c2bee,#2a0b3cee);
  box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #f3c95f88,0 0 0 5px #2a0820,0 0 0 6px #f3c95f44,0 14px 30px #12041f90}
.mq .landing-glance small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800}
.mq .landing-glance strong{color:var(--mq-text);font-weight:800}
.mq .glance-icon{color:var(--mq-gold);background:#00000033;border:1px solid #f3c95f66;box-shadow:0 0 14px #ffcf5a33}
.mq .landing-glance button{background:var(--mq-gold-sheen);color:var(--mq-ink);border:0;border-radius:999px;font-weight:800;letter-spacing:.06em;box-shadow:0 0 18px #ffcf5a55}

/* ------------------------------------------------------------------ */
/* 6. Category chips: casino chips with dashed edge spots               */
/* ------------------------------------------------------------------ */
.mq .category-bar{gap:10px;margin:26px 0 8px}
.mq .category-bar button{position:relative;border-radius:999px;padding:10px 18px 10px 14px;min-height:44px;
  background:radial-gradient(circle at 30% 20%,#ffffff1c,transparent 60%),linear-gradient(160deg,#7a1238,#47103f);
  border:2px dashed #f3c95f80;color:var(--mq-text);font-weight:800;letter-spacing:.05em;
  box-shadow:0 0 0 2px #2a0820,0 6px 14px #12041f88;transition:transform .15s,background .2s}
.mq .category-bar button:hover{transform:translateY(-2px)}
.mq .category-bar button span{color:var(--mq-gold)}
.mq .category-bar button b{background:#00000040;color:var(--mq-gold-hi);border-radius:999px}
.mq .category-bar button.active{background:var(--mq-gold-sheen);color:var(--mq-ink);border:2px dashed #7a3a10aa;box-shadow:0 0 0 2px #fff3c4,0 0 22px #ffcf5a77}
.mq .category-bar button.active span,.mq .category-bar button.active b{color:var(--mq-ink)}

.mq .resume-banner{background:linear-gradient(90deg,#ff4fae,#c21d6c);color:#fff;border:1px solid #ffd0ea;border-radius:999px;font-weight:800;letter-spacing:.12em;
  box-shadow:0 0 24px #ff4fae88;animation:mq-glow 2.4s ease-in-out infinite}

/* ------------------------------------------------------------------ */
/* 7. Rails, headings, the casino floor grid                            */
/* ------------------------------------------------------------------ */
.mq .row-heading,.mq .section-heading{border:0;margin:40px 0 16px;padding-bottom:12px;position:relative}
.mq .row-heading::after,.mq .section-heading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--mq-gold),#f3c95f44 40%,transparent)}
.mq .row-heading h2,.mq .section-heading h2,.mq .lounge-section h2,.mq .lounge-activity h2{
  font-family:var(--mq-display);font-weight:600;font-size:clamp(24px,2.4vw,34px);color:#fff1cf;text-shadow:0 2px 0 #5a1424,0 0 18px #ffb54a33}
.mq .collection-count{color:var(--mq-gold-hi);background:#00000030;border:1px solid #f3c95f66;border-radius:999px;padding:6px 14px;font-weight:800;letter-spacing:.1em}
.mq .collection{position:relative;margin-top:24px;padding:4px clamp(10px,1.6vw,22px) 26px;border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%,#f3c95f14 0 1.4px,transparent 2px) 0 0/26px 26px,
    repeating-conic-gradient(from 45deg,#00000026 0 25%,#ffffff06 0 50%) 0 0/52px 52px,
    linear-gradient(180deg,#5a0f35cc,#3a0c3fcc);
  box-shadow:inset 0 0 0 1px #f3c95f55,inset 0 0 60px #12041f}
.mq .collection .section-heading{margin-top:22px}

/* cabinets (cards) */
.mq #lobbyView .game-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:22px 18px}
.mq .game-card,.mq .rail-card{position:relative;border-radius:16px;
  background:linear-gradient(180deg,#5c1440,#2c0f45);
  box-shadow:0 0 0 1px #f3c95f99,0 0 0 4px #2a0820,0 0 0 5px #f3c95f40,0 14px 28px #12041f99;transition:transform .25s,box-shadow .25s}
.mq .game-card:hover,.mq .rail-card:hover,.mq .game-card:focus-within,.mq .rail-card:focus-within{transform:translateY(-4px);
  box-shadow:0 0 0 1px #fff0bd,0 0 0 4px #5a0c2c,0 0 0 5px var(--mq-gold),0 20px 36px #12041fc0,0 0 34px #ffcf5a44}
.mq .game-card::before,.mq .rail-card::before{ /* bulbs light up along the top edge on hover */
  content:"";position:absolute;left:14px;right:14px;top:-6px;height:9px;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;
  background:var(--mq-bulb-dot) 0 50%/16px 9px repeat-x}
.mq .game-card:hover::before,.mq .rail-card:hover::before,.mq .game-card:focus-within::before,.mq .rail-card:focus-within::before{opacity:1;animation:mq-strip 1.8s linear infinite}
.mq .poster-button{border-radius:16px 16px 0 0;overflow:hidden;border:0;background:#1a0624}
.mq .poster-art{background-size:cover;background-position:center;transition:transform .5s ease}
.mq .poster-button:hover .poster-art{transform:scale(1.05)}
.mq .poster-shade{background:linear-gradient(0deg,#1b0420f0 0%,#2a0a2e80 38%,transparent 64%)}
.mq .poster-content small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800}
.mq .poster-content b{font-family:var(--mq-display);font-weight:600;color:#fff4d6;text-shadow:0 2px 0 #5a1424,0 0 14px #000}
.mq .poster-content span{color:var(--mq-gold-hi);font-weight:800;letter-spacing:.12em}
.mq .game-badge{background:#1b0626d9;color:var(--mq-cyan);border:1px solid #48e3ff99;border-radius:999px;font-weight:800;letter-spacing:.12em;
  text-shadow:0 0 8px #48e3ff;box-shadow:0 0 12px #48e3ff44}
.mq .fav-button{background:#1b0626cc;border:1px solid #f3c95f99;color:var(--mq-gold-hi)}
.mq .fav-button.active{color:var(--mq-pink);border-color:var(--mq-pink);box-shadow:0 0 14px #ff4fae88;text-shadow:0 0 8px var(--mq-pink)}
.mq .card-footer{background:transparent;border-top:1px solid #f3c95f44;color:var(--mq-text-dim)}
.mq .card-footer b{color:var(--mq-gold-hi);letter-spacing:.1em}
.mq .card-feature{color:var(--mq-text-dim)}
.mq .card-paytable{color:var(--mq-gold);border-color:#f3c95f66;background:#00000026}

/* paytable callout + footer */
.mq .paytable-callout{margin:46px 0 0;border-radius:22px;border:0;
  background:radial-gradient(500px 160px at 0% 0%,#ff4fae2a,transparent 70%),linear-gradient(110deg,#6b0f35,#3a1162);
  box-shadow:0 0 0 1px #f3c95f99,0 0 0 6px #2a0820,0 0 0 7px #f3c95f44,0 18px 36px #12041f99}
.mq .paytable-callout h2{font-family:var(--mq-display);font-weight:600;color:#fff1cf}
.mq .paytable-callout span{color:var(--mq-gold);letter-spacing:.22em;font-weight:800}
.mq .paytable-callout p{color:var(--mq-text-dim)}
.mq .paytable-callout button{background:var(--mq-gold-sheen);color:var(--mq-ink);border:0;border-radius:999px;font-weight:800}
.mq .callout-emblem{color:var(--mq-gold);text-shadow:0 0 18px var(--mq-gold)}
.mq .lobby-footer{color:var(--mq-text-faint);border-top:1px solid #f3c95f44;margin-top:40px;padding-bottom:40px}
.mq .lobby-footer strong{color:var(--mq-gold)}

/* ------------------------------------------------------------------ */
/* 8. My Lounge: the VIP room                                           */
/* ------------------------------------------------------------------ */
.mq .lounge-heading{margin-bottom:24px}
.mq .lounge-main-cards{gap:22px}
.mq .lounge-wallet{border:0;border-radius:22px;color:var(--mq-ink);
  background:
    radial-gradient(400px 200px at 90% 0%,#ffffffa0,transparent 60%),
    repeating-linear-gradient(115deg,#ffffff14 0 2px,transparent 2px 9px),
    var(--mq-gold-sheen);
  box-shadow:inset 0 2px #fffbe6,inset 0 -4px #8a560f55,0 0 0 3px #3a0a2a,0 0 0 4px #f3c95f,0 22px 44px #12041fb0,0 0 40px #ffcf5a44}
.mq .lounge-wallet strong{color:var(--mq-ink);font-weight:800;text-shadow:0 1px 0 #fff4c6}
.mq .lounge-wallet p,.mq .lounge-wallet span{color:#5a2a10}
.mq .wallet-card-status i{background:#2c8a3e;box-shadow:0 0 8px #2c8a3e}
.mq .lounge-watermark{display:none}
.mq .lounge-wallet button{background:linear-gradient(160deg,#7a1238,#3a0c3f);color:var(--mq-gold-hi);box-shadow:0 0 0 2px #fff3c4,0 8px 18px #3a0a2a66}
.mq .lounge-feature{border:0;border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 0 0 2px #f3c95fcc,0 0 0 8px #4a0a2a,0 0 0 9px #f3c95f66,0 22px 44px #12041fb0}
.mq .lounge-feature-art{background-size:cover;background-position:center}
.mq .lounge-feature>div:last-child{background:linear-gradient(90deg,#1b0420e6,#3a0a2e99 60%,transparent)}
.mq .lounge-feature span{color:var(--mq-gold);letter-spacing:.22em;font-weight:800}
.mq .lounge-feature h2{font-family:var(--mq-display);font-weight:600;color:#fff1cf;text-shadow:0 2px 0 #5a1424}
.mq .lounge-feature p{color:#ffe9d0}
.mq .lounge-shortcuts{gap:14px;margin-top:22px}
.mq .lounge-shortcuts button{border:0;border-radius:18px;background:var(--mq-panel-soft);color:var(--mq-text);
  box-shadow:0 0 0 1px #f3c95f88,0 12px 24px #12041f88;transition:transform .2s,box-shadow .2s}
.mq .lounge-shortcuts button:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--mq-gold),0 16px 28px #12041faa,0 0 22px #ffcf5a33}
.mq .lounge-shortcuts button>span{background:#00000033;border:1px solid #f3c95f77;color:var(--mq-gold)}
.mq .lounge-shortcuts button>span svg{stroke:var(--mq-gold)}
.mq .lounge-shortcuts b{color:#fff1cf}
.mq .lounge-shortcuts small{color:var(--mq-text-dim)}
.mq .lounge-shortcuts i{color:var(--mq-gold)}
.mq .lounge-section,.mq .lounge-activity{border:0;border-radius:22px;margin-top:28px;padding:6px clamp(14px,2vw,26px) 24px;
  background:linear-gradient(180deg,#4a0c35cc,#2c0f45cc);box-shadow:0 0 0 1px #f3c95f66,inset 0 0 50px #12041f}
.mq .lounge-empty{border:2px dashed #f3c95f66;border-radius:18px;background:#00000022;color:var(--mq-text)}
.mq .lounge-empty>span{color:var(--mq-pink);text-shadow:0 0 12px var(--mq-pink)}
.mq .lounge-empty h3{font-family:var(--mq-display);font-weight:600;color:#fff1cf}
.mq .lounge-empty p{color:var(--mq-text-dim)}
.mq .lounge-empty button{background:var(--mq-gold-sheen);color:var(--mq-ink);border:0;border-radius:999px;font-weight:800}
.mq .lounge-totals>div{background:#00000030;border:1px solid #f3c95f55;border-radius:14px}
.mq .lounge-totals span{color:var(--mq-gold);letter-spacing:.2em;font-weight:800}
.mq .lounge-totals b{color:#fff1cf;font-weight:800}
.mq .lounge-table-scroll table{color:var(--mq-text)}
.mq .lounge-table-scroll th{color:var(--mq-gold);border-color:#f3c95f55;letter-spacing:.16em}
.mq .lounge-table-scroll td{border-color:#ffffff14;color:var(--mq-text-dim)}
.mq .lounge-table-scroll td.activity-award{color:var(--mq-lime);font-weight:800}
.mq .lounge-activity-empty,.mq .lounge-data-note{color:var(--mq-text-faint)}

/* ------------------------------------------------------------------ */
/* 9. Mobile dock                                                       */
/* ------------------------------------------------------------------ */
.mq:not(.in-game) .mobile-dock{background:linear-gradient(100deg,#6b0f35f5,#3a1162f5);border-top:0;
  box-shadow:0 -12px 30px #12041f99;backdrop-filter:blur(14px)}
.mq:not(.in-game) .mobile-dock::before{content:"";position:absolute;left:0;right:0;top:-5px;height:9px;pointer-events:none;
  background:var(--mq-bulb-dot) 0 50%/16px 9px repeat-x,linear-gradient(#5a0d2c,#3a0a2a) 0 50%/100% 5px no-repeat;
  border-top:1px solid #f3c95f88;animation:mq-strip 2.4s linear infinite}
.mq .mobile-dock button{color:#ffe2c2;font-weight:800}
.mq .mobile-dock button span svg{stroke:currentColor}
.mq .mobile-dock button.active{color:var(--mq-ink);background:var(--mq-gold-sheen);border-color:#fff3c4;box-shadow:0 0 18px #ffcf5a66}

/* ------------------------------------------------------------------ */
/* 10. Dialogs, paytables, toast, auto-play                             */
/* ------------------------------------------------------------------ */
.mq .dialog-backdrop{background:radial-gradient(circle at 50% 30%,#3a0a2ee6,#12041ff2);backdrop-filter:blur(6px)}
.mq .dialog{color-scheme:dark;color:var(--mq-text);border:0;border-radius:22px;
  background:radial-gradient(600px 220px at 50% 0%,#ff4fae22,transparent 70%),var(--mq-panel);
  box-shadow:0 0 0 2px #f3c95f,0 0 0 8px #2a0820,0 0 0 9px #f3c95f66,0 40px 100px #000c}
.mq .dialog h2,.mq #dialogTitle{font-family:var(--mq-display);font-weight:600;color:#fff1cf;text-shadow:0 2px 0 #5a1424}
.mq .dialog p,.mq .dialog li,.mq .dialog label{color:var(--mq-text-dim)}
.mq .dialog-close{background:#00000040;border:1px solid #f3c95f88;color:var(--mq-gold-hi);border-radius:999px}
.mq .dialog input{background:#1b0626;color:var(--mq-text);border:1px solid #f3c95f88;border-radius:10px}
.mq .dialog table{color:var(--mq-text)}
.mq .paytable-dialog .dialog,.mq .dialog.paytable-dialog{max-width:min(980px,96vw)}
.mq .paytable-panel,.mq .paytable-scroll,.mq .symbol-paytable,.mq .special-symbols,.mq .ways-explainer,.mq .paytable-context,.mq .paytable-footer,.mq .paytable-note{
  background:transparent;color:var(--mq-text);border-color:#f3c95f44}
.mq .symbol-paytable th,.mq .symbol-paytable td,.mq .paytable-dialog .symbol-paytable tbody th{color:var(--mq-text);border-color:#ffffff1a;background:transparent}
.mq .symbol-paytable thead th{color:var(--mq-gold);letter-spacing:.14em}
.mq .paytable-tabs button,.mq .paytable-tools button,.mq .paytable-download{background:#00000030;color:var(--mq-gold-hi);border:1px solid #f3c95f77;border-radius:999px}
.mq .paytable-tabs button.active,.mq .paytable-tabs button[aria-selected="true"]{background:var(--mq-gold-sheen);color:var(--mq-ink)}
.mq .pay-symbol{background:#1b0626;border:1px solid #f3c95f55;border-radius:10px}
.mq .line-map-grid{background:#1b0626}
.mq .toast{background:var(--mq-gold-sheen);color:var(--mq-ink);border:0;border-radius:999px;font-weight:800;
  box-shadow:0 0 0 3px #3a0a2a,0 0 0 4px #f3c95f,0 16px 40px #000a}
.mq .auto-limits input{background:#1b0626;color:var(--mq-text);border:1px solid #f3c95f88}

/* ===================================================================== */
/* 11. THE GAME CABINET                                                  */
/*     The reel window is sized from BOTH the free width and the free     */
/*     height, so SPIN, wager and balance always stay on screen.          */
/* ===================================================================== */
.mq.in-game{background:#1a0624}
.mq.in-game .masthead{height:58px}
.mq.in-game .masthead nav{display:none}
.mq.in-game .masthead .demo-pill{display:none}

.mq #gameView{
  --frame-pad:22px;                       /* gold rim + inner padding, both sides */
  --chrome:490px;                         /* everything stacked above + below the reels */
  --reel-h:clamp(220px,calc(100svh - var(--chrome)),620px);
  --frame-w:min(100%,calc(var(--reel-h) * 1.25 + var(--frame-pad)));
  position:relative;isolation:isolate;min-height:calc(100svh - 58px);overflow:hidden;display:flex;flex-direction:column}
.mq #gameView .cabinet-layout{margin-top:auto!important;width:100%;box-sizing:border-box}
.mq #gameView .control-deck{box-sizing:border-box}
.mq #gameView .game-bottom-line{margin-top:auto}
/* the approved world fills the room, cropped never stretched */
.mq #gameView .game-world{inset:0;background-size:cover;background-position:center 30%;filter:saturate(1.08)}
.mq #gameView::before{ /* stage lighting: darken edges, warm centre, keep art visible */
  content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%,transparent 0 40%,#1a062466 70%,#1a0624d9 100%),
    linear-gradient(180deg,#1a062499 0%,transparent 18%,transparent 62%,#1a0624f2 100%)}
.mq #gameView .game-subject{filter:drop-shadow(0 0 24px #ffcf5a44) drop-shadow(0 20px 30px #000b)}

/* title strip */
.mq #gameView .game-top{min-height:0;padding:8px clamp(14px,3vw,40px) 2px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-align:center}
.mq #gameView .game-top .scene-window{display:none}
.mq #gameView .game-top>.back-button,.mq #gameView .game-top>.game-top-tools{position:static;inset:auto;transform:none;margin:0}
.mq #gameView .game-top>.back-button{justify-self:start;width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px}
.mq #gameView .game-top>.game-top-tools{justify-self:end;display:flex;gap:6px}
.mq #gameView .game-top .eyebrow{display:block;color:var(--mq-gold);letter-spacing:.3em;font-size:10px;font-weight:800;text-shadow:0 0 10px #000,0 0 10px #ffcf5a88}
.mq #gameView #gameTitle{margin:2px 0 0;font-family:var(--mq-display);font-weight:600;font-size:clamp(24px,2.8vw,42px);text-align:center;line-height:1.05;
  background:linear-gradient(180deg,#fffdf4,#ffe39a 55%,#e9a447);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #4a1020) drop-shadow(0 0 18px #000)}
.mq #gameView .back-button{background:#1b0626d9;border:1px solid #f3c95f99;color:var(--mq-gold-hi);border-radius:999px;font-weight:800;min-height:40px;padding:0 16px}
.mq #gameView .glass-button{background:#1b0626d9;border:1px solid #f3c95f88;color:var(--mq-gold-hi);border-radius:999px;min-height:40px;min-width:40px}
.mq #gameView .glass-button:hover,.mq #gameView .back-button:hover{background:#3a0a2ee6;border-color:var(--mq-gold)}

/* three-column cabinet: playbill | reels | feature board */
.mq #gameView .cabinet-layout{display:grid;grid-template-columns:minmax(190px,270px) minmax(0,1fr) minmax(190px,270px);
  gap:clamp(14px,2vw,30px);max-width:1500px;margin:0 auto;padding:0 clamp(14px,2.4vw,36px) 8px;align-items:center}
.mq #gameView .stage{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.mq #gameView .stage>*{width:var(--frame-w);max-width:100%}
.mq #gameView .stage-caption{display:flex;justify-content:space-between;gap:10px;margin:0}
.mq #gameView .stage-caption span{background:#1b0626e6;color:var(--mq-gold-hi);border:1px solid #f3c95f88;border-radius:999px;padding:4px 12px;font-size:10px;font-weight:800;letter-spacing:.18em}
.mq #gameView #stageStatus{color:var(--mq-lime);border-color:#b7ff5a77;text-shadow:0 0 8px #b7ff5a88}

/* the cabinet frame: gold bevel, velvet band, running bulbs */
.mq #gameView .marquee-frame{position:relative;box-sizing:border-box;margin:8px auto;padding:4px;border:7px solid transparent;border-radius:20px;
  background:linear-gradient(#0b0310,#0b0310) padding-box,var(--mq-gold-edge) border-box;
  box-shadow:0 0 0 7px #5a0c2c,0 0 0 9px #f3c95fcc,0 0 0 10px #2a0820,0 24px 60px #000c,0 0 70px #ff4fae33,inset 0 0 0 1px #fff3c4}
.mq #gameView .marquee-frame::before{content:"";position:absolute;inset:-15px;border-radius:30px;pointer-events:none;z-index:3;
  background:var(--mq-bulb-dot) 0 0/18px 9px repeat-x,var(--mq-bulb-dot) 0 100%/18px 9px repeat-x,
             var(--mq-bulb-dot) 0 0/9px 18px repeat-y,var(--mq-bulb-dot) 100% 0/9px 18px repeat-y;
  animation:mq-chase 2.6s linear infinite}
.mq #gameView .reel-viewport{border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#2a0a33,#0b0310 75%)}
.mq #gameView .reel-viewport::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:12px;
  background:linear-gradient(180deg,#000a,transparent 9%,transparent 91%,#000a),
             repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#f3c95f30 calc(20% - 1px) 20%)}

/* wins + messages */
.mq #gameView .result-ribbon{margin:0;text-align:center;background:linear-gradient(90deg,transparent,#1b0626e6 18%,#1b0626e6 82%,transparent);
  color:var(--mq-text);border:0;border-top:1px solid #f3c95f55;border-bottom:1px solid #f3c95f55;font-weight:800;letter-spacing:.08em;padding:5px 10px;font-size:12px}
.mq #gameView .win-breakdown{color:var(--mq-gold-hi);font-weight:800;letter-spacing:.06em;min-height:0}
.mq #gameView .win-announcement{background:radial-gradient(circle at 50% 50%,#3a0a2ef2,#1a0624e6 70%);border:0;border-radius:22px;
  box-shadow:0 0 0 2px var(--mq-gold),0 0 0 8px #5a0c2c,0 0 0 9px #f3c95f99,0 0 80px #ffcf5a88}
.mq #gameView .win-announcement::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#ffcf5a2e 0 8deg,transparent 8deg 22deg);border-radius:50%;animation:mq-spin 14s linear infinite}
@keyframes mq-spin{to{transform:rotate(360deg)}}
.mq #gameView #winTier{color:var(--mq-pink);letter-spacing:.3em;font-weight:800;text-shadow:0 0 12px var(--mq-pink)}
.mq #gameView #winAmount{font-family:var(--mq-ui);font-weight:800;
  background:linear-gradient(180deg,#fffdf4,#ffe39a 50%,#f0a53e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #4a1020)}

/* meters: lit credit counters */
.mq #gameView .stage-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.mq #gameView .stage-meters .meter{border:0;border-radius:12px;padding:5px 10px;text-align:center;
  background:linear-gradient(180deg,#1b0626,#2a0a33);box-shadow:inset 0 0 14px #000c,0 0 0 1px #f3c95f99,0 0 0 3px #2a0820}
.mq #gameView .stage-meters small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800;font-size:9px}
.mq #gameView .stage-meters strong{color:#fff4d6;font-weight:800;font-size:clamp(14px,1.3vw,19px);text-shadow:0 0 10px #ffcf5a55;font-variant-numeric:tabular-nums}
.mq #gameView .win-meter strong{color:var(--mq-lime);text-shadow:0 0 10px #b7ff5a88}

/* control deck: the button panel of the cabinet, same width as the reels */
.mq #gameView .control-deck{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;
  width:min(calc(100% - 28px),calc(var(--frame-w) + 40px));margin:4px auto 0;padding:10px 12px 10px 14px;border:0;border-radius:22px;
  background:linear-gradient(180deg,#7a1238,#47103f 55%,#2c0f45);
  box-shadow:inset 0 1px #ffffff2a,inset 0 -3px #00000055,0 0 0 1px #f3c95fcc,0 0 0 5px #2a0820,0 0 0 6px #f3c95f55,0 18px 40px #000b}
.mq #gameView .bet-control{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;border:0;border-radius:14px;padding:4px;
  background:#1b0626;box-shadow:inset 0 0 12px #000c,0 0 0 1px #f3c95f88}
.mq #gameView .bet-control button{height:44px;border-radius:10px;border:1px solid #f3c95f88;background:linear-gradient(180deg,#5a1440,#2c0f45);color:var(--mq-gold-hi);font-size:20px;font-weight:800}
.mq #gameView .bet-control small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800;font-size:9px}
.mq #gameView .bet-control strong{color:#fff4d6;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mq #gameView .bet-control>div{min-width:0;text-align:center}
.mq #gameView .deck-secondary{min-width:62px;height:56px;border-radius:14px;border:1px solid #f3c95f88;background:linear-gradient(180deg,#5a1440,#2c0f45);color:var(--mq-gold-hi);font-size:18px}
.mq #gameView .deck-secondary small{color:var(--mq-text-dim);letter-spacing:.12em;font-size:8.5px;font-weight:800}
.mq #gameView .deck-secondary.active,.mq #gameView .deck-secondary[aria-pressed="true"]{background:linear-gradient(180deg,#ff4fae,#a0145a);color:#fff;border-color:#ffd0ea;box-shadow:0 0 18px #ff4fae99}
.mq #gameView .spin-button{position:relative;width:86px;height:86px;border-radius:50%;margin:-22px 0;border:0;color:var(--mq-ink);
  background:radial-gradient(circle at 50% 30%,#fffbe6 0%,#ffe08a 30%,#e3a53f 62%,#9a5d17 100%);
  box-shadow:inset 0 3px #ffffffcc,inset 0 -5px #7a3a1099,0 0 0 4px #3a0a2a,0 0 0 6px var(--mq-gold),0 0 0 8px #2a0820,0 10px 26px #000b,0 0 34px #ffcf5a88;
  font-weight:800;letter-spacing:.14em;transition:transform .12s,filter .2s}
.mq #gameView .spin-button:hover{filter:brightness(1.06)}
.mq #gameView .spin-button:active{transform:scale(.96)}
.mq #gameView .spin-button:disabled{filter:grayscale(.5) brightness(.85)}
.mq #gameView .spin-button i{color:#6b3a14}

/* side boards */
.mq #gameView .title-panel,.mq #gameView .feature-panel{align-self:center;margin:0;border:0;border-radius:20px;padding:20px 18px;color:var(--mq-text);
  background:radial-gradient(260px 120px at 50% 0%,#ff4fae22,transparent 70%),var(--mq-panel);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px #f3c95fcc,0 0 0 5px #2a0820cc,0 0 0 6px #f3c95f55,0 20px 40px #000a}
.mq #gameView .title-panel h2{font-family:var(--mq-display);font-weight:600;color:#fff1cf;font-size:clamp(18px,1.6vw,24px);text-shadow:0 2px 0 #4a1020}
.mq #gameView .title-panel p,.mq #gameView .feature-panel p{color:var(--mq-text-dim);font-size:12.5px;line-height:1.55}
.mq #gameView .title-panel small{color:var(--mq-text-faint)}
.mq #gameView .portrait-medallion{background-size:cover;background-position:center;border:3px solid var(--mq-gold);box-shadow:0 0 0 4px #2a0820,0 0 22px #ffcf5a55}
.mq #gameView .math-medallion{border-color:#f3c95f55}
.mq #gameView .math-medallion b{font-family:var(--mq-ui);font-weight:800;color:var(--mq-gold-hi)}
.mq #gameView .math-medallion span{color:var(--mq-text-faint);letter-spacing:.14em}
.mq #gameView .feature-state small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800}
.mq #gameView .feature-state strong{color:var(--mq-gold-hi);text-shadow:0 0 18px #ffcf5a88}
.mq #gameView .feature-state span{color:var(--mq-text-dim);letter-spacing:.16em}
.mq #gameView .progress-track{background:#1b0626;border:1px solid #f3c95f55;border-radius:999px}
.mq #gameView .progress-track i{background:linear-gradient(90deg,var(--mq-pink),var(--mq-gold));box-shadow:0 0 10px var(--mq-pink)}
.mq #gameView .feature-total small{color:var(--mq-gold);letter-spacing:.2em;font-weight:800}
.mq #gameView .feature-total b{color:#fff4d6;font-weight:800}
.mq #gameView #featureGuide{width:100%;margin-top:6px}

/* bonus surfaces inside the reel window */
.mq #gameView .pick-board{background:radial-gradient(circle at 50% 40%,#5a0c2cf2,#1a0624f5)}
.mq #gameView .pick-board button{border:0;border-radius:14px;color:var(--mq-ink);font-weight:800;
  background:var(--mq-gold-sheen);box-shadow:inset 0 2px #fffbe6,inset 0 -3px #8a560f66,0 0 0 2px #3a0a2a,0 0 0 3px #f3c95f,0 8px 18px #000a;transition:transform .15s}
.mq #gameView .pick-board button:hover{transform:translateY(-2px) scale(1.02)}
.mq #gameView .pick-board button.revealed,.mq #gameView .pick-board button:disabled{background:linear-gradient(180deg,#2a0a33,#1b0626);color:var(--mq-lime);box-shadow:0 0 0 1px #b7ff5a88,0 0 16px #b7ff5a44}
.mq #gameView .pick-board.bonus-choice button{background:linear-gradient(180deg,#7a1238,#3a0c3f);color:var(--mq-text);box-shadow:0 0 0 2px var(--mq-gold),0 0 0 6px #2a0820,0 0 24px #ffcf5a55}
.mq #gameView .feature-options button{background:linear-gradient(180deg,#7a1238,#3a0c3f);color:var(--mq-text);border:1px solid var(--mq-gold);border-radius:16px}
.mq #gameView .coin-value{background:var(--mq-gold-sheen);color:var(--mq-ink);border:1px solid #fff3c4;font-weight:800;box-shadow:0 0 12px #ffcf5a99}
.mq #gameView .game-bottom-line{display:flex;justify-content:center;gap:18px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:transparent;border:0;color:#e9cfb099;font-size:9.5px;letter-spacing:.2em;font-weight:800;padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
.mq #gameView .game-bottom-line span:last-child{display:none}
.mq #gameView #connectionLabel{color:var(--mq-lime)}

/* ---- tablet / narrow desktop: playbill hides, feature board stays --------------------- */
@media (max-width:1180px) and (min-width:761px){
  .mq #gameView .cabinet-layout{grid-template-columns:minmax(0,1fr) minmax(170px,230px)}
  .mq #gameView .title-panel{display:none}
}

/* ---- phone portrait -------------------------------------------------------------------- */
@media (max-width:760px){
  .mq .masthead,.mq:not(.in-game) .masthead,.mq.in-game .masthead{height:60px;padding:0 12px;gap:10px}
  .mq .masthead::after{height:10px;bottom:-5px;background-size:14px 10px,100% 6px}
  .mq .wordmark small{display:none}
  .mq #lobbyView,.mq #dashboardView{padding:18px 16px 110px}
  .mq:not(.in-game)::before,.mq:not(.in-game)::after{display:none}
  .mq .grand-hero{height:auto;min-height:440px;border-radius:18px}
  .mq .category-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:6px 16px}
  .mq .category-bar button{flex:0 0 auto}
  .mq .landing-glance{border-radius:22px;padding:14px}
  .mq #lobbyView .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .mq .collection{padding:2px 10px 18px;margin-left:-6px;margin-right:-6px}

  .mq.in-game .masthead{height:52px}
  .mq.in-game .masthead .round-button#settingsBtn{display:none}
  .mq #gameView{--chrome:398px;--frame-pad:20px;min-height:calc(100svh - 52px)}
  .mq #gameView .game-top{grid-template-columns:auto 1fr auto;padding:8px 10px 0;gap:8px}
  .mq #gameView .game-top .eyebrow{font-size:8.5px;letter-spacing:.22em}
  .mq #gameView #gameTitle{font-size:clamp(16px,4.8vw,21px);line-height:1.1}
  .mq #gameView .game-top>div:not(.game-top-tools){min-width:0}
  .mq #gameView .back-button span{display:none}
  .mq #gameView .back-button{padding:0 12px}
  .mq #gameView .game-top-tools{display:flex;gap:4px}
  .mq #gameView .game-top-tools #rulesBtn span,.mq #gameView #fullscreenBtn{display:none}
  .mq #gameView .glass-button{min-width:38px;min-height:38px;padding:0 9px}
  .mq #gameView .cabinet-layout{display:block;padding:0 14px 4px;max-width:none}
  .mq #gameView .title-panel,.mq #gameView .feature-panel{display:none}
  .mq #gameView .stage{gap:6px}
  .mq #gameView .marquee-frame{margin:12px auto 8px;border-width:6px;padding:3px;border-radius:16px}
  .mq #gameView .marquee-frame::before{inset:-13px;border-radius:24px;background-size:15px 8px,15px 8px,8px 15px,8px 15px}
  .mq #gameView .stage-caption span{font-size:9px;padding:3px 9px}
  .mq #gameView .stage-meters .meter{padding:5px 6px}
  .mq #gameView .control-deck{grid-template-columns:minmax(0,1fr) auto auto auto;gap:7px;padding:9px 9px 9px 10px;width:calc(100% - 20px);border-radius:20px}
  .mq #gameView .bet-control{grid-template-columns:34px minmax(0,1fr) 34px;gap:4px}
  .mq #gameView .bet-control strong{font-size:14px}
  .mq #gameView .bet-control button{height:40px}
  .mq #gameView .deck-secondary{min-width:46px;height:50px;font-size:16px;padding:0 4px}
  .mq #gameView .spin-button{width:76px;height:76px;margin:-16px 0}
}

/* ---- phone landscape: no masthead, reels left, everything else right ------------------ */
@media (max-height:520px) and (orientation:landscape){
  .mq.in-game .masthead{display:none}
  .mq #gameView{--reel-h:calc(100svh - 82px);--frame-pad:18px;min-height:100svh;
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:14px;padding:0 12px 0 16px}
  .mq #gameView .game-top{grid-column:1 / -1;grid-row:1;padding:6px 0 0;grid-template-columns:auto 1fr auto}
  .mq #gameView .game-top .eyebrow{display:none}
  .mq #gameView #gameTitle{font-size:18px;text-align:left}
  .mq #gameView .back-button span,.mq #gameView .game-top-tools #rulesBtn span,.mq #gameView #fullscreenBtn{display:none}
  .mq #gameView .glass-button,.mq #gameView .back-button{min-height:34px;min-width:34px;padding:0 8px}
  .mq #gameView .cabinet-layout{display:contents}
  .mq #gameView .title-panel,.mq #gameView .feature-panel{display:none}
  .mq #gameView .stage{display:contents}
  .mq #gameView .stage>*{width:auto}
  .mq #gameView .stage-caption{display:none}
  .mq #gameView .marquee-frame{grid-column:1;grid-row:2 / 5;align-self:center;width:calc(var(--reel-h) * 1.25 + var(--frame-pad));margin:8px 0;border-width:5px;padding:3px;border-radius:14px}
  .mq #gameView .marquee-frame::before{inset:-11px;border-radius:22px;background-size:14px 7px,14px 7px,7px 14px,7px 14px}
  .mq #gameView .win-breakdown{display:none}
  .mq #gameView .result-ribbon{grid-column:2;grid-row:2;align-self:start;margin-top:10px;font-size:11px}
  .mq #gameView .stage-meters{grid-column:2;grid-row:3;align-self:center;grid-template-columns:repeat(3,minmax(0,1fr))}
  .mq #gameView .control-deck{grid-column:2;grid-row:4;align-self:end;width:auto;margin:0 0 10px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;padding:9px}
  .mq #gameView .bet-control{grid-column:1 / 3;grid-row:1}
  .mq #gameView .deck-secondary{height:48px;min-width:64px}
  .mq #gameView #turboBtn{grid-column:1;grid-row:2;justify-self:start}
  .mq #gameView #autoBtn{grid-column:2;grid-row:2}
  .mq #gameView .spin-button{grid-column:3;grid-row:1 / 3;width:84px;height:84px;margin:0}
  .mq #gameView .game-bottom-line{display:none}
  .mq #gameView .game-world{inset:0}
  .mq #gameView .cabinet-layout{margin-top:0!important}
  .mq #gameView .game-top>.game-top-tools{gap:4px}
}

/* ---- very small phones (e.g. 360x640) -------------------------------------------------- */
@media (max-width:380px){
  .mq #gameView .deck-secondary small{display:none}
  .mq #gameView .deck-secondary{min-width:42px}
  .mq #gameView .spin-button{width:70px;height:70px}
}

/* ---- motion: everything decorative stops for reduced motion or hidden tabs ------------ */
@media (prefers-reduced-motion:reduce){
  .mq *,.mq *::before,.mq *::after,.mq::before,.mq::after{animation:none!important;transition:none!important}
}
.mq.stage-paused *,.mq.stage-paused *::before,.mq.stage-paused *::after{animation-play-state:paused!important}

/* ------------------------------------------------------------------ */
/* 12. Paytable: readable on velvet (legacy layers painted it white)    */
/* ------------------------------------------------------------------ */
.mq .dialog.paytable-dialog,.mq .paytable-dialog{color:var(--mq-text);border:0;background:radial-gradient(600px 220px at 50% 0%,#ff4fae22,transparent 70%),var(--mq-panel)}
.mq .paytable-dialog .paytable-tools label,.mq .paytable-dialog .paytable-tools small{color:var(--mq-gold)}
.mq .paytable-dialog .paytable-tools select{background:#1b0626;color:var(--mq-text);border:1px solid #f3c95f88;color-scheme:dark}
.mq .paytable-dialog .paytable-tabs{border-color:#f3c95f44}
.mq .paytable-dialog .paytable-tabs button{background:#00000030;color:var(--mq-gold-hi);border:1px solid #f3c95f66;border-radius:999px}
.mq .paytable-dialog .paytable-tabs button.active,.mq .paytable-dialog .paytable-tabs button[aria-selected="true"]{background:var(--mq-gold-sheen);color:var(--mq-ink);border-color:#fff3c4}
.mq .paytable-dialog .symbol-paytable{background:#1b0626b3;border:1px solid #f3c95f55;border-radius:14px;overflow:hidden}
.mq .paytable-dialog .symbol-paytable thead th{background:linear-gradient(180deg,#7a1238,#47103f);color:var(--mq-gold-hi);letter-spacing:.16em}
.mq .paytable-dialog .symbol-paytable tbody tr,.mq .paytable-dialog .symbol-paytable tbody tr:nth-child(even){background:transparent}
.mq .paytable-dialog .symbol-paytable tbody tr:nth-child(even){background:#ffffff08}
.mq .paytable-dialog .symbol-paytable tbody th{color:#fff1cf;border-color:#ffffff14}
.mq .paytable-dialog .symbol-paytable td{border-color:#ffffff14;color:var(--mq-text)}
.mq .paytable-dialog .symbol-paytable td b{color:#fff4d6}
.mq .paytable-dialog .symbol-paytable td small{color:var(--mq-text-faint)}
.mq .paytable-dialog .paytable-context,.mq .paytable-dialog .paytable-note,.mq .paytable-dialog .paytable-footer{color:var(--mq-text-dim);background:#00000026;border-color:#f3c95f44}
.mq .paytable-dialog .special-symbols,.mq .paytable-dialog .ways-explainer{background:#1b0626b3;border-color:#f3c95f55;color:var(--mq-text)}
.mq .paytable-dialog .ways-explainer>strong{color:var(--mq-gold-hi)}
.mq .paytable-dialog .ways-explainer>b{color:var(--mq-gold)}
.mq .paytable-dialog .line-map-grid b{color:var(--mq-gold)}
.mq .paytable-dialog .line-map-grid svg{background:repeating-linear-gradient(0deg,#f3c95f1f 0 25%,transparent 25% 50%)}
.mq .lobby-footer strong,.mq .lobby-footer strong *{color:var(--mq-gold)!important}
.mq .paytable-dialog .bonus-summary{background:radial-gradient(300px 120px at 0% 0%,#ff4fae33,transparent 70%),linear-gradient(120deg,#7a1238,#3a1162);border:1px solid #f3c95f88;border-radius:16px;box-shadow:inset 0 1px #ffffff1a}
.mq .paytable-dialog .bonus-summary>span{color:var(--mq-gold);letter-spacing:.22em}
.mq .paytable-dialog .bonus-summary h3{font-family:var(--mq-display);font-weight:600;color:#fff1cf;letter-spacing:0}
.mq .paytable-dialog .bonus-summary p{color:#ffe9d0}
.mq .paytable-dialog .feature-guarantee{background:#1b0626b3;border:1px dashed #f3c95f99;border-radius:14px}
.mq .paytable-dialog .feature-guarantee>b{color:var(--mq-gold-hi)}
.mq .paytable-dialog .feature-guarantee p{color:var(--mq-text-dim)}

/* ---- short portrait phones (iPhone SE / 360x640 class): keep SPIN on screen ---------- */
@media (max-width:760px){
  .mq #gameView .win-breakdown{max-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
  .mq #gameView .result-ribbon{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:760px) and (max-height:720px){
  .mq #gameView .stage-caption,.mq #gameView .game-bottom-line{display:none}
  .mq #gameView .game-top .eyebrow{display:none}
  .mq #gameView .marquee-frame{margin:10px auto 6px}
  .mq #gameView .stage{gap:5px}
  .mq #gameView .control-deck{margin-bottom:8px}
}

/* winning-line chips: one tidy row the width of the cabinet, scrollable, never clipped mid-word */
.mq #gameView .win-breakdown{display:flex;flex-wrap:nowrap;justify-content:safe center;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);padding:0 18px}
.mq #gameView .win-breakdown::-webkit-scrollbar{display:none}
.mq #gameView .win-breakdown>*{flex:0 0 auto;white-space:nowrap}
.mq #gameView .win-breakdown:empty{display:none}
.mq #gameView .win-breakdown button{background:linear-gradient(180deg,#5a1440,#2c0f45);color:var(--mq-gold-hi);border:1px solid #f3c95f88;border-radius:999px;padding:5px 11px;font-size:9.5px;font-weight:800;letter-spacing:.06em}
.mq #gameView .win-breakdown button:hover,.mq #gameView .win-breakdown button[aria-pressed="true"]{background:var(--mq-gold-sheen);color:var(--mq-ink)}
@media (max-width:760px){.mq #gameView .win-breakdown{max-height:26px}.mq #gameView .win-breakdown button{font-size:8.5px;padding:4px 9px}}

/* ---- landscape phones: win chips stay hidden (must follow the chip rule above) -------- */
@media (max-height:520px) and (orientation:landscape){
  .mq #gameView .win-breakdown,.mq #gameView .win-breakdown:empty{display:none}
}

/* ---- short desktops / laptops (e.g. 1280x720, 1366x768): side boards never set the height */
@media (min-width:761px) and (min-height:521px) and (max-height:820px) and (min-aspect-ratio:1/1){
  .mq #gameView{--chrome:432px}
  /* reserve the win-chip row so a win never pushes SPIN off a short screen */
  .mq #gameView .win-breakdown,.mq #gameView .win-breakdown:empty{display:flex;align-items:center;height:24px;min-height:24px;max-height:24px;padding-top:0;padding-bottom:0}
  .mq #gameView .game-top{padding-top:4px;padding-bottom:0}
  .mq #gameView #gameTitle{font-size:clamp(22px,2.2vw,30px)}
  .mq #gameView .game-bottom-line{display:none}
  .mq #gameView .stage{gap:6px}
  .mq #gameView .marquee-frame{margin:6px auto}
  .mq #gameView .control-deck{margin-bottom:8px;padding-top:7px;padding-bottom:7px}
  .mq #gameView .deck-secondary{height:48px}
  .mq #gameView .spin-button{width:76px;height:76px;margin:-14px 0}
  .mq #gameView .title-panel,.mq #gameView .feature-panel{max-height:calc(var(--reel-h) + 70px);overflow:auto;scrollbar-width:thin;padding:14px 14px}
  .mq #gameView .portrait-medallion{display:none}
  .mq #gameView .title-panel small{display:none}
  .mq #gameView .feature-state strong{font-size:34px}
}