:root {
  color-scheme:dark;
  font-family:"Arial Narrow","Liberation Sans Narrow","Trebuchet MS",Arial,sans-serif;
  color:#f4edda;
  background:#101c27;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  width:100%;
  height:100vh;
  height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at center,#304250,#101c27 75%);
}
button,input {
  font:inherit;
}
button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  height:var(--button-height, calc(3.6 * var(--u)));
  padding:0 calc(1.4 * var(--u));
  gap:.5em;
  cursor:pointer;
  color:inherit;
  touch-action:manipulation;
  border:0;
}
button:focus-visible,input:focus-visible {
  outline:3px solid #a6e5ff;
  outline-offset:4px;
}
/* La zone de jeu reçoit le focus pour la touche Espace : pas d'anneau autour de tout l'écran. */
canvas:focus,canvas:focus-visible,#stage:focus,#stage:focus-visible { outline:none; }
button:active {
  transform:translateY(2px);
}
[hidden] {
  display:none!important;
}
#stage {
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  container-type:inline-size;
  box-shadow:0 0 90px #0006;
  background:#263846;
  isolation:isolate;
}
#game {
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  outline-offset:-4px!important;
}
.screen {
  position:absolute;
  inset:0;
}
.toolbar {
  position:absolute;
  top:38%;
  right:2%;
  z-index:5;
  display:flex;
  gap:calc(.55 * var(--u));
}
.toolbar button {
  border:1px solid #9aaea444;
  background:#152731dc;
  border-radius:2px;
  --button-height:calc(2.8 * var(--u));
  min-height:26px;
  padding:0 calc(.95 * var(--u));
  font-size:calc(1.12 * var(--u));
  font-weight:bold;
}
.toolbar button[aria-pressed="false"]#music {
  opacity:.6;
}
.title-screen {
  background:linear-gradient(90deg,transparent 32%,#172b3680 44%,#172b36f0 59%,#172b36fa);
}
.title-content {
  position:absolute;
  left:51%;
  right:5%;
  top:9.7%;
}
.dispatch {
  font-size:calc(1.1 * var(--u));
  color:#ecc979;
  margin:0 0 calc(1.15 * var(--u));
  font-weight:bold;
  letter-spacing:calc(.1 * var(--u));
}
h1 {
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:calc(8.4 * var(--u));
  line-height:.9;
  letter-spacing:calc(.2 * var(--u));
  margin:0;
  color:#d8c39a;
  text-shadow:0 3px 20px #09192399;
  position:relative;
  width:fit-content;
}
h1>span:first-child {
  display:block;
  font-size:calc(3.6 * var(--u));
  letter-spacing:calc(.45 * var(--u));
  line-height:1.3;
  color:#f3eddb;
}
.tagline {
  font-size:calc(1.4 * var(--u));
  margin:calc(1.2 * var(--u)) 0 calc(1.65 * var(--u));
  color:#c4d0cd;
}
.rules {
  display:flex;
  gap:calc(1 * var(--u));
  border-top:1px solid #9db1b136;
  border-bottom:1px solid #9db1b136;
  padding:calc(1 * var(--u)) 0;
}
.rules>div {
  display:flex;
  align-items:center;
  gap:calc(.5 * var(--u));
  flex:1;
  min-width:0;
}
.rules canvas {
  display:block;
  flex:none;
  width:calc(4.6 * var(--u));
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
}
.rules span {
  font-size:calc(.95 * var(--u));
  white-space:nowrap;
  color:#c4d0cd;
}
.rules b {
  display:block;
  color:#fff4da;
  font-size:calc(1.2 * var(--u));
  margin:0;
}
.rules>div>span {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(.22 * var(--u));
  line-height:1;
}
.rules small { font-size:calc(.88 * var(--u));color:#aabfbc;line-height:1; }
.bonus-rules { border-top:0;padding:calc(.65 * var(--u)) 0;align-items:center; }
.bonus-label { flex:0 0 calc(10 * var(--u));margin:0;color:#e5c88b;font-size:calc(1.2 * var(--u));line-height:1; }
.bonus-label span { display:block;margin-top:calc(.4 * var(--u)); }
.howto {
  font-size:calc(1.16 * var(--u));
  line-height:1.8;
  color:#dbe2d8;
  margin:calc(1.1 * var(--u)) 0;
}
kbd {
  font:inherit;
  font-size:.9em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:1.75em;
  min-width:1.75em;
  vertical-align:middle;
  background:#eff2d51a;
  border:1px solid #ced9d742;
  border-bottom-width:2px;
  /* 1 px de plus en haut compense la bordure basse de 2 px (effet touche) */
  padding:1px .5em 0;
  border-radius:4px;
  text-box:trim-both cap alphabetic;
}
.primary {
  background:#d3b77f;
  color:#182933;
  box-shadow:inset 0 1px 0 #ead8ad55;
  border:1px solid #e5d0a5;
  font-weight:900;
  letter-spacing:calc(.08 * var(--u));
  border-radius:2px;
  --button-height:calc(4.4 * var(--u));
  padding:0 calc(2 * var(--u));
  font-size:calc(1.65 * var(--u));
  min-height:30px;
}
.primary:hover {
  background:#e0c795;
}
.title-content>.primary {
  width:100%;
  display:flex;
  justify-content:center;
  gap:calc(2 * var(--u));
}
.title-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:calc(1.45 * var(--u));
  font-size:calc(1.1 * var(--u));
  color:#b8caca;
  gap:calc(1 * var(--u));
}
.title-bottom b {
  color:#d8c39a;
  font-size:calc(1.7 * var(--u));
  margin-left:calc(.6 * var(--u));
}
.text-button {
  background:none;
  color:#d8c39a;
  --button-height:calc(2.8 * var(--u));
  padding:0;
  font-size:calc(1.1 * var(--u));
  text-decoration:underline;
  text-underline-offset:4px;
}
.scrim {
  background:#101e2bd9;
  display:grid;
  place-items:center;
  z-index:4;
  backdrop-filter:blur(5px);
}
.panel {
  text-align:center;
  width:48%;
  background:#21333ceF;
  border:1px solid #79958b66;
  border-top:2px solid #b7a37d;
  padding:calc(2.4 * var(--u)) calc(3.5 * var(--u));
  border-radius:3px;
  box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) #0005;
}
.panel h2 {
  font-family:Impact,"Arial Narrow",sans-serif;
  font-weight:normal;
  font-size:calc(3.6 * var(--u));
  letter-spacing:calc(.03 * var(--u));
  margin:calc(.2 * var(--u)) 0 calc(1 * var(--u));
}
.panel p {
  font-size:calc(1.2 * var(--u));
  line-height:1.5;
}
.panel .dispatch {
  font-size:calc(1.1 * var(--u));
}
.panel .primary {
  margin:calc(.7 * var(--u)) 0;
}
.secondary {
  background:#35505a;
  border:1px solid #8fa99f66;
  border-radius:2px;
  --button-height:calc(3.6 * var(--u));
  min-height:26px;
  padding:0 calc(1.4 * var(--u));
  font-size:calc(1.2 * var(--u));
  font-weight:bold;
}
.secondary:hover {
  background:#45646c;
}
.pause-panel>button {
  display:flex;
  width:100%;
  margin:calc(1 * var(--u)) 0;
}
.panel .hint {
  font-size:calc(1 * var(--u));
  color:#b9ccca;
  margin-bottom:0;
}
.result {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:calc(1 * var(--u));
}
.result strong {
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:calc(6 * var(--u));
  font-weight:normal;
  color:#f2ce85;
}
.result span {
  font-size:calc(1.4 * var(--u));
  color:#c3d0c8;
}
.over-panel {
  padding-top:calc(1.8 * var(--u));
  padding-bottom:calc(1.8 * var(--u));
}
.over-panel h2 {
  margin-bottom:0;
}
.over-panel p {
  margin:calc(.45 * var(--u)) 0;
}
.reason {
  color:#efb7a5;
}
#score-form {
  border-top:1px solid #92b0a333;
  margin-top:calc(1 * var(--u));
  padding-top:calc(1 * var(--u));
}
#score-form label {
  font-size:calc(1.1 * var(--u));
}
.initials-row {
  display:flex;
  justify-content:center;
  gap:calc(.8 * var(--u));
  margin:calc(.8 * var(--u)) 0;
}
#initials {
  width:calc(7.6 * var(--u));
  border:1px solid #d7b56c;
  border-radius:calc(.3 * var(--u));
  background:#132733;
  text-align:center;
  letter-spacing:calc(.5 * var(--u));
  font-size:calc(2 * var(--u));
  text-transform:uppercase;
  color:#f4d489;
  padding:calc(.35 * var(--u));
}
.end-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(1 * var(--u));
}
#saved-message {
  color:#b9dbb4;
  font-size:calc(1 * var(--u));
  min-height:calc(.5 * var(--u));
}
#score-list {
  padding:0;
  list-style:none;
  margin:calc(1.8 * var(--u)) 0;
}
#score-list li {
  display:flex;
  justify-content:space-between;
  padding:calc(.8 * var(--u));
  border-bottom:1px solid #b1c3b726;
  font-size:calc(1.5 * var(--u));
}
#score-list li:first-child {
  color:#f2ce85;
}
#score-list li span:first-child {
  color:#aabcb8;
  width:calc(2 * var(--u));
}
#score-list li b {
  margin-right:auto;
  margin-left:calc(1 * var(--u));
  letter-spacing:calc(.3 * var(--u));
}
#score-list li small {
  font-size:calc(1 * var(--u));
  color:#bed1ca;
  margin:auto calc(1 * var(--u));
}
.signal-button {
  position:absolute;
  bottom:3.9%;
  right:3%;
  z-index:2;
  border:1px solid #e5d0a5;
  background:#d3b77f;
  color:#172c37;
  --button-height:calc(5.6 * var(--u));
  min-height:40px;
  flex-direction:column;
  gap:calc(.45 * var(--u));
  padding:0 calc(2.2 * var(--u));
  border-radius:2px;
  box-shadow:0 3px 16px #0004;
  font-weight:900;
  font-size:calc(1.6 * var(--u));
}
.signal-main {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65em;
}
.signal-button small {
  display:block;
  font-size:calc(.85 * var(--u));
  font-weight:normal;
  margin:0;
}
.signal-button.pressed {
  transform:translateY(3px);
  background:#fff0b7;
  box-shadow:none;
}
.rotate-hint {
  display:none;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media(orientation:portrait) and (max-width:1024px) {
  .rotate-hint {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:fixed;
    inset:0;
    z-index:100;
    margin:0;
    padding:24px;
    text-align:center;
    background:radial-gradient(ellipse at center,#263b43,#0b1822 80%);
    color:#e5cc94;
  }
  .rotate-icon { width:100px;height:100px;margin-bottom:24px;flex:none; }
  .rotate-hint h2 {
    margin:0 0 18px;
    font-size:clamp(26px,7vw,38px);
    line-height:1.15;
  }
  .rotate-hint p {
    margin:0;
    font-size:17px;
    line-height:1.6;
    color:#c1ccc9;
  }
}
@media(prefers-reduced-motion:reduce) {
  button:active {
    transform:none;
  }
  .scrim {
    backdrop-filter:none;
  }
}
#stage[data-state="title"] .toolbar,#stage[data-state="scores"] .toolbar,#stage[data-state="over"] .toolbar {
  top:2.5%;
}
#over-screen {
  justify-items:end;
  padding-right:6%;
  background:linear-gradient(90deg,#0a192932,#101e2bea 60%);
  backdrop-filter:none;
}
#over-screen .panel {
  width:49%;
}
@media(max-height:500px) and (orientation:landscape) {
  .howto {
    font-size:calc(1.4 * var(--u));
  }
  .rules span {
    font-size:calc(1.15 * var(--u));
  }
  .rules b {
    font-size:calc(1.35 * var(--u));
  }
  .title-bottom,.text-button {
    font-size:calc(1.3 * var(--u));
  }
  .toolbar button {
    font-size:calc(1.35 * var(--u));
    padding:0 calc(1 * var(--u));
  }
  .title-content {
    top:8%;
  }
}

/* Separate glyphs from line boxes, with an optical fallback for older engines. */
.button-label {
  display:block;
  line-height:1;
  transform:translateY(var(--optical-y, .035em));
}
.button-icon {
  display:inline-grid;
  place-items:center;
  flex:none;
  width:1em;
  height:1em;
  aspect-ratio:1;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:normal;
  transform:translateY(var(--optical-y, 0px));
}
.play-icon { transform:translate(.08em, var(--optical-y, 0px)); }
@supports(text-box-trim:trim-both) {
  .button-label { text-box-trim:trim-both; text-box-edge:cap alphabetic; }
}
@supports(width:round(nearest, calc(5 * var(--u)), 2px)) {
  .rules canvas { width:round(nearest, calc(4.6 * var(--u)), 2px); }
  button { height:round(nearest, var(--button-height, calc(3.6 * var(--u))), 2px); }
  .button-icon { width:round(nearest, 1em, 2px); height:round(nearest, 1em, 2px); }
}
.volume-control {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(.55 * var(--u));
  height:round(nearest, calc(2.8 * var(--u)), 2px);
  min-height:26px;
  padding:0 calc(.8 * var(--u));
  border:1px solid #9aaea444;
  background:#152731dc;
  border-radius:2px;
  font-size:max(9px, calc(1.05 * var(--u)));
  line-height:1;
}
#volume {
  appearance:none;
  width:calc(7 * var(--u));
  min-width:46px;
  height:4px;
  padding:0;
  margin:0;
  border:0;
  border-radius:2px;
  background:#748c88;
  cursor:pointer;
  touch-action:pan-y;
}
#volume::-webkit-slider-thumb {
  appearance:none;
  width:16px;
  height:16px;
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid #ead4a8;
  background:#c4a978;
}
#volume::-moz-range-thumb {
  width:12px;
  height:12px;
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid #ead4a8;
  background:#c4a978;
}
#volume-value { width:3.1em; text-align:right; font-variant-numeric:tabular-nums; }
@media(max-height:500px) and (orientation:landscape) { .title-content { top:10%; } }
@media(max-width:620px) and (orientation:landscape) {
  .title-content { top:max(12%, 38px); }
  .title-content>.dispatch { display:none; }
}
#stage[data-state="credits"] .toolbar { top:2.5%; }
.credits-link { position:static;flex:none;font-size:calc(1.05 * var(--u)); }
.credits-panel { display:flex;flex-direction:column;width:78%;max-height:82%; }
#credits-content { min-height:0;overflow:auto;text-align:left;font-size:calc(1.15 * var(--u));line-height:1.5;padding-right:calc(1 * var(--u)); }
#credits-content p { font-size:inherit;margin:.6em 0; }
#credits-content a,.credits-source { color:#e4c994;text-underline-offset:3px; }
.credits-source { font-size:calc(1.1 * var(--u));margin:calc(.6 * var(--u)) 0; }
.credits-panel button { flex:none; }
#stage[data-state="ending"] .toolbar { opacity:.8; }

#title-settings .toolbar { position:absolute;top:2.5%;right:2%; }
#pause-settings .toolbar { position:static;display:flex;justify-content:center;flex-wrap:wrap;margin:calc(1.2 * var(--u)) 0; }
#pause-settings .toolbar button { flex:1; }
#pause-settings .volume-control { flex:1 0 100%; }
#pause-settings #volume { width:calc(14 * var(--u)); }
.hud-pause {
  position:absolute;
  z-index:3;
  top:calc(6.25% - 18px);
  right:12px;
  width:36px;
  height:36px;
  padding:0;
  opacity:.6;
  border-radius:50%;
  background:#142a3655;
  font-size:20px;
}
.hud-pause:hover,.hud-pause:focus-visible { opacity:1; }

/* Full-viewport scene; interface units follow the uniform game scale. */
:root {
  --u:min(1vw,1.7777778dvh);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
#stage { position:fixed;inset:0;box-shadow:none; }
#game { width:100%;height:100%; }
.title-content {
  top:calc((100% + var(--safe-top) - var(--safe-bottom)) / 2 + min(20px,calc(2.5 * var(--u))));
  transform:translateY(-50%);
  right:max(5%,calc(var(--safe-right) + 12px));
  max-height:calc(100% - var(--safe-top) - var(--safe-bottom) - 50px);
  overflow:auto;
}
#title-settings .toolbar { top:max(2.5%,calc(var(--safe-top) + 6px));right:max(2%,calc(var(--safe-right) + 8px)); }
.scrim { padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); }
.panel { max-height:100%;overflow:auto; }
#over-screen { justify-items:center;padding-right:calc(var(--safe-right) + 12px); }
#over-screen .panel { width:calc(62 * var(--u));max-width:95%; }
.pause-panel,.scores-panel { width:calc(62 * var(--u));max-width:95%; }
.hud-pause { top:calc(var(--hud-mid,45px) - 18px);right:calc(var(--safe-right) + 12px); }
.signal-button { right:calc(var(--safe-right) + 3%);bottom:calc(var(--safe-bottom) + 3.9%); }
#intro-skip { top:max(4%,calc(var(--safe-top) + 12px));right:max(3%,calc(var(--safe-right) + 16px)); }
.intro-load { bottom:max(7%,calc(var(--safe-bottom) + 16px)); }

/* Bouton plein écran en jeu (écrans tactiles), à gauche du bouton pause. */
.hud-fullscreen { right:calc(var(--safe-right) + 56px); font-size:18px; }
.hud-fullscreen[data-fullscreen="true"] { display:none; }

/* Aide iPhone : installer sur l'écran d'accueil pour le plein écran. */
.ios-tip { position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#050b10cc;backdrop-filter:blur(4px); }
.ios-tip[hidden] { display:none; }
.ios-tip-panel { width:min(420px,100%);max-height:100%;overflow:auto;padding:20px 22px;border:1px solid #d3b77f66;border-radius:12px;background:#172b36;color:#e7ecdf;font:15px/1.45 system-ui,sans-serif;box-shadow:0 20px 60px #000a; }
.ios-tip-panel h2 { margin:0 0 8px;font-size:19px;color:#f0d19a; }
.ios-tip-panel ol { margin:10px 0 16px;padding-left:22px; }
.ios-tip-panel li { margin:4px 0; }
.ios-tip-panel .primary { width:100%;min-height:44px;display:flex;align-items:center;justify-content:center; }
.ios-share { width:20px;height:20px;vertical-align:-4px;color:#6fb6ff; }