/* RingCentral brand theme — shared across the game hub and both games.
   Palette inspired by RingCentral's brand: orange accent on deep navy. */
:root {
  --rc-orange: #ff8800;
  --rc-orange-bright: #ffa033;
  --rc-blue: #0684bc;
  --rc-cyan: #19c0d6;
  --rc-navy: #06121f;
  --rc-navy-2: #0b1f33;
  --rc-navy-3: #12304d;
  --rc-ink: #eaf2fb;
  --rc-ink-dim: #9fb4cc;
  --rc-green: #2fd07a;
  --rc-red: #ff5252;
  --rc-amber: #ffc043;
  --rc-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --rc-radius: 16px;
  --rc-font: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--rc-font);
  color: var(--rc-ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #103a5e 0%, var(--rc-navy-2) 45%, var(--rc-navy) 100%);
  min-height: 100vh;
}

/* RingCentral wordmark — the dot is the brand cue */
.rc-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.rc-brand .dot {
  width: 0.62em; height: 0.62em;
  border-radius: 50%;
  background: var(--rc-orange);
  box-shadow: 0 0 14px rgba(255, 136, 0, 0.7);
  display: inline-block;
}
.rc-brand .r { color: var(--rc-orange); }

.rc-btn {
  font-family: var(--rc-font);
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 1rem;
  cursor: pointer;
  color: #06121f;
  background: linear-gradient(180deg, var(--rc-orange-bright), var(--rc-orange));
  box-shadow: var(--rc-shadow);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.rc-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.rc-btn:active { transform: translateY(1px); }
.rc-btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--rc-ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.rc-btn.blue { background: linear-gradient(180deg, var(--rc-cyan), var(--rc-blue)); color: #fff; }

.rc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow);
  backdrop-filter: blur(6px);
}

.rc-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(255, 136, 0, 0.16);
  color: var(--rc-orange-bright);
  border: 1px solid rgba(255, 136, 0, 0.35);
}

a { color: var(--rc-cyan); }

.back-link {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 50;
  text-decoration: none;
  font-weight: 700;
  color: var(--rc-ink);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 14px;
  border-radius: 999px;
}
.back-link:hover { background: rgba(0,0,0,0.55); }