/* =====================================================================
   LANCE TON POTE ! — fond noir, néons AlgaJeux, boutons « cube »
   ===================================================================== */
:root {
    --noir: #0b0a10; --noir2: #15131e; --gris: #2b2a38; --gris2: #3b3a4c;
    --menthe: #3dffb5; --rose: #ff3d8b; --jaune: #ffd23d; --ciel: #3dc8ff; --violet: #a66bff; --orange: #ff8a3d;
    --texte: #f4f2ff; --doux: #a9a6bf;
    --titre: 'Lilita One', 'Nunito', system-ui, sans-serif;
    --corps: 'Nunito', system-ui, sans-serif;
    --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noir); color: var(--texte); font-family: var(--corps); }
body { user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; }
input, textarea { font: inherit; user-select: text; -webkit-user-select: text; }
#jeu { position: fixed; inset: 0; display: block; touch-action: none; cursor: crosshair; }
#voile { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(ellipse at 50% 35%, rgba(11,10,16,.35), rgba(11,10,16,.86) 75%); }
body.au-menu #voile { opacity: 1; }
.ico { width: 1.3em; height: 1.3em; flex: none; }
.ico.mini { width: .95em; height: .95em; vertical-align: -.12em; }
.ico-like { color: var(--rose); }

/* ---------------- boutons cube ---------------- */
.cube {
    --c: var(--gris2); --o: #1d1c27;
    display: inline-flex; align-items: center; justify-content: center; gap: .45em;
    min-height: 48px; padding: 10px 18px; border: 3px solid #000; border-radius: 16px; cursor: pointer;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 55%);
    box-shadow: 0 5px 0 var(--o), inset 0 2px 0 rgba(255,255,255,.35);
    color: #0b0a10; font-family: var(--titre); font-size: 17px; letter-spacing: .3px; text-transform: none;
    transition: transform .08s, box-shadow .08s, filter .15s; position: relative; text-align: center;
}
.cube:hover { filter: brightness(1.08); }
.cube:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--o), inset 0 2px 0 rgba(255,255,255,.3); }
.cube:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
.cube small { display: block; font-family: var(--corps); font-weight: 800; font-size: 12px; opacity: .75; }
.cube-menthe { --c: var(--menthe); --o: #138a5c; }
.cube-rose { --c: var(--rose); --o: #9c1950; color: #fff; }
.cube-jaune { --c: var(--jaune); --o: #a8801a; }
.cube-ciel { --c: var(--ciel); --o: #17739c; }
.cube-violet { --c: var(--violet); --o: #5b2ca8; color: #fff; }
.cube-orange { --c: var(--orange); --o: #a3501a; }
.cube-gris { --c: var(--gris2); --o: #15141d; color: var(--texte); }
.cube-carre { width: 52px; height: 52px; padding: 0; min-height: 0; }
.cube-geant { font-size: 26px; min-height: 70px; padding: 12px 26px; border-radius: 20px; width: 100%; }
.cube-geant .ico { width: 1.15em; height: 1.15em; }
.badge { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 2px solid #000;
    background: var(--rose); color: #fff; font: 900 13px/20px var(--corps); font-style: normal; }
.fait { position: absolute; top: -9px; right: -9px; padding: 2px 8px; border-radius: 10px; border: 2px solid #000; background: var(--menthe); color: #000; font: 900 11px/16px var(--corps); font-style: normal; }

/* ---------------- écrans ---------------- */
.ecran { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; z-index: 5; }
.ecran.cache { display: none; }
.ecran-titre { display: flex; flex-direction: column; align-items: center; padding: calc(14px + var(--haut)) 16px calc(16px + var(--bas)); gap: 14px; }
.titre-haut { width: 100%; max-width: 620px; display: flex; gap: 8px; align-items: center; }
.titre-haut .pastille-missions { margin-left: auto; }
.pastille-likes, .pastille-serie, .pastille-missions {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid #000;
    background: rgba(21,19,30,.92); font-weight: 900; font-size: 15px; position: relative;
}
.pastille-serie .ico { color: var(--orange); }
.pastille-missions { cursor: pointer; }
.pastille-missions .ico { color: var(--jaune); }
.logo { text-align: center; margin-top: 4px; transform: rotate(-3deg); animation: flotte 3.4s ease-in-out infinite; }
.logo-ligne1, .logo-ligne2 { font-family: var(--titre); line-height: .9; color: var(--jaune);
    -webkit-text-stroke: 3px #000; paint-order: stroke fill;
    text-shadow: 0 6px 0 #000, 0 0 0 #000, 6px 10px 0 rgba(255,61,139,.85); }
.logo-ligne1 { font-size: clamp(44px, 12vw, 92px); }
.logo-ligne2 { font-size: clamp(52px, 14.5vw, 112px); color: var(--menthe); }
.logo-ligne2 span { color: var(--rose); display: inline-block; transform: rotate(12deg); }
.logo-sous { margin-top: 10px; font-weight: 900; color: var(--texte); font-size: clamp(14px, 3.8vw, 18px); opacity: .9; }
@keyframes flotte { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-6px); } }
.pote-choisi { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 3px solid #000; background: rgba(21,19,30,.92); cursor: pointer; text-align: left; }
.pote-choisi small { display: block; color: var(--doux); font-weight: 800; font-size: 11px; }
.pote-choisi b { font-family: var(--titre); font-size: 18px; font-weight: 400; }
.pote-tete { display: inline-block; width: 52px; height: 52px; flex: none; }
.pote-tete canvas { width: 100%; height: 100%; display: block; }
.titre-actions { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 14px; }
.titre-actions .cube-geant { flex-direction: column; gap: 0; min-height: 86px; }
.titre-actions .cube-geant > span { font-size: 34px; line-height: 1; display: flex; align-items: center; gap: 8px; }
.titre-actions .cube-geant > .ico { display: none; }
.titre-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.titre-modes .cube { flex-direction: column; gap: 2px; min-height: 92px; padding: 8px 6px; font-size: 16px; }
.titre-modes .cube .ico { width: 28px; height: 28px; }
.titre-onglets { width: 100%; max-width: 620px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.onglet-cube { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 16px; border: 3px solid #000;
    background: linear-gradient(180deg, #34334a, #24232f); box-shadow: 0 4px 0 #111; cursor: pointer; font-weight: 900; font-size: 12px; }
.onglet-cube .ico { width: 26px; height: 26px; color: var(--menthe); }
.onglet-cube:nth-child(2) .ico { color: var(--jaune); } .onglet-cube:nth-child(3) .ico { color: var(--violet); }
.onglet-cube:nth-child(4) .ico { color: var(--orange); } .onglet-cube:nth-child(5) .ico { color: var(--ciel); }
.onglet-cube:active { transform: translateY(3px); box-shadow: 0 1px 0 #111; }
.banniere { width: 100%; max-width: 728px; min-height: 60px; }
.banniere-test { border: 2px dashed var(--gris2); border-radius: 12px; padding: 18px; text-align: center; color: var(--doux); font-weight: 800; font-size: 13px; }

/* pages */
.ecran-page { background: linear-gradient(180deg, rgba(11,10,16,.65), rgba(11,10,16,.92) 30%); }
.page-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--haut)) 16px 10px;
    background: linear-gradient(180deg, rgba(11,10,16,.98), rgba(11,10,16,.85)); border-bottom: 2px solid #000; }
.page-tete h2 { flex: 1; margin: 0; font-family: var(--titre); font-weight: 400; font-size: 26px; color: var(--jaune); -webkit-text-stroke: 1px #000; }
.page-corps { max-width: 1000px; margin: 0 auto; padding: 16px 16px calc(30px + var(--bas)); }
.page-corps h3 { font-family: var(--titre); font-weight: 400; font-size: 20px; margin: 22px 0 10px; color: var(--menthe); }
.petit { color: var(--doux); font-weight: 700; font-size: 14px; line-height: 1.4; margin: 6px 0; }
.rangee { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.colonne { display: flex; flex-direction: column; gap: 10px; }
.barre { height: 10px; border-radius: 5px; background: #000; overflow: hidden; border: 1px solid #000; margin: 6px 0 2px; }
.barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--menthe), var(--ciel)); border-radius: 5px; }
.barre.grosse { height: 18px; border-radius: 9px; border: 2px solid #000; }
.barre.grosse i { background: linear-gradient(90deg, var(--violet), var(--rose)); }
input:not([type]), input[type=text], textarea { background: #000; color: var(--texte); border: 3px solid var(--gris2); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 16px; min-height: 48px; }
#code-parcours { width: 120px; text-transform: uppercase; letter-spacing: 3px; font-family: var(--titre); font-size: 20px; text-align: center; }
#code-achat { flex: 1; min-width: 200px; }

/* mondes */
.mondes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-monde, .carte-defi { position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 18px; min-height: 160px; border-radius: 20px; border: 3px solid #000;
    box-shadow: 0 6px 0 #000; cursor: pointer; overflow: hidden; color: var(--texte); }
.carte-monde b, .carte-defi b { font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1.05; }
.carte-monde small { font-weight: 800; opacity: .85; }
.cm-num { font-weight: 900; font-size: 12px; letter-spacing: 2px; opacity: .8; }
.cm-etoiles { margin-top: auto; font-weight: 900; color: var(--jaune); }
.cm-verrou { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.66); font-weight: 900; }
.monde-repaire { background: radial-gradient(circle at 80% 20%, rgba(61,255,181,.35), transparent 50%), linear-gradient(135deg, #1b0f33, #07060d); }
.monde-studio { background: radial-gradient(circle at 80% 20%, rgba(255,210,61,.4), transparent 50%), linear-gradient(135deg, #5b2387, #1a0838); }
.monde-live { background: radial-gradient(circle at 85% 15%, rgba(254,44,85,.4), transparent 45%), radial-gradient(circle at 15% 85%, rgba(37,244,238,.3), transparent 45%), #0b0b12; }
.monde-carnet { background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(80,120,200,.25) 22px 23px), #f3eee0; color: #2b2b33 !important; }
.monde-cache { background: radial-gradient(circle at 80% 20%, rgba(61,200,255,.35), transparent 50%), linear-gradient(135deg, #073039, #021014); }
.intro-monde { color: var(--doux); font-weight: 800; margin: 0 0 12px; }
.grille-niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cube-niveau { flex-direction: column; min-height: 140px; color: var(--texte); --o: #000; gap: 4px; }
.cube-niveau.monde-carnet { color: #2b2b33; }
.cube-niveau.ferme { filter: grayscale(.8) brightness(.55); }
.cube-niveau.boss { border-color: var(--rose); }
.cn-num { font-size: 34px; line-height: 1; }
.cn-nom { font-size: 14px; line-height: 1.1; }
.cn-etoiles { display: flex; gap: 2px; }
.cn-etoiles .ico { width: 20px; height: 20px; }
.ico.on { color: var(--jaune); filter: drop-shadow(0 2px 0 #000); }
.ico.off { color: rgba(0,0,0,.45); }
.ico.or { color: var(--jaune); }

/* défi */
.carte-defi { cursor: default; min-height: 0; gap: 10px; }
.defi-score { font-weight: 800; }
.defi-score b { font-family: var(--titre); font-size: 28px; font-weight: 400; color: var(--jaune); }
.defi-grille { font-size: 22px; letter-spacing: 2px; }
.historique { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.historique div { background: var(--noir2); border: 2px solid #000; border-radius: 12px; padding: 8px; text-align: center; }
.historique b { display: block; font-family: var(--titre); font-weight: 400; font-size: 26px; color: var(--menthe); }
.historique small, .historique span { color: var(--doux); font-weight: 800; font-size: 12px; }

/* duel */
.joueurs-duel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.joueur-duel { position: relative; display: grid; grid-template-columns: 52px 1fr 52px; grid-template-rows: auto auto auto; gap: 8px; align-items: center; justify-items: center;
    background: var(--noir2); border: 3px solid #000; border-radius: 18px; padding: 14px; }
.joueur-duel .pote-tete { width: 92px; height: 92px; }
.joueur-duel input { grid-column: 1 / 4; width: 100%; text-align: center; }
.joueur-duel small { grid-column: 1 / 4; color: var(--doux); font-weight: 800; }
.fleche-d .ico { transform: scaleX(-1); }
.retirer { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--doux); font-size: 24px; cursor: pointer; }
.ajouter-joueur { min-height: 160px; border-style: dashed; }
.podium { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.podium-ligne { display: grid; grid-template-columns: 26px 46px 1fr auto 40px; gap: 8px; align-items: center; background: var(--noir2); border: 2px solid #000; border-radius: 14px; padding: 8px 12px; text-align: left; }
.podium-ligne .pote-tete { width: 44px; height: 44px; }
.podium-ligne > b { font-family: var(--titre); font-weight: 400; font-size: 22px; }
.podium-ligne small { grid-column: 3 / 6; color: var(--doux); font-weight: 800; margin-top: -6px; }
.podium-ligne span { font-weight: 800; color: var(--doux); font-size: 13px; }
.podium-ligne .pl-nom { color: var(--texte); font-size: 16px; }
.podium-ligne.premier { border-color: var(--jaune); background: linear-gradient(90deg, rgba(255,210,61,.18), var(--noir2)); }

/* casier */
.casier { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.casier-apercu { position: sticky; top: 90px; background: radial-gradient(circle at 50% 40%, #2a2240, #12101a 70%); border: 3px solid #000; border-radius: 22px; padding: 10px; text-align: center; }
#apercu-pote { width: 100%; max-width: 260px; aspect-ratio: 26/30; }
.apercu-info b { font-family: var(--titre); font-weight: 400; font-size: 22px; display: block; }
.apercu-info small { color: var(--doux); font-weight: 800; }
.apercu-info p { margin: 8px 0 4px; font-weight: 800; font-size: 14px; color: var(--menthe); }
.onglets-casier { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.onglets-casier .cube { min-height: 42px; padding: 6px 4px; font-size: 13px; border-radius: 12px; }
.grille-casier { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.carte-casier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 3px solid #000; background: linear-gradient(180deg, #2b2a3c, #1b1a26); box-shadow: 0 4px 0 #000; cursor: pointer; color: var(--texte); text-align: center; }
.carte-casier .pote-tete { width: 74px; height: 74px; }
.carte-casier canvas.mini { width: 74px; height: 74px; }
.carte-casier b { font-size: 13px; line-height: 1.1; font-weight: 900; }
.carte-casier small { font-size: 11px; color: var(--doux); font-weight: 700; line-height: 1.1; }
.carte-casier.equipee { border-color: var(--menthe); box-shadow: 0 4px 0 #0f6b47; }
.carte-casier.pas-a-moi .pote-tete, .carte-casier.pas-a-moi canvas { opacity: .7; }
.etiquette { margin-top: auto; padding: 3px 9px; border-radius: 8px; background: #000; font-weight: 900; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.etiquette.equipe { background: var(--menthe); color: #000; }
.etiquette.prix { color: #fff; } .etiquette.bloque { color: var(--doux); }
.etiquette.paye { background: var(--jaune); color: #000; } .etiquette.passe { background: var(--violet); color: #fff; }
.atelier { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
#atelier-canvas { width: min(300px, 80vw); aspect-ratio: 1; border-radius: 20px; border: 3px solid #000; touch-action: none; cursor: grab; }
.curseur { display: flex; flex-direction: column; gap: 6px; font-weight: 900; }
.curseur input { width: 100%; accent-color: var(--menthe); }

/* boutique */
.bandeau-honnete, .bandeau-info { padding: 10px 14px; border-radius: 14px; border: 2px solid #000; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.bandeau-honnete { background: rgba(61,255,181,.14); color: var(--menthe); }
.bandeau-info { background: rgba(255,210,61,.12); color: var(--jaune); }
.offres { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.offre { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; border: 3px solid #000; background: var(--noir2); box-shadow: 0 6px 0 #000; }
.offre-nom { font-family: var(--titre); font-weight: 400; font-size: 22px; }
.offre ul { margin: 0 0 6px; padding-left: 18px; font-weight: 700; font-size: 14px; color: var(--doux); flex: 1; }
.offre-menthe { border-top: 6px solid var(--menthe); } .offre-ciel { border-top: 6px solid var(--ciel); } .offre-violet { border-top: 6px solid var(--violet); }
.offre-rose { border-top: 6px solid var(--rose); } .offre-jaune { border-top: 6px solid var(--jaune); } .offre-orange { border-top: 6px solid var(--orange); }
.offre.achetee { opacity: .75; }
.id-joueur { font-family: monospace; color: var(--texte); letter-spacing: 1px; }

/* pass */
.pass-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 20px; border: 3px solid #000; background: linear-gradient(135deg, #3b1868, #12101a); margin-bottom: 10px; }
.pass-tete b { display: block; font-family: var(--titre); font-weight: 400; font-size: 26px; }
.pass-tete small { color: var(--doux); font-weight: 800; }
.pass-niveau { text-align: center; } .pass-niveau b { font-size: 46px; color: var(--jaune); line-height: 1; }
.paliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 14px; }
.palier { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid #000; background: var(--noir2); opacity: .7; }
.palier.atteint { opacity: 1; border-color: var(--violet); }
.palier-n { font-family: var(--titre); font-size: 20px; text-align: center; }
.recompense { position: relative; min-height: 54px; border-radius: 10px; border: 2px solid #000; background: #24232f; color: var(--texte); font-weight: 800; font-size: 12px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.recompense.premium { background: linear-gradient(135deg, #3b1868, #24232f); }
.recompense.prete { border-color: var(--menthe); box-shadow: 0 0 0 2px var(--menthe) inset; }
.recompense.prise { opacity: .45; }
.recompense i { position: absolute; bottom: 2px; right: 6px; font-size: 10px; color: var(--menthe); }
.recompense:disabled { cursor: default; }

/* le Pass, version vitrine (27/10/2026) */
.cube-or { --c: #ffcf3a; --o: #8a5a00; color: #1a1000; background: linear-gradient(180deg, #fff1a8 0%, #ffcf3a 45%, #f0a800 100%); }
.cube-or.cube-geant { width: auto; flex: 1 1 260px; flex-direction: column; gap: 0; }
.cube-or.cube-geant > span { font-size: 24px; }
.pass-vitrine { position: relative; display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 10px 22px; align-items: center; padding: 18px; border-radius: 26px; border: 3px solid #000; overflow: hidden;
    background: radial-gradient(circle at 25% 60%, rgba(255,207,58,.35), transparent 45%), radial-gradient(circle at 90% 10%, rgba(255,61,139,.35), transparent 40%), linear-gradient(135deg, #3b1868, #12091f 70%);
    box-shadow: 0 8px 0 #000, inset 0 0 0 2px rgba(255,207,58,.35); }
#pass-heros { width: 100%; max-width: 380px; aspect-ratio: 38/32; justify-self: center; }
.pass-saison { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fe2c55; color: #fff; font-weight: 900; font-size: 12px; letter-spacing: 1.5px; border: 2px solid #000; }
.pass-titre { margin: 8px 0 4px; font-family: var(--titre); font-weight: 400; font-size: clamp(30px, 6vw, 54px); line-height: .95; color: var(--jaune); -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 5px 0 #000, 5px 8px 0 rgba(255,61,139,.7); }
.pass-accroche { margin: 4px 0 12px; font-weight: 800; font-size: 16px; }
.pass-accroche b { color: var(--jaune); }
.pass-progression { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pass-palier { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 4px solid #000; background: radial-gradient(circle at 35% 30%, #fff1a8, #ffcf3a 50%, #c48a12); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1a1000; box-shadow: 0 5px 0 #000; }
.pass-palier b { font-family: var(--titre); font-weight: 400; font-size: 36px; line-height: 1; }
.pass-palier small { font-weight: 900; font-size: 12px; }
.pass-barre-bloc { flex: 1; min-width: 0; }
.pass-barre-bloc small { display: block; color: var(--texte); font-weight: 800; font-size: 13px; margin-top: 4px; }
.badge-premium { padding: 10px 18px; border-radius: 14px; border: 3px solid #000; background: linear-gradient(180deg, #fff1a8, #ffcf3a); color: #1a1000; font-family: var(--titre); font-size: 20px; }
.piste-legende { display: flex; justify-content: space-between; margin: 18px 4px 6px; font-weight: 900; font-size: 12px; letter-spacing: 2px; }
.leg-gratuit { color: var(--menthe); } .leg-premium { color: var(--jaune); }
.piste { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.piste { scrollbar-color: #ffcf3a #1d1c27; }
.piste::-webkit-scrollbar { height: 10px; }
.piste::-webkit-scrollbar-track { background: #1d1c27; border-radius: 5px; }
.piste::-webkit-scrollbar-thumb { background: #ffcf3a; border-radius: 5px; border: 2px solid #1d1c27; }
.colonne-palier { flex: none; width: 118px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; scroll-snap-align: start; opacity: .78; }
.colonne-palier.atteint { opacity: 1; }
.colonne-palier.actuel .palier-num { background: var(--rose); color: #fff; transform: scale(1.12); }
.palier-num { align-self: center; min-width: 40px; padding: 3px 8px; border-radius: 999px; border: 2px solid #000; background: #2b2a38; font-family: var(--titre); font-size: 18px; text-align: center; }
.colonne-palier.atteint .palier-num { background: var(--menthe); color: #000; }
.rec { position: relative; height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; border-radius: 16px; border: 3px solid #000; cursor: pointer; color: var(--texte); box-shadow: 0 4px 0 #000; }
.rec-gratuit { background: linear-gradient(180deg, #2c3a36, #1a2421); }
.rec-premium { background: linear-gradient(180deg, #5a3d00, #2a1a00); border-color: #000; box-shadow: 0 4px 0 #000, inset 0 0 0 2px #ffcf3a; }
.rec-premium.rec-objet { background: radial-gradient(circle at 50% 35%, rgba(255,207,58,.45), transparent 60%), linear-gradient(180deg, #6a4700, #2a1a00); }
.rec canvas.mini { width: 74px; height: 74px; }
.rec-nom { font-size: 11px; font-weight: 900; line-height: 1.1; text-align: center; }
.rec-likes { display: flex; flex-direction: column; align-items: center; }
.rec-likes .ico { width: 40px; height: 40px; }
.rec-likes b { font-family: var(--titre); font-weight: 400; font-size: 24px; }
.rec-etat { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; border: 2px solid #000; background: #555; color: #fff; font: 900 10px/14px var(--corps); font-style: normal; white-space: nowrap; }
.rec-etat.pret { background: var(--menthe); color: #000; }
.rec.prete { animation: tressaute 1.4s ease-in-out infinite; }
.rec.prise { opacity: .5; }
.rec.fermee canvas, .rec.fermee .rec-likes { filter: saturate(.85); }
.rec-cadenas { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #000a; display: flex; align-items: center; justify-content: center; color: var(--jaune); font-style: normal; }
.rec-cadenas .ico { width: 15px; height: 15px; }
@keyframes tressaute { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
body.photosensible .rec.prete { animation: none; }
/* la ligne du Pass sur l'écran de victoire */
.pan-pass { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; border: 2px solid #000; background: linear-gradient(90deg, #3b1868, #14131c); color: var(--texte); cursor: pointer; text-align: left; }
.pan-pass-n { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #000; background: radial-gradient(circle at 35% 30%, #fff1a8, #ffcf3a 55%, #c48a12); color: #1a1000; font-family: var(--titre); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.pan-pass-txt { flex: 1; } .pan-pass-txt b { font-size: 14px; }
.pan-pass.monte b { color: var(--jaune); }
@media (max-width: 720px) {
    .pass-vitrine { grid-template-columns: 1fr; padding: 14px; }
    #pass-heros { max-width: 280px; }
    .colonne-palier { width: 104px; }
    .rec { height: 124px; }
}

/* missions / succès */
.serie { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; border: 3px solid #000; background: linear-gradient(90deg, rgba(255,138,61,.25), var(--noir2)); margin-bottom: 12px; }
.serie .ico { color: var(--orange); width: 34px; height: 34px; }
.serie b { font-family: var(--titre); font-weight: 400; font-size: 22px; }
.serie small { margin-left: auto; color: var(--doux); font-weight: 800; }
.liste-missions { display: flex; flex-direction: column; gap: 10px; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 3px solid #000; background: var(--noir2); }
.mission.faite { border-color: var(--menthe); }
.mission small { color: var(--doux); font-weight: 800; }
.pris { color: var(--menthe); font-weight: 900; }
.grille-succes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.succes { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; border: 2px solid #000; background: var(--noir2); opacity: .75; }
.succes .ico { color: var(--gris2); width: 28px; height: 28px; }
.succes.fait { opacity: 1; border-color: var(--jaune); }
.succes.fait .ico { color: var(--jaune); }
.succes small { color: var(--doux); font-weight: 700; }

/* réglages */
.reglages { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.interrupteur { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; font-weight: 900; cursor: pointer; }
.interrupteur input { width: 26px; height: 26px; accent-color: var(--menthe); grid-row: 1 / 3; }
.interrupteur small { color: var(--doux); font-weight: 700; }
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 900; }
.danger { --c: #5a2030; color: #ffb3c4; margin-top: 10px; align-self: flex-start; }
.code-sauvegarde { width: 100%; min-height: 120px; font-family: monospace; font-size: 12px; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#hud[hidden] { display: none; }
#hud button { pointer-events: auto; }
.hud-haut { position: absolute; top: calc(10px + var(--haut)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-nom { font-family: var(--titre); font-size: 15px; color: #fff; text-shadow: 0 2px 0 #000; opacity: .9; max-width: 50vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-lancers { display: flex; align-items: baseline; gap: 6px; }
.hud-lancers b { font-family: var(--titre); font-weight: 400; font-size: 44px; line-height: 1; color: var(--jaune); -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000; }
.hud-lancers small { font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000; }
.hud-joueur { display: block; width: 100%; font-weight: 900; color: var(--menthe); text-shadow: 0 2px 0 #000; }
.hud-lancers { flex-wrap: wrap; }
.hud-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hud-chiffre { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(11,10,16,.8); border: 2px solid #000; font-weight: 900; font-size: 17px; }
.hud-chiffre.bobo .ico { color: var(--orange); }
.hud-bas { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--bas)); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hud-bas-droite { display: flex; gap: 8px; align-items: flex-end; }
#hud-apercu.actif { --c: var(--menthe); color: #000; }
.hud-pouf { padding: 8px 16px; border-radius: 999px; background: rgba(11,10,16,.85); border: 2px solid #000; font-weight: 900; font-size: 14px; }
.hud-pouf b { color: var(--menthe); }
#hud-annuler { min-height: 46px; font-size: 14px; padding: 6px 12px; }
#tuto { position: fixed; left: 50%; bottom: calc(90px + var(--bas)); transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 20px; border-radius: 18px; background: rgba(11,10,16,.88); border: 3px solid #000; text-align: center; pointer-events: auto; max-width: calc(100vw - 32px); }
#tuto[hidden] { display: none; }
#tuto b { font-family: var(--titre); font-weight: 400; font-size: 20px; color: var(--jaune); }
#tuto small { color: var(--doux); font-weight: 800; }
.tuto-main { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fff; animation: tire 1.6s ease-in-out infinite; }
@keyframes tire { 0% { transform: translate(0, 0); } 60% { transform: translate(-46px, 30px); } 61%, 100% { transform: translate(0, 0); } }
#annonce { position: fixed; left: 0; right: 0; top: 32%; z-index: 4; text-align: center; pointer-events: none; opacity: 0; }
#annonce b { display: block; font-family: var(--titre); font-weight: 400; font-size: clamp(34px, 9vw, 64px); color: var(--menthe); -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 5px 0 #000; }
#annonce small { font-weight: 900; font-size: 18px; text-shadow: 0 2px 0 #000; }
#annonce.vue { animation: annonce 2.2s ease-out forwards; }
@keyframes annonce { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.05); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

/* ---------------- panneaux ---------------- */
#panneau, #modale { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,5,8,.55); overflow-y: auto; }
#panneau[hidden], #modale[hidden] { display: none; }
#modale { z-index: 20; background: rgba(5,5,8,.75); }
.panneau-boite, .modale-boite { width: 100%; max-width: 520px; margin: auto; padding: 20px; border-radius: 24px; border: 3px solid #000; background: linear-gradient(180deg, #23212f, #14131c); box-shadow: 0 10px 0 #000; text-align: center; animation: entre .35s cubic-bezier(.2,1.4,.5,1); display: flex; flex-direction: column; gap: 12px; }
.modale-boite { text-align: left; }
.modale-boite h3 { margin: 0; font-family: var(--titre); font-weight: 400; color: var(--jaune); font-size: 24px; }
.modale-boite p { margin: 0; font-weight: 700; line-height: 1.4; }
@keyframes entre { from { transform: translateY(30px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pan-titre { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 32px; color: var(--jaune); }
.pan-resultat { font-family: var(--titre); font-size: clamp(34px, 9vw, 52px); line-height: 1; color: var(--menthe); -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 5px 0 #000; transform: rotate(-2deg); }
.pan-etoiles { display: flex; justify-content: center; gap: 10px; }
.grosse-etoile .ico { width: 64px; height: 64px; color: #0006; }
.grosse-etoile.on .ico { color: var(--jaune); filter: drop-shadow(0 4px 0 #000); animation: etoile .5s calc(.25s + var(--i) * .26s) cubic-bezier(.2,1.8,.5,1) both; }
@keyframes etoile { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.pan-legende { display: flex; justify-content: center; gap: 22px; color: var(--doux); font-weight: 800; font-size: 11px; margin-top: -8px; }
.pan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pan-stats div { background: #0b0a10; border: 2px solid #000; border-radius: 14px; padding: 10px 4px; }
.pan-stats b { display: block; font-family: var(--titre); font-weight: 400; font-size: 26px; color: var(--jaune); }
.pan-stats small { color: var(--doux); font-weight: 800; font-size: 12px; }
.panneau-boite .rangee { justify-content: center; }
.panneau-boite .rangee .cube { flex: 1 1 100px; padding: 8px 10px; font-size: 15px; }
.nouveau-record { font-family: var(--titre); color: var(--rose); font-size: 22px; }
.vies { display: flex; justify-content: center; gap: 8px; }
.vie { width: 26px; height: 24px; background: var(--rose); clip-path: path('M13 23C5 17 0 12 0 7A6.5 6.5 0 0 1 13 4 6.5 6.5 0 0 1 26 7c0 5-5 10-13 16z'); }
.vie.perdue { background: #333; }
.bonus-pub { align-self: center; }

/* toasts */
#toasts { position: fixed; top: calc(12px + var(--haut)); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; border: 3px solid #000; background: #1d1c28; box-shadow: 0 5px 0 #000; animation: entre .3s ease-out; transition: opacity .4s, transform .4s; }
.toast canvas { width: 40px; height: 40px; flex: none; }
.toast b { display: block; font-weight: 900; }
.toast small { color: var(--doux); font-weight: 700; }
.toast.part { opacity: 0; transform: translateY(-10px); }

/* pub de test (clairement étiquetée) */
.pub-test { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 16px; }
.pub-test-boite { max-width: 420px; padding: 24px; border-radius: 20px; border: 3px dashed var(--jaune); background: #14131c; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.pub-test-badge { align-self: center; padding: 4px 12px; border-radius: 8px; background: var(--jaune); color: #000; font-weight: 900; letter-spacing: 2px; }
.pub-test-type { color: var(--doux); font-weight: 800; }

/* ---------------- téléphone ---------------- */
@media (max-width: 720px) {
    .casier { grid-template-columns: 1fr; }
    .casier-apercu { position: static; display: grid; grid-template-columns: 130px 1fr; align-items: center; text-align: left; gap: 10px; }
    #apercu-pote { width: 130px; }
    .onglets-casier { grid-template-columns: repeat(3, 1fr); }
    .titre-modes .cube small { display: none; }
    .titre-modes .cube { min-height: 84px; font-size: 14px; }
    .grille-niveaux { grid-template-columns: repeat(2, 1fr); }
    .grille-casier { grid-template-columns: repeat(3, 1fr); }
    .carte-casier .pote-tete, .carte-casier canvas.mini { width: 60px; height: 60px; }
    .hud-lancers b { font-size: 36px; }
    .page-tete h2 { font-size: 22px; }
    .paliers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 520px) and (orientation: landscape) {
    .ecran-titre { gap: 8px; }
    .logo-ligne1 { font-size: 40px; } .logo-ligne2 { font-size: 48px; }
}
.logo-jaquette { position: fixed; right: 4%; top: 6%; z-index: 6; animation: none; transform: rotate(-5deg); text-align: right; pointer-events: none; }
.logo-jaquette .logo-ligne1 { font-size: 86px; } .logo-jaquette .logo-ligne2 { font-size: 100px; }
/* mode photosensible : moins de mouvement dans l'interface aussi */
body.photosensible .logo, body.photosensible .tuto-main { animation: none; }
@media (prefers-reduced-motion: reduce) { .logo, .tuto-main { animation: none; } }