:root { --bg:#0a0d1a; --card:#141a2e; --line:#2a3352; --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(22,26,52,.82), rgba(12,14,32,.88)); 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%), #0c1024; 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; }
}
/* HUD */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
#hudTop { position:absolute; top:max(8px, env(safe-area-inset-top)); left:8px; right:8px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
#taskPanel { background:rgba(10,13,26,.72); border:1px solid var(--line); border-radius:12px; padding:8px 10px; max-width:min(300px, 58vw); }
#barWrap { position:relative; height:16px; border-radius:8px; background:#1d2440; overflow:hidden; margin-bottom:6px; }
#barFill { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#3ba55d,#7ee08f); transition:width .4s; }
#barWrap span { position:relative; font-size:11px; font-weight:700; padding-left:6px; line-height:16px; text-shadow:0 1px 2px #000; }
#taskList { list-style:none; margin:0; padding:0; font-size:12.5px; line-height:1.55; }
#taskList li.done { color:var(--green); text-decoration:line-through; opacity:.75; }
#taskList li.fake { color:#e9a2a2; }
#idCard { background:rgba(10,13,26,.78); border:1px solid var(--line); border-radius:12px; padding:6px 12px; text-align:center; }
#idCard b { display:block; font-family:'Kanit'; font-size:26px; line-height:1.1; }
#idCard span { font-size:12px; color:var(--muted); }
#idCard.imp b { color:var(--red); }
#hudMsg { position:absolute; top:34%; left:50%; transform:translateX(-50%); font-weight:800; font-size:18px; text-shadow:0 2px 8px #000; text-align:center; white-space:pre-line; }
#actions { position:absolute; right:max(14px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:flex-end; pointer-events:auto; }
.act { width:78px; height:78px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(20,26,46,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; touch-action:none; }
.act i { font-style:normal; font-size:28px; line-height:1; }
.act span { font-size:12px; font-weight:800; margin-top:2px; }
.act.ready { border-color:var(--accent); box-shadow:0 0 18px rgba(255,179,71,.6); }
.act.kill.ready { border-color:var(--red); box-shadow:0 0 18px rgba(229,72,77,.7); }
.act:disabled, .act.off { opacity:.4; }
.act em { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:24px; background:rgba(0,0,0,.45); border-radius:50%; }
.act em:empty { display:none; }
#btnReport { border-color:#ffd84a; }
#joy { position:absolute; left:max(18px, env(safe-area-inset-left)); bottom:max(22px, env(safe-area-inset-bottom)); width:128px; height:128px; border-radius:50%; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.18); pointer-events:auto; touch-action:none; display:none; }
#joyKnob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(255,255,255,.28); }
body.touch #joy { display:block; }
body.touch #keysHelp { display:none; }
#keysHelp { position:absolute; left:10px; bottom:10px; font-size:12px; color:var(--muted); background:rgba(10,13,26,.6); padding:4px 8px; border-radius:8px; }
/* reveal */
.reveal-card { text-align:center; animation:pop .4s ease; }
#revRole { font-family:'Kanit'; font-size:42px; font-weight:800; }
#revRole.imp { color:var(--red); text-shadow:0 0 24px rgba(229,72,77,.6); }
#revRole.crew { color:#8fd3ff; text-shadow:0 0 24px rgba(120,200,255,.5); }
#revNum { font-family:'Kanit'; font-size:76px; line-height:1; margin:8px 0; }
#revMates { color:var(--red); font-weight:700; }
#revHint { color:var(--muted); max-width:420px; margin:10px auto 0; }
@keyframes pop { from { transform:scale(.85); opacity:0; } to { transform:none; opacity:1; } }
/* tasks */
#taskBox { width:min(460px, 100%); }
.tk-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:17px; }
.tk-close { background:none; border:0; font-size:20px; color:var(--muted); }
.tk-hint { text-align:center; color:var(--muted); margin-top:10px; min-height:22px; }
.tk-body { display:flex; flex-direction:column; align-items:center; gap:10px; }
.tk-lanterns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:10px; background:#0b0f1f; border-radius:14px; }
.tk-lantern { width:56px; height:72px; font-size:38px; border-radius:12px; border:1px solid var(--line); background:#151b30; filter:grayscale(1) brightness(.45); transition:.2s; }
.tk-lantern.on { filter:none; box-shadow:0 0 22px rgba(255,120,60,.8); background:#3a1a12; }
.tk-gauge { position:relative; width:64px; height:180px; border-radius:12px; background:#0b0f1f; border:1.5px solid var(--line); overflow:hidden; }
.tk-band { position:absolute; left:0; right:0; background:rgba(70,195,123,.35); border-top:2px solid var(--green); border-bottom:2px solid var(--green); }
.tk-fill { position:absolute; left:8px; right:8px; bottom:0; height:0; background:linear-gradient(0deg,#c98a1d,#ffcf5a); border-radius:6px 6px 0 0; }
.tk-hold { width:180px; padding:16px; border-radius:16px; border:0; background:var(--accent); color:#2a1700; font-weight:800; font-size:18px; touch-action:none; }
.tk-bill { text-align:center; font-size:15px; }
.tk-due { font-family:'Kanit'; font-size:24px; color:var(--accent); }
.tk-tray { background:#0b0f1f; border-radius:10px; padding:6px 14px; font-weight:700; }
.tk-coins { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tk-coin { width:58px; height:58px; border-radius:50%; border:3px solid #c9a24a; background:radial-gradient(#f2d38a,#b8892c); color:#3a2500; font-weight:800; font-size:18px; }
.tk-coin.note { border-radius:10px; width:74px; height:46px; border-color:#3d7b52; background:linear-gradient(#bfe6c8,#7fbf91); color:#123; }
.tk-show { font-size:48px; min-height:64px; transition:transform .15s; }
.tk-show.pop { transform:scale(1.25); }
.tk-pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:100%; }
.tk-item { border:1px solid var(--line); background:#151b30; border-radius:12px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; }
.tk-item span { font-size:30px; } .tk-item em { font-style:normal; font-size:12px; color:var(--muted); }
/* meeting */
.meet-head { display:flex; justify-content:space-between; align-items:center; font-size:18px; }
#meetTimer { font-family:'Kanit'; font-size:22px; color:var(--accent); }
#meetStage { color:var(--muted); font-size:13px; margin:2px 0 8px; }
#tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.tile { position:relative; border:1.5px solid var(--line); background:#0f1426; border-radius:12px; padding:8px 6px; text-align:center; }
.tile b { font-family:'Kanit'; font-size:24px; display:block; }
.tile small { color:var(--muted); font-size:11px; }
.tile.me { border-color:var(--accent); }
.tile.dead { opacity:.4; } .tile.dead b { text-decoration:line-through; }
.tile.voteable { cursor:pointer; } .tile.voteable:hover { border-color:#fff; }
.tile.picked { border-color:var(--red); box-shadow:0 0 12px rgba(229,72,77,.6); }
.tile .badge { position:absolute; top:4px; right:6px; font-size:12px; }
.tile .count { position:absolute; bottom:4px; right:6px; font-weight:800; color:var(--accent); }
.tile.out { border-color:var(--red); background:#2a1015; }
.meet-row { display:flex; align-items:center; gap:10px; margin:10px 0; }
#meetNote { color:var(--muted); font-size:13px; }
#chatBox { border-top:1px solid var(--line); padding-top:8px; }
#chatLog { height:150px; overflow:auto; font-size:14px; line-height:1.5; display:flex; flex-direction:column; gap:2px; }
#chatLog .sys { color:var(--muted); font-size:12px; }
#chatLog b { color:var(--accent); margin-right:4px; }
#chatForm { display:flex; gap:6px; margin-top:6px; }
#chatIn { flex:1; background:#0f1426; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; user-select:text; -webkit-user-select:text; }
/* end */
.end h2 { font-size:30px; text-align:center; }
.end h2.crew { color:#8fd3ff; } .end h2.imp { color:var(--red); }
#endReason { text-align:center; color:var(--muted); margin:4px 0 10px; }
.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%); }
@media (max-height:500px) { .act { width:66px; height:66px; } #joy { width:112px; height:112px; } #chatLog { height:90px; } .card { padding:10px; } #tiles { grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); } .tile b { font-size:20px; } }

/* third-person camera: task compass (relative to the camera) + a one-time look hint on phones */
#compass { position:absolute; top:calc(max(8px, env(safe-area-inset-top)) + 4px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:4px 10px 4px 6px; border-radius:999px; background:rgba(10,13,26,.62); border:1px solid rgba(255,216,74,.35); font-size:13px; font-weight:700; color:#ffd84a; white-space:nowrap; }
#compass i { display:inline-block; font-style:normal; font-size:15px; line-height:1; width:18px; text-align:center; transition:transform .08s linear; }
#lookHint { display:none; position:absolute; right:max(16px, env(safe-area-inset-right)); bottom:calc(max(22px, env(safe-area-inset-bottom)) + 230px); font-size:12px; color:var(--muted); background:rgba(10,13,26,.55); padding:4px 8px; border-radius:8px; animation:lookHintOut 1s 9s forwards; }
body.touch #lookHint { display:block; }
@keyframes lookHintOut { to { opacity:0; } }
#game canvas { touch-action:none; }
@media (max-width:560px) { #compass { top:auto; bottom:calc(max(22px, env(safe-area-inset-bottom)) + 140px); } }
@media (max-height:500px) { #lookHint { bottom:calc(max(12px, env(safe-area-inset-bottom)) + 160px); } }

/* meeting voice */
#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); }
.tile.speaking { border-color:#8bf6b0; box-shadow:0 0 0 2px rgba(70,195,123,.55), 0 0 16px rgba(70,195,123,.6); }
.tile.speaking::after { content:'🔊'; position:absolute; top:4px; left:6px; font-size:12px; }

/* Phase 3 — sabotage */
.act.sab.ready { border-color:#b77dff; box-shadow:0 0 18px rgba(183,125,255,.6); }
#sabBanner { position:absolute; top:calc(max(8px, env(safe-area-inset-top)) + 40px); left:50%; transform:translateX(-50%); padding:6px 14px; border-radius:12px; background:rgba(120,18,28,.82); border:1px solid rgba(255,120,120,.6); color:#fff; font-weight:800; font-size:14px; text-align:center; display:flex; flex-direction:column; gap:1px; animation:sabPulse 1.2s ease-in-out infinite; max-width:min(92vw, 440px); pointer-events:none; }
#sabBanner span { font-size:12px; font-weight:600; opacity:.92; }
#sabBanner.comms { background:rgba(40,46,90,.85); border-color:rgba(140,160,255,.6); }
#sabBanner.dark { background:rgba(60,50,10,.85); border-color:rgba(255,216,74,.6); }
@keyframes sabPulse { 50% { box-shadow:0 0 22px rgba(255,90,90,.55); } }
#compass.fix { color:#ff8a8a; border-color:rgba(255,120,120,.5); }
#barWrap.comms #barFill { width:0 !important; }
#barWrap.comms span::after { content:' · วิทยุล่ม'; color:#9fb0ff; }
.sab-card { max-width:420px; max-height:calc(100vh - 24px); overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.sab-card h3 { margin:0; }
.sab-opt { display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:8px; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font:inherit; }
.sab-opt i { grid-row:1 / span 2; font-style:normal; font-size:28px; align-self:center; }
.sab-opt span { font-size:12px; opacity:.8; }
.sab-opt.crit { border-color:rgba(255,120,120,.45); }
.sab-opt:active { transform:scale(.98); }
@media (max-width:560px) { #sabBanner { top:calc(max(8px, env(safe-area-inset-top)) + 150px); } }
@media (max-height:500px) { .sab-opt { padding:6px 10px; } .sab-card p { display:none; } }

/* Phase 4 — CCTV + vents */
.cctv-card { width:min(96vw, 760px); max-height:calc(100vh - 16px); overflow-y:auto; padding:12px; background:#0b1410; border-color:rgba(90,220,140,.3); }
.cctv-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cctv-head b { flex:1; }
.cctv-head .rec { color:#ff5a5a; font-weight:800; font-size:12px; animation:sabPulse 1s steps(2) infinite; }
#cctvGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cam { position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(90,220,140,.35); background:#06100b; aspect-ratio:16/10; }
.cam canvas { width:100%; height:100%; display:block; }
.cam::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); pointer-events:none; }
.cam span { position:absolute; left:6px; top:4px; font-size:11px; font-weight:800; color:#b8ffd0; text-shadow:0 1px 3px #000; z-index:1; }
.cctv-note { margin:6px 0 0; font-size:12px; }
@media (max-width:560px) { #cctvGrid { grid-template-columns:1fr; } .cam { aspect-ratio:16/9; } }
@media (max-height:500px) { #cctvGrid { grid-template-columns:1fr 1fr; } .cam { aspect-ratio:16/7; } .cctv-note { display:none; } }
#ventUI { position:absolute; inset:auto 0 max(18px, env(safe-area-inset-bottom)) 0; display:flex; justify-content:center; pointer-events:none; z-index:30; }
.vent-card { pointer-events:auto; background:rgba(25,10,16,.9); border:1px solid rgba(229,72,77,.5); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:min(92vw, 320px); text-align:center; }
#ventLinks { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#ventLinks button { flex:1 1 130px; }

/* Phase 5 — more market tasks */
.wob { animation:tkWob .25s; }
@keyframes tkWob { 25% { transform:translateX(-6px) rotate(-4deg); } 75% { transform:translateX(6px) rotate(4deg); } }
.tk-lane { position:relative; width:100%; height:86px; border-radius:12px; background:linear-gradient(180deg,#0f2a3d,#123a52); overflow:hidden; }
.tk-boat { position:absolute; left:6%; top:18px; font-size:44px; transition:left .18s ease-out; }
.tk-dock { position:absolute; right:4%; top:22px; font-size:36px; }
.tk-oars { display:flex; gap:10px; width:100%; }
.tk-oar { flex:1; padding:16px 8px; border-radius:14px; border:0; background:var(--accent); color:#2a1700; font-weight:800; font-size:17px; }
.tk-oar:active { transform:scale(.96); }
.tk-baskets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
.tk-basket { border:1px solid var(--line); background:#151b30; border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; color:inherit; font:inherit; }
.tk-basket span { font-size:34px; } .tk-basket em { font-style:normal; font-size:13px; color:var(--muted); }
.tk-recipe { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; font-size:13px; color:var(--muted); }
.tk-recipe .ok { color:var(--green); text-decoration:line-through; }
.tk-cup { position:relative; width:64px; height:80px; border-radius:6px 6px 18px 18px; border:2px solid rgba(255,255,255,.35); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tk-cup i { position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(0deg,#c8641e,#f0a36b); transition:height .25s; }
.tk-cup b { position:relative; font-size:28px; }
.tk-wires { display:grid; grid-template-columns:1fr 54px 1fr; gap:8px; width:100%; align-items:center; }
.tk-wcol { display:flex; flex-direction:column; gap:8px; }
.tk-wire, .tk-sock { padding:10px 6px; border-radius:10px; border:2px solid transparent; font-weight:800; color:#fff; text-shadow:0 1px 2px #000; font:inherit; }
.tk-wire.sel { outline:3px solid #fff; }
.tk-wire:disabled { opacity:.35; }
.tk-sock { background:#0b0f1f; border-width:3px; font-size:18px; }
.tk-wmid { font-size:40px; text-align:center; filter:grayscale(1) brightness(.5); transition:filter .3s; }
.tk-wmid.lit { filter:none; text-shadow:0 0 18px rgba(255,140,60,.9); }
.tk-dial { position:relative; width:150px; height:150px; border-radius:50%; background:radial-gradient(#1b2340,#0b0f1f); border:3px solid #c9a24a; display:flex; align-items:flex-end; justify-content:center; padding-bottom:26px; }
.tk-dial i { position:absolute; left:calc(50% - 2px); top:16px; width:4px; height:59px; background:#ff6b6b; transform-origin:50% 100%; transform:rotate(-135deg); transition:transform .25s; border-radius:2px; }
.tk-dial b { font-family:'Kanit'; font-size:18px; }
.tk-knot { display:flex; gap:6px; font-size:28px; padding:6px 10px; border-radius:12px; background:#0b0f1f; }
.tk-knot span { opacity:.55; } .tk-knot span.ok { opacity:1; filter:drop-shadow(0 0 6px #7ee08f); }

/* t45u — ghosts listen only */
#voiceBar.listen { background:rgba(70,80,120,.35); border-color:rgba(160,175,255,.45); }

/* Phase 6 — end-of-game replay */
#replay { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.rp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.rp-head span { font-family:monospace; color:var(--muted); }
.rp-stage { border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0b0f1f; }
#rpCanvas { width:100%; height:auto; display:block; }
.rp-ctrl { display:flex; gap:8px; align-items:center; margin-top:8px; }
.rp-ctrl input { flex:1; accent-color:var(--accent); height:28px; }
#rpEvents { list-style:none; padding:0; margin:8px 0 0; max-height:150px; overflow:auto; font-size:13px; display:flex; flex-direction:column; gap:3px; }
#rpEvents li { padding:4px 8px; border-radius:8px; background:rgba(255,255,255,.04); cursor:pointer; display:flex; gap:8px; }
#rpEvents li b { font-family:monospace; color:var(--muted); font-weight:400; min-width:40px; }
#rpEvents li.kill { background:rgba(229,72,77,.12); }
#rpEvents li.past { opacity:.55; }
@media (max-height:500px) { .end-scroll { max-height:36vh; } #rpEvents { max-height:90px; } }
/* batch S: weed / grill / bail mini-games (big tap targets for phones) */
.tk-canal { position:relative; width:100%; height:150px; border-radius:12px; background:linear-gradient(180deg,#0f2a3d,#164a66 60%,#0f2a3d); overflow:hidden; }
.tk-weed { position:absolute; width:48px; height:48px; border:0; border-radius:50%; background:rgba(40,90,40,.35); font-size:30px; line-height:48px; padding:0; touch-action:manipulation; transition:transform .25s, opacity .25s; }
.tk-weed.gone { transform:translateY(-30px) scale(.4); opacity:0; pointer-events:none; }
.tk-grill { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; padding:10px; border-radius:12px; background:repeating-linear-gradient(90deg,#2a1a12 0 10px,#151010 10px 14px); box-shadow:inset 0 -18px 30px rgba(255,90,20,.25); }
.tk-skewer { --cook:0; position:relative; min-height:76px; border:2px solid var(--line); border-radius:12px; color:inherit; font:inherit;
  background:color-mix(in srgb, #d98a8a calc((1 - var(--cook)) * 100%), #6b3d12); display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:manipulation; }
.tk-skewer span { font-size:30px; } .tk-skewer em { font-style:normal; font-size:12px; color:#fff; text-shadow:0 1px 2px #000; }
.tk-skewer i { position:absolute; left:8px; right:auto; bottom:6px; height:4px; border-radius:2px; background:#ffcf5a; width:0; max-width:calc(100% - 16px); }
.tk-skewer.gold { border-color:#ffcf5a; box-shadow:0 0 14px rgba(255,200,80,.7); }
.tk-skewer.ok { opacity:.55; border-color:var(--green); }
.tk-hull { position:relative; width:180px; height:110px; border-radius:12px 12px 60px 60px; border:3px solid #7a4a22; background:#2a1a10; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tk-hull i { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#3a86b8,#174a6e); transition:height .12s; }
.tk-hull b { position:relative; font-size:40px; opacity:.85; }
.tk-scoop { touch-action:manipulation; }
.tk-scoop.splash { animation:tkWob .2s; }