/* =============================================================================
   ⛩ 四魂演武 — SHIKON ENBU — Dance of the Four Souls
   Arena page styling.  Four spirit palette:
     🜂 Eidokaishi  — gold       #ddc88a
     🜄 Kyoretsu    — ice blue   #9bd5ff
     🜁 Seidanga    — ember      #ff9d6b
     🜚 Gōdanka     — amethyst   #d699ff
   ============================================================================= */

.page-arena {
    background:
        radial-gradient(ellipse at top, rgba(214,153,255,0.10), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(255,157,107,0.07), transparent 60%),
        radial-gradient(ellipse at bottom left,  rgba(155,213,255,0.07), transparent 60%),
        linear-gradient(180deg, rgba(8,6,20,0.96), rgba(10,8,24,0.99));
    min-height: 100vh;
    padding: 24px 0 48px;
    transition: background 1.5s ease;
}

/* ░░░░░░░░░░░░░░ MOOD: EVE OF THE DRAW ░░░░░░░░░░░░░░░
   < 6h to the next draw — deeper purple, faint heartbeat.        */
body[data-arena-mood="eve"] .page-arena {
    background:
        radial-gradient(ellipse at center, rgba(214,153,255,0.18), transparent 60%),
        radial-gradient(ellipse at top,    rgba(180,120,240,0.08), transparent 55%),
        linear-gradient(180deg, rgba(14,4,30,0.99), rgba(6,2,16,1.00));
    animation: eveHeartbeat 4.2s ease-in-out infinite;
}
@keyframes eveHeartbeat {
    0%, 100% { box-shadow: inset 0 0 80px rgba(214,153,255,0.04); }
    50%      { box-shadow: inset 0 0 140px rgba(214,153,255,0.12); }
}

/* ░░░░░░░░░░░░░░ MOOD: MORNING AFTER ░░░░░░░░░░░░░░░
   < 24h since the most recent draw committed — golden aurora.     */
body[data-arena-mood="morning"] .page-arena {
    background:
        radial-gradient(ellipse at top, rgba(255,216,107,0.12), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(255,157,107,0.08), transparent 60%),
        radial-gradient(ellipse at bottom left,  rgba(214,153,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(18,12,30,0.96), rgba(10,8,24,0.99));
}
body[data-arena-mood="morning"] .arena-weekly-wrap tbody tr:first-child {
    background: linear-gradient(90deg, rgba(255,216,107,0.18), rgba(255,216,107,0.04) 60%, transparent);
    animation: morningPulse 3.6s ease-in-out infinite;
}
@keyframes morningPulse {
    0%, 100% { box-shadow: inset 0 0 0px rgba(255,216,107,0); }
    50%      { box-shadow: inset 0 0 18px rgba(255,216,107,0.35); }
}
body[data-arena-mood="morning"] .arena-leaderboard .lb-row:first-child {
    animation: morningPulse 3.6s ease-in-out infinite;
}

/* ░░░░░░░░░░░░░░ Countdown widget ░░░░░░░░░░░░░░░ */
.arena-countdown {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border: 1.5px solid rgba(214,153,255,0.45);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at left, rgba(214,153,255,0.10), transparent 65%),
        linear-gradient(180deg, rgba(22,16,46,0.85), rgba(10,8,24,0.95));
    box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(214,153,255,0.20);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.arena-countdown::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(214,153,255,0.06));
    pointer-events: none;
}
.ac-glyph {
    font-size: 30px;
    line-height: 1;
    text-shadow: 0 0 16px rgba(214,153,255,0.6);
    animation: acGlyphPulse 3s ease-in-out infinite;
}
@keyframes acGlyphPulse {
    0%, 100% { transform: scale(1.00); opacity: 0.9; }
    50%      { transform: scale(1.10); opacity: 1.0; }
}
.ac-text {
    display: flex; flex-direction: column; gap: 4px;
}
.ac-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 10px; font-style: italic;
    color: #b095f5;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.ac-readout {
    display: flex; align-items: baseline; gap: 8px;
}
.ac-block {
    display: inline-flex; align-items: baseline; gap: 2px;
}
.ac-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 26px; font-weight: 700;
    color: #ffe9c9;
    text-shadow: 0 0 12px rgba(255,232,201,0.55);
    min-width: 32px; text-align: right;
    font-variant-numeric: tabular-nums;
    transition: color 0.5s, text-shadow 0.5s;
}
.ac-unit {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px; color: #888aa0;
    margin-left: 2px;
    font-style: italic;
}
.ac-sep {
    font-size: 18px; color: #4d4866;
    transform: translateY(-3px);
    animation: acSepBlink 1s ease-in-out infinite;
}
@keyframes acSepBlink {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.85; }
}
.ac-target {
    display: flex; flex-direction: column; align-items: center;
    border-left: 1px dashed rgba(214,153,255,0.30);
    padding-left: 18px;
}
.ac-target-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 9.5px; color: #888aa0;
    letter-spacing: 1.5px;
    font-style: italic;
    text-transform: uppercase;
}
.ac-target-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 20px; font-weight: 700;
    color: #d699ff;
    text-shadow: 0 0 12px rgba(214,153,255,0.55);
    line-height: 1;
    margin-top: 3px;
}
.ac-mood-pill {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px;
    color: #b095f5;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(214,153,255,0.30);
    background: rgba(10,8,24,0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Mood-specific countdown colorings */
.arena-countdown[data-mood="eve"] {
    border-color: rgba(214,153,255,0.75);
    box-shadow: 0 0 24px rgba(214,153,255,0.35),
                inset 0 1px 0 rgba(214,153,255,0.30);
    animation: countdownEve 4.2s ease-in-out infinite;
}
@keyframes countdownEve {
    0%, 100% { box-shadow: 0 0 24px rgba(214,153,255,0.25), inset 0 1px 0 rgba(214,153,255,0.30); }
    50%      { box-shadow: 0 0 36px rgba(214,153,255,0.55), inset 0 1px 0 rgba(214,153,255,0.50); }
}
.arena-countdown[data-mood="eve"] .ac-num {
    color: #ffd6ff;
    text-shadow: 0 0 18px rgba(214,153,255,0.75);
}
.arena-countdown[data-mood="eve"] .ac-mood-pill {
    background: rgba(214,153,255,0.18);
    color: #ffd6ff;
    border-color: rgba(214,153,255,0.65);
}

.arena-countdown[data-mood="morning"] {
    border-color: rgba(255,216,107,0.60);
    box-shadow: 0 0 24px rgba(255,216,107,0.30);
}
.arena-countdown[data-mood="morning"] .ac-num {
    color: #fff6dc;
    text-shadow: 0 0 16px rgba(255,216,107,0.65);
}
.arena-countdown[data-mood="morning"] .ac-mood-pill {
    background: rgba(255,216,107,0.16);
    color: #fff6dc;
    border-color: rgba(255,216,107,0.55);
}
.arena-countdown[data-mood="morning"] .ac-label::before { content: "✦ "; }

/* ░░░░░░░░░░░░░░ Toast notification ░░░░░░░░░░░░░░░ */
.arena-toast-wrap {
    position: fixed;
    top: 90px; right: 24px;
    z-index: 9000;
    pointer-events: none;
    max-width: 380px;
}
.arena-toast {
    pointer-events: auto;
    background:
        radial-gradient(ellipse at top right, rgba(255,216,107,0.20), transparent 70%),
        linear-gradient(180deg, rgba(34,22,72,0.96), rgba(10,8,24,0.99));
    border: 1.5px solid rgba(255,216,107,0.55);
    border-radius: 12px;
    padding: 14px 18px 14px 16px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.55),
                0 0 22px rgba(255,216,107,0.35),
                inset 0 1px 0 rgba(255,216,107,0.25);
    transform: translateX(110%);
    transition: transform 0.55s cubic-bezier(0.25,1.1,0.4,1),
                opacity 0.4s;
    opacity: 0;
    margin-bottom: 12px;
    cursor: pointer;
}
.arena-toast.is-visible { transform: translateX(0); opacity: 1; }
.arena-toast-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.arena-toast-glyph {
    font-size: 22px;
    text-shadow: 0 0 14px rgba(255,216,107,0.7);
}
.arena-toast-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 14px; font-weight: 700;
    color: #fff6dc; letter-spacing: 0.6px;
}
.arena-toast-body {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px; line-height: 1.5;
    color: #ddc88a;
}
.arena-toast-body .kanji { color: var(--toast-hue, #d699ff); font-weight: 700; }
.arena-toast-foot {
    margin-top: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; color: #888aa0;
    font-style: italic;
}

.arena-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ───────────────────────────── Hero strip ───────────────────────────────── */
.arena-hero {
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: 18px;
    padding: 20px 24px;
    border: 1px solid rgba(214,153,255,0.30);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at right, rgba(214,153,255,0.08), transparent 70%),
        linear-gradient(180deg, rgba(22,16,46,0.78), rgba(10,8,24,0.92));
    box-shadow: 0 14px 38px rgba(0,0,0,0.52), inset 0 1px 0 rgba(214,153,255,0.14);
    margin-bottom: 16px;
}

.arena-title {
    display: flex; align-items: center; gap: 14px;
}
.arena-glyph {
    font-size: 44px;
    line-height: 1;
    text-shadow: 0 0 22px rgba(214,153,255,0.7);
}
.arena-name-wrap { display: flex; flex-direction: column; }
.arena-name {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-weight: 700;
    font-size: 30px; line-height: 1.05;
    color: #ffe9c9;
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 0 0 18px rgba(214,153,255,0.45);
}
.arena-sub {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-style: italic;
    color: #b095f5;
    margin: 2px 0 0;
    letter-spacing: 0.5px;
}

.arena-cycle-info {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: flex-end;
}
.ac-pill {
    display: flex; flex-direction: column;
    padding: 6px 14px;
    border: 1px solid rgba(214,153,255,0.30);
    border-radius: 999px;
    background: rgba(10,8,24,0.6);
    min-width: 110px;
}
.ac-pill.ac-mode   { border-color: rgba(255,216,107,0.50); }
.ac-pill.ac-leader { border-color: rgba(214,153,255,0.65); background: rgba(214,153,255,0.10); }
.ac-label {
    font-family: "Times New Roman", serif;
    font-size: 9.5px; color: #888aa0;
    letter-spacing: 1.8px; text-transform: uppercase;
}
.ac-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px; color: #ffe9c9;
    font-weight: 600;
    margin-top: 2px;
}
.ac-pill.ac-leader .ac-value { color: #d699ff; }

/* ───────────────────────────── Draw strip ───────────────────────────────── */
.arena-draw-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,216,107,0.04), rgba(10,8,24,0.6));
    margin-bottom: 18px;
}
.ads-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px; font-style: italic;
    color: #ddc88a; letter-spacing: 2px;
    text-transform: uppercase;
}
.ads-balls {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ads-balls .ads-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff6dc, #d4af37 75%);
    color: #2b1f08;
    font-family: "JetBrains Mono", monospace; font-weight: 700;
    font-size: 14px;
    box-shadow: 0 0 12px rgba(255,216,107,0.40), inset 0 -3px 6px rgba(0,0,0,0.25);
}
.ads-ball-empty { font-size: 18px; color: #555; }
.ads-supps {
    display: flex; align-items: center; gap: 6px;
    font-family: "Times New Roman", serif; font-size: 12px;
    color: #888aa0;
}
.ads-supp-label { font-style: italic; }
.ads-supps-vals { color: #ddc88a; font-family: "JetBrains Mono", monospace; }

/* ───────────────────────────── PROPHECY panel ──────────────────────────── */
.arena-prophecy-wrap {
    margin-bottom: 18px;
    padding: 16px 20px;
    border: 1.5px solid rgba(214,153,255,0.45);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, rgba(214,153,255,0.10), transparent 60%),
        radial-gradient(ellipse at bottom left,  rgba(155,213,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(28,20,55,0.78), rgba(10,8,24,0.92));
    box-shadow: 0 8px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(214,153,255,0.18);
    position: relative;
}
.arena-prophecy-wrap::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 14px;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 60%, rgba(214,153,255,0.05));
}
.prophecy-status {
    text-align: center; padding: 14px 0;
}
.prophecy-empty-msg {
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-size: 13px;
    color: #b8b3d0; line-height: 1.5;
    max-width: 640px; margin: 0 auto 14px;
}
.prophecy-empty-msg em { color: #d699ff; font-style: normal; font-weight: 600; }

.prophecy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 6px 0 10px;
}
.prophecy-card {
    --pc-hue: #ddc88a;
    --pc-bg:  rgba(221,200,138,0.10);
    --pc-border: rgba(221,200,138,0.40);
    background: linear-gradient(180deg, var(--pc-bg), rgba(10,8,24,0.75));
    border: 1.5px solid var(--pc-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.prophecy-card[data-spirit="eidokaishi"] { --pc-hue:#ddc88a; --pc-bg:rgba(221,200,138,0.12); --pc-border:rgba(221,200,138,0.45); }
.prophecy-card[data-spirit="kyoretsu"]   { --pc-hue:#9bd5ff; --pc-bg:rgba(155,213,255,0.12); --pc-border:rgba(155,213,255,0.45); }
.prophecy-card[data-spirit="seidanga"]   { --pc-hue:#ff9d6b; --pc-bg:rgba(255,157,107,0.12); --pc-border:rgba(255,157,107,0.45); }
.prophecy-card[data-spirit="godanka"]    { --pc-hue:#d699ff; --pc-bg:rgba(214,153,255,0.12); --pc-border:rgba(214,153,255,0.45); }

.prophecy-head {
    display: flex; align-items: center; gap: 8px;
}
.prophecy-kanji {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px; font-weight: 700;
    color: var(--pc-hue);
    text-shadow: 0 0 12px var(--pc-bg);
    line-height: 1;
}
.prophecy-name {
    display: flex; flex-direction: column; line-height: 1.15;
}
.prophecy-romaji {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-weight: 600;
    color: #ffe9c9;
}
.prophecy-weapon {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px; color: var(--pc-hue);
    letter-spacing: 0.3px;
    margin-top: 1px;
}
.prophecy-balls {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 4px 0;
}
.prophecy-balls .pb-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(10,8,24,0.85);
    border: 1.5px solid var(--pc-border);
    color: var(--pc-hue);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; font-weight: 700;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4),
                0 0 6px color-mix(in srgb, var(--pc-hue) 30%, transparent);
    transition: transform 0.2s;
}
.prophecy-balls .pb-ball:hover { transform: scale(1.15); }
.prophecy-balls .pb-ball.is-consensus {
    background: radial-gradient(circle at 30% 30%, #fff6dc, var(--pc-hue) 80%);
    color: #2b1f08;
    box-shadow: 0 0 12px var(--pc-hue);
}

.prophecy-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed rgba(214,153,255,0.20);
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-size: 11px;
    color: #888aa0;
    gap: 10px;
}

/* Big prominent "PROPHECY FOR DRAW #4687" pill */
.prophecy-target {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: 10px 18px;
    margin: 8px auto 14px; max-width: 540px;
    border: 1.5px solid rgba(214,153,255,0.55);
    border-radius: 999px;
    background:
        radial-gradient(ellipse at center, rgba(214,153,255,0.20), transparent 70%),
        linear-gradient(180deg, rgba(34,22,72,0.85), rgba(10,8,24,0.95));
    box-shadow: 0 0 22px rgba(214,153,255,0.30),
                inset 0 1px 0 rgba(214,153,255,0.20);
}
.prophecy-target .pt-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px; font-style: italic;
    color: #b095f5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.prophecy-target .pt-draw {
    font-family: "JetBrains Mono", monospace;
    font-size: 26px; font-weight: 700;
    color: #fff6dc;
    text-shadow: 0 0 14px rgba(255,232,201,0.65);
    letter-spacing: 1px;
}

/* ░░░░░░░░░░░░░░ YOUR PROPHECY — 印幻 Punter panel ░░░░░░░░░░░░░░░
   The user's 5th lane.  Silver palette throughout.                  */
.arena-punter-wrap {
    margin-bottom: 22px;
    padding: 16px 20px;
    border: 1.5px solid rgba(200,205,216,0.45);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, rgba(200,205,216,0.10), transparent 60%),
        linear-gradient(180deg, rgba(28,28,42,0.85), rgba(10,8,24,0.95));
    box-shadow: 0 8px 24px rgba(0,0,0,0.40),
                inset 0 1px 0 rgba(200,205,216,0.18);
}

/* ── picker (pre-lock) ── */
.punter-picker-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(200,205,216,0.20);
}
.punter-picker-stat {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 22px; font-weight: 700;
    color: #c8cdd8;
}
.punter-picker-stat .ppc-divider {
    color: #6b6d7a; font-weight: 400;
}
.punter-picker-stat .punter-picker-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px; font-style: italic;
    color: #888aa0;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.punter-picker-target {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-style: italic;
    color: #b095f5;
    letter-spacing: 0.8px;
}

.punter-ball-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 5px;
    padding: 6px 0 14px;
}
@media (max-width: 880px) {
    .punter-ball-grid { grid-template-columns: repeat(9, 1fr); }
}
.punter-ball-btn {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(200,205,216,0.25);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(40,40,55,0.95), rgba(10,8,24,0.90));
    color: #c8cdd8;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.25,1.1,0.4,1);
    display: flex; align-items: center; justify-content: center;
    user-select: none;
    padding: 0;
}
.punter-ball-btn:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(200,205,216,0.65);
    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.punter-ball-btn.is-selected {
    background: radial-gradient(circle at 30% 30%, #f4f6fb, #b6bdc8 80%);
    color: #1c1a2a;
    border-color: #c8cdd8;
    box-shadow: 0 0 14px rgba(200,205,216,0.65),
                inset 0 -2px 4px rgba(0,0,0,0.30);
    transform: scale(1.08);
}
.punter-ball-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
    transform: none !important;
}

.punter-picker-actions {
    display: flex; gap: 12px; justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px dashed rgba(200,205,216,0.18);
}
.punter-lock-btn {
    background: rgba(200,205,216,0.18);
    border-color: rgba(200,205,216,0.55);
    color: #f4f6fb;
}
.punter-lock-btn:not(:disabled):hover {
    background: rgba(200,205,216,0.30);
    box-shadow: 0 0 14px rgba(200,205,216,0.45);
}
.punter-lock-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* ── locked state ── */
.punter-locked {
    padding: 14px 18px;
    background:
        radial-gradient(ellipse at center, rgba(200,205,216,0.10), transparent 70%),
        linear-gradient(180deg, rgba(20,20,32,0.80), rgba(10,8,24,0.95));
    border: 1.5px solid rgba(200,205,216,0.55);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(200,205,216,0.20),
                inset 0 1px 0 rgba(200,205,216,0.30);
}
.punter-locked-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.punter-locked-stamp {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-weight: 700;
    color: #c8cdd8;
    letter-spacing: 2.5px;
    padding: 4px 14px;
    background: rgba(200,205,216,0.12);
    border: 1px solid rgba(200,205,216,0.55);
    border-radius: 999px;
}
.punter-locked-when {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px; font-style: italic;
    color: #888aa0;
}
.punter-locked-balls {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    padding: 10px 0;
}
.punter-locked-balls .plb-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f4f6fb, #b6bdc8 80%);
    color: #1c1a2a;
    border: 1.5px solid #c8cdd8;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 0 14px rgba(200,205,216,0.50),
                inset 0 -2px 5px rgba(0,0,0,0.30);
}
.punter-locked-quote {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-style: italic;
    color: #b8b3d0;
    text-align: center;
    padding: 8px 0;
    border-top: 1px dashed rgba(200,205,216,0.18);
    border-bottom: 1px dashed rgba(200,205,216,0.18);
    margin: 6px 0;
}
.punter-locked-actions {
    display: flex; justify-content: flex-end;
    padding-top: 6px;
}

/* ── stats card (after first scored cycle) ── */
.punter-stats-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(10,8,24,0.55);
    border: 1px solid rgba(200,205,216,0.18);
    border-radius: 10px;
}
.ps-block {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ps-block.ps-vs { grid-column: 1 / -1; align-items: stretch; }
.ps-label {
    font-family: "Times New Roman", serif;
    font-size: 9px; color: #888aa0;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.ps-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 18px; font-weight: 700;
    color: #c8cdd8;
}
.ps-vs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    margin-top: 6px;
}
.ps-vs-row {
    --pv-hue: #ddc88a;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--pv-hue) 30%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--pv-hue) 8%, transparent);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: #c8cdd8;
}
.ps-vs-row[data-spirit="eidokaishi"] { --pv-hue: #ddc88a; }
.ps-vs-row[data-spirit="kyoretsu"]   { --pv-hue: #9bd5ff; }
.ps-vs-row[data-spirit="seidanga"]   { --pv-hue: #ff9d6b; }
.ps-vs-row[data-spirit="godanka"]    { --pv-hue: #d699ff; }
.ps-vs-row .pv-sigil {
    font-size: 14px;
    color: var(--pv-hue);
    text-shadow: 0 0 8px var(--pv-hue);
}
.ps-vs-row .pv-record { color: var(--pv-hue); font-weight: 600; }

/* Punter as 5th lane in Weekly Results — silver column header */
.weekly-table thead th.wt-p { color: #c8cdd8; }
.wt-spirit-cell[data-spirit="punter"] { --wth-hue: #c8cdd8; }

/* Punter in Leaderboard */
.lb-row[data-spirit="punter"] { --lb-hue: #c8cdd8; --lb-bg: rgba(200,205,216,0.08); }

/* ───────────────────────────── Weekly Results table ────────────────────── */
.arena-weekly-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18,12,40,0.55), rgba(10,8,24,0.85));
}
.weekly-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(212,175,55,0.10);
    border-radius: 8px;
}
.weekly-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: #c8c2dc;
    min-width: 880px;
}
.weekly-table thead th {
    background: rgba(10,8,24,0.85);
    color: #ddc88a;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(212,175,55,0.20);
    position: sticky; top: 0; z-index: 1;
}
.weekly-table thead th.wt-e { color: #ddc88a; }
.weekly-table thead th.wt-k { color: #9bd5ff; }
.weekly-table thead th.wt-s { color: #ff9d6b; }
.weekly-table thead th.wt-g { color: #d699ff; }
.weekly-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(212,175,55,0.06);
    vertical-align: middle;
}
.weekly-table tbody tr:hover { background: rgba(214,153,255,0.05); }
.wt-cell-balls {
    display: flex; flex-wrap: wrap; gap: 3px;
}
.wt-mini-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.20);
    background: rgba(10,8,24,0.6);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; font-weight: 600;
}
.wt-mini-ball.is-hit {
    background: radial-gradient(circle at 30% 30%, #fff6dc, #d4af37 80%);
    color: #2b1f08;
    border-color: #d4af37;
    box-shadow: 0 0 6px rgba(255,216,107,0.55);
}
.wt-mini-ball.is-actual {
    background: radial-gradient(circle at 30% 30%, #fff6dc, #d4af37 80%);
    color: #2b1f08;
    border-color: #d4af37;
    box-shadow: 0 0 8px rgba(255,216,107,0.7);
}
/* SUPPLEMENTARY — silver, 0.5 point hit */
.wt-mini-ball.is-supp-hit,
.wt-mini-ball.is-actual-supp {
    background: radial-gradient(circle at 30% 30%, #f4f6fb, #b6bdc8 80%);
    color: #1c1a2a;
    border-color: #b6bdc8;
    box-shadow: 0 0 6px rgba(220,225,235,0.55);
}
.wt-mini-ball.is-actual-supp {
    box-shadow: 0 0 8px rgba(220,225,235,0.7);
}
.wt-cell-balls-supp {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px dashed rgba(180,185,200,0.30);
}
.wt-cell-balls-supp-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 9px; font-style: italic;
    color: #888aa0; text-transform: uppercase;
    letter-spacing: 1px;
}
.wt-hits-chip {
    display: inline-block;
    background: rgba(214,153,255,0.10);
    border: 1px solid var(--wth-hue, rgba(214,153,255,0.35));
    color: var(--wth-hue, #d699ff);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    margin-left: 5px;
}
.wt-mode {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    color: #b095f5;
}

/* per-spirit cell hue */
.wt-spirit-cell[data-spirit="eidokaishi"] { --wth-hue: #ddc88a; }
.wt-spirit-cell[data-spirit="kyoretsu"]   { --wth-hue: #9bd5ff; }
.wt-spirit-cell[data-spirit="seidanga"]   { --wth-hue: #ff9d6b; }
.wt-spirit-cell[data-spirit="godanka"]    { --wth-hue: #d699ff; }

/* ───────────────────────────── Ball Scores grid ────────────────────────── */
.arena-ballscores-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18,12,40,0.55), rgba(10,8,24,0.85));
}
.ballscores-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 4px 0 12px;
    font-family: "Cormorant Garamond", serif;
    font-size: 11px;
    color: #888aa0;
    font-style: italic;
}
.ballscores-legend .bs-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.bs-dot-actual { background: #ffd86b; box-shadow: 0 0 8px #ffd86b; }
.bs-dot-supp   { background: #c8cdd8; box-shadow: 0 0 8px #c8cdd8; }
.bs-dot-e      { background: #ddc88a; }
.bs-dot-k      { background: #9bd5ff; }
.bs-dot-s      { background: #ff9d6b; }
.bs-dot-g      { background: #d699ff; }

/* a small silver tag for the supp count in each ball card */
.bs-actual-supp {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    color: #c8cdd8;
    margin-bottom: 4px;
    opacity: 0.85;
}

.ballscores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
}
.bs-card {
    --bs-actual: 0;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 8px;
    padding: 6px 4px 4px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, gold calc(var(--bs-actual) * 1%), transparent),
            rgba(10,8,24,0.7));
    text-align: center;
    transition: transform 0.2s;
}
.bs-card:hover { transform: translateY(-2px); }
.bs-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px; font-weight: 700;
    color: #ddc88a;
    line-height: 1.0;
}
.bs-actual {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: #ffd86b;
    margin: 2px 0 4px;
}
.bs-bars {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 4px;
}
.bs-bar {
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden; position: relative;
}
.bs-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 2px;
    background: var(--bsf-hue);
    box-shadow: 0 0 3px var(--bsf-hue);
    transition: width 0.5s;
}
.bs-bar[data-spirit="eidokaishi"] { --bsf-hue: #ddc88a; }
.bs-bar[data-spirit="kyoretsu"]   { --bsf-hue: #9bd5ff; }
.bs-bar[data-spirit="seidanga"]   { --bsf-hue: #ff9d6b; }
.bs-bar[data-spirit="godanka"]    { --bsf-hue: #d699ff; }

/* ───────────────────────────── Section headers ─────────────────────────── */
.arena-section-header {
    display: flex; align-items: baseline; gap: 12px;
    padding: 0 4px 8px;
    border-bottom: 1px dashed rgba(212,175,55,0.18);
    margin-bottom: 14px;
}
.arena-section-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700; font-size: 15px;
    color: #ddc88a; letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}
.arena-section-sub {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px; font-style: italic;
    color: #888aa0;
}

/* ───────────────────────────── Hexagonal Manifold ──────────────────────── */
.arena-manifold-wrap {
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid rgba(214,153,255,0.20);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at center, rgba(214,153,255,0.04), transparent 70%),
        linear-gradient(180deg, rgba(18,12,40,0.55), rgba(10,8,24,0.85));
}
.arena-manifold-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
}

/* Edges between sigils */
.am-edges path {
    fill: none;
    stroke: rgba(214,153,255,0.30);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    animation: amEdgeFlow 12s linear infinite;
}
@keyframes amEdgeFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -200; }
}

/* Sigil rings */
.am-sigils .am-sigil-halo {
    transition: r 0.6s cubic-bezier(0.25,1.1,0.4,1),
                opacity 0.4s;
}
.am-sigils .am-sigil-ring {
    fill: rgba(10,8,24,0.85);
    stroke-width: 2;
    transition: stroke 0.4s, filter 0.4s;
}
.am-sigils .am-sigil-leader .am-sigil-ring {
    filter: drop-shadow(0 0 22px var(--am-hue));
    stroke-width: 3;
}
.am-sigils .am-sigil-text {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-size: 22px;
    text-anchor: middle; dominant-baseline: middle;
    fill: #fff;
    pointer-events: none;
}
.am-sigils .am-sigil-tfs {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    text-anchor: middle;
    fill: #ddc88a;
    pointer-events: none;
}
.am-sigils .am-sigil-name {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 11px;
    text-anchor: middle;
    fill: var(--am-hue);
    pointer-events: none;
}

/* ───────────────────────────── Spirit verdict cards ────────────────────── */
.arena-spirit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.spirit-card {
    --sc-hue: #ddc88a;
    --sc-bg: rgba(221,200,138,0.08);
    --sc-border: rgba(221,200,138,0.35);
    background:
        linear-gradient(180deg, var(--sc-bg), rgba(10,8,24,0.70));
    border: 1.5px solid var(--sc-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
}
.spirit-card.is-leader {
    border-color: var(--sc-hue);
    box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 26px var(--sc-bg);
}
.spirit-card-head {
    display: flex; align-items: center; gap: 10px;
}
.spirit-kanji {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px; font-weight: 700;
    color: var(--sc-hue);
    line-height: 1;
    text-shadow: 0 0 10px var(--sc-bg);
}
.spirit-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 14px; font-weight: 600;
    color: #ffe9c9;
    letter-spacing: 0.5px;
}
.spirit-role {
    font-family: "Cormorant Garamond", serif;
    font-size: 10.5px; font-style: italic;
    color: #888aa0;
    margin-top: 1px;
}
.spirit-weapon-chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--sc-hue);
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    padding: 3px 8px;
    border-radius: 999px;
    align-self: flex-start;
    letter-spacing: 0.3px;
}
.spirit-picks {
    display: flex; gap: 4px; flex-wrap: wrap;
}
.spirit-picks .sp-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(10,8,24,0.7);
    border: 1px solid var(--sc-border);
    color: var(--sc-hue);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; font-weight: 600;
    transition: all 0.2s;
}
.spirit-picks .sp-ball.is-hit {
    background:
        radial-gradient(circle at 30% 30%, #fff6dc, #d4af37 75%);
    color: #2b1f08;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(255,216,107,0.55);
}
.spirit-tfs-row {
    display: grid; grid-template-columns: 1fr auto; gap: 6px;
    align-items: center;
}
.spirit-tfs-bar {
    height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
    overflow: hidden; position: relative;
}
.spirit-tfs-fill {
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--sc-hue) 35%, transparent),
        var(--sc-hue));
    box-shadow: 0 0 8px var(--sc-hue);
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.25,1.1,0.4,1);
}
.spirit-tfs-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; font-weight: 600;
    color: var(--sc-hue);
    text-align: right;
    min-width: 56px;
}
.spirit-verdict {
    display: flex; align-items: center; gap: 8px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    color: #ddc88a;
}
.spirit-verdict .sv-star {
    font-style: italic;
    color: var(--sc-hue);
}
.spirit-verdict .sv-tier {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--sc-border);
    color: var(--sc-hue);
    background: var(--sc-bg);
}
.spirit-voice {
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-size: 12px;
    color: #b8b3d0;
    line-height: 1.45;
    border-left: 2px solid var(--sc-hue);
    padding-left: 10px;
    opacity: 0.92;
}

/* Hue palette per spirit */
.spirit-card[data-spirit="eidokaishi"] { --sc-hue:#ddc88a; --sc-bg:rgba(221,200,138,0.12); --sc-border:rgba(221,200,138,0.45); }
.spirit-card[data-spirit="kyoretsu"]   { --sc-hue:#9bd5ff; --sc-bg:rgba(155,213,255,0.12); --sc-border:rgba(155,213,255,0.45); }
.spirit-card[data-spirit="seidanga"]   { --sc-hue:#ff9d6b; --sc-bg:rgba(255,157,107,0.12); --sc-border:rgba(255,157,107,0.45); }
.spirit-card[data-spirit="godanka"]    { --sc-hue:#d699ff; --sc-bg:rgba(214,153,255,0.12); --sc-border:rgba(214,153,255,0.45); }

/* ───────────────────────────── Elo Trajectories — Awakening Ring ──────── */
.arena-elo-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(214,153,255,0.30);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, rgba(214,153,255,0.06), transparent 70%),
        linear-gradient(180deg, rgba(22,16,46,0.55), rgba(10,8,24,0.85));
    box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(214,153,255,0.10);
}

.elo-standings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.elo-pill {
    --ep-hue: #ddc88a;
    display: grid;
    grid-template-columns: 26px 28px 1fr auto;
    align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ep-hue) 38%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ep-hue) 8%, transparent);
}
.elo-pill .ep-rank {
    font-family: "Cormorant Garamond", serif;
    font-size: 16px; font-weight: 700;
    color: var(--ep-hue); text-align: center;
}
.elo-pill .ep-sigil {
    font-size: 16px; text-align: center;
    text-shadow: 0 0 8px var(--ep-hue);
}
.elo-pill .ep-name {
    display: flex; flex-direction: column;
}
.elo-pill .ep-kanji {
    font-family: "Cormorant Garamond", serif;
    font-size: 13px; font-weight: 700;
    color: var(--ep-hue);
}
.elo-pill .ep-rating-wrap {
    display: flex; flex-direction: column; align-items: flex-end; min-width: 60px;
}
.elo-pill .ep-rating {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px; font-weight: 700;
    color: var(--ep-hue);
    line-height: 1.0;
}
.elo-pill .ep-delta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    line-height: 1.2;
    margin-top: 2px;
}
.ep-delta.is-up   { color: #88d8b0; }
.ep-delta.is-down { color: #ff7b9d; }
.ep-delta.is-zero { color: #888aa0; }

.elo-pill[data-spirit="eidokaishi"] { --ep-hue:#ddc88a; }
.elo-pill[data-spirit="kyoretsu"]   { --ep-hue:#9bd5ff; }
.elo-pill[data-spirit="seidanga"]   { --ep-hue:#ff9d6b; }
.elo-pill[data-spirit="godanka"]    { --ep-hue:#d699ff; }

.elo-chart-wrap {
    background: rgba(10,8,24,0.55);
    border: 1px solid rgba(212,175,55,0.14);
    border-radius: 10px;
    padding: 12px;
}
.elo-chart-svg {
    width: 100%; height: auto; display: block; max-height: 280px;
}
.elo-grid line {
    stroke: rgba(212,175,55,0.10);
    stroke-width: 0.5;
}
.elo-grid .grid-axis-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    fill: #888aa0;
}
.elo-grid .grid-r0 {
    stroke: rgba(214,153,255,0.30);
    stroke-dasharray: 3 3;
}
.elo-lines path {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke-width 0.3s;
    filter: drop-shadow(0 0 4px currentColor);
}
.elo-lines path:hover {
    stroke-width: 3.5;
}
.elo-lines circle {
    fill: currentColor;
    stroke: rgba(10,8,24,0.9);
    stroke-width: 1;
}
.elo-axis text {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; fill: #888aa0;
}

/* ───────────────────────────── Spirit card Elo chip ────────────────────── */
.spirit-elo-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    background: var(--sc-bg);
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    color: var(--sc-hue);
    align-self: flex-start;
    margin-top: -4px;
}
.spirit-elo-chip .sec-label { color: #888aa0; font-size: 9px; letter-spacing: 1px; }
.spirit-elo-chip .sec-delta.is-up   { color: #88d8b0; }
.spirit-elo-chip .sec-delta.is-down { color: #ff7b9d; }

/* ───────────────────────────── Leaderboard ─────────────────────────────── */
.arena-leaderboard-wrap, .arena-scrubber-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18,12,40,0.50), rgba(10,8,24,0.80));
}
.arena-leaderboard {
    display: flex; flex-direction: column; gap: 8px;
}
.lb-row {
    --lb-hue: #ddc88a;
    --lb-bg: rgba(221,200,138,0.06);
    display: grid;
    grid-template-columns: 28px 28px 1fr auto auto auto auto;
    align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(212,175,55,0.10);
    background: var(--lb-bg);
    border-radius: 10px;
    transition: transform 0.2s, border-color 0.2s;
}
.lb-row:hover { transform: translateX(4px); border-color: var(--lb-hue); }
.lb-rank {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px; font-weight: 700;
    color: var(--lb-hue);
    text-align: center;
}
.lb-rank.rank-1 { text-shadow: 0 0 12px gold; }
.lb-sigil {
    font-size: 20px;
    text-align: center;
    text-shadow: 0 0 10px var(--lb-hue);
}
.lb-name {
    display: flex; flex-direction: column;
}
.lb-kanji {
    font-family: "Cormorant Garamond", serif;
    font-size: 16px; font-weight: 700;
    color: var(--lb-hue);
}
.lb-romaji {
    font-family: "Cormorant Garamond", serif;
    font-size: 11px; font-style: italic;
    color: #888aa0;
}
.lb-stat {
    display: flex; flex-direction: column;
    align-items: flex-end;
    min-width: 70px;
}
.lb-stat-label {
    font-family: "Times New Roman", serif;
    font-size: 9px; color: #888aa0;
    text-transform: uppercase; letter-spacing: 1px;
}
.lb-stat-value {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px; font-weight: 600;
    color: var(--lb-hue);
}

/* Hue palette per spirit on leaderboard */
.lb-row[data-spirit="eidokaishi"] { --lb-hue:#ddc88a; --lb-bg:rgba(221,200,138,0.06); }
.lb-row[data-spirit="kyoretsu"]   { --lb-hue:#9bd5ff; --lb-bg:rgba(155,213,255,0.06); }
.lb-row[data-spirit="seidanga"]   { --lb-hue:#ff9d6b; --lb-bg:rgba(255,157,107,0.06); }
.lb-row[data-spirit="godanka"]    { --lb-hue:#d699ff; --lb-bg:rgba(214,153,255,0.06); }

/* ░░░░░░░░░░░░░░ WITNESS TOKENS — 印章 Inshō ░░░░░░░░░░░░░░░ */
.arena-tokens-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    background:
        radial-gradient(ellipse at top, rgba(255,216,107,0.05), transparent 60%),
        linear-gradient(180deg, rgba(18,12,40,0.55), rgba(10,8,24,0.85));
}
.tokens-summary {
    display: flex; align-items: center; gap: 14px;
    margin: 6px 0 14px;
    font-family: "JetBrains Mono", monospace;
}
.ts-progress {
    font-size: 13px; color: #ddc88a; font-weight: 600;
    white-space: nowrap;
}
.ts-meter {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.04); overflow: hidden;
    position: relative;
}
.ts-meter-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg,
        rgba(255,216,107,0.35),
        rgba(255,216,107,0.85),
        rgba(255,232,201,1.0));
    box-shadow: 0 0 12px rgba(255,216,107,0.55);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.25,1.1,0.4,1);
}

.tokens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.token-card {
    --tk-hue: #888aa0;
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 8px 10px;
    border: 1.5px solid color-mix(in srgb, var(--tk-hue) 35%, transparent);
    border-radius: 10px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tk-hue) 8%, transparent),
        rgba(10,8,24,0.75));
    box-shadow: 0 4px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04);
    cursor: default;
    transition: transform 0.2s, box-shadow 0.3s;
    text-align: center;
    overflow: hidden;
}
.token-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.55),
                0 0 16px color-mix(in srgb, var(--tk-hue) 40%, transparent);
}

/* Rarity palette */
.token-card[data-rarity="common"]     { --tk-hue: #b6bdc8; }
.token-card[data-rarity="uncommon"]   { --tk-hue: #88d8b0; }
.token-card[data-rarity="rare"]       { --tk-hue: #9bd5ff; }
.token-card[data-rarity="legendary"]  { --tk-hue: #ff9d6b; }
.token-card[data-rarity="mythic"]     { --tk-hue: #d699ff; }

/* Locked vs unlocked */
.token-card.is-locked {
    opacity: 0.42;
    filter: grayscale(0.55);
}
.token-card.is-locked:hover {
    opacity: 0.65;
    filter: grayscale(0.30);
}
.token-card.is-unlocked .tk-glyph {
    animation: tokenShine 4.8s ease-in-out infinite;
    text-shadow: 0 0 18px var(--tk-hue);
}
@keyframes tokenShine {
    0%, 100% { transform: scale(1.00); filter: drop-shadow(0 0 8px var(--tk-hue)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 14px var(--tk-hue)); }
}

.tk-glyph {
    font-size: 30px;
    line-height: 1;
    color: var(--tk-hue);
    margin-top: 2px;
}
.tk-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--tk-hue);
    letter-spacing: 0.5px;
}
.tk-rarity {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 10px;
    color: #888aa0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.tk-progress {
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.05);
    margin-top: 4px;
    width: 90%; position: relative;
    overflow: hidden;
}
.tk-progress-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--tk-hue);
    box-shadow: 0 0 4px var(--tk-hue);
    border-radius: 2px;
    transition: width 0.7s;
}
.tk-tooltip {
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 220px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(28,20,55,0.97), rgba(10,8,24,1.0));
    border: 1px solid var(--tk-hue);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.65), 0 0 14px var(--tk-hue);
    font-family: "Cormorant Garamond", serif;
    font-size: 11.5px; font-style: italic;
    color: #ddc88a;
    line-height: 1.45;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 50;
    pointer-events: none;
}
.tk-tooltip .tkt-desc { color: #c8c2dc; font-style: normal; margin-bottom: 4px; font-size: 11px; }
.tk-tooltip .tkt-lore { color: var(--tk-hue); font-style: italic; }
.tk-tooltip .tkt-when {
    color: #6f6c85; font-style: italic; font-size: 10px;
    margin-top: 6px; padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-family: "JetBrains Mono", monospace;
}
.token-card:hover .tk-tooltip {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

/* Toast — newly unlocked */
.token-unlock-toast {
    pointer-events: auto;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--tk-hue, #d699ff) 35%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(34,22,72,0.98), rgba(10,8,24,1.0));
    border: 1.5px solid var(--tk-hue, #d699ff);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.55),
                0 0 22px var(--tk-hue, #d699ff),
                inset 0 1px 0 color-mix(in srgb, var(--tk-hue, #d699ff) 30%, transparent);
    transform: translateX(110%); opacity: 0;
    transition: transform 0.65s cubic-bezier(0.25,1.1,0.4,1), opacity 0.4s;
    margin-bottom: 12px;
    cursor: pointer;
}
.token-unlock-toast.is-visible { transform: translateX(0); opacity: 1; }
.token-unlock-toast .tut-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 6px;
}
.token-unlock-toast .tut-glyph {
    font-size: 30px;
    color: var(--tk-hue, #d699ff);
    text-shadow: 0 0 16px var(--tk-hue, #d699ff);
}
.token-unlock-toast .tut-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.token-unlock-toast .tut-label {
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-size: 10px;
    color: #b095f5; letter-spacing: 2px;
    text-transform: uppercase;
}
.token-unlock-toast .tut-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700; font-size: 16px;
    color: var(--tk-hue, #d699ff);
    text-shadow: 0 0 10px var(--tk-hue, #d699ff);
}
.token-unlock-toast .tut-lore {
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-size: 12px;
    color: #ddc88a;
    line-height: 1.5;
    margin-top: 4px;
}
.token-unlock-toast .tut-foot {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px; color: #6f6c85;
    margin-top: 5px;
}

/* ───────────────────────────── Scrubber (recent battles) ───────────────── */
.arena-scrubber {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 320px; overflow-y: auto;
    padding-right: 4px;
}
.sb-row {
    display: grid;
    grid-template-columns: 70px 1fr 120px 100px;
    align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(212,175,55,0.10);
    border-radius: 8px;
    background: rgba(10,8,24,0.5);
    cursor: pointer;
    transition: all 0.2s;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: #b8b3d0;
}
.sb-row:hover {
    border-color: rgba(214,153,255,0.45);
    background: rgba(214,153,255,0.05);
    transform: translateX(2px);
}
.sb-row.is-active {
    border-color: #d699ff;
    background: rgba(214,153,255,0.10);
}
.sb-draw { color: #ddc88a; font-weight: 600; }
.sb-mode { font-family: "Cormorant Garamond", serif; font-style: italic; color: #b095f5; }
.sb-date { color: #888aa0; font-size: 11px; }
.sb-leader {
    font-family: "Cormorant Garamond", serif;
    text-align: right;
    color: var(--lb-hue, #d699ff);
    font-weight: 600;
}

/* ───────────────────────────── Foot ────────────────────────────────────── */
.arena-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed rgba(212,175,55,0.18);
}
.arena-refresh-btn {
    background: rgba(214,153,255,0.12);
    color: #d699ff;
    border: 1px solid rgba(214,153,255,0.40);
    border-radius: 999px;
    padding: 6px 18px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.arena-refresh-btn:hover:not(:disabled) {
    background: rgba(214,153,255,0.22);
    transform: translateY(-1px);
}
.arena-foot-note {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 11px;
    color: #888aa0;
}

@media (max-width: 720px) {
    .arena-hero { grid-template-columns: 1fr; }
    .arena-cycle-info { justify-content: flex-start; }
    .lb-row { grid-template-columns: 24px 24px 1fr auto; }
    .lb-row .lb-stat:not(:first-of-type) { display: none; }
    .sb-row { grid-template-columns: 60px 1fr 100px; }
    .sb-row .sb-leader { display: none; }
}