/* Random Force platform shell — dark, game-forward chrome that sits over the frame. */
:root {
  --bar-h: 52px;
  --bg: #0d0e10;          /* matches the RC platform page (--bg-deep) */
  --bar: #121316;
  --line: #23262e;
  --text: #e8ebf2;
  --muted: #8b93a7;
  /* RC platform brand: a cyan→violet gradient (same as id.rc.team / acecord). */
  --accent: #00c8ff;      /* brand cyan — used for accents (spinner, focus) */
  --accent-end: #7b2fff;  /* brand violet — gradient end */
  --gradient: linear-gradient(135deg, #00c8ff 0%, #7b2fff 100%);
  --accent-ink: #ffffff;  /* text/marks on the gradient */
}

* { box-sizing: border-box; }
/* The shell toggles panels via the `hidden` attribute, but .overlay/#game set an
   explicit `display`, and an author rule beats the UA `[hidden]{display:none}` —
   so hidden panels stayed visible (the sign-in card floated over a running game).
   Force `hidden` to win. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }

/* ---- header ---- */
#topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--bar); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--gradient); color: var(--accent-ink); font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.brand-name { font-weight: 700; letter-spacing: 2px; font-size: 15px; }
@media (max-width: 480px) { .brand-name { display: none; } }

.account { display: flex; align-items: center; gap: 10px; }

.btn-primary {
  border: 0; cursor: pointer; border-radius: 8px; padding: 8px 18px;
  background: var(--gradient); color: var(--accent-ink); font-weight: 700; font-size: 14px;
  transition: filter .15s ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-lg { padding: 12px 28px; font-size: 15px; }

.chip {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--text); background: #1b2030; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px 5px 6px; transition: border-color .15s ease;
}
.chip:hover { border-color: #3a4260; }
.chip-avatar { width: 26px; height: 26px; border-radius: 999px;
  background: var(--gradient); flex: none; }
.chip-name { font-weight: 600; font-size: 14px; max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ---- stage / game frame ---- */
#stage { position: fixed; inset: var(--bar-h) 0 0 0; }
#game { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* ---- overlays ---- */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(120% 120% at 50% 0%, #141824 0%, var(--bg) 70%);
}
.overlay p { color: var(--muted); margin: 0; }

.spinner { width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.card {
  width: min(92vw, 360px); text-align: center; padding: 36px 28px 30px;
  background: var(--bar); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.card-mark {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--gradient); color: var(--accent-ink); font-weight: 800; font-size: 22px; letter-spacing: 1px;
  margin-bottom: 16px;
}
.card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: 1px; }
.card-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.card-input {
  width: 100%; margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #16181c; color: var(--text);
  font-size: 15px; outline: none; transition: border-color .15s ease;
}
.card-input::placeholder { color: #5b6273; }
.card-input:focus { border-color: var(--accent); }
.card-err { margin: 16px 0 0; color: #ff8a7a; font-size: 13px; }

/* ---- mobile: the game goes fullscreen ----
   The header bar would eat the top of a phone screen, so on narrow viewports the
   game fills the whole viewport and the header collapses to a small floating
   profile avatar (top-right, clear of the notch via safe-area). Taps pass through
   the transparent bar to the game; only the avatar is interactive. */
@media (max-width: 768px) {
  /* Keep the platform bar (logo left, profile right) with the game framed BELOW it —
     the phone gets the same layout as desktop, just tightened: the wordmark drops on
     small screens (base rule) and the profile shows as an avatar only. */
  .chip { padding: 4px; }
  .chip-avatar { width: 30px; height: 30px; }
  .chip-name { display: none; }
}