@font-face { font-family: VT323; src: url('../assets/fonts/VT323-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: block; }
:root { color-scheme: dark; background: #080c0b; font-family: VT323, ui-monospace, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(ellipse, #202e26 0, #080c0b 76%); }
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { position: absolute; left: 50%; top: 50%; width: 800px; height: 400px; transform-origin: 50% 50%; background: #030605; box-shadow: 0 0 0 1px #72876b44, 0 18px 100px #000; }
canvas { position: absolute; inset: 0; display: block; width: 800px; height: 400px; image-rendering: pixelated; pointer-events: none; }
#layer-interface { pointer-events: auto; touch-action: none; cursor: crosshair; }
#startup { position: absolute; inset: 0; z-index: 10; background: #101614; margin: 0; padding: 140px 60px; text-align: center; line-height: 2; font-size: 25px; font-weight: bold; color: #efcb78; }
#startup span { font-size: 13px; font-weight: normal; color: #becabd; }
noscript { position: fixed; z-index: 20; padding: 2rem; background: #171e19; color: white; }

button { font: inherit; font-size: 22px; color: #f1f2df; background: #17251f; border: 1px solid #8c9b77; padding: 8px 14px; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .65; cursor: default; }
button:focus-visible { outline: 3px solid #efcb78; outline-offset: 3px; }
#webapp-open { position: absolute; z-index: 2; left: 310px; top: 12px; width: 164px; height: 28px; padding: 0; font-size: 18px; }
#webapp-panel { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: #f1f2df; background: #15221d; border: 1px solid #8c9b77; padding: 20px; font-size: 22px; line-height: 1.15; }
#webapp-panel::backdrop { background: #030605dd; }
#webapp-panel h1 { margin: 0 0 12px; color: #efcb78; font-size: 30px; font-weight: 400; }
#webapp-panel p { margin: 12px 0; }
#webapp-status { color: #efcb78; }
@media (display-mode: standalone) { #webapp-open { border-color: #efcb78; } }
#save-panel{width:min(620px,92vw);max-height:88dvh;overflow:auto;color:#f1f2df;background:#17251f;border:2px solid #edc67c;border-radius:8px;padding:20px;font:18px system-ui,sans-serif}#save-panel::backdrop{background:#07110ee8}#save-panel h1{font-size:24px;margin-top:0}#save-content{display:flex;flex-wrap:wrap;gap:10px}#save-content p,#save-content fieldset{flex-basis:100%;margin:4px 0}#save-content fieldset{border:1px solid #66785b;display:flex;flex-wrap:wrap;gap:8px}#save-content button{min-height:42px;padding:8px 12px;background:#243d2f;color:#fff3c5;border:1px solid #81956b;border-radius:4px;font:inherit;cursor:pointer}#save-content button:disabled{opacity:.5;cursor:default}#save-message{font-size:15px;line-height:1.5;white-space:pre-wrap}
#controller-panel{width:min(720px,94vw);max-height:90dvh;overflow:auto;color:#f1f2df;background:#15221d;border:2px solid #edc67c;padding:20px;font:18px system-ui,sans-serif}#controller-panel::backdrop{background:#07110ee8}#controller-panel h1{font-size:25px;color:#edc67c}#controller-panel p{line-height:1.4}#controller-content{display:flex;flex-wrap:wrap;gap:12px}#controller-content p{width:100%}#controller-content label{display:flex;flex:1 1 250px;align-items:center;justify-content:space-between;gap:8px}#controller-panel select{max-width:100%;font:inherit;background:#243d2f;color:#fff3c5;padding:6px;border:1px solid #81956b}#controller-panel :focus{outline:3px solid #edc67c;outline-offset:2px}#controller-panel button{font:inherit;margin:8px 0}#controller-message{color:#edc67c}#controller-live{overflow-wrap:anywhere;font-size:15px}