:root{
  --ink:#0B0A14; --plum:#1A1230; --plum2:#241a42;
  --neon:#FF3D8B; --amber:#FFC24B; --mint:#46E5B7;
  --txt:#F2ECFF; --dim:#9C93BE; --line:rgba(255,255,255,.12);
  --disp:"Bungee","Impact","Arial Black",sans-serif;
  --body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; font-family:var(--body); color:var(--txt);
  background:
    radial-gradient(120% 70% at 50% -10%, #3a1f5c 0%, transparent 60%),
    radial-gradient(90% 50% at 100% 100%, #4a1030 0%, transparent 55%),
    var(--ink);
  background-attachment:fixed;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overscroll-behavior:none;
}
.wrap{max-width:520px;margin:0 auto;padding:22px 18px 40px}
.screen{display:none}
.screen.on{display:block;animation:in .3s cubic-bezier(.2,.8,.25,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}}

/* enseigne */
.sign{text-align:center;margin:14px 0 6px}
.sign h1{
  font-family:var(--disp); font-size:clamp(34px,11vw,48px); margin:0; line-height:1;
  color:#fff; text-shadow:0 0 6px var(--neon),0 0 22px rgba(255,61,139,.75),0 0 60px rgba(255,61,139,.35);
  animation:buzz 7s infinite steps(1);
}
.sign h1 em{font-style:normal;color:var(--amber);text-shadow:0 0 6px var(--amber),0 0 24px rgba(255,194,75,.6)}
@keyframes buzz{0%,96%,100%{opacity:1}97%{opacity:.35}98%{opacity:1}99%{opacity:.5}}
.tagline{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:10px 0 22px;text-align:center}

.panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.lab{font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--amber);margin:0 0 12px;text-transform:uppercase}
.step{display:flex;align-items:center;gap:14px}
.step b{font-family:var(--disp);font-size:30px;min-width:52px;text-align:center;color:#fff}
.note{color:var(--dim);font-size:13px;margin-left:auto;text-align:right;max-width:48%;line-height:1.3}

button{font-family:var(--body);font-size:16px;color:var(--txt);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;transition:transform .12s,box-shadow .2s,opacity .2s}
button:active{transform:scale(.96)}
button:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.rnd{width:54px;height:54px;font-size:26px;padding:0;flex:none;line-height:1}
.cta{width:100%;padding:19px;border:0;font-weight:800;font-size:18px;letter-spacing:.02em;
  color:#1A0A12;background:linear-gradient(135deg,var(--amber),var(--neon));
  box-shadow:0 0 30px rgba(255,61,139,.35)}
.cta:active{box-shadow:0 0 12px rgba(255,61,139,.3)}
.cta[disabled]{opacity:.35;box-shadow:none}
.ghost{width:100%;background:transparent;color:var(--dim)}
.gap{height:10px}

.names{display:flex;flex-direction:column;gap:8px}
.names input,.guess{font-family:var(--body);font-size:16px;color:var(--txt);background:rgba(0,0,0,.3);
  border:1px solid var(--line);border-radius:12px;padding:13px;width:100%;transition:border-color .2s}
.names input::placeholder{color:#6d6590}
.names input:focus,.guess:focus{outline:0;border-color:var(--mint)}
.sw{width:58px;height:32px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid var(--line);position:relative;flex:none;cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#6d6590;transition:.18s cubic-bezier(.2,.8,.25,1)}
.sw.on{background:var(--mint)}.sw.on::after{left:29px;background:#0B0A14}
.tog{display:flex;justify-content:space-between;align-items:center;gap:14px}
.tog p{margin:4px 0 0;color:var(--dim);font-size:13px}
.warn{color:var(--neon);font-size:14px;margin:0 0 12px}

/* carte à retourner */
.stage{perspective:1200px;height:340px;margin-bottom:18px}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.9,.3,1)}
.flip.on{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;padding:28px 20px;overflow:hidden;border:1px solid var(--line)}
.face.back{background:repeating-linear-gradient(135deg,#241a42 0 14px,#1A1230 14px 28px)}
.face.back::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,rgba(255,61,139,.18),transparent 70%)}
.face.front{transform:rotateY(180deg);background:linear-gradient(180deg,var(--plum2),var(--plum));
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.card{min-height:300px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;padding:28px 20px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--plum2),var(--plum));border:1px solid var(--line);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.who{font-family:var(--disp);font-size:22px;color:#fff;position:relative;z-index:1}
.word{font-family:var(--body);font-weight:800;font-size:clamp(36px,13vw,54px);line-height:1.05;color:#fff;
  text-shadow:0 0 8px var(--mint),0 0 34px rgba(70,229,183,.55);animation:flick .55s steps(1) both;position:relative;z-index:1}
@keyframes flick{0%,25%{opacity:.12}35%{opacity:1}45%{opacity:.25}55%,100%{opacity:1}}
.word.pink{text-shadow:0 0 8px var(--neon),0 0 34px rgba(255,61,139,.55)}
.word.amber{text-shadow:0 0 8px var(--amber),0 0 34px rgba(255,194,75,.55)}
.word.plain{text-shadow:0 0 8px rgba(255,255,255,.35);font-size:clamp(26px,8vw,34px)}
.sm{color:var(--dim);font-size:14px;max-width:280px;position:relative;z-index:1}
.count{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--dim);text-align:center;margin:0 0 14px}

/* listes */
.list{display:flex;flex-direction:column;gap:8px}
.p{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  animation:pop .3s cubic-bezier(.2,.8,.25,1) both}
@keyframes pop{from{opacity:0;transform:translateX(-8px)}}
.p.dead{opacity:.4}.p.dead .nm{text-decoration:line-through}
.p .idx{font-family:var(--disp);font-size:12px;color:var(--amber);opacity:.8;min-width:20px}
.nm{flex:1}
.tag{font-family:var(--disp);font-size:10px;letter-spacing:.1em;padding:5px 9px;border-radius:20px;border:1px solid currentColor;flex:none}
.t-civil{color:var(--mint)}.t-under{color:var(--neon)}.t-white{color:var(--amber)}
button.p{cursor:pointer}
button.p:active{background:rgba(255,61,139,.16);border-color:var(--neon)}
.first{text-align:center;padding:18px;border-radius:18px;margin-bottom:14px;
  background:radial-gradient(70% 100% at 50% 0,rgba(255,194,75,.16),transparent);border:1px solid var(--line)}
.first b{font-family:var(--disp);color:var(--amber);font-size:22px;display:block;margin-top:6px}
.rest{float:right;font-family:var(--body);font-size:12px;letter-spacing:0;color:var(--dim);text-transform:none}

/* message passager */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  z-index:30;max-width:calc(100% - 36px);padding:13px 18px;border-radius:14px;font-size:14px;text-align:center;
  background:rgba(36,26,66,.96);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* dépouillement */
.tally{display:flex;flex-direction:column;gap:12px}
.tr{position:relative}
.tr .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tr .v{font-family:var(--disp);font-size:14px;color:var(--amber)}
.track{height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.fill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--amber),var(--neon));
  transition:width .7s cubic-bezier(.2,.8,.25,1);box-shadow:0 0 14px rgba(255,61,139,.5)}
.tr.lead .v{color:var(--neon)}
.tr.out .nm{color:var(--neon)}

.end-title{font-family:var(--disp);font-size:clamp(26px,8vw,34px);text-align:center;line-height:1.15;margin:6px 0 10px}
.end-sub{color:var(--dim);font-size:14px;text-align:center;margin:0 0 4px}

/* règles */
.rule{border-left:2px solid var(--neon);padding:0 0 0 14px;margin:0 0 20px}
.rule h3{font-family:var(--disp);font-size:13px;letter-spacing:.1em;color:var(--amber);margin:0 0 6px;text-transform:uppercase}
.rule p{margin:0;color:#cfc6ea;font-size:15px}
.rule ul{margin:6px 0 0;padding-left:18px;color:#cfc6ea;font-size:15px}
.rule li{margin-bottom:4px}
.roles{display:grid;gap:10px;margin-bottom:20px}
.rc{border:1px solid var(--line);border-radius:16px;padding:14px}
.rc h4{font-family:var(--disp);font-size:15px;margin:0 0 4px}
.rc p{margin:0;font-size:14px;color:var(--dim)}
.rc.c h4{color:var(--mint)}.rc.u h4{color:var(--neon)}.rc.w h4{color:var(--amber)}

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