*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
:root {
  --bg: #0e1626;
  --bg-2: #142038;
  --panel: #18264180;
  --card: #1a2a47;
  --card-2: #213456;
  --line: #2b4270;
  --text: #e8eefc;
  --muted: #8ea0c4;
  --accent: #ffd23f;
  --red: #e94560;
  --green: #3fd34f;
  --blue: #4aa3ff;
  /* Silkscreen is loaded with the digits only (index.html): numbers use its clear 5, letters fall through to Pixelify */
  --pixel: 'Silkscreen', 'Pixelify Sans', monospace;
}
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* the pixel fonts draw "fi" as one wrong glyph ("Configurações"): no ligatures anywhere */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
  min-height: calc(100vh / var(--ui-zoom, 1));
}
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
canvas.sprite-canvas { image-rendering: pixelated; display: block; }
/* engine/sprites.js spriteBox: an HTML sprite, the frame cropped from the page as a background */
.sprite-box { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sprite-box.align-bottom { align-items: flex-end; }
.sprite-box > i { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
[hidden] { display: none !important; }

/* Scrollbars: thin, in the game's blue, on a clear track, everywhere (the window body and the side
   columns included); brighter while the pointer is over the box that scrolls. Hidden ones (menus that
   slide sideways) keep `scrollbar-width: none`. */
* { scrollbar-width: thin; scrollbar-color: #2f4a78 transparent; }
*:hover { scrollbar-color: #4b6aa8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2f4a78; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #4b6aa8; }
::-webkit-scrollbar-corner { background: transparent; }