body {
            font-family: 'Inter', sans-serif;
            background-color: #1a202c; 
            color: #e2e8f0;
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100vh;
            touch-action: manipulation;
        }
        body, body * {
            -webkit-user-select: none;
            user-select: none;
        }
        input, textarea, select {
            -webkit-user-select: text;
            user-select: text;
        }
        button, a, label, [role="button"], input, textarea, select {
            touch-action: manipulation;
        }
        #game-container { flex-grow: 1; display: flex; position: relative; }
        #canvas-container { flex-grow: 1; position: relative; overflow: hidden; background-color: #2d3748; touch-action: none; }
        canvas { position: absolute; top: 0; left: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
        canvas:active { cursor: grabbing; }
        
        .panel {
            background-color: rgba(30, 41, 59, 0.95);
            border: 1px solid #475569;
            border-radius: 0.5rem;
            padding: 1rem;
            backdrop-filter: blur(4px);
            z-index: 10;
        }
        
        #mode-screen, #start-game-screen, #player-center-screen, #game-data-screen, #lobby-screen, #assignment-screen, #setup-screen {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #1a202c; display: flex; flex-direction: column; align-items: center;
            z-index: 50; overflow-y: auto; padding: 2rem 0;
        }
        #mode-screen, #start-game-screen, #game-data-screen { justify-content: center; }

        @media (min-width: 641px) and (min-height: 520px) {
            #mode-screen > .panel > h1 {
                margin-bottom: 1.6rem;
            }
        }

        .light-background-enabled body {
            background-color: #efe2c3;
            color: #3f2f1d;
        }

        .light-background-enabled #mode-screen,
        .light-background-enabled #start-game-screen,
        .light-background-enabled #player-center-screen,
        .light-background-enabled #game-data-screen,
        .light-background-enabled #lobby-screen,
        .light-background-enabled #assignment-screen,
        .light-background-enabled #setup-screen {
            background:
                radial-gradient(circle at 20% 12%, rgba(255, 248, 220, 0.58), transparent 28rem),
                radial-gradient(circle at 82% 78%, rgba(180, 128, 58, 0.12), transparent 24rem),
                linear-gradient(145deg, #fbf0d0 0%, #efe2c3 48%, #dcc28f 100%);
            color: #3f2f1d;
        }

        .light-background-enabled #game-container,
        .light-background-enabled #canvas-container {
            background-color: #ead8ad;
        }

        .light-background-enabled .panel {
            background-color: rgba(253, 244, 214, 0.9);
            border-color: rgba(150, 112, 59, 0.52);
            color: #3f2f1d;
            box-shadow: 0 1rem 2.25rem rgba(84, 58, 26, 0.14);
        }

        .light-background-enabled #mode-screen .panel,
        .light-background-enabled #start-game-screen .panel,
        .light-background-enabled #player-center-screen .panel,
        .light-background-enabled #game-data-screen .panel,
        .light-background-enabled #lobby-screen .panel,
        .light-background-enabled #assignment-screen .panel,
        .light-background-enabled #setup-screen .panel {
            background-color: rgba(253, 244, 214, 0.82);
        }

        .new-player-tutorial-layer {
            position: fixed;
            inset: 0;
            z-index: 440;
            display: none;
            pointer-events: none;
        }

        .new-player-tutorial-layer.is-open {
            display: block;
        }

        .new-player-tutorial-spotlight {
            position: fixed;
            display: none;
            z-index: 440;
            border: 2px solid #f59e0b;
            border-radius: 0.5rem;
            background: rgba(251, 191, 36, 0.08);
            box-shadow:
                0 0 1.3rem rgba(251, 191, 36, 0.78);
            pointer-events: none;
            transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
        }

        .new-player-tutorial-spotlight.is-visible {
            display: block;
        }

        .new-player-tutorial-hex-target {
            position: fixed;
            display: none;
            z-index: 441;
            border-radius: 999px;
            background: rgba(251, 191, 36, 0.01);
            pointer-events: auto;
            touch-action: manipulation;
            cursor: pointer;
        }

        .new-player-tutorial-hex-target.is-visible {
            display: block;
        }

        .new-player-tutorial-card {
            position: fixed;
            z-index: 442;
            width: min(24rem, calc(100vw - 1.25rem));
            max-height: calc(100vh - 1rem);
            padding: 0;
            overflow: hidden;
            border-color: rgba(245, 158, 11, 0.9);
            background: rgba(15, 23, 42, 0.97);
            box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.52), 0 0 0.9rem rgba(14, 165, 233, 0.16);
            pointer-events: auto;
        }

        .new-player-tutorial-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.85rem;
            padding: 0.95rem 1rem 0.75rem;
            border-bottom: 1px solid rgba(71, 85, 105, 0.82);
            background: rgba(30, 41, 59, 0.72);
        }

        .new-player-tutorial-kicker {
            color: #fbbf24;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 0.2rem;
        }

        .new-player-tutorial-card h2 {
            margin: 0;
            color: #f8fafc;
            font-size: 1.1rem;
            font-weight: 900;
            line-height: 1.3;
        }

        .new-player-tutorial-body {
            padding: 0.9rem 1rem;
            max-height: min(18rem, calc(100vh - 12rem));
            overflow-y: auto;
            color: #cbd5e1;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .new-player-tutorial-body p {
            margin: 0 0 0.6rem;
        }

        .new-player-tutorial-body p:last-child {
            margin-bottom: 0;
        }

        .new-player-tutorial-body strong {
            color: #f8fafc;
        }

        .new-player-tutorial-body .tutorial-note {
            display: block;
            margin-top: 0.55rem;
            color: #93c5fd;
            font-size: 0.78rem;
            font-weight: 800;
        }

        .new-player-tutorial-progress {
            height: 0.22rem;
            background: rgba(51, 65, 85, 0.95);
        }

        .new-player-tutorial-progress span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #f59e0b, #38bdf8);
            transition: width 0.18s ease;
        }

        .new-player-tutorial-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            padding: 0.8rem 1rem 1rem;
        }

        .new-player-tutorial-actions .btn {
            min-width: 5.4rem;
            white-space: nowrap;
        }

        .mode-image-enhance-toggle {
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 60;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
            width: 13rem;
            max-width: calc(100vw - 2rem);
            box-sizing: border-box;
            padding: 0.45rem 0.55rem 0.45rem 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.95rem;
            background: rgba(15, 23, 42, 0.88);
            color: #cbd5e1;
            font-size: 0.85rem;
            font-weight: 700;
            box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28);
        }

        .mode-account-panel {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 60;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
            width: 17.5rem;
            max-width: calc(100vw - 2rem);
            box-sizing: border-box;
            padding: 0.55rem 0.65rem 0.6rem 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.95rem;
            background: rgba(15, 23, 42, 0.88);
            color: #cbd5e1;
            font-size: 0.85rem;
            font-weight: 700;
            box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28);
        }

        .light-background-enabled .mode-image-enhance-toggle,
        .light-background-enabled .mode-account-panel {
            border-color: rgba(150, 112, 59, 0.58);
            background: rgba(253, 244, 214, 0.9);
            color: #4a341b;
            box-shadow: 0 0.7rem 1.4rem rgba(84, 58, 26, 0.14);
        }

        .mode-image-enhance-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .mode-image-enhance-row > span:first-child {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .game-settings-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            min-width: 4.2rem;
            padding: 0.38rem 0.7rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.45rem;
            background: rgba(15, 23, 42, 0.84);
            color: #e2e8f0;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1;
            box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.2);
            transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
        }

        .game-settings-button:hover {
            border-color: rgba(251, 191, 36, 0.85);
            background: rgba(30, 41, 59, 0.95);
            transform: translateY(-1px);
        }

        .game-settings-button.hidden {
            display: none;
        }

        .mode-settings-button {
            display: none;
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 62;
        }

        .game-settings-modal {
            position: fixed;
            inset: 0;
            z-index: 120;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(2, 6, 23, 0.48);
            backdrop-filter: blur(2px);
        }

        .game-settings-panel {
            width: min(18rem, calc(100vw - 2rem));
            border: 1px solid rgba(71, 85, 105, 0.95);
            border-radius: 0.9rem;
            background: rgba(15, 23, 42, 0.96);
            color: #cbd5e1;
            box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, 0.38);
            overflow: hidden;
        }

        .game-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.75rem 0.85rem;
            border-bottom: 1px solid rgba(71, 85, 105, 0.85);
        }

        .game-settings-header h2 {
            margin: 0;
            color: #f8fafc;
            font-size: 1rem;
            font-weight: 900;
        }

        .game-settings-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 0.55rem;
            background: rgba(51, 65, 85, 0.92);
            color: #cbd5e1;
        }

        .game-settings-close:hover {
            background: rgba(71, 85, 105, 0.98);
            color: #fff;
        }

        .game-settings-body {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            padding: 0.8rem 0.9rem 0.9rem;
            font-size: 0.9rem;
            font-weight: 800;
        }

        .game-settings-body .image-enhancement-switch {
            width: 5.8rem;
            min-width: 5.8rem;
            flex: 0 0 5.8rem;
        }

        .quick-reaction-info-trigger {
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            font-weight: inherit;
            line-height: inherit;
            text-align: left;
            cursor: pointer;
            text-decoration: none;
            text-underline-offset: 0.2em;
            transition: color 0.15s ease;
        }

        .quick-reaction-info-trigger:hover,
        .quick-reaction-info-trigger:focus-visible {
            color: #fbbf24;
            text-decoration: underline;
        }

        .quick-reaction-info-trigger:focus-visible {
            outline: 2px solid rgba(251, 191, 36, 0.72);
            outline-offset: 0.2rem;
        }

        .quick-reaction-info-modal {
            z-index: 132;
        }

        .quick-reaction-info-panel {
            width: min(42rem, calc(100vw - 2rem));
            max-height: min(44rem, calc(100dvh - 2rem));
            border-radius: 0.5rem;
            display: flex;
            flex-direction: column;
        }

        .quick-reaction-info-body {
            min-height: 0;
            overflow-y: auto;
            padding: 0.35rem 1rem 1rem;
            color: #cbd5e1;
            font-size: 0.9rem;
            line-height: 1.65;
        }

        .quick-reaction-info-summary {
            margin: 0;
            padding: 0.85rem 0;
            color: #e2e8f0;
        }

        .quick-reaction-info-body section {
            padding: 0.75rem 0;
            border-top: 1px solid rgba(71, 85, 105, 0.7);
        }

        .quick-reaction-info-body h3 {
            margin: 0 0 0.25rem;
            color: #fbbf24;
            font-size: 0.92rem;
            font-weight: 900;
        }

        .quick-reaction-info-body p {
            margin: 0;
        }

        .image-enhancement-switch > span:not(.image-enhancement-switch-track),
        .image-enhancement-switch [data-light-background-label],
        .image-enhancement-switch [data-image-enhancement-label],
        .image-enhancement-switch [data-skill-tag-icons-label],
        .image-enhancement-switch [data-quick-reactions-label],
        .image-enhancement-switch [data-perception-hint-label],
        .image-enhancement-switch [data-range-hint-label] {
            display: inline-block;
            flex: 0 0 auto;
            white-space: nowrap;
            min-width: 2em;
            text-align: center;
        }

        .mode-account-title {
            color: #c4b5fd;
            font-weight: 800;
            line-height: 1.1;
        }

        .light-background-enabled .mode-account-title {
            color: #5b21b6;
        }

        .mode-account-auth-fields {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.45rem;
        }

        .mode-account-input {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            border: 1px solid rgba(100, 116, 139, 0.9);
            border-radius: 0.55rem;
            background: rgba(30, 41, 59, 0.96);
            color: #f8fafc;
            padding: 0.46rem 0.55rem;
            font-size: 0.8rem;
            outline: none;
        }

        .mode-account-input:focus {
            border-color: rgba(125, 211, 252, 0.95);
            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.16);
        }

        .mode-account-actions,
        .mode-account-logged-in {
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .mode-account-actions {
            justify-content: flex-end;
        }

        .mode-account-logged-in {
            justify-content: space-between;
        }

        .mode-account-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #67e8f9;
        }

        .mode-account-btn {
            border: 1px solid rgba(100, 116, 139, 0.9);
            border-radius: 999px;
            padding: 0.42rem 0.75rem;
            color: #f8fafc;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            transition: transform 0.14s ease, filter 0.14s ease, background 0.14s ease;
        }

        .mode-account-btn:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        .account-login-btn {
            background: #2563eb;
            border-color: rgba(147, 197, 253, 0.42);
        }

        .account-register-btn {
            background: #059669;
            border-color: rgba(110, 231, 183, 0.42);
        }

        .account-logout-btn {
            background: #475569;
            border-color: rgba(203, 213, 225, 0.32);
            flex: 0 0 auto;
        }

        .mode-account-detail {
            border-top: 1px solid rgba(71, 85, 105, 0.72);
            padding-top: 0.35rem;
            color: #94a3b8;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.28;
            text-align: left;
        }

        .player-center-match-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
            gap: 0.75rem;
            margin-bottom: 0.85rem;
        }

        .player-center-chart-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 4.6rem;
            align-items: center;
            gap: 0.55rem;
            min-height: 7.6rem;
            padding: 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.75rem;
            background: rgba(15, 23, 42, 0.48);
        }

        .player-center-chart-copy {
            flex: 1 1 0;
            min-width: 0;
        }

        .player-center-chart-title {
            color: #f8fafc;
            font-size: 0.96rem;
            font-weight: 800;
            line-height: 1.15;
        }

        .player-center-chart-subtitle {
            margin-top: 0.2rem;
            color: #94a3b8;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .player-center-chart-legend {
            display: grid;
            gap: 0.32rem;
            margin-top: 0.6rem;
        }

        .player-center-chart-legend-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.35rem;
            color: #cbd5e1;
            font-size: 0.72rem;
            line-height: 1.15;
        }

        .player-center-chart-swatch {
            width: 0.58rem;
            height: 0.58rem;
            border-radius: 999px;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
        }

        .player-center-chart-value {
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .player-center-chart-empty {
            color: #64748b;
            font-size: 0.76rem;
        }

        .player-center-donut {
            position: relative;
            width: 4.6rem;
            height: 4.6rem;
            min-width: 4.6rem;
            max-width: 4.6rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            display: grid;
            place-items: center;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        }

        .player-center-donut-hole {
            width: 66%;
            height: 66%;
            border-radius: 999px;
            display: grid;
            place-items: center;
            align-content: center;
            background: #0f172a;
            border: 1px solid rgba(71, 85, 105, 0.85);
            box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.28);
        }

        .player-center-donut-value {
            color: #f8fafc;
            font-size: 0.82rem;
            font-weight: 900;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .player-center-donut-label {
            margin-top: 0.18rem;
            color: #94a3b8;
            font-size: 0.62rem;
            font-weight: 700;
            line-height: 1;
        }

        .light-background-enabled .mode-account-input {
            border-color: rgba(150, 112, 59, 0.58);
            background: rgba(255, 251, 235, 0.88);
            color: #3f2f1d;
        }

        .light-background-enabled .mode-account-detail {
            border-top-color: rgba(55, 65, 81, 0.3);
            color: #374151;
        }

        .light-background-enabled .mode-account-name {
            color: #0f766e;
        }

        .light-background-enabled .player-center-chart-card {
            border-color: rgba(150, 112, 59, 0.5);
            background: rgba(255, 250, 230, 0.58);
        }

        .light-background-enabled .player-center-chart-title {
            color: #3f2f1d;
        }

        .light-background-enabled .player-center-chart-subtitle,
        .light-background-enabled .player-center-chart-value,
        .light-background-enabled .player-center-donut-label {
            color: #7c6546;
        }

        .light-background-enabled .player-center-chart-legend-row {
            color: #4a341b;
        }

        .light-background-enabled .player-center-chart-empty {
            color: #8b7354;
        }

        .light-background-enabled .player-center-donut-hole {
            background: #fff4d6;
            border-color: rgba(150, 112, 59, 0.5);
            box-shadow: 0 0.25rem 0.7rem rgba(84, 58, 26, 0.14);
        }

        .light-background-enabled .player-center-donut-value {
            color: #3f2f1d;
        }

        .light-background-enabled #player-center-screen .panel {
            background: rgba(255, 246, 218, 0.92);
            border-color: rgba(150, 112, 59, 0.58);
            color: #3f2f1d;
            box-shadow: 0 1.25rem 2.5rem rgba(84, 58, 26, 0.16);
        }

        .light-background-enabled #player-center-screen h1 {
            color: #6b21a8 !important;
            text-shadow: none;
        }

        .light-background-enabled #player-center-account-line {
            color: #6b5534 !important;
        }

        .light-background-enabled #player-center-screen section {
            background: rgba(255, 250, 232, 0.76) !important;
            border-color: rgba(150, 112, 59, 0.5) !important;
            color: #3f2f1d;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }

        .light-background-enabled #player-center-screen section h2.text-purple-300 {
            color: #6b21a8 !important;
        }

        .light-background-enabled #player-center-screen section h2.text-amber-300 {
            color: #92400e !important;
        }

        .light-background-enabled #player-center-rosters,
        .light-background-enabled #player-center-matches {
            color: #4a341b !important;
        }

        .light-background-enabled #player-center-screen .player-center-roster-card,
        .light-background-enabled #player-center-screen .player-center-info-card,
        .light-background-enabled #player-center-screen .player-center-match-card {
            background: rgba(255, 248, 223, 0.82) !important;
            border-color: rgba(150, 112, 59, 0.48) !important;
            color: #3f2f1d;
        }

        .light-background-enabled #player-center-screen .player-center-match-card:hover,
        .light-background-enabled #player-center-screen .player-center-roster-card:hover {
            background: rgba(255, 242, 205, 0.96) !important;
            border-color: rgba(126, 88, 36, 0.66) !important;
        }

        .light-background-enabled #player-center-screen .text-purple-200,
        .light-background-enabled #player-center-screen .text-purple-300 {
            color: #6b21a8 !important;
        }

        .light-background-enabled #player-center-screen .text-amber-200,
        .light-background-enabled #player-center-screen .text-amber-300 {
            color: #92400e !important;
        }

        .light-background-enabled #player-center-screen .text-gray-300 {
            color: #4a341b !important;
        }

        .light-background-enabled #player-center-screen .text-gray-400 {
            color: #6b5534 !important;
        }

        .light-background-enabled #player-center-screen .text-gray-500 {
            color: #8a704d !important;
        }

        .light-background-enabled #player-center-screen .border-slate-700,
        .light-background-enabled #player-center-screen .border-slate-600 {
            border-color: rgba(150, 112, 59, 0.48) !important;
        }

        .light-background-enabled #player-center-screen input,
        .light-background-enabled #player-center-screen textarea,
        .light-background-enabled #player-center-screen select {
            background: rgba(255, 251, 235, 0.92) !important;
            border-color: rgba(150, 112, 59, 0.58) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled #player-center-screen input::placeholder,
        .light-background-enabled #player-center-screen textarea::placeholder {
            color: #9a7b4f;
        }

        .light-background-enabled #player-center-screen .btn.bg-slate-700 {
            background: #80684a !important;
            border-color: rgba(86, 57, 24, 0.35) !important;
            color: #fff8e7 !important;
        }

        .light-background-enabled #player-center-screen .btn.bg-slate-700:hover {
            background: #6d563a !important;
        }

        .image-enhancement-renderer-status {
            max-width: 11rem;
            align-self: stretch;
            border-top: 1px solid rgba(71, 85, 105, 0.72);
            padding-top: 0.35rem;
            color: #fde68a;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.25;
            text-align: right;
        }

        .image-enhancement-switch {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            width: 5.8rem;
            min-width: 5.8rem;
            flex: 0 0 5.8rem;
            box-sizing: border-box;
            justify-content: space-between;
            flex-wrap: nowrap;
            white-space: nowrap;
            border: 1px solid rgba(100, 116, 139, 0.9);
            border-radius: 999px;
            padding: 0.25rem 0.35rem 0.25rem 0.65rem;
            background: rgba(51, 65, 85, 0.95);
            color: #e2e8f0;
            line-height: 1;
            cursor: pointer;
            transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        }

        .image-enhancement-switch:hover {
            border-color: rgba(148, 163, 184, 0.95);
            background: rgba(71, 85, 105, 0.95);
        }

        .light-background-enabled .image-enhancement-switch {
            border-color: rgba(150, 112, 59, 0.62);
            background: rgba(238, 218, 174, 0.96);
            color: #4a341b;
        }

        .light-background-enabled .image-enhancement-switch:hover {
            border-color: rgba(120, 80, 35, 0.78);
            background: rgba(226, 200, 145, 0.98);
        }

        .light-background-enabled .image-enhancement-renderer-status {
            border-top-color: rgba(55, 65, 81, 0.3);
            color: #374151;
        }

        .light-background-enabled .game-settings-button {
            border-color: rgba(150, 112, 59, 0.62);
            background: rgba(253, 244, 214, 0.88);
            color: #4a341b;
            box-shadow: 0 0.55rem 1.1rem rgba(84, 58, 26, 0.14);
        }

        .light-background-enabled .game-settings-button:hover {
            border-color: rgba(126, 34, 206, 0.6);
            background: rgba(247, 231, 184, 0.95);
        }

        .light-background-enabled .game-settings-modal {
            background: rgba(74, 52, 27, 0.22);
        }

        .light-background-enabled .game-settings-panel {
            border-color: rgba(150, 112, 59, 0.62);
            background: rgba(253, 244, 214, 0.96);
            color: #4a341b;
            box-shadow: 0 1.3rem 2.8rem rgba(84, 58, 26, 0.2);
        }

        .light-background-enabled .game-settings-header {
            border-bottom-color: rgba(150, 112, 59, 0.38);
        }

        .light-background-enabled .game-settings-header h2 {
            color: #3f2a14;
        }

        .light-background-enabled .game-settings-close {
            background: rgba(238, 218, 174, 0.95);
            color: #4a341b;
        }

        .light-background-enabled .game-settings-close:hover {
            background: rgba(226, 200, 145, 0.98);
        }

        .light-background-enabled .quick-reaction-info-trigger:hover,
        .light-background-enabled .quick-reaction-info-trigger:focus-visible {
            color: #7e22ce;
        }

        .light-background-enabled .quick-reaction-info-trigger:focus-visible {
            outline-color: rgba(126, 34, 206, 0.62);
        }

        .light-background-enabled .quick-reaction-info-body {
            color: #5f4527;
        }

        .light-background-enabled .quick-reaction-info-summary {
            color: #4a341b;
        }

        .light-background-enabled .quick-reaction-info-body section {
            border-top-color: rgba(150, 112, 59, 0.34);
        }

        .light-background-enabled .quick-reaction-info-body h3 {
            color: #7e22ce;
        }

        .image-enhancement-switch.is-on {
            border-color: rgba(134, 239, 172, 0.9);
            background: #15803d;
            color: white;
        }

        .image-enhancement-switch-track {
            position: relative;
            width: 2.05rem;
            height: 1.12rem;
            flex: 0 0 auto;
            border-radius: 999px;
            background: #1e293b;
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.42);
        }

        .image-enhancement-switch-thumb {
            position: absolute;
            top: 0.16rem;
            left: 0.16rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 999px;
            background: #cbd5e1;
            box-shadow: 0 0.16rem 0.35rem rgba(0, 0, 0, 0.3);
            transition: transform 0.16s ease, background 0.16s ease;
        }

        .image-enhancement-switch.is-on .image-enhancement-switch-track {
            background: #14532d;
        }

        .image-enhancement-switch.is-on .image-enhancement-switch-thumb {
            background: #bbf7d0;
            transform: translateX(0.93rem);
        }

        @media (max-width: 640px) {
            .mode-image-enhance-toggle {
                display: none;
            }

            .mode-settings-button {
                display: inline-flex;
                top: 0.75rem;
                left: 0.75rem;
            }

            .mode-account-panel {
                top: 0.75rem;
                right: 0.75rem;
                width: min(17.5rem, calc(100vw - 7rem));
                max-width: none;
                min-width: 0;
                font-size: 0.76rem;
                padding: 0.5rem;
            }

            .mode-account-input {
                padding: 0.38rem 0.45rem;
                font-size: 0.74rem;
            }

            .mode-account-btn {
                padding: 0.36rem 0.55rem;
                font-size: 0.74rem;
            }

            .mode-account-detail {
                display: none;
            }

            .image-enhancement-switch {
                min-width: 4.9rem;
            }

            .new-player-tutorial-card {
                width: calc(100vw - 1rem);
            }

            .new-player-tutorial-card-header,
            .new-player-tutorial-body,
            .new-player-tutorial-actions {
                padding-left: 0.8rem;
                padding-right: 0.8rem;
            }

            .new-player-tutorial-body {
                max-height: min(11rem, calc(100vh - 12.5rem));
            }

            .new-player-tutorial-actions .btn {
                flex: 1;
                min-width: 0;
            }
        }

        #hud { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
        .hud-element { pointer-events: auto; }
        #network-status-stack { align-items: flex-start; }
        #network-game-status { white-space: nowrap; }

        .active-info-toggle-inline { display: none; }

        #inspected-player-info.inspected-info-draggable {
            will-change: left, top;
        }

        #inspected-player-info.inspected-info-draggable .inspected-info-drag-handle {
            cursor: grab;
            touch-action: none;
            user-select: none;
        }

        #inspected-player-info.inspected-info-dragging {
            transition: none !important;
            cursor: grabbing;
        }

        #inspected-player-info.inspected-info-dragging .inspected-info-drag-handle {
            cursor: grabbing;
        }

        #modal-restore-stack {
            position: fixed;
            right: calc(1rem + 280px + 0.5rem);
            bottom: 1rem;
            z-index: 285;
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-end;
            gap: 0.5rem;
            pointer-events: none;
        }

        #modal-restore-stack .modal-restore-btn {
            pointer-events: auto;
            background-color: #ca8a04;
            color: white;
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
            white-space: nowrap;
        }

        #modal-restore-stack .modal-restore-btn:hover {
            background-color: #a16207;
        }

        .stat-input {
            width: 3rem; text-align: center; background-color: #334155;
            border: 1px solid #475569; color: white; border-radius: 0.25rem; padding: 0.25rem;
        }

        .stat-input::-webkit-outer-spin-button,
        .stat-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .stat-input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .stat-stepper {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .setup-character-name-input[data-name-conflict="true"] {
            box-shadow: 0 0 0 2px #ef4444;
            background-color: rgba(127, 29, 29, 0.42);
        }

        .game-modal-player-name {
            font-weight: 800;
        }

        .stat-step-btn {
            width: 1.45rem;
            height: 1.45rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #475569;
            border: 1px solid #64748b;
            color: #e2e8f0;
            border-radius: 0.25rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }

        .stat-step-btn:hover {
            background-color: #64748b;
        }

        .stat-stepper .stat-input {
            width: 2.6rem;
        }

        .btn {
            background-color: #3b82f6; color: white; padding: 0.5rem 1rem;
            border-radius: 0.375rem; font-weight: bold; cursor: pointer;
            transition: background-color 0.2s; border: none; outline: none;
        }
        .btn:hover { background-color: #2563eb; }
        .btn:disabled { background-color: #64748b; cursor: not-allowed; opacity: 0.5; }
        .competitive-decision-timeline {
            --competitive-decision-progress: 1;
            --competitive-decision-angle: 360deg;
            width: 4.9rem;
            padding: 0.35rem 0.35rem 0.42rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.32rem;
            border: 1px solid rgba(251, 191, 36, 0.42);
            border-radius: 0.75rem;
            background: rgba(15, 23, 42, 0.88);
            box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.28);
            backdrop-filter: blur(4px);
        }

        .competitive-decision-timeline.is-growth {
            position: fixed;
            top: 4rem;
            right: 1rem;
            z-index: 340;
        }
        .competitive-decision-ring {
            width: 3.6rem;
            height: 3.6rem;
            padding: 0.28rem;
            flex: none;
            border-radius: 999px;
            background: conic-gradient(
                #facc15 var(--competitive-decision-angle),
                rgba(51, 65, 85, 0.96) 0
            );
            box-shadow: 0 0 0.85rem rgba(250, 204, 21, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .competitive-decision-ring-core {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(251, 191, 36, 0.28);
            border-radius: inherit;
            background: rgba(15, 23, 42, 0.96);
        }
        .competitive-decision-ring-label {
            max-width: 100%;
            color: #f8fafc;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #competitive-decision-time {
            color: #facc15;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
        }
        .competitive-decision-timeline.is-warning {
            border-color: rgba(251, 146, 60, 0.68);
        }
        .competitive-decision-timeline.is-danger {
            border-color: rgba(248, 113, 113, 0.86);
            box-shadow: 0 0.75rem 1.5rem rgba(127, 29, 29, 0.28);
        }
        .competitive-decision-timeline.is-danger .competitive-decision-ring {
            box-shadow: 0 0 1rem rgba(248, 113, 113, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        
        .controls-resource-summary {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            margin-bottom: 0.5rem;
            color: #cbd5e1;
            font-size: 0.72rem;
            line-height: 1.1;
        }

        .controls-resource-line {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem 0.75rem;
            width: 100%;
        }

        .controls-resource-line b {
            color: #f8fafc;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 0.78rem;
            font-weight: 800;
        }

        #controls-ap-value {
            color: #facc15;
        }

        #controls-move-value {
            color: #60a5fa;
        }

        .controls-resource-list {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.25rem;
            min-height: 1.15rem;
            width: 100%;
        }

        .controls-resource-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.22rem;
            min-height: 1.1rem;
            padding: 0.1rem 0.34rem;
            border: 1px solid rgba(100, 116, 139, 0.72);
            border-radius: 0.25rem;
            background-color: rgba(15, 23, 42, 0.78);
            color: #f8fafc;
            white-space: nowrap;
        }

        .controls-resource-chip.empty {
            color: #94a3b8;
            font-weight: 700;
            letter-spacing: 0;
        }

        .controls-resource-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 0.85rem;
            height: 0.85rem;
            flex-shrink: 0;
        }

        .controls-resource-icon img {
            width: 0.85rem;
            height: 0.85rem;
            object-fit: contain;
            flex-shrink: 0;
        }

        .controls-resource-icon-symbol {
            font-family: "Font Awesome 6 Free";
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
        }

        .controls-resource-label {
            color: #cbd5e1;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1;
        }

        .controls-resource-value {
            color: #f8fafc;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1;
        }

        .action-btn { background-color: #4b5563; flex: 1; }
        .action-btn.selected { background-color: #fbbf24; color: #1e3a8a; }

        .color-btn, .icon-btn {
            width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 2px;
        }
        .color-btn.selected, .icon-btn.selected { border-color: white; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

        .icon-btn.setup-icon-disabled,
        .icon-btn:disabled {
            opacity: 0.22;
            cursor: not-allowed;
            filter: grayscale(1);
            box-shadow: none;
        }

        .setup-preset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #334155;
            color: #f8fafc;
            border: 1px solid #475569;
            border-radius: 0.25rem;
            padding: 0.2rem 0.45rem;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.1;
            cursor: pointer;
            white-space: nowrap;
        }

        .setup-preset-btn:hover {
            background-color: #475569;
        }

        .setup-preset-btn.active {
            background-color: #fbbf24;
            color: #172554;
            border-color: #fde68a;
            box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.35), 0 0 0.65rem rgba(251, 191, 36, 0.35);
        }

        .setup-preset-btn.active:hover {
            background-color: #f59e0b;
        }

        .setup-preset-list {
            display: flex;
            flex-direction: column;
        }

        .setup-preset-option {
            color: #e5e7eb;
            text-align: left;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .setup-preset-option:hover {
            border-color: #fbbf24;
        }

        .setup-bottom-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .setup-bottom-actions .btn {
            width: min(19.5rem, calc(100vw - 3rem));
            justify-content: center;
        }

        @media (max-width: 640px) {
            .setup-bottom-actions {
                flex-direction: column;
            }
        }

        .setup-preset-option-title {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
        }

        .setup-preset-option-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.18);
            color: #f8fafc;
            flex-shrink: 0;
        }

        .setup-preset-option-skills {
            color: #d1d5db;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1.45;
        }

        .setup-preset-option-stats {
            display: grid;
            grid-template-columns: repeat(2, max-content);
            justify-content: end;
            gap: 0.18rem 0.5rem;
            flex: 0 0 auto;
            color: #cbd5e1;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.25;
            text-align: right;
        }

        .setup-preset-option-stats span {
            display: inline-flex;
            justify-content: flex-end;
            gap: 0.18rem;
            white-space: nowrap;
        }

        .setup-preset-option-stats em {
            color: #94a3b8;
            font-style: normal;
        }

        .setup-preset-option-stats b {
            color: #f8fafc;
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 520px) {
            .setup-preset-option {
                flex-wrap: wrap;
            }

            .setup-preset-option-stats {
                width: 100%;
                grid-template-columns: repeat(3, max-content);
                justify-content: start;
                margin-left: 2.1rem;
            }
        }

        .class-icon {
            width: 1em;
            height: 1em;
            display: inline-block;
            flex-shrink: 0;
            object-fit: contain;
            vertical-align: -0.125em;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
        }
        .player-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            flex-shrink: 0;
        }
        
        #message-box {
            position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8); color: white; padding: 1rem 2rem;
            border-radius: 1rem; font-size: 1.25rem; font-weight: bold; opacity: 0;
            transition: opacity 0.3s; pointer-events: none; z-index: 100;
            max-width: min(36rem, calc(100vw - 2rem)); box-sizing: border-box;
        }

        #message-box.skill-tooltip-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(24rem, calc(100vw - 2rem));
            max-height: calc(var(--app-viewport-height, 100vh) - 2rem);
            overflow-y: auto;
            padding: 0.9rem 1rem;
            border: 1px solid rgba(148, 163, 184, 0.75);
            box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
            pointer-events: auto;
        }

        .skill-value-highlight {
            font-weight: 900;
            white-space: nowrap;
        }

        .skill-value-attack {
            color: #dc2626;
            text-shadow: 0 0 0.45rem rgba(220, 38, 38, 0.28);
        }

        .skill-value-damage {
            color: #c084fc;
            text-shadow: 0 0 0.45rem rgba(192, 132, 252, 0.3);
        }

        .skill-value-heal {
            color: #22c55e;
            text-shadow: 0 0 0.45rem rgba(34, 197, 94, 0.28);
        }

        #skill-hover-tooltip {
            position: fixed;
            display: none;
            max-width: min(28rem, calc(100vw - 1.5rem));
            max-height: min(24rem, calc(var(--app-viewport-height, 100vh) - 1.5rem));
            overflow-y: auto;
            z-index: 540;
            pointer-events: none;
            padding: 0.9rem 1rem;
            border: 1px solid rgba(148, 163, 184, 0.75);
            border-radius: 1rem;
            background: rgba(0, 0, 0, 0.88);
            color: #f8fafc;
            box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.48);
            font-size: 0.86rem;
            line-height: 1.5;
            transition: opacity 0.12s ease;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        #skill-hover-tooltip.touch-pinned {
            width: min(24rem, calc(100vw - 2rem));
            max-height: calc(var(--app-viewport-height, 100vh) - 2rem);
            pointer-events: auto;
        }

        #skill-hover-tooltip .skill-hover-title {
            color: #f8fafc;
            font-weight: 900;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
        }

        #skill-hover-tooltip .skill-hover-body {
            color: #e2e8f0;
            font-weight: 700;
        }

        .reaction-skill-name {
            color: #fde68a;
            font-weight: 800;
            cursor: help;
            border-bottom: 1px dashed rgba(250, 204, 21, 0.75);
        }

        .reaction-skill-name:hover {
            color: #facc15;
        }

        #game-log {
            position: absolute;
            left: 1rem;
            bottom: 1rem;
            width: min(24rem, calc(100vw - 2rem));
            z-index: 30;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        #game-log-panel {
            display: none;
            width: 100%;
            max-height: 18rem;
            padding: 0.75rem;
        }

        #game-log-panel.open {
            display: flex;
            flex-direction: column;
        }

        #game-log-list {
            max-height: 14rem;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 0.25rem;
        }

        .game-log-entry {
            display: grid;
            grid-template-columns: 4.2rem 1fr;
            gap: 0.5rem;
            min-width: 0;
            max-width: 100%;
            padding: 0.4rem 0;
            border-top: 1px solid rgba(71, 85, 105, 0.55);
            font-size: 0.78rem;
            line-height: 1.25rem;
        }

        .game-log-entry:first-child { border-top: 0; padding-top: 0; }

        .game-log-time {
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
        }

        .game-log-text {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        #game-log-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background-color: rgba(30, 41, 59, 0.95);
            border: 1px solid #475569;
            padding: 0.55rem 0.8rem;
        }

        #game-log-toggle:hover { background-color: rgba(51, 65, 85, 0.98); }

        #game-log-count {
            min-width: 1.35rem;
            height: 1.35rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background-color: #334155;
            color: #cbd5e1;
            font-size: 0.72rem;
            padding: 0 0.35rem;
        }

        .game-log-icon-btn {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 0.375rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(51, 65, 85, 0.8);
            color: #cbd5e1;
            border: 1px solid #475569;
            cursor: pointer;
        }

        .game-log-icon-btn:hover {
            background: rgba(71, 85, 105, 0.95);
            color: white;
        }

        .health-bar-container { width: 100%; height: 6px; background-color: #475569; border-radius: 3px; overflow: hidden; }
        .health-bar { height: 100%; transition: width 0.3s ease, background-color 0.3s ease; }
        
        /* Modals */
        .modal-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(15, 23, 42, 0.8); display: none;
            justify-content: center; align-items: center; z-index: 200; pointer-events: auto;
        }

        .guide-doc {
            width: min(58rem, calc(100vw - 2rem));
            max-height: min(46rem, calc(100vh - 2rem));
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .guide-doc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.75);
        }

        .guide-doc-body {
            overflow-y: auto;
            padding: 1.25rem;
        }

        .guide-doc h3 {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            margin: 0 0 0.75rem;
            color: #f8fafc;
            font-size: 1rem;
            font-weight: 800;
        }

        .guide-doc p {
            color: #cbd5e1;
            line-height: 1.65;
        }

        .guide-hero {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 15rem;
            gap: 1rem;
            align-items: center;
            border-bottom: 1px solid rgba(71, 85, 105, 0.65);
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }

        .guide-hero h3 {
            font-size: 1.35rem;
            color: #e9d5ff;
        }

        .guide-flow {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 0.85rem;
        }

        .guide-flow span {
            border: 1px solid #475569;
            background: rgba(51, 65, 85, 0.78);
            color: #e2e8f0;
            border-radius: 0.375rem;
            padding: 0.4rem 0.55rem;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .guide-flow i {
            color: #94a3b8;
            font-size: 0.75rem;
        }

        .guide-board {
            min-height: 10.75rem;
            display: grid;
            grid-template-columns: repeat(3, 3.45rem);
            grid-auto-rows: 2.75rem;
            justify-content: center;
            align-content: center;
            filter: drop-shadow(0 0.6rem 1rem rgba(0, 0, 0, 0.35));
        }

        .guide-hex {
            position: relative;
            width: 3.45rem;
            height: 3.98rem;
            clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
            border: 1px solid rgba(226, 232, 240, 0.34);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -0.08rem;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 -0.45rem 0.8rem rgba(2, 6, 23, 0.18);
        }

        .guide-hex:nth-child(2),
        .guide-hex:nth-child(5) {
            transform: translateY(1.38rem);
        }

        .guide-piece {
            --piece-panel-light: #fda4af;
            --piece-panel-mid: #dc2626;
            --piece-panel-dark: #7f1d1d;
            --piece-accent-dark: rgba(69, 10, 10, 0.74);
            --piece-accent-glow: rgba(254, 202, 202, 0.48);
            position: relative;
            z-index: 2;
            width: 2.35rem;
            height: 2.35rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            isolation: isolate;
            background:
                radial-gradient(circle at 30% 24%, rgba(248, 250, 252, 0.96) 0%, rgba(168, 178, 190, 0.98) 18%, rgba(78, 86, 98, 0.98) 42%, rgba(20, 25, 34, 0.98) 69%, rgba(5, 8, 14, 0.98) 100%);
            box-shadow:
                0 0.28rem 0.45rem rgba(0, 0, 0, 0.46),
                inset 0 0 0 1px rgba(235, 241, 248, 0.42),
                inset 0 0 0 0.22rem rgba(4, 8, 14, 0.62),
                inset 0 0 0 0.42rem var(--piece-accent-dark);
        }

        .guide-piece::before {
            content: "";
            position: absolute;
            inset: 0.47rem;
            z-index: 0;
            border-radius: 999px;
            background:
                radial-gradient(circle at 32% 24%, var(--piece-panel-light) 0%, var(--piece-panel-mid) 48%, var(--piece-panel-dark) 100%);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.16),
                inset 0 -0.45rem 0.65rem rgba(2, 6, 23, 0.34),
                inset 0 0.3rem 0.55rem rgba(255, 255, 255, 0.1);
        }

        .guide-piece::after {
            content: "";
            position: absolute;
            inset: 0.47rem;
            z-index: 1;
            border-radius: 999px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 46%),
                radial-gradient(circle at 58% 78%, var(--piece-accent-dark) 0%, rgba(0, 0, 0, 0) 45%),
                radial-gradient(circle at 30% 26%, var(--piece-accent-glow) 0%, rgba(255, 255, 255, 0) 46%);
            pointer-events: none;
        }

        .guide-piece img {
            position: relative;
            z-index: 3;
            width: 1.35rem;
            height: 1.35rem;
            object-fit: contain;
            filter:
                drop-shadow(0 2px 1px rgba(0, 0, 0, 0.58))
                contrast(1.16)
                saturate(1.12);
        }

        .guide-piece-blue {
            --piece-panel-light: #93c5fd;
            --piece-panel-mid: #2563eb;
            --piece-panel-dark: #1e3a8a;
            --piece-accent-dark: rgba(30, 58, 138, 0.72);
            --piece-accent-glow: rgba(191, 219, 254, 0.46);
        }

        .guide-plain { background: #475569; }
        .guide-forest { background: #166534; }
        .guide-water { background: #1d4ed8; }
        .guide-ice { background: #bae6fd; }
        .guide-mountain { background: #78716c; }
        .guide-abyss { background: #020617; border-style: dashed; }

        .guide-section {
            padding: 1rem 0;
            border-top: 1px solid rgba(71, 85, 105, 0.5);
        }

        .guide-section:first-of-type {
            border-top: 0;
        }

        .changelog-entry {
            display: grid;
            gap: 0.6rem;
            padding: 0.9rem;
            margin-top: 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.85);
            border-radius: 0.5rem;
            background: rgba(15, 23, 42, 0.45);
        }

        .changelog-entry:first-of-type {
            margin-top: 0;
        }

        .changelog-entry h4 {
            color: #f8fafc;
            font-size: 1rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .changelog-meta {
            color: #94a3b8;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        .changelog-entry ul {
            list-style: disc;
            padding-left: 1.15rem;
            color: #cbd5e1;
            font-size: 0.84rem;
            line-height: 1.5;
        }

        .changelog-entry li + li {
            margin-top: 0.35rem;
        }

        .guide-card-grid,
        .guide-stat-grid,
        .guide-terrain-grid,
        .guide-skill-row,
        .guide-competitive-grid {
            display: grid;
            gap: 0.75rem;
        }

        .guide-card-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .guide-info-card,
        .guide-stat-grid div,
        .guide-terrain-grid div,
        .guide-skill-row div,
        .guide-competitive-grid div,
        .guide-mode-note {
            border: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.45);
            border-radius: 0.5rem;
        }

        .guide-info-card {
            min-height: 8rem;
            padding: 0.85rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .guide-info-card img,
        .guide-info-card > i {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
            font-size: 1.75rem;
            margin-bottom: 0.2rem;
        }

        .guide-info-card strong,
        .guide-stat-grid b,
        .guide-terrain-grid b,
        .guide-competitive-grid b {
            color: #f8fafc;
        }

        .guide-info-card span,
        .guide-stat-grid span,
        .guide-terrain-grid em,
        .guide-competitive-grid span {
            color: #cbd5e1;
            font-size: 0.82rem;
            line-height: 1.45;
            font-style: normal;
        }

        .guide-stat-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .guide-stat-grid div {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.7rem;
        }

        .guide-steps {
            display: grid;
            gap: 0.65rem;
        }

        .guide-steps div {
            display: grid;
            grid-template-columns: 2rem 1fr;
            gap: 0.75rem;
            align-items: start;
        }

        .guide-steps span {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #334155;
            border: 1px solid #64748b;
            color: #f8fafc;
            font-weight: 800;
        }

        .guide-steps p {
            margin: 0;
            padding-top: 0.2rem;
        }

        .guide-terrain-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .guide-terrain-grid div {
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .guide-terrain-swatch {
            width: 1.9rem;
            height: 2.2rem;
            clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
            border: 1px solid rgba(226, 232, 240, 0.35);
            background-size: cover;
            background-position: center;
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 -0.25rem 0.5rem rgba(2, 6, 23, 0.2);
        }

        .guide-skill-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .guide-competitive-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .guide-competitive-grid div {
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .guide-skill-row div {
            padding: 0.75rem;
        }

        .guide-skill-row p {
            margin: 0.5rem 0 0;
            font-size: 0.84rem;
        }

        .guide-skill-tag {
            display: inline-flex;
            border: 1px solid;
            border-radius: 0.375rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 800;
        }

        .guide-skill-tag.passive {
            color: #e5e7eb;
            background: #1e293b;
            border-color: #64748b;
        }

        .guide-skill-tag.active {
            color: #e9d5ff;
            background: rgba(88, 28, 135, 0.55);
            border-color: #7e22ce;
        }

        .guide-skill-tag.reactive {
            color: #fde68a;
            background: rgba(113, 63, 18, 0.55);
            border-color: #a16207;
        }

        .guide-mode-note {
            padding: 0.8rem;
            margin-top: 0.75rem;
        }

        .guide-mode-note p,
        .guide-small-text {
            margin: 0.25rem 0;
            font-size: 0.88rem;
        }

        .guide-flow-wrap {
            margin-top: 0;
        }

        .guide-footer {
            margin-top: 1rem;
            padding: 1rem 0 0.25rem;
            border-top: 1px solid rgba(71, 85, 105, 0.65);
            color: #fbbf24;
            font-weight: 800;
            text-align: right;
        }

        .skill-compendium {
            display: grid;
            gap: 0.85rem;
        }

        .skill-compendium,
        .skill-compendium * {
            -webkit-user-select: text;
            user-select: text;
        }

        .skill-compendium-modal {
            width: min(64rem, calc(100vw - 2rem));
            max-height: min(44rem, calc(100vh - 2rem));
            display: flex;
            flex-direction: column;
            padding: 1rem;
            overflow: auto;
        }

        .skill-compendium-modal.tree-mode {
            height: min(44rem, calc(100vh - 2rem));
            overflow: hidden;
        }

        .skill-compendium.tree-mode {
            grid-template-rows: auto auto minmax(0, 1fr);
            min-height: 0;
            height: 100%;
            flex: 1;
            overflow: hidden;
        }

        .skill-compendium-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: end;
        }

        .skill-compendium-header-actions {
            display: flex;
            align-items: end;
            gap: 0.75rem;
        }

        .skill-compendium-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: flex-end;
        }

        .skill-compendium-controls label {
            display: grid;
            gap: 0.25rem;
            color: #94a3b8;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .skill-compendium-select {
            min-width: 11rem;
            background: #334155;
            color: #f8fafc;
            border: 1px solid #475569;
            border-radius: 0.375rem;
            padding: 0.5rem 0.65rem;
            font-size: 0.88rem;
        }

        .skill-compendium-mode-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            background: rgba(30, 41, 59, 0.86);
            color: #f8fafc;
            border: 1px solid #475569;
            border-radius: 0.375rem;
            padding: 0.55rem 0.72rem;
            font-size: 0.82rem;
            font-weight: 800;
            white-space: nowrap;
            transition: background-color 0.18s, border-color 0.18s, color 0.18s;
        }

        .skill-compendium-mode-btn:hover,
        .skill-compendium-mode-btn.active {
            background: rgba(251, 191, 36, 0.16);
            border-color: #fbbf24;
            color: #fde68a;
        }

        .skill-compendium-detail {
            position: relative;
            border: 1px solid rgba(100, 116, 139, 0.75);
            background: rgba(15, 23, 42, 0.58);
            border-radius: 0.5rem;
            padding: 0.9rem;
        }

        .skill-compendium.tree-mode .skill-compendium-detail {
            max-height: 12.5rem;
            overflow: auto;
        }

        .skill-compendium-detail-head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: start;
            margin-bottom: 0.65rem;
        }

        .skill-compendium-meta {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.55rem;
            margin: 0.65rem 0;
        }

        .skill-compendium-meta div {
            border: 1px solid rgba(71, 85, 105, 0.72);
            background: rgba(30, 41, 59, 0.62);
            border-radius: 0.375rem;
            padding: 0.5rem;
            min-width: 0;
            display: grid;
            grid-template-rows: 1rem minmax(1.25rem, auto);
            row-gap: 0.32rem;
            align-items: start;
        }

        .skill-compendium-meta div > span {
            display: block;
            color: #94a3b8;
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1rem;
            margin-bottom: 0;
        }

        .skill-compendium-meta b {
            display: block;
            color: #f8fafc;
            font-size: 0.82rem;
            line-height: 1.25rem;
            overflow-wrap: anywhere;
            align-self: start;
        }

        .skill-compendium-meta .skill-compendium-effect-meta b {
            display: inline-flex;
            align-items: center;
            min-height: 1.25rem;
            white-space: nowrap;
        }

        .skill-compendium-meta .skill-compendium-status-meta b {
            display: block;
            max-height: 1.25rem;
            line-height: 1.25rem;
            white-space: nowrap;
            overflow: hidden;
            overflow-wrap: normal;
            text-overflow: ellipsis;
            word-break: normal;
        }

        .skill-tag-icon-row {
            display: none;
            align-items: center;
            gap: 0.14rem;
            pointer-events: auto;
            z-index: 30;
        }

        .skill-tag-icons-enabled .skill-tag-icon-row {
            display: inline-flex;
        }

        .skill-tree-tag-icons {
            position: absolute;
            top: 0.16rem;
            right: 0.2rem;
            justify-content: flex-end;
            max-width: 4.8rem;
        }

        .skill-type-tag-icons,
        .skill-learning-action-tag-icons {
            position: static;
            flex: 0 0 auto;
            max-width: none;
        }

        .skill-type-tag-icons,
        .skill-learning-action-tag-icons {
            justify-content: flex-end;
        }

        .skill-action-tag-icons {
            position: absolute;
            top: 0.18rem;
            right: 0.24rem;
            justify-content: flex-end;
            gap: 0.08rem;
            pointer-events: none;
            max-width: calc(100% - 0.5rem);
        }

        .skill-compendium-card-type-group,
        .skill-compendium-detail-type-group,
        .skill-learning-card-action {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.34rem;
            flex: 0 0 auto;
        }

        .skill-tag-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 0.82rem;
            height: 0.82rem;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #e2e8f0;
            box-shadow: none;
            padding: 0;
        }

        .skill-action-tag-icons .skill-tag-icon {
            width: 0.68rem;
            height: 0.68rem;
        }

        .skill-tag-icon svg {
            display: block;
            width: 100%;
            height: 100%;
            fill: currentColor;
            stroke: none;
            pointer-events: none;
        }

        .skill-tag-fa-glyph {
            display: block;
            width: 100%;
            height: 100%;
            font-family: 'Font Awesome 6 Free';
            font-size: 0.82rem;
            font-weight: 900;
            line-height: 0.82rem;
            text-align: center;
            pointer-events: none;
        }

        .skill-action-tag-icons .skill-tag-fa-glyph {
            font-size: 0.68rem;
            line-height: 0.68rem;
        }

        .skill-tag-icon.skill-effect-tag-attack {
            color: #f97316 !important;
        }

        .skill-tag-icon.skill-effect-tag-damage {
            color: #a855f7 !important;
        }

        .skill-tag-icon.skill-effect-tag-heal {
            color: #22c55e !important;
        }

        .skill-tag-icon.skill-effect-tag-buff {
            color: #ef4444 !important;
        }

        .skill-tag-icon.skill-effect-tag-debuff {
            color: #3b82f6 !important;
        }

        .skill-tag-icon.skill-effect-tag-movement {
            color: #94a3b8 !important;
        }

        .skill-tag-icon.skill-effect-tag-summon {
            color: #92400e !important;
        }

        .skill-tag-icon.skill-effect-tag-disruption {
            color: #eab308 !important;
        }

        .skill-status-entry {
            display: inline-flex;
            align-items: center;
            gap: 0;
            color: #f8fafc;
            font-size: inherit;
            line-height: inherit;
            width: max-content;
            max-width: none;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: keep-all;
        }

        .skill-status-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            color: #e2e8f0;
        }

        .skill-status-icon img {
            width: 1em;
            height: 1em;
            object-fit: contain;
            flex-shrink: 0;
        }

        .skill-status-icon-symbol {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.82rem;
            line-height: 1;
        }

        .skill-status-separator {
            color: #f8fafc;
            white-space: nowrap;
        }

        .skill-status-icon-label {
            font-size: inherit;
            line-height: inherit;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: keep-all;
        }

        .skill-compendium-effect {
            color: #e2e8f0;
            line-height: 1.55;
            font-size: 0.92rem;
        }

        .skill-effect-swatch {
            width: 0.85rem;
            height: 0.85rem;
            display: inline-block;
            border-radius: 999px;
            border: 1px solid rgba(226, 232, 240, 0.45);
            vertical-align: -0.12rem;
            margin-right: 0.35rem;
        }

        .skill-compendium-tree {
            display: none;
            position: relative;
            border: 1px solid rgba(71, 85, 105, 0.82);
            background: rgba(15, 23, 42, 0.52);
            border-radius: 0.5rem;
            min-height: 20rem;
            max-height: min(31rem, 58vh);
            overflow: auto;
            padding: 0.75rem;
        }

        .skill-compendium-tree.active {
            display: block;
        }

        .skill-compendium.tree-mode .skill-compendium-tree {
            min-height: 0;
            height: 100%;
            max-height: none;
            overflow: hidden;
            cursor: grab;
            touch-action: none;
            user-select: none;
            --skill-compendium-node-width: 8.75rem;
            --skill-compendium-node-height: 3rem;
            --skill-compendium-node-badge-column: 1.45rem;
            --skill-compendium-node-column-gap: 0.45rem;
            --skill-compendium-node-padding-x: 0.55rem;
            --skill-compendium-node-radius: 0.5rem;
            --skill-compendium-type-badge-size: 1.35rem;
            --skill-compendium-type-badge-font: 0.72rem;
            --skill-compendium-node-name-font: 0.84rem;
        }

        .skill-compendium.tree-mode .skill-compendium-tree.dragging {
            cursor: grabbing;
        }

        .skill-compendium.tree-mode .skill-compendium-tree,
        .skill-compendium.tree-mode .skill-compendium-tree * {
            -webkit-user-select: none;
            user-select: none;
        }

        .skill-compendium-tree-surface {
            position: relative;
            min-width: 100%;
            transform-origin: 0 0;
            will-change: transform;
        }

        .skill-compendium.tree-mode .skill-tree-node {
            width: var(--skill-compendium-node-width);
            height: var(--skill-compendium-node-height);
            grid-template-columns: var(--skill-compendium-node-badge-column) minmax(0, 1fr);
            column-gap: var(--skill-compendium-node-column-gap);
            border-radius: var(--skill-compendium-node-radius);
            padding: 0 var(--skill-compendium-node-padding-x);
        }

        .skill-compendium.tree-mode .skill-tree-type-badge {
            width: var(--skill-compendium-type-badge-size);
            height: var(--skill-compendium-type-badge-size);
            font-size: var(--skill-compendium-type-badge-font);
        }

        .skill-compendium.tree-mode .skill-tree-node-name {
            font-size: var(--skill-compendium-node-name-font);
        }

        .skill-tree-edge-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: visible;
        }

        .skill-tree-edge {
            stroke: #64748b;
            stroke-width: 2.2;
            fill: none;
            opacity: 0.56;
            transition: opacity 0.18s, stroke 0.18s, stroke-width 0.18s;
        }

        .skill-tree-edge.path {
            stroke: #fbbf24;
            stroke-width: 3.1;
            opacity: 0.96;
        }

        .skill-tree-node {
            position: absolute;
            width: 8.75rem;
            height: 3rem;
            display: grid;
            grid-template-columns: 1.45rem minmax(0, 1fr);
            align-items: center;
            column-gap: 0.45rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(148, 163, 184, 0.75);
            background: rgba(30, 41, 59, 0.92);
            color: #f8fafc;
            padding: 0 0.55rem;
            text-align: left;
            cursor: pointer;
            user-select: none;
            box-shadow: 0 0.35rem 0.9rem rgba(2, 6, 23, 0.24);
            transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, opacity 0.18s;
        }

        .skill-tree-node:hover {
            transform: translateY(-1px);
            border-color: #fbbf24;
        }

        .skill-tree-node.active {
            background: rgba(29, 78, 216, 0.92);
            border-color: #93c5fd;
        }

        .skill-tree-node.passive {
            background: rgba(51, 65, 85, 0.94);
            border-color: #94a3b8;
        }

        .skill-tree-node.reactive {
            background: rgba(194, 65, 12, 0.92);
            border-color: #fdba74;
        }

        .skill-tree-node.required {
            box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.46), 0 0.35rem 0.9rem rgba(2, 6, 23, 0.24);
            border-color: #fbbf24;
        }

        .skill-tree-node.selected {
            box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.62), 0 0 1.25rem rgba(251, 191, 36, 0.34);
            border-color: #fde68a;
        }

        .skill-tree-type-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.58);
            border: 1px solid rgba(226, 232, 240, 0.72);
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            flex-shrink: 0;
        }

        .skill-tree-node-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.84rem;
            font-weight: 800;
        }

        #ss-view-toggle.active {
            background: rgba(251, 191, 36, 0.16);
            border-color: #fbbf24;
            color: #fde68a;
        }

        .skill-select-modal-layout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            width: min(96vw, 49rem);
            max-height: calc(100vh - 2rem);
        }

        .skill-select-modal-layout.skill-learning-tree-layout {
            width: min(96vw, 65rem);
        }

        .skill-learning-learner-trigger {
            display: inline-flex;
            align-items: center;
            max-width: 15rem;
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            font-size: 0.875rem;
            font-weight: 800;
            vertical-align: middle;
            cursor: pointer;
        }

        .skill-learning-learner-trigger span:last-child {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .skill-learning-learner-trigger:focus-visible {
            outline: 2px solid #fbbf24;
            outline-offset: 3px;
            border-radius: 0.25rem;
        }

        .skill-select-character-panel {
            width: 16rem;
            max-height: min(31rem, calc(100vh - 3rem));
            overflow-y: auto;
            flex: 0 0 16rem;
            padding: 1rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            border-radius: 0.5rem;
            background: rgba(30, 41, 59, 0.94);
            color: #e2e8f0;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
        }

        .skill-learning-character-empty {
            padding: 0.65rem;
            border: 1px dashed rgba(100, 116, 139, 0.8);
            border-radius: 0.375rem;
            color: #94a3b8;
            font-size: 0.75rem;
        }

        #ss-skill-panel {
            flex: 0 1 28.125rem;
            min-width: 0;
        }

        #skill-select-modal .skill-learning-tree-panel {
            width: min(calc(96vw - 17rem), 48rem);
            flex-basis: min(calc(96vw - 17rem), 48rem);
        }

        #ss-skill-list.skill-learning-tree-host {
            display: block;
            width: 100%;
            min-width: 0;
            max-height: min(27rem, 58vh);
            overflow: hidden;
            padding: 0.75rem;
            border: 1px solid rgba(71, 85, 105, 0.82);
            border-radius: 0.5rem;
            background: rgba(15, 23, 42, 0.52);
        }

        @media (max-width: 760px) {
            .skill-select-modal-layout {
                display: block;
                width: min(94vw, 28.125rem);
            }

            .skill-select-character-panel {
                display: none !important;
            }

            .skill-select-modal-layout.mobile-character-panel-open .skill-select-character-panel:not(.hidden) {
                display: block !important;
                width: 100%;
                max-height: min(42vh, 21rem);
                margin-bottom: 0.75rem;
            }

            .skill-learning-learner-trigger {
                max-width: min(12rem, 44vw);
            }

            #ss-skill-panel,
            #skill-select-modal .skill-learning-tree-panel {
                width: min(94vw, 28.125rem);
                flex-basis: auto;
            }
        }

        .skill-learning-tree {
            position: relative;
            min-width: 100%;
            height: min(25.5rem, 54vh);
            min-height: 18rem;
            overflow: hidden;
            cursor: grab;
            touch-action: none;
            user-select: none;
            --skill-learning-tree-zoom: 1;
            --skill-learning-node-width: 10rem;
            --skill-learning-node-height: 4.1rem;
            --skill-learning-node-badge-column: 1.45rem;
            --skill-learning-node-row-1: 1.35rem;
            --skill-learning-node-row-2: 1.45rem;
            --skill-learning-node-column-gap: 0.45rem;
            --skill-learning-node-row-gap: 0.15rem;
            --skill-learning-node-padding-y: 0.45rem;
            --skill-learning-node-padding-x: 0.55rem;
            --skill-learning-type-badge-size: 1.35rem;
            --skill-learning-type-badge-font: 0.72rem;
            --skill-learning-node-name-font: 0.84rem;
            --skill-learning-node-action-min-width: 3.25rem;
            --skill-learning-node-action-radius: 0.35rem;
            --skill-learning-node-action-padding-y: 0.2rem;
            --skill-learning-node-action-padding-x: 0.45rem;
            --skill-learning-node-action-font: 0.68rem;
        }

        .skill-learning-tree.dragging {
            cursor: grabbing;
        }

        .skill-learning-tree,
        .skill-learning-tree * {
            -webkit-user-select: none;
            user-select: none;
        }

        .skill-learning-tree-surface {
            margin: 0;
            transform-origin: 0 0;
            will-change: transform;
        }

        .skill-learning-tree-empty {
            border: 1px solid rgba(71, 85, 105, 0.82);
            background: rgba(15, 23, 42, 0.62);
            border-radius: 0.5rem;
            padding: 1rem;
            color: #cbd5e1;
            font-size: 0.84rem;
            line-height: 1.55;
        }

        .skill-learning-tree-node {
            width: var(--skill-learning-node-width);
            height: var(--skill-learning-node-height);
            grid-template-columns: var(--skill-learning-node-badge-column) minmax(0, 1fr);
            grid-template-rows: var(--skill-learning-node-row-1) var(--skill-learning-node-row-2);
            align-content: center;
            column-gap: var(--skill-learning-node-column-gap);
            row-gap: var(--skill-learning-node-row-gap);
            padding: var(--skill-learning-node-padding-y) var(--skill-learning-node-padding-x);
        }

        .skill-learning-tree-node.learned {
            background: rgba(20, 83, 45, 0.88);
            border-color: #22c55e;
        }

        .skill-learning-tree-node.learnable {
            box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.32), 0 0.35rem 0.9rem rgba(2, 6, 23, 0.24);
        }

        .skill-learning-tree-node.blocked {
            opacity: 0.58;
        }

        .skill-learning-tree-node .skill-tree-type-badge {
            grid-row: 1 / 3;
            width: var(--skill-learning-type-badge-size);
            height: var(--skill-learning-type-badge-size);
            font-size: var(--skill-learning-type-badge-font);
        }

        .skill-learning-tree-node .skill-tree-node-name {
            font-size: var(--skill-learning-node-name-font);
        }

        .skill-learning-node-action,
        .skill-learning-node-status {
            grid-column: 2;
            justify-self: start;
            align-self: center;
            min-width: var(--skill-learning-node-action-min-width);
            border-radius: var(--skill-learning-node-action-radius);
            padding: var(--skill-learning-node-action-padding-y) var(--skill-learning-node-action-padding-x);
            font-size: var(--skill-learning-node-action-font);
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
        }

        .skill-learning-node-action {
            background: #2563eb;
            color: #f8fafc;
            border: 1px solid #93c5fd;
        }

        .skill-learning-node-action:hover {
            background: #1d4ed8;
        }

        .skill-learning-node-action.danger {
            background: #dc2626;
            border-color: #fecaca;
        }

        .skill-learning-node-action.danger:hover {
            background: #b91c1c;
        }

        .skill-learning-node-status {
            color: #94a3b8;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(15, 23, 42, 0.48);
            text-align: center;
        }

        .skill-learning-node-status.learned {
            color: #bbf7d0;
            border-color: rgba(34, 197, 94, 0.54);
        }

        .skill-learning-node-status.locked {
            color: #cbd5e1;
        }

        .skill-compendium-class-list {
            max-height: min(18rem, 38vh);
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
            padding-right: 0.25rem;
        }

        .skill-compendium-card {
            position: relative;
            border: 1px solid rgba(71, 85, 105, 0.8);
            background: rgba(15, 23, 42, 0.46);
            border-radius: 0.5rem;
            padding: 0.7rem;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .skill-compendium-card:hover,
        .skill-compendium-card.selected {
            background: rgba(51, 65, 85, 0.72);
            border-color: #fbbf24;
        }

        .skill-compendium-card-desc {
            color: #cbd5e1;
            line-height: 1.45;
            font-size: 0.78rem;
            margin-top: 0.35rem;
        }

        .skill-learning-list-card {
            position: relative;
        }

        .setup-learned-skill-tag {
            position: relative;
            overflow: visible;
        }

        .campaign-compendium {
            display: grid;
            gap: 1rem;
            color: #e2e8f0;
        }

        .campaign-compendium,
        .campaign-compendium * {
            -webkit-user-select: text;
            user-select: text;
        }

        .campaign-compendium-toolbar {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        .campaign-compendium-toolbar label {
            display: grid;
            gap: 0.25rem;
            color: #94a3b8;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .campaign-compendium-hero {
            border: 1px solid rgba(16, 185, 129, 0.45);
            background: rgba(6, 78, 59, 0.22);
            border-radius: 0.5rem;
            padding: 1rem;
        }

        .campaign-compendium-hero h3,
        .campaign-compendium-section h3 {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #f8fafc;
            font-weight: 900;
        }

        .campaign-compendium-hero h3 {
            font-size: 1.25rem;
            margin-bottom: 0.35rem;
        }

        .campaign-compendium-hero p {
            color: #cbd5e1;
            line-height: 1.55;
            margin: 0.35rem 0 0;
        }

        .campaign-compendium-facts {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.55rem;
            margin-top: 0.85rem;
        }

        .campaign-compendium-facts div,
        .campaign-compendium-card,
        .campaign-compendium-event {
            border: 1px solid rgba(71, 85, 105, 0.78);
            background: rgba(15, 23, 42, 0.46);
            border-radius: 0.5rem;
        }

        .campaign-compendium-facts div {
            padding: 0.55rem;
            display: grid;
            gap: 0.2rem;
        }

        .campaign-compendium-facts span,
        .campaign-card-label {
            color: #94a3b8;
            font-size: 0.68rem;
            font-weight: 800;
        }

        .campaign-compendium-facts b {
            color: #f8fafc;
            font-size: 0.88rem;
        }

        .campaign-compendium-section {
            display: grid;
            gap: 0.7rem;
        }

        .campaign-compendium-section h3 {
            font-size: 1rem;
        }

        .campaign-compendium-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .campaign-compendium-card,
        .campaign-compendium-event {
            padding: 0.8rem;
        }

        .campaign-compendium-empty {
            grid-column: 1 / -1;
            border: 1px dashed rgba(148, 163, 184, 0.46);
            background: rgba(15, 23, 42, 0.34);
            border-radius: 0.5rem;
            padding: 0.8rem;
            color: #94a3b8;
            font-size: 0.86rem;
        }

        .campaign-card-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.55rem;
        }

        .campaign-card-title-main {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
        }

        .campaign-card-title-main img {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
            border-radius: 0.375rem;
            background: rgba(15, 23, 42, 0.72);
            border: 1px solid rgba(148, 163, 184, 0.38);
            flex-shrink: 0;
        }

        .campaign-card-title-main b {
            color: #f8fafc;
            font-size: 0.98rem;
            overflow-wrap: anywhere;
        }

        .campaign-tag {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(148, 163, 184, 0.55);
            border-radius: 999px;
            padding: 0.15rem 0.5rem;
            color: #d1fae5;
            background: rgba(6, 78, 59, 0.32);
            font-size: 0.68rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .campaign-meta-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
            margin: 0.55rem 0;
        }

        .campaign-meta-grid div {
            min-width: 0;
            border: 1px solid rgba(71, 85, 105, 0.68);
            background: rgba(30, 41, 59, 0.48);
            border-radius: 0.375rem;
            padding: 0.45rem;
            display: grid;
            gap: 0.2rem;
        }

        .campaign-meta-grid b {
            color: #f8fafc;
            font-size: 0.78rem;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .campaign-card-text {
            color: #cbd5e1;
            font-size: 0.82rem;
            line-height: 1.5;
        }

        .campaign-skill-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.4rem;
        }

        .campaign-skill-pill {
            border: 1px solid rgba(148, 163, 184, 0.55);
            background: rgba(30, 41, 59, 0.62);
            border-radius: 999px;
            padding: 0.15rem 0.45rem;
            color: #e2e8f0;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .campaign-event-header {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            align-items: start;
            margin-bottom: 0.45rem;
        }

        .campaign-event-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.85rem;
            height: 1.85rem;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.22);
            border: 1px solid rgba(16, 185, 129, 0.58);
            color: #a7f3d0;
            font-weight: 900;
            flex-shrink: 0;
        }

        .campaign-event-title {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
        }

        .campaign-event-title b {
            color: #f8fafc;
            overflow-wrap: anywhere;
        }

        .campaign-event-desc {
            color: #cbd5e1;
            font-size: 0.84rem;
            line-height: 1.5;
            margin-bottom: 0.55rem;
        }

        .campaign-event-flow {
            color: #94a3b8;
            font-size: 0.75rem;
            line-height: 1.45;
        }

        @media (max-width: 760px) {
            .campaign-compendium-facts,
            .campaign-compendium-grid {
                grid-template-columns: 1fr;
            }

            .campaign-meta-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        #game-over-screen {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(15, 23, 42, 0.95); display: none; flex-direction: column;
            justify-content: center; align-items: center; gap: 1rem; z-index: 100; pointer-events: auto;
            padding: 1.25rem;
        }

        .postgame-panel {
            width: min(72rem, calc(100vw - 2rem));
            height: min(44rem, calc(100vh - 7rem));
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .postgame-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.72);
        }

        .postgame-body {
            min-height: 0;
            flex: 1;
            display: grid;
            grid-template-columns: minmax(20rem, 0.9fr) minmax(24rem, 1.1fr);
            gap: 1rem;
            padding: 1rem;
        }

        .postgame-section {
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .postgame-section h2 {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            color: #f8fafc;
            font-size: 1rem;
            font-weight: 800;
        }

        .postgame-player-list,
        .postgame-log-list,
        .postgame-stats-list {
            min-height: 0;
            flex: 1;
            overflow-y: auto;
            padding-right: 0.25rem;
        }

        .postgame-player-card {
            border: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.45);
            border-radius: 0.5rem;
            padding: 0.85rem;
            margin-bottom: 0.75rem;
        }

        .postgame-player-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.65rem;
        }

        .postgame-stat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
            margin-bottom: 0.65rem;
        }

        .postgame-combat-title {
            color: #c4b5fd;
            font-size: 0.72rem;
            font-weight: 800;
            margin: 0.15rem 0 0.35rem;
        }

        .postgame-combat-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.4rem;
            margin-bottom: 0.65rem;
        }

        .postgame-stats-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .postgame-leader-card {
            border: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.48);
            border-radius: 0.5rem;
            padding: 0.75rem;
            min-width: 0;
            box-shadow: inset 3px 0 0 var(--leader-color);
        }

        .postgame-leader-label {
            color: var(--leader-color);
            font-size: 0.74rem;
            font-weight: 900;
            margin-bottom: 0.45rem;
        }

        .postgame-leader-player {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            min-width: 0;
            font-weight: 800;
        }

        .postgame-leader-value {
            font-size: 1.35rem;
            font-weight: 900;
            line-height: 1.1;
            margin-top: 0.35rem;
        }

        .postgame-leader-detail {
            color: #94a3b8;
            font-size: 0.68rem;
            margin-top: 0.25rem;
        }

        .postgame-data-card {
            border: 1px solid rgba(71, 85, 105, 0.85);
            background: rgba(15, 23, 42, 0.45);
            border-radius: 0.5rem;
            padding: 0.85rem;
            margin-bottom: 0.75rem;
        }

        .postgame-data-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.65rem;
        }

        .postgame-data-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.45rem;
        }

        .postgame-stat-grid div,
        .postgame-combat-grid div,
        .postgame-data-grid > div,
        .postgame-skill-tag {
            border: 1px solid rgba(71, 85, 105, 0.75);
            background: rgba(30, 41, 59, 0.72);
            border-radius: 0.375rem;
            padding: 0.35rem 0.45rem;
        }

        .postgame-stat-grid span,
        .postgame-combat-grid span,
        .postgame-data-grid span {
            display: block;
            color: #94a3b8;
            font-size: 0.68rem;
            line-height: 1;
        }

        .postgame-stat-grid b,
        .postgame-combat-grid b,
        .postgame-data-grid b {
            color: #f8fafc;
            font-size: 0.9rem;
        }

        .postgame-table-cell {
            min-height: 3.2rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.35rem;
        }

        .postgame-data-grid b {
            font-size: 1rem;
            line-height: 1;
        }

        .postgame-skill-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        .postgame-skill-tag {
            color: #e2e8f0;
            font-size: 0.76rem;
            line-height: 1.1rem;
        }

        .postgame-skill-tag em {
            color: #94a3b8;
            font-style: normal;
            margin-left: 0.25rem;
        }

        .postgame-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .postgame-empty {
            color: #64748b;
            font-size: 0.86rem;
            padding: 0.75rem;
            border: 1px dashed rgba(100, 116, 139, 0.7);
            border-radius: 0.5rem;
        }

        .player-center-match-detail-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(15, 23, 42, 0.95);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            z-index: 120;
            pointer-events: auto;
            padding: 1.25rem;
        }

        .player-center-match-card {
            cursor: pointer;
            transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
        }

        .player-center-match-card:hover {
            border-color: rgba(251, 191, 36, 0.7);
            background: rgba(30, 41, 59, 0.62);
            transform: translateY(-1px);
        }

        .turn-avatar {
            width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            border: 2px solid transparent; transition: transform 0.2s;
        }
        .turn-avatar.current {
            border-color: #fbbf24 !important;
            transform: scale(1.15);
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
        }

        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }

        @media (max-width: 768px) {
            #setup-screen { padding: 1rem 0.5rem; }
            .panel { padding: 0.75rem; }
            #turn-order-bar {
                top: 0.5rem !important;
                max-width: calc(100vw - 1rem);
                overflow-x: auto;
                padding: 0.5rem !important;
                gap: 0.25rem;
            }
            #network-game-status {
                font-size: 0.7rem;
                padding: 0.35rem 0.5rem;
            }
            #network-status-stack {
                top: 1.55rem !important;
                left: 0.5rem !important;
                gap: 0.35rem;
            }
            #in-game-settings-button {
                order: -1;
            }
            #network-game-status {
                order: 0;
            }
            #active-player-info {
                top: 5.75rem !important;
                left: 0.5rem !important;
                width: min(14rem, calc(100vw - 1rem)) !important;
                max-height: 42vh;
                overflow-y: auto;
                font-size: 0.85rem;
            }
            #inspected-player-info {
                top: 5.75rem !important;
                right: 0.5rem !important;
                left: auto !important;
                width: min(14rem, calc(100vw - 1rem)) !important;
                max-height: 42vh;
                overflow-y: auto;
                font-size: 0.85rem;
            }
            #controls-panel, #deploy-panel {
                right: 0.5rem !important;
                bottom: 0.5rem !important;
                width: min(17rem, calc(100vw - 1rem)) !important;
                z-index: 40;
            }
            #modal-restore-stack {
                right: calc(0.5rem + min(17rem, calc(100vw - 1rem)) + 0.5rem);
                bottom: 0.5rem;
            }
            #game-log {
                left: 0.5rem;
                bottom: 0.5rem;
                width: min(18rem, calc(100vw - 1rem));
            }
            #game-log-panel {
                max-height: 36vh;
            }
            #game-log-list {
                max-height: calc(36vh - 3rem);
            }
            #message-box {
                width: calc(100vw - 2rem);
                padding: 0.75rem 1rem;
                font-size: 1rem;
                text-align: center;
            }
            .guide-doc {
                width: calc(100vw - 1rem);
                max-height: calc(100vh - 1rem);
            }
            #game-over-screen {
                justify-content: flex-start;
                padding: 0.5rem;
            }
            .postgame-panel {
                width: calc(100vw - 1rem);
                height: calc(100vh - 5.5rem);
            }
            .postgame-header,
            .postgame-body {
                padding: 0.85rem;
            }
            .postgame-header {
                align-items: flex-start;
                flex-direction: column;
            }
            .postgame-body {
                grid-template-columns: 1fr;
                overflow-y: auto;
            }
            .postgame-section {
                min-height: 18rem;
            }
            .postgame-stats-summary {
                grid-template-columns: 1fr;
            }
            .postgame-actions {
                width: 100%;
            }
            .postgame-actions .btn {
                flex: 1;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            .guide-doc-header,
            .guide-doc-body {
                padding: 0.85rem;
            }
            .guide-hero,
            .guide-card-grid,
            .guide-stat-grid,
            .guide-terrain-grid,
            .guide-skill-row,
            .guide-competitive-grid {
                grid-template-columns: 1fr;
            }
            .skill-compendium-header,
            .skill-compendium-meta,
            .skill-compendium-class-list {
                grid-template-columns: 1fr;
            }
            .skill-compendium-modal {
                width: calc(100vw - 1rem);
                max-height: calc(100vh - 1rem);
            }
            .skill-compendium-header-actions {
                align-items: stretch;
            }
            .skill-compendium-controls {
                justify-content: stretch;
                flex: 1;
            }
            .skill-compendium-controls label,
            .skill-compendium-select {
                width: 100%;
            }
            .guide-board {
                grid-template-columns: repeat(3, 3rem);
                grid-auto-rows: 2.4rem;
                min-height: 9.35rem;
            }
            .guide-hex {
                width: 3rem;
                height: 3.46rem;
            }
            .guide-hex:nth-child(2),
            .guide-hex:nth-child(5) {
                transform: translateY(1.2rem);
            }
            .guide-piece {
                width: 2rem;
                height: 2rem;
            }
            .guide-piece::before,
            .guide-piece::after {
                inset: 0.4rem;
            }
            .guide-piece img {
                width: 1.12rem;
                height: 1.12rem;
            }
            .guide-flow {
                gap: 0.35rem;
            }
            .guide-flow span {
                font-size: 0.72rem;
                padding: 0.35rem 0.45rem;
            }
            .turn-avatar { width: 34px; height: 34px; }
            .btn { padding: 0.55rem 0.75rem; }
        }

        @media (hover: none) and (pointer: coarse) {
            body {
                height: 100vh;
                height: 100dvh;
                height: var(--app-viewport-height, 100dvh);
            }

            body,
            body * {
                -webkit-user-select: none;
                user-select: none;
                -webkit-touch-callout: none;
                -webkit-tap-highlight-color: transparent;
            }

            input,
            textarea,
            select {
                -webkit-user-select: text;
                user-select: text;
                -webkit-touch-callout: default;
            }

            #game-container {
                height: 100vh;
                height: 100dvh;
                height: var(--app-viewport-height, 100dvh);
                overflow: hidden;
            }

            #game-log {
                position: fixed;
                left: calc(env(safe-area-inset-left) + 0.5rem);
                bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
                width: min(18rem, calc(100vw - 1rem));
                z-index: 90;
            }

            #game-log-toggle {
                min-height: 2.75rem;
                box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.36);
            }

            #game-log-panel {
                max-height: min(36vh, 16rem);
                max-height: min(36dvh, 16rem);
            }

            #game-log-list {
                max-height: min(28vh, 13rem);
                max-height: min(28dvh, 13rem);
            }

            .end-game-button {
                width: 2.75rem;
                height: 2.75rem;
                min-width: 2.75rem;
                padding: 0 !important;
                justify-content: center;
                border-radius: 0.5rem;
            }

            .end-game-button i {
                margin-right: 0 !important;
                font-size: 1.05rem;
                line-height: 1;
            }

            .end-game-label {
                display: none;
            }

            .competitive-decision-timeline {
                width: 4.35rem;
                padding: 0.3rem 0.25rem 0.36rem;
            }

            .competitive-decision-timeline.is-growth {
                top: 4.25rem;
            }

            .competitive-decision-ring {
                width: 3.2rem;
                height: 3.2rem;
                padding: 0.24rem;
            }

            .competitive-decision-ring-label {
                max-width: 4rem;
                font-size: 0.62rem;
            }

            #competitive-decision-time {
                font-size: 0.86rem;
            }

            #canvas-container {
                height: 100%;
            }

            .active-info-toggle-inline {
                display: inline-flex;
                align-items: center;
                padding: 0.25rem 0.45rem;
                border-radius: 0.375rem;
                font-size: 0.72rem;
                line-height: 1rem;
                color: #e2e8f0;
                background-color: rgba(51, 65, 85, 0.92);
                border: 1px solid #475569;
                font-weight: 800;
                white-space: nowrap;
                flex-shrink: 0;
            }

            #active-player-info h3,
            #inspected-player-info h3 {
                width: auto !important;
                max-width: 7.5rem;
                font-size: 0.95rem !important;
                line-height: 1.1rem;
            }

            #game-container.active-info-hidden #active-player-info {
                width: auto !important;
                min-width: 0;
                max-height: none;
                padding: 0.4rem;
                overflow: visible;
            }
        }

        @media (hover: none) and (pointer: coarse) and (max-width: 768px) {
            #active-player-info,
            #inspected-player-info {
                max-height: 34vh;
                max-height: 34dvh;
            }
        }

        @media (hover: none) and (pointer: coarse) and (orientation: portrait) {
            #active-player-info,
            #inspected-player-info {
                max-height: min(34vh, 18rem);
                max-height: min(34dvh, 18rem);
            }

            #controls-panel,
            #deploy-panel {
                right: 0.5rem !important;
                bottom: calc(env(safe-area-inset-bottom) + 0.5rem) !important;
                width: min(15.25rem, calc(100vw - 1rem)) !important;
                max-height: min(36vh, 17rem);
                max-height: min(36dvh, 17rem);
                overflow-y: auto;
                padding: 0.6rem;
                align-items: stretch;
                justify-content: flex-start;
            }

            #modal-restore-stack {
                right: calc(0.5rem + min(15.25rem, calc(100vw - 1rem)) + 0.5rem);
                bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
            }

            #deploy-panel > .text-center:first-child {
                font-size: 1rem !important;
                line-height: 1.25rem;
                margin-bottom: 0.45rem !important;
            }

            #controls-panel > .controls-resource-summary {
                font-size: 0.66rem;
                margin-bottom: 0.4rem;
            }

            #controls-panel .controls-resource-line {
                gap: 0.25rem 0.5rem;
            }

            #controls-panel .controls-resource-chip {
                padding: 0.08rem 0.28rem;
            }

            #controls-panel .controls-resource-value,
            #controls-panel .controls-resource-label,
            #controls-panel .controls-resource-line b {
                font-size: 0.7rem;
            }

            #controls-panel .action-btn {
                min-height: 3rem;
                padding: 0.35rem 0.25rem !important;
            }

            #controls-panel .action-btn i {
                margin-bottom: 0.15rem !important;
            }

            #skills-container {
                max-height: none;
                overflow: visible;
                gap: 0.35rem !important;
                margin-bottom: 0.35rem !important;
            }

            #skills-container .btn {
                min-height: 2.6rem;
                padding: 0.35rem 0.25rem !important;
            }

            #action-hint {
                height: auto !important;
                min-height: 0.9rem;
                margin-bottom: 0.35rem !important;
                line-height: 0.95rem;
            }

            #btn-end-turn {
                padding-top: 0.45rem !important;
                padding-bottom: 0.45rem !important;
            }
        }

        @media (hover: none) and (pointer: coarse) and (orientation: landscape) {
            body {
                height: 100vh;
                height: 100dvh;
                height: var(--app-viewport-height, 100dvh);
            }

            #game-container {
                flex-grow: 0;
                width: min(94vw, calc(100vw - 2rem));
                height: 100vh;
                height: 100dvh;
                height: var(--app-viewport-height, 100dvh);
                margin: 0 auto;
                overflow: hidden;
            }

            #canvas-container {
                width: 100%;
                height: 100%;
                flex: 0 0 100%;
            }

            #turn-order-bar {
                max-width: calc(100% - 22rem);
                overflow-x: auto;
            }

            #controls-panel,
            #deploy-panel {
                right: 0.5rem !important;
                bottom: calc(env(safe-area-inset-bottom) + 0.5rem) !important;
                max-height: calc(100vh - 7rem);
                max-height: calc(100dvh - 7rem);
                overflow-y: auto;
                padding: 0.75rem;
            }

            #deploy-panel .text-lg {
                font-size: 1rem !important;
                line-height: 1.25rem;
            }

            #controls-panel > .controls-resource-summary {
                font-size: 0.68rem;
                margin-bottom: 0.45rem;
            }

            #controls-panel .controls-resource-chip {
                padding: 0.08rem 0.3rem;
            }

            #controls-panel .action-btn {
                padding-top: 0.45rem !important;
                padding-bottom: 0.45rem !important;
            }

            #skills-container {
                max-height: none;
                overflow: visible;
                margin-bottom: 0.5rem !important;
            }

            #action-hint {
                height: auto !important;
                min-height: 1rem;
                margin-bottom: 0.5rem !important;
            }
        }
    

        /* Light background mode: convert dark UI surfaces to readable light surfaces. */
        .light-background-enabled,
        .light-background-enabled body {
            color: #3f2f1d;
        }

        .light-background-enabled .panel,
        .light-background-enabled .new-player-tutorial-card,
        .light-background-enabled #game-log-panel,
        .light-background-enabled #controls-panel,
        .light-background-enabled #deploy-panel,
        .light-background-enabled #active-player-info,
        .light-background-enabled #inspected-player-info,
        .light-background-enabled #turn-order-bar,
        .light-background-enabled #network-game-status,
        .light-background-enabled .skill-compendium-modal,
        .light-background-enabled .guide-doc {
            background-color: rgba(253, 244, 214, 0.9) !important;
            color: #3f2f1d;
            border-color: rgba(150, 112, 59, 0.52) !important;
            box-shadow: 0 0.9rem 2rem rgba(84, 58, 26, 0.14);
        }

        .light-background-enabled .bg-slate-950,
        .light-background-enabled .bg-slate-900,
        .light-background-enabled .bg-slate-900\/80,
        .light-background-enabled .bg-slate-900\/70,
        .light-background-enabled .bg-slate-900\/60,
        .light-background-enabled .bg-slate-900\/50,
        .light-background-enabled .bg-slate-800,
        .light-background-enabled .bg-slate-800\/90,
        .light-background-enabled .bg-slate-800\/80,
        .light-background-enabled .bg-slate-800\/70,
        .light-background-enabled .bg-slate-700,
        .light-background-enabled .bg-slate-700\/80,
        .light-background-enabled .bg-slate-700\/60 {
            background-color: rgba(253, 244, 214, 0.86) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .bg-slate-600,
        .light-background-enabled .bg-slate-500,
        .light-background-enabled .hover\:bg-slate-500:hover,
        .light-background-enabled .hover\:bg-slate-600:hover,
        .light-background-enabled .hover\:bg-slate-700:hover {
            background-color: #ead8ad !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .text-white,
        .light-background-enabled .text-gray-100,
        .light-background-enabled .text-gray-200 {
            color: #2d1f12 !important;
        }

        .light-background-enabled .text-gray-300,
        .light-background-enabled .text-gray-400 {
            color: #6f5633 !important;
        }

        .light-background-enabled .text-gray-500 {
            color: #8a6b3f !important;
        }

        .light-background-enabled .border-slate-900,
        .light-background-enabled .border-slate-800,
        .light-background-enabled .border-slate-700,
        .light-background-enabled .border-slate-600,
        .light-background-enabled .border-slate-500 {
            border-color: rgba(150, 112, 59, 0.52) !important;
        }

        .light-background-enabled .lobby-competitive-label {
            background-color: rgba(254, 226, 226, 0.62) !important;
            border-color: rgba(185, 28, 28, 0.48) !important;
        }

        .light-background-enabled .lobby-competitive-text {
            color: #dc2626 !important;
        }

        .light-background-enabled .competitive-decision-timeline {
            background: rgba(255, 248, 220, 0.92);
            border-color: rgba(139, 92, 246, 0.5);
            color: #3f2f1d;
            box-shadow: 0 0.7rem 1.4rem rgba(84, 58, 26, 0.16);
        }

        .light-background-enabled .competitive-decision-ring {
            background: conic-gradient(
                #8b5cf6 var(--competitive-decision-angle),
                rgba(196, 181, 253, 0.34) 0
            );
            box-shadow: 0 0 0.85rem rgba(124, 58, 237, 0.18), inset 0 0 0 1px rgba(76, 29, 149, 0.08);
        }

        .light-background-enabled .competitive-decision-ring-core {
            background: rgba(255, 248, 220, 0.96);
            border-color: rgba(139, 92, 246, 0.26);
        }

        .light-background-enabled .competitive-decision-ring-label {
            color: #4c1d95;
        }

        .light-background-enabled #competitive-decision-time {
            color: #7c3aed;
        }

        .light-background-enabled .competitive-decision-timeline.is-danger .competitive-decision-ring {
            box-shadow: 0 0 1rem rgba(124, 58, 237, 0.24), inset 0 0 0 1px rgba(76, 29, 149, 0.08);
        }

        .light-background-enabled #lobby-competitive-enabled {
            accent-color: #dc2626;
        }

        .light-background-enabled input:not([type="checkbox"]):not([type="radio"]),
        .light-background-enabled textarea,
        .light-background-enabled select,
        .light-background-enabled .stat-input,
        .light-background-enabled .skill-compendium-select {
            background-color: rgba(255, 248, 223, 0.96) !important;
            color: #2d1f12 !important;
            border-color: rgba(120, 80, 35, 0.48) !important;
            box-shadow: inset 0 0.05rem 0.16rem rgba(84, 58, 26, 0.08);
        }

        .light-background-enabled input::placeholder,
        .light-background-enabled textarea::placeholder {
            color: #9a7b4d;
        }

        .light-background-enabled .btn {
            color: #ffffff;
            border: 1px solid rgba(84, 58, 26, 0.16);
            box-shadow: 0 0.35rem 0.8rem rgba(84, 58, 26, 0.12);
        }

        .light-background-enabled .btn.bg-slate-700,
        .light-background-enabled .btn.bg-slate-600,
        .light-background-enabled .btn.bg-slate-500,
        .light-background-enabled .game-log-icon-btn,
        .light-background-enabled .skill-compendium-mode-btn,
        .light-background-enabled .setup-preset-btn,
        .light-background-enabled .stat-step-btn,
        .light-background-enabled #game-log-toggle,
        .light-background-enabled .action-btn {
            background-color: #ead8ad !important;
            color: #3f2f1d !important;
            border: 1px solid rgba(150, 112, 59, 0.6) !important;
            box-shadow: 0 0.3rem 0.7rem rgba(84, 58, 26, 0.1);
        }

        .light-background-enabled .btn.bg-slate-700:hover,
        .light-background-enabled .btn.bg-slate-600:hover,
        .light-background-enabled .btn.bg-slate-500:hover,
        .light-background-enabled .game-log-icon-btn:hover,
        .light-background-enabled .skill-compendium-mode-btn:hover,
        .light-background-enabled .setup-preset-btn:hover,
        .light-background-enabled .stat-step-btn:hover,
        .light-background-enabled #game-log-toggle:hover,
        .light-background-enabled .action-btn:hover {
            background-color: #dcc28f !important;
            color: #2d1f12 !important;
        }

        .light-background-enabled .setup-preset-btn.active,
        .light-background-enabled .action-btn.selected,
        .light-background-enabled .skill-compendium-mode-btn.active,
        .light-background-enabled #ss-view-toggle.active {
            background-color: #facc15 !important;
            color: #3f2f1d !important;
            border-color: #c28a13 !important;
        }

        .light-background-enabled .controls-resource-summary {
            color: #6f5224;
        }

        .light-background-enabled .controls-resource-line b,
        .light-background-enabled .controls-resource-value {
            color: #2d1f12;
        }

        .light-background-enabled .controls-resource-label {
            color: #6f5224;
        }

        .light-background-enabled .controls-resource-chip {
            background-color: rgba(255, 247, 220, 0.86);
            border-color: rgba(150, 112, 59, 0.5);
            color: #3f2f1d;
        }

        .light-background-enabled .controls-resource-chip.empty {
            color: #7c5a2a;
        }

        .light-background-enabled #active-player-info span.cursor-help,
        .light-background-enabled #inspected-player-info span.cursor-help,
        .light-background-enabled #ss-character-panel span.cursor-help,
        .light-background-enabled #active-player-info .active-skill-status-tag,
        .light-background-enabled #inspected-player-info .active-skill-status-tag,
        .light-background-enabled #ss-character-panel .active-skill-status-tag {
            color: #2d1f12;
        }

        .light-background-enabled #active-player-info .active-skill-status-tag span,
        .light-background-enabled #inspected-player-info .active-skill-status-tag span,
        .light-background-enabled #ss-character-panel .active-skill-status-tag span {
            color: inherit;
        }

        .light-background-enabled .guide-skill-tag.active,
        .light-background-enabled .skill-tree-node.active .skill-tree-type-badge,
        .light-background-enabled span[class*="bg-purple-900"][class*="text-purple-200"],
        .light-background-enabled span[class*="text-purple-200"].mr-2,
        .light-background-enabled #active-player-info .active-skill-status-tag.text-purple-200,
        .light-background-enabled #inspected-player-info .active-skill-status-tag.text-purple-200,
        .light-background-enabled #ss-character-panel .active-skill-status-tag.text-purple-200 {
            color: #6b21a8 !important;
        }

        .light-background-enabled .guide-skill-tag.reactive,
        .light-background-enabled .skill-tree-node.reactive .skill-tree-type-badge,
        .light-background-enabled span[class*="bg-yellow-900"][class*="text-yellow-200"],
        .light-background-enabled span[class*="text-yellow-200"].mr-2,
        .light-background-enabled #active-player-info .active-skill-status-tag.text-yellow-200,
        .light-background-enabled #inspected-player-info .active-skill-status-tag.text-yellow-200,
        .light-background-enabled #ss-character-panel .active-skill-status-tag.text-yellow-200 {
            color: #92400e !important;
        }

        .light-background-enabled #ss-skill-detail,
        .light-background-enabled #ss-character-panel,
        .light-background-enabled #ss-character-panel .skill-learning-character-stats,
        .light-background-enabled #ss-character-panel .skill-learning-character-base-stats,
        .light-background-enabled #ss-character-panel .bg-slate-800,
        .light-background-enabled #p0-learned-skills,
        .light-background-enabled [id^="p"][id$="-learned-skills"],
        .light-background-enabled .skill-compendium-detail,
        .light-background-enabled .guide-terrain-grid div,
        .light-background-enabled .guide-mode-card,
        .light-background-enabled .postgame-section,
        .light-background-enabled .postgame-log-panel {
            background-color: rgba(255, 248, 223, 0.72) !important;
            color: #3f2f1d !important;
            border-color: rgba(150, 112, 59, 0.48) !important;
        }

        .light-background-enabled #game-over-screen {
            background-color: rgba(238, 218, 174, 0.88);
        }

        .light-background-enabled .postgame-header {
            background: rgba(238, 218, 174, 0.76);
            border-bottom-color: rgba(150, 112, 59, 0.5);
        }

        .light-background-enabled .postgame-section h2 {
            color: #3f2f1d;
        }

        .light-background-enabled #winner-text {
            color: #374151 !important;
        }

        .light-background-enabled .postgame-player-card,
        .light-background-enabled .postgame-data-card,
        .light-background-enabled .postgame-leader-card {
            background: rgba(253, 244, 214, 0.82);
            border-color: rgba(150, 112, 59, 0.58);
        }

        .light-background-enabled .postgame-stat-grid div,
        .light-background-enabled .postgame-combat-grid div,
        .light-background-enabled .postgame-data-grid > div,
        .light-background-enabled .postgame-skill-tag {
            background: rgba(255, 248, 223, 0.9);
            border-color: rgba(150, 112, 59, 0.5);
            color: #3f2f1d;
        }

        .light-background-enabled .postgame-combat-title {
            color: #6b21a8;
        }

        .light-background-enabled .postgame-stat-grid span,
        .light-background-enabled .postgame-combat-grid span,
        .light-background-enabled .postgame-skill-tag em {
            color: #7b5f37;
        }

        .light-background-enabled .postgame-stat-grid b,
        .light-background-enabled .postgame-combat-grid b,
        .light-background-enabled .postgame-data-grid b {
            color: #2d1f12;
        }

        .light-background-enabled .postgame-leader-detail {
            color: #7b5f37;
        }

        .light-background-enabled .postgame-empty {
            color: #7b5f37;
            border-color: rgba(150, 112, 59, 0.52);
            background: rgba(255, 248, 223, 0.5);
        }

        .light-background-enabled .modal-overlay {
            background-color: rgba(238, 218, 174, 0.74);
        }

        .light-background-enabled .health-bar-container {
            background-color: #d6bb84;
        }

        .light-background-enabled #game-log-count {
            background-color: #dcc28f;
            color: #3f2f1d;
        }

        .light-background-enabled [class*="bg-slate-"] {
            background-color: rgba(253, 244, 214, 0.86) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled [class*="border-slate-"] {
            border-color: rgba(150, 112, 59, 0.52) !important;
        }

        .light-background-enabled [class*="text-gray-"] {
            color: #6f5633 !important;
        }

        .light-background-enabled [class*="text-gray-100"],
        .light-background-enabled [class*="text-gray-200"] {
            color: #2d1f12 !important;
        }

        .light-background-enabled .btn[class*="bg-slate-"],
        .light-background-enabled button[class*="bg-slate-"] {
            background-color: #ead8ad !important;
            color: #3f2f1d !important;
            border-color: rgba(150, 112, 59, 0.6) !important;
        }

        .light-background-enabled .btn[class*="bg-slate-"]:hover,
        .light-background-enabled button[class*="bg-slate-"]:hover {
            background-color: #dcc28f !important;
            color: #2d1f12 !important;
        }

        .light-background-enabled .setup-preset-btn.active,
        .light-background-enabled .action-btn.selected,
        .light-background-enabled .skill-compendium-mode-btn.active,
        .light-background-enabled #ss-view-toggle.active {
            background-color: #facc15 !important;
            color: #3f2f1d !important;
            border-color: #c28a13 !important;
        }

        .light-background-enabled .setup-preset-option {
            background: rgba(255, 248, 223, 0.9) !important;
            border-color: rgba(150, 112, 59, 0.52) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .setup-preset-option:hover {
            background: rgba(255, 242, 205, 0.98) !important;
            border-color: #c28a13 !important;
        }

        .light-background-enabled .setup-preset-option-title {
            color: #92400e !important;
        }

        .light-background-enabled .setup-preset-option-icon {
            background: rgba(150, 112, 59, 0.18) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .setup-preset-option-stats {
            color: #4a341b !important;
        }

        .light-background-enabled .setup-preset-option-stats em {
            color: #6f5633 !important;
        }

        .light-background-enabled .setup-preset-option-stats b {
            color: #2d1f12 !important;
        }

        .light-background-enabled .setup-preset-option-skills {
            color: #4a341b !important;
        }

        .light-background-enabled .setup-preset-option-warning {
            color: #92400e !important;
        }

        .light-background-enabled #reaction-modal [class*="text-yellow-"],
        .light-background-enabled #reaction-modal .reaction-skill-name,
        .light-background-enabled #reaction-modal .reaction-skill-name:hover {
            color: #7c3aed !important;
        }

        .light-background-enabled #reaction-modal .reaction-skill-name {
            border-bottom-color: rgba(124, 58, 237, 0.65);
        }

        .light-background-enabled #reaction-modal #reaction-desc,
        .light-background-enabled #reaction-modal [class*="text-gray-"],
        .light-background-enabled #reaction-modal [class*="text-slate-"] {
            color: #374151 !important;
        }

        .light-background-enabled #reaction-modal .btn {
            color: #ffffff !important;
        }

        .light-background-enabled .turn-avatar.current:not(.terrain-turn-avatar) {
            border-color: #7c3aed !important;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28), 0 0 12px rgba(76, 29, 149, 0.36);
        }

        .light-background-enabled input:not([type="checkbox"]):not([type="radio"]),
        .light-background-enabled textarea,
        .light-background-enabled select,
        .light-background-enabled .stat-input,
        .light-background-enabled .skill-compendium-select {
            background-color: rgba(255, 248, 223, 0.96) !important;
            color: #2d1f12 !important;
        }

        .light-background-enabled .guide-doc-header,
        .light-background-enabled .skill-compendium-header {
            background: rgba(238, 218, 174, 0.72);
            border-color: rgba(150, 112, 59, 0.48);
        }

        .light-background-enabled .guide-doc h3,
        .light-background-enabled .guide-hero h3 {
            color: #3f2f1d;
        }

        .light-background-enabled .guide-doc p,
        .light-background-enabled .guide-small-text,
        .light-background-enabled .guide-steps p,
        .light-background-enabled .guide-skill-row p {
            color: #5f4a2b;
        }

        .light-background-enabled .guide-hero,
        .light-background-enabled .guide-section,
        .light-background-enabled .guide-footer {
            border-color: rgba(150, 112, 59, 0.38);
        }

        .light-background-enabled .guide-info-card,
        .light-background-enabled .guide-stat-grid div,
        .light-background-enabled .guide-terrain-grid div,
        .light-background-enabled .guide-skill-row div,
        .light-background-enabled .guide-competitive-grid div,
        .light-background-enabled .guide-mode-note,
        .light-background-enabled .changelog-entry {
            background: rgba(255, 248, 223, 0.82);
            border-color: rgba(150, 112, 59, 0.5);
            color: #3f2f1d;
        }

        .light-background-enabled .guide-info-card strong,
        .light-background-enabled .guide-stat-grid b,
        .light-background-enabled .guide-terrain-grid b,
        .light-background-enabled .guide-competitive-grid b,
        .light-background-enabled .changelog-entry h4 {
            color: #2d1f12;
        }

        .light-background-enabled .guide-info-card span,
        .light-background-enabled .guide-stat-grid span,
        .light-background-enabled .guide-terrain-grid em,
        .light-background-enabled .guide-competitive-grid span,
        .light-background-enabled .changelog-entry ul,
        .light-background-enabled .changelog-meta {
            color: #6f5633;
        }

        .light-background-enabled .guide-flow span,
        .light-background-enabled .guide-steps span {
            background: rgba(255, 248, 223, 0.9);
            border-color: rgba(150, 112, 59, 0.56);
            color: #3f2f1d;
        }

        .light-background-enabled .guide-flow i {
            color: #8a6b3f;
        }

        .light-background-enabled .skill-compendium-detail,
        .light-background-enabled .skill-compendium-tree,
        .light-background-enabled #ss-skill-list.skill-learning-tree-host,
        .light-background-enabled .skill-learning-tree-empty {
            background: rgba(255, 248, 223, 0.78) !important;
            border-color: rgba(150, 112, 59, 0.5) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .skill-compendium-controls label,
        .light-background-enabled .skill-compendium-detail-head,
        .light-background-enabled .skill-compendium-effect,
        .light-background-enabled .skill-compendium-card-desc,
        .light-background-enabled .skill-learning-tree-empty {
            color: #5f4a2b !important;
        }

        .light-background-enabled .skill-compendium-meta div,
        .light-background-enabled .skill-compendium-card {
            background: rgba(255, 248, 223, 0.88) !important;
            border-color: rgba(150, 112, 59, 0.5) !important;
            color: #3f2f1d !important;
        }

        .light-background-enabled .skill-compendium-card:hover,
        .light-background-enabled .skill-compendium-card.selected {
            background: rgba(252, 239, 199, 0.98) !important;
            border-color: #d6a329 !important;
        }

        .light-background-enabled .skill-compendium-meta div > span {
            color: #7b5f37 !important;
        }

        .light-background-enabled .skill-compendium-meta b,
        .light-background-enabled .skill-status-entry,
        .light-background-enabled .skill-status-icon {
            color: #2d1f12 !important;
        }

        .light-background-enabled .skill-effect-swatch {
            border-color: rgba(120, 80, 35, 0.45);
        }

        .light-background-enabled .skill-tag-icon {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }

        .light-background-enabled .skill-tree-edge {
            stroke: #9a7b4d;
            opacity: 0.6;
        }

        .light-background-enabled .skill-tree-edge.path {
            stroke: #c28a13;
            opacity: 0.98;
        }

        .light-background-enabled .skill-tree-node {
            background: rgba(255, 248, 223, 0.92);
            border-color: rgba(150, 112, 59, 0.54);
            color: #3f2f1d;
            box-shadow: 0 0.35rem 0.9rem rgba(84, 58, 26, 0.12);
        }

        .light-background-enabled .skill-tree-node:hover {
            border-color: #d6a329;
        }

        .light-background-enabled .skill-tree-node.active {
            background: rgba(243, 232, 255, 0.92);
            border-color: rgba(126, 34, 206, 0.58);
        }

        .light-background-enabled .skill-tree-node.passive {
            background: rgba(255, 248, 223, 0.94);
            border-color: rgba(100, 116, 139, 0.62);
        }

        .light-background-enabled .skill-tree-node.reactive {
            background: rgba(254, 243, 199, 0.92);
            border-color: rgba(194, 65, 12, 0.58);
        }

        .light-background-enabled .skill-tree-node.required {
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5), 0 0.35rem 0.9rem rgba(84, 58, 26, 0.14);
            border-color: #c28a13;
        }

        .light-background-enabled .skill-tree-node.selected {
            box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.62), 0 0 1rem rgba(194, 138, 19, 0.28);
            border-color: #c28a13;
        }

        .light-background-enabled .skill-tree-type-badge {
            background: rgba(255, 248, 223, 0.86);
            border-color: rgba(120, 80, 35, 0.45);
            color: #3f2f1d;
        }

        .light-background-enabled .skill-learning-tree-node.learned {
            background: rgba(220, 252, 231, 0.92);
            border-color: rgba(34, 197, 94, 0.62);
        }

        .light-background-enabled .skill-learning-tree-node.blocked {
            opacity: 0.62;
        }

        .light-background-enabled .skill-learning-node-status {
            background: rgba(255, 248, 223, 0.76);
            border-color: rgba(150, 112, 59, 0.45);
            color: #7b5f37;
        }

        .light-background-enabled .skill-learning-node-status.learned {
            color: #15803d;
            border-color: rgba(34, 197, 94, 0.54);
        }

        .light-background-enabled .new-player-tutorial-card-header {
            background: rgba(238, 218, 174, 0.72);
            border-bottom-color: rgba(150, 112, 59, 0.48);
        }

        .light-background-enabled .new-player-tutorial-kicker {
            color: #92400e;
        }

        .light-background-enabled .new-player-tutorial-card h2,
        .light-background-enabled .new-player-tutorial-body strong {
            color: #2d1f12;
        }

        .light-background-enabled .new-player-tutorial-body {
            color: #4a341b;
        }

        .light-background-enabled .new-player-tutorial-body .tutorial-note {
            color: #5f4a2b;
        }

        .light-background-enabled .new-player-tutorial-progress {
            background: rgba(214, 187, 132, 0.72);
        }

        .light-background-enabled .campaign-compendium {
            color: #3f2f1d;
        }

        .light-background-enabled .campaign-compendium-toolbar label,
        .light-background-enabled .campaign-card-label,
        .light-background-enabled .campaign-compendium-facts span {
            color: #7b5f37;
        }

        .light-background-enabled .campaign-compendium-hero {
            background: rgba(236, 253, 245, 0.58);
            border-color: rgba(34, 197, 94, 0.34);
        }

        .light-background-enabled .campaign-compendium-hero h3,
        .light-background-enabled .campaign-compendium-section h3,
        .light-background-enabled .campaign-card-title-main b,
        .light-background-enabled .campaign-event-title b {
            color: #2d1f12;
        }

        .light-background-enabled .campaign-compendium-hero p,
        .light-background-enabled .campaign-card-text,
        .light-background-enabled .campaign-event-desc {
            color: #5f4a2b;
        }

        .light-background-enabled .campaign-compendium-facts div,
        .light-background-enabled .campaign-compendium-card,
        .light-background-enabled .campaign-compendium-event,
        .light-background-enabled .campaign-meta-grid div {
            background: rgba(255, 248, 223, 0.86);
            border-color: rgba(150, 112, 59, 0.5);
            color: #3f2f1d;
        }

        .light-background-enabled .campaign-compendium-facts b,
        .light-background-enabled .campaign-meta-grid b {
            color: #2d1f12;
        }

        .light-background-enabled .campaign-card-title-main img {
            background: rgba(255, 248, 223, 0.92);
            border-color: rgba(150, 112, 59, 0.42);
        }

        .light-background-enabled .campaign-tag {
            background: rgba(209, 250, 229, 0.74);
            border-color: rgba(5, 150, 105, 0.46);
            color: #047857;
        }

        .light-background-enabled .campaign-skill-pill {
            background: rgba(255, 248, 223, 0.92);
            border-color: rgba(150, 112, 59, 0.48);
            color: #3f2f1d;
        }

        .light-background-enabled .campaign-event-number {
            background: rgba(209, 250, 229, 0.82);
            border-color: rgba(5, 150, 105, 0.54);
            color: #047857;
        }

        .light-background-enabled .campaign-event-flow {
            color: #6f5633;
        }

        .light-background-enabled .campaign-event-flow b {
            color: #3f2f1d;
        }

        .light-background-enabled .campaign-compendium-empty {
            background: rgba(255, 248, 223, 0.58);
            border-color: rgba(150, 112, 59, 0.48);
            color: #7b5f37;
        }