/* Welcome / title screen over the live autopilot demo. Owned by js/welcome.js.
   Phones: the title card becomes a bottom sheet. Wide screens: a floating panel bottom-left. The town plays behind both. */
body.welcome-open #title{background:none;padding:0;display:block;overflow:hidden;animation:none;pointer-events:none}
body.welcome-open #title>*{pointer-events:auto}
/* soft vignettes so white type reads over any part of town */
body.welcome-open #title::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(43,14,30,.55) 0,rgba(43,14,30,0) 150px),linear-gradient(0deg,rgba(43,14,30,.42) 0,rgba(43,14,30,0) 46%)}

/* ---------- brand header ---------- */
#wTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 14px) 0 calc(var(--sal) + 14px);pointer-events:none}
.w-brand{display:flex;flex-direction:column;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(124,23,62,.9),0 3px 10px rgba(43,14,30,.5);animation:wDrop .7s cubic-bezier(.2,1.3,.4,1) both}
.w-pre{font:600 12px/1 'Fredoka',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.92;margin:0 0 4px 2px}
.w-name{font:700 clamp(24px,6.4vw,38px)/1 'Fredoka',sans-serif}
.w-name em{display:block;font:400 1.08em/1.05 'Pacifico',cursive;color:#ff9cc7;margin-top:-2px;-webkit-text-stroke:1px #7c173e;paint-order:stroke fill}
.w-install{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px 6px 8px;border-radius:99px;border:2px solid #fff3df;
  background:rgba(124,23,62,.78);color:#fff3df;font:600 13px/1 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(43,14,30,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:wDrop .7s .25s cubic-bezier(.2,1.3,.4,1) both;touch-action:manipulation}
.w-install svg{width:20px;height:20px;flex:none}
.w-install[hidden]{display:none}
.w-install:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
@keyframes wDrop{from{transform:translateY(-16px);opacity:0}}

/* ---------- live caption: names what Gizmo is doing behind the card ---------- */
#wCap{position:absolute;left:50%;bottom:calc(var(--w-sheet,0px) + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  padding:7px 14px 7px 9px;border-radius:99px;background:#fff3df;color:#7c173e;border:3px solid #7c173e;box-shadow:0 4px 0 #ff5fa2,0 8px 16px rgba(43,14,30,.3);
  font:700 15px/1 'Fredoka',sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s}
#wCap.on{opacity:1}
#wCap i{font-style:normal;font-size:18px;line-height:1}
#wCap.pop{animation:wCapPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes wCapPop{0%{transform:translateX(-50%) scale(.6) rotate(-6deg)}60%{transform:translateX(-50%) scale(1.08) rotate(2deg)}100%{transform:translateX(-50%) scale(1)}}

/* ---------- the sheet (phones) ---------- */
body.welcome-open #title .card{position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none;width:100%;max-height:min(62dvh,560px);
  border:0;border-top:4px solid #7c173e;border-radius:26px 26px 0 0;box-shadow:0 -4px 0 #ff5fa2,0 -14px 30px rgba(43,14,30,.35);
  padding:16px calc(var(--sar) + 18px) calc(var(--sab) + 10px) calc(var(--sal) + 18px);text-align:center;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(ellipse at 15% 0,rgba(255,255,255,.75),transparent 55%),#fff5e4;animation:wSheet .55s cubic-bezier(.2,1.1,.3,1) both}
body.welcome-open #title .card::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:rgba(124,23,62,.22);margin:-6px auto 10px}
@keyframes wSheet{from{transform:translateY(105%)}}
body.welcome-open #title .card>#titleGizmo,body.welcome-open #title .card>.how{display:none}
body.welcome-open #title .card>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.welcome-open #title .card .btn{width:100%;max-width:380px}
body.welcome-open #title .card #btnStart{margin-top:4px}
body.welcome-open #title .card .best{margin:8px 0 2px;font-size:14px}

/* ---------- wide screens: floating panel bottom-left ---------- */
@media (min-width:760px) and (min-height:520px){
  body.welcome-open #title .card{left:calc(var(--sal) + 28px);right:auto;bottom:28px;width:410px;max-height:calc(100dvh - 150px);
    border:4px solid #7c173e;border-radius:24px;box-shadow:0 0 0 4px #ff5fa2,0 18px 40px rgba(43,14,30,.45);padding:18px 22px 12px;animation-name:wPanel}
  body.welcome-open #title .card::before{display:none}
  #wCap{left:calc(50% + 220px);top:auto;bottom:40px}
  body.welcome-open #title::before{background:linear-gradient(180deg,rgba(43,14,30,.5) 0,rgba(43,14,30,0) 160px),linear-gradient(90deg,rgba(43,14,30,.35) 0,rgba(43,14,30,0) 520px)}
}
@keyframes wPanel{from{transform:translateY(30px) scale(.94);opacity:0}}
/* phone landscape: compact panel on the left, full height */
@media (max-height:519px) and (orientation:landscape){
  body.welcome-open #title .card{left:calc(var(--sal) + 10px);right:auto;bottom:8px;top:8px;width:min(360px,48vw);max-height:none;border:3px solid #7c173e;border-radius:18px;padding:10px 14px 8px;animation-name:wPanel}
  body.welcome-open #title .card::before{display:none}
  #wTop{left:auto;width:calc(52vw - 20px);right:0}
  #wCap{left:calc(50% + 24vw);top:auto;bottom:16px;font-size:13px}
  .w-name{font-size:24px}
}

/* ---------- first-visit intro (swipeable cards) ---------- */
#title .card.w-intro-on>:not(.w-intro):not(.w-foot){display:none!important}
.w-intro{display:flex;flex-direction:column;align-items:center}
.w-viewport{width:100%;overflow:hidden;touch-action:pan-y}
.w-track{display:flex;transition:transform .42s cubic-bezier(.2,.9,.25,1)}
.w-track.drag{transition:none}
.w-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;padding:0 2px}
.w-vis{position:relative;width:100%;height:clamp(118px,19dvh,168px);display:flex;align-items:center;justify-content:center;margin:2px 0 6px}
.w-slide h2{margin:0;font:700 clamp(22px,6vw,27px)/1.08 'Fredoka',sans-serif;color:#ff5fa2;text-shadow:0 1px 0 #fff;-webkit-text-stroke:.5px #7c173e;text-wrap:balance}
.w-slide p{margin:5px 0 0;font:500 16px/1.32 'Fredoka',sans-serif;color:#7c173e;max-width:330px;text-wrap:balance}
.w-slide p a{color:#7c173e;font-weight:600}
.w-dots{display:flex;gap:8px;margin:10px 0 2px}
.w-dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.w-dots button::after{content:"";width:9px;height:9px;border-radius:50%;background:rgba(124,23,62,.22);transition:transform .25s,background .25s}
.w-dots button[aria-current="true"]::after{background:#ff5fa2;transform:scale(1.35)}
.w-go{margin-top:6px!important;width:100%;max-width:380px;font-size:clamp(22px,6vw,28px)!important}
.w-more{display:block;margin:6px auto 0;min-height:40px;padding:6px 14px;background:none;border:0;font:600 15px/1 'Fredoka',sans-serif;color:#7c173e;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.w-more:focus-visible,.w-dots button:focus-visible,.w-foot a:focus-visible{outline:3px solid #ffd23f;outline-offset:2px;border-radius:6px}

/* slide visuals */
.w-giz{position:absolute;bottom:2px;width:auto;height:88%;filter:drop-shadow(0 6px 6px rgba(43,14,30,.25));animation:wBob 1.6s ease-in-out infinite alternate}
@keyframes wBob{to{transform:translateY(-6px) rotate(-2deg)}}
.w-pol{position:absolute;width:clamp(74px,22vw,96px);aspect-ratio:.86;background:#fff;padding:5px 5px 16px;border-radius:4px;box-shadow:0 6px 14px rgba(43,14,30,.28);transform-origin:50% 100%}
.w-pol img,.w-pol .w-ph{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;background:#ffd9e8}
.w-pol b{position:absolute;left:0;right:0;bottom:2px;font:700 11px/1 'Fredoka',sans-serif;color:#7c173e}
.w-s1 .w-pol:nth-of-type(1){transform:translateX(-118%) rotate(-11deg);animation:wFanL .8s .1s cubic-bezier(.2,1.3,.4,1) both}
.w-s1 .w-pol:nth-of-type(2){transform:translateX(118%) rotate(10deg);animation:wFanR .8s .2s cubic-bezier(.2,1.3,.4,1) both}
.w-s1 .w-pol:nth-of-type(3){transform:translateY(-6%) rotate(-2deg) scale(.92);opacity:.0}
@keyframes wFanL{from{transform:translateX(0) rotate(0) scale(.6);opacity:0}}
@keyframes wFanR{from{transform:translateX(0) rotate(0) scale(.6);opacity:0}}
.w-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:min(100%,300px)}
.w-grid span{aspect-ratio:1;border-radius:50%;background:#f1d6df center/cover;border:2px solid #fff;box-shadow:0 2px 0 rgba(124,23,62,.25);filter:grayscale(1) opacity(.45);transition:filter .4s,transform .4s}
.w-grid span.met{filter:none;border-color:#ff5fa2}
.w-grid span.pop{animation:wMet .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes wMet{0%{filter:grayscale(1) opacity(.45);transform:scale(.8)}60%{transform:scale(1.18)}100%{filter:none;transform:none}}
.w-count{position:absolute;right:4px;bottom:0;background:#7c173e;color:#fff3df;font:700 13px/1 'Fredoka',sans-serif;padding:5px 9px;border-radius:99px}
.w-cup{height:92%;overflow:visible}
.w-steam path{animation:wSteam 2.4s ease-in-out infinite}
.w-steam path:nth-child(2){animation-delay:.8s}.w-steam path:nth-child(3){animation-delay:1.6s}
@keyframes wSteam{0%{opacity:0;transform:translateY(8px)}40%{opacity:.85}100%{opacity:0;transform:translateY(-14px)}}
.w-bar{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(70%,240px);height:12px;border-radius:99px;background:rgba(124,23,62,.14);overflow:hidden}
.w-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5fa2,#ffb36b);border-radius:inherit;transition:width 1s .3s cubic-bezier(.2,.9,.3,1)}
.w-share{position:relative;width:240px;height:100%}
.w-share .w-pol{left:12px;top:10px;transform:rotate(-6deg)}
.w-bub{position:absolute;right:6px;width:116px;padding:8px 10px;border-radius:16px 16px 4px 16px;background:#fff;box-shadow:0 4px 10px rgba(43,14,30,.2);font:600 12px/1.25 'Fredoka',sans-serif;color:#2a1b3d;text-align:left;opacity:0}
.w-bub:nth-of-type(2){top:8px;background:#dcf8c6}
.w-bub:nth-of-type(3){top:62px;border-radius:16px 16px 16px 4px;right:30px}
.w-slide.on .w-bub:nth-of-type(2){animation:wBub .5s .5s cubic-bezier(.2,1.4,.4,1) both}
.w-slide.on .w-bub:nth-of-type(3){animation:wBub .5s 1.3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes wBub{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
.w-fly{position:absolute;left:30px;top:30px;width:30px;height:30px;color:#ff5fa2}
.w-slide.on .w-fly{animation:wFly 2.6s .2s ease-in-out infinite}
@keyframes wFly{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}70%{transform:translate(130px,-6px) scale(1);opacity:1}100%{transform:translate(150px,-10px) scale(.4);opacity:0}}

/* ---------- home sheet extras ---------- */
.w-coffee{display:flex;align-items:center;gap:10px;width:100%;max-width:380px;margin:10px auto 0;padding:8px 12px;border-radius:14px;background:#fff;border:2px solid #ffc3dc;color:#7c173e;
  font:600 14px/1.2 'Fredoka',sans-serif;text-align:left;cursor:pointer;touch-action:manipulation}
.w-coffee .w-mini{flex:1;height:8px;border-radius:99px;background:rgba(124,23,62,.12);overflow:hidden;margin-top:5px}
.w-coffee .w-mini i{display:block;height:100%;background:linear-gradient(90deg,#ff5fa2,#ffb36b);border-radius:inherit}
.w-coffee svg{width:34px;height:34px;flex:none}
.w-coffee:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
.w-why{display:inline-block;margin:6px 6px 0;min-height:36px;padding:6px 10px;background:none;border:0;font:600 14px/1 'Fredoka',sans-serif;color:#7c173e;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- footer: legal + Good Thinking ---------- */
.w-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin:10px 0 0;padding-top:8px;border-top:1px dashed rgba(124,23,62,.2);
  font:500 12.5px/1 'Fredoka',sans-serif;color:rgba(124,23,62,.78)}
.w-foot a{color:inherit;text-decoration:none;padding:6px 2px;min-height:28px;display:inline-flex;align-items:center}
.w-foot a:hover{color:#ff5fa2}
.w-gt{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.w-bulb{display:inline-block;width:11px;height:19px;background:currentColor;-webkit-mask:url(assets/brand/good-thinking-bulb.png) center/contain no-repeat;mask:url(assets/brand/good-thinking-bulb.png) center/contain no-repeat;transform:translateY(-1px)}
.w-gt b{font-weight:700}

@media (prefers-reduced-motion:reduce){
  .w-brand,.w-install,#wCap.pop,.w-giz,.w-s1 .w-pol,.w-grid span.pop,.w-steam path,.w-slide.on .w-bub,.w-slide.on .w-fly,body.welcome-open #title .card{animation:none!important}
  .w-slide .w-bub{opacity:1}.w-track{transition:none}
}
@media (max-height:640px){.w-vis{height:clamp(96px,16dvh,130px)}.w-slide p{font-size:14.5px}}
/* phone landscape card contents (after the generic sizes so they win) */
@media (max-height:519px) and (orientation:landscape){
  .w-vis{height:92px;margin:0 0 4px}.w-pol{width:66px}.w-slide h2{font-size:21px}.w-slide p{font-size:13.5px;margin-top:3px}
  .w-dots{margin:4px 0 0}.w-go{min-height:40px}.w-more{min-height:32px;margin-top:2px}
}
/* Cloudflare quick check: only shown when Cloudflare asks for a tap (js/human-check.js) */
#humanCheck{position:fixed;left:50%;top:50%;z-index:9300;transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;width:min(340px,calc(100vw - 32px));
  padding:14px 14px 10px;border-radius:20px;background:#fff5e4;border:3px solid #7c173e;box-shadow:0 0 0 4px #ff5fa2,0 18px 40px rgba(43,14,30,.45);text-align:center;
  transition:opacity .25s,transform .35s cubic-bezier(.2,1.2,.4,1)}
#humanCheck.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#humanCheck:not(.show){left:-9999px}
#humanCheck p{margin:0 0 8px;font:700 17px/1.2 'Fredoka',sans-serif;color:#7c173e}
#humanCheck .hc-slot{min-height:65px;display:flex;justify-content:center}
/* email before the first game */
#title .card.w-email-on>:not(.w-email):not(.w-foot){display:none!important}
.w-email{display:flex;flex-direction:column;align-items:center;text-align:center}
.w-email-giz{height:clamp(76px,12dvh,110px);width:auto;filter:drop-shadow(0 6px 6px rgba(43,14,30,.25));animation:wBob 1.6s ease-in-out infinite alternate}
.w-email h2{margin:4px 0 0;font:700 clamp(22px,6vw,27px)/1.08 'Fredoka',sans-serif;color:#ff5fa2;-webkit-text-stroke:.5px #7c173e}
.w-email>p{margin:4px 0 8px;font:500 16px/1.3 'Fredoka',sans-serif;color:#7c173e}
.w-email .pd-form{width:100%;max-width:380px;text-align:left}
.w-email .pd-send{font-size:18px}
.w-email-terms{font-size:13px!important;margin:8px 0 0!important;opacity:.85}
.w-email-terms a{color:#7c173e;font-weight:600}
@media (prefers-reduced-motion:reduce){.w-email-giz{animation:none}}
/* iOS: the page background shows below the fixed sheet when the toolbar collapses, so match it to the sheet */
html:has(body.welcome-open),body.welcome-open{background:#fff5e4}
/* loading state for the email step: Gizmo loops the loop on his board */
#wBusy{position:fixed;inset:0;z-index:9250;display:grid;place-content:center;justify-items:center;background:rgba(255,245,228,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .2s}
#wBusy.on{opacity:1;pointer-events:auto}
#wBusy p{margin:2px 0 0;font:700 18px/1.2 'Fredoka',sans-serif;color:#7c173e}
.wb-scene{position:relative;width:200px;height:170px;overflow:hidden}
.wb-track{position:absolute;left:calc(50% - 44px);top:14px;width:88px;height:88px;border:2px dashed rgba(124,23,62,.22);border-radius:50%}
.wb-mascot{position:absolute;left:calc(50% - 32px);top:86px;width:64px;transform-origin:50% 75%;animation:wbLoop 2.2s linear infinite}
.wb-mascot img{display:block;width:100%;height:auto}
@keyframes wbLoop{
  0%{transform:translate(-120px,26px) rotate(-5deg);opacity:0}12%{transform:translate(-66px,24px) rotate(-5deg);opacity:1}
  26%{transform:translate(-22px,22px) rotate(-15deg)}37%{transform:translate(25px,-5px) rotate(-75deg)}46%{transform:translate(37px,-45px) rotate(-155deg)}
  55%{transform:translate(4px,-67px) rotate(-245deg)}64%{transform:translate(-28px,-36px) rotate(-325deg)}74%{transform:translate(8px,22px) rotate(-365deg)}
  88%{transform:translate(70px,24px) rotate(-355deg);opacity:1}100%{transform:translate(120px,26px) rotate(-360deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.wb-mascot{animation:none;transform:translateY(14px)}.wb-track{display:none}}
.w-more[hidden]{display:none!important}