:root {
        --bg: #0a0b12;
        --surface: #11131c;
        --surface-2: #161929;
        --border: #1f2233;
        --border-strong: #2a2f44;
        --fg: #ffffff;
        --muted: #94a3b8;
        --primary: #7c5cff;
        --primary-bright: #9a82ff;
        --amber: #ffb454;
        --green: #5bff95;
        --twitch: #9147ff;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      /* Keep the hidden attribute authoritative even on elements whose
         class sets display (flex buttons like .vote-btn / .sub-btn). */
      [hidden] { display: none !important; }
      html, body { height: 100%; }
      body {
        background: var(--bg);
        color: var(--fg);
        font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      body.light { box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.35); }
      .panel { padding: 12px; }

      header {
        display: flex;
        align-items: center;
        gap: 9px;
        padding-bottom: 12px;
      }
      header .mark { width: 30px; height: 30px; flex: 0 0 auto; }
      header .name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
      header .tag { font-size: 10px; color: var(--muted); margin-top: 1px; }
      header .bolts {
        margin-left: auto;
        font-size: 13px;
        font-weight: 800;
        color: var(--amber);
        white-space: nowrap;
      }

      /* Subscribe-on-web button — shown on every view. */
      .sub-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        padding: 8px 10px;
        margin-bottom: 12px;
        background: rgba(145, 71, 255, 0.14);
        border: 1px solid rgba(145, 71, 255, 0.5);
        border-radius: 10px;
        text-decoration: none;
      }
      .sub-btn:hover { background: rgba(145, 71, 255, 0.24); }
      .sub-btn .sub-main { font-size: 13px; font-weight: 800; color: #fff; }
      .sub-btn .sub-cap { font-size: 10px; color: #c9b8ff; }

      /* ── Schedule countdown + vote pill (Phase 2) ─────────────────── */
      .sched {
        margin-bottom: 12px;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .sched-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
      }
      .sched-dot {
        position: relative;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary-bright);
        flex: 0 0 auto;
      }
      .sched-dot::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: var(--primary-bright);
        opacity: 0.45;
        animation: schedPing 1.6s ease-out infinite;
      }
      @keyframes schedPing {
        0%   { transform: scale(0.6); opacity: 0.6; }
        80%  { transform: scale(1.6); opacity: 0; }
        100% { transform: scale(1.6); opacity: 0; }
      }
      .sched-h {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        flex: 0 0 auto;
      }
      .sched-cd {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        font-weight: 700;
        color: var(--fg);
        margin-left: auto;
      }
      .sched-sub {
        margin-top: 4px;
        font-size: 11px;
        color: var(--muted);
        padding-left: 16px;
      }
      .vote-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
        height: 32px;
        border-radius: 16px;
        background: var(--primary);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: background 120ms;
      }
      .vote-btn:hover { background: var(--primary-bright); }
      .vote-btn.is-disabled {
        background: transparent;
        border: 1px solid var(--border-strong);
        color: var(--muted);
        cursor: not-allowed;
        pointer-events: none;
      }

      /* ── Live queue card (Phase 3) ─────────────────────────────────
         Shown on the panel when a community/variety queue is open.
         Joins happen only in Discord; this is the read-only count
         surface plus the deep-link. */
      .queue-card {
        margin-bottom: 12px;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .queue-h-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .queue-dot {
        position: relative;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        flex: 0 0 auto;
      }
      .queue-dot::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: var(--green);
        opacity: 0.45;
        animation: schedPing 1.8s ease-out infinite;
      }
      .queue-h {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        flex: 0 0 auto;
      }
      .queue-totals {
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted-strong, var(--fg));
        opacity: 0.85;
      }
      .queue-list { margin-top: 8px; display: grid; gap: 4px; }
      .queue-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        font-size: 12px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 8px;
      }
      .queue-row-name { flex: 1; min-width: 0; font-weight: 600; }
      .queue-row-count {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--muted-strong, var(--fg));
        opacity: 0.85;
      }
      .queue-row-full { color: var(--amber); font-weight: 700; }
      #queueJoin { margin-top: 10px; }

      /* ── Clash tab ─────────────────────────────────────────────────
         Read-only town summary + global leaderboard. Pixel-friendly
         (we render the SVG town header sprite via the existing
         pixelSpriteSvg helper). */
      .clash-section-h {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px;
      }
      .clash-section-h .lo-card-h { margin: 0; }
      .clash-meta-row {
        margin-left: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--muted-strong, var(--fg));
      }
      .clash-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-top: 8px;
      }
      .clash-stat {
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px 4px;
        text-align: center;
      }
      .clash-stat-h {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .clash-stat-v {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 700;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }
      .clash-list { margin-top: 8px; display: grid; gap: 4px; }
      .clash-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        font-size: 12px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 8px;
      }
      .clash-row-rank {
        width: 20px;
        text-align: right;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--muted);
      }
      .clash-row-name { flex: 1; min-width: 0; font-weight: 600; }
      .clash-row-val {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--amber);
        font-weight: 700;
      }
      .clash-row-tier {
        display: inline-block;
        padding: 1px 5px;
        margin-left: 6px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--bg);
        background: var(--green);
        border-radius: 4px;
      }
      .clash-tabs {
        display: flex;
        gap: 4px;
        margin-top: 6px;
        padding: 2px;
        background: var(--surface-2);
        border-radius: 8px;
      }
      .clash-tabs button {
        flex: 1;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 700;
        background: transparent;
        color: var(--muted);
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease;
      }
      .clash-tabs button.active {
        background: var(--primary);
        color: #fff;
      }
      .clash-war {
        margin-top: 8px;
        padding: 6px 8px;
        background: linear-gradient(180deg, rgba(255, 92, 92, 0.18), rgba(255, 92, 92, 0.04));
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
      }
      .clash-shield {
        margin-top: 8px;
        padding: 6px 8px;
        background: linear-gradient(180deg, rgba(91, 255, 149, 0.16), rgba(91, 255, 149, 0.03));
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        font-size: 12px;
      }

      .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .tile {
        display: flex;
        align-items: center;
        height: 46px;
        padding: 0 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent, #7c5cff);
        border-radius: 10px;
        color: var(--fg);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.12s, border-color 0.12s;
      }
      .tile:hover { background: var(--surface-2); border-color: var(--border-strong); }
      .tile .dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--accent, #7c5cff); margin-right: 8px; flex: 0 0 auto;
      }

      .latest { margin-top: 14px; }
      .latest-h {
        font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
      }
      .feed-row {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 10px; margin-top: 6px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 10px; text-decoration: none;
      }
      .feed-row:first-child { margin-top: 0; }
      .feed-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
      .feed-icon { font-size: 13px; flex: 0 0 auto; }
      .feed-title {
        flex: 1; min-width: 0; color: var(--fg); font-size: 12px;
        font-weight: 600; line-height: 1.3; overflow: hidden;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      }
      .feed-time { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 600; }

      footer { margin-top: 12px; text-align: center; font-size: 10px; color: var(--muted); }

      /* ── Check-in card ── */
      .ci-card {
        background: linear-gradient(160deg, rgba(124,92,255,0.16), var(--surface));
        border: 1px solid var(--primary);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
      }
      .ci-h {
        font-size: 13px; font-weight: 800; margin-bottom: 8px;
      }
      .ci-input {
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        color: var(--fg);
        font-size: 12px;
        padding: 7px 9px;
      }
      .ci-input:focus { outline: 1px solid var(--primary); }
      .ci-count { text-align: right; font-size: 9px; color: var(--muted); margin-top: 3px; }

      /* Stream check-in card mini preview (--ci-accent set per-viewer). */
      .ci-preview {
        --ci-accent: #5b8def;
        position: relative;
        border: 1px solid var(--ci-accent);
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 9px;
        background: linear-gradient(150deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));
        box-shadow: 0 0 14px -4px var(--ci-accent);
      }
      .ci-preview-unlinked {
        border-style: dashed;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.35;
        box-shadow: none;
        background: rgba(255,255,255,0.03);
      }
      .ci-pv-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
      .ci-pv-label {
        font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--ci-accent);
      }
      .ci-pv-chip {
        font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
        color: #11111a; padding: 1px 7px; border-radius: 999px; background: var(--ci-accent);
      }
      .ci-pv-name { font-size: 14px; font-weight: 800; margin-top: 2px; }
      .ci-pv-tag { font-size: 11px; font-style: italic; color: var(--muted); margin-top: 1px; }
      .ci-pv-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
      .ci-pv-badge {
        font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
        color: var(--fg);
        background: color-mix(in srgb, var(--ci-accent) 22%, rgba(255,255,255,0.05));
        border: 1px solid color-mix(in srgb, var(--ci-accent) 50%, transparent);
      }

      /* ── Loadout view ── */
      .tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
        margin-bottom: 10px;
      }
      .tabs button {
        height: 32px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
      }
      .tabs button.active {
        background: var(--surface-2);
        border-color: var(--primary);
        color: var(--fg);
      }
      .lo-body { min-height: 240px; }
      .lo-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
      }
      .lo-card-h {
        font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
      }
      .lo-class { font-size: 16px; font-weight: 800; }
      .lo-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
      .stat-row { display: flex; gap: 8px; margin-top: 10px; }
      .stat {
        flex: 1; text-align: center;
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 8px; padding: 6px 4px;
      }
      .stat .v { font-size: 16px; font-weight: 800; }
      .stat .k {
        font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
        text-transform: uppercase; color: var(--muted);
      }
      .bar {
        height: 8px; background: var(--surface-2);
        border-radius: 999px; overflow: hidden; margin-top: 6px;
      }
      .bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-bright)); }
      .bar-fill.hp { background: linear-gradient(90deg, #ff5c5c, var(--amber)); }
      .row {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 12px; padding: 5px 0; border-top: 1px solid var(--border);
      }
      .row:first-of-type { border-top: 0; }
      .row .lbl { color: var(--muted); }
      .row .val { font-weight: 700; }
      .balance { font-size: 30px; font-weight: 800; color: var(--amber); }
      .lo-btn {
        display: block; width: 100%; height: 40px;
        background: var(--primary); border: 0; border-radius: 999px;
        color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
        margin-top: 10px;
      }
      .lo-btn:hover { background: var(--primary-bright); }
      .lo-btn:disabled { opacity: 0.55; cursor: default; }
      /* "Free box" button — secondary style next to the primary Bits button
         so subs/patrons see "you get something for free" at a glance. */
      .lo-btn-free {
        background: transparent;
        color: var(--green);
        border: 1px solid var(--green);
      }
      .lo-btn-free:hover {
        background: rgba(91, 255, 149, 0.12);
        color: var(--green);
      }
      .lo-note { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }
      .lo-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 24px 8px; }
      .lb-row {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; padding: 6px 0; border-top: 1px solid var(--border);
      }
      .lb-row:first-child { border-top: 0; }
      .lb-rank { width: 22px; font-weight: 800; color: var(--muted); }
      .lb-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .lb-bal { font-weight: 700; color: var(--amber); }
      .lb-you {
        margin-top: 8px; padding: 8px 10px;
        background: var(--surface-2); border: 1px solid var(--primary);
        border-radius: 8px; font-size: 12px; font-weight: 700;
        display: flex; justify-content: space-between;
      }
      .board-toggle { display: flex; gap: 4px; margin-bottom: 8px; }
      .board-toggle button {
        flex: 1; height: 28px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 7px; color: var(--muted);
        font-size: 11px; font-weight: 700; cursor: pointer;
      }
      .board-toggle button.active {
        background: var(--surface-2); border-color: var(--primary); color: var(--fg);
      }

      /* ── Rotation (Songs) tab ── */
      .rot-results { margin-top: 6px; }
      .rot-result {
        display: flex; align-items: center; gap: 8px;
        padding: 6px; border-radius: 8px; cursor: pointer;
      }
      .rot-result:hover { background: var(--surface-2); }
      .rot-cover {
        width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto;
        background: var(--surface-2); object-fit: cover;
      }
      .rot-meta { min-width: 0; flex: 1; }
      .rot-name {
        font-size: 12px; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .rot-artist {
        font-size: 10px; color: var(--muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .rot-picked {
        display: flex; align-items: center; gap: 8px; margin-top: 8px;
        padding: 6px 8px; border: 1px solid var(--primary);
        border-radius: 8px; background: var(--surface-2);
      }
      .rot-picked .rot-clear {
        margin-left: auto; cursor: pointer; color: var(--muted);
        font-size: 15px; font-weight: 800;
      }
      .rot-q-row {
        display: flex; gap: 8px; font-size: 12px;
        padding: 5px 0; border-top: 1px solid var(--border);
      }
      .rot-q-row:first-child { border-top: 0; }
      .rot-q-pos { color: var(--muted); width: 18px; flex: 0 0 auto; }
      .rot-q-name {
        flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }

      /* ── B3 panel-bridge (Dungeon / Games) tabs ── */
      .pb-pill {
        display: inline-block; font-size: 10px; font-weight: 800;
        padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
        text-transform: uppercase; letter-spacing: 0.4px;
        background: var(--surface-2); color: var(--muted);
      }
      .pb-pill.live { background: var(--primary); color: #fff; }
      .pb-party { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .pb-chip {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; font-weight: 700; padding: 4px 8px;
        border-radius: 999px; background: var(--surface-2);
        border: 1px solid var(--border);
      }
      .pb-chip img {
        width: 18px; height: 18px; border-radius: 50%;
        object-fit: cover; flex: 0 0 auto;
      }
      .pb-chip.targeted {
        border-color: var(--primary);
        animation: pb-target-pulse 1.4s ease-out;
      }
      @keyframes pb-target-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
        50%      { box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.55); }
      }
      .pb-scene {
        margin-top: 8px; font-size: 12px; line-height: 1.4;
        padding: 8px; border-radius: 8px; background: var(--surface-2);
      }
      .pb-glyph { font-size: 15px; margin-right: 6px; }
      .pb-row {
        display: flex; gap: 8px; font-size: 12px;
        padding: 6px 0; border-top: 1px solid var(--border);
      }
      .pb-row:first-of-type { border-top: 0; }
      .pb-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .pb-k { color: var(--muted); }
      .pb-v { margin-left: auto; font-weight: 700; }
      .pb-win { color: #46d160; }
      .pb-lose { color: var(--muted); }

      /* ── B3 sub-phase 3 polish ── */
      @keyframes pb-fade-in {
        from { opacity: 0; transform: translateY(-3px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .pb-log { margin-top: 10px; }
      .pb-log-h {
        font-size: 10px; font-weight: 800; color: var(--muted);
        text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
      }
      .pb-log-row {
        display: flex; gap: 6px; font-size: 11px; line-height: 1.35;
        padding: 4px 0; border-top: 1px solid var(--border);
        animation: pb-fade-in 280ms ease-out;
      }
      .pb-log-row:first-of-type { border-top: 0; }
      .pb-log-glyph { flex: 0 0 auto; }
      .pb-log-text { color: var(--fg); }

      .pb-chip-col { display: flex; flex-direction: column; min-width: 70px; }
      .pb-hp {
        height: 4px; border-radius: 2px; background: var(--surface-2);
        margin-top: 3px; overflow: hidden;
      }
      .pb-hp-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff5c5c 0%, #ffb454 50%, #46d160 100%);
        transition: width 600ms ease-out;
      }

      .pb-mg-icon-wrap {
        display: flex; align-items: center; gap: 10px;
        margin: 8px 0; min-height: 38px;
      }
      .pb-coin {
        width: 36px; height: 36px; border-radius: 50%;
        background: var(--amber); color: #2a1c00;
        font-weight: 800; line-height: 36px; text-align: center;
        animation: pb-coin 700ms ease-out;
      }
      @keyframes pb-coin {
        0% { transform: rotateY(0); }
        100% { transform: rotateY(1440deg); }
      }
      .pb-die {
        width: 36px; height: 36px; border-radius: 6px;
        background: var(--primary); color: #fff;
        font-weight: 800; line-height: 36px; text-align: center;
        animation: pb-die 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      @keyframes pb-die {
        0%   { transform: rotate(0deg) scale(0.7); opacity: 0.5; }
        60%  { transform: rotate(540deg) scale(1.08); opacity: 1; }
        100% { transform: rotate(720deg) scale(1); opacity: 1; }
      }
      .pb-reels { display: flex; gap: 4px; animation: pb-reels 1400ms ease-out; }
      .pb-reel {
        width: 30px; height: 36px; border-radius: 6px;
        background: var(--surface-2); border: 1px solid var(--border-strong);
        font-size: 18px; line-height: 36px; text-align: center;
      }
      @keyframes pb-reels {
        0%   { filter: blur(4px); opacity: 0.4; transform: translateY(-6px); }
        70%  { filter: blur(2px); opacity: 0.9; transform: translateY(0); }
        100% { filter: blur(0);   opacity: 1; }
      }
      .pb-rps { font-size: 22px; font-weight: 700; animation: pb-fade-in 320ms ease-out; }
      .pb-rps-vs { color: var(--muted); font-size: 11px; margin: 0 6px; }
      .pb-wheel {
        width: 36px; height: 36px; border-radius: 50%;
        font-weight: 800; line-height: 36px; text-align: center; color: #fff;
        animation: pb-wheel 1100ms ease-out;
      }
      .pb-wheel.red   { background: #d22f2f; }
      .pb-wheel.black { background: #1b1b1b; }
      .pb-wheel.green { background: #1f9c4a; }
      @keyframes pb-wheel {
        0%   { transform: rotate(0deg) scale(0.7); opacity: 0.4; }
        100% { transform: rotate(1080deg) scale(1); opacity: 1; }
      }

      @keyframes pb-win-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(70, 209, 96, 0); }
        50%      { box-shadow: 0 0 0 4px rgba(70, 209, 96, 0.5); }
      }
      @keyframes pb-lose-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 92, 0); }
        50%      { box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.45); }
      }
      .pb-card-win  { animation: pb-win-glow 1s ease-out; }
      .pb-card-lose { animation: pb-lose-pulse 700ms ease-out; }

      .pb-toast {
        position: fixed; left: 50%; top: 14px;
        transform: translateX(-50%);
        background: var(--surface-2);
        border: 1px solid var(--border-strong);
        color: var(--fg);
        padding: 8px 14px; border-radius: 8px;
        font-size: 12px; font-weight: 700;
        z-index: 9999; pointer-events: none;
        animation: pb-toast 2400ms ease-in-out forwards;
      }
      .pb-toast.err { border-color: #ff5c5c; color: #ff5c5c; }

      /* Loot-box (Tier 3 Bits) — Hero tab card + reveal */

      /* ── Opening animation (closed box that shakes + bursts) ────────
         Sequence:
           0–1100ms  closed box rattles, rarity-tinted aura intensifies
           1100ms    box "pops" with a burst flash, item slides up
         Respects prefers-reduced-motion: the box phase is skipped and
         the item just pops directly. */
      .pb-lb-stage {
        position: relative;
        margin-top: 10px;
        min-height: 88px;
      }
      .pb-lb-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 76px;
        height: 76px;
        border-radius: 14px;
        line-height: 1;
        background: var(--surface-2);
        animation:
          pb-lb-shake 220ms ease-in-out 0s 5,
          pb-lb-aura 1100ms ease-in-out 0s 1;
      }
      .pb-lb-box svg { image-rendering: pixelated; }
      .pb-lb-box::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 18px;
        pointer-events: none;
        animation: pb-lb-glow 1100ms ease-in-out 0s 1;
      }
      .pb-lb-burst {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          var(--burst, #fff) 0%,
          var(--burst, #fff) 30%,
          transparent 70%
        );
        opacity: 0;
        pointer-events: none;
        animation: pb-lb-burst 320ms ease-out 0s 1;
      }
      @keyframes pb-lb-shake {
        0%   { transform: translate(0, 0) rotate(0); }
        25%  { transform: translate(-3px, 0) rotate(-3deg); }
        50%  { transform: translate(0, -2px) rotate(0); }
        75%  { transform: translate(3px, 0) rotate(3deg); }
        100% { transform: translate(0, 0) rotate(0); }
      }
      @keyframes pb-lb-aura {
        0%   { box-shadow: 0 0 0   0 rgba(255, 255, 255, 0.10); }
        50%  { box-shadow: 0 0 24px 4px var(--rarity-glow, rgba(255, 255, 255, 0.35)); }
        100% { box-shadow: 0 0 16px 0 var(--rarity-glow, rgba(255, 255, 255, 0.20)); }
      }
      @keyframes pb-lb-glow {
        0%   { background: radial-gradient(circle, transparent 50%, transparent 70%); }
        60%  { background: radial-gradient(circle, var(--rarity-glow, rgba(255, 255, 255, 0.3)) 0%, transparent 60%); }
        100% { background: radial-gradient(circle, var(--rarity-glow, rgba(255, 255, 255, 0)) 0%, transparent 70%); }
      }
      @keyframes pb-lb-burst {
        0%   { width: 0; height: 0; opacity: 0; }
        40%  { width: 140px; height: 140px; opacity: 0.85; }
        100% { width: 200px; height: 200px; opacity: 0; }
      }

      .pb-lb-reveal {
        display: flex; align-items: center; gap: 10px;
        margin-top: 10px; padding: 10px; border-radius: 10px;
        background: var(--surface-2);
        animation: pb-lb-pop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
      }
      @keyframes pb-lb-pop {
        0%   { opacity: 0; transform: translateY(12px) scale(0.7); }
        60%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }

      @media (prefers-reduced-motion: reduce) {
        .pb-lb-box, .pb-lb-box::before, .pb-lb-burst, .pb-lb-reveal {
          animation: none !important;
        }
      }
      .pb-lb-glyph {
        flex: 0 0 auto;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
      }
      .pb-lb-glyph svg { image-rendering: pixelated; }
      .pb-lb-meta  { min-width: 0; flex: 1; }
      .pb-lb-name  { font-size: 14px; font-weight: 800; }
      .pb-lb-sub   {
        font-size: 11px; color: var(--muted);
        margin-top: 2px; text-transform: capitalize;
      }
      /* Rarity glow on the reveal box itself. */
      .pb-lb-common    { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
      .pb-lb-uncommon  { box-shadow: 0 0 12px 0 rgba(70, 209, 96, 0.45); }
      .pb-lb-rare      { box-shadow: 0 0 16px 0 rgba(58, 134, 255, 0.55); }
      .pb-lb-epic      { box-shadow: 0 0 18px 0 rgba(154, 130, 255, 0.65); }
      .pb-lb-legendary { box-shadow: 0 0 22px 0 rgba(245, 180, 84, 0.75); }
      .pb-lb-mythic    { box-shadow: 0 0 26px 0 rgba(255, 92, 184, 0.80); }
      .li-common { color: var(--fg); }
      @keyframes pb-toast {
        0%       { opacity: 0; transform: translate(-50%, -8px); }
        10%, 80% { opacity: 1; transform: translate(-50%, 0); }
        100%     { opacity: 0; transform: translate(-50%, -8px); }
      }

      /* ── Loadout: Bag / Shop / Play (B2) ── */
      .lo-item {
        display: flex; align-items: center; gap: 8px;
        padding: 7px 0; border-top: 1px solid var(--border);
      }
      .lo-item:first-of-type { border-top: 0; }
      .li-meta { flex: 1; min-width: 0; }
      .li-name {
        font-size: 12px; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .li-sub {
        font-size: 10px; color: var(--muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .li-uncommon  { color: #46d160; }
      .li-rare      { color: #3a86ff; }
      .li-epic      { color: var(--primary-bright); }
      .li-legendary { color: var(--amber); }
      .lo-mini {
        flex: 0 0 auto; height: 28px; padding: 0 10px;
        border-radius: 7px; border: 1px solid var(--border-strong);
        background: var(--surface-2); color: var(--fg);
        font-size: 11px; font-weight: 700; cursor: pointer;
      }
      .lo-mini:hover:not(:disabled) { border-color: var(--primary); }
      .lo-mini:disabled { opacity: 0.5; cursor: default; }
      .lo-mini.primary { background: var(--primary); border-color: var(--primary); }
      .lo-field { display: flex; gap: 6px; margin-top: 8px; }
      .lo-field input, .lo-field select {
        flex: 1; min-width: 0;
        background: var(--bg); border: 1px solid var(--border-strong);
        border-radius: 8px; color: var(--fg); font-size: 12px; padding: 7px 9px;
      }
      .lo-field input:focus, .lo-field select:focus { outline: 1px solid var(--primary); }

      /* ── Tier 1: goals / VODs ── */
      .goal-row { margin-top: 11px; }
      .goal-row:first-of-type { margin-top: 0; }
      .goal-top {
        display: flex; justify-content: space-between; gap: 8px;
        font-size: 11px; margin-bottom: 4px;
      }
      .goal-lbl { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .goal-val { color: var(--muted); font-weight: 700; flex: 0 0 auto; }
      .vod-row {
        display: flex; gap: 8px; padding: 7px 0;
        border-top: 1px solid var(--border); text-decoration: none;
      }
      .vod-row:first-of-type { border-top: 0; }
      .vod-thumb {
        width: 80px; height: 45px; border-radius: 6px; flex: 0 0 auto;
        object-fit: cover; background: var(--surface-2);
      }
      .vod-meta { min-width: 0; flex: 1; }
      .vod-title {
        font-size: 11px; font-weight: 700; color: var(--fg); line-height: 1.3;
        overflow: hidden; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      }
      .vod-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

      /* ── Tier 2: tap-to-cheer ── */
      .cheer-bar { display: flex; gap: 5px; margin-bottom: 10px; }
      .cheer-btn {
        flex: 1; height: 34px; font-size: 17px; cursor: pointer;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 9px; transition: transform 0.1s, border-color 0.12s;
      }
      .cheer-btn:hover { border-color: var(--primary); }
      .cheer-btn.pulse {
        transform: scale(1.25);
        border-color: var(--primary-bright);
      }

      /* ──────────────────────────────────────────────────────────────
         POLISH LAYER
         Smoothness, typography, and feedback consistency pass.
         Lives at the bottom so the specificity ordering takes care of
         overriding the older rules without restructuring them.
         ────────────────────────────────────────────────────────────── */

      /* Sharpen the panel's default body type and rhythm. */
      body {
        font-feature-settings: "ss01", "cv01", "cv11";
        letter-spacing: 0;
      }
      .panel { padding: 14px 12px; }

      /* Header polish — slightly tighter, with a hair more breathing
         room before the content starts. */
      header {
        padding-bottom: 14px;
      }
      header .name {
        font-weight: 800;
        letter-spacing: -0.01em;
        font-size: 14px;
      }
      header .tag {
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.01em;
      }

      /* Card consistency: rounded radius, subtle layered shadow, hairline
         border. Applies to every .lo-card without retroactively shifting
         the existing internal padding. */
      .lo-card {
        border-radius: 12px;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.03) inset,
          0 6px 14px -8px rgba(0, 0, 0, 0.45);
        transition: border-color 160ms ease, transform 160ms ease;
      }
      .lo-card-h {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted-strong, var(--fg));
        opacity: 0.9;
      }

      /* Buttons: clear hover (subtle lift + brightness), press feedback
         (scale-down), and uniform 160ms timing across every clickable
         element so the panel feels of-a-piece. */
      .lo-btn {
        transition:
          background-color 160ms ease,
          transform 100ms ease,
          box-shadow 160ms ease,
          filter 160ms ease;
        will-change: transform;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 12px -6px rgba(124, 92, 255, 0.45);
      }
      .lo-btn:hover:not(:disabled) {
        filter: brightness(1.06);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 16px -6px rgba(124, 92, 255, 0.55);
      }
      .lo-btn:active:not(:disabled) {
        transform: scale(0.97);
        filter: brightness(0.96);
      }
      .lo-btn-free { box-shadow: 0 1px 0 rgba(91, 255, 149, 0.18) inset; }
      .lo-btn-free:hover:not(:disabled) {
        box-shadow: 0 1px 0 rgba(91, 255, 149, 0.28) inset, 0 8px 16px -6px rgba(91, 255, 149, 0.35);
      }

      /* Tiles — the public-view link grid. Add lift on hover + press
         feedback; keep the existing colour shift. */
      .tile {
        transition:
          transform 160ms ease,
          border-color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease;
        will-change: transform;
      }
      .tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
      }
      .tile:active { transform: translateY(0) scale(0.985); }

      /* Tabs — smooth indicator transition + clearer active state. */
      .tabs button {
        transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
        position: relative;
      }
      .tabs button.active {
        color: var(--fg);
        background: linear-gradient(180deg, rgba(124, 92, 255, 0.18), rgba(124, 92, 255, 0.06));
      }
      .tabs button.active::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: -1px;
        height: 2px;
        background: var(--primary-bright);
        border-radius: 2px;
      }

      /* Inputs — clearer focus, faster transition. */
      .lo-field input,
      .lo-field select,
      .ci-input {
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
      }
      .lo-field input:focus,
      .lo-field select:focus,
      .ci-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22);
      }

      /* Skeleton loaders — used in the JS for empty/initial states.
         Class: ".lo-skel" on any element you want shimmer-animated. */
      .lo-skel {
        position: relative;
        overflow: hidden;
        background: var(--surface-2);
        border-radius: 6px;
        color: transparent;
        user-select: none;
      }
      .lo-skel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.045) 40%,
          rgba(255, 255, 255, 0.075) 50%,
          rgba(255, 255, 255, 0.045) 60%,
          transparent 100%
        );
        transform: translateX(-100%);
        animation: lo-skel-shimmer 1.6s ease-in-out infinite;
      }
      @keyframes lo-skel-shimmer {
        100% { transform: translateX(100%); }
      }

      /* Empty-state row — friendlier than a plain "loading…" string. */
      .lo-empty {
        padding: 14px;
        text-align: center;
        font-size: 12px;
        color: var(--muted);
        background: var(--surface);
        border: 1px dashed var(--border-strong);
        border-radius: 10px;
      }

      /* Reveal-on-mount: cards fade up gently when they first render
         so the panel doesn't pop in jarringly on load. Apply by
         tagging an element with `.lo-reveal`. JS adds it after the
         initial paint to avoid double-running on every re-render. */
      @keyframes lo-reveal {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .lo-reveal {
        animation: lo-reveal 280ms ease-out both;
      }

      /* The schedule countdown pill — tighter alignment + a softer
         glow on the live dot so it doesn't compete with content. */
      .sched-dot::before {
        animation-duration: 1.8s;
      }
      .vote-btn {
        transition: background-color 160ms ease, transform 100ms ease, box-shadow 160ms ease;
      }
      .vote-btn:hover:not(.is-disabled) {
        filter: brightness(1.06);
        box-shadow: 0 8px 16px -6px rgba(124, 92, 255, 0.45);
      }
      .vote-btn:active:not(.is-disabled) {
        transform: scale(0.97);
      }

      /* Toast — clearer hierarchy + softer entrance. */
      .pb-toast {
        backdrop-filter: blur(8px);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.08) inset,
          0 12px 24px -10px rgba(0, 0, 0, 0.6);
      }

      /* Lootbox stage spacing improvement: a touch more headroom so
         the burst doesn't crop against the surrounding card. */
      .pb-lb-stage {
        min-height: 96px;
        padding: 6px 0 4px;
      }

      /* Disabled state is consistent everywhere. */
      .lo-btn:disabled,
      .vote-btn.is-disabled,
      .tabs button:disabled {
        opacity: 0.55;
        cursor: default;
        box-shadow: none;
      }

      /* Reduced-motion users keep the visuals but lose the kinetic bits. */
      @media (prefers-reduced-motion: reduce) {
        .lo-skel::after,
        .lo-reveal,
        .lo-card,
        .lo-btn,
        .tile,
        .tabs button,
        .vote-btn {
          animation: none !important;
          transition: none !important;
        }
      }

      /* ──────────────────────────────────────────────────────────────
         PREMIUM PASS v2 — 2026-05
         Higher-fidelity surface treatment built on the polish layer
         above. The earlier layer set rhythm + motion; this one tightens
         hierarchy, sharpens depth, and unifies feedback details so the
         panel reads as a finished product rather than a v1 dashboard.
         ────────────────────────────────────────────────────────────── */

      :root {
        --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 22px -12px rgba(0,0,0,0.55);
        --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 28px -16px rgba(0,0,0,0.7);
        --ring-primary: 0 0 0 3px rgba(124, 92, 255, 0.28);
        --gradient-hero: linear-gradient(160deg, rgba(124,92,255,0.22), rgba(91,255,149,0.04) 60%, transparent 100%);
        --duration-fast: 140ms;
        --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.25);
      }

      /* Tighten the panel padding so cards breathe edge-to-edge */
      .panel { padding: 14px 12px 20px; }

      /* Header — soft glow under the mark + smoother type rhythm */
      header { padding-bottom: 16px; position: relative; }
      header .mark {
        filter: drop-shadow(0 4px 8px rgba(124,92,255,0.35));
      }
      header .name {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.012em;
        background: linear-gradient(180deg, #ffffff, #d8d2ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      header .tag {
        font-size: 10.5px;
        color: var(--muted);
        letter-spacing: 0.03em;
      }
      header .bolts {
        font-size: 14px;
        font-weight: 800;
        color: var(--amber);
        text-shadow: 0 0 12px rgba(255,180,84,0.35);
      }

      /* Universal card upgrade — fuller depth + softer fade-up on mount */
      .lo-card {
        background: linear-gradient(180deg, var(--surface), #10131c);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 13px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-card);
        transition: border-color var(--duration-fast) ease,
                    transform var(--duration-fast) ease,
                    box-shadow var(--duration-fast) ease;
      }
      .lo-card:hover { border-color: var(--border-strong); }
      .lo-card-h {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 10px;
      }

      /* Daily check-in — feel like the panel's hero card */
      .ci-card {
        background: var(--gradient-hero), linear-gradient(180deg, var(--surface), #11131e);
        border: 1px solid rgba(124,92,255,0.45);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 24px -16px rgba(124,92,255,0.55);
      }
      .ci-h {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -0.005em;
        margin-bottom: 10px;
      }
      .ci-input {
        background: rgba(10, 11, 18, 0.85);
        border-radius: 10px;
        border: 1px solid var(--border-strong);
        padding: 8px 10px;
      }
      .ci-input:focus { border-color: var(--primary); box-shadow: var(--ring-primary); outline: none; }

      /* Tabs — tighter chip styling + active gets a top accent bar */
      .tabs {
        gap: 4px;
        padding: 2px;
        background: linear-gradient(180deg, rgba(20,22,33,0.6), rgba(20,22,33,0.2));
        border: 1px solid var(--border);
        border-radius: 10px;
      }
      .tabs button {
        height: 30px;
        border-radius: 7px;
        background: transparent;
        border: 1px solid transparent;
        color: var(--muted);
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: 0.01em;
      }
      .tabs button:hover { color: var(--fg); background: rgba(124,92,255,0.08); }
      .tabs button.active {
        background: linear-gradient(180deg, rgba(124,92,255,0.22), rgba(124,92,255,0.06));
        border-color: rgba(124,92,255,0.5);
        color: var(--fg);
      }
      .tabs button.active::after { display: none; }

      /* Buttons — primary lifts on hover, presses on click */
      .lo-btn {
        height: 42px;
        border-radius: 999px;
        background: linear-gradient(180deg, #8c70ff, #6a4cee);
        font-weight: 800;
        letter-spacing: 0.01em;
        box-shadow:
          0 1px 0 rgba(255,255,255,0.18) inset,
          0 -1px 0 rgba(0,0,0,0.18) inset,
          0 8px 16px -8px rgba(124,92,255,0.55);
      }
      .lo-btn:hover:not(:disabled) {
        filter: brightness(1.07);
        transform: translateY(-1px);
        box-shadow:
          0 1px 0 rgba(255,255,255,0.22) inset,
          0 -1px 0 rgba(0,0,0,0.18) inset,
          0 12px 22px -10px rgba(124,92,255,0.65);
      }
      .lo-btn:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
        filter: brightness(0.96);
      }
      .lo-btn-free {
        background: transparent;
        color: var(--green);
        border: 1px solid var(--green);
        box-shadow: 0 1px 0 rgba(91,255,149,0.15) inset;
      }
      .lo-btn-free:hover:not(:disabled) {
        background: rgba(91,255,149,0.12);
        box-shadow: 0 1px 0 rgba(91,255,149,0.3) inset, 0 8px 18px -10px rgba(91,255,149,0.45);
      }

      /* Secondary mini buttons — gain a clearer hierarchy */
      .lo-mini {
        height: 30px;
        padding: 0 12px;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border-strong);
        color: var(--fg);
        font-size: 11px;
        font-weight: 700;
        transition: background var(--duration-fast) ease,
                    border-color var(--duration-fast) ease,
                    transform var(--duration-fast) ease;
      }
      .lo-mini:hover:not(:disabled) {
        background: #1c2031;
        border-color: rgba(124,92,255,0.55);
        transform: translateY(-1px);
      }
      .lo-mini:active:not(:disabled) { transform: translateY(0) scale(0.97); }
      .lo-mini.primary {
        background: linear-gradient(180deg, #8c70ff, #6a4cee);
        border-color: rgba(124,92,255,0.7);
        color: #fff;
        box-shadow: 0 6px 12px -8px rgba(124,92,255,0.55);
      }

      /* Inputs — calmer look + accent ring */
      .lo-field { gap: 8px; margin-top: 10px; }
      .lo-field input,
      .lo-field select,
      .ci-input {
        background: rgba(10,11,18,0.85);
        border: 1px solid var(--border-strong);
        border-radius: 9px;
        padding: 8px 10px;
        color: var(--fg);
        font-size: 12px;
        transition: border-color var(--duration-fast) ease,
                    box-shadow var(--duration-fast) ease,
                    background var(--duration-fast) ease;
      }
      .lo-field input::placeholder,
      .ci-input::placeholder { color: rgba(148,163,184,0.7); }
      .lo-field input:focus,
      .lo-field select:focus,
      .ci-input:focus {
        border-color: var(--primary);
        box-shadow: var(--ring-primary);
        outline: none;
        background: rgba(14,15,24,0.95);
      }

      /* Hero panel chrome */
      .lo-class {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      .lo-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
      .stat-row { gap: 8px; margin-top: 12px; }
      .stat {
        background: linear-gradient(180deg, var(--surface-2), #14172a);
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        padding: 8px 6px 6px;
      }
      .stat .v { font-size: 18px; font-weight: 800; color: var(--fg); }
      .stat .k {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 2px;
      }
      .bar { height: 9px; background: rgba(10,11,18,0.85); border: 1px solid var(--border); }
      .bar-fill {
        background: linear-gradient(90deg, var(--primary), var(--primary-bright));
        box-shadow: 0 0 8px rgba(124,92,255,0.55);
      }
      .bar-fill.hp {
        background: linear-gradient(90deg, #ff5c5c, var(--amber));
        box-shadow: 0 0 8px rgba(255,180,84,0.45);
      }

      /* Item rows — gain a sprite slot + sharper separators */
      .lo-item-icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-right: 8px;
        background: rgba(10,11,18,0.6);
        border-radius: 8px;
        border: 1px solid var(--border);
      }
      .lo-item-icon svg { image-rendering: pixelated; display: block; }
      .lo-item { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.04); }
      .lo-eq-row {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; padding: 6px 0;
        border-top: 1px solid rgba(255,255,255,0.04);
      }
      .lo-eq-row:first-of-type { border-top: 0; }
      .lo-eq-row .lbl { color: var(--muted); text-transform: capitalize; font-size: 10.5px; }
      .lo-eq-row .val { margin-left: auto; font-weight: 700; }

      /* Tiles — finishing touches: gradient border accent */
      .tile {
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(180deg, var(--surface), #10131c);
        border: 1px solid var(--border);
        border-left-width: 3px;
        font-size: 13px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
      }
      .tile::before {
        content: "";
        position: absolute; inset: 0;
        background: radial-gradient(circle at top right, rgba(124,92,255,0.10), transparent 60%);
        opacity: 0;
        transition: opacity var(--duration-fast) ease;
        pointer-events: none;
      }
      .tile:hover::before { opacity: 1; }

      /* Loot box — sharpen the open animation framing */
      .pb-lb-stage { min-height: 100px; padding: 8px 0; }
      .pb-lb-box {
        width: 84px;
        height: 84px;
        background: linear-gradient(180deg, rgba(124,92,255,0.10), rgba(124,92,255,0.02));
        border-radius: 16px;
        border: 1px solid var(--border-strong);
      }
      .pb-lb-reveal {
        background: linear-gradient(180deg, var(--surface-2), #14172a);
        border: 1px solid var(--border-strong);
        padding: 12px;
      }
      .pb-lb-glyph {
        width: 48px;
        height: 48px;
        background: rgba(10,11,18,0.6);
        border-radius: 10px;
        border: 1px solid var(--border);
      }
      .pb-lb-name {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: -0.005em;
      }
      .pb-lb-sub {
        font-size: 11px;
        color: var(--muted);
        margin-top: 3px;
        text-transform: capitalize;
        letter-spacing: 0.02em;
      }

      /* Minigame icon stages — frame the pixel sprite so it has presence */
      .pb-mg-icon-wrap {
        background: rgba(10,11,18,0.55);
        border-radius: 10px;
        border: 1px solid var(--border);
        padding: 6px 10px;
        margin: 10px 0;
        min-height: 52px;
        justify-content: center;
      }
      .pb-coin-stage,
      .pb-die-stage {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
      }
      .pb-coin-canvas,
      .pb-die-canvas {
        animation: pb-pop-in 320ms var(--ease-pop);
      }
      @keyframes pb-pop-in {
        0%   { transform: scale(0.6) translateY(4px); opacity: 0; }
        70%  { transform: scale(1.08) translateY(-2px); opacity: 1; }
        100% { transform: scale(1) translateY(0); opacity: 1; }
      }

      /* Sparkle on win — extra polish via a glow ring */
      .pb-card-win {
        background: linear-gradient(180deg, rgba(70,209,96,0.10), var(--surface));
        border-color: rgba(70,209,96,0.55) !important;
      }
      .pb-card-lose {
        background: linear-gradient(180deg, rgba(255,92,92,0.10), var(--surface));
        border-color: rgba(255,92,92,0.55) !important;
      }

      /* Empty states — softer, more inviting copy block */
      .lo-empty {
        padding: 18px 12px;
        border: 1px dashed rgba(255,255,255,0.10);
        border-radius: 12px;
        background:
          radial-gradient(circle at top, rgba(124,92,255,0.06), transparent 70%),
          rgba(20,23,42,0.4);
        color: var(--muted);
        font-size: 12px;
        text-align: center;
      }

      /* Toasts — glass card with a colored accent stripe */
      .pb-toast {
        background: linear-gradient(180deg, rgba(22,25,41,0.92), rgba(15,17,28,0.92));
        border: 1px solid rgba(255,255,255,0.12);
        border-top: 2px solid var(--primary-bright);
        backdrop-filter: blur(12px) saturate(140%);
        padding: 10px 16px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        box-shadow:
          0 1px 0 rgba(255,255,255,0.08) inset,
          0 16px 32px -12px rgba(0,0,0,0.7);
      }
      .pb-toast.err { border-top-color: #ff5c5c; }
      .pb-toast.success { border-top-color: var(--green); }
      .pb-toast.community {
        border-top-color: var(--green);
        background: linear-gradient(180deg, rgba(28,35,55,0.95), rgba(15,17,28,0.95));
      }

      /* Subtle pulse for inbound community-box toasts */
      @keyframes pb-toast-community {
        0%       { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
        12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
        100%     { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
      }
      .pb-toast.community {
        animation: pb-toast-community 3400ms ease-in-out forwards;
      }

      /* Schedule + queue cards — match the new card depth */
      .sched, .queue-card {
        background: linear-gradient(180deg, var(--surface), #10131c);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow-card);
      }

      /* Feed rows — clearer click affordance */
      .feed-row {
        background: linear-gradient(180deg, var(--surface), #10131c);
        border-radius: 12px;
        transition: transform var(--duration-fast) ease,
                    border-color var(--duration-fast) ease,
                    background var(--duration-fast) ease;
      }
      .feed-row:hover {
        transform: translateY(-1px);
        border-color: rgba(124,92,255,0.4);
        background: linear-gradient(180deg, #15182a, #11131e);
      }

      /* ── Moderator section (broadcaster + mod only) ─────────────── */
      .mod-card {
        background:
          linear-gradient(180deg, rgba(255,92,184,0.10), transparent 60%),
          linear-gradient(180deg, var(--surface), #11131e);
        border: 1px solid rgba(255,92,184,0.45);
        border-radius: 14px;
        padding: 13px;
        margin-bottom: 10px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 24px -16px rgba(255,92,184,0.45);
      }
      .mod-card-h {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ffb1da;
        margin-bottom: 10px;
      }
      .mod-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 1px 8px;
        background: rgba(255,92,184,0.18);
        color: #ffb1da;
        border: 1px solid rgba(255,92,184,0.5);
        border-radius: 999px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .mod-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 0;
        border-top: 1px solid rgba(255,255,255,0.05);
      }
      .mod-row:first-of-type { border-top: 0; }
      .mod-row-name {
        flex: 1; min-width: 0;
        font-size: 12px; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .mod-row-count {
        flex: 0 0 auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--muted);
      }
      .mod-mini {
        flex: 0 0 auto;
        height: 26px;
        padding: 0 10px;
        border-radius: 7px;
        background: rgba(255,92,184,0.16);
        border: 1px solid rgba(255,92,184,0.45);
        color: #ffd2ec;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: background var(--duration-fast) ease,
                    transform var(--duration-fast) ease,
                    border-color var(--duration-fast) ease;
      }
      .mod-mini:hover:not(:disabled) {
        background: rgba(255,92,184,0.28);
        transform: translateY(-1px);
      }
      .mod-mini:active:not(:disabled) { transform: translateY(0) scale(0.97); }
      .mod-mini:disabled { opacity: 0.55; cursor: default; }
      .mod-mini.danger {
        background: rgba(255,92,92,0.18);
        border-color: rgba(255,92,92,0.5);
        color: #ffd2d2;
      }
      .mod-mini.danger:hover:not(:disabled) { background: rgba(255,92,92,0.32); }
      .mod-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }
      .mod-note {
        font-size: 11px;
        color: var(--muted);
        margin-top: 8px;
        min-height: 14px;
      }
      .mod-field {
        display: flex;
        gap: 6px;
        margin-top: 8px;
      }
      .mod-field input,
      .mod-field select {
        flex: 1;
        background: rgba(10,11,18,0.85);
        border: 1px solid rgba(255,92,184,0.4);
        border-radius: 8px;
        color: var(--fg);
        font-size: 12px;
        padding: 7px 9px;
      }
      .mod-field input:focus,
      .mod-field select:focus {
        outline: none;
        border-color: rgba(255,92,184,0.85);
        box-shadow: 0 0 0 3px rgba(255,92,184,0.22);
      }

      /* ── Boltbound (card game) panel tab ──────────────────────────── */
      .panel-card {
        transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
        animation: bb-panel-card-in 280ms cubic-bezier(.22,1,.36,1);
      }
      .panel-card.panel-attacker {
        cursor: pointer;
        box-shadow: 0 0 0 1px #5bff95, 0 0 10px rgba(91,255,149,0.55);
      }
      .panel-card.panel-attacker:hover {
        transform: translateY(-2px);
      }
      @keyframes bb-panel-card-in {
        0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      /* Subtle flash on the match body whenever it re-renders. Cheap,
         but visually confirms the action resolved. */
      .bb-panel-flash {
        animation: bb-panel-flash 320ms ease-out;
      }
      @keyframes bb-panel-flash {
        0%   { box-shadow: 0 0 0 0 rgba(154,130,255,0); }
        30%  { box-shadow: 0 0 0 2px rgba(154,130,255,0.55), 0 0 18px rgba(154,130,255,0.35); }
        100% { box-shadow: 0 0 0 0 rgba(154,130,255,0); }
      }
      /* Floating "-N / +N" popup on a hero row after damage / heal. */
      .bb-panel-popup {
        position: absolute;
        right: 4px;
        top: -2px;
        font-size: 14px;
        font-weight: 900;
        pointer-events: none;
        animation: bb-panel-popup 950ms cubic-bezier(.22,1,.36,1) forwards;
        text-shadow: 0 1px 0 #000;
      }
      .bb-panel-popup-dmg  { color: #ff6b6b; text-shadow: 0 0 6px rgba(255,107,107,0.85), 0 1px 0 #000; }
      .bb-panel-popup-heal { color: #5bff95; text-shadow: 0 0 6px rgba(91,255,149,0.85), 0 1px 0 #000; }
      @keyframes bb-panel-popup {
        0%   { opacity: 0; transform: translateY(0) scale(0.6); }
        20%  { opacity: 1; transform: translateY(-8px) scale(1.2); }
        100% { opacity: 0; transform: translateY(-32px) scale(0.95); }
      }
      @media (prefers-reduced-motion: reduce) {
        .panel-card, .bb-panel-flash, .bb-panel-popup {
          animation-duration: 180ms !important;
        }
      }

      /* Reduced-motion respects new pop-in too */
      @media (prefers-reduced-motion: reduce) {
        .pb-coin-canvas,
        .pb-die-canvas,
        .pb-toast,
        .pb-toast.community {
          animation: none !important;
        }
      }

      /* ── Quick-bolts games card (panel surface) ─────────────────── */
      .qg-picker {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        margin-bottom: 8px;
      }
      .qg-tile {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #e7e9f1;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 6px 4px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
      }
      .qg-tile:hover { background: rgba(255, 255, 255, 0.08); }
      .qg-tile.active {
        background: rgba(124, 92, 255, 0.25);
        border-color: rgba(124, 92, 255, 0.6);
        color: #fff;
      }
      .qg-stage { min-height: 80px; }
      .qg-row {
        display: flex; gap: 6px; align-items: center;
        margin-bottom: 6px; flex-wrap: wrap;
      }
      .qg-row > input[type="number"],
      .qg-row > input[type="text"] {
        flex: 1 1 60px; min-width: 0;
      }
      .qg-row > select {
        appearance: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #e7e9f1;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
      }
      .qg-btn {
        appearance: none;
        background: rgba(124, 92, 255, 0.85);
        color: #fff;
        border: none;
        font-size: 11px;
        font-weight: 700;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
      }
      .qg-btn.secondary {
        background: rgba(255, 255, 255, 0.08);
        color: #e7e9f1;
      }
      .qg-btn.success { background: #4ade80; color: #042611; }
      .qg-btn.danger  { background: #f87171; color: #2c0707; }
      .qg-btn:disabled { opacity: 0.45; cursor: default; }
      .qg-result {
        margin-top: 6px;
        padding: 6px 8px;
        font-size: 11px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.04);
      }
      .qg-result.win  { background: rgba(74, 222, 128, 0.15); color: #b9f3cc; }
      .qg-result.lose { background: rgba(248, 113, 113, 0.15); color: #f3c7c7; }
      .qg-mines-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
        margin: 6px 0;
      }
      .qg-mines-tile {
        aspect-ratio: 1 / 1;
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
        color: #e7e9f1;
      }
      .qg-mines-tile.gem  { background: rgba(74, 222, 128, 0.25); border-color: rgba(74, 222, 128, 0.5); }
      .qg-mines-tile.bomb { background: rgba(248, 113, 113, 0.25); border-color: rgba(248, 113, 113, 0.5); }
      .qg-mines-tile:disabled { cursor: default; }
      .qg-card-line { font-size: 11px; margin-bottom: 4px; }
      .qg-mult {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(255, 207, 95, 0.18);
        color: #ffd28a;
        font-weight: 700;
        font-size: 11px;
      }

      /* ── Sports betting card (panel surface) ────────────────────── */
      .pb-game {
        margin: 6px 0;
        padding: 6px 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.02);
      }
      .pb-game-h {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 4px;
      }
      .pb-bet-lines { display: grid; gap: 3px; }
      .pb-bet-row {
        display: grid;
        grid-template-columns: 28px 1fr 1fr;
        gap: 4px;
        align-items: center;
      }
      .pb-bet-title {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.45);
      }
      .pb-bet-btn {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.04);
        color: #e7e9f1;
        font-size: 10px;
        font-weight: 600;
        padding: 4px 6px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        gap: 4px;
        transition: background 120ms ease, border-color 120ms ease;
      }
      .pb-bet-btn:hover:not(:disabled) {
        background: rgba(124, 92, 255, 0.18);
        border-color: rgba(124, 92, 255, 0.55);
      }
      .pb-bet-btn:disabled { opacity: 0.4; cursor: default; }
      .pb-bet-btn-l { font-weight: 700; }
      .pb-bet-btn-s { color: rgba(255, 255, 255, 0.55); font-family: ui-monospace, monospace; }
      .pb-bet-modal {
        padding: 10px;
        border: 1px solid rgba(124, 92, 255, 0.4);
        background: rgba(124, 92, 255, 0.06);
        border-radius: 8px;
      }

      /* ─────────── GLOSSY GAME PREMIUM polish layer ───────────
         Appended overrides that lift the panel to match the site's
         Glossy kit (App-Store / Clash-of-Clans idiom). The earlier
         rules above provide the base structure; everything in this
         block ratchets up depth, gradient richness, button gloss,
         and typographic crispness without changing markup. */

      /* Tighten typography across the board. The base font stack
         was Segoe UI fallback; switch to the site's geometric +
         numeric features for tabular figures in chips. */
      body {
        font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-feature-settings: "ss01", "cv11", "tnum";
        letter-spacing: -0.005em;
      }
      header .name {
        letter-spacing: -0.02em;
        background: linear-gradient(180deg, #ffffff 0%, #d4c2ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      header .tag { letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
      header .bolts {
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
        background: linear-gradient(180deg, #fff3b1 0%, #ffb454 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      /* ── Glossy buttons ──
         lo-btn (primary) + vote-btn (sched) + sub-btn (when re-added)
         all get the same elevation language: gradient body, inset
         highlight at the top, soft drop shadow. */
      .lo-btn {
        background: linear-gradient(180deg, #a98fff 0%, #7c5cff 50%, #5a3ed4 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.35),
          0 2px 0 rgba(0, 0, 0, 0.5),
          0 6px 14px rgba(124, 92, 255, 0.35);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.02em;
        transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
      }
      .lo-btn:hover {
        background: linear-gradient(180deg, #c4b0ff 0%, #9a82ff 50%, #6a4eff 100%);
        filter: brightness(1.04);
      }
      .lo-btn:active:not(:disabled) {
        transform: translateY(1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 0 rgba(0, 0, 0, 0.35),
          0 1px 0 rgba(0, 0, 0, 0.5),
          0 3px 8px rgba(124, 92, 255, 0.3);
      }
      .lo-btn-free {
        background: linear-gradient(180deg, rgba(91, 255, 149, 0.18) 0%, rgba(91, 255, 149, 0.06) 100%);
        box-shadow:
          inset 0 1px 0 rgba(168, 255, 199, 0.3),
          0 2px 0 rgba(0, 0, 0, 0.4),
          0 4px 10px rgba(91, 255, 149, 0.18);
      }
      .lo-btn-free:hover { background: linear-gradient(180deg, rgba(91, 255, 149, 0.28) 0%, rgba(91, 255, 149, 0.12) 100%); }

      .vote-btn {
        background: linear-gradient(180deg, #a98fff 0%, #7c5cff 50%, #5a3ed4 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          inset 0 -1px 0 rgba(0, 0, 0, 0.35),
          0 2px 0 rgba(0, 0, 0, 0.45),
          0 5px 12px rgba(124, 92, 255, 0.3);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.02em;
        transition: transform 120ms ease, filter 120ms ease;
      }
      .vote-btn:hover { background: linear-gradient(180deg, #c4b0ff 0%, #9a82ff 50%, #6a4eff 100%); filter: brightness(1.04); }
      .vote-btn:active { transform: translateY(1px); }

      /* lo-mini secondary buttons — subtler but still glossy. */
      .lo-mini {
        background: linear-gradient(180deg, #1f2233 0%, #161929 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.07),
          0 1px 0 rgba(0, 0, 0, 0.4),
          0 2px 6px rgba(0, 0, 0, 0.25);
        transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
      }
      .lo-mini:hover:not(:disabled) {
        background: linear-gradient(180deg, #2a2f44 0%, #1f2233 100%);
        border-color: var(--primary);
      }
      .lo-mini:active:not(:disabled) { transform: translateY(1px); }
      .lo-mini.primary {
        background: linear-gradient(180deg, #a98fff 0%, #7c5cff 50%, #5a3ed4 100%);
        border-color: #5a3ed4;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          0 1px 0 rgba(0, 0, 0, 0.5),
          0 3px 8px rgba(124, 92, 255, 0.3);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      }
      .lo-mini.primary:hover { background: linear-gradient(180deg, #c4b0ff 0%, #9a82ff 50%, #6a4eff 100%); }
      .lo-mini.danger {
        background: linear-gradient(180deg, #ff7a7a 0%, #ff4d4d 50%, #b22d2d 100%);
        border-color: #b22d2d;
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      }

      /* mod-mini — same treatment as lo-mini. */
      .mod-mini {
        background: linear-gradient(180deg, #1f2233 0%, #161929 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.07),
          0 1px 0 rgba(0, 0, 0, 0.4),
          0 2px 6px rgba(0, 0, 0, 0.25);
      }
      .mod-mini:hover:not(:disabled) {
        background: linear-gradient(180deg, #2a2f44 0%, #1f2233 100%);
      }
      .mod-mini.danger {
        background: linear-gradient(180deg, #ff7a7a 0%, #ff4d4d 50%, #b22d2d 100%);
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      }

      /* ── Tab strip ──
         Active tab gets a subtle gradient + inset highlight; inactive
         picks up a depressed-into-surface look. */
      .tabs button {
        background: linear-gradient(180deg, #11131c 0%, #0a0b12 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
      }
      .tabs button:hover:not(.active) {
        background: linear-gradient(180deg, #1a1d2e 0%, #11131c 100%);
        color: var(--fg);
      }
      .tabs button.active {
        background: linear-gradient(180deg, #2a2f44 0%, #161929 100%);
        border-color: #7c5cff;
        box-shadow:
          inset 0 1px 0 rgba(168, 130, 255, 0.35),
          0 0 0 1px rgba(124, 92, 255, 0.18),
          0 4px 10px rgba(124, 92, 255, 0.25);
        color: #fff;
      }

      /* ── Tile + card depth ──
         Adds a top inset highlight + soft bottom shadow to the
         home-screen tile (already has an accent left-edge) and the
         loadout cards. */
      .tile {
        background: linear-gradient(180deg, #161929 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 2px 8px rgba(0, 0, 0, 0.25);
        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
      }
      .tile:hover {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 4px 14px rgba(0, 0, 0, 0.35),
          0 0 0 1px var(--accent, #7c5cff);
      }
      .tile .dot {
        width: 8px; height: 8px;
        background: var(--accent, #7c5cff);
        box-shadow: 0 0 8px var(--accent, #7c5cff);
      }
      .lo-card {
        background: linear-gradient(180deg, #161929 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 2px 8px rgba(0, 0, 0, 0.2);
      }

      /* ── Stat boxes (HP / power / def / etc.) ── */
      .stat {
        background: linear-gradient(180deg, #1a1d2e 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 1px 2px rgba(0, 0, 0, 0.3);
      }
      .stat .v { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

      /* HP / power bar — glossy fill. */
      .bar { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
      .bar-fill {
        background: linear-gradient(180deg, #a98fff 0%, #7c5cff 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }
      .bar-fill.hp { background: linear-gradient(180deg, #ffb88e 0%, #ff4d4d 100%); }

      /* ── Quick-game picker ─ glossy active tile. */
      .qg-tile {
        background: linear-gradient(180deg, #1a1d2e 0%, #11131c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
      }
      .qg-tile:hover { transform: translateY(-1px); border-color: rgba(124, 92, 255, 0.5); }
      .qg-tile.active {
        background: linear-gradient(180deg, #2a2f44 0%, #161929 100%);
        border-color: #7c5cff;
        box-shadow:
          inset 0 1px 0 rgba(168, 130, 255, 0.35),
          0 0 0 1px rgba(124, 92, 255, 0.18),
          0 4px 10px rgba(124, 92, 255, 0.25);
      }

      /* ── Cheer button — bigger hit area + gradient ring on hover. */
      .cheer-btn {
        background: linear-gradient(180deg, #1a1d2e 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 2px 4px rgba(0, 0, 0, 0.3);
        transition: transform 120ms ease, box-shadow 120ms ease;
      }
      .cheer-btn:hover {
        transform: translateY(-1px) scale(1.04);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          0 4px 10px rgba(124, 92, 255, 0.35);
      }
      .cheer-btn.pulse { animation: aq-cheer-pulse 480ms ease-out; }
      @keyframes aq-cheer-pulse {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.14); }
        100% { transform: scale(1); }
      }

      /* ── Daily check-in card — premium gradient panel. */
      .ci-card {
        background:
          linear-gradient(160deg, rgba(168, 130, 255, 0.22) 0%, rgba(124, 92, 255, 0.08) 35%, var(--surface) 100%);
        box-shadow:
          inset 0 1px 0 rgba(168, 130, 255, 0.3),
          0 4px 14px rgba(124, 92, 255, 0.18);
      }
      .ci-input {
        background: linear-gradient(180deg, #0a0b12 0%, #11131c 100%);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
      }

      /* ── Feed row depth. */
      .feed-row {
        background: linear-gradient(180deg, #161929 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 1px 4px rgba(0, 0, 0, 0.25);
        transition: transform 120ms ease, box-shadow 120ms ease;
      }
      .feed-row:hover {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 4px 12px rgba(0, 0, 0, 0.35);
      }

      /* ── Boltbound preview card ──
         The t-boltbound tab renders a card-shape preview tile inside
         the bbBody/bbHeader cards. Whatever class JS applies, we
         lift any direct child .lo-card to the gradient + glow
         treatment so the Boltbound tab feels like a featured surface. */
      #bbHeader, #bbBody {
        background: linear-gradient(180deg, #1a1d2e 0%, #11131c 100%);
        box-shadow:
          inset 0 1px 0 rgba(154, 130, 255, 0.18),
          0 4px 14px rgba(124, 92, 255, 0.2);
        border-color: rgba(154, 130, 255, 0.35);
      }
      /* ── Scratch-off cards ─────────────────────────────────────── */
      #t-scratch { --scr-accent: #7c5cff; --scr-accent2: #22d3ee; }
      .scr-head { padding: 2px 2px 10px; }
      .scr-title {
        font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
        background: linear-gradient(92deg, var(--scr-accent), #ff6ab5 60%, var(--scr-accent2));
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      .scr-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
      .scr-stage { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

      .scr-card {
        position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 132px;
        border-radius: 16px; overflow: hidden;
        background: radial-gradient(120% 140% at 0% 0%, rgba(124,92,255,0.18), transparent 55%),
                    var(--surface-2);
        border: 1px solid var(--border-strong);
        box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
                    0 10px 30px -16px rgba(0,0,0,0.8),
                    0 0 0 1px color-mix(in srgb, var(--scr-accent) 22%, transparent);
      }
      .scr-card-buy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
      .scr-foil-static {
        position: absolute; inset: 14px; border-radius: 12px;
        background: linear-gradient(135deg, var(--scr-accent), #c8cddb 46%, #eef1f8 54%, var(--scr-accent2));
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        box-shadow: 0 2px 14px -4px rgba(0,0,0,0.4) inset;
      }
      .scr-foil-static::after {
        content: ""; position: absolute; inset: 0; border-radius: 12px;
        background: repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 14px);
        mix-blend-mode: overlay;
      }
      .scr-foil-label { font-size: 14px; font-weight: 800; color: rgba(10,11,18,0.82); z-index: 1; }
      .scr-foil-game { font-size: 10px; font-weight: 600; color: rgba(10,11,18,0.6); margin-top: 2px; z-index: 1; }
      .scr-tag {
        position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
        font-size: 10px; font-weight: 600; color: var(--muted);
      }

      .scr-buy {
        width: 100%; font-weight: 800; letter-spacing: 0.01em;
        background: linear-gradient(180deg, color-mix(in srgb, var(--scr-accent) 92%, white), var(--scr-accent));
        border: none; color: #0a0b12;
        box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--scr-accent) 80%, transparent);
        transition: transform var(--duration-fast) var(--ease-pop), filter var(--duration-fast);
      }
      .scr-buy:hover { filter: brightness(1.06); transform: translateY(-1px); }
      .scr-buy:active { transform: translateY(0) scale(0.99); }
      .scr-note { font-size: 11px; color: var(--muted); text-align: center; min-height: 14px; }
      .scr-note.bad { color: #ff8a9b; }
      .scr-buy.is-disabled, .scr-buy:disabled {
        filter: grayscale(0.55) brightness(0.75); cursor: not-allowed;
        box-shadow: none; transform: none;
      }
      .scr-buy.is-disabled:hover, .scr-buy:disabled:hover { filter: grayscale(0.55) brightness(0.75); transform: none; }

      /* Sound toggle, corner of the buy card. */
      .scr-mute {
        position: absolute; top: 7px; right: 8px; z-index: 5;
        width: 26px; height: 26px; border-radius: 8px; padding: 0;
        font-size: 13px; line-height: 1; cursor: pointer;
        background: color-mix(in srgb, var(--surface) 70%, transparent);
        border: 1px solid var(--border); color: var(--fg);
        transition: transform var(--duration-fast) var(--ease-pop), filter var(--duration-fast);
      }
      .scr-mute:hover { filter: brightness(1.12); transform: translateY(-1px); }
      .scr-mute:active { transform: scale(0.94); }

      /* Loss consolation chip + running tally footer. */
      .scr-consol {
        display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
        padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
        color: #ffd76a;
        background: color-mix(in srgb, #ffb454 16%, transparent);
        border: 1px solid color-mix(in srgb, #ffb454 45%, transparent);
      }
      .scr-bolt { font-size: 11px; filter: drop-shadow(0 0 4px rgba(255,180,84,0.7)); }
      .scr-consol-foot {
        margin-top: 10px; text-align: center; font-size: 11px; font-weight: 600;
        color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 5px;
      }

      .scr-card-live { touch-action: none; cursor: grab; }
      .scr-card-live:active { cursor: grabbing; }
      .scr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; border-radius: 16px; }
      .scr-hint {
        position: absolute; z-index: 4; bottom: 8px; left: 0; right: 0; text-align: center;
        font-size: 10px; font-weight: 700; color: rgba(10,11,18,0.7); pointer-events: none;
        transition: opacity 240ms ease;
      }
      .scr-reveal {
        position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        padding: 14px; text-align: center;
        background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--scr-accent) 24%, transparent), transparent 60%), var(--surface);
      }
      .scr-reveal-inner { display: flex; flex-direction: column; gap: 4px; align-items: center; }
      .scr-reveal-state { font-size: 22px; font-weight: 900; letter-spacing: 0.02em; }
      .scr-reveal-state.win {
        background: linear-gradient(92deg, #ffd76a, #ffb454, #ff6ab5);
        -webkit-background-clip: text; background-clip: text; color: transparent;
        filter: drop-shadow(0 0 10px rgba(255,180,84,0.5));
      }
      .scr-reveal-state.lose { color: var(--muted); }
      .scr-reveal-kind {
        font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--scr-accent2);
        text-transform: uppercase;
      }
      .scr-reveal-body { font-size: 12px; font-weight: 600; color: var(--fg); max-width: 230px; line-height: 1.3; }
      .scr-reveal-foot { font-size: 10px; color: var(--muted); margin-top: 2px; }
      .scr-won { box-shadow: 0 0 0 1px rgba(255,180,84,0.5), 0 0 28px -6px rgba(255,180,84,0.5); }
      .scr-lost { opacity: 0.96; }

      .scr-prog { height: 6px; border-radius: 6px; background: var(--surface); overflow: hidden; border: 1px solid var(--border); }
      .scr-prog-fill {
        height: 100%; width: 0%; border-radius: 6px;
        background: linear-gradient(90deg, var(--scr-accent), var(--scr-accent2));
        transition: width 120ms linear;
      }
      .scr-back { align-self: flex-start; }

      .scr-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
      .scr-spark {
        position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%;
        background: radial-gradient(circle, #ffe39a, #ffb454);
        animation: scrSpark 1100ms var(--ease-pop) forwards;
      }
      @keyframes scrSpark {
        0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
        100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.9); opacity: 0; }
      }

      .scr-inv { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
      .scr-inv-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
      .scr-inv-row {
        display: flex; align-items: center; gap: 9px; padding: 8px 10px;
        background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
      }
      .scr-inv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
      .scr-inv-dot.new { background: var(--scr-accent2); box-shadow: 0 0 8px var(--scr-accent2); }
      .scr-inv-dot.win { background: #ffb454; box-shadow: 0 0 8px rgba(255,180,84,0.6); }
      .scr-inv-dot.lose { background: var(--border-strong); }
      .scr-inv-mid { flex: 1; min-width: 0; }
      .scr-inv-game { font-size: 12px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .scr-inv-state { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      @media (prefers-reduced-motion: reduce) {
        .scr-spark { animation-duration: 1ms; }
        .scr-buy { transition: none; }
      }

      /* ══════════ V1 Classic lottery face (scratch redesign) ══════════
         Clay-approved: every active game + the workout category renders as a
         real scratch-off lottery ticket. Slot = category selector + compact
         preview + Buy; the full portrait ticket scratches in a modal. */

      /* Game / Workout selector */
      .scr-cat { display: flex; gap: 6px; margin-bottom: 10px; }
      .scr-cat-btn {
        flex: 1; appearance: none; cursor: pointer; padding: 7px 10px; border-radius: 9px;
        font: 700 12px/1 inherit; letter-spacing: 0.02em;
        background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
        transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
      }
      .scr-cat-btn:hover { color: var(--fg); }
      .scr-cat-btn.active {
        color: #0a0b12; border-color: transparent; font-weight: 800;
        background: linear-gradient(180deg, var(--scr-accent), var(--scr-accent2));
        box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--scr-accent) 80%, transparent);
      }
      .scr-now { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: 9px; letter-spacing: 0.02em; }

      /* Shared lottery face tokens */
      .scr-lot {
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
      }
      .scr-lot-frame {
        position: relative; background: var(--scr-paper);
        background-image:
          repeating-linear-gradient(45deg, color-mix(in srgb, var(--scr-accent) 12%, transparent) 0 1px, transparent 1px 9px),
          repeating-linear-gradient(-45deg, color-mix(in srgb, var(--scr-accent) 9%, transparent) 0 1px, transparent 1px 9px);
        box-shadow:
          inset 0 0 0 4px var(--scr-accent), inset 0 0 0 6px var(--scr-paper),
          inset 0 0 0 9px color-mix(in srgb, var(--scr-accent2) 70%, var(--scr-paper));
      }
      .scr-lot-frame::before {
        content: ""; position: absolute; inset: 0; background: var(--grain);
        mix-blend-mode: multiply; opacity: 0.06; pointer-events: none;
      }
      .scr-lot-top { display: flex; justify-content: space-between; align-items: center; }
      .scr-lot-price {
        background: linear-gradient(180deg, var(--scr-accent), var(--scr-accent2));
        color: #0a0b12; font-weight: 900; padding: 5px 11px; border-radius: 8px;
        letter-spacing: 0.02em; box-shadow: 0 2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
      }
      .scr-lot-ed { font-weight: 700; letter-spacing: 0.1em; color: #5b5f6b; }
      .scr-lot-brand { text-align: center; font-weight: 800; letter-spacing: 0.3em; color: var(--scr-accent2); }
      .scr-lot-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
      .scr-lot-icon { color: var(--scr-accent2); flex: none; display: block; }
      .scr-lot-icon svg { display: block; width: 100%; height: 100%; }
      .scr-lot-title {
        font-family: "Arial Black", "Segoe UI", sans-serif; font-weight: 900; letter-spacing: -0.01em;
        line-height: 0.95; text-align: center;
        background: linear-gradient(180deg, #fff 0%, var(--scr-accent) 45%, var(--scr-accent2) 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1.5px var(--scr-deep); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.22));
      }
      .scr-lot-stars { display: flex; gap: 5px; justify-content: center; }
      .scr-lot-stars span {
        width: 11px; height: 11px; flex: none;
        background: var(--scr-accent);
        clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
      }
      .scr-lot-win {
        margin: 0 auto; display: flex; flex-direction: column; align-items: center; width: fit-content;
        background: linear-gradient(180deg, var(--scr-deep), color-mix(in srgb, var(--scr-deep) 60%, #000));
        color: #fff; border-radius: 9px; box-shadow: 0 3px 0 rgba(0,0,0,0.3);
      }
      .scr-lot-win-l { font-weight: 800; letter-spacing: 0.2em; color: var(--scr-accent); }
      .scr-lot-win-p { font-weight: 900; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--scr-accent) 60%, transparent); }
      .scr-lot-play {
        background: color-mix(in srgb, var(--scr-accent) 8%, #fff);
        border: 2px dashed color-mix(in srgb, var(--scr-accent2) 55%, transparent); border-radius: 11px;
      }
      .scr-lot-play-h { text-align: center; font-weight: 900; letter-spacing: 0.14em; color: var(--scr-accent2); }
      .scr-lot-legend { background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
      .scr-lot-legend-h { font-weight: 900; letter-spacing: 0.16em; color: var(--scr-accent2); text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1); }
      .scr-lg-row { display: flex; justify-content: space-between; gap: 8px; }
      .scr-lg-sym { font-weight: 800; color: #8a8f9b; letter-spacing: 0.05em; }
      .scr-lg-prize { font-weight: 800; color: #23262e; text-align: right; }
      .scr-lot-tag { text-align: center; font-weight: 800; font-style: italic; letter-spacing: 0.14em; color: var(--scr-accent2); }
      .scr-lot-foot { border-top: 1px solid rgba(0,0,0,0.12); }
      .scr-lot-fine { color: #7b7f8a; font-weight: 600; text-align: justify; }
      .scr-lot-foot-row { display: flex; justify-content: space-between; align-items: flex-end; }
      .scr-lot-bars { display: flex; align-items: flex-end; gap: 1px; height: 30px; }
      .scr-lot-bars span { display: block; background: #111; height: 100%; }
      .scr-lot-serial { font-family: "Consolas", monospace; color: #3a3d46; text-align: right; line-height: 1.4; font-weight: 700; }
      /* Brushed-foil strip (preview "scratch panel" graphic, non-interactive) */
      .scr-lot-strip {
        position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
        background:
          repeating-linear-gradient(118deg, rgba(255,255,255,0.22) 0 2px, transparent 2px 6px),
          linear-gradient(100deg, #a9aeb9 0%, #eef1f6 26%, #a4a9b4 50%, #f6f8fc 72%, #9ca1ad 100%);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 3px 8px rgba(255,255,255,0.55), inset 0 -4px 9px rgba(0,0,0,0.2);
      }
      .scr-lot-strip span { font-weight: 900; letter-spacing: 0.3em; color: rgba(40,44,54,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
      .scr-lot-cell {
        aspect-ratio: 1; border-radius: 6px; position: relative; overflow: hidden;
        background:
          repeating-linear-gradient(118deg, rgba(255,255,255,0.20) 0 2px, transparent 2px 5px),
          linear-gradient(135deg, #aeb2bd 0%, #eef1f6 30%, #a7acb7 48%, #f6f8fc 64%, #9ea3af 100%);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), inset 0 2px 6px rgba(255,255,255,0.5), inset 0 -3px 7px rgba(0,0,0,0.22);
      }

      /* Compact slot preview sizing */
      .scr-lot-preview .scr-lot-frame { padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
      .scr-lot-preview .scr-lot-ed { font-size: 8px; }
      .scr-lot-preview .scr-lot-price { font-size: 13px; padding: 4px 9px; }
      .scr-lot-preview .scr-lot-icon { width: 30px; height: 30px; }
      .scr-lot-preview .scr-lot-title { font-size: 28px; }
      .scr-lot-preview .scr-lot-strip { height: 46px; border-radius: 9px; }
      .scr-lot-preview .scr-lot-strip span { font-size: 12px; }
      .scr-lot-preview .scr-lot-tag { font-size: 10px; }

      /* Full portrait ticket (modal) sizing */
      .scr-lot-full { width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px -16px rgba(0,0,0,0.7); }
      .scr-lot-full .scr-lot-frame { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 9px; }
      .scr-lot-full .scr-lot-ed { font-size: 9px; }
      .scr-lot-full .scr-lot-price { font-size: 15px; }
      .scr-lot-full .scr-lot-brand { font-size: 10px; margin-top: 2px; }
      .scr-lot-full .scr-lot-icon { width: 50px; height: 50px; }
      .scr-lot-full .scr-lot-title { font-size: 42px; }
      .scr-lot-full .scr-lot-win { padding: 7px 18px; }
      .scr-lot-full .scr-lot-win-l { font-size: 10px; }
      .scr-lot-full .scr-lot-win-p { font-size: 23px; }
      .scr-lot-full .scr-lot-play { padding: 11px; display: flex; flex-direction: column; gap: 10px; }
      .scr-lot-full .scr-lot-play-h { font-size: 12px; }
      .scr-lot-full .scr-lot-legend { padding: 7px 9px; }
      .scr-lot-full .scr-lot-legend-h { font-size: 9px; margin-bottom: 5px; padding-bottom: 4px; }
      .scr-lot-full .scr-lg-row { font-size: 10px; padding: 2px 0; }
      .scr-lot-full .scr-lot-tag { font-size: 12px; }
      .scr-lot-full .scr-lot-fine { font-size: 8px; line-height: 1.45; }
      .scr-lot-full .scr-lot-foot { margin-top: 2px; padding-top: 8px; }
      .scr-lot-full .scr-lot-foot-row { margin-top: 7px; }
      .scr-lot-full .scr-lot-serial { font-size: 8.5px; }
      .scr-lot-full .scr-prog { margin: 10px 14px 0; }
      .scr-lot-full .scr-back { margin: 10px 14px 14px; }

      /* Interactive play-zone: holds the reveal underneath + scratch canvas */
      .scr-pz {
        position: relative; width: 100%; min-height: 150px; border-radius: 9px; overflow: hidden;
        touch-action: none; cursor: grab;
      }
      .scr-pz:active { cursor: grabbing; }
      .scr-pz.scr-won { box-shadow: 0 0 0 1px rgba(255,180,84,0.5), 0 0 26px -6px rgba(255,180,84,0.5); }
      .scr-pz .scr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; border-radius: 9px; }
      .scr-pz .scr-reveal { border-radius: 9px; }

      /* Modal host */
      .scr-modal {
        position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
        padding: 16px; background: rgba(6, 7, 12, 0.82); backdrop-filter: blur(6px);
        animation: scrModalIn 160ms ease;
      }
      @keyframes scrModalIn { from { opacity: 0; } to { opacity: 1; } }
      .scr-modal-inner { width: 100%; max-width: 360px; max-height: 92vh; overflow-y: auto; }
      .scr-modal-card { width: 100%; }
      .scr-lot-full .scr-back { width: calc(100% - 28px); }

      /* Workout win: recolor the reveal to the Classic Gym (red/white) look
         and fly a dumbbell badge. The ticket's --scr-accent vars are swapped
         to red inline by scrShowOutcome, so the WINNER text + frame follow. */
      .scr-pz-workout {
        background:
          radial-gradient(120% 120% at 50% 0%, rgba(226, 59, 59, 0.30), transparent 60%),
          repeating-linear-gradient(45deg, rgba(226, 59, 59, 0.10) 0 10px, rgba(255, 255, 255, 0.04) 10px 20px),
          var(--surface) !important;
      }
      .scr-reveal-badge {
        width: 40px; height: 40px; margin: 0 auto 2px; color: #e23b3b;
        filter: drop-shadow(0 0 10px rgba(226, 59, 59, 0.55));
        animation: scrBadgePop 360ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
      }
      .scr-reveal-badge svg { display: block; width: 100%; height: 100%; }
      @keyframes scrBadgePop {
        0% { transform: scale(0.2) rotate(-18deg); opacity: 0; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce) { .scr-reveal-badge { animation: none; } }




      /* ── Blackjack ─────────────────────────────────────────────── */
      .bj-hand { margin: 10px 0; }
      .bj-hand-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
      .bj-cards { display: flex; gap: 6px; flex-wrap: wrap; }
      .bj-card { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 46px; padding: 0 6px; border-radius: 7px; background: #f5f5f7; color: #14151c; font-weight: 800; font-size: 15px; border: 1px solid #d0d0d8; }
      .bj-card.bj-red { color: #d11; }
      .bj-card.bj-back { background: linear-gradient(135deg, #3a2f6e, #7c5cff); color: #fff; border-color: var(--border-strong); }
      .bj-actions { display: flex; gap: 8px; margin-top: 12px; }
      .bj-actions .lo-btn { margin-top: 0; }
      .bj-result { margin: 10px 0; padding: 8px 10px; border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center; }
      .bj-win { background: rgba(91,255,149,.12); color: var(--green); border: 1px solid rgba(91,255,149,.3); }
      .bj-push { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
      .bj-lose { background: rgba(255,90,90,.1); color: #ff8a8a; border: 1px solid rgba(255,90,90,.3); }
      .bj-bet { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
      .bj-bet-lab { font-size: 12px; color: var(--muted); }

      /* ── My Card customizer ────────────────────────────────────── */
      .mc-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
      .mc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
      .mc-chip { padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg); font-size: 12px; font-weight: 600; cursor: pointer; }
      .mc-chip.sel { background: var(--primary); border-color: var(--primary-bright); }
      .mc-chip.locked, .mc-chip:disabled { opacity: .5; cursor: default; }

      /* ──────────────────────────────────────────────────────────────
         PREMIUM PASS v3 — 2026-07
         A unified motion language + celebratory game feedback layered on
         v2. Tokened durations/easings, snappier tactile press/hover, 3D
         coin/die landings, a confetti burst for wins, richer win/lose
         feedback, and skeleton utilities. Later @keyframes/rules override
         the earlier ones on purpose. Kinetic bits respect reduced-motion.
         ────────────────────────────────────────────────────────────── */
      :root {
        --dur-micro: 90ms;
        --dur-quick: 130ms;
        --dur-base: 200ms;
        --dur-slow: 320ms;
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-spring: cubic-bezier(0.25, 1.2, 0.4, 1);
      }

      /* Tactile press + lift across every interactive surface. */
      .lo-btn, .lo-mini, .vote-btn, .cheer-btn, .tile, .tabs button, .lo-btn-free, .mc-chip {
        transition: transform var(--dur-quick) var(--ease-snap),
                    box-shadow var(--dur-base) var(--ease-out),
                    background-color var(--dur-base) var(--ease-out),
                    border-color var(--dur-base) var(--ease-out),
                    filter var(--dur-base) var(--ease-out);
      }
      .lo-btn:active:not(:disabled), .lo-mini:active:not(:disabled),
      .vote-btn:active:not(.is-disabled), .cheer-btn:active, .tile:active,
      .tabs button:active, .mc-chip:active { transform: scale(0.95); }
      .lo-btn:hover:not(:disabled), .lo-mini:hover:not(:disabled), .tile:hover { transform: translateY(-2px); }

      /* 3D coin flip with a landing settle. */
      .pb-coin {
        animation: pb-coin 900ms var(--ease-out) both;
        transform-style: preserve-3d;
        box-shadow: 0 4px 10px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14) inset;
      }
      @keyframes pb-coin {
        0%   { transform: rotateY(0) scale(.9); }
        70%  { transform: rotateY(1620deg) scale(1.06); }
        85%  { transform: rotateY(1710deg) scale(.98); }
        100% { transform: rotateY(1800deg) scale(1); }
      }

      /* Die: tumble on two axes, settle with a bounce. */
      .pb-die { animation: pb-die 820ms var(--ease-out) both; transform-style: preserve-3d; }
      @keyframes pb-die {
        0%   { transform: rotateX(0) rotateY(0) scale(.6); opacity: .4; }
        65%  { transform: rotateX(360deg) rotateY(300deg) scale(1.12); opacity: 1; }
        82%  { transform: rotateX(360deg) rotateY(340deg) scale(.96); }
        100% { transform: rotateX(360deg) rotateY(360deg) scale(1); }
      }

      /* Reels: drop-in without GPU-costly blur. */
      .pb-reels { animation: pb-reels 900ms var(--ease-out) both; }
      @keyframes pb-reels {
        0%   { opacity: .3; transform: translateY(-10px) scale(.96); }
        70%  { opacity: 1;  transform: translateY(2px) scale(1.01); }
        100% { opacity: 1;  transform: translateY(0) scale(1); }
      }

      /* Wheel: keep the spin, add a settle. */
      @keyframes pb-wheel {
        0%   { transform: rotate(0deg) scale(.7); opacity: .4; }
        80%  { transform: rotate(1120deg) scale(1.05); opacity: 1; }
        100% { transform: rotate(1080deg) scale(1); opacity: 1; }
      }

      /* Win/lose feedback with more presence. */
      .pb-card-win, .bj-win { animation: pb-win-glow 900ms var(--ease-out); }
      @keyframes pb-win-glow {
        0%   { box-shadow: 0 0 0 0 rgba(70,209,96,0); transform: scale(1); }
        35%  { box-shadow: 0 0 22px 2px rgba(70,209,96,.55); transform: scale(1.02); }
        100% { box-shadow: 0 0 0 0 rgba(70,209,96,0); transform: scale(1); }
      }
      .pb-card-lose, .bj-lose { animation: pb-lose-shake 480ms var(--ease-out); }
      @keyframes pb-lose-shake {
        0%,100% { transform: translateX(0); }
        20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
        60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
      }

      /* Confetti burst — spawned by JS aqCelebrate(). */
      .aq-confetti { position: fixed; z-index: 99999; pointer-events: none; }
      .aq-confetti i {
        position: absolute; top: 0; left: 0; width: 7px; height: 7px;
        border-radius: 1px; opacity: 0;
        animation: aq-confetti-fly 950ms var(--ease-out) forwards;
      }
      @keyframes aq-confetti-fly {
        0%   { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
        100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.35); }
      }

      /* Skeleton line utility (JS aqSkel). */
      .aq-skel-line { height: 12px; margin: 8px 0; border-radius: 6px; }
      .aq-skel-line.tall { height: 42px; }
      .aq-skel-line.sm { height: 9px; width: 60%; }

      /* Tab body reveal — re-applied on every switch for a smooth handoff. */
      .lo-tab.lo-reveal { animation: lo-reveal 240ms var(--ease-out) both; }

      /* Number count-up highlight. */
      .aq-countup { transition: color var(--dur-base) var(--ease-out); }

      @media (prefers-reduced-motion: reduce) {
        .pb-coin, .pb-die, .pb-reels, .pb-wheel, .pb-card-win, .pb-card-lose,
        .bj-win, .bj-lose, .aq-confetti i, .lo-tab.lo-reveal { animation: none !important; }
        .lo-btn, .lo-mini, .vote-btn, .cheer-btn, .tile, .tabs button, .mc-chip {
          transition: none !important;
        }
      }

      /* ── Per-game choreography (v3.1) ────────────────────────────── */
      /* Blackjack: cards deal in with a stagger. */
      .bj-card { animation: bj-deal 340ms var(--ease-out) both; }
      .bj-cards .bj-card:nth-child(2) { animation-delay: 55ms; }
      .bj-cards .bj-card:nth-child(3) { animation-delay: 110ms; }
      .bj-cards .bj-card:nth-child(4) { animation-delay: 165ms; }
      .bj-cards .bj-card:nth-child(5) { animation-delay: 220ms; }
      .bj-cards .bj-card:nth-child(n+6) { animation-delay: 275ms; }
      @keyframes bj-deal {
        from { opacity: 0; transform: translateY(-10px) rotate(-6deg) scale(.9); }
        to   { opacity: 1; transform: none; }
      }

      /* Hangman: correct-guess word pulse + wrong-guess card shake. */
      .hg-hit { animation: hg-hit 520ms var(--ease-out); }
      @keyframes hg-hit {
        0%, 100% { transform: scale(1); text-shadow: none; }
        40%      { transform: scale(1.06); text-shadow: 0 0 14px rgba(91,255,149,.7); }
      }
      .hg-miss { animation: pb-lose-shake 460ms var(--ease-out); }

      /* Rotation queue: rows cascade in (first row = 2nd child, no delay). */
      .rot-q-row { animation: lo-reveal 260ms var(--ease-out) both; }
      .rot-q-row:nth-child(3) { animation-delay: 45ms; }
      .rot-q-row:nth-child(4) { animation-delay: 90ms; }
      .rot-q-row:nth-child(5) { animation-delay: 135ms; }
      .rot-q-row:nth-child(n+6) { animation-delay: 180ms; }

      @media (prefers-reduced-motion: reduce) {
        .bj-card, .hg-hit, .hg-miss, .rot-q-row { animation: none !important; }
      }

      /* ── Idle deck: 3D swipeable card gallery (idle-deck.js) ─────── */
      /* When the deck mounts, it replaces the classic stacked public
         view (countdown card, link tiles, feed). Those stay in the DOM
         as the no-JS / deck-failure fallback. */
      body.deck-on #schedCard,
      body.deck-on #tilesPublic,
      body.deck-on #latest { display: none; }

      #idleDeck { margin-bottom: 12px; }
      .deck {
        position: relative;
        margin: 0 -12px;            /* bleed to the panel edge */
        overflow: hidden;
        outline: none;
      }
      .deck-stage {
        position: relative;
        height: 336px;
        perspective: 900px;
        touch-action: pan-y;        /* vertical scroll passes through */
        user-select: none;
        -webkit-user-select: none;
      }
      .deck-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 78%;
        max-width: 252px;
        height: 316px;
        border-radius: 14px;
        background: linear-gradient(160deg, var(--surface-2), var(--surface) 55%, #0d0f18);
        border: 1px solid var(--border-strong);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 92, 255, 0.06) inset;
        overflow: hidden;
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }
      .deck-card.is-front {
        border-color: rgba(124, 92, 255, 0.45);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(124, 92, 255, 0.14);
      }
      .deck-card:not(.is-front) { cursor: pointer; }
      .deck.is-dragging .deck-card { cursor: grabbing; }
      .deck-card-body {
        height: 100%;
        padding: 14px 14px 12px;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .deck-card-h {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      .deck-card-sub {
        margin-top: 3px;
        font-size: 10px;
        color: var(--muted);
      }

      /* Nav row: chevrons + dots + label */
      .deck-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
        padding: 0 12px;
      }
      .deck-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
      }
      .deck-arrow:hover { color: var(--fg); border-color: var(--border-strong); }
      .deck-dots { display: flex; align-items: center; gap: 6px; }
      .deck-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: var(--border-strong);
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease;
      }
      .deck-dot.active {
        background: var(--primary-bright);
        transform: scale(1.35);
        box-shadow: 0 0 8px rgba(154, 130, 255, 0.6);
      }
      .deck-nav-label {
        display: block;
        text-align: center;
        margin-top: 5px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* Countdown card */
      .deck-countdown { justify-content: center; text-align: center; }
      .deck-cd-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      .deck-live-dot {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary-bright);
      }
      .deck-live-dot::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: inherit;
        opacity: 0.45;
        animation: schedPing 1.6s ease-out infinite;
      }
      .deck-cd-h {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .deck-cd-big {
        margin-top: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .deck-cd-sub { margin-top: 8px; font-size: 11px; color: var(--muted); }
      .deck-countdown.is-live .deck-live-dot { background: #ff5c5c; }
      .deck-countdown.is-live .deck-cd-big { color: #ff7a7a; }
      .deck-pill {
        display: block;
        margin-top: 14px;
        padding: 8px 10px;
        border-radius: 9px;
        background: rgba(124, 92, 255, 0.16);
        border: 1px solid rgba(124, 92, 255, 0.5);
        color: #d4c2ff;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
      }
      .deck-pill:hover { background: rgba(124, 92, 255, 0.26); }
      .deck-pill[hidden] { display: none; }

      /* Emote card */
      .deck-emote-grid {
        margin-top: 10px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: grid;
        /* minmax(0,1fr): long emote names must ellipsize, never widen
           the column past its quarter of the card. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px 4px;
        align-content: start;
        scrollbar-width: thin;
      }
      .deck-emote {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
      }
      .deck-emote img {
        width: 40px;
        height: 40px;
        image-rendering: auto;
      }
      .deck-emote-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 8px;
        color: var(--muted);
      }

      /* Week card */
      .deck-week-list {
        margin-top: 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        scrollbar-width: thin;
      }
      .deck-week-row {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 4px 7px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid transparent;
        font-size: 11px;
      }
      .deck-week-row.is-today {
        background: rgba(124, 92, 255, 0.12);
        border-color: rgba(124, 92, 255, 0.4);
      }
      .deck-week-day {
        width: 26px;
        flex: 0 0 auto;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .deck-week-row.is-today .deck-week-day { color: var(--primary-bright); }
      .deck-week-art {
        width: 26px;
        height: 15px;
        border-radius: 3px;
        object-fit: cover;
        flex: 0 0 auto;
      }
      .deck-week-game {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
      }
      .deck-week-time {
        flex: 0 0 auto;
        font-size: 9px;
        color: var(--muted);
      }

      /* Watch-everywhere + explore cards */
      .deck-watch-list {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .deck-watch-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 9px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--fg);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
      }
      .deck-watch-row:hover { border-color: var(--accent, var(--border-strong)); }
      .deck-watch-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent, var(--primary));
        box-shadow: 0 0 8px var(--accent, var(--primary));
        flex: 0 0 auto;
      }
      .deck-watch-count {
        margin-left: auto;
        font-size: 9px;
        font-weight: 600;
        color: var(--muted);
        white-space: nowrap;
      }
      .deck-explore-list {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .deck-explore-tile {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 9px;
        border-radius: 9px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--fg);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
      }
      .deck-explore-tile:hover { border-color: var(--accent, var(--border-strong)); }

      /* Feed card */
      .deck-feed-list {
        margin-top: 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 5px;
        scrollbar-width: thin;
      }
      .deck-feed-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 7px 9px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.025);
        text-decoration: none;
      }
      .deck-feed-row:hover { background: rgba(124, 92, 255, 0.1); }
      .deck-feed-title {
        font-size: 11px;
        font-weight: 600;
        color: var(--fg);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .deck-feed-time { font-size: 9px; color: var(--muted); }

      /* Offline slot at the top of the Loadout view */
      .deck-loadout-slot { margin-bottom: 12px; }
      .deck-loadout-h {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 6px;
      }

      /* Web embed (aquilo.gg/panel iframe) gets a little more air */
      .deck-web .deck-stage { height: 368px; }
      .deck-web .deck-card { height: 348px; max-width: 264px; }

      /* ── Streaks tab + Recent clips (2026-07-07) ─────────────────── */
      .streaks-me {
        background: rgba(124, 92, 255, 0.14);
        border-radius: 8px;
        outline: 1px solid rgba(124, 92, 255, 0.45);
      }
      .clip-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px;
        margin-top: 6px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.025);
        text-decoration: none;
      }
      .clip-row:hover { background: rgba(124, 92, 255, 0.1); }
      .clip-thumb {
        width: 74px;
        height: 42px;
        border-radius: 6px;
        object-fit: cover;
        flex: 0 0 auto;
        background: #0a0b12;
      }
      .clip-meta { min-width: 0; }
      .clip-title {
        font-size: 11px;
        font-weight: 600;
        color: var(--fg);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .clip-sub { margin-top: 2px; font-size: 9px; color: var(--muted); }

      /* ── Shared cross-platform chat tab (2026-07-08) ─────────────── */
      .chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
      .chat-status {
        width: 8px; height: 8px; border-radius: 50%; margin-left: auto;
        background: var(--muted); flex: 0 0 auto;
      }
      .chat-status.chat-live { background: var(--green); box-shadow: 0 0 8px var(--green); }
      .chat-status.chat-connecting { background: var(--amber); }
      .chat-status.chat-down { background: #ff5c5c; }
      .chat-scroll {
        max-height: 360px; overflow-y: auto; display: flex; flex-direction: column;
        gap: 5px; scrollbar-width: thin; padding-right: 2px;
      }
      .chat-row {
        font-size: 12.5px; line-height: 1.4; word-break: break-word;
        padding: 3px 6px; border-radius: 7px; background: rgba(255,255,255,0.025);
      }
      .chat-badge {
        display: inline-block; width: 7px; height: 7px; border-radius: 50%;
        margin-right: 6px; vertical-align: middle;
      }
      .chat-name { font-weight: 700; }
      .chat-name::after { content: ":"; opacity: 0.5; font-weight: 400; }
      .chat-text { color: var(--fg); }

      /* ══ Live-layout UX pass (2026-07-08): scroll-strip tabs with a
           sliding pill indicator + directional content transitions ══ */
      #loTabs.tabs {
        display: flex;
        grid-template-columns: none;      /* override the old 4-col grid */
        gap: 2px;
        padding: 3px;
        margin-bottom: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        position: relative;
        background: linear-gradient(180deg, rgba(20,22,33,0.72), rgba(20,22,33,0.28));
        border: 1px solid var(--border);
        border-radius: 999px;
      }
      #loTabs.tabs::-webkit-scrollbar { display: none; }
      #loTabs.tabs button {
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
        height: 32px;
        padding: 0 12px;
        white-space: nowrap;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: color 180ms ease, transform 120ms ease;
      }
      #loTabs.tabs button:hover { color: var(--fg); background: transparent; }
      #loTabs.tabs button.active {
        color: #fff;
        background: transparent;       /* the sliding pill provides the fill */
        border-color: transparent;
      }
      #loTabs.tabs button:active { transform: scale(0.92); }
      #loTabs .tab-ind {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 32px;
        border-radius: 999px;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(124,92,255,0.42), rgba(124,92,255,0.14));
        box-shadow: 0 0 14px rgba(124,92,255,0.4), 0 1px 0 rgba(255,255,255,0.12) inset;
        transition: transform 340ms cubic-bezier(.22,1,.36,1), width 340ms cubic-bezier(.22,1,.36,1);
      }

      /* Directional tab-body transition — slides in the way you're moving. */
      @keyframes lo-slide-r { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
      @keyframes lo-slide-l { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
      .lo-slide-r { animation: lo-slide-r 300ms cubic-bezier(.22,1,.36,1) both; }
      .lo-slide-l { animation: lo-slide-l 300ms cubic-bezier(.22,1,.36,1) both; }

      @media (prefers-reduced-motion: reduce) {
        #loTabs.tabs { scroll-behavior: auto; }
        #loTabs .tab-ind { transition: none; }
        .lo-slide-r, .lo-slide-l { animation: none; }
      }

      /* ── Scratch-Off tab ─────────────────────────────────────────── */
      .scr-bal { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
      .scr-bal-n { font-size: 22px; font-weight: 800; }
      .scr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
      .scr-cell {
        position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
        background: var(--surface-2); border: 1px solid var(--border-strong);
        display: flex; align-items: center; justify-content: center; overflow: hidden;
        cursor: pointer;
      }
      .scr-cell.scr-empty { cursor: default; opacity: 0.5; }
      .scr-foil {
        position: absolute; inset: 0; border-radius: 10px;
        background: linear-gradient(135deg, #b9c2d6, #7c8598 40%, #aeb7c9 60%, #6b7386);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition: opacity 220ms ease, transform 220ms ease;
      }
      .scr-foil::after {
        content: "?"; position: absolute; inset: 0; display: flex;
        align-items: center; justify-content: center;
        font-weight: 800; font-size: 20px; color: rgba(20, 24, 36, 0.5);
      }
      .scr-foil.gone { opacity: 0; transform: scale(0.6); pointer-events: none; }
      .scr-res {
        text-align: center; font-weight: 800; font-size: 15px;
        padding: 8px; border-radius: 10px; margin: 4px 0 10px;
      }
      .scr-res.win { color: var(--green); background: rgba(91, 255, 149, 0.1); }
      .scr-res.lose { color: var(--muted); background: rgba(148, 163, 184, 0.08); }

      /* ── PowerDeck tab ───────────────────────────────────────────── */
      .pd-pack, .pd-hand {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
        gap: 8px; margin: 8px 0 4px;
      }
      .pd-card {
        border-radius: 10px; padding: 10px; background: var(--surface-2);
        border: 1px solid var(--border-strong); position: relative;
        display: flex; flex-direction: column; gap: 4px;
      }
      .pd-card.pd-rare { border-color: #3f6bd6; box-shadow: 0 0 0 1px rgba(90, 160, 255, 0.25); }
      .pd-card.pd-epic { border-color: #8a4fd6; box-shadow: 0 0 12px -2px rgba(192, 123, 255, 0.4); }
      .pd-rarity { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
      .pd-card.pd-rare .pd-rarity { color: #7fb0ff; }
      .pd-card.pd-epic .pd-rarity { color: #c9a2ff; }
      .pd-title { font-weight: 800; font-size: 13px; }
      .pd-desc { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
      .pd-card .lo-mini { margin-top: 6px; align-self: flex-start; }
      @media (prefers-reduced-motion: reduce) {
        .scr-foil { transition: none; }
      }