:root { --ink: #10213a; --accent: #ff8a2a; --glass: rgba(255,255,255,.86); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #aae5fd; color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; overflow: hidden; }
#app { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

#hud { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.pill { background: var(--glass); border-radius: 999px; padding: 8px 16px; font-size: 18px; font-weight: 700; box-shadow: 0 2px 8px rgba(16,33,58,.18); }
.pill b { color: #1d6fe0; font-size: 22px; }
#clock { font-variant-numeric: tabular-nums; }
.btn-sound { margin-left: auto; pointer-events: auto; border: 0; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
#hint { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }

.screen { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #0e2a4a; }
.screen .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel { position: relative; margin: 16px; padding: 22px 26px 18px; max-width: 520px; text-align: center; background: var(--glass); border-radius: 22px; box-shadow: 0 10px 30px rgba(16,33,58,.25); }
#title .panel { align-self: start; margin-top: max(5vh, 16px); }
#clear .panel { align-self: end; margin-bottom: max(4vh, 16px); }
h1, h2 { margin: 0 0 6px; font-size: clamp(34px, 7vw, 54px); letter-spacing: .06em; color: #1d4f9a; }
.lead { margin: 0 0 16px; font-size: 18px; line-height: 1.6; }
.lead b { font-size: 24px; color: #1d6fe0; font-variant-numeric: tabular-nums; }
.panel button { border: 0; border-radius: 999px; padding: 14px 40px; font: inherit; font-size: 20px; font-weight: 700; color: #fff; background: var(--accent); cursor: pointer; box-shadow: 0 4px 0 #c45f10; }
.panel button:disabled { background: #9aa7b8; box-shadow: 0 4px 0 #6f7b8b; cursor: progress; }
.panel button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #c45f10; }
.keys { margin: 14px 0 0; font-size: 14px; }
.keys .sp { display: none; }
.touch .keys .pc { display: none; } .touch .keys .sp { display: inline; }
.credit { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #3b4d66; }
.credit a { color: #1d5fc0; }

#pad { position: absolute; inset: 0; pointer-events: none; }
#stick { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.8); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 39px; top: 39px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#jump { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%; border: 0; font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: rgba(255,138,42,.92); box-shadow: 0 4px 0 #c45f10; pointer-events: auto; touch-action: none; }
#jump.on { transform: translateY(2px); box-shadow: 0 2px 0 #c45f10; }
#error { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px; background: #fff3f0; color: #8a1c0c; border-radius: 10px; font-size: 14px; }
@media (max-width: 600px) { .pill { font-size: 15px; padding: 6px 12px; } .pill b { font-size: 18px; } .lead { font-size: 16px; } .panel { padding: 18px 16px 14px; } }