:root{--yellow:#ffe500;--red:#ef2a19;--black:#070707;--panel:#111;--text:#f7f7f2;--muted:#aaa;--line:#282828;--radius:26px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#070707;color:var(--text);font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}.page-bg{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,rgba(255,229,0,.07),transparent 25%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,34px 34px,34px 34px;z-index:0}.topbar{position:relative;z-index:20;height:76px;display:flex;align-items:center;justify-content:space-between;padding:10px 22px;border-bottom:1px solid #1d1d1d;background:rgba(7,7,7,.9);backdrop-filter:blur(12px)}.brand{border:0;background:transparent;padding:0;cursor:pointer}.brand img{width:115px;height:56px;object-fit:contain}.top-actions{display:flex;gap:10px;align-items:center}.version{font-size:.72rem;letter-spacing:.12em;color:#666;font-weight:900}.ghost-btn,.primary-btn,.secondary-btn,.seg-btn,.remove-btn{font:inherit;font-weight:900;border:0;border-radius:14px;cursor:pointer;transition:.18s}.ghost-btn{background:#161616;color:#ddd;padding:10px 14px;border:1px solid #292929}.ghost-btn.danger{color:#ff756a}.primary-btn{background:var(--yellow);color:#080808;padding:15px 22px;box-shadow:0 12px 34px rgba(255,229,0,.13)}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}.primary-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.secondary-btn{background:#fff;color:#080808;padding:15px 22px}.xl-btn{min-width:245px;font-size:1.03rem}.hidden{display:none!important}.invisible{visibility:hidden}.app-shell{position:relative;z-index:2;width:min(1180px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.setup-wrap{min-height:calc(100vh - 145px);display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}.intro-block h1{font-size:clamp(5rem,13vw,10rem);line-height:.7;letter-spacing:-.08em;margin:18px 0 28px;font-weight:1000}.intro-block h1 span{color:var(--yellow)}.intro-block p{font-size:1.15rem;line-height:1.6;color:#bbb;max-width:510px}.eyebrow,.status-pill{display:inline-flex;padding:8px 12px;border:1px solid rgba(255,229,0,.26);background:rgba(255,229,0,.07);color:var(--yellow);border-radius:999px;font-size:.73rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.panel{background:rgba(17,17,17,.95);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 28px 85px rgba(0,0,0,.42)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}.section-head h2{font-size:clamp(2.3rem,5vw,4rem);letter-spacing:-.055em;line-height:.9;margin:5px 0 0}.kicker,.small-label{font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.13em;color:#888}.count-badge{background:#1c1c1c;border:1px solid #2c2c2c;padding:8px 11px;border-radius:999px;color:#aaa;font-size:.8rem}.setup-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-card{border:1px solid #272727;background:#0b0b0b;border-radius:18px;padding:15px}.option-label{font-weight:950}.adult-option{display:flex;justify-content:space-between;gap:12px;align-items:center}.adult-option p{margin:5px 0 0;color:#777;font-size:.8rem}.segmented{display:flex;gap:7px;margin-top:12px}.seg-btn{flex:1;padding:11px;background:#191919;color:#bbb;border:1px solid #292929}.seg-btn.selected{background:var(--yellow);color:#050505;border-color:var(--yellow)}.switch{position:relative;width:50px;height:28px;flex:none}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#343434;border-radius:999px;cursor:pointer}.slider:before{content:"";position:absolute;width:20px;height:20px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+.slider{background:var(--red)}.switch input:checked+.slider:before{transform:translateX(22px)}.divider{height:1px;background:#252525;margin:20px 0}.players-editor{display:grid;gap:9px}.player-edit{display:grid;grid-template-columns:38px 1fr 38px;gap:8px;align-items:center}.player-num{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:#080808;font-weight:1000}.input,.guess-select{width:100%;border:1px solid #292929;background:#090909;color:#fff;border-radius:14px;padding:13px 14px;font-size:1rem;outline:none}.input:focus,.guess-select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,229,0,.08)}.remove-btn{width:34px;height:34px;background:#1b1b1b;color:#999;font-size:1.35rem}.setup-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;min-height:calc(100vh - 180px)}.stage{min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,229,0,.07),transparent 34%)}.stage>*{position:relative;z-index:2}.stage-title{font-size:clamp(3.4rem,8vw,7.5rem);line-height:.86;letter-spacing:-.065em;margin:21px 0 14px;font-weight:1000}.stage-title span{color:var(--yellow)}.stage-title.smaller{font-size:clamp(2.8rem,6.5vw,5.7rem)}.stage-copy{max-width:650px;color:#c2c2c2;line-height:1.55;font-size:1.08rem;margin:0 0 22px}.stage-copy.compact{max-width:530px}.privacy-card{background:#0a0a0a;border:1px solid #2b2b2b;padding:13px 16px;border-radius:16px;margin:0 0 23px;color:#aaa}.secret-number{font-size:clamp(6rem,17vw,11rem);font-weight:1000;color:var(--yellow);line-height:.85;margin:14px 0 18px;text-shadow:0 12px 45px rgba(255,229,0,.14)}.side-panel{height:max-content;display:flex;flex-direction:column;gap:15px}.side-panel h3{font-size:2rem;margin:5px 0 0}.scoreboard{display:grid;gap:8px}.score-row{display:flex;justify-content:space-between;align-items:center;background:#0a0a0a;border:1px solid #242424;border-radius:14px;padding:11px 12px}.score-row>div{display:flex;align-items:center;gap:8px}.rank{color:#666;min-width:18px}.score{font-size:1.2rem;color:var(--yellow);font-weight:1000}.mini-target{font-size:.56rem;background:var(--yellow);color:#080808;padding:3px 6px;border-radius:999px;font-weight:1000}.round-info{border-top:1px solid #272727;padding-top:14px;color:#aaa;line-height:1.6}.round-info span{color:#666}.progress-dots{display:flex;gap:9px;margin:18px 0 22px}.progress-dots span{width:10px;height:10px;border-radius:50%;background:#333}.progress-dots span.on{background:var(--yellow);box-shadow:0 0 18px rgba(255,229,0,.35)}.theme-card{position:relative;width:min(320px,74vw);aspect-ratio:63/88;border-radius:25px;padding:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.52);margin:18px 0 10px}.theme-card:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.10}.theme-card.classic{background:#dededb;color:#090909}.theme-card.classic:before{background-image:url('./assets/pattern-classic.png')}.theme-card.crazy{background:var(--yellow);color:#090909}.theme-card.crazy:before{background-image:url('./assets/pattern-crazy.png')}.theme-card.hard{background:#070707;color:#f3f3ef;border:1px solid #333}.theme-card.hard:before{background-image:url('./assets/pattern-dark.png');opacity:.22}.theme-card.adult{background:var(--red);color:#090909}.theme-card.adult:before{background-image:url('./assets/pattern-18.png');opacity:.15}.theme-label{position:absolute;top:20px;padding:6px 12px;border-radius:999px;background:#080808;color:#fff;font-size:.67rem;font-weight:1000;text-transform:uppercase;letter-spacing:.07em}.hard .theme-label{background:#eee;color:#111}.theme-card h3{position:relative;font-size:clamp(1.8rem,5vw,3.1rem);line-height:.93;margin:0;text-transform:uppercase;font-weight:1000;letter-spacing:-.035em}.theme-icon{position:relative;font-size:2.2rem}.answer-prompt{margin:14px 0 0;color:#bbb}.timer-ring{width:250px;height:250px;border-radius:50%;display:grid;place-items:center;position:relative;margin:28px 0;background:conic-gradient(var(--yellow) var(--progress),#222 0)}.timer-ring:before{content:"";position:absolute;inset:15px;background:#090909;border-radius:50%}.timer-ring div{position:relative;font-size:5.3rem;line-height:.8;font-weight:1000;color:#fff}.timer-ring span{position:absolute;bottom:64px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#777}.guess-form{width:min(590px,100%);display:grid;gap:9px;margin:17px 0 24px}.guess-row{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center;text-align:left;background:#0b0b0b;border:1px solid #252525;border-radius:15px;padding:10px 12px}.guess-select{text-align:center;font-weight:1000;font-size:1.1rem}.reveal-secret-label{margin-top:18px;color:#777;font-size:.75rem;letter-spacing:.14em;font-weight:950}.reveal-secret{font-size:clamp(5rem,13vw,9rem);line-height:.85;font-weight:1000;color:#fff;margin:7px 0}.result-title{font-size:clamp(3.5rem,9vw,7.2rem);line-height:.82;letter-spacing:-.06em;margin:8px 0 12px}.hit-title{color:var(--yellow)}.miss-title{color:#666}.reveal-grid{width:min(720px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;margin:15px 0}.reveal-card{background:#0b0b0b;border:1px solid #262626;border-radius:17px;padding:15px}.reveal-card.hit{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow),0 0 35px rgba(255,229,0,.08)}.reveal-card .guess{font-size:2.5rem;font-weight:1000}.reveal-card span{color:#777}.reveal-card.hit span{color:var(--yellow);font-weight:900}.target-gain{margin:5px 0 22px;color:#aaa}.target-gain strong{color:var(--yellow);font-size:1.25rem}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}.confetti span{position:absolute;top:-40px;color:var(--yellow);font-size:1.25rem;animation:fall linear forwards}@keyframes fall{to{transform:translateY(750px) rotate(540deg);opacity:.1}}.final-screen{max-width:830px;margin:5vh auto;text-align:center;padding:40px}.final-screen h1{font-size:clamp(3rem,8vw,6.5rem);line-height:.9;letter-spacing:-.06em;margin:22px 0 12px;color:var(--yellow)}.final-screen>p{color:#aaa;font-size:1.08rem}.podium-list{display:grid;gap:9px;margin:28px auto;width:min(600px,100%)}.podium-row{display:grid;grid-template-columns:55px 1fr auto;align-items:center;text-align:left;padding:14px 18px;border-radius:16px;background:#0a0a0a;border:1px solid #252525}.podium-row.rank-1{border-color:var(--yellow)}.place{font-size:1.4rem}.final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}.dialog{max-width:650px;width:calc(100% - 28px);border:1px solid #292929;border-radius:24px;background:#101010;color:#fff;padding:26px;box-shadow:0 30px 100px #000}.dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(6px)}.dialog-close{position:absolute;top:13px;right:13px;border:0;background:#272727;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.25rem;cursor:pointer}.rules-list{line-height:1.55;color:#ddd;padding-left:22px}.rules-list li{margin:10px 0}.toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#090909;border-radius:999px;padding:11px 15px;font-weight:950;box-shadow:0 14px 40px rgba(0,0,0,.4)}@media(max-width:900px){.setup-wrap,.game-layout{grid-template-columns:1fr}.intro-block{text-align:center}.intro-block p{margin-left:auto;margin-right:auto}.side-panel{order:-1}.game-layout{min-height:auto}.stage{min-height:600px}.side-panel .scoreboard{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.version{display:none}}@media(max-width:580px){.topbar{height:64px;padding:7px 10px}.brand img{width:88px;height:45px}.app-shell{width:calc(100% - 16px);padding:20px 0 45px}.panel{padding:17px;border-radius:20px}.setup-options{grid-template-columns:1fr}.setup-actions{flex-direction:column}.setup-actions button{width:100%}.stage{min-height:540px}.stage-title{font-size:clamp(3rem,15vw,5rem)}.theme-card{width:min(280px,80vw)}.guess-row{grid-template-columns:1fr 90px}.final-screen{padding:24px 16px}.final-actions{flex-direction:column}.final-actions button{width:100%}.ghost-btn{padding:9px 10px}}


/* ===== V1.1 BIS GLOW-UP ===== */
.page-bg{
  background:
    linear-gradient(rgba(5,5,5,.68),rgba(5,5,5,.82)),
    url('./assets/bg-icons-dense.png') center/560px auto repeat,
    radial-gradient(circle at 50% 0%,rgba(255,229,0,.10),transparent 38%);
  opacity:.92;
}
.topbar{box-shadow:0 8px 35px rgba(0,0,0,.28)}
.panel{background:linear-gradient(180deg,rgba(18,18,18,.96),rgba(10,10,10,.97));box-shadow:0 34px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.025)}
.stage{isolation:isolate}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.018) 49%,transparent 56%);transform:translateX(-120%);animation:stageSheen 9s ease-in-out infinite}
@keyframes stageSheen{0%,68%{transform:translateX(-120%)}82%,100%{transform:translateX(130%)}}

.card-scene{width:min(320px,74vw);aspect-ratio:63/88;perspective:1400px;margin:18px 0 10px;position:relative;filter:drop-shadow(0 32px 38px rgba(0,0,0,.40));animation:cardDrop .62s cubic-bezier(.18,.88,.24,1.15) both}
.card-flipper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);animation:cardFlip .82s cubic-bezier(.2,.75,.25,1) .50s forwards}
.card-face,.card-back-face{position:absolute;inset:0;border-radius:25px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back-face{transform:rotateY(180deg);background:#050505 url('./assets/card-back.png') center/cover no-repeat;border:1px solid rgba(255,229,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.card-face{transform:rotateY(0deg)}
.card-face:after{content:"";position:absolute;top:-25%;bottom:-25%;left:-75%;width:45%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.58),transparent);transform:skewX(-16deg);opacity:0;pointer-events:none;animation:cardGloss .85s ease-out 1.26s forwards}
.card-face .theme-card{width:100%;height:100%;margin:0;box-shadow:none;border-radius:25px}
.card-scene::after{content:"";position:absolute;left:12%;right:12%;bottom:-22px;height:26px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(12px);z-index:-1;animation:shadowLand .62s ease-out both}
@keyframes cardDrop{0%{opacity:0;transform:translateY(-210px) scale(.82) rotateZ(-3deg)}65%{opacity:1;transform:translateY(13px) scale(1.025) rotateZ(.8deg)}100%{opacity:1;transform:translateY(0) scale(1) rotateZ(0)}}
@keyframes shadowLand{0%{opacity:0;transform:scale(.45)}100%{opacity:1;transform:scale(1)}}
@keyframes cardFlip{0%{transform:rotateY(180deg)}54%{transform:rotateY(82deg) scale(1.035)}100%{transform:rotateY(0deg) scale(1)}}
@keyframes cardGloss{0%{left:-75%;opacity:0}18%{opacity:.7}100%{left:135%;opacity:0}}
@media (prefers-reduced-motion:reduce){.card-scene,.card-flipper,.card-face:after,.stage:before{animation:none!important}.card-flipper{transform:none}}


/* Question d'échelle au-dessus des cartes */
.scale-question{
  margin:18px 0 2px;
  color:#d0d0d0;
  font-size:clamp(1rem,2.2vw,1.28rem);
  font-weight:850;
  letter-spacing:-.01em;
  text-align:center;
}
.scale-question strong{
  color:var(--yellow);
  text-transform:uppercase;
  font-weight:1000;
}

/* Révélation privée automatique : 5 s avant, 5 s d'affichage */
.private-countdown{
  font-size:clamp(5.5rem,16vw,10rem);
  font-weight:1000;
  line-height:.82;
  color:var(--yellow);
  margin:16px 0 8px;
  text-shadow:0 0 35px rgba(255,229,0,.18);
  animation:countPulse 1s ease-in-out infinite;
}
.countdown-caption{
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.16em;
  color:#777;
  margin:0 0 8px;
}
.secret-time{
  margin-top:4px;
  color:#777;
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.08em;
}
.secret-time strong{
  color:var(--yellow);
  font-size:1.35rem;
}
.secret-pop{animation:secretPop .42s cubic-bezier(.2,.9,.25,1.35)}
@keyframes countPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.055);opacity:.8}
}
@keyframes secretPop{
  0%{transform:scale(.55);opacity:0;filter:blur(10px)}
  100%{transform:scale(1);opacity:1;filter:blur(0)}
}

/* ===== V1.2 — polish & navigation ===== */
.page-bg{
  background:
    radial-gradient(circle at 50% -15%,rgba(255,229,0,.055),transparent 42%),
    linear-gradient(180deg,rgba(4,4,4,.70),rgba(4,4,4,.92)),
    url('./assets/bg-icons-dense.png') center center / cover no-repeat;
  opacity:.78;
  filter:blur(.45px) saturate(.82);
  transform:scale(1.025);
}
.page-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,.22) 70%,rgba(0,0,0,.58) 100%);
}
.topbar{background:rgba(5,5,5,.82);border-bottom-color:rgba(255,255,255,.055)}
body.home-mode .brand{visibility:hidden;pointer-events:none}
body.home-mode .topbar{background:transparent;border-bottom-color:transparent;box-shadow:none}
body.home-mode .app-shell{padding-top:0}
.home-screen{min-height:calc(100vh - 78px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:25px;padding:40px 20px 70px}
.hero-logo{width:min(520px,72vw);height:auto;display:block;filter:drop-shadow(0 22px 55px rgba(0,0,0,.5))}
.hero-play{min-width:210px;font-size:1.15rem;padding:16px 30px;border-radius:999px;box-shadow:0 18px 55px rgba(255,229,0,.16)}
.home-version{font-size:.66rem;letter-spacing:.18em;color:#666;font-weight:900;text-transform:uppercase;margin-top:-10px}
.setup-single{width:min(820px,100%);margin:5vh auto 0;padding:clamp(22px,4vw,38px)}
.seg-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px}
.seg-btn strong{font-size:1.06rem}.seg-btn small{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.seg-btn.selected small{opacity:.75}
#rollBtn{margin-top:8px}
.card-back-face:after{content:"";position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 37%,rgba(255,255,255,.22) 49%,transparent 61%);transform:translateX(-125%) skewX(-12deg);animation:backGloss .85s ease-out .14s forwards;pointer-events:none}
@keyframes backGloss{to{transform:translateX(125%) skewX(-12deg)}}
.card-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.card-face:before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 28%,transparent 72%,rgba(255,255,255,.025));mix-blend-mode:screen}
.final-actions .ghost-btn{min-width:170px}
@media(max-width:580px){
  .home-screen{min-height:calc(100vh - 64px);gap:20px;padding-bottom:60px}
  .hero-logo{width:min(430px,86vw)}
  .setup-single{margin-top:2vh}
}
\n\n/* ===== V1.3 — test notice, custom themes & feedback ===== */\n.link-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}\n.notice-screen{width:min(820px,100%);margin:5vh auto 0;padding:clamp(26px,5vw,50px);text-align:center}\n.notice-screen h1{font-size:clamp(2.25rem,5.5vw,4.6rem);line-height:.95;letter-spacing:-.05em;margin:14px auto 22px;max-width:760px}\n.notice-screen>p{max-width:690px;margin:12px auto;color:#bbb;font-size:1.05rem;line-height:1.6}\n.notice-screen>p strong{color:#fff}\n.notice-privacy,.notice-ulule{display:grid;grid-template-columns:180px 1fr;gap:18px;text-align:left;align-items:start;margin:18px auto 0;max-width:690px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid #262626}\n.notice-ulule{border-color:rgba(255,229,0,.22);background:rgba(255,229,0,.045)}\n.notice-privacy strong,.notice-ulule strong{color:var(--yellow)}\n.notice-privacy span,.notice-ulule span{color:#aaa;line-height:1.45}\n.notice-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}\n.themes-dialog{max-width:920px}\n.dialog-intro{color:#aaa;max-width:760px;line-height:1.5;margin:4px 0 18px}\n.theme-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:24px}\n.custom-theme-layout{display:grid;grid-template-columns:minmax(210px,280px) 1fr;gap:24px;align-items:start}\n.custom-card-preview{display:flex;justify-content:center}\n.custom-card{width:min(250px,100%);aspect-ratio:63/88;border-radius:24px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 20px;background:#ececec url('./assets/pattern-classic.png') center/cover no-repeat;color:#080808;box-shadow:0 20px 55px rgba(0,0,0,.28);overflow:hidden}\n.custom-card:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.56);z-index:0}\n.custom-card>*{position:relative;z-index:1}\n.custom-card .theme-label{position:absolute;top:24px;background:#070707;color:#fff;border-radius:999px;padding:7px 18px;text-transform:uppercase;font-size:.65rem;font-weight:950;letter-spacing:.09em}\n.custom-card h3{font-size:clamp(1.35rem,3vw,2.1rem);line-height:.95;max-width:95%;margin:10px 0;text-transform:uppercase}\n.custom-card .theme-icon{position:absolute;bottom:28px;font-size:2.4rem;font-weight:1000}\n.custom-theme-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}.custom-theme-head span{color:#777;font-size:.8rem}\n.custom-theme-list{display:grid;gap:9px;max-height:460px;overflow:auto;padding-right:3px}\n.custom-theme-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:9px;border:1px solid #252525;border-radius:14px;background:#0a0a0a}\n.mini-btn{border:1px solid #333;background:#171717;color:#fff;border-radius:11px;padding:10px 12px;font-weight:850;cursor:pointer}.mini-btn:hover{border-color:#666}.mini-btn.danger{color:#ff7777}.empty-custom{padding:28px;border:1px dashed #2a2a2a;border-radius:14px;color:#777;text-align:center}\n.theme-card.custom{background:#ececec url('./assets/pattern-classic.png') center/cover no-repeat;color:#090909}\n.theme-card.custom:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.52);z-index:0}.theme-card.custom>*{position:relative;z-index:1}.theme-card.custom .theme-label{background:#090909;color:#fff}\n@media(max-width:760px){.custom-theme-layout{grid-template-columns:1fr}.custom-card{width:220px}.theme-form{grid-template-columns:1fr}.custom-theme-row{grid-template-columns:1fr 1fr}.custom-theme-row .custom-theme-edit{grid-column:1/-1}.notice-privacy,.notice-ulule{grid-template-columns:1fr}.top-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.top-actions .ghost-btn{font-size:.72rem;padding:8px 9px}}\n
/* ===== V1.4 — règles express avant la première partie ===== */
.quick-rules-screen{width:min(980px,100%);margin:3vh auto 0;padding:clamp(24px,4vw,44px)}
.quick-rules-screen>h1{text-align:center;font-size:clamp(2.1rem,5vw,4.4rem);line-height:.96;letter-spacing:-.05em;margin:12px auto 28px;max-width:820px}
.quick-rules-screen>h1 span{color:var(--yellow)}
.quick-rules-screen>.kicker{display:block;text-align:center}
.quick-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.quick-rule-card{position:relative;padding:22px 22px 20px;border-radius:20px;border:1px solid #242424;background:rgba(255,255,255,.035);overflow:hidden}
.quick-rule-card h3{margin:2px 0 10px;font-size:1.12rem;color:#fff}
.quick-rule-card p{margin:0;color:#aaa;line-height:1.52}
.quick-rule-card p strong{color:#eee}
.quick-rule-num{width:38px;height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border-radius:50%;background:var(--yellow);color:#050505;font-weight:1000;font-size:1rem;box-shadow:0 8px 22px rgba(255,229,0,.13)}
.quick-rule-card.scale-rule{border-color:rgba(255,229,0,.32);background:linear-gradient(145deg,rgba(255,229,0,.07),rgba(255,255,255,.025))}
.quick-rule-card.score-rule{border-color:rgba(255,229,0,.18)}
.rule-example{margin-top:12px!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.9rem;color:#7f7f7f!important}
.quick-rules-note{text-align:center;color:#777;margin:22px auto 0;max-width:700px;font-size:.9rem;line-height:1.45}
.final-custom-themes{margin-top:26px;padding-top:22px;border-top:1px solid #232323;text-align:center}
.final-custom-themes p{margin:0 0 10px;color:#858585;font-size:.9rem}
@media(max-width:700px){.quick-rules-grid{grid-template-columns:1fr}.quick-rules-screen{margin-top:1vh}.quick-rule-card{padding:18px}.quick-rules-screen>h1{font-size:clamp(2rem,10vw,3rem)}}

/* ===== V2.0 — rappel visuel des thèmes de la manche ===== */
.theme-focus-layout{
  width:min(680px,100%);
  display:grid;
  grid-template-columns:110px minmax(0,320px);
  gap:22px;
  align-items:center;
  justify-content:center;
  margin:4px auto 0;
}
.theme-focus-layout.no-recall{grid-template-columns:minmax(0,320px)}
.theme-current-wrap{display:flex;justify-content:center;min-width:0}
.theme-recall-column{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  justify-content:center;
}
.theme-mini{
  position:relative;
  width:80px;
  aspect-ratio:63/88;
  border-radius:12px;
  padding:10px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  transform:rotate(-1deg);
  animation:miniCardIn .28s ease-out both;
  flex:0 0 auto;
}
.theme-mini:nth-child(even){transform:rotate(1.2deg)}
.theme-mini:before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.10;
}
.theme-mini.classic{background:#dededb;color:#090909}
.theme-mini.classic:before{background-image:url('./assets/pattern-classic.png')}
.theme-mini.crazy{background:var(--yellow);color:#090909}
.theme-mini.crazy:before{background-image:url('./assets/pattern-crazy.png')}
.theme-mini.hard{background:#070707;color:#f3f3ef;border:1px solid #333}
.theme-mini.hard:before{background-image:url('./assets/pattern-dark.png');opacity:.22}
.theme-mini.adult{background:var(--red);color:#090909}
.theme-mini.adult:before{background-image:url('./assets/pattern-18.png');opacity:.15}
.theme-mini.custom{background:#ececec url('./assets/pattern-classic.png') center/cover no-repeat;color:#090909}
.theme-mini.custom:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5);z-index:0}
.theme-mini>*{position:relative;z-index:2}
.theme-mini-label{
  position:absolute;
  top:7px;
  padding:2px 6px;
  border-radius:999px;
  background:#080808;
  color:#fff;
  font-size:.34rem;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.theme-mini.hard .theme-mini-label{background:#eee;color:#111}
.theme-mini h4{
  margin:5px 0 0;
  font-size:.62rem;
  line-height:.93;
  letter-spacing:-.025em;
  text-transform:uppercase;
  font-weight:1000;
  max-width:100%;
  overflow-wrap:anywhere;
}
.theme-mini-icon{
  position:absolute;
  bottom:8px;
  font-size:.82rem;
  line-height:1;
}
.round-theme-reminder{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:2px 0 8px;
}
.round-theme-reminder .theme-mini{
  width:82px;
  transform:none;
  box-shadow:0 9px 24px rgba(0,0,0,.28);
}
.round-theme-reminder .theme-mini:nth-child(even){transform:none}
@keyframes miniCardIn{
  from{opacity:0;transform:translateX(-12px) scale(.9)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@media(max-width:700px){
  .theme-focus-layout{
    grid-template-columns:1fr;
    gap:10px;
  }
  .theme-recall-column{
    order:2;
    flex-direction:row;
    justify-content:center;
    align-items:center;
  }
  .theme-current-wrap{order:1}
  .theme-mini{width:72px}
  .round-theme-reminder{gap:9px;margin-top:0}
  .round-theme-reminder .theme-mini{width:70px}
}


/* RIGHT ON — difficulté 1–8 par défaut */
.seg-btn.easy-option{transform:scale(.92);opacity:.78}
.seg-btn.easy-option.selected{transform:scale(.96);opacity:1}
.seg-btn.easy-option strong{font-size:.98rem}
.seg-btn.easy-option small{font-size:.62rem}

/* ===== V2.0 — choix Salon / Distant ===== */
.mode-select-screen,.remote-hub,.remote-form,.remote-lobby,.remote-pending{width:min(980px,100%);margin:3vh auto 0;padding:clamp(24px,4vw,44px)}
.mode-select-screen>h1,.remote-hub>h1,.remote-pending>h1{font-size:clamp(2.3rem,5vw,4.3rem);letter-spacing:-.05em;line-height:.96;margin:10px 0 10px}
.mode-select-intro,.remote-lead{color:#999;line-height:1.5;margin:0 0 24px}.remote-lead.small{max-width:700px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.mode-card{appearance:none;border:1px solid #292929;background:linear-gradient(145deg,#121212,#080808);color:#fff;border-radius:24px;padding:26px;text-align:left;display:grid;grid-template-columns:72px 1fr;gap:18px;cursor:pointer;transition:.22s transform,.22s border-color,.22s box-shadow}.mode-card:hover{transform:translateY(-3px);border-color:#555;box-shadow:0 18px 50px rgba(0,0,0,.28)}.mode-card-live{border-color:rgba(255,229,0,.38);background:linear-gradient(145deg,rgba(255,229,0,.07),#090909 62%)}
.mode-icon{font-size:2.6rem;width:68px;height:68px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:#181818}.mode-copy h2{font-size:1.65rem;margin:8px 0 8px}.mode-copy p{color:#999;line-height:1.45;margin:0 0 16px}.mode-copy>strong{color:var(--yellow);font-size:.9rem}.mode-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.58rem;font-weight:1000;letter-spacing:.08em}.mode-status.ready{background:var(--yellow);color:#050505}.mode-status.beta{background:#1a1a1a;color:#aaa;border:1px solid #333}
.remote-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.remote-choice{border:1px solid #282828;background:#0b0b0b;color:#fff;border-radius:20px;padding:22px;display:grid;grid-template-columns:50px 1fr;gap:14px;text-align:left;cursor:pointer}.remote-choice:hover{border-color:#555}.remote-choice.primary-choice{border-color:rgba(255,229,0,.3);background:rgba(255,229,0,.04)}.remote-choice>span{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--yellow);color:#050505;font-size:1.4rem;font-weight:1000}.remote-choice strong{display:block;font-size:1.1rem;margin:2px 0 5px}.remote-choice small{color:#888;line-height:1.35}
.remote-flow-preview{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:14px;border:1px solid #242424;background:#090909;border-radius:16px}.remote-flow-preview span{font-size:.62rem;letter-spacing:.08em;font-weight:950;color:#aaa}.remote-flow-preview span:last-child{color:var(--yellow)}.remote-flow-preview i{color:#484848;font-style:normal}
.remote-form .section-head p{color:#888;margin:6px 0 0}.cloud-badge{border:1px solid #353535;color:#999;padding:8px 11px;border-radius:999px;font-size:.68rem;font-weight:900;white-space:nowrap}.remote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.field-block{display:flex;flex-direction:column;gap:8px}.field-block>span{font-size:.72rem;color:#888;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.remote-form-grid .field-block{grid-column:1/-1}.remote-tech-note,.firebase-lock{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:15px 17px;border-radius:16px;border:1px solid rgba(255,229,0,.16);background:rgba(255,229,0,.035);margin-top:18px}.remote-tech-note strong,.firebase-lock strong{color:#eee}.remote-tech-note span,.firebase-lock p{color:#888;margin:2px 0 0;line-height:1.4}.join-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.room-code-input{text-transform:uppercase;letter-spacing:.18em;font-weight:1000}
.remote-lobby-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.remote-lobby-head h1{font-size:clamp(2.2rem,5vw,4rem);margin:8px 0}.remote-lobby-head h1 span{color:var(--yellow)}.remote-lobby-head p{color:#888}.room-code-card{min-width:135px;text-align:center;padding:13px 18px;border-radius:18px;background:var(--yellow);color:#050505}.room-code-card small{display:block;font-size:.58rem;font-weight:1000;letter-spacing:.12em}.room-code-card strong{font-size:1.8rem;letter-spacing:.12em}.lobby-grid{display:grid;grid-template-columns:1fr 230px;gap:16px;margin:18px 0}.lobby-main,.lobby-settings{border:1px solid #252525;border-radius:18px;background:#0a0a0a;padding:16px}.share-box{display:grid;grid-template-columns:1fr auto;gap:8px}.lobby-players{display:grid;gap:9px;margin-top:14px}.lobby-player{display:grid;grid-template-columns:38px 1fr auto auto;gap:10px;align-items:center;padding:10px;border:1px solid #242424;border-radius:14px}.avatar-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--yellow);color:#050505;font-weight:1000}.lobby-player em{font-size:.58rem;color:#777;font-style:normal;font-weight:900}.ready-dot{font-size:.58rem;color:#9edb78;font-weight:1000}.lobby-placeholder{border:1px dashed #2b2b2b;border-radius:14px;padding:22px;text-align:center;color:#666;font-size:.82rem}.lobby-settings{display:grid;gap:12px;align-content:start}.lobby-settings>div{padding:11px 0;border-bottom:1px solid #202020}.lobby-settings>div:last-child{border:0}.lobby-settings strong,.lobby-settings small{display:block}.lobby-settings small{color:#777;margin-top:3px}.firebase-lock>span{font-size:1.6rem}.remote-pending{text-align:center;max-width:760px}.remote-pending-icon{font-size:4rem;margin-bottom:10px}.remote-pending>p{color:#999;line-height:1.55;max-width:650px;margin:18px auto 24px}
@media(max-width:760px){.mode-grid,.remote-choice-grid,.remote-form-grid,.join-fields,.lobby-grid{grid-template-columns:1fr}.mode-card{grid-template-columns:56px 1fr;padding:18px}.mode-icon{width:54px;height:54px;font-size:2rem}.remote-lobby-head{align-items:stretch;flex-direction:column}.room-code-card{align-self:flex-start}.share-box{grid-template-columns:1fr}.cloud-badge{display:none}}

/* ===== V2.1 — Firebase lobby live ===== */
.firebase-ok{border-color:rgba(70,210,120,.35)!important;background:rgba(70,210,120,.06)!important}.firebase-ok strong{color:#7be09f!important}
.firebase-error{border-color:rgba(255,90,90,.38)!important;background:rgba(255,70,70,.06)!important}.firebase-error strong{color:#ff8b8b!important}
.remote-inline-error{margin:14px 0;padding:12px 14px;border:1px solid rgba(255,80,80,.36);background:rgba(255,60,60,.07);color:#ff9a9a;border-radius:13px;font-size:.9rem}.remote-inline-error.hidden{display:none}
.firebase-live{border-color:rgba(255,229,0,.28)!important;background:rgba(255,229,0,.05)!important}.firebase-live>span{color:#ffe500!important}

/* ===== V2.2 — gameplay distant : cible privée + thème 1 ===== */
.remote-game-screen{width:min(860px,100%);margin:3vh auto 0;padding:clamp(24px,4vw,42px);text-align:center;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.remote-game-meta{position:absolute;top:18px;left:20px;right:20px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.remote-game-meta span{border:1px solid #2a2a2a;background:#0b0b0b;color:#8e8e8e;border-radius:999px;padding:6px 10px;font-size:.66rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.remote-target-orbit{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;font-size:2.7rem;background:radial-gradient(circle at center,#171717 0 30%,#080808 31% 48%,#ffe500 49% 54%,#080808 55% 70%,#ffe500 71% 76%,#080808 77%);box-shadow:0 0 50px rgba(255,229,0,.12)}
.remote-game-screen h1{font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:.95;letter-spacing:-.05em;margin:4px 0}
.remote-private-number{width:clamp(150px,24vw,220px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(5rem,13vw,8.5rem);font-weight:1000;color:#060606;background:var(--yellow);box-shadow:0 0 0 10px #0b0b0b,0 0 0 12px rgba(255,229,0,.2),0 24px 80px rgba(255,229,0,.16);animation:secretPop .35s cubic-bezier(.2,.9,.25,1.2) both}
.remote-private-note{color:#696969;font-size:.78rem;max-width:520px;margin:0}
.remote-waiting-pulse{height:28px;display:flex;align-items:center;justify-content:center;gap:7px}
.remote-waiting-pulse i{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:remotePulse 1.1s infinite ease-in-out}
.remote-waiting-pulse i:nth-child(2){animation-delay:.15s}.remote-waiting-pulse i:nth-child(3){animation-delay:.3s}
@keyframes remotePulse{0%,70%,100%{opacity:.2;transform:translateY(0)}35%{opacity:1;transform:translateY(-7px)}}
.remote-theme-screen{padding-top:70px}
.remote-theme-card{width:min(270px,62vw);aspect-ratio:63/88;border-radius:24px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:28px 20px;box-shadow:0 28px 80px rgba(0,0,0,.42);animation:remoteCardIn .55s cubic-bezier(.18,.78,.24,1.08) both}
.remote-theme-card:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;pointer-events:none}
.remote-theme-card.classic{background:#dededb;color:#080808}.remote-theme-card.classic:before{background-image:url('./assets/pattern-classic.png')}
.remote-theme-card.crazy{background:var(--yellow);color:#080808}.remote-theme-card.crazy:before{background-image:url('./assets/pattern-crazy.png')}
.remote-theme-card.hard{background:#070707;color:#f2f2ee;border:1px solid #333}.remote-theme-card.hard:before{background-image:url('./assets/pattern-dark.png');opacity:.24}
.remote-theme-card.adult{background:var(--red);color:#080808}.remote-theme-card.adult:before{background-image:url('./assets/pattern-18.png');opacity:.15}
.remote-theme-card.custom{background:#ececec;color:#090909}.remote-theme-card.custom:before{background-image:url('./assets/pattern-classic.png')}
.remote-theme-card>*{position:relative;z-index:2}.remote-theme-card .theme-label{position:absolute;top:24px;border-radius:999px;padding:7px 18px;background:#080808;color:#fff;font-size:.62rem;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.remote-theme-card.hard .theme-label{background:#efefeb;color:#111}
.remote-theme-card h3{font-size:clamp(1.5rem,4vw,2.45rem);line-height:.93;letter-spacing:-.035em;text-transform:uppercase;margin:0;max-width:96%;overflow-wrap:anywhere}.remote-theme-card .theme-icon{position:absolute;bottom:26px;font-size:2.5rem}
@keyframes remoteCardIn{from{opacity:0;transform:translateY(-35px) rotateX(12deg) scale(.92)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
.remote-answer-box{width:min(600px,100%);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.remote-answer-box .field-block{text-align:left}.remote-answer-box .xl-btn{min-width:190px}
.remote-observer-note{color:#a0a0a0;padding:14px 18px;border:1px solid #262626;background:#0b0b0b;border-radius:16px}.remote-observer-note strong{color:#fff}
.remote-answer-reveal{width:min(650px,100%);border:1px solid rgba(255,229,0,.28);background:rgba(255,229,0,.055);border-radius:20px;padding:18px 22px;display:flex;flex-direction:column;gap:7px}.remote-answer-reveal small{color:#868686;text-transform:uppercase;font-weight:900;letter-spacing:.07em}.remote-answer-reveal strong{font-size:clamp(1.3rem,3vw,2rem);color:#fff}
@media(max-width:680px){.remote-game-screen{margin-top:1vh;min-height:calc(100vh - 105px);padding:64px 16px 20px}.remote-game-meta{top:12px}.remote-answer-box{grid-template-columns:1fr}.remote-answer-box .xl-btn{width:100%}.remote-theme-card{width:min(235px,65vw)}}

/* ===== V2.3 — boucle distante complète ===== */
.remote-score-strip{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:34px;margin-bottom:2px}
.remote-score-strip span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid #252525;background:#0a0a0a;color:#999;font-size:.68rem;font-weight:850}
.remote-score-strip span b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#171717;color:#777;font-size:.58rem}
.remote-score-strip span strong{color:#fff}.remote-score-strip span.target{border-color:rgba(255,229,0,.32);color:#ddd}.remote-score-strip span.target b{background:var(--yellow);color:#050505}
.remote-round-recall{display:flex;align-items:flex-start;justify-content:center;gap:14px;flex-wrap:wrap;width:100%;margin:2px 0 4px}
.remote-recall-item{width:120px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.remote-theme-mini{width:100%;aspect-ratio:63/88;border-radius:16px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:14px 10px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.remote-theme-mini:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.11}.remote-theme-mini>*{position:relative;z-index:2}.remote-theme-mini.classic{background:#dededb;color:#080808}.remote-theme-mini.classic:before{background-image:url('./assets/pattern-classic.png')}.remote-theme-mini.crazy{background:var(--yellow);color:#080808}.remote-theme-mini.crazy:before{background-image:url('./assets/pattern-crazy.png')}.remote-theme-mini.hard{background:#070707;color:#f2f2ee;border:1px solid #333}.remote-theme-mini.hard:before{background-image:url('./assets/pattern-dark.png');opacity:.24}.remote-theme-mini.adult{background:var(--red);color:#080808}.remote-theme-mini.adult:before{background-image:url('./assets/pattern-18.png');opacity:.15}.remote-theme-mini.custom{background:#ececec;color:#090909}.remote-theme-mini.custom:before{background-image:url('./assets/pattern-classic.png')}
.remote-theme-mini .theme-label{position:absolute;top:9px;border-radius:999px;padding:3px 8px;background:#080808;color:#fff;font-size:.38rem;font-weight:1000;letter-spacing:.05em;text-transform:uppercase}.remote-theme-mini.hard .theme-label{background:#efefeb;color:#111}.remote-theme-mini h3{font-size:.78rem;line-height:.92;letter-spacing:-.025em;text-transform:uppercase;margin:0;max-width:96%;overflow-wrap:anywhere}.remote-theme-mini .theme-icon{position:absolute;bottom:10px;font-size:1.05rem}
.remote-recall-answer{min-height:34px;border:1px solid #252525;background:#0a0a0a;color:#bdbdbd;border-radius:11px;padding:7px 8px;font-size:.68rem;line-height:1.25;text-align:center;display:flex;align-items:center;justify-content:center}
.remote-vote-screen h1 span{color:var(--yellow)}
.remote-countdown{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--yellow) 0 78%,#171717 78% 100%);box-shadow:inset 0 0 0 8px #080808,0 0 0 1px #2a2a2a}.remote-countdown strong{font-size:2.4rem;line-height:.9;color:#fff}.remote-countdown small{font-size:.56rem;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.remote-vote-actions{width:min(620px,100%);display:grid;gap:14px}.remote-number-grid{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:8px}.remote-number-btn{appearance:none;border:1px solid #303030;background:#0c0c0c;color:#fff;border-radius:14px;min-height:54px;font-size:1.15rem;font-weight:1000;cursor:pointer;transition:.16s transform,.16s background,.16s border-color}.remote-number-btn:hover{transform:translateY(-2px);border-color:#666}.remote-number-btn.selected{background:var(--yellow);color:#050505;border-color:var(--yellow);box-shadow:0 10px 28px rgba(255,229,0,.13)}.remote-number-btn:disabled{cursor:default;opacity:.55}.remote-number-btn.selected:disabled{opacity:1}.remote-vote-state{min-height:22px;color:#888;font-size:.76rem;text-align:center}
.remote-results-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%}.remote-result-screen .reveal-card{min-width:110px}.remote-result-screen .reveal-secret{margin:0}.remote-result-screen .result-title{margin:0}.remote-final{width:min(820px,100%);margin:3vh auto 0}
@media(max-width:720px){.remote-score-strip{margin-top:48px}.remote-recall-item{width:92px}.remote-theme-mini{border-radius:12px}.remote-theme-mini h3{font-size:.62rem}.remote-number-grid{grid-template-columns:repeat(4,1fr)}.remote-countdown{width:92px;height:92px}.remote-countdown strong{font-size:2rem}}

/* ===== V2.5 — handshake de synchronisation lobby ===== */
.ready-dot.syncing{color:#ffcf4a!important;border-color:rgba(255,207,74,.32)!important;background:rgba(255,207,74,.07)!important;animation:rightonSyncPulse 1s ease-in-out infinite alternate}
@keyframes rightonSyncPulse{from{opacity:.55}to{opacity:1}}

/* ===== V2.7 — maintien des réponses + rappel des thèmes distants ===== */
.remote-theme-focus{
  width:min(720px,100%);
  display:grid;
  grid-template-columns:112px minmax(0,290px);
  gap:24px;
  align-items:center;
  justify-content:center;
  margin:6px auto 0;
}
.remote-theme-focus.no-history{grid-template-columns:minmax(0,290px)}
.remote-previous-themes{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  justify-content:center;
}
.remote-previous-themes .remote-theme-mini{
  width:82px;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.remote-current-theme{display:flex;justify-content:center;min-width:0}
.remote-answer-hold{
  margin:10px 0 14px;
  color:#777;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.04em;
}
.remote-answer-hold strong{color:var(--yellow);font-size:.92rem}
@media(max-width:700px){
  .remote-theme-focus{grid-template-columns:1fr;gap:10px}
  .remote-current-theme{order:1}
  .remote-previous-themes{order:2;flex-direction:row;align-items:center;justify-content:center}
  .remote-previous-themes .remote-theme-mini{width:70px}
}

/* ===== V2.8 — vote handshake / retard tolérant ===== */
.remote-countdown.waiting{opacity:.76;border-color:rgba(255,229,0,.18)}
.remote-countdown.waiting strong{color:#777}
.remote-countdown.waiting small{max-width:160px;line-height:1.25;text-align:center}

/* ===== V2.9 — accusé de lecture des réponses ===== */
.remote-seen-count{color:#888;font-weight:800;font-size:.78rem;letter-spacing:.02em}
#remoteSeenBtn{margin-top:10px;min-width:150px}
#remoteSeenBtn:disabled{opacity:.72;cursor:default}

/* ===== V2.10 — cartes lisibles + réglages lobby ===== */
.theme-card h3,.remote-theme-card h3,.theme-mini h4,.remote-theme-mini h3{
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  hyphens:none!important;
  text-wrap:balance;
}
.theme-card h3.theme-text-lg,.remote-theme-card h3.theme-text-lg{font-size:clamp(1.8rem,5vw,3.1rem)}
.theme-card h3.theme-text-md,.remote-theme-card h3.theme-text-md{font-size:clamp(1.55rem,4.2vw,2.65rem)}
.theme-card h3.theme-text-sm,.remote-theme-card h3.theme-text-sm{font-size:clamp(1.28rem,3.45vw,2.15rem)}
.theme-card h3.theme-text-xs,.remote-theme-card h3.theme-text-xs{font-size:clamp(1.05rem,2.8vw,1.75rem);line-height:1}
.theme-mini h4.theme-text-lg,.remote-theme-mini h3.theme-text-lg{font-size:.62rem}
.theme-mini h4.theme-text-md,.remote-theme-mini h3.theme-text-md{font-size:.55rem}
.theme-mini h4.theme-text-sm,.remote-theme-mini h3.theme-text-sm{font-size:.48rem}
.theme-mini h4.theme-text-xs,.remote-theme-mini h3.theme-text-xs{font-size:.42rem;line-height:1}

.lobby-settings-editable{gap:10px}
.lobby-settings-editable>div{padding:10px 0}
.lobby-setting-edit .option-label{display:block;margin-bottom:8px}
.compact-segmented{grid-template-columns:1fr 1fr}
.compact-segmented .seg-btn{min-height:52px;padding:7px 8px}
.lobby-setting-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lobby-setting-toggle>div{min-width:0}
.lobby-setting-toggle strong,.lobby-setting-toggle small{display:block}
.lobby-setting-toggle small{color:#777;margin-top:3px;line-height:1.25}
.lobby-setting-toggle .switch{flex:0 0 auto}
@media(max-width:760px){
  .theme-card h3.theme-text-xs,.remote-theme-card h3.theme-text-xs{font-size:clamp(.98rem,4vw,1.5rem)}
}


/* ===== V2.11 — vocal WebRTC ===== */
.voice-dock{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;align-items:center;gap:9px;padding:9px 10px 9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(8,8,8,.92);box-shadow:0 16px 44px rgba(0,0,0,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.voice-dock.hidden{display:none}.voice-dock-status{display:flex;align-items:center;gap:7px;min-width:120px;color:#aaa;font-size:.72rem;font-weight:850;white-space:nowrap}.voice-dot{width:8px;height:8px;border-radius:50%;background:#555;box-shadow:0 0 0 3px rgba(255,255,255,.04)}.voice-dot.on{background:#66e38d;box-shadow:0 0 0 3px rgba(102,227,141,.12),0 0 12px rgba(102,227,141,.28)}.voice-dot.muted{background:#ffce54;box-shadow:0 0 0 3px rgba(255,206,84,.12)}
.voice-btn{appearance:none;border:1px solid #313131;background:#171717;color:#fff;padding:8px 12px;border-radius:999px;font:inherit;font-size:.72rem;font-weight:900;cursor:pointer;white-space:nowrap;transition:.15s transform,.15s border-color,.15s background}.voice-btn:hover{transform:translateY(-1px);border-color:#686868}.voice-btn:first-of-type{background:var(--yellow);border-color:var(--yellow);color:#050505}.voice-audio-mount{position:fixed;width:1px;height:1px;overflow:hidden;opacity:.001;pointer-events:none}.voice-player-state{margin-left:auto;font-size:.72rem;opacity:.88}.voice-player-state.muted{opacity:.6}.remote-voice-hint{max-width:680px;margin:8px auto 18px;color:#8e8e8e;font-size:.84rem;line-height:1.45;text-align:center}.remote-voice-hint::first-letter{color:var(--yellow)}
@media(max-width:680px){.voice-dock{left:10px;right:10px;bottom:10px;justify-content:space-between;border-radius:16px}.voice-dock-status{min-width:0;overflow:hidden}.voice-dock-status span:last-child{overflow:hidden;text-overflow:ellipsis}.voice-btn{padding:8px 10px}.app-shell{padding-bottom:78px}}

/* ===== V3.0 PUBLIC BETA — polish, mobile, sharing, resilience ===== */
:root{--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
html,body{min-height:100%;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent}
button,.input,select{touch-action:manipulation}
.screen-enter{animation:rightOnScreenIn .28s cubic-bezier(.2,.75,.25,1) both}
@keyframes rightOnScreenIn{from{opacity:.01;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.panel{box-shadow:0 28px 90px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.025)}
.primary-btn,.secondary-btn,.ghost-btn,.remote-choice,.mode-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease}
.primary-btn:active,.secondary-btn:active,.ghost-btn:active,.remote-choice:active,.mode-card:active{transform:scale(.985)}
.primary-btn:not(:disabled){box-shadow:0 12px 34px rgba(255,229,0,.12)}
.lobby-share-card{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:center;padding:18px;margin:16px 0 18px;border:1px solid rgba(255,229,0,.20);border-radius:22px;background:linear-gradient(135deg,rgba(255,229,0,.06),rgba(255,255,255,.025));overflow:hidden}
.lobby-qr{width:190px;height:190px;border-radius:16px;background:#fff;padding:7px;display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.lobby-qr svg{display:block;width:100%;height:100%;border-radius:8px}
.lobby-share-copy{min-width:0}.lobby-share-copy>strong{display:block;font-size:1.2rem;color:#fff;margin:5px 0}.lobby-share-copy>p{color:#888;margin:0 0 12px}.lobby-share-copy .share-box{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin:0}
.room-code-card.room-code-copy{appearance:none;font:inherit;cursor:pointer;color:inherit;text-align:center}
.room-code-card.room-code-copy:hover{border-color:var(--yellow);box-shadow:0 0 0 1px rgba(255,229,0,.15),0 12px 30px rgba(255,229,0,.08)}
.lobby-player.offline{opacity:.62}.lobby-player.offline .avatar-dot{filter:grayscale(1)}
.exit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(720px,100%);margin:18px auto 4px}
.exit-card{min-height:82px;border-radius:18px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center;gap:4px;text-align:left!important;padding:15px 17px!important}
.exit-card strong{font-size:.95rem}.exit-card small{font-size:.7rem;opacity:.63;line-height:1.25;font-weight:650}
.text-exit-btn{margin-top:12px;background:none;border:0;color:#666;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 20px;font:inherit;font-size:.76rem}
.public-final{overflow:hidden}.public-final:before{content:"";position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(255,229,0,.10),transparent 32%);animation:finalGlow 2.8s ease-in-out infinite alternate}
@keyframes finalGlow{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.remote-result-screen .reveal-secret{animation:revealPop .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes revealPop{0%{transform:scale(.72);opacity:0}65%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.remote-theme-card,.theme-card{transition:transform .22s ease,box-shadow .22s ease}
.remote-theme-card:hover{transform:translateY(-2px)}
@media(max-width:720px){
  .topbar{padding-top:calc(7px + var(--safe-top));min-height:58px}.brand img{max-height:34px}.top-actions{gap:3px}.top-actions .ghost-btn{font-size:.64rem;padding:7px 8px}
  .app-shell{padding:10px 10px calc(88px + var(--safe-bottom))}
  .panel{border-radius:20px;padding-left:14px!important;padding-right:14px!important}
  .remote-hub,.remote-form,.remote-lobby,.remote-game-screen,.quick-rules-screen,.notice-screen,.setup-single,.final-screen{margin-top:0!important;width:100%!important;max-width:100%!important}
  .remote-hub h1,.remote-form h2,.remote-lobby h1,.final-screen h1{font-size:clamp(1.8rem,9vw,2.7rem)}
  .remote-choice-grid,.mode-grid{grid-template-columns:1fr!important}.remote-choice,.mode-card{min-height:92px}
  .remote-lobby-head{gap:8px;align-items:center}.remote-lobby-head h1{font-size:1.8rem}.room-code-card{min-width:128px;padding:8px 10px}.room-code-card strong{font-size:1.7rem;letter-spacing:.1em}
  .lobby-share-card{grid-template-columns:112px 1fr;gap:12px;padding:12px;border-radius:18px}.lobby-qr{width:112px;height:112px;padding:5px;border-radius:12px}.lobby-share-copy>strong{font-size:.92rem}.lobby-share-copy>p{font-size:.72rem;margin-bottom:8px}.lobby-share-copy .share-box{grid-template-columns:1fr 1fr}.lobby-share-copy .share-box .input{grid-column:1/-1;font-size:.68rem;height:38px}.lobby-share-copy .share-box button{min-height:42px;padding:8px}
  .lobby-grid{grid-template-columns:1fr!important}.lobby-settings{order:-1}.lobby-player{min-height:50px;padding:8px 10px}.ready-dot{font-size:.58rem}
  .remote-game-screen{min-height:calc(100dvh - 75px)!important;padding-top:52px!important;padding-bottom:calc(18px + var(--safe-bottom))!important;gap:10px!important}.remote-game-meta{top:8px!important}.remote-theme-card{width:min(220px,62vw)!important}.remote-answer-box{position:sticky;bottom:calc(4px + var(--safe-bottom));background:rgba(7,7,7,.94);padding:8px;border-radius:14px;backdrop-filter:blur(12px);z-index:6}
  .remote-number-grid{grid-template-columns:repeat(4,1fr)!important;gap:7px}.remote-number-btn{min-height:50px}
  .voice-dock{bottom:calc(8px + var(--safe-bottom))!important}.voice-dock-status{font-size:.66rem}
  .exit-grid{grid-template-columns:1fr;gap:8px}.exit-card{min-height:68px}.final-screen{padding-bottom:calc(18px + var(--safe-bottom))!important}
  input,select,textarea{font-size:16px!important}
}
@media(max-width:390px){
  .lobby-share-card{grid-template-columns:94px 1fr}.lobby-qr{width:94px;height:94px}.room-code-card{min-width:112px}.top-actions #themesBtn{display:none}.remote-lead{font-size:.82rem}
}
@media(max-height:680px) and (min-width:721px){.app-shell{padding-top:8px}.remote-game-screen{margin-top:0;min-height:calc(100vh - 76px);gap:8px}.remote-theme-card{width:min(210px,28vh)}.remote-score-strip{margin-top:24px}.stage-title,.remote-game-screen h1{margin-block:4px}}

/* ===== V3.1 — stabilité UI, invitation directe & mobile ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app-shell, .app-shell>section, .remote-lobby, .remote-form, .remote-game-screen, .lobby-grid, .lobby-main, .lobby-settings, .remote-theme-focus, .remote-answer-box{min-width:0;max-width:100%}

/* Code du salon : contraste garanti */
.room-code-card,.room-code-card.room-code-copy,.room-code-card.room-code-copy small,.room-code-card.room-code-copy strong{color:#050505!important}
.room-code-card.room-code-copy{border:1px solid rgba(0,0,0,.18)!important}

/* Quitter une partie : discret mais toujours accessible */
.remote-game-meta{pointer-events:auto}
.remote-game-meta span{pointer-events:none}
.remote-quit-mini{appearance:none;border:1px solid #313131;background:#111;color:#8b8b8b;border-radius:999px;padding:6px 10px;font:inherit;font-size:.62rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.16s}
.remote-quit-mini:hover{color:#fff;border-color:#555;background:#171717}

/* Invitation via lien/QR : le code est déjà connu, seul le prénom est demandé */
.remote-invite-form{width:min(560px,100%);text-align:center}
.invite-room-code{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;margin:4px auto 16px;padding:12px 22px;border-radius:18px;background:var(--yellow);color:#050505;box-shadow:0 14px 38px rgba(255,229,0,.13)}
.invite-room-code small{font-size:.58rem;font-weight:1000;letter-spacing:.14em}
.invite-room-code strong{font-size:2.15rem;letter-spacing:.16em;line-height:1.05}
.invite-name-field{text-align:left;margin:20px auto 4px;width:min(420px,100%)}

/* Les écrans de jeu ne doivent plus sembler se recharger : animation uniquement au vrai changement de phase. */
.remote-game-screen.screen-enter{animation-duration:.20s}

@media(max-width:720px){
  :root{--radius:18px}
  html,body{min-height:100dvh}
  body{overscroll-behavior-y:none}
  .topbar{height:auto;min-height:54px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;gap:6px}
  .brand{flex:0 0 auto}.brand img{width:82px;height:38px}
  .top-actions{min-width:0;gap:3px;justify-content:flex-end;flex-wrap:nowrap}
  .top-actions .ghost-btn,.top-actions .link-btn{padding:7px 8px;font-size:.61rem;white-space:nowrap}
  .top-actions #themesBtn{display:none}
  .app-shell{width:100%;padding:8px 8px calc(82px + env(safe-area-inset-bottom,0px));margin:0}
  .panel{width:100%;max-width:100%;padding:14px!important;border-radius:18px}
  .remote-hub,.remote-form,.remote-lobby,.remote-pending,.quick-rules-screen,.notice-screen,.setup-single,.final-screen{margin:0 auto!important}
  .remote-hub h1,.remote-form h2,.remote-lobby h1,.final-screen h1{font-size:clamp(1.65rem,8vw,2.25rem);line-height:.98;margin:6px 0 8px}
  .remote-lead{font-size:.82rem;line-height:1.42}
  .notice-actions{width:100%;display:grid!important;grid-template-columns:1fr;gap:8px!important;margin-top:14px!important}
  .notice-actions .xl-btn,.notice-actions .primary-btn,.notice-actions .secondary-btn,.notice-actions .ghost-btn{width:100%;min-width:0;min-height:48px}
  .remote-choice-grid,.mode-grid,.remote-form-grid,.join-fields,.lobby-grid,.setup-options{grid-template-columns:1fr!important;gap:9px!important}
  .remote-choice,.mode-card{min-width:0!important;min-height:78px;padding:13px!important}
  .field-block,.input,.guess-select{min-width:0}
  input,select,textarea{font-size:16px!important;max-width:100%}

  /* Lobby compact, scroll interne si beaucoup de joueurs ; action de lancement reste accessible. */
  .remote-lobby{max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;overflow-x:hidden;padding-bottom:18px!important;-webkit-overflow-scrolling:touch}
  .remote-lobby-head{flex-direction:row!important;align-items:center!important;gap:8px!important}
  .remote-lobby-head>div{min-width:0;flex:1}.remote-lobby-head h1{font-size:1.55rem!important}.remote-lobby-head p{font-size:.68rem;margin:3px 0}
  .room-code-card{flex:0 0 auto;min-width:105px!important;padding:7px 8px!important;border-radius:13px!important}.room-code-card small{font-size:.45rem!important}.room-code-card strong{font-size:1.35rem!important;letter-spacing:.08em!important}
  .lobby-share-card{grid-template-columns:84px minmax(0,1fr)!important;gap:9px!important;padding:9px!important;margin:10px 0!important;border-radius:15px!important}
  .lobby-qr{width:84px!important;height:84px!important;padding:4px!important;border-radius:10px!important}
  .lobby-share-copy{overflow:hidden}.lobby-share-copy .kicker{font-size:.52rem}.lobby-share-copy>strong{font-size:.8rem!important;margin:2px 0!important}.lobby-share-copy>p{display:none}
  .lobby-share-copy .share-box{grid-template-columns:1fr 1fr!important;gap:5px!important}.lobby-share-copy .share-box .input{display:none}.lobby-share-copy .share-box button{min-width:0!important;min-height:38px!important;padding:7px 5px!important;font-size:.7rem}
  .lobby-grid{margin:9px 0!important}.lobby-main,.lobby-settings{padding:10px!important;border-radius:14px!important}.lobby-settings{order:2!important;gap:7px!important}.lobby-settings>div{padding:7px 0!important}
  .lobby-player{grid-template-columns:30px minmax(0,1fr) auto auto!important;gap:6px!important;min-height:42px!important;padding:6px 7px!important;border-radius:11px!important}.avatar-dot{width:29px!important;height:29px!important;font-size:.78rem}.lobby-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.ready-dot{font-size:.48rem!important}
  .firebase-lock{padding:9px 10px!important;margin-top:9px!important;font-size:.7rem}.firebase-lock p{font-size:.66rem}
  .remote-lobby>.notice-actions{position:sticky;bottom:-1px;z-index:8;background:linear-gradient(180deg,rgba(10,10,10,0),#0d0d0d 24%);padding-top:16px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}

  /* Gameplay mobile : pas de débordement horizontal, tailles adaptées au viewport. */
  .remote-game-screen{width:100%!important;max-width:100%!important;min-height:calc(100dvh - 62px)!important;height:auto!important;margin:0!important;padding:48px 10px calc(76px + env(safe-area-inset-bottom,0px))!important;gap:7px!important;overflow-x:hidden}
  .remote-game-meta{top:7px!important;left:7px!important;right:7px!important;gap:4px!important;justify-content:center!important;flex-wrap:nowrap!important;overflow:hidden}
  .remote-game-meta span{padding:5px 6px!important;font-size:.49rem!important;white-space:nowrap}.remote-quit-mini{padding:5px 7px;font-size:.5rem;white-space:nowrap;flex:0 0 auto}
  .remote-score-strip{margin-top:32px!important;gap:4px!important;max-width:100%;overflow-x:auto;justify-content:flex-start!important;padding:0 2px 3px;scrollbar-width:none}.remote-score-strip::-webkit-scrollbar{display:none}.remote-score-strip span{font-size:.56rem!important;padding:4px 6px!important;white-space:nowrap;flex:0 0 auto}
  .remote-game-screen h1{font-size:clamp(1.7rem,8.5vw,2.5rem)!important;margin:3px 0!important}
  .scale-question{font-size:.9rem!important;margin:2px 0!important}
  .remote-theme-focus{grid-template-columns:1fr!important;gap:6px!important;width:100%!important;margin:0!important}.remote-theme-focus.no-history{grid-template-columns:1fr!important}
  .remote-current-theme{display:flex;justify-content:center;min-width:0}.remote-theme-card{width:min(198px,52vw)!important;max-height:44dvh;border-radius:18px!important;padding:20px 12px!important}.remote-theme-card .theme-label{top:14px!important;padding:4px 10px!important;font-size:.48rem!important}.remote-theme-card .theme-icon{bottom:15px!important;font-size:1.7rem!important}
  .remote-previous-themes{order:2!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:7px!important;max-width:100%;overflow-x:auto}.remote-previous-themes .remote-theme-mini{width:58px!important;flex:0 0 58px!important}.remote-theme-mini h3{font-size:.47rem!important}.remote-theme-mini .theme-label{font-size:.28rem!important;top:5px!important;padding:2px 4px!important}.remote-theme-mini .theme-icon{font-size:.7rem!important;bottom:5px!important}
  .remote-answer-box{position:sticky!important;bottom:calc(62px + env(safe-area-inset-bottom,0px))!important;width:100%!important;grid-template-columns:1fr!important;gap:6px!important;padding:7px!important;background:rgba(7,7,7,.96)!important;border:1px solid #222;border-radius:13px;backdrop-filter:blur(10px);z-index:10}.remote-answer-box .xl-btn{width:100%!important;min-width:0!important;min-height:46px!important;padding:11px!important}.remote-answer-box .input{padding:11px!important}
  .remote-answer-reveal{padding:12px 13px!important;border-radius:14px!important}.remote-answer-reveal strong{font-size:1.05rem!important;overflow-wrap:anywhere}
  .remote-observer-note{padding:10px 12px!important;border-radius:12px!important;font-size:.75rem!important}
  .remote-round-recall{gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important}.remote-recall-item{width:72px!important;flex:0 0 72px!important}.remote-recall-answer{font-size:.54rem!important;padding:5px!important}
  .remote-countdown{width:78px!important;height:78px!important}.remote-countdown strong{font-size:1.7rem!important}.remote-number-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.remote-number-btn{min-height:46px!important;border-radius:11px!important}
  .remote-results-grid{gap:6px!important}.remote-result-screen .reveal-card{min-width:72px!important;padding:9px!important}.remote-result-screen .reveal-card .guess{font-size:1.8rem!important}
  .reveal-secret{font-size:clamp(4rem,21vw,6rem)!important}.result-title{font-size:clamp(2.5rem,14vw,4.2rem)!important}
  .voice-dock{left:7px!important;right:7px!important;bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;padding:7px 8px!important;gap:5px!important;border-radius:13px!important}.voice-dock-status{font-size:.58rem!important;min-width:0!important}.voice-btn{font-size:.64rem!important;padding:7px 8px!important;white-space:nowrap}
  .exit-grid{grid-template-columns:1fr!important}.exit-card{min-height:58px!important;padding:11px 13px!important}
  .remote-invite-form{max-height:calc(100dvh - 64px);overflow-y:auto}.invite-room-code strong{font-size:1.8rem}
}

@media(max-width:390px){
  .brand img{width:70px}.top-actions .ghost-btn,.top-actions .link-btn{font-size:.56rem;padding:6px}
  .lobby-share-card{grid-template-columns:72px minmax(0,1fr)!important}.lobby-qr{width:72px!important;height:72px!important}.room-code-card{min-width:94px!important}.room-code-card strong{font-size:1.2rem!important}
  .remote-theme-card{width:min(180px,50vw)!important}.remote-game-screen{padding-left:7px!important;padding-right:7px!important}
}

/* ===== V3.2 — UI stable, résultat personnel, vocal compact ===== */
.neutral-title{color:#f2f2ed}
.remote-vote-count{
  min-width:76px;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:6px 0 2px;
}
.remote-vote-count strong{
  color:var(--yellow);
  font-size:clamp(3.4rem,12vw,6rem);
  font-weight:1000;
  line-height:.8;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 28px rgba(255,229,0,.14);
}
.remote-answer-hold{
  background:transparent!important;
  border:0!important;
  padding:2px 0!important;
  color:#777!important;
  font-size:.76rem!important;
  letter-spacing:.03em;
}
.remote-answer-hold strong{color:var(--yellow)!important;font-size:.86rem!important}

.voice-dock.voice-dock-compact{
  position:fixed;
  right:18px;
  bottom:18px;
  left:auto;
  z-index:1200;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.voice-toggle-btn{
  appearance:none;
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid #292929;
  background:#070707;
  color:#393939;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease;
}
.voice-toggle-btn svg{width:23px;height:23px;fill:currentColor;display:block}
.voice-toggle-btn.active{color:var(--yellow);border-color:rgba(255,229,0,.36);box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 18px rgba(255,229,0,.08)}
.voice-toggle-btn.muted{color:#3e3e3e}
.voice-toggle-btn:hover{transform:translateY(-1px);border-color:#4a4a4a}
.voice-toggle-btn:active{transform:scale(.96)}

@media(max-width:680px){
  .voice-dock.voice-dock-compact{left:auto!important;right:9px!important;bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;width:auto!important;justify-content:initial!important;background:transparent!important;padding:0!important;border:0!important}
  .voice-toggle-btn{width:44px;height:44px;border-radius:13px}
  .voice-toggle-btn svg{width:21px;height:21px}
  .remote-vote-count strong{font-size:3.7rem}
}


/* ===== V3.3 — cartes officielles extraites du PDF ===== */
.official-card-frame{
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
}
.official-card-frame:before,.official-card-frame:after{display:none!important}
.official-card-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:inherit;
  user-select:none;
  -webkit-user-drag:none;
}
.card-face>.official-card-main{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:25px;
}
.remote-theme-card.official-card-frame{
  aspect-ratio:435/593;
  border-radius:24px;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
  animation:remoteCardIn .55s cubic-bezier(.18,.78,.24,1.08) both;
}
.remote-theme-mini.official-card-frame,.theme-mini.official-card-frame{
  aspect-ratio:435/593;
  padding:0!important;
}
.remote-theme-mini.official-card-frame .official-card-image,
.theme-mini.official-card-frame .official-card-image{object-fit:cover}
@media(max-width:720px){
  .remote-theme-card.official-card-frame{padding:0!important}
}

/* ========================================================================== */
/* RIGHT ON V4.0 — APP FIRST UI                                               */
/* ========================================================================== */
:root{
  --app-yellow:#ffe500;
  --app-black:#050505;
  --app-surface:#101010;
  --app-surface-2:#171717;
  --app-border:#2b2b2b;
  --app-muted:#8c8c8c;
  --app-radius:22px;
  --app-header-h:58px;
}
html{background:var(--app-black);overscroll-behavior:none}
body{
  min-height:100dvh;
  background:var(--app-black);
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--app-yellow);outline-offset:2px}
.page-bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,5,.88),rgba(5,5,5,.96)),
    url('./assets/bg-icons-dense.png') center/cover no-repeat;
  filter:none;
  opacity:.58;
  transform:none;
}
.page-bg:after{background:radial-gradient(circle at 50% 15%,rgba(255,229,0,.055),transparent 32%)}

/* Compact app chrome */
.app-topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:calc(var(--app-header-h) + env(safe-area-inset-top));
  padding:max(8px,env(safe-area-inset-top)) 14px 8px;
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:end;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.home-mode .app-topbar{visibility:visible!important;pointer-events:auto!important;background:rgba(5,5,5,.66);border-bottom-color:transparent}
body.app-in-game .app-topbar{display:none!important}
.app-icon-btn{
  width:44px;height:44px;border:0;border-radius:14px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.app-icon-btn:not(.account-icon-btn){flex-direction:column;gap:5px}
.app-icon-btn:not(.account-icon-btn) span{display:block;width:22px;height:2px;border-radius:99px;background:#f4f4f1}
.app-wordmark{justify-self:center;border:0;background:transparent;padding:0;cursor:pointer;height:42px;display:flex;align-items:center}
.app-wordmark img{width:86px;height:40px;object-fit:contain}
.account-icon-btn{position:relative;border:2px solid #ededeb;border-radius:50%;width:34px;height:34px;justify-self:end;margin:5px}
.account-head{position:absolute;top:7px;width:9px;height:9px;border:2px solid #ededeb;border-radius:50%}
.account-body{position:absolute;bottom:6px;width:17px;height:8px;border:2px solid #ededeb;border-radius:9px 9px 5px 5px;border-bottom-width:2px}
.app-shell{
  width:min(760px,calc(100% - 28px));
  margin:0 auto;
  padding:clamp(18px,3vw,30px) 0 calc(28px + env(safe-area-inset-bottom));
}
body.app-in-game{overflow:hidden}
body.app-in-game .app-shell{
  width:100%;max-width:none;height:100dvh;margin:0;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
body.app-in-game .app-shell>section{height:100%;max-height:100%;margin:0 auto}

/* Game exit control */
.game-exit-btn{
  position:fixed;z-index:140;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));
  width:44px;height:44px;border:0;border-radius:14px;background:rgba(10,10,10,.86);color:var(--app-yellow);font:300 2.1rem/1 Arial;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,229,0,.2)
}
.remote-quit-mini{display:none!important}

/* Main menu drawer */
.app-scrim{position:fixed;z-index:180;inset:0;background:rgba(0,0,0,.64);backdrop-filter:blur(3px)}
.app-drawer{
  position:fixed;z-index:190;left:0;top:0;bottom:0;width:min(350px,88vw);padding:max(18px,env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:#090909;border-right:1px solid #292929;transform:translateX(-102%);transition:transform .24s cubic-bezier(.22,.8,.25,1);display:flex;flex-direction:column;box-shadow:25px 0 70px rgba(0,0,0,.55)
}
.app-drawer.open{transform:translateX(0)}
.drawer-head{height:54px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.drawer-head img{width:108px;height:50px;object-fit:contain}
.drawer-close{width:42px;height:42px;border:0;border-radius:14px;background:#161616;color:#aaa;font-size:1.7rem;cursor:pointer}
.drawer-nav{display:grid;gap:8px}
.drawer-nav button,.drawer-nav a{min-height:68px;width:100%;border:1px solid #242424;background:#101010;color:#fff;border-radius:18px;padding:11px 13px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.drawer-nav>*>span{width:38px;height:38px;border-radius:12px;background:transparent;color:var(--app-yellow);display:grid;place-items:center;overflow:hidden}
.drawer-nav>*>span img{width:100%;height:100%;object-fit:contain;display:block}
.drawer-nav strong{display:block;font-size:.96rem}.drawer-nav small{display:block;color:#777;margin-top:3px;font-size:.77rem;line-height:1.25}
.drawer-version{margin-top:auto;color:#505050;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 4px}

/* App dialogs */
.dialog{border-radius:24px!important;border:1px solid #2a2a2a!important;background:#0c0c0c!important;color:#fff!important;max-height:min(82dvh,760px);padding:24px!important}
.dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.app-account-dialog{width:min(430px,calc(100% - 28px))}
.app-account-dialog h2{font-size:2rem;margin:8px 0 18px}
.account-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.account-summary>div{background:#141414;border:1px solid #252525;border-radius:15px;padding:12px;min-width:0}.account-summary small{display:block;color:#777;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.account-summary strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.87rem}
.leave-dialog{width:min(440px,calc(100% - 28px));text-align:center}.leave-dialog h2{font-size:1.8rem;line-height:1.05;margin:10px 0}.leave-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.leave-actions button{min-height:48px}

/* Unified app components */
.panel{background:rgba(12,12,12,.94);border:1px solid #252525;border-radius:var(--app-radius);box-shadow:none}
.primary-btn,.secondary-btn,.ghost-btn,.seg-btn{min-height:48px;border-radius:15px;font-weight:900;transition:transform .12s ease,opacity .12s ease,background .12s ease}
.primary-btn{background:var(--app-yellow);color:#050505;box-shadow:none}
.secondary-btn{background:#f4f4ef;color:#070707}.ghost-btn{background:#131313;border-color:#292929;color:#e5e5e2}
.primary-btn:active,.secondary-btn:active,.ghost-btn:active{transform:scale(.985)}
.input,.guess-select{min-height:50px;border-radius:15px;background:#0c0c0c;border-color:#292929;font-size:16px!important}
.kicker{color:#777;letter-spacing:.14em}

/* Home: one action only */
.home-screen{min-height:calc(100dvh - var(--app-header-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px 12px 40px;justify-content:center;gap:28px}
.hero-logo{width:min(410px,82vw);max-height:45dvh;object-fit:contain;filter:none}
.hero-play{width:min(350px,92vw);min-height:60px;font-size:1.05rem;border-radius:18px;margin-top:4px}
.home-version{font-size:.6rem;color:#3f3f3f;margin:0}

/* Outside-game screens should feel like app pages, not floating web cards */
.mode-select-screen.panel,.remote-hub.panel,.remote-form.panel,.remote-lobby.panel,.setup-single.panel,.notice-screen.panel,.quick-rules-screen.panel,.remote-pending.panel{
  width:min(620px,100%);margin:0 auto;background:transparent;border:0;box-shadow:none;padding:clamp(10px,2vw,18px) 0;
}
.mode-select-screen>h1,.remote-hub>h1,.remote-form>h1,.remote-lobby h1,.setup-panel h2{font-size:clamp(2rem,7vw,3.2rem);line-height:.98;letter-spacing:-.045em}
.mode-select-intro,.remote-lead{color:#929292;font-size:.95rem;line-height:1.5}
.mode-grid{grid-template-columns:1fr!important;gap:12px!important;margin-top:24px!important}
.mode-card{min-height:138px!important;border-radius:22px!important;background:#111!important;border:1px solid #2b2b2b!important;padding:20px!important;box-shadow:none!important;display:grid!important;grid-template-columns:58px 1fr 18px;align-items:center;text-align:left!important;gap:14px!important}
.mode-card:after{content:'›';font-size:2rem;color:#aaa;justify-self:end}.mode-card-live{border-color:rgba(255,229,0,.55)!important}.mode-icon{width:54px;height:54px;border-radius:16px;background:transparent;display:grid;place-items:center;overflow:hidden}
.mode-icon img{width:100%;height:100%;object-fit:contain;display:block}
.mode-copy h2{font-size:1.25rem!important;margin:4px 0!important}.mode-copy p{font-size:.85rem!important;color:#999!important;line-height:1.35!important;margin:4px 0!important}.mode-copy strong{display:none}.mode-status{font-size:.58rem!important}

/* Remote choice / create / join */
.remote-choice-grid{grid-template-columns:1fr!important;gap:10px!important}.remote-choice{min-height:84px!important;border-radius:18px!important}.remote-choice>span{background:transparent!important;overflow:hidden}.remote-choice>span img{width:100%;height:100%;object-fit:contain;display:block}.remote-flow-preview{display:none!important}.remote-tech-note{border-radius:16px!important;padding:12px 14px!important}.remote-voice-hint{font-size:.8rem!important;color:#777!important}
.remote-form .field-block{margin-bottom:12px}.remote-form .setup-options{grid-template-columns:1fr 1fr;gap:8px}.remote-form .notice-actions,.remote-hub .notice-actions{margin-top:18px}

/* Lobby, compact and touch-first */
.remote-lobby{max-width:680px!important}.remote-lobby-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}.room-code-card{width:100%!important;min-height:82px!important;border-radius:18px!important;background:var(--app-yellow)!important;color:#060606!important}.room-code-card small,.room-code-card strong{color:#060606!important}.room-code-card strong{font-size:clamp(2rem,10vw,3.2rem)!important;letter-spacing:.12em!important}.remote-share-panel,.remote-lobby-settings,.remote-player-list{border-radius:20px!important}.remote-lobby-actions{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:6;background:linear-gradient(180deg,transparent,#070707 28%);padding-top:26px}

/* Game shells: screen-first, no web chrome */
.remote-game-screen.panel{width:min(760px,100%);height:100%;max-height:100%;margin:0 auto;padding:clamp(48px,7dvh,70px) 14px 12px!important;border:0;background:transparent;box-shadow:none;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.remote-game-meta{position:absolute!important;top:max(10px,env(safe-area-inset-top));left:62px;right:12px;min-height:36px;display:flex!important;justify-content:flex-end!important;gap:6px!important;pointer-events:none}.remote-game-meta>span{font-size:.64rem!important;padding:7px 9px!important;background:#111!important;border-radius:999px!important;color:#777!important}.remote-score-strip{position:absolute!important;top:58px!important;left:50%!important;transform:translateX(-50%)!important;max-width:calc(100% - 28px)!important;overflow:hidden}
.remote-theme-screen{justify-content:flex-start!important;padding-top:104px!important}.remote-theme-focus{min-height:0!important;flex:1;max-height:56dvh!important;margin:8px auto!important}.remote-current-theme{min-height:0!important;display:flex;align-items:center;justify-content:center}.remote-current-theme .official-card-image{max-height:min(54dvh,520px)!important;width:auto!important;max-width:78vw!important;object-fit:contain}.remote-answer-box,.remote-observer-note,.remote-answer-reveal{width:min(520px,94vw)!important;margin-top:10px!important}.remote-answer-box .primary-btn{width:100%}.remote-answer-hold{font-size:.78rem!important;margin-top:8px!important}.remote-vote-screen{padding-top:76px!important}.remote-vote-screen h1{font-size:clamp(1.7rem,6vw,2.6rem)!important;margin:8px 0!important}.remote-vote-count strong{font-size:clamp(3rem,18vw,5rem)!important;color:var(--app-yellow)!important}.remote-number-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important;max-width:430px!important}.remote-number-btn{min-height:54px!important;border-radius:16px!important;font-size:1.25rem!important}.remote-results-grid{max-height:36dvh;overflow:auto;width:min(560px,95vw)!important}.remote-result-screen .reveal-secret{font-size:clamp(4rem,20vw,7rem)!important}.remote-result-screen .result-title{font-size:clamp(2.5rem,12vw,4.5rem)!important}.remote-final{overflow:auto!important;padding-top:50px!important}

/* Local salon game */
.game-layout{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 250px;gap:10px}.stage{min-height:0;height:100%;border:0!important;border-radius:20px!important;background:transparent!important;padding:50px 14px 12px!important}.side-panel{max-height:100%;overflow:auto;border-radius:18px!important;padding:14px!important}.stage-title{font-size:clamp(2.5rem,8dvh,5rem)!important}.theme-focus-layout{max-height:58dvh}.card-scene{max-height:54dvh}.official-card-main{max-height:54dvh!important;width:auto!important}.timer-ring{width:min(210px,45dvh)!important;height:min(210px,45dvh)!important;margin:12px 0!important}

/* Voice is one small floating app control */
.voice-dock-compact{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important;z-index:130!important}.voice-toggle-btn{width:48px!important;height:48px!important;border-radius:16px!important;background:#0b0b0b!important;border:1px solid #252525!important;box-shadow:0 8px 30px rgba(0,0,0,.35)!important}.voice-toggle-btn svg{width:22px!important;height:22px!important}

/* Final screen */
.public-final{width:min(620px,100%)!important;margin:0 auto!important;padding:clamp(54px,8dvh,72px) 14px 18px!important;border:0!important;background:transparent!important;overflow:auto!important}.public-final h1{font-size:clamp(2.5rem,11vw,4.4rem)!important}.exit-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}.exit-card{min-width:0!important;min-height:78px!important;padding:12px!important;border-radius:17px!important}.exit-card strong{font-size:.88rem!important}.exit-card small{font-size:.7rem!important}.text-exit-btn{margin-bottom:env(safe-area-inset-bottom)}

/* Mobile hardening */
@media(max-width:720px){
  :root{--app-header-h:56px}
  .app-shell{width:calc(100% - 24px);padding-top:14px}
  .panel{border-radius:20px;padding:18px}
  .mode-select-screen.panel,.remote-hub.panel,.remote-form.panel,.remote-lobby.panel,.setup-single.panel{padding-left:0!important;padding-right:0!important}
  .setup-options{grid-template-columns:1fr!important}.setup-actions{display:grid!important;grid-template-columns:1fr!important}.setup-actions button{width:100%}
  .remote-form .setup-options{grid-template-columns:1fr 1fr!important}
  .custom-theme-layout{grid-template-columns:1fr!important}.theme-form{grid-template-columns:1fr!important}.custom-theme-list{max-height:35dvh!important}
  .game-layout{grid-template-columns:1fr!important}.game-layout .side-panel{display:none!important}
  .stage{padding-top:54px!important}.stage-copy{font-size:.9rem!important;margin-bottom:12px!important}.stage-title{margin:8px 0!important}
  .theme-focus-layout{grid-template-columns:1fr!important;gap:6px!important}.theme-recall-column{order:2;flex-direction:row!important;align-items:center!important;justify-content:center!important}.theme-current-wrap{order:1}.theme-mini{width:58px!important}.round-theme-reminder .theme-mini{width:58px!important}
  .remote-game-meta{left:58px!important}.remote-game-meta span:first-child{display:none!important}.remote-score-strip{top:54px!important}
  .remote-theme-screen{padding-top:96px!important}.scale-question{font-size:clamp(1.2rem,5vw,1.6rem)!important;margin:2px 0 5px!important}.remote-theme-focus{max-height:50dvh!important}.remote-current-theme .official-card-image{max-height:48dvh!important;max-width:72vw!important}
  .remote-answer-reveal{padding:11px!important}.remote-answer-reveal strong{font-size:clamp(1.2rem,6vw,1.8rem)!important}.remote-observer-note{padding:10px 12px!important;font-size:.85rem!important}
  .remote-round-recall{gap:6px!important;margin:6px 0!important}.remote-round-recall .theme-mini{width:54px!important}
  .remote-vote-actions{width:100%!important}.remote-number-grid{width:100%!important}.remote-vote-screen .primary-btn{width:100%!important}
  .exit-grid{grid-template-columns:1fr!important}.public-final{padding-left:4px!important;padding-right:4px!important}
  .account-summary{grid-template-columns:1fr!important}
}
@media(max-width:390px){
  .app-shell{width:calc(100% - 18px)}
  .hero-logo{width:78vw}.hero-play{min-height:56px}
  .mode-card{min-height:124px!important;padding:15px!important;grid-template-columns:50px 1fr 14px}.mode-icon{width:48px;height:48px}
  .remote-current-theme .official-card-image{max-height:45dvh!important;max-width:70vw!important}.remote-theme-screen{padding-top:90px!important}
  .remote-number-grid{grid-template-columns:repeat(4,1fr)!important}.remote-number-btn{min-height:50px!important}
}
@media(orientation:landscape) and (max-height:520px){
  body.app-in-game .app-shell{padding-top:6px;padding-bottom:6px}.game-exit-btn{top:6px}.remote-game-screen.panel{padding-top:42px!important}.remote-theme-screen{padding-top:58px!important;display:grid!important;grid-template-columns:110px 1fr 1fr;grid-template-rows:auto 1fr;column-gap:10px;text-align:left!important}.remote-theme-screen .remote-game-meta,.remote-theme-screen .remote-score-strip{display:none!important}.remote-theme-screen>.kicker{grid-column:1}.remote-theme-screen>.scale-question{grid-column:2/4}.remote-theme-focus{grid-column:1/3;grid-row:2;max-height:75dvh!important}.remote-answer-box,.remote-observer-note,.remote-answer-reveal{grid-column:3;grid-row:2;align-self:center!important}.remote-current-theme .official-card-image{max-height:67dvh!important}.public-final{padding-top:42px!important}
}

/* ===== V4.1 MOBILE FIRST / CAPACITOR-READY UI PASS ===== */
:root{
  --app-viewport-h:100dvh;
  --app-keyboard-h:0px;
  --app-touch:52px;
  --app-ease:cubic-bezier(.22,.8,.25,1);
}
html,body{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:var(--app-viewport-h);touch-action:manipulation}
button,a,input,select,textarea{touch-action:manipulation}
button,.primary-btn,.secondary-btn,.ghost-btn,.seg-btn,.remote-choice,.mode-card,.room-code-card,.remote-number-btn,.exit-card{min-height:var(--app-touch)}
input,select,textarea{font-size:16px!important}
textarea{resize:none}

/* visual viewport is the source of truth on mobile; avoids Safari/Chrome keyboard jumps */
body.app-in-game{height:var(--app-viewport-h);min-height:var(--app-viewport-h);max-height:var(--app-viewport-h)}
body.app-in-game .app-shell{height:var(--app-viewport-h)!important;min-height:0!important;max-height:var(--app-viewport-h)!important;padding-top:max(8px,env(safe-area-inset-top))!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
body.app-in-game .app-shell>section{min-height:0!important;max-height:100%!important}
body.app-keyboard-open .game-exit-btn{opacity:.35;pointer-events:none}
body.app-keyboard-open .voice-dock{display:none!important}
body.app-keyboard-open .remote-game-meta,body.app-keyboard-open .remote-score-strip{opacity:.22}
body.app-keyboard-open .remote-theme-screen{padding-top:42px!important}
body.app-keyboard-open .remote-theme-focus{max-height:28vh!important;flex:0 1 auto!important}
body.app-keyboard-open .remote-current-theme .official-card-image{max-height:26vh!important}
body.app-keyboard-open .remote-answer-box{position:relative!important;bottom:auto!important;margin-top:auto!important}

/* app-like transitions: short, restrained, no fake motion */
.app-shell>section{animation:appScreenIn .18s var(--app-ease) both;transform-origin:50% 40%}
dialog[open]{animation:appDialogIn .16s var(--app-ease) both}
.app-drawer.open{will-change:transform}
@keyframes appScreenIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes appDialogIn{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.app-shell>section,dialog[open]{animation:none!important}.app-drawer{transition:none!important}.primary-btn,.secondary-btn,.ghost-btn,.seg-btn{transition:none!important}}

/* compact header outside the game; safe areas stay native */
.app-topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.app-icon-btn{min-width:44px;min-height:44px}

/* cards always fit the available phone window */
.official-card-image,.official-card-main{display:block;max-width:100%;height:auto;object-fit:contain}
.remote-current-theme,.theme-current-wrap,.card-scene{min-width:0;min-height:0;max-width:100%}
.remote-current-theme .official-card-image{max-width:min(76vw,360px)!important;max-height:min(48vh,calc(var(--app-viewport-h) * .48))!important}
.official-card-main{max-width:min(76vw,360px)!important;max-height:min(48vh,calc(var(--app-viewport-h) * .48))!important}

/* forms remain reachable when the software keyboard appears */
.remote-form,.setup-single,.themes-dialog{scroll-padding-bottom:calc(var(--app-keyboard-h) + 110px)}
.field-block,.player-edit,.theme-form,.remote-answer-box{min-width:0}
.input,.guess-select{width:100%;max-width:100%}

/* lobby: one-hand layout, primary action stays closest to thumb */
.remote-lobby{display:flex;flex-direction:column;min-height:0}
.remote-lobby .lobby-grid{min-height:0}
.remote-lobby .notice-actions,.remote-lobby-actions{margin-top:auto}
.lobby-player{min-height:54px}
.remote-share-panel button,.remote-lobby-actions button,.remote-form .notice-actions button{min-height:52px}

/* dialogs never hide important actions below browser bars */
.dialog{max-height:calc(var(--app-viewport-h) - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;overflow:auto!important;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}
.dialog-close{min-width:44px;min-height:44px}

@media(max-width:720px){
  body:not(.app-in-game) .app-shell{padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
  .home-screen{min-height:calc(var(--app-viewport-h) - var(--app-header-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
  .hero-logo{max-height:38vh!important;max-height:calc(var(--app-viewport-h) * .38)!important}
  .hero-play{width:100%!important;max-width:360px!important;min-height:58px!important}
  .mode-card,.remote-choice{width:100%!important}
  .mode-card{min-height:112px!important}
  .remote-form .notice-actions,.remote-hub .notice-actions{display:grid!important;grid-template-columns:1fr!important}
  .remote-lobby{height:auto!important;max-height:none!important;overflow:visible!important}
  .remote-lobby-head{position:relative!important}
  .lobby-grid{display:flex!important;flex-direction:column!important;gap:10px!important;margin:10px 0!important}
  .lobby-settings{order:2!important}.lobby-main{order:1!important}
  .remote-lobby>.notice-actions,.remote-lobby-actions{position:sticky!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;z-index:20!important;background:linear-gradient(180deg,rgba(5,5,5,0),rgba(5,5,5,.97) 28%)!important;padding-top:18px!important;padding-bottom:4px!important}
  .room-code-card{min-height:72px!important}.room-code-card strong{font-size:clamp(1.9rem,12vw,2.7rem)!important}
  .remote-game-screen.panel{height:100%!important;min-height:0!important;max-height:100%!important;padding-left:10px!important;padding-right:10px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  .remote-theme-screen{padding-top:88px!important;gap:5px!important}
  .remote-theme-focus{max-height:calc(var(--app-viewport-h) * .47)!important;margin:3px auto!important}
  .remote-current-theme .official-card-image{max-height:calc(var(--app-viewport-h) * .43)!important;max-width:min(70vw,330px)!important}
  .remote-answer-box,.remote-observer-note,.remote-answer-reveal{width:100%!important;max-width:520px!important;margin-top:6px!important}
  .remote-answer-box{padding:8px!important}
  .remote-answer-box .input{min-height:48px!important}
  .remote-answer-box .primary-btn{min-height:50px!important}
  .remote-number-btn{min-height:56px!important}
  .remote-vote-screen{justify-content:center!important;padding-top:54px!important}
  .remote-results-grid{max-height:calc(var(--app-viewport-h) * .34)!important}
  .stage{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  .official-card-main{max-height:calc(var(--app-viewport-h) * .45)!important;max-width:min(72vw,340px)!important}
  .game-exit-btn{width:48px!important;height:48px!important}
  .voice-toggle-btn{width:50px!important;height:50px!important}
}

@media(max-width:390px){
  :root{--app-touch:50px}
  .app-shell{width:calc(100% - 16px)!important}
  .panel{padding:14px!important}
  .mode-card{padding:14px!important;grid-template-columns:46px minmax(0,1fr) 12px!important;gap:10px!important}
  .mode-icon{width:44px!important;height:44px!important;border-radius:13px!important}
  .mode-copy h2{font-size:1.08rem!important}.mode-copy p{font-size:.78rem!important}
  .remote-current-theme .official-card-image{max-width:68vw!important}
  .remote-number-grid{gap:6px!important}.remote-number-btn{border-radius:14px!important}
}

/* ===== V4.2 — MOBILE GAME LAYOUT STABILITY ===== */
:root{--app-viewport-top:0px}

/* During a game the document itself never scrolls. The visual viewport owns the stage. */
body.app-in-game{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  overflow:hidden!important;
}
body.app-in-game .app-shell{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--app-viewport-top)!important;
  height:var(--app-viewport-h)!important;
  min-height:var(--app-viewport-h)!important;
  max-height:var(--app-viewport-h)!important;
  overflow:hidden!important;
  margin:0!important;
}
body.app-in-game .app-shell>section{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}

/* Remote theme layout is real document flow: current card, then recalls, never overlap. */
@media(max-width:720px){
  .remote-theme-screen{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding-top:88px!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
    gap:5px!important;
  }
  .remote-theme-screen>.kicker{flex:0 0 auto;margin:0!important}
  .remote-theme-screen>.scale-question{flex:0 0 auto;margin:0 0 4px!important;line-height:1.08!important}
  .remote-theme-focus{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    width:100%!important;
    gap:8px!important;
    margin:0!important;
  }
  .remote-current-theme{
    order:1!important;
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .remote-current-theme .official-card-image{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:min(68vw,310px)!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  .remote-previous-themes{
    order:2!important;
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:70px!important;
    max-height:78px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  .remote-previous-themes:empty{display:none!important;min-height:0!important}
  .remote-previous-themes .remote-theme-mini{
    width:52px!important;
    height:auto!important;
    flex:0 0 52px!important;
    margin:0!important;
  }
  .remote-answer-box,.remote-observer-note,.remote-answer-reveal{
    position:relative!important;
    flex:0 0 auto!important;
    bottom:auto!important;
    margin:5px 0 0!important;
    z-index:3!important;
  }
  .remote-answer-box{padding:7px!important;gap:6px!important}
  .remote-answer-box .field-block{margin:0!important}
  .remote-answer-box .input{min-height:48px!important}
  .remote-answer-box .primary-btn{min-height:48px!important}

  /* On short phone windows, preserve hierarchy by shrinking card before text/actions. */
  @media(max-height:760px){
    .remote-theme-screen{padding-top:78px!important}
    .remote-score-strip{display:none!important}
    .remote-current-theme .official-card-image{max-width:min(58vw,260px)!important}
    .remote-previous-themes{min-height:58px!important;max-height:62px!important}
    .remote-previous-themes .remote-theme-mini{width:44px!important;flex-basis:44px!important}
    .scale-question{font-size:1.02rem!important}
  }
}

/* Keyboard state: compact, anchored input mode. No page scrolling, no disappearing screen. */
body.app-keyboard-open .app-shell{
  top:var(--app-viewport-top)!important;
  height:var(--app-viewport-h)!important;
  padding:4px 8px max(4px,env(safe-area-inset-bottom))!important;
}
body.app-keyboard-open .remote-theme-screen{
  height:100%!important;
  padding:4px 4px 4px!important;
  gap:3px!important;
  justify-content:flex-start!important;
}
body.app-keyboard-open .remote-game-meta,
body.app-keyboard-open .remote-score-strip,
body.app-keyboard-open .remote-theme-screen>.kicker,
body.app-keyboard-open .remote-theme-screen>.scale-question,
body.app-keyboard-open .remote-previous-themes,
body.app-keyboard-open .game-exit-btn,
body.app-keyboard-open .voice-dock-compact{
  display:none!important;
}
body.app-keyboard-open .remote-theme-focus{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  gap:0!important;
}
body.app-keyboard-open .remote-current-theme{
  flex:1 1 auto!important;
  min-height:72px!important;
  max-height:none!important;
  overflow:hidden!important;
}
body.app-keyboard-open .remote-current-theme .official-card-image{
  max-height:100%!important;
  max-width:min(42vw,175px)!important;
}
body.app-keyboard-open .remote-answer-box{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  margin:4px 0 0!important;
  padding:6px!important;
  border-radius:12px!important;
  background:#090909!important;
  backdrop-filter:none!important;
}
body.app-keyboard-open .remote-answer-box .field-block>span{font-size:.62rem!important;margin-bottom:3px!important}
body.app-keyboard-open .remote-answer-box .input{min-height:44px!important;padding:9px 11px!important}
body.app-keyboard-open .remote-answer-box .primary-btn{min-height:44px!important;padding:9px!important}

/* Local salon text inputs get the same keyboard-safe behavior. */
body.app-keyboard-open .stage{padding:4px!important;justify-content:flex-start!important}
body.app-keyboard-open .stage .theme-focus-layout{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
body.app-keyboard-open .stage .official-card-main{max-height:100%!important}

/* Avoid transition transforms while a software keyboard is changing the viewport. */
body.app-keyboard-open .app-shell>section{animation:none!important;transform:none!important}

/* V5.2 — présence / reconnexion réseau */
.remote-connection-notice{position:fixed;z-index:1200;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);max-width:min(92vw,420px);padding:10px 14px;border:1px solid rgba(255,230,0,.45);border-radius:999px;background:rgba(10,10,10,.94);color:#ffe600;font-weight:800;font-size:13px;line-height:1.2;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.32);pointer-events:none}.remote-connection-notice.offline{color:#fff;border-color:rgba(255,255,255,.22)}

/* ========================================================================== */
/* RIGHT ON V5.4 — VISUAL POLISH (NO AUDIO, NO GAMEPLAY CHANGES)              */
/* ========================================================================== */
:root{--polish-ease:cubic-bezier(.2,.75,.2,1)}

/* Official PDF cards: never crop artwork on desktop. */
.official-card-image,
.official-card-main,
.card-face>.official-card-main,
.remote-theme-mini.official-card-frame .official-card-image,
.theme-mini.official-card-frame .official-card-image{
  object-fit:contain!important;
  object-position:center!important;
}
.card-face>.official-card-main{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  background:transparent!important;
}
@media(min-width:721px){
  .remote-theme-card.official-card-frame,
  .card-face:has(>.official-card-main){
    overflow:visible!important;
  }
  .remote-theme-card.official-card-frame .official-card-image,
  .card-face>.official-card-main{
    transform:scale(.975);
    transform-origin:center;
  }
  .remote-theme-mini.official-card-frame .official-card-image,
  .theme-mini.official-card-frame .official-card-image{
    transform:scale(.97);
    transform-origin:center;
  }
}

/* Screen changes: short and app-like. */
.app-shell>section{
  animation:v54ScreenIn .22s var(--polish-ease) both!important;
}
@keyframes v54ScreenIn{
  from{opacity:0;transform:translateY(7px) scale(.996)}
  to{opacity:1;transform:none}
}

/* Theme appearance: a subtle physical-card lift. */
.remote-current-theme .remote-theme-card,
.remote-current-theme .official-card-frame,
.card-scene .card-face{
  animation:v54CardIn .34s var(--polish-ease) both!important;
}
@keyframes v54CardIn{
  from{opacity:.25;transform:translateY(10px) scale(.985)}
  70%{opacity:1;transform:translateY(-2px) scale(1.002)}
  to{opacity:1;transform:none}
}

/* Answer reveal: hierarchy without flashy movement. */
.remote-answer-reveal{
  animation:v54AnswerIn .24s var(--polish-ease) both;
}
.remote-answer-reveal strong{display:block;transform-origin:center}
@keyframes v54AnswerIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Voting: clear tap feedback and confirmation. */
.remote-number-btn{
  transition:transform .12s ease,border-color .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease!important;
}
.remote-number-btn:active{transform:scale(.95)}
.remote-number-btn.selected{
  transform:scale(1.035);
  box-shadow:0 0 0 2px rgba(255,229,0,.26),0 10px 28px rgba(255,229,0,.12)!important;
}
#remoteVoteSubmit.is-sent{
  animation:v54VoteSent .32s var(--polish-ease) both;
}
@keyframes v54VoteSent{
  0%{transform:scale(1)}
  45%{transform:scale(.975)}
  75%{transform:scale(1.015)}
  100%{transform:scale(1)}
}

/* Reveal sequence: number, title, result cards. */
.remote-result-screen .reveal-secret{
  animation:v54SecretReveal .42s var(--polish-ease) both;
}
.remote-result-screen .result-title{
  animation:v54ResultTitle .34s .08s var(--polish-ease) both;
}
.remote-result-screen .reveal-card{
  animation:v54ResultCard .28s var(--polish-ease) both;
}
.remote-result-screen .reveal-card:nth-child(2){animation-delay:.035s}
.remote-result-screen .reveal-card:nth-child(3){animation-delay:.07s}
.remote-result-screen .reveal-card:nth-child(4){animation-delay:.105s}
.remote-result-screen .reveal-card:nth-child(5){animation-delay:.14s}
.remote-result-screen .reveal-card:nth-child(6){animation-delay:.175s}
.remote-result-screen .reveal-card:nth-child(7){animation-delay:.21s}
.remote-result-screen .reveal-card:nth-child(8){animation-delay:.245s}
.remote-result-screen .reveal-card.hit{animation-name:v54HitCard}
@keyframes v54SecretReveal{
  from{opacity:0;transform:scale(.82)}
  70%{opacity:1;transform:scale(1.045)}
  to{opacity:1;transform:scale(1)}
}
@keyframes v54ResultTitle{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes v54ResultCard{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes v54HitCard{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  70%{opacity:1;transform:translateY(-2px) scale(1.02)}
  to{opacity:1;transform:none}
}

/* Buttons feel tactile but remain restrained. */
.primary-btn,.secondary-btn,.ghost-btn,.seg-btn,.mode-card,.remote-choice{
  transition:transform .12s ease,opacity .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}
.primary-btn:active,.secondary-btn:active,.ghost-btn:active,.seg-btn:active,.mode-card:active,.remote-choice:active{
  transform:scale(.985)!important;
}

/* Keep keyboard mode perfectly stable: no entrance transforms while viewport moves. */
body.app-keyboard-open .app-shell>section,
body.app-keyboard-open .remote-current-theme .remote-theme-card,
body.app-keyboard-open .remote-current-theme .official-card-frame{
  animation:none!important;
}

@media(prefers-reduced-motion:reduce){
  .app-shell>section,.remote-current-theme .remote-theme-card,.remote-current-theme .official-card-frame,
  .card-scene .card-face,.remote-answer-reveal,#remoteVoteSubmit.is-sent,.remote-result-screen .reveal-secret,
  .remote-result-screen .result-title,.remote-result-screen .reveal-card{animation:none!important}
}


/* ===== V6 — PWA / native shell ===== */
.global-network-badge{position:fixed;z-index:1400;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);padding:8px 14px;border:1px solid rgba(255,224,0,.55);border-radius:999px;background:rgba(5,5,5,.94);color:#ffe000;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}.global-network-badge.hidden{display:none}.capacitor-native{overscroll-behavior:none}.capacitor-native .app-shell{padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}.capacitor-native .app-topbar{padding-top:max(10px,env(safe-area-inset-top,0px))}.app-install-dialog .notice-privacy,.app-install-dialog .notice-ulule{margin-top:12px}@media (display-mode:standalone){body{overscroll-behavior-y:none;-webkit-user-select:none;user-select:none}input,textarea{user-select:text;-webkit-user-select:text}.app-shell{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}}@media (prefers-reduced-motion:reduce){.global-network-badge{transition:none}}


/* ===== V7.0 — Accounts & Admin Foundation ===== */
.account-v7-dialog{width:min(680px,calc(100% - 24px));max-height:min(88vh,820px);overflow:auto}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 14px;padding:5px;border:1px solid #252525;border-radius:16px;background:#090909}
.account-tab{min-height:44px;border:0;border-radius:12px;background:transparent;color:#777;font-weight:950;cursor:pointer}.account-tab.selected{background:#1a1a1a;color:#ffe500;box-shadow:inset 0 0 0 1px #303030}
.account-form{display:grid;gap:12px}.account-form .primary-btn{margin-top:4px}.text-action{border:0;background:transparent;color:#999;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;font-weight:750}
.account-identity{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.account-identity>div{padding:14px;border:1px solid #252525;border-radius:15px;background:#090909;min-width:0}.account-identity small{display:block;color:#777;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.account-identity strong{display:block;overflow-wrap:anywhere}
.account-rights{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}.rights-badge{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;background:#ffe500;color:#050505;font-weight:1000;font-size:.72rem;letter-spacing:.08em}.rights-badge.secondary{background:#222;color:#fff;border:1px solid #3a3a3a}
.account-note{color:#999;line-height:1.5;margin:10px 0 18px}.account-actions{display:flex;gap:10px;flex-wrap:wrap}.account-actions>*{flex:1 1 180px}
.admin-dialog{width:min(980px,calc(100% - 24px));max-height:min(90vh,920px);overflow:auto;padding-bottom:28px}.admin-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.admin-title-row h2{margin-bottom:4px}.admin-shield{background:#ffe500;color:#050505;border-radius:999px;padding:7px 11px;font-size:.68rem;font-weight:1000;letter-spacing:.12em}
.admin-search-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin:18px 0 10px}.admin-status{color:#888;font-size:.86rem;margin-bottom:12px}.admin-users-list{display:grid;gap:12px}.admin-user-card{border:1px solid #292929;background:#090909;border-radius:18px;padding:16px}.admin-user-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.admin-user-main strong{font-size:1.06rem}.admin-user-main small{display:block;color:#777;margin-top:3px;overflow-wrap:anywhere}.admin-user-role{font-size:.65rem;font-weight:1000;letter-spacing:.09em;color:#ffe500}.admin-user-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 14px;color:#666;font-size:.7rem}.admin-rights-grid{display:grid;grid-template-columns:minmax(140px,1.1fr) repeat(3,minmax(110px,.8fr));gap:10px;align-items:end}.admin-rights-grid label>span{display:block;color:#777;font-size:.68rem;font-weight:850;margin-bottom:6px}.admin-check{min-height:48px;border:1px solid #282828;border-radius:13px;padding:10px 11px;display:flex!important;align-items:center;gap:8px}.admin-check input{width:18px;height:18px;accent-color:#ffe500}.admin-check span{margin:0!important;color:#ddd!important}.admin-card-actions{display:flex;justify-content:flex-end;margin-top:12px}.admin-card-actions .primary-btn{min-width:145px}.admin-empty{padding:28px;border:1px dashed #303030;border-radius:16px;text-align:center;color:#777}
@media(max-width:720px){.account-identity{grid-template-columns:1fr}.admin-search-row{grid-template-columns:1fr 1fr}.admin-search-row .input{grid-column:1/-1}.admin-rights-grid{grid-template-columns:1fr 1fr}.admin-dialog{padding-left:15px;padding-right:15px}.admin-title-row{align-items:center}.admin-user-card{padding:13px}}
@media(max-width:430px){.admin-rights-grid{grid-template-columns:1fr}.account-actions{flex-direction:column}.admin-search-row{grid-template-columns:1fr}.admin-search-row .input{grid-column:auto}}

/* ===== V7.0.2 — targeted visual fixes: stable countdowns + remote card reveal ===== */
/* Local countdowns update in place: only the number pulses, never the whole stage. */
.private-countdown{animation:none!important;min-width:1.15em;text-align:center;transform-origin:center}
.private-countdown.count-tick{animation:v702CountTick .34s cubic-bezier(.2,.85,.25,1.2)!important}
.secret-time strong{display:inline-block;min-width:1.1em;text-align:center;transform-origin:center}
.secret-time strong.count-tick-small{animation:v702CountTickSmall .28s cubic-bezier(.2,.85,.25,1.15)!important}
@keyframes v702CountTick{0%{transform:scale(.88);opacity:.72}65%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes v702CountTickSmall{0%{transform:scale(.88);opacity:.75}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}

/* Remove the large travelling sheen over the whole local game stage. */
.stage:before{display:none!important;animation:none!important}

/* Card gloss: same restrained reflection on the front as on the back, always clipped to the card. */
.card-face{overflow:hidden!important}
.card-face:after{
  content:""!important;
  position:absolute!important;
  inset:-20%!important;
  width:auto!important;
  top:-20%!important;
  bottom:-20%!important;
  left:-20%!important;
  background:linear-gradient(110deg,transparent 37%,rgba(255,255,255,.22) 49%,transparent 61%)!important;
  transform:translateX(-125%) skewX(-12deg)!important;
  opacity:1!important;
  pointer-events:none!important;
  animation:backGloss .85s ease-out 1.16s forwards!important;
  z-index:12!important;
}
@media(min-width:721px){.card-face:has(>.official-card-main){overflow:hidden!important}}

/* Remote mode gets the same back -> front reveal as Salon, without replaying it on the answer screen. */
.remote-card-scene{
  width:min(270px,62vw);
  aspect-ratio:63/88;
  perspective:1400px;
  position:relative;
  margin:0 auto;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.38));
  flex:0 1 auto;
  max-height:100%;
}
.remote-card-flipper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);animation:cardFlip .82s cubic-bezier(.2,.75,.25,1) .24s forwards}
.remote-card-back,.remote-card-face{position:absolute;inset:0;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.remote-card-back{transform:rotateY(180deg);background:#050505 url('./assets/card-back.png') center/cover no-repeat;border:1px solid rgba(255,229,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.remote-card-back:after,.remote-card-face:after{content:"";position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 37%,rgba(255,255,255,.22) 49%,transparent 61%);transform:translateX(-125%) skewX(-12deg);pointer-events:none;z-index:12}
.remote-card-back:after{animation:backGloss .85s ease-out .10s forwards}
.remote-card-face:after{animation:backGloss .85s ease-out 1.02s forwards}
.remote-card-face>.remote-theme-card{width:100%!important;height:100%!important;max-height:none!important;margin:0!important;border-radius:24px!important}
.remote-card-face>.remote-theme-card.official-card-frame .official-card-image{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}

/* Desktop: keep the question clearly between player/status strips and the card. */
@media(min-width:721px) and (min-height:521px){
  .remote-theme-screen{padding-top:118px!important}
  .remote-theme-screen>.scale-question{margin:3px 0 8px!important;position:relative;z-index:2}
}

/* Mobile: keep the question visible before interaction and size the flip scene to the available area. */
@media(max-width:720px){
  .remote-theme-screen>.scale-question{display:block!important;visibility:visible!important;opacity:1!important;font-size:clamp(.92rem,4.2vw,1.12rem)!important;margin:0 0 5px!important;line-height:1.12!important}
  .remote-card-scene{width:min(198px,52vw)!important;max-width:100%;max-height:100%;}
  .remote-card-face>.remote-theme-card{width:100%!important;max-height:none!important;padding:20px 12px!important}
}
@media(max-width:390px){.remote-card-scene{width:min(180px,50vw)!important}}

@media(prefers-reduced-motion:reduce){
  .private-countdown.count-tick,.secret-time strong.count-tick-small,.remote-card-flipper,.remote-card-back:after,.remote-card-face:after{animation:none!important}
  .remote-card-flipper{transform:none!important}
}
\n\n/* ===== V7.0.3 — mobile remote HUD + multi-player voice polish ===== */\n@media(max-width:720px){\n  /* Keep player chips away from the question. They float below the 1–8 badge. */\n  .remote-game-screen .remote-score-strip{\n    top:54px!important;\n    right:8px!important;\n    left:auto!important;\n    transform:none!important;\n    width:min(132px,38vw)!important;\n    max-width:min(132px,38vw)!important;\n    max-height:42dvh!important;\n    margin:0!important;\n    padding:0!important;\n    display:flex!important;\n    flex-direction:column!important;\n    flex-wrap:nowrap!important;\n    align-items:stretch!important;\n    justify-content:flex-start!important;\n    gap:5px!important;\n    overflow-y:auto!important;\n    overflow-x:hidden!important;\n    scrollbar-width:none;\n    z-index:8!important;\n    pointer-events:none;\n  }\n  .remote-game-screen .remote-score-strip::-webkit-scrollbar{display:none}\n  .remote-game-screen .remote-score-strip span{\n    width:100%!important;\n    min-height:28px!important;\n    padding:4px 7px!important;\n    font-size:.56rem!important;\n    justify-content:flex-start!important;\n    overflow:hidden!important;\n    white-space:nowrap!important;\n    flex:0 0 auto!important;\n    background:rgba(10,10,10,.88)!important;\n    backdrop-filter:blur(8px);\n    -webkit-backdrop-filter:blur(8px);\n  }\n  .remote-game-screen .remote-score-strip span strong{\n    min-width:0!important;\n    overflow:hidden!important;\n    text-overflow:ellipsis!important;\n    white-space:nowrap!important;\n    flex:1 1 auto!important;\n  }\n  .remote-theme-screen{padding-top:82px!important}\n  .remote-theme-screen .scale-question{\n    width:calc(100% - min(142px,40vw))!important;\n    max-width:none!important;\n    align-self:flex-start!important;\n    margin:4px 0 8px 4px!important;\n    padding:0 2px!important;\n    text-align:center!important;\n    line-height:1.12!important;\n    position:relative!important;\n    z-index:4!important;\n  }\n  .remote-theme-screen>.kicker{\n    width:calc(100% - min(142px,40vw))!important;\n    align-self:flex-start!important;\n    text-align:center!important;\n  }\n}\n
/* ===== V7.0.4 — remote players column HUD ===== */
/* Keep remote players visible at all times, out of the central question/card axis. */
.remote-game-screen .remote-score-strip{
  position:absolute!important;
  top:72px!important;
  right:18px!important;
  left:auto!important;
  transform:none!important;
  width:min(190px,18vw)!important;
  max-width:min(190px,18vw)!important;
  max-height:54vh!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:7px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none;
  z-index:12!important;
  pointer-events:none;
}
.remote-game-screen .remote-score-strip::-webkit-scrollbar{display:none}
.remote-game-screen .remote-score-strip span{
  width:auto!important;
  max-width:100%!important;
  min-height:26px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  padding:3px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  color:#aaa!important;
  font-size:.64rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  text-shadow:0 2px 7px rgba(0,0,0,.95)!important;
}
.remote-game-screen .remote-score-strip span b{
  flex:0 0 auto!important;
  width:19px!important;
  height:19px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#171717!important;
  color:#777!important;
  font-size:.55rem!important;
  box-shadow:0 2px 8px rgba(0,0,0,.45)!important;
}
.remote-game-screen .remote-score-strip span.target{color:#fff!important}
.remote-game-screen .remote-score-strip span.target b{background:var(--yellow)!important;color:#050505!important}
.remote-game-screen .remote-score-strip span strong{
  flex:0 0 auto!important;
  color:#fff!important;
  min-width:auto!important;
}

/* Desktop: reserve the right lane for players and keep question centred in the free game area. */
@media(min-width:721px){
  .remote-theme-screen>.scale-question,
  .remote-theme-screen>.kicker{
    width:min(760px,calc(100% - 430px))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:translateX(-28px);
  }
}

/* Phone: stack names directly under the 1–8 badge, close to the right edge. */
@media(max-width:720px){
  .remote-game-screen .remote-score-strip{
    top:64px!important;
    right:10px!important;
    width:min(122px,34vw)!important;
    max-width:min(122px,34vw)!important;
    max-height:40dvh!important;
    gap:5px!important;
    align-items:flex-end!important;
  }
  .remote-game-screen .remote-score-strip span{
    min-height:24px!important;
    font-size:.57rem!important;
    padding:2px 0!important;
  }
  .remote-game-screen .remote-score-strip span b{width:18px!important;height:18px!important;font-size:.52rem!important}
  .remote-theme-screen{padding-top:82px!important}
  .remote-theme-screen>.scale-question,
  .remote-theme-screen>.kicker{
    width:calc(100% - min(132px,36vw))!important;
    max-width:none!important;
    align-self:flex-start!important;
    margin-left:4px!important;
    margin-right:0!important;
    transform:none!important;
    text-align:center!important;
  }
}

/* The keyboard compact state intentionally hides non-essential HUD while typing. */
body.app-keyboard-open .remote-game-screen .remote-score-strip{display:none!important}

/* ===== V7.1 — Account UX & Access Rules ===== */
.locked-option{opacity:.58}.locked-option .switch{cursor:pointer}
.access-card,.admin-global-mode{border:1px solid rgba(255,229,0,.24);background:rgba(255,229,0,.045);border-radius:18px;padding:16px 18px;margin:14px 0}.access-card{display:grid;gap:5px}.access-card small,.admin-global-mode small{color:#777;font-size:.68rem;font-weight:950;letter-spacing:.13em}.access-card strong,.admin-global-mode strong{color:var(--yellow);font-size:1.05rem}.access-card p,.admin-global-mode p{margin:0;color:#999;line-height:1.45;font-size:.84rem}.account-manage-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:16px 0}.account-manage-grid .field-block{margin:0}.danger-text{color:#ff7d7d!important}.admin-global-mode{display:flex;justify-content:space-between;align-items:center;gap:18px}.admin-global-mode>div{min-width:0}.admin-user-card textarea.input{resize:vertical;min-height:76px}.paywall-dialog{max-width:640px}.paywall-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.paywall-access-grid>div{padding:15px;border:1px solid #262626;border-radius:16px;background:#0a0a0a;display:grid;gap:7px}.paywall-access-grid .highlight{border-color:rgba(255,229,0,.35);background:rgba(255,229,0,.05)}.paywall-access-grid strong{color:#fff}.paywall-access-grid .highlight strong{color:var(--yellow)}.paywall-access-grid span{font-size:.78rem;color:#888;line-height:1.4}.paywall-soon{display:block;color:#666;margin-top:9px;text-align:center}.account-actions{gap:9px;flex-wrap:wrap}.admin-rights-grid{grid-template-columns:minmax(170px,1fr) repeat(2,minmax(120px,.7fr))}
@media(max-width:650px){.account-manage-grid{grid-template-columns:1fr}.account-manage-grid .ghost-btn{width:100%}.paywall-access-grid{grid-template-columns:1fr}.admin-global-mode{align-items:flex-start}.admin-rights-grid{grid-template-columns:1fr}.admin-search-row{grid-template-columns:1fr}.admin-search-row button{width:100%}}

.founder-mini{font-size:.54rem!important;letter-spacing:.08em!important;color:#090909!important;background:var(--yellow)!important;border-radius:999px;padding:3px 6px!important}.founder-dot{font-style:normal;color:var(--yellow);font-size:.62em;margin-left:4px;vertical-align:middle}.account-usage-line{color:#777!important;font-size:.78rem!important;margin-top:4px!important}

/* V7.1.1 — Discovery quota, email verification and Salon navigation */
.email-verification{display:inline-flex;margin-top:5px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.email-verification.pending{background:rgba(255,211,0,.12);color:var(--yellow);border:1px solid rgba(255,211,0,.35)}.email-verification.verified{background:rgba(255,255,255,.08);color:#dfffe6;border:1px solid rgba(180,255,198,.28)}.account-verification-actions{margin:12px 0;padding:12px;border:1px solid rgba(255,211,0,.24);border-radius:14px;background:rgba(255,211,0,.06)}.account-verification-actions p{margin:0 0 10px;font-size:.85rem;line-height:1.35}.account-verification-actions>div{display:flex;gap:8px;flex-wrap:wrap}.setup-panel{position:relative}.setup-back-btn{appearance:none;border:0;background:transparent;color:var(--yellow);font:inherit;font-weight:900;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 8px;margin:-4px 0 8px;cursor:pointer}.setup-back-btn span{color:#fff;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}@media(max-width:600px){.setup-back-btn{margin-bottom:4px}}

/* ===== V7.1.2 — account compact layout ===== */
.account-dialog{width:min(760px,calc(100% - 28px))!important;max-width:760px!important}
.account-dialog h2{margin:8px 0 12px!important;font-size:clamp(2rem,4vw,3.1rem)}
.account-summary-single{grid-template-columns:minmax(180px,260px)!important;justify-content:center;margin:0 0 12px!important}
.account-summary-single>div{text-align:center;padding:10px 14px!important}
.account-access-top{margin:8px 0 12px!important;padding:14px 16px!important}
.account-access-top p{font-size:.82rem!important}
.account-rights{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.account-identity-compact{margin:0!important;gap:10px!important}
.account-info-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:132px}
.account-info-card .email-verification{margin-top:2px}
.mini-account-action{margin-top:auto;appearance:none;border:0;background:transparent;color:var(--yellow);font:inherit;font-size:.78rem;font-weight:900;padding:7px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.account-secondary-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,1fr);gap:10px;align-items:stretch;margin:10px 0 12px}
.account-created-card{padding:14px;border:1px solid #252525;border-radius:15px;background:#090909;display:flex;flex-direction:column;justify-content:center}
.account-created-card small{display:block;color:#777;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.account-password-btn{width:100%;min-height:100%;font-size:.9rem}
.account-actions-bottom{margin-top:4px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;align-items:center}
.account-actions-bottom #openAdminBtn{grid-column:1/-1}
.account-actions-bottom>*{min-width:0!important;flex:none!important;min-height:46px}
.account-actions-bottom .text-action{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 10px}
.account-edit-dialog{width:min(440px,calc(100% - 28px))!important;max-width:440px!important}
.account-edit-dialog h2{margin:8px 0 18px;font-size:1.7rem}
.account-edit-dialog .field-block{margin-bottom:12px}
.account-edit-dialog .primary-btn{width:100%}
@media(max-width:650px){
  .account-dialog{width:calc(100% - 16px)!important;padding:18px!important}
  .account-summary-single{grid-template-columns:1fr!important}
  .account-identity-compact{grid-template-columns:1fr!important}
  .account-info-card{min-height:0}
  .account-secondary-row{grid-template-columns:1fr}
  .account-password-btn{min-height:48px}
  .account-actions-bottom{grid-template-columns:1fr!important}
  .account-actions-bottom #openAdminBtn{grid-column:auto}
}


/* ===== V7.1.3 — account icon + custom themes cleanup ===== */
.account-icon-btn{width:62px!important;height:62px!important;margin:0!important;border:0!important;border-radius:16px!important;background:transparent!important;padding:2px!important;justify-self:end;overflow:visible}
.account-icon-btn img{display:block;width:58px;height:58px;object-fit:contain;object-position:center;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,229,0,.22))}
@media(max-width:520px){.account-icon-btn{width:56px!important;height:56px!important}.account-icon-btn img{width:52px;height:52px}}
@media(min-width:1200px){.account-icon-btn{width:66px!important;height:66px!important}.account-icon-btn img{width:62px;height:62px}}
.custom-theme-list{display:grid;gap:8px}
.custom-theme-row{display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;align-items:center!important;gap:10px!important;padding:10px 10px 10px 14px!important;border:1px solid #262626!important;border-radius:14px!important;background:#0a0a0a!important}
.custom-theme-name{min-width:0;color:#f4f4f1;font-weight:850;line-height:1.25;overflow-wrap:anywhere}
.custom-theme-delete{appearance:none;width:34px;height:34px;border:1px solid rgba(255,83,83,.28);border-radius:11px;background:rgba(255,70,70,.07);color:#ff5b5b;font:900 1.45rem/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 2px;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.custom-theme-delete:active{transform:scale(.93);background:rgba(255,70,70,.14)}
@media(hover:hover) and (pointer:fine){.custom-theme-delete:hover{background:rgba(255,70,70,.14);border-color:rgba(255,83,83,.5)}}

/* ===== V7.1.5 — header alignment after larger account icon ===== */
.app-topbar{
  min-height:72px;
  height:calc(72px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;
}
.app-topbar > #menuBtn,
.app-topbar > #accountBtn{
  align-self:center;
  justify-self:center;
}
.app-topbar > #menuBtn{
  width:56px;
  height:56px;
}
.app-topbar > #menuBtn span{
  width:25px;
  height:2px;
}
.app-topbar > .app-wordmark{
  justify-self:center;
  align-self:center;
  height:52px;
  min-width:0;
}
.app-topbar > .app-wordmark img{
  width:104px;
  height:48px;
  object-fit:contain;
}
.app-topbar > .account-icon-btn{
  width:62px!important;
  height:62px!important;
  margin:0!important;
  padding:2px!important;
}
.app-topbar > .account-icon-btn img{
  width:58px;
  height:58px;
}
@media(max-width:520px){
  .app-topbar{
    min-height:66px;
    height:calc(66px + env(safe-area-inset-top));
    grid-template-columns:56px minmax(0,1fr) 56px;
    padding:env(safe-area-inset-top) 8px 0;
  }
  .app-topbar > #menuBtn{width:50px;height:50px}
  .app-topbar > .app-wordmark{height:46px}
  .app-topbar > .app-wordmark img{width:94px;height:44px}
  .app-topbar > .account-icon-btn{width:56px!important;height:56px!important}
  .app-topbar > .account-icon-btn img{width:52px;height:52px}
}
@media(min-width:1200px){
  .app-topbar{
    min-height:76px;
    height:calc(76px + env(safe-area-inset-top));
    grid-template-columns:70px minmax(0,1fr) 70px;
  }
  .app-topbar > #menuBtn{width:60px;height:60px}
  .app-topbar > .app-wordmark img{width:112px;height:52px}
  .app-topbar > .account-icon-btn{width:66px!important;height:66px!important}
  .app-topbar > .account-icon-btn img{width:62px;height:62px}
}

/* ===== V7.1.6 — definitive remote game HUD layout ===== */
/* One authoritative layout for remote in-game top information. */
body.app-in-game .remote-game-screen.panel{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
}

/* Room / round / range badges stay in their own top-right lane. */
body.app-in-game .remote-game-screen .remote-game-meta{
  position:fixed!important;
  top:max(10px,env(safe-area-inset-top,0px))!important;
  right:max(12px,env(safe-area-inset-right,0px))!important;
  left:auto!important;
  width:auto!important;
  max-width:calc(100vw - 84px)!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  z-index:40!important;
  pointer-events:none!important;
}
body.app-in-game .remote-game-screen .remote-game-meta .remote-quit-mini{pointer-events:auto!important}

/* Player ranking has its own fixed right rail and never enters the question/card axis. */
body.app-in-game .remote-game-screen .remote-score-strip{
  position:fixed!important;
  top:64px!important;
  right:max(16px,env(safe-area-inset-right,0px))!important;
  left:auto!important;
  transform:none!important;
  width:180px!important;
  max-width:180px!important;
  max-height:calc(100dvh - 150px)!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:7px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
  z-index:35!important;
  pointer-events:none!important;
}
body.app-in-game .remote-game-screen .remote-score-strip::-webkit-scrollbar{display:none!important}
body.app-in-game .remote-game-screen .remote-score-strip span{
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  margin:0!important;
  padding:2px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  color:#aaa!important;
  font-size:.64rem!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-shadow:0 2px 7px rgba(0,0,0,.95)!important;
}
body.app-in-game .remote-game-screen .remote-score-strip span b{
  flex:0 0 auto!important;
  width:19px!important;
  height:19px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#171717!important;
  color:#777!important;
  font-size:.55rem!important;
}
body.app-in-game .remote-game-screen .remote-score-strip span strong{
  flex:0 0 auto!important;
  min-width:auto!important;
  color:#fff!important;
}
body.app-in-game .remote-game-screen .remote-score-strip span.target{color:#fff!important}
body.app-in-game .remote-game-screen .remote-score-strip span.target b{background:var(--yellow)!important;color:#050505!important}

/* Theme heading lives in a dedicated central lane below the fixed HUD. */
body.app-in-game .remote-theme-screen{
  padding-top:92px!important;
}
body.app-in-game .remote-theme-screen>.kicker,
body.app-in-game .remote-theme-screen>.scale-question{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(640px,calc(100vw - 430px))!important;
  max-width:640px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  z-index:5!important;
}
body.app-in-game .remote-theme-screen>.kicker{margin-top:0!important;margin-bottom:6px!important}
body.app-in-game .remote-theme-screen>.scale-question{margin-top:0!important;margin-bottom:10px!important;line-height:1.1!important}

@media(max-width:720px){
  body.app-in-game .remote-game-screen .remote-game-meta{
    top:max(8px,env(safe-area-inset-top,0px))!important;
    right:8px!important;
    max-width:calc(100vw - 76px)!important;
  }
  body.app-in-game .remote-game-screen .remote-game-meta>span{
    padding:7px 9px!important;
    font-size:.62rem!important;
  }
  body.app-in-game .remote-game-screen .remote-score-strip{
    top:72px!important;
    right:10px!important;
    width:min(126px,34vw)!important;
    max-width:min(126px,34vw)!important;
    max-height:36dvh!important;
    gap:5px!important;
  }
  body.app-in-game .remote-game-screen .remote-score-strip span{
    min-height:23px!important;
    font-size:.58rem!important;
    gap:5px!important;
  }
  body.app-in-game .remote-game-screen .remote-score-strip span b{
    width:18px!important;
    height:18px!important;
    font-size:.52rem!important;
  }
  body.app-in-game .remote-theme-screen{
    padding-top:92px!important;
  }
  body.app-in-game .remote-theme-screen>.kicker,
  body.app-in-game .remote-theme-screen>.scale-question{
    width:calc(100vw - min(150px,38vw) - 26px)!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:auto!important;
    align-self:flex-start!important;
    text-align:center!important;
  }
  body.app-in-game .remote-theme-screen>.kicker{
    font-size:.72rem!important;
    margin-bottom:7px!important;
  }
  body.app-in-game .remote-theme-screen>.scale-question{
    font-size:clamp(1.04rem,5.1vw,1.4rem)!important;
    margin-bottom:9px!important;
  }
}

/* Compact keyboard state: ranking is non-essential while typing. */
body.app-keyboard-open .remote-game-screen .remote-score-strip{display:none!important}

/* ===== V7.1.7 — remote card flip stability ===== */
/* The distant flip owns its complete visual lifecycle. Nested card polish must not animate independently. */
.remote-card-scene{
  aspect-ratio:435/593!important;
  isolation:isolate;
  contain:layout paint style;
}
.remote-card-flipper{
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.remote-card-back,
.remote-card-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  box-sizing:border-box!important;
  transform-origin:50% 50%!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  overflow:hidden!important;
}
.remote-card-back{
  transform:rotateY(180deg) translateZ(.1px)!important;
  opacity:1;
  visibility:visible;
  animation:remoteBackGate .82s steps(1,end) .24s forwards;
}
.remote-card-face{
  transform:rotateY(0deg) translateZ(.1px)!important;
  opacity:0;
  visibility:hidden;
  animation:remoteFaceGate .82s steps(1,end) .24s forwards;
}
@keyframes remoteBackGate{
  0%,49.9%{opacity:1;visibility:visible}
  50%,100%{opacity:0;visibility:hidden}
}
@keyframes remoteFaceGate{
  0%,49.9%{opacity:0;visibility:hidden}
  50%,100%{opacity:1;visibility:visible}
}
/* Prevent the generic V5.4 card entrance animation from moving the front face inside the 3D flip. */
.remote-current-theme .remote-card-scene .remote-card-face>.remote-theme-card,
.remote-current-theme .remote-card-scene .remote-card-face>.official-card-frame,
.remote-current-theme .remote-card-scene .remote-card-face .official-card-image{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  transition:none!important;
}
.remote-card-face>.remote-theme-card,
.remote-card-face>.remote-theme-card.official-card-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border-radius:24px!important;
  box-shadow:none!important;
}
.remote-card-face>.remote-theme-card.official-card-frame .official-card-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:fill!important;
  border-radius:24px!important;
}
/* Keep custom themes centered without reintroducing the generic entrance animation. */
.remote-card-face>.remote-theme-card:not(.official-card-frame){
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px 20px!important;
}
@media(max-width:720px){
  .remote-card-face>.remote-theme-card:not(.official-card-frame){padding:20px 12px!important}
}
@media(prefers-reduced-motion:reduce){
  .remote-card-back{opacity:0!important;visibility:hidden!important;animation:none!important}
  .remote-card-face{opacity:1!important;visibility:visible!important;animation:none!important}
}

/* ===== V7.1.8 — playtest UX fixes ===== */
/* Remote gameplay: no permanent scoreboard during rounds. */
body.app-in-game .remote-game-screen .remote-score-strip{display:none!important}

/* Private target reminder: small yellow circle in the freed top-right lane. */
.remote-secret-reminder{
  position:fixed;
  top:64px;
  right:max(18px,env(safe-area-inset-right,0px));
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:38;
  background:var(--yellow);
  color:#050505;
  border:3px solid #0a0a0a;
  box-shadow:0 0 0 1px rgba(255,229,0,.22),0 8px 24px rgba(0,0,0,.34);
  font-size:1.15rem;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
}
.remote-secret-reminder.loading{opacity:.55}

/* Voting: the selected tile is the only strong feedback. */
.remote-vote-actions{gap:9px!important}
.remote-vote-state{margin-top:2px;min-height:18px!important;font-size:.72rem!important;color:#8b8b8b!important}
.remote-number-btn.selected{
  background:var(--yellow)!important;
  color:#050505!important;
  border-color:var(--yellow)!important;
  box-shadow:0 8px 22px rgba(255,229,0,.12)!important;
}
.remote-number-btn.selected:disabled{opacity:1!important}

/* Inter-round score screen: scores are shown once, between rounds. */
.remote-round-score-screen{padding-top:84px!important;gap:14px!important}
.remote-round-score-screen h1{font-size:clamp(2.1rem,6vw,4rem)!important;margin:2px 0 8px!important}
.remote-interround-board{
  width:min(520px,94vw);
  display:grid;
  gap:8px;
  margin:4px auto 10px;
}
.remote-interround-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:11px 13px;
  border:1px solid #252525;
  border-radius:15px;
  background:#0a0a0a;
  text-align:left;
}
.remote-interround-row.leader{border-color:rgba(255,229,0,.32);background:rgba(255,229,0,.045)}
.remote-interround-rank{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#191919;color:#888;font-weight:1000;font-size:.8rem;
}
.remote-interround-row.leader .remote-interround-rank{background:var(--yellow);color:#050505}
.remote-interround-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remote-interround-row>span:last-child{color:var(--yellow);font-weight:1000;white-space:nowrap}

/* With the ranking removed, the theme/question axis can use the full width again. */
body.app-in-game .remote-theme-screen>.kicker,
body.app-in-game .remote-theme-screen>.scale-question{
  width:min(680px,calc(100vw - 40px))!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  text-align:center!important;
}

@media(max-width:720px){
  .remote-secret-reminder{top:62px;right:12px;width:38px;height:38px;font-size:1rem}
  body.app-in-game .remote-theme-screen>.kicker,
  body.app-in-game .remote-theme-screen>.scale-question{
    width:calc(100vw - 28px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    align-self:center!important;
  }
  .remote-round-score-screen{padding-top:76px!important;padding-left:14px!important;padding-right:14px!important}
  .remote-interround-board{width:100%}
  .remote-interround-row{padding:9px 10px;grid-template-columns:30px minmax(0,1fr) auto}
}

/* Samsung / narrow Android browser: denser voting layout without touching iPhone layouts. */
html.android-web body.app-in-game .remote-vote-screen{
  justify-content:flex-start!important;
  padding-top:76px!important;
  padding-bottom:max(70px,calc(58px + env(safe-area-inset-bottom,0px)))!important;
  gap:8px!important;
  min-height:calc(100dvh - 8px)!important;
}
html.android-web body.app-in-game .remote-vote-screen>.kicker{margin:0!important;font-size:.66rem!important}
html.android-web body.app-in-game .remote-vote-screen h1{
  font-size:clamp(1.55rem,7.2vw,2.15rem)!important;
  line-height:.94!important;
  margin:2px 0 4px!important;
  max-width:92vw!important;
}
html.android-web body.app-in-game .remote-vote-screen .remote-round-recall{
  margin:2px 0 5px!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  justify-content:center!important;
  max-width:100%!important;
  padding-bottom:2px!important;
}
html.android-web body.app-in-game .remote-vote-screen .remote-recall-item{
  width:76px!important;
  flex:0 0 76px!important;
  gap:5px!important;
}
html.android-web body.app-in-game .remote-vote-screen .remote-recall-answer{
  min-height:28px!important;
  padding:4px 5px!important;
  font-size:.52rem!important;
  line-height:1.12!important;
}
html.android-web body.app-in-game .remote-vote-actions{width:min(430px,94vw)!important;gap:7px!important}
html.android-web body.app-in-game .remote-number-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}
html.android-web body.app-in-game .remote-number-btn{
  min-height:44px!important;
  border-radius:11px!important;
  font-size:1.05rem!important;
  padding:5px!important;
}
html.android-web body.app-in-game .remote-vote-state{
  font-size:.66rem!important;
  line-height:1.25!important;
  min-height:16px!important;
  margin:0!important;
}

@media(max-width:390px){
  html.android-web body.app-in-game .remote-vote-screen{padding-left:8px!important;padding-right:8px!important;gap:6px!important}
  html.android-web body.app-in-game .remote-vote-screen h1{font-size:clamp(1.42rem,7.4vw,1.9rem)!important}
  html.android-web body.app-in-game .remote-vote-screen .remote-recall-item{width:68px!important;flex-basis:68px!important}
  html.android-web body.app-in-game .remote-number-btn{min-height:42px!important;font-size:1rem!important}
}


/* ===== V7.1.9 — remote HUD / keyboard / inter-round identity fixes ===== */
:root{--app-stable-h:100dvh}

/* Secret reminder always owns a dedicated lane directly BELOW round/range badges. */
body.app-in-game .remote-secret-reminder{
  top:calc(env(safe-area-inset-top,0px) + 58px)!important;
  right:max(14px,env(safe-area-inset-right,0px))!important;
  z-index:41!important;
}
@media(max-width:720px){
  body.app-in-game .remote-secret-reminder{
    top:calc(env(safe-area-inset-top,0px) + 62px)!important;
    right:10px!important;
  }
}

/* Inter-round board highlights the CURRENT viewer, not the leader. */
.remote-interround-row.leader{
  border-color:#252525!important;
  background:#0a0a0a!important;
}
.remote-interround-row.leader .remote-interround-rank{
  background:#191919!important;
  color:#888!important;
}
.remote-interround-row.is-self{
  border-color:rgba(255,229,0,.72)!important;
  background:rgba(255,229,0,.055)!important;
  box-shadow:0 0 0 1px rgba(255,229,0,.13)!important;
}
.remote-interround-row.is-self .remote-interround-rank{
  background:var(--yellow)!important;
  color:#050505!important;
}

/* Mobile keyboard: freeze the entire scene; only float the answer panel above keyboard. */
@media(max-width:720px){
  body.app-keyboard-open .app-shell{
    top:0!important;
    height:var(--app-stable-h)!important;
    min-height:var(--app-stable-h)!important;
    max-height:var(--app-stable-h)!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  body.app-keyboard-open .remote-theme-screen{
    height:100%!important;
    padding-top:92px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
    gap:5px!important;
    justify-content:flex-start!important;
  }
  body.app-keyboard-open .remote-game-meta{display:flex!important;opacity:1!important}
  body.app-keyboard-open .remote-theme-screen>.kicker{display:block!important}
  body.app-keyboard-open .remote-theme-screen>.scale-question{display:block!important}
  body.app-keyboard-open .remote-previous-themes{display:flex!important}
  body.app-keyboard-open .game-exit-btn{display:grid!important;opacity:1!important;pointer-events:auto!important}
  body.app-keyboard-open .remote-theme-focus{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:calc(var(--app-stable-h) * .47)!important;
    margin:3px auto!important;
    gap:5px!important;
    overflow:visible!important;
  }
  body.app-keyboard-open .remote-current-theme{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.app-keyboard-open .remote-current-theme .official-card-image{
    max-height:calc(var(--app-stable-h) * .43)!important;
    max-width:min(70vw,330px)!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  body.app-keyboard-open .remote-answer-box{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(var(--app-keyboard-h) + 8px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:8px!important;
    border-radius:14px!important;
    background:rgba(7,7,7,.97)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    z-index:120!important;
  }
  body.app-keyboard-open .remote-answer-box .field-block>span{font-size:.72rem!important;margin-bottom:5px!important}
  body.app-keyboard-open .remote-answer-box .input{min-height:48px!important;padding:12px 13px!important}
  body.app-keyboard-open .remote-answer-box .primary-btn{min-height:50px!important;padding:12px!important}
}


/* ===== V7.1.11 — GLOBAL PAGE SCROLL FIX (SALON + SETUP ONLY) ===== */
/*
   Remote play keeps the locked app-like viewport. Salon play and Salon setup
   use normal document scrolling whenever their content is taller than the screen.
   The whole page scrolls; no internal player-list scrollbar is introduced.
*/
body.app-salon-game,
body.app-setup-screen{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}
body.app-salon-game .app-shell,
body.app-setup-screen .app-shell{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  width:min(760px,calc(100% - 28px))!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  margin:0 auto!important;
  overflow:visible!important;
  padding-bottom:calc(42px + env(safe-area-inset-bottom,0px))!important;
}
body.app-salon-game .app-shell>section,
body.app-setup-screen .app-shell>section{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
body.app-salon-game .game-layout{
  height:auto!important;
  min-height:calc(100dvh - 20px)!important;
  max-height:none!important;
  overflow:visible!important;
  align-items:start;
}
body.app-salon-game .stage{
  height:auto!important;
  max-height:none!important;
}
body.app-salon-game .guess-form{
  flex:none!important;
}
@media(max-width:720px){
  body.app-salon-game .app-shell,
  body.app-setup-screen .app-shell{
    width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))!important;
  }
  body.app-salon-game .game-layout{
    display:block!important;
    min-height:100dvh!important;
  }
  body.app-salon-game .stage{
    min-height:100dvh!important;
    overflow:visible!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;
  }
}