/* The game's own GUI look for every HTML surface the app draws over or before the game (touch HUD,
   first-load screen, sign-in, notices, rotate card): Toontown's blue rounded panels with a dark rim
   and a soft top highlight, yellow pill buttons with a dark olive outline that press down, yellow
   text with a dark drop shadow and green display titles. Colours were sampled from the client's own
   name-shop panel (make-a-toon) as the browser client draws it.
   Loaded after design/svt.css (whose components sit in a layer, so these unlayered rules win).
   Font: Chewy everywhere, the face Suits vs. Toons uses in place of the game's own lettering; it is
   the copy design/ already self-hosts (design/fonts, with its licence file), so it works offline
   and needs no CSP change. Pure CSS: no images.
   Always the game's colours: the game is drawn in one look whatever the system theme. */
:root {
  --tt-blue: #13a6fb;          /* panel fill */
  --tt-blue-hi: #6ccaff;       /* the panel's top highlight, button gloss */
  --tt-blue-lo: #0a86d6;       /* panel inner rim */
  --tt-blue-deep: #0a5fb4;     /* round button shade */
  --tt-blue-edge: #123f6e;     /* the dark outer edge */
  --tt-yellow: #fed01b;        /* button fill */
  --tt-yellow-hi: #fff27e;
  --tt-yellow-lo: #d5a402;
  --tt-olive: #46502c;         /* button outline and lip */
  --tt-on-yellow: #2b2608;
  --tt-text: #ffffff;          /* body text on blue */
  --tt-text-soft: #e2f4ff;
  --tt-label: #fff21c;         /* the game's yellow GUI lettering */
  --tt-green: #12f08a;         /* display titles (CHOOSE YOUR NAME) */
  --tt-green-hi: #9dffcf;
  --tt-green-deep: #006433;
  --tt-ink: #08213f;           /* text shadow and outline on blue */
  --tt-warning: #ffd21f;       /* callout edges on blue */
  --tt-danger: #ff6b5a;
  --tt-info: #8fe3ff;
  --tt-line: rgb(255 255 255 / 0.35);
  --tt-inset: rgb(6 45 100 / 0.45);   /* a darker strip sunk into a panel */
  --tt-inset-shadow: inset 0 0.15rem 0.3rem rgb(0 0 0 / 0.25);
  --tt-drop: drop-shadow(0 0.3rem 0 rgb(8 33 63 / 0.35));
  --tt-field: linear-gradient(to bottom, #e9f1f7, #ffffff 30%);   /* the name shop's white entry */
  --tt-on-field: #13161c;
  --tt-field-shadow: inset 0 0.25rem 0.35rem rgb(0 30 70 / 0.35), 0 2px 0 rgb(255 255 255 / 0.4);
  /* Round glossy buttons (make-a-toon's blue arrow balls; the yellow is the pill's fill): a white
     gloss over a lit ball, a lip under it that the press sinks into. */
  --tt-gloss: radial-gradient(ellipse 62% 34% at 50% 20%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 72%);
  --tt-ball-blue: var(--tt-gloss), radial-gradient(circle at 50% 40%, #5cc8ff, #149ff4 48%, #0a62c4 90%);
  --tt-ball-yellow: var(--tt-gloss), radial-gradient(circle at 50% 42%, #fff4a0, #fed01b 52%, #d9a300 92%);
  --tt-lift-blue: 0 var(--tt-lip) 0 var(--tt-blue-edge), 0 0.4rem 0.7rem rgb(0 20 50 / 0.4);
  --tt-lift-yellow: 0 var(--tt-lip) 0 var(--tt-olive), 0 0.4rem 0.7rem rgb(0 20 50 / 0.4);
  --tt-sunk-blue: inset 0 0.2rem 0.4rem rgb(0 20 60 / 0.5), 0 1px 0 var(--tt-blue-edge);
  --tt-sunk-yellow: inset 0 0.2rem 0.4rem rgb(90 60 0 / 0.5), 0 1px 0 var(--tt-olive);
  /* lettering on a ball or over the world: the game's dark outline all round */
  --tt-outline: 0 0.07em 0 var(--tt-ink), 0.07em 0 0 var(--tt-ink), -0.07em 0 0 var(--tt-ink), 0 -0.07em 0 var(--tt-ink),
    0.05em 0.05em 0 var(--tt-ink), -0.05em 0.05em 0 var(--tt-ink), 0.05em -0.05em 0 var(--tt-ink),
    -0.05em -0.05em 0 var(--tt-ink), 0 0.12em 0.04em var(--tt-ink);
  --tt-emboss: 0 1px 0 rgb(255 255 255 / 0.6);   /* dark text on yellow */
  /* the stick: a blue glass ring over the world, a yellow ball for the knob */
  --tt-pad: radial-gradient(circle, rgb(19 166 251 / 0.12) 0 52%, rgb(19 166 251 / 0.35) 68%, rgb(10 95 180 / 0.6) 100%);
  --tt-pad-ring: inset 0 0 0 0.3rem rgb(108 202 255 / 0.55), inset 0 0.5rem 0.8rem rgb(255 255 255 / 0.25),
    0 0.3rem 0.6rem rgb(0 20 50 / 0.35);
  --tt-sky-top: #2b8de6;
  --tt-sky-bottom: #a9defd;
  --tt-grass: #55c234;
  --tt-grass-deep: #3a9d27;

  --tt-font: "Chewy", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --tt-font-title: var(--tt-font);
  --tt-weight: 400;            /* Chewy has one weight: never fake-bold it (font-synthesis: none) */
  --tt-radius: 1.6rem;
  --tt-edge: 3px;
  --tt-lip: 4px;               /* the depth a button presses through */

  --tt-text-shadow: 0.05em 0.07em 0 var(--tt-ink), 0 0 0.12em color-mix(in srgb, var(--tt-ink) 70%, transparent);
  --tt-sky:
    radial-gradient(ellipse 9rem 3.2rem at 16% 20%, rgb(255 255 255 / 0.9) 60%, transparent 63%),
    radial-gradient(ellipse 6rem 2.4rem at 23% 16%, rgb(255 255 255 / 0.9) 60%, transparent 63%),
    radial-gradient(ellipse 11rem 3.6rem at 82% 30%, rgb(255 255 255 / 0.85) 60%, transparent 63%),
    radial-gradient(ellipse 7rem 2.6rem at 74% 26%, rgb(255 255 255 / 0.85) 60%, transparent 63%),
    radial-gradient(130% 34% at 22% 104%, var(--tt-grass) 66%, transparent 67%),
    radial-gradient(120% 30% at 88% 106%, var(--tt-grass-deep) 66%, transparent 67%),
    linear-gradient(to bottom, var(--tt-sky-top), var(--tt-sky-bottom) 80%);
}

/* ---- Panel: the name-shop plaque. Fill brightens toward the top edge; dark edge, inner rim. */
:is(#ttro-auth .plaque, .ttro-notice, .ttro-load__card, .ttro-rotate__card) {
  --rim: transparent;
  background:
    radial-gradient(90% 55% at 50% 0%, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 70%),
    linear-gradient(to bottom, #2bb6ff, var(--tt-blue) 45%, #1aa8f8 80%, #4cc0fb);
  color: var(--tt-text);
  border: var(--tt-edge) solid var(--tt-blue-edge);
  border-radius: var(--tt-radius);
  box-shadow:
    inset 0 0 0 0.3rem var(--tt-blue-lo),
    inset 0 0.55rem 0.4rem 0.3rem rgb(255 255 255 / 0.28),
    0 0.35rem 0 color-mix(in srgb, var(--tt-blue-edge) 70%, transparent),
    0 0.6rem 1.4rem rgb(0 20 50 / 0.35);
  font-family: var(--tt-font);
  font-weight: var(--tt-weight);
  font-synthesis: none;
  text-shadow: var(--tt-text-shadow);
}
:is(#ttro-auth .plaque, .ttro-notice, .ttro-load__card, .ttro-rotate__card) :is(.plaque__title) {
  font-family: var(--tt-font);
  font-weight: var(--tt-weight);
  color: var(--tt-label);
  letter-spacing: 0.01em;
}
:is(#ttro-auth, .ttro-notice, #ttro-load, #ttro-rotate) .muted { color: var(--tt-text-soft); }

/* ---- Yellow pill button (Submit, Pick-A-Name): glossy, olive outline, a lip it presses into. */
:is(#ttro-auth, .ttro-notice) .btn {
  border: var(--tt-edge) solid var(--tt-olive);
  border-radius: 999px;
  background:
    radial-gradient(80% 45% at 50% 18%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 75%),
    linear-gradient(to bottom, var(--tt-yellow-hi), var(--tt-yellow) 48%, #f2bd08 56%, #ffe23a);
  color: var(--tt-on-yellow);
  font-family: var(--tt-font);
  font-weight: var(--tt-weight);
  font-synthesis: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.55);
  box-shadow: inset 0 -0.18rem 0 var(--tt-yellow-lo), 0 var(--tt-lip) 0 var(--tt-olive), 0 0.4rem 0.6rem rgb(0 20 50 / 0.3);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
:is(#ttro-auth, .ttro-notice) .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: inset 0 -0.18rem 0 var(--tt-yellow-lo), 0 calc(var(--tt-lip) + 1px) 0 var(--tt-olive), 0 0.5rem 0.7rem rgb(0 20 50 / 0.3);
}
:is(#ttro-auth, .ttro-notice) .btn:active {
  transform: translateY(calc(var(--tt-lip) - 1px));
  filter: brightness(0.92);
  box-shadow: inset 0 0.15rem 0.2rem var(--tt-yellow-lo), 0 1px 0 var(--tt-olive);
}
:is(#ttro-auth, .ttro-notice) .btn:disabled {
  background: linear-gradient(to bottom, #e9edf2, #b9c4cf);
  border-color: #56636f;
  color: #3d4852;
  box-shadow: 0 1px 0 #56636f;
  transform: translateY(calc(var(--tt-lip) - 1px));
  filter: none;
}
:is(#ttro-auth, .ttro-notice) .btn:focus-visible { outline: 3px solid var(--tt-label); outline-offset: 3px; }

/* ---- Progress: a dark blue trough with a glossy yellow fill. */
:is(#ttro-load, #ttro-auth) .progress {
  height: 1.4rem;
  border: var(--tt-edge) solid var(--tt-blue-edge);
  background: linear-gradient(to bottom, #0a4f91, #0d68b8);
  box-shadow: inset 0 0.2rem 0.3rem rgb(0 0 0 / 0.35), 0 2px 0 rgb(255 255 255 / 0.25);
  color: var(--tt-yellow);
}
:is(#ttro-load, #ttro-auth) .progress::-webkit-progress-value {
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 55%),
    linear-gradient(to bottom, var(--tt-yellow-hi), var(--tt-yellow) 60%, var(--tt-yellow-lo));
  box-shadow: inset -2px 0 0 var(--tt-olive);
}
:is(#ttro-load, #ttro-auth) .progress::-moz-progress-bar {
  background: linear-gradient(to bottom, var(--tt-yellow-hi), var(--tt-yellow) 60%, var(--tt-yellow-lo));
}
:is(#ttro-load, #ttro-auth) .progress:indeterminate {
  background:
    linear-gradient(90deg, transparent 0 35%, var(--tt-yellow) 35% 65%, transparent 65%),
    linear-gradient(to bottom, #0a4f91, #0d68b8);
  background-size: 300% 100%, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  :is(#ttro-auth, .ttro-notice) .btn { transition: none; }
}