:root{
  --navy:#0a1230; --navy2:#141d47; --panel:#1b2559; --line:#2c3873;
  --red:#e2231a; --red-d:#b3140d; --gold:#ffcf3f; --steel:#9fb2d8;
  --ink:#0a1230; --white:#fff; --muted:#8ea1cf;
  --sans:'General Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --th:300px;               /* train height (engine); wagon scales from it */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:#eaf0ff; background:var(--navy);
  background:
    repeating-linear-gradient(115deg, rgba(0,166,81,.05) 0 22px, rgba(0,166,81,0) 22px 74px),
    repeating-linear-gradient(65deg, rgba(226,35,26,.04) 0 18px, rgba(226,35,26,0) 18px 78px),
    radial-gradient(1200px 600px at 50% -10%, #16204f 0%, var(--navy) 60%);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--gold)}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px 48px}

/* ---------- masthead ---------- */
.masthead{display:flex; gap:16px; align-items:center; justify-content:center; text-align:center; padding:22px 4px 14px}
.crest{
  flex:0 0 auto; width:62px; height:62px; border-radius:14px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#12225c,#0a1230);
  box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.12);
}
.crest img{width:84%; height:84%; object-fit:contain; display:block}
.crest-text{font-weight:900; font-size:13px; line-height:1.05; color:#fff; text-align:center; letter-spacing:.03em}
.logo-row{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin:2px 0 10px}
.nzp-logo{height:clamp(38px,7vw,52px); width:auto; display:block; margin:0}
.sr-logo{height:clamp(36px,6.6vw,48px); width:auto; display:block}
.logo-div{width:1px; height:34px; background:rgba(255,255,255,.28); flex:0 0 auto}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; color:var(--gold); font-weight:700}
.masthead h1{margin:2px 0; font-size:clamp(22px,5vw,34px); font-weight:900; letter-spacing:-.5px}
.prize{margin:0; color:var(--steel); font-size:14px}
.prize strong{color:#fff}

/* ---------- stage / train ---------- */
.stage{
  position:relative; border-radius:20px; overflow:hidden; margin-top:6px;
  background:
    linear-gradient(180deg, rgba(10,18,48,.34) 0%, rgba(10,18,48,.06) 34%, rgba(10,18,48,.62) 100%),
    url('stage-bg.jpg?v=11') center 40%/cover no-repeat;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
  padding:16px 0 0; min-height:322px;
}
.sky{position:absolute; inset:0 0 auto 0; height:60%; pointer-events:none;
  background:radial-gradient(45% 55% at 50% 6%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%)}
.marker{position:absolute; left:50%; top:12px; bottom:70px; width:0; transform:translateX(-50%); z-index:7; pointer-events:none}
.marker::before{content:""; position:absolute; left:-1px; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--gold),rgba(255,207,63,.12)); box-shadow:0 0 14px var(--gold)}
.marker span{position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#3a2b00; font-weight:900; font-size:10px; letter-spacing:.12em;
  padding:3px 8px; border-radius:6px; white-space:nowrap}

.reel-viewport{position:relative; z-index:3; overflow:hidden; padding:64px 0 0}
.reel{display:flex; align-items:flex-end; gap:0; padding:0; width:max-content; will-change:transform}
.reel>*+*{margin-left:0}          /* tiles cut mid-coupler; butt edge-to-edge to re-form couplers */

/* engine + wagon share one pixel scale (--th maps the engine's 304px source height);
   wagon is naturally shorter (216/304) and bottom-aligns via reel's align-items:flex-end,
   so every wheel sits on one baseline. */
.loco{position:relative; flex:0 0 auto; height:var(--th); width:calc(var(--th)*1.6216);
  background:url('engine.png?v=33') center bottom/contain no-repeat; pointer-events:none;
  animation:chug .5s ease-in-out infinite; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}

/* spinning wheel overlays sit on the baked wheels (sized to fully cover them) */
.wheel{position:absolute; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:url('wheel.png?v=36') center/contain no-repeat; will-change:transform;
  animation:spin 1.4s linear infinite}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-1turn)}}
/* animated smoke rising from the funnel */
.smoke{position:absolute; left:21.7%; top:2%; width:0; height:0; pointer-events:none; z-index:2}
.smoke .puff{position:absolute; left:0; top:0; border-radius:50%;
  width:calc(var(--th)*.092); height:calc(var(--th)*.092);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.97), rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 72%);
  opacity:0; will-change:transform,opacity; animation:puff 2.4s ease-out infinite}
.smoke .puff:nth-child(2){animation-delay:.34s}
.smoke .puff:nth-child(3){animation-delay:.68s}
.smoke .puff:nth-child(4){animation-delay:1.02s}
.smoke .puff:nth-child(5){animation-delay:1.37s}
.smoke .puff:nth-child(6){animation-delay:1.71s}
.smoke .puff:nth-child(7){animation-delay:2.05s}
@keyframes puff{
  0%{transform:translate(-50%,0) scale(.35); opacity:0}
  15%{opacity:.9}
  100%{transform:translate(35%,calc(var(--th)*-0.5)) scale(1.9); opacity:0}}
.loco .wheel{width:20%}
.lw1{left:35.4%; top:82.1%} .lw2{left:57.9%; top:82.4%} .lw3{left:80.8%; top:82.4%}
.wagon .wheel{width:22.5%}
.ww1{left:24.3%; top:82.8%} .ww2{left:73.5%; top:82.4%}
/* Sports & Rec logo slotted between the two names on each wagon */
.wagon-logo{position:absolute; left:50%; bottom:34%; transform:translateX(-50%);
  width:20%; aspect-ratio:518/200; background:url('sr-logo.png?v=24') center/contain no-repeat;
  pointer-events:none; z-index:2}

.wagon{position:relative; flex:0 0 auto; height:calc(var(--th)*.8243); width:calc(var(--th)*1.3919);
  background:url('wagon.png?v=33') center bottom/contain no-repeat;
  animation:chug .5s ease-in-out infinite; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.reel .wagon:nth-child(2n){animation-delay:-.25s}

.bed{position:absolute; left:12%; right:12%; top:-6%; height:62%;
  display:flex; gap:10px; align-items:flex-end; justify-content:center; overflow:visible}
.rider{display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:5px; height:100%; min-width:0; max-width:48%;
  transform-origin:50% 100%; animation:bob 1.7s ease-in-out infinite}
.bed .rider:nth-child(2n){animation-delay:-.85s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.face{flex:1 1 auto; min-height:0; width:auto; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:#0a1230; border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.45)}
.face img,.face video{width:100%; height:100%; object-fit:cover; display:block}
/* photo borders cycle red / blue / green / white */
.face.bc0{border-color:#e2231a} .face.bc1{border-color:#2b74e8}
.face.bc2{border-color:#00a651} .face.bc3{border-color:#ffffff}
.name{flex:0 0 auto; max-width:100%; padding:3px 10px; border-radius:20px;
  background:rgba(10,18,48,.92); color:#fff; font-weight:800; line-height:1.1;
  font-size:calc(var(--th)*.052); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.16)}
.face.empty{display:grid; place-items:center; color:#cdd8f7; font-size:26px; font-weight:800;
  border-style:dashed; border-color:#8ea1cf; background:rgba(255,255,255,.08)}
.face.faded{opacity:.3}
.face.faded ~ .name{opacity:.3}
.reel.animating .name{transition:opacity .45s}
.face.win-lit{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold),0 0 26px var(--gold); transform:scale(1.15); z-index:4}
.reel.animating .face{transition:opacity .45s, transform .45s}

.track{position:relative; z-index:2; height:20px; margin-top:-4px;
  background:repeating-linear-gradient(90deg,#3a2a1a 0 16px,#4a3623 16px 30px);
  border-top:5px solid #23304f; box-shadow:0 -3px 0 #2a3a5f}
.stage-status{position:relative; z-index:4; text-align:center; padding:10px; font-weight:700; color:#fff;
  background:linear-gradient(0deg,rgba(10,14,40,.55),rgba(10,14,40,0))}
#aboard b{color:var(--gold)}

@keyframes chug{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes trackmove{to{background-position:-30px 0}}
.track{animation:trackmove .55s linear infinite}

/* ---------- winner overlay ---------- */
.winner-overlay{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px;
  background:rgba(6,9,28,.82); backdrop-filter:blur(3px); animation:fade .4s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.winner-card{max-width:420px; width:100%; text-align:center; background:linear-gradient(180deg,#182155,#0d1236);
  border:1px solid var(--line); border-radius:22px; padding:26px 22px 30px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.winner-kicker{color:var(--gold); font-weight:900; letter-spacing:.04em; font-size:18px}
.winner-photo{width:200px; height:200px; margin:16px auto; border-radius:18px; overflow:hidden;
  border:4px solid var(--gold); box-shadow:0 0 50px rgba(255,207,63,.5)}
.winner-photo img,.winner-photo video{width:100%; height:100%; object-fit:cover}
.winner-name{font-size:26px; font-weight:900}
.winner-sub{color:var(--steel); font-size:14px; margin:8px 0 0}
.confetti{position:fixed; top:-12px; width:9px; height:14px; z-index:65; will-change:transform; pointer-events:none}

/* ---------- enter form ---------- */
.enter{margin-top:26px; background:linear-gradient(180deg,var(--navy2),#0d1440);
  border:1px solid var(--line); border-radius:20px; padding:22px}
.enter h2{margin:0 0 4px; font-size:22px; font-weight:900}
.lede{margin:0 0 16px; color:var(--steel); font-size:14px}
.field{display:block; margin:0 0 12px}
.field>span,.field-label{display:block; font-size:12.5px; font-weight:700; color:#cdd8f7; margin-bottom:5px}
.field input{width:100%; padding:12px 13px; border-radius:11px; border:1.5px solid var(--line);
  background:#0b1030; color:#fff; font-size:16px; font-family:inherit}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,207,63,.2)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

.capture{margin:6px 0 14px}
.capture-btn{position:relative; display:block; border:2px dashed var(--line); border-radius:16px;
  background:#0b1030; overflow:hidden; cursor:pointer; transition:border-color .2s}
.capture-btn:hover{border-color:var(--gold)}
.capture-btn input[type=file]{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer}
.capture-face{display:flex; align-items:center; gap:14px; padding:22px 18px; color:#cdd8f7}
.capture-face .cam{font-size:34px}
.capture-face .cam-text{font-weight:700}
.capture-face small{color:var(--muted); font-weight:500}
.capture-preview{display:block; position:relative}
.capture-preview img,.capture-preview video{width:100%; max-height:320px; object-fit:cover; display:block}
.capture-preview .retake{position:absolute; right:10px; bottom:10px; background:rgba(10,14,40,.85);
  color:#fff; font-size:12px; font-weight:700; padding:7px 12px; border-radius:20px; border:1px solid var(--line)}

.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#d6def7; margin:4px 0 16px}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 auto}
.hp{position:absolute; left:-9999px; height:0; overflow:hidden}

.btn-enter{width:100%; padding:15px; border:0; border-radius:13px; cursor:pointer;
  background:linear-gradient(180deg,var(--red),var(--red-d)); color:#fff; font-size:17px; font-weight:900;
  box-shadow:0 12px 24px rgba(226,35,26,.35)}
.btn-enter:disabled{opacity:.6; cursor:progress}
.form-msg{min-height:20px; margin:10px 2px 0; font-size:13.5px; font-weight:600}
.form-msg.err{color:#ff9ea0}
.form-msg.ok{color:#7ee0a8}

.thanks{text-align:center; padding:20px 8px}
.thanks-tick{width:60px; height:60px; margin:0 auto 8px; border-radius:50%; background:#1f9d54; color:#fff;
  font-size:34px; display:grid; place-items:center; box-shadow:0 0 40px rgba(31,157,84,.5)}
.thanks h3{margin:6px 0; font-size:22px}
.thanks p{color:var(--steel)}
.btn-ghost{margin-top:10px; background:transparent; border:1.5px solid var(--line); color:#fff;
  padding:11px 18px; border-radius:11px; font-weight:700; cursor:pointer}

.mycard{width:100%; max-width:300px; border-radius:14px; margin:6px auto 14px; display:block;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.share-menu{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px}
.share-menu .sm{flex:0 0 auto; padding:10px 14px; border-radius:10px; border:1.5px solid var(--line);
  background:#0b1030; color:#fff; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer}
.share-menu .sm:hover{border-color:var(--gold)}

.foot{text-align:center; color:var(--muted); font-size:12.5px; margin-top:26px; padding-top:16px; border-top:1px solid var(--line)}
.foot-note{margin-top:5px; opacity:.8}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px; background:rgba(6,9,28,.75)}
.modal-card{position:relative; max-width:520px; max-height:82vh; overflow:auto; background:#111a42;
  border:1px solid var(--line); border-radius:18px; padding:24px}
.modal-x{position:absolute; right:12px; top:8px; background:none; border:0; color:#fff; font-size:26px; cursor:pointer}
.terms-body{font-size:13.5px; color:#d6def7}
.terms-body p{margin:0 0 10px}

@media (prefers-reduced-motion: reduce){
  .loco,.wagon,.track,.rider,.wheel,.smoke .puff{animation:none}
}