:root{--ink:#fafafa;--paper:#000;--muted:#8d8d93}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);overflow:hidden;touch-action:none}
body{font:16px "Silkscreen",ui-monospace,monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;letter-spacing:.06em;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
header{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) 20px 16px;pointer-events:none;letter-spacing:.06em}
#credits{position:relative;pointer-events:auto}
#credits-box{position:absolute;left:0;top:calc(100% + 8px);width:max-content;max-width:min(320px,calc(100vw - 40px));
  padding:10px 12px;background:var(--paper);border:2px solid var(--ink);letter-spacing:0;font:11px/1.5 ui-monospace,Menlo,monospace}
#credits-box[hidden]{display:none}
#credits-box a{color:inherit}
#status{position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top));text-align:center;font-size:20px;
  letter-spacing:.06em;padding:0 16px;pointer-events:none;font-variant-numeric:tabular-nums}
#labels span{position:fixed;transform:translate(-50%,-100%);white-space:nowrap;font-size:14px;letter-spacing:.06em;pointer-events:none}
#labels span small{display:block;font-size:11px;color:var(--muted);text-align:center}
#bar{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none}
#bar>*{pointer-events:auto}
#line{font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:center;max-width:100%;overflow-wrap:anywhere}
#line b{font-weight:400;color:var(--ink)}
#queue-btn{border:2px solid var(--ink);padding:10px 16px}
#queue-btn[hidden],#vote[hidden]{display:none}
#vote{display:flex;gap:12px;width:min(420px,100%)}
#vote button{flex:1;min-width:0;padding:14px 8px;border:2px solid var(--c,var(--ink));color:var(--c,var(--ink));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vote button[aria-pressed="true"]{background:var(--c,var(--ink));color:var(--paper)}
#hello{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
#hello[hidden]{display:none}
#hello>div{display:flex;flex-direction:column;gap:12px;width:min(280px,100%);padding:16px;background:var(--paper);border:2px solid var(--ink)}
#hello label{letter-spacing:.06em}
#hello input{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;padding:8px 10px;outline:none;
  -webkit-user-select:text;user-select:text}
#hello #join{color:var(--paper);background:var(--ink);padding:10px}
#hello #watch{border:2px solid var(--ink);padding:8px}
#hello button:disabled{opacity:.35;cursor:default}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}