/* Sign-in screen (PWA P5), built by auth.js as #ttro-auth out of svt-site's components (wordmark, plaque,
   toon-title, btn, callout; design/svt.css, synced by tools/web/sync_design.py), drawn in the game's own
   GUI look (look/toon.css: blue panel, yellow pill button, green title). Only the overlay's layout and
   the pieces with no shared rule live here. */

#ttro-auth {
  --ta-pad: clamp(var(--space-3), 4vmin, var(--space-8));
  position: fixed; inset: 0; z-index: 20; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-2), 3vmin, var(--space-6));
  background: var(--tt-sky);
  color: var(--tt-text); font: var(--tt-weight) var(--text-base)/var(--leading-snug) var(--tt-font);
  font-synthesis: none;
  padding: max(var(--ta-pad), env(safe-area-inset-top)) max(var(--ta-pad), env(safe-area-inset-right))
           max(var(--ta-pad), env(safe-area-inset-bottom)) max(var(--ta-pad), env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}
/* centred, but scrolls from the top when taller than the screen (justify-content: center clips it) */
#ttro-auth > :first-child { margin-top: auto; }
#ttro-auth > :last-child { margin-bottom: auto; }
#ttro-auth[hidden], #ttro-auth [hidden] { display: none; }
.ta-wordmark { flex: none; filter: var(--tt-drop); }
.ta-wordmark img { max-width: 70vw; }
.ta-card {
  width: min(100% - 2 * var(--rim-width), 30rem); flex: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: clamp(var(--space-4), 4vmin, var(--space-8)) clamp(var(--space-4), 4vmin, var(--space-8));
}
.ta-card > * { margin: 0; }
/* the game's display title: green lettering, dark green rim (make-a-toon's CHOOSE YOUR NAME) */
.ta-card .toon-title {
  --toon-fill-top: var(--tt-green-hi); --toon-fill: var(--tt-green); --toon-rim: var(--tt-green-deep); --toon-ink: var(--tt-ink);
  font: 400 clamp(1.5rem, 1.1rem + 2.2vmin, var(--text-h2)) / var(--leading-tight) var(--tt-font-title);
  letter-spacing: 0.04em; text-shadow: none; filter: drop-shadow(0.05em 0.07em 0 var(--tt-ink));
  margin-bottom: var(--space-1);
}
.ta-card .toon-title::before { -webkit-text-stroke-width: 0.16em; }
.ta-card .toon-title::after { -webkit-text-stroke-width: 0.07em; }
.ta-msg { font-size: var(--text-lg); color: var(--tt-label); }
/* news rather than a step (callout--warning/danger/info): a darker inset strip with a coloured edge */
.ta-card .callout {
  align-self: stretch; text-align: start;
  --callout-edge: var(--tt-label);
  background: var(--tt-inset); color: var(--tt-text);
  border: 2px solid var(--tt-line); border-left: 0.5rem solid var(--callout-edge);
  border-radius: var(--radius-md); font-size: var(--text-base);
  box-shadow: var(--tt-inset-shadow);
}
.ta-card .callout--warning { --callout-edge: var(--tt-warning); }
.ta-card .callout--danger { --callout-edge: var(--tt-danger); }
.ta-card .callout--info { --callout-edge: var(--tt-info); }
/* the code: a white entry field like the name shop's, sunk into the panel */
.ta-card .device-code {
  margin: 0; background: var(--tt-field); color: var(--tt-on-field);
  border: var(--tt-edge) solid var(--tt-blue-edge); border-radius: var(--radius-md);
  box-shadow: var(--tt-field-shadow);
  text-shadow: none; font-size: clamp(var(--text-lg), 5.5vmin, var(--text-2xl)); padding: var(--space-2) var(--space-6);
}
.ta-hint, .ta-status { font-size: var(--text-sm); overflow-wrap: anywhere; }
/* one line on a phone: .btn--lg's padding shrinks before the label wraps */
.ta-btn { max-width: 100%; padding-inline: clamp(var(--space-4), 5vw, var(--space-8)); white-space: nowrap; touch-action: manipulation; }
.ta-g {  /* Google's G on a white disc, as their sign-in branding asks: their colour, not ours */
  width: 1.1em; height: 1.1em; padding: 0.2em; flex: none; background: white; border-radius: 50%;
  border: 2px solid var(--tt-olive);
}
#ttro-auth[data-state="starting"] .ta-msg, #ttro-auth[data-state="signing-in"] .ta-msg,
#ttro-auth[data-state="code"] .ta-status { animation: ta-pulse 1.4s ease-in-out infinite; }
@keyframes ta-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { #ttro-auth * { animation: none !important; transition: none !important; } }
@media (max-height: 34rem) {
  .ta-wordmark { display: none; }
  .ta-card { gap: var(--space-2); }
  .ta-card .btn--lg { min-height: var(--tap); font-size: var(--text-base); }
  .ta-msg { font-size: var(--text-base); }
}
/* a landscape phone: the code and its button share a row so the card fits over the download strip */
@media (max-height: 30rem) and (min-width: 36rem) {
  .ta-card { width: min(100% - 2 * var(--rim-width), 44rem); flex-flow: row wrap; justify-content: center; column-gap: var(--space-4); }
  .ta-card > :not(.ta-code, .ta-btn) { flex-basis: 100%; }
}