:root{
  --bg:#0d0a14; --panel:#171224ee; --line:#2c2140; --text:#e8dbc5; --dim:#8a7d99;
  --amber:#ffb347; --gold:#c9a86a; --ghost:#9fe8dc; --danger:#ff5b4d;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --hud:46px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%; overscroll-behavior:none}
body{
  position:fixed; inset:0; width:100%;
  background:var(--bg); color:var(--text); overflow:hidden;
  font-family:Georgia,'Iowan Old Style','Times New Roman',serif;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation;
}
/* drifting candle-lit fog */
#fog{position:fixed; inset:-20%; pointer-events:none; z-index:0; opacity:.8;
  background:
    radial-gradient(38% 30% at 30% 72%, #ffb34712, transparent 70%),
    radial-gradient(45% 36% at 74% 24%, #9fe8dc0c, transparent 70%),
    radial-gradient(30% 26% at 60% 80%, #c9a86a10, transparent 70%);
  animation:fogdrift 26s ease-in-out infinite alternate}
@keyframes fogdrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, #05030a99 100%)}
/* top HUD */
#hud{position:fixed; top:0; left:0; right:0; height:calc(var(--hud) + var(--sat));
  padding:var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal));
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(#171224,#171224cc); border-bottom:1px solid var(--line); z-index:5}
#logo{font-size:15px; letter-spacing:.34em; color:var(--amber); white-space:nowrap; padding-left:.3em;
  text-shadow:0 0 14px #ffb34766; animation:flicker 4.4s infinite}
@keyframes flicker{0%,100%{opacity:1}86%{opacity:1}88%{opacity:.72}90%{opacity:.96}93%{opacity:.8}95%{opacity:1}}
#chips{display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
#chips::-webkit-scrollbar{display:none}
.chip{display:flex; align-items:center; gap:5px; padding:3px 9px; border:1px solid var(--line); border-radius:20px;
  font-size:11px; white-space:nowrap; background:#0d0a14}
.chip .sg{font-size:13px}
.chip.me{border-color:#5a4a2f}
.chip.dead{opacity:.4}
.chip .sc{color:var(--gold); font-size:10px; letter-spacing:.06em}
#status{font-size:10px; color:var(--dim); white-space:nowrap; display:flex; align-items:center; gap:6px}
#statdot{width:8px; height:8px; border-radius:50%; background:#f43; box-shadow:0 0 8px #f43; flex:none}
#statdot.on{background:#ffb347; box-shadow:0 0 8px #ffb347}
button{
  font-family:inherit; font-size:13px; letter-spacing:.14em; color:var(--amber); background:#241a30;
  border:1px solid #4a3860; border-radius:8px; padding:10px 18px; cursor:pointer; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button:active{transform:translateY(1px)}
button:hover:not(:disabled){background:#31234a; box-shadow:0 0 16px #ffb34733}
button:disabled{opacity:.35; cursor:default}
button.big{font-size:15px; padding:14px 34px}
#copybtn{font-size:10px; padding:6px 10px}
/* stage + scenes */
#stage{position:fixed; inset:0; z-index:2;
  padding:calc(var(--hud) + var(--sat) + 10px) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
  display:flex; align-items:stretch; justify-content:center}
.scene{width:100%; max-width:560px; display:flex; flex-direction:column; gap:12px; min-height:0}
#bellhead{display:flex; align-items:center; justify-content:space-between; gap:12px}
#belltitle{font-size:26px; letter-spacing:.3em; color:var(--gold); text-shadow:0 0 18px #c9a86a44}
#ring{width:64px; height:64px; border-radius:50%; flex:none;
  background:conic-gradient(var(--amber) 360deg, #2c2140 0deg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 22px #ffb34722}
#ring::before{content:""; position:absolute; width:52px; height:52px; border-radius:50%; background:var(--bg)}
#ring.urgent{animation:pulse .5s infinite alternate}
@keyframes pulse{from{box-shadow:0 0 14px #ff5b4d33}to{box-shadow:0 0 30px #ff5b4d88}}
#ringnum{position:relative; font-size:22px; color:var(--text)}
.notice{background:#241a30dd; border:1px solid #4a3860; border-radius:10px; padding:11px 14px;
  font-size:13.5px; line-height:1.5; text-align:center; color:var(--ghost)}
.notice b{color:var(--amber)}
.notice.dim{color:var(--dim); border-color:var(--line); background:#171224aa; font-size:12px}
#roomcards,#revealcards{display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; justify-content:center}
.room{display:flex; align-items:center; gap:14px; text-transform:none; letter-spacing:.04em;
  background:#171224; border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  font-size:19px; color:var(--text); position:relative; overflow:hidden}
.room .ricon{font-size:30px; flex:none; width:40px; text-align:center}
.room .rname{flex:1; text-align:left}
.room .rpick{font-size:11px; color:var(--amber); letter-spacing:.14em; opacity:0; text-transform:uppercase}
.room.picked{border-color:var(--amber); background:#241a30; box-shadow:0 0 24px #ffb34733, inset 0 0 30px #ffb3470d}
.room.picked .rpick{opacity:1}
.room:disabled{opacity:.55}
/* reveal cards */
.room.rv{cursor:default; flex-direction:column; align-items:flex-start; gap:8px; padding:13px 16px}
.room.rv .rname{font-size:16px; color:var(--dim)}
.room.rv .ricon{position:absolute; right:12px; top:10px; width:auto}
.room.rv.haunted{border-color:var(--danger); background:#2a1220; animation:hauntflash .9s ease-out;
  box-shadow:0 0 34px #ff5b4d44, inset 0 0 40px #ff5b4d14}
@keyframes hauntflash{0%{background:#5a1a2a; box-shadow:0 0 60px #ff5b4dcc}100%{background:#2a1220}}
.occs{display:flex; flex-wrap:wrap; gap:6px}
.occ{font-size:12.5px; background:#0d0a14; border:1px solid var(--line); border-radius:16px; padding:3px 10px}
.occ.hit{border-color:var(--danger); color:#ffb4a8}
.occ.gone{opacity:.5; text-decoration:line-through}
.occ.none{color:var(--dim); border-style:dashed}
#hauntline{font-size:20px; text-align:center; color:var(--ghost); text-shadow:0 0 18px #9fe8dc44; padding-top:6px}
#hauntline b{color:var(--danger)}
/* overlays */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);
  background:#0d0a14c9; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.overlay.soft{background:#0d0a1488; z-index:9}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 28px;
  display:flex; flex-direction:column; gap:15px; align-items:center; min-width:300px; max-width:100%;
  max-height:100%; overflow-y:auto; box-shadow:0 0 50px #ffb34714}
.title{font-size:34px; letter-spacing:.38em; color:var(--amber); padding-left:.38em;
  text-shadow:0 0 22px #ffb34788, 0 0 70px #ffb34733; animation:flicker 5.2s infinite}
.sub{font-size:11px; color:var(--dim); letter-spacing:.2em; text-transform:uppercase}
input#nick{
  font-family:inherit; font-size:16px; text-align:center; letter-spacing:.06em; color:var(--text);
  background:#0d0a14; border:1px solid #4a3860; border-radius:8px; padding:12px 14px; width:230px; outline:none;
}
input#nick:focus{border-color:var(--amber); box-shadow:0 0 14px #ffb34733}
#roster{display:flex; flex-direction:column; gap:6px; width:100%; max-height:32vh; overflow-y:auto}
.rrow{display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 12px; background:#0d0a14;
  border:1px solid var(--line); border-radius:8px}
.rrow .sg{font-size:17px}
.rrow .wins{margin-left:auto; font-size:11px; color:var(--gold)}
.rrow .hostb{font-size:9px; color:var(--ghost); letter-spacing:.16em; border:1px solid #2c4a44;
  border-radius:10px; padding:2px 7px}
.legend{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.legend span{font-size:12px; background:#0d0a14; border:1px solid var(--line); border-radius:16px; padding:5px 11px}
.hint{font-size:11px; color:var(--dim); text-align:center; line-height:1.85}
#bigmsg{font-size:min(40px,8.4vw); letter-spacing:.16em; text-shadow:0 0 30px currentColor; text-align:center}
#submsg{font-size:13.5px; color:var(--dim); letter-spacing:.08em; text-align:center; line-height:1.6}
.hidden{display:none !important}
/* boot splash: html.boot from first paint; main.ts drops it once the gate/auto-join decision lands */
html.boot #ovJoin{display:none !important}
html:not(.boot) #ovSplash{display:none !important}
html.boot .soc-joinchip{display:none !important}
#toast{position:fixed; bottom:calc(18px + var(--sab)); left:50%; transform:translateX(-50%);
  background:#241a30; border:1px solid #4a3860; max-width:90vw;
  color:var(--amber); font-size:12px; padding:9px 16px; border-radius:20px; z-index:20; letter-spacing:.04em;
  opacity:0; transition:opacity .3s; pointer-events:none; text-align:center}
@media (max-width:640px){ .title{font-size:26px} #logo{display:none} }
@media (max-height:620px){ .room{padding:10px 16px; font-size:16px} .room .ricon{font-size:22px} }

/* social-kit chrome adopts the game's palette */
:root{
  --soc-bg:#171224; --soc-fg:var(--text); --soc-dim:var(--dim);
  --soc-line:var(--line); --soc-accent:var(--amber);
}