/* ═══════════════════════════════════════════════════════════
   KARDINALS — v3 Deep Ocean HUD
   Everblue 2 × Y2K × retro-game instrument panels
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Deep ocean base */
    --ocean-deep: #060d14;
    --ocean-mid: #0a1820;
    --ocean-teal: #0c2230;

    /* HUD chrome */
    --hud-bg: rgba(8, 20, 32, 0.88);
    --hud-solid: #0a1a28;
    --hud-frame: #1a3848;
    --hud-frame-light: #2a5868;
    --hud-frame-dark: #081420;
    --hud-border: #1a4a5a;
    --hud-border-light: #2a6a7a;
    --hud-border-glow: rgba(40, 180, 160, 0.12);
    --hud-inner: rgba(20, 60, 80, 0.12);

    /* Gold — player accent */
    --gold: #d4a520;
    --gold-bright: #f0c840;
    --gold-dim: #8a7030;
    --gold-glow: rgba(212, 165, 32, 0.1);
    --parch: #c8b898;
    --parch-light: #d8ccb0;

    /* Green — system/status readout */
    --green: #30c870;
    --green-dim: #208848;
    --green-glow: rgba(48, 200, 112, 0.08);

    /* Cyan — opponent accent */
    --cyan: #40d8d0;
    --cyan-dim: #208880;

    /* Text */
    --text-primary: #c8d8d4;
    --text-secondary: #8aa8a4;
    --text-dim: #5a7878;
    --text-faint: #3a5858;
    --text-readout: #40d8a0;
    --text-muted: #4a6868;

    /* Legacy aliases (used throughout app.js innerHTML) */
    --overlay-bg: rgba(8, 20, 32, 0.92);
    --text-secondary: #8aa8a4;
    --border-medium: rgba(26, 74, 90, 0.2);
    --radius-sm: 2px;
    --font-serif: 'IM Fell English', Georgia, serif;
    --copper: #b07048;
    --red-accent: #8b3a3a;
    --brass: #b08d57;
    --brass-light: #d4ad6a;
    --brass-dark: #7a6030;
    --nail: var(--hud-border);
    --iron: var(--hud-frame);

    /* Panel aliases (referenced by JS-generated HTML) */
    --panel-dark: var(--hud-frame-dark);
    --panel-mid: var(--hud-frame);
    --panel-warm: var(--hud-frame-light);
    --panel-light: var(--hud-border);
    --panel-highlight: var(--hud-border-light);
    --panel-edge: var(--hud-frame-dark);
    --panel-wood-dark: var(--text-primary);
    --panel-wood-mid: var(--hud-frame);
    --panel-wood-warm: var(--hud-frame-light);
    --panel-wood-light: var(--hud-border);
    --panel-wood-edge: var(--hud-frame-dark);

    /* Fonts */
    --font-pixel: 'Silkscreen', 'VT323', monospace;
    --font-system: 'VT323', monospace;
    --font-mono: 'Space Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }

body {
    background: var(--ocean-deep);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    position: relative;
    overflow-x: hidden;
}

/* === BACKGROUND — ocean depth + sonar grid === */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -2;
    background:
        linear-gradient(rgba(26,72,90,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,72,90,0.02) 1px, transparent 1px),
        linear-gradient(180deg,
            rgba(16,50,66,0.4) 0%,
            rgba(8,24,38,0.2) 30%,
            rgba(6,13,20,0) 60%),
        radial-gradient(ellipse 40% 30% at 25% 15%, rgba(40,120,100,0.06), transparent),
        radial-gradient(ellipse 35% 25% at 70% 25%, rgba(30,100,120,0.04), transparent);
    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
    pointer-events: none;
}

/* Scanlines */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 10001;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,20,30,0.025) 2px, rgba(0,20,30,0.025) 4px);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   HUD PANEL — shared instrument frame style
   Replaces wood-panel, stone-panel, foliage-panel, leather-panel
   ═══════════════════════════════════════════════════════════ */
.wood-panel, .stone-panel, .foliage-panel, .leather-panel, .parchment-panel {
    position: relative;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(26,74,90,0.15), 0 4px 16px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}

.wood-panel::before, .stone-panel::before, .foliage-panel::before,
.wood-panel::after, .stone-panel::after, .foliage-panel::after {
    display: none;
}

.wood-panel > *, .stone-panel > *, .foliage-panel > *,
.leather-panel > *, .parchment-panel > * {
    position: relative; z-index: 1;
}

/* Hide procedural material canvases */
.material-canvas { display: none !important; }

/* Hide brass rivets */
.rivet { display: none; }

/* Panel header — HUD bar style */
.panel-header {
    font-family: var(--font-pixel);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--text-readout);
    padding: 4px 8px;
    background: linear-gradient(90deg, var(--hud-frame-dark), var(--hud-frame), var(--hud-frame-dark));
    border-bottom: 1px solid rgba(26,74,90,0.2);
}

/* Per-material header overrides — now unified */
.wood-panel .panel-header,
.foliage-panel .panel-header,
.stone-panel .panel-header {
    color: var(--text-readout);
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   BOOK — File explorer style
   ═══════════════════════════════════════════════════════════ */

.book-fab {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom, 20px));
    right: 18px;
    z-index: 6800;
    width: 42px; height: 42px;
    border-radius: 2px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 8px var(--hud-border-glow);
    color: var(--gold);
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.book-fab:hover {
    border-color: var(--gold-dim);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 16px var(--gold-glow);
    transform: scale(1.06);
}
.book-fab:active { transform: scale(0.94); }
.book-fab.book-open { opacity: 0; pointer-events: none; }
.book-fab.nudge { animation: bagNudge 2s ease-in-out infinite; }
.book-fab.game-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

@media (min-width: 601px) {
    .book-fab {
        right: auto; left: 50%;
        transform: translateX(-50%);
        bottom: max(24px, env(safe-area-inset-bottom, 24px));
    }
    .book-fab:hover { transform: translateX(-50%) scale(1.06); }
    .book-fab:active { transform: translateX(-50%) scale(0.94); }
}

/* Book panel */
.book-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 82vh;
    z-index: 6850;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    display: flex; flex-direction: column;
    background: var(--hud-solid);
    border: 1px solid var(--hud-border);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.6);
    overflow: hidden;
}
.book-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.book-left-panel { display: none; }
.book-right-panel { display: contents; }
.book-spine { display: none; }

/* Book header (mobile) */
.book-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(180deg, var(--hud-frame), var(--hud-frame-dark));
    border-bottom: 1px solid rgba(26,74,90,0.2);
}
.book-header::after {
    content: '▾';
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 14px;
    color: rgba(64, 216, 160, 0.2);
    pointer-events: none;
}
.book-title {
    font-family: var(--font-pixel);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.15em;
}
.book-header-right { display: flex; align-items: center; gap: 8px; }
.book-account-btn {
    background: none;
    border: 1px solid rgba(26,74,90,0.3);
    color: var(--text-muted);
    font-size: 14px;
    width: 28px; height: 28px;
    border-radius: 2px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.book-account-btn:hover {
    border-color: var(--hud-border-light);
    background: rgba(26,74,90,0.1);
    color: var(--text-secondary);
}

/* Tab bar */
.book-tabs-row {
    display: flex; align-items: center; flex-shrink: 0;
    border-bottom: 1px solid rgba(26,74,90,0.15);
    background: var(--hud-frame-dark);
}
.book-tab-arrow {
    flex-shrink: 0; width: 48px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--text-muted);
    cursor: pointer; transition: color 0.2s;
    background: none; border: none; padding: 10px 6px;
}
.book-tab-arrow:hover { color: var(--gold); }
.book-tab-arrow:active { transform: scale(0.9); }
.book-tabs {
    display: flex; flex: 1;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.book-tabs::-webkit-scrollbar { display: none; }
.book-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap; text-align: center;
}
.book-tab:hover { color: var(--text-secondary); }
.book-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Swipeable pages */
.book-pages { flex: 1; position: relative; overflow: hidden; }
.book-pages-track {
    display: flex; height: 100%;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.book-page {
    flex: 0 0 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    background: var(--hud-solid);
}

/* Book backdrop */
.book-backdrop {
    position: fixed; inset: 0;
    background: rgba(6,13,20,0.5);
    z-index: 6840;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}
.book-backdrop.active { opacity: 1; pointer-events: auto; }

/* Card celebration */
.card-celebration {
    position: fixed; inset: 0; z-index: 10002;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(6,13,20,0.85);
    opacity: 0;
    animation: celebFadeIn 0.3s ease-out forwards;
}
.card-celebration .celeb-card {
    width: 160px; height: 160px;
    border-radius: 2px; overflow: hidden;
    border: 2px solid rgba(212,165,32,0.4);
    box-shadow: 0 0 40px var(--gold-glow), 0 8px 32px rgba(0,0,0,0.5);
    animation: celebCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.card-celebration .celeb-card.official {
    border-color: rgba(212,165,32,0.6);
    box-shadow: 0 0 50px rgba(212,165,32,0.15), 0 8px 32px rgba(0,0,0,0.5);
}
.card-celebration .celeb-card img { width: 100%; height: 100%; object-fit: cover; }
.card-celebration .celeb-text {
    font-family: var(--font-pixel);
    font-size: 13px; color: var(--gold);
    letter-spacing: 0.1em; margin-top: 16px;
    opacity: 0; animation: celebTextIn 0.4s ease-out 0.5s forwards;
}
.card-celebration .celeb-sub {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px; opacity: 0;
    animation: celebTextIn 0.4s ease-out 0.7s forwards;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION
   ═══════════════════════════════════════════════════════════ */
.notification {
    position: fixed; top: 20px; right: 20px;
    background: var(--hud-solid);
    border: 1px solid var(--hud-border);
    padding: 12px 20px;
    border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    display: none; z-index: 10000;
    transition: opacity 0.3s;
    font-family: var(--font-system);
    font-size: 14px; color: var(--text-primary);
}
.notification.show { display: block; animation: slideIn 0.3s ease-out; }
.notification.error { background: rgba(40,12,12,0.95); color: #e06060; border-color: #4a1a1a; }
.notification.success { background: rgba(8,30,20,0.95); color: var(--green); border-color: var(--green-dim); }

/* ═══════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════════════ */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(6,13,20,0.7);
    display: none; justify-content: center; align-items: center;
    z-index: 10001;
}
.loading-overlay.show { display: flex; }
.spinner { font-size: 80px; animation: spin 1.5s linear infinite; }

/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════ */
.admin-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(6,13,20,0.95); z-index: 100000; overflow-y: auto;
}
.admin-modal.active { display: block; }
.admin-container {
    max-width: 1200px; margin: 50px auto;
    background: var(--hud-solid); border: 1px solid var(--hud-border);
    border-radius: 2px; padding: 30px;
}
.admin-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--hud-border); padding-bottom: 15px;
}
.admin-header h2 { font-size: 1.6em; color: var(--text-primary); font-family: var(--font-pixel); }
.admin-close {
    background: #4a1a1a; color: #e06060;
    border: 1px solid #5a2a2a; padding: 10px 20px;
    border-radius: 2px; cursor: pointer; font-size: 14px;
    font-family: var(--font-pixel);
}
.admin-close:hover { background: #5a2222; }
.admin-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.admin-tab {
    padding: 8px 20px; border: 1px solid var(--hud-border);
    border-radius: 2px; background: var(--hud-frame);
    cursor: pointer; font-size: 13px; font-family: var(--font-pixel);
    color: var(--text-secondary);
}
.admin-tab.active { background: var(--green-dim); color: #fff; border-color: var(--green); }
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.admin-image-card {
    border: 1px solid var(--hud-border);
    border-radius: 2px; padding: 10px;
    background: var(--hud-frame-dark);
}
.admin-image-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 2px; }
.admin-image-info { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.admin-delete-btn {
    width: 100%; margin-top: 10px;
    background: #4a1a1a; color: #e06060;
    border: 1px solid #5a2a2a; padding: 10px;
    border-radius: 2px; cursor: pointer; font-weight: bold;
    font-family: var(--font-pixel);
}
.admin-delete-btn:hover { background: #5a2222; }

/* ═══════════════════════════════════════════════════════════
   AUDIO COMPACT BAR
   ═══════════════════════════════════════════════════════════ */
.audio-compact-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; cursor: pointer;
    background: var(--hud-inner);
    border-bottom: 1px solid rgba(26,74,90,0.15);
    min-height: 40px;
}
.audio-compact-title {
    font-family: var(--font-pixel);
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
}
.audio-compact-toggle { font-size: 14px; color: var(--text-muted); transition: transform 0.3s; }
.audio-compact-toggle.expanded { transform: rotate(180deg); }
.audio-expandable {
    display: flex; flex-direction: column;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
}
.audio-expandable.expanded { max-height: 500px; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════
   POSTS/KARDS LIBRARY PANELS
   ═══════════════════════════════════════════════════════════ */
.posts-library {
    width: 100%; height: auto;
    background: transparent; border: none;
    border-radius: 2px;
    display: flex; flex-direction: column;
    margin-bottom: 4px; overflow: hidden;
}
.posts-compact-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; cursor: pointer;
    background: var(--hud-inner);
    border-bottom: 1px solid rgba(26,74,90,0.1);
    min-height: 40px;
}
.posts-compact-title {
    font-family: var(--font-pixel);
    font-size: 12px; color: var(--text-primary);
    text-transform: uppercase; letter-spacing: 2px;
}
.posts-compact-toggle { font-size: 14px; color: var(--text-muted); transition: transform 0.3s; }
.posts-compact-toggle.expanded { transform: rotate(180deg); }
.posts-expandable {
    display: flex; flex-direction: column;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
}
.posts-expandable.expanded { max-height: 500px; overflow-y: auto; }
.posts-expandable::-webkit-scrollbar { width: 4px; }
.posts-expandable::-webkit-scrollbar-track { background: var(--hud-frame-dark); }
.posts-expandable::-webkit-scrollbar-thumb { background: var(--hud-border); border-radius: 2px; }
.posts-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
.posts-thumb {
    width: 96px; height: 96px;
    border-radius: 2px; object-fit: cover;
    cursor: pointer;
    border: 1px solid rgba(26,74,90,0.25);
    transition: transform 0.15s, box-shadow 0.15s;
}
.posts-thumb:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 8px var(--gold-glow);
    z-index: 2; position: relative;
}
.posts-count {
    font-size: 9px; color: var(--text-muted);
    padding: 4px 8px 6px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   CARD CREATOR
   ═══════════════════════════════════════════════════════════ */
.card-overlay {
    display: none; position: fixed; inset: 0; z-index: 8000;
    background: rgba(6,13,20,0.88);
    flex-direction: column; align-items: center; justify-content: center;
    padding: 12px; overflow-y: auto;
}
.card-overlay.active { display: flex; }

.play-card-btn {
    width: 100%; font-size: 13px; padding: 8px;
    cursor: pointer;
    background: var(--hud-frame);
    color: var(--gold);
    border: 1px solid rgba(212,165,32,0.2);
    border-radius: 2px; margin-top: 10px;
    transition: all 0.2s;
}
.play-card-btn:hover { background: var(--hud-frame-light); border-color: rgba(212,165,32,0.35); }
.play-card-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.card-creator {
    background: var(--hud-solid);
    border: 1px solid var(--hud-border);
    border-radius: 2px; padding: 16px;
    max-width: 420px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(26,74,90,0.1), 0 8px 32px rgba(0,0,0,0.5);
}
.card-creator h3 {
    margin: 0 0 12px 0;
    font-family: var(--font-pixel);
    font-size: 14px; text-align: center;
    color: var(--gold);
    letter-spacing: 1px;
}
.card-creator label {
    display: block;
    font-family: var(--font-pixel);
    font-size: 11px; margin: 8px 0 4px 0;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.card-creator input[type="text"] {
    width: 100%; padding: 6px 8px;
    border: 1px solid var(--hud-border);
    border-radius: 2px;
    background: rgba(0,0,0,0.3);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px; box-sizing: border-box;
}
.card-creator input[type="text"]:focus {
    border-color: var(--gold-dim);
    outline: none;
}

.card-color-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.card-color-swatch {
    width: 26px; height: 26px;
    border-radius: 2px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}
.card-color-swatch:hover { transform: scale(1.15); }
.card-color-swatch.selected-1 {
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}
.card-color-swatch.selected-2 {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}
.card-color-swatch.selected-3 {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}

.palette-section { margin: 8px 0 4px; }
.palette-label {
    font-family: var(--font-pixel);
    font-size: 10px; color: var(--text-muted);
    letter-spacing: 0.1em; margin-bottom: 4px;
}
.palette-slots { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.palette-slot {
    width: 32px; height: 32px;
    border-radius: 2px;
    border: 2px solid var(--hud-border);
    background: var(--hud-inner);
    cursor: pointer; transition: border-color 0.2s;
    position: relative;
}
.palette-slot.active-slot {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,165,32,0.2);
}
.palette-slot-label {
    position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    font-size: 8px; font-family: var(--font-pixel);
    color: var(--text-muted);
    white-space: nowrap; letter-spacing: 0.05em;
}
.palette-slot-arrow { font-size: 14px; color: var(--text-muted); }
.palette-preview-strip {
    height: 8px; border-radius: 2px; margin: 14px 0 4px;
    background: linear-gradient(90deg, #888, #ccc);
    transition: background 0.3s ease;
}

.card-preview-wrap { display: flex; justify-content: center; margin: 12px 0; }
.card-preview-canvas {
    display: block; margin: 8px auto 0;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    max-width: 100%;
}

.card-actions { display: flex; gap: 8px; margin-top: 12px; }
.card-actions button {
    flex: 1; padding: 8px; border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-pixel);
    font-size: 12px; cursor: pointer;
}
.card-btn-generate { background: var(--hud-frame); color: var(--text-primary); border: 1px solid var(--hud-border); }
.card-btn-generate:hover { background: var(--hud-frame-light); }
.card-btn-generate:disabled { background: var(--hud-frame-dark); color: var(--text-muted); cursor: not-allowed; }
.card-btn-save { background: var(--gold-dim); color: #fff; border: 1px solid var(--gold); }
.card-btn-cancel { background: transparent; color: var(--text-muted); border: 1px solid rgba(26,74,90,0.2); }

.card-status {
    font-family: var(--font-system);
    font-size: 13px; color: var(--text-muted);
    text-align: center; margin-top: 8px; min-height: 16px;
}
.card-lore-preview {
    font-size: 12px; color: var(--text-secondary);
    background: rgba(0,0,0,0.2);
    padding: 8px; border-radius: var(--radius-sm);
    margin-top: 8px; min-height: 40px; line-height: 1.4;
}

/* Card Gallery */
.card-gallery-overlay {
    display: none; position: fixed; inset: 0; z-index: 7500;
    background: rgba(6,13,20,0.92);
    flex-direction: column; overflow-y: auto; padding: 16px;
}
.card-gallery-overlay.active { display: flex; }
.card-gallery-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0 16px 0;
}
.card-gallery-header h3 { margin: 0; color: var(--text-primary); font-family: var(--font-pixel); }
.card-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px; padding-bottom: 20px;
}
.card-gallery-item { cursor: pointer; transition: transform 0.15s; }
.card-gallery-item:hover { transform: scale(1.03); }
.card-gallery-item img {
    width: 100%; border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════
   GAME OVERLAY — shared base for fullscreen overlays
   ═══════════════════════════════════════════════════════════ */
.game-overlay {
    display: none; position: fixed; inset: 0;
    flex-direction: column; align-items: center;
    padding: 20px; box-sizing: border-box;
}
.game-overlay.active { display: flex; }
.game-overlay.overlay-center { justify-content: center; }
.game-overlay.overlay-top { justify-content: flex-start; padding-top: 40px; overflow-y: auto; }
.game-overlay.z-play { background: rgba(6,13,20,0.85); z-index: 7400; }
.game-overlay.z-lobby { background: rgba(6,13,20,0.88); z-index: 7450; }
.game-overlay.z-picker { background: rgba(6,13,20,0.92); z-index: 7500; }
.game-overlay.z-coin { background: rgba(6,13,20,0.75); z-index: 50; }
.game-overlay.z-result { background: rgba(6,13,20,0.8); z-index: 50; }
.game-overlay.z-claim { background: rgba(6,13,20,0.88); z-index: 55; overflow-y: auto; }

.overlay-title {
    font-family: var(--font-pixel);
    font-size: 15px; color: var(--gold);
    text-shadow: 0 0 14px rgba(212,165,32,0.2);
    letter-spacing: 0.1em; margin-bottom: 16px;
}
.overlay-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; }

.overlay-btn { cursor: pointer; border-radius: 2px; transition: all 0.2s; }
.overlay-btn-cancel {
    font-family: var(--font-pixel);
    font-size: 10px; padding: 6px 14px;
    cursor: pointer;
    background: none;
    color: var(--text-muted);
    border: 1px solid rgba(26,74,90,0.2);
    border-radius: 2px; margin-top: 16px;
}
.overlay-btn-cancel:hover { color: var(--text-secondary); border-color: var(--hud-border); }

/* ═══════════════════════════════════════════════════════════
   MAIN TABS
   ═══════════════════════════════════════════════════════════ */
.main-tab-bar { display: flex; gap: 0; margin-bottom: 0; }
.main-tab {
    flex: 1; padding: 8px 12px;
    background: var(--hud-frame-dark);
    border: none;
    border-bottom: 2px solid rgba(26,74,90,0.1);
    color: var(--text-muted);
    font-family: var(--font-pixel);
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; transition: all 0.2s; min-height: 36px;
}
.main-tab:first-child { border-radius: 2px 0 0 0; }
.main-tab:last-child { border-radius: 0 2px 0 0; }
.main-tab.active {
    background: var(--hud-frame);
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.main-tab:hover:not(.active) {
    background: var(--hud-frame);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   PVP GAME STYLES
   ═══════════════════════════════════════════════════════════ */
.game-fullscreen {
    position: fixed !important; inset: 0 !important;
    z-index: 9000 !important;
    width: 100vw !important; height: 100vh !important;
    max-height: none !important;
    background-color: var(--ocean-deep) !important;
    background-size: cover; background-position: center;
    border: none !important; border-radius: 0 !important;
    border-image: none !important; box-shadow: none !important;
}

.board-cell {
    position: relative; overflow: hidden;
    border-radius: 2px; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    background: rgba(12, 34, 48, 0.5);
    border: 1px solid rgba(26, 74, 90, 0.2);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.board-cell::before { content: ''; display: block; padding-top: 100%; }
.board-cell:hover {
    transform: scale(1.02);
    background: rgba(12, 34, 48, 0.7);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 8px var(--hud-border-glow);
}
.board-cell.occupied { cursor: default; }
.board-cell.occupied:hover { transform: none; }
.board-cell img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 2px;
}
.board-cell .cell-border {
    position: absolute; inset: 0;
    border-radius: 2px; pointer-events: none;
    transition: border-color 0.4s ease;
}
.board-cell .cell-border.red {
    border: 3px solid rgba(212,165,32,0.5);
    box-shadow: 0 0 6px var(--gold-glow);
}
.board-cell .cell-border.blue {
    border: 3px solid rgba(64,216,208,0.4);
    box-shadow: 0 0 6px var(--cyan-dim);
}

/* Game layout */
.game-top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--hud-frame), var(--hud-frame-dark));
    border-bottom: 1px solid rgba(26,74,90,0.2);
    backdrop-filter: blur(6px);
}
.game-layout { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden; }
.game-board-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 8px; min-height: 0; max-width: 60%;
    background: rgba(8,20,32,0.1);
}
.game-board-wrapper {
    background: var(--hud-bg);
    border: 2px solid var(--hud-border);
    border-radius: 2px; padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(26,74,90,0.15), 0 6px 24px rgba(0,0,0,0.5), 0 0 20px var(--hud-border-glow);
    width: 100%; max-width: min(85vh, 100%); aspect-ratio: 1;
}
.game-board-wrapper #boardGrid { width: 100%; height: 100%; gap: 6px; }
.game-hand-panel {
    flex-shrink: 0; width: 40%;
    display: flex; flex-direction: column;
    align-items: center; padding: 6px 16px; overflow: hidden;
    background: linear-gradient(90deg, var(--hud-frame-dark), var(--hud-solid));
    backdrop-filter: blur(6px);
    border-left: 1px solid rgba(26,74,90,0.15);
}
.player-hand-container {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: flex-start; align-content: flex-start;
    justify-content: center; flex: 1; min-height: 0;
}

.hand-card {
    width: 86px; height: 86px;
    border-radius: 2px; cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid rgba(26,74,90,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    box-sizing: border-box;
}
.board-cell.valid-target {
    background: rgba(48,200,112,0.08);
    border-color: rgba(48,200,112,0.3);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 6px var(--green-glow);
    cursor: pointer;
}
.hand-card:hover { transform: translateX(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
.hand-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold-glow);
    transform: translateX(-8px);
}
.hand-card.played { opacity: 0.25; pointer-events: none; filter: grayscale(1); }

/* Card detail modal */
.card-detail-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(6,13,20,0.88);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}
.card-detail-content { display: flex; flex-direction: column; align-items: center; max-width: 340px; width: 100%; }
.card-detail-img {
    width: 100%; max-width: 280px;
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: cardReveal 0.3s ease;
}
.card-detail-info { margin-top: 14px; text-align: center; color: var(--text-primary); }
.card-detail-name { font-family: var(--font-serif); font-size: 18px; font-weight: bold; margin-bottom: 4px; }
.card-detail-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.card-detail-week { margin-top: 4px; color: var(--text-muted); }
.creator-link { cursor: pointer; text-decoration: underline; color: var(--gold-dim); }
.card-detail-stats {
    display: flex; gap: 12px; justify-content: center;
    font-size: 13px; color: var(--text-primary);
}
.card-detail-stats span { display: flex; flex-direction: column; align-items: center; }
.card-detail-stats .stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; }
.card-detail-stats .stat-val { font-size: 16px; font-weight: bold; }
.card-detail-nav { display:flex;gap:16px;margin-top:14px;align-items:center; }
.card-detail-nav-btn {
    font-size:20px;width:40px;height:40px;cursor:pointer;
    background:var(--hud-frame);color:var(--text-primary);
    border:1px solid var(--hud-border);border-radius:2px;
}
.card-detail-nav-btn:disabled { opacity:0.3;cursor:default; }
.card-detail-counter { font-size:11px;color:var(--text-muted); }

/* Rarity borders — muted nautical biome palette */
.rarity-common { border: 2px solid rgba(64,80,74,0.4); }
.rarity-uncommon { border: 2px solid rgba(68,82,58,0.45); }
.rarity-rare { border: 2px solid rgba(144,124,86,0.5); }
.rarity-epic { border: 2px solid rgba(154,108,80,0.55); }
.rarity-legendary { border: 2px solid rgba(146,166,184,0.6); box-shadow: 0 0 8px rgba(146,166,184,0.15); }
.rarity-mythic { border: 2px solid rgba(120,80,160,0.6); box-shadow: 0 0 8px rgba(120,80,160,0.2); }
.rarity-coast-verd { border: 2px solid; border-image: linear-gradient(135deg, rgba(64,80,74,0.5), rgba(68,82,58,0.5)) 1; }
.rarity-verd-high { border: 2px solid; border-image: linear-gradient(135deg, rgba(68,82,58,0.5), rgba(144,124,86,0.5)) 1; }
.rarity-high-volc { border: 2px solid; border-image: linear-gradient(135deg, rgba(144,124,86,0.5), rgba(154,108,80,0.5)) 1; }
.rarity-volc-frozen { border: 2px solid; border-image: linear-gradient(135deg, rgba(154,108,80,0.5), rgba(146,166,184,0.5)) 1; }
.rarity-starter { border: 2px solid rgba(90,100,110,0.4); }

/* Starter Deck Reveal */
.starter-reveal-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(6,13,20,0.95);
    display: none; flex-direction: column;
    align-items: center; justify-content: center; padding: 20px;
    font-family: var(--font-serif);
}
.starter-reveal-overlay.active { display: flex; }
.starter-reveal-title {
    font-family: var(--font-pixel);
    font-size: 16px; color: var(--gold);
    margin-bottom: 6px; letter-spacing: 2px; text-transform: uppercase;
}
.starter-reveal-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; text-align: center; }
.starter-reveal-counter { font-family: var(--font-pixel); font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.starter-reveal-card-area { width: 240px; height: 240px; position: relative; margin-bottom: 16px; }
.starter-reveal-card-area canvas { width: 100%; height: 100%; border-radius: 2px; image-rendering: auto; }
.starter-reveal-name { font-size: 18px; color: var(--text-primary); margin-bottom: 4px; text-align: center; }
.starter-reveal-stats { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; text-align: center; }
.starter-reveal-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.starter-reveal-actions button {
    font-family: var(--font-pixel);
    font-size: 12px; padding: 8px 20px;
    border-radius: 2px; cursor: pointer;
    border: 1px solid; transition: opacity 0.2s;
}
.starter-reveal-actions button:disabled { opacity: 0.35; cursor: default; }
.sr-reroll-btn { background: rgba(80,60,120,0.4); color: #fff; border-color: rgba(180,140,255,0.25); }
.sr-keep-btn { background: rgba(48,200,112,0.15); color: var(--green); border-color: rgba(48,200,112,0.3); }
.starter-reveal-rerolls { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.starter-reveal-skip {
    font-size: 12px; color: var(--text-muted); cursor: pointer;
    border: none; background: none; font-family: var(--font-serif);
    margin-top: 8px; text-decoration: underline;
}
.starter-reveal-skip:hover { color: var(--gold-dim); }
.starter-reveal-done { text-align: center; }
.starter-reveal-done h2 { font-family: var(--font-pixel); color: var(--gold); font-size: 18px; margin-bottom: 8px; }
.starter-reveal-done p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }
.sr-done-btn {
    font-family: var(--font-pixel);
    font-size: 13px; padding: 10px 28px;
    background: rgba(48,200,112,0.15); color: var(--green);
    border: 1px solid rgba(48,200,112,0.3);
    border-radius: 2px; cursor: pointer;
}
@keyframes sr-card-enter {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.starter-reveal-card-area.sr-entering { animation: sr-card-enter 0.35s ease-out; }

.kard-official { outline: 2px solid rgba(212,165,32,0.25); outline-offset: 1px; }

/* Sort bar */
.book-sort-bar { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid rgba(26,74,90,0.08); flex-wrap: wrap; }
.book-sort-btn {
    font-family: var(--font-system); font-size: 12px;
    padding: 2px 8px; border: 1px solid rgba(26,74,90,0.15);
    border-radius: 2px; background: transparent;
    cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.book-sort-btn.active { background: rgba(212,165,32,0.06); color: var(--gold); border-color: var(--gold-dim); }

/* Filter bar */
.book-filter-bar { display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 2px; border-bottom: 1px solid rgba(26,74,90,0.06); }
.book-filter-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.book-filter-label { font-family: var(--font-pixel); font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; min-width: 42px; }
.book-filter-btn {
    font-family: var(--font-system); font-size: 12px;
    padding: 2px 7px; border: 1px solid rgba(26,74,90,0.12);
    border-radius: 2px; background: transparent;
    cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.book-filter-btn.active { background: rgba(212,165,32,0.06); color: var(--gold); border-color: var(--gold-dim); }
.book-filter-btn:hover { border-color: var(--hud-border); }
.book-creator-input {
    font-family: var(--font-mono); font-size: 11px;
    padding: 2px 6px; border: 1px solid rgba(26,74,90,0.15);
    border-radius: 2px; background: rgba(0,0,0,0.2);
    color: var(--text-primary); width: 90px; outline: none;
}
.book-creator-input::placeholder { color: var(--text-muted); }
.book-creator-input:focus { border-color: var(--gold-dim); }
.book-filter-count { font-size: 9px; color: var(--text-muted); margin-left: auto; padding-right: 2px; }

/* Level filter pills */
.book-level-pills { display: flex; gap: 2px; flex-wrap: wrap; }
.book-level-pill {
    font-family: var(--font-system); font-size: 11px;
    width: 18px; height: 18px; display: flex;
    align-items: center; justify-content: center;
    border: 1px solid rgba(26,74,90,0.1); border-radius: 2px;
    background: transparent; cursor: pointer; color: var(--text-muted);
    transition: all 0.15s;
}
.book-level-pill.active { background: rgba(212,165,32,0.08); color: var(--gold); border-color: var(--gold-dim); font-weight: bold; }
.book-level-pill:hover { border-color: var(--hud-border); }
.book-filter-clear { font-size: 9px; padding: 1px 6px; border: none; background: none; cursor: pointer; color: #c66; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD PANEL
   ═══════════════════════════════════════════════════════════ */
.leaderboard-panel {
    width: 100%; background: transparent; border: none;
    border-radius: 2px; display: flex; flex-direction: column; overflow: hidden;
}
.lb-compact-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; cursor: pointer;
    background: var(--hud-inner);
    border-bottom: 1px solid rgba(26,74,90,0.15);
    min-height: 40px;
}
.lb-compact-title {
    font-family: var(--font-pixel); font-size: 12px;
    color: var(--gold); text-transform: uppercase; letter-spacing: 2px;
}
.lb-compact-toggle { font-size: 14px; color: var(--text-muted); transition: transform 0.3s; }
.lb-compact-toggle.expanded { transform: rotate(180deg); }
.lb-expandable { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.lb-expandable.expanded { max-height: 600px; overflow-y: auto; }
.lb-expandable.no-collapse { max-height: none; }
.lb-expandable::-webkit-scrollbar { width: 4px; }
.lb-expandable::-webkit-scrollbar-track { background: var(--hud-frame-dark); }
.lb-expandable::-webkit-scrollbar-thumb { background: var(--hud-border); border-radius: 2px; }
.lb-list { padding: 0; }
.lb-entry {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(26,74,90,0.06);
    transition: background 0.15s;
}
.lb-entry:hover { background: rgba(26,74,90,0.06); }
.lb-rank { font-family: var(--font-system); font-size: 15px; font-weight: bold; color: var(--cyan-dim); min-width: 22px; text-align: right; }
.lb-rank.gold { color: var(--gold); }
.lb-rank.silver { color: #8a8a8a; }
.lb-rank.bronze { color: var(--copper); }
.lb-avatar { width: 32px; height: 32px; border-radius: 2px; object-fit: cover; border: 1px solid var(--hud-border); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 13px; font-weight: bold; color: var(--parch-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meta { font-size: 10px; color: var(--text-muted); }
.lb-streak { font-size: 16px; font-weight: bold; color: var(--gold); min-width: 36px; text-align: center; }
.lb-streak-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
.lb-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   ANON_ID LOGIN / AUTH
   ═══════════════════════════════════════════════════════════ */
.sign-in-row { width: 100%; max-width: min(900px, 100%); display: flex; justify-content: flex-end; padding: 4px 0; }
.anon-id-btn {
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: 2px; padding: 4px 12px;
    color: var(--gold); font-family: var(--font-pixel);
    font-size: 11px; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s, border-color 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.anon-id-btn:hover { background: var(--hud-frame); border-color: var(--gold-dim); }
.anon-id-btn .anon-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.anon-id-btn.logged-in .anon-dot { background: var(--green); }

.anon-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(6,13,20,0.7); z-index: 8000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
}
.anon-modal-overlay.active { display: flex; }
.anon-modal {
    background: var(--hud-solid);
    border: 1px solid var(--hud-border);
    border-radius: 2px; padding: 24px;
    width: 300px; max-width: 90vw;
    color: var(--text-primary);
}
.anon-modal h3 { margin: 0 0 16px 0; font-family: var(--font-pixel); font-size: 14px; color: var(--gold); text-align: center; letter-spacing: 1px; }
.anon-modal input {
    width: 100%; padding: 6px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--hud-border);
    border-radius: 2px; color: var(--text-primary);
    font-family: var(--font-mono); font-size: 13px;
    outline: none; box-sizing: border-box;
}
.anon-modal input:focus { border-color: var(--gold-dim); }
.anon-modal-hint { font-size: 11px; color: var(--text-muted); margin: 6px 0 16px 0; }
.anon-modal-error { font-size: 12px; color: #e06060; margin: 6px 0 0 0; min-height: 16px; }
.anon-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.anon-modal-actions button {
    flex: 1; padding: 6px;
    border-radius: 2px; border: 1px solid var(--hud-border);
    font-family: var(--font-pixel); font-size: 11px; cursor: pointer;
}
.anon-modal-actions .anon-cancel { background: transparent; color: var(--text-muted); }
.anon-modal-actions .anon-submit { background: rgba(212,165,32,0.08); color: var(--gold); border-color: var(--gold-dim); }
.anon-modal-actions .anon-submit:hover { background: rgba(212,165,32,0.15); }

.anon-profile { text-align: center; }
.anon-profile-name { font-family: var(--font-pixel); font-size: 15px; color: var(--gold); margin-bottom: 4px; }
.anon-profile-stats { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; }
.anon-logout {
    background: transparent; border: 1px solid rgba(200,80,80,0.25);
    color: #c87070; padding: 5px 14px; border-radius: 2px;
    font-family: var(--font-pixel); font-size: 11px; cursor: pointer;
}
.anon-logout:hover { background: rgba(200,80,80,0.08); }

/* ═══════════════════════════════════════════════════════════
   ARENA LAYER — main home screen
   ═══════════════════════════════════════════════════════════ */
.arena-layer {
    position: fixed; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    padding: 0.2rem 0.8rem;
    padding-bottom: max(3rem, calc(3rem + env(safe-area-inset-bottom)));
    opacity: 1; overflow: hidden;
    pointer-events: auto;
    justify-content: center;
    gap: 6px;
}

/* Top bar — HUD taskbar */
.v7-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.3rem; flex-shrink: 0;
    width: 100%; max-width: 520px;
}
.v7-topbar-left { display: flex; align-items: baseline; gap: 0.7rem; }
.v7-topbar-title {
    font-family: var(--font-pixel);
    font-size: 1.4rem; letter-spacing: 0.2em;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(212,165,32,0.2);
}
.v7-topbar-streak { font-family: var(--font-system); font-size: 0.9rem; color: var(--gold-dim); }
.v7-topbar-right { display: flex; align-items: center; gap: 0.5rem; }

/* Hero Carousel */
.hero-carousel {
    width: 100%; max-width: 520px;
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 0; flex-shrink: 1;
    position: relative; min-height: 0;
}
.hero-arrow {
    background: none; border: none; color: var(--text-muted);
    font-size: 20px; cursor: pointer; padding: 0 4px; z-index: 5;
    transition: color 0.2s; flex-shrink: 0;
    font-family: var(--font-system);
}
.hero-arrow:hover { color: var(--gold); }
.hero-track {
    display: flex; align-items: center; gap: 5px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 4px 8px; flex: 1; min-width: 0;
    scroll-behavior: smooth;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-card {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 2px; overflow: hidden;
    border: 1px solid rgba(26,74,90,0.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; position: relative;
    background: var(--hud-frame-dark);
    scroll-snap-align: center;
    opacity: 0.4; filter: brightness(0.55) saturate(0.6);
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card.active {
    width: 84px; height: 84px;
    z-index: 3; opacity: 1;
    filter: brightness(1) saturate(1);
    border-color: var(--gold-dim);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 16px var(--gold-glow);
}
.hero-card:hover:not(.active) { opacity: 0.7; filter: brightness(0.8) saturate(0.8); }
.hero-card .hero-card-name {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 2px 4px; font-size: 7px;
    color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.8));
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.hero-card.active .hero-card-name { font-size: 8px; padding: 4px 6px; }
.hero-label {
    text-align: center;
    font-family: var(--font-pixel); font-size: 9px;
    color: var(--text-muted); letter-spacing: 0.15em;
}

/* CTA buttons */
.cta-row {
    display: flex; gap: 8px; justify-content: center;
    padding: 0; width: 60%; max-width: 300px; flex-shrink: 0;
}
.cta-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 8px 8px;
    border-radius: 2px; cursor: pointer;
    font-family: var(--font-pixel);
    transition: all 0.2s ease;
    border: 1px solid var(--hud-border);
    text-decoration: none;
    background: var(--hud-bg);
    color: var(--gold);
    backdrop-filter: blur(6px);
}
.cta-btn:active { transform: scale(0.96); }
.cta-btn .cta-icon { font-size: 18px; margin-bottom: 2px; }
.cta-btn .cta-label { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.1em; color: var(--gold); }
.cta-btn .cta-sub { font-family: var(--font-system); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; margin-top: 2px; text-transform: uppercase; }
.cta-btn.cta-play {
    background: var(--hud-bg);
    border-color: var(--hud-border);
}
.cta-btn.cta-play:hover { border-color: var(--gold-dim); box-shadow: 0 0 16px var(--gold-glow); }
.cta-btn.cta-create {
    background: var(--hud-bg);
    border-color: rgba(26,74,90,0.3);
}
.cta-btn.cta-create:hover { border-color: var(--gold-dim); box-shadow: 0 0 12px var(--gold-glow); }

/* Log section */
.log-section.collapsed .log-feed { max-height: 65px; overflow: hidden; position: relative; }
.log-section.collapsed .log-feed::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
    background: linear-gradient(transparent, var(--hud-solid));
    pointer-events: none;
}
.challenge-bar { display: none; }

.grid-recap-overlay { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; padding: 4px 8px; pointer-events: none; }
.recap-label { font-family: var(--font-system); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; }
.arena-layer.game-active .grid-recap-overlay { display: none !important; }

/* Top 3 strip */
.top3-strip {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 60%; max-width: 300px;
    padding: 4px 10px;
    font-family: var(--font-system); font-size: 12px;
    color: var(--text-muted);
    background: var(--hud-bg);
    border: 1px solid rgba(26,74,90,0.1);
    border-radius: 2px; flex-shrink: 0;
    letter-spacing: 0.08em;
    backdrop-filter: blur(4px);
}
.top3-label { font-size: 10px; flex-shrink: 0; }
.top3-entries { color: var(--text-secondary); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top3-entries .top3-name { color: var(--gold); }
.top3-entries .top3-fire { font-size: 9px; opacity: 0.7; }
.arena-layer.game-active .top3-strip { display: none !important; }

/* Arena row — Grid */
.arena-row { display: flex; justify-content: center; flex-shrink: 1; padding: 0; width: 100%; max-width: 520px; }
.grid-panel { width: 60%; max-width: 300px; flex-shrink: 1; padding: 0.3rem; position: relative; }
.grid-panel .panel-header { text-align: center; font-size: 11px; }
.kardic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0.2rem; }
.grid-cell {
    aspect-ratio: 1;
    background: rgba(12, 34, 48, 0.5);
    border: 1px solid rgba(26, 74, 90, 0.15);
    border-radius: 2px;
    position: relative; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    font-family: var(--font-system); font-size: 10px;
    color: rgba(64, 216, 160, 0.06);
}
.grid-cell:hover { border-color: rgba(26,74,90,0.4); background: rgba(12,34,48,0.7); }
.grid-cell.has-card { background: rgba(12,34,48,0.3); border-color: rgba(26,74,90,0.1); }

/* Claim, Hand Picker cards */
.claim-card {
    width: 64px; height: 64px; border-radius: 2px; cursor: pointer;
    border: 2px solid rgba(26,74,90,0.2); position: relative;
    overflow: hidden; transition: all 0.2s; flex-shrink: 0;
}
.claim-card img { width: 100%; height: 100%; object-fit: cover; }
.claim-card:hover { border-color: var(--gold-dim); transform: scale(1.08); }
.claim-card.selected { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); transform: scale(1.08); }
.claim-card .claim-card-name {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 3px;
    font-size: 8px; color: #fff; background: rgba(0,0,0,0.65);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hpick-card {
    width: 72px; height: 72px; border-radius: 2px; cursor: pointer;
    border: 2px solid rgba(26,74,90,0.2); position: relative;
    overflow: hidden; transition: all 0.2s; flex-shrink: 0;
}
.hpick-card img { width: 100%; height: 100%; object-fit: cover; }
.hpick-card:hover { border-color: var(--gold-dim); transform: scale(1.05); }
.hpick-card.picked { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); transform: scale(1.06); }
.hpick-card.picked::after {
    content: '✓'; position: absolute; top: 2px; right: 4px; font-size: 14px;
    color: var(--gold); font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.hpick-card .hpick-name {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 3px;
    font-size: 8px; color: #fff; background: rgba(0,0,0,0.65);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hpick-card .hpick-level {
    position: absolute; top: 2px; left: 4px; font-size: 9px;
    color: var(--gold-dim); text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.grid-cell .cell-art { font-size: 1.1rem; opacity: 0.7; }
.grid-cell .cell-empty { font-size: 0.35rem; color: rgba(64,216,160,0.06); }
.recap-stats { position: absolute; inset: 0; pointer-events: none; }
.recap-stat { position: absolute; font-size: 10px; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,1); font-weight: bold; font-family: var(--font-serif); }
.recap-stat-t { top: 2px; left: 50%; transform: translateX(-50%); }
.recap-stat-b { bottom: 2px; left: 50%; transform: translateX(-50%); }
.recap-stat-l { left: 2px; top: 50%; transform: translateY(-50%); }
.recap-stat-r { right: 2px; top: 50%; transform: translateY(-50%); }
.recap-tint { position: absolute; inset: 0; border-radius: 2px; pointer-events: none; }
.recap-tint.red { background: rgba(212,165,32,0.03); border: 2px solid rgba(212,165,32,0.35); }
.recap-tint.blue { background: rgba(64,216,208,0.02); border: 2px solid rgba(64,216,208,0.25); }

/* Grid leaderboard overlay */
.grid-lb-overlay {
    position: absolute; top: 2.5rem; left: 0; right: 0; bottom: 0;
    z-index: 5; display: flex; flex-direction: column;
    border-radius: 0 0 2px 2px; pointer-events: none;
}
.grid-lb-overlay .lb-list { flex: 1; overflow-y: auto; padding: 0.2rem 0.15rem; pointer-events: auto; }
.grid-lb-overlay .lb-row { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.arena-layer.game-active .grid-lb-overlay { display: none; }
.grid-lb-overlay .lb-row {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.3rem; font-size: 1.2rem;
    border-bottom: 1px solid rgba(26,74,90,0.05);
    transition: background 0.2s ease;
}
.grid-lb-overlay .lb-row:last-child { border-bottom: none; }
.grid-lb-overlay .lb-row:hover { background: rgba(26,74,90,0.08); }
.grid-lb-overlay .lb-rank { width: 14px; text-align: center; font-family: var(--font-pixel); font-size: 1.1rem; color: var(--text-faint); }
.grid-lb-overlay .lb-gold .lb-rank { color: var(--gold); }
.grid-lb-overlay .lb-silver .lb-rank { color: #a0a0a0; }
.grid-lb-overlay .lb-bronze .lb-rank { color: var(--copper); }
.grid-lb-overlay .lb-name { flex: 1; color: var(--parch); font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-lb-overlay .lb-gold .lb-name { color: var(--gold-bright); }
.grid-lb-overlay .lb-you .lb-name { color: var(--cyan); font-style: italic; }
.grid-lb-overlay .lb-stat { font-size: 1rem; color: var(--text-dim); font-style: italic; white-space: nowrap; }
.grid-lb-overlay .lb-cards { font-family: var(--font-pixel); font-size: 0.95rem; color: var(--text-faint); min-width: 18px; text-align: right; }
.grid-lb-overlay .lb-cards::after { content: ' ♠'; font-size: 0.45rem; opacity: 0.5; }

/* Challenge bar */
.challenge-bar {
    display: flex; gap: 0.5rem; align-items: stretch; justify-content: center;
    flex-shrink: 0; padding: 0.3rem 0; max-width: 520px; width: 100%;
}
.mode-buttons { display: flex; gap: 0.3rem; flex-shrink: 0; }
.mode-btn {
    font-family: var(--font-pixel); font-size: 1.1rem; letter-spacing: 0.08em;
    padding: 0.4em 0.9em;
    border: 1px solid rgba(26,74,90,0.15);
    background: var(--hud-bg); color: var(--text-dim);
    cursor: pointer; transition: all 0.3s ease; border-radius: 2px;
}
.mode-btn:hover { border-color: var(--gold-dim); color: var(--parch); }
.mode-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(212,165,32,0.04); }
.challenge-list { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; overflow: hidden; }
.ch-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.25rem 0.5rem;
    background: var(--hud-bg); border: 1px solid rgba(26,74,90,0.06);
    border-radius: 2px; cursor: pointer; transition: all 0.3s ease; font-size: 0.78rem;
}
.ch-row:hover { border-color: rgba(26,74,90,0.15); background: var(--hud-frame-dark); }
.ch-name { color: var(--parch-light); }
.ch-record { color: var(--text-dim); font-style: italic; margin-left: 0.3rem; font-size: 1.15rem; }
.ch-type {
    font-family: var(--font-pixel); font-size: 1rem; letter-spacing: 0.06em;
    color: var(--copper); padding: 0.15em 0.5em;
    border: 1px solid rgba(176,112,72,0.15); border-radius: 2px;
}

/* Log section */
.log-section { width: 60%; max-width: 300px; padding: 0; flex-shrink: 1; min-height: 0; box-sizing: border-box; }
.log-panel {
    padding: 0.3rem; display: flex; flex-direction: column;
    min-height: 0; max-height: 100px;
}
.log-panel .panel-header { font-size: 11px; }

/* Hand drawer */
.hand-drawer {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    z-index: 40; display: none;
    flex-direction: column; align-items: center;
    padding: 8px 12px 12px;
    background: linear-gradient(180deg, var(--hud-frame), var(--hud-frame-dark));
    border-top: 1px solid var(--hud-border);
    border-radius: 4px 4px 0 0;
    backdrop-filter: blur(8px);
    width: min(540px, 98vw);
    max-height: 40vh; overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.hand-drawer.open { display: flex; }

/* Opponent hand row */
.opponent-hand-row {
    display: none; justify-content: center;
    gap: 4px; padding: 4px 0 2px;
    width: 100%; max-width: 520px; margin: 0 auto;
}
.arena-layer.game-active .opponent-hand-row { display: flex; }
.opp-hand-count {
    font-family: var(--font-pixel); font-size: 10px;
    color: var(--text-muted); align-self: center; margin-left: 6px;
}
.opp-card-back {
    width: 40px; height: 40px; border-radius: 2px;
    background: var(--hud-frame-dark);
    border: 1px solid var(--hud-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    position: relative; overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.opp-card-back::before {
    content: ''; position: absolute; inset: 3px;
    border: 1px solid rgba(26,74,90,0.15); border-radius: 1px;
}
.opp-card-back::after {
    content: 'K'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-pixel); font-size: 12px;
    color: var(--text-faint);
}

.hand-drawer .hand-card {
    width: 96px !important; height: 114px !important;
    flex-shrink: 0; margin-bottom: -46px; position: relative;
}
.hand-drawer .player-hand-container {
    display: grid !important;
    grid-template-columns: repeat(5, 96px);
    justify-content: center; gap: 6px; padding: 4px 8px; max-width: 100%;
}
.hand-drawer .player-hand-container .hand-card:nth-last-child(-n+5) { margin-bottom: 0; }
.hand-drawer .hand-card:hover { transform: translateY(-16px) scale(1.08) !important; z-index: 10; }
.hand-drawer .hand-card.selected {
    transform: translateY(-20px) scale(1.1) !important; z-index: 10;
    border-color: var(--gold) !important;
    box-shadow: 0 0 12px var(--gold-glow) !important;
}

/* Score bar in grid header */
.game-score-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.4rem; gap: 0.3rem; }

/* Game-active state */
.arena-layer.game-active .hero-carousel,
.arena-layer.game-active .hero-label,
.arena-layer.game-active .cta-row,
.arena-layer.game-active .challenge-bar,
.arena-layer.game-active .log-section { display: none !important; }
.arena-layer.game-active {
    justify-content: flex-start;
    overflow-y: auto; padding-top: 0.4rem;
    padding-bottom: 260px;
}
.arena-layer.game-active .arena-row { justify-content: center; }
.arena-layer.game-active .grid-panel { width: min(520px, 90vw); max-width: none; }
.arena-layer.game-active .kardic-grid { gap: 6px; padding: 0.4rem; }

.log-feed { flex: 1; overflow: hidden; position: relative; }
.log-feed::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
    background: linear-gradient(transparent, var(--hud-solid));
    pointer-events: none; z-index: 2;
}
.feed-scroll { display: flex; flex-direction: column; gap: 0.3rem; animation: feedDrift 60s linear infinite; }
.feed-scroll:hover { animation-play-state: paused; }
.feed-item {
    display: flex; gap: 0.4rem; align-items: flex-start;
    padding: 0.25rem 0.3rem; border-radius: 2px;
    cursor: pointer; transition: background 0.2s ease; flex-shrink: 0;
}
.feed-item:hover { background: rgba(26,74,90,0.08); }
.feed-thumb {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1px solid rgba(26,74,90,0.12); border-radius: 2px;
    background: var(--hud-frame-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; overflow: hidden;
}
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-thumb.type-claim { border-color: rgba(212,165,32,0.15); }
.feed-thumb.type-mercy { background: rgba(48,200,112,0.08); font-size: 0.8rem; }
.match-queuing { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; }
.match-queuing-title { font-family: var(--font-pixel); font-size: 13px; color: var(--gold-dim); }
.match-queuing-sub { font-size: 10px; color: var(--text-muted); }
.feed-thumb.type-post { width: 28px; height: 24px; font-size: 0.45rem; color: var(--text-faint); text-align: center; padding: 0.1rem; line-height: 1.2; }
.feed-thumb.type-match { background: rgba(212,165,32,0.06); font-size: 0.8rem; }
.feed-text { flex: 1; min-width: 0; }
.feed-action {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary); line-height: 1.35;
}
.feed-action strong { color: var(--gold); font-weight: normal; }
.feed-action em { color: var(--gold-bright); font-style: italic; }
.feed-stat { font-family: var(--font-system); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; }

.arena-layer.hidden { opacity: 0; pointer-events: none; }

/* === LANDING HERO — visible only when logged out === */
.landing-hero {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    padding: 0 16px;
    gap: 12px;
}

.landing-tagline {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-shadow: 0 0 20px rgba(212,165,32,0.15);
}

.landing-desc {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 360px;
}

.landing-features {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 4px 0;
}
.landing-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    background: var(--hud-bg);
    border: 1px solid rgba(26,74,90,0.2);
    border-radius: 2px;
    backdrop-filter: blur(4px);
    min-width: 90px;
    transition: border-color 0.2s;
}
.landing-feature:hover {
    border-color: var(--hud-border);
}
.landing-feature-icon { font-size: 18px; }
.landing-feature-label {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}
.landing-feature-desc {
    font-family: var(--font-system);
    font-size: 11px;
    color: var(--text-muted);
}

.landing-cta-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.landing-cta-primary {
    font-family: var(--font-pixel);
    font-size: 13px;
    padding: 10px 24px;
    background: rgba(212,165,32,0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.landing-cta-primary:hover {
    background: rgba(212,165,32,0.18);
    border-color: var(--gold);
    box-shadow: 0 0 16px var(--gold-glow);
}
.landing-cta-secondary {
    font-family: var(--font-pixel);
    font-size: 13px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(26,74,90,0.25);
    color: var(--text-muted);
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.landing-cta-secondary:hover {
    border-color: var(--hud-border);
    color: var(--text-secondary);
}

.landing-note {
    font-family: var(--font-system);
    font-size: 12px;
    color: var(--text-faint);
}

/* Landing entrance animation */
@keyframes landingFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.arena-layer.logged-out .landing-hero > * {
    animation: landingFadeUp 0.4s ease-out both;
}
.arena-layer.logged-out .landing-hero > *:nth-child(1) { animation-delay: 0.1s; }
.arena-layer.logged-out .landing-hero > *:nth-child(2) { animation-delay: 0.2s; }
.arena-layer.logged-out .landing-hero > *:nth-child(3) { animation-delay: 0.3s; }
.arena-layer.logged-out .landing-hero > *:nth-child(4) { animation-delay: 0.4s; }
.arena-layer.logged-out .landing-hero > *:nth-child(5) { animation-delay: 0.5s; }

/* Logged-out state — show landing, reshape arena */
.arena-layer.logged-out .landing-hero { display: flex; }
.arena-layer.logged-out .cta-row { display: none; }
.arena-layer.logged-out .arena-row { display: none; }
.arena-layer.logged-out .top3-strip { display: none; }
.arena-layer.logged-out .log-section { display: none; }
.arena-layer.logged-out .hero-carousel { max-width: 680px; margin-bottom: 0; }
.arena-layer.logged-out .hero-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; margin-bottom: 2px; }
.arena-layer.logged-out .hero-card { width: 56px !important; height: 70px !important; opacity: 0.5; filter: brightness(0.7); }
.arena-layer.logged-out .hero-card.active { width: 96px !important; height: 115px !important; opacity: 1; filter: brightness(1); }

@media (max-width: 600px) {
    .arena-layer.logged-out .hero-card { width: 44px !important; height: 44px !important; }
    .arena-layer.logged-out .hero-card.active { width: 76px !important; height: 76px !important; }
    .landing-tagline { font-size: 14px; }
    .landing-desc { font-size: 10px; }
    .landing-features { gap: 6px; }
    .landing-feature { padding: 8px 8px; min-width: 80px; }
    .landing-feature-icon { font-size: 15px; }
    .landing-feature-label { font-size: 10px; }
    .landing-feature-desc { font-size: 9px; }
}
@media (min-width: 601px) and (max-width: 1023px) {
    .arena-layer.logged-out .hero-card { width: 60px !important; height: 60px !important; }
    .arena-layer.logged-out .hero-card.active { width: 108px !important; height: 108px !important; }
}
@media (min-width: 1024px) {
    .arena-layer.logged-out .hero-card { width: 68px !important; height: 68px !important; }
    .arena-layer.logged-out .hero-card.active { width: 128px !important; height: 128px !important; }
    .landing-tagline { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 5 — Extracted inline style classes
   ═══════════════════════════════════════════════════════════ */
.score-label { font-family: var(--font-pixel); font-size: 0.85rem; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.score-label.red { color: var(--gold); }
.score-label.blue { color: var(--cyan); }
.turn-indicator { font-family: var(--font-pixel); font-size: 0.75rem; font-weight: bold; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

.play-menu-btn {
    font-family: var(--font-pixel); font-size: 12px; padding: 14px 24px;
    cursor: pointer; border-radius: 2px; min-width: 140px; border: 1px solid;
}
.play-menu-btn.ai { background: var(--hud-frame); color: var(--cyan); border-color: rgba(64,216,208,0.25); }
.play-menu-btn.pvp { background: var(--hud-frame); color: var(--gold); border-color: rgba(212,165,32,0.25); }
.play-menu-btn-icon { font-size: 20px; margin-bottom: 4px; }
.play-menu-btn-label { font-size: 14px; font-family: var(--font-pixel); }
.play-menu-btn-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.play-menu-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }

.ai-mode-title { font-family: var(--font-pixel); font-size: 16px; color: var(--gold); margin-bottom: 6px; text-shadow: 0 0 10px rgba(212,165,32,0.15); }
.ai-diff-row { display: flex; gap: 6px; margin-bottom: 18px; align-items: center; }
.ai-diff-label { font-size: 11px; color: var(--text-muted); margin-right: 4px; }
.ai-diff-btn { font-family: var(--font-pixel); font-size: 11px; padding: 4px 12px; cursor: pointer; border-radius: 2px; border: 1px solid; }
.ai-diff-btn.easy { background: rgba(48,200,112,0.08); color: var(--green-dim); border-color: rgba(48,200,112,0.2); }
.ai-diff-btn.medium { background: rgba(212,165,32,0.08); color: var(--gold-dim); border-color: rgba(212,165,32,0.2); }
.ai-diff-btn.hard { background: rgba(200,80,60,0.08); color: rgba(200,100,80,0.6); border-color: rgba(200,80,60,0.2); }
.ai-mode-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ai-mode-btn { font-family: var(--font-pixel); font-size: 12px; padding: 12px 20px; cursor: pointer; border-radius: 2px; min-width: 140px; border: 1px solid; }
.ai-mode-btn.official { background: var(--hud-frame); color: var(--gold); border-color: var(--gold-dim); }
.ai-mode-btn-label { font-size: 14px; margin-bottom: 4px; }
.ai-mode-btn-sub { font-size: 10px; color: var(--text-muted); }

.pvp-lobby-content { width: 100%; max-width: 400px; }
.pvp-create-btn {
    width: 100%; font-family: var(--font-pixel); font-size: 13px;
    padding: 10px; cursor: pointer;
    background: var(--hud-frame); color: var(--gold);
    border: 1px solid var(--gold-dim);
    border-radius: 2px; margin-bottom: 12px; letter-spacing: 0.06em;
}

.picker-title { font-family: var(--font-pixel); font-size: 15px; color: var(--gold); margin-bottom: 4px; text-shadow: 0 0 10px rgba(212,165,32,0.15); }
.picker-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.picker-count { font-family: var(--font-system); font-size: 14px; color: var(--gold-dim); margin-bottom: 12px; }
.picker-grid { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 600px; margin-bottom: 16px; }
.picker-actions { display: flex; gap: 8px; }

.game-btn { font-family: var(--font-pixel); font-size: 11px; cursor: pointer; border-radius: 2px; border: 1px solid; }
.game-btn-sm { padding: 6px 16px; }
.game-btn-md { padding: 8px 20px; }
.game-btn.confirm { background: rgba(48,200,112,0.15); color: var(--green); border-color: rgba(48,200,112,0.3); font-weight: bold; }
.game-btn.confirm:disabled { opacity: 0.4; }
.game-btn.rematch { background: rgba(48,200,112,0.15); color: var(--green); border-color: rgba(48,200,112,0.3); }
.game-btn.back { background: var(--hud-frame); color: var(--text-primary); border-color: var(--hud-border); }
.game-btn.cancel-challenge { background: rgba(200,60,40,0.1); color: #e88070; border-color: rgba(232,80,64,0.25); }
.game-btn.mercy { background: var(--hud-frame); color: var(--text-primary); border-color: var(--hud-border); }
.game-btn.claim-confirm { background: rgba(212,165,32,0.15); color: var(--gold); border-color: var(--gold-dim); font-weight: bold; }
.game-btn.sudden-death { font-size: 13px; padding: 8px 20px; background: rgba(212,165,32,0.2); color: var(--gold); border: none; border-radius: 2px; }
.game-btn.swap { background: rgba(232,80,64,0.06); color: #e88070; border-color: rgba(232,80,64,0.25); }
.game-btn.ready { background: rgba(48,200,112,0.15); color: var(--green); border-color: rgba(48,200,112,0.3); font-weight: bold; }
.game-btn.new-hand { background: rgba(48,200,112,0.1); color: var(--green); border-color: rgba(48,200,112,0.25); border-radius: 2px; padding: 5px 14px; }
.game-btn.exit { background: var(--hud-frame); color: var(--text-primary); border-color: var(--hud-border); border-radius: 2px; padding: 5px 14px; }

.result-title { font-family: var(--font-pixel); font-size: 26px; font-weight: bold; text-shadow: 0 2px 8px rgba(0,0,0,0.5); margin-bottom: 8px; }
.result-subtitle { font-size: 16px; color: var(--text-secondary); margin-bottom: 12px; }
.result-streak { font-size: 14px; color: var(--text-primary); margin-bottom: 20px; }
.result-claim-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.result-claim-img { width: 48px; height: 48px; border-radius: 2px; object-fit: cover; border: 2px solid var(--gold-dim); box-shadow: 0 0 8px var(--gold-glow); }
.result-claim-text { font-size: 14px; color: var(--text-primary); text-align: left; line-height: 1.4; }
.result-mercy-icon { font-size: 28px; }
.result-actions { display: flex; gap: 8px; }
.rematch-status { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; text-align: center; }
.rematch-timer { color: var(--gold); font-weight: bold; }
.rematch-waiting { animation: pulse-glow 1.5s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100%{opacity:0.7} 50%{opacity:1} }
.round-pips { display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 16px; }
.round-pips .pip-group { display: flex; gap: 4px; align-items: center; }
.round-pips .pip { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(26,74,90,0.3); background: transparent; transition: background 0.3s, border-color 0.3s; }
.round-pips .pip.won { background: var(--gold); border-color: var(--gold); }
.round-pips .pip.lost { background: #c33; border-color: #c33; }
.round-pips .pip-vs { font-size: 11px; color: var(--text-muted); margin: 0 4px; }
.claim-title { font-family: var(--font-pixel); font-size: 18px; color: var(--gold); text-shadow: 0 0 10px rgba(212,165,32,0.15); margin-bottom: 4px; }
.claim-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.claim-hand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; max-width: 600px; }
.claim-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.coin-image { width: 120px; height: 120px; margin-bottom: 12px; }
.coin-result { font-family: var(--font-pixel); font-size: 15px; color: var(--text-primary); }
.game-hand-hint { font-size: 10px; text-align: center; color: var(--text-muted); margin-bottom: 4px; }

/* Card creator tool buttons */
.cc-tool-btn { height: 34px; padding: 0 8px; font-size: 12px; cursor: pointer; border-radius: 2px; border: 1px solid var(--hud-border); background: var(--hud-frame); color: var(--text-primary); transition: background 0.15s; }
.cc-tool-btn-sq { width: 36px; padding: 0; font-size: 15px; }
.cc-tool-btn-undo-redo { opacity: 0.4; transition: opacity 0.15s; }
.cc-icon-btn { width: 34px; height: 32px; font-size: 15px; cursor: pointer; border-radius: 2px; border: 1px solid var(--hud-border); background: var(--hud-frame); color: var(--text-primary); }
.cc-icon-btn-sm { font-size: 13px; }
.cc-zoom-label { display: inline-block; width: 44px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.cc-rotation-label { display: inline-block; width: 36px; font-size: 11px; color: var(--text-muted); }
.cc-divider { width: 1px; height: 22px; background: var(--hud-border); margin: 0 3px; }
.cc-divider-sm { margin: 0 2px; }
.cc-tool-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.cc-tool-row-lg { gap: 6px; margin-bottom: 8px; }
.cc-tool-options { text-align: center; margin-bottom: 4px; }
.cc-tool-options-label { font-size: 11px; color: var(--text-muted); }
.cc-range-input { width: 120px; vertical-align: middle; accent-color: var(--gold); }
.cc-drag-hint { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.cc-crop-actions { text-align: center; margin-bottom: 6px; }
.cc-crop-apply { height: 32px; padding: 0 14px; font-size: 12px; cursor: pointer; border-radius: 2px; border: 1px solid rgba(48,200,112,0.3); background: rgba(48,200,112,0.1); color: var(--green); margin-right: 6px; }
.cc-crop-cancel { height: 32px; padding: 0 14px; font-size: 12px; cursor: pointer; border-radius: 2px; border: 1px solid var(--hud-border); background: var(--hud-frame); color: var(--text-primary); }
.cc-rotation-slider { width: 140px; vertical-align: middle; accent-color: var(--gold); }

/* Book pages */
.drops-page { padding: 16px; }
.drops-header { text-align: center; margin-bottom: 20px; }
.drops-next-label { font-family: var(--font-pixel); font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 6px; }
.drops-countdown { font-family: var(--font-pixel); font-size: 24px; color: var(--gold); letter-spacing: 0.05em; }
.drops-utc-note { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.drops-stats-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.drops-stat-box { text-align: center; padding: 10px 16px; background: var(--hud-inner); border: 1px solid rgba(26,74,90,0.15); border-radius: 2px; }
.drops-stat-value { font-family: var(--font-pixel); font-size: 18px; color: var(--text-readout); }
.drops-stat-label { font-family: var(--font-pixel); font-size: 9px; color: var(--text-muted); letter-spacing: 0.08em; }
.drops-eligibility { text-align: center; padding: 10px; background: var(--hud-inner); border-radius: 2px; margin-bottom: 20px; font-size: 12px; color: var(--text-muted); }
.drops-pool-title { font-family: var(--font-pixel); font-size: 11px; color: var(--text-primary); letter-spacing: 0.12em; margin-bottom: 8px; }
.drops-pool-grid { display: flex; gap: 6px; flex-wrap: wrap; }

.mykards-page { padding: 16px; }
.mykards-section-title { font-family: var(--font-pixel); font-size: 12px; color: var(--text-primary); letter-spacing: 0.12em; margin-bottom: 10px; }
.mykards-card-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.mykards-empty-cta { text-align: center; padding: 30px 20px; }
.mykards-empty-icon { font-size: 40px; margin-bottom: 12px; }
.mykards-empty-title { font-family: var(--font-pixel); font-size: 14px; color: var(--text-primary); margin-bottom: 8px; }
.mykards-empty-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.mykards-signin-btn {
    font-family: var(--font-pixel); font-size: 12px; padding: 8px 24px;
    cursor: pointer;
    background: rgba(212,165,32,0.06);
    color: var(--gold); border: 1px solid var(--gold-dim);
    border-radius: 2px; letter-spacing: 0.08em;
}
.book-muted-text { color: var(--text-muted); font-size: 11px; font-style: italic; }

.rules-page { padding: 20px; color: var(--text-primary); font-size: 13px; line-height: 1.7; max-width: 600px; margin: 0 auto; }
.rules-section-title { font-family: var(--font-pixel); font-size: 14px; color: var(--gold); margin-top: 18px; margin-bottom: 10px; letter-spacing: 1px; }
.rules-section-title:first-child { margin-top: 0; }
.rules-page p { margin: 0 0 8px; color: var(--text-secondary); }
.rules-indent { padding-left: 12px; }
.rules-footer { margin-top: 24px; font-style: italic; color: var(--text-muted); text-align: center; }

/* Admin */
.admin-btn { color: #fff; border: none; padding: 8px 16px; border-radius: 2px; cursor: pointer; font-family: var(--font-pixel); font-size: 12px; margin-bottom: 12px; width: 100%; }
.admin-btn.distro { background: var(--green-dim); }
.admin-btn.book { background: var(--cyan-dim); }
.admin-btn.test-drop { background: var(--gold-dim); }
.admin-btn-danger { background: #4a1a1a; border: 2px solid #e04040; }
.admin-btn-danger:hover { background: #5a2222; }
.admin-btn-danger:disabled { background: #2a2a2a; border-color: #444; opacity: 0.6; cursor: not-allowed; }
.admin-reset-warning { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 8px 0; }
.admin-reset-input {
    width: 100%; padding: 8px 10px; background: rgba(0,0,0,0.4);
    border: 2px solid var(--hud-border); border-radius: 2px;
    color: #e06060; font-family: monospace; font-size: 14px;
    letter-spacing: 1px; margin: 8px 0 12px; box-sizing: border-box;
}
.admin-reset-input:focus { outline: none; border-color: #e04040; }
.admin-distro-log { margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 2px; font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; color: var(--text-readout); }
.log-view-all { font-size: 9px; opacity: 0.5; cursor: pointer; margin-left: 6px; color: var(--gold-dim); letter-spacing: 0.06em; transition: opacity 0.2s; }
.log-view-all:hover { opacity: 0.8; }

/* Auth form helpers */
.auth-spacer-sm { height: 4px; }
.auth-spacer-md { height: 8px; }
.auth-link { font-size: 11px; color: var(--text-muted); }
.auth-link-gold { font-size: 11px; color: var(--gold); cursor: pointer; text-decoration: underline; }
.auth-link-red { font-size: 11px; color: #c87070; cursor: pointer; }
.auth-question { font-size: 12px; color: var(--gold); margin-bottom: 12px; text-align: center; }
.auth-select {
    width: 100%; padding: 6px 8px; background: rgba(0,0,0,0.3);
    border: 1px solid var(--hud-border); border-radius: 2px;
    color: var(--text-primary); font-family: var(--font-mono); font-size: 12px;
}

/* Profile picture */
.pfp { border-radius: 2px; object-fit: cover; border: 1px solid var(--hud-border); background: var(--hud-frame-dark); }
.pfp-topbar { width: 24px; height: 24px; cursor: pointer; }
.pfp-lb { width: 32px; height: 32px; }
.pfp-match { width: 24px; height: 24px; }
.pfp-lobby { width: 22px; height: 22px; }
.pfp-profile { width: 64px; height: 64px; border-width: 2px; margin-bottom: 8px; }
.pfp-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--hud-inner); color: var(--gold-dim);
    font-family: var(--font-pixel); font-size: inherit;
}
.pfp-topbar.pfp-placeholder { font-size: 11px; }
.pfp-profile.pfp-placeholder { font-size: 22px; }

/* Onboarding overlay */
.onboard-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(6,13,20,0.97);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.onboard-overlay.active { opacity: 1; pointer-events: all; }
.onboard-card { width: 90%; max-width: 380px; text-align: center; padding: 28px 24px; color: var(--text-primary); max-height: 90vh; overflow-y: auto; }
.onboard-title { font-family: var(--font-pixel); font-size: 18px; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 6px; }
.onboard-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
.onboard-card input[type="text"], .onboard-card input[type="password"] {
    width: 100%; padding: 8px 10px;
    background: rgba(0,0,0,0.3); border: 1px solid var(--hud-border);
    border-radius: 2px; color: var(--text-primary);
    font-family: var(--font-mono); font-size: 13px;
    box-sizing: border-box; margin-bottom: 8px;
}
.onboard-card input:focus { border-color: var(--gold-dim); outline: none; }
.onboard-card select {
    width: 100%; padding: 8px 10px;
    background: rgba(0,0,0,0.3); border: 1px solid var(--hud-border);
    border-radius: 2px; color: var(--text-primary);
    font-family: var(--font-mono); font-size: 12px;
    box-sizing: border-box; margin-bottom: 8px;
}
.onboard-hint { font-size: 10px; color: var(--text-muted); margin-bottom: 12px; }
.onboard-error { font-size: 11px; color: #e06060; min-height: 16px; margin-bottom: 8px; }
.onboard-btn {
    font-family: var(--font-pixel); font-size: 13px; padding: 10px 28px;
    cursor: pointer; border: 1px solid var(--gold-dim);
    border-radius: 2px; color: var(--gold);
    background: rgba(212,165,32,0.06);
    letter-spacing: 0.05em; transition: all 0.15s;
}
.onboard-btn:hover { background: rgba(212,165,32,0.12); border-color: var(--gold); }
.onboard-btn:disabled { opacity: 0.4; cursor: default; }
.onboard-btn-ghost { background: transparent; border-color: rgba(26,74,90,0.2); color: var(--text-muted); font-size: 12px; padding: 6px 16px; }
.onboard-btn-ghost:hover { border-color: var(--hud-border); }
.onboard-pfp-area { margin: 16px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.onboard-pfp-preview { width: 80px; height: 80px; border-radius: 2px; object-fit: cover; border: 2px solid var(--hud-border); background: var(--hud-inner); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.onboard-pfp-preview img { width: 100%; height: 100%; object-fit: cover; }
.onboard-pfp-placeholder { font-size: 28px; color: var(--text-muted); }
.onboard-pfp-upload-btn { font-size: 11px; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.onboard-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.onboard-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(26,74,90,0.2); }
.onboard-dot.active { background: var(--gold); }
.onboard-dot.done { background: var(--gold-dim); }
.onboard-signin-link { font-size: 11px; color: var(--text-muted); margin-top: 16px; }
.onboard-signin-link span { color: var(--gold); cursor: pointer; }
.onboard-divider { height: 1px; background: rgba(26,74,90,0.15); margin: 8px 0 4px; }
.onboard-exit { position: absolute; top: 16px; right: 18px; font-size: 22px; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 4px 8px; line-height: 1; transition: color 0.15s; }
.onboard-exit:hover { color: var(--gold); }
.onboard-welcome-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.onboard-btn-returning { background: transparent; border-color: rgba(212,165,32,0.2); color: var(--gold-dim); }
.onboard-btn-returning:hover { background: rgba(212,165,32,0.06); border-color: rgba(212,165,32,0.4); }

/* Card creator helpers */
.cc-file-input { font-size: 13px; margin: 4px 0; }
.kard-limit-display { font-size: 11px; color: var(--text-muted); margin: 4px 0 8px; }
.cc-file-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cc-zoom-controls { margin: 8px 0 4px 0; }
.cc-rotate-btn { height: 32px; padding: 0 10px; }
.cc-reroll-btn {
    font-family: var(--font-pixel); font-size: 11px; padding: 6px 12px;
    cursor: pointer; background: rgba(80,60,120,0.3); color: #c8a0ff;
    border: 1px solid rgba(180,140,255,0.2); border-radius: 2px;
}

.book-section-compact { background: var(--hud-inner); border-bottom: 1px solid rgba(26,74,90,0.15); }
.book-section-title-brown { color: var(--text-primary); }
.book-log-wrapper { padding: 12px 8px; }

/* Book card */
.book-card {
    width: 96px; height: 96px; border-radius: 2px; overflow: hidden;
    position: relative; border: 2px solid rgba(212,165,32,0.2); flex-shrink: 0;
}
.book-card.lost { border-color: rgba(26,74,90,0.1); opacity: 0.35; }
.book-card img { width: 100%; height: 100%; object-fit: cover; }
.book-card-badge { position: absolute; top: 2px; left: 3px; font-family: var(--font-system); font-size: 10px; color: var(--gold-dim); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.book-card-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 3px; font-size: 7px; color: #fff; background: rgba(0,0,0,0.65); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card-lost-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 8px; color: rgba(200,60,40,0.8); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.book-log-title { font-family: var(--font-pixel); font-size: 13px; color: var(--gold); text-align: center; margin-bottom: 10px; letter-spacing: 0.1em; }
.book-log-list { display: flex; flex-direction: column; gap: 6px; }
.blog-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(26,74,90,0.06); }
.blog-thumb { width: 36px; height: 36px; border-radius: 2px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--hud-inner); font-size: 16px; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-text { flex: 1; min-width: 0; }
.blog-action { font-size: 11px; color: var(--gold); }
.blog-stat { font-size: 9px; color: var(--text-dim); margin-top: 1px; }
.blog-ago { font-size: 8px; color: var(--text-faint); }

.lobby-title { margin-bottom: 4px; }
.no-challenges { color: var(--text-muted); font-style: italic; }
.picker-padded { padding: 16px; overflow-y: auto; }
.subtitle-center { text-align: center; }
.card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-faint); }
.challenge-waiting { text-align: center; padding: 12px; }

.ai-end-btn { font-family: var(--font-pixel); font-size: 11px; padding: 5px 14px; cursor: pointer; border-radius: 2px; border: 1px solid; }
.ai-end-btn.new-hand { background: rgba(48,200,112,0.1); color: var(--green); border-color: rgba(48,200,112,0.25); margin-right: 6px; }
.ai-end-btn.exit { background: var(--hud-frame); color: var(--text-primary); border-color: var(--hud-border); }

/* Drag/capture/fly animations */
.drag-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.85; transform: scale(1.1); transition: none; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.board-cell.drop-highlight { box-shadow: inset 0 0 12px rgba(212,165,32,0.3), 0 0 8px var(--gold-glow) !important; background: rgba(212,165,32,0.06) !important; }
.board-cell.capturing { animation: captureShake 0.35s ease-out, captureRing 0.7s ease-out; z-index: 10; }
.board-cell.capture-flipping { animation: captureFlip 0.6s ease-in-out; z-index: 10; }
.board-cell.capture-flipping .cell-border { animation: captureBorderFlash 0.6s ease-out; }
.stat-clash {
    position: absolute; z-index: 20; display: flex; align-items: center; gap: 2px;
    padding: 2px 5px; border-radius: 2px;
    background: rgba(0,0,0,0.9); border: 1px solid rgba(212,165,32,0.25);
    font-family: var(--font-pixel); font-size: 11px; font-weight: 700;
    line-height: 1; white-space: nowrap; pointer-events: none;
    opacity: 0; animation: statClashIn 0.8s ease-out forwards;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.stat-clash .atk { color: var(--green); }
.stat-clash .vs { color: var(--text-muted); font-size: 8px; }
.stat-clash .def { color: #e85d5d; }
.stat-clash.dir-top { top: -2px; left: 50%; transform: translateX(-50%) translateY(-100%); }
.stat-clash.dir-bottom { bottom: -2px; left: 50%; transform: translateX(-50%) translateY(100%); }
.stat-clash.dir-left { left: -2px; top: 50%; transform: translateY(-50%) translateX(-100%); }
.stat-clash.dir-right { right: -2px; top: 50%; transform: translateY(-50%) translateX(100%); }
.stat-clash.dir-left, .stat-clash.dir-right { animation-name: statClashInV; }
.board-cell.card-landing { animation: cardLand 0.3s ease-out; z-index: 11; }
.score-pop, .score-pulse { animation: scorePulse 0.4s ease-out; }
.card-flying {
    position: fixed; z-index: 100; pointer-events: none;
    transition: all 0.35s cubic-bezier(0.2,0.8,0.3,1);
    border-radius: 2px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.card-flying img { width: 100%; height: 100%; object-fit: cover; }
.opponent-thinking { animation: opponentThink 1.5s ease-in-out infinite; }
.coin-spinning { animation: coinSpin 1.5s ease-out; }
.result-animate { animation: resultBounce 0.5s ease-out; }
.your-turn { animation: turnPulse 1.5s ease-in-out infinite; color: var(--green); }
.turn-timer {
    display: inline-block; font-family: var(--font-pixel); font-size: 13px;
    color: var(--gold-dim); margin-left: 8px; transition: color 0.3s ease, text-shadow 0.3s ease;
}
.turn-timer.warning { color: var(--gold); text-shadow: 0 0 4px rgba(212,165,32,0.2); }
.turn-timer.danger { color: #d07030; text-shadow: 0 0 6px rgba(208,112,48,0.3); animation: timerPulseSlow 1s ease-in-out infinite; }
.turn-timer.urgent { color: #c84040; text-shadow: 0 0 10px rgba(200,64,64,0.4); animation: timerPulseFast 0.4s ease-in-out infinite; font-size: 15px; }

.pick-card {
    position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden;
    cursor: pointer; border: 2px solid rgba(26,74,90,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pick-card img { width: 100%; height: 100%; object-fit: cover; }
.pick-card:hover { transform: scale(1.05); border-color: var(--gold-dim); }
.pick-card.swap-marked { border-color: #e85040; box-shadow: 0 0 12px rgba(232,80,64,0.3); transform: scale(0.95); }
.pick-card .swap-badge {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
    background: rgba(232,80,64,0.9); border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    font-size: 11px; color: #fff; font-weight: bold; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pick-card.swap-marked .swap-badge { display: flex; }
.pick-card.swapping { animation: swapOut 0.5s ease; }
.pick-card.locked { opacity: 0.6; cursor: default; pointer-events: none; }
.hand-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hand-card .reroll-select {
    position: absolute; inset: 0;
    background: rgba(255,0,0,0.15); display: none;
    align-items: center; justify-content: center; font-size: 20px;
}
.hand-card.reroll-marked .reroll-select { display: flex; }
.picking-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 340px; margin: 0 auto 12px; }
.deck-fan { display: flex; justify-content: center; gap: 4px; padding: 20px 0; perspective: 600px; }
.deck-fan .fan-card { width: 64px; height: 64px; border-radius: 2px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 2px solid rgba(212,165,32,0.2); position: relative; }
.deck-fan .fan-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-fan.animate .fan-card { animation: fanIn 0.45s ease backwards; }
.deck-fan.animate .fan-card:nth-child(1) { animation-delay: 0s; }
.deck-fan.animate .fan-card:nth-child(2) { animation-delay: 0.08s; }
.deck-fan.animate .fan-card:nth-child(3) { animation-delay: 0.16s; }
.deck-fan.animate .fan-card:nth-child(4) { animation-delay: 0.24s; }
.deck-fan.animate .fan-card:nth-child(5) { animation-delay: 0.32s; }

.coin-flip-img { width: 120px; height: 120px; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════
   UTILITY STATUS CLASSES
   ═══════════════════════════════════════════════════════════ */
.status-msg { padding: 12px; text-align: center; font-size: 12px; }
.status-msg.loading { color: var(--text-muted); }
.status-msg.empty { color: var(--text-muted); }
.status-msg.error { color: #e06060; }
.status-msg.lg { padding: 16px; }
.status-msg.serif { font-family: var(--font-serif); }

.book-status { color: var(--text-muted); font-size: 11px; font-style: italic; }
.book-status.padded { padding: 8px 0; }
.book-status.block { padding: 20px; text-align: center; font-size: 12px; }
.book-status.error { color: #e06060; font-style: normal; }

.overlay-msg { font-family: var(--font-serif); font-size: 12px; padding: 20px; }
.overlay-msg.muted { color: var(--text-muted); }
.overlay-msg.error { color: #e88070; text-align: center; }
.overlay-msg.waiting { color: var(--text-secondary); margin-bottom: 12px; }

.elig-signed-out { color: var(--text-muted); }
.elig-eligible { color: var(--green); }
.elig-sub { font-size: 10px; color: var(--text-muted); }
.elig-anon { color: var(--gold-dim); }

.text-gold { color: var(--gold); }
.text-gold-bright { color: var(--gold-bright); }
.text-gold-dim { color: var(--gold-dim); }
.text-gold-accent { color: var(--gold); }

/* Utility */
.hidden { display: none; }
.pad-v8 { padding: 8px 0; }
.mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; } .mb-24 { margin-bottom: 24px; }
.gap-5 { gap: 5px; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.no-shadow { box-shadow: none; }
.no-radius { border-radius: 0; }
.no-shadow-no-radius { box-shadow: none; border-radius: 0; }

/* Book grid thumbnails */
.book-grid-count { font-family: var(--font-system); font-size: 11px; color: var(--text-muted); margin-left: auto; padding: 4px 6px 0 0; }
.book-grid-thumbs { padding: 4px; }
.book-thumb-wrap { position: relative; display: inline-block; }
.book-thumb-img { border-radius: 2px; }
.book-thumb-badge { position: absolute; bottom: 1px; left: 1px; font-family: var(--font-system); font-size: 10px; background: rgba(0,0,0,0.7); color: var(--gold-dim); border-radius: 1px; padding: 1px 3px; line-height: 1; pointer-events: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-streak-wrap { display: flex; flex-direction: column; align-items: center; }
.ch-row-flex { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ch-info { flex: 1; }
.ch-accept-btn { font-family: var(--font-pixel); font-size: 10px; padding: 3px 10px; cursor: pointer; background: rgba(48,200,112,0.15); color: var(--green); border: none; border-radius: 2px; white-space: nowrap; }
.ch-cancel-btn { font-family: var(--font-pixel); font-size: 10px; padding: 3px 8px; cursor: pointer; background: none; color: rgba(255,100,100,0.6); border: 1px solid rgba(255,100,100,0.2); border-radius: 2px; white-space: nowrap; }
.other-book-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
.admin-card-img { width: 100%; border-radius: 2px; }
.player-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--hud-inner); border: 1px solid rgba(26,74,90,0.08); border-radius: 2px; cursor: pointer; transition: all 0.15s; }
.player-search-row:hover { background: rgba(26,74,90,0.1); border-color: rgba(212,165,32,0.15); }
.player-search-name-col { flex: 1; min-width: 0; }
.player-search-name { font-family: var(--font-pixel); font-size: 12px; color: var(--text-primary); letter-spacing: 0.05em; }
.player-search-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.player-search-arrow { color: var(--text-faint); font-size: 14px; }
.recap-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; opacity: 0.8; }
.drop-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: linear-gradient(135deg, var(--hud-frame), var(--cyan-dim)); color: #fff; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-pixel); font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: dropSlideIn 0.5s ease; }
.drop-banner-dismiss { background: none; border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 14px; cursor: pointer; padding: 2px 8px; border-radius: 2px; margin-left: 8px; }

.hand-spacer { width: 8px; }
.admin-container { text-align: center; margin: 10px 0; }
#adminButtonContainer { position: relative; z-index: 20; }
.admin-trigger-btn { background: #4a1a1a; color: #e06060; padding: 8px 16px; border: 1px solid #5a2a2a; border-radius: 2px; cursor: pointer; font-family: var(--font-pixel); }
.admin-sub-panel { display: none; }
.admin-distro-content { padding: 16px; font-family: var(--font-mono); color: var(--text-secondary); }
.admin-distro-content h3 { margin: 0 0 16px; }

.round-info-sub { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.claim-detail-sub { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes bagNudge {
    0%, 100% { transform: translateY(0) scale(1); }
    15% { transform: translateY(-5px) scale(1.04); }
    30% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-3px) scale(1.02); }
    60% { transform: translateY(0) scale(1); }
}
@keyframes celebFadeIn { to { opacity: 1; } }
@keyframes celebCardPop {
    0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes celebTextIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cellPulse { 0%, 100% { background: rgba(48,200,112,0.05); } 50% { background: rgba(48,200,112,0.15); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardReveal {
    from { transform: scale(0.85) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fanIn {
    0% { transform: translateY(60px) rotateX(40deg) scale(0.5); opacity: 0; }
    60% { transform: translateY(-4px) rotateX(-3deg) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}
@keyframes dropSlideIn {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes swapOut {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7) rotateY(90deg); opacity: 0.3; }
    100% { transform: scale(1) rotateY(0); opacity: 1; }
}
@keyframes captureShake {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    10% { transform: translate(-2px,1px) rotate(-1deg); }
    20% { transform: translate(2px,-1px) rotate(1deg); }
    30% { transform: translate(-1px,2px) rotate(-0.5deg); }
    40% { transform: translate(1px,-1px) rotate(0.5deg); }
    50% { transform: translate(0,0) rotate(0deg); }
}
@keyframes captureFlip {
    0% { transform: perspective(400px) rotateY(0deg) scale(1); }
    30% { transform: perspective(400px) rotateY(90deg) scale(1.05); }
    50% { transform: perspective(400px) rotateY(90deg) scale(1.05); }
    80% { transform: perspective(400px) rotateY(0deg) scale(1.08); }
    100% { transform: perspective(400px) rotateY(0deg) scale(1); }
}
@keyframes captureRing {
    0% { box-shadow: 0 0 0 0 rgba(212,165,32,0.6); }
    40% { box-shadow: 0 0 20px 8px rgba(212,165,32,0.3); }
    100% { box-shadow: 0 0 0 0 rgba(212,165,32,0); }
}
@keyframes captureBorderFlash {
    0% { border-color: rgba(255,255,255,0.8); box-shadow: inset 0 0 12px rgba(255,255,255,0.3); }
    30% { border-color: rgba(212,165,32,0.6); box-shadow: inset 0 0 8px rgba(212,165,32,0.2); }
    100% { border-color: inherit; box-shadow: none; }
}
@keyframes statClashIn {
    0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    15% { opacity: 1; transform: translateX(-50%) scale(1.15); }
    30% { transform: translateX(-50%) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.9); }
}
@keyframes statClashInV {
    0% { opacity: 0; transform: translateY(-50%) scale(0.5); }
    15% { opacity: 1; transform: translateY(-50%) scale(1.15); }
    30% { transform: translateY(-50%) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50%) translateX(-4px) scale(0.9); }
}
@keyframes cardLand {
    0% { transform: scale(1.12); filter: brightness(1.3); }
    40% { transform: scale(0.97); filter: brightness(1); }
    70% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes scorePulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes opponentThink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes coinSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(1800deg); } }
@keyframes resultBounce {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes turnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes timerPulseSlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } }
@keyframes timerPulseFast { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.15); } }
@keyframes arenaIn { to { opacity: 1; } }
@keyframes feedDrift { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    body { padding: 4px; }
    .notification { top: 10px; right: 10px; left: 10px; text-align: center; }
    .admin-container { margin: 10px; padding: 15px; }
    .admin-header h2 { font-size: 1.3em; }
    .admin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .opp-card-back { width: 32px; height: 32px; }
    .opp-card-back::after { font-size: 10px; }
    .hand-drawer { width: min(460px, 98vw); max-height: 50vh; }
    .hand-drawer .hand-card { width: 80px !important; height: 95px !important; margin-bottom: -38px; }
    .hand-drawer .player-hand-container { grid-template-columns: repeat(5, 80px) !important; max-width: 100%; }
    .hand-drawer .player-hand-container .hand-card:nth-last-child(-n+5) { margin-bottom: 0; }
    .arena-layer.game-active .grid-panel { width: 100%; max-width: min(400px, 95vw); }
    .arena-layer { padding: 0.2rem 0.4rem; padding-bottom: max(3rem, calc(3rem + env(safe-area-inset-bottom))); gap: 4px; }
    .arena-layer.game-active { padding-bottom: 260px; }
    .v7-topbar-title { font-size: 1.1rem; }
    .hero-carousel .hero-card.active { width: 66px; height: 66px; }
    .hero-carousel .hero-card { width: 42px; height: 42px; }
    .cta-btn .cta-icon { font-size: 14px; }
    .cta-btn .cta-label { font-size: 11px; }
    .grid-panel { width: 65%; max-width: 260px; }
    .cta-row { width: 65%; max-width: 260px; }
    .log-section { width: 65%; max-width: 260px; }
    .top3-strip { width: 65%; max-width: 260px; font-size: 9px; }
    .log-panel { max-height: 80px; }
}

@media (min-width: 601px) {
    body { padding: 20px; }
    .hero-carousel .hero-card.active { width: 110px; height: 110px; }
    .hero-carousel .hero-card { width: 60px; height: 60px; }
    .v7-topbar { max-width: 600px; }
    .hero-carousel { max-width: 600px; }
    .cta-row { max-width: 360px; }
    .grid-panel { max-width: 360px; }
    .arena-row { max-width: 600px; }
    .log-section { max-width: 360px; }

    /* Book — centered floating panel on desktop */
    .book-panel {
        left: 50%; right: auto; top: 50%; bottom: auto;
        width: 88vw; max-width: 900px;
        height: 82vh; max-height: 720px;
        transform: translateX(-50%) translateY(-50%) scale(0.95);
        opacity: 0;
        border-radius: 2px;
        box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--hud-border);
        flex-direction: row;
    }
    .book-panel.open { transform: translateX(-50%) translateY(-50%) scale(1); opacity: 1; }

    .book-left-panel {
        display: flex; flex-direction: column;
        width: 180px; flex-shrink: 0;
        background: var(--hud-frame-dark);
        padding: 20px 0 16px; overflow: hidden;
    }
    .book-left-title {
        font-family: var(--font-pixel);
        font-size: 13px; color: var(--gold);
        letter-spacing: 0.18em;
        text-align: center;
        padding: 0 16px 16px;
        border-bottom: 1px solid rgba(26,74,90,0.1);
        margin-bottom: 8px;
    }
    .book-left-nav {
        flex: 1; display: flex; flex-direction: column;
        gap: 2px; padding: 4px 8px; overflow-y: auto;
    }
    .book-left-tab {
        padding: 8px 12px;
        font-family: var(--font-pixel); font-size: 11px;
        color: var(--text-muted); letter-spacing: 0.08em;
        cursor: pointer; border-radius: 2px;
        transition: all 0.15s ease;
        border: 1px solid transparent;
        white-space: nowrap;
        border-left: 2px solid transparent;
    }
    .book-left-tab:hover { color: var(--text-secondary); background: rgba(26,74,90,0.06); }
    .book-left-tab.active {
        color: var(--gold);
        background: rgba(212,165,32,0.04);
        border-left-color: var(--gold);
    }
    .book-left-footer {
        padding: 12px 16px 0;
        border-top: 1px solid rgba(26,74,90,0.1);
        display: flex; align-items: center; justify-content: space-between;
    }
    .book-spine {
        display: block; width: 4px; flex-shrink: 0;
        background: linear-gradient(90deg, var(--hud-frame-dark), var(--hud-border), var(--hud-frame-dark));
    }
    .book-right-panel {
        display: flex; flex-direction: column;
        flex: 1; min-width: 0; overflow: hidden;
        background: var(--hud-solid);
        border-radius: 0 2px 2px 0;
    }
    .book-right-panel > .leather-panel { display: none; }
    .card-creator { max-width: 480px; }
}

@media (min-width: 1024px) {
    .v7-topbar { max-width: 680px; }
    .hero-carousel { max-width: 680px; }
    .hero-carousel .hero-card.active { width: 130px; height: 130px; }
    .hero-carousel .hero-card { width: 68px; height: 68px; }
    .cta-row { max-width: 400px; }
    .grid-panel { max-width: 400px; }
    .arena-row { max-width: 680px; }
    .log-section { max-width: 400px; }
    .book-panel { max-width: 1040px; }
    .book-left-panel { width: 200px; }
    .card-detail-content { max-width: 400px; }
    .card-detail-img { max-height: 320px; }
}