/* ------------------------------------------------------------------ Charte « La Platine »
   Une soirée vinyle : tout l'univers vient du disque et de sa pochette.
   Le buzzer est un disque, la progression une aiguille qui avance sur les sillons, une réponse sort
   de sa pochette, le podium décerne des disques d'or. Le maître du jeu tient une console de DJ.
   Fond de cire noire, papier de pochette crème, encres d'affiche de concert.
   Polices servies en local : la partie doit marcher sans Internet, et la CSP refuse les CDN. */
@font-face {
  font-family: "Shrikhand";
  src: url("/fonts/shrikhand-latin-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Shrikhand";
  src: url("/fonts/shrikhand-latin-ext-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* La cabine : fonds sombres et chauds */
  --wax: #0F0C0B;
  --booth: #1B1614;
  --booth-2: #2A221E;
  --booth-3: #3A2F29;
  --line: #4A3D35;        /* décoratif : trop peu contrasté pour délimiter un champ */
  --line-strong: #9A8979;
  /* Le texte sur la cabine */
  --text: #FAF2E4;
  --muted: #C4B5A3;
  /* La pochette : papier et encre */
  --paper: #F6EAD4;
  --paper-2: #EAD9B9;
  --ink: #17100C;
  --ink-2: #55453A;
  /* Une encre, un rôle. Chaque teinte a sa version foncée pour le flanc des touches. */
  --tomato: #FF4D21;      /* buzz, action principale */
  --tomato-deep: #A82A0B;
  --mustard: #FFC426;     /* score, sélection, disque d'or */
  --mustard-deep: #A87B00;
  --teal: #1FD6BC;        /* écoute en cours, voyant allumé */
  --teal-deep: #0C8272;
  --good: #8BE84F;        /* bonne réponse */
  --good-deep: #4A8F1E;
  --bad: #FF8496;         /* erreur, verrouillé */
  --bad-deep: #A9374A;
  /* Récompenses */
  --gold: #F5C23B;
  --silver: #C9CFD6;
  --bronze: #D98A4E;
  /* Formes */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --press: 4px;           /* course d'une touche */
  /* Mouvement */
  --fast: 90ms;
  --base: 220ms;
  --slow: 600ms;
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --rpm: 1.8s;            /* 33 tours par minute */
  /* Polices */
  --font-display: "Shrikhand", Georgia, serif;
  --font-ui: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--wax); }
body {
  margin: 0;
  min-height: 100dvh;
  background: url("/grain.svg"), var(--wax);
  color: var(--text);
  font: 500 16px/1.45 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h2 { font: 400 1.5rem/1.15 var(--font-display); }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.error { color: var(--bad); font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* La marque : comme le logo imprimé sur une étiquette de disque des années 70 */
.logo {
  font: 400 1.7rem/1 var(--font-display);
  color: var(--tomato);
  text-shadow: .05em .05em 0 var(--mustard);
  white-space: nowrap;
}
.logo-big { font-size: clamp(4rem, 13vw, 8.5rem); padding-right: .1em; }

/* Inscriptions gravées sur le matériel */
.engraved {
  font: 500 .75rem/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.card {
  background: var(--booth);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}

/* --- Touches : elles ont un flanc, et s'enfoncent quand on appuie ------------ */
.btn {
  --edge: #000;
  appearance: none;
  position: relative;
  border: 2px solid #000;
  border-radius: var(--radius-sm);
  background: var(--booth-3);
  color: var(--text);
  font: 700 1rem/1.2 var(--font-ui);
  padding: 10px 16px;
  margin-bottom: var(--press);
  box-shadow: 0 var(--press) 0 var(--edge), inset 0 1px 0 #FFFFFF22;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--fast), box-shadow var(--fast), filter var(--base);
}
.btn:hover:not(:disabled) { filter: brightness(1.14); }
.btn:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--edge); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { --edge: var(--tomato-deep); background: var(--tomato); color: var(--ink); }
.btn-large { padding: 15px 18px; font-size: 1.15rem; width: 100%; }
.btn-small { padding: 6px 10px; font-size: .9rem; --press: 3px; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); margin-bottom: 0; }
.btn-ghost:active:not(:disabled) { transform: scale(.92); }
.btn-round { width: 54px; height: 54px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.btn-round svg { width: 22px; height: 22px; fill: currentColor; }
.btn-play { width: 84px; height: 84px; padding: 0; border-radius: 50%; font-size: 1.8rem; --press: 6px; }
.btn-plus { color: var(--good); }
.btn-minus { color: var(--bad); }

/* Interrupteur à voyant */
.btn-toggle { display: inline-flex; align-items: center; gap: 8px; }
.btn-toggle::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--line-strong);
}
.btn-toggle[aria-pressed="true"]::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* --- Champs ------------------------------------------------------------------ */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
input, select {
  width: 100%;
  background: var(--wax);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  padding: 12px;
}
input::placeholder { color: var(--muted); opacity: .8; }
.input-code { font: 400 2.1rem/1.1 var(--font-display); letter-spacing: .2em; text-align: center; text-transform: uppercase; }

/* --- Pochette : le papier crème, avec son encre ------------------------------- */
.sleeve {
  position: relative;
  background: url("/grain.svg"), var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 22px;
  box-shadow: 8px 8px 0 #000;
}
.sleeve .muted, .sleeve .engraved { color: var(--ink-2); }
.sleeve .error { color: #9E1229; }
.sleeve input { background: #FFFBF2; border-color: var(--ink); color: var(--ink); }
.sleeve input::placeholder { color: var(--ink-2); }
.sleeve-tab { display: flex; justify-content: space-between; gap: 12px; }
.sleeve-tab span:first-child { flex: none; }
.sleeve-tab span:last-child { text-align: right; }

/* Le voyant de focus doit rester visible sur le papier et les aplats colorés */
.sleeve :focus-visible { outline-color: var(--teal-deep); }
.sleeve-b :focus-visible, .judge :focus-visible { outline-color: var(--ink); }

/* Au doigt, chaque commande fait au moins 44 px */
@media (pointer: coarse) {
  .btn-small, .segmented button { min-height: 44px; min-width: 44px; }
}

/* --- Le disque ---------------------------------------------------------------
   .vinyl           les sillons, immobiles à l'œil
   .vinyl::before   deux reflets qui tournent : c'est ce qui donne le mouvement
   .vinyl::after    la lumière de la pièce, elle, ne tourne pas
   .vinyl-label     l'étiquette ; son ::before tourne, son texte reste lisible */
.vinyl {
  --label: var(--tomato);
  --label-ink: var(--ink);
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #0000 96%, #000 97%),
    repeating-radial-gradient(circle closest-side, #171210 0 2px, #241D19 2px 3px, #120E0C 3px 5px);
  box-shadow: 0 0 0 2px #000, 0 18px 40px #000C;
}
.vinyl::before, .vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.vinyl::before {
  background: conic-gradient(#0000 0 8deg, #FFFFFF18 14deg, #0000 26deg 188deg, #FFFFFF12 196deg, #0000 208deg);
  transform: rotate(var(--turn, 0deg));
}
.vinyl::after {
  background: conic-gradient(from 35deg, #0000 0 12deg, #FFFFFF2B 28deg, #0000 48deg 180deg, #0000 192deg, #FFFFFF1F 208deg, #0000 228deg);
}
.vinyl-label {
  position: absolute;
  inset: 31%;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--label);
  color: var(--label-ink);
  box-shadow: 0 0 0 2px #0006;
  container-type: inline-size;
  font: 400 1rem/1 var(--font-display);
}
.vinyl-label > * { position: relative; }
.vinyl-label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#FFFFFF2E 0 90deg, #0000 90deg 180deg, #0000001F 180deg 270deg, #0000 270deg);
  transform: rotate(var(--turn, 0deg));
}
.vinyl-label:empty::after { /* le trou central, s'il n'y a rien d'écrit */
  content: "";
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wax);
  z-index: 1;
}
.vinyl-mark { font-size: 62cqw; }
.vinyl-mustard { --label: var(--mustard); }
.vinyl-teal { --label: var(--teal); }
.vinyl-paper { --label: var(--paper); }

/* Disques de récompense : le pressage métallique */
.vinyl-gold, .vinyl-silver, .vinyl-bronze {
  background:
    conic-gradient(from 20deg, #FFF8 0 12deg, #0000 40deg 170deg, #FFF8 190deg, #0000 220deg),
    repeating-radial-gradient(circle closest-side, var(--metal) 0 2px, var(--metal-deep) 2px 3px, var(--metal) 3px 5px);
  --label: var(--paper);
}
.vinyl-gold { --metal: var(--gold); --metal-deep: #B98A14; box-shadow: 0 0 0 3px #000, 0 0 60px #F5C23B66; }
.vinyl-silver { --metal: var(--silver); --metal-deep: #8D949C; box-shadow: 0 0 0 3px #000; }
.vinyl-bronze { --metal: var(--bronze); --metal-deep: #97592A; box-shadow: 0 0 0 3px #000; }

/* Il tourne seulement quand l'extrait joue : un buzz l'arrête net */
@property --turn { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes spin { to { --turn: 360deg; } }
.spin { animation: spin var(--rpm) linear infinite; }
.spin-play { animation: spin var(--rpm) linear infinite paused; }
body[data-status="playing"] .spin-play { animation-play-state: running; }

/* --- La platine --------------------------------------------------------------- */
.deck {
  --on: 0;
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 3% / 4%;
  background: linear-gradient(160deg, var(--booth-3), var(--booth) 70%);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 #FFFFFF18, 8px 8px 0 #000;
}
.deck > .vinyl { position: absolute; left: 2.4%; top: 4%; height: 92%; }
.deck-arm {
  position: absolute;
  left: 82.4%;
  top: 5%;
  width: 14.4%;
  overflow: visible;
  transform-origin: 50% 11.1%;
  transform: rotate(calc(6deg + var(--on) * (19deg + var(--clip, 0) * 17deg)));
  transition: transform var(--slow);
  filter: drop-shadow(3px 6px 3px #000A);
  pointer-events: none;
}
body:is([data-status="playing"], [data-status="paused"], [data-status="ended"]) .deck { --on: 1; }

/* Étiquette à texte circulaire */
.label-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.label-ring text { font: 500 8.6px var(--font-mono); letter-spacing: .08em; fill: currentColor; }

/* --- Égaliseur décoratif ------------------------------------------------------ */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1em; }
.eq i { width: 4px; height: 100%; background: var(--teal); transform-origin: bottom; animation: eq 900ms ease-in-out infinite alternate; }
.eq i:nth-child(2) { background: var(--mustard); animation-duration: 620ms; animation-delay: -200ms; }
.eq i:nth-child(3) { background: var(--tomato); animation-duration: 780ms; animation-delay: -500ms; }
.eq i:nth-child(4) { background: var(--mustard); animation-duration: 540ms; animation-delay: -100ms; }
.eq i:nth-child(5) { animation-duration: 840ms; animation-delay: -350ms; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* --- Vumètre : la progression de l'extrait, en diodes -------------------------- */
.vu {
  height: 14px;
  background: var(--booth-3);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, #0000 9px 12px);
  mask: repeating-linear-gradient(90deg, #000 0 9px, #0000 9px 12px);
}
.vu > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal) 0 60%, var(--mustard) 60% 85%, var(--tomato) 85%);
  background-size: var(--vu-width, 100vw) 100%;
}

/* --- La pochette qui libère son disque ---------------------------------------- */
.sleeve-art { position: relative; display: block; aspect-ratio: 1; }
.sleeve-art .vinyl {
  position: absolute;
  inset: 3%;
  animation: slide-out 900ms var(--ease-pop) 200ms both, spin var(--rpm) linear infinite;
}
.sleeve-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: repeating-conic-gradient(var(--mustard) 0 15deg, #FFD24F 15deg 30deg);
  color: var(--ink);
  font: 400 4rem/1 var(--font-display);
  box-shadow: 6px 6px 0 #000;
}
.sleeve-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(var(--slide, 42%)); } }

/* --- Soleil d'affiche : rayons qui tournent lentement derrière les grands moments */
.sunburst { position: relative; overflow: hidden; isolation: isolate; }
.sunburst::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(var(--ray-a) 0 10deg, var(--ray-b) 10deg 20deg);
  animation: sun 60s linear infinite;
}
@keyframes sun { to { transform: rotate(360deg); } }

/* --- Bandeau défilant --------------------------------------------------------- */
.ticker { overflow: hidden; background: var(--mustard); color: var(--ink); border-bottom: 3px solid #000; }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker-track span { padding: 6px 0; font: 500 .85rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: pre; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Mouvement réduit : rien ne tourne ni ne défile, les états restent lisibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .spin, .spin-play, .eq i, .ticker-track, .sunburst::before { animation: none; }
  .sleeve-art .vinyl { animation: none; transform: translateX(var(--slide, 42%)); }
}