@font-face { font-family: 'Luckiest Guy'; src: url('../assets/fonts/luckiest-guy.woff2') format('woff2'); font-display: block; }
:root {
  --ink: #3a2312;
  --green: #8fff5a;
  --green2: #4fc23a;
  --purple: #2a1838;
  --violet: #b04cff;
  --yellow: #ffd23f;
  --red: #ff5a4e;
  --font: 'Luckiest Guy', 'Arial Rounded MT Bold', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #120b19; color: #fff; font-family: var(--font);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font-family: var(--font); cursor: pointer; }
.hidden { display: none !important; }

/* ---------- barre d'aperçu (disparaît sur un vrai téléphone) ---------- */
#devbar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 50;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: #1b1026; border-bottom: 3px solid #3a2550;
}
#devbar .devtitle { color: var(--green); font-size: 18px; white-space: nowrap; }
#devbar .devbtns { display: flex; gap: 8px; overflow-x: auto; }
#devbar button {
  background: #2e1d40; color: #fff; border: 2px solid #4a3366; border-radius: 10px;
  padding: 6px 10px; font-size: 14px; white-space: nowrap;
}
#devbar button.active { background: var(--green); color: #1b1026; border-color: #d8ffc0; }
body.native #devbar { display: none; }
#stage { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
body.native #stage { top: 0; }
#device { position: relative; width: 100%; height: 100%; }
body.phone #stage { background: radial-gradient(ellipse at center, #2b1d3c 0%, #120b19 70%); }
body.phone #device {
  width: auto; height: auto; padding: 12px; border-radius: 48px; background: #0b0710;
  box-shadow: 0 0 0 3px #3a2a4a, 0 20px 60px rgba(0,0,0,.6); transform-origin: center;
}
#game { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--purple); touch-action: none; }
body.phone #game { border-radius: 36px; }
#punch { display: none; }
body.phone #punch { display: block; position: absolute; top: 24px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #000; z-index: 30; }
body.phone.landscape #punch { top: 50%; left: 24px; margin: -7px 0 0 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- chargement ---------- */
#loading {
  position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at 50% 30%, #3b2458, #120b19 75%);
}
#loading .lbar { width: 60%; max-width: 320px; height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: #2a1838; overflow: hidden; }
#loadFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green2), var(--green)); }

/* ---------- logo ---------- */
.logo {
  font-size: clamp(44px, 12vw, 86px); line-height: 0.95; text-align: center; color: var(--green);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink), 0 0 30px rgba(143,255,90,.45);
  animation: wobble 3s ease-in-out infinite;
}
.logo.small { font-size: 46px; }
@keyframes wobble { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; padding: 10px 12px; }
body.phone #hud { padding-top: 34px; }
body.phone.landscape #hud { padding: 10px 14px 10px 44px; }
#top { display: flex; align-items: center; gap: 8px; }
#hearts { display: flex; gap: 2px; font-size: 22px; filter: drop-shadow(0 2px 0 var(--ink)); white-space: nowrap; }
#hearts .off { filter: grayscale(1) brightness(.5); }
#objective {
  flex: 1; text-align: center; font-size: 15px; color: #fff; padding: 6px 10px;
  background: rgba(27,16,38,.72); border: 3px solid var(--ink); border-radius: 14px; min-height: 30px;
  text-shadow: 0 2px 0 var(--ink);
}
#objective:empty { visibility: hidden; }
.round {
  pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ink);
  background: #fff7e0; font-size: 18px; box-shadow: 0 3px 0 var(--ink); flex: none;
}
#radio {
  position: absolute; top: 64px; left: 12px; right: 12px; max-width: 520px; display: flex; gap: 10px; align-items: center;
  background: #fff7e0; color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; padding: 8px 12px 8px 8px;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); animation: pop .25s ease-out;
}
body.phone #radio { top: 90px; }
#radio .face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: #d8f0ff; flex: none; }
#radio .face img { width: 100%; height: 100%; object-fit: cover; }
#radio b { font-size: 15px; }
#radio p { margin: 2px 0 0; font-family: system-ui, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#bossbar { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(80%, 420px); text-align: center; }
body.phone #bossbar { top: 86px; }
#radio:not(.hidden) ~ #bossbar { top: 150px; }
body.phone #radio:not(.hidden) ~ #bossbar { top: 176px; }
#bossName { font-size: 16px; color: #e8c6ff; text-shadow: 0 2px 0 var(--ink); }
#bossbar .bar { height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: rgba(0,0,0,.5); overflow: hidden; margin-top: 2px; }
#bossFill { height: 100%; width: 100%; background: linear-gradient(90deg, #8a3fd0, var(--violet)); transition: width .15s; }
#banner {
  position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-size: clamp(26px, 6vw, 44px); color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); animation: pop .3s ease-out;
}
#pointer {
  position: absolute; left: 50%; top: 50%; font-size: 34px; color: var(--green); margin: -20px 0 0 -14px;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 0 10px rgba(143,255,90,.7);
}

/* boutons de combat */
#controls { position: absolute; right: 14px; bottom: 16px; width: 210px; height: 210px; }
body.phone #controls { bottom: 30px; right: 22px; }
.ctl {
  pointer-events: auto; position: absolute; border-radius: 50%; border: 4px solid var(--ink); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 5px 0 var(--ink); touch-action: none; overflow: hidden; padding: 0;
}
.ctl span { font-size: 30px; line-height: 1; position: relative; z-index: 1; }
.ctl b { font-size: 11px; position: relative; z-index: 1; text-shadow: 0 2px 0 var(--ink); }
.ctl.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
#btnAtk { right: 0; bottom: 0; width: 104px; height: 104px; background: radial-gradient(circle at 40% 35%, #b8ff8a, var(--green2)); }
#btnAtk span { font-size: 42px; }
#btnBlock { right: 116px; bottom: 6px; width: 80px; height: 80px; background: radial-gradient(circle at 40% 35%, #8fd3ff, #3a7fd0); }
#btnMega { right: 8px; bottom: 118px; width: 80px; height: 80px; background: #3a2850; }
#btnMega i { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(0deg, var(--green2), var(--green)); z-index: 0; transition: height .2s; }
#btnMega.full { animation: glow 0.7s ease-in-out infinite alternate; }
#btnMega:not(.full) { opacity: .85; }
@keyframes glow { from { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 rgba(143,255,90,.8); } to { box-shadow: 0 5px 0 var(--ink), 0 0 0 12px rgba(143,255,90,0); } }
#btnJump { right: 120px; bottom: 98px; width: 72px; height: 72px; background: radial-gradient(circle at 40% 35%, #ffe68a, #f0a020); }
#btnAct { right: 200px; bottom: 20px; width: 96px; height: 96px; background: radial-gradient(circle at 40% 35%, #ffe68a, #ff9a2a); animation: glow 0.6s ease-in-out infinite alternate; }
#hud.flight .footOnly { display: none; }
#hud.flight #btnMega { right: 0; bottom: 0; width: 96px; height: 96px; }
.ctl.hl { animation: hl .5s ease-in-out infinite alternate; }
@keyframes hl { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.12); filter: brightness(1.35); } }
#tip {
  position: absolute; right: 230px; bottom: 60px; max-width: 200px; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 14px; padding: 8px 10px; font-size: 15px; animation: pop .3s ease-out;
}
body.phone #tip { bottom: 74px; }
#game.narrow #tip { right: auto; left: 12px; bottom: 250px; }
#flightHelp {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); background: rgba(27,16,38,.75); border: 3px solid var(--ink);
  border-radius: 14px; padding: 8px 14px; font-size: 16px; white-space: nowrap; animation: pop .3s ease-out;
}

/* joystick */
#joy { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; z-index: 9;
  background: rgba(255,255,255,.12); border: 4px solid rgba(255,255,255,.45); pointer-events: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #cfd8e6); border: 3px solid var(--ink); }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 12; transition: opacity .3s; }

/* ---------- écrans ---------- */
#screens { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.screen {
  position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 14px; padding: 20px; text-align: center; animation: fade .3s ease-out; overflow-y: auto;
}
body.phone .screen { padding-top: 40px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.screen.dim { background: rgba(18,11,25,.72); }
.btn {
  font-size: 22px; color: #fff; padding: 12px 26px; border: 4px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, #b8ff8a, var(--green2)); box-shadow: 0 5px 0 var(--ink); text-shadow: 0 2px 0 var(--ink);
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.alt { background: linear-gradient(180deg, #8fd3ff, #3a7fd0); }
.btn.grey { background: linear-gradient(180deg, #b0a6c0, #6e6080); font-size: 18px; }
.btn.big { font-size: 30px; padding: 14px 40px; }
.sub { font-family: system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #e8dcff; text-shadow: 0 2px 0 var(--ink); margin: 0; }
h2 { margin: 0; font-size: clamp(28px, 7vw, 46px); color: var(--green); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); font-weight: normal; }

/* écran titre */
#title { justify-content: space-between; padding-bottom: 28px; }
#title .chars { display: flex; justify-content: center; align-items: flex-end; gap: 10px; width: 100%; max-width: 560px; }
#title .chars img { height: min(32vh, 260px); filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
#title .chars img.lucas { animation: bob 1.4s ease-in-out infinite; }
#title .chars img.roteur { animation: bob 1.8s ease-in-out infinite reverse; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#title .tag { font-size: 18px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.ver { position: absolute; left: 10px; bottom: 6px; font-family: system-ui; font-size: 11px; color: rgba(255,255,255,.4); }

/* missions */
.cards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 820px; }
.card {
  width: 230px; padding: 12px; border: 4px solid var(--ink); border-radius: 20px; background: #fff7e0; color: var(--ink);
  box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.card img { height: 110px; }
.card b { font-size: 19px; }
.card p { margin: 0; font-family: system-ui, sans-serif; font-weight: 600; font-size: 13px; }
.card .stars { font-size: 20px; letter-spacing: 2px; }
.card.soon { opacity: .55; }
.narrow .card { width: 100%; max-width: 340px; display: grid; grid-template-columns: 74px 1fr; text-align: left; align-items: center; column-gap: 10px; }
.narrow .card img { height: 80px; grid-row: span 3; justify-self: center; }

/* histoire en bande dessinée */
#story { justify-content: flex-end; background: linear-gradient(180deg, rgba(18,11,25,.15), rgba(18,11,25,.8)); padding-bottom: 26px; }
#story .who { position: absolute; bottom: 150px; height: min(55vh, 440px); filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); animation: slideL .35s ease-out; }
#story .who.right { right: 4%; animation-name: slideR; }
#story .who.left { left: 4%; }
@keyframes slideL { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideR { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
#story .bubble {
  position: relative; width: min(94%, 640px); background: #fff7e0; color: var(--ink); border: 4px solid var(--ink); border-radius: 22px;
  padding: 12px 16px 14px; text-align: left; box-shadow: 0 5px 0 rgba(0,0,0,.4); min-height: 96px;
}
#story .bubble b { font-size: 18px; }
#story .bubble p { margin: 4px 0 0; font-family: system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; }
#story .bubble.narr { background: #2a1838; color: #fff; text-align: center; }
#story .bubble.narr p { font-style: italic; font-size: 20px; color: #e8dcff; }
#story .next { position: absolute; right: 14px; bottom: -14px; font-size: 14px; background: var(--green); border: 3px solid var(--ink); border-radius: 10px; padding: 2px 8px; animation: bob 1s infinite; }
#story .skip { position: absolute; top: 14px; right: 14px; font-size: 15px; padding: 6px 12px; }
body.phone #story .skip { top: 40px; }

/* résultats */
.bigstars { font-size: 54px; letter-spacing: 6px; filter: drop-shadow(0 4px 0 var(--ink)); }
.bigstars .off { filter: grayscale(1) brightness(.45); }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.portrait { height: min(30vh, 230px); filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }

/* écran étroit (téléphone tenu droit) : la consigne passe sur sa propre ligne */
#game.narrow #top { flex-wrap: wrap; row-gap: 6px; }
#game.narrow #hearts { flex: 1; font-size: 18px; }
#game.narrow #objective { order: 5; flex-basis: 100%; font-size: 14px; min-height: 0; padding: 4px 8px; }
#game.narrow #radio { top: 104px; }
body.phone #game.narrow #radio { top: 128px; }
#game.narrow #bossbar { top: 100px; }
body.phone #game.narrow #bossbar { top: 124px; }
#game.narrow #radio:not(.hidden) ~ #bossbar { top: 190px; }
body.phone #game.narrow #radio:not(.hidden) ~ #bossbar { top: 214px; }
#game.narrow #controls { transform: scale(.9); transform-origin: bottom right; }

/* message de mise à jour */
#toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; max-width: 90%;
  background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 14px; font-size: 15px; text-align: center; box-shadow: 0 4px 0 var(--ink); animation: pop .3s ease-out;
}

/* en motojet : on garde le sabre (et le Méga-Prout) */
#hud.speeder #btnAtk { display: flex !important; }
#hud.speeder #btnMega { right: 8px; bottom: 118px; width: 80px; height: 80px; }

/* l'atelier du sabre : Lucas en haut, les choix en bas (une rangée qui défile) */
#atelier { justify-content: space-between; padding: 10px 10px 14px; }
#atelier h2 { font-size: clamp(24px, 6vw, 38px); }
#atelier .panel {
  width: 100%; max-width: 640px; background: rgba(27,16,38,.88); border: 4px solid var(--ink); border-radius: 20px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 0 var(--ink); box-sizing: border-box;
}
#atelier input {
  font: inherit; font-size: 17px; text-align: center; padding: 6px 10px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff7e0; color: var(--ink); width: 100%; box-sizing: border-box;
}
#atelier .tabs { display: flex; gap: 5px; justify-content: center; }
#atelier .tab {
  font: inherit; font-size: 14px; color: #fff; padding: 5px 7px; border: 3px solid var(--ink); border-radius: 11px;
  background: #5a4a6e; text-shadow: 0 2px 0 var(--ink); white-space: nowrap; flex: 0 1 auto;
}
#atelier .tab.sel { background: var(--green2); }
#atelier .chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
#atelier .chip {
  flex: 0 0 92px; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 3px; border: 3px solid var(--ink); border-radius: 14px;
  background: #fff7e0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.05; min-height: 78px;
}
#atelier .chip .ico { font-size: 26px; line-height: 1; }
#atelier .chip small { font-size: 11px; color: #6e3b8a; }
#atelier .chip .dot { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--ink); }
#atelier .chip .dot.arc { background: conic-gradient(#ff3a3a, #ffe03a, #8fff5a, #4fb3ff, #b04cff, #ff3a3a) !important; }
#atelier .chip.sel { background: #c9ff9a; box-shadow: 0 0 0 3px var(--green); }
#atelier .chip.lock { background: #d8cfe6; }
#atelier .chip.lock .ico, #atelier .chip.lock span { opacity: .6; }
#atelier .row { display: flex; gap: 10px; justify-content: center; }
#atelier .row .btn { font-size: 17px; padding: 9px 14px; }
/* la visée de la tranchée */
.trenchSight { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trenchSight.hidden { display: none; }
.trenchSight .ring { width: 120px; height: 120px; border-radius: 50%; border: 6px solid #ff4a3a; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink); position: relative; animation: sightPulse .6s ease-in-out infinite alternate; }
.trenchSight .ring::before, .trenchSight .ring::after { content: ''; position: absolute; background: #ff4a3a; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.trenchSight .ring::before { width: 4px; height: 150px; }
.trenchSight .ring::after { width: 150px; height: 4px; }
.trenchSight b { font-size: 24px; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 6px var(--ink); }
.trenchSight.good .ring { border-color: #8fff5a; }
.trenchSight.good .ring::before, .trenchSight.good .ring::after { background: #8fff5a; }
.trenchSight.good b::after { content: ' — MAINTENANT !'; color: #8fff5a; }
@keyframes sightPulse { from { transform: scale(1); } to { transform: scale(1.08); } }

/* le duel à la Street Fighter */
#hud.versus #controls, #hud.versus #hearts, #hud.versus #objective, #hud.versus #bossbar { display: none !important; }
#hud.versus #radio { top: 124px !important; }
#vs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#vs::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(10,5,20,.55)); pointer-events: none; }
#vs.dark::before { background: rgba(10,5,20,.6); transition: background .2s; }
#vs .vsTop { position: absolute; top: 56px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 6px; }
#vs .vsSide { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
#vs .vsSide > div { flex: 1; min-width: 0; }
#vs .vsSide.R { text-align: right; }
#vs .vsSide img { width: 50px; height: 50px; border-radius: 12px; border: 3px solid var(--ink); background: #fff7e0; object-fit: cover; box-shadow: 0 3px 0 var(--ink); }
#vs .vsSide b { font-size: 16px; color: #fff; text-shadow: 0 2px 0 var(--ink); letter-spacing: 1px; }
#vs .vsBar { position: relative; height: 22px; border: 3px solid var(--ink); border-radius: 6px; background: #2a1020; overflow: hidden; box-shadow: 0 3px 0 var(--ink); transform: skewX(-12deg); }
#vs .vsBar u, #vs .vsBar i { position: absolute; left: 0; top: 0; bottom: 0; }
#vs .vsBar u { background: #ff4a3a; }
#vs .vsBar i { background: linear-gradient(180deg, #e8ffb8, #8fff5a 45%, #3fa32a); }
#vs .R .vsBar { transform: skewX(12deg) scaleX(-1); }
#vs .R .vsBar i { background: linear-gradient(180deg, #f3dcff, #c38bff 45%, #7b3fa0); }
#vs .vsGauge { position: relative; margin-top: 4px; height: 9px; width: 72%; border: 2px solid var(--ink); border-radius: 5px; background: #2a2232; overflow: hidden; }
#vs .R .vsGauge { margin-left: auto; transform: scaleX(-1); }
#vs .vsGauge i { display: block; height: 100%; background: linear-gradient(90deg, #6fd3ff, #8fff5a); }
#vs .vsGauge em { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); }
#vs .vsGauge.full { box-shadow: 0 0 10px #8fff5a; }
#vs .vsGauge.full i { background: linear-gradient(90deg, #ffd23f, #8fff5a, #ffd23f); animation: sightPulse .4s ease-in-out infinite alternate; }
#vs .pips { color: #ffd23f; font-size: 18px; text-shadow: 0 2px 0 var(--ink); }
#vs .vsTime { font-size: 34px; color: #ffd23f; min-width: 56px; text-align: center; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
  background: rgba(27,16,38,.85); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 6px; box-shadow: 0 3px 0 var(--ink); }
#vs .vsCombo { position: absolute; top: 34%; font-size: 22px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); animation: vsComboPop .3s ease-out; }
#vs .vsCombo b { font-size: 44px; color: #ffd23f; display: block; line-height: 1; }
#vs .vsCombo.L { left: 16px; } #vs .vsCombo.R { right: 16px; text-align: right; }
#vs .vsCombo.hidden { display: none; }
@keyframes vsComboPop { from { transform: scale(1.8) rotate(-8deg); } to { transform: scale(1) rotate(0); } }
#vs .vsSplash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2vw; background: linear-gradient(100deg, rgba(79,194,58,.85) 0 49.5%, #1b1026 49.5% 50.5%, rgba(123,63,160,.88) 50.5%); }
#vs .vsSplash.hidden { display: none; }
#vs .vsSplash img { height: min(46vh, 300px); filter: drop-shadow(0 8px 0 rgba(0,0,0,.4)); }
#vs .vsSplash img.a { animation: vsInL .5s ease-out; } #vs .vsSplash img.b { animation: vsInR .5s ease-out; }
#vs .vsSplash b { font-size: clamp(60px, 16vw, 130px); color: #ffd23f; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); animation: vsPop .5s .25s ease-out both; }
@keyframes vsInL { from { transform: translateX(-60vw); } } @keyframes vsInR { from { transform: translateX(60vw); } }
#vs .vsBanner { position: absolute; left: 0; right: 0; top: 33%; text-align: center; font-size: clamp(42px, 11vw, 92px); color: #ffd23f;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); animation: vsPop .35s ease-out; }
#vs .vsBanner.fight { color: #8fff5a; } #vs .vsBanner.ko { color: #ff4a3a; font-size: clamp(60px, 16vw, 130px); }
#vs .vsBanner.super { color: #8fff5a; text-shadow: 0 6px 0 var(--ink), 0 0 30px #8fff5a; }
#vs .vsBanner.small { font-size: clamp(26px, 6vw, 46px); top: 24%; color: #fff; }
#vs .vsBanner.hidden { display: none; }
@keyframes vsPop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#vs .vsPad { position: absolute; bottom: 14px; display: flex; gap: 10px; pointer-events: auto; align-items: flex-end; }
#vs .vsPad.left { left: 12px; }
#vs .vsPad.right { right: 12px; display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: "sp fo ki" "bl at at"; gap: 8px; align-items: end; }
#vs .vsPad button { position: relative; overflow: hidden; width: 68px; height: 68px; border-radius: 50%; border: 4px solid var(--ink); background: rgba(255,247,224,.92); font: inherit; font-size: 28px;
  color: var(--ink); box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: none; user-select: none; }
#vs .vsPad button b { font-size: 10px; position: relative; }
#vs .vsPad button span { position: relative; }
#vs .vsPad button.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
#vs .vsPad .sp { grid-area: sp; opacity: .55; } #vs .vsPad .fo { grid-area: fo; } #vs .vsPad .ki { grid-area: ki; background: linear-gradient(180deg, #ffe08a, #ffb23f); }
#vs .vsPad .bl { grid-area: bl; background: linear-gradient(180deg, #8fd3ff, #3a7fd0); }
#vs .vsPad .at { grid-area: at; justify-self: end; width: 92px; height: 92px; background: linear-gradient(180deg, #b8ff8a, #4fc23a); font-size: 34px; }
#vs .vsPad .sp.ready { opacity: 1; background: linear-gradient(180deg, #d8ffb8, #8fff5a); }
#vs .vsPad .sp.mega { animation: sightPulse .4s ease-in-out infinite alternate; background: linear-gradient(180deg, #fff2a0, #ffd23f); }
#vs .vsPad .fo { background: linear-gradient(180deg, #e8d8ff, #b38bff); }
#vs .vsPad .fo i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(27,16,38,.55); }
#vs .vsPad .fo.ready { box-shadow: 0 5px 0 var(--ink), 0 0 14px #c38bff; }
#vs .vsPad.left button { width: 66px; height: 66px; }
#game.narrow #vs .vsPad button { width: 56px; height: 56px; font-size: 22px; }
#game.narrow #vs .vsPad .at { width: 72px; height: 72px; }
#game.narrow #vs .vsPad { gap: 5px; }
#game.narrow #vs .vsPad.left { flex-direction: row; }
#game.narrow #vs .vsSide img { width: 36px; height: 36px; }
#game.narrow #vs .vsSide b { font-size: 11px; }
#game.narrow #vs .vsTime { font-size: 24px; min-width: 40px; }

#vs .vsSay { position: absolute; top: 118px; max-width: 42%; font-family: system-ui, sans-serif; font-weight: 800; font-size: 13px; line-height: 1.2;
  color: var(--ink); background: #fff7e0; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 8px; box-shadow: 0 3px 0 var(--ink); animation: vsComboPop .25s ease-out; }
#vs .vsSay.L { left: 10px; border-top-left-radius: 2px; } #vs .vsSay.R { right: 10px; border-top-right-radius: 2px; text-align: right; }
#vs .vsSay.hidden { display: none; }
#game.narrow #vs .vsSay { top: 104px; font-size: 11px; }
#vs .vsBanner.small, #vs .vsBanner.super { top: 19%; }
/* téléphone couché (écran large mais bas) : le titre et les boutons à droite, Lucas bien visible à gauche */
#game.wide #title { align-items: flex-end; justify-content: center; gap: 10px; padding: 14px 24px 14px 14px; }
#game.wide #title > div:nth-child(2) { display: none; }
#game.wide #title .logo { font-size: clamp(34px, 9vh, 56px); text-align: right; }
#game.wide #title .row { align-items: flex-end !important; }
#game.wide #title .btn.big { font-size: 24px; padding: 10px 28px; }
#game.wide #title .btn { font-size: 17px; padding: 8px 16px; }
#game.wide #atelier { flex-direction: row; align-items: center; justify-content: flex-end; padding: 8px 12px; }
#game.wide #atelier h2 { display: none; }
#game.wide #atelier .panel { max-width: 54%; }

/* ---- finitions (octobre 2026) ---- */
/* téléphones à encoche : rien sous la caméra ni sous les coins arrondis */
#hud { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
#controls { right: max(14px, env(safe-area-inset-right)); }
#vs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* téléphone couché : la radio plus petite ; en vol, elle descend en bas à gauche (les ennemis arrivent par le haut) */
#game.wide #radio { max-width: 440px; padding: 4px 10px 4px 4px; top: 56px; }
#game.wide #radio .face { width: 44px; height: 44px; }
#game.wide #radio p { font-size: 13px; }
#game.wide #hud.flight #radio { top: auto; bottom: 12px; max-width: 46%; }
#game.wide #hud.flight #radio:not(.hidden) ~ #bossbar { top: 60px; }
/* un léger vignettage de cinéma sur les bords */
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(10,4,20,.28) 100%); }
/* coup reçu : bords rouges */
#hurtFx { position: absolute; inset: 0; pointer-events: none; z-index: 11; opacity: 0; transition: opacity .45s; box-shadow: inset 0 0 70px 18px rgba(255,40,40,.75); }
#hurtFx.on { opacity: 1; transition: none; }
#hearts.low { animation: beat .8s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }
/* écran des missions : la prochaine mission à jouer */
.card { position: relative; }
.card.next { animation: nextPulse 1.2s ease-in-out infinite; border-color: #2f7a2a; }
.nextTag { position: absolute; top: -12px; right: -8px; background: var(--green2, #6bd23a); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 8px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
@keyframes nextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* fin de mission */
.starRule { font-size: 13px; opacity: .85; }
.unlock { background: #fff7e0; color: var(--ink); border: 4px solid var(--ink); border-radius: 16px; padding: 8px 12px; font-family: system-ui, sans-serif; font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; box-shadow: 0 4px 0 var(--ink); animation: pop .35s ease-out; }
.btn.small { font-size: 15px; padding: 6px 12px; }
/* téléphone couché : les missions sur une seule ligne qui défile, toutes visibles d'un coup d'œil */
#game.wide .screen h2 { font-size: clamp(24px, 7vh, 34px); }
#game.wide .vueBtn { font-size: 14px; padding: 5px 12px; }
#game.wide .cards { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; padding: 14px 8px 8px; gap: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
#game.wide .card { flex: none; width: 168px; padding: 8px; gap: 3px; scroll-snap-align: center; }
#game.wide .card img { height: 72px; }
#game.wide .card b { font-size: 15px; }
#game.wide .card p { font-size: 11px; }
#game.wide .card .stars { font-size: 16px; }
#game.wide .cards { overflow-y: hidden; flex: none; }
#game.wide .card p { display: none; }
#game.wide .card b { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
#game.wide .screen { gap: 8px; padding: 10px 16px; }
/* téléphone couché : fins de mission compactes, les boutons toujours visibles */
#game.wide .bigstars { font-size: 34px; letter-spacing: 3px; }
#game.wide .screen .portrait { height: 74px; width: auto; }
#game.wide .starRule { display: none; }
#game.wide .unlock { padding: 4px 10px; font-size: 13px; }
#game.wide .screen .btn { font-size: 17px; padding: 8px 16px; }