:root{--hud-bg: rgba(13, 21, 32, .72);--hud-border: rgba(255, 255, 255, .2);--text: #f7fbff;--button-bg: #f5f8ff;--button-text: #1c2230}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:BIZ UDPGothic,Hiragino Kaku Gothic ProN,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 20%,#2d5a80,#1a2035 65%);touch-action:none}canvas{display:block}#app{width:100%;height:100%}#hud{position:fixed;top:10px;left:10px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border-radius:12px;border:1px solid var(--hud-border);background:var(--hud-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#hud button{border:none;border-radius:10px;padding:8px 10px;font-size:14px;background:var(--button-bg);color:var(--button-text)}#hud label{display:inline-flex;align-items:center;gap:6px;font-size:14px}#hud select{border:none;border-radius:10px;padding:8px 10px;font-size:14px;background:var(--button-bg);color:var(--button-text)}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#090e19a6}.modal.hidden{display:none}.card{width:min(480px,92vw);padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(165deg,#1e3150eb,#101c2deb);text-align:center}.card h1{margin:0 0 8px;font-size:26px}.card p{margin:6px 0;line-height:1.55}.card button{margin-top:14px;border:none;border-radius:999px;padding:10px 20px;font-size:15px;background:#ffde66;color:#212941}@media(max-width:700px){#hud{right:10px;left:10px}}