:root{color-scheme:dark;--tint: #c8e8d4;--tint-dim: #5a8870;--bg: #050807}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace;color:var(--tint);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:none}.canvas-host{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden}.canvas-host canvas{display:block;width:100%;height:100%}.hint{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.05em;color:var(--tint-dim);pointer-events:none;text-transform:uppercase}.dpad{position:absolute;bottom:24px;left:24px;width:168px;height:168px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;opacity:.55;z-index:10}.dpad-btn{appearance:none;background:#141c18b8;border:1px solid var(--tint-dim);color:var(--tint);font-family:inherit;font-size:22px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}.dpad-btn:active,.dpad-btn.is-down{background:#3c6e50e6;color:#eafff0}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}@media(hover:hover)and (pointer:fine){.dpad{opacity:.3}.dpad:hover{opacity:.7}}