/* =========================================================
   Stewybear — pixel art cosy au coin du feu
   100% CSS/SVG, aucune image. Inspiré Stardew / Into the Pit.
   ========================================================= */

:root {
  /* Nuit */
  --night-0: #0b0a12;
  --night-1: #14121d;
  --night-2: #1d2233;
  --sky: #16263a;

  /* Bois (rampe d'ombrage) */
  --wood-0: #20140c;
  --wood-1: #3a2415;
  --wood-2: #5a3a22;
  --wood-3: #7c5230;
  --wood-4: #9c6a3d;

  /* Mur planches */
  --wall-0: #2c1d2a;
  --wall-1: #3b2a30;
  --wall-2: #4a3530;
  --wall-line: #241722;

  /* Feu / lumière */
  --fire-0: #7a1e0a;
  --fire-1: #d8430f;
  --fire-2: #ff7a1a;
  --fire-3: #ffb24d;
  --fire-4: #ffe08a;
  --glow: #ffae46;

  /* Divers */
  --cream: #ffe9c0;
  --ink: #170f0b;
  --outline: #1c120b;
  --bear-0: #4a2c19;
  --bear-1: #7a4a28;
  --bear-2: #9b6237;
  --bear-3: #c98c4f;
  --bear-belly: #d7a166;
  --leaf-0: #1f5135;
  --leaf-1: #2d7950;
  --leaf-2: #6fb46d;

  /* Marques */
  --c-letterboxd: #ff8000;
  --c-youtube: #ff3d35;
  --c-steam: #66c0f4;
  --c-chess: #6b9b41;
  --c-discord: #5865f2;
  --c-github: #f0f0f4;
  --c-supercell: #1c8cf0;

  --focus: #ffe08a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--night-0);
  color: var(--cream);
  font-family: "Pixelify Sans", system-ui, sans-serif;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.world {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, #2a1c20 0%, var(--night-1) 46%, var(--night-0) 100%);
  display: grid;
  place-items: center;
}

/* ----------------------------------------------------------
   Intro
   ---------------------------------------------------------- */
.intro {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-areas: "stack";
  place-content: center;
  justify-items: center;
  text-align: center;
  background: var(--night-0);
  pointer-events: none;
  animation: introFade 1.1s ease 4.7s forwards;
}

/* Les deux temps de l'intro se superposent dans la même cellule */
.intro-studio,
.intro-main {
  grid-area: stack;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
}

/* Temps 1 : carton studio « STEWYBEAR ENTERTAINMENT » */
.intro-studio {
  opacity: 0;
  animation: studioCard 3.1s ease forwards;
}
.intro-studio-name {
  position: relative;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 4.4vw, 2.2rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--fire-0), 0 0 22px rgba(255, 150, 60, 0.45);
}
.intro-studio-sub {
  position: relative;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fire-3);
}

/* Temps 2 : le titre du site */
.intro-main {
  opacity: 0;
  animation: introMainIn 0.8s ease 3.3s forwards;
}

.intro-glow {
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, 0.35), transparent 62%);
  animation: flicker 2.6s steps(8) infinite;
}

.intro-url {
  position: relative;
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--fire-3);
  text-transform: uppercase;
}

.intro-title {
  position: relative;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.5rem, 6vw, 3.4rem);
  color: var(--cream);
  text-shadow: 0 4px 0 var(--fire-0), 0 0 18px rgba(255, 150, 60, 0.5);
  animation: titlePulse 1.4s steps(2) infinite;
}

.intro-hint {
  position: relative;
  margin: 0.4rem 0 0;
  font-size: 1rem;
  color: var(--wood-4);
}

/* ----------------------------------------------------------
   Scène + pièce
   ---------------------------------------------------------- */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(0.6rem, 2vw, 1.4rem);
  opacity: 0;
  animation: sceneReveal 1s ease 5.2s forwards;
}

/* ----------------------------------------------------------
   Forêt de nuit autour de la maison (décor)
   ---------------------------------------------------------- */
.forest {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.forest-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(96, 124, 168, 0.22), transparent 52%),
    linear-gradient(#0a1422 0 46%, #0b1a15 100%);
}

.forest-moon {
  position: absolute;
  top: 3%;
  right: 11%;
  width: 4.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f4e7bd;
  box-shadow: 0 0 22px 6px rgba(244, 231, 189, 0.4);
}

/* Lignes d'arbres : silhouettes de sapins en dents de scie */
.ridge {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  clip-path: polygon(
    0 100%, 4% 30%, 8% 100%, 12% 14%, 16% 100%, 20% 36%, 24% 100%, 28% 8%,
    32% 100%, 36% 28%, 40% 100%, 44% 18%, 48% 100%, 52% 4%, 56% 100%, 60% 30%,
    64% 100%, 68% 12%, 72% 100%, 76% 34%, 80% 100%, 84% 16%, 88% 100%, 92% 26%,
    96% 100%, 100% 10%, 100% 100%
  );
}
.ridge.far {
  height: 30%;
  background: #16291f;
  opacity: 0.65;
}
.ridge.near {
  height: 22%;
  background: #0d1a14;
}

/* Sapins qui flanquent la maison */
.pine {
  position: absolute;
  bottom: 4%;
  background: #102a1d;
  clip-path: polygon(
    50% 0, 58% 26%, 53% 26%, 64% 56%, 57% 56%, 72% 100%,
    28% 100%, 43% 56%, 36% 56%, 47% 26%, 42% 26%
  );
}
.pine.a { left: 1%;   width: 7%; height: 34%; }
.pine.b { left: 6%;   width: 9%; height: 44%; background: #0c2016; }
.pine.c { left: 13%;  width: 6%; height: 27%; opacity: 0.9; }
.pine.d { right: 1%;  width: 7%; height: 34%; }
.pine.e { right: 6%;  width: 9%; height: 44%; background: #0c2016; }
.pine.f { right: 13%; width: 6%; height: 27%; opacity: 0.9; }

.room {
  position: relative;
  width: min(96vw, 62rem);
  aspect-ratio: 1.42;
  max-height: min(82vh, 44rem);
  overflow: hidden;
  border: 6px solid var(--wood-0);
  box-shadow:
    0 0 0 3px #0c0a10,
    0 22px 50px rgba(0, 0, 0, 0.6);
  image-rendering: pixelated;
}

/* Mur en planches + dithering */
.wall {
  position: absolute;
  inset: 0 0 26% 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5.4%,
      var(--wall-line) 5.4% 5.7%
    ),
    repeating-linear-gradient(
      0deg,
      var(--wall-1) 0 11%,
      var(--wall-2) 11% 11.5%,
      var(--wall-0) 11.5% 22%,
      var(--wall-1) 22% 22.5%
    );
}

.wall::after {
  /* dithering d'ombre dans les coins haut */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.5) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(circle at 50% 120%, transparent 38%, #000 78%);
  mask-image: radial-gradient(circle at 50% 120%, transparent 38%, #000 78%);
  opacity: 0.55;
}

/* Plancher */
.floor {
  position: absolute;
  inset: 74% 0 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9.2%,
      rgba(0, 0, 0, 0.4) 9.2% 9.6%
    ),
    linear-gradient(var(--wood-2) 0 14%, var(--wood-1) 14% 100%);
  box-shadow: inset 0 6px 0 var(--wood-3), inset 0 8px 0 var(--wood-0);
}

/* ----------------------------------------------------------
   Fenêtre de nuit
   ---------------------------------------------------------- */
.window {
  position: absolute;
  left: 5%;
  top: 9%;
  width: 19%;
  height: 30%;
  background: linear-gradient(var(--sky) 0 60%, #1d3550 100%);
  border: 5px solid var(--wood-0);
  box-shadow: 0 0 0 3px var(--wood-2), inset 0 0 0 2px #0d1a2a;
  overflow: hidden;
}

.window::before,
.window::after {
  /* croisillons */
  content: "";
  position: absolute;
  background: var(--wood-1);
  box-shadow: 0 0 0 1px var(--wood-0);
}

.window::before {
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  transform: translateX(-50%);
}

.window::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
}

.moon {
  position: absolute;
  right: 16%;
  top: 14%;
  width: 22%;
  aspect-ratio: 1;
  background: #f4e2a0;
  box-shadow: 0 0 14px rgba(244, 226, 160, 0.55), inset -4px -4px 0 #d8c074;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #cfe3ff;
  animation: twinkle 3s steps(2) infinite;
}

.star.s1 { left: 20%; top: 22%; }
.star.s2 { left: 36%; top: 40%; animation-delay: 0.6s; }
.star.s3 { left: 26%; top: 56%; animation-delay: 1.2s; }
.star.s4 { left: 64%; top: 50%; animation-delay: 1.8s; }

.tree-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 8%,
      #0f2417 8% 10%,
      transparent 10% 18%
    ),
    linear-gradient(transparent 0 30%, #123022 30% 100%);
}

/* ----------------------------------------------------------
   Guirlande lumineuse
   ---------------------------------------------------------- */
.garland {
  position: absolute;
  left: 0;
  right: 0;
  top: 2%;
  height: 6%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  pointer-events: none;
}

.garland span {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--fire-4);
  box-shadow: 0 0 6px var(--glow);
  animation: bulb 2.4s steps(2) infinite;
}

.garland span:nth-child(even) {
  margin-top: 14px;
  background: #ffd0a0;
  animation-delay: 0.5s;
}
.garland span:nth-child(3n) { animation-delay: 1s; background: #ffbf6a; }

/* ----------------------------------------------------------
   Bibliothèque + plante
   ---------------------------------------------------------- */
.bookshelf {
  position: absolute;
  right: 4%;
  top: 12%;
  width: 13%;
  height: 26%;
  background: var(--wood-1);
  border: 4px solid var(--wood-0);
  box-shadow: inset 0 33% 0 -2px var(--wood-0), inset 0 66% 0 -2px var(--wood-0);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  padding: 3px;
  gap: 3px;
}

.bookshelf span {
  align-self: stretch;
  margin-top: auto;
  height: 78%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--c-letterboxd) 0 16%,
      var(--c-discord) 16% 30%,
      #c0455f 30% 46%,
      var(--leaf-1) 46% 62%,
      var(--fire-3) 62% 78%,
      var(--c-steam) 78% 100%
    );
}
.bookshelf .b2 { height: 64%; filter: brightness(0.85); }
.bookshelf .b4 { height: 88%; filter: brightness(1.1); }
.bookshelf .b6 { height: 70%; }

.plant {
  position: absolute;
  right: 3.5%;
  bottom: 0.5%;
  width: 9%;
  height: 22%;
}

.plant .pot {
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 64%;
  height: 34%;
  background: var(--fire-0);
  border: 3px solid var(--outline);
  box-shadow: inset 0 6px 0 #93331a;
}

.plant .leaf {
  position: absolute;
  width: 40%;
  height: 60%;
  background: var(--leaf-1);
  border: 3px solid var(--leaf-0);
  border-radius: 60% 0 60% 0;
}
.plant .leaf.l1 { left: 6%; bottom: 28%; transform: rotate(-18deg); }
.plant .leaf.l2 { left: 50%; bottom: 32%; transform: rotate(18deg); background: var(--leaf-2); }
.plant .leaf.l3 { left: 28%; bottom: 42%; transform: rotate(0deg); height: 70%; }

/* ----------------------------------------------------------
   Cheminée (source de lumière)
   ---------------------------------------------------------- */
.fireplace {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 22%;
  height: 56%;
  transform: translateX(-50%);
  z-index: 2;
}

.fireplace .frame {
  position: absolute;
  inset: 0;
  background: var(--wall-2);
  border: 6px solid var(--wood-0);
  box-shadow: inset 0 0 0 4px var(--wood-2);
  z-index: -1;
}

.fireplace .mantel {
  position: absolute;
  left: -10%;
  top: -8%;
  width: 120%;
  height: 12%;
  background: var(--wood-3);
  border: 4px solid var(--wood-0);
  box-shadow: inset 0 6px 0 var(--wood-4);
}

.fireplace .firebox {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 22%;
  bottom: 18%;
  background:
    repeating-linear-gradient(0deg, #120a08 0 14%, #1c100a 14% 16%),
    #160b08;
  border: 4px solid var(--wood-0);
}

.fireplace .hearth {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 10%;
  background: var(--wood-1);
  border: 3px solid var(--outline);
}

.fireplace .logs {
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 20%;
  height: 8%;
  background: var(--wood-2);
  border: 3px solid var(--wood-0);
  box-shadow: 6px 0 0 -1px var(--wood-1);
}

.fire {
  position: absolute;
  left: 50%;
  bottom: 21%;
  width: 40%;
  height: 22%;
  transform: translateX(-50%);
}

.flame {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fire-2);
  box-shadow: 0 0 8px 2px rgba(255, 120, 30, 0.55);
  clip-path: polygon(50% 0, 74% 42%, 66% 100%, 34% 100%, 26% 42%);
  animation: flame 0.5s steps(3) infinite;
}

.flame.f1 { width: 82%; height: 100%; background: var(--fire-1); }
.flame.f2 { width: 56%; height: 74%; background: var(--fire-2); animation-delay: 0.12s; box-shadow: none; }
.flame.f3 { width: 30%; height: 46%; background: var(--fire-4); animation-delay: 0.26s; box-shadow: none; }

.ember {
  position: absolute;
  left: 26%;
  bottom: -8%;
  width: 48%;
  height: 14%;
  background: var(--fire-1);
  box-shadow: 0 0 8px 3px rgba(255, 90, 20, 0.6);
  animation: flicker 0.6s steps(4) infinite;
}

/* ----------------------------------------------------------
   Hotspots (génériques)
   ---------------------------------------------------------- */
.hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 12rem;
  padding: 5px 8px;
  transform: translate(-50%, 4px);
  border: 3px solid var(--outline);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms steps(2), transform 120ms steps(2);
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hotspot:hover,
.hotspot:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0 var(--glow)) brightness(1.18);
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}

/* TV + pouf -------------------------------------------------*/
.tv {
  left: 6.5%;
  top: 44%;
  width: 17%;
  height: 26%;
  z-index: 4;
}

.tv-screen {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 64%;
  overflow: hidden;
  background: linear-gradient(#0a1230 0 62%, #0b1c1e 62% 78%, #0a160d 78% 100%);
  border: 4px solid #120f16;
  box-shadow: 0 0 0 3px var(--wood-2);
}

.tv-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 46%, rgba(255, 255, 255, 0.16) 47% 50%, transparent 51%);
  pointer-events: none;
}

/* Scène ciné : le vélo qui passe devant la lune (clin d'oeil E.T.) */
.movie {
  position: absolute;
  inset: 0;
}

.movie-moon {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 52%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f3ead0;
  box-shadow: inset -4px -4px 0 #d9cba0, 0 0 8px rgba(243, 234, 208, 0.4);
}
.movie-moon::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 30%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: #ddcea0;
  box-shadow: 36% 120% 0 -1px #ddcea0, 120% 50% 0 -2px #ddcea0;
}

.movie-stars {
  position: absolute;
  inset: 0 0 40% 0;
  background:
    radial-gradient(1.5px 1.5px at 14% 22%, #cfe0ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 30% 12%, #cfe0ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 82% 30%, #cfe0ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 70% 14%, #cfe0ff 99%, transparent);
  animation: twinkle 3s steps(2) infinite;
}

.movie-hills {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 26%;
  background:
    radial-gradient(circle at 30% 100%, #0c1d10 0 60%, transparent 61%) 0 0 / 60% 200% no-repeat,
    radial-gradient(circle at 78% 100%, #0a160d 0 60%, transparent 61%) 100% 0 / 70% 200% no-repeat,
    #0a160d;
}

.et-bike {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 62%;
  height: 36%;
  transform: translateX(-50%);
  animation: movieBob 1.6s steps(3) infinite;
}

/* Roues à rayons */
.et-wheel {
  position: absolute;
  bottom: 0;
  width: 36%;
  aspect-ratio: 1;
  border: 3px solid #07080f;
  border-radius: 50%;
  background:
    radial-gradient(circle, #07080f 0 14%, transparent 16%),
    repeating-conic-gradient(#07080f 0 2deg, transparent 2deg 30deg);
}
.et-wheel.back { left: 0; }
.et-wheel.front { right: 0; }

/* Cadre triangulaire reliant les deux moyeux */
.et-frame {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 36%;
  background: #07080f;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 30%, 24% 100%);
}

/* Selle */
.et-seat {
  position: absolute;
  left: 37%;
  bottom: 52%;
  width: 18%;
  height: 6%;
  background: #07080f;
  border-radius: 3px 3px 0 0;
}

/* Guidon (potence + cintre) */
.et-bar {
  position: absolute;
  right: 22%;
  bottom: 30%;
  width: 3%;
  min-width: 3px;
  height: 26%;
  background: #07080f;
}
.et-bar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -100%;
  width: 150%;
  height: 4px;
  background: #07080f;
  border-radius: 2px;
}

/* Panier avant avec la tête d'E.T. qui dépasse */
.et-basket {
  position: absolute;
  right: 7%;
  bottom: 30%;
  width: 16%;
  height: 16%;
  background: #07080f;
  border-radius: 0 0 30% 30%;
}
.et-basket::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -58%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%;
  background: #07080f;
}

/* Cycliste */
.et-rider {
  position: absolute;
  left: 36%;
  bottom: 44%;
  width: 18%;
  height: 40%;
  background: #07080f;
  border-radius: 40% 40% 20% 20%;
}
.et-rider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -44%;
  width: 62%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #07080f;
}

.tv-stand {
  position: absolute;
  left: 40%;
  right: 40%;
  top: 62%;
  height: 14%;
  background: #16121b;
}

.tv-foot {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 74%;
  height: 7%;
  background: var(--wood-2);
  border: 3px solid var(--wood-0);
}

.pouf {
  position: absolute;
  left: 8%;
  bottom: 9%;
  width: 13%;
  height: 11%;
  background: radial-gradient(circle at 40% 30%, #c0455f 0 40%, #8c2e44 41% 100%);
  border: 4px solid #4d1626;
  border-radius: 50% 50% 42% 42%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.pouf::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  filter: blur(1px);
}

/* Cornet de pop-corn (style cinéma) */
.popcorn {
  position: absolute;
  left: 22%;
  bottom: 5.5%;
  width: 7%;
  height: 14%;
  z-index: 3;
  transition: opacity 320ms steps(3);
}
/* ombre au sol : le cornet est posé, il ne flotte plus */
.popcorn::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -7px;
  height: 7px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  filter: blur(1px);
}
.popcorn.eaten { opacity: 0; }

.pc-cup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: repeating-linear-gradient(90deg, #e23b3b 0 22%, #fff3e6 22% 44%);
  border: 3px solid #5a1414;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.pc-cup::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -10%;
  height: 22%;
  background: #fff3e6;
  border: 3px solid #5a1414;
}

.pc-pops {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  height: 32%;
}
/* au repos, les 3 grains affleurent le bord du pot */
.kernel {
  position: absolute;
  width: 30%;
  height: 34%;
  background: #ffe39a;
  border: 2px solid #c8923a;
}
.kernel.k1 { left: 6%;  top: 42%; }
.kernel.k2 { left: 36%; top: 30%; }
.kernel.k3 { left: 62%; top: 44%; }

/* quand Stewy passe : 3 grains sautent hors du pot */
.popcorn.popping .kernel { animation: popOut 0.7s steps(5) 2 both; }
.popcorn.popping .kernel.k1 { --dx: -75%; animation-delay: 0.05s; }
.popcorn.popping .kernel.k2 { --dx: 0%;   animation-delay: 0.28s; }
.popcorn.popping .kernel.k3 { --dx: 75%;  animation-delay: 0.5s; }

/* Bureau ----------------------------------------------------*/
.desk-zone {
  right: 6.5%;
  top: 40%;
  width: 20%;
  height: 34%;
  z-index: 4;
}

.desk-top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 12%;
  background: var(--wood-3);
  border: 3px solid var(--wood-0);
  box-shadow: inset 0 4px 0 var(--wood-4);
}

.desk-top::before,
.desk-top::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 6px;
  height: 2.4rem;
  background: var(--wood-1);
}
.desk-top::before { left: 12%; }
.desk-top::after { right: 12%; }

.desk-monitor {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 10%;
  height: 38%;
  background:
    radial-gradient(circle at 30% 26%, rgba(130, 206, 255, 0.25), transparent 44%),
    linear-gradient(150deg, #264d75, #11151f);
  border: 4px solid #1b1d26;
  box-shadow: 0 0 0 3px var(--wood-1), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.desk-monitor::after {
  content: "";
  position: absolute;
  left: 44%;
  width: 12%;
  bottom: -20%;
  height: 20%;
  background: #1b1d26;
}

.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 34%;
  transform: translate(-50%, -50%);
  background: var(--c-youtube);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  filter: drop-shadow(2px 0 0 #fff5df);
}

.desk-keys {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 26%;
  height: 5px;
  background: repeating-linear-gradient(90deg, #23242d 0 4px, #4c5163 4px 7px);
}

.desk-cup {
  position: absolute;
  right: 10%;
  bottom: 26%;
  width: 9%;
  height: 12%;
  background: var(--c-steam);
  border: 3px solid #1b3a52;
}

.hang-headset {
  position: absolute;
  left: 6%;
  top: 4%;
  width: 16%;
  height: 24%;
}
.hang-headset .hh-band {
  position: absolute;
  inset: 0 30% auto 30%;
  height: 60%;
  border: 4px solid #2a2c38;
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
}
.hang-headset .hh-ear {
  position: absolute;
  left: 18%;
  bottom: 6%;
  width: 30%;
  height: 40%;
  background: var(--c-discord);
  border: 3px solid #2a2c38;
}

/* Tapis + fauteuil + échiquier ------------------------------*/
.rug {
  position: absolute;
  left: 28%;
  right: 12%;
  bottom: 3%;
  height: 20%;
  background:
    repeating-radial-gradient(circle at 50% 120%, #b8472f 0 8px, #8c2e22 8px 16px, #6a3f9b 16px 24px);
  border: 4px solid #3a1d12;
  border-radius: 50% 50% 12px 12px / 70% 70% 12px 12px;
  z-index: 1;
  opacity: 0.96;
}

.armchair {
  position: absolute;
  left: 30%;
  bottom: 6%;
  width: 17%;
  height: 26%;
  z-index: 2;
}
.armchair .ac-back {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 0;
  height: 60%;
  background: #3f6b63;
  border: 4px solid #214038;
  box-shadow: inset 0 6px 0 #4f8077;
}
.armchair .ac-seat {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 44%;
  background: #4f8077;
  border: 4px solid #214038;
}
.armchair .ac-armL,
.armchair .ac-armR {
  position: absolute;
  bottom: 6%;
  width: 16%;
  height: 50%;
  background: #356159;
  border: 4px solid #214038;
}
.armchair .ac-armL { left: 0; }
.armchair .ac-armR { right: 0; }

.chess {
  left: 55%;
  bottom: 4%;
  width: 21%;
  height: 26%;
  z-index: 4;
}

/* Table basse */
.chess-table {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 5%;
  height: 21%;
  background: var(--wood-3);
  border: 3px solid var(--wood-0);
  border-radius: 3px;
  box-shadow: inset 0 4px 0 var(--wood-4), inset 0 -5px 0 var(--wood-1);
}
.chess-table::before,
.chess-table::after {
  content: "";
  position: absolute;
  top: 90%;
  width: 9px;
  height: 0.8rem;
  background: var(--wood-1);
  border: 2px solid var(--wood-0);
  border-top: 0;
}
.chess-table::before { left: 12%; }
.chess-table::after { right: 12%; }

.board {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 24%;
  height: 38%;
  border: 3px solid #2a1a12;
  transform: perspective(22rem) rotateX(44deg);
  transform-origin: 50% 100%;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
  background:
    conic-gradient(
      #e7c987 90deg,
      #5f8b54 90deg 180deg,
      #e7c987 180deg 270deg,
      #5f8b54 270deg
    ) 0 0 / 25% 25%;
}

.pieces {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 24%;
  height: 38%;
  z-index: 3;
}

.cp {
  position: absolute;
  width: 8%;
  height: 15%;
  transform: translate(-50%, -62%);
  background: var(--pc);
  border: 2px solid #15100b;
  border-radius: 32% 32% 14% 14%;
  box-shadow: inset 0 -3px 0 var(--pcd);
}
.cp.light { --pc: #f4ecd6; --pcd: #c7b485; }
.cp.dark { --pc: #2c2622; --pcd: #0f0c0a; }

.cp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -44%;
  width: 72%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--pc);
  border: 2px solid #15100b;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 var(--pcd);
}
.cp::after {
  content: "";
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: -2px;
  height: 22%;
  background: var(--pc);
  border: 2px solid #15100b;
  border-radius: 40%;
}

.cp.pawn { transform: translate(-50%, -62%) scale(0.74); }

.cp.rook::before {
  border-radius: 0;
  width: 84%;
  top: -38%;
  clip-path: polygon(0 38%, 20% 38%, 20% 0, 40% 0, 40% 38%, 60% 38%, 60% 0, 80% 0, 80% 38%, 100% 38%, 100% 100%, 0 100%);
}

.cp.knight::before {
  border-radius: 60% 24% 46% 40%;
  transform: translateX(-50%) rotate(-14deg);
}

.cp.bishop::before {
  border-radius: 50% 50% 46% 46% / 76% 76% 30% 30%;
  width: 60%;
  top: -52%;
}

.cp.queen::before {
  box-shadow:
    inset 0 -2px 0 var(--pcd),
    0 -4px 0 -1px var(--pc),
    -4px -2px 0 -1px var(--pc),
    4px -2px 0 -1px var(--pc);
}

.cp.king { height: 20%; }
.cp.king::before {
  box-shadow:
    inset 0 -2px 0 var(--pcd),
    0 -6px 0 -2px var(--pc),
    -4px -5px 0 -3px var(--pc),
    4px -5px 0 -3px var(--pc);
}

/* ----------------------------------------------------------
   Couche lumière / clair-obscur
   ---------------------------------------------------------- */
.light-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.firelight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 55% at 50% 40%,
      rgba(255, 184, 92, 0.5) 0%,
      rgba(255, 140, 50, 0.22) 34%,
      transparent 64%
    );
  mix-blend-mode: screen;
  animation: firelight 2.4s steps(6) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 72% 68% at 50% 42%,
      transparent 30%,
      rgba(8, 5, 12, 0.55) 72%,
      rgba(5, 3, 8, 0.85) 100%
    );
}

/* ----------------------------------------------------------
   Stewy (sprite blocky)
   ---------------------------------------------------------- */
.stewy {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 8;
  width: clamp(4.6rem, 9.5vw, 6.4rem);
  aspect-ratio: 0.82;
  transform: translateX(-50%);
  pointer-events: none;
  transition:
    left 360ms steps(6),
    bottom 360ms steps(6);
}

.stewy-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 12px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 50%;
  filter: blur(1px);
  animation: shadowFlicker 2.4s steps(6) infinite;
}

.body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}

.stewy.is-hopping .body {
  animation: bearHop 460ms steps(6) both;
}

.head {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 4%;
  aspect-ratio: 1;
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  box-shadow: inset 0 6px 0 var(--bear-3), inset 0 -6px 0 var(--bear-1);
  z-index: 2;
}

.ear {
  position: absolute;
  top: 0;
  width: 26%;
  aspect-ratio: 1;
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  box-shadow: inset 0 4px 0 var(--bear-3);
  z-index: 1;
}
.ear.left { left: 8%; }
.ear.right { right: 8%; }

.eye {
  position: absolute;
  top: 36%;
  width: 13%;
  height: 13%;
  background: var(--ink);
  z-index: 3;
}
.eye.left { left: 30%; }
.eye.right { right: 30%; }

.snout {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 40%;
  height: 26%;
  transform: translateX(-50%);
  background: var(--bear-belly);
  border: 3px solid var(--bear-0);
  z-index: 3;
}

.nose {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 12%;
  height: 9%;
  transform: translateX(-50%);
  background: var(--ink);
  z-index: 4;
}

.belly {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10%;
  height: 52%;
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  box-shadow: inset 0 6px 0 var(--bear-1);
}
.belly::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 14%;
  height: 56%;
  background: var(--bear-belly);
}

.arm,
.foot {
  position: absolute;
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  z-index: 1;
}
.arm {
  top: 44%;
  width: 18%;
  height: 30%;
}
.arm.left { left: 4%; transform-origin: 50% 0; }
.arm.right { right: 4%; transform-origin: 50% 0; }
.foot {
  bottom: 0;
  width: 26%;
  height: 14%;
}
.foot.left { left: 18%; }
.foot.right { right: 18%; }

.headset-overlay {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 6%;
  height: 30%;
  border: 4px solid #2a2c38;
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  opacity: 0;
  z-index: 4;
}
.headset-overlay::before,
.headset-overlay::after {
  content: "";
  position: absolute;
  bottom: -22%;
  width: 22%;
  height: 40%;
  background: var(--c-discord);
  border: 3px solid #2a2c38;
}
.headset-overlay::before { left: -10%; }
.headset-overlay::after { right: -10%; }

/* Poses par état */
.stewy[data-state="letterboxd"] { left: 14.5%; bottom: 16%; }
.stewy[data-state="youtube"],
.stewy[data-state="steam"],
.stewy[data-state="desk"] { left: 80%; bottom: 18%; }
.stewy[data-state="chess"] { left: 62%; bottom: 9%; }
.stewy[data-state="discord"] { left: 80%; bottom: 18%; }

/* Bureau : Stewy se rapproche, bras tendus vers le bureau */
.stewy[data-state="desk"] .arm.left { transform: rotate(38deg); }
.stewy[data-state="desk"] .arm.right { transform: rotate(-38deg); }

/* Pouf : Stewy est de dos, face à l'écran (on ne voit plus son visage) */
.stewy[data-state="letterboxd"] .eye,
.stewy[data-state="letterboxd"] .snout,
.stewy[data-state="letterboxd"] .nose { opacity: 0; }
.stewy[data-state="letterboxd"] .belly {
  background: var(--bear-2);
  box-shadow: inset 0 6px 0 var(--bear-1);
}
.stewy[data-state="letterboxd"] .belly::after { display: none; }

/* Easter egg : Stewy devant le feu */
.stewy[data-state="fire"] { left: 50%; bottom: 26%; }
.stewy.is-hurt .body { animation: hurt 380ms steps(4); }
.stewy.is-hurt .arm.right { transform: rotate(-120deg); }
.stewy.is-hurt .eye { height: 4%; }
.stewy.falling { pointer-events: none; }
.stewy.falling .body { animation: fallIn 720ms steps(8) forwards; }
.stewy.falling .stewy-shadow { opacity: 0; }

/* Surchauffe : Stewy rougit de plus en plus à chaque clic sur le feu */
.head,
.ear,
.belly,
.belly::after,
.snout,
.arm,
.foot {
  transition: background-color 220ms steps(3);
}
.stewy[data-heat="1"] { --bear-0: #5a241a; --bear-1: #9a3a26; --bear-2: #bf5038; --bear-3: #e08457; --bear-belly: #e8a47e; }
.stewy[data-heat="2"] { --bear-0: #641a12; --bear-1: #ab3120; --bear-2: #d24a30; --bear-3: #f07550; --bear-belly: #f59570; }
.stewy[data-heat="3"] { --bear-0: #6c130d; --bear-1: #bb2516; --bear-2: #e03c22; --bear-3: #ff6a44; --bear-belly: #ff8a62; }
.stewy[data-heat="4"] { --bear-0: #760d08; --bear-1: #cc1c0d; --bear-2: #f0341a; --bear-3: #ff5e38; --bear-belly: #ff7a52; }

/* Gouttes de sueur (de plus en plus nombreuses et rapides) */
.sweat {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.stewy[data-heat] .sweat { opacity: 1; }
.drop {
  position: absolute;
  width: 7%;
  height: 11%;
  background: #cfe8ff;
  border: 2px solid #8fc0ea;
  border-radius: 50% 50% 50% 50% / 64% 64% 40% 40%;
  opacity: 0;
}
.drop.d1 { left: 6%; top: 16%; }
.drop.d2 { right: 6%; top: 14%; }
.drop.d3 { left: 13%; top: 30%; }
.drop.d4 { right: 13%; top: 30%; }
.stewy[data-heat="1"] .drop.d1 { animation: sweatDrop 1.1s steps(6) infinite; }
.stewy[data-heat="2"] .drop.d1 { animation: sweatDrop 1s steps(6) infinite; }
.stewy[data-heat="2"] .drop.d2 { animation: sweatDrop 1s steps(6) infinite 0.3s; }
.stewy[data-heat="3"] .drop.d1 { animation: sweatDrop 0.85s steps(6) infinite; }
.stewy[data-heat="3"] .drop.d2 { animation: sweatDrop 0.85s steps(6) infinite 0.25s; }
.stewy[data-heat="3"] .drop.d3 { animation: sweatDrop 0.85s steps(6) infinite 0.5s; }
.stewy[data-heat="4"] .drop { animation: sweatDrop 0.65s steps(6) infinite; }
.stewy[data-heat="4"] .drop.d2 { animation-delay: 0.18s; }
.stewy[data-heat="4"] .drop.d3 { animation-delay: 0.34s; }
.stewy[data-heat="4"] .drop.d4 { animation-delay: 0.5s; }
.stewy[data-state="youtube"] .arm.left,
.stewy[data-state="steam"] .arm.left { transform: rotate(64deg); }
.stewy[data-state="youtube"] .arm.right,
.stewy[data-state="steam"] .arm.right { transform: rotate(-64deg); }
.stewy[data-state="chess"] .body { transform: translateY(4px) scale(0.92); }

/* Discord : le casque n'apparaît qu'une fois arrivé au bureau (classe ajoutée en JS) */
.stewy[data-state="discord"].wearing-headset .headset-overlay { opacity: 1; }
.stewy[data-state="discord"].wearing-headset .arm.right { transform: rotate(-150deg); }
.stewy[data-state="discord"].wearing-headset .arm.left { transform: rotate(150deg); }

/* Cornet tenu en main quand il mange */
.held-corn {
  position: absolute;
  left: 52%;
  top: 48%;
  width: 30%;
  height: 30%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, #e23b3b 0 28%, #fff3e6 28% 56%);
  border: 3px solid #5a1414;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  opacity: 0;
  z-index: 5;
}
.held-corn::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -18%;
  height: 32%;
  background: #ffe39a;
  border: 2px solid #c8923a;
}

.stewy.eating .held-corn { opacity: 1; }
.stewy.eating .arm.right { animation: eat 0.7s steps(2) infinite; transform-origin: 50% 0; }

/* clignement */
.stewy .eye { animation: blink 5s steps(1) infinite; }
.stewy .body { animation: breathe 3.4s steps(2) infinite; }

/* ----------------------------------------------------------
   Titre + label
   ---------------------------------------------------------- */
.room-header {
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  display: none;
}

.room-header p {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--fire-3);
  text-transform: uppercase;
}
.room-header h1 {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: var(--cream);
}

.label {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  z-index: 9;
  width: min(80%, 26rem);
  min-height: 2.4rem;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 4px solid var(--outline);
  background: rgba(28, 18, 14, 0.86);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 140, 0.18);
  color: var(--cream);
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  text-align: center;
}

/* ----------------------------------------------------------
   Barre de réseaux
   ---------------------------------------------------------- */
.quick-links {
  position: absolute;
  left: 50%;
  bottom: clamp(2.7rem, 4.6vw, 3.3rem);
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(94vw, 44rem);
  transform: translateX(-50%);
}

.ql {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 2.4rem;
  padding: 8px 12px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.82);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  transition: transform 90ms steps(2), background 90ms steps(2), color 90ms steps(2);
}

.ql:hover,
.ql:focus-visible {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.ql:focus-visible { box-shadow: 0 0 0 3px var(--focus); }

.ql.letterboxd:hover, .ql.letterboxd:focus-visible { background: var(--c-letterboxd); color: #2a1500; }
.ql.youtube:hover, .ql.youtube:focus-visible { background: var(--c-youtube); color: #2a0000; }
.ql.steam:hover, .ql.steam:focus-visible { background: var(--c-steam); color: #05283a; }
.ql.chess:hover, .ql.chess:focus-visible { background: var(--c-chess); color: #12250a; }
.ql.discord:hover, .ql.discord:focus-visible { background: var(--c-discord); color: #0a0e30; }
.ql.github:hover, .ql.github:focus-visible { background: var(--c-github); color: #14181c; }
.ql.supercell:hover, .ql.supercell:focus-visible { background: var(--c-supercell); color: #fff; }

/* Icônes pixel des marques */
.ql-ico {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.lb-ico {
  background:
    radial-gradient(circle at 50% 50%, #ff8000 0 46%, transparent 47%) 0 4px / 8px 10px no-repeat,
    radial-gradient(circle at 50% 50%, #00e054 0 46%, transparent 47%) 5px 4px / 8px 10px no-repeat,
    radial-gradient(circle at 50% 50%, #40bcf4 0 46%, transparent 47%) 10px 4px / 8px 10px no-repeat;
}

.yt-ico {
  background: var(--c-youtube);
  border-radius: 3px;
}
.yt-ico::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff;
}

.st-ico {
  background: var(--c-steam);
  border-radius: 50%;
}
.st-ico::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid #07283a;
  border-radius: 50%;
  background: #fff;
}
.st-ico::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 3px;
  width: 9px;
  height: 2px;
  background: #07283a;
  transform: rotate(-24deg);
}

.ch-ico {
  background: #fff;
  border: 2px solid #2a221c;
}
.ch-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(var(--c-chess) 0 25%, transparent 0 50%, var(--c-chess) 0 75%, transparent 0) 0 0 / 9px 9px;
}

.dc-ico {
  background: var(--c-discord);
  border-radius: 6px 6px 8px 8px;
}
.dc-ico::before,
.dc-ico::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 3px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}
.dc-ico::before { left: 4px; }
.dc-ico::after { right: 4px; }

/* Logo GitHub : carré sombre + Octocat blanc, dessiné en SVG (data-URI). */
.gh-ico {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%231b1f23'/%3E%3Cpath transform='translate(2.4 2.4) scale(0.7)' fill='%23fff' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Logo Supercell ID : carré bleu + silhouette « profil / carte d'identité » blanche. */
.sc-ico {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%231c8cf0'/%3E%3Ccircle cx='8' cy='6' r='2.4' fill='%23fff'/%3E%3Crect x='3.6' y='9.8' width='8.8' height='5.6' rx='3.4' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ql.discord.copied { background: var(--c-discord); color: #fff; }
.ql.supercell.copied { background: var(--c-supercell); color: #fff; }

/* ----------------------------------------------------------
   Vue bureau (overlay)
   ---------------------------------------------------------- */
.desk-view {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 170, 70, 0.14), transparent 40%),
    rgba(9, 7, 13, 0.94);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
  transition: opacity 220ms steps(3), transform 260ms steps(3);
}

.desk-view[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.desk-close {
  position: absolute;
  top: clamp(0.8rem, 2.4vw, 1.3rem);
  left: clamp(0.8rem, 2.4vw, 1.3rem);
  z-index: 3;
  min-height: 2.4rem;
  padding: 8px 12px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.desk-close:hover,
.desk-close:focus-visible {
  outline: none;
  background: var(--cream);
  color: var(--ink);
}

.desk-scene {
  position: relative;
  width: min(92vw, 56rem);
  aspect-ratio: 1.4;
  max-height: 78vh;
}

.dv-monitor {
  position: absolute;
  left: 50%;
  top: 2%;
  width: min(74%, 40rem);
  aspect-ratio: 1.85;
  transform: translateX(-50%);
}

.dv-screen {
  position: absolute;
  inset: 0 0 16%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 2vw, 1.1rem);
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  border: 6px solid #1b1d26;
  background:
    radial-gradient(circle at 28% 22%, rgba(130, 206, 255, 0.3), transparent 40%),
    linear-gradient(150deg, #173657, #10151f 74%);
  box-shadow: 0 0 0 3px var(--wood-1), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.dv-option {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 3px solid rgba(220, 238, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  font-weight: 600;
  text-decoration: none;
  transition: transform 90ms steps(2), background 90ms steps(2), border-color 90ms steps(2);
}
.dv-option:hover,
.dv-option:focus-visible {
  outline: none;
  transform: translateY(-3px);
}
.dv-youtube:hover, .dv-youtube:focus-visible { border-color: var(--c-youtube); background: rgba(255, 61, 53, 0.18); }
.dv-steam:hover, .dv-steam:focus-visible { border-color: var(--c-steam); background: rgba(102, 192, 244, 0.18); }
.dv-github:hover, .dv-github:focus-visible { border-color: var(--c-github); background: rgba(240, 240, 244, 0.14); }

.dv-ico {
  position: relative;
  display: block;
  width: clamp(2.6rem, 6vw, 3.6rem);
  height: clamp(2.6rem, 6vw, 3.6rem);
}
.dv-ico.yt-ico { border-radius: 8px; }
.dv-ico.yt-ico::after {
  border-top-width: clamp(0.5rem, 1.4vw, 0.8rem);
  border-bottom-width: clamp(0.5rem, 1.4vw, 0.8rem);
  border-left-width: clamp(0.9rem, 2.4vw, 1.3rem);
}
.dv-ico.st-ico::after { width: 38%; height: 38%; right: 8%; top: 12%; }
.dv-ico.st-ico::before { width: 52%; left: 12%; bottom: 22%; }

.dv-neck {
  position: absolute;
  left: 46%;
  bottom: 4%;
  width: 8%;
  height: 12%;
  background: #1b1d26;
}
.dv-base {
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 0;
  height: 5%;
  background: #1b1d26;
}

.dv-desktop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  border: 6px solid var(--wood-0);
  background:
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(0, 0, 0, 0.25) 12% 12.6%),
    linear-gradient(var(--wood-3), var(--wood-1));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
}

.dv-headset {
  position: absolute;
  left: 5%;
  top: 8%;
  width: 23%;
  aspect-ratio: 0.92;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cream);
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.22));
}
.dv-headset:hover,
.dv-headset:focus-visible { outline: none; filter: brightness(1.18) drop-shadow(0 0 10px rgba(124, 138, 255, 0.7)); }
.dv-headset:focus-visible { box-shadow: 0 0 0 3px var(--focus); }

/* Casque gamer : arceau renforcé */
.hs-band {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 52%;
  border: 8px solid #23252f;
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
  background: linear-gradient(#2f3240 0 60%, transparent 60%);
  background-clip: padding-box;
}
/* Coussin intérieur de l'arceau */
.hs-cushion {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 6%;
  height: 15%;
  border-radius: 60px 60px 0 0;
  background: #454a61;
  box-shadow: inset 0 4px 0 #585e7c;
}
/* Bras reliant l'arceau aux écouteurs */
.hs-arm {
  position: absolute;
  top: 36%;
  width: 9%;
  height: 28%;
  background: linear-gradient(#2f3240, #23252f);
  border-radius: 4px;
}
.hs-arm.left { left: 13%; }
.hs-arm.right { right: 13%; }
/* Écouteurs over-ear */
.hs-cup {
  position: absolute;
  top: 50%;
  width: 35%;
  height: 46%;
  background: radial-gradient(circle at 50% 40%, #353a4d 0 44%, #1b1d27 100%);
  border: 6px solid #14151d;
  border-radius: 44% 44% 50% 50%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.45);
}
.hs-cup.left { left: 3%; }
.hs-cup.right { right: 3%; }
/* Anneau lumineux RGB */
.hs-light {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 3px solid #6b76f5;
  box-shadow: 0 0 9px 1px #6b76f5, inset 0 0 6px #6b76f5;
  animation: rgbCycle 4.5s linear infinite;
}
.hs-cup.right .hs-light { animation-delay: -2.2s; }
/* Micro boom avec mousse */
.hs-mic {
  position: absolute;
  left: 12%;
  bottom: 13%;
  width: 28%;
  height: 6px;
  background: #23252f;
  border-radius: 4px;
  transform: rotate(24deg);
  transform-origin: right center;
}
.hs-mic-tip {
  position: absolute;
  left: 5%;
  bottom: 7%;
  width: 13%;
  aspect-ratio: 1;
  background: var(--c-youtube);
  border: 3px solid #23252f;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 61, 53, 0.5);
}
.dv-headset-label {
  position: absolute;
  left: 50%;
  top: 100%;
  width: max-content;
  max-width: 12rem;
  transform: translateX(-50%);
  padding: 5px 8px;
  border: 3px solid var(--outline);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.dv-headset.copied .dv-headset-label {
  background: var(--c-discord);
  color: #fff;
  border-color: #0a0e30;
}

.dv-mousepad {
  position: absolute;
  right: 7%;
  top: 12%;
  width: 27%;
  height: 64%;
  background:
    radial-gradient(circle at 70% 28%, rgba(124, 138, 255, 0.14), transparent 42%),
    #1c1f29;
  border: 3px solid rgba(124, 138, 255, 0.35);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}
/* Souris gamer */
.dv-mouse {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 34%;
  height: 52%;
  transform: translateX(-50%) rotate(-6deg);
  transform-origin: 50% 72%;
  background: linear-gradient(150deg, #363a47 0 50%, #1b1d25 100%);
  border: 3px solid #0e0f14;
  border-radius: 48% 48% 38% 38%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.45), inset 0 4px 0 rgba(255, 255, 255, 0.06);
  transition: transform 240ms steps(4);
}
.m-btn {
  position: absolute;
  top: 0;
  height: 50%;
  width: 48%;
}
.m-btn.left { left: 0; border-right: 2px solid #0e0f14; border-radius: 48% 0 0 0; }
.m-btn.right { right: 0; border-radius: 0 48% 0 0; }
.m-wheel {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 12%;
  height: 20%;
  transform: translateX(-50%);
  background: #6b76f5;
  border: 2px solid #0e0f14;
  border-radius: 3px;
  box-shadow: 0 0 7px #6b76f5;
  animation: rgbCycle 4.5s linear infinite;
}
/* Bande lumineuse RGB */
.m-rgb {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 7%;
  height: 9%;
  border-radius: 40%;
  background: #6b76f5;
  box-shadow: 0 0 10px 2px #6b76f5;
  animation: rgbCycle 4.5s linear infinite;
  animation-delay: -1.4s;
}
.m-cable {
  position: absolute;
  left: 50%;
  top: -34%;
  width: 5px;
  height: 38%;
  transform: translateX(-50%);
  background: #14151b;
  border-radius: 3px;
}

/* Patte de Stewy posée sur la souris */
.dv-paw {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 88%;
  height: 74%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3));
}
.paw-pad {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 80%;
  height: 76%;
  transform: translateX(-50%);
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  border-radius: 46% 46% 52% 52%;
  box-shadow: inset 0 -5px 0 var(--bear-1), inset 0 6px 0 var(--bear-3);
}
.paw-toe {
  position: absolute;
  top: 2%;
  width: 24%;
  height: 30%;
  background: var(--bear-2);
  border: 3px solid var(--bear-0);
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 var(--bear-1);
}
.paw-toe.t1 { left: 4%; top: 14%; }
.paw-toe.t2 { left: 28%; top: -2%; }
.paw-toe.t3 { right: 28%; top: -2%; }
.paw-toe.t4 { right: 4%; top: 14%; }

/* La main déplace la souris quand on vise une option de l'écran */
.dv-desktop[data-aim="youtube"] .dv-mouse {
  transform: translateX(-50%) translate(-58%, -14%) rotate(-15deg);
}
.dv-desktop[data-aim="steam"] .dv-mouse {
  transform: translateX(-50%) translate(54%, -14%) rotate(7deg);
}
.dv-desktop[data-aim] .dv-paw { animation: pawPress 420ms steps(3); }

.dv-keyboard {
  position: absolute;
  left: 33%;
  bottom: 12%;
  width: 34%;
  height: 24%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  padding: 5px;
  border: 3px solid #2b2527;
  border-radius: 4px;
  background: #1f2128;
  box-shadow: inset 0 0 0 2px #34384a;
  transform: perspective(22rem) rotateX(20deg);
}
.dv-keyboard span {
  background: #4b5060;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.dv-keyboard .space {
  grid-column: 3 / 9;
}

/* ----------------------------------------------------------
   Sélecteur de langue
   ---------------------------------------------------------- */
.lang-switch {
  position: absolute;
  right: clamp(0.6rem, 2vw, 1.2rem);
  bottom: clamp(2rem, 3.8vw, 2.6rem);
  z-index: 13;
  display: flex;
  gap: 4px;
}
.lang-switch button {
  min-width: 2.1rem;
  padding: 6px 8px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.82);
  color: var(--cream);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform 90ms steps(2), background 90ms steps(2), color 90ms steps(2);
}
.lang-switch button:hover,
.lang-switch button:focus-visible {
  outline: none;
  transform: translate(1px, 1px);
  background: var(--cream);
  color: var(--ink);
}
.lang-switch button.is-active {
  background: var(--fire-2);
  color: #2a1000;
  border-color: var(--fire-0);
}

.sound-toggle {
  position: absolute;
  left: clamp(0.6rem, 2vw, 1.2rem);
  bottom: clamp(2rem, 3.8vw, 2.6rem);
  z-index: 13;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 6px 8px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.82);
  color: var(--cream);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform 90ms steps(2), background 90ms steps(2);
}
.sound-toggle:hover,
.sound-toggle:focus-visible {
  outline: none;
  transform: translate(1px, 1px);
  background: var(--cream);
}
.sound-toggle.is-muted { opacity: 0.75; }

/* Crédit / contact en bas */
.credit {
  position: absolute;
  left: 50%;
  bottom: clamp(0.3rem, 1.2vw, 0.6rem);
  z-index: 11;
  margin: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92vw;
  text-align: center;
  color: var(--wood-4);
  font-size: clamp(0.66rem, 1.8vw, 0.78rem);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.credit a {
  color: var(--fire-3);
  text-decoration: none;
  pointer-events: auto;
}
.credit a:hover,
.credit a:focus-visible {
  outline: none;
  color: var(--cream);
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Mini-jeu de la cheminée (easter egg)
   ---------------------------------------------------------- */
.fire-game {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: clamp(0.8rem, 3vw, 1.6rem);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 110, 30, 0.18), transparent 46%),
    rgba(8, 5, 6, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms steps(3);
}
.fire-game[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.fg-close {
  position: absolute;
  top: clamp(0.8rem, 2.4vw, 1.3rem);
  right: clamp(0.8rem, 2.4vw, 1.3rem);
  z-index: 3;
  min-width: 2.4rem;
  min-height: 2.4rem;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.fg-close:hover,
.fg-close:focus-visible { outline: none; background: var(--cream); color: var(--ink); }

.fg-stage {
  position: relative;
  width: min(92vw, 24rem);
  aspect-ratio: 360 / 520;
  max-height: 80vh;
}

.fg-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  border: 5px solid var(--wood-0);
  box-shadow: 0 0 0 3px #0c0a10, 0 18px 40px rgba(0, 0, 0, 0.6);
  background: #160b08;
}

.fg-banner {
  position: absolute;
  left: 50%;
  top: 16%;
  width: 86%;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 12px;
  border: 4px solid var(--outline);
  background: rgba(28, 18, 14, 0.92);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 140, 0.18);
  color: var(--cream);
  font-size: clamp(0.95rem, 3.4vw, 1.25rem);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms steps(3);
}
.fg-banner.show { opacity: 1; }

.fg-hud {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 8px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.8);
  color: var(--cream);
  font-size: 0.85rem;
  font-weight: 600;
}

.fg-best {
  position: absolute;
  left: 8px;
  top: 36px;
  padding: 4px 8px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.8);
  color: var(--fire-3);
  font-size: 0.85rem;
  font-weight: 600;
}

.fg-over {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 14px 12px;
  overflow-y: auto;
  background: rgba(8, 5, 6, 0.86);
  text-align: center;
}
.fg-over[hidden] { display: none; }
.fg-newbest {
  margin: 0;
  color: var(--fire-3);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.7rem, 3.2vw, 0.95rem);
  animation: newBestPulse 0.9s steps(2) infinite;
}
.fg-newbest[hidden] { display: none; }
@keyframes newBestPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Formulaire d'envoi du score */
.fg-submit {
  display: flex;
  gap: 6px;
  width: min(100%, 18rem);
  margin: 2px 0;
}
.fg-submit[hidden] { display: none; }
.fg-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.92);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.9rem;
}
.fg-name:focus-visible { outline: none; border-color: var(--fire-2); }
.fg-name:disabled { opacity: 0.7; }
.fg-send {
  flex: 0 0 auto;
  min-height: 2.4rem;
  padding: 8px 12px;
  border: 3px solid var(--fire-0);
  background: var(--fire-2);
  color: #2a1000;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.fg-send:hover,
.fg-send:focus-visible { outline: none; filter: brightness(1.12); }
.fg-send:disabled { cursor: default; filter: none; opacity: 0.85; }

/* Classement mondial */
.fg-board {
  width: min(100%, 18rem);
}
.fg-board-title {
  margin: 4px 0 6px;
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fg-board-title[hidden] { display: none; }
.fg-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  counter-reset: rank;
}
.fg-board-list li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 2px solid var(--outline);
  background: rgba(20, 16, 22, 0.7);
  color: var(--cream);
  font-size: 0.85rem;
}
.fg-board-list li::before {
  content: counter(rank);
  color: var(--fire-3);
  font-weight: 700;
  text-align: right;
}
.fg-board-list li:nth-child(1) { border-color: var(--fire-2); }
.fg-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.fg-row-score { font-weight: 700; color: var(--fire-3); }
.fg-board-status {
  margin: 6px 0 0;
  color: var(--wood-4);
  font-size: 0.85rem;
}
.fg-board-status[hidden] { display: none; }

.fg-over-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.fg-over-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1rem, 5vw, 1.6rem);
  color: var(--fire-3);
  text-shadow: 0 3px 0 var(--fire-0);
}
.fg-over-score { margin: 0; color: var(--cream); font-size: 1.05rem; }
.fg-over button {
  min-width: 8rem;
  min-height: 2.4rem;
  padding: 8px 14px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.fg-over .fg-retry { background: var(--fire-2); color: #2a1000; border-color: var(--fire-0); }
.fg-over button:hover,
.fg-over button:focus-visible { outline: none; filter: brightness(1.12); }

.fg-hint {
  margin: 0;
  color: var(--wood-4);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------
   Keyframes
   ---------------------------------------------------------- */
@keyframes introFade {
  to { opacity: 0; visibility: hidden; }
}
@keyframes studioCard {
  0% { opacity: 0; transform: scale(1.04); }
  16% { opacity: 1; transform: scale(1); }
  68% { opacity: 1; transform: scale(1); }
  90% { opacity: 0; transform: scale(0.99); }
  100% { opacity: 0; }
}
@keyframes introMainIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sceneReveal {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes titlePulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes flame {
  0% { transform: translateX(-50%) scaleY(1) scaleX(1); }
  33% { transform: translateX(-52%) scaleY(1.08) scaleX(0.94); }
  66% { transform: translateX(-48%) scaleY(0.94) scaleX(1.06); }
  100% { transform: translateX(-50%) scaleY(1.02) scaleX(0.98); }
}
@keyframes firelight {
  0% { opacity: 0.92; }
  25% { opacity: 1; }
  45% { opacity: 0.78; }
  60% { opacity: 1; }
  80% { opacity: 0.85; }
  100% { opacity: 0.95; }
}
@keyframes flicker {
  0%, 100% { opacity: 0.9; }
  40% { opacity: 0.5; }
  70% { opacity: 1; }
}
@keyframes shadowFlicker {
  0%, 100% { transform: scaleX(1); opacity: 0.42; }
  40% { transform: scaleX(1.12); opacity: 0.3; }
  70% { transform: scaleX(0.92); opacity: 0.48; }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
@keyframes bulb {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes bearHop {
  0% { transform: translateY(-38%) scale(0.92); }
  60% { transform: translateY(6%) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pop {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes eat {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-78deg); }
}
@keyframes movieBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes rgbCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes popOut {
  0% { transform: translate(0, 0) scale(0.8); }
  45% { transform: translate(var(--dx, 0), -195%) scale(1.1); }
  100% { transform: translate(calc(var(--dx, 0) * 0.4), -25%) scale(1); }
}
@keyframes hurt {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-7%) rotate(-9deg); }
  55% { transform: translateX(4%) rotate(6deg); }
  80% { transform: translateX(-2%) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes fallIn {
  0% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  40% { transform: translateY(-30%) scale(0.7) rotate(180deg); opacity: 1; }
  100% { transform: translateY(-55%) scale(0.12) rotate(420deg); opacity: 0; }
}
@keyframes sweatDrop {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(150%) scale(1); }
}
@keyframes pawPress {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7%); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 820px) {
  body { overflow: auto; }
  .world { min-height: 100svh; height: auto; }
  .scene { min-height: 86svh; padding: 0.6rem; }

  .room {
    width: 96vw;
    aspect-ratio: 1.05;
    max-height: none;
  }
  .stewy { width: clamp(4rem, 16vw, 5.6rem); }
  .label { font-size: 1rem; }
  .ql { font-size: 0.82rem; padding: 7px 9px; }
}

@media (max-width: 560px) {
  .desk-screen,
  .dv-screen { grid-template-columns: 1fr; }
  .ql span:last-child { font-size: 0.78rem; }
}

/* ----------------------------------------------------------
   Mini-jeu « combat sur la Lune » (clic sur la lune)
   ---------------------------------------------------------- */

/* Transition de zoom : un disque lunaire grossit pour remplir l'écran. */
.moon-zoom {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.moon-zoom[aria-hidden="false"] { opacity: 1; }
.moon-zoom-disc {
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #fff7df 0%, var(--fire-4) 40%, #c9a25a 78%, #9c6a3d 100%);
  box-shadow: 0 0 0 0.6rem rgba(255, 224, 138, 0.25), 0 0 4rem rgba(255, 224, 138, 0.55);
  transform: scale(0.4);
}
.moon-zoom.is-zooming .moon-zoom-disc {
  animation: moonZoomIn 700ms steps(8) forwards;
}
@keyframes moonZoomIn {
  0% { transform: scale(0.4); opacity: 0.2; }
  60% { opacity: 1; }
  100% { transform: scale(34); opacity: 1; }
}

/* ----------------------------------------------------------
   Roguelite « Donjon de la Lune » (clic sur la lune)
   ---------------------------------------------------------- */
.moon-rogue {
  position: absolute;
  inset: 0;
  z-index: 36;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: clamp(0.6rem, 2.5vw, 1.4rem);
  background:
    radial-gradient(circle at 50% 18%, rgba(143, 182, 255, 0.14), transparent 52%),
    rgba(5, 5, 11, 0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms steps(3);
}
.moon-rogue[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.mr-close {
  position: absolute;
  top: clamp(0.7rem, 2.2vw, 1.2rem);
  right: clamp(0.7rem, 2.2vw, 1.2rem);
  z-index: 6;
  min-width: 2.3rem;
  min-height: 2.3rem;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.mr-close:hover,
.mr-close:focus-visible { outline: none; background: var(--cream); color: var(--ink); }

.mr-stage {
  position: relative;
  width: min(96vw, 40rem);
  aspect-ratio: 480 / 360;
  max-height: 78vh;
}
.mr-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  border: 5px solid #2a2740;
  box-shadow: 0 0 0 3px #0c0a10, 0 18px 40px rgba(0, 0, 0, 0.6);
  background: #0c0c16;
}

/* Menus superposés (départ, succès, fin, objet) */
.mr-menu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 16px;
  overflow-y: auto;
  background: rgba(6, 6, 12, 0.92);
  text-align: center;
  font-family: "Pixelify Sans", system-ui, sans-serif;
  color: var(--cream);
}
.mr-menu[hidden] { display: none; }
.mr-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.85rem, 4vw, 1.35rem);
  color: var(--fire-3);
}
.mr-sub { margin: 0; color: rgba(255, 233, 192, 0.7); font-size: clamp(0.75rem, 3vw, 0.95rem); }
.mr-shards { margin: 0; font-size: clamp(0.85rem, 3.4vw, 1.05rem); color: #9fe0ff; }
.mr-shards-label { color: rgba(255, 233, 192, 0.6); font-size: 0.85em; }

/* Sanctuaire : liste des améliorations permanentes */
.mr-sanctuary {
  display: grid;
  gap: 6px;
  width: min(92%, 26rem);
  max-height: 38vh;
  overflow-y: auto;
}
.mr-upg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.mr-upg:hover:not(:disabled) { background: rgba(40, 32, 44, 0.95); }
.mr-upg:disabled { opacity: 0.5; cursor: default; }
.mr-upg-info { display: grid; gap: 1px; }
.mr-upg-info strong { font-size: 0.9rem; }
.mr-upg-info small { color: rgba(255, 233, 192, 0.6); font-size: 0.72rem; }
.mr-upg-cost { color: #9fe0ff; font-size: 0.82rem; white-space: nowrap; }

.mr-menu-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mr-menu button:not(.mr-upg) {
  padding: 9px 16px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.mr-play, .mr-retry { background: var(--fire-2) !important; color: #2a1000 !important; border-color: var(--fire-0) !important; }
.mr-shop { background: #1d3a4a !important; color: #cdeaff !important; border-color: #2f6f8f !important; }
.mr-menu button:not(.mr-upg):hover,
.mr-menu button:not(.mr-upg):focus-visible { outline: none; filter: brightness(1.12); }

/* Succès */
.mr-ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(92%, 28rem); max-height: 52vh; overflow-y: auto; }
.mr-ach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.85);
  text-align: left;
  opacity: 0.55;
}
.mr-ach-item.is-on { opacity: 1; border-color: #6e4a16; background: rgba(60, 44, 16, 0.55); }
.mr-ach-ic { font-size: 1.1rem; }
.mr-ach-item strong { display: block; font-size: 0.9rem; }
.mr-ach-item small { color: rgba(255, 233, 192, 0.6); font-size: 0.72rem; }
.mr-ach-progress { margin: 0; color: var(--fire-3); font-family: "Press Start 2P", monospace; font-size: clamp(0.6rem, 2.6vw, 0.8rem); }

/* Écran de fin / objet */
.mr-over-title { margin: 0; font-family: "Press Start 2P", monospace; font-size: clamp(0.95rem, 4.5vw, 1.4rem); color: var(--fire-2); }
.mr-over-msg { margin: 0; font-size: clamp(0.85rem, 3.4vw, 1.05rem); }
.mr-over-reward { margin: 0; color: #9fe0ff; font-family: "Press Start 2P", monospace; font-size: clamp(0.6rem, 2.6vw, 0.8rem); }
.mr-item-name { margin: 0; color: var(--fire-4); font-size: clamp(0.95rem, 3.6vw, 1.15rem); font-weight: 700; }
.mr-item-desc { margin: 0; color: rgba(255, 233, 192, 0.8); font-size: clamp(0.8rem, 3vw, 1rem); }

.mr-hint {
  margin: 0;
  text-align: center;
  color: rgba(255, 233, 192, 0.7);
  font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: clamp(0.72rem, 2.8vw, 0.92rem);
}

/* Panneau d'histoire : carte de chapitre + dialogues de mort */
.mr-story {
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 22px 18px;
  background:
    radial-gradient(circle at 50% 30%, rgba(120, 150, 255, 0.08), transparent 60%),
    rgba(5, 6, 12, 0.95);
}
.mr-story-kicker {
  margin: 0;
  color: var(--fire-3);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.58rem, 2.6vw, 0.78rem);
  letter-spacing: 0.04em;
}
.mr-story-kicker:empty { display: none; }
.mr-story-title {
  margin: 0;
  max-width: 28rem;
  color: var(--fire-4);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.8rem, 3.4vw, 1.15rem);
  line-height: 1.5;
}
.mr-story-title:empty { display: none; }
.mr-story-text {
  margin: 0;
  max-width: 30rem;
  color: var(--cream);
  font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: clamp(0.9rem, 3.4vw, 1.08rem);
  line-height: 1.55;
}
.mr-story--reveal .mr-story-text { font-style: italic; color: #dfe7ff; }
.mr-story--reveal { background: radial-gradient(circle at 50% 40%, rgba(120, 230, 140, 0.06), transparent 60%), rgba(4, 8, 6, 0.96); }
.mr-story-continue {
  padding: 9px 18px;
  border: 3px solid var(--fire-0);
  background: var(--fire-2);
  color: #2a1000;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.mr-story-continue:hover,
.mr-story-continue:focus-visible { outline: none; filter: brightness(1.12); }

/* Bouton « passer » d'une cinématique */
.mr-cine-skip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 7;
  padding: 5px 10px;
  border: 2px solid var(--outline);
  background: rgba(20, 16, 22, 0.8);
  color: var(--cream);
  font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
}
.mr-cine-skip[hidden] { display: none; }
.mr-cine-skip:hover { background: var(--cream); color: var(--ink); }

/* Bouton « succès » dans le hub (visible une fois l'easter egg trouvé) */
.hub-ach {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.2rem);
  bottom: clamp(3.6rem, 8vw, 4.6rem);
  z-index: 14;
  min-width: 2.4rem;
  min-height: 2.4rem;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.82);
  color: var(--cream);
  font-size: 1.05rem;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.hub-ach[hidden] { display: none; }
.hub-ach:hover { background: var(--cream); }

/* Médaille permanente : Donjon terminé à 100 % */
.hub-medal {
  position: fixed;
  left: 50%;
  bottom: clamp(0.4rem, 1.6vw, 0.9rem);
  transform: translateX(-50%);
  z-index: 13;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 3px solid #6e4a16;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff3cf, #d9a93f 70%, #a06a23);
  font-size: 1rem;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 200, 90, 0.5);
}
.hub-medal[hidden] { display: none; }

/* ----------------------------------------------------------
   Accessibilité : mouvement réduit
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Mouvement réduit : on saute le carton studio, on garde un enchaînement bref */
  .intro { animation: introFade 0.001ms ease 1.4s forwards; }
  .intro-main { opacity: 1; }
  .scene { animation: sceneReveal 0.001ms ease 1.6s forwards; }
  .firelight { opacity: 0.95; }
}

/* =========================================================
   Bibliothèque : vue zoom + CD (lanceur du jeu 3D)
   ========================================================= */
.shelf-view {
  position: absolute;
  inset: 0;
  z-index: 37;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 122, 26, 0.16), transparent 46%),
    rgba(9, 7, 13, 0.95);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.06);
  transition: opacity 220ms steps(3), transform 260ms steps(3);
}
.shelf-view[aria-hidden="false"] { opacity: 1; pointer-events: auto; transform: scale(1); }

.sv-close {
  position: absolute;
  top: clamp(0.8rem, 2.4vw, 1.3rem);
  left: clamp(0.8rem, 2.4vw, 1.3rem);
  z-index: 3;
  min-height: 2.4rem;
  padding: 8px 12px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.sv-close:hover,
.sv-close:focus-visible { outline: none; background: var(--cream); color: var(--ink); }

.sv-scene { display: grid; justify-items: center; gap: clamp(12px, 3vw, 22px); text-align: center; }
.sv-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.8rem, 3.4vw, 1.2rem);
  color: var(--fire-3);
}
.sv-rack { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.sv-cd {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 4px solid var(--outline);
  background: rgba(20, 16, 22, 0.92);
  color: var(--cream);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
  transition: transform 120ms ease, filter 120ms ease;
}
.sv-cd:hover,
.sv-cd:focus-visible { outline: none; transform: translateY(-3px); filter: brightness(1.12); }
.sv-cd-disc {
  width: clamp(72px, 18vw, 110px);
  height: clamp(72px, 18vw, 110px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #120c08 0 16%, transparent 17%),
    conic-gradient(from 0deg, #ff7a1a, #ffb24d, #d8430f, #ffe08a, #ff7a1a);
  box-shadow: inset 0 0 0 3px #0c0a10, 0 0 18px rgba(255, 122, 26, 0.45);
}
.sv-cd-label { font-family: "Press Start 2P", monospace; font-size: clamp(0.7rem, 2.6vw, 0.95rem); color: var(--fire-3); line-height: 1.5; }
.sv-cd-label small { font-family: inherit; font-size: 0.62em; color: rgba(255, 233, 192, 0.7); }
.sv-hint { margin: 0; color: rgba(255, 233, 192, 0.6); font-size: clamp(0.72rem, 2.6vw, 0.9rem); }

/* =========================================================
   Jeu 3D « Grand Bear Mafia »
   ========================================================= */
.gbm-game {
  position: absolute;
  inset: 0;
  z-index: 38;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: clamp(0.6rem, 2.5vw, 1.4rem);
  background: rgba(4, 4, 8, 0.99);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms steps(3);
}
.gbm-game[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.gbm-close {
  position: absolute;
  top: clamp(0.7rem, 2.2vw, 1.2rem);
  right: clamp(0.7rem, 2.2vw, 1.2rem);
  z-index: 6;
  min-width: 2.3rem;
  min-height: 2.3rem;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.gbm-close:hover,
.gbm-close:focus-visible { outline: none; background: var(--cream); color: var(--ink); }

.gbm-stage {
  position: relative;
  width: min(96vw, 52rem);
  aspect-ratio: 16 / 10;
  max-height: 80vh;
}
.gbm-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  border: 5px solid #2a2740;
  box-shadow: 0 0 0 3px #0c0a10, 0 18px 40px rgba(0, 0, 0, 0.6);
  background: #10131c;
}

/* HUD par-dessus le canevas */
.gbm-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: "Press Start 2P", monospace;
  color: var(--cream);
}
.gbm-hud[hidden] { display: none; }
.gbm-hud-top {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gbm-stars { font-size: clamp(0.85rem, 3vw, 1.3rem); color: var(--fire-3); letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
.gbm-cash { font-size: clamp(0.7rem, 2.4vw, 1rem); color: #9be89b; text-shadow: 2px 2px 0 #000; }
.gbm-heist {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(60%, 18rem);
}
.gbm-heist[hidden] { display: none; }
.gbm-heist-label { font-size: 0.7rem; color: var(--fire-3); text-shadow: 2px 2px 0 #000; }
.gbm-heist-bar { width: 100%; height: 14px; border: 3px solid var(--outline); background: rgba(0, 0, 0, 0.6); }
.gbm-heist-fill { display: block; height: 100%; width: 0%; background: var(--fire-2); transition: width 80ms linear; }
.gbm-hint-bottom {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  max-width: 90%;
  text-align: center;
  font-size: clamp(0.55rem, 2vw, 0.72rem);
  color: rgba(255, 233, 192, 0.8);
  text-shadow: 1px 1px 0 #000;
}

/* Menus du jeu (départ, pause, fin) */
.gbm-menu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px 16px;
  text-align: center;
  background: rgba(6, 6, 12, 0.93);
  color: var(--cream);
  font-family: "Pixelify Sans", system-ui, sans-serif;
}
.gbm-menu[hidden] { display: none; }
.gbm-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.9rem, 4.2vw, 1.5rem);
  color: var(--fire-3);
  line-height: 1.4;
}
.gbm-over-title { color: #ff5b4d; }
.gbm-sub { margin: 0; color: rgba(255, 233, 192, 0.75); font-size: clamp(0.78rem, 3vw, 1rem); }
.gbm-over-msg { margin: 0; color: rgba(255, 233, 192, 0.85); font-size: clamp(0.78rem, 3vw, 1rem); }
.gbm-controls { display: grid; gap: 3px; margin-top: 6px; color: rgba(255, 233, 192, 0.6); font-size: clamp(0.68rem, 2.6vw, 0.85rem); }
.gbm-controls p { margin: 0; }
.gbm-menu button {
  padding: 10px 20px;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.gbm-play, .gbm-retry, .gbm-resume { background: var(--fire-2) !important; color: #2a1000 !important; border-color: var(--fire-0) !important; }
.gbm-menu button:hover,
.gbm-menu button:focus-visible { outline: none; filter: brightness(1.12); }

.gbm-foot { margin: 0; color: rgba(255, 233, 192, 0.55); font-size: clamp(0.6rem, 2.2vw, 0.8rem); text-align: center; }

/* =========================================================
   Jeu « La Revanche de l'Ours » (.lro-*) — calqué sur .gbm-*
   ========================================================= */
.lro-game {
  position: absolute;
  inset: 0;
  z-index: 38;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: clamp(0.6rem, 2.5vw, 1.4rem);
  background: rgba(4, 6, 4, 0.99);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms steps(3);
}
.lro-game[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.lro-close {
  position: absolute;
  top: clamp(0.7rem, 2.2vw, 1.2rem);
  right: clamp(0.7rem, 2.2vw, 1.2rem);
  z-index: 6;
  min-width: 2.3rem;
  min-height: 2.3rem;
  border: 3px solid var(--outline);
  background: rgba(16, 22, 16, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.lro-close:hover,
.lro-close:focus-visible { outline: none; background: var(--cream); color: var(--ink); }

.lro-stage {
  position: relative;
  width: min(96vw, 52rem);
  aspect-ratio: 16 / 10;
  max-height: 80vh;
}
.lro-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  border: 5px solid #243a24;
  box-shadow: 0 0 0 3px #0a100a, 0 18px 40px rgba(0, 0, 0, 0.6);
  background: #9fc6e0;
  transition: border-color 90ms linear;
}

/* Réticule de visée (vue 1re personne) */
.lro-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Press Start 2P", monospace;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 4px #000, 1px 1px 0 #000;
  pointer-events: none;
}
.lro-crosshair[hidden] { display: none; }

/* HUD par-dessus le canevas */
.lro-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: "Press Start 2P", monospace;
  color: var(--cream);
}
.lro-hud[hidden] { display: none; }
.lro-hud-top {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lro-hp {
  width: clamp(7rem, 28vw, 12rem);
  height: 16px;
  border: 3px solid var(--outline);
  background: rgba(0, 0, 0, 0.55);
}
.lro-hp-fill { display: block; height: 100%; width: 100%; background: #5fce5f; transition: width 120ms linear; }
.lro-stats { display: flex; gap: 12px; align-items: center; }
.lro-ammo { font-size: clamp(0.7rem, 2.4vw, 1rem); color: #ffe07a; text-shadow: 2px 2px 0 #000; }
.lro-ammo[hidden] { display: none; }
.lro-kills { font-size: clamp(0.7rem, 2.4vw, 1rem); color: #cfe6ff; text-shadow: 2px 2px 0 #000; }
.lro-stealth { font-size: clamp(0.7rem, 2.4vw, 1rem); color: #8fe08f; text-shadow: 2px 2px 0 #000; }
.lro-stealth[hidden] { display: none; }

.lro-boss {
  position: absolute;
  left: 50%;
  top: 44px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(70%, 22rem);
}
.lro-boss[hidden] { display: none; }
.lro-boss-label { font-size: 0.62rem; color: #ff6a5a; text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.lro-boss-bar { width: 100%; height: 14px; border: 3px solid var(--outline); background: rgba(0, 0, 0, 0.6); }
.lro-boss-fill { display: block; height: 100%; width: 100%; background: #d11f1f; transition: width 120ms linear; }

.lro-hint-bottom {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  max-width: 90%;
  text-align: center;
  font-size: clamp(0.55rem, 2vw, 0.72rem);
  color: rgba(255, 233, 192, 0.82);
  text-shadow: 1px 1px 0 #000;
}

/* Menus du jeu (départ, pause, fin) */
.lro-menu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px 16px;
  text-align: center;
  background: rgba(4, 8, 4, 0.93);
  color: var(--cream);
  font-family: "Pixelify Sans", system-ui, sans-serif;
}
.lro-menu[hidden] { display: none; }
.lro-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(0.9rem, 4.2vw, 1.5rem);
  color: var(--fire-3);
  line-height: 1.4;
}
.lro-over-title { color: #ff5b4d; }
.lro-over-title.lro-win-title { color: #6bd86b; }
.lro-sub { margin: 0; color: rgba(255, 233, 192, 0.75); font-size: clamp(0.78rem, 3vw, 1rem); }
.lro-over-msg { margin: 0; color: rgba(255, 233, 192, 0.85); font-size: clamp(0.78rem, 3vw, 1rem); }
.lro-controls { display: grid; gap: 3px; margin-top: 6px; color: rgba(255, 233, 192, 0.6); font-size: clamp(0.68rem, 2.6vw, 0.85rem); }
.lro-controls p { margin: 0; }
.lro-menu button {
  padding: 10px 20px;
  border: 3px solid var(--outline);
  background: rgba(16, 22, 16, 0.9);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.lro-play, .lro-retry, .lro-resume { background: var(--fire-2) !important; color: #2a1000 !important; border-color: var(--fire-0) !important; }
.lro-menu button:hover,
.lro-menu button:focus-visible { outline: none; filter: brightness(1.12); }

.lro-foot { margin: 0; color: rgba(255, 233, 192, 0.55); font-size: clamp(0.6rem, 2.2vw, 0.8rem); text-align: center; }

/* =========================================================
   Cinématique d'ouverture : Stewy + jaquette + bulle de pensée
   ========================================================= */
.gbm-cine {
  position: absolute;
  inset: 0;
  z-index: 39; /* au-dessus de l'overlay du jeu (38) pendant la transition */
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 122, 26, 0.14), transparent 55%),
    rgba(9, 7, 13, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms steps(3);
}
.gbm-cine[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.cine-stage {
  position: relative;
  width: min(92vw, 40rem);
  height: min(80vh, 34rem);
}

/* --- Stewy (ours dessiné en CSS, cubique/arrondi) --- */
.cine-bear {
  position: absolute;
  left: 6%;
  bottom: 0;
  width: 230px;
  height: 300px;
  transform: translateY(40px);
  opacity: 0;
}
.gbm-cine.is-playing .cine-bear { animation: cineBearIn 0.5s ease 0.05s forwards; }
@keyframes cineBearIn { to { transform: translateY(0); opacity: 1; } }

.cb-head {
  position: absolute;
  left: 35px;
  top: 40px;
  width: 130px;
  height: 118px;
  background: #8a5a30;
  border-radius: 30px;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12);
}
.cb-ear {
  position: absolute;
  top: 24px;
  width: 52px;
  height: 52px;
  background: #6e4422;
  border-radius: 50%;
}
.cb-ear.left { left: 22px; }
.cb-ear.right { left: 156px; }
.cb-eye { position: absolute; top: 78px; width: 16px; height: 18px; background: #140f0b; border-radius: 50%; }
.cb-eye.left { left: 70px; }
.cb-eye.right { left: 122px; }
.cb-muzzle {
  position: absolute;
  left: 74px;
  top: 100px;
  width: 52px;
  height: 38px;
  background: #d7a166;
  border-radius: 22px;
}
.cb-nose { position: absolute; left: 18px; top: 8px; width: 16px; height: 11px; background: #140f0b; border-radius: 8px; }
.cb-body {
  position: absolute;
  left: 48px;
  top: 150px;
  width: 134px;
  height: 150px;
  background: #8a5a30;
  border-radius: 34px 34px 0 0;
}
.cb-arm {
  position: absolute;
  left: 150px;
  top: 168px;
  width: 60px;
  height: 36px;
  background: #6e4422;
  border-radius: 18px;
  transform: rotate(-18deg);
  transform-origin: left center;
}
/* La jaquette tenue dans la patte */
.cb-case {
  position: absolute;
  left: 188px;
  top: 150px;
  width: 70px;
  height: 78px;
  background: #140f0b;
  border: 3px solid #2a2740;
  border-radius: 6px;
  transform: rotate(-10deg);
  display: grid;
  place-items: center;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.4);
}
.cb-case-disc {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #120c08 0 18%, transparent 19%),
    conic-gradient(from 0deg, #ff7a1a, #ffb24d, #d8430f, #ffe08a, #ff7a1a);
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.5);
}

/* --- Bulle de pensée --- */
.cine-bubble {
  position: absolute;
  right: 4%;
  top: 4%;
  width: 300px;
  height: 230px;
}
.cb-trail {
  position: absolute;
  border-radius: 50%;
  background: #fbf2dd;
  opacity: 0;
  animation: cineTrailIn 0.3s ease forwards;
}
.gbm-cine.is-playing .cb-trail.t1 { animation: cineTrailIn 0.3s ease 0.45s forwards; }
.gbm-cine.is-playing .cb-trail.t2 { animation: cineTrailIn 0.3s ease 0.55s forwards; }
.cb-trail.t1 { width: 26px; height: 26px; left: -28px; bottom: 6px; }
.cb-trail.t2 { width: 44px; height: 44px; left: -2px; bottom: 28px; }
@keyframes cineTrailIn { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cine-cloud {
  position: absolute;
  inset: 0;
  background: #fbf2dd;
  border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
  box-shadow:
    0 0 0 10px rgba(251, 242, 221, 0.35),
    0 14px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  transform: scale(0);
  transform-origin: 12% 88%;
}
.gbm-cine.is-playing .cine-cloud { animation: cineCloudPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; }
@keyframes cineCloudPop { to { transform: scale(1); } }

/* L'« écran » dans la bulle : fond sombre + disque + titre du jeu */
.cine-think {
  width: 78%;
  height: 70%;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #1c2233, #10131c);
  border: 4px solid #2a2740;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
}
.cine-think-disc {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #120c08 0 16%, transparent 17%),
    conic-gradient(from 0deg, #ff7a1a, #ffb24d, #d8430f, #ffe08a, #ff7a1a);
  box-shadow: 0 0 16px rgba(255, 122, 26, 0.5);
  animation: cineDiscSpin 3s linear infinite;
}
@keyframes cineDiscSpin { to { transform: rotate(360deg); } }
.cine-think-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--fire-3);
  text-align: center;
}

/* Phase de zoom : la bulle grandit jusqu'à remplir l'écran, le reste s'efface */
.gbm-cine.is-zooming .cine-bear,
.gbm-cine.is-zooming .cb-trail { opacity: 0; transition: opacity 200ms ease; }
.gbm-cine.is-zooming .cine-cloud {
  animation: none;
  transform: scale(26);
  border-radius: 0;
  transition: transform 900ms cubic-bezier(0.7, 0, 0.84, 0);
}
.gbm-cine.is-zooming .cine-think {
  border-width: 0;
  border-radius: 0;
  transition: border-radius 600ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .cine-bear,
  .cb-trail,
  .cine-cloud { animation-duration: 0.001ms !important; }
}

/* ==========================================================
   Version mobile : manettes tactiles + adaptations
   ----------------------------------------------------------
   Tout est conditionné à la classe `html.is-touch` (posée par
   touch.js) pour ne rien changer sur desktop.
   ========================================================== */

/* --- Manettes des mini-jeux ------------------------------- */
.touch-pad {
  display: none; /* masqué par défaut ; affiché seulement sur tactile, en jeu */
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* le centre laisse passer (canvas) ; seuls les boutons captent */
}

/* On n'affiche la manette que sur tactile ET pendant le jeu actif
   (pas dans les menus / écrans de fin), via :has(). */
html.is-touch .fire-game[aria-hidden="false"]:has(.fg-over[hidden]) .fg-touch,
html.is-touch .moon-rogue[aria-hidden="false"]:not(:has(.mr-menu:not([hidden]))) .mr-touch,
html.is-touch .gbm-game[aria-hidden="false"]:has(.gbm-hud:not([hidden])) .gbm-touch,
html.is-touch .lro-game[aria-hidden="false"]:has(.lro-hud:not([hidden])) .lro-touch {
  display: block;
}

.tc-left,
.tc-right {
  position: absolute;
  bottom: clamp(0.7rem, 4vw, 2rem);
  pointer-events: auto;
}
.tc-left { left: clamp(0.6rem, 3vw, 1.6rem); }
.tc-right { right: clamp(0.6rem, 3vw, 1.6rem); }

/* Groupe d'actions (boutons libres : saut, E, viser…) */
.tc-cluster {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 10px;
  align-items: flex-end;
  max-width: 44vw;
}
.tc-right.tc-cluster { justify-content: flex-end; }

/* Croix directionnelle 3×3 (haut / gauche-droite / bas) */
.tc-dpad {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas:
    ".  up ."
    "l  .  r"
    ".  dn .";
  gap: 8px;
}
.tc-dpad .tc-up { grid-area: up; }
.tc-dpad .tc-l  { grid-area: l; }
.tc-dpad .tc-r  { grid-area: r; }
.tc-dpad .tc-dn { grid-area: dn; }

.tc-btn {
  width: clamp(2.9rem, 12vw, 3.7rem);
  height: clamp(2.9rem, 12vw, 3.7rem);
  display: grid;
  place-items: center;
  border: 3px solid var(--outline);
  background: rgba(20, 16, 22, 0.78);
  color: var(--cream);
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* pas de scroll/zoom parasite sous le doigt */
}
.tc-btn.is-pressed {
  background: var(--cream);
  color: var(--ink);
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.tc-big {
  width: clamp(3.5rem, 15vw, 4.6rem);
  height: clamp(3.5rem, 15vw, 4.6rem);
}
/* Bouton « viser » de La Revanche de l'Ours : surligné quand actif */
.tc-aim.is-active {
  background: #ffb24d;
  color: var(--ink);
  border-color: #ffb24d;
}

/* --- Voile « tourne ton téléphone » (jeux larges en portrait) --- */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  html.is-touch .gbm-game[aria-hidden="false"] ~ .rotate-hint,
  html.is-touch .lro-game[aria-hidden="false"] ~ .rotate-hint {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 60; /* au-dessus des jeux (38) et des manettes */
    place-items: center;
    text-align: center;
    padding: 2rem;
    background: rgba(6, 5, 10, 0.97);
    color: var(--cream);
  }
}
.rotate-hint-ico {
  display: block;
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: rotateHintPulse 1.8s steps(8) infinite;
}
.rotate-hint-text {
  margin: 0 auto;
  max-width: 16rem;
  font-size: 1.1rem;
  line-height: 1.4;
}
@keyframes rotateHintPulse {
  0%, 100% { transform: rotate(0deg); }
  55% { transform: rotate(90deg); }
}

/* --- Petites adaptations portrait ------------------------- */
/* L'intro ne déborde plus sur écran étroit. */
.intro-glow { width: min(26rem, 80vw); height: min(26rem, 80vw); }

/* Cibles tactiles confortables sur la barre de réseaux du hub. */
html.is-touch .ql { min-height: 2.75rem; }