:root{
    --bg:#ffffff;--sidebar:#ffffff;--tile:#fafafa;--tile2:#f2f2f0;--card:#fafafa;
    --line:#ededed;--line2:#e3e3e3;
    --text:#0e0e10;--mut:#9a9aa2;--mut2:#5b5b64;
    --acc:#0e0e10;--gold:#5b5b64;--green:#0e0e10;--red:#c0392b;
    --r:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  button{font-family:inherit}
  /* prevent mobile tap-and-hold from entering native text-selection mode ANYWHERE
     in the UI chrome — without this, a long-press on any text (not just buttons)
     can show a blinking text-selection caret + highlight, which reads as a stray
     "blinking cursor" bug. Re-enabled explicitly on real inputs below. */
  body{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  input,textarea{user-select:text;-webkit-user-select:text}

  /* ---- mgLogo mark ---- */
  .mglogo{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;color:var(--text);text-decoration:none}
  .mglogo:link,.mglogo:visited,.mglogo:hover,.mglogo:active{color:var(--text);text-decoration:none}
  .mgmark{position:relative;display:inline-flex;align-items:center;font-family:'Russo One',sans-serif;font-weight:400;line-height:1;letter-spacing:-0.01em}
  .mgmark .chev-wrap{display:inline-flex;align-items:center;overflow:visible;width:.8em;margin-right:.09em;
    transition:width .5s cubic-bezier(.34,1.56,.64,1) .08s,margin-right .5s cubic-bezier(.34,1.56,.64,1) .08s;position:relative;z-index:1}
  .mgmark .chev{display:inline-flex;align-items:center;transform:translateX(0);opacity:1;
    transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease .25s;will-change:transform,opacity}
  .mgmark .chev svg{height:.72em;width:auto;display:block}
  .mgmark .word{position:relative;z-index:2;display:inline-flex;align-items:center;white-space:nowrap}
  .mgmark .ltr{display:inline-block}
  .mgmark .ltr-wrap{display:inline-grid;grid-template-columns:0fr;transition:grid-template-columns .55s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s);vertical-align:top}
  .mgmark .ltr-wrap>.ltr{overflow:hidden;opacity:0;transform:scale(.35) translateY(10px);
    transition:opacity .32s ease,transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
  .mglogo:hover .chev-wrap,.app:not(.collapsed) .navbar .mglogo .chev-wrap{width:0;margin-right:0}
  .mglogo:hover .chev,.app:not(.collapsed) .navbar .mglogo .chev{transform:translateX(2.4em);opacity:0}
  .mglogo:hover .ltr-wrap,.app:not(.collapsed) .navbar .mglogo .ltr-wrap{grid-template-columns:1fr}
  .mglogo:hover .ltr-wrap>.ltr,.app:not(.collapsed) .navbar .mglogo .ltr-wrap>.ltr{opacity:1;transform:scale(1) translateY(0)}

  /* ---- buttons ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;background:var(--acc);border:1px solid var(--acc);color:#fff;font-weight:600;border-radius:40px;padding:10px 18px;cursor:pointer;font-size:13.5px;transition:.14s}
  .btn:hover{background:#26262b;border-color:#26262b}
  .btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--text)}
  .btn.ghost:hover{background:#f4f4f2}

  /* ---- app shell ---- */
  body{background:#fff}

  /* ==== ONE shared navbar spans the full width, above both sidebar and main content ==== */
  .navbar{position:sticky;top:0;z-index:20;height:68px;display:flex;align-items:center;gap:14px;padding:0 20px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border-bottom:1px solid transparent}
  .navbar .mglogo{color:#fff;min-width:0}
  .navbar-mgmark{font-size:clamp(14px,4.6vw,20px)}
  .nav-toggle{flex:none;width:36px;height:36px;border-radius:10px;background:transparent;border:0;color:#eee;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s;outline:none}
  .nav-toggle:hover{background:rgba(255,255,255,.16);color:#fff}
  .nav-toggle:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}
  .nav-toggle svg{width:21px;height:14px;fill:currentColor;stroke:none;transition:transform .22s ease}
  .app.collapsed .nav-toggle svg,.app.drawer-open .nav-toggle svg{transform:rotate(180deg)}
  .navbar .spacer{flex:1}

  .shell{display:grid;grid-template-columns:var(--sb-w,280px) 1fr var(--qr-w,340px);align-items:start}
  .app.collapsed .shell{--sb-w:76px}
  .shell{transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}

  /* ==== right-rail QUICK REGISTER (desktop, guests only) ==== */
  .quickreg{min-width:0;position:sticky;top:68px;height:calc(100vh - 68px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line,#e8e8e8);scrollbar-width:thin;animation:qr-slidein .42s cubic-bezier(.16,1,.3,1)}
  @keyframes qr-slidein{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
  .qr-card{margin:auto 0;width:100%;padding:26px 22px;background:transparent;border:0;border-radius:0;box-shadow:none}
  .qr-head{text-align:center;margin-bottom:14px}
  .quickreg .promo-logo-badge{position:static;display:flex;justify-content:center;color:var(--brand,#F5003A);font-size:25px;margin-bottom:12px;opacity:1}
  .qr-badge{display:inline-block;background:linear-gradient(90deg,var(--brand,#ff2d55),var(--brand-d,#c0003a));color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:10px}
  .qr-head h3{font-size:18px;font-weight:800;margin:0 0 3px;color:var(--text)}
  .qr-head p{font-size:12px;color:var(--mut);margin:0;line-height:1.45}
  #qrForm{display:flex;flex-direction:column}
  #qrForm .field{margin-bottom:11px}
  #qrForm .agree{margin:2px 0 12px}
  #qrForm .auth-submit{width:100%}
  .quickreg .auth-switch{text-align:center;font-size:12.5px;color:var(--mut);margin-top:12px}
  /* right rail: logged-out GUEST → Quick Register panel (closeable); logged-in MEMBER → public chat.
     Guests reach the chat via the "Chat" edge tab / left-sidebar item (overlay). */
  body.mc-authed .quickreg{display:none}
  body:not(.mc-authed) .pubchat{display:none}
  body.qr-closed .quickreg{display:none}
  /* close (X) button + fixed edge tab to re-open */
  .qr-close{position:absolute;top:12px;right:14px;z-index:4;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.05);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s}
  .qr-close:hover{background:rgba(0,0,0,.11);color:var(--text)}
  /* quick-register is retired from the rail; its close/reopen tab + grid-collapse no longer apply
     (the old body.qr-closed rules squished the mobile grid, so they are removed). */
  .qr-reopen{display:none!important}
  @keyframes qr-tabin{from{transform:translate(115%,-50%)}to{transform:translate(0,-50%)}}
  @media (prefers-reduced-motion:reduce){ .quickreg,.qr-reopen{animation:none!important} }
  /* not enough width for 3 columns -> drop the rail */
  @media (max-width:1200px){
    .shell,body.mc-authed .shell{grid-template-columns:var(--sb-w,280px) 1fr}
    .quickreg,.pubchat{display:none!important}
    .qr-reopen,.pc-reopen{display:none!important}
  }

  /* ==== right-rail PUBLIC CHAT (desktop, logged-in members) ==== */
  .pubchat{min-width:0;position:sticky;top:68px;height:calc(100vh - 68px);display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line,#e8e8e8);animation:qr-slidein .42s cubic-bezier(.16,1,.3,1)}
  .pc-head{flex:0 0 auto;padding:16px 18px 12px;border-bottom:1px solid var(--line,#eee);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .pc-close{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.05);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s}
  .pc-close:hover{background:rgba(0,0,0,.11);color:var(--text)}
  /* closed the chat → collapse to 2 columns + fixed edge tab to reopen. DESKTOP ONLY:
     on mobile the chat is an overlay, not a rail column, so chat-closed must NOT touch the
     mobile grid (else content squishes into a phantom 2nd column). */
  body.chat-closed .pubchat{display:none}
  /* chat-closed collapse is MEMBER-only (only members have the chat in the rail; a guest's rail
     is the Quick Register panel, controlled by qr-closed). Desktop-scoped either way. */
  @media (min-width:1201px){ body.mc-authed.chat-closed .shell{grid-template-columns:var(--sb-w,280px) 1fr} }
  .pc-reopen{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:35;display:none;flex-direction:column;align-items:center;gap:7px;background:linear-gradient(180deg,var(--brand,#ff2d55),var(--brand-d,#c0003a));color:#fff;border:0;border-radius:12px 0 0 12px;padding:14px 9px;font-weight:800;font-size:11px;letter-spacing:.4px;cursor:pointer;box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent)}
  .pc-reopen span{writing-mode:vertical-rl;text-orientation:mixed}
  .pc-reopen:hover{filter:brightness(1.07)}
  .pc-reopen{display:none!important} /* retired — replaced by the unified #quickTabs Chat tab */
  .pc-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--text)}
  .pc-dot{width:8px;height:8px;border-radius:50%;background:#12b46a;box-shadow:0 0 0 3px rgba(18,180,106,.18)}
  .pc-sub{display:block;margin-top:3px;font-size:11px;color:var(--mut)}
  .pc-msgs{flex:1 1 auto;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin}
  .pc-empty{margin:auto;color:var(--mut);font-size:12.5px}
  .pc-msg{max-width:88%;align-self:flex-start;background:#f3f4f7;border:1px solid var(--line,#e8e8e8);border-radius:12px;border-bottom-left-radius:4px;padding:7px 11px}
  .pc-msg.mine{align-self:flex-end;background:linear-gradient(120deg,#ffe3ea,#fff0f3);border-color:#f7c9d6;border-bottom-left-radius:12px;border-bottom-right-radius:4px}
  /* new-message bubble pop: springs up from the bottom corner with a slight overshoot */
  @keyframes pc-pop{0%{opacity:0;transform:translateY(12px) scale(.55)}55%{opacity:1;transform:translateY(0) scale(1.06)}100%{transform:translateY(0) scale(1)}}
  .pc-msg.pop{animation:pc-pop .42s cubic-bezier(.34,1.56,.64,1) both;transform-origin:bottom left}
  .pc-msg.mine.pop{transform-origin:bottom right}
  @media (prefers-reduced-motion:reduce){.pc-msg.pop{animation:none}}
  .pc-name{font-size:11px;font-weight:800;color:var(--brand,#F5003A);margin-bottom:1px}
  .pc-msg.mine .pc-name{color:var(--brand-d,#c0003a)}
  .pc-text{font-size:13px;line-height:1.4;color:var(--text);word-wrap:break-word;overflow-wrap:anywhere}
  .pc-form{position:relative;flex:0 0 auto;display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line,#eee)}
  .pc-form input{flex:1;min-width:0;background:#f3f4f7;border:1px solid var(--line,#e8e8e8);border-radius:20px;padding:10px 14px;font-size:13.5px;color:var(--text)}
  /* cooldown badge sits INSIDE the chatbox (over the input) so it's readable on phones */
  .pc-cd{position:absolute;left:14px;right:62px;top:12px;bottom:12px;display:none;align-items:center;justify-content:center;gap:7px;background:#fff0f3;border:1px solid #f5b6c5;border-radius:20px;font-size:13px;font-weight:800;color:var(--brand-d,#c0003a);pointer-events:none;z-index:2}
  .pc-cd::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid #f5b6c5;border-top-color:var(--brand-d,#c0003a);animation:pc-cd-spin .9s linear infinite}
  @keyframes pc-cd-spin{to{transform:rotate(360deg)}}
  .pc-form input:focus{outline:none;border-color:var(--brand,#F5003A)}
  .pc-send{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s}
  .pc-send:hover{filter:brightness(1.08)}
  .pc-send:disabled{opacity:.5;cursor:default}
  /* logged-out DESKTOP: Quick Register is a rail PANEL (closeable). A "Chat" edge tab is always
     available; a "Register" edge tab appears once the panel is closed (then grid → 2 cols). While
     the panel is open the tabs sit just left of it (right = rail width). Desktop-scoped so the
     mobile grid is never touched (that caused a squish before). */
  /* Right-edge floating tab stack — always available on EVERY screen: "Chat" (public chat) +
     "Support" (customer service). Desktop guests also get a "Register" tab once the quick-register
     panel is closed. When a right rail occupies column 3 (member's chat rail open, or guest's
     register panel open) the stack shifts left to sit just beside it; otherwise it hugs the edge. */
  #quickTabs{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:36;display:flex;flex-direction:column;gap:9px}
  .qtab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;gap:6px;background:linear-gradient(180deg,var(--brand,#ff2d55),var(--brand-d,#c0003a));color:#fff;border:0;border-radius:12px 0 0 12px;padding:13px 9px;font-weight:800;font-size:11px;letter-spacing:.4px;cursor:pointer;box-shadow:-6px 6px 20px color-mix(in srgb,var(--brand,#F5003A) 35%,transparent);transition:.14s}
  .qtab:hover{filter:brightness(1.08)}
  .qtab span{writing-mode:vertical-rl;text-orientation:mixed}
  .qtab svg{width:16px;height:16px}
  .qtab-support{background:linear-gradient(180deg,#20a968,#0d8a50)} /* support = green, distinct from chat */
  .qtab-reg{display:none}
  @media (min-width:1201px){
    body.mc-authed:not(.chat-closed) #quickTabs,
    body:not(.mc-authed):not(.qr-closed) #quickTabs{right:var(--qr-w,340px)} /* sit left of an open rail */
    body.qr-closed:not(.mc-authed) .qtab-reg{display:flex}    /* Register tab: guest, panel closed */
    body.mc-authed:not(.chat-closed) .qtab-chat{display:none} /* member's rail chat is open → hide the redundant Chat tab */
    body.qr-closed:not(.mc-authed) .shell{grid-template-columns:var(--sb-w,280px) 1fr}
    body:not(.mc-authed) .content{padding-right:42px} /* clear the edge tab so it never overlaps the marquee envelope */
  }
  /* phones: icon-only edge tabs (hide the vertical text label), compact square buttons, sit lower */
  @media (max-width:600px){
    #quickTabs{top:63%}
    .qtab span{display:none}
    .qtab{min-height:0;gap:0;padding:13px 12px;border-radius:14px 0 0 14px}
    .qtab svg{width:22px;height:22px}
  }
  /* guests can READ the chat but must register/login to post — swap the input for a CTA */
  .pc-login{display:none;flex:0 0 auto;margin:12px 14px;padding:13px;border:0;border-radius:22px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;font-weight:800;font-size:14px;cursor:pointer;text-align:center}
  .pc-login:hover{filter:brightness(1.06)}
  body:not(.mc-authed) .pc-form{display:none!important}
  body:not(.mc-authed) .pc-login{display:block}
  /* sidebar "Public Chat" entry — ALWAYS shown, every screen size, guests + members. */
  #navPublicChat{display:flex}
  /* phone: chat opens as a full-screen overlay (there is no right rail on mobile) */
  @media (max-width:1200px){
    body.chat-mobile-open .pubchat{display:flex!important;position:fixed;inset:0;height:100%;width:100%;z-index:1000;border-left:0;animation:pc-slideup .28s ease}
    body.chat-mobile-open{overflow:hidden}
    .pc-form{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  }
  @keyframes pc-slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  /* desktop: the sidebar entry opens the chat as a right-docked panel. It sits BELOW the navbar and
     TAKES OVER the right-rail space — the games reflow beside it (2-col, hide whatever rail was there,
     reserve the panel width) instead of the panel covering them. Same treatment as the support panel,
     and matches the logged-in member's chat rail. Guests hit this branch; members use the grid rail. */
  @media (min-width:1201px){
    body.chat-mobile-open .pubchat{display:flex!important;position:fixed;top:68px;right:0;bottom:0;height:calc(100vh - 68px);width:360px;z-index:1000;border-left:1px solid var(--line,#e8e8e8);box-shadow:-16px 0 50px -24px rgba(0,0,0,.4);animation:pc-slidein-right .28s ease}
    body.chat-mobile-open .shell{grid-template-columns:var(--sb-w,280px) 1fr;padding-right:372px;transition:padding-right .28s ease}
    body.chat-mobile-open .quickreg,body.chat-mobile-open #quickTabs,body.chat-mobile-open .qr-reopen,body.chat-mobile-open .pc-reopen{display:none!important}
  }
  @keyframes pc-slidein-right{from{transform:translateX(100%)}to{transform:translateX(0)}}

  /* ==== sidebar: dark, flush to the left edge, sits directly below the navbar ==== */
  .sidebar{
    --sb-bg:#0a0a0c;--sb-card:#17171a;--sb-line:#232327;--sb-text:#f2f2f4;--sb-mut:#8b8b93;--sb-hover:#1c1c20;
    background:var(--sb-bg);color:var(--sb-text);position:sticky;top:68px;height:calc(100vh - 68px);overflow-x:hidden;overflow-y:auto;
    display:flex;flex-direction:column;padding:16px 0 18px;scrollbar-width:thin
  }

  .sb-section{padding:0 12px;margin-top:16px}
  .sb-section:first-child{margin-top:0}
  .sb-full{transition:opacity .15s ease}
  .app.collapsed .sb-full{display:none}

  .promo-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  .promo-card{background:var(--sb-card);border:1px solid var(--sb-line);border-radius:14px;padding:12px;cursor:pointer;transition:.14s}
  .promo-card:hover{background:var(--sb-hover)}
  .promo-card .pc-ico{font-size:20px;margin-bottom:18px}
  .promo-card b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
  .promo-card span{font-size:10.5px;color:var(--sb-mut)}

  .promo-card.cashback,.promo-card.dailyquest,.promo-card.chickenroad{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2px;padding:9px 8px 9px 12px}
  .promo-card.cashback .pc-txt,.promo-card.dailyquest .pc-txt,.promo-card.chickenroad .pc-txt{position:relative;z-index:2;flex:none}
  .promo-card.cashback .pc-txt em,.promo-card.dailyquest .pc-txt em,.promo-card.chickenroad .pc-txt em{display:block;font-style:normal;font-size:12.5px;font-weight:800;line-height:1;margin:0}
  .promo-card.cashback .pc-txt b,.promo-card.dailyquest .pc-txt b,.promo-card.chickenroad .pc-txt b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.05}
  .promo-card.cashback img,.promo-card.dailyquest img,.promo-card.chickenroad img{flex:none;width:44px;height:44px;object-fit:contain}
  .promo-card.cashback img{transform-origin:50% 72%;animation:mcGiftShake 2.6s ease-in-out infinite}
  @keyframes mcGiftShake{0%,68%,100%{transform:rotate(0)}71%{transform:rotate(-11deg)}75%{transform:rotate(9deg)}79%{transform:rotate(-7deg)}83%{transform:rotate(6deg)}87%{transform:rotate(-4deg)}91%{transform:rotate(2deg)}}
  @media(prefers-reduced-motion:reduce){.promo-card.cashback img{animation:none}}
  .promo-card.cashback .pc-txt em,.promo-card.cashback .pc-txt b{color:#fff}

  .promo-card.dailyquest{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border-color:transparent}
  .promo-card.dailyquest:hover{filter:brightness(1.06)}
  .promo-card.dailyquest .pc-txt em,.promo-card.dailyquest .pc-txt b{color:#fff}

  .promo-card.chickenroad{width:100%;margin-top:10px;background:linear-gradient(120deg,#e8391f,#ff9a3c);border-color:transparent}
  .promo-card.chickenroad:hover{filter:brightness(1.06)}
  .promo-card.chickenroad .pc-txt em,.promo-card.chickenroad .pc-txt b{color:#fff}

  .promo-collapsed{display:none}
  .app.collapsed .promo-collapsed{display:flex}
  /* flush icon stack: full rail width, square corners, zero gap between the 3 boxes */
  .promo-collapsed{align-items:center;justify-content:center;width:100%;aspect-ratio:1;margin:0;border-radius:0;border:0;background:var(--sb-card,#17171a);cursor:pointer;overflow:hidden;position:relative;transition:filter .12s ease}
  .promo-collapsed:hover{filter:brightness(1.1)}
  .promo-collapsed img{width:50px;height:50px;object-fit:contain}
  .promo-collapsed.white{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026))}
  .promo-collapsed.chickenroad{background:linear-gradient(120deg,#e8391f,#ff9a3c)}

  /* rail tooltip: single portal element (see JS), positioned via fixed coords so the
     sidebar's overflow-x:hidden (needed elsewhere) never clips it. Flush against the
     box (no gap), matches its height exactly, square corners, slides in left-to-right,
     and re-themes to match the hovered box's own color */
  .rail-tip{
    position:fixed;display:flex;align-items:center;background:#1c1c20;color:#f2f2f4;border:1px solid #2c2c31;
    padding:0 18px;border-radius:0;box-sizing:border-box;
    font-size:14.5px;font-weight:600;line-height:1.35;white-space:nowrap;
    opacity:0;transform:translateX(-18px);pointer-events:none;
    transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),background .12s ease,color .12s ease;
    z-index:200;overflow:hidden
  }
  .rail-tip span{display:inline-block;transform:translateX(-100%);opacity:0;transition:transform .28s cubic-bezier(.22,1,.36,1) .05s,opacity .22s ease .05s}
  .rail-tip.show{opacity:1;transform:translateX(0)}
  .rail-tip.show span{transform:translateX(0);opacity:1}
  .rail-tip.theme-light{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;border-color:transparent}
  .rail-tip.theme-orange{background:linear-gradient(120deg,#e8391f,#ff9a3c);color:#fff;border-color:transparent}

  .feature-bar{margin-top:10px;border-radius:14px;padding:13px 14px;background:linear-gradient(120deg,#e8391f,#ff9a3c);display:flex;align-items:center;gap:9px;cursor:pointer;transition:.14s}
  .feature-bar:hover{filter:brightness(1.06)}
  .feature-bar svg{width:20px;height:20px;flex:none}
  .feature-bar b{color:#fff;font-size:13.5px;font-weight:700}

  .sb-h{display:flex;align-items:center;gap:7px;color:var(--sb-mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
  .sb-h svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .thumb-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .thumb-row::-webkit-scrollbar{display:none}
  .thumb{flex:none;width:64px}
  .thumb .art{width:64px;height:64px;border-radius:12px;background:var(--cc,#1c1c20);position:relative;overflow:hidden;border:1px solid var(--sb-line)}
  .thumb .art::after{content:"";position:absolute;inset:0;background:radial-gradient(40px 40px at 30% 25%,rgba(255,255,255,.16),transparent 70%)}
  .thumb .art svg{position:absolute;top:8px;left:8px;width:16px;height:16px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .thumb span{display:block;font-size:10px;color:var(--sb-mut);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

  .nav-list{display:flex;flex-direction:column;gap:1px}
  .nav-link{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:10px;color:#dcdce0;font-size:13.5px;font-weight:500;cursor:pointer;transition:.12s}
  .nav-link:hover{background:var(--sb-hover)}
  .nav-link svg{flex:none;width:18px;height:18px;stroke:var(--sb-mut);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .app.collapsed .nav-link{justify-content:center}

  .sb-divider{height:1px;background:var(--sb-line);margin:14px 12px}
  .sb-lang{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;color:#dcdce0;font-size:13px;font-weight:600}
  .sb-lang:hover{background:var(--sb-hover)}
  .sb-lang .flag{font-size:16px}
  .sb-lang svg{margin-left:auto;width:14px;height:14px;stroke:var(--sb-mut);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .sb-legal{display:flex;flex-direction:column;gap:8px}
  .sb-legal a{font-size:11.5px;color:#55555c;transition:.14s}
  .sb-legal a:hover{color:var(--sb-mut)}

  /* ---- main area: plain white, flush, no card treatment ---- */
  .main-area{min-width:0;display:flex;flex-direction:column;background:#fff}
  .balance-chip{display:flex;align-items:center;gap:8px;background:#17171a;border:1px solid #232327;color:#fff;border-radius:40px;padding:8px 8px 8px 16px;font-size:13.5px;font-weight:700;white-space:nowrap;flex:none;max-width:100%}
  .balance-chip #balAmt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .balance-chip .add{width:28px;height:28px;border-radius:50%;background:#fff;color:#0e0e10;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
  .hdr-actions{display:flex;align-items:center;gap:10px}
  /* DEMO indicator: shown in the navbar (in place of a balance) while a guest plays a demo game */
  .demo-chip{display:none;align-items:center;gap:7px;background:linear-gradient(135deg,#f5b301,var(--brand,#F5003A));color:#fff;border-radius:40px;padding:8px 15px;font-size:13px;font-weight:800;letter-spacing:.6px;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--brand,#F5003A) 70%,transparent);user-select:none;-webkit-tap-highlight-color:transparent}
  .demo-chip .demo-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:demoPulse 1.15s ease-in-out infinite}
  @keyframes demoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
  body.demo-mode .demo-chip{display:inline-flex}
  body.demo-mode .hdr-actions .demo-hide{display:none}
  .navbar .btn{border-radius:9px;transition:background .14s ease,border-color .14s ease,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
  .navbar .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
  .navbar .btn.ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
  .navbar .btn:not(.ghost){background:#fff;border-color:#fff;color:#0e0e10}
  .navbar .btn:not(.ghost):hover{background:#eee;border-color:#eee;transform:translateY(-2px) scale(1.03);box-shadow:0 8px 18px -8px rgba(255,255,255,.25)}
  .navbar .btn:active{transform:translateY(0) scale(.97)}

  .content{padding:24px 28px 60px;max-width:1400px;width:100%;margin:0 auto}

  /* ---- notice marquee: a scrolling ticker of announcements, shown below the hero banner ---- */
  .marquee{margin-top:16px;margin-bottom:32px;display:flex;align-items:stretch;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border:1px solid transparent;border-radius:12px}
  .marquee-ico{flex:none;display:flex;align-items:center;justify-content:center;width:44px;border-right:1px solid rgba(255,255,255,.2)}
  .marquee-ico img{width:19px;height:19px;display:block}
  .marquee-viewport{flex:1;min-width:0;overflow:hidden}
  .marquee-track{display:flex;width:max-content;animation:marquee-scroll 32s linear infinite;padding:11px 0}
  .marquee-track:hover{animation-play-state:paused}
  .marquee-item{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;padding:0 28px;border-right:1px solid rgba(255,255,255,.2)}
  .marquee-item svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
  .marquee-msg{flex:none;display:flex;align-items:center;justify-content:center;width:44px;border-left:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);cursor:pointer;transition:.14s}
  .marquee-msg:hover{color:#fff;background:rgba(255,255,255,.14)}
  .marquee-msg svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* ---- hero banner: 3-slide carousel, one .promo-slide visible (.active) at a time ----
     jolt8-style vibe: dark glass card floating over a live glowing-particle canvas,
     a left-to-right readability fade, gradient-fill headline text. Purely decorative,
     not clickable. */
  .banner-wrap{position:relative}
  .promo-slides{position:relative;border-radius:0;overflow:hidden;background:#0a0810;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;aspect-ratio:27 / 10}
  .promo-slides:active{cursor:grabbing}
  .promo-slides img,.promo-slides a{-webkit-user-drag:none;user-drag:none}
  .promo-bg-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
  .promo-bg-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 30%,rgba(8,6,14,.25),rgba(8,6,14,.55) 60%,rgba(8,6,14,.82))}
  .promo{position:relative;z-index:2;border-radius:0;padding:44px 40px;margin-bottom:12px;background:linear-gradient(135deg,rgba(26,20,38,.55),rgba(10,8,14,.2));color:#fff;min-height:340px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
  .promo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,6,10,.82) 0%,rgba(8,6,10,.44) 45%,rgba(8,6,10,.06) 78%,transparent 100%)}
  .promo h1{position:relative;z-index:2;margin:0 0 14px;letter-spacing:-.5px;line-height:1.05;font-size:42px;font-weight:800;max-width:560px;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}
  .promo p{position:relative;z-index:2;color:#fff;margin:0;font-size:16px;line-height:1.55;max-width:460px;text-shadow:0 1px 3px rgba(0,0,0,.95),0 4px 14px rgba(0,0,0,.75)}
  .promo p.promo-shout b{font-weight:800}

  /* horizontal SLIDING track: all slides sit side-by-side; translateX moves between them (drag-follow + snap) */
  .promo-track{display:flex;height:100%;position:relative;z-index:2;will-change:transform;backface-visibility:hidden}
  .promo-track > .promo-slide{flex:0 0 100%;max-width:100%;width:100%;height:100%;display:block;min-height:0;margin:0;padding:0;border-radius:0;animation:none}
  /* admin-uploaded banner slides: a full-bleed image fills the 27:10 hero area (wrap sets the ratio) */
  .promo-slide-banner{overflow:hidden;background:#0a0810;text-decoration:none}
  /* custom-uploaded banners are a full designed image → NO dark text-scrim overlay */
  .promo-slide-banner::after{content:none}
  .promo-track > .promo-slide-banner img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
  @keyframes promo-slide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){.promo-slide.active{animation:none}}

  .promo-art{position:absolute;inset:0;z-index:1;pointer-events:none}

  /* per-slide headline gradient + matching soft glow -- "relevant" colours per theme */
  .promo-slide-chicken h1{background-image:linear-gradient(90deg,#ffe066,#ff8a00);text-shadow:0 0 26px rgba(255,138,0,.5)}
  .promo-slide-bonus h1{background-image:linear-gradient(90deg,#fff3c4,#ffc31f);text-shadow:0 0 26px rgba(255,195,31,.5)}
  .promo-slide-agent h1{background-image:linear-gradient(90deg,#ff6b81,#ffd60a);text-shadow:0 0 26px color-mix(in srgb,var(--brand,#F5003A) 45%,transparent)}

  .promo-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
  .promo-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.14s}
  .promo-dots span.on{background:#fff;width:18px;border-radius:4px}

  /* shared animated logo badge: the exact navbar mark (chevron <-> wordmark reveal),
     but auto-looping back and forth instead of hover-driven */
  .promo-logo-badge{position:absolute;z-index:2;top:24px;right:40px;opacity:.95;font-size:28px}
  .promo-logo-badge .chev-wrap{animation:plb-chevwrap-loop 5s ease-in-out infinite}
  .promo-logo-badge .chev{animation:plb-chev-loop 5s ease-in-out infinite}
  .promo-logo-badge .ltr-wrap{animation:plb-ltrwrap-loop 5s ease-in-out infinite;animation-delay:var(--d,0s)}
  .promo-logo-badge .ltr-wrap>.ltr{animation:plb-ltr-loop 5s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes plb-chevwrap-loop{0%,20%{width:.8em;margin-right:.09em}35%,65%{width:0;margin-right:0}80%,100%{width:.8em;margin-right:.09em}}
  @keyframes plb-chev-loop{0%,20%{transform:translateX(0);opacity:1}35%,65%{transform:translateX(2.4em);opacity:0}80%,100%{transform:translateX(0);opacity:1}}
  @keyframes plb-ltrwrap-loop{0%,20%{grid-template-columns:0fr}35%,65%{grid-template-columns:1fr}80%,100%{grid-template-columns:0fr}}
  @keyframes plb-ltr-loop{0%,20%{opacity:0;transform:scale(.35) translateY(10px)}35%,65%{opacity:1;transform:scale(1) translateY(0)}80%,100%{opacity:0;transform:scale(.35) translateY(10px)}}
  /* promo banner specifically: static full wordmark, no looping chevron blink */
  .promo-slides .promo-logo-badge .chev-wrap{animation:none;width:0;margin-right:0}
  .promo-slides .promo-logo-badge .chev{animation:none;transform:translateX(2.4em);opacity:0}
  .promo-slides .promo-logo-badge .ltr-wrap{animation:none;grid-template-columns:1fr}
  .promo-slides .promo-logo-badge .ltr-wrap>.ltr{animation:none;opacity:1;transform:scale(1) translateY(0)}
  @media (prefers-reduced-motion:reduce){
    .promo-logo-badge .chev-wrap,.promo-logo-badge .chev,.promo-logo-badge .ltr-wrap,.promo-logo-badge .ltr-wrap>.ltr{animation:none}
  }

  /* ---- slide 1 art: Chicken Road 2 (running mascot sprite + glow) ---- */
  .pac-glow{position:absolute;right:4%;bottom:0;width:clamp(220px,32vw,460px);height:clamp(220px,32vw,460px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);filter:blur(4px);animation:pac-glow-pulse 2.6s ease-in-out infinite}
  .pac-runner{position:absolute;right:2%;bottom:4%;--pac-f:clamp(120px,15vw,230px);width:var(--pac-f);height:var(--pac-f);background-image:url(/assets/promo/slide1_chicken_run.webp);background-repeat:no-repeat;background-size:calc(16 * var(--pac-f)) var(--pac-f);filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));animation:pac-run-cycle .85s steps(16) infinite,pac-bob 1.05s ease-in-out infinite}
  @keyframes pac-glow-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
  @keyframes pac-run-cycle{from{background-position-x:0}to{background-position-x:calc(-16 * var(--pac-f))}}
  @keyframes pac-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8%) rotate(2deg)}}
  @media (prefers-reduced-motion:reduce){
    .pac-glow,.pac-runner{animation:none}
  }

  /* ---- slide 2 art: Surprise Bonus (treasure chest + sparks) ---- */
  .pab-glow{position:absolute;top:46%;right:10%;width:42%;max-width:320px;aspect-ratio:1/1;transform:translate(8%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,196,102,.55) 0%,rgba(255,150,40,.25) 40%,rgba(255,150,40,0) 72%);animation:pab-pulse 4.5s ease-in-out infinite}
  .pab-chest{position:absolute;right:6%;top:52%;width:clamp(150px,30%,300px);transform:translateY(-48%) rotate(-2deg);transform-origin:50% 80%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));animation:pab-float 5.5s ease-in-out infinite}
  .pab-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd977;box-shadow:0 0 9px 2px rgba(255,209,102,.85);animation:pab-twinkle 2.6s ease-in-out infinite}
  .pab-spark-1{right:42%;top:28%}
  .pab-spark-2{right:10%;top:34%;animation-delay:.7s}
  .pab-spark-3{right:26%;top:82%;animation-delay:1.4s}
  .pab-spark-4{right:2%;top:60%;animation-delay:2s}
  @keyframes pab-float{0%,100%{transform:translateY(-48%) rotate(-2deg)}50%{transform:translateY(-54%) rotate(2deg)}}
  @keyframes pab-pulse{0%,100%{opacity:.65;transform:translate(8%,-50%) scale(1)}50%{opacity:1;transform:translate(8%,-50%) scale(1.08)}}
  @keyframes pab-twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
  @keyframes pab-float-sm{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-4px)}}
  @media (max-width:560px){
    .pab-chest{width:clamp(84px,32%,130px);top:auto;bottom:4%;right:3%;transform:none;animation:pab-float-sm 5.5s ease-in-out infinite}
    .pab-glow{width:52%;top:auto;bottom:2%;right:0;transform:translate(6%,6%)}
    .pab-spark-1,.pab-spark-2{display:none}
  }
  @media (prefers-reduced-motion:reduce){.pab-chest,.pab-glow,.pab-spark{animation:none}}

  /* ---- slide 3 art: Become an Agent (referral node-network + badges) ---- */
  .paa-glow{position:absolute;right:-6%;top:6%;width:62%;height:88%;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--brand,#F5003A) 30%,transparent),transparent 70%);filter:blur(6px);animation:paa-glow-pulse 6s ease-in-out infinite}
  .paa-stage{position:absolute;right:0;top:0;width:58%;height:100%}
  .paa-net{width:100%;height:100%;display:block;animation:paa-drift 9s ease-in-out infinite}
  .paa-node{fill:#e9e9ee;filter:drop-shadow(0 0 3px rgba(255,255,255,.35));transform-box:fill-box;transform-origin:center}
  .paa-node-hub{fill:var(--brand,#F5003A);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--brand,#F5003A) 85%,transparent));animation:paa-pulse 2.4s ease-in-out infinite}
  .paa-node-new{fill:#fff;animation:paa-pulse 1.8s ease-in-out infinite}
  .paa-ping{fill:none;stroke:var(--brand,#F5003A);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:paa-ping 2.6s ease-out infinite}
  .paa-ping-b{animation-delay:1.3s}
  .paa-line-live{stroke:color-mix(in srgb,var(--brand,#F5003A) 60%,transparent);stroke-dasharray:6 8;animation:paa-flow 1.3s linear infinite}
  .paa-line-live2{animation-delay:.25s}
  .paa-badge{position:absolute;width:clamp(26px,4vw,38px);height:clamp(26px,4vw,38px);border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;animation:paa-float 6.4s ease-in-out infinite}
  .paa-badge svg{width:56%;height:56%}
  .paa-badge-share{right:2%;top:47%;animation-duration:6.8s}
  .paa-badge-chart{right:15%;bottom:9%;animation-duration:5.4s;animation-delay:.8s}
  @keyframes paa-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}
  @keyframes paa-ping{0%{opacity:.9;transform:scale(.6)}80%,100%{opacity:0;transform:scale(2.6)}}
  @keyframes paa-flow{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
  @keyframes paa-glow-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes paa-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes paa-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(4deg)}}
  @media (prefers-reduced-motion:reduce){
    .paa-net,.paa-node-hub,.paa-node-new,.paa-ping,.paa-line-live,.paa-line-live2,.paa-glow,.paa-badge{animation:none}
  }
  @media (max-width:560px){
    .paa-stage{width:30%;top:18%;height:82%}
    .paa-badge-chart{display:none}
  }
  .banner-wrap{margin-bottom:0}

  /* ---- category navigation: Apple "Liquid Glass" floating dock ---- */
  .cat-nav-bar{position:relative;isolation:isolate;background:transparent;border-radius:30px;padding:10px 8px 12px;margin:0 auto 32px;width:fit-content;max-width:100%}
  /* the glass body: frosted, saturated backdrop */
  .cat-nav-bar::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
    background:rgba(40,38,52,.26);
    -webkit-backdrop-filter:blur(11px) saturate(185%) brightness(1.06);
    backdrop-filter:blur(11px) saturate(185%) brightness(1.06)}
  /* specular catch-light rim + soft top tint (the signature Apple highlight) */
  .cat-nav-bar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:linear-gradient(158deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 52%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 1.5px 1.5px 1px -1px rgba(255,255,255,.75),inset -1px -1px 1px -1px rgba(255,255,255,.4),inset 0 0 26px rgba(255,255,255,.05)}
  .cat-nav{display:flex;gap:2px;overflow-x:auto;padding:0 6px;scrollbar-width:none}
  .cat-nav::-webkit-scrollbar{display:none}
  .cat-btn{position:relative;z-index:0;flex:none;width:66px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;background:transparent;border:0;padding:4px 2px 0;font-size:11.5px;font-weight:700;color:#9a9aa2;cursor:pointer}
  .cat-btn img{width:46px;height:46px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:transform .24s cubic-bezier(.34,1.56,.64,1),filter .18s ease,opacity .18s ease}
  /* per-button frosted "glass box" highlight removed everywhere (PC now matches phone) —
     the active state is shown by the icon popping + label turning white, no box */
  .cat-btn::before{display:none}
  .cat-btn:hover img,.cat-btn.on img{transform:scale(1.14) translateY(-5px);filter:grayscale(0);opacity:1}
  .cat-btn.on{color:var(--brand,#F5003A)}
  /* active tab label: mostly-yellow gradient with a red streak sweeping through it (legible on the bright bar) */
  .cat-btn.on .cat-btn-label{
    background:linear-gradient(90deg,#FFE168 0%,#FFC400 34%,#FF2A17 50%,#FFC400 66%,#FFE168 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    font-weight:800;
    filter:drop-shadow(0 1px 1.4px color-mix(in srgb,var(--brand-d,#8c0026) 55%,transparent));
    animation:catLabelSweep 2.6s linear infinite}
  @keyframes catLabelSweep{0%{background-position:130% 0}100%{background-position:-130% 0}}
  @media (prefers-reduced-motion:reduce){.cat-btn.on .cat-btn-label{animation:none;background-position:50% 0}}
  .cat-btn.on::before,.cat-btn:hover::before{opacity:1;transform:scale(1)}
  .cat-btn-download{position:relative;margin-left:8px}
  .cat-btn-download::before{content:"";position:absolute;left:-9px;top:6px;bottom:14px;width:1px;background:#232327}
  .cat-btn-download:hover img{filter:grayscale(0);opacity:1}

  /* ---- desktop only: same bar becomes an iOS-style sticky footer dock, translucent + blurred ---- */
  @media (min-width:981px){
    .content{padding-bottom:120px}
    .cat-nav-bar{
      position:fixed;z-index:25;bottom:20px;
      left:calc(var(--sb-w,280px) + (100vw - var(--sb-w,280px)) / 2);
      transform:translateX(-50%);
      margin:0;
      transition:left .22s cubic-bezier(.4,0,.2,1)
    }
  }

  /* ---- game sections ---- */
  .sec{margin-bottom:38px}
  .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .sec-head h2{font-size:18px;margin:0;font-weight:700;display:flex;align-items:center;gap:9px}
  .sec-head h2 svg{width:19px;height:19px;stroke:var(--text);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .sec-head .more{font-size:13px;color:var(--mut);font-weight:600}
  .sec-head .more:hover{color:var(--text)}
  /* ---- animated category title ---- */
  .cat-title{position:relative;font-size:18px;margin:0;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:.2px}
  .cat-title .ct-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
    background:linear-gradient(135deg,var(--brand,#F5003A),var(--brand-d,#8c0026));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand,#F5003A) 70%,transparent);flex:0 0 auto;position:relative;overflow:hidden;
    animation:ctIcoPop .5s cubic-bezier(.2,.9,.3,1.4) both}
  .cat-title .ct-ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .cat-title .ct-ico::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;transform:rotate(20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:ctShine 3.4s ease-in-out infinite}
  .cat-title .ct-txt{background:linear-gradient(90deg,var(--text) 0%,var(--text) 40%,var(--brand,#F5003A) 50%,var(--text) 60%,var(--text) 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:ctSweep 5s linear infinite}
  .cat-title.trending-title .ct-ico,.sec-head .cat-title .ct-ico{background:linear-gradient(135deg,var(--brand,#F5003A),var(--brand-d,#8c0026))}
  @keyframes ctIcoPop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes ctShine{0%,72%{left:-30%}86%,100%{left:130%}}
  @keyframes ctSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}
  /* ---- animated "View all" pill ---- */
  .view-all{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#fff;cursor:pointer;
    border:0;padding:8px 13px;border-radius:999px;position:relative;overflow:hidden;letter-spacing:.2px;
    background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#c8003f) 60%,var(--brand-d,#8c0026));box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand,#F5003A) 75%,transparent);
    -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .14s ease,box-shadow .14s ease}
  .view-all::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;transform:skewX(-18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:vaShine 2.8s ease-in-out infinite}
  .view-all svg{width:14px;height:14px;stroke:#fff;fill:none;transition:transform .16s ease}
  .view-all:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--brand,#F5003A) 90%,transparent)}
  .view-all:hover svg{transform:translateX(3px)}
  .view-all:active{transform:translateY(0) scale(.96)}
  @keyframes vaShine{0%,55%{left:-120%}80%,100%{left:130%}}
  @media (prefers-reduced-motion:reduce){.cat-title .ct-ico,.cat-title .ct-ico::after,.cat-title .ct-txt,.view-all::before{animation:none}.cat-title .ct-txt{-webkit-text-fill-color:var(--text);color:var(--text)}}
  .cat-svg{width:22px;height:22px}
  .game-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .gcard{display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:transform .16s}
  .game-card{aspect-ratio:3/4;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:var(--card);position:relative;transition:border-color .16s,box-shadow .16s}
  /* RTP progress bar under each thumbnail — green fill = RTP out of 100 (value auto-derived per game, stable) */
  .rtp-bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:23px;padding:0 10px;border-radius:7px;overflow:hidden;
    background:#12351f;color:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1;box-shadow:0 3px 8px -5px rgba(28,155,82,.8)}
  .rtp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#3fd07f 0%,#1c9b52 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
  .rtp-bar .rtp-l,.rtp-bar .rtp-v{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.4)}
  .rtp-bar .rtp-v{font-variant-numeric:tabular-nums}
  .game-card .art{position:absolute;inset:0;background:var(--cc,linear-gradient(150deg,#232330,#141418))}
  .game-card .art::after{content:"";position:absolute;inset:0;background:radial-gradient(110px 110px at 30% 22%,rgba(255,255,255,.14),transparent 70%)}
  .game-card svg{display:none}
  .game-card.img-card .art{background-size:cover;background-position:center;background-repeat:no-repeat}
  .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
  /* img thumbnails render CLEAN — no permanent bottom label; the name is revealed centered on hover */
  .game-card.img-card .art::after{background:none}
  .game-card .lb{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;text-align:center;
    background:linear-gradient(180deg,rgba(9,7,20,.58) 0%,rgba(7,5,16,.70) 55%,rgba(5,3,12,.80) 100%);
    opacity:0;transition:opacity .26s ease;pointer-events:none}
  .game-card .lb .gc-t{color:#fff;font-size:15.5px;line-height:1.16;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 14px rgba(0,0,0,.85);
    transform:translateY(9px);transition:transform .34s cubic-bezier(.22,1,.36,1) .02s}
  .game-card .lb .gc-play{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#241a05;
    background:linear-gradient(180deg,#ffdd77,#f5ad14);padding:7px 16px;border-radius:999px;
    box-shadow:0 8px 18px -7px rgba(245,173,20,.75),inset 0 1px 0 rgba(255,255,255,.65);
    transform:translateY(11px) scale(.94);transition:transform .36s cubic-bezier(.22,1,.36,1) .06s}
  .game-card .lb .gc-play .gc-pi{display:block;width:11px;height:11px;fill:currentColor}
  .gcard:active .lb{opacity:1}
  .gcard:active .lb .gc-t,.gcard:active .lb .gc-play{transform:translateY(0) scale(1)}
  @media (hover:hover){
    .art-img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
    .gcard:hover{transform:translateY(-4px)}
    .gcard:hover .game-card{border-color:var(--line2);box-shadow:0 10px 24px -14px rgba(0,0,0,.25)}
    .gcard:hover .art-img{transform:scale(1.07)}
    .gcard:hover .lb{opacity:1}
    .gcard:hover .lb .gc-t,.gcard:hover .lb .gc-play{transform:translateY(0) scale(1)}
  }
  .game-card.soon{cursor:default}
  .game-card.soon .art{filter:saturate(.7) brightness(.85)}
  /* ---- lightweight "glass" thumbnail sheen (no backdrop-filter — pure gradients, cheap) ---- */
  .game-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
    background:linear-gradient(125deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.08) 14%,rgba(255,255,255,0) 36%),linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 24%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.07)}
  /* diagonal glare that auto-sweeps on a loop (works without hover — mobile too). GPU transform only; idle ~84% of each cycle so it stays cheap */
  .game-card::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-55%;width:42%;z-index:3;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
    transform:translateX(0) skewX(-18deg);opacity:0;animation:card-glare 5s ease-out infinite}
  /* stagger per column so the shine rolls across the grid as a wave, not all at once */
  .game-grid .gcard:nth-child(6n+2) .game-card::before{animation-delay:.5s}
  .game-grid .gcard:nth-child(6n+3) .game-card::before{animation-delay:1s}
  .game-grid .gcard:nth-child(6n+4) .game-card::before{animation-delay:1.5s}
  .game-grid .gcard:nth-child(6n+5) .game-card::before{animation-delay:2s}
  .game-grid .gcard:nth-child(6n) .game-card::before{animation-delay:2.5s}
  @keyframes card-glare{0%{transform:translateX(0) skewX(-18deg);opacity:0}5%{opacity:1}16%{transform:translateX(520%) skewX(-18deg);opacity:0}100%{transform:translateX(520%) skewX(-18deg);opacity:0}}
  @media (prefers-reduced-motion:reduce){.game-card::before{animation:none}}
  .soon-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;z-index:5}
  #toast{position:fixed;left:50%;top:82px;transform:translateX(-50%) translateY(-14px);background:#17171a;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:700;z-index:400;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---- live bets feed (Stake-style) ---- */
  .livebets .cat-title .ct-ico.ct-live{background:linear-gradient(135deg,#16c76a,#0a8f47)}
  .live-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:live-pulse 1.6s ease-out infinite}
  @keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
  .lb-card{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
  .lb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .lb-table{min-width:420px}
  .lb-head,.lb-row{display:grid;grid-template-columns:1.7fr 1.4fr 1fr 1.05fr;align-items:center;column-gap:10px;padding:0 18px}
  .lb-head{height:46px;background:var(--tile2);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.2px}
  .lb-head>span:nth-child(n+3){text-align:right}
  .lb-rows{position:relative}
  .lb-row{height:56px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
  .lb-row:last-child{border-bottom:0}
  .lb-row:nth-child(even){background:rgba(0,0,0,.018)}
  .lb-row.lb-new{animation:lb-in .5s cubic-bezier(.22,1,.36,1)}
  @keyframes lb-in{0%{opacity:0;transform:translateY(-14px);background:rgba(22,199,106,.14)}100%{opacity:1;transform:translateY(0)}}
  .lb-game{display:flex;align-items:center;gap:9px;min-width:0}
  .lb-thumb{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none;background:#e6e6e6}
  .lb-game b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-user{display:flex;align-items:center;gap:6px;color:var(--mut2);min-width:0}
  .lb-user span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-user.real{color:var(--text);font-weight:700}
  .lb-user .inc{width:15px;height:15px;flex:none;opacity:.55}
  .lb-user .youtag{font-size:9px;font-weight:800;color:#0a8f47;background:rgba(22,199,106,.16);padding:1px 5px;border-radius:20px;letter-spacing:.4px}
  .lb-bet,.lb-pay{text-align:right;white-space:nowrap}
  .lb-bet{color:var(--text)}
  .lb-pay{font-weight:800}
  .lb-pay.win{color:#16a34a}
  .lb-pay.loss{color:#dc2626}

  /* ---- homepage FAQ (below live bets) ---- */
  .faq-sec{margin-top:6px}
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .16s}
  .faq-item[open]{border-color:var(--line2)}
  .faq-q{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;font-size:14.5px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:14px;user-select:none;-webkit-tap-highlight-color:transparent}
  .faq-q::-webkit-details-marker{display:none}
  .faq-q::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s;margin-right:2px}
  .faq-item[open] .faq-q::after{transform:rotate(-135deg)}
  .faq-a{padding:0 18px 16px;font-size:13.5px;line-height:1.65;color:var(--mut2)}

  /* ---- mobile bottom navigation ---- */
  .bottom-nav{display:none}
  .bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;color:rgba(255,255,255,.65);font-size:10.5px;font-weight:600;cursor:pointer;transition:.14s}
  .bn-item svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .bn-item.on{color:#fff}
  .bn-item:hover{color:#fff}

  .bn-spin-wrap{position:relative;margin-top:-32px}
  .bn-spin-fab{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#ffe9a8,#f0b840);box-shadow:0 8px 18px -5px color-mix(in srgb,var(--brand-d,#8c0026) 60%,transparent),inset 0 0 0 2px rgba(255,255,255,.92);animation:bn-bob 3.2s ease-in-out infinite}
  .bn-spin-fab::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,71,.9),rgba(255,120,60,.34) 46%,rgba(255,205,71,0) 72%);z-index:-1;animation:bn-glow 1.8s ease-in-out infinite}
  .bn-spin-fab::after{content:"";position:absolute;inset:2px;border-radius:50%;z-index:4;pointer-events:none;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%)}
  @keyframes bn-glow{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.3);opacity:.28}}
  @keyframes bn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
  .bn-wheel{position:absolute;inset:4px;border-radius:50%;
    background:conic-gradient(from 0deg,#ff4d5e 0deg 43deg,#fff 43deg 47deg,#ffd257 47deg 88deg,#fff 88deg 92deg,#ff4d5e 92deg 133deg,#fff 133deg 137deg,#ffd257 137deg 178deg,#fff 178deg 182deg,#ff4d5e 182deg 223deg,#fff 223deg 227deg,#ffd257 227deg 268deg,#fff 268deg 272deg,#ff4d5e 272deg 313deg,#fff 313deg 317deg,#ffd257 317deg 358deg,#fff 358deg 360deg);
    box-shadow:inset 0 0 0 2px #fff;animation:bn-wheel-spin 4.5s linear infinite}
  .bn-pointer{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:11px solid #fff;z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
  .bn-wheel-center{position:relative;z-index:3;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 42% 32%,#fff6cf,#ffcf47 55%,#e0a11a);box-shadow:0 0 0 2.5px #fff,0 1px 3px rgba(0,0,0,.4)}
  .bn-spin-wrap::before,.bn-spin-wrap::after{content:"✦";position:absolute;color:#fff;text-shadow:0 0 5px rgba(255,220,120,.95);z-index:6;pointer-events:none;animation:bn-twinkle 1.6s ease-in-out infinite}
  .bn-spin-wrap::before{top:-3px;right:6px;font-size:11px}
  .bn-spin-wrap::after{top:31px;left:3px;font-size:8px;animation-delay:.8s}
  @keyframes bn-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
  .bn-spin-wrap span{display:block;text-align:center;font-size:10.5px;font-weight:700;color:#fff;margin-top:7px}
  @keyframes bn-wheel-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.bn-wheel,.bn-spin-fab,.bn-spin-fab::before,.bn-spin-wrap::before,.bn-spin-wrap::after{animation:none}}

  @media (max-width:980px){
    .shell,body.mc-authed .shell,body.qr-closed .shell{grid-template-columns:1fr}
    .sidebar{position:fixed;left:0;top:68px;bottom:0;height:auto;width:280px;z-index:40;border-radius:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:20px 0 60px rgba(0,0,0,.35)}
    .sidebar.open{transform:translateX(0)}
    .sidebar-scrim{display:none;position:fixed;inset:68px 0 0 0;background:rgba(0,0,0,.35);z-index:35}
    .sidebar-scrim.open{display:block}
    .main-area{height:auto;overflow:visible}
    .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .marquee{margin-bottom:0;margin-top:12px}
    /* full-bleed hero on phones: negate .content's 18px/16px padding so the banner is flush to the navbar + screen edges */
    .banner-wrap{margin:-18px -16px 0}
    /* ---- mobile live bets: 2-line card (Game+Payout / User·Bet) ---- */
    .lb-table{min-width:0}
    .lb-head{display:none}                 /* column labels don't fit the 2-line card */
    .lb-row{
      grid-template-columns:1fr auto;
      grid-template-areas:"game pay" "user bet";
      height:auto;row-gap:3px;column-gap:10px;padding:11px 13px;align-items:center;
    }
    .lb-game{grid-area:game}
    .lb-pay{grid-area:pay;font-size:14px}
    .lb-user{grid-area:user;font-size:11.5px}
    .lb-bet{grid-area:bet;font-size:11.5px;color:var(--mut2)}
    .lb-thumb{width:26px;height:26px}
    /* ---- mobile cat-nav-bar: same liquid-glass dock as PC, full width ---- */
    .cat-nav-bar{margin-top:16px;margin-bottom:20px;width:100%}
    .cat-btn::before{display:none}
    .promo{padding:20px 18px;margin-bottom:0;min-height:210px}
    /* custom banners keep the 1600x600 (8:3) ratio on phone too — no fixed height, no min-height gap */
    .promo-slide-banner{padding:0;min-height:0}
    .promo-slide-banner img{height:auto}
    .promo h1{font-size:22px;margin:0 0 8px;line-height:1.15}
    .promo p{font-size:13px;margin:0 0 18px}
    .promo-dots{bottom:10px}
    .promo-slides .promo-logo-badge{top:14px;right:14px;font-size:18px}
    .navbar{padding:0 16px}
    .content{padding:18px 16px 96px}
    .bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;height:60px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border:1px solid transparent;border-radius:20px;z-index:30;align-items:center;padding:0 6px;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
    /* no mouse on touch devices -- the hover-to-expand logo animation just gets stuck
       mid-state after a tap, so drive it off the drawer open/close toggle instead of :hover.
       Same mapping as desktop: sidebar visible/open -> compact mark, closed -> full wordmark */
    .navbar .mglogo .chev-wrap{width:0!important;margin-right:0!important}
    .navbar .mglogo .chev{transform:translateX(2.4em)!important;opacity:0!important}
    .navbar .mglogo .ltr-wrap{grid-template-columns:1fr!important}
    .navbar .mglogo .ltr-wrap>.ltr{opacity:1!important;transform:scale(1) translateY(0)!important}

    .app.drawer-open .navbar .mglogo .chev-wrap{width:.8em!important;margin-right:.09em!important}
    .app.drawer-open .navbar .mglogo .chev{transform:translateX(0)!important;opacity:1!important}
    .app.drawer-open .navbar .mglogo .ltr-wrap{grid-template-columns:0fr!important}
    .app.drawer-open .navbar .mglogo .ltr-wrap>.ltr{opacity:0!important;transform:scale(.35) translateY(10px)!important}
  }
  @media (max-width:560px){
    .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .navbar{gap:8px}
    .hdr-actions{gap:6px}
    .navbar .btn{padding:8px 12px;font-size:12.5px}
  }
  /* very narrow devices (Galaxy Z Fold cover ~344px, Z Flip cover, tiny phones):
     drop back to 2 columns. Kept below 360px so standard Galaxy S phones stay 3-up. */
  @media (max-width:352px){
    .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  /* --- narrow phones (Galaxy Z Flip/Fold, small devices): keep the navbar on ONE row.
     Balance stays a single line (never page-breaks); logo + chip shrink so they don't crowd. --- */
  @media (max-width:430px){
    .navbar{padding:0 12px;gap:10px}
    .navbar-mgmark{font-size:15px}
    .balance-chip{padding:6px 6px 6px 12px;font-size:12.5px;gap:6px}
    .balance-chip .add{width:25px;height:25px;font-size:15px}
  }
  @media (max-width:360px){
    .navbar{padding:0 10px;gap:8px}
    .navbar-mgmark{font-size:13px}
    .balance-chip{padding:5px 5px 5px 10px;font-size:11.5px;gap:5px}
    .balance-chip .add{width:22px;height:22px;font-size:14px}
  }

  /* ---- auth modal: Login / Register, shared overlay, two swappable views ---- */
  .modal-overlay{position:fixed;inset:0;background:rgba(6,6,8,.6);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:20px;z-index:300}
  .modal-overlay.open{display:flex}
  .auth-modal{position:relative;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:22px;padding:32px;color:#0e0e10;box-shadow:0 30px 70px -20px rgba(0,0,0,.35)}
  .modal-close{position:absolute;z-index:2;top:16px;right:16px;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:.14s}
  .modal-close:hover{background:rgba(255,255,255,.3);color:#fff}
  .modal-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

  .auth-view{display:none}
  .auth-modal[data-view="register"] .auth-view-register{display:block}
  .auth-modal[data-view="login"] .auth-view-login{display:block}
  .auth-modal[data-view="forgot"] .auth-view-forgot{display:block}
  .auth-forgot{text-align:right;margin:-2px 0 12px}
  .auth-forgot a{font-size:12.5px;font-weight:600;color:var(--brand-d,#c8003f);text-decoration:none}
  .auth-forgot a:hover{text-decoration:underline}
  .hidden-step{display:none}
  .auth-ok{display:none;margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#e8fff3;border:1px solid #9be6c2;color:#0f7a45;font-size:12.5px;line-height:1.45}
  .auth-ok.show{display:block}
  #regInvite.locked{background:#eef0f4;color:#6b7280;cursor:not-allowed;font-weight:700;letter-spacing:.6px}
  .auth-header{margin:-32px -32px 24px;padding:32px 32px 24px;border-radius:22px 22px 0 0;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff}
  .auth-logo-badge{position:static;display:inline-flex;margin-bottom:16px;font-size:22px;opacity:1}
  .auth-modal h2{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.3px;color:#fff}
  .auth-sub{margin:0;color:rgba(255,255,255,.85);font-size:13.5px}

  .field{display:block;margin-bottom:13px}
  .field-label{display:block;font-size:12.5px;font-weight:600;color:#5b5b64;margin-bottom:6px}
  .field-label em{font-style:normal;color:#9a9aa2;font-weight:500}
  .field-box{display:flex;align-items:center;gap:9px;background:#fafafa;border:1px solid #ededed;border-radius:11px;padding:0 12px;transition:border-color .14s}
  .field-box:focus-within{border-color:#c7c7cc}
  .field-ico{width:16px;height:16px;flex:none;stroke:#9a9aa2;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .field-box input{flex:1;min-width:0;background:none;border:0;outline:0;color:#0e0e10;font-size:14px;padding:12px 0;font-family:inherit}
  .field-box input::placeholder{color:#b5b5ba}
  .field-prefix{flex:none;color:#0e0e10;font-weight:700;font-size:14px;user-select:none;cursor:default}
  .field-divider{flex:none;width:1px;height:20px;background:#ddd}
  .field-eye{flex:none;background:none;border:0;padding:4px;margin:0;cursor:pointer;color:#9a9aa2;display:flex;transition:.14s}
  .field-eye:hover{color:#5b5b64}
  .field-eye svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

  .agree{display:flex;align-items:flex-start;gap:9px;margin:16px 0 20px;font-size:12.5px;color:#5b5b64;cursor:pointer;line-height:1.5}
  .agree input{position:absolute;opacity:0;width:0;height:0}
  .agree-box{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;border:1px solid #d4d4d8;background:#fafafa;display:flex;align-items:center;justify-content:center;transition:.14s}
  .agree-box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.12s}
  .agree input:checked ~ .agree-box{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border-color:transparent}
  .agree input:checked ~ .agree-box svg{opacity:1}
  .auth-link{color:var(--brand,#F5003A);font-weight:700;text-decoration:underline;cursor:pointer}

  /* Privacy Agreement modal */
  .privacy-overlay{z-index:320}
  .privacy-modal{position:relative;width:100%;max-width:440px;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;color:#0e0e10;box-shadow:0 30px 70px -20px rgba(0,0,0,.45)}
  .privacy-head{flex:0 0 auto;padding:26px 28px 20px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff}
  .privacy-head h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.3px;color:#fff}
  .privacy-head p{margin:5px 0 0;font-size:12.5px;color:rgba(255,255,255,.82)}
  .privacy-body{flex:1 1 auto;overflow-y:auto;padding:20px 28px 8px;-webkit-overflow-scrolling:touch}
  .privacy-body .pv-intro{margin:0 0 14px;font-size:13.5px;line-height:1.62;color:#4a4a55}
  .privacy-body h3{margin:18px 0 6px;font-size:14.5px;font-weight:800;color:#20202a}
  .privacy-body p{margin:0 0 10px;font-size:13px;line-height:1.62;color:#55555f}
  .privacy-body ul{margin:0 0 12px;padding-left:18px}
  .privacy-body li{margin:0 0 6px;font-size:13px;line-height:1.55;color:#55555f}
  .privacy-body b{color:#2c2c36}
  .privacy-body::-webkit-scrollbar{width:8px}
  .privacy-body::-webkit-scrollbar-thumb{background:#e2c0ca;border-radius:8px}
  .privacy-foot{flex:0 0 auto;display:flex;gap:10px;padding:14px 20px;border-top:1px solid #eee;background:#fff}
  .privacy-foot .btn{flex:1;padding:12px;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;transition:.14s}
  .pv-close{background:#f2f2f5;border:1px solid #e6e6ea;color:#55555f}
  .pv-close:hover{background:#e9e9ee}
  .pv-agree{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border:0;color:#fff}
  .pv-agree:hover{filter:brightness(1.06)}
  .pv-agree:active,.pv-close:active{transform:scale(.98)}

  /* ---- Announcements modal (marquee envelope button) ---- */
  .notice-overlay{z-index:320}
  .notice-modal{position:relative;width:100%;max-width:440px;max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;color:#0e0e10;box-shadow:0 30px 70px -20px rgba(0,0,0,.45)}
  .notice-head{flex:0 0 auto;padding:24px 26px 18px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff}
  .notice-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px;color:#fff}
  .notice-head p{margin:5px 0 0;font-size:12.5px;color:rgba(255,255,255,.82)}
  .notice-body{flex:1 1 auto;overflow-y:auto;padding:16px 22px 20px;-webkit-overflow-scrolling:touch}
  .notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .notice-list li{position:relative;padding:13px 15px 13px 38px;background:#fbf3f5;border:1px solid #f2dbe1;border-radius:12px;font-size:13.5px;line-height:1.5;font-weight:600;color:#3a2a2f}
  .notice-list li::before{content:"";position:absolute;left:15px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--brand,#F5003A)}
  .notice-list li.nt-empty{padding:18px;text-align:center;color:#9a8a8f;font-weight:500;background:transparent;border:0}
  .notice-list li.nt-empty::before{display:none}
  .notice-body::-webkit-scrollbar{width:8px}
  .notice-body::-webkit-scrollbar-thumb{background:#e2c0ca;border-radius:8px}

  .auth-submit{width:100%;margin-top:2px;padding:13px;border-radius:11px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));border:0;color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;transition:.14s}
  .auth-submit:hover{filter:brightness(1.06)}
  .auth-submit:active{transform:scale(.98)}

  .auth-switch{margin:18px 0 0;text-align:center;font-size:13px;color:#8b8b93}
  .auth-switch a{color:var(--brand,#F5003A);font-weight:700;cursor:pointer}
  .auth-switch a:hover{text-decoration:underline}

  .auth-error{display:none;margin:0 0 13px;padding:10px 12px;border-radius:9px;background:#fdeceb;color:#c0392b;font-size:12.5px;font-weight:600;line-height:1.4}
  .auth-error.show{display:block}
  .auth-submit[disabled]{opacity:.6;cursor:default}
  /* Dedicated game page (/play/<code>): the lobby content is hidden so the page is just
     navbar + sidebar + the game iframe (the #gplayer overlay fills the main area). */
  html.is-gamepage .content{display:none!important}
/* desktop centered top-nav (mobile keeps the bottom-nav) */
.topnav{position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;z-index:2;pointer-events:none}
.topnav .tn-item{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:66px;padding:7px 12px 6px;border-radius:14px;color:rgba(255,255,255,.72);font-size:11px;font-weight:600;text-decoration:none;transition:.15s;position:relative;-webkit-tap-highlight-color:transparent}
.topnav .tn-item svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.topnav .tn-item:hover{color:#fff;background:rgba(255,255,255,.14)}
.topnav .tn-item.on{color:#fff}
.topnav .tn-item.on::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:16px;height:3px;border-radius:3px;background:#fff}
.topnav .tn-spin{min-width:58px;padding-top:2px;cursor:pointer}
.topnav .tn-fab{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#ffe9a8,#f0b840);box-shadow:0 5px 14px -4px color-mix(in srgb,var(--brand-d,#8c0026) 55%,transparent),inset 0 0 0 2px rgba(255,255,255,.92)}
.topnav .tn-fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,71,.88),rgba(255,120,60,.3) 46%,rgba(255,205,71,0) 72%);z-index:-1;animation:tn-glow 1.8s ease-in-out infinite}
.topnav .tn-fab::after{content:"";position:absolute;inset:2px;border-radius:50%;z-index:4;pointer-events:none;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 42%)}
@keyframes tn-glow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.3}}
.topnav .tn-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid #fff;z-index:5;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.topnav .tn-wheel{position:absolute;inset:3px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;background:conic-gradient(from 0deg,#ff4d5e 0deg 43deg,#fff 43deg 47deg,#ffd257 47deg 88deg,#fff 88deg 92deg,#ff4d5e 92deg 133deg,#fff 133deg 137deg,#ffd257 137deg 178deg,#fff 178deg 182deg,#ff4d5e 182deg 223deg,#fff 223deg 227deg,#ffd257 227deg 268deg,#fff 268deg 272deg,#ff4d5e 272deg 313deg,#fff 313deg 317deg,#ffd257 317deg 358deg,#fff 358deg 360deg);animation:tn-spin 4.5s linear infinite}
.topnav .tn-go{position:relative;z-index:3;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 42% 32%,#fff6cf,#ffcf47 55%,#e0a11a);box-shadow:0 0 0 2px #fff,0 1px 2px rgba(0,0,0,.4)}
.topnav .tn-spin>span:last-child{margin-top:2px}
@keyframes tn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.topnav .tn-wheel,.topnav .tn-fab::before{animation:none}}
@media (max-width:980px){.topnav{display:none}}
/* ---- in-site game player: third-party games load in an iframe so the
       navbar (top) + sidebar (left) stay visible; in-house games keep their page ---- */
    .gplayer{position:fixed;top:68px;left:280px;right:0;bottom:0;z-index:15;background:#0a0810;display:none;flex-direction:column;transition:left .22s cubic-bezier(.4,0,.2,1)}
    .app.collapsed .gplayer{left:76px}
    .gplayer.open{display:flex}
    .gp-bar{flex:0 0 auto;height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25)}
    .gp-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:10px;padding:8px 13px;font-weight:700;font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.14s;user-select:none}
    .gp-btn:hover{background:rgba(255,255,255,.30)}
    .gp-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
    .gp-name{font-weight:800;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .gp-icon{width:38px;height:36px;padding:0;justify-content:center}
    .gp-wrap{flex:1 1 auto;position:relative;min-height:0;background:#0a0810}
    /* fullscreen toggle lives in the navbar (right of the balance), only while a game is open */
    .nav-fs{display:none;flex:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;border:0;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:background .14s}
    .nav-fs:hover{background:rgba(255,255,255,.30)}
    .nav-fs svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
    body.playing .nav-fs{display:inline-flex}
    .gp-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0a0810}
    .gp-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0810;z-index:1}
    .gp-loading.hide{display:none}
    .gp-spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.16);border-top-color:var(--brand,#F5003A);animation:gp-rot .8s linear infinite}
    @keyframes gp-rot{to{transform:rotate(360deg)}}
    body.playing{overflow:hidden}
    /* while a game is open, hide the lobby's floating mobile bars (category tabs + bottom-nav) so the
       game gets the full height below the top navbar */
    body.playing .cat-nav-bar{display:none !important}
    body.playing .bottom-nav{display:none !important}
    /* no public chat while a third-party game is open (/play/<code>) */
    body.playing #navPublicChat{display:none !important}
    body.playing .pubchat,body.playing .pc-reopen{display:none !important}
    /* hide the right-edge Chat + Support tabs while a game is open — they must never overlay the game */
    body.playing #quickTabs,body.playing .edge-tabs{display:none !important}
    @media (max-width:980px){ .gplayer{left:0;bottom:0} }
    /* iPhone Safari can't native-fullscreen an iframe → CSS pseudo-fullscreen (hide navbar, game
       fills the screen). Exit affordance = a down-arrow (∨) tab centred at the TOP; tap to bring the
       navbar back. (NOT a corner/side button.) */
    .gp-imm-exit{display:none;position:absolute;top:env(safe-area-inset-top,0px);left:50%;transform:translateX(-50%);z-index:6;
      width:56px;height:27px;border-radius:0 0 15px 15px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.26);border-top:0;
      align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
    .gp-imm-exit svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
    /* Fullscreen button = native device fullscreen ONLY (no in-page navbar hiding). If the browser
       can't natively fullscreen the element, the button does nothing rather than faking it. */
    /* TRUE device fullscreen (navbar ⛶ → Fullscreen API): #gplayer becomes the fullscreen
       element, so only its subtree renders and it fills the screen. Split per-prefix so an
       unknown pseudo doesn't drop the whole rule. NO in-game exit button here — Android Chrome
       exits fullscreen via the system swipe/back gesture (button would just cover the game). */
    .gplayer:fullscreen{top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:2147483647}
    .gplayer:-webkit-full-screen{top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:2147483647}
    .gplayer:fullscreen .gp-imm-exit{display:none}
    .gplayer:-webkit-full-screen .gp-imm-exit{display:none}
    /* iPhone CSS pseudo-fullscreen cover: hide the navbar, game fills the viewport, show the top ∨ tab. */
    body.gp-immersive .navbar{transform:translateY(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
    body.gp-immersive .gplayer{top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:9999}
    body.gp-immersive .gp-imm-exit{display:inline-flex}
    /* Some game clients have a FIXED portrait layout and don't reflow to landscape, so on a wide
       desktop frame they letterbox into a thin strip lost in a black void. For those games (flagged
       with .portrait) show the iframe as a centered phone on a themed backdrop instead. Responsive
       games (Aviator, Chicken Road, the slots, …) keep the full-bleed frame above. */
    .gplayer.portrait .gp-wrap{display:flex;align-items:center;justify-content:center;
      background:radial-gradient(120% 90% at 50% 0%,#241a33 0%,#140e20 55%,#0a0810 100%)}
    .gplayer.portrait .gp-frame{position:relative;inset:auto;height:100%;width:auto;
      aspect-ratio:9/19;max-width:min(100%,480px);max-height:100%;margin:0 auto;
      border-radius:16px;overflow:hidden;background:#0a0810;
      box-shadow:0 12px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
    @media (max-width:980px){
      .gplayer.portrait .gp-wrap{background:#0a0810}
      .gplayer.portrait .gp-frame{aspect-ratio:auto;height:100%;width:100%;max-width:100%;border-radius:0;box-shadow:none}
    }
.mcgate-ov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(8,6,12,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .3s}
  .mcgate-ov.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
  .mcgate{position:relative;width:100%;max-width:392px;background:#fff;border-radius:26px;padding:0 26px 26px;text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:translateY(26px) scale(.94);opacity:0;transition:transform .34s cubic-bezier(.2,.9,.28,1.25),opacity .26s ease}
  .mcgate-ov.open .mcgate{transform:none;opacity:1}
  .mcgate-cap{margin:0 -26px 18px;height:104px;background:linear-gradient(125deg,#ff0a44,var(--brand-d,#c8003f) 55%,#7d0022);position:relative;overflow:hidden;border-radius:26px 26px 0 0}
  .mcgate-cap::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 26%,rgba(255,255,255,.28),transparent 55%)}
  .mcgate-cap .spark{position:absolute;color:#fff;opacity:.85;font-size:12px;animation:mcgTw 2.4s ease-in-out infinite}
  .mcgate-cap .s1{left:20%;top:30%}.mcgate-cap .s2{right:22%;top:22%;animation-delay:.6s;font-size:16px}.mcgate-cap .s3{left:34%;top:64%;animation-delay:1.1s;font-size:9px}.mcgate-cap .s4{right:30%;bottom:20%;animation-delay:.35s}
  @keyframes mcgTw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.95;transform:scale(1.15)}}
  .mcgate-gift{position:absolute;left:50%;top:-80px;width:174px;z-index:4;pointer-events:none;transform:translateX(-50%);filter:drop-shadow(0 16px 18px color-mix(in srgb,var(--brand,#F5003A) 50%,transparent))}
  .mcgate-gift img{width:100%;display:block;animation:mcgFloat 3.4s ease-in-out infinite;transform-origin:50% 60%}
  @keyframes mcgFloat{0%,100%{transform:translateY(0) rotate(-3.5deg)}50%{transform:translateY(-14px) rotate(3.5deg)}}
  .mcgate-gift::after{content:"";position:absolute;left:50%;bottom:6px;width:96px;height:20px;transform:translateX(-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--brand-d,#8c0026) 40%,transparent),transparent 70%);z-index:-1;animation:mcgShadow 3.4s ease-in-out infinite}
  @keyframes mcgShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.55}50%{transform:translateX(-50%) scale(.8);opacity:.3}}
  .mcgate-x{position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.2);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
  .mcgate h3{margin:26px 0 8px;font-size:20px;font-weight:800;color:#1a1a24;letter-spacing:-.3px}
  .mcgate p{margin:0 auto 20px;font-size:13.5px;line-height:1.6;color:#66666f;max-width:300px}
  .mcgate-btn{display:block;width:100%;padding:14px;border-radius:14px;border:0;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
  .mcgate-btn.primary{background:linear-gradient(120deg,var(--brand,#F5003A),var(--brand-d,#8c0026));color:#fff;box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand,#F5003A) 75%,transparent)}
  .mcgate-btn.primary:hover{filter:brightness(1.06)}
  .mcgate-btn.ghost{margin-top:10px;background:transparent;color:#8a8a95;font-weight:700;font-size:13px}
  .mcgate-btn.ghost:hover{color:var(--brand-d,#c8003f)}
  .mcgate-btn:active{transform:scale(.98)}
  @media(max-width:560px){
    .mcgate-ov{align-items:flex-end}
    .mcgate{max-width:100%;border-radius:26px 26px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));transform:translateY(105%);opacity:1;transition:transform .42s cubic-bezier(.16,1,.3,1)}
    .mcgate-ov.open .mcgate{transform:translateY(0)}
  }
  @media(prefers-reduced-motion:reduce){.mcgate-cap .spark,.mcgate-gift img,.mcgate-gift::after{animation:none}}
html,body{background:transparent !important}
  .main-area,.content,.page,.info-wrap{background:transparent !important}
  #asciiBg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 90% at 12% -8%,color-mix(in srgb,var(--brand,#F5003A) 9%,transparent),transparent 55%),radial-gradient(115% 85% at 106% 16%,rgba(255,166,52,.08),transparent 52%),radial-gradient(130% 105% at 50% 120%,color-mix(in srgb,var(--brand,#F5003A) 6%,transparent),transparent 58%),#fff;contain:layout paint style}
#asciiBg::before{content:"";position:absolute;inset:-16%;background-image:radial-gradient(rgba(205,80,100,.15) 1px,transparent 1.7px);background-size:21px 21px;-webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 38%,#000 36%,transparent 100%);mask-image:radial-gradient(ellipse 80% 62% at 50% 38%,#000 36%,transparent 100%);animation:asciiDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes asciiDrift{from{transform:translate3d(-1.1%,0,0)}to{transform:translate3d(1.1%,-2.3%,0)}}
@media (prefers-reduced-motion:reduce){#asciiBg::before{animation:none}}

  /* Tier 3 — skip rendering/layout of below-the-fold sections until scrolled near.
     content-visibility:auto only skips OFF-screen elements, so the hero and the first
     game rows still render normally. contain-intrinsic-size reserves an estimated height
     (auto = remember the real size after first render) so the scrollbar doesn't jump. */
  .sec{content-visibility:auto;contain-intrinsic-size:auto 340px}
  .livebets{contain-intrinsic-size:auto 440px}
  .faq-sec{contain-intrinsic-size:auto 1000px}