:root {
  --color-bg: #0f1a30;
  --color-bg-deep: #0a1322;
  --color-panel: #16233d;
  --color-panel-border: #2a3a5c;
  --color-text: #e8edf7;
  --color-text-dim: #93a2c2;
  --color-accent: #7cff6b;
  --color-accent-dim: #4a9e40;
  --color-danger: #ff6b6b;
  --color-warning: #ffd166;
  --color-input-bg: #0c1626;

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --tap-min: 48px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg-deep);
  color: var(--color-text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  /* Without this, Chrome/Android's "font boosting" heuristic inflates text
     size inside narrow columns (modals, the 3-column HUD row) on a real
     phone — invisible in desktop dev tools or emulated mobile viewports,
     which don't run that heuristic, only on an actual device. That's what
     was making modal text huge/unreadable and the turn badge push into the
     score digits on a real phone while every emulated check looked fine. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

h1, h2, h3, p {
  margin: 0;
}

/* Every modal title and menu section heading is an <h2> with no size of its
   own set anywhere — it was rendering at the browser's default h2 size
   (much larger than anything else in the UI), which is fine in a full-width
   page but way too big for a ~300px-wide modal on a phone: long titles like
   "Играть с системой — выберите предмет" wrapped into 3-4 giant lines and
   blew past the panel's edges. .auth-box h1 (26px) is the one deliberately
   big page title; this is everything else. */
h2 {
  font-size: 18px;
  font-weight: 700;
}

button, input, select {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Shown by default, hidden by main.js once the session-restore check on boot
   decides which real screen to show — otherwise the splash/login screen would
   flash briefly before an existing session routes past it. */
.boot-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-deep);
  z-index: 20;
}

.boot-loading .spinner {
  width: 28px;
  height: 28px;
  margin-right: 0;
}

.screen {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}