:root { --bg:#07080f; --card:#16121a; --line:#3a2c2a; --text:#f1ecdf; --muted:#9aa3bd; --accent:#ffb347; --red:#e5484d; --violet:#8b5cf6; --green:#46c37b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:'Noto Sans Thai', system-ui, sans-serif; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
#game { position:fixed; inset:0; }
#game canvas { display:block; width:100%; height:100%; }
[hidden] { display:none !important; }
button { font:inherit; color:inherit; cursor:pointer; }
.btn { background:var(--accent); color:#2a1700; border:0; border-radius:12px; padding:9px 16px; font-weight:800; }
.btn.big { padding:12px 22px; font-size:17px; }
.btn.ghost { background:transparent; color:var(--text); border:1.5px solid var(--line); }
.btn:disabled { opacity:.45; cursor:default; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,7,15,.62); z-index:20; padding:12px; padding-top:max(12px, env(safe-area-inset-top)); }
.card { background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:16px; width:min(760px, 100%); max-height:100%; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.5); }
h1, h2, h3 { font-family:'Kanit', 'Noto Sans Thai', sans-serif; margin:0; }
h3 { font-size:15px; margin:4px 0 8px; color:var(--accent); }
h3 small { color:var(--muted); font-weight:400; font-family:'Noto Sans Thai'; }
/* lobby: a glass panel over the 3D pier */
.lobby-screen { position:fixed; inset:0; z-index:20; display:flex; justify-content:flex-end; align-items:stretch; padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); pointer-events:none; }
.lobby-screen[hidden] { display:none; }
.lb-brand { position:absolute; top:max(16px, env(safe-area-inset-top)); left:max(18px, env(safe-area-inset-left)); display:flex; align-items:center; gap:12px; text-shadow:0 2px 14px rgba(0,0,0,.8); }
.lb-brand .logo { font-size:46px; filter:drop-shadow(0 0 16px #ff7a3a); animation:sway 4s ease-in-out infinite; transform-origin:50% 0; }
@keyframes sway { 50% { transform:rotate(6deg); } }
.lb-brand h1 { margin:0; font-family:Kanit, sans-serif; font-size:34px; line-height:1.05; color:#ffe3b0; letter-spacing:.5px; }
.lb-brand small { color:#c9c2e8; font-size:14px; }
.lb-panel { pointer-events:auto; width:min(440px, 100%); max-height:100%; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, rgba(34,22,18,.84), rgba(16,11,10,.9)); border:1px solid rgba(255,190,120,.22); border-radius:20px; padding:16px; box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lb-panel section h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:#ffcf8a; font-size:15px; }
.lb-code { display:flex; align-items:center; justify-content:space-between; gap:10px; background:radial-gradient(120% 140% at 0% 0%, rgba(255,140,60,.18), rgba(255,140,60,0) 60%), #140c08; border:1px solid rgba(255,179,71,.35); border-radius:14px; padding:10px 12px; }
.lb-code small { display:block; color:var(--muted); font-size:12px; }
.lb-code code { font-family:Kanit, monospace; font-size:34px; font-weight:800; letter-spacing:6px; color:#ffd88f; text-shadow:0 0 18px rgba(255,160,60,.45); line-height:1.05; }
.btn.sm { padding:7px 12px; font-size:13px; border-radius:10px; white-space:nowrap; }
.pill { font-size:12px; font-weight:700; color:#1d1200; background:#ffb347; border-radius:999px; padding:1px 9px; }
.slots { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
.slots li { display:flex; align-items:center; gap:8px; min-height:38px; padding:5px 9px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); font-size:14px; overflow:hidden; }
.slots li .av { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:15px; background:radial-gradient(circle at 50% 35%, #3a4a86, #1b2348); box-shadow:0 0 0 2px rgba(201,168,104,.55); }
.slots li .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.slots li .tag { margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.slots li.me { border-color:rgba(255,216,74,.7); background:rgba(255,216,74,.08); }
.slots li.host .tag { color:#ffcf8a; }
.slots li.off { opacity:.5; }
.slots li.empty { border-style:dashed; color:#5d6690; background:transparent; justify-content:center; font-size:13px; }
.set-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
.set-grid label { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:7px; align-items:center; padding:7px 9px; border-radius:12px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); font-size:12.5px; color:var(--muted); }
.set-grid label i { grid-row:1 / 3; font-style:normal; font-size:20px; }
.set-grid label em { font-style:normal; opacity:.7; }
.set-grid select { appearance:none; -webkit-appearance:none; width:100%; margin-top:2px; background:#0b0f22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffb347'/%3E%3C/svg%3E") no-repeat right 9px center; color:var(--text); border:1px solid #2d3660; border-radius:8px; padding:5px 24px 5px 8px; font:700 14px 'Noto Sans Thai', sans-serif; }
.set-grid select:disabled { opacity:1; color:#cfd3e6; background-image:none; border-color:transparent; background-color:rgba(0,0,0,.2); }
.set-grid label.mine { border-color:rgba(139,92,246,.3); }
.rules { font-size:13px; color:#c3c8dc; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 12px; }
.rules summary { cursor:pointer; font-weight:800; color:#ffcf8a; list-style:none; }
.rules summary::-webkit-details-marker { display:none; }
.rules summary small { color:var(--muted); font-weight:400; margin-left:6px; }
.rules[open] summary small { display:none; }
.rules ul { list-style:none; margin:8px 0 2px; padding:0; display:grid; gap:6px; }
.rules li { display:flex; gap:8px; line-height:1.5; }
.rules li i { font-style:normal; }
.rules b { color:var(--text); }
.lb-foot { display:flex; align-items:center; gap:10px; margin-top:auto; }
.lb-foot span { flex:1; text-align:center; color:var(--muted); font-size:13px; }
#btnStart { min-width:132px; }
#btnStart.ready { background:linear-gradient(180deg, #ffc56b, #ff9f2e); box-shadow:0 0 0 0 rgba(255,170,70,.6); animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 12px rgba(255,170,70,0); } 100% { box-shadow:0 0 0 0 rgba(255,170,70,0); } }
#btnStart:disabled { background:#3a3550; color:#a9a3c4; }
/* phones */
@media (max-width:620px) and (orientation:portrait) {
  .lobby-screen { align-items:flex-end; justify-content:center; padding-top:0; }
  .lb-brand { top:max(12px, env(safe-area-inset-top)); left:14px; } .lb-brand .logo { font-size:34px; } .lb-brand h1 { font-size:26px; } .lb-brand small { font-size:12px; }
  .lb-panel { width:100%; max-height:58vh; border-radius:20px 20px 16px 16px; padding:12px; gap:10px; }
  .lb-code code { font-size:28px; letter-spacing:4px; }
}
@media (max-height:500px) {
  .lb-brand { top:10px; } .lb-brand .logo { font-size:30px; } .lb-brand h1 { font-size:22px; } .lb-brand small { display:none; }
  .lb-panel { width:min(420px, 58vw); padding:10px; gap:8px; }
  .lb-code { padding:6px 10px; } .lb-code code { font-size:24px; }
  .slots li { min-height:32px; padding:3px 8px; font-size:13px; }
  .set-grid label { padding:4px 8px; }
}
#voiceBar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 0; padding:6px 8px; border-radius:12px; background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.35); }
#voiceBar[hidden] { display:none; }
#vState { flex:1; min-width:140px; font-size:12.5px; color:#cfc6f5; }
.vbtn { border:1px solid #3a3f6a; background:#141a35; color:var(--text); border-radius:10px; min-width:40px; height:36px; padding:0 10px; font:700 13px 'Noto Sans Thai', sans-serif; }
.vbtn.off { background:#3a1520; border-color:#7a2b3a; }
.vbtn.ptt { background:#2c2160; border-color:#8b5cf6; touch-action:none; user-select:none; -webkit-user-select:none; }
.vbtn.ptt.on { background:#8b5cf6; color:#fff; box-shadow:0 0 14px rgba(139,92,246,.7); }
.end-scroll { overflow:auto; max-height:52vh; }
#endTable { width:100%; border-collapse:collapse; font-size:14px; }
#endTable th, #endTable td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
#endTable tr.imp td:nth-child(3) { color:var(--red); font-weight:800; }
#endTable tr.me { background:rgba(255,179,71,.08); }
#toast { position:fixed; left:50%; bottom:120px; transform:translateX(-50%) translateY(20px); background:rgba(10,13,26,.92); border:1px solid var(--line); padding:8px 16px; border-radius:12px; opacity:0; transition:.25s; z-index:50; pointer-events:none; max-width:90vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%); }
#voiceBar.listen { background:rgba(70,80,120,.35); border-color:rgba(160,175,255,.45); }

/* ================= หมู่บ้านผีปอบ ================= */
:root { --fire:#ff8a3c; --pob:#e0383e; --seer:#a78bfa; --doc:#5cc98a; --hunt:#d9a441; }
#vignette { position:fixed; inset:0; pointer-events:none; z-index:2; background:radial-gradient(120% 90% at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
#loading { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#07080f; transition:opacity .6s; }
#loading.done { opacity:0; pointer-events:none; }
#loading .ld-fire { font-size:64px; animation:flick 0.9s ease-in-out infinite alternate; filter:drop-shadow(0 0 24px #ff7a2a); }
#loading p { color:#ffcf8a; font-family:Kanit; }
@keyframes flick { to { transform:scale(1.08) rotate(-3deg); filter:drop-shadow(0 0 40px #ff9a3a); } }
.plan { margin:8px 0 0; font-size:12.5px; color:#e8c9a0; background:rgba(255,140,60,.08); border:1px dashed rgba(255,160,80,.35); border-radius:10px; padding:6px 10px; }
#charGrid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.ch { position:relative; border:1.5px solid rgba(255,255,255,.1); border-radius:12px; background:linear-gradient(180deg, rgba(255,160,80,.12), rgba(0,0,0,.25)); padding:0 0 4px; overflow:hidden; text-align:center; font-size:11.5px; color:#e9dcc8; }
.ch img, .ch .ph { display:block; width:100%; aspect-ratio:5/6; object-fit:cover; background:radial-gradient(circle at 50% 30%, #3a2618, #120a06); }
.ch .ph { display:grid; place-items:center; font-size:28px; }
.ch span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px; }
.ch.mine { border-color:#ffd27a; box-shadow:0 0 0 2px rgba(255,210,122,.35), 0 0 18px rgba(255,160,60,.35); }
.ch em { position:absolute; top:3px; right:3px; font-style:normal; font-size:10px; background:rgba(0,0,0,.6); border-radius:8px; padding:0 5px; color:#ffd88f; }
.slots li .av { background:radial-gradient(circle at 50% 35%, #6a4020, #2a160a); box-shadow:0 0 0 2px rgba(255,170,90,.5); }

/* HUD */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
#hud > * { pointer-events:auto; }
#topBar { position:absolute; top:max(10px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right)); display:flex; align-items:center; gap:8px; pointer-events:none; }
#topBar > * { pointer-events:auto; }
#phasePill { flex:1; min-width:0; display:flex; flex-direction:column; padding:7px 14px; border-radius:16px; background:linear-gradient(180deg, rgba(20,14,12,.82), rgba(10,8,8,.78)); border:1px solid rgba(255,170,90,.3); box-shadow:0 8px 24px rgba(0,0,0,.4); }
#phaseName { font-family:Kanit; font-size:18px; color:#ffe0b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#phaseSub { font-size:12.5px; color:#cdb9a0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.day #phasePill { background:linear-gradient(180deg, rgba(255,248,230,.88), rgba(250,236,210,.82)); border-color:rgba(160,110,50,.35); }
body.day #phaseName { color:#5a3008; } body.day #phaseSub { color:#7a5a3a; }
#timer { position:relative; width:52px; height:52px; flex:none; }
#timer svg { width:100%; height:100%; transform:rotate(-90deg); }
#timer .trk { fill:rgba(10,8,8,.75); stroke:rgba(255,255,255,.12); stroke-width:3; }
#timer .arc { fill:none; stroke:var(--fire); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:97.4; transition:stroke-dashoffset .25s linear; }
#timer.low .arc { stroke:#ff4a4a; }
#timerTxt { position:absolute; inset:0; display:grid; place-items:center; font:800 16px Kanit; color:#fff2dc; }
#roleChip { flex:none; display:flex; align-items:center; gap:6px; height:52px; padding:0 14px; border-radius:16px; border:1px solid rgba(255,170,90,.35); background:rgba(12,9,8,.82); font-weight:800; font-size:14px; }
#roleChip i { font-style:normal; font-size:22px; }
#roleChip.pob { border-color:rgba(224,56,62,.7); box-shadow:0 0 16px rgba(224,56,62,.3); }
#roleChip.dead { opacity:.7; }
#banner { position:absolute; left:50%; top:24%; transform:translate(-50%, -50%); text-align:center; pointer-events:none; width:min(92vw, 720px); animation:bannerIn .9s ease both; }
#bannerBig { font:800 clamp(28px, 6vw, 54px) Kanit; color:#fff0d6; text-shadow:0 4px 30px rgba(0,0,0,.9), 0 0 40px rgba(255,120,40,.45); line-height:1.15; }
#bannerSmall { margin-top:8px; font-size:clamp(15px, 2.6vw, 20px); color:#ffd8a8; text-shadow:0 2px 12px rgba(0,0,0,.95); }
#banner.blood #bannerBig { color:#ffd0d0; text-shadow:0 4px 30px rgba(0,0,0,.9), 0 0 50px rgba(220,30,40,.8); }
@keyframes bannerIn { from { opacity:0; transform:translate(-50%, -40%) scale(.92); letter-spacing:6px; } to { opacity:1; transform:translate(-50%, -50%); } }
.panel { position:absolute; left:50%; bottom:max(10px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(760px, calc(100vw - 20px)); max-height:min(56vh, 520px); overflow:auto; overscroll-behavior:contain; touch-action:pan-y; padding:12px; border-radius:18px;
  background:linear-gradient(180deg, rgba(26,18,14,.9), rgba(12,9,8,.94)); border:1px solid rgba(255,170,90,.28); box-shadow:0 20px 60px rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.day .panel { background:linear-gradient(180deg, rgba(40,28,18,.86), rgba(22,15,10,.92)); }
.pm-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.pm-head b { font:800 19px Kanit; color:#ffdca8; }
.pm-head span { font-size:13px; color:#cdb9a0; }
.targets { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:7px; }
.tg { position:relative; display:flex; align-items:center; gap:7px; min-height:50px; padding:5px 8px; border-radius:13px; border:1.5px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); text-align:left; font-size:13.5px; font-weight:700; }
.tg img, .tg .ph { width:34px; height:40px; border-radius:8px; object-fit:cover; flex:none; background:#2a160a; display:grid; place-items:center; }
.tg .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.tg .votes { position:absolute; top:-7px; right:-5px; display:flex; gap:2px; }
.tg .votes i { font-style:normal; font-size:10.5px; background:#e0383e; color:#fff; border-radius:8px; padding:0 5px; box-shadow:0 2px 6px rgba(0,0,0,.4); white-space:nowrap; max-width:84px; overflow:hidden; text-overflow:ellipsis; }
.tg .cnt { font:800 15px Kanit; color:#ffd27a; }
.tg:hover:not(:disabled) { border-color:rgba(255,200,120,.55); }
.tg.picked { border-color:#ff5a3a; background:rgba(255,90,58,.16); box-shadow:0 0 16px rgba(255,90,58,.35); }
.tg.doc.picked { border-color:var(--doc); background:rgba(92,201,138,.16); box-shadow:0 0 16px rgba(92,201,138,.35); }
.tg.seer.picked { border-color:var(--seer); background:rgba(167,139,250,.16); }
.tg:disabled { opacity:.38; cursor:default; }
.tg.mate { border-color:rgba(224,56,62,.45); }
#nmResult { margin-top:10px; padding:12px; border-radius:14px; text-align:center; font:800 20px Kanit; animation:nmPop .5s both; }
@keyframes nmPop { from { opacity:0; transform:translateY(8px) scale(.94); } to { opacity:1; transform:none; } }
#nmResult.pob { background:rgba(224,56,62,.16); border:1.5px solid rgba(224,56,62,.6); color:#ffb8b8; }
#nmResult.ok { background:rgba(92,201,138,.12); border:1.5px solid rgba(92,201,138,.5); color:#bff0cf; }
#pobChat { margin-top:10px; }
#pobLog, #chatLog { max-height:120px; overflow:auto; font-size:13.5px; display:flex; flex-direction:column; gap:3px; margin-bottom:6px; overscroll-behavior:contain; }
#pobLog:empty, #chatLog:empty { display:none; }
#pobLog div, #chatLog div { padding:3px 9px; border-radius:10px; background:rgba(255,255,255,.05); }
#pobLog b { color:#ff8a8a; } #chatLog b { color:#ffcf8a; }
#chatLog div.me { background:rgba(255,200,100,.1); }
form { display:flex; gap:6px; flex:1; min-width:180px; }
form input { flex:1; min-width:0; background:#0e0a08; color:var(--text); border:1px solid #4a3426; border-radius:10px; padding:8px 10px; font:500 14px 'Noto Sans Thai'; }
.dp-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#btnReady.on { background:var(--green); color:#062010; border-color:transparent; }
#voiceBar { margin:0 0 8px; background:rgba(255,140,60,.08); border-color:rgba(255,160,80,.35); }
#voteTargets { margin-bottom:8px; }
#ghostNote { position:absolute; left:50%; top:calc(max(10px, env(safe-area-inset-top)) + 64px); transform:translateX(-50%); font-size:13px; color:#cfe0ff; background:rgba(30,40,70,.75); border:1px solid rgba(160,190,255,.35); border-radius:12px; padding:5px 12px; white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis; }

/* night: eyes closed */
#eyes { position:fixed; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 55%, rgba(4,5,12,.72), rgba(2,2,6,.96)); animation:fadeIn 1.2s ease both; }
#eyes .moon { font-size:54px; filter:drop-shadow(0 0 22px rgba(160,180,255,.6)); animation:sway 5s ease-in-out infinite; }
#eyes h2 { font:800 clamp(26px, 5vw, 42px) Kanit; color:#d8e0ff; margin:6px 0; text-shadow:0 0 24px rgba(120,140,255,.4); }
#eyes p { color:#aab4dc; font-size:16px; margin:0 0 12px; }
#eyesSteps { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
#eyesSteps span { font-size:13px; color:#8a92b8; border:1px solid rgba(140,150,200,.25); border-radius:999px; padding:3px 11px; }
#eyesSteps span.now { color:#fff; border-color:rgba(255,120,120,.7); background:rgba(224,56,62,.18); }
#eyesSteps span.done { opacity:.45; text-decoration:line-through; }
@keyframes fadeIn { from { opacity:0; } }

/* role card */
.role-card { width:min(380px, 92vw); text-align:center; border-radius:22px; padding:22px 18px; background:radial-gradient(120% 80% at 50% 0%, rgba(255,140,60,.25), rgba(0,0,0,0) 60%), linear-gradient(180deg, #24160f, #0f0a08); border:2px solid #c9905a; box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,120,40,.25); animation:cardIn .8s cubic-bezier(.2,.9,.3,1.2) both; }
.role-card.pob { background:radial-gradient(120% 80% at 50% 0%, rgba(220,30,40,.35), rgba(0,0,0,0) 60%), linear-gradient(180deg, #250a0c, #0d0506); border-color:#e0383e; box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(224,56,62,.4); }
@keyframes cardIn { from { opacity:0; transform:rotateY(80deg) scale(.8); } }
.rc-icon { font-size:76px; line-height:1; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.role-card small { color:#cdb9a0; }
.role-card h2 { font:800 34px Kanit; color:#ffe0b0; margin:2px 0 8px; }
.role-card.pob h2 { color:#ffb0b0; }
.role-card p { color:#e9dcc8; line-height:1.55; margin:0 0 10px; font-size:15px; }
#rcMates { font-size:14px; color:#ffb0b0; }
#rcLog { font-size:13.5px; color:#d8ccff; text-align:left; }
#rcLog div { padding:3px 0; }

/* end */
.card.end { background:linear-gradient(180deg, #1e1410, #0d0907); border-color:#5a3c28; }
.end-hero { text-align:center; margin-bottom:8px; }
#endIcon { font-size:58px; }
#endTitle { font:800 30px Kanit; color:#ffe0b0; }
#endReason { color:#cdb9a0; margin:4px 0 0; }
.end-scroll { overflow:auto; max-height:40vh; }
#endTable td .who { display:flex; align-items:center; gap:7px; }
#endTable td img { width:28px; height:32px; border-radius:6px; object-fit:cover; background:#2a160a; }
#endTable tr.pob td:nth-child(2) { color:#ff8a8a; font-weight:800; }
#endTable tr.dead td { opacity:.7; }
#endLog { margin:0 0 10px; padding-left:22px; font-size:13.5px; color:#e0d2bd; line-height:1.7; max-height:22vh; overflow:auto; }
body.touch #toast { bottom:46%; }

/* phones */
@media (max-width:620px) and (orientation:portrait) {
  #charGrid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .ch span { font-size:10.5px; }
  #phaseName { font-size:16px; } #roleChip { padding:0 10px; } #roleChip span { display:none; }
  .panel { max-height:50vh; padding:10px; }
  .targets { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #banner { top:30%; }
}
@media (max-height:500px) {
  #charGrid { grid-template-columns:repeat(8, minmax(0,1fr)); } .ch span { display:none; }
  #topBar { top:6px; } #phasePill { padding:4px 10px; } #timer { width:42px; height:42px; } #roleChip { height:42px; }
  .panel { left:auto; right:max(8px, env(safe-area-inset-right)); transform:none; width:min(470px, 56vw); max-height:calc(100vh - 70px); bottom:6px; padding:8px; }
  .targets { grid-template-columns:repeat(3, minmax(0,1fr)); } .tg { min-height:40px; } .tg img, .tg .ph { width:26px; height:30px; }
  #chatLog, #pobLog { max-height:70px; }
  #banner { top:40%; left:30%; width:56vw; }
  #eyes .moon { font-size:36px; } #eyes p { font-size:14px; }
  .role-card { padding:12px; } .rc-icon { font-size:48px; } .role-card h2 { font-size:26px; }
}
/* collapsible chat — phones only (the button is hidden on desktop) */
.pm-mini { display:none; margin-left:auto; width:34px; height:30px; border-radius:10px; border:1px solid rgba(255,190,120,.35); background:rgba(255,255,255,.06); color:#ffdca8; font-size:16px; line-height:1; position:relative; }
.pm-mini.unread::after { content:''; position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:#ff6a3a; box-shadow:0 0 8px rgba(255,106,58,.8); }
@media (max-height:500px), (max-width:620px) and (orientation:portrait) {
  .pm-mini { display:block; }
  #dayPanel .pm-head { align-items:center; margin-bottom:6px; }
  #dayPanel.mini #chatLog, #dayPanel.mini #vState, #dayPanel.mini #dpHint { display:none; }
  #dayPanel.mini #voiceBar { margin:4px 0 0; padding:4px 6px; }
  #dayPanel.mini .pm-head { margin-bottom:4px; }
}
@media (max-height:500px) {
  /* landscape phone: a slimmer right-docked panel, so most of the circle stays visible */
  .panel { width:min(400px, 46vw); top:auto; }
  #dayPanel .pm-head b { font-size:16px; } #dayPanel .pm-head span { font-size:12px; }
  #voiceBar { gap:4px; padding:4px 6px; } #vState { min-width:0; flex-basis:100%; font-size:11.5px; } .vbtn { height:32px; }
  #chatLog { max-height:84px; font-size:12.5px; }
  .dp-row { gap:6px; } .dp-row .btn.sm { padding:0 10px; }
}
@media (max-width:620px) and (orientation:portrait) {
  /* portrait phone: shorter panel */
  #dayPanel { max-height:42vh; }
  #chatLog { max-height:72px; }
}

/* ---------------- cinematics / VFX overlays (fx.js) — never take input ---------------- */
#fxLayer { position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden; }
#fxLayer .fx { position:absolute; inset:0; pointer-events:none; animation:fxIn .5s ease both; }
#fxLayer .fx.out { animation:fxOut .5s ease both; }
@keyframes fxIn { from { opacity:0; } to { opacity:1; } }
@keyframes fxOut { from { opacity:1; } to { opacity:0; } }
.fx-vig.red { background:radial-gradient(75% 65% at 50% 50%, rgba(120,0,10,0) 40%, rgba(150,0,15,.55) 85%, rgba(60,0,6,.85)); animation:fxVig 2.6s ease both !important; }
.fx-vig.red.soft { opacity:.6; }
.fx-vig.red.pulse { animation:fxPulse .7s ease 2 both !important; }
.fx-vig.green { background:radial-gradient(80% 70% at 50% 55%, rgba(80,255,140,.16), rgba(20,120,60,.28) 60%, rgba(0,0,0,0) 100%); animation:fxVig 1.8s ease both !important; }
.fx-vig.dark { background:radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,10,.7) 100%); animation:fxVig 3.2s ease both !important; }
@keyframes fxVig { 0% { opacity:0; } 25% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; } }
@keyframes fxPulse { 0% { opacity:.4; } 35% { opacity:1; filter:brightness(1.6); } 100% { opacity:.2; } }
.fx-flash { animation:fxFlash .6s ease-out both !important; }
.fx-flash.red { background:rgba(200,0,20,.45); }
.fx-flash.white { background:rgba(255,245,215,.75); animation-duration:.3s !important; }
@keyframes fxFlash { from { opacity:1; } to { opacity:0; } }
.fx-pobeyes { background:radial-gradient(90% 70% at 50% 50%, rgba(0,0,0,0) 45%, rgba(90,0,8,.55)); }
.fx-pobeyes i { position:absolute; top:7%; width:min(16vw, 120px); height:min(5vw, 36px); border-radius:50%;
  background:radial-gradient(closest-side, #fff6c0, #ff3a1a 35%, rgba(200,10,10,.6) 60%, rgba(0,0,0,0)); filter:blur(1px) drop-shadow(0 0 18px #ff2010);
  animation:fxBlink 4.2s ease-in-out infinite; }
.fx-pobeyes i:first-child { left:calc(50% - min(19vw, 140px)); transform:rotate(8deg); }
.fx-pobeyes i:last-child { left:calc(50% + min(3vw, 20px)); transform:rotate(-8deg); }
@keyframes fxBlink { 0%, 44%, 52%, 100% { transform:scaleY(1); opacity:.9; } 48% { transform:scaleY(.08); opacity:.5; } }
.fx-mist { background:radial-gradient(70% 60% at 50% 60%, rgba(170,200,255,0) 30%, rgba(170,205,255,.32) 80%, rgba(200,225,255,.5));
  backdrop-filter:saturate(.6) hue-rotate(-12deg); animation:fxIn 1.2s ease both, fxMist 6s ease-in-out infinite alternate; }
@keyframes fxMist { from { background-position:0 0; filter:blur(0); } to { background-position:0 -20px; filter:blur(2px); } }
#fxLayer .fx-card { inset:auto; right:auto; bottom:auto; left:50%; top:22%; transform:translate(-50%, 0); display:flex; align-items:center; gap:12px; padding:12px 20px; border-radius:16px;
  background:rgba(16,12,30,.9); border:1px solid rgba(180,150,255,.5); box-shadow:0 0 40px rgba(150,110,255,.45); font:700 clamp(17px, 3.2vw, 24px) Kanit; color:#efe8ff;
  animation:fxCard 3.8s ease both !important; white-space:nowrap; }
#fxLayer .fx-card b { font-size:1.5em; }
#fxLayer .fx-card.bad { border-color:rgba(255,80,90,.7); box-shadow:0 0 44px rgba(255,40,60,.55); color:#ffe0e0; }
#fxLayer .fx-card.good { border-color:rgba(130,255,170,.6); box-shadow:0 0 40px rgba(90,255,150,.35); }
@keyframes fxCard { 0% { opacity:0; transform:translate(-50%, 14px) scale(.9); } 10% { opacity:1; transform:translate(-50%, 0) scale(1); } 85% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { #fxLayer .fx { animation-duration:.01s !important; } .fx-pobeyes i { animation:none; } }

/* ---------------- ghosts: the dead talk among themselves ---------------- */
#ghostPanel { position:fixed; left:max(12px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom)); width:min(320px, 86vw); z-index:11; pointer-events:auto;
  background:rgba(14,22,40,.86); border:1px solid rgba(150,190,255,.35); border-radius:14px; padding:8px 10px; box-shadow:0 0 30px rgba(120,170,255,.18); }
#ghostPanel .gp-head { display:flex; align-items:center; gap:8px; color:#cfe0ff; font-weight:700; font-size:14px; }
#ghostPanel .gp-head small { color:#94a8d0; font-weight:400; flex:1; }
#ghostPanel .gp-log { max-height:140px; overflow:auto; font-size:13px; color:#dde8ff; margin:6px 0; }
#ghostPanel .gp-log div { margin:2px 0; } #ghostPanel .gp-log b { color:#9fc6ff; }
#ghostPanel .gp-log .call b { color:#ffe4a0; }
#ghostPanel form { display:flex; gap:6px; } #ghostPanel input { flex:1; min-width:0; }
#ghostPanel.mini .gp-log, #ghostPanel.mini form, #ghostPanel.mini .gp-call { display:none; }
#ghostPanel .gp-call { background:rgba(255,220,140,.1); border:1px solid rgba(255,220,140,.35); border-radius:10px; padding:6px 8px; margin-top:6px; }
#ghostPanel .gp-call > b { color:#ffe4a0; font-size:13px; }
#gpMini { margin-left:auto; } #gpMini.unread::after { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff6b6b; margin-left:4px; }
#spiritChat { margin-top:8px; } #spiritLog { max-height:110px; overflow:auto; font-size:13px; } #spiritLog b { color:#bfe0ff; }
#spiritChat form { display:flex; gap:6px; margin-top:4px; } #spiritChat input { flex:1; min-width:0; }
@media (max-height:500px) { #ghostPanel { width:min(300px, 44vw); } #ghostPanel .gp-log { max-height:84px; } }
@media (max-width:620px) and (orientation:portrait) { #ghostPanel { bottom:auto; top:calc(78px + env(safe-area-inset-top)); width:min(300px, 80vw); } }