/**
 * RetroAchievements UI.
 *
 * Consumes the theme's design tokens -- --radius, --radius-lg, the --sp-*
 * spacing scale and the colour variables -- so profiles, leaderboards and
 * challenges read as part of the site rather than a plugin bolted on top.
 * Every var() has a fallback, so the plugin still renders correctly if the
 * theme is changed or swapped out entirely.
 */

.rgn-ra-box,
.rgn-ra-profile,
.rgn-ra-leaderboard {
  background: var(--color-panel, #0f1929);
  border: 1px solid var(--color-border, rgba(0,255,200,0.15));
  border-radius: var(--radius-lg, 14px);
  padding: 24px;
  margin: 0 0 24px;
  color: var(--color-text, #c8d4e8);
}

.rgn-ra-box h3,
.rgn-ra-subhead {
  font-family: var(--font-display, inherit);
  color: var(--color-teal, #00ffc8);
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rgn-ra-dim { color: var(--color-text-dim, #94a6c2); font-size: 0.9rem; }

/* --- Connect flow --- */

.rgn-ra-step label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim, #94a6c2);
  margin-bottom: 6px;
}

.rgn-ra-step input[type="text"] {
  width: 100%;
  max-width: 320px;
  padding: 12px 12px;
  background: var(--color-bg, #080b10);
  border: 1px solid var(--color-border, rgba(0,255,200,0.15));
  border-radius: var(--radius, 8px);
  color: var(--color-text, #c8d4e8);
  /* 16px stops iOS Safari zooming the viewport on focus. */
  font-size: 16px;
  margin-bottom: 12px;
}

.rgn-ra-step ol { margin: 12px 0 16px 20px; line-height: 1.8; }

.rgn-ra-code {
  font-family: var(--font-mono, monospace);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--color-teal, #00ffc8);
  background: var(--color-bg, #080b10);
  border: 1px dashed var(--color-teal, #00ffc8);
  border-radius: var(--radius, 10px);
  padding: 16px;
  text-align: center;
  margin: 0 0 16px;
  user-select: all;
  word-break: break-all;
}

.rgn-ra-msg { margin-top: 12px; font-size: 0.9rem; font-weight: 600; min-height: 20px; }
.rgn-ra-msg.is-ok { color: #4ade80; }
.rgn-ra-msg.is-error { color: #f87171; }

.rgn-ra-status { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rgn-ra-tick {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(74,222,128,0.15); color: #4ade80; font-weight: 700;
}
.rgn-ra-status span.rgn-ra-dim { display: block; }
.rgn-ra-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Profile --- */

.rgn-ra-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

.rgn-ra-avatar {
  width: 96px; height: 96px;
  border-radius: var(--radius-lg, 12px);
  border: 2px solid var(--color-teal, #00ffc8);
  object-fit: cover;
}

.rgn-ra-ident h2 { margin: 0 0 2px; font-size: 1.5rem; color: var(--color-white, #fff); }
.rgn-ra-handle { color: var(--color-teal, #00ffc8); font-size: 0.9rem; text-decoration: none; }
.rgn-ra-presence { color: var(--color-text-dim, #94a6c2); font-size: 0.85rem; margin-top: 6px; font-style: italic; }

.rgn-ra-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.rgn-ra-stat {
  background: var(--color-bg, #080b10);
  border: 1px solid var(--color-border, rgba(0,255,200,0.15));
  border-radius: var(--radius, 10px);
  padding: 16px;
  text-align: center;
}

.rgn-ra-stat-num {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-teal, #00ffc8);
  word-break: break-word;
}

.rgn-ra-stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim, #94a6c2);
  margin-top: 4px;
}

/* --- Games --- */

.rgn-ra-game {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border, rgba(0,255,200,0.12));
}
.rgn-ra-game:last-child { border-bottom: 0; }
.rgn-ra-game img { width: 48px; height: 48px; border-radius: var(--radius, 8px); flex: 0 0 48px; object-fit: cover; }
.rgn-ra-game-body { flex: 1; min-width: 0; }

.rgn-ra-game-title {
  display: block;
  color: var(--color-white, #fff);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 2px;
}
.rgn-ra-game-title:hover { color: var(--color-teal, #00ffc8); }

.rgn-ra-console {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dim, #94a6c2);
  margin-bottom: 8px;
}

.rgn-ra-bar {
  height: 7px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}
.rgn-ra-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-teal, #00ffc8), var(--color-magenta, #ff1e8c));
}

.rgn-ra-progress { font-size: 0.78rem; color: var(--color-text-dim, #94a6c2); }

.rgn-ra-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, rgba(0,255,200,0.12));
}

/* --- Leaderboard --- */

.rgn-ra-table { width: 100%; border-collapse: collapse; }
.rgn-ra-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim, #94a6c2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, rgba(0,255,200,0.15));
}
.rgn-ra-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rgn-ra-pos { font-family: var(--font-mono, monospace); color: var(--color-text-dim, #94a6c2); }

.rgn-ra-lb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white, #fff);
  text-decoration: none;
  font-weight: 600;
}
.rgn-ra-lb-user:hover { color: var(--color-teal, #00ffc8); }
.rgn-ra-lb-user img { width: 32px; height: 32px; border-radius: 6px; }

/* --- Mobile --- */

@media (max-width: 768px) {
  .rgn-ra-box,
  .rgn-ra-profile,
  .rgn-ra-leaderboard { padding: 16px; }

  .rgn-ra-hero { justify-content: center; text-align: center; }
  .rgn-ra-ident { width: 100%; }
  .rgn-ra-stats { grid-template-columns: repeat(2, 1fr); }
  .rgn-ra-actions .btn { width: 100%; }

  /* The leaderboard stacks rather than scrolling sideways. */
  .rgn-ra-table thead { display: none; }
  .rgn-ra-table,
  .rgn-ra-table tbody,
  .rgn-ra-table tr { display: block; width: 100%; }

  .rgn-ra-table tr {
    border: 1px solid var(--color-border, rgba(0,255,200,0.15));
    border-radius: var(--radius, 10px);
    margin-bottom: 10px;
    padding: 8px 12px;
  }

  .rgn-ra-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    padding: 4px 0;
  }

  .rgn-ra-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim, #94a6c2);
  }
}

/* ==========================================================================
   CHALLENGES
   ========================================================================== */

.rgn-ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.rgn-ch-card {
  display: block;
  background: var(--color-panel, #0f1929);
  border: 1px solid var(--color-border, rgba(0,255,200,0.15));
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.rgn-ch-card:hover {
  border-color: var(--color-teal, #00ffc8);
  transform: translateY(-2px);
}

.rgn-ch-card-top,
.rgn-ch-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.rgn-ch-pill {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 999px;
}

.rgn-ch-card-title {
  font-family: var(--font-display, inherit);
  font-size: 1rem;
  color: var(--color-white, #fff);
  margin: 0 0 8px;
  line-height: 1.35;
}

.rgn-ch-card-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--color-text-dim, #94a6c2);
}

.rgn-ch-card-time {
  margin-top: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--color-amber, #ffb300);
}

.rgn-challenge {
  background: var(--color-panel, #0f1929);
  border: 1px solid var(--color-border, rgba(0,255,200,0.15));
  border-radius: var(--radius-lg, 14px);
  padding: 24px;
  margin: 24px 0;
}

.rgn-ch-rules {
  background: var(--color-bg, #080b10);
  border-left: 3px solid var(--color-teal, #00ffc8);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  line-height: 1.65;
}

.rgn-ch-rules p { margin: 0 0 4px; }
.rgn-ch-rules p:last-child { margin-bottom: 0; }

.rgn-ch-action { margin-bottom: 24px; }
.rgn-ch-in { color: #4ade80; font-weight: 600; margin-bottom: 10px; }

@media (max-width: 768px) {
  .rgn-ch-grid { grid-template-columns: 1fr; }
  .rgn-challenge { padding: 16px; }
  .rgn-ch-action .btn { width: 100%; }
}

/* --------------------------------------------------------------
   Plugin buttons — self-contained

   These previously borrowed the theme's .btn / .btn-primary classes.
   That made them dependent on whatever those classes happen to set,
   and on the challenge page the label rendered invisible against the
   teal fill. A plugin should not rely on a theme class it does not
   control, so the colours are set explicitly here.

   Theme variables are still used where they exist, with fallbacks, so
   these match the site without depending on it.
   -------------------------------------------------------------- */

.rgn-ra-box .btn,
.rgn-challenge .btn,
.rgn-ra-profile .btn,
.rgn-ra-actions .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--radius, 8px);
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rgn-ra-box .btn-primary,
.rgn-challenge .btn-primary,
.rgn-ra-profile .btn-primary,
.rgn-ra-actions .btn-primary {
  /* Explicit dark label on the teal fill. This is the pair that was
     rendering as an empty green block. */
  background: var(--color-teal, #00ffc8) !important;
  color: #05080d !important;
  border-color: var(--color-teal, #00ffc8) !important;
}

.rgn-ra-box .btn-primary:hover,
.rgn-challenge .btn-primary:hover,
.rgn-ra-actions .btn-primary:hover {
  background: var(--color-magenta, #ff1e8c) !important;
  border-color: var(--color-magenta, #ff1e8c) !important;
  color: #ffffff !important;
}

.rgn-ra-box .btn-outline,
.rgn-challenge .btn-outline,
.rgn-ra-profile .btn-outline,
.rgn-ra-actions .btn-outline {
  background: transparent !important;
  color: var(--color-teal, #00ffc8) !important;
  border-color: var(--color-teal, #00ffc8) !important;
}

.rgn-ra-box .btn-outline:hover,
.rgn-challenge .btn-outline:hover,
.rgn-ra-actions .btn-outline:hover {
  background: rgba(0, 255, 200, 0.1) !important;
}

/* Never let a button collapse to an empty block: if a label is somehow
   missing, the button shrinks to nothing rather than showing a mystery
   coloured rectangle. */
.rgn-ra-box .btn:empty,
.rgn-challenge .btn:empty,
.rgn-ra-actions .btn:empty {
  display: none !important;
}

.rgn-ra-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 480px) {
  .rgn-ra-actions .btn {
    flex: 1 1 100%;
  }
}