*{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(540px,88vw);padding:32px 0}.frame{position:relative;width:100%;padding:18px;background:#b8b9b3;border:2px solid #c7c8c1;box-shadow:inset 2px 2px #d7d8d0,inset -3px -3px #878982}canvas{display:block;width:100%;aspect-ratio:5/4;image-rendering:pixelated;background:#55b4d6;outline:none;touch-action:none}button{font:inherit;cursor:pointer}.veil{position:absolute;inset:18px;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,#resume{margin-top:50px;font-size:10px;letter-spacing:3px}#resume{background:transparent;border:0;color:inherit;padding:12px}.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{display:none;text-align:center;margin-top:24px}.touch button{width:44px;height:38px;margin:3px;color:#888;background:#171917;border:1px solid #383b36;touch-action:none}@media(pointer:coarse){.touch{display:block}.help{display:none}#hint{font-size:9px}}@media(max-width:420px){main{width:92vw}.frame{padding:12px}.veil{inset:12px}.below{font-size:8px}}

/* CRT housing only: no filters, scanlines or distortion on the game image. */
main{width:min(584px,90vw)}
.frame{padding:25px 27px 0;border:1px solid #93978d;border-radius:10px 10px 15px 15px;background:linear-gradient(115deg,#bfc2b7 0%,#afb3a7 43%,#a4a99c 100%);box-shadow:inset 2px 3px 2px #e1e3d6,inset -3px -4px 3px #747b6e,0 4px 0 #42493e}
.screen-shell{position:relative;border:10px solid;border-color:#6c7467 #899080 #c0c4b6 #737c6c;border-radius:5px;background:#313b31;box-shadow:0 -1px 1px #e5e7dd,inset 0 0 0 2px #252c26,0 2px 1px #d4d7cb;padding:2px}
.veil{inset:2px}
.monitor-chin{height:65px;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 4px 5px;font-family:Arial,sans-serif;color:#586150}
.monitor-mark{font-size:9px;font-weight:700;letter-spacing:2px;text-shadow:0 1px #d0d4c5}
.monitor-controls{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;margin-top:11px}
.monitor-controls span{width:16px;height:6px;border-radius:4px;background:linear-gradient(#929a89,#bec5b4);box-shadow:0 -1px 1px #69725f,0 1px #d2d7c9}
.monitor-controls i{width:6px;height:6px;border-radius:50%;background:#a1a995;box-shadow:inset 0 1px 1px #6e7864,0 1px #d0d6c3}
.monitor-power{display:flex;align-items:center;gap:12px;margin-right:5px}
.power-led{width:3px;height:3px;border-radius:50%;background:#bcdf7c;box-shadow:0 0 3px #b9df7870}
.power-key{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#67735c;background:linear-gradient(135deg,#b5bda9,#9aa68c);border:1px solid #87947a;box-shadow:0 1px 1px #cfd6c4,inset 1px 1px 2px #c9d0bd}
@media(max-width:420px){main{width:94vw}.frame{padding:18px 17px 0}.screen-shell{border-width:8px}.veil{inset:2px}.monitor-chin{height:54px}.monitor-mark{font-size:8px}.monitor-controls{gap:5px}.monitor-controls span{width:12px}}

.power-key{position:relative}.power-key::before{content:"";width:9px;height:9px;border:1px solid #67735c;border-top-color:transparent;border-radius:50%}.power-key::after{content:"";position:absolute;width:1px;height:6px;background:#67735c;top:5px;left:10px}

#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;width:112px;height:112px;border:1px solid #41483c;border-radius:50%;background:radial-gradient(circle,#22271f,#11140f);touch-action:none;box-shadow:inset 0 2px 9px #0008;-webkit-tap-highlight-color:transparent}
#view-stick::before,#view-stick::after{content:"";position:absolute;background:#343d2e;pointer-events:none}
#view-stick::before{width:1px;height:76px;top:17px;left:55px}
#view-stick::after{height:1px;width:76px;left:17px;top:55px}
.stick-thumb{position:absolute;left:33px;top:33px;width:44px;height:44px;border:1px solid #69755e;border-radius:50%;background:linear-gradient(#424c3b,#2b3227);box-shadow:0 3px 6px #0008;pointer-events:none;z-index:1;transform:translate(var(--stick-x,0px),var(--stick-y,0px))}
#view-stick.engaged .stick-thumb{background:linear-gradient(#617053,#3e4935);border-color:#99ab85}
.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(490px,62vw);padding:12px 0}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}.monitor-chin{height:44px}}