/* Login + onboarding tour (reels/onboarding/onboarding.js). Paper mockups: "Onboarding flow" page of Mates-Core. */

/* Login: the brand night, the kit's dithered blue mark and the Baloo 2 wordmark, two fields and one blue button, over the
   dithered brand field rising from the bottom (social-feed.js paints --pv-rise once). The page has no splash (2026-10-29):
   it is the first screen a logged-out open shows. Brand pass, Param P10, direction A. */
.login{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;padding:calc(var(--sa-safe-top) + 14vh) var(--sa-safe-right) var(--sa-safe-bottom) var(--sa-safe-left);background:var(--hb-night);color:var(--sa-text);overflow:auto;transition:opacity .28s var(--sa-ease)}
.login.out{opacity:0;pointer-events:none}
.login:before{content:"";position:absolute;left:50%;top:calc(var(--sa-safe-top) + 14vh - 110px);width:320px;height:320px;margin-left:-160px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hb-accent-shade) 55%,transparent) 0%,transparent 65%);pointer-events:none}
.login:after{content:"";position:fixed;inset:0;z-index:-1;background:var(--pv-rise,linear-gradient(0deg,color-mix(in srgb,var(--hb-accent-shade) 50%,transparent),transparent 40%)) center bottom/100% 70% no-repeat;image-rendering:pixelated;opacity:.6;pointer-events:none}
.login{isolation:isolate}
.login-mark{width:96px;height:96px}
.login-word{font-size:56px;color:var(--hb-accent);margin-top:-2px}
.login-brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.login-brand img{display:block}
.login-brand p{margin:0;font-size:15px;line-height:20px;color:var(--hb-text-2)}
.login-form{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px;padding-top:56px}
.login-field{position:relative;display:flex;align-items:center;height:56px;border-radius:var(--hb-radius-m);background:var(--hb-surface-1);border:1px solid var(--hb-line);transition:border-color var(--sa-fast) var(--sa-ease)}
.login-field:focus-within{border-color:var(--hb-accent)}
.login-field.invalid{border-color:var(--hb-red);background:color-mix(in srgb,var(--hb-red) 8%,var(--hb-surface-1))}
.login-field input{flex:1;min-width:0;height:100%;padding:0 18px;border:0;outline:0;background:none;color:var(--sa-text);font:inherit;font-size:16px}
.login-field input::placeholder{color:var(--hb-text-3)}
.login-reveal{display:grid;place-items:center;width:52px;height:100%;padding:0;border:0;background:none}
.login-reveal svg{width:20px;height:20px;fill:none;stroke:var(--hb-text-3);stroke-width:1.8}
.login-reveal[aria-pressed="true"] svg{stroke:var(--sa-text)}
.login-error{display:flex;align-items:center;gap:6px;margin:-4px 0 0 4px;font-size:13px;line-height:18px;font-weight:500;color:var(--hb-red)}
.login-error svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--hb-red);stroke-width:2.2;stroke-linecap:round}
.login-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;margin-top:8px;border:0;border-radius:var(--hb-radius-m);background:var(--hb-accent);color:var(--hb-on-accent);font:800 19px/1 var(--hb-font-display);letter-spacing:-.01em;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-fast) var(--sa-spring)}
.login-submit:active{transform:scale(.98)}
.login-submit:disabled{opacity:.4}
.login-spin,.login-busy{display:none}
.login.busy .login-submit{opacity:1}
.login.busy .login-label{display:none}
.login.busy .login-busy{display:inline}
.login.busy .login-spin{display:block;width:18px;height:18px;border-radius:50%;border:3px solid color-mix(in srgb,var(--hb-night) 25%,transparent);border-top-color:var(--hb-on-accent);animation:sa-spin .8s linear infinite}
.login.busy .login-field{opacity:.55}
/* Create account: the secondary (ghost) action under Log in, as in the iPhone app's login screen. While one of the two
   buttons works, only that one shows its spinner. */
.login-signup{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border:1px solid var(--hb-line-strong,rgba(255,255,255,.18));border-radius:99px;background:none;color:var(--sa-text);font:700 17px/1 var(--hb-font-display);transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-fast) var(--sa-spring)}
.login-signup:active{transform:scale(.98)}
.login-signup:disabled{opacity:.45}
.login.busy.signup .login-submit .login-label{display:inline}
.login.busy.signup .login-submit .login-busy,.login.busy.signup .login-submit .login-spin,.login.busy:not(.signup) .login-signup .login-busy,.login.busy:not(.signup) .login-signup .login-spin{display:none}
.login.busy:not(.signup) .login-signup .login-label{display:inline}
.login.busy.signup .login-signup{opacity:1}
.login.busy.signup .login-signup .login-label{display:none}
.login.busy.signup .login-signup .login-busy{display:inline}
.login.busy.signup .login-signup .login-spin{display:block;width:16px;height:16px;border-radius:50%;border:3px solid color-mix(in srgb,var(--sa-text) 25%,transparent);border-top-color:var(--sa-text);animation:sa-spin .8s linear infinite}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tour: one layer over the feed and the sheets it opens. A spotlight (a hole whose shadow dims everything else)
   keeps the real control bright with a faint blue glow; one brand coach card narrates (a flat brand surface with the
   dither along its foot, not glass: Param P7). */
.tour{position:fixed;inset:0;z-index:45;opacity:0;transition:opacity .3s var(--sa-ease);--tour-dim:.5}
.tour.on{opacity:1}
/* Area tours (and any tour fading out) let taps through; only the card takes them (coach.js). */
.tour.pass{pointer-events:none}.tour.pass .tour-card{pointer-events:auto}
.tour-scrim{position:absolute;inset:0;background:rgba(0,0,0,var(--tour-dim));transition:background .3s var(--sa-ease)}
.tour.spot .tour-scrim{background:transparent}
.tour-hole{position:absolute;left:0;top:0;pointer-events:none;box-shadow:0 0 22px color-mix(in srgb,var(--hb-accent) 22%,transparent),0 0 0 200vmax rgba(0,0,0,var(--tour-dim));transition:transform .36s var(--sa-ease-out),width .36s var(--sa-ease-out),height .36s var(--sa-ease-out),border-radius .36s var(--sa-ease-out)}

.tour-card{position:absolute;left:12px;right:12px;bottom:calc(var(--sa-safe-bottom) + 4px);max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:18px 20px 22px;border-radius:var(--hb-radius-l);border:1px solid var(--hb-line-strong);background:var(--hb-surface-1);box-shadow:0 20px 50px rgba(0,0,0,.5);color:var(--hb-text);overflow:hidden;isolation:isolate}
/* The brand texture along the card's foot: accent dither fading up (a static mask). */
.tour-card:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:56px;background:var(--hb-accent);opacity:.4;pointer-events:none;-webkit-mask:var(--hb-bayer-4) 0 0/8px 8px,linear-gradient(0deg,#000,transparent);-webkit-mask-composite:source-in;mask:var(--hb-bayer-4) 0 0/8px 8px,linear-gradient(0deg,#000,transparent);mask-composite:intersect}
.tour.top .tour-card{top:calc(var(--sa-safe-top) + 2px);bottom:auto}
.tour-card.enter{animation:tour-card-in .38s var(--sa-ease-out) both}
.tour.done .tour-card{display:none}
.tour-top{display:flex;align-items:center;justify-content:space-between}
.tour-progress{display:flex;align-items:center;gap:10px}
#tourCount{min-width:42px;font:500 11px/14px var(--hb-font-mono);letter-spacing:var(--hb-tracking-label);color:var(--hb-accent);font-variant-numeric:tabular-nums}
.tour-track{display:block;width:88px;height:4px;border-radius:999px;background:var(--hb-surface-3);overflow:hidden}
#tourBar{display:block;height:100%;border-radius:999px;background:var(--hb-accent);transition:width .36s var(--sa-ease-out)}
.tour-actions{display:flex;align-items:center;gap:6px}
.tour-mute{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--hb-surface-3)}
.tour-mute svg{width:16px;height:16px;fill:none;stroke:var(--sa-text);stroke-width:1.8;stroke-linecap:round}
.tour-mute .body{fill:var(--sa-text);stroke:none}
.tour-mute .off,.tour-mute.muted .on{display:none}
.tour-mute.muted .off{display:inline}
.tour-skip{height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--hb-text-2);font-size:14px;font-weight:600}
.tour-card h2{margin:0 0 -8px;font-family:var(--hb-font-display);font-size:26px;line-height:30px;font-weight:800;letter-spacing:var(--hb-tracking-display);color:#fff}
.tour-card p{margin:0}
#tourText{font-size:15px;line-height:22px;color:var(--hb-text-2)}
.tour-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px}
.tour-hint{display:flex;align-items:center;gap:8px;margin-right:auto!important;font-size:13px;line-height:18px;font-weight:500;color:var(--hb-text-3)}
.tour-hint i{width:8px;height:8px;border-radius:50%;background:var(--hb-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hb-accent) 20%,transparent);animation:tour-pulse 1.4s var(--sa-ease) infinite}
.tour-next{position:relative;display:flex;align-items:center;gap:6px;height:44px;padding:0 20px;border:1px solid var(--hb-line);border-radius:var(--hb-radius-m);background:var(--hb-surface-3);color:var(--hb-text);font:800 16px/1 var(--hb-font-display);transition:transform var(--sa-fast) var(--sa-spring)}
.tour-next:active{transform:scale(.96)}
/* Step back / forward: a small glass pair, visually 28 px, each with a 44 px hit area (::before). ‹ is hidden on step 1. */
.tour-steps{display:flex;align-items:center;gap:10px;margin-right:auto}
.tour-steps+.tour-hint{margin-right:auto!important}
.tour-step{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--hb-line);border-radius:50%;background:var(--hb-surface-3);color:var(--hb-text-2)}
.tour-step:before{content:"";position:absolute;inset:-8px}
.tour-step[hidden]{display:grid;visibility:hidden}
.tour-step:active{transform:scale(.92)}
.tour-step svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tour-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tour-next.primary{padding:0 24px;border:0;background:var(--hb-accent);box-shadow:0 8px 24px color-mix(in srgb,var(--hb-accent) 25%,transparent);color:var(--hb-on-accent)}

/* Welcome: the star over the dimmed feed. Done: the full lockup, then "Swipe up to explore". */
.tour-mark,.tour-done{position:absolute;left:0;right:0;display:none;flex-direction:column;align-items:center;pointer-events:none}
.tour-mark{top:30%}
.tour.mark .tour-mark{display:flex}
.tour-mark:before,.tour-done:before{content:"";position:absolute;top:-54px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hb-accent-shade) 60%,transparent) 0%,transparent 65%)}
.tour-word{position:relative;font-size:60px;color:var(--hb-accent)}
.tour-mark .hb-mark,.tour-done .hb-mark{position:relative;display:block}
.tour-done{top:30%;gap:20px}
.tour.done .tour-done{display:flex;animation:sa-fade .4s var(--sa-ease) both}
.tour-done strong{margin-top:28px;font-family:var(--hb-font-display);font-size:28px;line-height:30px;font-weight:800;letter-spacing:-.02em;color:#fff}
.tour-done>strong+span{margin-top:-14px;font-size:16px;line-height:22px;color:var(--hb-text-2)}

/* The swipe hint: one glowing streak that sweeps the way the finger should go, with a small chevron at its head. */
.tour-streak{position:absolute;left:50%;top:28%;width:8px;height:220px;margin-left:-4px;pointer-events:none}
.tour-streak span{position:absolute;inset:0;border-radius:999px;background:linear-gradient(0deg,color-mix(in srgb,var(--hb-accent) 0%,transparent) 0%,color-mix(in srgb,var(--hb-accent) 45%,transparent) 55%,var(--hb-accent-gloss) 100%);box-shadow:0 0 18px color-mix(in srgb,var(--hb-accent) 45%,transparent);transform-origin:50% 100%;animation:tour-sweep 1.6s var(--sa-ease) infinite}
.tour-chev{position:absolute;left:50%;top:-38px;width:32px;height:32px;margin-left:-16px;fill:none;stroke:var(--hb-accent-gloss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:tour-chev 1.6s var(--sa-ease) infinite}
.tour-streak[data-dir="down"]{transform:rotate(180deg)}
.tour-streak[data-dir="side"]{top:40%;transform:rotate(-90deg)}
.tour.done .tour-streak{top:auto;bottom:calc(var(--sa-safe-bottom) + 40px);height:140px}
@keyframes tour-sweep{0%{transform:translateY(30%) scaleY(.15);opacity:0}20%{opacity:1}70%{transform:translateY(0) scaleY(1);opacity:1}100%{transform:translateY(-12%) scaleY(1);opacity:0}}
@keyframes tour-chev{0%,15%{transform:translateY(10px);opacity:0}60%{transform:none;opacity:1}100%{transform:translateY(-6px);opacity:0}}
@keyframes tour-card-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tour-pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--hb-accent) 0%,transparent)}}
/* The Game builder demo: the recording fills the screen over the tour, with a glass × to go back to the menu. */
.tour-video{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;transition:opacity .25s var(--sa-ease)}
.tour-video.on{opacity:1}
.tour.demo .tour-card{z-index:3}
/* The feed's action rail never shows through the tour card. */
body:has(#tour.on) #socialRail{opacity:0;visibility:hidden;pointer-events:none}
.tour-video video{width:100%;height:100%;object-fit:contain;background:#000}
.tour-video-close{position:absolute;top:calc(var(--sa-safe-top) + 12px);right:calc(var(--sa-safe-right) + 12px);display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--hb-line-strong);border-radius:50%;background:var(--hb-surface-3);color:#fff;font-size:24px;line-height:1}
@media(prefers-reduced-motion:reduce){.tour-streak span,.tour-chev,.tour-hint i{animation:none}.tour-card.enter,.tour.done .tour-done{animation:none}.tour-hole{transition:none}}

/* Direction D (login, the tour): the shared paper / keycap tokens from social-feed.css (--d-*). */
/* Login: the big dithered mascot, the white wordmark with its blue star tittle, sunken fields with an accent focus ring,
   the primary keycap, and the demo-credits line. */
.login-mark{width:132px;height:132px;image-rendering:pixelated}
.login-brand{gap:14px}
.login-word{font-size:64px;color:#fff}
.login-brand p{font-size:16px;color:var(--d-soft)}
.login-form{padding-top:26px;gap:12px}
.login-field{height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.login-field:focus-within{border-color:var(--hb-accent);box-shadow:inset 0 2px 0 var(--d-well-lip),0 0 0 4px color-mix(in srgb,var(--hb-accent) 20%,transparent)}
.login-field.invalid{border-color:var(--hb-red);background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip),0 0 0 4px color-mix(in srgb,var(--hb-red) 20%,transparent);animation:d-shake .36s var(--sa-ease)}
.login-field input::placeholder{color:var(--d-soft)}
.login-error{margin:-2px 0 0;font:600 14px/1.35 var(--hb-font-ui)}
.login-error svg{display:none}
.login-submit{height:64px;margin-top:6px;border-radius:99px;font-size:23px;padding-top:3px;box-shadow:0 6px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.login-submit:active{transform:translateY(3px);box-shadow:0 3px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.login-submit:disabled{opacity:1;filter:saturate(.7) brightness(.8)}
.login-note{margin:4px 0 0;text-align:center;font:500 13px var(--hb-font-ui);color:var(--d-soft)}
@keyframes d-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.login-field.invalid{animation:none}}

/* Tour: a paper keycap card (C9: branded, not glass), a blue-to-purple progress bar, a primary keycap for Next, a blue
   spotlight ring on the real control, a glowing streak with a fingertip for gestures, and confetti on the last step. */
.tour-card{left:14px;right:14px;bottom:calc(var(--sa-safe-bottom) + 10px);gap:10px;padding:16px 18px 18px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:var(--d-paper);box-shadow:0 7px 0 var(--d-lip),0 24px 40px rgba(0,0,0,.55)}
.tour-card:after{content:none}
.tour-top{gap:10px}
.tour-progress{flex:1;min-width:0}
#tourCount{min-width:0;font:500 12px/14px var(--hb-font-mono);letter-spacing:0;color:var(--d-soft);white-space:nowrap}
.tour-track{flex:1;width:auto;height:8px;background:var(--d-well)}
#tourBar{background:linear-gradient(90deg,var(--hb-accent),var(--hb-purple))}
.tour-mute{width:30px;height:30px;border-radius:50%;box-shadow:0 3px 0 var(--d-face-lip)}
.tour-skip{padding:0 4px 0 8px;color:var(--d-ink);font:700 14px var(--hb-font-ui)}
.tour-card h2{margin:2px 0 -4px;font-size:28px;line-height:1.05;padding-top:4px}
#tourText{font-size:15.5px;line-height:1.45;color:#d5dbe7}
.tour-hint{color:var(--d-soft);font-weight:600}
.tour-next{height:52px;padding:3px 22px 0;border-radius:99px;border:0;background:var(--d-face);box-shadow:0 5px 0 var(--d-face-lip);font-size:20px}
.tour-next svg{display:none}
.tour-next.primary{padding:3px 24px 0;background:var(--hb-accent);color:var(--d-key-ink);box-shadow:0 6px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.tour-next.primary:active,.tour-next:active{transform:translateY(3px)}
.tour-step{border-radius:50%;box-shadow:0 3px 0 var(--d-face-lip)}
.tour-hole{box-shadow:0 0 0 4px var(--hb-accent),0 0 30px color-mix(in srgb,var(--hb-accent) 60%,transparent),0 0 0 200vmax rgba(4,5,8,var(--tour-dim))}
.tour-scrim{background:rgba(4,5,8,var(--tour-dim))}
.tour-mark .hb-mark{width:150px;height:150px;image-rendering:pixelated}
.tour-mark:before,.tour-done:before{background:radial-gradient(circle,color-mix(in srgb,var(--hb-accent) 30%,transparent) 0%,transparent 65%)}
.tour-streak{width:26px;margin-left:-13px}
.tour-streak span{background:linear-gradient(to top,color-mix(in srgb,var(--hb-accent) 0%,transparent),color-mix(in srgb,var(--hb-accent) 90%,transparent) 70%,#fff);box-shadow:0 0 24px color-mix(in srgb,var(--hb-accent) 80%,transparent)}
.tour-streak:after{content:"";position:absolute;left:50%;top:-14px;width:46px;height:46px;margin-left:-23px;border:3px solid #fff;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:0 0 20px rgba(255,255,255,.6);animation:tour-chev 1.6s var(--sa-ease) infinite}
.tour-chev{display:none}
/* Last step: the mascot, "You're all set!", the swipe hint and a confetti burst in the kit's pastels; no card, no wordmark. */
.tour-done{top:26%;gap:10px}
.tour-done .tour-word{display:none}
.tour-done .hb-mark{width:132px;height:132px;image-rendering:pixelated}
.tour-done strong{margin-top:10px;font-size:40px;line-height:1}
.tour-done>strong+span{margin-top:0;font-weight:600;color:#d5dbe7}
.tour-burst{position:absolute;left:50%;top:60px;width:0;height:0}
.tour-confetti{position:absolute;left:0;top:0;width:10px;height:17px;border-radius:2px;opacity:0;--a:0deg;--r:150px;--c:var(--hb-accent)}
.tour.done .tour-confetti{animation:d-confetti 1.1s var(--sa-ease-out) .1s both}
.tour-confetti.c0{--a:0deg;--r:170px}.tour-confetti.c1{--a:26deg;--r:120px;--c:var(--hb-purple)}.tour-confetti.c2{--a:51deg;--r:160px;--c:var(--hb-pink)}.tour-confetti.c3{--a:77deg;--r:110px;--c:var(--hb-orange)}.tour-confetti.c4{--a:103deg;--r:165px;--c:var(--hb-green)}.tour-confetti.c5{--a:129deg;--r:125px;--c:#f2c14e}.tour-confetti.c6{--a:154deg;--r:175px}.tour-confetti.c7{--a:180deg;--r:115px;--c:var(--hb-purple)}.tour-confetti.c8{--a:206deg;--r:160px;--c:var(--hb-pink)}.tour-confetti.c9{--a:231deg;--r:130px;--c:var(--hb-orange)}.tour-confetti.c10{--a:257deg;--r:170px;--c:var(--hb-green)}.tour-confetti.c11{--a:283deg;--r:120px;--c:#f2c14e}.tour-confetti.c12{--a:309deg;--r:160px}.tour-confetti.c13{--a:334deg;--r:135px;--c:var(--hb-purple)}
.tour-confetti{background:var(--c)}
@keyframes d-confetti{0%{opacity:0;transform:rotate(var(--a)) translateY(0) rotate(0) scale(.4)}25%{opacity:1}100%{opacity:1;transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(160deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.tour.done .tour-confetti{animation:none;opacity:1;transform:rotate(var(--a)) translateY(calc(-1 * var(--r)))}.tour-streak:after{animation:none}}
.login-word .hb-i::after{background:var(--hb-accent)}

/* Onboarding v2 (coach.js, tours.js, tour-fx.js). Blue brand; green only in the win preview (the reward layer's own
   --hb-win); glass stays on the nav bar and the rail. Transform and opacity only; reduced motion turns every move off. */
/* The mascot floats while it talks, and hops on hello (tour-fx.js hop). */
.tour.mark .tour-mark .hb-mark{animation:tour-float 2.6s var(--sa-ease) infinite}
@keyframes tour-float{50%{transform:translateY(-6px)}}
/* The wallet pops while it counts up to the balance. */
.wallet-pill.tour-pop{animation:tour-wallet .5s var(--sa-spring) both;box-shadow:0 0 0 3px var(--hb-accent),0 0 28px color-mix(in srgb,var(--hb-accent) 70%,transparent)}
@keyframes tour-wallet{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1.04)}}
/* The rail step shows the rail through the spotlight (the tour hides it otherwise). */
body:has(#tour.on[data-step="rail"]) #socialRail{opacity:1;visibility:visible}
/* Area tours use the base tour's card exactly: one component, one look (founder 2026-10-27: "compare the main onboarding
   UI to everything else's"). No area-only sizes, no area name in the counter; same Skip, progress, ‹ › and Next. A card
   on top clears the status bar / Dynamic Island the way the base card clears the home bar. */
.tour.top .tour-card{top:calc(var(--sa-safe-top) + 10px)}
/* Game Builder: the demo clip plays behind the card. */
.tour[data-tour="builder"] .tour-card{z-index:3}
/* The finale: first the reward layer's win sequence as a preview (labelled, nothing settles), then "You're all set!"
   with the mascot, confetti and one keycap that lands on home. */
.tour-preview-note{display:none;position:absolute;left:50%;top:calc(34% + 92px);z-index:4;margin:0;padding:7px 14px;transform:translateX(-50%);border-radius:99px;background:var(--d-paper,var(--hb-surface-1));box-shadow:0 4px 0 var(--d-lip,rgba(0,0,0,.4));font:600 13px/1 var(--hb-font-ui);color:var(--d-soft,var(--hb-text-2));white-space:nowrap;pointer-events:none}
.tour.preview .tour-preview-note{display:block}
.tour.preview .tour-done,.tour.preview .tour-streak{display:none!important}
.tour-go{pointer-events:auto;margin-top:22px;height:60px;padding:3px 40px 0;border:0;border-radius:99px;background:var(--hb-accent);color:var(--d-key-ink,var(--hb-on-accent));font:800 22px/1 var(--hb-font-display);box-shadow:0 6px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss);animation:tour-go-in .5s var(--sa-spring) .35s both}
.tour-go:active{transform:translateY(3px);box-shadow:0 3px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.tour.done .tour-done strong{animation:tour-pop-in .45s var(--sa-spring) .1s both}
@keyframes tour-pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes tour-go-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tour.mark .tour-mark .hb-mark,.wallet-pill.tour-pop,.tour-go,.tour.done .tour-done strong{animation:none}}

/* Reconnecting (audit 2026-10-27 P0-4): the server didn't answer the session check (an outage, a deploy restart), so
   the player is NOT shown the login form. Night ground over the feed, the mark breathing, one line; it lifts on its
   own once the server answers. */
.reconnecting{position:fixed;inset:0;z-index:41;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--hb-night);color:var(--sa-text)}
.reconnecting[hidden]{display:none}
.reconnecting-mark{display:block;animation:reconnecting-breathe 1.8s var(--sa-ease) infinite alternate}
.reconnecting p{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;line-height:22px;font-weight:var(--sa-weight-strong);color:var(--hb-text-2)}
.reconnecting-spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--hb-text-2) 30%,transparent);border-top-color:var(--hb-text-2);animation:reconnecting-spin .9s linear infinite}
@keyframes reconnecting-breathe{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@keyframes reconnecting-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.reconnecting-mark,.reconnecting-spin{animation:none}}