/* "Hatch a Mawling" whitelist page. Builds on assets/mawborn.css + site/site.css (nav, sections, fields, footer). */
.wl-hero{overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:calc(100dvh - 68px);padding-top:clamp(12px,3vw,40px)}
.wl-title{margin:0;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.95}
.wl-sub{margin:12px 0 18px;max-width:44ch;font-size:1.1rem;line-height:1.55;color:var(--muted)}
.wl-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:18px;font-family:var(--display);color:var(--muted)}
.wl-count b{font-size:1.9rem;color:var(--cream);-webkit-text-stroke:.12em var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.wl-count .closed{color:var(--coral)}
.skel{display:inline-block;height:18px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06));background-size:200% 100%;animation:skel 1.4s linear infinite}
.skel.tall{height:52px;width:100%}
@keyframes skel{to{background-position:-200% 0}}

/* Quest panel: one state at a time */
.quest{position:relative;max-width:560px;padding:22px;border:4px solid var(--ink);border-radius:var(--r-panel);background:linear-gradient(180deg,var(--plum),var(--night-2));box-shadow:0 8px 0 var(--ink),0 24px 50px rgba(16,14,9,.5)}
.quest-skel{display:grid;gap:12px}
.quest h2{margin:0;font:1.7rem/1.05 var(--display);color:var(--cream)}
.quest>p,.q-note{margin:8px 0 16px;color:var(--muted);line-height:1.5}
.q-note{font-size:.88rem;margin:12px 0 0}
.q-error{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border:3px solid var(--ink);border-radius:14px;background:var(--coral);color:var(--ink);font-weight:600}
.q-error .ic{flex:none;margin-top:2px}
.quest .btn-lg{width:100%}
.tasks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.task{display:flex;align-items:center;gap:12px;padding:10px 12px;border:3px solid var(--ink);border-radius:16px;background:rgba(26,24,16,.55)}
.task.done{background:linear-gradient(90deg,rgba(157,220,79,.28),rgba(26,24,16,.55))}
.task-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border:3px solid var(--ink);border-radius:13px;background:var(--plum-3);color:var(--cream);box-shadow:0 3px 0 var(--ink)}
.task.done .task-ic{background:var(--lime);color:var(--ink)}
.task-ic .ic{width:22px;height:22px}
.task-body{flex:1;min-width:0}
.task-body b{display:block;font:1.05rem var(--display)}
.task-body small{color:var(--muted)}
.task .chip-done{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:3px solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);font:.8rem var(--display)}
.task.optional .task-ic{background:var(--gold);color:var(--ink)}
.warmth{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:.85rem var(--display);letter-spacing:.06em;color:var(--muted)}
.warmth i{flex:1;height:14px;border:3px solid var(--ink);border-radius:999px;background:var(--ink-2);overflow:hidden}
.warmth i span{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--gold),var(--coral));transition:width .6s var(--out)}
/* Holder claim: the qualifying partner collections, each a chip linking to OpenSea */
.colls{margin-top:14px;padding:12px 14px;border:3px solid var(--ink);border-radius:16px;background:rgba(26,24,16,.55)}
.colls b{font:1rem var(--display);color:var(--cream)}
.coll-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.coll{padding:5px 11px 4px;border:2px solid var(--ink);border-radius:999px;background:var(--night-2);color:var(--cream-2);font:600 .8rem/1.2 var(--body);text-decoration:none;box-shadow:0 2px 0 var(--ink);transition:background .15s,color .15s,transform .15s}
.coll:hover,.coll:focus-visible{background:var(--gold);color:var(--ink);transform:translateY(-1px)}
.holder-miss{margin-top:10px;padding:10px 12px;border:2px dashed var(--coral);border-radius:12px;color:var(--cream)}
/* Signed-in bar above the quest panel: who you are, and a way to sign out */
.account{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 0 10px;padding:6px 6px 6px 8px;border:3px solid var(--ink);border-radius:999px;background:rgba(26,24,16,.72);box-shadow:0 4px 0 var(--ink)}
.account[hidden]{display:none}
.account img{width:30px;height:30px;flex:none;border:2px solid var(--ink);border-radius:50%;object-fit:cover;background:var(--night-2)}
.account span{flex:1;min-width:0;font-size:.9rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account b{color:var(--cream)}
.account .btn{flex:none}
.ref-box{display:flex;gap:8px;margin-top:10px}
.ref-box input{flex:1;min-width:0;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:var(--cream);color:var(--ink);font:600 .85rem var(--body)}
.wallet-form{display:grid;gap:8px}
.wallet-form label{font:1rem var(--display);color:var(--cream)}
.wallet-form input{width:100%;padding:13px 14px;border:3px solid var(--ink);border-radius:14px;background:var(--cream);color:var(--ink);font:600 1rem var(--body);box-shadow:inset 0 3px 0 rgba(26,24,16,.12),0 4px 0 var(--ink)}
.wallet-form input::placeholder{color:#6b6650}
.wallet-form input[aria-invalid="true"]{background:#ffe1db;outline:3px solid var(--coral)}
.wallet-form small{color:var(--muted)}
.wallet-form .field-error{color:var(--coral-hi);font-weight:600}
.wallet-form .btn{margin-top:6px}

/* Pass card (sealed) */
.pass{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px;border:4px solid var(--ink);border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--el) 45%,var(--plum)),var(--night-2));box-shadow:0 5px 0 var(--ink)}
.pass.tier-gtd{background:linear-gradient(120deg,#8a5a12,#3b3a22 60%);box-shadow:0 5px 0 var(--ink),0 0 0 3px var(--gold)}
.pass-face{width:96px;aspect-ratio:1;border:4px solid var(--ink);border-radius:50%;overflow:hidden;background:var(--el)}
.pass-face img{width:100%;height:100%;object-fit:cover}
.pass dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:.9rem}
.pass dt{font:.75rem var(--display);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;align-self:center}
.pass dd{margin:0;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pass .tier{display:inline-block;padding:1px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);font:.8rem var(--display)}
.pass.tier-gtd .tier{background:var(--gold)}

.wl-count .gone{color:var(--coral)}

/* Quest panel bits for the Shell Game. Gem colours: GTD gold, FCFS olive, empty stone. */
.game-rules,.invite{margin-top:12px;padding:12px 14px;border:3px solid var(--ink);border-radius:16px;background:rgba(26,24,16,.55)}
.game-rules b,.invite p b{font:1rem var(--display);color:var(--cream)}
.game-rules p,.invite p{margin:4px 0 0;color:var(--muted);line-height:1.5;font-size:.95rem}
.invite .ref-box{margin-top:10px}
.pips{display:flex;align-items:center;gap:7px;margin:2px 0 16px;font:.95rem var(--display);color:var(--muted)}
.pips i{width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 2px 0 var(--ink)}
.pips i.miss{background:#5b5850}
.pips i.off{background:var(--ink-2);box-shadow:none;opacity:.6}
.pips i.hit{background:radial-gradient(circle at 35% 30%,var(--lime-hi),var(--lime) 55%,var(--lime-lo))}
.pips span{margin-left:6px}

/* ---------- Grumble's Shell Game (stage) ----------
   Every motion here carries meaning: Grumble's bubble pops when he speaks, shells tilt into each swap and
   squash when they land, the table lights under the shell you aim at, and a found gem rises on a beam. */
.shell-game{display:none;position:relative;z-index:2;width:min(680px,100%);justify-items:center;gap:0}
.egg-stage.game .shell-game{display:grid;animation:pop-in .5s var(--pop)}
.egg-stage.game .egg,.egg-stage.game .egg-shadow{display:none}
.egg-stage.game .egg-rays{opacity:.16}
.egg-stage.game .egg-glow{opacity:0}
/* the lamp over the table: a soft cone of warm light falling onto the felt */
.table-glow::before{content:"";position:absolute;left:18%;right:18%;bottom:40%;height:300%;background:linear-gradient(to top,rgba(255,206,120,.16),rgba(255,206,120,.05) 60%,transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);pointer-events:none}

/* Host: Grumble in a gold-ringed portrait with a speech bubble */
.host{display:flex;align-items:center;gap:16px;width:100%;padding:0 3%}
.host-face{position:relative;flex:none;width:128px;aspect-ratio:1;border:5px solid var(--ink);border-radius:50%;overflow:hidden;background:var(--el-wild);box-shadow:0 0 0 5px var(--gold),0 0 0 9px var(--ink),0 12px 0 4px var(--ink)}
.host-face img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.shuffling .host-face{animation:host-bob .24s ease-in-out infinite alternate}
@keyframes host-bob{to{transform:translateY(-6px) rotate(5deg)}}
.lost .host-face{filter:saturate(.7)}
.host-say{position:relative;flex:1;margin:0;padding:14px 18px;border:4px solid var(--ink);border-radius:20px 16px 22px 14px/16px 22px 14px 20px;background:var(--cream);color:var(--ink);font:1.15rem/1.25 var(--display);letter-spacing:.01em;box-shadow:0 6px 0 var(--ink);min-height:3.4em;display:flex;align-items:center;transform-origin:0 50%}
.host-say::before{content:"";position:absolute;left:-15px;top:50%;width:20px;height:20px;translate:0 -50%;rotate:45deg;background:var(--cream);border-left:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.host-say.pop{animation:say-pop .32s var(--pop)}
@keyframes say-pop{from{transform:scale(.88);opacity:.4}}

/* The table: Grumble's game table. Moss-green felt inside a wooden rail with a gold pinstripe, five worn
   resting rings where the shells sit, a brass nameplate on the front and a warm lamp overhead.
   Five slots across; a shell's slot sets its X, lifting uses `translate`. */
/* Short box on purpose: lifted shells rise above it into open air instead of leaving a dead band under Grumble. */
.table{position:relative;width:100%;aspect-ratio:5/1.75;margin-top:clamp(28px,4vw,44px);isolation:isolate}
/* While the Shell Game is on, the board gets the larger share of the hero */
@media (min-width:901px){.wl-hero:has(.egg-stage.game){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
/* felt top + rail. Resting rings sit under each slot centre (11.3/30.7/50/69.3/88.7% of this box). */
.table::before{content:"";position:absolute;left:-2%;right:-2%;bottom:4%;height:52%;z-index:0;border:5px solid var(--ink);border-radius:50%;
 background:
  radial-gradient(ellipse 7.4% 13% at 11.3% 66%,transparent 72%,rgba(255,214,140,.16) 76% 86%,transparent 90%),
  radial-gradient(ellipse 7.4% 13% at 30.7% 66%,transparent 72%,rgba(255,214,140,.16) 76% 86%,transparent 90%),
  radial-gradient(ellipse 7.4% 13% at 50% 66%,transparent 72%,rgba(255,214,140,.16) 76% 86%,transparent 90%),
  radial-gradient(ellipse 7.4% 13% at 69.3% 66%,transparent 72%,rgba(255,214,140,.16) 76% 86%,transparent 90%),
  radial-gradient(ellipse 7.4% 13% at 88.7% 66%,transparent 72%,rgba(255,214,140,.16) 76% 86%,transparent 90%),
  radial-gradient(ellipse 46% 52% at 50% 46%,rgba(255,206,120,.22),transparent 72%),
  radial-gradient(ellipse 60% 70% at 50% 42%,#56692a,#3a4919 58%,#27310f);
 box-shadow:
  inset 0 0 0 10px #70431f,inset 0 3px 0 10px #9a6532,inset 0 0 0 13px var(--ink),
  inset 0 0 0 16px rgba(255,194,90,.55),inset 0 22px 34px rgba(16,14,9,.45),inset 0 -10px 24px rgba(16,14,9,.35)}
/* the table's front edge: the wooden apron under the rail, gives the table depth */
.table::after{content:"";position:absolute;left:-1%;right:-1%;bottom:-7%;height:30%;z-index:-1;border:5px solid var(--ink);border-top:0;border-radius:0 0 50% 50%/0 0 100% 100%;
 background:
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(23,21,15,.22) 46px 49px),
  linear-gradient(#83512a,#5a3518 55%,#3e2410);
 box-shadow:inset 0 5px 0 rgba(255,214,160,.22),0 18px 30px rgba(16,14,9,.55)}
/* the lamp's light pool on the felt; brighter while you pick */
.table-glow{position:absolute;left:12%;right:12%;bottom:14%;height:36%;z-index:0;border-radius:50%;background:radial-gradient(ellipse,rgba(255,196,96,.30),transparent 70%);opacity:.7;transition:opacity .4s}
.table.pickable .table-glow{opacity:1}
/* brass nameplate on the apron */
.table-plate{position:absolute;left:50%;bottom:-4.5%;z-index:3;translate:-50% 0;padding:5px 16px 4px;border:3px solid var(--ink);border-radius:8px;
 background:linear-gradient(#ffe39a,#f2b94a 55%,#c8861f);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--ink);
 color:#3a2408;font:clamp(.62rem,1.4vw,.82rem)/1 var(--display);letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 0 rgba(255,240,200,.6)}
.table-plate::before,.table-plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;translate:0 -50%;border-radius:50%;background:#8a5a14;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.table-plate::before{left:5px}.table-plate::after{right:5px}

.shell{position:absolute;left:.5%;bottom:20%;width:18.6%;aspect-ratio:200/160;padding:0;border:0;background:none;transform:translateX(calc(var(--slot)*108.06%));z-index:2;-webkit-tap-highlight-color:transparent}
.shell:disabled{cursor:default}
/* contact shadow on the slab: shrinks and fades as the shell leaves the table */
.shell::before{content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:16%;border-radius:50%;background:rgba(16,14,9,.55);filter:blur(1px);transition:transform .45s var(--pop),opacity .45s}
.shell.up::before{transform:scale(.55);opacity:.35}
/* aim light under the shell you are about to pick */
.shell::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-14%;height:34%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,220,143,.75),transparent 70%);opacity:0;transition:opacity .2s}
.table.pickable .shell:hover::after,.table.pickable .shell:focus-visible::after{opacity:1}
.prize{position:absolute;left:50%;bottom:6%;translate:-50% 0;display:grid;justify-items:center;gap:3px;z-index:0}
/* The shell itself: one hand-painted SVG (scutes, growth rings, rim plates, belly) shared by all five, so they
   stay identical. A sheen sweeps across it when you hover, like lamplight sliding over a polished shell. */
.dome{position:absolute;inset:0;z-index:1;transform-origin:50% 100%;background:url(../assets/img/shell.svg) center bottom/100% 100% no-repeat;
 transition:translate .5s var(--pop),rotate .5s var(--pop),filter .3s}
.dome::after{content:"";position:absolute;inset:6% 8% 22%;border-radius:50% 50% 8% 8%/90% 90% 10% 10%;background:linear-gradient(105deg,transparent 35%,rgba(255,250,220,.38) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;opacity:0;pointer-events:none;mix-blend-mode:soft-light}
.table.pickable .shell:hover .dome::after,.table.pickable .shell:focus-visible .dome::after{opacity:1;animation:sheen .9s var(--out) forwards}
@keyframes sheen{to{background-position:-30% 0}}
.table.pickable .shell:hover .dome{filter:brightness(1.08) saturate(1.05)}
.table.pickable .shell{cursor:pointer}
.table.pickable .shell:hover .dome,.table.pickable .shell:focus-visible .dome{translate:0 -12%}
.table.pickable .shell:focus-visible{outline:none}
.table.pickable .shell:focus-visible .dome{outline:4px solid var(--gold);outline-offset:4px;border-radius:50% 50% 14% 14%/80% 80% 20% 20%}
.table.pickable .dome{animation:shell-wait 1.8s ease-in-out infinite;animation-delay:calc(var(--slot)*-.36s)}
@keyframes shell-wait{0%,100%{rotate:0deg}50%{rotate:-3deg}}
.shell.chosen .dome{animation:shell-shake .26s ease-in-out infinite}
@keyframes shell-shake{0%,100%{rotate:-6deg}50%{rotate:6deg}}
/* After the shuffle every shell lands with a squash: the show is over, now pick */
.table.settle .dome{animation:shell-land .38s var(--pop)}
@keyframes shell-land{0%{transform:scale(1.08,.86)}60%{transform:scale(.96,1.05)}100%{transform:none}}
.shell.up .dome{translate:0 -88%;rotate:-14deg}
.shell.up.dim{opacity:.78}
.shell.won .dome{translate:0 -104%;rotate:-22deg}

.gem{display:grid;place-items:center;width:clamp(30px,6.4vw,48px);aspect-ratio:1;border:4px solid var(--ink);border-radius:50%;box-shadow:inset 0 -4px 0 rgba(23,21,15,.25),0 4px 0 var(--ink);color:var(--ink)}
.gem .ic{width:55%;height:55%;--ic-stroke:0}
.gem-gtd{background:radial-gradient(circle at 35% 30%,#fff1c2,var(--gold) 50%,var(--gold-lo))}
.gem-fcfs{background:radial-gradient(circle at 35% 30%,#f2f8c8,var(--lime) 50%,var(--lime-lo))}
/* +1 Pick token: a cool blue, so it never reads as a GTD or FCFS gem */
.gem-extra{background:radial-gradient(circle at 35% 30%,#e6f7ff,#7fcbf2 50%,#3d8fbf)}
.gem-plus{font:clamp(.8rem,1.9vw,1.15rem)/1 var(--display);color:var(--ink);letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.gem-drop .gem-extra{display:none}
.table.with-token .gem-drop .gem-extra{display:grid}
.table.dropping .gem-drop .gem:nth-child(3){animation-delay:.24s}
.shell.won.extra .prize::before{background:linear-gradient(to top,rgba(160,220,255,.85),rgba(120,190,240,.25) 55%,transparent)}
.shell.won.extra .prize::after{border-color:#bfe8ff}
.shell.won.extra .gem{animation:gem-rise .7s var(--pop) both,token-glow 1s ease-in-out .7s infinite alternate}
@keyframes token-glow{to{box-shadow:inset 0 -4px 0 rgba(23,21,15,.25),0 4px 0 var(--ink),0 0 26px 6px rgba(127,203,242,.75)}}
.shell.won.extra .dome{translate:0 -92%;rotate:-16deg}
.pips i.bonus{background:radial-gradient(circle at 35% 30%,#e6f7ff,#7fcbf2 55%,#3d8fbf)}
.gem-label{white-space:nowrap;font:.85rem var(--display);color:var(--cream);-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill}
/* A found gem rises out of the shell on a beam of light */
.shell.won .prize{z-index:3}
.shell.won .prize::before{content:"";position:absolute;left:50%;bottom:30%;width:160%;height:360%;translate:-50% 0;z-index:-1;background:linear-gradient(to top,rgba(255,220,143,.85),rgba(255,180,60,.25) 55%,transparent);clip-path:polygon(30% 100%,70% 100%,100% 0,0 0);transform-origin:50% 100%;animation:beam-up .6s var(--out) both}
.shell.won .gem{animation:gem-rise .7s var(--pop) both,gem-glow 1s ease-in-out .7s infinite alternate}
@keyframes beam-up{from{transform:scaleY(0);opacity:0}}
@keyframes gem-rise{from{transform:translateY(40%) scale(.4)}60%{transform:translateY(-34%) scale(1.25)}to{transform:translateY(-22%) scale(1.15)}}
@keyframes gem-glow{to{box-shadow:inset 0 -4px 0 rgba(23,21,15,.25),0 4px 0 var(--ink),0 0 30px 8px rgba(255,180,60,.75)}}
.dust{display:block;width:52px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(189,186,164,.6),transparent 70%)}
.shell.up:not(.dim) .dust{animation:dust-puff .7s var(--out) both}
@keyframes dust-puff{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:.55}}

/* Hiding: two gems pop up over the table, then fall in behind the row of shells while the shells hop.
   They land in the middle on purpose: nothing shows which shell got them. */
/* The hide, told as a magic trick in three beats:
   1. lift: every shell rises off the felt so you can see the table is empty
   2. drop: two gems fall in from above and bounce on the felt (they sit between slots, so nothing gives them away)
   3. slam: all five shells come down at once, the table thuds, dust kicks out, the gems vanish under them */
.gem-drop{position:absolute;left:50%;bottom:24%;translate:-50% 0;display:none;gap:clamp(10px,3vw,22px);z-index:1;pointer-events:none}
.gem-drop .gem{width:clamp(28px,5.2vw,44px)}
.table.lift-all .dome{translate:0 -78%;rotate:-4deg}
.table.lift-all .shell::before{transform:scale(.6);opacity:.3}
.table.dropping .gem-drop{display:flex}
.table.dropping .gem-drop .gem{animation:gem-fall .75s cubic-bezier(.3,0,.6,1) both}
.table.dropping .gem-drop .gem + .gem{animation-delay:.12s}
@keyframes gem-fall{
 0%{transform:translateY(-420%) scale(.7) rotate(-30deg);opacity:0}
 18%{opacity:1}
 55%{transform:translateY(0) scale(1.05,.9) rotate(0)}
 70%{transform:translateY(-38%) scale(.97,1.04)}
 84%{transform:translateY(0) scale(1.03,.95)}
 92%{transform:translateY(-8%)}
 100%{transform:translateY(0) scale(1)}}
/* the slam: a fast fall with no bounce, then the landing */
.table.slam .dome{transition:translate .17s cubic-bezier(.55,0,1,.45),rotate .17s cubic-bezier(.55,0,1,.45)}
.table.slam .gem-drop{opacity:0;transition:opacity .12s .1s}
.table.thud{animation:table-thud .34s ease-out}
@keyframes table-thud{25%{transform:translateY(4px) scale(1.012,.985)}60%{transform:translateY(-1px)}}
.table.thud .dome{animation:shell-land .38s var(--pop)}
.table.thud .shell::before{animation:dust-kick .55s var(--out)}
@keyframes dust-kick{0%{transform:scale(1);opacity:.95;background:rgba(214,206,170,.75)}100%{transform:scale(1.9,1.35);opacity:0;background:rgba(214,206,170,.0)}}

/* Shuffle climax: the table lamp brightens while the shells are flying */
.shuffling .table-glow{opacity:1;filter:brightness(1.25)}

/* Reveal. A win sends a ring of light across the felt and punches the table; a miss tips the shell over. */
.shell.won .prize::after{content:"";position:absolute;left:50%;bottom:-6%;width:120%;aspect-ratio:1;translate:-50% 50%;border:4px solid var(--gold-hi);border-radius:50%;
 transform:scaleY(.32) scale(.2);opacity:0;animation:felt-ring .8s var(--out) .15s;pointer-events:none}
.shell.won.fcfs .prize::after{border-color:#e4f08e}
@keyframes felt-ring{0%{transform:scaleY(.32) scale(.2);opacity:1}100%{transform:scaleY(.32) scale(3.2);opacity:0}}
.table.punch{animation:table-punch .5s var(--pop)}
@keyframes table-punch{30%{transform:scale(1.035)}}
.shell.up.miss .dome{translate:0 -70%;rotate:-26deg}
.shell.flip .dome{animation:shell-flip .42s var(--pop)}
@keyframes shell-flip{0%{transform:scaleX(1)}40%{transform:scaleX(.82) scaleY(1.06)}100%{transform:none}}
.host.laugh .host-face{animation:host-laugh .5s ease-in-out 2}
@keyframes host-laugh{25%{transform:rotate(-8deg) translateY(-4px)}75%{transform:rotate(8deg) translateY(-4px)}}
.host.gasp .host-face{animation:host-gasp .6s var(--pop)}
@keyframes host-gasp{30%{transform:scale(1.14) rotate(-4deg)}}
.egg-stage.lost .dome{filter:saturate(.4) brightness(.85)}

.shell-bit.gold{background:var(--gold)}
.shell-bit.lime{background:var(--lime)}

/* ---------- Win celebration ----------
   The one big moment of the page: rays, the gem, the stamped spot title, the monster, confetti.
   It tells the player exactly what they won, then hands them to the wallet step. */
.win-dlg{width:min(520px,94vw);max-height:none;padding:0;border:0;background:none;overflow:visible;color:var(--cream)}
.win-dlg::backdrop{background:radial-gradient(circle at 50% 42%,rgb(var(--scrim)/.72),rgb(var(--scrim)/.96));backdrop-filter:blur(3px)}
.win-dlg[open]{animation:fade-in .3s ease-out}
@keyframes fade-in{from{opacity:0}}
.win{position:relative;display:grid;justify-items:center;text-align:center;padding:30px 24px 26px;border:5px solid var(--ink);border-radius:30px 24px 32px 22px/24px 32px 22px 30px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tier) 30%,var(--plum)),var(--night) 75%);box-shadow:0 0 0 5px var(--tier),0 0 0 10px var(--ink),0 18px 0 6px var(--ink),0 40px 80px rgba(0,0,0,.55);isolation:isolate}
.win.gtd{--tier:var(--gold);--tier-hi:var(--gold-hi);--tier-lo:var(--gold-lo)}
.win.fcfs{--tier:var(--lime);--tier-hi:var(--lime-hi);--tier-lo:var(--lime-lo)}
.win-rays{position:absolute;left:50%;top:34%;width:780px;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;border-radius:50%;
 background:repeating-conic-gradient(color-mix(in srgb,var(--tier) 34%,transparent) 0 9deg,transparent 9deg 20deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 58%);mask:radial-gradient(circle,#000 6%,transparent 58%);animation:swirl 26s linear infinite,rays-in .7s var(--out) both}
@keyframes rays-in{from{scale:.2;opacity:0}}
.win-face{position:relative;width:200px;aspect-ratio:1;margin-top:-92px;border:6px solid var(--ink);border-radius:50%;overflow:hidden;background:var(--el,var(--plum));box-shadow:0 0 0 7px var(--tier),0 0 0 12px var(--ink),0 14px 0 8px var(--ink),0 0 70px 10px color-mix(in srgb,var(--tier) 60%,transparent);animation:face-pop .7s var(--pop) .55s both}
.win-face img{display:block;width:100%;height:100%;object-fit:cover}
.win.gtd .win-face::after{content:"";position:absolute;inset:0;mix-blend-mode:color-dodge;background:linear-gradient(115deg,transparent 30%,rgba(255,240,150,.75) 45%,rgba(255,200,120,.5) 55%,transparent 70%);background-size:300% 100%;background-repeat:no-repeat;animation:btn-shine 2.6s ease-in-out 1.2s infinite}
@keyframes face-pop{from{transform:scale(.2) rotate(-25deg);opacity:0}}
.win-gem{position:absolute;top:-34px;right:calc(50% - 128px);width:64px;animation:gem-drop-in .6s var(--pop) .9s both}
@keyframes gem-drop-in{from{transform:translateY(-60px) scale(.3) rotate(-40deg);opacity:0}}
.win-name{margin-top:-18px;font-size:1.25rem;z-index:1;animation:face-pop .5s var(--pop) .85s both}
.win-kicker{margin:18px 0 0;font:1.1rem var(--display);letter-spacing:.06em;color:var(--muted);animation:rise .5s var(--out) .4s both}
.win-title{margin:2px 0 0;font-size:clamp(3rem,10vw,4.4rem);line-height:1;color:var(--tier);animation:stamp .55s var(--pop) .25s both}
@keyframes stamp{from{transform:scale(2.4) rotate(-8deg);opacity:0}70%{transform:scale(.94) rotate(1deg);opacity:1}}
.win-sub{margin:10px 0 18px;max-width:34ch;font-size:1.05rem;line-height:1.5;color:var(--cream);animation:rise .5s var(--out) .9s both}
.win .btn-lg{width:100%;animation:rise .5s var(--out) 1.1s both}
.win-close{position:absolute;top:12px;right:12px;z-index:2}
/* Confetti: tier colours plus cream, thrown from the gem */
.confetti{position:absolute;left:50%;top:30%;width:12px;height:16px;z-index:3;border:2px solid var(--ink);border-radius:3px;background:var(--c);pointer-events:none;animation:confetti 1.6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes confetti{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}

/* The won monster on the stage keeps a tier-coloured sunburst behind it */
.egg-stage.hatched .egg-rays{opacity:1;background:repeating-conic-gradient(color-mix(in srgb,var(--rays,var(--gold)) 30%,transparent) 0 9deg,transparent 9deg 20deg)}
.egg-stage.hatched.won-fcfs{--rays:var(--lime)}
.pass-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Share the win: the card preview plus share / download */
.share-win{margin-top:16px;padding:12px;border:3px solid var(--ink);border-radius:18px;background:rgba(26,24,16,.55)}
.share-preview{display:block;width:100%;height:auto;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:12px;background:var(--ink-2);box-shadow:0 4px 0 var(--ink)}
.share-preview:not([src]){animation:skel 1.4s linear infinite;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06)) 0 0/200% 100%}
.share-win.no-card .share-preview,.share-win.no-card [data-do="download-card"]{display:none}
.share-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share-btns .btn{flex:1}
.share-win .q-note{margin-top:10px}

/* Egg stage */
.egg-stage{position:relative;display:grid;place-items:center;min-height:540px}
.egg-rays{position:absolute;left:50%;top:46%;width:620px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(rgba(255,194,58,.16) 0 9deg,transparent 9deg 20deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:swirl 30s linear infinite;opacity:.6;transition:opacity .6s}
.egg-glow{position:absolute;left:50%;top:46%;width:360px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,194,58,var(--heat,.25)),transparent 65%);transition:background .6s}
.egg{position:relative;width:240px;height:310px;border:5px solid var(--ink);border-radius:50% 50% 46% 46%/58% 58% 42% 42%;overflow:hidden;box-shadow:0 12px 0 var(--ink),0 30px 50px rgba(0,0,0,.5);animation:egg-idle 3.6s ease-in-out infinite;transform-origin:50% 90%;transition:opacity .4s,transform .4s}
.egg-shell{position:absolute;inset:0;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.75) 0 7%,transparent 18%),radial-gradient(circle at 62% 40%,var(--lime) 0 5%,transparent 5.5%),radial-gradient(circle at 30% 58%,var(--gold) 0 6%,transparent 6.5%),radial-gradient(circle at 70% 70%,var(--teal) 0 4.5%,transparent 5%),radial-gradient(circle at 45% 82%,var(--coral) 0 4%,transparent 4.5%),radial-gradient(circle at 78% 28%,var(--gold) 0 3%,transparent 3.5%),radial-gradient(circle at 22% 80%,var(--lime) 0 3%,transparent 3.5%),linear-gradient(170deg,#c9bcb6 0%,#8d7d80 45%,#56494d 100%)}
.egg-shell::after{content:"";position:absolute;inset:0;box-shadow:inset -18px -22px 0 rgba(26,24,16,.28),inset 10px 10px 0 rgba(255,255,255,.12)}
.egg-cracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.egg-cracks polyline{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .8s var(--out)}
.warm-1 .c1,.warm-2 .c1,.warm-2 .c2,.warm-3 .c1,.warm-3 .c2,.warm-3 .c3{stroke-dashoffset:0}
.egg-no{position:absolute;left:50%;bottom:16%;translate:-50% 0;padding:2px 12px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--ink);font:.9rem var(--display);white-space:nowrap}
.egg-no:empty{display:none}
.egg-no:empty{display:none}
.egg-shadow{position:absolute;left:50%;bottom:9%;width:200px;height:28px;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(17,15,10,.6),transparent 70%)}
.egg-stage.warm-1{--heat:.4}.egg-stage.warm-2{--heat:.55}.egg-stage.warm-3{--heat:.75}
.warm-2 .egg{animation:egg-idle 3.6s ease-in-out infinite,egg-jitter 2.4s ease-in-out infinite}
.warm-3 .egg{animation:egg-jitter 1.1s ease-in-out infinite}
.warm-3 .egg-rays{opacity:1}
.egg-stage.no-egg .egg{filter:grayscale(.6) brightness(.6)}
.egg-stage.dropping .egg{animation:egg-drop .8s var(--pop)}
.egg-stage.hatching .egg{animation:egg-rattle .9s ease-in-out}
.egg-stage.hatched .egg,.egg-stage.hatched .egg-shadow{opacity:0;transform:scale(1.25);pointer-events:none}
.shell-bit{position:absolute;left:50%;top:46%;width:34px;height:28px;clip-path:polygon(0 30%,40% 0,100% 20%,80% 100%,20% 85%);background:#9c8c90;border:0;filter:drop-shadow(0 0 0 var(--ink));animation:bit 1s var(--out) forwards}
@keyframes bit{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes egg-idle{0%,100%{rotate:-2deg}50%{rotate:2deg;translate:0 -6px}}
@keyframes egg-jitter{0%,82%,100%{transform:none}86%{transform:rotate(-5deg)}90%{transform:rotate(5deg)}94%{transform:rotate(-3deg)}}
@keyframes egg-drop{0%{transform:translateY(-120vh) rotate(-30deg)}70%{transform:translateY(0) scale(1.08,.9)}100%{transform:none}}
@keyframes egg-rattle{0%,100%{transform:none}10%{transform:rotate(-8deg) scale(1.03)}25%{transform:rotate(8deg)}40%{transform:rotate(-10deg) scale(1.06)}55%{transform:rotate(10deg)}70%{transform:rotate(-12deg) scale(1.1)}85%{transform:rotate(12deg) scale(1.14)}}

/* Hatchling reveal */
.hatchling{position:absolute;left:50%;top:46%;translate:-50% -50%;display:none;justify-items:center;gap:12px}
.egg-stage.hatched .hatchling{display:grid;animation:pop-in .7s var(--pop)}
.hatch-face{position:relative;width:240px;aspect-ratio:1;border:6px solid var(--ink);border-radius:50%;overflow:hidden;background:var(--el);box-shadow:0 10px 0 var(--ink),0 0 0 6px var(--el)}
.hatch-face img{width:100%;height:100%;object-fit:cover}
.hatchling .ribbon{font-size:1.3rem}
.hatchling.tier-gtd .hatch-face{box-shadow:0 10px 0 var(--ink),0 0 0 6px var(--gold),0 0 50px rgba(255,180,60,.8)}
.hatchling.tier-gtd .hatch-face::after{content:"";position:absolute;inset:0;mix-blend-mode:color-dodge;background:linear-gradient(115deg,transparent 30%,rgba(255,240,150,.8) 45%,rgba(255,160,230,.6) 55%,transparent 70%);background-size:300% 100%;animation:btn-shine 2.4s ease-in-out infinite;background-repeat:no-repeat}
.tier-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border:3px solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);font:.95rem var(--display);box-shadow:0 3px 0 var(--ink)}
.tier-gtd .tier-tag{background:var(--gold)}
@keyframes pop-in{from{opacity:0;transform:scale(.3) rotate(-12deg)}}

/* Gate log */
.gate-strip{display:flex;gap:12px;overflow-x:auto;padding:18px 4px 10px;scroll-snap-type:x mandatory}
.gate-chip{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:3px solid var(--ink);border-radius:999px;background:var(--plum);box-shadow:0 4px 0 var(--ink);scroll-snap-align:start}
.gate-chip.tier-gtd{background:linear-gradient(90deg,#8a5a12,var(--plum));box-shadow:0 4px 0 var(--ink),0 0 0 2px var(--gold)}
.gate-chip.tier-none{opacity:.7}
.gate-chip small em{font-style:normal;font-family:var(--display);color:var(--lime)}
.gate-chip.tier-gtd small em{color:var(--gold)}
.gate-chip.tier-none small em{color:var(--muted)}
.gate-chip img{width:40px;height:40px;border:3px solid var(--ink);border-radius:50%;object-fit:cover;background:var(--cream)}
.gate-chip img+img{margin-left:-20px;background:var(--el)}
.gate-chip b{font-family:var(--display);font-weight:400}
.gate-chip small{display:block;color:var(--muted);font-size:.78rem}
.gate-empty{display:flex;align-items:center;gap:12px;padding:16px;border:3px dashed rgba(255,243,214,.25);border-radius:18px;color:var(--muted)}
.gate-empty img{width:52px;height:52px;border-radius:50%;border:3px solid var(--ink)}

/* FAQ */
.faq-list{display:grid;gap:10px;margin-top:24px;max-width:760px}
.faq details{border:4px solid var(--ink);border-radius:18px;background:var(--plum);box-shadow:0 5px 0 var(--ink)}
.faq summary{padding:14px 18px;cursor:pointer;font:1.15rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--gold);transition:rotate .25s var(--pop)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0;padding:0 18px 16px;color:var(--muted);line-height:1.55}

@media (max-width:900px){
 .wl-hero{grid-template-columns:1fr;min-height:0}
 .win-face{width:150px;margin-top:-74px}
 .win-gem{width:52px;right:calc(50% - 100px);top:-30px}
 .win{padding:24px 18px 20px}
 .egg-stage{order:-1;min-height:400px}
 .egg{width:190px;height:245px}
 .hatch-face{width:190px}
 .host-face{width:84px}
 .host-say{font-size:1rem}
 .quest{max-width:none}
}
@media (max-width:520px){
 .pass{grid-template-columns:1fr;justify-items:center;text-align:center}
 .pass dl{text-align:left}
 .ref-box{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
 .egg,.egg-rays,.skel,.host-face,.dome,.gem,.shell-game,.host-say,.prize::before,.dust{animation:none!important}
 .hiding .gem-drop{animation:none;opacity:0}
 .table.dropping .gem-drop{display:none}
 .table.thud,.table.punch,.table.thud .dome,.table.thud .shell::before,.shell.won .prize::after,.shell.flip .dome,.host .host-face{animation:none!important}
 .dome::after{animation:none!important;opacity:0!important}
 .dome,.shell::before{transition:none}
 /* The win scene keeps a plain fade so the result still reads; rays stop, nothing flies */
 .win-rays{animation:none}
 .win-face,.win-gem,.win-name,.win-kicker,.win-title,.win-sub,.win .btn-lg{animation:fade-in .2s ease-out both}
}