/* ═══════════════════════════════════════════════════════════
   PLAYALAMA — Design System
   WCAG AA compliant · Dark + Light · prefers-reduced-motion
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS dark (défaut) ── */
:root,
html.dark {
    color-scheme: dark;
    --bg:         #0d0f1a;
    --bg2:        #13162a;
    --bg3:        #1a1e35;
    --surface:    #1e2340;
    --border:     rgba(124,92,252,0.20);
    --accent:     #7c5cfc;
    --accent2:    #c084fc;
    --gold:       #f59e0b;
    --silver:     #94a3b8;
    --bronze:     #b45309;
    --text:       #e2e8f0;
    --text-muted: #cbd5e1;
    --text-dim:   #a8b8d0;
    --success:    #22c55e;
    --error:      #ef4444;
    --board-grid-line: rgba(148,163,184,0.22);
    --board-grid-outline: rgba(148,163,184,0.30);
    --radius:     12px;
    --radius-sm:  8px;
    --font:       'Segoe UI', system-ui, sans-serif;
    --nav-h:      64px;
    --banner-h:   0px;
    --shadow:     0 4px 24px rgba(0,0,0,0.4);
    --navbar-action-bg: var(--surface);
}

/* ── TOKENS light ── */
html.light {
    color-scheme: light;
    --bg:         #f8f9fc;
    --bg2:        #eef0f8;
    --bg3:        #e4e7f2;
    --surface:    #ffffff;
    --border:     rgba(100,80,200,0.18);
    --accent:     #5b3fcc;
    --accent2:    #8b50e0;
    --gold:       #d97706;
    --silver:     #475569;
    --bronze:     #92400e;
    --text:       #1e1b4b;
    --text-muted: #2d2a5c;
    --text-dim:   #45427a;
    --success:    #16a34a;
    --error:      #dc2626;
    --board-grid-line: rgba(71,85,105,0.22);
    --board-grid-outline: rgba(71,85,105,0.32);
    --shadow:     0 4px 24px rgba(0,0,0,0.08);
    --navbar-action-bg: rgba(0,0,0,0.03);
}

/* ── TOKENS bleuté ── */
html.blue {
    color-scheme: light;
    --bg:         #eef5ff;
    --bg2:        #e4eefc;
    --bg3:        #d8e5fa;
    --surface:    #ffffff;
    --border:     rgba(56,106,195,0.24);
    --accent:     #2f5fbf;
    --accent2:    #4f89e8;
    --gold:       #b7791f;
    --silver:     #3b4a66;
    --bronze:     #8a4a18;
    --text:       #0f1f3f;
    --text-muted: #1e3258;
    --text-dim:   #384d72;
    --success:    #15803d;
    --error:      #b91c1c;
    --board-grid-line: rgba(47,68,108,0.20);
    --board-grid-outline: rgba(47,68,108,0.30);
    --shadow:     0 4px 24px rgba(15,31,63,0.10);
    --navbar-action-bg: rgba(0,0,0,0.03);
}

/* ── TOKENS verdâtre ── */
html.green {
    color-scheme: light;
    --bg:         #eef9f2;
    --bg2:        #e4f4ea;
    --bg3:        #d4eadc;
    --surface:    #ffffff;
    --border:     rgba(27,117,77,0.24);
    --accent:     #1f8a5c;
    --accent2:    #2ea36f;
    --gold:       #a16207;
    --silver:     #2f5143;
    --bronze:     #7c3f14;
    --text:       #0f2b1f;
    --text-muted: #1d4030;
    --text-dim:   #385a48;
    --success:    #15803d;
    --error:      #b91c1c;
    --board-grid-line: rgba(44,86,70,0.20);
    --board-grid-outline: rgba(44,86,70,0.30);
    --shadow:     0 4px 24px rgba(15,43,31,0.09);
    --navbar-action-bg: rgba(0,0,0,0.03);
}

/* ── TOKENS vermillon ── */
html.vermillion {
    color-scheme: light;
    --bg:         #fff3ee;
    --bg2:        #ffe8df;
    --bg3:        #ffdacc;
    --surface:    #ffffff;
    --border:     rgba(176,64,24,0.24);
    --accent:     #c84b1f;
    --accent2:    #e2673a;
    --gold:       #b45309;
    --silver:     #5e3c33;
    --bronze:     #8c2f14;
    --text:       #3c1b12;
    --text-muted: #502518;
    --text-dim:   #6a3828;
    --success:    #15803d;
    --error:      #b91c1c;
    --board-grid-line: rgba(113,66,53,0.20);
    --board-grid-outline: rgba(113,66,53,0.30);
    --shadow:     0 4px 24px rgba(60,27,18,0.09);
    --navbar-action-bg: rgba(0,0,0,0.03);
}

/* ── TOKENS highcontrast (WCAG AAA) ── */
html.highcontrast {
    color-scheme: dark;
    --bg:         #000000;
    --bg2:        #1a1a1a;
    --bg3:        #2d2d2d;
    --surface:    #000000;
    --border:     #ffffff;
    --accent:     #ffff00;
    --accent2:    #00ffff;
    --gold:       #ffd700;
    --silver:     #c0c0c0;
    --bronze:     #cd7f32;
    --text:       #ffffff;
    --text-muted: #ffffff;
    --text-dim:   #e0e0e0;
    --success:    #00ff00;
    --error:      #ff0000;
    --board-grid-line: #ffffff;
    --board-grid-outline: #ffffff;
    --shadow:     none;
    --radius:     0;
    --radius-sm:  0;
}

/* ── TOKENS deuteranopia (rouge-vert) ── */
html.deuteranopia {
    color-scheme: dark;
    --bg:         #0a0e1a;
    --bg2:        #151b2e;
    --bg3:        #1f2842;
    --surface:    #253052;
    --border:     rgba(100,150,255,0.35);
    --accent:     #4da6ff;
    --accent2:    #66ccff;
    --gold:       #ffcc00;
    --silver:     #c0c0c0;
    --bronze:     #cc9966;
    --text:       #e6f0ff;
    --text-muted: #c2d4f0;
    --text-dim:   #9db5da;
    --success:    #00ccff;
    --error:      #ff6666;
    --board-grid-line: rgba(100,130,200,0.30);
    --board-grid-outline: rgba(100,130,200,0.40);
    --shadow:     0 4px 24px rgba(0,0,0,0.5);
}

/* ── TOKENS protanopia (rouge-vert) ── */
html.protanopia {
    color-scheme: dark;
    --bg:         #0a0e1a;
    --bg2:        #151b2e;
    --bg3:        #1f2842;
    --surface:    #253052;
    --border:     rgba(120,160,255,0.35);
    --accent:     #3399ff;
    --accent2:    #5db3ff;
    --gold:       #ffcc00;
    --silver:     #c0c0c0;
    --bronze:     #cc9966;
    --text:       #e6f0ff;
    --text-muted: #c2d4f0;
    --text-dim:   #9db5da;
    --success:    #00ccff;
    --error:      #ff5555;
    --board-grid-line: rgba(110,140,210,0.30);
    --board-grid-outline: rgba(110,140,210,0.40);
    --shadow:     0 4px 24px rgba(0,0,0,0.5);
}

/* ── TOKENS tritanopia (bleu-jaune) ── */
html.tritanopia {
    color-scheme: dark;
    --bg:         #0f0a1a;
    --bg2:        #1b152e;
    --bg3:        #281f42;
    --surface:    #302552;
    --border:     rgba(255,120,180,0.35);
    --accent:     #ff66b3;
    --accent2:    #ff99cc;
    --gold:       #ff6666;
    --silver:     #c0c0c0;
    --bronze:     #cc8866;
    --text:       #ffe6f0;
    --text-muted: #e6c2d8;
    --text-dim:   #cc9db8;
    --success:    #ff99cc;
    --error:      #ff5577;
    --board-grid-line: rgba(200,100,160,0.30);
    --board-grid-outline: rgba(200,100,160,0.40);
    --shadow:     0 4px 24px rgba(0,0,0,0.5);
}

/* ── TOUCH / TABLET SUPPORT ────────────────────────────────────────────────── */

/* Bouton de direction (→/↓) — visible sur tactile et desktop */
.dir-toggle-btn {
    font-size: 1.2rem !important;
    font-weight: 800;
    min-width: 2.5rem;
    line-height: 1;
    padding: .2rem .5rem !important;
}

.rack-side-actions-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Évite le flash gris à chaque tap (Android/Chrome) */
html {
    -webkit-tap-highlight-color: transparent;
}

/* Empêche scroll/zoom involontaire pendant l'interaction plateau + rack */
.board-grid,
.board-cell,
.rack-tile,
.rack-container,
.game-board-area {
    touch-action: manipulation;
}

/* Les :hover ne s'appliquent que sur périphériques avec vraie souris */
@media (hover: none) {
    .rack-tile:hover,
    .board-cell:hover:not(.board-cell--kbd-cursor),
    .btn:hover,
    .mode-card:hover,
    .navbar-action:hover,
    .layout-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Cibles tactiles minimales (44px) sur périphériques tactiles */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }
    .lang-choice-btn {
        min-height: 44px;
    }
    .game-tabbar-btn {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ── ACCESSIBILITÉ renforcée pour haut contraste ── */
html.highcontrast {
    font-size: 18px; /* Plus grand que la taille par défaut (17px) */
}

html.highcontrast .btn {
    min-height: 3rem; /* Touch targets plus grands */
    border-width: 3px; /* Bordures plus épaisses */
}

html.highcontrast .navbar {
    border-bottom-width: 3px;
}

html.highcontrast :focus-visible {
    outline-width: 4px;
    outline-offset: 4px;
}

html.highcontrast .board-grid {
    gap: 2px; /* Grille plus visible */
    border-width: 3px;
}

html.highcontrast .scoreboard-row--active {
    border-width: 3px;
}

/* ── BASE ── */
html { scroll-behavior: smooth; font-size: 17px; }

/* ── TAILLES DE POLICE GLOBALES (Accessibilité) ── */
html[data-font-size="50"]  { font-size: 9px; }
html[data-font-size="75"]  { font-size: 13px; }
html[data-font-size="100"] { font-size: 17px; }
html[data-font-size="125"] { font-size: 21px; }
html[data-font-size="150"] { font-size: 26px; }
html[data-font-size="175"] { font-size: 30px; }
html[data-font-size="200"] { font-size: 34px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: var(--font);
    line-height: 1.6;
    min-height:  100vh;
    transition:  background 0.3s, color 0.3s;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus pour l'accessibilité */
:focus-visible {
    outline: 3px solid var(--accent2);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ── SKIP LINKS (Accessibilité) ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: calc(var(--banner-h) + 10px);
    z-index: 9999;
    background: var(--accent);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: left 0.2s;
}

.skip-link:focus {
    left: 10px;
    outline: 3px solid var(--accent2);
    outline-offset: 2px;
}

.skip-link-secondary {
    top: calc(var(--banner-h) + 60px);
}

/* Skip links haut contraste */
html.highcontrast .skip-link {
    background: #ffff00;
    color: #000000;
    border: 3px solid #ffffff;
}

html.highcontrast .skip-link:focus {
    outline: 4px solid #00ffff;
    outline-offset: 4px;
}

/* ── ANNONCES SCREEN READER ── */
.sr-announcements {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

img { max-width: 100%; }

/* ── TYPOGRAPHY ── */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; }

.gradient-text {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: .75rem;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
    white-space: nowrap;
    min-height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 0 20px rgba(124,92,252,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(124,92,252,0.55); color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--accent2);
    border: 2px solid var(--accent);
}
.btn-outline:hover { background: rgba(124,92,252,0.1); transform: translateY(-2px); color: var(--accent2); }

.btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 2px solid var(--border);
}
:is(html.light, html.blue, html.green, html.vermillion) .btn-ghost { background: rgba(0,0,0,0.04); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); color: var(--text); }

.btn-danger {
    background: rgba(220,50,50,0.15);
    color: var(--error);
    border: 2px solid rgba(220,50,50,0.4);
}
:is(html.light, html.blue, html.green, html.vermillion) .btn-danger { background: rgba(220,50,50,0.08); }
.btn-danger:hover { background: rgba(220,50,50,0.25); transform: translateY(-1px); color: var(--error); }

/* Boutons haut contraste */
html.highcontrast .btn-primary {
    background: #ffff00;
    color: #000000;
    border: 3px solid #ffff00;
    box-shadow: none;
}
html.highcontrast .btn-primary:hover {
    background: #000000;
    color: #ffff00;
    border-color: #ffff00;
}

html.highcontrast .btn-outline {
    background: transparent;
    color: #00ffff;
    border: 3px solid #00ffff;
}
html.highcontrast .btn-outline:hover {
    background: #00ffff;
    color: #000000;
}

html.highcontrast .btn-ghost {
    background: #000000;
    color: #ffffff;
    border: 3px solid #ffffff;
}
html.highcontrast .btn-ghost:hover {
    background: #ffffff;
    color: #000000;
}

html.highcontrast .btn-danger {
    background: #000000;
    color: #ff0000;
    border: 3px solid #ff0000;
}
html.highcontrast .btn-danger:hover {
    background: #ff0000;
    color: #000000;
}

.btn-sm { padding: .45rem 1rem; font-size: .85rem; min-height: 2.5rem; }
.btn-lg { padding: .9rem 2.2rem; font-size: 1.05rem; }
.btn-icon { padding: .5rem; line-height: 1; border-radius: 50%; }

/* ── LAYOUT ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 5rem 1.5rem; }

/* ── NAVBAR ── */
.navbar {
    position: fixed;
    top: var(--banner-h); left: 0; right: 0;
    z-index: 200;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    background: rgba(13,15,26,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--border);
    gap: 1.5rem;
    transition: background 0.3s;
}

:is(html.light, html.blue, html.green, html.vermillion) .navbar {
    background: rgba(248,249,252,0.92);
}

/* Navbar haut contraste - fond noir opaque pour contraste maximal */
html.highcontrast .navbar {
    background: #000000;
    border-bottom: 3px solid #ffffff;
}

.navbar-logo {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    padding-bottom: .15rem;
}

/* Logo haut contraste - jaune vif */
html.highcontrast .navbar-logo {
    background: none;
    -webkit-text-fill-color: #ffff00;
    color: #ffff00;
}

/* ── Barre build-info sticky (page de jeu, en bas) ── */
.build-info-sticky {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    z-index: 200;
    background: #b45309;
    color: #fef3c7;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    white-space: nowrap;
    overflow: hidden;
    padding: .35rem 1rem;
}
.build-info-sticky .dev-banner-sep { opacity: .8; }

/* Build-info dans le footer standard (pages hors jeu) */
.footer-build-info {
    opacity: .85;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .03em;
}

/* Build-info haut contraste */
html.highcontrast .build-info-sticky {
    background: #000000;
    color: #ffff00;
    border-top: 3px solid #ffff00;
}
html.highcontrast .footer-build-info {
    opacity: 1;
    color: #ffff00;
}

.navbar-links {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.navbar-links a {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1.05rem;
    transition: color .15s;
    text-decoration: none;
}
.navbar-links a:hover,
.navbar-links a.active { color: var(--text); }

/* Liens navbar haut contraste - jaune vif sur fond noir */
html.highcontrast .navbar-links a {
    color: #ffffff;
    font-weight: 700;
}
html.highcontrast .navbar-links a:hover,
html.highcontrast .navbar-links a.active {
    color: #ffff00;
    text-decoration: underline;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.navbar--compact {
    top: var(--banner-h);
    gap: .9rem;
    padding: 0 .9rem;
    height: 56px;
}

.navbar--compact .navbar-logo {
    font-size: 1.1rem;
    letter-spacing: 1px;
    padding-bottom: 0;
}

.navbar--compact .navbar-actions {
    margin-left: auto;
    gap: .45rem;
}

/* ── UNIFIED NAVBAR ACTION BUTTONS ── */
/* Shared base for fullscreen, settings, auth, burger — ensures identical heights */
.navbar-action {
    min-height: 2.5rem;
    padding: .45rem .8rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--navbar-action-bg);
    color: var(--text);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.navbar-action:hover {
    border-color: var(--accent);
    background: var(--bg2);
    transform: translateY(-1px);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.navbar-action:active {
    transform: translateY(0);
}
.navbar-action.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.navbar-action--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.navbar-action--primary:hover {
    background: var(--accent2);
    border-color: var(--accent2);
    color: #fff;
    box-shadow: 0 0 16px rgba(124,92,252,0.35);
}
html.highcontrast .navbar-action {
    background: #000;
    border: 3px solid #fff;
    color: #fff;
}
html.highcontrast .navbar-action:hover {
    border-color: #ffff00;
    color: #ffff00;
    box-shadow: none;
}
html.highcontrast .navbar-action.is-active {
    background: #ffff00;
    color: #000;
    border-color: #ffff00;
    box-shadow: none;
}

/* Compact mode: icon-only, smaller */
.navbar--compact .navbar-action {
    padding: .35rem;
    min-width: 2rem;
    min-height: 2rem;
    font-size: .85rem;
}
.navbar--compact .navbar-action-label {
    display: none;
}

/* Burger: visibility control only (visuals from .navbar-action) */
.navbar-burger {
    display: none;
}

/* ── USER DROPDOWN MENU ── */
.navbar-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.navbar-user-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 11rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .35rem;
    z-index: 210;
}

.navbar-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem .75rem;
    border: none;
    background: none;
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s;
}
.navbar-user-dropdown-item:hover {
    background: var(--bg2);
    color: var(--text);
}
.navbar-user-dropdown-danger {
    color: var(--error);
}
.navbar-user-dropdown-danger:hover {
    background: rgba(239,68,68,0.12);
}

html.highcontrast .navbar-user-dropdown {
    background: #000;
    border: 3px solid #fff;
}
html.highcontrast .navbar-user-dropdown-item:hover {
    background: #1a1a1a;
    color: #ffff00;
}
html.highcontrast .navbar-user-dropdown-danger {
    color: #ff6666;
}
html.highcontrast .navbar-user-dropdown-danger:hover {
    background: #2a0000;
    color: #ff0000;
}

/* Desktop: mobile-only elements hidden */
.navbar-mobile-auth { display: none; }
.navbar-backdrop   { display: none; }

@media (max-width: 1080px) {
    .navbar-links {
        display: none;
        position: fixed;
        top: calc(var(--banner-h) + var(--nav-h));
        left: 0; right: 0;
        background: var(--bg2);
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        border-bottom: 2px solid var(--border);
        max-height: calc(100vh - var(--nav-h) - var(--banner-h));
        overflow-y: auto;
        z-index: 199;
        box-shadow: 0 8px 24px rgba(0,0,0,.2);
    }
    .navbar-links.open { display: flex; }
    .navbar-links a { padding: .85rem 2rem; display: block; }
    .navbar-burger { display: inline-flex; }

    /* Mobile: icon-only action buttons, tighter gap */
    .navbar-actions { gap: .35rem; }
    .navbar-action {
        min-width: 2.5rem;
        padding: .45rem;
        justify-content: center;
    }
    .navbar-action .navbar-action-label { display: none; }

    /* Desktop auth hidden, mobile auth shown in dropdown */
    .navbar-auth-desktop { display: none; }
    .navbar--compact .navbar-auth-desktop { display: flex; }

    .navbar-mobile-auth {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .75rem 2rem 1rem;
        margin-top: .5rem;
        border-top: 1px solid var(--border);
    }
    .navbar-mobile-auth .btn {
        width: 100%;
        justify-content: center;
        padding: .65rem 1rem;
    }
    .navbar-mobile-user {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 0;
        font-weight: 700;
        color: var(--text);
        text-decoration: none;
    }

    /* Backdrop overlay to close menu on outside click */
    .navbar-backdrop {
        display: block;
        position: fixed;
        top: calc(var(--banner-h) + var(--nav-h));
        left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.4);
        z-index: 198;
    }

    .navbar--compact { padding: 0 .6rem; }
    .navbar--compact .navbar-burger { display: none; }

    /* High-contrast adjustments */
    html.highcontrast .navbar-backdrop { background: rgba(0,0,0,.7); }
    html.highcontrast .navbar-mobile-auth { border-top-color: #ffffff; }
    html.highcontrast .navbar-links { box-shadow: none; border-bottom-width: 3px; }
}

@media (max-width: 480px) {
    .navbar-actions .board-density-control { display: none; }
}

/* ── QUICK SETTINGS PANEL ── */
.quick-settings-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* quick-settings-toggle styling now handled by .navbar-action */

.quick-settings-panel {
    position: fixed;
    top: calc(var(--banner-h) + var(--nav-h) + .75rem);
    right: 1rem;
    width: min(22rem, calc(100vw - 5rem));
    max-height: calc(100vh - (var(--banner-h) + var(--nav-h) + 2rem));
    overflow: auto;
    padding: 1rem;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateX(calc(100% + 1rem));
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}

.quick-settings-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.quick-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.quick-settings-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .85rem;
}

.quick-settings-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.quick-settings-hint {
    font-size: .8rem;
    color: var(--text-dim);
}

.quick-settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.quick-settings-layout .layout-btn {
    min-height: 2.3rem;
    white-space: normal;
    text-align: center;
    font-size: .78rem;
    line-height: 1.2;
    word-break: break-word;
}

.quick-settings-layout .layout-rack-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.quick-settings-density {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.quick-settings-group .theme-select-control,
.quick-settings-group .accessibility-control {
    width: 100%;
}

.quick-settings-group .theme-select-control {
    justify-content: space-between;
}

.quick-settings-group .theme-select,
.quick-settings-group .lang-selector {
    width: 100%;
    min-width: 0;
}

.board-scale-control {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .6rem;
}

.board-scale-slider {
    width: 100%;
    margin: 0;
}

.board-scale-value {
    min-width: 3rem;
    text-align: right;
    font-weight: 700;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .quick-settings-panel {
        right: .6rem;
        width: min(20rem, calc(100vw - 4.25rem));
    }
}

.quick-settings-full-page {
    display: block;
    text-align: center;
    margin-top: .25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s;
}
.quick-settings-full-page:hover {
    color: var(--accent);
}

/* ── THEME SELECTOR ── */
.theme-select-control {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: rgba(255,255,255,0.06);
    min-height: 2.5rem;
    cursor: pointer;
    transition: border-color .15s;
}
:is(html.light, html.blue, html.green, html.vermillion) .theme-select-control { background: rgba(0,0,0,0.04); }
.theme-select-control:hover { border-color: var(--accent); }

/* Sélecteur de thème haut contraste */
html.highcontrast .theme-select-control {
    background: #000000;
    border: 3px solid #ffffff;
    color: #ffffff;
}
html.highcontrast .theme-select-control:hover {
    border-color: #ffff00;
}

.theme-select-icon {
    font-size: .85rem;
    line-height: 1;
}

.theme-select {
    line-height: 1.2;
}

/* When inside .theme-select-control, strip the native select styling */
.theme-select-control .theme-select {
    appearance: none;
    -webkit-appearance: none;
    border: none !important;
    background: transparent;
    min-height: auto;
    padding: 0;
    width: auto;
    box-shadow: none !important;
    border-radius: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}
.theme-select-control .theme-select:hover,
.theme-select-control .theme-select:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

/* Select thème haut contraste */
html.highcontrast .theme-select-control .theme-select {
    color: #ffffff;
    font-weight: 700;
}

.board-density-control {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .3rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface);
}

.board-density-btn {
    border: 2px solid transparent;
    background: transparent;
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: .28rem .5rem;
    border-radius: 7px;
    min-width: 1.9rem;
    min-height: 1.9rem;
}

.board-density-btn:hover { background: var(--bg2); }

.board-density-btn.is-active {
    background: var(--accent);
    color: #fff;
}

/* Contrôles densité haut contraste */
html.highcontrast .board-density-control {
    background: #000000;
    border: 3px solid #ffffff;
}
html.highcontrast .board-density-btn {
    color: #ffffff;
    border: 2px solid transparent;
}
html.highcontrast .board-density-btn:hover {
    background: #1a1a1a;
    border-color: #ffff00;
}
html.highcontrast .board-density-btn.is-active {
    background: #ffff00;
    color: #000000;
    border-color: #ffff00;
}

/* board-fullscreen-btn styling now handled by .navbar-action */

.layout-btn {
    border: 2px solid var(--border);
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

:is(html.light, html.blue, html.green, html.vermillion) .layout-btn {
    background: rgba(0,0,0,0.04);
}

.layout-btn:hover {
    background: rgba(124,92,252,0.15);
    border-color: var(--accent);
    color: var(--text);
}

.layout-btn.is-active {
    background: rgba(124,92,252,0.22);
    border-color: var(--accent2);
    color: var(--text);
}

html.highcontrast .layout-btn {
    background: #000000;
    color: #ffffff;
    border: 3px solid #ffffff;
}

html.highcontrast .layout-btn:hover,
html.highcontrast .layout-btn.is-active {
    background: #ffff00;
    color: #000000;
    border-color: #ffff00;
}

.theme-select option {
    background: #ffffff;
    color: #111827;
}

html.dark .theme-select {
    color-scheme: dark;
}

html.dark .theme-select option {
    background: #0f172a;
    color: #f8fafc;
}

html.highcontrast .theme-select {
    color-scheme: dark;
}

html.highcontrast .theme-select option {
    background: #000000;
    color: #ffffff;
}

/* ── ACCESSIBILITÉ : Contrôle taille de police ── */
.accessibility-control {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--surface);
}

.font-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: .35rem .65rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: all .15s;
}

:is(html.light, html.blue, html.green, html.vermillion) .font-size-btn {
    background: rgba(0,0,0,0.04);
}

.font-size-btn:hover {
    background: rgba(124,92,252,0.15);
    border-color: var(--accent);
}

.font-size-label {
    min-width: 3rem;
    text-align: center;
    font-weight: 700;
    font-size: .85rem;
    color: var(--text-muted);
}

/* Contrôle police haut contraste */
html.highcontrast .accessibility-control {
    background: #000000;
    border: 3px solid #ffffff;
}

html.highcontrast .font-size-btn {
    background: #000000;
    color: #ffffff;
    border: 3px solid #ffffff;
}

html.highcontrast .font-size-btn:hover {
    background: #ffff00;
    color: #000000;
    border-color: #ffff00;
}

html.highcontrast .font-size-label {
    color: #ffffff;
    font-weight: 700;
}

/* ── PAGE ACCESSIBILITÉ ── */
.accessibility-settings {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.accessibility-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.accessibility-section > p {
    margin-bottom: 1.5rem;
}

.settings-grid {
    display: grid;
    gap: 1.5rem;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-item .accessibility-theme-select {
    width: 100%;
    justify-content: space-between;
}

.setting-item .accessibility-theme-select .theme-select {
    width: 100%;
    min-width: 0;
}

.setting-label {
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
}

.setting-help {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.theme-buttons,
.font-size-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.font-size-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.font-size-display {
    min-width: 4rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    padding: 0.5rem 1rem;
    background: var(--bg2);
    border-radius: var(--radius-sm);
}

.range-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

input[type="range"] {
    width: 100%;
    height: 2.5rem;
    cursor: pointer;
}

.accessibility-info ul {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.accessibility-info li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

/* Style des boutons actifs */
.font-size-presets .btn.active,
.theme-buttons .btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.font-size-presets .btn small,
.theme-buttons .btn small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Accessibilité : haut contraste */
html.highcontrast .accessibility-section {
    border-width: 3px;
    border-color: #ffffff;
}

html.highcontrast .setting-label {
    color: #ffffff;
}

html.highcontrast .font-size-display {
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.navbar--compact .board-density-control {
    padding: .18rem .25rem;
}

.navbar--compact .board-density-btn {
    font-size: .85rem;
    padding: .22rem .42rem;
}

.navbar--compact .theme-select-control {
    padding: .18rem .4rem;
}

.navbar--compact .theme-select {
    font-size: .9rem;
}

/* ── SECTION HEADER ── */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header p { color: var(--text-muted); margin-top: .5rem; font-size: 1.05rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── CARDS ── */
.card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

/* ── MODE CARDS ── */
.mode-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    border-top: 3px solid var(--card-color, var(--accent));
    text-decoration: none;
    color: var(--text);
}
.mode-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-color: var(--card-color, var(--accent)); color: var(--text); text-decoration: none; }
.mode-card.disabled { opacity: 0.65; cursor: not-allowed; filter: grayscale(15%); }
.mode-card.disabled:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--border); }

.mode-card-icon { font-size: 2rem; }
.mode-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.mode-card-head h3 { font-size: 1.15rem; }
.badge { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 20px; background: rgba(124,92,252,0.15); color: var(--accent2); letter-spacing: .5px; }
.mode-card p { color: var(--text-muted); font-size: .92rem; flex: 1; }

.modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ── LEADERBOARD TABLE ── */
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.lb-table th,
.lb-table td { padding: .75rem 1rem; text-align: left; }
.lb-table th { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.lb-table tr { transition: background .1s; }
.lb-table tbody tr:hover { background: rgba(124,92,252,0.06); }
.lb-table tbody tr.me { background: rgba(124,92,252,0.12); }

.lb-rank { font-weight: 800; font-size: 1rem; }
.lb-rank.gold   { color: var(--gold); }
.lb-rank.silver { color: var(--silver); }
.lb-rank.bronze { color: var(--bronze); }

.lb-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .85rem; color: #fff;
    flex-shrink: 0;
}

.lb-player { display: flex; align-items: center; gap: .75rem; }
.lb-name   { font-weight: 600; }
.lb-level  { font-size: .75rem; color: var(--text-dim); }
.lb-tabs   { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lb-tab    { background: var(--bg3); border: 2px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: .5rem 1.25rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .15s; }
.lb-tab:hover, .lb-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.lb-filter { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.lb-filter select { min-width: 12rem; }

/* ── HERO ── */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: calc(var(--nav-h) + 2rem) 1.5rem 3rem;
}

.hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(124,92,252,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(192,132,252,0.10) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero-inner { position: relative; max-width: 820px; width: 100%; }

/* Filigranes lettre — grands, accessibles, animation légère et étherée */
.floating-letters {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none;
    user-select: none;
    z-index: 1;
}
.fl {
    position: absolute;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 900;
    opacity: 0.35;
    animation: floatUp 18s linear infinite;
    color: var(--accent2);
    filter: blur(0.3px);
}
.fl:nth-child(3n) { animation-name: floatUpSway; }
.fl:nth-child(3n+1) { animation-name: floatUpSpin; }
@media (prefers-reduced-motion: reduce) { .fl { animation: none; opacity: 0.15; filter: none; } }

@keyframes floatUp {
    0%   { transform: translateY(100vh) rotate(-15deg); opacity: 0; }
    5%   { opacity: 0.35; }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-20vh) rotate(15deg); opacity: 0; }
}

@keyframes floatUpSway {
    0%   { transform: translateY(100vh) translateX(0) rotate(-15deg); opacity: 0; }
    5%   { opacity: 0.35; }
    50%  { transform: translateY(50vh) translateX(50px) rotate(0deg); opacity: 0.35; }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-20vh) translateX(0) rotate(15deg); opacity: 0; }
}

@keyframes floatUpSpin {
    0%   { transform: translateY(100vh) translateX(0) rotate(-15deg) scale(1); opacity: 0; }
    5%   { opacity: 0.35; }
    50%  { transform: translateY(50vh) translateX(-50px) rotate(180deg) scale(1.1); opacity: 0.35; }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-20vh) translateX(0) rotate(15deg) scale(1); opacity: 0; }
}

.hero-eyebrow { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 1rem; font-size: .85rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent2); }
.hero-eyebrow span { display: block; width: 30px; height: 1px; background: var(--accent2); opacity: .5; }

.hero-title { margin-bottom: 1.25rem; }
.hero-sub   { color: var(--text-muted); max-width: 580px; margin: 0 auto 2rem; font-size: 1.1rem; }
.hero-btns  { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats { display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap; }
.hero-stat-val { font-size: 2rem; font-weight: 900; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-stat-lab { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

/* ── WHY SECTION ── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.why-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.why-icon { font-size: 2rem; margin-bottom: .75rem; display: block; }
.why-card h3 { margin-bottom: .5rem; }
.why-card p  { color: var(--text-muted); font-size: .92rem; }

/* ── DOWNLOADS ── */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .dl-grid { grid-template-columns: 1fr; } }

.dl-platform {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.dl-platform-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.dl-platform-head h3 { font-size: 1.05rem; }
.dl-arch { font-size: .75rem; color: var(--text-dim); background: var(--bg3); padding: .2rem .6rem; border-radius: 20px; }

.dl-item { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.dl-label { font-size: .85rem; color: var(--text-muted); width: 90px; flex-shrink: 0; }
.dl-cmd-wrap { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; background: var(--bg3); border-radius: var(--radius-sm); padding: .4rem .75rem; overflow: hidden; }
.dl-cmd { font-family: monospace; font-size: .82rem; color: var(--success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.dl-copy { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1rem; flex-shrink: 0; padding: 0; border-radius: 4px; transition: color .15s; }
.dl-copy:hover { color: var(--accent2); }

.cli-commands { margin-top: 2rem; }
.cli-commands h3 { margin-bottom: 1rem; }
.cli-cmd-list { display: flex; flex-direction: column; gap: .5rem; }
.cli-cmd-row { display: flex; align-items: center; gap: 1rem; background: var(--bg2); border-radius: var(--radius-sm); padding: .65rem 1rem; flex-wrap: wrap; }
.cli-cmd-desc { color: var(--text-muted); font-size: .85rem; width: 200px; flex-shrink: 0; }
.cli-cmd-code { font-family: monospace; font-size: .85rem; color: var(--success); flex: 1; min-width: 0; }

/* ── RULES ── */
.rules-nav { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.rules-nav a { color: var(--text-muted); font-size: .9rem; padding: .4rem .75rem; border-radius: var(--radius-sm); transition: all .15s; text-decoration: none; border-left: 2px solid transparent; }
.rules-nav a:hover, .rules-nav a.active { color: var(--accent2); border-left-color: var(--accent2); background: rgba(124,92,252,0.07); }

.rules-layout { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .rules-layout { grid-template-columns: 1fr; } .rules-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

.rules-section { margin-bottom: 3rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.rules-section h2 { margin-bottom: .5rem; }
.rules-section-intro { color: var(--text-muted); margin-bottom: 1.5rem; }
.rules-rule { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.rules-rule h4 { margin-bottom: .25rem; color: var(--accent2); }
.rules-rule p  { color: var(--text-muted); font-size: .92rem; }

/* ── FOOTER ── */
footer {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 4rem 2rem 2rem;
    margin-top: 4rem;
}

.footer-grid {
    max-width: 1100px; margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand p { color: var(--text-muted); font-size: 1rem; margin-top: .75rem; max-width: 320px; }
.footer-col h4  { font-size: .95rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: .75rem; }
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.footer-col a   { color: var(--text-muted); font-size: 1rem; }
.footer-col a:hover { color: var(--text); text-decoration: none; }

.footer-bottom {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .95rem;
    flex-wrap: wrap; gap: .75rem;
}

.footer-socials { display: flex; gap: 1rem; }
.footer-socials a { font-size: 1.2rem; color: var(--text-dim); }
.footer-socials a:hover { color: var(--accent2); text-decoration: none; }

/* ── LIVE INDICATOR ── */
.live-indicator {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--text-dim);
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    animation: pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
}

/* ── FORMS & AUTH PAGES ── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 2rem) 1.5rem; }
.auth-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 460px; }
.auth-card h1 { font-size: 1.75rem; margin-bottom: 1.75rem; }
.ui-field,
.form-field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem; }

.ui-field > label,
.form-field > label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.ui-control,
.form-field :is(input, select, textarea),
.theme-select,
.lang-selector,
.lb-filter select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 2.75rem;
    padding: .62rem .9rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ui-control::placeholder,
.form-field :is(input, textarea)::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

.ui-control:hover,
.form-field :is(input, select, textarea):hover,
.theme-select:hover,
.lang-selector:hover,
.lb-filter select:hover {
    border-color: var(--accent);
}

.ui-control:focus-visible,
.form-field :is(input, select, textarea):focus-visible,
.theme-select:focus-visible,
.lang-selector:focus-visible,
.lb-filter select:focus-visible {
    outline: none;
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .35);
}

.ui-control:disabled,
.form-field :is(input, select, textarea):disabled {
    opacity: .8;
    cursor: not-allowed;
}

.ui-control.ui-control-lg { min-height: 3rem; font-size: 1.08rem; }

.theme-select,
.lang-selector {
    width: auto;
    min-width: 7.5rem;
}

.ui-help {
    color: var(--text-muted);
    font-size: .95rem;
}

.form-error {
    color: var(--error);
    font-size: .95rem;
    font-weight: 700;
}

.form-success {
    color: var(--success);
    font-size: .95rem;
    font-weight: 700;
}

.ui-checkbox,
.lang-choice input[type="checkbox"],
.action-swap input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent2);
    cursor: pointer;
}

/* ── GAME PAGES ── */
.page-hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 3rem; max-width: 1100px; margin: 0 auto; }

/* ── CHIPS / BADGES ── */
.chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 20px; }
.chip-success { background: rgba(34,197,94,.15); color: var(--success); }
.chip-warning { background: rgba(245,158,11,.15); color: var(--gold); }
.chip-danger  { background: rgba(239,68,68,.15); color: var(--error); }
.chip-muted   { background: var(--bg3); color: var(--text-dim); }
.chip-accent  { background: rgba(124,92,252,.15); color: var(--accent2); animation: chip-pulse 1.5s ease-in-out infinite; }
.chip-info    { background: rgba(59,130,246,.15); color: #3b82f6; }
:is(html.dark, html.deuteranopia, html.protanopia, html.tritanopia) .chip-info { color: #60a5fa; }

.admin-actions { display: flex; gap: .5rem; align-items: center; }

.active-games-banner {
    border-left: 4px solid var(--accent);
    background: var(--surface);
}
.active-games-banner-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem;
}
.active-games-banner-icon { font-size: 1.5rem; }
.active-games-banner-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.active-games-banner-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(124,92,252,0); }
}

/* ── EMPTY STATES ── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════
   BOARD — Plateau de jeu 15×15
   ════════════════════════════════════════════════════════ */

.board-container {
    overflow-x: auto;
    /* Densité S/M/L appliquée au plateau ; auto-fit proportionnel via vmin. */
    --board-scale: 1;
    --board-max: calc(var(--board-scale) * min(672px, 92vmin));
}

.board-grid {
    display: grid;
    grid-template-columns: calc(28px * var(--board-scale)) repeat(15, 1fr) calc(28px * var(--board-scale));
    gap: 1px;
    min-width: calc(388px * var(--board-scale));
    max-width: calc(var(--board-max) + (28px * var(--board-scale)));
    width: 100%;
    margin: 0 auto;
    background: var(--board-grid-line);
    border-radius: calc(6px * var(--board-scale));
    padding: 1px;
    box-shadow: inset 0 0 0 1px var(--board-grid-outline);
}

.board-header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(.65rem * var(--board-scale));
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 0 1px rgba(15,23,42,.2);
    text-transform: uppercase;
    height: calc(24px * var(--board-scale));
}

.board-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: calc(3px * var(--board-scale));
    font-size: calc(.75rem * var(--board-scale));
    font-weight: 700;
    text-align: center;
    line-height: 1;
    background: var(--bg3);
    color: var(--text-dim);
    position: relative;
    cursor: default;
    user-select: none;
}

/* Cases bonus */
.board-cell--tw { background: #a1799a; color: #fffafd; }
.board-cell--dw { background: #b892b0; color: #fffafd; }
.board-cell--tl { background: #6a93ad; color: #f8fcff; }
.board-cell--dl { background: #86adc2; color: #f8fcff; }
.board-cell--st { background: var(--accent); color: #fff; font-size: calc(1.1rem * var(--board-scale)); }

/* Cases bonus - thème haut contraste (avec motifs/textures pour daltoniens) */
html.highcontrast .board-cell--tw { background: #000000; border: 3px solid #ffff00; color: #ffff00; }
html.highcontrast .board-cell--dw { background: #1a1a1a; border: 2px solid #00ffff; color: #00ffff; }
html.highcontrast .board-cell--tl { background: #000000; border: 3px dashed #ff00ff; color: #ff00ff; }
html.highcontrast .board-cell--dl { background: #1a1a1a; border: 2px dashed #00ff00; color: #00ff00; }
html.highcontrast .board-cell--st { background: #000000; border: 4px solid #ffff00; color: #ffff00; font-size: calc(1.1rem * var(--board-scale)); }

/* Tuile posée — style bois verni avec marquage sombre (fer) */
.board-cell--tile {
    background:
        linear-gradient(145deg, #d8b184 0%, #c59163 40%, #ad744b 100%);
    color: #2f1b12;
    border: 2px solid #8c5a39;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, .45),
        inset 0 -2px 4px rgba(63, 36, 22, .25);
}

/* Tuiles posées — plus lumineuses avec thème clair */
:is(html.light, html.blue, html.green, html.vermillion) .board-cell--tile {
    background:
        linear-gradient(145deg, #f2dcb8 0%, #e6c896 40%, #d4ae72 100%);
    border-color: #b88a5a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -2px 4px rgba(120, 80, 50, .15),
        0 2px 4px rgba(0, 0, 0, .08);
}

:is(html.light, html.blue, html.green, html.vermillion) .tile-letter {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 1px rgba(43, 24, 15, .3);
}

/* Tuile posée - thème haut contraste */
html.highcontrast .board-cell--tile {
    background: #ffffff;
    color: #000000;
    border: 3px solid #000000;
    box-shadow: none;
}
html.highcontrast .tile-letter {
    color: #000000;
    font-weight: 900;
}
html.highcontrast .tile-val {
    color: #000000;
    font-weight: 700;
}
.tile-letter {
    font-size: calc(1.05rem * var(--board-scale));
    font-weight: 800;
    line-height: 1;
    color: #2f1b12;
    text-shadow: 0 1px 0 rgba(255, 245, 228, .35), 0 0 1px rgba(43, 24, 15, .45);
}
.tile-val {
    font-size: calc(.6rem * var(--board-scale));
    position: absolute;
    bottom: calc(2px * var(--board-scale));
    right: calc(3px * var(--board-scale));
    font-weight: 700;
    opacity: 1;
    color: #3c2417;
}

/* Tuile provisoire (drag-and-drop, non encore soumise) */
.board-cell--pending {
    background: #fef3c7;
    color: #92400e;
    border: 2px dashed #d97706;
    z-index: 2;
    cursor: grab;
}
.board-cell--pending:hover { background: #fde68a; }
.board-cell--pending:active { cursor: grabbing; }

/* Tuile sélectionnée dans un mot (glisser pour définition) */
.board-cell--word-select {
    outline: 3px solid var(--accent, #6366f1);
    outline-offset: -3px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.5),
        0 0 8px rgba(99, 102, 241, 0.4) !important;
    z-index: 3;
}

/* Compteur sac (inline, ancien style — conservé pour compatibilité) */
.bag-counter {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: .2rem .75rem;
}

/* ── En-tête principal de la partie ────────────────────── */
.game-header {
    display: flex;
    align-items: stretch;   /* le sac s'étire pour couvrir toute la hauteur */
    gap: 1rem;
    margin-bottom: .75rem;
}

.game-header-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.game-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.1;
}

.game-subtitle {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.game-header-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.game-header-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
    padding: 0 .25rem;
}

.game-turn-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg3);
    border-radius: var(--radius-sm);
    padding: .1rem .4rem;
    white-space: nowrap;
}

.game-focus-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0.9;
}

.game-name-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.debug-export-btn {
    opacity: 0.85;
    font-size: 0.8rem;
    padding: .15rem .35rem !important;
    border: 1px dashed var(--accent) !important;
    border-radius: var(--radius-sm);
}

.debug-export-btn:hover {
    opacity: 1;
}

/* Sac de lettres dans l'en-tête — aligné en hauteur avec les boutons voisins */
.letter-bag-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: .4rem .85rem;
    min-width: 72px;
    min-height: 2.5rem;
    align-self: center;
    cursor: default;
    user-select: none;
    transition: border-color .2s;
}
.letter-bag-display:hover { border-color: var(--accent); }

.letter-bag-icon {
    font-size: 1.9rem;
    line-height: 1;
}

.letter-bag-count {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.letter-bag-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-dim);
    text-transform: uppercase;
}

.letter-bag-langs {
    display: flex;
    gap: .2rem;
    margin-top: .2rem;
}

.letter-bag-langs .lang-tag {
    font-size: .85rem;
    line-height: 1;
}

/* Erreur de coup inline (près du rack) */
.move-error-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    padding: .55rem .9rem;
    background: rgba(220, 60, 60, .12);
    border: 2px solid rgba(220, 60, 60, .4);
    border-radius: var(--radius-sm);
    color: var(--error, #e44);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    animation: slideIn .2s ease;
}

.move-check-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    padding: .55rem .9rem;
    background: rgba(40, 180, 100, .12);
    border: 2px solid rgba(40, 180, 100, .4);
    border-radius: var(--radius-sm);
    color: var(--success, #2ab464);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    animation: slideIn .2s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.btn-icon-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .85;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .2rem;
    flex-shrink: 0;
}
.btn-icon-close:hover { opacity: 1; }

/* Case survol pendant le drag */
.board-cell[ondragover] { outline: 2px dashed var(--accent); }

/* ── Curseur hover (suit la souris, Phase 3) — CSS pur, zéro re-render ── */
.board-cell:hover:not(.board-cell--kbd-cursor) {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    cursor: pointer;
}
.board-cell--tile:hover:not(.board-cell--kbd-cursor),
.board-cell--pending:hover:not(.board-cell--kbd-cursor) {
    outline-color: var(--accent2);
}
html.highcontrast .board-cell:hover:not(.board-cell--kbd-cursor) {
    outline: 3px dashed #ff0;
}

/* Curseur clavier — case cible clignotante */
.board-cell--kbd-cursor {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px;
    animation: cursorBlink .7s step-end infinite;
    position: relative;
}
.board-cell--kbd-cursor::after {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--accent);
    font-weight: 800;
    font-size: 1.35rem;
    animation: cursorBlink .7s step-end infinite;
    pointer-events: none;
}
.board-cell--kbd-dir-h::after { content: '→'; }
.board-cell--kbd-dir-v::after { content: '↓'; }
.board-cell--kbd-cursor:not(.board-cell--kbd-dir-h):not(.board-cell--kbd-dir-v)::after {
    content: '|';
}

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

/* Input clavier invisible */
.keyboard-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
    outline: none;
}

/* Puce "Mode clavier" dans le rack */
.kbd-mode-chip {
    font-size: .75rem !important;
    padding: .15rem .5rem !important;
}

/* Aide clavier */
.kbd-hint {
    font-size: .78rem;
    color: var(--text-dim);
    margin: .25rem 0 .15rem;
    padding: .3rem .5rem;
    background: var(--bg2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}

.board-label { font-size: calc(.6rem * var(--board-scale)); text-transform: uppercase; letter-spacing: .5px; opacity: .9; }

/* ════════════════════════════════════════════════════════
   RACK — Tuiles du joueur
   ════════════════════════════════════════════════════════ */

.rack-container {
    display: flex;
    gap: .6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    padding: .5rem .75rem;
    background: var(--bg2);
    border-radius: var(--radius);
    border: 2px solid var(--border);
    min-height: 76px;
    scrollbar-width: thin;
}

.rack-tile {
    width: 60px;
    height: 68px;
    flex-shrink: 0;
    background:
        linear-gradient(145deg, #ddb98e 0%, #c8986c 42%, #b27a4f 100%);
    color: #2f1b12;
    border-radius: 6px;
    border: 2px solid #8d5d3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 800;
    font-size: 1.5rem;
    cursor: default;
    box-shadow:
        0 3px 6px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255, 246, 232, 0.5),
        inset 0 -2px 4px rgba(66, 37, 23, 0.2);
    transition: transform .12s ease;
    user-select: none;
    text-shadow: 0 1px 0 rgba(255, 245, 228, .35), 0 0 1px rgba(43, 24, 15, .45);
}
.rack-tile:hover { transform: translateY(-5px); }
.rack-tile--joker { background: #f0fdf4; color: #166534; border-color: #86efac; }

/* Tuiles rack — plus lumineuses avec thème clair */
:is(html.light, html.blue, html.green, html.vermillion) .rack-tile {
    background:
        linear-gradient(145deg, #f0dab5 0%, #e2c498 42%, #d0aa78 100%);
    border-color: #b88a5a;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(120, 80, 50, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 1px rgba(43, 24, 15, .3);
}

:is(html.light, html.blue, html.green, html.vermillion) .rack-tile--joker {
    background: #f5fff8;
    border-color: #a8f5c0;
}

/* Tuiles rack - thème haut contraste */
html.highcontrast .rack-tile {
    background: #ffffff;
    color: #000000;
    border: 3px solid #000000;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}
html.highcontrast .rack-tile:hover {
    transform: none;
    border-color: #ffff00;
}
html.highcontrast .rack-tile--joker {
    background: #000000;
    color: #ffff00;
    border: 3px solid #ffff00;
}
html.highcontrast .rack-tile-val {
    color: #000000;
    font-weight: 700;
}
html.highcontrast .rack-tile--used {
    opacity: 0.5;
    background: #333333;
    color: #cccccc;
}

.rack-tile-val {
    font-size: .7rem;
    position: absolute;
    bottom: 4px;
    right: 5px;
    font-weight: 700;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rack-tile { transition: none; }
    .rack-tile:hover { transform: none; }
}

/* Tuile rack déjà posée provisoirement */
.rack-tile--used {
    opacity: .35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* Tuile rack sélectionnée (click-to-place) */
.rack-tile--selected {
    outline: 3px solid var(--accent, #d97706);
    outline-offset: 2px;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(217,119,6,.4);
}

html.highcontrast .rack-tile--selected {
    outline: 4px solid #fff;
}

/* ════════════════════════════════════════════════════════
   JOKER PICKER — Sélection de lettre pour un joker
   ════════════════════════════════════════════════════════ */

.joker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.joker-picker {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.joker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
    margin: .75rem 0;
}

.joker-btn {
    aspect-ratio: 1;
    background: var(--bg3);
    border: 2px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: background .1s, transform .1s;
}
.joker-btn:hover { background: var(--accent); color: #fff; transform: scale(1.1); }
.joker-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════
   SCOREBOARD — Tableau des scores
   ════════════════════════════════════════════════════════ */

.scoreboard { display: flex; flex-direction: column; gap: .5rem; }

.scoreboard-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--bg2);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    border: 2px solid transparent;
    transition: border-color .15s;
}
.scoreboard-row--active { border-color: var(--accent2); background: rgba(124,92,252,0.1); }
.scoreboard-row--abandoned { opacity: .75; }

/* ── Abandon notice & spectator banner ── */
.abandon-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(220,120,0,.14);
    border: 2px solid rgba(220,120,0,.3);
    color: var(--text);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    margin-bottom: .75rem;
    font-size: .9rem;
}
.abandon-notice-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1rem;
    padding: 0 .25rem;
}
.spectator-banner {
    background: rgba(100,100,100,.12);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: var(--text-dim);
    text-align: center;
}

.scoreboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.scoreboard-name { font-weight: 600; font-size: .95rem; }
.scoreboard-score { font-size: 1.05rem; font-weight: 700; color: var(--accent2); white-space: nowrap; }
.scoreboard-rack-count { font-size: .72rem; color: var(--text-dim); }
.scoreboard-timer { font-size: 1rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scoreboard-timer--low { color: var(--error, #ef4444); animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ════════════════════════════════════════════════════════
   CREATE GAME — Cartes de mode et pills de temps
   ════════════════════════════════════════════════════════ */

.create-mode-cards { display: flex; gap: .75rem; flex-wrap: wrap; }
.create-mode-cards--pace .create-mode-card { flex: 1 1 0; min-width: 140px; }

.create-mode-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .85rem 1rem;
    border-radius: .75rem;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    flex: 1 1 180px;
    min-width: 0;
    transition: border-color .15s, background .15s, transform .1s;
}
.create-mode-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.create-mode-card.is-selected {
    border-color: var(--accent2);
    background: rgba(124,92,252,.10);
}
.create-mode-card-icon { font-size: 1.4rem; }
.create-mode-card-label { font-weight: 700; font-size: .95rem; }
.create-mode-card-desc { font-size: .78rem; color: var(--text-dim); }

.blitz-time-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.blitz-time-pill {
    padding: .45rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    transition: border-color .15s, background .15s;
}
.blitz-time-pill:hover { border-color: var(--accent2); }
.blitz-time-pill.is-selected {
    border-color: #f59e0b;
    background: rgba(245,158,11,.12);
    color: #f59e0b;
}

/* ════════════════════════════════════════════════════════
   GAME LAYOUT — Grille partie en cours
   ════════════════════════════════════════════════════════ */

.game-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    --board-inline-max: calc(var(--board-scale, 1) * min(672px, 92vmin));
    --board-grid-max: calc(var(--board-inline-max) + (28px * var(--board-scale, 1)));
    grid-template-columns: 1fr 384px;
    /* Variante A (défaut) : plateau gauche, rack dessous, sidebar droite */
    grid-template-areas:
        "board side"
        "rack  side";
}
.game-board-area { grid-area: board; }
.game-rack-area  { grid-area: rack; }
.game-sidebar    { grid-area: side; }

/* Variante B : miroir (sidebar gauche, plateau droite, rack dessous) */
.game-layout[data-variant="b"] {
    grid-template-columns: 384px 1fr;
    grid-template-areas:
        "side board"
        "side rack";
}
/* Variante C : rack au-dessus du plateau, sidebar droite */
.game-layout[data-variant="c"] {
    grid-template-areas:
        "rack  side"
        "board side";
}
/* Variante D : plateau à droite, rack au-dessus (miroir de C) */
.game-layout[data-variant="d"] {
    grid-template-columns: 384px 1fr;
    grid-template-areas:
        "side rack"
        "side board";
}
@media (max-width: 1024px) {
    .game-layout { grid-template-columns: 1fr 336px; }
    .game-layout[data-variant="b"],
    .game-layout[data-variant="d"] { grid-template-columns: 336px 1fr; }
}
@media (max-width: 800px) {
    .game-layout,
    .game-layout[data-variant="b"],
    .game-layout[data-variant="c"],
    .game-layout[data-variant="d"] {
        grid-template-columns: 1fr;
        grid-template-areas: "board" "rack" "side";
    }
}

/* Zone plateau + rack */
.game-board-area {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.game-focus-actions {
    display: none;
    margin-bottom: .35rem;
    padding: .35rem .55rem !important;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
}

/* ── Mode focus (auto-fit) : exploiter l'espace de la fenêtre ── */
.page-wrapper--game-focus .main-content--game-focus {
    min-height: calc(100vh - 56px - 28px);
}

.page-wrapper--game-focus .game-page {
    padding: .25rem .5rem 1rem !important;
}

.page-wrapper--game-focus .game-page .container {
    max-width: min(98vw, 1650px);
    padding: 0 .35rem;
}

.page-wrapper--game-focus .game-page .game-header {
    display: none;
}

.page-wrapper--game-focus .game-focus-actions {
    display: flex;
}

.page-wrapper--game-focus .game-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: .85rem;
    align-items: start;
}
.page-wrapper--game-focus .game-layout[data-variant="b"] {
    grid-template-columns: 360px minmax(0, 1fr);
}
.page-wrapper--game-focus .game-layout[data-variant="d"] {
    grid-template-columns: 360px minmax(0, 1fr);
}

/* Plein écran : sidebar plus étroite, plateau maxi */
.page-wrapper--fullscreen .game-layout {
    grid-template-columns: minmax(0, 1fr) 336px;
}
.page-wrapper--fullscreen .board-container {
    --board-max: calc(var(--board-scale) * min(900px, 96vmin));
}
.page-wrapper--fullscreen .game-layout {
    --board-inline-max: calc(var(--board-scale, 1) * min(900px, 96vmin));
}

.page-wrapper--game-focus .rack-below-board,
.page-wrapper--game-focus .game-layout > div:last-child .card {
    padding: .8rem .9rem !important;
}

@media (max-width: 980px) {
    .page-wrapper--game-focus .game-layout {
        grid-template-columns: minmax(0, 1fr) 324px;
        gap: .65rem;
    }
}

/* Sidebar : pile verticale (paysage) */
.game-rack-area { min-width: 0; }

/* Rack sous/au-dessus du plateau (A, B, C) : aligné à la largeur du plateau, centré */
.game-layout[data-variant="a"] .game-rack-area,
.game-layout[data-variant="b"] .game-rack-area,
.game-layout[data-variant="c"] .game-rack-area,
.game-layout[data-variant="d"] .game-rack-area {
    max-width: var(--board-grid-max);
    width: 100%;
    margin: 0 auto;
}
.game-layout[data-variant="a"],
.game-layout[data-variant="b"],
.game-layout[data-variant="c"],
.game-layout[data-variant="d"] {
    row-gap: 0;
}


.page-wrapper--game-focus .game-layout[data-variant="a"],
.page-wrapper--game-focus .game-layout[data-variant="b"],
.page-wrapper--game-focus .game-layout[data-variant="c"] {
    row-gap: 0;
}

.game-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Barre d'onglets : cachée hors mono-colonne */
.game-tabbar { display: none; }

/* Portrait / fenêtre étroite : mono-colonne, plateau pleine largeur */
@media (max-width: 800px) {
    .page-wrapper--game-focus .game-layout {
        grid-template-columns: 1fr;
    }
    .page-wrapper--game-focus .board-container {
        --board-max: calc(var(--board-scale) * min(672px, 96vw));
    }
    .page-wrapper--game-focus .game-layout {
        --board-inline-max: calc(var(--board-scale, 1) * min(672px, 96vw));
    }
    .page-wrapper--game-focus .game-page {
        padding: .25rem .25rem 4.5rem !important;
    }

    /* Onglets escamotables : un seul panneau visible à la fois */
    .page-wrapper--game-focus .game-sidebar { gap: .75rem; }
    .page-wrapper--game-focus .game-sidebar .sidebar-panel { display: none; }
    .page-wrapper--game-focus .game-sidebar[data-active-tab="play"] .sidebar-panel[data-tab="play"],
    .page-wrapper--game-focus .game-sidebar[data-active-tab="scores"] .sidebar-panel[data-tab="scores"],
    .page-wrapper--game-focus .game-sidebar[data-active-tab="messages"] .sidebar-panel[data-tab="messages"] {
        display: block;
    }

    /* Barre d'onglets fixe en bas */
    .page-wrapper--game-focus .game-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        gap: .25rem;
        padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 2px solid var(--border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }
    .game-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .1rem;
        padding: .35rem .25rem;
        border: none;
        background: transparent;
        color: var(--text-dim);
        font-size: .72rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: 8px;
    }
    .game-tab-icon { font-size: 1.15rem; line-height: 1; }
    .game-tab.is-active { background: var(--bg2); color: var(--accent); }
}

.letter-bag-display--compact {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .2rem .5rem;
    gap: .3rem;
    min-height: 2.5rem;
    min-width: auto;
    border-radius: 999px;
}

.letter-bag-display--compact .letter-bag-icon {
    font-size: .9rem;
}

.letter-bag-display--compact .letter-bag-count {
    font-size: .95rem;
    line-height: 1;
}

.letter-bag-display--compact .letter-bag-label {
    font-size: .68rem;
    line-height: 1;
}

/* Card rack sous le plateau */
.rack-below-board {
    padding: .75rem 1rem !important;
}

.rack-below-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.rack-title-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
}
.rack-title-row h3 { margin: 0; }

.rack-recall-btn {
    font-size: .8rem !important;
    padding: .2rem .6rem !important;
}

.rack-below-header h3 { margin: 0; }

.action-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}
.action-panel-header h3 { margin: 0; }

.action-panel {
    padding: .65rem .8rem !important;
}
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-bottom: .5rem;
}

.action-swap {
    display: grid;
    gap: .4rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--border);
}

.action-swap input[type="text"] {
    background: var(--bg3);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .8rem;
    color: var(--text);
    font-size: .9rem;
    width: 100%;
}

.ui-control option,
.theme-select option,
.lang-selector option,
.lb-filter select option {
    color: #111827;
    background: #ffffff;
    font-size: 1rem;
}

.game-messages-panel {
    min-height: 122px;
}

.game-messages-panel .abandon-notice,
.game-messages-panel .move-check-inline,
.game-messages-panel .move-error-inline {
    margin-top: 0;
}

.game-messages-panel > :not(:first-child) {
    margin-top: .5rem;
}

/* ════════════════════════════════════════════════════════
   LOBBY — Salle d'attente
   ════════════════════════════════════════════════════════ */

.lobby-page {
    max-width: 580px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 2rem) 1.5rem 4rem;
}

.lobby-code {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
}
.lobby-code-value {
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 2px;
    flex: 1;
    color: var(--accent2);
    word-break: break-all;
}

.lobby-slots { color: var(--text-dim); font-size: .85rem; margin-bottom: 1rem; }

.lobby-player-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }

.lobby-player-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}
.lobby-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Utilitaires game ── */
.fw-600 { font-weight: 600; }
.flex-col { flex-direction: column; }
.mt-3 { margin-top: 1rem; }


/* ── SECTION BG ALTERNATION ── */
.bg2 { background: var(--bg2); }

/* ── UTILITY ── */
.text-muted   { color: var(--text-muted); }
.text-dim     { color: var(--text-dim); }
.text-center  { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.flex   { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Panneau suggestions ── */
.suggest-panel { padding: 1rem; }
.suggest-section { margin-top: .75rem; }
.suggest-section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    margin: 0 0 .4rem;
}
.suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    margin-bottom: .35rem;
}
.suggest-item:last-child { margin-bottom: 0; }
.suggest-item-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.suggest-word {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .03em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-meta { font-size: .75rem; color: var(--text-dim); white-space: nowrap; }
.suggest-use-btn { flex-shrink: 0; font-size: .75rem; padding: .3rem .6rem; }
.dictionary-search { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .85rem; }
.dictionary-search-form { display: flex; gap: .5rem; margin-bottom: .45rem; }
.dictionary-search-input {
    width: 100%;
    min-width: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .45rem .55rem;
    background: var(--surface);
    color: var(--text);
}
.dictionary-search-results {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-height: 8.5rem;
    overflow: auto;
}
.dictionary-word-btn { padding: .3rem .55rem; font-size: .78rem; }

/* ── STATUS DASHBOARD ──────────────────────────────────────────────────────── */
.status-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.status-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-card-header {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.status-card-header h3 {
    flex: 1;
    font-size: 1rem;
    margin: 0;
}
.status-card-icon { font-size: 1.4rem; line-height: 1; }

.status-metrics {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .88rem;
    padding: .25rem 0;
    border-bottom: 1px solid var(--border);
}
.metric:last-child { border-bottom: none; }
.metric.highlight { background: rgba(124,92,252,.07); border-radius: var(--radius-sm); padding: .4rem .5rem; border-bottom: none; margin-bottom: .2rem; }

.metric-label { color: var(--text-muted); white-space: nowrap; }
.metric-value { font-weight: 600; color: var(--text); text-align: right; }
.metric-value.big { font-size: 1.5rem; font-weight: 700; color: var(--accent); }

.text-error { color: var(--error, #ef4444); }

/* Popup définitions/synonymes d'un mot du plateau */
.word-info-popup {
  margin-top: .75rem;
  padding: .75rem 1rem;
  border: 2px solid var(--border, #ccc);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  max-width: 100%;
}

/* ── Overlay modal définition (flottant au-dessus du plateau) ── */
.word-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.word-info-modal {
    padding: 1rem 1.25rem;
    border: 2px solid var(--border, #ccc);
    border-radius: 12px;
    background: var(--surface, #fff);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    max-height: 70vh;
    overflow-y: auto;
    animation: word-info-pop .15s ease-out;
}

@keyframes word-info-pop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
.word-info-header { display: flex; align-items: center; gap: .5rem; }
.word-info-header strong { font-size: 1.1rem; text-transform: uppercase; }
.word-info-header .word-info-link { font-size: .8rem; }
.word-info-header button { margin-left: auto; }
.word-info-defs { margin: .5rem 0 .25rem 1.1rem; padding: 0; }
.word-info-defs li { margin-bottom: .25rem; }
.word-info-syns { font-size: .85rem; margin: .25rem 0 0; }
.lang-choices { display: flex; gap: 1rem; flex-wrap: wrap; }
.lang-choice { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.lang-choice-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.lang-choice-btn:hover {
    border-color: var(--accent2);
}
.lang-choice-btn.is-selected {
    border-color: var(--accent2);
    background: rgba(124,92,252,.12);
}
.lang-choice-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.lang-choice-mark {
    font-size: .95rem;
    line-height: 1;
}

/* Game language badges */
.game-langs { display: flex; gap: .35rem; align-items: center; margin-top: .25rem; flex-wrap: wrap; }
.lang-tag { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 20px; background: var(--bg3); color: var(--text-dim); letter-spacing: .04em; user-select: none; }
.game-langs--compact { margin: 0; align-self: center; }

/* Dictionary language picker */
.dict-lang-selector { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.dict-lang-selector .lang-choice-btn { padding: .2rem .5rem; font-size: .8rem; }

/* ─ Llamo Watermark ─ */
.llamo-watermark {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 350px;
    height: 350px;
    background-image: url('/assets/images/playalama/llamo.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

/* Dark theme: use lighten to make llamo visible on dark background */
html.dark .llamo-watermark {
    mix-blend-mode: lighten;
    opacity: 0.30;
}

/* Light theme: keep multiply */
html.light .llamo-watermark {
    mix-blend-mode: multiply;
}

/* Reduce Llamo intensity on game page */
.page-wrapper--game-focus .llamo-watermark {
    opacity: 0.15;
}

html.dark .page-wrapper--game-focus .llamo-watermark {
    opacity: 0.18;
}

@media (max-width: 768px) {
    .llamo-watermark {
        width: 200px;
        height: 200px;
        opacity: 0.18;
    }
    
    html.dark .llamo-watermark {
        opacity: 0.22;
    }
}

@media (max-width: 480px) {
    .llamo-watermark {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════
   MODE COMPACT — disposition condensée, rack latéral (applicable sur tous les thèmes)
   ════════════════════════════════════════════════════════ */

/* Rack latéral : caché par défaut, visible uniquement en compact */
.game-sidebar-rack {
    display: none;
}

/* ── Layout : cacher le rack principal, activer le rack latéral ── */
/* ── Rack haut/bas caché : le rack vit uniquement dans la sidebar ── */
html[data-density="compact"] .game-rack-area {
    display: none;
}

html[data-density="compact"] .game-sidebar-rack {
    display: block;
}

/* Cacher les commandes "rack haut/bas" (sans objet en compact) */
html[data-density="compact"] .layout-rack-controls {
    display: none;
}

/* Layout compact : 2 colonnes uniquement (plateau + sidebar), plus de rang rack */
html[data-density="compact"] .game-layout {
    grid-template-columns: 1fr 560px;
    grid-template-areas:
        "board side";
}

html[data-density="compact"] .game-layout[data-variant="b"],
html[data-density="compact"] .game-layout[data-variant="d"] {
    grid-template-columns: 560px 1fr;
    grid-template-areas:
        "side board";
}

@media (max-width: 1024px) {
    html[data-density="compact"] .game-layout { grid-template-columns: 1fr 500px; }
    html[data-density="compact"] .game-layout[data-variant="b"],
    html[data-density="compact"] .game-layout[data-variant="d"] { grid-template-columns: 500px 1fr; }
}

/* ── Plateau aligné tout en haut, aligné sur le haut du rack latéral ── */
html[data-density="compact"] .game-board-area {
    align-self: start;
    padding-top: 0;
    margin-top: 0;
}

html[data-density="compact"] .game-sidebar {
    align-self: start;
}

/* ── Tuiles du rack compactes + lisibles ── */
html[data-density="compact"] .rack-tile {
    width: 64px;
    height: 74px;
    font-size: 2rem;             /* lettres plus grandes */
    border-radius: 6px;
    background:
        linear-gradient(145deg, #e8c39a 0%, #d4a878 42%, #c08c5c 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 246, 232, 0.5);
}

html[data-density="compact"] .rack-tile-val {
    font-size: 1rem;             /* points plus visibles */
    bottom: 4px;
    right: 5px;
    font-weight: 800;
}

html[data-density="compact"] .rack-tile--joker {
    background: #e6f9ec;        /* fond éclairci pour contraste */
    color: #14532d;
    border-color: #86efac;
}

/* ── Rack latéral : largeur suffisante pour 7 tuiles sur une ligne ── */
html[data-density="compact"] .game-sidebar-rack .rack-container {
    gap: .35rem;
    padding: .35rem .5rem;
    min-height: 64px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
}

html[data-density="compact"] .rack-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

html[data-density="compact"] .rack-side-header h3 {
    margin: 0;
    font-size: .9rem;
}

html[data-density="compact"] .rack-side-actions {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
}

html[data-density="compact"] .rack-side-validate {
    flex: 1;
    padding: .5rem .8rem;
    font-size: 1rem;
    font-weight: 700;
    min-height: 2.5rem;
}

/* ── Espacement réduit global ── */
html[data-density="compact"] .game-layout {
    gap: .75rem;
}

html[data-density="compact"] .game-board-area {
    padding: .5rem;
    gap: .35rem;
}

html[data-density="compact"] .game-sidebar {
    gap: .5rem;
}

html[data-density="compact"] .card {
    padding: .5rem .65rem;
}

html[data-density="compact"] .btn {
    padding: .25rem .55rem;
    font-size: .85rem;
    min-height: 2rem;
}

html[data-density="compact"] .btn-sm {
    padding: .18rem .4rem;
    font-size: .78rem;
    min-height: 1.7rem;
}

html[data-density="compact"] h3 {
    font-size: .95rem;
}

html[data-density="compact"] .sidebar-panel {
    padding: .5rem .65rem;
}

/* ── Responsive : garder le rack latéral sur tablette, retomber sur rack dessous sur mobile ── */
@media (max-width: 800px) {
    html[data-density="compact"] .game-rack-area {
        display: block;
    }
    html[data-density="compact"] .game-sidebar-rack {
        display: none;
    }
}

/* ── Compact: éviter le chevauchement des indicateurs/boutons ── */
html[data-density="compact"] .game-focus-actions {
    flex-wrap: wrap;
    gap: .5rem;
}

html[data-density="compact"] .game-focus-actions .game-header-info {
    margin-left: 0;
    gap: .35rem;
}

html[data-density="compact"] .game-focus-title {
    font-size: .82rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-density="compact"] .game-header {
    gap: .65rem;
    flex-wrap: wrap;
}

html[data-density="compact"] .game-header-right {
    gap: .35rem;
}

html[data-density="compact"] .game-header-info {
    gap: .35rem;
}

html[data-density="compact"] .letter-bag-display--compact {
    gap: .25rem;
    padding: .15rem .4rem;
}

html[data-density="compact"] .letter-bag-display--compact .letter-bag-langs {
    gap: .15rem;
}

html[data-density="compact"] .sidebar-panel {
    gap: .3rem;
}

html[data-density="compact"] .rack-side-actions {
    gap: .3rem;
}

/* ── INFO TOOLTIP (composant réutilisable) ─────────────────────────────────── */
.info-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.info-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-size: .68rem;
    font-weight: 700;
    cursor: help;
    user-select: none;
    transition: background .15s, color .15s;
}
.info-tooltip-trigger:hover,
.info-tooltip-trigger:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
}
.info-tooltip {
    position: absolute;
    z-index: 500;
    width: max-content;
    max-width: 220px;
    padding: .4rem .65rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s;
    pointer-events: none;
}
.info-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}
.info-tooltip--top    { bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); }
.info-tooltip--bottom { top: calc(100% + .4rem);    left: 50%; transform: translateX(-50%); }
.info-tooltip--left   { right: calc(100% + .4rem);  top: 50%;  transform: translateY(-50%); }
.info-tooltip--right  { left: calc(100% + .4rem);   top: 50%;  transform: translateY(-50%); }
html.highcontrast .info-tooltip-trigger {
    background: #000; color: #ff0; border-color: #ff0;
}
html.highcontrast .info-tooltip {
    background: #000; color: #ff0; border-color: #ff0;
}

/* ── HOW-TO-PLAY STRIP (bandeau repliable) ─────────────────────────────────── */
.how-to-strip {
    margin-bottom: .5rem;
}
.how-to-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-dim);
    padding: .25rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.how-to-toggle:hover { border-color: var(--accent); color: var(--accent); }
.how-to-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .4rem;
    padding: .6rem .8rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    position: relative;
}
.how-to-step {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--text);
}
.how-to-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .72rem;
    flex-shrink: 0;
}
.how-to-close {
    position: absolute;
    top: .35rem;
    right: .4rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: .85rem;
    cursor: pointer;
    line-height: 1;
    padding: .15rem .3rem;
}
.how-to-close:hover { color: var(--text); }
html.highcontrast .how-to-content { background: #000; border-color: #ff0; }
html.highcontrast .how-to-step-num { background: #ff0; color: #000; }

/* ── FIRST-MOVE HINT (indicateur centre ★) ─────────────────────────────────── */
.first-move-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .35rem .6rem;
    margin-bottom: .4rem;
    background: rgba(99,102,241, .12);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}
.first-move-arrow {
    font-size: 1rem;
    animation: firstMoveBounce 1s ease-in-out infinite;
}
@keyframes firstMoveBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(.25rem); }
}
html.highcontrast .first-move-hint { background: #000; color: #ff0; border-color: #ff0; }

/* ── RACK HINT TEXT ────────────────────────────────────────────────────────── */
.rack-hint-text {
    font-size: .75rem;
    color: var(--text-dim);
    font-style: italic;
}

/* ── BOARD KEYBOARD MODE (Phase 2) ─────────────────────────────────────────── */
.game-board-area[tabindex] {
    outline: none;
}
.game-board-area.kbd-active[tabindex]:focus-visible,
.game-board-area.kbd-active[tabindex]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
html.highcontrast .game-board-area.kbd-active:focus-visible {
    outline: 3px solid #ff0;
}