/* Take the Rope — interface (un seul univers visuel : la nuit en montagne) */
:root {
  --bg: #0b1426;
  --ink: #eef4fb;
  --muted: #a9bddb;
  --gold: #ffb547;
  --gold-ink: #1a1205;
  --card: #f4f8fd;
  --card-ink: #0b1426;
  --card-muted: #3c557f;
  --line: #d6e2f1;
  --danger: #c2410c;
  --ok: #15803d;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--display); -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.app {
  max-width: 480px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding-block: 12px 16px;
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
}

/* En-tête */
.top { display: flex; justify-content: space-between; align-items: center; }
.brand { font-weight: 800; font-size: 20px; letter-spacing: 0.06em; }
.brand-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me b { color: var(--gold); font-weight: 700; }
.top-right { display: flex; align-items: center; gap: 10px; }
.online { font-family: var(--mono); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: #4ade80; display: inline-block; }
.icon-btn { background: rgba(255,255,255,0.08); color: var(--muted); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn.on { color: var(--gold); border-color: rgba(255,181,71,0.5); }

/* King */
.king { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255,181,71,0.12); border: 1px solid rgba(255,181,71,0.45); color: var(--gold); }
.king-text { display: flex; flex-direction: column; min-width: 0; }
.king-label { font-size: 11px; letter-spacing: 0.12em; font-weight: 700; color: #ffcf85; }
.king-link { margin-left: auto; flex-shrink: 1; min-width: 0; max-width: 55%; padding: 7px 11px; border-radius: 999px; background: var(--gold); color: #16243b; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.king-link:hover { filter: brightness(1.08); }
.king-link[hidden], .king-edit[hidden] { display: none; }
.king-edit { margin-left: auto; flex-shrink: 0; padding: 6px 10px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,181,71,0.6); color: var(--gold); font-weight: 700; font-size: 12px; cursor: pointer; }
.king-link + .king-edit { margin-left: 6px; }
.king-name { font-size: 17px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scène */
.stage { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 400 / 430; max-height: 36vh; width: 100%; background: #14254a; }
/* "meet" garde toute la hauteur visible ; le décor déborde sur les côtés. */
#scene { width: 100%; height: 100%; display: block; overflow: visible; }
.hud { position: absolute; top: 10px; left: 10px; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 12px; background: rgba(11,20,38,0.55); }
.hud-mountain { font-weight: 800; font-size: 18px; }
.hud-alt { font-family: var(--mono); font-weight: 700; font-size: 22px; }
.hud-steps { font-family: var(--mono); font-size: 12px; color: #d8e4f4; }
/* Ligne d'événement sous l'image : ne cache jamais le grimpeur, hauteur fixe pour éviter les sauts. */
.event-line { min-height: 22px; font-size: 14px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-line.fresh { color: var(--ink); animation: eventIn .3s ease-out; }
@keyframes eventIn { from { transform: translateY(4px); opacity: 0; } }

/* Grimpeur */
#climberPos { transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
#climberBody { animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
#arm { transform-box: fill-box; transform-origin: 0% 0%; transition: transform .2s; }
.cheer #arm { transform: rotate(-120deg); }
.cheer #climberBody { animation: jump .55s ease-out; }
@keyframes jump { 40% { transform: translateY(-14px); } }
.hit #climberBody { animation: hit 1s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hit { 20% { transform: translate(-6px,-12px) rotate(-30deg); } 55% { transform: translate(-16px,4px) rotate(-95deg); } 100% { transform: none; } }
#scarf { transform-box: fill-box; transform-origin: 100% 50%; animation: flap .5s ease-in-out infinite alternate; }
@keyframes flap { to { transform: skewY(12deg) scaleX(1.15); } }
#summitFlag { opacity: 0; transition: opacity .3s; }
.won #summitFlag { opacity: 1; }
.creature { animation: creature 1.6s ease-in-out forwards; }
@keyframes creature { 0% { opacity: 0; transform: translate(80px,-20px); } 30%, 60% { opacity: 1; transform: translate(14px,0); } 100% { opacity: 0; transform: translate(90px,-10px); } }
.creature.fall { animation: fall 1.4s ease-in forwards; }
@keyframes fall { 0% { opacity: 0; transform: translate(10px,-110px); } 20% { opacity: 1; } 70% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translate(-10px,30px); } }
.creature.storm { animation: storm 1.8s ease-in-out forwards; }
@keyframes storm { 0% { opacity: 0; transform: translateX(60px); } 30%, 70% { opacity: 0.95; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-60px); } }

/* Vainqueurs du jour */
/* Joker en réserve */
.joker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(194,65,12,0.16); border: 1px solid rgba(240,138,36,0.55); }
.joker-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.joker-label { font-size: 11px; letter-spacing: 0.12em; font-weight: 800; color: #ffb27a; }
.joker-hint { font-size: 13px; color: var(--muted); }
.joker-btn { flex: none; height: 44px; padding: 0 18px; border-radius: 12px; border: none; background: #f08a24; color: #1a0e04; font-weight: 800; font-size: 15px; cursor: pointer; }
.joker-btn[hidden], .joker[hidden] { display: none; }

/* Vainqueurs du jour : toutes les étiquettes visibles, sur plusieurs lignes si besoin. */
.summits { display: flex; flex-wrap: wrap; gap: 6px; }
.summits:empty { display: none; }
.summit-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); font-size: 13px; line-height: 1.2; max-width: 100%; min-width: 0; }
.summit-chip .chip-link { color: #9fd0ff; font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summit-chip .chip-link[hidden] { display: none; }
.summit-chip b { color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.summit-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px + var(--rank, 0) * 1.6px); font-weight: calc(500 + var(--rank, 0) * 50); }

/* Carte de jeu */
.card { background: var(--card); color: var(--card-ink); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; color: var(--card-muted); font-weight: 700; text-transform: uppercase; }
.title { font-size: 21px; font-weight: 800; margin: 2px 0 0; }
.timer { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; background: var(--danger); width: 100%; transition: width .25s linear; }
.big-count { font-family: var(--mono); font-size: 54px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.muted { color: var(--card-muted); font-size: 14px; }
.feedback { text-align: center; font-size: 15px; font-weight: 700; min-height: 22px; }
.feedback.bad { color: var(--danger); } .feedback.good { color: var(--ok); }

.grid { display: grid; gap: 8px; }
.tile { border: 1px solid #c8d8ec; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; min-height: 48px; }
.tile:active { transform: scale(0.96); }
.tile.lit { background: var(--gold); border-color: var(--gold); }
.tile.picked { background: #dbe8f7; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { height: 54px; border-radius: 14px; border: 1.5px solid var(--card-ink); background: #fff; color: var(--card-ink); font-family: var(--mono); font-size: 20px; font-weight: 700; cursor: pointer; }
.choice:active { transform: scale(0.97); }
.terms { font-family: var(--mono); font-size: 24px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
.expr { font-family: var(--mono); font-size: 34px; font-weight: 700; text-align: center; }
.field { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #e9f1fa; border-radius: 14px; overflow: hidden; }
.field svg { position: absolute; width: 100%; height: 100%; }
.reflex { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #e9f1fa; border-radius: 14px; overflow: hidden; border: none; cursor: pointer; padding: 0; display: block; }
.reflex .target { position: absolute; border-radius: 50%; background: var(--danger); transform: translate(-50%,-50%); box-shadow: 0 0 0 6px rgba(194,65,12,0.25); }
.reflex .wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--card-muted); }

/* Nouvelles épreuves */
.tile.num { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--card-ink); min-height: 54px; }
.tile.done { background: #d3f0dc; border-color: var(--ok); color: var(--ok); }
.tile.bad { background: #fde0d2; border-color: var(--danger); }
.tile.sel { background: #fff4d6; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.whack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: #7fae6a; border-radius: 14px; padding: 10px; }
.hole { position: relative; aspect-ratio: 1.25; border: none; background: transparent; padding: 0; cursor: pointer; overflow: hidden; touch-action: manipulation; }
.hole .pit { position: absolute; left: 8%; right: 8%; bottom: 6%; height: 34%; background: #3b2a1a; border-radius: 50%; box-shadow: inset 0 4px 0 rgba(0,0,0,.35); }
.hole .critter { position: absolute; left: 50%; bottom: 10%; height: 80%; aspect-ratio: 1; transform: translate(-50%, 170%); transition: transform .12s ease-out; }
.hole .critter svg { width: 100%; height: 100%; display: block; }
.hole.up .critter { transform: translate(-50%, 0); }
.hole.bonk .critter { transform: translate(-50%, 40%) scale(1.1, .8); filter: brightness(1.3); }
.drop { position: relative; width: 100%; aspect-ratio: 16 / 10; border: none; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; display: block;
  background: linear-gradient(#cfe3f6 0 62%, #ffffff 62% 100%); touch-action: manipulation; }
.drop .crevasse { position: absolute; bottom: 14%; height: 16%; transform: translateX(-50%); background: linear-gradient(#0d2238, #2b5a8c); border-radius: 40% 40% 8px 8px; box-shadow: 0 0 0 3px #e9f1fa; }
.drop .sack { position: absolute; top: 6%; transform: translateX(-50%); }
.drop .sack::before { content: ""; position: absolute; left: 50%; top: -100px; height: 100px; border-left: 2px solid #16243b; }
.drop .sack.falling { animation: sackFall .45s cubic-bezier(.5,0,1,1) forwards; }
.drop .sack.falling::before { display: none; }
@keyframes sackFall { to { top: 66%; } }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn { height: 56px; border-radius: 14px; border: none; font-size: 17px; font-weight: 800; cursor: pointer; }
.btn.primary { background: var(--card-ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--card-ink); border: 1.5px solid var(--card-ink); }
.btn.full { grid-column: 1 / -1; }

/* Célébration de sommet (plein écran) */
.summit-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(6,12,26,0.82); padding: 24px; animation: soIn .35s ease-out; cursor: pointer; }
.summit-overlay[hidden] { display: none; }
@keyframes soIn { from { opacity: 0; } }
.summit-box { position: relative; text-align: center; display: flex; flex-direction: column; gap: 6px; animation: soPop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes soPop { from { transform: scale(0.6); opacity: 0; } }
.summit-eyebrow { font-size: 14px; letter-spacing: 0.24em; font-weight: 800; color: var(--muted); }
.summit-title { font-size: clamp(40px, 11vw, 96px); font-weight: 800; color: var(--gold); line-height: 1; letter-spacing: 0.02em; }
.summit-name { font-size: clamp(26px, 6vw, 52px); font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.summit-alt { font-family: var(--mono); font-size: 18px; color: var(--muted); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: fall-c linear forwards; }
@keyframes fall-c { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Lien social du gagnant (dans la célébration) */
.so-link { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; width: min(440px, 88vw); margin-inline: auto; cursor: default; }
.so-link[hidden] { display: none; }
.so-link-label { color: #ffcf85; font-weight: 700; font-size: 14px; }
.so-link-row { display: flex; gap: 8px; }
.so-link-row input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); color: #fff; padding: 0 12px; font-size: 16px; }
.so-link-row input:focus { outline: none; border-color: var(--gold); }
.so-link-row .btn { height: 48px; padding: 0 16px; background: var(--gold); color: #16243b; }
.so-link-error { color: #ffb4a0; font-size: 13px; min-height: 16px; }
.so-link-later { background: none; border: none; color: rgba(255,255,255,0.65); font-size: 14px; cursor: pointer; text-decoration: underline; }
.summit-overlay.with-form { background: rgba(6,12,26,0.96); }

/* Saboteur affiché en grand sur la montagne */
.sabo { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); z-index: 3; text-align: center; padding: 10px 18px 12px; border-radius: 16px;
  background: rgba(176, 28, 28, 0.92); color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.85);
  max-width: 88%; pointer-events: none; animation: saboIn 3.6s ease-out forwards; }
.sabo[hidden] { display: none; }
.sabo-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #ffd0c2; }
.sabo-name { font-size: clamp(20px, 6vw, 30px); font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sabo-what { font-size: 13px; font-weight: 600; color: #ffe2d9; }
@keyframes saboIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }
  12% { transform: translate(-52%, -50%) scale(1) rotate(-2deg); }
  16% { transform: translate(-48%, -50%) rotate(2deg); }
  20%, 85% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -62%); }
}
.event-line.bad { color: #ff9b80; font-weight: 700; }

/* Décor animé (nuages, oiseaux, météo…) */
#scene .amb * { transform-box: view-box; }
.amb-drift { animation: ambDrift var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambDrift { from { transform: translateX(-160px); } to { transform: translateX(560px); } }
.amb-fly { animation: ambFly var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambFly { from { transform: translateX(-60px); } to { transform: translateX(470px); } }
.amb-bob { animation: ambBob 3s ease-in-out infinite; }
.amb-bob.big { animation-duration: 5s; }
@keyframes ambBob { 50% { transform: translateY(-6px); } }
.amb-wing { animation: ambWing var(--flap, .35s) ease-in-out infinite alternate; transform-box: fill-box !important; transform-origin: center; }
@keyframes ambWing { to { transform: scaleY(-0.35); } }
.amb-orbit { animation: ambOrbit var(--dur) linear infinite; }
@keyframes ambOrbit { to { transform: rotate(-360deg); } }
.amb-rise { animation: ambRise var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambRise { from { transform: translate(0, 330px); } to { transform: translate(-90px, -60px); } }
.amb-ufo { animation: ambUfo var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambUfo { 0% { transform: translateX(-60px); } 40% { transform: translateX(200px); } 55% { transform: translateX(210px); } 100% { transform: translateX(470px); } }
.amb-blink { animation: ambBlink .8s steps(1) infinite; }
.amb-blink.b2 { animation-delay: .4s; }
@keyframes ambBlink { 50% { opacity: 0.2; } }
.amb-twinkle { animation: ambTwinkle var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes ambTwinkle { 50% { opacity: 0.15; } }
.amb-shoot { opacity: 0; stroke-dasharray: 36; stroke-dashoffset: 36; animation: ambShoot var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambShoot { 0%, 88% { opacity: 0; stroke-dashoffset: 36; transform: translate(0,0); } 90% { opacity: 1; } 96% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: -36; transform: translate(-40px, 14px); } }
.amb-aurora > path { animation: ambAurora 7s ease-in-out infinite alternate; }
.amb-aurora > path.b2 { animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes ambAurora { from { transform: translateX(-20px) skewX(4deg); opacity: 0.6; } to { transform: translateX(20px) skewX(-4deg); opacity: 1; } }
.amb-fall { animation: ambFall var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambFall { from { transform: translate(calc(var(--x) * 1px), -30px); } to { transform: translate(calc((var(--x) + var(--dx)) * 1px), 450px); } }
.amb-spin > * { animation: ambSpin 2.4s linear infinite; transform-box: fill-box !important; transform-origin: center; }
@keyframes ambSpin { to { transform: rotate(360deg) scaleX(0.4); } }
.amb-blow { animation: ambBlow var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambBlow { from { transform: translate(430px, calc(var(--y) * 1px)); } 50% { transform: translate(200px, calc((var(--y) - 14) * 1px)); } to { transform: translate(-30px, calc(var(--y) * 1px)); } }
.amb-gust { animation: ambGust var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambGust { from { transform: translateX(440px); opacity: 0; } 15%, 80% { opacity: 1; } to { transform: translateX(-90px); opacity: 0; } }
.amb-devil { animation: ambDevil var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes ambDevil { from { transform: translateX(-40px); } to { transform: translateX(450px); } }
.amb-swirl { animation: ambSwirl .9s ease-in-out infinite alternate; }
@keyframes ambSwirl { to { transform: skewX(10deg) translateX(3px); } }
.amb-tilt { animation: ambTilt 4s ease-in-out infinite alternate; transform-box: fill-box !important; transform-origin: center; }
@keyframes ambTilt { to { transform: rotate(12deg); } }
/* Intensité : les paliers 1 et 2 n'apparaissent qu'en approchant du sommet. */
#scene[data-amb="0"] .tier-1, #scene[data-amb="0"] .tier-2, #scene[data-amb="1"] .tier-2 { display: none; }
@media (prefers-reduced-motion: reduce) { #scene .amb { display: none; } }

/* Zone de jeu à taille FIXE : elle ne bouge jamais, quelle que soit l'épreuve ou la phase. */
.card { height: clamp(340px, 50vh, 430px); overflow: hidden; }
.ch-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ch-body > .field, .ch-body > .reflex, .ch-body > .drop, .ch-body > .whack, .ch-body > .grid { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.ch-body > .grid { grid-auto-rows: minmax(0, 76px); align-content: center; }
.ch-body .tile, .ch-body .tile.num { min-height: 0; }
.ch-body .tile svg { max-height: 80%; }
.ch-body > .whack { grid-auto-rows: minmax(0, 1fr); }
.ch-body .hole { aspect-ratio: auto; height: 100%; }
.field.maze { background: #f3ede4; }
.choices.row .choice { height: 48px; }
.title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }

/* Quiz et vrai/faux */
.question { font-size: clamp(17px, 4.6vw, 21px); font-weight: 800; text-align: center; line-height: 1.25; padding: 4px 6px; }
.question.small { font-size: 16px; font-weight: 700; }
.choices.text .choice { font-family: inherit; font-size: 15px; height: auto; min-height: 54px; padding: 6px 8px; line-height: 1.2; }
.choices.tf .choice { font-family: inherit; font-size: 20px; height: 62px; color: #fff; border: none; }
.choice.true { background: var(--ok); }
.choice.false { background: var(--danger); }