/* EVERYTHING (#727): der Rahmen um die zehn Spiele. Setzt in :root nur --hue (Hub-Blau).
   Waehrend gespielt wird, ist die Seite NUR das iframe (das Spiel bringt Topbar, Marken-Zeile,
   Punkte selbst mit). Erst der Abschluss zeigt die eigene .app. */
:root { --hue: 255; }

::selection { background: var(--accent-soft); color: var(--ink); }
html { scrollbar-color: var(--line-strong) transparent; }
html, body { height: 100%; overflow: hidden; }

.every {
  position: relative;
  width: 100%; max-width: 460px;
  height: 100vh; height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper);
}
.every__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  background: var(--paper);
}
/* Das vorgeladene Spiel: volle Groesse (die Spiele messen ihre Buehne beim Laden), aber
   unsichtbar und ohne Zeiger, bis es dran ist. */
.every__frame[data-pre] { visibility: hidden; pointer-events: none; }

/* Abschluss: die .app scrollt als Ganzes, wenn die zehn Zeilen nicht passen */
html[data-done], html[data-done] body { overflow: auto; }
.app { min-height: 100vh; min-height: 100dvh; }

.final { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); width: 100%; }
.final p { margin: 0; }
.final .label { text-align: center; }
.final .summary { margin-top: var(--s2); }
.srow__what a {
  color: var(--ink); text-decoration: none; font-weight: 650;
}
.srow__what a::after { content: ' \203A'; color: var(--ink-3); font-weight: 400; }
.srow__what a:hover, .srow__what a:focus-visible { color: var(--accent); outline: none; }
.srow__what small { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
.toast {
  min-height: 1.1em; text-align: center;
  font-size: var(--t-xs); font-weight: 600; color: var(--good);
  max-width: 32ch; line-height: 1.4; margin-inline: auto;
}
.dock .share { width: 100%; }
.dock .btn--ghost { text-decoration: none; align-self: center; }

@media (max-height: 620px) {
  .final { gap: var(--s2); }
  .srow { padding: var(--s2) 0; }
}