*{box-sizing:border-box}html{background:#090909;color:#aaa;font:13px 'Courier New',monospace}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px}main{width:min(940px,100%);border:2px solid #777;background:#050505}header{height:36px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:#222;color:#ddd;gap:8px}header div{display:flex;gap:5px}button{font:inherit;color:#ddd;background:#151515;border:1px solid #666;border-radius:0;padding:7px 10px;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,canvas:focus-visible{outline:2px solid #2354ff;outline-offset:2px}button[hidden],[hidden]{display:none!important}#surface{position:relative;display:flex;flex-direction:column;align-items:center;background:#000}canvas{display:block;width:min(100%,calc((100dvh - 170px)*4/3));height:auto;aspect-ratio:4/3;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}#boot{aspect-ratio:4/3;width:100%;display:grid;align-content:center;justify-items:center;text-align:center;color:#2354ff;font-weight:bold;font-size:clamp(20px,4vw,38px);letter-spacing:2px}#boot button{margin-top:30px;color:#2354ff}footer{padding:12px;text-align:center;font-size:12px;line-height:1.5}footer p{margin:6px 0}footer button{font-size:12px}main.expanded{width:100%;max-width:none}#touch{display:none;width:100%;justify-content:space-between;padding:8px 12px;gap:8px}#touch div{display:flex;gap:10px}#touch button{min-width:52px;min-height:48px;touch-action:none;user-select:none;-webkit-user-select:none;color:#2354ff;border-color:#333;font-weight:bold}#restore{margin:20px}#status:empty{display:none}@media(any-pointer:coarse){#touch{display:flex}canvas{width:min(100%,calc((100dvh - 250px)*4/3))}}@media(max-width:600px){body{padding:8px}header{font-size:11px;padding:4px}header button{padding:5px 8px}footer{padding:8px}footer p{font-size:11px}canvas{width:100%}}@media(max-height:500px) and (orientation:landscape){body{padding:3px}footer{display:none}#surface{flex-direction:row}canvas{width:auto;height:calc(100dvh - 48px)}#touch{width:100px;flex-direction:column;padding:5px}#touch div{gap:3px}#touch button{min-width:42px;padding:5px}}

/* The host owns the window chrome; the game keeps sound and pause controls. */
.embedded body{padding:0;display:block;height:100dvh;min-height:0;overflow:hidden}
.embedded main{height:100%;width:100%;border:0;display:flex;flex-direction:column}
.embedded header{height:30px;flex-shrink:0;justify-content:flex-end;background:#000}
.embedded header>span,.embedded #max,.embedded #min,.embedded #close,.embedded #credits{display:none}
.embedded #surface{flex:1;min-height:0;justify-content:center;--touch-height:0px}
.embedded canvas{width:min(100%,calc((100dvh - 82px - var(--touch-height))*4/3));height:auto;flex-shrink:0}
.embedded footer{flex-shrink:0;padding:4px;font-size:11px}
.embedded footer>span{display:none}
.embedded footer p{margin:3px 0}
@media(any-pointer:coarse){.embedded #surface{--touch-height:64px}.embedded #touch{flex-shrink:0}}
@media(max-height:500px) and (orientation:landscape){.embedded #surface{flex-direction:row}.embedded canvas{width:auto;max-width:calc(100% - 110px);height:auto;max-height:calc(100dvh - 32px)}.embedded footer{display:none}.embedded #touch{width:110px}}