:root{--g:#0a1f5c;--g2:#1a47d1;--gold:#f5b81c;--bg:#eef2fb;--card:#fff;--tx:#14201b;--mu:#66756e;--bd:#d5dfda;--er:#c0392b}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}

/* ---------- Intro animation (built from the poster) ---------- */
#intro{position:fixed;inset:0;z-index:9;background:#030a24;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .7s}
#intro.out{opacity:0;pointer-events:none}
#intro .bg{position:absolute;inset:-5%;background:url(img/poster.jpg) center/cover;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.frame{position:relative;height:100vh;height:100dvh;width:min(100vw,66.63dvh,66.63vh);height:auto;aspect-ratio:1066/1600;max-height:100dvh;overflow:hidden;box-shadow:0 0 60px rgba(30,90,255,.55);animation:zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
.poster{display:block;width:100%;height:100%;animation:drift 7s linear both}
@keyframes zoom{0%{opacity:0;transform:scale(1.35);filter:blur(10px) brightness(2)}45%{opacity:1;filter:blur(0) brightness(1.25)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.05)}}
.shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,235,160,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 1.3s 1.7s ease-in-out forwards;mix-blend-mode:screen;pointer-events:none}
@keyframes sweep{to{transform:translateX(120%)}}
.flare{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(120,170,255,.25) 40%,transparent 70%);mix-blend-mode:screen;opacity:0;animation:flare 1.4s ease-in-out 3 both}
.f1{left:-8%;top:18%;animation-delay:.9s}.f2{right:-8%;top:18%;animation-delay:1.2s}
@keyframes flare{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.cta{position:absolute;left:50%;bottom:3.5%;transform:translate(-50%,30px);opacity:0;white-space:nowrap;padding:.7em 1.4em;border-radius:40px;background:linear-gradient(#ffd45a,#e9a410);color:#1b1300;font-weight:800;font-size:clamp(14px,3.4vw,20px);box-shadow:0 0 0 0 rgba(255,200,60,.7);animation:cta .6s 3s forwards,pulse 1.2s 3.6s infinite}
@keyframes cta{to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulse{70%{box-shadow:0 0 0 16px rgba(255,200,60,0)}100%{box-shadow:0 0 0 0 rgba(255,200,60,0)}}
#skip{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top));z-index:2;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:20px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.frame,.poster,.shine,.flare,.cta{animation:none}.cta{opacity:1;transform:translate(-50%,0)}.shine,.flare{display:none}}

/* ---------- App ---------- */
#app{max-width:640px;margin:0 auto;padding:0 14px calc(40px + env(safe-area-inset-bottom));animation:fade .5s}
@keyframes fade{from{opacity:0}}
.hero{margin:0 -14px 14px;padding:calc(26px + env(safe-area-inset-top)) 18px 40px;background:linear-gradient(160deg,var(--g2),var(--g));color:#fff;text-align:center;border-radius:0 0 26px 26px}
.hero .logo{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;display:block;border:2px solid var(--gold)}
.hero h1{margin:0;font-size:clamp(22px,5vw,32px)}
.hero p{margin:6px 0 0;color:var(--gold);letter-spacing:3px;text-transform:uppercase;font-size:13px}
.card{background:var(--card);border-radius:16px;padding:16px 16px 6px;margin:0 0 14px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.card h2{margin:0 0 12px;font-size:17px;color:var(--g)}
label{display:block;margin-bottom:12px;font-size:14px;font-weight:600;color:#33433c}
label em{font-weight:400;color:var(--mu)}
input:not([type=radio]):not([type=file]),select{display:block;width:100%;margin-top:5px;padding:12px;border:1.5px solid var(--bd);border-radius:10px;background:#fff;font:inherit;font-weight:400;color:var(--tx);min-height:46px}
input:focus,select:focus{outline:0;border-color:var(--g2);box-shadow:0 0 0 3px rgba(26,71,209,.15)}
.invalid{border-color:var(--er)!important}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row label:last-child input[name=jersey_number]{text-align:center}
fieldset{border:0;padding:0;margin:0 0 12px;min-width:0}
legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:600;color:#33433c}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips label{margin:0}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:block;padding:10px 16px;border:1.5px solid var(--bd);border-radius:22px;font-weight:500;cursor:pointer;user-select:none}
.chips input:checked+span{background:var(--g);border-color:var(--g);color:#fff}
.chips input:focus-visible+span{box-shadow:0 0 0 3px rgba(26,71,209,.3)}
.chips.invalid span{border-color:var(--er)}
.file input{position:absolute;width:1px;height:1px;opacity:0}
.file .fn{display:block;margin-top:5px;padding:14px;border:1.5px dashed var(--bd);border-radius:10px;text-align:center;font-weight:400;color:var(--mu);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file input:focus-visible+.fn{border-color:var(--g2)}
.file.has .fn{border-style:solid;border-color:var(--g2);color:var(--g);font-weight:600}
.file.invalid .fn{border-color:var(--er)}
.fee{font-size:20px;font-weight:700;margin:0 0 8px}
.muted{color:var(--mu);font-size:14px}
.upi{font-weight:700;font-size:18px;margin:4px 0 10px;word-break:break-all}
#qr{display:block;max-width:200px;width:100%;margin:0 auto 14px}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.err{background:#fdecea;color:var(--er);border-radius:10px;padding:12px;margin:0 0 12px;font-size:14px;font-weight:600}
#submit{width:100%;padding:15px;border:0;border-radius:12px;background:var(--gold);color:#241a00;font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:transform .1s}
#submit:active{transform:scale(.98)}
#submit:disabled{opacity:.6;cursor:wait}
.ok{text-align:center;padding:30px 18px;margin-top:18px}
.tick{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--g2);color:#fff;font-size:36px;line-height:64px;animation:pop .5s}
@keyframes pop{from{transform:scale(0)}}
@media (min-width:700px){#app{padding-top:20px}.hero{margin:0 0 18px;border-radius:22px}.card{padding:22px 22px 10px}}