/* ============================================================
   SIMBILIKI — style « ère console 128 bits » (original)
   chrome, bleu profond, italiques tech, boutons gel brillants
   PC : écran plein fenêtre · Portrait : console · Paysage : manette transparente
   ============================================================ */
:root {
  --bg: #04060e;
  --text: #eef4ff;
  --muted: #8ea3c4;
  --line: rgba(120, 180, 255, .28);
  --blue: #2f7bff;
  --cyan: #49d3ff;
  --orange: #ff8a2f;
  --gold: #ffd25a;
  --green: #5dffa0;
  --danger: #ff4d6d;
  --chrome: linear-gradient(180deg, #ffffff 0%, #dbe6f5 42%, #7d93b5 50%, #c9d7ec 62%, #ffffff 100%);
  --gel-blue: linear-gradient(180deg, #8cc8ff 0%, #3a86ff 46%, #1652d6 54%, #2f78ff 100%);
  --gel-orange: linear-gradient(180deg, #ffd08a 0%, #ff9a3c 46%, #e2600f 54%, #ff8a2f 100%);
  --gel-dark: linear-gradient(180deg, #4a5a78 0%, #24304a 46%, #141c30 54%, #253352 100%);
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Exo 2", "Rubik", system-ui, sans-serif;
  --aspect: 1.7647;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(47, 123, 255, .35), transparent 65%),
    radial-gradient(700px 500px at 100% 110%, rgba(73, 211, 255, .14), transparent 60%),
    linear-gradient(rgba(73, 211, 255, .05) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(73, 211, 255, .05) 1px, transparent 1px) 0 0 / 42px 100%,
    var(--bg);
}

/* icônes SVG */
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.ic.rank { height: 1em; vertical-align: -.12em; }
.h-ic { width: .95em; height: .95em; vertical-align: -.1em; }

#app {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* ---------- Écran de jeu ---------- */
#stage {
  position: relative;
  container-type: inline-size;
  width: min(calc(100vw - 48px), calc((100dvh - 110px) * var(--aspect)));
  aspect-ratio: var(--aspect);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(160, 200, 255, .35),
    0 0 0 5px #0a1020,
    0 0 0 6px rgba(160, 200, 255, .18),
    0 30px 80px rgba(0, 0, 0, .7),
    0 0 90px rgba(47, 123, 255, .25);
}
canvas#game { width: 100%; height: 100%; display: block; }
#stage::after {           /* fines lignes de balayage */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.bezel-top, .console-brand { display: none; }
#controls { display: none; }

/* ---------- Aide clavier (PC) ---------- */
#help { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
#help span { display: inline-flex; align-items: center; gap: 4px; }
kbd {
  font: italic 700 11px var(--display);
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--gel-dark);
  border: 1px solid rgba(160, 200, 255, .35);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1cqw;
  padding: 1.2cqw 1.6cqw;
  font-size: clamp(8px, 1.45cqw, 17px);
  pointer-events: none;
  z-index: 2;
}
.hud-left, .hud-right { display: flex; gap: .55em; align-items: center; flex-wrap: wrap; }
.hud-right { justify-content: flex-end; }
.hud-center { position: absolute; left: 50%; transform: translateX(-50%); top: 1.2cqw; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .8em;
  transform: skewX(-12deg);
  background: linear-gradient(180deg, rgba(30, 50, 95, .82), rgba(6, 10, 24, .82));
  border: 1px solid rgba(140, 200, 255, .45);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px rgba(0, 0, 0, .35);
  font: italic 800 1em var(--display);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip > * { transform: skewX(12deg); }
.hero-chip { padding: .2em .9em .2em .25em; }
.avatar {
  --hero: #c8462f;
  width: 2em; height: 2em;
  display: grid; place-items: center;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), var(--hero) 55%);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.avatar .ic { width: 1.35em; height: 1.35em; }
.hero-txt { display: flex; flex-direction: column; line-height: 1.05; }
.hero-txt small { font: 500 .7em var(--font); color: var(--muted); }
.hearts { gap: .25em; }
.heart {
  width: 1.05em; height: 1.05em; display: inline-block;
  background: rgba(255, 255, 255, .2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.heart.on { background: linear-gradient(#ff8fa6, #ff2e55); filter: drop-shadow(0 0 4px rgba(255, 60, 100, .8)); }
.ico { width: 1em; height: 1em; display: inline-block; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-time { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9 2h6'/%3E%3C/svg%3E"); color: var(--cyan); }
.ico-ammo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 4v14H8V7z'/%3E%3C/svg%3E"); color: var(--gold); }
.ico-skull { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9 9 0 0 0-5 16.5V22h3v-2h4v2h3v-3.5A9 9 0 0 0 12 2zm-3.5 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); color: #ff9d6b; }
#hud-ammo .ic { width: 1.3em; height: 1.3em; vertical-align: -.25em; }
.timer { font-size: 1.3em; padding: .25em 1em; }
.timer b { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timer.low { border-color: rgba(255, 77, 109, .9); animation: pulse .8s ease-in-out infinite; }
.timer.low b { background: none; color: #ff8aa0; }
#hud-ammo-wrap.empty { border-color: rgba(255, 77, 109, .9); color: #ff8aa0; }
.score b { color: var(--gold); text-shadow: 0 0 8px rgba(255, 210, 90, .5); }
.frags { gap: .3em; }
.frag { width: 1em; height: 1em; display: inline-block; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(255, 255, 255, .18); }
.frag.on.f0 { background: #ff7a3d; }
.frag.on.f1 { background: #5ad1ff; }
.frag.on.f2 { background: #b6ff5a; }

#bossbar {
  position: absolute; bottom: 3cqw; left: 50%; transform: translateX(-50%);
  width: 46%; text-align: center;
  font: italic 800 clamp(9px, 1.4cqw, 16px) var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none; text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  z-index: 2;
}
#bossbar .bar { margin-top: .4em; height: .95em; padding: 2px; transform: skewX(-20deg); background: rgba(5, 8, 20, .8); border: 1px solid rgba(160, 200, 255, .5); }
#boss-hp { height: 100%; width: 100%; background: linear-gradient(180deg, #ff9db8, #ff3d6e 50%, #c4123f 52%, #ff4d77); box-shadow: 0 0 12px rgba(255, 61, 110, .7); transition: width .15s; }

#toast {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  z-index: 60; max-width: 80%;
  padding: .55em 1.4em;
  background: linear-gradient(180deg, rgba(30, 50, 95, .95), rgba(6, 10, 24, .95));
  border: 1px solid rgba(140, 200, 255, .5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
  font: italic 700 clamp(11px, 1.5cqw, 16px) var(--display);
  text-align: center; pointer-events: none;
  animation: rise .25s ease-out;
}

.hidden { display: none !important; }

/* ============================================================
   Écrans (menus)
   ============================================================ */
#overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 3cqw;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 40%, rgba(4, 8, 22, .3), rgba(2, 4, 12, .78));
}
#overlay:empty { display: none; }

.screen {
  --cut: 18px;
  position: relative;
  max-width: 100%; max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2.1em 2.6em;
  text-align: center;
  font-size: clamp(11px, 1.6cqw, 17px);
  line-height: 1.5;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 90px),
    linear-gradient(180deg, rgba(14, 26, 58, .96), rgba(4, 7, 18, .97));
  box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .35), inset 0 2px 0 rgba(255, 255, 255, .12);
  animation: rise .28s cubic-bezier(.2, .9, .3, 1.15);
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 200, 255, .35) transparent;
}
.screen::before {             /* barre lumineuse en haut */
  content: ""; position: absolute; left: var(--cut); right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 40%, transparent);
  box-shadow: 0 0 12px var(--cyan);
}
.screen.wide { width: 100%; }
.screen h1 {
  font: italic 900 3.5em/1 var(--display);
  letter-spacing: .03em;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #0b2a6b) drop-shadow(0 0 22px rgba(73, 160, 255, .55));
  margin-bottom: .2em;
}
.screen h2 {
  font: italic 800 1.7em/1.15 var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #0b2a6b);
  margin-bottom: .5em;
}
.screen h2 .ic { stroke: #cfe0ff; }
.screen h3 { font: italic 800 1em var(--display); color: var(--cyan); margin: 1em 0 .45em; text-transform: uppercase; letter-spacing: .12em; }
.screen p { margin: .5em 0; }
.screen .sub { color: var(--muted); }
.screen .rules { text-align: left; margin: .4em auto; display: inline-block; list-style: none; }
.screen .rules li { margin: .3em 0; padding: .45em .9em; background: linear-gradient(90deg, rgba(73, 160, 255, .12), transparent); border-left: 3px solid var(--blue); }
.screen .rules .ic { color: var(--cyan); margin-right: .3em; }
.danger { color: var(--danger); }
.good { color: var(--green); }
.gold { color: var(--gold); }
.hearts-inline .ic { width: 1em; height: 1em; }

/* Boutons « gel » inclinés */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  margin: .7em .35em 0;
  padding: .7em 1.7em;
  font: italic 800 1em var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  background: var(--gel-blue);
  border: 1px solid #a9d6ff;
  border-radius: 4px;
  transform: skewX(-12deg);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 6px 18px rgba(47, 123, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: filter .12s, box-shadow .12s, transform .12s;
}
.btn > * { transform: skewX(12deg); }
.btn:hover, .btn:focus-visible { filter: brightness(1.15); outline: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 0 0 4px rgba(73, 211, 255, .7), 0 0 26px rgba(73, 211, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn:active { transform: skewX(-12deg) translateY(2px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.big { font-size: 1.3em; padding: .75em 2.8em; background: var(--gel-orange); border-color: #ffd9a8; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 8px 26px rgba(255, 138, 47, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.alt { background: var(--gel-dark); border-color: rgba(160, 200, 255, .5); box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.small { font-size: .82em; padding: .5em 1.15em; }
.btn.danger-btn { background: linear-gradient(180deg, #ffa0b0 0%, #ff4d6d 46%, #c4142f 54%, #ff4d6d 100%); border-color: #ffc0cb; }
.btn.kindae { background: linear-gradient(180deg, #ffffff, #dfe6ff); color: #1f1b2e; text-shadow: none; border-color: #fff; }
.kindae-logo { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #4f46e5; color: #fff; font-size: .85em; font-style: normal; line-height: 1; }
.menu-col { display: flex; flex-direction: column; align-items: center; }
.menu-col .btn { min-width: 60%; }
.hint { color: var(--muted); font-size: .8em; margin-top: .8em; }
body.touch .kbd-only { display: none; }

/* Menu principal */
.title-screen { padding: 2em 2.4em 1.6em; min-width: min(580px, 100%); }
.tagline { display: inline-flex; gap: .5em; flex-wrap: wrap; justify-content: center; margin: .1em 0 1.1em; }
.tagline span { font: italic 700 .74em var(--display); letter-spacing: .16em; text-transform: uppercase; padding: .25em .9em; color: var(--cyan); border: 1px solid rgba(73, 211, 255, .45); background: rgba(73, 211, 255, .08); transform: skewX(-12deg); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: .7em; margin-top: 1.2em; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: .45em;
  padding: .95em .6em;
  font: italic 800 .9em var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(180deg, rgba(60, 90, 150, .45), rgba(10, 16, 36, .7));
  border: 1px solid rgba(140, 200, 255, .3);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile .ic { width: 1.9em; height: 1.9em; color: #cfe0ff; filter: drop-shadow(0 0 6px rgba(73, 160, 255, .6)); }
.tile:hover, .tile:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(73, 211, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .2); transform: translateY(-2px); outline: none; }

.account-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em 1em;
  margin-top: 1.2em; padding: .7em 1em;
  background: rgba(73, 160, 255, .08);
  border: 1px solid rgba(140, 200, 255, .25);
  border-left: 3px solid var(--cyan);
  font-size: .9em;
}
.account-bar br { display: none; }
.account-bar .btn { margin: 0; }

/* Carte */
.map { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin: 1em 0; }
.village {
  position: relative; padding: 1em .8em;
  background: linear-gradient(180deg, rgba(60, 90, 150, .35), rgba(8, 12, 28, .7));
  border: 1px solid rgba(140, 200, 255, .25);
  overflow: hidden;
}
.village .icon .ic { width: 2.4em; height: 2.4em; color: #cfe0ff; filter: drop-shadow(0 0 8px rgba(73, 160, 255, .6)); }
.village.current { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 26px rgba(255, 138, 47, .35); }
.village.current .icon .ic { color: #ffd08a; }
.village.done { border-color: rgba(93, 255, 160, .6); }
.village.locked { opacity: .45; filter: saturate(.4); }
.village .vname { font: italic 800 1em var(--display); text-transform: uppercase; letter-spacing: .03em; margin: .2em 0; }
.village .state { font-size: .82em; margin-top: .45em; color: var(--muted); }
.stages { display: flex; gap: 5px; justify-content: center; margin-top: .5em; }
.stages span { width: 1.9em; height: 1.9em; display: grid; place-items: center; font: italic 800 .75em var(--display); background: rgba(255, 255, 255, .06); border: 1px solid rgba(140, 200, 255, .3); transform: skewX(-12deg); }
.stages span .ic { width: 1.2em; height: 1.2em; }
.stages span.ok { background: var(--green); color: #052a14; border-color: transparent; }
.stages span.cur { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 10px rgba(255, 138, 47, .6); }

/* Formulaires / onglets */
.form { display: flex; flex-direction: column; gap: .5em; margin: .6em auto; width: min(100%, 22em); text-align: left; }
.form label { font-size: .85em; color: var(--muted); }
.form input, .form select, .settings select, #lb-date {
  font: 500 max(16px, 1em) var(--font);
  padding: .5em .8em;
  color: var(--text);
  background: rgba(4, 8, 22, .8);
  border: 1px solid rgba(140, 200, 255, .35);
  border-radius: 3px;
  outline: none;
}
.form select option, .settings select option { background: #0b1430; }
.form input:focus, .form select:focus, .settings select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(73, 211, 255, .3); }
.form .err { color: var(--danger); min-height: 1.2em; font-size: .9em; }
.tabs { display: inline-flex; gap: 3px; padding: 3px; margin: .2em 0 .8em; background: rgba(4, 8, 22, .8); border: 1px solid rgba(140, 200, 255, .3); flex-wrap: wrap; justify-content: center; }
.tabs .btn { margin: 0; box-shadow: none; }
.tabs .btn:not(.on) { background: transparent; border-color: transparent; color: var(--muted); }
.tabs .btn:not(.on):hover { color: #fff; background: rgba(73, 160, 255, .15); }

/* Paramètres */
.settings { display: grid; grid-template-columns: 1fr auto; gap: .9em 1.6em; align-items: center; text-align: left; margin: .8em auto; width: min(100%, 27em); }
.settings input[type=range] { width: 9em; accent-color: var(--cyan); }
.switch { display: inline-flex; gap: .7em; align-items: center; cursor: pointer; font-weight: 600; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 2.7em; height: 1.4em; position: relative; cursor: pointer;
  background: rgba(4, 8, 22, .9); border: 1px solid rgba(140, 200, 255, .4);
  transform: skewX(-12deg); transition: background .2s;
}
.switch input::after { content: ""; position: absolute; top: .15em; left: .18em; width: 1.05em; height: .95em; background: var(--chrome); transition: transform .2s; }
.switch input:checked { background: var(--gel-blue); }
.switch input:checked::after { transform: translateX(1.25em); }

/* Classement */
table.board { width: 100%; border-collapse: separate; border-spacing: 0 3px; margin: .4em 0; font-size: .95em; }
table.board th { color: var(--cyan); font: italic 800 .72em var(--display); text-transform: uppercase; letter-spacing: .12em; padding: .3em .6em; }
table.board td { padding: .55em .6em; background: linear-gradient(90deg, rgba(60, 90, 150, .3), rgba(10, 16, 36, .5)); font-variant-numeric: tabular-nums; }
table.board tr.me td { background: linear-gradient(90deg, rgba(255, 138, 47, .35), rgba(255, 138, 47, .08)); }
table.board td.pos { width: 2.8em; text-align: center; font: italic 900 1.05em var(--display); }
table.board td.pos .ic { width: 1.3em; height: 1.3em; }
table.board td.num { text-align: right; }
table.board td.name { text-align: left; font-weight: 600; }
.pos1 { color: var(--gold); }
.pos2 { color: #dfe7f5; }
.pos3 { color: #e0955a; }
.grade { color: var(--gold); white-space: nowrap; font-weight: 600; }
.me-card { padding: .8em 1em; margin: .5em 0; background: linear-gradient(90deg, rgba(255, 138, 47, .2), rgba(47, 123, 255, .15)); border: 1px solid rgba(140, 200, 255, .3); border-left: 3px solid var(--orange); }
.progress { height: .6em; background: rgba(4, 8, 22, .9); border: 1px solid rgba(140, 200, 255, .3); margin: .5em 0 .3em; transform: skewX(-20deg); }
.progress div { height: 100%; background: var(--gel-orange); }
.grades-list { display: flex; flex-wrap: wrap; gap: .35em; justify-content: center; font-size: .78em; color: var(--muted); margin-top: .5em; }
.grades-list > span { padding: .2em .7em; background: rgba(73, 160, 255, .1); border: 1px solid rgba(140, 200, 255, .2); }
.score-lines { display: inline-grid; grid-template-columns: auto auto; gap: .3em 2em; text-align: left; margin: .6em 0; padding: .8em 1.2em; background: rgba(4, 8, 22, .7); border: 1px solid rgba(140, 200, 255, .25); }
.score-lines .num { text-align: right; font: italic 800 1em var(--display); font-variant-numeric: tabular-nums; }

/* ============================================================
   Manette tactile — éléments communs
   ============================================================ */
.dpad { position: relative; width: var(--pad); height: calc(var(--pad) * .5); display: flex; align-items: stretch; touch-action: none; }
.dpad .arm { position: relative; flex: 1; }
.dpad .hub { flex: none; width: 24%; }
.dpad .arm::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border: 9px solid transparent; }
.dpad .left::after { border-right-color: currentColor; transform: translateX(-5px); }
.dpad .right::after { border-left-color: currentColor; transform: translateX(5px); }

.actions { position: relative; width: calc(var(--pad) * 1.02); height: calc(var(--pad) * .82); touch-action: none; }
.act {
  position: absolute;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  font: italic 800 13px var(--display); letter-spacing: .06em; color: #fff;
  touch-action: none; cursor: pointer;
  transition: transform .06s, filter .06s;
}
.act .lbl, .pill .lbl { pointer-events: none; }
.act.fire { width: 44%; aspect-ratio: 1; left: 2%; bottom: 0; }
.act.jump { width: 44%; aspect-ratio: 1; right: 2%; top: 0; }
.act.active { transform: translateY(3px); filter: brightness(1.2); }

.meta { display: flex; gap: 18px; }
.pill { position: relative; border: 0; touch-action: none; cursor: pointer; }

/* ============================================================
   Mobile PORTRAIT : console de poche (4 coloris)
   ============================================================ */
#device { --body: #1c1c20; --body-hi: #2a2a30; --frame: #2b2b31; --frame-line: #3a3a42; --btn: #121215; --btn-hi: #34343c; --label: #e2483d; --ink: #8b8b95; }
#device[data-skin="rouge"]  { --body: #c4202c; --body-hi: #dc3440; --frame: #1b1b1f; --frame-line: #2c2c33; --btn: #161619; --btn-hi: #3a3a42; --label: #1b1b1f; --ink: #6e0f16; }
#device[data-skin="argent"] { --body: #c7c8cc; --body-hi: #dcdde1; --frame: #9a9ba3; --frame-line: #b1b2b9; --btn: #26262b; --btn-hi: #4a4a52; --label: #26262b; --ink: #7d7e86; }
#device[data-skin="bleu"]   { --body: #1a2c78; --body-hi: #2a3f98; --frame: #0b1438; --frame-line: #1c2a62; --btn: #0a1028; --btn-hi: #26346a; --label: #8cc8ff; --ink: #4f63b0; }

body.touch.portrait #app { justify-content: stretch; gap: 0; background: var(--bg); }
body.touch.portrait #help { display: none; }
body.touch.portrait #device {
  --pad: clamp(128px, 40vw, 190px);
  flex: 1;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(130% 70% at 30% 0%, var(--body-hi), transparent 70%),
    var(--body);
}
body.touch.portrait #bezel {
  position: relative;
  padding: 12px 14px 38px;
  border-radius: 14px 14px 14px 14px;
  background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame-line), 0 1px 0 rgba(255, 255, 255, .08);
}
body.touch.portrait .bezel-top { display: flex; align-items: center; gap: 6px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%) rotate(-90deg) translateY(-50%); transform-origin: left center; display: none; }
body.touch.portrait #stage { width: 100%; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
body.touch.portrait #stage::after { opacity: .6; }
body.touch.portrait .console-brand {
  display: flex; align-items: center; gap: 7px;
  margin: -30px 0 0 22px;
  height: 22px;
  position: relative; z-index: 1;
  color: #e8e8ee;
}
body.touch.portrait #device[data-skin="argent"] .console-brand { color: #2a2a30; }
body.touch.portrait .console-brand b { font: italic 800 14px var(--display); letter-spacing: .06em; }
body.touch.portrait .console-brand span { font: 700 8px var(--font); letter-spacing: .08em; padding: 1px 5px; border-radius: 2px; background: #e8e8ee; color: #1a1a1f; }
body.touch.portrait #device[data-skin="argent"] .console-brand span { background: #2a2a30; color: #e8e8ee; }

body.touch.portrait #controls {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "dpad actions" "meta meta" ". speaker";
  align-content: space-evenly;
  align-items: center;
  justify-items: center;
  gap: 8px 0;
  padding: 18px 0 0;
  min-height: 0;
}
body.touch.portrait .dpad { grid-area: dpad; color: var(--ink); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
body.touch.portrait .dpad .arm, body.touch.portrait .dpad .hub {
  background: linear-gradient(180deg, var(--btn-hi), var(--btn) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.touch.portrait .dpad .left { border-radius: 8px 0 0 8px; }
body.touch.portrait .dpad .right { border-radius: 0 8px 8px 0; }
body.touch.portrait .dpad .hub { position: relative; }
body.touch.portrait .dpad .hub::after { content: ""; position: absolute; inset: 26% 18%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)); }
body.touch.portrait .dpad .arm::after { border-width: 10px; opacity: .8; }
body.touch.portrait .dpad.l .left, body.touch.portrait .dpad.r .right { background: linear-gradient(180deg, var(--btn), var(--btn-hi)); }
body.touch.portrait .dpad.l, body.touch.portrait .dpad.r { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }

body.touch.portrait .actions { grid-area: actions; }
body.touch.portrait .act {
  background: radial-gradient(circle at 40% 30%, var(--btn-hi), var(--btn) 65%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
}
body.touch.portrait .act .lbl { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--label); white-space: nowrap; }
body.touch.portrait .act.active { box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

body.touch.portrait .meta { grid-area: meta; gap: 22px; padding-bottom: 14px; }
body.touch.portrait .pill {
  width: 54px; height: 15px; border-radius: 999px;
  background: linear-gradient(180deg, var(--btn-hi), var(--btn));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.touch.portrait .pill .lbl { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font: italic 800 11px var(--display); letter-spacing: .06em; color: var(--label); }
body.touch.portrait .pill.active { transform: translateY(2px); box-shadow: none; }
body.touch.portrait .pill[data-toggle].active { background: linear-gradient(180deg, #7dffb5, #1fb866); }

body.touch.portrait .speaker {
  grid-area: speaker;
  justify-self: end;
  margin-right: 8px;
  width: 64px; height: 44px;
  transform: rotate(-28deg);
  background: radial-gradient(circle, rgba(0, 0, 0, .55) 0 2.2px, transparent 2.6px) 0 0 / 9px 9px;
  -webkit-mask: linear-gradient(135deg, transparent 18%, #000 40%);
  mask: linear-gradient(135deg, transparent 18%, #000 40%);
}

/* menus en portrait : plein écran au-dessus de la console */
body.touch.portrait #overlay {
  position: fixed;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    rgba(3, 6, 16, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.touch.portrait .screen { font-size: 15px; padding: 1.6em 1.3em; width: 100%; }
body.touch.portrait .screen h1 { font-size: 2.6em; }
body.touch.portrait .map { grid-template-columns: 1fr; }
body.touch.portrait #hud { font-size: clamp(7px, 2.2cqw, 12px); padding: 1.4cqw; }
body.touch.portrait .hero-txt small { display: none; }
body.touch.portrait #toast { position: fixed; bottom: 34%; font-size: 14px; }

/* ============================================================
   Mobile PAYSAGE : plein écran + manette transparente
   ============================================================ */
body.touch.landscape #app { gap: 0; background: #000; }
body.touch.landscape #help { display: none; }
body.touch.landscape #device { --pad: clamp(110px, 33vh, 168px); }
body.touch.landscape #stage { width: min(100vw, calc(100dvh * var(--aspect))); border-radius: 0; box-shadow: none; }
body.touch.landscape #controls { display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none; }
body.touch.landscape #controls > * { pointer-events: auto; }
body.touch.landscape .dpad { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); opacity: .6; color: #fff; gap: 6px; }
body.touch.landscape .dpad .hub { display: none; }
body.touch.landscape .dpad .arm { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.touch.landscape .dpad .left { border-radius: 999px 10px 10px 999px; }
body.touch.landscape .dpad .right { border-radius: 10px 999px 999px 10px; }
body.touch.landscape .dpad.l .left, body.touch.landscape .dpad.r .right { background: rgba(73, 160, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
body.touch.landscape .actions { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); opacity: .62; }
body.touch.landscape .act { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.touch.landscape .act.jump { box-shadow: inset 0 0 0 2px rgba(255, 170, 110, .95); }
body.touch.landscape .act.fire { box-shadow: inset 0 0 0 2px rgba(120, 200, 255, .95); }
body.touch.landscape .act.active { background: rgba(255, 255, 255, .4); transform: scale(.94); }
body.touch.landscape .meta { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); opacity: .6; gap: 10px; }
body.touch.landscape .pill { padding: 6px 13px; border-radius: 999px; font: italic 800 10px var(--display); letter-spacing: .12em; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
body.touch.landscape .pill.active { background: rgba(255, 255, 255, .4); }
body.touch.landscape .pill[data-toggle].active { background: rgba(47, 214, 123, .65); }
body.touch.landscape .speaker { display: none; }
body.touch.landscape.menu-open #controls { display: none; }
body.touch.landscape #hud { padding-left: max(1.6cqw, env(safe-area-inset-left)); padding-right: max(1.6cqw, env(safe-area-inset-right)); }

/* PC : petits écrans */
@media (max-height: 520px) { body:not(.touch) #help { display: none; } }

@keyframes pulse { 50% { opacity: .45; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }