@font-face {
            font-family: 'Inter';
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url('../fonts/inter-latin-400.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-display: swap;
            font-weight: 500;
            src: url('../fonts/inter-latin-500.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-display: swap;
            font-weight: 600;
            src: url('../fonts/inter-latin-600.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-display: swap;
            font-weight: 700;
            src: url('../fonts/inter-latin-700.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Cinzel';
            font-style: normal;
            font-display: swap;
            font-weight: 500;
            src: url('../fonts/cinzel-latin-500.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Cinzel';
            font-style: normal;
            font-display: swap;
            font-weight: 700;
            src: url('../fonts/cinzel-latin-700.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Cinzel';
            font-style: normal;
            font-display: swap;
            font-weight: 800;
            src: url('../fonts/cinzel-latin-800.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Material Symbols Rounded';
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url('../fonts/material-symbols-rounded-subset.woff2') format('woff2');
        }

        :root {
            --md-surface: rgba(14, 15, 24, 0.84);
            --md-surface-elevated: rgba(24, 26, 40, 0.92);
            --md-border: rgba(212, 175, 55, 0.35);
            --md-primary: #ffd166;
            --md-secondary: #c084fc;
        }

        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #090a10;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #f8fafc;
        }

        .font-gothic {
            font-family: 'Cinzel', serif;
            letter-spacing: 0.06em;
        }

        .material-symbols-rounded {
            display: inline-block;
            direction: ltr;
            font-family: 'Material Symbols Rounded';
            font-style: normal;
            font-weight: 400;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            font-size: 18px;
            font-feature-settings: 'liga';
            letter-spacing: normal;
            line-height: 1;
            text-rendering: optimizeLegibility;
            text-transform: none;
            white-space: nowrap;
            flex-shrink: 0;
            -webkit-font-smoothing: antialiased;
        }

        /* Material Design 3 Glassmorphic Containers */
        .md3-pill {
            background: var(--md-surface);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid var(--md-border);
            box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.72), 0 0 22px rgba(212, 175, 55, 0.10);
        }

        .md3-card {
            background: rgba(13, 14, 22, 0.88);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid rgba(255, 209, 102, 0.38);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.88), 0 0 42px rgba(212, 175, 55, 0.14);
        }

        /* Material Design 3 Interactive Tonal Button */
        .md3-btn {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .md3-btn:hover:not(:disabled) {
            background: rgba(255, 209, 102, 0.16);
            border-color: rgba(255, 209, 102, 0.50);
            transform: translateY(-1px);
        }

        .md3-btn:active:not(:disabled) {
            transform: translateY(0px) scale(0.97);
        }

        .md3-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .md3-btn-active {
            background: rgba(255, 209, 102, 0.22);
            border-color: rgba(255, 209, 102, 0.68);
            color: #fef08a;
        }

        .md3-btn-purple {
            background: rgba(192, 132, 252, 0.18);
            border-color: rgba(192, 132, 252, 0.55);
            color: #e9d5ff;
        }

        .md3-choice-card {
            transition: all 0.22s cubic-bezier(0.2, 0, 0, 1);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .md3-choice-card:hover {
            background: rgba(255, 209, 102, 0.10);
            border-color: rgba(255, 209, 102, 0.42);
        }

        .md3-choice-card.selected-gold {
            background: rgba(255, 209, 102, 0.18);
            border-color: rgba(255, 209, 102, 0.82);
            box-shadow: 0 0 20px rgba(255, 209, 102, 0.20);
        }

        .md3-choice-card.selected-purple {
            background: rgba(192, 132, 252, 0.20);
            border-color: rgba(192, 132, 252, 0.82);
            box-shadow: 0 0 20px rgba(192, 132, 252, 0.22);
        }

        /* Strict Single-Line Dock without wrapping */
        .single-line-dock {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .single-line-dock::-webkit-scrollbar {
            display: none;
        }

        #canvas-container {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        .cathedral-vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(6, 7, 12, 0.65) 100%);
        }

        .fade-transition {
            transition: opacity 0.45s cubic-bezier(0.2, 0, 0, 1), transform 0.45s cubic-bezier(0.2, 0, 0, 1);
        }

        /*
         * `pointer-events: none` on the start-screen container is not enough:
         * descendants such as buttons can still establish their own `auto` hit
         * testing and sit invisibly above the WebGL canvas. Disable the whole
         * subtree explicitly while a match is in progress.
         */
        #start-screen.start-screen-hidden,
        #start-screen.start-screen-hidden * {
            pointer-events: none !important;
        }

        #start-screen.start-screen-hidden {
            visibility: hidden;
            transition:
                opacity 0.45s cubic-bezier(0.2, 0, 0, 1),
                transform 0.45s cubic-bezier(0.2, 0, 0, 1),
                visibility 0s linear 0.45s;
        }

        /* New-player guide: isolated above the game HUD so it can safely make
           every underlying control inert without disabling its own buttons. */
        #guide-overlay {
            position: fixed;
            inset: 0;
            z-index: 40;
            pointer-events: auto;
        }

        #guide-overlay.hidden {
            display: none;
        }

        #guide-spotlight.hidden,
        #guide-tour-card.hidden,
        #guide-book-panel.hidden {
            display: none !important;
        }

        #guide-overlay.guide-book-mode {
            background: rgba(4, 5, 12, 0.78);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #guide-spotlight {
            position: fixed;
            left: 50%;
            top: 50%;
            width: 120px;
            height: 120px;
            border: 2px solid rgba(253, 224, 71, 0.96);
            border-radius: 22px;
            box-shadow:
                0 0 0 9999px rgba(4, 5, 12, 0.76),
                0 0 28px rgba(253, 224, 71, 0.54),
                inset 0 0 20px rgba(253, 224, 71, 0.12);
            transform: translate(-50%, -50%);
            transition: left 0.28s cubic-bezier(0.2, 0, 0, 1),
                        top 0.28s cubic-bezier(0.2, 0, 0, 1),
                        width 0.28s cubic-bezier(0.2, 0, 0, 1),
                        height 0.28s cubic-bezier(0.2, 0, 0, 1);
            pointer-events: none;
        }

        .guide-tour-card {
            position: fixed;
            left: 50%;
            bottom: max(20px, env(safe-area-inset-bottom));
            width: min(92vw, 520px);
            transform: translateX(-50%);
            pointer-events: auto;
        }

        .guide-tour-card.guide-card-top {
            top: max(76px, calc(env(safe-area-inset-top) + 18px));
            bottom: auto;
        }

        .guide-step-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.42);
            transition: width 0.2s ease, background 0.2s ease;
        }

        .guide-step-dot.active {
            width: 24px;
            background: #facc15;
        }

        .guide-book-panel {
            position: fixed;
            left: 50%;
            top: 50%;
            width: min(94vw, 920px);
            max-height: min(88vh, 760px);
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            pointer-events: auto;
        }

        .guide-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .guide-tabs::-webkit-scrollbar {
            display: none;
        }

        .guide-tab[aria-selected="true"] {
            color: #fef3c7;
            border-color: rgba(251, 191, 36, 0.72);
            background: rgba(251, 191, 36, 0.18);
        }

        .guide-book-scroll {
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .guide-rule-card {
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        @media (max-width: 640px) {
            .guide-tour-card {
                bottom: max(10px, env(safe-area-inset-bottom));
                width: calc(100vw - 20px);
            }

            .guide-tour-card.guide-card-top {
                top: max(58px, calc(env(safe-area-inset-top) + 10px));
            }

            .guide-book-panel {
                inset: 0;
                width: 100%;
                max-height: none;
                height: 100%;
                transform: none;
                border-radius: 0 !important;
            }
        }