/* OctoCat-Code — thème GitHub Dark + composant de jeu */

/* Police pixel auto-hébergée (Press Start 2P, licence OFL) : aucune requête externe. */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --md-text-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --octo-pixel: "Press Start 2P", ui-monospace, monospace;
}

/* ---------- Socle : remplace la feuille de style du thème, qui n'est plus chargée (la page ne contient que le jeu) ---------- */
html { -webkit-text-size-adjust: none; text-size-adjust: none; box-sizing: border-box; font-size: 125%; height: 100%; overflow-x: hidden; }
@media screen and (min-width: 100em) { html { font-size: 137.5%; } }
@media screen and (min-width: 125em) { html { font-size: 150%; } }
*, :after, :before { box-sizing: inherit; }
body {
  margin: 0; position: relative; display: flex; flex-direction: column; width: 100%; min-height: 100%;
  background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.5rem;
  font-family: var(--md-text-font), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a, button, input, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { background: transparent; border: 0; font-family: inherit; font-size: inherit; margin: 0; padding: 0; }
input { border: 0; outline: none; }
code, kbd, pre { font-feature-settings: "kern"; font-family: var(--md-code-font), monospace; }
@media (prefers-reduced-motion) { *, :after, :before { transition: none !important; } }

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d1117;
  --md-default-bg-color--light: #161b22;
  --md-default-fg-color: #c9d1d9;
  --md-default-fg-color--light: #8b949e;
  --md-primary-fg-color: #161b22;
  --md-primary-bg-color: #f0f6fc;
  --md-accent-fg-color: #3fb950;
  --md-typeset-a-color: #58a6ff;
  --md-code-bg-color: #161b22;
  --md-footer-bg-color: #010409;
  --octo-green: #3fb950;
  --octo-red: #f85149;
  --octo-gold: #d29922;
  --octo-border: #30363d;
  --octo-panel: #161b22;
}

/* ---------- Composant jeu (canvas 600×250 + éditeur + console) ---------- */

.octo-stage { background: #0d1117; line-height: 0; }
.octo-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 250;
  image-rendering: pixelated;
}

.octo-editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-top: 2px solid var(--octo-border);
  border-radius: 0;
  background: #0d1117;
  color: #e6edf3;
  caret-color: var(--octo-green);
  font: 0.8rem/1.5 "Roboto Mono", monospace;
  tab-size: 2;
  resize: vertical;
}
.octo-editor:focus { outline: 2px solid var(--octo-green); outline-offset: -2px; }

.octo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-top: 2px solid var(--octo-border);
}
.octo-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--octo-border);
  border-radius: 6px;
  background: #21262d;
  color: #c9d1d9;
  font: 600 0.75rem/1.2 "Roboto Mono", monospace;
  cursor: pointer;
}
.octo-btn:hover:not(:disabled) { background: #30363d; }
.octo-btn:disabled { opacity: 0.5; cursor: progress; }
.octo-btn--primary { background: #238636; border-color: #2ea043; color: #fff; }
.octo-btn--primary:hover:not(:disabled) { background: #2ea043; }

.octo-console {
  box-sizing: border-box;
  min-height: 4.2rem;
  max-height: 11rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  overflow-y: auto;
  border-top: 2px solid var(--octo-border);
  background: #010409;
  font: 0.75rem/1.55 "Roboto Mono", monospace;
  white-space: pre-wrap;
}
.octo-console__line--dim { color: #6e7681; }
.octo-console__line--ok { color: var(--octo-green); }
.octo-console__line--err { color: var(--octo-red); }
.octo-console__line--hint { color: #58a6ff; }
.octo-console__line--gold { color: var(--octo-gold); }

/* ---------- Hub : scène d'accueil jouable ---------- */

.octo-hero {
  max-width: 720px;
  margin: 1rem auto 1.5rem;
  border: 2px solid var(--octo-border);
  border-radius: 6px;
  background: #010409;
  box-shadow: 0 0 0 2px #010409, 0 8px 24px rgba(1, 4, 9, 0.6);
  overflow: hidden;
  outline-offset: 3px;
}
.octo-hero:focus-visible { outline: 2px solid var(--octo-green); }
.octo-hero__error { padding: 1rem; color: var(--octo-red); }

/* ---------- Page de jeu plein écran (overrides/game.html) ---------- */

.octo-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.octo-fs {
  position: fixed;
  z-index: 50; /* au-dessus des barres latérales (invisibles) de Material, qui interceptaient des clics */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Bandes haut/bas = prolongement du ciel et du premier plan, pour une scène 2,4:1 sur n'importe quel écran */
  background: linear-gradient(#3a47b4 0 50%, #150e24 50% 100%);
}
.octo-fs .octo-hero {
  /* le canvas épouse toute la fenêtre : la largeur logique s'adapte au format de l'écran */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body:has(.octo-fs) { margin: 0; overflow: hidden; background: #150e24; }
.octo-fs .octo-stage, .octo-fs .octo-canvas { width: 100%; height: 100%; aspect-ratio: auto; }
/* Plein écran du navigateur : le canvas garde son format (pas de déformation) et se centre, bandes ciel / sol de chaque côté. */
html.octo-fs-on .octo-fs .octo-stage { display: flex; align-items: center; justify-content: center; }
html.octo-fs-on .octo-fs .octo-canvas {
  width: min(100vw, 100vh * var(--octo-aspect, 2)) !important;
  height: min(100vh, 100vw / var(--octo-aspect, 2)) !important;
}

/* ---------- Interface de jeu en surimpression (briefing, éditeur, console) ---------- */

.octo-fs .octo-hero { position: relative; }
.octo-ui { position: absolute; inset: 0; pointer-events: none; font-size: clamp(12px, 1.7vh, 17px); }
.octo-ui > * { pointer-events: auto; }

.octo-panel {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  box-sizing: border-box;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.45em;
  padding: 0.7em max(1em, 4vw) 0.8em;
  background: rgba(13, 17, 23, 0.95);
  border-top: 3px solid var(--octo-green);
  box-shadow: 0 -6px 0 rgba(1, 4, 9, 0.5);
}
.octo-panel.is-open { display: grid; }
.octo-panel__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3em 1em; align-items: baseline; }
.octo-panel__title { font: 0.62em/1.5 var(--octo-pixel); color: #f0f6fc; }
.octo-panel__goal { font: 0.8em/1.4 var(--md-code-font); color: #e3b341; }
.octo-panel__goal.is-locked { color: #8b949e; font-style: italic; }
.octo-panel__head { display: grid; gap: 0.3em; min-height: 0; }
.octo-hints { display: grid; gap: 0.2em; max-height: 5.5em; overflow-y: auto; padding: 0.35em 0.6em; border-left: 4px solid #58a6ff; background: rgba(88, 166, 255, 0.1); border-radius: 0 4px 4px 0; font-size: 0.82em; line-height: 1.45; color: #c9d1d9; }
.octo-hints:empty { display: none; }
.octo-confirm { display: grid; gap: 0.5em; padding: 0.5em 0.7em; border-left: 4px solid #f0883e; background: rgba(240, 136, 62, 0.14); border-radius: 0 4px 4px 0; font-size: 0.85em; line-height: 1.45; color: #ffe8d0; }
.octo-confirm:empty { display: none; }
.octo-confirm__row { display: flex; flex-wrap: wrap; gap: 0.5em; }
.octo-confirm.is-refused { border-left-color: #58a6ff; background: rgba(88, 166, 255, 0.12); color: #d6e8ff; }
.octo-btn--warn { border-color: #f0883e; color: #ffd8b0; }
.octo-wallet { align-self: center; padding: 0 0.6em; font: 600 0.9em var(--md-code-font, monospace); color: #ffe08a; white-space: nowrap; }
.octo-btn.is-poor { border-style: dashed; color: #8b949e; }
.octo-panel .octo-editor {
  min-height: 0; height: 100%; resize: none;
  border: 2px solid var(--octo-border); border-radius: 4px;
  font-size: 1em; line-height: 1.5;
}
.octo-panel .octo-actions { padding: 0; border: 0; gap: 0.5em; }
.octo-panel .octo-btn { font-size: 0.8em; }
.octo-btn--right { margin-left: auto; }
.octo-panel .octo-console {
  min-height: 0; height: 4.8em; max-height: none;
  border: 2px solid var(--octo-border); border-radius: 4px; font-size: 0.82em;
}

.octo-dialog {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  padding: 1em;
  background: rgba(1, 4, 9, 0.6);
}
.octo-dialog.is-open { display: flex; }
.octo-dialog__card {
  box-sizing: border-box;
  width: min(640px, 100%); max-height: 92%; overflow-y: auto;
  padding: 1.2em 1.4em 1.3em;
  background: #161b22; color: #c9d1d9;
  border: 3px solid #58a6ff; border-radius: 6px;
  box-shadow: 0 0 0 3px #010409, 0 12px 32px rgba(1, 4, 9, 0.7);
  line-height: 1.55;
}
.octo-dialog__title { margin: 0 0 0.8em; font: 0.95em/1.6 var(--octo-pixel); color: #3fb950; }
.octo-dialog__lore { margin: 0 0 0.8em; font-style: italic; color: #8b949e; }
.octo-dialog__text { margin: 0 0 0.8em; }
.octo-dialog__tip { margin: 0.2em 0; font-size: 0.92em; color: #a5b4c4; }
.octo-dialog__label { margin: 1.1em 0 0.35em; font: 0.7em/1.4 var(--octo-pixel); color: #58a6ff; letter-spacing: 0.04em; }
.octo-dialog__goal { margin: 1.2em 0 0.4em; padding: 0.7em 0.9em 0.8em; background: linear-gradient(90deg, rgba(227, 179, 65, 0.16), #0d1117 70%); border-left: 5px solid #e3b341; border-radius: 0 6px 6px 0; color: #f0f6fc; }
.octo-dialog__goal-title { margin-bottom: 0.3em; font: 0.7em/1.4 var(--octo-pixel); color: #ffe08a; }
.octo-dialog__goal-text { margin: 0; font-size: 1.06em; line-height: 1.6; }
.octo-dialog strong { color: #ffffff; }
.octo-key { padding: 0.04em 0.4em; border: 1px solid #3a4a6a; border-radius: 4px; background: #0d1117; color: #ffe08a; font: 0.92em var(--md-code-font, monospace); white-space: nowrap; }
.octo-dialog__goal .octo-key { color: #7ee787; border-color: #2f6a3a; }
.octo-dialog__foot { position: sticky; bottom: -1.3em; margin: 0.6em -1.4em -1.3em; padding: 0.7em 1.4em 1.1em; background: linear-gradient(rgba(22, 27, 34, 0), #161b22 28%); }
.octo-dialog__code { margin: 0 0 0.8em; padding: 0.6em 0.8em; background: #0d1117; border-radius: 0 4px 4px 4px; font: 0.95em var(--md-code-font); color: #e6edf3; }
.octo-tabs { display: flex; gap: 2px; }
.octo-tab { padding: 0.25em 0.8em; border: 0; border-radius: 4px 4px 0 0; background: #21262d; color: #8b949e; font: 0.8em var(--md-code-font); cursor: pointer; }
.octo-tab.is-on { background: #0d1117; color: #3fb950; }
.octo-dialog .octo-btn { margin-top: 0.4em; font-size: 0.85em; }

@media (max-width: 700px), (max-height: 520px) {
  .octo-panel { height: 48%; }
}

.octo-audio {
  position: absolute; top: 0.6em; right: 0.8em; z-index: 5;
  display: flex; align-items: center; gap: 0.5em;
}
.octo-vol {
  width: 5.5em; height: 44px; margin: 0; cursor: pointer;
  accent-color: var(--octo-green); opacity: 0.75;
}
.octo-vol:hover, .octo-vol:focus-visible { opacity: 1; }
.octo-mute {
  padding: 0.35em 0.7em;
  border: 2px solid var(--octo-border); border-radius: 4px;
  background: rgba(13, 17, 23, 0.8); color: #e6edf3;
  font: 0.7em/1.2 var(--octo-pixel); cursor: pointer;
}
.octo-mute:hover { border-color: var(--octo-green); }

/* Choix du costume (accueil, à gauche du bouton du son, une fois plus de 499 pièces gagnées). */
.octo-skin { position: relative; }
.octo-skin__toggle { color: #ffe08a; border-color: #8a6d1f; font-size: 1.05em; }
.octo-skin__label { font-size: 0.7em; vertical-align: 0.1em; }
.octo-skin__toggle:hover, .octo-skin.is-open .octo-skin__toggle { border-color: #ffe08a; }
.octo-skin__panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; flex-direction: column; gap: 4px; min-width: 15em;
  padding: 10px; border: 2px solid #ffe08a; border-radius: 6px; background: rgba(13, 17, 23, 0.96);
}
.octo-skin.is-open .octo-skin__panel { display: flex; }
.octo-skin__head { color: #ffe08a; font: 0.62em/1.4 var(--octo-pixel, monospace); padding: 2px 4px 6px; white-space: nowrap; }
.octo-skin__row {
  text-align: left; padding: 0.6em 0.8em; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #e6edf3;
  font: 0.7em/1.3 var(--octo-pixel, monospace); cursor: pointer; min-height: 40px; white-space: nowrap;
}
.octo-skin__row:hover, .octo-skin__row:focus-visible { border-color: #ffe08a; background: rgba(227, 179, 65, 0.14); outline: none; }
.octo-skin__row.is-on { color: #ffe08a; }
@media (max-width: 1000px), (max-height: 520px) { .octo-skin__label { display: none; } }

/* Tactile et mobiles : pas de défilement élastique, pas de zoom au double toucher, pas de surbrillance au toucher. */
html:has(.octo-fs), body:has(.octo-fs) { overscroll-behavior: none; }
.octo-fs { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.octo-fs canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
.octo-mute { min-width: 44px; min-height: 44px; } /* cible tactile minimale */

/* Phase « trajet » : boutons tactiles (téléphones, tablettes) et bouton « Passer le trajet ». */
.octo-pad { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 4; }
.octo-pad.is-on { display: block; }
.octo-pad__side { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-end; }
.octo-pad__side--left { left: max(14px, env(safe-area-inset-left)); }
.octo-pad__side--right { right: max(14px, env(safe-area-inset-right)); }
.octo-pad__btn {
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  width: 64px; height: 64px; border-radius: 12px;
  border: 2px solid rgba(240, 246, 252, 0.55); background: rgba(13, 17, 23, 0.55); color: #f0f6fc;
  font: 24px/1 var(--octo-pixel, monospace); display: grid; place-items: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.octo-pad__btn--round { border-radius: 50%; width: 68px; height: 68px; }
.octo-pad__btn--hot { border-color: rgba(248, 81, 73, 0.8); }
.octo-pad__btn.is-down { background: rgba(88, 166, 255, 0.55); }
.octo-pad__btn--up, .octo-pad__btn--down { width: 52px; height: 52px; font-size: 18px; }
.octo-skip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
  padding: 0.6em 1em; border: 2px solid var(--octo-border, #30363d); border-radius: 4px;
  background: rgba(13, 17, 23, 0.9); color: #e6edf3; font: 0.7em/1.2 var(--octo-pixel, monospace); cursor: pointer;
}
.octo-skip:hover { border-color: var(--octo-green, #3fb950); }

/* Sélecteur de niveaux (accueil). */
.octo-picker { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.octo-picker__toggle {
  padding: 0.55em 0.9em; border: 2px solid var(--octo-border, #30363d); border-radius: 4px;
  background: rgba(13, 17, 23, 0.82); color: #e6edf3; font: 0.7em/1.2 var(--octo-pixel, monospace); cursor: pointer; min-height: 44px;
}
.octo-picker__toggle:hover, .octo-picker.is-open .octo-picker__toggle { border-color: var(--octo-green, #3fb950); }
.octo-picker__panel {
  display: none; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto;
  padding: 10px; border: 2px solid var(--octo-border, #30363d); border-radius: 6px; background: rgba(13, 17, 23, 0.94);
}
.octo-picker.is-open .octo-picker__panel { display: flex; }
.octo-picker__head { color: #ffe08a; font: 0.62em/1.4 var(--octo-pixel, monospace); padding: 2px 4px 6px; }
.octo-picker__row {
  text-align: left; padding: 0.6em 0.8em; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #e6edf3;
  font: 0.7em/1.3 var(--octo-pixel, monospace); cursor: pointer; min-height: 40px; white-space: nowrap;
}
.octo-picker__row:hover:not(:disabled) { border-color: var(--octo-green, #3fb950); background: rgba(63, 185, 80, 0.12); }
.octo-picker__row.is-done { color: #7ee787; }
.octo-picker__row.is-locked { color: #6e7681; cursor: not-allowed; }

/* Téléphone en portrait : invite à passer en paysage. */
.octo-rotate { display: none; position: absolute; inset: 0; z-index: 20; background: #0d1117; color: #f0f6fc; text-align: center; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; padding: 24px; }
.octo-rotate__icon { margin: 0; font-size: 4em; color: #ffe08a; animation: octo-spin 2.4s ease-in-out infinite; }
.octo-rotate__text { margin: 0; font: 0.9em/1.4 var(--octo-pixel, monospace); }
.octo-rotate__sub { margin: 0; color: #8b949e; font: 0.8em/1.4 system-ui, sans-serif; }
@keyframes octo-spin { 0%, 20% { transform: rotate(0); } 70%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) { .octo-rotate { display: flex; } }
@media (prefers-reduced-motion: reduce) { .octo-rotate__icon { animation: none; } }

/* Menu réglages ⚙ (touches, son, affichage, jeu). */
.octo-gear { font-size: 1em; position: relative; }
.octo-gear--warn::after { content: "!"; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #f85149; color: #fff; font: 700 11px/16px system-ui, sans-serif; text-align: center; }
.octo-set { display: none; position: absolute; inset: 0; z-index: 30; align-items: center; justify-content: center; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(1, 4, 9, 0.72); }
.octo-set.is-open { display: flex; }
.octo-set__card {
  box-sizing: border-box; display: flex; flex-direction: column; width: min(680px, 100%); max-height: 100%;
  background: #161b22; color: #c9d1d9; border: 3px solid #58a6ff; border-radius: 6px;
  box-shadow: 0 0 0 3px #010409, 0 12px 32px rgba(1, 4, 9, 0.7); font: 14px/1.45 system-ui, sans-serif;
}
.octo-set__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 4px; }
.octo-set__title { margin: 0; font: 0.85rem/1.6 var(--octo-pixel, monospace); color: #3fb950; }
.octo-set__x { width: 40px; height: 40px; border: 0; border-radius: 4px; background: transparent; color: #8b949e; font-size: 18px; cursor: pointer; }
.octo-set__x:hover { color: #f0f6fc; background: #21262d; }
.octo-set__tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid #30363d; overflow-x: auto; }
.octo-set__tab { padding: 8px 14px; min-height: 40px; border: 0; border-radius: 4px 4px 0 0; background: transparent; color: #8b949e; font: 600 13px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.octo-set__tab:hover { color: #e6edf3; }
.octo-set__tab.is-on { background: #0d1117; color: #3fb950; box-shadow: inset 0 -2px 0 #3fb950; }
.octo-set__msg { min-height: 1.4em; padding: 4px 16px 0; color: #7ee787; font-size: 13px; }
.octo-set__msg.is-bad { color: #ff7b72; }
.octo-set__body { padding: 6px 16px 10px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.octo-set__lead { margin: 4px 0 8px; color: #8b949e; font-size: 13px; }
.octo-set__lead--small { font-size: 12px; margin-top: 12px; }
.octo-set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #21262d; }
.octo-set__row--keys { align-items: flex-start; }
.octo-set__txt { display: flex; flex-direction: column; min-width: 0; }
.octo-set__txt strong { color: #e6edf3; font-weight: 600; }
.octo-set__desc { color: #8b949e; font-size: 12px; }
.octo-set__desc--warn { color: #ffa657; }
.octo-set__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 62%; }
.octo-set__chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid #484f58; border-radius: 4px; background: #0d1117; color: #f0f6fc; font: 600 12px var(--md-code-font, monospace); }
.octo-set__chipx { width: 22px; height: 22px; border: 0; border-radius: 3px; background: transparent; color: #8b949e; font-size: 15px; line-height: 1; cursor: pointer; }
.octo-set__chipx:hover { color: #ff7b72; background: #21262d; }
.octo-set__none { color: #6e7681; font-size: 12px; align-self: center; }
.octo-set__add { min-width: 32px; height: 30px; padding: 0 10px; border: 1px dashed #58a6ff; border-radius: 4px; background: transparent; color: #58a6ff; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.octo-set__add:hover { background: rgba(88, 166, 255, 0.14); }
.octo-set__add.is-wait { border-style: solid; background: rgba(227, 179, 65, 0.16); color: #ffe08a; border-color: #e3b341; animation: octo-blink 1s steps(2) infinite; }
@keyframes octo-blink { 50% { opacity: 0.55; } }
.octo-set__switch { min-width: 64px; min-height: 36px; border: 2px solid #484f58; border-radius: 18px; background: #21262d; color: #8b949e; font: 700 12px system-ui, sans-serif; cursor: pointer; }
.octo-set__switch.is-on { border-color: #3fb950; background: rgba(63, 185, 80, 0.18); color: #7ee787; }
.octo-set__seg { display: flex; border: 2px solid #484f58; border-radius: 6px; overflow: hidden; }
.octo-set__segbtn { min-height: 34px; padding: 0 12px; border: 0; background: #0d1117; color: #8b949e; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.octo-set__segbtn.is-on { background: rgba(63, 185, 80, 0.22); color: #7ee787; }
.octo-set__range { width: 45%; min-width: 120px; height: 36px; accent-color: #3fb950; cursor: pointer; }
.octo-set__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.octo-set__btn { min-height: 38px; padding: 0 14px; border: 2px solid #484f58; border-radius: 4px; background: #21262d; color: #e6edf3; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.octo-set__btn:hover { border-color: #3fb950; }
.octo-set__btn--ok { border-color: #3fb950; background: #238636; }
.octo-set__btn--danger { border-color: #f85149; color: #ffa198; }
.octo-set__btn--danger:hover { background: rgba(248, 81, 73, 0.18); border-color: #f85149; }
.octo-set__block { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #21262d; }
.octo-set__block strong { color: #e6edf3; font-weight: 600; }
.octo-set__ta { box-sizing: border-box; width: 100%; resize: vertical; padding: 8px; border: 1px solid #30363d; border-radius: 4px; background: #0d1117; color: #c9d1d9; font: 12px/1.4 var(--md-code-font, monospace); }
.octo-set__footbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.octo-set__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 12px; border-top: 1px solid #30363d; color: #6e7681; font-size: 12px; }
@media (max-width: 600px), (max-height: 480px) {
  .octo-set { padding: 4px; }
  .octo-set__card { border-width: 2px; }
  .octo-set__row--keys { flex-direction: column; gap: 6px; }
  .octo-set__chips { max-width: 100%; justify-content: flex-start; }
  .octo-set__foot span { display: none; }
  .octo-set__foot { justify-content: flex-end; padding: 6px 12px 8px; }
}
.octo-set__head, .octo-set__tabs, .octo-set__msg, .octo-set__foot { flex: 0 0 auto; }
.octo-set__msg:empty { display: none; }
@media (max-height: 480px) {
  .octo-set__head { padding: 2px 8px 0 14px; }
  .octo-set__x { width: 34px; height: 34px; }
  .octo-set__title { font-size: 0.72rem; }
  .octo-set__tab { min-height: 34px; padding: 4px 12px; }
  .octo-set__body { padding: 2px 12px 6px; }
  .octo-set__row { padding: 6px 0; }
  .octo-set__lead { margin: 2px 0 4px; }
}

/* Pas de ligatures dans le code : « >= » doit se voir comme deux signes (pas « ≥ ») pour que les enfants sachent quoi taper. */
.octo-key, .octo-dialog__code, .octo-editor, .octo-console, .octo-set__chip, .octo-set__ta { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* Plein écran : la souris est cachée pendant l'action (clic molette pour la montrer / cacher), mais reste visible
   dans l'énigme (fenêtre d'explication, éditeur, boutons : .octo-puzzle) et dans le menu ⚙. */
html.octo-hide-cursor:not(.octo-menu-open):not(.octo-puzzle) canvas { cursor: none !important; }
.octo-toast { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 40; padding: 0.5em 0.9em; border-radius: 4px; background: rgba(13, 17, 23, 0.92); border: 1px solid #58a6ff; color: #e6edf3; font: 0.72em/1.3 var(--octo-pixel, monospace); opacity: 0; pointer-events: none; transition: opacity 0.25s; white-space: nowrap; }
.octo-toast.is-on { opacity: 1; }

/* Fin d'un tour de 10 niveaux : choix du langage (accueil) */
.octo-lapup { align-items: flex-start; padding-top: 4%; z-index: 60; }
.octo-lapup .octo-dialog__card { border-color: #ffe08a; }
.octo-lang-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.6em 0 0.4em; }
.octo-lang { flex: 1 1 150px; box-sizing: border-box; padding: 0.7em 0.8em; text-align: left; background: #0d1117; border: 2px solid #30363d; border-radius: 6px; color: #f0f6fc; font: inherit; cursor: pointer; }
.octo-lang:hover, .octo-lang:focus-visible { border-color: #ffe08a; background: #1a2030; outline: none; }
.octo-lang__name { display: block; margin-bottom: 0.45em; font: 0.78em/1.4 var(--octo-pixel); color: #ffe08a; }
.octo-lang__tag { display: block; font-size: 0.85em; line-height: 1.45; color: #a5b4c4; }
.octo-lang__done { display: block; margin-top: 0.4em; font-size: 0.75em; color: #7ee787; }

/* ---------- Page 404 : plein écran, rien d'autre que la scène (les commandes du son et des réglages sont cachées) ---------- */
.octo-fs--404 { background: #0a0820; }
html[data-octo-scene="notfound"] .octo-audio { display: none !important; }