/* Portal (/me/) — the AFTER HOURS half of the shared shell (28 Aug 2026).
 *
 * The collection rule survives the redesign: games share a shell, never a skin. This
 * file maps the shell's --rvb-* contract onto the arcade tokens (arcade.css defines
 * them), then adds the page's own flavour: the signed-out form is the arcade's paper
 * MEMBERSHIP CARD (the corkboard note on the homepage promises exactly that), and the
 * signed-in surfaces are dark back-room panels with the amber INSERT-COIN action pair.
 *
 * Load order: arcade.css (tokens) -> portal-arcade.css (map + page) -> revibed-chrome.css.
 */

:root {
  /* surfaces */
  --rvb-bg: var(--room);
  --rvb-panel: var(--panel);
  --rvb-panel-solid: #0c0f15;
  --rvb-panel-2: #0c0f15;
  --rvb-panel-hover: #1a2028;
  --rvb-inset: #04060a;
  --rvb-highlight: #181d25;
  --rvb-scrim: rgba(0, 0, 0, 0.72);

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

  /* text */
  --rvb-text-bright: var(--ink);
  --rvb-text: #b9c4cd;
  --rvb-text-dim: var(--dim);
  --rvb-muted: var(--faint);

  /* action — the arcade's INSERT-COIN pair: amber button, dark ink */
  --rvb-primary: var(--amber);
  --rvb-primary-hover: #ffc95e;
  --rvb-on-primary: #2b1d04;

  /* semantic */
  --rvb-success: var(--neon);
  --rvb-danger: #e07050;
  --rvb-warn: var(--amber);
  --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 ---- */
.portal { max-width: 56rem; margin: 1.2rem auto 0; padding: 0 .25rem; }
.portal h2 {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.26em;
  color: var(--faint); font-weight: 700; margin: 2.2rem 0 0.6rem; text-transform: uppercase;
}
.portal .rvb-rank-row { font-size: 0.86rem; }
.portal .rvb-empty { font-size: 0.82rem; color: var(--faint); }
.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; }
#p-flash { max-width: 56rem; margin: 0 auto; padding: 0 .25rem; }

/* ---- signed out: the membership card at the counter ---- */
.portal .rvb-tabs { max-width: 24rem; margin: 0.4rem auto 1.1rem; display: flex; gap: 1rem; justify-content: center; }
.portal .rvb-tab {
  background: none; border: 1px solid var(--edge); color: var(--faint); cursor: pointer;
  font-family: var(--mono); letter-spacing: 0.14em; padding: 0.45rem 0.9rem; border-radius: 3px;
}
.portal .rvb-tab.active { color: var(--neon); border-color: var(--neon); }
.portal form#p-form {
  position: relative; max-width: 24rem; margin: 0 auto; padding: 1.7rem 1.4rem 1.5rem;
  background: linear-gradient(180deg, #f6eeda, #eee3c8); color: #33302a; border-radius: 2px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); transform: rotate(-0.6deg);
}
.portal form#p-form::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9d94, #92201a 68%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
.portal #p-form .rvb-field { display: block; margin: 0 0 0.9rem; color: #8a7f66; letter-spacing: 0.16em; font-family: var(--mono); }
.portal #p-form .rvb-field input {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.55); border: 1px solid #cdbe97; border-radius: 2px;
  color: #232019; font-family: var(--sans);
}
.portal #p-form .rvb-field input:focus-visible { outline: 2px solid #1c6e2f; outline-offset: 1px; }
.portal #p-form .rvb-err { color: #92201a; font-family: var(--sans); font-size: 0.8rem; min-height: 1.2em; margin: 0.2rem 0 0.6rem; }
.portal #p-form .rvb-modal-actions { display: flex; justify-content: flex-end; }

/* ---- signed in: the back room ---- */
.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(--edge2); border-radius: 4px;
}
.portal-id .who { font-family: var(--mono); color: var(--neon); letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(125, 255, 138, 0.35); }
.portal-id .spacer { flex: 1; }

.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(--edge2); border-left: 3px solid var(--edge); border-radius: 4px;
}
.pgame .gname { font-family: var(--mono); color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase; }
.pgame .gline { color: var(--dim); font-size: 0.84rem; font-family: var(--sans); font-weight: 300; }
.pgame .gsoon { color: var(--faint); font-size: 0.78rem; font-style: italic; }
.pgame .grow { display: flex; gap: 0.4rem; margin-top: 0.2rem; }