*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{min-height:100dvh;background:#101215;color:#f8f4e8;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif}
button{font:inherit}
.app{height:100dvh;width:100vw;display:grid;grid-template-rows:auto 1fr;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:linear-gradient(180deg,#181b20,#101215 62%,#17130e)}
.hud{z-index:3;display:grid;grid-template-columns:1fr 1fr 1fr 48px;gap:7px;align-items:center;min-height:48px}
.metric{height:48px;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.075);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.metric span{color:#d7d2c3;font-size:11px;font-weight:800;white-space:nowrap}
.metric strong{font-size:clamp(18px,5vw,24px);line-height:1;font-weight:950;color:#ffd44c;font-variant-numeric:tabular-nums}
#restart{width:48px;height:48px;border:0;border-radius:8px;background:#ffd44c;color:#17130b;font-size:24px;font-weight:950;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.stage-wrap{position:relative;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#111316}
#game{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.overlay{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:12px;padding:22px;text-align:center;background:linear-gradient(180deg,rgba(16,18,21,.62),rgba(16,18,21,.96)),url('./assets/key-art.webp') center/cover no-repeat;z-index:2}
.overlay.is-open{display:grid}
.overlay img{width:min(34vw,138px);max-height:28dvh;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.34))}
.overlay h1{margin:0;font-size:clamp(24px,8vw,42px);line-height:1.08;letter-spacing:0;color:#fff}
.overlay p{max-width:520px;margin:0;color:#e6dfcc;font-size:clamp(13px,3.8vw,17px);line-height:1.55;font-weight:700}
.overlay button{min-width:148px;min-height:48px;border:0;border-radius:8px;background:#ffd44c;color:#15130d;font-size:18px;font-weight:950;box-shadow:0 12px 28px rgba(0,0,0,.34)}
@media (max-width:360px){.hud{grid-template-columns:1fr 1fr 1fr 44px;gap:5px}.metric,#restart{height:44px}.metric span{font-size:10px}.metric strong{font-size:18px}#restart{width:44px}}