:root{--gold:#D4A847;--cyan:#D4A847;--orange:#D4A847;--green:#8BC48A;--purple:#9B8EC4;--pink:#B84E3A;--bg:#1A1714}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Inter',sans-serif;color:#fff}
canvas{display:block}
#hud{position:fixed;top:0;left:0;right:0;z-index:10;pointer-events:none;padding:32px 14px 14px 14px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.hg{display:flex;gap:8px;pointer-events:auto}
.chip{background:rgba(26,23,20,.88);backdrop-filter:blur(10px);border:1px solid rgba(212,168,71,.28);padding:8px 14px;font-family:'Inter',sans-serif;font-size:14px;letter-spacing:1px;color:var(--gold);text-shadow:none}
.chip.mono{color:#fff;text-shadow:none;border-color:rgba(255,255,255,.14)}
.chip.zone{color:var(--gold);border-color:rgba(212,168,71,.35);text-shadow:0 0 8px rgba(212,168,71,.4)}
.chip.gg{color:var(--gold);border-color:rgba(245,200,66,.5);background:rgba(245,200,66,.06);text-shadow:0 0 8px rgba(245,200,66,.5);font-weight:bold}
.chip.sol{color:#8BC48A;border-color:rgba(139,196,138,.35);background:rgba(139,196,138,.06);font-weight:bold}
.chip.gg.loading,.chip.sol.loading{opacity:.5}
#devBanner{position:fixed;top:0;left:0;right:0;z-index:1000;padding:6px 14px;background:linear-gradient(90deg,rgba(255,45,120,.18),rgba(255,45,120,.08),rgba(255,45,120,.18));border-bottom:2px dashed rgba(255,45,120,.55);color:#ff6fa1;font-family:'VT323',monospace;font-size:13px;letter-spacing:3px;text-align:center;pointer-events:none;text-shadow:0 0 8px rgba(255,45,120,.5)}
body.dev #hud{padding-top:44px}
.chip.mine{color:var(--green);border-color:rgba(0,255,159,.4)}
.chip.mine.eligible{animation:pulseG 2s infinite}
.chip.perf{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.12);font-size:13px;padding:6px 10px}
.chip.perf.low{color:var(--orange);border-color:rgba(255,100,50,.4)}
@keyframes pulseG{50%{box-shadow:0 0 18px rgba(0,255,159,.4)}}
.btn{cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.05em;background:rgba(26,23,20,.9);backdrop-filter:blur(10px);border:1px solid rgba(212,168,71,.3);color:var(--gold);padding:8px 14px}
.btn:hover{border-color:var(--gold);background:rgba(245,200,66,.12)}
#ham{font-size:22px;padding:4px 12px}
.sp{flex:1}
#menu{position:fixed;top:64px;left:14px;z-index:11;background:rgba(26,23,20,.96);backdrop-filter:blur(16px);border:1px solid rgba(212,168,71,.3);padding:12px;display:none;min-width:240px}
#menu.on{display:block}
.mtl{font-weight:900;font-size:10px;letter-spacing:3px;color:var(--gold);padding:4px 8px 10px;border-bottom:1px solid rgba(245,200,66,.15);margin-bottom:6px}
.mi{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:400;letter-spacing:0.04em;color:rgba(244,239,230,.65);border-left:2px solid transparent}
.mi:hover{color:#fff;background:rgba(255,255,255,.04);border-left-color:var(--a,var(--gold))}
.mi .d{width:8px;height:8px;border-radius:50%;background:var(--a,var(--gold));box-shadow:0 0 10px var(--a,var(--gold))}
.mdv{height:1px;background:rgba(255,255,255,.08);margin:8px 0}
.qr{display:flex;gap:4px;padding:8px}
.qb{flex:1;padding:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(244,239,230,.55);font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.06em;cursor:pointer}
.qb.on{background:rgba(245,200,66,.15);border-color:var(--gold);color:var(--gold)}
#prompt{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:10;background:rgba(26,23,20,.92);backdrop-filter:blur(10px);border:1px solid var(--gold);padding:10px 22px;font-family:'Inter',sans-serif;font-size:14px;letter-spacing:0.08em;display:none}
#hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:10;font-family:'Inter',sans-serif;font-size:11px;font-weight:400;color:rgba(244,239,230,.28);letter-spacing:0.04em;pointer-events:none}
#hint kbd{display:inline-block;padding:1px 6px;border:1px solid rgba(255,255,255,.22);margin:0 2px;font-size:11px}
#chat{position:fixed;top:60px;right:14px;bottom:200px;width:320px;z-index:12;background:rgba(26,23,20,.97);backdrop-filter:blur(18px);border:1px solid rgba(212,168,71,.3);display:none;flex-direction:column}
#chat.on{display:flex}
.ch{padding:12px 14px;border-bottom:1px solid rgba(245,200,66,.15);font-weight:700;font-size:11px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:8px}
.ch .lv{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}
.ch .x{margin-left:auto;background:none;border:none;color:rgba(244,239,230,.4);cursor:pointer;font-family:'Inter',sans-serif;font-size:16px}
#clog{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cm{font-family:'Inter',sans-serif;font-size:12px;line-height:1.55}
.cm .n{font-weight:bold;margin-right:6px}
.cm .t{color:rgba(255,255,255,.88)}
.cm .tm{color:rgba(255,255,255,.22);font-size:11px;margin-left:4px}
.cm.sys .t{color:rgba(244,239,230,.55);font-style:italic}
.crow{display:flex;border-top:1px solid rgba(245,200,66,.15);padding:8px}
#ci{flex:1;background:rgba(26,23,20,0.8);border:1px solid rgba(212,168,71,0.2);color:rgba(244,239,230,0.9);padding:8px 10px;outline:none;font-family:'Inter',sans-serif;font-size:13px;transition:border-color 0.15s}
#ci:focus{border-color:var(--gold)}
#ci::placeholder{color:rgba(244,239,230,0.25)}
#cs{background:var(--gold);border:none;cursor:pointer;padding:0 16px;color:#1A1714;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;margin-left:6px}
#modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,6,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
#modal.on{display:flex}
.mbox{background:#1A1714;border:1px solid rgba(212,168,71,.35);width:min(840px,100%);max-height:88vh;overflow-y:auto}
.mhd{padding:16px 20px;border-bottom:1px solid rgba(212,168,71,.15);display:flex;align-items:center;gap:14px;position:sticky;top:0;background:#1A1714;z-index:1}
.mhd h2{font-family:'Fraunces',serif;font-weight:600;font-size:16px;letter-spacing:0.01em;color:var(--gold);flex:1}
.mx{background:none;border:1px solid rgba(212,168,71,.25);cursor:pointer;color:rgba(244,239,230,.45);width:30px;height:30px;font-family:'Inter',sans-serif;font-size:16px}
.mbd{padding:24px}
.sub{font-family:'Inter',sans-serif;font-size:12px;color:rgba(244,239,230,.5);margin-bottom:20px;letter-spacing:0.02em;line-height:1.6}
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cd{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);padding:16px;cursor:pointer;position:relative}
.cd:hover{border-color:var(--a,var(--gold))}
.cd::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a,var(--gold));opacity:.5}
.cd .em{font-size:30px;margin-bottom:8px}
.cd .nm{font-weight:700;font-size:11px;letter-spacing:2px;color:var(--a,var(--gold));margin-bottom:8px}
.cd .ds{font-family:'Inter',sans-serif;font-size:12px;color:rgba(244,239,230,.5);line-height:1.55;margin-bottom:12px}
.cd .tg{display:inline-block;font-family:'Inter',sans-serif;font-size:10px;font-weight:500;padding:2px 8px;border:1px solid var(--a,var(--gold));color:var(--a,var(--gold));letter-spacing:0.1em;text-transform:uppercase}
.cd.lv .tg{background:rgba(0,255,159,.12);border-color:var(--green);color:var(--green)}
.mst{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.msb{border:1px solid rgba(255,255,255,.08);padding:16px;text-align:center;background:rgba(255,255,255,.02)}
.msb .v{font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--gold)}
.msb .l{font-weight:700;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.4);margin-top:6px}
.mprg{height:6px;background:rgba(255,255,255,.08);margin:20px 0;overflow:hidden;border-radius:3px}
.mprg .f{height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}
.mbtn{width:100%;padding:16px;background:var(--green);color:#000;border:none;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.1em;cursor:pointer;margin-top:10px}
.mbtn.cl{background:var(--gold)}
.mbtn:disabled{background:#2a2a3a;color:#555;cursor:not-allowed}
.mg{display:flex;align-items:center;gap:10px;padding:14px;background:rgba(184,78,58,.06);border:1px solid rgba(184,78,58,.22);margin-bottom:14px;font-family:'Inter',sans-serif;font-size:13px;color:rgba(244,200,190,.85);line-height:1.5}
.mg.ok{background:rgba(0,255,159,.06);border-color:rgba(0,255,159,.25);color:rgba(160,255,220,.9)}
#frame{position:fixed;inset:0;z-index:30;background:#000;display:none}
#frame.on{display:block}
#frame iframe{width:100%;height:100%;border:0}
#frame .fc{position:absolute;top:14px;right:14px;z-index:2;background:rgba(0,0,0,.8);border:1px solid var(--gold);color:var(--gold);padding:8px 14px;cursor:pointer;font-weight:700;font-size:11px;letter-spacing:2px}
#frame .fw{position:absolute;bottom:14px;left:14px;z-index:2;background:rgba(26,23,20,.88);border:1px solid rgba(212,168,71,.2);color:rgba(244,239,230,.6);padding:8px 12px;font-family:'Inter',sans-serif;font-size:12px;max-width:420px;line-height:1.5}
#fade{position:fixed;inset:0;background:#000;z-index:15;pointer-events:none;opacity:0;transition:opacity .3s}
/* Joystick (mobile) — left side touch zone, drag from any point to control movement */
#joystickZone{position:fixed;bottom:0;left:0;width:50vw;height:60vh;z-index:11;display:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#joyBase{position:fixed;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle, rgba(10,10,22,0.55) 60%, rgba(10,10,22,0.25));border:2px solid rgba(245,200,66,0.5);pointer-events:none;display:none;box-shadow:0 0 24px rgba(245,200,66,0.25);transform:translate(-50%,-50%)}
#joyKnob{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle, rgba(245,200,66,0.95), rgba(245,200,66,0.7));box-shadow:0 0 18px rgba(245,200,66,0.7),inset 0 0 12px rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:none}

#mobActions{position:fixed;bottom:14px;right:14px;z-index:10;display:none;flex-direction:column;gap:8px;align-items:flex-end}
.mobActBtn{width:64px;height:64px;border-radius:50%;border:none;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.06em;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
.mobActBtn:active{transform:scale(0.92)}

/* =======================================================
   MOBILE REDESIGN — portrait-first, Stake-inspired
   ======================================================= */
@media (max-width: 768px) {
  /* Show joystick + mobile action pad */
  #joystickZone{display:block !important}
  #mobActions{display:flex !important}

  /* Hide desktop-only cruft */
  #mmap{display:none !important}
  #assets{display:none !important}
  #controlsHint{display:none !important}

  /* ── Social ticker: hidden on mobile (too much visual noise) ──
     Could be re-added as a small icon that expands on tap */
  #socialTicker{display:none !important}
  /* Hide dev-mode top banner on mobile (the #devBanner div AND any ::before) */
  body.dev::before{display:none !important}
  #devBanner{display:none !important}
  /* Hide DEV_TESTER label chip — user knows they're in dev mode */
  #hud .chip:not(.sol):not(.gg):not(.mono):not(.zone):not(.mine):not(.perf){display:none !important}
  body.dev #hud{padding-top:calc(env(safe-area-inset-top,0px) + 4px) !important; height:calc(env(safe-area-inset-top,0px) + 40px) !important}

  /* ── Top bar: tiny single-row strip ──
     ~44px tall, balances inline with profile name, everything tiny */
  #hud{
    padding:calc(env(safe-area-inset-top,0px) + 4px) 8px 0 8px !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    height:calc(env(safe-area-inset-top,0px) + 40px) !important;
    background:linear-gradient(180deg,rgba(26,23,20,0.92),rgba(26,23,20,0.75));
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    align-items:center !important;
  }
  body.dev #hud{padding-top:calc(env(safe-area-inset-top,0px) + 22px) !important; height:calc(env(safe-area-inset-top,0px) + 58px) !important}

  /* Hide the dev banner text on mobile, just keep the bar */
  body.dev #hud::before{font-size:9px !important; letter-spacing:1.5px !important; padding:3px 0 !important}

  #hudLogo{width:26px !important; height:26px !important; flex-shrink:0}
  #ham{padding:4px 8px !important; font-size:14px !important; min-height:28px !important}

  /* HUD groups: compact, inline */
  #hud .hg{gap:6px !important; flex-wrap:nowrap !important}

  /* ── Chips (balances + profile): tiny inline pills, scrollable if needed ── */
  #hud .chip{
    font-size:9px !important;
    letter-spacing:0.3px !important;
    padding:3px 6px !important;
    border-radius:3px !important;
    white-space:nowrap;
    min-height:22px !important;
    display:inline-flex !important;
    align-items:center;
    gap:3px;
    flex-shrink:0;
  }
  #hud .chip.sol, #hud .chip.gg, #hud .chip.mono{
    font-size:9px !important;
    padding:3px 5px !important;
  }
  /* Allow the center balance group to horizontally scroll if content is too wide */
  #hud .hg:nth-child(2){
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    min-width:0;
  }
  #hud .hg:nth-child(2)::-webkit-scrollbar{display:none}
  /* Hide perf, zone, mine chips on mobile — noise */
  #hud .chip.perf, #hud .chip.zone, #hud .chip.mine{display:none !important}

  /* Chat button: icon only, no label */
  #hud button.btn[onclick*="toggleChat"]{
    padding:4px 8px !important;
    font-size:14px !important;
    min-width:32px !important;
  }
  #hud button.btn[onclick*="toggleChat"] span{display:none !important}

  /* Cosmetic badge: hide on mobile — visible inside Wardrobe/Me tab instead */
  #cosmeticBadge{display:none !important}

  /* Side button column — hidden on mobile, moves to bottom nav + FAB */
  #hudColumn{display:none !important}
  body > div[style*="top:80px"][style*="left:14px"]{display:none !important}
  #friendsBtn, #questsBtn, #soundBtn{display:none !important}

  /* ── Modals: full bottom sheet from bottom up ── */
  #modal{align-items:flex-end !important}
  #modal .mod{
    max-width:100vw !important;
    width:100vw !important;
    max-height:90vh !important;
    padding:20px 16px calc(env(safe-area-inset-bottom,0px) + 80px) 16px !important;
    border-radius:20px 20px 0 0 !important;
    border-bottom:none !important;
    animation:sheetSlideUp 0.25s ease-out;
  }
  #modal .mod::before{
    content:'';
    position:absolute;
    top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:4px;
    background:rgba(255,255,255,0.25);
    border-radius:2px;
  }
  @keyframes sheetSlideUp{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
  #mtitle{font-size:14px !important}
  .gr{grid-template-columns:1fr !important}

  /* ── Chat: bottom sheet drawer ── */
  #chat{
    width:100vw !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    max-height:60vh !important;
    border-radius:20px 20px 0 0 !important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 72px) !important;
  }

  /* ── Boxing HUD: compact ── */
  #boxHUD{padding:6px 12px !important; gap:10px !important; max-width:96vw; font-size:11px !important}
  #boxHUD > div{min-width:auto !important}
  #boxCeremony canvas{max-width:80vw !important}

  /* ── Bottom navigation bar ── */
  #mobileBottomNav{
    display:flex !important;
    position:fixed;
    bottom:0; left:0; right:0;
    height:calc(env(safe-area-inset-bottom,0px) + 60px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:linear-gradient(0deg,rgba(26,23,20,0.98),rgba(26,23,20,0.88));
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,0.08);
    z-index:15;
    justify-content:space-around;
    align-items:center;
  }
  #mobileBottomNav .bn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:8px 4px;
    background:transparent;
    border:none;
    border-top:2px solid transparent;
    color:rgba(244,239,230,0.45);
    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:500;
    letter-spacing:0.08em;
    cursor:pointer;
    transition:color 0.15s,border-color 0.15s;
    min-height:44px;
  }
  #mobileBottomNav .bn .bn-icon{font-size:18px}
  #mobileBottomNav .bn:active{color:var(--gold)}
  #mobileBottomNav .bn.active{color:var(--gold);border-top-color:var(--gold)}

  /* FAB removed — JUMP/ACT live in #mobActions for two-thumb play */
  #mobileFAB{display:none !important}

  /* Mobile actions: JUMP + ACT as separate two-thumb buttons, right side.
     Sits above the bottom nav. Friends/Quests buttons hidden — they live in the Me menu. */
  #mobActions{
    display:flex !important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 76px) !important;
    right:14px !important;
    gap:10px !important;
    flex-direction:column !important;
    z-index:14;
  }
  #mobActions .mobActBtn{
    width:60px !important;
    height:60px !important;
    font-size:12px !important;
  }
  /* Hide the old friends/quests pills on mobile — they're in the Me menu now */
  #mobActions button:nth-child(3),
  #mobActions button:nth-child(4){
    display:none !important;
  }

  /* Joystick zone — keep left-bottom but respect safe area */
  #joystickZone{
    bottom:calc(env(safe-area-inset-bottom,0px) + 60px) !important;
    left:0 !important;
    width:50% !important;
    height:40% !important;
  }

  /* Zone entry prompt: smaller, above bottom nav + action buttons */
  #prompt{
    bottom:calc(env(safe-area-inset-bottom,0px) + 150px) !important;
    font-size:12px !important;
    letter-spacing:0.05em !important;
    padding:8px 14px !important;
  }

  /* PWA install banner */
  #pwaPrompt{
    left:12px !important; right:12px !important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 72px) !important;
    max-width:none !important;
  }

  /* ── Loot Vault: stack vertically on mobile ── */
  /* The 2-column grid (crate | drop rates) becomes single-column */
  .mod div[style*="grid-template-columns:1fr 1.2fr"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  /* Shrink the giant 96px crate emoji */
  .mod div[style*="font-size:96px"]{font-size:56px !important; margin-bottom:4px !important}
  /* Shrink the "KO CRATE" title */
  .mod div[style*="font-size:24px"][style*="letter-spacing:3px"]{font-size:18px !important}
  /* Inventory grid: 3 cols → still fine, just tighter */
  /* COST / BURNED row: tighter */
  .mod div[style*="COST"]{font-size:8px !important}

  /* ── Welcome modal: compact card, not full-height ── */
  /* When narrow flag is set, shrink the modal container itself */
  #modal.narrow .mod{
    max-width:340px !important;
    margin:auto !important;
    height:auto !important;
    max-height:none !important;
    border-radius:10px !important;
    padding:20px !important;
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
  }
  #modal.narrow{
    align-items:center !important;
    justify-content:center !important;
    display:flex !important;
  }

  /* ══════════════════════════════════════════════════════
     ARENA + CASINO: Stake-style 2-column compact tile grid
     Each tile is self-contained — illustration + name + small meta.
     Tapping the tile launches the game directly (no details panel).
     ══════════════════════════════════════════════════════ */

  /* ── Shared grid layout (Arena + Casino) ── */
  .acGrid, .csGrid{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
    margin-top:4px !important;
  }

  /* ── Arena tiles ── */
  .acGame{
    border-radius:10px !important;
    overflow:hidden;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  .acGame.live{border:none !important; box-shadow:none !important}
  .acGame:hover{transform:none !important; box-shadow:none !important}

  /* The tile itself: square illustration area */
  .acImg{
    width:100% !important;
    aspect-ratio:1 !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    position:relative;
    overflow:hidden;
  }
  .acImg::after{display:none !important}

  /* Status tag: top-left, smaller */
  .acTag{
    top:6px !important; left:6px !important; right:auto !important;
    font-size:8px !important;
    letter-spacing:1px !important;
    padding:2px 6px !important;
  }

  /* Players count: bottom-left, small green dot */
  .acPlayers{
    top:auto !important; left:6px !important; bottom:6px !important;
    font-size:9px !important;
    letter-spacing:0.5px !important;
    padding:2px 5px !important;
    background:rgba(0,0,0,0.55) !important;
  }

  /* Hide the "PLAY ▶" overlay — whole tile is tappable */
  .acPlay{display:none !important}

  /* Title + description below the tile */
  .acMeta{padding:6px 2px 0 2px !important}
  .acTitleRow{margin-bottom:2px !important}
  .acTitle{font-size:11px !important; letter-spacing:1.5px !important}
  .acDesc{font-size:10px !important; line-height:1.3 !important}

  /* Hide the ▼ info toggle and entire details panel on mobile — tap = play */
  .acInfo{display:none !important}
  .acDetails{display:none !important}

  /* ── Casino tiles (same rules, .cs prefix) ── */
  .csGame{
    border-radius:10px !important;
    overflow:hidden;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  .csGame:hover{transform:none !important; box-shadow:none !important}

  .csIconBg{
    width:100% !important;
    aspect-ratio:1 !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* Gradient background per-game for visual identity (uses --c from inline style) */
  .csIconBg{
    background:linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, #0a0a14), #0a0a14) !important;
  }
  .csIcon{font-size:54px !important}

  .csTopRight{
    top:6px !important; right:6px !important;
    font-size:8px !important;
    letter-spacing:0.5px !important;
    padding:2px 5px !important;
  }
  .csTag{
    top:6px !important; left:6px !important;
    font-size:8px !important;
    letter-spacing:1px !important;
    padding:2px 5px !important;
  }

  .csMeta{padding:6px 2px 0 2px !important}
  .csTitleRow{margin-bottom:2px !important}
  .csTitle{font-size:11px !important; letter-spacing:1.5px !important}
  .csDesc{display:none !important}

  /* Footer row with "MAX + PLAY" becomes a single compact strip */
  .csFooter{
    padding:4px 4px !important;
    font-size:9px !important;
    margin-top:3px !important;
  }
  .csMax{font-size:9px !important}
  .csCta{font-size:9px !important}

  /* Hide casino details + info button on mobile */
  .csInfo{display:none !important}
  .csDetails{display:none !important}

  /* The "play-to-earn" info box at the bottom of Arena — make it compact */
  .mod > div[style*="PLAY-TO-EARN"]{font-size:10px !important; padding:8px 10px !important}

  /* Arena .acGame.live glow - subtle on mobile so tiles don't all look neon */
  .acGame.live .acImg{box-shadow:0 0 0 1px rgba(0,255,159,0.35) !important}
  .acGame.live .acTitle{text-shadow:none !important}

  /* ── Side menu (hamburger) on mobile: full-height slide-in drawer ── */
  #menu{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100vh !important;
    padding:calc(env(safe-area-inset-top,0px) + 50px) 16px calc(env(safe-area-inset-bottom,0px) + 80px) 16px !important;
    overflow-y:auto !important;
    background:linear-gradient(180deg,rgba(26,23,20,0.98),rgba(26,23,20,0.95)) !important;
    backdrop-filter:blur(14px);
    transform:translateX(-100%);
    transition:transform 0.25s ease-out;
    z-index:16 !important;
  }
  #menu.on{transform:translateX(0) !important}
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
  #mobileBottomNav, #mobileFAB, #pwaPrompt{display:none !important}
}
#mmap{position:fixed;bottom:18px;right:18px;z-index:10;width:140px;height:140px;background:rgba(26,23,20,.92);backdrop-filter:blur(8px);border:1px solid rgba(212,168,71,.28);border-radius:6px}
/* Asset status indicator */
#assets{position:fixed;top:60px;left:14px;z-index:9;font-family:'Inter',sans-serif;font-size:11px;color:rgba(244,239,230,.35);letter-spacing:0.02em;line-height:1.6}
#assets .t{color:var(--gold);font-weight:bold;margin-bottom:4px}
#assets .r{color:rgba(255,100,100,.7)}
#assets .o{color:var(--green)}
/* Social proof ticker — top of screen scrolling feed */
#socialTicker{position:fixed;top:0;left:0;right:0;height:24px;background:linear-gradient(180deg,rgba(26,23,20,0.95),rgba(26,23,20,0.85));border-bottom:1px solid rgba(212,168,71,0.18);overflow:hidden;z-index:8;pointer-events:none}
#socialTicker::before{content:'LIVE';position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(184,78,58,0.95),rgba(184,78,58,0.7));color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:10px;letter-spacing:3px;display:flex;align-items:center;padding:0 12px;z-index:2;border-right:1px solid rgba(255,255,255,0.2);box-shadow:0 0 14px rgba(184,78,58,0.5);animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{50%{opacity:0.55}}
#socialTickerInner{position:absolute;left:60px;top:0;height:100%;display:flex;align-items:center;gap:48px;white-space:nowrap;animation:tickerRoll 90s linear infinite;will-change:transform}
@keyframes tickerRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.se{font-family:'Inter',sans-serif;font-size:11px;font-weight:400;color:rgba(244,239,230,0.65);letter-spacing:0.03em;display:inline-flex;align-items:center;gap:8px}
.se .se-amt{color:var(--gold);font-weight:bold}
.se .se-name{font-weight:bold}
.se .se-icon{font-size:14px}

/* Push HUD down so ticker doesn't overlap */
#hud{padding-top:42px !important}
#assets{top:84px !important}

#assets{position:fixed;top:60px;left:14px;z-index:9;font-family:'Inter',sans-serif;font-size:11px;color:rgba(244,239,230,.35);letter-spacing:0.02em;line-height:1.6;pointer-events:none}
#assets .t{color:var(--gold);font-weight:bold;margin-bottom:4px}
#assets .r{color:rgba(255,100,100,.7)}
#assets .o{color:var(--green)}

/* KO Brand — HUD logo */
#hudLogo{width:36px;height:36px;flex-shrink:0}
#hudLogo img{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(255,255,255,0.6))}

/* Loading splash */
#splash{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at center, #1A1714 0%, #0F0D0B 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s;overflow:hidden}
#splash.hide{opacity:0;pointer-events:none}
#splash::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(212,168,71,0.045) 1px, transparent 1px),linear-gradient(90deg, rgba(212,168,71,0.045) 1px, transparent 1px);background-size:40px 40px;animation:gridScroll 8s linear infinite;z-index:0}
@keyframes gridScroll{to{background-position:40px 40px}}
#splashVid{width:min(80vw, 80vh);height:min(80vw, 80vh);object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 40px rgba(212,168,71,0.3)) drop-shadow(0 0 80px rgba(184,78,58,0.18))}
/* Fallback if video fails */
#splashFallback{display:none;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2}
#splash.fallback #splashVid{display:none}
#splash.fallback #splashFallback{display:flex}
#splashLogo{width:min(260px, 36vw);height:min(260px, 36vw);animation:logoIn 1.2s cubic-bezier(.34,1.56,.64,1) both}
#splashLogo img{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(212,168,71,0.5)) drop-shadow(0 0 60px rgba(184,78,58,0.25))}
@keyframes logoIn{0%{opacity:0;transform:scale(0.3) rotate(-15deg)}60%{opacity:1;transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
#splashTitle{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(40px, 7vw, 84px);letter-spacing:0.04em;margin-top:28px;background:linear-gradient(180deg, #F4EFE6 0%, #D4A847 55%, #B84E3A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fadeSlide 1s .6s both}
#splashSub{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(11px, 1.8vw, 14px);letter-spacing:0.22em;color:rgba(212,168,71,0.65);text-transform:uppercase;margin-top:10px;animation:fadeSlide 1s .9s both}
#splashBar{position:absolute;bottom:72px;width:min(320px,60vw);height:3px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);z-index:3;overflow:hidden}
#splashBar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--red), var(--gold), var(--gold));animation:barSweep 1.8s ease-in-out infinite;width:40%;left:-40%}
@keyframes barSweep{to{left:100%}}
#splashStatus{position:absolute;bottom:44px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,239,230,0.4);min-height:16px;z-index:3}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes questPulse{0%,100%{box-shadow:0 0 14px rgba(245,200,66,0.45)}50%{box-shadow:0 0 22px rgba(245,200,66,0.75)}}

/* Box opening ceremony animations */
@keyframes cereGridSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes cereBurst{0%{opacity:0;transform:scale(0.2) rotate(0deg)}40%{opacity:1}100%{opacity:0.4;transform:scale(2.5) rotate(180deg)}}
@keyframes cereBoxIn{0%{opacity:0;transform:scale(0.2) translateY(-60px)}60%{opacity:1;transform:scale(1.15) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes cereBoxShake{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.05) rotate(-6deg)}75%{transform:scale(1.05) rotate(6deg)}}
@keyframes cereBoxOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@keyframes cereReveal{0%{opacity:0;transform:scale(0.4) translateY(20px)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes cereTextIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Box element disappears at 1.6s as reveal pops in at 1.8s */
#cereBox{animation:cereBoxIn 0.6s cubic-bezier(.34,1.56,.64,1) both, cereBoxShake 0.4s ease-in-out 0.8s 2, cereBoxOut 0.3s ease-in 1.6s forwards !important}
#splashSkip{position:absolute;bottom:20px;right:20px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,239,230,0.28);cursor:pointer;z-index:3;background:none;border:1px solid rgba(212,168,71,0.18);padding:6px 14px;transition:color 0.15s,border-color 0.15s}
#splashSkip:hover{color:#fff;border-color:#fff}