@import "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Bebas+Neue&display=swap";:root{--navy:#06111f;--green:#0ca368;--gold:#f5c76f;--white:#f8fafd}html,body{background:radial-gradient(circle at 18% 15%, #20415f 0%, #10243a 48%, var(--navy) 100%);min-height:100%;margin:0;font-family:Archivo,sans-serif;overflow:hidden}#app{width:100vw;height:100vh}canvas{touch-action:none}#hud{pointer-events:none;box-sizing:border-box;z-index:3;flex-direction:column;justify-content:space-between;padding:16px 18px;display:flex;position:fixed;inset:0}.hud-top{grid-template-columns:repeat(4,minmax(90px,170px));gap:10px;display:grid}.chip{color:var(--white);letter-spacing:.4px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#04111f9e;border:1px solid #ffffff2e;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600}.chip span{color:var(--gold);margin-left:7px}.hud-meters{background:#04111f85;border:1px solid #ffffff2b;border-radius:18px;gap:10px;width:min(420px,92vw);padding:12px;display:grid}.meter-wrap label{color:#d8e8f1;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;font-size:12px;display:block}.meter{background:#ffffff24;border-radius:999px;width:100%;height:12px;overflow:hidden}.fill{border-radius:999px;width:0;height:100%;transition:width 60ms linear}.fill.power{background:linear-gradient(90deg,#0ca368 0%,#7de0b8 100%)}.fill.angle{background:linear-gradient(90deg,#f5c76f 0%,#ffe8b5 100%)}.hud-bottom{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}#feedback-value{color:#fef5db;background:#04111f85;border:1px solid #ffffff2b;border-radius:12px;padding:10px 14px;font-size:22px;font-weight:700}.controls{pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}button{appearance:none;color:#0a1d2a;cursor:pointer;background:linear-gradient(#f5c76f 0%,#d9a94b 100%);border:none;border-radius:12px;padding:10px 14px;font-size:15px;font-weight:700;box-shadow:0 8px 18px #00000047}button#hold-btn{color:#f8fffc;background:linear-gradient(#20be83 0%,#0b8b5e 100%)}button#sound-btn{background:linear-gradient(#b6d5e8 0%,#8eb7d1 100%)}@media (width<=850px){#hud{gap:10px;padding:10px}.hud-top{grid-template-columns:repeat(2,minmax(90px,1fr))}#feedback-value{font-size:18px}.hud-bottom{flex-direction:column;align-items:stretch}.controls{justify-content:stretch}.controls button{flex:32%;min-width:96px}}