/* ===== CSS Variables (Summer/Default Theme) ===== */
:root {
    /* Surfaces */
    --surface-primary: #121212;
    --surface-card: #1E1E1E;
    --surface-card-elevated: #2A2A2A;
    --surface-board-overlay: rgba(30, 30, 30, 0.73);

    /* Accents */
    --accent-primary: #1976D2;
    --accent-secondary: #2A2A2A;
    --accent-success: #43A047;
    --accent-danger: #E53935;
    --accent-warning: #FFC107;
    --accent-info: #1976D2;

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #BEBEBE;
    --text-disabled: #666666;

    /* Dividers */
    --divider: #333333;

    /* Players */
    --player-one: #4AA8D8;
    --player-two: #E91E63;

    /* Board */
    --board-start: #4CAF50;
    --board-mid: #388E3C;
    --board-end: #2E7D32;
    --board-grid: #A5D6A7;

    /* Buttons */
    --btn-primary: #5ed3fd;
    --btn-primary-end: #40c1fd;
    --btn-utility-bg: #2A2A2A;
    --btn-utility-border: #444444;
    --btn-secondary-border: #0c167c;

    /* Game surface */
    --game-bg-opacity: 0.40;

    /* Translucent card surface for sub-pages where the body wallpaper
       should bleed through edges. Slightly less opaque than the solid
       --surface-card so the seasonal art hints through without
       sacrificing legibility. */
    --surface-card-translucent: rgba(20, 20, 20, 0.88);

    /* Border tint for the framed `.page-content` / `.play-page` chrome on
       sub-pages. Each [data-theme] overrides this with a complementary,
       semi-transparent tone that highlights the framed content without
       fighting the wallpaper (warm orange for cool blue/green wallpapers,
       cool blue for warm fall wallpapers, etc.). Default :root targets the
       Summer wallpaper (sunny green/blue) with a warm amber rim. */
    --page-border-color: rgba(255, 143, 0, 0.55);

    /* Legacy mappings for existing CSS that references old variable names */
    --primary: var(--accent-warning);
    --primary-dark: var(--accent-danger);
    --secondary: var(--surface-card);
    --cream: var(--surface-primary);
    --amber-light: var(--accent-warning);
    --amber: var(--accent-warning);
    --surface: var(--surface-card);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    --radius: 12px;
    --radius-lg: 20px;
    --blue: var(--player-one);
    --blue-light: #64B5F6;
    --orange: var(--player-two);
    --orange-light: #F48FB1;
    --text-light: var(--text-disabled);
    --board-dark: var(--board-end);
    --board-light: var(--board-start);
}

/* ===== Seasonal Themes ===== */
/* Summer is default (:root) — no [data-theme] needed */

[data-theme="spring"] {
    --surface-primary: #0D1A0D;
    --surface-card: #1A2E1A;
    --surface-card-elevated: #2A3E2A;
    --surface-card-translucent: rgba(20, 36, 20, 0.88);
    --surface-board-overlay: rgba(26, 46, 26, 0.73);
    /* Spring Garden palette is pink-on-green; complement with a soft
       magenta-pink rim that reads against the leafy wallpaper. */
    --page-border-color: rgba(233, 30, 99, 0.50);
    --accent-primary: #C2185B;
    --accent-secondary: #1A2E1A;
    --board-start: #81C784;
    --board-mid: #4CAF50;
    --board-end: #388E3C;
    --board-grid: #A5D6A7;
    --btn-primary: #C2185B;
    --btn-primary-end: #E91E63;
    --btn-utility-bg: #1A2E1A;
    --btn-utility-border: #2A3E2A;
    --btn-secondary-border: #3A1A2A;
    --divider: #2A3E2A;
    --game-bg-opacity: 0.40;
}

[data-theme="fall"] {
    --surface-primary: #1A1208;
    --surface-card: #2A1E10;
    --surface-card-elevated: #3A2E1A;
    --surface-card-translucent: rgba(36, 26, 14, 0.88);
    --surface-board-overlay: rgba(42, 30, 16, 0.73);
    /* Fall wallpaper is warm orange/brown; complement with a cool teal
       rim so framed content separates cleanly from the foliage. */
    --page-border-color: rgba(38, 198, 218, 0.50);
    --accent-primary: #dd61fd;
    --accent-secondary: #2A1E10;
    --accent-warning: #FF8F00;
    --board-start: #8D6E43;
    --board-mid: #6B4F30;
    --board-end: #5A3D22;
    --board-grid: #BCAAA4;
    --btn-primary: #dd61fd;
    --btn-primary-end: #c243fd;
    --btn-utility-bg: #2A1E10;
    --btn-utility-border: #3A2E1A;
    --btn-secondary-border: #5907ba;
    --divider: #3A2E1A;
    --game-bg-opacity: 0.35;
}

[data-theme="winter"] {
    --surface-primary: #0A1A2A;
    --surface-card: #1A2A3A;
    --surface-card-elevated: #2A3A4A;
    --surface-card-translucent: rgba(20, 32, 48, 0.88);
    --surface-board-overlay: rgba(26, 42, 58, 0.73);
    /* Winter wallpaper is cool blue/white; complement with a warm amber
       rim that pops against the snow without glare. */
    --page-border-color: rgba(255, 167, 38, 0.55);
    --accent-primary: #dd61fd;
    --accent-secondary: #1A2A3A;
    --board-start: #90CAF9;
    --board-mid: #42A5F5;
    --board-end: #1565C0;
    --board-grid: #BBDEFB;
    --btn-primary: #dd61fd;
    --btn-primary-end: #c243fd;
    --btn-utility-bg: #1A2A3A;
    --btn-utility-border: #2A3A4A;
    --btn-secondary-border: #5907ba;
    --divider: #2A3A4A;
    --game-bg-opacity: 0.45;
}

[data-theme="stadium"] {
    --surface-primary: #0D1E0D;
    --surface-card: #0D1E0D;
    --surface-card-elevated: #1A2E1A;
    --surface-card-translucent: rgba(14, 30, 14, 0.88);
    --surface-board-overlay: rgba(13, 30, 13, 0.73);
    /* Stadium wallpaper is lime green; complement with a magenta rim that
       mirrors the secondary accent and frames the content vividly. */
    --page-border-color: rgba(221, 97, 253, 0.55);
    --accent-primary: #bdf406;
    --accent-secondary: #0D1E0D;
    --board-start: #2E7D32;
    --board-mid: #1B5E20;
    --board-end: #0D3B0F;
    --board-grid: #4CAF50;
    --btn-primary: #bdf406;
    --btn-primary-end: #88e006;
    --btn-utility-bg: #0D1E0D;
    --btn-utility-border: #1A2E1A;
    --btn-secondary-border: #247a02;
    --divider: #1A2E1A;
    --game-bg-opacity: 0.35;
}

/* Piece Skins */
[data-skin="neon"] .cell-piece,
[data-skin="neon"] .tray-piece {
    filter: drop-shadow(0 0 6px rgba(0,255,255,0.6)) brightness(1.2) saturate(1.5);
}

[data-skin="vintage"] .cell-piece,
[data-skin="vintage"] .tray-piece {
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3)) sepia(0.4) saturate(0.8) brightness(0.95);
}

/* High Contrast Mode */
[data-contrast="high"] {
    --surface-primary: #000000;
    --surface-card: #111111;
    --surface-card-elevated: #222222;
    --text-primary: #FFFFFF;
    --text-secondary: #E0E0E0;
    --text-disabled: #BDBDBD;
    --player-one: #64B5F6;
    --player-two: #F48FB1;
    --board-grid: #666666;
    --divider: #666666;
    --shadow: rgba(255, 255, 255, 0.1);
    /* Legacy overrides */
    --surface: #000000;
    --blue: #64B5F6;
    --orange: #F48FB1;
    --text-light: #BDBDBD;
}

[data-contrast="high"] .board-cell {
    border: 1px solid #666;
}

[data-contrast="high"] .board-cell.legal-target {
    border-color: #FFD600;
    background: rgba(255,214,0,0.25);
}

[data-contrast="high"] .board-cell.selected-cell {
    border-color: #64B5F6;
    background: rgba(100,181,246,0.25);
}

[data-contrast="high"] .cell-piece {
    filter: drop-shadow(0 0 2px white) contrast(1.2);
}

/* ===== Seasonal Backgrounds =====
   Drives the home/menu page, in-game game page, and all sub-pages
   (Preferences, Settings, Stats, About, HowToPlay, Play setup, Online Hub)
   from the same [data-theme] attribute that already controls the palette.
   The wallpaper is applied to <body> so the bleed-through covers the full
   viewport regardless of which page-level container (.page-content with
   max-width:600px, .play-page, etc.) is rendered on top. .menu-page and
   .game-page keep their own background rules below for fully-themed
   variants of the same wallpaper family. */
body {
    background-image: url('../images/themes/homescreen_default_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Web theme IDs intentionally re-skin the MAUI ThemeService catalog so the
   wallpaper a user sees matches the same MAUI display name:
     web 'summer'  -> MAUI 'default' (DisplayName "Summer")        -> homescreen_default_background.png
     web 'spring'  -> MAUI 'summer'  (DisplayName "Spring Garden") -> homescreen_summer_background.png
   The other ids (fall/winter/stadium) line up 1:1 with their MAUI counterparts. */
[data-theme="summer"] body { background-image: url('../images/themes/homescreen_default_background.png'); }
[data-theme="fall"]   body { background-image: url('../images/themes/homescreen_fall_background.png');   }
[data-theme="winter"] body { background-image: url('../images/themes/homescreen_winter_background.png'); }
[data-theme="stadium"] body { background-image: url('../images/themes/homescreen_stadium_background.png'); }
[data-theme="spring"] body { background-image: url('../images/themes/homescreen_summer_background.png'); }

.menu-page {
    background-image: url('../images/themes/homescreen_default_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.game-page {
    background-image: url('../images/themes/game_default_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-theme="summer"] .menu-page {
    background-image: url('../images/themes/homescreen_default_background.png');
}
[data-theme="summer"] .game-page {
    background-image: url('../images/themes/game_default_background.png');
}

[data-theme="fall"] .menu-page {
    background-image: url('../images/themes/homescreen_fall_background.png');
}
[data-theme="fall"] .game-page {
    background-image: url('../images/themes/game_fall_background.png');
}

[data-theme="winter"] .menu-page {
    background-image: url('../images/themes/homescreen_winter_background.png');
}
[data-theme="winter"] .game-page {
    background-image: url('../images/themes/game_winter_background.png');
}

[data-theme="stadium"] .menu-page {
    background-image: url('../images/themes/homescreen_stadium_background.png');
}
[data-theme="stadium"] .game-page {
    background-image: url('../images/themes/game_stadium_background.png');
}

/* web 'spring' === MAUI 'summer' (Spring Garden) — uses the summer art set. */
[data-theme="spring"] .menu-page {
    background-image: url('../images/themes/homescreen_summer_background.png');
}
[data-theme="spring"] .game-page {
    background-image: url('../images/themes/game_summer_background.png');
}

/* Sub-pages (Preferences, Settings, Stats, About, HowToPlay, Play setup,
   Online Hub, Account, Online Waiting Room). Every framed page-level
   wrapper here MUST have a fully-opaque surface so the body wallpaper
   can never bleed through and make text hard to read. We use the per-
   theme `--surface-card` token (a solid hex like #1E1E1E / #2A1E10 /
   #1A2A3A / #1A2E1A / #0D1E0D) intentionally — the previous
   `--surface-card-translucent` rgba(...,0.88) value still let the
   wallpaper bleed through enough that pages like Preferences and the
   Online Hub looked see-through against busy seasonal art.

   The body wallpaper still surrounds the frame thanks to `margin: 12px
   auto` + `max-width`, which gives the seasonal art breathing room
   around the card without compromising legibility inside it. */
.page-content,
.play-page,
.waiting-room {
    background: var(--surface-card, #1E1E1E);
    color: var(--text-primary, #FFFFFF);
    /* Theme-complementary border tint via --page-border-color (warm amber
       on cool wallpapers, cool teal on warm wallpapers). 2px so the rim
       reads at typical viewing distance. */
    border: 2px solid var(--page-border-color, rgba(255, 143, 0, 0.55));
    border-radius: 16px;
    margin: 12px auto;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* ===== Menu Hero (title + seasonal mascot) ===== */
.menu-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.game-logo {
    max-width: min(80vw, 480px);
    height: auto;
    display: block;
    margin-inline: auto;
}

.hero-mascot {
    display: none;
    max-width: 320px;
    width: 100%;
    height: auto;
}

@media (orientation: landscape) and (min-width: 720px) {
    /* Mascot is purely cosmetic in landscape — absolute-positioned so it
       floats to the bottom-left of the page without pushing the centered
       title+buttons column off-center. Hidden in portrait/narrow viewports
       (default `display: none` on .hero-mascot above). */
    .hero-mascot {
        display: block;
        position: absolute;
        bottom: 24px;
        left: 24px;
        width: 100%;
        max-width: min(35vw, 480px);
        height: auto;
        pointer-events: none;
        
    }

    /* Landscape hero buttons are shorter than portrait (matches MAUI). */
    .btn-hero, .menu-btn.hero {
        min-height: 64px;
    }
}

/* Phase 6 — Setup form 2-column reflow. The form uses generic .form-group
   sections (no semantic player1/player2/board/skin classes), so a flat
   2-column auto-flow grid is the correct fallback. Triggered at any
   orientation when the viewport is wide enough so portrait tablets and
   narrow desktop windows both get the multi-column layout (matches MAUI's
   New Game two-column flow). */
@media (min-width: 720px) {
    .setup-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 1rem;
    }
}

/* Opt-in escape hatch (none today). */
.hero-mascot.hero-mascot--always { display: block; }

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Use background-color (not the `background` shorthand) so the
       seasonal `body { background-image: ... }` rule above and the
       per-theme `[data-theme="..."] body { background-image: ... }`
       overrides keep their wallpapers. The `background:` shorthand
       was wiping the image on the default (summer) theme because
       SettingsService.ApplyDataTheme removes the `data-theme` attr
       for summer, so only the bare element selector matches and this
       later html/body rule clobbered the wallpaper. */
    background-color: var(--surface-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ===== Loading Screen ===== */
.boot-splash {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 9999;
    background: #4AA8D8;
    transition: opacity 200ms ease-out;
}

.boot-splash--hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 1rem;
}

.loading-screen h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem;
    color: var(--primary);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--amber-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== App Container ===== */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Menu Page ===== */
.menu-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    gap: 2rem;
}

.menu-header {
    text-align: center;
}

.game-title {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5rem;
    color: var(--primary);
    text-shadow: 2px 2px 4px var(--shadow);
    margin-bottom: 0.25rem;
}

.game-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
}

/* ===== Buttons ===== */
.btn, .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 80ms cubic-bezier(0.33, 0, 0.67, 1), box-shadow 0.2s ease;
    box-shadow: 0 2px 8px var(--shadow);
    text-decoration: none;
}

.btn:hover, .menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--shadow-strong);
}

.btn:active, .menu-btn:active {
    transform: scale(0.95);
}

.menu-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn, .menu-btn.primary {
    background: linear-gradient(135deg, var(--btn-primary), var(--btn-primary-end));
    color: #FFFFFF;
}

/* Hero button — matches MAUI HeroButtonStyle */
.btn-hero, .menu-btn.hero {
    min-height: 96px;
    font-size: 20px;
    border-radius: 24px;
    padding: 20px 40px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Hero row — legacy 2-column wrapper kept for backward compat. The current
   web menu uses a single vertical button stack instead, so .menu-hero-row
   is no longer emitted by Pages/MainMenu.razor. Rules retained as a no-op
   safety net for any other consumer. */
.menu-hero-row {
    display: contents;
}

/* Utility button — matches MAUI UtilityButtonStyle. The fill comes from
   the theme-driven --btn-secondary-border token (mirrors MAUI's
   ApplyThemedButtonColors recursive walk that paints utility buttons
   flat in SecondaryButtonBorderColor per theme). */
.btn-utility, .menu-btn.secondary, .menu-btn.outline {
    background: var(--btn-secondary-border, var(--btn-utility-bg));
    color: #FFFFFF;
    border: 1px solid var(--btn-secondary-border, var(--btn-utility-border));
    border-radius: 14px;
    min-height: 52px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Danger button — matches MAUI DangerButtonStyle */
.btn-danger {
    background: var(--accent-danger);
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    min-height: 48px;
}

.menu-btn.accent {
    background: #2E7D32;
    color: #FFFFFF;
}

.menu-btn.outline:hover {
    background: color-mix(in srgb, var(--btn-secondary-border, var(--btn-utility-bg)) 80%, white);
}

.btn-icon {
    font-size: 1.3rem;
}

/* ===== App Store Section ===== */
.app-download-section {
    text-align: center;
    margin-top: 1rem;
    z-index: 0;
}

.app-download-section h3 {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.store-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.store-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #000000, #1a1a1a);
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-width: 160px;
}

.store-badge .store-icon { color: var(--text-primary); }
.store-badge .store-label { color: rgba(255, 255, 255, 0.75); }
.store-badge .store-name { color: var(--text-primary); }

.store-badge:hover {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-strong);
}

/* Coming-soon variant — renders on a non-interactive <span>. */
.store-badge.store-badge--soon {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}
.store-badge.store-badge--soon:hover {
    background: linear-gradient(135deg, #000000, #1a1a1a);
    transform: none;
    box-shadow: none;
}
.store-badge.store-badge--soon .store-label {
    color: var(--primary);
    font-weight: 700;
}

/* Alpha-testing variant — live <a>, accented label flags pre-release status. */
.store-badge.store-badge--alpha .store-label {
    color: var(--primary);
    font-weight: 700;
}

.store-icon {
    font-size: 1.5rem;
}

.store-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.store-label {
    font-size: 0.6rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.store-name {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== Page Content ===== */
.page-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.page-content h1 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    font-weight: 600;
    transition: color 0.2s;
}

.back-btn:hover {
    color: var(--primary);
}

/* ===== How to Play ===== */
.rules-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rule-card {
    background: #2A2A2A;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.rule-card h2,
.rule-card h3,
.rule-card h4 {
    font-family: 'Fredoka One', cursive;
    color: #FFB74D;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.rule-card p {
    line-height: 1.6;
    color: var(--text-secondary);
}

.rule-card ul {
    padding-left: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.blue-text { color: var(--blue); font-weight: 600; }
.orange-text { color: var(--orange); font-weight: 600; }

.piece-demo, .nomnom-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--surface-card-elevated);
    border-radius: 8px;
}

.demo-piece.small { width: 40px; height: 40px; }
.demo-piece.medium { width: 55px; height: 55px; }
.demo-piece.large { width: 70px; height: 70px; }

.nomnom-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.arrow {
    font-size: 1.5rem;
    color: var(--text-light);
}

/* ===== Help Icon Button ===== */
.help-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-icon-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255,143,0,0.5);
}

/* ===== How to Play Modal ===== */
.howtoplay-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.howtoplay-modal {
    background: var(--surface-card);
    border-radius: 20px;
    border: 1px solid var(--divider);
    max-width: min(960px, 92vw);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.howtoplay-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--divider);
}
.howtoplay-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}
.howtoplay-close-btn {
    background: none;
    border: none;
    color: var(--text-disabled);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}
.howtoplay-close-btn:hover { color: var(--text-primary); background: var(--surface-card-elevated); }
.howtoplay-modal-tabs {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem 0;
    gap: 0;
}
.howtoplay-modal-tabs button {
    padding: 8px 20px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.howtoplay-modal-tabs button:first-child { border-radius: 10px 0 0 10px; }
.howtoplay-modal-tabs button:last-child { border-radius: 0 10px 10px 0; }
.howtoplay-modal-tabs .tab-active { background: var(--accent-warning); }
.howtoplay-modal-tabs .tab-inactive { background: var(--accent-secondary); }
.howtoplay-modal-body {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.howtoplay-modal-body .rule-card {
    background: var(--surface-card-elevated);
    border-radius: 12px;
    padding: 1rem;
}
.howtoplay-modal-body h3 {
    color: #FFB74D;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}
.howtoplay-modal-body h4 {
    color: #FFB74D;
    margin: 1rem 0 0.4rem;
    font-size: 0.9rem;
}
.tips-card ul { margin: 0.25rem 0 0.5rem 1rem; }
.tips-card li { margin-bottom: 0.4rem; line-height: 1.5; }

/* ===== Settings ===== */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setting-group {
    background: var(--surface-card-translucent, #131212);
    backdrop-filter: blur(2px);
    border: 1px solid #3A3A3A;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.setting-group > label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.setting-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--amber-light);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--cream);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.setting-input:focus {
    outline: none;
    border-color: var(--primary);
}

.toggle-label {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0 !important;
    cursor: default;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--divider);
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #FF8F00;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

/* Theme selector */
.theme-selector {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.theme-btn:hover { transform: scale(1.05); }
.theme-btn.selected { border-color: var(--primary); }

.theme-preview {
    width: 40px;
    height: 28px;
    border-radius: 6px;
    display: block;
}

.theme-preview.classic {
    background: linear-gradient(135deg, #8D6E43, #5A3D22);
}

.theme-preview.ocean {
    background: linear-gradient(135deg, #336B99, #1A3A5C);
}

.theme-preview.dark {
    background: linear-gradient(135deg, var(--accent-secondary), var(--surface-primary));
}

.skin-preview {
    font-size: 1.5rem;
    display: block;
    line-height: 1.2;
}

/* ===== Game Page ===== */
.game-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.game-setup {
    max-width: 400px;
    width: 100%;
    padding: 2rem;
}

.game-setup h1 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== Difficulty Selector ===== */
.difficulty-selector {
    display: flex;
    gap: 0.5rem;
}

.diff-btn {
    flex: 1;
    padding: 0.625rem;
    border: 2px solid var(--amber-light);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s;
    color: var(--text-primary);
}

.diff-btn:hover {
    border-color: var(--primary);
}

.diff-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ===== Color Picker ===== */
.color-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.color-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: var(--surface-card-elevated);
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-btn:hover:not(:disabled) {
    transform: scale(1.15);
}

.color-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.color-btn.selected {
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.color-btn.locked {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.color-btn.locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.color-preview-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    pointer-events: none;
}

/* ===== Game Active ===== */
.game-overlay {
    background: var(--surface-board-overlay, rgba(30, 30, 30, 0.73));
    border-radius: 12px;
    margin: 4px 4px 8px;
    padding: 6px 6px 10px;
    position: relative;
}

.game-active {
    width: 100%;
    max-width: 1360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.web-game-shell {
    display: grid;
    grid-template-columns: minmax(112px, 160px) minmax(720px, 1fr) minmax(112px, 160px);
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.landscape-game-shell {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.landscape-game-shell-header,
.landscape-game-shell-footer {
    min-width: 0;
}

.landscape-game-shell-core {
    min-width: 0;
}

.ad-rail {
    min-height: 100%;
    display: flex;
    align-items: stretch;
}

.ad-rail-slot {
    width: 100%;
    min-height: 420px;
    border: 1px dashed rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.62);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
}

.ad-rail-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ad-rail-placeholder {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.46);
}

.game-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.turn-indicator {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px var(--shadow);
}

.turn-indicator.thinking {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* AI Mascot inline in turn indicator */
.ai-mascot-inline {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    animation: mascot-bounce 600ms ease-in-out infinite alternate;
}

@keyframes mascot-bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* Thinking dots animation */
.thinking-dots::after {
    content: '';
    animation: thinking-dots 1.5s steps(4, end) infinite;
}

@keyframes thinking-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.turn-color {
    font-size: 1.5rem;
    line-height: 1;
}

.turn-color.blue { color: var(--blue); }
.turn-color.orange { color: var(--orange); }

/* ===== Game Board ===== */
/* Mirrors MAUI GamePage: the page itself carries the themed wallpaper
   (.game-page background-image), .game-overlay does the dimming, and the
   board container is fully transparent so the wallpaper shows through. */
.game-board-container {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(320px, min(54vh, 46vw)) minmax(160px, 1fr);
    grid-template-areas:
        "p1 board p2"
        "log log log";
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px;
    background: transparent;
}

/* Move log */
.move-log {
    grid-area: log;
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px var(--shadow);
    font-size: 0.8rem;
}

.move-log summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
    user-select: none;
}

.move-list {
    max-height: 150px;
    overflow-y: auto;
    padding: 0 0.75rem 0.5rem 2rem;
    margin: 0;
    list-style-type: decimal;
}

.move-entry {
    padding: 1px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.move-entry.blue { color: var(--blue); }
.move-entry.orange { color: var(--orange); }

/* Player panels */
.player-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--shadow);
    width: 100%;
    min-width: 0;
    opacity: 0.55;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.player-panel.p1-panel {
    grid-area: p1;
}

.player-panel.p2-panel {
    grid-area: p2;
}

.player-panel.active {
    opacity: 1;
    border-color: var(--primary);
    box-shadow: 0 4px 16px var(--shadow-strong);
}

.player-panel.p1, .player-panel.p1-panel {
    border: 2px solid #664AA8D8;
    box-shadow: 0 0 16px rgba(74, 168, 216, 0.6);
}

.player-panel.p2, .player-panel.p2-panel {
    border: 2px solid #66E91E63;
    box-shadow: 0 0 16px rgba(233, 30, 99, 0.6);
}

.tray-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tray-title.p1 { color: #DDEEFF; }
.tray-title.p2 { color: #FFD1E4; }

.tray-counter {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.tray-thinking-overlay {
    position: absolute;
    inset: 0;
    background: #AA6A1538;
    border-radius: var(--radius, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 3px;
    pointer-events: none;
    z-index: 4;
}

.tray-thinking-overlay::after {
    content: '...';
    animation: thinking-dots 1.2s infinite;
    margin-left: 4px;
}

.swipe-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.67);
    border: none;
    border-radius: 6px;
    font-size: 26px;
    cursor: pointer;
    z-index: 6;
}

.swipe-hint.swipe-hint-left { left: 4px; }
.swipe-hint.swipe-hint-right { right: 4px; }

.landscape-info { display: none; }

@media (orientation: landscape) and (min-width: 720px) {
    .swipe-hint { display: none; }

    .player-game-header { display: none; }

    .landscape-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 12px;
    }

    .landscape-info-side {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .landscape-info-name {
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.1;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .landscape-info-name.p1-name { color: #DDEEFF; }
    .landscape-info-name.p2-name { color: #FFD1E4; }

    .landscape-info .landscape-avatar {
        position: relative;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .landscape-info .landscape-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .landscape-info .landscape-avatar .ai-mascot-inline {
        position: absolute;
        right: -6px;
        bottom: -6px;
        width: 20px;
        height: 20px;
        margin: 0;
    }

    /* Landscape menu button — chrome trigger when .player-game-header is hidden. */
    .landscape-info .header-menu-btn {
        position: static;
        transform: none;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }
}

.player-label {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Player info row with avatar */
.player-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.player-avatar {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.player-avatar.avatar-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    animation: avatar-pulse 1.5s ease-in-out infinite;
}

@keyframes avatar-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.orange-text { color: var(--orange); }
.blue-text { color: var(--blue); }

/* Piece tray - horizontal row of piece stacks */
.piece-tray {
    width: 100%;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.piece-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
}

/* Each size group stacks pieces with overlap */
.piece-stack {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.stacked-group {
    gap: 10px;
}

.external-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stack-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.1;
    text-align: center;
}

/* Tray pieces - sized to match MAUI app */
.tray-piece {
    display: block;
    object-fit: contain;
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
    transition: transform 0.15s ease, filter 0.15s ease;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Overlap: each piece after the first shifts left */
.piece-stack .tray-piece + .tray-piece {
    margin-left: -22px;
}

.piece-stack.medium .tray-piece + .tray-piece {
    margin-left: -30px;
}

.piece-stack.large .tray-piece + .tray-piece {
    margin-left: -40px;
}

/* Tray piece sizes */
.tray-piece.small  { width: 36px;  height: 36px; }
.tray-piece.medium { width: 50px;  height: 50px; }
.tray-piece.large  { width: 64px;  height: 64px; }
.tray-piece.extralarge { width: 72px; height: 72px; }

.tray-piece:hover {
    transform: scale(1.12);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
    z-index: 2;
}

.tray-piece:active {
    transform: scale(0.92);
    transition-duration: 50ms;
}

.tray-piece.selected {
    transform: scale(1.2) translateY(-4px);
    filter: drop-shadow(0 0 10px var(--primary)) brightness(1.1);
    z-index: 3;
    animation: selection-pulse 1.6s ease-in-out infinite;
}

.player-panel.top .tray-piece.selected {
    animation-name: selection-pulse-p2;
}

@keyframes selection-pulse {
    0%, 100% {
        transform: scale(1.1) translateY(-4px);
        filter: drop-shadow(0 0 8px var(--player-one)) brightness(1.1);
    }
    50% {
        transform: scale(1.3) translateY(-4px);
        filter: drop-shadow(0 0 15px var(--player-one)) brightness(1.1);
    }
}

@keyframes selection-pulse-p2 {
    0%, 100% {
        transform: scale(1.1) translateY(-4px);
        filter: drop-shadow(0 0 8px var(--player-two)) brightness(1.1);
    }
    50% {
        transform: scale(1.3) translateY(-4px);
        filter: drop-shadow(0 0 15px var(--player-two)) brightness(1.1);
    }
}

/* Board frame - wood-grain surround */
.board-frame {
    grid-area: board;
    position: relative;
    width: 100%;
    max-width: none;
    align-self: center;
    padding: 10px;
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, var(--board-light), var(--board-mid), var(--board-dark));
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px var(--shadow-strong), inset 0 1px 3px rgba(255,255,255,0.15);
}

/* Board grid */
.board-grid {
    display: grid;
    grid-template-columns: repeat(var(--board-size), 1fr);
    gap: 6px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

/* Cells */
.board-cell {
    background: var(--board-grid);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    aspect-ratio: 1;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
    border: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
    position: relative;
}

.board-cell:hover {
    filter: brightness(1.2);
}

.board-cell:active {
    transform: scale(0.95);
    transition-duration: 50ms;
}

.board-cell:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

.board-cell.legal-target {
    background: rgba(255,245,157,0.7);
    border-color: var(--amber);
    animation: cellPulse 1.5s ease-in-out infinite;
}

.board-cell.selected-cell {
    border-color: var(--player-one);
    background: rgba(74,168,216,0.15);
    box-shadow: inset 0 0 12px rgba(74,168,216,0.4);
}

@keyframes cellPulse {
    0%, 100% { box-shadow: inset 0 0 6px rgba(255,193,7,0.3); }
    50% { box-shadow: inset 0 0 14px rgba(255,193,7,0.6); }
}

/* Pieces on board - percentages of cell size */
.cell-piece {
    display: block;
    object-fit: contain;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
    animation: pieceDrop 0.95s cubic-bezier(0.34, 1.40, 0.40, 1);
    transform-origin: 50% 100%;
}

.cell-piece.movable {
    cursor: grab;
    transition: filter 0.15s ease;
}

.cell-piece.movable:hover {
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3)) brightness(1.15);
}

.cell-piece.small  { width: 45%; height: 45%; }
.cell-piece.medium { width: 70%; height: 70%; }
.cell-piece.large  { width: 92%; height: 92%; }
.cell-piece.extralarge { width: 98%; height: 98%; }

@keyframes pieceDrop {
    /* Drop in from above the cell, settle past 100%, then ease back. Matches
       the MAUI native cup-drop feel; previous keyframes were a tiny scale
       pop that read as an instantaneous appearance. */
    0%   { transform: translateY(-60%) scale(0.55); opacity: 0; }
    55%  { transform: translateY(0) scale(1.10);    opacity: 1; }
    75%  { transform: translateY(0) scale(0.94);    opacity: 1; }
    100% { transform: translateY(0) scale(1);       opacity: 1; }
}

/* NomNom wobble — capture/eat animation */
@keyframes nom-nom {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.25) rotate(-6deg); }
    65%  { transform: scale(0.95) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.cell-nom-nom {
    animation: nom-nom 340ms cubic-bezier(0.33, 1, 0.67, 1);
}

/* Shake — illegal move feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}
.cell-shake {
    animation: shake 250ms linear;
}

/* Landing pulse — applied via animationInterop.pulseCell after a piece
   flight resolves so the destination cell has a brief settle bounce
   that anchors the arrival visually (matches MAUI's drop bounce feel).
   Duration mirrors WebAnimationTimings.LandingPulseMs (~220ms). */
@keyframes cell-landed {
    0%   { transform: scale(1.00); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1.00); }
}
.cell-landed {
    animation: cell-landed 220ms cubic-bezier(0.33, 1, 0.67, 1);
}

/* Win bounce — staggered per winning cell */
@keyframes win-bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}
.cell-win-bounce {
    animation: win-bounce 240ms cubic-bezier(0.33, 1, 0.67, 1) 3;
}
.cell-win-bounce.stagger-1 { animation-delay: 0ms; }
.cell-win-bounce.stagger-2 { animation-delay: 60ms; }
.cell-win-bounce.stagger-3 { animation-delay: 120ms; }
.cell-win-bounce.stagger-4 { animation-delay: 180ms; }

/* Win glow — gold pulse on winning cells */
@keyframes win-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 214, 0, 0.6); border-color: #FFD600; }
    50%      { box-shadow: 0 0 20px rgba(255, 214, 0, 1.0); }
}
.cell-win-glow {
    animation: win-glow 800ms ease-in-out 5;
    border: 3px solid #FFD600;
    background-color: rgba(255, 214, 0, 0.2);
}

/* Draw vignette — warm radial overlay for draw state */
@keyframes vignette-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}
.draw-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 183, 77, 0.4) 0%,
        rgba(255, 143, 0, 0.2) 50%,
        transparent 80%);
    animation: vignette-pulse 2400ms ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

/* Turn glow — pulse on active player panel */
@keyframes turn-glow {
    0%, 100% { border-color: transparent; box-shadow: none; }
    50%      { border-color: var(--active-player-color); box-shadow: 0 0 12px var(--active-player-color); }
}
.player-panel.active-turn {
    animation: turn-glow 1300ms ease-in-out infinite;
}
.player-panel.active-turn.p1 { --active-player-color: var(--player-one); }
.player-panel.active-turn.p2 { --active-player-color: var(--player-two); }

/* Menu stagger entry */
@keyframes stagger-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
    animation: stagger-in 200ms cubic-bezier(0.33, 1, 0.67, 1) both;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 80ms; }
.stagger-item:nth-child(3) { animation-delay: 160ms; }
.stagger-item:nth-child(4) { animation-delay: 240ms; }
.stagger-item:nth-child(5) { animation-delay: 320ms; }
.stagger-item:nth-child(6) { animation-delay: 400ms; }
.stagger-item:nth-child(7) { animation-delay: 480ms; }
.stagger-item:nth-child(8) { animation-delay: 560ms; }

/* ===== Game Over Overlay ===== */
.game-over-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: banner-enter 500ms cubic-bezier(0.33, 1, 0.67, 1) forwards;
}

@keyframes banner-enter {
    0%   { opacity: 0; transform: scale(0.5); }
    70%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1.0); }
}

/* Win/loss emoji bounce */
.win-icon {
    display: inline-block;
    animation: emoji-bounce 380ms cubic-bezier(0.33, 1, 0.67, 1);
    animation-delay: 200ms;
    animation-fill-mode: both;
}

@keyframes emoji-bounce {
    0%   { transform: scale(0.6) rotate(-12deg); }
    58%  { transform: scale(1.4) rotate(8deg); }
    100% { transform: scale(1.0) rotate(0deg); }
}

.game-over-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.game-over-card.win {
    background: #E8F5E9;
    border: 3px solid #4CAF50;
    color: #2E7D32;
}

.game-over-card.online {
    background: #FFF8E1;
    border: 3px solid #4CAF50;
    color: #3E2723;
}

.game-over-card h2 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-dark);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.game-over-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.undo-bar {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.menu-btn.small {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--amber);
    color: var(--amber);
    border-radius: var(--radius);
    transition: background 0.2s ease, transform 0.15s ease;
}

.menu-btn.small:hover {
    background: rgba(255,193,7,0.12);
    transform: scale(1.04);
}

.hint-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--accent-info, #1976D2) 12%, var(--surface-card-elevated, #2A2A2A));
    border: 1px solid var(--accent-info, #1976D2);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.hint-link {
    color: var(--accent-info, #1976D2);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hint-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.hint-dismiss:hover {
    color: var(--text-primary);
}

/* Game tip — top-anchored floating card replacement for .hint-banner */
.game-tip {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    background: var(--surface-card-elevated);
    border: 2px solid var(--accent-info);
    border-radius: 14px;
    padding: 10px 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-tip-arrow {
    background: transparent;
    border: none;
    color: var(--accent-info);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px;
}

.game-tip-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
}

.game-tip-counter {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 700;
}

.game-tip-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ===== Online Specific ===== */
.online-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.divider-text {
    text-align: center;
    color: var(--text-light);
    font-size: 0.85rem;
}

.join-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.code-input {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    min-height: 56px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.code-input::placeholder { color: #555555; letter-spacing: 0.1em; }

.waiting-room {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
    padding: 2rem;
}

.waiting-room h1 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary);
}

.game-code-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.code-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.game-code {
    font-family: 'Fredoka One', cursive;
    font-size: 3rem;
    color: var(--primary);
    letter-spacing: 8px;
    background: var(--surface);
    padding: 0.5rem 2rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px var(--shadow);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--amber-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.waiting-text {
    color: var(--text-light);
}

.error-message {
    color: var(--accent-danger);
    background: rgba(229, 57, 53, 0.15);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.status-message {
    color: var(--text-secondary);
    background: var(--cream);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0.5rem;
}

/* ===== Phase 8 — Online Hub layout ===== */
.online-hub-section { margin-block: 16px; }

.online-hub-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #BBBBBB;
    margin: 0 0 8px;
}

.online-hub-empty {
    background: var(--surface-card-translucent, #1F1F1F);
    backdrop-filter: blur(2px);
    border: 1px solid #2E2E2E;
    border-radius: 12px;
    padding: 16px 20px;
    color: #888888;
    text-align: center;
    font-size: 13px;
}

.online-hub-games {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.online-hub-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-block: 12px;
}

.online-hub-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* ===== Phase 8 — Online Hub action cards (Create / Join) ===== */
.online-hub-create-card,
.online-hub-join-card {
    border-radius: 14px;
    min-height: 120px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
    border: none;
    color: white;
    text-align: left;
    font-family: inherit;
}

.online-hub-create-card {
    background: linear-gradient(135deg, var(--btn-primary, #FF8F00), var(--btn-primary-end, #FF8F00));
    color: var(--text-primary, white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}

.online-hub-join-card {
    background: var(--surface-card-elevated, #1E3A5F);
    border: 1px solid var(--page-border-color, #2E5A8F);
    color: var(--text-primary, white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}

.online-hub-card-glyph {
    font-size: 28px;
}

.online-hub-card-title {
    font-size: 15px;
    font-weight: 700;
}

.online-hub-card-subtitle {
    font-size: 11px;
    opacity: 0.8;
}

/* ===== Phase 8 — Online Hub roster row anatomy ===== */
.online-hub-game-row {
    background: var(--surface-card-translucent, #2A2A2A);
    backdrop-filter: blur(2px);
    border: 1px solid #3A3A3A;
    border-radius: 12px;
    padding: 14px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 8px;
    margin: 4px 0;
}

.online-hub-game-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.online-hub-game-code {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.online-hub-game-vs {
    font-size: 14px;
    color: #BBBBBB;
}

.online-hub-game-opponent {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.online-hub-game-status {
    font-size: 11px;
    color: #FF8F00;
}

.online-hub-connected-badge {
    background: #1E3A5F;
    border: 1px solid #2E5A8F;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #7FB8FF;
}

.online-hub-mode-badge {
    background: #3A3A3A;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #DDDDDD;
}

.online-hub-game-created {
    font-size: 11px;
    color: #B0B0B0;
    grid-column: 1 / span 2;
}

.online-hub-game-actions {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.online-hub-game-actions button {
    height: 40px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.online-hub-action-abandon { background: #5A2A2A; color: #FFB3B3; transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.online-hub-action-abandon.armed {
    background: var(--accent-danger, #E53935);
    color: white;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.55);
    animation: hub-abandon-armed-pulse 800ms ease-in-out infinite;
}
.online-hub-action-share   { background: #3A3A3A; color: white; }
.online-hub-action-open    { background: #FF8F00; color: white; }

@keyframes hub-abandon-armed-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.85); }
}

/* ===== Phase 8 — Online Hub refresh pill ===== */
.online-hub-refresh {
    background: var(--surface-card-elevated);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 6px 10px;
    color: #FF8F00;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Phase 8 — Online Create / Join amber selected accent ===== */
.online-create-page .diff-btn.selected,
.online-join-page  .diff-btn.selected {
    background: #FF8F00 !important;
    color: white;
    border-color: transparent;
}

/* Micro-help text shown under each section heading on the Online Create
   page (mirrors MAUI OnlineCreatePage hint rows). Same muted body-small
   look used elsewhere; sits flush under .difficulty-selector. */
.form-help {
    font-size: 11px;
    color: var(--text-secondary, #BEBEBE);
    line-height: 1.4;
    margin: 6px 0 0;
}

/* Landscape reflow — Online Create / Join sections sit side-by-side at
   wide viewports so the page reads more like a card stack than a tall
   scroll. Uses the shared (orientation: landscape) and (min-width: 720px)
   boundary so the rule turns off on portrait phones. */
@media (orientation: landscape) and (min-width: 720px) {
    .online-create-page .setup-form,
    .online-join-page .setup-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 12px;
    }
    .online-create-page .setup-form > .form-group,
    .online-join-page .setup-form > .form-group {
        margin: 0;
    }
    .online-create-page .setup-form > button,
    .online-create-page .setup-form > .info-card,
    .online-create-page .setup-form > .error-message,
    .online-join-page .setup-form > button,
    .online-join-page .setup-form > .info-card,
    .online-join-page .setup-form > .error-message {
        grid-column: 1 / span 2;
    }
}

/* ===== Phase 8 — Reusable info card ===== */
.info-card {
    background: #1A2733;
    border: 1px solid #23415A;
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0;
}

.info-card-icon {
    color: #5BA3E0;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-card-text {
    color: #BFD7EA;
    font-size: 12px;
    line-height: 1.5;
}

/* ===== Online flyout (Create / Join) =====
   Replaces the standalone /online/create and /online/join routes. The
   flyout slides in from the right edge over a translucent backdrop and
   is hosted inline by OnlineHub. */
.online-flyout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 80;
    display: flex;
    justify-content: flex-end;
    animation: online-flyout-fade-in 180ms ease-out;
}

@keyframes online-flyout-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.online-flyout {
    position: relative;
    width: min(420px, 100vw);
    max-width: 100vw;
    height: 100vh;
    background: var(--surface-card, #1E1E1E);
    border-left: 2px solid var(--btn-secondary-border, var(--divider, #333));
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    transform: translateX(440px);
    transition: transform 250ms ease-out;
}

.online-flyout.open {
    transform: translateX(0);
}

.online-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--divider, #333);
}

.online-flyout-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.online-flyout-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #BEBEBE);
    cursor: pointer;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.online-flyout-close:hover {
    color: var(--text-primary);
    background: var(--surface-card-elevated, #2A2A2A);
}

.online-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.online-flyout-footer {
    padding: 12px 18px 18px;
    border-top: 1px solid var(--divider, #333);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Avatar grid inside the Create flyout. Mirrors the Settings/Preferences
   theme-card grid pattern but at a smaller card size so it fits the
   420 px flyout width. */
.avatar-flyout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.avatar-flyout-card {
    background: var(--btn-secondary-border, var(--surface-card-elevated, #2A2A2A));
    border: 2px solid var(--btn-secondary-border, transparent);
    border-radius: 12px;
    padding: 6px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 120ms ease, border-color 150ms ease;
}

.avatar-flyout-card:hover {
    transform: scale(1.05);
}

.avatar-flyout-card.selected {
    border-color: #FF8F00;
    box-shadow: 0 0 0 1px #FF8F00 inset;
}

.avatar-flyout-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.avatar-flyout-label {
    font-size: 11px;
    color: var(--text-secondary, #BEBEBE);
    text-align: center;
}

/* My Games row highlight pulse — applied for ~3.5 s after a successful
   create/join so the user can see which entry is the new one. Pulses
   the amber accent stroke + a soft glow. */
.online-hub-game-row.highlighted {
    animation: hub-row-highlight 1.2s ease-in-out 3;
    border-color: #FF8F00 !important;
    box-shadow: 0 0 0 2px rgba(255, 143, 0, 0.40);
}

@keyframes hub-row-highlight {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 143, 0, 0.20); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 143, 0, 0.55); }
}

/* ===== Online Hub — server-unavailable error card =====
   Replaces the old `.error-message` red strip with a structured card that
   distinguishes a network/CORS failure from a successful empty roster.
   Renders title + message + hint + a Retry button so the user has a clear
   recovery path instead of a dead-end message. */
.online-hub-error-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-top: 16px;
    border-radius: 14px;
    background: var(--surface-card-elevated, rgba(40, 28, 28, 0.92));
    /* Theme-complementary accent rim — uses the same per-theme token as the
       page chrome so the warning still reads as part of the current palette
       instead of a generic red box. */
    border: 1px solid var(--page-border-color, rgba(229, 57, 53, 0.65));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40);
}

.online-hub-error-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.18);
    color: var(--accent-warning, #FFC107);
    font-size: 18px;
    flex-shrink: 0;
}

.online-hub-error-body {
    min-width: 0;
}

.online-hub-error-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #FFFFFF);
}

.online-hub-error-message {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--text-secondary, #BEBEBE);
    line-height: 1.4;
    word-break: break-word;
}

.online-hub-error-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-disabled, #888888);
    line-height: 1.35;
}

.online-hub-error-retry {
    align-self: center;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #FFFFFF;
    background: var(--btn-primary, #FF8F00);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transition: transform 120ms ease, box-shadow 150ms ease;
}

.online-hub-error-retry:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.online-hub-error-retry[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 520px) {
    /* Stack the icon/body/retry vertically on phones so the message has
       breathing room and the Retry button isn't cramped against the body. */
    .online-hub-error-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .online-hub-error-icon {
        margin: 0 auto;
    }
    .online-hub-error-retry {
        justify-content: center;
        width: 100%;
    }
}

/* ===== Toast (singleton, rendered by Layout/MainLayout.razor) ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--surface-card-elevated, #2A2A2A);
    border: 1px solid var(--divider, #333);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    max-width: min(560px, calc(100vw - 32px));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    animation: toast-rise 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toast-rise {
    from { transform: translate(-50%, 24px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

.toast .toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast .toast-text { flex: 1; line-height: 1.3; }

.toast .toast-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #BEBEBE);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px 6px;
}

.toast .toast-close:hover { color: var(--text-primary, #fff); }

.toast.toast-success {
    border-color: var(--accent-success, #43A047);
    box-shadow: 0 12px 36px rgba(67, 160, 71, 0.30);
}
.toast.toast-success .toast-icon { color: var(--accent-success, #43A047); }

.toast.toast-warning {
    border-color: var(--accent-warning, #FFC107);
}
.toast.toast-warning .toast-icon { color: var(--accent-warning, #FFC107); }

.toast.toast-error {
    border-color: var(--accent-danger, #E53935);
    box-shadow: 0 12px 36px rgba(229, 57, 53, 0.30);
}
.toast.toast-error .toast-icon { color: var(--accent-danger, #E53935); }

.toast.toast-info {
    border-color: var(--accent-info, #1976D2);
}
.toast.toast-info .toast-icon { color: var(--accent-info, #1976D2); }

/* ===== Phase 8 — Online tray reparenting ===== */
.game-active.online .player-panel.local  { order: 3; }
.game-active.online .board-frame         { order: 2; }
.game-active.online .player-panel.remote { order: 1; }
.game-active.online .move-log            { order: 4; }

/* ===== Blazor Error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Typography Scale (matches MAUI Styles.xaml) ===== */
.display-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-primary);
}

.heading-large {
    font-size: 22px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.heading-small {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-primary);
}

.body-large {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-primary);
}

.body-medium {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-primary);
}

.body-small {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.label-micro {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .game-title {
        font-size: 2.5rem;
    }

    .board-frame {
        max-width: 300px;
    }

    .tray-piece.small  { width: 28px; height: 28px; }
    .tray-piece.medium { width: 40px; height: 40px; }
    .tray-piece.large  { width: 52px; height: 52px; }
    .tray-piece.extralarge { width: 58px; height: 58px; }

    .piece-stack .tray-piece + .tray-piece { margin-left: -18px; }
    .piece-stack.medium .tray-piece + .tray-piece { margin-left: -24px; }
    .piece-stack.large .tray-piece + .tray-piece { margin-left: -34px; }

    .store-links {
        flex-direction: column;
        align-items: center;
    }

    .store-badge {
        width: 200px;
    }

    .game-code {
        font-size: 2rem;
        letter-spacing: 4px;
    }
}

@media (min-width: 768px) {
    .menu-page {
        padding: 3rem;
    }

    .game-title {
        font-size: 4rem;
    }

    .board-frame {
        max-width: 420px;
    }

    .tray-piece.small  { width: 40px; height: 40px; }
    .tray-piece.medium { width: 55px; height: 55px; }
    .tray-piece.large  { width: 70px; height: 70px; }
    .tray-piece.extralarge { width: 80px; height: 80px; }
}

@media (orientation: landscape) and (min-width: 720px) {
    .game-board-container .board-frame {
        max-width: none;
    }
}

@media (orientation: portrait), (max-width: 719px) {
    .game-page {
        padding: 0.75rem;
    }

    .game-active {
        max-width: 480px;
        padding: 0 8px;
    }

    .web-game-shell {
        display: block;
    }

    .ad-rail {
        display: none;
    }

    .landscape-game-shell {
        display: flex;
        flex-direction: column;
    }

    .game-board-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: 420px;
        padding: 0;
        box-shadow: none;
    }

    .player-panel.p2-panel { order: 1; }
    .board-frame { order: 2; max-width: 360px; }
    .player-panel.p1-panel { order: 3; }
    .move-log { order: 4; }

    .piece-tray {
        flex: initial;
    }

    .piece-group {
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
    }

    .stacked-group {
        align-items: center;
        flex-wrap: wrap;
    }
}

/* ===== Confetti ===== */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: all;
    overflow: hidden;
    z-index: 1000;
}

.confetti-piece {
    position: absolute;
    top: -10px;
    border-radius: 2px;
    animation: confettiFall var(--fall-duration, 2s) cubic-bezier(0.55, 0, 1, 0.45) forwards;
    animation-delay: var(--fall-delay, 0s);
    opacity: 0;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(var(--start-rot, 0deg));
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 30px)) rotate(var(--end-rot, 360deg));
        opacity: 0.3;
    }
}

/* ===== Match History ===== */
.history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 0;
}

.empty-history {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.empty-history p {
    margin-bottom: 0.5rem;
}

.hint-text {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 1.5rem !important;
}

/* ===== Stats Page ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface-card-translucent, var(--surface));
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-card.win { border-left: 4px solid var(--accent-success); }
.stat-card.loss { border-left: 4px solid var(--accent-danger); }
.stat-card.draw { border-left: 4px solid var(--amber); }

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Fredoka One', cursive;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-details, .stats-breakdown {
    background: var(--surface-card-translucent, var(--surface));
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.stats-breakdown h2 {
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--divider);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.stat-row:last-child { border-bottom: none; }

.stat-highlight {
    font-weight: 600;
    color: var(--text-primary);
}

.win-text { color: var(--accent-success); }
.loss-text { color: var(--accent-danger); }

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-card {
    background: var(--surface-card-translucent, var(--surface));
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px var(--shadow);
    border-left: 4px solid var(--text-light);
}

.history-card.win {
    border-left-color: var(--accent-success);
}

.history-card.loss {
    border-left-color: var(--accent-danger);
}

.history-card.draw {
    border-left-color: var(--amber);
}

.match-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.result-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    color: white;
}

.result-badge.win { background: var(--accent-success); }
.result-badge.loss { background: var(--accent-danger); }
.result-badge.draw { background: var(--amber); color: var(--text-primary); }

.match-type-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.match-type-badge.local { background: rgba(74,168,216,0.15); color: var(--player-one); }
.match-type-badge.online { background: rgba(67,160,71,0.15); color: var(--accent-success); }

.match-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.match-players {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.player-blue { color: var(--blue); }
.player-orange { color: var(--orange); }

.vs {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 400;
}

.match-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* ===== Leaderboard ===== */
.leaderboard-table {
    display: flex;
    flex-direction: column;
    background: var(--surface-card-translucent, var(--surface));
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
}

.lb-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--divider);
    transition: background 0.15s;
}

.lb-row:last-child {
    border-bottom: none;
}

.lb-row:hover {
    background: var(--cream);
}

.lb-me {
    background: var(--surface-card-elevated);
    font-weight: 600;
}

.lb-rank {
    width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
}

.lb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.5rem;
}

.lb-stat {
    width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.lb-stat-wide {
    width: 3.5rem;
    text-align: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.win-stat { color: var(--accent-success); }
.loss-stat { color: var(--accent-danger); }
.draw-stat { color: var(--amber); }

/* ===== Piece Placement Animation =====
   Slowed from the original 0.55s pop to a meatier ~1.0s "fall + settle":
   the piece drops from above the cell, scales up slightly past 100%, then
   eases into place. This makes placement readable at a glance and matches
   the deliberate feel of the MAUI native animation. */
.cell-piece {
    animation: pieceDrop 0.95s cubic-bezier(0.34, 1.40, 0.40, 1);
    transform-origin: 50% 100%;
}

.board-cell.legal-target .cell-piece {
    animation: none;
}

/* ===== Tray Piece Pickup Animation ===== */
.tray-piece {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tray-piece:active {
    transform: scale(0.85);
}

/* ===== Game Save Indicator ===== */
.save-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
}

.save-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-success);
    animation: savePulse 1s ease-out;
}

@keyframes savePulse {
    0% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Global animation suppression when user disables animations */
[data-animations="off"] * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}

/* Theme selector grid */
.theme-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid var(--divider);
    background: var(--surface-card);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
    width: 110px;
}

.theme-card:hover {
    transform: scale(1.05);
}

.theme-card:active {
    transform: scale(0.95);
}

.theme-card.active {
    border-color: #FF8F00;
}

.theme-card-swatch,
.theme-preview {
    position: relative;
}

.theme-card-swatch::after,
.theme-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 12px, var(--board-grid) 12px 14px),
        repeating-linear-gradient(90deg, transparent 0 12px, var(--board-grid) 12px 14px);
    opacity: 0.5;
    pointer-events: none;
    border-radius: inherit;
}

.theme-preview {
    width: 90px;
    height: 60px;
    border-radius: 8px;
}

.theme-name {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}

.theme-active {
    font-size: 10px;
    color: var(--accent-success);
}

.piece-preview {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Font Awesome icon utilities */
.btn i.fa-solid, .btn i.fa-brands,
.menu-btn i.fa-solid, .menu-btn i.fa-brands {
  font-size: 1.1em;
}

.icon-sm { font-size: 0.85em; }
.icon-lg { font-size: 1.3em; }
.icon-xl { font-size: 1.6em; }

/* Medal colors for leaderboard */
.medal-gold { color: #FFD700; }
.medal-silver { color: #C0C0C0; }
.medal-bronze { color: #CD7F32; }

/* ===== Phase 4 — Tabbed setup page (/play) ===== */
.play-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 16px;
    max-width: 720px;
    /* Inherits the solid framed surface from the .page-content / .play-page
       rule earlier in this file (--surface-card). Intentionally not setting
       `background` here so Online Hub / Play setup / Account share the same
       opaque card look as Preferences, Settings, Stats, and About. */
    margin: 12px auto;
}

.play-page::before {
    /* Body wallpaper already provides the seasonal background on every
       sub-page; the per-page ::before overlay would only stack a duplicate
       image at 0.18 opacity on top of the existing one, washing out the
       theme. Disable it so the body wallpaper carries the look entirely. */
    content: none;
}

.play-page > * {
    position: relative;
    z-index: 1;
}

.play-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--surface-card-elevated);
    color: #999;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.play-title {
    text-align: center;
    margin: 0.25rem 0 0.5rem;
}

.play-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 4px;
}

.play-tab {
    padding: 12px 16px;
    border: none;
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background 150ms ease;
}

.play-tab.active {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--accent-primary);
}

.play-tab-content {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 0 14px 14px;
    padding: 16px;
}

.play-cta-row {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0), #121212 30%);
    padding: 16px;
    margin-top: 16px;
    z-index: 5;
}

.play-cta-row .menu-btn.primary,
.btn-cta-amber {
    background: #FF8F00;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    height: 54px;
    border-radius: 14px;
    border: none;
    width: 100%;
}

/* ===== Phase 4 — Avatar preview inside setup form ===== */
.avatar-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.avatar-preview-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 4px;
}

.avatar-preview-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===== Phase 4 — Player game header (avatar banner) ===== */
.player-game-header {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9999px;
    min-height: 72px;
    width: 100%;
}

.player-avatar-ring {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    border: 3px solid transparent;
    background: rgba(0, 0, 0, 0.20);
    box-sizing: border-box;
    flex-shrink: 0;
}

.player-avatar-ring.p1 { border-color: #4AA8D8; background: rgba(25, 118, 210, 0.20); }
.player-avatar-ring.p2 { border-color: #66E91E63; background: rgba(233, 30, 99, 0.20); border-width: 2px; }

.player-avatar-ring img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.player-avatar-ring.turn-glow {
    animation: turn-glow-pulse 1.4s ease-in-out infinite;
}

@keyframes turn-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 168, 216, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(74, 168, 216, 0.45); }
}

.player-avatar-ring.p2.turn-glow {
    animation-name: turn-glow-pulse-p2;
}

@keyframes turn-glow-pulse-p2 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(233, 30, 99, 0.50); }
}

.player-game-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.player-game-header-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-game-header-name.p1-name { color: #DDEEFF; }
.player-game-header-name.p2-name { color: #FFD1E4; }

.ai-thinking-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 10px;
    background: rgba(233, 30, 99, 0.18);
    color: #FFB0D5;
    border-radius: 999px;
    font-size: 0.75rem;
    font-style: italic;
}

.ai-thinking-spinner {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 176, 213, 0.35);
    border-top-color: #FFB0D5;
    border-radius: 50%;
    animation: ai-thinking-spin 700ms linear infinite;
}

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

.header-menu-btn {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(25, 118, 210, 0.20);
    color: #4AA8D8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.header-menu-btn:hover { background: rgba(25, 118, 210, 0.32); transform: translateX(-50%) scale(1.05); }
.header-menu-btn i { font-size: 1.1rem; }

/* ===== Phase 4 — In-game menu modal ===== */
.game-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: game-menu-fade-in 180ms ease-out;
}

@keyframes game-menu-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.game-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: var(--surface-card, #1E1E1E);
    border-right: 2px solid var(--btn-secondary-border, var(--divider));
    border-radius: 0 20px 20px 0;
    transform: translateX(-300px);
    transition: transform 250ms ease-out;
    padding: 20px 20px 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.game-menu-panel.open {
    transform: translateX(0);
}

.game-menu-brand {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 4px auto 8px;
    pointer-events: none;
}

.game-menu-divider {
    height: 1px;
    background: var(--divider, #333333);
    margin: 4px 0 6px;
}

.game-menu-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid var(--btn-secondary-border, var(--divider));
    background: color-mix(in srgb, var(--btn-secondary-border, var(--divider)) 22%, transparent);
    color: var(--text-primary, white);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 4px;
    text-align: left;
    transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.game-menu-action:hover {
    background: color-mix(in srgb, var(--btn-secondary-border, var(--divider)) 38%, transparent);
    transform: translateX(2px);
}

.game-menu-action i { font-size: 1.05rem; width: 1.25rem; text-align: center; }

/* Per-action accent uses the theme accent palette so the flyout themes
   correctly across default/spring/fall/winter/stadium. */
.game-menu-action.restart {
    background: color-mix(in srgb, var(--accent-success, #43A047) 22%, transparent);
    color: var(--accent-success, #43A047);
    border-color: color-mix(in srgb, var(--accent-success, #43A047) 50%, transparent);
}
.game-menu-action.hint {
    background: color-mix(in srgb, var(--accent-info, #1976D2) 22%, transparent);
    color: var(--accent-info, #1976D2);
    border-color: color-mix(in srgb, var(--accent-info, #1976D2) 50%, transparent);
}
.game-menu-action.movelog {
    background: color-mix(in srgb, var(--text-secondary, #BEBEBE) 14%, transparent);
    color: var(--text-secondary, #BEBEBE);
    border-color: color-mix(in srgb, var(--text-secondary, #BEBEBE) 30%, transparent);
}
.game-menu-action.abandon,
.game-menu-action.concede {
    background: color-mix(in srgb, var(--accent-danger, #E53935) 18%, transparent);
    color: color-mix(in srgb, var(--accent-danger, #E53935) 75%, white);
    border-color: color-mix(in srgb, var(--accent-danger, #E53935) 45%, transparent);
}
.game-menu-action.exit {
    background: color-mix(in srgb, var(--accent-warning, #FFC107) 18%, transparent);
    color: color-mix(in srgb, var(--accent-warning, #FFC107) 80%, white);
    border-color: color-mix(in srgb, var(--accent-warning, #FFC107) 45%, transparent);
}

.game-menu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
}

.game-menu-close:hover { color: var(--text-primary); }


/* ===== Profile chip (DR-07) ===== */
/* Anonymous-first label opening the /account interstitial. Lives in
   MainLayout so it appears on every page; pages that include their own
   header (e.g., Online Hub) place it inline instead. */
.profile-chip {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--surface-card-elevated, #2A2A2A);
    border: 1px solid var(--btn-utility-border, #444);
    color: var(--text-primary, #fff);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}

.profile-chip:hover,
.profile-chip:focus-visible {
    background: var(--accent-secondary, #3A3A3A);
    outline: none;
}

.profile-chip-icon {
    color: var(--accent-warning, #FF8F00);
    display: inline-flex;
    align-items: center;
}

/* /account placeholder page */
.account-page { position: relative; text-align: center; }
.account-page-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}
.account-hero-glyph {
    font-size: 150px;
    color: var(--accent-warning, #FF8F00);
    display: block;
    text-align: center;
    margin-bottom: 24px;
}
.account-subtitle { color: var(--text-secondary, #BEBEBE); margin: 0 0 16px; }
.account-buttons { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 16px auto; }
.account-sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--btn-utility-border, #444);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.account-sso-button:not(.menu-btn) { background: var(--surface-card-elevated, #2A2A2A); }
.account-sso-button:not(.menu-btn):hover { background: var(--accent-secondary, #3A3A3A); }
.account-error {
    max-width: 320px;
    margin: 12px auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: #3A1F1F;
    border: 1px solid #5A2A2A;
    color: #FFB3B3;
    font-size: 13px;
}
.account-continue-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent-warning, #FF8F00);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== /sync — Premium Sync sheet (registration-free pairing-code flow) ===== */
.sync-hero-glyph {
    font-size: 96px;
    color: var(--accent-warning, #FF8F00);
    display: block;
    text-align: center;
    margin: 8px auto 16px auto;
}
.sync-card { /* mc-card inherits chrome; this is a hook for /sync-specific tweaks */ }
.sync-status { margin-bottom: 12px; }
.sync-code-input {
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
    padding: 12px 14px;
    font-family: 'Fredoka One', 'Open Sans', monospace;
    font-size: 22px;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid var(--btn-utility-border, #444);
    background: var(--surface-card-elevated, #2A2A2A);
    color: var(--text-primary, #fff);
}
.sync-code-input:focus-visible {
    outline: 2px solid var(--accent-warning, #FF8F00);
    outline-offset: 2px;
}
.sync-issued-code {
    display: flex; align-items: center; justify-content: center;
    margin: 8px 0;
}
.sync-code-value {
    display: inline-block;
    padding: 12px 18px;
    font-family: 'Fredoka One', 'Open Sans', monospace;
    font-size: 28px;
    letter-spacing: 6px;
    color: var(--accent-warning, #FF8F00);
    background: var(--surface-card-elevated, #2A2A2A);
    border: 1px solid var(--btn-utility-border, #444);
    border-radius: 10px;
}
.sync-device-row { align-items: center; gap: 12px; }
.sync-device-revoke { margin-left: auto; }


/* ===== Phase 9 — Stats tabs / Clear button / About page / Phase 10 — How to Play sub-tabs / rule-card chrome ===== */

/* ===== Settings + Preferences pages =====
   These pages share the `.page-content` framed-card chrome defined earlier
   in this file (single solid surface tinted by --surface-card), so we do
   NOT override `background` here — that previously made the entire page
   see-through against busy seasonal wallpapers (Preferences/Settings was
   the regression that prompted this rewrite).
   .no-landscape-grid is the explicit opt-out from the landscape 2-column
   reflow added below; pages with that class stay single-column at every
   viewport without affecting the framed surface. */
.prefs-page,
.no-landscape-grid {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

@media (orientation: landscape) and (min-width: 720px) {
    .no-landscape-grid {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
    }
}

.settings-divider {
    border: none;
    border-top: 1px solid var(--divider, #333333);
    margin: 16px 0;
}

.settings-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .settings-nav {
        grid-template-columns: 1fr;
    }
}



.stats-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 0 4px;
    margin-bottom: 16px;
}
.stats-tab {
    padding: 12px 16px;
    border: none;
    border-radius: 14px 14px 0 0;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}
.stats-tab.active {
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--accent-primary);
}

.stats-clear-row {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 16px;
}

.about-icon-wrap { text-align: center; margin: 24px 0; }
.about-icon { font-size: 150px; color: #1976D2; }
.about-tagline { text-align: center; font-size: 16px; color: var(--text-secondary); }
.about-phase, .about-deferred { text-align: center; color: var(--text-secondary); font-size: 13px; }

.subtab-bar {
    display: flex;
    gap: 4px;
    margin: 12px 0 12px;
    width: 100%;
}
.subtab {
    flex: 1 1 0;
    padding: 10px 14px;
    border: 1px solid var(--divider);
    background: var(--surface-card-elevated);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 80ms ease;
}
.subtab:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.subtab.subtab-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rule-caution {
    color: #FFCC80;
    font-style: italic;
    line-height: 1.4;
}

/* ===========================================================================
   GameBoard parity polish (landscape & portrait)
   ---------------------------------------------------------------------------
   Bug fixes for dual-header in landscape, oversized tray sections w/ S/M/L
   badges, larger avatars so the turn-glow animation is actually visible.
   These rules live at the end of the file on purpose so they win the
   source-order specificity tie against earlier defaults like
   `.player-game-header { display: grid }` (line ~3270) which previously
   defeated the `display: none` set inside the landscape media query.
   =========================================================================== */

/* --- Single-header in landscape: the portrait header was leaking through --- */
@media (orientation: landscape) and (min-width: 720px) {
    .player-game-header { display: none !important; }

    /* Bigger landscape avatars + turn-glow animation parity with the
       portrait header. Previously these avatars were 28px which made the
       MAUI-style "thinking/waiting" animations imperceptible. */
    .landscape-info .landscape-avatar {
        width: 48px;
        height: 48px;
        border: 2px solid transparent;
        background: rgba(0, 0, 0, 0.22);
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }

    .landscape-info .landscape-avatar.landscape-avatar-p1 { border-color: #4AA8D8; }
    .landscape-info .landscape-avatar.landscape-avatar-p2 { border-color: #E91E63; }

    .landscape-info .landscape-avatar.turn-glow {
        animation: turn-glow-pulse 1.4s ease-in-out infinite;
    }
    .landscape-info .landscape-avatar.landscape-avatar-p2.turn-glow {
        animation-name: turn-glow-pulse-p2;
    }

    .landscape-info-name {
        font-size: 1rem;
    }

    /* AI difficulty sub-label ("Easy / Medium / Hard") under the AI's name. */
    .landscape-info-name .ai-tier {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 1px;
    }
}

/* --- Portrait header avatars: bigger so the turn-glow + thinking pulse
       animations are actually visible (was 56px ring with 32px image). --- */
.player-avatar-ring {
    width: 64px;
    height: 64px;
}

/* --- Player tray "section" — mirrors MAUI's BuildTraySection look:
       a bordered card per piece size with an "S/M/L" badge in one corner
       and a "×N" count badge in the other. Replaces the old open piece
       row that had no labels and made stacked pieces hard to read.
       Padding / font sizes / opacities aligned to MAUI's native values:
         CornerRadius=10, StrokeThickness=1, Padding=6
         Stroke #554AA8D8 / #55E91E63   (~33% alpha)
         Background #220D47A1 / #22880E4F (~13% alpha)
         SizeBadge FontSize 9, white-on-#CC000000 pill
         CountBadge FontSize 11, white, hidden when count == 0. --- */
.piece-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(74, 168, 216, 0.33);
    background: rgba(13, 71, 161, 0.13);
    padding: 6px;
    /* Equal share across the flex axis so S / M / L / XL sections render at
       the same size regardless of how big each piece visual is. min-width: 0
       allows shrink in row direction (portrait) and min-height keeps the
       sections from collapsing in column direction (landscape). */
    flex: 1 1 0;
    min-width: 0;
    min-height: 72px;
}

.player-panel.top .piece-section {
    border-color: rgba(233, 30, 99, 0.33);
    background: rgba(136, 14, 79, 0.13);
}

/* Pin the tiny S/M/L badge top-left, count badge top-right. */
.piece-section .size-badge {
    position: absolute;
    top: 3px;
    left: 4px;
    background: rgba(0, 0, 0, 0.80);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 4;
}

.piece-section .count-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 1px 0;
    pointer-events: none;
    z-index: 4;
}

/* MAUI hides the count label entirely when count == 0 (IsVisible = count > 0). */
.piece-section .count-badge.count-zero {
    display: none;
}

/* The piece group sits inside each section and centers the visible piece. */
.piece-section .piece-stack {
    margin-top: 4px;
    justify-content: center;
}

/* --- Bigger header / tray avatars so animations are visible.
       The 32px tray avatar inside `.player-info` was too small to see the
       active-turn pulse on. Bump to 48px and only inside game shell. --- */
.game-active .player-info .player-avatar {
    width: 48px;
    height: 48px;
}

/* In portrait mode, give the tray header more breathing room. */
@media (orientation: portrait), (max-width: 719px) {
    .game-active .player-info {
        gap: 10px;
        padding: 4px 0;
    }

    /* Make the tray panels feel like a real container (matches MAUI's
       P1TrayPanel / P2TrayPanel borders): adds the section card frame
       around the entire tray + reserve, not just per piece. */
    .game-active .player-panel {
        border-radius: 14px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(0, 0, 0, 0.22);
    }

    .game-active .player-panel.top {
        border-color: rgba(233, 30, 99, 0.35);
        background: rgba(136, 14, 79, 0.16);
    }

    .game-active .player-panel.bottom {
        border-color: rgba(74, 168, 216, 0.35);
        background: rgba(13, 71, 161, 0.16);
    }
}

/* Stack section badges should not steal pointer events from the pieces. */
.piece-section .tray-piece {
    position: relative;
    z-index: 1;
}

/* Landscape: clamp tray section height so tall windows don't stretch each
   per-size section into a giant strip. The flex: 1 1 0 distribution that
   makes sections uniform also makes them grow with available column space;
   capping max-height keeps the trays compact and centered. */
@media (orientation: landscape) and (min-width: 720px) {
    .piece-section {
        max-height: 120px;
    }
}

/* ===========================================================================
   Sub-page landscape grid + wallpaper-bleed-through readability
   ---------------------------------------------------------------------------
   With the seasonal wallpaper now on <body>, sub-pages need:
   1. A wider .page-content max-width on landscape so cards aren't squeezed
      into a 600px column on a 1440px monitor (and the wallpaper has
      breathing room around the cards).
   2. A 2-column grid for .settings-form when there's room, matching the
      MAUI native two-column preferences layout. Pages explicitly tagged
      with .no-landscape-grid (Preferences/Settings markup) opt out.
   3. A body min-height anchor so very short pages still show the
      wallpaper instead of collapsing to content height.
   =========================================================================== */
body {
    min-height: 100vh;
}

@media (orientation: landscape) and (min-width: 900px) {
    .page-content,
    .play-page {
        max-width: 960px;
    }

    /* Two-column settings layout for wider screens. .no-landscape-grid
       containers stay single-column (the !important rule earlier wins). */
    .settings-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
        row-gap: 1.25rem;
    }

    /* Some setting groups (e.g., the wide picker grids) read better full
       width \u2014 mark them with .full-width to span both columns. */
    .settings-form .setting-group.full-width {
        grid-column: 1 / -1;
    }
}



/* =============================================================================
   MAUI Parity — Card system (Settings / Preferences / NewGame / OnlineHub / HowToPlay)
   Mirrors TicTacChew.Maui Resources/Styles/Styles.xaml SettingsCardStyle and
   friends so the Razor web app reads as the same product as MAUI. All colors
   flow through CSS custom properties already driven by [data-theme] so per-
   theme accents recolor every page automatically.
   ============================================================================= */

/* Section card wrapper — MAUI SettingsCardStyle */
.mc-card {
    background: var(--surface-card);
    border: 0.5px solid var(--accent-primary);
    border-radius: 12px;
    margin: 0 0 10px 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Section header bar — MAUI SettingsSectionHeaderStyle */
.mc-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-card-elevated);
    padding: 9px 14px;
    min-height: 36px;
}

.mc-card-header > i,
.mc-card-header > .mc-card-header-icon {
    color: var(--accent-primary);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* Section label — MAUI SettingsSectionLabelStyle */
.mc-card-header > .mc-card-section-label,
.mc-card-section-label {
    color: var(--accent-primary);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    flex: 1;
}

/* Optional badge floated to the right of a header (Premium tier badge etc.) */
.mc-card-header-badge {
    background: var(--accent-warning, #FFC107);
    color: var(--surface-primary, #121212);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Each toggle / picker row — MAUI SettingsRowStyle */
.mc-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-card);
    padding: 8px 14px;
    min-height: 52px;
}

.mc-card-row-leading {
    flex-shrink: 0;
    color: var(--text-disabled);
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.mc-card-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* Primary row label — MAUI SettingsRowLabelStyle */
.mc-card-row-label {
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* Secondary row sub-label — MAUI SettingsRowSubLabelStyle */
.mc-card-row-sublabel {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.2px;
    line-height: 1.3;
    margin: 0;
}

.mc-card-row-trailing {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Horizontal divider between rows — MAUI SettingsDividerStyle */
.mc-card-divider {
    height: 0.5px;
    background: var(--divider);
    margin: 0 14px;
}

/* Free-form section body (used when a card hosts arbitrary content,
   e.g., the Theme picker carousel or the avatar carousel). */
.mc-card-body {
    padding: 12px 14px;
    background: var(--surface-card);
}

.mc-card-body-tight {
    padding: 8px 14px 12px;
    background: var(--surface-card);
}

/* Themed switch — MAUI SettingsSwitchStyle. Replaces .toggle-slider for
   pages that adopt the new card system. */
.mc-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.mc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--divider);
    border-radius: 26px;
    transition: background 0.25s ease;
}

.mc-switch-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mc-switch input:checked + .mc-switch-slider {
    background: var(--accent-primary);
}

.mc-switch input:checked + .mc-switch-slider::before {
    transform: translateX(20px);
}

/* Primary filled button — MAUI SettingsPrimaryButtonStyle */
.mc-btn-primary {
    background: var(--accent-primary);
    color: var(--text-primary);
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    min-height: 50px;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 80ms cubic-bezier(0.33, 0, 0.67, 1), filter 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mc-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mc-btn-primary:active { transform: scale(0.97); }
.mc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Ghost / outline button — MAUI SettingsGhostButtonStyle */
.mc-btn-ghost {
    background: transparent;
    color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
    border-radius: 14px;
    padding: 12px 18px;
    min-height: 50px;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 80ms cubic-bezier(0.33, 0, 0.67, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mc-btn-ghost:hover { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); transform: translateY(-1px); }
.mc-btn-ghost:active { transform: scale(0.97); }

/* Two-up button row inside a card body */
.mc-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Online action cards — MAUI OnlineActionCardStyle / OnlineCreateActionCardStyle */
.mc-action-card {
    background: var(--surface-card-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-primary);
    text-align: center;
    font-family: inherit;
    transition: transform 100ms ease, box-shadow 100ms ease, background 150ms ease;
}

.mc-action-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.mc-action-card:active { transform: scale(0.98); }

.mc-action-card.create {
    border-width: 2px;
}

.mc-action-card-glyph {
    color: var(--accent-primary);
    font-size: 26px;
    line-height: 1;
    margin-bottom: 2px;
}

.mc-action-card-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.mc-action-card-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.3;
}

/* Hint / info box — MAUI OnlineHintBoxStyle */
.mc-hint-box {
    background: var(--surface-card-elevated);
    border: 0.5px solid var(--accent-primary);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mc-hint-box.danger {
    background: var(--accent-danger);
    border-color: transparent;
    color: var(--text-primary);
}

.mc-hint-box i { color: var(--accent-primary); font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* Tab bar (mode tabs above setup form) — MAUI GameModeTabStyle.
   Inactive uses SurfaceCardElevated; active flips to AccentPrimary with a
   3px underline accent. */
.mc-tab-bar {
    display: grid;
    gap: 6px;
    padding: 0 4px;
}

.mc-tab-bar.cols-2 { grid-template-columns: 1fr 1fr; }
.mc-tab-bar.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.mc-tab {
    background: var(--surface-card-elevated);
    color: var(--text-primary);
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 10px 12px;
    min-height: 64px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    transition: background 150ms ease;
}

.mc-tab i { font-size: 22px; line-height: 1; }

.mc-tab.active {
    background: var(--accent-primary);
    color: var(--text-primary);
}

.mc-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 0 0 3px 3px;
}

/* Pill / badge used inside cards (e.g., difficulty / board-size selector) */
.mc-pill-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mc-pill-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.mc-pill {
    background: var(--surface-card-elevated);
    color: var(--text-primary);
    border: 1.5px solid var(--divider);
    border-radius: 12px;
    padding: 12px 10px;
    min-height: 56px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.mc-pill:hover { border-color: var(--accent-primary); }
.mc-pill.selected {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* Stat number — MAUI StatNumber typography */
.mc-stat-number {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}

/* Settings page page-frame wrapper helpers — opt-in tweaks for the new
   card-grouped Settings / Preferences pages. The wrapper itself uses the
   shared .page-content card surface; these classes just give the inner
   stack the right rhythm so cards aren't double-shadowed. */
.mc-page-stack { display: flex; flex-direction: column; gap: 0; }
.mc-page-stack > h1 { margin-bottom: 14px; }


/* =============================================================================
   MAUI Parity — Setup Form (/play page)
   The shared GameSetupForm.razor renders generic .form-group sections; these
   rules give them the MAUI SettingsCardStyle look (SurfaceCard background +
   thin AccentPrimary border) when they sit inside the tabbed Play layout.
   Also re-skins .diff-btn so the active state uses AccentPrimary, mirroring
   the New Game board-size / ruleset / difficulty pills in MAUI.
   ============================================================================= */
.play-tab-content .setup-form {
    background: transparent;
    padding: 0;
}

.play-tab-content .setup-form > .form-group {
    background: var(--surface-card);
    border: 0.5px solid var(--accent-primary);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.play-tab-content .setup-form > .form-group > label:first-child {
    color: var(--accent-primary);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    display: block;
}

/* SEO / CWV: skip rendering work for below-the-fold panels. The browser
   renders these on demand when they scroll into view, reducing INP and
   improving LCP by deprioritizing offscreen work. Apply the
   .app-section--below-fold class to settings drawer, help modal, and other
   below-the-fold panels as they are encountered. */
.app-section--below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

/* Diff/board/ruleset selectors get the MAUI pill flip on selection. */
.play-tab-content .difficulty-selector,
.online-create-page .difficulty-selector,
.online-join-page .difficulty-selector {
    gap: 8px;
}

.play-tab-content .diff-btn,
.online-create-page .diff-btn,
.online-join-page .diff-btn {
    background: var(--surface-card-elevated);
    border: 1.5px solid var(--divider);
    border-radius: 12px;
    color: var(--text-primary);
    min-height: 48px;
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.play-tab-content .diff-btn:hover,
.online-create-page .diff-btn:hover,
.online-join-page .diff-btn:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.play-tab-content .diff-btn.selected,
.online-create-page .diff-btn.selected,
.online-join-page .diff-btn.selected {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* Start Game CTA in the play page — match MAUI SettingsPrimaryButtonStyle. */
.play-tab-content .play-cta-row {
    background: transparent;
    margin-top: 14px;
    padding: 0;
    position: static;
}

.play-tab-content .play-cta-row .menu-btn.primary,
.play-tab-content .play-cta-row .btn-cta-amber {
    background: var(--accent-primary);
    color: var(--text-primary);
    height: 50px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.play-tab-content .play-cta-row .menu-btn.primary:hover,
.play-tab-content .play-cta-row .btn-cta-amber:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Avatar preview — soft accent halo */
.play-tab-content .avatar-preview {
    padding: 6px 0;
}

.play-tab-content .avatar-preview-img {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

/* =============================================================================
   MAUI Parity — Online Hub overrides
   Bring section titles, game-row borders, and the refresh pill in line with
   the MAUI OnlineHubPage's accent-driven look.
   ============================================================================= */
.online-hub-section-title {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.online-hub-game-row {
    background: var(--surface-card);
    border: 0.5px solid var(--accent-primary);
    backdrop-filter: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.online-hub-game-row.highlighted {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 4px 18px rgba(0, 0, 0, 0.4);
    transition: box-shadow 250ms ease;
}

.online-hub-empty {
    background: var(--surface-card);
    border: 0.5px solid var(--accent-primary);
    backdrop-filter: none;
    color: var(--text-secondary);
}

.online-hub-game-status {
    color: var(--accent-primary);
    font-weight: 600;
}

.online-hub-connected-badge {
    background: var(--surface-card-elevated);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}

.online-hub-mode-badge {
    background: var(--surface-card-elevated);
    color: var(--text-secondary);
    border: none;
}

.online-hub-game-created {
    color: var(--text-secondary);
}

.online-hub-action-open {
    background: var(--accent-primary);
    color: var(--text-primary);
    border-radius: 10px;
}

.online-hub-action-share {
    background: transparent;
    border: 1.5px solid var(--accent-primary);
    color: var(--accent-primary);
    border-radius: 10px;
}

.online-hub-refresh {
    background: var(--surface-card-elevated);
    border: 0.5px solid var(--accent-primary);
    color: var(--accent-primary);
    border-radius: 8px;
    font-weight: 700;
}

.online-hub-refresh:hover {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-card-elevated));
}

/* =============================================================================
   MAUI Parity — How to Play page
   Mirrors HowToPlayModalBuilder.cs BuildCard (theme-aware AccentPrimary border
   + accent-colored heading + SurfaceCardElevated background) and BuildTab
   (theme-aware SubTabActive / SubTabInactive). Replaces hardcoded #FFB74D /
   #2A2A2A with semantic tokens so every theme recolors correctly.
   ============================================================================= */
.rule-card {
    background: var(--surface-card-elevated);
    border: 0.5px solid var(--accent-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.rule-card h2,
.rule-card h3,
.rule-card h4 {
    color: var(--accent-primary);
}

.rule-card .rule-caution {
    color: var(--accent-warning);
    font-style: italic;
}

/* Make the .rule-card paragraphs / lists use TextPrimary for the body and
   the accent for emphasized strong text so it tracks the active theme. */
.rule-card p { color: var(--text-primary); }
.rule-card ul { color: var(--text-primary); }
.rule-card strong { color: var(--accent-primary); }

/* How-to-Play tab bar — MAUI BuildTab pattern */
.howtoplay-modal-tabs.tab-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 0;
    margin: 0 0 14px 0;
}

.howtoplay-modal-tabs .tab-active,
.howtoplay-modal-tabs .tab-inactive {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms ease, transform 80ms ease;
}

.howtoplay-modal-tabs .tab-active {
    background: var(--accent-primary);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.howtoplay-modal-tabs .tab-inactive {
    background: var(--surface-card-elevated);
    border-color: var(--divider);
    color: var(--text-secondary);
}

.howtoplay-modal-tabs .tab-inactive:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* The body of HowToPlayModal also rendered .rule-card via the global rule
   above; keep the modal's elevated background and accent border consistent. */
.howtoplay-modal-body .rule-card {
    background: var(--surface-card-elevated);
    border: 0.5px solid var(--accent-primary);
}

.howtoplay-modal-body h3,
.howtoplay-modal-body h4 {
    color: var(--accent-primary);
}

/* =============================================================================
   MAUI Parity — h1 page headers
   Replace the cursive Fredoka One yellow heading with a theme-aware Open Sans
   bold heading + 3px AccentPrimary underline accent. Mirrors MAUI's
   HeadingLarge style + SettingsSectionLabelStyle accent rhythm.
   ============================================================================= */
.page-content h1,
.play-page h1,
.play-page .play-title,
.waiting-room h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    text-shadow: none;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--accent-primary);
    position: relative;
    text-align: left;
}

/* Center-anchored variants stay centered (Online Hub h1, Play title) */
.play-page .play-title,
.online-hub-header h1 {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
    position: relative;
    margin: 0 0 12px 0;
}

.play-page .play-title::after,
.online-hub-header h1::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    margin: 8px auto 0;
}

.waiting-room h1 {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

.waiting-room h1::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    margin: 10px auto 0;
}

/* Section h2 (e.g., Online Hub "Your Games") gets the same accent rhythm */
.online-hub-section-title,
.page-content h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 10px;
}

/* =============================================================================
   MAUI Parity — Setup form landscape grid
   Mirrors GameSetupFormView.xaml.cs ApplyLayout(isLandscape=true):
       row 0: P1 | P2/AI
       row 1: Board & Game Mode (colspan 2)
       row 2: Skin / Avatar (colspan 2)
       row 3: CTA (colspan 2)
   Slot wrappers carry .mc-slot-* classes that resolve to grid-area names
   so reflow happens entirely in CSS, no JS callbacks.
   ============================================================================= */
.mc-setup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    padding: 0;
}

.mc-setup-form > .mc-card,
.mc-setup-form > .play-cta-row,
.mc-setup-form > .mc-hint-box {
    margin: 0;
}

.mc-setup-form > .mc-card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }

/* Landscape (>=720px): switch to grid with named areas. */
@media (min-width: 720px) {
    .mc-setup-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "p1 p2"
            "board board"
            "skin skin"
            "cta cta";
        column-gap: 16px;
        row-gap: 14px;
    }

    .mc-slot-p1 { grid-area: p1; }
    .mc-slot-p2 { grid-area: p2; }
    .mc-slot-board { grid-area: board; }
    .mc-slot-skin { grid-area: skin; }
    .mc-slot-cta { grid-area: cta; }

    /* Hint cards inside .mc-setup-form (Online Create flyout) span both columns. */
    .mc-setup-form > .mc-hint-box { grid-column: 1 / -1; }
}

/* Inside the play-page tab content the surface should let our cards breathe. */
.play-tab-content {
    background: transparent;
    padding: 12px 6px 24px;
    border-radius: 0;
}

/* Widen the play-page chrome so 2-col landscape has room. */
@media (min-width: 720px) {
    .play-page {
        max-width: 1100px;
    }
}

/* =============================================================================
   MAUI Parity — Board size pills + Game mode cards
   Mirrors BoardSizePillStyle + GameModeCardStyle + ModeTagAccentStyle from
   TicTacChew.Maui Resources/Styles/Styles.xaml.
   ============================================================================= */
.mc-micro-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
}

.mc-board-pill-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mc-board-pill {
    background: transparent;
    border: 2px solid var(--divider);
    border-radius: 30px;
    padding: 12px 10px;
    min-height: 56px;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.mc-board-pill:hover { border-color: var(--accent-primary); transform: translateY(-1px); }

.mc-board-pill.selected {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--surface-primary);
}

.mc-board-pill-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.mc-board-pill-sub {
    font-size: 10px;
    opacity: 0.85;
    color: var(--text-secondary);
}

.mc-board-pill.selected .mc-board-pill-sub { color: var(--surface-primary); opacity: 0.9; }

/* Game mode cards (Nom-Tac-Toe / Tic-Tac-Toe / Stacked) — stacked in
   portrait, side-by-side in landscape. Selected reads as a recessed
   SurfaceCard against the elevated unselected siblings + thicker
   AccentPrimary stroke. */
.mc-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 720px) {
    .mc-mode-grid { grid-template-columns: 1fr 1fr; }
}

.mc-mode-card {
    background: var(--surface-card-elevated);
    border: 2px solid var(--divider);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.mc-mode-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); }

.mc-mode-card.selected {
    background: var(--surface-card);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.mc-mode-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mc-mode-card-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
}

.mc-mode-card-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.mc-mode-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.mc-mode-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}

.mc-mode-tag.accent {
    background: var(--accent-primary);
    color: var(--surface-primary);
}

.mc-mode-tag.danger {
    background: var(--accent-danger);
    color: #fff;
}

/* Round radio dot in the card head */
.mc-mode-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--surface-primary);
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}

.mc-mode-radio i { font-size: 10px; opacity: 0; }

.mc-mode-radio.checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.mc-mode-radio.checked i { opacity: 1; }

/* Avatar selection on Create flyout uses theme accent instead of hardcoded amber. */
.avatar-flyout-card.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary) inset;
}

/* Wider flyout in landscape so the 2-col MAUI form has room. */
@media (min-width: 720px) {
    .online-flyout {
        width: min(720px, 92vw);
        transform: translateX(740px);
    }
    .online-flyout.open { transform: translateX(0); }
}

/* CTA row inside the new setup form — kill the sticky gradient strip when
   the form is hosted in a card-stacked layout. */
.mc-setup-form > .play-cta-row {
    position: static;
    background: transparent;
    padding: 0;
    margin: 0;
}

.mc-setup-form > .play-cta-row .mc-btn-primary {
    height: 54px;
    font-size: 16px;
}

/* =============================================================================
   MAUI Parity — Online Hub layout
   Match MAUI OnlineHubPage flow: header (back + title + refresh), Start a
   game cards (full-width on portrait, 2-col on landscape), then My Online
   Games list. Drop the dual-row "title above refresh" hack so it reads in a
   single bar with the title centered.
   ============================================================================= */
.online-hub-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.online-hub-header h1.play-title {
    grid-column: 1 / -1;
    margin: 0 0 12px 0;
}

.online-hub-header .online-hub-refresh {
    grid-row: 2;
    grid-column: 2;
    margin-top: -8px;
    justify-self: end;
}

@media (min-width: 720px) {
    .online-hub-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* Start-a-game cards inside the Online Hub get a tiny title/icon weight bump. */
.online-hub-actions .mc-action-card .mc-action-card-glyph { font-size: 28px; }
.online-hub-actions .mc-action-card .mc-action-card-title { font-size: 15px; }


/* ===== Platform Disclaimer (Main Menu) =====
   Surfaced once on the home screen to set expectations that the Blazor WASM
   build is the "lite" version of the MAUI native app. Dismissable; per-browser
   persistence handled by MainMenu.razor via settingsInterop. */
.platform-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 auto 12px auto;
    padding: 10px 14px;
    max-width: min(720px, 92vw);
    background: rgba(255, 143, 0, 0.18);
    border: 1px solid rgba(255, 143, 0, 0.55);
    border-radius: 12px;
    color: var(--text-primary, #FFFFFF);
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.platform-disclaimer-icon {
    color: var(--accent-primary, #FF8F00);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.platform-disclaimer-text {
    flex: 1;
}

.platform-disclaimer-dismiss {
    background: transparent;
    border: none;
    color: var(--text-primary, #FFFFFF);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.platform-disclaimer-dismiss:hover { opacity: 1; }

/* ===== Difficulty description (GameSetupForm AI difficulty pills) =====
   Mirrors the MAUI Difficulty_*Desc resource string strip rendered under
   the difficulty selector so the web setup screen explains tiers the same
   way the device app does. */
.mc-difficulty-desc {
    margin: 8px 2px 0 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
    font-style: italic;
}
/* SEO: visually-hidden but crawler- and screen-reader-accessible content.
   The Blazor WASM app injects its own UI into #app at runtime; this block
   stays in the static HTML shell so Googlebot/Bingbot/social scrapers see
   keyword-rich, on-topic content before WebAssembly boots. */
.seo-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}