/* Leena — tout le CSS vit ici (rien d'inline : la CSP reste « style-src 'self' »). */
:root {
  --night: #0a0c14;   /* fond */
  --paper: #eef0f6;   /* texte principal */
  --ink:   #10121c;   /* texte sur clair */
  --mist:  #aab2c8;   /* texte secondaire — contraste ≥ 4.5:1 sur --night */
  --neon:  #ff3d7f;   /* accent rose néon */
  --cyan:  #4de3ff;
  --gold:  #f2c14e;
  --danger:#ff5252;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  background: var(--night); color: var(--paper);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--cyan); }
h1 { margin: 0 0 6px; font-size: 3.6rem; letter-spacing: 0.08em; color: var(--paper); text-shadow: 0 0 18px var(--neon), 0 0 40px rgba(255, 61, 127, 0.4); }
h2 { margin: 0 0 8px; font-size: 1.5rem; color: var(--cyan); letter-spacing: 0.04em; }
.muted { color: var(--mist); font-size: 0.9rem; line-height: 1.5; }
.lyric { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--paper); font-size: 1.05rem; line-height: 1.55; margin: 12px auto; max-width: 22rem; }

/* Un seul bouton « plein » par écran, le reste en secondaire (leçon 6.17.0) */
button { cursor: pointer; font: inherit; border-radius: 12px; margin: 6px; padding: 12px 24px; touch-action: manipulation; }
.primary { background: var(--neon); color: #fff; border: none; font-weight: 700; font-size: 1.05rem; box-shadow: 0 0 22px rgba(255, 61, 127, 0.5); }
.primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.secondary { background: #12162a; color: var(--paper); border: 1px solid var(--mist); font-size: 0.85rem; }
.secondary.white { color: var(--paper); border-color: var(--paper); }
.row { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.row .primary, .row .heart { margin: 4px; }
.cheatlink { color: var(--mist); text-decoration: none; opacity: 0.8; }
.cheat { margin-top: 10px; }

/* --- Écrans (accueil, intro de niveau, fin) : superposés au canvas --- */
.screen {
  position: fixed; inset: 0; z-index: 3; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 24px 16px; text-align: center;
  background: rgba(10, 12, 20, 0.82);
}
.screen > * { max-width: 30rem; width: 100%; margin: auto 0; } /* centrage sûr : un contenu plus haut que l'écran reste scrollable depuis le haut */
.screen.transparent { background: transparent; }
/* accueil : aligné en haut, logo/titre/baseline puis un espace, puis le reste */
.screen:has(> .home) { padding-top: max(20px, env(safe-area-inset-top)); background: rgba(10, 12, 20, 0.3); }
.screen > .home { margin: 0; }
.home .glitch-wrap { margin-bottom: 0; }
.home h1 { margin: 0; }
.home .tagline { margin: 2px 0 34px; }

/* chapitres */
.chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.chapter {
  color: var(--paper); padding: 12px 8px; margin: 0; font-size: 0.78rem; line-height: 1.3; border: none; border-radius: 0;
}
/* cadre néon : contour dégradé bleu→rose à coins biseautés, second liseré intérieur rose */
.frame { position: relative; isolation: isolate; background: linear-gradient(135deg, var(--cyan), #7c5cff 45%, var(--neon)); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.frame::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: #12162a; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.frame::after { content: ''; position: absolute; inset: 6px; z-index: -1; pointer-events: none; border: 1px solid rgba(255, 61, 127, 0.55); clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.frame.done::after { border-color: rgba(77, 227, 255, 0.8); }
.frame:disabled { opacity: 0.35; }
.frame:disabled::after { border-color: rgba(170, 178, 200, 0.4); }
.chapter small { display: block; color: var(--mist); font-size: 0.68rem; margin-top: 3px; }
.chapter:disabled { cursor: default; }

/* --- Jeu --- */
#game { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }
#hud { position: fixed; inset: 0 0 auto 0; z-index: 2; pointer-events: none; }
#hud .life { height: 14px; background: rgba(255, 255, 255, 0.1); padding-top: env(safe-area-inset-top); box-sizing: content-box; }
#hud .life > i { display: block; height: 14px; width: 100%; background: linear-gradient(90deg, #2bb5d8, var(--cyan)); box-shadow: 0 0 14px rgba(77, 227, 255, 0.55); transition: width 0.15s linear, background 0.3s; }
#hud .life.mid > i { background: linear-gradient(90deg, #d9a534, var(--gold)); box-shadow: 0 0 14px rgba(242, 193, 78, 0.55); }
#hud .life.low > i { background: linear-gradient(90deg, #c92a2a, var(--danger)); box-shadow: 0 0 14px rgba(255, 82, 82, 0.6); }
#hud .life.dream > i { background: linear-gradient(90deg, #7c5cff, var(--cyan), #c66bff); }
#hud .progress { height: 3px; background: rgba(255, 255, 255, 0.08); }
#hud .progress > i { display: block; height: 100%; background: var(--neon); }
#hud .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 0; font-size: 0.85rem; }
#hud .left { text-align: left; } #hud .right { display: flex; align-items: center; gap: 10px; }
#hud .score { font-size: 1.4rem; font-weight: 700; line-height: 1.1; text-shadow: 0 0 10px rgba(77, 227, 255, 0.6); }
#hud .combo { color: var(--cyan); font-weight: 700; min-width: 1em; text-align: right; }
#hud .track { color: var(--mist); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
#pause { pointer-events: auto; padding: 6px 10px; margin: 0; font-size: 0.78rem; }

/* --- XP (bas de l'écran) et Cyber-Cœur --- */
#xp { position: fixed; inset: auto 0 0 0; z-index: 2; pointer-events: none; padding-bottom: env(safe-area-inset-bottom); }
#xp .xplabel { display: block; text-align: right; padding: 0 10px 3px; font-size: 0.7rem; color: var(--mist); letter-spacing: 0.04em; }
#xp .xpbar { height: 12px; background: rgba(255, 255, 255, 0.1); }
#xp .xpbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, var(--neon)); box-shadow: 0 0 14px rgba(255, 61, 127, 0.55); transition: width 0.25s ease-out; }
.heart { color: var(--neon); border-color: var(--neon); }
/* cœur mécanique (SVG généré) : contour, pistes de circuit allumées par perk, puce centrale */
.mechheart { display: flex; justify-content: center; margin: 0 0 -6px; }
.mechheart .hout { fill: rgba(255, 61, 127, 0.06); stroke: var(--neon); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 61, 127, 0.5)); }
.mechheart .tr { fill: none; stroke: rgba(170, 178, 200, 0.28); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mechheart .tr.on { stroke: var(--cyan); filter: drop-shadow(0 0 4px rgba(77, 227, 255, 0.9)); animation: tracepulse 2.4s ease-in-out infinite; }
.mechheart .pad { fill: rgba(170, 178, 200, 0.25); }
.mechheart .pad.on { fill: var(--cyan); filter: drop-shadow(0 0 4px rgba(77, 227, 255, 0.9)); }
.mechheart .chip { fill: #12162a; stroke: var(--paper); stroke-width: 1.5; }
.mechheart .core { fill: var(--neon); filter: drop-shadow(0 0 6px var(--neon)); }
.mechheart .hcount { fill: var(--mist); font: 700 9px system-ui, sans-serif; letter-spacing: 0.08em; }
@keyframes tracepulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.pyment-share a.discord { border-color: var(--neon); color: var(--neon); }
.tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 34rem; margin: 8px auto; }
.branch h3 { margin: 4px 0 6px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.perk { padding: 10px 6px; margin-bottom: 8px; }
.perk.owned { filter: drop-shadow(0 0 6px rgba(255, 61, 127, 0.45)); }
.perk.owned::after { border-color: var(--neon); }
.perk.locked { opacity: 0.45; }
.perk .pname { font-weight: 700; font-size: 0.85rem; }
.perk .pname { margin-bottom: 6px; }
.perk .dots { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.perk .dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--mist); display: block; }
.perk .dots i.on { background: var(--neon); border-color: var(--neon); box-shadow: 0 0 6px var(--neon); }
@media (max-width: 420px) { .tree { grid-template-columns: repeat(3, 1fr); gap: 5px; } .perk { padding: 6px 4px; } .perk .peffect { font-size: 0.62rem; } }

.hidden { display: none !important; }

.pyment-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 5; padding: 8px 12px; text-align: center;
  background: #3a2a10; color: var(--paper); font: 0.8rem system-ui, sans-serif;
}
.pyment-share { margin-top: 18px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.pyment-share { flex-wrap: wrap; }
.pyment-share button, .pyment-share a {
  background: #12162a; border: 1px solid var(--cyan); color: var(--cyan);
  border-radius: 8px; padding: 8px 14px; font: 0.85rem system-ui, sans-serif; text-decoration: none;
}
/* --- Accueil : image et titre glitchés (coupures brèves, décalages RVB) --- */
.glitch-wrap { display: flex; justify-content: center; margin-bottom: 4px; }
.logo { width: 220px; height: 220px; border-radius: 50%; box-shadow: 0 0 30px rgba(77, 227, 255, 0.35), 0 0 60px rgba(255, 61, 127, 0.25); }
.glitch { position: relative; animation: glitch-jitter 4s infinite steps(1); }
h1.glitch::before, h1.glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-shadow: none;
  clip-path: inset(0 0 100% 0); opacity: 0.85;
}
h1.glitch::before { color: var(--cyan); animation: glitch-a 3.1s infinite steps(1); }
h1.glitch::after { color: var(--neon); animation: glitch-b 2.7s infinite steps(1); }
@keyframes glitch-jitter {
  0%, 90%, 100% { transform: none; filter: none; }
  91% { transform: translate(-3px, 1px) skewX(-4deg); filter: hue-rotate(40deg) saturate(1.6); }
  93% { transform: translate(3px, -1px); filter: none; }
  95% { transform: translate(-2px, 0) skewX(3deg); filter: hue-rotate(-30deg); }
  97% { transform: none; }
}
@keyframes glitch-a {
  0%, 82%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  84% { clip-path: inset(20% 0 55% 0); transform: translate(-6px, 0); }
  88% { clip-path: inset(60% 0 10% 0); transform: translate(5px, 0); }
  92% { clip-path: inset(5% 0 80% 0); transform: translate(-4px, 0); }
}
@keyframes glitch-b {
  0%, 70%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  72% { clip-path: inset(45% 0 30% 0); transform: translate(6px, 0); }
  76% { clip-path: inset(10% 0 70% 0); transform: translate(-5px, 0); }
  79% { clip-path: inset(75% 0 5% 0); transform: translate(4px, 0); }
}
.tiny { padding: 6px 12px; font-size: 0.75rem; margin: 0 0 10px; }
.cheat { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 10px; }
.cheat input { width: 8rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--mist); background: rgba(255,255,255,0.06); color: var(--paper); font: inherit; font-size: 0.85rem; }
.cheat .tiny { margin: 0; }
.tagline { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.1rem; color: var(--paper); margin: 4px 0 18px; }
.share-hint { margin: 18px 0 -12px; color: var(--paper); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; }

footer { margin-top: 28px; font-size: 0.78rem; color: var(--mist); line-height: 1.5; }
footer a.sommelier { color: var(--cyan); font-weight: 600; text-decoration: none; text-shadow: 0 0 8px rgba(77, 227, 255, 0.45); }
.version { font-size: 16px; letter-spacing: 0.08em; margin-top: 4px; opacity: 0.7; }
.copyright { display: block; font-size: 13px; margin-top: 2px; opacity: 0.8; }

/* Cyber-Cœur 3.0.0 : effet lisible sur chaque carte, tirage de 3 boosts en fin de piste */
.perk .peffect { font-size: 0.68rem; line-height: 1.3; color: var(--paper); opacity: 0.85; }
.perk.locked .peffect { color: var(--neon); }
.draw { width: 100%; max-width: 26rem; }
.drawtitle { font-size: 1.9rem; color: var(--cyan); text-shadow: 0 0 14px rgba(77, 227, 255, 0.8); animation: drawpop 0.5s ease-out both; }
.drawcards { display: grid; gap: 12px; margin: 14px 0 6px; }
.drawcard { display: grid; gap: 3px; text-align: left; margin: 0; padding: 14px 16px; border-radius: 14px; color: var(--paper); background: #12162a; border: 1px solid var(--bc, var(--neon)); box-shadow: 0 0 12px color-mix(in srgb, var(--bc, var(--neon)) 40%, transparent); animation: drawdeal 0.45s ease-out both; transition: transform 0.25s, opacity 0.35s, box-shadow 0.25s; }
.drawcard:hover, .drawcard:focus-visible { transform: translateY(-2px); box-shadow: 0 0 20px color-mix(in srgb, var(--bc, var(--neon)) 70%, transparent); }
.drawcard.b-pouls { --bc: #ff3d7f; } .drawcard.b-lame { --bc: #4de3ff; } .drawcard.b-lumiere { --bc: #f2c14e; }
.drawcard .dbranch { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bc); }
.drawcard .dname { font-weight: 700; font-size: 1.1rem; }
.drawcard .deffect { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin-top: 6px; color: #fff; }
.drawcards.chosen .drawcard:not(.picked) { opacity: 0.15; transform: scale(0.96); }
.drawcard.picked { animation: drawpick 0.9s ease-out both; }
.mechheart.pop { animation: drawpop 0.6s ease-out both; margin-top: 4px; }
@keyframes drawdeal { from { opacity: 0; transform: translateY(18px) rotateX(35deg); } to { opacity: 1; transform: none; } }
@keyframes drawpick { 0% { transform: scale(1); } 30% { transform: scale(1.06); box-shadow: 0 0 40px var(--bc); background: color-mix(in srgb, var(--bc) 22%, #12162a); } 100% { transform: scale(1.02); box-shadow: 0 0 24px var(--bc); } }
@keyframes drawpop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }

/* --- 4.0.0 : album en continu et Groove --- */
.home .album { font-size: 1.15rem; padding: 14px 30px; }
.home .albumbest { margin: 4px 0 0; font-size: 0.8rem; }
.home .practice { margin: 18px 0 0; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.home .practice + .chapters { margin-top: 6px; }
.rhythm { color: var(--gold); font-size: 0.85rem; line-height: 1.45; max-width: 24rem; margin: 8px auto; }
.muted.small { font-size: 0.72rem; margin: 0 auto 6px; max-width: 20rem; }
#hud .groove { height: 4px; background: rgba(255, 255, 255, 0.06); }
#hud .groove > i { display: block; height: 100%; width: 0; background: #ffffff; opacity: 0.55; transition: width 0.12s linear, background 0.3s; }
#hud .groove.g2 > i { background: var(--cyan); opacity: 1; box-shadow: 0 0 10px rgba(77, 227, 255, 0.7); }
#hud .groove.g3 > i { background: var(--neon); opacity: 1; box-shadow: 0 0 12px rgba(255, 61, 127, 0.8); }
#hud .groove.g4 > i { background: linear-gradient(90deg, var(--neon), var(--gold)); opacity: 1; box-shadow: 0 0 16px rgba(242, 193, 78, 0.9); }
#hud .gmult { font-weight: 800; font-size: 1.15rem; min-width: 1.6em; text-align: right; }
#hud .gmult.g2 { color: var(--cyan); text-shadow: 0 0 10px rgba(77, 227, 255, 0.7); }
#hud .gmult.g3 { color: var(--neon); text-shadow: 0 0 10px rgba(255, 61, 127, 0.8); }
#hud .gmult.g4 { color: var(--gold); text-shadow: 0 0 14px rgba(242, 193, 78, 0.9); animation: gfire 0.5s ease-in-out infinite alternate; }
@keyframes gfire { from { transform: scale(1); } to { transform: scale(1.15); } }

/* Toute animation décorative respecte ce réglage (leçon 6.5.0) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 4.5.0 : écran de score arcade (fond opaque, police à chasse fixe, lisible d'un coup d'œil) */
.screen.arcadebg { background: radial-gradient(ellipse at 50% 30%, #1b1035 0%, #07080f 70%); }
.arcade { width: 100%; max-width: 26rem; font-family: ui-monospace, 'Cascadia Mono', 'Courier New', monospace; }
.ar-title { font-size: 1.9rem; letter-spacing: 0.08em; color: var(--cyan); text-shadow: 0 0 16px rgba(77, 227, 255, 0.8), 3px 3px 0 #7c5cff; margin: 0 0 6px; animation: drawpop 0.5s ease-out both; }
.ar-title.lose { color: #ff3d7f; text-shadow: 0 0 16px rgba(255, 61, 127, 0.8), 3px 3px 0 #2a0f3d; }
.ar-sub { color: var(--paper); opacity: 0.8; font-size: 0.9rem; line-height: 1.45; margin: 0 auto 14px; max-width: 24rem; }
.ar-top { display: flex; gap: 12px; align-items: stretch; margin: 6px 0 10px; }
.ar-rank, .ar-score { display: grid; place-items: center; padding: 8px 10px; border: 2px solid var(--rc, var(--cyan)); background: #0c0f1e; }
.ar-rank { --rc: #f2c14e; min-width: 5.2rem; box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--rc) 30%, transparent); animation: rankin 0.6s 0.9s cubic-bezier(.2, 1.6, .4, 1) both; }
.ar-rank b { font-size: 3.4rem; line-height: 1; color: var(--rc); text-shadow: 0 0 14px var(--rc); }
.ar-score { flex: 1; border-color: var(--cyan); }
.ar-score b { font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1.1; color: #fff; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ar-top small, .ar-histw small { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--paper); opacity: 0.7; }
@keyframes rankin { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-new { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; margin: 4px 0 10px; text-shadow: 0 0 10px rgba(242, 193, 78, 0.8); animation: blink 0.9s steps(2) infinite; }
.ar-gap { color: #ff6fa8; font-weight: 700; letter-spacing: 0.05em; margin: 4px 0 10px; font-size: 0.95rem; }
@keyframes blink { 50% { opacity: 0.35; } }
.ar-stats { display: grid; gap: 4px; margin: 6px 0 10px; text-align: left; }
.ar-row { display: grid; grid-template-columns: 1fr auto 6.5rem; gap: 10px; align-items: baseline; padding: 6px 10px; background: #0c0f1e; border-left: 3px solid #2a2f4a; }
.ar-row span { letter-spacing: 0.1em; font-size: 0.85rem; color: var(--paper); opacity: 0.85; }
.ar-row b { font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.ar-row em { font-style: normal; font-size: 0.75rem; color: var(--paper); opacity: 0.55; text-align: right; }
.ar-row.up { border-left-color: var(--gold); }
.ar-row.up em { color: var(--gold); opacity: 1; font-weight: 700; }
.ar-goal { color: var(--cyan); font-size: 0.85rem; line-height: 1.45; margin: 8px 0 12px; }
.ar-histw { margin: 0 0 14px; }
.ar-hist { display: flex; gap: 6px; align-items: flex-end; justify-content: center; height: 46px; margin-top: 6px; }
.ar-hist i { width: 22px; background: #3a3f63; }
.ar-hist i.now { background: var(--cyan); box-shadow: 0 0 10px rgba(77, 227, 255, 0.7); }
.ar-rec { display: grid; grid-template-columns: 1fr auto 1.6rem; gap: 4px 10px; align-items: baseline; text-align: left; padding: 8px 10px; margin: 0 0 4px; background: #0c0f1e; }
.ar-rec span { font-size: 0.85rem; color: var(--paper); }
.ar-rec b { color: #fff; font-variant-numeric: tabular-nums; }
.ar-rec i { font-style: normal; font-weight: 700; text-align: center; }
.ar-rec em { grid-column: 1 / -1; font-style: normal; font-size: 0.72rem; color: var(--paper); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .ar-new, .ar-rank, .ar-title { animation: none; } }
.version .cheatlink { font-size: 12px; letter-spacing: 0; }