/* Shared visual language for awards, selectors, results, and accessible states. */
:root {
  --atlas-focus: #ff8067;
  --atlas-surface: #f7f4eb;
  --atlas-shadow: 0 20px 58px #0620333d;
  --atlas-radius: 6px;
}

:where(button, a, select, input):focus-visible {
  outline: 3px solid var(--atlas-focus);
  outline-offset: 3px;
}

/* Award seals stay readable at a glance and reveal their rank on hover/focus. */
.mode-medal {
  right: 15px;
  bottom: 15px;
  width: 39px;
  height: 39px;
  border: 2px solid #fff9e8;
  background: radial-gradient(circle at 32% 27%, #e8bd91, #a8633d 64%, #704024);
  box-shadow: 0 0 0 3px #b9794b33, 0 6px 15px #12344548;
  font-size: 19px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mode-medal::before { content: ''; position: absolute; inset: 4px; border: 1px solid #ffe1b8a8; border-radius: inherit; }
.mode-medal::after {
  position: absolute;
  right: -4px;
  bottom: 44px;
  padding: 5px 7px;
  border-radius: 3px;
  background: #09243a;
  color: #fff;
  content: attr(data-medal);
  font: 8px 'DM Mono', monospace;
  letter-spacing: .5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.mode-card:hover .mode-medal, .mode-medal:focus-visible { transform: translateY(-2px) rotate(7deg); }
.mode-card:hover .mode-medal::after, .mode-medal:focus-visible::after { opacity: 1; transform: translateY(0); }
.mode-medal.silver { background: radial-gradient(circle at 32% 27%, #ecf3f2, #91a8af 62%, #60727b); box-shadow: 0 0 0 3px #91a8af33, 0 6px 15px #12344548; }
.mode-medal.gold { background: radial-gradient(circle at 32% 27%, #fff0a4, #d1a52e 58%, #946a13); box-shadow: 0 0 0 4px #d1a52e30, 0 6px 15px #12344548; animation:medal-glow 2.2s ease-in-out infinite; }
@keyframes medal-glow { 50% { box-shadow: 0 0 0 7px #d1a52e18, 0 8px 19px #12344548; } }

/* One family for all mission selectors, while preserving each mode's palette. */
:is(.continent-picker, .solar-picker, .team-picker) { backdrop-filter: blur(5px); }
:is(.continent-picker-card, .solar-picker-card, .team-picker-card) {
  border: 1px solid #c5d5cf;
  border-radius: var(--atlas-radius);
  box-shadow: var(--atlas-shadow);
}
:is(.continent-picker-card, .solar-picker-card, .team-picker-card) > .eyebrow { margin-bottom: 14px; }
:is(.close-picker, .close-solar-picker, .close-team-picker) {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #c8d7d1;
  border-radius: 50%;
  background: #ffffffc7;
  color: #315a64;
  line-height: 1;
}
.solar-picker-card :is(.close-picker, .close-solar-picker, .close-team-picker) { border-color: #638496; background: #10334ae6; color: #e7f5f0; }
:is(.continent-options button, .solar-level-options button, .team-mode-options button) { border-radius: 4px; }
:is(.continent-options button, .solar-level-options button, .team-mode-options button):focus-visible { position: relative; z-index: 2; }

/* The result is a short debrief: score, personal context and a suggested route. */
.results-card { position: relative; overflow: hidden; border: 1px solid #d3dfd9; border-radius: var(--atlas-radius); }
.results-card::before { content: ''; position: absolute; top: -80px; left: 50%; width: 250px; height: 145px; border-radius: 50%; background: #8fd6d226; transform: translateX(-50%); }
.results-card > * { position: relative; }
.result-score { margin-top: 23px; }
.result-insight { min-height: 18px; margin: 17px auto -9px; color: #287565; font: 600 12px/1.4 'DM Sans', sans-serif; }
.result-insight::before { content: '✦'; margin-right: 6px; color: #d1a52e; }
.result-next { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -7px 0 22px; color: #5d7d84; }
.result-next span { color: #76949a; font: 8px 'DM Mono', monospace; letter-spacing: 1px; }
.result-next strong { color: #195d6c; font-size: 12px; }
.results-card .primary-button { box-shadow: 0 8px 18px #09243a2b; }

/* Real leaderboard controls and a neutral empty/offline state. */
.leaderboard-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.leaderboard-controls label { display: grid; gap: 6px; color: #9dbabf; font: 8px 'DM Mono', monospace; letter-spacing: 1px; }
.leaderboard-mode { min-width: 196px; height: 38px; border: 1px solid #527384; border-radius: 3px; padding: 0 9px; background: #103249; color: #eff8f4; font: 12px 'DM Sans', sans-serif; }
.leaderboard-continent { min-width: 145px; height: 38px; border: 1px solid #527384; border-radius: 3px; padding: 0 9px; background: #103249; color: #eff8f4; font: 12px 'DM Sans', sans-serif; }
.leaderboard-continent:disabled { opacity: .65; }
.leaderboard-controls .outline-button { margin: 0; padding: 10px 13px 10px 16px; font-size: 12px; }
.leaderboard-controls .outline-button b { margin-left: 11px; }
.leaderboard-entry-identity, .leaderboard-entry-score { min-width: 0; display: grid; gap: 2px; }
.leaderboard-entry-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-entry-identity small, .leaderboard-entry-score small { color: #9db8bd; font-size: 10px; }
.leaderboard-entry-score { justify-items: end; }
.leaderboard-status { margin: 0; padding: 27px 4px; color: #9db8bd; font-size: 12px; line-height: 1.5; text-align: center; }
.leaderboard-avatar.rank-1 { background: #f5ba8e; color: #8e492a; }
.leaderboard-avatar.rank-2 { background: #d0c5f2; color: #4b4180; }
.leaderboard-avatar.rank-3 { background: #b0d9c2; color: #2c715d; }
.leaderboard-avatar.rank-4 { background: #d6e3df; color: #41646c; }

@media (max-width: 760px) {
  .result-insight { margin-top: 13px; }
  .result-next { flex-direction: column; gap: 4px; margin-bottom: 18px; }
  .leaderboard-controls { align-items: stretch; }
  .leaderboard-controls label { flex: 1; }
  .leaderboard-mode, .leaderboard-continent { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}