:root{--panel:#0f172ac7;--panel-border:#94a3b840;--text:#f1f5f9;--muted:#cbd5e1;--accent:#22d3ee;--accent-dark:#0891b2;--z-hud:20;--z-overlay:50}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;background:#0f172a;font-family:Noto Sans JP,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#app canvas{display:block}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);border-radius:12px}#hud{pointer-events:none;z-index:var(--z-hud);position:fixed;inset:0}#hud>*{pointer-events:auto}#title-chip{align-items:center;gap:12px;padding:10px 16px;display:flex;position:absolute;top:16px;left:16px}#title-chip h1{letter-spacing:.04em;font-size:15px;font-weight:600}#floor-badge{color:#06232b;background:var(--accent);text-align:center;border-radius:6px;min-width:34px;padding:3px 9px;font-size:13px;font-weight:700}#spots{flex-direction:column;gap:8px;padding:10px;display:flex;position:absolute;top:16px;right:16px}#spots button{color:var(--text);border:1px solid var(--panel-border);cursor:pointer;background:#33415599;border-radius:8px;min-width:128px;min-height:44px;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s}#spots button:hover{border-color:var(--accent-dark);background:#0891b280}#spots button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#minimap-wrap{padding:10px;position:absolute;bottom:16px;right:16px}#minimap{border-radius:6px;display:block}#help-chip{color:var(--muted);padding:10px 14px;font-size:12.5px;line-height:1.7;position:absolute;bottom:16px;left:16px}#help-chip kbd{color:var(--text);background:#475569b3;border-radius:4px;margin:0 1px;padding:1px 7px;font-family:inherit;font-size:11.5px}#crosshair{background:#ffffffbf;border-radius:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;position:absolute;top:50%;left:50%;box-shadow:0 0 4px #0009}.overlay{z-index:var(--z-overlay);-webkit-backdrop-filter:blur(6px);background:#080e1ad1;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.overlay.hidden{opacity:0;pointer-events:none}.overlay-card{text-align:center;width:calc(100% - 48px);max-width:520px;padding:36px 40px}.overlay-card h1{letter-spacing:.06em;margin-bottom:6px;font-size:26px;font-weight:700}.overlay-card .sub{color:var(--accent);margin-bottom:22px;font-size:14px}.overlay-card .desc{color:var(--muted);text-align:left;margin-bottom:24px;font-size:14px;line-height:1.9}.overlay-card .desc strong{color:var(--text);font-weight:600}#start-btn,#resume-btn{letter-spacing:.08em;color:#052228;background:var(--accent);cursor:pointer;border:none;border-radius:10px;min-height:48px;padding:14px 48px;font-family:inherit;font-size:16px;font-weight:700;transition:background-color .2s,transform .15s}#start-btn:hover,#resume-btn:hover{background:#67e8f9}#start-btn:focus-visible,#resume-btn:focus-visible{outline-offset:2px;outline:2px solid #fff}#joystick{border:1.5px solid var(--panel-border);background:#1e293b73;border-radius:50%;width:128px;height:128px;display:none;position:absolute;bottom:96px;left:28px}#joystick-knob{background:#22d3eebf;border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%;box-shadow:0 2px 10px #0006}body.touch #joystick{display:block}body.touch #help-chip,body.touch #crosshair{display:none}body.touch #minimap-wrap{padding:6px;bottom:12px;right:12px}body.touch #spots{padding:8px;top:auto;bottom:132px;right:12px}body.touch #spots button{min-width:104px;min-height:42px;padding:9px 12px;font-size:13px}@media (width<=700px){#title-chip{padding:8px 12px}#title-chip h1{font-size:13px}.overlay-card{padding:26px 22px}.overlay-card h1{font-size:21px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}