* { 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; }

/* ── Variables des contrôles tactiles (modifiées dynamiquement par TOUCH_PREFS) ── */
:root {
    --touch-btn-sz:   72px;   /* taille boutons capacités */
    --touch-arrow-sz: 92px;   /* taille boutons flèches */
    --cap-left:       5%;
    --cap-right:      auto;
}

/* 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:active { transform: translateY(0) scale(.95); transition: transform .08s ease; }
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); }
.btn-secondary:active { transform: scale(.95); transition: transform .08s ease; }

.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: var(--cap-left);
    right: var(--cap-right);
    z-index: 9;
    width: var(--touch-btn-sz); height: var(--touch-btn-sz);
    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: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    /* animation gérée par ANIMATIONS MENUS */
    opacity: 0; visibility: hidden; pointer-events: none;
}
#settingsOverlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
#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);
    /* Le panneau peut contenir beaucoup de lignes (son, contrôles tactiles,
       pseudo, actions...) — sur mobile (surtout en paysage) ça peut dépasser
       la hauteur d'écran. On le rend scrollable en interne pour que les
       boutons Fermer/Reprendre restent TOUJOURS accessibles. */
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#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; }

/* ── Sélecteur de layout tactile (dans paramètres) ────────── */
.tc-option-group {
    display: flex; gap: 7px; flex-wrap: wrap; width: 100%; margin-top: 4px;
}
.tc-option-btn {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.04); border: 1px solid #252538;
    border-radius: 8px; padding: 8px 4px 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .5px;
    text-align: center; color: #555; cursor: pointer; margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: border-color .2s, color .2s, background .2s;
    -webkit-tap-highlight-color: transparent; font-family: inherit;
    text-transform: uppercase;
}
.tc-option-btn .tc-icon { font-size: 1.3rem; line-height: 1; }
.tc-option-btn.tc-active {
    border-color: rgba(0,255,255,.55);
    background: rgba(0,255,255,.08);
    color: #00ffcc;
    box-shadow: 0 0 10px rgba(0,255,255,.12);
}
.tc-option-btn:active { transform: scale(0.96); }
.tc-section-label {
    font-size: .62rem; letter-spacing: 1.5px; color: #444;
    text-transform: uppercase; margin: 8px 0 2px; width: 100%;
}
/* Masquer la section contrôles tactiles sur desktop (hors touch) */
@media (hover: hover) and (pointer: fine) {
    #settingsTouchSection { display: none; }
}

/* ═══════════════════════════════════════════
   MENU PRINCIPAL v3 — refonte
═══════════════════════════════════════════ */
#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%);
}

/* ── Barre de statut supérieure ── */
#menuTopBar {
    position: relative; z-index: 2; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px;
    padding: 12px clamp(14px,4vw,26px) 0;
}
#menuSystemStatus {
    display: flex; align-items: center; gap: 7px;
    font-size: clamp(.6rem,1.8vw,.72rem); font-weight: 700; letter-spacing: 1.5px;
    color: #00ff88; text-transform: uppercase; white-space: nowrap;
}
#menuSystemStatus .dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: #00ff88; box-shadow: 0 0 8px #00ff88;
    animation: menuStatusBlink 2.4s ease-in-out infinite;
}
@keyframes menuStatusBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#menuTopRight {
    display: flex; align-items: center; gap: clamp(8px,2vw,14px); flex-wrap: nowrap;
}
#menuTopBar #menuCoinsBadge,
#menuTopBar #menuKryptsBadge {
    background: none; border: none; padding: 0; border-radius: 0;
    display: flex; align-items: center; gap: 4px;
    font-size: clamp(.74rem,2vw,.86rem);
    white-space: nowrap;
}

#menuInner {
    position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; padding: clamp(16px,4vw,32px) clamp(16px,5vw,40px);
    justify-content: center; gap: clamp(10px,2.5vw,22px);
    overflow-y: auto;
}
#menuLogo {
    text-align: center; line-height: 1;
}
#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;
    color: #fff;
    text-shadow: 0 0 22px rgba(255,255,255,.22);
    display: block;
}
#menuLogo .logo-accent {
    color: #00ff88;
    text-shadow: 0 0 18px rgba(0,255,136,.65), 0 0 40px rgba(0,255,136,.3);
}
#menuPlayBtn {
    background: #00ff88;
    color: #04140d !important; border: none !important;
    padding: clamp(14px,3vw,18px) clamp(46px,11vw,86px);
    font-size: clamp(1rem,3.5vw,1.3rem); font-weight: 900;
    letter-spacing: 3px; text-transform: uppercase;
    border-radius: 999px; cursor: pointer; margin: 0;
    box-shadow: 0 0 30px rgba(0,255,136,.35), 0 8px 22px rgba(0,0,0,.4);
    transition: box-shadow .2s, transform .15s;
}
#menuPlayBtn:hover {
    box-shadow: 0 0 46px rgba(0,255,136,.55), 0 10px 28px rgba(0,0,0,.5);
    transform: translateY(-3px);
}
#menuPlayBtn:active { transform: scale(0.97); box-shadow: 0 0 20px rgba(0,255,136,.3); }

/* ── Ligne de sauvegarde — une seule ligne, discrète ── */
#menuSaveRow {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
}
#menuSaveRow #saveStatus { justify-content: center; margin-top: 0; }


#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 supprimé — sauvegarde locale retirée */

/* Settings gear — intégré à la barre du haut */
#menuSettingsBtn {
    position: static; z-index: 2; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(255,255,255,.03); border: 1px solid #1a1a28;
    color: #555; font-size: .9rem; 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 (Mission Admin) — sous la barre du haut */
#menuAdminBtn {
    position: absolute; top: 52px; left: 14px; z-index: 2;
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(255,255,255,.03); border: 1px solid #1a1a28;
    color: #333; font-size: 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); }

/* ── Barre de navigation inférieure ── */
#menuBottomNav {
    position: relative; z-index: 2; flex-shrink: 0;
    display: flex; width: 100%;
    border-top: 1px solid #15151f;
    background: rgba(0,0,0,.35);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#menuBottomNav .nav-item {
    position: relative; flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; background: none; border: none; box-shadow: none;
    padding: clamp(9px,2vw,13px) 4px; margin: 0; border-radius: 0;
    color: #666; cursor: pointer; transition: color .2s;
    -webkit-tap-highlight-color: transparent;
}
#menuBottomNav .nav-item:hover  { color: #aaa; transform: none; box-shadow: none; background: none; }
#menuBottomNav .nav-item:active { transform: scale(0.95); }
#menuBottomNav .nav-item:first-child { color: #ff4fa3; }
#menuBottomNav .nav-item:first-child:hover { color: #ff7cb8; }
#menuBottomNav .nav-icon { font-size: clamp(1.05rem,3vw,1.3rem); line-height: 1; }
#menuBottomNav .nav-label {
    font-size: clamp(.56rem,1.6vw,.66rem); font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase;
}
#menuBottomNav .nav-badge {
    position: absolute; top: 2px; right: calc(50% - 26px);
    min-width: 15px; height: 15px; padding: 0 3px; border-radius: 50%;
    background: #ff4444; color: #fff; font-size: .62rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 6px rgba(255,68,68,.7); cursor: pointer;
}

/* 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); } }

/* ===== BANNIÈRE RUN-BOOST — CoinBoost / Fog Mode / futurs items "prochain run" ===== */
#runBoostBanner {
    position: absolute;
    top: 34%;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-14px) scale(0.92);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
#runBoostBanner span { display: inline-block; }
#runBoostBannerIcon {
    font-size: 1.7rem;
    filter: drop-shadow(0 0 8px var(--rb-color, #ff8800));
}
#runBoostBannerText {
    font-size: 1.4rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    padding: 8px 20px;
    background: rgba(5, 5, 10, 0.72);
    border: 1px solid var(--rb-color, #ff8800);
    border-radius: 6px;
    text-shadow: 0 0 10px var(--rb-color, #ff8800);
    box-shadow: 0 0 18px -2px var(--rb-color, #ff8800);
}
#runBoostBanner.rb-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: rbPulse 0.9s ease-in-out 1;
}
@keyframes rbPulse {
    0%   { transform: translateY(0) scale(0.9); }
    35%  { transform: translateY(0) scale(1.05); }
    100% { transform: translateY(0) 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);
}
/* ── Layout southpaw : zones inversées (flèches à droite) ── */
#touchControls.tc-southpaw { flex-direction: row-reverse; }
#touchControls.tc-southpaw .touch-zone-left { border-right: none; border-left: 1px solid rgba(0,255,255,0.08); }
/* ── Layout compact : boutons capacités plus petits et proches ── */
#touchControls.tc-compact .touch-zone { padding-bottom: 6px; }
.touch-btn {
    width: var(--touch-arrow-sz);
    height: var(--touch-arrow-sz);
    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-y: auto; overflow-x: hidden; justify-content: flex-start; padding-top: clamp(20px,4vh,40px); padding-bottom: clamp(20px,4vh,40px); }

/* Barre d'actions (← Retour / Télécharger / Effacer) ancrée en bas de
   l'écran Stats : reste visible sans avoir à scroller jusqu'en bas. */
#historyActions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: linear-gradient(to bottom, rgba(5,5,8,0) 0%, #050508 30%);
    padding: 16px 0 6px;
}
#historyList {
    width: min(680px, 92vw);
    max-height: none;
    overflow-y: visible;
}
#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: minmax(88px,1.2fr) 62px 60px 68px 66px 54px 64px;
    align-items: center;
    padding: clamp(7px, 1.5vw, 11px) clamp(8px, 2vw, 14px);
    border-bottom: 1px solid #1a1a22;
    font-size: clamp(0.68rem, 1.9vw, 0.85rem);
    transition: background 0.15s;
    animation: historyRowIn .35s cubic-bezier(.22,1,.36,1) both;
}
.history-row .hr-cell:not(.hr-date) { text-align: right; }
.history-row .hr-date { color: #666; font-size: 0.82rem; }
.hr-label-tag { display: none; } /* étiquette mobile, cf. media query ci-dessous */
@keyframes historyRowIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}
.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; }

/* ═══════════════════════════════════════════════════════
   STATS DASHBOARD — glassmorphism + néon cyberpunk
═══════════════════════════════════════════════════════ */
#statsDash { width: min(680px, 92vw); margin-bottom: clamp(10px,2vw,18px); }

/* ── Jauges circulaires héros ── */
#statsHeroRow {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 2vw, 16px);
    margin-bottom: clamp(14px, 3vw, 22px);
}
.stat-ring-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: clamp(10px,2vw,16px) clamp(6px,1.5vw,10px) clamp(12px,2vw,16px);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
}
.stat-ring-card:hover {
    transform: translateY(-3px);
    border-color: var(--ring-accent);
    box-shadow: 0 8px 26px -6px rgba(0,0,0,.6), 0 0 22px -6px var(--ring-accent);
}
.stat-ring { width: clamp(74px, 18vw, 108px); aspect-ratio: 1/1; transform: rotate(-90deg); }
.ring-track {
    fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9;
}
.ring-fill {
    fill: none; stroke: var(--ring-accent); stroke-width: 9; stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--ring-accent));
}
.ring-center {
    position: absolute; top: clamp(10px,2vw,16px);
    width: clamp(74px, 18vw, 108px); height: clamp(74px, 18vw, 108px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-value {
    font-family: 'Segoe UI', Arial, sans-serif; font-weight: 800;
    font-size: clamp(1rem, 3.4vw, 1.4rem); color: #fff;
    text-shadow: 0 0 10px var(--ring-accent);
    line-height: 1;
}
.ring-unit { font-size: .6em; color: #888; margin-left: 2px; font-family: inherit; }
.stat-ring-label {
    margin: clamp(6px,1.4vw,10px) 0 0; font-size: clamp(.62rem,1.7vw,.76rem);
    color: #999; text-align: center; letter-spacing: .4px;
}

/* ── Grille de métriques ── */
#statsGrid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(7px, 1.6vw, 12px);
    margin-bottom: clamp(14px, 3vw, 22px);
}
.stat-card {
    position: relative;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.07);
    border-left: 3px solid var(--card-accent);
    border-radius: 10px;
    padding: clamp(9px,1.8vw,14px) clamp(10px,2vw,14px);
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
.stat-card::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 85% -10%, var(--card-accent) 0%, transparent 60%);
    opacity: .08; pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-2px) scale(1.015);
    background: rgba(255,255,255,.045);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.55), 0 0 14px -4px var(--card-accent);
}
.stat-card-icon { font-size: clamp(1.05rem, 3vw, 1.3rem); }
.stat-card-value {
    font-family: 'Segoe UI', Arial, sans-serif; font-weight: 800;
    font-size: clamp(1rem, 3vw, 1.3rem); color: var(--card-accent);
    text-shadow: 0 0 8px color-mix(in srgb, var(--card-accent) 60%, transparent);
}
.stat-card-label { font-size: clamp(.6rem, 1.6vw, .72rem); color: #888; letter-spacing: .3px; }
.stat-card-sub { font-size: clamp(.55rem, 1.4vw, .66rem); color: #666; margin-top: 1px; }
.stat-card-wide { grid-column: span 3; flex-direction: row; align-items: center; gap: 12px; }
.stat-card-progress { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.stat-bar-wrap {
    width: 100%; height: 6px; border-radius: 4px; overflow: hidden;
    background: rgba(255,255,255,.07); margin-top: 2px;
}
.stat-bar {
    height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, #ffd700, #ff8800);
    box-shadow: 0 0 8px #ffd70099;
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
}

/* ── Dernière run ── */
#statsLastRun { margin-bottom: clamp(14px, 3vw, 22px); }
#lastRunRow {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(6px, 1.4vw, 10px);
}
.lr-chip {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    padding: clamp(7px,1.6vw,10px) 4px;
    transition: border-color .2s, transform .2s;
}
.lr-chip:hover { border-color: var(--chip-accent); transform: translateY(-2px); }
.lr-val { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 800; font-size: clamp(.78rem,2.2vw,.95rem); color: var(--chip-accent); }
.lr-lbl { font-size: clamp(.55rem,1.4vw,.64rem); color: #777; letter-spacing: .3px; text-transform: uppercase; }

/* ── Comparaison au record — dernière run ── */
.lr-record-badge {
    display: none;
    text-align: center; font-size: clamp(.68rem,1.8vw,.8rem); font-weight: 700;
    margin-top: 10px; padding: 6px 12px; border-radius: 8px; letter-spacing: .2px;
}
.lr-record-badge:not(:empty) { display: block; animation: slideUpIn .35s cubic-bezier(.22,1,.36,1) both; }
.lr-record-badge.lr-record-new {
    color: #ffd700; background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.4);
    text-shadow: 0 0 8px rgba(255,215,0,.6);
    animation: lrRecordPulse 1.5s ease-in-out infinite;
}
.lr-record-badge.lr-record-near {
    color: #ff9900; background: rgba(255,153,0,.1); border: 1px solid rgba(255,153,0,.3);
}
@keyframes lrRecordPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50%      { box-shadow: 0 0 16px rgba(255,215,0,.45); }
}

/* ── Graphique de progression ── */
#statsChartWrap {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: clamp(10px,2vw,14px);
    margin-bottom: clamp(6px,1.5vw,10px);
}
.chart-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-bottom: clamp(8px,1.6vw,12px);
}
.chart-toggle { display: flex; gap: 4px; background: rgba(255,255,255,.04); border-radius: 7px; padding: 3px; }
.chart-toggle-btn {
    background: transparent; color: #888; border: none; box-shadow: none;
    padding: 4px 12px; margin: 0; font-size: clamp(.62rem,1.6vw,.72rem);
    font-weight: 700; border-radius: 5px; letter-spacing: .3px; text-transform: uppercase;
    transition: background .15s, color .15s;
}
.chart-toggle-btn:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.06); color: #ccc; }
.chart-toggle-btn.active { background: #00ffff; color: #000; }
#statsChart { width: 100%; height: clamp(100px, 22vw, 160px); display: block; touch-action: pan-y; }
.chart-dot { opacity: 0; animation: chartDotIn .4s ease-out forwards; }
@keyframes chartDotIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.chart-tooltip { opacity: 0; }

/* ── État vide engageant (aucune partie jouée) ── */
#statsEmptyState {
    display: none; flex-direction: column; align-items: center; gap: 8px;
    width: min(680px, 92vw); padding: clamp(28px,6vw,48px) clamp(16px,4vw,24px);
    text-align: center;
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}
.stats-empty-icon { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: 4px; }
.stats-empty-title { font-size: clamp(.95rem,2.6vw,1.15rem); color: #ccc; font-weight: 700; margin: 0; }
.stats-empty-sub { font-size: clamp(.75rem,2vw,.85rem); color: #777; margin: 0 0 6px; }
#historyScreen.has-no-data #statsDash,
#historyScreen.has-no-data #historyList,
#historyScreen.has-no-data > .g-section-title,
#historyScreen.has-no-data #historyActions { display: none; }
#historyScreen.has-no-data #statsEmptyState { display: flex; }

@media (max-width: 560px) {
    #statsGrid { grid-template-columns: repeat(2, 1fr); }
    .stat-card-wide { grid-column: span 2; }
    #lastRunRow { grid-template-columns: repeat(3, 1fr); }

    /* Journal des runs → cards empilées plutôt que table dense */
    .history-row:not(.header) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 10px;
        border: 1px solid #1a1a22; border-radius: 8px;
        margin-bottom: 6px; border-bottom: 1px solid #1a1a22;
    }
    .history-row:not(.header) .hr-cell { text-align: left; display: flex; flex-direction: column; gap: 1px; }
    .history-row:not(.header) .hr-cell::before {
        content: attr(data-label);
        font-size: .58rem; color: #666; text-transform: uppercase; letter-spacing: .4px;
    }
    .history-row:not(.header) .hr-date { grid-column: span 2; }
    .history-row.header { display: none; }
}

#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.cloud .dot { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
#saveStatus.cloud { color: #00ff88; }
#saveStatus.saving .dot { background: #ffd700; animation: blink 0.5s infinite; }
#saveStatus.saving { color: #ffd700; }
#saveStatus.error .dot { background: #ff4444; }
#saveStatus.error { color: #ff4444; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }


#btnLinkFolder.linked { color: #00ff88; border-color: #00ff88; }

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

/* ===== 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 ===== */

/* ===== HUD ULTRA COMPACT — écrans très étroits < 360px ===== */
@media (max-width: 360px) {
    /* Le HUD colle davantage aux bords et réduit son empreinte */
    #hud {
        top: 4px; left: 4px; right: 4px;
        gap: 2px;
        font-size: 0.5rem;
    }
    #hud .hud-item {
        padding: 2px 5px;
    }

    /* Icônes de capacités (nitro / fantôme / bouclier / flow zone) */
    #hudNitroItem,
    #hudPhantomItem,
    #hudShieldItem,
    #hudFlowZoneItem {
        padding: 2px 5px;
        font-size: 0.6rem;
        gap: 4px;
    }
    #nitroBarWrap,
    #phantomBarWrap,
    #hudFlowZoneItem .fz-bar-wrap {
        width: 26px !important;
    }
    #phantomBar,
    #nitroBar {
        width: 26px !important;
    }

    /* Défis (challengeHUD) : encore plus resserré pour ne pas déborder
       sur la zone des contrôles tactiles ni sur le reste du HUD */
    #challengeHUD {
        top: 50px;
        right: 5px;
        gap: 3px;
    }
    .chall-item {
        padding: 3px 6px;
        font-size: 0.5rem;
        gap: 4px;
    }
    .chall-bar-wrap { width: 38px; height: 3px; }

    /* Alertes near-miss / combo / défi : polices encore réduites */
    #nearMissAlert .nm-title  { font-size: .54rem; letter-spacing: 1px; }
    #nearMissAlert .nm-coins  { font-size: .48rem; }
    #comboAlert .combo-label  { font-size: .6rem; letter-spacing: 1px; }
    #comboAlert .combo-sub    { font-size: .48rem; }
    #challengePopup .cp-title { font-size: .54rem; letter-spacing: .5px; }
    #challengePopup .cp-sub   { font-size: .46rem; }

    /* Badge Omega du HUD */
    #hudOmegaBadge { padding: 2px 5px; font-size: 0.55rem; }
}
/* ===== FIN HUD ULTRA 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;
}
/* ── 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; }

/* ── Tab panels — transition d'entrée/sortie ── */
.gtab-panel {
    display: none;
    opacity: 0;
}
.gtab-panel.active {
    display: block;
    animation: tabPanelEnter .32s cubic-bezier(.22,1,.36,1) both;
}
.gtab-panel.tab-exiting {
    display: block !important;
    pointer-events: none;
    animation: tabPanelExit .18s ease forwards;
}
/* Direction "avant" : l'onglet ciblé est à droite de l'onglet courant
   → le contenu courant part vers la gauche, le nouveau arrive depuis la droite. */
.gtab-panel.active.dir-fwd {
    animation: tabPanelEnterFromRight .34s cubic-bezier(.22,1,.36,1) both;
}
.gtab-panel.tab-exiting.dir-fwd {
    animation: tabPanelExitToLeft .2s ease forwards;
}
/* Direction "arrière" : l'onglet ciblé est à gauche de l'onglet courant
   → le contenu courant part vers la droite, le nouveau arrive depuis la gauche. */
.gtab-panel.active.dir-back {
    animation: tabPanelEnterFromLeft .34s cubic-bezier(.22,1,.36,1) both;
}
.gtab-panel.tab-exiting.dir-back {
    animation: tabPanelExitToRight .2s ease forwards;
}

@keyframes tabPanelEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tabPanelExit {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes tabPanelEnterFromRight {
    from { opacity: 0; transform: translateX(38px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tabPanelEnterFromLeft {
    from { opacity: 0; transform: translateX(-38px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tabPanelExitToLeft {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(-32px); }
}
@keyframes tabPanelExitToRight {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(32px); }
}

/* ── Indicateur d'onglet actif animé ── */
.gtab {
    position: relative;
    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 .22s;
    user-select: none; -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.gtab.active {
    color: #00ffff;
    border-color: transparent; /* géré par ::after */
    text-shadow: 0 0 10px rgba(0,255,255,.5);
}
.gtab.active::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff 20%, #00ffff 80%, transparent);
    box-shadow: 0 0 10px rgba(0,255,255,.7);
    animation: tabIndicator .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tabIndicator {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
.gtab:not(.active):hover  { color: #999; border-color: #333; }
.gtab:not(.active):active { color: #bbb; }

/* ── 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); }
.btn-buy.locked-nc-only {
    background: #14141e; color: #4488bb; border: 1px solid #1a3a55;
    cursor: not-allowed; box-shadow: none; transform: none;
    font-size: clamp(.6rem,1.6vw,.72rem);
}
.btn-buy.locked-nc-only:disabled { background:#14141e; color:#4488bb; }

/* ── 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 — TOUJOURS VISIBLE (hors du scroll) ── */
#garageFooter {
    flex-shrink: 0;
    padding: clamp(10px,2vw,16px) clamp(16px,4vw,36px);
    border-top: 1px solid #111;
    display: flex; justify-content: center;
    background: #050508;
    z-index: 2;
}
.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 */
    #menuTopBar { padding: 6px 12px 0; }
    #menuSystemStatus { font-size: .58rem; }
    #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-main { font-size: clamp(1.6rem, 7vh, 2.6rem); line-height: 1; }
    #menuTopBar #menuCoinsBadge { font-size: 0.72rem; }
    #menuTopBar #menuKryptsBadge { font-size: 0.72rem; }
    #menuSaveRow { display: none !important; }
    #menuPlayBtn { padding: 11px 36px !important; font-size: 0.95rem !important; letter-spacing: 3px; }
    #menuBottomNav .nav-item { padding: 5px 4px; }
    #menuBottomNav .nav-icon { font-size: 1rem; }
    #menuBottomNav .nav-label { font-size: .56rem; }

    /* 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 : scroll géré par #historyScreen (dashboard ajouté) */

    /* Paramètres / Pause compact — évite de devoir scroller pour
       atteindre les boutons Fermer/Reprendre sur petit écran paysage */
    #settingsPanel { gap: 10px; padding: 14px 20px; max-height: 92vh; max-height: 92dvh; }
    #settingsPanel h3 { margin-bottom: 0; }
    .settings-sub { display: none; }
    .settings-row { gap: 8px; }
    #settingsTouchSection .tc-option-btn { padding: 6px 4px 4px; font-size: .62rem; }
}


/* ═══════════════════════════════════════
   RESPONSIVE PORTRAIT MOBILE
═══════════════════════════════════════ */
@media (max-width: 480px) {
    /* ══════════════════════════════════════════════════════
       MENU MOBILE — tout sur un écran, zéro scroll
       Stratégie : #menuScreen en colonne flex, topbar et
       bottomnav en hauteur auto, #menuInner se partage le reste
    ══════════════════════════════════════════════════════ */
    #menuScreen { overflow: hidden; }

    #menuTopBar { padding: max(env(safe-area-inset-top, 8px), 8px) 12px 0; }
    #menuSystemStatus { font-size: .56rem; }
    #menuTopBar #menuCoinsBadge, #menuTopBar #menuKryptsBadge { font-size: .68rem; }

    #menuInner {
        padding: 0 16px max(env(safe-area-inset-bottom, 6px), 6px) 16px;
        gap: 0;                   /* on gère les espaces via flex-grow/margin */
        justify-content: space-between;
        overflow: hidden;
    }

    /* ── Logo : compact, juste le titre principal ─────── */
    #menuLogo { text-align: center; margin-bottom: 0; flex-shrink: 0; }
    #menuLogo .logo-main {
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 1;
        /* On réduit aussi le glow pour gagner du rendu vertical */
        text-shadow: 0 0 10px rgba(255,255,255,.18);
    }
    #menuLogo .logo-accent { text-shadow: 0 0 12px rgba(0,255,136,.5); }

    /* ── Ligne sauvegarde : compacte, une seule ligne ──── */
    #menuSaveRow { font-size: .7rem; flex-shrink: 0; margin: 4px 0; }

    /* ── Bouton JOUER : bien visible, taille raisonnable ─ */
    #menuPlayBtn {
        padding: 15px 0 !important;
        font-size: 1.05rem !important;
        letter-spacing: 4px;
        width: 85%;
        flex-shrink: 0;
        margin: 4px 0;
    }

    /* ── Missions du jour : petite ligne entre JOUER et footer ── */
    #dailyMissionsBadge {
        font-size: .64rem;
        margin: 3px 0 0;
        opacity: .75;
        flex-shrink: 0;
        text-align: center;
    }

    /* ── Enregistrer & Quitter : minimaliste tout en bas ─ */
    #btnSaveQuit {
        font-size: .6rem;
        padding: 5px 14px;
        margin: 2px 0 0;
        flex-shrink: 0;
    }

    /* ── Barre de navigation inférieure : plus compacte ── */
    #menuBottomNav .nav-item { padding: 8px 4px; }
    #menuBottomNav .nav-label { font-size: .58rem; }

    /* ── Pass Cyber : onglet vertical, bord droit ─ */
    #btnPassCyber {
        width: 32px;
        top: max(env(safe-area-inset-top, 50px), 50px);
        bottom: max(env(safe-area-inset-bottom, 50px), 50px);
        padding: 10px 0 12px;
    }
    #passBtnLabel { font-size: .58rem; }

    /* ── Garage ─────────────────────────────────────────── */
    #garageScreen { display: flex; flex-direction: column; }
    #garageBody { flex: 1 1 0; min-height: 0; }
    .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; }
}

/* Très petits écrans (iPhone SE, 375×667) — encore plus compact */
@media (max-width: 390px) and (max-height: 700px) {
    #menuLogo .logo-main { font-size: 1.8rem; }
    #menuTopBar #menuCoinsBadge, #menuTopBar #menuKryptsBadge { font-size: .64rem; }
    #menuPlayBtn { padding: 12px 0 !important; font-size: .95rem !important; }
    #menuBottomNav .nav-item { padding: 6px 4px; }
    #dailyMissionsBadge { display: none; }
    #btnSaveQuit { display: none; }
}
/* 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: var(--cap-left);
    right: var(--cap-right);
    z-index: 9;
    width: var(--touch-btn-sz); height: var(--touch-btn-sz);
    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; }

/* ===== BOUTON CAMÉRA (tactile) ===== */
#cameraTouchBtn {
    display: none;
    position: fixed;
    bottom: clamp(80px, 14vw, 120px);
    right: clamp(10px, 3vw, 22px);
    width:  clamp(48px, 11vw, 66px);
    height: clamp(48px, 11vw, 66px);
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.12);
    border: 2px solid rgba(0, 200, 255, 0.55);
    color: #fff;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1200;
    box-shadow: 0 0 10px rgba(0,200,255,0.35);
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
#cameraTouchBtn.show    { display: flex; }
#cameraTouchBtn.pressed { background: rgba(0,200,255,0.3); border-color: #fff; }

/* ===== TOAST MODE CAMÉRA ===== */
#camModeToast {
    position: fixed;
    top: clamp(70px, 12vw, 95px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,200,255,0.15);
    border: 1px solid rgba(0,200,255,0.6);
    color: #00e5ff;
    font-family: monospace;
    font-size: clamp(.75rem, 2.5vw, 1rem);
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 6px 18px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 1300;
    opacity: 0;
    transition: opacity .25s;
    text-transform: uppercase;
}
#camModeToast.show { opacity: 1; }

/* ===== 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:flex;
    align-items:center; justify-content:center;
    backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .25s ease, visibility .25s ease;
}
#leaderboardModal.open { opacity:1; visibility:visible; pointer-events:auto; }
#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);
    transform: scale(.9) translateY(16px);
    transition: transform .32s cubic-bezier(.34,1.4,.64,1);
}
#leaderboardModal.open #leaderboardPanel { transform: none; }
#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; }
.lb-name-cell { display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.lb-meta { font-size:.66rem; color:#666; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#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;
}

#goGuestBanner {
    width:100%; text-align:center; padding:clamp(8px,2vw,12px) 16px;
    background: linear-gradient(135deg, rgba(0,180,255,.1), rgba(0,220,255,.05));
    border:1px solid rgba(0,220,255,.3); border-radius:8px;
    display:none; flex-direction:column; align-items:center; gap:8px;
}
#goGuestBanner .guest-banner-icon { font-size:clamp(1rem,2.6vw,1.3rem); }
#goGuestBanner .guest-banner-text {
    margin:0; font-size:clamp(.68rem,1.8vw,.8rem); color:#9fe8ff; line-height:1.4;
}
#goGuestBanner button { width:auto; padding:8px 16px; font-size:.72rem; }

#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: 99999999; /* au-dessus de tout le reste (auth, admin, popups...) */
    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; }
/* 🎮 En jeu (clic sur JOUER) : toujours caché, même si dr-visible est actif. */
#drCountdownBadge.dr-hidden-ingame { display: none !important; }
#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:var(--cap-left); right:var(--cap-right);
    z-index:9; width:var(--touch-btn-sz); height:var(--touch-btn-sz); 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: 10600; /* au-dessus de tout (sauf rewards, admin, ban) */
    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);
}

/* ── 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); }

/* ── Bouton "Continuer en invité" — visible mais volontairement discret :
   texte souligné, pas de fond plein, pour ne jamais rivaliser visuellement
   avec CONNEXION/INSCRIPTION qui restent l'action principale. ── */
.auth-guest-btn {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: none;
    color: #888;
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-family: inherit;
    padding: 6px 10px;
    transition: color 0.2s;
}
.auth-guest-btn:hover { color: #ccc; }

/* ── 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; }

/* ── "Se souvenir de moi" ────────────────────────────────── */

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: #484858;
    cursor: pointer;
    margin-bottom: 12px;
    text-transform: uppercase;
    user-select: none;
}
.auth-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #aa00ff;
    cursor: pointer;
    flex-shrink: 0;
}
.auth-remember-hint {
    color: #2a2a3a;
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    text-transform: none;
}

/* ── Boutons connexion rapide (fichier / QR) ─────────────── */

.auth-quick-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.auth-quick-btn {
    flex: 1;
    padding: 9px 6px;
    background: rgba(170, 0, 255, 0.06);
    border: 1px solid rgba(170, 0, 255, 0.2);
    border-radius: 7px;
    color: #6a4a8a;
    font-size: 0.58rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
}
.auth-quick-btn:hover {
    border-color: rgba(170, 0, 255, 0.45);
    color: #aa66cc;
    background: rgba(170, 0, 255, 0.1);
}

/* ── Zone caméra QR ──────────────────────────────────────── */

#crQRScanZone {
    margin-top: 14px;
    border: 1px solid rgba(170, 0, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
#crQRVideo {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}
.auth-scan-hint {
    text-align: center;
    color: #555;
    font-size: 0.62rem;
    letter-spacing: 2px;
    padding: 8px;
    margin: 0;
    text-transform: uppercase;
}

/* ── Onglet & formulaire PIN ─────────────────────────────── */

.auth-pin-intro {
    font-size: 0.68rem;
    color: #484858;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    line-height: 1.6;
    text-align: center;
}
.auth-pin-hint {
    display: block;
    margin-top: 4px;
    color: #2a2a3a;
    font-size: 0.62rem;
}

/* ── Grille connexion rapide (profil) ────────────────────── */

.profile-quickauth-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.profile-quickauth-btn {
    width: 100%;
    padding: 10px 14px;
    background: rgba(170, 0, 255, 0.06);
    border: 1px solid rgba(170, 0, 255, 0.2);
    border-radius: 7px;
    color: #7a5a9a;
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: inherit;
    text-align: left;
}
.profile-quickauth-btn:hover:not(:disabled) {
    border-color: rgba(170, 0, 255, 0.45);
    color: #cc88ff;
    background: rgba(170, 0, 255, 0.1);
}
.profile-quickauth-btn:disabled {
    opacity: 0.45;
    cursor: default;
}


/* ════════════════════════════════════════════════════════════
   BOUTON PROFIL (legacy — remplacé par l'icône Profil de la
   barre de navigation du bas du menu principal)
   ════════════════════════════════════════════════════════════ */

#crProfileBtn {
    display: none !important;
}


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

#crProfileOverlay {
    position: fixed;
    inset: 0;
    z-index: 10100; /* au-dessus du leaderboard (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: 10200; /* au-dessus du leaderboard (10000) et du profil (10100) */
    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: 10450; /* au-dessus de tous les modals interactifs, pointer-events:none */
    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: 10400; /* au-dessus du modal ami (10200) et notifs (10300) */
    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: flex;
    align-items: center; justify-content: center;
    padding: 18px; box-sizing: border-box;
    font-family: 'Consolas', 'Courier New', monospace;
    /* animation gérée par le bloc ANIMATIONS MENUS en bas du fichier */
    opacity: 0; visibility: hidden; pointer-events: none;
}
#adminPanelOverlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

#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-delete-account { background: rgba(180,0,0,.18); color: #ff3333; border-color: rgba(200,0,0,.55); font-weight: 700; letter-spacing: .04em; }
.admin-btn-delete-account:hover { background: rgba(200,0,0,.34); box-shadow: 0 0 14px rgba(200,0,0,.5); }
.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: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: 'Consolas', 'Courier New', monospace;
    opacity: 0; visibility: hidden; pointer-events: none;
}
.admin-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.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; }

/* ── Modale Restaurations de compte ──────────────────────────── */
.admin-modal-card-resets { max-width: 620px; border-color: rgba(170,0,255,.35); box-shadow: 0 0 60px rgba(170,0,255,.08), 0 10px 50px rgba(0,0,0,.8); }
.admin-resets-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.admin-reset-row {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.admin-reset-row.reset-pending  { border-color: rgba(255,200,50,.25); }
.admin-reset-row.reset-approved { border-color: rgba(0,255,136,.25); background: rgba(0,255,136,.04); }
.admin-reset-row.reset-rejected { border-color: rgba(255,60,60,.2);  opacity: .65; }
.admin-reset-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-reset-icon   { font-size: .9rem; }
.admin-reset-pseudo { font-size: .82rem; font-weight: 700; color: #eee; letter-spacing: .5px; }
.admin-reset-id     { color: #555; font-size: .75rem; }
.admin-reset-date   { color: #444; font-size: .68rem; margin-left: auto; }
.admin-reset-temppwd { font-size: .72rem; color: #aaa; padding-left: 4px; }
.admin-reset-temppwd code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px; color: #00ff88; letter-spacing: 2px; font-size: .78rem; }
.admin-reset-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.reset-applied-tag  { font-size: .58rem; background: rgba(0,255,136,.15); color: #00ff88; border-radius: 4px; padding: 1px 6px; letter-spacing: .5px; }
.reset-waiting-tag  { font-size: .58rem; background: rgba(255,200,50,.15); color: #ffcc33; border-radius: 4px; padding: 1px 6px; letter-spacing: .5px; }
.admin-btn-has-notif { box-shadow: 0 0 10px rgba(170,0,255,.4); }

/* ── Formulaire Récupération de compte (auth overlay) ─────────── */
.auth-tab-recovery { font-size: .62rem; letter-spacing: .8px; color: #9966ff !important; }
.auth-tab-recovery.active { border-bottom-color: #9966ff; color: #cc88ff !important; }
.recovery-status {
    margin-top: 12px; padding: 10px 14px; border-radius: 7px;
    font-size: .72rem; letter-spacing: .4px; line-height: 1.5; text-align: center;
}
.recovery-status.pending { background: rgba(255,200,50,.08); color: #ffcc55; border: 1px solid rgba(255,200,50,.2); }
.recovery-status.error   { background: rgba(255,60,60,.08);  color: #ff7777; border: 1px solid rgba(255,60,60,.2); }
.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; }
}

/* ════════════════════════════════════════════════════════════════
   🎫 PASS CYBER — SAISON 1
   Bouton flottant bas-gauche + écran liste des paliers + modal cadeau
   ════════════════════════════════════════════════════════════════ */

/* ── Onglet vertical (bord droit du menu) ── */
#btnPassCyber {
    display: none; /* affiché/masqué dynamiquement par UIManager.show() selon l'écran actif */
    position: fixed;
    top: 64px;
    bottom: 64px;
    right: 0;
    z-index: 10500;
    width: 38px;
    background: linear-gradient(180deg, #0d1f24 0%, #0a141c 55%, #060a10 100%);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-right: none;
    border-radius: 16px 0 0 16px;
    padding: 14px 0 16px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(0,255,255,.06),
        -6px 0 24px rgba(0,0,0,.6),
        0 0 22px rgba(0,255,255,.12);
    transition: transform .15s, box-shadow .15s;
    text-transform: none;
    font-family: inherit;
}
#btnPassCyber:hover { transform: translateX(-3px); box-shadow: -8px 0 28px rgba(0,0,0,.65), 0 0 30px rgba(0,255,255,.2); }
#btnPassCyber:active { transform: scale(0.97); }

#passMedalIcon {
    position: relative; flex-shrink: 0;
    font-size: 1.35rem; line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255,170,0,.55));
}
#passNotifyDot {
    position: absolute; top: 4px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 50%;
    background: #ff0055; border: 2px solid #0a141c;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 900; color: #fff;
    box-shadow: 0 0 8px rgba(255,0,85,.6);
    animation: passDotPulse 1.6s ease-in-out infinite;
}
#passBtnLabel {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: .64rem; font-weight: 700; letter-spacing: 2px;
    color: rgba(0,255,255,.75); text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
}
#passProgressBarWrap {
    width: 4px; flex: 1 1 auto; min-height: 40px;
    border-radius: 10px; overflow: hidden;
    background: #1a1a3a;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
    display: flex; flex-direction: column-reverse;
}
#passProgressFill {
    width: 100%; border-radius: 10px;
    background: linear-gradient(0deg, #00ffff, #cc88ff);
    box-shadow: 0 0 10px rgba(0,255,255,.4);
    transition: height .5s cubic-bezier(.4,0,.2,1);
}

#passNextRewardMeters, #passTierLabel { display: none; }

@keyframes passDotPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

/* Pulse ponctuel quand une nouvelle récompense vient de se débloquer */
#btnPassCyber.pass-pulse { animation: passBtnPulse .6s ease-out; }
@keyframes passBtnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,255,255,.55), 0 6px 24px rgba(0,0,0,.6); }
    100% { box-shadow: 0 0 0 18px rgba(0,255,255,0), 0 6px 24px rgba(0,0,0,.6); }
}

@media (max-width: 560px) {
    /* btnPassCyber (onglet vertical bord droit) */
    #btnPassCyber { width: 32px; top: 56px; bottom: 56px; padding: 10px 0 12px; gap: 8px; }
    #passMedalIcon { font-size: 1.15rem; }
    #passBtnLabel { font-size: .58rem; letter-spacing: 1.5px; }
}


/* ── Pass Cyber screen — tout sur un écran mobile ── */
/* justify-content:flex-start + padding safe-area pour que le bouton RETOUR
   soit toujours visible en haut, et que le contenu ne déborde pas */
#passScreen {
    justify-content: flex-start;
    padding-top: max(env(safe-area-inset-top, 0px) + 10px, 10px);
}
#passTopBar { width:100%; max-width:820px; display:flex; justify-content:flex-start; margin-bottom:4px; }
#passBackBtn {
    background: linear-gradient(135deg,#ff2266,#cc0044); color:#fff;
    border:none; border-radius:50px;
    padding:14px 30px; font-size:1rem; font-weight:900; letter-spacing:1px;
    box-shadow:0 0 18px rgba(255,0,85,.45), 0 4px 14px rgba(0,0,0,.5);
    cursor:pointer; margin:0;
}
#passBackBtn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 26px rgba(255,0,85,.6); }

/* Stats en ligne compacte */
#passHeaderStats {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    margin: 4px 0 6px; width: 100%; max-width: 820px;
}
.pass-stat-box {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,.04); border: 1px solid #1a1a28;
    border-radius: 10px; padding: 6px 16px;
}
.pass-stat-label { font-size: .58rem; letter-spacing: 1px; color: #555; text-transform: uppercase; }
.pass-stat-value { font-size: .88rem; font-weight: 800; color: #00ffaa; }

/* Carrousel */
#passCarouselWrap { width:100%; max-width:820px; display:flex; flex-direction:column; align-items:center; }

@media (max-width:560px) {
    .pass-card { flex-basis:128px; padding:11px 8px 10px; }
    .pass-card-icon-box { width:92px; height:92px; }
    .pass-card-icon { font-size:2.1rem; }
}

@media (max-width:480px) {
    /* Pass screen : titre et sous-titre réduits */
    #passScreen h1 { font-size: 1.6rem !important; margin-bottom: 2px; }
    #passScreen > p { display: none; } /* sous-titre "SAISON 1 — UN PALIER…" masqué */
    #passBackBtn { padding: 10px 22px; font-size: .88rem; }
    #passTopBar { margin-bottom: 2px; }
    .pass-stat-box { padding: 5px 12px; }
    .pass-stat-value { font-size: .8rem; }
    #passCarouselHint { display: none; } /* hint de swipe : évident sur mobile */
    .pass-card { flex-basis:118px; padding:9px 6px 8px; }
    .pass-card-icon-box { width:82px; height:82px; }
    .pass-card-icon { font-size:1.9rem; }
    .pass-card-step { font-size: .66rem; }
    .pass-card-reward { font-size: .62rem; }
}

/* ── Carrousel horizontal des paliers (#passTiersList) ── */
#passCarouselWrap { width:100%; max-width:820px; display:flex; flex-direction:column; align-items:center; }

#passTiersList {
    display:grid; grid-auto-flow:column; grid-template-rows:auto auto; gap:14px 14px;
    width:100%;
    overflow-x:auto; overflow-y:hidden;
    padding:8px 6px 16px;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:#00ffaa #1a1a28;
    align-items:stretch;
}
#passTiersList::-webkit-scrollbar { height:8px; }
#passTiersList::-webkit-scrollbar-track { background:#13131c; border-radius:6px; }
#passTiersList::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#00ffaa,#0088ff); border-radius:6px; }

/* Barre de défilement personnalisée (drag manuel + repère de position) */
#passScrollBar {
    width:100%; max-width:480px; height:10px; border-radius:6px;
    background:#13131c; border:1px solid #1a1a28; margin-top:2px;
    position:relative; cursor:pointer; touch-action:none;
}
#passScrollThumb {
    position:absolute; top:1px; left:1px; height:6px; min-width:28px; border-radius:6px;
    background:linear-gradient(90deg,#00ffaa,#0088ff);
    box-shadow:0 0 8px rgba(0,255,170,.5);
}
#passCarouselHint { font-size:.62rem; color:#555; letter-spacing:.5px; margin:8px 0 0; }

/* ── Carte de palier ── */
.pass-card {
    scroll-snap-align:center;
    flex:0 0 152px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:rgba(255,255,255,.025); border:1px solid #1a1a28; border-radius:14px;
    padding:14px 10px 12px; position:relative;
    transition:border-color .25s, box-shadow .25s, opacity .25s, transform .2s;
}
.pass-card.pt-ready   { border-color:#ffd700; box-shadow:0 0 16px rgba(255,215,0,.18); }
.pass-card.pt-claimed { opacity:.5; }
.pass-card.pt-final   { border-color:#c0c0c0; background:rgba(192,192,192,.04); }
.pass-card.pt-final.pt-ready { box-shadow:0 0 22px rgba(255,215,0,.28); }

.pass-card-icon-box {
    width:112px; height:112px; border-radius:18px; flex-shrink:0;
    background:linear-gradient(160deg,#ff3b3b,#b3001b);
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 2px 6px rgba(255,255,255,.15), 0 4px 14px rgba(0,0,0,.4);
    overflow:hidden; position:relative;
}
.pass-card.pt-locked  .pass-card-icon-box { background:linear-gradient(160deg,#2a2a32,#15151c); filter:grayscale(.5); opacity:.75; }
.pass-card.pt-claimed .pass-card-icon-box { background:linear-gradient(160deg,#1b8a55,#0b3d28); }
.pass-card.pt-final   .pass-card-icon-box { background:#0c0c12; border:2px solid rgba(192,192,192,.4); }

.pass-card-icon { font-size:2.6rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.pass-card-icon-3d model-viewer { pointer-events:none; --poster-color:transparent; }

.pass-card-step {
    font-size:.74rem; font-weight:800; color:#fff; text-transform:uppercase;
    letter-spacing:.5px; text-align:center;
}
.pass-card.pt-final .pass-card-step { color:#ffd700; }
.pass-card-reward { font-size:.7rem; color:#999; text-align:center; line-height:1.35; min-height:2.4em; }
.pass-card.pt-final .pass-card-reward { color:#e8c66a; font-weight:700; }
.pass-card-action { margin-top:2px; }
.pt-status { font-size:.72rem; color:#555; font-weight:600; letter-spacing:.5px; }
.pass-card.pt-claimed .pt-status { color:#00ff88; }
.pt-claim-btn {
    background:linear-gradient(135deg,#ffd700,#ff8800); color:#000;
    border:none; border-radius:6px; padding:8px 16px;
    font-size:.72rem; font-weight:900; letter-spacing:1px;
    margin:0; cursor:pointer; text-transform:uppercase;
    box-shadow:0 0 12px rgba(255,200,0,.4);
    animation:ptClaimPulse 1.8s ease-in-out infinite;
}
@keyframes ptClaimPulse {
    0%, 100% { box-shadow:0 0 10px rgba(255,200,0,.35); }
    50%      { box-shadow:0 0 18px rgba(255,200,0,.6); }
}

/* ── Modal de cadeau animé (#passClaimOverlay) ── */
#passClaimOverlay {
    display: none;
    position: fixed; inset: 0; z-index: 20000;
    align-items: center; justify-content: center;
    background: rgba(2,2,6,.82);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#passClaimOverlay.pc-visible { display: flex; }

#passClaimCard {
    position: relative;
    width: min(92vw, 380px);
    background: linear-gradient(160deg, #0d0d18, #06060c);
    border: 1px solid rgba(255,215,0,.25);
    border-radius: 18px;
    padding: 30px 26px 26px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    box-shadow: 0 0 60px rgba(255,200,0,.12), 0 20px 60px rgba(0,0,0,.6);
    overflow: hidden;
}
#passClaimTitle {
    font-size: 1.1rem; letter-spacing: 2px; color: #ffd700;
    text-shadow: 0 0 12px rgba(255,215,0,.4);
    margin: 0 0 22px; text-transform: uppercase; font-style: normal;
}

#passFlash {
    position: fixed; inset: 0; background: #fff; opacity: 0;
    pointer-events: none; z-index: 20003;
}
/* ── Petit flash plein écran à chaque clic de charge (doux, plus lent) ── */
#passFlash.pc-flash-charge { animation: passFlashChargeAnim .45s ease-out; }
@keyframes passFlashChargeAnim {
    0%   { opacity: 0; background: #fff; }
    35%  { opacity: .3;  background: #fff; }
    100% { opacity: 0; background: #fff; }
}
/* ── Flash final : lent (1s), glitch chromatique adouci ── */
#passFlash.pc-flash-final { animation: passFlashFinalAnim 1s cubic-bezier(.16,.8,.2,1); }
@keyframes passFlashFinalAnim {
    0%   { opacity: 0;   background: #fff; }
    12%  { opacity: .55; background: #fff; }
    26%  { opacity: .45; background: #ff003c; }
    38%  { opacity: .45; background: #00e5ff; }
    50%  { opacity: .5;  background: #fff; }
    64%  { opacity: .3;  background: #ff003c; }
    76%  { opacity: .35; background: #00e5ff; }
    88%  { opacity: .25; background: #fff; }
    100% { opacity: 0;   background: #fff; }
}

/* ── Petit flash à chaque clic de charge (1-3), intensité croissante
   pilotée par --pk (peak opacity) défini en JS selon le numéro du clic ── */
#passFlash.pc-flash-tap { animation: pdrFlashTap .4s ease-out; }
@keyframes pdrFlashTap {
    0%   { opacity: 0;            background: #fff; }
    30%  { opacity: var(--pk,.25); background: #fff; }
    100% { opacity: 0;            background: #fff; }
}

/* ── Flash "aveuglant" du clic final (ouverture) :
   0.25s pour aveugler → 0.1s de blanc plein → 0.25s pour désaveugler.
   Le contenu de la box est mis à jour pendant le palier plein-blanc,
   donc le changement de rareté est invisible et révélé en fondu. ── */
#passFlash.pc-flash-blind { animation: pdrFlashBlind .6s linear; }
@keyframes pdrFlashBlind {
    0%     { opacity: 0; background: #fff; }
    41.66% { opacity: 1; background: #fff; }
    58.33% { opacity: 1; background: #fff; }
    100%   { opacity: 0; background: #fff; }
}

#passGiftBox {
    width: 130px; height: 130px; border-radius: 22px; cursor: pointer;
    background: linear-gradient(160deg, #ffd700, #ff8800);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem;
    box-shadow: 0 0 30px rgba(255,200,0,.4), inset 0 2px 8px rgba(255,255,255,.35);
    transition: transform .25s, opacity .25s;
    animation: passGiftIdle 2.2s ease-in-out infinite;
}
@keyframes passGiftIdle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.04) rotate(-2deg); }
}
#passGiftBox.pc-burst {
    animation: passGiftBurst .42s ease-out forwards;
    cursor: default;
}
@keyframes passGiftBurst {
    0%   { transform: scale(1); opacity: 1; }
    60%  { transform: scale(1.45); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* ── Petit "tour sur lui-même" du cadeau à chaque clic de charge ── */
#passGiftBox.pc-spin { animation: passGiftSpin .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes passGiftSpin {
    0%   { transform: scale(1)    rotate(0deg); }
    55%  { transform: scale(var(--pcSpinScale, 1.18)) rotate(330deg); }
    100% { transform: scale(1)    rotate(360deg); }
}

/* ── Progression de clics (3 boules) puis bouton "OUVRIR !" ── */
#passClickProgress {
    margin-top: 16px; display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
#passGiftBox.pc-burst ~ #passClickProgress { display: none; }

#passClaimHint { font-size: .72rem; color: #555; letter-spacing: .5px; margin: 0; }

#passClickDots { display: flex; gap: 12px; }
.pc-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(160deg, #ffd700, #ff8800);
    box-shadow: 0 0 10px rgba(255,200,0,.55), inset 0 1px 2px rgba(255,255,255,.4);
    transition: background .35s, box-shadow .35s, transform .35s;
    animation: pcDotIdle 1.6s ease-in-out infinite;
}
.pc-dot:nth-child(2) { animation-delay: .15s; }
.pc-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pcDotIdle {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}
.pc-dot.pc-dot-done {
    background: #2a2a32; box-shadow: none; transform: scale(.8); animation: none;
}
.pc-dot.pc-dot-pop { animation: pcDotPop .42s ease-out; }
@keyframes pcDotPop {
    0%   { transform: scale(1);    box-shadow: 0 0 10px rgba(255,200,0,.5); }
    45%  { transform: scale(1.55); box-shadow: 0 0 22px rgba(255,210,0,.9); }
    100% { transform: scale(.8);   box-shadow: none; }
}

#passOpenPrompt {
    display: none; margin: 0; cursor: pointer;
    font-size: 1.3rem; font-weight: 900; letter-spacing: 2px;
    color: #00ffaa; text-shadow: 0 0 16px rgba(0,255,170,.6);
    text-transform: uppercase;
    animation: pcOpenPulse 1s ease-in-out infinite;
}
@keyframes pcOpenPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.08); opacity: .85; }
}

#passRevealBox {
    display: none; flex-direction: column; align-items: center; gap: 6px;
    opacity: 0; transform: scale(.7);
    transition: opacity .35s, transform .35s;
}
#passRevealBox.pc-visible {
    display: flex; opacity: 1; transform: scale(1);
}
#passRevealIcon {
    font-size: 3.4rem;
    filter: drop-shadow(0 0 16px rgba(255,215,0,.5));
}
#passRevealTitle {
    font-size: 1.4rem; font-weight: 900; color: #fff;
    text-shadow: 0 0 14px rgba(255,255,255,.3);
}
#passRevealSub { font-size: .78rem; color: #888; margin-bottom: 10px; }
#passClaimCloseBtn {
    background: linear-gradient(135deg, #00ffaa, #0088ff); color: #000;
    border: none; border-radius: 8px; padding: 11px 28px;
    font-size: .85rem; font-weight: 900; letter-spacing: 1px;
    cursor: pointer; margin-top: 6px; text-transform: uppercase;
    box-shadow: 0 0 16px rgba(0,255,170,.35);
}
#passClaimCloseBtn:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(0,255,170,.5); }

/* ══════════════════════════════════════════════════════════
   AMÉLIORATIONS ANIMATION CADEAU — glitch, charge lumineuse,
   onde de choc, compteur, brillance, fermeture CRT
   ══════════════════════════════════════════════════════════ */

/* ── Montée en tension lumineuse du cadeau à chaque clic de charge ── */
#passGiftBox.pc-charge-1 {
    box-shadow: 0 0 30px rgba(255,200,0,.4), inset 0 2px 8px rgba(255,255,255,.35),
                0 0 20px 4px rgba(0,255,200,.25);
    filter: brightness(1.08);
}
#passGiftBox.pc-charge-2 {
    box-shadow: 0 0 30px rgba(255,200,0,.45), inset 0 2px 8px rgba(255,255,255,.35),
                0 0 36px 10px rgba(0,255,200,.45), 0 0 56px 18px rgba(0,180,255,.25);
    filter: brightness(1.18);
}
#passGiftBox.pc-charge-3 {
    box-shadow: 0 0 36px rgba(255,200,0,.55), inset 0 2px 8px rgba(255,255,255,.4),
                0 0 56px 20px rgba(0,255,210,.7), 0 0 96px 34px rgba(0,180,255,.4);
    filter: brightness(1.5);
}

/* ── Glitch visuel (décalage chromatique) au moment du clic ── */
#passGiftBox.pc-glitch { animation-name: passGiftSpin, pcGlitchBox; animation-duration: .5s, .22s; }
@keyframes pcGlitchBox {
    0%, 100% { filter: none; }
    20%      { filter: contrast(1.4) brightness(1.3) saturate(1.4); }
    45%      { filter: contrast(1.1) brightness(1.1); }
    70%      { filter: contrast(1.5) brightness(1.4) saturate(1.5); }
}
#passGiftEmoji.pc-glitch-text { animation: pcGlitchText .22s linear; }
@keyframes pcGlitchText {
    0%, 100% { text-shadow: none; transform: translate(0,0); }
    20%      { text-shadow: -3px 0 #ff003c, 3px 0 #00e5ff; transform: translate(-3px,1px); }
    40%      { text-shadow: 3px 0 #ff003c, -3px 0 #00e5ff; transform: translate(2px,-1px); }
    60%      { text-shadow: -2px 0 #ff003c, 2px 0 #00e5ff; transform: translate(-2px,0); }
    80%      { text-shadow: 2px 0 #ff003c, -2px 0 #00e5ff; transform: translate(1px,0); }
}

/* ── Indicateurs de progression : flash "énergie" + couleur chargée ── */
.pc-dot.pc-dot-pop { animation: pcDotPop .5s cubic-bezier(.2,.85,.3,1); }
@keyframes pcDotPop {
    0%   { transform: scale(1);   box-shadow: 0 0 10px rgba(255,200,0,.5);  background: linear-gradient(160deg,#ffd700,#ff8800); }
    35%  { transform: scale(1.7); box-shadow: 0 0 30px 8px rgba(0,255,210,1), 0 0 60px 18px rgba(0,255,210,.6); background:#eafff7; }
    70%  { transform: scale(.85); box-shadow: 0 0 16px rgba(0,255,170,.7);  background:#0aff9c; }
    100% { transform: scale(.8);  box-shadow: 0 0 6px rgba(0,255,170,.35); background:#1f6b50; }
}
.pc-dot.pc-dot-done { background:#1f6b50; box-shadow:0 0 6px rgba(0,255,170,.3); transform: scale(.8); animation:none; }

/* ── Onde de choc au moment de l'ouverture ── */
#passShockwave {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid rgba(0,255,210,.95);
    box-shadow: 0 0 20px 6px rgba(0,255,210,.55), inset 0 0 14px rgba(0,255,210,.4);
    opacity: 0; pointer-events: none;
}
#passShockwave.pc-shock-anim { animation: pcShockwave .7s cubic-bezier(.1,.7,.3,1); }
@keyframes pcShockwave {
    0%   { transform: translate(-50%,-50%) scale(.1); opacity: .95; border-width: 4px; }
    55%  { opacity: .5; }
    100% { transform: translate(-50%,-50%) scale(40); opacity: 0; border-width: 1px; }
}

/* ── Confettis numériques (pixels / éclats néon / bits de données) ── */
.pc-data-particle {
    position: fixed; z-index: 20002; pointer-events: none;
    font-family: 'Courier New', monospace; font-weight: 900; line-height: 1;
    animation: pcDataFall var(--dur, .9s) cubic-bezier(.15,.7,.3,1) forwards;
}
.pc-data-particle.pc-shard   { border-radius: 2px; }
.pc-data-particle.pc-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
@keyframes pcDataFall {
    0%   { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) translate(var(--dx,0px), var(--dy,140px)) rotate(var(--rot,180deg)) scale(.35); opacity: 0; }
}

/* ── Brillance métallique balayant l'icône de la récompense ── */
.pc-icon-wrap {
    position: relative; width: 74px; height: 74px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pc-icon-wrap::after {
    content: ''; position: absolute; top: -60%; left: -150%; width: 60%; height: 220%;
    background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
    transform: rotate(20deg); opacity: 0;
}
.pc-icon-wrap.pc-shine::after { animation: pcShineSweep .9s ease-in-out; }
@keyframes pcShineSweep {
    0%   { left: -150%; opacity: 0; }
    15%  { opacity: .9; }
    55%  { left: 150%;  opacity: .9; }
    100% { left: 150%;  opacity: 0; }
}

/* ── Fermeture façon écran CRT qui s'éteint ── */
#passClaimCard.pc-crt-off { animation: pcCrtOff .3s cubic-bezier(.4,0,1,1) forwards; }
@keyframes pcCrtOff {
    0%   { transform: scaleY(1)    scaleX(1);   filter: brightness(1); opacity: 1; }
    40%  { transform: scaleY(.04) scaleX(1.06); filter: brightness(3); opacity: 1; }
    100% { transform: scaleY(.001) scaleX(.4);  filter: brightness(0); opacity: 0; }
}

/* ── Carte du Pass : focus clavier + flash de confirmation ── */
.pass-card.pt-focus {
    outline: 2px solid #00e5ff;
    box-shadow: 0 0 0 3px rgba(0,229,255,.25), 0 0 22px rgba(0,229,255,.45);
    transform: translateY(-3px);
}
.pass-card.pt-shake { animation: ptDeniedShake .35s ease-in-out; }
@keyframes ptDeniedShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(2px); }
}
.pass-card.pt-just-claimed { animation: ptJustClaimedFlash .9s ease-out; }
@keyframes ptJustClaimedFlash {
    0%   { box-shadow: 0 0 0 rgba(0,255,140,0); border-color: #1a1a28; }
    20%  { box-shadow: 0 0 40px 10px rgba(0,255,140,.9); border-color: #00ff8c; }
    100% { box-shadow: 0 0 0 rgba(0,255,140,0); border-color: #1a1a28; }
}


/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS MENUS — v7
   ══════════════════════════════════════════════════════════════════ */

/* ── Keyframes généraux ────────────────────────────────────────── */
@keyframes screenEnter {
    from { transform: translateY(20px) scale(.974); filter: blur(3px); opacity: 0; }
    to   { transform: none; filter: none; opacity: 1; }
}
@keyframes screenExit {
    from { transform: none; filter: none; opacity: 1; }
    to   { transform: translateY(-12px) scale(.98); filter: blur(2px); opacity: 0; }
}
/* ── Transition glissée spécifique à l'écran Pass Cyber ──────────
   Ouverture : l'écran arrive depuis la droite et glisse vers la gauche.
   Fermeture : l'écran repart vers la droite, par-dessus l'écran du dessous. */
@keyframes passScreenSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes passScreenSlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}
@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(.88) translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: none; }
}

/* ── Animations continues (logo, bouton play) ──────────────────── */
@keyframes logoCyberGlow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255,255,255,.22)) drop-shadow(0 0 30px rgba(0,255,136,.18)); }
    50%       { filter: drop-shadow(0 0 28px rgba(255,255,255,.4)) drop-shadow(0 0 55px rgba(0,255,136,.38)); }
}
@keyframes playBtnBreath {
    0%, 100% { box-shadow: 0 0 28px rgba(0,255,255,.22), 0 0 60px rgba(0,255,255,.08); }
    50%       { box-shadow: 0 0 55px rgba(0,255,255,.50), 0 0 110px rgba(0,136,255,.18); }
}
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-3px); }
}
@keyframes currencyGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50%       { box-shadow: 0 0 14px rgba(255,215,0,.15); }
}
@keyframes kryptsGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,160,255,0); }
    50%       { box-shadow: 0 0 14px rgba(0,160,255,.18); }
}
@keyframes scanlineMenu {
    0%   { background-position: 0 0; }
    100% { background-position: 0 8px; }
}
@keyframes cardHoverGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,255,255,0); }
    50%       { box-shadow: 0 0 12px rgba(0,255,255,.15); }
}

/* ── Entrée en cascade du menu principal ───────────────────────── */
.menu-anim-in #menuTopBar {
    animation: fadeIn .4s ease .02s both;
}
.menu-anim-in #menuLogo {
    animation: slideUpIn .55s cubic-bezier(.22,1,.36,1) .05s both;
}
.menu-anim-in #menuSaveRow {
    animation: fadeIn .4s ease .18s both;
}
.menu-anim-in #menuPlayBtn {
    animation: slideUpIn .55s cubic-bezier(.22,1,.36,1) .22s both;
}
.menu-anim-in #menuBottomNav {
    animation: fadeIn .5s ease .32s both;
}
.menu-anim-in #dailyMissionsBadge {
    animation: fadeIn .45s ease .42s both;
}
.menu-anim-in #btnSaveQuit {
    animation: fadeIn .4s ease .50s both;
}

/* ── Animations continues sur le menu ─────────────────────────── */
#menuScreen #menuLogo .logo-main {
    animation: logoCyberGlow 3.8s ease-in-out infinite;
}
#menuScreen #menuPlayBtn {
    animation: playBtnBreath 2.6s ease-in-out infinite;
}
#menuScreen #menuTopBar #menuCoinsBadge {
    animation: badgeFloat 3.2s ease-in-out infinite;
}
#menuScreen #menuTopBar #menuKryptsBadge {
    animation: badgeFloat 3.2s ease-in-out .8s infinite;
}

/* ── Surcharge hover de la nav du bas (lift léger) ──────────────── */
#menuBottomNav .nav-item {
    transition: color .22s, transform .18s !important;
}
#menuBottomNav .nav-item:hover {
    transform: translateY(-2px) !important;
}
#menuBottomNav .nav-item:active {
    transform: translateY(0) scale(.95) !important;
    transition-duration: .07s !important;
}

/* ── Settings / Pause overlay ──────────────────────────────────── */
#settingsOverlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    display: flex !important;
}
#settingsOverlay.open {
    opacity: 1;
    visibility: visible;
}
#settingsPanel {
    transform: scale(.9) translateY(18px);
    opacity: 0;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
#settingsOverlay.open #settingsPanel {
    transform: none;
    opacity: 1;
}

/* ── Admin Panel overlay ───────────────────────────────────────── */
#adminPanelOverlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    display: flex !important;
}
#adminPanelOverlay.open {
    opacity: 1;
    visibility: visible;
}
#adminPanelFrame {
    transform: translateY(28px) scale(.965);
    opacity: 0;
    transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
#adminPanelOverlay.open #adminPanelFrame {
    transform: none;
    opacity: 1;
}

/* ── Admin modales (ban, économie) ─────────────────────────────── */
.admin-modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    display: flex !important;
}
.admin-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}
.admin-modal-card {
    transform: scale(.86) translateY(20px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.admin-modal-overlay.open .admin-modal-card {
    transform: none;
    opacity: 1;
}

/* ── Leaderboard modal ─────────────────────────────────────────── */
#leaderboardModal {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    display: flex !important;
}
#leaderboardModal.open {
    opacity: 1;
    visibility: visible;
}

/* ── Écran Game Over — entrée éléments en cascade ─────────────── */
.gameover-anim-in #goTitle {
    animation: slideUpIn .55s cubic-bezier(.22,1,.36,1) .08s both;
}
.gameover-anim-in #goStatsPanel {
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) .18s both;
}
.gameover-anim-in #goRecordBanner {
    animation: fadeScaleIn .45s cubic-bezier(.22,1,.36,1) .26s both;
}
.gameover-anim-in #goChallengesBanner {
    animation: fadeIn .4s ease .3s both;
}
.gameover-anim-in #goPseudoRow {
    animation: fadeIn .4s ease .32s both;
}
.gameover-anim-in #goActions {
    animation: fadeIn .45s ease .4s both;
}

/* ── Écran Garage — header + onglets ──────────────────────────── */
.garage-anim-in #garageHeader {
    animation: slideUpIn .48s cubic-bezier(.22,1,.36,1) .04s both;
}
.garage-anim-in #garageTabs {
    animation: slideInLeft .44s cubic-bezier(.22,1,.36,1) .12s both;
}
.garage-anim-in #garageBody {
    animation: fadeIn .45s ease .2s both;
}
.garage-anim-in .btn-back {
    animation: fadeIn .4s ease .28s both;
}

/* ── Écran Historique — entrée éléments en cascade ────────────── */
.history-anim-in #historyTitle {
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) .05s both;
}
.history-anim-in #historySubtitle {
    animation: fadeIn .4s ease .14s both;
}

/* État vide (aucune partie jouée) */
.history-anim-in #statsEmptyState {
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) .18s both;
}

/* Jauges héros — apparition en cascade, une par une */
.history-anim-in .stat-ring-card {
    opacity: 0;
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) both;
}
.history-anim-in .stat-ring-card:nth-child(1) { animation-delay: .16s; }
.history-anim-in .stat-ring-card:nth-child(2) { animation-delay: .22s; }
.history-anim-in .stat-ring-card:nth-child(3) { animation-delay: .28s; }

/* Grille de métriques cumulées — cascade carte par carte */
.history-anim-in .stat-card {
    opacity: 0;
    animation: slideUpIn .45s cubic-bezier(.22,1,.36,1) both;
}
.history-anim-in .stat-card:nth-child(1) { animation-delay: .30s; }
.history-anim-in .stat-card:nth-child(2) { animation-delay: .34s; }
.history-anim-in .stat-card:nth-child(3) { animation-delay: .38s; }
.history-anim-in .stat-card:nth-child(4) { animation-delay: .42s; }
.history-anim-in .stat-card:nth-child(5) { animation-delay: .46s; }
.history-anim-in .stat-card:nth-child(6) { animation-delay: .50s; }
.history-anim-in .stat-card:nth-child(7) { animation-delay: .54s; }
.history-anim-in .stat-card:nth-child(8) { animation-delay: .58s; }

.history-anim-in #statsLastRun {
    opacity: 0;
    animation: fadeIn .45s ease .58s both;
}
.history-anim-in #statsChartWrap {
    opacity: 0;
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) .64s both;
}
.history-anim-in #historyList {
    animation: fadeIn .45s ease .7s both;
}
.history-anim-in #historyActions {
    animation: fadeIn .4s ease .78s both;
}

/* ── Écran Pass Cyber — entrée éléments en cascade ────────────── */
.pass-anim-in #passTopBar {
    animation: fadeIn .4s ease .05s both;
}
.pass-anim-in #passTitle {
    animation: slideUpIn .5s cubic-bezier(.22,1,.36,1) .1s both;
}
.pass-anim-in #passSubtitle {
    animation: fadeIn .4s ease .18s both;
}
.pass-anim-in #passHeaderStats {
    animation: fadeIn .45s ease .24s both;
}
.pass-anim-in #passCarouselWrap {
    animation: fadeIn .5s ease .32s both;
}

/* ── Bouton JOUER hover amélioré ───────────────────────────────── */
#menuPlayBtn {
    transition: box-shadow .2s, transform .15s !important;
}
#menuPlayBtn:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 0 55px rgba(0,255,136,.55), 0 0 110px rgba(0,255,136,.22), 0 8px 28px rgba(0,0,0,.4) !important;
}
#menuPlayBtn:active {
    transform: scale(.96) !important;
    transition-duration: .08s !important;
}

/* ── Scanlines discrètes fond menu ────────────────────────────── */
#menuScreen::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 3px,
        rgba(0,255,255,.012) 3px, rgba(0,255,255,.012) 4px
    );
    animation: scanlineMenu 1.2s steps(1) infinite;
}

/* ═══════════════════════════════════════════════════════════
   PASS CYBER v2 — nouvelles règles CSS
   (complète les règles existantes sans les écraser)
   Variables partagées avec la charte graphique du jeu.
═══════════════════════════════════════════════════════════ */

/* ── Variables raretés Cyber Drop ─────────────────────────── */
:root {
    --r-lowwatt:     #7c8a9e;
    --r-standard:    #2dd4ff;
    --r-surge:       #3df2ad;
    --r-overclock:   #b14bff;
    --r-hypercharge: #ff5b2e;
    --r-core:        #ffd23f;
}

/* ── Header de palier dans le carrousel ──────────────────── */
.pass-palier-header {
    flex: none;
    grid-row: span 2;
    align-self: center;
    font-family: monospace;
    font-size: .58rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00ffe1;
    background: rgba(0,255,225,.06);
    border: 1px solid rgba(0,255,225,.18);
    border-radius: 4px;
    padding: 6px 12px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    height: auto;
    margin: 0 4px;
    white-space: nowrap;
}

/* ── Badges de récompenses dans les cartes ────────────────── */
.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: monospace;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid;
    white-space: nowrap;
    margin: 1px;
    line-height: 1.5;
    letter-spacing: .3px;
}
.pt-nc  { background: rgba(232,210,122,.08); color: #e8d27a; border-color: #5a5230; }
.pt-kr  { background: rgba(201,168,255,.08); color: #c9a8ff; border-color: #4a3a6e; }
.pt-bst { background: rgba(127,232,184,.08); color: #7fe8b8; border-color: #2c5a45; }
.pt-skin{ background: rgba(255,143,168,.08); color: #ff8fa8; border-color: #5e2c3a; }
.pt-drop{
    background: rgba(0,255,225,.07);
    color: #8fe9ff;
    border-color: rgba(0,255,225,.35);
    box-shadow: 0 0 6px rgba(0,255,225,.18);
}

/* (badges CyberDrop génériques — plus de variante par rareté, voir .pt-drop ci-dessus) */

/* ── Card v2 : dual track ─────────────────────────────────── */
.pass-card-num {
    font-family: monospace;
    font-size: .62rem;
    color: #555;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 5px;
}
.pt-ms-num  { color: #ffd700; }
.pt-ms-star { margin-right: 2px; }

.pass-card-track {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.05);
    margin-bottom: 3px;
    min-height: 40px;
}
.pt-free-track    { border-color: rgba(0,255,170,.08); }
.pt-premium-track { border-color: rgba(255,210,63,.12); }
.pt-prem-locked   { filter: grayscale(.7); opacity: .45; }

.pt-track-label {
    font-family: monospace;
    font-size: .52rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #444;
    margin-bottom: 1px;
}
.pt-prem-label { color: #7a6020; }

.pt-track-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    align-items: flex-start;
}

/* ── Cellules v3 : carrousel double ligne (FREE / PREMIUM) ──
   #passTiersList est une grille à 2 lignes ; chaque palier produit
   une cellule FREE (ligne 1) + une cellule PREMIUM (ligne 2) dans la
   même colonne. Les deux défilent ensemble car c'est UN SEUL élément
   scrollable (#passTiersList). ── */
.pass-cell {
    scroll-snap-align: center;
    width: 152px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(255,255,255,.025); border: 1px solid #1a1a28; border-radius: 14px;
    padding: 10px 8px 9px; position: relative;
    transition: border-color .25s, box-shadow .25s, opacity .25s, transform .2s;
}
.pass-cell-free { border-color: rgba(0,255,170,.10); }
.pass-cell-prem {
    border-color: rgba(255,210,63,.16);
    background: linear-gradient(135deg, rgba(40,28,4,.45), rgba(22,15,2,.55));
}
.pass-cell-prem::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,200,60,.55) 35%, rgba(255,220,80,.8) 50%, rgba(255,200,60,.55) 65%, transparent);
}
.pass-cell.pt-ready   { border-color: #ffd700; box-shadow: 0 0 16px rgba(255,215,0,.18); }
.pass-cell.pt-claimed { opacity: .5; }
.pass-cell-prem.pt-ready { box-shadow: inset 0 0 12px rgba(255,215,0,.06), 0 0 16px rgba(255,215,0,.18); }

.pass-cell.pt-milestone {
    border-color: #c8a000 !important;
    box-shadow: 0 0 22px rgba(255,215,0,.22), inset 0 0 14px rgba(255,200,0,.06) !important;
    background: rgba(30,25,5,.55) !important;
}
.pass-cell.pt-milestone .pass-card-num { color: #ffd700; font-weight: 700; }

.pass-cell.pt-focus {
    outline: 2px solid #00e5ff;
    box-shadow: 0 0 0 3px rgba(0,229,255,.25), 0 0 22px rgba(0,229,255,.45);
    transform: translateY(-3px);
}
.pass-cell.pt-shake { animation: ptDeniedShake .35s ease-in-out; }
.pass-cell.pt-just-claimed { animation: ptJustClaimedFlash .9s ease-out; }

@media (max-width:560px) { .pass-cell { width:128px; padding:9px 6px 8px; } }
@media (max-width:480px) { .pass-cell { width:118px; padding:8px 5px 7px; } }

/* ── Milestone card styling ───────────────────────────────── */
.pass-card.pt-milestone {
    border-color: #c8a000 !important;
    box-shadow: 0 0 22px rgba(255,215,0,.22), inset 0 0 14px rgba(255,200,0,.06) !important;
    background: rgba(30,25,5,.55) !important;
}
.pass-card.pt-milestone .pass-card-num { color: #ffd700; font-weight: 700; }

/* ── Pass header badges ───────────────────────────────────── */
.pass-track-badge {
    display: inline-block;
    font-family: monospace;
    font-size: .72rem;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid;
    font-weight: 700;
}
.ptb-free    { color: #aaa;    border-color: #333; background: rgba(255,255,255,.04); }
.ptb-premium { color: #ffd700; border-color: #7a6020; background: rgba(255,210,63,.08); }

.pass-mult-badge {
    display: inline-block;
    font-family: monospace;
    font-size: .72rem;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #333;
    color: #aaa;
    background: rgba(255,255,255,.04);
}
.pmb-boost { color: #3df2ad; border-color: #1c5a4d; background: rgba(61,242,173,.06); }
.pmb-floor { color: #ff5b2e; border-color: #702c14; background: rgba(255,91,46,.06);  }

/* ═══════════════════════════════════════════════════════
   PASS PREMIUM — Bannière d'upsell (visible tant que le
   pass n'est pas débloqué) + Modal d'achat Krypts / argent réel
═══════════════════════════════════════════════════════ */
@keyframes ppbBorderShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ppbGlowMove    { 0%{transform:translateX(-10%)} 100%{transform:translateX(10%)} }
@keyframes ppbScanSweep   { 0%{left:-60%} 45%{left:130%} 100%{left:130%} }
@keyframes ppbCtaPulse {
    0%, 100% { box-shadow:0 0 18px rgba(255,180,0,.55), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
    50%      { box-shadow:0 0 32px rgba(255,200,40,.85), 0 6px 22px rgba(0,0,0,.5),  inset 0 1px 0 rgba(255,255,255,.7); }
}
@keyframes ppbCtaGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ppbCtaShine    { 0%{left:-75%} 35%{left:130%} 100%{left:130%} }
@keyframes ppmPopIn       { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes ppmSpin        { to { transform:rotate(360deg); } }

.pass-premium-banner {
    position: relative; width: 100%; max-width: 820px; margin: 2px 0 16px;
    border-radius: 16px; padding: 2px;
    background: linear-gradient(120deg, #ffd700, #ff8800, #ff2ecc, #00e5ff, #ffd700);
    background-size: 300% 300%; animation: ppbBorderShift 6s ease infinite;
    box-shadow: 0 0 24px rgba(255,190,20,.35), 0 4px 20px rgba(0,0,0,.5);
}
.pass-premium-banner.ppb-owned { display: none; }
.ppb-content {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; overflow: hidden;
    background: linear-gradient(135deg, rgba(20,14,2,.96), rgba(10,7,1,.98));
    border-radius: 14px; padding: 14px 22px;
}
.ppb-glow {
    position: absolute; inset: -40%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,215,0,.16), transparent 60%);
    animation: ppbGlowMove 5s ease-in-out infinite alternate;
}
.ppb-scan {
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14) 45%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.14) 55%, transparent);
    transform: skewX(-20deg); animation: ppbScanSweep 3.2s ease-in-out infinite;
}
.ppb-left { position: relative; z-index: 1; flex: 1 1 260px; min-width: 220px; }
.ppb-badge {
    display: inline-block; font-family: monospace; font-weight: 900; letter-spacing: 2px;
    font-size: .76rem; color: #0b0700; background: linear-gradient(135deg, #ffe98a, #ffb700);
    padding: 3px 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(255,190,0,.5); margin-bottom: 6px;
}
.ppb-text { margin: 0; font-size: .84rem; color: #e8d9b0; line-height: 1.4; }
.ppb-text b { color: #ffd700; }
.ppb-cta {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 26px; border: none; border-radius: 50px; cursor: pointer;
    font-family: inherit; font-weight: 900; letter-spacing: 1px; font-size: .9rem; color: #1a0d00;
    background: linear-gradient(135deg, #ffe98a, #ffc233, #ff8a00); background-size: 200% 200%;
    box-shadow: 0 0 18px rgba(255,180,0,.55), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
    overflow: hidden; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease;
    animation: ppbCtaPulse 1.8s ease-in-out infinite, ppbCtaGradient 4s ease infinite;
}
.ppb-cta:hover  { transform: translateY(-2px) scale(1.045); box-shadow: 0 0 36px rgba(255,205,50,.85), 0 10px 22px rgba(0,0,0,.5); }
.ppb-cta:active { transform: translateY(0) scale(.96); }
.ppb-cta-shine {
    position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-20deg); animation: ppbCtaShine 2.6s ease-in-out infinite;
}
.ppb-cta-label { position: relative; z-index: 1; }

/* Cellule premium verrouillée : incite au clic → ouvre la modale */
.pt-prem-locked { cursor: pointer; position: relative; }
.pt-prem-locked::after {
    content: '🔒'; position: absolute; top: 6px; right: 8px; font-size: .8rem; opacity: .9;
}
.pt-prem-locked:hover { filter: grayscale(.35); opacity: .75; }

@media (max-width:560px) {
    .ppb-content { flex-direction: column; align-items: stretch; text-align: center; padding: 14px 16px; }
    .ppb-cta { width: 100%; }
    .ppb-badge { font-size: .68rem; }
}

/* ── Modal d'achat Pass Premium ── */
.ppm-overlay {
    display: none; position: fixed; inset: 0; z-index: 21000;
    background: rgba(3,2,1,.86); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 16px;
}
.ppm-overlay.ppm-visible { display: flex; animation: fadeIn .25s ease; }
.ppm-card {
    position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
    border-radius: 20px; padding: 2px;
    background: linear-gradient(135deg, #ffd700, #ff2ecc, #00e5ff, #ffd700);
    background-size: 300% 300%;
    animation: ppbBorderShift 6s ease infinite, ppmPopIn .35s cubic-bezier(.2,1.4,.4,1);
    box-shadow: 0 0 50px rgba(255,190,20,.3), 0 20px 60px rgba(0,0,0,.7);
}
.ppm-card::before {
    content: ''; position: absolute; inset: 2px; border-radius: 18px; z-index: 0;
    background: linear-gradient(160deg, #0e0a03 0%, #0a0704 60%, #050403 100%);
}
.ppm-card > * { position: relative; z-index: 1; }
.ppm-close {
    position: absolute; top: 12px; right: 12px; z-index: 5; width: 32px; height: 32px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
    color: #ccc; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.ppm-close:hover { background: rgba(255,60,60,.25); color: #fff; transform: rotate(90deg); }
.ppm-header { padding: 30px 26px 6px; text-align: center; }
.ppm-badge {
    display: inline-block; font-family: monospace; font-size: .68rem; letter-spacing: 3px; color: #ffd700;
    border: 1px solid rgba(255,215,0,.4); border-radius: 4px; padding: 2px 10px; margin-bottom: 10px;
}
.ppm-title { margin: 0; font-size: 1.9rem; font-weight: 900; letter-spacing: 1px; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.25); }
.ppm-title span {
    background: linear-gradient(135deg, #ffe98a, #ffb700, #ff6a00); -webkit-background-clip: text;
    background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255,180,0,.6));
}
.ppm-sub { margin: 6px 0 0; font-size: .82rem; color: #999; }
.ppm-perks { padding: 18px 26px 6px; display: flex; flex-direction: column; gap: 10px; }
.ppm-perk {
    display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #ddd;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 9px 12px;
}
.ppm-perk-ic { font-size: 1.15rem; filter: drop-shadow(0 0 6px rgba(255,215,0,.5)); }
.ppm-options { padding: 18px 26px 8px; display: flex; flex-direction: column; gap: 6px; }
.ppm-opt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ppm-opt-label { font-family: monospace; font-size: .66rem; letter-spacing: 2px; color: #777; }
.ppm-opt-best {
    font-size: .6rem; font-weight: 800; letter-spacing: 1px; color: #001a10;
    background: linear-gradient(135deg, #3df2ad, #00c98a); padding: 2px 8px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(61,242,173,.5);
}
.ppm-buy-btn {
    position: relative; overflow: hidden; width: 100%; border: none; border-radius: 14px; cursor: pointer;
    padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.ppm-buy-btn:active { transform: scale(.97); }
.ppm-buy-shine {
    position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); animation: ppbCtaShine 3s ease-in-out infinite;
}
.ppm-buy-price { font-size: 1.3rem; font-weight: 900; letter-spacing: .5px; position: relative; z-index: 1; }
.ppm-buy-sub  { font-size: .68rem; opacity: .85; position: relative; z-index: 1; }
.ppm-buy-krypts {
    background: linear-gradient(135deg, #1c2f3a, #0e1a20); border: 1px solid rgba(0,229,255,.35); color: #00e5ff;
    box-shadow: 0 0 16px rgba(0,229,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.ppm-buy-krypts:hover { box-shadow: 0 0 26px rgba(0,229,255,.4); border-color: rgba(0,229,255,.7); }
.ppm-buy-krypts.ppm-insufficient { opacity: .5; filter: grayscale(.4); }
.ppm-buy-krypts.ppm-insufficient:hover { box-shadow: 0 0 16px rgba(0,229,255,.18); }
.ppm-buy-money {
    background: linear-gradient(135deg, #ffe98a, #ffc233, #ff8a00); background-size: 200% 200%;
    animation: ppbCtaGradient 4s ease infinite; color: #1a0d00;
    box-shadow: 0 0 20px rgba(255,180,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.ppm-buy-money:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 30px rgba(255,190,20,.7); }
.ppm-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: #444; font-size: .66rem; letter-spacing: 2px; justify-content: center; }
.ppm-divider::before, .ppm-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.ppm-footnote { text-align: center; font-size: .66rem; color: #555; padding: 4px 26px 22px; margin: 0; }
.ppm-buy-btn.ppm-loading { pointer-events: none; }
.ppm-buy-btn.ppm-loading .ppm-buy-price,
.ppm-buy-btn.ppm-loading .ppm-buy-sub { visibility: hidden; }
.ppm-buy-btn.ppm-loading::after {
    content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.25); border-top-color: currentColor; animation: ppmSpin .7s linear infinite;
}
@media (max-width:480px) {
    .ppm-header, .ppm-perks, .ppm-options { padding-left: 18px; padding-right: 18px; }
    .ppm-title { font-size: 1.5rem; }
}

/* ── passRevealRewardList & Drop button ──────────────────── */
#passRevealRewardList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 8px 0 4px;
    min-height: 0;
}
.pcr-item {
    font-family: monospace;
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
}
.pcr-nc   { color: #e8d27a; border-color: #5a5230; background: rgba(232,210,122,.06); }
.pcr-kr   { color: #c9a8ff; border-color: #4a3a6e; background: rgba(201,168,255,.06); }
.pcr-bst  { color: #7fe8b8; border-color: #2c5a45; background: rgba(127,232,184,.06); }
.pcr-drop { border-color: currentColor; background: rgba(0,0,0,.2); opacity: .9; }
.pcr-skin { color: #ff8fa8; border-color: #5e2c3a; background: rgba(255,143,168,.06); }

#passRevealOpenDropBtn {
    display: none;
    margin: 8px auto 4px;
    padding: 8px 18px;
    font-family: monospace;
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--drop-col, #00ffaa);
    color: var(--drop-col, #00ffaa);
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
#passRevealOpenDropBtn:hover {
    background: var(--drop-col, #00ffaa);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════
   CYBER DROP — MODAL D'OUVERTURE (composant nouveau v2)
═══════════════════════════════════════════════════════════ */
#cyberDropOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000; /* en dessous de #passClaimOverlay (20000) */
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    animation: cdOverlayIn .25s ease-out;
}
#cyberDropOverlay.cd-visible { display: flex; }

@keyframes cdOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#cyberDropCard {
    position: relative;
    background: #0d1120;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 2rem 2.5rem;
    min-width: 320px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 60px rgba(0,0,0,.7);
}
#cdTitle {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: #00ffe1;
    text-shadow: 0 0 10px rgba(0,255,225,.4);
    margin: 0;
}

/* Stage */
.cd-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 220px;
    position: relative;
}
.cd-chamber {
    width: 170px;
    height: 210px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

/* Drop box */
.cd-box {
    width: 120px;
    height: 150px;
    border-radius: 14px;
    position: relative;
    background: linear-gradient(160deg, #121b32, #070a12);
    border: 2px solid var(--rc, #555);
    box-shadow: 0 0 18px -4px var(--rc, #555), inset 0 0 18px -8px var(--rc, #555);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: box-shadow .3s;
}
.cd-icon {
    font-size: clamp(2.2rem, 6vmin, 4rem);
    color: var(--rc, #fff);
    text-shadow: 0 0 14px var(--rc, #fff);
    line-height: 1;
}
.cd-battery {
    width: clamp(48px, 11vmin, 72px);
    height: 8px;
    border: 1px solid var(--rc, #555);
    border-radius: 2px;
    overflow: hidden;
}
.cd-battery-fill {
    height: 100%;
    background: var(--rc, #555);
    box-shadow: 0 0 6px var(--rc, #555);
    transition: width .4s;
}
.cd-pct {
    font-family: monospace;
    font-size: clamp(.62rem, 1.6vmin, .85rem);
    color: var(--rc, #999);
    letter-spacing: 1px;
}

/* Rareté idle animations */
.cd-lowwatt     { animation: cdFlickerLow 2.6s infinite; }
.cd-standard    { animation: cdGlowSteady 2.4s ease-in-out infinite; }
.cd-surge       { animation: cdPulseSurge 1.5s ease-in-out infinite; }
.cd-overclock   { animation: cdTrembleOC .45s ease-in-out infinite; }
.cd-hypercharge { animation: cdTrembleHC .22s ease-in-out infinite; }
.cd-core        { animation: cdHeartbeat 1.9s ease-in-out infinite; }

@keyframes cdFlickerLow    { 0%,100%{opacity:1} 4%{opacity:.3} 8%{opacity:1} 9%{opacity:.4} 40%{opacity:1} 41%{opacity:.5} 70%{opacity:1} 71%{opacity:.25} 72%{opacity:1} }
@keyframes cdGlowSteady    { 0%,100%{box-shadow:0 0 16px -4px var(--rc),inset 0 0 16px -8px var(--rc)} 50%{box-shadow:0 0 28px -2px var(--rc),inset 0 0 24px -6px var(--rc)} }
@keyframes cdPulseSurge    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes cdTrembleOC     { 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-1.5px,1px) rotate(-.6deg)} 75%{transform:translate(1.5px,-1px) rotate(.6deg)} }
@keyframes cdTrembleHC     { 0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-2.5px,1.5px) rotate(-1.2deg)} 50%{transform:translate(2px,-2px) rotate(1deg)} 80%{transform:translate(-1.5px,-1px) rotate(-.8deg)} }
@keyframes cdHeartbeat     { 0%,100%{transform:scale(1)} 30%{transform:scale(1.07)} 45%{transform:scale(.99)} 60%{transform:scale(1.05)} }

/* Ouverture en cours : la box disparaît */
.cd-is-opening .cd-box { transition: opacity .25s ease .55s; opacity: 0; }
.cd-is-opening .cd-box { animation: none !important; }

/* Anneau de distorsion (Core) */
.cd-distortion-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid var(--rc, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}
.cd-ring-active {
    opacity: .25;
    animation: cdRingRotate 6s linear infinite;
}
@keyframes cdRingRotate { 0%{transform:rotate(0deg) scale(1)} 100%{transform:rotate(360deg) scale(1.05)} }

/* Fumée (Overclock) */
.cd-smoke {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(177,75,255,.35);
    filter: blur(3px);
    opacity: 0;
    animation: cdSmokeRise 2.2s ease-out infinite;
}
@keyframes cdSmokeRise { 0%{opacity:0;transform:translateY(0) scale(.6)} 20%{opacity:.6} 100%{opacity:0;transform:translateY(-46px) scale(1.6)} }

/* Craquelures (Hypercharge) */
.cd-crack {
    position: absolute;
    background: var(--rc, #ff5b2e);
    opacity: 0;
    box-shadow: 0 0 6px var(--rc, #ff5b2e);
    animation: cdCrackFlicker 1.1s ease-in-out infinite;
}
@keyframes cdCrackFlicker { 0%,100%{opacity:0} 45%{opacity:0} 50%{opacity:.9} 55%{opacity:0} }

/* Flash d'ouverture */
.cd-flash {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rc, #fff);
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
    animation: cdFlashPop .7s ease-out forwards;
}
@keyframes cdFlashPop { 0%{opacity:0;transform:scale(.2)} 25%{opacity:.95;transform:scale(1.3)} 100%{opacity:0;transform:scale(2.6)} }

/* Étincelles */
.cd-spark {
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--rc, #fff);
    box-shadow: 0 0 8px var(--rc, #fff);
    pointer-events: none;
    animation: cdSparkFly var(--dur,.8s) ease-out forwards;
}
@keyframes cdSparkFly {
    0%  { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
    100%{ opacity: 0; transform: translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.3); }
}

/* Résultat */
.cd-result {
    text-align: center;
    min-height: 36px;
    font-family: monospace;
    font-size: .8rem;
    color: #999;
    line-height: 1.5;
}

/* Infos & boutons */
.cd-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 100%;
}
#cdInfoText {
    font-family: monospace;
    font-size: .78rem;
    color: #777;
    text-align: center;
    margin: 0;
}
#cdOpenBtn {
    width: 100%;
    font-family: monospace;
    font-size: .82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #00ffe1;
    color: #00ffe1;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
#cdOpenBtn:hover  { background: #00ffe1; color: #000; }
#cdOpenBtn:disabled { opacity: .35; cursor: not-allowed; }
#cdCloseBtn {
    background: transparent;
    border: 1px solid #2a2a3a;
    color: #555;
    font-family: monospace;
    font-size: .72rem;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: border-color .15s, color .15s;
}
#cdCloseBtn:hover { border-color: #555; color: #aaa; }

/* ── Batterie visuelle par rareté ─────────────────────────── */
.cd-lowwatt     .cd-battery-fill { width: 5%;   }
.cd-standard    .cd-battery-fill { width: 50%;  }
.cd-surge       .cd-battery-fill { width: 75%;  }
.cd-overclock   .cd-battery-fill { width: 100%; }
.cd-hypercharge .cd-battery-fill { width: 100%; }
.cd-core        .cd-battery-fill { width: 100%; }

/* ── @media pass screen (mise à jour pour 50 cards) ──────── */
@media (max-width: 600px) {
    .pass-palier-header { font-size: .5rem; padding: 4px 8px; }
    #passTrackBadge, #passCoinMult { font-size: .62rem; }
    #cyberDropCard { padding: 1.4rem; min-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-box, .cd-smoke, .cd-crack, .cd-distortion-ring,
    .cd-spark, .cd-flash { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PASS CLAIM — NOUVEAU SYSTÈME PLEIN ÉCRAN (v3)
   Remplace l'ancienne mécanique gift-box / 3 clics chargés.
═══════════════════════════════════════════════════════════ */

/* Overlay plein écran cliquable */
#passClaimOverlay {
    cursor: pointer;
    user-select: none;
}

/* Card : plus aérée, pas de taille fixe contraignante pour le drop reveal */
#passClaimCard {
    width: min(96vw, 400px);
    gap: 0;
    padding: 28px 24px 24px;
}
#passClaimTitle {
    font-size: 1rem;
    letter-spacing: 2px;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255,215,0,.4);
    margin: 0 0 18px;
    text-transform: uppercase;
    font-style: normal;
}

/* ── Mode CYBER DROP plein écran — transforme la carte compacte en
   véritable scène cyberpunk grand format le temps de la révélation ── */
#passClaimCard.pc-drop-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    padding: max(24px, 4vh) 20px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,229,255,.09), transparent 65%),
        linear-gradient(180deg, #030408 0%, #06060f 50%, #030408 100%);
    box-shadow: none;
    justify-content: center;
}
#passClaimCard.pc-drop-fullscreen::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background-image: linear-gradient(var(--rc,#00e5ff) 1px,transparent 1px),
                       linear-gradient(90deg,var(--rc,#00e5ff) 1px,transparent 1px);
    background-size: 72px 72px; opacity: .10;
    transform: perspective(500px) rotateX(65deg) translateY(20%); transform-origin: bottom;
    mask-image: linear-gradient(to top,rgba(0,0,0,.9),transparent 90%);
    -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,.9),transparent 90%);
    animation: pdrGridScroll 5.5s linear infinite;
    pointer-events: none;
}
#passClaimCard.pc-drop-fullscreen::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none; opacity: .32;
    background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 2px,transparent 3px);
}
@keyframes pdrGridScroll { from{background-position:0 0} to{background-position:0 72px} }
#passClaimCard.pc-drop-fullscreen #passClaimTitle {
    position: relative; z-index: 2;
    font-size: clamp(.85rem, 2.2vmin, 1.15rem);
}

/* ── ÉCRAN A — Drop Reveal ─────────────────────────────── */
#passDropReveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: clamp(14px, 2.4vh, 26px);
    width: 100%;
    position: relative;
}

/* Particules ambiantes flottantes (remplies en JS) */
#pdrAmbient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.pdr-amb-dot {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: var(--rc,#00e5ff); opacity: .3; filter: blur(.5px);
    animation: pdrAmbFloat linear infinite;
}
@keyframes pdrAmbFloat { 0%{transform:translateY(0);opacity:0} 10%{opacity:.4} 90%{opacity:.3} 100%{transform:translateY(-110vh);opacity:0} }

/* Rayons de lumière plein écran au moment de l'ouverture */
#pdrRays { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 20002; }
#pdrRays.pdr-rays-burst { animation: pdrRaysBurst .9s ease-out forwards; }
@keyframes pdrRaysBurst { 0%{opacity:0;transform:scale(.3) rotate(0)} 20%{opacity:.9} 100%{opacity:0;transform:scale(2.4) rotate(18deg)} }
.pdr-ray { position:absolute; left:50%; top:50%; width:2px; height:140vmax; background:linear-gradient(to top,var(--rc,#00e5ff),transparent 65%); transform-origin: top center; }

#pdrChamber {
    position: relative;
    z-index: 1;
    width: min(78vmin, 440px);
    height: min(86vmin, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cadre hexagonal + anneaux décoratifs derrière la box */
.pdr-hex-frame {
    position: absolute; width: 62%; height: 62%;
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background: linear-gradient(160deg, rgba(255,255,255,.035), transparent 45%);
    border: 1px solid var(--rc, #00e5ff);
    opacity: .3;
    pointer-events: none;
}
.pdr-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid var(--rc,#00e5ff);
    opacity: .16; pointer-events: none;
}
.pdr-ring-1 { width: 70%; height: 70%; animation: pdrRingSpin 10s linear infinite; }
.pdr-ring-2 { width: 90%; height: 90%; border-style: dashed; animation: pdrRingSpin 16s linear infinite reverse; }
@keyframes pdrRingSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

#pdrShockwave {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    border: 2px solid var(--rc, #00ffe1);
    opacity: 0;
    pointer-events: none;
}
#pdrShockwave.pdr-shock-anim {
    animation: pdrShockPop .6s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes pdrShockPop {
    0%  { opacity:.8; transform:scale(.3); }
    100%{ opacity:0;  transform:scale(2.2); }
}

/* Le pdrBox réutilise les classes .cd-box + .cd-{rarity} déjà définies */
#pdrBox {
    position: relative; z-index: 2;
    width: 130px;
    height: 160px;
    max-width: 92%;
    max-height: 92%;
    cursor: default; /* le clic doit aller à l'overlay, pas au box */
    transition: width .45s cubic-bezier(.34,1.56,.64,1), height .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
#pdrBox.pdr-final-scale { transform: scale(1.16); }

/* ── "Tour sur lui-même" + pop à chaque clic de charge ──
   #pdrBox + .pdr-box-pop l'emporte (ID+classe, !important) sur les
   animations idle de rareté (.cd-overclock, etc.) le temps
   du pop, puis l'idle reprend normalement une fois la classe retirée. */
#pdrBox.pdr-box-pop {
    animation: pdrBoxPop .5s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes pdrBoxPop {
    0%   { transform: scale(1)     rotate(0deg);   }
    55%  { transform: scale(1.14)  rotate(300deg);  }
    100% { transform: scale(1)     rotate(360deg);  }
}

/* Badge rareté */
#pdrRarityBadge {
    font-family: monospace;
    font-size: clamp(.78rem, 2vmin, 1.05rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 16px;
    border: 1px solid currentColor;
    border-radius: 4px;
    min-height: 26px;
    opacity: 0;
    transition: opacity .3s;
    position: relative; z-index: 2;
}
#pdrRarityBadge.pdr-badge-visible { opacity: 1; }
#pdrRarityBadge.pdr-badge-final {
    animation: pdrBadgePulse 1.4s ease-in-out infinite;
    font-size: clamp(.9rem, 2.4vmin, 1.2rem);
    font-weight: 700;
}
@keyframes pdrBadgePulse {
    0%,100% { text-shadow: 0 0 8px currentColor; }
    50%      { text-shadow: 0 0 22px currentColor, 0 0 6px currentColor; }
}

/* Dots de progression */
#pdrDots {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative; z-index: 2;
}
.pdr-dot {
    width: clamp(9px, 1.8vmin, 12px);
    height: clamp(9px, 1.8vmin, 12px);
    border-radius: 50%;
    border: 1px solid #00e5ff;
    background: #0d2a33;
    box-shadow: 0 0 8px rgba(0,229,255,.6);
    transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.pdr-dot.pdr-dot-spent {
    background: #1a1a22;
    border-color: #333;
    box-shadow: none;
    transform: scale(.78);
}

/* Instruction tap */
#pdrInstruction {
    font-family: monospace;
    font-size: clamp(.72rem, 1.8vmin, .95rem);
    letter-spacing: 2px;
    color: #555;
    text-transform: uppercase;
    margin: 0;
    position: relative; z-index: 2;
    animation: pdrInstrBlink 2s ease-in-out infinite;
}
@keyframes pdrInstrBlink {
    0%,100% { opacity:.6; } 50% { opacity:1; }
}

/* Étincelles sur la chambre */
.pdr-spark {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--rc, #fff);
    box-shadow: 0 0 6px var(--rc, #fff);
    pointer-events: none;
    animation: pdrSparkFly var(--dur,.7s) ease-out forwards;
}
@keyframes pdrSparkFly {
    0%  { opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx,20px),var(--dy,-20px)) scale(.2); }
}

/* ── ÉCRAN B — Loot collect direct ────────────────────── */
#passLootScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    animation: lootScreenIn .3s ease-out;
}
@keyframes lootScreenIn {
    from { opacity:0; transform:scale(.94); }
    to   { opacity:1; transform:scale(1); }
}

/* Icône principale */
#passLootScreen .pc-icon-wrap {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    animation: pcIconPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pcIconPop {
    from { transform:scale(0) rotate(-20deg); opacity:0; }
    to   { transform:scale(1) rotate(0); opacity:1; }
}

#lootTitle {
    font-family: monospace;
    font-size: 1.5rem;
    color: #00ffe1;
    text-shadow: 0 0 14px rgba(0,255,225,.4);
    margin: 0;
    letter-spacing: 1px;
}
#lootSub {
    font-family: monospace;
    font-size: .7rem;
    color: #555;
    letter-spacing: 1px;
    margin: 0;
}
#lootList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}
.pc-tap-hint {
    font-family: monospace;
    font-size: .65rem;
    letter-spacing: 2px;
    color: #333;
    text-transform: uppercase;
    margin: 8px 0 0;
    animation: pdrInstrBlink 2s ease-in-out infinite;
}

/* Transition entre écrans */
#passDropReveal, #passLootScreen {
    transition: opacity .2s;
}

/* Supprime le curseur pointeur sur le contenu interne (le clic passe à l'overlay) */
#passClaimCard * { pointer-events: none; }
#passClaimCard button { pointer-events: auto; } /* si boutons internes */
#cyberDropOverlay #cyberDropCard * { pointer-events: auto; } /* le modal inventaire garde ses boutons */


/* ═══════════════════════════════════════════════════════════
   PASS CYBER v3 — NEUTRALISATION ANCIENS ÉLÉMENTS
   Les éléments #passGiftBox, #passRevealBox, #passClickProgress
   n'existent plus dans le DOM. Ces règles sont donc inertes
   mais on les cache par précaution si jamais ils réapparaissent.
═══════════════════════════════════════════════════════════ */
#passGiftBox, #passRevealBox, #passClickProgress,
#passGiftEmoji, #passClickDots, #passOpenPrompt,
#passClaimHint, #passRevealOpenDropBtn { display: none !important; }

/* ── Ajustement passClaimCard pour le nouveau contenu ─── */
#passClaimCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 28px 24px 24px;
    width: min(96vw, 420px);
    min-height: 340px;
    background: #0d1120;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 0 60px rgba(0,0,0,.8);
    pointer-events: none; /* le clic passe à l'overlay */
}

/* Le titre en haut de carte */
#passClaimTitle {
    font-family: monospace;
    font-size: .88rem;
    letter-spacing: 2px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,.35);
    margin: 0 0 18px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    width: 100%;
}

/* ── Drop reveal screen ─────────────────────────────── */
#passDropReveal {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
/* NB : #pdrChamber, #pdrShockwave (+ .pdr-shock-anim/@keyframes) et la
   taille de #pdrBox sont définis une seule fois plus haut (section
   ÉCRAN A — Drop Reveal). Les anciennes redéclarations ici écrasaient
   silencieusement ces règles (même spécificité, ordre de cascade) et
   annulaient l'agrandissement grand écran du CyberDrop — supprimées. */

/* Loot screen */
#passLootScreen {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: lootIn .28s ease-out both;
}
@keyframes lootIn { from { opacity:0; transform: scale(.92) translateY(8px); } to { opacity:1; transform: none; } }

#lootTitle {
    font-family: monospace;
    font-size: 1.45rem;
    color: #00ffe1;
    text-shadow: 0 0 14px rgba(0,255,225,.4);
    margin: 0;
    letter-spacing: 1px;
    text-align: center;
}
#lootSub {
    font-family: monospace;
    font-size: .68rem;
    color: #555;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
}
#lootList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 2px;
}

/* pc-icon-wrap déjà défini, on ajuste juste la taille */
#passLootScreen .pc-icon-wrap {
    width: 82px; height: 82px;
    font-size: 2.8rem;
    animation: pcIconPop .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pcIconPop {
    from { transform: scale(0) rotate(-18deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* Hint clignote en bas */
.pc-tap-hint {
    font-family: monospace;
    font-size: .62rem;
    letter-spacing: 2px;
    color: #333;
    text-transform: uppercase;
    margin: 6px 0 0;
    animation: pdrInstrBlink 2.2s ease-in-out infinite;
}

/* ── overlay plein écran cliquable ──────────────────── */
#passClaimOverlay { cursor: pointer; }
#passClaimOverlay * { pointer-events: none; }

/* cdCloseBtn dans cyberDropOverlay conserve ses clics */
#cyberDropOverlay #cyberDropCard,
#cyberDropOverlay #cyberDropCard * { pointer-events: auto; }


/* ═══════════════════════════════════════════════════════════════
   ÉCRAN DE CHARGEMENT FIREBASE
═══════════════════════════════════════════════════════════════ */
#crLoadingOverlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #080810;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    transition: opacity 0.5s ease;
}
#crLoadingOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.cr-loading-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 28px;
    width: min(340px, 85vw);
}
.cr-loading-logo {
    font-family: inherit;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}
.cr-loading-logo span { color: #00ffff; }
.cr-loading-bar-wrap {
    width: 100%;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    overflow: hidden;
}
.cr-loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #00ff88);
    border-radius: 2px;
    animation: crLoadBar 1.8s ease-in-out infinite;
}
@keyframes crLoadBar {
    0%   { width: 0%;   margin-left: 0%; }
    50%  { width: 60%;  margin-left: 20%; }
    100% { width: 0%;   margin-left: 100%; }
}
.cr-loading-text {
    font-size: 0.78rem;
    color: #556;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════
   CYBER DROP — PLEIN ÉCRAN + LASER + PREMIUM/FREE v4
════════════════════════════════════════════════════ */

/* ── Laser SVG container ── */
#passCarouselWrap { position: relative; }

/* ── CyberDrop overlay plein écran ── */
#cyberDropOverlay {
    display: none; position: fixed; inset: 0; z-index: 5000;
    cursor: pointer; user-select: none; overflow: hidden; --rc: #00ffe1;
    background: transparent !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#cyberDropOverlay.cd-visible { display: flex; align-items: center; justify-content: center; }
#cyberDropCard { display: none !important; }

.cdo-bg-base {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,255,225,.10), transparent 65%),
                linear-gradient(180deg, #030408 0%, #060714 50%, #030408 100%);
}
.cdo-bg-grid {
    position: absolute; left:0; right:0; bottom:0; height:55%;
    background-image: linear-gradient(var(--rc,#00ffe1) 1px,transparent 1px),
                      linear-gradient(90deg,var(--rc,#00ffe1) 1px,transparent 1px);
    background-size: 72px 72px; opacity: .12;
    transform: perspective(500px) rotateX(65deg) translateY(20%); transform-origin: bottom;
    mask-image: linear-gradient(to top,rgba(0,0,0,.9),transparent 90%);
    -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,.9),transparent 90%);
    animation: cdoGridScroll 5.5s linear infinite;
}
@keyframes cdoGridScroll { from{background-position:0 0} to{background-position:0 72px} }
.cdo-scanlines { position:absolute;inset:0;pointer-events:none;opacity:.4;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 2px,transparent 3px); }

/* Ambient */
#cdoAmbient { position:absolute;inset:0;pointer-events:none; }
.cdo-amb-dot { position:absolute;width:3px;height:3px;border-radius:50%;background:var(--rc,#00ffe1);opacity:.3;filter:blur(.5px);animation:cdoAmbFloat linear infinite; }
@keyframes cdoAmbFloat { 0%{transform:translateY(0);opacity:0} 10%{opacity:.45} 90%{opacity:.35} 100%{transform:translateY(-110vh);opacity:0} }

/* Rayons */
#cdoRays { position:fixed;inset:0;pointer-events:none;opacity:0;z-index:3; }
#cdoRays.cdo-rays-burst { animation:cdoRaysBurst 1s ease-out forwards; }
@keyframes cdoRaysBurst { 0%{opacity:0;transform:scale(.3) rotate(0)} 20%{opacity:.95} 100%{opacity:0;transform:scale(2.5) rotate(20deg)} }
.cdo-ray { position:absolute;left:50%;top:50%;width:2px;height:140vmax;background:linear-gradient(to top,var(--rc,#00ffe1),transparent 65%);transform-origin:top center; }

/* Flash */
#cdoFlash { position:fixed;inset:0;pointer-events:none;opacity:0;z-index:10;background:radial-gradient(circle at 50% 45%,#fff 0%,var(--rc,#00ffe1) 28%,transparent 65%);mix-blend-mode:screen; }
#cdoFlash.cdo-flash-anim { animation:cdoFlashBurst .8s ease-out; }
@keyframes cdoFlashBurst { 0%{opacity:0;transform:scale(.5)} 15%{opacity:1;transform:scale(1.1)} 40%{opacity:.7;transform:scale(1.3)} 100%{opacity:0;transform:scale(2)} }

/* Centre */
.cdo-center-wrap { position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;width:min(92vw,580px);text-align:center;gap:0; }
.cdo-eyebrow { font-family:monospace;font-size:.72rem;letter-spacing:5px;color:#3a5a66;text-transform:uppercase;margin-bottom:8px; }

.cdo-rarity-badge { font-family:monospace;font-size:.85rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:5px 18px;border:1px solid currentColor;border-radius:4px;margin-bottom:18px;text-shadow:0 0 10px currentColor;animation:cdoBadgePulse 1.6s ease-in-out infinite;min-height:28px; }
@keyframes cdoBadgePulse { 0%,100%{text-shadow:0 0 8px currentColor} 50%{text-shadow:0 0 24px currentColor,0 0 6px currentColor} }
.cdo-badge-hidden { opacity:0;transform:translateY(-8px);pointer-events:none; }
#cyberDropOverlay.cdo-revealed .cdo-rarity-badge { opacity:1!important;transform:none!important; }

.cdo-logo-wrap { position:relative;width:clamp(220px,48vmin,340px);height:clamp(240px,52vmin,360px);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(14px,3vh,28px); }
.cdo-hex-frame { position:absolute;inset:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(160deg,rgba(255,255,255,.04),transparent 45%); }
.cdo-ring { position:absolute;border-radius:50%;border:1px solid var(--rc,#00ffe1);opacity:.18;pointer-events:none; }
.cdo-ring-1 { width:76%;height:76%;animation:cdoRingSpin 10s linear infinite; }
.cdo-ring-2 { width:98%;height:98%;border-style:dashed;animation:cdoRingSpin 16s linear infinite reverse; }
@keyframes cdoRingSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cdo-hex-glow { position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,var(--rc,#00ffe1),transparent 65%);opacity:.18;pointer-events:none;animation:cdoHexGlowPulse 2s ease-in-out infinite; }
@keyframes cdoHexGlowPulse { 0%,100%{opacity:.18;transform:scale(1)} 50%{opacity:.32;transform:scale(1.1)} }
#cyberDropOverlay.cdo-revealed .cdo-hex-glow { animation:cdoHexGlowRevealed 1.5s ease-in-out infinite; }
@keyframes cdoHexGlowRevealed { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.65;transform:scale(1.18)} }

.cdo-logo-icon { position:relative;z-index:2;font-size:clamp(5rem,18vmin,9rem);line-height:1;filter:drop-shadow(0 0 30px currentColor);transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s; }
.cdo-logo-pulse { animation:cdoLogoPulse 2.2s ease-in-out infinite; }
@keyframes cdoLogoPulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 28px currentColor)} 50%{transform:scale(1.06);filter:drop-shadow(0 0 46px currentColor) drop-shadow(0 0 12px currentColor)} }
.cdo-logo-explode { animation:cdoLogoExplode .7s cubic-bezier(.34,1.56,.64,1) forwards,cdoLogoPulse 2s ease-in-out .7s infinite; }
@keyframes cdoLogoExplode { 0%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 30px currentColor)} 35%{transform:scale(1.5) rotate(-15deg);filter:drop-shadow(0 0 80px currentColor) drop-shadow(0 0 30px currentColor)} 65%{transform:scale(.9) rotate(8deg);filter:drop-shadow(0 0 50px currentColor)} 100%{transform:scale(1.1) rotate(0);filter:drop-shadow(0 0 40px currentColor)} }

/* Récompenses */
.cdo-rewards-panel { flex-direction:column;align-items:center;gap:10px;width:100%;animation:cdoRewardsIn .5s ease-out both;margin-bottom:12px; }
@keyframes cdoRewardsIn { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:none} }
.cdo-rewards-title { font-family:monospace;font-size:.65rem;letter-spacing:3px;color:#3a5a66;text-transform:uppercase;margin-bottom:4px; }
.cdo-rewards-list { display:flex;flex-wrap:wrap;justify-content:center;gap:10px; }
.cdo-reward-item { display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 22px;border-radius:10px;border:1px solid;min-width:90px;animation:cdoItemPop .4s cubic-bezier(.34,1.56,.64,1) both;font-family:monospace; }
.cdo-reward-item:nth-child(2){animation-delay:.1s} .cdo-reward-item:nth-child(3){animation-delay:.2s}
@keyframes cdoItemPop { from{transform:scale(0) rotate(-12deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.cdo-rw-icon  { font-size:2rem; }
.cdo-rw-amount{ font-size:1.3rem;font-weight:900;letter-spacing:1px; }
.cdo-rw-label { font-size:.6rem;letter-spacing:2px;text-transform:uppercase;opacity:.6; }
.cdo-rw-coins  { background:rgba(232,210,122,.08);color:#e8d27a;border-color:rgba(200,180,80,.35);box-shadow:0 0 14px rgba(232,210,122,.18); }
.cdo-rw-krypts { background:rgba(177,127,255,.12);color:#c9a8ff;border-color:rgba(168,85,247,.4);box-shadow:0 0 14px rgba(168,85,247,.25); }
.cdo-rw-skin   { background:rgba(255,215,0,.1);color:#ffd700;border-color:rgba(255,215,0,.4);box-shadow:0 0 18px rgba(255,215,0,.3);animation:cdoSkinShine 1.8s ease-in-out infinite; }
@keyframes cdoSkinShine { 0%,100%{box-shadow:0 0 18px rgba(255,215,0,.3)} 50%{box-shadow:0 0 32px rgba(255,215,0,.55),0 0 60px rgba(255,215,0,.22)} }

.cdo-instruction { font-family:monospace;font-size:.72rem;letter-spacing:3px;color:#4a5a60;text-transform:uppercase;margin:8px 0 0;animation:cdoInstrBlink 2s ease-in-out infinite; }
@keyframes cdoInstrBlink { 0%,100%{opacity:.55} 50%{opacity:1} }
.cdo-close-btn { position:fixed;bottom:28px;left:50%;transform:translateX(-50%);font-family:monospace;font-size:.75rem;letter-spacing:2px;text-transform:uppercase;padding:10px 28px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);color:#888;border-radius:6px;cursor:pointer;pointer-events:auto;z-index:20;transition:border-color .2s,color .2s;animation:cdoCloseAppear .3s ease-out both; }
@keyframes cdoCloseAppear { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.cdo-close-btn:hover { border-color:rgba(255,255,255,.3);color:#ccc; }
#cyberDropOverlay * { pointer-events:none; }
#cyberDropOverlay .cdo-close-btn { pointer-events:auto!important; }

/* ── Premium vs Free ── */
.pass-row-label-prem.prl-active {
    color:#ffd700!important;
    text-shadow:0 0 12px rgba(255,215,0,.6),0 0 24px rgba(255,215,0,.25);
    animation:premLabelGlow 2s ease-in-out infinite;
}
@keyframes premLabelGlow { 0%,100%{text-shadow:0 0 10px rgba(255,215,0,.5)} 50%{text-shadow:0 0 22px rgba(255,215,0,.85),0 0 40px rgba(255,215,0,.3)} }

/* Pass card premium — apparence dorée distincte */
.pass-card .pt-premium-track { background:linear-gradient(135deg,rgba(40,28,4,.75),rgba(22,15,2,.85)); border-top:1px solid rgba(255,195,35,.18); position:relative; }
.pass-card .pt-premium-track::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,200,60,.55) 35%,rgba(255,220,80,.8) 50%,rgba(255,200,60,.55) 65%,transparent); }
.pass-card.pt-ready .pt-premium-track { border-top-color:rgba(255,215,0,.35);box-shadow:inset 0 0 12px rgba(255,215,0,.06); }
.pass-card.pt-claimed .pt-premium-track { border-top-color:rgba(255,215,0,.12); }

.ptb-premium { background:linear-gradient(90deg,rgba(40,28,4,.9),rgba(60,40,4,.9))!important;border:1px solid rgba(255,215,0,.4)!important;color:#ffd700!important;text-shadow:0 0 10px rgba(255,215,0,.5)!important;box-shadow:0 0 14px rgba(255,215,0,.18)!important; }
.ptb-free    { background:rgba(0,255,145,.06)!important;border:1px solid rgba(0,255,145,.25)!important;color:#00d68f!important; }

/* ═══════════════════════════════════════════════════════════
   OVERLAY ROTATION FORCÉE — PAYSAGE OBLIGATOIRE (mobile)
   screen.orientation?.lock() (js/main.js) échoue silencieusement
   sur iOS Safari : ce filet de sécurité 100% CSS prend le relais.
   Le media query pilote entièrement l'affichage, donc aucun JS
   n'est requis pour que la protection soit active.
═══════════════════════════════════════════════════════════ */
#rotateOverlay {
    display: none;                 /* masqué par défaut : desktop / paysage / tablette large */
}

@media (orientation: portrait) and (max-width: 600px) {
    #rotateOverlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: #050508;
        z-index: 999999;            /* au-dessus de tous les autres écrans/overlays du jeu */
        pointer-events: auto;       /* bloque tout clic/touch vers l'interface en dessous */
        text-align: center;
        padding: 24px;
        gap: 4px;
    }

    /* Le reste du jeu ne doit jamais être scrollable/interactif pendant que
       l'overlay est visible — body est déjà overflow:hidden globalement,
       ceci renforce le blocage du scroll tactile sous l'overlay lui-même. */
    #rotateOverlay { touch-action: none; }

    .ro-phone {
        position: relative;
        width: 74px; height: 118px;
        margin-bottom: 22px;
        animation: roPhoneRotate 1.8s ease-in-out infinite;
    }
    .ro-phone-body {
        position: absolute; inset: 0;
        border: 4px solid #00ffff;
        border-radius: 12px;
        box-shadow: 0 0 18px rgba(0,255,255,.5), inset 0 0 10px rgba(0,255,255,.15);
        background: rgba(0,255,255,.05);
    }
    .ro-phone-body::before {
        content: '';
        position: absolute; top: 10px; left: 50%; width: 22px; height: 3px;
        transform: translateX(-50%);
        background: #00ffff; border-radius: 2px; opacity: .6;
    }
    .ro-arrow {
        position: absolute; top: -34px; right: -30px;
        font-size: 1.6rem; color: #ff0055;
        text-shadow: 0 0 10px #ff0055;
        animation: roArrowSpin 1.8s ease-in-out infinite;
    }

    .ro-text {
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: clamp(1.1rem, 5vw, 1.6rem);
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #00ffff;
        text-shadow: 0 0 15px #00ffff;
        margin: 0 0 6px 0;
    }
    .ro-sub {
        font-family: monospace;
        font-size: clamp(.75rem, 3vw, .95rem);
        color: #8fa0aa;
        margin: 0;
        letter-spacing: .5px;
    }
}

@keyframes roPhoneRotate {
    0%, 15%   { transform: rotate(0deg); }
    45%, 100% { transform: rotate(90deg); }
}
@keyframes roArrowSpin {
    0%, 15%   { transform: rotate(0deg);  opacity: .5; }
    45%       { transform: rotate(120deg); opacity: 1; }
    60%, 100% { transform: rotate(120deg); opacity: .5; }
}

/* ═══════════════════════════════════════════════════════════
   TOAST — SAUVEGARDE ÉCHOUÉE (persistant, avec bouton retry)
   Piloté uniquement par STORAGE._setStatus() (js/storage.js) :
   visible tant que la dernière tentative de sauvegarde a échoué,
   y compris pendant une run, au-dessus du HUD.
═══════════════════════════════════════════════════════════ */
#saveErrorToast {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99998;               /* sous #rotateOverlay (999999), au-dessus du reste */
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    padding: 10px clamp(12px, 3vw, 20px);
    padding-top: max(10px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(40,4,4,.97), rgba(30,3,3,.94));
    border-bottom: 1px solid rgba(255,68,68,.45);
    box-shadow: 0 4px 18px rgba(255,0,0,.25);
    cursor: pointer;
    font-family: 'Segoe UI', Arial, sans-serif;
    transform: translateY(-100%);
    transition: transform .25s ease;
}
#saveErrorToast.set-visible {
    display: flex;
    transform: translateY(0);
    animation: setToastPulse 2.2s ease-in-out infinite;
}
#saveErrorToast .set-icon {
    font-size: clamp(1rem, 3vw, 1.3rem);
    color: #ff4444;
    text-shadow: 0 0 10px #ff4444;
    flex-shrink: 0;
    animation: setIconBlink 1s ease-in-out infinite;
}
#saveErrorToast .set-text {
    color: #ffb3b3;
    font-size: clamp(.72rem, 2.4vw, .92rem);
    font-weight: 600;
    letter-spacing: .3px;
    text-align: center;
}
#saveErrorToast .set-retry-btn {
    flex-shrink: 0;
    background: linear-gradient(45deg, #ff4444, #ff0055);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px clamp(10px, 2.5vw, 16px);
    font-size: clamp(.65rem, 2vw, .8rem);
    font-weight: bold;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255,0,85,.4);
    margin: 0;
}
#saveErrorToast .set-retry-btn:active { transform: scale(.95); }

/* Pendant une nouvelle tentative : coupe le pouls, atténue le bouton */
#saveErrorToast.set-retrying { animation: none; opacity: .85; cursor: wait; }
#saveErrorToast.set-retrying .set-icon { animation: none; opacity: .5; }
#saveErrorToast.set-retrying .set-retry-btn { opacity: .5; pointer-events: none; }

@keyframes setToastPulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(255,0,0,.25); }
    50%      { box-shadow: 0 4px 26px rgba(255,0,0,.45); }
}
@keyframes setIconBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}

@media (max-width: 480px) {
    #saveErrorToast { flex-wrap: wrap; }
    #saveErrorToast .set-text { flex-basis: 100%; order: 1; }
    #saveErrorToast .set-retry-btn { order: 2; }
}

/* ═══════════════════════════════════════════════════════════════
   PSEUDO STYLES — Cosmétiques de classement mondial
   CyberRACER — le classement est le seul espace social où un
   pilote peut "flex" publiquement : ces effets sont donc conçus
   pour être visibles, chers, et immédiatement reconnaissables.
   ═══════════════════════════════════════════════════════════════ */

/* ── COULEURS UNIES — entrée de gamme, dès 500 NC ──
   Volontairement simples : une teinte fixe, léger glow, pas d'animation.
   C'est la porte d'entrée de la boutique avant les effets animés. */
.name-blue   { color: #33aaff; font-weight: 700; text-shadow: 0 0 6px rgba(51,170,255,.5); }
.name-red    { color: #ff3b3b; font-weight: 700; text-shadow: 0 0 6px rgba(255,59,59,.5); }
.name-green  { color: #33ff77; font-weight: 700; text-shadow: 0 0 6px rgba(51,255,119,.5); }
.name-purple { color: #b34dff; font-weight: 700; text-shadow: 0 0 6px rgba(179,77,255,.5); }
.name-orange { color: #ff9633; font-weight: 700; text-shadow: 0 0 6px rgba(255,150,51,.5); }

/* ── OR MASSIF ── reflet brillant qui traverse le texte ── */
.name-gold {
    position: relative;
    display: inline-block;
    font-weight: 900;
    background: linear-gradient(100deg,
        #7a5900 0%, #ffe27a 22%, #fff6d8 32%, #ffd700 45%,
        #a67c00 60%, #ffd700 78%, #7a5900 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255,215,0,.55));
    animation: nsGoldSweep 3.2s linear infinite;
}
@keyframes nsGoldSweep {
    0%   { background-position: 220% 0; }
    100% { background-position: -20% 0; }
}

/* ── MULTICOLORE ── dégradé fluide et animé ── */
.name-rainbow {
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(90deg,
        #ff2d55, #ff9500, #ffe600, #33ff77, #00e6ff, #7a5cff, #ff2d95, #ff2d55);
    background-size: 400% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #fff;
    animation: nsRainbowFlow 3.5s linear infinite;
}
@keyframes nsRainbowFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ── GLITCH CYBERPUNK ── saccadé, nécessite l'attribut data-text ── */
.name-glitch {
    position: relative;
    display: inline-block;
    font-weight: 800;
    color: #f0f0f0;
    letter-spacing: .5px;
    text-shadow: 0 0 4px rgba(255,255,255,.4);
    animation: nsGlitchJitter 2.6s infinite steps(1);
}
.name-glitch::before,
.name-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: transparent;
}
.name-glitch::before {
    color: #00fff9;
    animation: nsGlitchSlice1 2.6s infinite linear alternate-reverse;
    clip-path: inset(0 0 60% 0);
}
.name-glitch::after {
    color: #ff003c;
    animation: nsGlitchSlice2 2.6s infinite linear alternate-reverse;
    clip-path: inset(60% 0 0 0);
}
@keyframes nsGlitchJitter {
    0%, 88%, 100% { transform: translate(0,0); }
    89%  { transform: translate(-2px, 1px); }
    91%  { transform: translate(2px, -1px); }
    93%  { transform: translate(-1px, 0); }
    95%  { transform: translate(1px, 1px); }
    97%  { transform: translate(0, -1px); }
}
@keyframes nsGlitchSlice1 {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-2px, -1px); }
    40%  { transform: translate(2px, 1px); }
    60%  { transform: translate(-1px, 1px); }
    80%  { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}
@keyframes nsGlitchSlice2 {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(2px, 1px); }
    40%  { transform: translate(-2px, -1px); }
    60%  { transform: translate(1px, -1px); }
    80%  { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* ── NÉON VIP ── lueur pulsante puissante ── */
.name-neon-vip {
    display: inline-block;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    animation: nsNeonPulse 1.7s ease-in-out infinite;
}
@keyframes nsNeonPulse {
    0%, 100% {
        text-shadow:
            0 0 4px #fff, 0 0 10px #fff,
            0 0 18px #ff00e6, 0 0 32px #ff00e6,
            0 0 48px #bd00ff, 0 0 70px #bd00ff;
    }
    50% {
        text-shadow:
            0 0 2px #fff, 0 0 6px #fff,
            0 0 10px #ff00e6, 0 0 18px #ff00e6,
            0 0 26px #bd00ff, 0 0 38px #bd00ff;
    }
}

/* ── HOLOGRAMME ── dégradé cyan/blanc qui scintille + léger scanline ── */
.name-holo {
    position: relative;
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(100deg,
        #00fff9 0%, #ffffff 25%, #6fffe9 45%, #ffffff 65%, #00d9ff 85%, #00fff9 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #00fff9;
    filter: drop-shadow(0 0 8px rgba(0,255,249,.5));
    animation: nsHoloShift 2.4s ease-in-out infinite;
}
@keyframes nsHoloShift {
    0%, 100% { background-position: 0% 0; opacity: .92; }
    50%      { background-position: 200% 0; opacity: 1; }
}

/* ── PLASMA OVERDRIVE ── coeur blanc chauffé + halo orange/rouge pulsant ── */
.name-plasma {
    display: inline-block;
    font-weight: 900;
    color: #fff8e8;
    letter-spacing: .5px;
    animation: nsPlasmaPulse 1.4s ease-in-out infinite;
}
@keyframes nsPlasmaPulse {
    0%, 100% {
        text-shadow:
            0 0 4px #fff, 0 0 10px #ffcf6b,
            0 0 20px #ff7a00, 0 0 34px #ff3d00,
            0 0 54px #ff0044;
    }
    50% {
        text-shadow:
            0 0 6px #fff, 0 0 16px #ffcf6b,
            0 0 30px #ff7a00, 0 0 48px #ff3d00,
            0 0 74px #ff0044;
    }
}

/* ── OBSIDIENNE ROYALE ── noir profond cerclé d'or, le plus premium ── */
.name-obsidian {
    position: relative;
    display: inline-block;
    font-weight: 900;
    background: linear-gradient(160deg, #0a0a10 0%, #2a2a35 40%, #0a0a10 70%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #1a1a22;
    -webkit-text-stroke: .6px #ffd700;
    filter: drop-shadow(0 0 5px rgba(255,215,0,.55));
    animation: nsObsidianSheen 4s ease-in-out infinite;
}
@keyframes nsObsidianSheen {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   BOUTIQUE DE STYLES — onglet Profil ▸ Style Pseudo
   ═══════════════════════════════════════════════════════════════ */

.nstyle-intro {
    font-size: .74rem; color: #888; line-height: 1.5;
    text-align: center; margin: 0 0 16px; letter-spacing: .3px;
}

.nstyle-preview-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(0,255,255,.25);
    border-radius: 8px;
    padding: 18px 14px;
    text-align: center;
    margin-bottom: 18px;
}
.nstyle-preview-label {
    font-size: .62rem; color: #555; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 8px;
}
.nstyle-preview-name {
    font-size: clamp(1.3rem, 6vw, 1.9rem);
    font-family: monospace;
}

.nstyle-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.nstyle-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 14px 12px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: border-color .2s, transform .15s;
}
.nstyle-card:hover { transform: translateY(-2px); }

.nstyle-card.rar-common   { border-color: rgba(150,150,150,.35); }
.nstyle-card.rar-rare     { border-color: rgba(0,170,255,.4);   box-shadow: 0 0 14px rgba(0,170,255,.08); }
.nstyle-card.rar-epic     { border-color: rgba(189,0,255,.45);  box-shadow: 0 0 16px rgba(189,0,255,.12); }
.nstyle-card.rar-legendary{ border-color: rgba(255,215,0,.5);   box-shadow: 0 0 18px rgba(255,215,0,.15); }

.nstyle-rarity-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: .52rem; letter-spacing: 1.5px; font-weight: 700;
    text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
    border: 1px solid currentColor;
}
.nstyle-rarity-badge.rar-common    { color: #999; }
.nstyle-rarity-badge.rar-rare      { color: #33bbff; }
.nstyle-rarity-badge.rar-epic      { color: #cc55ff; }
.nstyle-rarity-badge.rar-legendary { color: #ffd700; }

.nstyle-card-preview {
    font-size: 1.05rem;
    font-family: monospace;
    margin-top: 10px;
    text-align: center;
    word-break: break-word;
}

.nstyle-card-price {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
    margin-top: 4px;
}
.nstyle-price-btn {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: .68rem; font-weight: 700;
    letter-spacing: .5px; padding: 7px 6px; border-radius: 5px;
    cursor: pointer; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background .18s, box-shadow .18s;
    box-shadow: none; margin: 0;
}
.nstyle-price-btn.currency-krypts {
    border-color: rgba(0,255,255,.4); color: #00ffff;
}
.nstyle-price-btn.currency-krypts:hover { background: rgba(0,255,255,.12); box-shadow: 0 0 14px rgba(0,255,255,.25); transform: none; }
.nstyle-price-btn.currency-coins {
    border-color: rgba(255,170,0,.4); color: #ffaa00;
}
.nstyle-price-btn.currency-coins:hover { background: rgba(255,170,0,.12); box-shadow: 0 0 14px rgba(255,170,0,.25); transform: none; }
.nstyle-price-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

.nstyle-owned-btn {
    width: 100%; padding: 8px 6px; border-radius: 5px;
    font-size: .68rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer; margin: 0;
    background: #222; color: #0f0; border: 1px solid #00ff88;
    box-shadow: none;
}
.nstyle-owned-btn:hover { background: rgba(0,255,136,.12); box-shadow: 0 0 12px rgba(0,255,136,.3); transform: none; }
.nstyle-owned-btn.equipped {
    background: rgba(0,255,136,.18); cursor: default;
    color: #00ff88;
}
.nstyle-owned-btn.equipped:hover { background: rgba(0,255,136,.18); box-shadow: none; }

@media (max-width: 480px) {
    .nstyle-shop-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   ANNONCE — Popup "Nouveaux styles de pseudo"
   ═══════════════════════════════════════════════════════════════ */

#nstyleAnnounceOverlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999999;
    align-items: center; justify-content: center;
    padding: 16px;
}
#nstyleAnnounceOverlay.show { display: flex; }

.nsa-backdrop {
    position: absolute; inset: 0;
    background: rgba(3,3,8,.86);
    backdrop-filter: blur(3px);
    animation: nsaFadeIn .3s ease;
}

.nsa-card {
    position: relative;
    width: min(440px, 100%);
    background: linear-gradient(165deg, rgba(15,10,25,.97), rgba(6,4,14,.98));
    border: 1px solid rgba(0,255,255,.35);
    border-radius: 14px;
    padding: 30px 24px 26px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(189,0,255,.15), 0 20px 60px rgba(0,0,0,.6),
                0 0 50px rgba(0,255,255,.15);
    animation: nsaPopIn .45s cubic-bezier(.2,1.4,.4,1);
}

.nsa-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px,
        rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: overlay;
}

.nsa-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: #666;
    font-size: 1rem; cursor: pointer; padding: 6px; margin: 0;
    box-shadow: none; line-height: 1;
}
.nsa-close:hover { color: #fff; transform: none; box-shadow: none; }

.nsa-eyebrow {
    font-size: .68rem; letter-spacing: 4px; font-weight: 700;
    color: #ff00e6; text-shadow: 0 0 10px #ff00e6;
    margin-bottom: 6px;
    animation: nsaEyebrowPulse 1.8s ease-in-out infinite;
}
@keyframes nsaEyebrowPulse {
    0%, 100% { opacity: 1; } 50% { opacity: .55; }
}

.nsa-title {
    margin: 0 0 4px; font-size: clamp(1.5rem, 7vw, 2.1rem);
    font-style: italic; letter-spacing: 1px;
    background: linear-gradient(90deg, #00ffff, #bd00ff, #ff00e6, #00ffff);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #fff;
    text-shadow: none;
    animation: nsRainbowFlow 4s linear infinite;
}

.nsa-sub {
    margin: 0 0 20px; color: #999; font-size: .8rem; letter-spacing: .3px;
}

.nsa-preview-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px 18px;
    padding: 18px 10px;
    margin-bottom: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    font-family: monospace; font-size: .95rem;
}

.nsa-desc {
    color: #aaa; font-size: .76rem; line-height: 1.6;
    margin: 0 0 22px; letter-spacing: .2px;
}

.nsa-actions { display: flex; flex-direction: column; gap: 8px; }

.nsa-cta {
    width: 100%; margin: 0;
    background: linear-gradient(45deg, #ff00e6, #bd00ff, #00ffff);
    background-size: 200% 100%;
    color: #050508; font-weight: 900; letter-spacing: 1px;
    padding: 13px 20px; border-radius: 7px;
    box-shadow: 0 0 22px rgba(189,0,255,.4);
    animation: nsaCtaShift 3s ease-in-out infinite;
}
.nsa-cta:hover { box-shadow: 0 0 32px rgba(189,0,255,.65); }
@keyframes nsaCtaShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.nsa-later {
    width: 100%; margin: 0;
    background: none; border: 1px solid rgba(255,255,255,.15);
    color: #777; font-size: .74rem; letter-spacing: .5px;
    padding: 9px 20px; border-radius: 7px; box-shadow: none;
    text-transform: none;
}
.nsa-later:hover { color: #aaa; border-color: rgba(255,255,255,.3); box-shadow: none; transform: none; }

@keyframes nsaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nsaPopIn {
    0%   { opacity: 0; transform: scale(.85) translateY(14px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 420px) {
    .nsa-preview-row { font-size: .82rem; gap: 10px 14px; }
}