:root {
  --bg: #050816;
  --card: rgba(255,255,255,.095);
  --card-strong: rgba(255,255,255,.16);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --gold: #f6c453;
  --gold-2: #ffdf86;
  --blue: #38bdf8;
  --red: #fb7185;
  --green: #34d399;
  --danger: #ef4444;
  --purple: #a78bfa;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 8%, rgba(56,189,248,.24), transparent 32%),
    radial-gradient(circle at 85% 12%, rgba(251,113,133,.18), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(246,196,83,.16), transparent 36%),
    linear-gradient(135deg, #020617 0%, #071124 50%, #111827 100%);
  padding: 28px;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 80%);
}
.home-body { display: grid; place-items: center; }
.home-card, #app { width: min(1180px, 100%); margin: auto; position: relative; z-index: 1; }
.home-card {
  padding: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(20px);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
h1 { margin: 12px 0 8px; font-size: clamp(2.5rem, 6vw, 5.3rem); line-height: .9; letter-spacing: -0.075em; text-shadow: 0 12px 35px rgba(0,0,0,.28); }
h2, h3 { margin-top: 0; }
.subtitle, .top-subtitle { max-width: 720px; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(246,196,83,.38);
  border-radius: 999px;
  background: rgba(246,196,83,.13);
  color: #fde68a;
  font-weight: 900;
  box-shadow: 0 10px 35px rgba(246,196,83,.12);
}
.pulse { animation: pulseGlow 1.9s ease-in-out infinite; }
@keyframes pulseGlow { 50% { box-shadow: 0 0 36px rgba(246,196,83,.3); transform: translateY(-1px); } }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.feature-row span { padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.09); color: var(--muted); font-weight: 800; }
.panel, .arena-card, .question-card {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: var(--card);
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.panel { padding: 24px; margin-top: 20px; }
.premium-panel { position: relative; overflow: hidden; }
.premium-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%);
  animation: shine 5s infinite;
  pointer-events: none;
}
@keyframes shine { 45%, 100% { transform: translateX(100%); } }
.compact { margin-top: 0; }
.glass { background: rgba(255,255,255,.06); }
.form-grid { display: grid; gap: 14px; align-items: end; }
.create-grid { grid-template-columns: repeat(5, 1fr); }
.join-grid { grid-template-columns: repeat(4, 1fr); }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 800; }
input, select {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  background: rgba(2,6,23,.72);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
button, .link-button {
  border: 0;
  border-radius: 17px;
  padding: 15px 18px;
  color: #07111f;
  background: linear-gradient(135deg, #fff4bd, var(--gold));
  font-weight: 950;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  box-shadow: 0 16px 34px rgba(246,196,83,.22);
}
button:hover, .link-button:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(246,196,83,.3); }
button:disabled { opacity: .58; cursor: not-allowed; transform: none; box-shadow: none; }
.secondary { background: linear-gradient(135deg, #9be4ff, var(--blue)); box-shadow: 0 16px 34px rgba(56,189,248,.18); }
.danger { background: linear-gradient(135deg, #fca5a5, var(--danger)); color: #fff; box-shadow: 0 16px 34px rgba(239,68,68,.18); }
.ghost-button { background: rgba(255,255,255,.1); color: var(--text); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
.footer-note { color: var(--muted); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 18px; }
.topbar h1 { font-size: clamp(2.1rem, 4.5vw, 3.8rem); }
.top-actions, .button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-arena {
  height: 250px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 22%, rgba(246,196,83,.25), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.mini-person { font-size: 4.2rem; animation: pullLeft 1s ease-in-out infinite; z-index: 2; }
.mini-person.right { animation-name: pullRight; }
.mini-rope { width: 190px; height: 13px; background: repeating-linear-gradient(105deg, #f4c06a 0 10px, #8b5a23 10px 20px); border-radius: 999px; box-shadow: 0 0 24px rgba(246,196,83,.3); }
.mini-fire { position: absolute; top: 96px; left: 50%; margin-left: -16px; font-size: 2rem; animation: flame 1s infinite alternate; }
@keyframes flame { to { transform: scale(1.12) translateY(-4px); filter: drop-shadow(0 0 16px rgba(246,196,83,.8)); } }
@keyframes pullLeft { 50% { transform: translateX(-8px) rotate(-4deg); } }
@keyframes pullRight { 50% { transform: translateX(8px) rotate(4deg); } }
.arena-card {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  gap: 16px;
  align-items: stretch;
  padding: 22px;
  margin-bottom: 20px;
  min-height: 250px;
}
.team-head { padding: 18px; border-radius: 24px; background: var(--card-strong); text-align: center; display: grid; align-content: center; }
.team-head strong { display: block; font-size: 3.3rem; line-height: 1; }
.team-head small { color: var(--muted); font-weight: 900; }
.left strong { color: var(--blue); text-shadow: 0 0 22px rgba(56,189,248,.32); }
.right strong { color: var(--red); text-shadow: 0 0 22px rgba(251,113,133,.32); }
.rope-stage {
  position: relative;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.15), transparent 25%),
    linear-gradient(180deg, rgba(56,189,248,.08), rgba(255,255,255,.03));
}
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.24)); border-top: 1px solid rgba(255,255,255,.08); }
.crowd { position: absolute; top: 14px; opacity: .33; font-size: 1.7rem; animation: crowdMove 1.2s ease-in-out infinite; }
.crowd-left { left: 22px; }
.crowd-right { right: 22px; animation-delay: .25s; }
@keyframes crowdMove { 50% { transform: translateY(-5px); } }
.rope-wrap { position: absolute; left: 92px; right: 92px; top: 50%; height: 44px; transform: translateY(-50%); }
.rope-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 14px;
  border-radius: 999px;
  background: repeating-linear-gradient(112deg, #f7c873 0 13px, #9a6425 13px 26px, #e2a64e 26px 39px);
  box-shadow: inset 0 -3px 3px rgba(0,0,0,.22), 0 0 26px rgba(246,196,83,.28);
  animation: ropeWave .36s linear infinite;
  transition: transform .45s cubic-bezier(.2,.85,.2,1.15);
}
@keyframes ropeWave { to { background-position: 39px 0; } }
.rope-person { position: relative; z-index: 3; width: 115px; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2,.85,.2,1.15); }
.rope-person .body { font-size: 4.6rem; filter: drop-shadow(0 18px 24px rgba(0,0,0,.38)); animation: strain .7s ease-in-out infinite; }
.right-person .body { animation-delay: .2s; }
@keyframes strain { 50% { transform: translateY(3px) rotate(-3deg); } }
.sweat { position: absolute; top: 50px; font-size: 1.2rem; opacity: .75; animation: sweat 1s infinite; }
.left-person .sweat { right: 6px; }
.right-person .sweat { left: 6px; }
@keyframes sweat { 50% { transform: translateY(8px); opacity: .25; } }
.flag {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -12px;
  margin-left: -23px;
  font-size: 2.5rem;
  transition: transform .45s cubic-bezier(.2,.85,.2,1.15);
}
.flag::after { content: ""; display: block; width: 4px; height: 54px; margin: -8px auto 0; background: linear-gradient(#fff, rgba(255,255,255,.18)); border-radius: 999px; }
.flag span { display: inline-block; animation: flame .65s infinite alternate; }
.hit-left .left-person .body, .hit-right .right-person .body { animation: winnerPull .32s ease-in-out 2; }
@keyframes winnerPull { 50% { transform: scale(1.1) translateY(-8px); } }
.question-pop .question-card { animation: cardPop .45s ease; }
@keyframes cardPop { 50% { transform: scale(1.015); border-color: rgba(246,196,83,.35); } }
.question-card { padding: 26px; margin-bottom: 20px; }
.meta-row, .timer-top { display: flex; justify-content: space-between; color: var(--muted); font-weight: 900; margin-bottom: 12px; gap: 10px; }
.question-card h2 { font-size: clamp(1.35rem, 3vw, 2.25rem); line-height: 1.25; }
.timer-box { margin: 6px 0 18px; padding: 13px; border-radius: 20px; background: rgba(0,0,0,.17); border: 1px solid rgba(255,255,255,.1); }
.timer-top strong { color: #fde68a; }
.timer-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.11); overflow: hidden; }
.timer-fill { width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width .3s linear; }
.timer-fill.danger-time { background: linear-gradient(90deg, var(--danger), var(--gold)); animation: dangerPulse .45s infinite alternate; }
@keyframes dangerPulse { to { filter: brightness(1.45); } }
.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.answer-btn { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.105); color: var(--text); border: 1px solid rgba(255,255,255,.14); text-align: left; box-shadow: none; }
.answer-btn:hover { background: rgba(255,255,255,.16); }
.answer-letter { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #07111f; background: var(--gold-2); flex: 0 0 auto; }
.answer-btn.selected { outline: 3px solid rgba(246,196,83,.35); }
.answer-btn.correct { border-color: rgba(52,211,153,.7); background: rgba(52,211,153,.15); }
.answer-btn.wrong { border-color: rgba(239,68,68,.7); background: rgba(239,68,68,.15); }
.feedback { min-height: 30px; margin-top: 18px; color: #fde68a; font-weight: 950; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.players-list { display: grid; gap: 10px; }
.player-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-radius: 17px; background: rgba(255,255,255,.08); }
.player-row small { color: var(--muted); margin-left: 8px; }
.team-A { border-left: 4px solid var(--blue); }
.team-B { border-left: 4px solid var(--red); }
.bot-player { background: linear-gradient(90deg, rgba(167,139,250,.18), rgba(255,255,255,.08)); }
.rules-card p { color: var(--muted); line-height: 1.55; }
@media (max-width: 980px) {
  .hero-grid, .create-grid, .join-grid, .arena-card, .grid-two, .answers { grid-template-columns: 1fr; }
  .arena-card { text-align: center; }
  .rope-stage { min-height: 190px; }
  .rope-wrap { left: 74px; right: 74px; }
}
@media (max-width: 620px) {
  body { padding: 14px; }
  .home-card { padding: 20px; border-radius: 28px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; }
  .top-actions > * { flex: 1; text-align: center; }
  .rope-person .body { font-size: 3.8rem; }
  .rope-person { width: 88px; }
  .rope-wrap { left: 62px; right: 62px; }
  .crowd { display: none; }
}

/* === UPGRADE V2 : personnages, corde premium, voix, popups === */
.upgraded-home .subtitle{max-width:820px}.character-form label{position:relative}.character-form select{font-size:1rem}.enhanced .mini-person{position:relative}.enhanced .mini-person b{position:absolute;right:-10px;top:-18px;font-size:26px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.premium-arena{background:linear-gradient(135deg,rgba(255,248,230,.95),rgba(255,255,255,.8)),radial-gradient(circle at center,#f7c85c44,transparent 55%);border:1px solid rgba(255,255,255,.55);box-shadow:0 24px 70px rgba(42,25,0,.22),inset 0 1px 0 rgba(255,255,255,.8)}
.upgraded-stage{min-height:320px;overflow:hidden;background:linear-gradient(180deg,#9bdcff 0%,#f8edc8 62%,#aa7437 63%,#6d421e 100%);border-radius:32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -24px 35px rgba(0,0,0,.16)}
.sunbeam{position:absolute;inset:-30%;background:conic-gradient(from 120deg,transparent,rgba(255,255,255,.26),transparent 25%);animation:spinlight 14s linear infinite;opacity:.7}.center-mark{position:absolute;left:50%;top:50%;width:6px;height:95px;background:linear-gradient(#ffda6a,#b66a00);border-radius:20px;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(255,230,80,.7)}
@keyframes spinlight{to{transform:rotate(360deg)}}
.character{width:130px;height:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;z-index:4;transition:transform .35s cubic-bezier(.2,1.5,.5,1)}
.character-card{position:relative;width:108px;height:125px;display:flex;align-items:center;justify-content:center;border-radius:34px 34px 26px 26px;background:linear-gradient(180deg,#fff8dd,#f0a12d);box-shadow:0 18px 28px rgba(68,37,0,.32),inset 0 2px 0 rgba(255,255,255,.65);border:4px solid rgba(255,255,255,.72);animation:breath 1.45s ease-in-out infinite}
.avatar{font-size:66px;line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.24))}.tool{position:absolute;right:-14px;top:6px;font-size:40px;transform:rotate(12deg);animation:toolShake 1.1s ease-in-out infinite}.face{position:absolute;left:-10px;top:12px;font-size:28px;background:#fff;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px rgba(0,0,0,.18)}
.character small{background:rgba(34,20,0,.82);color:#fff;padding:6px 12px;border-radius:999px;font-weight:800;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-person{left:8%}.right-person{right:8%}.right-person .tool{left:-14px;right:auto;transform:rotate(-12deg)}
@keyframes breath{50%{transform:translateY(-4px) scale(1.03)}}@keyframes toolShake{50%{transform:rotate(-7deg) scale(1.08)}}
.braided{height:18px;border-radius:999px;background:repeating-linear-gradient(45deg,#7b461f 0 9px,#d28a42 9px 18px,#5b3116 18px 27px);box-shadow:0 6px 0 #3b210f,0 14px 20px rgba(0,0,0,.3);animation:ropeMove .35s linear infinite}.rope-wrap{z-index:3}.flag{z-index:5;border:4px solid #fff;background:linear-gradient(135deg,#ff4b2b,#ffcc33);box-shadow:0 14px 30px rgba(120,30,0,.38)}
@keyframes ropeMove{to{background-position:28px 0}}.hit-left .left-person .character-card,.hit-right .right-person .character-card{animation:powerPull .36s ease-in-out 2}.hit-left .rope-stage,.hit-right .rope-stage{box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 0 50px rgba(255,198,41,.25)}
@keyframes powerPull{50%{transform:translateY(-8px) scale(1.12) rotate(-4deg)}}
.meta-row{gap:10px;flex-wrap:wrap}.meta-row span{background:rgba(255,255,255,.75);padding:8px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.06)}#remainingLabel{font-weight:900;color:#8a4c00}.question-card h2{font-size:clamp(1.35rem,3vw,2.45rem);line-height:1.18}.answer-btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,filter .18s}.answer-btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 30px rgba(0,0,0,.13)}.answer-btn.selected:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shine .55s ease}@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.modal{position:fixed;inset:0;background:rgba(14,11,6,.68);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal.hidden{display:none}.modal-card{width:min(520px,94vw);background:linear-gradient(180deg,#fff,#fff5df);border-radius:32px;padding:28px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.8);animation:modalPop .28s ease}.modal-icon{font-size:56px;margin-bottom:6px}.modal-card h2{margin:8px 0 10px;font-size:2rem;color:#492700}.modal-card p{font-size:1.12rem;line-height:1.55;color:#4c3a20}.modal-card button{margin-top:18px;border:0;border-radius:999px;padding:14px 22px;font-weight:900;background:linear-gradient(135deg,#ffb703,#fb5607);color:white;cursor:pointer;box-shadow:0 14px 25px rgba(251,86,7,.28)}@keyframes modalPop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.mini-char{font-size:24px;margin-right:8px}.player-row{align-items:center}.player-row span{display:flex;align-items:center;gap:4px}.bot-player{background:linear-gradient(90deg,rgba(120,170,255,.18),rgba(255,255,255,.85))}.timer-fill.danger-time{animation:pulseDanger .35s infinite alternate;background:linear-gradient(90deg,#ffbe0b,#fb5607,#e00000)!important}@keyframes pulseDanger{to{filter:brightness(1.4);transform:scaleY(1.25)}}
@media(max-width:760px){.upgraded-stage{min-height:280px}.character{width:92px}.character-card{width:82px;height:98px;border-radius:26px}.avatar{font-size:48px}.tool{font-size:30px}.face{font-size:22px;width:34px;height:34px}.left-person{left:1%}.right-person{right:1%}.character small{font-size:.72rem;max-width:96px}.braided{height:14px}.modal-card{padding:22px}.modal-card h2{font-size:1.5rem}}

/* === UPGRADE V4 : correction fonds blancs, accueil vocal, victoire animée === */
.premium-arena{
  background:
    radial-gradient(circle at 50% 15%, rgba(255,215,95,.20), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.76)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.team-head{background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.58)) !important;color:#f8fafc;border:1px solid rgba(255,255,255,.12)}
.meta-row span{background:rgba(15,23,42,.70) !important;color:#e2e8f0 !important;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(0,0,0,.20) !important;}
.bot-player{background:linear-gradient(90deg,rgba(167,139,250,.22),rgba(15,23,42,.55)) !important;}
.player-row{background:rgba(15,23,42,.52) !important;color:#f8fafc;border:1px solid rgba(255,255,255,.10)}
.question-card,.panel{background:linear-gradient(145deg, rgba(15,23,42,.72), rgba(30,41,59,.48)) !important;}
.answer-btn{background:rgba(15,23,42,.62) !important;}
.answer-btn:hover{background:rgba(30,41,59,.78) !important;}

.start-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at top, rgba(246,196,83,.22), transparent 42%),rgba(2,6,23,.86);backdrop-filter:blur(12px)}
.start-overlay.hidden{display:none}.start-card{width:min(560px,94vw);text-align:center;border-radius:34px;padding:32px;background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(30,41,59,.78));border:1px solid rgba(255,255,255,.18);box-shadow:0 35px 95px rgba(0,0,0,.45);animation:modalPop .28s ease}.start-icon{font-size:64px;margin-bottom:8px;animation:flame .9s infinite alternate}.start-card h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:8px 0;color:#fff}.start-card p{color:#cbd5e1;line-height:1.6;margin:0 0 22px}.start-card button{margin:6px;min-width:190px}
.confetti-layer{position:fixed;inset:0;z-index:190;pointer-events:none;overflow:hidden}.confetti-layer.hidden{display:none}.success-ball{position:absolute;top:-60px;font-size:28px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));animation:successFall 3s ease-in forwards}@keyframes successFall{0%{transform:translate3d(0,-80px,0) rotate(0deg) scale(.75);opacity:0}12%{opacity:1}100%{transform:translate3d(var(--x),110vh,0) rotate(720deg) scale(1.15);opacity:0}}
.modal-card{background:linear-gradient(180deg,#111827,#1e293b) !important;color:#f8fafc !important;border:1px solid rgba(255,255,255,.18) !important}.modal-card h2{color:#fde68a !important}.modal-card p{color:#e2e8f0 !important}.modal-card button{background:linear-gradient(135deg,#f6c453,#fb923c) !important;color:#111827 !important}

/* V5 - invitation et attente joueur distant */
.waiting-box{
  max-width:1180px;margin:18px auto;padding:18px 20px;border-radius:24px;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:linear-gradient(135deg, rgba(255,214,102,.18), rgba(124,58,237,.18));
  border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 45px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);color:#fff;position:relative;overflow:hidden;
}
.waiting-box::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle, rgba(255,255,255,.15), transparent 50%);animation:waitingGlow 3s linear infinite;pointer-events:none}
.waiting-spinner{font-size:42px;animation:bounceWait 1.1s ease-in-out infinite;z-index:1}.waiting-box>div{z-index:1}.waiting-box h2{margin:0 0 6px;font-size:24px}.waiting-box p{margin:0 0 12px;color:rgba(255,255,255,.82)}
.invite-line{display:flex;gap:10px;flex-wrap:wrap}.invite-line input{flex:1;min-width:220px;border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;background:rgba(7,12,28,.72);color:#fff;outline:none}.invite-line button{border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#fbbf24,#fb7185);color:#111827}
.waiting-mode .question-card{opacity:.72;filter:saturate(.8)}.waiting-mode .answers{pointer-events:none}.waiting-mode .rope-stage{box-shadow:0 0 0 1px rgba(251,191,36,.28),0 25px 80px rgba(0,0,0,.38)}
@keyframes waitingGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes bounceWait{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:720px){.waiting-box{grid-template-columns:1fr;text-align:center}.invite-line{flex-direction:column}.invite-line input{min-width:0;width:100%}}


/* === V6 : accueil meilleur joueur, lien masqué après connexion, corde plus réaliste === */
.best-player-card{
  margin-top:22px;padding:18px 22px;border-radius:28px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg, rgba(246,196,83,.18), rgba(56,189,248,.10));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.25);position:relative;overflow:hidden;
}
.best-player-card::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.18),transparent 24%);animation:spinlight 10s linear infinite;pointer-events:none}.best-player-card>*{position:relative;z-index:1}.best-icon{font-size:48px;filter:drop-shadow(0 10px 18px rgba(246,196,83,.45));animation:flame 1.2s infinite alternate}.best-player-card span{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:#fde68a;font-weight:950}.best-player-card h2{margin:4px 0 4px;font-size:clamp(1.35rem,3vw,2.2rem)}.best-player-card p{margin:0;color:#cbd5e1}.best-player-card strong{color:#fde68a}.hidden-action{display:none!important}.room-badge.compact-code{opacity:.28;transform:scale(.9);max-width:0;overflow:hidden;padding-left:0;padding-right:0;border:0;margin:0;transition:.25s ease}.players-ready .topbar{margin-bottom:10px}.players-ready .top-actions{justify-content:flex-end}

.upgraded-stage{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.72), transparent 14%),
    linear-gradient(180deg,#72c7f4 0%,#bfe8ff 33%,#f2d69c 54%,#8a5527 55%,#4b2a13 100%) !important;
  border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),inset 0 -30px 50px rgba(0,0,0,.32),0 25px 85px rgba(0,0,0,.30)!important;
}
.rope-wrap{position:absolute;left:14%;right:14%;top:50%;height:54px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 12px rgba(0,0,0,.38));}
.rope-wrap::before,.rope-wrap::after{content:"";position:absolute;top:50%;width:42px;height:42px;border-radius:50%;transform:translateY(-50%);background:repeating-radial-gradient(circle,#deb26f 0 5px,#6b3d19 5px 10px);border:4px solid #3a210f;box-shadow:inset 0 4px 8px rgba(255,255,255,.25),0 7px 12px rgba(0,0,0,.32);z-index:4}.rope-wrap::before{left:-5px}.rope-wrap::after{right:-5px}
.braided,.rope-line{
  width:100%;height:26px!important;border-radius:999px;
  background:
    repeating-linear-gradient(55deg, rgba(255,240,190,.55) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(125deg,#4b2a13 0 10px,#c1813c 10px 20px,#7b461f 20px 30px,#efc071 30px 40px)!important;
  box-shadow:inset 0 5px 5px rgba(255,255,255,.25),inset 0 -7px 5px rgba(0,0,0,.34),0 8px 0 #2b190c,0 18px 28px rgba(0,0,0,.40)!important;
  animation:ropeMoveReal .42s linear infinite;
}
@keyframes ropeMoveReal{to{background-position:18px 0,44px 0}}
.flag{top:50%!important;transform:translate(-50%,-50%);width:54px;height:66px;border-radius:16px 16px 28px 28px!important;display:grid;place-items:center}.flag::after{content:"";position:absolute;bottom:-18px;width:6px;height:26px;background:#3a210f;border-radius:99px}.center-mark{height:130px!important;width:8px!important;background:linear-gradient(#fff3a3,#f59e0b,#6b3500)!important;box-shadow:0 0 22px rgba(255,230,100,.8),0 0 0 5px rgba(255,255,255,.15)!important}
.character-card::before,.character-card::after{content:"✊🏾";position:absolute;top:63px;font-size:30px;z-index:5;filter:drop-shadow(0 5px 5px rgba(0,0,0,.25))}.left-person .character-card::after{right:-30px;transform:rotate(18deg)}.left-person .character-card::before{right:-52px;transform:rotate(6deg)}.right-person .character-card::after{left:-30px;transform:scaleX(-1) rotate(18deg)}.right-person .character-card::before{left:-52px;transform:scaleX(-1) rotate(6deg)}
.ground::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 18px,transparent 18px 36px);opacity:.5}.crowd{filter:drop-shadow(0 5px 7px rgba(0,0,0,.25));animation:crowdMove 1s ease-in-out infinite alternate}@keyframes crowdMove{to{transform:translateY(-5px) scale(1.04)}}
@media(max-width:720px){.best-player-card{align-items:flex-start}.rope-wrap{left:8%;right:8%}.braided,.rope-line{height:19px!important}.rope-wrap::before,.rope-wrap::after{width:30px;height:30px}.character-card::before,.character-card::after{font-size:22px;top:50px}.left-person .character-card::before{right:-38px}.left-person .character-card::after{right:-22px}.right-person .character-card::before{left:-38px}.right-person .character-card::after{left:-22px}}