/* Pixel City styles.
   Layout: one full-bleed pixel canvas; a small terminal-style HUD floats top-left. Single night look by design. */
:root{
  --night:#07081a;
  --ink:#ece6ff;
  --dim:#9890c6;
  --amber:#ffcf7a;
  --panel:rgba(9,8,24,.8);
  --edge:rgba(170,160,240,.24);
  --f-pixel:"Silkscreen","Courier New",ui-monospace,monospace;
  --f-term:"VT323",ui-monospace,"Courier New",monospace;
  --share-size:22px;
  --share-opt-size:13px;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);overflow:hidden;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;width:100%;height:100%;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;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--edge);padding:7px 12px}
.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}
#logBtn{pointer-events:auto;background:var(--panel)}
#logBtn.icon{padding:9px;line-height:0}
#logBtn svg{display:block}
.brand{margin:0;font-weight:400;font-family:var(--f-pixel);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.clock{font-family:var(--f-term);font-size:26px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.clock .colon.off{visibility:hidden}
button{font-family:var(--f-pixel);font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--edge);padding:8px 12px;cursor:pointer;border-radius:0}
button:hover{border-color:var(--amber);color:var(--amber)}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--edge);padding:12px 14px 14px;width:min(600px,100%);max-height:58vh;overflow:auto;font-family:var(--f-term);font-size:23px;line-height:1.15}
.stats{margin:0 0 10px;font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.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:3px}
.panel li{display:grid;grid-template-columns:auto 1fr;gap:10px}
.panel li span{min-width:0}
.panel time{color:var(--dim);font-variant-numeric:tabular-nums}
.foot{margin:12px 0 0;font-family:var(--f-pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
@media (prefers-reduced-motion:reduce){.hud{transition:none}}
/* Base reset */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,sans-serif}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
/* Embedded as a background on another site: just the scene. */
.embed .hud{display:none}
.embed #scene{cursor:default}