html,body{margin:0;height:100%;background:#1b1b26;color:#eee;font-family:system-ui,sans-serif;overflow:hidden}
header{position:fixed;top:0;left:0;right:0;padding:8px 14px;background:#12121add;z-index:5;display:flex;gap:12px;align-items:baseline}
header h1{margin:0;font-size:18px;color:#7ee08a}header span{font-size:13px;opacity:.8}
#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#controls{position:fixed;right:12px;bottom:40px;display:flex;flex-direction:column;gap:6px;z-index:5}
#controls button{width:40px;height:40px;font-size:22px;background:#2c2c3c;color:#fff;border:2px solid #555;border-radius:6px;cursor:pointer}
#controls button:hover{background:#3d3d55}
#tip{position:fixed;z-index:6;pointer-events:none;background:#101018ee;border:2px solid #7ee08a;padding:6px 10px;border-radius:6px;font-size:13px;max-width:240px}
#tip b{color:#7ee08a}
footer{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:12px;padding:6px;background:#12121add;z-index:5}
#controls button.off{opacity:.45}
#hint{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:5;background:#12121acc;padding:4px 10px;border-radius:6px;font-size:12px;pointer-events:none}
#dpad{position:fixed;left:14px;bottom:40px;z-index:5;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px;touch-action:none;user-select:none}
#dpad button{background:#2c2c3ccc;color:#fff;border:2px solid #555;border-radius:6px;font-size:18px;touch-action:none}
#dpad .u{grid-column:2;grid-row:1}#dpad .l{grid-column:1;grid-row:2}#dpad .r{grid-column:3;grid-row:2}#dpad .d{grid-column:2;grid-row:3}
@media (hover:hover) and (pointer:fine){#dpad{opacity:.55}}