/* ==========================================================================
   PILOT PREP — APPLE MINIMALIST DESIGN SYSTEM (2026)
   Clean, typography-driven, frosted glassmorphism, responsive, cohesive.
   ========================================================================== */

:root {
    /* Apple Light Mode Palette */
    --md-surface:               #ffffff;
    --md-surface-dim:           #f5f5f7;
    --md-surface-container-low: #fbfbfd;
    --md-surface-container:     #ebebf0;
    --md-surface-container-high:#e2e2e7;
    --md-on-surface:            #1d1d1f;
    --md-on-surface-variant:    #6e6e73;

    /* Apple Blue & Accents */
    --md-primary:               #0071e3;
    --md-primary-container:     #e8f2ff;
    --md-on-primary:            #ffffff;
    --md-on-primary-container:  #003166;

    --md-secondary:             #6e6e73;
    --md-secondary-container:   #e8e8ed;

    --md-correct:               #34c759;
    --md-correct-container:     #eafbee;
    --md-wrong:                 #ff3b30;
    --md-wrong-container:       #ffedea;
    --md-warning:               #ff9500;
    --md-warning-container:     #fff5e6;

    --border-glass:             rgba(0, 0, 0, 0.08);
    --border-glass-strong:      rgba(0, 0, 0, 0.16);
    --border-glow:              rgba(0, 113, 227, 0.2);

    /* Apple Card & Elevation Tokens */
    --apple-card-bg:            #ffffff;
    --apple-card-border:        rgba(0, 0, 0, 0.07);
    --apple-card-shadow:        0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    --apple-card-hover-shadow:  0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --apple-header-bg:          rgba(245, 245, 247, 0.85);

    /* Apple Button System */
    --apple-btn-primary-bg:     #0071e3;
    --apple-btn-primary-text:   #ffffff;
    --apple-btn-primary-hover:  #0077ed;
    --apple-btn-secondary-bg:   rgba(0, 0, 0, 0.05);
    --apple-btn-secondary-text: #1d1d1f;
    --apple-btn-secondary-border: rgba(0, 0, 0, 0.1);

    /* Typography */
    --md-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
    --md-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --font-sans: var(--md-font);
    --font-mono: var(--md-font-mono);

    /* Layout (No Sidebar) */
    --sidebar-w: 0px;
    --sidebar-w-expanded: 0px;
    --header-h: 56px;

    /* Legacy compatibility aliases */
    --accent: var(--md-primary);
    --accent-rgb: 0, 113, 227;
    --correct: var(--md-correct);
    --wrong: var(--md-wrong);
    --amber: var(--md-warning);
    --text-main: var(--md-on-surface);
    --text-dim: var(--md-on-surface-variant);
    --bg-deep: var(--md-surface-dim);
    --bg-card: var(--apple-card-bg);
    --bg-card-hover: var(--md-surface-container);
}

:root[data-theme="night"], body[data-theme="night"] {
    /* Apple Dark Mode Palette */
    --md-surface:               #161618;
    --md-surface-dim:           #000000;
    --md-surface-container-low: #121214;
    --md-surface-container:     #242426;
    --md-surface-container-high:#2c2c2e;
    --md-on-surface:            #f5f5f7;
    --md-on-surface-variant:    #86868b;

    /* Apple Dark Accents */
    --md-primary:               #2997ff;
    --md-primary-container:     #142b47;
    --md-on-primary:            #000000;
    --md-on-primary-container:  #d0e6ff;

    --md-secondary:             #86868b;
    --md-secondary-container:   #2c2c2e;

    --md-correct:               #30d158;
    --md-correct-container:     #0d3816;
    --md-wrong:                 #ff453a;
    --md-wrong-container:       #421210;
    --md-warning:               #ffd60a;
    --md-warning-container:     #423805;

    --border-glass:             rgba(255, 255, 255, 0.08);
    --border-glass-strong:      rgba(255, 255, 255, 0.18);
    --border-glow:              rgba(41, 151, 255, 0.25);

    /* Apple Dark Card & Elevation Tokens */
    --apple-card-bg:            #161618;
    --apple-card-border:        rgba(255, 255, 255, 0.08);
    --apple-card-shadow:        0 4px 20px rgba(0, 0, 0, 0.5);
    --apple-card-hover-shadow:  0 12px 36px rgba(0, 0, 0, 0.8);
    --apple-header-bg:          rgba(0, 0, 0, 0.8);

    /* Apple Dark Button System */
    --apple-btn-primary-bg:     #f5f5f7;
    --apple-btn-primary-text:   #000000;
    --apple-btn-primary-hover:  #ffffff;
    --apple-btn-secondary-bg:   rgba(255, 255, 255, 0.08);
    --apple-btn-secondary-text: #f5f5f7;
    --apple-btn-secondary-border: rgba(255, 255, 255, 0.12);

    --accent: var(--md-primary);
    --accent-rgb: 41, 151, 255;
    --correct: var(--md-correct);
    --wrong: var(--md-wrong);
    --amber: var(--md-warning);
    --text-main: var(--md-on-surface);
    --text-dim: var(--md-on-surface-variant);
    --bg-deep: var(--md-surface-dim);
    --bg-card: var(--apple-card-bg);
    --bg-card-hover: var(--md-surface-container);
}

/* ==========================================================================
   GLOBAL RESET & APPLE MINIMAL FOUNDATIONS
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--md-surface-dim);
    color: var(--md-on-surface);
    font-family: var(--md-font);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    letter-spacing: -0.01em;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Apple Smooth Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-glass-strong);
    border-radius: 980px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-on-surface-variant);
}

/* ==========================================================================
   WORKSPACE & LAYOUT (NO SIDEBAR)
   ========================================================================== */

.workspace {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    background-color: var(--md-surface-dim);
    overflow: hidden;
    position: relative;
}

/* Sidebar hidden permanently */
.sidebar,
.sidebar-overlay,
.toggle-sidebar-btn,
#sidebarToggle,
#sidebarOverlay,
#view-login,
.login-container,
.auth-loading-screen {
    display: none !important;
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 0;
    scroll-behavior: smooth;
}

/* ==========================================================================
   GLOBAL APPLE MINIMALIST HEADER
   ========================================================================== */

.apple-global-header {
    width: 100%;
    height: var(--header-h);
    background: var(--apple-header-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-glass);
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.apple-header-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Brand */
.apple-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: opacity 0.2s ease;
}
.apple-brand:hover {
    opacity: 0.85;
}
.apple-brand-icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 980px;
}
.apple-brand-details {
    display: flex;
    flex-direction: column;
}
.apple-brand-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--md-on-surface);
    line-height: 1.2;
}
.apple-brand-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
}

/* Center Title / Global Back Button */
.apple-header-center {
    display: flex;
    align-items: center;
    gap: 12px;
}
.apple-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    letter-spacing: 0.02em;
}

/* Header Actions */
.apple-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.apple-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    height: 34px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--md-font);
}
.apple-icon-btn:hover {
    background: var(--md-surface-container);
    border-color: var(--border-glass-strong);
    transform: translateY(-1px);
}
.apple-icon-btn:active {
    transform: scale(0.96);
}

.theme-toggle-btn .theme-day-icon {
    display: none;
}
.theme-toggle-btn .theme-night-icon {
    display: inline-block;
}
:root[data-theme="day"] .theme-toggle-btn .theme-day-icon {
    display: inline-block;
}
:root[data-theme="day"] .theme-toggle-btn .theme-night-icon {
    display: none;
}

/* ==========================================================================
   UNIVERSAL APPLE BUTTON SYSTEM (FOR ALL 26 GAMES)
   ========================================================================== */

/* Standard Apple Back to Lobby Button */
.apple-back-btn,
.btn-back-lobby {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    height: 34px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    font-family: var(--md-font);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-decoration: none;
}
.apple-back-btn:hover,
.btn-back-lobby:hover {
    background: var(--md-primary);
    color: #ffffff !important;
    border-color: transparent;
    transform: translateX(-2px);
    box-shadow: 0 4px 12px var(--border-glow);
}
.apple-back-btn:active,
.btn-back-lobby:active {
    transform: scale(0.96) translateX(-2px);
}

.apple-header-back-btn {
    background: var(--md-primary-container);
    color: var(--md-primary);
    border-color: transparent;
}

/* Dedicated Apple In-Game Navigation Bar */
.apple-game-top-nav {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 24px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Unified Action Buttons across all engines */
.apple-btn,
.btn-action,
.btn-launch,
.lobby-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    min-height: 38px;
    border-radius: 980px;
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    text-align: center;
    outline: none;
}

/* Primary Button (Apple High-Contrast) */
.apple-btn-primary,
.btn-action.primary,
.btn-launch,
.lobby-start-btn {
    background: var(--apple-btn-primary-bg) !important;
    color: var(--apple-btn-primary-text) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.apple-btn-primary:hover,
.btn-action.primary:hover,
.btn-launch:hover,
.lobby-start-btn:hover {
    background: var(--apple-btn-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.apple-btn-primary:active,
.btn-action.primary:active,
.btn-launch:active,
.lobby-start-btn:active {
    transform: scale(0.97);
}

/* Secondary Button */
.apple-btn-secondary,
.btn-action:not(.primary) {
    background: var(--apple-btn-secondary-bg) !important;
    color: var(--apple-btn-secondary-text) !important;
    border: 1px solid var(--apple-btn-secondary-border) !important;
}
.apple-btn-secondary:hover,
.btn-action:not(.primary):hover {
    background: var(--md-surface-container) !important;
    border-color: var(--border-glass-strong) !important;
    transform: translateY(-1px);
}
.apple-btn-secondary:active,
.btn-action:not(.primary):active {
    transform: scale(0.97);
}

/* ==========================================================================
   UNIFIED OPTION CHOICE BUTTONS (A, B, C, D ACROSS ALL GAMES)
   ========================================================================== */

.option-btn,
.choice-card,
.twod-option,
.twod-choice-btn,
.sky-option,
.skyassemble-option,
.ans-btn,
.cube-choice,
.ca-choice-btn,
.cubeassembly-choice,
.flipbox-choice,
.spatial-option,
.box-option,
.unfolding-option,
.figuralreasoning-choice,
.fr-choice,
.aircraftrotation-option,
.deviation-option,
.shape-scan-option,
.scale-choice,
.key-choice,
.keyfitting-option,
.nback-btn,
.hiddenimage-btn,
.similarity-btn,
.comp-check-item,
.shortmemory-choice,
.stmgrid-btn,
.series-choice,
.gridnumber-btn,
.numestimate-btn,
button.option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    color: var(--md-on-surface);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    position: relative;
    outline: none;
}

.option-btn:hover,
.choice-card:hover,
.twod-option:hover,
.twod-choice-btn:hover,
.sky-option:hover,
.skyassemble-option:hover,
.ans-btn:hover,
.cube-choice:hover,
.ca-choice-btn:hover,
.cubeassembly-choice:hover,
.flipbox-choice:hover,
.spatial-option:hover,
.box-option:hover,
.unfolding-option:hover,
.figuralreasoning-choice:hover,
.fr-choice:hover,
.aircraftrotation-option:hover,
.deviation-option:hover,
.shape-scan-option:hover,
.scale-choice:hover,
.key-choice:hover,
.keyfitting-option:hover,
.nback-btn:hover,
.hiddenimage-btn:hover,
.similarity-btn:hover,
.comp-check-item:hover,
.shortmemory-choice:hover,
.stmgrid-btn:hover,
.series-choice:hover,
.gridnumber-btn:hover,
.numestimate-btn:hover,
button.option-card:hover {
    border-color: var(--md-primary);
    background: var(--md-surface-container);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--border-glow);
}

.option-btn:active,
.choice-card:active,
.twod-option:active,
.sky-option:active,
.ans-btn:active,
.cube-choice:active,
.flipbox-choice:active,
.spatial-option:active,
.box-option:active,
.figuralreasoning-choice:active {
    transform: scale(0.97);
}

/* Selected State */
.option-btn.selected,
.choice-card.selected,
.twod-option.selected,
.sky-option.selected,
.ans-btn.selected,
.cube-choice.selected,
.flipbox-choice.selected,
.spatial-option.selected,
.box-option.selected,
.figuralreasoning-choice.selected {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 2px var(--md-primary) !important;
}

/* Correct Answer (Apple Mint) */
.option-btn.correct,
.choice-card.correct,
.twod-option.correct,
.twod-choice-btn.correct,
.sky-option.correct,
.skyassemble-option.correct,
.ans-btn.correct,
.cube-choice.correct,
.ca-choice-btn.correct,
.cubeassembly-choice.correct,
.flipbox-choice.correct,
.spatial-option.correct,
.box-option.correct,
.unfolding-option.correct,
.figuralreasoning-choice.correct,
.fr-choice.correct,
.aircraftrotation-option.correct,
.deviation-option.correct,
.shape-scan-option.correct,
.scale-choice.correct,
.key-choice.correct,
.keyfitting-option.correct,
.nback-btn.correct,
.hiddenimage-btn.correct,
.similarity-btn.correct,
.comp-check-item.correct,
.shortmemory-choice.correct,
.stmgrid-btn.correct,
.series-choice.correct,
.gridnumber-btn.correct,
.numestimate-btn.correct,
button.option-card.correct {
    border-color: var(--md-correct) !important;
    background: var(--md-correct-container) !important;
    color: var(--md-correct) !important;
    box-shadow: 0 0 0 2px var(--md-correct) !important;
}

/* Wrong Answer (Apple Crimson) */
.option-btn.wrong,
.choice-card.wrong,
.twod-option.wrong,
.twod-choice-btn.wrong,
.sky-option.wrong,
.skyassemble-option.wrong,
.ans-btn.wrong,
.cube-choice.wrong,
.ca-choice-btn.wrong,
.cubeassembly-choice.wrong,
.flipbox-choice.wrong,
.spatial-option.wrong,
.box-option.wrong,
.unfolding-option.wrong,
.figuralreasoning-choice.wrong,
.fr-choice.wrong,
.aircraftrotation-option.wrong,
.deviation-option.wrong,
.shape-scan-option.wrong,
.scale-choice.wrong,
.key-choice.wrong,
.keyfitting-option.wrong,
.nback-btn.wrong,
.hiddenimage-btn.wrong,
.similarity-btn.wrong,
.comp-check-item.wrong,
.shortmemory-choice.wrong,
.stmgrid-btn.wrong,
.series-choice.wrong,
.gridnumber-btn.wrong,
.numestimate-btn.wrong,
button.option-card.wrong {
    border-color: var(--md-wrong) !important;
    background: var(--md-wrong-container) !important;
    color: var(--md-wrong) !important;
    box-shadow: 0 0 0 2px var(--md-wrong) !important;
}

/* ==========================================================================
   APPLE MINIMAL LOBBY LAYOUT & CARDS
   ========================================================================== */

.apple-lobby-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 24px 80px;
}

/* Hero Section */
.apple-hero-section {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apple-hero-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--md-primary);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.apple-hero-title {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--md-on-surface);
    margin-bottom: 12px;
    line-height: 1.1;
}

.apple-hero-desc {
    font-size: clamp(14px, 1.8vw, 17px);
    color: var(--md-on-surface-variant);
    max-width: 680px;
    margin-bottom: 32px;
    line-height: 1.5;
}

/* Minimal Stats Grid */
.apple-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 960px;
    margin-bottom: 36px;
}

@media (max-width: 768px) {
    .apple-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.apple-stat-card {
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--apple-card-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.apple-stat-card:hover {
    border-color: var(--border-glass-strong);
    transform: translateY(-2px);
}
.apple-stat-card .asc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.apple-stat-card .asc-value {
    font-size: 28px;
    font-weight: 800;
    font-family: var(--md-font-mono);
    color: var(--md-on-surface);
    line-height: 1.2;
    margin-bottom: 4px;
}
.apple-stat-card .asc-value.text-accent {
    color: var(--md-primary);
}
.apple-stat-card .asc-value.text-green {
    color: var(--md-correct);
}
.apple-stat-card .asc-sub {
    font-size: 11px;
    color: var(--md-on-surface-variant);
}

/* Filter Toolbar */
.apple-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Apple Segmented Control */
.apple-segmented-control {
    display: inline-flex;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    padding: 4px;
    border-radius: 980px;
    gap: 4px;
    overflow-x: auto;
    max-width: 100%;
}

.apple-segment-btn {
    padding: 7px 16px;
    border-radius: 980px;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--md-font);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.apple-segment-btn:hover {
    color: var(--md-on-surface);
}
.apple-segment-btn.active {
    background: var(--apple-card-bg);
    color: var(--md-on-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Search Box */
.apple-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}
.apple-search-icon {
    position: absolute;
    left: 14px;
    font-size: 14px;
    color: var(--md-on-surface-variant);
    pointer-events: none;
}
.apple-search-input {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 38px;
    border-radius: 980px;
    background: var(--apple-card-bg);
    border: 1px solid var(--border-glass);
    color: var(--md-on-surface);
    font-family: var(--md-font);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}
.apple-search-input:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px var(--border-glow);
}
.apple-search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    cursor: pointer;
}

/* 26 Game Cards Grid */
.game-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

/* Apple Style Game Card */
.game-select-card {
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--apple-card-shadow);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
}
.game-select-card:hover {
    border-color: var(--border-glass-strong);
    transform: translateY(-3px);
    box-shadow: var(--apple-card-hover-shadow);
}
.game-select-card:active {
    transform: scale(0.98) translateY(-2px);
}

.gsc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.gsc-icon {
    font-size: 26px;
    line-height: 1;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gsc-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-select-card h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
    margin-bottom: 8px;
}
.game-select-card p {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gsc-progress {
    width: 100%;
    height: 4px;
    background: var(--apple-btn-secondary-bg);
    border-radius: 980px;
    overflow: hidden;
    margin-bottom: 8px;
}
.gsc-progress-bar {
    height: 100%;
    background: var(--md-primary);
    border-radius: 980px;
    transition: width 0.3s ease;
}

.gsc-best {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-on-surface);
    margin-bottom: 6px;
}

.gsc-sparkline-container {
    height: 28px;
    margin-bottom: 14px;
}

.gsc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-glass);
}
.gsc-stats {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

.apple-section-header {
    margin-top: 48px;
    margin-bottom: 16px;
}
.apple-section-header h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
}

/* ==========================================================================
   UNIFIED IN-GAME HUD & STAGES
   ========================================================================== */

.content-view {
    display: none;
    width: 100%;
    padding-bottom: 60px;
}
.content-view.active {
    display: block;
}

/* Pre-Game Lobby Cards */
.game-lobby {
    width: 100%;
    max-width: 800px;
    margin: 20px auto 40px;
    padding: 0 20px;
}
.game-lobby .lobby-content,
.game-lobby .lobby-card {
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: var(--apple-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.game-lobby h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: -0.02em;
}
.game-lobby .lobby-desc {
    font-size: 14px;
    color: var(--md-on-surface-variant);
    line-height: 1.6;
}
.game-lobby .lobby-best-record {
    padding: 8px 16px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    display: inline-block;
    width: fit-content;
}

/* Mode Selection Cards */
.lobby-modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.lobby-mode-card {
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}
.lobby-mode-card:hover {
    border-color: var(--border-glass-strong);
    background: var(--md-surface-container);
}
.lobby-mode-card.active {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px var(--md-primary);
    background: var(--apple-card-bg);
}
.lobby-mode-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 4px;
}
.lobby-mode-card p {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    line-height: 1.4;
}

/* In-game HUD Header */
.game-header {
    width: 100%;
    max-width: 1400px;
    margin: 10px auto 20px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 18px;
    box-shadow: var(--apple-card-shadow);
}
.game-header .game-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.game-header .game-info h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
}
.game-header .mode-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 980px;
    background: var(--md-primary-container);
    color: var(--md-primary);
    text-transform: uppercase;
}

/* In-game Stats Pills */
.game-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.g-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 980px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--border-glass);
}
.g-stat .gs-val {
    font-family: var(--md-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
}
.g-stat .gs-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Quiz Navigator Dots */
.quiz-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px auto;
    flex-wrap: wrap;
    max-width: 900px;
    padding: 0 20px;
}
.quiz-navigator button,
.quiz-nav-dot {
    width: 28px;
    height: 28px;
    border-radius: 980px;
    border: 1px solid var(--border-glass);
    background: var(--apple-card-bg);
    color: var(--md-on-surface);
    font-family: var(--md-font-mono);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.quiz-navigator button.current {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px var(--md-primary);
    font-weight: 700;
}
.quiz-navigator button.answered {
    background: var(--apple-btn-secondary-bg);
    color: var(--md-on-surface-variant);
}

/* Modal Overlay (Mission Complete) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.modal-window {
    background: var(--apple-card-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    max-width: 640px;
    width: 100%;
    padding: 36px 32px;
    animation: appleModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes appleModalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   PRESERVE GAME GEOMETRY & LAYOUT FROM ENGINE SPECIFICATIONS
   ========================================================================== */

/* ═══════════════════════════════════════════════
   PILOT PREP — GOOGLE MATERIAL DESIGN 3 THEME SYSTEM
   ═══════════════════════════════════════════════ */

:root {
    /* Surface layers */
    --md-surface:         #FFFFFF;
    --md-surface-dim:     #F3F3F6;
    --md-surface-container-low:    #F7F7FA;
    --md-surface-container:        #EDEDF2;
    --md-surface-container-high:   #E8E8ED;
    --md-on-surface:      #1D1B20;
    --md-on-surface-variant: #49454F;

    /* Primary (Indigo seed) */
    --md-primary:         #5B5BD6;
    --md-primary-container: #E8E8FF;
    --md-on-primary:      #FFFFFF;
    --md-on-primary-container: #1B1B6B;

    /* Secondary */
    --md-secondary:       #5C5D72;
    --md-secondary-container: #E1E0F9;

    /* Tertiary (Teal accent) */
    --md-tertiary:        #006B5E;
    --md-tertiary-container: #74F8E3;

    /* Semantic */
    --md-correct:         #1B873A;
    --md-correct-container: #D4FFDD;
    --md-wrong:           #BA1A1A;
    --md-wrong-container: #FFDAD6;
    --md-warning:         #7D5800;
    --md-warning-container: #FFDEA6;

    /* Outline & Divider */
    --md-outline:         #79747E;
    --md-outline-variant: #CAC4D0;

    /* Elevation shadows (Google style) */
    --md-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    --md-elevation-2: 0 1px 2px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.1);
    --md-elevation-3: 0 4px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12);

    /* Shape */
    --md-shape-sm: 8px;
    --md-shape-md: 12px;
    --md-shape-lg: 16px;
    --md-shape-xl: 24px;    /* pill buttons */

    /* Typography */
    --md-font: 'Inter', 'Noto Sans Thai', sans-serif;
    --md-font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --sidebar-w: 72px;
    --sidebar-w-expanded: 240px;
    --header-h: 48px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Legacy aliases for compatibility with inline styles/dynamic js code */
    --accent: var(--md-primary);
    --accent-rgb: 91, 91, 214;
    --correct: var(--md-correct);
    --wrong: var(--md-wrong);
    --amber: var(--md-warning);
    --text-main: var(--md-on-surface);
    --text-dim: var(--md-on-surface-variant);
    --bg-deep: var(--md-surface-dim);
    --bg-card: var(--md-surface);
    --bg-card-hover: var(--md-surface-container-low);
    --border-glass: var(--md-outline-variant);
    --border-glow: rgba(91, 91, 214, 0.15);
    --font-sans: var(--md-font);
    --font-mono: var(--md-font-mono);
    
    /* Leaderboard colors */
    --rank-1-color: #b45309;
    --rank-2-color: #475569;
    --rank-3-color: #c2410c;
    --leaderboard-item-bg: rgba(0, 0, 0, 0.02);
    --leaderboard-item-border: rgba(0, 0, 0, 0.05);
}

/* ═══ NIGHT MODE ═══ */
:root[data-theme="night"] {
    --md-surface:         #141218;
    --md-surface-dim:     #0D0B10;
    --md-surface-container-low:    #1D1B20;
    --md-surface-container:        #211F26;
    --md-surface-container-high:   #2B2930;
    --md-on-surface:      #E6E0E9;
    --md-on-surface-variant: #CAC4D0;

    --md-primary:         #C5C4FF;
    --md-primary-container: #3F3F96;
    --md-on-primary:      #2B2B80;
    --md-on-primary-container: #E8E8FF;

    --md-secondary:       #C5C4DD;
    --md-secondary-container: #444559;

    --md-correct:         #6EDB8A;
    --md-correct-container: #005315;
    --md-wrong:           #FFB4AB;
    --md-wrong-container: #690005;
    --md-warning:         #FBBF24;
    --md-warning-container: #5C4300;

    --md-outline:         #938F99;
    --md-outline-variant: #49454F;

    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.4);
    --md-elevation-2: 0 2px 6px rgba(0,0,0,0.4);
    --md-elevation-3: 0 4px 12px rgba(0,0,0,0.4);

    --accent-rgb: 197, 196, 255;
    --border-glow: rgba(197, 196, 255, 0.15);
    
    /* Leaderboard night colors */
    --rank-1-color: #fbbf24;
    --rank-2-color: #cbd5e1;
    --rank-3-color: #f97316;
    --leaderboard-item-bg: rgba(255, 255, 255, 0.02);
    --leaderboard-item-border: rgba(255, 255, 255, 0.04);
}

/* ══════════════ GENERAL RESET ══════════════ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--md-surface-dim);
    color: var(--md-on-surface);
    font-family: var(--md-font);
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    overscroll-behavior: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-outline);
}

/* ══════════════ VIEWPORT WRAPPERS ══════════════ */
.workspace {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--md-surface-dim);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.sidebar-overlay.active {
    display: block;
}

/* ══════════════ SIDEBAR / NAV RAIL ══════════════ */
.sidebar {
    width: var(--sidebar-w);
    height: 100%;
    background-color: var(--md-surface);
    border-right: 1px solid var(--md-outline-variant);
    display: flex;
    flex-direction: column;
    z-index: 110;
    transition: width 0.25s cubic-bezier(0.2, 0, 0, 1);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar.collapsed {
    width: 72px;
}

.sidebar.collapsed .logo-full {
    display: none;
}

.sidebar.collapsed .logo-compact {
    display: block !important;
}

.sidebar:not(.collapsed) {
    width: var(--sidebar-w-expanded);
}

.logo {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    overflow: hidden;
    border-bottom: 1px solid var(--md-outline-variant);
    flex-shrink: 0;
}

.logo-full {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--md-on-surface);
    white-space: nowrap;
}

.logo-accent {
    color: var(--md-primary);
}

.logo-sub {
    display: block;
    font-size: 8px;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    letter-spacing: 1px;
}

.logo-compact {
    font-weight: 800;
    font-size: 20px;
    color: var(--md-primary);
    width: 100%;
    text-align: center;
}

/* Navigation items */
.nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    gap: 4px;
    overflow-y: auto;
}

.nav-section-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--md-on-surface-variant);
    margin: 12px 12px 4px 12px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.sidebar.collapsed .nav-section-title {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px;
    border-radius: var(--md-shape-xl);
    cursor: pointer;
    position: relative;
    color: var(--md-on-surface-variant);
    font-family: var(--md-font);
    font-weight: 500;
    font-size: 12px;
    transition: background-color 0.15s, color 0.15s;
    outline: none;
    min-height: 40px;
}

.nav-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    z-index: 2;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 8px 0;
}

.sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.nav-text {
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
    z-index: 2;
}

.sidebar.collapsed .nav-text {
    display: none;
}

/* Active Navigation Item (Pill style) */
.nav-item::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 2px;
    bottom: 2px;
    border-radius: var(--md-shape-xl);
    background-color: transparent;
    z-index: 1;
    transition: background-color 0.2s;
}

.sidebar.collapsed .nav-item::before {
    left: 12px;
    right: 12px;
}

.nav-item.active {
    color: var(--md-on-primary-container);
    font-weight: 600;
}

.nav-item.active::before {
    background-color: var(--md-primary-container);
}

.nav-item:hover:not(.active)::before {
    background-color: var(--md-surface-container-high);
}

/* Played badge dot on rail icon */
.nav-item .nav-dot {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 6px;
    height: 6px;
    background-color: var(--md-correct);
    border-radius: 50%;
    display: none !important;
    z-index: 3;
}

.sidebar.collapsed .nav-item .nav-dot {
    right: 18px;
    top: 6px;
}

.nav-item .nav-dot.played {
    display: none !important;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--md-outline-variant);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-footer-text {
    display: none;
}

.sidebar-footer-text {
    font-size: 10px;
    color: var(--md-on-surface-variant);
    text-align: center;
}

/* Theme toggle button styling */
.nav-rail-theme-btn {
    background: transparent;
    border: 1px solid var(--md-outline);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--md-on-surface);
    transition: background-color 0.2s;
    outline: none;
}

.nav-rail-theme-btn:hover {
    background-color: var(--md-surface-container-high);
}

/* ══════════════ MAIN CONTENT WINDOW ══════════════ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* Header style (Google Style) */
.global-header {
    height: var(--header-h);
    background-color: var(--md-surface);
    border-bottom: 1px solid var(--md-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
}

.toggle-sidebar-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--md-on-surface);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.toggle-sidebar-btn:hover {
    background-color: var(--md-surface-container-high);
}

.header-title-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--md-on-surface);
}

.header-subtitle {
    font-size: 10px;
    color: var(--md-on-surface-variant);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sound and Shortcut buttons */
.btn-dashboard-shortcut {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    padding: 6px 14px;
    border-radius: var(--md-shape-xl);
    font-family: var(--md-font);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s;
}

.btn-dashboard-shortcut:hover {
    background-color: var(--md-secondary-container);
}

.sound-toggle-header {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-toggle-header:hover {
    background-color: var(--md-surface-container-high);
}

/* ══════════════ DASHBOARD CONTENT ══════════════ */
.content-view {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background-color: var(--md-surface-dim);
}

.content-view.active {
    display: flex;
}

#view-dashboard, #view-history_improvement {
    padding: 20px 30px;
    overflow-y: auto;
}

.view-header {
    margin-bottom: 20px;
}

.view-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 4px;
}

.view-header p {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

/* Stats Summary Row */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════
   2D PUZZLE (DEMO)
   ═══════════════════════════════════════════════ */
#twodpuzzle-stage {
    --tdp-shape-size: clamp(156px, 17.5vw, 236px);
    --tdp-artwork-multiplier: 1.14;
    --tdp-artwork-inset: 10px;
    --tdp-choice-label-reserve: 34px;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

#twodpuzzle-stage[data-puzzle-mode="mode1"] {
    --tdp-shape-size: clamp(108px, 10.2vw, 136px);
    --tdp-phone-shape-size: clamp(76px, 22vw, 88px);
}

#twodpuzzle-stage[data-puzzle-mode="mode2"] {
    --tdp-shape-size: clamp(160px, 17.4vw, 240px);
    --tdp-phone-shape-size: clamp(92px, 26vw, 110px);
}

#twodpuzzle-stage[data-puzzle-mode="mode3"] {
    --tdp-shape-size: clamp(96px, 10.5vw, 144px);
    --tdp-phone-shape-size: clamp(72px, 20vw, 88px);
}

#view-twodpuzzle .lobby-content {
    max-width: 940px;
}

.tdp-instruction {
    margin: 8px 0 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    background: var(--md-surface-container, rgba(255, 255, 255, 0.55));
    color: var(--md-on-surface, var(--text-main));
    font-weight: 650;
    line-height: 1.45;
}

.tdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: 12px;
    min-height: 430px;
    height: min(62vh, 650px);
}

.tdp-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    background: var(--md-surface-container-low, rgba(255, 255, 255, 0.72));
}

#twodpuzzle-stage .tdp-panel > .canvas-label {
    position: static;
    inset: auto;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--md-on-surface-variant, var(--text-dim));
    font-size: 11px;
    line-height: 1.2;
}

.tdp-target-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 12px;
}

.tdp-choice-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 12px;
}

.tdp-target {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

#twodpuzzle-stage .tdp-target-graphic,
#twodpuzzle-stage .tdp-target-pieces-graphic,
#twodpuzzle-stage .tdp-choice {
    --tdp-frame-ready: 1;
}

#twodpuzzle-stage .tdp-target-graphic,
#twodpuzzle-stage .tdp-target-pieces-graphic {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

#twodpuzzle-stage .tdp-choice {
    padding: var(--tdp-choice-label-reserve) 8px 8px;
}

#twodpuzzle-stage .tdp-svg {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

.tdp-pieces-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    width: min(92%, 520px);
    gap: 10px;
}

.tdp-piece-tile {
    position: relative;
    min-width: 0;
    width: calc(var(--tdp-shape-size) + 2px);
    height: calc(var(--tdp-shape-size) + 2px);
    padding: 0;
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    background: var(--md-surface, #fff);
}

.tdp-piece-tile > span {
    position: absolute;
    top: 5px;
    left: 7px;
    z-index: 1;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
}

.tdp-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.tdp-choices.mode1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tdp-choice {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 88px;
    padding: 8px;
    overflow: hidden;
    border: 2px solid var(--border-glass);
    border-radius: 8px;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, var(--text-main));
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
    .tdp-choice:hover {
        border-color: var(--md-primary, var(--accent));
        transform: translateY(-1px);
    }
}

.tdp-choice:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--md-primary, #4f46e5) 38%, transparent);
    outline-offset: 2px;
}

.tdp-choice.selected {
    border-color: var(--md-primary, var(--accent));
    background: color-mix(in srgb, var(--md-primary, #4f46e5) 10%, var(--md-surface, #fff));
}

.tdp-choice.correct {
    border-color: var(--md-correct, #16a34a);
    background: color-mix(in srgb, var(--md-correct, #16a34a) 13%, var(--md-surface, #fff));
}

.tdp-choice.wrong {
    border-color: var(--md-wrong, #dc2626);
    background: color-mix(in srgb, var(--md-wrong, #dc2626) 12%, var(--md-surface, #fff));
}

.tdp-choice-label {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background: var(--md-on-surface, #20242d);
    color: var(--md-surface, #fff);
    font-weight: 800;
}

.tdp-explanation {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--md-correct, #16a34a) 55%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-correct, #16a34a) 8%, var(--md-surface, #fff));
}

.tdp-explanation[hidden] {
    display: none;
}

.tdp-explanation-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.tdp-explanation-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tdp-explanation-trial,
.tdp-explanation-solution {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    gap: 5px;
}

.tdp-explanation-artwork-label {
    color: var(--md-on-surface-variant, var(--text-dim));
    font-size: 11px;
    font-weight: 750;
}

.tdp-explanation-graphic {
    display: grid;
    place-items: center;
    min-width: 0;
    width: 100%;
    height: clamp(86px, 16vh, 150px);
    max-height: 150px;
    overflow: hidden;
}

#twodpuzzle-stage .tdp-explanation-graphic .tdp-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.tdp-controls {
    flex-wrap: nowrap;
    gap: 10px;
}

.tdp-controls .btn-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.tdp-controls .btn-action {
    min-height: 44px;
}

@media (max-width: 1180px) and (orientation: landscape) {
    #twodpuzzle-stage[data-puzzle-mode="mode1"] {
        --tdp-shape-size: clamp(116px, 12.4vw, 136px);
    }

    #twodpuzzle-stage[data-puzzle-mode="mode2"] {
        --tdp-shape-size: clamp(156px, 16vw, 176px);
    }

    #twodpuzzle-stage[data-puzzle-mode="mode3"] {
        --tdp-shape-size: clamp(90px, 9.8vw, 108px);
    }

    .tdp-layout {
        grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
        min-height: 390px;
        height: min(59vh, 540px);
    }

    .tdp-panel {
        padding: 9px;
    }

    .tdp-choices {
        gap: 7px;
    }

    .tdp-choice {
        min-height: 76px;
        padding: 5px;
    }

    .tdp-explanation { font-size: 12px; }
}

@media (max-width: 699px) {
    .tdp-explanation-comparison {
        grid-template-columns: 1fr;
    }

    .tdp-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .tdp-target-panel,
    .tdp-choice-panel {
        min-height: 360px;
    }

    .tdp-controls,
    .tdp-controls .btn-group {
        flex-wrap: wrap;
        width: 100%;
    }

    .tdp-controls .btn-action {
        flex: 1 1 130px;
    }
}

@media (max-width: 560px), (max-height: 430px) and (max-width: 920px) {
    #view-twodpuzzle .lobby-content {
        max-width: 100%;
        padding: 12px;
    }

    #view-twodpuzzle .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #view-twodpuzzle .lobby-mode-card {
        padding: 10px;
        min-height: 0;
    }

    #view-twodpuzzle .lobby-mode-card h4 {
        font-size: 13px;
    }

    #view-twodpuzzle .lobby-mode-card p,
    #view-twodpuzzle .lobby-desc {
        font-size: 11px;
        line-height: 1.35;
    }

    #twodpuzzle-stage {
        padding: 10px;
        overflow-y: auto;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode1"],
    #twodpuzzle-stage[data-puzzle-mode="mode2"],
    #twodpuzzle-stage[data-puzzle-mode="mode3"] {
        --tdp-shape-size: var(--tdp-phone-shape-size);
    }

    #twodpuzzle-stage .game-header {
        height: auto;
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #twodpuzzle-stage .game-info {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    #twodpuzzle-stage .game-info h2 {
        font-size: 14px;
        white-space: nowrap;
    }

    #twodpuzzle-stage .mode-tag {
        font-size: 8px;
        text-align: right;
    }

    #twodpuzzle-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    #twodpuzzle-stage .g-stat {
        justify-content: center;
        min-width: 0;
        padding: 3px 6px;
        gap: 3px;
    }

    #twodpuzzle-stage .gs-val {
        font-size: 11px;
    }

    #twodpuzzle-stage .gs-label {
        font-size: 7px;
    }

    #twodpuzzle-stage .quiz-navigator {
        margin-bottom: 6px;
        padding-bottom: 4px;
    }

    #twodpuzzle-stage .quiz-nav-btn {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    #twodpuzzle-stage .tdp-instruction {
        margin: 5px 0 7px;
        padding: 8px 10px;
        font-size: 11px;
        line-height: 1.35;
    }

    #twodpuzzle-stage .tdp-layout {
        grid-template-columns: 1fr;
        gap: 8px;
        height: auto;
        min-height: 0;
    }

    #twodpuzzle-stage .tdp-panel {
        padding: 8px;
        border-radius: 8px;
    }

    #twodpuzzle-stage .tdp-target-panel {
        min-height: 142px;
        grid-template-rows: auto minmax(104px, 1fr) auto;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode2"] .tdp-target-panel {
        min-height: 158px;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode3"] .tdp-target-panel {
        min-height: 150px;
    }

    #twodpuzzle-stage .tdp-choice-panel {
        min-height: 260px;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode1"] .tdp-choice-panel {
        min-height: 288px;
    }

    #twodpuzzle-stage .tdp-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(72px, 1fr);
        gap: 6px;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode1"] .tdp-choices {
        grid-auto-rows: minmax(78px, 1fr);
    }

    #twodpuzzle-stage[data-puzzle-mode="mode2"] .tdp-choices {
        grid-auto-rows: minmax(94px, 1fr);
    }

    #twodpuzzle-stage .tdp-choice {
        min-height: 0;
        padding: var(--tdp-choice-label-reserve) 5px 5px;
        border-radius: 7px;
    }

    #twodpuzzle-stage {
        --tdp-choice-label-reserve: 28px;
    }

    #twodpuzzle-stage .tdp-choice-label {
        top: 5px;
        left: 6px;
        width: 21px;
        height: 21px;
        font-size: 10px;
    }

    #twodpuzzle-stage .tdp-explanation {
        gap: 7px;
        margin-top: 6px;
        padding: 7px 8px;
        font-size: 11px;
    }

    #twodpuzzle-stage .tdp-controls {
        height: auto;
        min-height: 44px;
        gap: 8px;
        flex-wrap: wrap;
        align-items: stretch;
    }

    #twodpuzzle-stage .tdp-controls .btn-group {
        display: flex !important;
        flex: 1 1 100%;
        gap: 7px;
        width: 100%;
    }

    #twodpuzzle-stage .tdp-controls .btn-action {
        min-height: 40px;
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 9px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #twodpuzzle-stage:not(.quiz-active) .tdp-controls {
        display: grid;
        grid-template-columns: minmax(92px, 0.82fr) minmax(112px, 1.18fr);
        align-items: stretch;
    }

    #twodpuzzle-stage:not(.quiz-active) .tdp-controls .btn-group {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }

    #twodpuzzle-stage:not(.quiz-active) #twodpuzzle-finish-practice-btn,
    #twodpuzzle-stage:not(.quiz-active) .tdp-controls .btn-group .btn-action {
        width: 100%;
    }

    #twodpuzzle-stage.quiz-active .game-controls {
        position: static;
        justify-content: stretch !important;
    }

    #twodpuzzle-stage.quiz-active .game-controls .btn-group:last-child {
        display: flex !important;
        position: static;
        height: auto;
    }

    #twodpuzzle-stage.quiz-active .game-controls [id$="-prev-btn"],
    #twodpuzzle-stage.quiz-active .game-controls [id$="-next-btn"],
    #twodpuzzle-stage.quiz-active .game-controls [id$="-submit-btn"] {
        position: static;
        transform: none;
    }
}

@media (max-height: 430px) and (max-width: 920px) and (orientation: landscape) {
    #twodpuzzle-stage[data-puzzle-mode="mode1"] {
        --tdp-shape-size: 64px;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode2"] {
        --tdp-shape-size: 78px;
    }

    #twodpuzzle-stage[data-puzzle-mode="mode3"] {
        --tdp-shape-size: 58px;
    }

    #twodpuzzle-stage {
        padding: 8px;
    }

    #twodpuzzle-stage .game-header {
        display: grid;
        grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    #twodpuzzle-stage .game-info {
        display: block;
    }

    #twodpuzzle-stage .game-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #twodpuzzle-stage .tdp-layout {
        grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
        gap: 8px;
        min-height: 184px;
        height: auto;
    }

    #twodpuzzle-stage .tdp-target-panel,
    #twodpuzzle-stage .tdp-choice-panel,
    #twodpuzzle-stage[data-puzzle-mode="mode1"] .tdp-choice-panel {
        min-height: 184px;
    }

    #twodpuzzle-stage .tdp-target-panel {
        grid-template-rows: auto minmax(126px, 1fr) auto;
    }

    #twodpuzzle-stage .tdp-choices {
        grid-auto-rows: minmax(56px, 1fr);
    }

    #twodpuzzle-stage[data-puzzle-mode="mode1"] .tdp-choices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(70px, 1fr);
    }

    #twodpuzzle-stage[data-puzzle-mode="mode2"] .tdp-choices {
        grid-auto-rows: minmax(72px, 1fr);
    }

    #twodpuzzle-stage .tdp-instruction {
        display: none;
    }

    #twodpuzzle-stage .tdp-controls {
        flex-wrap: nowrap;
        align-items: center;
        height: 40px;
        min-height: 40px;
        padding-top: 5px;
    }

    #twodpuzzle-stage .tdp-controls .btn-group {
        flex: 0 1 auto;
        width: auto;
    }

    #twodpuzzle-stage .tdp-controls .btn-action {
        flex: 0 1 auto;
        min-width: 96px;
        min-height: 36px;
        padding: 5px 8px;
    }
}

/* ═══════════════════════════════════════════════
   CUBE ASSEMBLY
   ═══════════════════════════════════════════════ */
#cubeassembly-stage {
    gap: 0;
}

#cubeassembly-stage .game-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
}

#cubeassembly-stage .ca-prompt {
    flex: 0 0 auto;
    margin: 4px 0 8px;
}

#cubeassembly-board {
    display: grid;
    flex: 1 1 auto;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
    min-height: 0;
    overflow: hidden;
}

#cubeassembly-prompt-panel {
    position: relative;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

#cubeassembly-prompt-panel > .canvas-label {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    width: auto;
    margin: 0;
    pointer-events: none;
}

#cubeassembly-prompt-slots {
    display: grid;
    min-height: 0;
    gap: clamp(8px, 1vw, 14px);
}

#cubeassembly-stage[data-difficulty="easy"] #cubeassembly-prompt-slots {
    grid-template-rows: minmax(0, 1fr);
}

#cubeassembly-stage:not([data-difficulty="easy"]) #cubeassembly-prompt-slots {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

#cubeassembly-choice-grid {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: inherit;
    min-height: 0;
}

.ca-choice,
.ca-piece {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    background: var(--md-surface-container-low);
}

.ca-choice canvas,
.ca-piece canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.ca-piece-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    pointer-events: none;
    font-weight: 700;
}

.ca-choice.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ca-choice.correct {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 12%, var(--bg-card));
}

.ca-choice.wrong {
    border-color: #f43f5e;
    background: color-mix(in srgb, #f43f5e 12%, var(--bg-card));
}

.ca-layer-toggle-btn[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ca-spinner {
    display: none;
    width: 1em;
    height: 1em;
    margin-left: .55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ca-spin .7s linear infinite;
    vertical-align: -.15em;
}

@keyframes ca-spin {
    to { transform: rotate(360deg); }
}

#cubeassembly-lobby.is-loading .ca-spinner {
    display: inline-block;
}

#cubeassembly-lobby.is-loading .ca-start-copy {
    opacity: .75;
}

.ca-unsupported-device {
    display: none;
}

.ca-piece.is-reviewing canvas,
.ca-choice.is-reviewing canvas {
    cursor: grab;
}

.ca-piece.is-reviewing canvas:active,
.ca-choice.is-reviewing canvas:active {
    cursor: grabbing;
}

@media (min-width: 768px) and (max-width: 1024px) {
    #cubeassembly-stage {
        padding: 8px;
    }

    #cubeassembly-board {
        gap: 8px;
    }

    #cubeassembly-stage .game-header {
        gap: 10px;
    }

    #cubeassembly-stage .g-stat {
        min-width: 52px;
    }
}

@media (max-width: 767px) {
    #cubeassembly-board {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow-y: auto;
    }

    #cubeassembly-prompt-panel,
    #cubeassembly-choice-grid {
        grid-column: 1;
        grid-row: auto;
    }
}

.stats-card {
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    padding: 16px;
    box-shadow: var(--md-elevation-1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--md-outline-variant);
}

.sc-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--md-primary);
    font-family: var(--md-font-mono);
}

/* Game Card Grid */
.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    padding-bottom: 6px;
}

.game-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.game-select-card {
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    padding: 16px;
    box-shadow: var(--md-elevation-1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--md-outline-variant);
    min-height: 200px;
}

.game-select-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--md-elevation-2);
}

.gsc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.gsc-icon {
    font-size: 20px;
}

.gsc-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: var(--md-secondary-container);
    color: var(--md-on-surface);
    padding: 2px 8px;
    border-radius: var(--md-shape-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.device-support-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--md-on-surface-variant);
}

.dashboard-device-support {
    margin: 0 0 8px;
}

.lobby-device-support {
    justify-content: center;
    margin: -4px 0 12px;
}

.device-support-chip {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--md-primary);
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.device-support-chip + .device-support-chip::before {
    content: "•";
    margin-right: 6px;
    color: var(--md-on-surface-variant);
    opacity: 0.55;
}

.device-support-chip.is-unsupported {
    color: var(--md-on-surface-variant);
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.game-select-card h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 4px;
}

.game-select-card p {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    margin-bottom: auto;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress bar inside card */
.gsc-progress {
    height: 4px;
    background-color: var(--md-surface-container-high);
    border-radius: 2px;
    overflow: hidden;
    margin: 12px 0 6px 0;
}

.gsc-progress-bar {
    height: 100%;
    background-color: var(--md-primary);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.gsc-best {
    font-size: 10px;
    color: var(--md-on-surface-variant);
    margin-bottom: 8px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px dashed transparent;
}

.gsc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.gsc-stats {
    font-size: 10px;
    color: var(--md-on-surface-variant);
}

.btn-launch {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    padding: 6px 16px;
    border-radius: var(--md-shape-xl);
    font-family: var(--md-font);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--md-elevation-1);
    transition: background-color 0.2s;
}

.game-select-card:hover .btn-launch {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

/* Badges section */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.badge-item {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    padding: 12px 8px;
    text-align: center;
    opacity: 0.35;
    transition: opacity 0.3s, border-color 0.3s;
    box-shadow: var(--md-elevation-1);
}

.badge-item.unlocked {
    opacity: 1;
    border-color: var(--md-warning);
    background-color: var(--md-warning-container);
}

.badge-icon {
    font-size: 24px;
    margin-bottom: 4px;
    display: block;
}

.badge-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-surface);
}

.badge-desc {
    font-size: 9px;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
    line-height: 1.3;
}

/* Flight logs section */
.flight-logs-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-1);
    overflow-x: auto;
    overflow-y: auto;
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
    flex-shrink: 0 !important;
}

.flight-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.flight-logs-table th {
    background-color: var(--md-surface-container);
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    border-bottom: 1px solid var(--md-outline-variant);
}

.flight-logs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
}

.flight-logs-table tr:last-child td {
    border-bottom: none;
}

/* ══════════════ GAME LOBBY DESIGN ══════════════ */
.game-lobby {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    background-color: var(--md-surface-dim);
}

.lobby-content, .lobby-card {
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    padding: 24px;
    box-shadow: var(--md-elevation-2);
    max-width: 560px;
    width: 100%;
    border: 1px solid var(--md-outline-variant);
}

.lobby-content h2, .lobby-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 8px;
}

.lobby-desc {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    line-height: 1.5;
    margin-bottom: 16px;
}

.lobby-best-record {
    font-size: 11px;
    padding: 8px 12px;
    border-radius: var(--md-shape-md);
    background-color: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    margin-bottom: 16px;
    color: var(--md-on-surface);
}

.lobby-modes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.lobby-mode-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-md);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.lobby-mode-card.active {
    background-color: var(--md-primary-container);
    border-color: var(--md-primary);
    color: var(--md-on-primary-container);
}

.lobby-mode-card h4 {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.lobby-mode-card p {
    font-size: 10px;
    color: var(--md-on-surface-variant);
    line-height: 1.4;
}

.lobby-settings-grid, .lobby-settings-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    background-color: var(--md-surface-container-low);
    padding: 12px;
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
}

.lobby-settings-item {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lobby-settings-item label {
    font-size: 10px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
}

.lobby-settings-item select {
    width: 100%;
}

.lobby-start-btn {
    width: 100%;
    margin-top: 10px;
}

.game-launch-loading {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    background: var(--md-surface);
    color: var(--text-main);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.game-launch-loading[hidden] {
    display: none;
}

.game-launch-loading .loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 242, 254, .2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ══════════════ GAME PLAY SCREEN ══════════════ */
.game-stage {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    background-color: var(--md-surface-dim);
    height: 100%;
    overflow: hidden;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--md-outline-variant);
    margin-bottom: 12px;
    height: 48px;
    flex-shrink: 0;
}

.game-info h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-on-surface);
}

.mode-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--md-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-stats {
    display: flex;
    gap: 8px;
}

.g-stat {
    display: flex;
    align-items: center;
    background-color: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-xl);
    padding: 4px 10px;
    gap: 4px;
}

.gs-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-primary);
    font-family: var(--md-font-mono);
}

.gs-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    font-weight: 600;
}

.game-play-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Short-Term Memory stage settings. Standard game stage is used for vertical alignment. */
#shortmemory-stage .game-info {
    min-width: 0;
}

#shortmemory-stage .game-stats {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Gameplay area inherits standard vertical layout in gameplay mode.
   These styles apply ONLY during review mode. */
#shortmemory-stage.shortmemory-review-mode .game-play-area {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: max(76px, calc(60px + var(--safe-top)));
    padding-bottom: 0;
}

#shortmemory-stage.shortmemory-review-mode #shortmemory-recall-area.review-split-layout {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
}

/* Active gameplay constraints for Short-Term Memory */
#shortmemory-stage:not(.shortmemory-review-mode) .game-play-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 18px;
    scroll-padding-bottom: 96px;
}

#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-read-area,
#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-math-area,
#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-recall-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-math-area,
#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-recall-area {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-read-area .briefing-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-read-area .briefing-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px !important;
}

#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-math-container,
#shortmemory-stage:not(.shortmemory-review-mode) #shortmemory-recall-container {
    flex: none;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: visible !important;
    padding-bottom: 112px !important;
}

/* ══════════════ STANDARD SPLIT / OPTIONS VIEW ══════════════ */
.split-view {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.canvas-container {
    flex: 1;
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
}

.canvas-label {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    z-index: 5;
}

.canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.options-container {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.options-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: 100%;
}

.options-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
}

.option-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.option-card:hover {
    box-shadow: var(--md-elevation-2);
}

.option-card:active {
    transform: scale(0.98);
}

.option-card.selected,
.option-card.selected-exam {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
}

.option-card.selected-exam .option-num-label,
.option-card.selected-exam .option-text-val,
.option-card.selected-exam .bf-opt-label {
    color: var(--md-on-primary-container) !important;
}

.option-card.correct, .option-card.review-correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
}

.option-card.wrong, .option-card.review-wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
}

.option-num-label {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    z-index: 5;
}

.option-card canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ══════════════ GAME CONTROL FOOTER ══════════════ */
.game-controls {
    padding-top: 8px;
    border-top: 1px solid var(--md-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 48px;
}

/* Quiz Mode Overrides: keep navigation controls in their DOM order.
   Absolute positioning made the middle and right controls overlap at iPad widths. */
.game-stage.quiz-active .game-controls .btn-group:first-child {
    display: none !important;
}

.game-stage.quiz-active .game-controls {
    position: static;
    display: flex;
    justify-content: stretch !important;
    align-items: center;
    width: 100%;
}

.game-stage.quiz-active .game-controls .btn-group:last-child {
    display: flex !important;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    height: auto;
    min-width: 0;
    position: static !important;
    flex-wrap: nowrap;
}

.game-stage.quiz-active .game-controls [id$="-prev-btn"],
.game-stage.quiz-active .game-controls [id$="-next-btn"],
.game-stage.quiz-active .game-controls [id$="-submit-btn"],
.game-stage.quiz-active .game-controls [id$="-submit-exam-btn"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 1 1 0;
    min-width: 0;
}

#skyassemble-stage.quiz-active .game-controls .btn-group:first-child {
    display: flex !important;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 2;
}

#skyassemble-stage.quiz-active #sky-run-mode,
#skyassemble-stage.quiz-active #sky-game-mode,
#skyassemble-stage.quiz-active #sky-piece-count {
    display: none !important;
}

#skyassemble-stage.quiz-active #sky-lines-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 128px;
    padding: 6px 10px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background: var(--md-surface-container-low);
    color: var(--md-on-surface);
    font-size: 12px;
    font-weight: 600;
}

#skyassemble-stage.quiz-active .game-controls [id$="-prev-btn"] {
    left: 164px;
}

/* Sky Assemble keeps its guide-lines switch available during a quiz.  Place it
   before the navigation controls instead of overlaying the first button. */
#skyassemble-stage.quiz-active .game-controls {
    justify-content: stretch !important;
}

#skyassemble-stage.quiz-active .game-controls .btn-group:first-child {
    position: static !important;
    transform: none !important;
    flex: 0 1 auto;
}

#skyassemble-stage.quiz-active .game-controls .btn-group:last-child {
    width: auto;
    flex: 1 1 0;
}

@media (min-width: 600px) and (max-width: 1366px) {
    #skyassemble-stage.quiz-active .game-controls {
        min-height: 56px;
        height: 56px;
        padding: 4px 8px 0;
        overflow: visible;
    }

    #skyassemble-stage.quiz-active .game-controls .btn-group:first-child {
        left: 8px;
        max-width: 136px;
    }

    #skyassemble-stage.quiz-active #sky-lines-toggle {
        min-width: 0;
        max-width: 136px;
        padding: 5px 8px;
        white-space: nowrap;
        font-size: 11px;
    }

    #skyassemble-stage.quiz-active .game-controls [id$="-prev-btn"] {
        left: 152px;
    }

    #skyassemble-stage.quiz-active .game-controls [id$="-submit-btn"],
    #skyassemble-stage.quiz-active .game-controls [id$="-submit-exam-btn"] {
        right: 8px;
    }
}

@media (max-width: 480px) {
    .game-stage.quiz-active .game-controls button {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}

select {
    background-color: var(--md-surface);
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline);
    padding: 6px 12px;
    border-radius: var(--md-shape-sm);
    font-family: var(--md-font);
    font-size: 11px;
    outline: none;
    cursor: pointer;
}

select:focus {
    border-color: var(--md-primary);
}

.btn-action {
    background-color: var(--md-surface);
    color: var(--md-primary);
    border: 1px solid var(--md-outline);
    padding: 8px 16px;
    border-radius: var(--md-shape-xl);
    font-family: var(--md-font);
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.btn-action:hover {
    background-color: var(--md-surface-container-high);
}

.btn-action.primary {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
}

.btn-action.primary:hover {
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-color: var(--md-primary-container);
}

.btn-action.danger {
    background-color: var(--md-wrong);
    color: var(--md-on-primary);
    border-color: var(--md-wrong);
}

.btn-action.danger:hover {
    background-color: var(--md-wrong-container);
    color: var(--md-on-primary-container);
    border-color: var(--md-wrong-container);
}

/* ══════════════ QUIZ SCROLLABLE TRACK ══════════════ */
.quiz-navigator {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
    align-items: center;
}

.quiz-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--md-outline-variant);
    background-color: var(--md-surface);
    color: var(--md-on-surface-variant);
    font-family: var(--md-font-mono);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-nav-btn.answered {
    background-color: var(--md-secondary-container);
    color: var(--md-on-surface);
}

.quiz-nav-btn.active {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
}

/* ══════════════ DUAL N-BACK STYLES ══════════════ */
.nback-biosection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bio-modal {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    padding: 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--md-elevation-2);
}

.bio-modal h3 {
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--md-primary);
}

.bio-modal .desc {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    margin-bottom: 16px;
}

.bio-field {
    margin-bottom: 12px;
}

.bio-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    margin-bottom: 4px;
}

.bio-options {
    display: flex;
    gap: 6px;
}

.btn-bio {
    flex: 1;
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    color: var(--md-on-surface-variant);
    padding: 8px 4px;
    font-family: var(--md-font);
    font-size: 11px;
    border-radius: var(--md-shape-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-bio.selected {
    border-color: var(--md-primary);
    color: var(--md-on-primary-container);
    background-color: var(--md-primary-container);
}

.bio-warning {
    background-color: var(--md-wrong-container);
    border: 1px solid var(--md-wrong);
    border-radius: var(--md-shape-sm);
    padding: 8px;
    font-size: 10px;
    color: var(--md-on-surface);
    margin-top: 12px;
}

.nback-play-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
}

.nback-grid-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
}

.nback-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
}

.nb-cell {
    background-color: var(--md-surface-container-low);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    transition: background-color 0.1s, border-color 0.1s;
}

.nb-cell.active {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
    box-shadow: 0 0 16px var(--md-primary);
}

.nback-letter {
    position: absolute;
    font-size: 64px;
    font-weight: 800;
    color: var(--md-primary);
    pointer-events: none;
    font-family: var(--md-font);
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nback-indicator-row {
    display: none;
    height: 0;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.nb-ind {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    opacity: 0.45;
    min-width: 58px;
    padding: 4px 8px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.nb-ind.show {
    opacity: 1;
    transform: translateY(-1px);
}

.nb-ind.correct {
    color: var(--md-correct);
}

.nb-ind.wrong {
    color: var(--md-wrong);
}

#nb-ind-correct.show {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}

#nb-ind-wrong.show {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.35);
}

#nb-ind-miss.show {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
    color: #b45309;
}

.nback-response-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 520px);
}

.btn-nback-resp {
    min-width: 0;
    min-height: 68px;
    border: 1.5px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    box-shadow: var(--md-elevation-1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    font-family: var(--md-font);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    touch-action: manipulation;
}

.btn-nback-resp .nb-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    flex: 0 0 auto;
}

.btn-nback-resp .nb-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.btn-nback-resp .nb-copy strong {
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
}

.btn-nback-resp .nb-copy small {
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-nback-resp.visual {
    border-color: rgba(91, 91, 214, 0.38);
}

.btn-nback-resp.visual .nb-icon {
    background: rgba(91, 91, 214, 0.14);
    color: var(--md-primary);
}

.btn-nback-resp.audio {
    border-color: rgba(14, 165, 233, 0.38);
}

.btn-nback-resp.audio .nb-icon {
    background: rgba(14, 165, 233, 0.14);
    color: #0284c7;
}

.btn-nback-resp.waiting {
    opacity: 0.64;
    filter: saturate(0.65);
}

.btn-nback-resp.waiting .nb-copy small {
    color: var(--md-on-surface-variant);
}

@media (hover: hover) and (pointer: fine) {
    .btn-nback-resp:hover {
        transform: translateY(-2px);
        box-shadow: var(--md-elevation-2);
        background: var(--md-surface-container-highest);
    }
}

.btn-nback-resp:active,
.btn-nback-resp.pressed {
    transform: translateY(1px) scale(0.985);
    box-shadow: none;
}

.btn-nback-resp.visual.pressed {
    background: rgba(91, 91, 214, 0.18);
    border-color: var(--md-primary);
}

.btn-nback-resp.audio.pressed {
    background: rgba(14, 165, 233, 0.18);
    border-color: #0284c7;
}

/* ══════════════ BOX FOLDING MODULE ══════════════ */
.bf-layout-container {
    display: flex;
    gap: 16px;
    height: 100%;
    align-items: stretch;
}

.bf-layout-container .canvas-container {
    flex: 1;
    background-color: #FFFFFF !important; /* Always white background */
}

.bf-layout-container .canvas-container .canvas-label {
    display: none !important;
}

.bf-options-panel {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bf-choices-grid-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.bf-option-card {
    background-color: #FFFFFF !important; /* Always white background */
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--md-shape-md);
    cursor: pointer;
    position: relative;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--md-elevation-1);
    transition: transform 0.15s, box-shadow 0.15s;
    height: 110px !important;
    max-height: none !important;
}

.bf-option-card div {
    color: #181822 !important; /* Always dark text */
}

.bf-option-card:active {
    transform: translateY(0) scale(0.98);
}

.bf-option-card.selected-exam {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
}

.bf-option-card.correct {
    border-color: rgba(22, 163, 74, 0.72) !important;
    background-color: rgba(220, 252, 231, 0.45) !important;
}

:root[data-theme="night"] .bf-option-card.correct {
    border-color: rgba(74, 222, 128, 0.72) !important;
    background-color: rgba(20, 83, 45, 0.24) !important;
}

.bf-option-card.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
}

.bf-opt-canvas {
    display: block;
    height: 100%;
    max-height: 95px;
    width: auto;
    aspect-ratio: 1 / 1;
    background: transparent;
}

.bf-opt-label {
    position: absolute;
    top: 6px;
    left: 8px;
    font-family: var(--md-font-mono);
    font-size: 11px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    padding: 1px 6px;
    border-radius: 4px;
    z-index: 10;
}

.bf-option-card.selected-exam .bf-opt-label {
    color: #3b82f6 !important;
}

.bf-option-card.correct .bf-opt-label {
    color: var(--md-correct) !important;
}

.bf-option-card.wrong .bf-opt-label {
    color: var(--md-wrong) !important;
}

.bu-choices-grid-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.bu-choices-grid-area .bf-option-card {
    height: 100% !important;
    max-height: none !important;
    padding: 6px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bu-choices-grid-area .bf-opt-canvas {
    max-height: none !important;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* ══════════════ BALANCE SCALE MODULE ══════════════ */
.bs-layout-container {
    display: flex;
    gap: 16px;
    height: 100%;
    align-items: stretch;
}

.bs-scales-panel {
    flex: 1.2;
    background-color: var(--md-surface);
}

.bs-scales-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    padding: 10px;
}

.bs-choices-grid-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    height: 100%;
}

.bs-option-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    cursor: pointer;
    position: relative;
    box-shadow: var(--md-elevation-1);
    transition: transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-option-card canvas {
    max-height: 100%;
    max-width: 100%;
}

/* ══════════════ SIMILARITY TEST MODULE ══════════════ */
.similarity-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.sim-target-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.sim-target-card {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.similarity-tip {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    line-height: 1.5;
    background-color: var(--md-surface-container);
    padding: 12px;
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
}

.sim-choices-wrapper {
    flex: 1;
    min-height: 0;
}

.sim-choices-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    height: 100%;
}

.sim-choice-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--md-elevation-1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sim-choice-card:active {
    transform: scale(0.96);
}

.sim-choice-card.selected-exam {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
}

.sim-choice-card.correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
    box-shadow: 0 0 15px rgba(27, 135, 58, 0.15) !important;
}

.sim-choice-card.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
    box-shadow: 0 0 15px rgba(186, 26, 26, 0.15) !important;
}

.sim-choice-card canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ══════════════ NUMBER SERIES MODULE ══════════════ */
.series-scroll-panel {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.series-questions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.series-q-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--md-elevation-1);
}

.series-q-card.correct-card {
    border-color: var(--md-correct);
}
.series-q-card.wrong-card {
    border-color: var(--md-wrong);
}

.series-q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.series-q-no {
    font-family: var(--md-font-mono);
    font-size: 12px;
    color: var(--md-on-surface-variant);
    font-weight: 700;
}

.series-q-lbl {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background-color: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
    font-weight: 600;
}

.series-display {
    background-color: var(--md-surface-container-high);
    border-radius: 10px;
    padding: 14px 10px;
    margin-bottom: 15px;
    text-align: center;
    font-family: var(--md-font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: 1px;
}

.series-special-instruction {
    margin-bottom: 9px;
    color: var(--md-on-surface-variant);
    font-family: var(--md-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.series-double-blank,
.series-domino-row,
.series-wrong-term {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    letter-spacing: 0;
}

.series-pair,
.series-wrong-term > span[data-term-index] {
    padding: 5px 8px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 7px;
    background: var(--md-surface-container-low);
}

.series-wrong-term > span[data-term-index] {
    display: inline-grid;
    gap: 1px;
    min-width: 42px;
}

.series-wrong-term small {
    color: var(--md-on-surface-variant);
    font-size: 9px;
    font-weight: 600;
}

.series-arrow,
.series-comma {
    color: var(--md-on-surface-variant);
    font-weight: 500;
}

.series-two-row {
    display: grid;
    gap: 8px;
    letter-spacing: 0;
}

.series-two-row > div {
    display: grid;
    grid-template-columns: 38px repeat(4, minmax(38px, 1fr));
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 7px;
    background: var(--md-surface-container-low);
}

.series-row-label {
    color: var(--md-on-surface-variant);
    font-family: var(--md-font-sans);
    font-size: 10px;
    letter-spacing: 0;
}

.series-domino {
    display: inline-grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 7px;
    background: var(--md-surface-container-low);
}

.series-domino i {
    width: 1px;
    height: 20px;
    background: var(--md-outline-variant);
}

.series-hell-explanation {
    gap: 8px;
}

.series-hell-trap {
    padding: 7px 9px;
    border-left: 3px solid var(--md-wrong);
    border-radius: 4px;
    background: color-mix(in srgb, var(--md-wrong) 8%, transparent);
}

.series-blank {
    display: inline-block;
    min-width: 32px;
    border-bottom: 2.5px solid var(--md-primary);
    color: var(--md-primary);
}

.series-blank.correct {
    color: var(--md-correct);
    border-color: var(--md-correct);
}
.series-blank.wrong {
    color: var(--md-wrong);
    border-color: var(--md-wrong);
}

.series-choices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.btn-series-choice {
    background-color: var(--md-surface-container-low);
    border: 1px solid var(--md-outline-variant);
    padding: 10px;
    border-radius: 8px;
    color: var(--md-on-surface);
    font-family: var(--md-font-mono);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-series-choice:hover {
    background-color: var(--md-surface-container-high);
}

.btn-series-choice.selected {
    border-color: var(--md-primary);
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.btn-series-choice.disabled {
    cursor: default;
    opacity: 0.6;
}

.btn-series-choice.correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
    color: var(--md-correct) !important;
}

.btn-series-choice.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
    color: var(--md-wrong) !important;
}

.series-explain-box {
    margin-top: 12px;
    background-color: var(--md-surface-container-low);
    border-left: 3px solid var(--md-primary);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--md-on-surface-variant);
    line-height: 1.5;
}

.series-explain-box b {
    color: var(--md-on-surface);
}

.series-explain-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.series-explain-answer,
.series-explain-rule {
    color: var(--md-on-surface);
}

.series-explain-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.series-explain-step {
    font-family: var(--md-font-mono);
    color: var(--md-on-surface-variant);
    overflow-wrap: anywhere;
}

.series-explain-note {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant);
}

/* ══════════════ COMPUTER CHECKING MODULE ══════════════ */
.cc-layout-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
}

.cc-question-instruction {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    margin-bottom: 8px;
    text-align: center;
}

.cc-choices-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    flex: 1;
    align-items: center;
}

#computerchecking-stage .cc-option-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-md);
    padding: 12px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    box-shadow: var(--md-elevation-1);
    transition: all 0.15s;
}

#computerchecking-stage .cc-option-card.selected {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
}

#computerchecking-stage .cc-option-card.correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
}

#computerchecking-stage .cc-option-card.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
}

.cc-opt-label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 8px;
    font-weight: 700;
    color: var(--md-on-surface-variant);
}

.cc-opt-text {
    font-family: var(--md-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
}

/* Timed Challenge (Quiz) Mode layout for Computer Checking */
.cc-quiz-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: 16px;
}

.cc-quiz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    padding-bottom: 8px;
}

.cc-quiz-row-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-primary);
    min-width: 32px;
    text-align: right;
}

.cc-quiz-choices-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    flex: 1;
}

/* ══════════════ SHORT TERM MEMORY MODULE ══════════════ */
.briefing-card {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-1);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.briefing-header {
    background-color: var(--md-surface-container);
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.briefing-content {
    padding: 16px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    color: var(--md-on-surface);
    max-height: 450px;
}

.briefing-content p {
    margin-bottom: 12px;
}

.math-opt-btn, .recall-opt-btn {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-md);
    padding: 10px;
    font-family: var(--md-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--md-elevation-1);
}

.math-opt-btn.selected, .recall-opt-btn.selected {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
    color: var(--md-on-primary-container) !important;
}

.math-opt-btn.correct, .recall-opt-btn.correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
}

.math-opt-btn.wrong, .recall-opt-btn.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
}

/* ══════════════ MODAL DIALOGS (Google Style) ══════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-window {
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-3);
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--md-outline-variant);
    overflow: hidden;
}

.modal-header-visual {
    text-align: center;
    margin-bottom: 16px;
}

.m-emoji {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

#res-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--md-on-surface);
}

#res-modal-sub {
    font-size: 11px;
    color: var(--md-on-surface-variant);
}

.modal-stats-dashboard {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ms-box {
    background-color: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    padding: 10px 4px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ms-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-primary);
}

.ms-label {
    font-size: 9px;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
}

.modal-table-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    margin-bottom: 16px;
}

.res-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.res-table th {
    background-color: var(--md-surface-container);
    padding: 8px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--md-outline-variant);
}

.res-table td {
    padding: 8px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.status-yes {
    color: var(--md-correct);
    font-weight: 700;
}

.status-no {
    color: var(--md-wrong);
    font-weight: 700;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Snackbar (Google Toast) style */
.feedback-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--md-on-surface);
    color: var(--md-surface);
    padding: 10px 20px;
    border-radius: var(--md-shape-sm);
    font-size: 11px;
    font-weight: 600;
    box-shadow: var(--md-elevation-2);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    pointer-events: none;
    text-align: center;
}

/* ══════════════ IPAD & TABLET RESPONSIVE OVERRIDES ══════════════ */
@media (min-width: 1200px) {
    .sidebar {
        width: var(--sidebar-w-expanded);
    }

    .sidebar.collapsed {
        width: var(--sidebar-w);
    }
}


@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
        width: var(--sidebar-w-expanded);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--md-elevation-3);
    }
    .logo-full {
        display: block !important;
    }
    .logo-compact {
        display: none !important;
    }
    .nav-text {
        display: block !important;
    }
    .nav-section-title {
        display: block !important;
    }
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
    .game-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .split-view {
        flex-direction: column;
    }
    .canvas-container {
        flex: 1;
        min-height: 240px;
    }
    .options-container {
        flex: 1.2;
    }
    .bf-layout-container {
        flex-direction: column;
    }
    .bs-layout-container {
        flex-direction: column;
    }

    /* Responsive overrides for Box Folding & Unfolding */
    #boxfolding-stage {
        overflow: hidden !important;
    }
    #boxfolding-stage .game-play-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #boxfolding-stage .bf-layout-container {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
    }
    #boxfolding-stage .bf-options-panel {
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #boxfolding-stage .bf-choices-grid-area {
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
        min-height: 0 !important;
    }
    #boxfolding-stage .bf-option-card {
        overflow: hidden !important;
        min-height: 0 !important;
    }
    #boxfolding-stage .canvas-container {
        align-self: stretch !important;
        height: auto !important;
    }
    #boxfolding-stage .bf-opt-canvas {
        max-height: 100% !important;
    }
    #boxfolding-stage .quiz-navigator {
        flex-shrink: 0 !important;
        margin-bottom: 2px !important;
        padding: 2px 4px !important;
        gap: 3px !important;
    }
    #boxfolding-stage .quiz-nav-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 8px !important;
    }
    #boxfolding-stage .game-header {
        flex-shrink: 0 !important;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    #boxfolding-stage .game-controls {
        flex-shrink: 0 !important;
        padding-top: 2px !important;
        margin-top: 2px !important;
    }

    /* Responsive overrides for Series Number */
    .series-questions-container {
        grid-template-columns: 1fr;
    }

    /* Responsive overrides for Short-Term Memory */
    .briefing-content {
        max-height: 320px !important;
    }
}

@media (max-width: 600px) {
    .series-domino-row,
    .series-double-blank {
        gap: 5px;
        font-size: 14px;
    }

    .series-two-row {
        font-size: 14px;
    }

    .series-two-row > div {
        grid-template-columns: 30px repeat(4, minmax(30px, 1fr));
        gap: 3px;
        padding-inline: 4px;
    }

    .series-domino {
        gap: 4px;
        padding: 5px 6px;
    }
}

/* ══════════════ FIGURAL REASONING ══════════════ */
#view-figuralreasoning { max-width: 100%; overflow-x: hidden; }
#view-figuralreasoning .lobby-content { width: min(100%, 720px); }
#view-figuralreasoning button,
#view-figuralreasoning select { min-height: 44px; }
#view-figuralreasoning select { width: 100%; margin: 4px 0 12px; padding: 8px 12px; }
#view-figuralreasoning .lobby-mode-card { width: 100%; appearance: none; font: inherit; text-align: left; color: inherit; }
#view-figuralreasoning .lobby-mode-card:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.figuralreasoning-practice-profile { margin-block: 10px; font-size: .9rem; }
.figural-book-lobby-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--md-outline-variant);
}
.figural-book-lobby-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.figural-book-lobby-heading h3 { margin: 0; font-size: 1rem; }
.figural-book-lobby-heading span {
  color: var(--md-on-surface-variant);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.figuralreasoning-question-host {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(8px, 2vw, 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
  scroll-padding-top: 8px;
  scroll-padding-bottom: 24px;
}
.figural-question { width: 100%; max-width: 1040px; margin-inline: auto; --figural-stem-columns: 1; --figural-choice-columns: 3; --figural-panel-width: 30cqw; --figural-panel-size: max(44px, min(var(--figural-panel-width), 160px)); }
.figural-question[data-stem-columns="1"] { --figural-stem-columns: 1; }
.figural-question[data-stem-columns="2"] { --figural-stem-columns: 2; }
.figural-question[data-stem-columns="3"] { --figural-stem-columns: 3; }
.figural-question[data-stem-columns="4"] { --figural-stem-columns: 4; }
.figural-question[data-stem-columns="5"] { --figural-stem-columns: 5; }
.figural-question[data-stem-columns="6"] { --figural-stem-columns: 6; }
.figural-question[data-choice-columns="3"] { --figural-choice-columns: 3; }
.figural-question[data-choice-columns="4"] { --figural-choice-columns: 4; }
.figural-question[data-max-columns="1"] { --figural-panel-width: 88cqw; }
.figural-question[data-max-columns="2"] { --figural-panel-width: 44cqw; }
.figural-question[data-max-columns="3"] { --figural-panel-width: 29cqw; }
.figural-question[data-max-columns="4"] { --figural-panel-width: 22cqw; }
.figural-question[data-max-columns="5"] { --figural-panel-width: 17cqw; }
.figural-question[data-max-columns="6"] { --figural-panel-width: 14cqw; }
.figural-question-grid { display: grid; grid-template-columns: repeat(var(--figural-stem-columns), var(--figural-panel-size)); gap: clamp(5px, 1.2vw, 14px); width: fit-content; max-width: 100%; margin: 0 auto clamp(12px, 2vw, 22px); }
.figural-stem-panel, .figural-missing-panel { min-width: 0; aspect-ratio: 1; border: 1px solid #000; background: #fff; position: relative; }
.figural-missing-panel { display: grid; place-items: center; border: 2px dashed #000; }
.figural-missing-panel::after { content: '?'; color: #000; font: 700 clamp(20px, 5vw, 48px)/1 var(--md-font-mono); }
.figural-panel-badge,
.figural-choice-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  min-width: 1.35em;
  padding: 2px 5px;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font: 700 clamp(9px, 2.2vw, 11px)/1.1 var(--md-font-mono);
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}
.figural-stem-panel[data-highlighted="true"],
.figural-missing-panel[data-highlighted="true"] {
  box-shadow: inset 0 0 0 3px #1a73e8;
  border-color: #1a73e8;
}
.figural-entity.figural-entity-highlight > g > * {
  filter: drop-shadow(0 0 2px #1a73e8);
}
.figural-worked-step {
  cursor: pointer;
  border-radius: 6px;
}
.figural-worked-step[data-step-active="true"] {
  background: var(--md-surface-container-high);
}
.figural-worked-step:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}
.figural-choice-grid { display: grid; grid-template-columns: repeat(var(--figural-choice-columns), var(--figural-panel-size)); gap: 10px; width: fit-content; max-width: 100%; margin-inline: auto; }
.figural-stem-panel, .figural-missing-panel, .figural-choice { width: var(--figural-panel-size); height: var(--figural-panel-size); min-width: 0; min-height: 44px; padding: 8px; overflow: hidden; box-sizing: border-box; }
.figural-choice { position: relative; color: #000; background: #fff; border: 2px solid #000; border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; outline: 2px solid #000; outline-offset: -2px; }
.figural-choice:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #000; }
.figural-choice:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.figural-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #000; }
.figural-choice.selected:not([data-correct="true"]):not([data-wrong="true"]) {
  border-color: var(--md-primary);
  outline-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}
.figural-choice:disabled { cursor: default; opacity: 1; }
.figural-choice[data-correct="true"] { border-color: var(--md-correct); outline-color: var(--md-correct); background: var(--md-correct-container); }
.figural-choice[data-wrong="true"] { border-color: var(--md-wrong); outline-color: var(--md-wrong); background: var(--md-wrong-container); }
.figural-choice[data-correct="true"] .figural-panel-svg, .figural-choice[data-wrong="true"] .figural-panel-svg { color: #000; background: #fff; filter: none; }
.figural-book-question {
  width: min(100%, 1100px);
  margin-inline: auto;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 4px 0 8px;
}
.figural-book-question-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.figural-book-question-header h3 { margin: 3px 0 0; font-size: clamp(1rem, 2vw, 1.25rem); }
.figural-book-format {
  color: var(--md-primary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.figural-book-source-id {
  flex: 0 0 auto;
  color: var(--md-on-surface-variant);
  font: 600 .78rem/1.3 var(--md-font-mono);
  overflow-wrap: anywhere;
}
.figural-book-layout {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(132px, 1fr);
  align-items: stretch;
  gap: 12px;
}
.figural-book-visual {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding-top: 2px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--md-outline-variant);
  background: #fff;
}
.figural-book-crop {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center top;
}
.figural-book-visual-loader {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 1;
  color: var(--md-primary);
  background: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 700;
}
.figural-book-visual[data-loading="true"] .figural-book-visual-loader { display: grid; }
.figural-book-visual[data-loading="true"] .figural-book-crop { opacity: 0; }
.figural-book-choice-pane { min-width: 0; min-height: 0; }
.figural-book-choice-pane .figural-book-choice-grid {
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.figural-book-choice-pane .figural-book-choice-grid--3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.figural-book-choice-pane .figural-book-choice-grid--4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.figural-book-choice-pane .figural-book-choice-grid--5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.figural-book-choice-pane .figural-book-choice-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.figural-book-choice-pane .figural-book-choice-grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.figural-book-choice-pane .figural-book-choice-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.figural-book-choice {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px 12px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.figural-book-choice-letter { font-size: 1rem; font-weight: 800; }
.figural-book-feedback {
  width: min(100%, 980px);
  margin: 0 auto;
  color: var(--md-correct);
  font-weight: 700;
}
.figural-panel-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; color: #000; background: #fff; }
.figural-rule-explanation { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--md-outline-variant); border-radius: 10px; background: var(--md-surface-container-low); }
/* Explanation grows with the question; the question host scrolls the full page. */
.figural-solution-th {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  background: var(--md-surface-container-low);
  -webkit-user-select: text;
  user-select: text;
  box-sizing: border-box;
}
.figural-question[data-reveal="true"] .figural-solution-th {
  flex: 0 0 auto;
  min-width: 0;
}
.figural-question[data-layout-type^="matrix_"][data-stem-rows="3"] .figural-question-grid,
.figural-question[data-layout-type^="matrix_"][data-stem-rows="4"] .figural-question-grid,
.figural-question[data-layout-type^="matrix_"][data-stem-rows="5"] .figural-question-grid {
  margin-top: 2px;
}
.figural-solution-th * {
  -webkit-user-select: text;
  user-select: text;
}
.figural-solution-th h3 { margin: 14px 0 6px; font-size: 1rem; }
.figural-solution-th h3:first-child { margin-top: 0; }
.figural-solution-th .figural-correct-answer-th,
.figural-solution-th .figural-correct-reason-th,
.figural-solution-th .figural-answer-reason-th,
.figural-solution-th .figural-summary-th { margin: 0 0 10px; line-height: 1.55; }
.figural-solution-th .figural-confirmations-th { margin: 0; padding-left: 1.35em; line-height: 1.55; }
.figural-solution-th .figural-confirmations-th > li { margin-block: 4px; }
.figural-solution-th .figural-rule-list-th { margin: 0; padding-left: 1.35em; line-height: 1.55; }
.figural-solution-th .figural-rule-definition-th { margin-block: 7px; }
.figural-solution-th .figural-rule-definition-th > strong,
.figural-solution-th .figural-rule-definition-th > span { display: block; }
.figural-solution-th .figural-worked-step { display: grid; gap: 3px; }
.figural-solution-th .figural-step-title-th,
.figural-solution-th .figural-step-evidence-th,
.figural-solution-th .figural-step-detail-th { display: block; }
.figural-solution-th .figural-step-evidence-th { font-weight: 650; }
.figural-solution-th .figural-step-detail-th,
.figural-solution-th .figural-correct-reason-th { line-height: 1.6; }
.figural-solution-th .figural-legend-th { margin: 10px 0 0; padding-left: 1.25em; }
.figural-answer-feedback { flex: 0 0 auto; margin-top: 6px; text-align: center; font-weight: 700; }
.figural-solution-th .figural-steps-th,
.figural-rule-explanation ol,
ol.figural-rule-explanation {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: figural-step;
}
.figural-solution-th .figural-steps-th > li,
.figural-rule-explanation ol > li,
ol.figural-rule-explanation > li {
  position: relative;
  margin-block: 8px;
  padding-left: 1.75em;
  line-height: 1.55;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.figural-solution-th .figural-steps-th > li::before,
.figural-rule-explanation ol > li::before,
ol.figural-rule-explanation > li::before {
  counter-increment: figural-step;
  content: counter(figural-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.figuralreasoning-loading, .figuralreasoning-error { min-height: 88px; padding: 16px; display: grid; place-items: center; text-align: center; border: 1px solid var(--md-outline); border-radius: 10px; }
.figuralreasoning-error { border-style: dashed; }
.figuralreasoning-controls { display: flex; flex-wrap: wrap; gap: 8px; }

/* Touch browsers can retain :hover after a tap. Keep Figural Next/Finish at
   their resting colour unless the device can perform a real pointer hover. */
#figuralreasoning-stage .figuralreasoning-controls .btn-action:not(.primary):hover {
    background-color: var(--md-surface);
}

@media (hover: hover) {
    #figuralreasoning-stage .figuralreasoning-controls .btn-action:not(.primary):hover {
        background-color: var(--md-surface-container-high);
    }
}

/* iPad: one container-bound square size applies to both prompt and answer frames.
   Explicit metadata selectors keep sizing auditable without CSS variable division. */
@media (min-width: 768px) and (max-width: 1180px) {
    #figuralreasoning-stage { padding: 8px 12px; }
    #figuralreasoning-stage .game-header { height: 40px; margin-bottom: 6px; padding-bottom: 6px; }
    #figuralreasoning-stage .game-controls { height: 44px; padding-top: 4px; }
    #figuralreasoning-stage .quiz-navigator { flex-shrink: 0; }

    .figuralreasoning-question-host {
        flex: 1 1 auto;
        min-height: 0;
        padding: 4px 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-direction: column;
        container-type: size;
    }

    /* Reveal mode: scroll the whole question page, not a tiny nested explanation frame. */
    .figuralreasoning-question-host:has(.figural-question[data-reveal="true"]) {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
        scroll-padding-bottom: 24px;
    }

    /* Keep From Book scans, answer choices, and fixed game controls visible
       together, with answers immediately after the actual scan. */
    .figuralreasoning-question-host:has(.figural-book-question) {
        overflow: hidden;
        align-items: stretch;
        padding: 4px 0;
    }

    .figural-book-question {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
        padding: 0 0 8px;
    }

    .figural-book-crop {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        align-self: stretch;
        justify-self: stretch;
    }

    .figural-book-choice-pane .figural-book-choice-grid {
        align-self: stretch;
    }

    .figural-question {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        gap: 6px;
        --figural-panel-height: 20cqh;
        --figural-panel-size: max(44px, min(var(--figural-panel-width), var(--figural-panel-height), 150px));
    }

    .figural-question[data-reveal="true"] {
        height: auto;
        min-height: 100%;
        justify-content: flex-start;
        gap: 12px;
        padding-top: 4px;
        padding-bottom: 20px;
    }

    .figural-question[data-layout-type^="matrix_"][data-reveal="true"] {
        padding-top: 8px;
    }

    .figural-question[data-max-columns="1"] { --figural-panel-width: 88cqw; }
    .figural-question[data-max-columns="2"] { --figural-panel-width: 44cqw; }
    .figural-question[data-max-columns="3"] { --figural-panel-width: 29cqw; }
    .figural-question[data-max-columns="4"] { --figural-panel-width: 22cqw; }
    .figural-question[data-max-columns="5"] { --figural-panel-width: 17cqw; }
    .figural-question[data-max-columns="6"] { --figural-panel-width: 14cqw; }
    .figural-question[data-total-panel-rows="1"] { --figural-panel-height: 88cqh; }
    .figural-question[data-total-panel-rows="2"] { --figural-panel-height: 44cqh; }
    .figural-question[data-total-panel-rows="3"] { --figural-panel-height: 29cqh; }
    .figural-question[data-total-panel-rows="4"] { --figural-panel-height: 22cqh; }
    .figural-question[data-total-panel-rows="5"] { --figural-panel-height: 17cqh; }
    .figural-question[data-reveal="true"][data-total-panel-rows="3"] { --figural-panel-height: 26cqh; }
    .figural-question[data-reveal="true"][data-total-panel-rows="4"] { --figural-panel-height: 19cqh; }
    .figural-question[data-reveal="true"][data-total-panel-rows="5"] { --figural-panel-height: 15cqh; }

    .figural-question-grid {
        width: fit-content;
        max-width: 100%;
        margin: 0;
        gap: 5px;
        flex: 0 1 auto;
    }

    .figural-choice-grid {
        width: fit-content;
        max-width: 100%;
        grid-template-columns: repeat(3, var(--figural-panel-size));
        gap: 6px;
        flex: 0 1 auto;
    }

    .figural-choice-grid[data-choice-count="8"] {
        grid-template-columns: repeat(4, var(--figural-panel-size));
    }

    .figural-stem-panel, .figural-missing-panel, .figural-choice {
        padding: 4px;
    }
    .figural-question[data-reveal="true"] .figural-rule-explanation,
    .figural-question[data-reveal="true"] .figural-solution-th {
        max-height: none;
        overflow: visible;
        margin-top: 8px;
    }
}

@media (max-width: 600px) {
    #view-figuralreasoning { width: 100%; max-width: 100%; }
    .figuralreasoning-question-host { padding: 8px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .figural-question[data-choice-columns="4"] { --figural-choice-columns: 2; }
    .figural-question[data-stem-columns="1"][data-choice-columns="3"],
    .figural-question[data-stem-columns="2"][data-choice-columns="3"],
    .figural-question[data-stem-columns="3"] { --figural-panel-width: 29cqw; }
    .figural-question[data-stem-columns="1"][data-choice-columns="4"],
    .figural-question[data-stem-columns="2"][data-choice-columns="4"] { --figural-panel-width: 44cqw; }
    .figural-question[data-stem-columns="4"] { --figural-panel-width: 22cqw; }
    .figural-question[data-stem-columns="5"] { --figural-panel-width: 17cqw; }
    .figural-question[data-stem-columns="6"] { --figural-panel-width: 14cqw; }
    .figural-choice-grid { gap: 8px; }
    .figural-question-grid { gap: 5px; }
    .figural-book-question { gap: 10px; }
    .figural-book-question-header { align-items: flex-start; flex-direction: column; gap: 4px; }
    .figural-book-crop { max-height: none; }
    .figural-book-choice-grid--3,
    .figural-book-choice-grid--4,
    .figural-book-choice-grid--5,
    .figural-book-choice-grid--6,
    .figural-book-choice-grid--7,
    .figural-book-choice-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .figuralreasoning-controls > button { flex: 1 1 calc(50% - 8px); }
    .figural-rule-explanation,
    .figural-solution-th { padding: 10px 12px; }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    #view-seriesnum .game-lobby {
        align-items: flex-start;
        justify-content: center;
        padding: 12px 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-seriesnum .lobby-content {
        max-width: 620px;
        padding: 16px;
        margin: 0 auto 12px;
    }

    #view-seriesnum .lobby-content h2 {
        font-size: 17px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    #view-seriesnum .lobby-desc {
        font-size: 11px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    #view-seriesnum .lobby-best-record {
        padding: 6px 10px;
        margin-bottom: 10px;
    }

    #view-seriesnum .lobby-modes-grid {
        gap: 10px;
        margin-bottom: 10px;
    }

    #view-seriesnum .lobby-mode-card {
        padding: 10px;
    }

    #view-seriesnum .lobby-mode-card h4 {
        margin-bottom: 2px;
    }

    #view-seriesnum .lobby-mode-card p {
        font-size: 9px;
        line-height: 1.3;
    }

    #view-seriesnum .lobby-settings-grid {
        padding: 10px;
        margin-bottom: 10px;
    }

    #view-seriesnum .lobby-start-btn {
        margin-top: 4px;
        min-height: 42px;
    }
}

@media (max-width: 480px) {
    .game-cards-grid {
        grid-template-columns: 1fr;
    }
    .badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   REDESIGN THEME ADJUSTMENTS & BUG FIXES
   ========================================================================== */

/* 1. Game Canvases & Canvas-based Option Cards: keep dark backgrounds in Night mode for vector visibility */
[data-theme="night"] .canvas-container:not(.bf-layout-container .canvas-container),
[data-theme="night"] .option-card,
[data-theme="night"] .bs-option-card,
[data-theme="night"] .sim-choice-card,
[data-theme="night"] .sim-target-card {
    background-color: #0E0C11 !important;
}

/* Ensure canvas items within dark containers are visible */
.option-card canvas,
.bf-opt-canvas,
.bs-option-card canvas,
.sim-choice-card canvas {
    background: transparent !important;
}

/* 2. Text-based Cards / Options: Adapt colors according to Day/Night mode */
.cc-option-card, .math-opt-btn, .recall-opt-btn, .numestimate-quiz-card {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-outline-variant) !important;
}

/* Short-Term Memory Phase 2 & 3 Quiz Cards: Invert hardcoded light colors */
.math-quiz-card .math-card-eq,
.recall-quiz-card div,
.recall-quiz-card span.opt-text {
    color: var(--md-on-surface) !important;
}

.recall-quiz-card .opt-indicator {
    color: var(--md-on-surface) !important;
    background-color: var(--md-surface-container-high) !important;
}

/* 3. Flight Logs and Dashboard best records styled class-based */
.lobby-best-record.has-record {
    color: #0b6685 !important;
    background-color: rgba(0, 107, 94, 0.06) !important;
    border-color: rgba(0, 107, 94, 0.2) !important;
}

.lobby-best-record.no-record {
    color: var(--md-on-surface-variant) !important;
    background-color: var(--md-surface-container) !important;
    border-color: var(--md-outline-variant) !important;
}

.gsc-best.has-record {
    color: #127c54 !important;
    background-color: rgba(27, 135, 58, 0.06) !important;
    border-color: rgba(27, 135, 58, 0.2) !important;
}

.gsc-best.no-record {
    color: var(--md-on-surface-variant) !important;
    background-color: var(--md-surface-container-low) !important;
    border-color: var(--md-outline-variant) !important;
}

/* Night theme overrides for best records */
:root[data-theme="night"] .lobby-best-record.has-record {
    color: #00f2fe !important;
    background-color: rgba(0, 242, 254, 0.03) !important;
    border-color: rgba(0, 242, 254, 0.15) !important;
}

:root[data-theme="night"] .lobby-best-record.no-record {
    color: var(--md-on-surface-variant) !important;
    background-color: rgba(255, 255, 255, 0.01) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

:root[data-theme="night"] .gsc-best.has-record {
    color: #6EDB8A !important;
    background-color: rgba(110, 219, 138, 0.06) !important;
    border-color: rgba(110, 219, 138, 0.2) !important;
}

:root[data-theme="night"] .gsc-best.no-record {
    color: var(--md-on-surface-variant) !important;
    background-color: rgba(255, 255, 255, 0.01) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Flight logs custom styled log-mode and log-pct classes */
.log-mode.mode-quiz {
    color: var(--md-warning) !important;
    font-weight: 600;
}
.log-mode.mode-practice {
    color: var(--md-correct) !important;
    font-weight: 600;
}

.log-pct {
    font-weight: bold;
}
.log-pct.pct-high {
    color: var(--md-correct) !important;
}
.log-pct.pct-mid {
    color: var(--md-primary) !important;
}
.log-pct.pct-low {
    color: var(--md-wrong) !important;
}

/* 4. Glow classes for Dashboard stats cards and Result boxes */
.glow-cyan .sc-val, .glow-cyan .ms-val {
    color: var(--md-primary) !important;
}
.glow-green .sc-val, .glow-green .ms-val {
    color: var(--md-correct) !important;
}
.glow-amber .sc-val, .glow-amber .ms-val {
    color: var(--md-warning) !important;
}
.glow-purple .sc-val, .glow-purple .ms-val {
    color: #a855f7 !important;
}

.glow-cyan {
    border-color: rgba(91, 91, 214, 0.3) !important;
}
.glow-green {
    border-color: rgba(27, 135, 58, 0.3) !important;
}
.glow-amber {
    border-color: rgba(125, 88, 0, 0.3) !important;
}
.glow-purple {
    border-color: rgba(168, 85, 247, 0.3) !important;
}

:root[data-theme="night"] .glow-cyan {
    border-color: rgba(197, 196, 255, 0.3) !important;
}
:root[data-theme="night"] .glow-green {
    border-color: rgba(110, 219, 138, 0.3) !important;
}
:root[data-theme="night"] .glow-amber {
    border-color: rgba(251, 191, 36, 0.3) !important;
}
:root[data-theme="night"] .glow-purple {
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* 5. Lobby Instruction Card and Lobby difficulty selectors */
.lobby-instruction-card {
    background-color: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline-variant) !important;
}

#lobby-shortmemory-difficulty {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border: 1px solid var(--md-outline) !important;
}

/* ==========================================================================
   BOX FOLDING & UNFOLDING STAGE FIT & INSTRUCTION REMOVAL
   ========================================================================== */
.bf-options-panel .rotating-desc {
    display: none !important;
}

@media (min-width: 481px) {
    #boxfolding-stage, #boxunfolding-stage {
        overflow: hidden !important;
    }
    #boxfolding-stage .game-play-area, #boxunfolding-stage .game-play-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #boxfolding-stage .bf-layout-container, #boxunfolding-stage .bf-layout-container {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
    }
    #boxfolding-stage .bf-options-panel, #boxunfolding-stage .bf-options-panel {
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #boxfolding-stage .bf-choices-grid-area, #boxunfolding-stage .bf-choices-grid-area {
        min-height: 0 !important;
    }
    #boxfolding-stage .bf-choices-grid-area {
        grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    }
    #boxunfolding-stage .bf-choices-grid-area {
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    }
    #boxfolding-stage .bf-option-card, #boxunfolding-stage .bf-option-card {
        overflow: hidden !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: center;
    }
    #boxfolding-stage .canvas-container, #boxunfolding-stage .canvas-container {
        align-self: stretch !important;
        height: auto !important;
    }
    #boxunfolding-stage .canvas-container {
        height: 100% !important;
    }
    #boxfolding-stage .bf-opt-canvas, #boxunfolding-stage .bf-opt-canvas {
        max-height: 100% !important;
    }
    #boxfolding-stage .quiz-navigator, #boxunfolding-stage .quiz-navigator {
        flex-shrink: 0 !important;
        margin-bottom: 2px !important;
        padding: 2px 4px !important;
        gap: 3px !important;
    }
    #boxfolding-stage .quiz-nav-btn, #boxunfolding-stage .quiz-nav-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 8px !important;
    }
    #boxfolding-stage .game-header, #boxunfolding-stage .game-header {
        flex-shrink: 0 !important;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    #boxfolding-stage .game-controls, #boxunfolding-stage .game-controls {
        flex-shrink: 0 !important;
        padding-top: 2px !important;
        margin-top: 2px !important;
    }
}

/* ==========================================================================
   NUMERICAL ESTIMATION LAYOUT RESTORATIONS
   ========================================================================== */
.option-card.estimate-card {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.option-card.estimate-card .option-text-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    font-family: 'Outfit', sans-serif;
}

.option-card.estimate-card .option-num-label {
    font-size: 11px;
    top: 4px;
    left: 8px;
}

#numestimate-quiz-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}
.numestimate-quiz-card {
    background: var(--md-surface);
    border: 1.5px solid var(--md-outline-variant);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}
.numestimate-quiz-card:hover {
    border-color: var(--md-primary);
}
.numestimate-quiz-card.answered-card {
    border-color: var(--md-correct);
    background: rgba(16, 185, 129, 0.02);
}
.numestimate-qcard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.numestimate-qcard-no {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--md-on-surface-variant);
    font-weight: 700;
}
.numestimate-qcard-lbl {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
    font-weight: 600;
}
.numestimate-qcard-text {
    background: var(--md-surface-container-highest);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
    text-align: center;
}
.numestimate-qcard-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 768px) {
    .numestimate-qcard-options {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    #numestimate-quiz-container {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    .numestimate-qcard-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .options-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   BALANCE SCALE SPECIFIC LAYOUT RESTORATIONS & SCALING
   ========================================================================== */
.bs-scale-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.bs-scale-header {
    font-size: 11px;
    color: var(--md-on-surface-variant);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.bs-target-header {
    color: #fbbf24 !important;
    font-weight: 700;
}

.bs-scale-canvas-container {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.bs-scale-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

#balancescale-stage .bf-option-card {
    background: transparent !important;
    border: 1.5px solid var(--md-outline-variant) !important;
    box-shadow: none !important;
    height: 100% !important;
    max-height: 130px !important;
    align-self: center;
    width: 100% !important;
    box-sizing: border-box !important;
}

#balancescale-stage .bf-option-card div {
    color: var(--md-on-surface) !important;
}

#balancescale-stage .bf-option-card.correct {
    border-color: var(--md-correct) !important;
    background-color: var(--md-correct-container) !important;
}

#balancescale-stage .bf-option-card.wrong {
    border-color: var(--md-wrong) !important;
    background-color: var(--md-wrong-container) !important;
}

#balancescale-stage .bf-option-card.selected-exam {
    border-color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
}

#balancescale-stage .bf-opt-canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.5 / 1 !important;
}

@media (min-width: 769px) {
    #balancescale-stage {
        overflow: hidden !important;
    }
    #balancescale-stage .game-play-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .bs-layout-container {
        display: flex;
        flex-direction: row;
        gap: 16px;
        height: 100% !important;
        min-height: 0 !important;
        align-items: stretch;
    }
    .bs-scales-panel {
        flex: 1.2;
        height: 100% !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        padding: 24px 12px 12px 12px !important;
    }
    .bs-scales-grid {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        padding: 5px;
    }
    .bs-scale-card {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--md-outline-variant);
        border-radius: 8px;
        padding: 4px;
        margin-bottom: 8px;
        box-sizing: border-box;
    }
    .bs-scale-card.bs-target-card {
        border-color: rgba(251, 191, 36, 0.25);
        background: rgba(251, 191, 36, 0.03);
        box-shadow: 0 0 12px rgba(251, 191, 36, 0.03);
        margin-bottom: 0;
    }
    .bs-scale-canvas-container {
        flex: 1 !important;
        width: 100%;
        min-height: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto !important;
    }
    .bs-options-panel {
        flex: 1;
        height: 100% !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .bs-choices-grid-area {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: 10px;
        flex: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
    }
    #balancescale-stage .bf-option-card {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   SMARTPHONE SPECIFIC MOBILE OVERRIDES RESTORATION
   ========================================================================== */

/* ══════════════ SMARTPHONE SPECIFIC OVERRIDES (<=480px) ══════════════ */
@media (max-width: 480px) {
    /* General Split Layouts (SkyAssemble, Similarity, etc.) */
    .split-view {
        height: auto !important;
        flex-direction: column !important;
    }
    .canvas-container {
        height: 220px !important;
        max-height: 220px !important;
        flex: none !important;
    }
    .options-grid-4 {
        height: auto !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
    }
    .option-card {
        height: 110px !important;
        min-height: 110px !important;
    }
    .option-card canvas {
        max-height: 90px !important;
    }

    /* Box Folding & Unfolding Games */
    .bf-layout-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    .bf-layout-container .canvas-container {
        height: 220px !important;
        max-height: none !important;
    }
    .bf-layout-container .canvas-container canvas {
        min-height: 0 !important;
        height: 100% !important;
    }
    .bf-choices-grid-area {
        grid-template-rows: auto !important;
        height: auto !important;
    }
    .bf-option-card {
        height: 110px !important;
        max-height: none !important;
    }
    
    /* Similarity Game Target */
    .sim-target-wrapper {
        flex-direction: column !important;
        text-align: center;
        padding: 6px !important;
        gap: 8px !important;
    }
    .sim-target-card {
        width: 96px !important;
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
    }
    .sim-choices-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* Short-Term Memory Containers */
    #shortmemory-math-container,
    #shortmemory-recall-container {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    
    /* Numerical Estimation Quiz & Option Layouts */
    #numestimate-quiz-container {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    .numestimate-qcard-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .options-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


@media (max-width: 480px) {
    .bs-layout-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        gap: 8px !important;
    }
    .bs-scales-panel {
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        padding: 8px !important;
    }
    .bs-scales-grid {
        grid-template-columns: 1fr !important;
    }
    .bs-target-card {
        grid-column: span 1 !important;
        width: 100% !important;
    }
    .bs-scale-canvas-container {
        height: 95px !important;
    }
    .bs-target-card .bs-scale-canvas-container {
        height: 95px !important;
    }
    .bs-choices-grid-area {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        height: auto !important;
        gap: 8px !important;
    }
    #balancescale-stage .bf-option-card {
        height: 80px !important;
        min-height: 80px !important;
        background: transparent !important;
        border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    }
}


@media (max-width: 480px) {
    .cc-layout-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        gap: 8px !important;
    }
    .cc-choices-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(6, 1fr) !important;
        height: auto !important;
        gap: 6px !important;
    }
    #computerchecking-stage .cc-option-card {
        height: 48px !important;
        min-height: 48px !important;
        padding: 8px 10px !important;
    }
}


@media (max-width: 480px) {
    .cc-quiz-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px !important;
    }
    .cc-quiz-row-num {
        text-align: left;
    }
    .cc-quiz-choices-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* Short-Term Memory Review Split Layout */
#shortmemory-stage.shortmemory-review-mode .game-play-area {
    overflow: hidden !important;
}

#shortmemory-recall-area.review-split-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    padding: 0 10px 0 0 !important;
}

#shortmemory-recall-area.review-split-layout .recall-left-column {
    flex: 1.2 !important;
    min-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

#shortmemory-recall-area.review-split-layout .recall-left-column::-webkit-scrollbar,
#shortmemory-recall-area.review-split-layout #shortmemory-recall-container::-webkit-scrollbar {
    width: 6px;
}
#shortmemory-recall-area.review-split-layout .recall-left-column::-webkit-scrollbar-thumb,
#shortmemory-recall-area.review-split-layout #shortmemory-recall-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

#shortmemory-recall-area.review-split-layout #shortmemory-recall-briefing-container {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

#shortmemory-recall-area.review-split-layout #shortmemory-recall-briefing-container .briefing-content {
    max-height: none !important;
    overflow-y: visible !important;
}

#shortmemory-recall-area.review-split-layout .recall-questions-wrapper {
    flex: 1 !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#shortmemory-recall-area.review-split-layout #shortmemory-recall-container {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

#shortmemory-recall-area.review-split-layout #shortmemory-math-review-container {
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

#shortmemory-recall-area.review-split-layout .shortmemory-math-review-list {
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 700px) {
    #shortmemory-stage.shortmemory-review-mode .game-play-area {
        overflow-y: auto !important;
    }

    #shortmemory-recall-area.review-split-layout {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        height: auto !important;
        overflow: visible !important;
        max-width: 700px !important;
    }

    #shortmemory-recall-area.review-split-layout .recall-left-column {
        height: auto !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    #shortmemory-recall-area.review-split-layout .recall-questions-wrapper {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    #shortmemory-recall-area.review-split-layout #shortmemory-recall-container {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
    }
}

/* ══════════════ LEADERBOARD & DELETION STYLING ══════════════ */

.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--leaderboard-item-bg);
    border: 1px solid var(--leaderboard-item-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.leaderboard-item .rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    margin-right: 15px;
}

.leaderboard-item .username {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    color: var(--text-main);
}

.leaderboard-item .stats-info {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 13px;
    font-family: var(--font-mono);
}

.leaderboard-item .stat-pair {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.leaderboard-item .stat-val {
    font-weight: bold;
    color: var(--text-main);
}

.leaderboard-item .stat-lbl {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Rank Glow Details */
.leaderboard-item.rank-1 {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.25);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.05);
}
.leaderboard-item.rank-1 .rank-badge {
    background: #fbbf24;
    color: #000;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.leaderboard-item.rank-1 .username {
    color: var(--rank-1-color);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}
.leaderboard-item.rank-1 .stat-val {
    color: var(--rank-1-color);
}

.leaderboard-item.rank-2 {
    background: rgba(148, 163, 184, 0.03);
    border-color: rgba(148, 163, 184, 0.2);
}
.leaderboard-item.rank-2 .rank-badge {
    background: #94a3b8;
    color: #000;
}
.leaderboard-item.rank-2 .username {
    color: var(--rank-2-color);
}

.leaderboard-item.rank-3 {
    background: rgba(234, 88, 12, 0.03);
    border-color: rgba(234, 88, 12, 0.2);
}
.leaderboard-item.rank-3 .rank-badge {
    background: #ea580c;
    color: #fff;
}
.leaderboard-item.rank-3 .username {
    color: var(--rank-3-color);
}

.leaderboard-item.rank-4 .rank-badge,
.leaderboard-item.rank-5 .rank-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
}

.leaderboard-empty {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: var(--text-dim);
    font-size: 13.5px;
    background: rgba(255,255,255,0.01);
    border: 1px dashed rgba(255,255,255,0.04);
    border-radius: 10px;
}

/* Manage column layout inside tables */
.btn-delete-session {
    background: rgba(244, 63, 94, 0.05) !important;
    border: 1px solid rgba(244, 63, 94, 0.15) !important;
    color: var(--wrong) !important;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-session:hover {
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: var(--wrong) !important;
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.1);
}

/* ══════════════ DAY MODE (LIGHT THEME) LOGIN SCREEN ══════════════ */
body.not-logged-in .content-view {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

body.not-logged-in #appSidebar,
body.not-logged-in .global-header {
    display: none !important;
}

body.not-logged-in .main-content {
    padding-top: 0 !important;
}

body.auth-checking .content-view {
    display: none !important;
}

.auth-loading-screen {
    display: none;
}

body.auth-checking .auth-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #f1f5f9;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.auth-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: auth-loading-spin 0.8s linear infinite;
}

@keyframes auth-loading-spin {
    to { transform: rotate(360deg); }
}

.login-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}

.login-logo div {
    color: #0f172a !important;
}

.login-logo .logo-accent {
    color: #0ea5e9 !important; /* Premium Sky Blue accent for day mode logo */
}

#login-title {
    color: #0f172a !important;
}

.login-subtitle {
    color: #64748b !important;
}

.login-tabs {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

.login-tab-btn {
    color: #64748b !important;
}

.login-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

.login-tab-btn.active {
    background: #ffffff !important;
    color: #0ea5e9 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05) !important;
}

.input-group label {
    color: #475569 !important;
}

.input-wrapper input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.input-wrapper input::placeholder {
    color: #94a3b8 !important;
}

.input-wrapper input:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    background: #ffffff !important;
}

.input-wrapper .input-icon {
    color: #64748b !important;
}

.db-gear-btn {
    color: #64748b !important;
}

.db-gear-btn:hover {
    color: #0f172a !important;
}

.db-config-panel {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.db-config-panel h3 {
    color: #0f172a !important;
}

.db-config-panel p.db-config-help {
    color: #64748b !important;
}

.db-config-panel input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.db-config-panel input:focus {
    border-color: #0ea5e9 !important;
    background: #ffffff !important;
}



/* ══════════════ COLLAPSED SIDEBAR FOOTER STYLING ══════════════ */
.sidebar.collapsed .sidebar-footer {
    padding: 12px 8px !important;
    align-items: center;
}

.sidebar.collapsed #sidebar-user-info {
    display: block;
}

.sidebar.collapsed .sidebar-user-label {
    display: none !important;
}

.sidebar.collapsed #sidebar-username {
    display: none !important;
}

.sidebar.collapsed #sidebar-user-role-badge {
    display: none !important;
}

.sidebar.collapsed #sidebar-user-info div {
    justify-content: center !important;
}

.sidebar.collapsed #sidebar-logout-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    margin: 5px auto 0 auto !important;
}

.sidebar.collapsed .sidebar-footer .logout-text {
    display: none !important;
}

.sidebar.collapsed .sidebar-footer div {
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-footer-text {
    display: none !important;
}

/* ==========================================================================
   STG GRID GAME STYLES
   ========================================================================== */
.stm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
}

.stm-grid-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid var(--border-glass);
    border-radius: 8px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.stm-grid-cell:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.stm-grid-recall-cell {
    padding: 0;
    overflow: hidden;
}

.stm-grid-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.stm-grid-input::placeholder {
    color: var(--text-dim);
    opacity: 0.35;
}

.stm-grid-input:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 2px var(--accent);
}

#stmgrid-review-container .stm-grid-cell {
    height: 48px;
    box-sizing: border-box;
}

/* SkyAssemble Custom Layout Adjustments */
#skyassemble-stage.skyassemble-mode-assemble .split-view .canvas-container {
    flex: 1.35 1 0 !important;
}
#skyassemble-stage.skyassemble-mode-assemble .split-view .options-container {
    flex: 0.85 1 0 !important;
}

#skyassemble-stage.skyassemble-mode-disassemble .split-view .canvas-container {
    flex: 0.5; /* Reduce width of โจทย์ */
}
#skyassemble-stage.skyassemble-mode-disassemble .split-view .options-container {
    flex: 1.5; /* Increase width of ช้อย */
}

/* ==========================================================================
   SPATIAL FOLDING GAME STYLES
   ========================================================================== */
#spatialfolding-lobby .sf-prepare-status {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 0.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.92rem;
    color: var(--text-dim);
    text-align: center;
}

#spatialfolding-lobby .sf-prepare-status.is-loading {
    color: var(--accent);
}

#spatialfolding-lobby .sf-prepare-status.is-error {
    color: #f87171;
}

.sf-choices-grid-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}

#spatialfolding-stage .sf-choices-grid-area, #spatialfolding-rev-stage .sf-choices-grid-area {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
}

#spatialfolding-stage,
#spatialfolding-rev-stage {
    overflow: hidden !important;
}

#spatialfolding-stage .game-play-area,
#spatialfolding-rev-stage .game-play-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#spatialfolding-stage .bf-layout-container,
#spatialfolding-rev-stage .bf-layout-container {
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}

#spatialfolding-stage .bf-layout-container .canvas-container,
#spatialfolding-rev-stage .bf-layout-container .canvas-container,
#spatialfolding-stage .bf-options-panel,
#spatialfolding-rev-stage .bf-options-panel {
    min-height: 0 !important;
    align-self: stretch !important;
}

#spatialfolding-stage .canvas-container > .rotating-desc,
#spatialfolding-rev-stage .canvas-container > .rotating-desc {
    display: none !important;
}

#spatialfolding-svg-container,
#spatialfolding-rev-question-container,
#spatialfolding-rev-stage [id^="sf-rev-svg-container-"] {
    min-height: 0 !important;
    height: 100% !important;
}

#spatialfolding-stage .sf-net-svg,
#spatialfolding-rev-stage .sf-net-svg {
    width: 100%;
    height: 100%;
}

#spatialfolding-stage .bf-option-card, #spatialfolding-rev-stage .bf-option-card {
    height: 100% !important;
    max-height: none !important;
    padding: 6px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    min-height: 0 !important;
    align-self: stretch !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    position: relative;
    cursor: pointer;
}

#spatialfolding-stage .sf-opt-label,
#spatialfolding-rev-stage .sf-opt-label {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #181822 !important;
    z-index: 10;
}

#spatialfolding-stage .sf-opt-canvas,
#spatialfolding-rev-stage .sf-opt-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Dark theme overrides */
[data-theme="night"] #spatialfolding-stage .bf-option-card,
[data-theme="night"] #spatialfolding-rev-stage .bf-option-card {
    background-color: rgba(22, 22, 28, 0.7) !important;
    border-color: var(--border-glass) !important;
}

[data-theme="night"] #spatialfolding-stage .sf-opt-label,
[data-theme="night"] #spatialfolding-rev-stage .sf-opt-label {
    color: var(--text-main) !important;
}

#spatialfolding-stage .bf-option-card.selected-exam,
#spatialfolding-rev-stage .bf-option-card.selected-exam {
    border-color: var(--md-primary) !important;
    border-width: 3.5px !important;
    background-color: var(--md-primary-container) !important;
    box-shadow: inset 0 0 0 3px var(--md-primary), 0 0 0 2px color-mix(in srgb, var(--md-primary) 28%, transparent), var(--md-elevation-2) !important;
}

#spatialfolding-stage .bf-option-card.correct,
#spatialfolding-rev-stage .bf-option-card.correct {
    border-color: var(--md-correct) !important;
    border-width: 3.5px !important;
    background-color: var(--md-correct-container) !important;
    box-shadow: inset 0 0 0 3px var(--md-correct), 0 0 0 2px color-mix(in srgb, var(--md-correct) 30%, transparent), var(--md-elevation-2) !important;
}

#spatialfolding-stage .bf-option-card.wrong,
#spatialfolding-rev-stage .bf-option-card.wrong,
#spatialfolding-stage .bf-option-card.incorrect,
#spatialfolding-rev-stage .bf-option-card.incorrect {
    border-color: var(--md-wrong) !important;
    border-width: 3.5px !important;
    background-color: var(--md-wrong-container) !important;
    box-shadow: inset 0 0 0 3px var(--md-wrong), 0 0 0 2px color-mix(in srgb, var(--md-wrong) 28%, transparent), var(--md-elevation-2) !important;
}

#spatialfolding-stage .bf-option-card.selected-exam .sf-opt-label,
#spatialfolding-rev-stage .bf-option-card.selected-exam .sf-opt-label {
    color: var(--md-primary) !important;
}

#spatialfolding-stage .bf-option-card.correct .sf-opt-label,
#spatialfolding-rev-stage .bf-option-card.correct .sf-opt-label {
    color: var(--md-correct) !important;
}

#spatialfolding-stage .bf-option-card.wrong .sf-opt-label,
#spatialfolding-rev-stage .bf-option-card.wrong .sf-opt-label,
#spatialfolding-stage .bf-option-card.incorrect .sf-opt-label,
#spatialfolding-rev-stage .bf-option-card.incorrect .sf-opt-label {
    color: var(--md-wrong) !important;
}

@media (min-width: 600px) and (max-width: 1180px) {
    #spatialfolding-stage,
    #spatialfolding-rev-stage {
        padding: 12px !important;
    }

    #spatialfolding-stage .game-header,
    #spatialfolding-rev-stage .game-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    #spatialfolding-stage .bf-layout-container,
    #spatialfolding-rev-stage .bf-layout-container {
        flex-direction: row !important;
        gap: 12px !important;
    }

    #spatialfolding-stage .bf-layout-container .canvas-container,
    #spatialfolding-rev-stage .bf-layout-container .canvas-container,
    #spatialfolding-stage .bf-options-panel,
    #spatialfolding-rev-stage .bf-options-panel {
        flex: 1 1 0 !important;
    }

    #spatialfolding-stage .sf-choices-grid-area,
    #spatialfolding-rev-stage .sf-choices-grid-area {
        gap: 10px !important;
    }

    #spatialfolding-stage .bf-option-card,
    #spatialfolding-rev-stage .bf-option-card {
        padding: 4px !important;
    }

    #spatialfolding-stage .sf-opt-label,
    #spatialfolding-rev-stage .sf-opt-label {
        top: 6px;
        left: 8px;
        font-size: 14px;
    }
}

@media (min-width: 600px) and (max-width: 760px) {
    #spatialfolding-rev-stage .bf-layout-container {
        flex-direction: column !important;
    }

    #spatialfolding-rev-stage .bf-layout-container .canvas-container,
    #spatialfolding-rev-stage .bf-layout-container .bf-options-panel {
        flex: 1 1 0 !important;
    }
}

@media (max-width: 480px) {
    #spatialfolding-stage .sf-choices-grid-area, #spatialfolding-rev-stage .sf-choices-grid-area {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ══════════════ LOGIN / REVERSED GAME OVERRIDES ══════════════ */
body:not(.not-logged-in) #view-login {
    display: none !important;
}

#spatialfolding-rev-stage .bf-layout-container .canvas-container {
    flex: 0.56 1 0 !important;
}

#spatialfolding-rev-stage .bf-layout-container .bf-options-panel {
    flex: 1.44 1 0 !important;
}

[data-theme="night"] #spatialfolding-rev-stage .bf-layout-container .canvas-container {
    background-color: rgba(22, 22, 28, 0.7) !important;
    border-color: var(--border-glass) !important;
}

@media (min-width: 600px) and (max-width: 760px) {
    #spatialfolding-rev-stage .bf-layout-container .canvas-container {
        flex: 0.42 1 0 !important;
    }

    #spatialfolding-rev-stage .bf-layout-container .bf-options-panel {
        flex: 1.58 1 0 !important;
    }
}

/* Hidden Image sample-style pattern comparison */
#hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

#hiddenimage-stage .hiddenimage-split-view .options-container {
    flex: 0 0 clamp(300px, 32%, 420px);
    min-width: 280px;
    max-width: 420px;
    gap: 12px;
    overflow: hidden;
}

#hiddenimage-stage .hiddenimage-desc {
    padding: 12px 14px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background-color: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

#hiddenimage-stage .canvas-label {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    padding: 3px 7px;
}

#hiddenimage-options-grid {
    min-height: 0;
}

#hiddenimage-options-grid .hidden-answer-option {
    min-height: 0;
    padding: 18px 14px 16px 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hidden-answer-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hidden-answer-card strong {
    color: var(--md-on-surface);
    font-size: 15px;
    line-height: 1.15;
}

.hidden-answer-card small {
    color: var(--md-on-surface-variant);
    font-size: 11px;
    line-height: 1.3;
}

#hiddenimage-options-grid .option-card.correct .hidden-answer-card strong,
#hiddenimage-options-grid .option-card.correct .hidden-answer-card small,
#hiddenimage-options-grid .option-card.wrong .hidden-answer-card strong,
#hiddenimage-options-grid .option-card.wrong .hidden-answer-card small,
#hiddenimage-options-grid .option-card.selected-exam .hidden-answer-card strong,
#hiddenimage-options-grid .option-card.selected-exam .hidden-answer-card small {
    color: inherit;
}

@media (max-width: 900px) {
    #hiddenimage-stage .hiddenimage-split-view {
        flex-direction: column;
        gap: 12px;
    }

    #hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
        flex: 1.2 1 0;
        min-height: 380px;
    }

    #hiddenimage-stage .hiddenimage-split-view .options-container {
        flex: 0.9 1 0;
        min-width: 0;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    #hiddenimage-stage .hiddenimage-split-view {
        gap: 12px;
    }

    #hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
        flex: 1 1 auto;
    }

    #hiddenimage-stage .hiddenimage-split-view .options-container {
        flex: 0 0 clamp(260px, 34%, 340px);
        min-width: 260px;
        max-width: 340px;
    }

    #hiddenimage-options-grid .hidden-answer-option {
        padding: 14px 12px 14px 38px;
    }
}

@media (max-width: 480px) {
    #hiddenimage-stage {
        overflow-y: auto !important;
    }

    #hiddenimage-stage .game-play-area {
        overflow-y: auto !important;
        padding-bottom: 8px;
    }

    #hiddenimage-stage .hiddenimage-split-view {
        height: auto !important;
        gap: 10px;
    }

    #hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
        height: 300px !important;
        max-height: none !important;
        min-height: 300px !important;
        flex: none !important;
    }

    #hiddenimage-stage .hiddenimage-split-view .options-container {
        flex: none !important;
        overflow: visible;
    }

    #hiddenimage-options-grid {
        height: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto) !important;
    }

    #hiddenimage-options-grid .hidden-answer-option {
        height: 76px !important;
        min-height: 76px !important;
        padding-left: 38px;
    }

    .hidden-answer-card strong {
        font-size: 12px;
    }

.hidden-answer-card small {
    font-size: 9px;
}
}

/* Key Fitting */
#keyfitting-stage .game-play-area {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.keyfitting-layout {
    --keyfitting-piece-w: 320px;
    --keyfitting-piece-h: 170px;
    display: flex;
    gap: 14px;
    width: 100%;
    min-height: 100%;
    align-items: stretch;
}

.keyfitting-target-panel,
.keyfitting-choice-panel {
    position: relative;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1);
}

.keyfitting-target-panel {
    flex: 0 0 clamp(344px, 31%, 392px);
    min-width: 320px;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 10px;
    padding: 34px 12px 12px;
}

.keyfitting-choice-panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: 34px 14px 14px;
}

.keyfitting-target-canvas {
    width: 100%;
    height: min(280px, calc(var(--keyfitting-piece-h) + 36px));
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: #ffffff;
}

.keyfitting-target-canvas svg,
.keyfitting-choice svg {
    width: min(100%, var(--keyfitting-piece-w));
    height: var(--keyfitting-piece-h);
    display: block;
    margin: 0 auto;
}

.keyfitting-piece-outline {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 0.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.keyfitting-level-desc,
.keyfitting-feedback {
    font-size: 12px;
    line-height: 1.45;
    color: var(--md-on-surface-variant);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: var(--md-surface-container);
    padding: 10px 12px;
}

.keyfitting-feedback {
    min-height: 58px;
}

.keyfitting-feedback.ok {
    color: var(--md-correct);
    border-color: var(--md-correct);
    background: var(--md-correct-container);
}

.keyfitting-feedback.bad {
    color: var(--md-wrong);
    border-color: var(--md-wrong);
    background: var(--md-wrong-container);
}

.keyfitting-feedback.warn {
    color: var(--md-on-surface);
    border-color: var(--md-warning);
    background: var(--md-warning-container);
}

.keyfitting-choices-grid {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-template-rows: repeat(2, minmax(210px, 1fr));
    gap: 12px;
}

.keyfitting-choice {
    position: relative;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 28px 10px 10px;
    text-align: left;
    appearance: none;
    font-family: var(--md-font);
}

.keyfitting-choice:disabled {
    cursor: default;
    opacity: 1;
}

.keyfitting-choice-letter {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-primary);
    font-weight: 800;
    font-size: 14px;
    z-index: 2;
}

.keyfitting-choice-reason {
    position: absolute;
    top: 11px;
    right: 12px;
    max-width: calc(100% - 54px);
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    line-height: 1.2;
}

.keyfitting-choice.selected-exam {
    border-color: var(--md-primary) !important;
    background: var(--md-primary-container) !important;
    box-shadow: inset 0 0 0 2px var(--md-primary), 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent) !important;
}

.keyfitting-choice.correct {
    border-color: var(--md-correct) !important;
    background: var(--md-correct-container) !important;
    box-shadow: inset 0 0 0 2px var(--md-correct), 0 0 0 3px color-mix(in srgb, var(--md-correct) 20%, transparent) !important;
}

.keyfitting-choice.wrong {
    border-color: var(--md-wrong) !important;
    background: var(--md-wrong-container) !important;
    box-shadow: inset 0 0 0 2px var(--md-wrong), 0 0 0 3px color-mix(in srgb, var(--md-wrong) 18%, transparent) !important;
}

.keyfitting-choice.selected-exam.correct,
.keyfitting-choice.selected-exam.wrong {
    outline: 3px solid var(--md-primary);
    outline-offset: 2px;
}

.keyfitting-choice.correct .keyfitting-choice-letter {
    color: var(--md-correct);
    border-color: var(--md-correct);
}

.keyfitting-choice.wrong .keyfitting-choice-letter {
    color: var(--md-wrong);
    border-color: var(--md-wrong);
}

@media (min-width: 901px) and (max-width: 1180px) {
    .keyfitting-target-panel {
        flex: 0 0 300px;
        min-width: 300px;
    }

    .keyfitting-choices-grid {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
        grid-template-rows: repeat(2, minmax(190px, 1fr));
    }

    .keyfitting-choice {
        min-height: 190px;
    }
}

@media (max-width: 900px) {
    .keyfitting-layout {
        flex-direction: column;
    }

    .keyfitting-target-panel {
        flex: 0 0 auto;
        min-width: 0;
    }

    .keyfitting-choice-panel {
        flex: 1 1 auto;
        min-height: 470px;
    }
}

@media (max-width: 900px) {
    .keyfitting-choices-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(196px, auto));
    }

    .keyfitting-choice {
        min-height: 196px;
    }
}

/* Electrical Maze */
#electricalmaze-stage .game-play-area {
    min-height: 0;
}

.em-layout-container {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.em-board-panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1);
    overflow: hidden;
}

.em-prompt {
    flex: 0 0 auto;
    margin: 38px 16px 8px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.em-reveal-row {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 8px;
}

.em-reveal-btn {
    display: none;
    padding: 6px 12px;
    border: 1px solid #10b981;
    border-radius: 6px;
    background: #242827;
    color: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: Outfit, Noto Sans Thai, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.em-board {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 12px 14px;
}

.em-maze-svg {
    width: 100%;
    height: 100%;
    min-height: 430px;
    display: block;
    border-radius: 8px;
    background: #f8fafc;
}

.em-answer-panel {
    flex: 0 0 clamp(280px, 30%, 380px);
    min-width: 260px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.em-rule-note {
    flex: 0 0 auto;
}

.em-choice-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.em-choice-btn {
    position: relative;
    width: 100%;
    min-height: 68px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: var(--md-surface);
    color: var(--md-on-surface);
    box-shadow: var(--md-elevation-1);
    cursor: pointer;
    text-align: left;
    padding: 12px 14px 12px 56px;
    font-family: var(--md-font);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.em-choice-btn:hover {
    transform: translateY(-1px);
    border-color: var(--md-primary);
}

.em-choice-btn.selected {
    border-color: var(--md-primary);
    background: var(--md-primary-container);
}

.em-choice-btn.correct {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.em-choice-btn.wrong {
    border-color: #f43f5e;
    background: rgba(244, 63, 94, 0.12);
}

.em-choice-key {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    font-weight: 800;
    color: var(--md-primary);
}

.em-choice-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.em-choice-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--md-on-surface-variant);
    line-height: 1.3;
}

.em-path {
    fill: none;
    stroke: #20242a;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-path.correct-path {
    stroke: #10b981;
    stroke-width: 4.8;
}

.em-node {
    fill: #111827;
    stroke: #ffffff;
    stroke-width: 2;
}

.em-node.minor {
    fill: #374151;
    opacity: 0.75;
}

.em-terminal {
    fill: #ffffff;
    stroke: #111827;
    stroke-width: 3;
}

.em-terminal-label,
.em-terminal-sf,
.em-ring-label {
    fill: #111827;
    font-family: var(--md-font);
    font-weight: 800;
}

.em-terminal-label {
    font-size: 22px;
}

.em-terminal-sf {
    font-size: 18px;
}

.em-ring {
    fill: #ffffff;
    stroke: #111827;
    stroke-width: 4;
}

.em-ring.review {
    stroke: #10b981;
    stroke-width: 6;
}

.em-ring-label {
    font-size: 14px;
}

@media (max-width: 980px) {
    .em-layout-container {
        flex-direction: column;
        overflow-y: auto;
    }

    .em-board-panel {
        min-height: 500px;
    }

    .em-answer-panel {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
    }

    .em-choice-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .em-choice-btn {
        min-height: 72px;
        padding: 12px 10px 10px;
        text-align: center;
    }

    .em-choice-key {
        position: static;
        transform: none;
        margin: 0 auto 6px;
    }

    .em-choice-subtitle {
        display: none;
    }
}

@media (max-width: 560px) {
    .em-board-panel {
        min-height: 420px;
    }

    .em-maze-svg {
        min-height: 340px;
    }

    .em-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}


/* ==========================================================================
   GRID NUMBER (3X3 MATRICES) GAME STYLES
   ========================================================================== */

.gn-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    gap: 18px;
    width: min(100%, 980px);
    margin: 10px auto 0;
    align-items: start;
}

.gridnumber-play-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.gn-matrix-card {
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg, 16px);
    padding: 14px;
    max-width: none;
    box-shadow: var(--md-elevation-2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gn-matrix-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--md-on-surface);
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--md-outline-variant);
    padding-bottom: 8px;
}

.gn-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    width: 100%;
    max-width: 210px;
}

.matrix-cell {
    background: var(--md-surface-container-high);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm, 8px);
    font-size: 21px;
    font-weight: bold;
    color: var(--md-on-surface);
    height: 64px;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.25s ease;
}

/* Hidden cell input container */
.matrix-cell.input-container {
    padding: 0;
    overflow: hidden;
    border: 2px dashed var(--md-primary);
}

.gn-cell-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--md-on-surface);
    outline: none;
}

.gn-cell-input::placeholder {
    color: var(--md-primary);
    opacity: 0.6;
}

/* Animations for correct/wrong cell */
.correct-cell-animate {
    border-color: var(--md-correct) !important;
    background: var(--md-correct-container) !important;
    box-shadow: 0 0 15px rgba(27, 135, 58, 0.4);
}
.correct-cell-animate .gn-cell-input {
    color: #1b873a !important;
}

.wrong-cell-animate {
    border-color: var(--md-wrong) !important;
    background: var(--md-wrong-container) !important;
    box-shadow: 0 0 15px rgba(186, 26, 26, 0.4);
}
.wrong-cell-animate .gn-cell-input {
    color: #ba1a1a !important;
}

/* Review styles */
.correct-cell-review {
    border-color: var(--md-correct) !important;
    background: var(--md-correct-container) !important;
    color: #1b873a !important;
    font-size: 16px !important;
}
.wrong-cell-review {
    border-color: var(--md-wrong) !important;
    background: var(--md-wrong-container) !important;
    color: #ba1a1a !important;
    font-size: 14px !important;
}

/* Choices styling */
.gn-choices-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
}

.gn-choices-title {
    font-size: 14px;
    color: var(--md-on-surface-variant);
    margin-bottom: 12px;
    font-weight: 500;
}

.gn-choices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 260px;
}

.choice-btn {
    background: var(--md-surface-container-high);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm, 8px);
    color: var(--md-on-surface);
    cursor: pointer;
    min-width: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: var(--md-elevation-1);
}

@media (hover: hover) and (pointer: fine) {
    .choice-btn:hover:not(:disabled) {
        background: var(--md-surface-container-highest);
        border-color: var(--md-outline);
        transform: translateY(-2px);
    }
}

@media (hover: none), (pointer: coarse) {
    .choice-btn:hover:not(:disabled) {
        background: var(--md-surface-container-high);
        border-color: var(--md-outline-variant);
        transform: none;
    }
}

.choice-btn:active:not(:disabled) {
    transform: translateY(0);
}

.choice-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.choice-btn.selected {
    background: var(--md-primary-container) !important;
    border-color: var(--md-primary) !important;
    color: var(--md-on-primary-container) !important;
    box-shadow: 0 0 12px rgba(91, 91, 214, 0.35);
    transform: scale(1.05) translateY(-2px);
}

.choice-btn.selected .choice-letter {
    color: var(--md-on-primary-container) !important;
}

.choice-btn.selected .choice-val {
    color: var(--md-on-primary-container) !important;
}

.choice-letter {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-primary);
    text-transform: uppercase;
}

.choice-val {
    font-size: 20px;
    font-weight: 700;
}

.choice-btn.btn-correct {
    background: var(--md-correct-container) !important;
    border-color: var(--md-correct) !important;
    color: #1b873a !important;
    transform: none !important;
    box-shadow: none !important;
}

.choice-btn.btn-wrong {
    background: var(--md-wrong-container) !important;
    border-color: var(--md-wrong) !important;
    color: #ba1a1a !important;
    transform: none !important;
    box-shadow: none !important;
}

.choice-btn.btn-correct .choice-letter, .choice-btn.btn-correct .choice-val {
    color: #1b873a !important;
}

.choice-btn.btn-wrong .choice-letter, .choice-btn.btn-wrong .choice-val {
    color: #ba1a1a !important;
}

.matrix-cell.hidden-cell {
    border: 2px dashed var(--md-primary);
    color: var(--md-primary);
    background: rgba(91, 91, 214, 0.05);
}

.matrix-cell.hidden-cell.selected-cell {
    border: 2px solid var(--md-primary);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.matrix-cell.hidden-cell.correct-cell {
    border: 2px solid var(--md-correct) !important;
    background: var(--md-correct-container) !important;
    color: #1b873a !important;
}

.matrix-cell.hidden-cell.wrong-cell {
    border: 2px solid var(--md-wrong) !important;
    background: var(--md-wrong-container) !important;
    color: #ba1a1a !important;
}

/* Explanation Card styling */
.gn-explain-card {
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md, 12px);
    padding: 15px 20px;
    max-width: 980px;
    width: min(100%, 980px);
    margin: 14px auto 0;
    color: var(--md-on-surface);
    box-shadow: var(--md-elevation-1);
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.gn-explain-card.reveal {
    transform: translateY(0);
    opacity: 1;
}

.explain-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}

.explain-text {
    font-size: 15px;
    margin-bottom: 6px;
}

.explain-desc {
    font-size: 14px;
    color: var(--md-on-surface-variant);
    line-height: 1.4;
}

/* Results panel */
.gn-result-card {
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg, 16px);
    padding: 30px;
    max-width: 760px;
    margin: 20px auto;
    width: 100%;
    box-shadow: var(--md-elevation-3);
    text-align: center;
}

.gn-result-stats {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.gn-res-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--md-surface-container-high);
    border-radius: var(--md-shape-md, 12px);
    padding: 15px 10px;
    flex: 1 1 140px;
    box-shadow: var(--md-elevation-1);
}

.gn-res-val {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 6px;
}

.gn-res-label {
    font-size: 12px;
    color: var(--md-on-surface-variant);
}

.gn-review-section {
    margin-top: 30px;
    text-align: left;
}

.gn-review-section h4 {
    margin-bottom: 12px;
    color: var(--md-on-surface);
}

#gridnumber-stage .game-controls {
    justify-content: center;
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
}

#gridnumber-stage .game-controls .btn-group {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

#gridnumber-stage .game-controls .btn-action {
    flex: 0 1 180px;
    min-width: 128px;
    max-width: 220px;
    white-space: nowrap;
}

#gridnumber-stage #gn-submit-btn {
    flex-basis: 210px;
}

.review-btn-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.gn-quiz-navigator {
    width: min(100%, 980px);
    margin: 0 auto 8px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.gn-nav-btn {
    height: 28px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.gn-nav-btn.answered {
    border-color: var(--md-primary);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.gn-nav-btn.active {
    outline: 2px solid var(--md-primary);
    outline-offset: 1px;
}

.review-num-btn {
    border-radius: var(--md-shape-sm, 8px);
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    cursor: pointer;
    border: 1px solid var(--md-outline-variant);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-num-btn.correct {
    background: rgba(27, 135, 58, 0.1);
    color: #1b873a;
    border-color: rgba(27, 135, 58, 0.3);
}

.review-num-btn.wrong {
    background: rgba(186, 26, 26, 0.1);
    color: #ba1a1a;
    border-color: rgba(186, 26, 26, 0.3);
}

.review-num-btn:hover {
    transform: scale(1.05);
}

@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
    .gn-main-row {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
        width: 100%;
        gap: 14px;
    }

    .gridnumber-play-container {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        gap: 14px;
    }

    .gn-matrix-grid {
        max-width: 192px;
        gap: 8px;
    }

    .matrix-cell {
        height: 58px;
        width: 58px;
        font-size: 19px;
    }

    .choice-btn {
        padding: 8px 10px;
    }
}

/* Tablet portrait / Mobile tweaks */
@media (max-width: 899px) {
    .gn-main-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .gridnumber-play-container {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
    }
    .gn-matrix-card {
        width: 100%;
        max-width: 300px;
    }
    .matrix-cell {
        height: 56px;
        width: 56px;
        font-size: 20px;
    }

    .gn-choices-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: 520px;
    }

    .choice-btn {
        padding: 9px 8px;
    }

    .gn-quiz-navigator {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    #gridnumber-stage .game-controls {
        padding-left: 8px;
        padding-right: 8px;
    }

    #gridnumber-stage .game-controls .btn-group {
        gap: 6px;
    }

    #gridnumber-stage .game-controls .btn-action {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
    }
}

/* Layout Overlap Fix for Grid Number */

#gn-play-area {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Dashboard Countdown Banner --- */
.dashboard-countdown-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(91, 91, 214, 0.08) 0%, rgba(20, 18, 24, 0.02) 100%);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    padding: 16px 24px;
    margin-bottom: 24px;
    box-shadow: var(--md-elevation-1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

:root[data-theme="night"] .dashboard-countdown-banner {
    background: linear-gradient(135deg, rgba(197, 196, 255, 0.08) 0%, rgba(13, 11, 16, 0.3) 100%);
    border: 1px solid rgba(197, 196, 255, 0.15);
    box-shadow: var(--md-elevation-2);
}

.dcb-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dcb-icon-box {
    font-size: 28px;
    background: rgba(91, 91, 214, 0.1);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-shape-md);
}

:root[data-theme="night"] .dcb-icon-box {
    background: rgba(197, 196, 255, 0.1);
}

.dcb-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dcb-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: 0.3px;
}

.dcb-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    opacity: 0.9;
}

.dcb-timer-container {
    display: flex;
    align-items: center;
}

.timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--md-shape-md);
    min-width: 80px;
    padding: 8px 12px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

:root[data-theme="night"] .timer-segment {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.02);
}

.timer-num {
    font-family: var(--md-font-mono);
    font-size: 26px;
    font-weight: 800;
    color: var(--md-primary);
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(91, 91, 214, 0.2);
}

:root[data-theme="night"] .timer-num {
    text-shadow: 0 0 15px rgba(197, 196, 255, 0.3);
}

.timer-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    opacity: 0.8;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .dashboard-countdown-banner {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px;
        text-align: center;
    }
    
    .dcb-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .dcb-timer-container {
        width: 100%;
        justify-content: center;
    }
}

/* Phone-ready layer for low-risk games only. Keep this width below tablet/iPad breakpoints. */
@media (max-width: 560px) {
    #view-nback .game-lobby,
    #view-similarity .game-lobby,
    #view-seriesnum .game-lobby,
    #view-gridnumber .game-lobby,
    #view-numestimate .game-lobby,
    #view-computerchecking .game-lobby {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-nback .lobby-content,
    #view-similarity .lobby-content,
    #view-seriesnum .lobby-content,
    #view-gridnumber .lobby-content,
    #view-numestimate .lobby-content,
    #view-computerchecking .lobby-card {
        max-width: none;
        padding: 16px;
        border-radius: 12px;
    }

    #view-nback .lobby-content h2,
    #view-similarity .lobby-content h2,
    #view-seriesnum .lobby-content h2,
    #view-gridnumber .lobby-content h2,
    #view-numestimate .lobby-content h2,
    #view-computerchecking .lobby-card h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    #view-nback .lobby-desc,
    #view-similarity .lobby-desc,
    #view-seriesnum .lobby-desc,
    #view-gridnumber .lobby-desc,
    #view-numestimate .lobby-desc,
    #view-computerchecking .lobby-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    #view-nback .lobby-best-record,
    #view-similarity .lobby-best-record,
    #view-seriesnum .lobby-best-record,
    #view-gridnumber .lobby-best-record,
    #view-numestimate .lobby-best-record,
    #view-computerchecking .lobby-best-record {
        margin-bottom: 12px;
    }

    #view-nback .lobby-modes-grid,
    #view-similarity .lobby-modes-grid,
    #view-seriesnum .lobby-modes-grid,
    #view-gridnumber .lobby-modes-grid,
    #view-numestimate .lobby-modes-grid,
    #view-computerchecking .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    #view-nback .lobby-mode-card,
    #view-similarity .lobby-mode-card,
    #view-seriesnum .lobby-mode-card,
    #view-gridnumber .lobby-mode-card,
    #view-numestimate .lobby-mode-card,
    #view-computerchecking .lobby-mode-card {
        padding: 10px;
        touch-action: manipulation;
    }

    #view-nback .lobby-settings-grid,
    #view-similarity .lobby-settings-grid,
    #view-seriesnum .lobby-settings-grid,
    #view-gridnumber .lobby-settings-grid,
    #view-numestimate .lobby-settings-grid,
    #view-computerchecking .lobby-settings-area {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        padding: 10px;
    }

    #nback-stage,
    #similarity-stage,
    #seriesnum-stage,
    #gridnumber-stage,
    #numestimate-stage,
    #computerchecking-stage {
        padding: 10px;
    }

    #nback-stage .game-header,
    #similarity-stage .game-header,
    #seriesnum-stage .game-header,
    #gridnumber-stage .game-header,
    #numestimate-stage .game-header,
    #computerchecking-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #nback-stage .game-info,
    #similarity-stage .game-info,
    #seriesnum-stage .game-info,
    #gridnumber-stage .game-info,
    #numestimate-stage .game-info,
    #computerchecking-stage .game-info {
        min-width: 0;
    }

    #nback-stage .game-info h2,
    #similarity-stage .game-info h2,
    #seriesnum-stage .game-info h2,
    #gridnumber-stage .game-info h2,
    #numestimate-stage .game-info h2,
    #computerchecking-stage .game-info h2 {
        font-size: 14px;
        line-height: 1.25;
    }

    #nback-stage .game-stats,
    #similarity-stage .game-stats,
    #seriesnum-stage .game-stats,
    #gridnumber-stage .game-stats,
    #numestimate-stage .game-stats,
    #computerchecking-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #nback-stage .g-stat,
    #similarity-stage .g-stat,
    #seriesnum-stage .g-stat,
    #gridnumber-stage .g-stat,
    #numestimate-stage .g-stat,
    #computerchecking-stage .g-stat {
        min-width: 0;
        justify-content: center;
        padding: 5px 6px;
    }

    #nback-stage .gs-label,
    #similarity-stage .gs-label,
    #seriesnum-stage .gs-label,
    #gridnumber-stage .gs-label,
    #numestimate-stage .gs-label,
    #computerchecking-stage .gs-label {
        font-size: 8px;
    }

    #nback-stage .game-play-area,
    #similarity-stage .game-play-area,
    #seriesnum-stage .game-play-area,
    #gridnumber-stage .game-play-area,
    #numestimate-stage .game-play-area,
    #computerchecking-stage .game-play-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #nback-stage .game-controls,
    #similarity-stage .game-controls,
    #seriesnum-stage .game-controls,
    #gridnumber-stage .game-controls,
    #numestimate-stage .game-controls,
    #computerchecking-stage .game-controls {
        height: auto;
        min-height: 52px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }

    #nback-stage .game-controls .btn-group,
    #similarity-stage .game-controls .btn-group,
    #seriesnum-stage .game-controls .btn-group,
    #gridnumber-stage .game-controls .btn-group,
    #numestimate-stage .game-controls .btn-group,
    #computerchecking-stage .game-controls .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    #nback-stage .game-controls select,
    #similarity-stage .game-controls select,
    #seriesnum-stage .game-controls select,
    #gridnumber-stage .game-controls select,
    #numestimate-stage .game-controls select,
    #computerchecking-stage .game-controls select,
    #nback-stage .game-controls .btn-action,
    #similarity-stage .game-controls .btn-action,
    #seriesnum-stage .game-controls .btn-action,
    #gridnumber-stage .game-controls .btn-action,
    #numestimate-stage .game-controls .btn-action,
    #computerchecking-stage .game-controls .btn-action {
        flex: 1 1 140px;
        min-width: 0;
        min-height: 40px;
        font-size: 11px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
    }

    #similarity-stage.quiz-active .game-controls .btn-group:last-child,
    #seriesnum-stage.quiz-active .game-controls .btn-group:last-child,
    #numestimate-stage.quiz-active .game-controls .btn-group:last-child,
    #computerchecking-stage.quiz-active .game-controls .btn-group:last-child {
        display: flex !important;
        height: auto;
        position: static;
    }

    #similarity-stage.quiz-active .game-controls [id$="-prev-btn"],
    #seriesnum-stage.quiz-active .game-controls [id$="-prev-btn"],
    #numestimate-stage.quiz-active .game-controls [id$="-prev-btn"],
    #computerchecking-stage.quiz-active .game-controls [id$="-prev-btn"],
    #similarity-stage.quiz-active .game-controls [id$="-next-btn"],
    #seriesnum-stage.quiz-active .game-controls [id$="-next-btn"],
    #numestimate-stage.quiz-active .game-controls [id$="-next-btn"],
    #computerchecking-stage.quiz-active .game-controls [id$="-next-btn"],
    #similarity-stage.quiz-active .game-controls [id$="-submit-btn"],
    #similarity-stage.quiz-active .game-controls [id$="-submit-exam-btn"],
    #seriesnum-stage.quiz-active .game-controls [id$="-submit-btn"],
    #numestimate-stage.quiz-active .game-controls [id$="-submit-exam-btn"],
    #computerchecking-stage.quiz-active .game-controls [id$="-submit-exam-btn"] {
        position: static;
        transform: none;
        flex: 1 1 0;
    }

    #nback-stage .nback-play-area {
        justify-content: flex-start;
        gap: 12px;
        padding-top: 6px;
    }

    #nback-stage .nback-grid-wrapper {
        width: min(72vw, 260px);
        height: min(72vw, 260px);
    }

    #nback-stage .nback-response-row {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    #nback-stage .btn-nback-resp {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        touch-action: manipulation;
    }

    #nback-stage #nback-stop-btn {
        align-self: center;
        flex: 0 0 auto;
        width: auto;
        max-width: 176px;
        min-height: 34px;
        padding: 7px 14px;
        font-size: 11px;
        border-radius: var(--md-shape-sm, 8px);
    }

    #similarity-stage .similarity-layout {
        gap: 10px;
        height: auto;
        min-height: 0;
    }

    #similarity-stage .sim-target-wrapper {
        gap: 10px;
        align-items: stretch;
    }

    #similarity-stage .sim-target-card {
        width: 108px;
        height: 108px;
        min-height: 108px !important;
        max-height: 108px !important;
    }

    #similarity-stage .sim-target-card .canvas-label {
        display: none !important;
    }

    #similarity-stage .similarity-tip {
        flex: 1 1 0;
        min-width: 0;
        font-size: 10px;
        padding: 10px;
    }

    #similarity-stage .sim-choices-wrapper {
        min-height: 0;
    }

    #similarity-stage .sim-choices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
        gap: 8px;
    }

    #similarity-stage .sim-choice-card {
        min-height: 0;
        touch-action: manipulation;
    }

    #seriesnum-stage .series-scroll-panel {
        padding-right: 0;
    }

    #seriesnum-stage .series-questions-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #seriesnum-stage .series-q-card {
        padding: 14px;
        border-radius: 12px;
    }

    #seriesnum-stage .series-display {
        font-size: clamp(14px, 4vw, 18px);
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    #seriesnum-stage .btn-series-choice {
        min-height: 42px;
        touch-action: manipulation;
    }

    #gridnumber-stage #gn-play-area {
        padding: 6px 0 16px;
        gap: 10px;
    }

    #gridnumber-stage .gridnumber-play-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: start;
    }

    #gridnumber-stage .gn-matrix-card {
        width: 100%;
        max-width: none;
        padding: 8px;
        border-radius: 12px;
    }

    #gridnumber-stage .gn-matrix-title {
        font-size: 11px;
        margin-bottom: 7px;
        padding-bottom: 6px;
    }

    #gridnumber-stage .gn-matrix-grid {
        max-width: 138px;
        gap: 5px;
    }

    #gridnumber-stage .matrix-cell {
        width: 42px;
        height: 42px;
        font-size: 17px;
        border-radius: 7px;
    }

    #gridnumber-stage .gn-choices-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        max-width: none;
    }

    #gridnumber-stage .choice-btn {
        min-height: 42px;
        padding: 7px 4px;
        touch-action: manipulation;
    }

    #gridnumber-stage .choice-val {
        font-size: 16px;
    }

    #gridnumber-stage .gn-explain-card {
        padding: 12px;
        margin-top: 8px;
    }

    #gridnumber-stage .gn-quiz-navigator {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }

    #numestimate-stage #numestimate-practice-view {
        gap: 12px !important;
    }

    #numestimate-stage #numestimate-practice-view .main-canvas-card {
        min-height: 96px !important;
        height: auto !important;
        max-height: none !important;
        padding: 14px !important;
    }

    #numestimate-stage #numestimate-question-display {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    #numestimate-stage .options-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    #numestimate-stage .option-card.estimate-card {
        min-height: 88px !important;
        height: auto !important;
        padding: 12px 8px;
        touch-action: manipulation;
    }

    #numestimate-stage .numestimate-qcard-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    #numestimate-stage .numestimate-qcard-text {
        font-size: 16px;
        padding: 10px;
    }

    #computerchecking-stage .cc-layout-container {
        height: auto !important;
        gap: 8px;
    }

    #computerchecking-stage .cc-choices-grid,
    #computerchecking-stage .cc-quiz-choices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
    }

    #computerchecking-stage .cc-option-card {
        min-height: 52px !important;
        height: auto !important;
        padding: 10px 8px !important;
        touch-action: manipulation;
    }

    #computerchecking-stage .cc-opt-text {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    #computerchecking-stage .cc-quiz-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px !important;
    }

    #computerchecking-stage .cc-quiz-row-num {
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 420px) {
    #similarity-stage .sim-target-wrapper {
        flex-direction: column;
        align-items: center;
    }

    #similarity-stage .similarity-tip {
        width: 100%;
    }

    #gridnumber-stage .matrix-cell {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    #gridnumber-stage .gn-matrix-grid {
        max-width: 124px;
        gap: 5px;
    }
}

/* Phone beta layer for visual/heavier games. Scoped tightly to avoid normal iPad layouts. */
@media (max-width: 560px), (max-height: 430px) and (max-width: 920px) {
    #view-hiddenimage .game-lobby,
    #view-balancescale .game-lobby,
    #view-electricalmaze .game-lobby,
    #view-shortmemory .game-lobby,
    #view-stmgrid .game-lobby {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-hiddenimage .lobby-content,
    #view-balancescale .lobby-card,
    #view-electricalmaze .lobby-card,
    #view-shortmemory .lobby-content,
    #view-stmgrid .lobby-content {
        max-width: none;
        padding: 16px;
        border-radius: 12px;
    }

    #view-hiddenimage .lobby-content h2,
    #view-balancescale .lobby-card h2,
    #view-electricalmaze .lobby-card h2,
    #view-shortmemory .lobby-content h2,
    #view-stmgrid .lobby-content h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    #view-hiddenimage .lobby-desc,
    #view-balancescale .lobby-desc,
    #view-electricalmaze .lobby-desc,
    #view-shortmemory .lobby-desc,
    #view-stmgrid .lobby-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    #view-hiddenimage .lobby-best-record,
    #view-balancescale .lobby-best-record,
    #view-electricalmaze .lobby-best-record,
    #view-shortmemory .lobby-best-record,
    #view-stmgrid .lobby-best-record {
        margin-bottom: 12px;
    }

    #view-hiddenimage .lobby-modes-grid,
    #view-balancescale .lobby-modes-grid,
    #view-electricalmaze .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    #view-hiddenimage .lobby-mode-card,
    #view-balancescale .lobby-mode-card,
    #view-electricalmaze .lobby-mode-card {
        padding: 10px;
        touch-action: manipulation;
    }

    #view-hiddenimage .lobby-settings-grid,
    #view-balancescale .lobby-settings-area,
    #view-electricalmaze .lobby-settings-area,
    #view-shortmemory .lobby-settings-grid {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 10px;
        max-width: none !important;
    }

    #view-shortmemory .lobby-instruction-card,
    #view-stmgrid .lobby-instruction-card {
        max-width: none !important;
        padding: 14px !important;
        margin-bottom: 14px !important;
        font-size: 11px;
    }

    #view-shortmemory .lobby-instruction-card ol,
    #view-stmgrid .lobby-instruction-card ol {
        margin-left: 16px !important;
        line-height: 1.45 !important;
    }

    #hiddenimage-stage,
    #balancescale-stage,
    #electricalmaze-stage,
    #shortmemory-stage,
    #stmgrid-stage {
        padding: 10px;
    }

    #hiddenimage-stage .game-header,
    #balancescale-stage .game-header,
    #electricalmaze-stage .game-header,
    #shortmemory-stage .game-header,
    #stmgrid-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #hiddenimage-stage .game-info,
    #balancescale-stage .game-info,
    #electricalmaze-stage .game-info,
    #shortmemory-stage .game-info,
    #stmgrid-stage .game-info {
        min-width: 0;
    }

    #hiddenimage-stage .game-info h2,
    #balancescale-stage .game-info h2,
    #electricalmaze-stage .game-info h2,
    #shortmemory-stage .game-info h2,
    #stmgrid-stage .game-info h2 {
        font-size: 14px;
        line-height: 1.25;
    }

    #hiddenimage-stage .game-stats,
    #balancescale-stage .game-stats,
    #electricalmaze-stage .game-stats,
    #shortmemory-stage .game-stats,
    #stmgrid-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #hiddenimage-stage .g-stat,
    #balancescale-stage .g-stat,
    #electricalmaze-stage .g-stat,
    #shortmemory-stage .g-stat,
    #stmgrid-stage .g-stat {
        min-width: 0;
        justify-content: center;
        padding: 5px 6px;
    }

    #hiddenimage-stage .gs-label,
    #balancescale-stage .gs-label,
    #electricalmaze-stage .gs-label,
    #shortmemory-stage .gs-label,
    #stmgrid-stage .gs-label {
        font-size: 8px;
    }

    #hiddenimage-stage .game-play-area,
    #balancescale-stage .game-play-area,
    #electricalmaze-stage .game-play-area,
    #shortmemory-stage .game-play-area,
    #stmgrid-stage .game-play-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #hiddenimage-stage .game-controls,
    #balancescale-stage .game-controls,
    #electricalmaze-stage .game-controls,
    #shortmemory-stage .game-controls,
    #stmgrid-stage .game-controls {
        height: auto;
        min-height: 52px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }

    #hiddenimage-stage .game-controls .btn-group,
    #balancescale-stage .game-controls .btn-group,
    #electricalmaze-stage .game-controls .btn-group,
    #shortmemory-stage .game-controls .btn-group,
    #stmgrid-stage .game-controls .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    #hiddenimage-stage .game-controls select,
    #balancescale-stage .game-controls select,
    #electricalmaze-stage .game-controls select,
    #shortmemory-stage .game-controls select,
    #stmgrid-stage .game-controls select,
    #hiddenimage-stage .game-controls .btn-action,
    #balancescale-stage .game-controls .btn-action,
    #electricalmaze-stage .game-controls .btn-action,
    #shortmemory-stage .game-controls .btn-action,
    #stmgrid-stage .game-controls .btn-action {
        flex: 1 1 140px;
        min-width: 0;
        min-height: 40px;
        font-size: 11px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
    }

    #hiddenimage-stage.quiz-active .game-controls .btn-group:last-child,
    #balancescale-stage.quiz-active .game-controls .btn-group:last-child,
    #electricalmaze-stage.quiz-active .game-controls .btn-group:last-child,
    #shortmemory-stage.quiz-active .game-controls .btn-group:last-child,
    #stmgrid-stage.quiz-active .game-controls .btn-group:last-child {
        display: flex !important;
        height: auto;
        position: static;
    }

    #hiddenimage-stage.quiz-active .game-controls [id$="-prev-btn"],
    #balancescale-stage.quiz-active .game-controls [id$="-prev-btn"],
    #electricalmaze-stage.quiz-active .game-controls [id$="-prev-btn"],
    #shortmemory-stage.quiz-active .game-controls [id$="-prev-btn"],
    #stmgrid-stage.quiz-active .game-controls [id$="-prev-btn"],
    #hiddenimage-stage.quiz-active .game-controls [id$="-next-btn"],
    #balancescale-stage.quiz-active .game-controls [id$="-next-btn"],
    #electricalmaze-stage.quiz-active .game-controls [id$="-next-btn"],
    #shortmemory-stage.quiz-active .game-controls [id$="-next-btn"],
    #stmgrid-stage.quiz-active .game-controls [id$="-next-btn"],
    #hiddenimage-stage.quiz-active .game-controls [id$="-submit-exam-btn"],
    #balancescale-stage.quiz-active .game-controls [id$="-submit-exam-btn"],
    #electricalmaze-stage.quiz-active .game-controls [id$="-submit-exam-btn"],
    #shortmemory-stage.quiz-active .game-controls [id$="-submit-btn"],
    #stmgrid-stage.quiz-active .game-controls [id$="-submit-btn"] {
        position: static;
        transform: none;
        flex: 1 1 0;
    }

    #hiddenimage-stage .hiddenimage-split-view {
        height: auto !important;
        gap: 10px;
    }

    #hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
        flex: none !important;
        height: 320px !important;
        min-height: 320px !important;
        max-height: none !important;
    }

    #hiddenimage-stage .canvas-label {
        display: none !important;
    }

    #hiddenimage-stage .hiddenimage-split-view .options-container {
        flex: none !important;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    #hiddenimage-stage .hiddenimage-desc {
        font-size: 10px;
        padding: 9px 10px;
    }

    #hiddenimage-options-grid {
        height: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, auto) !important;
        gap: 8px !important;
    }

    #hiddenimage-options-grid .hidden-answer-option {
        height: 72px !important;
        min-height: 72px !important;
        padding: 10px 9px 10px 36px;
        touch-action: manipulation;
    }

    .hidden-answer-card strong {
        font-size: 12px;
    }

    .hidden-answer-card small {
        font-size: 9px;
    }

    #balancescale-stage .bs-layout-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 10px !important;
    }

    #balancescale-stage .bs-scales-panel {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px !important;
    }

    #balancescale-stage .bs-scales-panel > .canvas-label {
        display: none !important;
    }

    #balancescale-stage .bs-scales-grid {
        height: auto !important;
        gap: 8px;
        padding: 0;
    }

    #balancescale-stage .bs-scale-card {
        flex: none !important;
        min-height: 0 !important;
        padding: 4px 6px 6px;
        margin-bottom: 0;
        overflow: visible !important;
    }

    #balancescale-stage .bs-scale-canvas-container {
        height: 104px !important;
        min-height: 104px !important;
        overflow: visible !important;
    }

    #balancescale-stage .bs-options-panel {
        flex: none !important;
        width: 100%;
        min-height: 0;
        overflow: visible;
    }

    #balancescale-stage .bs-choices-grid-area {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(84px, auto)) !important;
        gap: 8px !important;
        height: auto !important;
    }

    #balancescale-stage .bf-option-card {
        min-height: 84px !important;
        height: auto !important;
        max-height: none !important;
        touch-action: manipulation;
    }

    #electricalmaze-stage .em-layout-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
        gap: 10px;
    }

    #electricalmaze-stage .em-board-panel {
        min-height: 430px;
        overflow: hidden;
    }

    #electricalmaze-stage .em-prompt {
        margin: 30px 10px 6px;
        padding: 8px 10px;
        font-size: 10px;
    }

    #electricalmaze-stage .em-reveal-row {
        padding: 0 10px 6px;
    }

    #electricalmaze-stage .em-board {
        padding: 6px 8px 10px;
        min-height: 0;
    }

    #electricalmaze-stage .em-maze-svg {
        min-height: 320px;
    }

    #electricalmaze-stage .em-answer-panel {
        flex: none;
        min-width: 0;
        max-width: none;
        gap: 8px;
    }

    #electricalmaze-stage .em-rule-note {
        font-size: 10px;
        padding: 9px 10px;
    }

    #electricalmaze-stage .em-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 8px;
    }

    #electricalmaze-stage .em-choice-btn {
        min-height: 58px;
        padding: 10px 8px;
        text-align: center;
        touch-action: manipulation;
    }

    #electricalmaze-stage .em-choice-key {
        position: static;
        transform: none;
        width: 28px;
        height: 28px;
        margin: 0 auto 5px;
    }

    #electricalmaze-stage .em-choice-title {
        font-size: 13px;
    }

    #electricalmaze-stage .em-choice-subtitle {
        display: none;
    }

    #shortmemory-stage #shortmemory-read-area,
    #shortmemory-stage #shortmemory-math-area,
    #shortmemory-stage #shortmemory-recall-area,
    #stmgrid-stage #stmgrid-read-area,
    #stmgrid-stage #stmgrid-math-area,
    #stmgrid-stage #stmgrid-recall-area {
        max-width: none !important;
        width: 100% !important;
    }

    #shortmemory-stage .briefing-header,
    #stmgrid-stage .briefing-header {
        padding: 10px 12px;
        font-size: 12px;
    }

    #shortmemory-stage .briefing-content,
    #stmgrid-stage .briefing-content {
        max-height: none !important;
        padding: 14px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #shortmemory-stage #shortmemory-read-text {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    #shortmemory-stage #shortmemory-done-reading-btn,
    #stmgrid-stage #stmgrid-done-reading-btn {
        width: 100%;
        padding: 11px 12px !important;
        font-size: 13px !important;
    }

    #shortmemory-stage #shortmemory-math-container,
    #shortmemory-stage #shortmemory-recall-container,
    #stmgrid-stage #stmgrid-math-container,
    #stmgrid-stage #stmgrid-recall-area {
        max-height: none !important;
        padding-right: 0 !important;
        gap: 12px !important;
    }

    #shortmemory-stage .math-quiz-card,
    #shortmemory-stage .recall-quiz-card,
    #stmgrid-stage .math-quiz-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    #shortmemory-stage .math-card-eq,
    #stmgrid-stage .math-card-eq {
        font-size: 18px !important;
    }

    #shortmemory-stage .math-opt-btn,
    #shortmemory-stage .recall-opt-btn,
    #stmgrid-stage .math-opt-btn {
        min-height: 42px;
        padding: 10px;
        touch-action: manipulation;
    }

    #shortmemory-stage .recall-opt-btn {
        align-items: flex-start;
        gap: 8px;
        justify-content: flex-start;
        min-height: 0;
        height: auto;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.35;
        text-align: left;
    }

    #shortmemory-stage .recall-question-text {
        max-width: 100%;
        min-width: 0;
        font-size: 16px !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #shortmemory-stage .recall-quiz-card {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    #shortmemory-stage .recall-quiz-card > div {
        min-width: 0;
        max-width: 100%;
    }

    #shortmemory-stage .recall-quiz-card .opt-indicator {
        flex: 0 0 24px;
    }

    #shortmemory-stage .opt-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #shortmemory-stage #shortmemory-recall-container .options-grid-4,
    #shortmemory-stage #shortmemory-math-container .options-grid-4,
    #stmgrid-stage #stmgrid-math-container .options-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        height: auto !important;
    }

    #stmgrid-stage .stm-grid {
        max-width: 360px;
        gap: 6px;
        margin: 10px auto;
    }

    #stmgrid-stage .stm-grid-cell {
        height: 40px;
        border-radius: 7px;
        font-size: 14px;
    }

    #stmgrid-stage .stm-grid-input {
        font-size: 16px;
    }

    #stmgrid-stage #stmgrid-recall-area {
        overflow-y: auto !important;
    }

    #stmgrid-stage #stmgrid-recall-area .recall-questions-wrapper {
        gap: 12px !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 420px) {
    #stmgrid-stage .stm-grid {
        max-width: 320px;
        gap: 5px;
    }

    #stmgrid-stage .stm-grid-cell {
        height: 36px;
        font-size: 13px;
    }

    #balancescale-stage .bs-scale-canvas-container {
        height: 92px !important;
        min-height: 92px !important;
    }

    #balancescale-stage .bs-scales-panel {
        padding-top: 6px !important;
    }

    #balancescale-stage .bs-scales-grid {
        gap: 6px;
    }

    #balancescale-stage .bs-scale-card {
        padding: 5px;
    }

    #balancescale-stage .bs-scale-header {
        font-size: 9px;
        margin-bottom: 2px;
    }

    #balancescale-stage .bs-choices-grid-area {
        grid-template-rows: repeat(2, minmax(92px, auto)) !important;
    }

    #balancescale-stage .bf-option-card {
        min-height: 92px !important;
    }

    #electricalmaze-stage .em-maze-svg {
        min-height: 270px;
    }

    #electricalmaze-stage .em-board-panel {
        min-height: 350px;
    }

    #electricalmaze-stage .em-prompt {
        margin-top: 24px;
    }

    #electricalmaze-stage .em-choice-btn {
        min-height: 52px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #electricalmaze-stage .em-choice-key {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
}

@media (max-width: 560px) {
    #view-boxfolding .game-lobby,
    #view-boxunfolding .game-lobby {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-boxfolding .lobby-content,
    #view-boxunfolding .lobby-content {
        max-width: none;
        padding: 16px;
        border-radius: 12px;
    }

    #view-boxfolding .lobby-content h2,
    #view-boxunfolding .lobby-content h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    #view-boxfolding .lobby-desc,
    #view-boxunfolding .lobby-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    #view-boxfolding .lobby-best-record,
    #view-boxunfolding .lobby-best-record {
        margin-bottom: 12px;
    }

    #view-boxfolding .lobby-modes-grid,
    #view-boxunfolding .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    #view-boxfolding .lobby-mode-card,
    #view-boxunfolding .lobby-mode-card {
        padding: 10px;
        touch-action: manipulation;
    }

    #view-boxfolding .lobby-settings-grid,
    #view-boxunfolding .lobby-settings-grid {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 10px;
        max-width: none !important;
    }

    #boxfolding-stage,
    #boxunfolding-stage {
        padding: 10px;
    }

    #boxfolding-stage .game-header,
    #boxunfolding-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #boxfolding-stage .game-info,
    #boxunfolding-stage .game-info {
        min-width: 0;
    }

    #boxfolding-stage .game-info h2,
    #boxunfolding-stage .game-info h2 {
        font-size: 14px;
        line-height: 1.25;
    }

    #boxfolding-stage .game-stats,
    #boxunfolding-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #boxfolding-stage .g-stat,
    #boxunfolding-stage .g-stat {
        min-width: 0;
        justify-content: center;
        padding: 5px 6px;
    }

    #boxfolding-stage .gs-label,
    #boxunfolding-stage .gs-label {
        font-size: 8px;
    }

    #boxfolding-stage .quiz-navigator,
    #boxunfolding-stage .quiz-navigator {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 6px;
        margin-bottom: 8px;
        scrollbar-width: thin;
    }

    #boxfolding-stage .quiz-nav-btn,
    #boxunfolding-stage .quiz-nav-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }

    #boxfolding-stage .game-play-area,
    #boxunfolding-stage .game-play-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #boxfolding-stage .bf-layout-container,
    #boxunfolding-stage .bf-layout-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #boxfolding-stage .canvas-container,
    #boxunfolding-stage .canvas-container {
        flex: none !important;
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: none !important;
    }

    #boxfolding-stage .canvas-container canvas,
    #boxunfolding-stage .canvas-container canvas {
        min-height: 0 !important;
        height: 100% !important;
    }

    #boxfolding-stage .bf-options-panel,
    #boxunfolding-stage .bf-options-panel {
        flex: none !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #boxfolding-stage .bf-choices-grid-area,
    #boxunfolding-stage .bf-choices-grid-area {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 8px !important;
    }

    #boxfolding-stage .bf-choices-grid-area {
        grid-template-rows: repeat(3, minmax(92px, auto)) !important;
    }

    #boxunfolding-stage .bf-choices-grid-area {
        grid-template-rows: repeat(2, minmax(150px, auto)) !important;
    }

    #boxfolding-stage .bf-option-card,
    #boxunfolding-stage .bf-option-card {
        overflow: hidden !important;
        max-height: none !important;
        touch-action: manipulation;
    }

    #boxfolding-stage .bf-option-card {
        height: 92px !important;
        min-height: 92px !important;
    }

    #boxunfolding-stage .bf-option-card {
        height: 150px !important;
        min-height: 150px !important;
    }

    #boxfolding-stage .bf-opt-canvas,
    #boxunfolding-stage .bf-opt-canvas {
        max-height: 100% !important;
    }
}

@media (max-height: 430px) and (max-width: 920px) {
    #hiddenimage-stage .hiddenimage-split-view .main-canvas-card {
        height: 240px !important;
        min-height: 240px !important;
    }

    #balancescale-stage .bs-scale-canvas-container {
        height: 78px !important;
        min-height: 78px !important;
    }

    #electricalmaze-stage .em-board-panel {
        min-height: 360px;
    }

    #electricalmaze-stage .em-maze-svg {
        min-height: 260px;
    }

    #stmgrid-stage .stm-grid-cell {
        height: 34px;
    }
}

@media (max-width: 560px) {
    .global-header {
        position: sticky;
        top: 0;
        z-index: 80;
        height: 44px;
        min-height: 44px;
        padding: 0 8px;
        gap: 6px;
    }

    .toggle-sidebar-btn {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        margin-right: 0;
        font-size: 18px;
    }

    .header-title-container {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .header-title {
        display: block;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-subtitle {
        display: none;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 6px;
        min-width: 0;
    }

    .btn-dashboard-shortcut {
        width: 36px;
        min-width: 36px;
        height: 34px;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0;
        overflow: hidden;
    }

    #headerHistoryBtn::before {
        content: "📈";
        font-size: 16px;
        line-height: 1;
    }

    #headerDashboardBtn::before {
        content: "📊";
        font-size: 16px;
        line-height: 1;
    }

    .sound-toggle-header {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .lobby-settings-grid,
    .lobby-settings-area {
        gap: 6px !important;
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .lobby-settings-item {
        flex: 0 0 auto !important;
        gap: 2px !important;
    }

    .lobby-settings-item label {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .lobby-settings-item select,
    .game-controls select {
        min-height: 34px !important;
        height: 34px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .game-controls select {
        flex: 0 0 auto !important;
    }

    .lobby-start-btn {
        margin-top: 4px !important;
    }
}

/* Rotating View phone support. Scoped to avoid changing tablet/desktop layouts. */
@media (max-width: 560px), (max-height: 430px) and (max-width: 920px) {
    #view-rotatingview .game-lobby {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-rotatingview .lobby-content {
        max-width: none;
        padding: 16px;
        border-radius: 12px;
    }

    #view-rotatingview .lobby-content h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    #view-rotatingview .lobby-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    #view-rotatingview .lobby-best-record {
        margin-bottom: 12px;
    }

    #view-rotatingview .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    #view-rotatingview .lobby-mode-card {
        padding: 10px;
        touch-action: manipulation;
    }

    #view-rotatingview .lobby-settings-grid {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 10px;
        max-width: none !important;
    }

    #rotatingview-stage {
        padding: 10px;
    }

    #rotatingview-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #rotatingview-stage .game-info {
        min-width: 0;
    }

    #rotatingview-stage .game-info h2 {
        font-size: 14px;
        line-height: 1.25;
    }

    #rotatingview-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #rotatingview-stage .g-stat {
        min-width: 0;
        justify-content: center;
        padding: 5px 6px;
    }

    #rotatingview-stage .gs-label {
        font-size: 8px;
    }

    #rotatingview-stage .quiz-navigator {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 6px;
        margin-bottom: 8px;
        scrollbar-width: thin;
    }

    #rotatingview-stage .quiz-nav-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }

    #rotatingview-stage .game-play-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #rotatingview-stage .split-view {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #rotatingview-stage .canvas-container.main-canvas-card {
        flex: none !important;
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
        max-height: none !important;
    }

    #rotatingview-stage .canvas-container canvas {
        height: 100% !important;
        max-height: none !important;
    }

    #rotatingview-stage .options-container {
        flex: none !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #rotatingview-stage .rotating-desc {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.35;
    }

    #rotatingview-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(118px, auto)) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 8px !important;
    }

    #rotatingview-options-grid .option-card {
        height: 118px !important;
        min-height: 118px !important;
        max-height: none !important;
        touch-action: manipulation;
    }

    #rotatingview-options-grid .option-card canvas {
        height: 100% !important;
        max-height: none !important;
    }

    #rotatingview-stage .game-controls {
        height: auto;
        min-height: 52px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }

    #rotatingview-stage .game-controls .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    #rotatingview-stage .game-controls select,
    #rotatingview-stage .game-controls .btn-action {
        flex: 1 1 140px;
        min-width: 0;
        min-height: 40px;
        font-size: 11px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
    }

    #rotatingview-stage.quiz-active .game-controls .btn-group:last-child {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 52px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #rotatingview-stage.quiz-active .game-controls .btn-action {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Oblique View phone support. Mirrors Rotating View sizing but keeps its projection prompt visible. */
@media (max-width: 560px), (max-height: 430px) and (max-width: 920px) {
    #view-obliqueview .game-lobby {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #view-obliqueview .lobby-content {
        max-width: none;
        padding: 16px;
        border-radius: 12px;
    }

    #view-obliqueview .lobby-content h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    #view-obliqueview .lobby-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    #view-obliqueview .lobby-best-record {
        margin-bottom: 12px;
    }

    #view-obliqueview .lobby-modes-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    #view-obliqueview .lobby-mode-card {
        padding: 10px;
        touch-action: manipulation;
    }

    #view-obliqueview .lobby-settings-grid {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 10px;
        max-width: none !important;
    }

    #obliqueview-stage {
        padding: 10px;
    }

    #obliqueview-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    #obliqueview-stage .game-info {
        min-width: 0;
    }

    #obliqueview-stage .game-info h2 {
        font-size: 14px;
        line-height: 1.25;
    }

    #obliqueview-stage .game-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #obliqueview-stage .g-stat {
        min-width: 0;
        justify-content: center;
        padding: 5px 6px;
    }

    #obliqueview-stage .gs-label {
        font-size: 8px;
    }

    #obliqueview-stage .quiz-navigator {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 6px;
        margin-bottom: 8px;
        scrollbar-width: thin;
    }

    #obliqueview-stage .quiz-nav-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }

    #obliqueview-stage .game-play-area {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    #obliqueview-stage .split-view {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #obliqueview-stage .canvas-container.main-canvas-card {
        flex: none !important;
        width: 100% !important;
        height: 210px !important;
        min-height: 210px !important;
        max-height: none !important;
    }

    #obliqueview-stage .canvas-container canvas {
        height: 100% !important;
        max-height: none !important;
    }

    #obliqueview-stage .options-container {
        flex: none !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #obliqueview-stage .oblique-desc {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.35;
    }

    #obliqueview-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(118px, auto)) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 8px !important;
    }

    #obliqueview-options-grid .option-card {
        height: 118px !important;
        min-height: 118px !important;
        max-height: none !important;
        touch-action: manipulation;
    }

    #obliqueview-options-grid .option-card canvas {
        height: 100% !important;
        max-height: none !important;
    }

    #obliqueview-stage .game-controls {
        height: auto;
        min-height: 52px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
    }

    #obliqueview-stage .game-controls .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    #obliqueview-stage .game-controls select,
    #obliqueview-stage .game-controls .btn-action {
        flex: 1 1 140px;
        min-width: 0;
        min-height: 40px;
        font-size: 11px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
    }

    #obliqueview-stage.quiz-active .game-controls .btn-group:last-child {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 52px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #obliqueview-stage.quiz-active .game-controls .btn-action {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-height: 430px) and (max-width: 920px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 120;
        width: var(--sidebar-w-expanded);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--md-elevation-3);
    }

    .logo-full,
    .nav-text,
    .nav-section-title {
        display: block !important;
    }

    .logo-compact {
        display: none !important;
    }

    .main-content {
        width: 100%;
        min-width: 0;
    }

    #rotatingview-stage {
        padding: 8px;
    }

    #rotatingview-stage .game-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

    #rotatingview-stage .game-stats {
        flex: 0 0 auto;
        grid-template-columns: repeat(4, minmax(48px, auto));
        width: auto;
    }

    #rotatingview-stage .split-view {
        flex-direction: row !important;
        align-items: stretch;
        gap: 10px !important;
    }

    #rotatingview-stage .canvas-container.main-canvas-card {
        flex: 0 0 42% !important;
        width: auto !important;
        height: 202px !important;
        min-height: 202px !important;
    }

    #rotatingview-stage .options-container {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
    }

    #rotatingview-stage .rotating-desc {
        max-height: 34px;
        overflow: hidden;
        margin-bottom: 6px;
    }

    #rotatingview-options-grid {
        grid-template-rows: repeat(2, minmax(92px, 1fr)) !important;
    }

    #rotatingview-options-grid .option-card {
        height: 92px !important;
        min-height: 92px !important;
    }

    #rotatingview-stage .game-controls {
        height: 48px;
        min-height: 48px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #rotatingview-stage .game-controls .btn-group {
        width: auto;
        flex-wrap: nowrap;
        gap: 6px;
    }

    #rotatingview-stage .game-controls .btn-group:first-child {
        flex: 1 1 auto;
    }

    #rotatingview-stage .game-controls .btn-group:last-child {
        flex: 0 1 240px;
    }

    #rotatingview-stage .game-controls select,
    #rotatingview-stage .game-controls .btn-action {
        height: 34px !important;
        min-height: 34px !important;
        flex: 1 1 0;
        font-size: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #rotatingview-stage.quiz-active .game-controls .btn-group:last-child {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #obliqueview-stage {
        padding: 8px;
    }

    #obliqueview-stage .game-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

    #obliqueview-stage .game-stats {
        flex: 0 0 auto;
        grid-template-columns: repeat(4, minmax(48px, auto));
        width: auto;
    }

    #obliqueview-stage .split-view {
        flex-direction: row !important;
        align-items: stretch;
        gap: 10px !important;
    }

    #obliqueview-stage .canvas-container.main-canvas-card {
        flex: 0 0 42% !important;
        width: auto !important;
        height: 202px !important;
        min-height: 202px !important;
    }

    #obliqueview-stage .options-container {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
    }

    #obliqueview-stage .oblique-desc {
        max-height: 42px;
        overflow: hidden;
        margin-bottom: 6px;
    }

    #obliqueview-options-grid {
        grid-template-rows: repeat(2, minmax(86px, 1fr)) !important;
    }

    #obliqueview-options-grid .option-card {
        height: 86px !important;
        min-height: 86px !important;
    }

    #obliqueview-stage .game-controls {
        height: 48px;
        min-height: 48px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #obliqueview-stage .game-controls .btn-group {
        width: auto;
        flex-wrap: nowrap;
        gap: 6px;
    }

    #obliqueview-stage .game-controls .btn-group:first-child {
        flex: 1 1 auto;
    }

    #obliqueview-stage .game-controls .btn-group:last-child {
        flex: 0 1 240px;
    }

    #obliqueview-stage .game-controls select,
    #obliqueview-stage .game-controls .btn-action {
        height: 34px !important;
        min-height: 34px !important;
        flex: 1 1 0;
        font-size: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #obliqueview-stage.quiz-active .game-controls .btn-group:last-child {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Premium Web Explanation Styles */
.ans-block-web {
    display: inline-block;
    background: var(--md-correct-container);
    border: 1px solid var(--md-correct);
    border-radius: 4px;
    color: var(--md-correct);
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    width: fit-content;
}
.grid-steps-web {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 8px;
    font-size: 12px;
    line-height: 1.55;
    margin-top: 6px;
}
.step-title-web {
    font-weight: 700;
    color: var(--md-primary);
    white-space: nowrap;
}
.math-eq-web {
    font-family: var(--md-font-mono), monospace;
    font-weight: 600;
    color: var(--md-on-surface);
}
.highlight-math-web {
    font-weight: 700;
    color: var(--md-primary);
}


/* ====================================================================
   PLAY WITH FRIENDS (MULTIPLAYER) STYLES
   ==================================================================== */

.room-member-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    height: 90px;
    min-height: 90px;
    align-self: start;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.room-member-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

.room-member-card.is-host {
    border-color: var(--accent);
    background: rgba(0, 242, 254, 0.02);
}

.room-member-card.is-ready {
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.15);
}

.member-avatar {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.member-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
}

.member-role-badge {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.member-role-badge.host {
    background: rgba(0, 242, 254, 0.15);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.member-role-badge.player {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid var(--border-glass);
}

.member-ready-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-ready-badge.ready {
    background: rgba(0, 230, 118, 0.15);
    color: var(--right);
    border: 1px solid var(--right);
}

.member-ready-badge.waiting {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border: 1px solid #fbbf24;
}

.room-kick-btn {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 4px 8px;
    min-height: 26px;
    font-size: 10px;
    color: var(--wrong);
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(244, 63, 94, 0.08);
}

.room-kick-btn:hover {
    color: #fff;
    border-color: var(--wrong);
    background: rgba(244, 63, 94, 0.2);
}

.h2h-suggestion-btn {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-glass);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    padding: 10px 12px;
    text-align: left;
}

.h2h-suggestion-btn:last-child {
    border-bottom: 0;
}

.h2h-suggestion-btn:hover,
.h2h-suggestion-btn:focus-visible {
    background: rgba(0, 242, 254, 0.08);
    outline: none;
}

/* Animations & Spanning */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

#multiplayer-countdown-number {
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; }
}
/* Dedicated practice-room history */
.room-view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.room-match-waiting { margin: 12px 0 0; padding: 8px 10px; border: 1px solid var(--amber); border-radius: 6px; color: var(--amber); background: rgba(245, 158, 11, 0.12); font-size: 12px; line-height: 1.4; }
.practice-room-layout { display: flex; flex-direction: column; height: min(680px, calc(100vh - 220px)) !important; min-height: 0 !important; max-height: min(680px, calc(100vh - 220px)) !important; overflow: hidden; }
.practice-room-content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); flex: 1 1 auto; min-height: 0; gap: 20px; overflow: hidden; }
.practice-room-members-section { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; min-width: 0; margin-bottom: 0 !important; overflow: hidden; }
.practice-room-members { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.practice-room-actions { flex-shrink: 0; background: var(--bg-card); }
.room-chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px; border: 1px solid var(--border-glass); border-radius: 8px; background: rgba(255,255,255,.025); }
.room-chat-header { flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-glass); }
.room-chat-header h3 { margin: 0 0 4px; font-size: 15px; color: var(--text-main); }
.room-chat-header span, .room-chat-empty { color: var(--text-dim); font-size: 12px; }
.room-chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 8px; overflow-y: auto; padding: 10px 4px 10px 0; overscroll-behavior: contain; }
.room-chat-message { padding: 8px 10px; border: 1px solid var(--border-glass); border-radius: 6px; background: rgba(255,255,255,.035); }
.room-chat-message.is-self { border-color: rgba(0,242,254,.45); background: rgba(0,242,254,.07); }
.room-chat-message-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; color: var(--text-dim); }
.room-chat-message-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-main); font-size: 13px; line-height: 1.4; }
.room-chat-form { display: flex; flex-shrink: 0; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-glass); }
.room-chat-form input { min-width: 0; flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--border-glass); border-radius: 6px; background: var(--bg-card); color: var(--text-main); }
.room-chat-form button { flex: 0 0 auto; padding: 10px 14px; }
.active-lobbies-card { height: min(450px, calc(100vh - 170px)) !important; min-height: 0 !important; max-height: min(450px, calc(100vh - 170px)) !important; overflow: hidden; }
.active-lobbies-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; }
.room-history-summary,
#room-history-leaderboard {
    margin: 20px 0;
    padding: 20px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.room-history-summary h2, .room-history-panel h2 { margin: 0 0 14px; font-size: 18px; }
.room-history-game-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.room-history-game-chip { padding: 8px 12px; border: 1px solid var(--border-glass); border-radius: 6px; color: var(--text-main); background: rgba(255,255,255,.03); font-size: 13px; }
.room-history-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; }
.room-history-panel { padding: 20px; min-width: 0; }
.room-history-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none !important;
    height: auto !important;
    position: relative;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
}
.room-history-table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.room-history-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card, #0f172a) !important;
    color: var(--text-main, #ffffff) !important;
    border-bottom: 1px solid var(--border-glass);
}
.room-history-table-wrap thead th:nth-child(1),
.room-history-table-wrap tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-card, #0f172a);
    color: var(--accent);
}
.room-history-table-wrap thead th:nth-child(1) {
    top: 0;
    z-index: 30;
    color: var(--text-main, #ffffff) !important;
}

.room-history-table-wrap thead th:nth-child(2),
.room-history-table-wrap tbody td:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 5;
    background: var(--bg-card, #0f172a);
    color: var(--text-main);
}
.room-history-table-wrap thead th:nth-child(2) {
    top: 0;
    z-index: 30;
    color: var(--text-main, #ffffff) !important;
}

.room-history-table-wrap thead th:nth-child(3),
.room-history-table-wrap tbody td:nth-child(3) {
    position: sticky;
    left: 190px;
    z-index: 5;
    background: var(--bg-card, #0f172a);
    color: var(--amber);
    border-right: 2px solid var(--border-glass);
}
.room-history-table-wrap thead th:nth-child(3) {
    top: 0;
    z-index: 30;
    color: var(--accent) !important;
}
.room-history-table-wrap tbody tr.is-me td:nth-child(1),
.room-history-table-wrap tbody tr.is-me td:nth-child(2),
.room-history-table-wrap tbody tr.is-me td:nth-child(3) {
    background: rgba(0, 242, 254, 0.12) !important;
}
.room-history-round { border: 1px solid var(--border-glass); border-radius: 6px; padding: 12px; margin-bottom: 12px; background: rgba(255,255,255,.02); }
.room-history-round-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text-main); }
.room-history-round-heading span, .room-history-empty { color: var(--text-dim); font-size: 12px; }
@media (max-width: 900px) { .room-history-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .room-view-header, .room-history-round-heading { flex-direction: column; }
    .practice-room-layout { height: calc(100vh - 110px) !important; max-height: calc(100vh - 110px) !important; padding: 14px !important; }
    .practice-room-content-grid { grid-template-columns: 1fr; grid-template-rows: minmax(145px, 1fr) minmax(175px, 1fr); gap: 10px; }
    .practice-room-members { padding-right: 2px; }
    .practice-room-actions { align-items: stretch; }
    .practice-room-actions > div { width: 100%; justify-content: stretch; flex-wrap: wrap; }
    .practice-room-actions button { flex: 1 1 140px; }
}

/* Shape Scanning */
#shapescanning-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
}
.shape-scan-header { flex: 0 0 auto; }
.shape-scan-header .game-stats { align-items: center; }
.shape-scan-submit-top { min-height: 38px; white-space: nowrap; }
.shape-scan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}
.shape-scan-board-wrap {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    background: var(--md-surface);
    overflow: hidden;
}
#shapescanning-board { width: 100%; height: 100%; display: block; }
.shape-scan-piece { fill: rgba(255,255,255,.02); stroke: var(--text-main); stroke-width: 2; vector-effect: non-scaling-stroke; }
.shape-scan-piece.is-target { fill: rgba(245,158,11,.12); stroke: var(--amber); stroke-width: 4; }
.shape-scan-piece-label {
    fill: var(--text-main);
    stroke: none;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: middle;
}
.shape-scan-question-rail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-right: 6px; }
.shape-scan-question { border: 1px solid var(--border-glass); border-radius: 8px; padding: 10px; background: var(--md-surface); }
.shape-scan-question.is-locked { opacity: .62; }
.shape-scan-question-number { margin-bottom: 4px; color: var(--text-dim); font-size: 12px; font-weight: 400; }
.shape-scan-prompt { display: flex; align-items: center; margin-bottom: 8px; }
.shape-scan-prompt svg { width: 48px; height: 48px; flex: 0 0 48px; }
.shape-scan-prompt-label {
    fill: var(--text-main);
    stroke: none;
    font-family: var(--font-sans);
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: middle;
}
.shape-scan-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.shape-scan-option { min-height: 38px; }
.shape-scan-option.selected { border-color: var(--accent); background: rgba(0,242,254,.1); }
.shape-scan-option.correct { border-color: var(--correct); background: rgba(0,230,118,.12); }
.shape-scan-option.wrong { border-color: var(--wrong); background: rgba(244,63,94,.12); }

/* Deviation */
#deviation-stage { min-height: 0; }
.deviation-question-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.deviation-question-card { border: 1px solid var(--border-glass); border-radius: 8px; padding: 16px; background: var(--md-surface); }
.deviation-question-title { margin: 0 0 10px; font-size: 15px; }
.deviation-string-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deviation-string { min-width: 0; padding: 12px; border: 1px solid var(--border-glass); border-radius: 6px; font-family: var(--font-mono); font-size: 16px; white-space: nowrap; overflow-x: auto; text-align: center; }
.deviation-character-row {
    display: inline-flex;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0;
    letter-spacing: 0;
    vertical-align: middle;
}
.deviation-char {
    flex: 0 0 auto;
    text-align: center;
    font-weight: 400;
}
.deviation-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.deviation-option { min-height: 44px; font-weight: 700; }
.deviation-option.selected { border-color: var(--accent); background: rgba(0,242,254,.1); }
.deviation-option.correct { border-color: var(--correct); background: rgba(0,230,118,.12); }
.deviation-option.wrong { border-color: var(--wrong); background: rgba(244,63,94,.12); }
.deviation-char-diff { color: var(--wrong); background: rgba(244,63,94,.14); text-decoration: underline; }

@media (max-width: 900px) and (orientation: portrait) {
    .shape-scan-header { height: auto; min-height: 0; align-items: stretch; flex-direction: column; gap: 6px; }
    .shape-scan-header .game-stats { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
    .shape-scan-header .g-stat { justify-content: center; min-width: 0; padding: 3px 4px; gap: 3px; }
    .shape-scan-layout { grid-template-columns: 1fr; grid-template-rows: minmax(420px, 52vh) minmax(260px, 1fr); }
}

@media (max-width: 600px) {
    .deviation-question-card { padding: 10px; }
    .deviation-string-pair { grid-template-columns: 1fr; gap: 6px; }
    .deviation-string { font-size: 13px; padding: 9px; }
    .deviation-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aircraft Rotation */
#aircraftrotation-stage { min-height: 0; }
.aircraftrotation-question-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}
.aircraftrotation-question-card {
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 16px;
    background: var(--md-surface);
}
.aircraftrotation-question-title { margin: 0 0 12px; font-size: 15px; }
.aircraftrotation-prompt {
    display: grid;
    grid-template-columns: minmax(58px, .7fr) minmax(0, 4fr) minmax(58px, .7fr);
    gap: 12px;
    align-items: center;
}
.aircraftrotation-plane-wrap {
    min-width: 58px;
    display: grid;
    place-items: center;
    color: var(--text-main);
}
.aircraftrotation-plane { width: 58px; height: 58px; display: block; }
.aircraftrotation-operations {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}
.aircraftrotation-operation {
    min-width: 0;
    min-height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    background: rgba(0, 242, 254, .06);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}
.aircraftrotation-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.aircraftrotation-option {
    min-height: 44px;
    min-width: 0;
    padding: 8px 6px;
    font-weight: 600;
    white-space: nowrap;
}
.aircraftrotation-option.selected { border-color: var(--accent); background: rgba(0, 242, 254, .1); }
.aircraftrotation-option.correct { border-color: var(--correct); background: rgba(0, 230, 118, .12); }
.aircraftrotation-option.wrong { border-color: var(--wrong); background: rgba(244, 63, 94, .12); }
.aircraftrotation-explanation {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    color: var(--text-dim);
    background: rgba(0, 242, 254, .05);
    font-size: 13px;
    line-height: 1.45;
}
.aircraftrotation-next-practice { align-self: flex-start; }

@media (max-width: 600px) {
    #aircraftrotation-stage .game-header {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    #aircraftrotation-stage .game-info h2 { font-size: 14px; line-height: 1.25; }
    #aircraftrotation-stage .game-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
    #aircraftrotation-stage .g-stat { justify-content: center; min-width: 0; padding: 3px 4px; gap: 3px; }
    .aircraftrotation-question-list { padding: 8px; gap: 8px; }
    .aircraftrotation-question-card { padding: 10px; }
    .aircraftrotation-prompt { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; }
    .aircraftrotation-plane-wrap { min-width: 48px; }
    .aircraftrotation-plane { width: 44px; height: 44px; }
    .aircraftrotation-operations { gap: 4px; }
    .aircraftrotation-operation { min-height: 30px; font-size: 11px; }
    .aircraftrotation-options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
    .aircraftrotation-option { min-height: 38px; padding: 6px 2px; font-size: 11px; }
}

/* Flip Box */
#flipbox-stage {
    min-height: 0;
    overflow: hidden;
}

.flipbox-board {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px;
}

.flipbox-prompt {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(360px, 1.2fr);
    align-items: center;
    gap: 16px;
}

.flipbox-prompt-canvas-wrap,
.flipbox-choice {
    min-width: 0;
}

.flipbox-prompt-canvas-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.flipbox-canvas-label {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;
    color: var(--text-dim);
    font-size: 11px;
}

#flipbox-prompt-canvas {
    display: block;
    width: min(100%, 250px);
    max-height: 250px;
    aspect-ratio: 1;
}

#flipbox-command-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flipbox-command-chip {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 7px 9px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    background: rgba(0, 242, 254, .06);
    font-size: 12px;
}

.flipbox-command-number {
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.flipbox-choice-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.flipbox-choice {
    padding: 6px;
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    background: var(--md-surface);
    color: var(--text-main);
}

.flipbox-choice:focus-visible,
.flipbox-choice.selected {
    border-color: var(--accent);
    background: rgba(0, 242, 254, .08);
}

.flipbox-choice-grid:not(.suppress-hover) .flipbox-choice:hover {
    border-color: var(--accent);
    background: rgba(0, 242, 254, .08);
}

.flipbox-choice.correct { border-color: var(--correct); background: rgba(0, 230, 118, .12); }
.flipbox-choice.wrong { border-color: var(--wrong); background: rgba(244, 63, 94, .12); }
.flipbox-choice-label { display: block; text-align: center; font-weight: 700; }
.flipbox-choice canvas { display: block; width: 100%; aspect-ratio: 1; }

.flipbox-explanation {
    margin-top: 12px;
    padding: 10px;
    border-left: 3px solid var(--accent);
    background: rgba(0, 242, 254, .04);
}

.flipbox-explanation-result { margin: 0 0 8px; color: var(--text-main); }
.flipbox-explanation-states { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.flipbox-explanation-state { min-width: 0; text-align: center; color: var(--text-dim); font-size: 11px; }
.flipbox-explanation-state canvas { display: block; width: 100%; aspect-ratio: 1.2; }
.flipbox-next-practice { margin-top: 10px; }

@media (max-width: 820px) {
    .flipbox-prompt { grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); gap: 10px; }
    .flipbox-choice-grid { gap: 4px; }
    .flipbox-choice { padding: 3px; }
    .flipbox-choice-label { font-size: 11px; }
    #flipbox-command-list { gap: 5px; }
    .flipbox-command-chip { min-height: 36px; padding: 5px; font-size: 10px; }
}


/* ══════════════ HIGH CONTRAST LOGIN ANNOUNCEMENT & CHANGE PASSWORD MODALS (DAY & NIGHT) ══════════════ */
.login-announcement-overlay,
.change-password-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.login-announcement-window,
.change-password-window {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--md-outline-variant) !important;
    color: var(--md-on-surface) !important;
}

.login-announcement-window h2,
.change-password-window h2 {
    color: var(--md-on-surface) !important;
}

.login-announcement-window .announcement-badge {
    background: var(--md-primary-container) !important;
    color: var(--md-primary) !important;
    border: 1px solid var(--md-primary) !important;
    font-weight: 600;
}

.login-announcement-window .announcement-content-box {
    background-color: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline-variant) !important;
    color: var(--md-on-surface) !important;
}

.login-announcement-window .announcement-item-title {
    color: var(--md-on-surface) !important;
    font-weight: 700 !important;
}

.login-announcement-window .announcement-item-desc {
    color: var(--md-on-surface-variant) !important;
}

.login-announcement-window .pwd-pill {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    font-family: var(--md-font-mono);
    color: var(--md-primary) !important;
    background-color: var(--md-primary-container) !important;
    border: 1.5px dashed var(--md-primary) !important;
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: 1.5px;
}

/* Inline Notice on Login Screen */
.login-inline-notice {
    background-color: var(--md-primary-container) !important;
    border: 1px solid var(--md-primary) !important;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--md-on-surface) !important;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.login-inline-notice .notice-text {
    color: var(--md-on-surface) !important;
}

.login-inline-notice .notice-pwd {
    color: var(--md-primary) !important;
    background: var(--md-surface) !important;
    border: 1px solid var(--md-primary) !important;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-family: var(--md-font-mono);
}

/* Change Password Inputs in Modal */
.change-password-window .form-input-group label {
    color: var(--md-on-surface) !important;
    font-weight: 600;
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
}

.change-password-window .form-input-group input {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: 8px;
    color: var(--md-on-surface) !important;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

.change-password-window .form-input-group input:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 2px var(--md-primary-container) !important;
    background-color: var(--md-surface) !important;
}

.change-password-window .form-input-group input::placeholder {
    color: var(--md-on-surface-variant) !important;
    opacity: 0.7;
}

:root[data-theme="night"] .login-announcement-window,
:root[data-theme="night"] .change-password-window {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="night"] .login-inline-notice {
    background-color: rgba(63, 63, 150, 0.25) !important;
    border-color: #5b5bd6 !important;
}

/* Oblique View: keep the quiz actions above the answer cards and in a single
   left-to-right row.  This is deliberately scoped and placed last so iPad and
   landscape responsive rules cannot reduce the control group to an overlay. */
#obliqueview-stage.quiz-active .game-play-area,
#obliqueview-stage.quiz-active .options-container {
    position: relative;
    z-index: 0;
    min-height: 0;
}

#obliqueview-stage.quiz-active .game-controls {
    position: relative !important;
    z-index: 30 !important;
    isolation: isolate;
    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 0 0;
    overflow: visible !important;
    background: var(--md-surface-dim);
    pointer-events: auto;
}

#obliqueview-stage.quiz-active .game-controls .btn-group:last-child {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0;
    flex: 1 1 auto !important;
}

#obliqueview-stage.quiz-active .game-controls .btn-group:last-child .btn-action {
    position: relative !important;
    z-index: 1;
    width: 100%;
    min-width: 0 !important;
    min-height: 40px;
    margin: 0 !important;
    pointer-events: auto;
}


/* ==========================================================================
   PILOT PREP — MASTER APPLE MINIMALIST OVERRIDES & SYSTEM STABILIZATION (2026)
   Fixes scroll clipping, unifies lobbies, standardizes action buttons,
   and ensures Day Mode is flawlessly rendered by default.
   ========================================================================== */

/* 1. Global Viewport & Container Scroll Stabilization */
.workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100vh - var(--header-h)) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Allow every content view to scroll smoothly and never trap the Start button */
.content-view {
    display: none;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: var(--md-surface-dim) !important;
    box-sizing: border-box !important;
}

.content-view.active {
    display: flex !important;
}

/* 2. Global Game View Sticky Top Navigation Bar (Hidden so only the top-most header Back to Lobby button shows) */
.apple-game-top-nav {
    display: none !important;
}

.apple-game-top-nav .apple-back-btn,
.apple-game-top-nav .btn-back-lobby {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 980px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--apple-font) !important;
    background: var(--apple-btn-secondary-bg) !important;
    color: var(--apple-btn-secondary-text) !important;
    border: 1px solid var(--apple-card-border) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.apple-game-top-nav .apple-back-btn:hover,
.apple-game-top-nav .btn-back-lobby:hover {
    background: var(--apple-btn-primary-bg) !important;
    color: var(--apple-btn-primary-text) !important;
    transform: translateX(-2px) !important;
}

/* 3. Game Lobby Universal Layout & Start Button Visibility */
.game-lobby {
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: min-content !important;
    flex: 1 0 auto !important;
    padding: 32px 20px 140px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.game-lobby .lobby-content,
.game-lobby .lobby-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: var(--apple-card-shadow) !important;
    box-sizing: border-box !important;
}

.game-lobby h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--md-on-surface) !important;
    margin: 0 !important;
}

.game-lobby .lobby-desc {
    font-size: 14px !important;
    color: var(--md-on-surface-variant) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.game-lobby .lobby-best-record {
    padding: 8px 18px !important;
    border-radius: 980px !important;
    background: var(--apple-btn-secondary-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--md-on-surface) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: fit-content !important;
    margin: 0 !important;
}

.game-lobby .lobby-modes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 4px 0 !important;
}

.game-lobby .lobby-mode-card {
    padding: 18px 20px !important;
    border-radius: 16px !important;
    background: var(--apple-btn-secondary-bg) !important;
    border: 1.5px solid var(--apple-card-border) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.game-lobby .lobby-mode-card:hover {
    background: var(--md-surface-container) !important;
    border-color: var(--border-glass-strong) !important;
    transform: translateY(-1px) !important;
}

.game-lobby .lobby-mode-card.active {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 2px var(--md-primary) !important;
    background: var(--apple-card-bg) !important;
}

.game-lobby .lobby-mode-card h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--md-on-surface) !important;
    margin-bottom: 4px !important;
}

.game-lobby .lobby-mode-card p {
    font-size: 12px !important;
    color: var(--md-on-surface-variant) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.game-lobby .lobby-settings-grid,
.game-lobby .lobby-settings-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    background: var(--apple-btn-secondary-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    box-sizing: border-box !important;
    margin: 4px 0 !important;
}

.game-lobby .lobby-settings-item {
    flex: 1 1 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.game-lobby .lobby-settings-item label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--md-on-surface-variant) !important;
}

.game-lobby select,
select {
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--apple-font) !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.game-lobby select:focus,
select:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 2px var(--md-primary-container) !important;
}

/* UNIFIED START BUTTON ACROSS ALL 26 GAME LOBBIES */
.lobby-start-btn,
button[id$="-start-lobby"],
button[id$="-start-btn"],
.game-lobby .btn-action.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 50px !important;
    margin: 28px auto 8px !important;
    border-radius: 980px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--apple-font) !important;
    letter-spacing: -0.01em !important;
    background: var(--apple-btn-primary-bg) !important;
    color: var(--apple-btn-primary-text) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lobby-start-btn:hover,
button[id$="-start-lobby"]:hover,
button[id$="-start-btn"]:hover,
.game-lobby .btn-action.primary:hover {
    background: var(--apple-btn-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

/* 4. UNIFIED APPLE IN-GAME CONTROLS (SKIP & SUBMIT BUTTONS) */
.game-controls {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 24px !important;
    background: var(--apple-header-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--apple-card-border) !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.game-controls .btn-group {
    display: flex;
    align-items: center !important;
    gap: 10px !important;
}

/* UNIFIED SKIP BUTTON (SECONDARY APPLE PILL) */
.game-controls button[id$="-next-btn"],
.game-controls button[id$="-next"],
.game-controls button[id$="-skip-btn"],
.game-controls #figuralreasoning-next {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 24px !important;
    border-radius: 980px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--apple-font) !important;
    letter-spacing: -0.01em !important;
    background: var(--apple-btn-secondary-bg) !important;
    color: var(--apple-btn-secondary-text) !important;
    border: 1px solid var(--apple-card-border) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.game-controls button[id$="-next-btn"]:hover,
.game-controls button[id$="-next"]:hover,
.game-controls button[id$="-skip-btn"]:hover,
.game-controls #figuralreasoning-next:hover {
    background: var(--md-surface-container) !important;
    border-color: var(--border-glass-strong) !important;
    transform: translateY(-1px) !important;
}

/* UNIFIED SUBMIT BUTTON (PRIMARY APPLE PILL) */
.game-controls button[id$="-submit-btn"],
.game-controls button[id$="-submit-exam-btn"],
.game-controls button[id$="-submit"],
.game-controls #figuralreasoning-submit,
.game-controls #shapescanning-submit,
.game-controls #deviation-submit,
.game-controls #aircraftrotation-submit,
.game-controls #flipbox-submit,
button.shape-scan-submit-top {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 26px !important;
    border-radius: 980px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--apple-font) !important;
    letter-spacing: -0.01em !important;
    background: var(--apple-btn-primary-bg) !important;
    color: var(--apple-btn-primary-text) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

.game-controls button[id$="-submit-btn"]:hover,
.game-controls button[id$="-submit-exam-btn"]:hover,
.game-controls button[id$="-submit"]:hover,
.game-controls #figuralreasoning-submit:hover,
.game-controls #shapescanning-submit:hover,
.game-controls #deviation-submit:hover,
.game-controls #aircraftrotation-submit:hover,
.game-controls #flipbox-submit:hover,
button.shape-scan-submit-top:hover {
    background: var(--apple-btn-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
}

/* UNIFIED FINISH PRACTICE & PREVIOUS BUTTONS */
.game-controls button[id$="-finish-practice"],
.game-controls button[id$="-finish-practice-btn"],
.game-controls button[id$="-quit-btn"],
.game-controls button[id$="-stop-btn"],
.game-controls .unified-finish-btn,
.game-controls button[id$="-prev-btn"] {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 980px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--apple-font) !important;
    background: var(--apple-btn-secondary-bg) !important;
    color: var(--apple-btn-secondary-text) !important;
    border: 1px solid var(--apple-card-border) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.game-controls button[hidden],
.game-lobby [hidden],
.game-stage [hidden] {
    display: none !important;
}

.game-controls button[id$="-finish-practice"]:hover,
.game-controls button[id$="-finish-practice-btn"]:hover,
.game-controls button[id$="-prev-btn"]:hover {
    background: var(--md-surface-container) !important;
}

/* 5. LEADERBOARD & FLIGHT LOG ENHANCEMENTS */
#view-history_improvement {
    padding: 24px 32px 120px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#view-history_improvement .flight-logs-card,
#view-play_with_friends .flight-logs-card {
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--apple-card-shadow) !important;
}

#view-history_improvement .stats-card {
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--apple-card-shadow) !important;
}

.leaderboard-item {
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
}

[data-theme="day"] .leaderboard-item.rank-4 .rank-badge,
[data-theme="day"] .leaderboard-item.rank-5 .rank-badge {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--text-dim) !important;
}

[data-theme="day"] .leaderboard-header {
    border-bottom: 1px solid var(--apple-card-border) !important;
    color: var(--md-on-surface-variant) !important;
}

[data-theme="day"] .flight-logs-table th {
    background-color: var(--md-surface-container-low) !important;
    color: var(--md-on-surface) !important;
}

[data-theme="day"] .flight-logs-table td {
    border-bottom: 1px solid var(--apple-card-border) !important;
    color: var(--md-on-surface) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .apple-game-top-nav {
        padding: 8px 16px !important;
    }
    .game-lobby {
        padding: 16px 12px 120px !important;
    }
    .game-lobby .lobby-content,
    .game-lobby .lobby-card {
        padding: 24px 18px !important;
        border-radius: 20px !important;
    }
    .game-controls {
        padding: 10px 16px !important;
    }
    #view-history_improvement {
        padding: 16px 16px 100px !important;
    }
}

/* 6. ANNUAL PASS MODAL, CALLSIGN BAR & MULTIPLAYER APPLE STYLING */
.apple-pass-btn {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(16, 185, 129, 0.1)) !important;
    border: 1px solid rgba(0, 113, 227, 0.28) !important;
    font-weight: 600 !important;
}

.apple-pro-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: #0071e3;
    color: #ffffff;
    margin-left: 4px;
}

.apple-pass-modal-window {
    max-width: 640px !important;
    width: 94% !important;
    padding: 28px !important;
    border-radius: 24px !important;
    background: var(--apple-card-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
    text-align: left !important;
}

.apple-pass-tabs {
    display: flex;
    gap: 8px;
    padding: 5px;
    border-radius: 14px;
    background: var(--apple-btn-secondary-bg);
    margin-bottom: 20px;
}

.apple-pass-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.apple-pass-tab.active {
    background: var(--apple-card-bg);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.apple-pricing-card {
    position: relative;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 113, 227, 0.06) 0%, rgba(0, 113, 227, 0.01) 100%);
    border: 1.5px solid rgba(0, 113, 227, 0.3);
}

.apple-pricing-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #0071e3;
    color: #fff;
    margin-bottom: 12px;
}

.apple-pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--apple-card-border);
}

.apple-pricing-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-main);
}

.apple-pricing-header p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}

.apple-pricing-amount {
    text-align: right;
}

.apple-pricing-amount .price-main {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #0071e3;
    line-height: 1.1;
}

.apple-pricing-amount .price-period {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.apple-pricing-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.apple-pricing-features .feature-item {
    font-size: 0.92rem;
    color: var(--text-main);
    line-height: 1.45;
}

.apple-pricing-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.apple-account-status-card {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--apple-card-border);
    margin-bottom: 18px;
}

#view-play_with_friends,
#view-friends_room {
    padding: 24px 32px 120px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* ══════════════ UNIFIED GAME SHELL OVERRIDES (ALL 26 GAMES) ══════════════ */
.lobby-instruction-card {
    background: var(--apple-btn-secondary-bg);
    border: 1px solid var(--apple-card-border);
    padding: 18px 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}

.game-stage > footer.game-controls {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--apple-card-border) !important;
    background: var(--apple-card-bg) !important;
    border-radius: 0 0 18px 18px !important;
}

.game-stage > footer.game-controls .btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hide redundant in-stage difficulty/mode selects so all 26 footers look identical */
.game-stage > footer.game-controls select,
.game-stage > footer.game-controls .toggle-control {
    display: none !important;
}

/* Google / Gmail Login Button & Trial Quota Badges */
.apple-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #ffffff;
    color: #1d1d1f;
    border: 1.5px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.apple-google-btn:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.apple-stripe-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #0071e3 0%, #635bff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.28) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.apple-stripe-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(99, 91, 255, 0.38) !important;
}

.trial-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 6px;
    width: fit-content;
}

.trial-quota-badge.trial-available {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.trial-quota-badge.trial-exhausted {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.32);
}

.trial-quota-badge.trial-pro {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
    border: 1px solid rgba(0, 113, 227, 0.25);
}

.lobby-trial-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
}

.lobby-trial-banner.trial-available {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.lobby-trial-banner.trial-exhausted {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    cursor: pointer;
}

.lobby-trial-banner.trial-pro {
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    border: 1px solid rgba(0, 113, 227, 0.24);
}

/* ══════════════ PRE-GAME HOW-TO-PLAY & COVER PREVIEW ══════════════ */
.lobby-how-to-play {
    width: 100%;
    max-width: 700px;
    margin: 4px auto 8px auto;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    text-align: left;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: center;
}

@media (max-width: 680px) {
    .lobby-how-to-play {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
    }
}

.lobby-cover-preview {
    width: 100%;
    height: 118px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    position: relative;
    background: #0f172a;
}

.lobby-cover-preview svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lobby-how-to-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.lobby-how-to-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.lobby-how-to-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.lobby-how-to-goal {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

.lobby-how-to-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lobby-how-to-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #334155;
    line-height: 1.45;
}

.lobby-how-to-step-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.lobby-how-to-tip {
    margin-top: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border-left: 3px solid #0071e3;
    font-size: 11.5px;
    color: #475569;
    line-height: 1.4;
}

.lobby-how-to-tip strong {
    color: #0f172a;
}