/* ══ base ════════════════════════════════════════════════════════════════
 * The reset, the sheet the whole game is drawn on, the three faces, and the
 * handful of browser-owned surfaces (links, selection, scrollbars) that would
 * otherwise arrive in the platform's colors. Nothing here is a component.
 */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Off screen but still mounted - for a room of a dialog whose half-filled form
   must survive the player flipping away and back. `!important` because it must
   beat whatever display the element's own class gave it. */
.hidden { display: none !important; }
body {
  background-color: var(--bg);
  /* The sheet Orbis is drawn on. One dot per 26px tile: too faint to look at,
     just present enough that the cards read as lying *on* something. It is
     fixed rather than scrolling, so the page moves over the world instead of
     dragging it along. */
  background-image: radial-gradient(var(--panel-3) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 var(--font);
  font-weight: 600;
  min-height: 100vh;
  min-height: 100dvh;
  /* A game of small cards and long names: nothing may push the page sideways. */
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* Anything that names something is set in the display face. Headings are not
   given a weight here - each call site picks one - but they all share the
   letterforms and the tightened tracking, which is what makes a title read as
   a title at 15px as well as at 30px. */
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.01em; }
/* Figures that get compared against other figures. Tabular by default: a column
   of prices that does not line up is a column you cannot scan. */
.num, .orb-amount, .bar-val, .rail-value, .rail-num, .score, .when,
.shelf-price, .qty-badge, .amount-field input, .price-input {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: -.02em;
}
/* Orbis draws its own doorways - a handle, a shelf, a byline - as buttons, so
   real anchors are rare and were left at the browser's defaults: bright blue
   and underlined, which is a hole punched through a dark card. They read like
   the rest of the text and underline when reached for. */
a { color: var(--link); text-decoration: none; border-radius: var(--r-sm); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: rgba(75, 123, 236, .4); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }