/* ============================================================
   REFLEX ENGLISH — DA arcade néon
   Couleurs et rythmes réglables dans :root
   ============================================================ */
:root {
  --bg: #050818; --night: #0a1040;
  --cyan: #19e6ff; --blue: #2f6bff; --violet: #a24bff; --pink: #ff4fd8;
  --green: #16e07b; --green-d: #0a9c52; --gold: #ffcf3a; --red: #ff4d6d;
  --text: #f3f7ff; --muted: #8fb0ff;
  --card: rgba(9, 19, 70, .74); --card-line: rgba(64, 140, 255, .65);
  --font: "Segoe UI Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --intensity: 0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
html, body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 30%, #0e1650, #02030c 70%); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.hidden { display: none !important; }
.spacer { flex: 1; min-height: 6px; }
.cy { color: var(--cyan); }

/* ---------- Cadre app (téléphone) ---------- */
#app { position: relative; width: 100%; max-width: 430px; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--bg); }
@media (min-width: 560px) {
  #app { height: min(100dvh - 24px, 880px); margin-top: 12px; border-radius: 38px; box-shadow: 0 0 0 3px #1b2a78, 0 0 60px rgba(47, 107, 255, .45); }
}
#app.shake { animation: shake .32s; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(3px, -1px); } }

/* ---------- Fond ---------- */
#bg, #bg > *, #fxfront { position: absolute; }
#bg { inset: 0; background: linear-gradient(#060a2e 0%, #1a0b58 45%, #0a0a3a 70%, #05061c 100%); }
.moon { top: 5%; right: -8%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7ea6ff, #2344b8 60%, #14247a); box-shadow: 0 0 60px rgba(90, 140, 255, .7); opacity: .85; }
#skyline { left: 0; right: 0; bottom: 35%; height: 46%; opacity: .95; }
#skyline svg { width: 100%; height: 100%; }
.road { left: -35%; right: -35%; bottom: 0; height: 37%; perspective: 240px; overflow: hidden; background: linear-gradient(#0a0630, #150a55); }
.road i { position: absolute; inset: -30% 0 0; transform-origin: 50% 100%; transform: rotateX(58deg);
  background: repeating-linear-gradient(90deg, rgba(25, 230, 255, .75) 0 3px, transparent 3px 70px),
              repeating-linear-gradient(0deg, rgba(162, 75, 255, .65) 0 3px, transparent 3px 46px);
  animation: road calc(1.1s - var(--intensity) * .75s) linear infinite; }
@keyframes road { to { background-position: 0 92px, 0 46px; } }
#bgfx { inset: 0; width: 100%; height: 100%; }
.vignette { inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(3, 5, 25, 0) 30%, rgba(3, 4, 20, .78) 100%), linear-gradient(rgba(3, 5, 25, .35), rgba(3, 5, 25, .1) 40%, rgba(3, 5, 25, .45)); }
#app[data-screen="run"] .vignette, #app[data-screen="rain"] .vignette { background: linear-gradient(transparent 82%, rgba(3, 5, 25, .55) 100%), radial-gradient(ellipse at 50% 45%, rgba(3, 5, 25, .25) 20%, rgba(3, 4, 20, .82) 100%), linear-gradient(rgba(3, 5, 25, .45), rgba(3, 5, 25, .35)); }
#fxfront { inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ---------- Barre haute ---------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 7px) 14px 5px; background: rgba(5, 8, 24, .94); border-bottom: 1.5px solid var(--card-line); }   /* bande haute opaque, comme la barre du bas */
.logo { display: flex; align-items: center; gap: 6px; filter: drop-shadow(0 0 8px rgba(25, 230, 255, .8)); }
.logo b { font-family: var(--font); font-style: italic; font-size: 21px; letter-spacing: -.5px; }
.logo em { color: var(--cyan); }
.top-right { display: flex; align-items: center; gap: 8px; }
.mode-chip { padding: 5px 11px; border: 1.5px solid var(--card-line); border-radius: 12px; background: var(--card); font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.mode-chip b { color: var(--gold); font-family: var(--font); font-style: italic; font-size: 15px; margin-left: 3px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--card-line); font-size: 16px; }

/* ---------- Écrans ---------- */
.screen { position: absolute; inset: 0; z-index: 10; display: none; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top) + 50px) 16px calc(env(safe-area-inset-bottom) + 14px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: flex; }
.screen.center { align-items: center; justify-content: center; text-align: center; }
.screen.enter { animation: enter .28s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- Composants ---------- */
.card { position: relative; background: var(--card); border: 1.5px solid var(--card-line); border-radius: 18px; padding: 10px 14px; backdrop-filter: blur(5px); box-shadow: 0 0 14px rgba(47, 107, 255, .35), inset 0 0 18px rgba(47, 107, 255, .12); }
.card.glow { border-color: var(--cyan); box-shadow: 0 0 20px rgba(25, 230, 255, .45), inset 0 0 28px rgba(47, 107, 255, .25); }
small { font-size: 11px; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.pill { align-self: center; padding: 9px 20px; border-radius: 16px; border: 1.5px solid var(--card-line); background: var(--card); font-weight: 700; letter-spacing: 1px; }
.pill b { color: var(--gold); }
.bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(5, 10, 50, .9); border: 1px solid rgba(90, 140, 255, .5); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), #c8ff3a); box-shadow: 0 0 10px var(--cyan); transition: width .35s cubic-bezier(.2, .9, .3, 1.2); }

.btn-main { position: relative; height: 58px; flex: none; border-radius: 99px; border: 2px solid #7dffb4; background: linear-gradient(#22e884, #0a9c52); color: #fff; font-family: var(--font); font-style: italic; font-size: 21px; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 0 22px rgba(22, 224, 123, .65), inset 0 2px 0 rgba(255, 255, 255, .35); text-shadow: 0 2px 4px rgba(0, 60, 30, .7); transition: transform .08s; overflow: hidden; }
.btn-main span { margin-left: 8px; }
.btn-main:active { transform: scale(.96); }
.btn-main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: sheen 2.8s infinite; }
@keyframes sheen { 60%, 100% { left: 130%; } }
.btn-sub { flex: none; height: 44px; border-radius: 16px; border: 1.5px solid var(--card-line); background: var(--card); font-weight: 700; font-size: 15px; }
.btn-sub:active { transform: scale(.97); background: rgba(47, 107, 255, .3); }
.link-btn { align-self: center; padding: 8px 14px; color: var(--muted); font-weight: 700; font-size: 14px; }

.title-xl, .title-lg { font-family: var(--font); font-style: italic; margin: 0; line-height: .95; text-align: center; text-transform: uppercase; text-shadow: 0 0 18px rgba(25, 230, 255, .6), 0 3px 0 rgba(10, 20, 90, .9); }
.title-xl { font-size: 54px; } .title-xl span, .title-lg span { display: block; }
.title-lg { font-size: 38px; } .title-lg.one { font-size: 34px; }

/* ---------- Accueil ---------- */
.hero { position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.bolt { position: absolute; left: 6%; top: 4%; width: 78px; fill: var(--cyan); filter: drop-shadow(0 0 14px var(--cyan)); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.hero .title-xl { margin-top: 30px; text-align: center; }
.billboard { align-self: flex-end; margin-right: -4px; padding: 10px 12px; font-size: 13px; letter-spacing: 1.5px; line-height: 1.35; font-weight: 800; color: #cfe1ff; border: 2px solid var(--violet); background: rgba(60, 20, 130, .5); box-shadow: 0 0 18px rgba(162, 75, 255, .8); border-radius: 8px; transform: rotate(3deg); }
.tagline { margin: 0; text-align: center; color: #cfe1ff; font-weight: 600; font-size: 15px; text-shadow: 0 2px 6px #000; }
.review-teaser { display: flex; align-items: center; gap: 12px; text-align: left; border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 207, 58, .45); }
.review-teaser .rt-n { font-family: var(--font); font-size: 34px; color: var(--gold); min-width: 40px; text-align: center; }
.review-teaser .rt-t { flex: 1; display: flex; flex-direction: column; } .review-teaser .chev { font-size: 28px; color: var(--gold); }
.home-foot { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.best { color: var(--gold); font-size: 13px; font-weight: 700; } .best b { font-family: var(--font); }

/* ---------- Pack ---------- */
.pack-card { text-align: center; display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: hidden; }
.pack-card::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(162, 75, 255, .28) 0 6deg, transparent 6deg 16deg); animation: spin 30s linear infinite; }
.pack-card > * { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }
.run-tag { position: absolute !important; top: 10px; right: 12px; padding: 4px 12px; border: 1.5px solid var(--cyan); border-radius: 99px; color: var(--cyan); font-style: italic; font-weight: 800; font-size: 14px; }
.pack-emoji { font-size: 92px; line-height: 1.1; filter: drop-shadow(0 0 22px rgba(255, 60, 110, .8)); animation: float 3.2s ease-in-out infinite; }
.pack-card h3 { margin: 0; font-size: 21px; letter-spacing: .5px; }
.sub { margin: 0; color: var(--cyan); font-weight: 700; font-size: 14px; }
.lk-emoji { font-size: 34px; } .lock { font-size: 24px; filter: grayscale(.4); }

/* ---------- Découverte ---------- */
#s-discovery { gap: 12px; }
.disc-card { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center; overflow-y: auto; scrollbar-width: none; }
.disc-card::-webkit-scrollbar { display: none; }
.disc-card.swap { animation: swap .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes swap { from { opacity: 0; transform: translateX(40px) scale(.94); } }
.round-btn { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--cyan); background: rgba(10, 30, 90, .8); font-size: 20px; box-shadow: 0 0 12px rgba(25, 230, 255, .6); }
.round-btn:active { transform: scale(.9); }
.disc-img { flex: none; width: clamp(84px, 15vh, 136px); height: clamp(84px, 15vh, 136px); }
.disc-img .wimg { width: 100%; height: 100%; border-radius: 18px; border: 1.5px solid var(--card-line); background: radial-gradient(circle, rgba(47, 107, 255, .35), rgba(10, 16, 64, .25)); box-shadow: 0 0 22px rgba(25, 230, 255, .25); }
.disc-badges:empty { display: none; }
.badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font-weight: 900; font-size: 12px; letter-spacing: 1.5px; }
.badge.fake { color: #fff; background: rgba(255, 79, 216, .22); border: 1.5px solid var(--pink); box-shadow: 0 0 14px rgba(255, 79, 216, .55); }
.badge.trap { color: var(--gold); background: rgba(255, 207, 58, .14); border: 1.5px solid var(--gold); box-shadow: 0 0 14px rgba(255, 207, 58, .45); }
.disc-ctx { flex: none; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--card-line); display: flex; flex-direction: column; gap: 4px; text-align: left; }
.disc-ctx p { margin: 0; font-size: 14px; line-height: 1.35; }
.ctx-expl { color: #cfe1ff; } .ctx-en { color: var(--cyan); font-style: italic; font-weight: 700; } .ctx-fr { color: var(--muted); font-size: 13px !important; }
/* Image d'un mot et image de remplacement */
.wimg { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--cyan); flex: none; }
.wimg img { width: 100%; height: 100%; object-fit: contain; }
.wimg.ph svg { width: 72%; height: 72%; filter: drop-shadow(0 0 6px currentColor); }
.wimg.xs { width: 20px; height: 20px; vertical-align: middle; border-radius: 6px; } .wimg.sm { width: 100%; height: 100%; }
.chip .wimg { margin-right: 2px; }
.disc-fr { font-family: var(--font); text-transform: uppercase; font-size: calc(44px * var(--fit, 1)); letter-spacing: 1px; text-shadow: 0 0 16px rgba(120, 160, 255, .8); }
.disc-en { font-family: var(--font); font-style: italic; font-size: calc(38px * var(--fit, 1)); color: var(--cyan); text-shadow: 0 0 16px rgba(25, 230, 255, .8); }
.disc-ipa { color: var(--muted); font-size: 18px; letter-spacing: 1px; }
.dots-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: #1b2660; border: 1px solid #3a4fd0; transition: .25s; }
.dots i.done { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px var(--green); }
.dots i.now { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform: scale(1.25); }
.dots-txt { font-weight: 800; }

/* ---------- Départ du RUN ---------- */
.run-plate { display: flex; align-items: center; gap: 10px; padding: 8px 22px; border: 2px solid var(--violet); border-radius: 14px; background: rgba(40, 10, 100, .6); box-shadow: 0 0 24px rgba(162, 75, 255, .7); }
.run-plate b { font-family: var(--font); font-style: italic; font-size: 50px; color: var(--gold); text-shadow: 0 0 20px rgba(255, 180, 40, .8); }
.run-plate span { font-size: 34px; }
.count-num { font-family: var(--font); font-style: italic; font-size: 230px; line-height: 1; margin: 18px 0; color: transparent; -webkit-text-stroke: 5px #fff; text-shadow: 0 0 30px var(--cyan), 0 0 60px var(--blue); filter: drop-shadow(0 0 14px var(--cyan)); }
.count-num.gone { display: none; }
.count-num.slam { animation: slam .7s ease-out; }
@keyframes slam { 0% { transform: scale(2.4); opacity: 0; } 30% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
.go-bar { display: none; margin: 60px 0; padding: 22px 60px; border-radius: 99px; border: 3px solid #7dffb4; background: linear-gradient(#22e884, #0a9c52); font-family: var(--font); font-style: italic; font-size: 60px; box-shadow: 0 0 50px rgba(22, 224, 123, .9); }
.go-bar.on { display: block; animation: slam .5s ease-out; }

/* ---------- RUN ---------- */
#s-run { gap: 8px; padding-top: calc(env(safe-area-inset-top) + 48px); }
.hud { display: flex; align-items: stretch; gap: 10px; }
.scorebox { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.scorebox .trophy { font-size: 30px; }
.scorebox b { display: block; font-family: var(--font); font-size: 30px; color: var(--gold); line-height: 1; text-shadow: 0 0 14px rgba(255, 190, 40, .7); font-variant-numeric: tabular-nums; }
.combo-badge { position: relative; flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px 6px; border-radius: 16px; transform: rotate(-4deg); border: 2px solid rgba(160, 80, 255, .6); background: rgba(40, 10, 100, .6); transition: box-shadow .3s, border-color .3s, background .3s; opacity: .75; }
.combo-badge.active { opacity: 1; border-color: var(--pink); box-shadow: 0 0 22px rgba(255, 79, 216, .7); }
.combo-badge[data-tier="2"] { border-color: var(--gold); background: rgba(110, 50, 10, .6); box-shadow: 0 0 30px rgba(255, 190, 40, .9); }
.combo-badge[data-tier="3"] { border-color: #fff; background: rgba(150, 40, 20, .65); box-shadow: 0 0 40px rgba(255, 90, 40, 1), 0 0 80px rgba(255, 190, 40, .7); animation: hot .5s infinite alternate; }
@keyframes hot { to { transform: rotate(-4deg) scale(1.05); } }
.combo-badge small { color: #ffd6f4; font-size: 10px; line-height: 1; }
.combo-badge b { font-family: var(--font); font-style: italic; font-size: 32px; line-height: 1; color: var(--gold); text-shadow: 0 0 14px rgba(255, 190, 40, .9), 0 2px 0 #7a2a00; }
.combo-bar { width: 84%; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; margin: 2px 0; }
.combo-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s; }
.bonus { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.bonus.on { color: var(--green); text-shadow: 0 0 8px var(--green); }
.bump { animation: bump .28s ease-out; } @keyframes bump { 40% { transform: scale(1.14) rotate(-4deg); } }
.combo-badge.bump { animation: bumpc .3s ease-out; } @keyframes bumpc { 40% { transform: scale(1.22) rotate(-7deg); } }
.energy { display: flex; align-items: center; gap: 8px; padding: 6px 12px; transition: opacity .4s; }
.energy .ico { font-size: 18px; } .energy small { color: var(--cyan); font-size: 12px; } .energy b { font-size: 13px; min-width: 32px; text-align: right; }
.energy.full { border-color: var(--gold); animation: glowpulse .5s infinite alternate; }
@keyframes glowpulse { to { box-shadow: 0 0 26px rgba(255, 207, 58, .9); } }
.prompt { text-align: center; padding: 8px 12px 10px; transition: border-color .15s, box-shadow .15s, background .15s; }
.prompt.appear { animation: promptIn .16s ease-out; } @keyframes promptIn { from { opacity: 0; transform: scale(.94); } }
.prompt.right { border-color: var(--green); box-shadow: 0 0 26px rgba(22, 224, 123, .7); }
.prompt.wrong { border-color: var(--red); box-shadow: 0 0 26px rgba(255, 77, 109, .8); background: rgba(70, 8, 30, .75); }
.q-word { font-family: var(--font); text-transform: uppercase; font-size: calc(clamp(38px, 6.4vh, 54px) * var(--fit, 1)); line-height: 1.05; letter-spacing: 1.5px; text-shadow: 0 0 20px rgba(140, 180, 255, .8); word-break: break-word; }
.q-timer { color: var(--cyan); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.q-reveal { min-height: 0; color: var(--green); font-weight: 700; font-size: 16px; } .q-reveal:empty { display: none; } .q-reveal b { color: #fff; }
.choices { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.choice { flex: 1; min-height: 40px; max-height: 66px; border-radius: 16px; border: 1.5px solid var(--card-line); background: linear-gradient(rgba(20, 40, 130, .85), rgba(8, 16, 70, .9)); font-size: clamp(18px, 3vh, 22px); font-weight: 700; box-shadow: 0 0 12px rgba(47, 107, 255, .35); transition: transform .07s, background .1s, border-color .1s; }
.choices.appear .choice { animation: choiceIn .18s ease-out backwards; animation-delay: calc(var(--i) * 22ms); }
@keyframes choiceIn { from { opacity: 0; transform: translateX(-22px); } }
.choice:active:not(.locked) { transform: scale(.96); background: rgba(47, 107, 255, .6); border-color: var(--cyan); }
.choice.ok { background: linear-gradient(#22e884, #0a9c52); border-color: #b5ffd6; box-shadow: 0 0 26px rgba(22, 224, 123, .9); animation: okpop .25s ease-out; }
.choice.ok::before { content: "✔ "; }
.choice.bad { background: linear-gradient(#ff5a78, #a3122f); border-color: #ffc0cc; box-shadow: 0 0 22px rgba(255, 77, 109, .8); animation: shakeb .3s; }
.choice.locked:not(.ok):not(.bad) { opacity: .45; }
.choice.reveal { animation: okpop .35s .1s ease-out backwards; }
@keyframes okpop { 40% { transform: scale(1.06); } }
@keyframes shakeb { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.runprog { display: flex; align-items: center; gap: 10px; padding: 8px 14px; transition: opacity .4s; }
.runprog .flag { font-size: 20px; } .runprog b { font-size: 14px; min-width: 50px; text-align: right; }
.tier-label { position: absolute; top: -12px; right: -10px; z-index: 12; padding: 4px 14px; font-family: var(--font); font-style: italic; font-size: 24px; white-space: nowrap; pointer-events: none; opacity: 0; transform: rotate(-6deg); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.tier-label.show { animation: tier .9s ease-out forwards; }
.tier-label.reflex { color: #fff; background: linear-gradient(90deg, #ff4fd8, #a24bff); border-radius: 10px; box-shadow: 0 0 30px #ff4fd8; }
.tier-label.perfect { color: var(--gold); background: rgba(20, 60, 20, .85); border: 2px solid var(--green); border-radius: 10px; box-shadow: 0 0 24px var(--green); }
.tier-label.good { color: var(--cyan); background: rgba(10, 30, 90, .9); border: 2px solid var(--cyan); border-radius: 10px; }
.tier-label.correct { color: #dbe6ff; background: rgba(20, 30, 80, .9); border: 2px solid var(--card-line); border-radius: 10px; font-size: 20px; }
.tier-label.miss { color: #fff; background: rgba(160, 15, 45, .92); border: 2px solid #ff8fa5; border-radius: 10px; box-shadow: 0 0 20px var(--red); }
@keyframes tier { 0% { opacity: 0; transform: rotate(-6deg) scale(.4); } 15% { opacity: 1; transform: rotate(-6deg) scale(1.2); } 30% { transform: rotate(-6deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(-6deg) translateY(-8px); } }
.float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }
.float-text { position: absolute; transform: translate(-50%, 0); font-family: var(--font); font-style: italic; font-size: 28px; pointer-events: none; white-space: nowrap; animation: floatup .9s ease-out forwards; text-shadow: 0 0 12px currentColor, 0 2px 0 rgba(0, 0, 0, .6); z-index: 20; }
.float-text.gold { color: var(--gold); } .float-text.combo { color: #fff; font-size: 36px; text-shadow: 0 0 22px var(--pink), 0 0 40px var(--violet); animation-duration: 1.1s; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -54px) scale(1); } }
/* Flow Mode : les éléments secondaires s'effacent, le rythme s'accélère */
#app.flow .energy, #app.flow .runprog { opacity: .35; }
#app.flow .choice { border-color: var(--cyan); box-shadow: 0 0 18px rgba(25, 230, 255, .5); }
#app.flow .logo { opacity: .5; }
#app.flow .scorebox { border-color: var(--gold); }

/* ---------- Word Rain ---------- */
#s-rain { gap: 8px; }
.rain-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.timer-pill { padding: 6px 14px; font-variant-numeric: tabular-nums; } .timer-pill.urgent { border-color: var(--red); color: var(--red); animation: glowpulse .3s infinite alternate; }
.target-box { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.target-box b { font-family: var(--font); text-transform: uppercase; font-size: calc(34px * var(--fit, 1)); color: var(--gold); text-shadow: 0 0 18px rgba(255, 190, 40, .8); }
.target-box.pop { animation: bump .3s; }
.rain-area { position: relative; flex: 1; min-height: 200px; overflow: hidden; border-radius: 16px; touch-action: none; }
.rain-word { position: absolute; top: 0; left: 0; padding: 8px 14px; border-radius: 14px; font-size: 18px; font-weight: 800; white-space: nowrap; background: rgba(15, 8, 60, .85); border: 2px solid var(--violet); box-shadow: 0 0 16px currentColor; will-change: transform; touch-action: none; }
.rain-word.c0 { color: var(--cyan); border-color: var(--cyan); } .rain-word.c1 { color: #d9a8ff; border-color: var(--violet); } .rain-word.c2 { color: #ff9bea; border-color: var(--pink); } .rain-word.c3 { color: #9fc0ff; border-color: var(--blue); }
.rain-word.ok { background: linear-gradient(#22e884, #0a9c52); color: #fff; border-color: #b5ffd6; box-shadow: 0 0 34px var(--green); animation: okpop .25s; }
.rain-word.bad { background: rgba(160, 15, 45, .9); color: #fff; border-color: var(--red); animation: shakeb .25s; }
.rain-score { text-align: center; color: var(--muted); font-weight: 800; letter-spacing: 2px; font-size: 13px; } .rain-score b { font-family: var(--font); font-size: 24px; color: var(--gold); letter-spacing: 0; margin-left: 6px; }
.rain-banner { position: absolute; left: 12%; right: 12%; top: 34%; z-index: 20; text-align: center; padding: 18px 12px; border-radius: 22px; border: 2.5px solid var(--cyan); background: rgba(6, 12, 60, .92); box-shadow: 0 0 40px rgba(25, 230, 255, .8); animation: slam .5s ease-out; }
.rain-banner b { display: block; font-family: var(--font); font-style: italic; font-size: 44px; color: var(--gold); text-shadow: 0 0 22px rgba(255, 190, 40, .8); }
.rain-banner span { color: #cfe1ff; font-weight: 600; font-size: 14px; }

/* ---------- Résultats ---------- */
#s-results { gap: 8px; }
.trophy-big { text-align: center; font-size: 66px; line-height: 1; filter: drop-shadow(0 0 26px rgba(255, 190, 40, .9)); animation: float 2.6s ease-in-out infinite; }
.scorefinal { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 6px; }
.scorefinal b { font-family: var(--font); font-size: 52px; color: var(--gold); line-height: 1.05; text-shadow: 0 0 24px rgba(255, 190, 40, .8); }
.scorefinal em { font-style: normal; color: var(--cyan); font-size: 13px; font-weight: 700; } .scorefinal em:empty { display: none; }
.record { color: #fff; font-family: var(--font); font-style: italic; font-size: 15px; background: linear-gradient(90deg, var(--pink), var(--violet)); padding: 3px 14px; border-radius: 99px; box-shadow: 0 0 20px var(--pink); animation: glowpulse .5s infinite alternate; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: flex; flex-direction: column; padding: 8px 12px; gap: 1px; } .tile i { font-style: normal; font-size: 20px; }
.tile b { font-family: var(--font); font-size: 26px; line-height: 1.1; } .tile em { font-style: normal; font-size: 11px; color: var(--muted); }
.tile:nth-child(1) b { color: var(--cyan); } .tile:nth-child(2) b { color: #d9a8ff; }
.rework small { color: #ff9bb0; } .chip { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: 99px; background: rgba(255, 77, 109, .18); border: 1px solid rgba(255, 77, 109, .6); font-weight: 700; font-size: 14px; }

/* ---------- Progression ---------- */
.big-stat { display: flex; align-items: baseline; justify-content: center; gap: 10px; } .big-stat b { font-family: var(--font); font-size: 44px; color: var(--cyan); text-shadow: 0 0 16px var(--cyan); } .big-stat span { font-size: 20px; }
.mid-stat { display: flex; align-items: center; justify-content: center; gap: 10px; border-color: rgba(255, 207, 58, .6); font-size: 17px; } .mid-stat b { font-family: var(--font); font-size: 26px; color: var(--gold); }
.word-list { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; scrollbar-width: none; }
.wrow { display: flex; align-items: stretch; gap: 8px; }
.w-ico { width: 54px; min-height: 54px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 12px; background: rgba(20, 40, 120, .7); border: 1.5px solid var(--card-line); flex: none; }
.wrow > b { width: 66px; display: flex; align-items: center; font-size: 15px; flex: none; }
.w-status { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid; min-width: 0; }
.w-status .si { font-size: 22px; } .w-status b { display: block; font-size: 15px; } .w-status small { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; color: #cfe1ff; line-height: 1.2; display: block; }
.w-status.work { border-color: #ff6f8a; background: rgba(120, 15, 45, .4); } .w-status.work b { color: #ff7b93; }
.w-status.known { border-color: #2fe08a; background: rgba(10, 90, 50, .4); } .w-status.known b { color: #47f0a0; }
.w-status.fast { border-color: var(--cyan); background: rgba(10, 60, 100, .4); } .w-status.fast b { color: var(--cyan); }
.w-status.reflex { border-color: var(--violet); background: rgba(70, 20, 130, .45); } .w-status.reflex b { color: #e0a8ff; }
.w-status.new { border-color: #4b5a9a; background: rgba(20, 30, 80, .4); }

/* ---------- Révision ---------- */
#s-review { align-items: stretch; }
.calendar { align-self: center; position: relative; width: 210px; padding: 34px 10px 14px; margin-top: 4px; text-align: center; border-radius: 22px; background: linear-gradient(#2b5bff, #0e1f8a); border: 3px solid var(--cyan); box-shadow: 0 0 34px rgba(25, 230, 255, .7); display: flex; flex-direction: column; }
.calendar::before, .calendar::after { content: ""; position: absolute; top: -14px; width: 14px; height: 34px; border-radius: 8px; background: #b5d0ff; border: 2px solid var(--cyan); }
.calendar::before { left: 44px; } .calendar::after { right: 44px; }
.calendar .cal-top { position: absolute; top: 0; left: 0; right: 0; height: 24px; border-radius: 19px 19px 0 0; background: rgba(0, 0, 40, .35); }
.calendar b { font-family: var(--font); font-size: 100px; line-height: 1; text-shadow: 0 0 30px #fff; } .calendar span { font-weight: 800; font-size: 19px; }

/* ---------- Petits écrans ---------- */
@media (max-height: 700px) {
  .title-xl { font-size: 44px; } .title-lg { font-size: 32px; }
  #s-run { gap: 6px; }
  .scorebox b { font-size: 25px; } .scorebox .trophy { font-size: 24px; }
  .combo-badge b { font-size: 26px; } .btn-main { height: 52px; font-size: 19px; }
  .trophy-big { font-size: 48px; } .scorefinal b { font-size: 42px; }
  .calendar b { font-size: 76px; } .pack-emoji { font-size: 70px; }
}
@media (prefers-reduced-motion: reduce) { .road i, .bolt, .pack-card::before { animation: none; } }
.road::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28%; z-index: 2; background: linear-gradient(#ff4fd8aa, transparent); mix-blend-mode: screen; opacity: calc(.35 + var(--intensity) * .6); }
.reflex-chip { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--violet); color: #e0a8ff; font-size: 11px; font-weight: 800; vertical-align: middle; }
/* Décompte de reprise après Word Rain */
.resume { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(3, 5, 25, .86); backdrop-filter: blur(3px); }
.resume small { color: var(--cyan); letter-spacing: 3px; font-weight: 800; }
.resume b { font-family: var(--font); font-style: italic; font-size: min(72px, 17vw); white-space: nowrap; line-height: 1; color: transparent; -webkit-text-stroke: 4px #fff; text-shadow: 0 0 30px var(--cyan), 0 0 60px var(--blue); }
/* GO de la reprise = même pilule verte que le GO du départ (.go-bar) */
.resume.go b { padding: 22px 60px; border-radius: 99px; border: 3px solid #7dffb4; background: linear-gradient(#22e884, #0a9c52); font-size: 60px; line-height: normal; color: #fff; -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0 50px rgba(22, 224, 123, .9); }
/* Erreur de chargement du contenu */
.load-error { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 5, 25, .92); text-align: center; }
.load-error .card { display: flex; flex-direction: column; gap: 14px; padding: 22px; } .load-error b { font-family: var(--font); font-size: 30px; color: var(--gold); } .load-error p { margin: 0; color: #cfe1ff; }

/* ---------- Carte des quartiers et niveaux ---------- */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.map-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; text-align: center; border-radius: 18px; border: 1.5px solid var(--card-line); background: var(--card); color: var(--text); }
.map-tile.open { border-color: var(--cyan); box-shadow: 0 0 18px rgba(25, 230, 255, .45), inset 0 0 22px rgba(47, 107, 255, .22); }
.map-tile.open:active { transform: scale(.97); }
.map-tile.soon { opacity: .6; cursor: default; }
#districtGrid .map-tile:nth-child(5) { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 14px; padding: 8px; }
.map-tile svg { width: 54px; height: 54px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(25, 230, 255, .8)); }
.map-tile.soon svg { stroke: var(--muted); filter: none; }
.map-tile b { font-family: var(--font); font-style: italic; font-size: 18px; text-transform: uppercase; }
.map-tile .mt-sub { font-size: 12px; font-weight: 700; color: var(--cyan); }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; border: 1.5px solid var(--card-line); color: var(--muted); }
.tag.go { color: var(--cyan); border-color: var(--cyan); } .tag.done { color: var(--green); border-color: var(--green); } .tag.wip { color: var(--gold); border-color: var(--gold); }
.mission-card { display: flex; flex-direction: column; gap: 2px; text-align: left; color: var(--text); }
.mission-card b { font-size: 16px; } .mission-card span { color: var(--cyan); font-weight: 700; font-size: 14px; }
.frieze { position: relative; display: flex; flex-direction: column; gap: 10px; }
.frieze::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 3px; background: var(--card-line); border-radius: 2px; }
.lv-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; text-align: left; border-radius: 18px; border: 1.5px solid var(--card-line); background: var(--card); color: var(--text); width: 100%; }
.lv-row.open { border-color: var(--cyan); box-shadow: 0 0 16px rgba(25, 230, 255, .4); }
.lv-row.open:active { transform: scale(.98); }
.lv-row.soon, .lv-row.closed { opacity: .6; cursor: default; }
.lv-node { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; border: 2px solid var(--card-line); background: var(--bg); color: var(--muted); }
.lv-row.open .lv-node { border-color: var(--cyan); color: var(--cyan); } .lv-row.done .lv-node { border-color: var(--green); color: var(--green); }
.lv-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lv-txt b { font-size: 17px; } .lv-txt small { text-transform: none; letter-spacing: .3px; }
.lv-prog { color: var(--cyan); font-weight: 700; font-size: 13px; margin-top: 2px; }
.pk-sub { text-align: center; color: var(--cyan); font-weight: 700; font-size: 14px; margin-top: -4px; }
.pk-prog { display: flex; align-items: center; gap: 10px; } .pk-prog b { font-size: 14px; white-space: nowrap; }
.review-teaser.muted { opacity: .55; border-color: var(--card-line); box-shadow: none; } .review-teaser.muted .rt-n, .review-teaser.muted .chev { color: var(--muted); }
.verdict { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.verdict b { font-size: 17px; } .verdict span { font-size: 13px; color: #cfe1ff; font-weight: 600; }
.verdict.ok { border-color: var(--green); box-shadow: 0 0 18px rgba(22, 224, 123, .45); } .verdict.ok b { color: var(--green); }
.verdict.warn { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 207, 58, .35); } .verdict.warn b { color: var(--gold); }

/* ---------- Arrêt d'un RUN ---------- */
#btnStop { font-weight: 900; color: var(--text); }
.modal { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(2, 4, 20, .8); }
.modal-box { display: flex; flex-direction: column; gap: 10px; text-align: center; width: 100%; max-width: 340px; padding: 18px; }
.modal-box b { font-size: 19px; } .modal-box p { margin: 0; color: #cfe1ff; font-size: 14px; font-weight: 600; }
.toast { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); transform: translateX(-50%); z-index: 60; width: max-content; max-width: 90%; padding: 10px 18px; border-radius: 16px; border: 1.5px solid var(--gold); background: var(--card); color: var(--gold); font-weight: 800; font-size: 14px; text-align: center; }

/* ---------- Barre du bas ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px); background: rgba(5, 8, 24, .94); border-top: 1.5px solid var(--card-line); }
.tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--cyan); } .tab.on svg { filter: drop-shadow(0 0 5px var(--cyan)); }
.tab:active { transform: scale(.94); }
.tab-n { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--gold); color: #201500; font-size: 11px; font-weight: 900; font-style: normal; }
#app[data-tabbar="on"] .screen { padding-bottom: calc(env(safe-area-inset-bottom) + 82px); }

/* ---------- Carrousel de l'accueil ---------- */
.carousel { margin: 0 -16px; }
.car-track { position: relative; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.car-track::-webkit-scrollbar { display: none; }
.car-tile { flex: 0 0 86%; scroll-snap-align: center; min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; }
.car-track.single .car-tile { flex-basis: 100%; }
.car-tile.mission { border-color: var(--cyan); box-shadow: 0 0 18px rgba(25, 230, 255, .4), inset 0 0 22px rgba(47, 107, 255, .2); }
.car-tile.review { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 207, 58, .4); }
.car-tile .ct-title { font-size: 18px; font-weight: 800; } .car-tile .ct-sub { color: var(--cyan); font-weight: 700; font-size: 14px; }
.car-tile.review .ct-sub { color: #cfe1ff; }
.car-tile .ct-row { display: flex; align-items: center; gap: 12px; } .car-tile .ct-big { font-family: var(--font); font-size: 40px; color: var(--gold); min-width: 44px; text-align: center; }
.car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 32px; }
.car-nav.single { visibility: hidden; }
.car-dots i { cursor: pointer; }
.car-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--card-line); background: var(--card); color: var(--text); font-size: 20px; font-weight: 900; line-height: 1; }
.car-arrow:disabled { opacity: .3; cursor: default; } .car-arrow:not(:disabled):active { transform: scale(.92); }
.best-card b { color: var(--gold); }
.empty { margin: 8px 0; text-align: center; color: var(--muted); font-weight: 700; }

/* ---------- Menu étendu ---------- */
#btnMenu svg { fill: none; stroke: var(--text); stroke-width: 2; }
.menu-grid .map-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-grid .map-tile { min-height: 132px; justify-content: center; }

/* ---------- Zones cliquables (plus de bouton vert de navigation) ---------- */
.chev-r { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 30px; font-weight: 900; color: var(--cyan); }
.mission-card.go, .car-tile { width: 100%; padding-right: 40px; cursor: pointer; }
.mission-card.go:active, .car-tile:active { transform: scale(.98); }
.mission-card.go[disabled] { cursor: default; } .mission-card.go[disabled] .chev-r { display: none; }
.car-tile.review .chev-r { color: var(--gold); }

/* ---------- Reflex City : carte verticale ---------- */
#s-map { padding: calc(env(safe-area-inset-top) + 50px) 0 14px; gap: 0; overflow: hidden; }
.city-head { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 58px); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; pointer-events: none; }   /* titre et bouton par-dessus la carte */
.city-title { margin: 0; text-shadow: 0 2px 6px #000; font-family: var(--font); font-style: italic; font-size: clamp(24px, 6.5vw, 34px); letter-spacing: -.7px; text-shadow: 0 0 18px #1db9ff; }
.city-toggle { pointer-events: auto; flex: none; min-height: 44px; max-width: 130px; padding: 8px 12px; border: 1px solid #22bedd; border-radius: 13px; background: #0d2948; font-size: 12px; font-weight: 700; }
.city-viewport { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; background: #08184a url('../images/city/background.webp') center top / cover no-repeat; }
.city-viewport:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
#cityMap { position: relative; isolation: isolate; overflow: hidden; }
.city-section { position: relative; aspect-ratio: 1000 / 1150; --accent: #32eaff; }
.city-art { position: absolute; z-index: 1; top: 6%; left: 0; width: 100%; height: 88%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 8px 12px #061327aa); }
.city-route { position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.city-route path { fill: none; stroke-linecap: round; }
.city-route .halo { stroke: #2fbfff; stroke-width: 28; opacity: .38; filter: blur(9px); }
.city-route .edge { stroke: #bd55ff; stroke-width: 15; opacity: .8; }
.city-route .core { stroke: #bcefff; stroke-width: 5; }
.city-panel { position: absolute; z-index: 3; right: 5%; top: 48%; transform: translateY(-50%); width: 48%; min-height: 95px; padding: 13px 11px; border: 1.5px solid var(--accent); border-radius: 16px; background: #091b3ff2; box-shadow: 0 0 15px color-mix(in srgb, var(--accent), transparent 55%), inset 0 0 15px #24568666; text-align: left; color: var(--text); }
button.city-panel:active { transform: translateY(-50%) scale(.98); }
.city-panel.soon { opacity: .9; border-style: dashed; }
.city-row { display: flex; gap: 8px; align-items: center; }
.city-ico svg { display: block; flex: none; width: 30px; height: 30px; color: var(--accent); }
.city-panel strong { font-size: clamp(14px, 3.6vw, 21px); line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; font-style: italic; }
.city-count { display: block; margin: 8px 0; font-size: 11px; color: #b4dff3; }
.city-cta { display: block; text-align: center; padding: 9px 5px; border-radius: 9px; background: #00905d; box-shadow: 0 0 10px #00ff8860; border: 1px solid #42ffa3; font-size: 12px; font-weight: 800; }
.city-soon { display: block; text-align: center; padding: 7px 5px; border-radius: 99px; border: 1.5px solid var(--card-line); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 1.2px; }
.city-node { position: absolute; left: 72%; top: 66%; transform: translate(-50%, -50%); width: 12%; height: 4%; border-radius: 50%; border: 3px solid #cfffff; background: #2edfff88; box-shadow: 0 0 13px #27eaff; z-index: 3; pointer-events: none; }
.city-tail { position: relative; height: 145px; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(transparent, #081b3ee8 70%); color: #a8d7ee; }
.city-tail p { z-index: 3; margin: 0; background: #0a183edb; padding: 12px 17px; border: 1px solid #315780; border-radius: 13px; font-size: 13px; }
.city-tail small { text-transform: none; letter-spacing: .3px; display: block; margin-top: 6px; color: #7592b7; font-size: 11px; }
#cityMap.compact .city-section { aspect-ratio: 1000 / 450; }
#cityMap.compact .city-art { display: none; }
#cityMap.compact .city-panel { width: 65%; min-height: 85px; top: 51%; padding: 11px; }
#cityMap.compact .city-count { margin: 6px 0; }
#cityMap.compact .city-node { left: 26%; top: 51%; width: 9%; height: 9%; }
@media (min-width: 560px) { .city-viewport { margin: 0 auto; width: min(100%, 600px); } }
@media (max-width: 340px) { .city-panel { padding: 11px 8px; } .city-ico svg { width: 23px; height: 23px; } .city-count { font-size: 10px; } }

/* ---------- Fonds : menus (image ville néon) et jeu (sobre) ----------
   Menus (accueil, carte, pack, découverte, résultats…) : images/menu-bg.webp + grille qui défile fondue dans la route de l'image.
   Jeu (compte à rebours, RUN, Word Rain) : fond sombre uni, sans ville ni lune, grille discrète : lisibilité avant tout. */
.bg-photo { inset: 0; background: url('../images/menu-bg.webp') center bottom / cover no-repeat; opacity: 0; transition: opacity .4s; }
.moon, #skyline { transition: opacity .4s; }
#app:not([data-screen="run"]):not([data-screen="rain"]):not([data-screen="count"]):not([data-screen="rebuild"]) .bg-photo:not(.bg-rain) { opacity: 1; }
#app:not([data-screen="run"]):not([data-screen="rain"]):not([data-screen="count"]):not([data-screen="rebuild"]) .moon,
#app:not([data-screen="run"]):not([data-screen="rain"]):not([data-screen="count"]):not([data-screen="rebuild"]) #skyline { opacity: 0; }
/* menus : la grille s'ajoute à la route de l'image (lumière), fondu depuis l'horizon, centre de fuite commun */
#app:not([data-screen="run"]):not([data-screen="rain"]):not([data-screen="count"]):not([data-screen="rebuild"]) .road { height: 44%; background: transparent; mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: linear-gradient(transparent 0, #000 45%); mask-image: linear-gradient(transparent 0, #000 45%); }
#app:not([data-screen="run"]):not([data-screen="rain"]):not([data-screen="count"]):not([data-screen="rebuild"]) .road::before { display: none; }
/* jeu (compte à rebours, RUN, Word Rain, Rebuild) : fond sobre */
#app[data-screen="run"] #bg,
#app[data-screen="rain"] #bg,
#app[data-screen="count"] #bg,
#app[data-screen="rebuild"] #bg { background: linear-gradient(#04061a 0%, #08103a 60%, #04061a 100%); }
#app[data-screen="run"] .moon,
#app[data-screen="rain"] .moon,
#app[data-screen="count"] .moon,
#app[data-screen="rebuild"] .moon,
#app[data-screen="run"] #skyline,
#app[data-screen="rain"] #skyline,
#app[data-screen="count"] #skyline,
#app[data-screen="rebuild"] #skyline { opacity: 0; }
#app[data-screen="run"] .road,
#app[data-screen="rain"] .road,
#app[data-screen="count"] .road,
#app[data-screen="rebuild"] .road { background: transparent; opacity: .4; }
#app[data-screen="run"] .road::before,
#app[data-screen="rain"] .road::before,
#app[data-screen="count"] .road::before,
#app[data-screen="rebuild"] .road::before { opacity: calc(.1 + var(--intensity) * .3); }
@media (prefers-reduced-motion: reduce) { .bg-photo, .moon, #skyline { transition: none; } }
/* lisibilité des lignes et tuiles sur le fond image des menus */
.lv-row, .map-tile { background: rgba(7, 14, 55, .82); backdrop-filter: blur(6px); }
.lv-row.soon, .lv-row.closed, .map-tile.soon { opacity: .8; }
.review-teaser.muted { opacity: .85; background: rgba(7, 14, 55, .82); }
.tagline { text-shadow: 0 1px 3px #000, 0 0 10px rgba(3, 5, 25, .9); }
#app[data-tabbar="on"] #s-map { padding-bottom: calc(env(safe-area-inset-bottom) + 64px); }   /* la carte s arrête exactement au-dessus de la barre du bas (64 px) : « la ville continue » reste visible */
#s-run { padding-top: calc(env(safe-area-inset-top) + 58px); }   /* le badge de combo incliné ne passe pas sous la bande haute */

.rev-more { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.rev-more .lv-row { padding-right: 34px; } .rev-more .chev-r { right: 12px; font-size: 26px; }
.rev-more .lv-row.soon { padding-right: 12px; } .rev-more .lv-txt small { font-size: 12.5px; }
.card-item { cursor: pointer; } .card-item .lv-txt small { font-style: italic; color: var(--cyan); font-size: 14px; }
.card-item .si { flex: none; width: 22px; height: 22px; display: grid; place-items: center; } .card-item .si .ic { width: 20px; height: 20px; }
.weak-list { display: flex; flex-direction: column; gap: 8px; }
.weak-item { cursor: default; } .weak-item .w-ico { width: 48px; min-height: 48px; }
.weak-item .lv-txt b { font-size: 17px; }
#s-weak, #s-train { align-items: stretch; } #s-train .lv-row { padding-right: 34px; } #s-train .chev-r { right: 12px; font-size: 26px; }
#discCard.conceal #discBadges, #discCard.conceal #discIpa, #discCard.conceal #discCtx, #discCard.conceal #btnSpeak { visibility: hidden; }
#discCard.conceal #discEn { color: var(--muted); text-shadow: none; font-size: 26px; letter-spacing: 1px; }
.rev-wait { margin: -4px 0 0; text-align: center; color: #cfe1ff; font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px #000; }

/* bloc « À revoir » des résultats : touche pour revoir les cartes */
button.rework { display: block; width: 100%; text-align: left; cursor: pointer; border-color: rgba(255, 77, 109, .7); color: var(--text); }
button.rework:active { transform: scale(.99); }
.rework-cta { display: block; margin-top: 8px; color: #ffb3c2; font-size: 14px; }

/* résultats : la barre du bas est là (Accueil, Carte, Révision, Mission) ; un seul gros bouton. On resserre sur les écrans courts. */
.trophy-big { font-size: 44px; }
@media (max-height: 800px) { .trophy-big { display: none; } .tile i { display: none; } .tile { padding: 6px 12px; } }

/* ---------- Arcade et Rebuild ---------- */
.rb-empty { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.rb-empty span { color: #cfe1ff; font-weight: 600; font-size: 14px; }
.rb-list { display: flex; flex-direction: column; gap: 10px; }
#s-rebuild { gap: 8px; }
.rb-top { display: flex; gap: 8px; }
.rb-chip { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; }
.rb-chip b { font-family: var(--font); font-size: 22px; color: var(--gold); line-height: 1.1; }
.rb-timebar { position: relative; flex: none; height: 26px; border-radius: 99px; border: 1px solid rgba(90, 140, 255, .5); background: rgba(5, 10, 50, .9); overflow: hidden; }
.rb-timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #c8ff3a); transition: width .12s linear; }
.rb-timebar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; text-shadow: 0 1px 3px #000; }
.rb-card { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; }
.rb-card.wrong { animation: shake .32s; border-color: var(--red); box-shadow: 0 0 20px rgba(255, 77, 109, .6); }
.rb-card.right { border-color: var(--green); box-shadow: 0 0 20px rgba(22, 224, 123, .55); }
.rb-img { width: clamp(64px, 12vh, 112px); height: clamp(64px, 12vh, 112px); }
.rb-img .wimg { width: 100%; height: 100%; border-radius: 16px; border: 1.5px solid var(--card-line); background: rgba(10, 16, 64, .4); }
.rb-hint { font-family: var(--font); font-style: italic; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.rb-cells { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rb-row { display: flex; gap: 5px; justify-content: center; }
.rb-cell { width: var(--cell, 40px); height: calc(var(--cell, 40px) * 1.15); display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--card-line); background: rgba(5, 10, 50, .8); font-style: normal; font-family: var(--font); font-size: calc(var(--cell, 40px) * .55); }
.rb-cell.filled { border-color: var(--cyan); color: #fff; box-shadow: 0 0 10px rgba(25, 230, 255, .5); }
.rb-cell.fixed { border-color: transparent; background: transparent; color: var(--muted); }
.rb-cell.gstart { margin-left: 10px; }
.rb-reveal { min-height: 22px; font-weight: 800; color: var(--gold); }
.rb-q { font-family: var(--font); font-style: italic; } .rb-q.reflex { color: var(--cyan); } .rb-q.perfect { color: var(--gold); } .rb-q.good { color: var(--green); }
.rb-bank { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rb-brow { display: flex; gap: 8px; }
.rb-tile { width: clamp(42px, 14.5vw, 58px); height: clamp(42px, 14.5vw, 58px); border-radius: 14px; border: 2px solid var(--cyan); background: linear-gradient(#143a9a, #0b1f6a); font-family: var(--font); font-size: 26px; color: #fff; box-shadow: 0 0 12px rgba(25, 230, 255, .45); }
.rb-tile:active { transform: scale(.92); }
.rb-tile.used { opacity: .22; box-shadow: none; transform: none; }
.rb-erase { align-self: center; width: min(100%, 260px); }
/* Word Rain : image de fond dédiée (ville néon et traînées lumineuses) */
.bg-rain { background-image: url('../images/wordrain-bg.webp'); }
#app[data-screen="rain"] .bg-rain { opacity: 1; }
/* grille qui défile fondue dans la route de l'image : seulement le bas (l'horizon de cette image est aux trois quarts), fondu depuis l'horizon */
#app[data-screen="rain"] .road { height: 25%; background: transparent; mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: linear-gradient(transparent 0, #000 45%); mask-image: linear-gradient(transparent 0, #000 45%); }
#app[data-screen="rain"] .road::before { display: none; }
/* Word Rain : voile des bords allégé pour laisser voir l'image (les mots ont leur propre fond foncé, ils restent lisibles) */
#app[data-screen="rain"] .vignette { background: radial-gradient(ellipse at 50% 45%, rgba(3, 5, 25, 0) 35%, rgba(3, 4, 20, .5) 100%), linear-gradient(rgba(3, 5, 25, .3), rgba(3, 5, 25, .05) 40%, rgba(3, 5, 25, .2)); }

/* ---------- Icônes en traits néon (remplacent les emojis) ---------- */
.ic { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; line-height: 1; }
.ic svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px currentColor); }
.icon-btn .ic, .round-btn .ic { width: 20px; height: 20px; }
.round-btn .ic { width: 24px; height: 24px; }
.trophy-big .ic { width: 1em; height: 1em; }
.run-plate span { display: inline-flex; }
.tile i { display: inline-flex; }
.mid-stat .ico { display: inline-flex; }
.si { display: inline-flex; }
.si .ic { width: 1.2em; height: 1.2em; }
.q-timer { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.tag .ic, .lv-node .ic { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.lv-node .ic { width: 18px; height: 18px; }
.btn-main .ic, .btn-sub .ic { width: 1.1em; height: 1.1em; }
.car-tile .ct-title { text-wrap: balance; }   /* pas de « 1 » orphelin sur la tuile de mission */
.car-tile .ct-title { font-size: 17px; }
.modal-box b { text-wrap: balance; }

/* Mots à retravailler : fenêtre défilante de 5 mots visibles, le bouton « Revoir et m'entraîner » reste toujours à l'écran */
#weakList { max-height: calc(5 * 70px + 4 * 8px + 4px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; -webkit-overflow-scrolling: touch; }

/* Progression : répartition des mots par état (carte du district, détail, groupes) */
.prog-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab pct" "bar bar" "sub sub"; align-items: center; gap: 6px 12px; padding: 12px 38px 12px 14px; text-align: left; position: relative; border-color: var(--cyan); }
.prog-card.static { padding-right: 14px; cursor: default; }
.prog-card small { grid-area: lab; color: var(--muted); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.prog-card > b { grid-area: pct; font-family: var(--font); font-style: italic; font-size: 24px; line-height: 1; color: var(--cyan); white-space: nowrap; }
.prog-card .m-sub { grid-area: sub; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }
.prog-card .sbar { grid-area: bar; } .prog-card .chev-r { right: 12px; font-size: 26px; }
.sbar { display: flex; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 4px; width: 100%; }
.sbar i { display: block; height: 100%; } .sbar .confirme { background: #b57bff; } .sbar .en_progres { background: #2fe08a; } .sbar .a_revoir { background: #ff6f8a; } .sbar .decouvert { background: #5b78d6; }
.lv-txt .sbar { margin-top: 6px; }
#s-mastery { align-items: stretch; } .ms-list { display: flex; flex-direction: column; gap: 6px; }
.ms-theme h3 { display: flex; justify-content: space-between; margin: 10px 2px 4px; font-family: var(--font); font-style: italic; font-size: 20px; text-transform: uppercase; } .ms-theme h3 b { color: var(--cyan); }
.ms-level { display: flex; justify-content: space-between; margin: 8px 4px 4px; color: var(--muted); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; } .ms-level span { color: var(--text); }
.ms-group { cursor: default; padding: 8px 12px 8px 10px; } .ms-group.closed { opacity: .65; }

/* Légende des états (détail du district, progression) : mêmes couleurs que la barre */
.legend { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.lg-row { display: flex; align-items: center; gap: 10px; --c: #5b78d6; }
.lg-row.confirme { --c: #b57bff; } .lg-row.en_progres { --c: #2fe08a; } .lg-row.a_revoir { --c: #ff6f8a; } .lg-row.decouvert { --c: #5b78d6; }
.lg-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.lg-ico .ic { width: 17px; height: 17px; }
.lg-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lg-txt b { font-size: 15px; } .lg-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.3; text-transform: none; letter-spacing: 0; font-weight: 600; }
.lg-n { font-family: var(--font); font-size: 20px; color: var(--c); }
.legend.compact { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; } .legend.compact .lg-row { gap: 6px; } .legend.compact .lg-ico { width: 24px; height: 24px; } .legend.compact .lg-ico .ic { width: 14px; height: 14px; } .legend.compact .lg-txt b { font-size: 13px; } .legend.compact .lg-n { font-size: 16px; }
.ms-row { position: relative; padding-right: 34px; } .ms-row .chev-r { right: 12px; font-size: 26px; } .ms-row.soon { padding-right: 12px; }
#pCard { display: grid; text-align: left; position: relative; padding-right: 38px; cursor: pointer; }
.ms-group.open { position: relative; padding-right: 34px; cursor: pointer; } .ms-group .chev-r { right: 12px; font-size: 26px; }
#s-mastery .word-list { margin: 0; }

/* Test de fin de niveau */
.test-teaser { border-color: var(--cyan); box-shadow: 0 0 18px rgba(25, 230, 255, .4); } .test-teaser .rt-n, .test-teaser .chev { color: var(--cyan); }
.test-teaser .rt-n .ic { width: 34px; height: 34px; } .test-teaser small { text-transform: none; letter-spacing: 0; }
.br-word { font-family: var(--font); font-style: italic; font-size: 54px; color: #fff; text-shadow: 0 0 18px var(--cyan), 0 0 40px rgba(25, 230, 255, .6); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.78); opacity: .55; } 50% { transform: scale(1.4); opacity: 1; } }
.br-sub { margin: 36px 0 18px; color: #cfe1ff; font-weight: 700; font-size: 17px; text-shadow: 0 1px 3px #000; } .br-sub b { color: var(--cyan); }
#s-breathe .btn-sub { padding: 0 26px; }
#s-testend { gap: 8px; } #teVerdict.ok { border-color: var(--green); } #teVerdict.warn { border-color: var(--gold); } #teVerdict b { font-size: 54px; }
#s-testend .btn-main { margin-top: 2px; }

/* XP, niveau et profil */
.xp-pill { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 99px; border: 1.5px solid var(--violet); color: #e0a8ff; font-weight: 900; font-size: 13px; background: rgba(70, 20, 130, .35); }
#s-profile { align-items: stretch; gap: 8px; }
.pf-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-color: var(--violet); }
.pf-name { width: 100%; max-width: 280px; text-align: center; background: transparent; border: 0; border-bottom: 1.5px solid var(--card-line); color: var(--text); font-family: var(--font); font-style: italic; font-size: 26px; padding: 2px 4px; text-transform: uppercase; }
.pf-name::placeholder { color: var(--muted); } .pf-name:focus { outline: none; border-bottom-color: var(--cyan); }
.pf-lvl { color: var(--muted); font-weight: 800; letter-spacing: 2px; } .pf-lvl b { font-family: var(--font); font-size: 44px; color: #e0a8ff; margin-left: 6px; text-shadow: 0 0 16px rgba(180, 100, 255, .7); }
.pf-bar { width: 100%; } .pf-bar i { background: linear-gradient(90deg, #9a6bff, #ff5bd6); }
.pf-xp { color: var(--muted); font-weight: 700; font-size: 13px; text-align: center; }
.pf-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; } .pf-box > small { color: var(--muted); font-weight: 800; letter-spacing: 1px; font-size: 12px; }
.pf-line { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; } .pf-line b { color: var(--cyan); } .pf-line b.full { color: var(--muted); }
.pf-unlock { display: flex; align-items: center; gap: 10px; opacity: .7; --c: #5b78d6; } .pf-unlock.ok { opacity: 1; --c: #2fe08a; }

/* Défis à paliers */
#s-challenges { align-items: stretch; gap: 8px; } .ch-list { display: flex; flex-direction: column; gap: 8px; }
.ch-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab num" "sub sub"; align-items: center; gap: 4px 10px; padding: 10px 14px; border-color: var(--violet); }
.ch-head small { grid-area: lab; color: var(--muted); font-weight: 800; letter-spacing: 1px; font-size: 12px; } .ch-head b { grid-area: num; font-family: var(--font); font-size: 24px; color: #e0a8ff; } .ch-pending { grid-area: sub; color: var(--muted); font-weight: 700; font-size: 13px; } .ch-pending.ready { color: var(--cyan); }
.ch-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .ch-card.ready { border-color: var(--cyan); box-shadow: 0 0 14px rgba(25, 230, 255, .4); }
.ch-card .lg-ico { --c: #9a6bff; } .ch-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ch-main b { font-size: 16px; } .ch-main small { color: var(--muted); font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ch-main .bar { height: 7px; } .ch-main .bar i { background: linear-gradient(90deg, #9a6bff, #ff5bd6); }
.ch-medals { display: flex; gap: 6px; } .medal { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--m); background: transparent; --m: #5b78d6; opacity: .45; }
.medal.bronze { --m: #cd7f32; } .medal.argent { --m: #c0c8d8; } .medal.or { --m: #ffcf3a; } .medal.on { background: var(--m); opacity: 1; } .medal.got { box-shadow: 0 0 0 2px rgba(255, 255, 255, .0), 0 0 8px var(--m); }
.ch-claim { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--green); background: linear-gradient(#26d97a, #0f9a4f); color: #fff; font-weight: 900; font-size: 13px; line-height: 1.2; } .ch-claim b { font-size: 15px; }