:root{--bg:#073642;--a:#11d3d3;--b:#ffd166;--c:#ff6b6b;--d:#0b6b7a;--white:#fff8e8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(135deg,#083d4a,#0a8075);font-family:system-ui,Segoe UI,Arial,sans-serif;color:var(--white)}
#app{position:fixed;inset:0;display:grid;place-items:center}canvas{width:100vw;height:100vh;display:block;background:#74d6f7;touch-action:none}.hidden{display:none!important}
.screen{position:absolute;inset:0;display:none;place-items:center;padding:18px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.18),rgba(2,20,28,.58));z-index:5}.screen.show{display:grid}.card{width:min(94vw,460px);max-height:92vh;overflow:auto;background:rgba(5,48,58,.92);border:3px solid rgba(255,255,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.35);border-radius:28px;padding:24px;text-align:center;backdrop-filter:blur(10px)}.wide{width:min(94vw,760px)}.hero h1{font-size:clamp(34px,7vw,64px);margin:6px 0;color:var(--b);text-shadow:0 4px 0 #8b4b16}.logoMark{font-size:56px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.18))}button{width:100%;border:0;border-radius:18px;margin:8px 0;padding:14px 18px;font-size:20px;font-weight:900;color:#073642;background:linear-gradient(#fff5a8,#ffbe3b);box-shadow:0 7px 0 #a66011,0 12px 20px rgba(0,0,0,.25);cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #a66011}.hud{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;gap:8px;align-items:center;padding:10px;z-index:4;pointer-events:none}.pill{pointer-events:auto;background:rgba(4,45,53,.82);border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 11px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.2)}.phase{min-width:150px}.bar{height:7px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));border-radius:99px}.smallBtn{pointer-events:auto;width:48px;height:48px;margin:0 0 0 auto;padding:0;border-radius:16px}.smallBtn+ .smallBtn{margin-left:2px}.shoot{position:absolute;left:24px;bottom:24px;width:92px;height:92px;border-radius:50%;font-size:42px;z-index:4;background:linear-gradient(#8ff9ff,#18b7ff);box-shadow:0 9px 0 #006c9d,0 14px 25px rgba(0,0,0,.35)}.aim{position:absolute;right:0;top:0;width:50vw;height:100vh;z-index:3;display:grid;place-items:end center;color:rgba(255,255,255,.45);font-weight:900;letter-spacing:4px;pointer-events:auto}.aim span{margin-bottom:24px}.shopGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px}.shopItem{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.12);border-radius:18px;padding:12px}.shopItem h3{margin:4px 0;color:#ffd166}.shopItem button{font-size:16px;padding:10px}.tips{text-align:left;font-size:18px;line-height:1.35}@media (orientation:portrait){canvas{height:56.25vw;max-height:100vh}.card{padding:18px}.shoot{width:76px;height:76px;font-size:34px;left:16px;bottom:16px}.hud{flex-wrap:wrap}.pill{font-size:13px}.phase{min-width:120px}}