*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#060b12;color:#8ba0a6}body{font:11px 'Courier New',monospace;display:flex;justify-content:center;align-items:center;padding:22px 18px;background:radial-gradient(ellipse at 50% 35%,#10212b,#060b12 68%)}main{width:max-content;max-width:100%}header{display:flex;justify-content:space-between;gap:20px;letter-spacing:2px;font-size:10px;padding:0 0 15px;color:#6d858f}.red{color:#ad5950}.divider{padding:0 10px;color:#37525f}.dim{color:#3e5b68;margin-left:9px}#cabinet{position:relative;background:#03070d;border:1px solid #2e4550;box-shadow:0 20px 85px #0008;padding:6px}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;width:640px;height:480px;background:#071019;max-width:100%}.corner{position:absolute;width:11px;height:11px;border-color:#a17758}.tl{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}.tr{top:-1px;right:-1px;border-top:1px solid;border-right:1px solid}.bl{bottom:-1px;left:-1px;border-bottom:1px solid;border-left:1px solid}.br{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 12px;border-bottom:1px solid #1b303b}.tag{color:#c29470;font-size:10px;letter-spacing:1px}.controls{font-size:10px;color:#65818a}.controls b{font-weight:normal;color:#a7aaa0}nav{display:flex;gap:8px}button{font:10px 'Courier New',monospace;background:transparent;border:1px solid #2d4653;color:#9da69d;padding:7px 10px;cursor:pointer;touch-action:none}button:hover,button:focus-visible{border-color:#ac8059;color:#f1c593;background:#182731}.extras{font-size:9px;color:#607984;padding-top:12px;letter-spacing:.6px}.extras span{float:right;font-size:8px;color:#395767}.hint{text-align:center;font-size:10px;letter-spacing:1.5px;color:#465f6c;margin:19px 0 0}#touch{display:none;justify-content:space-between;padding:13px 0}.dpad{display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:34px 34px;gap:3px}.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.action{display:flex;align-items:center;gap:5px}.action button{height:48px;min-width:34px;font-size:14px;background:#132432}.action button span{display:block;font-size:8px;color:#708b92}.action button:nth-child(4),.action button:nth-child(5){font-size:8px;min-width:30px;padding:4px}#cabinet:fullscreen{width:100%;height:100%;border:0;display:flex;align-items:center;justify-content:center;padding:0;background:#000}#cabinet:fullscreen canvas{max-width:none}@media(max-width:700px){body{padding:10px 8px;align-items:flex-start}header{font-size:8px;letter-spacing:.6px;gap:5px;padding-bottom:10px}.dim{display:none}footer{flex-wrap:wrap;gap:10px}.controls{order:3;width:100%;font-size:8px}nav{margin-left:auto}.extras span{display:none}.extras{font-size:8px}.hint{font-size:8px;letter-spacing:.4px}}@media(pointer:coarse){#touch{display:flex}}

#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#071019;z-index:2;letter-spacing:2px;color:#d0b481}#loading[hidden]{display:none}

/* Game controls must remain buttons during long presses and multi-touch on iOS. */
button,button *,#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#touch,#touch *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.demo{color:#c8a172;letter-spacing:.5px;margin-left:6px}

/* Three controller sections: D-pad / center system buttons / four actions. */
#touch{align-items:center;gap:10px}
.dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:3px;flex-shrink:0}
.system-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1;min-width:44px}
.system-buttons button{font-size:8px;min-height:28px;width:54px;padding:6px 3px;background:#101c27;border-radius:12px}
.action{display:grid;grid-template-columns:repeat(2,48px);gap:6px;flex-shrink:0}
.action button,.action button:nth-child(4){width:48px;height:44px;min-width:0;padding:4px;font-size:14px;background:#132432;border-radius:9px}
.action button span{font-size:8px}
.action button[data-key="h"]{border-color:#775b4b}
.action button[data-key="l"]{border-color:#536776}
#touch button:active{background:#29434d;border-color:#d3ad77;color:#ffe0a4}
@media(max-width:360px){#touch{gap:5px}.dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,38px)}.action{grid-template-columns:repeat(2,44px);gap:4px}.action button,.action button:nth-child(4){width:44px}.system-buttons button{width:48px}}