:root{color-scheme:dark;--bg: #0b0b12}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#cfd2e0;font:14px/1.4 ui-monospace,Cascadia Code,Consolas,monospace}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}#screen{width:min(96vw,1280px);height:auto;aspect-ratio:320 / 200;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none;background:#000;border:1px solid #2a2a3a;box-shadow:0 8px 40px #0009}#hud{margin:0;opacity:.75;text-align:center}#controls{position:fixed;left:0;right:0;bottom:0;display:none;justify-content:flex-end;align-items:flex-end;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));pointer-events:none;z-index:10;user-select:none;-webkit-user-select:none}body.touch #controls,body.force-touch #controls{display:flex}body.touch #hud,body.force-touch #hud{display:none}@media (hover: none) and (pointer: coarse){#controls{display:flex}#hud{display:none}}body.touch,body.force-touch{overflow:hidden;touch-action:none}body.touch #app,body.force-touch #app{justify-content:flex-start;gap:4px;padding:4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body.touch #screen,body.force-touch #screen{width:min(100vw,160vh);width:min(100vw,160dvh)}.joy-zone{position:fixed;left:0;bottom:0;width:50%;height:55%;pointer-events:auto;touch-action:none}.joy-base{position:fixed;width:clamp(104px,32vmin,168px);height:clamp(104px,32vmin,168px);transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.4);background:#14142052;border-radius:50%;pointer-events:none;display:none;z-index:11}.joy-base.on{display:block}.joy-thumb{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);background:#8c8ce6bf;border:2px solid rgba(255,255,255,.8);border-radius:50%}.actions{display:grid;grid-template-columns:repeat(2,clamp(58px,16vmin,104px));gap:8px}.tbtn{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:2px solid rgba(255,255,255,.65);background:#14142080;color:#eaeaff;border-radius:14px;font:bold clamp(11px,3.4vmin,17px) ui-monospace,monospace;min-width:0;min-height:clamp(44px,11vmin,66px);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tbtn.on{background:#7878d2cc;border-color:#fff}.tbtn.toggle.god{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:auto;height:auto;min-height:0;padding:4px 14px;font-size:clamp(16px,5vmin,24px);border-radius:12px;opacity:.5}.tbtn.toggle.god.active{background:#28b95ad9;border-color:#fff;opacity:1}#fs-toggle{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:20;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:2px solid rgba(255,255,255,.55);background:#1414208c;color:#eaeaff;border-radius:10px;padding:3px 11px;font:20px/1 ui-monospace,monospace;cursor:pointer;opacity:.7}#fs-toggle.active{background:#7878d2d9;border-color:#fff;opacity:1}
