/* Astropants : interface. Direction artistique « Le vide-poches » (2026-10-11).
   1. L'idée : tout ce qui traîne dans la boîte à gants d'un père de famille, posé sur l'espace.
   2. Trois matières, et chacune a un sens. Le PAPIER (ticket de caisse, liste de courses) porte la mission : objectif, atelier, ticket de fin.
   3. L'AUTOCOLLANT de carrosserie (découpe blanche, parfois collé de travers) porte la bande : logo, boutons, pastilles, ressources, invites, panneaux.
   4. Le TÉLÉPHONE (verre sombre, écran fêlé) est le seul canal de Chérie : son horloge et ses SMS.
   5. Palette : encre nuit #171a33, papier #f3f5ef, jaune « Papas à bord » #ffd21e (le seul accent), rouge tong #d4351f (danger, Chérie), vert #2fc98e (prêt, fait).
   6. Typo : Bowlby One pour les titres et les gros chiffres (lettrage d'autocollant), Rubik pour lire (400 à 800, chiffres tabulaires).
   7. Espacement sur une base de 4 px ; la taille suit la hauteur de la fenêtre (16 px à 720, 20 px à 1080), donc 45 rem de haut partout.
   8. Formes : papier à coins de 3 px et bas dentelé, autocollants et boutons à 12 px, pastilles en pilule. Ombres douces et décalées, jamais de halo.
   9. Mouvement : court et joueur (150 à 400 ms, sortie forte, sans rebond : ce qu'on colle arrive plus gros et se pose net). Rien sur ce qui s'ouvre au clavier (Tab, Échap, E).
   10. Surfaces opaques partout : lisible sur la mine claire comme dans la nuit de Doudou, et aucun flou à repeindre au-dessus de la 3D.
   La structure vit dans js/ui.js, repérée par des attributs data- (data-screen, data-act, data-h, data-l, data-e) ; ici on ne cible que des classes. */

:root {
  --ink: #171a33;
  --ink-2: #4d5270;
  --paper: #f3f5ef;
  --paper-2: #e3e7dd;
  --paper-line: #b9bfb2;
  --white: #fff;
  --jaune: #ffd21e;
  --jaune-lip: #e0a900;
  --rouge: #d4351f;
  --rouge-ink: #b3260f;
  --vert: #2fc98e;
  --vert-ink: #0a6f4d;
  --nuit: #101326;
  --nuit-2: #2c3260;
  --nuit-text: #f3f5ef;
  --nuit-muted: #aeb4d0;

  --r-paper: 3px;
  --r: 0.75rem;
  --pill: 999px;
  --edge: 0.9rem;                       /* marge du HUD aux bords de l'écran */
  --shadow-sticker: 0 1px 1px rgb(8 10 28 / 0.28), 0 0.45rem 0.9rem -0.3rem rgb(8 10 28 / 0.5);
  --shadow-paper: drop-shadow(0 0.15rem 0.2rem rgb(6 8 24 / 0.25)) drop-shadow(0 1rem 1.4rem rgb(6 8 24 / 0.45));
  --lip: inset 0 -0.22rem 0 rgb(23 26 51 / 0.16);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Bowlby One", "Arial Black", Impact, system-ui, sans-serif;
  --text: "Rubik", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5C5.5 16.6 1 12.6 1 7.4 1 3.9 3.7 1.2 7 1.2c2 0 3.8 1 5 2.6 1.2-1.6 3-2.6 5-2.6 3.3 0 6 2.7 6 6.2 0 5.2-4.5 9.2-11 14.1z'/%3E%3C/svg%3E");
  --warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 23 21.5H1z M10.8 9h2.4v6.2h-2.4z M10.8 16.8h2.4v2.4h-2.4z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
/* La taille de base suit la hauteur de la fenêtre. Elle se pose sur html seul : un « font » en rem ici la ramènerait à 16 px. */
html { font-size: clamp(14px, calc(8px + 1.111vh), 22px); }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--nuit); color: var(--nuit-text); }
body { font: 400 1rem/1.45 var(--text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dt, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ui { position: fixed; inset: 0; pointer-events: none; }
.ui > * { pointer-events: auto; }
.noscript { position: fixed; inset: auto 1rem 1rem; padding: 1rem; background: var(--paper); color: var(--ink); border-radius: var(--r-paper); }

/* ---------- Matière 1 : le papier. Coins à peine arrondis, bas dentelé comme un ticket qu'on arrache. */
.paper { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-paper) var(--r-paper) 0 0; padding: 1.25rem 1.4rem; filter: var(--shadow-paper); }
.paper::after, .slip::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: calc(0.45rem + 1px);
  background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 0 0 / 0.9rem 100% repeat-x;
}
.h2 { font: 400 1.5rem/1.1 var(--display); letter-spacing: 0.01em; text-wrap: balance; }
.h3 { font: 700 0.95rem/1.25 var(--text); }
.lead { font-weight: 500; text-wrap: pretty; }
.hint, .status { font-size: 0.86rem; color: var(--ink-2); text-wrap: pretty; }
.stack { display: grid; gap: 0.7rem; }
.row { display: flex; gap: 0.5rem; align-items: end; }
.row > .field { flex: 1; min-width: 0; }
.rule { border: 0; border-top: 2px dashed var(--ink); margin: 0; }

/* ---------- Champs : l'étiquette au-dessus, jamais dans le champ. */
.field { display: grid; gap: 0.3rem; }
.field > span { font-size: 0.86rem; font-weight: 700; }
.input {
  width: 100%; min-height: 2.75rem; padding: 0.45rem 0.75rem; border: 2px solid var(--ink); border-radius: 0.5rem;
  background: var(--white); color: var(--ink); font: 600 1.05rem/1.2 var(--text);
  transition: box-shadow 150ms var(--ease-out);
}
.input::placeholder { color: #666b84; font-weight: 500; opacity: 1; }
.input:focus-visible { outline: none; box-shadow: 0 0 0 0.19rem var(--jaune), 0 0 0 0.3rem var(--ink); }
.input--code { font: 400 1.45rem/1 var(--display); letter-spacing: 0.3em; text-indent: 0.3em; text-align: center; text-transform: uppercase; }
.input--code::placeholder { color: #9a9eb2; }
.input--link { min-height: 2.5rem; font-size: 0.86rem; font-weight: 500; color: var(--ink-2); background: var(--paper-2); border-style: dashed; text-overflow: ellipsis; }

/* ---------- Boutons : des touches en relief, texte sur une ligne, jamais serré. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.55rem 1.15rem 0.7rem; border: 2px solid var(--ink); border-radius: var(--r); cursor: pointer;
  background: var(--white); color: var(--ink); font: 700 1rem/1.2 var(--text); white-space: nowrap; box-shadow: var(--lip);
  transition: transform 150ms var(--ease-out), background-color 150ms ease, box-shadow 150ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: inset 0 -0.08rem 0 rgb(23 26 51 / 0.16); }
.btn:focus-visible { outline: 0.19rem solid var(--ink); outline-offset: 0.16rem; }
.btn--primary { background: var(--jaune); font: 400 1.12rem/1.2 var(--display); letter-spacing: 0.015em; box-shadow: inset 0 -0.26rem 0 var(--jaune-lip); }
.btn--primary:active:not(:disabled) { box-shadow: inset 0 -0.1rem 0 var(--jaune-lip); }
.btn--quiet { min-height: 2.25rem; padding: 0.3rem 0.8rem; background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.btn--quiet.is-armed { background: var(--rouge); border-color: var(--ink); color: var(--white); text-decoration: none; transition: none; }   /* d'un coup : un fondu laisserait un instant du blanc sur du clair */
.btn--danger { background: var(--rouge); color: var(--white); }
.btn--icon { padding: 0.55rem 0.7rem 0.7rem; }
.btn--icon .ico { width: 1.35rem; height: 1.35rem; }
.btn:disabled { cursor: not-allowed; background: var(--paper-2); color: #666b84; border-color: #8d92a6; box-shadow: none; }
.btn.is-done { background: var(--vert); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: #fff8d6; }
  .btn--primary:hover:not(:disabled) { background: #ffdd52; }
  .btn--quiet:hover:not(:disabled):not(.is-armed) { background: var(--paper-2); color: var(--ink); }
  .btn--danger:hover:not(:disabled), .btn--quiet.is-armed:hover { background: #bf2c17; }
  .btn.is-done:hover { background: var(--vert); }
}

/* ---------- Petits composants : touche, pastille, jauge, alerte. */
.kbd {
  display: inline-grid; place-items: center; min-width: 1.75em; padding: 0.02em 0.45em 0.14em; border: 1.5px solid var(--ink); border-radius: 0.4em;
  background: var(--white); color: var(--ink); font: 700 0.78em/1.5 var(--text); box-shadow: inset 0 -0.16em 0 rgb(23 26 51 / 0.16); white-space: nowrap;
}
.tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; border: 1.5px solid var(--ink); border-radius: var(--pill); background: var(--white); color: var(--ink); font: 700 0.74rem/1.55 var(--text); white-space: nowrap; }
.tag--host { background: var(--jaune); }
.tag--ready { background: var(--vert); }
.tag--wait { background: transparent; border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.tag--promo { background: var(--rouge); color: var(--white); border-color: var(--ink); rotate: -3deg; }
.bar { height: 0.45rem; border-radius: var(--pill); background: rgb(23 26 51 / 0.14); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.alert { display: flex; gap: 0.5rem; align-items: start; padding: 0.5rem 0.7rem; border: 2px solid var(--rouge-ink); border-radius: 0.5rem; background: #ffe9e4; color: #8f1d0b; font-size: 0.92rem; font-weight: 600; text-wrap: pretty; }
.alert::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; background: currentColor; -webkit-mask: var(--warn) center / contain no-repeat; mask: var(--warn) center / contain no-repeat; }
.micline { display: flex; gap: 0.45rem; align-items: start; font-size: 0.84rem; color: var(--ink-2); text-wrap: pretty; }
.micline .ico { margin-top: 0.12rem; color: var(--ink); }
.micline.is-off .ico { color: var(--rouge-ink); }

/* Les touches, en légende : sert au salon, au HUD et au menu. */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.9rem; }
.keys > div { display: flex; gap: 0.45rem; align-items: baseline; min-width: 0; }
.keys dd { font-size: 0.82rem; line-height: 1.3; }

/* ---------- Écrans pleins : accueil, salon, fin. Tout tient à gauche, la scène 3D respire à droite. */
.screen { position: absolute; inset: 0; display: grid; align-items: center; padding: 1.5rem clamp(1rem, 4vw, 4.5rem); overflow: auto; }

/* Accueil */
.home { width: min(26.5rem, 100%); display: grid; gap: 0.9rem; }
.logo { width: 21rem; max-width: 100%; margin-left: -0.6rem; filter: drop-shadow(0 0.5rem 0.7rem rgb(4 6 20 / 0.55)); }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.hook { justify-self: start; margin-top: -1.5rem; padding: 0.45rem 0.9rem 0.5rem; background: var(--white); color: var(--ink); border-radius: 0.5rem; box-shadow: var(--shadow-sticker); rotate: -1.2deg; font-size: 0.98rem; line-height: 1.35; position: relative; }
.hook strong { display: block; font-weight: 700; font-size: 1.06rem; }
.home__form { display: grid; gap: 0.75rem; padding: 1.15rem 1.3rem 1.2rem; }
.or { display: flex; align-items: center; gap: 0.7rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.or::before, .or::after { content: ""; flex: 1; border-top: 2px dashed var(--paper-line); }

/* Salon */
.lobby { width: min(26.5rem, 100%); }
.lobby__card { display: grid; gap: 0.7rem; padding: 1.2rem 1.3rem 1.15rem; }
.plate { display: grid; grid-template-columns: 2rem 1fr; border: 0.19rem solid var(--ink); border-radius: 0.6rem; background: var(--jaune); overflow: hidden; }
.plate__band { display: grid; place-items: center; background: var(--ink); color: var(--white); font: 700 0.66rem/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; rotate: 180deg; }
.plate__code { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0.4rem 0.3rem 0.3rem; }
.plate__code b { font: 400 3.1rem/1 var(--display); text-align: center; }
.spell { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: -0.35rem 0 0 2rem; padding: 0 0.3rem; }
.row > .input { flex: 1 1 0; width: 0; min-width: 0; }   /* largeur nulle au départ : un champ pèse sinon vingt caractères dans la largeur minimale de la ligne */
.home__form, .lobby__card, .ticket, .shop, .menu__col { grid-template-columns: minmax(0, 1fr); }   /* une ligne trop large ne pousse pas la colonne hors du papier */
.btn--copy { flex: none; min-width: 12.4rem; }   /* la place du plus long de ses trois libellés : le bouton ne bouge pas quand il confirme */
.spell span { font-size: 0.72rem; font-weight: 600; text-align: center; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby__head { display: flex; justify-content: space-between; align-items: baseline; }
.lobby__head .hint { font-weight: 600; }
.dads { display: grid; }
.dad { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; min-height: 2.05rem; border-top: 1.5px dashed var(--paper-line); }
.dad:first-child { border-top: 0; }
.disc { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--ink); transition: box-shadow 150ms ease; }
.is-talking > .disc { box-shadow: 0 0 0 0.16rem var(--paper), 0 0 0 0.36rem var(--vert); }
.dad__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dad__name small { font-size: 0.82em; font-weight: 500; color: var(--ink-2); }
.dad__tags { display: flex; gap: 0.3rem; align-items: center; }
.dad__tags .ico { width: 1rem; height: 1rem; }
.dad--free { color: var(--ink-2); font-size: 0.86rem; font-weight: 500; grid-template-columns: 1fr; }
/* Le mot du voyage et les touches : une bande de papier posée au sol, sous les pieds des papas. */
.lobby__note { position: absolute; left: calc(clamp(1rem, 4vw, 4.5rem) + 28.5rem); right: clamp(1rem, 3vw, 3rem); bottom: 1.5rem; max-width: 52rem; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.5rem 2rem; align-items: center; padding: 0.9rem 1.2rem 0.95rem; rotate: -0.6deg; }
.lobby__note .h2 { font-size: 1.25rem; }
.lobby__note .lead { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.35; }
.lobby__note .keys { grid-template-columns: repeat(3, auto); justify-content: space-between; }

/* Fin : le ticket de caisse du voyage, et les autocollants du palmarès posés à côté. is-lost : la partie est perdue. */
.end { width: min(24.5rem, 100%); }
.ticket { display: grid; gap: 0.6rem; padding: 1.1rem 1.4rem 1.2rem; }
.ticket__shop { padding-bottom: 0.55rem; border-bottom: 2px dashed var(--ink); font: 400 0.9rem/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.ticket__title { font: 400 1.85rem/1.08 var(--display); text-align: center; text-wrap: balance; }
.ticket.is-lost .ticket__title { color: var(--rouge-ink); }
.ticket__sub { font-weight: 500; text-align: center; text-wrap: pretty; }
.lines { display: grid; gap: 0.16rem; padding-top: 0.55rem; border-top: 2px dashed var(--ink); font-size: 0.9rem; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.9rem; }
.line dd { flex: none; max-width: 60%; font-weight: 700; text-align: right; }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.5rem; border-top: 2px solid var(--ink); font: 400 0.98rem/1.25 var(--display); text-transform: uppercase; }
.ticket__total strong { font-weight: 400; text-align: right; }
/* Une partie complète remplit une vingtaine de lignes : le ticket serre alors ses lignes, comme un vrai ticket trop long. */
.ticket.is-long { gap: 0.45rem; padding-top: 0.9rem; padding-bottom: 1rem; }
.ticket.is-long .ticket__sub { font-size: 0.88rem; line-height: 1.35; }
.ticket.is-long .lines { gap: 0.06rem; font-size: 0.8rem; line-height: 1.3; }
/* À droite, au sol, sous les pieds des papas : le palmarès en autocollants, puis de quoi repartir. */
.end__side { position: absolute; left: calc(clamp(1rem, 4vw, 4.5rem) + 26.5rem); right: clamp(1rem, 3vw, 3rem); bottom: 1.8rem; display: grid; gap: 1.1rem; }
.end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.end__actions .status { color: var(--nuit-text); font-size: 0.92rem; font-weight: 600; text-shadow: 0 1px 0.3rem rgb(4 6 20 / 0.9); }
.end__actions .btn { box-shadow: var(--lip), var(--shadow-sticker); }
.end__actions .btn--primary { min-width: 17rem; box-shadow: inset 0 -0.26rem 0 var(--jaune-lip), var(--shadow-sticker); }
.end__actions .btn--quiet { color: var(--nuit-text); box-shadow: none; text-shadow: 0 1px 0.3rem rgb(4 6 20 / 0.9); }
.awards { display: flex; flex-wrap: wrap; gap: 0.7rem 0.8rem; align-items: end; }
.award { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.6rem; align-items: center; max-width: 19rem; padding: 0.4rem 1.1rem 0.5rem 0.5rem; background: var(--white); color: var(--ink); border-radius: var(--pill); box-shadow: var(--shadow-sticker); }
.award:nth-child(odd) { rotate: -1.4deg; }
.award:nth-child(even) { rotate: 1.1deg; }
.award .disc { grid-row: span 2; width: 2.1rem; height: 2.1rem; }
.award__name { font: 400 1rem/1.15 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award__title { font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }

/* ---------- HUD : sobre, aux bords. Le centre reste à la partie, et rien ici ne prend la souris. */
.screen--hud { display: block; padding: 0; overflow: hidden; pointer-events: none; }
.screen--hud > * { pointer-events: none; }
.hud-top { position: absolute; inset: var(--edge) var(--edge) auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.hud-left { display: grid; gap: 0.8rem; justify-items: start; }
.hud-right { justify-self: end; display: grid; gap: 0.5rem; justify-items: end; }

/* La liste de courses : scène, objectif à cocher, avancement. */
.slip { position: relative; max-width: 26rem; padding: 0.55rem 0.9rem 0.65rem; background: var(--paper); color: var(--ink); border-radius: var(--r-paper) var(--r-paper) 0 0; box-shadow: 0 0.5rem 0.9rem -0.35rem rgb(8 10 28 / 0.55); }
.slip__scene { display: block; font: 400 1.05rem/1.2 var(--display); letter-spacing: 0.01em; }
.goal { display: flex; gap: 0.5rem; align-items: start; margin-top: 0.15rem; font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
.tick { position: relative; flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.12rem; border: 2px solid var(--ink); border-radius: 2px; }
.is-done .tick::after { content: ""; position: absolute; left: 0.2rem; top: -0.42rem; width: 0.45rem; height: 0.95rem; border: solid var(--vert-ink); border-width: 0 0.2rem 0.2rem 0; rotate: 40deg; }
.is-done .goal { font-weight: 700; }
.slip .bar { margin-top: 0.45rem; }
.is-done .bar > i { background: var(--vert-ink); }

/* Les copains : une pastille par papa, qui s'allonge quand il est au tapis, qui s'entoure quand il parle. */
.crew { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 26rem; }
.mate { display: flex; align-items: center; gap: 0.4rem; min-width: 1.75rem; height: 1.75rem; border-radius: var(--pill); background: var(--white); color: var(--ink); box-shadow: var(--shadow-sticker); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.mate .disc { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-color: var(--white); color: var(--white); font: 400 0.82rem/1 var(--display); text-shadow: 0 1px 1px rgb(8 10 28 / 0.6); }
.mate.is-talking > .disc { box-shadow: 0 0 0 0.16rem var(--vert); }
.mate.is-down { padding-right: 0.7rem; background: var(--rouge); color: var(--white); }
.mate__txt:empty { display: none; }

/* Le téléphone : l'horloge de Chérie. Pressante sous cinq minutes. À zéro la partie est perdue : c'est l'écran de fin qui le dit. */
.phone { position: relative; min-width: 11rem; padding: 0.75rem 1rem 0.5rem; background: var(--nuit); color: var(--nuit-text); border: 0.16rem solid var(--nuit-2); border-radius: 1.1rem; box-shadow: var(--shadow-sticker); text-align: center; transition: background-color 300ms ease, border-color 300ms ease; }
.phone::before { content: ""; position: absolute; top: 0.3rem; left: 50%; width: 2.2rem; height: 0.22rem; translate: -50% 0; border-radius: var(--pill); background: var(--nuit-2); }
.phone__crack { position: absolute; right: 0.15rem; top: 0.15rem; width: 2.6rem; height: 2.6rem; fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.phone__label { display: block; font-size: 0.74rem; font-weight: 600; color: var(--nuit-muted); }
.phone__time { display: block; font: 400 1.95rem/1.1 var(--display); white-space: nowrap; }
.phone__time span { display: inline-block; width: 0.82em; text-align: center; }   /* cases fixes : Bowlby One n'a pas de chiffres tabulaires */
.phone__time .sep { width: 0.36em; }
.phone.is-soon { background: #2d0f19; border-color: #ff8f7d; }
.phone.is-soon .phone__time { color: #ffa797; }
.phone.is-soon .phone__label { color: #ffd0c8; }

/* Les ressources communes : un autocollant, trois compteurs. */
.res { display: flex; padding: 0.4rem 0.3rem 0.35rem; background: var(--white); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-sticker); }
.res__i { position: relative; display: grid; grid-template: "ico n" auto "name name" auto / auto auto; gap: 0.05rem 0.3rem; align-items: center; justify-content: center; min-width: 4.4rem; padding: 0 0.6rem; }
.res__i + .res__i { border-left: 1.5px dashed var(--paper-line); }
.res__i .ico { grid-area: ico; width: 1.3rem; height: 1.3rem; fill: var(--c); stroke: var(--ink); stroke-width: 1.7; }
.res__n { grid-area: n; font: 400 1.4rem/1 var(--display); text-align: left; }
.res__name { grid-area: name; font-size: 0.68rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); text-align: center; }
.res__plus { position: absolute; left: 50%; top: calc(100% + 0.3rem); margin-left: -1.1rem; min-width: 2.2rem; text-align: center; padding: 0 0.35rem; border-radius: var(--pill); background: var(--vert); color: var(--ink); font: 400 0.9rem/1.4 var(--display); animation: plus 1100ms var(--ease-out) forwards; }
.res__i.is-up .res__n { animation: pop 340ms var(--ease-snap); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes plus { 0% { opacity: 0; transform: translateY(0.6rem) scale(0.9); } 15% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-0.4rem); } }

/* Bandeaux, SMS et panneau d'arrivée : une seule pile sous le téléphone. Rares, donc une petite entrée. */
.says { position: absolute; top: 6.1rem; left: 50%; translate: -50% 0; width: min(38rem, 92vw); display: grid; gap: 0.45rem; justify-items: center; }
.say { max-width: 100%; padding: 0.4rem 0.95rem 0.45rem; background: var(--white); color: var(--ink); border-radius: 0.55rem; box-shadow: var(--shadow-sticker); font-size: 0.95rem; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
.sms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.65rem; align-items: center; width: min(25rem, 100%); padding: 0.5rem 0.9rem 0.55rem 0.55rem; background: var(--nuit); color: var(--nuit-text); border: 0.12rem solid var(--nuit-2); border-radius: 1rem; box-shadow: var(--shadow-sticker); }
.sms__av { grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--rouge); color: var(--white); font: 400 1.1rem/1 var(--display); }
.sms__from { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.74rem; font-weight: 700; color: var(--nuit-muted); }
.sms__from span { font-weight: 500; }
.sms__text { font-size: 0.98rem; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.sms--call { border-color: var(--white); background: var(--rouge-ink); }
.sms--call .sms__from { color: var(--white); }
.sms--call .sms__av { background: var(--white); color: var(--rouge-ink); }
.say, .sms, .sign { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style {
  .say, .sms { opacity: 0; transform: translateY(-0.5rem); }
  .sign { opacity: 0; transform: translateY(-1rem) rotate(-3deg); }
}
.say.is-out, .sms.is-out, .sign.is-out { opacity: 0; transition-duration: 140ms; }
/* Le panneau d'entrée d'agglomération : on arrive à Gravos-7 comme on arrive à Trifouillis. */
.sign { display: grid; justify-items: center; gap: 0.55rem; max-width: 100%; margin-bottom: 0.2rem; transition-duration: 320ms; transition-timing-function: var(--ease-snap); }
.sign__name { max-width: 100%; padding: 0.3rem 1.5rem 0.4rem; background: var(--white); color: var(--ink); border: 0.32rem solid var(--rouge); border-radius: 0.75rem; outline: 0.16rem solid var(--white); box-shadow: var(--shadow-sticker); font: 400 2.1rem/1.15 var(--display); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.sign__intro { max-width: 32rem; padding: 0.35rem 0.95rem 0.4rem; background: var(--white); color: var(--ink); border-radius: 0.5rem; box-shadow: var(--shadow-sticker); font-size: 0.98rem; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
.sign__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.sign__tags span { padding: 0.12rem 0.75rem 0.16rem; border: 2px solid var(--ink); border-radius: 0.4rem; background: var(--jaune); color: var(--ink); box-shadow: var(--shadow-sticker); font-size: 0.84rem; font-weight: 700; }
.sign__tags span + span { background: var(--white); }

/* Le centre : prendre la souris, l'invite de la touche E, la jauge de tenue, le papa au tapis. */
.hud-lock { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -2deg; pointer-events: auto; cursor: pointer; padding: 0.75rem 1.7rem 0.9rem; background: var(--jaune); color: var(--ink); border: 0.19rem solid var(--white); border-radius: var(--r); box-shadow: var(--shadow-sticker); font: 400 1.4rem/1.1 var(--display); white-space: nowrap; }
.hud-prompt { position: absolute; left: 50%; bottom: 23%; translate: -50% 0; display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 1rem 0.35rem 0.4rem; background: var(--white); color: var(--ink); border-radius: var(--pill); box-shadow: var(--shadow-sticker); font-weight: 700; white-space: nowrap; }
.hud-prompt .kbd { min-width: 1.9rem; min-height: 1.9rem; padding: 0 0.3rem 0.1rem; border-radius: 0.5rem; background: var(--jaune); font-size: 1rem; }
.hud-hold { position: absolute; left: 50%; bottom: calc(23% - 2.9rem); translate: -50% 0; display: grid; gap: 0.25rem; min-width: 12rem; padding: 0.3rem 0.8rem 0.5rem; background: var(--white); color: var(--ink); border-radius: 0.6rem; box-shadow: var(--shadow-sticker); font-size: 0.84rem; font-weight: 700; text-align: center; white-space: nowrap; }
.hud-hold .bar > i { transition-duration: 120ms; }
.hud-down { position: absolute; left: 50%; top: 38%; translate: -50% -50%; rotate: 1.5deg; display: grid; gap: 0.35rem; justify-items: center; padding: 0.8rem 1.6rem 1rem; background: var(--rouge); color: var(--white); border: 0.19rem solid var(--white); border-radius: var(--r); box-shadow: var(--shadow-sticker); text-align: center; }
.hud-down strong { font: 400 1.9rem/1.1 var(--display); letter-spacing: 0.02em; }
.hud-down p { font-weight: 600; }
.hud-down .bar { width: 13rem; margin-top: 0.2rem; background: rgb(255 255 255 / 0.3); }
.hud-down .bar > i { background: var(--white); transition-duration: 120ms; }

/* Le départ de la fusée, en bas au centre : qui manque encore à bord, puis le compte à rebours, et pour l'hôte la
   touche qui décolle sans attendre. Une étiquette blanche tant qu'on attend ; elle passe au jaune des consignes,
   collée de travers, quand le compte tourne. Le chiffre garde sa case : la police de titre n'a pas de chiffres tabulaires.
   Elle vient après le bas du HUD dans la page : si l'aide des touches est dépliée sur une fenêtre étroite, c'est
   le compte à rebours qui reste lisible. */
.depart { position: absolute; left: 50%; bottom: var(--edge); translate: -50% 0; display: flex; align-items: center; gap: 0.8rem; max-width: min(29rem, calc(100vw - 2 * var(--edge))); padding: 0.5rem 1.1rem 0.65rem; background: var(--white); color: var(--ink); border: 0.19rem solid var(--white); border-radius: var(--r); box-shadow: var(--shadow-sticker); }
.depart.is-count { rotate: -1.5deg; background: var(--jaune); }
.depart__n { flex: none; width: 1.75em; font: 400 2.9rem/1 var(--display); text-align: center; }
.depart__body { display: grid; gap: 0.35rem; min-width: 0; }
.depart__line { font-weight: 700; line-height: 1.3; text-wrap: balance; }
.depart__sub { margin-top: -0.2rem; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.depart .bar { background: rgb(23 26 51 / 0.18); }
.depart .bar > i { transition-duration: 120ms; }
.depart__key { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.depart.is-count .depart__key { color: var(--ink); }

/* La pause de l'hôte, vue par les autres : un voile sur la partie figée, un autocollant de nuit au centre.
   Rien ici ne prend la souris ni le clavier : on peut encore ouvrir son menu, la bande, couper son micro. */
.pause { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(8 10 24 / 0.5); }
.pause__card { display: grid; gap: 0.3rem; justify-items: center; max-width: min(27rem, 100%); padding: 0.9rem 1.8rem 1.15rem; rotate: -1.5deg; background: var(--nuit); color: var(--nuit-text); border: 0.19rem solid var(--white); border-radius: var(--r); box-shadow: var(--shadow-sticker); text-align: center; }
.pause__title { font: 400 2.1rem/1.15 var(--display); letter-spacing: 0.02em; color: var(--jaune); }
.pause__card p { font-weight: 600; text-wrap: balance; }
.pause__card .pause__sub { font-size: 0.9rem; font-weight: 500; color: var(--nuit-muted); }

/* Le bas : soi à gauche (cœurs, état, plante, micro), les touches à droite. */
.hud-bottom { position: absolute; inset: auto var(--edge) var(--edge); display: flex; justify-content: space-between; align-items: end; gap: 0.75rem; }
.hud-me { display: grid; gap: 0.5rem; justify-items: start; }
.me { display: grid; gap: 0.3rem; padding: 0.5rem 0.8rem 0.5rem; background: var(--white); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-sticker); }
.hp { display: flex; gap: 0.2rem; }
.hp i { width: 1.4rem; height: 1.3rem; background: rgb(23 26 51 / 0.18); -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; transition: background-color 200ms ease; }
.hp i.is-on { background: var(--rouge); }
.hud-line { display: flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.hud-line .ico { width: 1.05rem; height: 1.05rem; color: var(--ink); }
.hud-line.is-off .ico { color: var(--rouge-ink); }
.hud-line.is-talking .ico { color: var(--vert-ink); stroke-width: 2.8; }
.hud-line .kbd { font-size: 0.72rem; }
.drug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.9rem; align-items: baseline; min-width: 13.5rem; padding: 0.5rem 0.8rem 0.6rem; background: var(--nuit); color: var(--nuit-text); border: 0.16rem solid var(--white); border-radius: var(--r); box-shadow: var(--shadow-sticker); }
.drug__name { font: 400 1rem/1.2 var(--display); color: var(--jaune); }
.drug__secs { font-weight: 800; }
.drug__fx { grid-column: 1 / -1; font-size: 0.84rem; font-weight: 600; }
.drug .bar { grid-column: 1 / -1; margin-top: 0.3rem; background: rgb(255 255 255 / 0.22); }
.drug .bar > i { background: var(--jaune); transition: none; }
.hud-help { position: relative; }
.hud-keys { width: 23.5rem; padding: 0.55rem 0.8rem 0.6rem; background: var(--white); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-sticker); transition: opacity 400ms ease, visibility 0s linear 0s; }
.hud-keys.is-off { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; }
.hud-keyhint { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem 0.3rem 0.35rem; background: var(--white); color: var(--ink); border-radius: var(--pill); box-shadow: var(--shadow-sticker); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

/* ---------- Panneaux en jeu : atelier, la bande (Tab), menu (Échap). Ouverts au clavier : aucune animation. */
.screen--hud > .shop, .screen--hud > .overlay, .screen--hud > .dev { pointer-events: auto; }
.shop { position: absolute; top: 5.9rem; right: var(--edge); width: min(25.5rem, calc(100vw - 2 * var(--edge))); display: grid; gap: 0.45rem; padding: 0.9rem 1.2rem 0.8rem; }
.shop__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.up { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.9rem; align-items: start; padding: 0.5rem 0 0.55rem; border-top: 2px dashed var(--paper-line); }
.up__name { display: flex; align-items: center; gap: 0.55rem; font: 400 1.05rem/1.2 var(--display); }
.pips { display: inline-flex; gap: 0.2rem; }
.pips i { width: 0.7rem; height: 0.7rem; border: 2px solid var(--ink); border-radius: 50%; }
.pips i.is-on { background: var(--ink); }
.up__desc { grid-column: 1; font-size: 0.86rem; line-height: 1.35; text-wrap: pretty; }
.up__cost { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; align-items: center; margin-top: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem 0 0.35rem; border: 1.5px solid var(--ink); border-radius: var(--pill); background: var(--white); color: var(--ink); font: 700 0.82rem/1.55 var(--text); white-space: nowrap; }
.chip .ico { width: 0.95rem; height: 0.95rem; fill: var(--c); stroke: var(--ink); stroke-width: 1.8; }
.chip.is-short { border-color: var(--rouge-ink); background: #ffe9e4; color: #8f1d0b; }
.up__why { grid-column: 1 / -1; font-size: 0.84rem; font-weight: 600; color: var(--rouge-ink); }
.up__why.is-ok { color: var(--ink-2); font-weight: 500; }
.up .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 7.5rem; }

.tab { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(47rem, calc(100vw - 2 * var(--edge))); display: grid; gap: 0.75rem; padding: 1.1rem 1.4rem 1.2rem; }
.tab__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tab__res { display: flex; gap: 0.4rem; }
/* Compétences : le nom à gauche, les niveaux en pions et en chiffre, un seul filet, pas de zébrures. */
.skills { width: 100%; border-collapse: collapse; }
.skills th, .skills td { height: 2.3rem; padding: 0 0.5rem; text-align: left; border-bottom: 1.5px dashed var(--paper-line); white-space: nowrap; }
.skills th { height: 1.8rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.skills tr:last-child td { border-bottom: 0; }
.skills th:first-child, .skills td:first-child { padding-left: 0; }
.skills th:last-child, .skills td:last-child { padding-right: 0; text-align: right; font-weight: 700; }
.skills .who { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; max-width: 12rem; }
.skills .who span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lvl { display: flex; align-items: center; gap: 0.4rem; }
.lvl b { min-width: 0.7rem; font-weight: 700; text-align: right; }
.lvl .pips i { width: 0.6rem; height: 0.6rem; border-width: 1.5px; }
.trip { display: grid; grid-template-columns: repeat(11, minmax(0, auto)); justify-content: space-between; align-items: start; gap: 0.2rem; padding-top: 0.2rem; }
.trip li { position: relative; display: grid; justify-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--ink-2); max-width: 6.2rem; }
.trip li::before { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.trip .is-flight { align-self: start; padding-top: 0.32rem; }
.trip .is-flight::before { width: 1.6rem; height: 0; border: 0; border-top: 2px dashed var(--ink); border-radius: 0; background: none; }
.trip .is-past::before { background: var(--ink); }
.trip .is-past.is-flight::before { background: none; border-top-style: solid; }
.trip .is-here { color: var(--ink); font-weight: 700; }
.trip .is-here::before { background: var(--jaune); box-shadow: 0 0 0 0.2rem var(--ink); }
.trip .is-here.is-flight::before { background: none; box-shadow: none; border-top: 0.3rem solid var(--jaune); outline: 2px solid var(--ink); }
.tab__ship { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.86rem; font-weight: 600; }
.tab__ship span { display: inline-flex; align-items: center; gap: 0.4rem; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(8 10 24 / 0.6); }
.menu { width: min(48rem, 100%); display: grid; grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr); gap: 0.8rem 1.8rem; padding: 1.3rem 1.5rem 1.4rem; }
.menu__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.menu__col { display: grid; gap: 0.6rem; align-content: start; }
.menu__col + .menu__col { padding-left: 1.8rem; border-left: 2px dashed var(--paper-line); gap: 0.75rem; }
.slider { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.6rem; gap: 0.6rem; align-items: center; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.slider input { width: 100%; height: 1.6rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.slider input:focus-visible { outline: 0.19rem solid var(--ink); outline-offset: 0.16rem; border-radius: 0.3rem; }
.slider output { font-weight: 700; text-align: right; }
/* Un réglage à choix : son nom, ses options côte à côte (celle qui est prise est enfoncée, en jaune), puis
   une ligne qui dit ce qu'elle fait. Le point vert signale un réglage qui n'est plus celui d'origine. */
.pick { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.4rem 0.6rem; align-items: center; font-size: 0.9rem; font-weight: 600; }
.pick__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.pick__dot { display: inline-block; width: 0.55rem; height: 0.55rem; margin-left: 0.45rem; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--vert); }
.pick__hint { grid-column: 1 / -1; min-height: 1.3em; }
.pick__saved { font-size: 0.86rem; line-height: 1.2; font-weight: 700; color: var(--vert-ink); opacity: 0; transition: opacity 300ms ease; }
.pick__saved.is-on { opacity: 1; transition-duration: 120ms; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg__opt { min-height: 2.35rem; padding: 0.35rem 0.6rem 0.5rem; font-size: 0.92rem; }
.seg__opt:first-child { border-radius: var(--r) 0 0 var(--r); }
.seg__opt:last-child { margin-left: -2px; border-radius: 0 var(--r) var(--r) 0; }
.seg__opt:focus-visible { position: relative; z-index: 1; }
.seg__opt[aria-pressed="true"] { background: var(--jaune); box-shadow: inset 0 0.18rem 0 rgb(23 26 51 / 0.2); cursor: default; }
@media (hover: hover) and (pointer: fine) { .seg__opt[aria-pressed="true"]:hover:not(:disabled) { background: var(--jaune); } }
.confirm { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem 0.8rem; border: 2px solid var(--rouge-ink); border-radius: 0.5rem; background: #ffe9e4; }
.confirm p { font-size: 0.9rem; font-weight: 600; color: #8f1d0b; text-wrap: pretty; }
.confirm .row { align-items: stretch; flex-wrap: wrap; }
.confirm .btn { flex: 1; }

.dev { position: absolute; right: var(--edge); top: 50%; display: grid; gap: 0.3rem; }
.dev .btn { min-height: 2rem; padding: 0.2rem 0.7rem 0.35rem; font-size: 0.8rem; }
.dev .btn:focus-visible, .hud-lock:focus-visible { outline: 0.19rem solid var(--jaune); outline-offset: 0.16rem; }

/* ---------- Entrées d'écran. Ce qu'on colle arrive plus gros et se pose net, le papier glisse, le ticket s'imprime. */
@keyframes rise { from { opacity: 0; transform: translateY(0.9rem); } }
@keyframes slap { from { opacity: 0; transform: scale(1.14) rotate(-5deg); } }
@keyframes print { from { clip-path: inset(-3rem -3rem 100% -3rem); transform: translateY(-1.2rem); } to { clip-path: inset(-3rem -3rem -4rem -3rem); transform: none; } }
.screen:not([hidden]) .logo { animation: slap 420ms var(--ease-snap) both; }
.screen:not([hidden]) .hook { animation: slap 360ms var(--ease-snap) 90ms both; }
.screen:not([hidden]) .home__form, .screen:not([hidden]) .lobby__card { animation: rise 320ms var(--ease-out) 60ms both; }
.screen:not([hidden]) .lobby__note { animation: slap 380ms var(--ease-snap) 200ms both; }
.screen:not([hidden]) .ticket { animation: print 700ms var(--ease-out) 80ms both; }
.screen:not([hidden]) .end__actions { animation: rise 300ms var(--ease-out) 620ms both; }
.screen:not([hidden]) .award { animation: slap 340ms var(--ease-snap) both; animation-delay: calc(700ms + var(--i, 0) * 70ms); }
.hud-lock:not([hidden]) { animation: slap 300ms var(--ease-snap) both; }
.hud-down:not([hidden]) { animation: slap 260ms var(--ease-snap) both; }
/* Le départ : l'étiquette glisse en place, se recolle d'un coup quand le compte démarre, et chaque seconde tape. */
.depart:not([hidden]) { animation: rise 240ms var(--ease-out) both; }
.depart.is-count:not([hidden]) { animation: slap 300ms var(--ease-snap) both; }
.depart__n.is-tick { animation: tick 500ms var(--ease-out); }
.pause:not([hidden]) { animation: fade 200ms ease both; }
.pause:not([hidden]) .pause__card { animation: slap 280ms var(--ease-snap) both; }
.phone.is-buzz { animation: buzz 500ms ease-in-out; }
.phone.is-urgent .phone__time { animation: tick 1s var(--ease-out) infinite; }
@keyframes buzz { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-4deg); } 35% { transform: rotate(3.5deg); } 55% { transform: rotate(-2.5deg); } 75% { transform: rotate(1.5deg); } }
@keyframes tick { 0% { transform: scale(1.1); } 35%, 100% { transform: scale(1); } }

/* ---------- Fenêtres étroites ou basses : on garde l'essentiel. */
@media (max-width: 70rem) {
  .lobby__note { display: none; }
  .end__side { position: static; margin-top: 1.4rem; }
  .hud-keys { width: 18rem; }
  .hud-keys .keys { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .screen { align-items: start; }
  .hud-top { grid-template-columns: 1fr auto; }
  .hud-top .phone { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .says { top: 10.5rem; }
  .depart { bottom: calc(var(--edge) + 5.2rem); }       /* au-dessus des cœurs, qui prennent le bas à gauche */
  .hud-keys, .hud-keyhint { display: none; }
  .menu { grid-template-columns: 1fr; }
  .menu__col + .menu__col { padding-left: 0; border-left: 0; }
}

/* ---------- Mouvement réduit : plus aucun déplacement, les fondus restent. */
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) .logo, .screen:not([hidden]) .hook, .screen:not([hidden]) .home__form, .screen:not([hidden]) .lobby__card,
  .screen:not([hidden]) .lobby__note, .screen:not([hidden]) .ticket, .screen:not([hidden]) .end__actions, .screen:not([hidden]) .award,
  .hud-lock:not([hidden]), .hud-down:not([hidden]), .depart:not([hidden]), .depart.is-count:not([hidden]), .pause:not([hidden]) .pause__card { animation: fade 200ms ease both; }
  .phone.is-buzz, .phone.is-urgent .phone__time, .res__i.is-up dd, .depart__n.is-tick { animation: none; }
  .res__plus { animation: fade-out 1100ms ease forwards; }
  .btn, .btn:active:not(:disabled) { transition: background-color 150ms ease; transform: none; }
  .bar > i, .drug .bar > i { transition: none; }
  .say, .sms, .sign { transition: opacity 200ms ease; }
  @starting-style { .say, .sms, .sign { opacity: 0; transform: none; } }
}
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }