/* Reset, app shell, screen scaffolding. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-app);
}

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--text);
  background: var(--bg-app);
  overflow: hidden;             /* each screen scrolls on its own */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- App shell ----------------------------------------------------------
   Column layout: scrolling screen area on top, navigation below it.
   The nav is a sibling of the scroller, so it never sits over content. */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: var(--app-max-width);
  margin: 0 auto;
  background:
    radial-gradient(120% 40% at 50% 0%, var(--bg-app-top) 0%, transparent 70%),
    var(--bg-app);
}

@media (min-width: 520px) {
  .app { border-inline: 1px solid var(--divider); }
}

/* Phone held sideways: use the whole width, clear of the notch. */
@media (orientation: landscape) and (max-height: 500px) {
  .app {
    max-width: none;
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    border-inline: 0;
  }
}

.screens {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: calc(var(--safe-top) + var(--space-5)) var(--gutter) var(--space-6);
  container-type: inline-size;
  /* Arcade room behind every tab; scrolls with the content and fades into the app color. */
  background: url("../../assets/ui/arcade-bg.webp") top center / 100% auto no-repeat local, var(--bg-app);
}

.screen[hidden] { display: none; }

/* Pixel-art screen titles (assets/ui/title-*.webp); the image's alt text is the heading. */
.screen__art-title { margin: var(--space-1) auto var(--space-4); width: min(80%, 380px); }
.screen__art-title img { width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(40, 140, 255, 0.45)); }
.screen__header .screen__art-title { margin: 0; width: auto; flex: 0 1 62%; max-width: 300px; }

.screen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: var(--space-2) 0 var(--space-3);
}

.screen__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: min(var(--fs-title), 11.5cqi);   /* shrinks on very narrow / zoomed screens */
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Phone-style scrolling: no visible scrollbar gutter. */
.screen { scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }