/* ============================================================================
   WisGo — the screens before sign-in (v82)

   v82: the welcome slides and sign-in follow the light / dark setting like the
   rest of the app (light is the default). The pictures are "living previews":
   small pieces of the real app (data-onboarding.js) that arrive one after
   another and then drift, on a stage the shell scales to fit (--ovs).

   Colours are local tokens (--o-*), set once for dark and once for light.
   ========================================================================== */

.onb, .auth{
  --o-bg:#08170F; --o-ink:#FFFFFF; --o-dim:#A8C2B2; --o-card:#12372A; --o-card2:#17452F;
  --o-line:rgba(255,255,255,.10); --o-grid:rgba(255,255,255,.06); --o-chip:rgba(255,255,255,.08);
  --o-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px rgba(0,0,0,.42), 0 4px 10px rgba(0,0,0,.25);
  --o-glowA:rgba(255,197,61,.20); --o-glowB:rgba(0,194,168,.16);
  --o-gold:#FFC53D; --o-gold-ink:#FFC53D; --o-teal:#2ED3BA; --o-coral:#FF7A70; --o-ok:#8ED081;
  --o-p:#CFE0D4;
}
html.lt .onb, html.lt .auth{
  --o-bg:#F3F6F1; --o-ink:#10241A; --o-dim:#5D7266; --o-card:#FFFFFF; --o-card2:#EEF4EE;
  --o-line:rgba(16,40,28,.08); --o-grid:rgba(16,40,28,.07); --o-chip:rgba(16,40,28,.05);
  --o-shadow:0 1px 2px rgba(16,40,28,.06), 0 16px 36px rgba(16,40,28,.13);
  --o-glowA:rgba(255,197,61,.42); --o-glowB:rgba(0,194,168,.24);
  --o-gold-ink:#8A5A00; --o-teal:#00806F; --o-coral:#D2433D; --o-ok:#2E7D32;
  --o-p:#3E5248;
}

.onb{
  position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--o-bg); color:var(--o-ink);
}

/* ---------- the picture ---------------------------------------------------- */
.onb-art{
  position:absolute; inset:0 0 auto 0; height:64%; overflow:hidden;
  background:
    radial-gradient(60% 46% at 78% 30%, var(--o-glowA), transparent 70%),
    radial-gradient(56% 44% at 14% 70%, var(--o-glowB), transparent 72%);
}
/* a faint dotted field behind the cards, like a map seen from far away */
.onb-art::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(var(--o-grid) 1.4px, transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent);
}
/* the fade from picture into page */
.onb-art::after{
  content:''; position:absolute; inset:auto 0 0 0; height:22%;
  background:linear-gradient(to bottom, transparent, var(--o-bg));
  pointer-events:none;
}

/* ---------- the chrome on top ---------------------------------------------- */
.onb-top{
  position:relative; z-index:3; display:flex; align-items:center; gap:10px;
  padding:calc(12px + var(--safe-t)) 18px 0;
}
.onb-top .logo{ display:flex; align-items:center; gap:9px; flex:1; min-width:0 }
.onb-top .mark{ width:26px; height:26px; display:block }
.onb-top .wordmark{ font-family:var(--display); font-size:1.02rem; letter-spacing:-.015em; color:var(--o-ink) }
.onb-top .wordmark .go{ color:var(--o-gold-ink) }
html.lt .onb-top .mark{ filter:brightness(.78) saturate(1.3) }
.skip{ font-size:.82rem; font-weight:600; color:var(--o-dim); padding:8px 4px; background:none; border:none }
.onb .onb-back{ color:var(--o-ink) }

/* segmented progress, like a story */
.onb-steps{ position:relative; z-index:3; display:flex; gap:5px; padding:14px 18px 0 }
.onb-steps i{ flex:1; height:3px; border-radius:99px; background:var(--o-line); overflow:hidden; position:relative }
html.lt .onb-steps i{ background:rgba(16,40,28,.12) }
.onb-steps i.done{ background:color-mix(in srgb, var(--o-gold) 60%, transparent) }
.onb-steps i.on::after{
  content:''; position:absolute; inset:0; border-radius:99px; background:var(--o-gold);
  transform-origin:left; animation:onbFill .45s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes onbFill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* ---------- the words ------------------------------------------------------ */
.onb-body{ position:relative; z-index:2; margin-top:auto; padding:0 24px calc(18px + var(--safe-b)) }
.onb-kicker{
  display:block; font-family:var(--mono); font-weight:700;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--o-gold-ink); margin-bottom:10px;
}
body.km .onb-kicker{ letter-spacing:0; text-transform:none; font-family:var(--sans); font-size:.8rem }
.onb-body h2{
  font-family:var(--display); font-size:2.45rem; line-height:1.04;
  letter-spacing:-.03em; margin:0 0 12px; color:var(--o-ink);
}
body.km .onb-body h2{ font-size:1.95rem; line-height:1.35; letter-spacing:0 }
.onb-body p{ color:var(--o-p); font-size:1.02rem; line-height:1.5; max-width:33ch }

.onb-slide > *{ animation:onbIn .55s cubic-bezier(.2,.9,.25,1) both }
.onb-slide > :nth-child(2){ animation-delay:.06s }
.onb-slide > :nth-child(3){ animation-delay:.12s }
@keyframes onbIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.onb-foot{ position:relative; z-index:3; padding:16px 20px calc(18px + var(--safe-b)) }
.onb-foot .btn{ width:100% }
.onb .auth-alt, .auth .auth-alt{ color:var(--o-dim) }

/* short phones: the picture gives way to the words */
@media (max-height:700px){
  .onb-art{ height:58% }
  .onb-body h2{ font-size:2.05rem }
  .onb-body p{ font-size:.95rem }
}

/* ============================================================================
   The living previews
   ========================================================================== */
.ov{
  position:absolute; left:50%; top:calc(50% + 40px); width:390px; height:470px;
  transform:translate(-50%, -50%) scale(var(--ovs, 1)); transform-origin:50% 50%;
  font-family:var(--sans); color:var(--o-ink);
}
.auth-art .ov{ height:340px }
.auth-art .ov > .ov-c:nth-child(n+4){ display:none }
/* a card on the stage: its place and tilt (outer), then its slow drift (inner) */
.ov-c{
  position:absolute; transform:rotate(var(--r));
  animation:ovIn .85s cubic-bezier(.18,.95,.3,1.12) var(--d) both;
}
@keyframes ovIn{
  from{ opacity:0; transform:translateY(46px) rotate(calc(var(--r) * 2.2)) scale(.86); filter:blur(6px) }
  60%{ filter:blur(0) }
  to{ opacity:1; transform:rotate(var(--r)) scale(1); filter:none }
}
.ov-fl{ animation:ovFloat var(--f, 8s) ease-in-out calc(var(--d) + .85s) infinite alternate }
@keyframes ovFloat{ from{ transform:translate(0, 0) } 50%{ transform:translate(3px, -7px) } to{ transform:translate(-2px, 4px) } }

.ov-card{
  background:var(--o-card); border:1px solid var(--o-line); border-radius:20px;
  box-shadow:var(--o-shadow); overflow:hidden;
}
.ov-cover{ position:relative; height:118px; overflow:hidden }
.ov-cover.sm{ height:74px }
.ov-cover svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.ov-tag{ position:absolute; left:10px; top:10px; font-size:11px; font-weight:800; padding:5px 10px; border-radius:99px; background:rgba(8,23,15,.78); color:#fff }
.ov-price{ position:absolute; right:10px; top:10px; font-size:12px; font-weight:800; padding:5px 10px; border-radius:99px; background:#FFC53D; color:#1a1405 }
.ov-cb{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:4px }
.ov-cb b{ font-family:var(--display); font-size:15.5px; line-height:1.2; letter-spacing:-.01em }
.ov-meta{ font-size:11.5px; color:var(--o-dim); font-weight:600 }
.ov-by{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--o-dim); font-weight:600; margin-top:4px }
.ov-av{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--o-card2); color:var(--o-ink); font-style:normal; font-size:9.5px; font-weight:800 }
.ov-good{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--o-ok) }
.ov-good i{ width:7px; height:7px; border-radius:50%; background:currentColor }
.ov-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px }
.ov-big{ font-family:var(--display); font-weight:800; font-size:20px }
.ov-big small{ font-size:11px; color:var(--o-dim); font-weight:600; margin-left:2px }
.ov-btn{ font-size:11.5px; font-weight:800; padding:8px 12px; border-radius:11px; background:linear-gradient(135deg,#FFD66B,#E9AE38); color:#1a1405 }

.ov-pill{
  white-space:nowrap; display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:99px;
  background:var(--o-card); border:1px solid var(--o-line); box-shadow:var(--o-shadow);
  font-size:13px; font-weight:700;
}
.ov-pill svg, .ov-mini svg, .ov-toast svg{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.ov-pill b{ display:block; font-size:13px } .ov-pill small{ display:block; font-size:11px; color:var(--o-dim); font-weight:600 }
.ov-search{ color:var(--o-dim) }
.ov-search .ov-type{ color:var(--o-ink); display:inline-block; overflow:hidden; white-space:nowrap; width:0; animation:ovType 5.5s steps(6, end) 1s infinite }
@keyframes ovType{ 0%{ width:0 } 30%,82%{ width:6ch } 92%,100%{ width:0 } }
.ov-caret{ width:2px; height:16px; background:var(--o-gold); border-radius:2px; animation:ovBlink 1s step-end infinite }
@keyframes ovBlink{ 50%{ opacity:0 } }
.ov-dates svg{ color:var(--o-gold-ink) }
.ov-free{ font-size:12px; color:var(--o-ok) }
.ov-free span{ color:var(--o-ink) }

.ov-mini{ display:flex; align-items:center; gap:11px; padding:11px 13px }
.ov-mini b{ display:block; font-size:13px; white-space:nowrap } .ov-mini small{ display:block; white-space:nowrap; font-size:11px; color:var(--o-dim); font-weight:600; margin-top:1px }
.ov-ic{ flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--o-chip); color:var(--o-teal) }
.ov-ic.gold{ color:var(--o-gold-ink) } .ov-ic.teal{ color:var(--o-teal) }

/* chat with the host: the reply types, then appears, again and again */
.ov-chat{ display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.ov-bub{ max-width:210px; font-size:12.5px; line-height:1.35; font-weight:600; padding:10px 13px; border-radius:16px; box-shadow:var(--o-shadow) }
.ov-bub.me{ background:#FFC53D; color:#1a1405; border-bottom-right-radius:5px }
.ov-bub.them{ align-self:flex-start; background:var(--o-card); border:1px solid var(--o-line); border-bottom-left-radius:5px; position:relative; min-width:56px; min-height:36px }
.ov-dots{ position:absolute; left:14px; top:14px; display:flex; gap:4px; animation:ovDotsShow 7s infinite }
.ov-dots i{ width:6px; height:6px; border-radius:50%; background:var(--o-dim); animation:ovDot 1s ease-in-out infinite }
.ov-dots i:nth-child(2){ animation-delay:.15s } .ov-dots i:nth-child(3){ animation-delay:.3s }
@keyframes ovDot{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-3px); opacity:1 } }
.ov-rtext{ display:block; animation:ovReply 7s infinite }
@keyframes ovDotsShow{ 0%,8%{ opacity:0; visibility:hidden } 12%,34%{ opacity:1; visibility:visible } 38%,100%{ opacity:0; visibility:hidden } }
@keyframes ovReply{ 0%,36%{ opacity:0; max-height:0; transform:translateY(4px) } 42%,92%{ opacity:1; max-height:60px; transform:none } 100%{ opacity:0; max-height:60px } }

/* the map: the route draws itself, the checkpoints light up in turn */
.ov-map{ position:relative; padding:0; background:var(--o-card) }
.ov-map svg{ display:block; width:100%; height:auto }
.ov-grid path{ stroke:var(--o-grid); stroke-width:2; fill:none }
.ov-river{ fill:color-mix(in srgb, var(--o-teal) 22%, transparent) }
.ov-route{ fill:none; stroke:var(--o-gold); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:ovRoute 6s cubic-bezier(.5,0,.3,1) .6s infinite }
@keyframes ovRoute{ 0%{ stroke-dashoffset:420 } 55%,88%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0; opacity:0 } }
.ov-pin .ov-dot{ fill:var(--o-card); stroke:var(--o-gold); stroke-width:3.5 }
.ov-pin text{ font:800 12px var(--display), sans-serif; fill:var(--o-gold-ink); text-anchor:middle }
.ov-pin.now .ov-dot{ fill:#FFC53D } .ov-pin.now text{ fill:#1a1405 }
.ov-ring{ fill:none; stroke:#FFC53D; stroke-width:2; transform-origin:0 0; animation:ovRing 2.2s ease-out infinite }
@keyframes ovRing{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.7); opacity:0 } }
.ov-maplab{ position:absolute; left:12px; bottom:12px; font-size:11.5px; font-weight:800; padding:7px 11px; border-radius:99px; background:var(--o-chip); color:var(--o-ink); backdrop-filter:blur(6px) }

.ov-task{ padding:12px 14px; display:flex; flex-direction:column; gap:5px }
.ov-k{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--o-teal) }
.ov-task b{ font-family:var(--display); font-size:16px; letter-spacing:-.01em }
.ov-pts{ font-family:var(--display); font-weight:800; font-size:13px; color:#1a1405; background:#FFC53D; padding:4px 9px; border-radius:99px }
.ov-board{ padding:12px 14px; display:flex; flex-direction:column; gap:7px }
.ov-line{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700 }
.ov-line i{ font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; background:var(--o-chip) }
.ov-line:first-of-type i{ background:#FFC53D; color:#1a1405 }
.ov-line b{ margin-left:auto; font-family:var(--display) }
.ov-toast{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:99px; background:#10241A; color:#fff; font-size:13px; font-weight:700; box-shadow:0 10px 26px rgba(0,0,0,.3) }
.ov-toast svg{ color:#FFC53D; fill:#FFC53D }
.ov-toast b{ color:#FFC53D; font-family:var(--display) }
html:not(.lt) .ov-toast{ background:#FFC53D; color:#1a1405 } html:not(.lt) .ov-toast b, html:not(.lt) .ov-toast svg{ color:#1a1405; fill:#1a1405 }
.ov-pop{ animation:ovIn .85s cubic-bezier(.18,.95,.3,1.12) var(--d) both, ovPop 4.2s ease-in-out 2.2s infinite }
@keyframes ovPop{ 0%,100%{ opacity:1; transform:rotate(var(--r)) translateY(0) scale(1) } 45%{ opacity:1; transform:rotate(var(--r)) translateY(-10px) scale(1.06) } 50%{ transform:rotate(var(--r)) translateY(-10px) scale(1.06) } }

/* game cards */
.ov-pc{
  height:214px; border-radius:20px; background:#FBFAF6; color:#14261C; box-shadow:0 18px 40px rgba(0,0,0,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 16px; gap:12px; position:relative;
  border:1px solid rgba(16,40,28,.06);
}
.ov-lab{ font-size:9px; font-weight:800; letter-spacing:.12em; padding:6px 10px; border-radius:99px; background:#163B2B; color:#fff }
.ov-pc.dare .ov-lab{ background:#E8544F }
.ov-q{ font-size:15px; font-weight:600; line-height:1.3 }
.ov-deck{ position:absolute; left:0; right:0; bottom:14px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7A8B81 }
.ov-fan .ov-f3 .ov-fl{ animation-name:ovFloatTop }
@keyframes ovFloatTop{ from{ transform:translateY(0) } 50%{ transform:translateY(-10px) } to{ transform:translateY(-4px) } }

.ov-imp{ perspective:700px; height:118px }
.ov-imp-in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:ovFlip 6s cubic-bezier(.6,0,.3,1) 1.6s infinite }
@keyframes ovFlip{ 0%,30%{ transform:rotateY(0) } 40%,80%{ transform:rotateY(180deg) } 90%,100%{ transform:rotateY(360deg) } }
.ov-side{ position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; text-align:center; padding:12px; box-shadow:var(--o-shadow) }
.ov-side.front{ background:var(--o-card); border:1px solid var(--o-line) }
.ov-side.front .ov-k{ color:var(--o-coral) }
.ov-side.front b{ font-size:14px }
.ov-side.back{ transform:rotateY(180deg); background:linear-gradient(150deg,#5A2320,#2A1513); color:#fff; border:2px solid #FF5E5B }
.ov-side.back .ov-k{ color:#FF9C99 }
.ov-side.back b{ font-family:var(--display); font-size:16px; color:#FF8A85; line-height:1.15 }

@media (prefers-reduced-motion:reduce){
  .ov-c, .ov-fl, .ov-pop, .ov-type, .ov-caret, .ov-dots, .ov-dots i, .ov-rtext, .ov-route, .ov-ring, .ov-imp-in,
  .onb-slide > *, .onb-steps i.on::after{ animation:none !important }
  .ov-search .ov-type{ width:6ch } .ov-route{ stroke-dashoffset:0 } .ov-dots{ opacity:0 } .ov-rtext{ opacity:1 }
}

/* ============================================================================
   The sign-in screen. Same treatment: a preview behind, the decision in front.
   ========================================================================== */
.auth{
  position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--o-bg); color:var(--o-ink);
}
.auth-art{
  position:absolute; inset:0 0 auto 0; height:54%; overflow:hidden;
  background:
    radial-gradient(60% 46% at 78% 30%, var(--o-glowA), transparent 70%),
    radial-gradient(56% 44% at 14% 70%, var(--o-glowB), transparent 72%);
}
.auth-art::after{
  content:''; position:absolute; inset:auto 0 0 0; height:40%;
  background:linear-gradient(to bottom, transparent, var(--o-bg));
}
.auth-body{ position:relative; z-index:2; margin-top:auto; padding:0 24px 6px; text-align:left }
.auth-top{ position:relative; z-index:3 }
.auth-body h2{ font-family:var(--display); font-size:2.2rem; line-height:1.06; letter-spacing:-.03em; color:var(--o-ink) }
body.km .auth-body h2{ font-size:1.8rem; line-height:1.4; letter-spacing:0 }
.auth-body .lead{ color:var(--o-p); font-size:1rem; line-height:1.5; margin-top:12px; max-width:32ch }
.auth-foot{ position:relative; z-index:3; padding:18px 20px calc(16px + var(--safe-b)) }

.pbtn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:11px;
  padding:16px 18px; border-radius:16px; font-size:1rem; font-weight:700;
  margin-top:11px; border:1px solid transparent;
}
.pbtn svg{ width:20px; height:20px; display:block; flex:none }
.pbtn-google{ background:#FFFFFF; color:#1B1B1B }
html.lt .pbtn-google{ border-color:rgba(16,40,28,.16); box-shadow:0 1px 2px rgba(16,40,28,.06) }
.pbtn-tg{ background:#2AABEE; color:#fff }
.pbtn:active{ transform:scale(.99) }
.pbtn[disabled]{ opacity:.55; pointer-events:none }

/* ---------------------------------------------- the Telegram widget slot ---
   Telegram draws its own button inside an iframe, so only the space it sits
   in can be styled. While it loads the slot keeps a button's height. */
#tgHost{ margin-top:11px }
#tgHost .pbtn{ margin-top:0 }
#tgHost iframe{ display:block !important; margin:0 auto !important; }
#tgHost.tg-waiting{ min-height:56px }

.auth-why{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; color:var(--o-dim); font-size:.86rem; line-height:1.45 }
.auth-why svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--o-teal) }
.auth-legal{ text-align:center; color:var(--o-dim); font-size:.74rem; margin-top:16px; line-height:1.5 }
.auth-legal a{ color:var(--o-dim); text-decoration:underline }
.auth-alt{
  display:block; width:100%; margin-top:14px; padding:10px;
  background:none; border:none; color:var(--o-dim);
  font-size:.82rem; text-decoration:underline; text-align:center;
}