/* Sign-in: bright, playful, one screen on a phone. Ink outlines, hard shadows, sunny colour. */
:root { --lg-ink: #2A1E12; --lg-gold: #FFB703; --lg-coral: #FF6B6B; --lg-mint: #2EC4B6; --lg-sky: #4CC9F0; --lg-violet: #9B5DE5; }
.lg { background: #FFF8E6; }

/* ---------- the playground ---------- */
.lg-side.lgl { background: linear-gradient(160deg, #FFF3C9 0%, #FFE08A 55%, #FFC93C 100%); color: var(--lg-ink); position: relative; overflow: hidden; }
.lg-side.lgl::before, .lg-side.lgl::after { display: none !important; }
.lgl-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; pointer-events: none; animation: lgDrift 9s ease-in-out infinite; }
.lgl-blob.b1 { width: 46vmin; height: 46vmin; right: -12vmin; top: -10vmin; background: var(--lg-coral); opacity: .55; }
.lgl-blob.b2 { width: 36vmin; height: 36vmin; left: -12vmin; bottom: 8vmin; background: var(--lg-sky); opacity: .5; animation-delay: -3s; }
.lgl-blob.b3 { width: 22vmin; height: 22vmin; right: 18%; bottom: -6vmin; background: var(--lg-mint); opacity: .55; animation-delay: -6s; }
@keyframes lgDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14px, -18px) scale(1.08); } }
.lgl .lg-mark { position: relative; z-index: 2; }
.lgl .lg-mark b { color: var(--lg-ink); font-family: var(--display); }
.lgl .lg-mark i { color: var(--lg-ink); opacity: .7; }
.lgl-stage { position: relative; z-index: 2; display: grid; align-content: center; gap: 14px; max-width: 620px; }
.lgl-big { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: .98; color: var(--lg-ink); background: none; -webkit-text-fill-color: var(--lg-ink); font-size: clamp(40px, 6.4vw, 92px); }
.lgl-big .l1, .lgl-big .l2 { display: inline; }
.lgl-word { display: inline-block; line-height: 1.04; padding: .02em .26em .08em; border: 3px solid var(--lg-ink); border-radius: .34em; box-shadow: 5px 5px 0 var(--lg-ink); transform: rotate(-2.5deg); background: var(--lg-coral); color: #fff; -webkit-text-fill-color: #fff; white-space: nowrap; margin-top: .06em; }
.lgl-word[data-c="0"] { background: var(--lg-coral); } .lgl-word[data-c="1"] { background: var(--lg-sky); color: var(--lg-ink); -webkit-text-fill-color: var(--lg-ink); }
.lgl-word[data-c="2"] { background: var(--lg-violet); } .lgl-word[data-c="3"] { background: var(--lg-mint); color: var(--lg-ink); -webkit-text-fill-color: var(--lg-ink); }
.lgl-word[data-c="4"] { background: #fff; color: var(--lg-ink); -webkit-text-fill-color: var(--lg-ink); }
.lgl-word.swap { animation: lgSwap .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes lgSwap { 0% { opacity: 0; transform: translateY(.5em) rotate(-9deg) scale(.85); } 100% { opacity: 1; transform: rotate(-2.5deg); } }
.lgl-big .l3 { position: relative; display: block; width: max-content; margin-top: .06em; margin-bottom: .3em; }
.lgl-sq { position: absolute; left: 0; right: 0; top: 100%; height: .16em; }
.lgl-sq svg { width: 100%; height: 100%; overflow: visible; } .lgl-sq path { fill: none; stroke: var(--lg-coral); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: lgDraw 1.2s .4s ease forwards; vector-effect: non-scaling-stroke; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
.lgl-sub { font: 700 clamp(15px, 1.5vw, 20px)/1.4 var(--font); color: rgba(42, 30, 18, .82); max-width: 30em; margin-top: 14px; }
.lgl .lg-foot { position: relative; z-index: 2; display: grid; gap: 6px; color: rgba(42, 30, 18, .6); } .lgl .lg-foot p { margin: 0; } .lgl-trust { font-weight: 800; color: var(--lg-ink); }


/* ---------- the sheet with the form ---------- */
.lg-main { background: #FFFDF6; }
.lg-card { background: #fff; border: 3px solid var(--lg-ink); border-radius: 28px; padding: 26px; box-shadow: 8px 8px 0 var(--lg-ink); }
.lg-h { color: var(--lg-ink); }
.lg .btn.primary { background: var(--lg-gold); border: 3px solid var(--lg-ink); border-radius: 16px; color: var(--lg-ink); font-weight: 800; box-shadow: 0 5px 0 var(--lg-ink); transition: transform .08s, box-shadow .08s; }
.lg .btn.primary:hover { background: #FFC531; filter: none; } .lg .btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lg-ink); }
.lg .input { border: 2.5px solid var(--lg-ink); border-radius: 16px; background: #fff; } .lg .input:focus { outline: 0; box-shadow: 0 0 0 4px rgba(255, 183, 3, .5); }
.g-btn { border: 2.5px solid var(--lg-ink); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--lg-ink); } .g-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lg-ink); }
.lg-lang { background: rgba(255, 255, 255, .85); border: 2px solid var(--lg-ink); }
.lg-lbtn[aria-pressed="true"] { background: var(--lg-gold); color: var(--lg-ink); border: 0; }
.error:empty { display: none; }

/* ---------- phone: playground on top, sheet below, no scroll ---------- */
@media (max-width: 860px) {
  .lg { display: flex; flex-direction: column; overflow: hidden; height: 100dvh; background: #FFC93C; }
  .lg-side.lgl { flex: 1 1 auto; min-height: 0; padding: 16px 22px 30px; gap: 0; display: flex; flex-direction: column; justify-content: flex-start; }
  .lgl .lg-mark { gap: 10px; } .lgl .lg-mark img { height: 28px; } .lgl .lg-mark b { font-size: 18px; } .lgl .lg-mark i { font-size: 9px; letter-spacing: .26em; }
  .lgl .lg-foot { display: none; }
  .lgl-stage { flex: 1; gap: 8px; align-content: center; }
  .lgl-big { font-size: min(11.4vw, 6.4dvh, 54px); }
  .lgl-word { box-shadow: 4px 4px 0 var(--lg-ink); border-width: 2.5px; }
  .lgl-sub { font-size: 14px; margin-top: 10px; max-width: 74%; }
  .lg-main { flex: none; min-height: 0; height: auto; margin-top: -22px; position: relative; z-index: 4; border-radius: 28px 28px 0 0; border-top: 3px solid var(--lg-ink); padding: 18px 22px 10px; align-items: start; overflow: visible; background: #FFFDF6; }
  .lg-card { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; gap: 0; max-width: 440px; }
  .lg-top { display: none; }
  .lg-lang { position: fixed; top: 12px; right: 14px; z-index: 6; }
  .lg-lbtn { padding: 6px 9px; font-size: 12px; min-height: 0; }
  .lg-form { gap: 10px; } .lg .stack { gap: 10px; }
  .lg .btn.primary, .lg .input, .g-btn { height: 48px; }
  .lg[data-mode="phone"] .lg-head, .lg[data-mode="phone"] .field > label { display: none; }
  .lg[data-mode="phone"] .field > label[for="otp"] { display: block; }
  .lg-form .tiny { font-size: 11px; line-height: 1.35; margin: 0; }
  .lg-swap, .lg-staff { font-size: 13px; padding-top: 0; border: 0; margin: 0; }
  .or { margin: 0; }
}
@media (max-width: 860px) and (max-height: 720px) { .lg-form .tiny.mute:first-of-type { display: none; } .lgl-sub { display: none; } }
@media (max-width: 380px) { .lg-lbtn { padding: 5px 7px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .lgl-blob, .lgl-word.swap, .lgl-sq path { animation: none; stroke-dashoffset: 0; } }

/* ---------- the ten-second quiz ---------- */
.lgl-stage { align-content: space-between; gap: 18px; min-height: 0; }
.lgt { position: relative; display: grid; gap: 10px; padding: 16px; border: 3px solid var(--lg-ink); border-radius: 22px; background: #fff; box-shadow: 6px 6px 0 var(--lg-ink); transform: rotate(-1deg); max-width: 520px; animation: lgIn .7s .2s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes lgIn { 0% { opacity: 0; transform: translateY(30px) rotate(3deg) scale(.94); } 100% { opacity: 1; transform: rotate(-1deg); } }
.lgt-chip { justify-self: start; margin: -30px 0 -2px -4px; padding: 5px 12px; border: 2.5px solid var(--lg-ink); border-radius: 99px; background: var(--lg-violet); color: #fff; font: 800 12px var(--font); letter-spacing: .04em; box-shadow: 2px 3px 0 var(--lg-ink); animation: lgWob 2.4s ease-in-out infinite; }
@keyframes lgWob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.05); } }
.lgt-q { font: 800 clamp(15px, 1.5vw, 19px)/1.3 var(--display); margin: 0; letter-spacing: -.01em; }
.lgt-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lgt-o { min-height: 46px; padding: 6px 4px; border: 2.5px solid var(--lg-ink); border-radius: 14px; background: var(--h); color: var(--lg-ink); font: 800 clamp(13px, 1.3vw, 16px)/1.15 var(--display); cursor: pointer; box-shadow: 0 4px 0 var(--lg-ink); transition: transform .08s, box-shadow .08s; }
.lgt-o:hover:not(:disabled) { transform: translateY(-2px); } .lgt-o:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--lg-ink); }
.lgt-o:disabled { cursor: default; opacity: .55; } .lgt-o.right { opacity: 1; background: #7EE0A2; animation: lgJump .5s ease; } .lgt-o.right::after { content: " ✓"; }
.lgt-o.wrong { background: #FFB3B3; animation: lgShake .4s ease; }
@keyframes lgShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes lgJump { 40% { transform: translateY(-8px) scale(1.06); } }
.lgt-fine { margin: 0; font: 600 10.5px var(--font); color: rgba(42, 30, 18, .55); }
.lgt-body { display: grid; gap: 10px; }
.lgt-verdict { margin: 0; font: 800 14px var(--display); color: #C2410C; } .lgt-verdict.yes { color: #0F8F5F; }
.lgt-big { margin: 0; font: 800 clamp(34px, 4vw, 52px)/1 var(--display); letter-spacing: -.03em; background: linear-gradient(95deg, #FF6B6B, #FFB703); -webkit-background-clip: text; background-clip: text; color: transparent; animation: lgBig .6s cubic-bezier(.3, 1.8, .5, 1) backwards; }
@keyframes lgBig { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lgt-why { margin: 0; font: 700 14px/1.35 var(--font); }
.lgt-act { display: flex; gap: 8px; }
.lgt-b { flex: 1; min-height: 42px; border: 2.5px solid var(--lg-ink); border-radius: 14px; background: var(--lg-gold); color: var(--lg-ink); font: 800 14px var(--font); cursor: pointer; box-shadow: 0 4px 0 var(--lg-ink); } .lgt-b.ghost { background: #fff; flex: .8; }
.lgt-b:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lg-ink); }
.lgt-bit { position: absolute; z-index: 5; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); border: 2px solid var(--lg-ink); pointer-events: none; animation: lgBit2 .75s ease-out forwards; }
@keyframes lgBit2 { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@media (max-width: 860px) {
  .lgl-big { font-size: min(9.6vw, 5.2dvh, 44px); line-height: 1.02; }
  .lgl-stage { flex: 1; justify-content: space-between; align-content: space-between; gap: 22px; padding-top: 6px; }
  .lgt { padding: 12px 12px 10px; gap: 8px; box-shadow: 4px 4px 0 var(--lg-ink); max-width: none; }
  .lgt-q { font-size: 14px; } .lgt-o { min-height: 42px; font-size: 13px; }
  .lgt-big { font-size: 34px; } .lgt-why { font-size: 13px; } .lgt-b { min-height: 38px; }
}
@media (max-width: 860px) and (max-height: 720px) { .lgl-big { font-size: min(8.8vw, 5dvh, 34px); } .lgt-chip { display: none; } .lg[data-mode="phone"] .lg-main .lg-form .tiny:last-child { display: none; } .lgl-stage { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .lgt, .lgt-chip, .lgt-big { animation: none; } }

@media (max-width: 860px) and (max-height: 720px) {
  .lgl-big { font-size: min(8.4vw, 4.6dvh, 32px); }
  .lgl-big .l3 { display: inline-block; margin-left: .25em; margin-bottom: .1em; }
  .lgl-sq { display: none; }
  .lgl-stage { gap: 8px; padding-top: 2px; }
  .lg-side.lgl { padding: 12px 20px 28px; }
  .lg-main { padding-top: 14px; } .lg-form, .lg .stack { gap: 8px; }
  .lg .btn.primary, .lg .input, .g-btn { height: 44px; }
  .lgt { padding: 10px 10px 8px; gap: 6px; } .lgt-o { min-height: 38px; } .lgt-fine { font-size: 9.5px; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .lgt-body { gap: 4px; } .lgt-verdict { font-size: 12px; } .lgt-big { font-size: 26px; } .lgt-why { font-size: 12px; line-height: 1.3; } .lgt-b { min-height: 34px; font-size: 13px; }
  .lgt-act { margin-top: 2px; }
}
@media (max-width: 860px) and (max-height: 650px) { .lgt-why { font-size: 11.5px; } .lgt-verdict { display: none; } .lgt-q { font-size: 13px; } }

/* ---------- layout: tagline and quiz sit together, centred; nothing under the language pill ---------- */
.lgl-stage { display: flex !important; flex-direction: column; justify-content: center; align-content: normal; gap: clamp(14px, 3dvh, 28px); }
.lgl-big .l1, .lgl-big .l2 { display: block; } .lgl-big .l2 { margin-top: .05em; }
@media (max-width: 860px) {
  .lg-side.lgl { padding-top: 14px; }
  .lgl-stage { padding-top: 8px; gap: 16px; }
  .lgl-big .l3 { display: block; margin-left: 0; margin-top: .14em; margin-bottom: .1em; }
  .lgl-big { font-size: min(11vw, 5.6dvh, 46px); }
}
@media (max-width: 860px) and (max-height: 720px) { .lgl-big { font-size: min(9vw, 4.7dvh, 33px); } .lgl-stage { gap: 12px; } }
@media (max-width: 860px) and (max-height: 650px) { .lgl-big { font-size: min(8.4vw, 4.4dvh, 29px); } .lgl-stage { gap: 8px; } }