:root{
  --accent:#c6f432;
  --bg:#0a0f1e;
  --bg-2:#111a33;
  --card:#ffffff;
  --ink:#0f172a;
  --ink-2:#475569;
  --line:#e2e8f0;
  --soft:#f1f5f9;
  --danger:#dc2626;
  --radius:18px;
  --head:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.bg-field{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(800px 400px at 110% 30%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.bg-field::after{ /* faint pitch stripes */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 60px, transparent 60px 120px);
}

/* ---------- hero ---------- */
.hero{padding:28px 18px 8px; max-width:760px; margin:0 auto; color:#fff}
.brand{display:flex; align-items:center; gap:16px}
.logo{width:76px; height:76px; object-fit:contain; border-radius:16px; background:rgba(255,255,255,.06); padding:6px; flex:none}
.logo-ball{position:relative; border-radius:50%; background:var(--accent); padding:0; box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent)}
.logo-ball span{position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at -30% 50%, transparent 58%, rgba(255,255,255,.85) 59%, rgba(255,255,255,.85) 63%, transparent 64%),
    radial-gradient(circle at 130% 50%, transparent 58%, rgba(255,255,255,.85) 59%, rgba(255,255,255,.85) 63%, transparent 64%);}
.hero h1{font-family:var(--head); font-weight:800; font-size:clamp(28px, 6vw, 40px); line-height:1; margin:0; letter-spacing:.3px; text-transform:uppercase}
.tagline{margin:6px 0 0; color:var(--accent); font-weight:600; font-size:14px; letter-spacing:.3px}
.meta{margin:2px 0 0; color:rgba(255,255,255,.65); font-size:13px}

.wrap{max-width:760px; margin:0 auto; padding:14px 14px 40px}

/* ---------- stepper ---------- */
.stepper{list-style:none; display:flex; justify-content:space-between; padding:0; margin:10px 4px 10px; counter-reset:s}
.stepper li{display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(255,255,255,.45); font-size:12px; flex:1; cursor:default}
.stepper li span{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; border:2px solid rgba(255,255,255,.2); transition:.25s}
.stepper li em{font-style:normal; font-weight:600}
.stepper li.done{color:rgba(255,255,255,.8); cursor:pointer}
.stepper li.done span{background:rgba(255,255,255,.15); border-color:transparent; color:#fff}
.stepper li.active{color:#fff}
.stepper li.active span{background:var(--accent); border-color:var(--accent); color:#0a0f1e; box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent)}
.progress{height:4px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin:0 4px 14px}
.progress-bar{height:100%; width:20%; background:var(--accent); transition:width .35s ease}

/* ---------- card ---------- */
.card{background:var(--card); border-radius:var(--radius); padding:22px 18px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media (min-width:640px){ .card{padding:30px 32px} }
.step{display:none; animation:fadeIn .3s ease}
.step.active{display:block}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.step-title{font-family:var(--head); font-size:28px; font-weight:700; margin:0 0 6px; text-transform:uppercase; letter-spacing:.3px}
.note{background:var(--soft); border-left:4px solid var(--accent); padding:10px 12px; border-radius:8px; color:var(--ink-2); font-size:14px; margin:8px 0 18px}

.field{margin:0 0 16px}
.field > label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.opt{font-weight:500; color:#94a3b8; font-size:12px; margin-left:4px}
input[type=text],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],textarea,select{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
textarea{resize:vertical; min-height:64px}
input:focus,textarea:focus,select:focus{outline:none; border-color:#0f172a; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent)}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.grid-2{display:grid; grid-template-columns:1fr; gap:0 14px}
@media (min-width:560px){ .grid-2{grid-template-columns:1fr 1fr} }
.hint{font-size:12px; color:#64748b; margin:6px 0 0}
.err{color:var(--danger); font-size:13px; margin:6px 0 0; min-height:0}
.err:empty{display:none}

.prefix-input{display:flex; align-items:stretch}
.prefix-input span{display:grid; place-items:center; padding:0 12px; background:var(--soft); border:1.5px solid var(--line); border-right:0; border-radius:12px 0 0 12px; font-weight:600; color:var(--ink-2)}
.prefix-input input{border-radius:0 12px 12px 0}

/* ---------- photo ---------- */
.photo-row{display:flex; gap:16px; align-items:center; margin-bottom:4px}
.photo-drop{position:relative; width:140px; height:170px; flex:none; border-radius:16px; border:2px dashed #cbd5e1; background:var(--soft); display:grid; place-items:center; cursor:pointer; overflow:hidden; transition:.2s}
.photo-drop:hover,.photo-drop:focus,.photo-drop.drag{border-color:#0f172a; background:color-mix(in srgb, var(--accent) 15%, #fff); outline:none}
.photo-drop.invalid{border-color:var(--danger)}
.photo-drop img{width:100%; height:100%; object-fit:cover}
.photo-empty{text-align:center; padding:10px; color:var(--ink-2)}
.photo-empty svg{width:44px; height:44px; fill:none; stroke:#94a3b8; stroke-width:2.5; stroke-linecap:round}
.photo-empty strong{display:block; font-size:14px; color:var(--ink); margin-top:4px}
.photo-empty small{display:block; font-size:11px; margin-top:2px}
.photo-change{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(15,23,42,.8); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px}
.photo-tips{font-size:13px; color:var(--ink-2)}
.photo-tips p{margin:0 0 4px; color:var(--ink)}
.photo-tips ul{margin:0; padding-left:18px; line-height:1.7}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--ink); transition:.15s; user-select:none}
.chip:hover span{border-color:#94a3b8}
.chip input:focus-visible + span{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent)}
.chip input:checked + span{background:#0f172a; border-color:#0f172a; color:#fff; box-shadow:inset 0 -3px 0 var(--accent)}
.city-chips{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr))}
.city-chips .chip span{width:100%; justify-content:center; text-align:center; min-height:46px}
.size-chips .chip span{flex-direction:column; gap:0; min-width:62px; padding:8px 10px}
.size-chips b{font-size:16px}
.size-chips small{font-size:11px; font-weight:500; opacity:.7}

.jersey-note{display:flex; align-items:center; gap:14px; background:#0f172a; color:#e2e8f0; border-radius:14px; padding:14px 16px; margin-top:6px}
.jersey-note p{margin:0; font-size:14px}
.jersey-note b{color:#fff}
.mini-jersey{width:46px; height:46px; flex:none; background:var(--accent); clip-path:polygon(30% 0,70% 0,100% 22%,86% 40%,78% 34%,78% 100%,22% 100%,22% 34%,14% 40%,0 22%); display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:22px; color:#0f172a; padding-top:8px; animation:wobble 2.4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.reveal{animation:fadeIn .25s ease}

/* ---------- review ---------- */
.review{display:grid; gap:12px; margin-bottom:16px}
.rv-block{border:1.5px solid var(--line); border-radius:14px; padding:12px 14px}
.rv-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.rv-head h3{margin:0; font-family:var(--head); font-size:18px; text-transform:uppercase; letter-spacing:.3px}
.rv-head button{background:none; border:0; color:#2563eb; font-weight:600; font-size:13px; cursor:pointer; padding:4px}
.rv-player{display:flex; gap:12px; align-items:flex-start}
.rv-player img{width:64px; height:78px; object-fit:cover; border-radius:10px; flex:none}
.rv-list{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:14px}
.rv-list dt{color:#64748b}
.rv-list dd{margin:0; font-weight:600; word-break:break-word}
.confirm{display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer; padding:12px; background:var(--soft); border-radius:12px}
.confirm input{width:20px; height:20px; margin:0; accent-color:#0f172a; flex:none}
.server-err{background:#fef2f2; border:1px solid #fecaca; padding:10px 12px; border-radius:10px}

/* ---------- nav / buttons ---------- */
.nav{display:flex; gap:10px; margin-top:20px; position:sticky; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); padding:14px 0 4px}
.btn{white-space:nowrap; font:inherit; font-weight:700; font-size:16px; border-radius:14px; padding:14px 20px; border:0; cursor:pointer; transition:.15s; min-height:52px}
.btn.primary{flex:1; background:#0f172a; color:#fff; box-shadow:inset 0 -4px 0 var(--accent)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:disabled{opacity:.7; cursor:wait; transform:none}
.btn.ghost{background:var(--soft); color:var(--ink)}
.btn-progress{display:flex; align-items:center; gap:10px; justify-content:center}
.btn-progress i{display:block; width:90px; height:6px; border-radius:6px; background:rgba(255,255,255,.2); position:relative; overflow:hidden}
.btn-progress i::after{content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p,0%); background:var(--accent); transition:width .2s}
.btn-progress em{font-style:normal; font-size:14px}
.deadline{text-align:center; font-size:12px; color:#64748b; margin:10px 0 0}

/* ---------- success ---------- */
.success{text-align:center; position:relative; overflow:hidden}
.eyebrow{display:inline-block; background:var(--accent); color:#0f172a; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin:0 0 8px}
.success h2{font-family:var(--head); font-size:34px; text-transform:uppercase; margin:0 0 10px}
.jersey{position:relative; width:210px; height:210px; margin:6px auto 8px; animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.jersey svg{width:100%; height:100%; fill:#0f172a; filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.jersey-txt{position:absolute; inset:58px 0 0; display:flex; flex-direction:column; align-items:center}
.jersey-txt small{color:var(--accent); font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jersey-txt strong{font-family:var(--head); font-weight:800; font-size:76px; line-height:1; color:#fff}
@keyframes pop{from{transform:scale(.4) rotate(-12deg); opacity:0} to{transform:none; opacity:1}}
.s-details{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 16px}
.s-details div{background:var(--soft); border-radius:12px; padding:10px 6px}
.s-details dt{font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.5px}
.s-details dd{margin:2px 0 0; font-weight:700; font-size:14px; word-break:break-word}
.muted{color:#64748b; font-size:14px}
.small{font-size:12px}
.confetti{position:absolute; inset:0; pointer-events:none}
.confetti i{position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(720px) rotate(720deg); opacity:0}}

.closed{text-align:center}
.closed-icon{font-size:40px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.foot{text-align:center; color:rgba(255,255,255,.35); font-size:12px; padding:10px 0 30px}

@media (max-width:420px){
  .photo-row{flex-direction:column; align-items:stretch}
  .photo-drop{width:100%; height:220px}
  .photo-tips{display:none}
  .stepper li em{font-size:11px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}