@import url("https://pixelspace.anirudha.dev/pixelspace-font.css");
:root{--night:#05060e;--ink:#f1e6d6;--dim:#a8988a;--amber:#ffcf7a;--panel:rgba(12,9,10,.88);--edge:rgba(255,160,90,.28);--font:"Pixelspace","Courier New",monospace;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);overflow:hidden;font:16px/1.5 var(--font);-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;left:0;top:0;display:block;image-rendering:crisp-edges;image-rendering:pixelated;background:var(--night);cursor:pointer}
.hud{position:fixed;inset:0;pointer-events:none;transition:opacity .5s}.hud.off{opacity:0}.hud.off *{pointer-events:none!important}
.title{position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 12px);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--edge);padding:6px 12px}
.brand{margin:0;font-weight:400;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}.clock{font-variant-numeric:tabular-nums}.clock .colon.off{visibility:hidden}
.dock{position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
button{font:16px var(--font);letter-spacing:.08em;text-transform:uppercase;background:var(--panel);color:var(--ink);border:1px solid var(--edge);padding:8px 12px;cursor:pointer;border-radius:0;pointer-events:auto}
button:hover{border-color:var(--amber);color:var(--amber)}button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}#logBtn.icon{padding:8px;line-height:0}
.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--edge);padding:12px 16px 16px;width:min(560px,100%);max-height:58vh;overflow:auto;font-size:16px}
.stats,.foot{margin:0;color:var(--dim);overflow-wrap:anywhere}.stats{margin-bottom:12px}.stats b{color:var(--amber);font-weight:400;font-variant-numeric:tabular-nums}.panel ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.panel li{display:grid;grid-template-columns:auto 1fr;gap:12px}.panel li span{min-width:0}.panel time{color:var(--dim);font-variant-numeric:tabular-nums}.foot{margin-top:12px}
[hidden]{display:none!important}.embed .hud{display:none}.embed #scene{cursor:default}
@media(max-width:440px){.clock{display:none}}
@media(prefers-reduced-motion:reduce){.hud{transition:none}}
