@font-face {
  font-family: Manrope;
  src: url("./assets/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --ink: #153e65;
  --muted: #557188;
  --blue: #176ca4;
  --red: #d12d43;
  --yellow: #ffd36c;
  --paper: #f2f7fb;
  --line: #c3d7e5;
  --accent: #f3bb45;
  --soft: #fff2ce;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    500 16px/1.5 Manrope,
    Arial,
    sans-serif;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  touch-action: manipulation;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button:focus-visible,
input:focus-visible {
  outline: 4px solid #a51e55;
  outline-offset: 4px;
}
button {
  border: 0;
}
[hidden] {
  display: none !important;
}
h1,
h2,
p {
  margin: 0;
}
h1:focus {
  outline: 0;
}
img {
  user-select: none;
  -webkit-user-drag: none;
}
button,
dialog {
  -webkit-tap-highlight-color: transparent;
}
.topbar {
  height: 85px;
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1440px;
  margin: auto;
  padding: 0 4%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  text-align: left;
  line-height: 1.1;
  font-size: 17px;
  padding: 4px;
}
.brand img {
  width: 43px;
  height: 52px;
  object-fit: contain;
}
.brand strong {
  display: block;
  font-weight: 800;
}
.edition {
  font-size: 12px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 22px;
}
.top-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.quiet-button {
  min-height: 44px;
  background: transparent;
  padding: 8px 13px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
}
.quiet-button:hover {
  background: #e3edf5;
}
.quiet-button[aria-pressed="true"] {
  background: #dcefdc;
}
/* Les cartes d’accueil partagent leur présentation dans hud.css. */
.welcome-copy {
  position: relative;
  z-index: 1;
}
.welcome-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission-card,
.home-library .scenario-entry {
  position: relative;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.card-cover {
  position: relative;
  overflow: hidden;
}
.card-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-title {
  font-weight: 800;
}
.card-stamp {
  position: absolute;
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 800;
}
#game-view {
  max-width: 1440px;
  margin: auto;
  padding: 0 3.5% 15px;
}
.game-heading {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.game-heading > p {
  font-size: 13px;
  font-weight: 800;
}
.game-heading > .quiet-button {
  margin-left: -12px;
}
#progress {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
}
#progress li {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
#progress li:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #c8d9e8;
  border-radius: 50%;
}
#progress li.current {
  color: var(--ink);
  font-weight: 800;
}
#progress li.current:before {
  background: var(--red);
  box-shadow: 0 0 0 3px #ffd8dc;
}
#progress li.done:before {
  background: #45856b;
}
.game-shell {
  border: 3px solid #fff;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 7px 0 #d7e2ec,
    0 15px 35px #163e6510;
}
.world {
  position: relative;
  width: 100%;
  height: clamp(310px, calc(100dvh - 375px), 565px);
  min-height: 310px;
  overflow: hidden;
  background: #deeff9;
  container-type: size;
}
.scene-caption {
  position: absolute;
  top: 16px;
  left: 18px;
  background: #fffef1eb;
  border: 1px solid #fff;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 3px 10px #0001;
  z-index: 5;
}
#scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 66%;
  filter: saturate(1.06);
}
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #5b351b18, transparent 35%);
}
.scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-layer > * {
  pointer-events: auto;
}
.world.busy .scene-layer button,
.world.busy .scene-hud button {
  pointer-events: none;
}
.dialogue-dock {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(270px, 40%);
  gap: 17px;
  align-items: center;
  min-height: 145px;
  padding: 18px 24px;
  background: #fffdf7;
  border-top: 3px solid #f0d7ab;
}
.speaker-portrait {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speaker-portrait img {
  width: 72px;
  height: 86px;
  object-fit: contain;
}
.speaker-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 3px;
}
.speaker-line > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  color: #906536;
}
.read-button {
  font-size: 10px;
  background: #e8f0f7;
  padding: 5px 9px;
  border-radius: 9px;
  font-weight: 800;
  min-height: 30px;
}
#instruction {
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.18;
}
#message {
  font-size: 13px;
  margin-top: 7px;
  max-width: 580px;
  color: #52677b;
}
#feedback {
  font-size: 12px;
  font-weight: 800;
  color: #995c17;
  margin-top: 5px;
  min-height: 0;
}
#feedback:empty {
  display: none;
}
.actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.action-button {
  flex: 1 1 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  background: #e9f2fb;
  border: 2px solid #bdcfe0;
  border-radius: 17px;
  box-shadow: 0 4px 0 #b8ccdc;
  transition: translate 0.12s;
}
.action-button.primary {
  background: #df3547;
  border-color: #b21f35;
  color: #fff;
  box-shadow: 0 4px 0 #981f31;
}
.action-button:hover {
  filter: brightness(1.04);
  translate: 0 -2px;
}
.action-button:active {
  translate: 0 3px;
  box-shadow: none;
}
.action-button img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: #fff8e8;
  border-radius: 9px;
  padding: 2px;
}
.action-button .symbol {
  font-size: 22px;
}
.game-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 17px;
}
.tool-button {
  min-height: 42px;
  border: 1px solid #c7d7e4;
  border-radius: 13px;
  background: #fff;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 800;
}
.tool-button:hover {
  background: #e9f3fa;
}
.tool-button.pause {
  background: #ffe49b;
  border-color: #e6bf59;
}
#busy-note {
  font-size: 11px;
  color: var(--muted);
}
.scene-feedback {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-size: 14px;
  font-weight: 800;
  background: #fffdf0;
  border: 2px solid #efc764;
  border-radius: 16px;
  padding: 10px 20px;
  text-align: center;
  max-width: 70%;
  box-shadow: 0 4px 0 #8a642233;
}
.actor {
  position: absolute;
  bottom: 7%;
  width: 31%;
  aspect-ratio: 1;
  transform-origin: 50% 90%;
  pointer-events: none;
  z-index: 2;
}
.actor-shadow {
  position: absolute;
  width: 38%;
  height: 7%;
  left: 31%;
  bottom: 4%;
  border-radius: 50%;
  background: #483b3733;
  filter: blur(5px);
}
.actor-sprite {
  position: absolute;
  inset: 0;
  background-image: url("./assets/actors/personnages.webp");
  background-size: 300% 200%;
  background-repeat: no-repeat;
  transform-origin: 50% 95%;
  animation: breathe 3.8s ease-in-out infinite;
}
.actor[data-pose="boy"] {
  --pose-x: 0%;
  --pose-y: 0%;
}
.actor[data-pose="ask"] {
  --pose-x: 50%;
  --pose-y: 0%;
}
.actor[data-pose="sit"] {
  --pose-x: 100%;
  --pose-y: 0%;
}
.actor[data-pose="adult"] {
  --pose-x: 0%;
  --pose-y: 100%;
}
.actor[data-pose="listen"] {
  --pose-x: 50%;
  --pose-y: 100%;
}
.actor[data-pose="wipe"] {
  --pose-x: 100%;
  --pose-y: 100%;
}
.actor-sprite {
  background-position: var(--pose-x) var(--pose-y);
}
.actor[data-pose="wipe"] .actor-sprite {
  animation: wipe-floor 0.8s ease-in-out infinite;
}
.actor-tap {
  position: absolute;
  inset: 7% 15% 0;
  background: none;
  border: 0;
  border-radius: 35%;
  pointer-events: auto;
}
.actor-tap:hover {
  background: #fff5bb19;
  outline: 3px solid #fff0a4;
}
.actor-tap .tap-caption {
  position: absolute;
  top: 15%;
  left: 50%;
  translate: -50% 0;
}
.tap-caption {
  display: block;
  white-space: nowrap;
  padding: 8px 14px;
  background: #fff7cf;
  border: 2px solid #c48e25;
  border-radius: 14px;
  box-shadow: 0 3px 0 #77552040;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}
.tap-caption:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  bottom: -7px;
  rotate: 45deg;
  background: inherit;
  border-right: 2px solid #c48e25;
  border-bottom: 2px solid #c48e25;
}
.target-beacon {
  position: absolute;
  inset: -5%;
  border: 3px solid #ffe68b;
  border-radius: 50%;
  animation: beacon 2s ease-out infinite;
  pointer-events: none;
}
.speech-bubble {
  position: absolute;
  z-index: 7;
  left: 62%;
  top: 17%;
  background: #fff;
  border: 2px solid #d9c493;
  border-radius: 22px 22px 22px 3px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 800;
  max-width: 32%;
  box-shadow: 0 4px 0 #5d402326;
}
.response-chip {
  position: absolute;
  left: 16%;
  top: 13%;
  padding: 10px 17px;
  border-radius: 20px 20px 3px 20px;
  background: #d5edff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 3px 0 #5284a966;
  z-index: 5;
}
.chest {
  position: absolute;
  left: 41%;
  bottom: 12%;
  width: 19%;
  height: 29%;
  perspective: 700px;
  z-index: 3;
  background: none;
  overflow: visible;
}
.chest-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76%;
  background: linear-gradient(110deg, #1c4264, #17314e);
  border: 7px solid #eab74a;
  border-bottom: 10px solid #c68e2b;
  border-radius: 6px 6px 13px 13px;
  box-shadow:
    inset 0 0 0 3px #f2c366,
    0 12px 12px #512d3d33;
}
.chest-body:before,
.chest-body:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  border-top: 2px solid #0a233b;
}
.chest-body:after {
  top: 66%;
}
.chest-lid {
  position: absolute;
  top: 0;
  left: -1%;
  width: 102%;
  height: 38%;
  background: linear-gradient(#ffdc78, #e6ac35 70%, #bb8424);
  border: 5px solid #b97e23;
  border-radius: 25px 25px 5px 5px;
  transform-origin: 50% 0;
  z-index: 4;
  box-shadow: inset 0 3px #fff0b0;
}
.chest-lock {
  position: absolute;
  left: 43%;
  top: 26%;
  width: 14%;
  height: 32%;
  border-radius: 3px 3px 12px 12px;
  background: #e74a44;
  border: 3px solid #ae2d31;
  z-index: 5;
}
.chest .tap-caption {
  position: absolute;
  left: 50%;
  bottom: 115%;
  translate: -50% 0;
}
.chest-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse, #ffe285cc, transparent 66%);
  opacity: 0;
  pointer-events: none;
}
.chest.open .chest-lid {
  transform: rotateX(110deg);
}
.chest.open .chest-lock {
  opacity: 0;
}
.chest.open .chest-glow {
  opacity: 0.9;
}
.chest .tiny-piece {
  position: absolute;
  bottom: 45%;
  left: 20%;
  width: 23%;
  height: 25%;
  z-index: 3;
}
.chest .tiny-cab {
  left: 46%;
  height: 35%;
}
.chest .tiny-chimney {
  left: 74%;
  width: 10%;
}
.chest.open .tiny-piece {
  translate: 0 -25%;
}
.workbench {
  position: absolute;
  inset: 8% 14% 10%;
  border: 7px solid #d29a55;
  border-bottom-width: 12px;
  border-radius: 25px;
  background: linear-gradient(145deg, #fff5db, #edd0a5);
  box-shadow:
    0 12px 0 #966637,
    0 18px 28px #512f3f33;
  container-type: size;
}
.bench-heading {
  position: absolute;
  left: 6%;
  top: 5%;
  font-size: clamp(13px, 2cqw, 21px);
  font-weight: 800;
  color: #79522e;
}
.piece-counter {
  position: absolute;
  right: 5%;
  top: 5%;
  font-size: 12px;
  font-weight: 800;
  color: #72522d;
}
.train-board {
  position: absolute;
  top: 10%;
  left: 14%;
  width: 72%;
  height: 63%;
}
.toy-train {
  position: absolute;
  inset: 0;
  transform-origin: 50% 80%;
}
.train-slot {
  position: absolute;
  pointer-events: auto;
  background: #bad0df44;
  border: 3px dashed #8496a8;
  border-radius: 9px;
  padding: 0;
  z-index: 3;
}
.train-slot:disabled {
  cursor: default;
  opacity: 1;
}
.train-slot.selected {
  background: #fff2b6;
  border-color: #c98518;
  box-shadow: 0 0 0 5px #ffffffa8;
}
.train-slot.filled {
  background: none;
  border: 0;
}
.slot-body {
  left: 19%;
  top: 45%;
  width: 43%;
  height: 26%;
}
.slot-cab {
  left: 60%;
  top: 15%;
  width: 23%;
  height: 56%;
}
.slot-chimney {
  left: 30%;
  top: 18%;
  width: 10%;
  height: 27%;
}
.toy-piece {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid;
  position: relative;
  filter: drop-shadow(0 4px 0 #5d3b2433);
}
.piece-body {
  border-color: #b02f36;
  background: linear-gradient(135deg, #ff7368, #df3648);
  border-radius: 9px;
  box-shadow:
    inset 0 6px #ffaca1,
    inset -6px 0 #c32b3d;
}
.piece-cab {
  border-color: #204774;
  background: linear-gradient(135deg, #74a1c7, #2c5c90);
  border-radius: 10px;
  box-shadow:
    inset 0 6px #bed8e7,
    inset -5px 0 #204774;
}
.piece-cab:after {
  content: "";
  position: absolute;
  width: 48%;
  height: 40%;
  left: 20%;
  top: 18%;
  border: 4px solid #deb756;
  background: #fff2bf;
  border-radius: 8px;
}
.piece-chimney {
  border-color: #b17c20;
  background: linear-gradient(90deg, #e9b43b, #ffe992, #efbf4e);
  border-radius: 35% / 12%;
  box-shadow: inset 0 5px #fff2bc;
}
.wheel {
  position: absolute;
  top: 65%;
  width: 15%;
  aspect-ratio: 1;
  border: 5px solid #284f70;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff9d9 10%,
    #e1a925 12% 19%,
    #ffe38c 21% 55%,
    #e5b842 57%
  );
  box-shadow: 0 3px #aa702e;
  z-index: 4;
}
.wheel:after {
  content: "";
  position: absolute;
  inset: 22%;
  border: 3px dashed #ab812d;
  border-radius: 50%;
}
.wheel-a {
  left: 21%;
}
.wheel-b {
  left: 48%;
}
.wheel-c {
  left: 68%;
}
.rail {
  position: absolute;
  top: 77%;
  left: 4%;
  right: 4%;
  height: 7%;
  border-top: 4px solid #61778b;
  border-bottom: 4px solid #61778b;
  background: repeating-linear-gradient(90deg, #b08a51 0 3%, transparent 3% 9%);
}
.piece-bank {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4%;
  height: 23%;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.piece-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  border: 2px solid #d5b58b;
  border-radius: 16px;
  background: #fff9e8;
  padding: 8px 12px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}
.piece-choice.selected {
  border: 3px solid #c18527;
  box-shadow: 0 0 0 3px #fff5d5;
}
.piece-choice:disabled {
  opacity: 0.5;
  cursor: default;
}
.piece-choice .toy-piece {
  flex: none;
}
.piece-choice .piece-body {
  width: 52px;
  height: 27px;
}
.piece-choice .piece-cab {
  width: 32px;
  height: 43px;
}
.piece-choice .piece-chimney {
  width: 23px;
  height: 40px;
}
.piece-choice .piece-cab:after {
  border-width: 2px;
}
.piece-flying {
  position: fixed;
  z-index: 30;
  pointer-events: none;
}
.ride-note {
  align-self: center;
  font-size: 15px;
  font-weight: 800;
  color: #73512d;
}
.steam {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  background: #fffcf0;
  border-radius: 50%;
  left: 32%;
  top: 7%;
  opacity: 0;
  pointer-events: none;
}
.steam:nth-of-type(2) {
  left: 34%;
}
.sparkle {
  position: absolute;
  z-index: 8;
  color: #ffda63;
  font-size: 30px;
  text-shadow: 0 2px #8e5c26;
  pointer-events: none;
}
.puddle {
  position: absolute;
  left: 55%;
  bottom: 12%;
  width: 25%;
  height: 11%;
  background: radial-gradient(ellipse at 35% 30%, #8edcf3, #389acbcc);
  border: 3px solid #c1edff;
  border-radius: 48% 60% 39% 53%;
  box-shadow:
    0 3px 0 #437c9f77,
    inset 0 3px #ffffff77;
  z-index: 1;
  cursor: pointer;
}
.puddle:before,
.puddle:after {
  content: "";
  position: absolute;
  inset: 14% 22%;
  border: 2px solid #d1f6ffb3;
  border-radius: 50%;
  animation: ripple 2.5s ease-out infinite;
  pointer-events: none;
}
.puddle:after {
  animation-delay: 1.2s;
}
.puddle .tap-caption {
  position: absolute;
  left: 50%;
  bottom: 140%;
  translate: -50% 0;
}
.cup {
  position: absolute;
  bottom: 21%;
  left: 76%;
  width: 4%;
  height: 10%;
  background: linear-gradient(90deg, #449bdf, #1a5f9d);
  border: 3px solid #174a73;
  border-radius: 7px 7px 18px 18px;
  rotate: 65deg;
  box-shadow: 0 4px 4px #163e6533;
  z-index: 1;
}
.safe-spot {
  position: absolute;
  left: 17%;
  bottom: 8%;
  width: 22%;
  height: 10%;
  border: 4px dashed #fff;
  border-radius: 50%;
  background: #dcf2ee77;
  box-shadow: 0 0 0 3px #316a85;
  z-index: 1;
}
.safe-spot.confirmed {
  background: #c3ebc888;
  border-style: solid;
  box-shadow: 0 0 0 4px #478a5b;
}
.safe-spot .tap-caption {
  position: absolute;
  left: 50%;
  bottom: 130%;
  translate: -50% 0;
}
.stop-sign {
  position: absolute;
  left: 34%;
  bottom: 17%;
  width: 8%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #e74b47;
  border: 5px solid #fff;
  color: #fff;
  border-radius: 24%;
  rotate: -4deg;
  box-shadow: 0 5px 0 #962d2b;
  font-size: clamp(10px, 2cqw, 24px);
  font-weight: 800;
  z-index: 4;
}
.clean-glow {
  position: absolute;
  left: 52%;
  bottom: 10%;
  width: 33%;
  height: 17%;
  border: 3px solid #fff1a9;
  border-radius: 50%;
  background: #fff5b733;
  pointer-events: none;
}
.message-board {
  position: absolute;
  left: 32%;
  width: 37%;
  bottom: 8%;
  padding: 14px 18px;
  background: #fff7e4f0;
  border: 4px solid #d8b67d;
  border-radius: 22px;
  box-shadow: 0 6px 0 #82603b55;
  z-index: 4;
}
.message-cards {
  display: flex;
  gap: 10px;
}
.message-slot {
  flex: 1;
  min-width: 0;
  aspect-ratio: 0.9;
  background: #fff;
  border: 2px dashed #b5c8d8;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  gap: 4px;
}
.message-slot.filled {
  border-style: solid;
  border-color: #7fa6bc;
  background: #f5fbff;
}
.message-slot img {
  height: 70px;
  width: 70px;
  object-fit: contain;
}
.message-slot span {
  font-size: clamp(9px, 1.1cqw, 13px);
  text-align: center;
}
.message-caption {
  font-size: 11px;
  font-weight: 800;
  color: #796444;
  margin-bottom: 8px;
}
.message-flying {
  position: absolute;
  z-index: 8;
  top: 47%;
  left: 37%;
  background: #fff;
  border: 3px solid #93bad7;
  border-radius: 15px;
  padding: 12px;
  box-shadow: 0 5px 0 #315c7c33;
  font-size: 18px;
  font-weight: 800;
  pointer-events: none;
}
.boy-ring {
  position: absolute;
  bottom: 6%;
  left: 13%;
  width: 28%;
  height: 40%;
  border: 3px dashed #fff0a5;
  border-radius: 45%;
  pointer-events: none;
}
.toy-phone {
  position: absolute;
  width: 28%;
  height: 88%;
  left: 56%;
  bottom: 5%;
  background: linear-gradient(135deg, #2e6389, #173e67);
  border: 6px solid #0e2d50;
  border-radius: 28px;
  box-shadow:
    inset 0 5px #749abc,
    0 9px 0 #102845,
    0 16px 22px #142d4d40;
  padding: 13px 18px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.phone-title {
  color: #f4e7be;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 7px;
}
.phone-model {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #ffebae;
}
.phone-model strong {
  font-size: 27px;
  letter-spacing: 8px;
  color: #fff;
}
.phone-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  flex: none;
  margin: 6px 0 10px;
  border: 4px solid #b89b60;
  background: #f8f1d3;
  border-radius: 13px;
  font-size: 30px;
  letter-spacing: 12px;
  font-weight: 800;
  color: #244a63;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 7px;
  flex: 1;
  min-height: 0;
}
.keypad button {
  background: linear-gradient(#ffe99e, #f2be4d);
  border: 2px solid #b78228;
  box-shadow: 0 3px 0 #9c7029;
  border-radius: 11px;
  color: #173f63;
  font-size: clamp(16px, 2.4cqh, 23px);
  font-weight: 800;
  padding: 1px;
  min-height: 30px;
}
.keypad button:hover {
  background: #fff5c8;
}
.keypad button.pressed {
  background: #d4f0d3;
  border-color: #6ba37b;
  translate: 0 2px;
}
.phone-display.complete {
  background: #d3edc9;
}
.story-card {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 32%;
  padding: 20px;
  background: #fff6df;
  border: 4px solid #e2b762;
  border-radius: 25px;
  box-shadow: 0 7px 0 #8a60353d;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  z-index: 4;
}
.story-card img {
  width: 80px;
  height: 90px;
  object-fit: contain;
}
.story-card .fiction {
  display: block;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9b6c35;
  margin-bottom: 12px;
}
.garage {
  position: relative;
  margin: 6px auto 20px;
  width: 130px;
  height: 76px;
  background: #e7be86;
  border: 4px solid #85613c;
  border-radius: 5px;
}
.garage:before {
  content: "";
  position: absolute;
  left: -14px;
  top: -25px;
  width: 150px;
  height: 30px;
  background: #c85841;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.garage:after {
  content: "";
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 0;
  height: 45px;
  background: repeating-linear-gradient(#7592a6 0 7px, #436682 8px 10px);
  border: 3px solid #436682;
}
.phone-wave {
  position: absolute;
  left: 50%;
  top: 17%;
  width: 5%;
  height: 13%;
  border: 4px solid #fff3ad;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 90% 0 0;
  animation: call-wave 1.6s ease-out infinite;
}
.success-scene {
  position: absolute;
  inset: 0;
  background: #123e6580;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}
.success-card {
  position: relative;
  background: #fffdf1;
  border: 4px solid #fff;
  border-radius: 28px;
  padding: 23px 34px 25px;
  width: min(660px, 85%);
  text-align: center;
  box-shadow: 0 8px 0 #263e5866;
}
.success-badge {
  width: 76px;
  height: 76px;
  border-radius: 28px;
  background: #ffd36a;
  border: 4px solid #fff2b6;
  box-shadow: 0 5px 0 #bf8d35;
  display: grid;
  place-items: center;
  margin: -48px auto 14px;
  font-size: 34px;
}
.success-card h2 {
  font-size: clamp(20px, 3cqw, 29px);
  font-weight: 800;
  letter-spacing: -0.6px;
}
.success-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
}
.recap {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 18px;
  margin: 18px 0;
}
.recap-step {
  flex: 1;
  max-width: 160px;
  font-size: 12px;
  font-weight: 800;
}
.recap-step img {
  display: block;
  width: 65px;
  height: 65px;
  object-fit: contain;
  border-radius: 16px;
  background: #eef4ee;
  margin: 0 auto 8px;
  padding: 5px;
}
.real-life {
  font-size: 12px;
  background: #e9f4e4;
  border-radius: 15px;
  padding: 12px;
  color: #3d6748;
}
.confetti {
  position: absolute;
  z-index: 11;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  pointer-events: none;
}
.busy #actions .action-button {
  pointer-events: none;
}
#render-error {
  position: absolute;
  z-index: 15;
  inset: 20% 10%;
  background: #fff6df;
  padding: 30px;
  border-radius: 20px;
  font-weight: 800;
}
.large-text #instruction {
  font-size: 31px;
}
.large-text #message {
  font-size: 17px;
}
.large-text .action-button {
  font-size: 17px;
}
.large-text .dialogue-dock {
  min-height: 175px;
}
.large-text .world {
  height: clamp(300px, calc(100dvh - 425px), 535px);
}
dialog {
  padding: 25px;
  border: 3px solid #e0e9f1;
  border-radius: 26px;
  width: min(600px, 92vw);
  max-height: 85dvh;
  overflow: auto;
  color: var(--ink);
  box-shadow: 0 20px 100px #0d274b55;
}
dialog::backdrop {
  background: #15344d99;
  backdrop-filter: blur(5px);
}
.modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.modal-top > span {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
}
.modal-top button {
  height: 38px;
  width: 38px;
  border-radius: 10px;
  background: #e6eef6;
  font-size: 23px;
}
#modal-body h2 {
  font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.6px;
}
#modal-body p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 17px;
}
#modal-body .action-button {
  width: 100%;
  margin: 12px 0;
}
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.setting input {
  width: 24px;
  height: 24px;
  accent-color: var(--blue);
}
.setting + p {
  margin-top: 15px;
}
.calm *,
.calm *:before,
.calm *:after {
  animation: none !important;
  transition: none !important;
}
.paused *,
.paused *:before,
.paused *:after {
  animation-play-state: paused !important;
}
@keyframes hello {
  50% {
    rotate: 7deg;
    translate: 0 -4px;
  }
}
@keyframes breathe {
  50% {
    scale: 1.006 1.014;
    translate: 0 -1px;
  }
}
@keyframes beacon {
  0% {
    scale: 0.97;
    opacity: 0.75;
  }
  100% {
    scale: 1.1;
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    scale: 0.7;
    opacity: 0.7;
  }
  100% {
    scale: 1.35;
    opacity: 0;
  }
}
@keyframes wipe-floor {
  50% {
    translate: 2% 0;
    rotate: 2deg;
  }
}
@keyframes call-wave {
  0% {
    opacity: 0;
    scale: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.3;
  }
}
@media (min-width: 1600px) {
  .topbar,
  #game-view {
    max-width: 1600px;
  }
  .world {
    max-height: 650px;
  }
  .dialogue-dock {
    min-height: 165px;
  }
}
@media (max-height: 780px) and (min-width: 800px) {
  .topbar {
    height: 64px;
  }
  .game-heading {
    min-height: 40px;
  }
  .world {
    height: calc(100dvh - 340px);
    min-height: 270px;
  }
  .dialogue-dock {
    min-height: 128px;
    padding: 12px 20px;
    grid-template-columns: 56px minmax(0, 1fr) minmax(285px, 41%);
    gap: 13px;
  }
  .speaker-portrait img {
    width: 56px;
    height: 68px;
  }
  .action-button {
    min-height: 52px;
    font-size: 13px;
    padding: 9px 12px;
  }
  #message {
    font-size: 12px;
  }
  .game-tools {
    margin-top: 13px;
  }
  .workbench {
    inset: 8% 18% 8%;
  }
  .piece-choice {
    font-size: 11px;
    gap: 8px;
  }
  .piece-choice .piece-cab {
    height: 34px;
    width: 28px;
  }
  .piece-choice .piece-body {
    width: 46px;
    height: 24px;
  }
  .piece-choice .piece-chimney {
    height: 33px;
    width: 20px;
  }
  .toy-phone {
    width: 25%;
    height: 92%;
    left: 60%;
    bottom: 3%;
    padding: 8px 15px;
  }
  .phone-title {
    font-size: 9px;
    margin-bottom: 0;
  }
  .phone-model strong {
    font-size: 23px;
  }
  .phone-display {
    height: 41px;
    font-size: 25px;
    margin: 3px 0 7px;
  }
  .keypad {
    gap: 6px;
  }
  .keypad button {
    min-height: 25px;
  }
  .success-card {
    padding: 17px 28px;
  }
  .success-badge {
    width: 56px;
    height: 56px;
    margin: -35px auto 9px;
    font-size: 27px;
    border-radius: 20px;
  }
  .recap {
    margin: 12px 0;
    gap: 12px;
  }
  .recap-step img {
    width: 49px;
    height: 49px;
    margin-bottom: 4px;
  }
  .success-subtitle,
  .real-life {
    font-size: 11px;
  }
  .real-life {
    padding: 9px;
  }
}
@media (max-width: 1050px) {
  .edition {
    display: none;
  }
  .dialogue-dock {
    grid-template-columns: 52px minmax(0, 1fr) 37%;
    padding: 14px;
    gap: 12px;
  }
  .speaker-portrait img {
    width: 52px;
    height: 64px;
  }
  .action-button {
    font-size: 12px;
    min-height: 51px;
    flex-basis: 110px;
  }
  .action-button img {
    width: 29px;
    height: 29px;
  }
  .top-actions .quiet-button {
    padding: 7px 9px;
  }
  .game-heading > p {
    display: none;
  }

  .workbench {
    inset: 9% 9% 9%;
  }
  .message-slot img {
    height: 52px;
    width: 52px;
  }
  .message-board {
    width: 40%;
    left: 30%;
    padding: 10px;
  }
  .toy-phone {
    width: 31%;
    left: 58%;
  }
  .large-text .dialogue-dock {
    min-height: 180px;
  }
}
@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 80px;
    gap: 8px;
    padding: 10px 4%;
    align-items: center;
  }
  .brand {
    font-size: 14px;
    gap: 7px;
  }
  .brand img {
    width: 33px;
    height: 43px;
  }
  .top-actions {
    gap: 1px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 235px;
  }
  .top-actions .quiet-button {
    font-size: 10px;
    min-height: 34px;
    padding: 6px 8px;
  }
  #fullscreen-button {
    display: none;
  }
  #game-view {
    padding: 0 2.5% 10px;
  }
  .game-heading {
    gap: 8px;
    min-height: 43px;
  }
  #progress {
    gap: 7px;
  }
  #progress li {
    font-size: 0;
    gap: 0;
  }
  #progress li:before {
    width: 18px;
    height: 6px;
    border-radius: 6px;
  }
  .game-shell {
    border-radius: 20px;
  }
  .world,
  .large-text .world {
    height: auto;
    aspect-ratio: 1.25;
    min-height: 0;
  }
  .scene-caption {
    left: 9px;
    top: 9px;
    padding: 5px 9px;
    font-size: 9px;
  }
  .dialogue-dock {
    grid-template-columns: 41px 1fr;
    gap: 8px 11px;
    padding: 14px;
    min-height: 0;
  }
  .speaker-portrait {
    align-self: start;
    padding-top: 4px;
  }
  .speaker-portrait img {
    width: 41px;
    height: 52px;
  }
  .speaker-line > span {
    font-size: 8px;
    letter-spacing: 0.6px;
  }
  .read-button {
    font-size: 9px;
    padding: 4px 6px;
    min-height: 28px;
  }
  .speaker-line {
    gap: 8px;
  }
  .actions {
    grid-column: 1 / -1;
    justify-content: stretch;
    margin-top: 7px;
    gap: 9px;
  }
  .action-button {
    font-size: 13px;
    min-height: 54px;
  }
  .action-button img {
    width: 31px;
    height: 31px;
  }
  #instruction,
  .large-text #instruction {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #message {
    font-size: 12px;
    margin-top: 6px;
  }
  .large-text #message {
    font-size: 15px;
  }
  #feedback {
    font-size: 11px;
  }
  .game-tools {
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 15px;
  }
  .tool-button {
    font-size: 10px;
    padding: 7px 8px;
    min-height: 41px;
  }
  #busy-note {
    width: 100%;
    order: 5;
    text-align: center;
  }

  .actor-tap .tap-caption {
    top: 19%;
  }
  .tap-caption {
    font-size: 10px;
    padding: 6px 9px;
  }
  .chest {
    left: 40%;
    width: 24%;
    height: 25%;
    bottom: 12%;
  }
  .chest-body {
    border-width: 4px;
    border-bottom-width: 6px;
  }
  .chest-lid {
    border-width: 3px;
    border-radius: 13px 13px 3px 3px;
  }
  .chest-lock {
    border-width: 2px;
  }
  .chest .tap-caption {
    bottom: 125%;
  }
  .puddle {
    left: 57%;
    width: 31%;
    height: 10%;
    bottom: 13%;
    border-width: 2px;
  }
  .cup {
    left: 83%;
    width: 6%;
    height: 9%;
    bottom: 22%;
    border-width: 2px;
  }
  .safe-spot {
    left: 10%;
    width: 29%;
    bottom: 8%;
    border-width: 3px;
  }
  .speech-bubble {
    font-size: 11px;
    padding: 8px 11px;
    max-width: 47%;
    left: 46%;
    top: 15%;
  }
  .response-chip {
    font-size: 11px;
    left: 7%;
    top: 19%;
    padding: 8px 12px;
  }
  .stop-sign {
    left: 37%;
    width: 12%;
    border-width: 3px;
    border-radius: 20%;
    font-size: 11px;
  }
  .workbench {
    inset: 15% 4% 7%;
    border-width: 4px;
    border-bottom-width: 7px;
    border-radius: 18px;
  }
  .bench-heading {
    font-size: 11px;
    top: 4%;
    left: 5%;
  }
  .piece-counter {
    font-size: 9px;
    top: 5%;
  }
  .train-board {
    left: 6%;
    width: 88%;
    top: 10%;
    height: 61%;
  }
  .piece-bank {
    left: 4%;
    right: 4%;
    bottom: 4%;
    height: 24%;
    gap: 5px;
  }
  .piece-choice {
    padding: 5px;
    gap: 4px;
    font-size: 9px;
    flex-direction: column;
    line-height: 1.1;
    border-radius: 11px;
  }
  .piece-choice .piece-body {
    width: 32px;
    height: 18px;
  }
  .piece-choice .piece-cab {
    width: 22px;
    height: 23px;
  }
  .piece-choice .piece-chimney {
    width: 13px;
    height: 23px;
  }
  .toy-piece {
    border-width: 2px;
  }
  .piece-cab:after {
    border-width: 2px;
  }
  .train-slot {
    border-width: 2px;
    border-radius: 6px;
  }
  .wheel {
    border-width: 3px;
  }
  .wheel:after {
    border-width: 2px;
  }
  .rail {
    border-width: 3px;
  }
  .ride-note {
    font-size: 11px;
  }
  .message-board {
    left: 28%;
    width: 55%;
    bottom: 7%;
    border-width: 3px;
    padding: 8px;
    border-radius: 14px;
  }
  .message-caption {
    font-size: 8px;
    margin-bottom: 5px;
  }
  .message-cards {
    gap: 5px;
  }
  .message-slot {
    border-radius: 9px;
    font-size: 10px;
  }
  .message-slot img {
    height: 36px;
    width: 36px;
  }
  .message-slot span {
    font-size: 8px;
  }
  .message-flying {
    font-size: 12px;
    padding: 7px;
  }
  .boy-ring {
    width: 37%;
    left: 0;
  }
  .toy-phone {
    width: 45%;
    left: 49%;
    height: 90%;
    bottom: 4%;
    border-width: 4px;
    border-radius: 21px;
    padding: 7px 9px;
  }
  .phone-title {
    font-size: 8px;
    margin-bottom: 0;
  }
  .phone-model {
    font-size: 9px;
    gap: 6px;
  }
  .phone-model strong {
    font-size: 21px;
    letter-spacing: 5px;
  }
  .phone-display {
    height: 32px;
    border-width: 3px;
    font-size: 21px;
    margin: 4px 0 7px;
  }
  .keypad {
    gap: 5px;
  }
  .keypad button {
    font-size: 16px;
    border-radius: 7px;
    min-height: 28px;
  }
  .story-card {
    left: 3%;
    top: 18%;
    width: 42%;
    padding: 12px 8px;
    border-width: 3px;
    border-radius: 18px;
    font-size: 11px;
  }
  .story-card .fiction {
    font-size: 8px;
  }
  .garage {
    scale: 0.7;
    margin: -5px auto 3px;
    transform-origin: 50% 50%;
    left: calc(50% - 65px);
    margin-left: 0;
  }
  .story-card img {
    height: 48px;
    width: 48px;
  }
  .success-card {
    width: 94%;
    border-width: 3px;
    padding: 14px 12px;
    border-radius: 21px;
  }
  .success-badge {
    width: 49px;
    height: 49px;
    border-width: 3px;
    border-radius: 17px;
    font-size: 24px;
    margin: -31px auto 9px;
  }
  .success-card h2 {
    font-size: 19px;
  }
  .success-subtitle {
    font-size: 10px;
    margin-top: 3px;
  }
  .recap {
    gap: 8px;
    margin: 12px 0;
  }
  .recap-step {
    font-size: 9px;
  }
  .recap-step img {
    width: 40px;
    height: 40px;
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 3px;
  }
  .real-life {
    font-size: 10px;
    line-height: 1.3;
    padding: 8px;
  }
  .scene-feedback {
    font-size: 11px;
    padding: 8px 12px;
    max-width: 83%;
    top: 45px;
  }
  .large-text .dialogue-dock {
    min-height: 0;
  }

  .world[data-kind="phone"] .actor[data-person="adult"] {
    display: none;
  }
}
/* Proportions de la scène et états des objets. */

.chest .tiny-piece {
  opacity: 0;
}
.chest.open .tiny-piece {
  opacity: 1;
}
.chest.open .chest-lid {
  transform: translateY(-95%) rotateX(-15deg);
  background: linear-gradient(130deg, #2c5778, #173450);
  border-color: #d49b36;
  box-shadow: inset 0 0 0 3px #efc66b;
}
.train-board {
  height: 58%;
}
.rail {
  top: calc(65% + 10.8cqw - 5px);
}
.speaker-portrait:has(.adult-portrait) {
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
}
.speaker-portrait .adult-portrait {
  height: 130px;
  object-fit: cover;
  object-position: 50% 0;
  align-self: flex-start;
}
.piece-choice {
  touch-action: none;
}
.workbench .train-slot:focus-visible {
  outline-offset: 5px;
}
@media (max-height: 780px) and (min-width: 800px) {
  .speaker-portrait:has(.adult-portrait) {
    height: 64px;
  }
  .speaker-portrait .adult-portrait {
    height: 112px;
  }
}
@media (max-width: 760px) {
  .train-board {
    height: 58%;
  }
  .rail {
    top: calc(65% + 13.2cqw - 3px);
  }
  .speaker-portrait:has(.adult-portrait) {
    height: 50px;
  }
  .speaker-portrait .adult-portrait {
    height: 88px;
  }
}
@media (max-width: 760px) {
  .world[data-kind="phone"] {
    aspect-ratio: 1;
  }
  .toy-phone {
    width: 47%;
  }
  .keypad button {
    min-height: 44px;
  }
}
.message-seated {
  display: block;
  width: 70px;
  height: 70px;
  background-image: url("./assets/actors/personnages.webp");
  background-size: 300% 200%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
.action-button .message-seated {
  width: 36px;
  height: 36px;
  flex: none;
  background-color: #fff8e8;
  border-radius: 9px;
}
.story-card {
  left: 25%;
  width: 28%;
}
.garage-smoke {
  position: absolute;
  bottom: 105%;
  left: 55%;
  width: 24px;
  height: 27px;
  background: #abb6bd;
  border-radius: 50%;
  box-shadow:
    10px -13px #b3bdc4,
    -3px -27px #b3bdc480;
  animation: garage-smoke 2.5s ease-out 2;
  z-index: 2;
}
.world:has(.keypad button:not(:disabled)) .garage-smoke {
  animation: none;
  opacity: 0.7;
}
@keyframes garage-smoke {
  0% {
    translate: 0 2px;
    opacity: 0.35;
  }
  100% {
    translate: 9px -12px;
    opacity: 0.7;
  }
}
@media (max-width: 1050px) {
  .message-seated {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 760px) {
  .message-seated {
    width: 36px;
    height: 36px;
  }
  .story-card {
    left: 3%;
    width: 42%;
  }
  .garage-smoke {
    scale: 0.7;
  }
}
/* Un seul cadre pour le décor, les personnages et les objets au sol. */
.scene-ambient {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: blur(18px) brightness(0.66) saturate(0.6);
  opacity: 0.65;
  pointer-events: none;
}
.scene-camera {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  box-shadow: 0 0 32px #122b4333;
}
.scene-camera .scene-background {
  object-fit: fill;
  object-position: initial;
}
.scene-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-hud > * {
  pointer-events: auto;
}
.scene-camera .actor {
  width: var(--actor-size);
  max-width: none;
  bottom: 8%;
  transform-origin: 50% 97%;
}
.scene-camera .actor-sprite {
  transform: scale(var(--pose-scale, 1));
  transform-origin: 50% 98%;
}
.scene-camera .actor[data-pose="sit"],
.scene-camera .actor[data-pose="wipe"] {
  --pose-scale: 0.72;
}
.scene-camera .actor-shadow {
  width: 30%;
  height: 3%;
  left: 35%;
  bottom: 2%;
  filter: blur(3px);
}
.scene-camera .actor[data-pose="sit"] .actor-shadow,
.scene-camera .actor[data-pose="wipe"] .actor-shadow {
  width: 48%;
  left: 26%;
}
.scene-camera .actor-tap .tap-caption {
  top: -5%;
}
.scene-camera .chest {
  left: 40%;
  bottom: 10%;
  width: 22%;
  height: 22%;
}
.scene-camera .puddle {
  left: 48%;
  bottom: 12%;
  width: 23%;
  height: 6%;
}
.scene-camera .cup {
  left: 70%;
  bottom: 18%;
  width: 2.8%;
  height: 5%;
}
.scene-camera .safe-spot {
  left: 16%;
  bottom: 6%;
  width: 24%;
  height: 6%;
}
.scene-camera .stop-sign {
  left: 37%;
  bottom: 15%;
  width: 9%;
  font-size: clamp(10px, 2cqw, 20px);
  border-width: 3px;
}
.scene-camera .speech-bubble {
  left: 60%;
  top: 12%;
  max-width: 37%;
  font-size: clamp(10px, 2cqw, 14px);
  padding: 8px 12px;
}
.scene-camera .response-chip {
  left: 12%;
  top: 24%;
  font-size: clamp(10px, 2cqw, 14px);
  padding: 8px 12px;
}
.scene-camera .message-board {
  left: 34%;
  width: 34%;
  bottom: 7%;
  padding: 10px;
  border-width: 3px;
  border-radius: 17px;
}
.scene-camera .message-slot {
  aspect-ratio: 0.75;
  border-radius: 9px;
}
.scene-camera .message-slot img,
.scene-camera .message-seated {
  width: clamp(26px, 7cqw, 54px);
  height: clamp(26px, 7cqw, 54px);
}
.scene-camera .message-slot span {
  font-size: clamp(8px, 1.4cqw, 12px);
}
.scene-camera .message-cards {
  gap: 5px;
}
.scene-camera .message-caption {
  font-size: clamp(9px, 1.5cqw, 12px);
}
.scene-hud .success-scene {
  pointer-events: auto;
}
@media (max-width: 760px) {
  .scene-camera .chest .tap-caption {
    bottom: 130%;
  }
  .scene-camera .message-board {
    left: 31%;
    width: 38%;
    padding: 6px;
  }
  .scene-camera .message-cards {
    gap: 3px;
  }
  .scene-camera .message-slot {
    border-width: 1px;
  }
  .scene-camera .message-slot img,
  .scene-camera .message-seated {
    width: 26px;
    height: 26px;
  }
  .scene-camera .message-caption {
    font-size: 8px;
  }
  .scene-camera .message-slot span {
    font-size: 8px;
  }
  .scene-camera .speech-bubble {
    padding: 6px 8px;
  }
  .scene-camera .chest-body {
    border-width: 4px;
  }
  .scene-camera .chest-lid {
    border-width: 3px;
  }
}
.scene-camera .clean-glow {
  left: 44%;
  width: 33%;
  height: 9%;
  bottom: 10%;
}
/* Le cadre 3:2 garde une place suffisante à côté des consignes. */
@media (min-width: 900px) {
  .game-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .world,
  .large-text .world {
    height: clamp(380px, calc(100dvh - 220px), 710px);
    min-height: 380px;
    max-height: none;
  }
  .dialogue-dock,
  .large-text .dialogue-dock {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 13px;
    padding: 22px;
    border-top: 0;
    border-left: 3px solid #f0d7ab;
    min-height: 0;
  }
  .speaker-portrait {
    align-self: flex-start;
    height: 68px;
    padding: 0;
  }
  .speaker-portrait img {
    width: 57px;
    height: 68px;
  }
  .speaker-line {
    flex-wrap: wrap;
    gap: 8px;
  }
  .actions {
    justify-content: stretch;
    margin-top: 8px;
    gap: 11px;
  }
  .action-button {
    flex-basis: 100%;
    min-height: 57px;
    font-size: 14px;
  }
  .action-button img {
    width: 36px;
    height: 36px;
  }
  #instruction {
    font-size: 26px;
    line-height: 1.19;
  }
  #message {
    font-size: 13px;
    margin-top: 10px;
  }
  .large-text #instruction {
    font-size: 29px;
  }
  .large-text #message {
    font-size: 16px;
  }
  .workbench {
    inset: 10% 8% 10%;
  }
}
@media (min-width: 1500px) {
  .game-shell {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
}
@media (min-width: 761px) and (max-width: 899px) {
  .world,
  .large-text .world {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 3/2;
  }
  .dialogue-dock,
  .large-text .dialogue-dock {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
  }
  .actions {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  .world,
  .large-text .world {
    aspect-ratio: 3/2;
  }
  .world[data-kind="phone"] {
    aspect-ratio: 1;
  }
}
/* Jouets peints : atlas original, matières communes au décor. */
.scene-camera .chest { width:28%; height:42%; left:37%; bottom:7%; }
.chest-art { position:absolute; inset:0; background:url('./assets/objets/jouets-illustres.webp') 0 0/300% 200% no-repeat; filter:drop-shadow(0 8px 5px #71452138); transform-origin:50% 90%; pointer-events:none; }
.chest-open {background-position:50% 0;opacity:0}
.chest .chest-body,.chest .chest-lid,.chest .chest-lock,.chest .tiny-piece {visibility:hidden}
.chest .tap-caption {bottom:82%}
.scene-camera .chest .tap-caption {bottom:82%}
.chest.open .chest-glow {z-index:-1}
.toy-piece {border:0!important;border-radius:0;box-shadow:none!important;background-image:url('./assets/objets/jouets-illustres.webp');background-repeat:no-repeat;filter:drop-shadow(0 5px 3px #54320a36)}
.toy-piece:after,.toy-piece:before {display:none}
.piece-body {background-size:357% 341%;background-position:99% 22%;}
.piece-cab {background-size:384% 263%;background-position:4% 92%;}
.piece-chimney {background-size:640% 284%;background-position:50% 90%;}
.wheel {border:0;background:url('./assets/objets/jouets-illustres.webp') 97% 90%/384% 263%;box-shadow:none;filter:drop-shadow(0 3px 2px #51371855)}
.wheel:before,.wheel:after {display:none}
.workbench {background:radial-gradient(ellipse at 50% 30%,#fff5dbed,#efd0a4f5),url('./assets/scenes/salle-echelle.webp') center/cover;box-shadow:0 12px 0 #966637,0 24px 35px #512f3f44,inset 0 2px 12px #fff9e6;}
.train-board {perspective:900px}
.train-slot.filled {animation:piece-settle .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes piece-settle {0%{scale:1.08;translate:0 -7px}60%{scale:.98;translate:0 2px}100%{scale:1;translate:0 0}}
.puddle {background:radial-gradient(ellipse at 40% 35%,#effeffcc 0 8%,#90d9ecb3 22%,#4fa7c999 60%,#c5edf7b0 75%);box-shadow:inset 0 2px 4px #fff,0 3px 8px #5590a537;border-color:#caeffcbd}
.puddle:after {animation:water-ripple 3.5s ease-out infinite}
@keyframes water-ripple {0%{scale:.55;opacity:.9}100%{scale:1.08;opacity:.15}}
.message-slot.filled {box-shadow:0 5px 10px #795c2d24,inset 0 2px 6px #fff}
.calm .train-slot.filled,.calm .puddle:after {animation:none}
.scene-camera .cup {background:url('./assets/objets/accessoires-illustres.webp') 13% 18%/320% 376% no-repeat;border:0;border-radius:0;transform:rotate(-10deg);box-shadow:none;width:4%;height:6%}
.cup:before,.cup:after {display:none}
.scene-camera .puddle {background:url('./assets/objets/accessoires-illustres.webp') 100% 23%/233% 556% no-repeat;border:0;box-shadow:none;border-radius:0}
.puddle:before,.puddle:after {display:none}
.garage {background:url('./assets/objets/accessoires-illustres.webp') 0 100%/213% 267% no-repeat;border:0;box-shadow:none;height:110px}
.garage:before,.garage:after {display:none}
.garage-smoke {background:url('./assets/objets/accessoires-illustres.webp') 100% 100%/250% 250% no-repeat;border-radius:0;box-shadow:none;filter:none;animation:painted-smoke 4s ease-in-out infinite;}
@keyframes painted-smoke {0%{opacity:.3;transform:translateY(5px) scale(.8)}60%{opacity:.8}100%{opacity:0;transform:translateY(-25px) scale(1.2)}}
.calm .garage-smoke {animation:none;opacity:.65}
.slot-cab {left:57%}
.slot-chimney {top:26%}
.workbench {background:radial-gradient(ellipse at 45% 25%,#fff5dc,#edc998);}
.scene-camera .cup {bottom:14%}
.garage-smoke {width:48px;height:55px;top:-17px;left:65px}
.toy-phone {background:linear-gradient(115deg,#6499b5 0%,#30648b 13%,#244d73 65%,#163650);box-shadow:inset 2px 3px 3px #acd9e7a8,inset -4px -4px 8px #102e54,0 9px 0 #102845,0 20px 30px #142d4d40;}
.keypad button {background:linear-gradient(145deg,#fff3bd,#eac46a);box-shadow:inset 0 2px 2px #fffbd9,0 3px 0 #96763c;transition:filter .15s,translate .15s;}
.keypad button:active,.keypad button.pressed {translate:0 2px;filter:brightness(1.12)}
/* L’essai vocal garde les commandes dans la fenêtre sur ordinateur. */
@media (min-width:900px) {
  .world,.large-text .world {height:clamp(320px,calc(100dvh - 280px),650px);min-height:320px;}
}
/* Personnages : volume constant, seuls la tête et les changements de pose réagissent. */
.actor-sprite,.actor[data-pose="wipe"] .actor-sprite {animation:none;background:none}
.actor-body,.actor-head {position:absolute;inset:0;background:url('./assets/actors/personnages.webp') var(--pose-x) var(--pose-y)/300% 200% no-repeat;pointer-events:none}
.actor-body {clip-path:inset(29% 0 0)}
.actor-head {clip-path:inset(0 0 70%);transform-origin:50% 29%;animation:head-attention 8s ease-in-out infinite}
.actor[data-person="boy"] .actor-head {transform-origin:55% 29%;animation-delay:-3s}
.actor[data-pose="sit"] .actor-body,.actor[data-pose="wipe"] .actor-body {clip-path:none}
.actor[data-pose="sit"] .actor-head,.actor[data-pose="wipe"] .actor-head {display:none}
@keyframes head-attention {0%,45%,100%{rotate:0deg}52%,62%{rotate:-1.4deg}72%{rotate:.5deg}}
/* Un train construit dans un repère 2:1 : aucune pièce n’est étirée selon la fenêtre. */
.train-frame {position:absolute;width:min(100%,116cqh);aspect-ratio:2/1;left:50%;top:50%;translate:-50% -50%;}
.toy-train {inset:0}
.slot-body {left:16%;top:46%;width:48%;height:27%}
.slot-cab {left:61%;top:11%;width:23%;height:62%}
.slot-chimney {left:28%;top:17%;width:10%;height:31%}
.piece-body {transform:scaleX(-1)}
.piece-flying.piece-body {scale:-1 1;transform:none}
.wheel {top:66%;width:15%;aspect-ratio:1}
.wheel-a {left:18%}.wheel-b {left:42%}.wheel-c {left:67%}
.rail {top:94%;left:3%;right:3%;height:5%;border-width:3px}
.steam {left:29%;top:5%;background:radial-gradient(circle,#fffef4cf,transparent 70%);border-radius:50%}
/* Décor animé : éléments secondaires, sans interaction ni recouvrement des choix. */
.living-scenery {position:absolute;inset:0;pointer-events:none!important;overflow:hidden;z-index:0}
.living-scenery * {pointer-events:none!important}
.decor-sprite {position:absolute;background:url('./assets/objets/decor-vivant.webp') 0 0/300% 200% no-repeat;aspect-ratio:1}
.window-life {position:absolute;left:34%;top:0;width:37%;height:39%;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.drifting-cloud {width:22%;top:2%;left:40%;background-position:100% 100%;opacity:.6;animation:cloud-drift 22s ease-in-out infinite alternate}
.window-life .drifting-cloud {width:55%;top:-14%;left:0;opacity:.38}
.butterfly-flight {position:absolute;left:25%;top:22%;width:7%;aspect-ratio:1;animation:butterfly-path 12s ease-in-out infinite}
.butterfly-wings {inset:0;animation:butterfly-flap .7s steps(1,end) infinite}
.window-life .butterfly-flight {width:13%;left:35%;top:40%}
.flying-bird {position:absolute;left:0;top:10%;width:7%;aspect-ratio:1;animation:bird-flight 24s linear infinite}
.bird-wings {inset:0;background-position:0 100%;animation:bird-flap .65s steps(1,end) infinite}
.leaf-branch {width:17%;left:-7%;bottom:-5%;background-position:100% 0;transform-origin:10% 95%;animation:leaf-sway 6s ease-in-out infinite;filter:blur(.3px)}
.indoors .leaf-branch {width:14%;left:-7%;bottom:3%;opacity:.85}
.sun-shimmer {position:absolute;inset:0;background:linear-gradient(120deg,transparent 38%,#fff7be16 44%,transparent 52%);animation:sunlight 14s ease-in-out infinite}
@keyframes butterfly-flap {50%{background-position:50% 0}}
@keyframes bird-flap {50%{background-position:50% 100%}}
@keyframes leaf-sway {0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes cloud-drift {to{translate:60% 0}}
@keyframes butterfly-path {0%,100%{translate:0 0;rotate:-10deg}30%{translate:80% -60%;rotate:15deg}65%{translate:180% 25%;rotate:-5deg}}
@keyframes bird-flight {0%,65%{translate:-150% 0;opacity:0}67%{opacity:1}95%{opacity:1}100%{translate:1500% -40%;opacity:0}}
@keyframes sunlight {0%,100%{opacity:.35}50%{opacity:.9}}
.calm .living-scenery .butterfly-flight,.calm .living-scenery .flying-bird {display:none}
.slot-chimney {left:31.5%;top:20%}
.steam {left:33%;top:14%}
.rail {top:92%}
/* La chaudière garde son épaisseur ; cabine et corps reposent sur la même base. */
.slot-body {top:28%;height:45%}
.slot-chimney {top:5%;height:25%}
.steam {top:-5%}
.slot-chimney {top:6.5%}
@media (min-width:900px) {
  .world,.large-text .world {height:auto;min-height:clamp(320px,calc(100dvh - 280px),650px);align-self:stretch;}
}

/* Une seule perspective pour le décor et les objets, même lorsque le cadre est recadré. */
.scene-camera {translate:-50% 0;box-shadow:none}
.scene-camera .actor {bottom:15%}
.scene-camera .chest {left:40%;bottom:14%;width:21%;height:31.5%}
.scene-camera .puddle {left:49%;bottom:18%;width:17%;height:4.5%}
.scene-camera .cup {left:66%;bottom:21%;width:3%;height:4.5%}
.scene-camera .safe-spot {left:19%;bottom:13%;width:18%;height:4%}
.scene-camera .stop-sign {bottom:21%}
.scene-camera .clean-glow {left:47%;bottom:17%;width:23%;height:6%}
.scene-camera .message-board {left:39%;width:23%;bottom:13%}
.scene-camera .message-slot img,.scene-camera .message-seated {max-width:85%;height:auto;aspect-ratio:1}
.scene-camera .speech-bubble {top:max(16%,calc(var(--crop-top) + 5%))}
.scene-camera .response-chip {top:max(30%,calc(var(--crop-top) + 5%))}

/* Le châssis relie la chaudière, la cabine et les essieux. */
.train-chassis {
  position:absolute;
  left:14%;
  top:70%;
  width:72%;
  height:7%;
  border-radius:8% / 35%;
  background:linear-gradient(#426078,#19364e 48%,#0e283e);
  border-top:2px solid #b1803b;
  box-shadow:0 2px 3px #71452148;
  z-index:3;
}
.piece-cab {transform:scaleX(-1)}
.piece-flying.piece-cab {scale:-1 1;transform:none}
.slot-cab {left:59%;width:26%}
.wheel-a {left:19%}
.wheel-b {left:44%}
.wheel-c {left:68%}
.rail {top:95%;height:5%}

body:has(#game-view:not([hidden])) .topbar {max-width:none;width:100%;padding-inline:clamp(10px,1.3vw,24px)}
#game-view:not([hidden]) {
  display:flex;
  flex-direction:column;
  max-width:none;
  width:100%;
  margin:0;
  padding:0 clamp(6px,1vw,18px) 8px;
}
#game-view .game-tools {margin-top:8px}
body:has(#game-view:not([hidden])) .audio-help:not(:has(#audio-status:not([hidden]))) {display:none}
body:has(#game-view:not([hidden])) #fullscreen-button {display:inline-block}
@media (min-width:900px) and (min-aspect-ratio:4/3) {
  body:has(#game-view:not([hidden])) {display:flex;flex-direction:column;height:100dvh}
  body:has(#game-view:not([hidden])) main {display:flex;flex-direction:column;flex:1;min-height:0}
  #game-view:not([hidden]) {flex:1;min-height:0}
  #game-view .game-shell {
    flex:1;
    min-height:0;
    grid-template-columns:minmax(0,min(calc(100% - 270px),80%,calc((100dvh - 195px) * 2.05))) minmax(0,1fr);
  }
  #game-view .world {height:auto;min-height:0;max-height:none}
  #game-view .dialogue-dock {overflow-y:auto}
  #game-view .game-heading,#game-view .game-tools {flex-shrink:0}
}
@media (min-width:900px) and (max-aspect-ratio:4/3) {
  #game-view .game-shell {display:block}
  #game-view .world {height:auto;min-height:0;aspect-ratio:3/2}
  #game-view .dialogue-dock {border-left:0;border-top:3px solid #f0d7ab}
}
:fullscreen #game-view:not([hidden]) {padding-inline:0;padding-bottom:4px}
:fullscreen #game-view .game-shell {border-radius:0;border-inline:0}
:fullscreen #game-view .game-heading,:fullscreen #game-view .game-tools {padding-inline:12px}
@media (max-width:899px), (max-aspect-ratio:4/3) {
  body:has(#game-view:not([hidden])) {display:flex;flex-direction:column;min-height:100dvh}
  body:has(#game-view:not([hidden])) main,
  #game-view:not([hidden]) {display:flex;flex-direction:column;flex:1}
  #game-view .game-shell {display:flex;flex-direction:column;flex:1}
  #game-view .world {flex:none;aspect-ratio:1.2}
  #game-view .dialogue-dock {flex:1;align-content:start}
  #game-view .world[data-kind="phone"] {aspect-ratio:1}
}


/* L’assemblage utilise les mêmes proportions que le dessin de la locomotive. */
.train-frame {width:min(100%,90cqh);aspect-ratio:3/2}
.locomotive-art,.locomotive-base {
  position:absolute;
  inset:0;
  background:url('./assets/objets/locomotive.webp') center / 100% 100% no-repeat;
  pointer-events:none;
}
.locomotive-base {clip-path:inset(60.2% 0 0)}
.locomotive-piece,.locomotive-piece.piece-flying {
  background-image:url('./assets/objets/locomotive.webp');
  transform:none;
  scale:none;
  filter:none;
}
.train-slot:not(.filled) .locomotive-piece {
  filter:grayscale(1) contrast(.6);
  opacity:.40;
}
.train-slot.filled .locomotive-piece {pointer-events:none}
.complete-train .train-slot.filled {visibility:hidden;animation:none}
.train-frame .wheel {
  top:56.6%;
  width:24.1%;
  aspect-ratio:1;
  border-radius:50%;
  clip-path:circle(50%);
  filter:none;
  background-color:#243a50;
  opacity:0;
}
.complete-train.wheels-turning .wheel {opacity:1}
.train-frame .rail {top:93.1%;height:4.8%;left:1%;right:1%}
.train-frame .steam {left:18%;top:-8%;width:9%}
.train-frame .slot-body {left:5.14323%;top:20.31250%;width:58.20312%;height:40.23438%}
.locomotive-piece.piece-body {background-size:171.81208% 248.54369%;background-position:12.30530% 33.98693%}
.piece-choice .locomotive-piece.piece-body {height:auto;width:clamp(18px,7cqw,52px);aspect-ratio:894/412}
.train-frame .slot-cab {left:57.48698%;top:3.12500%;width:38.86719%;height:57.42188%}
.locomotive-piece.piece-cab {background-size:257.28643% 174.14966%;background-position:94.03621% 7.33945%}
.piece-choice .locomotive-piece.piece-cab {height:auto;width:clamp(18px,7cqw,39px);aspect-ratio:597/588}
.train-frame .slot-chimney {left:13.15104%;top:3.12500%;width:17.77344%;height:28.12500%}
.locomotive-piece.piece-chimney {background-size:562.63736% 355.55556%;background-position:15.99367% 4.34783%}
.piece-choice .locomotive-piece.piece-chimney {height:auto;width:clamp(18px,7cqw,39px);aspect-ratio:273/288}

.locomotive-piece.piece-body {clip-path:polygon(0 0,13.7% 0,13.7% 20%,19% 26.5%,34% 26.5%,40% 20%,44.4% 0,100% 0,100% 100%,0 100%)}
.locomotive-piece.piece-cab {clip-path:polygon(0 0,100% 0,100% 100%,14.7% 100%,14.7% 46%,8% 45%,8% 31%,0 31%)}
.locomotive-piece.piece-chimney {clip-path:polygon(0 0,100% 0,100% 90%,83% 94%,74% 99%,40% 100%,20% 96%,17% 92%,0 88%)}
.train-frame .wheel-a {left:10.67708%;background-image:url("./assets/objets/locomotive.webp");background-size:415.13514% 276.75676%;background-position:14.06518% 88.68502%}
.train-frame .wheel-b {left:38.15104%;background-image:url("./assets/objets/locomotive.webp");background-size:415.13514% 276.75676%;background-position:50.25729% 88.68502%}
.train-frame .wheel-c {left:65.82031%;background-image:url("./assets/objets/locomotive.webp");background-size:415.13514% 276.75676%;background-position:86.70669% 88.68502%}

/* Le gobelet reste près de la flaque et hors de la silhouette de l’adulte. */
.scene-camera .cup {left:61%;bottom:23%}

.locomotive-base {
  clip-path:none;
  mask-image:
    linear-gradient(transparent 60.2%,#000 60.2%),
    radial-gradient(ellipse 12.1% 18.15% at 22.72% 74.7%,#000 99%,transparent 100%),
    radial-gradient(ellipse 12.1% 18.15% at 50.26% 74.7%,#000 99%,transparent 100%),
    radial-gradient(ellipse 12.1% 18.15% at 77.86% 74.7%,#000 99%,transparent 100%);
}


/* Les éléments secondaires gardent l’échelle du décor et le contact au sol. */
.window-life {
  left:58%;
  top:12%;
  width:25%;
  height:29%;
}
.window-life .butterfly-flight {width:10%;left:25%;top:38%}
.outdoors .butterfly-flight {width:3.6%}
.outdoors .flying-bird {width:4.5%}
.scene-camera .actor-shadow {
  left:31%;
  width:38%;
  height:3%;
  bottom:-.5%;
  background:radial-gradient(ellipse,#30252c5c,transparent 74%);
}

/* Façades issues de la même planche 1536 × 1024, avec leurs proportions propres. */
.phone-keys,.phone-preview-keys {
  --phone-aspect:317 / 1002;
  --phone-image-size:484.54% 102.20%;
  --phone-image-position:20.84% 50%;
  --display-top:21%;
  --pad-top:58%;
  --pad-bottom:11%;
  --pad-inset:11%;
  --call-top:89.7%;
}
.phone-touch,.phone-preview-touch {
  --phone-aspect:474 / 977;
  --phone-image-size:324.05% 104.81%;
  --phone-image-position:83.15% 51.06%;
  --display-top:15%;
  --pad-top:31%;
  --pad-bottom:16%;
  --pad-inset:11%;
  --call-top:86%;
}
.world[data-kind="phone"] .story-card {left:7%;width:34%}
.story-card .phone-model {margin-top:12px;color:#493c28}
.story-card .phone-model strong {color:#173f63;letter-spacing:0}

.toy-phone.phone-keys,.toy-phone.phone-touch,.phone-preview {
  aspect-ratio:var(--phone-aspect);
  background:url("./assets/objets/telephones-realistes.webp") no-repeat;
  background-size:var(--phone-image-size);
  background-position:var(--phone-image-position);
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  filter:drop-shadow(0 5px 6px #15283d47);
}
.toy-phone.phone-keys,.toy-phone.phone-touch {
  top:50%;
  right:15%;
  bottom:auto;
  left:auto;
  width:auto;
  height:min(96%,590px);
  transform:translateY(-50%);
}
.toy-phone.phone-touch {height:min(94%,525px)}
.toy-phone .phone-title {
  position:absolute;
  top:16%;
  left:13%;
  right:13%;
  margin:0;
  color:#f5f8e8;
}
.toy-phone.phone-touch .phone-title {top:9%;color:#1c2b3f}
.toy-phone .phone-display,.phone-preview-screen {
  position:absolute;
  top:var(--display-top);
  left:13%;
  right:13%;
  height:13%;
  display:grid;
  place-items:center;
  margin:0;
  border:0;
  background:transparent;
  color:#f5f8e8;
  letter-spacing:.14em;
}
.phone-touch .phone-display,.phone-preview-touch .phone-preview-screen {color:#172638}
.phone-keys .phone-display,.phone-preview-keys .phone-preview-screen {font-family:monospace}
.toy-phone .keypad,.phone-preview-pad {
  position:absolute;
  top:var(--pad-top);
  bottom:var(--pad-bottom);
  left:var(--pad-inset);
  right:var(--pad-inset);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:2px;
}
.toy-phone .keypad button,.phone-preview-pad i {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:0;
  color:#fff;
  background:linear-gradient(#555d68,#232830);
  border:1px solid #171c21;
  border-radius:6px;
  box-shadow:inset 0 1px 0 #d1d6dd60,0 1px 0 #10141b;
  line-height:1;
}
.toy-phone .keypad button:hover {background:#536575}
.toy-phone .keypad button.pressed {background:#206b56}
.phone-keys .keypad,.phone-preview-keys .phone-preview-pad {gap:1px 2px}
.phone-touch .keypad,.phone-preview-touch .phone-preview-pad {gap:4px}
.phone-touch .keypad button,.phone-preview-touch .phone-preview-pad i {
  color:#152639;
  border:1px solid #b4c2d2;
  background:#f2f6fb;
  border-radius:999px;
  box-shadow:none;
}
.phone-touch .keypad button:hover {background:#dce7f5}
.phone-touch .keypad button.pressed {background:#c0e7d9}
.phone-key-letters {font-size:clamp(6px,1.4cqh,9px);letter-spacing:.04em;margin-top:2px}
.phone-call,.phone-preview-call {
  position:absolute;
  top:var(--call-top);
  left:24%;
  width:52%;
  height:7.5%;
  min-height:0;
  color:#fff;
  background:#167345;
  border:1px solid #0c5830;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:clamp(17px,3.4cqh,25px);
  line-height:1;
}
.phone-touch .phone-call,.phone-preview-touch .phone-preview-call {border-radius:999px}
.phone-call:not(:disabled):hover {background:#095e30}
.phone-call:disabled {opacity:.65}
.phone-call.phone-hangup {
  background:#b5283b;
  border-color:#88192a;
}
.phone-call.phone-hangup:hover {background:#88192a}
.phone-call-status {
  position:absolute;
  top:35%;
  left:10%;
  right:10%;
  text-align:center;
  color:#172638;
  font-size:clamp(8px,1.8cqh,14px);
  font-weight:800;
}
.phone-keys .phone-call-status {top:33%;color:#f5f8e8}
.phone-preview {position:relative;height:clamp(145px,53cqh,360px);width:auto}
.phone-preview-screen {font-size:clamp(10px,2.4cqh,18px)}
.phone-preview-pad i,.phone-preview-call {
  font-size:clamp(6px,1.4cqh,10px);
  font-style:normal;
}
@media (max-width:760px) {
  #game-view .world[data-kind="phone"] {min-height:350px}
  #game-view .world[data-phone-model="keys"] {min-height:610px}
  #game-view .world[data-phone-model="touch"] {min-height:416px}
  .world[data-kind="phone"] .story-card {left:3%;width:40%;padding:9px}
  .toy-phone.phone-keys,.toy-phone.phone-touch {right:3%}
  .toy-phone.phone-keys {height:580px}
  .toy-phone.phone-touch {height:min(94%,390px)}
  .phone-preview {height:clamp(132px,50cqh,225px)}
}
@media (max-width:380px) {
  #game-view .world[data-phone-model="keys"] {min-height:778px}
  #game-view .world[data-phone-model="touch"] {min-height:586px}
  .world:is([data-phone-model="keys"],[data-phone-model="touch"]) .story-card {top:40px;width:94%}
  .world:is([data-phone-model="keys"],[data-phone-model="touch"]) .story-card .garage {display:none}
  .world:is([data-phone-model="keys"],[data-phone-model="touch"]) .toy-phone {top:auto;right:50%;bottom:8px;transform:translateX(50%)}
}

/* Les illustrations d’observation et d’arrivée ont le même cadrage. */
.scenario-entry {margin:20px auto 0;width:min(100%,360px)}
.scenario-picture {
  aspect-ratio:1;
  background-image:url("./assets/scenes/mises-en-situation.webp");
  background-size:300% 200%;
  background-position:var(--scenario-x) var(--scenario-y);
  background-repeat:no-repeat;
}
.world[data-kind="scenario"] .scene-background,
.world[data-kind="scenarios"] .scene-background {filter:blur(14px) brightness(.70)}
.scenario-frame {
  position:absolute;
  top:50%;
  left:50%;
  width:min(94cqw,94cqh);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:3px solid #ffefd4;
  border-radius:clamp(13px,2cqw,24px);
  overflow:hidden;
  box-shadow:0 10px 30px #10284060;
}
.scenario-frame .scenario-picture {position:absolute;inset:0}
.scenario-picker {
  position:absolute;
  inset:12% 4% 7%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:clamp(5px,2cqw,20px);
}
.scenario-choice {
  min-width:0;
  padding:clamp(4px,1cqw,10px);
  border:1px solid #bbcfdd;
  border-radius:16px;
  background:#eaf3f9;
  box-shadow:0 2px 6px #17365026;
  color:var(--ink);
  text-align:center;
  font-weight:800;
  font-size:clamp(11px,2.4cqw,20px);
  line-height:1.2;
}
.scenario-choice:hover {background:#dcecf7;border-color:#48789b}
.scenario-choice .scenario-picture {border-radius:10px;margin-bottom:8px}
.scenario-choice span {display:grid;place-items:center;min-height:2.4em}
.scenario-note {
  position:absolute;
  inset:auto auto 5% 50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  max-width:92%;
  width:max-content;
  padding:6px 14px 6px 8px;
  background:#fff9e9;
  color:#173f63;
  border:2px solid #d8ad62;
  border-radius:14px;
  font-size:clamp(12px,2.6cqh,18px);
  font-weight:800;
}
.scenario-note img {width:34px;height:34px;object-fit:contain}
.story-card .scenario-picture {width:min(100%,125px);margin:auto;border-radius:8px}
@media (max-width:760px) {
  .story-card .scenario-picture {display:none}
}
@media (max-width:500px) {
  .world[data-kind="scenarios"] .scenario-picker {inset-block-start:17%}
  .world[data-kind="scenario"] .scene-caption {top:8px;left:8px;font-size:11px}
}

#scenario-answers {
  display: grid;
  justify-items: center;
  padding: 6px 10px;
}
body.busy #scenario-answers {visibility: hidden}
.scenario-answer-box {
  display: grid;
  gap: 8px;
  width: min(100%, 700px);
  padding: clamp(8px, 1.2cqw, 15px);
  border: 1px solid #dce7ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 18px #17365038;
  pointer-events: auto;
}
.scenario-answer-box h2 {
  justify-self: center;
  margin: 0;
  color: #183850;
  font-size: clamp(15px, 2.9cqh, 23px);
  text-align: center;
  line-height: 1.25;
}
.scenario-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.5cqw, 16px);
}
.scenario-answer.action-button {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 4px;
  border: 1px solid #bdcfdf;
  border-radius: 10px;
  background: #eaf3f9;
  box-shadow: none;
  color: #183850;
  font-size: clamp(13px, 2.45cqh, 18px);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}
.scenario-answer.action-button:hover {
  background: #dcecf7;
  border-color: #48789b;
}
.scenario-answer.action-button:focus-visible {
  outline: 3px solid #275e87;
  outline-offset: 2px;
}
.scenario-answer-visual {
  display: grid;
  place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: clamp(62px, 17cqh, 126px);
  overflow: hidden;
  border-radius: 9px;
  background: #e8f2f8;
}
.scenario-answer-label {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 5px 6px;
  text-align: center;
  overflow-wrap: anywhere;
}
.scenario-answer-visual .scenario-picture,
.scenario-answer-visual .scenario-answer-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.scenario-answer-visual .scenario-detail:not(.film-still) {height: auto}
.scenario-answer-picture {
  display: block;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1.125;
  background-image: url("./assets/scenes/choix-actions.webp");
  background-size: 400% 300%;
  background-position: var(--answer-x) var(--answer-y);
  background-repeat: no-repeat;
}
.scenario-answer-visual img.scenario-answer-icon {
  padding: 5px;
  object-fit: contain;
}
.scenario-answer-feedback {
  justify-self: center;
  width: fit-content;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #dcecf7;
  color: #183850;
  text-align: center;
  font-size: clamp(13px, 2.6cqh, 16px);
  line-height: 1.3;
}
.scenario-answer-feedback:empty {display: none}

.scenario-picture.emergency-picture {
  background-image:url("./assets/scenes/appels-urgence.webp");
  background-size:200% 200%;
}
.scenario-picker {
  width:min(92%,760px);
  margin-inline:auto;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(6px,1.6cqh,14px);
}
.scenario-choice {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
}
.scenario-choice .scenario-picture {
  width:min(100%,22cqh);
  margin-bottom:4px;
}
.scenario-choice span {
  min-height:0;
  font-size:clamp(10px,2.5cqh,18px);
}
.scenario-answer-number {
  color: #173c61;
  font-size: clamp(32px, 8cqh, 56px);
  font-weight: 850;
}
.evaluation-entry {display:block;margin:10px auto}
.opinion-choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
#modal-body .opinion-choices .action-button {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  margin:0;
  padding:8px 4px;
  min-width:0;
  text-align:center;
}
.opinion-face {font-size:clamp(27px,8vw,52px);line-height:1.1}
.opinion-table-wrap {overflow:auto;margin:14px 0}
.opinion-table {border-collapse:collapse;width:100%;font-size:14px}
.opinion-table :is(th,td) {padding:8px;border-bottom:1px solid #d3dee7;text-align:center}
.opinion-table th:first-child {text-align:left}
@media (max-width:500px) {
  .opinion-table {table-layout:fixed;font-size:12px}
  .opinion-table th:first-child {width:37%}
  .opinion-table :is(th,td) {padding:6px 2px}
  .opinion-table th {overflow-wrap:anywhere}
}

@media (max-width:760px) {
  #progress.show-phase li {font-size:11px;gap:3px}
  #progress.show-phase li::before {width:6px;height:6px}
}
#modal-body .opinion-choices .action-button {
  min-height:96px;
  font-size:clamp(12px,3.2vw,16px);
}
.observation-field {
  display:grid;
  gap:5px;
  margin:10px 0;
  font-weight:700;
}
.observation-field select {
  width:100%;
  min-height:44px;
  padding:6px 10px;
  border:1px solid #90b3d1;
  border-radius:8px;
  color:var(--ink);
  background:#f3f8fc;
  font:inherit;
}
.observation-history h3 {margin-top:16px}
.observation-record {
  margin:6px 0;
  padding:8px;
  border-radius:8px;
  background:#edf5fc;
}
.observation-record summary {cursor:pointer}

/* La scène occupe la largeur du jeu, avec les commandes au même endroit. */
#game-view .game-shell {
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:visible;
}
#game-view .world {
  flex:1 0 auto;
  border-radius:24px 24px 0 0;
}
#game-view .dialogue-dock,
#game-view .scene-actions {
  flex:none;
  min-height:0;
  margin:0;
  padding:8px clamp(9px,2vw,22px);
}
#game-view .dialogue-dock {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:0;
  border-top:1px solid #d3e4f2;
  overflow:visible;
}
#game-view .speaker-portrait {align-self:center}
#game-view .speaker-portrait img {
  width:clamp(35px,4vw,54px);
  height:clamp(35px,4vw,54px);
  border-radius:12px;
  object-fit:cover;
  object-position:center 14%;
}
#game-view .instruction-panel #instruction {font-size:clamp(17px,2vw,26px);margin:0}
#game-view .instruction-panel :is(#message,#feedback) {margin:2px 0 0;font-size:clamp(13px,1.25vw,17px)}
#game-view .instruction-panel #message {max-width:72ch}
#game-view .speaker-line {margin:0}
#game-view .speaker-line .read-button {min-height:29px}
#game-view .scene-actions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));
  gap:8px;
  background:#fffdf6;
  padding-bottom:12px;
  border-radius:0 0 24px 24px;
}
#game-view .scene-actions:empty {display:none}
#game-view .game-shell:has(> .scene-actions:empty) .dialogue-dock {
  border-radius:0 0 24px 24px;
}
#game-view .scene-actions .action-button {
  min-width:0;
  min-height:52px;
  padding:6px 9px;
  box-shadow:0 2px 0 #b8ccdc;
}
#game-view .scene-actions .action-button.primary {box-shadow:0 2px 0 #981f31}
@media (min-width:900px) and (min-aspect-ratio:4/3) {
  #game-view .world {flex:1 1 0;min-height:270px;aspect-ratio:auto}
}
@media (max-width:899px), (max-aspect-ratio:4/3) {
  #game-view .world {height:auto;aspect-ratio:1.2;flex:none}
}
@media (max-width:500px) {
  #game-view .scene-actions {grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr))}
}
.scenario-picture.scenario-detail {
  background-image:var(--scenario-image);
  background-position:50% var(--scenario-y);
  background-size:100% 200%;
  aspect-ratio:var(--scene-ratio);
}
.scenario-frame {
  width:min(100%,200cqh);
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
}
.scenario-frame .scenario-picture {
  inset:auto;
  top:60%;
  left:50%;
  width:max(100%,calc(100cqh * var(--scene-ratio)));
  aspect-ratio:var(--scene-ratio);
  transform:translate(-50%,-60%);
}
.scenario-picture.scenario-backdrop {
  position:absolute;
  inset:-12px;
  aspect-ratio:auto;
  filter:blur(13px) brightness(.66);
  pointer-events:none;
}
.scenario-choice .scenario-picture.scenario-detail {width:min(100%,calc(27cqh * var(--scene-ratio)))}
.scenario-picker {width:min(94%,1050px)}
.spoken-caption {
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:min(540px,92%);
  padding:6px 10px;
  color:#17344e;
  background:#fffdf6f7;
  border:1px solid #e4c88f;
  border-radius:12px;
  box-shadow:0 2px 8px #0d284922;
}
.world > .spoken-caption {
  position:absolute;
  z-index:15;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}
.world:has(> .spoken-caption:not([hidden])) .scene-caption {visibility:hidden}
.spoken-caption .spoken-portrait {
  width:36px;
  height:36px;
  flex:none;
  display:block;
  overflow:hidden;
  border-radius:10px;
  background:#e5f2fc;
}
.spoken-portrait img {width:100%;height:100%;object-fit:cover;object-position:center 10%}
.spoken-caption[data-speaker="narrateur"] .spoken-portrait img {object-fit:contain}
.spoken-caption[data-speaker="secours"] .spoken-portrait img {object-position:center}
.spoken-caption:is([data-speaker="adulte"],[data-speaker="garçon"]) .spoken-portrait img {
  scale:2.05;
  transform-origin:53% 6%;
}
.spoken-words {display:grid;gap:2px}
.spoken-name {font-size:clamp(11px,1.1vw,14px);color:#385575}
.spoken-text {font-size:clamp(14px,1.1vw,17px);font-weight:700;line-height:1.3}
.large-text .spoken-text {font-size:clamp(17px,1.4vw,21px)}
#game-view .dialogue-dock[data-speaking] #speaker-name {color:#236952}
#modal-body > .spoken-caption {width:100%;margin-bottom:12px}
#home-view > .spoken-caption {position:fixed;z-index:22;inset:12px auto auto 50%;transform:translateX(-50%)}
@media (prefers-reduced-motion:no-preference) {
  body:not(.calm) .spoken-caption:not([hidden]) {animation:speaker-appear .17s ease-out}
}
@keyframes speaker-appear {from {opacity:.82;translate:0 -5px} to {opacity:1;translate:0 0}}
@media (max-width:500px) {
  .world > .spoken-caption {padding:5px 8px}
}
@media (max-width:760px) {
  .scenario-frame .scenario-picture {width:100%}
}
#game-view .world,
#game-view #scene {overflow:clip}
#game-view .scene-actions > .action-button:only-child {
  width:min(100%,520px);
  justify-self:center;
}

#game-view .game-tools {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  margin-top:10px;
  padding-inline:2px;
}
.game-tools .tool-group {
  display:flex;
  gap:2px;
  padding:2px;
  border:1px solid #d6e3ef;
  border-radius:15px;
  background:#fff;
}
.game-tools .tool-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:44px;
  padding:4px clamp(5px,1.2vw,14px);
  border:0;
  border-radius:12px;
  background:transparent;
  font-size:clamp(11px,1.1vw,13px);
  white-space:nowrap;
}
.game-tools .tool-button span {font-size:1.15em;color:#38678a}
.game-tools .tool-button:hover {background:#e9f3fa}
.game-tools .tool-button.pause {background:#fff3d2;color:#60430c}
.game-tools .tool-button.pause span {color:inherit}
.game-tools .tool-button.pause:hover {background:#ffe8ab}
.game-tools #busy-note {text-align:center}
@media (max-width:600px) {
  #game-view .game-tools {grid-template-columns:auto auto;justify-content:space-between}
  .game-tools #busy-note {grid-column:1 / -1;grid-row:2}
  .game-tools #busy-note:empty {display:none}
}

.scenario-answer-visual .garage-answer {
  display: grid;
  place-items: center;
}

.scenario-answer .garage {
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1.65;
  margin: 0;
  left: auto;
  scale: none;
}

.scenario-picture.film-still {
  background-image: var(--film-image);
  background-size: cover;
  background-position: center;
}

.film-frame {
  width: 100%;
}

.world:has(.film-frame) > .spoken-caption {
  top: auto;
  bottom: 8px;
}

.film-frame .film-still {
  top: 50%;
  width: min(100%, calc(100cqh * var(--scene-ratio)));
  transform: translate(-50%, -50%);
}

.scenario-picker-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
  #game-view .world[data-kind="scenarios"] {
    min-height: 450px;
  }

  .world[data-kind="scenarios"] .scenario-picker-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    inset-block: 14% 5%;
  }

  .scenario-picker-wide .scenario-picture.scenario-detail {
    width: min(100%, calc(10cqh * var(--scene-ratio)));
  }

  .scenario-picker-wide .scenario-choice span {
    font-size: clamp(11px, 2.1cqh, 16px);
  }
}

.spoken-caption[data-speaker="adulte"] img[src$="/enseignante-sport.jpg?qualite=1"] {
  scale: 1;
  object-position: center;
}

#game-view:has(.world[data-kind="scenarios"]) :is(.dialogue-dock, .game-tools) {
  display: none;
}

#game-view .world[data-kind="scenarios"] {
  flex-grow: 1;
  border-radius: 24px;
}

:fullscreen #game-view .world[data-kind="scenarios"] {
  border-radius: 0;
}

.world[data-kind="phone"] .story-card {
  max-width: 320px;
  padding: clamp(8px, 1vw, 14px);
  border-width: 1px;
  border-radius: 14px;
  box-shadow: 0 2px 8px #0d284922;
}

.story-card .fiction,
.story-card .phone-model {
  margin-block: 4px;
}

.story-card .scenario-picture {
  width: min(100%, 96px);
}

.story-card .scenario-phone-text {
  margin: 5px 0;
  line-height: 1.35;
}

.large-text .scenario-answer.action-button {font-size: clamp(15px, 2.9cqh, 21px)}