body{margin:0;font-family:system-ui,sans-serif;background:#1b2a1b;color:#eee}
#menu{max-width:420px;margin:4vh auto;padding:0 12px}
h1{text-align:center}
.card{background:#263826;border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
form{display:flex;flex-direction:column;gap:10px}
input,select,button{padding:10px;border-radius:6px;border:1px solid #456;font-size:15px}
button{background:#4a9;color:#fff;border:0;cursor:pointer;font-weight:600}
button.secondary{background:#555}
a{color:#9cf}
label{display:flex;flex-direction:column;gap:4px}
.error{background:#a33;padding:10px;border-radius:6px}
#game{position:fixed;inset:0;background:#000}
#canvas{display:block;width:100%;height:100%;cursor:crosshair}
#hud{position:absolute;top:10px;left:10px;pointer-events:none;font-size:14px;text-shadow:0 0 3px #000}
#hpbar{position:relative;width:260px;height:22px;background:#400;border:2px solid #fff;border-radius:4px;overflow:hidden}
#hpfill{height:100%;background:#2c2;width:100%}
#hptext{position:absolute;inset:0;text-align:center;line-height:22px;font-weight:700}
#status{margin-top:6px;white-space:pre-line}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:4vh;background:#06121f}
#overlay.win{background:url(/static/winning.png) center/contain no-repeat,linear-gradient(rgba(5,10,20,.8),rgba(5,10,20,.8)),url(/static/winning.png) center/cover no-repeat}
#overlay.lose{background:url(/static/losing.png) center/contain no-repeat,linear-gradient(rgba(5,10,20,.8),rgba(5,10,20,.8)),url(/static/losing.png) center/cover no-repeat}
#overlay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
#overlay h1{position:absolute;width:1px;height:1px;overflow:hidden;margin:0}
#overlay p{position:relative;font-size:20px;white-space:pre-line;text-align:center;line-height:1.5;margin:0;padding:8px 18px;background:rgba(0,0,0,.65);border-radius:8px}
#overlay button{position:relative}
[hidden]{display:none!important}

#splash{position:fixed;inset:0;z-index:10;background:url(/static/coverart.png) center/contain no-repeat,linear-gradient(rgba(5,10,20,.8),rgba(5,10,20,.8)),url(/static/coverart.png) center/cover no-repeat;cursor:pointer;outline:none}
#splash-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}

#touch{position:absolute;inset:auto 0 0 0;height:0;pointer-events:none;z-index:5}
#touch>*{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#dpad{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.45)}
#dpad span{position:absolute;color:rgba(255,255,255,.8);font-size:22px;line-height:1;pointer-events:none}
#dpad .u{top:8px;left:50%;transform:translateX(-50%)}
#dpad .d{bottom:8px;left:50%;transform:translateX(-50%)}
#dpad .l{left:10px;top:50%;transform:translateY(-50%)}
#dpad .r{right:10px;top:50%;transform:translateY(-50%)}
#knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.4);border:2px solid #fff;pointer-events:none}
#abtn{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));width:104px;height:104px;border-radius:50%;font-size:46px;background:rgba(220,60,50,.55);border:4px solid rgba(255,255,255,.7);color:#fff;padding:0}
#abtn.down{background:rgba(255,100,80,.85);transform:scale(.94)}
#canvas{touch-action:none}
#overlay{z-index:10}