:root {
            --overlay-bg: rgba(245, 245, 245, 0.95);
            --text-secondary: #333;
            --text-muted: #555;
            --border-medium: rgba(0,0,0,0.15);
            --radius-sm: 4px;
            --font-serif: 'Rajdhani', 'Century Schoolbook', Georgia, sans-serif;
            --font-display: 'Russo One', 'Century Schoolbook', Georgia, sans-serif;

            /* v7.1 Ocean noise palette */
            --ocean-deep: #06162e;
            --ocean-mid: #0a1e38;
            --ocean-teal: #102a42;

            /* v7.1 Panel wood */
            --panel-wood-dark: #483e32;
            --panel-wood-mid: #6a5e4e;
            --panel-wood-warm: #7e7260;
            --panel-wood-light: #968a78;
            --panel-wood-edge: #3a3228;

            /* v7.1 Brass / metal */
            --brass: #b08d57;
            --brass-light: #d4ad6a;
            --brass-dark: #7a6030;

            /* v7.1 Gold & text */
            --gold: #c8b878;
            --gold-bright: #e8d898;
            --gold-dim: #8a7a4e;
            --parch: #d4c4a0;
            --parch-light: #e8dcc0;
            --text-dim: #9a8a6a;
            --text-faint: #6a5a42;
            --copper: #b07048;
            --red-accent: #8b3a3a;
            --nail: #8a7a5a;
            --iron: #5a5a5a;

            /* v7.1 Panel aliases (match v7 shorthand) */
            --panel-dark: #483e32;
            --panel-mid: #6a5e4e;
            --panel-warm: #7e7260;
            --panel-light: #968a78;
            --panel-highlight: #a89c8a;
            --panel-edge: #3a3228;

            /* Book (steampunk) */
            --cyan: #4adfdf;
            --cyan-dim: #2a8a8a;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            overflow-x: hidden;
        }

        body {

            background: var(--ocean-deep);
            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;
        }

        /* Ocean noise canvas as background */
        #oceanNoise {
            position: fixed;
            inset: 0;
            z-index: -1;
            width: 100vw;
            height: 100vh;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        /* ===== THE BOOK — swipeable captain's logbook ===== */
        /* Book FAB — floating action button */
        .book-fab {
            position: fixed;
            bottom: max(20px, env(safe-area-inset-bottom, 20px));
            right: 18px;
            z-index: 6800;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--panel-wood-warm), var(--panel-wood-dark));
            border: 1px solid rgba(200,184,120,0.35);
            box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
            color: var(--gold);
            font-size: 20px;
            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 {
            transform: scale(1.08);
            box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 12px rgba(200,184,120,0.2), inset 0 1px 0 rgba(255,255,255,0.07);
        }
        .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); }

        /* Mobile-only floating action cluster (Play/Create/Account) —
           desktop uses the sidebar footer instead, hidden below. */
        .mobile-fab-cluster {
            position: fixed;
            bottom: max(16px, env(safe-area-inset-bottom, 16px));
            right: 16px;
            z-index: 6900;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mobile-fab-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            background: var(--panel-wood-dark);
            border: 1px solid rgba(200,184,120,0.4);
            box-shadow: 0 3px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease;
        }
        .mobile-fab-btn:active { transform: scale(0.92); }
        .mobile-fab-btn .material-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
        .mobile-fab-icon {
            position: relative;
            z-index: 1;
            font-size: 19px;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
        }

        @media (min-width: 601px) {
            .mobile-fab-cluster { display: none; }
        }

        /* Desktop: move FAB to bottom-center for easier reach */
        @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.08);
            }
            .book-fab:active {
                transform: translateX(-50%) scale(0.94);
            }
        }

        /* Book panel — mobile: bottom-sheet; desktop: floating centered modal */
        .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: linear-gradient(180deg, var(--panel-wood-warm), var(--panel-wood-mid));
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
            box-shadow: 0 -6px 30px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .book-panel.open {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        /* Home mode — book-panel IS the app now, not a toggleable overlay.
           Applied permanently in HTML instead of the old open/closed toggle. */
        .book-panel.home-mode {
            position: relative;
            left: auto; right: auto; top: auto; bottom: auto;
            width: 100%;
            height: auto;
            min-height: 60vh;
            transform: none;
            opacity: 1;
            pointer-events: auto;
            border-radius: 12px;
            box-shadow: none;
            margin: 0 auto;
        }
        /* During an active match, the battle screen takes over completely —
           the book (even in home-mode) gets out of the way entirely so
           there's nothing to scroll past and no leftover book chrome
           competing with the grid/hand drawer for space. */
        .arena-layer.game-active .book-panel.home-mode {
            display: none;
        }
        .hidden-forever { display: none !important; }

        /* Left nav panel — hidden on mobile, shown on desktop */
        .book-left-panel {
            display: none;
        }
        /* Right content panel — transparent wrapper on mobile */
        .book-right-panel {
            display: contents;
        }
        /* Spine divider — hidden on mobile */
        .book-spine {
            display: none;
        }

        /* Book header */
        .book-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px 8px;
            flex-shrink: 0;
            position: relative;
            background: linear-gradient(180deg, var(--panel-wood-mid), var(--panel-wood-dark));
        }
        .book-header::after {
            content: '▾';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: rgba(200,184,120,0.25);
            pointer-events: none;
        }
        .book-title {
            font-family: var(--font-serif);
            font-size: 14px;
            color: var(--gold);
            letter-spacing: 0.2em;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .book-header-right {
            display: flex; align-items: center; gap: 8px;
        }
        .book-account-btn {
            background: none;
            border: 1px solid rgba(200,184,120,0.2);
            color: var(--gold-dim);
            font-size: 16px;
            width: 30px; height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }
        .book-account-btn:hover {
            border-color: rgba(200,184,120,0.4);
            background: rgba(200,184,120,0.08);
        }
        /* Tab bar with arrows */
        .book-tabs-row {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(150,138,112,0.15);
            background: transparent;
            position: relative;
            z-index: 1;
        }
        .book-tab-arrow {
            flex-shrink: 0;
            width: 48px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: rgba(200,184,120,0.35);
            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-display);
            font-size: 11px;
            color: rgba(200,184,120,0.4);
            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: rgba(200,184,120,0.6); }
        .book-tab.active {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }

        /* Swipeable page container */
        .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: #dcd0b4;
        }
        .card-celebration {
            position: fixed;
            inset: 0;
            z-index: 10002;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.8);
            opacity: 0;
            animation: celebFadeIn 0.3s ease-out forwards;
        }
        .card-celebration .celeb-card {
            width: 160px;
            height: 160px;
            border-radius: 6px;
            overflow: hidden;
            border: 3px solid rgba(200,184,120,0.5);
            box-shadow: 0 0 40px rgba(200,184,120,0.3), 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,173,106,0.7);
            box-shadow: 0 0 50px rgba(212,173,106,0.4), 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-serif);
            font-size: 14px;
            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: rgba(200,184,120,0.5);
            margin-top: 4px;
            opacity: 0;
            animation: celebTextIn 0.4s ease-out 0.7s forwards;
        }


        /* Backdrop dim when book is open */
        .book-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.35);
            z-index: 6840;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .book-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* ===== MAIN LAYOUT — always vertical ===== */
        /* ===== NOTIFICATION ===== */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            padding: 15px 25px;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: none;
            z-index: 10000;
            border: 1px solid #ddd;
            transition: opacity 0.3s;

            font-size: 11px;
            color: #000;
        }

        .notification.show {
            display: block;
            animation: slideIn 0.3s ease-out;
        }

        .notification.error  { background: #fee; color: #c00; border-color: #fcc; }
        .notification.success { background: rgba(48,120,36,0.15); color: rgb(29,80,24); border-color: rgba(48,128,155,0.4); }


        /* ===== LOADING OVERLAY ===== */
        .loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            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(0,0,0,0.9);
            z-index: 100000;
            overflow-y: auto;
        }

        .admin-modal.active { display: block; }

        .admin-container {
            max-width: 1200px;
            margin: 50px auto;
            background: #fff;
            border-radius: 8px;
            padding: 30px;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #333;
            padding-bottom: 15px;
        }

        .admin-header h2 { font-size: 2em; color: #333; }

        .admin-close {
            background: #dc143c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .admin-close:hover { background: #a00; }

        .admin-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .admin-tab {
            padding: 8px 20px;
            border: 2px solid #ddd;
            border-radius: 4px;
            background: #f9f9f9;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }

        .admin-tab.active {
            background: rgb(48,120,36);
            color: #fff;
            border-color: rgb(29,80,24);
        }

        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .admin-image-card {
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            background: #f9f9f9;
        }

        .admin-image-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
        }

        .admin-image-info {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }

        .admin-delete-btn {
            width: 100%;
            margin-top: 10px;
            background: #dc143c;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .admin-delete-btn:hover { background: #a00; }
        /* ===== COMPACT BAR — always visible ===== */
        .audio-compact-bar {

            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            cursor: pointer;
            background: rgba(72,62,50,0.4);
            border-bottom: 1px solid transparent;
            border-color: rgba(150,138,112,0.15);
            min-height: 44px;
        }

        .audio-compact-title {
            font-size: 16px;
            color: var(--gold);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .audio-compact-toggle {
            font-size: 14px;
            color: rgba(172,196,220,0.6);
            transition: transform 0.3s;
        }

        .audio-compact-toggle.expanded {
            transform: rotate(180deg);
        }

        /* Audio expandable wrapper — collapsed by default */
        .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: 14px 16px;
            cursor: pointer;
            background: rgba(72,62,50,0.08);
            border-bottom: 1px solid rgba(72,62,50,0.12);
            min-height: 44px;
        }

        .posts-compact-title {
            font-size: 16px;
            color: var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .posts-compact-toggle {
            font-size: 14px;
            color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);
            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: 6px; }
        .posts-expandable::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
        .posts-expandable::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

        /* Outer library page wrapper — stacks filter bar, sort bar, and
           card grid vertically. Kept separate from .posts-grid (the
           inner thumbnail grid) which used to share this element's
           class and broke once .posts-grid became a real CSS grid. */
        .posters-page-wrapper {
            display: block;
        }

        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 4px;
            padding: 8px;
        }

        .posts-thumb {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 2px;
            object-fit: cover;
            cursor: pointer;
            border: 1px solid rgba(141,89,39,0.3);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .posts-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            z-index: 2;
            position: relative;
        }

        .posts-count {
            font-size: 9px;
            color: rgba(0,0,0,0.1);
            padding: 4px 8px 6px;
            text-align: center;
        }

        /* ===== CARD CREATOR ===== */
        .card-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 8000;
            background: rgba(0,0,0,0.85);
            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: linear-gradient(135deg, rgba(40,36,24,0.7), rgba(28,24,16,0.8));
            color: #c8b878;
            border: 1px solid rgba(200,184,120,0.25);
            border-radius: 6px;
            margin-top: 10px;
            transition: all 0.2s;
        }
        .play-card-btn:hover { background: linear-gradient(135deg, rgba(48,44,28,0.8), rgba(36,32,20,0.9)); border-color: rgba(200,184,120,0.4); }
        .play-card-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .card-creator {
            background: #dcd0b4;
            border-radius: 12px;
            padding: 18px;
            max-width: 420px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            color: #3a2e1e;
            border: 1px solid rgba(160,130,80,0.3);
            box-shadow: inset 0 0 30px rgba(160,130,80,0.1), 0 8px 32px rgba(0,0,0,0.4);
        }

        .card-creator h3 {
            margin: 0 0 12px 0;
            font-family: var(--font-serif);
            font-size: 18px;
            text-align: center;
            color: #4a3620;
        }

        .card-creator label {
            display: block;
            font-family: var(--font-serif);
            font-size: 13px;
            margin: 8px 0 4px 0;
            color: #5a4a36;
        }

        .card-creator input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid rgba(160,130,80,0.35);
            border-radius: 4px;
            background: rgba(255,250,240,0.6);
            color: #3a2e1e;
            font-size: 14px;
            box-sizing: border-box;
        }

        .card-color-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 4px 0 6px;
        }

        .card-color-swatch {
            width: 26px;
            height: 26px;
            border-radius: 4px;
            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), inset 0 0 0 1px rgba(255,255,255,0.3);
        }
        .card-color-swatch.selected-2 {
            border-color: rgba(200,184,120,0.9);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(200,184,120,0.3);
        }
        .card-color-swatch.selected-3 {
            border-color: rgba(120,200,220,0.9);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(120,200,220,0.3);
        }

        .palette-section {
            margin: 8px 0 4px;
        }
        .palette-label {
            font-family: var(--font-serif);
            font-size: 10px;
            color: rgba(90,70,40,0.7);
            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: 4px;
            border: 2px solid rgba(160,130,80,0.4);
            background: rgba(200,184,120,0.08);
            cursor: pointer;
            transition: border-color 0.2s;
            position: relative;
        }
        .palette-slot.active-slot {
            border-color: rgba(160,130,80,0.9);
            box-shadow: 0 0 0 2px rgba(200,184,120,0.3);
        }
        .palette-slot-label {
            position: absolute;
            bottom: -14px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 8px;
            font-family: var(--font-serif);
            color: rgba(90,70,40,0.6);
            white-space: nowrap;
            letter-spacing: 0.05em;
        }
        .palette-slot-arrow {
            font-size: 14px;
            color: rgba(160,130,80,0.5);
        }
        .palette-preview-strip {
            height: 10px;
            border-radius: 3px;
            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: 6px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
            max-width: 100%;
        }

        .card-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .card-actions button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: var(--radius-sm);

            font-size: 14px;
            cursor: pointer;
        }

        .card-btn-generate {
            background: #333;
            color: #fff;
        }

        .card-btn-generate:disabled {
            background: #999;
            cursor: not-allowed;
        }

        .card-btn-save {
            background: rgb(48,128,155);
            color: #fff;
        }

        .card-btn-cancel {
            background: #eee;
            color: #333;
        }

        .card-status {

            font-size: 12px;
            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.05);
            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(0,0,0,0.9);
            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: #fff;

        }

        .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: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }
        /* ===== GAME OVERLAY — shared base for all 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(0,0,0,0.8); z-index: 7400; }
        .game-overlay.z-lobby { background: rgba(0,0,0,0.85); z-index: 7450; }
        .game-overlay.z-picker { background: rgba(0,0,0,0.9); z-index: 7500; }
        .game-overlay.z-coin { background: rgba(0,0,0,0.7); z-index: 50; }
        .game-overlay.z-result { background: rgba(0,0,0,0.75); z-index: 50; }
        .game-overlay.z-claim { background: rgba(0,0,0,0.85); z-index: 55; overflow-y: auto; }

        /* Shared overlay typography */
        .overlay-title {
            font-family: var(--font-serif);
            font-size: 18px;
            color: #c8b878;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
            letter-spacing: 0.1em;
            margin-bottom: 16px;
        }
        .overlay-subtitle {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin-bottom: 16px;
        }

        /* Shared overlay buttons */
        .overlay-btn {

            cursor: pointer;
            border-radius: 3px;
            transition: all 0.2s;
        }
        .overlay-btn-cancel {

            font-size: 11px;
            padding: 8px 16px;
            cursor: pointer;
            background: none;
            color: rgba(255,255,255,0.4);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 3px;
            margin-top: 16px;
        }
        .overlay-btn-cancel:hover {
            color: rgba(255,255,255,0.6);
            border-color: rgba(255,255,255,0.3);
        }

        /* ===== MAIN TABS ===== */
        .main-tab-bar {
            display: flex;
            gap: 0;
            margin-bottom: 0;
        }

        .main-tab {
            flex: 1;
            padding: 10px 12px;
            background: rgba(72,62,50,0.7);
            border: none;
            border-bottom: 2px solid rgba(150,138,112,0.15);
            color: var(--text-dim);

            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 40px;

        }

        .main-tab:first-child { border-radius: 4px 0 0 0; }
        .main-tab:last-child { border-radius: 0 4px 0 0; }

        .main-tab.active {
            background: rgba(74,58,34,0.9);
            color: var(--gold);
            border-bottom-color: var(--gold);
        }
        .main-tab:hover:not(.active) {
            background: rgba(72,62,50,0.85);
            color: var(--parch);
        }

        /* ===== SMALL SCREEN ADJUSTMENTS ===== */


        /* Desktop — restore larger padding and board height */


        /* === PVP GAME STYLES === */
        /* ===== FULLSCREEN GAME ===== */
        .game-fullscreen {
            position: fixed !important;
            inset: 0 !important;
            z-index: 9000 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-height: none !important;
            background-color: #0f1a24 !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(141,89,39,0.35);
            border: 1px solid rgba(8,29,60,0.4);
            box-shadow: inset 0 2px 4px rgba(8,29,60,0.5), inset 0 -1px 0 rgba(189,152,84,0.12);
        }
        .board-cell::before {
            content: '';
            display: block;
            padding-top: 100%;
        }
        .board-cell:hover { transform: scale(1.02); background: rgba(156,119,64,0.3); box-shadow: inset 0 2px 4px rgba(8,28,60,0.5), 0 0 8px rgba(189,152,84,0.2); }
        .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: 2px solid rgba(218,165,32,0.85);
        }
        .board-cell .cell-border.blue {
            border: 2px solid rgba(160,190,220,0.85);
        }
        /* Glow lives on the cell itself, not the child .cell-border —
           a child's box-shadow gets clipped by the parent's own
           overflow:hidden (needed here to clip the card image), but
           an element's own box-shadow is unaffected by its own
           overflow:hidden. */
        .board-cell:has(.cell-border.red) {
            box-shadow:
                inset 0 2px 4px rgba(8,29,60,0.5), inset 0 -1px 0 rgba(189,152,84,0.12),
                0 0 6px 2px rgba(218,165,32,0.5),
                0 0 14px 5px rgba(218,165,32,0.28),
                0 0 26px 9px rgba(218,165,32,0.12);
        }
        .board-cell:has(.cell-border.blue) {
            box-shadow:
                inset 0 2px 4px rgba(8,29,60,0.5), inset 0 -1px 0 rgba(189,152,84,0.12),
                0 0 6px 2px rgba(160,190,220,0.5),
                0 0 14px 5px rgba(160,190,220,0.28),
                0 0 26px 9px rgba(160,190,220,0.12);
        }

        /* === GAME LAYOUT — Responsive === */
        .game-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 16px;
            flex-shrink: 0;
            background: linear-gradient(180deg, rgba(8,28,60,0.9), rgba(12,57,99,0.75));
            border-bottom: 1px solid rgba(48,128,155,0.25);
            backdrop-filter: blur(6px);
            -webkit-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,28,60,0.1);
        }
        .game-board-wrapper {
            background: linear-gradient(145deg, rgba(189,152,84,0.9), rgba(141,89,39,0.93), rgba(112,84,44,0.95));
            border-radius: 4px;
            padding: 12px;
            border: 3px solid rgba(8,29,60,0.6);
            box-shadow: inset 0 1px 0 rgba(189,152,84,0.3), inset 0 -2px 6px rgba(8,29,60,0.5), 0 6px 24px rgba(8,29,60,0.6), 0 2px 0 rgba(141,89,39,0.2);
            width: 100%;
            max-width: min(85vh, 100%);
            aspect-ratio: 1;
        }
        .game-board-wrapper #boardGrid {
            width: 100%;
            height: 100%;
            gap: 8px;
        }
        .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, rgba(8,28,60,0.8), rgba(12,57,99,0.85));
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-left: 1px solid rgba(48,128,155,0.2);
        }
        .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: 4px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            border: 2px solid rgba(255,255,255,0.2);
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            box-sizing: border-box;
        }
        .board-cell.valid-target {
            background: rgba(96,176,60,0.1);
            border-color: rgba(96,176,60,0.4);
            box-shadow: inset 0 2px 4px rgba(12,8,28,0.3), 0 0 6px rgba(96,176,60,0.2);
            cursor: pointer;
        }


        .hand-card:hover { transform: translateX(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
        .hand-card.selected { border-color: rgba(200,184,120,0.9); box-shadow: 0 0 12px rgba(200,184,120,0.5); 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(0,0,0,0.85);
            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: 8px;
            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: #fff;
        }
        .card-detail-name {
            font-size: 18px; font-weight: bold; margin-bottom: 4px;
        }
        .card-detail-meta {
            font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 8px;
        }
        .card-detail-week {
            margin-top: 4px; color: #666;
        }
        .creator-link {
            cursor: pointer; text-decoration: underline;
        }
        .card-detail-stats {
            display: flex; gap: 12px; justify-content: center;
            font-size: 13px; color: rgba(255,255,255,0.8);
        }
        .card-detail-stats span { display: flex; flex-direction: column; align-items: center; }
        .card-detail-stats .stat-label { font-size: 9px; color: rgba(255,255,255,0.4); 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:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:50%; }
        .card-detail-nav-btn:disabled { opacity:0.3;cursor:default; }
        .card-detail-counter { font-size:11px;color:rgba(255,255,255,0.4); }

        /* Rarity borders on thumbnails — NES palette */
        .rarity-common { border: 2px solid rgba(64,80,74,0.6); } /* Lv1 coastland */
        .rarity-uncommon { border: 2px solid rgba(68,82,58,0.6); } /* Lv3 verdant */
        .rarity-rare { border: 2px solid rgba(144,124,86,0.7); } /* Lv5 highlands */
        .rarity-epic { border: 2px solid rgba(154,108,80,0.7); } /* Lv7 volcanic */
        .rarity-legendary {
            border: 2px solid rgba(146,166,184,0.8);
            box-shadow: 0 0 8px rgba(146,166,184,0.4);
        }
        .rarity-mythic {
            border: 2px solid rgba(76,62,90,0.8);
            box-shadow: 0 0 8px rgba(76,62,90,0.5);
        }
        /* Dual-biome borders for even levels */
        .rarity-coast-verd { border: 2px solid; border-image: linear-gradient(135deg, rgba(64,80,74,0.7), rgba(68,82,58,0.7)) 1; }
        .rarity-verd-high { border: 2px solid; border-image: linear-gradient(135deg, rgba(68,82,58,0.7), rgba(144,124,86,0.7)) 1; }
        .rarity-high-volc { border: 2px solid; border-image: linear-gradient(135deg, rgba(144,124,86,0.7), rgba(154,108,80,0.7)) 1; }
        .rarity-volc-frozen { border: 2px solid; border-image: linear-gradient(135deg, rgba(154,108,80,0.7), rgba(146,166,184,0.7)) 1; }

        /* Starter deck — dull iron/pewter border */
        .rarity-starter {
            border: 2px solid rgba(120,115,108,0.7);
            box-shadow: inset 0 0 4px rgba(90,86,80,0.3);
        }

        /* Starter Deck Reveal Overlay */
        .starter-reveal-overlay {
            position: fixed; inset: 0; z-index: 9500;
            background: rgba(8,20,35,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-serif);
            font-size: 20px; color: var(--gold);
            margin-bottom: 6px; letter-spacing: 2px;
            text-transform: uppercase;
        }
        .starter-reveal-subtitle {
            font-size: 13px; color: rgba(200,184,120,0.6);
            margin-bottom: 20px; text-align: center;
        }
        .starter-reveal-counter {
            font-family: var(--font-display);
            font-size: 14px; color: rgba(255,255,255,0.5);
            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: 4px;
            image-rendering: auto;
        }
        .starter-reveal-name {
            font-size: 18px; color: #fff;
            margin-bottom: 4px; text-align: center;
        }
        .starter-reveal-stats {
            font-size: 13px; color: rgba(255,255,255,0.5);
            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-serif);
            font-size: 14px; padding: 10px 24px;
            border-radius: 3px; 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.6); color: #fff;
            border-color: rgba(180,140,255,0.3);
        }
        .sr-keep-btn {
            background: rgba(60,120,80,0.6); color: #fff;
            border-color: rgba(100,200,120,0.3);
        }
        .starter-reveal-rerolls {
            font-size: 12px; color: rgba(255,255,255,0.4);
            margin-bottom: 8px;
        }
        .starter-reveal-skip {
            font-size: 12px; color: rgba(200,184,120,0.4);
            cursor: pointer; border: none; background: none;
            font-family: var(--font-serif);
            margin-top: 8px; text-decoration: underline;
        }
        .starter-reveal-skip:hover { color: rgba(200,184,120,0.7); }
        .starter-reveal-done {
            text-align: center;
        }
        .starter-reveal-done h2 {
            font-family: var(--font-serif);
            color: var(--gold); font-size: 22px;
            margin-bottom: 8px;
        }
        .starter-reveal-done p {
            color: rgba(255,255,255,0.6); font-size: 14px;
            margin-bottom: 20px;
        }
        .sr-done-btn {
            font-family: var(--font-serif);
            font-size: 15px; padding: 12px 32px;
            background: rgba(60,120,80,0.6); color: #fff;
            border: 1px solid rgba(100,200,120,0.3);
            border-radius: 3px; 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 indicators */
        .kard-official {
            outline: 2px solid rgba(189,152,84,0.5);
            outline-offset: 1px;
        }

        /* Sort bar */
        .book-sort-bar {
            display: flex; gap: 4px; padding: 4px 6px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            flex-wrap: wrap;
        }
        .book-sort-btn {
            font-size: 10px;
            padding: 3px 8px; border: 1px solid rgba(0,0,0,0.15);
            border-radius: 3px; background: transparent;
            cursor: pointer; color: #666; transition: all 0.15s;
        }
        .book-sort-btn.active {
            background: rgba(0,0,0,0.08); color: #000;
            border-color: rgba(0,0,0,0.3);
        }

        /* Filter bar (above sort bar) */
        .book-filter-bar {
            display: flex; flex-direction: column; gap: 4px;
            padding: 6px 6px 2px; border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        .book-filter-row {
            display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
        }
        .book-filter-label {
            font-size: 9px;
            color: #999; text-transform: uppercase; letter-spacing: 1px;
            min-width: 42px;
        }
        .book-filter-btn {
            font-size: 10px;
            padding: 2px 7px; border: 1px solid rgba(0,0,0,0.12);
            border-radius: 3px; background: transparent;
            cursor: pointer; color: #777; transition: all 0.15s;
        }
        .book-filter-btn.active {
            background: rgba(48,128,155,0.12); color: rgb(36,100,120);
            border-color: rgba(48,128,155,0.35);
        }
        .book-filter-btn:hover { border-color: rgba(0,0,0,0.25); }
        .book-creator-input {
            font-size: 10px;
            padding: 2px 6px; border: 1px solid rgba(0,0,0,0.15);
            border-radius: 3px; background: rgba(255,255,255,0.5);
            color: #333; width: 90px; outline: none;
        }
        .book-creator-input::placeholder { color: #aaa; }
        .book-creator-input:focus { border-color: rgba(48,128,155,0.5); }
        .book-filter-count {
            font-size: 9px;
            color: #aaa; margin-left: auto; padding-right: 2px;
        }

        /* Level filter pills */
        .book-level-pills {
            display: flex; gap: 2px; flex-wrap: wrap;
        }
        .book-level-pill {
            font-size: 9px;
            width: 18px; height: 18px; display: flex;
            align-items: center; justify-content: center;
            border: 1px solid rgba(0,0,0,0.1); border-radius: 3px;
            background: transparent; cursor: pointer; color: #888;
            transition: all 0.15s;
        }
        .book-level-pill.active {
            background: rgba(48,128,155,0.15); color: rgb(36,100,120);
            border-color: rgba(48,128,155,0.4); font-weight: bold;
        }
        .book-level-pill:hover { border-color: rgba(0,0,0,0.25); }
        .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: 14px 16px;
            cursor: pointer;
            background: rgba(72,62,50,0.4);
            border-bottom: 1px solid rgba(150,138,112,0.15);
            min-height: 44px;
        }
        .lb-compact-title {
            font-size: 16px;
            color: var(--gold);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .lb-compact-toggle {
            font-size: 14px;
            color: #555;
            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: 6px; }
        .lb-expandable::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
        .lb-expandable::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
        .lb-list { padding: 0; }
        .lb-entry {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            transition: background 0.15s;
        }
        .lb-entry:hover { background: rgba(0,0,0,0.03); }
        .lb-rank {


            font-size: 14px; font-weight: bold;
            color: rgb(48,128,155);
            min-width: 22px; text-align: right;
        }
        .lb-rank.gold { color: #d4a017; }
        .lb-rank.silver { color: #8a8a8a; }
        .lb-rank.bronze { color: #a0522d; }
        .lb-avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid rgba(0,0,0,0.1);
        }
        .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: #888;
        }
        .lb-streak {

            font-size: 16px; font-weight: bold;
            color: #d4a017;
            min-width: 36px; text-align: center;
        }
        .lb-streak-label {
            font-size: 8px; color: #aaa;
            text-transform: uppercase; letter-spacing: 0.5px;
            text-align: center;
        }
        .lb-empty {
            padding: 20px;
            text-align: center;

            font-size: 12px;
            color: #888;
        }

        /* Deck fan presentation */
        .deck-fan {
            display: flex; justify-content: center; gap: 4px;
            padding: 20px 0;
            perspective: 600px;
        }
        .deck-fan .fan-card {
            width: 64px; height: 64px;
            border-radius: 4px; overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            border: 2px solid rgba(200,184,120,0.3);
            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; }
        .deck-fan.animate .fan-card:nth-child(6) { animation-delay: 0.4s; }
        .deck-fan.animate .fan-card:nth-child(7) { animation-delay: 0.48s; }
        .deck-fan.animate .fan-card:nth-child(8) { animation-delay: 0.56s; }
        .deck-fan.animate .fan-card:nth-child(9) { animation-delay: 0.64s; }


        /* Picking hand grid */
        .picking-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            width: 100%;
            max-width: 340px;
            margin: 0 auto 12px;
        }


        .pick-card {
            position: relative;
            aspect-ratio: 1;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid rgba(200,184,120,0.25);
            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: rgba(200,184,120,0.5); }
        .pick-card.swap-marked {
            border-color: #e85040;
            box-shadow: 0 0 12px rgba(232,80,64,0.5), inset 0 0 20px rgba(232,80,64,0.15);
            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; }
        /* Swap animation */


        .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.2);
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .hand-card.reroll-marked .reroll-select { display: flex; }

        /* Capture animation system */


        .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 comparison popup — appears on the edge between attacker and captured card */
        .stat-clash {
            position: absolute;
            z-index: 20;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 2px 5px;
            border-radius: 3px;
            background: rgba(0,0,0,0.85);
            border: 1px solid rgba(200,184,120,0.35);
            font-family: var(--font-display);
            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: #5de85d; }
        .stat-clash .vs  { color: rgba(200,184,120,0.5); font-size: 8px; }
        .stat-clash .def { color: #e85d5d; }
        /* Position variants — placed on the edge between two cells */
        .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;
        }
        /* Placed card landing impact */


        .board-cell.card-landing {
            animation: cardLand 0.3s ease-out;
            z-index: 11;
        }
        /* Score change pulse */


        .score-pop,
        .score-pulse {
            animation: scorePulse 0.4s ease-out;
        }

        /* Card fly animation */
        .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: 4px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        }
        .card-flying img {
            width: 100%; height: 100%; object-fit: cover;
        }

        /* Opponent activity */


        .opponent-thinking {
            animation: opponentThink 1.5s ease-in-out infinite;
        }

        /* Coin flip animation */


        .coin-spinning {
            animation: coinSpin 1.5s ease-out;
        }

        /* Result screen animations */


        .result-animate {
            animation: resultBounce 0.5s ease-out;
        }

        /* Turn indicator pulse */


        .your-turn {
            animation: turnPulse 1.5s ease-in-out infinite;
            color: rgb(48,120,36);
        }
        .turn-timer {
            display: inline-block;
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
            color: rgba(189,152,84,0.9);
            margin-left: 8px;
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }
        .turn-timer.warning {
            color: #d4a030;
            text-shadow: 0 0 4px rgba(212,160,48,0.3);
        }
        .turn-timer.danger {
            color: #d07030;
            text-shadow: 0 0 6px rgba(208,112,48,0.4);
            animation: timerPulseSlow 1s ease-in-out infinite;
        }
        .turn-timer.urgent {
            color: #c84040;
            text-shadow: 0 0 10px rgba(200,64,64,0.6);
            animation: timerPulseFast 0.4s ease-in-out infinite;
            font-size: 16px;
        }


        .drag-ghost {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.85;
            transform: scale(1.1);
            transition: none;
            border-radius: 4px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        }
        .board-cell.drop-highlight {
            box-shadow: inset 0 0 12px rgba(189,152,84,0.6), 0 0 8px rgba(189,152,84,0.3) !important;
            background: rgba(189,152,84,0.2) !important;
        }

        /* Custom scroll thumb — page scrollbar */
        /* ===== ANON_ID LOGIN ===== */
        .sign-in-row {
            width: 100%;
            max-width: min(900px, 100%);
            display: flex;
            justify-content: flex-end;
            padding: 4px 0;
        }
        .anon-id-btn {
            background: rgba(12,8,28,0.85);
            border: 1px solid rgba(189,152,84,0.4);
            border-radius: 16px;
            padding: 4px 12px;
            color: #c8b878;

            font-size: 12px;
            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: rgba(12,8,28,0.95);
            border-color: rgba(189,152,84,0.7);
        }
        .anon-id-btn .anon-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #c8b878;
        }
        .anon-id-btn.logged-in .anon-dot {
            background: #4CAF50;
        }

        .anon-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 8000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(4px);
        }
        .anon-modal-overlay.active {
            display: flex;
        }
        .anon-modal {
            background: #1a1428;
            border: 1px solid rgba(189,152,84,0.4);
            border-radius: 12px;
            padding: 24px;
            width: 300px;
            max-width: 90vw;
            color: #e8e0d0;

        }
        .anon-modal h3 {
            margin: 0 0 16px 0;
            font-size: 16px;
            color: #c8b878;
            text-align: center;
        }
        .anon-modal input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(189,152,84,0.3);
            border-radius: 6px;
            color: #e8e0d0;

            font-size: 14px;
            outline: none;
            box-sizing: border-box;
        }
        .anon-modal input:focus {
            border-color: rgba(189,152,84,0.6);
        }
        .anon-modal-hint {
            font-size: 11px;
            color: #888;
            margin: 6px 0 16px 0;
        }
        .anon-modal-error {
            font-size: 12px;
            color: #e85050;
            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: 8px;
            border-radius: 6px;
            border: 1px solid rgba(189,152,84,0.3);

            font-size: 13px;
            cursor: pointer;
        }
        .anon-modal-actions .anon-cancel {
            background: transparent;
            color: #888;
        }
        .anon-modal-actions .anon-submit {
            background: rgba(189,152,84,0.2);
            color: #c8b878;
        }
        .anon-modal-actions .anon-submit:hover {
            background: rgba(189,152,84,0.35);
        }

        .anon-profile {
            text-align: center;
        }
        .anon-profile-name {
            font-size: 16px;
            color: #c8b878;
            margin-bottom: 4px;
        }
        .anon-profile-stats {
            font-size: 11px;
            color: #888;
            margin-bottom: 16px;
        }
        .anon-logout {
            background: transparent;
            border: 1px solid rgba(200,80,80,0.3);
            color: #c87070;
            padding: 6px 16px;
            border-radius: 6px;

            font-size: 12px;
            cursor: pointer;
        }
        .anon-logout:hover {
            background: rgba(200,80,80,0.1);
        }

        /* ══════════════════════════════════════════
           v7.1 ARENA LAYER — wooden panels over ocean
           ══════════════════════════════════════════ */

        /* Wooden Panel — shared material */
        .wood-panel {
          position:relative;
          background:
            radial-gradient(ellipse 70% 60% at 50% 40%, rgba(110,98,78,0.15) 0%, transparent 100%),
            repeating-linear-gradient(92deg,transparent 0px,transparent 4px,rgba(110,98,78,0.08) 4px,rgba(110,98,78,0.08) 5px,transparent 5px,transparent 12px),
            repeating-linear-gradient(88deg,transparent 0px,transparent 7px,rgba(72,62,50,0.06) 7px,rgba(72,62,50,0.06) 8px,transparent 8px,transparent 18px),
            linear-gradient(180deg, var(--panel-warm) 0%, var(--panel-mid) 50%, var(--panel-warm) 100%);
          border:2px solid var(--panel-edge);
          border-radius:3px;
          box-shadow:
            0 4px 16px rgba(0,0,0,0.5),
            0 1px 4px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(150,138,112,0.12),
            inset 0 -1px 0 rgba(0,0,0,0.2);
          overflow:hidden;
        }
        .wood-panel::before {
          content:'';position:absolute;inset:0;
          background-image:
            repeating-linear-gradient(0deg,rgba(0,0,0,0.04) 0px,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 5px),
            repeating-linear-gradient(90deg,rgba(0,0,0,0.04) 0px,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 5px);
          background-size:5px 5px;
          pointer-events:none;z-index:0;
        }
        .wood-panel::after {
          content:'';position:absolute;inset:0;
          background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
          background-size:100px 100px;
          image-rendering:pixelated;
          pointer-events:none;z-index:0;
        }
        .wood-panel > * { position:relative; z-index:1; }
        .parchment-panel > * { position:relative; z-index:1; }
        .leather-panel {
          position:relative;
          overflow:hidden;
          flex-shrink:0;
        }
        .leather-panel > * { position:relative; z-index:1; }

        /* Foliage panel — jungle canopy material */
        .foliage-panel {
          position:relative;
          overflow:hidden;
          border:2px solid #1a2e14;
          border-radius:3px;
          box-shadow:
            0 4px 16px rgba(0,0,0,0.5),
            0 1px 4px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.06),
            inset 0 -1px 0 rgba(0,0,0,0.3);
        }
        .foliage-panel > * { position:relative; z-index:1; }

        /* Stone panel — mossy rock material */
        .stone-panel {
          position:relative;
          overflow:hidden;
          border:2px solid #2a2826;
          border-radius:3px;
          box-shadow:
            0 4px 16px rgba(0,0,0,0.5),
            0 1px 4px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.06),
            inset 0 -1px 0 rgba(0,0,0,0.3);
        }
        .stone-panel > * { position:relative; z-index:1; }

        /* Material canvas — procedural texture behind panel content */
        .material-canvas {
          position:absolute;
          top:0; left:0;
          width:100%; height:100%;
          display:block;
          image-rendering:pixelated;
          image-rendering:crisp-edges;
          pointer-events:none;
          z-index:0 !important;
        }

        /* Panel header colors per material */
        .wood-panel .panel-header {
          color:rgba(30,24,16,0.7);
          text-shadow:0 1px 0 rgba(200,190,170,0.3);
        }
        .foliage-panel .panel-header {
          color:rgba(180,220,140,0.85);
          text-shadow:0 2px 8px rgba(0,0,0,0.9);
        }
        .stone-panel .panel-header {
          color:rgba(180,175,165,0.85);
          text-shadow:0 2px 8px rgba(0,0,0,0.9);
        }

        /* Brass corner rivets */
        .rivet {
          position:absolute;width:7px;height:7px;border-radius:50%;z-index:3;
          background:radial-gradient(circle at 35% 35%,var(--brass-light),var(--brass),var(--brass-dark));
          border:1px solid rgba(0,0,0,0.5);
          box-shadow:inset 0 1px 0 rgba(212,173,106,0.5),0 1px 2px rgba(0,0,0,0.5);
        }
        .rivet.tl{top:5px;left:5px}.rivet.tr{top:5px;right:5px}
        .rivet.bl{bottom:5px;left:5px}.rivet.br{bottom:5px;right:5px}

        /* Panel header — brass tab style */
        .panel-header {
          font-family: var(--font-serif);font-size:1.3rem;letter-spacing:0.18em;
          color:var(--gold);padding:0.5rem 0.7rem;
          background:linear-gradient(180deg,rgba(110,98,78,0.25) 0%,transparent 100%);
          border-bottom:1px solid rgba(150,138,112,0.15);
          text-shadow:0 2px 4px rgba(0,0,0,0.7);
        }

        /* Arena layer layout — single-column centered */
        .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 */
        .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-serif);font-size:1.6rem;letter-spacing:0.25em;color:var(--gold);text-shadow:0 1px 4px rgba(0,0,0,0.5)}
        .v7-topbar-streak{font-style:italic;font-size:0.8rem;color:var(--text-dim)}
        .v7-topbar-right{display:flex;align-items:center;gap:0.5rem}
        .topbar-icon-btn{
            width:36px;height:36px;border-radius:50%;
            display:flex;align-items:center;justify-content:center;
            font-size:1rem;line-height:1;
            background:linear-gradient(145deg, var(--panel-wood-warm), var(--panel-wood-dark));
            border:1px solid rgba(225,147,33,0.35);
            box-shadow:0 2px 8px rgba(0,0,0,0.4);
            cursor:pointer;transition:transform 0.15s ease;
            flex-shrink:0;
        }
        .topbar-icon-btn:hover{transform:scale(1.08)}
        .topbar-icon-btn:active{transform:scale(0.94)}
        

        /* Hero Carousel — scrollable track of up to 20 kards */
        .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:rgba(200,184,120,0.5);
          font-size:22px;cursor:pointer;padding:0 4px;z-index:5;
          transition:color 0.2s;flex-shrink:0;
          font-family: var(--font-serif);
        }
        .hero-arrow:hover { color:rgba(200,184,120,0.9); }
        .hero-track {
          display:flex;align-items:center;gap:6px;
          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:60px;height:60px;
          border-radius:5px;
          overflow:hidden;
          border:2px solid rgba(200,184,120,0.15);
          box-shadow:0 4px 16px rgba(0,0,0,0.4);
          transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1);
          cursor:pointer;
          position:relative;
          background:rgba(26,20,14,0.6);
          scroll-snap-align:center;
          opacity:0.45;
          filter:brightness(0.65);
        }
        .hero-card img {
          width:100%;height:100%;object-fit:cover;display:block;
        }
        .hero-card.active {
          width:96px;height:96px;
          z-index:3;
          opacity:1;
          filter:brightness(1);
          border-color:rgba(200,184,120,0.35);
          box-shadow:0 4px 20px rgba(0,0,0,0.5), 0 0 16px rgba(200,184,120,0.1);
        }
        .hero-card:hover:not(.active) { opacity:0.8; filter:brightness(0.85); }
        .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-serif);font-size:9px;
          color:rgba(200,184,120,0.55);letter-spacing:0.15em;
        }

        /* Dual CTA buttons */
        .cta-row {
          display:flex;gap:10px;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:12px 10px 10px;
          border-radius:4px;
          cursor:pointer;
          font-family: var(--font-serif);
          transition:all 0.2s ease;
          border:1px solid rgba(200,184,120,0.25);
          text-decoration:none;
          background:linear-gradient(180deg, rgba(200,184,120,0.12), rgba(160,140,80,0.08));
          color:var(--gold);
        }
        .cta-btn:active { transform:scale(0.96); }
        .cta-btn .cta-icon { font-size:20px; margin-bottom:3px; }
        .cta-btn .cta-label { font-size:14px; letter-spacing:0.12em; }
        .cta-btn .cta-sub { font-size:8px; color:var(--text-dim); letter-spacing:0.06em; margin-top:2px; text-transform:uppercase; }
        .cta-btn.cta-play {
          background:linear-gradient(180deg, rgba(200,184,120,0.18), rgba(160,140,80,0.1));
          border-color:rgba(200,184,120,0.3);
        }
        .cta-btn.cta-play:hover { border-color:rgba(200,184,120,0.5); background:linear-gradient(180deg, rgba(200,184,120,0.25), rgba(160,140,80,0.15)); }
        .cta-btn.cta-create {
          background:linear-gradient(180deg, rgba(200,184,120,0.1), rgba(160,140,80,0.06));
          border-color:rgba(200,184,120,0.2);
        }
        .cta-btn.cta-create:hover { border-color:rgba(200,184,120,0.45); background:linear-gradient(180deg, rgba(200,184,120,0.2), rgba(160,140,80,0.12)); }

        /* Collapsible Log */
        .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, rgba(56,48,40,0.95));
          pointer-events:none;
        }
        /* Challenge bar — hidden on home, shown in PvP lobby overlay */
        .challenge-bar { display:none; }

        /* Grid recap overlay — shown when idle */
        .grid-recap-overlay {
          position:absolute;bottom:4px;left:0;right:0;
          text-align:center;padding:4px 8px;
          pointer-events:none;
        }
        .recap-label {
          font-size:10px;
          color:rgba(200,184,120,0.65);letter-spacing:0.06em;
        }
        .arena-layer.game-active .grid-recap-overlay { display:none !important; }

        /* Top 3 leaderboard 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-serif);
          font-size:10px;
          color:rgba(200,184,120,0.5);
          background:rgba(56,48,38,0.25);
          border:1px solid rgba(150,138,112,0.08);
          border-radius:3px;
          flex-shrink:0;
          letter-spacing:0.08em;
        }
        .top3-label { font-size:10px; flex-shrink:0; }
        .top3-entries { color:rgba(232,220,192,0.6); 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 centered, compact for dashboard */
        .arena-row {
          display:none;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;
          background:#4a4a4a;
          border-radius:4px;
        }
        .grid-panel .panel-header { text-align:center;font-size:0.7rem;color:rgba(200,184,120,0.5);letter-spacing:0.15em; }
        .kardic-grid {
          display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
          padding:0.2rem;
        }
        .grid-cell {
          aspect-ratio:1;
          background:rgba(30,30,30,0.5);
          border:1px solid rgba(220,220,220,0.12);
          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.3);
        }
        .grid-cell:hover{border-color:rgba(230,230,230,0.28);background:rgba(42,42,42,0.7)}
        .grid-cell.has-card{background:rgba(55,55,55,0.5);border-color:rgba(220,220,220,0.18)}

        /* Claiming screen cards */
        .claim-card {
            width: 64px; height: 64px; border-radius: 6px; cursor: pointer;
            border: 2px solid rgba(255,255,255,0.15); 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: rgba(218,165,32,0.6); transform: scale(1.08); }
        .claim-card.selected { border-color: rgba(200,184,120,0.9); box-shadow: 0 0 12px rgba(200,184,120,0.5); 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;
        }
        /* Hand picker card styles */
        .hpick-card {
            width: 72px; height: 72px; border-radius: 6px; cursor: pointer;
            border: 2px solid rgba(255,255,255,0.15); 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: rgba(200,184,120,0.5); transform: scale(1.05); }
        .hpick-card.picked { border-color: rgba(200,184,120,0.9); box-shadow: 0 0 10px rgba(200,184,120,0.5); 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;
        }

        #customizeDetail { text-align: center; }
        /* Profile picture cropper */
        .pfp-crop-frame {
            width: 240px; height: 240px; margin: 0 auto;
            position: relative; overflow: hidden;
            border-radius: 8px;
            background: rgba(0,0,0,0.4);
            touch-action: none;
            cursor: grab;
        }
        .pfp-crop-frame:active { cursor: grabbing; }
        .pfp-crop-frame img {
            position: absolute;
            top: 50%; left: 50%;
            transform-origin: center center;
            max-width: none;
            pointer-events: none;
        }
        .pfp-crop-frame::after {
            content: '';
            position: absolute; inset: 0;
            border-radius: 50%;
            box-shadow: 0 0 0 1000px rgba(0,0,0,0.55);
            border: 2px solid rgba(255,255,255,0.6);
            pointer-events: none;
        }
        .pfp-crop-zoom-row {
            display: flex; align-items: center; gap: 10px;
            max-width: 240px; margin: 14px auto 0;
        }
        .pfp-crop-zoom-row input[type=range] { flex: 1; }
        .pfp-crop-zoom-icon { font-size: 16px; color: var(--text-dim); }

        /* Opens from within either the Settings modal (z-index 8000) or
           the onboarding wizard (its own separate overlay, z-index 9500)
           — needs to render above both */
        #pfpCropOverlay { z-index: 9800; }

        .customize-preview {
            width: 140px; height: 140px; object-fit: cover;
            border-radius: 8px; border: 2px solid rgba(200,184,120,0.4);
        }
        .customize-name {
            font-family: var(--font-display); font-size: 15px; color: var(--gold-bright);
            margin-top: 10px;
        }
        .customize-stat-line {
            font-family: var(--font-serif); font-size: 12px; color: var(--text-dim);
            margin-top: 4px;
        }
        .hpick-card .hpick-level {
            position: absolute; top: 2px; left: 4px; font-size: 9px;
            color: rgba(200,184,120,0.8); 
            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(150,138,112,0.15)}
        .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),0 0 8px rgba(0,0,0,0.8);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(0,0,0,0.15);border:2px solid rgba(20,18,16,0.6)}
        .recap-tint.blue{background:rgba(232,220,192,0.1);border:2px solid rgba(232,220,192,0.45)}

        /* Leaderboard overlay on grid — transparent, hidden during game */
        .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 3px 3px;
          pointer-events:none;
        }
        .grid-lb-overlay .lb-list {
          flex:1;overflow-y:auto;padding:0.3rem 0.5rem;
          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-list { padding:0.2rem 0.15rem; }
        .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(150,138,112,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(72,62,50,0.15)}
        .grid-lb-overlay .lb-rank {
          width:14px;text-align:center;
          font-family: var(--font-serif);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-serif);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-serif);font-size:1.1rem;letter-spacing:0.08em;
          padding:0.4em 0.9em;
          border:1px solid rgba(150,138,112,0.2);
          background:rgba(56,48,38,0.5);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(74,58,34,0.4)}
        .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:rgba(56,48,38,0.35);border:1px solid rgba(150,138,112,0.06);
          border-radius:2px;cursor:pointer;transition:all 0.3s ease;font-size:0.78rem;
        }
        .ch-row:hover{border-color:rgba(150,138,112,0.2);background:rgba(56,48,38,0.5)}
        .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-serif);font-size:1rem;letter-spacing:0.06em;color:var(--copper);padding:0.15em 0.5em;border:1px solid rgba(176,112,72,0.2);border-radius:1px}

        /* Log section — centered full width */
        .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:0.7rem;color:rgba(200,184,120,0.5);letter-spacing:0.15em; }

        /* Hand drawer — slides up from bottom during gameplay */
        .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, rgba(12,34,48,0.95), rgba(8,24,36,0.98));
          border-top:1px solid rgba(176,141,87,0.25);
          border-radius:10px 10px 0 0;
          backdrop-filter:blur(8px);
          -webkit-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 (card backs above the board) */
        .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-display);
          font-size: 10px;
          font-weight: 700;
          color: rgba(176,141,87,0.5);
          align-self: center;
          margin-left: 6px;
          letter-spacing: 0.05em;
        }
        .opp-card-back {
          width:40px;height:40px;
          border-radius:3px;
          background:linear-gradient(135deg, var(--panel-wood-dark), var(--panel-wood-mid), var(--panel-wood-dark));
          border:1.5px solid rgba(176,141,87,0.35);
          box-shadow:0 1px 4px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.3);
          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(176,141,87,0.2);
          border-radius:2px;
        }
        .opp-card-back::after {
          content:'K';position:absolute;inset:0;
          display:flex;align-items:center;justify-content:center;
          font-family: var(--font-serif);font-size:14px;
          color:rgba(176,141,87,0.3);
        }


        .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:rgba(200,184,120,0.9) !important;
          box-shadow:0 0 12px rgba(200,184,120,0.5) !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: hide non-game content */
        .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; /* reserve space for the 2-row hand drawer */
        }
        .arena-layer.game-active .arena-row {
          display:flex;
          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,rgba(36,34,36,0.95));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(72,62,50,0.2)}
        .feed-thumb{width:24px;height:24px;flex-shrink:0;border:1px solid rgba(150,138,112,0.08);border-radius:1px;background:rgba(26,20,14,0.5);display:flex;align-items:center;justify-content:center;font-size:0.7rem;overflow:hidden}
        .feed-thumb img{width:100%;height:100%;object-fit:cover}
        .feed-thumb.type-claim{border-color:rgba(139,58,58,0.2)}
        .feed-thumb.type-mercy{background:rgba(100,160,100,0.15);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-serif);font-size:14px;color:rgba(200,184,120,0.8)}
        .match-queuing-sub{font-size:10px;color:rgba(255,255,255,0.4)}
        .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(180,120,60,0.15);font-size:0.8rem;display:flex;align-items:center;justify-content:center}
        .feed-text{flex:1;min-width:0}
        .feed-action{font-family:'IM Fell English',serif;font-size:0.75rem;color:rgba(232,220,192,0.8);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-serif);font-size:0.6rem;color:var(--gold);opacity:0.5;letter-spacing:0.04em}

        /* Arena layer hides when a feature-view is open */
        .arena-layer.hidden { opacity:0; pointer-events:none; }

        /* Logged-out state: carousel is the hero, grid/log are secondary */
        .arena-layer.logged-out .hero-carousel {
          max-width:680px;
          margin-bottom:6px;
        }
        /* Inactive cards: visible but clearly smaller — single subtle dim */
        .arena-layer.logged-out .hero-card {
          width:68px !important;height:85px !important;
          opacity:0.65;
          filter:brightness(0.8);
        }
        /* Active card: meaningfully larger, full brightness */
        .arena-layer.logged-out .hero-card.active {
          width:108px !important;height:128px !important;
          opacity:1;
          filter:brightness(1);
        }
        .arena-layer.logged-out .hero-label {
          font-size:11px;
          color:rgba(200,184,120,0.75);
          letter-spacing:0.2em;
          margin-bottom:2px;
        }
        /* Create CTA: elevated gold */
        .arena-layer.logged-out .cta-create {
          background:linear-gradient(180deg, rgba(200,184,120,0.22), rgba(160,140,80,0.15));
          border-color:rgba(200,184,120,0.5);
        }
        .arena-layer.logged-out .cta-create .cta-label {
          color:var(--gold-bright);
        }
        /* Grid: very subtle dim only */
        .arena-layer.logged-out .arena-row {
          opacity:0.82;
          transition: opacity 0.3s ease;
        }
        .arena-layer.logged-out .log-section {
          opacity:0.82;
          transition: opacity 0.3s ease;
        }
        @media (max-width:600px) {
          .arena-layer.logged-out .hero-card { width:54px !important;height:54px !important; }
          .arena-layer.logged-out .hero-card.active { width:88px !important;height:88px !important; }
        }
        @media (min-width:601px) and (max-width:1023px) {
          .arena-layer.logged-out .hero-card { width:72px !important;height:72px !important; }
          .arena-layer.logged-out .hero-card.active { width:120px !important;height:120px !important; }
        }
        @media (min-width:1024px) {
          .arena-layer.logged-out .hero-card { width:80px !important;height:80px !important; }
          .arena-layer.logged-out .hero-card.active { width:140px !important;height:140px !important; }
        }

        /* Arena responsive */


        /* ═══════════════════════════════════════
           PHASE 5 — Extracted inline style classes
           ═══════════════════════════════════════ */

        /* Score bar */
        .score-label {

            font-size: 0.85rem;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .score-label.red { color: rgba(255,255,255,0.9); }
        .score-label.blue { color: rgba(200,184,120,0.7); }
        .turn-indicator {

            font-size: 0.75rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 4px rgba(0,0,0,0.6);
        }

        /* Play menu buttons */
        .play-menu-btn {

            font-size: 13px;
            padding: 16px 28px;
            cursor: pointer;
            border-radius: 3px;
            min-width: 140px;
            border: 1px solid;
        }
        .play-menu-btn.ai {
            background: linear-gradient(135deg, rgba(42,100,170,0.4), rgba(30,70,130,0.5));
            color: #8ac4ff;
            border-color: rgba(100,160,220,0.4);
        }
        .play-menu-btn.pvp {
            background: linear-gradient(135deg, rgba(170,60,42,0.4), rgba(140,40,30,0.5));
            color: #ff9080;
            border-color: rgba(200,100,80,0.4);
        }
        .play-menu-btn-icon { font-size: 20px; margin-bottom: 4px; }
        .play-menu-btn-label { font-size: 14px; font-family: var(--font-serif); }
        .play-menu-btn-sub { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
        .play-menu-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }

        /* AI mode select */
        .ai-mode-title {

            font-size: 20px;
            font-weight: bold;
            color: #c8b878;
            margin-bottom: 6px;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
        }
        .ai-diff-row { display: flex; gap: 6px; margin-bottom: 18px; align-items: center; }
        .ai-diff-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-right: 4px; }
        .ai-diff-btn {
            font-family: var(--font-serif);
            font-size: 11px;
            padding: 4px 12px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid;
        }
        .ai-diff-btn.easy { background: rgba(80,160,80,0.15); color: rgba(120,200,120,0.6); border-color: rgba(80,160,80,0.25); }
        .ai-diff-btn.medium { background: rgba(200,184,120,0.25); color: #c8b878; border-color: rgba(200,184,120,0.5); }
        .ai-diff-btn.hard { background: rgba(200,80,60,0.15); color: rgba(200,100,80,0.6); border-color: rgba(200,80,60,0.25); }
        .ai-mode-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
        .ai-mode-btn {

            font-size: 13px;
            padding: 14px 24px;
            cursor: pointer;
            border-radius: 8px;
            min-width: 140px;
            border: 1px solid;
        }
        .ai-mode-btn.official {
            background: linear-gradient(135deg, rgba(170,130,42,0.4), rgba(130,95,30,0.5));
            color: #d4ad6a;
            border-color: rgba(180,140,60,0.4);
        }
        .ai-mode-btn-label { font-size: 16px; margin-bottom: 4px; }
        .ai-mode-btn-sub { font-size: 10px; color: rgba(255,255,255,0.5); }

        /* PvP lobby */
        .pvp-lobby-content { width: 100%; max-width: 400px; }
        .pvp-create-btn {
            width: 100%;
            font-family: var(--font-serif);
            font-size: 14px;
            padding: 12px;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(170,60,42,0.4), rgba(140,40,30,0.5));
            color: #ff9080;
            border: 1px solid rgba(200,100,80,0.4);
            border-radius: 6px;
            margin-bottom: 12px;
            letter-spacing: 0.06em;
        }
        .challenge-list { display: flex; flex-direction: column; gap: 6px; }

        /* Hand picker */
        .picker-title {

            font-size: 18px;
            font-weight: bold;
            color: #c8b878;
            margin-bottom: 4px;
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
        }
        .picker-subtitle {

            font-size: 11px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 4px;
        }
        .picker-count {

            font-size: 13px;
            color: #d4ad6a;
            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 action buttons (shared) */
        .game-btn {

            font-size: 12px;
            cursor: pointer;
            border-radius: 6px;
            border: 1px solid;
        }
        .game-btn-sm { padding: 8px 20px; }
        .game-btn-md { padding: 10px 24px; }
        .game-btn.confirm { background: linear-gradient(135deg, rgba(42,170,102,0.6), rgba(36,140,84,0.7)); color: #fff; border-color: rgba(42,170,102,0.4); font-weight: bold; }
        .game-btn.confirm:disabled { opacity: 0.4; }
        .game-btn.rematch { background: rgba(42,170,102,0.6); color: #fff; border-color: rgba(42,170,102,0.4); }
        .game-btn.back { background: rgba(0,0,0,0.5); color: #fff; border-color: rgba(255,255,255,0.3); }
        .game-btn.cancel-challenge { background: rgba(200,60,40,0.3); color: #e88070; border-color: rgba(232,80,64,0.4); }
        .game-btn.mercy { background: rgba(0,0,0,0.5); color: #fff; border-color: rgba(255,255,255,0.3); }
        .game-btn.claim-confirm { background: rgba(218,165,32,0.6); color: #fff; border-color: rgba(218,165,32,0.4); font-weight: bold; }
        .game-btn.sudden-death { font-size: 14px; padding: 10px 24px; background: rgba(218,165,32,0.8); color: #fff; border: none; border-radius: 6px; }
        .game-btn.swap { background: linear-gradient(135deg, rgba(232,80,64,0.15), rgba(200,60,40,0.25)); color: #e88070; border-color: rgba(232,80,64,0.4); }
        .game-btn.ready { background: linear-gradient(135deg, rgba(42,170,102,0.6), rgba(36,140,84,0.7)); color: #fff; border-color: rgba(42,170,102,0.4); font-weight: bold; }
        .game-btn.new-hand { background: rgba(42,170,102,0.4); color: #aef0c0; border-color: rgba(42,170,102,0.4); border-radius: 4px; padding: 6px 16px; }
        .game-btn.exit { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); border-radius: 4px; padding: 6px 16px; }

        /* Result / claim screen */
        .result-title { font-size: 32px; font-weight: bold; text-shadow: 0 2px 8px rgba(0,0,0,0.5); margin-bottom: 8px; }
        .result-subtitle { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
        .result-streak { font-size: 14px; color: #fff; 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: 3px; object-fit: cover; border: 2px solid rgba(218,165,32,0.5); box-shadow: 0 0 8px rgba(218,165,32,0.3); }
        .result-claim-text { font-size: 14px; color: #fff; 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: rgba(255,255,255,0.7); margin-bottom: 12px; text-align: center; }
        .rematch-timer { color: #DAA520; 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(255,255,255,0.3); background: transparent; transition: background 0.3s, border-color 0.3s; }
        .round-pips .pip.won { background: #DAA520; border-color: #DAA520; }
        .round-pips .pip.lost { background: #c33; border-color: #c33; }
        .round-pips .pip-vs { font-size: 11px; color: rgba(255,255,255,0.4); margin: 0 4px; }
        .claim-title { font-size: 22px; font-weight: bold; color: #DAA520; text-shadow: 0 2px 8px rgba(0,0,0,0.5); margin-bottom: 4px; }
        .claim-subtitle { font-size: 13px; color: rgba(255,255,255,0.5); 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 flip */
        .coin-image { width: 120px; height: 120px; margin-bottom: 12px; }
        .coin-result { font-size: 16px; font-weight: bold; color: #fff; }

        .game-hand-hint { font-size: 10px; text-align: center; color: rgba(255,255,255,0.5); margin-bottom: 4px; }

        /* Card creator tool buttons */
        .cc-tool-btn {
            height: 36px;
            padding: 0 8px;
            font-size: 12px;
            cursor: pointer;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: #000;

            transition: background 0.15s;
        }
        .cc-tool-btn-sq { width: 38px; padding: 0; font-size: 15px; }
        .cc-tool-btn-undo-redo { opacity: 0.4; transition: opacity 0.15s; }
        .cc-icon-btn {
            width: 36px;
            height: 34px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: #000;
        }
        .cc-icon-btn-sm { font-size: 14px; }
        .cc-icon-btn.active { background: rgba(200,184,120,0.35); border-color: rgba(200,184,120,0.6); }
        .cc-zoom-label { display: inline-block; width: 44px; text-align: center; font-size: 12px; color: rgba(0,0,0,0.7); }
        .cc-rotation-label { display: inline-block; width: 36px; font-size: 11px; color: rgba(0,0,0,0.6); }
        .cc-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.12); 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: rgba(0,0,0,0.5); }
        .cc-range-input { width: 120px; vertical-align: middle; accent-color: rgb(189,152,84); }
        .cc-drag-hint { font-size: 10px; color: rgba(0,0,0,0.4); text-align: center; margin-top: 2px; }
        .cc-crop-actions { text-align: center; margin-bottom: 6px; }
        .cc-crop-apply { height: 34px; padding: 0 16px; font-size: 12px; cursor: pointer; border-radius: 6px; border: 1px solid rgba(100,200,80,0.4); background: rgba(48,120,36,0.35); color: #1a5c10; margin-right: 6px; }
        .cc-crop-cancel { height: 34px; padding: 0 16px; font-size: 12px; cursor: pointer; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); color: #000; }
        .cc-rotation-slider { width: 140px; vertical-align: middle; accent-color: rgb(189,152,84); }

        /* Book page: Drops */
        .drops-page { padding: 16px; }
        .drops-header { text-align: center; margin-bottom: 20px; }
        .drops-next-label { font-family: var(--font-serif); font-size: 12px; color: rgba(72,62,50,0.45); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); letter-spacing: 0.1em; margin-bottom: 6px; }
        .drops-countdown { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); letter-spacing: 0.05em; }
        .drops-utc-note { font-size: 10px; color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); 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: rgba(189,152,84,0.08); border: 1px solid rgba(189,152,84,0.15); border-radius: 6px; }
        .drops-stat-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); }
        .drops-stat-label { font-size: 9px; color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); letter-spacing: 0.08em; }
        .drops-eligibility { text-align: center; padding: 10px; background: rgba(72,62,50,0.04); border-radius: 6px; margin-bottom: 20px; font-size: 12px; color: rgba(72,62,50,0.5); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); }
        .drops-pool-title { font-family: var(--font-serif); font-size: 12px; color: var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); letter-spacing: 0.12em; margin-bottom: 8px; }
        .drops-pool-grid { display: flex; gap: 6px; flex-wrap: wrap; }

        /* Book page: My Kards */
        .mykards-page { padding: 16px; }

        /* Profile header — pfp, name, record, action buttons, highlights */
        .book-profile-header {
            text-align: center;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid rgba(200,184,120,0.15);
        }
        .book-profile-pfp-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
        .pfp-profile-header {
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(160deg, var(--panel-wood-mid), var(--panel-wood-dark));
            border: 2px solid var(--brass-light);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-size: 20px; color: var(--gold);
            background-size: cover; background-position: center;
            transition: box-shadow 0.3s ease;
        }
        .aura-picker-wrap { margin-top: 16px; }
        .book-profile-name {
            font-family: var(--font-display); font-size: 15px; color: var(--gold-bright);
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .book-profile-record {
            font-family: var(--font-serif); font-size: 12px; color: var(--text-dim);
            margin-top: 2px;
        }
        .book-profile-coins {
            font-family: var(--font-serif); font-size: 12px; color: var(--gold);
            margin-top: 2px;
        }
        .book-profile-actions {
            display: flex; justify-content: center; gap: 10px;
            margin-top: 10px;
        }
        .book-actions-row, .book-actions-list {
            display: flex; justify-content: center; gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(200,184,120,0.15);
        }
        .book-action-item {
            padding: 6px 16px;
            background: linear-gradient(160deg, var(--panel-wood-mid), var(--panel-wood-dark));
            border: 1px solid rgba(200,184,120,0.3);
            border-radius: 6px;
            color: var(--gold);
            font-family: var(--font-serif);
            font-size: 12px;
            cursor: pointer;
            transition: transform 0.1s ease;
        }
        .book-action-item:active { transform: scale(0.95); }
        .book-profile-deck {
            margin-top: 14px; text-align: left;
        }
        .book-profile-deck-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
        }
        .book-deck-thumb {
            width: 100%; aspect-ratio: 1; object-fit: cover;
            border-radius: 6px; border: 1px solid rgba(200,184,120,0.3);
        }
        .book-profile-action-btn {
            width: auto; height: auto; border-radius: 6px;
            padding: 6px 16px;
            background: linear-gradient(160deg, var(--panel-wood-mid), var(--panel-wood-dark));
            border: 1px solid rgba(200,184,120,0.3);
            color: var(--gold);
            font-family: var(--font-serif);
            font-size: 12px; font-style: normal;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .book-profile-action-btn:active { transform: scale(0.95); }
        .book-profile-highlights { margin-top: 14px; text-align: left; }
        .book-profile-highlights-label {
            font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.1em;
            color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase;
        }
        .book-profile-highlights-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
        }
        .book-highlight-slot {
            aspect-ratio: 1; border-radius: 6px;
            border: 1px dashed rgba(200,184,120,0.25);
            background: rgba(0,0,0,0.15);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        .book-highlight-slot img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .book-highlight-slot:not(.empty) {
            border-style: solid;
            border-color: rgba(200,184,120,0.4);
        }
        .book-highlight-plus {
            font-family: var(--font-display);
            font-size: 22px;
            color: rgba(0,0,0,0.25);
        }

        /* Binder / Gallery sub-nav */
        .book-subnav {
            display: flex; gap: 6px; margin-bottom: 10px;
        }
        .book-subnav-btn {
            font-family: var(--font-display); font-size: 11px;
            padding: 5px 14px; border-radius: 14px;
            background: transparent; color: var(--text-dim);
            border: 1px solid rgba(200,184,120,0.2);
            cursor: pointer;
        }
        .book-subnav-btn.active {
            background: rgba(200,184,120,0.25); color: #1a1612;
            border-color: rgba(200,184,120,0.5);
            font-weight: bold;
        }

        .mykards-section-title {
            font-family: var(--font-serif); font-size: 14px; color: var(--panel-wood-dark);
            letter-spacing: 0.12em; margin-bottom: 10px;
            display: inline-block; padding: 4px 10px;
            background: var(--parch-light);
            border: 1.5px solid var(--panel-wood-dark);
            border-radius: 4px;
        }
        .mykards-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
        .mykards-empty-cta {
            text-align: center; padding: 24px 20px;
            background: var(--parch-light);
            border: 2px solid var(--panel-wood-dark);
            border-radius: 6px;
        }
        .mykards-empty-icon { font-size: 40px; margin-bottom: 12px; }
        .mykards-empty-title {
            font-family: var(--font-serif); font-size: 16px; color: var(--panel-wood-dark);
            margin-bottom: 8px;
        }
        .mykards-empty-text {
            font-size: 12px; color: rgba(0,0,0,0.65); line-height: 1.6; margin-bottom: 20px;
        }
        .mykards-signin-btn {
            font-family: var(--font-serif);
            font-size: 13px;
            padding: 10px 28px;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(189,152,84,0.2), rgba(160,120,60,0.25));
            color: var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);
            border: 1px solid rgba(189,152,84,0.3);
            border-radius: 6px;
            letter-spacing: 0.08em;
        }
        .book-muted-text { color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); font-size: 11px; font-style: italic; }

        /* Book page: Rules */
        .rules-page { padding: 20px; color: rgba(0,0,0,0.85); font-size: 14px; line-height: 1.7; max-width: 600px; margin: 0 auto; }
        .rules-section-title { font-size: 17px; font-weight: bold; color: #000; margin-top: 18px; margin-bottom: 10px; }
        .rules-section-title:first-child { margin-top: 0; }
        .rules-page p { margin: 0 0 8px; }
        .rules-indent { padding-left: 12px; }
        .rules-footer { margin-top: 24px; font-style: italic; color: rgba(0,0,0,0.5); text-align: center; }

        /* Admin */
        .admin-btn {
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 12px;
            width: 100%;
        }
        .admin-btn.distro { background: #2a7a4f; }
        .admin-btn.book { background: rgb(48,128,155); }
        .admin-btn.test-drop { background: rgb(189,152,84); }
        .admin-btn-danger { background: #8b1a1a; border: 2px solid #ff4444; }
        .admin-btn-danger:hover { background: #a52222; }
        .admin-btn-danger:disabled { background: #444; border-color: #666; opacity: 0.6; cursor: not-allowed; }
        .admin-reset-warning { color: #ccc; font-size: 13px; line-height: 1.5; margin: 8px 0; }
        .admin-reset-input { width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.4); border: 2px solid #555; border-radius: 6px; color: #ff6666; font-family: monospace; font-size: 15px; letter-spacing: 1px; margin: 8px 0 12px; box-sizing: border-box; }
        .admin-reset-input:focus { outline: none; border-color: #ff4444; }

        .admin-distro-log { margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; }




        /* ═══════════════════════════════════════
           UTILITY STATUS CLASSES (innerHTML)
           ═══════════════════════════════════════ */

        /* Grid/list status messages */
        .status-msg { padding: 12px; text-align: center; font-size: 12px; }
        .status-msg.loading { color: #888; }
        .status-msg.empty { color: #888; }
        .status-msg.error { color: #f88; }
        .status-msg.lg { padding: 16px; }
        .status-msg.serif { font-family: var(--font-serif); }

        /* Book-context muted messages (parchment bg) */
        .book-status { color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); 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: #c33; font-style: normal; }

        /* Overlay-context messages (dark bg) */
        .overlay-msg { font-family: var(--font-serif); font-size: 12px; padding: 20px; }
        .overlay-msg.muted { color: rgba(255,255,255,0.4); }
        .overlay-msg.error { color: #e88070; text-align: center; }
        .overlay-msg.waiting { color: rgba(255,255,255,0.6); margin-bottom: 12px; }

        /* Eligibility states */
        .elig-signed-out { color: rgba(72,62,50,0.5); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); }
        .elig-eligible { color: rgb(80,140,80); }
        .elig-sub { font-size: 10px; color: rgba(72,62,50,0.4); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light); }
        .elig-anon { color: rgba(200,100,60,0.8); }

        /* Inline accent spans */
        .text-gold { color: rgba(200,184,120,0.9); }
        .text-gold-bright { color: rgba(200,184,120,1); }
        .text-gold-dim { color: rgba(200,184,120,0.7); }
        .text-gold-accent { color: #c8b878; }

        /* Card placeholder (hero carousel empty slot) */

        /* ===== Utility classes (inline style replacements) ===== */
        .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 thumbnail classes (replaces inline styles) */
        .book-grid-count { font-family:var(--font-serif);font-size:9px;color:#aaa;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:3px; }
        .book-thumb-badge { position:absolute;bottom:1px;left:1px;font-size:8px;background:rgba(0,0,0,0.65);color:rgba(200,184,120,0.9);border-radius:2px;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-serif);font-size:0.6rem;padding:3px 10px;cursor:pointer;background:rgba(42,170,102,0.6);color:#fff;border:none;border-radius:3px;white-space:nowrap; }
        .ch-cancel-btn { font-family:var(--font-serif);font-size:0.6rem;padding:3px 8px;cursor:pointer;background:none;color:rgba(255,100,100,0.7);border:1px solid rgba(255,100,100,0.3);border-radius:3px;white-space:nowrap; }
        .coin-flip-img { width:120px;height:120px;object-fit:contain; }
        .hand-spacer { width:8px; }
        .other-book-empty { padding:20px;text-align:center;color:#888;font-size:12px; }
        .admin-card-img { width:100%;border-radius:4px; }
        .player-search-row { display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(72,62,50,0.04);border:1px solid rgba(72,62,50,0.08);border-radius:6px;cursor:pointer;transition:all 0.15s; }
        .player-search-row:hover { background:rgba(72,62,50,0.08);border-color:rgba(200,184,120,0.2); }
        .player-search-name-col { flex:1;min-width:0; }
        .player-search-name { font-family: var(--font-serif);font-size:13px;color:var(--panel-wood-dark); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);letter-spacing:0.05em; }
        .player-search-meta { font-size:10px;color:rgba(72,62,50,0.45); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);margin-top:2px; }
        .player-search-input {
            width:100%; box-sizing:border-box; padding:9px 12px; margin-bottom:10px;
            font-family: var(--font-serif); font-size:13px; color:var(--panel-wood-dark);
            background:rgba(72,62,50,0.04); border:1px solid rgba(72,62,50,0.15); border-radius:6px;
        }
        #playerListGrid { display:flex; flex-direction:column; gap:6px; }

        /* Library subview (player profile drill-down) */
        .library-subview-header { display:flex; align-items:center; gap:10px; padding:10px 0 14px; }
        .library-back-btn {
            font-family: var(--font-serif); font-size:13px; color:var(--panel-wood-dark);
            background:rgba(72,62,50,0.06); border:1px solid rgba(72,62,50,0.15); border-radius:6px;
            padding:6px 12px; cursor:pointer;
        }
        .library-back-btn:hover { background:rgba(72,62,50,0.1); }
        .library-subview-title { font-family: var(--font-serif); font-size:16px; color:var(--panel-wood-dark); letter-spacing:0.04em; }
        .profile-view-username { font-family: var(--font-serif); font-size:20px; color:var(--panel-wood-dark); margin-bottom:4px; }
        .profile-view-stats { font-size:12px; color:rgba(72,62,50,0.6); margin-bottom:16px; }
        .profile-view-section-label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(72,62,50,0.5); margin:16px 0 8px; }
        .player-search-arrow { color:rgba(72,62,50,0.2); text-shadow: 0 0 3px var(--parch-light), 0 0 6px var(--parch-light);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,rgba(12,57,99,0.95),rgba(48,128,155,0.95));color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-serif);font-size:14px;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.3);color:#fff;font-size:16px;cursor:pointer;padding:2px 8px;border-radius:4px;margin-left:8px; }
        .material-canvas { position:absolute;top:0;left:0;width:100%;height:100%;display:block;image-rendering:pixelated;pointer-events:none;z-index:0; }

        /* Admin */
        .admin-container { text-align:center;margin:10px 0; }
        #adminButtonContainer { position:relative;z-index:20; }
        .admin-trigger-btn { background:#dc143c;color:white;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-weight:bold; }
        .admin-sub-panel { display:none; }
        .admin-distro-content { padding:16px;font-family:var(--font-serif);color:#333; }
        .admin-distro-content h3 { margin:0 0 16px; }

        /* Log view-all link */
        .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:#888; }
        .auth-link-gold { font-size:11px;color:#c8b878;cursor:pointer;text-decoration:underline; }
        .auth-link-red { font-size:11px;color:#c87070;cursor:pointer; }
        .auth-question { font-size:12px;color:#c8b878;margin-bottom:12px;text-align:center; }
        .auth-select { width:100%;padding:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(189,152,84,0.3);border-radius:6px;color:#e8e0d0;font-family:var(--font-serif);font-size:12px; }

        /* Profile picture */
        .pfp { border-radius:50%; object-fit:cover; border:2px solid var(--gold-dim); background:rgba(0,0,0,0.3); }
        .pfp-topbar { width:28px; height:28px; 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:3px; margin-bottom:8px; }
        .pfp-placeholder { display:flex; align-items:center; justify-content:center; background:rgba(200,184,120,0.15); color:var(--gold-dim); font-family: var(--font-serif); font-size:inherit; }
        .pfp-topbar.pfp-placeholder { font-size:13px; }
        .pfp-profile.pfp-placeholder { font-size:24px; }

        /* Onboarding overlay */
        .onboard-overlay { position:fixed;inset:0;z-index:9500;background:rgba(12,34,48,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:360px;text-align:center;padding:32px 24px;color:#e8dcc0; }
        .onboard-title { font-family: var(--font-serif);font-size:22px;color:var(--gold);letter-spacing:0.1em;margin-bottom:6px; }
        .onboard-sub { font-size:12px;color:var(--text-dim);margin-bottom:24px; }
        .onboard-card input[type="text"], .onboard-card input[type="password"] {
            width:100%;padding:10px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(189,152,84,0.3);border-radius:6px;color:#e8dcc0;font-family:var(--font-serif);font-size:13px;box-sizing:border-box;margin-bottom:8px;
        }
        .onboard-card input:focus { border-color:var(--gold);outline:none; }
        .onboard-card select { width:100%;padding:10px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(189,152,84,0.3);border-radius:6px;color:#e8dcc0;font-family:var(--font-serif);font-size:12px;box-sizing:border-box;margin-bottom:8px; }
        .onboard-hint { font-size:10px;color:var(--text-faint);margin-bottom:12px; }
        .onboard-error { font-size:11px;color:#e88;min-height:16px;margin-bottom:8px; }
        .onboard-btn { font-family: var(--font-serif);font-size:14px;padding:12px 32px;cursor:pointer;border:1px solid rgba(189,152,84,0.4);border-radius:6px;color:#e8dcc0;background:linear-gradient(135deg,rgba(170,130,42,0.4),rgba(130,95,30,0.5));letter-spacing:0.05em;transition:all 0.15s; }
        .onboard-btn:hover { background:linear-gradient(135deg,rgba(170,130,42,0.6),rgba(130,95,30,0.7));border-color:rgba(189,152,84,0.6); }
        .onboard-btn:disabled { opacity:0.4;cursor:default; }
        .onboard-btn-ghost { background:transparent;border-color:rgba(255,255,255,0.15);color:var(--text-dim);font-size:12px;padding:8px 20px; }
        .onboard-btn-ghost:hover { border-color:rgba(255,255,255,0.3); }
        .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:50%;object-fit:cover;border:3px solid var(--gold-dim);background:rgba(200,184,120,0.15);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(--gold-dim); }
        .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(200,184,120,0.2); }
        .onboard-dot.active { background:var(--gold); }
        .onboard-dot.done { background:var(--gold-dim); }
        .onboard-signin-link { font-size:11px;color:var(--text-dim);margin-top:16px; }
        .onboard-signin-link span { color:var(--gold);cursor:pointer; }
        .onboard-exit { position:absolute;top:16px;right:18px;font-size:22px;color:var(--text-dim);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(200,184,120,0.3);color:var(--gold); }
        .onboard-btn-returning:hover { background:rgba(200,184,120,0.1);border-color:rgba(200,184,120,0.5); }

        /* Card creator helpers */
        .kard-limit-display { font-size: 11px; color: #888; margin: 4px 0 8px; }

        /* Drawing canvas — replaces the old photo-upload step */
        .cc-draw-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; margin:6px 0; }

        /* Small inline preview — tap to open the full-screen drawing view.
           No drawing happens directly on this canvas anymore. */
        .cc-draw-preview-wrap {
            position: relative; display: inline-block; cursor: pointer;
            background: repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, rgba(255,255,255,0.02) 0% 50%) 50% / 14px 14px;
            border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
            width: 100%; max-width: 280px; aspect-ratio: 1;
        }
        #cardDrawCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
        .cc-draw-preview-hint {
            position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
            font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.45);
            padding: 4px 0; pointer-events: none;
        }

        /* Shared palette/color-picker styling — used by both the (now
           removed) inline tools and the full-screen toolbar below */
        .cc-draw-palette { display:grid; grid-template-columns: repeat(8, 1fr); gap:4px; margin-bottom:6px; }
        .cc-draw-swatch { width:100%; aspect-ratio:1; border-radius:3px; border:2px solid transparent; cursor:pointer; }
        .cc-draw-swatch.active { border-color:#fff; }
        .cc-draw-swatch.eraser { background: repeating-conic-gradient(#666 0% 25%, #888 0% 50%) 50% / 6px 6px; }
        .cc-draw-color-picker { width:100%; height:28px; border:none; border-radius:5px; padding:0; background:none; cursor:pointer; margin-bottom:6px; }
        .cc-tool-label { font-size:11px; color:#aaa; margin-right:4px; }

        /* Full-screen drawing overlay */
        .draw-fullscreen-overlay {
            display: none; position: fixed; inset: 0; z-index: 8500;
            background: #0a0a0c;
            flex-direction: column; align-items: center;
            box-sizing: border-box; padding-right: 8px;
        }
        .draw-fullscreen-overlay.active { display: flex; }
        .draw-fullscreen-canvas-wrap {
            flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center;
            min-height: 0; padding: 12px; overflow: hidden;
        }
        #cardDrawCanvasFullscreen {
            display: block; image-rendering: pixelated; touch-action: none;
            background: repeating-conic-gradient(rgba(255,255,255,0.18) 0% 25%, rgba(255,255,255,0.08) 0% 50%) 50% / 20px 20px;
            border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
            max-width: 100%; max-height: 100%;
        }
        .draw-fullscreen-toolbar .cc-icon-btn,
        .draw-fullscreen-toolbar .cc-icon-btn-sm {
            color: #e8dcc0;
        }
        .draw-fullscreen-toolbar {
            flex: 0 0 auto; width: 100%; max-width: 480px; padding: 10px 14px 16px;
            display: flex; flex-direction: column; gap: 8px;
        }
        .draw-fullscreen-toolbar .cc-tool-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

        /* On wide viewports (most desktops), put the toolbar beside the
           canvas instead of below it — stacking vertically wastes screen
           height a wide screen doesn't need to give up, and unnecessarily
           shrinks the one thing (drawing room) this whole mode exists for */
        @media (min-width: 700px) {
            .draw-fullscreen-overlay { flex-direction: row; align-items: stretch; justify-content: center; }
            .draw-fullscreen-canvas-wrap { flex: 1 1 auto; height: 100%; }
            .draw-fullscreen-toolbar {
                flex: 0 0 260px; max-width: 260px; height: 100%;
                overflow-y: auto; justify-content: center;
            }
        }
        .draw-fullscreen-done { margin-left: auto; }

        .cc-zoom-controls { margin:8px 0 4px 0; }
        .cc-rotate-btn { height:34px;padding:0 12px; }
        .cc-reroll-btn { font-family:var(--font-serif);font-size:12px;padding:8px 14px;cursor:pointer;background:rgba(80,60,120,0.6);color:#fff;border:1px solid rgba(180,140,255,0.3);border-radius:6px; }
        .cc-save-btn { }

        /* Book overrides */
        .book-section-compact { background:rgba(189,152,84,0.15);border-bottom:1px solid rgba(189,152,84,0.2); }
        .book-section-title-brown { color:rgb(140,110,50); }
        .book-log-wrapper { padding:12px 8px; }

        /* Book card (My Kards / Library grid) */
        .book-card {
          width:100%;aspect-ratio:1;border-radius:5px;overflow:hidden;
          position:relative;border:2px solid rgba(200,184,120,0.3);
        }
        .book-card.lost { border-color:rgba(100,80,60,0.15);opacity:0.35; }
        .book-card img { width:100%;height:100%;object-fit:cover; }
        .book-card-badge { position:absolute;top:2px;left:3px;font-size:8px;color:#d4ad6a;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.6);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-serif);font-size:14px;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(200,184,120,0.1); }
        .blog-thumb { width:36px;height:36px;border-radius:4px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(200,184,120,0.08);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/overlay small overrides */
        .lobby-title { margin-bottom:4px; }
        .no-challenges { color:var(--text-dim);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: rgba(200,184,120,0.2); }

        /* Challenge waiting state */
        .challenge-waiting { text-align: center; padding: 12px; }

        /* AI end-game buttons in hint area */
        .ai-end-btn {
            font-family: var(--font-serif);
            font-size: 12px;
            padding: 6px 16px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid;
        }
        .ai-end-btn.new-hand { background: rgba(42,170,102,0.4); color: #aef0c0; border-color: rgba(42,170,102,0.4); margin-right: 6px; }
        .ai-end-btn.exit { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }

        /* ═══════════════════════════════════════
           ANIMATIONS — all @keyframes grouped
           ═══════════════════════════════════════ */
        @keyframes bagNudge {
            0%, 100% { transform: translateY(0) scale(1); }
            15% { transform: translateY(-6px) scale(1.05); }
            30% { transform: translateY(0) scale(1); }
            45% { transform: translateY(-4px) scale(1.03); }
            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(96,176,60,0.1); }
            50% { background: rgba(96,176,60,0.25); }
        }

        @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(255,220,80,0.8); }
            40% { box-shadow: 0 0 20px 8px rgba(255,220,80,0.6); }
            100% { box-shadow: 0 0 0 0 rgba(255,220,80,0); }
        }

        @keyframes captureBorderFlash {
            0% { border-color: rgba(255,255,255,0.9); box-shadow: inset 0 0 12px rgba(255,255,255,0.5); }
            30% { border-color: rgba(255,220,80,0.8); box-shadow: inset 0 0 8px rgba(255,220,80,0.3); }
            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 — all @media queries grouped
           ═══════════════════════════════════════ */
        @media (max-width:600px) {
            body {
                padding: 4px;
            }

            .upload-btn {
                padding: 6px 4px;
                font-size: 15px;
                min-height: 38px;
            }

            .caption-area textarea {
                height: 32px;
                font-size: 12px;
            }

            .image-wrapper {
                width: 100px;
                height: 100px;
            }

            .image-wrapper img {
                width: 94px;
                height: 94px;
            }

            .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:11px; }
          .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; } /* 2-row hand drawer on mobile */
          .v7-topbar-title { font-size:1.3rem; }
          .hero-carousel .hero-card.active { width:72px;height:72px; }
          .hero-carousel .hero-card { width:48px;height:48px; }
          .cta-btn .cta-icon { font-size:15px; }
          .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:130px;height:130px; }
            .hero-carousel .hero-card { width:72px;height:72px; }

            /* Widen key arena elements for desktop */
            .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 panel — floating centered modal 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: 12px;
                box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(150,138,112,0.18);
                flex-direction: row;
            }
            .book-panel.open {
                transform: translateX(-50%) translateY(-50%) scale(1);
                opacity: 1;
            }
            .book-panel.home-mode {
                position: relative;
                left: auto; right: auto; top: auto; bottom: auto;
                width: 100%;
                max-width: 900px;
                height: auto;
                max-height: none;
                transform: none;
                opacity: 1;
                margin: 0 auto;
                flex-direction: row;
            }
            /* Cards are readable at 90px on mobile but too small on
               desktop where there's more room — size up specifically
               for larger screens. */
            .posts-grid, .mykards-card-grid {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }

            /* Left nav panel */
            .book-left-panel {
                display: flex;
                flex-direction: column;
                width: 175px;
                flex-shrink: 0;
                background: linear-gradient(180deg, var(--panel-wood-dark), var(--panel-wood-edge));
                padding: 24px 0 16px;
                overflow: hidden;
            }
            .book-left-title {
                font-family: var(--font-display);
                font-size: 15px;
                color: var(--gold);
                letter-spacing: 0.22em;
                text-shadow: 0 1px 4px rgba(0,0,0,0.6);
                text-align: center;
                padding: 0 16px 20px;
                border-bottom: 1px solid rgba(200,184,120,0.1);
                margin-bottom: 8px;
            }
            .book-left-nav {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2px;
                padding: 4px 10px;
                overflow-y: auto;
            }
            .book-left-tab {
                padding: 10px 14px;
                font-family: var(--font-display);
                font-size: 12px;
                color: rgba(200,184,120,0.45);
                letter-spacing: 0.1em;
                cursor: pointer;
                border-radius: 6px;
                transition: all 0.18s ease;
                border: 1px solid transparent;
                white-space: nowrap;
            }
            .book-left-tab:hover {
                color: rgba(200,184,120,0.75);
                background: rgba(200,184,120,0.06);
            }
            .book-left-tab.active {
                color: var(--gold);
                background: rgba(200,184,120,0.1);
                border-color: rgba(200,184,120,0.2);
            }
            .book-left-footer {
                padding: 12px 16px 0;
                border-top: 1px solid rgba(200,184,120,0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
            }
            /* Spine */
            .book-spine {
                display: block;
                width: 6px;
                flex-shrink: 0;
                background: linear-gradient(90deg, var(--panel-wood-edge), var(--panel-wood-dark) 40%, var(--panel-wood-edge) 60%, #000700);
                box-shadow: inset -2px 0 4px rgba(0,0,0,0.4), inset 2px 0 4px rgba(0,0,0,0.3);
            }
            /* Right content panel */
            .book-right-panel {
                display: flex;
                flex-direction: column;
                flex: 1;
                min-width: 0;
                overflow: hidden;
                background: #dcd0b4;
                border-radius: 0 12px 12px 0;
            }
            /* Hide mobile header/tab row on desktop — target only the header wrapper inside right panel */
            .book-right-panel > .leather-panel { display: none; }

            /* Card creator centering */
            .card-creator { max-width:480px; }
        }

        /* Extra-wide screens (>1024px) */
        @media (min-width:1024px) {
            .v7-topbar { max-width:680px; }
            .hero-carousel { max-width:680px; }
            .hero-carousel .hero-card.active { width:150px;height:150px; }
            .hero-carousel .hero-card { width:80px;height:80px; }
            .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: 190px; }

            .card-detail-content { max-width:400px; }
            .card-detail-img { max-height:320px; }
        }

        @media (max-width:768px) {
        }


    .round-info-sub { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.5); }
    .claim-detail-sub { margin-top: 6px; }