/* ===================== Soirée jeux : module de dessin et écrans de jeu ===================== */

[hidden]{display:none!important}   /* un display:grid/flex ne doit jamais annuler l'attribut hidden */

/* ---------- éditeur de dessin (draw.js) ---------- */
.dz{display:flex;flex-direction:column;height:100%;min-height:0;background:#160a10;color:#fbe9d2;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dz-stage{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:6px}
.dz-paper{position:relative;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);touch-action:none;overflow:hidden}
.dz-paper canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.dz-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:6px 14px;border-radius:99px;font-weight:800;font-size:14px;pointer-events:none;white-space:nowrap}
.dz-tools{flex:none;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:#2a0f19;border-top:1px solid rgba(255,196,107,.25);display:flex;flex-direction:column;gap:6px}
.dz-row{display:grid;gap:6px}
.dz-main{grid-template-columns:repeat(5,1fr)}
.dz-sizes{grid-template-columns:repeat(4,1fr)}
.dz-row button{height:52px;border-radius:14px;background:rgba(255,243,224,.1);font-size:24px;display:grid;place-items:center;border:2px solid transparent;transition:background .15s,border-color .15s}
.dz-row button:active{transform:scale(.96)}
.dz-row button.on{background:rgba(255,154,60,.3);border-color:#ff9a3c}
.dz-sizes i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:#fbe9d2}
.dz-colors{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dz-colors button{height:44px;border-radius:12px;background:var(--c);border:3px solid rgba(255,255,255,.22)}
.dz-colors button.on{border-color:#fff;box-shadow:0 0 0 3px #ff9a3c;transform:scale(1.06)}
@media (max-height:700px){.dz-row button{height:46px}.dz-colors button{height:38px}}

/* ---------- page d'essai /dessin ---------- */
.demo-bar{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#2a0f19;color:#fbe9d2;font-family:system-ui,sans-serif}
.demo-bar b{flex:1;font-size:15px}
.demo-bar button{padding:10px 14px;border-radius:99px;background:#ff7a2f;color:#2a0f0a;font-weight:800;font-size:14px}
.demo-root{display:flex;flex-direction:column;height:100dvh}
.demo-bar{flex:none}
.demo-main{flex:1 1 auto;min-height:0}
.demo-replay{position:fixed;inset:0;z-index:20;background:rgba(10,4,7,.95);display:grid;place-items:center;color:#fbe9d2;font-family:system-ui,sans-serif}
.demo-replay canvas{height:78vh;aspect-ratio:3/4;max-width:92vw;background:#fff;border-radius:10px}
.demo-replay p{text-align:center}


/* ===================== carte « La soirée » (tableau) ===================== */
.party-card{margin:22px 0 4px;padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(255,154,60,.14),rgba(255,243,224,.05));border:1.5px solid rgba(255,196,107,.3)}
.party-card h3{margin-bottom:10px}
.party-active{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;font-weight:800}
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0}
.cat-btn{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:16px;background:rgba(255,243,224,.08);border:1.5px solid rgba(255,196,107,.22);transition:transform .2s,background .2s}
.cat-btn:hover{transform:translateY(-3px);background:rgba(255,243,224,.14)}
.cat-ico{font-size:1.9rem}
.cat-txt{display:flex;flex-direction:column}
.cat-txt small{color:#d1b79b;font-size:.78rem;line-height:1.3}
.party-tv{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#tvLinkBox{display:flex;gap:6px;flex:1;min-width:240px}
#tvLinkInput{flex:1;font-size:13px;padding:8px 10px}

/* fenêtre de réglages avant de lancer un jeu */
.cfg-back{position:fixed;inset:0;z-index:96;background:rgba(10,4,7,.8);display:grid;place-items:center;padding:16px}
.cfg{width:100%;max-width:400px;background:#2a0f19;border:1.5px solid rgba(255,196,107,.3);border-radius:22px;padding:20px;color:#fbe9d2}
.cfg h3{margin-bottom:8px}
.cfg-field p{font-weight:800;color:#ffc46b;margin:12px 0 6px;font-size:.85rem}
.cfg-opts{display:flex;flex-wrap:wrap;gap:8px}
.cfg-opt{padding:10px 14px;border-radius:99px;background:rgba(255,243,224,.08);border:1.5px solid transparent;font-weight:700}
.cfg-opt.on{border-color:#ff9a3c;background:rgba(255,154,60,.25)}
.cfg-act{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ===================== écran de jeu (téléphone) ===================== */
.gamescreen{position:fixed;inset:0;z-index:82;display:flex;flex-direction:column;color:#fbe9d2;
  background:radial-gradient(700px 500px at 50% 100%,rgba(255,140,50,.25),transparent 70%),linear-gradient(180deg,#160a10,#2a0f19);padding-top:env(safe-area-inset-top)}
.gs-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(26,13,18,.85)}
.gs-leave{font-size:2rem;line-height:1;width:38px;height:38px;border-radius:50%;color:#d1b79b}
.gs-top b{flex:1;font-family:var(--display);font-size:1.15rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-menu{width:40px;height:40px;border-radius:50%;font-size:1.2rem;background:rgba(255,243,224,.08)}
.gs-timer{--p:1;min-width:66px;text-align:center;font-weight:800;padding:6px 12px;border-radius:99px;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,rgba(255,154,60,.5) calc(var(--p)*100%),rgba(255,243,224,.1) 0)}
.gs-timer:empty{display:none}
.gs-timer.hurry{color:#ff9a9a;animation:hurry .6s infinite}
@keyframes hurry{50%{opacity:.55}}
.gs-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:14px 14px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.gs-body.gs-draw{padding:0;overflow:hidden}
.gs-loading{margin:auto;color:#d1b79b}
.gs-card{margin:auto 0;width:100%;max-width:480px;align-self:center;background:rgba(255,243,224,.07);border:1.5px solid rgba(255,196,107,.22);border-radius:24px;padding:20px;animation:stageIn .5s var(--ease)}
.gs-card.tight{padding:14px}
.gs-card.center{text-align:center}
.gs-card h2{font-family:var(--display);font-size:1.55rem;line-height:1.15;margin-bottom:4px}
.gs-big{font-size:3.4rem;line-height:1.1}
.gs-lead{color:#d1b79b;margin:6px 0 14px}
.gs-hint{color:#d1b79b;font-size:.92rem;margin:10px 0;overflow-wrap:anywhere}
.gs-count{font-family:var(--display);font-size:2.4rem;color:#ffc46b}
.gs-card textarea,.gs-card input[type=text]{width:100%;font:inherit;font-size:18px;color:#fff3e0;background:rgba(26,13,18,.6);border:1.5px solid rgba(255,243,224,.18);border-radius:14px;padding:13px 15px;margin:6px 0 12px;resize:none;color-scheme:dark}
.gs-card textarea:focus,.gs-card input[type=text]:focus{outline:none;border-color:#ff9a3c;box-shadow:0 0 0 4px rgba(255,154,60,.18)}
.gs-roster{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.gs-roster li{display:flex;align-items:center;gap:6px;padding-right:10px;border-radius:99px;background:rgba(255,243,224,.06)}
.gs-roster li.off{opacity:.5}
.gs-roster .dot{width:10px;height:10px;border-radius:50%;background:#7d6a64}
.gs-roster li.on .dot{background:#46e08a;box-shadow:0 0 8px #46e08a}
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;background:rgba(255,243,224,.1)}
.chip b{font-weight:800}
.chip-av{width:30px;height:30px;font-size:1.05rem;box-shadow:none}
.chip.off{opacity:.45}
.chip.done{background:rgba(70,224,138,.25)}
.chip.done::after{content:'✓';font-weight:800;color:#7ef0ad}
.gs-prompt{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#2a0f19}
.gs-prompt-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.gs-prompt-txt small{color:#ffc46b;font-weight:800}
.gs-prompt-txt b{font-size:1.15rem;line-height:1.2;overflow-wrap:anywhere}
.gs-done{padding:12px 16px;white-space:nowrap}
.gs-editor{flex:1;min-height:0}
.gs-pic{display:block;width:min(100%,calc(46vh * .75));aspect-ratio:3/4;height:auto;background:#fff;border-radius:12px;margin:8px auto}
.gs-sum{list-style:none;display:flex;flex-direction:column;gap:10px;margin:12px 0;max-height:38vh;overflow:auto}
.gs-sum li{padding:10px;border-radius:14px;background:rgba(255,243,224,.06)}
.gs-sum p{margin:6px 0 0;overflow-wrap:anywhere}
.gs-sum small{color:#ffc46b;font-weight:800;margin-right:4px}
.pop{animation:badgePop .6s var(--ease)}

/* ===================== page télé (#tv=…) et cinématique ===================== */
body.tv-mode{overflow:hidden;background:#160a10}
#tv{position:fixed;inset:0;z-index:70;color:#fbe9d2;display:flex;
  background:radial-gradient(900px 600px at 50% 110%,rgba(255,140,50,.3),transparent 70%),linear-gradient(180deg,#160a10,#2a0f19 60%,#3b1620)}
.tv-stage{flex:1;display:grid;place-items:center;padding:3vh 4vw;text-align:center;min-width:0}
.tv-center,.tv-play{display:flex;flex-direction:column;align-items:center;gap:1.4vh}
.tv-center h1,.tv-play h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,5.5rem);line-height:1.05}
.tv-center p,.tv-sub{font-size:clamp(1.2rem,2.6vw,2.2rem);color:#d1b79b}
.tv-ico{font-size:clamp(3rem,9vw,7rem);line-height:1}
.tv-ico.big{font-size:clamp(4rem,12vw,9rem)}
.tv-fox{width:min(40vh,360px)}
.tv-round{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffc46b;font-size:clamp(1rem,2vw,1.6rem)}
.tv-players{display:flex;flex-wrap:wrap;gap:1.2vh 1.2vw;justify-content:center;margin-top:2vh;max-width:90vw}
.tv-players .chip{font-size:clamp(1rem,2.2vw,1.8rem)}
.tv-players .chip-av{width:2.1em;height:2.1em;font-size:1.3em}
.tv-ringbox{margin:1vh 0}
.tv-ring{position:relative;width:min(24vh,220px);aspect-ratio:1;color:#ff9a3c}
.tv-ring.hurry{color:#ff5252;animation:hurry .6s infinite}
.tv-ring svg{width:100%;height:100%}
.tv-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(2rem,6vw,4.6rem);font-family:var(--display);color:#fff}
.tv-go{margin-top:3vh;font-size:clamp(1.2rem,2.4vw,2rem);padding:1.6vh 3vw;width:auto}
.cin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;width:100%;height:100%}
.cin-title{display:flex;flex-direction:column;align-items:center;gap:1vh}
.cin-title h1{font-family:var(--display);font-size:clamp(3rem,8vw,7rem)}
.cin-title p{font-size:clamp(1.4rem,3vw,2.6rem);color:#ffc46b}
.cin-who .chip{font-size:clamp(1.1rem,2.4vw,2rem)}
.cin-text{font-family:var(--display);font-size:clamp(2rem,5.2vw,4.6rem);line-height:1.15;max-width:88vw;min-height:3em;overflow-wrap:anywhere}
.cin-canvas{height:72vh;aspect-ratio:3/4;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cin-final{display:flex;gap:3vw;align-items:center;justify-content:center}
.cin-col{flex:1;max-width:38vw;padding:3vh 2vw;border-radius:24px;background:rgba(255,243,224,.08)}
.cin-col.end{background:rgba(255,154,60,.18)}
.cin-col small{color:#ffc46b;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(.9rem,1.6vw,1.3rem)}
.cin-col p{font-family:var(--display);font-size:clamp(1.6rem,3.8vw,3.4rem);line-height:1.15;margin-top:1vh;overflow-wrap:anywhere}
.cin-arrow{font-size:clamp(2rem,5vw,4rem);color:#ff9a3c}
.cin-bar{position:fixed;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.08)}
.cin-bar i{display:block;height:100%;width:0;background:#ff9a3c;transition:width .6s}

/* le bouton musique ne doit jamais recouvrir un écran plein (jeu, messagerie, cadeau…) : la musique continue, seul le bouton se cache */
body.noscroll .music-btn{display:none}


/* ===================== jeux : votes, équipes, Grinchs ===================== */
.gs-count.small{font-size:1rem}
.chip.big{font-size:1.25rem;padding:6px 18px 6px 6px}.chip.big .chip-av{width:46px;height:46px;font-size:1.6rem}
.chip.dead{opacity:.35;text-decoration:line-through}
.chip.grinch{background:rgba(200,34,43,.35)}
.g-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:12px 0}
.g-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:18px;background:rgba(255,243,224,.08);border:2.5px solid transparent;transition:transform .15s,border-color .15s,background .15s}
.g-choice:active{transform:scale(.96)}
.g-choice.sel{border-color:#ff9a3c;background:rgba(255,154,60,.28);transform:scale(1.04)}
.g-choice b{font-size:.95rem;overflow-wrap:anywhere}
.g-choice .av.lg{width:58px;height:58px;font-size:2rem}
.g-hostbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.g-quote{font-family:var(--display);font-size:1.5rem;line-height:1.25;margin:8px 0 14px;font-style:italic;overflow-wrap:anywhere}
.g-calm{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,243,224,.08);color:#ffc46b;font-weight:700}
.g-verdict{font-size:1.9rem}
.g-reveal{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px 0;animation:badgePop .7s var(--ease)}
.g-fooled{padding:4px 12px;border-radius:99px;background:rgba(200,34,43,.35);font-weight:800;font-size:.85rem}
.g-bars{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.g-bar{display:grid;grid-template-columns:minmax(110px,40%) 1fr 28px;align-items:center;gap:8px}
.g-bar i{display:block;height:14px;border-radius:99px;width:var(--w);min-width:6px;background:rgba(255,243,224,.35)}
.g-bar.ok i{background:#46e08a}
.g-board{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0;text-align:left}
.g-board li{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 6px;border-radius:14px;background:rgba(255,243,224,.06)}
.g-rank{width:34px;text-align:center;font-weight:800}
.g-score{margin-left:auto;font-family:var(--display);font-size:1.3rem;color:#ffc46b}
/* Time's Up */
.ts-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px;font-size:.85rem;color:#ffc46b}
.ts-rule.big{font-size:1.2rem;font-weight:800;color:#ffc46b;margin:6px 0 14px}
.ts-teams,.tv-teams{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ts-team{padding:10px;border-radius:16px;background:rgba(255,243,224,.07);display:flex;flex-direction:column;gap:2px;text-align:center}
.ts-team.t0{border:2px solid rgba(70,224,138,.45)}.ts-team.t1{border:2px solid rgba(255,138,160,.5)}
.ts-team small{color:#d1b79b;font-size:.75rem}.ts-score{font-family:var(--display);font-size:2.2rem;color:#ffc46b}
.ts-giver{flex:1;display:flex;flex-direction:column;gap:12px;justify-content:center}
.ts-card{padding:36px 14px;border-radius:26px;background:#fff3e0;color:#3a1a14;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.ts-word{font-family:var(--display);font-weight:800;font-size:clamp(2rem,9vw,3.4rem);line-height:1.1;overflow-wrap:anywhere}
.ts-btns{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.ts-btns .btn{padding:20px 10px;font-size:1.2rem}
.ts-found{background:linear-gradient(135deg,#46e08a,#1fa85d);color:#06220f;font-weight:800}
/* Grinchs */
.gr-role{padding:6px 0}.gr-emoji{font-size:4.6rem}
.gr-role.grinch h2{color:#ff6b6b}.gr-role.elf h2{color:#7ee0a4}
.gr-reveal{font-weight:800;font-size:1.2rem;margin-top:8px}.gr-reveal.grinch{color:#ff6b6b}.gr-reveal.elf{color:#7ee0a4}
.gr-roles{list-style:none;display:flex;flex-direction:column;gap:6px;margin:14px 0}.gr-roles li.grinch{color:#ff8a8a}.gr-roles li.elf{color:#9be8b4}
.gs-body.gr-night{background:#050210}.gs-card.night{background:rgba(20,18,50,.7);border-color:rgba(120,120,255,.3)}
/* télé : jeux de vote, équipes, nuit */
.tv-quote{font-family:var(--display);font-style:italic;font-size:clamp(2rem,5vw,4.4rem);line-height:1.15;max-width:88vw;overflow-wrap:anywhere}
.tv-bars{display:flex;flex-direction:column;gap:1.2vh;width:min(80vw,900px);margin:2vh 0}
.tv-bar{display:grid;grid-template-columns:minmax(180px,30%) 1fr 4ch;align-items:center;gap:2vw;font-size:clamp(1.1rem,2.4vw,2rem);opacity:0;animation:fadeUp .6s var(--ease) var(--d,0s) forwards}
.tv-bar i{display:block;height:2.4vh;border-radius:99px;background:rgba(255,243,224,.4);width:0;animation:grow 1s var(--ease) var(--d,0s) forwards}
.tv-bar.ok i{background:#46e08a}
@keyframes grow{to{width:var(--w)}}
.tv-reveal{display:flex;flex-direction:column;align-items:center;gap:1vh;opacity:0;animation:badgePop .8s var(--ease) var(--d,0s) forwards;font-size:clamp(1.2rem,2.4vw,2rem)}
.tv-reveal.show{opacity:1;animation:none;font-weight:800;font-size:clamp(1.8rem,4vw,3.4rem)}.tv-reveal.grinch{color:#ff6b6b}.tv-reveal.elf{color:#7ee0a4}
.tv-reveal small{color:#ffc46b;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tv-board{width:min(70vw,700px);margin-top:2vh;font-size:clamp(1rem,2vw,1.6rem)}
.tv-giver{display:flex;align-items:center;gap:1.4vw;font-size:clamp(1.4rem,3vw,2.6rem);margin:1vh 0}
.ts-tvrule{color:#ffc46b}
.tv-teams{width:min(80vw,900px);font-size:clamp(1rem,2vw,1.6rem)}.tv-teams .ts-score{font-size:clamp(2.4rem,6vw,5rem)}
body.tv-night #tv{background:radial-gradient(900px 600px at 50% 110%,rgba(80,60,200,.35),transparent 70%),linear-gradient(180deg,#02010a,#0a0724 60%,#120c3a)}
.tv-center.night h1{color:#c9c4ff}

.party-tv-hint{color:#d1b79b;font-size:.8rem;flex:1;min-width:200px}
.tv-exit{position:fixed;right:14px;top:10px;z-index:120;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:1.2rem;opacity:.12;transition:opacity .3s}
.tv-exit:hover{opacity:.9}

/* QR code de la télé */
.tv-join{position:fixed;right:28px;bottom:28px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 18px 14px;border-radius:22px;background:rgba(255,243,224,.08);border:1px solid rgba(255,243,224,.18);color:#fff3e0;text-align:center;max-width:280px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.tv-join b{font-size:1.1rem}
.tv-join small{color:#d1b79b;font-size:.78rem;line-height:1.3}
.tv-join-qr{width:min(220px,22vh);aspect-ratio:1;background:#fff;border-radius:12px;padding:6px;line-height:0}
.tv-join-qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
/* page « Qui es-tu ? » (téléphone) */
.join-overlay{align-items:flex-start}
.join-card{margin:auto;width:100%;max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0 30px}
.join-fox{width:110px;height:110px}
.join-card h2{font-family:var(--display,inherit);font-size:1.6rem;line-height:1.15}
.join-hint,.join-small{color:var(--muted,#d1b79b)}
.join-small{font-size:.85rem}
.join-list{width:100%;display:grid;gap:10px;margin-top:6px}
.join-who{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 16px;border-radius:18px;background:rgba(255,243,224,.08);border:1px solid rgba(255,243,224,.16);color:#fff3e0;font-size:1.15rem;text-align:left}
.join-who:active{background:rgba(255,122,47,.25)}
.join-who:disabled{opacity:.5}
.join-done{display:flex;flex-direction:column;align-items:center;gap:10px}
.join-mail{font-size:3rem}

/* menu secret (une seule personne le voit) */
.secret-menu{max-width:640px;margin:14px auto 0;padding:12px 16px;border-radius:16px;background:rgba(255,243,224,.05);border:1px dashed rgba(255,243,224,.28);color:#fff3e0}
.secret-menu summary{cursor:pointer;font-weight:700;list-style:none}
.secret-menu summary::-webkit-details-marker{display:none}
.secret-menu summary small{color:#d1b79b;font-weight:400}
.secret-menu label{display:block;margin:12px 0 8px;color:#e8d3b6}
.secret-row{display:flex;gap:8px}
.secret-row input{flex:1;min-width:0;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,243,224,.25);background:rgba(0,0,0,.25);color:#fff3e0}