/* Portal (/me/) — the site's half of the shared shell.
 *
 * The landing site keeps its OWN skin (Phosphor, and the 1985 ◀▶ 2200 era toggle) — that is the
 * collection rule: games share a shell, never a skin, and the brand home is no different. So this
 * file does not restyle anything; it maps the shell's --rvb-* contract onto the site's existing
 * tokens. Because those tokens are era-aware, the portal flips era for free: no duplicate palette,
 * nothing to keep in sync.
 *
 * Load order: site.css (defines the tokens) -> portal.css (maps them) -> revibed-chrome.css.
 */

:root {
  /* surfaces */
  --rvb-bg: var(--bg);
  --rvb-panel: var(--panel);
  --rvb-panel-solid: var(--panel2);
  --rvb-panel-2: var(--panel2);
  --rvb-panel-hover: var(--edge-soft);
  --rvb-inset: var(--bg);
  --rvb-highlight: var(--panel2);
  --rvb-scrim: rgba(0, 0, 0, 0.72);

  /* lines */
  --rvb-edge: var(--edge);
  --rvb-edge-dim: var(--edge-soft);

  /* text */
  --rvb-text-bright: var(--bright);
  --rvb-text: var(--txt);
  --rvb-text-dim: var(--txt2);
  --rvb-muted: var(--sub);

  /* action — the site already has a call-to-action colour and its ink: the INSERT COIN pair */
  --rvb-primary: var(--coin);
  --rvb-primary-hover: var(--bright);
  --rvb-on-primary: var(--coin-ink);

  /* semantic — the site has no danger/gold tokens of its own, so these two are fixed values
     chosen to read on both era grounds */
  --rvb-success: var(--bright);
  --rvb-danger: #e07050;
  --rvb-warn: #f0a32b;
  --rvb-gold: #f2c744;

  /* form & type */
  --rvb-radius: 3px;
  --rvb-radius-lg: 4px;
  --rvb-font-ui: var(--sans);
  --rvb-font-display: var(--mono);
  --rvb-track-label: 0.1em;
}

/* ---- portal layout (the only genuinely new styling on this page) ---- */
.portal { margin: 1.6rem 0 0; }
.portal h2 {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--sub); font-weight: 700; margin: 2rem 0 0.5rem; text-transform: uppercase;
}
.portal .rvb-rank-row { font-size: 0.86rem; }
.portal .rvb-empty { font-size: 0.82rem; }
.portal .rvb-btn, .portal .rvb-tab { font-size: 0.72rem; }
.portal .rvb-field { font-size: 0.68rem; }
.portal .rvb-field input, .portal .rvb-input { font-size: 0.9rem; }

/* the signed-in identity strip */
.portal-id {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem; margin-bottom: 0.4rem;
  background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 4px;
}
.portal-id .who { font-family: var(--mono); color: var(--bright); letter-spacing: 0.08em; }
.portal-id .spacer { flex: 1; }

/* one card per game in the catalogue */
.pgames { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .pgames { grid-template-columns: 1fr 1fr; } }
.pgame {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem;
  background: var(--panel); border: 1px solid var(--edge-soft); border-radius: 4px;
}
.pgame .gname { font-family: var(--mono); color: var(--bright); letter-spacing: 0.06em; }
.pgame .gline { color: var(--txt2); font-size: 0.84rem; }
.pgame .gsoon { color: var(--sub); font-size: 0.78rem; font-style: italic; }
.pgame .grow { display: flex; gap: 0.4rem; margin-top: 0.2rem; }