/* Écran TV — tout est en rem, le rem suit la largeur de l'écran */
/* le rem suit le côté limitant : en 16/9 exact → 1.2vw ; si la hauteur utile est plus courte (barres du navigateur,
   overscan de la télé, écran 16/10…) c'est la hauteur qui commande, rien ne déborde */
html { font-size: clamp(10px, min(1.2vw, 2.133vh), 44px); }
body { overflow: hidden; }

#screen {
  position: fixed; inset: 0.6rem 0 4.2rem 0;
  display: flex; align-items: stretch; justify-content: center;
  padding: 2.2rem 3rem 1rem;
}
.logo.small { font-size: 1.6rem; text-shadow: .06em .06em 0 var(--pink); }
.logo.big { font-size: 7.5rem; }
.logo.huge { font-size: 11rem; }

/* ─── mèche du chrono ─── */
#fuse { position: fixed; top: 0; left: 0; right: 0; height: .6rem; background: var(--ink-2); z-index: 5; }
#fuse-bar { height: 100%; width: 0; background: var(--sun); transform-origin: left; }
#fuse.urgent #fuse-bar { background: var(--pink); }

/* ─── barre du bas ─── */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 4.2rem;
  display: flex; align-items: center; gap: 2rem; padding: 0 3rem;
  background: var(--ink-2); border-top: 3px solid var(--ink-3);
}
#track { flex: 1; display: flex; gap: 3px; align-items: center; height: 1rem; }
#track i { flex: 1; height: .45rem; background: var(--ink-3); border-radius: 1px; }
#track i.q { height: .7rem; }
#track i.c { background: #3b3399; height: 1rem; }
#track i.x { height: 1rem; background: #4b2a6e; }
#track i.done { background: var(--lagoon); }
#track i.now { background: var(--sun); height: 1.1rem; }
#bar-info { font-weight: 800; font-size: 1.1rem; color: #b9b5ff; white-space: nowrap; }

/* ─── écran de déverrouillage ─── */
#unlock {
  position: fixed; inset: 0; z-index: 50; border: 0;
  background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem;
}
.unlock-hint { font-size: 1.6rem; font-weight: 600; color: #c9c6ff; border: 3px solid var(--ink-3); padding: .8rem 1.6rem; border-radius: 99px; }
#unlock.gone { display: none; }

/* ─── lobby ─── */
.lobby { display: grid; grid-template-columns: 27rem 1fr; gap: 3rem; width: 100%; }
.join { display: flex; flex-direction: column; gap: 1.6rem; }
.join .logo { font-size: 3.7rem; }
.qr {
  background: var(--paper); padding: 1.1rem; border-radius: 1.2rem; box-shadow: 10px 10px 0 var(--pink);
  width: 20rem; transform: rotate(-2deg);
}
.qr svg { display: block; width: 100%; height: auto; }
.join-url { font-weight: 800; font-size: 1.25rem; color: var(--sun); word-break: break-all; }
.join-hint { font-size: 1.15rem; color: #c9c6ff; line-height: 1.4; max-width: 24rem; }

.roster-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; }
.roster-head h2 { font-family: var(--display); font-weight: 400; font-size: 2.6rem; margin: 0; }
.count { font-weight: 800; font-size: 1.3rem; color: #c9c6ff; }
.count b { color: var(--sun); font-size: 2.2rem; }
.count.low b { color: var(--pink); }
.roster { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8rem; }
.chip {
  position: relative; background: var(--ink-2); border-radius: 1rem; padding: .8rem .5rem .7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 6.6rem;
  border: 3px solid transparent;
}
.chip .em { font-size: 2.6rem; line-height: 1; }
.chip .nm { font-weight: 800; font-size: 1.05rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.ready { border-color: var(--lagoon); }
.chip.ready::after {
  content: 'prêt'; position: absolute; top: -.7rem; right: -.4rem; background: var(--lagoon); color: var(--ink);
  font-weight: 900; font-size: .8rem; padding: .15rem .5rem; border-radius: 99px; transform: rotate(6deg);
}
.chip.off { opacity: .35; }
.chip.empty { border: 3px dashed var(--ink-3); background: transparent; }
.chip.new { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.lobby-foot { margin-top: 1.6rem; font-size: 1.2rem; color: #c9c6ff; font-weight: 600; }

/* ─── titres (chapitre, tuto, start, pause) ─── */
.title-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6rem; width: 100%; }
.chapter-no {
  font-family: var(--display); font-size: 16rem; line-height: .8; color: var(--pink);
  text-shadow: .05em .05em 0 var(--sun);
}
.chapter-lockup { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15em; font-weight: 400; }
.chapter-level {
  font-family: var(--display); font-size: 8rem; line-height: .9; color: var(--pink);
  text-shadow: .05em .05em 0 var(--sun); text-transform: uppercase; white-space: nowrap;
}
.chapter-section {
  font-family: var(--display); font-size: 5.2rem; line-height: 1; color: var(--sun); text-transform: uppercase;
  max-width: 80rem; text-wrap: balance; text-shadow: .05em .05em 0 var(--ink-3);
}
.subtitle { font-size: 2rem; font-weight: 800; color: var(--lagoon); }
.waiting { font-size: 1.2rem; color: #9d98e8; font-weight: 600; margin-top: 1rem; }
.waiting::before { content: ''; display: inline-block; width: .7rem; height: .7rem; background: var(--sun); border-radius: 50%; margin-right: .6rem; animation: blink 1.2s infinite; }
.start .logo { animation: zoom 1.2s cubic-bezier(.2, 1.4, .4, 1); }

/* ─── classement ─── */
.board { width: 100%; display: flex; flex-direction: column; }
.board h2 { font-family: var(--display); font-weight: 400; font-size: 3rem; margin: 0 0 1.4rem; }
.board-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: .5rem 2.5rem; }
.row {
  display: grid; grid-template-columns: 2.6rem 2.6rem 1fr auto; align-items: center; gap: .8rem;
  background: var(--ink-2); border-radius: .7rem; padding: .35rem .9rem; font-weight: 800; font-size: 1.25rem;
  animation: slide .4s both;
}
.row .rk { font-family: var(--display); font-size: 1.3rem; color: #9d98e8; }
.row .em { font-size: 1.8rem; }
.row .pts { font-family: var(--display); font-size: 1.6rem; color: var(--sun); }
.row .streak { font-size: .95rem; color: var(--tang); margin-left: .5rem; }
.row.top1 { background: var(--sun); color: var(--ink); } .row.top1 .rk, .row.top1 .pts { color: var(--ink); }
.row.top2 { background: var(--lagoon); color: var(--ink); } .row.top2 .rk, .row.top2 .pts { color: var(--ink); }
.row.top3 { background: var(--pink); color: var(--ink); } .row.top3 .rk, .row.top3 .pts { color: var(--ink); }
.pause-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; width: 100%; align-items: center; }
.pause-wrap .board-list { grid-template-columns: 1fr; grid-auto-flow: row; }

/* ─── question ─── */
#screen > * { min-height: 0; max-height: 100%; }
.question { width: 100%; display: flex; flex-direction: column; gap: 1.2rem; min-height: 0; }
.q-head { display: flex; justify-content: space-between; align-items: center; flex: none; min-height: 4rem; }
.q-tag { font-weight: 900; font-size: 1.2rem; background: var(--ink-2); padding: .4rem 1rem; border-radius: 99px; color: #c9c6ff; }
.q-tag.tuto { background: var(--lagoon); color: var(--ink); }
.q-timer { font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--sun); min-width: 5rem; text-align: right; }
.q-timer.urgent { color: var(--pink); animation: pulse .5s infinite alternate; }

/* intitulé : une boîte qui prend sa part de l'écran, la taille de police est calculée en JS
   pour remplir la boîte (fitMax). Avant les propositions : quasi tout l'écran. */
.q-text {
  margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12;
  display: flex; align-items: center; min-height: 0; overflow: hidden; flex: 0 0 36%;
}
.q-text .qi { display: block; width: 100%; text-wrap: balance; overflow-wrap: normal; }
.question.ask .q-text { flex: 1 1 0; }
.question.with-media .q-text { flex-basis: 24%; }
.question.preview .q-text { display: none; }

.q-body { flex: 1 1 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); gap: 1.6rem; min-height: 0; }
.question.ask .q-body { display: none; }
.q-body.has-media { grid-template-columns: 1.1fr 1fr; }
.media {
  position: relative; background: #000; border-radius: 1.2rem; overflow: hidden; box-shadow: 10px 10px 0 var(--pink);
  display: flex; align-items: center; justify-content: center; min-height: 0; animation: drop .6s cubic-bezier(.2, 1.3, .4, 1);
}
.media img, .media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media.audio { background: var(--ink-2); flex-direction: column; gap: 2rem; }
.media.audio .eq { display: flex; gap: .6rem; align-items: flex-end; height: 10rem; }
.media.audio .eq i { width: 1.6rem; background: var(--lagoon); border-radius: .3rem; animation: eq 1s infinite ease-in-out alternate; }
.media.audio.paused .eq i { animation-play-state: paused; }
.media.audio .lbl { font-weight: 800; font-size: 1.4rem; color: #c9c6ff; }
/* PRE_ : le média seul, en très grand */
.q-body.preview .media { box-shadow: 14px 14px 0 var(--pink); }
.q-body.preview .media.audio .eq { height: 22rem; gap: 1rem; }
.q-body.preview .media.audio .eq i { width: 3rem; }
.q-body.preview .media.audio .lbl { font-size: 2.2rem; }

/* propositions : remplissent l'espace restant, texte agrandi au maximum (fitGroup) */
.options { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 1.1rem; height: 100%; min-height: 0; }
.q-body.has-media .options { grid-template-columns: 1fr; }
.opt {
  position: relative; display: flex; align-items: center; gap: 1.2rem; min-height: 0; overflow: hidden;
  background: var(--c); color: var(--ink); border-radius: 1rem; padding: .6rem 1.4rem;
  font-weight: 900; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) backwards;   /* backwards : laisse la main à opacity/transform après l'entrée */
  transition: opacity .35s, transform .35s, background-color .35s, box-shadow .35s;
}
.opt:nth-child(2) { animation-delay: .08s; } .opt:nth-child(3) { animation-delay: .16s; } .opt:nth-child(4) { animation-delay: .24s; }
.opt .letter { font-family: var(--display); font-size: 2rem; width: 3.4rem; height: 3.4rem; border-radius: .7rem; background: var(--ink); color: var(--c); display: grid; place-items: center; flex: none; }
.opt .txt { display: block; flex: 1; min-width: 0; line-height: 1.12; overflow-wrap: normal; }
.opt .n { font-family: var(--display); font-size: 2.2rem; opacity: 0; transition: opacity .3s; flex: none; }
.question.reveal .opt .n { opacity: 1; }
.opt .bar { position: absolute; left: 0; bottom: 0; height: .45rem; background: var(--ink); opacity: .35; border-radius: 0 0 0 1rem; width: 0; transition: width .8s .2s; }

/* proposition cachée : hachures, puis dévoilement (stage « other ») */
.opt.hidden-card .txt { letter-spacing: .3em; }
.opt.unveil { background-image: none !important; animation: unveil .7s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 .4rem var(--paper), 0 0 3rem .6rem rgba(255, 255, 255, .45); z-index: 1; }
.opt.unveil .txt { letter-spacing: normal; }
.question.other .opt:not(.unveil) { opacity: .45; }

/* correction : bonne réponse en vert, mauvaises en rouge */
.question.reveal .opt.right { background: var(--ok); --c: var(--ok); transform: scale(1.03); box-shadow: 0 0 0 .4rem var(--paper), 10px 10px 0 rgba(0, 0, 0, .35); background-image: none !important; }
.question.reveal .opt.wrong { background: var(--ko); --c: var(--ko); opacity: .55; transform: scale(.97); background-image: none !important; }
.question.reveal .opt.wrong .letter { color: var(--ko); }

.answered { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 2.8rem; }
.answered .lbl { font-weight: 800; color: #c9c6ff; font-size: 1.2rem; margin-right: .6rem; }
.answered .a { font-size: 1.9rem; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.fastest { font-weight: 800; font-size: 1.3rem; color: var(--sun); }

/* ─── CHAOS ─── */
.chaos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 1.4rem; overflow: hidden; position: relative; }
.chaos .half { background: var(--team); padding: 2rem 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.chaos .half h3 { font-family: var(--display); font-weight: 400; font-size: 3.4rem; margin: 0; text-shadow: 5px 5px 0 rgba(0, 0, 0, .25); }
.chaos .members { display: flex; flex-wrap: wrap; gap: .6rem; }
.chaos .m { background: rgba(255, 255, 255, .16); border-radius: .7rem; padding: .35rem .7rem; font-weight: 800; font-size: 1.2rem; display: flex; gap: .4rem; align-items: center; }
.chaos .m .em { font-size: 1.6rem; }
.chaos .m.finder { background: var(--paper); color: var(--ink); }
.found-slot { display: flex; min-height: 3rem; }
.chaos-center {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  background: var(--ink); border-radius: 1.4rem; padding: 1.6rem 2.6rem; text-align: center;
  box-shadow: 10px 10px 0 var(--sun); min-width: 26rem;
}
.chaos-title { font-family: var(--display); font-size: 6rem; line-height: .9; color: var(--sun); text-shadow: .05em .05em 0 var(--pink); animation: shake .35s 3; }
.chaos-msg { font-weight: 800; font-size: 1.6rem; margin-top: .6rem; }
.chaos-count { font-family: var(--display); font-size: 5rem; color: var(--paper); line-height: 1; margin-top: .6rem; }
.found-badge { align-self: flex-start; background: var(--paper); color: var(--ink); font-weight: 900; font-size: 1.6rem; padding: .5rem 1.2rem; border-radius: 99px; animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.searching { font-weight: 800; font-size: 1.4rem; opacity: .8; }
.secret-word { font-family: var(--display); font-size: 4.6rem; line-height: 1; background: var(--paper); color: var(--team); padding: .6rem 1.2rem; border-radius: 1rem; align-self: flex-start; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.clues { display: flex; flex-wrap: wrap; gap: .5rem; }
.clues span { background: rgba(0, 0, 0, .22); padding: .3rem .8rem; border-radius: .5rem; font-weight: 800; font-size: 1.2rem; }
.verdict { font-family: var(--display); font-size: 2.2rem; }

/* ─── fin ─── */
.end { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.podium { display: flex; align-items: flex-end; gap: 1.6rem; margin-top: 1rem; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.pod .em { font-size: 5.5rem; animation: bounce 1s infinite alternate; }
.pod .nm { font-weight: 900; font-size: 1.7rem; }
.pod .block { width: 14rem; border-radius: 1rem 1rem 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1rem; color: var(--ink); font-family: var(--display); }
.pod .block .place { font-size: 4rem; line-height: 1; }
.pod .block .pts { font-size: 1.4rem; }
.pod.p1 .block { height: 17rem; background: var(--sun); } .pod.p2 .block { height: 12rem; background: var(--lagoon); } .pod.p3 .block { height: 8.5rem; background: var(--pink); }
.pod.p1 .em { animation-delay: .2s; }
.rest { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 80rem; }
.rest span { background: var(--ink-2); border-radius: .6rem; padding: .3rem .8rem; font-weight: 800; font-size: 1.1rem; }

/* ─── effets ─── */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.float { position: absolute; bottom: -4rem; font-size: 3.4rem; animation: rise 3.2s ease-out forwards; }
.float small { font-size: 1.6rem; vertical-align: super; }
.toast {
  position: absolute; right: 3rem; bottom: 6rem; background: var(--sun); color: var(--ink); font-weight: 900; font-size: 1.5rem;
  padding: .7rem 1.4rem; border-radius: 1rem; box-shadow: var(--shadow); animation: toast 2.6s forwards;
}
.confetti { position: absolute; top: -2rem; width: .8rem; height: 1.3rem; animation: fall linear forwards; }

@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide { from { transform: translateX(-2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zoom { from { transform: scale(.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drop { from { transform: translateY(-3rem) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes pulse { to { transform: scale(1.12); } }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
@keyframes shake { 25% { transform: translateX(-.3rem) rotate(-2deg); } 75% { transform: translateX(.3rem) rotate(2deg); } }
@keyframes bounce { to { transform: translateY(-1rem); } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-15vh) scale(1.1); } 100% { transform: translateY(-85vh) scale(1); opacity: 0; } }
@keyframes toast { 0% { transform: translateX(120%); } 12%, 85% { transform: none; } 100% { transform: translateX(120%); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ─── reprise ─── */
.chip .sc { position: absolute; bottom: -.6rem; left: 50%; transform: translateX(-50%); background: var(--sun); color: var(--ink); font-family: var(--display); font-size: .9rem; padding: .05rem .5rem; border-radius: 99px; }
.resume-banner { display: inline-block; line-height: 1.3; max-width: 100%; background: var(--sun); color: var(--ink); font-weight: 900; font-size: 1.3rem; padding: .7rem 1.2rem; border-radius: 1rem; box-shadow: 6px 6px 0 var(--pink); }

/* ─── pause technique ─── */
#frozen { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(20, 17, 74, .82); backdrop-filter: blur(6px); }
#frozen[hidden] { display: none; }
#frozen .box { text-align: center; display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
#frozen .big { font-family: var(--display); font-size: 7rem; color: var(--sun); text-shadow: .05em .05em 0 var(--pink); line-height: 1; }
#frozen .sub { font-size: 1.8rem; font-weight: 800; color: #c9c6ff; }

/* ─── aperçu dans la régie ─── */
body.preview #unlock { display: none; }
.test-badge { position: fixed; top: 1.1rem; left: 50%; margin-left: -4rem; z-index: 30; background: var(--pink); color: var(--ink); font-weight: 900; font-size: 1rem; padding: .3rem .8rem; border-radius: 99px; transform: rotate(3deg); }
.test-badge[hidden] { display: none; }

@keyframes unveil { 0% { transform: rotateX(90deg) scale(.9); } 100% { transform: none; } }
.opt.unveil.quiet { animation: none; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); }