:root {
  --u: 3.9px; /* 1 % de la largeur de la scène, fixé en JS */
  --ink: #1b1b28;
  --white: #fffdf7;
  --red: #e53935;
  --blue: #1e88e5;
  --green: #43b047;
  --yellow: #ffd21f;
  --display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --text: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body { display: grid; place-items: center; }

#stage {
  position: relative;
  width: min(100vw, calc(100dvh * 0.5625));
  height: 100dvh;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--text);
  font-weight: 800;
  color: var(--ink);
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#btn-mute {
  position: absolute;
  top: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  border: calc(var(--u) * 0.8) solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: calc(var(--u) * 5);
  cursor: pointer;
  z-index: 5;
}
#btn-mute.off { background: #b9b9c6; text-decoration: line-through; }

/* phrase qui surgit au-dessus de la lettre quand la chanson démarre */
#l-shout {
  font-family: var(--display);
  font-size: calc(var(--u) * 11);
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: calc(var(--u) * 1.8) var(--ink);
  paint-order: stroke fill;
  transform: rotate(-4deg) scale(0);
}
#l-shout.on { animation: shout 0.9s 1.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards, wobble 0.5s 2.3s ease-in-out infinite alternate; }
#l-shout:empty { display: none; }
@keyframes shout { to { transform: rotate(-4deg) scale(1); } }
@keyframes wobble { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(-2deg) scale(1.06); } }

.screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8);
  text-align: center;
}
.screen[hidden] { display: none; }

/* ---------- titre ---------- */
#title { justify-content: flex-start; padding-top: calc(var(--u) * 20); }
.tag {
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(var(--u) * 4.4);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 6);
  transform: rotate(-3deg);
}
h1 { font-family: var(--display); font-weight: 400; line-height: 0.85; color: var(--white); -webkit-text-stroke: calc(var(--u) * 2.4) var(--ink); paint-order: stroke fill; }
h1 span { display: block; font-size: calc(var(--u) * 24); transform: rotate(-4deg); }
h1 b { display: block; font-weight: 400; font-size: calc(var(--u) * 46); color: var(--yellow); transform: rotate(3deg); }
.lead { font-size: calc(var(--u) * 5); line-height: 1.3; max-width: 22ch; color: var(--ink); background: var(--white); padding: calc(var(--u) * 3) calc(var(--u) * 4); border: calc(var(--u) * 0.8) solid var(--ink); border-radius: calc(var(--u) * 4); }

.btn {
  appearance: none;
  font-family: var(--display);
  font-size: calc(var(--u) * 8);
  color: var(--ink);
  background: var(--yellow);
  border: calc(var(--u) * 1) solid var(--ink);
  border-radius: calc(var(--u) * 5);
  padding: calc(var(--u) * 3) calc(var(--u) * 9);
  box-shadow: 0 calc(var(--u) * 1.6) 0 var(--ink);
  cursor: pointer;
  animation: bob 1.1s ease-in-out infinite alternate;
}
.btn:active { transform: translateY(calc(var(--u) * 1.2)); box-shadow: 0 calc(var(--u) * 0.4) 0 var(--ink); animation: none; }
.btn:focus-visible, #btn-mute:focus-visible { outline: calc(var(--u) * 1) solid var(--white); outline-offset: calc(var(--u) * 1); }
.btn.small { font-size: calc(var(--u) * 4.4); padding: calc(var(--u) * 2.2) calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 1) 0 var(--ink); animation: none; border-width: calc(var(--u) * 0.8); border-radius: calc(var(--u) * 3.4); }
.btn.ghost { background: var(--white); }
@keyframes bob { to { transform: translateY(calc(var(--u) * -1.6)) rotate(-1.5deg); } }

/* ---------- lettre ---------- */
#letter { justify-content: flex-end; padding: calc(var(--u) * 4); }
.sheet {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--white);
  border: calc(var(--u) * 1) solid var(--ink);
  border-radius: calc(var(--u) * 6);
  box-shadow: 0 calc(var(--u) * 2) 0 var(--ink);
  padding: calc(var(--u) * 5);
  text-align: left;
  animation: up 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes up { from { transform: translateY(110%); } }
.score { display: inline-block; font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 4.6); background: var(--yellow); border: calc(var(--u) * 0.7) solid var(--ink); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 1) calc(var(--u) * 3.4); transform: rotate(-2deg); margin-bottom: calc(var(--u) * 3); }
#l-lines p { font-size: calc(var(--u) * 4.9); line-height: 1.35; margin-bottom: calc(var(--u) * 2.4); }
.sign { font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 7); text-align: right; color: var(--red); margin-bottom: calc(var(--u) * 3); }
#player { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; background: var(--ink); border: calc(var(--u) * 0.8) solid var(--ink); border-radius: calc(var(--u) * 3); overflow: hidden; }
#player iframe { width: 100%; height: 100%; border: 0; display: block; }
.row { display: flex; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 3.4); flex-wrap: wrap; }
.credit { font-weight: 600; font-size: calc(var(--u) * 3.4); opacity: 0.6; margin-top: calc(var(--u) * 3); }

@media (prefers-reduced-motion: reduce) {
  .btn, .sheet { animation: none; }
  #l-shout.on { animation: none; transform: rotate(-4deg); }
}