@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
    
    * { box-sizing: border-box; }

    html, body {
      height: 100%;
      height: 100dvh;
      height: var(--app-h, 100dvh);
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      font-family: 'Outfit', sans-serif;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-x pan-y;
      display: flex;
      flex-direction: column;
      /* Respect notches / home-indicator areas when wrapped as a native app */
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      /* The home bar (iPhones without a Home button): stay clear of it, but
         its full 34px was wasted under the hand. */
      padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 12px));
    }
    /* Installed iPhone app (black-translucent status bar): the page starts
       under the clock/battery, so the header grows by the notch height and
       everything pinned to the top moves down with it. 0 everywhere else. */
    :root { --safe-top: env(safe-area-inset-top, 0px); }
    body > header.h-11 { height: calc(2.75rem + var(--safe-top)); padding-top: calc(0.25rem + var(--safe-top)); }
    .fixed.inset-0.p-4 { padding-top: calc(1rem + var(--safe-top)); }
    .fixed.inset-0.p-3 { padding-top: calc(0.75rem + var(--safe-top)); }
    #actionBanner { top: calc(0.75rem + var(--safe-top)); }
    #connectionStatusBanner { top: calc(3rem + var(--safe-top)); }
    /* The table fills what's left under the (taller, on iPhone) header. */
    main#gameTable { height: calc(var(--app-h, 100dvh) - 2.75rem - var(--safe-top)); max-height: calc(var(--app-h, 100dvh) - 2.75rem - var(--safe-top)); }
    /* Play direction: a circle the size of the Card Powers button, in the
       left-hand column with the Play Matrix button, level with the middle of
       the Deck (placed by positionDirectionBadge). */
    #gameDirectionBadge { position: absolute; z-index: 55; margin: 0; left: 0; top: 0; padding: 0;
      width: clamp(26px,7.5vw,34px); height: clamp(26px,7.5vw,34px); border-radius: 9999px; border-width: 2px;
      display: flex; align-items: center; justify-content: center; font-size: clamp(13px,4vw,17px); line-height: 1; }
    #gameDirectionBadge.hidden { display: none; }
    #gameDirectionBadge .dir-arrow { width: 64%; height: 64%; display: block; flex-shrink: 0; }
    /* Each play direction has its own colour: clockwise gold, anticlockwise cyan. */
    #gameDirectionBadge { transition: color .35s var(--ease-soft), border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .35s var(--ease-soft); }
    #gameDirectionBadge[data-direction="cw"] { color: #fcd34d; border-color: #f59e0b; background-color: rgba(69,26,3,.9); box-shadow: 0 0 10px rgba(245,158,11,.45); }
    #gameDirectionBadge[data-direction="ccw"] { color: #67e8f9; border-color: #06b6d4; background-color: rgba(8,51,68,.9); box-shadow: 0 0 10px rgba(6,182,212,.5); }

    input, textarea { user-select: auto !important; -webkit-user-select: auto !important; }

    /* Floating clone of a card that follows the pointer/finger during a drag */
    .drag-ghost {
      position: fixed;
      pointer-events: none !important;
      z-index: 9999;
      opacity: 0.92;
      transform: scale(1.08) rotate(-3deg);
      box-shadow: 0 14px 34px rgba(0,0,0,0.75), 0 0 0 2px rgba(245,158,11,0.6);
      transition: none !important;
      will-change: left, top;
    }

    .guide-font { font-family: 'Plus Jakarta Sans', sans-serif; }

    /* One scrollbar style everywhere: a slim rounded slate thumb on a clear
       track that turns amber on hover (Chromium/Safari), and the matching
       thin slate bar in Firefox. */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: rgba(245, 158, 11, 0.7); }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    @supports not selector(::-webkit-scrollbar) {
      * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.4) transparent; }
    }

    /* Horizontal strips (Shop/Custom tabs, Shop filters): mouse wheel and
       drag scroll them, and on mouse devices ‹ › buttons appear at an edge
       that has more to show. */
    .hscroll-wrap { position: relative; }
    .hscroll-wrap.is-sticky { position: sticky; top: 0; z-index: 25; background: #020617; }
    .hscroll { cursor: grab; scrollbar-width: none; }
    .hscroll::-webkit-scrollbar { display: none; }
    .hscroll.hscroll-dragging { cursor: grabbing; user-select: none; }
    .hscroll.hscroll-dragging * { pointer-events: none; }
    .hscroll-btn { display: none; position: absolute; top: 2px; z-index: 3; width: 28px; height: 28px; border-radius: 999px; border: 1px solid #475569; background: rgba(2, 6, 23, 0.94); color: #fbbf24; font-size: 18px; font-weight: 900; line-height: 1; align-items: center; justify-content: center; box-shadow: 0 0 12px 6px #020617; }
    .hscroll-btn.prev { left: 0; }
    .hscroll-btn.next { right: 0; }
    .hscroll-btn:hover { border-color: #f59e0b; }
    @media (hover: hover) and (pointer: fine) {
      .hscroll-wrap.can-prev .hscroll-btn.prev, .hscroll-wrap.can-next .hscroll-btn.next { display: flex; }
    }

    /* Recent Card History strip: draggable/swipeable on top of native
       scroll. touch-action:pan-y hands vertical page scrolling back to the
       browser but keeps horizontal movement exclusively ours, so a finger
       drag never fights the browser's own attempt to scroll the same axis.
       overscroll-behavior-x:contain stops a swipe that reaches either end
       from bubbling into a page-level bounce/navigation gesture. */
    /* Card history folds into a circle the size of Play Matrix / Card Powers,
       between them in the left column (the panel shrinks to exactly one
       circle, so the three are evenly spaced). */
    #historyStreamPanel.history-collapsed { background:transparent !important; border-width:0 !important; box-shadow:none !important; padding:0 !important; height:clamp(26px,7.5vw,34px); }
    #historyStreamPanel.history-collapsed > #histHeaderRow, #historyStreamPanel.history-collapsed > #cardHistoryStream { display:none !important; }
    .hist-circle { display:none; position:absolute; left:0; top:0; z-index:41; width:clamp(26px,7.5vw,34px); height:clamp(26px,7.5vw,34px); border-radius:9999px; background:rgba(15,23,42,.9); border:2px solid #475569; color:#fde68a; font-weight:900; font-size:clamp(12px,3.6vw,16px); line-height:1; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 10px 15px -3px rgba(0,0,0,.4); padding:0; }
    #historyStreamPanel.history-collapsed > .hist-circle { display:flex; position:absolute !important; left:0 !important; top:0 !important; margin:0 !important; box-sizing:border-box; flex-shrink:0; width:clamp(26px,7.5vw,34px) !important; height:clamp(26px,7.5vw,34px) !important; }
    .hist-circle:active { transform:scale(.9); }
    .hist-circle svg { width:58%; height:58%; color:#cbd5e1; }
    .hist-circle .hist-rank.is-joker { font-size:.62em; letter-spacing:-.04em; }
    .hist-collapse-btn { padding:0 5px; border-radius:4px; background:#1e293b; color:#cbd5e1; font-weight:900; font-size:11px; line-height:14px; }
    /* Press-and-hold card info (§ Card hold info). z 63: over the table, under the emote picker. */
    #cardHoldTip { position:fixed; z-index:63; max-width:min(260px, calc(100vw - 16px)); padding:8px 10px; border-radius:12px; background:rgba(2,6,23,.96); border:1px solid rgba(251,191,36,.7); box-shadow:0 10px 25px rgba(0,0,0,.55); color:#e2e8f0; pointer-events:none; display:flex; flex-direction:column; gap:3px; }
    #cardHoldTip.hidden { display:none; }
    #cardHoldTip .ch-title { font-weight:900; font-size:13px; color:#fde68a; }
    #cardHoldTip .ch-power { font-size:10px; font-weight:800; color:#0f172a; background:#fbbf24; border-radius:4px; padding:1px 5px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em; }
    #cardHoldTip .ch-text { font-size:12px; line-height:1.35; }
    #cardHoldTip .ch-ok { font-size:11px; font-weight:800; color:#4ade80; }
    #cardHoldTip .ch-no { font-size:11px; font-weight:800; color:#f87171; }
    #gameTable :is([data-card-id], #discardPileContainer, #bottomCardPreview) { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
    #cardHoldTip .ch-where { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
    #cardHistoryStream {
      touch-action: pan-y;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
    }
    #cardHistoryStream.history-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
    }

    .card-shadow {
      box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.12);
    }
    /* Tutorial: a second highlight for a control that isn't the spotlight
       target — used on PLAY SELECTED CARD(S) so the player can see the next
       thing to press. */
    /* Lessons always show the cards you can play in green (owner, v289),
       whatever frame is equipped: frames set !important edges that hid it. */
    body.tutorial-on :is(#localHand, #localTableSlots) .animate-legal-glow:not(.opponent-cosmetic-card) {
      border-color: #34d399 !important; outline-color: #34d399 !important;
      box-shadow: 0 0 14px rgba(52, 211, 153, 0.9), inset 0 0 0 2.5px #34d399 !important;
    }
    body.tutorial-on :is(#localHand, #localTableSlots) .animate-legal-glow.tutorial-glow:not(.opponent-cosmetic-card) {
      box-shadow: 0 0 16px rgba(52, 211, 153, 0.95), inset 0 0 0 2.5px #34d399, 0 0 0 4px rgba(251, 191, 36, 0.55) !important;
    }
    .tutorial-glow {
      border: 2px solid #fbbf24 !important;
      box-shadow: 0 0 22px rgba(251, 191, 36, 0.85), 0 0 0 4px rgba(251, 191, 36, 0.18) !important;
      animation: pulseGlow 1.5s infinite;
    }
    /* Card contents scale with the card itself (same vh basis as .card-base),
       so ranks, suits and icons stay inside the card at every size — and stay
       correct for any future theme or size change. */
    .card-corner-rank { font-size: clamp(8px, 1.65vh, calc(14px * var(--tbl-k,1))); }
    .card-corner-suit { font-size: clamp(6px, 1.2vh, calc(10px * var(--tbl-k,1))); }
    .card-corner-icon { width: clamp(5px, 1.15vh, calc(9px * var(--tbl-k,1))); height: clamp(5px, 1.15vh, calc(9px * var(--tbl-k,1))); }
    .card-centre-icon { width: clamp(10px, 2.2vh, calc(20px * var(--tbl-k,1))); height: clamp(10px, 2.2vh, calc(20px * var(--tbl-k,1))); }
    .card-centre-suit { font-size: clamp(11px, 2.3vh, calc(20px * var(--tbl-k,1))); }
    /* Very small hand cards (large hands) drop the corner icon entirely —
       at that size it is unreadable anyway and only risks crowding. */
    .card-tiny .card-corner-icon { display: none; }
    .card-tiny .card-corner-rank { font-size: clamp(7px, 1.3vh, 11px); }
    .card-tiny .card-corner-suit { font-size: clamp(5px, 1vh, 8px); }
    .card-tiny .card-centre-icon { width: clamp(9px, 1.7vh, 15px); height: clamp(9px, 1.7vh, 15px); }
    /* "JKR" is three characters wide where other ranks are one or two, so it
       gets its own slightly tighter scale to stay inside the card. */
    .card-corner-rank { max-width: 100%; }
    .card-tiny .card-corner-rank { letter-spacing: -0.04em; }
    /* Header scales down on narrow screens so its seven controls can never
       collide. Everything is driven off vw so it degrades smoothly rather
       than snapping at a breakpoint. */
    header .brand-logo-rendered { font-size: clamp(15px, 5.2vw, 26px); }
    @media (max-width: 400px) {
      header { padding-left: 4px; padding-right: 4px; }
      /* Was `header .flex.items-center.gap-2` only — the header's left
         and right groups now use gap-1.5 (see the Flexbox Spacing
         rework), and a hand-written selector like this doesn't
         automatically follow a class rename the way a Tailwind utility
         would; it just silently stops matching. Both are listed so this
         narrow-screen shrink still reaches the actual header groups. */
      header .flex.items-center.gap-2, header .flex.items-center.gap-1\.5 { gap: 3px; }
      header button, header span[id] { font-size: 8px; }
      header button svg { width: 12px; height: 12px; }
      header #activeDifficultyBadge { padding-left: 3px; padding-right: 3px; }
    }
    @media (max-width: 340px) {
      header .flex.items-center.gap-2, header .flex.items-center.gap-1\.5 { gap: 2px; }
      header button, header span[id] { font-size: 7px; }
      header button svg { width: 10px; height: 10px; }
      /* Reclaims a few px specifically for the rare worst case of a large
         compact-notation Diamond count (formatCompactDiamonds tops out at
         "999B+") landing next to a 6-digit Online Room code at the same
         time, on a legacy 320px screen — the two widest, most variable
         pieces of header content, and the only ones with padding left to
         give up without shrinking their actual text. */
      header #headerDiamondBtn, header #roomCodeBadge { padding-left: 4px; padding-right: 4px; }
    }
    /* Accessibility modes */
    body.high-contrast .card-base, body.high-contrast .card-table, body.high-contrast .card-opponent-slot {
      background: #05070d !important; border-color: #ffffff !important;
    }
    body.high-contrast .text-\[var\(--text-red\)\] { color: #ff5c5c !important; }
    body.high-contrast .text-\[var\(--text-light\)\] { color: #ffffff !important; }
    body.high-contrast .flying-card { color:#ffffff !important; }
    body.high-contrast .card-corner-rank, body.high-contrast .card-corner-suit { text-shadow: 0 0 2px #000; }
    body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    /* Hamburger menu — hand-written CSS rather than Tailwind utilities for
       the animated bits specifically, since this project's Tailwind is a
       precompiled/purged bundle with no live compiler: any utility class
       not already used elsewhere in the file silently produces zero CSS
       (this has caused real shipped bugs before — z-[90], pr-10, h-px).
       Plain CSS has no such risk. The bar-to-X morph and the drawer slide
       both use real transitions, so both are automatically covered by the
       body.reduce-motion rule just above with no extra code. */
    .hamburger-bars { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 14px; height: 14px; position: relative; }
    .hamburger-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
    .hamburger-btn.open .hamburger-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .hamburger-btn.open .hamburger-bars span:nth-child(2) { opacity: 0; }
    .hamburger-btn.open .hamburger-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    #inboxBadge.inbox-badge--friend { background-color:#10b981; }
    #inboxBadge.inbox-badge--game { background-color:#0ea5e9; }
    #inboxBadge.inbox-badge--challenge { background-color:#fbbf24; color:#0f172a; }
    #inboxBadge.inbox-badge--rank { background-color:#a78bfa; color:#0f172a; }
    #inboxBadge.inbox-badge--shop { background-color:#f472b6; color:#0f172a; }
    /* Anchor the count to the envelope's upper-right corner, including on
       narrow phones. Its size follows the icon, not the lobby layout. */
    #headerInboxBtn #inboxBadge {
      position:absolute; top:0; right:0;
      transform:translate(30%,-25%);
      width:auto; min-width:15px; height:15px;
      padding:0 2px; font-size:8px; line-height:1;
      display:flex; align-items:center; justify-content:center;
      pointer-events:none;
    }
    #headerInboxBtn #inboxBadge.hidden { display:none; }
    @media (max-width:767px) {
      #headerInboxBtn #inboxBadge {
        min-width:12px; height:12px;
        padding:0 1px; font-size:7px;
        transform:translate(25%,-20%);
      }
    }
    #deckThemeBody > button {
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; text-align:center;
      min-width:0; min-height:55px; line-height:1.2;
    }
    #deckThemeBody > button .pack-icon {
      display:block; flex:none; width:26px; height:26px;
      margin:0 auto 3px;
    }
    #deckThemeBody > button > span { display:block; width:100%; text-align:center; }
    /* § Home layout (v314, owner: cleaner home screen). The header's small logo hides on the home
       screen (the big one is in the panel); the four shortcuts are one quiet row at the foot of the
       panel; the speed slider lives in Settings; every mode's options share one height, so switching
       mode never moves the panel. */
    /* § Header (v315, owner). Home: Exit · Shop · Diamonds · Custom · Profile ·
       Inbox · Guide · Settings · Menu. Elsewhere Shop/Custom/Guide fold into
       the menu (slide toward it, fade, small bounce) and the logo takes the
       middle. A room code replaces the Diamond count. */
    #headerShopBtn, #headerCustomBtn, #headerGuideBtn, #headerDevBtn, #headerLogoWrap, #navHomeLogoBtn {
      max-width: 140px; overflow: visible;
      transition: none !important;
    }
    :is(body:not(.lobby-open), body.mode-page, body.ui-overlay-open) .hdr-home-only {
      max-width: 0 !important; min-width: 0 !important; margin-left: -6px; opacity: 0; pointer-events: none; overflow: hidden;
      transform: translateX(var(--to-menu, 60px)) scale(.35);
    }
    body.lobby-open:not(.mode-page):not(.ui-overlay-open) #headerLogoWrap { max-width: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: scale(.6); }
    body.lobby-open:not(.mode-page):not(.ui-overlay-open) #navHomeLogoBtn { max-width: 0; }
    header:has(#roomCodeBadge:not(.hidden)) #headerDiamondCount { display: none; }
    body.reduce-motion :is(#headerShopBtn, #headerCustomBtn, #headerGuideBtn, #headerDevBtn, #headerLogoWrap, #navHomeLogoBtn) { transition: none !important; }
    #homeQuickRow { display: none !important; }
    @media (max-width: 379px) {
      body > header { padding-left: 6px !important; padding-right: 6px !important; }
      body > header > div { gap: 2px !important; }
      :is(body:not(.lobby-open), body.mode-page, body.ui-overlay-open) .hdr-home-only { margin-left: -2px; }
      :is(#leaveGameBtn, #headerShopBtn, #headerCustomBtn, #headerProfileBtn, #headerInboxBtn, #headerGuideBtn, #headerDevBtn, #headerSettingsBtn, #hamburgerBtn) { width: 1.5rem !important; }
      :is(#leaveGameBtn, #headerShopBtn, #headerCustomBtn, #headerProfileBtn, #headerInboxBtn, #headerGuideBtn, #headerDevBtn, #headerSettingsBtn, #hamburgerBtn) svg { width: 24px !important; height: 24px !important; }
    }
    #appClosingScreen { position:fixed; inset:0; z-index:10001; display:grid; place-items:center; padding:24px; background:#040919; }
    #appClosingScreen.hidden { display:none; }
    .app-closing-card { width:min(100%, 380px); text-align:center; padding:32px 24px; border:1px solid #675329; border-radius:24px; background:#0f172a; color:#cbd5e1; animation:closeScreenIn .2s ease-out; }
    .app-closing-card h2 { color:#fbbf24; font-size:24px; font-weight:900; margin-bottom:12px; }
    .app-closing-card p { margin:8px 0; }
    .app-closing-card button { margin-top:20px; padding:12px 20px; border-radius:999px; border:1px solid #64748b; background:#1e293b; color:#fff; font-weight:700; }
    body.app-closing > :not(#appClosingScreen):not(script):not(style) { visibility:hidden; pointer-events:none; }
    @keyframes closeScreenIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
    body.reduce-motion .app-closing-card { animation:none; }
    /* § Mode carousel (v317): a row of seven cards that snaps to the middle;
       the selected mode's card is lit in its own tone. */
    #homeModeGrid { display: none !important; }
    #modeCarousel { position: relative; margin: 2px -16px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
    #modeCarousel .mc-track { position: relative; height: 210px; perspective: 900px; overflow: hidden; cursor: grab; padding-bottom: 22px; box-sizing: content-box;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
    .mc-card { position: absolute; left: 50%; top: 12px; width: 124px; height: 184px; margin-left: -62px; border-radius: 18px;
      box-shadow: 0 8px 18px rgba(0,0,0,.32), 0 18px 30px rgba(0,0,0,.22);
      background: #0b1428; border: 1.5px solid #1e293b; color: #e2e8f0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; cursor: pointer;
      transform: translateX(calc(var(--mc-x, 0px) + var(--mc-dx, 0px) + var(--mc-lx, 0px))) translateZ(var(--mc-z, 0px)) rotateY(var(--mc-r, 0deg)) scale(var(--mc-s, 1));
      opacity: var(--mc-o, 1); z-index: var(--mc-zi, 1); will-change: transform;
      transition: transform .5s var(--ease-spring), scale .45s var(--ease-spring), opacity .35s var(--ease-soft), border-color .2s, background-color .2s, box-shadow .25s; }
    .mc-card.mc-focus:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-tone) 22%, transparent), 0 16px 30px rgba(0,0,0,.5); }
    /* v324: cards are solid (nothing shows through); the middle one wears its
       colour, side cards are dimmed by an opaque-ish shade over them. */
    .mc-card.mc-focus { border-color: var(--mc-tone);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--mc-tone) 45%, transparent), 0 0 22px color-mix(in srgb, var(--mc-tone) 38%, transparent), 0 14px 28px rgba(0,0,0,.5); }
    .mc-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: #020617; opacity: var(--mc-dim, 0);
      pointer-events: none; transition: opacity .35s var(--ease-soft); }
    .mc-track.mc-dragging, .mc-track.mc-dragging .mc-card { cursor: grabbing; }
    .mc-track.mc-dragging .mc-card { transition: none; }
    .mc-card, .mc-card * { -webkit-user-drag: none; }
    .mc-card.mc-gone { pointer-events: none; }
    /* Reorder (long press): the picked-up card pops up with a springy bounce, follows the finger and drops back in. */
    .mc-card.mc-lifted { scale: 1.14; z-index: 60 !important; cursor: grabbing; transition: transform 0s, scale .45s var(--ease-spring), opacity .2s;
      box-shadow: 0 0 0 2px var(--mc-tone), 0 24px 40px rgba(0,0,0,.6); }
    .mc-track.mc-reordering .mc-card:not(.mc-lifted) { transition: transform .32s var(--ease-spring), scale .2s, opacity .2s; }
    .mc-reset-order { display: block; margin: 2px auto 0; background: none; border: 0; color: #94a3b8; font: inherit; font-size: 11px; font-weight: 700;
      text-decoration: underline dotted; cursor: pointer; padding: 4px 8px; }
    .mc-reset-order.hidden { display: none; }
    .mc-reset-order:hover, .mc-reset-order:focus-visible { color: #fbbf24; }
    body.reduce-motion .mc-card.mc-lifted { transition: none; }
    /* Controls (v323): « first, ‹ previous, › next, » last. */
    .mc-controls { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 2px; }
    .mc-controls .mc-arrow[data-mc-step="-1"] { margin-right: 22px; }
    .mc-arrow { width: 36px; height: 36px; border-radius: 999px; border: 1px solid #334155; background: #0b1428; color: #cbd5e1;
      display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .16s, border-color .16s, opacity .16s; }
    .mc-arrow:hover:not(:disabled) { background: #1e293b; border-color: #fbbf24; }
    .mc-arrow:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
    .mc-arrow:disabled { opacity: .3; cursor: default; }
    .mc-arrow svg { width: 16px; height: 16px; }
    .mc-card:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
    .mc-card[aria-pressed="true"] { border-color: var(--mc-tone); background: color-mix(in srgb, var(--mc-tone) 13%, #0b1428);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-tone) 18%, transparent), 0 14px 28px rgba(0,0,0,.45); }
    .mc-card .mc-num { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 800; color: #64748b; }
    .mc-card .mc-ic { width: 52px; height: 52px; padding: 7px; box-sizing: border-box; border-radius: 16px; color: var(--mc-tone);
      background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mc-tone) 34%, transparent), color-mix(in srgb, var(--mc-tone) 12%, transparent) 70%);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mc-tone) 40%, transparent); }
    .mc-card.mc-focus .mc-ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mc-tone) 60%, transparent)); }
    .mc-card .mc-name { font-size: 14px; font-weight: 900; line-height: 1.1; text-align: center; color: #fff; }
    .mc-card .mc-sub { font-size: 11px; font-weight: 600; color: #94a3b8; text-align: center; }
    /* A pulsing neon tag (More Modes); still with Reduce Motion. */
    .mc-badge { position: absolute; top: 7px; right: 8px; padding: 2px 7px; border-radius: 999px; background: #e11d48; color: #fff;
      font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
      box-shadow: 0 0 6px rgba(244,63,94,.8), 0 0 14px rgba(244,63,94,.45); animation: mcBadgePulse 1.6s var(--ease-soft) infinite; }
    @keyframes mcBadgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(244,63,94,.8), 0 0 14px rgba(244,63,94,.45); }
      50% { transform: scale(1.08); box-shadow: 0 0 10px rgba(251,113,133,1), 0 0 24px rgba(244,63,94,.7); } }
    body.reduce-motion .mc-badge { animation: none; }
    .mc-card.mc-empty { background: #0b1428; border-style: dashed; border-color: #475569; }
    .mc-card.mc-empty .mc-name { color: #cbd5e1; }
    .mc-card.mc-empty.mc-focus { border-color: #94a3b8; box-shadow: 0 14px 28px rgba(0,0,0,.5); }
    .mc-go { margin-top:auto; flex:none; padding:5px 13px; min-height:30px; border:1px solid color-mix(in srgb, var(--mc-tone) 60%, #334155); border-radius:999px; color:#f8fafc; background:#172239; font:inherit; font-size:11px; font-weight:800; cursor:pointer; position:relative; z-index:1; }
    .mc-go:hover, .mc-go:focus-visible { background:color-mix(in srgb, var(--mc-tone) 30%, #172239); outline:2px solid var(--mc-tone); outline-offset:2px; }
    .mc-card.mc-pinned { border-style: dashed; }
    .mc-pin-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
    .mc-pin-list button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid #334155;
      background: #0b1428; color: #e2e8f0; font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
    .mc-pin-list button:hover, .mc-pin-list button[aria-pressed="true"] { border-color: #fbbf24; }
    .mc-pin-list button:disabled { opacity: .45; cursor: not-allowed; border-color: #334155; }
    .mc-pin-list svg { width: 18px; height: 18px; flex: none; color: #94a3b8; }
    body.reduce-motion .mc-card { transition: none; }
    #homeTutorialRow { display:grid; grid-template-columns:minmax(0, 180px) minmax(0, 160px); grid-template-rows:auto auto; justify-content:center; align-items:stretch; gap:8px 10px; margin:4px 16px 0; }
    #homeTutorialRow .mc-controls { grid-column:1 / -1; grid-row:1; margin:0 0 8px; justify-content:center; }
    #homeTutorialRow #startTutorialBtn { grid-column:1; grid-row:2; width:100%; min-width:0; margin:0; padding:8px 6px; letter-spacing:.02em; font-size:11px; line-height:1.3; gap:5px; min-height:56px; }
    #startTutorialLabel { max-width:132px; white-space:normal; }
    #homeTutorialRow #startTutorialBtn { font-size:17px; gap:10px; }
    #homeTutorialRow .tutorial-icon-box { flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#e879f9; background:radial-gradient(circle at 35% 30%,rgba(232,121,249,.34),rgba(232,121,249,.12) 70%); box-shadow:inset 0 1px 0 rgba(232,121,249,.4); }
    #homeTutorialRow #startTutorialBtn svg { flex:none; width:38px !important; height:38px !important; }
    .series-level-label { display:flex; justify-content:center; align-items:center; gap:4px; color:#fbbf24; font-size:10px; line-height:1.3; }
    .series-level-label svg { width:13px; height:13px; }
    .series-choice.series-level-locked { opacity:1; border-color:#806a35; background:#241e16; }
    #homeTutorialVideo { display:block; width:100%; height:100%; min-height:100px; max-height:132px; min-width:0; object-fit:contain; background:#020617; border:1px solid #66522c; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
    #homeTutorialPlayer { grid-column:2; grid-row:2; position:relative; min-width:0; }
    #homeVideoExpand { position:absolute; top:5px; right:5px; width:32px; height:32px; border:1px solid #64748b; border-radius:8px; background:#0b1428e8; color:#fff; display:grid; place-items:center; }
    #homeVideoExpand svg { width:19px; height:19px; }
    #homeTutorialPlayer:fullscreen, #homeTutorialPlayer.video-expanded { background:#020617; display:grid; place-items:center; }
    #homeTutorialPlayer.video-expanded { position:fixed; inset:0; z-index:10002; }
    #homeTutorialPlayer:fullscreen #homeTutorialVideo, #homeTutorialPlayer.video-expanded #homeTutorialVideo { width:100%; height:100%; max-height:100%; border:0; border-radius:0; }
    #homeTutorialPlayer:fullscreen #homeVideoExpand, #homeTutorialPlayer.video-expanded #homeVideoExpand { top:16px; right:16px; width:44px; height:44px; }
    #modePageInfo { margin-left:auto; align-self:flex-start; flex:none; width:30px; height:30px; border:1px solid #64748b; border-radius:50%; color:#cbd5e1; background:#0b1428; font:bold 17px Georgia,serif; }
    .mc-actions { display:flex; gap:5px; margin-top:auto; align-items:center; justify-content:center; }
    .mc-actions .mc-go { padding:5px 9px; margin-top:0; }
    .mc-swap { border-style:dashed; background:#0b1428; color:#cbd5e1; }
    @media (max-width:420px) {
      #homeTutorialRow { column-gap:8px; }
      #homeTutorialRow .mc-controls { gap:6px; }
      #homeTutorialRow .mc-arrow { width:32px; height:32px; }
      #homeTutorialRow .mc-arrow[data-mc-step="-1"] { margin-right:8px; }
      #homeTutorialRow #startTutorialBtn { font-size:15px; gap:6px; }
      #homeTutorialRow .tutorial-icon-box { width:44px; height:44px; border-radius:14px; }
      #homeTutorialRow #startTutorialBtn svg { width:32px !important; height:32px !important; }
    }
    @media (min-width: 700px) { .mc-card { width: 132px; height: 194px; margin-left: -66px; } #modeCarousel .mc-track { height: 220px; } }
    /* § Mode pages (v320): home = logo, nickname, carousel, tutorial. A mode
       opened from the carousel turns the panel into its page: a head with
       Back, then that mode's options (Play Computer / Play Friends / Ranked
       reuse their old panels; Gauntlet and More Modes have their own). */
    #modePageHead, .mode-page-body { display: none; }
    #lobbyScreen:not(.mode-page-open) :is(#singleOptions, #multiOptions, #rankedOptions) { display: none !important; }
    #lobbyScreen.mode-page-open :is(#modeCarousel, #homeTutorialRow) { display: none !important; }
    #lobbyScreen.mode-page-open .brand-logo-rendered, #lobbyScreen.mode-page-open .brand-subtitle { display: none; }
    #lobbyScreen.mode-page-open #modePageHead { display: flex; }
    #lobbyScreen:is([data-mode-page="cpu"], [data-mode-page="gauntlet"], [data-mode-page="more"]) #homeNameBlock { display: none; }
    #lobbyScreen[data-mode-page="cpu"] .gauntlet-row { display: none !important; }
    #lobbyScreen:is([data-mode-page="gauntlet"], [data-mode-page="more"]) :is(#singleOptions, #multiOptions, #rankedOptions) { display: none !important; }
    #lobbyScreen[data-mode-page="gauntlet"] #gauntletPage, #lobbyScreen[data-mode-page="more"] #moreModesPage { display: block; }
    #modePageHead { align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(51,65,85,.6); }
    #modePageBack { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid #334155; background: #0b1428; color: #e2e8f0;
      display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .16s, border-color .16s; }
    #modePageBack:hover { background: #1e293b; border-color: #fbbf24; }
    #modePageBack:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
    #modePageBack svg { width: 20px; height: 20px; }
    /* Room sub-pages keep the same visible Back control. */
    #modePageIcon { width: 44px; height: 44px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center;
      color: var(--mp-tone, #f59e0b); background: color-mix(in srgb, var(--mp-tone, #f59e0b) 14%, #0b1428); }
    #modePageIcon .mc-ic { width: 28px; height: 28px; }
    .mph-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
    #modePageTitle { font-size: 20px; font-weight: 900; color: #f8fafc; line-height: 1.15; }
    #modePageSub { font-size: 12px; font-weight: 600; color: #94a3b8; }
    .mp-box { background: rgba(2,6,23,.5); border: 1px solid #1e293b; border-radius: 14px; padding: 14px; text-align: left; }
    .mp-lead { font-size: 13px; line-height: 1.5; color: #cbd5e1; margin: 0 0 10px; }
    .mp-note { font-size: 12px; line-height: 1.45; color: #94a3b8; margin: 10px 0 0; }
    .mp-facts, .mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .mp-facts li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: #0b1428; }
    .mp-facts b { color: #f8fafc; } .mp-facts span { color: #94a3b8; }
    .mp-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #0b1428; }
    .mp-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #94a3b8; line-height: 1.4; }
    .mp-row-text b { font-size: 14px; color: #f8fafc; }
    .mp-row-ic { width: 36px; height: 36px; flex: none; padding: 7px; box-sizing: border-box; border-radius: 11px; color: var(--mc-tone, #c084fc); background: color-mix(in srgb, var(--mc-tone, #a855f7) 18%, transparent); }
    .mp-soon { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fbbf24;
      border: 1px solid rgba(251,191,36,.5); border-radius: 999px; padding: 3px 8px; }
    .mp-go { margin-top: 10px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: #059669; color: #020617;
      font-weight: 900; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer; transition: filter .16s, scale .16s; }
    .mp-go:hover { filter: brightness(1.1); } .mp-go:active { scale: .97; }
    .mp-go svg { width: 20px; height: 20px; }
    /* § Card expand (v321): the cover that flips and grows from the middle card. */
    .mc-expand { position: fixed; z-index: 199; box-sizing: border-box; pointer-events: none; overflow: hidden;
      border-radius: 18px; border: 1.5px solid var(--mc-tone); color: #e2e8f0; will-change: transform, width, height, left, top;
      background: color-mix(in srgb, var(--mc-tone) 13%, #0b1428); backface-visibility: hidden; }
    .mc-expand-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
    .mc-expand .mc-num { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 800; color: #64748b; }
    .mc-expand .mc-ic { width: 52px; height: 52px; padding: 7px; box-sizing: border-box; border-radius: 16px; color: var(--mc-tone);
      background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mc-tone) 34%, transparent), color-mix(in srgb, var(--mc-tone) 12%, transparent) 70%);
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mc-tone) 60%, transparent)); }
    .mc-expand .mc-name { font-size: 14px; font-weight: 900; color: #fff; } .mc-expand .mc-sub { font-size: 11px; font-weight: 600; color: #94a3b8; }
    .mc-expand.mc-expand-back { background: #0f172a; border-color: color-mix(in srgb, var(--mc-tone) 40%, #1e293b); }
    .mc-expand.mc-expand-back .mc-expand-face { display: none; }
    /* Exit / leave confirm (shConfirm): the game's own dialog, never confirm(). */
    #shConfirm { position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,23,.72); backdrop-filter: blur(3px); }
    #shConfirm.hidden { display: none; }
    #shConfirm .shc-card { width: min(340px, 100%); background: linear-gradient(180deg, #0f172a, #020617); border: 1px solid rgba(245,158,11,.45); border-radius: 18px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); animation: shcIn .32s var(--ease-bouncy); }
    #shConfirm .shc-icon { width: 44px; height: 44px; margin: 0 auto 8px; display: block; }
    #shConfirm h2 { font-family: 'Cinzel', serif; font-weight: 900; font-size: 19px; color: #fbbf24; margin: 0 0 6px; letter-spacing: .02em; }
    #shConfirm p { font-size: 13px; line-height: 1.45; color: #cbd5e1; margin: 0 0 16px; }
    #shConfirm .shc-row { display: flex; gap: 8px; }
    #shConfirm .shc-row button { flex: 1; min-height: 42px; border-radius: 12px; font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: filter .16s var(--ease-snappy), scale .16s var(--ease-snappy); }
    #shConfirm .shc-row button:hover { filter: brightness(1.15); }
    #shConfirm .shc-row button:active { scale: .96; }
    #shConfirm .shc-row button:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
    #shConfirmNo { background: transparent; border: 1px solid #475569; color: #e2e8f0; }
    #shConfirmYes { background: #dc2626; border: 1px solid #f87171; color: #fff; }
    @keyframes shcIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
    body.reduce-motion #shConfirm .shc-card { animation: none; }
    #homeQuickRow { border-top:1px solid rgba(51,65,85,.6); padding-top:8px; margin-top:12px; }
    #homeQuickRow > .settings-head { display:none; }
    #homeQuickRow #deckThemeBody { gap:4px; }
    #homeQuickRow #deckThemeBody > button {
      min-height:46px; border:0; background:transparent; color:#94a3b8;
      font-size:10px; font-weight:800; letter-spacing:.02em; border-radius:10px;
    }
    #homeQuickRow #deckThemeBody > button:hover { background:rgba(30,41,59,.7); color:#e2e8f0; }
    #homeQuickRow #deckThemeBody > button:focus-visible { outline:2px solid #fbbf24; outline-offset:1px; }
    #homeQuickRow #deckThemeBody > button .pack-icon { width:22px; height:22px; margin-bottom:2px; }
    #lobbySpeedBox { display:none !important; }
    #multiOptions:not(:has(#multiLobbyRoom:not(.hidden))), #rankedOptions { min-height:var(--home-opts-h, 194px); }
    #modeSingleBtn, #modeMultiBtn, #modeRankedBtn {
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; text-align:center;
      gap:2px; min-width:0; min-height:70px; line-height:1.2;
    }
    #modeSingleBtn > span, #modeMultiBtn > span, #modeRankedBtn > span {
      display:block; width:100%; text-align:center;
    }
    #lobbySpeedBox { padding:6px 10px 5px; }
    #lobbySpeedBox > div:first-child { margin-bottom:2px; }
    #lobbySpeedSlider { display:block; margin:0; }
    #lobbySpeedTicks { margin-top:1px; }
    .inbox-activity--rank { background:rgba(76,29,149,.25); border-color:rgba(167,139,250,.65); }
    .inbox-activity--rank .inbox-activity-accent { color:#c4b5fd; }
    .inbox-activity--shop { background:rgba(131,24,67,.24); border-color:rgba(244,114,182,.65); }
    .inbox-activity--shop .inbox-activity-accent { color:#f9a8d4; }
    /* Account: Your data card, Can't sign in help. */
    .acct-card { background:rgba(15,23,42,.6); border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .75rem; display:flex; flex-direction:column; gap:.5rem; }
    .acct-text { font-size:.64rem; line-height:1.45; color:#94a3b8; }
    .acct-btn { width:100%; padding:.5rem; border-radius:.55rem; border:1px solid #38bdf8; color:#7dd3fc; font-size:.64rem; font-weight:900; letter-spacing:.08em; }
    .acct-btn:hover { background:#0c4a6e; }
    .acct-btn:disabled { opacity:.5; }
    .acct-status { font-size:.6rem; font-weight:700; color:#7dd3fc; }
    .acct-status.is-error { color:#fda4af; }
    .auth-help-toggle { display:block; margin:.6rem auto 0; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#64748b; text-decoration:underline dotted; text-underline-offset:3px; }
    .auth-help-toggle:hover { color:#fbbf24; }
    .auth-help { margin-top:.5rem; padding:.55rem .65rem; border-radius:.65rem; background:#020617; border:1px solid #1e293b; display:flex; flex-direction:column; gap:.4rem; }
    .auth-help.hidden { display:none; }
    .auth-help-item { font-size:10px; line-height:1.45; color:#94a3b8; }
    .auth-help-item b { color:#e2e8f0; }
    .auth-help-link { font:inherit; font-weight:800; color:#fbbf24; text-decoration:underline; padding:0; }
    /* Challenges header: Diamonds, completed count, Shop shortcut: one height. */
    /* Diamonds left, completed count dead centre, Shop right. */
    .ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.2em; flex:none; overflow:visible; }
    .ic-gem { width:1.05em; height:1.05em; vertical-align:-.15em; }
    .ic-tier { width:1.3em; height:1.3em; vertical-align:-.3em; }
    .header-gem-btn { gap:5px; height:28px; padding:0 2px; background:none; border:0; }
    .header-gem .ic-gem { width:20px; height:20px; display:block; vertical-align:0; }
    #headerDiamondBtn.header-gem-btn, #headerDiamondBtn.header-gem-btn:hover { background:transparent !important; border:0 !important; box-shadow:none !important; }
    #headerDiamondCount { font-size:14px !important; }
    .room-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
    .room-action { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:999px; border:1px solid #475569; background:#1e293b; font-size:10px; font-weight:800; letter-spacing:.03em; white-space:nowrap; transition:background .15s; }
    .room-action:hover { background:#334155; }
    .room-action .ic { width:14px; height:14px; }
    /* A tall home screen (e.g. Play Friends with a room open) must scroll
       from its top: flex centring pushed the top out of reach. */
    #lobbyScreen { align-items:flex-start !important; }
    #lobbyScreen > :not(script) { margin-top:clamp(12px, 5vh, 48px); margin-bottom:auto; }
    #lobbyScreen > .bg-slate-900 { padding-top:24px; padding-bottom:24px; }
    #lobbyScreen .brand-subtitle { margin-bottom:12px; }
    /* Mode ⓘ (v256): top-right of each mode button; opens the shared info bubble. */
    .mode-btn { position:relative; }
    #modeSingleBtn > .mode-tip, #modeMultiBtn > .mode-tip, #modeRankedBtn > .mode-tip { position:absolute; top:4px; right:4px; left:auto; width:16px; height:16px; border-radius:50%; border:1.2px solid currentColor; opacity:.7;
      font:italic 900 10px/13px Georgia,'Times New Roman',serif; text-align:center; cursor:help; user-select:none; }
    .mode-tip:hover, .mode-tip:focus-visible { opacity:1; outline:none; }
    .mode-btn { display:grid; grid-template-rows:24px 20px 14px; justify-items:center; align-items:center; row-gap:2px; padding:10px 4px; min-width:0; }
    .mode-btn .mode-ic { width:22px; height:22px; }
    .mode-btn .mode-name { font-size:14px; font-weight:900; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .mode-btn .mode-sub { font-size:9px; font-weight:700; line-height:14px; opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .ch-row-lead .ic-tier { width:22px; height:22px; display:block; }
    /* The match summary's Level Ladder button sits centred (owner, v289). */
    .xp-ladder-link.ms-ladder-link { display:flex; width:max-content; margin-left:auto; margin-right:auto; }
    .custom-equip-hint { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 8px; font-size:9px; color:#94a3b8; text-align:center; }
    .custom-equip-hint .ic { width:12px; height:12px; color:#fbbf24; flex-shrink:0; }
    .custom-equip-hint b { color:#e2e8f0; }
    #themesModal [data-equip-id] { touch-action:manipulation; }
    /* § Helper tips (v291) */
    .helper-tip { position:fixed; z-index:340; max-width:min(280px, calc(100vw - 20px)); display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:12px; border:1px solid rgba(251,191,36,.6); background:linear-gradient(180deg,#1e293b,#0f172a); box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 3px rgba(251,191,36,.12); color:#e2e8f0; font-size:11px; font-weight:700; line-height:1.3; opacity:0; transform:translateY(4px); transition:opacity .2s var(--ease-soft, ease), transform .2s var(--ease-soft, ease); }
    .helper-tip.show { opacity:1; transform:none; }
    .helper-tip::after { content:''; position:absolute; left:var(--arrow-x, 50%); bottom:-6px; width:10px; height:10px; margin-left:-5px; transform:rotate(45deg); background:#0f172a; border-right:1px solid rgba(251,191,36,.6); border-bottom:1px solid rgba(251,191,36,.6); }
    .helper-tip.below::after { bottom:auto; top:-6px; background:#1e293b; border:0; border-left:1px solid rgba(251,191,36,.6); border-top:1px solid rgba(251,191,36,.6); }
    .helper-tip-icon .ic { width:16px; height:16px; color:#fbbf24; display:block; }
    .helper-tip-text { flex:1; }
    .helper-tip-ok { flex-shrink:0; padding:4px 8px; border-radius:8px; background:linear-gradient(180deg,#fbbf24,#d97706); color:#1c1204; font-size:9px; font-weight:900; letter-spacing:.04em; }
    body.reduce-motion .helper-tip { transition:none; }
    .ch-sec { margin-bottom:10px; }
    .ch-sec.is-folded > [id$="List"] { display:none; }
    .ch-sec.is-empty { display:none; }
    .ch-sec-head { padding:6px 10px; margin-bottom:6px; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .ch-sec-head .cat-head-title { flex:1; }
    .ch-sec-count { font-size:9px; font-weight:800; color:#94a3b8; letter-spacing:0; }
    .ch-tone-cyan { color:#22d3ee; } .ch-tone-amber { color:#fbbf24; } .ch-tone-emerald { color:#34d399; }
    .ch-tone-violet { color:#a78bfa; } .ch-tone-sky { color:#38bdf8; } .ch-tone-slate { color:#cbd5e1; }
    .ch-reroll-btn { width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #34d399; color:#6ee7b7; background:rgba(6,78,59,.35); }
    .ch-reroll-btn .ic { width:14px; height:14px; }
    .ch-reroll-btn:disabled { opacity:.5; }
    .ch-reroll-note { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding:6px 8px; border-radius:8px; border:1px solid #1e293b; background:rgba(15,23,42,.7); font-size:9px; color:#94a3b8; }
    .ch-reroll-note .ic { width:12px; height:12px; flex-shrink:0; color:#34d399; }
    .ch-reroll-note b { color:#e2e8f0; }
    .lb-place { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; font-size:11px; font-weight:900; color:#1f2937; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6); }
    .lb-place.is-1 { background:linear-gradient(#fff4b8,#fbbf24 55%,#a16207); }
    .lb-place.is-2 { background:linear-gradient(#ffffff,#cbd5e1 55%,#64748b); }
    .lb-place.is-3 { background:linear-gradient(#ffd3a1,#d08a4a 55%,#7a4420); }
    button.ch-stat--done { cursor:pointer; }
    /* Visual clean-up: a readable type floor (no 7px text), calmer spacing on
       all-caps labels, and softer 1px page frames instead of thick orange. */
    .text-\[7px\] { font-size:8px !important; }
    .text-\[8px\] { font-size:9px !important; }
    .uppercase.tracking-widest { letter-spacing:.08em !important; }
    .uppercase.tracking-wider { letter-spacing:.04em !important; }
    /* One button system in the Shop: price = primary (filled gold);
       Preview / Gift = secondary (quiet outline); a short price = muted. */
    .cosmetic-preview-btn, .cosmetic-gift-btn { border:1px solid #475569 !important; background:transparent !important; color:#e2e8f0 !important; }
    .cosmetic-preview-btn:hover, .cosmetic-gift-btn:hover { background:#1e293b !important; color:#fff !important; }
    .cosmetic-gift-btn.is-target { background:#db2777 !important; border-color:#db2777 !important; color:#fff !important; }
    .cosmetic-buy-btn[aria-disabled="false"]:not([data-season-locked]) { background:#f59e0b !important; border-color:#f59e0b !important; color:#1c1917 !important; }
    .cosmetic-buy-btn[aria-disabled="false"]:not([data-season-locked]):hover { background:#fbbf24 !important; }
    div.fixed.inset-0 > div.border-2.border-amber-500 { border-width:1px !important; border-color:rgba(245,158,11,.45) !important; box-shadow:0 24px 60px rgba(0,0,0,.55) !important; }
    .coll-open { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:10px; row-gap:6px; align-items:center; width:100%; margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid #334155; background:#0f172a; text-align:left; color:#fcd34d; }
    .coll-open > .ic { width:22px; height:22px; grid-row:1 / 3; }
    .coll-open-text { display:flex; flex-direction:column; min-width:0; }
    .coll-open-text b { font-size:12px; color:#e2e8f0; }
    .coll-open-text small { font-size:10px; color:#94a3b8; }
    .coll-open .coll-bar { grid-column:2; }
    .coll-open-chev { grid-column:3; grid-row:1 / 3; font-size:20px; color:#94a3b8; }
    .coll-bar { display:block; height:5px; border-radius:999px; background:#1e293b; overflow:hidden; }
    .coll-bar > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f59e0b,#fcd34d); }
    .coll-overall { display:flex; flex-direction:column; gap:5px; margin-top:8px; font-size:10px; color:#94a3b8; }
    .coll-overall b { color:#fcd34d; font-size:13px; }
    .coll-section { margin-bottom:14px; }
    .coll-head { display:grid; grid-template-columns:1fr auto; row-gap:4px; margin-bottom:8px; font-size:10px; color:#94a3b8; }
    .coll-head b { font-size:11px; color:#e2e8f0; text-transform:uppercase; letter-spacing:.06em; }
    .coll-head .coll-bar { grid-column:1 / -1; }
    .coll-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
    .coll-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 3px 5px; border-radius:10px; border:1px solid #1e293b; background:#0f172a; min-width:0; }
    .coll-tile.is-picked { border-color:#f59e0b; }
    .coll-art { display:flex; align-items:center; justify-content:center; width:100%; height:46px; overflow:hidden; }
    .coll-art .mini-table { height:40px; }
    .coll-art .mini-table-name { display:none; }
    .coll-tile.is-locked .coll-art { filter:grayscale(1) brightness(.55); opacity:.7; }
    .coll-lock { position:absolute; top:4px; right:4px; color:#94a3b8; }
    .coll-lock .ic { width:12px; height:12px; }
    .coll-name { font-size:8px; font-weight:700; color:#cbd5e1; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .coll-tile.is-locked .coll-name { color:#64748b; }
    .coll-status { flex-shrink:0; margin-top:8px; padding-top:8px; border-top:1px solid #1e293b; font-size:10px; color:#94a3b8; text-align:center; min-height:1.4em; }
    .coll-status b { color:#e2e8f0; }
    .loadout-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
    .loadout-slot { position:relative; display:flex; flex-direction:column; gap:3px; padding:5px; border-radius:12px; border:1px solid #334155; background:rgba(15,23,42,.7); text-align:center; cursor:pointer; min-width:0; }
    .loadout-slot.loadout-locked { align-items:center; justify-content:center; color:#64748b; border-style:dashed; font-size:10px; font-weight:800; }
    .loadout-slot.loadout-locked svg { width:14px; height:14px; }
    .loadout-slot.is-active { border-color:#f59e0b; box-shadow:0 0 0 1px #f59e0b, 0 0 12px rgba(245,158,11,.25); }
    .loadout-slot .mini-table { height:40px; border-radius:7px; }
    .loadout-slot .mini-table-name { display:none; }
    .loadout-name { font-size:9px; font-weight:900; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:14px; }
    .loadout-slot.is-active .loadout-name { color:#fcd34d; }
    .loadout-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:58px; border-style:dashed; color:#94a3b8; font-size:9px; font-weight:900; }
    .loadout-empty b { font-size:16px; line-height:1; color:#fcd34d; }
    .loadout-more { position:absolute; right:3px; bottom:3px; width:18px; height:16px; border-radius:6px; font-size:11px; line-height:14px; color:#cbd5e1; background:rgba(2,6,23,.8); }
    .loadout-avatar { position:absolute; left:8px; top:8px; }
    .loadout-menu { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:3px; padding:4px; border-radius:12px; background:rgba(2,6,23,.97); z-index:2; overflow:hidden; }
    .loadout-menu button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; font-size:7px; font-weight:900; letter-spacing:.04em; line-height:1; padding:2px 0; border-radius:8px; border:1px solid #334155; color:#e2e8f0; white-space:nowrap; }
    .loadout-menu button i { font-style:normal; font-size:13px; line-height:1; }
    .loadout-menu button[data-loadout-act="clear"] { color:#fda4af; border-color:#7f1d1d; }
    .loadout-guest { grid-column:1/-1; font-size:9px; color:#94a3b8; text-align:center; padding:6px; border:1px dashed #334155; border-radius:10px; }
    .cat-section { margin-bottom:8px; }
    .cat-head { width:100%; display:flex; align-items:center; gap:8px; padding:7px 10px; margin-bottom:6px; border-radius:12px; border:1px solid #334155; background:linear-gradient(135deg,#0f172a,#020617 85%); text-align:left; cursor:pointer; }
    .cat-head-title { flex:1; min-width:0; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#fcd34d; }
    .cat-head-count { font-size:9px; font-weight:900; color:#94a3b8; }
    .cat-head-chev { flex:none; width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fcd34d; border:1px solid rgba(148,163,184,.35); transition:transform .18s var(--ease-snappy, ease); }
    .cat-head[aria-expanded="false"] .cat-head-chev { transform:rotate(-90deg); }
    .cat-section:has(> .cat-head[aria-expanded="false"]) { margin-bottom:4px; }
    .profile-sec-head { margin-bottom:6px; }
    .profile-sec-head[aria-expanded="false"] { margin-bottom:0; }
    .profile-sec-danger { border-color:#9f1239; }
    .profile-sec-danger .cat-head-title, .profile-sec-danger .cat-head-chev { color:#fb7185; }
    .profile-sec-body[hidden] { display:none !important; }
    .series-panel { background:#020617; border:1px solid #1e293b; border-radius:10px; padding:6px 10px; display:flex; flex-direction:column; gap:5px; }
    .series-panel.hidden { display:none; }
    .series-head { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
    .series-head .ic { width:14px; height:14px; color:#fcd34d; }
    button.series-head { width:100%; background:none; border:none; padding:0; text-align:left; cursor:pointer; }
    button.series-head > span:nth-of-type(1) { flex:1; }
    .series-head .cat-head-chev { width:18px; height:18px; font-size:11px; }
    .series-head[aria-expanded="false"] .cat-head-chev { transform:rotate(-90deg); }
    .series-head-lock { display:flex; align-items:center; gap:3px; font-size:9px; font-weight:800; letter-spacing:.02em; text-transform:none; color:#fcd34d; }
    .series-head-lock .ic { width:10px; height:10px; }
    .series-panel.series-folded > :not(.series-head) { display:none; }
    .series-choices { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
    .series-choice { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; border-radius:8px; border:1px solid #334155; background:#0f172a; color:#e2e8f0; font-size:10px; font-weight:900; line-height:1.1; }
    .series-choice small { font-size:9px; font-weight:800; color:#94a3b8; display:flex; align-items:center; gap:2px; }
    .series-choice small .ic { width:10px; height:10px; }
    .series-choice[aria-pressed="true"] { border-color:#f59e0b; background:rgba(245,158,11,.14); color:#fcd34d; }
    .series-choice:disabled:not([aria-pressed="true"]) { opacity:.45; cursor:not-allowed; }
    .series-choice[aria-pressed="true"]:disabled { cursor:default; }
    #profileDangerZone .profile-sec-body > div { border-color:#9f1239; background:rgba(76,5,25,.3); }
    .series-note { font-size:9px; color:#94a3b8; line-height:1.35; display:flex; align-items:center; gap:4px; }
    .series-note .ic { width:11px; height:11px; flex:none; }
    .series-note.series-lock { color:#fcd34d; }
    .series-status { font-size:10px; color:#e2e8f0; line-height:1.35; }
    .series-status b { color:#fcd34d; }
    .series-score { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:900; color:#fff; }
    .series-score em { font-style:normal; color:#fcd34d; font-size:14px; }
    .series-row-btns { display:flex; gap:6px; }
    .series-btn { flex:1; padding:6px 8px; border-radius:10px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; border:1px solid #475569; color:#cbd5e1; background:transparent; }
    .series-btn-primary { background:linear-gradient(180deg,#fbbf24,#d97706); border-color:#f59e0b; color:#0f172a; }
    .series-btn-danger { border-color:#be123c; color:#fda4af; }
    .series-btn:disabled { opacity:.5; }
    .series-btn-quiet { font-size:10px; font-weight:800; color:#94a3b8; padding:4px; background:none; border:none; }
    .series-modal-card { width:100%; max-width:20rem; background:#0f172a; border:1px solid rgba(245,158,11,.5); border-radius:16px; padding:18px; text-align:center; display:flex; flex-direction:column; gap:10px; box-shadow:0 25px 50px -12px rgba(0,0,0,.6); }
    .series-modal-icon { margin:0 auto; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(245,158,11,.14); color:#fcd34d; }
    .series-modal-icon .ic { width:24px; height:24px; }
    .series-modal-title { font-size:14px; font-weight:900; color:#fcd34d; letter-spacing:.04em; }
    .series-modal-text { font-size:12px; color:#e2e8f0; line-height:1.45; }
    .series-modal-pot { display:flex; justify-content:center; gap:14px; font-size:10px; color:#94a3b8; }
    .series-modal-pot b { display:flex; align-items:center; justify-content:center; gap:3px; font-size:14px; color:#fff; }
    .series-modal-pot b .ic { width:14px; height:14px; }
    .series-modal-status { font-size:10px; color:#fda4af; }
    .series-modal-actions { display:flex; flex-direction:column; gap:6px; }
    .series-modal-actions .series-btn { padding:9px; font-size:11px; }
    #seriesModal[data-mode="result"] #seriesAcceptBtn, #seriesModal[data-mode="result"] #seriesDeclineBtn { display:none; }
    .series-hud { position:absolute; top:8px; left:6px; z-index:30; display:flex; flex-direction:column; align-items:center; gap:1px; width:58px;
      padding:5px 3px; border-radius:12px; background:rgba(2,6,23,.82); border:1px solid rgba(245,158,11,.55);
      box-shadow:0 4px 12px rgba(0,0,0,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:none; }
    .series-hud.hidden { display:none; }
    .series-hud .sh-title { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#fcd34d; }
    .series-hud .sh-title .ic { width:11px; height:11px; }
    .series-hud .sh-score { display:flex; align-items:center; gap:5px; font-size:10px; color:#e2e8f0; min-width:0; }
    .series-hud .sh-score b { font-weight:800; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .series-hud .sh-score em { font-style:normal; font-weight:900; font-size:15px; line-height:1.1; color:#fff; }
    .series-hud .sh-next { font-size:8px; font-weight:700; color:#94a3b8; text-align:center; line-height:1.15; }
    .inbox-activity--series { background:rgba(69,26,3,.35); border-color:rgba(245,158,11,.6); }
    .inbox-activity--series .inbox-activity-accent { color:#fcd34d; }
    .custom-inline-preview { grid-column:1 / -1; border:1px solid rgba(34,211,238,.35); border-radius:12px; background:rgba(2,6,23,.6); padding:6px; }
    .custom-inline-preview > .shop-preview-stage, .custom-inline-preview > .jfx-stage { margin:0; }
    #challengeTabs { display:flex; gap:4px; }
    #challengeTabs.hidden { display:none; }
    #challengeTabs > .challenge-tab { flex:1 1 0; min-width:0; }
    .done-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:10px; color:#94a3b8; }
    .done-back { font-size:11px; font-weight:800; color:#fcd34d; padding:4px 10px; border-radius:999px; border:1px solid #334155; }
    .done-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid #1e293b; background:rgba(15,23,42,.7); }
    .done-tick { color:#34d399; flex:none; }
    .done-main { flex:1; min-width:0; display:flex; flex-direction:column; }
    .done-main b { font-size:11px; color:#e2e8f0; }
    .done-main small { font-size:9px; color:#94a3b8; line-height:1.35; }
    .done-reward { flex:none; font-size:11px; font-weight:800; color:#67e8f9; }
    .ch-stat-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:8px; }
    .ch-stat-bar > .ch-stat--diamonds { justify-self:start; }
    .ch-stat-bar > .ch-stat--done { justify-self:center; }
    .ch-stat-bar > .ch-stat--shop { justify-self:end; }
    .ch-stat { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:999px; border:1px solid; font-weight:900; font-size:11px; line-height:1; white-space:nowrap; }
    .ch-stat b { font-variant-numeric:tabular-nums; }
    .ch-stat small { font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
    .ch-stat--diamonds { color:#67e8f9; border-color:rgba(34,211,238,.35); background:rgba(8,51,68,.45); }
    .ch-stat--done { color:#6ee7b7; border-color:rgba(52,211,153,.35); background:rgba(6,78,59,.35); }
    .ch-stat--done.hidden { display:none; }
    .ch-stat--shop { grid-column:3; color:#fbbf24; border-color:rgba(245,158,11,.55); background:rgba(69,26,3,.4); cursor:pointer; transition:transform .12s var(--ease-snappy), background .15s; }
    .ch-stat--shop:hover { background:rgba(120,53,15,.55); }
    .ch-stat--shop:active { transform:scale(.95); }
    .ch-stat--shop .pack-icon { width:17px; height:17px; }
    .inbox-activity--referral { background:rgba(6,78,59,.3); border-color:rgba(52,211,153,.6); }
    .inbox-activity--level { background:rgba(8,47,73,.35); border-color:rgba(56,189,248,.6); }
    .inbox-activity--level .inbox-activity-accent { color:#7dd3fc; }
    /* § XP & levels (hidden until the owner's switch is on) */
    .xp-badge { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; height:16px; padding:0 5px; border-radius:6px; border:1px solid rgba(56,189,248,.7); background:linear-gradient(180deg,#0c4a6e,#082f49); color:#bae6fd; font-size:9px; font-weight:900; letter-spacing:.04em; line-height:1; white-space:nowrap; flex-shrink:0; }
    /* Level tiers (LEVEL_BADGE_TIERS): 20 bronze, 40 silver, 60 gold, 80 purple, 99 shimmering cyan. */
    .xp-badge.xp-tier-white { border-color:#e2e8f0; background:linear-gradient(180deg,#ffffff,#cbd5e1); color:#0f172a; }
    .xp-badge-lg.xp-tier-white { box-shadow:0 0 10px rgba(248,250,252,.18); }
    .xp-badge.xp-tier-bronze { border-color:#d08a4e; background:linear-gradient(180deg,#7c3f16,#4a230b); color:#fcd9b6; }
    .xp-badge.xp-tier-silver { border-color:#cbd5e1; background:linear-gradient(180deg,#64748b,#334155); color:#f1f5f9; }
    .xp-badge.xp-tier-gold { border-color:#fbbf24; background:linear-gradient(180deg,#a16207,#713f12); color:#fef3c7; }
    .xp-badge.xp-tier-purple { border-color:#c084fc; background:linear-gradient(180deg,#6b21a8,#3b0764); color:#f3e8ff; }
    .xp-badge.xp-tier-max { border-color:#96D6F4; color:#06283a; background:linear-gradient(110deg,#5fb8e0 0%,#96D6F4 35%,#e9f8ff 50%,#96D6F4 65%,#5fb8e0 100%); background-size:250% 100%; animation:xpTierShimmer 3.2s linear infinite; box-shadow:0 0 8px rgba(150,214,244,.55); }
    @keyframes xpTierShimmer { from { background-position:100% 0; } to { background-position:-150% 0; } }
    body.reduce-motion .xp-badge.xp-tier-max { animation:none; }
    /* Gauntlet avatars (v254): blade shine, gem glints, heart glow, sparks. */
    .av-gx-shine { animation:avGxShine 5s ease-in-out infinite; opacity:0; }
    @keyframes avGxShine { 0%, 8% { transform:translate(0,0); opacity:0; } 12% { opacity:1; } 30% { transform:translate(var(--dx),var(--dy)); opacity:1; } 34%, 100% { transform:translate(var(--dx),var(--dy)); opacity:0; } }
    .av-gx-glint { transform-box:fill-box; transform-origin:center; animation:avGxGlint 5s ease-out infinite; transform:scale(0); }
    @keyframes avGxGlint { 0%, 100% { transform:scale(0) rotate(0deg); opacity:0; } 4% { transform:scale(1) rotate(30deg); opacity:1; } 12% { transform:scale(0) rotate(80deg); opacity:0; } }
    .av-gx-heart { mix-blend-mode:screen; transform-box:fill-box; transform-origin:center; animation:avGxHeart 2.5s ease-in-out infinite; opacity:.25; }
    @keyframes avGxHeart { 50% { opacity:.7; transform:scale(1.08); } }
    .av-gx-spark { animation:avGxSpark 4.8s linear infinite; opacity:0; }
    @keyframes avGxSpark { 0% { transform:translateY(0); opacity:0; } 15% { opacity:.9; } 70% { opacity:.6; } 100% { transform:translateY(-420px); opacity:0; } }
    body.reduce-motion :is(.av-gx-shine, .av-gx-glint, .av-gx-spark) { animation:none; opacity:0; }
    /* Custom filters (v273, owner): ALL / OWNED / NOT OWNED / EQUIPPED, like the Shop. */
    #themesModal[data-custom-filter="owned"] [data-custom-panel] [data-equip-id][data-locked],
    #themesModal[data-custom-filter="unowned"] [data-custom-panel] [data-equip-id]:not([data-locked]),
    #themesModal[data-custom-filter="equipped"] [data-custom-panel] [data-equip-id]:not([aria-pressed="true"]),
    #themesModal .custom-filter-hidden { display:none !important; }
    .custom-filter-empty { margin:14px 0 4px; text-align:center; font-size:10px; font-weight:800; color:#94a3b8; }
    /* Level avatars (v256): eye glow, flame flicker, a gleam sweep. */
    .av-lx-eye { mix-blend-mode:screen; animation:avLxEye 5s ease-in-out infinite; opacity:.25; }
    @keyframes avLxEye { 0%, 100% { opacity:.25; } 20% { opacity:.95; } 26% { opacity:.4; } 32% { opacity:1; } 55% { opacity:.3; } }
    .av-lx-flicker { mix-blend-mode:screen; transform-box:fill-box; transform-origin:center; animation:avLxFlicker 1.9s ease-in-out infinite; opacity:.35; }
    @keyframes avLxFlicker { 0%, 100% { opacity:.3; transform:scale(1); } 35% { opacity:.75; transform:scale(1.08); } 60% { opacity:.45; transform:scale(.96); } }
    .av-lx-sweep { animation:avLxSweep 5s ease-in-out infinite; opacity:0; }
    @keyframes avLxSweep { 0%, 50% { transform:translateX(0); opacity:0; } 54% { opacity:1; } 72% { transform:translateX(var(--dx)); opacity:1; } 76%, 100% { transform:translateX(var(--dx)); opacity:0; } }
    body.reduce-motion :is(.av-lx-eye, .av-lx-flicker, .av-lx-sweep) { animation:none; }
    body.reduce-motion .av-lx-sweep { opacity:0; }
    body.reduce-motion .av-gx-heart { animation:none; opacity:.35; }
    .av-lvl-glow { animation:avLvlGlow 2.4s ease-in-out infinite; }
    @keyframes avLvlGlow { 50% { opacity:.85; } }
    body.reduce-motion .av-lvl-glow, .av-still .av-lvl-glow { animation:none; }
    .xp-badge-lg { height:34px; min-width:40px; padding:0 7px; border-radius:10px; font-size:12px; box-shadow:0 0 12px rgba(56,189,248,.25); }
    .xp-card { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid #1e293b; background:rgba(15,23,42,.6); }
    .xp-card-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
    .xp-bar { display:block; height:8px; border-radius:999px; background:#0f172a; border:1px solid #1e293b; overflow:hidden; }
    .xp-bar > i { display:block; height:100%; border-radius:inherit; background:var(--xp-fill); transition:width .6s var(--ease-soft); }
    /* One XP colour everywhere (Profile bar, header bar, match summary). */
    :root { --xp-fill: linear-gradient(90deg,#0ea5e9,#22d3ee 60%,#a5f3fc); --xp-edge: rgba(56,189,248,.55); --xp-glow: rgba(34,211,238,.55); }
    /* The header's XP bar: a 5px strip on the header's bottom edge with its
       own border; its hit area is a little taller so it can be tapped. */
    .hdr-xp { position:absolute; left:0; right:0; bottom:-1px; height:9px; display:flex; align-items:flex-end; cursor:pointer; z-index:1; outline:none; -webkit-tap-highlight-color:transparent; }
    .hdr-xp-track { display:block; width:100%; height:5px; background:#06121f; border-top:1px solid var(--xp-edge); border-bottom:1px solid rgba(8,47,73,.9); overflow:hidden; }
    .hdr-xp-track > i { display:block; height:100%; width:0; background:var(--xp-fill); box-shadow:0 0 6px var(--xp-glow); transition:width .7s var(--ease-soft); }
    .hdr-xp:hover .hdr-xp-track, .hdr-xp:focus-visible .hdr-xp-track, .hdr-xp.is-open .hdr-xp-track { border-top-color:#67e8f9; }
    .hdr-xp.xp-pulse .hdr-xp-track > i { animation: hdrXpPulse 1s var(--ease-soft); }
    @keyframes hdrXpPulse { 0%,100% { filter:none; } 35% { filter:brightness(1.7) drop-shadow(0 0 4px #67e8f9); } }
    body.reduce-motion .hdr-xp-track > i { transition:none; animation:none !important; }
    .hdr-xp-tip { position:fixed; z-index:205; top:calc(var(--header-h) + 6px); padding:7px 11px; border-radius:10px; border:1px solid var(--xp-edge); background:rgba(2,6,23,.96); box-shadow:0 8px 24px rgba(0,0,0,.5); color:#e0f2fe; font-size:11px; font-weight:700; line-height:1.35; white-space:nowrap; pointer-events:none; transform:translateX(-50%); }
    .hdr-xp-tip b { color:#67e8f9; font-weight:900; }
    .hdr-xp-tip small { display:block; color:#94a3b8; font-size:10px; font-weight:600; }
    .xp-card-sub { font-size:10px; color:#94a3b8; font-weight:700; }
    #emoteToggleBtn { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
    .lb-peek { flex:none; background:none; border:0; padding:0; cursor:pointer; border-radius:10px; }
    .lb-peek:hover > *, .lb-peek:focus-visible > * { filter:brightness(1.2); }
    [data-lb-row] { -webkit-touch-callout:none; }
    .lb-peek-card { min-width:190px; }
    .lb-peek-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; color:#fff; }
    .lb-peek-card dl { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0; }
    .lb-peek-card dt { color:#94a3b8; font-weight:700; }
    .lb-peek-card dd { margin:0; color:#f8fafc; font-weight:800; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
    .lb-peek-card dd svg { width:13px; height:13px; }
    .inbox-unlock-thumb { flex:none; display:flex; align-items:center; justify-content:center; min-width:42px; }
    .inbox-unlock-thumb .mini-table { transform:scale(.5); transform-origin:center; margin:-20px -30px; }
    #inboxArea [data-mail-idx] { cursor:pointer; position:relative; transition:box-shadow .15s var(--ease-soft, ease), transform .15s var(--ease-snappy, ease); }
    #inboxArea [data-mail-idx]:hover, #inboxArea [data-mail-idx]:focus-visible { box-shadow:0 0 0 1px rgba(251,191,36,.6); outline:none; }
    #inboxArea [data-mail-idx]:active { transform:scale(.985); }
    #inboxArea [data-mail-idx]::after { content:'›'; position:absolute; top:6px; right:10px; font-size:16px; font-weight:900; line-height:1; color:rgba(251,191,36,.75); pointer-events:none; }
    .mail-focus { animation:mailFocusPulse 1.2s ease-in-out 2; border-radius:12px; }
    @keyframes mailFocusPulse { 50% { box-shadow:0 0 0 2px rgba(251,191,36,.8), 0 0 18px rgba(251,191,36,.45); } }
    body.reduce-motion .mail-focus { animation:none; box-shadow:0 0 0 2px rgba(251,191,36,.8); }
    .term-link { display:inline; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; text-decoration:underline; text-decoration-color:rgba(251,191,36,.7); text-underline-offset:2px; text-decoration-thickness:1px; cursor:pointer; }
    .term-link:hover, .term-link:focus-visible { color:#fbbf24; }
    #rulesModal [data-term] { border-radius:8px; transition:background-color .4s var(--ease-soft, ease), box-shadow .4s var(--ease-soft, ease); }
    #rulesModal .term-focus { background:rgba(251,191,36,.14); box-shadow:0 0 0 2px rgba(251,191,36,.75); padding:4px 6px; margin:0 -6px; animation:termFocusPulse 1.2s ease-in-out 2; }
    @keyframes termFocusPulse { 50% { box-shadow:0 0 0 4px rgba(251,191,36,.35), 0 0 18px rgba(251,191,36,.45); } }
    body.reduce-motion #rulesModal .term-focus { animation:none; }
    /* § Big preview (press and hold an item). Above pages (95), below the
       victory layer (110) so a victory preview plays over it. */
    #bigPreview { position:fixed; inset:0; z-index:105; display:flex; align-items:center; justify-content:center; padding:calc(var(--header-h, 2.75rem) + var(--safe-top, 0px) + 12px) 16px 16px; background:rgba(2,6,23,.82); backdrop-filter:blur(4px); }
    #bigPreview.hidden { display:none; }
    #bigPreview .bp-panel { position:relative; width:min(360px, 100%); max-height:100%; overflow:auto; background:#0f172a; border:1px solid rgba(251,191,36,.45); border-radius:18px; padding:16px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6); }
    #bigPreview .bp-close { position:absolute; top:8px; right:10px; width:30px; height:30px; border-radius:999px; color:#94a3b8; font-size:16px; font-weight:900; }
    #bigPreview .bp-name { font-size:17px; font-weight:900; color:#fff; padding:0 28px; }
    #bigPreview .bp-kind { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#67e8f9; margin-top:2px; }
    #bigPreview .bp-stage { margin:14px 0 10px; min-height:220px; display:flex; align-items:center; justify-content:center; }
    #bigPreview .bp-status { font-size:11px; font-weight:700; color:#cbd5e1; }
    #bigPreview .bp-equip { margin-top:10px; width:100%; padding:9px; border-radius:12px; background:linear-gradient(180deg,#fbbf24,#d97706); color:#1c1204; font-size:11px; font-weight:900; }
    #bigPreview .bp-equip.is-on { background:transparent; border:1px solid #34d399; color:#6ee7b7; }
    #bigPreview .bp-shop { margin-top:10px; width:100%; padding:9px; border-radius:12px; background:linear-gradient(180deg,#fbbf24,#d97706); color:#1c1204; font-size:11px; font-weight:900; }
    #bigPreview .bp-play { margin-top:10px; width:100%; padding:9px; border-radius:12px; border:1px solid #475569; color:#e2e8f0; font-size:11px; font-weight:900; }
    #bigPreview .bp-stage-fx { width:100%; height:280px; min-height:280px; }
    #bigPreview .bp-card { width:150px !important; height:210px !important; max-width:none !important; max-height:none !important; }
    #bigPreview .bp-frame { display:flex; flex-direction:column; justify-content:space-between; padding:10px 12px; }
    #bigPreview .bp-rank { font-size:40px; line-height:1; text-align:left; }
    #bigPreview .bp-suit { font-size:56px; line-height:1; text-align:right; }
    #bigPreview .bp-avatar { display:flex; }
    #bigPreview .bp-table { width:100%; display:flex; justify-content:center; transform:scale(1.12); transform-origin:center; margin:14px 0; }
    #bigPreview .bp-deck { display:flex; gap:14px; transform:scale(1.8); margin:40px 0; }
    #bigPreview .bp-victory { font-size:96px; line-height:1; }
    #bigPreview .bp-emotes { display:grid; grid-template-columns:repeat(3, 64px); gap:12px; }
    #bigPreview .bp-emotes span { width:64px; height:64px; border-radius:999px; background:#1e293b; border:1px solid rgba(251,191,36,.5); display:flex; align-items:center; justify-content:center; font-size:34px; }
    :is(#themesModal [data-equip-id], #collectionModal [data-coll-id], #shopModal [data-shop-row]) { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
    /* § Level Ladder (v277) */
    #levelLadderModal .ll-panel { display:flex; flex-direction:column; max-height:85vh; overflow:hidden; padding:0; background:radial-gradient(120% 50% at 50% 0%,#1e1b4b 0%,#0b1020 50%,#05070f 100%); }
    #levelLadderModal .ll-top { flex-shrink:0; padding:12px 14px 10px; border-bottom:1px solid rgba(245,158,11,.25); background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.88)); box-shadow:0 8px 20px rgba(0,0,0,.45); position:relative; z-index:2; }
    #levelLadderModal .ll-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    #levelLadderModal .ll-title > span { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#fbbf24; }
    #levelLadderModal .ll-title .ic { width:18px; height:18px; }
    .ll-hero { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
    .ll-name { font-weight:900; font-size:15px; display:flex; gap:8px; align-items:center; color:#f8fafc; min-width:0; }
    .ll-name > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ll-bar { display:block; height:10px; border-radius:6px; background:#0f172a; border:1px solid #334155; overflow:hidden; margin:7px 0 4px; }
    .ll-bar i { display:block; height:100%; background:var(--xp-fill); border-radius:6px; }
    .ll-barline { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:#94a3b8; font-weight:700; }
    .ll-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
    .ll-stat { background:rgba(15,23,42,.8); border:1px solid #1e293b; border-radius:10px; padding:5px 6px; text-align:center; }
    .ll-stat b { display:block; font-size:13px; color:#f8fafc; }
    .ll-stat small { font-size:9px; color:#94a3b8; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .ll-next { margin-top:9px; display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:linear-gradient(90deg,rgba(251,146,60,.16),rgba(251,146,60,.03)); border:1px solid rgba(251,146,60,.4); border-radius:10px; padding:6px 8px; font-size:11px; color:#e2e8f0; }
    .ll-next b { color:#fdba74; }
    .ll-next small { display:block; color:#94a3b8; font-size:10px; font-weight:600; }
    .ll-next > :first-child { flex-shrink:0; }
    .ll-signin { margin-top:8px; font-size:10.5px; color:#fcd34d; text-align:center; }
    .ll-scroll { flex:1; overflow:auto; padding:12px 14px 30px; position:relative; overscroll-behavior:contain; }
    .ll-line { position:absolute; left:33px; width:4px; border-radius:2px; background:#1e293b; pointer-events:none; }
    .ll-line i { position:absolute; left:0; top:0; width:100%; height:0; border-radius:2px; background:linear-gradient(180deg,#fde68a,#f59e0b); box-shadow:0 0 10px rgba(245,158,11,.7); transition:height 1.1s var(--ease-soft, ease-out); }
    body.reduce-motion .ll-line i { transition:none; }
    .ll-row, .ll-here, .ll-gap { position:relative; padding-left:46px; margin-bottom:10px; }
    .ll-node { position:absolute; left:4px; top:12px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:12px; background:#0f172a; border:2px solid #334155; color:#64748b; z-index:1; }
    .ll-node .ic { width:16px; height:16px; }
    .ll-row.got .ll-node { background:linear-gradient(180deg,#fbbf24,#b45309); border-color:#fde68a; color:#1c1917; }
    .ll-card { background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.92)); border:1px solid #334155; border-radius:14px; padding:8px 10px; }
    .ll-row.big .ll-card { border-color:rgba(245,158,11,.45); }
    .ll-row.got .ll-card { border-color:rgba(245,158,11,.55); }
    .ll-row.locked .ll-piece-art { filter:saturate(.55) brightness(.75); }
    .ll-head { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; }
    .ll-done { color:#86efac; display:inline-flex; gap:3px; align-items:center; }
    .ll-done .ic { width:11px; height:11px; }
    .ll-away { color:#94a3b8; }
    .ll-gem { display:inline-flex; align-items:center; gap:3px; color:#bae6fd; font-weight:900; font-size:10px; margin-left:auto; }
    .ll-gem .ic { width:12px; height:12px; }
    .ll-pieces { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
    .ll-piece { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; min-width:0; padding:2px; border-radius:10px; background:none; border:0; color:inherit; cursor:pointer; -webkit-touch-callout:none; user-select:none; }
    .ll-piece:focus-visible { outline:2px solid #fbbf24; }
    .ll-piece-art { height:44px; display:grid; place-items:center; }
    .ll-pname { font-size:9.5px; font-weight:800; color:#f1f5f9; line-height:1.15; }
    .ll-pkind { font-size:8px; font-weight:800; color:#94a3b8; letter-spacing:.08em; text-transform:uppercase; }
    .ll-unlock { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--t) 18%,#0f172a); border:1px solid color-mix(in srgb,var(--t) 60%,transparent); color:var(--t); }
    .ll-unlock .ic { width:20px; height:20px; }
    .ll-only { font-size:10px; color:#94a3b8; margin-top:6px; }
    .ll-gap { font-size:10px; color:#64748b; font-weight:700; display:flex; align-items:center; gap:5px; min-height:18px; }
    .ll-gap.got { color:#a8a29e; }
    .ll-gap .ll-gem { margin-left:0; }
    .ll-tick { position:absolute; left:17px; width:8px; height:8px; border-radius:50%; background:#334155; }
    .ll-gap.got .ll-tick { background:#f59e0b; }
    .ll-here .ll-node { width:40px; height:40px; left:1px; top:6px; background:radial-gradient(circle,#38bdf8,#0369a1); border:2px solid #e0f2fe; color:#fff; font-size:14px; box-shadow:0 0 0 6px rgba(56,189,248,.18),0 0 22px rgba(56,189,248,.8); animation:ll-pulse 2.4s ease-in-out infinite; }
    @keyframes ll-pulse { 50% { box-shadow:0 0 0 10px rgba(56,189,248,.08),0 0 28px rgba(56,189,248,.9); } }
    body.reduce-motion .ll-here .ll-node { animation:none; }
    .ll-here-card { border:1px solid rgba(56,189,248,.7); background:linear-gradient(90deg,rgba(14,116,144,.35),rgba(15,23,42,.9)); border-radius:14px; padding:8px 10px; }
    .ll-here-top { font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#7dd3fc; }
    .ll-here-sub { display:flex; gap:8px; align-items:center; font-size:10.5px; color:#cbd5e1; font-weight:700; margin-top:3px; }
    .ll-row.final .ll-card { background:radial-gradient(120% 140% at 50% 0%,rgba(251,191,36,.25),rgba(15,23,42,.95) 60%); border-color:#fbbf24; box-shadow:0 0 24px rgba(251,191,36,.25); }
    .ll-final-title { text-align:center; font-weight:900; letter-spacing:.2em; color:#fde68a; font-size:12px; margin-bottom:6px; text-transform:uppercase; }
    .ll-row.final .ll-piece-art { filter:none; }
    .ll-help { margin:6px 0 0 46px; font-size:9.5px; color:#64748b; }
    .ll-how { margin-bottom:14px; border:1px solid #1e293b; border-radius:12px; padding:8px 10px; background:rgba(15,23,42,.8); font-size:10.5px; color:#cbd5e1; }
    .ll-how summary { cursor:pointer; color:#fbbf24; font-weight:900; letter-spacing:.12em; font-size:10px; text-transform:uppercase; list-style:none; display:flex; justify-content:space-between; }
    .ll-how summary::-webkit-details-marker { display:none; }
    .ll-how summary::after { content:'▾'; color:#64748b; transition:transform .2s; }
    .ll-how[open] summary::after { transform:rotate(180deg); }
    .ll-xp { display:grid; grid-template-columns:1fr auto; gap:2px 10px; margin-top:6px; color:#94a3b8; }
    .ll-xp span:nth-child(2n) { color:#e2e8f0; font-weight:800; text-align:right; }
    .ll-node, .ll-gap [data-ladder-node] { cursor:pointer; }
    .ll-gap > span[data-ladder-node]:not(.ll-tick) { display:inline-flex; align-items:center; gap:5px; }
    .ll-row.ll-new .ll-card { border-color:#fde68a; box-shadow:0 0 0 1px rgba(253,230,138,.5),0 0 22px rgba(251,191,36,.45); animation:ll-new-glow 2.2s ease-in-out infinite; }
    @keyframes ll-new-glow { 50% { box-shadow:0 0 0 1px rgba(253,230,138,.8),0 0 32px rgba(251,191,36,.7); } }
    body.reduce-motion .ll-row.ll-new .ll-card { animation:none; }
    .ll-gap.ll-new { color:#fde68a; }
    .ll-new-tag { color:#fde68a; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:9px; }
    .ll-equip { display:none; margin-top:2px; padding:1px 6px; border-radius:999px; background:#f59e0b; color:#1c1917; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .ll-row.ll-new .ll-equip { display:inline-block; }
    .ll-friends { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; padding-top:6px; border-top:1px dashed rgba(148,163,184,.25); }
    .ll-gap .ll-friends { border-top:0; margin:0 0 0 auto; padding:0; }
    .ll-friend { display:inline-flex; align-items:center; gap:4px; padding:1px 7px 1px 1px; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:rgba(15,23,42,.85); color:#e2e8f0; font-size:9px; font-weight:800; max-width:140px; cursor:pointer; }
    .ll-friend > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ll-friend-more { font-size:9px; font-weight:800; color:#e2e8f0; align-self:center; padding:3px 8px; border-radius:999px; border:1px solid rgba(245,158,11,.55); background:rgba(120,53,15,.35); cursor:pointer; }
    .ll-friend-list { display:flex; flex-direction:column; gap:5px; max-height:min(50vh, 320px); overflow-y:auto; min-width:180px; }
    .ll-friend-list > b { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fcd34d; }
    .ll-friend.ll-friend-row { max-width:none; width:100%; padding:2px 8px 2px 2px; font-size:11px; border-radius:12px; }
    .ll-friend-row small { display:block; font-size:9px; font-weight:700; color:#94a3b8; }
    button.ms-levelup { cursor:pointer; display:block; font-family:inherit; }
    .ms-levelup .ms-levelup-see { margin-top:2px; color:#fde68a; opacity:1; letter-spacing:.08em; }
    /* "New" dot on your level (v279): unseen Level Ladder rewards. */
    .ll-new-dot { position:relative; }
    .ll-new-dot::after { content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 2px #0f172a, 0 0 8px rgba(251,191,36,.9); pointer-events:none; animation:llDotPulse 1.8s ease-in-out infinite; }
    @keyframes llDotPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
    body.reduce-motion .ll-new-dot::after { animation:none; }
    .xp-ladder-link { display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:5px 10px; border-radius:10px; border:1px solid rgba(245,158,11,.5); background:rgba(120,53,15,.25); color:#fcd34d; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
    #homeNameLevel, #profileLevelBadge, #hamburgerLevel, #headerXpBar { cursor:pointer; }
    .xp-reward-next { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:6px 10px; border-radius:12px; border:1px solid rgba(148,163,184,.35); background:rgba(15,23,42,.6); text-align:left; font-size:11px; font-weight:800; color:#e2e8f0; cursor:pointer; }
    .xp-reward-next:hover { border-color:rgba(251,191,36,.6); }
    .xp-reward-next small { display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#fbbf24; }
    .xp-reward-art { flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:44px; }
    .xp-reward-art .mini-table { transform:scale(.55); transform-origin:center; }
    #hamburgerAccountHead .drawer-level { display:inline-flex; flex-shrink:0; }
    .xp-badge-sm { height:14px; padding:0 4px; font-size:8px; border-radius:5px; }
    .xp-badge-seat { height:calc(var(--opp-name-size, 9px) + 5px); padding:0 4px; font-size:max(8px, calc(var(--opp-name-size, 9px) - 1px)); border-radius:5px; margin-left:4px; }
    .hand-level { display:inline-flex; align-items:center; vertical-align:middle; }
    #profileLevelBadge { display:inline-flex; margin-left:6px; flex-shrink:0; }
    #profileLevelBadge.hidden, .hand-level.hidden, #hamburgerAccountHead .drawer-level.hidden, .hdr-xp.hidden, .hdr-xp-tip.hidden { display:none; }
    .profile-xp { margin-top:10px; }
    .ms-xp-gain { color:#7dd3fc; white-space:nowrap; }
    .ms-levelup { position:relative; overflow:hidden; margin:8px auto 0; width:fit-content; padding:6px 14px; border-radius:12px; border:2px solid #38bdf8; color:#bae6fd; background:rgba(8,47,73,.5); font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
    .ms-levelup small { display:block; font-size:8px; letter-spacing:.14em; opacity:.8; }
    .ms-levelup span { color:#fcd34d; margin-left:4px; }
    .ms-levelup.mi-rank-in { animation: miRankFlip .7s var(--ease-spring) both; }
    .inbox-activity--referral .inbox-activity-accent { color:#6ee7b7; }
    .inbox-activity--board { background:linear-gradient(135deg, rgba(120,53,15,.45), rgba(15,23,42,.6)); border-color:rgba(251,191,36,.75); }
    .inbox-activity--board .inbox-activity-accent { color:#fcd34d; }
    .board-mail-medal { font-size:26px; line-height:1; flex-shrink:0; }
    .board-mail-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
    /* Referrals: Friends → Invite Friends button, Profile → Invite Friends section. */
    .ref-invite-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem; margin-bottom:.5rem; border-radius:.6rem;
      border:1.5px solid #10b981; background:linear-gradient(135deg,rgba(6,78,59,.55),rgba(4,47,46,.55)); color:#a7f3d0; font-weight:900; font-size:.68rem; letter-spacing:.1em; }
    .ref-invite-btn:active { transform:scale(.97); }
    .ref-invite-btn small { display:block; font-size:.55rem; letter-spacing:.02em; font-weight:700; color:#6ee7b7; opacity:.85; }
    .ref-card { background:rgba(15,23,42,.6); border:1px solid #1e293b; border-radius:.75rem; padding:.7rem .75rem; }
    .ref-code-row { display:flex; align-items:center; gap:.5rem; }
    .ref-code { flex:1; min-width:0; font:900 1rem/1.1 ui-monospace,Menlo,monospace; letter-spacing:.12em; color:#fbbf24; }
    .ref-link { display:block; font-size:.6rem; color:#94a3b8; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ref-btn { flex:none; font-size:.6rem; font-weight:900; letter-spacing:.08em; padding:.35rem .6rem; border-radius:.5rem; border:1px solid #10b981; color:#6ee7b7; }
    .ref-btn:hover { background:#10b981; color:#022c22; }
    .ref-how { font-size:.62rem; color:#94a3b8; line-height:1.45; margin-top:.5rem; }
    .ref-how b { color:#e2e8f0; }
    .ref-stat-row { display:flex; gap:.4rem; margin-top:.55rem; }
    .ref-stat { flex:1; text-align:center; padding:.35rem .2rem; border-radius:.55rem; background:#020617; border:1px solid #1e293b; }
    .ref-stat b { display:block; font-size:.85rem; color:#fff; }
    .ref-stat span { font-size:.5rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#64748b; }
    .ref-list { margin-top:.55rem; display:flex; flex-direction:column; gap:.3rem; }
    .ref-person { display:flex; align-items:center; gap:.5rem; font-size:.68rem; color:#e2e8f0; }
    .ref-person .ref-name { flex:1; min-width:0; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ref-pips { display:flex; gap:3px; }
    .ref-pips i { width:9px; height:9px; border-radius:50%; background:#1e293b; border:1px solid #334155; }
    .ref-pips i.on { background:#10b981; border-color:#34d399; }
    .ref-person .ref-state { font-size:.58rem; font-weight:900; color:#6ee7b7; min-width:3.2rem; text-align:right; }
    .ref-invited { margin-top:.55rem; padding:.45rem .55rem; border-radius:.55rem; background:rgba(6,78,59,.25); border:1px solid rgba(16,185,129,.4); font-size:.64rem; color:#a7f3d0; }
    /* STAGE 1 — Menu structure and responsive presentation.
       Mobile default: a slide-up bottom sheet, anchored to the bottom edge.
       Desktop (min-width: 768px, matching Tailwind's own md: breakpoint
       used everywhere else in this file): a compact dropdown anchored
       under the hamburger button instead. This is ONE drawer element with
       ONE set of menu-item buttons underneath (no duplicate IDs, no
       duplicate listeners) — only the CONTAINER's position/size/transform
       changes per breakpoint, via a real @media query here rather than
       Tailwind's md: utility classes, because the two presentations need
       different transform behavior (translateY vs translateY+scale) that
       doesn't reduce to one shared utility, and this project has no live
       Tailwind compiler to safely generate a new one on demand. Viewport
       width is the only thing gating this — no user-agent sniffing. */
    #hamburgerDrawer {
      position: fixed;
      z-index: 203;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      width: auto;
      max-width: none;
      max-height: 42vh;
      background: #020617;
      box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
      border: none;
      border-top: 2px solid #f59e0b;
      border-radius: 20px 20px 0 0;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.25s ease-out;
    }
    #hamburgerDrawer.open { transform: translateY(0); }
    body:not(.xp-on) #menuLadderBtn { display: none; }
    #multiSelectToggleBtn .rank-toggle-svg { width: 86%; height: 86%; }
    #multiSelectToggleBtn .rank-toggle-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #f43f5e; border: 2px solid #0f172a; pointer-events: none; }
    #multiSelectToggleBtn[data-on="1"] .rank-toggle-dot { background: #34d399; }
    #multiSelectToggleBtn[data-on="0"] svg { opacity: .72; }
    #hamburgerDragHandle { display: block; width: 40px; height: 4px; border-radius: 999px; background: #475569; margin: 10px auto 2px; flex-shrink: 0; }
    @media (min-width: 768px) {
      /* Desktop gets a genuinely larger control bar; mobile retains the
         compact 44px header so it does not steal vertical game space. */
      body > header { height: calc(60px + var(--safe-top)) !important; padding: calc(7px + var(--safe-top)) 18px 7px !important; }
      body > header .brand-logo-rendered { font-size: 32px !important; }
      #leaveGameBtn, #headerProfileBtn, #headerInboxBtn, #hamburgerBtn, #headerShopBtn, #headerCustomBtn, #headerGuideBtn, #headerDevBtn, #headerSettingsBtn {
        width: 38px !important;
        height: 38px !important;
      }
      #leaveGameBtn svg, #headerProfileBtn svg, #headerInboxBtn > svg, #hamburgerBtn svg, #headerShopBtn svg, #headerCustomBtn svg, #headerGuideBtn, #headerDevBtn svg, #headerSettingsBtn svg {
        width: 38px !important;
        height: 38px !important;
      }
      #headerDiamondBtn, #roomCodeBadge { height: 38px !important; padding-left: 12px !important; padding-right: 12px !important; }
      #headerDiamondBtn .header-gem .ic-gem { width: 24px !important; height: 24px !important; }
      #headerDiamondCount { font-size: 17px !important; }
      #roomCodeBadge { font-size: 14px !important; }
      #gameTable { height: calc(var(--app-h, 100dvh) - 60px - var(--safe-top)) !important; max-height: calc(var(--app-h, 100dvh) - 60px - var(--safe-top)) !important; }
      #hamburgerDrawer {
        left: auto;
        right: 18px;
        bottom: auto;
        top: calc(66px + var(--safe-top));
        width: 310px;
        max-width: 310px;
        max-height: 82vh;
        border-radius: 16px;
        border: 2px solid #f59e0b;
        border-top: 2px solid #f59e0b;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        transform: translateY(-6px) scale(0.97);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.15s ease-out, opacity 0.15s ease-out;
      }
      #hamburgerDrawer.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
      /* A full-screen dim behind a 210px dropdown would itself violate
         "does not cover half the game screen" — the overlay element stays
         (it's still what makes outside-click-to-close work), it's just
         invisible on desktop. */
      #hamburgerOverlay { background: transparent; }
      #hamburgerDragHandle { display: none; }
      #hamburgerDrawer > div:nth-child(2) { padding: 18px !important; }
      #hamburgerAccountLabel { font-size: 17px !important; }
      #drawerGuideShortcutBtn, #drawerSettingsShortcutBtn, #drawerChallengesShortcutBtn, #drawerShopShortcutBtn { height: 44px !important; }
      #drawerGuideShortcutBtn .pack-icon, #drawerSettingsShortcutBtn .pack-icon, #drawerChallengesShortcutBtn .pack-icon, #drawerShopShortcutBtn .pack-icon { width: 31px; height: 31px; }
      #hamburgerDrawer nav { padding: 10px !important; }
      .hamburger-menu-item { padding: 13px 15px !important; border-radius: 12px !important; font-size: 14px !important; gap: 12px !important; }
      .hamburger-menu-item .item-icon, .hamburger-menu-item .item-icon svg { width: 30px !important; height: 30px !important; }
      .hamburger-menu-item .item-badge { font-size: 10px; }
    }
    .hamburger-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #cbd5e1; background: transparent; border: none; text-align: left; transition: background 0.15s; cursor: pointer; }
    .hamburger-menu-item:hover { background: rgba(51,65,85,0.6); }
    .hamburger-menu-item .item-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; text-align: center; flex-shrink: 0; }
    .hamburger-menu-item .item-icon svg { width: 24px; height: 24px; display: block; }
    body > header { position:relative; z-index:202 !important; }
    #hamburgerOverlay { z-index:201 !important; }
    .pack-icon { display:inline-block; width:24px; height:24px; vertical-align:middle; }
    .pack-icon-lg { width:42px; height:42px; }
    .page-title-has-icon { display:inline-flex !important; align-items:center; gap:8px; }
    .page-title-has-icon .page-title-icon { flex:none; }
    #rulesModal h3.page-title-has-icon .page-title-icon { width:28px; height:28px; }
    /* One chevron scale for every collapsible surface: Settings, Tutorial
       Hub, Challenges, deck themes and the Guide accordions. */
    .settings-chev, .section-chevron, .chevron {
      display: inline-flex;
      width: 14px;
      height: 14px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px !important;
      line-height: 1;
      transform-origin: center;
    }
    .hamburger-menu-item .item-badge { background: #dc2626; color: white; font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 999px; margin-left: auto; }
    .hamburger-menu-item .item-soon { font-size: 8px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
    .menu-page-jump {
      position: fixed;
      right: max(12px, env(safe-area-inset-right));
      bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
      z-index: 119;
      border: 1px solid #475569;
      background: rgba(2,6,23,.94);
      color: #cbd5e1;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .03em;
      box-shadow: 0 5px 18px rgba(0,0,0,.45);
      backdrop-filter: blur(8px);
    }
    .menu-page-jump:hover { border-color:#f59e0b; color:#fbbf24; }
    .menu-page-jump.is-top-target { border-color:#f59e0b; color:#fbbf24; }
    @media (min-width:768px) {
      .menu-page-jump { right:24px; bottom:20px; padding:8px 12px; font-size:10px; }
    }

    /* Challenge Toast — a sleek slide-down notification for mid-game
       challenge completions. Tap/swipe-dismissible per spec: touch-action
       is pan-x (not none) so a horizontal swipe drag can be tracked by JS
       instead of being eaten by the browser as a scroll gesture, and the
       whole card is one click target rather than requiring a small close
       icon to be hit precisely mid-game.
       BUG FIX: this was previously anchored with `bottom: 76px`, a fixed
       offset that could get clipped by a mobile browser's own bottom
       chrome (address bar, home-indicator area) or collide with this
       game's own bottom controls depending on device/viewport. Anchored
       to the top instead, with env(safe-area-inset-top) so it clears a
       notch/status bar on devices that have one — top-center is clear of
       every other fixed element in this game on any screen size. */
    #challengeToast {
      position: fixed;
      left: 50%;
      /* JS measures the real global-header bottom edge. The fallback keeps
         the toast below the header even before the first measurement. */
      top: var(--challenge-toast-top, calc(env(safe-area-inset-top, 0px) + 56px));
      transform: translateX(-50%) translateY(-20px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
      /* Above page/modal content, below the global header and hamburger. */
      z-index: 190;
      max-width: calc(100vw - 24px);
      touch-action: pan-x;
    }
    #challengeToast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    #challengeToast.dismissing {
      transform: translateX(-50%) translateY(-14px);
      opacity: 0;
      transition: transform 0.16s ease, opacity 0.16s ease;
    }
    #challengeToast .toast-card {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(2, 6, 23, 0.96);
      border: 1px solid #f59e0b;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      cursor: pointer;
    }

    /* Diamond counter animations — a satisfying pulse/scale + green flash
       when diamonds are gained, a shake + red flash when spent. Applied
       to #headerDiamondCount only (the number itself, not the whole
       button), so the icon and button chrome stay put while the number
       reacts. Removed via 'animationend' in JS rather than a fixed
       setTimeout, so it can never get stuck mid-animation if two changes
       land in quick succession. */
    @keyframes diamondPulseUp {
      0% { transform: scale(1); }
      35% { transform: scale(1.35); }
      65% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    @keyframes diamondShakeDown {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-3px); }
      40% { transform: translateX(3px); }
      60% { transform: translateX(-2px); }
      80% { transform: translateX(2px); }
    }
    #headerDiamondCount.diamond-flash-up {
      animation: diamondPulseUp 0.45s ease;
      color: #34d399 !important;
    }
    #headerDiamondCount.diamond-flash-down {
      animation: diamondShakeDown 0.4s ease;
      color: #f87171 !important;
    }
    /* BUG FIX (Delete Account invisible/behind everything): this used to
       rely on a Tailwind arbitrary-value class (z-[100], then z-[96]
       before that) — but this app ships a PRECOMPILED, PURGED Tailwind
       bundle, and neither of those values was ever actually compiled
       into it (only a fixed set of arbitrary z-index values happen to
       exist, e.g. z-[95] and z-[120] elsewhere in this file — the
       exact list is invisible from the class name alone). An
       uncompiled arbitrary-value class produces NO CSS at all, silently
       — the element was left at the default stacking level, so later,
       perfectly ordinary in-flow page content (like the live game
       board) painted right over it. A plain hand-written rule, exactly
       like #challengeToast's own z-index below, is the one way to
       guarantee this actually applies regardless of what happens to be
       in the compiled bundle. 120 gives real headroom above every
       other overlay in this file (the highest of the rest is 95).
       #deleteAccountModal doubles as its own backdrop (one div, no
       separate overlay element), so this single rule covers both. */
    #deleteAccountModal { z-index: 120; }
    .presence-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
    /* Friends list rows */
    #friendsListArea { display:flex; flex-direction:column; gap:7px; }
    .friend-row { display:flex; flex-direction:column; gap:8px; padding:9px 10px; border-radius:14px; border:1px solid #1e293b; background:rgba(15,23,42,.6); }
    .friend-main { display:flex; align-items:center; gap:9px; min-width:0; }
    .friend-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
    .friend-name { font-size:14px; font-weight:900; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .friend-rank { font-size:10px; font-weight:800; color:rgba(251,191,36,.9); white-space:nowrap; }
    .friend-status { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:#64748b; }
    .friend-status.online { color:#34d399; }
    .friend-status.playing { color:#fbbf24; text-transform:none; letter-spacing:.02em; }
    #spectateBar { position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--header-h) + 6px); z-index:64; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 12px; border-radius:999px; border:1px solid #0891b2; background:rgba(8,47,73,.92); color:#a5f3fc; font-size:11px; font-weight:900; box-shadow:0 6px 18px rgba(0,0,0,.45); white-space:nowrap; max-width:calc(100vw - 24px); }
    #spectateBar button { padding:4px 12px; border-radius:999px; background:#0891b2; color:#020617; font-weight:900; font-size:10px; letter-spacing:.08em; }
    body.spectating #gameTable { pointer-events:none; }
    /* The centre row never moves: each column is exactly its card's width
       (labels may spill past it, centred), the Pile's power tag has its own
       reserved line, and Snap Burn floats beside the Base Card (or over it
       where there's no room) instead of joining the row. */
    #centerStacksRow { align-items:flex-start !important; }
    #deckZone, #pileZone { flex:none; width:clamp(52px, 8.5vh, calc(82px * var(--tbl-k,1))); }
    #baseCardHud { flex:none; width:clamp(46px, 7.5vh, calc(68px * var(--tbl-k,1))); }
    #deckZone > *, #pileZone > *, #baseCardHud > * { flex:none; white-space:nowrap; }
    #pileConstraintLine { height:13px; display:flex; justify-content:center; align-items:center; white-space:nowrap; }
    #pileConstraintLine #activeConstraintTag.hidden { display:inline-block !important; visibility:hidden; }
    #snapBurnBtn { position:absolute; top:0; left:calc(100% + 12px); z-index:5; }
    #snapBurnBtn.snap-over-base { left:auto; right:0; }
    #startTutorialBtn.tutorial-new { border-color:#f59e0b !important; color:#fcd34d !important; background:rgba(245,158,11,.12) !important; box-shadow:0 0 0 1px rgba(245,158,11,.35), 0 0 18px rgba(245,158,11,.25); }
    /* Desktop Site note: sized by --dsk (layout width ÷ screen width) so it reads at phone size. */
    #desktopSiteNote { position:fixed; left:50%; top:calc(var(--header-h) + 8px); transform:translateX(-50%); z-index:330; width:calc(340px * var(--dsk, 1)); max-width:calc(100vw - 16px); box-sizing:border-box; display:flex; flex-direction:column; gap:calc(6px * var(--dsk, 1)); padding:calc(12px * var(--dsk, 1)) calc(14px * var(--dsk, 1)); border-radius:calc(14px * var(--dsk, 1)); background:#0f172a; border:1px solid rgba(245,158,11,.6); color:#e2e8f0; font-size:calc(13px * var(--dsk, 1)); line-height:1.35; box-shadow:0 12px 40px rgba(0,0,0,.6); text-align:center; }
    #desktopSiteNote b { color:#fbbf24; font-size:calc(14px * var(--dsk, 1)); }
    #desktopSiteNote button { align-self:center; margin-top:calc(4px * var(--dsk, 1)); padding:calc(7px * var(--dsk, 1)) calc(22px * var(--dsk, 1)); border-radius:calc(10px * var(--dsk, 1)); background:#f59e0b; color:#0f172a; font-weight:900; font-size:calc(13px * var(--dsk, 1)); }
    /* Menu account header: centred username (+ picture) over four even buttons. */
    #hamburgerAccountHead { display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 14px 12px; }
    #hamburgerAccountHead .drawer-who { display:flex; align-items:center; justify-content:center; gap:10px; max-width:100%; min-width:0; }
    #hamburgerAccountHead .drawer-avatar { flex:none; display:flex; }
    #hamburgerAccountHead .drawer-avatar.hidden { display:none; }
    #hamburgerAccountHead .drawer-name { min-width:0; font-size:16px; font-weight:900; color:#fbbf24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #hamburgerAccountHead .drawer-signin { padding:7px 28px; border-radius:10px; background:#f59e0b; color:#0f172a; font-size:12px; font-weight:900; letter-spacing:.04em; }
    #hamburgerAccountHead .drawer-signin.hidden { display:none; }
    #hamburgerAccountHead .drawer-quick { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:100%; }
    #hamburgerAccountHead .drawer-quick button { height:2.5rem; display:flex; align-items:center; justify-content:center; }
    #hamburgerAccountHead .drawer-quick .pack-icon { width:26px; height:26px; }
    /* Home screen (§ Home screen): the lobby's own cover is replaced by the
       dimmed table backdrop, and the panel starts below the header. */
    #homeBackdrop { display:none; position:fixed; inset:0; width:100%; height:100%; max-width:none; z-index:69; pointer-events:none; background-color:#020617; }
    body.lobby-open #homeBackdrop { display:block; }
    body.lobby-open #lobbyScreen { background:transparent !important; }
    #lobbyScreen { padding-top:calc(var(--header-h) + 10px) !important; padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }
    #homeCardTip { position:fixed; z-index:71; pointer-events:auto; padding:0; border:0; background:none; font:inherit; text-align:inherit; cursor:pointer; }
    #homeCardTip:focus-visible { outline:2px solid #fbbf24; outline-offset:3px; border-radius:14px; }
    #homeCardTip.hidden { display:none; }
    #homeCardTip .home-tip-inner { width:100%; height:100%; display:flex; align-items:center; gap:12px; transition:opacity .26s var(--ease-soft, ease), transform .26s var(--ease-soft, ease); }
    #homeCardTip .home-tip-inner.home-tip-out { opacity:0; transform:translateY(6px); }
    #homeCardTip.home-tip-below .home-tip-inner { padding:8px 12px; border-radius:14px; background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.18); box-sizing:border-box; }
    #homeCardTip.home-tip-below .home-tip-inner { justify-content:center; }
    #homeCardTip.home-tip-below .home-tip-text { flex:0 1 auto; max-width:300px; text-align:center; }
    #homeCardTip.home-tip-compact .home-tip-inner { padding:4px 10px; gap:9px; border-radius:12px; }
    #homeCardTip.home-tip-compact .home-tip-card { zoom:.66; }
    #homeCardTip.home-tip-compact .home-tip-text { font-size:10px; line-height:1.25; }
    #homeCardTip.home-tip-compact .home-tip-name { font-size:9px; margin-bottom:1px; }
    #homeCardTip.home-tip-side .home-tip-inner { flex-direction:column; justify-content:center; text-align:center; gap:14px; }
    #homeCardTip .home-tip-art { flex:none; display:flex; align-items:center; justify-content:center; }
    #homeCardTip .home-tip-card { position:relative !important; width:44px !important; height:62px !important; font-size:12px; margin:0 !important; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
    #homeCardTip.home-tip-side .home-tip-art { width:140px; height:196px; }
    #homeCardTip.home-tip-side .home-tip-card { zoom:2.2; }
    #homeCardTip .home-tip-text { min-width:0; color:#cbd5e1; font-size:11px; line-height:1.35; font-weight:600; }
    #homeCardTip.home-tip-side .home-tip-text { font-size:13px; }
    #homeCardTip .home-tip-name { display:block; color:#fcd34d; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
    #homeCardTip.home-tip-side .home-tip-name { font-size:12px; }
    body.reduce-motion #homeCardTip .home-tip-inner { transition:none; }
    body.lobby-open #opponentsContainer, body.lobby-open #centerArena, body.lobby-open #localPlayerZone,
    body.lobby-open #gauntletHud, body.lobby-open #seriesHud, body.lobby-open #floatingJokerBar { visibility:hidden !important; }
    body.spectating #roomCodeBadge { display:none !important; }
    body.spectating #swapControlBar, body.spectating #playActionControls, body.spectating #sacrificeControlBar, body.spectating #emoteLayer, body.spectating #matchEndButtonRow { display:none !important; }
    body.spectating #opponentsContainer { margin-top:40px; }
    /* Pull-to-refresh strip above the Inbox / Friends lists (attachPullToRefresh) */
    .ptr-indicator { height:0; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; font-weight:800; color:#94a3b8; opacity:0; transition: height .22s var(--ease-soft), opacity .22s var(--ease-soft); }
    .ptr-indicator.is-dragging { transition: none; }
    .ptr-indicator .ptr-icon { display:inline-block; transition: transform .18s var(--ease-snappy); }
    .ptr-indicator.is-ready { color:#fbbf24; }
    .ptr-indicator.is-ready .ptr-icon { transform: rotate(180deg); }
    .ptr-indicator.is-busy .ptr-icon { animation: ptr-spin .8s linear infinite; }
    @keyframes ptr-spin { to { transform: rotate(360deg); } }
    #whatsNewList { overflow-y:auto; min-height:0; flex:1 1 auto; }
    .cl-version { margin:12px 0 6px; display:flex; align-items:baseline; gap:8px; font-size:11px; font-weight:900; color:#fbbf24; letter-spacing:.04em; }
    .cl-version small { font-size:9px; font-weight:800; color:#64748b; letter-spacing:.06em; text-transform:uppercase; }
    .whats-new-list li.cl-minor { opacity:.72; }
    .whats-new-list li .cl-key { margin-left:auto; flex-shrink:0; font-size:8px; font-weight:900; letter-spacing:.06em; color:#fbbf24; border:1px solid rgba(251,191,36,.45); border-radius:999px; padding:1px 6px; align-self:center; }
    .whats-new-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .whats-new-list li { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.35; color:#cbd5e1; background:rgba(15,23,42,.7); border:1px solid #1e293b; border-radius:12px; padding:8px 10px; }
    .whats-new-list li > span:first-child { font-size:18px; line-height:1; flex-shrink:0; }
    .stats-tabs { display:flex; gap:6px; margin-bottom:8px; }
    .stats-tab { flex:1; padding:6px 0; border-radius:10px; border:2px solid #334155; background:#1e293b; color:#cbd5e1; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
    .lb-tabs { overflow-x:auto; scrollbar-width:none; }
    .lb-tabs .stats-tab { flex:none; padding:6px 14px; white-space:nowrap; }
    .stats-tab[aria-selected="true"] { border-color:#f59e0b; background:rgba(120,53,15,.4); color:#fcd34d; }
    .lb-count-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:8px; border:1px solid #f59e0b; background:rgba(120,53,15,.35); color:#fcd34d; font-size:10px; font-weight:900; white-space:nowrap; }
    /* Levels tab (§ XP & levels): XP colours, and the All-time / This week switch. */
    .lb-count-pill.lb-xp-pill { border-color:var(--xp-edge); background:rgba(8,47,73,.55); color:#a5f3fc; }
    .lb-levels-switch { display:flex; justify-content:center; gap:4px; margin:2px auto 6px; padding:3px; width:fit-content; border-radius:999px; border:1px solid #1e293b; background:#0b1220; flex-shrink:0; }
    .lb-levels-switch.hidden { display:none; }
    .lb-levels-switch button { padding:4px 12px; border-radius:999px; font-size:10px; font-weight:800; color:#94a3b8; transition: background-color .16s var(--ease-snappy), color .16s var(--ease-snappy); }
    .lb-levels-switch button[aria-pressed="true"] { background:rgba(8,47,73,.9); color:#a5f3fc; box-shadow:inset 0 0 0 1px var(--xp-edge); }
    .mh-summary { display:flex; justify-content:space-around; background:rgba(15,23,42,.7); border:1px solid rgba(245,158,11,.35); border-radius:12px; padding:8px 4px; margin-bottom:8px; }
    .mh-summary div { display:flex; flex-direction:column; align-items:center; }
    .mh-summary b { font-size:15px; font-weight:900; color:#fcd34d; }
    .mh-summary span { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
    .mh-list { display:flex; flex-direction:column; gap:6px; }
    .mh-item { background:rgba(15,23,42,.7); border:1px solid #1e293b; border-left:3px solid var(--mh-edge, #475569); border-radius:10px; }
    .mh-item[data-mh-id] { cursor:pointer; }
    .mh-item[data-mh-id]:hover, .mh-item[data-mh-id]:focus-visible { border-color:#475569; outline:none; }
    .mh-line { display:flex; align-items:center; gap:8px; padding:7px 9px; }
    .mh-chev { color:#64748b; font-weight:900; font-size:16px; line-height:1; }
    .mh-player { background:none; border:0; padding:0; text-align:left; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(251,191,36,.55); text-underline-offset:2px; }
    .mh-player:hover, .mh-player:focus-visible { color:#fcd34d; }
    .mh-order .mh-player, .mh-order .mh-name { background:#1e293b; border-radius:999px; padding:2px 7px; font-weight:800; font-size:9px; color:#e2e8f0; }
    .hg-head { display:flex; align-items:center; gap:10px; }
    .hg-emoji { font-size:30px; line-height:1; }
    .hg-title { font-size:16px; font-weight:900; color:#f8fafc; }
    .hg-sub { font-size:10px; font-weight:700; color:#94a3b8; }
    .hg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .hg-chip { font-size:10px; font-weight:900; border-radius:999px; padding:3px 9px; border:1px solid #334155; }
    .hg-chip.gem { color:#67e8f9; } .hg-chip.up { color:#34d399; } .hg-chip.down { color:#fb7185; }
    .hg-label { margin:12px 0 5px; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#fbbf24; }
    .hg-table .mh-row { grid-template-columns:minmax(0,1fr) repeat(5, 40px); font-size:10px; padding:5px 4px; }
    .hg-note { margin-top:10px; font-size:9px; color:#64748b; text-align:center; }
    .mh-item > summary { list-style:none; display:flex; align-items:center; gap:8px; padding:7px 9px; cursor:pointer; }
    .mh-item > summary::-webkit-details-marker { display:none; }
    .mh-emoji { font-size:20px; line-height:1; flex-shrink:0; }
    .mh-main { flex:1; min-width:0; display:flex; flex-direction:column; }
    .mh-title { font-size:11px; font-weight:900; color:#f1f5f9; }
    .mh-sub { font-size:9px; font-weight:700; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mh-side { display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-size:9px; font-weight:900; }
    .mh-side .gem { color:#67e8f9; }
    .mh-side .up { color:#34d399; } .mh-side .down { color:#fb7185; }
    .mh-detail { padding:0 9px 8px; font-size:9px; color:#cbd5e1; }
    .mh-everyone { display:flex; flex-direction:column; gap:2px; font-size:9px; }
    .mh-row { display:grid; grid-template-columns:minmax(0,1fr) repeat(5, 34px); align-items:center; gap:2px; padding:3px 4px; border-radius:6px; }
    .mh-row > span:not(.mh-name) { text-align:center; font-weight:800; color:#cbd5e1; }
    .mh-row .mh-name { font-weight:800; color:#e2e8f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mh-row .mh-name em { color:#64748b; font-style:normal; }
    .mh-row.me { background:rgba(245,158,11,.18); }
    .mh-row.me .mh-name { color:#fcd34d; }
    .mh-head > span { font-size:7px; text-transform:uppercase; letter-spacing:.05em; color:#64748b !important; }
    .mh-order { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
    .mh-order span { background:#1e293b; border-radius:999px; padding:2px 7px; font-weight:800; }
    .mh-order span.me { background:rgba(245,158,11,.25); color:#fcd34d; }
    .mh-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; text-align:center; }
    .mh-stats b { display:block; font-size:12px; color:#f8fafc; }
    .mh-stats span { font-size:7px; font-weight:800; text-transform:uppercase; color:#94a3b8; }
    .last-card-chip { font-size:8px; font-weight:900; letter-spacing:.06em; padding:0 6px; height:15px; display:flex; align-items:center; border-radius:999px; background:#be123c; color:#fff; border:1px solid #fda4af; white-space:nowrap; animation:last-card-pulse 1.1s var(--ease-soft) infinite; }
    .opp-seat.opp-last-card { border-color:#f43f5e !important; box-shadow:0 0 0 1px rgba(244,63,94,.6), 0 0 16px rgba(244,63,94,.45) !important; }
    @keyframes last-card-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(244,63,94,.6); } 50% { transform:scale(1.08); box-shadow:0 0 0 5px rgba(244,63,94,0); } }
    body.reduce-motion .last-card-chip { animation:none; }
    #tutorialHubQuickStart .tutorial-quick-row { border-color:#f59e0b; background:linear-gradient(135deg,rgba(120,53,15,.55),rgba(15,23,42,.9)); box-shadow:0 0 14px rgba(245,158,11,.25); }
    .finished-box-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
    .finished-leave-btn { min-width:128px; padding:8px 22px; border-radius:12px; border:2px solid #e11d48; background:rgba(76,5,25,.75); color:#fda4af; font-size:12px; font-weight:900; letter-spacing:.14em; box-shadow:0 6px 18px rgba(0,0,0,.45); }
    .friends-online-count { font-size:10px; font-weight:800; color:#94a3b8; text-align:center; margin:0 0 6px; }
    .friend-actions { display:grid; gap:5px; }
    .friend-action { min-width:0; padding:6px 2px; border-radius:9px; border:1px solid #334155; background:transparent; color:#94a3b8; font-size:9px; font-weight:900; letter-spacing:.03em; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
    .friend-action--gift { border-color:#db2777; color:#f9a8d4; }
    .friend-action--gift:hover { background:#db2777; color:#fff; }
    .friend-action--go { border-color:#059669; color:#34d399; }
    .friend-action--go:hover { background:#059669; color:#020617; }
    .friend-action--watch { border-color:#0891b2; color:#67e8f9; }
    .friend-action--watch:hover { background:#0891b2; color:#020617; }
    .friend-action--danger:hover { border-color:#f43f5e; color:#fb7185; }
    .friend-action--warn:hover { border-color:#f59e0b; color:#fbbf24; }
    .presence-dot.online { background: #10b981; box-shadow: 0 0 4px #10b981; }
    .presence-dot.offline { background: #475569; }
    .card-selected {
      transform: translateY(-12px) scale(1.06) !important;
      box-shadow: 0 8px 20px rgba(245, 158, 11, 0.8), inset 0 0 0 2px #f59e0b !important;
      z-index: 500 !important;
    }
    .drop-target-active {
      border-color: #34d399 !important;
      box-shadow: 0 0 20px rgba(52, 211, 153, 0.8) !important;
      transform: scale(1.04);
    }

    /* Hand Layout with Balanced Overlap */
    .hand-card {
      transition: transform 0.24s var(--ease-bouncy), translate 0.24s var(--ease-bouncy), margin 0.2s var(--ease-soft), opacity .2s var(--ease-soft);
      position: relative;
      touch-action: none;
    }
    .hand-card-stacked:not(:first-child) {
      margin-left: clamp(-2.5rem, -3.8vw, -1.5rem);
    }
    .hand-card-stacked:hover, .hand-card-stacked:focus {
      transform: translateY(-16px) scale(1.08);
      z-index: 120 !important;
    }

    /* Opponent table cards never overlap (owner, v272): each Face-Up /
       Face-Down slot sits side by side with a gap wide enough for the
       Face-Up card's small tilt over its Face-Down card. Seats still fit
       3 opponents on narrow phones (the cards shrink with the screen). */
    .opp-slot-row > *:not(:first-child) {
      margin-left: calc(6px * var(--opp-scale, 1));
    }

    /* Viewport-Anchored Card Scaling */
    /* --tbl-k: the table scale. 1 on phones; tablets and PCs raise it
       (media queries below) so the table fills big screens instead of
       sitting small in the middle. Card caps, card text, the hand's cap
       (tableScale() in JS) and the player's area width all follow it. */
    .card-base {
      width: clamp(52px, 8.5vh, calc(82px * var(--tbl-k,1)));
      height: clamp(75px, 12.5vh, calc(120px * var(--tbl-k,1)));
    }
    .card-opponent-slot {
      width: calc(clamp(30px, min(8vw, 6.0vh), calc(52px * var(--tbl-k,1))) * var(--opp-scale, 1));
      height: calc(clamp(43px, min(11.5vw, 8.8vh), calc(76px * var(--tbl-k,1))) * var(--opp-scale, 1));
    }
    /* Opponent card rank/suit text scales down in step with the card itself
       (which now also shrinks based on available width, not just height) —
       otherwise the text stays a fixed size and spills off small cards. */
    .opponent-card-centre { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; pointer-events:none; }
    .card-opponent-slot .card-centre-icon { width:calc(clamp(10px,2.2vh,20px) * var(--opp-scale,1)); height:calc(clamp(10px,2.2vh,20px) * var(--opp-scale,1)); }
    .opp-corner-text {
      font-size: calc(clamp(5px, min(1.7vw, 1.25vh), calc(8px * var(--tbl-k,1))) * var(--opp-scale, 1));
    }
    .opp-center-text {
      font-size: calc(clamp(8px, min(2.5vw, 1.9vh), calc(12px * var(--tbl-k,1))) * var(--opp-scale, 1));
    }
    .card-table {
      width: clamp(46px, 7.5vh, calc(68px * var(--tbl-k,1)));
      height: clamp(66px, 11.0vh, calc(98px * var(--tbl-k,1)));
    }
    /* Tablets (portrait or landscape) and PCs: a bigger table. Phones keep 1. */
    @media (min-width: 700px) and (min-height: 700px) {
      #gameTable { --tbl-k: 1.3; }
      #gameTable #localPlayerZone { max-width: 56rem; }
      #gameTable #centerArena { max-height: 34vh; }
    }
    /* The home panel is laid out for phones; tablets and PCs zoom it up
       (the screen scrolls if a tall mode runs past the bottom). */
    @media (min-width: 700px) and (min-height: 760px) {
      #lobbyScreen > div.bg-slate-900 { zoom: 1.25; }
    }
    @media (min-width: 1100px) and (min-height: 900px) {
      #lobbyScreen > div.bg-slate-900 { zoom: 1.4; }
    }
    @media (min-width: 1100px) and (min-height: 800px) {
      #gameTable { --tbl-k: 1.45; }
      #gameTable #localPlayerZone { max-width: 64rem; }
    }
    /* A phone turned sideways has no room for the table: ask for upright
       (the installed app is portrait-only already). */
    /* Update prompt (§ Update prompt): above pages, below nothing critical. */
    .pp-show-deck .deck-mini-card { transform:scale(.62); transform-origin:center; }
    .lb-who { cursor:pointer; border-radius:10px; }
    .lb-who:hover .text-white, .lb-who:focus-visible .text-white { color:#fde68a; text-decoration:underline; text-underline-offset:2px; }
    #updatePrompt { position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:320; width:min(360px, calc(100vw - 24px)); background:#0b1220; border:1px solid rgba(251,191,36,.7); border-radius:14px; box-shadow:0 14px 30px rgba(0,0,0,.6); padding:12px; color:#e2e8f0; display:flex; flex-direction:column; gap:10px; }
    #updatePrompt.hidden { display:none; }
    #updatePrompt .up-row { display:flex; gap:10px; align-items:flex-start; }
    #updatePrompt .up-icon { color:#fbbf24; flex:none; width:22px; height:22px; }
    #updatePrompt .up-icon svg { width:22px; height:22px; }
    #updatePrompt .up-text { display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.35; }
    #updatePrompt .up-text b { font-size:13px; color:#fde68a; }
    #updatePrompt .up-btns { display:flex; gap:8px; justify-content:flex-end; }
    #updatePrompt button { font-size:11px; font-weight:900; letter-spacing:.04em; border-radius:10px; padding:7px 14px; }
    #updatePrompt .up-later { background:transparent; border:1px solid #475569; color:#cbd5e1; }
    #updatePrompt .up-now { background:#f59e0b; color:#0b1220; }
    #rotateHint { display:none; }
    #rotateHint .rh-open { display:none; }
    /* A tiny cover screen (Galaxy Z Flip's outside screen) can't fit the
       table either: ask to open the phone instead. */
    @media (max-height: 500px) and (max-width: 520px) and (pointer: coarse) {
      #rotateHint { display:flex !important; position:fixed; inset:0; z-index:10000; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#020617; color:#e2e8f0; font-weight:700; font-size:15px; text-align:center; padding:24px; }
      #rotateHint svg { width:56px; height:56px; color:#fbbf24; }
      #rotateHint .rh-turn { display:none; }
      #rotateHint .rh-open { display:inline; }
    }
    /* Dual-screen / spanned foldables (a hinge down the middle): keep the
       table and header on the first screen instead of across the hinge. */
    @media (horizontal-viewport-segments: 2) {
      body > header, #gameTable { max-width: env(viewport-segment-width 0 0, 100%); }
    }
    @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
      #rotateHint { display:flex; position:fixed; inset:0; z-index:10000; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#020617; color:#e2e8f0; font-weight:700; font-size:15px; text-align:center; padding:24px; }
      #rotateHint svg { width:64px; height:64px; color:#fbbf24; }
      body.reduce-motion #rotateHint svg { animation:none; }
      #rotateHint svg { animation:rotate-hint 2.4s var(--ease-soft, ease-in-out) infinite; }
    }
    @keyframes rotate-hint { 0%,25% { transform:rotate(90deg); } 55%,100% { transform:rotate(0deg); } }

    .brand-logo-rendered {
      font-family: 'Cinzel', Georgia, serif;
      font-weight: 900;
      letter-spacing: 0.5px;
      color: #991b1b;
      background: linear-gradient(180deg, #f87171 0%, #b91c1c 40%, #5e0a0a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 0px #fde047) drop-shadow(0 -1px 0px #b45309) drop-shadow(0 2px 5px rgba(0,0,0,0.9));
    }

    /* The "Deluxe" subtitle under the lobby's big logo — same Cinzel serif
       family as the logo above it (so it still reads as one brand mark),
       but lighter weight, italic, and gold rather than red: a deliberately
       different, more ornamental treatment than the plain gray uppercase
       label styling used for actual form labels like "Your Nickname" right
       below it, which should stay looking like a functional label. */
    .brand-subtitle {
      font-family: 'Cinzel', Georgia, serif;
      font-weight: 700;
      font-style: italic;
      letter-spacing: 5px;
      background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    }

    .theme-obsidian { --card-bg: #0f172a; --card-border: #334155; --text-light: #f8fafc; --text-red: #ef4444; }
    .theme-emerald { --card-bg: #064e3b; --card-border: #059669; --text-light: #ecfdf5; --text-red: #fca5a5; }
    .theme-cyber { --card-bg: #1e1b4b; --card-border: #818cf8; --text-light: #38bdf8; --text-red: #fb7185; }
    .theme-crimson { --card-bg: #450a0a; --card-border: #991b1b; --text-light: #fef2f2; --text-red: #fb7185; }
    /* Shop decks (card faces): same variables as the free themes above. */
    .theme-casino { --card-bg: #faf7ef; --card-border: #c9b98f; --text-light: #111827; --text-red: #b91c1c; }
    .theme-casino :is(.card-base,.card-table,.card-opponent-slot) .text-amber-400 { color: #b45309 !important; }
    .theme-arcade { --card-bg: #0a0a12; --card-border: #22d3ee; --text-light: #a3e635; --text-red: #f472b6; }
    .theme-arcade :is(.card-base,.card-table,.card-opponent-slot,.deck-mini-card) :is(.card-corner-rank,.dm-rank) { font-family: 'Press Start 2P', ui-monospace, monospace; font-size: .74em; letter-spacing: -.06em; }
    /* Four-Colour: every suit its own colour (getSuitStyle adds suit-s/h/d/c). */
    .theme-fourcolour { --card-bg: #0f172a; --card-border: #475569; --text-light: #f8fafc; --text-red: #ef4444; }
    .theme-fourcolour .suit-d { color: #60a5fa !important; }
    .theme-fourcolour .suit-c { color: #4ade80 !important; }
    /* v197 decks. Textured faces use background-image on the face only
       (never .custom-card-back); fonts load on first use (DECK_FONTS). */
    .theme-bigprint { --card-bg: #ffffff; --card-border: #0f172a; --text-light: #0b0b0f; --text-red: #c1121f; }
    .theme-bigprint :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back) { border-width: 3px; }
    .theme-bigprint :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank { font-size: clamp(12px, 2.5vh, calc(21px * var(--tbl-k,1))); letter-spacing: -.07em; font-weight: 900; }
    .theme-bigprint :is(.card-base,.card-table,.card-opponent-slot) .card-corner-suit { font-size: clamp(9px, 1.8vh, calc(15px * var(--tbl-k,1))); }
    .theme-bigprint .card-tiny .card-corner-rank { font-size: clamp(11px, 2.1vh, 17px); }
    .theme-bigprint #localHand .card-corner-rank { font-size: min(clamp(12px, 2.5vh, calc(21px * var(--tbl-k,1))), calc((var(--hand-strip, 99px) - 10px) / 1.3)); }
    .theme-bigprint #localHand .card-tiny .card-corner-rank { font-size: min(clamp(11px, 2.1vh, 17px), calc((var(--hand-strip, 99px) - 10px) / 1.3)); }
    .theme-bigprint #localHand .card-corner-suit { font-size: min(clamp(9px, 1.8vh, calc(15px * var(--tbl-k,1))), calc(var(--hand-strip, 99px) - 10px)); }
    .theme-bigprint .card-opponent-slot .opp-corner-text { font-size: calc(clamp(7px, min(2.2vw, 1.6vh), calc(10px * var(--tbl-k,1))) * var(--opp-scale, 1)); font-weight: 900; }
    .theme-bigprint .card-centre-icon { width: clamp(12px, 2.7vh, calc(24px * var(--tbl-k,1))); height: clamp(12px, 2.7vh, calc(24px * var(--tbl-k,1))); }
    .theme-lavender { --card-bg: #efe7ff; --card-border: #a78bfa; --text-light: #3b0764; --text-red: #be185d; }
    .theme-lavender :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-lavender { background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.75), transparent 60%), linear-gradient(160deg, #f5efff, #e4d6ff); }
    .theme-royalgold { --card-bg: #0b0a10; --card-border: #d4af37; --text-light: #f5d77a; --text-red: #f43f5e; }
    .theme-royalgold :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-royalgold { background-image: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.22), transparent 65%), linear-gradient(180deg, #16131c, #07060a); box-shadow: inset 0 0 0 1px rgba(245,215,122,.35); }
    .theme-royalgold :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-royalgold .dm-rank { font-family: 'Cinzel', Georgia, serif; }
    .theme-paper { --card-bg: #fbf8f1; --card-border: #cbbf9f; --text-light: #1f2937; --text-red: #b91c1c; }
    .theme-paper :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #fffdf7, #f3ede0); }
    .theme-paper :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-paper .dm-rank { font-family: Georgia, 'Times New Roman', serif; }
    .theme-neonnight { --card-bg: #07030f; --card-border: #f472b6; --text-light: #67e8f9; --text-red: #f472b6; }
    .theme-neonnight :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-neonnight { background-image: radial-gradient(ellipse at 50% 120%, rgba(244,114,182,.22), transparent 60%), radial-gradient(ellipse at 50% -20%, rgba(103,232,249,.16), transparent 60%); }
    .theme-neonnight :is(.card-base,.card-table,.card-opponent-slot) :is(.card-corner-rank,.card-corner-suit), .deck-mini-card.theme-neonnight .dm-rank { text-shadow: 0 0 4px currentColor, 0 0 9px currentColor; }
    .theme-neonnight :is(.card-base,.card-table,.card-opponent-slot) .card-centre-icon { filter: drop-shadow(0 0 4px currentColor); }
    .theme-frost { --card-bg: rgba(15,23,42,.5); --card-border: rgba(226,232,240,.55); --text-light: #f8fafc; --text-red: #fda4af; }
    .theme-frost :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-frost { background-image: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 45%, rgba(255,255,255,.14)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
    .theme-blueprint { --card-bg: #123a7a; --card-border: #93c5fd; --text-light: #e0f2fe; --text-red: #fca5a5; }
    .theme-blueprint :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-blueprint { background-image: repeating-linear-gradient(0deg, rgba(191,219,254,.14) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(191,219,254,.14) 0 1px, transparent 1px 8px), linear-gradient(180deg, #1d4f9e, #0f2f63); }
    .theme-blueprint :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-blueprint .dm-rank { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: -.08em; }
    .theme-chalk { --card-bg: #1d2a24; --card-border: #94a3b8; --text-light: #f1f5f9; --text-red: #fda4af; }
    .theme-chalk :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-chalk { background-image: radial-gradient(ellipse at 30% 30%, rgba(241,245,249,.08), transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(241,245,249,.06), transparent 50%), linear-gradient(180deg, #24332c, #17221d); }
    .theme-chalk :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-chalk .dm-rank { font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-weight: 400; letter-spacing: 0; }
    /* Light faces: the Joker's amber reads darker on them. */
    :is(.theme-bigprint,.theme-lavender,.theme-paper) :is(.card-base,.card-table,.card-opponent-slot) .text-amber-400 { color: #b45309 !important; }
    .deck-mini-card { display:flex; box-sizing:border-box; flex-shrink:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1px; width:32px; height:44px; padding:3px; border-radius:6px; background:var(--card-bg); border:1.5px solid var(--card-border); font-weight:900; line-height:1; }
    .deck-mini-card .dm-rank { font-size:11px; color:var(--text-light); }
    .deck-mini-card .dm-suits { display:flex; justify-content:flex-start; font-size:8px; }
    .deck-mini-card .dm-suits > :not(:first-child) { display:none; }
    .deck-mini-card.is-big { width:64px; height:92px; padding:6px; border-radius:10px; border-width:2px; }
    .deck-mini-card.is-big .dm-rank { font-size:20px; }
    .deck-mini-card.is-big .dm-suits { font-size:14px; }

    /* Solid Black Border Frame & Cloth Weave Card Back */
    .custom-card-back {
      border: 2.5px solid #000000 !important;
      position: relative;
      overflow: hidden;
    }
    .deck-count-badge {
      position:absolute; left:50%; bottom:4px; transform:translateX(-50%); z-index:10; min-width:28px;
      padding:2px 6px; border-radius:999px;
      background:rgba(2,6,23,.94); border:1px solid rgba(251,191,36,.82);
      color:#fde68a; font-size:10px; font-weight:900; line-height:1.15;
      text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.62);
    }
    .custom-card-back::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 3px 3px;
      pointer-events: none;
    }

    .back-obsidian { background-color: #0d1b2a; color: #d4af37; }
    .back-emerald { background-color: #064e3b; color: #fde047; }
    .back-cyber { background-color: #1e1b4b; color: #38bdf8; }
    .back-crimson { background-color: #450a0a; color: #facc15; }

    /* Purchased cosmetics are deliberately separate from deck themes: a
       theme controls card faces, while the equipped card-back skin can
       independently replace only face-down cards. */
    .cosmetic-back-midnight { background: radial-gradient(circle at 50% 35%, #1e3a5f 0 16%, #0f172a 17% 52%, #020617 53% 100%); color:#7dd3fc; }
    .cosmetic-back-emerald { background: radial-gradient(circle at 50% 35%, #065f46 0 16%, #052e2b 17% 52%, #021c19 53% 100%); color:#fbbf24; }
    .custom-card-back.cosmetic-back-neon {
      background:
        radial-gradient(circle at 50% 50%, rgba(126,34,206,.55) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, #10113a 0 34%, #070b22 35% 100%);
      border-color:#c084fc !important;
      color:#67e8f9;
      box-shadow:inset 0 0 12px rgba(34,211,238,.42),0 0 10px rgba(192,132,252,.72);
    }
    .custom-card-back.cosmetic-back-neon::before {
      inset:4px;
      border-radius:inherit;
      opacity:.9;
      background:
        linear-gradient(90deg, transparent 0 17%, #22d3ee 18% 19%, transparent 20% 39%, #a855f7 40% 41%, transparent 42% 61%, #22d3ee 62% 63%, transparent 64% 81%, #a855f7 82% 83%, transparent 84%),
        linear-gradient(0deg, transparent 0 16%, #a855f7 17% 18%, transparent 19% 37%, #22d3ee 38% 39%, transparent 40% 59%, #a855f7 60% 61%, transparent 62% 80%, #22d3ee 81% 82%, transparent 83%),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(34,211,238,.72) 11px 12px, transparent 13px 21px);
      filter:drop-shadow(0 0 2px #22d3ee);
    }
    .custom-card-back.cosmetic-back-neon::after {
      content:'';
      position:absolute;
      inset:6px;
      border:1px solid rgba(192,132,252,.82);
      border-radius:calc(.75rem - 4px);
      box-shadow:inset 0 0 8px rgba(34,211,238,.45);
      pointer-events:none;
    }
    .custom-card-back.cosmetic-back-neon > svg { position:relative; z-index:2; filter:drop-shadow(0 0 4px #c084fc); }
    .cosmetic-back-crimson { background: radial-gradient(circle at 50% 38%, #881337 0 18%, #3f0b1b 19% 55%, #1c0710 56% 100%); color:#fbbf24; }
    .custom-card-back.cosmetic-back-nebula {
      background:
        radial-gradient(circle at 68% 24%, #f0abfc 0 2%, transparent 3%),
        radial-gradient(circle at 28% 72%, #67e8f9 0 2%, transparent 3%),
        radial-gradient(ellipse at 48% 48%, rgba(168,85,247,.9) 0 13%, rgba(14,165,233,.52) 24%, transparent 48%),
        linear-gradient(145deg,#09051f,#172554 48%,#3b0764);
      border-color:#d8b4fe !important;color:#f0abfc;
      box-shadow:inset 0 0 14px rgba(56,189,248,.45),0 0 12px rgba(168,85,247,.75);
    }
    .custom-card-back.cosmetic-back-nebula::before {
      background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);
      background-size:11px 13px;opacity:.55;
    }
    .custom-card-back.cosmetic-back-inferno {
      background:
        radial-gradient(ellipse at 50% 85%, #fbbf24 0 8%, #f97316 9% 22%, #be123c 23% 42%, transparent 43%),
        repeating-linear-gradient(125deg,transparent 0 9px,rgba(251,146,60,.38) 10px 12px,transparent 13px 20px),
        linear-gradient(160deg,#1c0710,#450a0a 55%,#7f1d1d);
      border-color:#fb923c !important;color:#fde68a;
      box-shadow:inset 0 0 15px rgba(244,63,94,.55),0 0 12px rgba(249,115,22,.75);
    }

    body[data-equipped-frame="frame-silver"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 0 0 0 1px #cbd5e1,0 0 7px rgba(96,165,250,.5) !important; }
    body[data-equipped-frame="frame-gold"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      box-shadow:inset 0 0 0 1px #fef3c7,inset 0 0 0 2px #fbbf24,0 0 8px rgba(251,191,36,.65),0 3px 8px rgba(0,0,0,.5) !important;
    }
    body[data-equipped-frame="frame-diamond"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 0 0 0 2px #67e8f9,0 0 9px rgba(34,211,238,.68) !important; }
    body[data-equipped-frame="frame-obsidian-throne"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      box-shadow:inset 0 0 0 1px #a78bfa,inset 0 0 0 3px #111827,0 0 9px rgba(139,92,246,.68),0 3px 8px #000 !important;
    }
    body[data-equipped-frame="frame-emerald-sovereign"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      box-shadow:inset 0 0 0 1px #d1fae5,inset 0 0 0 2px #34d399,0 0 9px rgba(16,185,129,.68),0 3px 8px rgba(0,0,0,.55) !important;
    }

    /* Guide tables (v254): label column + one column per option. */
    .guide-table { display:grid; gap:1px; background:#1e293b; border:1px solid #334155; border-radius:10px; overflow:hidden; font-size:11px; }
    .guide-table .gt-row { display:grid; grid-template-columns:62px repeat(3, minmax(0, 1fr)); gap:1px; }
    .guide-table .gt-row > * { background:#0b1220; padding:5px 6px; line-height:1.35; }
    .guide-table .gt-head > * { font-weight:900; text-transform:uppercase; letter-spacing:.04em; color:#fbbf24; font-size:10px; }
    .guide-table .gt-row > b { color:#cbd5e1; font-size:10px; }
    /* Gauntlet mode cards (v254) in the Gauntlet pop-up. */
    .gauntlet-modes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:4px 0 8px; }
    .gauntlet-mode { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px; border-radius:12px; border:1.5px solid #334155; background:#0f172a; color:#e2e8f0; transition:transform .15s var(--ease-snappy, ease); }
    .gauntlet-mode b { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:900; letter-spacing:.02em; }
    .gauntlet-mode b svg { width:12px; height:12px; }
    .gauntlet-mode small { font-size:9px; color:#94a3b8; font-weight:700; }
    .gauntlet-mode.is-easy b { color:#6ee7b7; } .gauntlet-mode.is-hard b { color:#fda4af; } .gauntlet-mode.is-boss b { color:#d8b4fe; }
    .gauntlet-mode[aria-selected="true"].is-easy { border-color:#10b981; background:#052e22; box-shadow:0 0 12px rgba(16,185,129,.35); }
    .gauntlet-mode[aria-selected="true"].is-hard { border-color:#e11d48; background:#2a0a12; box-shadow:0 0 12px rgba(225,29,72,.35); }
    .gauntlet-mode[aria-selected="true"].is-boss { border-color:#a855f7; background:#1e0b33; box-shadow:0 0 12px rgba(168,85,247,.35); }
    .gauntlet-mode.is-shut:not([aria-selected="true"]) { opacity:.6; }
    .gauntlet-mode-intro { margin-top:0 !important; }
    .gauntlet-shut { color:#e2e8f0; }
    /* Crimson Gauntlet / Amethyst Gauntlet (earn-only, v254). */
    body[data-equipped-frame="frame-gauntlet-hard"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      border-color:#e11d48 !important;
      box-shadow:inset 0 0 0 1px #fde68a,inset 0 0 0 3px #9f1239,0 0 10px rgba(225,29,72,.7),0 3px 8px rgba(0,0,0,.55) !important;
    }
    body[data-equipped-frame="frame-gauntlet-boss"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      border-color:#a855f7 !important;
      box-shadow:inset 0 0 0 1px #fde68a,inset 0 0 0 3px #6b21a8,0 0 10px rgba(168,85,247,.75),0 3px 8px rgba(0,0,0,.55) !important;
    }
    /* Gauntlet Gold (earn-only): a hammered gold edge with a bronze inner rim. */
    body[data-equipped-frame="frame-gauntlet"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      border-color:#f59e0b !important;
      box-shadow:inset 0 0 0 1px #fde68a,inset 0 0 0 3px #b45309,0 0 10px rgba(245,158,11,.7),0 3px 8px rgba(0,0,0,.55) !important;
    }
    /* Shop card backs, set 2. */
    .custom-card-back.cosmetic-back-arcade {
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 15 14' fill='%23a3e635'><path d='M2 0h1v1h-1zM8 0h1v1h-1zM3 1h1v1h-1zM7 1h1v1h-1zM2 2h7v1h-7zM1 3h2v1h-2zM4 3h3v1h-3zM8 3h2v1h-2zM0 4h11v1h-11zM0 5h1v1h-1zM2 5h7v1h-7zM10 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM3 7h2v1h-2zM6 7h2v1h-2z'/></svg>") center / 78% auto no-repeat,
        repeating-conic-gradient(#1e1b4b 0 25%, #2e1065 0 50%) 0 0 / 10px 10px;
      border-color:#a3e635 !important; color:#a3e635;
      box-shadow:inset 0 0 0 2px #0a0a12, inset 0 0 12px rgba(163,230,53,.35);
    }
    .custom-card-back.cosmetic-back-space {
      background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 88'><ellipse cx='30' cy='44' rx='20' ry='5' fill='none' stroke='%23fde68a' stroke-width='2' transform='rotate(-18 30 44)'/><circle cx='30' cy='44' r='11' fill='%23f59e0b'/><circle cx='26' cy='40' r='4' fill='%23fcd34d' opacity='.55'/><path d='M10 44 A20 5 0 0 0 50 44' fill='none' stroke='%23fde68a' stroke-width='2' transform='rotate(-18 30 44)'/><circle cx='14' cy='17' r='4.5' fill='%2360a5fa'/><circle cx='47' cy='72' r='3' fill='%23f472b6'/><circle cx='48' cy='14' r='.9' fill='white'/><circle cx='9' cy='60' r='.8' fill='white'/><circle cx='22' cy='76' r='.7' fill='white'/><circle cx='52' cy='40' r='.7' fill='white'/><circle cx='36' cy='10' r='.6' fill='white'/></svg>") center / cover no-repeat,
        radial-gradient(ellipse at 30% 25%, #1e3a8a 0, #0b1026 55%, #02030a 100%);
      border-color:#fcd34d !important; color:#fde68a;
    }
    .custom-card-back.cosmetic-back-arcade > svg, .custom-card-back.cosmetic-back-space > svg { visibility:hidden; }
    .custom-card-back.cosmetic-back-arcade::before, .custom-card-back.cosmetic-back-space::before { display:none; }
    .custom-card-back.cosmetic-back-tartan {
      background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(250,204,21,.8) 7px 8px, transparent 8px 22px),
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(250,204,21,.8) 7px 8px, transparent 8px 22px),
        repeating-linear-gradient(0deg, rgba(20,83,45,.55) 0 5px, transparent 5px 11px),
        repeating-linear-gradient(90deg, rgba(20,83,45,.55) 0 5px, transparent 5px 11px),
        repeating-linear-gradient(0deg, rgba(15,23,42,.5) 12px 16px, transparent 16px 22px),
        repeating-linear-gradient(90deg, rgba(15,23,42,.5) 12px 16px, transparent 16px 22px),
        #b91c1c;
      border-color:#fde68a !important; color:#fde68a;
    }
    .custom-card-back.cosmetic-back-tartan > svg { filter:drop-shadow(0 1px 1px #000); }
    .custom-card-back.cosmetic-back-artdeco {
      background:
        repeating-conic-gradient(from -90deg at 50% 100%, rgba(212,175,55,.85) 0 2.5deg, transparent 2.5deg 10deg),
        radial-gradient(circle at 50% 100%, #1c1917 0 30%, #0a0a0a 70%);
      border-color:#d4af37 !important; color:#fde68a;
    }
    .custom-card-back.cosmetic-back-artdeco::after {
      content:''; position:absolute; inset:4px; border:1px solid rgba(212,175,55,.9); border-radius:calc(.75rem - 4px);
      box-shadow: inset 0 0 0 2px #0a0a0a, inset 0 0 0 3px rgba(212,175,55,.6); pointer-events:none;
    }
    .custom-card-back.cosmetic-back-artdeco > svg { position:relative; z-index:2; background:#0a0a0a; border-radius:50%; padding:2px; }

    /* Shop card backs, set 3 (vector, sharp at any size). */
    .custom-card-back.cosmetic-back-stained {
      background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 88%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22l%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%2260%22 height=%2288%22 fill=%22%23111%22/%3E%3Cpath d=%22M-5 -18L0 -9L-5 0L-10 -9Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M5 -18L10 -9L5 0L0 -9Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M15 -18L20 -9L15 0L10 -9Z%22 fill=%22%23047857%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M25 -18L30 -9L25 0L20 -9Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M35 -18L40 -9L35 0L30 -9Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 -18L50 -9L45 0L40 -9Z%22 fill=%22%23be185d%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M55 -18L60 -9L55 0L50 -9Z%22 fill=%22%23047857%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M65 -18L70 -9L65 0L60 -9Z%22 fill=%22%23047857%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M75 -18L80 -9L75 0L70 -9Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M-10 -9L-5 0L-10 9L-15 0Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M0 -9L5 0L0 9L-5 0Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M10 -9L15 0L10 9L5 0Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M20 -9L25 0L20 9L15 0Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M30 -9L35 0L30 9L25 0Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M40 -9L45 0L40 9L35 0Z%22 fill=%22%23047857%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M50 -9L55 0L50 9L45 0Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M60 -9L65 0L60 9L55 0Z%22 fill=%22%237c3aed%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M70 -9L75 0L70 9L65 0Z%22 fill=%22%23047857%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M-5 0L0 9L-5 18L-10 9Z%22 fill=%22%23047857%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M5 0L10 9L5 18L0 9Z%22 fill=%22%23047857%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M15 0L20 9L15 18L10 9Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M25 0L30 9L25 18L20 9Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M35 0L40 9L35 18L30 9Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M45 0L50 9L45 18L40 9Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M55 0L60 9L55 18L50 9Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M65 0L70 9L65 18L60 9Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M75 0L80 9L75 18L70 9Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M-10 9L-5 18L-10 27L-15 18Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M0 9L5 18L0 27L-5 18Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M10 9L15 18L10 27L5 18Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M20 9L25 18L20 27L15 18Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M30 9L35 18L30 27L25 18Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M40 9L45 18L40 27L35 18Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M50 9L55 18L50 27L45 18Z%22 fill=%22%23be185d%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M60 9L65 18L60 27L55 18Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M70 9L75 18L70 27L65 18Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M-5 18L0 27L-5 36L-10 27Z%22 fill=%22%23047857%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M5 18L10 27L5 36L0 27Z%22 fill=%22%23047857%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M15 18L20 27L15 36L10 27Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M25 18L30 27L25 36L20 27Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M35 18L40 27L35 36L30 27Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 18L50 27L45 36L40 27Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M55 18L60 27L55 36L50 27Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M65 18L70 27L65 36L60 27Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M75 18L80 27L75 36L70 27Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M-10 27L-5 36L-10 45L-15 36Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M0 27L5 36L0 45L-5 36Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M10 27L15 36L10 45L5 36Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M20 27L25 36L20 45L15 36Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M30 27L35 36L30 45L25 36Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M40 27L45 36L40 45L35 36Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M50 27L55 36L50 45L45 36Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M60 27L65 36L60 45L55 36Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M70 27L75 36L70 45L65 36Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M-5 36L0 45L-5 54L-10 45Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M5 36L10 45L5 54L0 45Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M15 36L20 45L15 54L10 45Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M25 36L30 45L25 54L20 45Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M35 36L40 45L35 54L30 45Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 36L50 45L45 54L40 45Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M55 36L60 45L55 54L50 45Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M65 36L70 45L65 54L60 45Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M75 36L80 45L75 54L70 45Z%22 fill=%22%23be185d%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M-10 45L-5 54L-10 63L-15 54Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M0 45L5 54L0 63L-5 54Z%22 fill=%22%237c3aed%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M10 45L15 54L10 63L5 54Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M20 45L25 54L20 63L15 54Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M30 45L35 54L30 63L25 54Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M40 45L45 54L40 63L35 54Z%22 fill=%22%237c3aed%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M50 45L55 54L50 63L45 54Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M60 45L65 54L60 63L55 54Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M70 45L75 54L70 63L65 54Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M-5 54L0 63L-5 72L-10 63Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M5 54L10 63L5 72L0 63Z%22 fill=%22%237c3aed%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M15 54L20 63L15 72L10 63Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M25 54L30 63L25 72L20 63Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M35 54L40 63L35 72L30 63Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 54L50 63L45 72L40 63Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M55 54L60 63L55 72L50 63Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M65 54L70 63L65 72L60 63Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M75 54L80 63L75 72L70 63Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M-10 63L-5 72L-10 81L-15 72Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M0 63L5 72L0 81L-5 72Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M10 63L15 72L10 81L5 72Z%22 fill=%22%237c3aed%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M20 63L25 72L20 81L15 72Z%22 fill=%22%237c3aed%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M30 63L35 72L30 81L25 72Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M40 63L45 72L40 81L35 72Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M50 63L55 72L50 81L45 72Z%22 fill=%22%23be185d%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M60 63L65 72L60 81L55 72Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M70 63L75 72L70 81L65 72Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M-5 72L0 81L-5 90L-10 81Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M5 72L10 81L5 90L0 81Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M15 72L20 81L15 90L10 81Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M25 72L30 81L25 90L20 81Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M35 72L40 81L35 90L30 81Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 72L50 81L45 90L40 81Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M55 72L60 81L55 90L50 81Z%22 fill=%22%23be185d%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M65 72L70 81L65 90L60 81Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M75 72L80 81L75 90L70 81Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M-10 81L-5 90L-10 99L-15 90Z%22 fill=%22%23ca8a04%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M0 81L5 90L0 99L-5 90Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M10 81L15 90L10 99L5 90Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M20 81L25 90L20 99L15 90Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M30 81L35 90L30 99L25 90Z%22 fill=%22%23047857%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M40 81L45 90L40 99L35 90Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M50 81L55 90L50 99L45 90Z%22 fill=%22%23f59e0b%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M60 81L65 90L60 99L55 90Z%22 fill=%22%23b91c1c%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M70 81L75 90L70 99L65 90Z%22 fill=%22%230e7490%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M-5 90L0 99L-5 108L-10 99Z%22 fill=%22%231d4ed8%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M5 90L10 99L5 108L0 99Z%22 fill=%22%23047857%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M15 90L20 99L15 108L10 99Z%22 fill=%22%230e7490%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M25 90L30 99L25 108L20 99Z%22 fill=%22%23be185d%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M35 90L40 99L35 108L30 99Z%22 fill=%22%23be185d%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M45 90L50 99L45 108L40 99Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M55 90L60 99L55 108L50 99Z%22 fill=%22%237c3aed%22 fill-opacity=%220.6%22/%3E%3Cpath d=%22M65 90L70 99L65 108L60 99Z%22 fill=%22%230e7490%22 fill-opacity=%220.8%22/%3E%3Cpath d=%22M75 90L80 99L75 108L70 99Z%22 fill=%22%237c3aed%22 fill-opacity=%220.8%22/%3E%3Cg stroke=%22%230b0b0b%22 stroke-width=%221.1%22 fill=%22none%22%3E%3Cpath d=%22M-70 -2L20 90%22/%3E%3Cpath d=%22M130 -2L40 90%22/%3E%3Cpath d=%22M-60 -2L30 90%22/%3E%3Cpath d=%22M120 -2L30 90%22/%3E%3Cpath d=%22M-50 -2L40 90%22/%3E%3Cpath d=%22M110 -2L20 90%22/%3E%3Cpath d=%22M-40 -2L50 90%22/%3E%3Cpath d=%22M100 -2L10 90%22/%3E%3Cpath d=%22M-30 -2L60 90%22/%3E%3Cpath d=%22M90 -2L0 90%22/%3E%3Cpath d=%22M-20 -2L70 90%22/%3E%3Cpath d=%22M80 -2L-10 90%22/%3E%3Cpath d=%22M-10 -2L80 90%22/%3E%3Cpath d=%22M70 -2L-20 90%22/%3E%3Cpath d=%22M0 -2L90 90%22/%3E%3Cpath d=%22M60 -2L-30 90%22/%3E%3Cpath d=%22M10 -2L100 90%22/%3E%3Cpath d=%22M50 -2L-40 90%22/%3E%3Cpath d=%22M20 -2L110 90%22/%3E%3Cpath d=%22M40 -2L-50 90%22/%3E%3Cpath d=%22M30 -2L120 90%22/%3E%3Cpath d=%22M30 -2L-60 90%22/%3E%3Cpath d=%22M40 -2L130 90%22/%3E%3Cpath d=%22M20 -2L-70 90%22/%3E%3Cpath d=%22M50 -2L140 90%22/%3E%3Cpath d=%22M10 -2L-80 90%22/%3E%3Cpath d=%22M60 -2L150 90%22/%3E%3Cpath d=%22M0 -2L-90 90%22/%3E%3C/g%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%2219.5%22 fill=%22%230b0b0b%22/%3E%3Cpath d=%22M30 44L47 44A17 17 0 0 1 44.7 52.5Z%22 fill=%22%23b91c1c%22/%3E%3Cpath d=%22M30 44L44.7 52.5A17 17 0 0 1 38.5 58.7Z%22 fill=%22%231d4ed8%22/%3E%3Cpath d=%22M30 44L38.5 58.7A17 17 0 0 1 30 61Z%22 fill=%22%23f59e0b%22/%3E%3Cpath d=%22M30 44L30 61A17 17 0 0 1 21.5 58.7Z%22 fill=%22%23b91c1c%22/%3E%3Cpath d=%22M30 44L21.5 58.7A17 17 0 0 1 15.3 52.5Z%22 fill=%22%231d4ed8%22/%3E%3Cpath d=%22M30 44L15.3 52.5A17 17 0 0 1 13 44Z%22 fill=%22%23f59e0b%22/%3E%3Cpath d=%22M30 44L13 44A17 17 0 0 1 15.3 35.5Z%22 fill=%22%23b91c1c%22/%3E%3Cpath d=%22M30 44L15.3 35.5A17 17 0 0 1 21.5 29.3Z%22 fill=%22%231d4ed8%22/%3E%3Cpath d=%22M30 44L21.5 29.3A17 17 0 0 1 30 27Z%22 fill=%22%23f59e0b%22/%3E%3Cpath d=%22M30 44L30 27A17 17 0 0 1 38.5 29.3Z%22 fill=%22%23b91c1c%22/%3E%3Cpath d=%22M30 44L38.5 29.3A17 17 0 0 1 44.7 35.5Z%22 fill=%22%231d4ed8%22/%3E%3Cpath d=%22M30 44L44.7 35.5A17 17 0 0 1 47 44Z%22 fill=%22%23f59e0b%22/%3E%3Ccircle cx=%2241.8%22 cy=%2247.2%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2238.7%22 cy=%2252.7%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2233.2%22 cy=%2255.8%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2226.8%22 cy=%2255.8%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2221.3%22 cy=%2252.7%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2218.2%22 cy=%2247.2%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2218.2%22 cy=%2240.8%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2221.3%22 cy=%2235.3%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2226.8%22 cy=%2232.2%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2233.2%22 cy=%2232.2%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2238.7%22 cy=%2235.3%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2241.8%22 cy=%2240.8%22 r=%222.3%22 fill=%22%23fde68a%22 fill-opacity=%22.9%22 stroke=%22%230b0b0b%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%2217%22 fill=%22none%22 stroke=%22%230b0b0b%22 stroke-width=%221.4%22/%3E%3Cg stroke=%22%230b0b0b%22 stroke-width=%221%22%3E%3Cpath d=%22M30 44L47 44%22/%3E%3Cpath d=%22M30 44L44.7 52.5%22/%3E%3Cpath d=%22M30 44L38.5 58.7%22/%3E%3Cpath d=%22M30 44L30 61%22/%3E%3Cpath d=%22M30 44L21.5 58.7%22/%3E%3Cpath d=%22M30 44L15.3 52.5%22/%3E%3Cpath d=%22M30 44L13 44%22/%3E%3Cpath d=%22M30 44L15.3 35.5%22/%3E%3Cpath d=%22M30 44L21.5 29.3%22/%3E%3Cpath d=%22M30 44L30 27%22/%3E%3Cpath d=%22M30 44L38.5 29.3%22/%3E%3Cpath d=%22M30 44L44.7 35.5%22/%3E%3C/g%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%225.5%22 fill=%22%237c3aed%22 stroke=%22%230b0b0b%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%222.2%22 fill=%22%23fef3c7%22/%3E%3Crect width=%2260%22 height=%2288%22 fill=%22url(%23l)%22/%3E%3C/svg%3E") center / cover no-repeat, #111;
      border-color:#fde68a !important; color:#fde68a;
      box-shadow: inset 0 0 0 2px #0b0b0b, inset 0 0 14px rgba(0,0,0,.45);
    }
    .custom-card-back.cosmetic-back-stained > svg { visibility:hidden; }
    .custom-card-back.cosmetic-back-stained::before { display:none; }
    .custom-card-back.cosmetic-back-dragon {
      background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 88%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3CradialGradient id=%22s%22 cx=%22.5%22 cy=%22.15%22 r=%22.95%22%3E%3Cstop offset=%220%22 stop-color=%22%2399f6e4%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%2314b8a6%22/%3E%3Cstop offset=%22.75%22 stop-color=%22%23115e59%22/%3E%3Cstop offset=%221%22 stop-color=%22%23042f2e%22/%3E%3C/radialGradient%3E%3ClinearGradient id=%22ir%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2322d3ee%22 stop-opacity=%22.3%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23a855f7%22 stop-opacity=%220%22/%3E%3Cstop offset=%221%22 stop-color=%22%23a855f7%22 stop-opacity=%22.5%22/%3E%3C/linearGradient%3E%3Cpattern id=%22p%22 width=%2212%22 height=%229%22 patternUnits=%22userSpaceOnUse%22%3E%3Crect width=%2212%22 height=%229%22 fill=%22%23021a19%22/%3E%3Cpath d=%22M-6 4.5Q0 16 6 4.5ZM6 4.5Q12 16 18 4.5Z%22 fill=%22url(%23s)%22 stroke=%22%23022c22%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M0 0Q6 11.5 12 0Z%22 fill=%22url(%23s)%22 stroke=%22%23022c22%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M2.4 .9Q6 6.5 9.6 .9%22 fill=%22none%22 stroke=%22%23ccfbf1%22 stroke-opacity=%22.55%22 stroke-width=%22.45%22/%3E%3C/pattern%3E%3CradialGradient id=%22g%22 cx=%22.5%22 cy=%22.5%22 r=%22.5%22%3E%3Cstop offset=%220%22 stop-color=%22%23fde68a%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23d97706%22/%3E%3Cstop offset=%221%22 stop-color=%22%2378350f%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22iris%22 cx=%22.5%22 cy=%22.5%22 r=%22.5%22%3E%3Cstop offset=%220%22 stop-color=%22%23fef08a%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23f59e0b%22/%3E%3Cstop offset=%22.85%22 stop-color=%22%23b45309%22/%3E%3Cstop offset=%221%22 stop-color=%22%23451a03%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22glow%22 cx=%22.5%22 cy=%22.5%22 r=%22.5%22%3E%3Cstop offset=%220%22 stop-color=%22%23fbbf24%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fbbf24%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%2260%22 height=%2288%22 fill=%22url(%23p)%22/%3E%3Crect width=%2260%22 height=%2288%22 fill=%22url(%23ir)%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%2220%22 fill=%22url(%23glow)%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%2213%22 fill=%22%2304201e%22 stroke=%22url(%23g)%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M19.5 44Q30 33 40.5 44Q30 55 19.5 44Z%22 fill=%22url(%23iris)%22 stroke=%22%231c1917%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M30 36.5Q27.6 44 30 51.5Q32.4 44 30 36.5Z%22 fill=%22%230c0a09%22/%3E%3Cellipse cx=%2233.2%22 cy=%2240.8%22 rx=%221.6%22 ry=%221%22 fill=%22%23fff%22 fill-opacity=%22.75%22/%3E%3Ccircle cx=%2230%22 cy=%2244%22 r=%2210.2%22 fill=%22none%22 stroke=%22%23fde68a%22 stroke-opacity=%22.4%22 stroke-width=%22.5%22/%3E%3C/svg%3E") center / cover no-repeat, #021a19;
      border-color:#d97706 !important; color:#fde68a;
      box-shadow: inset 0 0 0 1px #fde68a, inset 0 0 16px rgba(0,0,0,.55), 0 0 8px rgba(20,184,166,.35);
    }
    .custom-card-back.cosmetic-back-dragon > svg { visibility:hidden; }
    .custom-card-back.cosmetic-back-dragon::before { display:none; }
    .custom-card-back.cosmetic-back-wheel {
      background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2088%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id=%22g%22%20cx=%22.5%22%20cy=%22.5%22%20r=%22.75%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%231c2a6b%22/%3E%3Cstop%20offset=%22.6%22%20stop-color=%22%230b1230%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23050816%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id=%22m%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff2b0%22/%3E%3Cstop%20offset=%22.5%22%20stop-color=%22%23f59e0b%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%238a5a0a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width=%2260%22%20height=%2288%22%20fill=%22url%28%23g%29%22/%3E%3Cpath%20d=%22M30%2044L45.5%20-14.0%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L72.4%201.6%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L88.0%2028.5%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L88.0%2059.5%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L72.4%2086.4%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L45.5%20102.0%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L14.5%20102.0%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L-12.4%2086.4%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L-28.0%2059.5%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L-28.0%2028.5%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L-12.4%201.6%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M30%2044L14.5%20-14.0%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.07%22%20stroke-width=%223%22/%3E%3Crect%20x=%222.5%22%20y=%222.5%22%20width=%2255%22%20height=%2283%22%20rx=%224%22%20fill=%22none%22%20stroke=%22url%28%23m%29%22%20stroke-width=%221.4%22/%3E%3Crect%20x=%225.5%22%20y=%225.5%22%20width=%2249%22%20height=%2277%22%20rx=%222.5%22%20fill=%22none%22%20stroke=%22%23f59e0b%22%20stroke-opacity=%22.45%22%20stroke-width=%22.6%22/%3E%3Ccircle%20cx=%2230%22%20cy=%2244%22%20r=%2225%22%20fill=%22url%28%23m%29%22%20stroke=%22%233b2204%22%20stroke-width=%22.8%22/%3E%3Cpath%20d=%22M30%2044L30.00%2023.00A21%2021%200%200%201%2040.50%2025.81Z%22%20fill=%22%23b91c1c%22/%3E%3Cpath%20d=%22M30%2044L40.50%2025.81A21%2021%200%200%201%2048.19%2033.50Z%22%20fill=%22%230b1230%22/%3E%3Cpath%20d=%22M30%2044L48.19%2033.50A21%2021%200%200%201%2051.00%2044.00Z%22%20fill=%22%231e3a8a%22/%3E%3Cpath%20d=%22M30%2044L51.00%2044.00A21%2021%200%200%201%2048.19%2054.50Z%22%20fill=%22%230b1230%22/%3E%3Cpath%20d=%22M30%2044L48.19%2054.50A21%2021%200%200%201%2040.50%2062.19Z%22%20fill=%22%23b91c1c%22/%3E%3Cpath%20d=%22M30%2044L40.50%2062.19A21%2021%200%200%201%2030.00%2065.00Z%22%20fill=%22%230b1230%22/%3E%3Cpath%20d=%22M30%2044L30.00%2065.00A21%2021%200%200%201%2019.50%2062.19Z%22%20fill=%22%231e3a8a%22/%3E%3Cpath%20d=%22M30%2044L19.50%2062.19A21%2021%200%200%201%2011.81%2054.50Z%22%20fill=%22%230b1230%22/%3E%3Cpath%20d=%22M30%2044L11.81%2054.50A21%2021%200%200%201%209.00%2044.00Z%22%20fill=%22%23b91c1c%22/%3E%3Cpath%20d=%22M30%2044L9.00%2044.00A21%2021%200%200%201%2011.81%2033.50Z%22%20fill=%22%230b1230%22/%3E%3Cpath%20d=%22M30%2044L11.81%2033.50A21%2021%200%200%201%2019.50%2025.81Z%22%20fill=%22%231e3a8a%22/%3E%3Cpath%20d=%22M30%2044L19.50%2025.81A21%2021%200%200%201%2030.00%2023.00Z%22%20fill=%22%230b1230%22/%3E%3Ccircle%20cx=%2230%22%20cy=%2244%22%20r=%2221%22%20fill=%22none%22%20stroke=%22%23050816%22%20stroke-opacity=%22.6%22%20stroke-width=%22.8%22/%3E%3Ccircle%20cx=%2236.00%22%20cy=%2221.59%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2246.40%22%20cy=%2227.60%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2252.41%22%20cy=%2238.00%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2252.41%22%20cy=%2250.00%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2246.40%22%20cy=%2260.40%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2236.00%22%20cy=%2266.41%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2224.00%22%20cy=%2266.41%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2213.60%22%20cy=%2260.40%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%227.59%22%20cy=%2250.00%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%227.59%22%20cy=%2238.00%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2213.60%22%20cy=%2227.60%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2224.00%22%20cy=%2221.59%22%20r=%221.2%22%20fill=%22%23fff7d6%22/%3E%3Ccircle%20cx=%2230%22%20cy=%2244%22%20r=%225.4%22%20fill=%22url%28%23m%29%22%20stroke=%22%233b2204%22%20stroke-width=%22.8%22/%3E%3Cpath%20d=%22M30%2040.6l1%202.1%202.2.3-1.6%201.6.4%202.2-2-1.1-2%201.1.4-2.2-1.6-1.6%202.2-.3Z%22%20fill=%22%237c2d12%22/%3E%3Cpath%20d=%22M30%2018.4l-3.6-6h7.2Z%22%20fill=%22%23dc2626%22%20stroke=%22%23fde68a%22%20stroke-width=%22.9%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M9%209l1%202.2%202.4.3-1.8%201.6.5%202.4-2.1-1.2-2.1%201.2.5-2.4-1.8-1.6%202.4-.3Z%20M51%2079l1%202.2%202.4.3-1.8%201.6.5%202.4-2.1-1.2-2.1%201.2.5-2.4-1.8-1.6%202.4-.3Z%22%20fill=%22%23fde68a%22%20fill-opacity=%22.8%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
      border-color:#f59e0b !important; color:#fde68a;
      box-shadow: inset 0 0 0 1px #fde68a, inset 0 0 14px rgba(0,0,0,.5), 0 0 8px rgba(245,158,11,.35);
    }
    /* Drop Zone card back (drop-zone prize): Gold Vault, black with gold diamond pins and framed gem bins. */
    .custom-card-back.cosmetic-back-dropzone {
      background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2088'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id='bg'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%231b1724'/%3E%3Cstop%20offset='1'%20stop-color='%23060509'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='gd'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fff2b0'/%3E%3Cstop%20offset='.5'%20stop-color='%23e5b04a'/%3E%3Cstop%20offset='1'%20stop-color='%237a5212'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='60'%20height='88'%20fill='url%28%23bg%29'/%3E%3Crect%20x='2.2'%20y='2.2'%20width='55.6'%20height='83.6'%20rx='4'%20fill='none'%20stroke='url%28%23gd%29'%20stroke-width='1.8'/%3E%3Crect%20x='5.2'%20y='5.2'%20width='49.6'%20height='77.6'%20rx='2.5'%20fill='none'%20stroke='%23e5b04a'%20stroke-opacity='.35'%20stroke-width='.6'/%3E%3Cpath%20d='M30%208l3.4%204.2-3.4%204.2-3.4-4.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M30.0%2020.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M25.0%2029.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M35.0%2029.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M20.0%2038.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M30.0%2038.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M40.0%2038.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M15.0%2047.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M25.0%2047.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M35.0%2047.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M45.0%2047.8l2.7%203.2-2.7%203.2-2.7-3.2z'%20fill='url%28%23gd%29'/%3E%3Cpath%20d='M24%2056l6%205%206-5'%20fill='none'%20stroke='%23e5b04a'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.85'/%3E%3Crect%20x='7.5'%20y='66'%20width='9.6'%20height='13'%20rx='1.8'%20fill='%230d0b12'%20stroke='url%28%23gd%29'%20stroke-width='.9'/%3E%3Crect%20x='19.3'%20y='66'%20width='9.6'%20height='13'%20rx='1.8'%20fill='%230d0b12'%20stroke='url%28%23gd%29'%20stroke-width='.9'/%3E%3Crect%20x='31.1'%20y='66'%20width='9.6'%20height='13'%20rx='1.8'%20fill='%230d0b12'%20stroke='url%28%23gd%29'%20stroke-width='.9'/%3E%3Crect%20x='42.9'%20y='66'%20width='9.6'%20height='13'%20rx='1.8'%20fill='%230d0b12'%20stroke='url%28%23gd%29'%20stroke-width='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
      border-color:#e5b04a !important; color:#fde68a;
      box-shadow: inset 0 0 0 1px #ffd36a, inset 0 0 14px rgba(0,0,0,.5), 0 0 8px rgba(229,176,74,.35);
    }
    .custom-card-back.cosmetic-back-dropzone > svg { visibility:hidden; }
    .custom-card-back.cosmetic-back-dropzone::before { display:none; }
    .av-dropcard { transform-box:view-box; animation:av-dropcard 3.2s cubic-bezier(.45,0,.6,1) infinite; }
    @keyframes av-dropcard { 0% { transform:translate(32px,3px) rotate(0); } 16% { transform:translate(32px,8px) rotate(0); } 32% { transform:translate(28.5px,19px) rotate(-12deg); } 46% { transform:translate(26.5px,28px) rotate(6deg); } 58% { transform:translate(26px,35px) rotate(-8deg); } 72% { transform:translate(27px,43px) rotate(3deg); } 84%,100% { transform:translate(27px,49.5px) rotate(0); } }
    body.reduce-motion .av-dropcard { animation:none; transform:translate(27px,49.5px); }
    .custom-card-back.cosmetic-back-wheel > svg { visibility:hidden; }
    .custom-card-back.cosmetic-back-wheel::before { display:none; }
    /* Foil Joker card back (scratch card prize): the ChatGPT art is the card (installed by installLevelBackStyles); a light band sweeps over it. */
    .custom-card-back.cosmetic-back-foil-joker::after { content:""; display:block !important; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.4) 44%,rgba(120,200,255,.25) 50%,rgba(255,150,230,.22) 56%,transparent 70%); background-size:260% 100%; background-repeat:no-repeat; mix-blend-mode:screen; animation:foil-sweep 3.6s ease-in-out infinite; }
    @keyframes foil-sweep { 0%,25% { background-position:130% 0; } 70%,100% { background-position:-30% 0; } }
    body.reduce-motion .custom-card-back[class*="cosmetic-back-foil"]::after { animation:none; background-position:50% 0; opacity:.55; }
    /* Premium frames. Split frames colour the top-left and bottom-right edges
       differently; Dashed and Neon draw inside the card with an outline; the
       moving ones (Neon flicker, Spectrum) animate outline/border colour and
       leave playable/selected cards alone so their green/gold edge shows. */
    body[data-equipped-frame="frame-split-crimson"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 2.5px 2.5px 0 #e11d48,inset -2.5px -2.5px 0 #f8fafc,0 0 8px rgba(225,29,72,.45) !important; }
    body[data-equipped-frame="frame-split-royal"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 2.5px 2.5px 0 #2563eb,inset -2.5px -2.5px 0 #fbbf24,0 0 8px rgba(37,99,235,.45) !important; }
    body[data-equipped-frame="frame-ldn-unionjack"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 0 0 0 1.5px #c8102e,inset 0 0 0 3px #fff,inset 0 0 0 4.5px #012169,0 0 8px rgba(1,33,105,.55) !important; }
    body[data-equipped-frame="frame-mum-kaalipeeli"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 0 0 0 1.5px #15110f,inset 0 0 0 3px #f2b200,inset 0 0 0 4.5px #15110f,0 0 8px rgba(242,178,0,.5) !important; }
    body[data-equipped-frame="frame-split-noir"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:inset 2.5px 2.5px 0 #000,inset 3.5px 3.5px 0 #52525b,inset -2.5px -2.5px 0 #ec4899,0 0 8px rgba(236,72,153,.45) !important; }
    body[data-equipped-frame="frame-dashed-gold"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { outline:2px dashed #fbbf24; outline-offset:-5px; box-shadow:0 0 7px rgba(251,191,36,.45) !important; }
    body[data-equipped-frame="frame-neon-tube"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { outline:2px solid #f472b6; outline-offset:-4px; box-shadow:0 0 10px rgba(244,114,182,.75),inset 0 0 9px rgba(244,114,182,.45) !important; animation:fx-neon-flicker 4.5s infinite; }
    body[data-equipped-frame="frame-neon-tube"] :is(.card-base,.card-table,.custom-card-back):is(.animate-legal-glow,.card-selected):not(.opponent-cosmetic-card) { animation:none; }
    body[data-equipped-frame="frame-spectrum"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) { box-shadow:0 0 9px rgba(168,85,247,.55) !important; }
    body[data-equipped-frame="frame-spectrum"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card):not(.animate-legal-glow):not(.card-selected) { border-style:solid; border-width:2px; animation:fx-spectrum 2.6s linear infinite; }
    @keyframes fx-neon-flicker { 0%, 86%, 90%, 94%, 100% { outline-color:#f472b6; } 88%, 92% { outline-color:#5b1d3a; } }
    @keyframes fx-spectrum {
      0%, 100% { border-color:#f43f5e #f59e0b #22d3ee #a855f7; }
      25% { border-color:#a855f7 #f43f5e #f59e0b #22d3ee; }
      50% { border-color:#22d3ee #a855f7 #f43f5e #f59e0b; }
      75% { border-color:#f59e0b #22d3ee #a855f7 #f43f5e; }
    }
    /* Darkness: a matt, true-black edge with no glow at all. */
    body[data-equipped-frame="frame-darkness"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card) {
      border-color:#000 !important; box-shadow:inset 0 0 0 3px #000 !important;
    }

    body[data-equipped-table-theme="table-casino"] #gameTable {
      background:
        radial-gradient(ellipse at 50% 45%,rgba(16,185,129,.30),transparent 48%),
        repeating-linear-gradient(45deg,rgba(251,191,36,.035) 0 2px,transparent 2px 18px),
        linear-gradient(180deg,#071a17,#064e3b 48%,#031713) !important;
      box-shadow:inset 0 0 0 3px #d4af37,inset 0 0 42px rgba(0,0,0,.78);
    }
    /* Midnight: true black with a sparse scatter of stars (large, uneven
       tile sizes keep the stars few and irregular). */
    body[data-equipped-table-theme="table-midnight"] #gameTable {
      background:
        radial-gradient(circle at 23% 31%,rgba(255,255,255,.9) 0 .8px,transparent 1.6px),
        radial-gradient(circle at 71% 12%,rgba(255,255,255,.7) 0 .7px,transparent 1.4px),
        radial-gradient(circle at 44% 77%,rgba(226,232,240,.55) 0 1px,transparent 1.8px),
        radial-gradient(circle at 88% 64%,rgba(255,255,255,.8) 0 .6px,transparent 1.3px),
        #000 !important;
      background-size:137px 131px,211px 197px,173px 229px,263px 241px,auto !important;
      box-shadow:inset 0 0 0 3px #1e293b,inset 0 0 60px rgba(0,0,0,.9);
    }
    /* Royal: deep purple velvet, fine gold lattice and a gold rim. */
    body[data-equipped-table-theme="table-royal"] #gameTable {
      background:
        radial-gradient(ellipse at 50% 45%,rgba(167,139,250,.28),transparent 55%),
        repeating-linear-gradient(45deg,rgba(251,191,36,.07) 0 1px,transparent 1px 22px),
        repeating-linear-gradient(-45deg,rgba(251,191,36,.07) 0 1px,transparent 1px 22px),
        linear-gradient(180deg,#1e0b3d,#3b0764 50%,#1e0b3d) !important;
      box-shadow:inset 0 0 0 3px #d4af37,inset 0 0 0 6px #7f1d1d,inset 0 0 46px rgba(0,0,0,.7);
    }
    body[data-equipped-table-theme="table-winter"] #gameTable {
      background:
        radial-gradient(circle at 18% 16%,rgba(255,255,255,.8) 0 1px,transparent 2px),
        radial-gradient(circle at 78% 32%,rgba(255,255,255,.65) 0 1px,transparent 2px),
        radial-gradient(ellipse at 50% 55%,rgba(186,230,253,.32),transparent 55%),
        linear-gradient(180deg,#082f49,#0c4a6e 48%,#172554) !important;
      background-size:31px 31px,43px 43px,auto,auto !important;
      box-shadow:inset 0 0 0 3px #bae6fd,inset 0 0 50px rgba(224,242,254,.2);
    }

    .cosmetic-option-card { min-height:76px; }
    .cosmetic-option-card[aria-pressed="true"] { border-color:#34d399; background:rgba(6,78,59,.24); }
    .victory-card-particle { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; pointer-events:none; }
    .victory-card-particle .vcp-face, .victory-card-particle .vcp-back { position:absolute; inset:0; border-radius:6px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 3px 8px rgba(0,0,0,.45); }
    .victory-card-particle .vcp-face { background:#f8fafc; border:1px solid #cbd5e1; display:flex; align-items:flex-start; justify-content:flex-start; padding:3px 4px; font-size:13px; line-height:1.05; text-align:center; }
    .victory-card-particle .vcp-back { transform:rotateY(180deg); }
    .vcp-back-face { position:absolute; inset:0; border-radius:6px; border:1px solid rgba(148,163,184,.7); }

    #localTableSlots .card-face-up { z-index:2; background-color:var(--card-bg) !important; isolation:isolate; }
    body.high-contrast #localTableSlots .card-face-up { background-color:#05070d !important; }

    /* Shop previews are self-contained. They deliberately do not reuse the
       full-screen gameplay particle canvas, so trying an effect can never
       shake, navigate, or visually replace the screen behind the Shop. */
    .shop-preview-stage { position:relative; width:100%; min-height:132px; overflow:hidden; border:1px solid rgba(71,85,105,.75); border-radius:12px; background:rgba(2,6,23,.72); display:flex; align-items:center; justify-content:center; isolation:isolate; }
    .shop-preview-card { flex:none; }
    /* Always-visible mini table (Shop rows, Custom tiles, preview panel). */
    .mini-table { position:relative; display:block; width:100%; height:64px; overflow:hidden; border-radius:10px; }
    .mini-table.is-large { height:132px; border-radius:14px; }
    .mini-table .mini-table-card.custom-card-back { position:absolute; border-width:1.5px !important; }
    .mini-table-card { position:absolute; top:50%; width:17%; max-width:26px; aspect-ratio:5/7; border-radius:4px; transform:translateY(-50%); }
    .mini-table.is-large .mini-table-card { max-width:44px; border-radius:7px; }
    .mini-table-card.deck { left:14%; background:linear-gradient(135deg,#1e293b,#0f172a); border:1.5px solid #475569; }
    .mini-table-card.pile { left:50%; transform:translate(-50%,-50%); border:1.5px dashed var(--mini-table-label); }
    /* Face-up cards drawn like the game's own cards (dark face, coloured rank), with the frame on top. */
    .mini-table-card.face, .mini-table-card.pile-card { background:linear-gradient(160deg,#1e293b,#0f172a); border:1.5px solid #475569; color:#f87171; font-size:9px; font-weight:900; line-height:1; padding:2px; }
    .mini-table-card.face { right:14%; }
    /* Keep the rank clear of the frame drawn inside the card edge. */
    .pp-showcase .mini-table-card.face, .pp-showcase .mini-table-card.pile-card { padding:5px 0 0 5px; font-size:8px; line-height:1.05; overflow:hidden; }
    .mini-table-card.pile-card { left:50%; transform:translate(-50%,-50%) rotate(-6deg); color:#e2e8f0; }
    .mini-table.is-large .mini-table-card.face, .mini-table.is-large .mini-table-card.pile-card { font-size:13px; padding:4px; }
    .mini-table-name { position:absolute; left:0; right:0; bottom:4px; text-align:center; color:#fff; font-size:7px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 3px #000,0 0 6px #000; }
    .mini-table.is-large .mini-table-name { top:12px; bottom:auto; font-size:9px; }
    .shop-row-table { padding:0 8px 8px; }
    .cosmetic-tile .avatar-option-art .mini-table { width:100%; }
    .cosmetic-tile .avatar-option-art:has(.mini-table) { align-self:stretch; }
    .effect-mini-tile > svg, .effect-mini-tile > .eicon { width:100%; height:100%; border-radius:inherit; }
    .eicon { display:inline-block; width:1.5em; height:1.5em; border-radius:.3em; overflow:hidden; vertical-align:middle; }
    .eicon > svg { display:block; }
    .shop-burn-core:has(> svg) { width:72px; height:72px; overflow:hidden; }
    .lb294-piece svg { overflow:hidden !important; }
    .shop-burn-core { width:54px; height:72px; border-radius:10px; border:2px solid #64748b; background:#111827; display:flex; align-items:center; justify-content:center; font-size:28px; }
    .shop-burn-particle { position:absolute; left:50%; top:60%; width:9px; height:14px; border-radius:60% 40% 55% 45%; background:var(--particle-color); box-shadow:0 0 10px var(--particle-color); pointer-events:none; animation:shop-burn-burst .85s ease-out forwards; }
    .shop-burn-particle.ice { width:11px; height:11px; border-radius:2px; transform:rotate(45deg); }
    .shop-burn-particle.electric { width:4px; height:22px; border-radius:2px; }
    @keyframes shop-burn-burst { from { transform:translate(-50%,-50%) scale(.35) rotate(0); opacity:1; } to { transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(var(--spin)); opacity:0; } }

    #flightLayer {
      position: fixed;
      inset: 0;
      pointer-events: none !important;
      z-index: 35;
    }
    .flying-card {
      position: absolute;
      transition: all cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform, opacity, left, top;
    }

    #particleCanvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 45;
    }
    /* Shape-based burn effects (lightning, flames, sweets, paint, smoke).
       Same renderer in games (this fixed layer) and in Shop/Custom
       previews (inside the preview stage). */
    #burnFxLayer { position:fixed; inset:0; pointer-events:none; z-index:46; overflow:hidden; }
    #victoryFxLayer { position:fixed; inset:0; pointer-events:none; z-index:110; overflow:hidden; }
    /* Origami swans flap (burn + victory); the rocket's flame flickers. */
    .ori-wing { transform-box:fill-box; transform-origin:50% 100%; animation:ori-flap .24s ease-in-out infinite alternate; }
    @keyframes ori-flap { to { transform:scaleY(-.5); } }
    .vfx-flame { transform-origin:50% 0; animation:vfx-flicker .09s steps(2) infinite alternate; }
    @keyframes vfx-flicker { to { transform:scale(.85,1.3); } }
    /* Joker effects: over the table (64), under the emote picker (65) and every pop-up. */
    #jokerFxLayer { position:fixed; inset:0; pointer-events:none; z-index:64; overflow:hidden; }
    .jfx-host { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
    .jfx-scrim { position:absolute; inset:0; }
    .jfx-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(34,211,238,.12) 0 2px, transparent 2px 5px); mix-blend-mode:screen; }
    .jfx-word { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Outfit','Arial Black',sans-serif; font-weight:900; color:#fff; white-space:nowrap; letter-spacing:.02em;
      -webkit-text-stroke:2px #1e1b4b; paint-order:stroke fill; text-shadow:0 0 16px var(--jfx-glow, #fbbf24), 0 3px 0 #1e1b4b; }
    .jfx-glitch-text { -webkit-text-stroke:0; text-shadow:none; letter-spacing:.06em; }
    .jfx-wink { transform-box:fill-box; transform-origin:center; animation:jfxWink 1.5s linear both; }
    @keyframes jfxWink { 0%, 42% { transform:scaleY(1); } 48%, 58% { transform:scaleY(.12); } 64%, 100% { transform:scaleY(1); } }
    .jfx-flicker { animation:jfxFlicker .22s steps(2) infinite alternate; }
    @keyframes jfxFlicker { from { opacity:1; } to { opacity:.7; } }
    .jfx-stage { position:relative; overflow:hidden; height:170px; width:100%; border-radius:14px; border:1px solid #334155;
      background:radial-gradient(circle at 50% 40%, #1e1b4b, #020617 75%); }
    .jfx-stage-hint { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:34px; opacity:.55; pointer-events:none; }
    .jfx-stage-hint small { font-size:8px; font-weight:700; color:#94a3b8; }
    body.reduce-motion #jokerFxLayer { display:none; }
    .vfx-chop-text { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-style:italic; color:#ffffff; -webkit-text-stroke:1.5px #111827; paint-order:stroke fill; text-shadow:0 0 2px #111827, 3px 3px 0 #b91c1c, 5px 5px 0 #111827; white-space:nowrap; letter-spacing:.02em; }
    .bfx { position:absolute; left:0; top:0; pointer-events:none; will-change:transform,opacity; }
    .bfx svg { display:block; overflow:visible; }
    .bfx-flash { position:absolute; inset:0; pointer-events:none; }

    [data-tip] { position: relative; }
    /* Tooltip is positioned in JS (see setupDynamicTooltips) from the
       trigger's actual getBoundingClientRect(), then clamped to the
       viewport. A pure-CSS ::before centered with left:50%/translateX(-50%)
       has no awareness of viewport edges: an icon near the left/right edge
       of a narrow phone overflows or gets clipped, while the same icon on a
       wide desktop monitor has room to spare -- so the same tooltip visibly
       lands in a different place depending on screen size. Fixed
       positioning + runtime clamping makes it consistent on any device. */
    #dynamicTooltip {
      position: fixed;
      padding: 2px 6px;
      border-radius: 4px;
      background-color: rgba(15, 23, 42, 0.95);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fef08a;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.6);
      z-index: 9999;
      opacity: 0;
      transform: translateY(2px);
      transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    }
    #dynamicTooltip.visible { opacity: 1; transform: translateY(0); }

    /* Match Stats / Return to Ranked (a.k.a. Back to Lobby) end-of-match
       buttons: both now live inside #matchEndButtonRow, a dedicated
       grid-cols-2 row (see the HTML), so their WIDTH is already forced
       equal and flush with the History strip's edges by the grid itself —
       no fixed width needed here for that part any more. What the grid
       does NOT do on its own is guarantee equal HEIGHT if one label wraps
       to two lines and the other doesn't ("RETURN TO RANKED" vs "MATCH
       STATS"), so both labels force an explicit line break (see the
       HTML/JS for each button) and height/line-height are pinned here too,
       so neither can drift no matter what the label text is.
       A raw CSS rule (not new Tailwind arbitrary-value classes) is used on
       purpose: this project has no live Tailwind compiler, so any new
       h-[...] utility not already in the precompiled bundle would silently
       produce no CSS. */
    #matchStatsBtn, #playAgainMatchBtn, #quickPlayMatchBtn {
      height: 52px;
      line-height: 1.25;
      white-space: normal;
      text-align: center;
    }
    #matchEndButtonRow .match-end-icon { width:32px; height:32px; flex:0 0 32px; }
    #playAgainMatchBtn { grid-column:1 / -1; width:calc(50% - 6px) !important; justify-self:center; }
    /* Only a third button gets its own centred row. When Quick Play is
       hidden (Ranked, online rooms) it sits beside Match Stats. */
    #quickPlayMatchBtn.hidden ~ #playAgainMatchBtn { grid-column:auto; width:100% !important; justify-self:stretch; }

    /* Final Standings box (end-of-match placement summary): sitting at the
       exact same width as #historyStreamPanel above it means its left/right
       edges land exactly where #cardRefLayer and #handCountWrap hang down
       from that panel — both float outside the panel's own edge by roughly
       27-35px (left) and 42-47px (right) at every supported viewport (from
       320px phones up through the max-w-md cap), so anything sharing that
       exact width visually collides with them. Insetting the box's WIDTH
       and MAX-WIDTH by a flat 100px (50px each side, comfortably past both
       measured overlaps) — rather than just adding margin on top of the
       existing w-full — keeps it centered via the untouched mx-auto while
       actually shrinking the box itself, clearing both icons at every size. */
    #finalStandingsBanner {
      width: calc(100% - 100px);
      max-width: calc(28rem - 100px);
    }

    /* Once the match is FINISHED, the local player's own hand is just
       visual context (see showMatchEndUI/hideMatchEndUI) — a large hand
       (10+ cards wrapping into multiple rows) can still be tall enough to
       visually creep up past its own box into the Standings/buttons above
       it, even with shrink-0 protecting THEIR height, since #localHand's
       own content height isn't flex-shrinkable the same way. Scaling it
       down frees real vertical space instead of just hoping there's enough
       to begin with. Raw CSS (not Tailwind's scale-75/origin-bottom) is
       used here on purpose: neither of those utilities exists yet in this
       project's precompiled bundle, so either would silently produce no
       transform at all. */
    #localHand.match-end-compact {
      transform: scale(0.75);
      transform-origin: center bottom;
      max-height: 15vh;
    }

    /* Card-zone labels remain in normal flow beside the table slots and
       above the hand. Their reserved space prevents overlap with cards. */
    .card-zone-label-row {
      position: static;
      width: 100%;
      min-height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(5px, 2vw, 10px);
      flex: 0 0 auto;
      pointer-events: none;
    }
    .card-zone-label {
      position: static;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 15px;
      padding: 1px clamp(6px, 2vw, 10px);
      border: none;
      background: transparent;
      font-size: clamp(7px, 2.15vw, 9px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .card-zone-label-row--table {
      position:absolute;
      z-index:20;
      /* Never past the screen's left edge (a folded Galaxy Fold is 344px wide). */
      right:min(calc(50% + clamp(81px, 13vh, 118px) + 6px), calc(100% - 56px));
      top:50%;
      transform:translateY(-50%);
      width:auto;
      min-width:54px;
      flex-direction:column;
      gap:2px;
    }
    .card-zone-label--table { color:#94a3b8; flex-direction:column; padding:0; gap:2px; letter-spacing:.02em; font-size:clamp(7px, 2vw, 9px); }
    .card-zone-label--table .active-layer { color:#34d399; font-weight:1000; text-shadow:0 0 8px rgba(52,211,153,.5); }
    .card-zone-label--table[data-active-layer="down"] .active-layer { color:#fbbf24; text-shadow:0 0 8px rgba(251,191,36,.5); }
    .card-zone-label--table .inactive-layer { color:#94a3b8; font-weight:600; }
    .card-zone-label--hand { color:#fbbf24; }
    /* Table labels sit directly on the table surface, which changes with
       every table theme (Winter Wonderland is bright and busy). Give them
       the same dark pill as the deck counter so they stay readable on any
       theme; the border picks up the equipped theme's accent. */
    :root { --table-label-border: rgba(148,163,184,.55); }
    body[data-equipped-table-theme="table-casino"] { --table-label-border: rgba(212,175,55,.75); }
    body[data-equipped-table-theme="table-winter"] { --table-label-border: rgba(186,230,253,.85); }
    body[data-equipped-table-theme="table-midnight"] { --table-label-border: rgba(148,163,184,.45); }
    body[data-equipped-table-theme="table-royal"] { --table-label-border: rgba(212,175,55,.8); }
    .table-label-pill {
      display:inline-flex; align-items:center; justify-content:center;
      padding:2px 7px; border-radius:999px;
      background:rgba(2,6,23,.94); border:1px solid var(--table-label-border);
      box-shadow:0 2px 8px rgba(0,0,0,.62); line-height:1.15;
    }
    .card-zone-label.table-label-pill { padding:2px 8px; }
    .card-zone-label--table.table-label-pill { padding:4px 7px; border-radius:10px; }
    .empty-zone-pill { color:#6ee7b7; font-size:8px; letter-spacing:.08em; }
    /* Deck and Base Card flank the pile: cancel the pill's padding + border
       so their columns keep their old widths and the pile stays centred. */
    .table-label-pill.layout-neutral { margin-inline:-8px; }
    /* Points from the Hand label down to the cards it names. A pseudo-element
       so render() can keep setting the label's text to plain "Hand". */
    /* A little breathing room so a fanned hand never tucks under the label. */
    .card-zone-label-row:has(#handZoneLabel) { padding-bottom:5px; }
    /* Hand label centred on the screen; your level sits just to its right
       (a 3-column grid, so the badge never pushes the label off centre). */
    .card-zone-label-row:has(#handZoneLevel) { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
    #handZoneLabel { grid-column:2; }
    #handZoneLevel { grid-column:3; justify-self:start; margin-left:6px; }
    /* Home nickname row (v242-v244): the label over the name box, the
       picture on the left spanning from the top of the label to the bottom
       of the box (v244, owner), the level box on the right. Everything is
       sized in em from the row's font size, which follows the screen width
       (up to 14px), so it always fits one row; the name box holds the
       longest username (12 of the widest letter) and the level box matches
       it: same height, border, corners and text size. Picture height =
       label line (16px) + row gap (4px) + name box (2.5em + 4px). */
    .home-name-row { font-size:clamp(10px, 3.3vw, 14px); display:grid; grid-template-columns:auto auto auto; justify-content:center; column-gap:.4em; row-gap:4px; }
    .home-name-label { grid-column:2; grid-row:1; line-height:16px; margin:0; }
    #playerNameInput.home-name-input { grid-column:2; grid-row:2; font-size:1em; line-height:1.4em; padding:.55em .55em; width:calc(12 * 1.02em + 1.1em + 4px + 2px); min-width:0; }
    .home-name-avatar { grid-column:1; grid-row:1 / 3; align-self:start; display:inline-flex; width:calc(2.5em + 24px); height:calc(2.5em + 24px); padding:0; border:0; background:none; border-radius:12px; cursor:pointer; }
    .home-name-avatar .avatar-tile, .home-name-avatar .avatar-tile > svg { width:100% !important; height:100% !important; }
    .home-name-avatar.hidden, .home-name-level.hidden { display:none; }
    .guest-profile { filter: grayscale(1); opacity: .65; }
    #homeNameLevel.guest-profile { filter: none; opacity: 1; }
    #homeNameLevel.guest-profile .xp-badge-home { color: #94a3b8; background: #172033; border-color: #475569; box-shadow: none; }
    .home-name-avatar.guest-profile svg { width: 100%; height: 100%; }
    .home-name-level { grid-column:3; grid-row:2; display:flex; align-self:stretch; font:inherit; padding:0; border:0; background:none; }
    .xp-badge.xp-badge-home { height:auto; font-size:1em; font-weight:700; letter-spacing:normal; padding:0 .6em; border-width:2px; border-radius:999px; min-width:4.4em; justify-content:center; text-transform:uppercase; }
    /* Speed locks (v247) */
    #lobbySpeedTicks .speed-locked { color:#64748b; display:inline-flex; align-items:center; gap:2px; }
    #lobbySpeedTicks .speed-locked svg { width:9px; height:9px; }
    .speed-lock-btn { display:inline-flex; align-items:center; justify-content:center; padding:3px; margin:-3px -3px -3px -1px; border-radius:6px; color:#94a3b8; cursor:help; background:none; border:0; vertical-align:middle; }
    .speed-lock-btn:hover, .speed-lock-btn:focus-visible { color:#fbbf24; background:rgba(251,191,36,.12); }
    .speed-lock-btn svg { width:10px; height:10px; }
    #settingsSpeedLockBtn { margin-left:2px; }
    /* A small explanation bubble anchored to a button (showInfoPop). */
    #infoPop { position:fixed; z-index:330; max-width:min(280px, calc(100vw - 24px)); background:#0f172a; color:#e2e8f0; border:1px solid rgba(251,191,36,.45); border-radius:12px; padding:9px 11px; font-size:11px; line-height:1.4; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.55); opacity:0; transform:translateY(4px); transition:opacity .15s var(--ease-soft, ease), transform .15s var(--ease-soft, ease); pointer-events:auto; text-align:left; }
    #infoPop.info-pop-centred { text-align:center; }
    #infoPop.show { opacity:1; transform:none; }
    #infoPop p + p { margin-top:4px; }
    #infoPop b { color:#fbbf24; font-weight:900; }
    body.reduce-motion #infoPop { transition:none; }
    #handZoneLabel::after { content:'\2193'; margin-left:4px; font-size:1.2em; line-height:1; }
    /* The Deck (card-base) is wider than the Base Card (card-table). Equal
       side columns keep the pile, and the table cards and hand below it, on
       the screen's centre line. Wider labels overflow evenly both ways. */
    #deckZone, #baseCardHud { width:clamp(52px, 8.5vh, 82px); }
    /* Keep these panels inside the visible area below the persistent header.
       Their close buttons stay fixed in each panel while content scrolls. */
    #settingsModal, #themesModal, #shopModal, #rulesModal, #tutorialHubScreen {
      top: calc(44px + var(--safe-top));
      bottom: 0;
      height: auto;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    #settingsModal > div, #themesModal > div, #shopModal > div,
    #rulesModal > div, #tutorialHubScreen > div {
      max-height: 100% !important;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #settingsScroll { min-height: 0; overflow-y: auto; }
    #settingsModal .hscroll-wrap { flex-shrink: 0; }
    #rulesModal > div > div:first-child { flex-shrink: 0; }
    #rulesModal > div > div:nth-child(2) { min-height: 0; }
    @media (min-width: 768px) {
      #settingsModal, #themesModal, #shopModal, #rulesModal, #tutorialHubScreen { top: calc(60px + var(--safe-top)); }
    }
    body.ui-overlay-open { overflow:hidden !important; overscroll-behavior:none; }
    /* Online rooms on phones: the room code needs the header's left side,
       so the Diamond pill shows just its icon there (tap it for the count). */
    @media (max-width: 480px) {
      body > header:has(#roomCodeBadge:not(.hidden)) #headerDiamondCount { display: none; }
      body > header > div:first-child { overflow: hidden; }
    }
    /* Every page and pop-up fits the VISIBLE screen on every phone: sized by
       dvh (iPhone Safari's vh includes the hidden toolbars, which is what let
       a 90vh panel spill up under the header and hide its X), less the
       status bar / home bar, and scrolls inside rather than overflowing. */
    /* The header (z-index 202) sits above every page, so a page starts
       BELOW it (--header-h already includes the status bar) and its panel
       fits the space left: tall ones (Challenges, Friends...) never slide
       their top and X under the header, on phones or PC. */
    :root { --header-h: calc(2.75rem + var(--safe-top)); }
    @media (min-width: 768px) { :root { --header-h: calc(60px + var(--safe-top)); } }
    div.fixed.inset-0.flex.items-center.justify-center:not(:where(#lobbyScreen, #victoryOverlay, #shuffleIntroOverlay, #settingsModal, #themesModal, #shopModal, #rulesModal, #tutorialHubScreen)) {
      top: var(--header-h);
    }
    div.fixed.inset-0.flex.items-center.justify-center.p-4:not(:where(#lobbyScreen, #victoryOverlay, #shuffleIntroOverlay, #settingsModal, #themesModal, #shopModal, #rulesModal, #tutorialHubScreen)) { padding-top: 1rem; }
    div.fixed.inset-0.flex.items-center.justify-center.p-3:not(:where(#lobbyScreen, #victoryOverlay, #shuffleIntroOverlay, #settingsModal, #themesModal, #shopModal, #rulesModal, #tutorialHubScreen)) { padding-top: .75rem; }
    div.fixed.inset-0.flex.items-center.justify-center:not(:where(#lobbyScreen, #victoryOverlay, #shuffleIntroOverlay)) > div:first-child {
      max-height: calc(100dvh - var(--header-h) - 2rem - env(safe-area-inset-bottom, 0px)) !important;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    /* ---- House motion curves: every animation uses one of these ----
       snappy = UI presses/toggles; bouncy = small overshoot for things that
       land; soft = pop-ups and fades; spring = a real spring shape (linear()
       where supported, bouncy otherwise). Mirrored in JS as EASE. */
    :root { --ease-snappy: cubic-bezier(.2,.9,.3,1); --ease-bouncy: cubic-bezier(.34,1.56,.64,1); --ease-soft: cubic-bezier(.22,1,.36,1); --ease-spring: var(--ease-bouncy); }
    @supports (transition-timing-function: linear(0, 1)) { :root { --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1); } }
    /* ---- Microinteractions (all neutralised by body.reduce-motion) ---- */
    :is(.cosmetic-tab, .settings-row, #hamburgerDrawer nav button, #lobbyScreen button, #matchEndButtonRow button,
        .ms-actions button, #playSelectedBtn, #swapControlBar button, #headerInboxBtn, #hamburgerBtn, #headerDiamondBtn, #headerShopBtn,
        #matrixRefBtn, #cardRefBtn, #emoteToggleBtn):not(:disabled) { transition-property: transform, scale, background-color, border-color, color, box-shadow, opacity; transition-timing-function: var(--ease-snappy); transition-duration: .16s; }
    :is(.cosmetic-tab, .settings-row, #hamburgerDrawer nav button, #lobbyScreen button, #matchEndButtonRow button,
        .ms-actions button, #playSelectedBtn, #swapControlBar button, #headerInboxBtn, #hamburgerBtn, #headerDiamondBtn, #headerShopBtn,
        #matrixRefBtn, #cardRefBtn, #emoteToggleBtn):not(:disabled):active { scale: .95; }
    /* Wide headers and rows never shrink when pressed (v255): a 95% press
       pulled a full-width header's right edge ~14px in, so a tap on its
       chevron was let go outside the button and lost. They brighten instead. */
    :is(.series-head, .cat-head, .settings-row, .accordion-toggle):active { scale: 1 !important; transform: none; filter: brightness(1.15); }
    /* A touched card only glows darker: moving it (the old 6px lift) slid it
       out from under the finger, so letting go tapped the card below (v237). */
    .hand-card:active { filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) brightness(1.08); }
    @keyframes miPulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.75); scale: 1; } 40% { scale: 1.06; } 100% { box-shadow: 0 0 0 16px rgba(245,158,11,0); scale: 1; } }
    .mi-pulse-once { animation: miPulse .55s ease-out; }
    @keyframes miSlideIn { from { translate: 0 -10px; opacity: 0; scale: .9; } to { translate: 0 0; opacity: 1; scale: 1; } }
    .mi-slide-in { animation: miSlideIn .5s var(--ease-spring); }
    /* Selected-to-play: the hand keeps a raised, gold-edged placeholder;
       the copy sitting on the pile springs up with a gold edge. */
    .hand-card.mi-staged { opacity: .45 !important; translate: 0 -12px; box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,.45) !important; }
    .mi-staged-preview { box-shadow: 0 0 0 2px #fbbf24, 0 12px 18px rgba(0,0,0,.5) !important; }
    @keyframes miLiftIn { from { translate: 0 10px; scale: .9; } to { translate: 0 0; scale: 1; } }
    .mi-lift-in { animation: miLiftIn .45s var(--ease-spring); }
    /* Settings ON/OFF as a sliding switch (the ON/OFF word stays inside). */
    .mi-switch { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 46px; height: 22px; padding: 0 7px; border-radius: 999px;
      font-size: 8px; font-weight: 900; letter-spacing: .04em; background: #3f1d24; border: 1px solid #f43f5e; color: #fda4af; flex-shrink: 0;
      transition: background-color .22s var(--ease-soft), border-color .22s var(--ease-soft), color .22s var(--ease-soft); }
    .mi-switch::before { content: ''; position: absolute; left: 3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fda4af;
      box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: translate .32s var(--ease-spring), background-color .22s var(--ease-soft); }
    .mi-switch.is-on { justify-content: flex-start; background: #064e3b; border-color: #10b981; color: #6ee7b7; }
    .mi-switch.is-on::before { translate: 22px 0; background: #6ee7b7; }
    /* Tab strips: the highlight is one pill that glides between tabs. */
    .tab-glide { position: absolute; z-index: 0; border-radius: 999px; border: 1px solid #f59e0b; background: rgba(69,26,3,.45); pointer-events: none; opacity: 0;
      transition: left .42s var(--ease-spring), width .42s var(--ease-spring), top .3s var(--ease-soft), opacity .2s var(--ease-soft); }
    .hscroll-wrap.has-glide .cosmetic-tab-bar { position: relative; z-index: 1; background: transparent; }
    .hscroll-wrap.has-glide { background: #020617; }
    .hscroll-wrap.has-glide .cosmetic-tab[aria-selected="true"] { background: transparent; border-color: transparent; }
    /* Last 5 seconds of your online turn. */
    @keyframes miUrgent { 0%, 100% { scale: 1; box-shadow: 0 0 10px rgba(244,63,94,.35); } 50% { scale: 1.12; box-shadow: 0 0 18px rgba(244,63,94,.85); } }
    #turnTimerBadge.mi-urgent { animation: miUrgent 1s var(--ease-soft) infinite; background: #4c0519; }
    /* Match summary: bars fill from where they were, finished rows stamp. */
    .ms-bar i { transition: width .8s var(--ease-soft); }
    @keyframes miStamp { 0% { scale: 2.2; opacity: 0; rotate: -18deg; } 60% { scale: .9; opacity: 1; rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } }
    .mi-stamp { display: inline-block; animation: miStamp .5s var(--ease-spring) both; color: #34d399; }
    @keyframes miRowIn { from { translate: -14px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
    .mi-row-in { animation: miRowIn .45s var(--ease-spring) both; }
    /* Rank up: the new tier badge flips in and a shine sweeps across it. */
    .ms-rankup { position: relative; overflow: hidden; margin: 8px auto 0; width: fit-content; padding: 6px 14px; border-radius: 12px; border: 2px solid; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
    .ms-rankup small { display: block; font-size: 8px; letter-spacing: .14em; opacity: .8; }
    @keyframes miRankFlip { 0% { rotate: x 90deg; scale: .7; opacity: 0; } 60% { rotate: x -12deg; scale: 1.08; opacity: 1; } 100% { rotate: x 0deg; scale: 1; } }
    .ms-rankup.mi-rank-in { animation: miRankFlip .7s var(--ease-spring) both; }
    .ms-rankup::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); translate: -120% 0; }
    .ms-rankup.mi-rank-in::after { animation: miShine 1.1s .45s var(--ease-soft) both; }
    @keyframes miShine { to { translate: 120% 0; } }
    /* Inbox: the mail icon wiggles and the count bounces when something new lands. */
    @keyframes miWiggle { 0%,100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -8deg; } 80% { rotate: 4deg; } }
    .mi-wiggle { animation: miWiggle .6s var(--ease-soft); }
    @keyframes miBadgeBounce { 0% { scale: .3; } 55% { scale: 1.35; } 100% { scale: 1; } }
    .mi-badge-bounce { animation: miBadgeBounce .5s var(--ease-spring); }
    /* Crisp 3D flip-in for face-up cards arriving on a table and the pile view. */
    #localTableSlots, .opp-slot-row, #inspectCardsContainer { perspective: 600px; }
    @keyframes miFlipIn { 0% { rotate: y 90deg; scale: .9; filter: brightness(.55); } 60% { rotate: y -10deg; scale: 1.04; filter: brightness(1.15); } 100% { rotate: y 0deg; scale: 1; filter: none; } }
    .mi-flip-in { animation: miFlipIn .45s var(--ease-soft) both; }
    /* Blind face-down flip reveal (playBlindReveal). */
    .blind-reveal-dim { position:fixed; inset:0; z-index:180; background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(2,6,23,.15) 0, rgba(2,6,23,.7) 70%); pointer-events:auto; opacity:0; transition:opacity .2s ease-out; }
    .blind-reveal-card { position:fixed; z-index:181; perspective:700px; pointer-events:none; }
    .blind-reveal-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
    .blind-reveal-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px; overflow:hidden; }
    .blind-reveal-face > * { width:100% !important; height:100% !important; margin:0 !important; transform:none !important; }
    .blind-reveal-front { transform:rotateY(180deg); }
    .blind-reveal-glow { position:absolute; inset:0; border-radius:12px; pointer-events:none; box-shadow:0 0 24px 6px rgba(245,158,11,.55); opacity:.9; }
    .blind-reveal-card.is-good .blind-reveal-glow { box-shadow:0 0 30px 10px rgba(16,185,129,.75); }
    .blind-reveal-card.is-bad .blind-reveal-glow { box-shadow:0 0 30px 10px rgba(244,63,94,.75); }
    /* Never fade the whole card: Face-Up cards sit directly over Face-Down
       cards, so element opacity made the purchased card-back pattern show
       through the face and look like the card had glitched/flipped. Dim the
       fully opaque face with a filter and an internal veil instead. */
    .card-out-of-turn { opacity:1 !important; filter:saturate(.42) brightness(.68); cursor:not-allowed !important; }
    .card-out-of-turn::after { content:''; position:absolute; inset:0; z-index:20; border-radius:inherit; background:rgba(2,6,23,.22); pointer-events:none; }
    .card-out-of-turn.snap-eligible::after { display:none; }
    .card-out-of-turn.snap-eligible { opacity:1 !important; filter:none; box-shadow:0 0 0 3px #fb7185,0 0 22px rgba(244,63,94,.9) !important; animation:snap-card-ready .7s ease-in-out infinite alternate; }
    @keyframes snap-card-ready { from{transform:translateY(0)} to{transform:translateY(-7px)} }
    .shop-purchase-success { animation:shop-unlock-pop .55s cubic-bezier(.2,.9,.3,1.25); }
    @keyframes shop-unlock-pop { 0%{opacity:0;transform:scale(.72)} 70%{opacity:1;transform:scale(1.05)} 100%{transform:scale(1)} }
    #shopModal .shop-sticky-header { position:sticky; top:0; z-index:30; background:#020617; }
    .turn-transition-lock { pointer-events:none !important; opacity:.7; }
    /* Profile pictures: one 1:1 rounded-square tile everywhere (matches the
       default profile icon). Animations are subtle loops and stop entirely
       under Reduce Motion. */
    .avatar-tile { display:inline-block; flex:none; line-height:0; vertical-align:middle; }
    .avatar-svg { width:100%; height:100%; display:block; overflow:visible; }
    .avatar-tile.avatar-locked { filter:grayscale(1) brightness(.5); }
    .av-flicker { transform-box:fill-box; transform-origin:50% 100%; animation:av-flicker 1.1s ease-in-out infinite alternate; }
    .av-flicker-2 { animation-duration:.8s; animation-delay:-.3s; }
    @keyframes av-flicker { 0% { transform:scale(1,1); opacity:.85; } 50% { transform:scale(1.06,.9); } 100% { transform:scale(.95,1.08); opacity:1; } }
    .av-fan { transform-box:view-box; transform-origin:32px 50px; animation:av-fan-l 2.8s ease-in-out infinite; }
    .av-fan-r { animation-name:av-fan-r; }
    @keyframes av-fan-l { 0%,20% { transform:rotate(-24deg); } 45%,70% { transform:rotate(0deg); } 95%,100% { transform:rotate(-24deg); } }
    @keyframes av-fan-r { 0%,20% { transform:rotate(24deg); } 45%,70% { transform:rotate(0deg); } 95%,100% { transform:rotate(24deg); } }
    .av-sway { transform-box:view-box; transform-origin:32px 52px; animation:av-sway 3.2s ease-in-out infinite; }
    @keyframes av-sway { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
    .av-shine { animation:av-shine 2.6s ease-in-out infinite; }
    @keyframes av-shine { 0%,35% { transform:translateX(-12px); } 75%,100% { transform:translateX(48px); } }
    /* Foil Ace avatar drafts: a band of light crosses the card, rainbow foil shifts hue, one card turns edge-on. */
    /* Prism Ace avatar: the same light band as the card back crosses the tile, rests, then repeats. */
    .av-pshine { mix-blend-mode:screen; animation:av-pshine 3.6s ease-in-out infinite; }
    @keyframes av-pshine { 0%,25% { transform:translateX(0); } 70%,100% { transform:translateX(1500px); } }
    body.reduce-motion .av-pshine { animation:none; transform:translateX(760px); opacity:.5; }
    .av-foilsweep { animation:av-foilsweep 3.2s ease-in-out infinite; }
    @keyframes av-foilsweep { 0%,30% { transform:translateX(-20px) rotate(20deg); } 80%,100% { transform:translateX(50px) rotate(20deg); } }
    .av-holohue { animation:av-holohue 5s linear infinite; }
    @keyframes av-holohue { from { filter:hue-rotate(0deg); } to { filter:hue-rotate(360deg); } }
    .av-cardturn { transform-box:fill-box; transform-origin:center; animation:av-cardturn 3.6s ease-in-out infinite; }
    @keyframes av-cardturn { 0%,45%,100% { transform:scaleX(1) skewY(0); } 62% { transform:scaleX(.5) skewY(-4deg); } 78% { transform:scaleX(.9) skewY(2deg); } }
    body.reduce-motion .av-foilsweep, body.reduce-motion .av-holohue, body.reduce-motion .av-cardturn { animation:none; }
    body.reduce-motion .av-foilsweep { transform:translateX(14px) rotate(20deg); }
    .av-twinkle { transform-box:fill-box; transform-origin:center; animation:av-twinkle 1.8s ease-in-out infinite; }
    .av-twinkle-2 { animation-delay:-.6s; } .av-twinkle-3 { animation-delay:-1.1s; } .av-twinkle-4 { animation-delay:-1.4s; }
    @keyframes av-twinkle { 0%,100% { transform:scale(.3); opacity:.2; } 50% { transform:scale(1.15); opacity:1; } }
    /* Premium animated pictures (Royal Flush, Phoenix, Cosmic Ace). */
    .av-rf { transform-box:view-box; transform-origin:32px 54px; animation:av-rf 3.4s cubic-bezier(.34,1.3,.5,1) infinite; }
    @keyframes av-rf { 0%,14% { transform:rotate(calc(var(--a) * .2)); } 38%,80% { transform:rotate(var(--a)); } 100% { transform:rotate(calc(var(--a) * .2)); } }
    /* Lucky Wheel avatar: two fast turns slow to a stop under the pointer (which flicks on each peg), the star twinkles, a glow breathes, then it holds and repeats. */
    .av-wheelspin { transform-box:view-box; transform-origin:32px 35.5px; animation:av-wheelspin 4.4s infinite; }
    @keyframes av-wheelspin { 0% { transform:rotate(0); animation-timing-function:cubic-bezier(.1,.7,.25,1); } 70%,100% { transform:rotate(740deg); } }
    .av-wheeltick { transform-box:view-box; transform-origin:32px 8px; animation:av-wheeltick 4.4s infinite; }
    @keyframes av-wheeltick { 0%,100% { transform:rotate(0); } 4% { transform:rotate(-16deg); } 8% { transform:rotate(2deg); } 12% { transform:rotate(-14deg); } 16% { transform:rotate(1deg); } 22% { transform:rotate(-11deg); } 28% { transform:rotate(1deg); } 38% { transform:rotate(-8deg); } 46% { transform:rotate(0); } 60% { transform:rotate(-5deg); } 68% { transform:rotate(0); } }
    .av-bob { animation:av-bob 1.8s ease-in-out infinite alternate; }
    @keyframes av-bob { from { transform:translateY(1px); } to { transform:translateY(-1.5px); } }
    .av-wing { transform-box:view-box; transform-origin:29px 33px; animation:av-wing .9s ease-in-out infinite; }
    @keyframes av-wing { 0%,100% { transform:rotate(-16deg); } 50% { transform:rotate(14deg) scaleY(.82); } }
    .av-tail { transform-box:view-box; transform-origin:32px 43px; animation:av-tail 1.3s ease-in-out infinite alternate; }
    @keyframes av-tail { from { transform:rotate(-6deg) scaleY(.94); } to { transform:rotate(6deg) scaleY(1.06); } }
    .av-ember { transform-box:fill-box; transform-origin:center; animation:av-ember 2s ease-out infinite; }
    @keyframes av-ember { 0% { transform:translateY(0) scale(1); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(-26px) scale(.3); opacity:0; } }
    .av-float { animation:av-float 3s ease-in-out infinite alternate; }
    @keyframes av-float { from { transform:translateY(1.2px); } to { transform:translateY(-1.2px); } }
    .av-pulse { transform-box:fill-box; transform-origin:center; animation:av-pulse 2.2s ease-in-out infinite; }
    @keyframes av-pulse { 0%,100% { transform:scale(.92); opacity:.85; } 50% { transform:scale(1.06); opacity:1; } }
    .av-orbit { animation:av-orbit 4.2s linear infinite; }
    @keyframes av-orbit { 0.0% { transform:translate(27.00px,0.00px); } 8.33% { transform:translate(23.38px,4.00px); } 16.67% { transform:translate(13.50px,6.93px); } 25.0% { transform:translate(0.00px,8.00px); } 33.33% { transform:translate(-13.50px,6.93px); } 41.67% { transform:translate(-23.38px,4.00px); } 50.0% { transform:translate(-27.00px,0.00px); } 58.33% { transform:translate(-23.38px,-4.00px); } 66.67% { transform:translate(-13.50px,-6.93px); } 75.0% { transform:translate(-0.00px,-8.00px); } 83.33% { transform:translate(13.50px,-6.93px); } 91.67% { transform:translate(23.38px,-4.00px); } 100.0% { transform:translate(27.00px,-0.00px); } }
    .av-orbit-front { animation:av-orbit-front 4.2s linear infinite; }
    .av-orbit-back { animation:av-orbit-back 4.2s linear infinite; }
    @keyframes av-orbit-front { 0%,49% { opacity:1; } 51%,99% { opacity:0; } 100% { opacity:1; } }
    @keyframes av-orbit-back { 0%,49% { opacity:0; } 51%,99% { opacity:1; } 100% { opacity:0; } }
    /* Premium photo pictures (Sapphire Sovereign, Crimson Inferno, Scarlet Guardian): one 6s loop each, CSS only.
       Parts turn about their pivot (inline transform-origin, in the picture's 1000-unit square). */
    .av-px-part { transform-box:view-box; animation:6s ease-in-out infinite; }
    /* Sapphire Sovereign roars: rears back, throws the head up with the jaw wide, shakes, settles. */
    .av-px-sapphire-sovereign-head { animation-name:av-px-lion-head; }
    @keyframes av-px-lion-head { 0%,12%,70%,100% { transform:rotate(0) scale(1); } 20% { transform:rotate(-1.6deg) scale(.99); } 27% { transform:rotate(2.6deg) scale(1.035); } 31% { transform:rotate(2deg) scale(1.04); } 35% { transform:rotate(2.8deg) scale(1.04); } 39% { transform:rotate(2deg) scale(1.04); } 43% { transform:rotate(2.8deg) scale(1.04); } 47% { transform:rotate(2.2deg) scale(1.035); } 58% { transform:rotate(.3deg) scale(1.005); } }
    .av-px-sapphire-sovereign-jaw { animation-name:av-px-lion-jaw; }
    @keyframes av-px-lion-jaw { 0%,20%,62%,100% { transform:rotate(0); } 27% { transform:rotate(-17deg); } 33% { transform:rotate(-14deg); } 39% { transform:rotate(-17deg); } 45% { transform:rotate(-14deg); } 51% { transform:rotate(-16deg); } }
    .av-px-sapphire-sovereign-tail { animation-name:av-px-lion-tail; }
    @keyframes av-px-lion-tail { 0%,100% { transform:rotate(-1.4deg); } 27% { transform:rotate(2.6deg); } 36% { transform:rotate(-.6deg); } 45% { transform:rotate(2.2deg); } 70% { transform:rotate(.6deg); } }
    .av-px-sapphire-sovereign-gem { animation:av-px-gem 6s ease-in-out infinite; }
    @keyframes av-px-gem { 0%,18%,64%,100% { opacity:.2; transform:scale(.8); } 30%,50% { opacity:.75; transform:scale(1.1); } 82% { opacity:.45; transform:scale(.95); } }
    .av-px-sapphire-sovereign-eye { opacity:0; animation:av-px-lion-eye 6s ease-in-out infinite; }
    @keyframes av-px-lion-eye { 0%,22%,56%,100% { opacity:0; transform:scale(.6); } 28%,48% { opacity:1; transform:scale(1.15); } }
    .av-px-ring { transform-box:fill-box; transform-origin:100% 50%; animation:av-px-ring 6s ease-out infinite; }
    .av-px-ring-2 { animation-delay:.35s; } .av-px-ring-3 { animation-delay:.7s; }
    @keyframes av-px-ring { 0%,26% { opacity:0; transform:translateX(0) scale(.5); } 28% { opacity:.9; } 44%,100% { opacity:0; transform:translateX(-150px) scale(2.8); } }
    /* Crimson Inferno chuckles: the whole devil heaves from the feet, eyes flaring, tail wagging; then the ember runs up the trident. */
    .av-px-crimson-inferno-body { animation-name:av-px-devil-chuckle; }
    @keyframes av-px-devil-chuckle { 0%,6%,44%,100% { transform:rotate(0) scale(1,1); } 10% { transform:rotate(-.8deg) scale(1.012,.975); } 13% { transform:rotate(-1.2deg) scale(.996,1.008); } 16% { transform:rotate(-1.4deg) scale(1.013,.972); } 19% { transform:rotate(-1.6deg) scale(.996,1.008); } 22% { transform:rotate(-1.8deg) scale(1.013,.972); } 25% { transform:rotate(-1.8deg) scale(.996,1.008); } 28% { transform:rotate(-1.6deg) scale(1.012,.975); } 31% { transform:rotate(-1.4deg) scale(.997,1.006); } 34% { transform:rotate(-1.2deg) scale(1.01,.98); } 38% { transform:rotate(-.6deg) scale(1,1); } }
    .av-px-crimson-inferno-tail { animation-name:av-px-devil-tail; }
    @keyframes av-px-devil-tail { 0%,6%,40%,100% { transform:rotate(0); } 11% { transform:rotate(7deg); } 16% { transform:rotate(-4deg); } 21% { transform:rotate(7deg); } 26% { transform:rotate(-4deg); } 31% { transform:rotate(6deg); } 36% { transform:rotate(-2deg); } 70% { transform:rotate(3deg); } }
    .av-px-crimson-inferno-eye { opacity:0; animation:av-px-eyes 6s ease-in-out infinite; }
    @keyframes av-px-eyes { 0%,7%,44%,100% { opacity:0; transform:scale(.7); } 11%,17%,23%,29%,35% { opacity:1; transform:scale(1.15); } 14%,20%,26%,32% { opacity:.55; transform:scale(.95); } }
    .av-px-ember { animation:av-px-ember 6s linear infinite; }
    @keyframes av-px-ember { 0%,48% { opacity:0; transform:translate(0,0) scale(.6); } 50% { opacity:1; transform:translate(0,0) scale(1); } 56% { transform:translate(24.2px,-194.4px); } 62% { opacity:1; transform:translate(41.1px,-340.1px); } 66% { opacity:1; transform:translate(54.8px,-390.3px) scale(1.2); } 68%,100% { opacity:0; transform:translate(54.8px,-390.3px) scale(.6); } }
    .av-px-spark { animation:6s linear infinite; }
    .av-px-spark-0 { animation-name:av-px-spark-0; }
    .av-px-spark-1 { animation-name:av-px-spark-1; }
    .av-px-spark-2 { animation-name:av-px-spark-2; }
    @keyframes av-px-spark-0 { 0%,65% { opacity:0; transform:translate(0,0); } 66% { opacity:1; transform:translate(0,0); } 70% { transform:translate(-84.6px,-55.1px); } 74% { transform:translate(-72.5px,-148.2px); } 78% { opacity:1; transform:translate(-65.3px,-233.2px) scale(1); } 81% { opacity:1; transform:translate(-65.3px,-233.2px) scale(1.9); } 86%,100% { opacity:0; transform:translate(-65.3px,-233.2px) scale(.5); } }
    @keyframes av-px-spark-1 { 0%,65% { opacity:0; transform:translate(0,0); } 66% { opacity:1; transform:translate(0,0); } 72% { transform:translate(12px,-119.9px); } 78% { opacity:1; transform:translate(21.7px,-272.1px) scale(1); } 81% { opacity:1; transform:translate(21.7px,-272.1px) scale(2.1); } 86%,100% { opacity:0; transform:translate(21.7px,-272.1px) scale(.5); } }
    @keyframes av-px-spark-2 { 0%,65% { opacity:0; transform:translate(0,0); } 66% { opacity:1; transform:translate(0,0); } 70% { transform:translate(92.5px,-55.1px); } 74% { transform:translate(96.6px,-140.1px); } 78% { opacity:1; transform:translate(100.6px,-208.9px) scale(1); } 81% { opacity:1; transform:translate(100.6px,-208.9px) scale(1.9); } 86%,100% { opacity:0; transform:translate(100.6px,-208.9px) scale(.5); } }
    /* Scarlet Guardian flaps: two strong beats (up, down with the wing foreshortened), then a glide. */
    .av-px-scarlet-guardian-wing { animation-name:av-px-bird-flap; }
    @keyframes av-px-bird-flap { 0%,62%,100% { transform:rotate(0) scale(1); } 8% { transform:rotate(-5deg) scale(.97); } 18% { transform:rotate(11deg) scale(.88,.93); } 28% { transform:rotate(-5deg) scale(.97); } 38% { transform:rotate(11deg) scale(.88,.93); } 48% { transform:rotate(-2deg) scale(.99); } 56% { transform:rotate(1deg); } }
    /* Turtley snaps: pulls back, lunges with the jaw open, SNAP (a gold clack at the beak), then a quick double chomp. */
    .av-px-turtley-head { animation-name:av-px-turtle-head; }
    @keyframes av-px-turtle-head { 0%,8%,34%,40%,64%,100% { transform:translate(0,0) rotate(0); } 15% { transform:translate(8px,2px) rotate(2deg); } 20% { transform:translate(-24px,5px) rotate(-3deg); } 26% { transform:translate(-16px,3px) rotate(-2deg); } 45% { transform:translate(4px,0) rotate(1deg); } 49% { transform:translate(-18px,4px) rotate(-2deg); } 52% { transform:translate(-10px,2px) rotate(-1deg); } 56% { transform:translate(-20px,4px) rotate(-2.5deg); } }
    .av-px-turtley-jaw { animation-name:av-px-turtle-jaw; }
    @keyframes av-px-turtle-jaw { 0%,8%,20%,42%,49%,56%,100% { transform:rotate(0); } 16% { transform:rotate(-26deg); } 45% { transform:rotate(-22deg); } 52.5% { transform:rotate(-18deg); } }
    .av-px-snap { transform-box:fill-box; transform-origin:center; animation:av-px-snap 6s ease-out infinite; }
    @keyframes av-px-snap { 0%,19.5%,25%,48.5%,53%,55.5%,60%,100% { opacity:0; transform:scale(.5); } 20.5%,49.5%,56.5% { opacity:1; transform:scale(1.1); } }
    .av-px-glow { transform-box:fill-box; transform-origin:center; opacity:.45; mix-blend-mode:screen; }
    .av-px-sweep { animation:6s ease-in-out infinite; }
    .av-px-sapphire-sovereign-sweep { animation-name:av-px-sweep-a; }
    .av-px-scarlet-guardian-sweep { animation-name:av-px-sweep-b; }
    @keyframes av-px-sweep-a { 0%,64% { transform:translateX(0); } 94%,100% { transform:translateX(1700px); } }
    @keyframes av-px-sweep-b { 0%,58% { transform:translateX(0); } 90%,100% { transform:translateX(1700px); } }
    .av-px-rise { animation:av-px-rise 3s ease-out infinite; }
    @keyframes av-px-rise { 0% { opacity:0; transform:translate(0,0) scale(.6); } 15% { opacity:1; } 70% { opacity:.8; } 100% { opacity:0; transform:translate(18px,-150px) scale(.3); } }
    /* Animated pictures pause offscreen and while the app is hidden (avatarMotionWatch). */

    /* Crown collection: short CSS-only loops, paused by avatarMotionWatch. */
    .av-crown-glint { opacity:0; transform-box:fill-box; transform-origin:center; animation:av-crown-glint 6s ease-in-out infinite; }
    .av-crown-glint.second { animation-delay:2.4s; }
    @keyframes av-crown-glint { 0%,66%,86%,100% { opacity:0; transform:scale(.45); } 74% { opacity:.9; transform:scale(1); } }
    .av-crown-aura { opacity:.12; transform-box:fill-box; transform-origin:center; animation:av-crown-aura 5s ease-in-out infinite; }
    @keyframes av-crown-aura { 0%,100% { opacity:.12; transform:scale(.94); } 50% { opacity:.48; transform:scale(1.07); } }
    .av-crown-spark { opacity:0; animation:av-crown-spark 5s ease-out infinite; }
    @keyframes av-crown-spark { 0%,12%,82%,100% { opacity:0; transform:translateY(0); } 25% { opacity:.7; } 75% { opacity:0; transform:translateY(-190px); } }
    body.reduce-motion :is(.av-crown-glint,.av-crown-spark) { opacity:0; }
    body.reduce-motion .av-crown-aura { opacity:.12; }
    .av-still .avatar-svg *, body.app-hidden .avatar-svg * { animation-play-state:paused !important; }
    /* A menu page covers the table and the home screen: nothing under it needs to move (coverWatch, v492). */
    body.cover-open #gameTable *, body.cover-open #gameTable *::before, body.cover-open #gameTable *::after,
    body.cover-open #lobbyScreen *, body.cover-open #lobbyScreen *::before, body.cover-open #lobbyScreen *::after { animation-play-state:paused !important; }
    body.reduce-motion .avatar-svg * { animation:none !important; }
    /* Opponent seat: [picture + name] / cards / [bot · status · timer].
       The head and status rows take their width from the card row
       (width:0 + min-width:100%), so a long name truncates instead of
       widening the seat, and statuses no longer squeeze the name. */
    .opp-head, .opp-status-row { width:0; min-width:100%; display:flex; align-items:center; justify-content:center; gap:4px; }
    /* Seats are sized for the picture + a 12-character name (set per
       opponent count in render), with padding so card-frame glows are
       never clipped by the seat edge. */
    .opp-seat { min-width:var(--opp-seat-w, 112px); padding:6px 8px 5px !important; row-gap:8px !important; }
    /* Keep the three-card row inside the seat's padded content box. The row
       used to size itself wider than that box at narrow phone widths, leaving
       cosmetic frame glows flush with / outside the seat edge. */
    .opp-seat .opp-slot-row { max-width:100%; justify-content:center; box-sizing:border-box; }
    /* Face-up cards sit tilted and nudged up; keep them clear of the picture. */
    .opp-seat .opp-head { margin-bottom:3px; }
    .opp-seat .opp-name { font-size:var(--opp-name-size, 9px); letter-spacing:.03em; }
    .opp-head { cursor:pointer; border-radius:8px; }
    .opp-head:focus-visible { outline:2px solid #f59e0b; outline-offset:2px; }
    .opp-status-row { gap:3px; min-height:15px; }
    .opp-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .avatar-tile.opp-avatar-turn { border-radius:26%; box-shadow:0 0 0 2px #fbbf24, 0 0 10px rgba(251,191,36,.65); }
    .profile-avatar-btn { display:flex; flex-direction:column; align-items:center; gap:3px; flex:none; border-radius:12px; padding:2px; }
    .profile-avatar-btn .avatar-tile { transition:transform .15s; }
    .profile-avatar-btn:hover .avatar-tile { transform:scale(1.05); }
    .profile-avatar-hint { font-size:7.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#fbbf24; white-space:nowrap; }
    .inbox-clear-all { flex-shrink:0; width:100%; margin-bottom:8px; padding:7px 0; border-radius:10px; border:1px solid #f59e0b; color:#fcd34d; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(69,26,3,.35); }
    .inbox-clear-all:hover { background:#f59e0b; color:#020617; }
    .inbox-clear-all:disabled { opacity:.5; cursor:default; }
    /* Compact Name Change Token row (was a large card). */
    .name-token-card { border:1px solid #334155; background:rgba(15,23,42,.7); border-radius:12px; padding:8px 10px; }
    .name-token-row { display:flex; align-items:center; gap:8px; }
    .name-token-icon { width:26px; height:26px; flex:none; border-radius:8px; background:#172033; border:1px solid #334155; display:flex; align-items:center; justify-content:center; color:#fbbf24; font-size:13px; }
    .name-token-title { display:block; font-size:11px; font-weight:900; color:#fff; line-height:1.2; }
    .name-token-sub { display:block; font-size:8.5px; color:#94a3b8; line-height:1.3; }
    .name-token-buy { flex:none; min-width:62px; padding:5px 8px; border-radius:8px; border:1px solid #f59e0b; color:#fbbf24; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .name-token-buy:not(:disabled):hover { background:#f59e0b; color:#020617; }
    .name-token-use { display:flex; gap:6px; margin-top:8px; }
    .name-token-use-btn { flex:none; padding:0 12px; border-radius:8px; border:1px solid #10b981; color:#34d399; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .name-token-status { font-size:8.5px; color:#94a3b8; text-align:center; margin-top:4px; }
    .name-token-status:empty { display:none; }
    /* Section tabs shared by the Shop and Custom pages. Horizontally
       scrollable, so new sections can be added without redesigning. */
    .cosmetic-tab-bar { position:relative; display:flex; gap:5px; overflow-x:auto; padding:2px 0 8px; background:#020617; scrollbar-width:none; }
    .cosmetic-tab-bar::-webkit-scrollbar { display:none; }
    .cosmetic-tab { flex:none; display:flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px; border:1px solid #334155; color:#94a3b8; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; background:rgba(15,23,42,.8); white-space:nowrap; }
    .cosmetic-tab[aria-selected="true"] { border-color:#f59e0b; color:#fcd34d; background:rgba(69,26,3,.45); }
    .cosmetic-tab small { font-size:8px; color:#64748b; font-weight:900; }
    .cosmetic-tab[aria-selected="true"] small { color:#fbbf24; }
    /* Item previews (Shop rows, Custom tiles, Collection, gifts) share two
       sizes so every item of a type looks the same: card-shaped things
       (card backs, frames, decks) are 32x44 mini cards, everything else a
       40x40 tile. One source: cosmeticPreview. A dev test checks every item. */
    .cos-mini-card { display:inline-flex; box-sizing:border-box; flex-shrink:0; align-items:center; justify-content:center; width:32px; height:44px; border-radius:6px; }
    .cos-mini-card > svg { width:18px; height:18px; }
    .shop-row-thumb { flex-shrink:0; width:44px; height:46px; display:flex; align-items:center; justify-content:center; }
    .effect-mini-tile { display:inline-flex; box-sizing:border-box; flex-shrink:0; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:2px solid #475569; background:#0f172a; color:#cbd5e1; font-size:21px; line-height:1; }
    .effect-mini-tile.is-emotes { display:inline-grid; grid-template-columns:1fr 1fr; place-items:center; font-size:14px; padding:1px; }
    .frame-mini-card { position:relative; display:inline-flex; box-sizing:border-box; flex-shrink:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:3px 4px; width:32px; height:44px; border-radius:6px; border:2px solid #475569; background:#0f172a; color:#f8fafc; font-weight:900; font-size:11px; line-height:1.05; }
    .cosmetic-tile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .cosmetic-tile { min-height:104px; }
    .cosmetic-tile .avatar-option-art { min-height:48px; display:flex; align-items:center; justify-content:center; }
    .profile-name-row { display:flex; align-items:center; gap:6px; min-width:0; min-height:24px; }
    /* Username, rank pill + W-L, and streak share one left edge; the picture
       spans exactly that block (top-aligned; its "Tap to change" sits below). */
    #profileHeaderCard > .min-w-0 { display:flex; flex-direction:column; gap:5px; padding-top:1px; }
    .profile-rating-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 !important; }
    .profile-rating-row > * { margin:0 !important; }
    .profile-wl { white-space:nowrap; }
    #profileStreakText { margin-top:0; }
    /* The Account buttons (Sign out / Change / Owned / Shop) are one size. */
    #profileAccountActionBtn, #profileChangePasswordBtn, #profileChangeUsernameBtn {
      width:84px; height:30px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;
      font-size:10px !important; font-weight:900; letter-spacing:.06em; border-radius:9px !important; flex:none; }
    .profile-edit-name { flex:none; width:22px; height:22px; border-radius:7px; border:1px solid #f59e0b; color:#fbbf24; font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; }
    .profile-edit-name:hover { background:#f59e0b; color:#020617; }
    .profile-name-editor { display:flex; gap:5px; align-items:center; }
    .profile-name-editor input { min-width:0; flex:1; background:#020617; border:2px solid #334155; border-radius:8px; padding:4px 7px; font-size:12px; font-weight:800; color:#fff; outline:none; }
    .profile-name-editor input:focus { border-color:#f59e0b; }
    .profile-name-save { flex:none; padding:5px 9px; border-radius:8px; border:1px solid #10b981; color:#34d399; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
    .profile-name-cancel { flex:none; padding:4px 6px; color:#94a3b8; font-weight:900; }
    .profile-name-status { display:block; font-size:8.5px; margin-top:3px; color:#fb7185; }
    .profile-name-status.is-ok { color:#34d399; }
    .profile-owned-pill { cursor:default; border-color:#10b981 !important; color:#34d399 !important; }
    .profile-owned-pill:hover { background:transparent !important; }
    .menu-sign-out span:last-child { color:#fda4af; }
    .confirm-scrim { position:fixed; inset:0; z-index:120; background:rgba(2,6,23,.75); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; }
    .confirm-scrim.hidden { display:none; }
    .confirm-card { width:min(290px,100%); background:#020617; border:2px solid #f59e0b; border-radius:16px; padding:16px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.6); }
    .confirm-title { font-size:15px; font-weight:900; color:#fff; letter-spacing:.02em; }
    .confirm-text { font-size:10px; color:#94a3b8; margin-top:6px; line-height:1.4; }
    .confirm-row { display:flex; gap:8px; margin-top:14px; }
    .confirm-btn { flex:1; padding:9px 0; border-radius:10px; border:1px solid #475569; color:#e2e8f0; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
    .confirm-btn:hover { border-color:#94a3b8; }
    .confirm-btn.is-danger { border-color:#e11d48; color:#fda4af; background:rgba(76,5,25,.5); }
    .confirm-btn.is-danger:hover { background:#e11d48; color:#fff; }
    /* In-game player card (matches the approved mockup). */
    .pp-scrim { position:fixed; inset:0; z-index:96; background:rgba(2,6,23,.62); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
    .pp-card { position:absolute; left:50%; width:min(300px, calc(100vw - 32px)); transform:translateX(-50%); background:#020617; border:2px solid #f59e0b; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.6); padding:16px; color:#e2e8f0; }
    .pp-card::before { content:''; position:absolute; top:-9px; left:var(--pp-arrow, 50%); width:16px; height:16px; background:#020617; border-left:2px solid #f59e0b; border-top:2px solid #f59e0b; transform:translateX(-50%) rotate(45deg); }
    .pp-x { position:absolute; top:10px; right:12px; color:#94a3b8; font-weight:900; font-size:16px; line-height:1; padding:4px; }
    .pp-x:hover { color:#fff; }
    .pp-head { display:flex; align-items:center; gap:12px; padding-right:22px; }
    .pp-name { font-size:17px; font-weight:900; color:#fff; letter-spacing:.02em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pp-badge { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:2px 8px; border-radius:8px; border:1px solid; font-size:11px; font-weight:900; width:fit-content; }
    .pp-sub { font-size:10px; color:#94a3b8; margin-top:4px; font-weight:700; }
    .pp-sub.is-online { color:#34d399; }
    .pp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px; }
    .pp-stat { background:rgba(15,23,42,.8); border:1px solid #1e293b; border-radius:10px; padding:8px 4px; text-align:center; }
    .pp-stat b { display:block; font-size:15px; font-weight:900; color:#fff; }
    .pp-stat span { display:block; font-size:8px; font-weight:900; letter-spacing:.08em; color:#64748b; text-transform:uppercase; margin-top:2px; }
    .pp-row { display:flex; gap:6px; margin-top:12px; }
    .pp-btn { flex:1; text-align:center; padding:8px 0; border-radius:10px; font-size:10px; font-weight:900; letter-spacing:.06em; border:1px solid #334155; color:#cbd5e1; background:transparent; }
    .pp-btn.primary { border-color:#10b981; color:#34d399; }
    .pp-btn.primary:hover { background:#10b981; color:#022c22; }
    .friend-status-watch { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-align:left; }
    .friend-status-watch:hover u, .friend-status-watch:focus-visible u { color:#fde68a; }
    .pp-btn.pp-pending, .pp-btn.pp-pending:hover { border-color:#f59e0b; color:#fbbf24; background:rgba(245,158,11,.08); cursor:default; }
    .pp-btn:disabled { cursor:default; }
    .pp-btn.report { flex:0 0 auto; padding:8px 10px; border-color:#9f1239; color:#fda4af; }
    .pp-report { margin-top:10px; padding:10px; border:1px solid #9f1239; border-radius:12px; background:rgba(76,5,25,.35); }
    .pp-report-title { font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#fda4af; margin-bottom:6px; }
    .pp-report-reasons { display:flex; flex-wrap:wrap; gap:5px; }
    .pp-report-reasons button { padding:5px 8px; border-radius:999px; border:1px solid #475569; color:#cbd5e1; font-size:9px; font-weight:800; }
    .pp-report-reasons button.is-on { border-color:#f43f5e; background:#9f1239; color:#fff; }
    .pp-report textarea { width:100%; margin-top:7px; min-height:44px; resize:none; border-radius:8px; border:1px solid #334155; background:#020617; color:#e2e8f0; font-size:10px; padding:6px; }
    .pp-report-send { width:100%; margin-top:7px; padding:7px 0; border-radius:9px; background:#e11d48; color:#fff; font-size:10px; font-weight:900; letter-spacing:.08em; }
    .pp-report-send:disabled { opacity:.45; }
    .reports-tabs { display:flex; gap:6px; margin-bottom:8px; flex-shrink:0; }
    .reports-tabs button { flex:1; padding:6px 0; border-radius:9px; border:1px solid #334155; color:#94a3b8; font-size:10px; font-weight:900; letter-spacing:.06em; }
    .reports-tabs button.is-on { border-color:#f43f5e; color:#fda4af; background:rgba(76,5,25,.45); }
    .pp-friends { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 0; border-radius:10px; font-size:10px; font-weight:900; letter-spacing:.06em; color:#34d399; background:rgba(6,78,59,.35); border:1px solid #065f46; }
    .daily-scrim { position:fixed; inset:0; z-index:97; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(2,6,23,.8); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
    .daily-scrim.hidden { display:none; }
    .daily-card { width:min(340px,100%); text-align:center; background:radial-gradient(circle at 50% 0,rgba(245,158,11,.22),transparent 60%),#020617; border:2px solid #f59e0b; border-radius:20px; padding:18px 14px 14px; box-shadow:0 20px 60px rgba(0,0,0,.7); color:#e2e8f0; animation:daily-pop .35s cubic-bezier(.2,1.4,.4,1) both; }
    @keyframes daily-pop { from { transform:scale(.8); opacity:0; } to { transform:scale(1); opacity:1; } }
    .daily-flame { font-size:38px; line-height:1; filter:drop-shadow(0 0 10px rgba(249,115,22,.7)); }
    .daily-title { margin-top:6px; font-size:18px; font-weight:900; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
    .daily-amount { margin-top:2px; font-size:24px; font-weight:900; color:#67e8f9; text-shadow:0 0 12px rgba(34,211,238,.55); }
    .daily-track { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:12px; }
    .daily-day { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 0 4px; border-radius:9px; border:1px solid #1e293b; background:rgba(15,23,42,.8); font-size:7px; font-weight:900; color:#64748b; letter-spacing:.04em; }
    .daily-day b { font-size:9px; color:#94a3b8; }
    .daily-day i { font-style:normal; font-size:12px; line-height:1; }
    .daily-day.is-done { border-color:#065f46; background:rgba(6,78,59,.35); color:#34d399; }
    .daily-day.is-done b { color:#6ee7b7; }
    .daily-day.is-today { border-color:#f59e0b; background:rgba(120,53,15,.5); color:#fcd34d; box-shadow:0 0 12px rgba(245,158,11,.45); }
    .daily-day.is-today b { color:#fde68a; }
    .daily-day.is-big:not(.is-done):not(.is-today) { border-color:#7c3aed; color:#c4b5fd; }
    .daily-sub { margin-top:10px; font-size:11px; color:#cbd5e1; font-weight:700; }
    .daily-btn { margin-top:12px; width:100%; padding:10px 0; border-radius:12px; background:#f59e0b; color:#020617; font-size:12px; font-weight:900; letter-spacing:.1em; }
    .daily-btn:hover { background:#fbbf24; }
    .daily-note { margin-top:8px; font-size:9px; color:#64748b; line-height:1.4; }
    .profile-streak { display:block; margin-top:2px; font-size:10px; font-weight:900; color:#fb923c; }
    .profile-streak.hidden { display:none; }
    /* Match summary */
    .ms-scrim { position:fixed; inset:0; top:var(--header-h); z-index:79; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(2,6,23,.72); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
    .ms-scrim.hidden { display:none; }
    .ms-card { position:relative; width:min(380px,100%); max-height:calc(100dvh - var(--header-h) - 28px - env(safe-area-inset-bottom, 0px)); overflow-y:auto; background:radial-gradient(circle at 50% 0,var(--ms-glow,rgba(245,158,11,.2)),transparent 55%),#020617; border:2px solid var(--ms-edge,#f59e0b); border-radius:20px; padding:16px 14px 12px; color:#e2e8f0; box-shadow:0 20px 60px rgba(0,0,0,.7); animation:daily-pop .35s cubic-bezier(.2,1.4,.4,1) both; }
    .ms-x { position:absolute; top:8px; right:10px; color:#94a3b8; font-size:20px; line-height:1; padding:4px; }
    .ms-head { text-align:center; }
    .ms-emoji { font-size:40px; line-height:1; }
    .ms-title { margin-top:4px; font-size:19px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
    .ms-mode { font-size:10px; font-weight:800; color:#94a3b8; letter-spacing:.08em; text-transform:uppercase; }
    .ms-streak { margin:6px auto 0; width:fit-content; font-size:11px; font-weight:800; color:#fbbf24; }
    .ms-rating { display:flex; align-items:center; justify-content:center; gap:8px; margin:10px auto 0; padding:6px 12px; width:fit-content; border-radius:999px; border:1px solid #334155; background:rgba(15,23,42,.8); font-size:12px; font-weight:900; color:#fff; }
    .ms-rating .up { color:#34d399; } .ms-rating .down { color:#fb7185; }
    .ms-section { margin-top:12px; }
    .ms-label { font-size:9px; font-weight:900; letter-spacing:.14em; color:#64748b; text-transform:uppercase; margin-bottom:5px; }
    .ms-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
    .ms-stat { padding:7px 4px; border-radius:10px; border:1px solid #1e293b; background:rgba(15,23,42,.8); text-align:center; }
    .ms-stat b { display:block; font-size:16px; font-weight:900; color:#fff; line-height:1.1; }
    .ms-stat span { display:block; font-size:8px; font-weight:800; color:#94a3b8; letter-spacing:.06em; text-transform:uppercase; }
    .ms-rewards { border-radius:12px; border:1px solid #155e75; background:rgba(8,51,68,.35); padding:6px 10px; }
    .ms-reward { display:flex; justify-content:space-between; gap:8px; padding:3px 0; font-size:11px; font-weight:700; color:#e2e8f0; }
    .ms-reward b { color:#67e8f9; font-weight:900; white-space:nowrap; }
    .ms-reward.total { margin-top:3px; padding-top:6px; border-top:1px solid #155e75; font-weight:900; color:#fff; }
    .ms-none { font-size:10px; color:#64748b; text-align:center; padding:4px 0; }
    .ms-signin { display:block; margin:4px auto 0; padding:6px 22px; border-radius:10px; background:#f59e0b; color:#0f172a; font-size:11px; font-weight:900; letter-spacing:.04em; }
    .ms-progress { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; border:1px solid #1e293b; background:rgba(15,23,42,.7); font-size:10px; font-weight:700; color:#cbd5e1; margin-top:4px; }
    .ms-bar { flex:1; height:6px; border-radius:999px; background:#1e293b; overflow:hidden; min-width:50px; }
    .ms-bar i { display:block; height:100%; border-radius:inherit; background:var(--bar,#f59e0b); }
    .ms-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; }
    /* Share: the platform's own share icon, top-left of the card (the ✕ is top-right). */
    .ms-share-icon { position:absolute; top:8px; left:10px; width:34px; height:34px; padding:6px; border-radius:10px; color:#94a3b8; display:flex; align-items:center; justify-content:center; transition:color .15s var(--ease-soft), background-color .15s var(--ease-soft), transform .12s var(--ease-snappy); }
    .ms-share-icon:hover { color:#e2e8f0; background:rgba(148,163,184,.12); }
    .ms-share-icon:active { transform:scale(.9); }
    .ms-share-icon svg { width:22px; height:22px; display:block; }
    .ms-share-icon.is-busy { opacity:.5; pointer-events:none; }
    .ms-primary { grid-column:1 / -1; padding:11px 0; border-radius:12px; background:#10b981; color:#022c22; font-size:13px; font-weight:900; letter-spacing:.08em; }
    .ms-primary[disabled] { background:#1e293b; color:#64748b; }
    .ms-secondary { padding:8px 0; border-radius:12px; border:1px solid #475569; color:#cbd5e1; font-size:10px; font-weight:900; letter-spacing:.06em; }
    /* Gifting */
    .cosmetic-gift-btn { min-width:66px; padding:4px 8px; border-radius:8px; border:1px solid #db2777; color:#f9a8d4; font-size:8px; font-weight:900; background:transparent; }
    .cosmetic-gift-btn:hover, .cosmetic-gift-btn.is-target { background:#db2777; color:#fff; }
    .gift-banner { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 10px; border-radius:12px; border:1px solid #db2777; background:linear-gradient(135deg,rgba(131,24,67,.55),rgba(15,23,42,.85)); color:#fbcfe8; font-size:10px; font-weight:800; }
    .gift-banner.hidden { display:none; }
    .gift-banner b { color:#fff; }
    .gift-banner button { margin-left:auto; flex:none; padding:4px 8px; border-radius:8px; border:1px solid #f9a8d4; color:#f9a8d4; font-size:9px; font-weight:900; }
    .gift-card.install-card { border-color:#10b981; text-align:center; }
    .install-icon { display:block; width:64px; height:64px; border-radius:16px; margin:2px auto 8px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
    .install-title { font-size:15px; font-weight:900; color:#fff; }
    .install-body { font-size:12px; line-height:1.5; color:#cbd5e1; margin:8px 0 12px; text-align:left; }
    .install-body ol { margin:6px 0 0 18px; list-style:decimal; }
    .install-body b { color:#fff; }
    .install-close { width:100%; padding:10px; border-radius:12px; background:#059669; color:#fff; font-weight:900; font-size:12px; letter-spacing:.06em; }
    .gift-scrim { position:fixed; inset:0; z-index:98; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(2,6,23,.82); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
    .gift-scrim.hidden { display:none; }
    .gift-card { width:min(360px,100%); max-height:86vh; overflow-y:auto; background:#020617; border:2px solid #db2777; border-radius:18px; padding:14px; color:#e2e8f0; box-shadow:0 20px 60px rgba(0,0,0,.7); }
    .gift-head { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:900; color:#fbcfe8; letter-spacing:.04em; }
    .gift-x { color:#94a3b8; font-size:20px; line-height:1; padding:2px 6px; }
    .gift-item { display:flex; align-items:center; gap:10px; margin:10px 0 6px; padding:8px 10px; border-radius:12px; border:1px solid #334155; background:rgba(15,23,42,.8); }
    .gift-item-name { font-size:12px; font-weight:900; color:#fff; line-height:1.2; }
    .gift-item-sub { font-size:9px; color:#94a3b8; font-weight:700; }
    .gift-hint { font-size:9px; color:#94a3b8; line-height:1.4; margin:0 0 8px; }
    .gift-friends { display:flex; flex-direction:column; gap:5px; }
    .gift-friend { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:12px; border:1px solid #1e293b; background:rgba(15,23,42,.65); }
    .gift-friend-name { flex:1; min-width:0; font-size:11px; font-weight:800; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gift-send-btn { flex:none; padding:6px 10px; border-radius:10px; background:#db2777; color:#fff; font-size:10px; font-weight:900; }
    .gift-send-btn[disabled] { opacity:.5; }
    .gift-status { min-height:14px; margin-top:8px; text-align:center; font-size:10px; font-weight:800; color:#f9a8d4; }
    .gift-open-card { text-align:center; animation:daily-pop .35s cubic-bezier(.2,1.4,.4,1) both; }
    .gift-open-box { font-size:48px; line-height:1; animation:gift-wiggle 1s ease-in-out 2; }
    @keyframes gift-wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-10deg) scale(1.08); } 75% { transform:rotate(10deg) scale(1.08); } }
    .gift-open-title { margin-top:6px; font-size:18px; font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
    .gift-open-from { font-size:11px; color:#f9a8d4; font-weight:800; }
    .gift-open-actions { display:flex; gap:6px; margin-top:10px; }
    .gift-open-equip { flex:1; padding:9px 0; border-radius:12px; background:#f59e0b; color:#020617; font-size:11px; font-weight:900; }
    .gift-open-later { flex:1; padding:9px 0; border-radius:12px; border:1px solid #475569; color:#cbd5e1; font-size:11px; font-weight:900; }
    .inbox-gift { background:linear-gradient(135deg,rgba(131,24,67,.45),rgba(15,23,42,.85)); border-color:#db2777; }
    .inbox-gift-accent { color:#f9a8d4; }
    .inbox-gift-claim-btn { background:#db2777; color:#fff; }
    .friend-gift-btn { border-color:#db2777 !important; color:#f9a8d4 !important; }
    /* Seasonal events */
    .inbox-season { background:linear-gradient(135deg,var(--season-dark),rgba(15,23,42,.85)); border-color:var(--season-accent); }
    .inbox-season-accent { color:var(--season-light); }
    .inbox-season-emoji { font-size:28px; line-height:1; }
    .inbox-season-shop-btn { background:var(--season-accent); color:#020617; }
    .season-tab.is-live { border-color:#f472b6; color:#fbcfe8; background:linear-gradient(135deg,rgba(131,24,67,.55),rgba(76,29,149,.45)); }
    .season-tab.is-live[aria-selected="true"] { border-color:#f59e0b; color:#fde68a; }
    .season-section { margin-bottom:14px; }
    .season-head { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--season-accent); background:linear-gradient(135deg,var(--season-dark),#020617 85%); box-shadow:inset 0 0 22px color-mix(in srgb,var(--season-accent) 25%,transparent); }
    .season-emoji { font-size:26px; line-height:1; filter:drop-shadow(0 0 8px var(--season-accent)); }
    .season-title { flex:1; min-width:0; line-height:1.15; }
    .season-title b { display:block; font-size:13px; font-weight:900; color:#fff; letter-spacing:.03em; }
    .season-title small { display:block; font-size:9px; font-weight:800; color:var(--season-light); letter-spacing:.12em; text-transform:uppercase; }
    .season-when { flex:none; padding:3px 8px; border-radius:999px; border:1px solid #475569; font-size:9px; font-weight:900; color:#cbd5e1; background:rgba(2,6,23,.6); }
    .season-when.is-live { border-color:var(--season-accent); color:#fff; }
    button.season-head { width:100%; text-align:left; cursor:pointer; }
    .season-chev { flex:none; width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--season-light); border:1px solid rgba(148,163,184,.35); transition:transform .18s; }
    .season-head[aria-expanded="false"] .season-chev { transform:rotate(-90deg); }
    .season-section.is-collapsed { margin-bottom:6px; }
    .season-section.is-collapsed .season-head { padding:8px 12px; box-shadow:none; }
    .season-section.is-collapsed .season-emoji { font-size:20px; }
    .season-earn { display:flex; align-items:center; gap:8px; margin:6px 0; padding:6px 10px; border-radius:12px; border:1px dashed #334155; font-size:10px; color:#cbd5e1; line-height:1.3; }
    .season-earn b { color:#fff; }
    .season-progress { display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; background:var(--season-accent); color:#020617; font-weight:900; }
    .season-bundle { display:flex; align-items:center; gap:8px; margin:6px 0; padding:8px 10px; border-radius:12px; border:1px solid #f59e0b; background:linear-gradient(135deg,rgba(120,53,15,.45),rgba(15,23,42,.8)); }
    .season-bundle-icon { font-size:22px; line-height:1; }
    .season-bundle-text { flex:1; min-width:0; line-height:1.2; }
    .season-bundle-text b { display:block; font-size:11px; font-weight:900; color:#fde68a; }
    .season-bundle-text small { display:block; font-size:9px; color:#cbd5e1; }
    .season-bundle-btn { flex:none; padding:6px 9px; border-radius:10px; border:1px solid #f59e0b; background:#f59e0b; color:#020617; font-size:10px; font-weight:900; }
    .season-bundle-btn s { opacity:.55; font-weight:700; margin-right:3px; }
    .season-bundle-btn.is-short { background:transparent; color:#64748b; border-color:#334155; }
    .season-note { margin:0 0 10px; padding:10px; border-radius:12px; border:1px dashed #334155; text-align:center; font-size:10px; color:#94a3b8; line-height:1.4; }
    .season-next-label { margin:4px 2px 6px; font-size:9px; font-weight:900; letter-spacing:.14em; color:#64748b; text-transform:uppercase; }
    .season-promo { display:block; width:100%; margin-bottom:8px; padding:8px 10px; border-radius:12px; border:1px solid #f472b6; background:linear-gradient(135deg,rgba(131,24,67,.4),rgba(76,29,149,.35)); color:#fbcfe8; font-size:10px; font-weight:900; text-align:left; }
    .season-badge { position:absolute; left:-5px; top:-5px; width:18px; height:18px; border-radius:999px; background:#0f172a; border:1px solid #475569; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; }
    /* Bat Swarm victory: real flapping bats. Each wing hinges at the
       shoulder: a quick power stroke down (0-40%), a slower recovery up,
       foreshortening at the top of the beat; the body lifts on each
       downstroke. --flap sets the beat per bat (see svfxHalloween). */
    .rbat { position:relative; width:100%; height:100%; animation:rbat-bob var(--flap,.26s) cubic-bezier(.45,0,.55,1) infinite; animation-delay:var(--flap-delay,0s); filter:drop-shadow(0 0 2px rgba(253,186,116,.9)) drop-shadow(0 0 9px rgba(249,115,22,.55)); }
    .rbat-wing { position:absolute; top:14%; width:47%; height:72%; }
    .rbat-wing svg, .rbat-body svg { display:block; width:100%; height:100%; overflow:visible; }
    .rbat-wing.l { right:50%; transform-origin:100% 30%; animation:rbat-flap-l var(--flap,.26s) infinite; animation-delay:var(--flap-delay,0s); }
    .rbat-wing.r { left:50%; transform-origin:0% 30%; animation:rbat-flap-r var(--flap,.26s) infinite; animation-delay:var(--flap-delay,0s); }
    .rbat-wing.r svg { transform:scaleX(-1); }
    .rbat-body { position:absolute; left:50%; top:0; width:19%; height:100%; transform:translateX(-50%); }
    @keyframes rbat-flap-l {
      0%   { transform:rotate(38deg) scaleX(.72) scaleY(1.04); animation-timing-function:cubic-bezier(.55,0,.9,.45); }
      40%  { transform:rotate(-24deg) scaleX(1) scaleY(.88); animation-timing-function:cubic-bezier(.3,.1,.4,1); }
      70%  { transform:rotate(10deg) scaleX(.95) scaleY(.8); }
      100% { transform:rotate(38deg) scaleX(.72) scaleY(1.04); }
    }
    @keyframes rbat-flap-r {
      0%   { transform:rotate(-38deg) scaleX(.72) scaleY(1.04); animation-timing-function:cubic-bezier(.55,0,.9,.45); }
      40%  { transform:rotate(24deg) scaleX(1) scaleY(.88); animation-timing-function:cubic-bezier(.3,.1,.4,1); }
      70%  { transform:rotate(-10deg) scaleX(.95) scaleY(.8); }
      100% { transform:rotate(-38deg) scaleX(.72) scaleY(1.04); }
    }
    @keyframes rbat-bob { 0%,100% { transform:translateY(8%); } 40% { transform:translateY(-10%); } }
    .svfx-count { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:'Arial Black',Arial,sans-serif; font-weight:900; color:#fde68a; text-shadow:0 0 18px rgba(251,191,36,.9),0 4px 0 #92400e; white-space:nowrap; }
    .svfx-hny { color:#fff7d6; letter-spacing:.04em; }
    .pp-showcase { margin-top:12px; }
    .pp-showcase .mini-table { height:82px; }
    .pp-showcase .mini-table-card { top:42%; }
    .profile-showcase .pp-showcase { margin-top:8px; background:rgba(15,23,42,.6); border:1px solid #1e293b; border-radius:12px; padding:10px; }
    .pp-section { font-size:9px; font-weight:900; letter-spacing:.14em; color:#64748b; text-transform:uppercase; margin-bottom:5px; }
    .pp-show-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:6px; }
    .pp-show { display:flex; align-items:center; gap:6px; min-width:0; padding:5px 6px; border-radius:9px; background:rgba(15,23,42,.8); border:1px solid #1e293b; }
    /* Your own Profile showcase: each item opens Custom on it (v245). */
    .pp-show.pp-show-link { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s var(--ease-soft), background .15s var(--ease-soft); }
    .pp-show.pp-show-link:hover, .pp-show.pp-show-link:focus-visible { border-color:rgba(251,191,36,.6); background:rgba(30,41,59,.9); outline:none; }
    .pp-show-table-link { display:block; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; border-radius:12px; }
    .pp-show-table-link:focus-visible { outline:2px solid rgba(251,191,36,.7); outline-offset:2px; }
    #themesModal .custom-focus { outline:2px solid #fbbf24; outline-offset:2px; box-shadow:0 0 18px rgba(251,191,36,.55); animation:customFocusPulse 1.6s var(--ease-soft); }
    @keyframes customFocusPulse { 0%, 60% { box-shadow:0 0 22px rgba(251,191,36,.75); } 100% { box-shadow:0 0 0 rgba(251,191,36,0); } }
    body.reduce-motion #themesModal .custom-focus { animation:none; }
    .pp-show-icon { flex:none; width:20px; text-align:center; font-size:14px; line-height:1; }
    .pp-show-text { min-width:0; line-height:1.15; }
    .pp-show-text small { display:block; font-size:7px; font-weight:900; letter-spacing:.1em; color:#64748b; text-transform:uppercase; }
    .pp-show-text b { display:block; font-size:10px; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pp-show.is-default b { color:#64748b; font-weight:700; }
    .pp-note { margin-top:14px; border:1px dashed #334155; border-radius:12px; padding:12px; text-align:center; font-size:11px; color:#94a3b8; line-height:1.4; }
    .pp-note b { color:#fcd34d; }
    .avatar-picker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .custom-group-head { grid-column:1 / -1; margin-top:4px; }
    .avatar-picker-label { grid-column:1 / -1; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin-top:4px; }
    .avatar-option { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 7px; border-radius:12px; border:1px solid #334155; background:rgba(15,23,42,.6); text-align:center; transition:border-color .15s, background .15s; }
    .avatar-option:not(:disabled):hover { border-color:#f59e0b; }
    .avatar-option[aria-pressed="true"] { border-color:#10b981; background:rgba(6,78,59,.28); }
    .avatar-option:disabled { cursor:default; }
    /* Locked items stay tappable (they jump to the Shop) but look dimmed. */
    .avatar-option[data-locked] { border-style:dashed; }
    .avatar-option[data-locked] .avatar-option-art > :not(.avatar-option-lock) { filter:saturate(.5) brightness(.65); }
    .shop-row-focus { animation:shop-row-focus 1.6s ease-out 1; }
    @keyframes shop-row-focus { 0%,40% { box-shadow:0 0 0 2px #f59e0b,0 0 18px rgba(245,158,11,.55); } 100% { box-shadow:0 0 0 0 transparent; } }
    .avatar-option-art { position:relative; line-height:0; }
    .avatar-option-lock { position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:999px; background:#0f172a; border:1px solid #475569; display:flex; align-items:center; justify-content:center; font-size:9px; line-height:1; }
    .avatar-option-name { font-size:9px; font-weight:900; color:#fff; line-height:1.15; }
    .avatar-option-status { font-size:8px; font-weight:700; color:#94a3b8; line-height:1.2; }
    .avatar-option[aria-pressed="true"] .avatar-option-status { color:#34d399; }
    .avatar-option-status.is-locked { color:#64748b; }
    .avatar-demo { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; }
    .avatar-demo-list { display:flex; flex-direction:column; gap:8px; }
    .avatar-demo-chip { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:10px; border:1px solid #334155; background:rgba(15,23,42,.85); font-size:9px; font-weight:900; color:#e2e8f0; letter-spacing:.04em; white-space:nowrap; }
    .avatar-demo-chip small { font-size:8px; color:#94a3b8; font-weight:700; letter-spacing:0; }
    /* Vs Bots lobby: bot count + difficulty share rows so both button rows centre on each other. */
    .bot-setup-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: .75rem; align-items: center; }
    .bot-setup-grid > label { align-self: end; }
    /* Gauntlet: lobby button + ⓘ, hearts on the table, the run pop-up. */
    .gauntlet-row { display:flex; align-items:center; gap:.4rem; margin-top:.45rem; }
    /* With no unlock bar beside it (every difficulty open, or signed out),
       the Gauntlet row spans the grid and sits centred with a longer button. */
    .bot-setup-grid:has(#difficultyProgressWrap.hidden) .gauntlet-row { grid-column:1 / -1; justify-content:center; }
    .bot-setup-grid:has(#difficultyProgressWrap.hidden) .gauntlet-btn { flex:0 1 70%; }
    .gauntlet-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:.35rem; padding:.42rem .5rem; border-radius:.5rem;
      border:2px solid #b45309; background:linear-gradient(135deg,#431407,#7c2d12 55%,#431407); color:#fde68a; font-weight:900; font-size:.72rem;
      letter-spacing:.14em; box-shadow:0 0 10px rgba(245,158,11,.22), inset 0 1px 0 rgba(253,230,138,.25); cursor:pointer;
      transition:transform .12s var(--ease-snappy), border-color .15s, box-shadow .15s; }
    .gauntlet-btn:hover { border-color:#f59e0b; box-shadow:0 0 14px rgba(245,158,11,.4), inset 0 1px 0 rgba(253,230,138,.3); }
    .gauntlet-btn:active { transform:scale(.95); }
    .gauntlet-btn svg { width:15px; height:15px; flex:none; }
    .gauntlet-info { position:relative; flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid #64748b; background:#0f172a;
      color:#cbd5e1; font:italic 900 12px/19px Georgia,'Times New Roman',serif; text-align:center; cursor:help; user-select:none; }
    .gauntlet-info:hover, .gauntlet-info:focus-visible, .gauntlet-info.open { border-color:#f59e0b; color:#fde68a; outline:none; }
    .gauntlet-tip { position:absolute; bottom:calc(100% + 9px); right:-8px; left:auto; width:min(236px, 72vw); transform:translateY(4px); z-index:40;
      padding:.6rem .7rem; border-radius:.75rem; background:#0b1120; border:1px solid rgba(245,158,11,.6); box-shadow:0 10px 24px rgba(0,0,0,.6);
      color:#e2e8f0; font:600 11px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif; font-style:normal; text-align:left; letter-spacing:0;
      opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s var(--ease-soft), transform .15s var(--ease-soft), visibility 0s .15s; }
    .gauntlet-tip b { display:block; color:#fbbf24; font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.15rem; }
    .gauntlet-tip::after { content:''; position:absolute; top:100%; right:13px; left:auto; border:6px solid transparent; border-top-color:rgba(245,158,11,.6); }
    .gauntlet-info:hover .gauntlet-tip, .gauntlet-info:focus-visible .gauntlet-tip, .gauntlet-info.open .gauntlet-tip {
      opacity:1; visibility:visible; transform:none; transition:opacity .15s var(--ease-soft), transform .15s var(--ease-soft); }
    .gauntlet-hud { position:absolute; top:8px; left:6px; z-index:30; display:flex; flex-direction:column; align-items:center; gap:3px;
      padding:6px 4px 5px; border-radius:12px; background:rgba(2,6,23,.82); border:1px solid rgba(245,158,11,.55);
      box-shadow:0 4px 12px rgba(0,0,0,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:none; }
    .gauntlet-hud .gh-hearts, .gauntlet-card .gh-hearts { display:flex; gap:3px; }
    .gauntlet-hud .gh-hearts { flex-direction:column; }
    .gh-heart { width:18px; height:18px; display:block; }
    .gh-heart path { fill:#ef4444; stroke:#fecaca; stroke-width:1.4; transition:fill .3s var(--ease-soft); }
    .gh-heart.is-empty path { fill:transparent; stroke:#f87171; stroke-width:2; }
    .gh-heart.gh-lost { animation:gh-lose .7s var(--ease-bouncy); }
    @keyframes gh-lose { 0% { transform:scale(1); } 30% { transform:scale(1.45) rotate(-8deg); } 60% { transform:scale(.85) rotate(6deg); } 100% { transform:scale(1); } }
    .gh-round { display:flex; flex-direction:column; align-items:center; font:900 7px/1.15 system-ui,-apple-system,sans-serif; letter-spacing:.06em;
      color:#94a3b8; text-transform:uppercase; white-space:nowrap; }
    .gh-round b { font-size:10px; color:#fbbf24; letter-spacing:.02em; }
    .gauntlet-card { position:relative; width:100%; max-width:24rem; padding:1.4rem 1.2rem 1.1rem; border-radius:1.25rem; text-align:center;
      background:radial-gradient(ellipse at 50% 0%, rgba(180,83,9,.35), transparent 60%), #0f172a; border:1.5px solid rgba(245,158,11,.6);
      box-shadow:0 0 30px rgba(245,158,11,.18), 0 20px 50px rgba(0,0,0,.6); color:#e2e8f0; }
    .gauntlet-close { position:absolute; top:.55rem; right:.7rem; width:30px; height:30px; border-radius:50%; color:#94a3b8; font-weight:900; font-size:14px; }
    .gauntlet-close:hover { color:#fff; background:rgba(148,163,184,.15); }
    .gauntlet-emblem { font-size:2.4rem; line-height:1; margin-bottom:.35rem; }
    .gauntlet-title { font-size:1.05rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#fbbf24; }
    .gauntlet-text { margin:.5rem 0 0; font-size:.78rem; line-height:1.5; color:#cbd5e1; }
    .gauntlet-card .gh-hearts { justify-content:center; margin:.7rem 0 .2rem; gap:6px; }
    .gauntlet-card .gh-heart { width:30px; height:30px; }
    .gauntlet-track { display:flex; justify-content:center; gap:.3rem; margin:.75rem 0 .2rem; }
    .gauntlet-step { flex:1; max-width:4.1rem; padding:.3rem .1rem; border-radius:.55rem; border:1.5px solid #334155; background:#0b1120;
      font-size:.55rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
    .gauntlet-step b { display:block; font-size:.85rem; line-height:1.1; color:#94a3b8; }
    .gauntlet-step.is-done { border-color:#b45309; background:rgba(180,83,9,.2); color:#fbbf24; }
    .gauntlet-step.is-done b { color:#fde68a; }
    .gauntlet-step.is-now { border-color:#f59e0b; color:#fde68a; box-shadow:0 0 10px rgba(245,158,11,.45); }
    .gauntlet-step.is-now b { color:#fff; }
    .gauntlet-step.is-boss b { color:#f87171; }
    .gauntlet-reward { margin:.8rem 0 0; padding:.55rem .7rem; border-radius:.75rem; background:rgba(2,6,23,.6); border:1px solid #1e293b;
      font-size:.72rem; line-height:1.45; color:#cbd5e1; }
    .gauntlet-reward b { color:#fbbf24; }
    .gauntlet-items { display:flex; justify-content:center; gap:1rem; margin-top:.55rem; }
    .gauntlet-items figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.25rem; font-size:.6rem; font-weight:800; color:#fde68a; }
    .gauntlet-note { margin-top:.55rem; font-size:.62rem; color:#94a3b8; }
    .gauntlet-actions { display:flex; flex-direction:column; gap:.45rem; margin-top:1rem; }
    .twos-card .twos-label { margin-top:.9rem; font-size:.62rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#94a3b8; }
    .twos-diffs { display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; margin:.4rem 0 0; }
    .twos-diffs .diff-btn { padding:.45rem 0; font-size:.62rem; border-radius:.55rem; border-width:2px; }
    .twos-note { margin:.45rem 0 .8rem; font-size:.62rem; line-height:1.4; color:#94a3b8; }
    .twos-or { display:flex; align-items:center; gap:.6rem; margin:.7rem 0 .6rem; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#64748b; }
    .twos-or::before, .twos-or::after { content:''; flex:1; height:1px; background:#1e293b; }
    .twos-friends { width:100%; padding:.65rem; border-radius:.8rem; font-weight:800; font-size:.74rem; letter-spacing:.06em; color:#e2e8f0; border:1.5px solid #475569; background:#111c33; }
    .twos-friends:hover { border-color:#10b981; color:#fff; }
    .twos-friends:active { transform:scale(.97); }
    .gauntlet-go { width:100%; padding:.7rem; border-radius:.8rem; font-weight:900; font-size:.8rem; letter-spacing:.12em; color:#1c1917;
      background:linear-gradient(180deg,#fcd34d,#f59e0b); box-shadow:0 4px 14px rgba(245,158,11,.35); transition:transform .12s var(--ease-snappy); }
    .gauntlet-go:active { transform:scale(.96); }
    .gauntlet-go:disabled { background:#334155; color:#94a3b8; box-shadow:none; }
    .mode-intro-emblem svg { width:40px; height:40px; color:#fbbf24; }
    .mode-intro-list { list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
    .mode-intro-list li { display:flex; gap:.55rem; align-items:flex-start; font-size:.76rem; line-height:1.45; color:#e2e8f0; }
    .mode-intro-list li svg { flex:none; width:18px; height:18px; margin-top:1px; color:#fbbf24; }
    .mode-intro-tiers { display:flex; justify-content:center; gap:.35rem; margin-top:.6rem; }
    .mode-intro-tiers span { display:flex; flex-direction:column; align-items:center; gap:2px; }
    .mode-intro-tiers svg { width:26px; height:26px; }
    .mode-intro-tiers small { font-size:.52rem; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; }
    .mode-intro-line { font-size:10px; color:#94a3b8; text-align:center; line-height:1.4; }
    .mode-intro-link { background:none; border:0; padding:0; font:inherit; font-weight:800; color:#fbbf24; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
    .gauntlet-alt { width:100%; padding:.4rem; font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
    .gauntlet-alt:hover { color:#e2e8f0; }
    body.reduce-motion .gh-heart.gh-lost { animation:none; }
    .gauntlet-item-link { font:inherit; font-weight:800; color:#fbbf24; text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; padding:0; }
    .gauntlet-item-link[aria-expanded="true"] { color:#fde68a; text-decoration-style:solid; }
    .gauntlet-preview { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:.6rem; padding:.7rem .5rem .6rem;
      border-radius:.7rem; background:radial-gradient(ellipse at 50% 30%, rgba(245,158,11,.18), transparent 70%), #020617; border:1px solid rgba(245,158,11,.35); }
    .gauntlet-preview-name { font-weight:900; font-size:.8rem; color:#fde68a; letter-spacing:.04em; }
    .gauntlet-preview-note { font-size:.62rem; color:#94a3b8; }
    .gauntlet-frame-fan { display:flex; gap:.5rem; padding:.3rem 0 .2rem; }
    .gauntlet-frame-card { width:46px; height:66px; border-radius:7px; border:2px solid #f59e0b; background:linear-gradient(160deg,#1e293b,#0f172a);
      display:flex; flex-direction:column; align-items:flex-start; padding:4px 6px; font-weight:900; line-height:1; }
    .gauntlet-frame-card b { font-size:15px; }
    .gauntlet-frame-card i { font-style:normal; font-size:13px; margin-top:2px; }
    .gauntlet-frame-fan .gauntlet-frame-card:nth-child(1) { transform:rotate(-8deg) translateY(4px); }
    .gauntlet-frame-fan .gauntlet-frame-card:nth-child(3) { transform:rotate(8deg) translateY(4px); }
    /* v338: the card a transparent 3 sits on, tucked under the 3s. */
    #discardCardsWrapper .pile-peek { box-shadow: 0 0 0 1px rgba(251, 191, 36, .55), 0 3px 8px rgba(0,0,0,.5); }

/* v345: seasonal XP boost note (header XP tip, match summary, Level Ladder) */
.xp-boost { display:flex; align-items:center; gap:6px; margin:4px 0; font-size:11px; font-weight:800; color:#fcd34d; }
.xp-boost .ic { width:14px; height:14px; }

    /* § Event popup (v367) */
    .event-popup-body { display:flex; flex-direction:column; gap:8px; }
    .event-popup-sub { margin:0; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; }
    .event-popup-list, .event-popup-earn { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
    .event-popup-list li { display:grid; grid-template-columns:70px 1fr auto auto; gap:8px; align-items:center; font-size:12px; color:#e2e8f0; background:rgba(15,23,42,.6); border:1px solid rgba(100,116,139,.35); border-radius:8px; padding:6px 8px; }
    .event-popup-list li span { font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ev-accent,#fbbf24); }
    .event-popup-preview { font-size:10px; font-weight:900; padding:3px 8px; border-radius:8px; border:1px solid rgba(148,163,184,.5); background:transparent; color:#cbd5e1; cursor:pointer; }
    .event-popup-preview:hover { border-color:var(--ev-accent,#fbbf24); color:#fff; }
    .event-popup-list li em { font-style:normal; font-weight:900; font-size:11px; color:#fcd34d; white-space:nowrap; }
    .event-popup-earn li { font-size:12px; color:#e2e8f0; padding-left:14px; position:relative; }
    .event-popup-earn li::before { content:''; position:absolute; left:2px; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--ev-accent,#fbbf24); }

    /* § Home event chip (v369) */
    #homeEventChip { display:flex; align-items:center; gap:10px; width:100%; margin:10px 0 8px; padding:8px 12px; border-radius:14px; text-align:left; cursor:pointer;
      border:1px solid color-mix(in srgb, var(--ev-accent,#fbbf24) 60%, transparent); background:color-mix(in srgb, var(--ev-accent,#fbbf24) 12%, #0b1220); color:#e2e8f0; }
    #homeEventChip.hidden { display:none; }
    #homeEventChip .hec-emoji { font-size:22px; line-height:1; }
    #homeEventChip .hec-text { display:flex; flex-direction:column; min-width:0; flex:1; }
    #homeEventChip b { font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--ev-accent,#fbbf24); }
    #homeEventChip small { font-size:11px; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #homeEventChip .hec-go { font-size:20px; color:var(--ev-accent,#fbbf24); }
    #lobbyScreen.mode-page-open #homeEventChip { display:none !important; }

/* § Wishlist (v374) */
.wish-heart { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:none; border-radius:3px; border:0; background:transparent; color:#cbd5e1; padding:0; transition:color .15s, background .15s, border-color .15s, transform .2s var(--ease-bouncy, ease); }
.wish-heart::after { content:""; position:absolute; width:32px; height:32px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }
.wish-heart .ic { width:12px; height:12px; display:block; transform:translateY(-1px); }
.wish-heart:focus-visible { outline:2px solid #fb7185; outline-offset:3px; }
.wishlist-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; color:#cbd5e1; font-size:12px; line-height:1.5; }
.wishlist-status.hidden { display:none; }
.wishlist-status button { border:1px solid #fb7185; border-radius:8px; color:#fda4af; padding:6px 10px; min-height:32px; background:transparent; }
.wishlist-status button:focus-visible { outline:2px solid #fb7185; outline-offset:2px; }
.wishlist-empty { padding:18px 4px; font-size:12px; line-height:1.5; color:#cbd5e1; }
.wish-heart:hover { color:#fb7185; }
.wish-heart.is-on { color:#fb7185; }
.wish-heart.is-on .ic path { fill:currentColor; }
.wish-heart:active { transform:scale(1.15); }
.wish-list { display:grid; gap:5px; }
.wish-row { display:flex; align-items:center; gap:6px; padding:5px 6px; border:1px solid #1e293b; border-radius:10px; background:rgba(15,23,42,.6); }
.wish-open { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; background:none; border:0; padding:0; color:inherit; }
.wish-row > .wish-thumb, .wish-open > .wish-thumb { flex:none; }
.wish-text { display:flex; flex-direction:column; min-width:0; }
.wish-text b { font-size:11px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wish-text small { font-size:9px; color:#94a3b8; }
.wish-empty { font-size:10px; color:#94a3b8; margin:0; }
.wish-gift { flex:none; border:1px solid #f59e0b; color:#fbbf24; background:transparent; border-radius:8px; padding:3px 7px; font-size:9px; font-weight:900; }
.wish-gift:hover { background:#f59e0b; color:#0f172a; }
/* v389: every opponent seat has the same dark backing (the turn and partner tints sit on top), so names and cards read on any table background. */
.opp-seat { background-color: rgba(10,16,32,.74) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.opp-seat.animate-turn-pulse { background-image: linear-gradient(rgba(245,158,11,.12), rgba(245,158,11,.12)); }


/* § Season Pass (PREVIEW) */
#homeSeasonChip { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 8px; padding:7px 12px; border-radius:14px; text-align:left; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--sp-accent,#f5c542) 60%, transparent); background:linear-gradient(90deg,color-mix(in srgb, var(--sp-accent,#f5c542) 16%, #0b1220),#0b1220); color:#e2e8f0; }
#homeSeasonChip.hidden { display:none; }
#homeSeasonChip .hsc-tier { flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2b0,var(--sp-accent,#f5c542) 55%,#8a5a0a); color:#2a1604; line-height:1; box-shadow:0 0 12px color-mix(in srgb, var(--sp-accent,#f5c542) 55%, transparent); }
#homeSeasonChip .hsc-tier b { font-size:15px; font-weight:900; }
#homeSeasonChip .hsc-tier small { font-size:7px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-top:-3px; }
#homeSeasonChip .hec-text { display:flex; flex-direction:column; min-width:0; flex:1; }
#homeSeasonChip .hec-text b { font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--sp-accent,#f5c542); }
#homeSeasonChip .hec-text small { font-size:11px; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#homeSeasonChip .hec-go { font-size:20px; color:var(--sp-accent,#f5c542); }
#lobbyScreen.mode-page-open #homeSeasonChip { display:none !important; }
/* Short phones: the event and Season Pass chips are extras and the mode cards plus the Tutorial button come first. Up to 700px tall the chips step aside (they stay in the Shop and the Level Ladder); up to 800px they shrink to one line each, so the Tutorial button is never pushed off the screen on the days they show. */
@media (max-height: 700px) { #homeEventChip, #homeSeasonChip { display:none !important; } }
@media (min-height: 701px) and (max-height: 800px) {
  #homeEventChip { margin:6px 0 4px; padding:4px 10px; gap:8px; }
  #homeSeasonChip { margin:0 0 4px; padding:3px 10px; gap:8px; }
  #homeEventChip .hec-text small, #homeSeasonChip .hec-text small { display:none; }
  #homeEventChip .hec-emoji { font-size:18px; }
  #homeSeasonChip .hsc-tier { width:28px; height:28px; }
  #homeSeasonChip .hsc-tier b { font-size:12px; }
  #homeSeasonChip .hsc-tier small { display:none; }
}
.ll-tabs { display:flex; gap:6px; margin:-2px 0 10px; }
.ll-tab { position:relative; flex:1; padding:7px 8px; border-radius:10px; border:1px solid #334155; background:rgba(15,23,42,.7); color:#94a3b8; font-size:10.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.ll-tab.on { color:#1c1304; background:linear-gradient(180deg,#fde68a,#f59e0b); border-color:#fde68a; }
.ll-tab-dot { position:absolute; top:5px; right:8px; width:7px; height:7px; border-radius:50%; background:#f43f5e; box-shadow:0 0 0 2px #0f172a; }
.ll-tab-dot[hidden] { display:none; }
.sp-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; min-height:112px; padding:12px 14px; border-radius:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--sp-accent,#f5c542) 70%, transparent); background:#150c30 center/cover no-repeat; box-shadow:0 6px 22px rgba(0,0,0,.45); }
.sp-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,6,32,.82) 0%,rgba(10,6,32,.35) 58%,rgba(10,6,32,0) 100%); pointer-events:none; }
.sp-hero > * { position:relative; z-index:1; }
.sp-hero small { display:block; font-size:9.5px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--sp-accent,#f5c542); }
.sp-hero .sp-name { display:block; font-size:21px; font-weight:900; color:#fff7dc; text-shadow:0 2px 10px rgba(0,0,0,.7); line-height:1.1; margin:2px 0 4px; }
.sp-hero .sp-dates { font-size:10.5px; font-weight:700; color:#e7d9b8; }
.sp-tier { flex-shrink:0; display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2b0,var(--sp-accent,#f5c542) 55%,#8a5a0a); color:#2a1604; box-shadow:0 0 0 3px rgba(10,6,32,.7),0 0 20px color-mix(in srgb, var(--sp-accent,#f5c542) 60%, transparent); }
.sp-tier b { font-size:24px; font-weight:900; line-height:1; margin-top:7px; }
.sp-tier small { color:#3b2208; font-size:8px; margin-top:-5px; letter-spacing:.14em; }
.sp-bar { display:block; height:10px; border-radius:6px; background:#0f172a; border:1px solid #334155; overflow:hidden; margin:10px 0 4px; }
.sp-bar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#f59e0b,var(--sp-accent,#f5c542),#fff2b0); }
.sp-note { font-size:10.5px; color:#94a3b8; text-align:center; margin:4px 0 0; }
.sp-soon { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:26px 18px; color:#cbd5e1; }
.sp-soon b { color:#fbbf24; font-size:15px; }
#levelLadderModal[data-ll-tab="season"] .ll-how { display:none; }
#seasonToast { position:fixed; left:50%; top:calc(var(--header-h,48px) + var(--safe-top,0px) + 8px); opacity:0; visibility:hidden; transform:translate(-50%,-140%); z-index:340; display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:16px; background:#0b1220; border:1px solid var(--sp-accent,#f5c542); box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--sp-accent,#f5c542) 40%,transparent); transition:transform .5s var(--ease-spring,ease-out); }
#seasonToast.show { transform:translate(-50%,0); opacity:1; visibility:visible; }
#seasonToast { transition:transform .5s var(--ease-spring,ease-out),opacity .3s,visibility .5s; }
.ll-piece-art .mini-table { position:absolute; inset:0; width:100%; height:100%; }
#seasonToast .sp-tier { width:46px; height:46px; } #seasonToast .sp-tier b { font-size:18px; margin-top:5px; }
#seasonToast .spt-text { display:flex; flex-direction:column; color:#fff7dc; } #seasonToast .spt-text b { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-accent,#f5c542); } #seasonToast .spt-text small { font-size:12px; }
.ll-piece-art:has(.mini-table) { display:block; position:relative; width:104px; height:64px; margin-bottom:6px; }
/* Season Pass: a row holding a table (104px wide) plus another piece lays its pieces out side by side */
.ll-pieces:has(.mini-table) { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-start; }
.ll-pieces:has(.mini-table) .ll-piece { flex:0 0 auto; width:104px; }

    /* London Calling deck: Underground — midnight-blue faces, roundel red/white, rounded Johnston-style type */
    .theme-chai { --card-bg: #f6e8cb; --card-border: #a8431f; --text-light: #3a2314; --text-red: #b3261e; }
    .theme-chai :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-chai { background-image: linear-gradient(180deg, rgba(255,255,255,.28) 0 7%, transparent 7% 93%, rgba(168,67,31,.28) 93%), radial-gradient(ellipse at 50% 115%, rgba(242,178,0,.28), transparent 70%); }
    .theme-chai :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-chai .dm-rank { font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif; font-weight: 800; }
    .theme-tube { --card-bg: #0d1a3d; --card-border: #e32219; --text-light: #f4f7ff; --text-red: #ff5a4d; }
    .theme-tube :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-tube { background-image: linear-gradient(180deg, rgba(255,255,255,.07) 0 6%, transparent 6% 94%, rgba(227,34,25,.35) 94%), radial-gradient(ellipse at 50% 120%, rgba(1,33,105,.9), transparent 70%); }
    .theme-tube :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-tube .dm-rank { font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif; font-weight: 800; }

/* § Multiple Decks: opponent rail (5+ players) and grouped hand */
#opponentsContainer.opp-rail-on { justify-content: space-between; align-items: flex-start; }
.opp-rail { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; max-width: 58%; }
.rail-row { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px 0 4px; border-radius: 8px; cursor: pointer;
  background: rgba(10,16,32,.74); border: 1px solid rgba(51,65,85,.9); transition: border-color .2s var(--ease-snappy), background .2s var(--ease-snappy); }
.rail-row:hover, .rail-row:focus-visible { border-color: rgba(148,163,184,.9); outline: none; }
.rail-row.rail-featured { border-color: rgba(125,211,252,.8); }
.rail-row.rail-turn { border-color: #fbbf24; background: rgba(120,80,10,.35); }
.rail-row.rail-out { opacity: .45; }
.rail-cards { display: flex; gap: 2px; flex: none; }
.rail-card { width: 15px; height: 18px; border-radius: 3px; font-size: 9px; font-weight: 900; line-height: 18px; text-align: center;
  background: var(--card-bg, #f8fafc); border: 1px solid var(--card-border, #94a3b8); }
.rail-card-down { background: #1e293b; border-color: #475569; }
.rail-card-none { background: transparent; border: 1px dashed rgba(100,116,139,.5); }
.rail-who { display: flex; align-items: center; gap: 3px; min-width: 0; flex: 1 1 0; }
.rail-name { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { flex: none; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 9px; font-weight: 900; line-height: 16px; text-align: center;
  background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
.hand-stack { overflow: visible; }
.hand-stack-badge { position: absolute; right: -4px; bottom: -4px; z-index: 5; min-width: 22px; padding: 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 900;
  text-align: center; background: #0f172a; color: #fbbf24; border: 1px solid #fbbf24; pointer-events: none; }
.hand-group-bar { align-self: flex-end; flex: none; height: 24px; margin: -2px 2px 3px 0; z-index: 600; display: flex; align-items: center; gap: 4px; }
.hand-group-bar button { height: 24px !important; min-height: 0 !important; width: auto !important; min-width: 28px; padding: 0 8px !important; line-height: 1; border-radius: 12px; font-size: 11px; font-weight: 900; color: #e2e8f0;
  background: rgba(15,23,42,.9); border: 1px solid #475569; }
.hand-group-bar .hgb-label { font-size: 11px; font-weight: 900; color: #fbbf24; padding-right: 2px; }
body.reduce-motion .rail-row { transition: none; }

.decks-counts { display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; margin:.4rem 0 0; }
.decks-count { padding:.45rem 0; font-size:.8rem; font-weight:900; border-radius:.55rem; border:2px solid #334155; background:rgba(15,23,42,.9); color:#cbd5e1; }
.decks-count[aria-pressed="true"] { border-color:#6366f1; color:#fff; background:rgba(79,70,229,.35); }

/* § No Mercy: Queen X-ray (blueprint look; cards show only to the Queen's player) */
.nm-peek { position:fixed; z-index:66; pointer-events:none; display:flex; align-items:center; justify-content:center; gap:.3rem; overflow:visible; }
.nm-peek-scan { position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#67e8f9,transparent); box-shadow:0 0 12px 3px rgba(34,211,238,.6); opacity:0; }
.nm-peek-chip { position:absolute; top:-9px; padding:0 .4rem; font-size:9px; font-weight:900; letter-spacing:.14em; color:#082f49; background:#67e8f9; border-radius:999px; box-shadow:0 0 10px rgba(34,211,238,.7); }
.nm-peek-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:2.1rem; padding:.3rem .4rem .6rem; font-size:.95rem; line-height:1.05; font-weight:900; background:#06223a; border:2px solid #22d3ee; border-radius:.5rem; box-shadow:0 0 14px rgba(34,211,238,.65), inset 0 0 8px rgba(34,211,238,.25); opacity:0; }
.nm-known { flex:none; font-size:8px; font-weight:900; padding:0 .3rem; height:15px; display:inline-flex; align-items:center; border-radius:999px; background:#06223a; border:1px solid #22d3ee; }

.decks-counts.nm-counts { grid-template-columns:repeat(3,1fr); }
.ch-tone-rose { color:#fb7185; }

/* § No Mercy deck: Crimson Verdict (parchment faces; the owner's portraits on Q, K and Joker) */
.theme-nmverdict { --card-bg: #efe3cc; --card-border: #7a5a2a; --text-light: #1a1410; --text-red: #b3141f; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):not(.custom-card-back), .deck-mini-card.theme-nmverdict { background-image: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.35), transparent 70%), linear-gradient(180deg, #f3e8d2, #dcc9a6); box-shadow: inset 0 0 0 1px rgba(122,90,42,.55), inset 0 0 10px rgba(90,60,20,.25); }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot) .card-corner-rank, .deck-mini-card.theme-nmverdict .dm-rank { font-family: 'Cinzel', Georgia, serif; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):is([data-rank="Q"],[data-rank="K"],[data-rank="JOKER"]):not(.custom-card-back)::before { content: ''; position: absolute; inset: 12% 5% 3% 5%; z-index: 0; background: center bottom / auto 100% no-repeat var(--nm-art); -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 56%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 56%, #000 55%, transparent 100%); pointer-events: none; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot)[data-rank="Q"] { --nm-art: url("art/nomercy/q.webp"); }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot)[data-rank="K"] { --nm-art: url("art/nomercy/k.webp"); }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot)[data-rank="JOKER"] { --nm-art: url("art/nomercy/joker.webp"); }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):is([data-rank="Q"],[data-rank="K"],[data-rank="JOKER"]):not(.custom-card-back) > * { position: relative; z-index: 1; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):is([data-rank="Q"],[data-rank="K"],[data-rank="JOKER"]):not(.custom-card-back) > :nth-child(2) { visibility: hidden; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):is([data-rank="Q"],[data-rank="K"]) .card-corner-rank, .theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot):is([data-rank="Q"],[data-rank="K"]) .card-corner-suit { text-shadow: 0 0 3px #f3e8d2, 0 0 3px #f3e8d2; }
.theme-nmverdict :is(.card-base,.card-table,.card-opponent-slot)[data-rank="JOKER"] .card-corner-rank { color: #8a1420 !important; text-shadow: 0 0 3px #f3e8d2; }



/* City sets v2: isolated review artwork. */
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back){isolation:isolate}.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--city-face) center/100% 100% no-repeat;pointer-events:none;z-index:0}.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-corner-rank,.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-corner-suit,.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-centre-suit,.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .opp-corner-text,.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .opponent-card-centre{opacity:0}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/A-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/2-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/3-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/4-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/5-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/6-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/7-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/8-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/9-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/10-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/J-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/Q-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/london/K-S.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/A-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/2-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/3-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/4-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/5-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/6-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/7-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/8-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/9-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/10-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/J-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/Q-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/london/K-H.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/A-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/2-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/3-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/4-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/5-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/6-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/7-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/8-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/9-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/10-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/J-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/Q-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/london/K-D.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/A-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/2-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/3-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/4-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/5-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/6-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/7-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/8-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/9-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/10-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/J-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/Q-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/london/K-C.svg)}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="JOKER"]{--city-face:url(art/cities-v2/decks/london/joker-1.svg)}
body[data-equipped-frame="frame-ldn-unionjack"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card){--city-frame:url(art/cities-v2/london-frame-v2.svg)}
body[data-equipped-frame="frame-ldn-unionjack"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card)::after{content:"";position:absolute;inset:-1px;z-index:8;border-radius:inherit;background:var(--city-frame) center/100% 100% no-repeat;pointer-events:none}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back){isolation:isolate}.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--city-face) center/100% 100% no-repeat;pointer-events:none;z-index:0}.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-corner-rank,.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-corner-suit,.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .card-centre-suit,.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .opp-corner-text,.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back):not([data-city-power="on"]) .opponent-card-centre{opacity:0}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/A-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/2-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/3-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/4-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/5-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/6-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/7-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/8-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/9-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/10-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/J-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/Q-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♠"]{--city-face:url(art/cities-v2/decks/mumbai/K-S.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/A-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/2-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/3-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/4-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/5-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/6-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/7-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/8-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/9-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/10-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/J-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/Q-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♥"]{--city-face:url(art/cities-v2/decks/mumbai/K-H.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/A-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/2-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/3-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/4-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/5-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/6-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/7-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/8-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/9-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/10-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/J-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/Q-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♦"]{--city-face:url(art/cities-v2/decks/mumbai/K-D.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="A"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/A-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="2"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/2-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="3"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/3-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="4"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/4-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="5"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/5-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="6"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/6-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="7"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/7-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="8"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/8-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="9"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/9-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="10"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/10-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="J"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/J-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="Q"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/Q-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="K"][data-suit="♣"]{--city-face:url(art/cities-v2/decks/mumbai/K-C.svg)}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-rank="JOKER"]{--city-face:url(art/cities-v2/decks/mumbai/joker-1.svg)}
body[data-equipped-frame="frame-mum-kaalipeeli"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card){--city-frame:url(art/cities-v2/mumbai-frame-v2.svg)}
body[data-equipped-frame="frame-mum-kaalipeeli"] :is(.card-base,.card-table,.custom-card-back):not(.opponent-cosmetic-card)::after{content:"";position:absolute;inset:-1px;z-index:8;border-radius:inherit;background:var(--city-frame) center/100% 100% no-repeat;pointer-events:none}
[style*="--city-frame"]::after{content:"";position:absolute;inset:-1px;z-index:8;border-radius:inherit;background:var(--city-frame) center/100% 100% no-repeat;pointer-events:none}

/* Power icons and tutorial cues retain native markup over the new face base. */
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]{--city-face:url(art/cities-v2/london-power-base.svg)!important}
.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]>div:not(.opponent-card-centre){position:relative;z-index:1}.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]>.opponent-card-centre{z-index:1}.theme-tube :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"] .text-amber-400{color:var(--text-light)!important}
.theme-tube{--card-bg:#f8f2e5;--card-border:#9f8053;--text-light:#142a45;--text-red:#b5253b}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]{--city-face:url(art/cities-v2/mumbai-power-base.svg)!important}
.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]>div:not(.opponent-card-centre){position:relative;z-index:1}.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"]>.opponent-card-centre{z-index:1}.theme-chai :is(.card-base,.card-table,.card-opponent-slot)[data-rank][data-suit]:not(.custom-card-back)[data-city-power="on"] .text-amber-400{color:var(--text-light)!important}
.theme-chai{--card-bg:#f7ead1;--card-border:#a66d3b;--text-light:#332330;--text-red:#b5253b}

/* v472: smaller season / event boxes (owner: still too big). The gold circle is the Season Pass tier you have reached. */
#homeEventChip { margin:6px 0 4px; padding:4px 10px; gap:8px; }
#homeSeasonChip { margin:0 0 4px; padding:3px 10px; gap:8px; }
#homeEventChip .hec-emoji { font-size:18px; }
#homeSeasonChip .hsc-tier { width:26px; height:26px; }
#homeSeasonChip .hsc-tier b { font-size:12px; }
#homeSeasonChip .hsc-tier small { display:none; }
#homeEventChip b, #homeSeasonChip .hec-text b { font-size:11px; line-height:1.15; }
#homeEventChip small, #homeSeasonChip .hec-text small { font-size:10px; line-height:1.15; }
#homeEventChip .hec-go, #homeSeasonChip .hec-go { font-size:17px; line-height:1; }

.nm-peek-card u { text-decoration:none; display:block; }

/* Final standings with 5+ players: two columns, so 8 seats are not taller than the room above the buttons */
#finalStandingsBanner.fs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding-top: 6px; padding-bottom: 6px; }
#finalStandingsBanner.fs-two > div { min-width: 0; }
/* The standings list names every seat, so the 8-row opponent rail steps aside once the match is over */
body.fs-open #opponentsContainer.opp-rail-on { display: none; }

/* Option 3: seats around the play area on wide screens (ringPlaceSeat); the container only reserves the top row's height */
#opponentsContainer.opp-ring-on { min-height: 150px; pointer-events: none; }
#opponentsContainer.opp-ring-on .opp-ring-seat { position: absolute; z-index: 12; pointer-events: auto; width: var(--opp-seat-w); }

/* Tutorial controls need real space below the history, including its
   absolutely-positioned Card Powers button. These rules never affect matches. */
body.tutorial-on #centerArena { margin-bottom: 38px; max-height: none; }
@media (max-height: 720px) {
  body.tutorial-on #gameTable {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    justify-content: flex-start;
    gap: 12px;
    padding-top: var(--tutorial-caption-room, 150px);
    padding-bottom: 16px;
    scroll-padding-top: var(--tutorial-caption-room, 150px);
  }
  body.tutorial-on #opponentsContainer { padding-top: 8px !important; }
  body.tutorial-on #centerArena { margin-top: 30px; flex-shrink: 0; }
  body.tutorial-on #localPlayerZone { flex-shrink: 0; align-self: center; }
  body.tutorial-on #tutorialCaption { max-height: 46dvh; overflow-y: auto; transition: none; }
  body.tutorial-on #tutorialScrollHint { display: block; }
}
#tutorialScrollHint { display: none; margin-top: 6px; font-size: 11px; color: #cbd5e1; }

/* Separate long module names from the step counter and exit control. */
.tutorial-caption-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'title title' 'step skip'; gap: 4px 12px; align-items: center; }
#tutorialModuleTitle { grid-area: title; position: static; transform: none; text-align: center; white-space: normal; overflow-wrap: anywhere; }
#tutorialStepCounter { grid-area: step; }
#tutorialSkipBtn { grid-area: skip; }

/* Collapsed header shortcuts must leave keyboard and screen-reader navigation. */
:is(body:not(.lobby-open), body.mode-page, body.ui-overlay-open) .hdr-home-only { visibility: hidden; }
body.lobby-open:not(.mode-page):not(.ui-overlay-open) #headerLogoWrap { visibility: hidden; }
#settingsTabBar [role='tab']:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

/* More readable settings, with scrolling rather than smaller copy. */
#settingsScroll .settings-searchable { min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
#settingsScroll .settings-searchable .text-left > span:first-child { font-size: 12px !important; line-height: 1.4; letter-spacing: .025em; }
#settingsScroll .settings-searchable .text-left > span:last-child:not(:first-child) { font-size: 12px !important; line-height: 1.45; color: #cbd5e1; }
#settingsSearchInput { font-size: 16px; min-height: 40px; }
#settingsCloseBtn, #tutorialHubCloseBtn { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; }
#settingsModal > div { padding: 12px; }
#settingsModal .cosmetic-tab { min-height: 44px; font-size: 12px; }
#settingsScroll :is(button, input[type='range']) { min-height: 32px; }
#tutorialSkipBtn, #tutorialBackBtn, #tutorialNextBtn { min-height: 44px; min-width: 44px; font-size: 11px; }
#tutorialModuleTitle, #tutorialStepCounter { font-size: 11px; }
#tutorialCaption { padding: 10px 14px; }
/* The icon artwork stays compact. Expand vertically to the 44px header,
   and horizontally only into the spare gap so targets do not overlap. */
body > header button:not(#navHomeLogoBtn) { position: relative; }
body > header button:not(#navHomeLogoBtn)::after { content: ''; position: absolute; height: max(100%, 44px); left: -1px; right: -1px; top: 50%; transform: translateY(-50%); }
body > header button:focus-visible, #tutorialCaption button:focus-visible, #settingsModal button:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
#settingsTutorialNotice { margin: 4px 0 8px; font-size: 12px; line-height: 1.45; color: #fde68a; }
#settingsModal [data-lesson-locked] { opacity: .55; cursor: not-allowed; }
@media (max-width: 379px) {
  /* The speed label, lock explanation and slider need separate rows at
     this width; squeezing the label beside the controls strands the lock. */
  #settingsTab-gameplay > .settings-searchable:first-child { flex-wrap: wrap; }
  #settingsTab-gameplay > .settings-searchable:first-child > .text-left { flex-basis: 100%; }
  #settingsTab-gameplay > .settings-searchable:first-child > span:last-child { margin-left: auto; }
}

/* § Stuck prompt (v522) */
#stuckPill { position: fixed; top: calc(5.4rem + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 66; display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem .3rem .9rem; border-radius: 999px; background: rgba(15, 23, 42, .94); border: 1px solid rgba(251, 191, 36, .55); color: #e2e8f0; font-size: .75rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
#stuckPill.hidden { display: none; }
#stuckPill button { background: #fbbf24; color: #0f172a; font-weight: 700; border-radius: 999px; padding: .25rem .8rem; font-size: .72rem; letter-spacing: .02em; }

/* v537 Performance Mode (Settings → Display): CSS-only lightening. No effect layers, card states
   (out-of-turn, legal glow) or timings are touched; removing body.perf-mode undoes all of it. */
body.perf-mode :not(#burnFxLayer, #jokerFxLayer, #victoryFxLayer, .pfx-layer, .pfx-layer *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-mode :is(.mc-ic, .daily-flame, .season-emoji, .card-centre-icon) { filter: none !important; }
body.perf-mode #lobbyScreen *, body.perf-mode #lobbyScreen *::before, body.perf-mode #lobbyScreen *::after { animation-play-state: paused !important; }
body.perf-mode svg [class*="av-"], body.perf-mode svg [class*="av-"]::before, body.perf-mode svg [class*="av-"]::after { animation-play-state: paused !important; }