:root{--night:#10142a;--wall:#1d2b33;--wall2:#2f4a4a;--moss:#4f6e5f;--sodium:#f0a640;--glow:#ffd98a;--paper:#e9dcb8;--pink:#d0607a}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--night)}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:"Pixelify Sans",monospace;color:var(--paper);overflow:hidden}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.top,.foot{width:var(--w);display:flex;justify-content:space-between;align-items:center;gap:12px}
.top .name{font-size:26px;color:var(--glow)}
.rooms{display:flex;gap:8px}
.rooms button,.wallet,.look,.mute,.report,.roadmap,.leaders,.stairwell,.roompick{font-size:16px;color:var(--paper);background:var(--wall);border:none;padding:6px 12px;box-shadow:inset -3px -3px 0 #0b1015,inset 3px 3px 0 var(--wall2);text-decoration:none}
.rooms button[aria-pressed=true]{background:var(--sodium);color:var(--night);box-shadow:inset -3px -3px 0 #a86b1e,inset 3px 3px 0 var(--glow)}
.wallet.on{color:var(--glow)}
.foot{font-family:"VT323",monospace;font-size:18px;color:var(--moss)}
.foot b{color:var(--paper);font-weight:400}

#wrap{position:relative;width:var(--w);height:var(--h)}
#stage{position:relative;width:400px;height:225px;transform-origin:top left}
canvas{position:absolute;inset:0;width:400px;height:225px;image-rendering:pixelated}
.ov{position:absolute;font-family:"VT323",monospace;line-height:1}

#chat{left:283px;top:62px;width:104px;height:92px;overflow:hidden;font-size:8px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:2px 3px;color:#c9e3b0}
#chat p{overflow-wrap:anywhere}
#shiftwait{display:none}
#coach{display:none} /* the colour look says the coach line in the chat instead */
#chat .me{color:var(--glow);text-align:right}
#chat .sys{color:var(--moss)}
#chat .err{color:var(--pink)}
#chat [data-slip]{outline:1px solid var(--glow);outline-offset:1px}
#notice{left:283px;top:148px;width:104px;font-size:8px;color:var(--pink);background:#0a0f0c;padding:0 3px}
#notice:empty{display:none}
#ask{left:283px;top:158px;width:104px;height:11px;background:#0a0f0c;border:none;color:var(--glow);font-family:"VT323";font-size:8px;padding:0 3px}
#ask:disabled{opacity:.5}
.chips{left:283px;top:172px;width:104px;display:flex;flex-wrap:wrap;gap:2px}
.chips button{font-family:"VT323";font-size:7px;line-height:1;padding:1px 2px;background:#2a3a33;color:var(--paper);border:none}
.chips button:hover{background:var(--sodium);color:var(--night)}

#note{left:15px;top:24px;width:70px;font-size:8px;color:#3a2418;transform:rotate(-3deg)}
#note b{display:block;color:#8c2f2a;font-weight:400;margin-bottom:2px}
#board{left:15px;top:84px;width:70px;font-size:7px;color:#3a2418}
#board div{display:flex;justify-content:space-between}
#board .you{color:#8c2f2a}
#receipt{left:22px;top:149px;width:56px;font-size:6px;color:#3a2418}
#receipt a{display:flex;justify-content:space-between;color:inherit;text-decoration:none}
#receipt a:hover{color:#8c2f2a}
#clock{left:173px;top:5px;font-size:10px;color:var(--glow);width:54px;text-align:center}
#jar{left:92px;top:196px;width:52px;font-size:7px;text-align:center}

#keys{position:absolute;left:140px;top:204px;width:150px;height:16px;display:flex;gap:4px}
.key{height:16px;font-family:"Pixelify Sans";font-size:8px;border:none;padding:0 6px;color:var(--night);white-space:nowrap}
#open{background:var(--paper);box-shadow:inset -2px -2px 0 #a8996f,inset 2px 2px 0 #fff6dc}
#shut{background:var(--sodium);box-shadow:inset -2px -2px 0 #a86b1e,inset 2px 2px 0 var(--glow)}
.key:disabled{opacity:.35;cursor:default}
.key:active:not(:disabled){transform:translateY(1px)}
.wait{font-family:"VT323";font-size:8px;color:var(--moss);align-self:center}

.panel{position:absolute;left:112px;top:56px;width:166px;background:#05060b;box-shadow:0 0 0 2px var(--paper);display:none;flex-direction:column;align-items:center;gap:5px;padding:9px;text-align:center}
.panel.on{display:flex}
#start p{font-size:9px;line-height:1.3;margin-bottom:6px;color:var(--paper)}
#start p:empty{display:none}
#start #nameerr{font:14px/18px "Atkinson Hyperlegible",Verdana,sans-serif;color:var(--pink)}
#start #brand{display:flex;align-items:center;gap:6px}
#start #brand img{width:64px;height:64px;image-rendering:pixelated}
#start a{color:var(--paper);margin:0 4px}
#start label{font-size:9px;display:flex;flex-direction:column;gap:3px;width:100%}
#start input{font-family:"VT323";font-size:10px;background:#11160f;color:var(--glow);border:none;padding:2px 4px}
#start button,#reveal button{font-size:9px;width:100%;padding:3px;border:none;background:var(--paper);color:var(--night)}
#start button[data-role=visitor]{background:var(--sodium)}
#reveal .t{font-size:13px}
#reveal .s{font-family:"VT323";font-size:8px;color:var(--moss)}
#rc{display:none} /* the one-bit reveal card's words for screen readers (sprint 27); the colour look has no card */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body.outbreak .top .name{color:#c8dc8a}
body.outbreak .top .name::after{content:'  outbreak night';font-size:16px;color:#d0607a}
body.outbreak #note{color:#3a3a12}