/* Login and the first-run guide (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[hidden]{display:none}
.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}
/* Delete account (account-delete.js): a quiet red text button under Log out, then a two-step sheet. The final button is
   the only filled red one, and it stays off until the username and the password are typed. */
.menu-delete{display:block;width:100%;margin-top:var(--sa-space-3);padding:12px;border:0;background:none;color:var(--hb-red);font-size:14px;font-weight:600;opacity:.85}
.menu-delete:active{opacity:.6}
.delete-sheet{display:none}
.delete-sheet[open]{display:block}
.delete-step{display:flex;flex-direction:column;gap:12px}
.delete-step[hidden]{display:none}
.delete-lead{margin:0;font-size:15px;line-height:1.45;color:var(--sa-text)}
.delete-list{margin:0;padding-left:20px;font-size:14px;line-height:1.5;color:var(--hb-text-2)}
.delete-list li+li{margin-top:4px}
.delete-form{display:flex;flex-direction:column;gap:12px}
.delete-danger{display:flex;align-items:center;justify-content:center;height:54px;margin-top:4px;border:0;border-radius:var(--sa-radius-pill,99px);background:var(--hb-red);color:#fff;font:800 17px/1 var(--hb-font-display);transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-fast) var(--sa-spring)}
.delete-danger:active{transform:scale(.98)}
.delete-danger:disabled{opacity:.4}
.delete-busy{display:none}
.delete-sheet.busy .delete-label{display:none}
.delete-sheet.busy .delete-busy{display:inline}
.delete-keep{height:48px;border:1px solid var(--hb-line-strong,rgba(255,255,255,.18));border-radius:var(--sa-radius-pill,99px);background:none;color:var(--sa-text);font:700 16px/1 var(--hb-font-display)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Direction D (login): 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}}

/* Log in, Create account and Forgot password (login.js; Sai 10-30, "Login must be legit"): three screens, each with its
   own title, a caption over every field, live rules under Create account's fields, one primary keycap, and the other
   door as a quiet link. Create account has four fields, so the mascot steps aside there and the brand shrinks. */
.login{padding-top:calc(var(--sa-safe-top) + 7vh);padding-bottom:calc(var(--sa-safe-bottom) + 24px)}
.login-brand{flex:none}
.login[data-screen="signup"] .login-mark,.login[data-screen="hobbi"] .login-mark{display:none}
.login[data-screen="signup"] .login-word,.login[data-screen="hobbi"] .login-word{font-size:44px}
.login[data-screen="signup"]:before{top:calc(var(--sa-safe-top) + 7vh - 150px)}
.login-form[hidden],.login-switch[hidden],.login-group[hidden]{display:none}
.login-title{margin:0;font:800 30px/1.1 var(--hb-font-display);letter-spacing:var(--hb-tracking-display,-.02em);color:#fff;outline:0}
/* A screen switch moves focus to its title for screen readers (tabindex=-1); the title isn't a control, so the feed's
   [tabindex]:focus-visible ring (social-feed.css) stays off it. */
.login .login-title:focus-visible{outline:none}
.login-lead{margin:-4px 0 6px;font:600 16px/1.4 var(--hb-font-ui);color:var(--d-soft)}
.login-group{display:flex;flex-direction:column;gap:6px}
.login-caption-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.login-caption{padding-left:4px;font:700 14px/1.2 var(--hb-font-ui);color:var(--d-ink,#eef1f7)}
.login-link{min-height:32px;padding:4px;border:0;background:none;color:var(--hb-accent);font:700 15px/1.2 var(--hb-font-ui);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--hb-accent) 45%,transparent);text-underline-offset:3px}
.login-link:focus-visible,.login-reveal:focus-visible,.login-submit:focus-visible{outline:3px solid #fff;outline-offset:3px}
.login-hint{margin:0;padding-left:4px;font:600 13px/1.35 var(--hb-font-ui);color:var(--d-soft)}
.login-hint[hidden]{display:none}
.login-hint[data-state="ok"]{color:var(--hb-green,#3ddc84)}
.login-hint[data-state="bad"]{color:var(--hb-red)}
.login-rules{display:flex;flex-direction:column;gap:3px;margin:0;padding:0 0 0 4px;list-style:none;font:600 13px/1.35 var(--hb-font-ui);color:var(--d-soft)}
.login-rules li{display:flex;align-items:center;gap:7px}
.login-rules li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:2px solid currentColor;opacity:.7}
.login-rules li[data-state="ok"]{color:var(--hb-green,#3ddc84)}
.login-rules li[data-state="ok"]:before{width:12px;height:12px;border:0;border-radius:0;opacity:1;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.login-rules li[data-state="bad"]{color:var(--hb-red)}
.login-rules li[data-state="bad"]:before{opacity:1;background:currentColor}
.login-switch{position:relative;margin:18px 0 0;font:600 15px/1.4 var(--hb-font-ui);color:var(--d-soft);text-align:center}
.login[data-screen="forgot"] .hobbi-id,.login[data-screen="hobbi"] .hobbi-id{display:none}
.login-forgot .login-lead{margin:0 0 10px}

.login-word .hb-i::after{background:var(--hb-accent)}

/* 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}
/* Offline over the feed (#740): the card stays in view under it. */
.reconnecting.offline{background:color-mix(in srgb,var(--hb-night) 78%,transparent)}
.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}}
/* Hobbi ID (Auth0 Universal Login, #685): hidden unless the server turns it on (hobbi-id.js). */
.hobbi-id{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px;margin-top:12px}
.hobbi-id-or{display:flex;align-items:center;gap:12px;margin:0;color:var(--hb-text-3);font-size:13px}
.hobbi-id-or:before,.hobbi-id-or:after{content:"";flex:1;height:1px;background:var(--hb-line)}
.hobbi-id-button{height:56px;border:1px solid var(--hb-line);border-radius:var(--hb-radius-m);background:var(--hb-surface-1);color:var(--sa-text);font:800 18px/1 var(--hb-font-display)}
.hobbi-id-button:active{transform:scale(.98)}
.hobbi-id-button{display:flex;align-items:center;justify-content:center;gap:10px}
.hobbi-id-g{width:20px;height:20px;flex:none}
.hobbi-id.busy .hobbi-id-button{opacity:.6}
.hobbi-id-signup{padding-top:24px}
.hobbi-id-title{margin:0 0 4px;text-align:center;font:800 22px/1.2 var(--hb-font-display);color:var(--sa-text)}

/* The first-run guide (coach.js, tours.js; Sai 2026-10-30: one short guided flow, the same card in the same place every
   step, a step count, Skip, and a clear end; Rushil 2026-11-01: two steps, the swipe and Slide to play). Direction D: the
   paper card (--d-paper) with its keycap lip (--d-lip) and the accent dither along its foot, the primary keycap for Next
   and Start. */
.tour{position:fixed;inset:0;z-index:45;opacity:0;pointer-events:none;transition:opacity .3s var(--sa-ease);-webkit-user-select:none;user-select:none}
.tour.on{opacity:1}
/* Behind every step the screen takes every touch, so no tap reaches the game. Behind a card it is dimmed; in the swipe
   step (.pass) it is clear, and the feed takes a vertical swipe on it as the real swipe (social-feed.js); a spotlight
   step's dim comes from its ring instead. */
.tour-catch{position:absolute;inset:0;pointer-events:auto;background:rgba(4,5,8,.55);-webkit-tap-highlight-color:transparent}
.tour.pass .tour-catch{background:transparent}
/* Behind a card or a spotlight the catcher keeps every move of a touch for itself (coach.js): a drag along the ringed
   Slide to play reaches it as one press to its end, never cancelled for the page to pan. */
.tour:not(.pass) .tour-catch{touch-action:none}
.tour.spot .tour-catch{background:transparent}
.tour:not(.on) .tour-catch,.tour:not(.on) .tour-card{pointer-events:none}
.tour-ring{position:absolute;left:var(--ring-x,0);top:var(--ring-y,0);width:var(--ring-w,56px);height:var(--ring-h,56px);border-radius:999px;pointer-events:none;box-shadow:0 0 0 4px var(--hb-accent),0 0 28px color-mix(in srgb,var(--hb-accent) 70%,transparent),0 0 0 200vmax rgba(4,5,8,.55);transition:left .3s var(--sa-ease-out),top .3s var(--sa-ease-out),width .3s var(--sa-ease-out),height .3s var(--sa-ease-out)}
.tour-ring[hidden]{display:none}
/* The card: docked at the bottom, the same place for every step. */
.tour-card{position:absolute;left:14px;right:14px;bottom:calc(var(--sa-safe-bottom) + 14px);max-width:420px;margin:0 auto;pointer-events:auto;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:var(--d-paper,var(--hb-surface-1));box-shadow:0 7px 0 var(--d-lip,rgba(0,0,0,.45)),0 24px 40px rgba(0,0,0,.55);color:#fff}
.tour-card:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:60px;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.high .tour-card{top:calc(var(--sa-safe-top) + 84px);bottom:auto}
.tour-card.enter{animation:tour-card-in .38s var(--sa-spring,cubic-bezier(.3,1.4,.5,1)) both}
@keyframes tour-card-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.tour-count{margin:0;font:800 13px/1 var(--hb-font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--hb-accent)}
.tour-count[hidden]{display:none}
.tour-title{margin:0;font:800 27px/1.1 var(--hb-font-display);letter-spacing:var(--hb-tracking-display,-.02em);color:#fff}
.tour-text{margin:0;font:600 17px/1.4 var(--hb-font-ui);color:#d5dbe7}
.tour-text[hidden]{display:none}
.tour-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip (quiet text) on the left, Next (the primary keycap) on the right. */
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.tour-skip{height:48px;padding:0 6px;border:0;background:none;color:var(--d-soft,var(--hb-text-2));font:700 16px var(--hb-font-ui)}
.tour-skip[hidden]{display:none}
/* Back (every step after the first) sits left with Skip; Next keeps the right. */
.tour-back{height:48px;padding:0 6px;border:0;background:none;color:#fff;font:800 16px var(--hb-font-ui)}
.tour-back[hidden]{display:none}
.tour-back:focus-visible{outline:3px solid #fff;outline-offset:4px}
.tour-next{margin-left:auto}
.tour-next{position:relative;overflow:hidden;min-width:148px;height:56px;padding:3px 30px 0;border:0;border-radius:99px;background:var(--hb-accent);color:var(--d-key-ink,var(--hb-on-accent));font:800 21px/1 var(--hb-font-display);box-shadow:0 6px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.tour-next:active{transform:translateY(3px);box-shadow:0 3px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.tour-next:focus-visible,.tour-skip:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* The swipe step: the hand (132 px, white with an accent glow) presses low and swipes up over the game, on a loop. */
.tour-hand{position:absolute;left:50%;top:46%;width:132px;height:132px;margin:-24px 0 0 -54px;opacity:0;display:none;pointer-events:none}
.tour[data-kind="swipe"] .tour-hand{display:block}
.tour-finger{position:relative;width:132px;height:132px;fill:rgba(255,255,255,.22);stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)) drop-shadow(0 0 18px color-mix(in srgb,var(--hb-accent) 75%,transparent))}
.tour-trail{position:absolute;left:24px;top:12px;width:26px;height:0;margin-left:-13px;border-radius:999px;background:linear-gradient(to top,color-mix(in srgb,var(--hb-accent) 0%,transparent),color-mix(in srgb,var(--hb-accent) 80%,transparent));opacity:0}
.tour.on[data-kind="swipe"] .tour-hand{animation:tour-hand 2.2s var(--sa-ease-out) .3s infinite}
.tour.on[data-kind="swipe"] .tour-trail{animation:tour-trail 2.2s var(--sa-ease-out) .3s infinite}
@keyframes tour-hand{0%{opacity:0;transform:translateY(20px) scale(1)}12%{opacity:1;transform:translateY(0) scale(1)}22%{transform:translateY(0) scale(.86)}66%{opacity:1;transform:translateY(-22vh) scale(.86)}80%,100%{opacity:0;transform:translateY(-25vh) scale(.95)}}
@keyframes tour-trail{0%,22%{opacity:0;height:0}34%{opacity:1}66%{opacity:.9;height:19vh}80%,100%{opacity:0;height:21vh}}
@media(prefers-reduced-motion:reduce){.tour-card.enter{animation:none}.tour.on[data-kind="swipe"] .tour-hand{animation:none;opacity:1}.tour.on[data-kind="swipe"] .tour-trail{animation:none}.tour-ring{transition:none}}
/* 18+ and the Terms on Create account and Hobbi ID's username step (terms.js, beta audit B3): one required box. */
.login-terms{display:flex;align-items:flex-start;gap:12px;padding:4px 4px 2px;font:600 14px/1.4 var(--hb-font-ui);color:var(--d-ink,#eef1f7);cursor:pointer}
.login-terms input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--hb-accent)}
.login-terms input[aria-invalid="true"]{outline:2px solid var(--hb-red);outline-offset:2px}
.login-terms input:focus-visible,.login-terms-link:focus-visible{outline:3px solid #fff;outline-offset:3px}
.login-terms-link{color:var(--hb-accent);text-decoration:underline;text-underline-offset:3px}
/* 18+ and the legal links under the sign-up and log-in forms (mates-core#712). */
.login-legal{width:100%;max-width:360px;margin:20px 0 24px;font-size:12px;line-height:17px;text-align:center;color:var(--sa-text-2,rgba(255,255,255,.6))}
.login-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}