:root{
  --orange:#FF6A13; --orange-hot:#FF8A1F; --ember:#FFB347;
  --pitch:#000; --card-black:#140d09; --bone:#F7EFE6; --smoke:#a39a92;
  --marker:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bone:#F7EFE6; } }
:root[data-theme="dark"]{ --bone:#F7EFE6; }
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:inherit; }
[hidden]{ display:none !important; }
body{ margin:0; min-height:100%; background:var(--pitch); color:var(--bone);
      display:grid; place-items:center; font-family:var(--sans); }

/* ---------- Stage ----------
   Positions and sizes are in the artwork's pixel space (1536x1024).
   --a = one art pixel, --ox/--oy = where this region's crop of the art starts. */
.stage{
  --bg:url("/assets/bg5.jpg");
  position:relative; width:min(100%, 1536px, max(150vh, 820px)); aspect-ratio:1536/1024; overflow:hidden;
  container-type:inline-size; background:#000 var(--bg) center/100% 100% no-repeat;
}
.hero{ position:absolute; inset:0; --a:calc(100cqw / 1536); --ox:0; --oy:0; }
.column{
  --a:calc(100cqw / 1536);
  position:absolute; left:calc(60 * var(--a)); top:calc(30 * var(--a));
  width:calc(760 * var(--a)); height:calc(964 * var(--a));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.column{ isolation:isolate; }
.column::before{ content:""; position:absolute; inset:-6% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 50% at 50% 58%, rgba(0,0,0,.6), rgba(0,0,0,.25) 60%, transparent 80%); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Copy ---------- */
.logo{ width:calc(210 * var(--a)); min-width:120px; height:auto; display:block; }
.headline{ margin:calc(34 * var(--a)) 0 0; font-weight:400; line-height:1; text-transform:uppercase;
           transform:rotate(-3deg); text-shadow:0 calc(4 * var(--a)) 0 rgba(0,0,0,.85), 0 0 calc(24 * var(--a)) rgba(0,0,0,.6); }
.headline .l1{ display:block; font:calc(84 * var(--a))/1 var(--marker); white-space:nowrap; letter-spacing:-.01em; }
.headline .or, .headline .treat{ color:var(--orange); }
.headline .or{ font-size:.6em; margin:0 .12em; }
.headline .l2{ display:block; margin-top:calc(8 * var(--a)); font:calc(50 * var(--a))/1 var(--marker); white-space:nowrap; }

.swap{ display:grid; width:100%; margin-top:calc(36 * var(--a)); }
.swap > *{ grid-area:1 / 1; }
.intro{ display:flex; flex-direction:column; align-items:center; transition:opacity .4s ease, visibility 0s linear 0s; }
.body{ margin:0 0 calc(22 * var(--a)); max-width:calc(660 * var(--a));
       font:600 max(14px, calc(27 * var(--a)))/1.3 var(--sans); text-transform:uppercase; letter-spacing:.02em;
       text-shadow:0 1px 8px rgba(0,0,0,.8); text-wrap:balance; }
.tag{ margin:calc(6 * var(--a)) 0 0; font:max(15px, calc(27 * var(--a)))/1.25 var(--marker); text-transform:uppercase; }
.tag .hl{ color:var(--orange); text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.2em; }

/* ---------- Form ---------- */
.form{ width:100%; display:flex; flex-direction:column; align-items:center; margin-top:calc(36 * var(--a)); }
.code-input{
  width:calc(550 * var(--a)); max-width:100%; height:max(50px, calc(80 * var(--a)));
  border:max(3px, calc(5 * var(--a))) solid var(--orange); border-radius:calc(16 * var(--a));
  background:#fff; color:#1b1410; box-shadow:0 0 calc(18 * var(--a)) rgba(255,106,19,.35);
  font:600 max(16px, calc(26 * var(--a)))/1 var(--sans); letter-spacing:.24em; text-align:center; text-transform:uppercase;
  outline:none; padding:0 12px;
}
.code-input::placeholder{ color:#9b9591; font-weight:500; }
.code-input:focus-visible{ box-shadow:0 0 0 max(3px, calc(5 * var(--a))) var(--ember); }
.code-input.shake{ animation:shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }

.btn-wrap{ position:relative; width:calc(520 * var(--a)); max-width:100%; margin-top:calc(20 * var(--a)); }
.reveal-btn{
  position:relative; z-index:1; width:100%; height:max(54px, calc(88 * var(--a)));
  border:0; border-radius:999px; cursor:pointer; color:#120a05;
  background:linear-gradient(180deg, #FFA33A 0%, #FF7A1C 45%, #F25A0C 100%);
  box-shadow:inset 0 calc(3 * var(--a)) 0 rgba(255,220,160,.6), 0 0 calc(30 * var(--a)) rgba(255,106,19,.45);
  font:max(21px, calc(46 * var(--a)))/1 var(--marker); text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.35em;
  -webkit-tap-highlight-color:transparent; transition:filter .15s ease, box-shadow .2s ease;
}
.reveal-btn svg{ width:.7em; height:.7em; }
.reveal-btn:hover{ filter:brightness(1.07); box-shadow:inset 0 calc(3 * var(--a)) 0 rgba(255,220,160,.6), 0 0 calc(44 * var(--a)) rgba(255,122,24,.7); }
.reveal-btn:active{ filter:brightness(.95); }
.reveal-btn:focus-visible{ outline:3px solid var(--bone); outline-offset:4px; }
.reveal-btn[aria-busy="true"]{ cursor:progress; }
.drips{ position:relative; z-index:0; display:block; width:100%; height:auto; aspect-ratio:520/78; pointer-events:none; overflow:visible;
        /* tuck the top band under the button; % margins follow the width, so it scales with the drips */
        margin-top:-2.308%; }

/* Dripping: each drip slowly stretches, a droplet breaks off its tip and falls, the drip springs back.
   Timings are per drip (d1–d7) so they never move together. Keep the 1.1 peak in sync with the
   droplet positions in index.html. */
.drips .shine{ fill:#FFD7A8; opacity:.45; }
.drips .drip, .drips .drop{ transform-box:fill-box; animation:var(--dur) var(--off) infinite; }
.drips .drip{ transform-origin:50% 0; animation-name:ooze; animation-timing-function:cubic-bezier(.45,0,.55,1); }
.drips .drop{ transform-origin:50% 50%; animation-name:fall; animation-timing-function:linear; opacity:0; }
.drips .d1{ --dur:4.6s; --off:-0.4s; }
.drips .d2{ --dur:3.4s; --off:-2.1s; }
.drips .d3{ --dur:3.9s; --off:-1.2s; }
.drips .d4{ --dur:4.2s; --off:-3.0s; }
.drips .d5{ --dur:3.6s; --off:-0.8s; }
.drips .d6{ --dur:3.8s; --off:-2.6s; }
.drips .d7{ --dur:5.0s; --off:-1.7s; }
@keyframes ooze{
  0%  { transform:scaleY(.84); }
  74% { transform:scaleY(1.1); }
  79% { transform:scaleY(.8); }
  88% { transform:scaleY(.88); }
  100%{ transform:scaleY(.84); }
}
@keyframes fall{
  0%, 73%{ opacity:0; transform:translateY(0) scale(.5); }
  75%    { opacity:1; transform:translateY(0) scale(1); animation-timing-function:cubic-bezier(.5,0,1,1); } /* gravity */
  96%    { opacity:.9; transform:translateY(34px) scale(.85, 1.1); }
  100%   { opacity:0; transform:translateY(40px) scale(.7); }
}
@media (prefers-reduced-motion: reduce){
  .drips .drip{ animation:none; }
  .drips .drop{ display:none; }
}

.error{ margin:calc(6 * var(--a)) 0 0; max-width:calc(560 * var(--a)); width:100%; min-height:calc(76 * var(--a));
        color:var(--bone); font:500 max(13px, calc(19 * var(--a)))/1.4 var(--sans); text-align:center; }
.error.show{ padding:max(10px, calc(12 * var(--a))) max(14px, calc(18 * var(--a))); border-radius:calc(12 * var(--a));
             background:rgba(20,6,2,.82); border:1px solid rgba(255,120,60,.55); box-shadow:0 0 calc(18 * var(--a)) rgba(0,0,0,.5);
             animation:errIn .25s ease-out; }
.error strong{ display:block; color:var(--ember); font:max(16px, calc(24 * var(--a)))/1.15 var(--marker); text-transform:uppercase; margin-bottom:4px; }
@keyframes errIn{ from{ opacity:0; transform:translateY(-4px); } }
.code-input[aria-invalid="true"]{ border-color:#ff4d3a; }

/* ---------- The card in her hand ---------- */
.card{
  position:absolute; left:calc((877.5 - var(--ox)) * var(--a)); top:calc((260 - var(--oy)) * var(--a));
  width:calc(117 * var(--a)); height:calc(187 * var(--a));
  transform:rotate(-6deg); transform-origin:50% 50%;
  perspective:calc(614 * var(--a)); opacity:0; pointer-events:none; z-index:3;
}
.card.live{ opacity:1; }
.hand-patch{
  position:absolute; left:calc((850 - var(--ox)) * var(--a)); top:calc((235 - var(--oy)) * var(--a));
  width:calc(170 * var(--a)); height:calc(235 * var(--a)); opacity:0; pointer-events:none; z-index:2;
}
.hand-patch.on{ opacity:1; }
.glow{
  position:absolute; inset:-60%; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, rgba(255,150,40,.85), rgba(255,106,19,.35) 45%, transparent 75%);
  filter:blur(calc(15 * var(--a)));
}
.card-inner{ position:absolute; inset:0; transform-style:preserve-3d; }
.face{ position:absolute; inset:0; border-radius:calc(7.7 * var(--a)); overflow:hidden;
       backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.back::before{
  content:""; position:absolute; inset:calc(6.5 * var(--a)); border-radius:calc(3 * var(--a));
  border:calc(2.8 * var(--a)) solid currentColor; pointer-events:none;
}
.corner{ position:absolute; width:calc(21.5 * var(--a)); height:calc(21.5 * var(--a)); }
.corner.tl{ top:calc(8.5 * var(--a)); left:calc(8.5 * var(--a)); }
.corner.tr{ top:calc(8.5 * var(--a)); right:calc(8.5 * var(--a)); transform:scaleX(-1); }
.corner.bl{ bottom:calc(8.5 * var(--a)); left:calc(8.5 * var(--a)); transform:scaleY(-1); }
.corner.br{ bottom:calc(8.5 * var(--a)); right:calc(8.5 * var(--a)); transform:scale(-1); }
/* Front = pixels sampled straight from the artwork, so swapping in the live card is invisible.
   "raw" includes her fingers; it's swapped for the finger-free copy mid-spin while the front faces away. */
.front{ background:var(--card-black); border-radius:calc(4 * var(--a)); }
.front .tex{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.card.swapped .front .raw{ visibility:hidden; }
.back{
  transform:rotateY(180deg); color:#1a0c04;
  box-shadow:0 calc(6 * var(--a)) calc(18 * var(--a)) rgba(0,0,0,.6);
  background:
    radial-gradient(90% 60% at 50% 30%, #FFC05A, transparent 70%),
    linear-gradient(160deg, #FF9A2B, var(--orange) 55%, #D94E06);
  border:calc(1.8 * var(--a)) solid #ffb66b;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:calc(15 * var(--a)) calc(9 * var(--a));
}
.back .won{ font:700 calc(9 * var(--a))/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.back .big{ font:calc(36 * var(--a))/1 var(--marker); margin:calc(5.4 * var(--a)) 0 calc(2.3 * var(--a)); transform:rotate(-5deg); }
.back .small{ font:calc(15 * var(--a))/1.05 var(--marker); max-width:90%; }
.back .mini-pumpkin{ width:28%; margin-top:calc(7.7 * var(--a)); }

.embers{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.ember{ position:absolute; width:7px; height:7px; border-radius:50%;
        background:radial-gradient(circle, #fff3c4, var(--ember) 40%, rgba(255,106,19,0) 70%); }

/* ---------- Prize (replaces the intro copy + form) ---------- */
.prize{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
        opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
.stage.revealed .prize{ opacity:1; visibility:visible; transition:opacity .6s ease .15s, visibility 0s; }
.stage.revealed .intro{ opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.prize .won-label{ margin:0; font:700 max(12px, calc(20 * var(--a)))/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--smoke); }
.prize h2{ margin:calc(10 * var(--a)) 0 0; font:max(28px, calc(54 * var(--a)))/1.02 var(--marker); color:var(--orange-hot);
           text-shadow:0 0 calc(23 * var(--a)) rgba(255,106,19,.45); max-width:18ch; text-wrap:balance; }
.prize p{ margin:calc(16 * var(--a)) 0 0; font:500 max(14px, calc(23 * var(--a)))/1.45 var(--sans); max-width:36ch; text-wrap:balance; text-shadow:0 1px 8px #000; }
.reward{ margin-top:max(14px, calc(26 * var(--a))); display:flex; align-items:stretch;
         border:2px dashed var(--orange); border-radius:calc(12 * var(--a)); overflow:hidden; }
.reward code{ padding:max(12px, calc(14 * var(--a))) max(16px, calc(26 * var(--a)));
              font:700 max(18px, calc(32 * var(--a)))/1 var(--sans); letter-spacing:.2em; color:var(--bone); }
.reward button{ border:0; background:var(--orange); color:#140a03; cursor:pointer; padding:0 max(16px, calc(24 * var(--a)));
                font:700 max(14px, calc(19 * var(--a)))/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; min-width:88px; }
.reward button:hover{ background:var(--orange-hot); }
.actions{ margin-top:max(16px, calc(26 * var(--a))); display:flex; flex-wrap:wrap; justify-content:center; gap:max(12px, calc(26 * var(--a))); align-items:center; }
.shop{ display:inline-flex; align-items:center; min-height:48px; text-decoration:none; color:#140a03;
       background:linear-gradient(180deg, #FFA33A, #F25A0C); border-radius:999px;
       padding:max(12px, calc(16 * var(--a))) max(28px, calc(42 * var(--a)));
       font:max(19px, calc(32 * var(--a)))/1 var(--marker); text-transform:uppercase; box-shadow:0 0 calc(25 * var(--a)) rgba(255,106,19,.45); }
.shop:hover{ filter:brightness(1.08); }
.again{ background:none; border:0; color:var(--smoke); cursor:pointer; padding:12px 6px; min-height:44px;
        font:500 max(14px, calc(18 * var(--a)))/1 var(--sans); text-shadow:0 1px 6px #000; text-decoration:underline; text-underline-offset:.25em; }
.again:hover{ color:var(--bone); }
.email-form{ width:100%; max-width:calc(560 * var(--a)); margin-top:max(14px, calc(22 * var(--a))); text-align:left; }
.email-label{ display:block; font:600 max(13px, calc(19 * var(--a)))/1.3 var(--sans); margin-bottom:max(6px, calc(8 * var(--a))); text-align:center; }
.email-row{ display:flex; gap:max(6px, calc(10 * var(--a))); }
.email-input{ flex:1; min-width:0; height:max(46px, calc(58 * var(--a))); padding:0 14px; border-radius:calc(12 * var(--a));
              border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--bone);
              font:500 max(16px, calc(20 * var(--a)))/1 var(--sans); outline:none; }
.email-input::placeholder{ color:rgba(247,239,230,.45); }
.email-input:focus{ border-color:var(--orange); }
.email-btn{ height:max(46px, calc(58 * var(--a))); padding:0 max(18px, calc(26 * var(--a))); border:0; border-radius:calc(12 * var(--a));
            background:var(--bone); color:#140a03; cursor:pointer; font:700 max(14px, calc(18 * var(--a)))/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.email-btn:hover{ background:#fff; }
.email-btn:disabled{ opacity:.6; cursor:progress; }
.optin{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:max(8px, calc(10 * var(--a)));
        font:500 max(13px, calc(16 * var(--a)))/1.3 var(--sans); color:var(--smoke); cursor:pointer; }
.optin input{ width:18px; height:18px; accent-color:var(--orange); margin:0; }
.email-msg{ margin:max(6px, calc(8 * var(--a))) 0 0; min-height:1.3em; text-align:center; font:500 max(13px, calc(17 * var(--a)))/1.3 var(--sans) !important; }
.email-msg.ok{ color:#7fe0a8; } .email-msg.err{ color:var(--ember); }
.email-form.sent .email-row, .email-form.sent .optin, .email-form.sent .email-label{ display:none; }
.prize :focus-visible, .shop:focus-visible{ outline:3px solid var(--bone); outline-offset:4px; }

/* ---------- Mobile: photo crop on top, copy + form in a real column below ---------- */
/* Phones and portrait tablets */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px){
  body{ place-items:start center; }
  .stage{ width:100%; aspect-ratio:auto; background:#000; overflow:hidden; }
  .hero{
    position:relative; inset:auto;
    --a:calc(100cqw / 846); --ox:690; --oy:30;
    height:calc(760 * var(--a));
    background:var(--bg) no-repeat;
    background-size:calc(1536 * var(--a)) calc(1024 * var(--a));
    background-position:calc(-690 * var(--a)) calc(-30 * var(--a));
  }
  .column::before{ display:none; }
  .column{
    --a:calc(min(100cqw, 560px) / 800);
    position:relative; left:auto; top:auto; width:100%; height:auto;
    margin-top:calc(-170 * var(--a)); padding:calc(60 * var(--a)) 20px calc(40 * var(--a) + 16px);
    background:linear-gradient(to bottom, rgba(0,0,0,0), #000 calc(150 * var(--a)));
    z-index:4;
  }
  .logo{ width:calc(190 * var(--a)); }
  .headline .l1{ font-size:calc(86 * var(--a)); }
  .code-input{ width:100%; max-width:420px; }
  .btn-wrap{ width:100%; max-width:400px; }
  .error{ max-width:100%; }
  .email-form{ max-width:400px; }
}

.prize .legal{ margin:max(4px, calc(6 * var(--a))) 0 0; text-align:center; font:500 max(10.5px, calc(11.5 * var(--a)))/1.3 var(--sans); letter-spacing:.02em; }
.legal a{ color:var(--smoke); text-underline-offset:.2em; }
.legal a:hover{ color:var(--bone); }