/* The shell around the game canvas (build_app.py injects it after design/svt.css and look/toon.css):
   pygbag's loading box and svtweb.js's notices, svt-site's components (plaque, btn) drawn in the game's
   GUI look (toon.css: blue panel, yellow pill button); only placement and the chip live here. */

/* components.css lays body out as a flex column; the game page is a full-screen canvas instead.
   pygbag's custom_site() sets an inline grey body; the sky shows until the first frame covers it. */
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--tt-sky) !important;
}
body { display: block; }
#canvas { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; }

/* pygbag's #infobox ("Loading, please wait ...", "installing <pkg>"): a .chip.chip--busy (build_web.inject adds the
   classes) at the bottom. Its show_infobox() centres it with inline left/top, hence the !important. */
#infobox {
  left: 50% !important; top: auto !important; bottom: max(var(--space-6), env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%); max-width: calc(100vw - 2 * var(--space-6));
  background: var(--tt-blue); color: var(--tt-text); border: var(--tt-edge) solid var(--tt-blue-edge);
  box-shadow: var(--tt-lift-blue); text-shadow: var(--tt-outline); font: var(--tt-weight) var(--text-base)/var(--leading-snug) var(--tt-font);
  font-synthesis: none;
}
#infobox::before { border-color: var(--tt-blue-edge); border-top-color: var(--tt-yellow); }
/* the sign-in card says what is happening while it is up */
body:has(#ttro-auth:not([hidden])) #infobox { display: none !important; }

/* svtweb.js notices (.plaque): a banner (update available) or a box that waits for the tap (version eject) */
.ttro-notice { position: fixed; z-index: 2147483000; margin: 0; }
.ttro-notice > p { margin: 0 0 var(--space-4); }
.ttro-banner {
  left: 50%; bottom: max(var(--space-6), env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  max-width: calc(100vw - 2 * var(--space-6));
}
.ttro-banner { border-radius: var(--radius-pill); }
.ttro-banner .plaque__title { margin: 0; font: var(--tt-weight) var(--text-lg)/var(--leading-snug) var(--tt-font); }
.ttro-box .plaque__title { font-size: var(--text-xl); }
.ttro-box > p { font-size: var(--text-lg); }
.ttro-box {
  left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
  width: min(28rem, calc(100vw - 2 * var(--space-6)));
}

/* svtweb.js first-load screen (#ttro-load): wordmark and a plaque with svt-site's .progress, over the
   sky, from page load until the game draws. It replaces pygbag's chip while it is up. */
#ttro-load {
  --tl-pad: clamp(var(--space-4), 4vmin, var(--space-8));
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 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(--tl-pad), env(safe-area-inset-top)) max(var(--tl-pad), env(safe-area-inset-right))
           max(var(--tl-pad), env(safe-area-inset-bottom)) max(var(--tl-pad), env(safe-area-inset-left));
}
body:has(#ttro-load) #infobox, body:has(#ttro-load-failed) #infobox { display: none !important; }
.ttro-load__mark { flex: none; filter: var(--tt-drop); }
.ttro-load__mark img { max-width: 70vw; }
.ttro-load__card {
  width: min(100% - 2 * var(--rim-width), 30rem); flex: none; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ttro-load__card .plaque__title { margin: 0; }
.ttro-load__detail { margin: 0; font-size: var(--text-base); }
.ttro-load__detail:empty { display: none; }
@media (max-height: 34rem) { .ttro-load__mark { display: none; } }

/* Under the sign-in screen it is a strip along the bottom, over it, so the download shows while signing in */
body:has(#ttro-auth:not([hidden])) #ttro-load {
  z-index: 21; top: auto; background: none; pointer-events: none; padding-top: 0;
}
body:has(#ttro-auth:not([hidden])) .ttro-load__mark,
body:has(#ttro-auth:not([hidden])) .ttro-load__detail + .ttro-load__detail { display: none; }
body:has(#ttro-auth:not([hidden])) .ttro-load__card { padding: var(--space-3) var(--space-5); gap: var(--space-2); }
body:has(#ttro-load) #ttro-auth { padding-bottom: calc(var(--space-24) + var(--space-6) + env(safe-area-inset-bottom)); }
body:has(#ttro-auth:not([hidden])) #ttro-load { padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
body:has(#ttro-auth:not([hidden])) .ttro-load__detail { font-size: var(--text-sm); }
body:has(#ttro-auth:not([hidden])) .ttro-load__card .plaque__title { display: none; }