:root {
  --violet: #5b2bb5; --violet-2: #7040c4; --violet-nuit: #2a1d5c; --rose: #df286b; --creme: #fffaf3;
  --encre: #1d1a33; --gris: #6e6887; --or: #f2b134; --vert: #1f9d6b; --rouge: #e3123f;
  --f0: #bc4c81; --f1: #227760; --f2: #376a9c;
  --ciel-haut: #fbe9d6; --ciel-bas: #e7dcf6;
  --ombre: 0 18px 50px rgba(42, 29, 92, .22), 0 4px 12px rgba(42, 29, 92, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #efe6f7; color: var(--encre); font-family: Inter, system-ui, sans-serif; }
button { font: inherit; cursor: pointer; border: 0; }
#ciel { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 18%, #ffffffcc 0, transparent 55%), linear-gradient(var(--ciel-haut), var(--ciel-bas)); transition: background 2s; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
#flash.rouge { background: radial-gradient(ellipse at center, transparent 40%, rgba(227, 18, 63, .45)); opacity: 1; }
#flash.vert { background: radial-gradient(ellipse at center, transparent 45%, rgba(31, 157, 107, .35)); opacity: 1; }

/* top bar */
#haut { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; gap: 16px; pointer-events: none; z-index: 5; }
#haut > * { pointer-events: auto; }
#marque { display: flex; align-items: center; gap: 12px; background: #ffffffd9; backdrop-filter: blur(8px); padding: 10px 16px; border-radius: 16px; box-shadow: var(--ombre); }
#marque img { height: 30px; }
#marque span { font: 800 22px Jakarta, sans-serif; color: var(--violet-nuit); letter-spacing: -.5px; }
#hud { display: flex; gap: 10px; align-items: stretch; }
#hud[hidden] { display: none; }
.bloc { background: #ffffffe6; backdrop-filter: blur(8px); border-radius: 16px; box-shadow: var(--ombre); padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; }
.horloge b { font: 800 30px Jakarta, sans-serif; color: var(--violet-nuit); line-height: 1; font-variant-numeric: tabular-nums; }
#journee { display: flex; gap: 3px; margin-top: 7px; }
#journee i { width: 10px; height: 6px; border-radius: 3px; background: #e2dcef; }
#journee i.fait { background: var(--violet-2); }
#journee i.encours { background: var(--rose); animation: pulse 1s infinite alternate; }
.serenite { min-width: 300px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; }
.serenite .etiquette { grid-column: 1; margin: 0 0 6px; }
.serenite b { grid-column: 2; grid-row: 1 / 3; font: 800 38px Jakarta, sans-serif; color: var(--violet); align-self: center; font-variant-numeric: tabular-nums; transition: color .3s; }
.serenite b.monte { color: var(--vert); animation: rebond .5s; }
.serenite b.baisse { color: var(--rouge); animation: secoue .5s; }
.jauge { position: relative; height: 14px; background: #ece6f6; border-radius: 8px; overflow: visible; }
.jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--rose), var(--violet-2) 60%, #8e5cf0); width: 40%; transition: width .8s cubic-bezier(.2, .9, .3, 1.2); }
.jauge em { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; }
.jauge em.argent { background: #a6aab8; } .jauge em.or { background: var(--or); }
.etiquette { font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gris); margin: 0 0 6px; }
.boucliers { flex-direction: row; gap: 8px; align-items: center; }
.bouclier { width: 34px; height: 38px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 16%, 96% 58%, 50% 100%, 4% 58%, 0 16%); background: #e7e2f0; color: #fff; font-size: 15px; font-weight: 800; transition: transform .4s, background .4s; }
.bouclier.on { transform: scale(1.12); }
.jetons { flex-direction: row; gap: 6px; align-items: center; }
.jeton { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b8e, var(--rouge) 60%, #a0002a); box-shadow: 0 3px 0 #7d0020, inset 0 -2px 4px #0003; color: #fff; display: grid; place-items: center; font: 800 10px Jakarta, sans-serif; }
.jeton.use { opacity: .2; filter: grayscale(1); }
#outils { display: flex; gap: 8px; }
.rond { width: 44px; height: 44px; border-radius: 50%; background: #ffffffd9; box-shadow: var(--ombre); font-size: 18px; }

/* team list */
#equipe { position: fixed; right: 22px; top: 96px; display: flex; flex-direction: column; gap: 8px; z-index: 4; }
#equipe[hidden] { display: none; }
.membre { display: flex; align-items: center; gap: 10px; background: #ffffffe0; border-radius: 14px; padding: 8px 14px 8px 8px; box-shadow: var(--ombre); transition: transform .3s, box-shadow .3s; min-width: 190px; }
.membre.actif { transform: translateX(-10px) scale(1.04); box-shadow: 0 0 0 3px var(--c), var(--ombre); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 800 16px Jakarta, sans-serif; flex: none; }
.membre .nom { font: 700 14px Inter, sans-serif; }
.membre .detail { font-size: 12px; color: var(--gris); }
.membre .pts { margin-left: auto; font: 800 16px Jakarta, sans-serif; color: var(--violet); }
.membre .tel { font-size: 11px; }
.membre.isole { opacity: .55; }

/* panels */
.panneau { position: fixed; z-index: 6; }
#salon { left: 22px; right: 22px; top: 88px; bottom: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; pointer-events: none; }
#salon > * { pointer-events: auto; }
.salon-gauche { width: min(560px, 46vw); }
.salon-droite { width: min(360px, 30vw); margin-top: auto; }
.rejoindre[hidden] { display: none; }
#salon[hidden] { display: none; }
.salon-gauche, .salon-droite { background: #fffdf9f2; backdrop-filter: blur(10px); border-radius: 26px; box-shadow: var(--ombre); padding: 28px 32px; }
.sur-titre { font: 700 13px Inter, sans-serif; color: var(--rose); text-transform: uppercase; letter-spacing: 2px; margin: 0; }
#salon h1 { font: 800 64px/0.95 Jakarta, sans-serif; margin: 8px 0 12px; letter-spacing: -3px; background: linear-gradient(100deg, var(--violet-nuit), var(--violet-2) 50%, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accroche { font-size: 17px; line-height: 1.5; margin: 0 0 18px; color: #3a3550; }
.rejoindre { display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, #f4eefc, #fdf0f5); border-radius: 18px; padding: 14px; margin-bottom: 18px; }
#qr { width: 132px; height: 132px; background: #fff; border-radius: 12px; padding: 6px; }
.url { font: 700 18px Inter, sans-serif; color: var(--violet-nuit); margin: 0 0 6px; word-break: break-all; }
.code { margin: 0; color: var(--gris); } .code b { font: 800 26px Jakarta, sans-serif; letter-spacing: 4px; color: var(--rose); }
.heros-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.heros { background: #fff; border-radius: 16px; padding: 10px 6px 8px; text-align: center; box-shadow: 0 2px 0 #0001, 0 0 0 2px #eee8f6; transition: transform .2s, box-shadow .2s; }
.heros:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 8px 18px #2a1d5c22, 0 0 0 2px var(--c); }
.heros:disabled { opacity: .35; cursor: default; }
.heros .avatar { margin: 0 auto 6px; width: 46px; height: 46px; font-size: 20px; }
.heros b { display: block; font: 800 14px Jakarta, sans-serif; } .heros small { display: block; font-size: 10px; color: var(--gris); line-height: 1.2; min-height: 24px; }
#liste-equipe { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
#liste-equipe li { display: flex; align-items: center; gap: 10px; background: #f7f3fc; border-radius: 14px; padding: 8px 12px; animation: entree .5s cubic-bezier(.2, .9, .3, 1.3); }
#liste-equipe li.vide { background: none; color: var(--gris); font-style: italic; animation: none; }
#liste-equipe .retirer { margin-left: auto; background: none; color: var(--gris); font-size: 18px; }
.gros { width: 100%; padding: 18px; border-radius: 18px; background: linear-gradient(120deg, var(--violet), var(--rose)); color: #fff; font: 800 22px Jakarta, sans-serif; box-shadow: 0 6px 0 #3a1b7a, var(--ombre); transition: transform .15s, filter .2s; }
.gros:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.gros:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #3a1b7a; }
.gros:disabled { filter: grayscale(.8); opacity: .5; cursor: default; }
.aide { text-align: center; color: var(--gris); font-size: 13px; margin: 12px 0 0; }

/* situation card */
.carte { position: fixed; z-index: 7; right: 26px; top: 50%; transform: translateY(-50%); width: min(560px, 44vw); perspective: 1600px; }
.carte[hidden] { display: none; }
.carte .face { background: var(--creme); border-radius: 26px; box-shadow: var(--ombre); overflow: hidden; animation: arrivee-carte .7s cubic-bezier(.2, .9, .3, 1.15); }
.carte .tete { background: var(--fc); color: #fff; padding: 16px 24px; display: flex; align-items: center; gap: 12px; }
.carte .tete .famille { font: 700 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: 1.6px; opacity: .9; }
.carte .tete .qui { margin-left: auto; font: 700 13px Inter, sans-serif; background: #ffffff2e; padding: 5px 12px; border-radius: 20px; }
.carte .corps { padding: 20px 26px 24px; }
.carte h2 { font: 800 30px/1.1 Jakarta, sans-serif; margin: 0 0 10px; letter-spacing: -.8px; }
.carte .scene-texte { font-size: 18px; line-height: 1.5; color: #3a3550; margin: 0 0 18px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; gap: 14px; align-items: center; text-align: left; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 2px #ece5f7, 0 3px 0 #e2d9f1; font-size: 16px; line-height: 1.35; color: var(--encre); transition: transform .15s, box-shadow .2s, background .2s, opacity .3s; animation: entree .5s backwards; }
.option:nth-child(2) { animation-delay: .1s; } .option:nth-child(3) { animation-delay: .2s; }
.option:hover:not(:disabled) { transform: translateX(4px); box-shadow: 0 0 0 2px var(--fc), 0 3px 0 #e2d9f1; }
.option .lettre { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--fc); color: #fff; display: grid; place-items: center; font: 800 18px Jakarta, sans-serif; }
.option.choisie { box-shadow: 0 0 0 3px var(--violet), 0 3px 0 var(--violet); background: #f3edff; transform: scale(1.02); }
.option.estompee { opacity: .45; }
.option.bon { box-shadow: 0 0 0 3px var(--vert); background: #e8f8f0; }
.option.partiel { box-shadow: 0 0 0 3px var(--or); background: #fdf5e2; }
.option.mauvais { box-shadow: 0 0 0 3px var(--rouge); background: #fdebef; }
.option .paris { margin-left: auto; display: flex; gap: 3px; }
.option .paris i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 800 11px Jakarta; display: grid; place-items: center; font-style: normal; }
.carte .pied { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: var(--gris); font-size: 13px; }
.lien { background: none; color: var(--violet); font-weight: 700; padding: 6px 0; }
.indice { background: #f4eefc; border-radius: 14px; padding: 10px 14px; margin-top: 12px; font-size: 14px; color: #3a3550; animation: entree .4s; }

/* verdict */
.verdict { border-radius: 18px; padding: 14px 18px; margin: 4px 0 14px; display: flex; align-items: center; gap: 14px; animation: tampon .55s cubic-bezier(.2, .9, .3, 1.4); }
.verdict.bon { background: #e3f7ee; color: #0f6e48; } .verdict.partiel { background: #fdf3dc; color: #8a5a00; } .verdict.mauvais { background: #fde6eb; color: #a00a2c; }
.verdict b { font: 800 28px Jakarta, sans-serif; } .verdict .delta { margin-left: auto; font: 800 34px Jakarta, sans-serif; }
.verdict small { display: block; font-size: 13px; opacity: .85; }
.explication { font-size: 15px; line-height: 1.5; color: #3a3550; margin: 0 0 10px; }
.bon-geste { background: #fff; border-left: 5px solid var(--vert); border-radius: 12px; padding: 10px 14px; font-size: 15px; margin-bottom: 10px; }
.bon-geste .etiquette { color: var(--vert); margin-bottom: 4px; }
.retenir { font-size: 14px; color: var(--violet-nuit); background: #f4eefc; border-radius: 12px; padding: 10px 14px; }

/* suspense */
.suspense { display: flex; align-items: center; gap: 16px; margin-top: 16px; background: var(--violet-nuit); color: #fff; border-radius: 18px; padding: 14px 16px; animation: entree .3s; }
.suspense .compte { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 800 26px Jakarta; background: conic-gradient(var(--rose) var(--p, 100%), #ffffff22 0); }
.suspense p { margin: 0; font: 800 20px Jakarta, sans-serif; }
.psv { margin-left: auto; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b8e, var(--rouge) 55%, #8c0024); color: #fff; font: 800 15px/1.05 Jakarta, sans-serif; box-shadow: 0 7px 0 #6a001b, 0 10px 24px #e3123f88; animation: battre .6s infinite alternate; }
.psv:active { transform: translateY(5px); box-shadow: 0 2px 0 #6a001b; }
.psv:disabled { filter: grayscale(1); opacity: .4; animation: none; }

/* events */
.evenement { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 90vw); }
.evenement[hidden] { display: none; }
.evenement .face { background: var(--creme); border-radius: 26px; box-shadow: var(--ombre); padding: 26px 30px; text-align: center; animation: tampon .6s cubic-bezier(.2, .9, .3, 1.3); border-top: 10px solid var(--ec); }
.evenement .pastille { width: 74px; height: 74px; margin: -60px auto 10px; border-radius: 22px; background: var(--ec); display: grid; place-items: center; font-size: 36px; color: #fff; box-shadow: var(--ombre); transform: rotate(-6deg); }
.evenement h2 { font: 800 32px Jakarta, sans-serif; margin: 0 0 8px; letter-spacing: -.8px; }
.evenement p { font-size: 18px; line-height: 1.5; margin: 0 0 8px; color: #3a3550; }
.effets { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.effet { font: 800 18px Jakarta; padding: 8px 14px; border-radius: 14px; background: #f4eefc; color: var(--violet); animation: tampon .5s .3s backwards; }
.effet.plus { background: #e3f7ee; color: #0f6e48; } .effet.moins { background: #fde6eb; color: #a00a2c; }

/* action button (roll) */
#action { position: fixed; z-index: 8; left: 50%; bottom: 120px; transform: translateX(-50%); text-align: center; }
#action[hidden] { display: none; }
#action .gros { width: auto; padding: 20px 40px; font-size: 26px; animation: battre .8s infinite alternate; }
#action p { margin: 10px 0 0; font: 700 15px Inter; color: var(--violet-nuit); background: #ffffffd0; padding: 6px 14px; border-radius: 20px; display: inline-block; }
.attente-tel { font: 800 24px Jakarta, sans-serif; color: var(--violet-nuit); background: #ffffffe6; padding: 14px 26px; border-radius: 20px; box-shadow: var(--ombre); }

/* Victor's subtitles */
#bulle { position: fixed; z-index: 9; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: min(880px, 90vw); display: flex; align-items: center; gap: 14px; background: #ffffffee; backdrop-filter: blur(8px); border-radius: 22px; padding: 10px 22px 10px 10px; box-shadow: var(--ombre); animation: monte .35s cubic-bezier(.2, .9, .3, 1.3); }
#bulle[hidden] { display: none; }
#bulle img { width: 54px; height: 54px; object-fit: contain; animation: parler .25s infinite alternate; }
#bulle p { margin: 0; font: 600 19px/1.4 Inter, sans-serif; color: var(--violet-nuit); }
#toast { position: fixed; z-index: 10; left: 50%; top: 100px; transform: translateX(-50%); background: var(--violet-nuit); color: #fff; padding: 12px 22px; border-radius: 16px; font: 700 16px Inter; box-shadow: var(--ombre); animation: monte .3s; }
#toast[hidden] { display: none; }

/* end */
.fin { left: 50%; top: 53%; transform: translate(-50%, -50%); width: min(1100px, 94vw); max-height: 84vh; overflow: auto; background: #fffdf9f5; border-radius: 28px; box-shadow: var(--ombre); padding: 30px 36px; }
.fin[hidden] { display: none; }
.fin-haut { display: flex; align-items: center; gap: 28px; margin-bottom: 20px; }
.medaille { flex: none; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 800 22px/1.05 Jakarta, sans-serif; color: #fff; box-shadow: inset 0 -8px 0 #0002, 0 12px 30px #0003; animation: tampon .8s cubic-bezier(.2, .9, .3, 1.4); position: relative; }
.medaille::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 3px dashed #ffffff88; }
.medaille.or { background: radial-gradient(circle at 35% 30%, #ffe48a, #f2b134 55%, #b97a00); }
.medaille.argent { background: radial-gradient(circle at 35% 30%, #ffffff, #c5c9d6 55%, #7d8296); color: #2a2f45; }
.medaille.bronze { background: radial-gradient(circle at 35% 30%, #ffd2a6, #cd7f32 55%, #7c4313); }
.medaille.incident { background: radial-gradient(circle at 35% 30%, #ff8aa0, var(--rouge) 55%, #6a001b); }
.fin h1 { font: 800 46px/1 Jakarta, sans-serif; margin: 0 0 8px; letter-spacing: -1.5px; }
.fin .lead { font-size: 17px; color: #3a3550; margin: 0; }
.fin-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fin-col { background: #f8f4fc; border-radius: 18px; padding: 16px 18px; }
.fin-col h3 { font: 800 17px Jakarta, sans-serif; margin: 0 0 10px; }
.fin-col ol, .fin-col ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.fin-col li { margin-bottom: 8px; }
.fin-col li small { display: block; color: var(--gris); }
.classement li { display: flex; align-items: center; gap: 8px; list-style: none; margin-left: -18px; }
.fin-bas { display: flex; gap: 12px; margin-top: 18px; }
.fin-bas .gros { width: auto; flex: 1; }
.secondaire { background: #fff; color: var(--violet); box-shadow: 0 0 0 2px var(--violet), 0 4px 0 #d9cdf2; }

@keyframes pulse { to { opacity: .4; } }
@keyframes rebond { 50% { transform: scale(1.3); } }
@keyframes secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes entree { from { opacity: 0; transform: translateY(14px); } }
@keyframes arrivee-carte { from { opacity: 0; transform: translateX(120px) rotateY(-35deg) scale(.9); } }
@keyframes tampon { from { opacity: 0; transform: scale(1.6) rotate(-4deg); } }
@keyframes battre { to { transform: scale(1.06); } }
@keyframes monte { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes parler { to { transform: translateY(-3px) rotate(2deg); } }

@media (max-width: 1100px) {
  .carte { width: min(560px, 92vw); right: 50%; transform: translate(50%, -50%); }
  #equipe { display: none; }
  .serenite { min-width: 200px; }
}

/* turn banner */
.banniere { position: fixed; z-index: 11; left: 50%; top: 38%; display: flex; align-items: center; gap: 18px; padding: 18px 34px 18px 18px; border-radius: 28px; background: var(--c); color: #fff; box-shadow: 0 20px 60px #0004; transform: translate(-50%, -50%); animation: banniere 2.6s cubic-bezier(.2, .9, .3, 1.2) forwards; pointer-events: none; }
.banniere .avatar { width: 84px; height: 84px; font-size: 40px; background: #fff; color: var(--c); }
.banniere small { display: block; font: 700 14px Inter, sans-serif; opacity: .85; text-transform: uppercase; letter-spacing: 1.5px; }
.banniere b { display: block; font: 800 58px Jakarta, sans-serif; letter-spacing: -1.5px; }
@keyframes banniere { 0% { opacity: 0; transform: translate(-150%, -50%) skewX(-12deg); } 14% { opacity: 1; transform: translate(-50%, -50%) skewX(0); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(60%, -50%) scale(.9); } }