/* Base reset for the vanilla player app. Distilled from frontend/src/styles.css:
   only the html/body reset, the Telegram fullscreen viewport-height chain, the
   box-sizing reset and the dark body surface are kept. Every .mat-mdc-* Material /
   snackbar rule from styles.css is DROPPED - the vanilla app has no Angular Material.
   Loads first (before tokens.css and shell.css) so the reset is in place before any
   component or kit CSS. The --app-* tokens this file reads are declared in tokens.css
   (loaded next); the 100dvh fallback in the height chain covers the gap on a plain
   web launch where --tg-viewport-height has not been published yet. */

/* Anchor the rem scale at a comfortable 16px so all rem sizing reads larger. */
html {
  font-size: 16px;
}

/* Reset margins and set the base UI font. */
html,
body {
  margin: 0;
  padding: 0;
  /* In a Telegram Mini App, height:100% / 100vh resolve against the static
     pre-fullscreen viewport on iOS and leave black bars when the app goes
     fullscreen. --tg-viewport-height is the live fullscreen height Telegram
     publishes (mirrored from JS in index.html); 100dvh is the dynamic-viewport
     fallback for a plain web / PWA launch. This is what fills the screen. */
  height: var(--tg-viewport-height, 100dvh);
  min-height: var(--tg-viewport-height, 100dvh);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Box sizing applies to everything for predictable layout math. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Page background follows the active theme surface color (gorilla dark, the only
   theme the player ships); base body text sits at one rem with a relaxed line
   height for readability. */
body {
  background-color: var(--app-bg);
  color: var(--app-text-primary);
  font-size: 1rem;
  line-height: 1.5;
}