html, body { height: 100%; overflow: hidden; }
body { font-size: clamp(13px, 1.05vw, 26px); background: transparent; }
[hidden] { display: none !important; }

/* ---------- Fond animé ---------- */
.bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
.bg span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .16; animation: drift 28s ease-in-out infinite alternate; }
.bg span:first-child { background: var(--accent); left: -20vmax; top: 20vh; }
.bg span:last-child { background: var(--peach); right: -25vmax; bottom: -20vh; animation-duration: 34s; }
@keyframes drift { to { transform: translate(10vmax, -8vmax) scale(1.1); } }

/* ---------- En-tête ---------- */
.head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 1.6em .6em; }
.brand { display: flex; align-items: center; gap: 1em; }
.eye { width: 5.2em; height: 3em; }
/* Halo derrière l'œil plutôt qu'un filtre sur l'image : les télés calculent les filtres
   en basse résolution puis agrandissent, ce qui rendait l'œil flou. */
.eye-halo { position: relative; display: inline-flex; }
.eye-halo::before { content: ''; position: absolute; top: -45%; bottom: -45%; left: -25%; right: -25%; background: radial-gradient(closest-side, rgba(120, 200, 255, .6), rgba(120, 200, 255, 0)); }
.eye-halo .eye { position: relative; }
.head .logo { font-size: 3.4em; }
.subtitle { color: #ffe3f1; text-shadow: 0 1px 6px rgba(40, 10, 60, .6); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: .8em; margin-top: .3em; }
.head-stats { display: flex; gap: 1em; }
.hstat { display: grid; text-align: center; background: var(--panel); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: .5em 1.2em; box-shadow: var(--shadow); min-width: 9em; }
.hlabel { color: var(--muted); font-size: .7em; text-transform: uppercase; letter-spacing: .12em; }
.hvalue { font-family: var(--display); font-size: 2.4em; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.timer .hvalue { color: var(--accent-2); }
.timer.urgent .hvalue { color: var(--danger); animation: pulse 1s infinite; }
.timer.done .hvalue { color: var(--danger); }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- Grille principale ---------- */
.board { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 1em; padding: 0 1.6em 1.2em; height: calc(100vh - 6.6em); min-height: 0; }
.panel { background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: var(--radius); padding: 1em 1.1em; min-height: 0; display: flex; flex-direction: column; backdrop-filter: var(--glass); }
.panel h2 { font-family: var(--display); font-weight: 400; letter-spacing: .08em; font-size: 1.7em; margin: 0 0 .5em; color: #ffd6ec; text-shadow: 0 2px 10px rgba(255, 79, 163, .35); }
.side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.side .panel { flex: 1 1 0; overflow: hidden; }
.side .riddle { flex: 0 0 auto; }

/* ---------- Classement ---------- */
.ranking { position: relative; flex: 1; display: flex; flex-direction: column; gap: .35em; min-height: 0; overflow: hidden; }
.rank-row { position: relative; display: flex; align-items: center; gap: .7em; padding: .35em .6em; border-radius: 12px; background: rgba(255, 255, 255, .06); flex: 1 1 0; max-height: 4.2em; min-height: 2.6em; overflow: hidden; transition: background .4s; }
.rank-row .bar { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--c), transparent); opacity: .45; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); z-index: 0; border-radius: inherit; }
.rank-row > *:not(.bar) { position: relative; z-index: 1; }
.rank-row .pos { font-family: var(--display); font-size: 1.5em; width: 1.4em; text-align: center; color: var(--muted); }
.rank-row .avatar { font-size: .85em; }
.rank-row .who { flex: 1; min-width: 0; }
.rank-row .nm { font-weight: 800; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .tags { display: flex; gap: .3em; }
.tag { font-size: .62em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .1em .5em; border-radius: 99px; }
.tag.nom { background: rgba(255, 179, 71, .2); color: var(--warn); }
.tag.out { background: rgba(255, 79, 109, .18); color: var(--danger); }
.tag.found { background: rgba(79, 227, 169, .16); color: var(--ok); }
.rank-row .amt { font-family: var(--display); font-size: 1.7em; letter-spacing: .03em; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-row.nominated { box-shadow: inset 0 0 0 2px var(--warn); animation: nomglow 2s infinite; }
@keyframes nomglow { 50% { box-shadow: inset 0 0 0 2px rgba(255, 179, 71, .25); } }
.rank-row.eliminated { opacity: .45; }
.rank-row.up { background: rgba(79, 227, 169, .25); }
.rank-row.down { background: rgba(255, 79, 109, .25); }
.delta { position: absolute; right: .6em; top: -.2em; font-weight: 800; font-size: .95em; animation: floatup 2.4s ease-out forwards; z-index: 2; }
.delta.plus { color: var(--ok); }
.delta.minus { color: var(--danger); }
@keyframes floatup { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

/* ---------- Secrets ---------- */
.secrets { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); grid-auto-rows: minmax(7em, 1fr); gap: .7em; overflow: hidden; align-content: start; }
.secret { position: relative; border-radius: 14px; padding: .8em; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(92, 54, 170, .72), rgba(40, 22, 92, .85)); }
.secret .num { position: absolute; top: .35em; left: .6em; font-family: var(--display); font-size: 1.3em; color: #e2d6ff; letter-spacing: .05em; }
.secret .lock { font-size: 2.2em; filter: drop-shadow(0 0 10px rgba(255, 79, 163, .8)); }
.secret .q { font-family: var(--display); font-size: 1.4em; letter-spacing: .2em; color: var(--muted); }
.secret .dots { position: absolute; bottom: .5em; display: flex; gap: .3em; }
.secret .dots i { width: .5em; height: .5em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.secret.revealed { background: linear-gradient(160deg, rgba(24, 140, 120, .8), rgba(30, 40, 96, .85)); border-color: var(--ok); }
.secret.revealed .num { color: var(--ok); }
.secret .txt { font-weight: 700; font-size: 1em; line-height: 1.25; }
.secret .holders { margin-top: .4em; color: #c8ffe9; font-size: .82em; font-weight: 600; }
.secret.flip { animation: flip .9s ease; }
@keyframes flip { 0% { transform: rotateY(90deg) scale(.9); } 100% { transform: none; } }
.secret.new-clue { animation: clueflash 2s ease; }
@keyframes clueflash { 20% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 30px var(--accent-2); } }

/* ---------- Énigme ---------- */
.riddle { border-color: var(--accent); box-shadow: 0 0 30px rgba(255, 79, 163, .4); }
.riddle .question { font-size: 1.3em; font-weight: 600; line-height: 1.35; white-space: pre-wrap; }
.riddle .meta { margin-top: .6em; color: var(--muted); font-size: .9em; }
.riddle .answer { margin-top: .7em; padding: .5em .7em; border-radius: 10px; background: rgba(79, 227, 169, .12); color: var(--ok); font-weight: 800; }
.riddle .gain { color: var(--gold); font-weight: 800; }

/* ---------- Listes ---------- */
.clues, .feed { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.clues li, .feed li { padding: .45em 0; border-bottom: 1px solid var(--line); line-height: 1.3; animation: slidein .5s ease; }
.clues li b { color: var(--gold); font-weight: 800; margin-right: .3em; }
.feed li { font-size: .92em; }
.feed time { color: var(--muted); font-size: .8em; margin-right: .5em; font-variant-numeric: tabular-nums; }
.empty-note { color: var(--muted); font-style: italic; }
@keyframes slidein { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- Annonces plein écran ---------- */
/* Rideau : juste les nuages, sans titre ni rien, pour masquer le tableau (les annonces passent par-dessus). */
.curtain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; background: url('/img/ciel.jpg') center / cover, #48399c; }
.overlay { --ov: var(--accent); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; place-items: center; padding: 4vh 6vw; background: radial-gradient(ellipse at center, rgba(255, 79, 163, .2) 0%, rgba(26, 10, 62, .45) 55%, rgba(22, 8, 52, .75) 100%), url('/img/ciel.jpg') center / cover, #48399c; animation: ovin .6s ease; text-align: center; }
.overlay.out { animation: ovout .5s ease forwards; }
@keyframes ovin { from { opacity: 0; transform: scale(1.04); } }
@keyframes ovout { to { opacity: 0; } }
.overlay[data-kind=secret] { --ov: #4fe3a9; }
.overlay[data-kind=echec] { --ov: #ff4f6d; }
.overlay[data-kind=indice] { --ov: #4fb3ff; }
.overlay[data-kind=enigme] { --ov: #a58bff; }
.overlay[data-kind=mission] { --ov: #ffb347; }
.overlay[data-kind=buzz] { --ov: #ff4f6d; }
.overlay[data-kind=vote] { --ov: #ffb347; }
.overlay-inner { max-width: 1400px; }
.overlay-eye { width: 16vmin; height: 9.5vmin; filter: drop-shadow(0 0 30px #8fd3ff); }
.ov-title { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 9vmin, 160px); letter-spacing: .02em; color: #fff; -webkit-text-stroke: .14em var(--ov); paint-order: stroke fill; filter: drop-shadow(0 .08em .2em rgba(40, 10, 60, .55)); margin: 2vh 0 1vh; line-height: 1; }
.ov-text { font-size: clamp(22px, 5vmin, 80px); font-weight: 800; line-height: 1.2; white-space: pre-wrap; text-shadow: 0 2px 16px rgba(30, 8, 60, .75); }
.overlay[data-kind=secret] .ov-text::before, .overlay[data-kind=secret] .ov-text::after { content: '«\00a0'; color: var(--ov); }
.overlay[data-kind=secret] .ov-text::after { content: '\00a0»'; }
.ov-detail { margin: 2.4vh auto 0; max-width: 60em; font-size: clamp(18px, 3.4vmin, 56px); font-weight: 600; line-height: 1.3; white-space: pre-wrap; color: #fff; text-shadow: 0 2px 14px rgba(30, 8, 60, .8); }
.ov-detail:empty { display: none; }
.ov-sub { margin-top: 3vh; font-size: clamp(16px, 3vmin, 44px); color: #ffe3f1; font-weight: 600; text-shadow: 0 2px 12px rgba(30, 8, 60, .8); }
.ov-players { display: flex; justify-content: center; gap: 2vmin; margin-top: 3vh; font-size: clamp(14px, 2.6vmin, 36px); }
.ov-players .avatar { width: 3.4em; height: 3.4em; font-size: 1em; box-shadow: 0 0 0 3px var(--ov), 0 0 30px var(--ov); }
.ov-text .caret { display: inline-block; width: .08em; height: 1em; background: currentColor; margin-left: .05em; vertical-align: -0.1em; animation: pulse .8s infinite; }

/* ---------- Vote en cours ---------- */
.vote-panel { flex: 0 0 auto !important; border-color: var(--warn); box-shadow: 0 0 30px rgba(255, 179, 71, .35); }
.vote-panel .question { font-size: 1.3em; font-weight: 800; line-height: 1.3; }
.vote-panel .vbar { height: .7em; margin-top: .7em; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.vote-panel .vbar div { height: 100%; background: linear-gradient(90deg, var(--warn), var(--gold)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.vote-panel .meta { margin-top: .5em; color: var(--muted); font-size: .9em; }
.vote-panel .meta strong { color: var(--gold); font-size: 1.2em; }

/* ---------- Dépouillement ---------- */
.film { position: fixed; top: 0; left: 0; z-index: 25; width: 100%; height: 100%; object-fit: contain; background: #000; }
.count { --ov: #ffb347; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr; gap: 3vh; padding: 4vh 5vw; background: radial-gradient(ellipse at center, rgba(255, 179, 71, .18) 0%, rgba(26, 10, 62, .6) 55%, rgba(22, 8, 52, .85) 100%), url('/img/ciel.jpg') center / cover, #48399c; animation: ovin .6s ease; }
.count.out { animation: ovout .5s ease forwards; }
.count-head { text-align: center; }
.count-title { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 7vmin, 120px); letter-spacing: .03em; color: #fff; -webkit-text-stroke: .14em var(--ov); paint-order: stroke fill; filter: drop-shadow(0 .08em .2em rgba(40, 10, 60, .55)); line-height: 1; }
.count-q { font-size: clamp(18px, 3.4vmin, 54px); font-weight: 800; margin-top: 1vh; }
.count-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4vw; align-items: center; min-height: 0; }
.ballot { justify-self: center; display: grid; justify-items: center; align-content: center; gap: 1.5vh; width: min(32vw, 46vh); aspect-ratio: 3 / 4; padding: 3vh 2vw; border-radius: 2vmin; background: linear-gradient(170deg, #fffdf5, #ece6d5); color: #1a1033; box-shadow: 0 0 0 .6vmin var(--ov), 0 2vh 6vh rgba(0, 0, 0, .6); text-align: center; }
.ballot.idle { background: linear-gradient(170deg, rgba(92, 54, 170, .85), rgba(40, 22, 92, .92)); color: var(--text); }
.ballot.flip { animation: ballotflip .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes ballotflip { 0% { transform: rotateY(90deg) scale(.85); } 100% { transform: none; } }
.ballot .b-label { font-size: clamp(14px, 2.4vmin, 34px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ballot .b-big { font-family: var(--display); font-size: clamp(60px, 16vmin, 260px); line-height: 1; }
.ballot .b-name { font-family: var(--display); font-size: clamp(36px, 8vmin, 130px); letter-spacing: .04em; line-height: 1; }
.ballot .avatar { width: 16vmin; height: 16vmin; font-size: 5vmin; box-shadow: 0 0 0 .5vmin var(--c); }
.count-board { display: grid; gap: 1.4vh; align-content: center; }
.crow { display: grid; grid-template-columns: auto 9em 1fr 2.2em; align-items: center; gap: 1.2vw; padding: .9vh 1vw; border-radius: 1.4vmin; background: rgba(255, 255, 255, .04); border: 2px solid transparent; font-size: clamp(12px, min(2.6vmin, calc(62vh / var(--rows, 8) / 2.3)), 40px); transition: border-color .4s, background .4s; }
.crow .avatar { width: 2.2em; height: 2.2em; font-size: .8em; }
.crow .nm { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .cbar { height: .8em; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.crow .cbar span { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; box-shadow: 0 0 12px var(--c); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.crow .n { font-family: var(--display); font-size: 1.6em; text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.crow.lead { border-color: var(--ov); }
.crow.hit { animation: crowhit 1.2s ease; }
@keyframes crowhit { 15% { background: color-mix(in srgb, var(--c) 40%, transparent); transform: scale(1.03); } }
.crow.chosen { border-color: var(--ov); background: rgba(255, 179, 71, .18); }
.ballot.result { background: radial-gradient(circle at 50% 30%, #6a3a8a, #1e0c46); color: var(--text); box-shadow: 0 0 0 .6vmin var(--ov), 0 0 8vmin color-mix(in srgb, var(--ov) 60%, transparent); animation: ballotflip .9s cubic-bezier(.2, .8, .2, 1); }
.ballot.result.out { --ov: #ff4f6d; }
.ballot .r-title { font-family: var(--display); font-size: clamp(30px, 6.5vmin, 110px); letter-spacing: .06em; color: var(--ov); text-shadow: 0 0 30px var(--ov); line-height: 1; }
.ballot .r-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin 3vmin; font-size: clamp(14px, 2.6vmin, 40px); }
.ballot .r-players .avatar { width: 3em; height: 3em; font-size: 1em; box-shadow: 0 0 0 3px var(--ov), 0 0 30px var(--ov); }
.ballot .r-name { margin-top: .3em; font-weight: 800; }

/* ---------- Divers ---------- */
.start-btn { position: fixed; right: 1em; bottom: 1em; z-index: 30; background: linear-gradient(180deg, #ff7cbd, var(--accent-deep)); color: #fff; border: none; border-radius: 99px; padding: .7em 1.3em; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); font-size: .9em; }
.offline { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: .4em 1em; border-radius: 0 0 10px 10px; z-index: 40; font-weight: 700; font-size: .85em; }

/* ---------- Téléphones / petits écrans ---------- */
@media (max-width: 960px) {
  html, body { overflow: auto; height: auto; }
  body { font-size: 15px; }
  .head { flex-wrap: wrap; padding: 14px 16px 8px; }
  .head .logo { font-size: 40px; }
  .eye { width: 64px; height: 38px; }
  .head-stats { width: 100%; }
  .hstat { flex: 1; min-width: 0; }
  .hvalue { font-size: 30px; }
  .board { grid-template-columns: 1fr; height: auto; padding: 0 16px 80px; }
  .side { display: contents; }
  .side .riddle { order: -1; }
  .panel { overflow: visible; }
  .ranking { overflow: visible; }
  .rank-row { flex: none; min-height: 52px; }
  .secrets { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: minmax(110px, auto); overflow: visible; }
  .clues-panel, .feed-panel { max-height: none; }
  .overlay { padding: 24px 16px; }
  .count { overflow: auto; padding: 24px 16px; }
  .count-stage { grid-template-columns: 1fr; }
  .ballot { width: min(60vw, 260px); }
  .crow { grid-template-columns: auto 6em 1fr 2em; }
}

/* ---------- Typo arrondie du générique (Fredoka) ---------- */
.hvalue, .panel h2, .rank-row .pos, .rank-row .amt, .secret .num, .secret .q, .crow .n, .ballot .b-big, .ballot .b-name, .r-title { font-weight: 600; letter-spacing: .01em; }
.panel h2 { font-size: 1.45em; }
.hvalue { font-size: 2.1em; }
.rank-row .amt { font-size: 1.45em; text-shadow: 0 1px 8px rgba(255, 179, 71, .35); }
.rank-row .nm { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }

/* ---------- Navigateurs récents : teintes calculées avec color-mix() ----------
   Les navigateurs de télé plus anciens ne connaissent pas color-mix() : comme ces règles
   contiennent des var(), ils les annuleraient au lieu de les ignorer (fond transparent par-dessus
   le tableau). Ils gardent donc les versions simples ci-dessus. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rank-row .bar { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), transparent); opacity: 1; }
  .overlay { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ov) 34%, transparent) 0%, rgba(26, 10, 62, .55) 55%, rgba(22, 8, 52, .85) 100%), url('/img/ciel.jpg') center / cover, var(--sky); }
  .overlay-eye { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--ov) 70%, #8fd3ff)); }
  .count { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ov) 24%, transparent) 0%, rgba(26, 10, 62, .7) 55%, rgba(22, 8, 52, .9) 100%), url('/img/ciel.jpg') center / cover, var(--sky); }
  .crow.lead { border-color: color-mix(in srgb, var(--ov) 60%, transparent); }
  .crow.chosen { background: color-mix(in srgb, var(--ov) 18%, transparent); }
  .ballot.result { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ov) 30%, #3a1c7a), #1e0c46); }
}