:root {color-scheme:dark;--mint:#a5ff47;--ink:#08080d;--screen:#11121a;--app-height:100dvh;}
* {box-sizing:border-box;}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0a0d12;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
body{display:flex;align-items:center;justify-content:center;color:white;touch-action:pan-y;font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(transparent 95%,#41302b 96%),linear-gradient(90deg,transparent 95%,#41302b 96%);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 50%,black,transparent 85%);}
.ambient{position:fixed;width:380px;height:380px;border-radius:100%;filter:blur(110px);opacity:.16;pointer-events:none;}
.ambient-left{background:#dd601d;left:calc(50% - 500px);top:40%;}.ambient-right{background:#7efe49;right:calc(50% - 500px);top:15%;}
.shell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:var(--app-height,100dvh);min-height:0;}
.badge-row,.footer-hint{width:min(390px,calc(100vw - 12px));display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#82918e;flex-shrink:0;}
.footer-hint{justify-content:center;gap:12px;color:#6f736e;}.footer-hint span{color:var(--mint);}
.machine{position:relative;width:min(520px,calc(100vw - 16px),calc((var(--app-height,100dvh) - 76px)*0.462));height:calc(var(--app-height,100dvh) - 76px);overflow:hidden;border:4px solid #42474a;box-shadow:0 0 0 4px #060607,0 0 0 5px #252828,0 18px 65px #000b,0 0 42px #8dfc3020;background:#0a0d12;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.machine canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:pan-y;cursor:crosshair;}
.error{position:absolute;top:40%;left:10%;width:80%;padding:20px;background:#1e1217;border:3px solid #ff5a77;white-space:pre-wrap;color:#fff;font-size:13px;z-index:2;}
/* Full-bleed on every mobile-width browser, irrespective of orientation.
   Portrait contents reflow in JS; no aspect-ratio clamp, letterbox or max-width. */
@media (max-width:767px){
 .ambient,.badge-row,.footer-hint{display:none;}
 body{display:block;}
 .shell{position:fixed;left:0;top:0;width:100%;height:var(--app-height,100dvh);gap:0;display:block;}
 .machine{display:block;width:100%;height:100%;max-width:none;max-height:none;border:0;box-shadow:none;margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
 .machine canvas{width:100%;height:100%;min-height:150vw;}
 body.is-playing .machine{overflow:hidden;}
 body.is-playing .machine canvas{min-height:0;touch-action:none;}
}