* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #050508; font-family: 'Segoe UI', Arial, sans-serif; color: white; user-select: none; }
canvas { display: block; }

/* Interface UI */
.screen {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background: rgba(5,5,8,0.95); z-index: 10;
    padding: clamp(10px, 4vw, 30px);
    overflow-y: auto;
}
.hidden { display: none !important; }

h1 {
    font-size: clamp(1.6rem, 6vw, 4rem);
    margin: 0 0 4px 0;
    color: #00ffff; text-shadow: 0 0 15px #00ffff;
    text-transform: uppercase; letter-spacing: 2px;
    font-style: italic; text-align: center;
}
h2 {
    color: #ff0055; text-shadow: 0 0 15px #ff0055;
    font-size: clamp(1.4rem, 5vw, 3rem);
    margin: 0 0 10px 0; text-align: center;
}

button {
    background: linear-gradient(45deg, #00ffff, #0088ff);
    color: #000; border: none;
    padding: clamp(9px, 2vw, 15px) clamp(18px, 5vw, 40px);
    font-size: clamp(0.78rem, 2.5vw, 1.1rem);
    font-weight: bold; cursor: pointer;
    margin: clamp(3px, 1vw, 10px); border-radius: 4px;
    transition: all 0.2s; text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
    white-space: nowrap;
}
button:hover { transform: translateY(-2px); box-shadow: 0 0 25px #00ffff; }
button:disabled { background: #222; color: #555; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-secondary { background: #222; color: #fff; box-shadow: none; border: 1px solid #444; }
.btn-secondary:hover { background: #333; box-shadow: 0 0 10px rgba(255,255,255,0.2); }

.panel {
    background: rgba(255,255,255,0.03); border: 1px solid #333;
    padding: clamp(12px, 3vw, 25px);
    border-radius: 8px; text-align: center;
    margin-bottom: clamp(8px, 2vw, 20px);
    width: min(420px, 90vw);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.stat-row {
    display: flex; justify-content: space-between; align-items: center;
    margin: clamp(8px, 2vw, 20px) 0;
    border-bottom: 1px solid #222;
    padding-bottom: clamp(8px, 2vw, 15px);
    gap: 10px;
}
.stat-info { text-align: left; min-width: 0; }
.stat-name { font-weight: bold; font-size: clamp(0.85rem, 2.5vw, 1.1rem); color: #fff; }
.stat-desc { font-size: clamp(0.72rem, 2vw, 0.85rem); color: #888; margin-top: 2px; }

#hud {
    position: absolute; top: 12px; left: 12px; right: 12px;
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
    z-index: 5; font-weight: bold;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.hud-item {
    background: rgba(5,5,8,0.8);
    padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 20px);
    border-radius: 4px; border: 1px solid #222;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    white-space: nowrap;
}
.gold-text { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.4); }

/* ===== PHANTOM ABILITY HUD ===== */
#hudPhantomItem {
    display: none;
    background: rgba(5,5,8,0.85);
    border: 1px solid #334;
    border-radius: 4px;
    padding: clamp(5px, 1.5vw, 10px) clamp(8px, 2vw, 16px);
    font-size: clamp(0.7rem, 2.2vw, 1rem);
    font-weight: bold;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#hudPhantomItem.ready {
    border-color: #aaddff;
    box-shadow: 0 0 12px rgba(170,221,255,0.4);
    animation: phantomPulse 1.8s ease-in-out infinite;
}
#hudPhantomItem.active {
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255,255,255,0.7);
    animation: phantomFlicker 0.15s linear infinite;
}
#hudPhantomItem.cooldown { border-color: #334; opacity: 0.6; }
@keyframes phantomPulse { 0%,100%{box-shadow:0 0 8px rgba(170,221,255,0.3)} 50%{box-shadow:0 0 20px rgba(170,221,255,0.7)} }
@keyframes phantomFlicker { 0%,100%{opacity:1} 50%{opacity:0.6} }
#phantomBarWrap { width: clamp(50px, 12vw, 90px); height: 5px; background: #1a1a2e; border-radius: 3px; overflow: hidden; }
#phantomBar { height: 100%; background: #aaddff; border-radius: 3px; transition: width 0.1s; box-shadow: 0 0 6px #aaddff; }

/* Bouton mobile fantôme */
#phantomTouchBtn {
    position: fixed;
    bottom: calc(43vh + env(safe-area-inset-bottom, 0px) + 8px);
    left: 5%;
    z-index: 9;
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(170,221,255,0.45);
    background: rgba(170,221,255,0.08);
    font-size: 1.8rem;
    display: none;
    align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
#phantomTouchBtn.show { display: flex; }
#phantomTouchBtn.pressed { background: rgba(170,221,255,0.3); border-color: #fff; }
#phantomTouchBtn.active-ability { animation: phantomFlicker 0.15s linear infinite; border-color: #fff; }
#phantomTouchBtn.cooldown-btn { opacity: 0.35; }

/* ===== PREVIEW OVERLAY ===== */
#skinPreviewOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 5, 0.96);
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 28px);
    gap: clamp(10px, 2.5vw, 18px);
}
#skinPreviewOverlay.show { display: flex; }

#previewHeader { text-align: center; }
#previewTitle  { font-size: clamp(1.1rem, 4vw, 1.7rem); font-weight: bold; letter-spacing: 2px; margin: 0 0 4px 0; text-transform: uppercase; }
#previewDesc   { color: #777; font-size: clamp(0.72rem, 2vw, 0.88rem); margin: 0; }

#previewCanvas { border-radius: 8px; border: 1px solid #1a1a28; display: block; max-width: 100%; }

#previewAbilityBox {
    display: none;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    padding: clamp(8px, 2vw, 12px) clamp(14px, 3vw, 22px);
    border-radius: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.preview-hud-pill {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(170,221,255,0.5);
    background: rgba(170,221,255,0.07);
    border-radius: 5px;
    padding: 8px 16px;
    font-size: clamp(0.78rem, 2.2vw, 0.95rem);
    animation: phantomPulse 1.8s ease-in-out infinite;
}
.preview-hud-pill .pbar-wrap { width: 60px; height: 4px; background: #1a1a3a; border-radius: 3px; overflow: hidden; }
.preview-hud-pill .pbar      { width: 100%; height: 100%; background: #aaddff; border-radius: 3px; box-shadow: 0 0 5px #aaddff; }
.preview-key-hint { font-size: clamp(0.7rem, 1.8vw, 0.82rem); color: #555; letter-spacing: 0.5px; text-align: center; }

#previewStatusBadge {
    font-size: clamp(0.72rem, 2vw, 0.85rem);
    padding: 5px 14px; border-radius: 4px;
    border: 1px solid #333; color: #888;
    background: #0a0a12;
}
#previewStatusBadge.owned    { border-color: #00ff88; color: #00ff88; }
#previewStatusBadge.equipped { border-color: #ffd700; color: #ffd700; }

.btn-preview {
    background: #0d0d16; color: #888; border: 1px solid #333;
    font-size: clamp(0.68rem, 1.8vw, 0.8rem);
    padding: 6px 11px; margin: 0; border-radius: 4px;
    white-space: nowrap; cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-preview:hover { color: #ccc; border-color: #555; transform: none; box-shadow: none; background: #0d0d16; }

/* Ancien bouton son – masqué, remplacé par le panneau paramètres */
#soundToggle { display: none !important; }

/* ── Bouton Pause (visible uniquement en jeu) ── */
#pauseBtn {
    position: fixed; top: 14px; right: 14px; z-index: 25;
    width: 40px; height: 40px; border-radius: 6px;
    background: rgba(5,5,8,.82); border: 1px solid #2a2a3a;
    color: #666; font-size: 1.1rem; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    padding: 0; transition: border-color .2s, color .2s;
}
#pauseBtn:hover { border-color: #00ffff; color: #00ffff; transform: none; box-shadow: none; }
#pauseBtn.ingame { display: flex; }

/* ── Overlay Paramètres / Pause ── */
#settingsOverlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,.78);
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
}
#settingsOverlay.open { display: flex; }
#settingsPanel {
    background: #07070d; border: 1px solid #1a1a2e;
    border-radius: 12px; padding: clamp(20px,5vw,36px) clamp(22px,6vw,44px);
    width: min(420px, 90vw); display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 0 1px rgba(0,255,255,.05);
}
#settingsPanel h3 {
    font-size: clamp(1rem,4vw,1.4rem); margin: 0; letter-spacing: 3px;
    text-transform: uppercase; color: #00ffff;
    text-shadow: 0 0 12px rgba(0,255,255,.5);
}
.settings-divider { border: none; border-top: 1px solid #1a1a28; margin: 2px 0; }
.settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.settings-label {
    font-size: clamp(.78rem,2.5vw,.92rem); font-weight: bold; color: #aaa;
    letter-spacing: .5px;
}
.settings-sub { font-size: .72rem; color: #444; margin-top: 2px; }
/* Toggle switch */
.sw-wrap { display: flex; align-items: center; gap: 8px; }
.sw-label { font-size: .8rem; color: #555; }
.sw-toggle {
    position: relative; width: 44px; height: 24px; cursor: pointer;
}
.sw-toggle input { opacity: 0; width: 0; height: 0; }
.sw-track {
    position: absolute; inset: 0; background: #1a1a28; border-radius: 12px;
    border: 1px solid #2a2a3a; transition: background .2s;
}
.sw-toggle input:checked + .sw-track { background: rgba(0,255,255,.2); border-color: #00ffff; }
.sw-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #444; transition: transform .2s, background .2s;
}
.sw-toggle input:checked ~ .sw-thumb { transform: translateX(20px); background: #00ffff; }
/* Volume slider */
.vol-slider {
    -webkit-appearance: none; width: 120px; height: 4px;
    background: #1a1a28; border-radius: 2px; outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 50%; background: #00ffff; cursor: pointer;
    box-shadow: 0 0 6px rgba(0,255,255,.5);
}
.vol-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #00ffff; cursor: pointer; border: none;
}
/* Settings action buttons */
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-settings-action {
    flex: 1; padding: 10px 16px; border-radius: 6px; cursor: pointer;
    font-size: clamp(.72rem,2.2vw,.86rem); font-weight: bold;
    letter-spacing: 1px; text-transform: uppercase; transition: all .15s;
    white-space: nowrap; min-width: 90px;
}
.btn-settings-resume {
    background: linear-gradient(135deg,#00ffff,#0066cc);
    color: #000; border: none;
}
.btn-settings-resume:hover { box-shadow: 0 0 18px rgba(0,255,255,.4); transform: none; }
.btn-settings-quit {
    background: transparent; color: #555; border: 1px solid #2a2a3a;
}
.btn-settings-quit:hover { color: #ff4444; border-color: #ff2222; box-shadow: none; transform: none; }
.btn-settings-close {
    background: transparent; color: #666; border: 1px solid #222;
    width: 100%;
}
.btn-settings-close:hover { color: #aaa; border-color: #555; box-shadow: none; transform: none; }

/* ═══════════════════════════════════════════
   MENU PRINCIPAL v2
═══════════════════════════════════════════ */
#menuScreen {
    background: rgba(3,3,7,.88);
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}
/* Canvas visible derrière le menu → le ciel tourne */

/* Grille néon en fond */
#menuScreen::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(0,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 30%, transparent 100%);
}
#menuInner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; height: 100%; padding: clamp(24px,5vw,44px) clamp(16px,5vw,40px);
    justify-content: center; gap: clamp(10px,2.5vw,22px);
}
#menuLogo {
    text-align: center; line-height: 1;
}
#menuLogo .logo-pre {
    font-size: clamp(.6rem,2vw,.82rem); letter-spacing: 6px; color: #333;
    text-transform: uppercase; display: block; margin-bottom: 6px;
}
#menuLogo .logo-main {
    font-size: clamp(2.4rem,9vw,5.2rem); font-weight: 900; font-style: italic;
    text-transform: uppercase; letter-spacing: 2px; line-height: .9;
    background: linear-gradient(135deg, #00ffff 0%, #0088ff 45%, #aa44ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(0,255,255,.35));
    display: block;
}
#menuLogo .logo-sub {
    font-size: clamp(.55rem,1.7vw,.75rem); letter-spacing: 8px; color: #1a4060;
    text-transform: uppercase; display: block; margin-top: 8px;
}
/* ── Conteneur double monnaie (menu) ── */
#menuCurrencies {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
#menuCoinsBadge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,215,0,.06); border: 1px solid rgba(255,215,0,.18);
    border-radius: 24px; padding: 7px 20px;
    font-size: clamp(.8rem,2.5vw,1rem); font-weight: bold;
    color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,.4);
}
#menuCoinsBadge .mc-val { font-size: 1.15em; }
#menuKryptsBadge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,140,255,.06); border: 1px solid rgba(0,140,255,.2);
    border-radius: 24px; padding: 7px 20px;
    font-size: clamp(.8rem,2.5vw,1rem); font-weight: bold;
    color: #44aaff; text-shadow: 0 0 10px rgba(0,160,255,.4);
}
#menuKryptsBadge .mk-val { font-size: 1.15em; }
#menuPlayBtn {
    background: linear-gradient(135deg, #00ffff, #0055cc);
    color: #000 !important; border: none !important;
    padding: clamp(14px,3vw,20px) clamp(40px,10vw,80px);
    font-size: clamp(1rem,3.5vw,1.4rem); font-weight: 900;
    letter-spacing: 4px; text-transform: uppercase;
    border-radius: 6px; cursor: pointer; margin: 0;
    box-shadow: 0 0 30px rgba(0,255,255,.25), 0 0 60px rgba(0,255,255,.1);
    transition: box-shadow .2s, transform .15s;
}
#menuPlayBtn:hover {
    box-shadow: 0 0 50px rgba(0,255,255,.5), 0 0 100px rgba(0,255,255,.2);
    transform: translateY(-3px);
}
#menuPlayBtn:active { transform: scale(0.97); box-shadow: 0 0 20px rgba(0,255,255,.3); }
#menuSecondary {
    display: flex; gap: clamp(6px,2vw,12px); flex-wrap: wrap; justify-content: center;
}
.btn-menu-card {
    background: rgba(255,255,255,.04); border: 1px solid #252538;
    border-radius: 8px; padding: clamp(11px,2vw,14px) clamp(16px,3vw,22px);
    font-size: clamp(.78rem,2.2vw,.92rem); font-weight: bold; letter-spacing: 1px;
    text-transform: uppercase; color: #888; cursor: pointer; margin: 0;
    transition: border-color .2s, color .2s, background .2s; box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-menu-card:hover  { border-color: #383854; color: #bbb; background: rgba(255,255,255,.07); transform: none; box-shadow: none; }
.btn-menu-card:active { border-color: #00ffff44; color: #ccc; background: rgba(0,255,255,.06); transform: scale(0.97); }
#menuFooter {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
}
#menuFooter #saveStatus { margin: 0; }

/* ── Bouton Enregistrer & Quitter ── */
#btnSaveQuit {
    background: transparent; color: #445566;
    border: 1px solid #1e2530; border-radius: 6px;
    font-size: clamp(.6rem,1.6vw,.72rem); padding: 6px 16px;
    letter-spacing: .8px; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    margin-top: 2px;
}
#btnSaveQuit:hover  { color: #aabbcc; border-color: #334455; background: rgba(255,255,255,.04); }
#btnSaveQuit:active { transform: scale(0.97); }
#btnSaveQuit:disabled { color: #334; border-color: #1a2; cursor: default; }
#btnLinkFolder {
    background: transparent; color: #2a2a3a; border: 1px solid #1a1a22;
    font-size: clamp(.62rem,1.8vw,.76rem); padding: 6px 14px; margin: 0;
}
#btnLinkFolder:hover { color: #00ff88; border-color: #00ff88; box-shadow: none; background: transparent; transform: none; }
#btnLinkFolder.linked { color: #00ff88; border-color: #00ff88; }
#menuSaveRow #saveStatus { justify-content: center; }
#menuSaveRow #btnLinkFolder { font-size: clamp(.58rem,1.6vw,.7rem); padding: 5px 12px; }
/* Settings gear button on menu */
#menuSettingsBtn {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 6px;
    background: rgba(255,255,255,.03); border: 1px solid #1a1a28;
    color: #333; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; box-shadow: none;
    transition: border-color .2s, color .2s;
}
#menuSettingsBtn:hover { border-color: #444; color: #aaa; transform: none; box-shadow: none; }

/* Bouton ADMIN discret — en haut à gauche du menu (Mission Admin) */
#menuAdminBtn {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 6px;
    background: rgba(255,255,255,.03); border: 1px solid #1a1a28;
    color: #333; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; box-shadow: none;
    transition: border-color .2s, color .2s, box-shadow .2s;
}
#menuAdminBtn:hover { border-color: #00ffff; color: #00ffff; transform: none; box-shadow: 0 0 12px rgba(0,255,255,.25); }

/* Flash de transition ultra-rapide */
#flashOverlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; opacity: 0; pointer-events: none; z-index: 15; }
.flash-active { animation: quickFlash 0.15s ease-out; }
@keyframes quickFlash { 0% { opacity: 0.8; } 100% { opacity: 0; } }

/* Alerte Phase plus petite et surélevée */
#phaseAlert { position: absolute; top: 22%; width: 100vw; text-align: center; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#phaseAlert h3 { font-size: 2.2rem; margin: 0; color: #fff; font-style: italic; text-transform: uppercase; text-shadow: 0 0 15px #fff; letter-spacing: 2px; }
#phaseAlert p { font-size: 1.1rem; margin: 5px 0 0 0; font-weight: bold; letter-spacing: 1px; }
.alert-active { animation: pulseAlert 0.4s ease-out alternate; opacity: 1 !important; }
@keyframes pulseAlert { 0% { transform: scale(0.95); } 100% { transform: scale(1); } }

/* ===== CONTRÔLES TACTILES MOBILE ===== */
#touchControls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(42vh + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 8;
    display: none;
    pointer-events: none;
    box-sizing: border-box;
}
#touchControls.active {
    display: flex;
    pointer-events: all;
}
.touch-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.touch-zone-left {
    border-right: 1px solid rgba(0,255,255,0.08);
}
.touch-btn {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid rgba(0,255,255,0.35);
    background: rgba(0,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,255,255,0.6);
    transition: background 0.08s, border-color 0.08s, transform 0.08s, color 0.08s;
    box-shadow: 0 0 16px rgba(0,255,255,0.08), inset 0 0 12px rgba(0,255,255,0.03);
}
.touch-arrow {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 3px rgba(0,255,255,0.4));
    transition: filter 0.08s;
}
.touch-btn.pressed {
    background: rgba(0,255,255,0.18);
    border-color: rgba(0,255,255,0.9);
    color: rgba(0,255,255,1);
    transform: scale(0.91);
    box-shadow: 0 0 28px rgba(0,255,255,0.35), inset 0 0 16px rgba(0,255,255,0.08);
}
.touch-btn.pressed .touch-arrow {
    filter: drop-shadow(0 0 7px rgba(0,255,255,0.9));
}

/* ===== HISTORIQUE & SAUVEGARDE ===== */
.panel-wide {
    background: rgba(255,255,255,0.03); border: 1px solid #333;
    padding: clamp(12px, 3vw, 20px) clamp(12px, 3vw, 25px);
    border-radius: 8px; margin-bottom: clamp(8px, 2vw, 20px);
    width: min(680px, 92vw);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

#historyScreen { overflow: hidden; }
#historyList {
    width: min(680px, 92vw);
    max-height: 52vh;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #333 #0a0a0e;
}
#historyList::-webkit-scrollbar { width: 5px; }
#historyList::-webkit-scrollbar-track { background: #0a0a0e; }
#historyList::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.history-row {
    display: grid;
    grid-template-columns: 1fr 70px 80px 72px 80px;
    align-items: center;
    padding: clamp(7px, 1.5vw, 11px) clamp(8px, 2vw, 14px);
    border-bottom: 1px solid #1a1a22;
    font-size: clamp(0.7rem, 2vw, 0.88rem);
    transition: background 0.15s;
}
.history-row:hover { background: rgba(255,255,255,0.03); }
.history-row.best { border-left: 3px solid #ffd700; background: rgba(255,215,0,0.04); }
.history-row.header { font-size: clamp(0.62rem, 1.6vw, 0.75rem); color: #555; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #2a2a32; padding-bottom: 8px; }
.phase-badge { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: clamp(0.65rem, 1.8vw, 0.78rem); font-weight: bold; }
.p0 { background: rgba(0,255,255,0.15); color: #00ffff; }
.p1 { background: rgba(0,255,51,0.15); color: #00ff33; }
.p2 { background: rgba(189,0,255,0.15); color: #bd00ff; }
.p3 { background: rgba(255,68,0,0.15); color: #ff4400; }
.p4 { background: rgba(255,0,0,0.15); color: #ff4444; }

#saveStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #555;
    margin-top: 10px;
    letter-spacing: 0.5px;
}
#saveStatus .dot { width: 7px; height: 7px; border-radius: 50%; background: #333; flex-shrink: 0; }
#saveStatus.linked .dot { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
#saveStatus.linked { color: #00ff88; }
#saveStatus.saving .dot { background: #ffd700; animation: blink 0.5s infinite; }
#saveStatus.saving { color: #ffd700; }
#saveStatus.local .dot { background: #888; }
#saveStatus.local { color: #888; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

#btnLinkFolder { background: #111; color: #888; border: 1px solid #333; font-size: 0.85rem; padding: 10px 22px; margin: 4px; }
#btnLinkFolder:hover { color: #00ff88; border-color: #00ff88; box-shadow: 0 0 10px rgba(0,255,136,0.2); background: #111; }
#btnLinkFolder.linked { color: #00ff88; border-color: #00ff88; }

/* ===== FIN HISTORIQUE ===== */

/* Indicateur discret "touch enabled" */
#mobileHint {
    position: fixed;
    bottom: calc(42vh + env(safe-area-inset-bottom, 0px) + 6px);
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(0,255,255,0.25);
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 7;
    display: none;
}
#mobileHint.active { display: block; }

/* ===== NEAR-MISS ===== */
#nearMissAlert {
    position: absolute; top: 16%; width: 100vw;
    text-align: center; z-index: 20; pointer-events: none;
    opacity: 0;
}
#nearMissAlert.show { animation: nmPop 0.95s ease-out forwards; }
@keyframes nmPop {
    0%   { opacity:0; transform: scale(0.6) translateY(14px); }
    18%  { opacity:1; transform: scale(1.1) translateY(0); }
    55%  { opacity:1; transform: scale(1.0); }
    100% { opacity:0; transform: scale(0.92) translateY(-14px); }
}
#nearMissAlert .nm-title {
    font-size: clamp(.68rem, 2vw, 1rem); font-weight:bold; font-style:italic;
    text-transform:uppercase; letter-spacing:2px; margin:0;
    color:#ffd700; text-shadow:0 0 10px #ffd700, 0 0 24px rgba(255,215,0,.3);
}
#nearMissAlert .nm-coins {
    font-size: clamp(.58rem, 1.2vw, .72rem); font-weight:bold;
    letter-spacing:1.5px; color:#fff; text-shadow:0 0 7px #ffd700; margin:2px 0 0;
}

/* ===== COMBO MULTIPLIER ===== */
#comboAlert {
    position: absolute; top: 28%; width: 100vw;
    text-align: center; z-index: 20; pointer-events: none;
    opacity: 0; transition: opacity .15s;
}
#comboAlert.show { animation: comboPop .7s ease-out forwards; }
@keyframes comboPop {
    0%  { opacity:0; transform:scale(.7); }
    20% { opacity:1; transform:scale(1.15); }
    60% { opacity:1; transform:scale(1); }
    100%{ opacity:0; transform:scale(.95) translateY(-8px); }
}
#comboAlert .combo-label {
    font-size: clamp(.8rem, 2.8vw, 1.4rem); font-weight:900; font-style:italic;
    text-transform:uppercase; letter-spacing:3px; margin:0;
}
#comboAlert .combo-sub {
    font-size: clamp(.58rem, 1.2vw, .75rem); letter-spacing:1.5px;
    color:#fff; margin:2px 0 0; font-weight:bold;
}

/* ── Encore plus petits sur mobile ──────────────────── */
@media (max-width: 480px) {
    #nearMissAlert { top: 13%; }
    #nearMissAlert .nm-title  { font-size: .62rem; letter-spacing: 1.5px; }
    #nearMissAlert .nm-coins  { font-size: .55rem; }
    #comboAlert { top: 23%; }
    #comboAlert .combo-label  { font-size: .7rem; letter-spacing: 1.5px; }
    #comboAlert .combo-sub    { font-size: .55rem; }
    #challengePopup { top: 18%; }
    #challengePopup .cp-title { font-size: .62rem; letter-spacing: 1px; }
    #challengePopup .cp-sub   { font-size: .54rem; }
}

/* ===== BOUCLIER HUD ===== */
#hudShieldItem {
    display: flex; visibility: hidden;
    background: rgba(5,5,8,.85);
    border: 1px solid #334; border-radius: 4px;
    padding: clamp(5px,1.5vw,10px) clamp(8px,2vw,16px);
    font-size: clamp(.7rem,2.2vw,1rem); font-weight:bold;
    white-space:nowrap; align-items:center; gap:6px;
    transition: border-color .2s, box-shadow .2s;
}
#hudShieldItem.ready  { border-color:#00ff88; box-shadow:0 0 12px rgba(0,255,136,.4); animation:shieldPulse 1.8s ease-in-out infinite; }
#hudShieldItem.broken { border-color:#333; opacity:.4; }
@keyframes shieldPulse { 0%,100%{box-shadow:0 0 8px rgba(0,255,136,.3)} 50%{box-shadow:0 0 20px rgba(0,255,136,.7)} }

/* ===== FLASH BOUCLIER ===== */
#shieldFlash {
    position:absolute; top:0; left:0; width:100vw; height:100vh;
    pointer-events:none; z-index:18; opacity:0;
}
#shieldFlash.pop { animation: shieldFlashAnim .45s ease-out forwards; }
@keyframes shieldFlashAnim {
    0%  { opacity:.55; box-shadow:inset 0 0 80px #00ff88; }
    100%{ opacity:0; }
}

/* ===== DÉFIS ===== */
#challengeHUD {
    position:absolute; top:56px; right:12px;
    z-index:6; display:none; flex-direction:column; gap:5px;
    align-items:flex-end;
}
#challengeHUD.active { display:flex; }
.chall-item {
    background:rgba(5,5,8,.88); border:1px solid #2a2a3a;
    border-radius:4px; padding:5px 10px;
    font-size:clamp(.6rem,1.8vw,.82rem); font-weight:bold;
    display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.chall-item.done { border-color:#ffd700; color:#ffd700; text-decoration:line-through; opacity:.6; }
.chall-bar-wrap { width:60px; height:4px; background:#1a1a2e; border-radius:3px; overflow:hidden; }
.chall-bar { height:100%; background:#00ffff; border-radius:3px; transition:width .3s; }
/* Sur mobile le HUD peut passer sur 2 lignes → pousser les quêtes plus bas */
@media (max-width: 540px) { #challengeHUD { top: 84px; } }

/* ===== HUD COMPACT 2 LIGNES ≤ 480px ===== */
@media (max-width: 480px) {
    /* Ligne 1 : stats | Ligne 2 : abilités */
    #hud {
        top: 5px; left: 5px; right: 5px;
        gap: 3px;
        font-size: 0.58rem;
        align-items: center;
    }
    /* Stats (coins, distance, speed, phase…) → ligne 1 */
    #hud .hud-item {
        padding: 3px 6px;
        order: 1;
    }
    /* Séparateur invisible force un retour à la ligne après les stats */
    #hud::after {
        content: '';
        display: block;
        width: 100%;
        order: 5;
    }
    /* Abilités → ligne 2 */
    #hudNitroItem,
    #hudPhantomItem,
    #hudShieldItem,
    #hudFlowZoneItem {
        order: 10;
        padding: 3px 6px;
    }
    /* Barres de progression réduites */
    #phantomBar,
    #nitroBar,
    #hudFlowZoneItem .fz-bar-wrap {
        width: 32px !important;
    }
    /* challengeHUD sous les 2 lignes compactes */
    #challengeHUD { top: 54px; }
}
/* ===== FIN HUD COMPACT ===== */

/* ===== CHALLENGE COMPLETE POPUP ===== */
#challengePopup {
    position:absolute; top:22%; width:100vw;
    text-align:center; z-index:21; pointer-events:none; opacity:0;
}
#challengePopup.show { animation:challPop 2s ease-out forwards; }
@keyframes challPop {
    0%  { opacity:0; transform:translateY(10px) scale(.85); }
    15% { opacity:1; transform:translateY(0) scale(1.05); }
    60% { opacity:1; transform:scale(1); }
    100%{ opacity:0; transform:translateY(-12px); }
}
#challengePopup .cp-title {
    font-size:clamp(.72rem,2.4vw,1.1rem); font-weight:900; text-transform:uppercase;
    letter-spacing:2px; margin:0; color:#ffd700;
    text-shadow:0 0 14px #ffd700;
}
#challengePopup .cp-sub {
    font-size:clamp(.58rem,1.2vw,.78rem); color:#fff; margin:2px 0 0;
    letter-spacing:1px;
}

/* ╔══════════════════════════════════════════╗
   ║           GARAGE v2 — FULL REDESIGN      ║
   ╚══════════════════════════════════════════╝ */

#garageScreen {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,40,80,.35) 0%, rgba(5,5,8,0) 65%), #050508;
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
}

/* ── Header ── */
#garageHeader {
    width: 100%; padding: clamp(14px,3vw,24px) clamp(16px,4vw,36px) 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
#garageHeader h1 {
    font-size: clamp(1.4rem,5vw,2.6rem); margin:0;
    background: linear-gradient(90deg,#00ffff,#0088ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#garageCreditsBadge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.3);
    border-radius: 30px; padding: 7px 18px;
    font-size: clamp(.8rem,2.5vw,1.1rem); font-weight: bold;
    color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,.5);
}
#garageCreditsBadge span { font-size: 1.15em; }

/* ── Badge Neon Credits (💠) ── */
#garageNCBadge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,140,255,.08); border: 1px solid rgba(0,160,255,.35);
    border-radius: 30px; padding: 7px 18px;
    font-size: clamp(.8rem,2.5vw,1.1rem); font-weight: bold;
    color: #44aaff; text-shadow: 0 0 12px rgba(0,160,255,.6);
}
#garageNCBadge span { font-size: 1.15em; }

/* ── Tabs ── */
#garageTabs {
    display: flex; gap: 0; width: 100%;
    padding: clamp(10px,2vw,18px) clamp(16px,4vw,36px) 0;
    flex-shrink: 0;
}
.gtab {
    flex: 1; padding: clamp(7px,1.5vw,11px) 0;
    text-align: center; font-size: clamp(.68rem,2vw,.95rem);
    font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; border-bottom: 2px solid #1e1e2e;
    color: #666; transition: color .2s, border-color .2s;
    user-select: none; -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.gtab.active { color: #00ffff; border-color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,.5); }
.gtab:not(.active):hover  { color: #999; border-color: #444; }
.gtab:not(.active):active { color: #bbb; border-color: #555; }

/* ── Panels scroll area ── */
#garageBody {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: clamp(12px,2.5vw,22px) clamp(16px,4vw,36px) clamp(14px,3vw,24px);
    scrollbar-width: thin; scrollbar-color: #222 transparent;
    width: 100%; max-width: 820px; margin: 0 auto;
}
#garageBody::-webkit-scrollbar { width: 4px; }
#garageBody::-webkit-scrollbar-thumb { background: #222; border-radius:2px; }

.gtab-panel { display: none; }
.gtab-panel.active { display: block; }

/* ── Section title ── */
.g-section-title {
    font-size: clamp(.6rem,1.6vw,.72rem); font-weight:bold;
    text-transform: uppercase; letter-spacing: 3px; color: #333;
    margin: 0 0 clamp(8px,1.5vw,14px) 0; padding-bottom: 6px;
    border-bottom: 1px solid #111;
}

/* ── Upgrade card (stats tab) ── */
.upgrade-card {
    background: rgba(255,255,255,.025);
    border: 1px solid #1a1a28;
    border-radius: 8px;
    padding: clamp(12px,2vw,18px) clamp(14px,2.5vw,22px);
    margin-bottom: clamp(8px,1.5vw,14px);
    transition: border-color .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}
.upgrade-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: var(--card-accent, #00ffff);
    box-shadow: 0 0 12px var(--card-accent, #00ffff);
}
.upgrade-card:hover { border-color: #2a2a40; box-shadow: 0 4px 20px rgba(0,0,0,.4); }

.uc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.uc-info { flex:1; min-width:0; }
.uc-name {
    font-size: clamp(.85rem,2.5vw,1.05rem); font-weight:bold;
    color: #fff; margin:0 0 3px 0; letter-spacing:.5px;
}
.uc-desc { font-size: clamp(.68rem,1.8vw,.8rem); color:#555; margin:0; line-height:1.4; }
.uc-level-dots {
    display: flex; gap: 4px; margin-top: 8px;
}
.uc-dot {
    width: 18px; height: 4px; border-radius: 2px;
    background: #111; border: 1px solid #222; transition: background .3s, border-color .3s;
}
.uc-dot.filled { background: var(--card-accent,#00ffff); border-color: var(--card-accent,#00ffff); box-shadow: 0 0 6px var(--card-accent,#00ffff); }

.uc-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.uc-stat-delta {
    font-size: clamp(.62rem,1.6vw,.74rem); color: #00ff88;
    font-weight:bold; letter-spacing:.5px; white-space:nowrap;
}

/* ── Progress bar upgrade ── */
.uc-bar-wrap { height: 3px; background: #111; border-radius: 2px; overflow:hidden; margin-top: 6px; }
.uc-bar { height:100%; border-radius:2px; transition: width .4s cubic-bezier(.4,0,.2,1); }

/* ── Buy button ── */
.btn-buy {
    background: linear-gradient(135deg, var(--card-accent,#00ffff), color-mix(in srgb, var(--card-accent,#00ffff) 60%, #0000ff));
    color: #000; border:none; border-radius: 5px;
    padding: clamp(7px,1.2vw,10px) clamp(12px,2vw,20px);
    font-size: clamp(.68rem,1.8vw,.82rem); font-weight:900;
    cursor:pointer; letter-spacing:1px; text-transform:uppercase;
    transition: transform .15s, box-shadow .15s; white-space:nowrap;
}
.btn-buy:hover:not(:disabled) { transform:translateY(-2px); box-shadow: 0 4px 16px rgba(0,255,255,.35); }
.btn-buy:active:not(:disabled) { transform:scale(0.96); box-shadow: 0 2px 8px rgba(0,255,255,.2); }
.btn-buy:disabled { background: #1a1a24; color:#333; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-buy.maxed { background: linear-gradient(135deg,#ffd700,#ff8800); color:#000; cursor:default; }
.btn-buy.equipped { background:#111; color: var(--card-accent,#00ffff); border: 1px solid var(--card-accent,#00ffff); }

/* ── Skin card (skins tab) ── */
.skin-card {
    background: rgba(255,255,255,.02);
    border: 1px solid #1a1a28; border-radius: 10px;
    padding: clamp(14px,2.5vw,20px); margin-bottom: clamp(10px,2vw,16px);
    display: flex; gap: clamp(12px,2.5vw,20px); align-items: center;
    position: relative; overflow:hidden;
    transition: border-color .25s, box-shadow .25s;
}
.skin-card::after {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 0% 50%, var(--skin-glow,rgba(0,255,255,.04)) 0%, transparent 65%);
    pointer-events:none;
}
.skin-card:hover { border-color: #2a2a40; }
.skin-card.skin-equipped { border-color: var(--skin-border,#00ffff); box-shadow: 0 0 20px var(--skin-shadow,rgba(0,255,255,.15)); }

.skin-icon {
    width: clamp(48px,10vw,64px); height: clamp(48px,10vw,64px);
    border-radius: 8px; border: 1px solid #222;
    display:flex; align-items:center; justify-content:center;
    font-size: clamp(1.4rem,3vw,1.9rem); flex-shrink:0;
    background: rgba(0,0,0,.4);
}
.skin-info { flex:1; min-width:0; }
.skin-name { font-size:clamp(.85rem,2.5vw,1.05rem); font-weight:bold; color:#fff; margin:0 0 3px; }
.skin-sub  { font-size:clamp(.65rem,1.7vw,.78rem); color:#555; margin:0 0 8px; line-height:1.5; }
.skin-tags { display:flex; gap:5px; flex-wrap:wrap; }
.skin-tag  {
    font-size:clamp(.55rem,1.4vw,.66rem); font-weight:bold; letter-spacing:1px;
    padding:2px 7px; border-radius:3px; text-transform:uppercase;
    background: rgba(255,255,255,.06); border:1px solid #2a2a3a; color:#666;
}
.skin-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }

/* ── Bouton achat Neon Credits (💠) ── */
.btn-buy-nc {
    padding: 7px 14px; border-radius: 6px; font-size: clamp(.65rem,1.8vw,.78rem);
    font-weight: bold; letter-spacing: 1px; cursor: pointer; white-space: nowrap;
    background: rgba(0,120,255,.12); color: #44aaff;
    border: 1px solid rgba(0,150,255,.45);
    transition: background .2s, box-shadow .2s, transform .15s;
    text-shadow: 0 0 8px rgba(0,160,255,.6);
}
.btn-buy-nc:hover:not(:disabled) {
    background: rgba(0,140,255,.22);
    box-shadow: 0 0 14px rgba(0,160,255,.35);
    transform: translateY(-1px);
}
.btn-buy-nc:active:not(:disabled) { transform: scale(0.96); }
.btn-buy-nc:disabled, .btn-buy-nc.nc-disabled {
    background: #0d0d18; color: #2a3a55; border-color: #1a2a40;
    cursor: not-allowed; box-shadow: none; transform: none; text-shadow: none;
}

/* ── Item card (items tab) ── */
.item-card {
    background: rgba(255,255,255,.025); border:1px solid #1a1a28; border-radius:8px;
    padding: clamp(12px,2vw,16px) clamp(14px,2.5vw,20px);
    margin-bottom: clamp(8px,1.5vw,12px);
    display:flex; align-items:center; gap: clamp(10px,2vw,16px);
    position:relative; overflow:hidden;
    transition: border-color .2s;
}
.item-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: var(--item-accent,#ffd700);
    box-shadow: 0 0 10px var(--item-accent,#ffd700);
}
.item-icon {
    font-size: clamp(1.3rem,3vw,1.7rem); width:clamp(38px,7vw,48px);
    text-align:center; flex-shrink:0;
}
.item-info { flex:1; min-width:0; }
.item-name { font-size:clamp(.82rem,2.3vw,1rem); font-weight:bold; color:#fff; margin:0 0 2px; }
.item-desc { font-size:clamp(.63rem,1.7vw,.77rem); color:#555; margin:0; line-height:1.4; }
.item-badge {
    font-size:clamp(.6rem,1.5vw,.7rem); font-weight:bold; letter-spacing:1px;
    padding:2px 8px; border-radius:3px; margin-top:5px; display:inline-block;
    text-transform:uppercase;
}
.item-badge.active-badge { background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.4); color:#00ff88; }
.item-badge.inactive-badge { background:rgba(255,255,255,.05); border:1px solid #222; color:#444; }

/* ── Bottom bar ── */
#garageFooter {
    flex-shrink:0; padding: clamp(10px,2vw,16px) clamp(16px,4vw,36px);
    border-top: 1px solid #111;
    display:flex; justify-content:center;
}
.btn-back {
    background:transparent; color:#666; border:1px solid #252538;
    border-radius:5px; padding:9px 28px;
    font-size:clamp(.72rem,2vw,.88rem); font-weight:bold;
    letter-spacing:1.5px; text-transform:uppercase;
    cursor:pointer; transition: color .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-back:hover  { color:#aaa; border-color:#444; transform:none; box-shadow:none; }
.btn-back:active { color:#ccc; border-color:#00ffff44; background:rgba(0,255,255,.05); transform:scale(0.97); }

/* ═══════════════════════════════════════
   RESPONSIVE LANDSCAPE MOBILE
═══════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 520px) {
    /* Menu compact */
    #menuInner {
        flex-direction: row; flex-wrap: wrap;
        justify-content: center; align-items: center;
        padding: 6px 16px; gap: 5px 18px;
    }
    #menuLogo { flex: 0 0 auto; text-align: center; }
    #menuLogo .logo-pre, #menuLogo .logo-sub { display: none; }
    #menuLogo .logo-main { font-size: clamp(1.6rem, 7vh, 2.6rem); line-height: 1; }
    #menuCoinsBadge { padding: 5px 14px; font-size: 0.82rem; }
    #menuKryptsBadge { padding: 5px 14px; font-size: 0.82rem; }
    #menuSaveRow { display: none !important; }
    #menuPlayBtn { padding: 11px 36px !important; font-size: 0.95rem !important; letter-spacing: 3px; }
    .btn-menu-card { padding: 7px 13px; font-size: 0.72rem; }
    #menuSecondary { gap: 5px; }

    /* Garage compact */
    #garageHeader { padding: 8px 14px 0; }
    #garageHeader h1 { font-size: 1.3rem; }
    #garageCreditsBadge { padding: 4px 11px; font-size: 0.8rem; }
    #garageNCBadge      { padding: 4px 11px; font-size: 0.8rem; }
    #garageTabs { padding: 5px 14px 0; }
    .gtab { padding: 5px 0; font-size: 0.7rem; letter-spacing: 1px; }
    #garageBody { padding: 6px 14px 6px; }
    .upgrade-card { padding: 8px 12px; margin-bottom: 6px; }
    .skin-card { padding: 10px 12px; margin-bottom: 8px; }
    .item-card { padding: 7px 12px; margin-bottom: 6px; }

    /* Garage footer compact en landscape */
    #garageFooter { padding: 5px 14px; }
    .btn-back { padding: 7px 22px; }

    /* Historique compact */
    #historyList { max-height: 45vh; }
}


/* ═══════════════════════════════════════
   RESPONSIVE PORTRAIT MOBILE
═══════════════════════════════════════ */
@media (max-width: 480px) {
    /* Menu : réduire les gaps et tailles */
    #menuInner { gap: clamp(8px,2.5vw,14px); padding: 20px 16px; }
    #menuLogo .logo-main { font-size: clamp(2rem,12vw,3.2rem); }
    #menuPlayBtn { padding: 14px 44px !important; font-size: 1.05rem !important; width: 80%; }
    /* Boutons secondaires : plus visibles et plus grands */
    .btn-menu-card { padding: 12px 10px; font-size: .78rem; letter-spacing: .5px; flex: 1; min-width: 80px; text-align: center; }
    #menuSecondary { gap: 8px; width: 100%; }
    #menuCoinsBadge { padding: 7px 18px; font-size: .88rem; }
    #menuKryptsBadge { padding: 7px 18px; font-size: .88rem; }
    #menuSaveRow { gap: 4px; }
    #dailyMissionsBadge { font-size: .68rem; }

    /* Garage : footer toujours visible */
    #garageScreen { display: flex; flex-direction: column; }
    #garageBody { flex: 1 1 0; min-height: 0; }
    #garageFooter {
        flex-shrink: 0;
        padding: 10px 14px;
        position: sticky; bottom: 0;
        background: #050508;
        border-top: 1px solid #1a1a28;
        z-index: 2;
    }
    .btn-back { padding: 12px 32px; font-size: .82rem; }

    /* Tabs garage : scrollables si trop étroits */
    #garageTabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
    #garageTabs::-webkit-scrollbar { display: none; }
    .gtab { font-size: .65rem; letter-spacing: .5px; padding: 9px 2px; min-width: 48px; white-space: nowrap; flex: 1 0 auto; }
    #garageHeader h1 { font-size: 1.3rem; }
    #garageCreditsBadge { padding: 4px 10px; font-size: .78rem; }
    #garageNCBadge      { padding: 4px 10px; font-size: .78rem; }
}
/* Fix footer garage toujours visible quelle que soit la taille */
#garageScreen { height: 100dvh; }
@supports not (height: 100dvh) { #garageScreen { height: 100vh; } }

/* ===== SPEED LINES — ACCELERATION PHASE ===== */
#speedLinesOverlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 6;
    opacity: 0; transition: opacity 0.12s;
    overflow: hidden;
}
#speedLinesOverlay.active { opacity: 1; }
.speed-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%, rgba(0,255,255,0.0) 20%,
        rgba(0,255,255,0.55) 50%, rgba(0,255,255,0.0) 80%, transparent 100%);
    animation: speedLineSlide 0.22s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes speedLineSlide {
    0%   { transform: scaleY(0.4) translateY(-120%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: scaleY(0.4) translateY(120%); opacity: 0; }
}
/* ===== OMEGA HEAT OVERLAY ===== */
#omegaHeatOverlay {
    position: fixed; inset: 0; z-index: 3;
    pointer-events: none; display: none;
    background:
        linear-gradient(to top, rgba(255,40,0,0.10) 0%, rgba(255,80,0,0.04) 25%, transparent 55%),
        linear-gradient(to bottom, rgba(255,20,0,0.05) 0%, transparent 30%);
    animation: heatWave 0.20s linear infinite;
}
#omegaHeatOverlay.active { display: block; }
@keyframes heatWave {
    0%  { transform: skewX(0deg) skewY(0deg); opacity:0.85; }
    20% { transform: skewX(0.25deg) skewY(0.05deg); opacity:1; }
    50% { transform: skewX(-0.2deg) skewY(-0.04deg); opacity:0.9; }
    80% { transform: skewX(0.15deg) skewY(0.03deg); opacity:1; }
    100%{ transform: skewX(0deg) skewY(0deg); opacity:0.85; }
}
#omegaFireCanvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 3; display: none;
}
#omegaFireCanvas.active { display: block; }

/* Badge Omega exclusif dans les skin cards */
.skin-tag.omega-lock {
    border-color: #4a1500 !important; color: #ff4400 !important;
    background: rgba(255,60,0,0.08) !important;
}
.skin-card.omega-locked { opacity: 0.6; }
.skin-card.omega-locked .skin-icon { filter: grayscale(0.5); }

/* HUD badge Omega en jeu */
#hudOmegaBadge {
    background: rgba(255,40,0,0.12);
    border: 1px solid rgba(255,80,0,0.4);
    color: #ff5500;
    text-shadow: 0 0 8px rgba(255,80,0,0.5);
    animation: omegaPulse 2s ease-in-out infinite;
    display: none;
}
#hudOmegaBadge.active { display: flex; }
@keyframes omegaPulse {
    0%,100% { box-shadow: 0 0 6px rgba(255,80,0,0.2); }
    50%      { box-shadow: 0 0 14px rgba(255,80,0,0.5); }
}

/* ===== NITRO HUD ===== */
#hudNitroItem {
    display: flex; visibility: hidden;
    background: rgba(5,5,8,.85);
    border: 1px solid #334; border-radius: 4px;
    padding: clamp(5px,1.5vw,10px) clamp(8px,2vw,16px);
    font-size: clamp(.7rem,2.2vw,1rem); font-weight:bold;
    white-space:nowrap; align-items:center; gap:6px;
    transition: border-color .2s, box-shadow .2s;
}
#hudNitroItem.ready  { border-color:#ffaa00; box-shadow:0 0 12px rgba(255,170,0,.4); animation:nitroPulse 1.5s ease-in-out infinite; }
#hudNitroItem.active { border-color:#ffff00; box-shadow:0 0 20px rgba(255,255,0,.7); animation:nitroFlicker .1s linear infinite; }
#hudNitroItem.cooldown { border-color:#334; opacity:.6; }
@keyframes nitroPulse { 0%,100%{box-shadow:0 0 8px rgba(255,170,0,.3)} 50%{box-shadow:0 0 20px rgba(255,170,0,.7)} }
@keyframes nitroFlicker { 0%,100%{opacity:1} 50%{opacity:0.7} }
#nitroBarWrap { width: clamp(50px,12vw,90px); height:5px; background:#1a1a2e; border-radius:3px; overflow:hidden; }
#nitroBar { height:100%; background:#ffaa00; border-radius:3px; transition:width .1s; box-shadow:0 0 6px #ffaa00; }

/* Bouton mobile Nitro */
#nitroTouchBtn {
    position: fixed;
    bottom: calc(43vh + env(safe-area-inset-bottom,0px) + 88px);
    left: 5%;
    z-index: 9;
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(255,170,0,0.45);
    background: rgba(255,170,0,0.08);
    font-size: 1.8rem;
    display: none; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}
#nitroTouchBtn.show { display: flex; }
#nitroTouchBtn.pressed { background: rgba(255,170,0,0.3); border-color:#fff; }
#nitroTouchBtn.active-ability { animation: nitroFlicker .1s linear infinite; border-color:#ffff00; }
#nitroTouchBtn.cooldown-btn { opacity:.35; }

/* ===== FOG MODE OVERLAY ===== */
#fogModeOverlay {
    position:fixed; inset:0; pointer-events:none; z-index:4;
    background: rgba(0,5,15,0); transition: background 1s;
}
#fogModeOverlay.active {
    background: radial-gradient(ellipse at 50% 50%, rgba(0,5,15,0) 15%, rgba(0,5,15,0.82) 100%);
}

/* ===== WEATHER EFFECTS ===== */
#weatherOverlay {
    position:fixed; inset:0; pointer-events:none; z-index:3;
    overflow:hidden; opacity:0; transition: opacity .5s;
}
#weatherOverlay.active { opacity:1; }
#weatherCanvas { position:absolute; inset:0; width:100%; height:100%; }
#lightningFlash {
    position:fixed; inset:0; pointer-events:none; z-index:16;
    background:#fff; opacity:0;
}
#lightningFlash.pop { animation: lightningAnim .12s ease-out; }
@keyframes lightningAnim { 0%{opacity:.28} 100%{opacity:0} }
#interferenceOverlay {
    position:fixed; inset:0; pointer-events:none; z-index:17;
    opacity:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,255,.04) 2px,rgba(0,255,255,.04) 4px);
    mix-blend-mode:screen;
}
#interferenceOverlay.active { opacity:1; animation:scanlines .08s steps(1) infinite; }
@keyframes scanlines { 0%{background-position:0 0} 100%{background-position:0 4px} }

/* ===== LEADERBOARD MODAL ===== */
#leaderboardModal {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,.85); display:none;
    align-items:center; justify-content:center;
    backdrop-filter:blur(8px);
}
#leaderboardModal.open { display:flex; }
#leaderboardPanel {
    background:#07070d; border:1px solid #1a1a2e;
    border-radius:12px; padding:clamp(20px,5vw,36px);
    width:min(480px,92vw); max-height:88vh; overflow-y:auto;
    box-shadow:0 0 60px rgba(0,0,0,.8);
}
#leaderboardPanel h3 {
    font-size:clamp(1rem,4vw,1.4rem); margin:0 0 16px;
    letter-spacing:3px; text-transform:uppercase;
    color:#ffd700; text-shadow:0 0 12px rgba(255,215,0,.5);
}
.lb-row { display:grid; grid-template-columns:32px 1fr 80px;
    padding:8px 10px; border-bottom:1px solid #111;
    font-size:clamp(.7rem,2vw,.88rem); align-items:center; gap:8px;
}
#leaderboardRows {
    max-height:min(48vh,420px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:#2a2a3a transparent;
}
#leaderboardRows .lb-row.header {
    position:sticky; top:0; background:#07070d; z-index:1;
}
#leaderboardRows::-webkit-scrollbar { width:6px; }
#leaderboardRows::-webkit-scrollbar-thumb { background:#2a2a3a; border-radius:3px; }
.lb-row.header { color:#555; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
.lb-row.gold   { border-left:3px solid #ffd700; background:rgba(255,215,0,.04); }
.lb-row.silver { border-left:3px solid #aaa; }
.lb-row.bronze { border-left:3px solid #cd7f32; }
.lb-name { color:#ccc; font-weight:bold; }
.lb-dist { color:#00ffff; text-align:right; font-weight:bold; }
#lbCloseBtn { margin-top:16px; width:100%; }

/* Pseudo input on gameover */
#pseudoInputRow {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    justify-content:center; margin-top:8px;
}
#pseudoInput {
    background:#0a0a14; border:1px solid #2a2a3a; color:#fff;
    border-radius:5px; padding:8px 14px;
    font-size:clamp(.8rem,2.5vw,1rem); width:160px;
    outline:none; letter-spacing:1px;
}
#pseudoInput:focus { border-color:#00ffff; box-shadow:0 0 10px rgba(0,255,255,.2); }

/* ===== DAILY MISSIONS PANEL ===== */
.mission-card {
    background:rgba(255,255,255,.025); border:1px solid #1a1a28;
    border-radius:8px; padding:clamp(10px,2vw,15px) clamp(12px,2.5vw,18px);
    margin-bottom:clamp(7px,1.5vw,12px);
    display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;
}
.mission-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#ffd700; box-shadow:0 0 10px #ffd700;
}
.mission-card.done::before { background:#00ff88; box-shadow:0 0 10px #00ff88; }
.mission-card.done { opacity:.6; }
.mission-card.disabled-mission { opacity:.38; border-color:#111; }
.mission-card.disabled-mission::before { background:#333; box-shadow:none; }
.mission-icon { font-size:clamp(1.2rem,3vw,1.6rem); flex-shrink:0; }
.mission-info { flex:1; min-width:0; }
.mission-name { font-size:clamp(.82rem,2.3vw,1rem); font-weight:bold; color:#fff; margin:0 0 2px; }
.mission-desc { font-size:clamp(.63rem,1.7vw,.77rem); color:#555; margin:0 0 6px; }
.mission-bar-wrap { height:4px; background:#1a1a2e; border-radius:3px; overflow:hidden; }
.mission-bar { height:100%; background:#ffd700; border-radius:3px; transition:width .5s; }
.mission-card.done .mission-bar { background:#00ff88; }
.mission-reward { font-size:clamp(.65rem,1.7vw,.78rem); color:#ffd700; font-weight:bold; white-space:nowrap; text-align:right; }
.mission-toggle {
    flex-shrink:0; width:32px; height:32px; border-radius:6px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:bold; letter-spacing:.5px; border:1px solid #2a2a3a;
    background:rgba(255,255,255,.04); color:#555; transition:all .15s;
    margin:0; padding:0; text-transform:none;
}
.mission-toggle.on  { background:rgba(255,215,0,.1); border-color:#ffd700; color:#ffd700; }
.mission-toggle.done-tog { background:rgba(0,255,136,.08); border-color:#00ff88; color:#00ff88; cursor:default; }
.mission-toggle:hover:not(.done-tog) { transform:none; box-shadow:none; }

/* ===== COSMETICS COLOR PRESETS ===== */
.color-preset-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.color-preset {
    width:70px; height:70px; border-radius:8px;
    border:2px solid #1a1a28; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:3px;
    font-size:.55rem; font-weight:bold; letter-spacing:.5px;
    text-transform:uppercase; transition:border-color .2s, box-shadow .2s;
}
.color-preset:hover { border-color:#444; }
.color-preset.selected { border-color:#ffd700; box-shadow:0 0 12px rgba(255,215,0,.3); }
.color-preset-swatch { width:36px; height:36px; border-radius:4px; }

/* ===== CLOUD LEADERBOARD ===== */
#lbCloudModal {
    position:fixed; inset:0; z-index:70;
    background:rgba(0,0,0,.88); display:none;
    align-items:center; justify-content:center;
    backdrop-filter:blur(8px);
}
#lbCloudModal.open { display:flex; }
#lbCloudPanel {
    background:#07070d; border:1px solid #1a2a1a;
    border-radius:12px; padding:clamp(20px,5vw,32px);
    width:min(480px,92vw); display:flex; flex-direction:column; gap:14px;
    box-shadow:0 0 60px rgba(0,0,0,.8), 0 0 0 1px rgba(0,255,136,.04);
}
#lbCloudPanel h3 {
    font-size:clamp(.95rem,3.5vw,1.25rem); margin:0; letter-spacing:3px;
    text-transform:uppercase; color:#00ff88;
    text-shadow:0 0 12px rgba(0,255,136,.4);
}
.cloud-step {
    background:rgba(0,255,136,.04); border:1px solid rgba(0,255,136,.1);
    border-radius:8px; padding:12px 16px;
}
.cloud-step-num {
    display:inline-block; width:20px; height:20px; line-height:20px;
    text-align:center; border-radius:50%; background:rgba(0,255,136,.15);
    color:#00ff88; font-size:.72rem; font-weight:bold; margin-right:8px;
}
.cloud-step-text { font-size:clamp(.68rem,1.8vw,.8rem); color:#666; line-height:1.6; }
.cloud-step-text code {
    background:#0a0a14; border:1px solid #222; border-radius:3px;
    padding:1px 6px; color:#00ffff; font-size:.85em;
}
.cloud-step-text a { color:#00ff88; }
#lbFirebaseInput {
    width:100%; background:#0a0a14; border:1px solid #2a3a2a;
    color:#fff; border-radius:6px; padding:10px 14px;
    font-size:clamp(.75rem,2vw,.88rem); outline:none; letter-spacing:.5px;
    transition:border-color .2s;
}
#lbFirebaseInput:focus { border-color:#00ff88; box-shadow:0 0 10px rgba(0,255,136,.15); }
#lbFirebaseInput::placeholder { color:#333; }
.cloud-status-row {
    display:flex; align-items:center; gap:8px;
    font-size:.75rem; letter-spacing:.5px;
}
.cloud-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cloud-dot.off { background:#333; }
.cloud-dot.ok { background:#00ff88; box-shadow:0 0 6px #00ff88; animation:cloudPulse 2s infinite; }
.cloud-dot.err { background:#ff4444; }
.cloud-dot.loading { background:#ffd700; animation:blink .5s infinite; }
@keyframes cloudPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Leaderboard header with cloud badge */
#lbHeader { display:flex; align-items:center; gap:10px; margin-bottom:0; }
#lbHeader h3 { flex:1; margin:0; }
#lbCloudBadge {
    display:flex; align-items:center; gap:5px;
    background:rgba(255,255,255,.04); border:1px solid #222;
    border-radius:5px; padding:5px 10px;
    font-size:.7rem; font-weight:bold; letter-spacing:1px;
    cursor:pointer; transition: border-color .2s, color .2s;
    color:#555; text-transform:uppercase;
}
#lbCloudBadge:hover { border-color:#00ff88; color:#00ff88; }
#lbCloudBadge.synced { border-color:#00ff88; color:#00ff88; }
#lbCloudBadge.syncing { border-color:#ffd700; color:#ffd700; }
#lbCloudBadge.error { border-color:#ff4444; color:#ff4444; }
#lbTabBar { display:flex; gap:0; border-bottom:1px solid #1a1a28; margin-bottom:12px; }
.lb-tab {
    flex:1; padding:8px 0; text-align:center;
    font-size:clamp(.65rem,1.8vw,.78rem); font-weight:bold; letter-spacing:1px;
    text-transform:uppercase; cursor:pointer;
    border-bottom:2px solid transparent; color:#444; transition:color .15s, border-color .15s;
}
.lb-tab.active { color:#00ffff; border-color:#00ffff; }
.lb-tab.active.cloud-tab { color:#00ff88; border-color:#00ff88; }
#lbSyncHint { font-size:.7rem; color:#333; text-align:center; margin-top:4px; letter-spacing:.5px; }

.world-card {
    background:rgba(255,255,255,.025); border:1px solid #1a1a28;
    border-radius:10px; padding:clamp(14px,2.5vw,20px);
    margin-bottom:clamp(10px,2vw,16px); position:relative; overflow:hidden;
    transition:border-color .25s, box-shadow .25s;
}
.world-card.active-world { border-color:#ff4400; box-shadow:0 0 20px rgba(255,68,0,.15); }
.world-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.world-name { font-size:clamp(.9rem,2.8vw,1.15rem); font-weight:bold; margin:0 0 4px; }
.world-desc { font-size:clamp(.65rem,1.7vw,.78rem); color:#555; margin:0; line-height:1.5; }
.world-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.world-tag { font-size:clamp(.52rem,1.4vw,.64rem); font-weight:bold; letter-spacing:.8px; padding:2px 7px; border-radius:3px; text-transform:uppercase; background:rgba(255,255,255,.06); border:1px solid #2a2a3a; color:#666; }

/* ═══════════════════════════════════════════
   GAME OVER SCREEN — FULL REDESIGN
═══════════════════════════════════════════ */
#gameOverScreen {
    background: radial-gradient(ellipse at 50% 0%, rgba(180,0,40,.18) 0%, rgba(5,5,8,0) 60%), #050508;
    justify-content: flex-start; padding: 0; overflow-y: auto;
    color: #ffffff;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
}
/* Guarantee text children are readable on dark background */
#gameOverScreen .go-stat-val,
#gameOverScreen .go-stat-label,
#gameOverScreen p,
#gameOverScreen span:not(.go-pre):not(.go-main) {
    color: #e0e0e0;
}
#gameOverScreen::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,0,60,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,0,60,.018) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: goGridShift 8s linear infinite;
}
@keyframes goGridShift { 0%{background-position:0 0} 100%{background-position:48px 48px} }

#goInner {
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:520px; padding: clamp(20px,5vw,40px) clamp(16px,4vw,32px);
    gap: clamp(12px,2.5vw,20px);
    margin: auto; /* centre verticalement quand le contenu tient dans l'écran */
}

#goTitle {
    text-align:center; line-height:1;
}
#goTitle .go-pre {
    display:block; font-size:clamp(.55rem,1.6vw,.7rem); letter-spacing:8px;
    color:#ff6680; text-transform:uppercase; margin-bottom:6px;
    animation: goPrePulse 2s ease-in-out infinite;
}
@keyframes goPrePulse { 0%,100%{opacity:.5} 50%{opacity:1} }
#goTitle .go-main {
    display:block; font-size:clamp(2.8rem,12vw,6rem); font-weight:900;
    font-style:italic; text-transform:uppercase; letter-spacing:-1px;
    color:#ff0044;
    text-shadow: 0 0 20px rgba(255,0,68,.7), 0 0 60px rgba(255,0,68,.3), 0 0 100px rgba(255,0,68,.15);
    animation: goMainFlicker 3.5s ease-in-out infinite;
}
@keyframes goMainFlicker {
    0%,95%,100%{ text-shadow:0 0 20px rgba(255,0,68,.7),0 0 60px rgba(255,0,68,.3); }
    96%         { text-shadow:none; opacity:.7; }
    97%         { text-shadow:0 0 30px rgba(255,0,68,.9),0 0 80px rgba(255,0,68,.5); opacity:1; }
    98%         { text-shadow:none; opacity:.8; }
}
#goTitle .go-sub {
    display:block; font-size:clamp(.65rem,2vw,.85rem); color:#ff6680;
    letter-spacing:5px; text-transform:uppercase; margin-top:6px;
}

#goStatsPanel {
    width:100%; background:rgba(255,255,255,.025);
    border:1px solid rgba(255,0,68,.15); border-radius:10px;
    padding:clamp(14px,3vw,22px) clamp(16px,3.5vw,26px);
    box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 30px rgba(255,0,68,.05);
}
.go-stat-row {
    display:flex; justify-content:space-between; align-items:center;
    padding: clamp(7px,1.5vw,11px) 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.go-stat-row:last-child { border-bottom:none; }
.go-stat-label {
    font-size:clamp(.68rem,1.8vw,.82rem); color:#aaaaaa; letter-spacing:1px; text-transform:uppercase;
}
.go-stat-value {
    font-size:clamp(.85rem,2.5vw,1.05rem); font-weight:bold; letter-spacing:.5px;
}

#goRecordBanner {
    width:100%; text-align:center; padding:clamp(8px,2vw,12px) 20px;
    background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,150,0,.06));
    border:1px solid rgba(255,215,0,.35); border-radius:8px;
    animation: recordPulse 1.5s ease-in-out infinite;
    display:none;
}
@keyframes recordPulse { 0%,100%{box-shadow:0 0 10px rgba(255,215,0,.2)} 50%{box-shadow:0 0 25px rgba(255,215,0,.45)} }
#goRecordBanner .rec-icon { font-size:clamp(1.2rem,3vw,1.6rem); display:block; margin-bottom:3px; }
#goRecordBanner .rec-text {
    font-size:clamp(.78rem,2.2vw,1rem); font-weight:900; letter-spacing:2px;
    text-transform:uppercase; color:#ffd700; text-shadow:0 0 15px rgba(255,215,0,.5);
}

#goChallengesBanner {
    width:100%; text-align:center; padding:clamp(6px,1.5vw,10px) 16px;
    background:rgba(0,255,136,.06); border:1px solid rgba(0,255,136,.2);
    border-radius:8px; display:none;
}
#goChallengesBanner span {
    font-size:clamp(.68rem,1.8vw,.82rem); color:#00ff88; font-weight:bold;
}

#goPseudoRow {
    display:none; flex-direction:column; gap:8px; align-items:center; width:100%;
}
#goPseudoLabel {
    font-size:clamp(.7rem,1.8vw,.82rem); color:#aaaaaa; letter-spacing:.5px;
}
#goPseudoInner { display:flex; gap:8px; }

#goActions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; }
/* Mobile portrait : Game Over compact pour que les boutons restent visibles */
@media (max-width: 480px) {
    #goInner { gap: 8px; padding: 14px 14px 24px; }
    #goTitle .go-main { font-size: clamp(2.4rem, 16vw, 3.5rem); }
    #goTitle .go-pre, #goTitle .go-sub { letter-spacing: 3px; }
    #goStatsPanel { padding: 10px 14px; }
    .go-stat-row { padding: 7px 0; }
    #goRecordBanner { padding: 8px 12px; }
    /* Boutons empilés full-width pour faciliter le tap */
    #goActions { flex-direction: column; gap: 8px; }
    #goActions .btn-go-primary,
    #goActions .btn-go-secondary { width: 100%; text-align: center; justify-content: center; }
    .btn-go-primary  { padding: 14px 20px; font-size: .88rem; }
    .btn-go-secondary{ padding: 12px 14px; font-size: .8rem; letter-spacing: 1px; }
}
@media (orientation: landscape) and (max-height: 520px) {
    #goInner { gap: 6px; padding: 8px 20px 10px; }
    #goTitle .go-main { font-size: clamp(1.8rem, 8vh, 3rem); }
    #goTitle .go-pre, #goTitle .go-sub { display: none; }
    #goStatsPanel { padding: 6px 14px; }
    .go-stat-row { padding: 4px 0; }
}
.btn-go-primary {
    background:linear-gradient(135deg,#ff0044,#cc0033); color:#fff; border:none;
    border-radius:6px; padding:clamp(12px,2vw,14px) clamp(22px,5vw,36px);
    font-size:clamp(.82rem,2.2vw,.95rem); font-weight:900; cursor:pointer;
    letter-spacing:2px; text-transform:uppercase;
    box-shadow:0 0 20px rgba(255,0,68,.3); transition:all .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-go-primary:hover  { transform:translateY(-2px); box-shadow:0 0 35px rgba(255,0,68,.55); }
.btn-go-primary:active { transform:scale(0.96); box-shadow:0 0 15px rgba(255,0,68,.4); }
.btn-go-secondary {
    background:rgba(255,255,255,.05); color:#888; border:1px solid #2a2a3e;
    border-radius:6px; padding:clamp(12px,2vw,14px) clamp(16px,4vw,26px);
    font-size:clamp(.75rem,2vw,.88rem); font-weight:bold; cursor:pointer;
    letter-spacing:1.5px; text-transform:uppercase; transition:all .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-go-secondary:hover  { color:#ccc; border-color:#444; transform:translateY(-1px); }
.btn-go-secondary:active { color:#fff; border-color:#00ffff44; background:rgba(0,255,255,.06); transform:scale(0.97); }

/* ── CHANGELOG ──────────────────────────────────────────────────── */
.changelog-card {
    background: rgba(0,255,255,.04);
    border: 1px solid rgba(0,255,255,.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.changelog-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--card-accent,#00ffff);
}
.changelog-header {
    display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
}
.changelog-version {
    font-size:.82rem; font-weight:bold; color:#00ffff; letter-spacing:1px;
}
.changelog-title {
    font-size:.75rem; color:#888; font-style:italic;
}
.changelog-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.changelog-list li {
    display:flex; gap:8px; align-items:flex-start;
    font-size:.75rem; color:#aaa; line-height:1.45;
}
.changelog-list li .cl-icon { flex-shrink:0; font-size:1em; }

/* ═══════════════════════════════════════════════════════
   DAILY REWARD — RÉCOMPENSE QUOTIDIENNE
   ═══════════════════════════════════════════════════════ */

/* Backdrop */
#dailyRewardOverlay {
    position: fixed; inset: 0; z-index: 20000;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#dailyRewardOverlay.dr-visible {
    display: flex;
    animation: drFadeIn 0.3s ease forwards;
}
@keyframes drFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Carte principale */
#dailyRewardCard {
    position: relative;
    width: min(400px, 90vw);
    background: linear-gradient(160deg, #0a0a18 0%, #07070f 100%);
    border: 1px solid rgba(0, 255, 200, 0.25);
    border-radius: 18px;
    padding: clamp(24px, 6vw, 40px) clamp(20px, 6vw, 36px);
    text-align: center;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,255,180,.08),
        0 0 60px rgba(0, 255, 180, 0.12),
        0 30px 80px rgba(0, 0, 0, 0.7);
    animation: drCardPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes drCardPop {
    0%   { opacity: 0; transform: scale(0.6) translateY(40px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
    80%  { transform: scale(0.98) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Halo de fond animé */
#dailyRewardCard::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,180,.07) 0%, transparent 70%);
    z-index: 0;
}

/* Étoiles/particules décoratives */
#drParticles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.dr-star {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #00ffb0;
    opacity: 0;
    animation: drStarFloat linear infinite;
}
@keyframes drStarFloat {
    0%   { opacity: 0;   transform: translateY(0)    scale(0.5); }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.4; }
    100% { opacity: 0;   transform: translateY(-120px) scale(1.2); }
}

/* Contenu relatif (au-dessus du ::before) */
#drContent { position: relative; z-index: 1; }

/* Badge "NOUVEAU JOUR" */
#drBadge {
    display: inline-block;
    font-size: .65rem; font-weight: 700; letter-spacing: 2.5px;
    color: #00ffb0;
    border: 1px solid rgba(0, 255, 180, 0.4);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 14px;
    text-transform: uppercase;
    background: rgba(0,255,180,.06);
    animation: drPulse 2.5s ease-in-out infinite;
}
@keyframes drPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,180,.3); }
    50%       { box-shadow: 0 0 0 6px rgba(0,255,180,.0); }
}

/* Titre */
#drTitle {
    font-size: clamp(1.3rem, 5vw, 1.9rem);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px rgba(0,255,180,.4);
    margin: 0 0 4px;
}
#drSubtitle {
    font-size: clamp(.65rem, 2vw, .78rem);
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 22px;
}

/* Coffre / icône animée */
#drChest {
    font-size: clamp(3.2rem, 10vw, 4.5rem);
    margin: 0 0 16px;
    display: block;
    animation: drChestBounce 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(255, 210, 0, 0.5));
}
@keyframes drChestBounce {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%       { transform: translateY(-8px) rotate(2deg); }
}

/* Montant de la récompense */
#drRewardBox {
    display: inline-flex;
    align-items: center; gap: 10px;
    background: rgba(255, 210, 0, 0.07);
    border: 1px solid rgba(255, 210, 0, 0.25);
    border-radius: 12px;
    padding: 12px 24px;
    margin-bottom: 24px;
}
#drCoinIcon { font-size: 1.6rem; }
#drAmount {
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 1px;
    text-shadow: 0 0 16px rgba(255,215,0,.5);
}
#drCoinLabel {
    font-size: .72rem;
    color: #886600;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
}

/* Streak (jours consécutifs) */
#drStreak {
    font-size: .72rem;
    color: #888;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
}
#drStreakNum {
    color: #ff9900;
    font-weight: 700;
    font-size: .9rem;
}

/* Bouton Réclamer */
#drClaimBtn {
    position: relative;
    width: 100%;
    padding: 15px 24px;
    font-size: clamp(.9rem, 3vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #00ffb0 0%, #00d4ff 50%, #00ffb0 100%);
    background-size: 200% 200%;
    animation: drBtnShimmer 2.5s linear infinite;
    box-shadow:
        0 0 20px rgba(0, 255, 180, 0.45),
        0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform .15s, box-shadow .15s;
}
#drClaimBtn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 35px rgba(0, 255, 180, 0.65),
        0 8px 28px rgba(0, 0, 0, 0.5);
}
#drClaimBtn:active {
    transform: scale(0.97);
}
/* Effet shimmer sur le bouton */
#drClaimBtn::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: rgba(255,255,255,0.25);
    transform: skewX(-20deg);
    animation: drBtnGlare 2.8s ease-in-out infinite;
}
@keyframes drBtnShimmer {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@keyframes drBtnGlare {
    0%   { left: -75%; opacity: 0; }
    30%  { opacity: 1; }
    60%  { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

/* Animation de claim réussi */
#dailyRewardCard.dr-claimed {
    animation: drClaimed 0.5s ease forwards;
}
@keyframes drClaimed {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(0) translateY(30px); opacity: 0; }
}

/* Confettis au claim */
.dr-confetti {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 20001;
    animation: drConfettiFall linear forwards;
}
@keyframes drConfettiFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(300px) rotate(720deg); }
}

/* ── Countdown menu ─────────────────────── */
/* ── Countdown timer — coin bas-droit ─────────────── */
#drCountdownBadge {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9000;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 185, 0, 0.35);
    border-radius: 10px;
    padding: 9px 15px 9px 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 0 0 1px rgba(255,185,0,.08),
        0 4px 24px rgba(0,0,0,.55),
        0 0 18px rgba(255,185,0,.07);
    transition: opacity .3s, transform .3s;
    cursor: default;
    user-select: none;
}
#drCountdownBadge.dr-visible { display: flex; }
#drCountdownBadge:hover {
    border-color: rgba(255,185,0,.6);
    box-shadow:
        0 0 0 1px rgba(255,185,0,.15),
        0 6px 28px rgba(0,0,0,.65),
        0 0 24px rgba(255,185,0,.12);
}

#drCountdownIcon {
    font-size: 1.4rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255,210,0,.5));
    animation: drIconPulse 2.8s ease-in-out infinite;
}
@keyframes drIconPulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255,210,0,.4)); }
    50%       { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(255,210,0,.75)); }
}

#drCountdownInner {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#drCountdownLabel {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #886600;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    line-height: 1;
}
#drCountdownTime {
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffd700;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 10px rgba(255,215,0,.55),
        0 1px 3px rgba(0,0,0,.9);
    line-height: 1.2;
}

/* ===== FLOW ZONE — LE SYNCHRONISEUR ===== */
#flowZoneOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 10; opacity: 0;
    background: radial-gradient(ellipse at center, transparent 38%, rgba(0,60,255,.13) 100%);
    box-shadow: inset 0 0 90px rgba(0,90,255,.18);
    transition: opacity 0.45s ease;
}
#flowZoneOverlay.active  { opacity: 1; animation: fzVignette 1.1s ease-in-out infinite alternate; }
#flowZoneOverlay.ending  { opacity: 0; transition: opacity 0.65s ease; }
@keyframes fzVignette { from{box-shadow:inset 0 0 70px rgba(0,80,255,.14)} to{box-shadow:inset 0 0 110px rgba(0,140,255,.28)} }

canvas.fz-active { filter: saturate(1.25) hue-rotate(28deg) brightness(1.06); transition: filter 0.45s ease; }
canvas           { filter: saturate(1) hue-rotate(0deg) brightness(1);         transition: filter 0.55s ease; }

#hudFlowZoneItem {
    display: none; background: rgba(2,2,20,.88); border: 1px solid #113;
    border-radius: 4px; padding: clamp(5px,1.5vw,10px) clamp(8px,2vw,16px);
    font-size: clamp(.7rem,2.2vw,1rem); font-weight: bold; white-space: nowrap;
    align-items: center; gap: 5px; transition: border-color .2s, box-shadow .2s;
}
#hudFlowZoneItem.ready.fz-hud-ready  { border-color:#0055ff; box-shadow:0 0 12px rgba(0,85,255,.4); animation:fzPulseHUD 1.6s ease-in-out infinite; }
#hudFlowZoneItem.active.fz-hud-active{ border-color:#00aaff; box-shadow:0 0 22px rgba(0,170,255,.7); animation:fzFlicker .12s linear infinite; }
#hudFlowZoneItem.cooldown { border-color:#223; opacity:.6; }
#hudFlowZoneItem.empty    { border-color:#112; opacity:.45; }
@keyframes fzPulseHUD { 0%,100%{box-shadow:0 0 8px rgba(0,85,255,.3)} 50%{box-shadow:0 0 22px rgba(0,150,255,.65)} }
@keyframes fzFlicker  { 0%,100%{opacity:1} 50%{opacity:.65} }

#flowZoneBarWrap { width:clamp(50px,12vw,90px); height:5px; background:#0a0a22; border-radius:3px; overflow:hidden; }
#flowZoneBar     { height:100%; background:linear-gradient(90deg,#0033cc,#0066ff); border-radius:3px; transition:width .1s; box-shadow:0 0 6px #0066ff; }

.fz-charges     { display:flex; gap:2px; margin-left:4px; }
.fz-charge      { font-size:clamp(.45rem,1.4vw,.72rem); opacity:.28; color:#0055ff; }
.fz-charge.filled { opacity:1; color:#00aaff; text-shadow:0 0 6px #0066ff; }

#flowZoneTouchBtn {
    position:fixed; bottom:calc(43vh + env(safe-area-inset-bottom,0px) + 86px); left:5%;
    z-index:9; width:72px; height:72px; border-radius:50%;
    border:2px solid rgba(0,100,255,.45); background:rgba(0,60,200,.08);
    font-size:1.6rem; color:#0077ff;
    display:none; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent; cursor:pointer;
    transition:background .1s, border-color .1s;
}
#flowZoneTouchBtn.pressed       { background:rgba(0,100,255,.30); border-color:#00aaff; }
#flowZoneTouchBtn.active-ability{ animation:fzFlicker .12s linear infinite; border-color:#00ddff; }
#flowZoneTouchBtn.cooldown-btn  { opacity:.35; }


/* ════════════════════════════════════════════════════════════
   CYBER AUTH — Système d'Authentification
   ════════════════════════════════════════════════════════════ */

#crAuthOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #03030a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Scanlines de fond */
.auth-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.012) 2px,
        rgba(0, 255, 255, 0.012) 4px
    );
    z-index: 0;
}

.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* ── Logo ──────────────────────────────────────────────────── */

.auth-logo {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-pre {
    display: block;
    color: #00ffff;
    font-size: 0.65rem;
    letter-spacing: 6px;
    opacity: 0.6;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.auth-logo-main {
    display: block;
    font-size: clamp(2.4rem, 8vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    text-shadow:
        0 0 20px #aa00ff,
        0 0 50px rgba(170, 0, 255, 0.4),
        0 0 100px rgba(170, 0, 255, 0.15);
    line-height: 1;
}

.auth-logo-accent {
    color: #aa00ff;
    text-shadow: 0 0 12px #aa00ff, 0 0 30px rgba(170, 0, 255, 0.6);
}

.auth-logo-sub {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 8px;
    color: #00ffff;
    opacity: 0.5;
    margin-top: 6px;
    text-transform: uppercase;
}

/* ── Carte principale ──────────────────────────────────────── */

.auth-card {
    background: rgba(4, 4, 18, 0.96);
    border: 1px solid rgba(170, 0, 255, 0.28);
    border-radius: 14px;
    padding: 26px 22px;
    box-shadow:
        0 0 50px rgba(170, 0, 255, 0.07),
        inset 0 1px 0 rgba(170, 0, 255, 0.08);
}

/* ── Onglets auth ──────────────────────────────────────────── */

.auth-tabs {
    display: flex;
    border-bottom: 1px solid rgba(170, 0, 255, 0.18);
    margin-bottom: 22px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #3a3a4a;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-transform: uppercase;
}

.auth-tab:hover:not(.active) { color: #666; }

.auth-tab.active {
    color: #aa00ff;
    border-bottom-color: #aa00ff;
    text-shadow: 0 0 10px rgba(170, 0, 255, 0.45);
}

/* ── Formulaires ───────────────────────────────────────────── */

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field { margin-bottom: 14px; }

.auth-label {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 2px;
    color: #484858;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.auth-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(170, 0, 255, 0.22);
    border-radius: 7px;
    padding: 12px 14px;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: 2px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}

.auth-input::-webkit-inner-spin-button,
.auth-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.auth-input:focus {
    border-color: rgba(170, 0, 255, 0.65);
    box-shadow: 0 0 14px rgba(170, 0, 255, 0.12);
}

.auth-input::placeholder { color: #2a2a3a; letter-spacing: 1px; }

/* Input ID numérique — centré et grand */
.auth-input-id {
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 8px;
    font-weight: bold;
    padding: 10px 14px;
}

/* ── Bouton principal auth ─────────────────────────────────── */

.auth-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #5500bb, #9900ee);
    border: 1px solid rgba(170, 0, 255, 0.45);
    border-radius: 7px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.22s;
    text-transform: uppercase;
    margin-top: 6px;
    font-family: inherit;
}

.auth-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #7700cc, #bb00ff);
    box-shadow: 0 0 22px rgba(170, 0, 255, 0.28);
    transform: translateY(-1px);
}

.auth-btn:active:not(:disabled) { transform: translateY(0); }

/* ── Message d'erreur auth ─────────────────────────────────── */

#crAuthError {
    display: none;
    background: rgba(255, 0, 80, 0.09);
    border: 1px solid rgba(255, 0, 80, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    color: #ff4455;
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    text-align: center;
    line-height: 1.45;
}

/* ── Écran "Votre ID" (post-inscription) ───────────────────── */

.new-id-announce {
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #555;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.new-id-pseudo {
    font-size: 1.5rem;
    color: #00ffff;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 22px;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.new-id-label {
    font-size: 0.65rem;
    color: #555;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.new-id-value {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 10px;
    color: #fff;
    text-shadow: 0 0 24px #aa00ff, 0 0 50px rgba(170, 0, 255, 0.35);
    margin-bottom: 14px;
    text-align: center;
}

.new-id-warning {
    font-size: 0.72rem;
    color: #aa7700;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
    line-height: 1.6;
}

.new-id-warning strong { color: #ffaa00; }


/* ════════════════════════════════════════════════════════════
   BOUTON PROFIL (menu principal)
   ════════════════════════════════════════════════════════════ */

#crProfileBtn {
    position: fixed;
    top: 14px;
    right: 56px;
    z-index: 500;
    background: rgba(4, 4, 18, 0.88);
    border: 1px solid rgba(0, 255, 255, 0.28);
    border-radius: 8px;
    color: #00ffff;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: inherit;
}

#crProfileBtn:hover {
    background: rgba(0, 255, 255, 0.07);
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.14);
}


/* ════════════════════════════════════════════════════════════
   PANEL PROFIL & AMIS
   ════════════════════════════════════════════════════════════ */

#crProfileOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    padding: 12px;
    box-sizing: border-box;
}

#crProfileOverlay.show { display: flex; }

#crProfilePanel {
    background: #05050f;
    border: 1px solid rgba(170, 0, 255, 0.28);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 70px rgba(170, 0, 255, 0.09), 0 4px 40px rgba(0, 0, 0, 0.8);
}

/* ── En-tête panel ─────────────────────────────────────────── */

.profile-header {
    padding: 18px 20px 0;
    flex-shrink: 0;
}

.profile-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.profile-header-title {
    font-size: 0.68rem;
    letter-spacing: 4px;
    color: #aa00ff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(170, 0, 255, 0.4);
    text-transform: uppercase;
}

.profile-close-btn {
    background: none;
    border: 1px solid #1e1e2a;
    color: #444;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    transition: all 0.2s;
}

.profile-close-btn:hover { color: #fff; border-color: #555; }

/* ── Onglets profil ────────────────────────────────────────── */

.profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(170, 0, 255, 0.14);
}

.profile-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #3a3a4a;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-transform: uppercase;
}

.profile-tab.active { color: #00ffff; border-bottom-color: #00ffff; }
.profile-tab:hover:not(.active) { color: #666; }

/* ── Corps scrollable ──────────────────────────────────────── */

.profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: #1a1a2e transparent;
}

.profile-body::-webkit-scrollbar { width: 4px; }
.profile-body::-webkit-scrollbar-track { background: transparent; }
.profile-body::-webkit-scrollbar-thumb { background: #1a1a2e; border-radius: 2px; }

/* ── Carte identité ────────────────────────────────────────── */

.profile-id-card {
    background: rgba(170, 0, 255, 0.04);
    border: 1px solid rgba(170, 0, 255, 0.2);
    border-radius: 11px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.profile-id-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #550099, #9900ee);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(170, 0, 255, 0.28);
}

.profile-id-info { flex: 1; min-width: 0; }

.profile-id-pseudo {
    font-size: 1.05rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-id-number { font-size: 0.7rem; color: #444; letter-spacing: 2px; }
.profile-id-number span { color: #aa00ff; letter-spacing: 4px; font-weight: bold; }

.pseudo-edit-btn {
    background: none;
    border: 1px solid #2a2a3a;
    color: #445;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.62rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}

.pseudo-edit-btn:hover { color: #00ffff; border-color: rgba(0, 255, 255, 0.4); }

/* ── Titres de section ──────────────────────────────────────── */

.profile-section-title {
    font-size: 0.62rem;
    letter-spacing: 3px;
    color: #383848;
    text-transform: uppercase;
    margin: 18px 0 9px;
}

/* ── Streak — jauge 7 jours ────────────────────────────────── */

.streak-container {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 136, 0, 0.18);
    border-radius: 10px;
    padding: 14px 15px;
}

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

.streak-label { font-size: 0.75rem; color: #666; letter-spacing: 1px; }

.streak-count {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff8800;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.45);
    letter-spacing: 1px;
}

.streak-days {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.streak-day {
    flex: 1;
    aspect-ratio: 1;
    max-width: 38px;
    border-radius: 7px;
    border: 1px solid #141420;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: #2a2a3a;
    transition: all 0.3s;
}

.streak-day.done {
    background: linear-gradient(135deg, #3a1400, #7a3300);
    border-color: rgba(255, 136, 0, 0.5);
    color: #ff8800;
    box-shadow: 0 0 8px rgba(255, 136, 0, 0.22);
    font-size: 0.9rem;
}

.streak-day.today {
    border-color: #ff8800;
    animation: crStreakPulse 1.5s ease-in-out infinite;
}

@keyframes crStreakPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 136, 0, 0.3); }
    50%       { box-shadow: 0 0 16px rgba(255, 136, 0, 0.65); }
}

/* ── Skins ──────────────────────────────────────────────────── */

.profile-skins {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-skin-badge {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 0.72rem;
    color: #00ffff;
    letter-spacing: 1px;
}

/* ── Highscores ─────────────────────────────────────────────── */

.profile-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-score-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #141420;
    border-radius: 9px;
    padding: 12px;
    text-align: center;
}

.profile-score-world {
    font-size: 0.62rem;
    color: #444;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.profile-score-value {
    font-size: 1.15rem;
    font-weight: bold;
    color: #00ffff;
    letter-spacing: 2px;
}

/* ── Placeholder "En construction" ─────────────────────────── */

.profile-wip-card {
    background: repeating-linear-gradient(
        45deg,
        rgba(14, 14, 24, 0.85),
        rgba(14, 14, 24, 0.85) 8px,
        rgba(10, 10, 18, 0.85) 8px,
        rgba(10, 10, 18, 0.85) 16px
    );
    border: 1px dashed #1e1e30;
    border-radius: 11px;
    padding: 20px;
    text-align: center;
    margin-top: 16px;
    opacity: 0.65;
}

.profile-wip-icon { font-size: 1.8rem; margin-bottom: 7px; }

.profile-wip-title {
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 3px;
    color: #3a3a4a;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.profile-wip-sub {
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: #282838;
    text-transform: uppercase;
}

/* ── Section paramètres / déconnexion ───────────────────────── */

.profile-settings-section {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid #121220;
    border-radius: 11px;
    padding: 15px;
    margin-top: 16px;
}

.profile-settings-title {
    font-size: 0.62rem;
    letter-spacing: 3px;
    color: #2e2e3e;
    margin-bottom: 11px;
    text-transform: uppercase;
}

.profile-logout-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255, 0, 80, 0.07);
    border: 1px solid rgba(255, 0, 80, 0.22);
    border-radius: 7px;
    color: #cc3344;
    font-size: 0.76rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-transform: uppercase;
}

.profile-logout-btn:hover {
    background: rgba(255, 0, 80, 0.14);
    border-color: rgba(255, 0, 80, 0.42);
    color: #ff4455;
}


/* ════════════════════════════════════════════════════════════
   ONGLET AMIS
   ════════════════════════════════════════════════════════════ */

.friends-add-section {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.friends-add-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 7px;
    padding: 10px 12px;
    color: #fff;
    font-size: 1.1rem;
    font-family: inherit;
    letter-spacing: 5px;
    outline: none;
    text-align: center;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

.friends-add-input::-webkit-inner-spin-button,
.friends-add-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.friends-add-input:focus { border-color: rgba(0, 255, 255, 0.45); }
.friends-add-input::placeholder { color: #252535; letter-spacing: 2px; font-size: 0.75rem; }

.friends-add-btn {
    background: rgba(0, 255, 255, 0.07);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 7px;
    color: #00ffff;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
    text-transform: uppercase;
}

.friends-add-btn:hover { background: rgba(0, 255, 255, 0.14); }

.friends-feedback {
    font-size: 0.74rem;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
    line-height: 1.4;
}

.friends-feedback.ok {
    display: block;
    background: rgba(0, 255, 136, 0.07);
    border: 1px solid rgba(0, 255, 136, 0.22);
    color: #00cc88;
}

.friends-feedback.err {
    display: block;
    background: rgba(255, 0, 80, 0.07);
    border: 1px solid rgba(255, 0, 80, 0.22);
    color: #ff4455;
}

/* ── Cartes d'amis ──────────────────────────────────────────── */

.friend-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #141420;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.friend-card:hover {
    border-color: rgba(0, 255, 255, 0.28);
    background: rgba(0, 255, 255, 0.025);
}

.friend-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #001430, #002860);
    border: 1px solid rgba(0, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.friend-info { flex: 1; min-width: 0; }

.friend-pseudo {
    font-size: 0.88rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ddd;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-meta { font-size: 0.64rem; color: #444; letter-spacing: 1px; }

.friend-streak-badge {
    font-size: 0.7rem;
    color: #ff8800;
    background: rgba(255, 136, 0, 0.07);
    border: 1px solid rgba(255, 136, 0, 0.18);
    border-radius: 5px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.friends-empty {
    text-align: center;
    padding: 36px 20px;
    color: #2e2e3e;
    font-size: 0.78rem;
    letter-spacing: 1px;
    line-height: 1.7;
}

.friends-loading {
    text-align: center;
    padding: 20px;
    color: #383848;
    font-size: 0.76rem;
    letter-spacing: 1px;
}


/* ════════════════════════════════════════════════════════════
   MODAL DÉTAIL AMI
   ════════════════════════════════════════════════════════════ */

#crFriendModal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(7px);
    padding: 14px;
    box-sizing: border-box;
}

#crFriendModal.show { display: flex; }

#crFriendModalPanel {
    background: #05050f;
    border: 1px solid rgba(0, 255, 255, 0.22);
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px;
    box-shadow: 0 0 60px rgba(0, 255, 255, 0.07);
    scrollbar-width: thin;
    scrollbar-color: #1a1a2e transparent;
}

.friend-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.friend-modal-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #001430, #002860);
    border: 2px solid rgba(0, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.1);
}

.friend-modal-name {
    font-size: 1.15rem;
    font-weight: bold;
    letter-spacing: 3px;
    color: #fff;
}

.friend-modal-id { font-size: 0.65rem; color: #444; letter-spacing: 2px; }

.friend-modal-close {
    margin-left: auto;
    background: none;
    border: 1px solid #1e1e2a;
    color: #444;
    border-radius: 6px;
    padding: 6px 11px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    align-self: flex-start;
    transition: all 0.2s;
}

.friend-modal-close:hover { color: #fff; border-color: #555; }

.friend-modal-section {
    font-size: 0.62rem;
    letter-spacing: 3px;
    color: #2e2e3e;
    margin: 14px 0 7px;
    text-transform: uppercase;
}

.friend-modal-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.friend-modal-score-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #141420;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.friend-modal-score-world { font-size: 0.6rem; color: #3a3a4a; margin-bottom: 5px; text-transform: uppercase; }
.friend-modal-score-value { font-size: 1.05rem; font-weight: bold; color: #00ffff; letter-spacing: 2px; }

.friend-modal-remove-btn {
    width: 100%;
    padding: 11px;
    background: none;
    border: 1px solid rgba(255, 0, 80, 0.18);
    border-radius: 7px;
    color: #cc3344;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-top: 14px;
    text-transform: uppercase;
}

.friend-modal-remove-btn:hover {
    background: rgba(255, 0, 80, 0.08);
    color: #ff4455;
}


/* ════════════════════════════════════════════════════════════
   STREAK TOAST
   ════════════════════════════════════════════════════════════ */

#crStreakToast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-90px);
    z-index: 9500;
    background: rgba(4, 4, 18, 0.96);
    border: 1px solid rgba(255, 136, 0, 0.38);
    border-radius: 11px;
    padding: 12px 24px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 28px rgba(255, 136, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
}

#crStreakToast.show { transform: translateX(-50%) translateY(0); }

.streak-toast-msg {
    font-size: 0.64rem;
    letter-spacing: 3px;
    color: #666;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.streak-toast-num {
    font-size: 1.15rem;
    font-weight: bold;
    color: #ff8800;
    text-shadow: 0 0 12px rgba(255, 136, 0, 0.5);
    letter-spacing: 2px;
}


/* ════════════════════════════════════════════════════════════
   WEEKLY REWARD MODAL (Bilan de la semaine)
   ════════════════════════════════════════════════════════════ */

#crWeeklyModal {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    padding: 14px;
    box-sizing: border-box;
}

#crWeeklyModal.show { display: flex; }

.weekly-modal-card {
    background: linear-gradient(145deg, #080818, #050510);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 16px;
    padding: 34px 28px;
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.09),
        0 0 100px rgba(255, 215, 0, 0.04);
}

.weekly-icon { font-size: 3rem; margin-bottom: 10px; }

.weekly-title {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.45);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.weekly-sub {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.weekly-reward {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.weekly-reward-label {
    font-size: 0.65rem;
    color: #666;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.weekly-reward-value {
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    letter-spacing: 2px;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}

.weekly-days {
    font-size: 0.68rem;
    color: #444;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.weekly-close-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #aa8800, #ffd700);
    border: none;
    border-radius: 9px;
    color: #000;
    font-size: 0.84rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    text-transform: uppercase;
}

.weekly-close-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }


/* ── Classement : nom cliquable ────────────────────────────── */
.lb-name-clickable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(170, 0, 255, .4);
    transition: color .15s;
}
.lb-name-clickable:hover { color: #cc44ff; }

/* ── Modal profil joueur (depuis classement) ───────────────── */
#lbPlayerModal.open { display: flex !important; }

.lb-player-card { text-align: center; }
.lb-player-avatar { font-size: 2.8rem; margin-bottom: 8px; }
.lb-player-pseudo { font-size: 1.1rem; letter-spacing: 2px; color: #fff; font-weight: 700; margin-bottom: 4px; }
.lb-player-id { font-size: .72rem; color: #555; letter-spacing: 1px; margin-bottom: 16px; }

.lb-player-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}
.lb-player-stat {
    background: rgba(170,0,255,.07);
    border: 1px solid rgba(170,0,255,.18);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.lbst-val  { font-size: .92rem; color: #fff; font-weight: 700; }
.lbst-lbl  { font-size: .65rem; color: #666; letter-spacing: .5px; }

.lb-add-friend-btn {
    background: none;
    border: 1px solid rgba(170,0,255,.5);
    border-radius: 8px;
    color: #aa44ff;
    font-size: .82rem;
    letter-spacing: 1px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background .2s, color .2s;
    width: 100%;
}
.lb-add-friend-btn:hover:not(:disabled) {
    background: rgba(170,0,255,.15);
    color: #cc66ff;
}
.lb-add-friend-btn:disabled { opacity: .6; cursor: default; }

/* ── Modal notifications ────────────────────────────────────── */
#crNotifModal.open { display: flex !important; }

.notif-request-card {
    background: rgba(170,0,255,.06);
    border: 1px solid rgba(170,0,255,.18);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.notif-req-avatar { font-size: 1.6rem; flex-shrink: 0; }
.notif-req-info   { flex: 1; min-width: 0; }
.notif-req-pseudo { font-size: .88rem; color: #fff; letter-spacing: .5px; font-weight: 600; }
.notif-req-date   { font-size: .68rem; color: #555; margin-top: 2px; }
.notif-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

.notif-btn-accept, .notif-btn-decline {
    border: none;
    border-radius: 6px;
    font-size: .72rem;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .5px;
    transition: opacity .15s;
}
.notif-btn-accept  { background: rgba(0,255,136,.18); color: #00ff88; border: 1px solid rgba(0,255,136,.35); }
.notif-btn-decline { background: rgba(255,68,68,.12);  color: #ff6666; border: 1px solid rgba(255,68,68,.25); }
.notif-btn-accept:hover  { opacity: .8; }
.notif-btn-decline:hover { opacity: .8; }

/* ════════════════════════════════════════════════════════════════
   🛡 PANEL ADMINISTRATEUR — Mission Admin CyberRACER
   Esthétique : terminal hacker / glassmorphism cyberpunk
   (cohérent avec .auth-card / #crProfilePanel : fond #05050f,
   bordures néon cyan/violet, majuscules espacées)
   ════════════════════════════════════════════════════════════════ */

#adminPanelOverlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center; justify-content: center;
    padding: 18px; box-sizing: border-box;
    font-family: 'Consolas', 'Courier New', monospace;
}
#adminPanelOverlay.open { display: flex; }

#adminPanelFrame {
    width: 100%; max-width: 1280px; height: 88vh; max-height: 880px;
    background: linear-gradient(180deg, rgba(6,6,20,.97), rgba(3,3,12,.99));
    border: 1px solid rgba(0, 255, 255, 0.28);
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(170,0,255,.10), 0 0 70px rgba(0,255,255,.08), 0 10px 60px rgba(0,0,0,.85);
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ── En-tête ── */
.admin-header {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(0,255,255,.14);
    background: rgba(0,255,255,.03);
}
.admin-header-title {
    color: #00ffff; font-size: .85rem; font-weight: bold; letter-spacing: 3px;
    text-transform: uppercase; text-shadow: 0 0 10px rgba(0,255,255,.45);
}
.admin-header-sub { color: #aa00ff; font-size: .62rem; letter-spacing: 2px; margin-left: 10px; opacity: .75; }
.admin-close-btn {
    background: none; border: 1px solid rgba(255,80,80,.3); color: #ff6666;
    border-radius: 6px; width: 32px; height: 32px; cursor: pointer;
    font-size: .85rem; transition: all .2s;
}
.admin-close-btn:hover { background: rgba(255,80,80,.12); box-shadow: 0 0 10px rgba(255,80,80,.3); }

/* ── Corps : 3 colonnes ── */
.admin-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }

.admin-col { display: flex; flex-direction: column; min-height: 0; }
.admin-col-label {
    color: #3a8a99; font-size: .62rem; letter-spacing: 2px; text-transform: uppercase;
    font-weight: bold; padding: 12px 14px 8px; flex-shrink: 0;
}

/* Colonne gauche — liste des joueurs */
.admin-col-list {
    width: 250px; flex-shrink: 0; border-right: 1px solid rgba(0,255,255,.12);
    background: rgba(0,0,0,.18);
}
.admin-search-input {
    margin: 0 12px 8px; padding: 8px 10px; background: rgba(0,0,0,.5);
    border: 1px solid rgba(0,255,255,.18); border-radius: 6px; color: #cdeeff;
    font-size: .72rem; font-family: inherit; outline: none;
}
.admin-search-input:focus { border-color: rgba(0,255,255,.55); }
.admin-players-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.admin-loading, .admin-empty-hint { color: #444; font-size: .72rem; text-align: center; padding: 24px 10px; letter-spacing: .5px; }

.admin-player-row {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 4px;
    border-radius: 7px; cursor: pointer; border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.admin-player-row:hover { background: rgba(0,255,255,.06); }
.admin-player-row.selected { background: rgba(0,255,255,.10); border-color: rgba(0,255,255,.35); }
.admin-player-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; flex-shrink: 0; }
.admin-player-dot.online { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.admin-player-name { color: #d8f6ff; font-size: .76rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-player-role-tag {
    font-size: .58rem; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px;
    background: rgba(170,0,255,.15); color: #cc88ff; border: 1px solid rgba(170,0,255,.3);
}
.admin-player-banned-tag {
    font-size: .58rem; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px;
    background: rgba(255,60,60,.15); color: #ff8888; border: 1px solid rgba(255,60,60,.3);
}

/* Colonne centrale — statut + runs */
.admin-col-center { flex: 1; min-width: 0; }

.admin-status-bar {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid rgba(0,255,255,.10);
    background: rgba(0,255,255,.02);
}
.admin-status-bar.admin-empty .admin-status-pseudo { color: #444; }
.admin-status-dot { width: 11px; height: 11px; border-radius: 50%; background: #444; flex-shrink: 0; transition: background .2s, box-shadow .2s; }
.admin-status-dot.online  { background: #00ff88; box-shadow: 0 0 10px #00ff88; }
.admin-status-dot.offline { background: #555; }
.admin-status-pseudo { color: #fff; font-size: 1rem; font-weight: bold; letter-spacing: 1px; }
.admin-role-badge {
    font-size: .62rem; padding: 4px 10px; border-radius: 5px; letter-spacing: 1.5px; font-weight: bold;
    background: rgba(170,0,255,.18); color: #cc88ff; border: 1px solid rgba(170,0,255,.4);
}
.admin-role-badge.is-admin { background: rgba(255,170,0,.16); color: #ffcc55; border-color: rgba(255,170,0,.4); }
.admin-status-online { margin-left: auto; font-size: .68rem; color: #777; letter-spacing: .5px; }

.admin-runs-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.admin-runs-list { flex: 1; overflow-y: auto; padding: 0 18px 16px; }

.admin-run-row {
    display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 6px; border-radius: 7px;
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
    font-size: .74rem;
}
.admin-run-date { color: #666; }
.admin-run-phase { color: #aa00ff; font-size: .68rem; letter-spacing: 1px; }
.admin-run-distance { color: #00ffff; font-weight: bold; }
.admin-run-coins { color: #ffd700; }
.admin-run-delete {
    background: rgba(255,60,60,.12); border: 1px solid rgba(255,60,60,.35); color: #ff7777;
    border-radius: 5px; padding: 4px 9px; font-size: .65rem; cursor: pointer; letter-spacing: .5px;
    transition: all .15s;
}
.admin-run-delete:hover { background: rgba(255,60,60,.28); box-shadow: 0 0 8px rgba(255,60,60,.3); }

/* Colonne droite — messagerie */
.admin-col-right {
    width: 280px; flex-shrink: 0; border-left: 1px solid rgba(0,255,255,.12);
    background: rgba(0,0,0,.18); padding-bottom: 14px;
}
.admin-msg-hint { color: #555; font-size: .64rem; line-height: 1.5; padding: 0 14px 10px; letter-spacing: .3px; }
.admin-message-textarea {
    margin: 0 14px; flex: 1; min-height: 120px; resize: none;
    background: rgba(0,0,0,.5); border: 1px solid rgba(0,255,255,.18); border-radius: 7px;
    color: #d8f6ff; font-size: .78rem; font-family: inherit; padding: 10px; outline: none;
}
.admin-message-textarea:focus { border-color: rgba(0,255,255,.55); }
.admin-msg-duration { color: #555; font-size: .64rem; padding: 8px 14px 4px; letter-spacing: .5px; }
.admin-feedback { font-size: .68rem; padding: 6px 14px 0; min-height: 14px; letter-spacing: .3px; }
.admin-feedback.ok    { color: #00ff88; }
.admin-feedback.error { color: #ff6666; }

/* ── Boutons génériques admin ── */
.admin-btn {
    font-family: inherit; font-size: .68rem; font-weight: bold; letter-spacing: 1px;
    text-transform: uppercase; padding: 9px 14px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent; transition: all .15s; white-space: nowrap;
}
.admin-btn:active { transform: scale(.97); }
.admin-btn-cyan    { background: rgba(0,255,255,.10); color: #00ffff; border-color: rgba(0,255,255,.4); }
.admin-btn-cyan:hover    { background: rgba(0,255,255,.22); box-shadow: 0 0 12px rgba(0,255,255,.3); }
.admin-btn-danger  { background: rgba(255,40,40,.12); color: #ff5555; border-color: rgba(255,40,40,.45); }
.admin-btn-danger:hover  { background: rgba(255,40,40,.26); box-shadow: 0 0 12px rgba(255,40,40,.35); }
.admin-btn-gold    { background: rgba(255,215,0,.12); color: #ffd700; border-color: rgba(255,215,0,.4); }
.admin-btn-gold:hover    { background: rgba(255,215,0,.24); box-shadow: 0 0 12px rgba(255,215,0,.3); }
.admin-btn-gold-outline  { background: transparent; color: #c9a800; border-color: rgba(255,215,0,.28); }
.admin-btn-gold-outline:hover { background: rgba(255,215,0,.10); }
.admin-btn-blue    { background: rgba(0,140,255,.12); color: #5fb8ff; border-color: rgba(0,140,255,.4); }
.admin-btn-blue:hover    { background: rgba(0,140,255,.24); box-shadow: 0 0 12px rgba(0,140,255,.3); }
.admin-btn-blue-outline  { background: transparent; color: #3a7fb8; border-color: rgba(0,140,255,.28); }
.admin-btn-blue-outline:hover { background: rgba(0,140,255,.10); }
.admin-btn-purple  { background: rgba(170,0,255,.12); color: #cc88ff; border-color: rgba(170,0,255,.4); }
.admin-btn-purple:hover  { background: rgba(170,0,255,.24); box-shadow: 0 0 12px rgba(170,0,255,.3); }
.admin-btn-ghost   { background: transparent; color: #777; border-color: #2a2a38; }
.admin-btn-ghost:hover   { color: #aaa; border-color: #444; }
.admin-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none !important; }

/* ── Barre d'outils (bas) ── */
.admin-toolbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-top: 1px solid rgba(0,255,255,.14);
    background: rgba(0,0,0,.28);
}
.admin-toolbar-group {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-left: 14px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 4px;
}
.admin-toolbar-group-label { color: #555; font-size: .6rem; letter-spacing: 1.5px; margin-right: 4px; }

/* ── Modales BAN / ÉCONOMIE ── */
.admin-modal-overlay {
    position: fixed; inset: 0; z-index: 1000000;
    background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center; padding: 16px;
    font-family: 'Consolas', 'Courier New', monospace;
}
.admin-modal-overlay.open { display: flex; }
.admin-modal-card {
    width: 100%; max-width: 420px;
    background: #05050f; border: 1px solid rgba(255,60,60,.3); border-radius: 14px;
    padding: 22px; box-shadow: 0 0 60px rgba(255,60,60,.08), 0 10px 50px rgba(0,0,0,.8);
}
#adminEconomyModal .admin-modal-card { border-color: rgba(0,255,255,.3); box-shadow: 0 0 60px rgba(0,255,255,.08), 0 10px 50px rgba(0,0,0,.8); }
.admin-modal-card-sm { max-width: 340px; }
.admin-modal-title {
    color: #ff6666; font-size: .78rem; font-weight: bold; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 16px;
}
#adminEconomyModal .admin-modal-title { color: #00ffff; }
.admin-modal-row { margin-bottom: 14px; }
.admin-modal-label {
    display: block; font-size: .62rem; letter-spacing: 1.5px; color: #666;
    text-transform: uppercase; margin-bottom: 6px;
}
.admin-modal-input, .admin-modal-textarea {
    width: 100%; box-sizing: border-box; background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.14); border-radius: 7px; padding: 10px 12px;
    color: #fff; font-size: .82rem; font-family: inherit; outline: none;
}
.admin-modal-input:focus, .admin-modal-textarea:focus { border-color: rgba(0,255,255,.5); }
.admin-modal-textarea { min-height: 70px; resize: none; }
.admin-ban-type-row { display: flex; gap: 18px; }
.admin-radio { display: flex; align-items: center; gap: 6px; color: #ccc; font-size: .76rem; cursor: pointer; }
.admin-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════
   ⛔ ÉCRAN DE BANNISSEMENT — verrouille toute l'interface
   ════════════════════════════════════════════════════════════════ */
#crBanOverlay {
    position: fixed; inset: 0; z-index: 9999999;
    background: #07020a;
    display: none; align-items: center; justify-content: center; padding: 20px;
    box-sizing: border-box;
}
#crBanCard {
    max-width: 460px; width: 100%; text-align: center;
    background: rgba(20,2,2,.85); border: 1px solid rgba(255,40,40,.4); border-radius: 16px;
    padding: 40px 30px; box-shadow: 0 0 90px rgba(255,0,0,.18);
}
#crBanIcon { font-size: 3rem; margin-bottom: 14px; filter: drop-shadow(0 0 16px rgba(255,40,40,.6)); }
#crBanTitle { color: #ff4444; font-size: 1.3rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 18px rgba(255,40,40,.5); margin-bottom: 18px; }
#crBanIntro { color: #999; font-size: .82rem; margin: 0 0 8px; }
#crBanReason { color: #fff; font-size: 1rem; font-weight: bold; line-height: 1.5; padding: 14px 16px; background: rgba(0,0,0,.4); border-radius: 8px; border: 1px solid rgba(255,60,60,.22); margin-bottom: 14px; }
#crBanRemaining { color: #ff8888; font-size: .82rem; letter-spacing: .5px; margin-bottom: 24px; }
#crBanLeaveBtn {
    background: rgba(255,40,40,.14); color: #ff6666; border: 1px solid rgba(255,40,40,.45);
    border-radius: 8px; padding: 12px 28px; font-size: .8rem; font-weight: bold; letter-spacing: 1.5px;
    cursor: pointer; transition: all .2s;
}
#crBanLeaveBtn:hover { background: rgba(255,40,40,.26); box-shadow: 0 0 18px rgba(255,40,40,.3); }

/* ════════════════════════════════════════════════════════════════
   💬 Toast — message live de l'administrateur
   ════════════════════════════════════════════════════════════════ */
#crAdminMsgToast {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-20px);
    z-index: 9999998; max-width: min(92vw, 520px);
    background: rgba(4,4,18,.96); border: 1px solid rgba(0,255,255,.4); border-radius: 10px;
    padding: 12px 18px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 0 30px rgba(0,255,255,.18), 0 6px 24px rgba(0,0,0,.6);
    opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
#crAdminMsgToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cr-admin-msg-tag { color: #00ffff; font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
.cr-admin-msg-text { color: #fff; font-size: .88rem; line-height: 1.4; }

@media (max-width: 880px) {
    .admin-col-list  { width: 170px; }
    .admin-col-right { width: 220px; }
    .admin-toolbar-group-label { display: none; }
    .admin-header-sub { display: none; }
}
@media (max-width: 680px) {
    #adminPanelFrame { height: 94vh; }
    .admin-body { flex-direction: column; overflow-y: auto; }
    .admin-col-list, .admin-col-right { width: 100%; border: none; border-bottom: 1px solid rgba(0,255,255,.1); }
    .admin-players-list { max-height: 160px; }
    .admin-message-textarea { min-height: 80px; }
}