:root{color-scheme:dark;--bg:#101014;--ink:#fff0ce;--muted:#c4b69d;--gold:#ffd166;--hot:#ff506a;--cyan:#72e8ff;--green:#65ff9d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at 50% -10%,#45314d,var(--bg) 58%);color:var(--ink);font-family:ui-rounded,"Avenir Next",system-ui,sans-serif;touch-action:none}button{font:inherit;border:0;color:inherit;cursor:pointer}.hidden{display:none!important}.app{height:100svh;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}.panel{width:min(470px,100%);border-radius:30px;padding:24px 18px;background:linear-gradient(180deg,rgba(50,38,42,.96),rgba(15,12,15,.96));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.55)}.eyebrow{margin:0 0 8px;color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.18em;text-transform:uppercase}h1{margin:0;font-size:clamp(44px,15vw,72px);line-height:.84;letter-spacing:-.09em}.lead{color:var(--muted);font-size:17px;line-height:1.4}.tips{display:grid;gap:9px;margin:18px 0}.tips div{border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);padding:12px}.tips b{display:block}.tips span{display:block;color:var(--muted);font-size:13px;margin-top:3px}button{width:100%;min-height:56px;border-radius:18px;font-weight:1000;background:linear-gradient(135deg,var(--gold),#ff923d 48%,var(--hot));color:#211008;box-shadow:0 14px 40px rgba(255,80,106,.25)}.game{width:min(540px,100%);height:calc(100svh - 24px);display:grid;grid-template-rows:auto 1fr;gap:10px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hud div{border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:10px}.hud span{display:block;color:var(--muted);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.hud b{display:block;margin-top:2px;font-size:20px}.viewport{position:relative;overflow:hidden;border-radius:30px;background:#09090d;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 55px rgba(0,0,0,.5),0 24px 80px rgba(0,0,0,.45)}canvas{display:block;width:100%;height:100%}.scorePopup{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-50%);font-weight:1000;font-size:18px;color:var(--gold);text-shadow:0 2px 0 #201008,0 0 16px rgba(255,209,102,.55);animation:scorepop .7s ease forwards}.scorePopup.water{color:var(--cyan)}.scorePopup.poop{color:#9ffcff}.scorePopup.bird{color:var(--gold);font-size:24px}.scorePopup.zone{color:var(--green);font-size:22px}@keyframes scorepop{0%{opacity:0;transform:translate(-50%,0) scale(.7)}18%{opacity:1;transform:translate(-50%,-18px) scale(1.14)}100%{opacity:0;transform:translate(-50%,-58px) scale(.92)}}.caption{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;border-radius:18px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);padding:11px;text-align:center;font-weight:1000;color:#fff0ce}.flash{animation:flash .18s ease}@keyframes flash{50%{filter:brightness(1.35)}}@media(max-height:720px){.hud div{padding:7px}.hud b{font-size:17px}.caption{font-size:13px}.scorePopup{font-size:16px}}

.loadout{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0}.loadout label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.loadout select{width:100%;min-height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--ink);font:inherit;font-weight:900;padding:0 10px}.loadout option{background:#141014;color:#fff0ce}@media(min-width:430px){.loadout{grid-template-columns:repeat(3,1fr)}}