/* --- Google Font Import --- */
/* style.css (v2.0): Stone & Runes UI layer at the end of this file; earlier rules remain as the base layout. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Alegreya+Sans:wght@400;500;700;800&family=Inter:wght@400;700&family=Press+Start+2P&display=swap');

/* --- CSS Variables (Theme) --- */
:root {
    --background-color: #2c2137; /* Dark Purple */
    --panel-bg: #413550;
    --border-light: #6b5a83;
    --border-dark: #201826;
    --text-color: #e2e8f0;
    --text-accent: #f1c40f; /* Gold */
    --text-header: #a0d2e8; /* Light Blue */
    --canvas-bg: #1c1f3b; /* Crystalline Cavern: Deep Indigo */
    --text-orange-400: #f6ad55; /* Used by .hot-streaks-header (was previously undefined) */
}

/* Inferno Theme */
.theme-inferno {
    --background-color: #2a0a0a;
    --panel-bg: #4c1d1d;
    --border-light: #a33b3b;
    --border-dark: #1a0606;
    --text-color: #fbd38d;
    --text-accent: #f6ad55;
    --text-header: #f56565;
    --canvas-bg: #321c1b;
}

/* Neon Grid Theme */
.theme-neon {
    --background-color: #0c001f;
    --panel-bg: rgba(26, 12, 51, 0.94);
    --border-light: #f0f;
    --border-dark: #0c001f;
    --text-color: #0ff;
    --text-accent: #f0f;
    --text-header: #a0d2e8;
    --canvas-bg: #100529;
}

/* Ice Age Theme */
.theme-iceage {
    --background-color: #1a202c;
    --panel-bg: #2d3748;
    --border-light: #718096;
    --border-dark: #1a202c;
    --text-color: #e2e8f0;
    --text-accent: #63b3ed;
    --text-header: #90cdf4;
    --canvas-bg: #2c3a4f;
}

/* Dark Theme */
.theme-dark {
    --background-color: #121212;
    --panel-bg: #1e1e1e;
    --border-light: #444444;
    --border-dark: #000000;
    --text-color: #cccccc;
    --text-accent: #ffffff;
    --text-header: #999999;
    --canvas-bg: #181818;
}

/* Glass Theme (Increased opacity from 0.5 to 0.88 so UI remains readable) */
.theme-glass {
    --background-color: #2c2137;
    --panel-bg: rgba(45, 35, 60, 0.88);
    --border-light: rgba(135, 115, 165, 0.95);
    --border-dark: rgba(22, 16, 28, 0.95);
    --text-color: #e2e8f0;
    --text-accent: #f1c40f;
    --text-header: #a0d2e8;
    --canvas-bg: #1c1f3b;
}
.theme-glass .panel-retro,
.theme-glass .chat-window,
.theme-glass .modal-content,
.theme-glass .title-btn {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Body & Base Styles --- */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease;
}

/* --- Dedicated Pseudo-element for the Background Layer --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-color: var(--background-color);
    background-image:
    radial-gradient(var(--border-dark) 1px, transparent 1px),
    radial-gradient(var(--border-dark) 1px, var(--background-color) 1px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out, background-color 0.5s ease;
}

.bg-title::before {
    background-image: url('https://i.imgur.com/ivQ1ykb.png');   /* watermark removed (10/25/2026) */
}

.bg-setup::before {
    background-image: url('dd_gamesetupscreen.jpg');
}

.bg-gameplay::before {
    background-image: url('dd_gameplayscreen.jpg');
}

/* Code-drawn motion over the painted backgrounds (bg-motion.js): same box as the background, under the effects canvas */
#bg-motion { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; image-rendering: pixelated; }

/* Style for the true fullscreen background canvas */
#bgVfxCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-color: transparent;
    pointer-events: none;
}

/* Wrapper to hold all main UI content above background layers */
.main-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.font-press-start {
    font-family: 'Press Start 2P', cursive;
}

/* --- Pinned overlays --- */
/* Title screen fills the window; the toggles sit in the window's top-left corner */
#titleScreen {
    position: fixed;
    inset: 0;
}
#global-audio-controls {
    position: fixed;
    top: 1rem;
    left: 1rem;
}

/* --- Title Screen --- */
#titleScreen {
    background-color: transparent;
    color: #fff;
    text-align: center;
}
.title-text {
    color: var(--text-header);
    text-shadow: 4px 4px #000, 4px 4px 2px var(--border-dark);
}

/* High specificity to override Tailwind CDN Preflight button reset */
.title-btn,
button.title-btn {
    background-color: #413550;
    background-color: var(--panel-bg);
    border: 3px solid var(--border-dark);
    box-shadow: inset -3px -3px 0px var(--border-dark), inset 3px 3px 0px var(--border-light), 0 6px 16px rgba(0, 0, 0, 0.65);
    padding: 1rem 2rem;
    color: var(--text-color);
    text-shadow: 2px 2px #000;
    transition: all 0.1s;
}
.title-btn:hover,
button.title-btn:hover {
    background-color: #554668;
    background-color: color-mix(in srgb, var(--panel-bg) 80%, white 20%);
    color: var(--text-accent);
    border-color: var(--border-light);
}
.title-btn:active,
button.title-btn:active {
    box-shadow: inset 2px 2px 0px var(--border-dark), inset -2px -2px 0px var(--border-light);
    transform: translateY(2px);
}

/* --- Ticker Tape / Event Feed --- */
.main-title-container {
    height: 75px;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
    background-color: #201826;
    background-color: var(--border-dark);
    border: 4px solid var(--border-dark);
    box-shadow: inset -3px -3px 0 var(--border-dark), inset 3px 3px 0 var(--border-light), 0 6px 16px rgba(0, 0, 0, 0.5);
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    line-height: 67px;
    text-align: center;
    color: var(--text-header);
    text-shadow: 2px 2px #000;
    /* Keeps ticker text clear of the pinned top-left toggles when the bar reaches the window edge */
    padding: 0 8.5rem;
    white-space: nowrap;
}

.main-title-container span {
    display: inline-block;
    position: relative;
}

.flicker-in {
    animation: flicker-in 0.4s ease-out forwards;
}

.flicker-out {
    animation: flicker-out 0.2s ease-in forwards;
}

@keyframes flicker-in {
    0% { opacity: 0; color: #fff; transform: scale(1.5); }
    50% { opacity: 1; color: #fff; transform: scale(0.9); }
    100% { opacity: 1; color: var(--text-header); transform: scale(1); }
}

@keyframes flicker-out {
    0% { opacity: 1; color: var(--text-header); transform: scale(1); }
    100% { opacity: 0; color: #ff5555; transform: scale(0.8); }
}

/* --- Retro Panel Style --- */
.panel-retro {
    background-color: #413550;
    background-color: var(--panel-bg);
    border: 4px solid var(--border-dark);
    box-shadow: inset -3px -3px 0 var(--border-dark), inset 3px 3px 0 var(--border-light), 0 10px 25px rgba(0, 0, 0, 0.65);
    padding: 1.5rem;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* --- Core Layout Styles --- */
#core-layout {
    align-items: flex-start;
}

.info-panel {
    width: 280px;
    flex-shrink: 0;
    height: calc(100vh - 150px);
    max-height: 700px;
    overflow-y: auto;
    transition: width 0.25s ease, padding 0.25s ease;
}

.info-panel.panel-collapsed {
    height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0.75rem 1rem;
}

#center-content {
    min-width: 600px;
}

#setup-box .panel-retro {
    max-width: 700px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    margin: 0 auto;
}

/* --- Canvas & Game Area --- */
#canvas-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    margin: 0 auto;
    max-width: calc(100vh - 250px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

/* Subtle CRT scanline & dungeon vignette overlay over the arena */
#canvas-container::after {
    content: '';
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 10;
    background:
    repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.09) 3px
    ),
    radial-gradient(
    circle at center,
    transparent 65%,
    rgba(0, 0, 0, 0.38) 100%
    );
}

#gameCanvas,
#vfxCanvas,
#wallCanvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#gameCanvas {
    background-color: var(--canvas-bg);
    border: 4px solid var(--border-dark);
    box-shadow: inset -3px -3px 0 var(--border-dark), inset 3px 3px 0 var(--border-light);
}

#vfxCanvas {
    background-color: transparent;
    pointer-events: none;
}

/* --- Retro Button Style (High specificity to beat Tailwind Preflight reset) --- */
.btn-retro,
button.btn-retro {
    background-color: #2b2236;
    background-color: color-mix(in srgb, var(--panel-bg) 75%, #110d16 25%);
    border: 2px solid var(--border-dark);
    box-shadow: inset -2px -2px 0px var(--border-dark), inset 2px 2px 0px var(--border-light);
    color: var(--text-color);
    text-shadow: 1px 1px #000;
    transition: background-color 0.1s ease-out, color 0.1s ease-out, transform 0.1s ease-out;
}
/* Default size only. Kept at single-class specificity (still beats Preflight's `button { padding: 0 }`)
   so Tailwind utilities on a button (px-1, py-1, text-xs, p-2.5...) override it instead of being ignored. */
.btn-retro {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Quick-bet row (Min / 25% / 50% / MAX): four buttons must fit a 280px side panel */
button.quick-bet-btn {
    padding: 0.25rem 0.125rem;
    font-size: 0.75rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Re-seat Table: dashed "empty seat" footer at the bottom of the Rivals list */
button.reseat-all-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.25);
    border: 2px dashed var(--border-light);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
button.reseat-all-btn:hover:not(:disabled) {
    background-color: rgba(241, 196, 15, 0.12);
    border-color: var(--text-accent);
    border-style: solid;
}
button.reseat-all-btn:hover:not(:disabled) .reseat-all-icon {
    transform: rotate(-90deg);
}
button.reseat-all-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.reseat-all-icon {
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.25s ease;
}
.reseat-all-title {
    display: block;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: var(--text-accent);
    text-shadow: 1px 1px #000;
}
.reseat-all-sub {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: #a0aec0;
}
.btn-retro:hover,
button.btn-retro:hover {
    background-color: #554668;
    background-color: color-mix(in srgb, var(--panel-bg) 75%, white 25%);
    color: var(--text-accent);
}
.btn-retro:active,
button.btn-retro:active {
    box-shadow: inset 2px 2px 0px var(--border-dark), inset -2px -2px 0px var(--border-light);
    transform: translateY(2px);
}
.btn-retro:disabled,
button.btn-retro:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #2d3748;
    color: #718096;
    transform: translateY(0);
    box-shadow: inset -2px -2px 0px var(--border-dark), inset 2px 2px 0px #3c424d;
}

/* --- Special Button Styles --- */
.btn-retro-primary,
button.btn-retro-primary {
    background-color: #6b532c;
    background-color: color-mix(in srgb, var(--panel-bg) 70%, var(--text-accent) 30%);
    color: var(--text-accent);
    border: 2px solid var(--text-header);
    font-weight: bold;
    text-shadow: 1px 1px #000;
}
.btn-retro-primary:hover,
button.btn-retro-primary:hover {
    background-color: #8a6c22;
    background-color: color-mix(in srgb, var(--panel-bg) 50%, var(--text-accent) 50%);
    color: #fff;
    border-color: #cceeff;
}

/* Step Selector Pill Buttons */
.step-pill,
button.step-pill {
    font-size: 10px;
    padding: 2px 4px;
    background-color: #201826;
    background-color: var(--border-dark);
    border: 1px solid var(--border-light);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.1s;
}
.step-pill:hover,
button.step-pill:hover {
    color: var(--text-accent);
    border-color: var(--text-accent);
}
.step-pill.active,
button.step-pill.active {
    background-color: #f1c40f;
    background-color: var(--text-accent);
    color: #000;
    font-weight: bold;
    border-color: #fff;
}

/* Divine Gold Button Style */
.btn-divine,
button.btn-divine {
    background: linear-gradient(145deg, #f1c40f, #e67e22);
    color: #2c2137;
    text-shadow: 1px 1px #fff5;
    font-weight: bold;
    border-color: #f39c12;
    box-shadow: inset -2px -2px 0px #c0392b, inset 2px 2px 0px #f1c40f, 0 0 8px rgba(241, 196, 15, 0.5);
}
.btn-divine:hover,
button.btn-divine:hover {
    background: linear-gradient(145deg, #f39c12, #d35400);
    color: #fff;
}
.btn-divine:disabled,
button.btn-divine:disabled {
    background: #4a5568;
    color: #2d3748;
    text-shadow: none;
    border-color: var(--border-dark);
    box-shadow: inset -2px -2px 0px var(--border-dark), inset 2px 2px 0px #3c424d;
}

/* Appeal Menu Button Colors */
.btn-risky, button.btn-risky { background-color: #c0392b; } /* Red */
.btn-uncertain, button.btn-uncertain { background-color: #d35400; } /* Orange */
.btn-favorable, button.btn-favorable { background-color: #f1c40f; color: var(--border-dark); text-shadow: none; } /* Yellow */
.btn-certain, button.btn-certain { background-color: #27ae60; } /* Green */

/* --- Retro Inputs & Selects --- */
input, select,
input.btn-retro, select.btn-retro {
    background-color: #201826;
    background-color: var(--border-dark);
    border: 2px solid var(--border-dark);
    box-shadow: inset 2px 2px 0 #110d16, inset -2px -2px 0 #3e324b;
    color: var(--text-color);
    padding: 0.5rem;
    width: 100%;
}
input:focus, select:focus {
    outline: none;
    background-color: #110d16;
}

/* --- UI Components --- */
.cash {
    color: #2ecc71;
    font-weight: bold;
    text-shadow: 1px 1px #1e7e45;
}
.collapsible-header {
    cursor: pointer;
    user-select: none;
}
.collapsible-header:hover {
    color: var(--text-accent);
}
.selected-player-highlight {
    background-color: rgba(241, 196, 15, 0.25);
    border-left: 3px solid var(--text-accent);
}

/* Hot Streak Plaque */
.hot-streaks-header {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.875rem;
    text-align: center;
    color: var(--text-orange-400);
    background-color: var(--border-dark);
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-light);
    border-top: 2px solid var(--border-light);
}
.hot-streak-plaque {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(0,0,0,0.45);
    border: 2px solid var(--border-dark);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    box-shadow: inset -2px -2px 0px #110d16, inset 2px 2px 0px #3e324b, 0 0 10px rgba(241, 196, 15, 0.3);
}

/* --- Chat & Modals --- */
.chat-window {
    background-color: #413550;
    background-color: var(--panel-bg);
    border: 4px solid var(--border-dark);
    box-shadow: inset -3px -3px 0 var(--border-dark), inset 3px 3px 0 var(--border-light), 0 8px 20px rgba(0, 0, 0, 0.5);
    padding: 1rem;
    height: 140px;
}
.chat-messages {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}
.chat-message {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.chat-message .player-name {
    font-weight: bold;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: fadeIn 0.3s ease-out;
}
.modal-content {
    background-color: #413550;
    background-color: var(--panel-bg);
    border: 4px solid var(--border-dark);
    box-shadow: inset -3px -3px 0 var(--border-dark), inset 3px 3px 0 var(--border-light), 0 12px 30px rgba(0, 0, 0, 0.75);
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    text-align: center;
    animation: scaleUp 0.3s ease-out;
}

/* --- After-Action Report (Lag-Free Dragging) --- */
.aar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    z-index: 30;
    will-change: left, top, transform;
    transition: opacity 0.2s ease-out;
}
.aar-container .modal-content {
    width: 100%;
    max-width: none;
    text-align: left;
    padding: 1rem;
    max-height: 82vh;
    overflow-y: auto;
    animation: none;
}
.aar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-dark);
    user-select: none;
}
.aar-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.aar-content.collapsed {
    display: none;
}
.aar-container.collapsed .modal-content {
    max-height: 70px;
    padding-bottom: 1rem;
    overflow: hidden;
}
.aar-section {
    background-color: rgba(0, 0, 0, 0.35);
    padding: 0.75rem;
    border: 2px solid var(--border-dark);
}
.aar-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.875rem;
    color: var(--text-accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--border-dark);
}
.aar-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aar-value {
    font-weight: bold;
    font-size: 1.125rem;
    text-shadow: 1px 1px #000;
}
.aar-value.is-cycling {
    color: var(--text-header);
}

/* Clickable Pills & Inline Inspector Drawer in AAR */
.aar-clickable-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.aar-clickable-pill:hover,
.aar-clickable-pill.active-pill {
    background-color: rgba(241, 196, 15, 0.25);
    border-color: var(--text-accent);
}

.aar-inspector-drawer {
    background-color: rgba(15, 12, 24, 0.95);
    border: 2px solid var(--text-accent);
    padding: 0.75rem 1rem;
    animation: fadeIn 0.2s ease-out;
}

@keyframes levelUpPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #f1c40f); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 12px #ffffff); }
}
.level-up-banner {
    animation: levelUpPulse 0.8s infinite ease-in-out;
}

/* Stats Modal Bar Fill */
.stat-bar-fill {
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- Scrollbar Styling --- */
.info-panel, .chat-messages, .modal-content div[style*="overflow-y: auto"], .aar-container .modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--border-dark);
}
.info-panel::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.modal-content div[style*="overflow-y: auto"]::-webkit-scrollbar,
.aar-container .modal-content::-webkit-scrollbar {
    width: 12px;
}
.info-panel::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.modal-content div[style*="overflow-y: auto"]::-webkit-scrollbar-track,
.aar-container .modal-content::-webkit-scrollbar-track {
    background: var(--border-dark);
}
.info-panel::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.modal-content div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb,
.aar-container .modal-content::-webkit-scrollbar-thumb {
    background-color: var(--border-light);
    border: 2px solid var(--border-dark);
}

/* --- Responsive Mobile & Tablet Layout (< 1024px) --- */
@media (max-width: 1023px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
        align-items: flex-start;
    }

    .main-content-wrapper {
        height: auto;
        min-height: 100vh;
        align-items: flex-start;
        padding-top: 3.75rem;
        padding-bottom: 2.5rem;
    }

    #titleScreen {
        position: fixed;
        overflow-y: auto;
        padding: 4rem 1rem 2rem;
    }

    #core-layout {
        align-items: center;
    }

    #center-content {
        min-width: 0;
        width: 100%;
        max-width: 640px;
    }

    .info-panel {
        width: 100%;
        max-width: 640px;
        height: auto;
        max-height: 480px;
    }

    #setup-box .panel-retro {
        max-height: none;
    }

    .main-title-container {
        padding: 0 0.5rem;
        font-size: 1.15rem;
        height: 54px;
        line-height: 46px;
    }

    #canvas-container {
        max-width: min(92vw, 560px);
    }

    .aar-container {
        width: 95%;
    }

    .aar-content {
        grid-template-columns: 1fr;
    }

}

/* --- Tournament Hub: tier cards --- */
button.tier-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    padding: 0.75rem;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--border-dark);
    border-left: 4px solid var(--tier-color, var(--border-light));
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
button.tier-card:hover:not(.locked) {
    background-color: rgba(255, 255, 255, 0.06);
}
button.tier-card.selected {
    border-color: var(--tier-color, var(--text-accent));
    background-color: color-mix(in srgb, var(--tier-color, #f1c40f) 14%, rgba(0, 0, 0, 0.45));
    box-shadow: 0 0 12px color-mix(in srgb, var(--tier-color, #f1c40f) 45%, transparent);
}
button.tier-card.locked {
    opacity: 0.55;
    cursor: not-allowed;
}
button.tier-card.tier-vip:not(.locked) {
    background-image: radial-gradient(circle at 85% 20%, rgba(181, 126, 220, 0.22), transparent 60%);
}
.tier-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tier-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.tier-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    color: var(--tier-color, var(--text-accent));
    text-shadow: 1px 1px #000;
}
.tier-prize {
    font-size: 0.8rem;
    font-weight: bold;
    color: #2ecc71;
}
.tier-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
}
.tier-lock {
    color: #b57edc;
}
.tier-details {
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-dark);
    border-top: 2px solid var(--tier-color, var(--border-light));
    padding: 0.75rem;
}

/* --- Between-round perk picker --- */
button.perk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--border-light);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
button.perk-card:hover {
    border-color: var(--text-accent);
    background-color: rgba(241, 196, 15, 0.12);
    transform: translateY(-2px);
}
.perk-key {
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55rem;
    color: #a0aec0;
}
.perk-icon {
    font-size: 2rem;
    line-height: 1;
}
.perk-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: var(--text-accent);
    text-align: center;
}
.perk-desc {
    font-size: 0.75rem;
    color: #cbd5e0;
    text-align: center;
}

/* --- Dungeon Master title --- */
.title-earned {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    color: #d6b4f5;
    text-shadow: 0 0 8px rgba(181, 126, 220, 0.7), 1px 1px #000;
}

/* --- Champion stat pips (ATK / DEF / SPD) --- */
.stat-pips {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.6rem;
    color: #a0aec0;
    letter-spacing: 0.02em;
}
.stat-pips > span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.stat-pip {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.15);
}
.stat-pip.on {
    background-color: var(--text-accent);
}

/* --- Labyrinth seeds & shop previews --- */
.labyrinth-preview {
    image-rendering: pixelated;
    border: 2px solid var(--border-light, #555);
    box-shadow: 2px 2px 0 #000;
}
#mapSeedInput::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

/* --- Round Cleared: map line --- */
.aar-map-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-dark);
    font-size: 0.75rem;
}
.aar-map-label {
    flex-shrink: 0;
    padding-top: 0.1rem;
}
.aar-map-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 0;
    text-align: right;
}
.aar-map-name {
    font-weight: bold;
    line-height: 1.35;
    overflow-wrap: break-word;
    text-shadow: 1px 1px #000;
}
.aar-map-seed {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #fde047;
    letter-spacing: 0.06em;
    white-space: nowrap;
    user-select: all;
}

/* =====================================================================================================================
   STONE & RUNES UI (v2.0)
   Carved-stone panels, slab buttons and glowing runes, layered over the existing classes so every screen picks it up.
   Each cosmetic theme recolors the stone and the rune glow (the board art uses the same palette in sprite-art.js).
   ===================================================================================================================== */
:root {
    --stone: #4a4256;            /* panel stone */
    --stone-hi: #6b6079;         /* lit edge */
    --stone-lo: #29232f;         /* shadowed edge */
    --mortar: #151019;           /* joints, frames */
    --rune: #8fd4ff;             /* rune glow */
    --rune-soft: rgba(143, 212, 255, 0.35);
    --gold: #f2c14e;             /* primary action / prize */
    --gold-deep: #9a6a1c;
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
    --panel-bg: var(--stone);
    --border-light: var(--stone-hi);
    --border-dark: var(--mortar);
    --canvas-bg: #0d0a11;
    --stone-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --rune-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='14'%3E%3Cpath d='M2 1V13M2 4L8 1M2 7L8 4M18 13V1L24 5V13M34 1V13M34 4L39 7L34 10M50 1V13M50 1L56 5M50 5L56 9M66 13V1L71 4L66 7L72 13M88 1L82 7L88 13M98 1L104 13M104 1L98 13M114 13V1L119 4L114 7M130 1V13M136 1V13M130 5L136 9M149 1V13M146 5L152 9M165 1V13M178 13L184 6L181 1L178 6L184 13' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --stone-veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .03' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.12'/%3E%3C/svg%3E");
}
.theme-inferno { --stone: #51322a; --stone-hi: #78493c; --stone-lo: #2a1612; --mortar: #120705; --rune: #ff8a3a; --rune-soft: rgba(255, 138, 58, 0.38); --canvas-bg: #120705; }
.theme-neon    { --stone: #2c2849; --stone-hi: #463f70; --stone-lo: #16132b; --mortar: #07061a; --rune: #e040ff; --rune-soft: rgba(224, 64, 255, 0.4); --canvas-bg: #07061a; }
.theme-iceage  { --stone: #57687b; --stone-hi: #8094a8; --stone-lo: #34404d; --mortar: #1a2129; --rune: #9be8ff; --rune-soft: rgba(155, 232, 255, 0.4); --canvas-bg: #141c24; }
.theme-dark    { --stone: #2f2f34; --stone-hi: #48484f; --stone-lo: #1a1a1d; --mortar: #09090a; --rune: #e8e8e8; --rune-soft: rgba(232, 232, 232, 0.28); --canvas-bg: #050506; }
.theme-glass   { --stone: rgba(72, 60, 98, 0.82); --stone-hi: rgba(124, 108, 164, 0.86); --stone-lo: rgba(36, 28, 52, 0.86); --mortar: rgba(18, 13, 28, 0.92); --rune: #cbb8ff; --rune-soft: rgba(203, 184, 255, 0.38); --canvas-bg: #120e1c; }

body { font-family: var(--font-body); font-size: 15px; }
body::after {
    /* torch-lit vignette over the background art */
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.6) 100%);
}

/* Carved lettering replaces the pixel font everywhere it was used */
.font-press-start,
.main-title-container,
.aar-title,
.hot-streaks-header,
.reseat-all-title,
.tier-name,
.perk-name {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.03em;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.02em; }

/* --- Stone surfaces --- */
.panel-retro,
.chat-window,
.modal-content {
    position: relative;
    background-color: var(--stone);
    background-image:
        radial-gradient(circle at 9px 9px, var(--rune) 0 1.6px, transparent 3px),
        radial-gradient(circle at calc(100% - 9px) 9px, var(--rune) 0 1.6px, transparent 3px),
        radial-gradient(circle at 9px calc(100% - 9px), var(--rune) 0 1.6px, transparent 3px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--rune) 0 1.6px, transparent 3px),
        var(--stone-veins),
        var(--stone-noise),
        linear-gradient(165deg, var(--stone-hi) 0%, var(--stone) 34%, var(--stone-lo) 100%);
    background-blend-mode: normal, normal, normal, normal, multiply, overlay, normal;
    border: 3px solid var(--mortar);
    border-radius: 6px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.09),
        inset 0 -3px 0 rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 16px 32px rgba(0, 0, 0, 0.6);
}
/* A band of carved runes glowing faintly along the top of panels and dialogs */
.panel-retro::before,
.modal-content::before {
    content: '';
    position: absolute; top: 4px; left: 22px; right: 22px; height: 10px;
    background: var(--rune);
    -webkit-mask: var(--rune-band) repeat-x center / auto 10px;
    mask: var(--rune-band) repeat-x center / auto 10px;
    filter: drop-shadow(0 0 3px var(--rune));
    pointer-events: none;
    animation: rune-breathe 5s ease-in-out infinite;
}
@keyframes rune-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

/* Recessed wells inside panels */
.aar-section,
.hot-streak-plaque,
.tier-details,
.chat-messages {
    background-color: rgba(0, 0, 0, 0.28);
    border: 2px solid var(--mortar);
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.chat-messages { padding: 0.4rem 0.6rem; }

/* --- Slab buttons --- */
.btn-retro,
button.btn-retro,
.title-btn,
button.title-btn {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text-color);
    background-color: var(--stone);
    background-image: var(--stone-noise), linear-gradient(180deg, var(--stone-hi) 0%, var(--stone) 45%, var(--stone-lo) 100%);
    background-blend-mode: overlay, normal;
    border: 2px solid var(--mortar);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.08s ease, filter 0.15s ease;
}
.btn-retro:hover,
button.btn-retro:hover,
.title-btn:hover,
button.title-btn:hover {
    background-color: var(--stone);
    color: #fff;
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px var(--rune-soft), 0 0 14px var(--rune-soft);
}
.btn-retro:active,
button.btn-retro:active,
.title-btn:active,
button.title-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rune-soft);
}
.btn-retro:focus-visible,
.title-btn:focus-visible,
.view-toggle button:focus-visible {
    outline: 2px solid var(--rune);
    outline-offset: 2px;
}
.btn-retro:disabled,
button.btn-retro:disabled {
    filter: grayscale(0.7) brightness(0.75);
    color: #9a93a3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
    transform: none;
}

/* Title tablets: bigger slabs with a rune underline that lights up on hover */
.title-btn,
button.title-btn {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    padding: 1rem 2rem;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 10px 22px rgba(0, 0, 0, 0.6);
}
.title-btn::after {
    content: ''; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 2px; border-radius: 2px;
    background: var(--rune); opacity: 0.25; box-shadow: 0 0 8px var(--rune); transition: opacity 0.2s, left 0.2s, right 0.2s;
}
.title-btn:hover::after { opacity: 0.9; left: 12%; right: 12%; }

/* Primary action: gilded slab */
.btn-retro-primary,
button.btn-retro-primary {
    color: #2a1a06;
    background-color: var(--gold);
    background-image: var(--stone-noise), linear-gradient(180deg, #ffe08a 0%, var(--gold) 45%, var(--gold-deep) 100%);
    border-color: #3a2508;
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.btn-retro-primary:hover,
button.btn-retro-primary:hover {
    color: #1a0f02;
    background-color: var(--gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 0 16px rgba(242, 193, 78, 0.55);
}
.btn-divine,
button.btn-divine {
    color: #2a1a06;
    background-image: var(--stone-noise), linear-gradient(180deg, #ffe08a, #f39c12 55%, #b35a0a);
    border-color: #3a2508;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 0 12px rgba(243, 156, 18, 0.45);
}

/* Appeal offerings keep their risk colours, carved into stone */
.btn-risky, button.btn-risky { background-image: var(--stone-noise), linear-gradient(180deg, #e0574a, #a3281d); color: #fff; }
.btn-uncertain, button.btn-uncertain { background-image: var(--stone-noise), linear-gradient(180deg, #f07f2e, #a94300); color: #fff; }
.btn-favorable, button.btn-favorable { background-image: var(--stone-noise), linear-gradient(180deg, #ffe07a, #c99a0c); color: #2a1a06; text-shadow: none; }
.btn-certain, button.btn-certain { background-image: var(--stone-noise), linear-gradient(180deg, #46d184, #1d7f47); color: #fff; }

/* Pills and step selectors */
.step-pill,
button.step-pill {
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--stone-hi);
}
.step-pill.active,
button.step-pill.active {
    background: var(--gold);
    color: #1a0f02;
    border-color: #fff3c4;
    box-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

/* --- Recessed inputs --- */
input, select,
input.btn-retro, select.btn-retro {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.42);
    background-image: none;
    border: 2px solid var(--mortar);
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
    filter: none;
}
input:focus, select:focus {
    background-color: rgba(0, 0, 0, 0.55);
    border-color: var(--rune);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--rune-soft);
}
select option { background: #1a1520; color: #e9e2d4; }

/* --- Title screen --- */
.title-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #efe4cc;
    text-shadow: 0 2px 0 #3a2f45, 0 4px 0 #1c1622, 0 0 24px var(--rune-soft), 0 0 60px var(--rune-soft);
}

/* --- Event ticker: a carved stone lintel --- */
.main-title-container {
    font-size: 1.9rem;
    font-weight: 800;
    color: #efe4cc;
    background-color: var(--stone-lo);
    background-image: var(--stone-veins), var(--stone-noise), linear-gradient(180deg, var(--stone) 0%, var(--stone-lo) 100%);
    background-blend-mode: multiply, overlay, normal;
    border: 3px solid var(--mortar);
    border-radius: 6px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55);
    text-shadow: 0 2px 0 #000, 0 0 18px var(--rune-soft);
}
@keyframes flicker-in {
    0% { opacity: 0; color: #fff; transform: scale(1.3); text-shadow: 0 0 30px var(--rune); }
    60% { opacity: 1; color: #fff; transform: scale(0.97); }
    100% { opacity: 1; color: #efe4cc; transform: scale(1); }
}

/* --- Header stats --- */
#game-header-stats p {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--mortar);
    border-radius: 4px;
    padding: 0.2rem 0.8rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- Board frame: the arena sits in a stone surround with a faint rune glow --- */
#canvas-container {
    border-radius: 6px;
    background: var(--canvas-bg);
    box-shadow:
        0 0 0 3px var(--mortar),
        0 0 0 9px var(--stone),
        0 0 0 11px var(--mortar),
        0 0 22px 11px var(--rune-soft),
        0 18px 38px rgba(0, 0, 0, 0.7);
    margin-top: 12px;
    margin-bottom: 12px;
}
#canvas-container.view-iso {
    /* 16:11 window onto the board, as wide as the column allows while staying within the screen height */
    max-width: calc((100vh - 235px) * 16 / 11);
}
#canvas-container.view-iso #gameCanvas { cursor: grab; touch-action: none; }
#canvas-container #gameCanvas, #canvas-container #vfxCanvas { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
#canvas-container.view-iso #gameCanvas.is-panning { cursor: grabbing; }
/* Wider game layout on big screens gives the board more room */
#mainGame { max-width: min(1720px, 100%); }
#canvas-container::after {
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
}
#gameCanvas,
#vfxCanvas,
#wallCanvas {
    image-rendering: auto;
}
#gameCanvas {
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    background-color: var(--canvas-bg);
}

/* Angled / Top-down switch on the board */
.view-toggle {
    position: absolute; top: 10px; right: 10px; z-index: 20;
    display: inline-flex; overflow: hidden;
    border: 2px solid var(--mortar); border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.view-toggle button {
    font: 700 12px/1 var(--font-body);
    letter-spacing: 0.03em;
    color: var(--text-color);
    padding: 6px 10px;
    background-color: var(--stone);
    background-image: var(--stone-noise), linear-gradient(180deg, var(--stone-hi), var(--stone-lo));
    background-blend-mode: overlay, normal;
    border-right: 1px solid var(--mortar);
    cursor: pointer;
    opacity: 0.85;
}
.view-toggle button:last-child { border-right: 0; }
.view-toggle button:hover { opacity: 1; }
.view-toggle button[aria-pressed="true"] {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 8px var(--rune);
    box-shadow: inset 0 -2px 0 var(--rune), inset 0 0 12px var(--rune-soft);
}

/* --- Modals --- */
.modal-overlay {
    background: radial-gradient(ellipse at center, rgba(10, 6, 14, 0.72) 0%, rgba(0, 0, 0, 0.9) 100%);
}
.modal-content { padding: 2.25rem 2rem 2rem; }

/* --- Section headings inside panels get a carved rule --- */
.info-panel h3,
.panel-retro > h2 {
    text-shadow: 0 1px 0 #000, 0 0 10px var(--rune-soft);
}
.hot-streaks-header {
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid var(--stone-hi);
    border-bottom: 1px solid var(--stone-hi);
    color: var(--gold);
}
.selected-player-highlight {
    background-color: rgba(242, 193, 78, 0.16);
    border-left: 3px solid var(--gold);
    box-shadow: inset 0 0 12px rgba(242, 193, 78, 0.15);
}

/* --- Tier, perk and shop cards adopt carved stone --- */
button.tier-card,
button.perk-card,
.shop-item {
    border-radius: 6px;
}
button.tier-card.selected,
button.perk-card:hover {
    box-shadow: 0 0 0 2px var(--rune), 0 0 18px var(--rune-soft);
}
.aar-clickable-pill { border-radius: 3px; border-color: var(--stone-hi); }

/* --- Scrollbars carved to match --- */
.info-panel, .chat-messages, .modal-content div[style*="overflow-y: auto"], .aar-container .modal-content {
    scrollbar-color: var(--stone-hi) rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .panel-retro::before, .modal-content::before { animation: none; }
}

/* Card titles were sized for the wide pixel font; the carved serif needs a little more size */
.tier-name { font-size: 0.85rem; }
.perk-name { font-size: 0.85rem; }
.reseat-all-title { font-size: 0.78rem; }
.aar-title { font-size: 0.95rem; }
.hot-streaks-header { font-size: 0.9rem; }
/* Small cards inside a dialog keep the stone but skip the rune band, so only main panels carry it */
.shop-item.panel-retro::before,
.modal-content .panel-retro::before { display: none; }

/* Zoom buttons for the angled camera (hidden in the top-down view) */
.zoom-controls {
    position: absolute; top: 44px; right: 10px; z-index: 20;
    display: none; overflow: hidden;
    border: 2px solid var(--mortar); border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
#canvas-container.view-iso .zoom-controls { display: inline-flex; }
.zoom-controls button {
    font: 700 13px/1 var(--font-body);
    min-width: 30px; padding: 6px 8px;
    color: var(--text-color);
    background-color: var(--stone);
    background-image: var(--stone-noise), linear-gradient(180deg, var(--stone-hi), var(--stone-lo));
    background-blend-mode: overlay, normal;
    border-right: 1px solid var(--mortar);
    cursor: pointer;
}
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { color: #fff; text-shadow: 0 0 8px var(--rune); }
.zoom-controls button:focus-visible { outline: 2px solid var(--rune); outline-offset: -2px; }

/* GPU board layer sits under the 2D canvas; the 2D canvas must be see-through for it */
#gameCanvas { background-color: transparent; }
#glBoardCanvas { border-radius: 6px; }

/* =====================================================================================================================
   COMMAND TABLE LAYOUT (v2.1)
   Slim header (audio toggles · event ticker · purse), then three columns: left rail | board | right rail.
   Rails show every section at once and scroll with a stone "slider" when they run long. The board fills the centre.
   Chat lives on the board as a two-line log that opens on hover and pins open on click. Tab (or ⇔ Focus) folds the
   rails into thin labelled strips for a near full-screen board.
   ===================================================================================================================== */
:root { --rail-w: 272px; --rail-fold-w: 40px; --header-h: 56px; }

#mainGame:not(.hidden) {
    width: 100%;
    max-width: min(1880px, 100%);
    height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-header {
    flex: 0 0 var(--header-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-left: 16rem; /* clears the pinned 🎵 🔊 ⚡ 👁 ⚙ toggles */
}
.game-header .main-title-container {
    height: var(--header-h);
    line-height: calc(var(--header-h) - 6px);
    margin: 0;
    padding: 0 1rem;
    font-size: 1.45rem;
    min-width: 0;
}
.game-header-stats {
    display: flex;
    gap: 8px;
    font-size: 0.72rem;
    white-space: nowrap;
}
.game-header-stats.hidden { display: none; }

#core-layout.core-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
    gap: 14px;
    align-items: stretch;
    transition: grid-template-columns 0.25s ease;   /* (Batch 36: the original fold is back, by request) */
}

/* Rails: everything visible, scrolls when long */
#core-layout .info-panel {
    width: auto;
    height: 100%;
    max-height: none;
    min-height: 0;
    padding: 1rem 0.9rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
#core-layout .info-panel.hidden { display: none; }
#core-layout .info-panel.panel-collapsed { height: 100%; }

/* The slider: a carved stone thumb in a mortar groove */
#core-layout .info-panel { scrollbar-width: thin; scrollbar-color: var(--stone-hi) rgba(0, 0, 0, 0.35); }
#core-layout .info-panel::-webkit-scrollbar { width: 10px; }
#core-layout .info-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--mortar);
}
#core-layout .info-panel::-webkit-scrollbar-thumb {
    background-color: var(--stone-hi);
    background-image: linear-gradient(180deg, var(--stone-hi), var(--stone-lo));
    border: 2px solid rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    box-shadow: 0 0 6px var(--rune-soft);
}
#core-layout .info-panel::-webkit-scrollbar-thumb:hover { background-color: var(--rune); background-image: none; }

/* Rail contents flex to the rail width */
#core-layout .info-panel .speed-btn { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
#core-layout .info-panel .btn-retro { max-width: 100%; }

/* Centre column */
#center-content.center-content {
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
#center-content #setup-box { margin: auto 0; }
#center-content #setup-box.hidden { display: none; }
#setup-box .panel-retro { max-height: none; }
#match-container:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#core-layout #canvas-container,
#core-layout #canvas-container.view-iso {
    flex: 0 0 auto;
    max-width: none;
    margin: 14px;
}

/* Fold toggle, top-left of the board */
.rails-toggle {
    position: absolute; top: 10px; left: 10px; z-index: 20;
    font: 700 12px/1 var(--font-body);
    letter-spacing: 0.03em;
    color: var(--text-color);
    padding: 6px 10px;
    border: 2px solid var(--mortar); border-radius: 4px;
    background-color: var(--stone);
    background-image: var(--stone-noise), linear-gradient(180deg, var(--stone-hi), var(--stone-lo));
    background-blend-mode: overlay, normal;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0.85;
}
.rails-toggle:hover, .rails-toggle[aria-pressed="true"] { opacity: 1; color: #fff; text-shadow: 0 0 8px var(--rune); }
.rails-toggle:focus-visible { outline: 2px solid var(--rune); outline-offset: 2px; }
/* The same button on the setup panel (v2.x setup rails): top-left, clear of the rune strip */
.setup-rails-toggle { top: 26px; left: 16px; }

/* Folded rails: thin strips carrying a vertical label (desktop only) */
@media (min-width: 1100px) {
#mainGame.rails-folded #core-layout.core-layout {
    grid-template-columns: var(--rail-fold-w) minmax(0, 1fr) var(--rail-fold-w);
}
#mainGame.rails-folded #core-layout .info-panel {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
#mainGame.rails-folded #core-layout .info-panel > * { display: none !important; }
#mainGame.rails-folded #core-layout .info-panel::after {
    content: attr(data-rail-label) "  ›";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl;
    font: 700 0.8rem/1 var(--font-display, 'Cinzel', serif);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-header);
    text-shadow: 0 0 10px var(--rune-soft);
    white-space: nowrap;
}
#mainGame.rails-folded #left-info-panel::after { transform: rotate(180deg); }
#mainGame.rails-folded #core-layout .info-panel:hover::after { color: #fff; text-shadow: 0 0 12px var(--rune); }

}

/* Smart chat: the newest two lines on the board, opens on hover, click pins */
#chat-window.chat-window {
    position: absolute;
    left: 10px; bottom: 10px;
    z-index: 18;
    width: min(46%, 440px);
    height: auto;
    margin: 0;
    padding: 0.35rem 0.6rem 0.4rem;
    border: 2px solid var(--mortar);
    border-radius: 5px;
    background: rgba(16, 12, 20, 0.62);
    background-image: none;
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.18s ease, width 0.18s ease;
}
#chat-window .chat-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font: 700 0.68rem/1.2 var(--font-display, 'Cinzel', serif);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-header);
    margin-bottom: 2px;
}
#chat-window .chat-hint { font: 400 0.66rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; opacity: 0.55; }
#chat-window .chat-messages {
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: calc(2 * 1.45 * 0.82rem + 1px);
    overflow: hidden;
}
#chat-window .chat-message { flex: 0 0 auto; margin: 0; font-size: 0.82rem; line-height: calc(1.45 * 0.82rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-window:hover .chat-message + .chat-message,
#chat-window.expanded .chat-message + .chat-message { margin-top: 0.25rem; }
#chat-window:hover,
#chat-window.expanded {
    width: min(62%, 520px);
    background: rgba(16, 12, 20, 0.86);
}
#chat-window:hover .chat-messages,
#chat-window.expanded .chat-messages {
    max-height: min(38vh, 260px);
    overflow-y: auto;
}
#chat-window:hover .chat-message,
#chat-window.expanded .chat-message { white-space: normal; overflow: visible; }
#chat-window.expanded { border-color: var(--rune); box-shadow: 0 0 12px var(--rune-soft), 0 6px 16px rgba(0, 0, 0, 0.5); }
#chat-window.expanded .chat-hint::before { content: "pinned · "; }

/* The round report floats over the board column */
#center-content > .aar-container { z-index: 30; }

/* Narrower desktops: slimmer rails */
@media (max-width: 1400px) {
    :root { --rail-w: 240px; }
    .game-header .main-title-container { font-size: 1.15rem; }
}

/* Small screens: stack board above the rails and let the page scroll */
@media (max-width: 1099px) {
    #mainGame:not(.hidden) { height: auto; }
    .game-header { grid-template-columns: 1fr; padding-left: 0; padding-top: 2.75rem; }
    .game-header-stats { justify-content: center; }
    #core-layout.core-layout,
    #mainGame.rails-folded #core-layout.core-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #center-content.center-content { order: -1; width: 100%; height: auto; overflow: visible; }
    #match-container:not(.hidden) { height: min(78vh, 760px); flex: none; width: 100%; }
    #core-layout .info-panel { width: 100%; max-width: 640px; height: auto; max-height: 480px; }
    .rails-toggle { display: none; }
}

/* =====================================================================================================================
   BACKGROUND EFFECTS & DIVINE CHROME (v2.2)
   ===================================================================================================================== */
/* Foreground sweep for big interventions (renderer._drawSweep); never blocks clicks */
#fgVfxCanvas {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    z-index: 70;
    pointer-events: none;
}

/* A: the angled board floats in the scene. The empty space around the labyrinth lets the background show through */
#core-layout #canvas-container.view-iso {
    background: radial-gradient(ellipse at center, rgba(10, 8, 16, 0.55) 0%, rgba(10, 8, 16, 0.18) 70%, rgba(10, 8, 16, 0.06) 100%);
}
#core-layout #canvas-container.view-iso::after {
    background: radial-gradient(ellipse at center, transparent 70%, rgba(0, 0, 0, 0.25) 100%);
}

/* B: while an intervention is active, runes, borders and the board frame take on its colour and pulse */
body.divine-on .panel-retro,
body.divine-on .main-title-container,
body.divine-on #canvas-container,
body.divine-on #chat-window {
    --rune: var(--divine);
    --rune-soft: var(--divine-soft);
}
body.divine-on #core-layout .info-panel,
body.divine-on .main-title-container {
    border-color: var(--divine);
    animation: divine-panel-pulse 1.6s ease-in-out infinite;
}
body.divine-on #core-layout #canvas-container {
    animation: divine-frame-pulse 1.6s ease-in-out infinite;
}
body.divine-big #core-layout .info-panel,
body.divine-big .main-title-container { animation-duration: 0.9s; }
body.divine-big #core-layout #canvas-container { animation-duration: 0.9s; }
@keyframes divine-panel-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px var(--divine-soft), 0 0 10px var(--divine-soft), 0 10px 25px rgba(0, 0, 0, 0.65); }
    50%      { box-shadow: inset 0 0 18px var(--divine-soft), 0 0 26px var(--divine), 0 10px 25px rgba(0, 0, 0, 0.65); }
}
@keyframes divine-frame-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--mortar), 0 0 0 9px var(--stone), 0 0 0 11px var(--divine), 0 0 22px 11px var(--divine-soft), 0 18px 38px rgba(0, 0, 0, 0.7); }
    50%      { box-shadow: 0 0 0 3px var(--mortar), 0 0 0 9px var(--stone), 0 0 0 11px var(--divine), 0 0 46px 18px var(--divine), 0 18px 38px rgba(0, 0, 0, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
    body.divine-on #core-layout .info-panel,
    body.divine-on .main-title-container,
    body.divine-on #core-layout #canvas-container { animation: none; }
}

/* =====================================================================================================================
   EVENT TICKER (v2.2): tiers, champion chips, live standings bar, hover history
   ===================================================================================================================== */
.ticker-wrap { position: relative; min-width: 0; height: var(--header-h); }
.ticker-wrap .main-title-container { height: 100%; cursor: default; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
#event-ticker-span {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    max-width: 100%; vertical-align: middle;
    line-height: 1.2; transform: translateY(-3px);
}
#event-ticker-span .tk-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#event-ticker-span .tk-icon { flex: none; font-size: 0.9em; filter: drop-shadow(0 0 6px var(--tk-color, var(--rune))); }
#event-ticker-span.tk-idle { opacity: 0.85; letter-spacing: 0.04em; }

/* Champion chip: colour dot + name; your champion gets a star */
.tk-chip { display: inline-flex; align-items: center; gap: 0.3em; color: #fff; }
.tk-dot {
    display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%;
    background: var(--c); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 10px var(--c);
}
.tk-star { color: #ffd54a; font-size: 0.8em; text-shadow: 0 0 8px rgba(255, 213, 74, 0.8); }
.tk-chip-mine { text-decoration: underline; text-decoration-color: rgba(255, 213, 74, 0.7); text-underline-offset: 0.2em; }
.tk-who { color: #e9dcc0; font-style: italic; }
.tk-sub { font-size: 0.72em; opacity: 0.85; font-weight: 600; }
.tk-sub .tk-chip { font-size: 1.1em; }
.tk-spell { color: var(--c); text-shadow: 0 0 12px var(--c), 0 2px 0 #000; }
.tk-count { font-size: 0.75em; color: #ffd54a; margin-left: 0.15em; }
.tk-loss { color: #ff6b6b; font-size: 0.85em; }

/* Tiers */
#event-ticker-span.tk-minor { font-size: 0.72em; font-weight: 700; animation: tk-slide 0.35s ease-out both; }
#event-ticker-span.tk-major { animation: flicker-in 0.4s ease-out both; }
#event-ticker-span.tk-legendary { font-size: 1.06em; animation: tk-pop 0.6s cubic-bezier(.2, 1.4, .4, 1) both; }
#event-ticker-span.tk-legendary .tk-text {
    background: linear-gradient(90deg, #fff6d0 0%, #ffd54a 30%, #fff 50%, #ffd54a 70%, #fff6d0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: tk-shimmer 1.8s linear infinite;
}
#event-ticker-span.tk-legendary .tk-text .tk-chip,
#event-ticker-span.tk-legendary .tk-text .tk-spell { -webkit-text-fill-color: currentColor; }
#event-ticker-span.tk-legendary .tk-text { -webkit-text-fill-color: transparent; }
@keyframes tk-slide { from { opacity: 0; transform: translate(40px, -3px); } to { opacity: 1; transform: translate(0, -3px); } }
@keyframes tk-pop { 0% { opacity: 0; transform: translateY(-3px) scale(1.5); } 100% { opacity: 1; transform: translateY(-3px) scale(1); } }
@keyframes tk-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* Flares on the lintel */
.main-title-container.tk-flare-major { animation: tk-flare 0.9s ease-out; }
.main-title-container.tk-flare-legendary { animation: tk-flare-big 1.6s ease-out; }
.main-title-container.tk-flare-legendary::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 110%, var(--tk-color) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 120%, #ffd54a 0 1.5px, transparent 3px),
        radial-gradient(circle at 47% 115%, var(--tk-color) 0 2px, transparent 3px),
        radial-gradient(circle at 63% 125%, #ffb347 0 1.5px, transparent 3px),
        radial-gradient(circle at 81% 112%, var(--tk-color) 0 2px, transparent 3px),
        radial-gradient(circle at 93% 122%, #ffd54a 0 1.5px, transparent 3px);
    animation: tk-embers 1.6s ease-out forwards;
}
@keyframes tk-flare {
    0% { box-shadow: inset 0 0 30px var(--tk-color), 0 0 24px var(--tk-color), 0 12px 26px rgba(0, 0, 0, 0.55); border-color: var(--tk-color); }
    100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55); }
}
@keyframes tk-flare-big {
    0% { box-shadow: inset 0 0 60px var(--tk-color), 0 0 50px var(--tk-color), 0 12px 26px rgba(0, 0, 0, 0.55); border-color: var(--tk-color); }
    40% { box-shadow: inset 0 0 30px var(--tk-color), 0 0 30px var(--tk-color), 0 12px 26px rgba(0, 0, 0, 0.55); border-color: var(--tk-color); }
    100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 12px 26px rgba(0, 0, 0, 0.55); }
}
@keyframes tk-embers { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }

/* Your stake: gold frame */
.main-title-container.tk-mine { border-color: #ffd54a; box-shadow: inset 0 0 0 1px rgba(255, 213, 74, 0.6), 0 0 18px rgba(255, 213, 74, 0.45), 0 12px 26px rgba(0, 0, 0, 0.55); }

/* Live standings bar along the bottom of the lintel */
.standings-bar {
    position: absolute; left: 10px; right: 10px; bottom: 5px; height: 7px;
    display: flex; gap: 1px; overflow: visible;
    border-radius: 4px; background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease;
}
.standings-bar.is-empty { opacity: 0; }
.standings-bar .st-seg {
    position: relative; flex: 0 1 0; min-width: 0; flex-basis: 0;
    background: var(--c); border-radius: 2px;
    box-shadow: 0 0 6px var(--c);
    transition: flex-grow 0.6s ease;
}
.standings-bar .st-seg.st-out { box-shadow: none; }
.standings-bar .st-rest { flex: 0 1 0; flex-basis: 0; transition: flex-grow 0.6s ease; }
.standings-bar .st-mine { outline: 1.5px solid #ffd54a; outline-offset: 1px; z-index: 1; }
.standings-bar .st-mine::after {
    content: "★"; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
    font: 700 10px/1 var(--font-body); color: #ffd54a; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

/* Hover history */
.ticker-history {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: min(560px, 100%); max-height: 50vh; overflow-y: auto;
    z-index: 60;
    padding: 0.5rem 0.4rem 0.4rem;
    background: rgba(18, 14, 24, 0.95);
    border: 2px solid var(--mortar); border-radius: 6px;
    box-shadow: 0 0 0 1px var(--rune-soft), 0 14px 30px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    font: 500 0.85rem/1.35 var(--font-body);
}
.ticker-history.hidden { display: none; }
.ticker-history .th-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0.4rem 0.35rem; font: 700 0.7rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-header); }
.ticker-history .th-head span { font: 400 0.68rem/1 var(--font-body); letter-spacing: 0; text-transform: none; opacity: 0.6; }
.ticker-history ol { list-style: none; margin: 0; padding: 0; }
.ticker-history li {
    display: grid; grid-template-columns: 2.6rem 1.4rem minmax(0, 1fr); align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.4rem; border-left: 3px solid transparent; border-radius: 3px;
}
.ticker-history li + li { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.ticker-history li.th-has-cell { cursor: pointer; }
.ticker-history li.th-has-cell:hover { background: rgba(255, 255, 255, 0.06); }
.ticker-history li.th-major { border-left-color: var(--c); }
.ticker-history li.th-legendary { border-left-color: var(--c); background: linear-gradient(90deg, rgba(255, 213, 74, 0.08), transparent 60%); font-weight: 700; }
.ticker-history li.th-mine { box-shadow: inset 0 0 0 1px rgba(255, 213, 74, 0.35); }
.ticker-history time { font: 600 0.72rem/1 var(--font-body); opacity: 0.55; font-variant-numeric: tabular-nums; }
.ticker-history .th-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-history .th-empty { padding: 0.6rem; opacity: 0.7; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    #event-ticker-span.tk-legendary .tk-text, .main-title-container.tk-flare-legendary::before { animation: none; }
}
.main-title-container .tk-chip { display: inline-flex; }
.main-title-container .tk-text { display: inline-block; }
#event-ticker-span.tk-legendary .tk-text { text-shadow: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px var(--tk-color, #ffd54a)); }
#event-ticker-span.tk-legendary .tk-text .tk-spell { text-shadow: none; }
#event-ticker-span.tk-legendary .tk-text .tk-sub { -webkit-text-fill-color: #e9dcc0; }

/* =====================================================================================================================
   ROUND CLOCK & SUDDEN DEATH COUNTDOWN (v2.3): keystone numeral, beat, victory
   ===================================================================================================================== */
.keystone {
    position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
    z-index: 19; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
}
.keystone.hidden { display: none; }
.keystone { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.ks-stone {
    position: relative; isolation: isolate;
    min-width: 92px; padding: 6px 18px 10px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ks-stone::before {   /* the keystone wedge */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-color: var(--mortar);
    clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.ks-stone > .ks-num, .ks-stone > .ks-glyph { position: relative; }
.ks-face {
    position: absolute; inset: 0 3px 3px; z-index: -1;
    background-color: var(--stone);
    background-image: var(--stone-veins), var(--stone-noise), linear-gradient(180deg, var(--stone-hi) 0%, var(--stone) 45%, var(--stone-lo) 100%);
    background-blend-mode: multiply, overlay, normal;
    clip-path: polygon(0 0, 100% 0, 86.5% 100%, 13.5% 100%);
}

.ks-num {
    font: 800 1.15rem/1 var(--font-display);
    letter-spacing: 0.06em;
    color: #efe4cc;
    text-shadow: 0 2px 0 #000, 0 0 12px var(--rune-soft);
    font-variant-numeric: tabular-nums;
}
.ks-glyph { font-size: 0.85rem; opacity: 0.8; }

/* Round clock mode: small, quiet; the last 10 seconds before overtime glow */
.keystone.ks-clock .ks-stone { min-width: 84px; padding: 4px 16px 8px; }
.keystone.ks-warn .ks-num { color: #ffd2b0; text-shadow: 0 2px 0 #000, 0 0 14px #ff6b3d; animation: ks-warn 0.8s ease-in-out infinite; }
@keyframes ks-warn { 50% { text-shadow: 0 2px 0 #000, 0 0 22px #ff3b1a; } }

/* Countdown mode: a big carved numeral */
.keystone.ks-countdown .ks-glyph { display: none; }
.keystone.ks-countdown .ks-stone { min-width: 132px; padding: 4px 26px 14px; }
.keystone.ks-countdown .ks-num {
    font-size: 3.1rem;
    color: #f4ead2;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.45);
    text-shadow: 0 3px 0 #2a2230, 0 5px 0 #120e16, 0 0 20px var(--rune-soft), 0 0 40px var(--rune-soft);
}
.keystone.ks-urgent .ks-num { color: #ffd0c2; text-shadow: 0 3px 0 #3a1010, 0 5px 0 #140606, 0 0 24px #ff3b1a, 0 0 50px rgba(255, 40, 20, 0.6); animation: ks-heart 0.5s ease-out; }
.keystone.ks-urgent .ks-stone::before { background-color: #8a2a1a; }
.keystone.ks-urgent .ks-face { background-image: radial-gradient(ellipse at center, rgba(255, 60, 20, 0.35), transparent 75%), var(--stone-veins), var(--stone-noise), linear-gradient(180deg, var(--stone-hi) 0%, var(--stone) 45%, var(--stone-lo) 100%); background-blend-mode: screen, multiply, overlay, normal; }
.ks-stone.ks-slam .ks-num { animation: ks-slam 0.42s cubic-bezier(.3, 1.6, .5, 1) both; }
.ks-stone.ks-slam::after {
    content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 18px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(200, 185, 160, 0.55), transparent 70%);
    animation: ks-dust 0.6s ease-out forwards;
}
@keyframes ks-slam { 0% { transform: translateY(-26px) scale(1.7); opacity: 0; } 60% { transform: translateY(2px) scale(0.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ks-dust { from { opacity: 1; transform: scaleX(0.6); } to { opacity: 0; transform: scaleX(1.6) translateY(6px); } }
@keyframes ks-heart { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* The previous numeral cracks in two and falls away */
.ks-shard {
    position: absolute; inset: 4px 0 14px; display: flex; align-items: center; justify-content: center;
    font: 800 3.1rem/1 var(--font-display); color: #cfc3aa;
    text-shadow: 0 3px 0 #2a2230;
    pointer-events: none;
}
.ks-shard-l { clip-path: polygon(0 0, 52% 0, 44% 45%, 54% 60%, 46% 100%, 0 100%); animation: ks-fall-l 0.65s ease-in forwards; }
.ks-shard-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 46% 100%, 54% 60%, 44% 45%); animation: ks-fall-r 0.65s ease-in forwards; }
@keyframes ks-fall-l { to { transform: translate(-22px, 60px) rotate(-24deg); opacity: 0; } }
@keyframes ks-fall-r { to { transform: translate(22px, 64px) rotate(22deg); opacity: 0; } }
.keystone.ks-clock .ks-shard { display: none; }

/* Zero: the stone shatters into TIME! */
.keystone.ks-time .ks-num { font-size: 2.4rem; color: #fff3c4; text-shadow: 0 3px 0 #3a2a10, 0 0 26px #ffd54a, 0 0 60px rgba(255, 180, 60, 0.7); animation: ks-time 0.7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes ks-time { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ks-chip {
    position: absolute; left: 50%; top: 50%; width: 9px; height: 7px;
    background: linear-gradient(135deg, var(--stone-hi), var(--stone-lo)); border: 1px solid var(--mortar);
    clip-path: polygon(0 20%, 60% 0, 100% 50%, 70% 100%, 10% 80%);
    animation: ks-chip 1s ease-out forwards; pointer-events: none;
}
@keyframes ks-chip { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* Live leader readout under the numeral */
.ks-lead {
    margin-top: 2px; padding: 3px 10px;
    font: 600 0.8rem/1.2 var(--font-body); color: #efe4cc; white-space: nowrap;
    background: rgba(14, 10, 18, 0.82); border: 1px solid var(--mortar); border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    position: relative;
}
.ks-lead:empty, .keystone.ks-clock .ks-lead { display: none; }
.ks-lead b { color: #fff; }
.ks-lead .ks-margin { color: #ffd54a; font-variant-numeric: tabular-nums; }
.ks-lead.ks-mine { border-color: #ffd54a; box-shadow: 0 0 12px rgba(255, 213, 74, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5); }
.ks-star { color: #ffd54a; margin-left: 2px; }
.ks-dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); margin-right: 5px; vertical-align: 0.02em; }
.ks-lead.ks-comeback { animation: ks-comeback 1.2s ease-out; }
.ks-lead.ks-comeback::after {
    content: attr(data-flash); position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    margin-top: 4px; font: 800 1rem/1 var(--font-display); letter-spacing: 0.12em; color: #ff8a3c;
    text-shadow: 0 2px 0 #000, 0 0 14px #ff5a1a; animation: ks-comeback-text 1.2s ease-out forwards;
}
@keyframes ks-comeback { 0%, 30% { background: rgba(255, 110, 40, 0.5); border-color: #ff8a3c; } 100% { background: rgba(14, 10, 18, 0.82); } }
@keyframes ks-comeback-text { 0% { opacity: 0; transform: translate(-50%, -6px) scale(1.4); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Each second the stone panels pulse with the beat; red for the last three */
body.cd-active.cd-beat #core-layout .info-panel,
body.cd-active.cd-beat .main-title-container { animation: cd-beat 0.55s ease-out; }
body.cd-urgent.cd-beat #core-layout .info-panel,
body.cd-urgent.cd-beat .main-title-container { animation: cd-beat-urgent 0.55s ease-out; }
@keyframes cd-beat { 0% { box-shadow: inset 0 0 16px var(--rune-soft), 0 0 18px var(--rune-soft), 0 10px 25px rgba(0, 0, 0, 0.65); } 100% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65); } }
@keyframes cd-beat-urgent { 0% { border-color: #ff3b1a; box-shadow: inset 0 0 22px rgba(255, 50, 20, 0.45), 0 0 26px rgba(255, 50, 20, 0.6), 0 10px 25px rgba(0, 0, 0, 0.65); } 100% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65); } }

/* Victory: everything but the winner's blaze drains of colour */
#canvas-container #glBoardCanvas,
#canvas-container #gameCanvas,
#canvas-container #lightCanvas { transition: filter 0.6s ease; }
#canvas-container.cd-victory #glBoardCanvas,
#canvas-container.cd-victory #gameCanvas,
#canvas-container.cd-victory #lightCanvas { filter: saturate(0.25) brightness(0.8); }

/* The round report slides in after the victory moment */
.aar-container:not(.hidden) { animation: aar-in 0.5s ease-out 0.8s both; }
@keyframes aar-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    .ks-stone.ks-slam .ks-num, .keystone.ks-urgent .ks-num, .ks-shard, .ks-chip, .keystone.ks-time .ks-num,
    body.cd-active.cd-beat #core-layout .info-panel, body.cd-active.cd-beat .main-title-container { animation-duration: 0.01s; }
}

/* =====================================================================================================================
   SLIME CHAMPIONS (v2.4): rail portraits and personality badges
   ===================================================================================================================== */
.champ-portrait { width: 32px; height: 32px; flex: none; margin-right: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--mortar); }
.champ-portrait-lg { width: 64px; height: 64px; margin: 0 auto 4px; display: block; }
.pers-badge { display: inline-flex; flex: none; width: 15px; height: 15px; margin-left: 4px; opacity: 0.9; }
.pers-badge svg { width: 100%; height: 100%; }

/* At the end of a round the cores sit above the winner's territory glow */
#canvas-container.cd-victory #coreCanvas { z-index: 5; }

/* =====================================================================================================================
   TITLE EXIT (v2.5): the logo bursts toward the player while the view rushes into the castle
   ===================================================================================================================== */
#screen-fade { position: fixed; inset: 0; z-index: 200; background: #050307; opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
#screen-fade.on { opacity: 1; }
.title-text .tl, .title-text .tl-space { display: inline-block; }
.title-text .tl-space { width: 0.32em; }
.title-text .tl { transition: transform 0.75s cubic-bezier(.25, .1, .35, 1), opacity 0.55s ease-in 0.12s; will-change: transform, opacity; }
body.title-exit .title-text .tl {
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0)) scale(var(--s, 3));
    opacity: 0;
}
#titleScreen .space-y-6 { transition: transform 0.45s ease-in, opacity 0.45s ease-in; }
body.title-exit #titleScreen .space-y-6 { transform: translateY(50px) scale(0.94); opacity: 0; pointer-events: none; }
body.title-exit #user-status-container { opacity: 0; transition: opacity 0.3s; }
.bg-title::before, .bg-title #bg-motion { transform-origin: 50% 42%; }
body.title-exit.bg-title::before, body.title-exit.bg-title #bg-motion {
    scale: 1.9;
    filter: brightness(1.45) saturate(1.2);
    transition: scale 1.15s cubic-bezier(.55, 0, .85, .3), filter 1.15s ease-in, translate 0.6s ease-out;
}
body.title-exit::after { background: radial-gradient(ellipse at 50% 42%, transparent 10%, rgba(0, 0, 0, 0.9) 75%); transition: background 1s; }
@media (prefers-reduced-motion: reduce) {
    body.title-exit .title-text .tl { transform: none; filter: none; }
    body.title-exit.bg-title::before, body.title-exit.bg-title #bg-motion { transform: none; filter: none; }
}
.title-text .tw { display: inline-block; white-space: nowrap; }

/* =====================================================================================================================
   TITLE LIFE (v2.6): parallax, return zoom, lightning flare
   ===================================================================================================================== */
/* The background drifts against the mouse; slightly oversized so its edges never show */
.bg-title::before, .bg-title #bg-motion {
    scale: 1.06;
    translate: calc(var(--tpx, 0) * -16px) calc(var(--tpy, 0) * -10px);
    transition: translate 0.6s ease-out, background-image 0.5s ease-in-out, background-color 0.5s ease;
}
/* Returning to the title: pull back out of the castle */
body.title-enter.bg-title::before, body.title-enter.bg-title #bg-motion { animation: title-zoom-out 1.15s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes title-zoom-out { from { scale: 1.9; filter: brightness(1.45) saturate(1.2); } to { scale: 1.06; filter: none; } }
body.title-enter #titleScreen .space-y-6 { animation: title-rise 0.6s ease-out 0.6s both; }
body.title-enter #user-status-container { animation: title-rise 0.5s ease-out 0.8s both; }
@keyframes title-rise { from { opacity: 0; transform: translateY(36px) scale(0.96); } to { opacity: 1; transform: none; } }
/* Lightning lights up the carved logo */
.title-text.title-strike { animation: title-strike 1.1s ease-out; }
.title-text.title-strike::before { animation: title-strike-glow 1.1s ease-out; }
@keyframes title-strike { 0% { color: #ffffff; } 100% { color: #efe4cc; } }
@keyframes title-strike-glow { 0% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .bg-title::before, .bg-title #bg-motion { translate: none; }
    body.title-enter.bg-title::before, body.title-enter.bg-title #bg-motion, body.title-enter #titleScreen .space-y-6, .title-text.title-strike { animation: none; }
}

/* =====================================================================================================================
   TITLE PERFORMANCE (v2.7): the logo's soft glow lives on its own layers behind the letters (cheap to fade), so the
   letters only carry a crisp carved edge and can fly and scale smoothly.
   ===================================================================================================================== */
#titleScreen .title-text {
    position: relative; isolation: isolate;
    text-shadow: 0 2px 0 #3a2f45, 0 4px 0 #1c1622, 0 0 22px var(--rune-soft);
}
/* while letters fly, only the crisp carved edge (a blurred shadow on a moving, scaling letter is very costly) */
body.title-exit #titleScreen .title-text, body.title-enter #titleScreen .title-text { text-shadow: 0 2px 0 #3a2f45, 0 4px 0 #1c1622; }
/* High graphics quality (quality.js): the letters keep their rune glow while they fly */
body.q-high.title-exit #titleScreen .title-text, body.q-high.title-enter #titleScreen .title-text { text-shadow: 0 2px 0 #3a2f45, 0 4px 0 #1c1622, 0 0 22px var(--rune-soft); }
#titleScreen .title-text::after,
#titleScreen .title-text::before {
    content: ""; position: absolute; inset: -30% -8%; z-index: -1; pointer-events: none;
    border-radius: 50%;
}
#titleScreen .title-text::after {           /* the steady rune glow */
    background: radial-gradient(ellipse at center, var(--rune-soft) 0%, transparent 62%);
    opacity: 0.45; transition: opacity 0.35s ease;
}
#titleScreen .title-text::before {          /* the lightning flare */
    background: radial-gradient(ellipse at center, rgba(235, 245, 255, 0.75) 0%, rgba(160, 205, 255, 0.35) 35%, transparent 70%);
    opacity: 0;
}
body.title-exit #titleScreen .title-text::after { opacity: 0; transition-duration: 0.25s; }
body.title-enter #titleScreen .title-text::after { animation: title-glow-in 1.4s ease-out both; }
@keyframes title-glow-in { 0%, 55% { opacity: 0; } 100% { opacity: 0.45; } }
/* flying letters get their own compositor layer */
body.title-exit #titleScreen .title-text .tl, body.title-enter #titleScreen .title-text .tl { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .title-text.title-strike::before { animation: none; } }

/* =====================================================================================================================
   DIVINE NAME PLAQUE (divine-fx.js): a carved stone plaque drops onto the top of the board when an intervention lands
   ===================================================================================================================== */
.divine-plaque {
    position: absolute; left: 50%; top: 64px; z-index: 25;
    display: flex; align-items: center; gap: 10px;
    min-width: 200px; max-width: min(78%, 460px);
    padding: 8px 18px 8px 12px;
    border: 2px solid var(--mortar, #2a2230); border-radius: 6px;
    background-color: var(--stone, #4a4258);
    background-image: var(--stone-noise, none), linear-gradient(180deg, var(--stone-hi, #5c536b), var(--stone-lo, #352f40));
    background-blend-mode: overlay, normal;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    pointer-events: none;
    transform: translate(-50%, 0);
    animation: dp-drop 0.42s cubic-bezier(.2, 1.4, .4, 1) both;
}
.divine-plaque .dp-icon { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 6px var(--dp-glow)); }
.divine-plaque .dp-text { display: flex; flex-direction: column; min-width: 0; }
.divine-plaque b {
    font: 700 1.05rem/1.15 var(--font-display, 'Cinzel', serif); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dp-ink); text-shadow: 0 0 10px var(--dp-glow), 0 1px 0 rgba(0, 0, 0, 0.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.divine-plaque small { font: 500 0.76rem/1.2 var(--font-body, sans-serif); color: rgba(235, 228, 245, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.divine-plaque.is-blessing { --dp-ink: #ffe9a8; --dp-glow: rgba(255, 210, 110, 0.85); border-color: rgba(255, 210, 110, 0.55); }
.divine-plaque.is-curse { --dp-ink: #f3c6ff; --dp-glow: rgba(190, 80, 255, 0.85); border-color: rgba(190, 80, 255, 0.55); }
.divine-plaque.is-omen { --dp-ink: #e8ecff; --dp-glow: var(--dp-tint, rgba(200, 212, 255, 0.85)); border-color: var(--dp-tint, rgba(200, 212, 255, 0.55)); }
.divine-plaque.is-omen b { font-style: italic; }
.divine-plaque.is-ability { --dp-ink: #f4efe6; --dp-glow: var(--dp-tint, rgba(255, 215, 106, 0.8)); border-color: var(--dp-tint, rgba(255, 215, 106, 0.6)); }
.divine-plaque::after {
    content: ""; position: absolute; inset: -2px; border-radius: 7px; pointer-events: none;
    box-shadow: 0 0 18px var(--dp-glow); opacity: 0.55;
}
.divine-plaque.is-leaving { animation: dp-leave 0.55s ease-in both; }
.divine-plaque.is-reduced, .divine-plaque.is-reduced.is-leaving { animation-duration: 0.01s; }
@keyframes dp-drop {
    0% { opacity: 0; transform: translate(-50%, -40px) scale(1.25); }
    70% { opacity: 1; transform: translate(-50%, 3px) scale(0.98); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes dp-leave { to { opacity: 0; transform: translate(-50%, -14px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .divine-plaque { animation-duration: 0.01s; } }

/* --- Appeal modal: choose your god --- */
.god-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.god-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
    border: 2px solid var(--mortar, #2a2230); border-radius: 6px; background: rgba(20, 16, 28, 0.7);
    color: #d9d2e6; font: 700 0.8rem/1 var(--font-display, 'Cinzel', serif); letter-spacing: 0.06em; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.god-btn .god-icon { font-size: 22px; line-height: 1; }
.god-btn:hover { transform: translateY(-1px); border-color: var(--god-color, #888); }
.god-btn.is-selected { border-color: var(--god-color, #fff); color: #fff; box-shadow: 0 0 12px var(--god-color, #fff), inset 0 0 10px rgba(255, 255, 255, 0.08); }
.god-btn:focus-visible { outline: 2px solid var(--god-color, #fff); outline-offset: 2px; }
.god-detail { text-align: left; font-size: 0.72rem; line-height: 1.45; color: #b9b1c8; background: rgba(0, 0, 0, 0.25); border-radius: 4px; padding: 6px 9px; min-height: 4.5em; }
.god-detail .god-domain { font-weight: 700; font-size: 0.8rem; margin-bottom: 2px; }
.god-detail .god-b { color: #ffe08a; font-weight: 700; }
.god-detail .god-c { color: #e39bff; font-weight: 700; }
.god-detail .god-warn { color: #ff9b8a; font-style: italic; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .god-btn { transition: none; } .god-btn:hover { transform: none; } }

/* --- Appeal reveal: the god's verdict while the match is paused --- */
.divine-verdict {
    position: absolute; left: 50%; top: 52px; z-index: 30; transform: translate(-50%, 0);
    display: flex; align-items: center; gap: 14px; min-width: 300px; max-width: min(86%, 520px);
    padding: 14px 20px 18px 16px; border-radius: 8px; pointer-events: none;
    border: 2px solid var(--god-color, #c9d4ff);
    background-color: var(--stone, #4a4258);
    background-image: var(--stone-noise, none), linear-gradient(180deg, var(--stone-hi, #5c536b), var(--stone-lo, #352f40));
    background-blend-mode: overlay, normal;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 26px var(--dv-glow, rgba(200, 212, 255, 0.45));
    animation: dv-in 0.45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.divine-verdict .dv-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 10px var(--god-color, #fff)); }
.divine-verdict.is-weighing .dv-icon { animation: dv-pulse 0.9s ease-in-out infinite; }
.divine-verdict .dv-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.divine-verdict .dv-kicker { font: 600 0.78rem/1.1 var(--font-body, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--god-color, #fff); }
.divine-verdict .dv-title { font: 700 1.35rem/1.15 var(--font-display, 'Cinzel', serif); letter-spacing: 0.06em; color: #f4efe6; text-shadow: 0 0 12px var(--dv-glow, rgba(255,255,255,.5)), 0 1px 0 rgba(0,0,0,.6); }
.divine-verdict.is-weighing .dv-title { font-size: 1.05rem; font-style: italic; }
.divine-verdict .dv-line { font: 500 0.8rem/1.3 var(--font-body, sans-serif); color: rgba(235, 228, 245, 0.85); }
.divine-verdict .dv-warn { color: #ff9b8a; font-weight: 700; }
.divine-verdict.is-blessing { --dv-glow: rgba(255, 210, 110, 0.7); border-color: rgba(255, 210, 110, 0.8); }
.divine-verdict.is-blessing .dv-title { color: #ffe9a8; }
.divine-verdict.is-curse { --dv-glow: rgba(190, 80, 255, 0.7); border-color: rgba(190, 80, 255, 0.8); }
.divine-verdict.is-curse .dv-title { color: #f3c6ff; }
.divine-verdict .dv-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.35); overflow: hidden; opacity: 0; transition: opacity .2s; }
.divine-verdict .dv-bar i { display: block; height: 100%; width: 100%; background: var(--god-color, #fff); transform-origin: left; transform: scaleX(1); }
.divine-verdict.is-resuming .dv-bar { opacity: 1; }
.divine-verdict.is-resuming .dv-bar i { animation: dv-drain 0.6s linear forwards; }
.divine-verdict.is-leaving { animation: dv-out 0.4s ease-in both; }
@keyframes dv-in { 0% { opacity: 0; transform: translate(-50%, -24px) scale(1.15); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes dv-out { to { opacity: 0; transform: translate(-50%, -12px) scale(0.97); } }
@keyframes dv-pulse { 50% { transform: scale(1.15); filter: drop-shadow(0 0 18px var(--god-color, #fff)); } }
@keyframes dv-drain { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .divine-verdict, .divine-verdict.is-leaving { animation-duration: 0.01s; } .divine-verdict.is-weighing .dv-icon { animation: none; } }

/* --- Match start countdown: 3, 2, 1, FIGHT! carved in a keystone over the board --- */
.match-countdown { position: absolute; inset: 0; z-index: 28; display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(8, 6, 12, 0.35), transparent 65%); }
.match-countdown .mc-stone { position: relative; isolation: isolate; min-width: 200px; padding: 10px 40px 22px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.65)); }
.match-countdown .mc-stone::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--mortar, #2a2230); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.match-countdown .mc-face { position: absolute; inset: 0 4px 4px; z-index: -1; background-color: var(--stone, #4a4258); background-image: var(--stone-veins, none), var(--stone-noise, none), linear-gradient(180deg, var(--stone-hi, #5c536b) 0%, var(--stone, #4a4258) 45%, var(--stone-lo, #352f40) 100%); background-blend-mode: multiply, overlay, normal; clip-path: polygon(0 0, 100% 0, 86.5% 100%, 13.5% 100%); }
.match-countdown .mc-num, .match-countdown .mc-shard { font: 800 5.2rem/1 var(--font-display, 'Cinzel', serif); color: #f4ead2; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.45); text-shadow: 0 4px 0 #2a2230, 0 7px 0 #120e16, 0 0 24px var(--rune-soft, rgba(140, 200, 255, 0.5)), 0 0 50px var(--rune-soft, rgba(140, 200, 255, 0.5)); font-variant-numeric: tabular-nums; }
.match-countdown .mc-num { position: relative; }
.match-countdown .mc-stone.mc-slam .mc-num { animation: mc-slam 0.42s cubic-bezier(.3, 1.6, .5, 1) both; }
.match-countdown .mc-stone.mc-slam::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -4px; height: 26px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(200, 185, 160, 0.6), transparent 70%); animation: mc-dust 0.6s ease-out forwards; }
.match-countdown .mc-shard { position: absolute; inset: 10px 0 22px; display: flex; align-items: center; justify-content: center; color: #cfc3aa; }
.match-countdown .mc-shard-l { clip-path: polygon(0 0, 52% 0, 44% 45%, 54% 60%, 46% 100%, 0 100%); animation: mc-fall-l 0.65s ease-in forwards; }
.match-countdown .mc-shard-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 46% 100%, 54% 60%, 44% 45%); animation: mc-fall-r 0.65s ease-in forwards; }
.match-countdown.is-fight .mc-num { font-size: 4.2rem; color: #fff3c4; text-shadow: 0 4px 0 #3a2a10, 0 0 30px #ffd54a, 0 0 70px rgba(255, 180, 60, 0.75); }
.match-countdown.is-fight .mc-stone::before { background-color: #6a4a12; }
.match-countdown.is-fight { background: radial-gradient(ellipse at center, rgba(255, 200, 90, 0.18), transparent 60%); }
.match-countdown.is-leaving { animation: mc-out 0.45s ease-in both; }
@keyframes mc-slam { 0% { transform: translateY(-40px) scale(1.9); opacity: 0; } 60% { transform: translateY(3px) scale(0.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes mc-dust { from { opacity: 1; transform: scaleX(0.6); } to { opacity: 0; transform: scaleX(1.7) translateY(8px); } }
@keyframes mc-fall-l { to { transform: translate(-30px, 80px) rotate(-26deg); opacity: 0; } }
@keyframes mc-fall-r { to { transform: translate(30px, 84px) rotate(24deg); opacity: 0; } }
@keyframes mc-out { to { opacity: 0; transform: scale(1.08); } }
.match-countdown.is-reduced .mc-num, .match-countdown.is-reduced .mc-shard, .match-countdown.is-reduced.is-leaving, .match-countdown.is-reduced .mc-stone::after { animation-duration: 0.01s !important; }
@media (prefers-reduced-motion: reduce) { .match-countdown .mc-num, .match-countdown .mc-shard, .match-countdown.is-leaving { animation-duration: 0.01s !important; } }

/* --- Gambits: the Dealer plays a card --- */
.gambit-card { position: absolute; left: 50%; top: 30%; z-index: 29; width: 128px; height: 178px; margin-left: -64px; perspective: 700px; pointer-events: none; animation: gc-in 0.5s cubic-bezier(.2, 1.3, .4, 1) both; }
.gambit-card .gc-inner { position: absolute; inset: 0; transform-style: preserve-3d; animation: gc-flip 0.7s 0.15s cubic-bezier(.3, 1.2, .5, 1) both; }
.gambit-card .gc-back, .gambit-card .gc-front { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
.gambit-card .gc-back { display: flex; align-items: center; justify-content: center; border: 3px solid #c9a227; background: repeating-linear-gradient(45deg, #5a1420 0 8px, #6e1a28 8px 16px); color: #ffd76a; font-size: 42px; }
.gambit-card .gc-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 3px solid #ffd76a; background: linear-gradient(180deg, #fbf3df, #e9dcc0); color: #3a2a10; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 215, 106, 0.6), inset 0 0 0 5px #fbf3df, inset 0 0 0 6px #c9a227; }
.gambit-card .gc-emoji { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.gambit-card .gc-name { font: 700 0.95rem/1.1 var(--font-display, 'Cinzel', serif); text-align: center; letter-spacing: 0.04em; }
.gambit-card .gc-tag { font: 600 0.62rem/1 var(--font-body, sans-serif); letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a20; }
.gambit-card .gc-suit { position: absolute; font-size: 16px; color: #b0242c; }
.gambit-card .gc-tl { top: 8px; left: 10px; } .gambit-card .gc-br { bottom: 8px; right: 10px; transform: rotate(180deg); }
.gambit-card.is-leaving { animation: gc-out 0.6s ease-in both; }
.gambit-card.is-reduced, .gambit-card.is-reduced .gc-inner, .gambit-card.is-reduced.is-leaving { animation-duration: 0.01s; }
@keyframes gc-in { 0% { opacity: 0; transform: translate(-40px, -60px) rotate(-25deg) scale(0.7); } 100% { opacity: 1; transform: none; } }
@keyframes gc-flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
@keyframes gc-out { to { opacity: 0; transform: translate(60px, -30px) rotate(18deg) scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .gambit-card, .gambit-card .gc-inner, .gambit-card.is-leaving { animation-duration: 0.01s; } }
.parachute-drop { position: fixed; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -160px); }
.parachute-drop .pd-chute { font-size: 40px; filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.8)); }
.parachute-drop .pd-amt { font: 800 1rem/1 var(--font-display, 'Cinzel', serif); color: #ffe08a; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 215, 106, 0.8); }

/* --- Gambit Satchel (betting panel) --- */
#gambit-slot { position: relative; }
.gambit-slot-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px dashed rgba(201, 162, 39, 0.55); border-radius: 6px; background: rgba(30, 22, 10, 0.45); color: #f4efe6; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.gambit-slot-btn:hover, .gambit-slot-btn.is-open { border-color: #ffd76a; background: rgba(60, 44, 14, 0.55); }
.gambit-slot-btn .gs-emoji { font-size: 22px; line-height: 1; }
.gambit-slot-btn .gs-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gambit-slot-btn .gs-label small { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: #c9a227; }
.gambit-slot-btn .gs-label b { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gambit-slot-btn .gs-caret { color: #c9a227; }
.gambit-satchel { position: fixed; width: min(360px, 86vw); z-index: 60; border: 2px solid rgba(201, 162, 39, 0.75); border-radius: 8px; background: rgba(18, 14, 22, 0.97); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.65); padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.gambit-satchel.hidden { display: none; }
.satchel-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 4px; }
.satchel-row.is-on { background: rgba(255, 215, 106, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, 0.45); }
.satchel-emoji { font-size: 20px; width: 24px; text-align: center; }
.satchel-row { align-items: flex-start; }
.satchel-acts { flex-direction: column; align-items: flex-end; }
.satchel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.satchel-info b { font-size: 0.74rem; color: #f4efe6; }
.satchel-info small { font-size: 0.64rem; line-height: 1.3; color: #a9a2b5; }
.satchel-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.satchel-count { font-size: 0.7rem; color: #ffd76a; min-width: 22px; text-align: right; }
.satchel-tag { font-size: 0.6rem; color: #ffd76a; letter-spacing: 0.08em; text-transform: uppercase; }
.satchel-acts .btn-retro { font-size: 0.62rem; padding: 2px 6px; min-height: 0; }
.satchel-acts .btn-retro[disabled] { opacity: 0.4; cursor: not-allowed; }
.satchel-foot { font-size: 0.66rem; color: #b9b1c8; padding: 4px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.satchel-foot b { color: #ffd76a; }
.satchel-hint { float: right; color: #7f788c; }

/* =====================================================================================================================
   Tournament presentation (tournament-fx.js): cut ceremony, round ladder, round badge, standings, finale
   ===================================================================================================================== */
.tourney-ladder { display: flex; align-items: center; justify-content: center; gap: 0; margin: 8px auto 0; }
.tourney-ladder .tl-step { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 0.72rem/1 var(--font-display, 'Cinzel', serif); border: 2px solid rgba(201, 162, 39, 0.5); background: rgba(20, 16, 28, 0.85); color: #8f879c; }
.tourney-ladder .tl-done { background: rgba(201, 162, 39, 0.35); color: #fff1c4; border-color: #c9a227; }
.tourney-ladder .tl-now { background: #c9a227; color: #1a1208; border-color: #ffe08a; box-shadow: 0 0 12px rgba(255, 215, 106, 0.8); transform: scale(1.15); }
.tourney-ladder .tl-final { border-color: #ffd76a; }
.tourney-ladder .tl-link { width: 18px; height: 3px; background: rgba(201, 162, 39, 0.3); }
.tourney-ladder .tl-link.tl-done { background: #c9a227; }
.tourney-ladder.is-compact .tl-step { width: 10px; height: 10px; font-size: 0.5rem; border-width: 1px; }
.tourney-ladder.is-compact .tl-step.tl-final { width: 14px; height: 14px; font-size: 0.55rem; }
.tourney-ladder.is-compact .tl-link { width: 8px; height: 2px; }

.cut-ceremony { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(10, 6, 16, 0.82), rgba(4, 2, 8, 0.94)); animation: cc-fade 0.35s ease-out both; }
.cut-ceremony.is-leaving { animation: cc-out 0.4s ease-in both; }
.cc-panel { width: min(560px, 92vw); max-height: 88vh; overflow: hidden; padding: 18px 20px 14px; border-radius: 10px; border: 2px solid rgba(201, 162, 39, 0.7);
    background-color: var(--stone, #4a4258); background-image: var(--stone-noise, none), linear-gradient(180deg, var(--stone-hi, #5c536b), var(--stone-lo, #352f40)); background-blend-mode: overlay, normal;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(201, 162, 39, 0.25); }
.cc-head { text-align: center; margin-bottom: 10px; }
.cc-kicker { font: 600 0.7rem/1 var(--font-body, sans-serif); letter-spacing: 0.28em; text-transform: uppercase; color: #c9a227; }
.cc-title { font: 800 1.7rem/1.15 var(--font-display, 'Cinzel', serif); color: #fff1c4; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255, 215, 106, 0.5); margin-top: 4px; }
.cc-list { display: flex; flex-direction: column; gap: 5px; position: relative; }
.cc-card { display: grid; grid-template-columns: 22px 38px minmax(70px, 1fr) 2fr 82px 48px; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(16, 12, 22, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); position: relative;
    animation: cc-in 0.45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 70ms); transition: transform 0.6s ease, opacity 0.6s ease; }
.cc-card.is-you { border-color: #ffd76a; box-shadow: 0 0 12px rgba(255, 215, 106, 0.4); }
.cc-rank { font: 700 0.75rem/1 var(--font-display, 'Cinzel', serif); color: #8f879c; text-align: center; }
.cc-icon { font-size: 18px; text-align: center; }
.cc-name { font-weight: 700; font-size: 0.85rem; color: #f4efe6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cc-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #6fbf4a, #b6ff7a); transform-origin: left; animation: cc-bar 1.1s 0.5s cubic-bezier(.3, .8, .4, 1) both; }
.cc-card.is-cut .cc-bar i { background: linear-gradient(90deg, #9a3a2a, #ff7a5a); }
.cc-cash { font: 700 0.85rem/1 var(--font-body, sans-serif); color: #9fe08a; text-align: right; font-variant-numeric: tabular-nums; }
.cc-card.is-cut .cc-cash { color: #ff9b8a; }
.cc-verdict { font: 800 0.62rem/1 var(--font-body, sans-serif); letter-spacing: 0.12em; text-align: center; opacity: 0; transition: opacity 0.3s; }
.cc-card.is-safe .cc-verdict { color: #9fe08a; }
.cc-card.is-cut .cc-verdict { color: #ff6a5a; }
.cut-ceremony.show-line .cc-verdict { opacity: 1; }
.cc-cutline { position: relative; height: 18px; display: flex; align-items: center; justify-content: center; }
.cc-cutline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ff3a2a 15%, #ff7a5a 50%, #ff3a2a 85%, transparent); box-shadow: 0 0 10px #ff3a2a; transform: scaleX(0); transition: transform 0.6s cubic-bezier(.3, .8, .4, 1); }
.cc-cutline span { position: relative; z-index: 1; padding: 0 10px; font: 800 0.62rem/1 var(--font-body, sans-serif); letter-spacing: 0.2em; color: #ff8a7a; background: rgba(30, 10, 10, 0.9); border-radius: 3px; opacity: 0; transition: opacity 0.3s 0.3s; }
.cut-ceremony.show-line .cc-cutline::before { transform: scaleX(1); }
.cut-ceremony.show-line .cc-cutline span { opacity: 1; }
.cut-ceremony.crack .cc-card.is-cut { animation: cc-crack 1s cubic-bezier(.5, 0, .9, .4) both; animation-delay: calc((var(--i) - 0) * 60ms); }
.cut-ceremony.crack .cc-card.is-cut::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
    background: linear-gradient(115deg, transparent 46%, rgba(255, 90, 60, 0.9) 47%, rgba(255, 220, 200, 0.9) 48%, transparent 49%), linear-gradient(70deg, transparent 62%, rgba(255, 90, 60, 0.8) 63%, transparent 64.5%); }
.cut-ceremony.rise .cc-card.is-safe { transform: translateY(-4px); box-shadow: 0 0 14px rgba(159, 224, 138, 0.35); }
.cut-ceremony.rise .cc-card.is-you.is-safe { box-shadow: 0 0 18px rgba(255, 215, 106, 0.7); }
.cc-foot { margin-top: 12px; text-align: center; font-size: 0.85rem; color: #d8cfe6; }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-out { to { opacity: 0; } }
@keyframes cc-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes cc-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cc-crack { 0% { transform: none; opacity: 1; } 18% { transform: translateX(-3px) rotate(-1deg); } 30% { transform: translateX(3px) rotate(1deg); opacity: 1; } 75% { opacity: 0; } 100% { transform: translateY(110px) rotate(-8deg); opacity: 0; } }
.cut-ceremony.is-reduced *, .cut-ceremony.is-reduced { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }

.round-intro { position: absolute; left: 50%; top: 22%; z-index: 27; transform: translateX(-50%); min-width: 300px; padding: 14px 22px 12px; text-align: center; pointer-events: none; border-radius: 10px; border: 2px solid rgba(201, 162, 39, 0.75);
    background-color: var(--stone, #4a4258); background-image: var(--stone-noise, none), linear-gradient(180deg, var(--stone-hi, #5c536b), var(--stone-lo, #352f40)); background-blend-mode: overlay, normal;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(201, 162, 39, 0.35); animation: ri-in 0.5s cubic-bezier(.2, 1.3, .4, 1) both; }
.round-intro.is-leaving { animation: ri-out 0.5s ease-in both; }
.round-intro .ri-kicker { font: 600 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.28em; text-transform: uppercase; color: #c9a227; }
.round-intro .ri-title { font: 800 1.6rem/1.2 var(--font-display, 'Cinzel', serif); color: #fff1c4; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 215, 106, 0.5); margin-top: 4px; }
.round-intro .ri-meta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-size: 0.75rem; color: #d8cfe6; }
.round-intro .ri-meta span { padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); }
.round-intro.is-reduced, .round-intro.is-reduced.is-leaving { animation-duration: 0.01s; }
@keyframes ri-in { from { opacity: 0; transform: translate(-50%, -20px) scale(1.08); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ri-out { to { opacity: 0; transform: translate(-50%, -12px); } }

.round-badge { position: absolute; top: 46px; left: 10px; z-index: 18; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 8px; border-radius: 6px; pointer-events: none; background: rgba(16, 12, 22, 0.78); border: 1px solid rgba(201, 162, 39, 0.55); }
.round-badge .rb-label { font: 700 0.68rem/1 var(--font-display, 'Cinzel', serif); color: #ffe08a; letter-spacing: 0.06em; }
.round-badge .tourney-ladder { margin: 0; }

.tourney-standings { margin-bottom: 10px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(201, 162, 39, 0.3); font-size: 0.75rem; }
.tourney-standings .ts-head { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: #c9a227; margin-bottom: 4px; }
.tourney-standings .ts-row { display: flex; justify-content: space-between; padding: 1px 2px; color: #d8cfe6; }
.tourney-standings .ts-row.is-you { color: #ffe08a; font-weight: 700; }
.tourney-standings .ts-row.is-cut { color: #ff9b8a; }
.tourney-standings .ts-cut { position: relative; height: 12px; margin: 2px 0; }
.tourney-standings .ts-cut::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #ff5a3c; }
.tourney-standings .ts-cut span { position: relative; padding: 0 6px; font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ff8a7a; background: #241c2c; margin-left: 12px; }

.perk-card.is-dealt { animation: perk-deal 0.55s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i) * 120ms + 100ms); border: 2px solid #c9a227; background: linear-gradient(180deg, #fbf3df, #e9dcc0); color: #3a2a10; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 0 0 4px #fbf3df, inset 0 0 0 5px #c9a227; }
.perk-card.is-dealt .perk-name { color: #3a2a10; }
.perk-card.is-dealt .perk-desc { color: #5a4a30; }
.perk-card.is-dealt:hover, .perk-card.is-dealt:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 215, 106, 0.6), inset 0 0 0 4px #fbf3df, inset 0 0 0 5px #c9a227; }
@keyframes perk-deal { from { opacity: 0; transform: translate(0, -60px) rotate(-12deg) scale(0.8); } to { opacity: 1; transform: none; } }

.tourney-trophy { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.tourney-trophy .tt-cup { position: relative; font-size: 64px; animation: tt-rise 0.9s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 16px rgba(255, 215, 106, 0.9)); }
.tourney-trophy .tt-rays { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 215, 106, 0.35) 0 10deg, transparent 10deg 24deg); animation: tt-spin 8s linear infinite; mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.shard-rain { position: fixed; top: -30px; z-index: 75; pointer-events: none; animation: shard-fall linear both; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(40px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes shard-fall { from { transform: translateY(0) rotate(0deg); opacity: 1; } to { transform: translateY(105vh) rotate(540deg); opacity: 0.6; } }
.tourney-ko { display: flex; justify-content: center; margin-bottom: 10px; }
.tourney-ko .ko-card { position: relative; width: 150px; padding: 12px 8px 10px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(16, 12, 22, 0.85); border: 2px solid #8a2a2a; animation: ko-drop 1.2s cubic-bezier(.5, 0, .7, 1) 0.3s both; }
.tourney-ko .ko-icon { font-size: 30px; filter: grayscale(0.6); }
.tourney-ko .ko-name { font-weight: 700; color: #d8cfe6; }
.tourney-ko .ko-round { font-size: 0.7rem; color: #9a90a8; }
.tourney-ko .ko-stamp { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); font: 900 1rem/1 var(--font-display, 'Cinzel', serif); letter-spacing: 0.08em; color: #ff4a3a; border: 3px solid #ff4a3a; padding: 3px 8px; border-radius: 4px; white-space: nowrap; animation: ko-stamp 0.35s cubic-bezier(.2, 1.6, .4, 1) 0.2s both; }
.tourney-ko .ko-card::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: linear-gradient(110deg, transparent 47%, rgba(255, 90, 60, 0.8) 48%, transparent 49.5%), linear-gradient(60deg, transparent 58%, rgba(255, 90, 60, 0.6) 59%, transparent 60%); opacity: 0; animation: ko-crack 0.2s 0.55s both; }
@keyframes ko-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@keyframes ko-crack { to { opacity: 1; } }
@keyframes ko-drop { 0%, 60% { transform: none; } 70% { transform: rotate(-3deg); } 100% { transform: translateY(14px) rotate(-6deg); filter: grayscale(0.7); } }
.tourney-ko.is-reduced .ko-card, .tourney-ko.is-reduced .ko-stamp, .tourney-ko.is-reduced .ko-card::after { animation-duration: 0.01s; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .cut-ceremony *, .round-intro, .perk-card.is-dealt, .tourney-trophy *, .tourney-ko * { animation-duration: 0.01s !important; animation-delay: 0s !important; transition-duration: 0.01s !important; }
    .shard-rain { display: none; }
}

/* Dev panel: gambit test buttons */
.btn-gambit, button.btn-gambit { background-image: var(--stone-noise), linear-gradient(180deg, #8a5cd6, #4f2a8f); color: #fff; }

/* Follow camera button (on while following) */
.zoom-controls button[data-zoom="follow"][aria-pressed="true"], .zoom-controls button[data-zoom="jelly"][aria-pressed="true"] {
    color: #fff;
    text-shadow: 0 0 8px var(--rune);
    box-shadow: inset 0 -2px 0 var(--rune), inset 0 0 12px var(--rune-soft);
}

/* ======================================================================================== The Dungeon Dealer
   dealer-art.js draws him; dealer-fx.js places him. Canvases fill their boxes. */
.dealer-canvas { display: block; width: 100%; height: 100%; }

/* Title screen: he lurks to the left of the menu, standing in the fog */
.title-dealer { position: absolute; left: calc(50% - 640px); bottom: 3vh; width: 320px; height: 520px; z-index: 1; pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }   /* he coalesces out of smoke (dealer-art.js appear/vanish) */
.title-dealer-bubble { position: absolute; left: 62%; top: 12%; width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 10px;
    font: italic 600 0.95rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; background: rgba(28, 14, 46, 0.92); border: 1px solid rgba(169, 124, 255, 0.6);
    box-shadow: 0 0 16px rgba(140, 90, 255, 0.35); opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 0.35s, transform 0.35s; }
.title-dealer-bubble::after { content: ""; position: absolute; left: 14px; bottom: -7px; width: 12px; height: 12px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); }
.title-dealer-bubble.is-on { opacity: 1; transform: none; }
.title-dealer-bubble.is-left { left: auto; right: 62%; }   /* flipped to his left (it would run off screen or cover the menu) */
.title-dealer-bubble.is-left::after { left: auto; right: 14px; }
.title-dealer-bubble.is-above { left: 50%; top: 2%; transform: translate(-50%, -100%); }   /* over his head when neither side fits */
.title-dealer-bubble.is-above:not(.is-on) { transform: translate(-50%, calc(-100% + 6px)) scale(0.96); }
.title-dealer-bubble.is-above::after { left: calc(50% - 6px); }
body.dealer-hiding #titleScreen .space-y-6 { position: relative; z-index: 2; }   /* he hides behind the title buttons */
@media (max-width: 1240px) { .title-dealer { left: 8px; width: 190px; height: 310px; } }
@media (max-width: 860px) { .title-dealer { display: none; } }

/* Chat: his lines carry a small portrait */
.dealer-chat-face { display: inline-block; width: 22px; height: 22px; vertical-align: -6px; margin-right: 5px; border-radius: 50%; }
#chat-window .dealer-chat-face { width: 18px; height: 18px; vertical-align: -4px; }

/* Board pop-up: he leans in from the upper-right corner of the board (below the view and zoom buttons) */
.dealer-host { position: absolute; right: 10px; top: 88px; z-index: 31; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 6px; pointer-events: none;
    opacity: 0; transform: translate(40px, -20px) rotate(-8deg); transition: opacity 0.3s, transform 0.4s cubic-bezier(.2, 1.3, .4, 1); }
.dealer-host.is-on { opacity: 1; transform: none; }
.dealer-host.is-leaving { opacity: 0; transform: translate(30px, -16px) rotate(-6deg); transition: opacity 0.35s, transform 0.4s ease-in; }
.dealer-host .dh-face { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: none;
    background: radial-gradient(circle at 50% 40%, #3a2160, #0d0618 75%); border: 2px solid #c9a227; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 18px rgba(140, 90, 255, 0.4); }
.dealer-host .dh-bubble { margin-top: 40px; max-width: 280px; padding: 8px 12px; border-radius: 10px 2px 10px 10px; background: rgba(24, 12, 40, 0.94);
    border: 1px solid rgba(169, 124, 255, 0.65); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.dealer-host .dh-name { display: block; font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.2em; text-transform: uppercase; color: #c9a227; margin-bottom: 4px; }
.dealer-host .dh-text { display: block; font: italic 600 0.92rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; }

/* Rivals (upper-left, below Focus) and champions (lower-right) speak on the board too (chat-popups.js) */
.speaker-host { position: absolute; z-index: 30; display: flex; gap: 6px; pointer-events: none; opacity: 0;
    transition: opacity 0.3s, transform 0.4s cubic-bezier(.2, 1.3, .4, 1); }
.speaker-host.is-on { opacity: 1; transform: none; }
.speaker-host.is-leaving { opacity: 0; transition: opacity 0.35s, transform 0.4s ease-in; }
.speaker-host .sp-face { flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, #2c2240, #0d0a14 75%); border: 2px solid var(--sp-col, #c9a227);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--sp-col, #c9a227) 45%, transparent); }
.speaker-host .sp-face canvas { width: 100%; height: 100%; display: block; }
.speaker-host .sp-bubble { max-width: 250px; padding: 7px 11px; background: rgba(18, 12, 28, 0.94); border: 1px solid color-mix(in srgb, var(--sp-col, #c9a227) 60%, transparent);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5); }
.speaker-host .sp-name { display: block; font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-col, #c9a227); margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.speaker-host .sp-text { display: block; font: italic 600 0.86rem/1.3 var(--font-display, 'Cinzel', serif); color: #f2ecf8; }
.speaker-host.is-rival { left: 12px; top: 56px; flex-direction: row; align-items: flex-start; transform: translate(-36px, -14px) rotate(6deg); }
.speaker-host.is-rival.is-leaving { transform: translate(-28px, -10px) rotate(5deg); }
.speaker-host.is-rival .sp-face { width: 68px; height: 68px; }
.speaker-host.is-rival .sp-face .rival-face { --rf: 68px; width: 68px; height: 68px; }
.speaker-host.is-rival .sp-bubble { margin-top: 24px; border-radius: 2px 10px 10px 10px; }
.speaker-host.is-champ { right: 10px; bottom: 14px; flex-direction: row-reverse; align-items: flex-end; transform: translate(36px, 18px) rotate(6deg); }
.speaker-host.is-champ.is-leaving { transform: translate(28px, 14px) rotate(5deg); }
.speaker-host.is-champ .sp-face { width: 76px; height: 76px; }
.speaker-host.is-champ .sp-bubble { margin-bottom: 34px; border-radius: 10px 10px 2px 10px; }
.speaker-host.is-rival.is-on, .speaker-host.is-champ.is-on { transform: none; }

/* v1.1 stacking columns (chat-popups.js): rivals and champions speak from the board's upper LEFT, the Dealer from the
   upper RIGHT, at the same height (just under the view buttons). Lines arriving while others show tile downward;
   a leaving pop-up collapses so the ones below slide up. */
.pop-stack { position: absolute; top: 88px; z-index: 31; display: flex; flex-direction: column; pointer-events: none; max-width: min(46%, 400px); }
.pop-stack.is-left { left: 12px; align-items: flex-start; }
.pop-stack.is-right { right: 10px; align-items: flex-end; }
.pop-stack > .pop-tile { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-bottom: 8px; max-height: 240px;
    transition: opacity 0.3s, transform 0.4s cubic-bezier(.2, 1.3, .4, 1), max-height 0.35s ease 0.08s, margin-bottom 0.35s ease 0.08s; }
.pop-stack > .pop-tile.is-leaving { max-height: 0 !important; margin-bottom: 0; overflow: visible;
    transition: opacity 0.3s, transform 0.4s ease-in, max-height 0.32s ease 0.1s, margin-bottom 0.32s ease 0.1s; }
/* everyone on the left enters from the left: face first, then the bubble */
.pop-stack.is-left > .speaker-host { flex-direction: row; align-items: flex-start; transform: translate(-36px, -10px) rotate(6deg); }
.pop-stack.is-left > .speaker-host.is-on { transform: none; }
.pop-stack.is-left > .speaker-host.is-leaving { transform: translate(-28px, -6px) rotate(5deg); }
.pop-stack.is-left > .speaker-host .sp-bubble { margin-top: 22px; margin-bottom: 0; border-radius: 2px 10px 10px 10px; }
.pop-stack.is-left > .speaker-host.is-champ .sp-face { width: 72px; height: 72px; }
.pop-stack.is-right > .dealer-host.is-leaving { transform: translate(30px, -6px) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) {
    .pop-stack > .pop-tile, .pop-stack > .pop-tile.is-leaving, .pop-stack.is-left > .speaker-host, .pop-stack.is-left > .speaker-host.is-leaving { transform: none; transition: opacity 0.2s, max-height 0.2s, margin-bottom 0.2s; }
}

/* Gambit card: the Dealer peeks over the top of the card he deals */
.gambit-card .gc-dealer { position: absolute; left: 50%; top: -74px; width: 92px; height: 92px; margin-left: -46px; z-index: -1; animation: gc-dealer 1.6s ease-out both; }
@keyframes gc-dealer { 0% { transform: translateY(60px); opacity: 0; } 25% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

/* Round report: he settles up at the top of the report */
.aar-dealer { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(40, 18, 64, 0.85), rgba(20, 10, 30, 0.4)); border: 1px solid rgba(169, 124, 255, 0.4); }
.aar-dealer.is-payout { background: linear-gradient(90deg, rgba(60, 46, 12, 0.8), rgba(20, 10, 30, 0.4)); border-color: rgba(255, 215, 106, 0.45); }
.aar-dealer.is-in { animation: aar-dealer-in 0.5s cubic-bezier(.2, 1.2, .4, 1) both; }
.aar-dealer-face { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2160, #0d0618 75%); border: 2px solid #c9a227; }
.aar-dealer-name { display: block; font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.2em; text-transform: uppercase; color: #c9a227; margin-bottom: 4px; }
.aar-dealer-text { display: block; font: italic 600 1rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; }
@keyframes aar-dealer-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* Tournaments: he hosts the cut ceremony, opens each round and has the last word */
.cc-head { position: relative; }
.cc-dealer { position: absolute; left: -12px; top: -14px; width: 104px; height: 118px; pointer-events: none; }
.cc-dealer-line { min-height: 1.3em; margin: 8px 0 0; text-align: center; font: italic 600 0.95rem/1.3 var(--font-display, 'Cinzel', serif); color: #e6d4ff; opacity: 0; transition: opacity 0.4s; }
.cc-dealer-line.is-on { opacity: 1; }
.round-intro .ri-dealer { width: 64px; height: 64px; margin: -6px auto 4px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2160, #0d0618 75%); border: 2px solid #c9a227; }
.tourney-dealer { display: flex; align-items: center; gap: 10px; margin: 6px auto 10px; max-width: 420px; }
.tourney-dealer .td-face { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2160, #0d0618 75%); border: 2px solid #c9a227; }
.tourney-dealer .td-line { font: italic 600 0.95rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; text-align: left; }

@media (prefers-reduced-motion: reduce) {
    .gambit-card .gc-dealer, .aar-dealer.is-in { animation: none; }
    .dealer-host, .dealer-host.is-leaving, .speaker-host, .speaker-host.is-leaving { transition: opacity 0.2s; transform: none; }
}

/* ======================================================================================== Hall of Trophies */
.ach-hall { display: flex; flex-direction: column; gap: 16px; }
.ach-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ach-ring-bg { fill: none; stroke: rgba(0, 0, 0, 0.45); }
.ach-ring-fill { fill: none; stroke: #e8b923; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 210, 90, 0.7)); transition: stroke-dasharray 0.8s ease; }
.ach-summary { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 10px;
    background: linear-gradient(90deg, rgba(40, 18, 64, 0.8), rgba(20, 12, 28, 0.5)); border: 1px solid rgba(201, 162, 39, 0.45); }
.ach-total { position: relative; width: 120px; height: 120px; flex: none; }
.ach-total-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ach-total-num b { font: 800 2rem/1 var(--font-display, 'Cinzel', serif); color: #fff1c4; text-shadow: 0 0 12px rgba(255, 215, 106, 0.5); }
.ach-total-num span { font-size: 0.75rem; color: #b9b0c8; }
.ach-kicker, .ach-section-title { font: 700 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.24em; text-transform: uppercase; color: #c9a227; }
.ach-earned { font: 800 1.5rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; margin: 4px 0; }
.ach-rewards { font-size: 0.85rem; color: #c8bfd6; }
.ach-rewards b { color: #ffd76a; }
.ach-legend { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ach-tier-chip { font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--tier); color: var(--tier); }
.tier-bronze { --tier: #d08a4a; --tier-glow: rgba(208, 138, 74, 0.45); }
.tier-silver { --tier: #cfd6e2; --tier-glow: rgba(207, 214, 226, 0.4); }
.tier-gold { --tier: #ffd24a; --tier-glow: rgba(255, 210, 74, 0.5); }
.tier-void { --tier: #c27bff; --tier-glow: rgba(194, 123, 255, 0.6); }
.ach-section-title { margin-bottom: 8px; }
.ach-near-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ach-near-card { padding: 10px 12px; border-radius: 8px; background: rgba(14, 10, 20, 0.7); border: 1px solid var(--tier); box-shadow: inset 0 0 14px var(--tier-glow); }
.ach-near-name { font: 700 0.95rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; }
.ach-near-desc { font-size: 0.75rem; color: #a99fb8; margin: 3px 0 7px; }
.ach-near-count { font-size: 0.72rem; color: #d8cfe6; text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ach-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 6px; }
.ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a10, #ffd76a); box-shadow: 0 0 8px rgba(255, 215, 106, 0.6); }
.ach-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ach-medal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 10px; cursor: pointer; color: inherit;
    background: radial-gradient(circle at 50% 30%, rgba(80, 60, 110, 0.55), rgba(16, 10, 24, 0.75)); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; }
.ach-medal:hover, .ach-medal:focus-visible { transform: translateY(-3px); border-color: rgba(255, 215, 106, 0.6); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 215, 106, 0.25); outline: none; }
.ach-medal-disc { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.ach-crest { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px;
    background: radial-gradient(circle at 40% 35%, #6a5a86, #2a2038 70%); border: 2px solid #8a7aa6; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.15); }
.ach-medal.is-complete .ach-crest { background: radial-gradient(circle at 40% 35%, #fff1a0, #c9a227 55%, #6a4a08); border-color: #ffe48a; box-shadow: 0 0 18px rgba(255, 215, 106, 0.6), inset 0 -4px 8px rgba(0, 0, 0, 0.35); }
.ach-medal.is-secret .ach-crest { background: radial-gradient(circle at 40% 35%, #3a1a5a, #0d0618 70%); border-color: #6a3aa6; box-shadow: 0 0 14px rgba(140, 90, 255, 0.35); }
.ach-medal-name { font: 700 0.9rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; text-align: center; }
.ach-medal.is-complete .ach-medal-name { color: #ffd76a; }
.ach-medal-count { font-size: 0.75rem; color: #a99fb8; font-variant-numeric: tabular-nums; }
.ach-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ach-detail-title { font: 800 1.4rem/1.2 var(--font-display, 'Cinzel', serif); color: #ffd76a; flex: 1; }
.ach-detail-count { font-size: 0.85rem; color: #b9b0c8; }
.ach-plaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ach-plaque { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; }
.ach-plaque.is-unlocked { background: linear-gradient(135deg, rgba(60, 46, 20, 0.85), rgba(24, 16, 32, 0.85)); border: 1px solid var(--tier); box-shadow: 0 0 14px var(--tier-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ach-plaque.is-locked { background: rgba(12, 10, 16, 0.6); border: 1px dashed rgba(255, 255, 255, 0.12); }
.ach-plaque-medal { font-size: 26px; line-height: 1; flex: none; width: 32px; text-align: center; }
.ach-plaque.is-locked .ach-plaque-medal { filter: grayscale(1); opacity: 0.6; }
.ach-plaque-body { flex: 1; min-width: 0; }
.ach-plaque-name { font: 700 0.95rem/1.25 var(--font-display, 'Cinzel', serif); color: #f4efe6; }
.ach-plaque.is-locked .ach-plaque-name { color: #9a92a8; }
.ach-plaque-desc { font-size: 0.78rem; color: #c3bad2; margin-top: 2px; }
.ach-plaque.is-locked .ach-plaque-desc { color: #7e768c; }
.ach-plaque-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 0.7rem; color: #ffd76a; }
.ach-date { color: #a99fb8; }
.ach-reward-dim { color: #6f6880; }
/* the trophy plaque that slides in when you earn one */
.ach-toast { position: fixed; right: 18px; top: 84px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(60, 46, 20, 0.96), rgba(24, 16, 32, 0.96)); border: 2px solid var(--tier); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px var(--tier-glow);
    animation: ach-toast-in 0.5s cubic-bezier(.2, 1.3, .4, 1) both; pointer-events: none; }
.ach-toast.is-leaving { animation: ach-toast-out 0.45s ease-in both; }
.ach-toast-medal { font-size: 30px; animation: ach-medal-spin 0.9s 0.2s ease-out both; }
.ach-toast-kicker { display: block; font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tier); }
.ach-toast-name { display: block; font: 800 1.05rem/1.25 var(--font-display, 'Cinzel', serif); color: #fff1c4; margin-top: 3px; }
@keyframes ach-toast-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes ach-toast-out { to { opacity: 0; transform: translateX(40px); } }
@keyframes ach-medal-spin { from { transform: rotateY(360deg) scale(0.4); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ach-toast, .ach-toast.is-leaving, .ach-toast-medal { animation-duration: 0.01s; } }

/* ======================================================================================== Hall of Records */
.rec-hall { display: flex; flex-direction: column; gap: 14px; }
.rec-hero { display: flex; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 10px;
    background: linear-gradient(90deg, rgba(40, 18, 64, 0.85), rgba(20, 12, 28, 0.5)); border: 1px solid rgba(201, 162, 39, 0.45); }
.rec-shield { width: 84px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    clip-path: polygon(50% 0, 100% 14%, 100% 60%, 50% 100%, 0 60%, 0 14%); background: linear-gradient(160deg, #fff1a0, #c9a227 45%, #6a4a08); filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.5)); }
.rec-lvl-label { font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.2em; text-transform: uppercase; color: #4a3206; margin-top: -6px; }
.rec-lvl { font: 800 2.2rem/1 var(--font-display, 'Cinzel', serif); color: #2a1a02; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.rec-hero-main { flex: 1; min-width: 0; }
.rec-rank-name { font: 800 1.45rem/1.2 var(--font-display, 'Cinzel', serif); color: #fff1c4; }
.rec-xp { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 0.75rem; color: #c8bfd6; }
.rec-xp-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.rec-xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fbf4a, #c6ff8a); box-shadow: 0 0 8px rgba(160, 255, 120, 0.6); }
.rec-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rec-counter { padding: 8px 10px; border-radius: 6px; background: rgba(10, 8, 16, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.rc-label { display: block; font: 700 0.58rem/1 var(--font-body, sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: #9a90aa; }
.rc-val { display: block; font: 800 1.15rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-val small { display: block; font: 600 0.65rem/1.2 var(--font-body, sans-serif); color: #9a90aa; }
.rc-val.is-cash { color: #9fe08a; } .rc-val.is-shard { color: #ffd76a; }
.rec-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(201, 162, 39, 0.35); flex-wrap: wrap; }
.rec-tab { padding: 8px 14px; border-radius: 6px 6px 0 0; font: 700 0.85rem/1 var(--font-display, 'Cinzel', serif); color: #b9b0c8; background: rgba(10, 8, 16, 0.35); border: 1px solid transparent; border-bottom: 0; cursor: pointer; }
.rec-tab:hover { color: #fff; }
.rec-tab.is-on { color: #ffd76a; background: rgba(40, 18, 64, 0.8); border-color: rgba(201, 162, 39, 0.45); box-shadow: inset 0 2px 0 #c9a227; }
.rec-body { display: flex; flex-direction: column; gap: 12px; }
.rec-panel { padding: 12px 14px; border-radius: 8px; background: rgba(12, 10, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); }
.rec-panel-title { font: 700 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.22em; text-transform: uppercase; color: #c9a227; margin-bottom: 8px; }
.rec-panel-title small { letter-spacing: 0; text-transform: none; color: #8f879c; font-weight: 500; }
.rec-empty { padding: 18px; text-align: center; color: #9a90aa; font-style: italic; }
.rec-graph { width: 100%; height: 170px; display: block; }
.rec-grid { stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 4 4; }
.rec-line { fill: none; stroke: #ffd76a; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.6)); }
.rec-win { fill: #7fe06a; stroke: #0b1a06; stroke-width: 1; } .rec-loss { fill: #ff6a5a; stroke: #1a0606; stroke-width: 1; }
.rec-axis { fill: #8f879c; font-size: 11px; }
.rec-graph-key { display: flex; gap: 14px; justify-content: flex-end; font-size: 0.72rem; color: #9a90aa; margin-top: 4px; }
.rec-graph-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.k-win { background: #7fe06a; } .k-loss { background: #ff6a5a; } .k-bless { background: #ffd76a; } .k-curse { background: #8a6aff; } .k-back { background: #ff5a3c; }
.rec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.rec-card { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; padding: 10px; border-radius: 8px; background: rgba(12, 10, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); }
.rec-card-icon { grid-row: 1 / 4; font-size: 22px; align-self: center; text-align: center; }
.rec-card-label { font-size: 0.7rem; color: #9a90aa; }
.rec-card-val { font: 800 1.1rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; font-variant-numeric: tabular-nums; }
.rec-card-sub { font-size: 0.68rem; color: #8f879c; }
.rec-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rec-champ { padding: 10px 12px; border-radius: 8px; background: radial-gradient(circle at 50% 20%, rgba(80, 60, 110, 0.5), rgba(12, 10, 18, 0.7) 60%); border: 1px solid rgba(255, 255, 255, 0.08); }
.rec-champ-art { display: block; width: 96px; height: 96px; margin: 0 auto 4px; }
.rec-champ-name { text-align: center; font: 800 1rem/1.2 var(--font-display, 'Cinzel', serif); color: #fff1c4; margin-bottom: 6px; }
.rec-champ-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: #c8bfd6; margin-top: 4px; }
.rec-champ-row b { color: #f4efe6; } .rec-champ-row.dim { color: #8f879c; font-size: 0.7rem; }
.rec-gods { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rec-god { padding: 12px; border-radius: 8px; text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--god) 28%, transparent), rgba(12, 10, 18, 0.75) 65%); border: 1px solid color-mix(in srgb, var(--god) 45%, transparent); }
.rec-god-icon { font-size: 34px; filter: drop-shadow(0 0 10px var(--god)); }
.rec-god-name { font: 800 1.1rem/1.2 var(--font-display, 'Cinzel', serif); color: var(--god); }
.rec-god-domain { font-size: 0.68rem; color: #9a90aa; margin-bottom: 8px; }
.rec-god .rec-champ-row { text-align: left; }
.rec-god-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.06); margin-bottom: 6px; }
.s-bless { background: #ffd76a; } .s-curse { background: #8a6aff; } .s-back { background: #ff5a3c; } .s-none { background: transparent; }
.c-bless { color: #ffd76a !important; } .c-back { color: #ff7a5a !important; }
.rec-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding-top: 8px; }
.rec-step { display: flex; flex-direction: column; align-items: center; width: 130px; }
.rec-step-icon { font-size: 30px; }
.rec-step-name { font: 700 0.9rem/1.2 var(--font-display, 'Cinzel', serif); color: #f4efe6; text-align: center; }
.rec-step-cash { font-size: 0.8rem; color: #9fe08a; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.rec-step-block { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; border-radius: 6px 6px 0 0; font: 800 1.4rem/1 var(--font-display, 'Cinzel', serif); color: #2a1a02;
    background-color: var(--stone, #4a4258); background-image: var(--stone-noise, none), linear-gradient(180deg, #8f8a9a, #4a4456); background-blend-mode: overlay, normal; }
.step-1 .rec-step-block { height: 74px; background-image: var(--stone-noise, none), linear-gradient(180deg, #fff1a0, #c9a227); }
.step-2 .rec-step-block { height: 52px; background-image: var(--stone-noise, none), linear-gradient(180deg, #eef2f8, #9aa2b0); }
.step-3 .rec-step-block { height: 38px; background-image: var(--stone-noise, none), linear-gradient(180deg, #f0b07a, #9a5a2a); }
.rec-step.is-you .rec-step-name { color: #ffd76a; }
.rec-h2h { display: flex; flex-direction: column; gap: 6px; }
.rec-h2h-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 54px 80px; align-items: center; gap: 10px; font-size: 0.82rem; color: #e6dff0; }
.rec-h2h-row.is-out { opacity: 0.55; }
.rec-h2h-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.rec-h2h-bar .you { background: #7fe06a; } .rec-h2h-bar .them { background: #ff6a5a; }
.rec-h2h-score { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.rec-h2h-score.up { color: #9fe08a; } .rec-h2h-score.down { color: #ff8a7a; }
.rec-h2h-cash { text-align: right; color: #9fe08a; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .rec-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rec-hero { flex-direction: column; } .rec-h2h-row { grid-template-columns: 1fr 1fr 44px; } .rec-h2h-cash { display: none; } }

/* ======================================================================================== The Void Market */
.shop-market { max-width: 1060px; width: min(1060px, 96vw); }
.shop-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 12px; }
.shop-keeper { position: relative; display: flex; align-items: center; gap: 10px; }
.shop-dealer { width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2160, #0d0618 75%); border: 2px solid #c9a227; box-shadow: 0 0 22px rgba(140, 90, 255, 0.45); }
.shop-speech { position: absolute; left: 118px; top: 6px; width: 250px; padding: 8px 12px; border-radius: 10px 10px 10px 2px; z-index: 2;
    font: italic 600 0.9rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; background: rgba(24, 12, 40, 0.96); border: 1px solid rgba(169, 124, 255, 0.65);
    opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.shop-speech.is-on { opacity: 1; transform: none; animation: shop-speech-out 0.4s 3.4s ease-in forwards; }
@keyframes shop-speech-out { to { opacity: 0; } }
.shop-head-mid { text-align: center; padding-left: 250px; }
.shop-title { font: 800 2rem/1.1 var(--font-display, 'Cinzel', serif); color: #c9b8ff; text-shadow: 0 2px 0 #000, 0 0 18px rgba(169, 124, 255, 0.55); }
.shop-pick { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.shop-pick-label { font: 700 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.22em; text-transform: uppercase; color: #c9a227; }
.shop-pick-item { padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; color: #fff1c4; background: linear-gradient(90deg, rgba(90, 60, 10, 0.9), rgba(60, 20, 80, 0.9)); border: 1px solid #ffd76a; box-shadow: 0 0 14px rgba(255, 215, 106, 0.35); cursor: pointer; }
.shop-pick-item s, .shop-buy s { opacity: 0.55; }
.shop-pick-item b { color: #ffd76a; }
.shop-purse { font: 800 1.6rem/1 var(--font-display, 'Cinzel', serif); color: #ffd76a; padding: 10px 14px; border-radius: 10px; background: rgba(10, 8, 16, 0.6); border: 1px solid rgba(255, 215, 106, 0.4); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.shop-layout { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.shop-tabs { display: flex; flex-direction: column; gap: 6px; }
.shop-tab { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 8px; text-align: left; cursor: pointer; color: #c8bfd6;
    background: rgba(10, 8, 16, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.15s, border-color 0.15s; }
.shop-tab:hover { color: #fff; border-color: rgba(169, 124, 255, 0.5); }
.shop-tab.is-on { color: #fff1c4; background: linear-gradient(90deg, rgba(70, 36, 110, 0.9), rgba(30, 16, 46, 0.7)); border-color: rgba(201, 162, 39, 0.6); box-shadow: inset 3px 0 0 #c9a227; }
.shop-tab-icon { font-size: 18px; text-align: center; }
.shop-tab-name { font: 700 0.82rem/1.2 var(--font-display, 'Cinzel', serif); }
.shop-tab-count { font-size: 0.68rem; color: #8f879c; font-variant-numeric: tabular-nums; }
.shop-grid { max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.shop-cat-head { font: 700 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.22em; text-transform: uppercase; color: #c9a227; margin: 2px 0 10px; }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rarity-common { --rar: #9aa2b0; } .rarity-uncommon { --rar: #6fd36a; } .rarity-rare { --rar: #4fb4ff; } .rarity-epic { --rar: #c27bff; } .rarity-legendary { --rar: #ffb84a; }
.shop-card { position: relative; display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: linear-gradient(160deg, rgba(40, 30, 56, 0.9), rgba(14, 10, 20, 0.9));
    border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--rar) 14%, transparent); transition: transform 0.15s, box-shadow 0.2s; }
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 0 22px color-mix(in srgb, var(--rar) 26%, transparent); }
.shop-card.is-equipped { border-color: #ffd76a; box-shadow: 0 0 14px rgba(255, 215, 106, 0.35), inset 0 0 18px rgba(255, 215, 106, 0.12); }
.shop-card.is-flash { animation: shop-flash 1.2s ease-out; }
.shop-card.just-bought { animation: shop-bought 0.7s 0.45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes shop-flash { 0%, 60% { box-shadow: 0 0 0 3px #ffd76a, 0 0 30px rgba(255, 215, 106, 0.7); } }
@keyframes shop-bought { 0% { transform: scale(0.92); filter: brightness(2); } 60% { transform: scale(1.04); } 100% { transform: none; box-shadow: 0 0 26px rgba(255, 215, 106, 0.6); } }
.shop-sale { position: absolute; top: -8px; right: 10px; padding: 3px 8px; border-radius: 999px; font: 800 0.6rem/1 var(--font-body, sans-serif); letter-spacing: 0.08em; color: #2a1a02; background: linear-gradient(90deg, #ffd76a, #ffb84a); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.shop-art { width: 84px; height: 84px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rar) 30%, #2a2038), #0d0a14 75%); border: 1px solid rgba(255, 255, 255, 0.06); }
.shop-emoji { font-size: 44px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.shop-art .labyrinth-preview { width: 84px; height: 84px; border-radius: 8px; image-rendering: pixelated; }
.shop-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.shop-name { font: 800 0.98rem/1.2 var(--font-display, 'Cinzel', serif); color: #fff1c4; }
.shop-rarity { font: 700 0.56rem/1 var(--font-body, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rar); }
.shop-desc { font-size: 0.74rem; color: #b9b0c8; margin: 4px 0 6px; flex: 1; }
.shop-state { align-self: flex-start; font: 700 0.62rem/1 var(--font-body, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; margin-bottom: 6px; }
.shop-state.is-equipped { color: #2a1a02; background: #ffd76a; } .shop-state.is-owned { color: #9fe08a; border: 1px solid #6fbf4a; } .shop-state.is-locked { color: #ff9b8a; border: 1px solid #a3402a; }
.shop-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-actions .btn-retro { padding: 6px 10px; font-size: 0.78rem; flex: 1; white-space: nowrap; }
.shop-actions .shop-preview { flex: 0 0 auto; }
.shard-fly { position: fixed; z-index: 95; pointer-events: none; font-size: 18px; filter: drop-shadow(0 0 6px rgba(120, 220, 255, 0.8)); }
@media (max-width: 860px) { .shop-layout { grid-template-columns: 1fr; } .shop-tabs { flex-direction: row; overflow-x: auto; } .shop-head { grid-template-columns: auto 1fr; } .shop-head-mid { padding-left: 0; grid-column: 1 / -1; } .shop-speech { width: 180px; } }
@media (prefers-reduced-motion: reduce) { .shop-card.just-bought, .shop-card.is-flash { animation: none; } }

/* Dealer's Tip: a small portrait of him beside the tip */
.dealer-tip-face { float: left; width: 46px; height: 46px; margin: 0 8px 4px 0; border-radius: 50%; box-shadow: 0 0 10px rgba(140, 90, 255, 0.45); }

/* =====================================================================================================================
   OPTIONS MENU + HARDWARE ACCELERATION NOTICE (options-menu.js, quality.js)
   ===================================================================================================================== */
.title-btn-options { max-width: 50%; justify-self: center; width: 100%; }
@media (max-width: 767px) { .title-btn-options { max-width: none; } }
.options-menu { max-width: 40rem; }
.options-title { font: 700 1.6rem/1.2 var(--font-display, 'Cinzel', serif); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--text-header, #fff1c4); margin: 0 0 0.75rem; }
.options-body { max-height: 70vh; overflow-y: auto; padding-right: 0.5rem; display: grid; gap: 1rem; }
.options-body section { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 0.6rem; }
.options-body h3 { font: 700 0.95rem/1.2 var(--font-display, 'Cinzel', serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rune, #c39bff); margin: 0 0 0.4rem; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.opt-label { color: #e8e0f0; }
.opt-label small { color: #a99fba; font-size: 0.8em; }
.opt-help { margin: 0.1rem 0 0.4rem; font-size: 0.85rem; color: #b9b0c8; }
.opt-seg { display: inline-flex; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.opt-seg button { padding: 0.35rem 0.9rem; background: rgba(20, 14, 28, 0.65); color: #cfc6dd; font-weight: 600; border-right: 1px solid rgba(0, 0, 0, 0.5); cursor: pointer; }
.opt-seg button:last-child { border-right: 0; }
.opt-seg button:hover { background: rgba(60, 40, 90, 0.7); }
.opt-seg button.on { background: linear-gradient(180deg, var(--rune, #8a5ad0), #5a2a90); color: #fff; box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2); }
.opt-switch { position: relative; width: 3rem; height: 1.6rem; flex: 0 0 auto; border-radius: 999px; background: rgba(20, 14, 28, 0.8); border: 1px solid rgba(0, 0, 0, 0.6); cursor: pointer; transition: background 0.2s; }
.opt-switch span { position: absolute; top: 2px; left: 2px; width: calc(1.6rem - 6px); height: calc(1.6rem - 6px); border-radius: 50%; background: #8d849c; transition: transform 0.2s, background 0.2s; }
.opt-switch[aria-pressed="true"] { background: linear-gradient(180deg, var(--rune, #8a5ad0), #5a2a90); }
.opt-switch[aria-pressed="true"] span { transform: translateX(1.4rem); background: #fff; }
.opt-seg button:focus-visible, .opt-switch:focus-visible, .hw-info:focus-visible { outline: 2px solid #fff1a0; outline-offset: 2px; }
.opt-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.hw-on { color: #9be060; } .hw-off { color: #ff8a6a; } .hw-unknown { color: #b9b0c8; }
.opt-keys { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0.35rem 0.8rem; margin: 0; font-size: 0.9rem; }
.opt-keys dt { font-family: ui-monospace, monospace; color: #fff1c4; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 0.4rem; justify-self: start; }
.opt-keys dd { margin: 0; color: #cfc6dd; }
#optionsModal { z-index: 120; }
@media (max-width: 560px) { .opt-keys { grid-template-columns: auto 1fr; } }

/* the ⓘ with its how-to tooltip (hover, focus or tap) */
.hw-info { position: relative; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.95rem; line-height: 1; cursor: help; color: #fff1c4; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 241, 196, 0.45); }
.hw-tip { position: absolute; z-index: 5; bottom: calc(100% + 10px); right: -0.6rem; width: min(24rem, 86vw); padding: 0.75rem 0.9rem; border-radius: 8px; text-align: left; font-size: 0.82rem; line-height: 1.4; color: #e8e0f0; cursor: auto;
    background: #1d1528; border: 1px solid rgba(195, 155, 255, 0.45); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s; }
.hw-info:hover .hw-tip, .hw-info:focus .hw-tip, .hw-info:focus-within .hw-tip, .hw-info.open .hw-tip { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s, transform 0.15s; }
.hw-tip ul { margin: 0.35rem 0 0.45rem; padding-left: 1rem; list-style: disc; }
.hw-tip li { margin: 0.2rem 0; }
.hw-tip i { color: #fff1c4; font-style: normal; }
.hw-tip code { font-size: 0.95em; color: #9be0ff; }
.hw-check { color: #b9b0c8; }
.options-menu .hw-tip { bottom: auto; top: calc(100% + 10px); }

/* the notice: a stone plaque at the bottom of the screen */
.hw-notice { position: fixed; z-index: 130; left: 50%; bottom: 1.25rem; transform: translateX(-50%); width: min(44rem, calc(100vw - 2rem));
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem 0.75rem 1rem; border-radius: 8px; color: #f3ecfa;
    background-color: var(--stone, #4a4258); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25));
    border: 2px solid var(--mortar, #2a2230); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 18px var(--rune-soft, rgba(160, 110, 255, 0.35));
    animation: hw-in 0.45s cubic-bezier(.2, 1.3, .4, 1) both; }
.hw-notice.out { animation: hw-out 0.35s ease-in both; }
.hw-notice-icon { font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(255, 220, 120, 0.7)); }
.hw-notice-text { flex: 1; font-size: 0.95rem; line-height: 1.35; }
.hw-notice-close { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 6px; color: #cfc6dd; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.hw-notice-close:hover { color: #fff; background: rgba(0, 0, 0, 0.45); }
@keyframes hw-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hw-out { to { opacity: 0; transform: translate(-50%, 24px); } }
@media (prefers-reduced-motion: reduce) { .hw-notice, .hw-notice.out { animation-duration: 0.01s; } }

/* =====================================================================================================================
   RIVAL PORTRAITS (rival-art.js): code-drawn faces in stone medallions, painted into these placeholders
   ===================================================================================================================== */
.rival-face { display: inline-block; flex: 0 0 auto; width: var(--rf, 24px); height: var(--rf, 24px); vertical-align: middle; line-height: 0; }
.rival-face canvas { width: 100%; height: 100%; display: block; }
.chat-message.is-rival .rival-face { margin-right: 4px; vertical-align: -5px; }
.cc-icon .rival-face, .rec-step-icon .rival-face { vertical-align: top; }

/* Betting window: your cash at a glance */
.bet-purse { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px;
    background: linear-gradient(180deg, rgba(10, 30, 14, 0.75), rgba(6, 18, 9, 0.85)); border: 1px solid rgba(126, 224, 126, 0.35);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); }
.bet-purse-label { font: 700 0.7rem/1 var(--font-display, 'Cinzel', serif); letter-spacing: 0.12em; text-transform: uppercase; color: #a8c8a8; }
.bet-purse-amt { font: 800 1.15rem/1 var(--font-body, sans-serif); color: #7ee07e; text-shadow: 0 0 8px rgba(126, 224, 126, 0.45); }

.rec-step-icon .rival-face, .cc-icon .rival-face { display: block; margin: 0 auto; }
.chat-message.is-rival .rival-face { margin: -5px 4px -4px 0; }
.aar-sub-row { font-size: 0.85em; opacity: 0.9; padding-left: 0.6rem; }
.aar-payout-row { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 0.3rem; padding-top: 0.3rem; font-weight: 700; }

/* =====================================================================================================================
   UI DEPTH (10/26): main panels sit inset inside a raised frame of stone tiles; the runes are bigger and brighter.
   Frame layers are clipped to the border area (tile joints + a lit-from-above bevel); the content is shaded as a
   recessed well. Nested cards inside dialogs keep the plain stone.
   ===================================================================================================================== */
.info-panel.panel-retro,
#setup-box .panel-retro,
.modal-content {
    border: 10px solid transparent;
    border-radius: 8px;
    background-color: var(--stone-lo);
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.14)),
        radial-gradient(circle at 10px 10px, var(--rune) 0 2.4px, transparent 4.5px),
        radial-gradient(circle at calc(100% - 10px) 10px, var(--rune) 0 2.4px, transparent 4.5px),
        radial-gradient(circle at 10px calc(100% - 10px), var(--rune) 0 2.4px, transparent 4.5px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--rune) 0 2.4px, transparent 4.5px),
        var(--stone-veins),
        var(--stone-noise),
        linear-gradient(165deg, var(--stone-hi) 0%, var(--stone) 34%, var(--stone-lo) 100%),
        /* the frame: a lit top edge and a shadowed bottom edge, tile joints (each with a lit edge), grit, a bevel */
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px),
        linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0 3px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0 2px, rgba(255, 255, 255, 0.16) 2px 3px, transparent 3px 44px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0 2px, rgba(255, 255, 255, 0.12) 2px 3px, transparent 3px 44px),
        var(--stone-noise),
        linear-gradient(160deg, var(--stone-hi) 0%, var(--stone-hi) 20%, var(--stone) 60%, var(--stone-lo) 100%);
    background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box,
        border-box, border-box, border-box, border-box, border-box, border-box;
    background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box,
        border-box, border-box, border-box, border-box, border-box, border-box;
    background-blend-mode: normal, normal, normal, normal, normal, multiply, overlay, normal, normal, normal, normal, normal, overlay, normal;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.55),            /* the groove where the well meets the frame */
        inset 0 9px 16px -4px rgba(0, 0, 0, 0.75),       /* the frame's shadow falling into the well */
        inset 7px 0 12px -7px rgba(0, 0, 0, 0.55),
        inset -7px 0 12px -7px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 1px rgba(255, 255, 255, 0.06),    /* the well's lower lip catching light */
        0 0 0 1px rgba(0, 0, 0, 0.75),                   /* outer mortar line */
        0 2px 0 1px rgba(0, 0, 0, 0.45),
        0 16px 32px rgba(0, 0, 0, 0.6);
}
/* bigger, brighter rune band */
.info-panel.panel-retro::before,
#setup-box .panel-retro::before,
.modal-content::before {
    top: 5px; left: 20px; right: 20px; height: 15px;
    -webkit-mask: var(--rune-band) repeat-x center / auto 15px;
    mask: var(--rune-band) repeat-x center / auto 15px;
    filter: drop-shadow(0 0 3px var(--rune)) drop-shadow(0 0 7px var(--rune));
    animation-name: rune-breathe-bright;
}
@keyframes rune-breathe-bright { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .info-panel.panel-retro::before, #setup-box .panel-retro::before, .modal-content::before { animation: none; opacity: 0.8; } }
#aar-winnings-rivals { margin-top: 0.4rem; }

/* Selected race card: its description was light grey on gold (unreadable); dark ink instead */
.race-btn.btn-retro-primary .text-gray-300 { color: #3a2508; text-shadow: none; }
.opt-range { width: 11rem; accent-color: var(--rune, #8a5ad0); cursor: pointer; }

/* Login, sign-up and guest play */
.title-btn-guest { max-width: 70%; width: 100%; justify-self: center; opacity: 0.92; }
.auth-note { font-size: 0.8rem; color: #b9b0c8; text-align: center; margin: 0; }
.auth-info { font-size: 0.85rem; color: #9be060; }
.auth-link { font-size: 0.8rem; color: #9fc8ff; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.auth-status-note { font-size: 0.7rem; color: #b9b0c8; margin: 0 0 2px; }

/* =====================================================================================================================
   GUIDED FIRST MATCH (tutorial.js): a spotlight with everything else dimmed, and the Dealer's card beside it
   ===================================================================================================================== */
.tut-root { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.tut-root.hidden { display: none; }
.tut-spot { position: fixed; border-radius: 10px; pointer-events: none; transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, opacity 0.3s;
    box-shadow: 0 0 0 9999px rgba(8, 4, 14, 0.62), 0 0 0 2px var(--rune, #c39bff), 0 0 22px 4px var(--rune-soft, rgba(195, 155, 255, 0.5)); }
.tut-card { position: fixed; width: min(380px, calc(100vw - 28px)); display: flex; gap: 12px; padding: 12px 14px; pointer-events: auto; border-radius: 10px;
    background: linear-gradient(180deg, #2a1e3a, #1a1226); border: 2px solid var(--rune, #c39bff); color: #f2eafc;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 18px var(--rune-soft, rgba(195, 155, 255, 0.4)); transition: left 0.3s, top 0.3s; }
.tut-face { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; border: 2px solid rgba(255, 215, 106, 0.6); background: #120c1a; }
.tut-body { flex: 1; min-width: 0; }
.tut-step { font: 700 0.7rem/1 var(--font-display, 'Cinzel', serif); letter-spacing: 0.14em; text-transform: uppercase; color: #c9a227; margin-bottom: 6px; }
.tut-text { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.4; }
.tut-text b { color: #ffe08a; }
.tut-buttons { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tut-skip { background: none; border: 0; color: #a99fba; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.tut-next { padding: 6px 16px; font-size: 0.85rem; }
.tut-next.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .tut-spot, .tut-card { transition: none; } }
.opt-btn { padding: 0.3rem 0.9rem; font-size: 0.85rem; }

/* =====================================================================================================================
   LOGIN REWARDS (rewards.js)
   ===================================================================================================================== */
#rewardsButton { position: relative; }
#rewardsButton.has-reward::after { content: ''; position: absolute; top: 8px; right: 10px; width: 12px; height: 12px; border-radius: 50%;
    background: #ffd76a; box-shadow: 0 0 10px 3px rgba(255, 215, 106, 0.7); animation: rw-ping 1.6s ease-in-out infinite; }
@keyframes rw-ping { 50% { transform: scale(1.35); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { #rewardsButton.has-reward::after { animation: none; } }
#rewardsModal { z-index: 125; }
.rewards-menu { max-width: 44rem; }
.rw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rw-face { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 215, 106, 0.6); background: #120c1a; flex: 0 0 64px; }
.rw-line { margin: 4px 0 0; font-style: italic; color: #e8dcff; }
.rw-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.rw-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 8px;
    background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.rw-day.is-today { border-color: #ffd76a; box-shadow: 0 0 12px rgba(255, 215, 106, 0.45); background: rgba(80, 60, 10, 0.35); }
.rw-day.is-claimed { opacity: 0.55; }
.rw-dn { font: 700 0.65rem/1 var(--font-display, 'Cinzel', serif); letter-spacing: 0.08em; text-transform: uppercase; color: #c9a227; }
.rw-ic { font-size: 1.5rem; line-height: 1.2; }
.rw-lb { font-size: 0.75rem; font-weight: 700; color: #f2eafc; text-align: center; }
.rw-ck { position: absolute; top: 3px; right: 6px; color: #9be060; font-weight: 800; }
.rw-bars { display: grid; gap: 10px; }
.rw-bar-top { display: flex; justify-content: space-between; font-size: 0.85rem; }
.rw-meter { height: 9px; border-radius: 5px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin: 4px 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.rw-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--rune, #8a5ad0), #ffd76a); }
.rw-prize { font-size: 0.78rem; color: #b9b0c8; }
.rw-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(40, 70, 20, 0.45); border: 1px solid rgba(155, 224, 96, 0.5); }
.rw-got { font-size: 0.9rem; } .rw-got + .rw-got { margin-top: 4px; }
.rw-week b { color: #9fc8ff; } .rw-month b { color: #ffd76a; }
.rw-buttons { display: flex; gap: 10px; margin-top: 14px; } .rw-buttons button { flex: 1; }
#rewardsClaim:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 560px) { .rw-track { grid-template-columns: repeat(4, 1fr); } }

/* Options: credits (options-menu v1.3) */
.opt-credits { font-size: 0.85rem; line-height: 1.45; color: #cfc6dd; }
.opt-credits p { margin: 0 0 0.45rem; }
.opt-credits ul { margin: 0 0 0.5rem 1.1rem; list-style: disc; }
.opt-credits b { color: #e9dcff; }

/* Round report: ⇔ Focus tucks it away to look at the board; a button on the board brings it back (ui-manager v1.72) */
.aar-header .aar-focus-btn { position: static; flex: none; }
/* (the entrance animation holds opacity, so tucking fades with filter and then hides) */
.aar-container { transition: filter 0.25s, visibility 0s linear 0s; }
.aar-container.is-tucked { filter: opacity(0); visibility: hidden; pointer-events: none; transition: filter 0.25s, visibility 0s linear 0.25s; }
.aar-show-btn { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 32; padding: 6px 14px; font-size: 0.85rem; box-shadow: 0 0 14px rgba(169, 124, 255, 0.5); }
.aar-show-btn.hidden { display: none; }

/* Setup screen: Focus hides everything (the side panels fold and the middle panel fades away to show the room) */
#setup-box { transition: opacity 0.35s ease, transform 0.35s ease; }
#mainGame.rails-folded #setup-box:not(.hidden) { opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; }
.setup-show-btn { position: fixed; left: 50%; top: 88px; transform: translateX(-50%); z-index: 35; padding: 8px 16px; font-size: 0.9rem;
    box-shadow: 0 0 16px rgba(169, 124, 255, 0.5); }
.setup-show-btn.hidden { display: none; }

/* The Dealer in the setup room (setup-dealer.js): over the painted room, under every panel */
.setup-dealer { position: absolute; left: 0; top: 0; width: 100px; height: 140px; z-index: -1; pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }

/* v1.73 Final odds, colour-graded (ui-manager oddsStyle): --oc = red (favourite) .. green (big payout); --og = 0..1 gold
   glow for long shots, with !s (the value) and ?s (the risk) twinkling round the badge */
.odds-badge { position: relative; align-self: center; display: inline-flex; flex-direction: column; align-items: center; margin-top: 4px; padding: 4px 14px 3px;
    border-radius: 9px; background: rgba(8, 6, 14, 0.72); border: 1px solid color-mix(in srgb, var(--oc) 70%, transparent); line-height: 1; }
.odds-badge .ob-val { font: 700 1.3rem/1.05 var(--font-display, 'Cinzel', serif); color: var(--oc); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px color-mix(in srgb, var(--oc) 45%, transparent); letter-spacing: 0.02em; }
.odds-badge .ob-tier { margin-top: 2px; font: 700 0.56rem/1 var(--font-body, sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--oc) 75%, #fff); opacity: 0.9; }
.odds-badge.is-longshot { border-color: rgba(255, 205, 80, calc(0.5 + var(--og) * 0.5));
    box-shadow: 0 0 calc(6px + var(--og) * 22px) calc(var(--og) * 5px) rgba(255, 196, 60, calc(0.3 + var(--og) * 0.45)), inset 0 0 calc(4px + var(--og) * 10px) rgba(255, 200, 80, calc(0.15 + var(--og) * 0.3));
    animation: ob-pulse calc(2.4s - var(--og) * 1s) ease-in-out infinite; }
.odds-badge.is-longshot .ob-val { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 calc(6px + var(--og) * 12px) rgba(255, 210, 90, calc(0.5 + var(--og) * 0.5)); }
.odds-badge .ob-mark { position: absolute; left: 50%; top: 50%; font: 900 calc(0.8rem * var(--s)) / 1 var(--font-display, 'Cinzel', serif); font-style: normal; color: #ffd75e;
    text-shadow: 0 0 6px rgba(255, 190, 40, 0.95), 0 1px 1px #000; pointer-events: none;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
    animation: ob-twinkle 1.6s ease-in-out var(--d) infinite; opacity: 0; }
@keyframes ob-pulse { 50% { box-shadow: 0 0 calc(10px + var(--og) * 30px) calc(var(--og) * 8px) rgba(255, 205, 70, calc(0.4 + var(--og) * 0.5)), inset 0 0 calc(6px + var(--og) * 14px) rgba(255, 210, 90, calc(0.2 + var(--og) * 0.35)); } }
@keyframes ob-twinkle { 0%, 100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 0.85), calc(-50% + var(--y) * 0.85)) scale(0.6); }
    40%, 60% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 4px)) scale(1.1) rotate(-8deg); } }
.final-odds { color: var(--oc); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.final-odds.is-longshot { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 calc(5px + var(--og) * 10px) rgba(255, 205, 70, calc(0.5 + var(--og) * 0.5)); }
@media (prefers-reduced-motion: reduce) { .odds-badge.is-longshot, .odds-badge .ob-mark { animation: none; } .odds-badge .ob-mark { opacity: 0.85; } }
/* the champion the follow camera is on (script.js v1.74) */
.champion-stat-row.is-followed { box-shadow: inset 2px 0 0 #8fd3ff, inset 0 0 0 1px rgba(143, 211, 255, 0.35); background: rgba(143, 211, 255, 0.07); }
.champion-stat-row.is-followed .champ-cells::before { content: '🎥 '; font-size: 0.7rem; }

/* v1.3 chat-popups moods: the feeling behind a rival's or champion's line, on its portrait */
.speaker-host .sp-facewrap { position: relative; flex: none; }
.speaker-host .sp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.speaker-host .sp-fx i { position: absolute; font-style: normal; display: block; }
/* angry: red in the face, shaking, steam pouring from both ears */
.mood-angry .sp-face { animation: md-angry 0.5s ease-in-out infinite; }
@keyframes md-angry { 0%, 100% { transform: translateX(0); box-shadow: 0 5px 14px rgba(0,0,0,.6), 0 0 14px rgba(255,60,40,.5), inset 0 0 18px rgba(255,40,30,.55); }
    25% { transform: translateX(-1.5px) rotate(-2deg); } 75% { transform: translateX(1.5px) rotate(2deg); box-shadow: 0 5px 14px rgba(0,0,0,.6), 0 0 20px rgba(255,60,40,.75), inset 0 0 26px rgba(255,40,30,.7); } }
.fx-steam { top: 40%; width: 0; height: 0; }
.fx-steam.l { left: 2%; } .fx-steam.r { right: 2%; }
.fx-steam b { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #fff 0 30%, rgba(225,228,238,.95) 48%, rgba(190,195,210,.6) 62%, rgba(180,185,200,0) 72%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); opacity: 0; animation: md-steam 0.9s ease-out var(--d) infinite; }
.fx-steam.l b { --sx: -1; } .fx-steam.r b { --sx: 1; }
@keyframes md-steam { 0% { opacity: 0; transform: translate(0, 0) scale(0.35); } 12% { opacity: 1; } 60% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(calc(var(--sx) * 26px), -34px) scale(1.8); } }
/* gloat: the portrait flashes red */
.mood-gloat .sp-face { animation: md-gloat-ring 0.7s ease-in-out infinite; }
@keyframes md-gloat-ring { 50% { border-color: #ff3030; box-shadow: 0 5px 14px rgba(0,0,0,.6), 0 0 22px 4px rgba(255,40,40,.85); } }
.fx-flash { inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,40,40,.0) 30%, rgba(255,30,30,.65) 100%); mix-blend-mode: screen; animation: md-flash 0.7s ease-in-out infinite; }
@keyframes md-flash { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
/* dead: greyed, red X's over the eyes */
.mood-dead .sp-face { filter: grayscale(0.85) brightness(0.8); }
.fx-x { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; animation: md-x 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-x::before, .fx-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 4px; margin: -2px 0 0 -8.5px; border-radius: 2px;
    background: #ff2b2b; box-shadow: 0 0 0 1px #3a0000, 0 0 6px rgba(255,30,30,.8); transform: rotate(45deg); }
.fx-x::after { transform: rotate(-45deg); }
.fx-x + .fx-x { animation-delay: 0.12s; }
@keyframes md-x { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* shock: a jolt, a "!" and sweat flying off */
.mood-shock .sp-face { animation: md-jolt 0.35s ease-out 2; }
@keyframes md-jolt { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-5px) scale(1.08); } 100% { transform: none; } }
.fx-bang { right: -8px; top: -10px; font: 900 1.4rem/1 var(--font-display, serif); color: #fff36b; text-shadow: 0 0 6px #ff9a00, 0 2px 0 #000; animation: md-bang 0.5s ease-out both; }
@keyframes md-bang { from { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.3) rotate(8deg); } to { transform: scale(1) rotate(8deg); } }
.fx-drop { left: 50%; top: 20%; width: 7px; height: 10px; margin-left: -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#e9fbff, #6fd3ff);
    box-shadow: 0 0 3px rgba(111,211,255,.8); opacity: 0; transform-origin: 50% 300%; animation: md-drop 1s ease-out var(--d) infinite; }
@keyframes md-drop { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px); } }
/* despair: a little rain cloud over the head, tinted blue */
.mood-despair .sp-face { filter: saturate(0.6) hue-rotate(-10deg) brightness(0.9); }
.fx-cloud { left: 8%; right: 8%; top: -20px; height: 18px; border-radius: 12px; background: radial-gradient(circle at 30% 60%, #8d97a8 0 40%, transparent 41%), radial-gradient(circle at 60% 40%, #9aa4b5 0 46%, transparent 47%), radial-gradient(circle at 82% 65%, #7f8899 0 36%, transparent 37%);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation: md-cloud 2.4s ease-in-out infinite; }
.fx-cloud b { position: absolute; top: 14px; width: 2px; height: 7px; border-radius: 1px; background: #8fd3ff; opacity: 0; animation: md-rain 0.7s linear var(--d) infinite; }
@keyframes md-cloud { 50% { transform: translateX(3px); } }
@keyframes md-rain { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }
/* triumph: a gold ring and stars bursting out */
.fx-ring { inset: -4px; border-radius: 50%; border: 3px solid transparent; animation: md-ring 1.1s ease-in-out infinite; }
.fx-ring.gold { border-color: rgba(255,215,90,.9); box-shadow: 0 0 16px 3px rgba(255,200,60,.7); }
.fx-ring.volt { border-color: rgba(140,220,255,.9); box-shadow: 0 0 14px 3px rgba(110,200,255,.75); animation: md-volt 0.18s steps(2) infinite; }
@keyframes md-ring { 50% { transform: scale(1.06); opacity: 0.7; } }
@keyframes md-volt { 50% { opacity: 0.35; transform: rotate(8deg) scale(1.04); } }
.fx-star { left: 50%; top: 50%; color: #ffe27a; font-size: 13px; text-shadow: 0 0 6px #ffb300; opacity: 0; animation: md-star 1.3s ease-out var(--d) infinite; }
@keyframes md-star { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4); } 20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-52px) scale(1.1) rotate(180deg); } }
/* cheer: bouncing, confetti */
.mood-cheer .sp-face { animation: md-bounce 0.45s ease-in-out infinite; }
@keyframes md-bounce { 50% { transform: translateY(-5px); } }
.fx-confetti { left: var(--l, 50%); top: -6px; width: 5px; height: 8px; background: var(--c); opacity: 0; animation: md-confetti 1.4s ease-in var(--d) infinite; }
@keyframes md-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 70px) rotate(var(--r)); } }
/* power: crackling lightning */
.fx-bolt { top: 18%; font-size: 17px; filter: drop-shadow(0 0 4px #6fd3ff); animation: md-bolt 0.3s steps(2) infinite; }
.fx-bolt.l { left: -12px; transform: rotate(-20deg); } .fx-bolt.r { right: -12px; transform: scaleX(-1) rotate(-20deg); animation-delay: 0.15s; }
@keyframes md-bolt { 50% { opacity: 0.2; } }
/* tired: sagging, a sweat drop and z's */
.mood-tired .sp-face { animation: md-sag 1.6s ease-in-out infinite; }
@keyframes md-sag { 50% { transform: translateY(3px) rotate(-4deg); filter: brightness(0.85); } }
.fx-drop.one { left: 76%; top: 14%; --a: 0deg; animation: md-trickle 1.6s ease-in infinite; transform-origin: 50% 50%; }
@keyframes md-trickle { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } }
.fx-z { right: -14px; top: -8px; font: 700 13px/1 var(--font-body, sans-serif); color: #cfe3ff; text-shadow: 0 1px 2px #000; animation: md-z 2s ease-out infinite; }
.fx-z b { position: absolute; left: 8px; top: -9px; font-size: 10px; } .fx-z b + b { left: 15px; top: -17px; font-size: 8px; }
@keyframes md-z { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
/* confused: ? marks circling the head */
.fx-q { left: 50%; top: 50%; font: 900 15px/1 var(--font-display, serif); color: #d8b4ff; text-shadow: 0 0 5px #8a4dff, 0 1px 1px #000; animation: md-orbit 1.8s linear var(--d) infinite; }
@keyframes md-orbit { from { transform: translate(-50%, -50%) rotate(0) translateY(-44px) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg) translateY(-44px) rotate(-360deg); } }
/* prayer: a halo and a soft light from above */
.fx-halo { left: 18%; right: 18%; top: -12px; height: 10px; border-radius: 50%; border: 3px solid #ffe58a; box-shadow: 0 0 10px 2px rgba(255,220,110,.85), inset 0 0 6px rgba(255,230,140,.8); animation: md-ring 1.6s ease-in-out infinite; }
.fx-rays { inset: -6px; border-radius: 50%; background: radial-gradient(circle at 50% 10%, rgba(255,240,170,.55), transparent 60%); animation: md-flash 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .speaker-host .sp-fx i, .speaker-host .sp-fx i b, .speaker-host[class*='mood-'] .sp-face { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}
/* setup-dealer.js v1.3: his speech bubble (over the panels, so it can be read even when he's half behind one) */
.setup-dealer-bubble { position: fixed; z-index: 45; padding: 8px 12px; border-radius: 10px; pointer-events: none; opacity: 0; transform: translateY(6px) scale(0.96);
    font: italic 600 0.92rem/1.3 var(--font-display, 'Cinzel', serif); color: #f6ecff; background: rgba(28, 14, 46, 0.94); border: 1px solid rgba(169, 124, 255, 0.6);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); transition: opacity 0.3s, transform 0.35s cubic-bezier(.2, 1.3, .4, 1); }
.setup-dealer-bubble.is-on { opacity: 1; transform: none; }

/* match-replay.js: the post-match bar, the replay controls and the territory graph (all over the board) */
.pm-bar { position: absolute; left: 50%; bottom: 16px; z-index: 34; display: flex; gap: 10px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.35s cubic-bezier(.2, 1.3, .4, 1); }
.pm-bar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pm-bar .btn-retro { padding: 9px 16px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.rp-ctl { position: absolute; left: 50%; bottom: 12px; z-index: 35; width: min(760px, calc(100% - 24px)); transform: translateX(-50%); padding: 10px 14px 8px;
    border-radius: 12px; background: rgba(14, 9, 24, 0.9); border: 1px solid rgba(169, 124, 255, 0.5); box-shadow: 0 10px 28px rgba(0,0,0,.6); color: #eee6ff; }
.rp-badge { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font: 700 0.72rem/1.4 var(--font-body, sans-serif);
    letter-spacing: 0.22em; color: #ffb3b3; background: rgba(40, 6, 10, 0.85); border: 1px solid rgba(255, 90, 90, 0.6); animation: rp-blink 1.6s ease-in-out infinite; }
@keyframes rp-blink { 50% { color: #ff5d5d; } }
.rp-track { position: relative; height: 34px; }
.rp-scrub { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; accent-color: #b48cff; cursor: pointer; }
.rp-marks { position: absolute; left: 8px; right: 8px; top: 0; height: 18px; pointer-events: none; }
.rp-mark { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 12px; line-height: 1; pointer-events: auto; cursor: help; filter: drop-shadow(0 1px 1px #000); }
.rp-mark.ko { color: #ff6b6b; font-weight: 900; }
.rp-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.rp-row button { min-width: 36px; height: 30px; border-radius: 7px; border: 1px solid rgba(169, 124, 255, 0.45); background: rgba(60, 36, 100, 0.65); color: #fff; font-size: 0.95rem; cursor: pointer; }
.rp-row button:hover { background: rgba(110, 70, 170, 0.8); }
.rp-row .rp-play { min-width: 46px; background: rgba(120, 80, 200, 0.85); }
.rp-time { margin-left: 8px; font: 600 0.85rem/1 var(--font-body, sans-serif); font-variant-numeric: tabular-nums; }
.rp-speed { margin-left: 6px; font: 700 0.75rem/1 var(--font-body, sans-serif); color: #ffd75e; letter-spacing: 0.06em; }
.rp-exit { margin-left: auto; padding: 0 12px; font-size: 0.82rem !important; }
.tg-panel { position: absolute; inset: 56px 24px 18px; z-index: 35; display: flex; flex-direction: column; padding: 10px 14px 8px; border-radius: 14px;
    background: rgba(12, 8, 22, 0.94); border: 1px solid rgba(169, 124, 255, 0.5); box-shadow: 0 14px 36px rgba(0,0,0,.7); color: #eee6ff; animation: tg-in 0.35s ease-out; }
@keyframes tg-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.tg-head { display: flex; align-items: center; gap: 10px; }
.tg-head b { font: 700 1.05rem/1 var(--font-display, 'Cinzel', serif); color: #ffd75e; letter-spacing: 0.04em; }
.tg-sub { font-size: 0.78rem; color: #a99cc4; margin-right: auto; }
.tg-head .btn-retro { padding: 5px 10px; font-size: 0.8rem; }
.tg-chart { flex: 1 1 62%; width: 100%; min-height: 0; margin-top: 6px; }
.tg-line { flex: 0 0 34%; width: 100%; min-height: 0; border-top: 1px solid rgba(169, 124, 255, 0.25); }
/* (keep the post-match bar and the replay controls clear of the hardware-acceleration notice while it shows) */
body:has(#hw-notice:not(.hidden)) .rp-ctl, body:has(#hw-notice:not(.hidden)) .pm-bar { bottom: 82px; }


/* ui-manager v1.74: the setup screen's Statistics and Progression panels */
.sp2 { display: flex; flex-direction: column; gap: 10px; font-size: 0.82rem; color: #e6def5; }
.sp2-card { padding: 9px 10px; background: linear-gradient(180deg, rgba(20, 14, 32, 0.78), rgba(12, 9, 20, 0.78)); border: 1px solid rgba(169, 124, 255, 0.22); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.sp2-card h4 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 7px; font: 700 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
.sp2-h-right { margin-left: auto; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; color: #f2ecff; }
.sp2-h-right small { color: #9b90b3; font-weight: 500; }
.sp2-empty { color: #8f86a6; font-style: italic; font-size: 0.76rem; }
.sp2 .up { color: #7ee38a; } .sp2 .down { color: #ff8080; }
/* record */
.sp2-record { display: flex; align-items: center; gap: 12px; }
.sp2-ringwrap { position: relative; width: 76px; height: 76px; flex: none; }
.sp2-ring { width: 76px; height: 76px; transform: rotate(-90deg); }
.sp2-ring circle { fill: none; stroke-width: 8; }
.sp2-ring .bg { stroke: rgba(255, 120, 120, 0.28); }
.sp2-ring .fg { stroke: #6fe08a; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(111,224,138,.6)); transition: stroke-dasharray 0.8s ease; }
.sp2-ringtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sp2-ringtxt b { font: 700 1.15rem/1 var(--font-display, 'Cinzel', serif); color: #fff; }
.sp2-ringtxt span { font-size: 0.6rem; color: #a99cc4; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.1em; }
.sp2-recinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp2-recinfo .wl { font: 700 1.05rem/1 var(--font-display, 'Cinzel', serif); } .sp2-recinfo .wl .w { color: #7ee38a; } .sp2-recinfo .wl .l { color: #ff8080; } .sp2-recinfo .wl span { color: #776e8c; }
.sp2 .sm { font-size: 0.72rem; color: #a99cc4; }
.sp2-chip { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; background: rgba(255,255,255,.06); color: #b9b0cc; }
.sp2-chip.hot { background: rgba(255, 140, 40, 0.18); color: #ffbd6e; } .sp2-chip.cold { background: rgba(110, 180, 255, 0.16); color: #9fd0ff; }
/* recent form */
.sp2-form { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sp2-pip { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.sp2-pip.w { background: #4fc46a; } .sp2-pip.l { background: #d94b4b; }
.sp2-pip.gold { box-shadow: 0 0 0 2px #ffd75e, 0 0 6px rgba(255,215,94,.8); }
.sp2-pip-now { width: 14px; height: 14px; border-radius: 50%; border: 1px dashed #8f86a6; color: #8f86a6; font: 700 9px/12px sans-serif; text-align: center; font-style: normal; }
/* bankroll */
.sp2-spark { width: 100%; height: 46px; display: block; }
.sp2-spark .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sp2-spark.up .line { stroke: #7ee38a; } .sp2-spark.down .line { stroke: #ff8080; }
.sp2-spark .area { opacity: 0.16; } .sp2-spark.up .area { fill: #7ee38a; } .sp2-spark.down .area { fill: #ff8080; }
.sp2-spark circle { fill: #fff; }
.sp2-spark-cap { display: flex; justify-content: space-between; font-size: 0.68rem; color: #8f86a6; margin-top: 2px; }
/* tiles */
.sp2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp2-tile { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 8px; background: rgba(12, 9, 20, 0.78); border: 1px solid rgba(169, 124, 255, 0.18); }
.sp2-tile .ic { font-size: 0.95rem; } .sp2-tile b { font: 700 0.92rem/1.1 var(--font-display, 'Cinzel', serif); color: #fff; }
.sp2-tile .lb { font-size: 0.64rem; color: #a99cc4; text-transform: uppercase; letter-spacing: 0.06em; } .sp2-tile .sub { font-size: 0.66rem; color: #d9b44a; }
/* bars */
.sp2-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sp2-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #5b8cff, #8fb4ff); }
.sp2-bar.gold i { background: linear-gradient(90deg, #c9952a, #ffd75e); } .sp2-bar.near i { background: linear-gradient(90deg, #a35bff, #d7a6ff); }
.sp2-bar.thin { height: 4px; }
.sp2-type { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; margin-bottom: 7px; }
.sp2-type .nm { font-weight: 600; } .sp2-type .val { font-weight: 700; color: #cfe0ff; } .sp2-type .sp2-bar { grid-column: 1 / -1; }
.sp2-type .mine { grid-column: 1 / -1; font-size: 0.66rem; color: #8f86a6; } .sp2-type .star { color: #ffd75e; }
.sp2-feats { display: flex; flex-wrap: wrap; gap: 5px; }
.sp2-feats span { padding: 3px 7px; border-radius: 6px; font-size: 0.7rem; background: rgba(255,255,255,.05); color: #b9b0cc; } .sp2-feats b { color: #fff; }
/* level */
.sp2-level { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.sp2-badge { width: 54px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, #ffe08a, #c9952a 55%, #7a5310); box-shadow: 0 0 12px rgba(255,200,80,.5); color: #2a1a04; }
.sp2-badge span { font: 700 0.55rem/1 var(--font-body, sans-serif); letter-spacing: 0.12em; } .sp2-badge b { font: 700 1.35rem/1 var(--font-display, 'Cinzel', serif); }
.sp2-levelinfo .rank { font: 700 0.95rem/1.2 var(--font-display, 'Cinzel', serif); color: #9fd0ff; margin-bottom: 5px; }
.sp2-xp { height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid rgba(0,0,0,.4); }
.sp2-xp i { display: block; height: 100%; background: linear-gradient(90deg, #c9952a, #ffd75e, #fff3c4); box-shadow: 0 0 8px rgba(255,215,94,.7); border-radius: 5px; }
.sp2-levelinfo .sm { display: flex; justify-content: space-between; margin-top: 3px; } .sp2-levelinfo .shards { color: #d9b44a; font-weight: 700; }
.sp2-nextrank { grid-column: 1 / -1; font-size: 0.72rem; color: #a99cc4; display: flex; flex-direction: column; gap: 3px; } .sp2-nextrank b { color: #e6def5; }
/* daily rewards */
.sp2-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sp2-day { height: 20px; border-radius: 5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-style: normal; }
.sp2-day.on { background: linear-gradient(180deg, #ffd75e, #c9952a); border-color: #ffd75e; box-shadow: 0 0 6px rgba(255,215,94,.55); }
.sp2-day.next { border: 1px dashed #ffd75e; animation: sp2-next 1.4s ease-in-out infinite; }
@keyframes sp2-next { 50% { background: rgba(255,215,94,.25); } }
.sp2-mini { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; color: #a99cc4; } .sp2-mini b { color: #fff; }
.sp2-claim { width: 100%; margin-top: 7px; padding: 6px; font-weight: 700; color: #2a1a04 !important; background: linear-gradient(180deg, #ffe08a, #c9952a) !important; animation: sp2-next 1.6s ease-in-out infinite; }
/* achievements */
.sp2-cat { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 2px 6px; margin-bottom: 6px; }
.sp2-cat .cr { font-size: 0.85rem; } .sp2-cat .ct { font-weight: 700; color: #d9b44a; font-size: 0.74rem; }
.sp2-cat .sp2-bar { grid-column: 2 / -1; height: 5px; }
.sp2-cat.full .nm { color: #ffd75e; }
.sp2-near { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 6px; cursor: help; }
.sp2-near .nm { font-weight: 600; } .sp2-near .ct { font-size: 0.72rem; color: #d7a6ff; font-weight: 700; } .sp2-near .sp2-bar { grid-column: 1 / -1; height: 5px; }
/* dealer's pick */
.sp2-pick .row { display: flex; align-items: center; gap: 8px; } .sp2-pick .em { font-size: 1.3rem; } .sp2-pick .nm { font-weight: 700; flex: 1; min-width: 0; }
.sp2-pick .pr s { color: #776e8c; font-size: 0.72rem; } .sp2-pick .pr b { color: #ffd75e; }
/* (compact fit) */
#setup-stats-content, #setup-progression-content { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(169,124,255,.4) transparent; padding-right: 2px; }
.sp2 { gap: 8px; }
.sp2-card { padding: 7px 9px; } .sp2-card h4 { margin-bottom: 5px; white-space: nowrap; }
.sp2-ringwrap, .sp2-ring { width: 64px; height: 64px; } .sp2-ringtxt b { font-size: 1rem; } .sp2-ringtxt span { font-size: 0.52rem; }
.sp2-pip, .sp2-pip-now { width: 12px; height: 12px; } .sp2-form { gap: 4px; flex-wrap: nowrap; } .sp2-pip-now { line-height: 10px; }
.sp2-spark { height: 38px; }
.sp2-tile { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 5px; padding: 5px 7px; }
.sp2-tile .lb { flex-basis: 100%; order: 3; font-size: 0.58rem; } .sp2-tile .sub { order: 4; font-size: 0.6rem; } .sp2-tile b { font-size: 0.86rem; }
.sp2-type { margin-bottom: 5px; }
.sp2-type .nm { display: flex; align-items: center; gap: 5px; }
.sp2-type .ico { display: inline-flex; width: 16px; height: 16px; flex: none; }
.sp2-type .ico svg, .sp2-type .ico img, .sp2-type .ico * { width: 16px !important; height: 16px !important; }
body.setup-dealer-hover, body.setup-dealer-hover * { cursor: pointer !important; }

/* ============================================================================================
   Batch 36: in-game rails redesign (Betting rail, Game rail, betting window)
   ============================================================================================ */
#core-layout .info-panel .rail-h { margin: 0 0 10px; padding-bottom: 6px; text-align: center; font: 700 1.3rem/1.1 var(--font-display, 'Cinzel', serif); color: #f2ecff;
    border-bottom: 1px solid rgba(169, 124, 255, 0.28); text-shadow: 0 1px 0 #000, 0 0 10px var(--rune-soft); }
#core-layout .info-panel .rail-sub { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; padding-top: 8px;
    border-top: 1px solid rgba(169, 124, 255, 0.22); font: 700 0.68rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
#core-layout .info-panel .rail-sub .toggle { font-size: 0.6rem; color: #9b90b3; }
.gb-hint { font: 500 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.02em; text-transform: none; color: #8f86a6; }
.rb-card { padding: 8px 9px; border-radius: 8px; background: linear-gradient(180deg, rgba(20, 14, 32, 0.8), rgba(12, 9, 20, 0.8));
    border: 1px solid rgba(169, 124, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

/* ---- Your Bet card */
.rb-mybet { margin-bottom: 8px; transition: border-color .3s, box-shadow .3s; }
.rb-mybet.is-lead { border-color: rgba(242, 193, 78, 0.6); box-shadow: 0 0 12px rgba(242, 193, 78, 0.18), inset 0 1px 0 rgba(255,255,255,.05); }
.rb-mybet.is-out { border-color: rgba(224, 87, 74, 0.5); filter: saturate(0.6); }
.mb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font: 700 0.64rem/1 var(--font-body, sans-serif);
    letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
.mb-cash { letter-spacing: 0; font-size: 0.82rem; color: #7ee07e; text-shadow: 0 0 6px rgba(126, 224, 126, 0.35); }
.mb-main { display: flex; gap: 8px; align-items: center; }
#core-layout .mb-portrait, .mb-portrait { width: 46px; height: 46px; margin: 0; }
.mb-swatch { width: 30px; height: 30px; border-radius: 6px; flex: none; }
.mb-info { min-width: 0; flex: 1; }
.mb-name { font: 700 0.92rem/1.15 var(--font-display, serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.mb-line { font-size: 0.74rem; line-height: 1.35; color: #b9b0cc; }
.mb-line b { color: #f2ecff; }
.mb-line .mb-pay { color: #7ee07e; }
.mb-live { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 0.72rem; }
.mb-pos { flex: none; min-width: 58px; font-weight: 700; color: #cfc6e3; }
.mb-pos.is-lead { color: var(--gold, #f2c14e); }
.mb-pos.is-out { color: #ff7a6b; }
.mb-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.mb-bar i, .cs-bar i, .ld-bar i, .us-xp i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .5s ease; }
.mb-share { flex: none; width: 40px; text-align: right; font-weight: 700; color: #f2ecff; font-variant-numeric: tabular-nums; }
.mb-empty { font-size: 0.74rem; color: #8f86a6; font-style: italic; line-height: 1.35; }

/* ---- streak chips */
.rb-streaks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.rb-streaks-h { width: 100%; font: 700 0.62rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #ff9a4a; }
.rb-streak { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border-radius: 999px; font-size: 0.72rem; color: #ffe2c4;
    background: linear-gradient(180deg, rgba(120, 40, 10, 0.55), rgba(70, 20, 5, 0.55)); border: 1px solid rgba(255, 140, 60, 0.45); }
.rb-streak.is-you { padding-left: 7px; border-color: rgba(242, 193, 78, 0.7); }
.rb-streak b { color: #ffb36b; }

/* ---- rival cards */
.rb-rivals { display: flex; flex-direction: column; gap: 5px; }
.rv-card { display: flex; gap: 7px; align-items: flex-start; padding: 5px 6px; border-radius: 7px; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.06); }
.rv-card.is-hot { border-color: rgba(255, 140, 60, 0.5); box-shadow: inset 0 0 10px rgba(255, 120, 40, 0.12); }
.rv-card.is-out { opacity: 0.55; }
.rv-art { position: relative; flex: none; line-height: 0; }
.rv-crown { position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 0.8rem; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.rv-body { flex: 1; min-width: 0; }
.rv-top { display: flex; align-items: baseline; gap: 4px; }
.rv-name { font-weight: 700; font-size: 0.82rem; color: #f2ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-race { font-size: 0.62rem; color: #8f86a6; }
.rv-cash { margin-left: auto; font-weight: 700; font-size: 0.78rem; color: #7ee07e; font-variant-numeric: tabular-nums; }
.rv-mid { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 0.7rem; }
.rv-lives { color: #ff5d73; letter-spacing: 1px; }
.rv-card.is-out .rv-lives { color: #ff7a6b; letter-spacing: 0; font-weight: 700; }
.rv-wl { color: #9b90b3; font-variant-numeric: tabular-nums; }
.rv-mid .reseat-btn { margin-left: auto; padding: 1px 6px; font-size: 0.64rem; }
.rv-bet { display: flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 6px 2px 4px; border-radius: 4px; font-size: 0.68rem; color: #cfc6e3;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.rv-bet i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 4px currentColor; }
.rv-bet-amt { color: #ffd76b; font-weight: 700; flex: none; }
.rv-bet-on { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bet b { margin-left: auto; flex: none; }
.rv-bet.is-dead { opacity: 0.55; text-decoration: line-through; }

/* ---- strategy leads */
.rb-leads { display: flex; flex-direction: column; gap: 3px; }
.ld-row { display: grid; grid-template-columns: 1fr auto 46px 30px; gap: 6px; align-items: center; font-size: 0.72rem; color: #cfc6e3; }
.ld-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ld-wl { color: #9b90b3; font-variant-numeric: tabular-nums; }
.ld-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.ld-bar i { background: #8fd4ff; }
.ld-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Game rail: match controls */
.gm { display: flex; flex-direction: column; gap: 7px; }
.gm-top { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.gm-clock, .gm-stat { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 8px; border-radius: 7px;
    background: rgba(10, 7, 18, 0.6); border: 1px solid rgba(169, 124, 255, 0.2); min-width: 0; }
.gm-k { font: 700 0.58rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #8fd4ff; }
#time-elapsed { font: 800 1.25rem/1 var(--font-body, sans-serif); color: #f2ecff; font-variant-numeric: tabular-nums; min-width: 3.6em; }
.gm-stat #status { margin: 0; font-weight: 700; font-size: 0.82rem; line-height: 1.2; overflow-wrap: anywhere; }
.gm-payout { font-size: 0.74rem; line-height: 1.35; color: #ffd76b; }
.gm-payout:empty { display: none; }
.gm-ctrl { display: flex; gap: 6px; align-items: stretch; }
#core-layout .info-panel .gm-pause { flex: none; width: 82px; padding: 6px 4px; font-size: 0.78rem; }
.gm-pause.is-paused { color: #1a0f02; background-color: var(--gold, #f2c14e); }
.gm-speed { flex: 1; display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--stone-hi, #6b6079); background: rgba(0,0,0,.4); }
#core-layout .info-panel .gm-speed .speed-btn { flex: 1 1 0; min-width: 0; padding: 6px 0; font: 700 0.76rem/1 var(--font-body, sans-serif); color: #cfc6e3;
    background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: background .15s, color .15s; }
#core-layout .info-panel .gm-speed .speed-btn:last-child { border-right: 0; }
#core-layout .info-panel .gm-speed .speed-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
#core-layout .info-panel .gm-speed .speed-btn.is-on { background: var(--gold, #f2c14e); color: #1a0f02; box-shadow: inset 0 0 8px rgba(255,255,255,.35); }
.gm-lag { margin: -3px 0 0; font-size: 0.62rem; color: #fdba74; text-align: center; }
.gm-actions { display: flex; flex-direction: column; gap: 5px; }
#core-layout .info-panel .gm-actions .btn-retro { width: 100%; padding: 7px 8px; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gm-actions kbd, .gb-place kbd { padding: 0 4px; border-radius: 3px; font: 700 0.62rem/1.4 var(--font-body, sans-serif); background: rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.3); }
.gm-count { font-weight: 800; opacity: 0.8; }

/* ---- champion standings (both phases) */
.cs-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 4px; padding-top: 8px; border-top: 1px solid rgba(169, 124, 255, 0.22);
    font: 700 0.68rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
.gm-champs, .gb-champs { display: flex; flex-direction: column; gap: 2px; }
.champion-stat-row { padding: 3px 5px; border-radius: 6px; cursor: pointer; transition: background .15s; }
.champion-stat-row:hover { background: rgba(255,255,255,0.06); }
.champion-stat-row.is-out { opacity: 0.45; }
.champion-stat-row.is-mine { background: rgba(242, 193, 78, 0.08); box-shadow: inset 2px 0 0 var(--gold, #f2c14e); }
.cs-main { display: flex; align-items: center; gap: 0; min-width: 0; }
.cs-rank { flex: none; width: 14px; font: 800 0.72rem/1 var(--font-body, sans-serif); color: #8f86a6; text-align: left; font-variant-numeric: tabular-nums; }
.cs-rank:empty { display: none; }
.cs-rank.is-first { color: var(--gold, #f2c14e); }
.cs-main .champ-portrait { width: 30px; height: 30px; margin-right: 6px; }
.cs-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-trend { flex: none; width: 12px; font-size: 0.6rem; text-align: center; }
.cs-trend.is-up { color: #6ee07e; }
.cs-trend.is-down { color: #ff6b5e; }
.champ-cells { flex: none; margin-left: 3px; min-width: 40px; text-align: right; font-weight: 700; font-size: 0.8rem; color: #f2ecff; font-variant-numeric: tabular-nums; }
.gb-champs .champ-cells { min-width: 0; font-weight: 500; }
.cs-bar { height: 3px; margin: 3px 0 0 50px; border-radius: 2px; background: rgba(0,0,0,.45); overflow: hidden; }
.cs-bar i { opacity: 0.9; }
.champ-subrow:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px; padding: 2px 0 0 50px; font-size: 0.72rem; line-height: 1.1; }
.cs-bettors, .cs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }

/* ---- You footer */
.us-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.us-grid.is-tourney { display: block; font-size: 0.78rem; }
.us-grid.is-tourney > div { padding: 1px 0; }
.us-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 6px; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.06); }
.us-tile span { font: 700 0.54rem/1 var(--font-body, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: #8f86a6; }
.us-tile b { font-size: 0.92rem; line-height: 1; color: #f2ecff; font-variant-numeric: tabular-nums; }
.us-tile .us-w { color: #7ee07e; } .us-tile .us-l { color: #ff8a7a; } .us-tile .us-hot { color: #ffb36b; }
.us-rank { margin-top: 6px; }
.us-rank-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; margin-bottom: 3px; }
.us-rank-name { font-weight: 700; color: #8fd4ff; }
.us-lvl { color: #cfc6e3; font-weight: 700; }
.us-xp { position: relative; height: 14px; border-radius: 7px; background: rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.6); overflow: hidden; }
.us-xp i { background: linear-gradient(90deg, #c99a0c, #f2c14e); }
.us-xp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 0.6rem/1 var(--font-body, sans-serif); color: #fff; text-shadow: 0 1px 1px #000; }

/* ---- betting window */
.gb-bet { display: flex; flex-direction: column; gap: 8px; }
.gb-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; margin-bottom: 4px; font: 700 0.68rem/1 var(--font-body, sans-serif);
    letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
.gb-sec-h label { cursor: default; }
.gb-champ-row { display: flex; align-items: stretch; gap: 4px; }
#core-layout .info-panel .gb-arrow { flex: none; width: 24px; padding: 0; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.gb-champ-card { flex: 1; min-width: 0; min-height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; line-height: 1.3; padding: 8px 6px; text-align: center;
    border-radius: 8px; background: linear-gradient(180deg, rgba(20, 14, 32, 0.85), rgba(12, 9, 20, 0.85)); border: 1px solid rgba(169, 124, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.gb-wager { display: flex; flex-direction: column; gap: 4px; }
#core-layout .info-panel .gb-input { padding: 6px 8px; font: 700 1.05rem/1.2 var(--font-body, sans-serif); text-align: center; }
.gb-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
#core-layout .info-panel .gb-quick .btn-retro { padding: 4px 0; font-size: 0.7rem; min-width: 0; }
.gb-quick .gb-max { color: #ffd76b; font-weight: 800; }
.gb-steps { display: flex; align-items: center; gap: 2px; font-size: 0.6rem; color: #8f86a6; }
.gb-steps > span { flex: none; margin-right: 3px; }
#core-layout .info-panel .gb-steps .step-pill { flex: 1 1 0; min-width: 0; padding: 2px 0; font-size: 0.6rem; }
.gb-odds { border-radius: 8px; background: rgba(10, 7, 18, 0.6); border: 1px solid rgba(169, 124, 255, 0.22); overflow: hidden; }
.gb-win { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; }
.gb-win-l { font: 700 0.64rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #cfc6e3; }
.gb-win-amt { font: 800 1.35rem/1 var(--font-body, sans-serif); color: #7ee07e; text-shadow: 0 0 10px currentColor; font-variant-numeric: tabular-nums; }
.gb-why { border-top: 1px solid rgba(255,255,255,0.06); }
.gb-why > summary { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 9px; cursor: pointer; list-style: none; font-size: 0.68rem; color: #9b90b3; }
.gb-why > summary::-webkit-details-marker { display: none; }
.gb-why > summary::before { content: '▸'; font-size: 0.7rem; transition: transform .15s; }
.gb-why[open] > summary::before { transform: rotate(90deg); }
.gb-why > summary > span:first-of-type { flex: 1; }
.gb-why > summary:hover { color: #f2ecff; }
.gb-why-odds { font-weight: 800; font-size: 0.78rem; }
.gb-breakdown { padding: 2px 9px 7px; font-size: 0.7rem; color: #9b90b3; display: flex; flex-direction: column; gap: 2px; }
.gb-breakdown .text-base { font-size: 0.82rem; }
#core-layout .info-panel .gb-place { padding: 9px 6px; font: 800 0.86rem/1.2 var(--font-body, sans-serif); letter-spacing: 0.02em; }
.gb-place-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ---- Batch 36: setup middle panel (Game Setup) */
#setup-box .gs-panel { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.gs-title { margin: 0; text-align: center; font: 700 1.6rem/1.1 var(--font-display, 'Cinzel', serif); color: #bcd6ff; text-shadow: 0 1px 0 #000, 0 0 14px var(--rune-soft); }
.gs-summary { margin: -4px auto 0; max-width: 92%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; font-size: 0.74rem; color: #b9b0cc; text-align: center; }
.gs-summary b { color: var(--gold, #f2c14e); }
.gs-summary i { font-style: normal; margin: 0 7px; color: #6b6079; }
.gs-sec { display: flex; flex-direction: column; gap: 8px; }
.gs-sec-h { display: flex; align-items: center; gap: 8px; font: 700 0.72rem/1 var(--font-body, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: #d9b44a; }
.gs-sec-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 180, 74, 0.35), transparent); order: 2; }
.gs-sec-h .gs-hint { order: 3; font: 500 0.66rem/1 var(--font-body, sans-serif); letter-spacing: 0.02em; text-transform: none; color: #8f86a6; }
.gs-step { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.66rem; letter-spacing: 0;
    color: #1a0f02; background: var(--gold, #f2c14e); box-shadow: 0 0 8px rgba(242, 193, 78, 0.45); }
.gs-races { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button.race-btn.gs-race { position: relative; display: flex; gap: 10px; align-items: center; padding: 9px 10px; text-align: left; border-radius: 9px; cursor: pointer;
    color: #e8e2f5; background: linear-gradient(180deg, rgba(34, 26, 50, 0.92), rgba(18, 13, 28, 0.92)); border: 1px solid rgba(169, 124, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.35); transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; text-shadow: none; }
button.race-btn.gs-race:hover { border-color: rgba(242, 193, 78, 0.55); transform: translateY(-1px); }
button.race-btn.gs-race.btn-retro-primary { color: #fff6dc; background: linear-gradient(180deg, rgba(92, 66, 18, 0.95), rgba(48, 32, 8, 0.95)); border-color: var(--gold, #f2c14e);
    box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.35), 0 0 18px rgba(242, 193, 78, 0.3), inset 0 1px 0 rgba(255, 240, 200, 0.18); }
.gs-race-face { flex: none; line-height: 0; filter: saturate(0.75) brightness(0.9); transition: filter .2s; }
.race-btn.btn-retro-primary .gs-race-face { filter: none; }
.gs-race-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-race-name { display: flex; align-items: center; gap: 6px; font: 700 1.02rem/1.1 var(--font-display, 'Cinzel', serif); }
.gs-race-check { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font: 800 0.6rem/1 var(--font-body, sans-serif); color: #1a0f02; background: var(--gold, #f2c14e); }
.race-btn.btn-retro-primary .gs-race-check { display: inline-flex; }
.gs-race-ab { align-self: flex-start; padding: 1px 7px; border-radius: 999px; font: 700 0.64rem/1.4 var(--font-body, sans-serif); letter-spacing: 0.06em; text-transform: uppercase;
    color: #8fd4ff; background: rgba(143, 212, 255, 0.1); border: 1px solid rgba(143, 212, 255, 0.3); }
.race-btn.btn-retro-primary .gs-race-ab { color: #ffe08a; background: rgba(242, 193, 78, 0.14); border-color: rgba(242, 193, 78, 0.45); }
.gs-race-desc { font-size: 0.72rem; line-height: 1.3; color: #b9b0cc; }
.race-btn.btn-retro-primary .gs-race-desc { color: #f0e2bd; }
.gs-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; padding: 11px 12px; border-radius: 9px; background: rgba(8, 6, 14, 0.55); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 2px 8px rgba(0,0,0,.4); }
.gs-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span 1; }
.gs-field.gs-wide { grid-column: span 2; }
.gs-lbl { font: 700 0.7rem/1 var(--font-body, sans-serif); color: #cfc6e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-lbl kbd, .gs-actions kbd { padding: 0 4px; border-radius: 3px; font: 700 0.6rem/1.4 var(--font-body, sans-serif); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); color: inherit; }
.gs-opt { font-weight: 500; color: #8f86a6; }
#setup-box .gs-input { width: 100%; padding: 6px 8px; font-size: 0.86rem; min-height: 0; }
#setup-box input.gs-input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-body, sans-serif); color: #7d7493; }
.gs-blurb { display: flex; gap: 8px; align-items: flex-start; padding: 0 4px; font-size: 0.74rem; line-height: 1.35; color: #a59cbc; min-height: 1.35em; }
.gs-blurb b { color: #e8e2f5; }
.gs-blurb-e { font-size: 1rem; line-height: 1.1; }
.gs-actions { display: flex; gap: 8px; margin-top: 2px; }
#setup-box .gs-back { flex: none; padding: 10px 14px; font-size: 0.82rem; opacity: 0.9; }
#setup-box .gs-go { flex: 1; padding: 11px 12px; font: 800 1rem/1.1 var(--font-body, sans-serif); letter-spacing: 0.04em; }
.gs-go kbd { background: rgba(0,0,0,.18) !important; border-color: rgba(0,0,0,.25) !important; }
@media (max-width: 1100px) { .gs-table { grid-template-columns: 1fr 1fr; } .gs-field.gs-wide { grid-column: span 2; } }

/* ---- Batch 37: How to Play (the Dealer's Handbook, how-to-play.js) */
.htp-modal { display: flex; flex-direction: column; gap: 10px; width: min(960px, 94vw); max-width: 960px; }
.htp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.htp-title { margin: 0; font: 700 1.9rem/1.1 var(--font-display, 'Cinzel', serif); color: #bcd6ff; text-shadow: 0 1px 0 #000, 0 0 14px var(--rune-soft); }
#mechanicsModal .htp-guided { padding: 8px 14px; font: 800 0.86rem/1.2 var(--font-body, sans-serif); letter-spacing: 0.03em; }
.htp-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(169, 124, 255, 0.25); }
.htp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font: 700 0.8rem/1 var(--font-body, sans-serif);
    color: #cfc6e3; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.08); transition: background .15s, color .15s, border-color .15s; }
.htp-tab:hover { color: #fff; border-color: rgba(242, 193, 78, 0.45); }
.htp-tab.is-on { color: #1a0f02; background: var(--gold, #f2c14e); border-color: #fff3c4; box-shadow: 0 0 10px rgba(242, 193, 78, 0.4); }
.htp-pane { height: min(60vh, 560px); overflow-y: auto; padding-right: 8px; color: #d6cfe6; font-size: 0.86rem; line-height: 1.45; }
.htp-tip { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 12px 8px 8px; border-radius: 10px;
    background: linear-gradient(90deg, rgba(92, 66, 18, 0.45), rgba(20, 14, 32, 0.3)); border: 1px solid rgba(242, 193, 78, 0.3); }
.htp-tip p { margin: 0; font-style: italic; color: #f0e2bd; }
.htp-dealer { width: 60px; height: 60px; flex: none; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(242, 193, 78, 0.35); image-rendering: auto; }
.htp-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; font: 700 0.76rem/1.2 var(--font-body, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #d9b44a; }
.htp-sub { letter-spacing: 0.02em; text-transform: none; font-weight: 500; color: #8f86a6; }
.htp-p { margin: 0 0 8px; }
.htp-note { margin-top: 8px; font-size: 0.74rem; color: #8f86a6; }
.htp-mono { font-family: ui-monospace, monospace; color: #ffd76b; }
.htp-cash { color: #7ee07e; } .htp-life { color: #ff7a8a; }
.htp-kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; margin: 0 1px; border-radius: 4px; text-align: center; font: 700 0.72rem/1.55 var(--font-body, sans-serif); color: #f2ecff;
    background: linear-gradient(180deg, #3a3150, #241d33); border: 1px solid #514669; box-shadow: 0 2px 0 #0c0912; }
.htp-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.htp-steps li { counter-increment: s; position: relative; padding: 8px 10px 8px 44px; border-radius: 8px; background: rgba(10, 7, 18, 0.5); border: 1px solid rgba(255,255,255,0.06); }
.htp-steps li::before { content: counter(s); position: absolute; left: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font: 800 0.8rem/1 var(--font-body, sans-serif); color: #1a0f02; background: var(--gold, #f2c14e); box-shadow: 0 0 8px rgba(242, 193, 78, 0.45); }
.htp-steps b { color: #f2ecff; }
.htp-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.htp-card { padding: 9px 11px; border-radius: 9px; background: linear-gradient(180deg, rgba(20, 14, 32, 0.8), rgba(12, 9, 20, 0.8)); border: 1px solid rgba(169, 124, 255, 0.2); }
.htp-card.htp-wide { grid-column: 1 / -1; }
.htp-card h4 { margin: 0 0 4px; font: 700 0.92rem/1.2 var(--font-display, serif); color: #f2ecff; }
.htp-card p { margin: 0; font-size: 0.8rem; }
.htp-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.htp-champ { display: flex; gap: 8px; align-items: center; padding: 6px 10px 8px 4px; border-radius: 10px; background: linear-gradient(180deg, rgba(20, 14, 32, 0.8), rgba(12, 9, 20, 0.8));
    border: 1px solid rgba(169, 124, 255, 0.2); transition: border-color .15s; }
.htp-champ:hover { border-color: rgba(242, 193, 78, 0.5); }
.htp-champ-cv { width: 124px; height: 124px; flex: none; }
.htp-champ-body { min-width: 0; }
.htp-champ h4 { margin: 0 0 4px; font: 700 1rem/1.1 var(--font-display, serif); text-shadow: 0 1px 0 #000; }
.htp-champ p { margin: 4px 0 0; font-size: 0.76rem; line-height: 1.35; }
.htp-best { color: #d9b44a; font-weight: 600; }
.htp-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: 0.66rem; color: #9b90b3; text-transform: uppercase; letter-spacing: 0.08em; }
.htp-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.htp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c99a0c, #f2c14e); }
.htp-flank { display: flex; gap: 3px; margin: 4px 0 6px; }
.htp-flank i { width: 22px; height: 22px; border-radius: 5px; }
.htp-flank .a { background: #3f8fe0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.htp-flank .b { background: #e8473b; animation: htpFlank 2.4s infinite; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
@keyframes htpFlank { 0%, 45% { background: #e8473b; transform: none; } 52% { background: #fff; transform: scale(1.15); } 60%, 100% { background: #3f8fe0; transform: none; } }
.htp-races { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.htp-race { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.07); }
.htp-race .rival-face { flex: none; }
.htp-race h4 { margin: 0 0 2px; font: 700 0.9rem/1.2 var(--font-display, serif); color: #ffe08a; }
.htp-race p { margin: 0; font-size: 0.76rem; line-height: 1.35; }
.htp-gods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.htp-god { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 8px; text-align: center; background: rgba(10, 7, 18, 0.55);
    border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--gc) 14%, transparent); }
.htp-god b { color: var(--gc); font-size: 0.92rem; }
.htp-god span { font-size: 0.68rem; color: #9b90b3; }
.htp-gambits { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; font-size: 0.78rem; }
.htp-gambits > div { padding: 5px 8px; border-radius: 7px; background: rgba(10, 7, 18, 0.45); border: 1px dashed rgba(169, 124, 255, 0.3); }
.htp-gambits b { display: block; color: #e2c8ff; }
.htp-odds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 8px; padding: 8px; border-radius: 9px; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.06); }
.htp-odds > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.htp-odds b { font-size: 1.05rem; text-shadow: 0 0 8px currentColor; }
.htp-odds span { font-size: 0.64rem; color: #9b90b3; text-transform: uppercase; letter-spacing: 0.06em; }
.htp-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.htp-keys > div { padding: 9px 11px; border-radius: 9px; background: rgba(10, 7, 18, 0.55); border: 1px solid rgba(255,255,255,0.07); }
.htp-keys h4 { margin: 0 0 6px; font: 700 0.72rem/1 var(--font-body, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #d9b44a; }
.htp-key { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; font-size: 0.78rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.htp-key > span:first-child { flex: none; white-space: nowrap; color: #f2ecff; }
.htp-key > span:last-child { text-align: right; color: #b9b0cc; }
#mechanicsModal .htp-close { width: 100%; padding: 10px; font: 800 0.92rem/1.2 var(--font-body, sans-serif); }
@media (max-width: 760px) { .htp-cards2, .htp-champs, .htp-races, .htp-gambits, .htp-keys { grid-template-columns: 1fr; } .htp-gods { grid-template-columns: 1fr 1fr; } .htp-odds { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .htp-flank .b { animation: none; } }

/* ---- Batch 39: title background zoomed out. The painting sits at 92% of a full-screen cover (it was 106%), its
   edges feathered into a darker, full-size copy of itself on the page behind it, under the existing vignette. The
   effects canvas (#bg-motion) gets the same scale, so its windows / motes stay on the painting. */
body.bg-title { --title-zoom: 0.92;
    background: linear-gradient(rgba(8, 5, 18, 0.5), rgba(8, 5, 18, 0.5)), url('https://i.imgur.com/ivQ1ykb.png') center / cover no-repeat, #0d0a1a; }
.bg-title::before, .bg-title #bg-motion {
    scale: var(--title-zoom);
    translate: calc(var(--tpx, 0) * -12px) calc(var(--tpy, 0) * -7px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
}
@keyframes title-zoom-out { from { scale: 1.9; filter: brightness(1.45) saturate(1.2); } to { scale: var(--title-zoom, 0.92); filter: none; } }

/* ---- Batch 39: title menu. Two carved feature slabs (Start gilded, Tournament void-purple) with an icon medallion and
   a subtitle, then six smaller tablets in three columns. An inner rune line lights up and a sheen sweeps on hover. */
.title-menu { display: flex; flex-direction: column; gap: 14px; }
.title-menu.hidden { display: none; }
.title-menu-main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.title-menu-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#titleScreen .title-btn.tb-main, #titleScreen .title-btn.tb-small {
    display: flex; align-items: center; gap: 12px; overflow: hidden; isolation: isolate; text-align: left;
    border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.75); letter-spacing: 0.04em;
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease, color .2s ease;
}
#titleScreen .title-btn.tb-main { min-height: 78px; padding: 12px 18px 12px 14px; }
#titleScreen .title-btn.tb-small { min-height: 50px; padding: 8px 12px; gap: 9px; justify-content: center;
    font: 700 1rem/1.1 var(--font-display, 'Cinzel', serif); }
/* inner rune line */
#titleScreen .tb-main::before, #titleScreen .tb-small::before {
    content: ''; position: absolute; inset: 4px; border-radius: 4px; pointer-events: none; z-index: -1;
    border: 1px solid rgba(143, 212, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); transition: border-color .2s, box-shadow .2s;
}
/* the sheen (replaces the old rune underline) */
#titleScreen .tb-main::after, #titleScreen .tb-small::after {
    content: ''; position: absolute; inset: 0 auto 0 -60%; left: -60%; right: auto; bottom: 0; top: 0; width: 45%; height: auto; border-radius: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent); box-shadow: none; opacity: 1;
    transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
#titleScreen .tb-main:hover::after, #titleScreen .tb-small:hover::after { left: 120%; }
#titleScreen .tb-main:hover, #titleScreen .tb-small:hover { transform: translateY(-2px); filter: brightness(1.1); }
#titleScreen .tb-main:active, #titleScreen .tb-small:active { transform: translateY(1px); filter: brightness(0.95); }
#titleScreen .tb-small:hover::before { border-color: rgba(143, 212, 255, 0.6); box-shadow: inset 0 0 12px rgba(143, 212, 255, 0.25); }
#titleScreen .tb-small:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(143, 212, 255, 0.4), 0 0 18px rgba(143, 212, 255, 0.3), 0 10px 22px rgba(0,0,0,.6); }
.tb-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb-small .tb-ic { width: 19px; height: 19px; color: #8fd4ff; filter: drop-shadow(0 0 4px rgba(143, 212, 255, 0.5)); }
.tb-main .tb-ic { width: 46px; height: 46px; padding: 11px; border-radius: 50%; box-sizing: border-box; }
.tb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-label { font: 700 1.5rem/1.05 var(--font-display, 'Cinzel', serif); letter-spacing: 0.05em; }
.tb-small .tb-label { font-size: 1rem; }
.tb-sub { font: 600 0.68rem/1.2 var(--font-body, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Start: gilded */
#titleScreen .tb-start { color: #2a1804; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
    background: var(--stone-noise), linear-gradient(180deg, #ffe28f 0%, #f2c14e 45%, #b97f12 100%); background-blend-mode: overlay, normal;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(90, 50, 0, 0.45), 0 0 22px rgba(242, 193, 78, 0.35), 0 12px 24px rgba(0,0,0,.6);
    animation: tbGold 3.2s ease-in-out infinite; }
#titleScreen .tb-start::before { border-color: rgba(90, 50, 0, 0.35); }
#titleScreen .tb-start .tb-ic { color: #ffe9a8; background: radial-gradient(circle at 40% 35%, #6b3f08, #2a1804); box-shadow: inset 0 0 0 2px rgba(255, 220, 140, 0.55), 0 2px 6px rgba(0,0,0,.4); }
#titleScreen .tb-start:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(90, 50, 0, 0.45), 0 0 34px rgba(242, 193, 78, 0.65), 0 14px 26px rgba(0,0,0,.6); }
@keyframes tbGold { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(90, 50, 0, 0.45), 0 0 16px rgba(242, 193, 78, 0.25), 0 12px 24px rgba(0,0,0,.6); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(90, 50, 0, 0.45), 0 0 30px rgba(242, 193, 78, 0.5), 0 12px 24px rgba(0,0,0,.6); } }
/* Tournament: void purple */
#titleScreen .tb-tourney { color: #f3e8ff; text-shadow: 0 1px 2px rgba(0,0,0,.8);
    background: var(--stone-noise), linear-gradient(180deg, #7a4cc4 0%, #4a2584 50%, #2a1450 100%); background-blend-mode: overlay, normal;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.45), 0 0 18px rgba(169, 124, 255, 0.3), 0 12px 24px rgba(0,0,0,.6); }
#titleScreen .tb-tourney::before { border-color: rgba(214, 184, 255, 0.3); }
#titleScreen .tb-tourney .tb-ic { color: #ffd76b; background: radial-gradient(circle at 40% 35%, #3a1c6a, #160a2c); box-shadow: inset 0 0 0 2px rgba(214, 184, 255, 0.45), 0 2px 6px rgba(0,0,0,.4); }
#titleScreen .tb-tourney:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.45), 0 0 32px rgba(169, 124, 255, 0.6), 0 14px 26px rgba(0,0,0,.6); }
#titleScreen .tb-tourney:hover::before, #titleScreen .tb-start:hover::before { border-color: rgba(255, 255, 255, 0.45); }
#rewardsButton.has-reward .tb-ic { color: #ffd76b; filter: drop-shadow(0 0 5px rgba(255, 215, 107, 0.8)); }
@media (max-width: 767px) { .title-menu-main { grid-template-columns: 1fr; } .title-menu-sub { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { #titleScreen .tb-start { animation: none; } #titleScreen .tb-main::after, #titleScreen .tb-small::after { display: none; } }
#titleScreen .title-btn.tb-auth { min-height: 60px; font-size: 1.3rem; }

/* ---- Batch 45: title footer note, Privacy & Terms, device notice */
.title-legal { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 92vw; margin: 0; text-align: center;
    font: 500 0.74rem/1.3 var(--font-body, sans-serif); color: rgba(220, 210, 240, 0.72); text-shadow: 0 1px 2px #000; }
.title-legal-link { background: none; border: 0; padding: 0; margin-left: 4px; font: inherit; color: #cbb8ff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.title-legal-link:hover { color: #fff; }
body.title-exit .title-legal { opacity: 0; transition: opacity .3s; }
#privacyModal, #deviceNotice { z-index: 9000; }
.legal-modal { width: min(720px, 94vw); }
.legal-title { margin: 0 0 10px; text-align: center; font: 700 1.6rem/1.1 var(--font-display, 'Cinzel', serif); color: #bcd6ff; }
.legal-body { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 8px; font-size: 0.86rem; line-height: 1.5; color: #d6cfe6; }
.legal-body h3 { margin: 14px 0 4px; font: 700 0.74rem/1.2 var(--font-body, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #d9b44a; }
.legal-body ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.legal-body li { margin: 3px 0; }
.legal-body p { margin: 4px 0; }
.legal-callout { padding: 9px 11px; border-radius: 8px; background: rgba(92, 66, 18, 0.35); border: 1px solid rgba(242, 193, 78, 0.4); color: #f0e2bd; }
.legal-link { color: #8fd4ff; text-decoration: underline; }
.legal-updated { margin-top: 12px !important; font-size: 0.74rem; color: #8f86a6; }
.device-text { font-size: 0.92rem; line-height: 1.5; color: #d6cfe6; }
@media (max-height: 640px) { .title-legal { bottom: 6px; font-size: 0.66rem; } }