/* Login + register (new UI, "A · Wall"). Restyles the existing auth markup (same ids, forms and handlers) under .tba.
   Form on the right, a slowly moving wall of game covers on the left; on phones the wall becomes a short strip on top. */
.tba { --s1:#151518; --s2:#1A1A1E; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --brand:#F39125; --green:#19E68C; --red:#FB7185;
  --tx:#F4F4F5; --tx2:#B4B4BD; --tx3:#85858F; --spring:cubic-bezier(.34,1.56,.64,1);
  font-family:Cairo, sans-serif; color:var(--tx); }
.tba.auth-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); animation:none; }
.tba .formside { order:0; padding:104px 24px 56px; }
.tba .showcase { order:1; border:0; border-inline-start:1px solid var(--line); isolation:isolate; }
.tba .showcase::after { z-index:1; box-shadow:none; background:linear-gradient(270deg, rgba(11,11,13,.95), rgba(11,11,13,.55) 45%, rgba(11,11,13,.85)), radial-gradient(60% 50% at 50% 60%, rgba(243,145,37,.18), transparent); }

/* cover wall */
.tba-wall { position:absolute; inset:-10% -20%; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; transform:rotate(-12deg); }
.tba-wall .col { display:flex; flex-direction:column; gap:14px; animation:tba-up 40s linear infinite; }
.tba-wall .col:nth-child(even) { animation-direction:reverse; animation-duration:52s; }
.tba-wall img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:14px; display:block; background:var(--s2); }
@keyframes tba-up { to { transform:translateY(-50%); } }
.tba-copy { position:absolute; z-index:2; inset-inline:40px; bottom:56px; text-align:right; }
.tba-copy h2 { margin:0; font-size:clamp(30px, 3.6vw, 46px); font-weight:900; line-height:1.3; color:#fff; }
.tba-copy h2 em { font-style:normal; color:var(--brand); }
.tba-copy p { margin:8px 0 0; color:var(--tx2); font-weight:700; font-size:16px; }

/* card */
.tba .gcard { max-width:440px; }
.tba .gcard::before, .tba .gcard::after { display:none; }
.tba .gcard-inner { background:none; border:0; box-shadow:none; padding:0; animation:none; text-align:right; }
.tba-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; margin-bottom:18px; border-radius:16px; background:var(--s1); border:1px solid var(--line2); }
.tba-tabs a { min-height:44px; display:grid; place-items:center; border-radius:11px; font:900 15px Cairo, sans-serif; color:var(--tx2); text-decoration:none; transition:background .2s, color .2s; }
.tba-tabs a:hover { color:#fff; }
.tba-tabs a[aria-current="page"] { background:var(--s2); color:#fff; box-shadow:inset 0 0 0 1px var(--line2); }
.tba .chead { text-align:right; margin-bottom:16px; }
.tba .chead .badge { display:none; }
.tba .chead h1, .tba .chead h2 { margin:0; font:900 clamp(26px, 3.4vw, 34px)/1.35 Cairo, sans-serif; color:#fff; }
.tba .chead h1 em, .tba .chead h2 em { color:var(--brand); text-shadow:none; }
.tba .chead p { margin:4px 0 0; font:600 15px Cairo, sans-serif; color:var(--tx2); }

/* fields */
.tba .afield { margin-bottom:14px; }
.tba .afield label { font:800 14px Cairo, sans-serif; color:var(--tx2); margin-bottom:6px; gap:10px; }
.tba .afield label .ar { color:var(--tx2); font-weight:800; }
.tba .inputwrap .ic, .tba .inputwrap .ic-wa, .tba .inputwrap > svg:not(.tba-ok) { display:none; }
.tba .inputwrap input { width:100%; min-height:50px; padding:0 14px; border-radius:12px; background:var(--s1); border:1px solid var(--line2); color:#fff; font:700 16px Cairo, sans-serif; outline:none; box-shadow:none; transition:border-color .2s, box-shadow .2s; }
.tba .inputwrap input[type="email"], .tba .inputwrap input[type="tel"], .tba .inputwrap input[type="password"] { direction:ltr; text-align:left; font-family:'JetBrains Mono', monospace; }
.tba .inputwrap input:focus, .tba .inputwrap input:focus-visible { border-color:var(--brand); background:var(--s1); box-shadow:0 0 0 3px rgba(243,145,37,.2); }
.tba .inputwrap input[aria-invalid="true"] { border-color:var(--red); }
.tba .inputwrap input[type="password"] { padding-right:52px; }
.tba .eye { right:4px; color:var(--tx3); border-radius:10px; }
.tba .eye:hover { color:#fff; } .tba .eye:focus-visible { outline:2px solid #fff; }
.tba .forgot-link { font:800 13px Cairo, sans-serif; color:var(--brand); text-decoration:none; }
.tba .hint { font:600 12.5px Cairo, sans-serif; color:var(--tx3); margin:6px 0 0; } .tba .hint i { display:none; }

/* buttons */
.tba .acta { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:14px; background:var(--brand); color:#0b0b0d; font:900 16px Cairo, sans-serif; letter-spacing:0; box-shadow:0 10px 28px rgba(243,145,37,.3); transition:transform .2s var(--spring), box-shadow .2s; }
.tba .acta::after { display:none; }
.tba .acta:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(243,145,37,.45); filter:none; }
.tba .google-btn { width:100%; min-height:52px; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:14px; background:#fff; color:#1f1f1f; font:800 16px Cairo, sans-serif; cursor:pointer; transition:transform .2s var(--spring), box-shadow .2s; }
.tba .google-btn:hover { background:#fff; border:0; transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,255,255,.12); }
.tba .google-btn svg { width:20px; height:20px; }
.tba .or-divider { margin:16px 0; color:var(--tx3); font:700 13px Cairo, sans-serif; letter-spacing:0; }
.tba .btn-ghost { min-height:52px; min-width:52px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid var(--line2); color:#fff; }
.tba .acta:focus-visible, .tba .google-btn:focus-visible, .tba .btn-ghost:focus-visible, .tba-tabs a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.tba .perks, .tba .secure-chip { display:none; }
.tba .foot-link { margin-top:18px; font:700 14px Cairo, sans-serif; color:var(--tx3); }
.tba .foot-link a { color:var(--brand); }

/* register steps: one progress bar instead of dots */
.tba .quest { margin:0 0 16px; }
.tba .qsteps { display:none; }
.tba .steplabels { display:flex; justify-content:space-between; gap:8px; margin:0; padding-top:10px; position:relative; }
.tba .steplabels::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; border-radius:99px; background:rgba(255,255,255,.08); }
.tba .steplabels::after { content:""; position:absolute; top:0; right:0; width:50%; height:6px; border-radius:99px; background:var(--brand); transition:width .4s; }
.tba .quest:has(#sl-2.on) .steplabels::after { width:100%; }
.tba .steplabels span { font:800 13px Cairo, sans-serif; letter-spacing:0; text-transform:none; color:var(--tx3); }
.tba .steplabels span.on { color:#fff; }
.tba .stepnav { gap:10px; }
.tba .check-pulse { display:none !important; }
.tba .pw-label { font:700 12.5px Cairo, sans-serif; }

/* Google finish panel */
.tba #google-identity-card { border-radius:14px !important; }
.tba #gc-modal-alert, .tba #auth-modal-alert { font-size:13.5px; }

@media (max-width: 900px) {
  .tba.auth-split { grid-template-columns:minmax(0,1fr); grid-template-rows:150px auto; }
  .tba .showcase { display:block; order:-1; border:0; }
  .tba .tba-copy { display:none; }
  .tba .formside { padding:24px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { .tba-wall .col { animation:none; } .tba * { transition:none !important; } }

/* ===== polish (assets/auth-fx.js): 2 covers react · 4 rotating word · 5 smart fields ===== */
.tba .tba-copy { pointer-events:none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tba-wall img { position:relative; transition:transform .5s var(--spring), box-shadow .5s ease, filter .5s ease; will-change:transform; }
  .tba-wall img:hover { transform:scale(1.07); z-index:2; filter:saturate(1.15) brightness(1.1); box-shadow:0 22px 50px rgba(0,0,0,.6), 0 0 0 2px var(--brand), 0 0 40px rgba(243,145,37,.45); }
}
.tba-rot { display:inline-grid; vertical-align:bottom; justify-items:start; transition:width .55s cubic-bezier(.2,.8,.2,1); }
.tba-rot span { grid-area:1 / 1; white-space:nowrap; color:var(--brand); opacity:0; transform:translateY(.4em); transition:opacity .45s ease, transform .55s var(--spring); }
.tba-rot span.on { opacity:1; transform:none; }
.tba-rot span.out { opacity:0; transform:translateY(-.4em); transition:opacity .3s ease, transform .4s ease; }
.tba .afield:focus-within > label { color:#fff; }
.tba .inputwrap.tba-checkable input { padding-right:44px; }
.tba .tba-ok { position:absolute; right:14px; top:50%; width:20px; height:20px; color:var(--green); opacity:0; transform:translateY(-50%) scale(.4); transition:opacity .25s ease, transform .35s var(--spring); pointer-events:none; }
.tba .inputwrap.is-valid .tba-ok { opacity:1; transform:translateY(-50%) scale(1); }
.tba .inputwrap.is-valid input:not(:focus) { border-color:rgba(25,230,140,.45); }
.tba .inputwrap input[aria-invalid="true"] ~ .tba-ok { opacity:0; }
.tba .tba-caps { position:absolute; right:52px; top:50%; transform:translateY(-50%) scale(.9); padding:2px 9px; border-radius:99px; background:rgba(255,200,87,.14); border:1px solid rgba(255,200,87,.4); color:#FFC857; font:800 11.5px Cairo, sans-serif; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .25s var(--spring); }
.tba .tba-caps:empty { padding:0; border:0; }
.tba .inputwrap.caps-on .tba-caps { opacity:1; transform:translateY(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .tba-rot, .tba-rot span, .tba .tba-ok, .tba .tba-caps { transition:none; } }

/* rotating headline lines: every line sits in the same grid cell, so the block keeps the tallest line's height */
.tba-copy h2.tba-lines { display:grid; }
.tba-lines > span { grid-area:1 / 1; align-self:end; opacity:0; transform:translateY(.35em); transition:opacity .5s ease, transform .6s var(--spring); }
.tba-lines > span.on { opacity:1; transform:none; }
.tba-lines > span.out { opacity:0; transform:translateY(-.35em); transition:opacity .35s ease, transform .45s ease; }
.tba-lines em { font-style:normal; color:var(--brand); }
@media (prefers-reduced-motion: reduce) { .tba-lines > span { transition:none; } }

/* ===== mascot stage (assets/auth-robot.js): the left side is the robot's: spotlight, rings, floor, headline ===== */
.tba .showcase { background:radial-gradient(46% 38% at 50% 40%, rgba(243,145,37,.22), transparent 72%),
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0 / 26px 26px,
  linear-gradient(180deg,#0E0E11,#0B0B0D); overflow:hidden; }
.tba .showcase::before, .tba .showcase::after { display:none; }
.tba-stage { position:absolute; inset:0 0 190px; display:grid; place-items:center; z-index:1; pointer-events:none; }
.tba-stage .tba-ring { position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid rgba(243,145,37,.20); transform:translate(-50%,-50%); animation:tba-ring 6s ease-in-out infinite; }
.tba-stage .r1 { width:430px; height:430px; }
.tba-stage .r2 { width:580px; height:580px; border-color:rgba(243,145,37,.12); animation-delay:-2s; }
.tba-stage .r3 { width:740px; height:740px; border-color:rgba(243,145,37,.07); animation-delay:-4s; }
@keyframes tba-ring { 50% { transform:translate(-50%,-50%) scale(1.035); } }
.tba-floor { position:absolute; left:50%; top:calc(50% + var(--bot, 320px) * .5 - 6px); width:calc(var(--bot, 320px) * .9); height:calc(var(--bot, 320px) * .13);
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(243,145,37,.55), rgba(243,145,37,.14) 62%, transparent); }
.tba-bot { position:relative; z-index:2; pointer-events:auto; width:var(--bot, 320px); height:var(--bot, 320px); }
.tba .tba-copy { z-index:3; text-align:center; bottom:44px; }
.tba .tba-copy h2.tba-lines { justify-items:center; }
.tba .tba-copy h2.tba-lines > span { white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .tba-stage .tba-ring { animation:none; } }
@media (max-width: 900px) {
  .tba.auth-split { grid-template-rows:200px auto; }
  .tba-stage { inset:64px 0 0; }
  .tba-stage .r2, .tba-stage .r3 { display:none; }
  .tba-stage .r1 { width:200px; height:200px; }
}
@media (min-width: 901px) {
  .tba .showcase { position:sticky; top:0; align-self:start; height:100vh; min-height:560px; }
}
/* small laptops / tablets: the page's old rule hides the panel up to 1024px; keep the robot stage from 901px */
@media (min-width: 901px) and (max-width: 1024px) {
  .tba .showcase { display:block; }
}