/* Luxe Pick-a-Pumpkin porch — luxe-pumpkin-game.php */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* ═══ 2. The porch page ═══ */
.pp{--gold:#F0C46B;--gold-hi:#FFF0C4;--ember:#ff8a1f;--ink:#120a07;background:#0d0a0c;color:#efe7da;overflow:hidden}
.pp a:not(.btn-gold){color:inherit}
.pp-hero{position:relative;text-align:center;padding:46px 16px 0;
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,138,31,.16),transparent 70%),linear-gradient(#150c10,#0d0a0c)}
.pp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#ffb066}
.pp-eyebrow i{width:26px;height:1px;background:linear-gradient(90deg,transparent,#ffb066)}
.pp-eyebrow i:last-child{transform:scaleX(-1)}
.pp h1{margin:12px 0 10px;font-family:Cinzel,serif!important;font-weight:700;font-size:clamp(38px,7vw,68px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#FFF6DA 0%,#F0C46B 50%,#d9802b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 18px rgba(255,140,40,.28))}
.pp-lede{max-width:560px;margin:0 auto;font-size:16px;line-height:1.55;color:#cfc4b3}
.pp-lede strong{color:#fff}
.pp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
.pp-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(240,196,107,.28);color:#efe2c8}
.pp-chip .clk{font:700 12.5px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fff}
.pp-count{margin:26px auto 0;max-width:560px}
.pp-count-label{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#ffb066}
.pp-count-tiles{display:flex;justify-content:center;align-items:flex-start;gap:10px;margin:10px 0 10px}
.pp-count-tiles div{min-width:84px;padding:12px 8px 9px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(240,196,107,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(255,140,40,.12)}
.pp-count-tiles b{display:block;font:800 40px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFF6DA,#F0C46B 60%,#e09040);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-count-tiles span{display:block;margin-top:5px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a99d8a}
.pp-count-tiles i{font:700 30px/1 Inter,sans-serif;color:rgba(240,196,107,.55);padding-top:14px;font-style:normal}
.pp-count-next{font-size:14px;color:#cdbfa9}
.pp-count-next strong{color:#fff}
@media(max-width:560px){.pp-count-tiles{gap:6px}.pp-count-tiles div{min-width:0;flex:1;padding:10px 4px 8px}.pp-count-tiles b{font-size:30px}.pp-count-tiles i{display:none}}
.pp-chip.golden{background:linear-gradient(180deg,rgba(255,226,140,.22),rgba(240,196,107,.08));border-color:#F0C46B;color:#FFE9B5}

/* scene */
.pp-scene{position:relative;height:600px;margin:-30px calc(50% - 50vw) 0}
.pp-bg{position:absolute;inset:0;background:url(art/porch-backdrop.webp) center 70%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%)}
.pp-scene::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(60% 45% at 50% 84%,rgba(255,140,40,.16),transparent 70%)}
.pp-row,.pp-hint,.pp-ghost,.pp-gate{z-index:3}
.pp-fog{position:absolute;left:-10%;right:-10%;bottom:70px;height:120px;pointer-events:none;opacity:.55;
  background:radial-gradient(40% 60% at 25% 80%,rgba(220,210,230,.16),transparent 70%),radial-gradient(40% 60% at 75% 70%,rgba(220,210,230,.12),transparent 70%);
  filter:blur(8px);animation:fog 16s ease-in-out infinite alternate}
@keyframes fog{to{transform:translateX(6%)}}
.pp-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pp-embers i{position:absolute;bottom:18%;width:3px;height:3px;border-radius:50%;background:#ffc46b;box-shadow:0 0 6px #ff9a3c;opacity:0;animation:ember 7s linear infinite}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}100%{opacity:0;transform:translate(var(--dx,20px),-340px)}}
.pp-row{position:absolute;left:0;right:0;bottom:7%;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,22px);padding:0 12px}

/* pumpkin */
.pk{position:relative;flex:0 0 auto;width:var(--w,170px);line-height:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .5s}
/* Only the pumpkin's body is tappable: the image's transparent headroom (room for the
   floating lid) must not steal taps from the row behind or fire on empty air. */
.pk-hit{position:absolute;left:3%;right:3%;top:calc(var(--body,38%) - 3%);bottom:0;z-index:2;pointer-events:auto;
  padding:0;border:0;border-radius:46% 46% 42% 42%;background:none;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.pk-hit[disabled]{cursor:default}
.pk:nth-child(1),.pk:nth-child(5){--w:150px}
.pk:nth-child(2),.pk:nth-child(4){--w:178px}
.pk:nth-child(3){--w:206px}
.pk img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.pk .pk-c{animation:pkFlicker 3.1s infinite}
.pk:nth-child(2) .pk-c{animation-delay:-1.1s}.pk:nth-child(3) .pk-c{animation-delay:-2.2s}.pk:nth-child(4) .pk-c{animation-delay:-.6s}.pk:nth-child(5) .pk-c{animation-delay:-1.7s}
@keyframes pkFlicker{0%,100%{filter:brightness(1)}17%{filter:brightness(.9)}21%{filter:brightness(1.1)}46%{filter:brightness(.95)}50%{filter:brightness(1.06)}78%{filter:brightness(.92)}}
.pk .pk-o{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(10px) scale(.97);transform-origin:50% 100%;transition:opacity .45s,transform .7s cubic-bezier(.2,1.6,.4,1)}
.pk::before{content:"";position:absolute;left:6%;right:6%;bottom:-5%;height:14%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,140,40,.55),rgba(255,140,40,0));filter:blur(3px);animation:flicker 2.6s infinite}
@keyframes flicker{0%,100%{opacity:.85}18%{opacity:.6}22%{opacity:1}48%{opacity:.75}52%{opacity:.95}80%{opacity:.68}}
.pk-flash{position:absolute;left:50%;top:38%;width:120%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,220,.95),rgba(255,200,90,.55) 30%,rgba(255,140,40,0) 65%)}
.pk-sparks{position:absolute;left:50%;top:30%;width:0;height:0;pointer-events:none}
.pk-sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe39a;box-shadow:0 0 8px #ffb347;opacity:0}
@media(hover:hover){.pk:has(.pk-hit:hover:not([disabled])){transform:translateY(-10px)}.pk:has(.pk-hit:hover:not([disabled])) .pk-c{filter:brightness(1.12)}}
.pk:has(.pk-hit:focus-visible){transform:translateY(-10px)}
.pk-hit:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pk:has(.pk-hit:active:not([disabled])){transform:scale(.96);transition-duration:.08s}
.pk.is-shaking{animation:pkShake .6s ease-in-out}
@keyframes pkShake{15%{transform:rotate(-6deg) translateY(-4px)}35%{transform:rotate(5deg) translateY(-6px)}55%{transform:rotate(-4deg) translateY(-4px)}75%{transform:rotate(2deg)}}
.pk.is-open{transform:translateY(-4px) scale(1.06);z-index:2}
.pk.is-open .pk-c{opacity:0;transition:opacity .35s}
.pk.is-open .pk-o{opacity:1;transform:none}
.pk.is-open .pk-flash{animation:pkFlash .9s ease-out forwards}
@keyframes pkFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
.pk.is-open .pk-sparks i{animation:spark 1.6s ease-out forwards}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
.pk.is-dim{filter:brightness(.32) saturate(.45)}
.pk.is-dim .pk-c,.pk.is-dim::before{animation:none}
.pp-hint{pointer-events:none;position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.06em;color:#ffd9ad;text-shadow:0 0 12px rgba(255,140,40,.6);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{50%{opacity:.45}}
.pp-hint.done{animation:none;color:#d8cbb3;text-shadow:none}
.pp-hint.done{pointer-events:auto}
.pp-hint button{min-height:44px;font:inherit;color:#FFE9B5;background:none;border:0;border-bottom:1px solid rgba(240,196,107,.6);padding:0;cursor:pointer}

/* ghost (trick) */
.pp-ghost{position:absolute;left:50%;bottom:44%;transform:translate(-50%,30px) scale(.6);opacity:0;pointer-events:none;transition:all .5s cubic-bezier(.3,1.5,.5,1);text-align:center;z-index:4}
.pp-ghost.show{opacity:1;transform:translate(-50%,0) scale(1)}
.pp-ghost svg{width:90px;animation:ghostBob 1.4s ease-in-out infinite}
.pp-ghost b{display:block;font:700 28px Cinzel,serif!important;color:#fff;text-shadow:0 0 18px rgba(200,190,255,.6)}
@keyframes ghostBob{50%{transform:translateY(-8px)}}

/* sign-in overlay */
.pp-gate{position:absolute;inset:auto 0 150px;display:flex;justify-content:center;z-index:5;padding:0 16px}
.pp-gate[hidden]{display:none}
.pp-card{position:relative;width:100%;max-width:420px;border-radius:18px;padding:24px 22px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(28,18,14,.97),rgba(14,9,8,.98));border:1px solid rgba(240,196,107,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.65),0 0 60px rgba(255,140,40,.18)}
.pp-card h3{margin:0 0 6px;font:700 22px Cinzel,serif!important;color:#FFE9B5}
.pp-card p{margin:0 0 14px;color:#cdbfa9;font-size:14px;line-height:1.5}
.pp-field{display:flex;gap:8px}
.pp-field input{flex:1;min-width:0;font:16px Inter,sans-serif;padding:12px;border-radius:10px;border:1px solid #5a4a36;background:#fff;color:#222}
.btn-gold{font:700 14px Inter,sans-serif;border:0;border-radius:10px;min-height:46px;padding:12px 16px;touch-action:manipulation;cursor:pointer;color:#282828;background:#F7CC7F;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-gold:hover{background:#ffd893}
.btn-ghost{font:600 14px Inter,sans-serif;border:1px solid rgba(240,196,107,.5);border-radius:10px;min-height:46px;padding:11px 14px;touch-action:manipulation;cursor:pointer;color:#FFE9B5;background:transparent;display:inline-flex;align-items:center;gap:7px}
.pp-small{font-size:12px;color:#9d917f;margin-top:10px}

/* prize card */
.pp-prize{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;padding:48px 16px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain;
  background:rgba(6,4,4,.0);transition:background .5s;overflow-y:auto}
.pp-prize.show{background:rgba(6,4,4,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pp-prize .pp-card{opacity:0;transform:translateY(70px) scale(.9);transition:all .6s cubic-bezier(.2,1.3,.4,1);margin:auto}
.pp-prize.show .pp-card{opacity:1;transform:none}
.pp-prize[hidden]{display:none}
.pz-burst{position:absolute;left:50%;top:-34px;width:68px;height:68px;transform:translateX(-50%);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#fff3cf,#F0C46B 55%,#b8862e);box-shadow:0 0 0 4px #1a120d,0 0 30px rgba(255,190,90,.7)}
.pz-burst svg{width:34px;height:34px;color:#2a1a08}
.pz-kicker{margin-top:26px;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#ffb066}
.pz-value{margin:6px 0 4px;font:700 clamp(34px,8vw,46px)/1 Cinzel,serif!important;background:linear-gradient(180deg,#FFF6DA,#F0C46B 55%,#d9802b);-webkit-background-clip:text;background-clip:text;color:transparent}
.pz-desc{color:#e6dccb;font-size:14.5px;line-height:1.5;margin:0 0 14px}
.pz-code{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed rgba(240,196,107,.7);border-radius:12px;padding:10px 10px 10px 14px;background:rgba(240,196,107,.06);margin-bottom:12px}
.pz-code code{font:700 clamp(14px,4.4vw,17px) ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#fff;white-space:nowrap;user-select:all;-webkit-user-select:all}
.pz-code button{font:700 13px Inter,sans-serif;border:0;border-radius:9px;min-height:40px;min-width:64px;padding:8px 12px;touch-action:manipulation;background:rgba(255,255,255,.1);color:#FFE9B5;cursor:pointer}
.pz-terms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 16px}
.pz-terms span{font-size:11.5px;font-weight:600;color:#d8cbb3;background:rgba(255,255,255,.06);border-radius:999px;padding:4px 9px}
.pz-terms span.hot{color:#2a1404;background:#ffb65c}
.pz-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pz-golden{margin:14px 0 0;padding:10px 12px;border-radius:12px;font-size:13px;color:#FFE9B5;background:linear-gradient(90deg,rgba(255,226,140,.16),rgba(240,196,107,.04));border:1px solid rgba(240,196,107,.5)}
.pz-golden[hidden]{display:none}
.pz-close{position:absolute;top:4px;right:4px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:#b7aa94;font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation}

/* below the scene */
.pp-body{max-width:1000px;margin:0 auto;padding:40px 16px 56px}
.pp-section-title{font:700 24px Cinzel,serif!important;color:#FFE9B5;text-align:center;margin:0 0 6px}
.pp-section-sub{text-align:center;color:#a99d8a;font-size:14px;margin:0 0 22px}
.pp-ticket{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px 22px;border-radius:18px;margin-bottom:40px;
  background:linear-gradient(120deg,rgba(255,226,140,.10),rgba(255,138,31,.05) 60%,transparent);border:1px solid rgba(240,196,107,.35)}
.pp-ticket h3{margin:0 0 4px;font:700 19px Cinzel,serif!important;color:#FFE9B5}
.pp-ticket p{margin:0;color:#cdbfa9;font-size:14px;line-height:1.5}
.tk-drops{display:flex;gap:10px}
.tk-drop{width:62px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8e8170}
.tk-drop img{width:46px;height:46px;object-fit:contain;display:block;margin:0 auto 4px;filter:grayscale(1) brightness(.3)}
.tk-drop.lit{color:#ffcf96}
.tk-drop.lit img{filter:drop-shadow(0 0 10px rgba(255,150,40,.6))}
.pp-prizes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px}
.pz-tile{border-radius:14px;padding:16px 14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);text-align:center}
.pz-tile svg{width:30px;height:30px;color:#F0C46B;margin-bottom:6px}
.pz-tile b{display:block;font-size:15px;color:#fff;margin-bottom:3px}
.pz-tile span{font-size:12.5px;color:#a99d8a;line-height:1.4}
.pz-tile.rare{border-color:rgba(240,196,107,.45);background:linear-gradient(180deg,rgba(240,196,107,.10),rgba(255,255,255,.02))}
.pz-tile.rare b{color:#FFE9B5}
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px;counter-reset:s}
.pp-step{position:relative;padding:18px 16px 16px 56px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:14px;line-height:1.5;color:#d6cab6}
.pp-step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px Cinzel,serif!important;color:#2a1404;background:linear-gradient(180deg,#FFE3B0,#ffb65c)}
.pp-step b{color:#fff}
.pp-schedule{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:40px}
.sch{border-radius:12px;padding:12px;text-align:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.sch b{display:block;font-size:13px;color:#fff}
.sch span{font-size:12px;color:#a99d8a}
.sch.now{border-color:#ff9a3c;background:rgba(255,138,31,.08)}
.sch.now b::after{content:" · now";color:#ffb066}
.sch.great{border-color:rgba(240,196,107,.5)}
.pp-b2g1{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:16px;margin-bottom:34px;background:#141010;border:1px solid rgba(255,255,255,.08)}
.pp-b2g1 .vials{flex:0 0 auto}
.pp-b2g1 h3{margin:0 0 3px;font:700 18px Cinzel,serif!important;color:#FFE9B5}
.pp-b2g1 p{margin:0;color:#cdbfa9;font-size:14px;line-height:1.5}
.pp-b2g1 .btn-gold{margin-left:auto;flex:0 0 auto}
.pp-fine{font-size:12px;line-height:1.6;color:#8e8373;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.pp-fine summary{cursor:pointer;color:#bfb29c;font-weight:600;font-size:13px}
.pp-fine table{border-collapse:collapse;margin:8px 0 12px;font-size:12px}
.pp-fine td,.pp-fine th{padding:3px 12px 3px 0;text-align:left;color:#a99d8a;font-weight:400}
.pp-fine th{color:#d6cab6;font-weight:600}

@media(max-width:760px){
  .pp-prizes{grid-template-columns:repeat(2,1fr)}
  .pp-steps,.pp-schedule{grid-template-columns:1fr 1fr}
  .pp-b2g1{flex-wrap:wrap}.pp-b2g1 .btn-gold{margin-left:0;width:100%}
}
@media(max-width:560px){
  .pp-hero{padding-top:34px}
  .pp-lede{font-size:15px}
  .pp-scene{height:500px}
  .pp-bg{background-image:url(art/porch-backdrop-960.webp);background-position:50% 100%;background-size:auto 100%}
  .pp-row{display:grid;grid-template-columns:repeat(6,1fr);column-gap:2px;align-items:end;bottom:5%;max-width:430px;margin:0 auto;padding:0 8px}
  .pk:nth-child(n){--w:100%;margin:0}
  .pk:nth-child(1){grid-column:1/3;grid-row:1}
  .pk:nth-child(2){grid-column:3/5;grid-row:1}
  .pk:nth-child(3){grid-column:5/7;grid-row:1}
  .pk:nth-child(-n+3){padding:0 7%}
  .pk:nth-child(4){grid-column:2/4;grid-row:2;margin-top:-44px}
  .pk:nth-child(5){grid-column:4/6;grid-row:2;margin-top:-44px}
  .pp-row{bottom:9%}
  .pp-hint{bottom:10px}
  .pp-gate{bottom:24px}
  .pp-ticket{grid-template-columns:1fr;text-align:center}.tk-drops{justify-content:center}
  .pp-steps{grid-template-columns:1fr}
  .pp-schedule{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.pp *,.pp *::before,.pp *::after{animation:none!important;transition-duration:.01ms!important}}
/* Storefront button/link resets inside the porch */
.pp button{font-family:inherit;box-shadow:none;text-shadow:none;line-height:normal;margin:0;text-transform:none;letter-spacing:normal}
.pp .pk-hit,.pp .pk-hit:hover,.pp .pk-hit:focus,.pp .pz-close,.pp .pz-close:hover{background:none;color:inherit}
.pp .btn-ghost:hover{background:rgba(240,196,107,.08);color:#FFE9B5}
.pp .pz-code button:hover{background:rgba(255,255,255,.16);color:#FFE9B5}
.pp img{max-width:none}