:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Layout: one-screen app. Header gauges on top, cross-section canvas fills the middle, control deck (radio / roster / warden console) below. Single dark look by choice. */
:root{
  --bg:#15100d; --panel:#1f1813; --panel-2:#2a2019; --line:#3c3027;
  --fg:#eee2cf; --muted:#a8957f; --accent:#e6a93b; --danger:#d0583f; --ok:#8fbf6a;
  --display:'Russo One','Arial Black',Impact,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:13px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
*{box-sizing:border-box}
#app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding-block:10px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:.06em;color:var(--accent);display:flex;align-items:center;gap:10px;text-wrap:balance}
.brand svg{flex:none}
.gauges{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.g{border:1px solid var(--line);background:var(--panel);padding:4px 10px;display:flex;flex-direction:column;min-width:0}
.g b{font-family:var(--display);font-weight:400;font-size:16px;font-variant-numeric:tabular-nums}
.g span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.g.next{flex:1 1 200px}
.g.low b{color:var(--danger)}
.prog{height:4px;background:var(--line);margin-top:4px}
.prog i{display:block;height:100%;background:var(--accent);width:0}
#stage{position:relative;min-height:0;border:1px solid var(--line);background:#0c0907;overflow:hidden}
#cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#cv.drag{cursor:grabbing}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoom button,.btn{font:inherit;color:var(--fg);background:var(--panel-2);border:1px solid var(--line);cursor:pointer}
.zoom button{width:34px;height:34px;font-size:18px;line-height:1}
.btn{padding:7px 12px;font-size:12px;letter-spacing:.04em}
.btn:hover,.zoom button:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#1a1209;border-color:var(--accent);font-weight:600}
.btn.danger{color:var(--danger);border-color:var(--danger)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo{position:absolute;right:56px;bottom:10px;max-width:min(380px,calc(100% - 64px));background:rgba(21,16,13,.92);border:1px dashed var(--accent);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.demo strong{font-family:var(--display);font-weight:400;color:var(--accent);letter-spacing:.05em}
.demo p{margin:0;color:var(--muted);line-height:1.45}
.demo label{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.demo input{flex:1;min-width:0;accent-color:var(--accent)}
#card{position:absolute;left:10px;bottom:10px;width:min(300px,calc(100% - 20px));background:rgba(31,24,19,.96);border:1px solid var(--accent);padding:12px;display:flex;flex-direction:column;gap:8px}
#card .no{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
#card h3{margin:0;font-family:var(--display);font-weight:400;font-size:20px;word-break:break-all}
#card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
#card dt{color:var(--muted)}
#card dd{margin:0}
#card .row{display:flex;flex-wrap:wrap;gap:6px}
#card .x{position:absolute;right:6px;top:6px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}
.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;max-height:30vh;overflow:auto}
.panel{border:1px solid var(--line);background:var(--panel);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:8px}
.rh{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* folding panels: Radio and Residents start folded (more room for the bunker on phones), the header opens them */
.fold{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:4px 0;cursor:pointer;display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;text-align:left}
.fold::before{content:'▸';display:inline-block;transition:transform .15s;color:var(--accent)}
.fold[aria-expanded="true"]::before{transform:rotate(90deg)}
.fold .last{font:11px var(--mono);font-style:normal;letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fold[aria-expanded="true"] .last{display:none}
.fold-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.panel.folded .fold-body{display:none}
.panel.folded{padding-block:6px}
.deck{align-items:start}
.fold-body > h2{margin-top:10px}
.mini{font:10px var(--mono);letter-spacing:.06em;text-transform:none;color:var(--muted);background:none;border:1px solid var(--line);padding:2px 6px;cursor:pointer}
.mini[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.panel h2{margin:0;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#radio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:auto;line-height:1.4}
#radio li{color:var(--muted)}
#radio li time{color:var(--accent);margin-right:6px;font-variant-numeric:tabular-nums}
#radio li.arr{color:var(--fg)}
input[type=text],select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:7px 9px;width:100%;min-width:0}
textarea{min-height:64px;resize:vertical}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:4px}
.roles div{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.roles canvas{width:30px;height:40px;flex:none}
.roles b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto}
#found{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#found button{width:100%;text-align:left;font:inherit;color:var(--fg);background:none;border:0;padding:4px 2px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
#found button:hover{color:var(--accent)}
#found span{color:var(--muted)}
.inline{display:flex;gap:6px}
.inline > *:first-child{flex:1}
.inline > select:not(:first-child),.inline > .btn{width:auto;flex:0 0 auto}
.status{min-height:1.2em;color:var(--muted)}
.status.err{color:var(--danger)}
.status.ok{color:var(--ok)}
.hint{color:var(--muted);margin:0;line-height:1.45}
/* account dialog (online): join, make your resident, profile */
#meBtn{order:2;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.gauges{order:1}
/* phones and narrow windows: the button sits next to the logo, the gauges get the whole next row */
@media (max-width:900px){#meBtn{order:1;margin-left:auto}.gauges{order:2;flex-basis:100%}}
#meBtn.mine{background:var(--panel-2);color:var(--ok);border-color:var(--ok)}
#acct{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);color:var(--fg);border:1px solid var(--accent);padding:16px;box-sizing:border-box}
#acct::backdrop{background:rgba(5,4,3,.72)}
#acct > *,#acct section{display:flex;flex-direction:column;gap:9px}
#acct > * + *{margin-top:10px}
#acct h2{margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.06em;color:var(--accent);padding-right:28px}
#acct h3{margin:6px 0 0;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
#acct .x{position:absolute;right:8px;top:8px;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px}
#acct .no{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
#acct a{color:var(--accent)}
#acct input[type=email],#acct input[type=password],#acct input[type=number]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:9px;width:100%}
#acct .tabs{display:flex;gap:6px}
#acct .tabs .mini{font-size:12px;padding:5px 9px}
#acct .check{display:flex;gap:8px;align-items:flex-start;line-height:1.4;color:var(--muted)}
#acct .check input{margin-top:2px;accent-color:var(--accent)}
#acct .row{display:flex;flex-wrap:wrap;gap:6px}
.btn.google{display:block;text-align:center;text-decoration:none;color:var(--fg)!important;padding:10px}
#acct .look{display:flex;gap:12px;align-items:flex-start}
#acPrev{width:120px;height:150px;flex:none;background:#0c0907;border:1px solid var(--line)}
#acct .lookside{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
#acct .sexes,#acct .hues{display:flex;flex-wrap:wrap;gap:4px}
#acct .sw{padding:0;background:#0c0907;border:1px solid var(--line);cursor:pointer;line-height:0}
#acct .sw canvas{width:28px;height:36px}
#acct .sexes .sw canvas{width:34px;height:44px}
#acct .sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#acct .claimbox{border:1px dashed var(--accent);padding:8px 10px;line-height:1.5}
#acct .claimbox b{font-family:var(--display);font-weight:400;color:var(--accent);font-size:18px;letter-spacing:.08em}
#acct .inline > input{flex:1}
#acClaimRow > select{flex:0 0 auto;width:auto}
#acct .linkish{align-self:flex-start;border:0;padding:2px 0;color:var(--accent);text-decoration:underline;font-size:12px}
#acct p{margin:0;line-height:1.5}
/* the warden's announcement over the bunker */
#news{position:absolute;left:10px;top:10px;right:56px;max-width:560px;background:rgba(31,24,19,.95);border:1px solid var(--accent);padding:8px 34px 8px 10px;line-height:1.45;z-index:2}
#news b{font-family:var(--display);font-weight:400;color:var(--accent);letter-spacing:.1em;margin-right:6px}
#news .x{position:absolute;right:4px;top:2px;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}
#users{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
#users li{display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:4px 0;font-size:12px}
#users li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#users li i{color:var(--muted);font-style:normal}
/* the board (ideas + room vote) shares the account dialog's look */
#board{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);color:var(--fg);border:1px solid var(--accent);padding:16px;box-sizing:border-box}
#board::backdrop{background:rgba(5,4,3,.72)}
#board > *,#board section{display:flex;flex-direction:column;gap:9px}
#board > * + *{margin-top:12px}
#board h2{margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.06em;color:var(--accent);padding-right:28px}
#board h3{margin:4px 0 0;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
#board .x{position:absolute;right:8px;top:8px;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px}
#board p{margin:0;line-height:1.5}
#board .tabs{display:flex;gap:6px}
#board .linkish{border:0;padding:0;color:var(--accent);text-decoration:underline;font-size:inherit}
#bdText{min-height:60px}
#bdRooms{display:flex;flex-direction:column;gap:6px}
.room-opt{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border:1px solid var(--line);padding:8px 10px}
.room-opt.mine{border-color:var(--accent)}
.room-opt b{font-family:var(--display);font-weight:400;font-size:15px}
.room-opt .bar{grid-column:1/-1;height:6px;background:var(--line)}
.room-opt .bar i{display:block;height:100%;background:var(--accent)}
.room-opt span{color:var(--muted);font-size:12px}
#bdList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#bdList li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;border:1px solid var(--line);padding:8px 10px}
#bdList .up{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;background:var(--bg);border:1px solid var(--line);color:var(--fg);font:inherit;padding:6px 4px;cursor:pointer}
#bdList .up[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
#bdList .up:disabled{cursor:default;opacity:.7}
#bdList .up b{font-size:15px;font-variant-numeric:tabular-nums}
#bdList .txt{line-height:1.45;word-break:break-word}
#bdList .meta{color:var(--muted);font-size:11px}
#bdList .badge{color:var(--ok);border:1px solid var(--ok);padding:0 5px;margin-right:6px;font-size:10px;letter-spacing:.08em}
#bdList .badge.hidden{color:var(--danger);border-color:var(--danger)}
#bdList .adm{grid-column:2;display:flex;flex-wrap:wrap;gap:4px}
/* work: tasks and mini-games */
#work{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);color:var(--fg);border:1px solid var(--accent);padding:16px;box-sizing:border-box}
#work::backdrop{background:rgba(5,4,3,.72)}
#work > *,#work section{display:flex;flex-direction:column;gap:9px}
#work > * + *{margin-top:10px}
#work h2{margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.06em;color:var(--accent);padding-right:28px}
#work .x{position:absolute;right:8px;top:8px;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px}
#work p{margin:0;line-height:1.5}
#work .linkish{border:0;padding:0;color:var(--accent);text-decoration:underline;font-size:inherit}
.wk-res{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wk-r{border:1px solid var(--line);background:var(--bg);padding:5px 8px;display:flex;flex-direction:column;position:relative}
.wk-r span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wk-r b{font-family:var(--display);font-weight:400;font-size:16px}
.wk-r.low b{color:var(--danger)}
.wk-r.dig{grid-column:1/-1}
.wk-r.dig i{display:block;height:4px;background:var(--accent);margin-top:4px}
#wkTasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#wkTasks li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border:1px solid var(--line);padding:8px 10px}
#wkTasks li.helps{border-color:var(--accent)}
#wkTasks li b{font-family:var(--display);font-weight:400;font-size:15px}
#wkTasks li p{grid-column:1/-1;color:var(--muted);font-size:12px}
#wkTasks .chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
#wkTasks .chips span{font-size:11px;border:1px solid var(--line);padding:1px 6px;color:var(--fg)}
#wkTasks .chips span.want{border-color:var(--accent);color:var(--accent)}
#wkCanvas{width:100%;max-width:360px;aspect-ratio:3/2;align-self:center;touch-action:none;cursor:pointer;background:#120d0a}
.wk-result{min-height:1.4em;font-family:var(--display);font-size:16px;text-align:center}
.wk-result.good{color:var(--ok)}
.wk-result.bad{color:var(--danger)}
.g.clickable{cursor:pointer}
.g.clickable:hover{border-color:var(--accent)}
/* 1:1 chats: a panel over the game, small notices for invitations, messages and calls */
#dmPanel{position:absolute;right:10px;bottom:62px;width:min(360px,calc(100% - 20px));max-height:calc(100% - 80px);display:flex;flex-direction:column;gap:8px;background:rgba(31,24,19,.98);border:1px solid var(--accent);padding:10px;z-index:4}
#dmPanel header{display:flex;align-items:center;gap:8px}
#dmPanel h3{margin:0;flex:1;font-family:var(--display);font-weight:400;font-size:16px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dmPanel .x{background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 8px}
#dmList,#dmConv{display:flex;flex-direction:column;gap:8px;min-height:0}
#dmListBox{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:50vh}
.dm-item{display:flex;flex-wrap:wrap;gap:6px;align-items:center;text-align:left;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:8px 10px;cursor:pointer}
.dm-item:hover{border-color:var(--accent)}
#dmPanel .row{display:flex;flex-wrap:wrap;gap:6px}
#dmMsgs{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:120px;max-height:42vh;padding:2px}
.dm-msg{align-self:flex-start;max-width:85%;background:var(--panel-2);border:1px solid var(--line);padding:6px 9px;line-height:1.4;word-break:break-word}
.dm-msg.mine{align-self:flex-end;border-color:var(--accent)}
.dm-msg time{display:block;font-size:10px;color:var(--muted);margin-top:2px}
#dmForm{display:flex;gap:6px}
#dmForm input{flex:1;min-width:0;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:8px}
#dmCallBar{display:flex;align-items:center;gap:6px;border:1px solid var(--ok);padding:6px 8px;color:var(--ok)}
#dmCallBar span{flex:1;font-size:12px}
#dmToasts{position:absolute;left:10px;top:10px;right:56px;display:flex;flex-direction:column;gap:6px;z-index:5;pointer-events:none}
.dm-toast{pointer-events:auto;position:relative;max-width:420px;background:rgba(31,24,19,.97);border:1px solid var(--accent);padding:8px 30px 8px 10px;display:flex;flex-direction:column;gap:6px}
.dm-toast p{margin:0;line-height:1.4}
.dm-toast .x{position:absolute;right:2px;top:0;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}
#reports{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#reports li{border:1px solid var(--danger);padding:6px 8px;display:flex;flex-direction:column;gap:4px;font-size:12px}
#reports li .msgs{color:var(--muted);max-height:120px;overflow:auto}
@media (max-width:600px){#dmPanel{left:6px;right:6px;width:auto;bottom:60px}}
/* a player's own words: a bar at the bottom of the bunker view */
#sayBar{position:absolute;left:10px;right:56px;bottom:10px;display:flex;gap:6px;max-width:520px;z-index:2}
#sayBar input{flex:1;min-width:0;font:inherit;color:var(--fg);background:rgba(12,9,7,.88);border:1px solid var(--line);padding:9px}
#sayBar:not([hidden]) ~ #card{bottom:58px}
.ballot{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px}
.ballot label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--fg)}
#says{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;max-height:160px;overflow:auto;font-size:12px}
#says li span{color:var(--muted)}
#claims{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#claims li{border:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;gap:5px;line-height:1.4}
#claims b{color:var(--accent);font-weight:600}
@media (max-width:600px){.brand{font-size:18px}.deck{max-height:42vh}#meBtn{max-width:150px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Director mode (?director=...): only the canvas, sized by the window (1080x1920 when rendering video) */
html.director body{padding:0}
html.director #app{padding:0;gap:0;grid-template-rows:minmax(0,1fr)}
html.director .bar,html.director .deck,html.director .zoom,html.director #demo,html.director #card{display:none!important}
html.director #stage{border:0}