/* Ho Ho Party : socle visuel partagé (télé, téléphone, admin) */
:root{
  --night:#0A1B19; --spruce:#123D34; --pine:#1B5E4B; --snow:#F6F1E7; --gold:#E8B84A; --berry:#D6404A;
  --mute:#B6CCC3; --paper:#FBF4E4; --paper-ink:#1E2A26; --leaf:#3FBF8F; --sky:#6FA8FF;
  --f-display:'Mountains of Christmas','Fredoka',cursive;
  --f-ui:'Fredoka',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(27,94,75,.75), transparent 70%),
    radial-gradient(700px 480px at 100% 100%, rgba(214,64,74,.14), transparent 70%),
    linear-gradient(180deg,#0A1B19,#0E2823 60%,#0A1B19);
  background-color:var(--night);
  color:var(--snow);
  font:500 16px/1.4 var(--f-body);
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3,p{margin:0}
svg{display:block}
[hidden]{display:none!important}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

.garland{position:fixed;inset:0 0 auto 0;height:calc(34px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);pointer-events:none;z-index:80}
.garland::before{content:"";position:absolute;left:0;right:0;top:calc(8px + env(safe-area-inset-top,0px));height:2px;background:#04100c}
.bulb{position:absolute;top:calc(9px + env(safe-area-inset-top,0px));width:11px;height:15px;margin-left:-5px;border-radius:50% 50% 55% 55%;background:var(--c);box-shadow:0 0 12px 2px var(--c);animation:twinkle 2.6s ease-in-out infinite alternate}
.bulb::before{content:"";position:absolute;left:3px;top:-5px;width:5px;height:6px;background:#04100c;border-radius:1px}
@keyframes twinkle{from{opacity:.55;box-shadow:0 0 6px 1px var(--c)}to{opacity:1;box-shadow:0 0 14px 3px var(--c)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border-radius:999px;border:2px solid transparent;font:600 18px/1 var(--f-ui);transition:transform .12s ease, filter .12s ease;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active:not(:disabled){transform:translateY(2px)}
.btn svg{width:22px;height:22px;flex:none}
.btn.primary{background:var(--gold);color:#2A1A00;box-shadow:0 4px 0 #8A6508,0 10px 18px rgba(0,0,0,.3)}
.btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.btn.primary:disabled{filter:grayscale(.7) brightness(.7)}
.btn.ghost{background:transparent;border-color:currentColor}
.btn.ghost:disabled{opacity:.45}
.btn.danger{background:var(--berry);color:#fff;box-shadow:0 4px 0 #7d1820}
.btn.big{min-height:60px;padding:14px 30px;font-size:21px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.icon-btn:hover:not(:disabled){background:rgba(255,255,255,.16)}
.icon-btn:disabled{opacity:.35}
.icon-btn svg{width:22px;height:22px}

/* pions / avatars */
.tok{--s:40px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:#26443c;border:3px solid var(--pc,#999);color:var(--snow);font:600 calc(var(--s)*.46)/1 var(--f-ui)}
.tok img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.tok .ph-icon{display:grid;place-items:center;width:100%;height:100%;opacity:.8}
.tok .ph-icon svg{width:56%;height:56%}
.tok .hat{position:absolute;width:74%;left:-12%;top:-36%;transform:rotate(-14deg);pointer-events:none}
.tok.nohat .hat{display:none}
.tok.sm{--s:34px}
.tok.md{--s:52px}
.tok.lg{--s:68px}
.tok.xl{--s:96px}

#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 60px);transform:translate(-50%,-8px);max-width:min(92vw,560px);padding:10px 20px;border-radius:999px;background:rgba(10,27,25,.95);border:2px solid var(--gold);font:600 18px/1.2 var(--f-ui);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:85}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.bulb{animation:none}}