*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:#777}
body{min-height:100svh;display:grid;place-items:center;font-family:Georgia,'Malgun Gothic',serif}
main{width:min(576px,90vw);padding:32px 0}
/* Shaded plastic is rasterized at game-like resolution, then enlarged without smoothing. */
.frame{
 --monitor-pixel:3px;
 position:relative;width:100%;padding:0;background:transparent;
 border-style:solid;border-color:transparent;
 border-width:calc(var(--monitor-pixel)*10) calc(var(--monitor-pixel)*10) calc(var(--monitor-pixel)*20);
 border-image-source:url('assets/monitor-frame-v2.png');
 border-image-slice:20 20 40 20;border-image-repeat:stretch;
 image-rendering:pixelated;
}
.screen-shell{position:relative;background:#000}
canvas{display:block;width:100%;aspect-ratio:5/4;image-rendering:pixelated;background:#000;outline:none;touch-action:none}
button{font:inherit;cursor:pointer}
.veil{position:absolute;inset:0;background:#101c1b55;border:0;color:#f0eee1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 1px 3px #253b37}
.veil[hidden]{display:none}
.title{font-size:26px;letter-spacing:12px;margin-left:12px}
.subtitle{font-size:11px;letter-spacing:2px;margin-top:17px}
.action{margin-top:50px;font-size:10px;letter-spacing:3px}
.monitor-chin{position:absolute;left:0;right:0;bottom:calc(var(--monitor-pixel)*-18);height:calc(var(--monitor-pixel)*16);pointer-events:none}
.monitor-mark,.monitor-controls,.monitor-power{position:absolute;display:block;image-rendering:pixelated;background-repeat:no-repeat;background-size:100% 100%}
.monitor-mark{left:0;top:calc(var(--monitor-pixel)*5);width:calc(var(--monitor-pixel)*19);height:calc(var(--monitor-pixel)*6);background-image:url('assets/monitor-label-v2.png')}
.monitor-controls{left:50%;top:calc(var(--monitor-pixel)*4);transform:translateX(-50%);width:calc(var(--monitor-pixel)*24);height:calc(var(--monitor-pixel)*8);background-image:url('assets/monitor-buttons-v2.png')}
.monitor-power{right:0;top:calc(var(--monitor-pixel)*2);width:calc(var(--monitor-pixel)*18);height:calc(var(--monitor-pixel)*12);background-image:url('assets/monitor-power-v2.png')}
.below{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font:10px 'Malgun Gothic',sans-serif;letter-spacing:.4px;color:#626561}
#sound{border:0;background:none;padding:5px 0 5px 12px;color:#777;font-size:10px}
.help{font:10px 'Malgun Gothic',sans-serif;color:#393c39;margin:7px 0 0}
.touch{margin-top:24px;text-align:center}
.touch button{color:#888;background:#171917;border:1px solid #383b36;touch-action:none}
@media(max-width:420px){main{width:94vw}.frame{--monitor-pixel:2px}.below{font-size:8px}}
#mobile-mode{display:block;margin:12px auto 0;background:none;border:0;color:#666;font:10px 'Malgun Gothic',sans-serif;padding:8px}

.touch{display:none;grid-template-columns:1fr 1fr;grid-template-rows:auto 144px auto;column-gap:12px;row-gap:12px;user-select:none;-webkit-user-select:none;align-items:center}
body.mobile-controls .touch{display:grid}
body.mobile-controls .help{display:none}
body.mobile-controls #hint{font-size:10px}
.touch button{width:44px;min-width:44px;height:44px;margin:0;border-radius:5px;-webkit-tap-highlight-color:transparent}
.touch button.pressed{background:#353e31;border-color:#89967b;color:#dadfd4}
.touch-pad{grid-column:1;grid-row:2;justify-self:center;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:6px}
.touch-pad [data-key="KeyW"]{grid-column:2;grid-row:1}
.touch-pad [data-key="KeyA"]{grid-column:1;grid-row:2}
.touch-pad [data-key="KeyD"]{grid-column:3;grid-row:2}
.touch-pad [data-key="KeyS"]{grid-column:2;grid-row:3}
.touch-actions{grid-column:2;grid-row:1;display:flex;justify-content:center;gap:5px}
.touch-actions button{width:auto;min-width:0;padding:0 9px;font:11px 'Malgun Gothic',sans-serif}
.look-control{grid-column:2;grid-row:2;display:grid;place-items:center;height:144px}
#view-stick{position:relative;display:grid;place-items:center;width:100%;max-width:220px;height:144px;border:1px solid #41483c;border-radius:8px;background:#171b16;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#view-stick.engaged{background:#22291e;border-color:#69755e}
.trackpad-label{font:10px 'Malgun Gothic',sans-serif;color:#626c5b;pointer-events:none}
.look-hint{grid-column:2;grid-row:3;font:9px 'Malgun Gothic',sans-serif;color:#666;text-align:center}
@media(pointer:coarse){body{overscroll-behavior:none}main{padding:18px 0}}
@media(max-height:540px) and (orientation:landscape){body.mobile-controls main{width:min(440px,56vw,calc((100svh - 118px)*1.25));padding:12px 0}body.mobile-controls .frame{--monitor-pixel:2px}body.mobile-controls .touch{position:fixed;inset:auto 8px 10px;pointer-events:none;margin:0;grid-template-columns:144px 144px;justify-content:space-between;gap:5px}.touch-pad,.touch-actions,.look-control{pointer-events:auto}}

#render-status{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#101810ed;color:#e0e3d8;text-align:center;font:12px/1.8 'Malgun Gothic',sans-serif}#render-status[hidden]{display:none}

.touch-actions{display:grid;grid-template-columns:repeat(2,minmax(44px,1fr));width:min(100%,180px);justify-self:center}
.touch-actions button{width:100%;height:38px}
.touch-actions button:disabled{opacity:.55}
#action-message{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;text-align:center;pointer-events:none;color:#e4e8db;text-shadow:0 1px 2px #152015;font:11px/1.6 'Malgun Gothic',sans-serif}
#action-message[hidden]{display:none}

.monitor-controls{display:flex;gap:calc(var(--monitor-pixel)*2);pointer-events:auto;width:calc(var(--monitor-pixel)*18);height:calc(var(--monitor-pixel)*8);background-image:none}
.monitor-controls button{width:calc(var(--monitor-pixel)*8);height:100%;padding:0;border:0;background:transparent center/100% 100% no-repeat;image-rendering:pixelated;cursor:pointer;touch-action:manipulation}
#volume-down{background-image:url('assets/monitor-volume-minus.png')}
#volume-up{background-image:url('assets/monitor-volume-plus.png')}
.monitor-controls button:active{transform:translateY(calc(var(--monitor-pixel)*.5))}
.monitor-controls button:focus-visible{outline:1px dotted #686e62;outline-offset:1px}

.frame{visibility:hidden}
.frame.assets-ready{visibility:visible}

#connection-status{position:fixed;bottom:5px;right:10px;font:10px "Malgun Gothic",sans-serif;color:#65675f;margin:0;pointer-events:none}