/* ═══════════════════════════════════════════════════════════════
       BRAND VARIABLES — edit these to rebrand for a customer
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --brand:       #e0413e;            /* primary accent colour      */
      --brand-dark:  #b8302d;            /* darker shade for hover     */
      --brand-glow:  rgba(224,65,62,.18); /* glow / border tint       */
      --brand-dim:   rgba(224,65,62,.07); /* subtle background fill   */
      /* ── Backgrounds ── */
      --bg:   #0b0b0e;
      --bg2:  #111116;
      --bg3:  #18181f;
      /* ── Borders ── */
      --ln:   #242430;
      --ln2:  #32323f;
      /* ── Text ── */
      --t:    #e2e2ee;
      --t2:   #8e8e9c;
      --t3:   #52525e;
      /* ── Status ── */
      --green: #10b981;
      --red:   #ef4444;
      --blue:  #3b82f6;
    }
    /* ═══════════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; background: var(--bg); color: var(--t); font-family: 'Inter', sans-serif; font-size: 13px; }
    button { cursor: pointer; border: none; outline: none; font-family: inherit; }
    input  { outline: none; border: none; font-family: inherit; }
    img    { display: block; }

    /* ── Topbar ── */
    #topbar {
      position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 100;
      background: rgba(11,11,14,.96); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--ln);
      display: flex; align-items: center; padding: 0 22px; gap: 14px;
    }
    .tb-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
    .tb-logo-mark {
      width: 30px; height: 30px; border-radius: 6px;
      background: var(--brand); display: flex; align-items: center; justify-content: center;
    }
    .tb-logo-name {
      font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px;
    }
    .tb-chip {
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
      color: var(--green); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.32);
      border-radius: 3px; padding: 2px 7px;
    }
    .tb-center {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px;
    }
    .tb-pill {
      display: flex; align-items: center; gap: 6px;
      background: var(--bg2); border: 1px solid var(--ln); border-radius: 20px;
      padding: 4px 12px; font-size: 11px; color: var(--t2);
    }
    .tb-pill .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }
    .tb-pill strong { color: var(--t); font-weight: 600; }
    #tb-wipe { font-size: 11px; color: var(--t3); }
    #tb-wipe span { color: var(--brand); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; }
    .tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    #steam-btn {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg3); border: 1px solid var(--ln2); border-radius: 5px;
      padding: 6px 13px; font-size: 12px; color: var(--t);
      transition: border-color .15s, background .15s;
    }
    #steam-btn:hover { border-color: var(--brand); }
    #steam-btn.authed { border-color: var(--brand-glow); background: var(--brand-dim); }
    #steam-avatar { width: 22px; height: 22px; border-radius: 3px; display: none; }

    /* ── Tabbar ── */
    #tabbar {
      position: fixed; top: 50px; left: 0; right: 0; height: 44px; z-index: 99;
      background: var(--bg2); border-bottom: 1px solid var(--ln);
      display: flex; align-items: stretch; padding: 0 18px; gap: 2px;
    }
    .tb-tab {
      display: flex; align-items: center; gap: 6px; padding: 0 14px;
      font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px;
      color: var(--t2); background: none; white-space: nowrap;
      border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
    }
    .tb-tab:hover { color: var(--t); }
    .tb-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
    .tb-tab svg { flex-shrink: 0; }

    /* ── Views ── */
    #views { position: absolute; top: 94px; left: 0; right: 0; min-height: calc(100vh - 94px); }
    .view { display: none; }
    .view.active { display: block; }

    /* ══════════════════ HOME VIEW ══════════════════ */
    .home-hero {
      padding: 56px 40px 48px; text-align: center;
      background: linear-gradient(180deg, rgba(224,65,62,.05) 0%, transparent 70%);
      border-bottom: 1px solid var(--ln);
    }
    .home-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--brand-dim); border: 1px solid var(--brand-glow);
      border-radius: 20px; padding: 4px 13px; margin-bottom: 20px;
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--brand);
    }
    .home-h1 {
      font-family: 'Rajdhani', sans-serif; font-size: 54px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 2px; line-height: 1; margin-bottom: 10px;
    }
    .home-h1 em { color: var(--brand); font-style: normal; }
    .home-sub { font-size: 14px; color: var(--t2); margin-bottom: 32px; line-height: 1.65; }
    .hero-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .btn-brand {
      display: flex; align-items: center; gap: 8px;
      background: var(--brand); color: #000; font-family: 'Rajdhani', sans-serif;
      font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      padding: 11px 24px; border-radius: 5px; transition: background .15s, transform .1s;
    }
    .btn-brand:hover { background: var(--brand-dark); }
    .btn-brand:active { transform: scale(.97); }
    .btn-outline {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg3); border: 1px solid var(--ln2); color: var(--t);
      font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .5px; padding: 11px 24px; border-radius: 5px;
      transition: border-color .15s, color .15s;
    }
    .btn-outline:hover { border-color: var(--brand); color: var(--brand); }
    .home-stats {
      display: flex; justify-content: center; border-bottom: 1px solid var(--ln);
    }
    .home-stat {
      flex: 1; max-width: 180px; padding: 22px 16px; text-align: center;
      border-right: 1px solid var(--ln);
    }
    .home-stat:last-child { border-right: none; }
    .home-stat-val { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: var(--green); line-height: 1; }
    .home-stat-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
    .section-title {
      font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px; color: var(--t3);
      display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
    }
    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--ln); }
    .home-podium-wrap { padding: 40px 40px 32px; }
    .podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
    .podium-card {
      background: var(--bg2); border: 1px solid var(--ln); border-radius: 8px;
      padding: 20px 16px 16px; text-align: center; width: 162px; transition: border-color .15s;
    }
    .podium-card:hover { border-color: var(--ln2); }
    .podium-card.p1 {
      width: 182px; border-color: rgba(224,65,62,.3); position: relative; top: -14px;
      background: linear-gradient(170deg, rgba(224,65,62,.08) 0%, var(--bg2) 55%);
    }
    .podium-rank { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: var(--t3); }
    .podium-card.p1 .podium-rank { color: var(--brand); }
    .podium-avatar { width: 52px; height: 52px; border-radius: 7px; background: var(--bg3); margin: 0 auto 10px; overflow: hidden; }
    .podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .podium-name { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .podium-stat { font-size: 12px; color: var(--t2); }
    .podium-stat strong { color: var(--brand); font-weight: 600; }
    .podium-kdr { display: inline-block; margin-top: 8px; background: var(--bg3); border: 1px solid var(--ln); border-radius: 3px; padding: 2px 8px; font-size: 11px; color: var(--t2); }
    .podium-kdr span { color: var(--t); font-weight: 600; }
    .home-chips-wrap { padding: 0 40px 36px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      display: flex; align-items: center; gap: 6px;
      background: var(--bg2); border: 1px solid var(--ln); border-radius: 5px;
      padding: 7px 13px; font-size: 12px; color: var(--t2);
    }
    .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
    .home-discord-banner {
      margin: 0 40px 48px; border-radius: 8px;
      background: linear-gradient(135deg, #4752c4 0%, #5865f2 100%);
      padding: 32px 36px; display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .home-discord-banner h3 { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
    .home-discord-banner p { font-size: 13px; color: rgba(255,255,255,.75); max-width: 440px; line-height: 1.6; }
    .btn-discord {
      display: flex; align-items: center; gap: 8px;
      background: #fff; color: #5865f2; padding: 11px 22px; border-radius: 5px;
      font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; white-space: nowrap;
    }
    .btn-discord:hover { background: #f0f0ff; }

    /* ══════════════════ LEADERBOARD VIEW ══════════════════ */
    #v-leaderboard { min-height: calc(100vh - 94px); }
    #v-leaderboard.active { display: flex; }
    .lb-sidebar {
      width: 216px; flex-shrink: 0; background: var(--bg2);
      border-right: 1px solid var(--ln); padding: 18px 14px;
    }
    .lb-sidebar-hd { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t3); margin-bottom: 8px; }
    .lb-search {
      width: 100%; background: var(--bg3); border: 1px solid var(--ln); border-radius: 5px;
      padding: 7px 10px; color: var(--t); font-size: 12px; margin-bottom: 14px;
    }
    .lb-search::placeholder { color: var(--t3); }
    .lb-search:focus { border-color: var(--brand); }
    .sidebar-group { margin-bottom: 14px; }
    .sidebar-group-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--t3); margin-bottom: 5px; }
    .sb-btn {
      display: flex; align-items: center; width: 100%; padding: 6px 9px;
      background: none; border-radius: 4px; font-size: 12px; color: var(--t2);
      text-align: left; transition: background .12s, color .12s; gap: 7px;
    }
    .sb-btn:hover { background: var(--bg3); color: var(--t); }
    .sb-btn.active { background: var(--brand-dim); color: var(--brand); }
    .hm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .lb-steam-card {
      background: var(--bg3); border: 1px solid var(--ln); border-radius: 6px;
      padding: 12px; text-align: center;
    }
    .lb-steam-card p { font-size: 11px; color: var(--t3); line-height: 1.5; margin-bottom: 8px; }
    .btn-steam-sm {
      width: 100%; padding: 7px; background: var(--brand); color: #000;
      font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
      text-transform: uppercase; border-radius: 4px;
    }
    .btn-steam-sm:hover { background: var(--brand-dark); }
    .lb-main { flex: 1; padding: 22px 26px; }
    .lb-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
    .lb-title-h { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; }
    .view-toggle { display: flex; gap: 4px; }
    .vt-btn {
      padding: 5px 11px; border-radius: 4px; background: var(--bg3);
      border: 1px solid var(--ln); color: var(--t2); font-size: 11px;
      transition: .12s;
    }
    .vt-btn.active, .vt-btn:hover { background: var(--brand-dim); border-color: var(--brand-glow); color: var(--brand); }
    .lb-tbl { width: 100%; border-collapse: collapse; min-width: 580px; }
    .lb-tbl thead th {
      padding: 7px 11px; text-align: left;
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
      color: var(--t3); border-bottom: 1px solid var(--ln); white-space: nowrap;
    }
    .lb-tbl thead th.sortable { cursor: pointer; user-select: none; }
    .lb-tbl thead th.sortable:hover { color: var(--t2); }
    .lb-tbl thead th.sa { color: var(--green); }
    .lb-tbl tbody tr { border-bottom: 1px solid var(--ln); transition: background .1s; }
    .lb-tbl tbody tr:hover { background: var(--bg3); }
    .lb-tbl tbody tr.me { background: var(--brand-dim); }
    .lb-tbl td { padding: 9px 11px; font-size: 12px; color: var(--t2); vertical-align: middle; }
    .rank-cell { width: 36px; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--t3); }
    .rank-cell.r1 { color: var(--brand); }
    .rank-cell.r2 { color: #b8b8cc; }
    .rank-cell.r3 { color: #b87333; }
    .player-cell { display: flex; align-items: center; gap: 8px; }
    .lb-av { width: 28px; height: 28px; border-radius: 4px; background: var(--bg3); flex-shrink: 0; overflow: hidden; }
    .lb-av img { width: 100%; height: 100%; object-fit: cover; }
    .lb-name { color: var(--t); font-weight: 500; }
    .kdr-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
    .kh { background: rgba(34,197,94,.12); color: #22c55e; }
    .km { background: rgba(224,65,62,.12); color: var(--brand); }
    .kl { background: rgba(100,100,120,.12); color: var(--t3); }
    .hm-wrap { position: relative; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; background: #0d1117; margin-top: 16px; }
    #hm-canvas { display: block; width: 100%; cursor: grab; }
    #hm-canvas:active { cursor: grabbing; }
    .hm-hint { position: absolute; bottom: 10px; right: 12px; font-size: 10px; color: rgba(255,255,255,.28); pointer-events: none; }

    /* ══════════════════ RULES VIEW ══════════════════ */
    .rules-wrap { max-width: 740px; margin: 0 auto; padding: 36px 40px; }
    .page-h2 { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
    .page-sub { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 32px; }
    .rule-group { margin-bottom: 30px; }
    .rule-group-title {
      font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px; color: var(--brand);
      display: flex; align-items: center; gap: 7px; padding-bottom: 8px;
      border-bottom: 1px solid var(--ln); margin-bottom: 12px;
    }
    .rule-item { display: flex; gap: 12px; padding: 9px 12px; border-radius: 5px; margin-bottom: 4px; }
    .rule-item:hover { background: var(--bg2); }
    .rule-num {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
      background: var(--brand-dim); border: 1px solid var(--brand-glow);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: var(--brand);
    }
    .rule-text { font-size: 13px; color: var(--t2); line-height: 1.6; }
    .rule-text strong { color: var(--t); font-weight: 600; }
    .rule-warn {
      background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2);
      border-radius: 6px; padding: 14px 16px; font-size: 12px; color: #fca5a5; line-height: 1.6; margin-top: 20px;
    }

    /* ══════════════════ VOTE VIEW ══════════════════ */
    .vote-wrap { max-width: 660px; margin: 0 auto; padding: 36px 40px; }
    .vote-header { text-align: center; margin-bottom: 32px; }
    .vote-cards { display: grid; gap: 12px; }
    .vote-card {
      background: var(--bg2); border: 1px solid var(--ln); border-radius: 8px;
      padding: 18px 20px; display: flex; align-items: center; gap: 16px;
      transition: border-color .15s;
    }
    .vote-card:hover { border-color: var(--ln2); }
    .vote-icon { width: 40px; height: 40px; border-radius: 7px; background: var(--bg3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .vote-info { flex: 1; }
    .vote-site-name { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
    .vote-site-desc { font-size: 11px; color: var(--t3); }
    .vote-reward-chip { font-size: 11px; color: var(--green); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.32); border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
    .btn-vote {
      padding: 8px 18px; background: var(--brand); color: #000;
      font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
      text-transform: uppercase; border-radius: 4px; flex-shrink: 0;
      transition: background .15s;
    }
    .btn-vote:hover { background: var(--brand-dark); }
    .vote-info-box { margin-top: 26px; background: var(--bg2); border: 1px solid var(--ln); border-radius: 8px; padding: 18px 20px; }
    .vote-info-box h4 { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
    .vote-reward-list { display: grid; gap: 6px; }
    .vote-reward-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
    .vote-reward-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

    /* ══════════════════ DISCORD VIEW ══════════════════ */
    .discord-wrap { max-width: 700px; margin: 0 auto; padding: 36px 40px; }
    .discord-hero {
      background: linear-gradient(135deg, #4752c4 0%, #5865f2 100%);
      border-radius: 10px; padding: 44px 40px; text-align: center; margin-bottom: 24px;
    }
    .discord-hero h2 { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
    .discord-hero p { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 460px; margin: 0 auto 24px; }
    .btn-discord-big {
      display: inline-flex; align-items: center; gap: 9px;
      background: #fff; color: #5865f2; padding: 12px 30px; border-radius: 5px;
      font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .4px;
    }
    .btn-discord-big:hover { background: #f0f0ff; }
    .discord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .discord-ch { background: var(--bg2); border: 1px solid var(--ln); border-radius: 7px; padding: 15px 17px; }
    .discord-ch h4 { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
    .discord-ch p { font-size: 12px; color: var(--t3); line-height: 1.5; }

    /* ── Toast ── */
    #toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(14px);
      background: var(--bg3); border: 1px solid var(--brand-glow); border-radius: 6px;
      padding: 10px 18px; font-size: 13px; color: var(--brand);
      opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 300;
    }
    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ══════════════════ STORE VIEW ══════════════════ */
    .store-wrap { max-width: 980px; margin: 0 auto; padding: 36px 40px; }
    .store-header { text-align: center; margin-bottom: 40px; }
    .store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
    .store-card {
      background: var(--bg2); border: 1px solid var(--ln); border-radius: 10px;
      padding: 24px 20px; display: flex; flex-direction: column; transition: border-color .15s, transform .15s;
    }
    .store-card:hover { border-color: var(--ln2); transform: translateY(-2px); }
    .store-card.featured {
      border-color: rgba(224,65,62,.35);
      background: linear-gradient(180deg, rgba(224,65,62,.07) 0%, var(--bg2) 45%);
    }
    .store-popular {
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
      color: #000; background: var(--brand); border-radius: 3px; padding: 3px 8px;
      display: inline-block; margin-bottom: 10px;
    }
    .store-tier-badge {
      display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 1px; border-radius: 3px; padding: 3px 8px; margin-bottom: 14px;
    }
    .b-queue  { background: rgba(100,100,140,.18); color: #9090b0; border: 1px solid rgba(100,100,140,.3); }
    .b-bronze { background: rgba(184,115,51,.15);  color: #cd853f; border: 1px solid rgba(184,115,51,.3); }
    .b-silver { background: rgba(180,180,200,.12); color: #b8b8cc; border: 1px solid rgba(180,180,200,.3); }
    .b-gold   { background: var(--brand-dim);      color: var(--brand); border: 1px solid var(--brand-glow); }
    .store-card-name {
      font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700;
      text-transform: uppercase; margin-bottom: 6px;
    }
    .store-price { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; color: var(--brand); line-height: 1; }
    .store-price span { font-size: 13px; color: var(--t3); font-family: 'Inter', sans-serif; font-weight: 400; }
    .store-divider { height: 1px; background: var(--ln); margin: 16px 0; }
    .store-perks { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: 22px; }
    .store-perk { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--t2); line-height: 1.45; }
    .perk-icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--green); }
    .btn-store {
      width: 100%; padding: 10px; border-radius: 5px;
      font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      background: var(--bg3); border: 1px solid var(--ln2); color: var(--t2); transition: .15s;
    }
    .btn-store:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-dim); }
    .store-card.featured .btn-store { background: var(--brand); border-color: var(--brand); color: #000; }
    .store-card.featured .btn-store:hover { background: var(--brand-dark); }
    .store-note { text-align: center; margin-top: 22px; font-size: 12px; color: var(--t3); line-height: 1.6; }
    /* ═══════════════════════════════════════════════ */

    @media (max-width: 680px) {
      .home-h1 { font-size: 34px; }
      .home-hero, .home-chips-wrap, .home-discord-banner { padding-left: 20px; padding-right: 20px; }
      .home-discord-banner { margin: 0 0 36px; border-radius: 0; }
      .home-podium-wrap { padding: 28px 20px; }
      .lb-sidebar { display: none; }
      .lb-main { padding: 16px; }
      .rules-wrap, .vote-wrap, .discord-wrap, .store-wrap { padding: 24px 20px; }
      .discord-grid { grid-template-columns: 1fr; }
      .store-grid { grid-template-columns: 1fr 1fr; }
    }
    #player-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
    #player-modal.show { display: flex; }
    .pm-card { background: var(--bg2); border: 1px solid var(--ln); border-radius: 12px; padding: 26px; max-width: 660px; width: 100%; position: relative; max-height: 86vh; overflow: auto; }
    .pm-close { position: absolute; top: 12px; right: 16px; background: none; color: var(--t3); font-size: 26px; line-height: 1; }
    .pm-close:hover { color: var(--t); }
    .pm-name { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--t); margin-bottom: 18px; }
    .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .pm-sec h5 { font-family: 'Rajdhani', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--green); margin-bottom: 8px; border-bottom: 1px solid var(--ln); padding-bottom: 6px; }
    .pm-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--t2); padding: 4px 0; }
    .pm-row b { color: var(--t); font-weight: 600; }
    @media (max-width: 560px) { .pm-grid { grid-template-columns: 1fr; } }