/* ============================================================
   La Roue — Mission STMG (Djamil, 05/11/2026 : « inspirée de la roue
   de la chance de Wooclap pour le design »). Fond clair, grosse roue
   colorée au centre, panneau de réglages à gauche.
============================================================ */
:root {
  --encre: #1e1b4b; --doux: #6b6894; --fond: #f5f3ff; --carte: #fff;
  --violet: #6d28d9; --violet2: #8b5cf6; --bord: #e4e0fb;
  --ok: #16a34a; --ombre: 0 10px 30px rgba(49, 30, 120, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--encre); background: radial-gradient(circle at 15% 0%, #ede9fe, var(--fond) 55%);
  min-height: 100vh;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--encre); width: 100%;
  padding: .6em .8em; border: 2px solid var(--bord); border-radius: .7em; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet2); }

.rx-tete { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.2rem; }
.rx-logo { border: 0; background: none; font-size: 1.15rem; color: var(--encre); display: flex; gap: .4em; align-items: baseline; }
.rx-logo span { font-size: .8rem; color: var(--doux); }
.rx-tete-d { display: flex; gap: .4rem; }
.rx-pastille { border: 0; border-radius: 999px; width: 2.4rem; height: 2.4rem; background: #fff; box-shadow: var(--ombre); font-size: 1.05rem; }

/* ---------- Le menu ---------- */
.rx-ecran { padding: 1rem 1.2rem 2rem; }
.rx-titre { text-align: center; font-size: clamp(1.8rem, 4vw, 3rem); margin: 1.5rem 0 .3rem; }
.rx-sous { text-align: center; color: var(--doux); margin: 0 0 2rem; }
.rx-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; max-width: 820px; margin: 0 auto; }
.rx-mode {
  border: 0; border-radius: 1.4rem; padding: 2rem 1.5rem; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  box-shadow: var(--ombre); transition: transform .2s, box-shadow .2s;
}
.rx-mode:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 18px 40px rgba(49, 30, 120, .25); }
.rx-mode-1 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.rx-mode-2 { background: linear-gradient(135deg, #0891b2, #16a34a); }
.rx-mode-ico { font-size: 3.4rem; animation: rx-flotte 3s ease-in-out infinite; }
.rx-mode-2 .rx-mode-ico { animation-delay: -1.5s; }
.rx-mode b { font-size: 1.6rem; }
.rx-mode span:last-child { opacity: .92; }
@keyframes rx-flotte { 50% { transform: translateY(-6px) rotate(6deg); } }

/* ---------- Écran de jeu ---------- */
.rx-jeu { position: relative; padding: 0 1rem 1rem; }
/* Le tiroir des options : rangé hors de l'écran, il glisse depuis la
   gauche par-dessus la roue. */
.rx-panneau {
  position: fixed; z-index: 20; top: 4.2rem; left: .8rem; bottom: .8rem; width: min(360px, 88vw);
  overflow: auto; background: var(--carte); border-radius: 1.2rem; padding: 1.1rem;
  box-shadow: 0 20px 60px rgba(49, 30, 120, .3); display: flex; flex-direction: column; gap: .7rem;
  transform: translateX(calc(-100% - 2rem)); transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.rx-jeu.ouvert .rx-panneau { transform: none; }
.rx-reglages {
  position: fixed; z-index: 21; left: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; rotate: 180deg; border: 0; border-radius: 0 .9rem .9rem 0;
  padding: 1.1em .6em; font-weight: 800; letter-spacing: .05em; color: #fff;
  background: var(--violet); box-shadow: var(--ombre); transition: opacity .3s, padding .2s;
  border-radius: .9rem 0 0 .9rem;
}
.rx-reglages:hover { padding-right: 1em; }
.rx-reglages.epingle { background: #db2777; }
.rx-jeu.ouvert .rx-reglages { opacity: 0; pointer-events: none; }
.rx-panneau h2 { margin: 0; font-size: 1.3rem; }
.rx-aide { margin: 0; font-size: .9rem; color: var(--doux); }
.rx-ligne { display: flex; gap: .5rem; align-items: center; }
.rx-ligne > input, .rx-ligne > select { flex: 1; min-width: 0; }
.rx-centre { justify-content: center; }
.rx-mini { font-size: .85rem; }
.rx-b {
  border: 0; border-radius: .8em; padding: .65em 1.1em; font-weight: 700; color: #fff;
  background: var(--violet); white-space: nowrap;
}
.rx-b:hover { background: #5b21b6; }
.rx-b-doux { background: #ede9fe; color: var(--violet); }
.rx-b-doux:hover { background: #ddd6fe; }
.rx-plus { width: 2.8em; padding: .5em 0; font-size: 1.2rem; }
.rx-lien { border: 0; background: none; color: var(--violet); text-decoration: underline; padding: 0; }
.rx-coche { display: flex; gap: .5em; align-items: center; font-size: .9rem; }
.rx-coche input { width: auto; }
.rx-erreur { margin: 0; color: #b91c1c; font-weight: 600; font-size: .9rem; }
.rx-onglets { display: flex; background: #f1effd; border-radius: .8em; padding: .25em; }
.rx-onglet { flex: 1; border: 0; background: none; border-radius: .6em; padding: .5em; font-size: .85rem; font-weight: 600; color: var(--doux); }
.rx-onglet.on { background: #fff; color: var(--violet); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.rx-source, .rx-connexion { display: flex; flex-direction: column; gap: .55rem; }

.rx-eleves, .rx-options { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; display: flex; flex-direction: column; gap: .3rem; }
.rx-eleves li label { display: flex; gap: .5em; align-items: center; padding: .3em .5em; border-radius: .5em; background: #faf9ff; }
.rx-eleves li label input { width: auto; }
.rx-eleves li.tire label { opacity: .45; text-decoration: line-through; }
.rx-options li { display: flex; gap: .4em; align-items: center; }
.rx-options li i { width: .9em; height: .9em; border-radius: 50%; flex: none; }
.rx-options li input { padding: .4em .6em; }
.rx-options li button { border: 0; background: #fee2e2; color: #b91c1c; border-radius: .5em; width: 2em; height: 2em; flex: none; }
.rx-options li.tire input { opacity: .45; text-decoration: line-through; }

/* ---------- La roue ---------- */
.rx-scene { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 5rem); }
/* La roue en très grand : c'est elle qu'on regarde du fond de la salle. */
.rx-roue-cadre { position: relative; width: min(calc(100vh - 6rem), 94vw, 1000px); aspect-ratio: 1;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), filter .5s; }
/* La star : au lancement, tout le reste s'efface. */
.rx-tete { transition: opacity .4s; }
body.rx-star .rx-tete { opacity: .12; }
body.rx-star .rx-reglages { opacity: 0; pointer-events: none; }
body.rx-star .rx-roue-cadre { transform: scale(1.04); filter: drop-shadow(0 0 40px rgba(139, 92, 246, .55)); }
body.rx-star { background: radial-gradient(circle at 50% 50%, #ede9fe, #c4b5fd 120%); }
.rx-roue-cadre canvas { width: 100%; height: 100%; display: block; cursor: pointer; filter: drop-shadow(0 18px 30px rgba(49, 30, 120, .25)); }
.rx-fleche {
  position: absolute; top: 50%; right: -1.2%; width: 9%; aspect-ratio: .8; transform: translateY(-50%);
  transform-origin: 85% 50%; pointer-events: none; z-index: 2;
}
.rx-fleche.claque { animation: rx-claque .12s ease-out; }
@keyframes rx-claque { 50% { transform: translateY(-50%) rotate(-14deg); } }
.rx-centre-b {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: .35em solid #fff; background: radial-gradient(circle at 35% 30%, #a78bfa, var(--violet));
  color: #fff; font-weight: 800; font-size: clamp(.9rem, 2.8vmin, 1.9rem); line-height: 1.15; padding: .5em;
  box-shadow: 0 8px 22px rgba(49, 30, 120, .35); z-index: 3; transition: transform .2s;
}
.rx-centre-b:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); }
.rx-centre-b:disabled { cursor: default; opacity: .9; }
.rx-centre-b.respire { animation: rx-respire 2s ease-in-out infinite; }
@keyframes rx-respire { 50% { box-shadow: 0 0 0 .8em rgba(139, 92, 246, .22), 0 8px 22px rgba(49, 30, 120, .35); } }
.rx-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--doux); font-weight: 600; padding: 20%; pointer-events: none; z-index: 4; }

/* ---------- L'annonce ---------- */
.rx-annonce { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(30, 27, 75, .55); backdrop-filter: blur(4px); animation: rx-fondu .3s both; padding: 1rem; }
.rx-confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rx-carte { position: relative; background: #fff; border-radius: 1.6rem; padding: 2rem 2.4rem 1.6rem; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); max-width: min(92vw, 900px);
  animation: rx-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.rx-carte::before { content: "🎉"; position: absolute; top: -.9em; left: 50%; transform: translateX(-50%); font-size: 3rem;
  animation: rx-saute .9s ease-in-out .5s infinite alternate; }
.rx-carte-haut { margin: .6rem 0 .4rem; color: var(--doux); font-weight: 600; font-size: 1.2rem; }
.rx-carte-nom { margin: 0 0 1.4rem; font-size: clamp(2.4rem, 8vw, 5.5rem); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere;
  background: linear-gradient(90deg, #7c3aed, #db2777, #f59e0b, #7c3aed); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: rx-irise 3s linear infinite; }
/* ⚠️ Un texte en `background-clip:text` ne peint PAS ses enfants en
   inline-block : les lettres animées restaient invisibles (vu au test du
   05/11). Chaque lettre porte donc sa propre couleur. */
.rx-carte-nom.lettres { background: none; animation: none; color: #7c3aed; }
.rx-carte-nom.lettres span:nth-child(4n+2) { color: #db2777; }
.rx-carte-nom.lettres span:nth-child(4n+3) { color: #f59e0b; }
.rx-carte-nom.lettres span:nth-child(4n+4) { color: #0ea5e9; }
.rx-carte-nom span { display: inline-block; animation: rx-lettre .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.25s + var(--l) * .05s); }
@keyframes rx-fondu { from { opacity: 0; } }
@keyframes rx-pop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes rx-saute { to { transform: translateX(-50%) translateY(-10px) rotate(10deg); } }
@keyframes rx-irise { to { background-position: 300% 0; } }
@keyframes rx-lettre { from { transform: translateY(.6em) scale(.4); opacity: 0; } }

@media (max-width: 820px) {
  .rx-roue-cadre { width: min(92vw, calc(100vh - 7rem)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}