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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-family);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.page-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

button {
  font-family: var(--font-family);
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  opacity: 0.8;
}

/* === Page container === */
.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  flex-shrink: 0;
  transform-origin: center center;
  overflow: hidden;
  background: var(--color-bg);
}

/* === Screen system === */
.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.active {
  display: block;
}

/* === Utility === */
.hidden { display: none !important; }
.text-yellow { color: var(--color-text-yellow); }
.text-green { color: var(--color-text-green); }
.text-muted { color: var(--color-text-muted); }
.text-dim { color: var(--color-text-dim); }
.text-hint { color: var(--color-text-hint); }

/* === Overlay === */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: none;
}

.overlay.active {
  display: block;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
}