@media (max-width: 700px) {
  body:has(.culture-command) {
    padding-bottom: 0;
    overflow: hidden;
  }
}

/* Ranked Hall podium: live scholar data composited over the illustrated stage. */
.rank-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 18px 20px;
}
.rank-list-heading > div {
  display: grid;
  gap: 3px;
}
.rank-list-heading small {
  color: var(--muted);
}
.leaderboard-podium-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-top: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(240, 201, 111, 0.52);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(2, 18, 22, 0.04), rgba(2, 11, 12, 0.2)),
    url("assets/navigation/leaderboard-podium.webp") center / cover no-repeat;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 244, 202, 0.08);
}
.leaderboard-podium-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 12, 16, 0.16),
    transparent 18% 82%,
    rgba(0, 12, 16, 0.16)
  );
}
.podium-scholar {
  --landing: 40.5%;
  position: absolute;
  z-index: 2;
  left: 22.7%;
  bottom: var(--landing);
  width: 25%;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.54));
}
.podium-scholar.podium-place-1 {
  --landing: 45.8%;
  left: 49.7%;
  width: 27%;
}
.podium-scholar.podium-place-3 {
  --landing: 31.7%;
  left: 77.2%;
}
.podium-scholar img {
  position: relative;
  z-index: 1;
  width: 70%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center bottom;
}
.podium-place-1 img {
  width: 78%;
}
.podium-rank {
  position: absolute;
  z-index: 3;
  top: 6%;
  left: 14%;
  display: grid;
  place-items: center;
  width: clamp(28px, 3vw, 48px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 238, 180, 0.82);
  border-radius: 50%;
  color: #fff8dc;
  background: linear-gradient(145deg, #123a33, #061b1c);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.46);
  font:
    900 clamp(11px, 1.4vw, 19px) Georgia,
    serif;
}
.podium-place-1 .podium-rank {
  border-color: #ffe096;
  color: #2a1c06;
  background: linear-gradient(145deg, #fff0b3, #c78e29);
}
.podium-nameplate {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(1px, 0.3vw, 4px);
  padding: clamp(6px, 0.9vw, 12px) clamp(6px, 1vw, 14px);
  border: 1px solid rgba(245, 217, 145, 0.72);
  border-radius: clamp(9px, 1.4vw, 16px);
  color: #fff9e8;
  background: linear-gradient(
    145deg,
    rgba(8, 34, 30, 0.97),
    rgba(4, 17, 19, 0.97)
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    inset 0 1px rgba(255, 255, 255, 0.12);
  text-align: center;
}
.podium-scholar.is-me .podium-nameplate {
  border-color: #7ee2be;
  box-shadow:
    0 0 0 2px rgba(49, 182, 143, 0.2),
    0 12px 28px rgba(0, 0, 0, 0.48);
}
.podium-nameplate small {
  color: #efcb79;
  font-size: clamp(7px, 0.75vw, 11px);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}
.podium-nameplate > b {
  width: 100%;
  overflow: hidden;
  font:
    900 clamp(10px, 1.35vw, 20px) Georgia,
    serif;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-stats {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.25vw, 18px);
  color: #d5e7df;
  font-size: clamp(7px, 0.8vw, 12px);
  line-height: 1.1;
  white-space: nowrap;
}
.podium-stats span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.podium-stats strong {
  color: #fff5ce;
  font-size: 1.08em;
}
.rank-grid.is-expanded {
  margin-top: 14px;
}
@media (max-width: 760px) {
  .rank-list-heading {
    align-items: flex-start;
  }
  .rank-list-heading small {
    display: none;
  }
  .leaderboard-podium-stage {
    border-radius: 16px;
  }
  .podium-scholar {
    width: 25%;
  }
  .podium-scholar.podium-place-1 {
    width: 27%;
  }
  .podium-nameplate {
    padding: 5px 4px;
  }
  .podium-stats {
    flex-direction: column;
    gap: 1px;
  }
  .podium-rank {
    left: 7%;
    border-width: 1px;
  }
}

:root {
  --midnight: #06110e;
  --night: #0d2119;
  --surface: #f3e5bd;
  --surface-2: #d4b878;
  --ink: #12231d;
  --muted: #637167;
  --gold: #f0c96f;
  --violet: #0f6f57;
  --emerald: #0b5f4a;
  --spinel: #073f35;
  --red: #b64352;
  --line: rgba(18, 35, 29, 0.16);
  --shadow: 0 20px 60px rgba(1, 12, 8, 0.3);
  --r: 18px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --max: 1500px;
  color-scheme: dark;
}
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--midnight);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 18% 0,
      rgba(240, 201, 111, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 12%,
      rgba(12, 105, 82, 0.28),
      transparent 36%
    ),
    linear-gradient(160deg, #04100d, #08261e 52%, #061511);
  color: #f8f4ea;
  font:
    16px/1.6 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button,
a {
  tap-highlight-color: transparent;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
}
.skip-link:focus {
  top: 16px;
}
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max);
  margin: auto;
  padding: 0 20px;
  position: relative;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font:
    700 19px Georgia,
    serif;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: #ffe49a;
}
.topbar nav {
  display: flex;
  gap: 18px;
  flex: 1;
}
.topbar nav a {
  color: #d9eadf;
  text-decoration: none;
  font-size: 14px;
}
.topbar nav a:hover,
.topbar nav a:focus {
  color: #fff;
}
.header-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #d9eadf;
}
.header-stats b {
  color: #ffe49a;
}
.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.icon-button:hover {
  background: #ffffff12;
}
.nav-toggle {
  display: none;
  margin-left: auto;
}
main {
  max-width: var(--max);
  width: 100%;
  margin: auto;
  padding: 18px 20px 64px;
  min-height: calc(100vh - 72px);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-family: Georgia, serif;
  line-height: 1.12;
}
h1 {
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0;
}
h2 {
  font-size: 24px;
}
em {
  color: #ffe49a;
  font-weight: 400;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 800;
  color: #cfad61;
}
.panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #fff7;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.button,
.primary,
.secondary,
.quiet {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 750;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.primary {
  background: linear-gradient(135deg, #0b5f4a, #063b32 70%, #10251d);
  color: #fff;
  box-shadow: 0 8px 24px rgba(4, 50, 38, 0.45);
  border-color: #d8b96844;
}
.secondary {
  background: linear-gradient(145deg, #f5e8c4, #d7bc7e);
  color: var(--ink);
  border-color: var(--line);
}
.quiet {
  background: transparent;
  color: inherit;
  border-color: #ffffff2b;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.home-hero {
  min-height: 480px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(240, 201, 111, 0.35);
  box-shadow: var(--shadow);
}
.hero-art {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 16, 13, 0.96) 0,
      rgba(4, 16, 13, 0.66) 42%,
      rgba(4, 16, 13, 0.08) 75%
    ),
    url("assets/environments/moonlit-apothecary-hero.webp");
  background-size: cover;
  background-position: center;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 590px;
  padding: 64px;
}
.hero-copy h1 {
  margin: 12px 0 20px;
}
.hero-copy p {
  max-width: 48ch;
  color: #d6e4db;
  font-size: 18px;
  margin-bottom: 24px;
}
.dashboard {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.dashboard > .panel {
  padding: 24px;
}
.progress-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.ring {
  --p: 0;
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(closest-side, var(--surface) 75%, transparent 76%),
    conic-gradient(var(--emerald) calc(var(--p) * 1%), #dcd5c7 0);
}
.ring b {
  font-size: 22px;
}
.ring span {
  font-size: 11px;
  color: var(--muted);
}
.companion-card {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}
.companion-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.companion-card p,
.achievement-feature p,
.progress-card p {
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 14px;
}
.dashboard h2 {
  margin: 6px 0 8px;
}
.achievement-feature progress,
.achievement progress {
  width: 100%;
  accent-color: var(--emerald);
}
.destinations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.destination {
  min-height: 140px;
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -100px 80px #02100caa;
}
.destination span {
  font:
    700 24px Georgia,
    serif;
}
.destination b {
  font-size: 12px;
  color: #d8eadf;
}
.destination.arcade {
  background-image:
    linear-gradient(#08261e44, #08261eaa),
    url("assets/navigation/destination-arcade.webp");
}
.destination.atlas {
  background-image:
    linear-gradient(#08261e44, #08261eaa),
    url("assets/navigation/destination-atlas.webp");
}
.destination.stable {
  background-image:
    linear-gradient(#08261e44, #08261eaa), url("assets/navigation/stable.png");
}
.destination.board {
  background-image: linear-gradient(135deg, #0d5f4b, #0b1d18);
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 12px 0 24px;
}
.page-head h1 {
  font-size: 46px;
  margin: 6px 0;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mode-card {
  min-height: 150px;
  text-align: left;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #ffffff24;
  background: #0d2119;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.mode-card b {
  font:
    700 21px Georgia,
    serif;
}
.mode-card span {
  color: #c6d8cd;
  flex: 1;
}
.mode-card strong {
  font-size: 12px;
  color: #eacb8b;
}
.mode-card.selected {
  outline: 2px solid var(--gold);
  background: #123b30;
}
.setup-panel {
  margin-top: 16px;
  padding: 24px;
}
.filter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.filter-row label,
.typed label {
  font-weight: 700;
  font-size: 13px;
}
.filter-row select,
.filter-row input,
.typed input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
}
.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.eligible {
  text-align: right;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.study-page {
  max-width: 980px;
  margin: auto;
}
.study-progress {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #cbd0e2;
}
.study-progress > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress {
  height: 5px;
  border-radius: 9px;
  background: #ffffff22;
  overflow: hidden;
  flex: 1;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
}
.study-card {
  background: var(--surface);
  color: var(--ink);
  padding: 24px;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  text-transform: capitalize;
}
.question {
  font:
    700 clamp(25px, 3vw, 36px)/1.3 Georgia,
    serif;
  letter-spacing: 0;
  max-width: 72ch;
  margin: 24px 0;
}
.answers {
  display: grid;
  gap: 12px;
}
.answer {
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
}
.answer > span {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 9px;
  background: #e9ddbd;
  display: grid;
  place-items: center;
  color: #0b5f4a;
}
.answer:hover,
.answer:focus-visible,
.answer.selected {
  border-color: var(--emerald);
  background: #e6efd9;
}
.answer[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--emerald);
}
.study-card footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.study-card .quiet {
  color: var(--muted);
  border-color: var(--line);
}
.submit-multi {
  float: right;
  margin-top: 16px;
}
.typed {
  display: grid;
  gap: 12px;
}
.typed input {
  font-size: 18px;
}
.typed .primary {
  justify-self: end;
}
.prescription,
.visual-prompt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 20px;
}
.prescription > span {
  font:
    italic 700 28px Georgia,
    serif;
}
.visual-prompt {
  min-height: 140px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #e7ddc7, #d8c9aa);
  color: #665b48;
}
.modal-open {
  overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #030713c7;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
}
.feedback-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 30px 100px #0009;
}
.feedback-status {
  display: flex;
  gap: 16px;
  align-items: center;
}
.feedback-status > span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--emerald);
  color: #fff;
  font-size: 24px;
}
.is-wrong .feedback-status > span {
  background: var(--red);
}
.feedback-status h2 {
  margin: 4px 0;
}
.feedback-modal dl {
  display: grid;
  gap: 8px;
}
.feedback-modal dl > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.feedback-modal dt {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.feedback-modal dd {
  margin: 2px 0 0;
  font-weight: 650;
}
.explanation {
  margin: 20px 0;
}
.explanation h3 {
  font:
    700 19px Georgia,
    serif;
}
.explanation p {
  white-space: pre-line;
}
.explanation details {
  color: var(--muted);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  position: sticky;
  bottom: -24px;
  background: linear-gradient(transparent, var(--surface) 18%);
  padding: 24px 0 0;
}
.feedback-modal .quiet {
  color: var(--muted);
  border-color: var(--line);
}
.reward {
  padding: 12px;
  border-radius: 12px;
  background: #ead49a;
  color: #6d4c10;
}
.completion {
  max-width: 720px;
  margin: 48px auto;
  padding: 40px;
  text-align: center;
}
.completion h1 {
  font-size: 42px;
}
.completion-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.completion-stats div {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
}
.completion-stats b {
  display: block;
  font-size: 30px;
}
.completion-stats span {
  color: var(--muted);
}
.completion .actions {
  justify-content: center;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.achievement {
  background: var(--surface);
  color: var(--ink);
  border-radius: 16px;
  padding: 20px;
}
.achievement > span,
.achievement small {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}
.achievement h2 {
  margin: 8px 0;
}
.achievement p {
  color: var(--muted);
  font-size: 14px;
}
.achievement.locked {
  opacity: 0.75;
}
.notice {
  border: 1px solid #ffffff2c;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  color: #cbd0e2;
}
.leaderboard {
  padding: 12px;
}
.leaderboard > div {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.leaderboard > div:last-child {
  border: 0;
}
.route-shell {
  min-height: 360px;
  padding: 48px;
  display: grid;
  place-items: center;
  text-align: center;
  align-content: center;
}
.route-shell p {
  max-width: 55ch;
  color: var(--muted);
}
.route-icon {
  font-size: 52px;
  color: var(--emerald);
}
.toast {
  position: fixed;
  z-index: 200;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 120px);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: 0.25s;
}
.toast.show {
  transform: translate(-50%, 0);
}
.loading {
  display: grid;
  place-items: center;
  min-height: 50vh;
}
.loading span {
  color: #cbd0e2;
}
:focus-visible {
  outline: 3px solid #f2c86d;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .topbar nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    background: #0d2119;
    padding: 16px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    flex-direction: column;
  }
  .topbar nav.open {
    display: flex;
  }
  .nav-toggle {
    display: grid;
  }
  .header-stats {
    display: none;
  }
  .dashboard {
    grid-template-columns: 1fr 1fr;
  }
  .progress-card {
    grid-column: 1/-1;
  }
  .destinations {
    grid-template-columns: 1fr 1fr;
  }
  .setup-grid {
    grid-template-columns: 1fr 1fr;
  }
  .achievement-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .topbar {
    height: 60px;
    padding: 0 12px;
  }
  .brand {
    font-size: 17px;
  }
  main {
    padding: 10px 12px 40px;
    min-height: calc(100vh - 60px);
  }
  .home-hero {
    min-height: 460px;
  }
  .hero-art {
    background-image:
      linear-gradient(180deg, rgba(4, 16, 13, 0.3), rgba(4, 16, 13, 0.96) 68%),
      url("assets/environments/moonlit-apothecary-hero.webp");
    background-position: 66% center;
  }
  .hero-copy {
    align-self: flex-end;
    padding: 24px;
  }
  .hero-copy h1 {
    font-size: 39px;
  }
  .hero-copy p {
    font-size: 16px;
  }
  .dashboard,
  .destinations,
  .setup-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }
  .dashboard > .panel {
    padding: 20px;
  }
  .progress-card {
    grid-column: auto;
  }
  .destination {
    min-height: 120px;
  }
  .page-head {
    margin: 8px 0 20px;
  }
  .page-head h1 {
    font-size: 36px;
  }
  .setup-panel {
    padding: 16px;
  }
  .filter-row {
    grid-template-columns: 1fr;
  }
  .setup-actions {
    display: grid;
  }
  .study-page {
    margin: 0;
  }
  .study-progress {
    margin-bottom: 8px;
  }
  .study-card {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .question {
    font-size: 25px;
    margin: 20px 0;
  }
  .answer {
    padding: 10px 12px;
  }
  .feedback-modal {
    padding: 20px 16px;
  }
  .modal-actions {
    display: grid;
    bottom: -20px;
  }
  .modal-actions .primary {
    grid-row: 1;
  }
  .completion {
    padding: 24px 16px;
    margin: 16px auto;
  }
  .completion-stats {
    gap: 8px;
  }
  .completion-stats div {
    padding: 12px 6px;
  }
  .route-shell {
    padding: 24px;
  }
  .actions > .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.atlas-page,
.profile-page,
.settings-page {
  display: grid;
  gap: 18px;
}
.atlas-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: end;
  padding: 24px;
  background: linear-gradient(135deg, #fbf5e8, #e9ddc6);
}
.atlas-hero input,
.profile-card input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
}
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.atlas-entry {
  padding: 18px;
}
.atlas-entry h3 {
  font:
    700 20px/1.2 Georgia,
    serif;
  margin: 8px 0 12px;
}
.atlas-entry p {
  color: var(--muted);
  font-size: 13px;
  min-height: 42px;
}
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, auto 1fr);
  gap: 2px 8px;
  align-items: baseline;
  margin: 10px 0;
}
.mini-stats b {
  color: var(--violet);
}
.mini-stats span {
  color: var(--muted);
  font-size: 12px;
}
.profile-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
}
.profile-card img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.profile-card label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.profile-stats article {
  padding: 16px;
  text-align: center;
}
.profile-stats b {
  display: block;
  font:
    700 26px Georgia,
    serif;
  color: var(--violet);
}
.profile-stats span {
  font-size: 12px;
  color: var(--muted);
}
.settings-page {
  padding: 12px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.toggle-row:last-of-type {
  border-bottom: 0;
}
.toggle-row span {
  display: grid;
}
.toggle-row small {
  color: var(--muted);
}
.toggle-row input {
  width: 24px;
  height: 24px;
}
.settings-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 18px;
}
@media (max-width: 900px) {
  .atlas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .atlas-hero,
  .profile-card {
    grid-template-columns: 1fr;
  }
  .atlas-grid,
  .profile-stats {
    grid-template-columns: 1fr;
  }
  .profile-card img {
    width: 140px;
    height: 140px;
    margin: auto;
  }
  .settings-actions {
    display: grid;
  }
}
.shop-page,
.relic-page,
.arcade-page {
  display: grid;
  gap: 24px;
}
.market-hero,
.relic-loadout,
.arcade-hero {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.market-hero p,
.relic-loadout p,
.arcade-hero p {
  color: var(--muted);
  max-width: 64ch;
  margin: 0;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 14px;
}
.section-head h2 {
  margin: 4px 0 0;
}
.section-head > span {
  color: #cbd0e2;
  font-size: 13px;
}
.shop-grid,
.relic-grid,
.arcade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.shop-card,
.relic-card,
.arcade-card {
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.shop-card img,
.relic-card img,
.arcade-card img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 36%, #2b3154, #11172f 66%, #090d1f);
  border: 1px solid #ffffff24;
}
.shop-card h3,
.relic-card h3,
.arcade-card h3 {
  margin: 0;
  font:
    700 21px/1.15 Georgia,
    serif;
}
.shop-card p,
.relic-card p,
.arcade-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.shop-card.owned,
.relic-card.owned {
  outline: 2px solid #65a889;
}
.shop-card button,
.relic-card button,
.arcade-card button {
  width: 100%;
  align-self: end;
}
.relic-loadout {
  align-items: stretch;
}
.loadout-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 10px;
  min-width: min(460px, 100%);
}
.loadout-slot {
  min-height: 96px;
  border: 1px dashed #b6a989;
  border-radius: 14px;
  background: rgba(239, 227, 199, 0.72);
  color: var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-size: 13px;
}
.loadout-slot img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.loadout-slot b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}
.relic-card.equipped {
  box-shadow: inset 0 0 0 2px var(--gold);
}
.relic-card.locked img {
  filter: saturate(0.35);
  opacity: 0.72;
}
.arcade-hero > span {
  color: var(--muted);
  font-weight: 700;
}
.arcade-card img {
  height: 150px;
  object-fit: cover;
}
.arcade-card {
  grid-template-rows: auto auto auto 1fr auto;
}
@media (max-width: 1100px) {
  .shop-grid,
  .relic-grid,
  .arcade-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .shop-grid,
  .relic-grid,
  .arcade-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .market-hero,
  .relic-loadout,
  .arcade-hero {
    display: grid;
  }
  .loadout-slots {
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .shop-grid,
  .relic-grid,
  .arcade-grid,
  .loadout-slots {
    grid-template-columns: 1fr;
  }
  .market-hero,
  .relic-loadout,
  .arcade-hero {
    padding: 18px;
  }
  .shop-card img,
  .relic-card img,
  .arcade-card img {
    height: 112px;
  }
  .section-head {
    display: grid;
  }
  .loadout-slot {
    min-height: 74px;
  }
}
.achievement-feature progress,
.achievement progress {
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #d8d0c2;
}
.achievement-feature progress::-webkit-progress-bar,
.achievement progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #d8d0c2;
}
.achievement-feature progress::-webkit-progress-value,
.achievement progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #7469e8, #d8a94d);
}
.achievement-feature progress::-moz-progress-bar,
.achievement progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #7469e8, #d8a94d);
}
.meter {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #d8d0c2;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7469e8, #d8a94d);
}

/* Final graphics pass: bring secondary routes into the image-forward moonlit art direction. */
.atlas-hero,
.market-hero,
.relic-loadout,
.arcade-hero,
.profile-card,
.settings-page {
  background:
    radial-gradient(
      circle at 12% 0,
      rgba(242, 203, 124, 0.16),
      transparent 36%
    ),
    linear-gradient(145deg, #121933, #211a3d 58%, #0c2a32);
  color: #f8f4ea;
  border: 1px solid #ffffff24;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
.atlas-hero p,
.market-hero p,
.relic-loadout p,
.arcade-hero p,
.profile-card p,
.toggle-row small {
  color: #cbd0e2;
}
.atlas-hero input,
.profile-card input {
  background: #0e1630;
  color: #f8f4ea;
  border-color: #ffffff24;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.atlas-hero input::placeholder,
.profile-card input::placeholder {
  color: #8f98b6;
}
.profile-card img {
  border-radius: 18px;
  background: radial-gradient(circle at 50% 36%, #2b3154, #11172f 66%, #090d1f);
  border: 1px solid #ffffff24;
  padding: 8px;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.profile-stats article,
.atlas-entry,
.shop-card,
.relic-card,
.arcade-card {
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
  border-color: #fff8;
  box-shadow: 0 18px 48px rgba(1, 5, 18, 0.22);
}
.atlas-entry p,
.shop-card p,
.relic-card p,
.arcade-card p,
.profile-stats span {
  color: #596175;
}
.atlas-entry .mini-stats b,
.profile-stats b {
  color: #5d55c7;
}
.settings-page {
  padding: 0;
  overflow: hidden;
}
.toggle-row {
  color: #f8f4ea;
  border-bottom-color: #ffffff1f;
}
.toggle-row input {
  accent-color: #d8a94d;
}
.settings-actions {
  background: rgba(6, 10, 29, 0.34);
  border-top: 1px solid #ffffff18;
}
.loadout-slot {
  background: linear-gradient(145deg, #141c38, #10172e);
  border-color: #ffffff2b;
  color: #cbd0e2;
}
.loadout-slot b {
  color: #f8f4ea;
}
.shop-card img,
.relic-card img,
.arcade-card img {
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 12px 28px rgba(5, 8, 23, 0.22);
}
@media (max-width: 600px) {
  .profile-card img {
    justify-self: center;
  }
  .toggle-row {
    align-items: flex-start;
  }
  .settings-actions .button {
    width: 100%;
  }
}

/* Interaction UI upgrade pass: study, feedback, leaderboard, navigation, and final readability states. */
.topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}
.topbar nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 0 2px;
}
.topbar nav a:hover,
.topbar nav a:focus-visible {
  background: #ffffff10;
  padding-inline: 10px;
  margin-inline: -8px;
}
.header-stats {
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ffffff16;
  border-radius: 999px;
  background: #ffffff0a;
}
.button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.button:active:not(:disabled) {
  transform: translateY(0);
}
.secondary {
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
}
.quiet {
  background: rgba(7, 11, 30, 0.28);
  color: #f8f4ea;
}
.home-hero,
.stable-hero,
.achievement-hero,
.companion-detail {
  outline: 1px solid rgba(216, 169, 77, 0.48);
  outline-offset: -2px;
}
.dashboard > .panel {
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
  border-color: #fff8;
  position: relative;
  overflow: hidden;
}
.dashboard > .panel:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #d8a94d, #7469e8, #16856f);
}
.companion-card img {
  border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, #2b3154, #11172f 68%, #090d1f);
  border: 1px solid #ffffff24;
  padding: 6px;
}
.destination {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #ffffff22;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.destination:hover,
.destination:focus-visible {
  transform: translateY(-3px);
  border-color: #d8a94d;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.38),
    inset 0 -110px 84px #050817bd;
}
.page-head {
  padding: 18px 22px;
  border: 1px solid #ffffff18;
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(18, 25, 51, 0.88),
    rgba(10, 17, 40, 0.54)
  );
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.setup-grid {
  align-items: stretch;
}
.mode-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #151d3b, #211a42);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.mode-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #7469e8, #d8a94d);
  opacity: 0.75;
}
.mode-card:hover,
.mode-card:focus-visible {
  transform: translateY(-2px);
  border-color: #d8a94d;
}
.mode-card.selected {
  background: linear-gradient(145deg, #282452, #132d3a);
  box-shadow: 0 18px 44px rgba(19, 14, 52, 0.5);
}
.setup-panel,
.study-card,
.feedback-modal,
.completion,
.exam-review.panel {
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
  border-color: #fff8;
}
.filter-row select,
.filter-row input,
.typed input {
  background: #f4ead3;
  color: #182033;
  border-color: #c8b78f;
  box-shadow: inset 0 1px 0 #fff8;
}
.filter-row select:focus,
.filter-row input:focus,
.typed input:focus {
  border-color: #7469e8;
  box-shadow: 0 0 0 3px rgba(116, 105, 232, 0.18);
}
.topic-filter-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
}
.study-page {
  max-width: 900px;
}
.study-progress {
  padding: 10px 12px;
  border: 1px solid #ffffff20;
  border-radius: 16px;
  background: rgba(8, 12, 29, 0.5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.study-card {
  border: 1px solid #fff9;
  position: relative;
  overflow: hidden;
}
.study-card:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #16856f, #d8a94d, #7469e8);
}
.card-meta {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(24, 32, 51, 0.12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
}
.question {
  letter-spacing: 0;
}
.answer {
  background: #f7edd5;
  border-color: #cab98f;
  box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
  transition:
    transform 0.16s,
    border-color 0.16s,
    background 0.16s;
}
.answer:hover,
.answer:focus-visible,
.answer.selected {
  transform: translateY(-1px);
  background: #ede4f7;
  border-color: #7469e8;
}
.answer > span {
  background: linear-gradient(145deg, #e8ddf7, #d5c9ee);
  font-weight: 800;
}
.prescription,
.visual-prompt {
  background: #f7edd5;
  border-color: #cab98f;
  box-shadow: inset 0 1px 0 #fff8;
}
.visual-prompt {
  background: radial-gradient(circle at 50% 35%, #f6dfad, #d1bd91 70%, #b39e76);
  color: #3b3428;
  font-weight: 800;
}
.modal-backdrop {
  background: rgba(3, 7, 19, 0.82);
  backdrop-filter: blur(10px);
}
.feedback-modal {
  border: 1px solid #f1dc9e;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.62);
}
.feedback-modal dl > div,
.achievement-detail-progress,
.reward-preview,
.completion-stats div {
  background: #f7edd5;
  border-color: #cab98f;
}
.modal-actions {
  background: linear-gradient(transparent, rgba(239, 227, 199, 0.96) 20%);
}
.reward {
  background: linear-gradient(145deg, #f1d68d, #d8a94d);
  color: #37240a;
  font-weight: 800;
}
.completion {
  box-shadow: var(--shadow);
  border-radius: 26px;
}
.completion h1 {
  letter-spacing: 0;
}
.notice.offline {
  background: linear-gradient(
    145deg,
    rgba(18, 25, 51, 0.92),
    rgba(14, 35, 43, 0.72)
  );
  border-color: #ffffff24;
  color: #d7deef;
}
.leaderboard {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
  border-color: #fff8;
}
.leaderboard > div {
  min-height: 64px;
  align-items: center;
  border-bottom-color: rgba(24, 32, 51, 0.12);
}
.leaderboard > div:nth-child(1) {
  background: linear-gradient(90deg, rgba(216, 169, 77, 0.24), transparent);
}
.leaderboard > div b {
  font:
    700 20px Georgia,
    serif;
  color: #5d55c7;
}
.leaderboard > div strong {
  color: #1f6e5e;
}
.route-shell {
  background: linear-gradient(145deg, #efe3c7, #d9c6a2);
  border: 1px solid #fff8;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.toast {
  background: linear-gradient(145deg, #151a38, #102b33);
  color: #f8f4ea;
  border: 1px solid #ffffff24;
}
@media (max-width: 900px) {
  .page-head {
    padding: 14px 16px;
  }
  .topbar nav.open a {
    min-height: 44px;
    padding-inline: 10px;
  }
  .study-page {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .topbar {
    border-bottom-color: #d8a94d;
  }
  .header-stats {
    display: none;
  }
  .page-head h1 {
    font-size: 34px;
  }
  .page-head {
    margin-bottom: 16px;
  }
  .setup-grid {
    gap: 10px;
  }
  .mode-card {
    min-height: 132px;
    padding: 16px;
  }
  .setup-actions .button,
  .modal-actions .button {
    width: 100%;
  }
  .study-progress {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }
  .study-progress > span {
    grid-column: 2;
    justify-self: end;
  }
  .card-meta {
    display: grid;
    gap: 4px;
  }
  .answer {
    min-height: 56px;
  }
  .completion-stats {
    grid-template-columns: 1fr;
  }
  .leaderboard > div {
    grid-template-columns: 46px 1fr;
    gap: 8px;
  }
  .leaderboard > div strong {
    grid-column: 2;
  }
  .destination:hover,
  .destination:focus-visible,
  .mode-card:hover,
  .mode-card:focus-visible,
  .answer:hover,
  .answer:focus-visible {
    transform: none;
  }
}

/* Study footer button refinement from Chromium screenshot review. */
.study-card footer {
  align-items: center;
  gap: 10px;
}
.study-card footer .quiet {
  background: #f7edd5;
  color: #182033;
  border-color: #cab98f;
  box-shadow:
    0 8px 18px rgba(24, 32, 51, 0.1),
    inset 0 1px 0 #fff8;
}
.study-card footer .quiet:hover,
.study-card footer .quiet:focus-visible {
  background: #ede4f7;
  border-color: #7469e8;
  color: #182033;
}
@media (max-width: 600px) {
  .study-card footer {
    justify-content: stretch;
  }
  .study-card footer .quiet {
    width: 100%;
  }
}

/* Prevent mobile tap/selection artifacts on controls. */
button,
.button,
.answer,
.mode-card,
.destination,
.icon-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input,
select,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Dark skip action avoids mobile center tap-marker contrast while matching the app chrome. */
.study-card footer .quiet {
  background: linear-gradient(145deg, #10172e, #0c2a32);
  color: #f8f4ea;
  border-color: #ffffff24;
  box-shadow:
    0 10px 22px rgba(5, 8, 23, 0.28),
    inset 0 1px 0 #ffffff14;
}
.study-card footer .quiet:hover,
.study-card footer .quiet:focus-visible {
  background: linear-gradient(145deg, #171f3f, #142f3b);
  border-color: #d8a94d;
  color: #fff;
}

@media (max-width: 600px) {
  .study-card footer .quiet {
    justify-content: flex-start;
    text-align: left;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Preserve the established mobile study invariant: question starts high on 320px screens. */
@media (max-width: 600px) {
  .study-progress {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding: 6px 8px;
    gap: 8px;
    margin-bottom: 6px;
    border-radius: 12px;
    min-height: 0;
  }
  .study-progress > span {
    grid-column: auto;
    justify-self: auto;
    font-size: 12px;
    white-space: nowrap;
  }
  .study-progress > div {
    gap: 8px;
    min-width: 0;
  }
  .study-progress .progress {
    min-width: 64px;
  }
  .study-card {
    padding: 14px 14px;
    border-radius: 18px;
  }
  .card-meta {
    padding-bottom: 8px;
    font-size: 11px;
    line-height: 1.3;
  }
  .question {
    font-size: 24px;
    margin: 14px 0 16px;
    line-height: 1.24;
  }
  .answers {
    gap: 10px;
  }
  .answer {
    min-height: 50px;
    padding: 9px 10px;
    gap: 10px;
  }
}

/* Mythic gold + spinel final pass. */
:root {
  --midnight: #06110e;
  --night: #0d2119;
  --surface: #f3e5bd;
  --surface-2: #d4b878;
  --ink: #12231d;
  --muted: #637167;
  --gold: #f0c96f;
  --violet: #0f6f57;
  --emerald: #0b5f4a;
  --spinel: #073f35;
  --shadow: 0 20px 60px rgba(1, 12, 8, 0.3);
  --max: 1500px;
}
body {
  background:
    radial-gradient(
      circle at 18% 0,
      rgba(240, 201, 111, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 12%,
      rgba(12, 105, 82, 0.28),
      transparent 36%
    ),
    linear-gradient(160deg, #04100d, #08261e 52%, #061511);
}
main,
.topbar {
  max-width: var(--max);
  width: 100%;
}
main {
  padding-left: 20px;
  padding-right: 20px;
}
.primary,
.mode-card.selected {
  background: linear-gradient(135deg, #0b5f4a, #063b32 70%, #10251d);
  border-color: #d8b96866;
}
.progress i,
.meter i,
.achievement-feature progress::-webkit-progress-value,
.achievement progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--emerald), var(--gold));
}
.page-head,
.atlas-hero,
.market-hero,
.relic-loadout,
.arcade-hero,
.profile-card,
.settings-page {
  background:
    radial-gradient(
      circle at 12% 0,
      rgba(240, 201, 111, 0.16),
      transparent 36%
    ),
    linear-gradient(145deg, #0d2119, #08261e 58%, #051410);
  border-color: rgba(240, 201, 111, 0.28);
}
.dashboard > .panel,
.profile-stats article,
.atlas-entry,
.shop-card,
.relic-card,
.arcade-card,
.setup-panel,
.study-card,
.feedback-modal,
.completion,
.exam-review.panel {
  background: linear-gradient(145deg, #f3e5bd, #d4b878);
  border-color: #fff8;
}
.atlas-entry .mini-stats b,
.profile-stats b,
.leaderboard > div b {
  color: #0b5f4a;
}
.answer:hover,
.answer:focus-visible,
.answer.selected {
  border-color: var(--emerald);
  background: #e7efd8;
}
.shop-card img,
.relic-card img,
.arcade-card img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center;
  background: radial-gradient(circle at 50% 40%, #164c3e, #0c241d 68%, #04100d);
  padding: 8px;
}
.arcade-card img {
  object-fit: contain;
}
.achievement-art {
  display: grid;
  place-items: center;
}
.atlas-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.economy-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.economy-strip span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(240, 201, 111, 0.14);
  border: 1px solid rgba(240, 201, 111, 0.28);
  color: #ffe49a;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.atlas-detail {
  display: grid;
  gap: 18px;
}
.atlas-study-guide {
  padding: 30px;
  background: linear-gradient(145deg, #10291f, #071813);
  color: #f8f4ea;
  border-color: rgba(240, 201, 111, 0.3);
}
.atlas-study-guide h1 {
  font-size: clamp(38px, 5vw, 66px);
}
.atlas-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.atlas-pill-row span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(240, 201, 111, 0.16);
  border: 1px solid rgba(240, 201, 111, 0.26);
  color: #ffe49a;
  font-size: 12px;
  font-weight: 800;
}
.atlas-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.atlas-notes article,
.atlas-prompts article {
  padding: 20px;
}
.atlas-notes ul,
.atlas-prompts p {
  margin-bottom: 0;
  color: var(--muted);
}
.atlas-prompts {
  display: grid;
  gap: 12px;
}
.arcade-run {
  display: grid;
  gap: 16px;
}
.arcade-hud {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(240, 201, 111, 0.28);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(13, 33, 25, 0.92),
    rgba(5, 20, 16, 0.72)
  );
}
.arcade-hud h1 {
  font-size: clamp(26px, 4vw, 44px);
  margin: 4px 0 0;
}
.hud-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2px 10px;
  text-align: center;
  color: #d8eadf;
}
.hud-stats b {
  color: #ffe49a;
  font:
    700 22px Georgia,
    serif;
}
.hud-stats span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.game-board {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}
.game-scene {
  min-height: 360px;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(240, 201, 111, 0.22),
      transparent 32%
    ),
    linear-gradient(180deg, #0b2f26, #04100d);
  border: 1px solid rgba(240, 201, 111, 0.28);
  position: relative;
  overflow: hidden;
}
.game-token {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  left: 18%;
  top: 18%;
  background: radial-gradient(circle at 35% 30%, #fff2b8, #f0c96f 42%, #0b5f4a);
  box-shadow: 0 0 32px rgba(240, 201, 111, 0.32);
  animation: arcadeFloat 3.8s ease-in-out infinite;
}
.game-token.delay {
  left: 62%;
  top: 38%;
  animation-delay: 0.8s;
}
.game-token.slow {
  left: 38%;
  top: 66%;
  animation-delay: 1.6s;
}
@keyframes arcadeFloat {
  50% {
    transform: translateY(-18px) scale(1.06);
  }
}
.game-prompt h2 {
  font-size: clamp(24px, 3vw, 36px);
  margin: 8px 0 12px;
}
.game-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-column: 2;
}
.game-choice {
  min-height: 74px;
  border: 1px solid #c4a966;
  border-radius: 14px;
  background: #f8ecc8;
  color: #12231d;
  text-align: left;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.game-choice:hover,
.game-choice:focus-visible {
  border-color: #0b5f4a;
  background: #e7efd8;
}
.game-choice span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #0b5f4a;
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 900;
}
.arcade-complete {
  border-color: rgba(240, 201, 111, 0.45);
}
@media (max-width: 900px) {
  .atlas-notes,
  .game-board {
    grid-template-columns: 1fr;
  }
  .game-controls {
    grid-column: auto;
  }
  .arcade-hud {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .hud-stats {
    grid-column: 2;
    justify-content: start;
  }
}
@media (max-width: 600px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .atlas-actions,
  .game-controls {
    grid-template-columns: 1fr;
    display: grid;
  }
  .game-scene {
    min-height: 220px;
  }
  .arcade-hud h1 {
    font-size: 26px;
  }
  .shop-card img,
  .relic-card img,
  .arcade-card img {
    height: 126px;
  }
}

/* Premium polish pass: glass, avatar settings, rank hall, AI trophy frames. */
.topbar {
  max-width: none;
  padding-inline: 22px;
  background: linear-gradient(
    180deg,
    rgba(4, 16, 13, 0.78),
    rgba(4, 16, 13, 0.38)
  );
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}
.topbar nav {
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar nav a {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.topbar nav a:hover,
.topbar nav a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(240, 201, 111, 0.32);
  margin: 0;
  padding: 8px 12px;
}
.panel,
.mode-card,
.destination,
.achievement-card,
.shop-card,
.relic-card,
.arcade-card,
.rank-card,
.avatar-choice {
  backdrop-filter: blur(14px);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
.panel:hover,
.mode-card:hover,
.destination:hover,
.shop-card:hover,
.relic-card:hover,
.arcade-card:hover,
.rank-card:hover,
.avatar-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 201, 111, 0.58);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.page-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  background: linear-gradient(
    145deg,
    rgba(8, 42, 33, 0.78),
    rgba(6, 18, 15, 0.66)
  );
  border-color: rgba(240, 201, 111, 0.24);
}
.page-back,
.stable-hero > .page-back,
.atlas-detail > .page-back {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(240, 201, 111, 0.28);
  color: #ffe49a;
}
.stable-hero > .page-back,
.atlas-detail > .page-back {
  position: absolute;
  left: 22px;
  top: 22px;
}
.trophy-frame {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 24px;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 232, 165, 0.42),
    rgba(8, 42, 33, 0.92) 62%,
    #04100d
  );
  border: 1px solid rgba(240, 201, 111, 0.42);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.trophy-frame.large {
  width: 150px;
  height: 150px;
  border-radius: 34px;
}
.trophy-frame img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
}
.achievement-art {
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.achievement-detail-art {
  border-radius: 34px;
  overflow: visible;
}
.settings-dashboard,
.leaderboard-page {
  display: grid;
  gap: 18px;
}
.profile-card {
  grid-template-columns: 220px minmax(0, 1fr);
  background: linear-gradient(
    145deg,
    rgba(9, 42, 33, 0.95),
    rgba(5, 18, 15, 0.9)
  );
  color: #f8f4ea;
}
.profile-card img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(240, 201, 111, 0.24),
    rgba(7, 37, 30, 0.9) 66%,
    #04100d
  );
  border-radius: 22px;
  border: 1px solid rgba(240, 201, 111, 0.32);
}
.profile-card input {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(240, 201, 111, 0.3);
}
.profile-stats.expanded {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.avatar-picker {
  padding: 22px;
  background: linear-gradient(
    145deg,
    rgba(12, 47, 38, 0.9),
    rgba(7, 22, 18, 0.92)
  );
  color: #f8f4ea;
  border-color: rgba(240, 201, 111, 0.28);
}
.avatar-picker header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.avatar-picker header span:last-child {
  color: #d8eadf;
  font-size: 13px;
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.avatar-choice {
  appearance: none;
  border: 1px solid rgba(240, 201, 111, 0.22);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  color: #f8f4ea;
  padding: 12px;
  text-align: center;
  cursor: pointer;
}
.avatar-choice.selected {
  border-color: #f0c96f;
  box-shadow:
    0 0 0 2px rgba(240, 201, 111, 0.36),
    0 20px 52px rgba(0, 0, 0, 0.32);
}
.avatar-choice img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 14px;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(240, 201, 111, 0.22),
    rgba(5, 18, 15, 0.72)
  );
}
.avatar-choice b {
  display: block;
  font:
    700 16px/1.15 Georgia,
    serif;
  margin-top: 8px;
}
.avatar-choice small {
  display: block;
  color: #d3dfd6;
  font-size: 11px;
}
.rank-hero {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(
    145deg,
    rgba(11, 65, 51, 0.95),
    rgba(5, 18, 15, 0.9)
  );
  color: #f8f4ea;
}
.rank-hero img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  border-radius: 20px;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(240, 201, 111, 0.25),
    rgba(4, 16, 13, 0.85)
  );
}
.rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rank-card {
  display: grid;
  grid-template-columns: auto 72px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(145deg, #f5e8c4, #d8be80);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 18px;
}
.rank-card.first {
  background: linear-gradient(145deg, #fff0b9, #d6a84b 55%, #0b5f4a);
  color: #08130f;
}
.rank-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(4, 16, 13, 0.18);
}
.rank-medal {
  font:
    900 22px Georgia,
    serif;
  color: #0b5f4a;
}
.rank-card h3 {
  margin: 0;
}
.rank-card p {
  margin: 2px 0;
  color: #506157;
}
.rank-card strong {
  grid-column: 1/-1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.atlas-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(180px, 240px));
  gap: 12px;
}

.atlas-hero.atlas-ornate {
  position: relative;
  min-height: 360px;
  align-items: end;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(4, 15, 20, 0.97) 0%,
      rgba(4, 15, 20, 0.78) 38%,
      rgba(4, 15, 20, 0.2) 72%
    ),
    url("assets/environments/living-atlas-v1.webp") center / cover no-repeat;
  border-color: rgba(232, 191, 100, 0.42);
}
.atlas-hero.atlas-ornate > * {
  position: relative;
  z-index: 1;
}
.atlas-hero.atlas-ornate > div:first-child {
  max-width: 650px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(4, 15, 20, 0.58);
  backdrop-filter: blur(8px);
}
.companion-card-modern {
  content-visibility: auto;
  contain-intrinsic-size: 320px 430px;
}
.atlas-controls label {
  font-weight: 800;
  font-size: 12px;
  color: #d8eadf;
}
.atlas-controls input,
.atlas-controls select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(240, 201, 111, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 10px 12px;
}
.atlas-notes {
  grid-template-columns: 1.25fr 1fr 1fr;
}
.atlas-notes .wide li {
  margin-bottom: 8px;
}
.game-token {
  border: 1px solid rgba(255, 255, 255, 0.34);
  cursor: pointer;
}
.game-token:after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.game-token.collected {
  opacity: 0.18;
  transform: scale(0.35) !important;
  pointer-events: none;
}
.game-token:nth-child(4) {
  left: 72%;
  top: 68%;
}
.game-token:nth-child(5) {
  left: 8%;
  top: 62%;
}
.game-choice {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.economy-ledger {
  padding: 18px;
}
.economy-ledger h2 {
  margin-bottom: 10px;
}
@media (max-width: 1100px) {
  .profile-stats.expanded,
  .avatar-grid,
  .rank-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rank-hero {
    grid-template-columns: 130px 1fr;
  }
  .rank-hero .button {
    grid-column: 2;
  }
  .rank-hero img {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 700px) {
  .profile-card,
  .rank-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .profile-card img,
  .rank-hero img {
    margin: auto;
  }
  .profile-stats.expanded,
  .avatar-grid,
  .rank-grid,
  .atlas-controls,
  .atlas-notes {
    grid-template-columns: 1fr;
  }
  .avatar-picker header {
    display: grid;
  }
  .avatar-choice img {
    height: 170px;
  }
  .rank-card {
    text-align: left;
  }
  .stable-hero > .page-back {
    left: 14px;
    top: 14px;
  }
}

/* Final palette balance: deeper mythological green with blue, violet, gold, and wood tones. */
:root {
  --midnight: #030a13;
  --night: #071526;
  --surface: #efe0bc;
  --surface-2: #c59a5a;
  --ink: #121b22;
  --muted: #66727d;
  --gold: #e8bf64;
  --violet: #6f4fb4;
  --emerald: #063d32;
  --spinel: #052b25;
  --wood: #5b351e;
  --blue: #0b2446;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}
body {
  background-image:
    radial-gradient(
      circle at 12% -4%,
      rgba(111, 79, 180, 0.22),
      transparent 32%
    ),
    radial-gradient(circle at 92% 8%, rgba(11, 36, 70, 0.46), transparent 36%),
    linear-gradient(
      160deg,
      rgba(3, 10, 19, 0.72),
      rgba(6, 30, 26, 0.76) 45%,
      rgba(3, 16, 14, 0.85)
    ),
    url("assets/textures/emerald-wood-gold-texture.webp");
  background-size: auto, auto, auto, cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #030a13;
}
.topbar {
  background: linear-gradient(
    180deg,
    rgba(6, 14, 26, 0.88),
    rgba(5, 28, 24, 0.62)
  );
  border-bottom-color: rgba(232, 191, 100, 0.18);
}
.brand-mark {
  background: radial-gradient(circle, #fff2b3, #b9832e);
  color: #08211d;
  box-shadow: 0 0 28px rgba(232, 191, 100, 0.22);
}
.page-head,
.atlas-hero,
.market-hero,
.relic-loadout,
.arcade-hero,
.profile-card,
.settings-page,
.avatar-picker,
.rank-hero {
  background:
    radial-gradient(
      circle at 12% 0,
      rgba(232, 191, 100, 0.16),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(11, 36, 70, 0.92),
      rgba(6, 31, 27, 0.9) 58%,
      rgba(36, 20, 52, 0.78)
    );
  border-color: rgba(232, 191, 100, 0.28);
}
.dashboard > .panel,
.atlas-entry,
.shop-card,
.relic-card,
.arcade-card,
.setup-panel,
.study-card,
.feedback-modal,
.completion,
.exam-review.panel,
.rank-card {
  background: linear-gradient(145deg, #f2e2bd, #caa569 65%, #b4874f);
  border-color: rgba(255, 246, 214, 0.72);
}
.primary {
  background: linear-gradient(135deg, #0b5a49, #062e2a 60%, #231434);
  border-color: rgba(232, 191, 100, 0.55);
}
.secondary {
  background: linear-gradient(145deg, #f4e7c7, #c99e5f 72%, #7b4b27);
  color: #111b18;
}
.mode-card {
  background: linear-gradient(145deg, #071526, #102443 55%, #1b1231);
  border-color: rgba(232, 191, 100, 0.22);
}
.mode-card.selected {
  background: linear-gradient(145deg, #0b5a49, #0b2446 56%, #2b1841);
  outline-color: var(--gold);
}
.achievement-card,
.shop-card,
.relic-card,
.arcade-card,
.avatar-choice {
  background-image:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(145deg, rgba(242, 226, 189, 0.96), rgba(201, 158, 95, 0.94));
}
.trophy-frame {
  position: relative;
  background: radial-gradient(
    circle at 50% 36%,
    rgba(232, 191, 100, 0.16),
    rgba(6, 61, 50, 0.42) 42%,
    rgba(7, 21, 38, 0.74) 72%,
    rgba(3, 10, 19, 0.92)
  );
  border-color: rgba(232, 191, 100, 0.46);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(232, 191, 100, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.trophy-frame:before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    transparent 42%,
    rgba(111, 79, 180, 0.12) 68%,
    transparent
  );
  pointer-events: none;
}
.trophy-frame .trophy-cup {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45));
  transform: translateY(1%);
}
.trophy-frame.large .trophy-cup {
  width: 88%;
  height: 88%;
}
.trophy-frame .trophy-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 29%;
  height: 29%;
  object-fit: contain;
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle, #f7e5a7, #7b4b27 58%, #061e1a);
  border: 1px solid rgba(255, 234, 164, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.trophy-frame.large .trophy-badge {
  right: 11px;
  bottom: 11px;
}
.trophy-frame.rare,
.trophy-frame.epic,
.trophy-frame.legendary {
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(111, 79, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.trophy-frame.mythic {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 56px rgba(232, 191, 100, 0.26),
    0 0 38px rgba(111, 79, 180, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.achievement-hero,
.home-hero,
.stable-hero,
.companion-detail {
  border-color: rgba(232, 191, 100, 0.38);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.leaderboard-page .rank-card.first {
  background: linear-gradient(
    145deg,
    #fff0ba,
    #d9a94e 48%,
    #6f4fb4 76%,
    #08221d
  );
  color: #070e0c;
}
.game-scene {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(232, 191, 100, 0.24),
      transparent 32%
    ),
    radial-gradient(
      circle at 20% 70%,
      rgba(111, 79, 180, 0.24),
      transparent 34%
    ),
    linear-gradient(180deg, #0b2446, #061e1a 62%, #030a13);
}
.game-token {
  background: radial-gradient(
    circle at 35% 30%,
    #fff2b8,
    #e8bf64 38%,
    #6f4fb4 72%,
    #061e1a
  );
}
.profile-stats article {
  background: linear-gradient(145deg, #f2e2bd, #caa569);
  border-color: rgba(255, 246, 214, 0.75);
}
.atlas-study-guide {
  background:
    radial-gradient(
      circle at 18% 0,
      rgba(232, 191, 100, 0.18),
      transparent 34%
    ),
    linear-gradient(145deg, #0b2446, #061e1a 60%, #211330);
}

/* Final deploy polish: richer boxes without adding unnecessary image weight. */
.panel,
.study-card,
.feedback-modal,
.completion,
.answer,
.game-choice,
input,
select {
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.study-card,
.feedback-modal,
.completion,
.setup-panel {
  background-image:
    radial-gradient(
      circle at 12% 0,
      rgba(255, 240, 186, 0.28),
      transparent 30%
    ),
    linear-gradient(145deg, rgba(246, 231, 195, 0.98), rgba(190, 143, 79, 0.96));
  border: 1px solid rgba(255, 246, 214, 0.78);
}
.question,
.feedback-modal h2,
.completion h1 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}
.answer,
.game-choice {
  background: linear-gradient(
    145deg,
    rgba(255, 249, 229, 0.96),
    rgba(221, 191, 128, 0.9)
  );
  border-color: rgba(93, 60, 25, 0.2);
  position: relative;
  overflow: hidden;
}
.shop-card,
.relic-card,
.arcade-card,
.game-choice {
  position: relative;
  overflow: hidden;
}
.answer:before,
.game-choice:before,
.atlas-entry:before,
.shop-card:before,
.relic-card:before,
.arcade-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28),
    transparent 32%,
    rgba(232, 191, 100, 0.12) 62%,
    transparent
  );
  pointer-events: none;
}
.answer > *,
.game-choice > *,
.atlas-entry > *,
.shop-card > *,
.relic-card > *,
.arcade-card > * {
  position: relative;
  z-index: 1;
}
input,
select {
  background: linear-gradient(
    145deg,
    rgba(9, 31, 45, 0.88),
    rgba(5, 45, 38, 0.86)
  );
  border-color: rgba(232, 191, 100, 0.34);
  color: #fff;
}
.trophy-scroll {
  max-height: none;
}
.achievement-library .achievement-grid {
  max-height: 72vh;
  overflow: auto;
  padding-right: 10px;
  scrollbar-color: rgba(232, 191, 100, 0.75) rgba(7, 21, 38, 0.55);
}
.achievement-tools {
  display: grid;
}
.achievement-tabs {
  display: flex;
}
.daily-challenge {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 0, rgba(232, 191, 100, 0.2), transparent 34%),
    linear-gradient(
      145deg,
      rgba(11, 36, 70, 0.94),
      rgba(6, 61, 50, 0.88) 58%,
      rgba(36, 20, 52, 0.78)
    );
  color: #f8f4ea;
}
.daily-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background:
    radial-gradient(
      circle at 18% 0,
      rgba(232, 191, 100, 0.22),
      transparent 32%
    ),
    linear-gradient(145deg, rgba(11, 36, 70, 0.94), rgba(6, 61, 50, 0.88));
  color: #f8f4ea;
}
.daily-card p {
  color: #d9e5dc;
}
.daily-card .meter,
.daily-challenge .meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.daily-card .meter i,
.daily-challenge .meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e8bf64, #6f4fb4, #0fb38c);
}
.leaderboard-banner {
  display: grid;
  min-height: 260px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
  border: 1px solid rgba(232, 191, 100, 0.38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  text-decoration: none;
  color: #fff;
}
.leaderboard-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leaderboard-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(3, 10, 19, 0.9),
    rgba(3, 10, 19, 0.38) 54%,
    rgba(3, 10, 19, 0.74)
  );
}
.leaderboard-banner span {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 28px;
  display: grid;
  gap: 4px;
}
.leaderboard-banner small {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e8bf64;
  font-weight: 900;
}
.leaderboard-banner b {
  font:
    800 clamp(30px, 5vw, 56px)/1.05 Georgia,
    serif;
}
.leaderboard-banner em {
  font-style: normal;
  color: #d9e5dc;
}
.destination.board {
  background-image:
    linear-gradient(#06101ccc, #06101c66),
    url("assets/navigation/leaderboard-citadel.png");
  background-position: center;
  background-size: cover;
}
.atlas-entry {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  background-image:
    radial-gradient(circle at 85% 0, rgba(111, 79, 180, 0.2), transparent 35%),
    linear-gradient(145deg, rgba(244, 226, 188, 0.98), rgba(190, 143, 79, 0.94));
}
.atlas-entry.featured {
  border-color: rgba(232, 191, 100, 0.72);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    0 0 38px rgba(232, 191, 100, 0.14);
}
.atlas-entry .atlas-actions {
  align-self: end;
  margin-top: auto;
}
.atlas-study-guide .completion-stats div {
  background: linear-gradient(145deg, #fff8e5, #ead6a7);
  border: 1px solid rgba(240, 201, 111, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}
.atlas-study-guide .completion-stats b {
  color: #0a5948;
  text-shadow: none;
}
.atlas-study-guide .completion-stats span {
  color: #35473f;
}
.atlas-rank {
  position: absolute;
  right: 14px;
  top: 12px;
  font:
    900 22px Georgia,
    serif;
  color: rgba(11, 36, 70, 0.32);
}
.atlas-ornate {
  position: relative;
  overflow: hidden;
}
.atlas-ornate:after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 191, 100, 0.18),
    transparent 68%
  );
  pointer-events: none;
}
.avatar-grid {
  align-items: stretch;
}
.avatar-choice {
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 0;
}
.avatar-choice button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 12px;
  display: grid;
  gap: 5px;
  text-align: center;
  cursor: pointer;
  height: 100%;
}
.avatar-choice button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.avatar-choice img,
.profile-card > img,
.rank-hero > img,
.avatar-market-card > img {
  object-fit: contain;
  object-position: center bottom;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(232, 191, 100, 0.22),
    rgba(7, 21, 38, 0.82) 68%
  );
  border-radius: 16px;
}
.avatar-choice img {
  height: 190px;
}
.profile-card > img {
  height: 260px;
}
.avatar-choice em {
  font-style: normal;
  color: #efe5bf;
  font-size: 11px;
}
.avatar-choice span {
  font-weight: 900;
  color: #fff;
}
.avatar-choice.epic,
.avatar-choice.legendary,
.avatar-choice.mythic,
.profile-card.epic,
.profile-card.legendary,
.profile-card.mythic,
.avatar-market-card.epic,
.avatar-market-card.legendary,
.avatar-market-card.mythic {
  background-image:
    radial-gradient(
      circle at 50% 0,
      rgba(232, 191, 100, 0.25),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7, 21, 38, 0.95),
      rgba(6, 61, 50, 0.88) 58%,
      rgba(36, 20, 52, 0.9)
    );
  color: #fff;
}
.avatar-choice.legendary,
.profile-card.legendary,
.avatar-market-card.legendary {
  box-shadow:
    0 0 44px rgba(111, 79, 180, 0.18),
    0 22px 58px rgba(0, 0, 0, 0.34);
}
.avatar-choice.mythic,
.profile-card.mythic,
.avatar-market-card.mythic {
  box-shadow:
    0 0 54px rgba(232, 191, 100, 0.2),
    0 0 34px rgba(15, 179, 140, 0.16),
    0 24px 64px rgba(0, 0, 0, 0.38);
}
.avatar-market-card img {
  height: 220px;
}
.shop-card.avatar-market-card p {
  min-height: 72px;
}
@media (max-width: 700px) {
  .daily-challenge,
  .daily-card {
    grid-template-columns: 1fr;
  }
  .leaderboard-banner {
    min-height: 220px;
  }
  .avatar-choice img {
    height: 220px;
  }
  .profile-card > img {
    height: 240px;
  }
}

/* Public launch polish pass: readability, hierarchy, and finished fantasy surfaces. */
.panel,
.mode-card,
.destination,
.achievement-card,
.shop-card,
.relic-card,
.arcade-card,
.rank-card,
.avatar-choice,
.daily-card,
.daily-challenge {
  border-width: 1px;
}
.panel {
  background-clip: padding-box;
}
.page-head {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.page-head h1,
.home-hero h1,
.leaderboard-banner b,
.destination span {
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.page-head .eyebrow,
.daily-challenge .eyebrow,
.daily-card .eyebrow,
.section-head .eyebrow {
  color: #f0c96f;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.button,
.primary,
.secondary,
.quiet {
  letter-spacing: 0.01em;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    filter 0.16s ease;
}
.button:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
.quiet:focus-visible {
  outline: 3px solid rgba(255, 229, 151, 0.96);
  outline-offset: 3px;
}
.primary {
  background: linear-gradient(135deg, #0d735c, #052f2b 58%, #231434);
  color: #fff;
  border-color: rgba(255, 225, 145, 0.74);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 28px rgba(15, 179, 140, 0.16);
}
.primary:hover:not(:disabled) {
  filter: saturate(1.08) brightness(1.06);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    0 0 36px rgba(232, 191, 100, 0.14);
}
.secondary {
  background: linear-gradient(145deg, #fff2c9, #d1a05b 64%, #6b3f24);
  color: #071410;
  border-color: rgba(255, 236, 174, 0.7);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.secondary:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(232, 191, 100, 0.14);
}
.button:disabled,
.primary:disabled,
.secondary:disabled {
  opacity: 0.56;
  filter: saturate(0.75);
  box-shadow: none;
}
.dashboard > .panel,
.atlas-entry,
.shop-card,
.relic-card,
.arcade-card,
.setup-panel,
.study-card,
.feedback-modal,
.completion,
.exam-review.panel,
.rank-card,
.profile-stats article {
  color: #111b18;
}
.dashboard > .panel h2,
.atlas-entry h3,
.shop-card h3,
.relic-card h3,
.arcade-card h3,
.study-card h2,
.feedback-modal h2,
.completion h1,
.rank-card h3,
.profile-stats b {
  color: #081712;
}
.dashboard > .panel p,
.atlas-entry p,
.shop-card p,
.relic-card p,
.arcade-card p,
.completion-stats span,
.profile-stats span,
.rank-card p {
  color: #38443f;
}
.dashboard > .panel .eyebrow,
.atlas-entry .eyebrow,
.shop-card .eyebrow,
.relic-card .eyebrow,
.arcade-card .eyebrow {
  color: #7a4f16;
  text-shadow: none;
}
.dashboard > .panel,
.rank-card {
  position: relative;
  overflow: hidden;
}
.dashboard > .panel:after,
.atlas-entry:after,
.shop-card:after,
.relic-card:after,
.arcade-card:after,
.rank-card:after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -18px 34px rgba(72, 39, 12, 0.13);
}
.achievement-card,
.shop-card,
.relic-card,
.arcade-card,
.atlas-entry {
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.answer,
.game-choice {
  color: #111b18;
  border-color: rgba(70, 45, 19, 0.28);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -16px 28px rgba(93, 60, 25, 0.1);
}
.answer:hover,
.answer:focus-visible,
.answer.selected,
.game-choice:hover,
.game-choice:focus-visible {
  background: linear-gradient(145deg, #fff6dd, #d9c27c);
  border-color: #0d735c;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(13, 115, 92, 0.18);
}
.answer > span,
.game-choice span {
  background: linear-gradient(145deg, #0f765f, #062f2b);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.daily-challenge {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  border-color: rgba(232, 191, 100, 0.42);
  background:
    radial-gradient(
      circle at 10% 0,
      rgba(232, 191, 100, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 72% 12%,
      rgba(111, 79, 180, 0.2),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(8, 24, 42, 0.96),
      rgba(5, 50, 42, 0.95) 58%,
      rgba(24, 15, 42, 0.94)
    );
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.daily-challenge:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      transparent 28%,
      rgba(232, 191, 100, 0.08) 72%,
      transparent
    ),
    radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.28), transparent 42%);
  pointer-events: none;
}
.daily-challenge > div,
.daily-challenge > .actions {
  position: relative;
  z-index: 1;
}
.daily-challenge h2 {
  color: #fff8e8;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
  font-size: clamp(28px, 3vw, 42px);
}
.daily-challenge p {
  color: #edf5ec;
  max-width: 78ch;
  font-weight: 650;
}
.daily-challenge .completion-stats {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  max-width: 1050px;
}
.daily-challenge .completion-stats div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(255, 245, 214, 0.96),
    rgba(218, 179, 101, 0.95) 62%,
    rgba(138, 89, 39, 0.96)
  );
  border: 1px solid rgba(255, 239, 178, 0.82);
  border-radius: 16px;
  color: #071410;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -22px 36px rgba(79, 42, 13, 0.18);
}
.daily-challenge .completion-stats div:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.36),
    transparent 36%,
    rgba(255, 232, 160, 0.12)
  );
  pointer-events: none;
}
.daily-challenge .completion-stats b {
  position: relative;
  color: #06231d;
  font:
    900 36px/1 Georgia,
    serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.daily-challenge .completion-stats span {
  position: relative;
  color: #283a33;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.daily-challenge .meter,
.daily-card .meter {
  height: 10px;
  background: rgba(3, 10, 19, 0.42);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
.daily-challenge .meter i,
.daily-card .meter i {
  box-shadow: 0 0 20px rgba(232, 191, 100, 0.28);
}
.daily-challenge .actions {
  align-self: center;
  display: grid;
  gap: 12px;
  min-width: 210px;
}
.daily-challenge .actions .button {
  width: 100%;
  min-height: 54px;
  border-radius: 14px;
  font-size: 16px;
}
.daily-challenge .actions .primary {
  background: linear-gradient(135deg, #11846b, #052f2b 58%, #211330);
  color: #fff;
  border-color: #ffd978;
}
.daily-challenge .actions .secondary:not(:disabled) {
  background: linear-gradient(145deg, #ffe9ab, #ce9045 68%, #4f2b1c);
  color: #071410;
}
.daily-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(232, 191, 100, 0.38);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.daily-card h2,
.daily-card p {
  position: relative;
  z-index: 1;
}
.daily-card .button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #fff0ba, #cf9854 68%, #58321f);
  color: #071410;
  border-color: rgba(255, 236, 174, 0.72);
}
.daily-card p {
  color: #edf5ec;
  font-weight: 620;
}
.destination {
  box-shadow:
    inset 0 -120px 88px rgba(2, 8, 12, 0.86),
    0 16px 44px rgba(0, 0, 0, 0.32);
}
.destination:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    transparent 38%,
    rgba(0, 0, 0, 0.18)
  );
  pointer-events: none;
}
.destination span,
.destination b {
  position: relative;
  z-index: 1;
}
.destination b {
  color: #edf5ec;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  font-weight: 800;
}
.destination:hover,
.destination:focus-visible {
  box-shadow:
    inset 0 -128px 90px rgba(2, 8, 12, 0.9),
    0 24px 62px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(232, 191, 100, 0.42);
}
.shop-card button,
.relic-card button,
.arcade-card button,
.avatar-choice button {
  position: relative;
  z-index: 2;
}
input::placeholder {
  color: #b9c4c0;
}
select option {
  background: #071526;
  color: #fff;
}
@media (max-width: 900px) {
  .daily-challenge {
    grid-template-columns: 1fr;
  }
  .daily-challenge .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .daily-challenge .completion-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .daily-challenge {
    padding: 20px;
  }
  .daily-challenge .completion-stats,
  .daily-challenge .actions {
    grid-template-columns: 1fr;
  }
  .daily-challenge h2 {
    font-size: 28px;
  }
  .destination {
    min-height: 132px;
  }
  .topbar nav a:hover,
  .topbar nav a:focus-visible {
    padding: 8px 10px;
  }
}

/* Final interaction polish: marketplace depth, clearer destinations, and real arcade feedback. */
.destinations {
  align-items: stretch;
}
.destination {
  min-height: 162px;
  background-position: center;
  box-shadow:
    inset 0 -82px 72px rgba(2, 8, 12, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 44px rgba(0, 0, 0, 0.32);
}
.destination.arcade {
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.08),
      rgba(3, 10, 19, 0.56) 72%,
      rgba(3, 10, 19, 0.78)
    ),
    url("assets/navigation/destination-arcade.webp");
}
.destination.atlas {
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.08),
      rgba(3, 10, 19, 0.54) 72%,
      rgba(3, 10, 19, 0.76)
    ),
    url("assets/navigation/destination-atlas.webp");
}
.destination.stable {
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.04),
      rgba(3, 10, 19, 0.5) 72%,
      rgba(3, 10, 19, 0.74)
    ),
    url("assets/navigation/stable.png");
  background-position: center 44%;
}
.destination.board {
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.06),
      rgba(3, 10, 19, 0.52) 72%,
      rgba(3, 10, 19, 0.76)
    ),
    url("assets/navigation/leaderboard-citadel.png");
}
.destination:after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    transparent 48%,
    rgba(0, 0, 0, 0.08)
  );
}
.destination:hover,
.destination:focus-visible {
  box-shadow:
    inset 0 -92px 78px rgba(2, 8, 12, 0.68),
    0 24px 62px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(232, 191, 100, 0.42);
}
.destination {
  min-height: 184px;
  padding: 28px;
  background-size: cover;
  border-color: rgba(232, 191, 100, 0.34);
}
.destination span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(5, 16, 28, 0.74),
    rgba(5, 45, 37, 0.66)
  );
  border: 1px solid rgba(232, 191, 100, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
.destination b {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 2px 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(3, 10, 19, 0.48);
}
.destination.arcade {
  background-position: center 46%;
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.02),
      rgba(3, 10, 19, 0.28) 58%,
      rgba(3, 10, 19, 0.62)
    ),
    url("assets/navigation/destination-arcade.webp");
}
.destination.atlas {
  background-position: center 45%;
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.02),
      rgba(3, 10, 19, 0.26) 58%,
      rgba(3, 10, 19, 0.6)
    ),
    url("assets/navigation/destination-atlas.webp");
}
.destination.stable {
  background-position: center 50%;
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.02),
      rgba(3, 10, 19, 0.24) 58%,
      rgba(3, 10, 19, 0.58)
    ),
    url("assets/navigation/stable.png");
}
.destination.board {
  background-position: center 52%;
  background-image:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.02),
      rgba(3, 10, 19, 0.28) 58%,
      rgba(3, 10, 19, 0.62)
    ),
    url("assets/navigation/leaderboard-citadel.png");
}
.rank-hero {
  grid-template-columns: 170px minmax(0, 1fr) minmax(180px, auto);
  overflow: hidden;
}
.rank-copy {
  min-width: 0;
}
.rank-copy h2 {
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: clamp(26px, 3.4vw, 42px);
}
.rank-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.rank-actions .button {
  white-space: normal;
  text-align: center;
}
.leaderboard-banner span {
  max-width: min(820px, 100%);
}
.leaderboard-banner b {
  overflow-wrap: anywhere;
}
.market-guides {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
}
.market-guide {
  padding: 22px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0, rgba(232, 191, 100, 0.2), transparent 34%),
    linear-gradient(
      145deg,
      rgba(11, 36, 70, 0.95),
      rgba(6, 61, 50, 0.88) 58%,
      rgba(36, 20, 52, 0.82)
    );
  color: #f8f4ea;
  border-color: rgba(232, 191, 100, 0.32);
}
.market-guide h2 {
  color: #fff8e8;
}
.market-guide p {
  color: #e2eee6;
}
.market-guide:after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 191, 100, 0.16),
    transparent 68%
  );
  pointer-events: none;
}
.market-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.market-actions .button {
  position: relative;
  z-index: 1;
}
.feedback-modal {
  width: min(780px, 100%);
}
.answer-checkpoint {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(88, 55, 20, 0.18);
  background: linear-gradient(
    145deg,
    rgba(255, 246, 214, 0.72),
    rgba(190, 143, 79, 0.38)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 12px 28px rgba(0, 0, 0, 0.14);
}
.answer-checkpoint.is-correct {
  border-color: rgba(13, 115, 92, 0.28);
  background: linear-gradient(
    145deg,
    rgba(236, 246, 223, 0.78),
    rgba(184, 200, 117, 0.38)
  );
}
.answer-checkpoint.is-wrong {
  border-color: rgba(138, 72, 44, 0.28);
  background: linear-gradient(
    145deg,
    rgba(255, 239, 210, 0.82),
    rgba(190, 143, 79, 0.42)
  );
}
.checkpoint-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #111b18;
}
.checkpoint-status > span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #0d735c, #063b32);
  color: #fff8e8;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.is-wrong .checkpoint-status > span {
  background: linear-gradient(145deg, #9b4a38, #5f2d2b);
}
.checkpoint-status b {
  display: block;
  font:
    900 16px/1.1 Georgia,
    serif;
  color: #081712;
}
.checkpoint-status small {
  display: block;
  color: #40534b;
  font-weight: 750;
}
.checkpoint-status em {
  display: block;
  margin-top: 2px;
  color: #704b16;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.checkpoint-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.feedback-pill {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(18, 35, 29, 0.16);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.08)
  );
  color: #23372f;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.feedback-pill:hover,
.feedback-pill:focus-visible {
  border-color: rgba(13, 115, 92, 0.36);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.44),
    rgba(232, 191, 100, 0.16)
  );
  color: #081712;
}
.feedback-lessons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.feedback-lessons article {
  background: linear-gradient(145deg, #fff3d6, #d8b46d);
  border: 1px solid rgba(88, 55, 20, 0.18);
  border-radius: 14px;
  padding: 14px;
  color: #111b18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.12);
}
.feedback-lessons article h3 {
  font:
    800 18px/1.15 Georgia,
    serif;
  margin: 5px 0 8px;
  color: #081712;
}
.feedback-lessons article p {
  margin: 6px 0;
  color: #263631;
}
.feedback-lessons article .eyebrow {
  color: #704b16;
  text-shadow: none;
}
.feedback-lessons .formula-note {
  background: linear-gradient(145deg, #ecf6df, #b8c875 62%, #8a8e43);
}
.arcade-feedback {
  max-width: 980px;
  margin: 28px auto;
  padding: 28px;
  color: #111b18;
}
.arcade-feedback > h1 {
  font-size: clamp(32px, 5vw, 54px);
}
.game-board {
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}
.game-scene {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 18px;
  color: #f8f4ea;
  text-align: center;
}
.game-scene p {
  max-width: 34ch;
  margin: 0;
  color: #d9e5dc;
  font-weight: 700;
}
.mini-title {
  font:
    900 22px Georgia,
    serif;
  color: #ffe49a;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.microbe-lane,
.capsule-bin,
.runner-track,
.memory-seals,
.forge-runes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.microbe-dot,
.capsule {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 174, 0.68);
  background: radial-gradient(
    circle at 35% 30%,
    #fff2b8,
    #e8bf64 36%,
    #6f4fb4 70%,
    #061e1a
  );
  box-shadow: 0 0 24px rgba(232, 191, 100, 0.2);
  cursor: pointer;
}
.game-scene .game-token {
  position: relative;
  left: auto !important;
  top: auto !important;
  animation: arcadeFloat 3.8s ease-in-out infinite;
}
.capsule {
  border-radius: 999px;
  width: 76px;
  height: 38px;
}
.capsule:after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.22);
}
.safe-step,
.forge-runes button,
.memory-seals button {
  min-height: 44px;
  border: 1px solid rgba(232, 191, 100, 0.45);
  border-radius: 12px;
  background: linear-gradient(145deg, #f7e7be, #bf8b49);
  color: #071410;
  font-weight: 900;
  cursor: pointer;
  padding: 8px 12px;
}
.safe-step.collected,
.forge-runes button.collected,
.memory-seals button.collected,
.microbe-dot.collected,
.capsule.collected {
  opacity: 0.55;
  transform: scale(0.92);
  filter: saturate(0.7);
}
.dose-slider {
  width: min(320px, 90%);
  accent-color: #e8bf64;
}
.dial-readout {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(232, 191, 100, 0.32);
  color: #ffe49a;
  font-weight: 900;
}
.game-prompt p {
  font-weight: 700;
  color: #d9e5dc;
}
.game-prompt h2 {
  text-wrap: balance;
}
@media (max-width: 1100px) {
  .rank-hero {
    grid-template-columns: 130px minmax(0, 1fr);
  }
  .rank-actions {
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-guides {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .game-board {
    grid-template-columns: 1fr;
  }
  .feedback-lessons {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .destination {
    min-height: 150px;
  }
  .rank-actions {
    grid-template-columns: 1fr;
  }
  .market-guide {
    padding: 18px;
  }
  .arcade-feedback {
    padding: 20px;
    margin: 12px auto;
  }
  .microbe-dot {
    width: 50px;
    height: 50px;
  }
}

/* Embedded arcade assessment pass: answers live inside the game world. */
.arcade-game-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 20px;
  align-items: stretch;
  background:
    radial-gradient(
      circle at 12% 0,
      rgba(232, 191, 100, 0.16),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(8, 24, 42, 0.96),
      rgba(4, 42, 35, 0.94) 58%,
      rgba(24, 15, 42, 0.92)
    );
  border-color: rgba(232, 191, 100, 0.34);
  color: #f8f4ea;
}
.destination,
.arcade-card,
.arcade-game-shell,
.microbe-field,
.runner-arena,
.dose-console,
.formula-arena,
.match-3-panel,
.blast-panel {
  contain: layout paint;
}
.destination,
.runner-avatar,
.forge-current,
.microbe-target,
.match-tile,
.blast-piece {
  will-change: transform;
}
.embedded-prompt {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.embedded-prompt span {
  display: block;
  margin-bottom: 8px;
  color: #e8bf64;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font:
    900 12px/1.2 system-ui,
    sans-serif;
}
.embedded-prompt h2 {
  margin: 0 0 12px;
  color: #fff8e8;
  font-size: clamp(20px, 2.3vw, 30px);
  text-wrap: balance;
}
.embedded-prompt p {
  margin: 0;
  color: #dcebe3;
  font-weight: 700;
  line-height: 1.45;
}
.hud-stats {
  display: grid;
  grid-template-columns: repeat(4, auto auto);
  gap: 3px 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(1, 8, 14, 0.38);
  border: 1px solid rgba(232, 191, 100, 0.22);
}
.hud-stats b {
  color: #ffe49a;
  font:
    900 18px/1 Georgia,
    serif;
}
.hud-stats span {
  color: #cbdacf;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.microbe-field,
.runner-arena,
.dose-console,
.formula-arena,
.match-3-panel,
.blast-panel {
  min-height: 430px;
  border-radius: 18px;
  border: 1px solid rgba(232, 191, 100, 0.32);
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(232, 191, 100, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 18% 70%,
      rgba(111, 79, 180, 0.24),
      transparent 32%
    ),
    linear-gradient(180deg, #081d36, #05291f 64%, #030a13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 58px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}
.microbe-field {
  min-height: 520px;
}
.microbe-target {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: min(250px, 42%);
  min-height: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255, 230, 154, 0.68);
  background:
    radial-gradient(
      circle at 34% 22%,
      rgba(255, 255, 255, 0.35),
      transparent 22%
    ),
    linear-gradient(145deg, #f4d57b, #a96c30 54%, #0d5a49);
  color: #071410;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  cursor: pointer;
  padding: 12px;
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  font-weight: 900;
}
.microbe-target i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #08362e, #0e7d64 52%, #e8bf64);
  box-shadow: 0 0 22px rgba(232, 191, 100, 0.38);
}
.microbe-target b {
  font-size: 13px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.microbe-target.hit {
  filter: brightness(1.25);
  box-shadow: 0 0 34px rgba(97, 230, 180, 0.68);
}
.microbe-target.miss {
  filter: saturate(0.55);
  box-shadow: 0 0 26px rgba(255, 86, 86, 0.58);
}
.contamination {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
.contamination span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #e8bf64, #ef4444);
}
.runner-arena {
  display: grid;
  align-items: end;
  padding: 24px;
}
.runner-track-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  height: 100%;
  align-items: stretch;
}
.runner-arena:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 34px,
      rgba(232, 191, 100, 0.12) 35px 38px
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(255, 255, 255, 0.08) 25%,
      transparent 26%,
      transparent 49%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 51%,
      transparent 74%,
      rgba(255, 255, 255, 0.08) 75%,
      transparent 76%
    );
  transform: translateY(var(--road, 0));
  opacity: 0.55;
  pointer-events: none;
}
.runner-track-lines,
.runner-avatar {
  position: relative;
  z-index: 1;
}
.runner-gate {
  position: relative;
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 280px;
  border-radius: 18px;
  border: 1px solid rgba(232, 191, 100, 0.34);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.02)
    ),
    linear-gradient(145deg, rgba(9, 38, 62, 0.9), rgba(6, 62, 50, 0.82));
  color: #f8f4ea;
  cursor: pointer;
  padding: 12px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.runner-gate span {
  color: #e8bf64;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 900;
}
.runner-gate b {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.runner-gate.selected {
  border-color: #ffe49a;
  box-shadow:
    0 0 0 3px rgba(232, 191, 100, 0.22),
    inset 0 0 38px rgba(232, 191, 100, 0.18);
}
.runner-avatar {
  position: absolute;
  bottom: 24px;
  left: calc(12.5% + (var(--lane, 0) * 25%));
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff0ad, #0d735c);
  color: #071410;
  font-weight: 900;
  transition: left 0.18s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}
.runner-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.dose-console {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
}
.dose-orb {
  width: min(260px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 38% 26%,
    #fff6c8,
    #d9a647 42%,
    #0d735c 72%,
    #071410
  );
  border: 2px solid #ffe49a;
  box-shadow:
    0 0 42px rgba(232, 191, 100, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dose-orb b {
  font:
    900 clamp(42px, 9vw, 74px)/1 Georgia,
    serif;
  color: #071410;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.dose-orb span {
  font-weight: 900;
  color: #071410;
}
.true-dial {
  width: min(520px, 86%);
  height: 18px;
  accent-color: #e8bf64;
}
.dose-scale {
  display: flex;
  justify-content: space-between;
  width: min(520px, 86%);
  color: #ffe49a;
  font-weight: 900;
}
.formula-arena {
  display: grid;
  gap: 12px;
  padding: 16px;
  align-content: start;
}
.forge-current {
  justify-self: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff0ba, #ce9045);
  color: #071410;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  transform: translateY(calc(var(--fall, 0) * 1px));
  transition: transform 0.12s linear;
}
.forge-current b {
  margin-left: 8px;
}
.forge-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(42px, 1fr));
  gap: 6px;
}
.forge-grid span,
.forge-slots span {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(232, 191, 100, 0.24);
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff8e8;
  font-weight: 900;
  font-size: 12px;
  overflow: hidden;
  padding: 4px;
}
.forge-grid span.aim {
  box-shadow: inset 0 0 0 2px rgba(232, 191, 100, 0.42);
}
.forge-grid span.target {
  background: rgba(232, 191, 100, 0.12);
}
.forge-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 8px;
}
.forge-slots span {
  background: linear-gradient(
    145deg,
    rgba(232, 191, 100, 0.2),
    rgba(13, 115, 92, 0.18)
  );
}
.forge-slots span.filled {
  background: linear-gradient(145deg, #fff0ba, #0d735c);
  color: #071410;
}
.match-3-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  padding: 16px;
}
.match-grid,
.blast-grid {
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(38px, 1fr));
  gap: 8px;
}
.match-tile {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid rgba(255, 236, 174, 0.58);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.34),
      transparent 24%
    ),
    linear-gradient(145deg, #6f4fb4, #0d735c 58%, #071410);
  color: #fff8e8;
  font-weight: 900;
  cursor: pointer;
  padding: 5px;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.match-tile span {
  font-size: 10px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.match-tile.selected {
  outline: 3px solid #ffe49a;
}
.match-tile.cleared {
  filter: brightness(1.4);
}
.ward-goal {
  border-radius: 16px;
  border: 1px solid rgba(232, 191, 100, 0.28);
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  color: #dcebe3;
}
.ward-goal span {
  color: #e8bf64;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.ward-goal b {
  display: block;
  color: #fff8e8;
  margin: 8px 0;
}
.blast-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  padding: 16px;
}
.blast-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(232, 191, 100, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff8e8;
  font-weight: 900;
  font-size: 10px;
  cursor: pointer;
  overflow: hidden;
}
.blast-cell.correct {
  background: linear-gradient(145deg, #fff0ba, #0d735c);
  color: #071410;
}
.blast-side {
  display: grid;
  align-content: start;
  gap: 12px;
  color: #ffe49a;
  font-weight: 900;
}
.blast-pieces {
  display: grid;
  gap: 10px;
}
.blast-piece {
  min-height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(232, 191, 100, 0.4);
  background: linear-gradient(145deg, #f3e5bd, #b4874f);
  color: #071410;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
.blast-piece small {
  display: block;
  color: #315047;
  font-weight: 900;
}
.blast-piece.selected {
  outline: 3px solid #ffe49a;
}
.blast-piece.key-piece {
  background: linear-gradient(145deg, #fff4c8, #d9a647 58%, #0d735c);
}
.playable-forge {
  position: relative;
  grid-template-columns: repeat(var(--cols), minmax(46px, 1fr));
  align-items: stretch;
}
.playable-forge button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(232, 191, 100, 0.24);
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff8e8;
  font-weight: 900;
  font-size: 12px;
  overflow: hidden;
  padding: 4px;
  cursor: default;
}
.playable-forge button.falling {
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.55),
      transparent 22%
    ),
    linear-gradient(145deg, #fff0ba, #d9a647 58%, #0d735c);
  color: #071410;
  box-shadow:
    0 0 0 3px rgba(255, 228, 154, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.34);
  animation: forgePulse 1.1s ease-in-out infinite;
}
.playable-forge button.filled {
  background: linear-gradient(
    145deg,
    rgba(232, 191, 100, 0.28),
    rgba(13, 115, 92, 0.34)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.playable-forge button.target {
  border-color: rgba(255, 228, 154, 0.62);
  background: linear-gradient(
    145deg,
    rgba(232, 191, 100, 0.2),
    rgba(111, 79, 180, 0.18)
  );
}
.forge-current {
  display: grid;
  gap: 4px;
  text-align: center;
}
.forge-current small {
  display: block;
  color: #365246;
  font-size: 12px;
}
.forge-playfield .forge-slots span {
  font-size: 11px;
}
@keyframes forgePulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}
.block-blast-game {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.block-blast-game .blast-grid {
  grid-template-columns: repeat(var(--size), minmax(34px, 1fr));
  background: linear-gradient(
    145deg,
    rgba(0, 0, 0, 0.18),
    rgba(255, 255, 255, 0.04)
  );
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(232, 191, 100, 0.18);
}
.blast-cell.target {
  border-color: #ffe49a;
  background: radial-gradient(
    circle,
    rgba(255, 228, 154, 0.34),
    rgba(111, 79, 180, 0.16) 58%,
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: inset 0 0 18px rgba(232, 191, 100, 0.18);
}
.blast-cell.filled {
  background: linear-gradient(145deg, #24466c, #0d735c);
  color: #fff8e8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.blast-cell.correct.filled {
  background: linear-gradient(145deg, #fff0ba, #0d735c);
  color: #071410;
}
.blast-side [data-blast-goal] {
  margin: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(232, 191, 100, 0.24);
  color: #f8f4ea;
  font-size: 13px;
  line-height: 1.3;
}
.blast-piece.shaped {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 8px;
  align-items: center;
  min-height: 92px;
}
.blast-piece.shaped small {
  grid-column: 1/-1;
}
.piece-shape {
  position: relative;
  width: 66px;
  height: 50px;
  display: block;
  border-radius: 10px;
  background: rgba(7, 20, 16, 0.14);
}
.piece-shape i {
  position: absolute;
  left: calc(var(--x) * 20px + 4px);
  top: calc(var(--y) * 20px + 4px);
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(145deg, #fff0ba, #0d735c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}
@media (max-width: 980px) {
  .arcade-game-shell,
  .match-3-panel,
  .blast-panel {
    grid-template-columns: 1fr;
  }
  .microbe-field,
  .runner-arena,
  .dose-console,
  .formula-arena,
  .match-3-panel,
  .blast-panel {
    min-height: 360px;
  }
  .hud-stats {
    grid-template-columns: repeat(2, auto auto);
  }
  .runner-track-lines {
    grid-template-columns: repeat(2, 1fr);
  }
  .runner-avatar {
    display: none;
  }
}
@media (max-width: 620px) {
  .arcade-game-shell {
    padding: 14px;
  }
  .microbe-target {
    position: static;
    transform: none;
    width: 100%;
    min-height: 82px;
  }
  .microbe-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .contamination {
    position: static;
  }
  .match-grid,
  .blast-grid {
    gap: 5px;
  }
  .match-tile,
  .blast-cell {
    border-radius: 8px;
  }
  .match-tile span,
  .blast-cell {
    font-size: 8px;
  }
  .runner-track-lines {
    grid-template-columns: 1fr;
  }
  .runner-gate {
    min-height: 92px;
  }
  .dose-orb {
    width: min(210px, 80vw);
  }
}

/* Culture Command flagship arcade game */
.culture-feature {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
  overflow: hidden;
  padding: 0;
  margin: 20px 0 26px;
  background: linear-gradient(145deg, #07182b, #062d27 62%, #29183d);
  color: #f8f4ea;
  border-color: rgba(232, 191, 100, 0.42);
}
.culture-feature img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}
.culture-feature > div {
  padding: clamp(24px, 4vw, 48px);
  align-self: center;
}
.culture-feature h2,
.cc-menu h1,
.cc-case h1,
.cc-result h1,
.cc-finish h1 {
  font:
    800 clamp(34px, 5vw, 64px)/1 Georgia,
    serif;
  margin: 10px 0 18px;
}
.culture-feature p {
  color: #d8e4df;
  font-size: 17px;
  line-height: 1.65;
}
.culture-feature .actions {
  align-items: center;
}
.culture-feature .actions span {
  color: #b9c9c2;
  font-size: 13px;
}
.culture-command {
  display: grid;
  gap: 20px;
}
.cc-menu {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #07182b, #062d27 62%, #29183d);
  color: #f8f4ea;
}
.cc-menu > div {
  padding: clamp(28px, 5vw, 60px);
  align-self: center;
}
.cc-menu p {
  color: #d8e4df;
  font-size: 18px;
  line-height: 1.65;
}
.cc-menu img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}
.cc-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cc-modes button {
  min-height: 132px;
  padding: 18px;
  text-align: left;
  color: #f8f4ea;
  background: linear-gradient(
    145deg,
    rgba(11, 36, 70, 0.96),
    rgba(6, 49, 41, 0.94)
  );
  cursor: pointer;
}
.cc-modes span,
.cc-modes small {
  display: block;
  color: #b9c9c2;
}
.cc-modes b {
  display: block;
  margin: 12px 0 6px;
  font:
    700 20px Georgia,
    serif;
  color: #ffe4a0;
}
.cc-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(232, 191, 100, 0.3);
  border-radius: 18px;
  background: #071d1acc;
  color: #f8f4ea;
}
.cc-hud > div:nth-child(2) span,
.cc-hud small {
  display: block;
  color: #b9c9c2;
  font-size: 12px;
}
.cc-hud > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
}
.cc-hud strong {
  color: #ffe49a;
}
.cc-stage {
  position: relative;
  min-height: 680px;
  padding: 0;
  overflow: hidden;
  background: #031019;
}
.cc-canvas {
  position: absolute;
  inset: 0;
}
.cc-case {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 3vw, 38px);
  right: clamp(14px, 3vw, 38px);
  bottom: clamp(14px, 3vw, 34px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(232, 191, 100, 0.35);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(3, 15, 27, 0.94),
    rgba(5, 40, 33, 0.94)
  );
  color: #f8f4ea;
  backdrop-filter: blur(12px);
}
.cc-case h1 {
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1.18;
  max-width: 42ch;
}
.cc-case > p {
  color: #cfe0da;
}
.cc-drugs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.cc-drugs button {
  min-height: 100px;
  padding: 12px;
  border: 1px solid #caa65a;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8e7b9, #c99c55);
  color: #101d18;
  text-align: left;
  cursor: pointer;
}
.cc-drugs i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d6957;
  color: white;
  font-style: normal;
}
.cc-drugs b,
.cc-drugs small {
  display: block;
  margin-top: 7px;
}
.cc-drugs small {
  color: #46534d;
}
.cc-drugs button:hover,
.cc-drugs button:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px #8ff1df,
    0 16px 36px #0008;
}
.cc-result,
.cc-finish {
  max-width: 1000px;
  margin: 20px auto;
  padding: clamp(24px, 5vw, 58px);
  color: #f8f4ea;
  background: linear-gradient(145deg, #07182b, #062d27 62%, #29183d);
}
.cc-result.wrong {
  border-color: #c46e71;
}
.cc-result.correct {
  border-color: #73cbb5;
}
.cc-result-stats {
  display: flex;
  gap: 32px;
  margin: 24px 0;
}
.cc-result-stats b {
  font-size: 30px;
  color: #ffe49a;
}
.cc-result-stats small {
  display: block;
  font-size: 11px;
  color: #b9c9c2;
}
.cc-result article {
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, #103d3a, #102a3e);
  border: 1px solid #4f9c8f;
  color: #f8f4ea;
}
.cc-result article p {
  line-height: 1.6;
}
.cc-result article > small {
  display: block;
  margin-top: 18px;
  color: #53615b;
}
.cc-result > h1,
.cc-finish > h1 {
  max-width: 920px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.04;
}
.cc-feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 16px;
}
.cc-feedback-card h2 {
  margin: 7px 0 20px;
  color: #ffe49a;
  font-size: clamp(24px, 3vw, 34px);
}
.cc-feedback-card h3 {
  margin: 0 0 6px;
  color: #9ee3d5;
  font-size: 16px;
}
.cc-feedback-card p {
  margin: 0;
  color: #f8f4ea;
  font-size: 17px;
}
.cc-feedback-label {
  color: #d9bd70;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cc-feedback-miss {
  border-color: #c77c82 !important;
  background: linear-gradient(145deg, #442530, #172c3d) !important;
}
.cc-full-comparison {
  margin: 0 0 22px;
  border: 1px solid #557069;
  border-radius: 14px;
  background: #081d25;
  overflow: hidden;
}
.cc-full-comparison summary {
  padding: 16px 18px;
  color: #f8f4ea;
}
.cc-full-comparison > div {
  padding: 0 18px 18px;
  color: #d7e2de;
  line-height: 1.55;
}
.cc-full-comparison small { color: #aebfba; }
.cc-result-actions,
.cc-finish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-finish > p {
  color: #d9e5e0;
  font-size: 19px;
}
.cc-finish-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0;
}
.cc-finish-stats > div {
  min-height: 132px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #477f75;
  border-radius: 18px;
  background: linear-gradient(145deg, #123b39, #10273a);
  box-shadow: inset 0 1px 0 #ffffff14;
}
.cc-finish-stats b {
  color: #ffe49a;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
}
.cc-finish-stats span {
  margin-top: 12px;
  color: #d7e2de;
  font-size: 14px;
  font-weight: 700;
}
.cc-result summary {
  cursor: pointer;
  font-weight: 800;
}
@media (max-width: 1000px) {
  .cc-modes {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-drugs {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-stage {
    min-height: 850px;
  }
}
@media (max-width: 760px) {
  .culture-feature,
  .cc-menu {
    grid-template-columns: 1fr;
  }
  .culture-feature img {
    min-height: 220px;
  }
  .cc-menu img {
    min-height: 260px;
    order: -1;
  }
  .cc-hud {
    grid-template-columns: auto 1fr;
  }
  .cc-hud > div:last-child {
    grid-column: 2;
  }
  .cc-case {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 300px 10px 10px;
  }
  .cc-stage {
    min-height: 0;
  }
  .cc-drugs,
  .cc-modes {
    grid-template-columns: 1fr;
  }
  .cc-result-stats {
    flex-wrap: wrap;
  }
  .cc-finish-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .cc-finish-stats { grid-template-columns: 1fr; }
}

/* Functional achievement cosmetics and competitive scholar ranks. */
.achievement-frame {
  --achievement-frame-color: #8fd4c5;
  --achievement-frame-glow: rgba(93, 218, 192, 0.28);
  position: relative;
  border-color: var(--achievement-frame-color) !important;
  box-shadow:
    0 0 0 3px
      color-mix(in srgb, var(--achievement-frame-color) 30%, transparent),
    0 0 34px var(--achievement-frame-glow),
    0 22px 58px rgba(0, 0, 0, 0.28) !important;
}
.achievement-frame.frame-epic {
  --achievement-frame-color: #c49bff;
  --achievement-frame-glow: rgba(149, 87, 236, 0.36);
}
.achievement-frame.frame-legendary {
  --achievement-frame-color: #ffd873;
  --achievement-frame-glow: rgba(255, 194, 61, 0.4);
}
.achievement-frame.frame-mythic {
  --achievement-frame-color: #67ffe2;
  --achievement-frame-glow: rgba(45, 255, 213, 0.42);
}
.achievement-frame > img,
.achievement-frame .rank-card img {
  outline: 3px solid var(--achievement-frame-color) !important;
  outline-offset: 4px;
}
.equipped-cosmetic {
  padding: 9px 12px;
  border: 1px solid var(--achievement-frame-color, #8fd4c5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff3c4 !important;
}
.reward-shelf-grid article.equipped {
  outline: 3px solid rgba(102, 255, 224, 0.55);
  background: linear-gradient(
    145deg,
    rgba(20, 100, 82, 0.58),
    rgba(53, 31, 82, 0.72)
  );
}
.reward-shelf-grid article .button {
  width: 100%;
  min-height: 36px;
  margin-top: 7px;
  padding: 7px 9px;
  font-size: 11px;
}
.reward-shelf-grid article em {
  margin-top: 7px;
  color: #9eb8ae;
  font-size: 10px;
  font-style: normal;
}
.active-companion.companion-charm,
.companion-stage.companion-charm {
  position: relative;
  --charm-color: #74d9c3;
  --charm-glow: rgba(83, 239, 204, 0.32);
}
.companion-charm.charm-epic {
  --charm-color: #c39aff;
  --charm-glow: rgba(161, 95, 246, 0.4);
}
.companion-charm.charm-legendary {
  --charm-color: #ffd76b;
  --charm-glow: rgba(255, 194, 52, 0.45);
}
.companion-charm.charm-mythic {
  --charm-color: #6dffe6;
  --charm-glow: rgba(54, 255, 220, 0.5);
}
.companion-charm > img {
  filter: drop-shadow(0 0 22px var(--charm-glow));
}
.equipped-charm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--charm-color);
  border-radius: 999px;
  background: rgba(3, 25, 22, 0.86);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 24px var(--charm-glow);
}
.equipped-charm i {
  color: var(--charm-color);
  font-style: normal;
  text-shadow: 0 0 10px var(--charm-color);
}
.companion-stage .equipped-charm {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}
.rank-tier-badge {
  display: inline-flex;
  width: max-content;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #0b5f4a;
  background: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rank-hero .rank-tier-badge {
  color: #fff2b2;
  background: rgba(3, 18, 16, 0.48);
}
.rank-progress {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 18, 15, 0.2);
}
.rank-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b8d74, #ffe071);
}
.rank-copy > small,
.rank-card div > small {
  display: block;
  margin-top: 5px;
  color: inherit;
  opacity: 0.78;
}
.rank-ladder {
  margin: 18px 0;
  padding: 18px;
  color: #f8f4ea;
  background: linear-gradient(
    145deg,
    rgba(5, 30, 48, 0.96),
    rgba(18, 42, 35, 0.96)
  );
}
.rank-ladder > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.rank-ladder h2 {
  margin: 3px 0 0;
}
.rank-ladder > header > span {
  color: #bbd3ca;
  font-size: 12px;
}
.rank-ladder > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.rank-ladder article {
  display: grid;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.rank-ladder article.current {
  outline: 3px solid rgba(255, 224, 113, 0.55);
  background: rgba(255, 224, 113, 0.13);
}
.rank-ladder article b {
  color: #fff1ae;
}
.rank-ladder article span,
.rank-ladder article small {
  margin-top: 3px;
  color: #c5d8d1;
  font-size: 10px;
}
.rank-card {
  border-top: 5px solid #a66f45;
}
.rank-card.tier-silver {
  border-top-color: #bfcbd2;
}
.rank-card.tier-gold {
  border-top-color: #e4b63f;
}
.rank-card.tier-platinum {
  border-top-color: #4bcbb8;
}
.rank-card.tier-diamond {
  border-top-color: #65a9ff;
}
.rank-card.tier-mythic,
.rank-card.tier-grandmaster {
  border-top-color: #b576ff;
}
.rank-card.podium {
  background: linear-gradient(145deg, #fff0c2, #d6bd7f);
}
@media (max-width: 1050px) {
  .rank-ladder > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .rank-ladder > header {
    display: block;
  }
  .rank-ladder > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reward-shelf-grid {
    grid-template-columns: 1fr;
  }
}

.culture-command:has(.cc-stage) {
  height: calc(100dvh - 158px);
  min-height: min(560px, calc(100dvh - 158px));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
.cc-mission {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  width: min(39%, 430px);
  padding: clamp(14px, 1.8vw, 22px);
  border: 1px solid rgba(232, 191, 100, 0.38);
  border-radius: 16px;
  background: linear-gradient(
    110deg,
    rgba(3, 15, 27, 0.94),
    rgba(5, 42, 34, 0.92)
  );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  color: #f8f4ea;
  backdrop-filter: blur(12px);
}
.cc-mission span {
  color: #8fe8d7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.cc-mission h1 {
  margin: 7px 0;
  font:
    700 clamp(16px, 1.55vw, 23px)/1.22 Georgia,
    serif;
}
.cc-mission p {
  margin: 0;
  color: #c8d9d3;
  font-size: 12px;
  line-height: 1.35;
}
.cc-stage {
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(232, 191, 100, 0.32);
  border-radius: 20px;
  overflow: hidden;
}
.cc-canvas {
  position: absolute;
  inset: 0;
}
.cc-canvas canvas {
  display: block;
}
.cc-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cc-accessible:focus-within {
  z-index: 5;
  left: 12px;
  bottom: 12px;
  width: auto;
  height: auto;
  clip: auto;
  display: flex;
  gap: 8px;
  background: #061d19;
  padding: 10px;
}
.cc-accessible button {
  min-height: 42px;
}
.cc-case,
.cc-drugs {
  display: none;
}
@media (max-width: 760px) {
  .culture-command:has(.cc-stage) {
    height: calc(100dvh - 94px);
    min-height: 500px;
  }
  .cc-hud {
    padding: 8px 10px;
    gap: 8px;
  }
  .cc-hud > div:nth-child(2) b {
    font-size: 13px;
  }
  .cc-mission {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 11px 13px;
  }
  .cc-mission h1 {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.18;
  }
  .cc-mission p {
    display: none;
  }
  .cc-stage {
    min-height: 0;
  }
}

/* Culture Command clarity pass and Germ Bestiary */
.culture-command,
.culture-command button,
.culture-command input {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
.cc-menu h1,
.cc-mission h1,
.cc-result h1,
.cc-finish h1 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 850;
  letter-spacing: -0.035em;
}
.cc-hud {
  background: linear-gradient(
    135deg,
    rgba(3, 24, 42, 0.98),
    rgba(4, 63, 52, 0.96)
  );
  border-color: rgba(88, 255, 221, 0.5);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.34);
}
.cc-hud strong {
  color: #fff36f;
  text-shadow: 0 0 16px rgba(255, 235, 80, 0.32);
}
.cc-mission {
  background: linear-gradient(
    120deg,
    rgba(3, 24, 43, 0.97),
    rgba(4, 69, 57, 0.95)
  );
  border-color: rgba(82, 255, 218, 0.58);
}
.cc-mission span {
  color: #64ffe1;
}
.cc-mission h1 {
  color: #fff;
}
.cc-modes button {
  background: linear-gradient(145deg, #082b50, #075747);
  border-color: rgba(81, 242, 214, 0.34);
}
.cc-modes button b {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #fff36f;
}
.cc-modes button:hover {
  background: linear-gradient(145deg, #0c3e70, #07816a);
}
.germ-bestiary {
  min-height: calc(100dvh - 110px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  color: #ecfffb;
}
.germ-bestiary > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
}
.germ-bestiary > header > div {
  text-align: center;
}
.germ-bestiary > header span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #69ffe2;
}
.germ-bestiary > header h1 {
  margin: 2px 0;
  font:
    900 clamp(30px, 4vw, 52px)/1 Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.05em;
}
.germ-bestiary > header > b {
  color: #fff36f;
}
.bestiary-book {
  position: relative;
  min-height: 560px;
  background: url("assets/arcade/germ-bestiary-book-v1.webp") center/100% 100%
    no-repeat;
  perspective: 1600px;
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.42));
}
.bestiary-pages {
  position: absolute;
  inset: 11% 15% 13%;
  display: block;
  min-width: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center;
}
.bestiary-book.turn-forward .bestiary-pages,
.bestiary-book.turn-back .bestiary-pages {
  animation: bestiaryPageReveal 0.28s ease-out;
}
@keyframes bestiaryPageReveal {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@keyframes bestiaryTurnForward {
  0% {
    transform: rotateY(-72deg);
    opacity: 0.15;
  }
  65% {
    transform: rotateY(6deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes bestiaryTurnBack {
  0% {
    transform: rotateY(72deg);
    opacity: 0.15;
  }
  65% {
    transform: rotateY(-6deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(0);
  }
}
.germ-entry {
  align-self: center;
  color: #0a2a2b;
  min-width: 0;
  text-align: center;
}
.germ-entry > span {
  color: #087764;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.germ-entry h2 {
  margin: 3px 0 5px;
  font:
    900 clamp(20px, 2.2vw, 32px)/1.05 Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: -0.035em;
}
.germ-entry > p {
  max-width: 34ch;
  margin: 0 auto 8px;
  font-size: 12px;
  line-height: 1.35;
}
.germ-portrait {
  width: min(180px, 48%);
  aspect-ratio: 1.15;
  margin: 0 auto;
  background-image: url("assets/arcade/germ-bestiary-creatures-v1.webp");
  background-size: 600% 100%;
  background-position: var(--germ-pos) center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0, 78, 72, 0.25));
}
.germ-entry.locked .germ-portrait {
  filter: grayscale(1) brightness(0.18);
  opacity: 0.42;
}
.germ-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  text-align: left;
}
.germ-facts section {
  padding: 8px;
  border-radius: 9px;
  background: rgba(4, 117, 93, 0.08);
  border: 1px solid rgba(4, 117, 93, 0.15);
}
.germ-facts b {
  font-size: 10px;
  color: #087764;
  text-transform: uppercase;
}
.germ-facts p {
  margin: 3px 0;
  font-size: 11px;
  line-height: 1.25;
}
.germ-entry > small {
  display: block;
  margin-top: 7px;
  color: #526a66;
}
.germ-bestiary > footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.germ-bestiary > footer button {
  min-width: 120px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #5bf0d5;
  background: #073f38;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.germ-bestiary > footer button:disabled {
  opacity: 0.35;
  cursor: default;
}
.germ-bestiary > footer span {
  color: #b8d9d2;
  font-size: 12px;
}
@media (max-width: 760px) {
  .germ-bestiary {
    min-height: calc(100dvh - 90px);
  }
  .germ-bestiary > header {
    grid-template-columns: auto 1fr;
  }
  .germ-bestiary > header > b {
    display: none;
  }
  .bestiary-book {
    min-height: 650px;
    background-size: cover;
    background-position: center;
  }
  .bestiary-pages {
    inset: 8% 11%;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .germ-entry:nth-child(2) {
    display: none;
  }
  .germ-portrait {
    width: 145px;
  }
  .germ-facts {
    grid-template-columns: 1fr;
  }
  .germ-bestiary > footer {
    padding-bottom: 10px;
    margin-bottom: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bestiary-pages,
  .cc-canvas canvas {
    animation: none !important;
    transition: none !important;
  }
}

.cc-menu > div > .button,
.cc-menu > div > a.button {
  display: inline-flex;
  margin: 7px 8px 0 0;
  vertical-align: top;
}
.bestiary-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(330px, 100%);
  margin-top: 16px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(87, 255, 220, 0.58);
  border-radius: 18px;
  background: linear-gradient(135deg, #073e37, #092b50);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.bestiary-launcher:hover,
.bestiary-launcher:focus-visible {
  border-color: #fff36f;
  background: linear-gradient(135deg, #075e50, #0d4779);
  transform: translateY(-2px);
}
.bestiary-launcher img {
  width: 76px !important;
  height: 76px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 14px;
  mix-blend-mode: screen;
}
.bestiary-launcher b,
.bestiary-launcher small {
  display: block;
}
.bestiary-launcher b {
  font-size: 17px;
}
.bestiary-launcher small {
  margin-top: 3px;
  color: #bce8df;
}
.germ-portrait {
  mix-blend-mode: multiply;
  isolation: auto;
  filter: saturate(1.25) contrast(1.08)
    drop-shadow(0 8px 16px rgba(0, 78, 72, 0.18));
}
.germ-entry.locked .germ-portrait {
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(0.55);
  opacity: 0.22;
}
.reference-pages {
  display: block !important;
  inset: 10% 13% 12% !important;
}
.spectrum-reference-spread {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  text-align: center;
  color: #0a2a2b;
}
.spectrum-reference-spread > span {
  color: #087764;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.spectrum-reference-spread h2 {
  margin: 3px 0 6px;
  font:
    900 clamp(18px, 2vw, 28px)/1 Inter,
    system-ui,
    sans-serif;
}
.spectrum-reference-spread img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.spectrum-reference-spread small {
  color: #526a66;
}
.patient-status {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 116px;
  padding: 9px;
  border: 1px solid rgba(90, 255, 222, 0.58);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(3, 22, 39, 0.96),
    rgba(4, 67, 56, 0.94)
  );
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(10px);
}
.patient-portrait {
  width: 86px;
  height: 86px;
  margin: 0 auto 5px;
  border-radius: 14px;
  background-image: url("assets/arcade/culture-command-patient-states-v1.webp");
  background-size: 300% 100%;
  background-position: var(--patient-pos) center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.patient-status > b {
  display: block;
  color: #fff;
  font-size: 13px;
}
.patient-status > strong {
  display: block;
  margin-top: 4px;
  color: #fff36f;
  font-size: 18px;
}
.patient-status > span {
  display: block;
  color: #bce8df;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.patient-meter {
  position: absolute;
  top: 9px;
  right: -13px;
  width: 9px;
  height: 94px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: #251e35;
}
.patient-meter i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, #ef5968 0 35%, #ffd85b 55%, #52f1c3 80%);
  border-radius: 999px;
}
.cc-hud > div:last-child strong:nth-of-type(2),
.cc-hud > div:last-child strong:nth-of-type(2) + small {
  display: none;
}
@media (max-width: 760px) {
  .cc-menu > div > .button,
  .cc-menu > div > a.button {
    display: flex;
    width: 100%;
    margin: 7px 0;
  }
  .patient-status {
    top: auto;
    bottom: 12px;
    right: 9px;
    width: 88px;
    padding: 6px;
  }
  .patient-portrait {
    width: 62px;
    height: 62px;
  }
  .patient-meter {
    height: 70px;
  }
  .patient-status > strong {
    font-size: 14px;
  }
  .bestiary-launcher {
    width: 100%;
  }
  .reference-pages {
    inset: 8% 8% !important;
  }
  .spectrum-reference-spread h2 {
    font-size: 15px;
  }
}
.germ-portrait {
  background-image: url("assets/arcade/germ-bestiary-creatures-alpha-v1.webp");
  mix-blend-mode: normal;
  filter: saturate(1.18) contrast(1.05)
    drop-shadow(0 8px 16px rgba(0, 78, 72, 0.2));
}
.germ-entry.locked .germ-portrait {
  mix-blend-mode: normal;
  filter: grayscale(1) brightness(0.25);
  opacity: 0.3;
}

/* Culture Command launch-bank layout refinements */
.cc-mission.long {
  width: min(45%, 520px);
  max-height: 34%;
  padding: 11px 14px;
  overflow: auto;
  scrollbar-width: thin;
}
.cc-mission.long h1 {
  font-size: clamp(13px, 1.16vw, 17px);
  line-height: 1.16;
  margin: 4px 0;
}
.cc-mission.long p {
  font-size: 10px;
}
.germ-entry {
  align-self: stretch;
  display: grid;
  grid-template-rows: 112px auto auto minmax(48px, auto) auto auto;
  align-content: start;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45.5%;
  max-width: 45.5%;
  min-width: 0;
  overflow: hidden;
  padding: 0 4px;
}
.germ-entry:nth-child(1) {
  left: 0;
}
.germ-entry:nth-child(2) {
  right: 0;
}
.germ-portrait {
  width: 132px;
  height: 106px;
  aspect-ratio: auto;
  margin: 0 auto;
  background-size: 600% 100%;
  align-self: end;
}
.germ-entry > span {
  align-self: end;
}
.germ-entry h2 {
  min-height: 34px;
  display: grid;
  place-items: center;
}
.germ-entry > p {
  min-height: 48px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.germ-facts {
  align-self: start;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.germ-facts section {
  min-width: 0;
  overflow: hidden;
  padding: 7px 9px;
}
.germ-facts b,
.germ-facts p,
.germ-entry > small {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.germ-entry > small {
  padding-inline: 4px;
}
.spectrum-reference-spread img {
  cursor: zoom-in;
  border-radius: 6px;
  outline: 2px solid rgba(8, 119, 100, 0.18);
  outline-offset: 3px;
}
.spectrum-reference-spread:after {
  content: "Click chart to enlarge";
  position: absolute;
  right: 18px;
  bottom: 28px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #073f38;
  color: #fff;
  font:
    800 11px Inter,
    system-ui,
    sans-serif;
  pointer-events: none;
}
.spectrum-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 2vh 2vw;
  background: rgba(1, 12, 22, 0.92);
  backdrop-filter: blur(12px);
}
.spectrum-lightbox > div {
  width: 96vw;
  height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(100, 255, 225, 0.45);
  border-radius: 18px;
  overflow: hidden;
  background: #f8f4e9;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6);
}
.spectrum-lightbox header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #063d38;
  color: #fff;
}
.spectrum-lightbox header button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: #0b665b;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}
.spectrum-lightbox > div > div {
  overflow: auto;
  padding: 12px;
  background: #eee9dc;
}
.spectrum-lightbox img {
  display: block;
  width: max(1400px, 100%);
  height: auto;
  margin: auto;
}
.spectrum-lightbox small {
  padding: 7px 14px;
  color: #405955;
}
@media (max-width: 760px) {
  .cc-mission.long {
    width: calc(100% - 112px);
    max-height: 38%;
    padding: 8px 10px;
  }
  .cc-mission.long h1 {
    font-size: 12px;
    line-height: 1.13;
  }
  .germ-entry {
    inset: 0;
    width: 100%;
    max-width: 100%;
    grid-template-rows: 100px auto auto auto auto auto;
  }
  .germ-facts {
    grid-template-columns: 1fr;
  }
  .germ-portrait {
    width: 122px;
    height: 96px;
  }
  .germ-entry > p {
    min-height: 0;
  }
  .spectrum-lightbox {
    padding: 0;
  }
  .spectrum-lightbox > div {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .spectrum-lightbox img {
    width: 1200px;
  }
}
@media (max-width: 620px) {
  .answer-checkpoint {
    display: grid;
    gap: 12px;
  }
  .checkpoint-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .checkpoint-actions .button,
  .feedback-pill {
    width: 100%;
  }
}

/* Course gate and avatar readability polish. */
.course-gate {
  min-height: calc(100vh - 108px);
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(520px, 1fr);
  gap: 0;
  border: 1px solid rgba(240, 201, 111, 0.34);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  background: #06110e;
}
.course-gate-art {
  min-height: 100%;
  background-image:
    linear-gradient(180deg, rgba(4, 16, 13, 0.02), rgba(4, 16, 13, 0.56)),
    url("assets/environments/moonlit-apothecary-hero.webp");
  background-size: cover;
  background-position: center;
}
.course-gate-panel {
  padding: clamp(24px, 4vw, 52px);
  background: linear-gradient(
    145deg,
    rgba(9, 34, 27, 0.96),
    rgba(4, 16, 13, 0.98) 58%,
    rgba(30, 22, 55, 0.94)
  );
  display: grid;
  align-content: center;
  gap: 18px;
}
.course-gate-panel h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
}
.course-gate-panel p {
  max-width: 720px;
  color: #d9eadf;
  margin: 0;
  font-size: 17px;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.program-icon {
  min-height: 134px;
  border: 1px solid rgba(240, 201, 111, 0.26);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.035)
  );
  color: #f8f4ea;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.program-icon i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f6dfa4, #b88534);
  color: #10251d;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}
.program-icon b {
  font:
    800 25px/1 Georgia,
    serif;
  color: #fff;
}
.program-icon small {
  color: #c9d9d0;
  font-weight: 700;
}
.program-icon.selected {
  border-color: #f0c96f;
  background: linear-gradient(
    145deg,
    rgba(240, 201, 111, 0.24),
    rgba(11, 95, 74, 0.22)
  );
  box-shadow:
    0 0 0 2px rgba(240, 201, 111, 0.18),
    0 18px 44px rgba(0, 0, 0, 0.32);
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.course-card {
  min-height: 124px;
  text-align: left;
  border: 1px solid rgba(240, 201, 111, 0.24);
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(243, 229, 189, 0.98),
    rgba(207, 176, 117, 0.96)
  );
  color: #12231d;
  padding: 16px;
  display: grid;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}
.course-card span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
  color: #0b5f4a;
}
.course-card b {
  font:
    800 20px/1.12 Georgia,
    serif;
  color: #12231d;
}
.course-card small {
  color: #46564b;
  font-weight: 700;
}
.course-card strong {
  align-self: end;
  color: #063b32;
  font-size: 12px;
}
.course-card.selected {
  border-color: #fff6c4;
  box-shadow:
    0 0 0 3px rgba(240, 201, 111, 0.34),
    0 18px 50px rgba(0, 0, 0, 0.34);
}
.course-gate-panel .leaderboard-notice {
  margin: 12px 2px 0;
  color: rgba(231, 239, 234, 0.68);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.course-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  background: linear-gradient(
    145deg,
    rgba(12, 47, 38, 0.94),
    rgba(7, 22, 18, 0.96)
  );
  color: #f8f4ea;
}
.course-strip b {
  display: block;
  font:
    800 22px/1.1 Georgia,
    serif;
  color: #fff;
}
.course-strip small {
  display: block;
  color: #d9eadf;
}
.avatar-choice button {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.avatar-choice b {
  display: block;
  background: rgba(2, 12, 10, 0.92);
  color: #fff;
  border: 1px solid rgba(240, 201, 111, 0.42);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 10px 0 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.avatar-choice small,
.avatar-choice em,
.avatar-choice span {
  display: block;
  color: #10251d;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.avatar-choice em {
  font-style: normal;
  color: #254336;
}
.avatar-choice span {
  margin-top: 8px;
  color: #063b32;
}
@media (max-width: 900px) {
  .course-gate {
    grid-template-columns: 1fr;
  }
  .course-gate-art {
    min-height: 220px;
  }
  .course-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .course-gate {
    min-height: calc(100vh - 80px);
    border-radius: 18px;
  }
  .course-gate-panel {
    padding: 22px 16px;
  }
  .program-grid {
    grid-template-columns: 1fr;
  }
  .program-icon {
    min-height: 96px;
  }
  .course-card {
    min-height: 112px;
  }
  .course-strip {
    display: grid;
  }
}

/* Header status must never cover navigation tabs. */
.topbar nav {
  min-width: 0;
}
.header-stats {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
}
.header-stats span,
.header-stats b {
  flex: 0 0 auto;
}
.header-stats .course-stat {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1180px) {
  .header-stats {
    max-width: 230px;
  }
  .header-stats span:not(.course-stat) {
    display: none;
  }
}

/* Make the ranks entry point visible from the profile card. */
.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.profile-actions .button {
  min-width: 150px;
}
.profile-rank-link {
  box-shadow: 0 10px 28px rgba(232, 191, 100, 0.2);
}
@media (max-width: 700px) {
  .profile-actions {
    display: grid;
  }
  .profile-actions .button {
    width: 100%;
    min-width: 0;
  }
}
/* Avatar wardrobe consistency: readable labels and whole-body framed portraits. */
.avatar-choice {
  color: #f8f4ea !important;
  background-image:
    radial-gradient(circle at 50% 0, rgba(232, 191, 100, 0.2), transparent 34%),
    linear-gradient(
      145deg,
      rgba(7, 21, 38, 0.96),
      rgba(6, 61, 50, 0.9) 58%,
      rgba(36, 20, 52, 0.86)
    ) !important;
}
.avatar-choice img,
.profile-card > img,
.rank-hero > img,
.avatar-market-card > img {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(232, 191, 100, 0.24),
    rgba(7, 21, 38, 0.84) 68%,
    rgba(4, 16, 13, 0.96)
  ) !important;
  padding: 8px;
  border: 1px solid rgba(240, 201, 111, 0.32);
}
.avatar-choice b,
.avatar-choice small,
.avatar-choice em,
.avatar-choice span {
  display: block;
  border: 1px solid rgba(240, 201, 111, 0.34);
  background: rgba(2, 12, 10, 0.88);
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}
.avatar-choice b {
  border-radius: 12px;
  padding: 8px 10px;
  margin: 10px 0 6px;
  font-size: 15px;
}
.avatar-choice small,
.avatar-choice em {
  border-radius: 10px;
  padding: 6px 8px;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 750;
}
.avatar-choice span {
  border-radius: 999px;
  padding: 7px 10px;
  margin-top: 8px;
  font-weight: 900;
  color: #ffe49a !important;
}
.avatar-market-card img {
  height: 240px !important;
}
.relic-card img,
.relic-shop .shop-card img {
  object-fit: contain !important;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(232, 191, 100, 0.24),
    rgba(7, 21, 38, 0.86) 70%,
    rgba(4, 16, 13, 0.96)
  ) !important;
}
@media (max-width: 700px) {
  .avatar-market-card img {
    height: 220px !important;
  }
}

/* v56 study-bank and feedback refinements */
.study-progress {
  grid-template-columns: 44px minmax(0, 1fr) auto auto auto;
}
.study-bank-link {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.study-companion-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8f4ea;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(240, 201, 111, 0.32);
  border-radius: 999px;
  padding: 5px 10px;
}
.study-companion-badge img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(4, 16, 13, 0.7);
}
.study-companion-badge span {
  font-size: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-study-page .study-progress {
  grid-template-columns: 44px minmax(0, 1fr) auto auto auto auto;
}
.learn-study-page .study-companion-badge {
  min-width: 0;
  justify-self: end;
  overflow: hidden;
}
.learn-study-page .study-companion-badge img {
  flex: 0 0 42px;
  max-width: 42px;
}
@media (max-width: 1100px) {
  .learn-study-page .study-progress {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
  }
  .learn-study-page .study-bank-link {
    grid-column: 2 / 4;
    justify-self: start;
  }
  .learn-study-page .study-companion-badge {
    grid-column: 4;
    justify-self: end;
  }
}
.rx-case header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rx-case header span {
  font:
    italic 800 30px Georgia,
    serif;
  color: #0b5f4a;
}
.rx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rx-grid section,
.drug-facts,
.drug-atlas-card {
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.rx-grid h3,
.drug-facts h3,
.drug-atlas-card h3 {
  margin: 0 0 10px;
}
.rx-grid dl,
.drug-facts dl,
.drug-atlas-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.rx-grid dt,
.drug-facts dt,
.drug-atlas-card dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #53645b;
  font-weight: 900;
}
.rx-grid dd,
.drug-facts dd,
.drug-atlas-card dd {
  margin: 2px 0 0;
  color: #17251f;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.inline-feedback {
  width: 100%;
  display: grid;
  gap: 16px;
  text-align: left;
  background: linear-gradient(145deg, #f8edce, #d6bb7b);
  border: 1px solid rgba(11, 95, 74, 0.25);
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
}
.checkpoint-status {
  display: flex;
  gap: 12px;
  align-items: center;
}
.checkpoint-status > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b5f4a;
  color: #fff;
  font-weight: 900;
}
.inline-feedback.is-wrong .checkpoint-status > span {
  background: #b64352;
}
.checkpoint-status b {
  display: block;
}
.checkpoint-status small,
.checkpoint-status em {
  display: block;
  color: #52625a;
}
.feedback-lessons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.feedback-lessons article {
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.feedback-lessons .drug-facts {
  grid-column: 1/-1;
}
.checkpoint-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.checkpoint-status > span {
  font-size: 13px;
  line-height: 1;
}
.spelling-entry input {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0;
}
.spelling-card {
  position: relative;
  overflow: hidden;
}
.spelling-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, #e8bf64, #00bfa5, #d95d7a);
  opacity: 0.9;
}
.spelling-note {
  margin: -6px 0 14px;
  color: #4a5a52;
  font-weight: 750;
}
.spelling-entry {
  display: grid;
  gap: 10px;
  max-width: 620px;
}
.spelling-blank {
  min-height: 54px;
  border: 1px dashed rgba(11, 95, 74, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #0b5f4a;
  font:
    900 24px/1.2 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  letter-spacing: 4px;
  overflow: hidden;
}
.spelling-entry input {
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 74, 0.35);
  background: #fffaf0;
  color: #10231d;
  padding: 12px 14px;
}
.free-response-entry {
  max-width: 760px;
}
.free-response-entry textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 74, 0.35);
  background: #fffaf0;
  color: #10231d;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
}
.free-response-entry textarea:focus {
  outline: 3px solid rgba(0, 191, 165, 0.2);
  border-color: #007f6f;
}
.free-response-entry small {
  color: #50645c;
  font-weight: 700;
}
.image-occlusion-card.visual-load-failed {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(166, 62, 62, 0.45);
  background: rgba(255, 245, 238, 0.82);
}
.image-occlusion-card.visual-load-failed figcaption {
  max-width: 560px;
  padding: 24px;
  color: #723c37;
  font-weight: 750;
  text-align: center;
}
.rank-card.me {
  outline: 3px solid rgba(232, 191, 100, 0.72);
  box-shadow:
    0 0 0 6px rgba(232, 191, 100, 0.16),
    0 22px 58px rgba(0, 0, 0, 0.24);
}
.drug-atlas-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.drug-atlas-list .section-head {
  margin-bottom: 0;
}
.drug-atlas-card dl {
  grid-template-columns: 1fr;
}
.avatar-choice b,
.avatar-choice small,
.avatar-choice em,
.avatar-choice span {
  color: #10231d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.avatar-choice button {
  background: linear-gradient(145deg, #fff0c9, #d0ae6f);
}
@media (max-width: 800px) {
  .study-progress {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }
  .study-progress > .study-bank-link,
  .study-progress > .study-companion-badge {
    grid-column: 2;
    justify-self: start;
  }
  .rx-grid,
  .feedback-lessons {
    grid-template-columns: 1fr;
  }
  .study-companion-badge span {
    max-width: 180px;
  }
  .learn-study-page .study-progress {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .learn-study-page .study-bank-link,
  .learn-study-page .study-companion-badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* Shop avatar cards: keep premium portrait art readable at a glance. */
.shop-card.avatar-market-card {
  align-content: start;
  color: #f8f4ea !important;
  background-image:
    radial-gradient(
      circle at 50% 0,
      rgba(240, 201, 111, 0.24),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(6, 23, 36, 0.98),
      rgba(5, 58, 49, 0.94) 58%,
      rgba(33, 24, 55, 0.94)
    ) !important;
}
.avatar-market-card > img {
  width: 100%;
  height: 260px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 16px;
  background: radial-gradient(
    circle at 50% 28%,
    rgba(255, 231, 162, 0.24),
    rgba(8, 28, 44, 0.82) 64%,
    rgba(2, 12, 10, 0.96)
  ) !important;
  padding: 10px;
}
.avatar-market-card .eyebrow,
.avatar-market-card h3,
.avatar-market-card p {
  display: block;
  border: 1px solid rgba(240, 201, 111, 0.34);
  background: rgba(2, 12, 10, 0.9);
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}
.avatar-market-card .eyebrow {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 7px 10px;
  letter-spacing: 0.12em;
}
.avatar-market-card h3 {
  border-radius: 12px;
  padding: 9px 10px;
  margin: 2px 0 0;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.12;
}
.avatar-market-card p {
  min-height: 88px !important;
  border-radius: 12px;
  padding: 10px;
  margin: 0;
  line-height: 1.35;
  color: #eaf7f0 !important;
}
.avatar-market-card p b {
  color: #ffe49a;
}
.avatar-market-card .button {
  margin-top: 4px;
  min-height: 44px;
}
@media (max-width: 700px) {
  .avatar-market-card > img {
    height: 230px !important;
  }
  .avatar-market-card p {
    min-height: 0 !important;
  }
}

/* Avatar render guardrails: preserve full art quality without stretching portraits. */
.avatar-choice img,
.profile-card > img,
.rank-hero > img,
.rank-card img,
.avatar-market-card > img {
  display: block;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: auto;
}
.avatar-choice img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 3/4;
  min-height: 170px;
  max-height: 220px;
}

/* Loaded-bank signals on the class selector. */
.program-icon strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(2, 12, 10, 0.58);
  border: 1px solid rgba(240, 201, 111, 0.28);
  color: #ffe49a;
  font-size: 12px;
  font-weight: 900;
}
.program-icon.ready strong,
.course-card.ready em {
  background: rgba(11, 95, 74, 0.92);
  color: #fff;
}
.program-icon.empty {
  opacity: 0.72;
}
.course-card em {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-self: end;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(18, 35, 29, 0.12);
  color: #254336;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.course-card.ready {
  background: linear-gradient(145deg, #fff1c9, #d5b46f);
}

/* Errors and omissions workbench. */
.rx-workbench header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}
.rx-workbench header small {
  grid-column: 2;
  color: #52625a;
  font-weight: 750;
}
.rx-audit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.rx-audit-strip span {
  border: 1px solid rgba(11, 95, 74, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: #214036;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 850;
}
.rx-workbench-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.88fr) minmax(280px, 1.12fr);
  gap: 12px;
  margin-bottom: 12px;
}
.rx-source-stack {
  display: grid;
  gap: 12px;
}
.rx-compare {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.54),
    rgba(244, 232, 198, 0.72)
  );
  border: 1px solid rgba(11, 95, 74, 0.2);
  border-radius: 14px;
  padding: 14px;
}
.rx-compare h3 {
  margin: 0 0 10px;
}
.rx-compare dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.rx-compare dl > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-top: 1px solid rgba(18, 35, 29, 0.12);
  padding-top: 8px;
}
.rx-compare dl > div:first-child {
  border-top: 0;
  padding-top: 0;
}
.rx-compare dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #53645b;
  font-weight: 900;
}
.rx-compare dd {
  margin: 0;
  color: #17251f;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.rx-compare dd b {
  color: #0b5f4a;
}
@media (max-width: 840px) {
  .rx-workbench-grid,
  .rx-compare dl > div {
    grid-template-columns: 1fr;
  }
  .rx-workbench header {
    grid-template-columns: auto 1fr;
  }
}
.rx-documents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.rx-paper {
  min-width: 0;
  min-height: 620px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 11px 14px;
  padding: clamp(18px, 2.3vw, 28px);
  border: 2px solid #26312c;
  border-radius: 4px;
  color: #111815;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    repeating-linear-gradient(0deg, #f7f2e5 0 23px, #eee6d4 24px);
  box-shadow: 0 14px 28px rgba(31, 26, 17, 0.18);
}
.rx-label-document {
  border-radius: 12px;
  background: #fffdf6;
  box-shadow: 0 14px 28px rgba(31, 26, 17, 0.18), inset 0 0 0 5px #f0eadc;
}
.rx-document-head {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding-bottom: 13px;
  text-align: center;
  border-bottom: 2px solid #26312c;
}
.rx-document-head b { font-size: 18px; }
.rx-document-head > span { font-size: 12px; }
.rx-document-patient,
.rx-label-meta,
.rx-medication-line,
.rx-label-drug,
.rx-document-prescriber,
.rx-partial-fill {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.rx-label-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-medication-line,
.rx-label-drug { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-document-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(38, 49, 44, 0.38);
}
.rx-document-field.wide,
.rx-sig,
.rx-label-patient { grid-column: 1 / -1; }
.rx-document-field small,
.rx-warning small {
  color: #526058;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.rx-document-field > span {
  min-height: 20px;
  color: #101713;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rx-document-field.rx-sig > span {
  font-size: 15px;
  font-weight: 850;
}
.rx-script-body,
.rx-label-script {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 18px 8px;
  text-align: center;
}
.rx-script-body small {
  color: #526058;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rx-script-body strong,
.rx-label-script strong {
  font-size: 18px;
  line-height: 1.35;
}
.rx-script-body strong > span,
.rx-label-script strong > span,
.rx-script-body > span > span,
.rx-label-script > span > span,
.rx-script-body em > span,
.rx-label-script em > span,
.rx-script-quantity > span > span {
  color: inherit;
  font: inherit;
}
.rx-script-body > span,
.rx-label-script > span {
  font-size: 16px;
  font-weight: 760;
  line-height: 1.45;
}
.rx-script-body em,
.rx-label-script em {
  color: #394941;
  font-size: 12px;
}
.rx-script-quantity {
  grid-column: 2;
  justify-self: end;
  display: grid;
  gap: 5px;
  min-width: 120px;
  padding: 8px 0;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
}
.rx-symbol {
  grid-column: 1 / -1;
  margin: 9px 0 5px;
  font: italic 800 35px Georgia, serif;
}
.rx-daw-line {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 2px 0 10px;
}
.rx-daw-line b {
  min-width: 120px;
  font-size: 14px;
  text-align: left;
}
.rx-document-prescriber { margin-top: auto; }
.rx-signature > span {
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-style: italic;
}
.rx-label-patient > span { font-size: 16px; font-weight: 900; }
.rx-label-script { min-height: 220px; }
.rx-label-drug {
  margin-top: 8px;
  padding: 16px 12px;
  border: 2px solid #17221d;
  background: #fff;
}
.rx-label-drug .rx-document-field { border-bottom: 0; }
.rx-warning {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #26312c;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
}
.rx-missing {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px dashed #b52e3d;
  border-radius: 4px;
  color: #a2182c !important;
  background: #fff0f1;
  font-style: italic;
  font-weight: 900 !important;
}
.rx-optional { color: #5d6862 !important; font-style: italic; font-weight: 650 !important; }
.rx-compare-details { margin-top: 14px; }
.rx-compare-details > summary {
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  color: #124f42;
  font-weight: 900;
}
.rx-compare-details[open] .rx-compare { margin-top: 10px; }
@media (max-width: 900px) {
  .rx-documents { grid-template-columns: 1fr; }
  .rx-paper { min-height: 0; }
}
@media (max-width: 540px) {
  .rx-paper,
  .rx-document-patient,
  .rx-label-meta,
  .rx-medication-line,
  .rx-label-drug,
  .rx-document-prescriber,
  .rx-partial-fill { grid-template-columns: 1fr; }
  .rx-paper { padding: 16px; }
  .rx-document-field { grid-column: 1 / -1; }
  .rx-script-quantity { grid-column: 1; }
}

/* Market scouting preview. */
.market-scout {
  width: 100%;
  min-height: 40px;
}
.market-preview-dialog {
  width: min(880px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  gap: 22px;
  position: relative;
  border: 1px solid rgba(240, 201, 111, 0.46);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 28% 0,
      rgba(240, 201, 111, 0.22),
      transparent 34%
    ),
    linear-gradient(145deg, #061723, #063d32 58%, #201637);
  color: #f8f4ea;
  padding: 22px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.72);
}
.market-preview-close {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
}
.market-preview-stage {
  height: min(56vh, 440px);
  min-height: 320px;
  border: 1px solid rgba(240, 201, 111, 0.32);
  border-radius: 18px;
  background: radial-gradient(
    circle at 50% 28%,
    rgba(255, 231, 162, 0.28),
    rgba(8, 28, 44, 0.78) 65%,
    rgba(2, 12, 10, 0.96)
  );
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
}
.market-preview-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 36px);
  max-height: calc(100% - 36px);
  object-fit: contain;
  object-position: center center;
}
.market-preview-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding-right: 18px;
}
.market-preview-copy h2 {
  font-size: 38px;
  margin: 0;
}
.market-preview-copy p {
  color: #d9eadf;
  margin: 0;
}
.boon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.boon-grid article,
.bond-preview {
  border: 1px solid rgba(240, 201, 111, 0.26);
  border-radius: 14px;
  background: rgba(2, 12, 10, 0.48);
  padding: 12px;
}
.boon-grid span,
.bond-preview > span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8bf64;
  font-size: 10px;
  font-weight: 900;
}
.boon-grid b {
  display: block;
  margin: 5px 0;
  color: #fff;
}
.boon-grid small,
.bond-preview small {
  color: #c9d9d0;
}
.bond-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bond-preview i {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-style: normal;
  font-weight: 900;
  color: #ffe49a;
}
.bond-preview i small {
  display: block;
  font-size: 10px;
  font-weight: 750;
  color: #d9eadf;
}
.market-preview-dialog .modal-actions {
  position: static;
  bottom: auto;
  margin-top: 2px;
  padding: 14px 0 0;
  background: transparent;
  border-top: 1px solid rgba(240, 201, 111, 0.22);
}
@media (max-width: 760px) {
  .market-preview-dialog {
    grid-template-columns: 1fr;
  }
  .market-preview-stage {
    height: 300px;
    min-height: 260px;
  }
  .boon-grid {
    grid-template-columns: 1fr;
  }
  .market-preview-copy {
    padding-right: 0;
  }
}
.profile-card > img {
  width: min(220px, 100%);
  height: auto !important;
  aspect-ratio: 1/1;
  justify-self: center;
}
.rank-hero > img {
  width: min(170px, 100%);
  height: auto !important;
  aspect-ratio: 1/1;
  justify-self: center;
}
.avatar-market-card > img {
  height: auto !important;
  aspect-ratio: 4/5;
  min-height: 220px;
  max-height: 260px;
}
@media (max-width: 1100px) {
  .rank-hero > img {
    width: min(130px, 100%);
  }
}
@media (max-width: 700px) {
  .avatar-choice img {
    min-height: 190px;
    max-height: 230px;
  }
  .profile-card > img {
    width: min(240px, 100%);
  }
  .avatar-market-card > img {
    min-height: 210px;
    max-height: 230px;
  }
}

/* Story, reward, and class-dashboard pass. */
.story-home .hero-copy p {
  max-width: 56ch;
}
.class-dashboard {
  margin: 22px 0;
  padding: 22px;
  background: linear-gradient(145deg, #f5e6be, #d4b26f);
  color: #10231d;
}
.class-dashboard > header,
.reward-shelf > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.class-dashboard h2,
.reward-shelf h2 {
  margin: 2px 0 0;
}
.class-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.class-dashboard-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(18, 35, 29, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.38);
  padding: 14px;
  min-width: 0;
}
.class-dashboard-grid article.selected {
  outline: 3px solid rgba(11, 95, 74, 0.34);
  background: rgba(255, 255, 255, 0.6);
}
.class-dashboard-grid article > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0b5f4a;
  font-weight: 900;
}
.class-dashboard-grid h3 {
  margin: 0;
  font:
    800 19px/1.15 Georgia,
    serif;
  color: #10231d;
}
.readiness-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(18, 35, 29, 0.16);
  overflow: hidden;
}
.readiness-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b5f4a, #e8bf64);
}
.class-dashboard-grid dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}
.class-dashboard-grid dt {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #52625a;
  font-weight: 900;
}
.class-dashboard-grid dd {
  margin: 0;
  font-weight: 900;
  color: #10231d;
}
.class-dashboard-grid small {
  color: #34423b;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.reward-shelf {
  margin: 22px 0;
  padding: 22px;
  background: linear-gradient(
    145deg,
    rgba(20, 25, 51, 0.94),
    rgba(7, 22, 18, 0.96)
  );
  color: #f8f4ea;
}
.reward-shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.reward-shelf-grid article {
  min-height: 112px;
  border: 1px solid rgba(240, 201, 111, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0, rgba(240, 201, 111, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.07);
  padding: 14px;
  display: grid;
  gap: 5px;
}
.reward-shelf-grid article.legendary,
.reward-shelf-grid article.mythic {
  border-color: rgba(255, 226, 139, 0.68);
  box-shadow: 0 0 32px rgba(240, 201, 111, 0.12);
}
.reward-shelf-grid b {
  color: #fff;
}
.reward-shelf-grid span {
  color: #ffe49a;
  font-size: 12px;
  font-weight: 900;
}
.reward-shelf-grid small {
  color: #cbd8d0;
  line-height: 1.35;
}
.reward-preview-rich {
  background: linear-gradient(145deg, #fff4d2, #d8bc77);
}
.reward-unlock-toast {
  border-color: rgba(255, 226, 139, 0.8);
}
.companion-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  margin: 22px 0;
  padding: 22px;
  background: linear-gradient(
    145deg,
    rgba(9, 34, 27, 0.96),
    rgba(27, 20, 47, 0.94)
  );
  color: #f8f4ea;
}
.companion-story h2 {
  margin: 4px 0;
  color: #fff;
}
.companion-story p {
  color: #d9eadf;
  margin: 0;
}
.companion-dialogue {
  border: 1px solid rgba(240, 201, 111, 0.32);
  border-radius: 16px;
  background: rgba(2, 12, 10, 0.42);
  padding: 16px;
  display: grid;
  gap: 8px;
}
.companion-dialogue b {
  color: #ffe49a;
}
.companion-dialogue span {
  color: #fff;
}
.companion-dialogue small {
  color: #cbd8d0;
}
.companion-card-modern small {
  background: rgba(2, 12, 10, 0.55);
  border: 1px solid rgba(240, 201, 111, 0.22);
  border-radius: 10px;
  padding: 6px 8px;
}
.companion-locked .button {
  margin-top: 12px;
}
@media (max-width: 1000px) {
  .class-dashboard-grid,
  .reward-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .class-dashboard-grid dl {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .class-dashboard > header,
  .reward-shelf > header,
  .companion-story {
    display: grid;
    grid-template-columns: 1fr;
  }
  .class-dashboard-grid,
  .reward-shelf-grid {
    grid-template-columns: 1fr;
  }
  .class-dashboard .button {
    width: 100%;
  }
}

/* Faster, calmer study setup and heavy-grid rendering. */
.adaptive-study {
  margin-top: 16px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  color: #fff7dd;
  background:
    radial-gradient(circle at 84% 18%, rgba(239, 190, 88, 0.2), transparent 34%),
    linear-gradient(135deg, #0a493d, #15203a 68%, #24183a);
  border-color: rgba(237, 195, 94, 0.52);
}
.adaptive-study h2,
.adaptive-study p {
  margin: 3px 0;
}
.adaptive-study-stats {
  display: flex;
  gap: 8px;
}
.adaptive-study-stats span {
  min-width: 72px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid rgba(255, 232, 165, 0.2);
  border-radius: 12px;
  background: rgba(4, 20, 24, 0.42);
}
.adaptive-study-stats b {
  display: block;
  color: #f3c96b;
  font-size: 20px;
}
.drug-atlas-list {
  display: grid;
  gap: 12px;
}
.drug-atlas-card {
  padding: 0;
  overflow: hidden;
}
.drug-atlas-card summary {
  min-height: 72px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  color: #fff8e6;
  background: linear-gradient(120deg, #0d493d, #17233e);
  list-style: none;
}
.drug-atlas-card summary::-webkit-details-marker {
  display: none;
}
.drug-atlas-card summary span {
  display: grid;
  gap: 2px;
}
.drug-atlas-card summary small,
.drug-atlas-card summary em {
  color: #e9c56d;
  font-style: normal;
}
.drug-atlas-card summary b {
  font: 800 23px/1.1 Georgia, serif;
}
.drug-atlas-card summary::after {
  content: "+";
  font-size: 26px;
  color: #e9c56d;
}
.drug-atlas-card[open] summary::after {
  content: "−";
}
.drug-atlas-body {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr);
  gap: 24px;
  background: linear-gradient(145deg, #f8edcf, #dfc287);
  color: #10231d;
}
.drug-atlas-body h4 {
  margin: 0 0 8px;
}
.drug-atlas-body li + li {
  margin-top: 7px;
}
@media (max-width: 720px) {
  .drug-atlas-card summary,
  .drug-atlas-body {
    display: grid;
    grid-template-columns: 1fr;
  }
  .drug-atlas-card summary::after {
    position: absolute;
    right: 20px;
  }
}
.quick-study {
  padding: 20px;
  margin-top: 16px;
  background: linear-gradient(145deg, #f5e6be, #d4b26f);
  color: #10231d;
}
@media (max-width: 820px) {
  .adaptive-study {
    grid-template-columns: 1fr;
  }
  .adaptive-study-stats {
    flex-wrap: wrap;
  }
  .adaptive-study .button {
    width: 100%;
  }
}
.quick-study > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.quick-study h2 {
  margin: 2px 0 0;
}
.quick-lane-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.quick-lane {
  min-height: 118px;
  text-align: left;
  border: 1px solid rgba(18, 35, 29, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  color: #10231d;
  padding: 14px;
  display: grid;
  gap: 6px;
  cursor: pointer;
}
.quick-lane.featured {
  background: linear-gradient(145deg, #10251d, #0b5f4a);
  color: #fff;
  border-color: rgba(240, 201, 111, 0.58);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}
.quick-lane b {
  font:
    800 20px/1.1 Georgia,
    serif;
}
.quick-lane span {
  font-size: 13px;
  line-height: 1.35;
  color: inherit;
  opacity: 0.86;
}
.quick-lane strong {
  align-self: end;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(2, 12, 10, 0.12);
  font-size: 12px;
}
.quick-lane.featured strong {
  background: rgba(255, 255, 255, 0.16);
  color: #ffe49a;
}
.study-start-simple {
  padding: 18px;
}
.study-start-simple .quick-lane h2 {
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
}
.study-start-simple > header {
  align-items: center;
}
.study-start-simple > header p {
  margin: 4px 0 0;
  max-width: 62ch;
  color: rgba(16, 35, 29, 0.76);
}
.study-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.study-start-grid .quick-lane {
  min-height: 108px;
}
.study-start-grid .recommended-lane {
  background: linear-gradient(145deg, #0b3f34, #18233d 72%, #321a3c);
}
.study-start-grid .guided-lane {
  border-color: rgba(159, 113, 31, 0.48);
  background: rgba(255, 250, 232, 0.72);
}
.study-start-grid .exam-picker-lane {
  cursor: default;
  align-content: start;
}
.exam-picker-options {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 7px;
}
.exam-picker-option {
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid rgba(18, 35, 29, 0.25);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: #10231d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  text-align: left;
  font: 800 12px/1.2 Inter, system-ui, sans-serif;
}
.exam-picker-option:hover,
.exam-picker-option:focus-visible {
  border-color: #9f711f;
  background: #fff9e9;
  transform: translateY(-1px);
}
.exam-picker-option strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(18, 35, 29, 0.1);
  color: #10231d;
  font-size: 11px;
}
.exam-picker-lane > small {
  color: rgba(16, 35, 29, 0.65);
  font-size: 11px;
}
.study-more-options {
  margin-top: 12px;
  border-top: 1px solid rgba(18, 35, 29, 0.18);
}
.study-more-options summary {
  position: relative;
  padding: 14px 2px 4px;
  padding-right: 34px;
  cursor: pointer;
  list-style: none;
}
.study-more-options summary::-webkit-details-marker {
  display: none;
}
.study-more-options summary span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.study-more-options summary small {
  color: rgba(16, 35, 29, 0.66);
}
.study-more-options summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-25%);
  font-weight: 900;
}
.study-more-options[open] summary::after {
  content: "−";
}
.study-more-options .quick-lane-grid {
  margin-top: 12px;
}
.advanced-study-filters {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
}
.advanced-study-filters summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
}
.advanced-study-filters summary::-webkit-details-marker {
  display: none;
}
.advanced-study-filters summary b {
  display: block;
}
.advanced-study-filters summary small {
  display: block;
  color: var(--muted);
}
.advanced-study-filters[open] {
  padding-bottom: 20px;
}
.advanced-study-filters[open] .filter-row,
.advanced-study-filters[open] .setup-actions,
.advanced-study-filters[open] .eligible {
  margin-left: 20px;
  margin-right: 20px;
}
.shop-grid > article,
.companion-grid > a,
.relic-grid > article,
.avatar-grid > article {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}
.shop-card img,
.companion-card-modern img,
.relic-card img {
  will-change: auto;
}
@media (max-width: 1000px) {
  .quick-lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .quick-study > header {
    display: grid;
  }
  .quick-lane-grid {
    grid-template-columns: 1fr;
  }
  .quick-lane {
    min-height: 104px;
  }
  .study-start-grid {
    grid-template-columns: 1fr;
  }
  .exam-picker-controls {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  .study-more-options summary span {
    display: grid;
    padding-right: 28px;
  }
  .advanced-study-filters summary {
    padding: 16px;
  }
}

/* Home dashboard visual break: generated command-board art + darker tactical tiles. */
.dashboard {
  position: relative;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(109, 208, 179, 0.34);
  background:
    linear-gradient(
      90deg,
      rgba(3, 13, 12, 0.9),
      rgba(7, 25, 23, 0.7) 48%,
      rgba(39, 9, 23, 0.68)
    ),
    url("assets/dashboard/class-command-board.png");
  background-size: cover;
  background-position: center;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}
.dashboard:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(0, 0, 0, 0.1)
  );
  pointer-events: none;
}
.dashboard > .panel {
  position: relative;
  z-index: 1;
  min-height: 176px;
  background: linear-gradient(
    145deg,
    rgba(3, 22, 21, 0.86),
    rgba(14, 43, 39, 0.76)
  );
  border: 1px solid rgba(133, 230, 198, 0.28);
  color: #eefaf3;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 45px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px);
}
.dashboard > .panel:before {
  height: 4px;
  background: linear-gradient(90deg, #67e6bf, #f1c56b, #a93f5f);
}
.dashboard > .panel:after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -18px 34px rgba(0, 0, 0, 0.16);
}
.dashboard > .panel h2 {
  color: #fff;
}
.dashboard > .panel p {
  color: #c8ded5;
}
.dashboard > .panel .eyebrow {
  color: #ffd987;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.dashboard .ring {
  background:
    radial-gradient(closest-side, rgba(6, 23, 22, 0.96) 72%, transparent 73%),
    conic-gradient(#67e6bf calc(var(--p) * 1%), rgba(255, 255, 255, 0.16) 0);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(103, 230, 191, 0.22),
    0 12px 34px rgba(0, 0, 0, 0.36);
}
.dashboard .ring span {
  color: #b8d4ca;
}
.dashboard .meter {
  background: rgba(255, 255, 255, 0.15);
}
.dashboard .meter i {
  background: linear-gradient(90deg, #67e6bf, #f1c56b);
}
.dashboard .secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(241, 197, 107, 0.36);
  box-shadow: none;
}
@media (max-width: 600px) {
  .dashboard {
    padding: 12px;
    border-radius: 18px;
    background-position: 62% center;
  }
  .dashboard > .panel {
    min-height: 144px;
  }
}

/* Refined home command area: warmer apothecary glass, less neon, more polish. */
.dashboard {
  gap: 14px;
  margin: 24px 0 18px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(224, 188, 112, 0.34);
  background:
    linear-gradient(180deg, rgba(5, 18, 16, 0.64), rgba(8, 26, 22, 0.82)),
    linear-gradient(
      90deg,
      rgba(5, 18, 16, 0.96),
      rgba(25, 42, 34, 0.76) 48%,
      rgba(51, 27, 28, 0.76)
    ),
    url("assets/dashboard/class-command-board.png");
  background-size: cover;
  background-position: center 46%;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 241, 194, 0.08);
}
.dashboard:before {
  background:
    linear-gradient(
      90deg,
      rgba(240, 201, 111, 0.12),
      transparent 22%,
      transparent 78%,
      rgba(122, 52, 55, 0.12)
    ),
    radial-gradient(circle at 50% 0, rgba(240, 201, 111, 0.1), transparent 45%);
  opacity: 0.9;
}
.dashboard > .panel {
  min-height: 168px;
  padding: 24px 26px;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(9, 35, 30, 0.9),
    rgba(13, 42, 36, 0.72)
  );
  border-color: rgba(223, 190, 121, 0.26);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -22px 46px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7px) saturate(1.05);
}
.dashboard > .panel:before {
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(240, 201, 111, 0.72),
    rgba(116, 202, 171, 0.58),
    rgba(150, 72, 76, 0.46)
  );
}
.dashboard > .panel h2 {
  font-size: clamp(24px, 2.1vw, 31px);
  line-height: 1.05;
  color: #fff8e9;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}
.dashboard > .panel p {
  max-width: 34ch;
  color: #d5e2d9;
}
.dashboard > .panel .eyebrow {
  color: #f0c96f;
  letter-spacing: 0.14em;
  text-shadow: none;
}
.dashboard .ring {
  width: 86px;
  background:
    radial-gradient(closest-side, rgba(12, 39, 34, 0.98) 68%, transparent 70%),
    conic-gradient(#dcb762 calc(var(--p) * 1%), rgba(230, 221, 190, 0.18) 0);
  box-shadow:
    0 0 0 1px rgba(240, 201, 111, 0.2),
    inset 0 0 24px rgba(255, 233, 172, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.28);
}
.dashboard .ring b {
  color: #fff8e9;
}
.dashboard .ring span {
  color: #c6d6cf;
}
.dashboard .meter {
  height: 7px;
  border-radius: 999px;
  background: rgba(222, 232, 219, 0.16);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}
.dashboard .meter i {
  background: linear-gradient(90deg, #76cfae, #e0b864);
  box-shadow: 0 0 16px rgba(224, 184, 100, 0.18);
}
.dashboard .secondary {
  background: linear-gradient(
    145deg,
    rgba(255, 239, 190, 0.18),
    rgba(255, 255, 255, 0.06)
  );
  border-color: rgba(240, 201, 111, 0.4);
  color: #fff8e9;
}
.daily-card.panel {
  align-items: center;
}
.achievement-feature.panel {
  display: grid;
  align-content: center;
}
.class-dashboard {
  position: relative;
  margin: 18px 0 22px;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(237, 216, 169, 0.96),
    rgba(196, 150, 82, 0.9)
  );
  border: 1px solid rgba(255, 238, 188, 0.62);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  overflow: hidden;
}
.class-dashboard:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 0, rgba(255, 248, 214, 0.34), transparent 30%),
    linear-gradient(
      90deg,
      rgba(9, 45, 37, 0.1),
      transparent 42%,
      rgba(105, 50, 36, 0.13)
    );
  pointer-events: none;
}
.class-dashboard > header,
.class-dashboard-grid {
  position: relative;
  z-index: 1;
}
.class-dashboard > header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(73, 45, 22, 0.16);
}
.class-dashboard .eyebrow {
  color: #8b5f20;
}
.class-dashboard h2 {
  color: #17231d;
}
.class-dashboard-grid {
  gap: 14px;
  margin-top: 16px;
}
.class-dashboard-grid article {
  border-radius: 13px;
  border: 1px solid rgba(75, 49, 24, 0.18);
  background: linear-gradient(
    145deg,
    rgba(255, 246, 219, 0.92),
    rgba(232, 211, 166, 0.88)
  );
  box-shadow:
    0 12px 24px rgba(75, 43, 14, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  padding: 16px;
}
.class-dashboard-grid article.selected {
  outline: 0;
  border-color: rgba(13, 94, 73, 0.42);
  background: linear-gradient(
    145deg,
    rgba(248, 240, 213, 0.96),
    rgba(220, 205, 166, 0.92)
  );
  box-shadow:
    0 14px 30px rgba(12, 55, 44, 0.18),
    inset 4px 0 0 #0b5f4a,
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.class-dashboard-grid article > span {
  color: #0b5f4a;
  letter-spacing: 0.13em;
}
.class-dashboard-grid h3 {
  font-size: 18px;
  color: #15231c;
}
.readiness-bar {
  height: 6px;
  background: rgba(58, 44, 26, 0.18);
}
.readiness-bar i {
  background: linear-gradient(90deg, #0b5f4a, #d7a74d);
}
.class-dashboard-grid dt {
  color: #607064;
}
.class-dashboard-grid dd {
  font-size: 15px;
  color: #10231d;
}
.class-dashboard-grid small {
  color: #3f4d45;
}
.class-dashboard-grid .button {
  min-height: 40px;
  border-radius: 9px;
}
.class-dashboard-grid .secondary {
  background: linear-gradient(145deg, #f8e8bd, #bb7d38);
  color: #151b17;
  border-color: rgba(99, 55, 20, 0.18);
}
.class-dashboard-grid .primary {
  background: linear-gradient(135deg, #0b6a51, #0c302b 72%, #1d1629);
  border-color: rgba(232, 191, 100, 0.42);
}
@media (max-width: 900px) {
  .dashboard {
    padding: 14px;
  }
  .dashboard > .panel {
    min-height: 150px;
  }
}
@media (max-width: 600px) {
  .dashboard {
    gap: 10px;
    padding: 12px;
    background-position: center;
  }
  .dashboard > .panel {
    padding: 18px;
    min-height: auto;
  }
  .dashboard .ring {
    width: 76px;
  }
  .class-dashboard {
    padding: 18px;
  }
  .class-dashboard-grid article {
    padding: 14px;
  }
}

.dashboard .daily-card.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 14px;
}
.dashboard .daily-card h2 {
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.dashboard .daily-card p {
  margin-bottom: 0;
}
.dashboard .daily-card .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding-inline: 16px;
}

/* Class readiness ledger: closer to the apothecary dashboard, less flat parchment. */
.class-dashboard {
  padding: 0;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(8, 28, 24, 0.96),
    rgba(18, 50, 41, 0.9) 34%,
    rgba(207, 168, 96, 0.9) 34%,
    rgba(224, 200, 151, 0.94)
  );
  border-color: rgba(231, 199, 128, 0.5);
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 246, 205, 0.26);
}
.class-dashboard:before {
  background:
    radial-gradient(circle at 8% 0, rgba(240, 201, 111, 0.18), transparent 30%),
    linear-gradient(
      90deg,
      rgba(105, 50, 36, 0.16),
      transparent 35%,
      rgba(9, 45, 37, 0.16)
    );
  mix-blend-mode: normal;
}
.class-dashboard > header {
  align-items: center;
  margin: 0;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(240, 201, 111, 0.24);
  color: #fff8e9;
}
.class-dashboard > header .eyebrow {
  color: #f0c96f;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}
.class-dashboard > header h2 {
  color: #fff8e9;
  font-size: 30px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}
.class-dashboard > header .secondary {
  background: linear-gradient(
    145deg,
    rgba(255, 239, 190, 0.18),
    rgba(255, 255, 255, 0.06)
  );
  border-color: rgba(240, 201, 111, 0.42);
  color: #fff8e9;
  box-shadow: none;
}
.class-dashboard-grid {
  padding: 20px 22px 22px;
  margin-top: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 248, 221, 0.08),
    rgba(255, 248, 221, 0.24)
  );
}
.class-dashboard-grid article {
  position: relative;
  gap: 12px;
  border-radius: 16px;
  border-color: rgba(73, 49, 24, 0.2);
  background: linear-gradient(
    145deg,
    rgba(255, 249, 226, 0.96),
    rgba(225, 205, 162, 0.9)
  );
  box-shadow:
    0 18px 34px rgba(69, 43, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  overflow: hidden;
}
.class-dashboard-grid article:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(11, 95, 74, 0.7),
    rgba(216, 167, 77, 0.55)
  );
  opacity: 0.72;
}
.class-dashboard-grid article.selected {
  transform: translateY(-2px);
  border-color: rgba(11, 95, 74, 0.58);
  background: linear-gradient(
    145deg,
    rgba(255, 251, 232, 0.98),
    rgba(218, 207, 174, 0.94)
  );
  box-shadow:
    0 22px 42px rgba(8, 47, 38, 0.22),
    inset 0 0 0 1px rgba(11, 95, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.class-dashboard-grid article.selected:before {
  height: 5px;
  background: linear-gradient(90deg, #0b5f4a, #d8a74d, #1d1629);
  opacity: 1;
}
.class-dashboard-grid article > span {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 95, 74, 0.1);
  color: #0b5f4a;
  font-size: 9px;
}
.class-dashboard-grid h3 {
  font-size: 20px;
  min-height: 46px;
  text-wrap: balance;
}
.readiness-bar {
  height: 7px;
  background: rgba(56, 43, 27, 0.16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.readiness-bar i {
  box-shadow: 0 0 16px rgba(216, 167, 77, 0.18);
}
.class-dashboard-grid dl {
  padding: 12px 0;
  border-top: 1px solid rgba(78, 54, 27, 0.14);
  border-bottom: 1px solid rgba(78, 54, 27, 0.12);
}
.class-dashboard-grid dt {
  font-size: 8px;
  color: #65766b;
}
.class-dashboard-grid dd {
  font-size: 16px;
}
.class-dashboard-grid small {
  min-height: 34px;
  display: block;
  line-height: 1.35;
}
.class-dashboard-grid .button {
  margin-top: 2px;
  box-shadow: 0 8px 20px rgba(84, 49, 18, 0.14);
}
.class-dashboard-grid .secondary {
  background: linear-gradient(145deg, #ffe9ae, #b97836);
  color: #111b18;
}
.class-dashboard-grid .primary {
  background: linear-gradient(135deg, #0b6f55, #08352f 72%, #1b1526);
  box-shadow: 0 10px 24px rgba(6, 48, 38, 0.28);
}
@media (max-width: 680px) {
  .class-dashboard > header {
    padding: 20px;
  }
  .class-dashboard-grid {
    padding: 16px;
  }
  .class-dashboard-grid h3 {
    min-height: auto;
  }
}

/* High-polish class readiness art pass + Atlas readability fixes. */
.class-dashboard {
  background:
    linear-gradient(
      180deg,
      rgba(5, 18, 16, 0.54),
      rgba(5, 18, 16, 0.76) 42%,
      rgba(10, 30, 25, 0.72)
    ),
    url("assets/dashboard/class-readiness-command-wall.png");
  background-size: cover;
  background-position: center 44%;
  border-color: rgba(232, 198, 129, 0.62);
}
.class-dashboard:before {
  background:
    linear-gradient(
      180deg,
      rgba(4, 16, 13, 0.08),
      rgba(4, 16, 13, 0.18) 36%,
      rgba(255, 233, 170, 0.07)
    ),
    radial-gradient(
      circle at 50% 10%,
      rgba(240, 201, 111, 0.12),
      transparent 42%
    );
}
.class-dashboard > header {
  min-height: 112px;
  padding: 24px 28px 20px;
  background: linear-gradient(
    90deg,
    rgba(4, 16, 13, 0.76),
    rgba(8, 32, 27, 0.52) 58%,
    rgba(53, 29, 16, 0.34)
  );
  border-bottom-color: rgba(232, 198, 129, 0.3);
}
.class-dashboard > header h2 {
  font-size: clamp(32px, 3.2vw, 45px);
}
.class-dashboard-grid {
  padding: 26px;
  background: linear-gradient(
    180deg,
    rgba(7, 26, 22, 0.08),
    rgba(7, 26, 22, 0.22)
  );
  backdrop-filter: blur(1px);
}
.class-dashboard-grid article {
  background: linear-gradient(
    145deg,
    rgba(255, 250, 229, 0.94),
    rgba(232, 212, 166, 0.86)
  );
  border-color: rgba(93, 66, 31, 0.22);
  box-shadow:
    0 20px 42px rgba(2, 15, 12, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.class-dashboard-grid article.selected {
  background: linear-gradient(
    145deg,
    rgba(255, 253, 237, 0.96),
    rgba(225, 216, 184, 0.9)
  );
  box-shadow:
    0 24px 48px rgba(3, 30, 24, 0.3),
    inset 0 0 0 1px rgba(11, 95, 74, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.class-dashboard-grid article > span {
  background: rgba(11, 95, 74, 0.12);
}
.atlas-prompts article,
.drug-atlas-card {
  background: linear-gradient(145deg, #fff7df, #ead6a9);
  border: 1px solid rgba(74, 48, 22, 0.22);
  box-shadow: 0 12px 28px rgba(24, 14, 6, 0.16);
  color: #10231d;
}
.atlas-prompts article .eyebrow,
.drug-atlas-card .eyebrow {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 95, 74, 0.1);
  color: #0b5f4a;
  text-shadow: none;
}
.atlas-prompts article h3,
.drug-atlas-card h3 {
  color: #0b1712;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
}
.atlas-prompts article p {
  color: #24342d;
  font-size: 15px;
  line-height: 1.55;
}
.drug-atlas-card dl {
  gap: 10px;
}
.drug-atlas-card dl > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(78, 54, 27, 0.14);
}
.drug-atlas-card dt {
  color: #0b5f4a;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.drug-atlas-card dd {
  color: #10231d;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 720;
}
.drug-atlas-card dl > div:nth-child(2) {
  background: linear-gradient(
    145deg,
    rgba(231, 244, 218, 0.92),
    rgba(207, 230, 196, 0.72)
  );
  border-color: rgba(11, 95, 74, 0.22);
}
.drug-atlas-card dl > div:nth-child(2) dt {
  color: #086149;
}
.drug-atlas-card dl > div:nth-child(2) dd {
  color: #062f25;
  font-weight: 900;
}
.drug-atlas-card dl > div:nth-child(3) dd {
  font-weight: 650;
  color: #27352f;
}
@media (max-width: 680px) {
  .class-dashboard > header {
    min-height: 104px;
    padding: 20px;
  }
  .class-dashboard-grid {
    padding: 16px;
  }
  .atlas-prompts article,
  .drug-atlas-card {
    padding: 16px;
  }
}

/* Class readiness card color polish: less white, richer stat tiles. */
.class-dashboard-grid article {
  background: linear-gradient(
    145deg,
    rgba(244, 229, 188, 0.96),
    rgba(200, 174, 122, 0.9)
  );
  border-color: rgba(224, 184, 100, 0.34);
  box-shadow:
    0 22px 48px rgba(2, 15, 12, 0.32),
    inset 0 1px 0 rgba(255, 246, 215, 0.56),
    inset 0 -22px 40px rgba(73, 42, 16, 0.08);
}
.class-dashboard-empty {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 24px 26px;
  color: #fff8e9;
  display: grid;
  gap: 4px;
  background: linear-gradient(
    180deg,
    rgba(7, 26, 22, 0.08),
    rgba(7, 26, 22, 0.22)
  );
  backdrop-filter: blur(1px);
}
.class-dashboard-empty b {
  font:
    800 20px/1.2 Georgia,
    serif;
}
.class-dashboard-empty span {
  color: #d9eadf;
  font-weight: 700;
}
.class-dashboard-grid article.selected {
  background: linear-gradient(
    145deg,
    rgba(238, 231, 198, 0.98),
    rgba(185, 176, 137, 0.92)
  );
  border-color: rgba(111, 206, 172, 0.48);
  box-shadow:
    0 26px 54px rgba(3, 30, 24, 0.34),
    inset 0 0 0 1px rgba(111, 206, 172, 0.2),
    inset 0 1px 0 rgba(255, 253, 232, 0.7);
}
.class-dashboard-grid h3 {
  color: #0b1c16;
}
.class-dashboard-grid dl {
  gap: 6px;
  padding: 10px 0;
  border-color: rgba(64, 46, 25, 0.16);
}
.class-dashboard-grid dl > div {
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(8, 38, 31, 0.09),
    rgba(255, 239, 191, 0.18)
  );
  padding: 8px 6px;
  min-width: 0;
}
.class-dashboard-grid dt {
  color: #3e6355;
}
.class-dashboard-grid dd {
  color: #071c16;
}
.class-dashboard-grid dl > div:nth-child(2) {
  background: linear-gradient(
    145deg,
    rgba(11, 95, 74, 0.18),
    rgba(222, 184, 100, 0.18)
  );
  box-shadow: inset 0 0 0 1px rgba(11, 95, 74, 0.1);
}
.class-dashboard-grid dl > div:nth-child(2) dt {
  color: #0b5f4a;
}
.class-dashboard-grid dl > div:nth-child(2) dd {
  color: #063d32;
}
.readiness-bar {
  background: rgba(7, 28, 23, 0.16);
}

/* Study mode performance guardrails: keep card scrolling cheap on older laptops. */
html:has(.study-page) {
  scroll-behavior: auto;
}
.study-page {
  contain: layout paint;
}
.study-page .study-card {
  box-shadow: 0 14px 34px rgba(1, 12, 8, 0.22);
}
.study-page .answer {
  transition:
    border-color 0.12s,
    background 0.12s;
}

/* Companion mood, card suggestions, mobile study ergonomics, and image occlusion. */
.companion-story .companion-dialogue {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
}
.companion-story .companion-dialogue img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 18px;
  background: radial-gradient(
    circle at 50% 34%,
    rgba(255, 236, 174, 0.24),
    rgba(2, 12, 10, 0.72)
  );
}
.companion-story .companion-dialogue span {
  display: grid;
  gap: 6px;
}
.companion-story .companion-dialogue em {
  font-style: normal;
  color: #fff;
}
.companion-mood-copy small {
  display: block;
  margin-top: 8px;
  color: #ffe49a;
  font-weight: 850;
}
.mood-concerned,
.mood-coaching {
  background: linear-gradient(
    145deg,
    rgba(56, 27, 40, 0.96),
    rgba(7, 34, 29, 0.94)
  );
}
.mood-celebrating,
.mood-confident {
  background: linear-gradient(
    145deg,
    rgba(7, 61, 50, 0.96),
    rgba(56, 38, 8, 0.9)
  );
}
.study-companion-badge.coaching,
.study-companion-badge.concerned {
  border-color: rgba(255, 179, 122, 0.58);
}
.study-companion-badge.confident,
.study-companion-badge.celebrating {
  border-color: rgba(255, 228, 154, 0.72);
}
.subtle {
  color: #52625a;
}
.request-list small,
.request-list p {
  display: block;
  margin: 6px 0;
  color: #dcebe3;
}
.request-list div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.image-occlusion-card {
  position: relative;
  overflow: hidden;
  margin: 18px 0;
}
.image-occlusion-card img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
}
.occlusion-mask {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 2px solid rgba(255, 244, 196, 0.9);
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(7, 20, 16, 0.94),
    rgba(11, 95, 74, 0.88)
  );
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transform: translate(-1px, -1px);
}
@media (max-width: 620px) {
  main {
    padding-bottom: 18px;
  }
  .study-progress {
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .study-card {
    padding: 12px;
  }
  .question {
    font-size: 22px;
    margin: 10px 0 12px;
  }
  .answer {
    min-height: 48px;
  }
  .answer-checkpoint.inline-feedback {
    gap: 10px;
    padding: 12px;
    margin-top: 8px;
  }
  .answer-checkpoint .feedback-lessons {
    max-height: 30vh;
    overflow: auto;
    margin: 0;
  }
  .checkpoint-actions {
    grid-template-columns: 1fr;
  }
  .checkpoint-actions .button {
    min-height: 42px;
  }
  .companion-story .companion-dialogue {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .companion-story .companion-dialogue img {
    width: 80px;
    height: 80px;
  }
}

/* Shop avatar thumbnails: fixed stage, never stretch the portrait art. */
.avatar-shop .avatar-market-card > img {
  width: 100%;
  height: 240px !important;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center bottom !important;
}
@media (max-width: 700px) {
  .avatar-shop .avatar-market-card > img {
    height: 220px !important;
  }
}

/* Avoid layout and paint work for long offscreen collections. Artwork,
   dimensions, and interactions remain unchanged when each item enters view. */
@supports (content-visibility: auto) {
  .achievement-grid .achievement-card,
  .atlas-grid .atlas-entry,
  .shop-grid .shop-card,
  .relic-grid .relic-card,
  .companion-grid .companion-card-modern,
  .rank-grid .rank-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}
/* Launch readiness: story, focused catalogs, safe saves, and compact navigation */
.mobile-dock {
  display: none;
}
.launch-journey {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid #84e4c43d;
  border-radius: 28px;
  box-shadow: 0 28px 80px #02071299;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: end;
  padding: 44px;
  gap: 28px;
  color: #fff;
}
.launch-journey-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("assets/story/launch-gates-v1.webp") center/cover no-repeat;
}
.launch-journey:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(3, 8, 18, 0.97),
      rgba(3, 10, 21, 0.79) 48%,
      rgba(3, 8, 18, 0.28)
    ),
    linear-gradient(0deg, rgba(2, 7, 15, 0.62), transparent 55%);
}
.launch-journey-copy {
  max-width: 670px;
}
.launch-journey-copy h2 {
  font-size: clamp(36px, 4.5vw, 58px);
  margin: 8px 0 12px;
}
.launch-journey-copy > p {
  max-width: 58ch;
  color: #d8e7e6;
  font-size: 16px;
}
.opening-steps,
.story-gates {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.opening-steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  background: #081521c7;
  backdrop-filter: blur(10px);
}
.opening-steps li > b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff36;
  color: #b8c8cc;
}
.opening-steps li.complete > b {
  background: #33a786;
  border-color: #68e5bf;
  color: #fff;
}
.opening-steps li span {
  display: grid;
}
.opening-steps small {
  color: #b9ccce;
}
.story-gates {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.story-gates li {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  background: #081521b8;
  border: 1px solid #ffffff1f;
  color: #aebfc3;
  font-size: 11px;
}
.story-gates li b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #182832;
}
.story-gates li.complete b {
  background: #2d9d7f;
  color: #fff;
}
.story-gates li.current {
  border-color: #edc972;
  color: #fff;
  box-shadow: inset 0 0 24px #d5ab3524;
}
.story-gates li.current b {
  background: #b3882c;
  color: #fff;
}
.story-reward {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.story-reward span {
  font-size: 12px;
  color: #d5c68f;
}
.story-dialogue {
  align-self: end;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #ffffff2a;
  border-radius: 18px;
  background: linear-gradient(145deg, #0b1723e8, #14142ce8);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px #0008;
}
.story-dialogue img {
  width: 96px;
  height: 112px;
  object-fit: cover;
  border-radius: 13px;
  object-position: 50% 20%;
  border: 1px solid #f0d17d66;
}
.story-dialogue span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #e9cc7c;
}
.story-dialogue p {
  margin: 5px 0 0;
  color: #eef6f4;
  font:
    600 14px/1.5 Georgia,
    serif;
}
.collection-intro {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #111b32, #16293a);
  color: #fff;
}
.collection-intro img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 20px;
  border: 1px solid #d8bb7066;
}
.collection-intro h2 {
  font-size: 30px;
  margin: 5px 0;
}
.collection-intro p {
  color: #cfdddf;
  max-width: 62ch;
}
.collection-intro > span {
  display: grid;
  text-align: center;
}
.collection-intro > span b {
  font:
    700 38px Georgia,
    serif;
  color: #efd17c;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.collection-purpose {
  margin-bottom: 20px;
  padding: 24px;
  color: #fff8e7;
  background: linear-gradient(135deg, #083f37, #15223c 62%, #211735);
  border-color: rgba(231, 192, 98, 0.5);
}
.collection-purpose > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 24px;
  align-items: end;
}
.collection-purpose h2 {
  margin: 4px 0;
  font-size: clamp(28px, 3vw, 40px);
}
.collection-purpose > header p {
  color: #cfddda;
}
.collection-purpose-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.collection-purpose-card {
  min-height: 185px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 17px;
  border: 1px solid rgba(255, 232, 166, 0.2);
  border-radius: 15px;
  color: #fff;
  text-decoration: none;
  background: rgba(3, 18, 24, 0.52);
}
.collection-purpose-card:hover {
  border-color: #e7c56b;
  transform: translateY(-2px);
}
.collection-purpose-card > span,
.collection-purpose-card > em {
  color: #edca70;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.collection-purpose-card b {
  font-size: 19px;
}
.collection-purpose-card p {
  margin: 2px 0;
  color: #d7e3df;
  font-size: 13px;
  line-height: 1.45;
}
.collection-purpose-card > em {
  margin-top: auto;
  text-transform: none;
  letter-spacing: 0;
}
.collection-purpose-line {
  margin-top: 7px;
  max-width: 42ch;
  color: #fff3c8;
  font-size: 13px;
  line-height: 1.35;
}
.companion-value-guide {
  margin: 18px 0;
  padding: 22px;
  color: #fff7e4;
  background: linear-gradient(135deg, #0a4037, #131f38 68%, #23172f);
  border-color: rgba(232, 195, 102, 0.46);
}
.companion-value-guide > div:first-child {
  max-width: 760px;
}
.companion-value-guide h2 {
  margin: 4px 0;
}
.companion-value-guide p {
  color: #cedbd8;
}
.companion-value-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.companion-value-grid button {
  min-height: 148px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 5px;
  text-align: left;
  color: #fff;
  background: rgba(4, 21, 27, 0.52);
  border: 1px solid rgba(255, 232, 166, 0.2);
  border-radius: 13px;
  cursor: pointer;
}
.companion-value-grid button:hover {
  border-color: #edca70;
}
.companion-value-grid span {
  color: #edca70;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.companion-value-grid small {
  color: #cad8d5;
  line-height: 1.4;
}
.companion-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.companion-toolbar select,
.companion-toolbar input {
  min-height: 40px;
  max-width: 190px;
}
.companion-benefit {
  position: relative;
  z-index: 2;
  margin-top: 7px;
  padding-top: 7px;
  display: grid;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.companion-card-modern:has(.companion-benefit) {
  min-height: 350px !important;
}
.companion-card-modern:has(.companion-benefit)::after {
  height: 64% !important;
}
.companion-card-modern:has(.companion-benefit) .companion-portrait {
  bottom: 116px !important;
}
.companion-benefit b {
  color: #f0ce77;
  font-size: 12px;
}
.companion-benefit small {
  color: #e1e7ef;
  font-size: 10px;
  line-height: 1.35;
}
.companion-benefit-detail {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(239, 203, 113, 0.36);
  border-radius: 15px;
  background: rgba(4, 16, 27, 0.48);
}
.companion-benefit-numbers {
  margin: 10px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.companion-benefit-numbers > div {
  padding: 10px;
  display: grid;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}
.companion-benefit-numbers small,
.companion-benefit-detail > small {
  color: #c5d3d7;
}
.companion-benefit-numbers b {
  color: #f2d17f;
}
.rank-reward-vault {
  margin: 18px 0;
  padding: 24px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #fff8e6;
  background: linear-gradient(135deg, #073e36, #141f3b 62%, #291737);
  border-color: rgba(237, 198, 101, 0.52);
}
.rank-reward-vault > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.45fr);
  gap: 24px;
  align-items: end;
}
.rank-reward-vault h2 {
  margin: 4px 0;
  font-size: clamp(28px, 3vw, 40px);
}
.rank-reward-vault header p,
.rank-reward-next span {
  color: #cfddda;
}
.rank-reward-next {
  padding: 16px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(241, 205, 112, 0.3);
  border-radius: 14px;
  background: rgba(3, 17, 25, 0.48);
}
.rank-reward-next small,
.rank-reward-next b {
  color: #f0cc72;
}
.rank-reward-track {
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  padding-bottom: 10px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.rank-reward-card {
  flex: 0 0 min(370px, calc(100vw - 88px));
  min-width: 0;
  min-height: 300px;
  padding: 16px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  background: rgba(4, 17, 27, 0.6);
  scroll-snap-align: start;
}
.rank-reward-card > span,
.rank-reward-card > em {
  color: #e9c66e;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rank-reward-card > div {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: center;
}
.rank-reward-card img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

/* ECG Crisis: a route-scoped, animated interpretation campaign. */
.arcade-campaign-deck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arcade-campaign-tile.ecg {
  grid-template-rows: 240px 1fr;
}
.ecg-campaign-preview,
.ecg-hero-monitor {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: #8fffd7;
  background:
    linear-gradient(rgba(219, 85, 102, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 85, 102, .1) 1px, transparent 1px),
    linear-gradient(rgba(219, 85, 102, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 85, 102, .2) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #0c3b38, #021618 72%);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px, auto;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .66);
}
.ecg-campaign-preview {
  min-height: 240px;
  border-bottom: 1px solid rgba(232, 191, 100, .28);
}
.ecg-campaign-preview span,
.ecg-campaign-preview b,
.ecg-hero-monitor span,
.ecg-hero-monitor b {
  position: absolute;
  z-index: 2;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.ecg-campaign-preview span,
.ecg-hero-monitor span { inset: 12px auto auto 13px; }
.ecg-campaign-preview b,
.ecg-hero-monitor b { inset: auto 13px 12px auto; color: #ffd882; }
.ecg-campaign-preview svg,
.ecg-hero-monitor svg {
  width: 150%;
  height: 100%;
  transform: translateX(-16.666%);
  filter: drop-shadow(0 0 8px rgba(78, 255, 200, .75));
  animation: ecg-strip-travel 4.2s linear infinite;
}
.ecg-campaign-preview path,
.ecg-hero-monitor path {
  fill: none;
  stroke: #70ffd0;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
@keyframes ecg-strip-travel {
  from { transform: translateX(-16.666%); }
  to { transform: translateX(-50%); }
}
.ecg-loading { color: #eefdf8; }
.ecg-menu,
.ecg-crisis,
.ecg-finish {
  width: min(1600px, 100%);
  margin: 0 auto;
  color: #edf9f5;
}
.ecg-menu { display: grid; gap: 22px; }
.ecg-back {
  width: fit-content;
  color: #ffe39a;
  font-weight: 850;
  text-decoration: none;
}
.ecg-menu-hero {
  min-height: 560px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
  align-items: stretch;
  border: 1px solid rgba(238, 194, 98, .52);
  border-radius: 30px;
  background: linear-gradient(130deg, #072f2d, #0b2331 55%, #251b38);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .42);
}
.ecg-hero-copy {
  z-index: 2;
  align-self: center;
  padding: clamp(30px, 5vw, 72px);
}
.ecg-hero-copy h1,
.ecg-case h1,
.ecg-finish h1 {
  margin: .12em 0 .2em;
  color: #fff7dc;
  font-family: var(--display);
  font-size: clamp(3.3rem, 7vw, 7rem);
  line-height: .92;
  text-wrap: balance;
}
.ecg-hero-copy > p {
  max-width: 54ch;
  color: #d2e5df;
  font-size: 18px;
  line-height: 1.65;
}
.ecg-hero-copy > small { display: block; margin-top: 18px; color: #9db6af; }
.ecg-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ecg-hero-monitor { min-height: 560px; border-left: 1px solid rgba(238, 194, 98, .26); }
.ecg-briefing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ecg-briefing article {
  position: relative;
  min-width: 0;
  padding: 24px 24px 24px 82px;
  border: 1px solid rgba(233, 195, 108, .3);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(7, 48, 44, .95), rgba(16, 29, 47, .96));
}
.ecg-briefing article > b {
  position: absolute;
  left: 22px;
  top: 25px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #08221e;
  background: #edc567;
}
.ecg-briefing h2 { margin: 0 0 7px; color: #fff4cd; }
.ecg-briefing p { margin: 0; color: #bcd1ca; line-height: 1.5; }
.ecg-controls-note {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #bcd0ca;
}
.ecg-controls-note span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(4, 24, 31, .7);
}
.ecg-controls-note kbd,
.ecg-options kbd {
  min-width: 28px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 234, 171, .5);
  border-radius: 7px;
  color: #ffe49b;
  background: rgba(3, 23, 27, .85);
  box-shadow: none;
  font: 850 12px/1.4 system-ui;
  text-align: center;
}
.ecg-crisis { display: grid; gap: 14px; }
.ecg-hud {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: grid;
  grid-template-columns: 52px minmax(190px, 1fr) 110px 110px auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(102, 232, 195, .34);
  border-radius: 19px;
  background: rgba(4, 31, 35, .94);
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .35);
}
.ecg-hud > a,
.ecg-hud > button {
  min-height: 44px;
  border: 1px solid rgba(236, 198, 105, .45);
  border-radius: 12px;
  color: #fff0be;
  background: rgba(255, 255, 255, .06);
  font-weight: 850;
  cursor: pointer;
}
.ecg-hud > a { display: grid; place-items: center; text-decoration: none; font-size: 22px; }
.ecg-hud > div:nth-child(2) { display: grid; }
.ecg-hud span { color: #a8c1b9; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ecg-hud b { color: #fff5d0; font-size: 16px; }
.ecg-hud-stat { display: grid; justify-items: center; padding: 5px 10px; border-left: 1px solid rgba(255, 255, 255, .1); }
.ecg-hud-stat b { color: #82ffd6; font-size: 21px; }
.ecg-stability {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) 58px;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  color: #c4d8d1;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ecg-stability > div { height: 9px; overflow: hidden; border-radius: 99px; background: #041419; }
.ecg-stability i {
  display: block;
  width: var(--stability);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef626f, #f4cc68 44%, #66dcae 80%);
  box-shadow: 0 0 15px rgba(90, 231, 180, .46);
  transition: width .35s ease;
}
.ecg-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(235, 195, 102, .32);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(7, 44, 42, .96), rgba(18, 27, 46, .96));
}
.ecg-case-copy > span { color: #f2cd74; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ecg-case h1 { font-size: clamp(2.2rem, 4.2vw, 4.5rem); }
.ecg-case p { max-width: 74ch; margin: 0; color: #d4e3de; font-size: 18px; line-height: 1.55; }
.ecg-clock {
  position: relative;
  display: grid;
  min-height: 100px;
  place-content: center;
  justify-items: center;
  border: 4px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background: conic-gradient(#f0c767 var(--remaining), rgba(255, 255, 255, .08) 0);
  box-shadow: inset 0 0 0 7px #0a2830;
}
.ecg-clock b { color: #fff4c9; font-size: 30px; line-height: 1; }
.ecg-clock span { color: #afc6bf; font-size: 9px; text-transform: uppercase; }
.ecg-monitor {
  position: relative;
  min-height: clamp(250px, 36vw, 470px);
  overflow: hidden;
  border: 2px solid rgba(99, 246, 202, .45);
  border-radius: 25px;
  background: #031a1b;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .48), inset 0 0 40px rgba(0, 0, 0, .6), 0 0 24px rgba(70, 231, 181, .1);
}
.ecg-monitor canvas { display: block; width: 100%; height: clamp(250px, 36vw, 470px); }
.ecg-crisis.is-twelve-lead .ecg-monitor,
.ecg-crisis.is-twelve-lead .ecg-monitor canvas { min-height: clamp(430px, 46vw, 640px); height: clamp(430px, 46vw, 640px); }
.ecg-crisis.has-supplemental-leads .ecg-monitor,
.ecg-crisis.has-supplemental-leads .ecg-monitor canvas { min-height: clamp(560px, 52vw, 720px); height: clamp(560px, 52vw, 720px); }
.music-volume-row input[type="range"] { width: min(260px, 42vw); accent-color: #d8ad4e; }
.ecg-scanline {
  position: absolute;
  inset: 0 auto 0 -10%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(135, 255, 220, .11), transparent);
  animation: ecg-scan 3.4s linear infinite;
}
@keyframes ecg-scan { to { transform: translateX(680%); } }
.ecg-question {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: start;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(235, 195, 102, .35);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8, 48, 43, .96), rgba(18, 27, 46, .96));
}
.ecg-question h2 { margin: 8px 0; color: #fff5d2; font-size: clamp(1.6rem, 3vw, 2.6rem); }
.ecg-confirmed { color: #b9d1ca; line-height: 1.5; }
.ecg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ecg-options button {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 16px;
  color: #f0f8f5;
  background: rgba(3, 25, 32, .72);
  font: 760 15px/1.35 system-ui;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.ecg-options button:hover:not(:disabled),
.ecg-options button:focus-visible { transform: translateY(-2px); border-color: #e6c56d; background: rgba(18, 64, 58, .92); }
.ecg-options button.correct { border-color: #6be2b6; background: rgba(25, 103, 76, .72); }
.ecg-options button.wrong { border-color: #ef7780; background: rgba(108, 34, 46, .68); }
.ecg-options button:disabled { cursor: default; opacity: .72; }
.ecg-options button.correct:disabled,
.ecg-options button.wrong:disabled { opacity: 1; }
.ecg-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr);
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(107, 226, 182, .45);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8, 62, 52, .96), rgba(17, 29, 48, .98));
}
.ecg-review.wrong { border-color: rgba(240, 119, 128, .5); }
.ecg-review h2 { margin: 6px 0 10px; color: #fff4cb; font-size: clamp(1.8rem, 3vw, 3rem); }
.ecg-review p { color: #d4e4de; font-size: 16px; line-height: 1.6; }
.ecg-review > div > span,
.ecg-review aside > span { color: #83f0ca; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ecg-review aside {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(235, 195, 102, .3);
  border-radius: 18px;
  background: rgba(3, 24, 31, .7);
}
.ecg-review aside b { color: #ffe4a0; font-size: 18px; line-height: 1.35; }
.ecg-review dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.ecg-review dl > div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.ecg-review dt { color: #a7c2ba; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.ecg-review dd { margin: 6px 0 0; color: #f4f8f6; font-weight: 750; line-height: 1.35; }
.ecg-review > .button { grid-column: 1 / -1; width: fit-content; justify-self: end; }
.ecg-finish {
  min-height: 70vh;
  display: grid;
  place-content: center;
  padding: clamp(28px, 6vw, 80px);
  border: 1px solid rgba(236, 196, 102, .48);
  border-radius: 30px;
  background: radial-gradient(circle at 80% 12%, rgba(84, 227, 181, .16), transparent 32%), linear-gradient(135deg, #073b35, #0c2636 62%, #281b3c);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .42);
}
.ecg-finish h1 { max-width: 13ch; font-size: clamp(3rem, 7vw, 6.8rem); }
.ecg-finish > p { max-width: 70ch; color: #d0e2dc; font-size: 18px; line-height: 1.6; }
.ecg-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.ecg-results article { display: grid; padding: 18px; border: 1px solid rgba(236, 196, 102, .25); border-radius: 17px; background: rgba(3, 24, 31, .66); }
.ecg-results b { color: #ffe294; font-size: 30px; }
.ecg-results span { color: #aac3bb; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.ecg-crisis.critical .ecg-monitor { animation: ecg-critical-glow 1.2s ease-in-out infinite alternate; }
@keyframes ecg-critical-glow { to { border-color: #ef6f78; box-shadow: 0 0 36px rgba(239, 79, 94, .28), inset 0 0 42px rgba(95, 9, 21, .22); } }
.is-paused .ecg-scanline { animation-play-state: paused; }

@media (max-width: 1100px) {
  .ecg-menu-hero { grid-template-columns: 1fr; }
  .ecg-hero-monitor { min-height: 330px; border-left: 0; border-top: 1px solid rgba(238, 194, 98, .26); }
  .ecg-question { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .arcade-campaign-deck { grid-template-columns: 1fr; }
  .ecg-hud { grid-template-columns: 44px minmax(140px, 1fr) auto; }
  .ecg-hud-stat { display: none; }
  .ecg-briefing { grid-template-columns: 1fr; }
  .ecg-options { grid-template-columns: 1fr; }
  .ecg-review { grid-template-columns: 1fr; }
  .ecg-review dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecg-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ecg-menu-hero { min-height: 0; }
  .ecg-hero-copy { padding: 26px 20px; }
  .ecg-hero-copy h1 { font-size: 3.4rem; }
  .ecg-hero-monitor { min-height: 240px; }
  .ecg-case { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .ecg-case h1 { font-size: 2.35rem; }
  .ecg-case p { font-size: 16px; }
  .ecg-clock { width: 82px; min-height: 82px; justify-self: end; }
  .ecg-monitor,
  .ecg-monitor canvas { min-height: 230px; height: 230px; }
  .ecg-crisis.is-twelve-lead .ecg-monitor,
  .ecg-crisis.is-twelve-lead .ecg-monitor canvas { min-height: 430px; height: 430px; }
  .ecg-crisis.has-supplemental-leads .ecg-monitor,
  .ecg-crisis.has-supplemental-leads .ecg-monitor canvas { min-height: 620px; height: 620px; }
  .ecg-question,
  .ecg-review { padding: 18px; }
  .ecg-review dl { grid-template-columns: 1fr; }
  .ecg-review > .button { width: 100%; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .ecg-campaign-preview svg,
  .ecg-hero-monitor svg,
  .ecg-scanline,
  .ecg-crisis.critical .ecg-monitor { animation: none !important; }
  .ecg-options button,
  .ecg-stability i { transition: none; }
}
.rank-reward-card b,
.rank-reward-card small {
  display: block;
}
.rank-reward-card small {
  margin-top: 3px;
  color: #ccd9d7;
  line-height: 1.35;
}
.rank-reward-card.locked {
  filter: saturate(0.62);
  opacity: 0.74;
}
.rank-reward-card.owned {
  border-color: #71d1ad;
  box-shadow: inset 0 0 30px rgba(65, 195, 151, 0.12);
}
.rank-reward-card.apex {
  border-color: #f1c95f;
  background:
    radial-gradient(circle at 85% 12%, rgba(238, 192, 78, 0.24), transparent 40%),
    linear-gradient(145deg, rgba(45, 20, 65, 0.9), rgba(4, 28, 32, 0.92));
}
.atlas-source-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.atlas-source-card {
  min-width: 0;
  min-height: 330px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1fr);
  overflow: hidden;
  color: #fff8e8;
  border-color: rgba(232, 195, 102, 0.5);
  background: linear-gradient(145deg, #063d36, #10243c 58%, #241833);
}
.atlas-source-card > img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: top left;
  border-right: 1px solid rgba(232, 195, 102, 0.35);
}
.atlas-source-card > div {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.atlas-source-card h2 {
  margin: 5px 0 8px;
  font-size: clamp(30px, 3vw, 46px);
}
.atlas-source-card p {
  color: #d6e1de;
  line-height: 1.55;
}
.atlas-source-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.atlas-source-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  color: #fff8e8;
  border: 1px solid rgba(232, 195, 102, 0.7);
  border-radius: 22px;
  background: linear-gradient(145deg, #062e2b, #111d34 62%, #241632);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.7);
}
.atlas-source-dialog::backdrop {
  background: rgba(0, 11, 17, 0.82);
  backdrop-filter: blur(8px);
}
.atlas-source-dialog > header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(232, 195, 102, 0.28);
}
.atlas-source-dialog h2 {
  margin: 3px 0 0;
}
.atlas-source-pages {
  max-height: calc(92vh - 94px);
  padding: 18px;
  overflow: auto;
  display: grid;
  gap: 18px;
}
.atlas-source-pages figure {
  margin: 0;
}
.atlas-source-pages figcaption {
  margin-bottom: 8px;
  color: #edca73;
  font-weight: 800;
}
.atlas-source-pages img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fff;
}
@media (max-width: 900px) {
  .atlas-source-shelf {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .atlas-source-card {
    grid-template-columns: 1fr;
  }
  .atlas-source-card > img {
    height: 180px;
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid rgba(232, 195, 102, 0.35);
  }
  .atlas-source-actions,
  .atlas-source-actions .button {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .collection-purpose-grid,
  .companion-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .collection-purpose > header {
    grid-template-columns: 1fr;
  }
  .rank-reward-vault > header {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .rank-reward-vault {
    padding: 18px;
  }
  .rank-reward-card {
    flex-basis: min(370px, calc(100vw - 72px));
  }
  .collection-purpose-grid,
  .companion-value-grid,
  .companion-benefit-numbers {
    grid-template-columns: 1fr;
  }
  .companion-toolbar label,
  .companion-toolbar select,
  .companion-toolbar input {
    width: 100%;
    max-width: none;
  }
}

/* Arcade class missions and a non-overlapping Culture Command stage. */
.arcade-class-lab {
  margin: 30px 0 20px;
  padding: clamp(20px, 3vw, 30px);
  color: #f7f3e8;
  background: linear-gradient(145deg, rgba(7, 54, 48, 0.98), rgba(20, 25, 54, 0.98));
  border-color: rgba(232, 191, 100, 0.4);
}
.arcade-class-lab > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.arcade-class-lab h2 { margin: 4px 0; color: #fff8e7; }
.arcade-class-lab p { margin: 0; color: #cbdad5; }
.arcade-class-lab > header > strong {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffe49a;
  background: rgba(255, 255, 255, 0.1);
}
.arcade-scope-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(210px, 0.8fr);
  gap: 12px;
}
.arcade-scope-controls label,
.arcade-scope-controls > div {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #c8d8d2;
  font-size: 12px;
  font-weight: 800;
}
.arcade-scope-controls select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 34px 9px 12px;
  border: 1px solid rgba(125, 228, 205, 0.35);
  border-radius: 11px;
  background: #0a292d;
  color: #fff;
}
.arcade-scope-controls > div {
  align-content: center;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
}
.arcade-scope-controls > div b { color: #ffe49a; font-size: 15px; }
.arcade-scope-controls > div small { color: #aebfba; }
.arcade-campaign-tile.recommended {
  outline: 3px solid rgba(115, 255, 218, 0.55);
  outline-offset: 2px;
}
.arcade-library .arcade-card.unavailable { opacity: 0.68; }
.arcade-library .arcade-card.unavailable:hover { transform: none; }

@media (min-width: 1101px) {
  .cc-stage {
    display: grid;
    grid-template-columns: minmax(330px, 34%) minmax(0, 1fr);
  }
  .cc-mission,
  .cc-mission.long {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: 100%;
    max-height: none;
    padding: clamp(20px, 2vw, 30px);
    border-radius: 0;
    overflow: auto;
    align-content: center;
  }
  .cc-mission.long h1 {
    font-size: clamp(16px, 1.35vw, 21px);
    line-height: 1.22;
  }
  .cc-mission.long p { font-size: 12px; }
  .cc-canvas {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 100%;
  }
}

@media (max-width: 1100px) {
  .culture-command:has(.cc-stage) {
    height: calc(100dvh - 110px);
    min-height: 500px;
    overflow: hidden;
  }
  .cc-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(110px, 32%) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .cc-mission,
  .cc-mission.long {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: auto;
    height: 100%;
    max-height: none;
    border-radius: 18px 18px 0 0;
    overflow: auto;
  }
  .cc-canvas {
    position: relative;
    inset: auto;
    grid-row: 2;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .arcade-class-lab > header { display: grid; }
  .arcade-class-lab > header > strong { width: max-content; }
  .arcade-scope-controls { grid-template-columns: 1fr; }
  .culture-command:has(.cc-stage) { height: calc(100dvh - 94px); }
  .cc-stage { grid-template-rows: minmax(96px, 35%) minmax(0, 1fr); }
  .cc-canvas { min-height: 0; }
}
.collection-destination {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #ffffff24;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 60px #02061070;
}
.collection-destination:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    0deg,
    #030817f5 8%,
    #071222b5 50%,
    transparent 84%
  );
}
.collection-destination img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.collection-destination:hover img {
  transform: scale(1.025);
}
.collection-destination span {
  position: absolute;
  inset: auto 22px 20px;
  display: grid;
}
.collection-destination small {
  color: #e6ca7c;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.collection-destination b {
  font:
    700 32px Georgia,
    serif;
}
.collection-destination em {
  font-style: normal;
  color: #c9d5da;
}
.collection-next {
  margin-top: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.collection-next h2,
.collection-next p {
  margin: 0;
}
.collection-next .eyebrow {
  grid-column: 1/-1;
}
.collection-next .button {
  grid-column: 2;
  grid-row: 2/4;
}
.catalog-toolbar,
.rank-filters {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  margin: 18px 0;
  background: linear-gradient(145deg, #11182f, #162238);
  color: #fff;
}
.catalog-toolbar > div:first-child,
.rank-filters > div:first-child {
  display: grid;
}
.catalog-toolbar > div:nth-child(2),
.rank-filters > div:nth-child(2) {
  display: flex;
  gap: 8px;
  overflow: auto;
}
.catalog-toolbar button,
.rank-filters button {
  white-space: nowrap;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: #ffffff0b;
  color: #d7e1e2;
  padding: 9px 14px;
  cursor: pointer;
}
.catalog-toolbar button[aria-pressed="true"],
.rank-filters button[aria-pressed="true"] {
  background: #3c9d82;
  color: #fff;
  border-color: #76d6ba;
  box-shadow: 0 8px 24px #2382684d;
}
.catalog-toolbar > span,
.rank-filters > span {
  font-size: 12px;
  color: #b8c9ce;
}
.catalog-toolbar.companion-toolbar {
  margin: 0 0 18px;
}
.relic-rule-wrap {
  min-width: 0;
}
.relic-rules {
  display: grid;
  gap: 6px;
  margin: 0;
}
.relic-rules > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-top: 6px;
  border-top: 1px solid rgba(9, 79, 64, 0.14);
}
.relic-rules dt {
  color: #087560;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.relic-rules dd {
  margin: 0;
  color: #162c27;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}
.market-return {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 18px 0 -2px;
  border-color: rgba(95, 230, 190, 0.52);
  background: linear-gradient(
    135deg,
    rgba(8, 68, 55, 0.97),
    rgba(19, 35, 60, 0.97)
  );
  color: #eefcf7;
}
.market-return span {
  margin-left: auto;
  color: #bfe5d7;
  font-size: 12px;
}
.shop-card.market-focus {
  border-color: #6ee6bd;
  box-shadow:
    0 0 0 3px rgba(76, 213, 167, 0.22),
    0 24px 54px rgba(1, 32, 25, 0.34);
}
.shop-card.market-focus:focus-visible {
  outline: 3px solid #9cf4d6;
  outline-offset: 5px;
}

/* Scroll performance: preserve the finished artwork while avoiding redundant paint work. */
.shop-card,
.study-card {
  /* These surfaces are fully opaque, so backdrop blur cannot affect their pixels. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  contain: paint;
}

.home-hero,
.dashboard,
.class-dashboard,
.companion-story,
.destinations,
.market-hero,
.market-guides,
.shop-page > section {
  contain: paint;
}

.market-guides,
.shop-page > section {
  content-visibility: auto;
}

.market-guides,
.shop-page > section {
  contain-intrinsic-size: auto 360px;
}

.home-hero,
.dashboard,
.class-dashboard,
.companion-story,
.destinations,
.answer-checkpoint,
.feedback-lessons,
.mobile-dock {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.answer-checkpoint,
.feedback-lessons,
.feedback-lessons > article {
  contain: layout paint style;
}

@media (max-width: 620px) {
  .answer-checkpoint .feedback-lessons {
    overscroll-behavior: contain;
    will-change: scroll-position;
  }
}

/* Static glass pass: match the frosted look without recomputing blur while scrolling. */
body {
  position: relative;
  isolation: isolate;
  background-image: none;
  background-color: #030a13;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 12% -4%,
      rgba(111, 79, 180, 0.22),
      transparent 32%
    ),
    radial-gradient(circle at 92% 8%, rgba(11, 36, 70, 0.46), transparent 36%),
    linear-gradient(
      160deg,
      rgba(3, 10, 19, 0.72),
      rgba(6, 30, 26, 0.76) 45%,
      rgba(3, 16, 14, 0.85)
    ),
    url("assets/textures/emerald-wood-gold-texture.webp");
  background-size: auto, auto, auto, cover;
  background-position: center;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.topbar,
.panel,
.mode-card,
.destination,
.achievement-card,
.shop-card,
.relic-card,
.arcade-card,
.rank-card,
.avatar-choice,
.dashboard > .panel,
.class-dashboard,
.class-dashboard-grid,
.class-dashboard-empty,
.companion-story,
.story-dialogue,
.opening-steps li,
.modal-backdrop,
.mobile-dock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dashboard > .panel {
  background: linear-gradient(
    145deg,
    rgba(9, 35, 30, 0.97),
    rgba(13, 42, 36, 0.91)
  );
}

.story-dialogue {
  background: linear-gradient(145deg, #0b1723f7, #14142cf7);
}

@media (max-width: 700px) {
  .mobile-dock {
    background: #07131afa;
  }
}
.market-focus-return {
  color: #087560;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-card[hidden],
.relic-card[hidden],
.companion-card-modern[hidden],
.rank-card[hidden] {
  display: none !important;
}
.save-safety {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px;
  border-color: #75c9ac55;
  background: linear-gradient(145deg, #e9f3ed, #dbe9e2);
}
.save-safety h2 {
  font-size: 30px;
  margin: 6px 0;
}
.save-safety p {
  max-width: 65ch;
  color: #516461;
}
.save-safety-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.save-safety-actions small {
  grid-column: 1/-1;
  text-align: right;
  color: #657773;
}
.companion-reaction {
  position: fixed;
  z-index: 220;
  right: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 13px;
  align-items: center;
  padding: 12px;
  border: 1px solid #69dbba70;
  border-radius: 18px;
  background: linear-gradient(145deg, #0b1728f2, #17203bf2);
  color: #fff;
  box-shadow: 0 24px 70px #0009;
  animation: companion-react 0.28s ease-out;
}
.companion-reaction img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.companion-reaction span {
  display: grid;
}
.companion-reaction small {
  color: #72d9bb;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.companion-reaction b {
  font:
    700 16px/1.35 Georgia,
    serif;
}
@keyframes companion-react {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.active-companion[class*="bond-evolution-"] img {
  transition: filter 0.25s;
}
.active-companion.bond-evolution-2 img {
  filter: drop-shadow(0 18px 26px #0008) drop-shadow(0 0 15px #68dabb77);
}
.active-companion.bond-evolution-3 img,
.active-companion.bond-evolution-4 img,
.active-companion.bond-evolution-5 img {
  filter: drop-shadow(0 20px 28px #0008) drop-shadow(0 0 22px #e8c96c8c);
}
.atlas-guide-dialogue {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  max-width: 390px;
  padding: 10px 12px;
  border: 1px solid #ffffff24;
  border-radius: 15px;
  background: #081421a8;
}
.atlas-guide-dialogue img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 12px;
}
.atlas-guide-dialogue p {
  margin: 0;
  color: #d8e6e5;
  font:
    600 13px/1.45 Georgia,
    serif;
}
.atlas-more {
  display: block;
  margin: 22px auto 0;
}
.rank-filters {
  margin: 18px 0 24px;
}
.cc-command-options {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  margin: 20px 0 24px;
}
.cc-daily-mission,
.cc-difficulty {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(104, 218, 186, 0.28);
  border-radius: 22px;
  color: #f7f4e9;
  background:
    radial-gradient(circle at 0 0, rgba(54, 184, 151, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(6, 50, 44, 0.98), rgba(15, 22, 39, 0.99));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.06);
}
.cc-daily-mission::after,
.cc-difficulty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 55%, rgba(222, 183, 94, 0.05));
}
.cc-daily-mission > *,
.cc-difficulty > * {
  position: relative;
  z-index: 1;
}
.cc-daily-mission header,
.cc-difficulty header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cc-daily-mission header > div,
.cc-difficulty header > div {
  display: grid;
  gap: 2px;
}
.cc-daily-mission header small,
.cc-difficulty header small {
  color: #a9c6bd;
  font-size: 11px;
}
.cc-daily-mission header > strong {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(239, 199, 103, 0.42);
  border-radius: 999px;
  color: #ffe19a;
  background: rgba(204, 151, 50, 0.12);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-console-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(92, 226, 187, 0.52);
  border-radius: 13px;
  color: #8af0ce;
  background: linear-gradient(145deg, rgba(24, 111, 94, 0.74), rgba(7, 33, 39, 0.9));
  box-shadow: inset 0 0 18px rgba(70, 219, 175, 0.12);
  font: 900 24px/1 Georgia, serif;
}
.cc-console-icon.pressure {
  color: #f5ce75;
  border-color: rgba(239, 199, 103, 0.48);
  background: linear-gradient(145deg, rgba(121, 85, 31, 0.6), rgba(35, 29, 40, 0.92));
}
.cc-daily-mission h2,
.cc-difficulty h2 {
  margin: 0 0 7px;
  color: #fff8e8;
  font: 800 clamp(25px, 2.3vw, 36px)/1.08 Georgia, serif;
}
.cc-daily-mission > p,
.cc-difficulty > p {
  max-width: 56ch;
  margin: 0 0 18px;
  color: #c7d9d2;
  line-height: 1.55;
}
.cc-mission-meter {
  height: 11px;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(1, 13, 20, 0.78);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.38);
}
.cc-mission-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #42c19c, #e5c567);
  box-shadow: 0 0 18px rgba(66, 193, 156, 0.48);
}
.cc-daily-mission footer {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #a8c7bd;
  font-size: 12px;
}
.cc-daily-mission footer b {
  color: #f1d184;
}
.cc-daily-mission.complete {
  border-color: #60ddb6;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 0 44px rgba(55, 182, 139, 0.14);
}
.cc-pace-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cc-difficulty .cc-pace-options button {
  position: relative;
  display: grid;
  text-align: left;
  gap: 5px;
  min-height: 126px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  color: #f8f5e9;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cc-difficulty .cc-pace-options button:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 199, 103, 0.52);
}
.cc-pace-check {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 14px;
  height: 14px;
  border: 1px solid #69827b;
  border-radius: 50%;
  background: #071a1d;
}
.cc-difficulty button > b {
  padding-right: 18px;
  font-size: 16px;
}
.cc-difficulty button small {
  color: #bad0c9;
  font-size: 12px;
}
.cc-difficulty button small strong {
  color: #ffe09a;
  font-size: 22px;
}
.cc-difficulty button em {
  align-self: end;
  color: #8eaaa2;
  font-size: 11px;
  font-style: normal;
}
.cc-difficulty .cc-pace-options button[aria-pressed="true"] {
  border-color: #6ae2bf;
  background: linear-gradient(145deg, rgba(21, 103, 88, 0.92), rgba(14, 61, 60, 0.9));
  box-shadow: 0 0 0 1px rgba(106, 226, 191, 0.18), 0 12px 28px rgba(0, 0, 0, 0.25);
}
.cc-difficulty button[aria-pressed="true"] .cc-pace-check {
  border: 4px solid #baf6df;
  background: #1aa27e;
}
.cc-tutorial {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(145deg, #071424, #111b35);
  color: #fff;
}
.cc-tutorial > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.cc-tutorial > div {
  align-self: center;
  padding: 42px;
}
.cc-tutorial h1 {
  font-size: clamp(36px, 4.5vw, 58px);
  margin: 8px 0 20px;
}
.cc-tutorial ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cc-tutorial li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff0b;
}
.cc-tutorial li b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #217b69;
}
.cc-tutorial > div > p {
  font:
    600 16px/1.5 Georgia,
    serif;
  color: #e9d28f;
}
.cc-tutorial .button {
  margin: 5px 7px 0 0;
}
@media (max-width: 900px) {
  .launch-journey {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  .story-dialogue {
    max-width: 520px;
  }
  .collection-grid {
    grid-template-columns: 1fr;
  }
  .collection-intro {
    grid-template-columns: 110px 1fr;
  }
  .collection-intro img {
    width: 110px;
    height: 120px;
  }
  .collection-intro > span {
    display: none;
  }
  .catalog-toolbar,
  .rank-filters {
    grid-template-columns: 1fr;
  }
  .catalog-toolbar > span,
  .rank-filters > span {
    display: none;
  }
  .save-safety {
    grid-template-columns: 1fr;
  }
  .cc-command-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  body {
    padding-bottom: 74px;
  }
  .mobile-dock {
    position: fixed;
    z-index: 190;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    left: 8px;
    right: 8px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    min-height: 60px;
    padding: 6px;
    border: 1px solid #ffffff26;
    border-radius: 18px;
    background: #07131aee;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px #000a;
  }
  .mobile-dock a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    color: #c9d6d5;
    text-decoration: none;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 12px;
  }
  .mobile-dock a span {
    font-size: 18px;
    color: #70d9bc;
  }
  .mobile-dock a:hover,
  .mobile-dock a:focus {
    background: #ffffff10;
    color: #fff;
  }
  .launch-journey {
    min-height: 730px;
    margin: 16px 0;
    padding: 22px;
    align-content: end;
  }
  .launch-journey-art {
    background-position: 66% center;
  }
  .launch-journey:after {
    background: linear-gradient(
      0deg,
      #020713fa 22%,
      #071222d9 63%,
      transparent 100%
    );
  }
  .launch-journey-copy h2 {
    font-size: 38px;
  }
  .story-gates {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-dialogue {
    grid-template-columns: 78px 1fr;
  }
  .story-dialogue img {
    width: 78px;
    height: 92px;
  }
  .story-dialogue p {
    font-size: 12px;
  }
  .collection-intro {
    grid-template-columns: 76px 1fr;
    padding: 16px;
    gap: 14px;
  }
  .collection-intro img {
    width: 76px;
    height: 90px;
    border-radius: 14px;
  }
  .collection-intro h2 {
    font-size: 24px;
  }
  .collection-intro p {
    font-size: 12px;
  }
  .collection-destination {
    min-height: 260px;
  }
  .collection-next {
    display: block;
  }
  .collection-next .button {
    margin-top: 14px;
  }
  .catalog-toolbar,
  .rank-filters {
    padding: 14px;
  }
  .catalog-toolbar > div:nth-child(2),
  .rank-filters > div:nth-child(2) {
    margin: 0 -2px;
  }
  .market-return {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .market-return span {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .save-safety-actions {
    grid-template-columns: 1fr;
  }
  .save-safety-actions small {
    grid-column: 1;
    text-align: left;
  }
  .companion-reaction {
    right: 16px;
    bottom: 82px;
  }
  .atlas-guide-dialogue {
    max-width: none;
    margin-top: 12px;
  }
  .cc-difficulty > div {
    grid-template-columns: 1fr;
  }
  .cc-tutorial {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cc-tutorial > img {
    height: 300px;
  }
  .cc-tutorial > div {
    padding: 22px;
  }
  .cc-tutorial h1 {
    font-size: 36px;
  }
}

/* Avatar cards use readable in-world copy instead of art-production descriptors. */
.avatar-choice .avatar-description {
  display: grid;
  gap: 5px;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 201, 111, 0.38);
  border-radius: 12px;
  background: rgba(2, 12, 10, 0.9);
  text-align: left;
  font-family: Arial, sans-serif;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.avatar-choice .avatar-description small,
.avatar-choice .avatar-description em {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.avatar-choice .avatar-description small {
  color: #f0ca73 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.025em;
}
.avatar-choice .avatar-description em {
  color: #f7f1df !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}
/* High-level arcade campaigns: clinical classification and real-image anatomy. */
.flagship-arcade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 22px 0;
}
.flagship-arcade-grid .culture-feature {
  margin: 0;
  grid-template-columns: minmax(220px, 0.9fr) 1fr;
}
.flagship-arcade-grid .culture-feature img {
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.ms-game,
.al-game {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 34px);
}
.ms-hero,
.al-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  overflow: hidden;
  padding: 0;
}
.ms-hero > div,
.al-hero > div {
  padding: clamp(28px, 5vw, 70px);
  align-self: center;
}
.ms-hero img,
.al-hero img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
}
.ms-hero h1,
.al-hero h1,
.ms-patient h1,
.al-wordbank h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 5.3rem);
  line-height: 0.95;
  margin: 0.2em 0;
}
.ms-coverage {
  margin-top: 20px;
  padding: 34px;
}
.ms-coverage .eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
}
.ms-coverage h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.12;
}
.ms-coverage > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0;
}
.ms-coverage span,
.al-regions span {
  border: 1px solid rgba(217, 178, 83, 0.35);
  border-radius: 999px;
  background: rgba(217, 178, 83, 0.1);
  padding: 8px 12px;
  color: var(--gold);
}
.ms-hud,
.al-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid rgba(217, 178, 83, 0.35);
  border-radius: 20px;
  background: rgba(5, 20, 23, 0.92);
}
.ms-hud > div:last-child,
.al-hud > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  text-align: center;
}
.ms-hud strong,
.al-hud strong {
  font-size: 1.45rem;
  color: var(--gold);
}
.ms-hud small,
.al-hud small {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ms-patient {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 30px;
}
.ms-patient-art {
  height: 230px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, transparent, rgba(4, 20, 19, 0.88)),
    url("assets/arcade/mild-or-severe-environment-v1.webp") 50% 65% / cover;
  box-shadow: inset 0 0 0 1px rgba(217, 178, 83, 0.3);
}
.ms-patient h1 {
  font-size: clamp(1.8rem, 3vw, 3.35rem);
  line-height: 1.08;
}
.ms-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ms-choices button {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  text-align: left;
  min-height: 100px;
  padding: 17px;
  border: 1px solid rgba(217, 178, 83, 0.34);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(13, 54, 49, 0.96),
    rgba(18, 29, 46, 0.97)
  );
  color: var(--cream);
}
.ms-choices button:hover,
.al-wordbank button:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.ms-choices button span {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--gold);
}
.ms-result,
.al-result,
.ms-finish,
.al-finish {
  max-width: 1050px;
  margin: 5vh auto;
  padding: clamp(28px, 5vw, 64px);
}
.ms-result h1,
.al-result h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  margin: 0.15em 0;
}
.ms-teaching {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
}
.ms-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.ms-compare > div {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}
.ms-compare span,
.ms-compare b {
  display: block;
}
.ms-source {
  display: inline-block;
  margin: 8px 0 24px;
  color: var(--gold);
}
.al-regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.al-regions button {
  padding: 24px;
  text-align: left;
  color: var(--cream);
}
.al-regions b,
.al-regions small {
  display: block;
  margin-top: 14px;
}
.al-regions b {
  font-family: var(--display);
  font-size: 1.7rem;
}
.al-integrity {
  padding: 28px;
}
.al-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 20px;
}
.al-specimen {
  margin: 0;
  padding: 14px;
  display: grid;
  place-items: center;
  min-height: 650px;
}
.al-specimen img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
  background: #f4efdf;
}
.al-specimen figcaption {
  width: 100%;
  padding: 18px 8px 5px;
  font-size: 1.1rem;
}
.al-wordbank {
  padding: 30px;
  align-self: stretch;
}
.al-wordbank h1 {
  font-size: clamp(2rem, 4vw, 4rem);
}
.al-wordbank > div {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}
.al-wordbank button {
  padding: 16px 18px;
  border: 1px solid rgba(217, 178, 83, 0.34);
  border-radius: 14px;
  background: rgba(7, 50, 45, 0.75);
  color: var(--cream);
  font-weight: 800;
  text-align: left;
}
.al-result-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1fr;
  gap: 28px;
  align-items: center;
}
.al-result-grid img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  border-radius: 16px;
  background: #f4efdf;
}
.al-result dl > div {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.al-result dt {
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.al-result dd {
  margin: 4px 0 0;
  font-weight: 800;
}
.image-error img {
  display: none;
}
.al-load-error {
  color: #ffd69a;
}
@media (max-width: 1050px) {
  .flagship-arcade-grid,
  .ms-hero,
  .al-hero,
  .al-workbench {
    grid-template-columns: 1fr;
  }
  .flagship-arcade-grid .culture-feature {
    grid-template-columns: 1fr;
  }
  .ms-hero img,
  .al-hero img {
    min-height: 320px;
    order: -1;
  }
  .al-regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-specimen {
    min-height: 420px;
  }
}
@media (max-width: 650px) {
  .ms-game,
  .al-game {
    padding: 10px;
  }
  .ms-hud,
  .al-hud {
    grid-template-columns: auto 1fr;
  }
  .ms-hud > div:last-child,
  .al-hud > div:last-child {
    grid-column: 1/-1;
    width: 100%;
    justify-content: center;
  }
  .ms-patient {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .ms-patient-art {
    height: 150px;
  }
  .ms-choices,
  .ms-compare,
  .al-regions,
  .al-result-grid {
    grid-template-columns: 1fr;
  }
  .ms-choices button {
    min-height: 82px;
  }
  .al-specimen {
    min-height: 300px;
  }
  .al-wordbank {
    padding: 20px;
  }
}
/* Standalone styling for the two new flagship campaign cards. */
.arcade-campaign-feature {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: linear-gradient(145deg, #07182b, #062d27 62%, #29183d);
  color: #f8f4ea;
  border-color: rgba(232, 191, 100, 0.42);
}
.arcade-campaign-feature img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.arcade-campaign-feature > div {
  min-width: 0;
  padding: clamp(22px, 2.4vw, 42px);
  align-self: center;
}
.arcade-campaign-feature h2 {
  font:
    800 clamp(34px, 3vw, 54px)/0.98 Georgia,
    serif;
  margin: 10px 0 18px;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
.arcade-campaign-feature p {
  max-width: 100%;
  color: #d8e4df;
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.arcade-campaign-feature .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.arcade-campaign-feature .actions span {
  color: #b9c9c2;
  font-size: 13px;
}
@media (max-width: 1420px) {
  .flagship-arcade-grid {
    grid-template-columns: 1fr;
  }
  .arcade-campaign-feature {
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  }
}
@media (max-width: 760px) {
  .arcade-campaign-feature {
    grid-template-columns: 1fr;
  }
  .arcade-campaign-feature img {
    max-height: 300px;
  }
}
.al-landmark {
  display: grid;
  align-content: center;
  min-height: 420px;
  padding: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(202, 157, 62, 0.18),
      transparent 45%
    ),
    linear-gradient(145deg, #0a332d, #101a2b);
  border: 1px solid rgba(217, 178, 83, 0.38);
  border-radius: 22px;
}
.al-landmark h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  margin: 0.3em 0;
}
.al-landmark p {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
}

/* Readable, goal-driven presentation for the clinical and anatomy campaigns. */
.ms-game .panel,
.al-game .panel {
  color: #f8f4ea !important;
  background-color: #092927 !important;
  border-color: rgba(232, 191, 100, 0.48) !important;
}
.ms-game,
.al-game,
.ms-round,
.al-round {
  min-width: 0;
  overflow: visible;
}
.ms-patient-art {
  background-image: linear-gradient(180deg, transparent, rgba(4, 20, 19, 0.76)), url("assets/arcade/mild-or-severe-environment-v2.webp") !important;
}
.ms-choices button,
.al-wordbank button,
.al-regions button {
  color: #fff8e7 !important;
  background: linear-gradient(135deg, #0d4a40, #12263c) !important;
  border: 1px solid #a98a42 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.2);
}
.ms-choices button b,
.al-wordbank button {
  color: #fff8e7 !important;
  font-size: 16px;
  line-height: 1.35;
}
.ms-shift-progress,
.al-progress {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(232,191,100,.42);
  border-radius: 15px;
  color: #f8f4ea;
  background: #081f26;
}
.ms-shift-progress span,
.ms-shift-progress b { display:block; }
.ms-shift-progress b { margin: 3px 0 10px; color:#ffe49a; }
.ms-shift-progress i,
.al-progress { overflow:hidden; }
.ms-shift-progress i {
  display:block; height:9px; border-radius:99px; background:#183b3c;
}
.ms-shift-progress em,
.al-progress i {
  display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#20ad8d,#f0c96f);
}
.al-progress { height: 9px; padding: 0; }
.al-specimen { position:relative; background:#071d25 !important; }
.al-specimen img { box-shadow: 0 0 0 3px #27463f, 0 18px 40px rgba(0,0,0,.45); }
.al-marker-banner {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px 16px; border:1px solid rgba(240,201,111,.58); border-radius:14px;
  background:linear-gradient(90deg,#0b3935,#10243a); color:#fff8e7;
}
.al-marker-banner span { font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.al-marker-banner b { color:#ffe16f; font-size:22px; line-height:1; white-space:nowrap; }
.al-drop-target {
  display:grid !important; place-items:center; min-height:120px; margin:20px 0 !important;
  border:2px dashed #f0c96f; border-radius:18px; color:#f8f4ea;
  background:radial-gradient(circle,#155448,#092b31 70%) !important;
  transition:.2s ease;
}
.al-drop-target.is-ready { transform:scale(1.02); box-shadow:0 0 0 4px rgba(66,220,184,.25),0 0 35px rgba(66,220,184,.3); }
.al-drop-target span,.al-drop-target b { display:block; text-align:center; }
.al-drop-target span { color:#b9d8d0; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.al-drop-target b { color:#ffe49a; font-size:24px; }
.al-word-options { display:grid !important; gap:10px; }
.ms-feedback {
  margin:20px 0; padding:22px; border:1px solid #4d9a8b; border-radius:18px;
  background:linear-gradient(145deg,#103d3a,#102a3e) !important;
}
.ms-result.panel,
.al-result.panel,
.ms-finish.panel,
.al-finish.panel {
  color:#f8f4ea !important;
  background:linear-gradient(145deg,#082b29,#10243a 68%,#271b38) !important;
  border-color:rgba(232,191,100,.52) !important;
}
.ms-result h1,.al-result h1,.ms-finish h1,.al-finish h1,
.ms-result p,.al-result p,.ms-finish p,.al-finish p { color:#f8f4ea; }
.ms-compare>div,.al-result dl>div { background:rgba(255,255,255,.065); }
.ms-goal-feedback { color:#d8eee7 !important; }
.ms-feedback span { color:#ffe49a; font-weight:900; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.ms-feedback p { margin:.55rem 0 0; color:#f8f4ea; font-size:18px; line-height:1.55; }
.ms-goal-feedback { color:#c9ded7; font-weight:750; }
.game-finish-stats {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0;
}
.game-finish-stats>div { padding:22px; border-radius:18px; background:#102f35; border:1px solid #4d8177; }
.game-finish-stats b,.game-finish-stats span { display:block; }
.game-finish-stats b { color:#ffe49a; font-size:36px; }
.game-finish-stats span { color:#d7e2de; margin-top:6px; }
@media(max-width:650px){
  .al-marker-banner{align-items:flex-start;flex-direction:column;gap:6px}.al-marker-banner b{font-size:20px}
  .game-finish-stats{grid-template-columns:1fr}.ms-patient h1,.al-wordbank h1{font-size:clamp(1.65rem,8vw,2.5rem)}
}
/* Guided Learn, persistent bank progress, and personal card burying. */
.bank-progress {
  height: 8px;
  margin: 0.65rem 0 0.35rem;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  min-width: min(34rem, 70vw);
}
.bank-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e5b95f, #fff0b7);
  box-shadow: 0 0 18px rgba(229, 185, 95, 0.45);
}
.study-continuation {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  border-color: rgba(239, 198, 106, 0.48);
  background: linear-gradient(
    120deg,
    rgba(7, 50, 45, 0.98),
    rgba(13, 29, 43, 0.98) 62%,
    rgba(39, 25, 55, 0.96)
  );
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255,255,255,.07);
}
.study-continuation::before {
  content: "↻";
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(239,198,106,.55);
  border-radius: 20px;
  color: #ffe49a;
  background: radial-gradient(circle, rgba(38,129,105,.55), rgba(8,29,35,.92));
  font: 800 30px/1 var(--display);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.study-continuation::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(239,198,106,.13);
  box-shadow: inset 0 0 70px rgba(86,56,122,.18);
  pointer-events: none;
}
.study-continuation h2,
.study-continuation p {
  margin: 0.2rem 0;
}
.study-continuation h2 { color:#fff7e6; font-family:var(--display); font-size:clamp(1.55rem,3vw,2.35rem); }
.study-continuation p { color:#cbdad5; }
.study-continuation .button { position:relative; z-index:1; white-space:nowrap; }
.learn-builder {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(16px,3vw,38px);
}
.learn-builder-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:28px;
  align-items:center;
  padding:clamp(28px,5vw,64px);
  border:1px solid rgba(232,191,100,.48);
  border-radius:28px;
  background:
    radial-gradient(circle at 85% 20%,rgba(103,71,151,.26),transparent 34%),
    linear-gradient(135deg,#062d29,#0b2030 64%,#261b39);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.learn-builder-hero h1 { margin:.2em 0; color:#fff7e7; font:800 clamp(2.7rem,6vw,5.8rem)/.96 var(--display); }
.learn-builder-hero p { max-width:760px; color:#d8e4df; font-size:1.08rem; line-height:1.65; }
.learn-builder-back { display:inline-block; margin-bottom:20px; color:#a9d7cb; text-decoration:none; font-weight:800; }
.learn-builder-seal {
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  border:1px solid rgba(240,201,111,.55);
  border-radius:50%;
  background:radial-gradient(circle,#14574b,#0a2832 67%,#171b30);
  box-shadow:0 0 0 9px rgba(240,201,111,.05),0 20px 50px rgba(0,0,0,.35);
}
.learn-builder-seal b { color:#ffe49a; font:800 58px/1 var(--display); }
.learn-builder-seal span { margin:7px 0 15px; color:#fff8e9; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.learn-builder-seal small { max-width:190px; color:#bcd0c9; line-height:1.45; }
.learn-builder-panel { margin-top:20px; padding:clamp(22px,4vw,42px); background:linear-gradient(145deg,rgba(7,42,39,.97),rgba(17,26,43,.98)) !important; }
.learn-builder-heading { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.learn-builder-heading h2 { margin:.1em 0; color:#fff7e7; font:800 clamp(1.8rem,4vw,3rem)/1 var(--display); }
.learn-builder-step { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#d8ab51; color:#10231d; font-weight:950; }
.learn-scope-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.learn-scope-card,.learn-count-card {
  min-width:0;
  text-align:left;
  border:1px solid rgba(232,191,100,.3);
  border-radius:19px;
  color:#f8f4ea;
  background:linear-gradient(145deg,#103a36,#10263a);
  cursor:pointer;
  transition:.18s ease;
}
.learn-scope-card { min-height:220px; padding:22px; display:flex; flex-direction:column; }
.learn-scope-card>span { color:#9fcfc3; font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.learn-scope-card b { margin:18px 0 8px; color:#fff4d4; font:800 1.45rem/1.1 var(--display); }
.learn-scope-card small { color:#c7d6d1; line-height:1.5; }
.learn-scope-card em { margin-top:auto; padding-top:18px; color:#e6bd67; font-style:normal; font-weight:850; }
.learn-scope-card.selected,.learn-count-card.selected { border-color:#f0c96f; background:linear-gradient(145deg,#126354,#182a44); box-shadow:0 0 0 3px rgba(240,201,111,.12),0 15px 35px rgba(0,0,0,.25); transform:translateY(-3px); }
.learn-scope-card:disabled { opacity:.42; cursor:not-allowed; }
.learn-count-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.learn-count-card { min-height:105px; padding:18px; text-align:center; }
.learn-count-card b,.learn-count-card span { display:block; }
.learn-count-card b { color:#ffe49a; font:800 2rem/1 var(--display); }
.learn-count-card span { margin-top:9px; color:#c9d8d3; font-size:.78rem; }
.learn-builder-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding:20px; border:1px solid rgba(86,177,151,.35); border-radius:18px; background:#071f27; }
.learn-builder-summary span,.learn-builder-summary b,.learn-builder-summary small { display:block; }
.learn-builder-summary span { color:#9fcfc3; font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; }
.learn-builder-summary b { margin:5px 0; color:#fff4d4; font-size:1.2rem; }
.learn-builder-summary small { color:#afc2bc; }
@media(max-width:950px){.learn-builder-hero{grid-template-columns:1fr}.learn-builder-seal{display:none}.learn-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learn-count-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.learn-scope-grid,.learn-count-grid{grid-template-columns:1fr}.learn-scope-card{min-height:170px}.learn-builder-summary{align-items:stretch;flex-direction:column}.learn-builder-summary .button{width:100%}.study-continuation::before{width:52px;height:52px;flex-basis:52px}}
.learn-launch {
  position: relative;
  min-height: 340px;
  margin: 1rem 0 1.4rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  align-items: stretch;
  padding: 0;
  border-color: rgba(229, 185, 95, 0.5);
  background: #071b1d;
}
.learn-launch-art {
  background:
    linear-gradient(90deg, rgba(5, 20, 22, 0.05), rgba(5, 20, 22, 0.76)),
    url("assets/study/learn-checkpoint-v1.webp") center/cover no-repeat;
  min-height: 340px;
}
.learn-launch > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.2rem;
  background: linear-gradient(
    90deg,
    rgba(5, 20, 22, 0.78),
    rgba(12, 34, 36, 0.96)
  );
}
.learn-launch h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  margin: 0.1rem 0 0.45rem;
  color: #fff8e8;
}
.learn-launch p {
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 44rem;
}
.learn-launch-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.8rem 0 1.2rem;
}
.learn-launch-rules span,
.learn-phase-badge {
  padding: 0.45rem 0.72rem;
  border: 1px solid rgba(229, 185, 95, 0.42);
  border-radius: 99px;
  background: rgba(229, 185, 95, 0.12);
  color: #ffe6a4;
  font-weight: 800;
  font-size: 0.82rem;
}
.quick-lane.buried-lane {
  border-style: dashed;
  background: linear-gradient(
    145deg,
    rgba(87, 69, 101, 0.26),
    rgba(13, 40, 38, 0.9)
  );
}
.study-card footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.bury-card {
  margin-right: auto !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 0 !important;
  border: 1px solid rgba(185, 170, 199, 0.5) !important;
  background: rgba(31, 27, 43, 0.55) !important;
  color: #ddcfe8 !important;
  font-size: 0.78rem !important;
  box-shadow: none !important;
}
.bury-card:hover {
  background: rgba(86, 56, 104, 0.72) !important;
  color: #fff !important;
}
.learn-checkpoint,
.learn-result {
  min-height: min(760px, calc(100vh - 8rem));
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  border: 1px solid rgba(229, 185, 95, 0.55);
  border-radius: 28px;
  overflow: hidden;
  background: #06191b;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}
.learn-checkpoint-art,
.learn-result-art {
  background: url("assets/study/learn-checkpoint-v1.webp") center/cover
    no-repeat;
  min-height: 460px;
}
.learn-checkpoint article,
.learn-result article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: linear-gradient(
    135deg,
    rgba(8, 36, 34, 0.98),
    rgba(26, 24, 42, 0.98)
  );
}
.learn-checkpoint h1,
.learn-result h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1;
  margin: 0.4rem 0 1rem;
  color: #fff7e6;
}
.learn-checkpoint p,
.learn-result p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #e8eee8;
}
.learn-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 1.2rem 0;
}
.learn-rule-grid div {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(240, 211, 139, 0.1);
  border: 1px solid rgba(240, 211, 139, 0.25);
}
.learn-rule-grid b {
  display: block;
  font-size: 1.6rem;
  color: #ffe29b;
}
.learn-rule-grid span {
  font-size: 0.78rem;
  color: #ccd8d1;
}
.learn-notice {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  border-left: 3px solid #d7a951;
  background: rgba(215, 169, 81, 0.1);
}
.learn-result.passed {
  border-color: rgba(91, 211, 164, 0.6);
}
.learn-result.needs-review {
  border-color: rgba(233, 151, 91, 0.65);
}
@media (max-width: 780px) {
  .learn-launch,
  .learn-checkpoint,
  .learn-result {
    grid-template-columns: 1fr;
  }
  .learn-launch-art {
    min-height: 210px;
  }
  .learn-launch > div:last-child {
    padding: 1.35rem;
  }
  .learn-checkpoint-art,
  .learn-result-art {
    min-height: 260px;
  }
  .learn-rule-grid {
    grid-template-columns: 1fr;
  }
  .study-continuation {
    align-items: flex-start;
    flex-direction: column;
  }
  .bank-progress {
    min-width: 70vw;
  }
  .learn-phase-badge {
    order: 4;
  }
}

/* Ranked Hall integration: remove the isolated cream/white treatment. */
.leaderboard-page .rank-filters,
.leaderboard-page .rank-list-heading {
  color: #f8f3e7;
  border-color: rgba(232, 191, 100, 0.38);
  background: linear-gradient(135deg, rgba(7, 47, 42, 0.97), rgba(19, 23, 39, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.06);
}
.leaderboard-page .rank-list-heading small,
.leaderboard-page .rank-filters > span {
  color: #c5d8d1;
}
.leaderboard-page .rank-filters button {
  color: #e7eee9;
  border-color: rgba(232, 191, 100, 0.28);
  background: rgba(4, 25, 27, 0.72);
}
.leaderboard-page .rank-filters button[aria-pressed="true"] {
  color: #15231d;
  border-color: #f0c96f;
  background: linear-gradient(145deg, #ffe9aa, #cf9b3d);
  box-shadow: 0 7px 20px rgba(213, 164, 65, 0.24);
}
.leaderboard-page .rank-card.podium {
  color: #f7f2e7;
  border-color: rgba(232, 191, 100, 0.42);
  background: linear-gradient(145deg, rgba(10, 57, 49, 0.98), rgba(20, 25, 42, 0.98));
}
.leaderboard-page .rank-card.podium h3,
.leaderboard-page .rank-card.podium strong {
  color: #fff0bb;
}
.leaderboard-page .rank-card.podium p,
.leaderboard-page .rank-card.podium small {
  color: #c9d9d3;
}

/* Cohesive Arcade hub: campaigns first, compact comparison, and readable rewards. */
.arcade-hub { gap: 30px; }
.arcade-command {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: 28px;
  padding: clamp(28px,4vw,54px); color:#f8f4ea;
  background: radial-gradient(circle at 12% 0,rgba(232,191,100,.16),transparent 32%),linear-gradient(125deg,#073b35,#0a2431 62%,#281c3d) !important;
  border-color:rgba(232,191,100,.5) !important;
}
.arcade-command:after { content:""; position:absolute; inset:auto -80px -120px auto; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(69,199,165,.2),transparent 68%); pointer-events:none; }
.arcade-command h1 { margin:.12em 0; color:#fff8e7; font-family:var(--display); font-size:clamp(2.6rem,5vw,5.4rem); font-weight:800; line-height:.98; text-wrap:balance; }
.arcade-command p { max-width:62ch; color:#d5e4df; font-size:18px; line-height:1.6; }
.arcade-command-stats { align-self:stretch; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; position:relative; z-index:1; }
.arcade-command-stats div { display:grid; place-content:center; min-height:130px; padding:16px; text-align:center; border:1px solid rgba(232,191,100,.3); border-radius:20px; background:rgba(5,25,32,.7); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.arcade-command-stats b,.arcade-command-stats span { display:block; }
.arcade-command-stats b { color:#ffe49a; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:800; line-height:1; }
.arcade-command-stats span { margin-top:8px; color:#c5d6d0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.arcade-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:4px 2px -12px; }
.arcade-section-head h2 { margin:5px 0 0; color:#fff8e7; font-family:var(--display); font-size:clamp(1.8rem,3vw,3rem); font-weight:800; line-height:1.05; }
.arcade-section-head p { max-width:54ch; margin:0; color:#bcd0c9; text-align:right; }
.arcade-campaign-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.arcade-campaign-tile { min-width:0; overflow:hidden; display:grid; grid-template-rows:240px 1fr; padding:0; color:#f8f4ea !important; background:linear-gradient(155deg,#073a34,#10243a 68%,#281b3c) !important; border-color:rgba(232,191,100,.42) !important; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.arcade-campaign-tile:hover { transform:translateY(-4px); border-color:#e8bf64 !important; box-shadow:0 24px 50px rgba(0,0,0,.34); }
.arcade-campaign-tile img { width:100%; height:240px; object-fit:cover; border-bottom:1px solid rgba(232,191,100,.28); }
.arcade-campaign-tile>div { min-width:0; display:grid; grid-template-rows:auto auto auto auto 1fr; align-content:start; padding:24px; }
.arcade-campaign-tile h2 { margin:8px 0 10px; color:#fff8e7; font-family:var(--display); font-size:clamp(1.9rem,2.5vw,2.8rem); font-weight:800; line-height:1; overflow-wrap:break-word; }
.arcade-campaign-tile p { min-height:5.2em; margin:0; color:#d2e1dc; line-height:1.55; }
.arcade-campaign-tile ul { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0 20px; padding:0; list-style:none; }
.arcade-campaign-tile li,.arcade-card-meta span { padding:6px 9px; border:1px solid rgba(232,191,100,.28); border-radius:99px; color:#f5d98e; background:rgba(232,191,100,.08); font-size:11px; font-weight:850; letter-spacing:.04em; }
.arcade-campaign-tile .button { align-self:end; width:100%; }
.arcade-library { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px; }
.arcade-library .arcade-card { grid-template-rows:180px auto auto 1fr auto auto; gap:12px; padding:16px; color:#f8f4ea; background:linear-gradient(145deg,rgba(7,49,44,.98),rgba(15,28,46,.98)) !important; border-color:rgba(232,191,100,.34) !important; transition:transform .2s ease,border-color .2s ease; }
.arcade-library .arcade-card:hover { transform:translateY(-3px); border-color:#e8bf64 !important; }
.arcade-library .arcade-card img { height:180px; object-fit:cover; background:#081d27; }
.arcade-library .arcade-card h3 { color:#fff8e7; font-size:25px; }
.arcade-library .arcade-card p { color:#c9d9d3; font-size:15px; line-height:1.5; }
.arcade-card-meta { display:flex; flex-wrap:wrap; gap:7px; }
.arcade-card-score { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.1); color:#bcd0c9; }
.arcade-card-score b { color:#ffe49a; font-size:20px; }
.arcade-feedback,.arcade-complete { color:#f8f4ea !important; background:linear-gradient(145deg,#082e2a,#10243a 68%,#271b38) !important; border-color:rgba(232,191,100,.5) !important; }
.arcade-feedback>h1,.arcade-complete>h1 { color:#fff8e7; text-wrap:balance; }
.arcade-feedback-lead,.arcade-complete>p { color:#cee0da; font-size:17px; line-height:1.55; }
.arcade-feedback .completion-stats>div,.arcade-complete .completion-stats>div { background:#f3e5bf; color:#10201c; }
@media(max-width:1180px){.arcade-command{grid-template-columns:1fr}.arcade-campaign-deck{grid-template-columns:1fr}.arcade-campaign-tile{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);grid-template-rows:1fr}.arcade-campaign-tile img{height:100%;min-height:300px}.arcade-library{grid-template-columns:repeat(2,minmax(0,1fr))!important}.arcade-campaign-tile p{min-height:0}}
@media(max-width:720px){.arcade-command{padding:22px}.arcade-command-stats{grid-template-columns:1fr}.arcade-command-stats div{min-height:84px}.arcade-section-head{display:grid}.arcade-section-head p{text-align:left}.arcade-campaign-tile{grid-template-columns:1fr;grid-template-rows:210px 1fr}.arcade-campaign-tile img{min-height:0;height:210px}.arcade-library{grid-template-columns:1fr!important}.arcade-library .arcade-card img{height:170px}}

/* App-wide orientation, accessibility, and long-page performance. */
.sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.topbar nav a[aria-current="page"] {
  position:relative; color:#fff8df; font-weight:800;
}
.topbar nav a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  border-radius:99px; background:linear-gradient(90deg,#e8bf64,#5ed3b1);
  box-shadow:0 0 12px rgba(232,191,100,.45);
}
.back-to-top {
  position:fixed; right:20px; bottom:20px; z-index:45;
  display:flex; align-items:center; gap:7px; min-width:74px; min-height:46px;
  padding:9px 13px; border:1px solid rgba(232,191,100,.58); border-radius:16px;
  color:#fff6dc; background:linear-gradient(145deg,rgba(7,67,57,.96),rgba(20,27,48,.98));
  box-shadow:0 14px 32px rgba(0,0,0,.38); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(16px); transition:.2s ease;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-2px); border-color:#f0c96f; }
.back-to-top span { color:#ffe49a; font-size:20px; line-height:1; }
.back-to-top b { font-size:13px; letter-spacing:.04em; }
.shop-card,.relic-card,.achievement-card,.companion-card,.companion-card-modern,.avatar-choice,.rank-card,.atlas-card,.arcade-card {
  content-visibility:auto;
  contain-intrinsic-size:auto 360px;
}
@media(max-width:900px){
  .topbar nav a[aria-current="page"] { padding-left:13px; }
  .topbar nav a[aria-current="page"]::after { inset:4px auto 4px 0; width:3px; height:auto; }
}
@media(max-width:600px){
  .back-to-top { right:12px; bottom:12px; min-width:48px; padding:8px 11px; }
  .back-to-top b { display:none; }
}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.achievement-hero{min-height:470px;position:relative;overflow:hidden;border:1px solid #ffffff24;border-radius:28px;display:grid;grid-template-columns:minmax(0,1.25fr) 340px;align-items:center;gap:48px;padding:56px;box-shadow:var(--shadow)}.achievement-hero-art{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,27,.97),rgba(7,11,30,.78) 45%,rgba(7,11,30,.18)),url('assets/achievements/hall-of-laurels.png') center/cover}.achievement-hero-copy,.next-laurel{position:relative;z-index:1}.achievement-hero-copy{max-width:620px}.achievement-hero h1{font-size:clamp(42px,5.4vw,68px);margin:10px 0 16px}.achievement-hero-copy>p{max-width:54ch;color:#d5daeb;font-size:17px}.achievement-summary{display:flex;gap:32px;margin-top:28px}.achievement-summary div{display:grid}.achievement-summary b{font:700 30px Georgia,serif;color:#f5d58e}.achievement-summary span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#bfc5d8}.next-laurel{background:linear-gradient(145deg,rgba(20,25,51,.94),rgba(10,14,34,.84));border:1px solid #e5be7052;border-radius:22px;padding:24px;text-align:center;backdrop-filter:blur(14px);box-shadow:0 24px 60px #0007}.next-laurel>img,.next-laurel .achievement-sigil{width:142px;height:142px;object-fit:cover;border-radius:50%;margin:10px auto 16px;display:grid}.next-laurel h2{margin-bottom:8px}.next-laurel p{color:#c8cede;font-size:14px}.achievement-library{margin-top:48px}.achievement-library>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.achievement-library h2{font-size:34px;margin:6px 0}.achievement-library>header>[data-result-count]{color:#bfc5d8;font-size:13px}.achievement-tabs{display:flex;gap:8px;overflow:auto;padding:4px 2px 12px}.achievement-tabs button{min-height:40px;white-space:nowrap;padding:8px 14px;border:1px solid #ffffff24;border-radius:999px;background:#ffffff0b;color:#cbd0e2;cursor:pointer}.achievement-tabs button[aria-pressed=true]{background:#8c73e9;color:#fff;border-color:#a895f2;box-shadow:0 8px 24px #5e4abe55}.achievement-tools{display:grid;grid-template-columns:1fr 220px;gap:12px;margin:8px 0 20px}.achievement-tools input,.achievement-tools select{width:100%;min-height:46px;border:1px solid #ffffff24;border-radius:12px;background:#10162e;color:#fff;padding:10px 14px}.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.achievement-card{appearance:none;width:100%;min-height:184px;display:grid;grid-template-columns:104px 1fr;gap:18px;text-align:left;padding:18px;border:1px solid #ffffff1d;border-radius:18px;background:linear-gradient(145deg,#efe3c7,#d9c6a2);color:var(--ink);cursor:pointer;box-shadow:0 14px 36px #02051224;transition:transform .2s,border-color .2s,box-shadow .2s}.achievement-card:hover{transform:translateY(-3px);box-shadow:0 20px 46px #02051245;border-color:#d7b665}.achievement-card.locked{opacity:1;background:linear-gradient(145deg,#d9c6a2,#c8b58f);color:#4c5260}.achievement-card.locked .achievement-art img{filter:grayscale(.82) brightness(.66)}.achievement-card.epic,.achievement-card.legendary{border-color:#b79a55}.achievement-art{align-self:start;width:104px;height:104px;border-radius:50%;overflow:hidden;background:#11172f;box-shadow:0 10px 24px #05081750,inset 0 0 0 2px #d7b665}.achievement-art img{width:100%;height:100%;object-fit:cover}.achievement-copy{display:flex;min-width:0;flex-direction:column}.achievement-state{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#716c7f}.achievement-copy strong{font:700 20px/1.2 Georgia,serif;margin:7px 0}.achievement-copy>span:not(.achievement-state):not(.achievement-progress){font-size:13px;line-height:1.45;color:#687085}.achievement-copy small{font-size:11px;color:#777d8c;margin-top:6px}.achievement-progress{height:5px;border-radius:8px;background:#cec8bd;overflow:hidden;margin-top:auto}.achievement-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7161d4,#d2a84d)}.achievement-sigil{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#56709a,#151a35 58%,#090d1f);border:2px solid #b7c3d7;color:#dce7f7;box-shadow:inset 0 0 24px #ffffff1c}.achievement-sigil span{font-size:44px}.achievement-sigil.rare{background:radial-gradient(circle at 35% 30%,#297c6f,#102b33 58%,#081720);border-color:#77d0b6}.achievement-sigil.epic{background:radial-gradient(circle at 35% 30%,#704ea3,#21133b 58%,#11091d);border-color:#b994e8}.achievement-sigil.legendary{background:radial-gradient(circle at 35% 30%,#a56f23,#3c260c 58%,#1c1005);border-color:#f0cb75}.achievement-empty{grid-column:1/-1;text-align:center;padding:64px;border:1px dashed #ffffff2b;border-radius:18px}.achievement-empty p{color:#bfc5d8}.achievement-dialog{position:relative;width:min(580px,100%);max-height:calc(100vh - 32px);overflow:auto;background:linear-gradient(160deg,#efe3c7,#d9c6a2);color:var(--ink);border:1px solid #ead399;border-radius:26px;padding:32px;text-align:center;box-shadow:0 35px 110px #000b}.achievement-close{position:absolute;right:16px;top:16px;color:var(--ink);font-size:28px;z-index:1}.achievement-detail-art{width:190px;height:190px;margin:0 auto 18px;border-radius:50%;overflow:hidden;box-shadow:0 18px 44px #24164048}.achievement-detail-art img{width:100%;height:100%;object-fit:cover}.achievement-dialog h2{font-size:34px;margin:8px 0}.achievement-dialog>p{color:var(--muted)}.achievement-detail-progress,.reward-preview{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.achievement-detail-progress>div:first-child{display:flex;justify-content:space-between;gap:16px;text-align:left}.achievement-detail-progress small{display:block;text-align:left;color:var(--muted);margin-top:8px}.achievement-detail-progress .achievement-progress{margin-top:12px}.reward-preview{display:flex;align-items:center;gap:14px;text-align:left}.reward-preview>div{display:grid}.reward-preview span,.reward-preview small{color:var(--muted);font-size:12px}.reward-gem{width:46px;height:46px!important;border-radius:50%;display:grid;place-items:center;background:#312963;color:#f3ca72!important;font-size:22px!important}.unlock-toast{position:fixed;z-index:210;right:24px;bottom:24px;width:min(390px,calc(100vw - 32px));display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:14px;padding:14px;border:1px solid #e7c46e66;border-radius:18px;background:linear-gradient(145deg,#151a38,#241b42);color:#fff;box-shadow:0 24px 70px #0009;animation:laurel-in .4s ease-out}.unlock-art{width:72px;height:72px;border-radius:50%;overflow:hidden}.unlock-art img,.unlock-art .achievement-sigil{width:100%;height:100%;object-fit:cover}.unlock-toast>span:nth-child(2){display:grid}.unlock-toast small{text-transform:uppercase;letter-spacing:.12em;color:#e2c477}.unlock-toast b{font:700 19px Georgia,serif}.unlock-toast em{font-style:normal;font-size:12px;color:#bfc5d8}@keyframes laurel-in{from{opacity:0;transform:translateY(24px) scale(.96)}}@media(max-width:1050px){.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.achievement-hero{grid-template-columns:1fr 280px;padding:40px}}@media(max-width:700px){.achievement-hero{min-height:650px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:24px;gap:20px}.achievement-hero-art{background:linear-gradient(180deg,rgba(5,9,27,.12),rgba(5,9,27,.95) 55%),url('assets/achievements/hall-of-laurels.png') 58% center/cover}.achievement-hero h1{font-size:40px}.achievement-summary{gap:20px}.next-laurel{display:grid;grid-template-columns:84px 1fr;column-gap:14px;text-align:left;align-items:center}.next-laurel .eyebrow{grid-column:1/-1}.next-laurel>img,.next-laurel .achievement-sigil{width:84px;height:84px;grid-row:2/5;margin:0}.next-laurel h2,.next-laurel p{margin-bottom:4px}.next-laurel .button{grid-column:2}.achievement-library{margin-top:32px}.achievement-tools{grid-template-columns:1fr}.achievement-grid{grid-template-columns:1fr}.achievement-card{grid-template-columns:86px 1fr;min-height:160px;padding:16px}.achievement-art{width:86px;height:86px}.achievement-dialog{padding:24px 18px}.achievement-detail-art{width:150px;height:150px}.unlock-toast{right:16px;bottom:16px}}
.achievement-tabs{flex-wrap:wrap;max-width:100%;overflow:hidden}.achievement-tabs button{white-space:normal}
.achievement-library,.achievement-library *{min-width:0;max-width:100%}.achievement-tools select,.achievement-tools input{min-width:0;max-width:100%}
.achievement-status{display:flex;flex-wrap:wrap;gap:8px}.achievement-status button{min-height:46px;flex:1 1 68px;border:1px solid #ffffff24;border-radius:12px;background:#10162e;color:#cbd0e2;padding:10px 12px}.achievement-status button[aria-pressed=true]{background:#8c73e9;color:#fff;border-color:#a895f2}
.achievement-grid,.achievement-card,.achievement-copy,.achievement-copy strong{overflow-wrap:anywhere;word-break:normal}.achievement-card{overflow:hidden}

/* Launch polish: trophy cards should read as intentional plaques, not faded placeholders. */
.achievement-card{position:relative;background:radial-gradient(circle at 12% 0,rgba(255,242,192,.4),transparent 34%),linear-gradient(145deg,#f1dfb8,#caa368 64%,#ad7f48);border-color:rgba(255,244,207,.64);color:#101915;box-shadow:0 20px 54px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.38)}
.achievement-card:before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -22px 38px rgba(71,39,12,.16)}
.achievement-card>*{position:relative;z-index:1}
.achievement-card:hover{border-color:#f1c970;box-shadow:0 24px 64px rgba(0,0,0,.38),0 0 34px rgba(240,201,111,.16),inset 0 1px 0 rgba(255,255,255,.42)}
.achievement-card.locked{background:radial-gradient(circle at 12% 0,rgba(255,238,181,.24),transparent 34%),linear-gradient(145deg,#d9c6a2,#bca06e 66%,#8f714b);color:#1a2420;border-color:rgba(255,239,180,.45)}
.achievement-card.locked .achievement-art img{filter:grayscale(.62) brightness(.72) contrast(1.08)}
.achievement-state{color:#684714;font-weight:900}
.achievement-card.locked .achievement-state{color:#4d3e2b}
.achievement-copy strong{color:#0b1512;text-shadow:0 1px 0 rgba(255,255,255,.34)}
.achievement-copy>span:not(.achievement-state):not(.achievement-progress),.achievement-copy small{color:#33413d;font-weight:650}
.achievement-progress{background:rgba(42,31,21,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.24)}
.unlock-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(232,191,100,.22),rgba(7,21,38,.9) 68%,rgba(4,16,13,.98))}
.unlock-art img,.unlock-art .achievement-sigil{display:block;margin:auto}
.unlock-art .achievement-sigil{display:grid;place-items:center}

/* Keep trophy compositions centered inside achievement dialogs and unlock toasts. */
.achievement-detail-art{display:grid;place-items:center;border-radius:34px;overflow:visible;background:radial-gradient(circle at 50% 30%,rgba(255,236,168,.5),rgba(44,31,82,.18) 62%,rgba(17,23,47,.08));box-shadow:0 18px 44px #24164048}
.achievement-detail-art>.trophy-frame.large{width:168px;height:168px;margin:auto}
.achievement-detail-art .trophy-frame img,.unlock-art .trophy-frame img{max-width:none}
.achievement-detail-art .trophy-frame .trophy-cup,.unlock-art .trophy-frame .trophy-cup{position:absolute;inset:0;margin:auto;width:88%!important;height:88%!important;object-fit:contain!important;border-radius:0!important}
.achievement-detail-art .trophy-frame .trophy-badge,.unlock-art .trophy-frame .trophy-badge{position:absolute;right:11px;bottom:11px;width:29%!important;height:29%!important;object-fit:contain!important;border-radius:50%!important}
.unlock-art{display:grid;place-items:center;overflow:visible}
.unlock-art .trophy-frame.large{width:72px;height:72px;border-radius:18px}
.unlock-art .trophy-frame.large .trophy-badge{right:5px;bottom:5px}
@media(max-width:700px){.achievement-detail-art>.trophy-frame.large{width:136px;height:136px}}

.stable-hero{min-height:510px;position:relative;overflow:hidden;border:1px solid #ffffff24;border-radius:28px;display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:40px;padding:56px;box-shadow:var(--shadow)}.stable-environment{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,27,.97),rgba(5,10,27,.76) 46%,rgba(5,10,27,.12)),url('assets/environments/moonlit-companion-sanctuary.png') center/cover}.stable-copy,.active-companion{position:relative;z-index:1}.stable-copy{max-width:620px}.stable-copy h1{font-size:clamp(42px,5vw,66px);margin:10px 0 16px}.stable-copy>p{color:#d5daeb;max-width:52ch;font-size:17px}.stable-stats{display:flex;gap:32px;margin-top:28px}.stable-stats div{display:grid}.stable-stats b{font:700 30px Georgia,serif;color:#f4d28a}.stable-stats span{text-transform:uppercase;letter-spacing:.1em;color:#bdc6d9;font-size:11px}.active-companion{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border:1px solid #96d9c04a;border-radius:24px;background:linear-gradient(145deg,rgba(12,34,40,.93),rgba(15,17,42,.9));backdrop-filter:blur(14px);box-shadow:0 24px 60px #0008}.active-companion img{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 18px 26px #0008)}.active-companion h2{font-size:30px;margin:6px 0}.active-companion p{font-size:13px;color:#cbd6dc}.active-companion small{color:#b7c8cb;margin:8px 0 16px}.bond-meter{width:100%;height:8px;border-radius:99px;background:#08131d;overflow:hidden;border:1px solid #ffffff18}.bond-meter i{display:block;height:100%;background:linear-gradient(90deg,#43ad8e,#b9df81,#edc875);box-shadow:0 0 14px #65d4ad}.bond-journey{margin:24px 0;padding:28px;display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center}.bond-journey header p{color:var(--muted);font-size:14px}.bond-journey ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:0}.bond-journey li{display:grid;justify-items:center;text-align:center;gap:5px;padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.bond-journey li b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e5decd;color:#6e6658}.bond-journey li span{font-weight:800;font-size:11px}.bond-journey li small{font-size:9px;color:var(--muted);line-height:1.3}.bond-journey li.complete{border-color:#63a991;background:#d7ecdf}.bond-journey li.complete b{background:#23836a;color:#fff}.sanctuary{margin-top:48px}.sanctuary>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.sanctuary h2{font-size:34px;margin:6px 0}.sanctuary>header>span{font-size:13px;color:#c2c9d8}.companion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.companion-card-modern{position:relative;min-height:260px;display:flex;flex-direction:column;padding:18px;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(155deg,#efe3c7,#d9c6a2);color:var(--ink);text-decoration:none;box-shadow:0 14px 36px #02051233;transition:.2s}.companion-card-modern:hover{transform:translateY(-3px);border-color:#d2b264;box-shadow:0 20px 48px #02051255}.companion-card-modern.active{outline:2px solid #61b99d;outline-offset:2px}.companion-card-modern.locked{filter:saturate(.55);background:linear-gradient(155deg,#d8d5ce,#c5c0b6)}.companion-portrait{height:150px;display:grid;place-items:center}.companion-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 15px #18152442)}.companion-card-modern.locked img{filter:grayscale(.8) opacity(.62)}.companion-rarity{text-transform:uppercase;letter-spacing:.12em;color:#776b85;font-size:9px}.companion-card-modern strong{font:700 20px Georgia,serif;margin:5px 0}.companion-card-modern small{color:var(--muted);font-size:12px}.companion-detail{position:relative;min-height:560px;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:56px;background:radial-gradient(circle at 24% 46%,#285447,#121a35 48%,#090d1f 82%);border:1px solid #ffffff24;box-shadow:var(--shadow)}.companion-detail.mythic{background:radial-gradient(circle at 24% 46%,#4e397a,#171735 48%,#090d1f 82%)}.companion-back{position:absolute;left:24px;top:24px;z-index:2}.companion-stage{position:relative;display:grid;place-items:center}.companion-stage img{position:relative;z-index:1;width:min(460px,95%);height:440px;object-fit:contain;filter:drop-shadow(0 28px 35px #0009)}.companion-aura{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#a6f4cf55,transparent 66%);border:1px solid #a5e6cc33;box-shadow:0 0 80px #4cc49a2b}.companion-profile{align-self:center}.companion-profile h1{font-size:clamp(44px,5vw,68px);margin:10px 0}.companion-ability{font-size:17px;color:#d6dbe9;max-width:48ch}.companion-ability b{color:#f0d083}.bond-detail,.companion-perk,.companion-locked{margin:20px 0;padding:18px;border:1px solid #ffffff24;border-radius:14px;background:#ffffff0b}.bond-detail>div:first-child{display:flex;justify-content:space-between;margin-bottom:10px}.bond-detail small{display:block;color:#bdc6d9;margin-top:8px}.companion-perk,.companion-locked{display:grid}.companion-perk span,.companion-locked span{font-size:12px;color:#bdc6d9}.companion-perk b,.companion-locked b{color:#fff}.companion-milestones{margin-top:24px;padding:28px}.companion-milestones>div{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.companion-milestones article{display:grid;text-align:center;padding:14px 8px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}.companion-milestones article b{font-size:20px;color:#6e6658}.companion-milestones article span{font-weight:800;font-size:12px}.companion-milestones article small{color:var(--muted);font-size:10px}.companion-milestones article.complete{background:#d7ecdf;border-color:#67aa94}@media(max-width:1000px){.stable-hero{grid-template-columns:1fr 320px;padding:40px}.bond-journey{grid-template-columns:1fr}.companion-grid{grid-template-columns:repeat(3,1fr)}.companion-milestones>div{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.stable-hero{min-height:720px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:24px}.stable-environment{background:linear-gradient(180deg,rgba(5,10,27,.08),rgba(5,10,27,.96) 48%),url('assets/environments/moonlit-companion-sanctuary.png') 57% center/cover}.stable-copy h1{font-size:40px}.stable-stats{gap:18px}.active-companion{display:grid;grid-template-columns:105px 1fr;text-align:left;column-gap:14px}.active-companion img{width:105px;height:105px;grid-row:1/7}.active-companion .bond-meter,.active-companion small,.active-companion .button{grid-column:2}.active-companion .button{width:auto}.bond-journey{padding:20px}.bond-journey ol{display:flex;overflow:auto}.bond-journey li{min-width:110px}.sanctuary{margin-top:32px}.companion-grid{grid-template-columns:repeat(2,1fr);gap:10px}.companion-card-modern{min-height:220px;padding:12px}.companion-portrait{height:120px}.companion-card-modern strong{font-size:17px}.companion-detail{display:flex;flex-direction:column;padding:72px 20px 28px;gap:12px}.companion-stage img{height:280px}.companion-profile h1{font-size:42px}.companion-milestones{padding:20px}.companion-milestones>div{display:flex;overflow:auto}.companion-milestones article{min-width:130px}}
.companion-card-modern{isolation:isolate;overflow:hidden;justify-content:flex-end;min-height:282px;background:linear-gradient(160deg,#0d142c,#191431 58%,#251b38);color:#fff;border-color:#ffffff2b}.companion-card-modern:after{content:"";position:absolute;inset:auto 0 0;height:48%;z-index:0;background:linear-gradient(transparent,rgba(5,8,22,.86) 42%,rgba(5,8,22,.96))}.companion-card-modern.locked{background:linear-gradient(160deg,#242838,#171b2a 62%,#111521);filter:none}.companion-card-modern.active{border-color:#6be0bd;box-shadow:0 18px 46px #03071777,0 0 0 2px #6be0bd}.companion-portrait{position:absolute;inset:8px 8px 44px;height:auto;z-index:0}.companion-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 22px #0009)}.companion-card-modern.locked img{filter:grayscale(.86) opacity(.5) drop-shadow(0 18px 22px #0009)}.companion-rarity,.companion-card-modern strong,.companion-card-modern small{position:relative;z-index:1;text-shadow:0 2px 9px #020512}.companion-rarity{color:#d9c589}.companion-card-modern strong{color:#fff}.companion-card-modern small{color:#d6dbea}@media(max-width:700px){.companion-card-modern{min-height:236px}.companion-portrait{inset:8px 8px 42px}}
/* Card-level guardrails complement the asset pipeline's transparent safe frame. */
.rank-reward-card > div {
  grid-template-columns: 88px minmax(0, 1fr);
}

.rank-reward-card img {
  width: 88px;
  height: 88px;
  padding: 8px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 560px) {
  .rank-reward-card > div {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .rank-reward-card img {
    width: 78px;
    height: 78px;
    padding: 7px;
  }
}

/* Collection expansion: crisp catalogs, achievement titles, and code-rendered Arcane Auras. */
.shop-card,.relic-card,.achievement-card,.companion-card,.companion-card-modern,.avatar-choice,.rank-card,.atlas-card,.arcade-card {
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}
.avatar-market-card>img,.avatar-choice img,.rank-hero>img,.rank-card img {
  image-rendering:auto;
  object-fit:contain;
  object-position:center;
}
.scholar-title {
  display:inline-flex;
  width:fit-content;
  margin:.25rem 0 .55rem;
  padding:.28rem .65rem;
  border:1px solid color-mix(in srgb,var(--gold,#e9c56f) 65%,transparent);
  border-radius:999px;
  color:#ffe7a0;
  background:rgba(7,29,32,.72);
  font-weight:850;
  letter-spacing:.035em;
  box-shadow:0 0 18px rgba(233,197,111,.16);
}
.cosmetic-loadout { margin-top:1rem; padding:clamp(1rem,2.5vw,1.5rem); }
.cosmetic-loadout>header,.aura-market-intro,.cosmetic-loadout-grid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.cosmetic-loadout-grid { align-items:stretch; margin-top:1rem; }
.cosmetic-loadout-grid label {
  flex:1 1 280px;
  display:grid;
  gap:.45rem;
  padding:1rem;
  border:1px solid rgba(233,197,111,.24);
  border-radius:18px;
  background:rgba(3,24,28,.58);
}
.cosmetic-loadout-grid label>span { font-weight:900; color:#ffe6a0; }
.cosmetic-loadout-grid select { width:100%; }
.equipped-aura { display:flex; align-items:center; gap:.65rem; }
.equipped-aura .aura-orb { flex:0 0 42px; width:42px; margin:0; }
.aura-market-section { display:grid; gap:1rem; }
.aura-market-intro {
  min-height:280px;
  overflow:hidden;
  position:relative;
  padding:clamp(1.1rem,3vw,2rem);
  isolation:isolate;
}
.aura-market-intro>div { max-width:760px; position:relative; z-index:2; text-shadow:0 2px 16px rgba(0,0,0,.9); }
.aura-market-intro>div:not(.aura-market-art) { color:#f7fbf8; }
.aura-market-intro h2 { color:#fff3c5; }
.aura-market-intro p { color:#e5f0ec; }
.aura-market-intro>aside {
  min-width:150px;
  position:relative;
  z-index:2;
  display:grid;
  gap:.25rem;
  padding:1rem;
  border:1px solid rgba(126,244,222,.35);
  border-radius:18px;
  background:rgba(3,19,28,.84);
  color:#f3fbf7;
  text-align:center;
}
.aura-market-intro>aside b { font-size:1.65rem; color:#ffe7a0; }
.aura-market-intro>aside span,.aura-market-intro>aside small { color:#d9ece6; }
.aura-market-art {
  position:absolute!important;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  z-index:-1!important;
  background:linear-gradient(90deg,rgba(2,20,25,.96),rgba(2,20,25,.76) 46%,rgba(2,20,25,.15)),url("assets/market/arcane-aura-loom.webp") center 48%/cover no-repeat;
}
.aura-shop { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.aura-market-card { --aura-primary:#75f7dc; --aura-secondary:#7357ff; position:relative; overflow:hidden; }
.aura-market-card.equipped {
  border-color:var(--aura-primary);
  box-shadow:0 0 0 1px var(--aura-secondary),0 0 30px color-mix(in srgb,var(--aura-primary) 34%,transparent);
}
.aura-orb {
  position:relative;
  display:block;
  width:min(150px,70%);
  aspect-ratio:1;
  margin:.6rem auto 1rem;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 2%,transparent 4%),radial-gradient(circle at 62% 66%,#fff 0 1.5%,transparent 3.5%),radial-gradient(circle,color-mix(in srgb,var(--aura-primary) 72%,white) 0 8%,transparent 28%),conic-gradient(from 20deg,var(--aura-primary),transparent 22%,var(--aura-secondary),transparent 58%,var(--aura-primary));
  box-shadow:inset 0 0 24px rgba(255,255,255,.32),0 0 22px color-mix(in srgb,var(--aura-primary) 58%,transparent),0 0 46px color-mix(in srgb,var(--aura-secondary) 38%,transparent);
}
.aura-orb:before,.aura-orb:after {
  content:"";
  position:absolute;
  inset:-10%;
  border:2px solid color-mix(in srgb,var(--aura-primary) 65%,transparent);
  border-radius:50%;
  transform:rotate(28deg) scaleY(.44);
}
.aura-orb:after { inset:-18%; border-color:color-mix(in srgb,var(--aura-secondary) 58%,transparent); transform:rotate(-34deg) scaleY(.58); }
html[data-aura]:not([data-aura=""]) .profile-card,
html[data-aura]:not([data-aura=""]) .rank-hero,
html[data-aura]:not([data-aura=""]) .study-card,
html[data-aura]:not([data-aura=""]) .active-companion {
  border-color:color-mix(in srgb,var(--equipped-aura-primary) 70%,#d9b75d)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--equipped-aura-secondary) 48%,transparent),0 0 30px color-mix(in srgb,var(--equipped-aura-primary) 24%,transparent),var(--panel-shadow,0 18px 48px rgba(0,0,0,.2));
}
html[data-aura]:not([data-aura=""]) .profile-card:after,
html[data-aura]:not([data-aura=""]) .rank-hero:after {
  content:var(--equipped-aura-name);
  position:absolute;
  right:1rem;
  top:.75rem;
  z-index:3;
  padding:.24rem .55rem;
  border:1px solid color-mix(in srgb,var(--equipped-aura-primary) 65%,transparent);
  border-radius:999px;
  color:color-mix(in srgb,var(--equipped-aura-primary) 72%,white);
  background:rgba(2,20,26,.8);
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.04em;
  pointer-events:none;
}
@media(max-width:820px) {
  .efficient-market .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .aura-market-intro,.cosmetic-loadout>header,.cosmetic-loadout-grid { align-items:stretch; flex-direction:column; }
  .aura-market-intro { min-height:360px; }
  .aura-market-art { background:linear-gradient(180deg,rgba(2,20,25,.95),rgba(2,20,25,.68) 70%,rgba(2,20,25,.32)),url("assets/market/arcane-aura-loom.webp") center/cover no-repeat; }
  html[data-aura]:not([data-aura=""]) .profile-card:after,
  html[data-aura]:not([data-aura=""]) .rank-hero:after { position:static; display:inline-flex; margin:.5rem; }
}
@media(prefers-reduced-motion:no-preference) {
  .aura-market-card:hover .aura-orb { animation:aura-breathe 2.8s ease-in-out infinite alternate; }
}
@keyframes aura-breathe { to { transform:translateY(-3px) scale(1.035); filter:saturate(1.12); } }

/* Bounded market + compact collection hub */
.efficient-market {
  display:grid;
  gap:1rem;
}
.efficient-market .catalog-toolbar {
  margin:0;
}
.efficient-market .market-shelf {
  min-width:0;
}
.efficient-market .section-head p {
  max-width:64ch;
  margin:.25rem 0 0;
  color:#64716c;
}
.efficient-market .shop-grid {
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  align-items:stretch;
}
.efficient-market .shop-card {
  content-visibility:auto;
  contain-intrinsic-size:430px;
}
.market-art-stage {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid rgba(238,207,125,.42);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 42%,rgba(95,225,192,.2),transparent 34%),
    radial-gradient(circle at 50% 50%,#173b3d 0 28%,#0b252d 58%,#11152f 100%);
  box-shadow:inset 0 0 0 5px rgba(5,22,31,.42),inset 0 0 34px rgba(0,0,0,.46);
  isolation:isolate;
}
.market-art-stage:after {
  content:"";
  position:absolute;
  inset:8%;
  z-index:-1;
  border:1px solid rgba(238,207,125,.24);
  border-radius:50%;
  box-shadow:0 0 24px rgba(83,218,186,.16);
}
.market-art-stage img {
  display:block;
  width:92%;
  height:92%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.48));
}
.market-kind-avatar .market-art-stage img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
}
.market-kind-aura .market-art-stage .aura-orb {
  width:55%;
  margin:0;
}
.avatar-choice img,
.profile-card>img,
.rank-hero>img,
.rank-card img,
.collection-loadout-avatar {
  image-rendering:auto;
  object-fit:contain;
  object-position:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(95,225,192,.18),transparent 38%),
    linear-gradient(145deg,#102d31,#151a36);
}
.efficient-market .shop-card.equipped {
  border-color:#21a889;
  box-shadow:0 0 0 2px rgba(33,168,137,.18),0 18px 46px rgba(4,33,35,.14);
}
.market-card-actions {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:.55rem;
  margin-top:auto;
}
.market-card-actions .button {
  min-width:0;
}
.market-search {
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto auto;
  align-items:center;
  gap:.65rem;
  padding:.8rem 1rem;
}
.market-search label {
  font-weight:850;
  color:#17362e;
}
.market-search input {
  width:100%;
  min-height:44px;
}
.market-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1.2rem 0 .25rem;
}
.market-pagination span {
  min-width:100px;
  color:#dfece8;
  font-weight:800;
  text-align:center;
}
.market-empty {
  padding:2rem;
  text-align:center;
}
.collection-hub {
  display:grid;
  gap:1rem;
}
.collection-loadout-hero {
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center;
  gap:1.35rem;
  min-height:190px;
  padding:1.4rem;
  overflow:hidden;
  color:#edf8f4;
  background:linear-gradient(120deg,rgba(3,45,41,.97),rgba(13,28,54,.97) 68%,rgba(42,20,66,.96));
}
.collection-loadout-avatar {
  width:150px;
  height:150px;
  object-fit:cover;
  border:2px solid rgba(238,207,125,.74);
  border-radius:28px;
  box-shadow:0 18px 40px rgba(0,0,0,.36);
}
.collection-loadout-copy {
  min-width:0;
}
.collection-loadout-copy h2 {
  margin:.1rem 0;
  color:#fff3ca;
  font-size:clamp(2rem,4vw,3.2rem);
}
.collection-loadout-copy>p:not(.scholar-title) {
  margin:.35rem 0;
  color:#d8e8e3;
}
.collection-active-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.7rem;
}
.collection-active-tags span {
  padding:.32rem .62rem;
  border:1px solid rgba(235,205,128,.28);
  border-radius:999px;
  background:rgba(2,19,25,.46);
  color:#f5e4b3;
  font-size:.78rem;
  font-weight:800;
}
.collection-hero-actions {
  display:grid;
  gap:.55rem;
  min-width:150px;
}
.collection-aura-orb {
  position:absolute;
  right:1rem;
  bottom:-50px;
  width:150px;
  opacity:.2;
  pointer-events:none;
}
.collection-loadout-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.65rem;
  padding:.75rem;
}
.collection-loadout-strip>a {
  min-width:0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:.7rem;
  padding:.7rem;
  border:1px solid rgba(11,86,72,.15);
  border-radius:16px;
  background:rgba(255,251,235,.52);
  color:#15342d;
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.collection-loadout-strip>a:hover {
  transform:translateY(-2px);
  border-color:#17836d;
}
.collection-loadout-strip>a>img,
.collection-relic-stack,
.collection-mini-aura {
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:13px;
  background:#092d30;
}
.collection-loadout-strip span:not(.collection-relic-stack):not(.collection-mini-aura) {
  min-width:0;
  display:grid;
}
.collection-loadout-strip small {
  color:#6d7772;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.collection-loadout-strip b {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.collection-loadout-strip em,
.collection-category-grid em {
  color:#08745f;
  font-size:.75rem;
  font-style:normal;
  font-weight:900;
}
.collection-relic-stack {
  position:relative;
  display:block;
  overflow:hidden;
}
.collection-relic-stack img {
  position:absolute;
  width:42px;
  height:42px;
  top:6px;
  left:6px;
  object-fit:contain;
}
.collection-relic-stack img:nth-child(2) { left:12px; }
.collection-relic-stack img:nth-child(3) { left:18px; }
.collection-mini-aura {
  width:54px;
  margin:0;
}
.collection-catalog-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem .25rem 0;
}
.collection-catalog-head h2,
.collection-catalog-head p {
  margin:.15rem 0;
}
.collection-catalog-head p {
  max-width:520px;
  color:#c7d4d0;
}
.collection-category-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.7rem;
}
.collection-category-grid>a {
  min-width:0;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:.75rem;
  padding:1rem;
  border:1px solid rgba(233,197,111,.24);
  border-radius:18px;
  background:linear-gradient(145deg,#102c30,#17213a);
  color:#eef7f3;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.collection-category-grid>a:hover {
  border-color:#78ddbd;
}
.collection-category-grid div {
  min-width:0;
  display:grid;
}
.collection-category-grid small {
  overflow:hidden;
  color:#b9ccc6;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.collection-category-grid em {
  grid-column:2;
  color:#f1d78f;
}
.collection-category-mark {
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(246,216,139,.52);
  border-radius:14px;
  background:radial-gradient(circle at 35% 28%,#6fe0c2,#0a6559 58%,#082b32);
  color:#fff0bd;
  font:800 1.15rem Georgia,serif;
}
html[data-aura]:not([data-aura=""]) .collection-loadout-hero,
html[data-aura]:not([data-aura=""]) .collection-loadout-avatar,
html[data-aura]:not([data-aura=""]) .brand-mark {
  border-color:color-mix(in srgb,var(--equipped-aura-primary) 72%,#d9b75d);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--equipped-aura-secondary) 45%,transparent),0 0 28px color-mix(in srgb,var(--equipped-aura-primary) 22%,transparent);
}
@media(prefers-reduced-motion:no-preference) {
  .collection-aura-orb,
  .equipped-aura .aura-orb { animation:aura-breathe 3.6s ease-in-out infinite alternate; }
}
@media(max-width:1050px) {
  .collection-loadout-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .market-search { grid-template-columns:1fr 1fr; }
  .market-search label,
  .market-search input { grid-column:1/-1; }
  .collection-loadout-hero { grid-template-columns:92px minmax(0,1fr); padding:1rem; }
  .collection-loadout-avatar { width:92px; height:92px; border-radius:20px; }
  .collection-loadout-copy h2 { font-size:2rem; }
  .collection-hero-actions { grid-column:1/-1; grid-template-columns:1fr 1fr; }
  .collection-loadout-strip { grid-template-columns:1fr; }
  .collection-catalog-head { display:block; }
  .collection-category-grid { grid-template-columns:1fr; }
  .collection-aura-orb { width:110px; right:-16px; bottom:-42px; }
}

/* First-entry welcome film and opt-in site theme. */
body.welcome-film-open {
  overflow: hidden;
}
.welcome-film {
  position: fixed;
  inset: 0;
  z-index: 100000;
  min-width: 0;
  overflow: hidden;
  background: #020b0d;
  opacity: 1;
  isolation: isolate;
  transition: opacity 680ms cubic-bezier(.22,.78,.25,1);
}
.welcome-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 10, 12, .34) 0%, transparent 24%, transparent 65%, rgba(1, 10, 12, .62) 100%),
    radial-gradient(circle at 50% 45%, transparent 45%, rgba(1, 8, 10, .28) 100%);
}
.welcome-film-stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(20, 75, 69, .22), transparent 58%),
    #020b0d;
}
.welcome-film video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #020b0d;
  box-shadow: none;
  animation: welcome-cinematic-reveal 1100ms cubic-bezier(.18,.75,.22,1) both;
  transition: transform 680ms cubic-bezier(.22,.78,.25,1);
}
.welcome-film.is-closing {
  opacity: 0;
  pointer-events: none;
}
.welcome-film.is-closing video {
  transform: scale(.995);
}
@keyframes welcome-cinematic-reveal {
  from { opacity: 0; transform: scale(1.01); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-film,
  .welcome-film video {
    animation: none;
    transition: none;
  }
}
.welcome-film-actions {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: max(18px, env(safe-area-inset-left));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.welcome-film-button {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(240, 201, 111, 0.58);
  border-radius: 999px;
  background: rgba(4, 25, 24, 0.94);
  color: #fff9e8;
  font-weight: 850;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  pointer-events: auto;
}
.welcome-film-button:hover,
.welcome-film-button:focus-visible {
  background: #f0c96f;
  color: #12231d;
}
.welcome-film-skip {
  min-width: 92px;
}
@media (max-width: 600px) {
  .welcome-film-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
  .welcome-film-button {
    min-height: 44px;
    padding: 9px 15px;
  }
}

/* Moonlit collectible cohesion release. */
.efficient-market {
  width:100%;
  max-width:none;
  gap:1.2rem;
}
.efficient-market .market-hero {
  position:relative;
  isolation:isolate;
  min-height:360px;
  display:grid;
  grid-template-columns:minmax(280px,760px) auto;
  grid-template-areas:"copy action" "economy economy";
  align-content:end;
  align-items:end;
  gap:1rem 1.5rem;
  overflow:hidden;
  padding:clamp(1.3rem,4vw,3rem);
  border-color:rgba(238,207,125,.42);
  color:#f4fbf7;
  background:
    linear-gradient(90deg,rgba(2,15,24,.97) 0 32%,rgba(3,18,28,.78) 52%,rgba(5,12,25,.26) 100%),
    linear-gradient(0deg,rgba(2,12,19,.78),transparent 48%),
    url("assets/navigation/destination-shop.webp") center/cover no-repeat;
  box-shadow:0 28px 72px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04);
}
.efficient-market .market-hero:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 69% 42%,rgba(131,81,236,.18),transparent 31%);
}
.efficient-market .market-hero>div:first-child {
  grid-area:copy;
  max-width:66ch;
  text-shadow:0 2px 18px rgba(0,0,0,.84);
}
.efficient-market .market-hero h2 {
  margin:.1rem 0 .45rem;
  color:#ffe6a3;
  font-size:clamp(2.2rem,5vw,4.3rem);
}
.efficient-market .market-hero p {
  color:#deebe7;
  font-size:1rem;
}
.efficient-market .market-hero>.economy-strip {
  grid-area:economy;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
}
.efficient-market .market-hero>.economy-strip span {
  padding:.45rem .72rem;
  border:1px solid rgba(238,207,125,.3);
  border-radius:999px;
  background:rgba(2,18,27,.82);
  color:#f4dfaa;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.efficient-market .market-hero>a {
  grid-area:action;
  align-self:end;
}
.efficient-market .catalog-toolbar,
.efficient-market .market-search {
  border-color:rgba(238,207,125,.34);
  color:#edf7f3;
  background:linear-gradient(145deg,rgba(6,37,39,.98),rgba(17,22,47,.98));
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.efficient-market .catalog-toolbar>div:first-child b,
.efficient-market .market-search label {
  color:#ffe4a0;
}
.efficient-market .catalog-toolbar>div:nth-child(2) {
  display:grid;
  grid-template-columns:repeat(6,minmax(92px,1fr));
  gap:.45rem;
}
.efficient-market .catalog-toolbar button {
  min-height:58px;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:.4rem;
  padding:.55rem .65rem;
  border:1px solid rgba(238,207,125,.22);
  border-radius:13px;
  background:rgba(3,21,29,.78);
  color:#e8f4ef;
  font-weight:850;
}
.efficient-market .catalog-toolbar button:before {
  content:"✦";
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(238,207,125,.52);
  border-radius:9px;
  background:radial-gradient(circle at 35% 25%,#61d7b9,#08715f 58%,#082c36);
  color:#fff0b7;
  font:900 14px Georgia,serif;
  box-shadow:inset 0 0 0 2px rgba(2,22,29,.32);
}
.efficient-market .catalog-toolbar button[data-market-filter="affordable"]:before { content:"¢"; }
.efficient-market .catalog-toolbar button[data-market-filter="avatars"]:before { content:"A"; }
.efficient-market .catalog-toolbar button[data-market-filter="companions"]:before { content:"C"; }
.efficient-market .catalog-toolbar button[data-market-filter="relics"]:before { content:"R"; }
.efficient-market .catalog-toolbar button[data-market-filter="auras"]:before { content:"✧"; }
.efficient-market .catalog-toolbar button[aria-pressed="true"] {
  border-color:#75ddbf;
  color:#fff3c5;
  background:linear-gradient(145deg,#0b725f,#1d2851);
  box-shadow:0 0 0 2px rgba(117,221,191,.13);
}
.efficient-market .catalog-toolbar>span,
.efficient-market .section-head>span {
  color:#bcd1ca;
}
.efficient-market .market-search input {
  border-color:rgba(238,207,125,.34);
  background:#061f28;
  color:#f4fbf8;
  color-scheme:dark;
}
.efficient-market .market-search input::placeholder {
  color:#8ca9a2;
}
.efficient-market .section-head p {
  color:#b9ccc6;
}
.efficient-market .shop-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
}
.efficient-market .shop-card {
  min-width:0;
  padding:1rem;
  border-color:rgba(238,207,125,.26);
  color:#ecf6f2;
  background:linear-gradient(155deg,rgba(8,40,39,.98),rgba(15,22,45,.98) 65%,rgba(35,19,50,.97));
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
.efficient-market .shop-card h3 {
  color:#fff0bd;
}
.efficient-market .shop-card p,
.efficient-market .shop-card small,
.efficient-market .shop-card dd {
  color:#bfd1cc;
}
.efficient-market .shop-card p b,
.efficient-market .shop-card dt,
.efficient-market .item-benefit b {
  color:#78ddbd;
}
.efficient-market .shop-card.owned {
  border-color:rgba(117,221,191,.5);
}
.market-art-stage {
  aspect-ratio:4/3;
  min-height:190px;
  border-color:rgba(238,207,125,.48);
  border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 86%,rgba(87,230,191,.25),transparent 29%),
    radial-gradient(circle at 50% 38%,rgba(95,225,192,.19),transparent 34%),
    linear-gradient(155deg,#0b3133,#10182f 62%,#241735);
  box-shadow:inset 0 0 0 5px rgba(3,20,29,.52),inset 0 0 42px rgba(0,0,0,.5);
}
.market-art-stage:before {
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:8%;
  height:14%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(238,207,125,.25),transparent 67%);
  pointer-events:none;
}
.market-art-stage:after {
  inset:8px;
  z-index:2;
  border-radius:13px;
  border:1px solid rgba(238,207,125,.19);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%,rgba(2,12,20,.23));
  box-shadow:inset 0 0 30px rgba(0,0,0,.28);
  pointer-events:none;
}
.market-art-stage img,
.market-kind-avatar .market-art-stage img {
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:100%;
  height:100%;
  padding:7%;
  border-radius:18px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.48));
}
.market-kind-relic .market-art-stage img {
  padding:10%;
}
.market-kind-aura .market-art-stage .aura-orb {
  z-index:1;
}
.cosmetic-loadout,
.save-safety {
  border-color:rgba(238,207,125,.32);
  color:#edf8f4;
  background:linear-gradient(145deg,rgba(7,43,39,.98),rgba(18,25,50,.98) 72%,rgba(41,23,57,.96));
  box-shadow:0 20px 50px rgba(0,0,0,.24);
}
.cosmetic-loadout h2,
.save-safety h2 {
  color:#fff0bd;
}
.cosmetic-loadout-grid label {
  border-color:rgba(238,207,125,.3);
  background:rgba(2,20,29,.72);
}
.cosmetic-loadout-grid select {
  min-height:44px;
  border:1px solid rgba(117,221,191,.38);
  background:#06252b;
  color:#f4fbf8;
  color-scheme:dark;
}
.cosmetic-loadout-grid small,
.save-safety p,
.save-safety-actions small {
  color:#b9ccc7;
}
.collection-loadout-strip {
  border-color:rgba(238,207,125,.28);
  background:linear-gradient(145deg,rgba(7,38,37,.98),rgba(17,24,48,.98));
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.collection-loadout-strip>a {
  border-color:rgba(238,207,125,.22);
  background:linear-gradient(145deg,rgba(10,49,46,.9),rgba(20,28,54,.9));
  color:#edf7f3;
}
.collection-loadout-strip>a:hover {
  border-color:#75ddbf;
  background:linear-gradient(145deg,rgba(12,78,65,.92),rgba(31,37,74,.92));
}
.collection-loadout-strip>a>img,
.collection-relic-stack,
.collection-mini-aura {
  box-sizing:border-box;
  padding:4px;
  border:1px solid rgba(238,207,125,.55);
  border-radius:14px;
  object-fit:contain;
  object-position:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(104,225,194,.2),transparent 38%),
    linear-gradient(145deg,#082f31,#141933);
  box-shadow:inset 0 0 0 3px rgba(3,19,28,.38);
}
.collection-loadout-strip small {
  color:#9fb7b0;
}
.collection-loadout-strip em {
  color:#f1d78f;
}
.collection-category-mark {
  border-color:rgba(246,216,139,.7);
  box-shadow:inset 0 0 0 3px rgba(2,24,31,.38),0 8px 20px rgba(0,0,0,.22);
}
.avatar-choice img,
.profile-card>img,
.rank-hero>img,
.rank-card img,
.collection-loadout-avatar,
.active-companion img,
.companion-portrait img,
.relic-card>img {
  box-sizing:border-box;
  border:1px solid rgba(238,207,125,.38);
  background:
    radial-gradient(ellipse at 50% 86%,rgba(87,230,191,.22),transparent 30%),
    radial-gradient(circle at 50% 38%,rgba(95,225,192,.16),transparent 36%),
    linear-gradient(150deg,#0b3133,#10182f 64%,#231734);
  object-fit:contain;
  object-position:center;
}
.avatar-choice img,
.profile-card>img,
.rank-hero>img,
.rank-card img,
.collection-loadout-avatar {
  padding:4%;
}
.companion-portrait {
  border:1px solid rgba(238,207,125,.38);
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(150deg,#0b3133,#10182f 64%,#231734);
}
.companion-portrait img {
  border:0;
  padding:4%;
  object-position:center bottom;
}
.relic-card>img {
  padding:7%;
  border-radius:16px;
}
@media(max-width:1600px) {
}
@media(max-width:1180px) {
  .efficient-market .catalog-toolbar>div:nth-child(2) { grid-template-columns:repeat(3,minmax(100px,1fr)); }
}
@media(max-width:720px) {
  .efficient-market .market-hero {
    min-height:430px;
    grid-template-columns:1fr;
    grid-template-areas:"copy" "economy" "action";
    align-content:end;
    background:
      linear-gradient(180deg,rgba(2,15,24,.22),rgba(2,15,24,.92) 58%,rgba(2,15,24,.98)),
      url("assets/navigation/destination-shop.webp") 58% center/cover no-repeat;
  }
  .efficient-market .market-hero>a { justify-self:start; }
  .efficient-market .catalog-toolbar>div:nth-child(2) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .efficient-market .shop-grid { grid-template-columns:1fr; }
  .market-art-stage { min-height:220px; }
  .save-safety { grid-template-columns:1fr; }
  .save-safety-actions small { text-align:left; }
}

/* Final Arcade geometry: four equal campaign tiles without clipped copy. */
.arcade-campaign-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media(max-width:1180px) {
  .arcade-campaign-deck { grid-template-columns: 1fr; }
}
@media(min-width:1101px) {
  .ecg-crisis { grid-template-columns:minmax(0,1.42fr) minmax(360px,.58fr); }
  .ecg-hud,.ecg-stability,.ecg-case,.ecg-crisis>[data-ecg-review] { grid-column:1 / -1; }
  .ecg-monitor { grid-column:1; }
  .ecg-question {
    grid-column:2;
    grid-template-columns:1fr;
    align-self:stretch;
    align-content:start;
  }
  .ecg-options { grid-template-columns:1fr; }
}

/* Production Arcade visual system: one moonlit stage across every campaign and
   quick game, with readable full-answer controls and bounded motion. */
.arcade-run,.ms-game,.al-game,.culture-command,.ecg-crisis {
  --arcade-gold:#f0c96f;
  --arcade-mint:#5ed3b1;
  --arcade-cream:#fff7df;
}
.arcade-run { max-width:1520px; margin:0 auto; gap:14px; }
.arcade-hud,.ms-hud,.al-hud,.cc-hud,.ecg-hud {
  border:1px solid rgba(240,201,111,.38);
  background:radial-gradient(circle at 88% 0,rgba(111,79,180,.2),transparent 32%),linear-gradient(125deg,rgba(5,53,47,.98),rgba(7,27,43,.98) 68%,rgba(35,24,57,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08);
}
.arcade-hud>div:nth-child(2),.ms-hud>div:nth-child(2),.al-hud>div:nth-child(2),.cc-hud>div:nth-child(2) { min-width:0; display:grid; gap:4px; }
.arcade-hud .eyebrow,.ms-hud>div:nth-child(2) span,.al-hud>div:nth-child(2) span,.cc-hud>div:nth-child(2) span { display:block; color:var(--arcade-gold); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.ms-hud>div:nth-child(2) b,.al-hud>div:nth-child(2) b,.cc-hud>div:nth-child(2) b { display:block; color:var(--arcade-cream); font-size:clamp(16px,2vw,22px); line-height:1.15; }
.arcade-game-shell {
  min-height:min(650px,calc(100dvh - 184px)); padding:clamp(16px,2vw,26px); gap:clamp(16px,2vw,24px);
  border-color:rgba(240,201,111,.42);
  background:radial-gradient(circle at 10% 5%,rgba(94,211,177,.13),transparent 30%),radial-gradient(circle at 92% 8%,rgba(111,79,180,.22),transparent 36%),linear-gradient(145deg,rgba(4,35,33,.98),rgba(8,24,44,.98) 62%,rgba(33,21,52,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08);
}
.embedded-prompt { align-self:stretch; display:grid; align-content:center; padding:clamp(22px,3vw,36px); border-color:rgba(240,201,111,.22); background:radial-gradient(circle at 20% 0,rgba(240,201,111,.11),transparent 30%),linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); }
.embedded-prompt h2 { font-family:var(--display); font-size:clamp(25px,3vw,42px); line-height:1.08; overflow-wrap:anywhere; }
.embedded-prompt p { color:#d5e5df; font-size:15px; line-height:1.55; }

.microbe-field { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:16px; min-height:520px; padding:24px 24px 58px; }
.microbe-target { position:relative; inset:auto; transform:none; width:100%; min-height:168px; padding:18px; animation:cultureDrift 3.6s ease-in-out var(--delay,0s) infinite alternate; will-change:auto; }
.microbe-target:hover,.microbe-target:focus-visible { transform:translateY(-4px) scale(1.01); border-color:#fff0ad; }
.microbe-target b { max-width:28ch; font-size:clamp(13px,1.25vw,17px); line-height:1.3; overflow-wrap:anywhere; }
.microbe-target small { color:rgba(7,20,16,.72); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
@keyframes cultureDrift { to { transform:translateY(-5px); filter:saturate(1.08); } }

.memory-pair-game { grid-template-columns:minmax(0,1fr) minmax(190px,.34fr); align-items:center; min-height:520px; padding:22px; }
.memory-pair-game .match-grid { grid-template-columns:repeat(4,minmax(94px,1fr)); gap:13px; }
.memory-pair-game .match-tile { min-height:150px; aspect-ratio:auto; padding:14px; background:radial-gradient(circle at 50% 25%,rgba(240,201,111,.28),transparent 26%),linear-gradient(145deg,#5b408e,#0b6654 58%,#061a20); transition:transform .2s ease,filter .2s ease,background .2s ease; will-change:auto; }
.memory-pair-game .match-tile:not(.revealed) b { display:none; }
.memory-pair-game .match-tile:not(.revealed) span { color:#ffe49a; font-size:34px; }
.memory-pair-game .match-tile.revealed { transform:translateY(-3px); background:linear-gradient(145deg,#f5e2ab,#c99548 58%,#14725d); color:#071410; }
.memory-pair-game .match-tile.revealed span { display:none; }
.memory-pair-game .match-tile b { font-size:clamp(11px,1vw,14px); line-height:1.3; overflow-wrap:anywhere; }
.ward-goal strong { display:block; margin-top:20px; color:#ffe49a; font-size:14px; }
.ward-goal strong i { font-style:normal; font-size:24px; }

.capsule-conveyor-game { grid-template-columns:minmax(0,1fr) minmax(230px,.36fr); min-height:520px; align-items:stretch; }
.capsule-belt { position:relative; min-height:480px; overflow:hidden; border:1px solid rgba(240,201,111,.26); border-radius:18px; background:linear-gradient(180deg,transparent 66%,rgba(240,201,111,.12) 67% 69%,transparent 70%),radial-gradient(circle at 50% 30%,rgba(94,211,177,.16),transparent 38%),#061a2e; }
.capsule-conveyor-game .blast-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-content:center; min-height:400px; padding:24px; }
.answer-capsule { position:relative; min-height:150px; overflow:hidden; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:18px; border:1px solid rgba(240,201,111,.42); border-radius:999px; color:#071410; text-align:left; background:linear-gradient(145deg,#f7e6b2 0 49%,#58c7a8 50% 100%); box-shadow:0 15px 36px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.5); transition:transform .22s ease,box-shadow .22s ease; }
.answer-capsule>span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff8e7; background:#082a32; font-weight:950; }
.answer-capsule b { position:relative; z-index:1; font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.answer-capsule i { position:absolute; inset:0 50% 0 0; background:rgba(255,255,255,.13); pointer-events:none; }
.answer-capsule.selected { transform:translateY(-5px) scale(1.015); box-shadow:0 0 0 4px rgba(255,228,154,.34),0 20px 42px rgba(0,0,0,.36); }
.capsule-receiver { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:min(220px,52%); height:58px; display:grid; place-items:center; color:#ffe49a; border:2px solid rgba(94,211,177,.68); border-radius:16px 16px 42px 42px; background:rgba(4,24,34,.88); box-shadow:0 0 34px rgba(94,211,177,.22); }
.capsule-controls { display:grid; gap:10px; }

.result-forge { position:relative; min-height:520px; align-content:center; overflow:hidden; }
.result-forge .forge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; position:relative; z-index:2; }
.forge-ingot { min-height:116px; display:grid; align-content:center; gap:7px; padding:16px; border:1px solid rgba(240,201,111,.38); border-radius:16px; color:#fff8e7; text-align:left; background:linear-gradient(145deg,rgba(31,62,83,.96),rgba(8,85,68,.92)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 28px rgba(0,0,0,.24); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.forge-ingot span { color:#f0c96f; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.forge-ingot b { font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.forge-ingot.selected { transform:translateY(-4px); border-color:#ffe49a; box-shadow:0 0 0 3px rgba(240,201,111,.22),0 18px 34px rgba(0,0,0,.3); }
.forge-fire { position:absolute; inset:auto 0 10px; display:flex; justify-content:center; gap:14px; opacity:.72; pointer-events:none; }
.forge-fire i { width:34px; height:96px; border-radius:70% 30% 58% 42%; background:linear-gradient(#fff2ad,#f49b43 52%,#7a2c7f); animation:forgeFlame 1.2s ease-in-out infinite alternate; transform-origin:50% 100%; }
.forge-fire i:nth-child(2) { height:122px; animation-delay:.18s; } .forge-fire i:nth-child(3) { animation-delay:.36s; }
.forge-anvil { position:relative; z-index:1; display:grid; place-items:center; color:#ffe49a; }
.forge-anvil span { width:180px; height:42px; border-radius:12px 12px 26px 26px; background:linear-gradient(#aeb9bd,#3b4b55 52%,#15232c); box-shadow:0 14px 0 #071318,0 20px 34px rgba(0,0,0,.45); }
.forge-anvil b { margin-top:22px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.result-forge.hammering .forge-anvil { animation:forgeHammer .42s ease; }
@keyframes forgeFlame { to { transform:scaleY(1.16) rotate(3deg); filter:brightness(1.18); } }
@keyframes forgeHammer { 45% { transform:translateY(8px) scale(.98); filter:brightness(1.35); } }

.dose-entry { width:min(520px,90%); display:grid; grid-template-columns:auto minmax(120px,1fr) auto; align-items:center; gap:10px; color:#d6e6df; font-weight:800; }
.dose-entry input { min-height:48px; width:100%; border:1px solid rgba(240,201,111,.48); border-radius:12px; padding:10px 12px; color:#fff8e7; background:rgba(3,21,29,.86); font:800 18px/1 system-ui,sans-serif; }
.dose-entry b { color:#ffe49a; } .dose-fine-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

.clinical-runner .runner-track-lines { grid-template-columns:repeat(var(--lanes,4),minmax(0,1fr)); }
.clinical-runner .runner-gate { min-height:320px; padding:18px; }
.clinical-runner .runner-gate b { font-size:clamp(12px,1.15vw,16px); line-height:1.35; overflow-wrap:anywhere; }
.arcade-feedback,.arcade-complete { max-width:1180px; margin:24px auto; padding:clamp(24px,4vw,48px); border:1px solid rgba(240,201,111,.45); background:radial-gradient(circle at 90% 0,rgba(111,79,180,.24),transparent 34%),linear-gradient(145deg,#062e2b,#0a2037 66%,#281b3b)!important; color:#f8f4ea!important; }
.arcade-feedback .feedback-lessons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.arcade-feedback .feedback-lessons article { color:#f8f4ea; border-color:rgba(240,201,111,.24); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.18); }
.arcade-feedback .feedback-lessons article h3 { color:#fff8e7; } .arcade-feedback .feedback-lessons article p { color:#d6e5df; }
.arcade-feedback .completion-stats>div,.arcade-complete .completion-stats>div { border:1px solid rgba(240,201,111,.28); background:rgba(3,23,29,.72)!important; color:#f8f4ea!important; }
.arcade-feedback .completion-stats b,.arcade-complete .completion-stats b { color:#ffe49a; }

@media(max-width:1080px) {
  .arcade-game-shell { grid-template-columns:1fr; min-height:auto; }
  .embedded-prompt { align-content:start; }
  .microbe-field,.memory-pair-game,.capsule-conveyor-game,.result-forge { min-height:420px; }
  .clinical-runner .runner-track-lines { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clinical-runner .runner-avatar { display:none; }
  .al-specimen { min-height:0; max-height:none; overflow:hidden; z-index:0; }
  .al-specimen img { max-height:60dvh; }
  .al-wordbank { position:relative; z-index:2; isolation:isolate; }
}
@media(max-width:720px) {
  .arcade-hud { grid-template-columns:42px minmax(0,1fr); padding:12px; }
  .arcade-hud .hud-stats { grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
  .arcade-hud .hud-stats span { display:none; }
  .arcade-game-shell { padding:12px; }
  .embedded-prompt { padding:20px; } .embedded-prompt h2 { font-size:clamp(23px,7vw,32px); }
  .microbe-field { grid-template-columns:1fr; padding:14px 14px 46px; } .microbe-target { min-height:116px; animation:none; }
  .memory-pair-game,.capsule-conveyor-game { grid-template-columns:1fr; }
  .memory-pair-game .match-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .memory-pair-game .match-tile { min-height:112px; }
  .capsule-conveyor-game .blast-grid,.result-forge .forge-grid { grid-template-columns:1fr; }
  .capsule-belt { min-height:620px; } .answer-capsule { min-height:112px; }
  .dose-entry { grid-template-columns:1fr auto; } .dose-entry>span { grid-column:1/-1; }
  .clinical-runner .runner-track-lines { grid-template-columns:1fr; } .clinical-runner .runner-gate { min-height:110px; }
  .arcade-feedback .feedback-lessons { grid-template-columns:1fr; }
  .ms-hud,.al-hud { grid-template-columns:42px minmax(0,1fr); } .ms-hud>div:last-child,.al-hud>div:last-child { grid-column:1/-1; }
}
@media(prefers-reduced-motion:reduce) {
  .microbe-target,.forge-fire i,.result-forge.hammering .forge-anvil,.answer-capsule,.memory-pair-game .match-tile { animation:none!important; transition-duration:.01ms!important; }
}

/* Mythic arcade continuity: the six guild trials share the same ornate,
   moonlit apothecary language as the flagship campaigns. */
.arcade-library .arcade-card { position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 22%,rgba(111,79,180,.2),transparent 34%),linear-gradient(145deg,rgba(5,55,47,.98),rgba(9,26,45,.98) 66%,rgba(38,23,55,.98))!important; }
.arcade-library .arcade-card:before { content:""; position:absolute; inset:9px; z-index:-1; pointer-events:none; border:1px solid rgba(240,201,111,.16); border-radius:16px; box-shadow:inset 0 0 42px rgba(94,211,177,.05); }
.arcade-library .arcade-card img { width:100%; height:180px; box-sizing:border-box; padding:12px; object-fit:contain; object-position:center; border:1px solid rgba(240,201,111,.32); border-radius:18px; background:radial-gradient(circle at 50% 50%,rgba(91,218,185,.18),transparent 40%),radial-gradient(circle at 50% 20%,rgba(111,79,180,.24),transparent 50%),linear-gradient(145deg,#051d27,#10213c 64%,#291a3d); box-shadow:inset 0 0 0 4px rgba(3,19,28,.38),0 14px 34px rgba(0,0,0,.25); }
.arcade-library .arcade-card h3 { font-family:var(--display); letter-spacing:.01em; }
.arcade-library .arcade-card .button { position:relative; z-index:2; }
.arcade-run { --trial-name:"APOTHECARY TRIAL"; --trial-art:url("assets/arcade/games-chroma.png"); --trial-glow:94,211,177; }
.formula-forge { --trial-name:"THE FORGE OF HEPHAESTUS"; --trial-art:url("assets/arcade/formula-forge.webp"); --trial-glow:245,155,67; }
.memory-ward { --trial-name:"MNEMOSYNE'S SANCTUM"; --trial-art:url("assets/arcade/memory-ward.webp"); --trial-glow:140,104,220; }
.capsule-catch { --trial-name:"HERMES' RECEIVING GATE"; --trial-art:url("assets/arcade/capsule-catch.webp"); --trial-glow:82,194,238; }
.microbe-mash { --trial-name:"THE ASCLEPIAN AEGIS"; --trial-art:url("assets/arcade/microbe-mash.webp"); --trial-glow:132,94,221; }
.dose-dial { --trial-name:"ORACLE OF MEASURE"; --trial-art:url("assets/arcade/dose-dial.webp"); --trial-glow:67,205,224; }
.clinical-runner { --trial-name:"MERCURY'S CROSSROADS"; --trial-art:url("assets/arcade/renal-runner.webp"); --trial-glow:74,190,238; }
.arcade-run .arcade-game-shell { position:relative; overflow:hidden; isolation:isolate; }
.arcade-run .arcade-game-shell:before { content:""; position:absolute; right:clamp(-90px,-3vw,-30px); bottom:clamp(-120px,-8vw,-50px); width:clamp(320px,42vw,640px); aspect-ratio:1; z-index:-2; pointer-events:none; background-image:var(--trial-art); background-position:center; background-repeat:no-repeat; background-size:contain; opacity:.13; filter:saturate(1.1) drop-shadow(0 0 42px rgba(var(--trial-glow),.22)); }
.arcade-run .arcade-game-shell:after { content:""; position:absolute; inset:10px; z-index:-1; pointer-events:none; border:1px solid rgba(240,201,111,.16); border-radius:20px; background:linear-gradient(90deg,rgba(240,201,111,.45),transparent 12%) left 12px top 12px/76px 1px no-repeat,linear-gradient(180deg,rgba(240,201,111,.45),transparent 12%) left 12px top 12px/1px 76px no-repeat,linear-gradient(270deg,rgba(240,201,111,.45),transparent 12%) right 12px bottom 12px/76px 1px no-repeat,linear-gradient(0deg,rgba(240,201,111,.45),transparent 12%) right 12px bottom 12px/1px 76px no-repeat; }
.arcade-run .arcade-game-shell>* { position:relative; z-index:1; }
.arcade-run .embedded-prompt:before { content:var(--trial-name); display:block; width:max-content; max-width:100%; margin:0 0 12px; padding:7px 11px; color:#ffe49a; border:1px solid rgba(240,201,111,.34); border-radius:999px; background:rgba(5,27,35,.72); box-shadow:0 0 24px rgba(var(--trial-glow),.12); font-size:10px; font-weight:950; letter-spacing:.13em; }
.arcade-run .embedded-prompt>span { color:rgb(var(--trial-glow)); }
.microbe-field,.memory-pair-game,.capsule-conveyor-game,.result-forge,.dose-console,.clinical-runner .runner-arena { border:1px solid rgba(240,201,111,.24); border-radius:22px; background:radial-gradient(circle at 50% 15%,rgba(var(--trial-glow),.16),transparent 36%),linear-gradient(155deg,rgba(3,25,34,.84),rgba(15,20,42,.88)); box-shadow:inset 0 1px rgba(255,255,255,.07),inset 0 0 54px rgba(var(--trial-glow),.05),0 18px 40px rgba(0,0,0,.2); }
.microbe-target { border-color:rgba(240,201,111,.45); background:radial-gradient(circle at 50% 38%,rgba(169,122,235,.56),rgba(34,113,103,.72) 45%,rgba(5,31,40,.96) 72%),linear-gradient(145deg,#39245e,#075845); color:#fff8e7; box-shadow:inset 0 0 0 6px rgba(240,201,111,.08),0 12px 28px rgba(0,0,0,.3); }
.microbe-target small { color:#ffe49a; }
.memory-pair-game .match-tile:not(.revealed) { border:1px solid rgba(240,201,111,.5); background:radial-gradient(circle at 50% 38%,rgba(132,95,218,.42),transparent 34%),linear-gradient(145deg,#102f39,#221b47); box-shadow:inset 0 0 0 5px rgba(240,201,111,.07),0 10px 24px rgba(0,0,0,.28); }
.capsule-receiver { text-transform:uppercase; letter-spacing:.12em; }
.clinical-runner .runner-gate { position:relative; overflow:hidden; border:1px solid rgba(240,201,111,.32); border-radius:120px 120px 18px 18px; background:radial-gradient(ellipse at 50% 25%,rgba(var(--trial-glow),.2),transparent 34%),linear-gradient(180deg,rgba(24,45,64,.95),rgba(5,33,39,.95)); box-shadow:inset 0 0 0 5px rgba(240,201,111,.05),0 16px 30px rgba(0,0,0,.24); }
.clinical-runner .runner-gate.selected { border-color:#ffe49a; box-shadow:inset 0 0 42px rgba(var(--trial-glow),.16),0 0 0 3px rgba(240,201,111,.2),0 22px 40px rgba(0,0,0,.32); }
.dose-console { padding:clamp(22px,3vw,38px); }
.dose-orb { box-shadow:0 0 0 8px rgba(240,201,111,.08),0 0 46px rgba(var(--trial-glow),.28); }
@media(max-width:720px) { .arcade-run .arcade-game-shell:before { right:-110px; bottom:-80px; opacity:.08; } .arcade-run .embedded-prompt:before { white-space:normal; } .arcade-library .arcade-card img { height:170px; } }
@media(prefers-reduced-motion:reduce) { .arcade-run .arcade-game-shell:before { filter:saturate(1.05); } }

/* Legendary Class Trials: persistent mastery and a distinct mythic realm for
   every class-scoped game, without loading any additional route artwork. */
.legendary-trial-library .arcade-trial-card {
  position:relative; isolation:isolate; grid-template-rows:190px auto auto auto auto auto auto;
  overflow:hidden; border-color:hsla(var(--trial-hue),75%,70%,.42)!important;
  background:radial-gradient(circle at 88% 4%,hsla(var(--trial-hue),80%,64%,.2),transparent 34%),linear-gradient(150deg,rgba(5,42,39,.98),rgba(12,27,45,.99) 66%,rgba(35,21,48,.98))!important;
}
.legendary-trial-library .arcade-trial-card:before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.2;
  background-image:linear-gradient(60deg,transparent 48%,hsla(var(--trial-hue),70%,70%,.3) 49%,transparent 50%);
  background-size:36px 36px; mask-image:linear-gradient(to bottom,#000,transparent 55%);
}
.arcade-trial-art { position:relative; min-width:0; height:190px; overflow:hidden; border:1px solid hsla(var(--trial-hue),75%,72%,.34); border-radius:18px; background:#061b25; }
.legendary-trial-library .arcade-trial-art img { width:100%; height:100%; padding:0; object-fit:cover; filter:saturate(1.08) contrast(1.04); transform:scale(1.01); }
.arcade-trial-art:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(2,16,24,.9)); pointer-events:none; }
.arcade-trial-art>span { position:absolute; left:14px; right:52px; bottom:12px; z-index:2; color:#fff2c7; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.arcade-trial-art>b { position:absolute; right:12px; bottom:10px; z-index:2; display:grid; place-items:center; width:36px; height:36px; border:1px solid hsla(var(--trial-hue),80%,72%,.65); border-radius:50%; color:#fff2b1; background:rgba(4,26,32,.82); box-shadow:0 0 22px hsla(var(--trial-hue),80%,65%,.35); }
.trial-mastery { display:grid; gap:7px; padding:12px; border:1px solid hsla(var(--trial-hue),70%,70%,.2); border-radius:14px; background:rgba(3,21,29,.56); }
.trial-mastery>div,.trial-rank-result>div { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#c9dad4; font-size:12px; }
.trial-mastery b,.trial-rank-result b { color:#ffe49a; }
.trial-mastery>i,.trial-rank-result>i,.trial-run-progress { display:block; height:8px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:99px; background:rgba(0,0,0,.34); }
.trial-mastery>i>span,.trial-rank-result>i>span,.trial-run-progress>i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,hsl(var(--trial-hue),70%,48%),#f0c96f); box-shadow:0 0 14px hsla(var(--trial-hue),75%,62%,.65); }
.trial-mastery small { color:#aebfba; font-size:11px; }

.arcade-run.mythic-trial { --trial-hue:170; min-height:calc(100dvh - 110px); gap:16px; }
.arcade-run[data-trial="formula-forge"] { --trial-hue:36; }
.arcade-run[data-trial="memory-ward"] { --trial-hue:276; }
.arcade-run[data-trial="capsule-catch"] { --trial-hue:192; }
.arcade-run[data-trial="microbe-mash"] { --trial-hue:154; }
.arcade-run[data-trial="dose-dial"] { --trial-hue:46; }
.arcade-run[data-trial="renal-runner"] { --trial-hue:214; }
.mythic-trial-hud { position:relative; overflow:hidden; border-color:hsla(var(--trial-hue),78%,70%,.44)!important; background:radial-gradient(circle at 90% 0,hsla(var(--trial-hue),80%,60%,.22),transparent 35%),linear-gradient(125deg,#062b2a,#0b2035 65%,#231836)!important; box-shadow:0 20px 54px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07); }
.mythic-trial-hud:after { content:""; position:absolute; width:240px; height:240px; right:-95px; top:-125px; border:1px solid hsla(var(--trial-hue),75%,72%,.24); border-radius:50%; box-shadow:0 0 0 22px hsla(var(--trial-hue),75%,72%,.04),0 0 0 54px hsla(var(--trial-hue),75%,72%,.03); pointer-events:none; }
.trial-hud-copy { min-width:0; position:relative; z-index:1; }
.trial-hud-copy small { display:block; margin-top:6px; color:#a9c2bc; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.trial-run-progress { width:min(520px,100%); margin-top:10px; }
.mythic-trial-hud .hud-stats { position:relative; z-index:1; }
.mythic-trial-hud .hud-stats b { color:#ffe49a; }
.mythic-trial .arcade-game-shell { position:relative; overflow:hidden; border-color:hsla(var(--trial-hue),70%,70%,.36)!important; background:radial-gradient(circle at 50% 110%,hsla(var(--trial-hue),70%,55%,.17),transparent 48%),linear-gradient(145deg,rgba(5,36,34,.98),rgba(9,26,42,.99) 70%,rgba(31,20,43,.98))!important; box-shadow:0 26px 70px rgba(0,0,0,.35); }
.trial-brief { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(150px,.32fr); align-items:center; gap:14px; padding:14px 16px; border:1px solid hsla(var(--trial-hue),70%,70%,.28); border-radius:18px; color:#ecf6f1; background:linear-gradient(90deg,hsla(var(--trial-hue),55%,32%,.35),rgba(4,24,32,.72)); }
.trial-brief.boss-round { border-color:#f0c96f; box-shadow:0 0 26px rgba(240,201,111,.16); }
.trial-sigil { display:grid; place-items:center; width:52px; height:52px; border:1px solid hsla(var(--trial-hue),80%,76%,.58); border-radius:50%; color:#fff1b5; background:rgba(4,28,34,.76); font-size:25px; box-shadow:0 0 24px hsla(var(--trial-hue),75%,62%,.28); }
.trial-brief>div:nth-child(2) { display:grid; gap:3px; min-width:0; }
.trial-brief span,.trial-brief aside span { color:#f0c96f; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.trial-brief b { color:#fff8e7; font-size:14px; line-height:1.35; }
.trial-brief small { color:#bcd1ca; line-height:1.45; }
.trial-brief aside { display:grid; gap:4px; padding-left:14px; border-left:1px solid rgba(255,255,255,.12); }
.trial-brief aside b { font-size:12px; }
.mythic-trial .embedded-prompt { position:relative; z-index:2; border-color:hsla(var(--trial-hue),65%,68%,.25); background:rgba(4,23,31,.68); }
.mythic-trial .embedded-prompt h2 { color:#fff8e7; text-wrap:balance; }
.mythic-trial .embedded-prompt p { color:#c7d9d3; }

.aegis-field { position:relative; isolation:isolate; }
.aegis-heart { position:absolute; left:50%; top:50%; z-index:0; display:grid; place-items:center; width:118px; aspect-ratio:1; translate:-50% -50%; border:1px solid rgba(134,255,211,.38); border-radius:50%; color:#d8ffec; background:radial-gradient(circle,rgba(50,201,150,.32),rgba(3,29,35,.9) 64%); box-shadow:0 0 0 16px rgba(50,201,150,.045),0 0 52px rgba(50,201,150,.25); pointer-events:none; }
.aegis-heart i { position:absolute; inset:15px; border:1px solid rgba(240,201,111,.45); rotate:45deg; }
.aegis-heart b { font-size:10px; letter-spacing:.14em; }
.aegis-field .microbe-target { position:relative; z-index:1; border-color:rgba(117,229,190,.38); background:linear-gradient(145deg,rgba(8,66,56,.96),rgba(10,31,47,.97)); }
.aegis-field .microbe-target:before { content:""; position:absolute; inset:8px; border:1px solid rgba(240,201,111,.15); border-radius:50%; pointer-events:none; }
.mercury-crossroads { position:relative; isolation:isolate; }
.runner-sky,.causeway-stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.runner-sky i,.causeway-stars i { position:absolute; width:5px; height:5px; border-radius:50%; background:#ffe7a0; box-shadow:34px 42px #79e2cd,92px 12px #fff0b4,150px 74px #9cc5ff,220px 20px #fff0b4,320px 66px #79e2cd; opacity:.72; }
.runner-sky i:nth-child(2),.causeway-stars i:nth-child(2) { left:32%; top:22%; scale:.7; }
.runner-sky i:nth-child(3),.causeway-stars i:nth-child(3) { left:66%; top:58%; scale:.85; }
.mercury-crossroads .runner-gate { border-color:rgba(121,190,255,.4); background:linear-gradient(180deg,rgba(14,57,78,.94),rgba(10,26,46,.98)); }
.mercury-crossroads .runner-gate.selected { border-color:#ffe49a; box-shadow:0 0 0 3px rgba(240,201,111,.16),0 0 34px rgba(91,175,255,.22); }
.mercury-crossroads .runner-avatar { color:#ffe49a; filter:drop-shadow(0 0 12px rgba(240,201,111,.78)); }
.oracle-console { position:relative; isolation:isolate; }
.oracle-rings { position:absolute; left:50%; top:38%; width:280px; aspect-ratio:1; translate:-50% -50%; pointer-events:none; }
.oracle-rings i { position:absolute; inset:0; border:1px solid rgba(240,201,111,.32); border-radius:50%; animation:oracleOrbit 12s linear infinite; }
.oracle-rings i:nth-child(2) { inset:28px; animation-direction:reverse; animation-duration:9s; border-color:rgba(112,220,194,.38); }
.oracle-rings i:nth-child(3) { inset:57px; animation-duration:6s; border-style:dashed; }
.oracle-rings i:after { content:""; position:absolute; left:50%; top:-5px; width:9px; height:9px; border-radius:50%; background:#ffe49a; box-shadow:0 0 14px #f0c96f; }
.oracle-console .dose-orb,.oracle-console .dose-entry,.oracle-console .dose-slider,.oracle-console .dose-scale,.oracle-console .dose-fine-controls { position:relative; z-index:1; }
.archive-vault { position:relative; isolation:isolate; }
.archive-moon { position:absolute; right:22%; top:20px; width:150px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 35%,#fff3bb,#d1b9ff 50%,rgba(81,54,135,.2) 72%); opacity:.16; box-shadow:0 0 60px rgba(179,139,255,.38); pointer-events:none; }
.archive-vault .match-tile { border-color:rgba(191,155,255,.4); background:linear-gradient(145deg,rgba(53,34,88,.96),rgba(9,29,45,.98)); }
.archive-vault .match-tile:not(.revealed) span { color:#e7d5ff; text-shadow:0 0 18px rgba(184,137,255,.7); }
.archive-vault .match-tile.revealed { border-color:#ffe49a; background:linear-gradient(145deg,rgba(79,51,118,.96),rgba(13,65,62,.98)); }
.ember-crucible { position:relative; }
.ember-crucible:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 88%,rgba(245,141,59,.18),transparent 45%); pointer-events:none; }
.ember-crucible .forge-ingot { border-color:rgba(245,163,72,.42); background:linear-gradient(160deg,rgba(85,39,34,.96),rgba(16,31,43,.98)); }
.ember-crucible .forge-ingot.selected { border-color:#ffe49a; box-shadow:0 0 0 3px rgba(240,201,111,.2),0 20px 38px rgba(0,0,0,.34),inset 0 -10px 24px rgba(245,116,48,.12); }
.celestial-causeway { position:relative; }
.celestial-causeway .capsule-belt { background:radial-gradient(circle at 50% 100%,rgba(55,188,192,.18),transparent 55%),linear-gradient(180deg,rgba(5,35,48,.96),rgba(10,22,43,.98)); }
.celestial-causeway .answer-capsule { color:#fff8e7; border-color:rgba(96,215,219,.46); background:linear-gradient(90deg,rgba(17,89,87,.98),rgba(20,44,75,.98)); }
.celestial-causeway .answer-capsule.selected { border-color:#ffe49a; box-shadow:0 0 0 4px rgba(255,228,154,.2),0 0 34px rgba(75,203,206,.3); }

.trial-feedback,.trial-complete { position:relative; overflow:hidden; border-color:hsla(var(--trial-hue),75%,70%,.48)!important; background:radial-gradient(circle at 90% 0,hsla(var(--trial-hue),75%,60%,.2),transparent 38%),linear-gradient(145deg,#062d2a,#0d2035 68%,#251936)!important; }
.trial-feedback-banner { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px; margin-bottom:18px; }
.trial-feedback-banner>span,.trial-complete-crest { display:grid; place-items:center; width:78px; height:78px; border:1px solid hsla(var(--trial-hue),75%,74%,.62); border-radius:50%; color:#fff0ad; background:rgba(4,25,33,.72); font-size:34px; box-shadow:0 0 36px hsla(var(--trial-hue),75%,60%,.24); }
.trial-feedback-banner small { color:#f0c96f; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.trial-feedback-banner h1 { margin:.18em 0; color:#fff8e7; }
.trial-complete-crest { margin-bottom:18px; }
.trial-rank-result { display:grid; gap:9px; max-width:680px; margin:20px 0; padding:16px; border:1px solid hsla(var(--trial-hue),70%,70%,.28); border-radius:16px; background:rgba(3,21,29,.58); }
.trial-rank-result small { color:#b9cdc6; }
@keyframes oracleOrbit { to { rotate:360deg; } }
@media(prefers-reduced-motion:reduce) { .oracle-rings i { animation:none; } }
@media(max-width:820px) {
  .trial-brief { grid-template-columns:auto minmax(0,1fr); }
  .trial-brief aside { grid-column:1/-1; padding:10px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .legendary-trial-library .arcade-trial-card { grid-template-rows:170px auto auto auto auto auto auto; }
  .arcade-trial-art { height:170px; }
  .trial-feedback-banner { align-items:start; }
  .trial-feedback-banner>span,.trial-complete-crest { width:58px; height:58px; font-size:26px; }
}
@media(max-width:540px) {
  .trial-brief { grid-template-columns:1fr; }
  .trial-sigil { width:44px; height:44px; }
  .trial-brief aside { grid-column:auto; }
  .trial-hud-copy h1 { font-size:clamp(1.35rem,7vw,2rem); }
  .aegis-heart { width:86px; opacity:.6; }
  .oracle-rings { width:210px; }
  .trial-mastery>div,.trial-rank-result>div { align-items:flex-start; flex-direction:column; gap:3px; }
}

/* Card-information contrast: definition lists must stay readable when the
   shared feedback component is placed on a dark Arcade result surface. */
.arcade-feedback .feedback-lessons .drug-facts dt {
  color:#f0c96f;
}
.arcade-feedback .feedback-lessons .drug-facts dd {
  color:#eefaf6;
}
.arcade-feedback .feedback-lessons .drug-facts dd strong,
.arcade-feedback .feedback-lessons .drug-facts dd b {
  color:#fff7df;
}

/* PHARMACY_LAND_ARCADE_ENGINE_V2_CSS_START */
/* Unified market icon system */
.market-icon-frame {
  width: calc(100% - 24px);
  aspect-ratio: 1.18 / 1;
  margin: 12px auto 6px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(240, 201, 111, .48);
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 215, 143, .22), transparent 42%),
    linear-gradient(145deg, #143c38, #101d32 72%, #251a38);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .3), 0 10px 22px rgba(0, 0, 0, .18);
}
.market-icon-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 236, 180, .15);
  border-radius: 14px;
  pointer-events: none;
}
.market-icon-frame img {
  box-sizing: border-box;
  position: absolute !important;
  inset: 7% !important;
  width: 86% !important;
  height: 86% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 86% !important;
  max-height: 86% !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  filter: saturate(.96) contrast(1.04);
}
.avatar-market-card .market-icon-frame img {
  inset: 5% !important;
  width: 90% !important;
  height: 90% !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.market-kind-relic .market-icon-frame img {
  inset: 10% !important;
  width: 80% !important;
  height: 80% !important;
  max-width: 80% !important;
  max-height: 80% !important;
}.market-icon-frame.aura-frame { aspect-ratio: 1.18 / 1; }
.market-icon-frame .aura-orb { width: 96px; height: 96px; margin: 0; }
.market-icon-frame.image-missing::before { content: none; }

@media (max-width: 620px) {
  .market-icon-frame { aspect-ratio: 1.3 / 1; }
}
/* PHARMACY_LAND_ARCADE_ENGINE_V2_CSS_END */

/* Moonlit icon system: one crisp, lightweight SVG vocabulary across the
   production shell, collection, market, and all six guild trials. */
.ui-icon,
.trial-icon {
  display:block;
  width:1em;
  height:1em;
  overflow:visible;
  color:inherit;
  fill:none;
  flex:0 0 auto;
}
.brand-mark .ui-icon { width:20px; height:20px; }
.nav-toggle .ui-icon { width:24px; height:24px; }
.topbar nav a {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.topbar nav a .ui-icon {
  width:16px;
  height:16px;
  color:#73daba;
  transition:color .18s ease,filter .18s ease,transform .18s ease;
}
.topbar nav a:hover .ui-icon,
.topbar nav a:focus-visible .ui-icon,
.topbar nav a[aria-current="page"] .ui-icon {
  color:#ffe49a;
  filter:drop-shadow(0 0 7px rgba(240,201,111,.35));
  transform:translateY(-1px);
}
.mobile-dock a .ui-icon {
  width:21px;
  height:21px;
  color:#70d9bc;
  transition:color .18s ease,filter .18s ease,transform .18s ease;
}
.mobile-dock a>span {
  color:inherit;
  font-size:9px;
  line-height:1.1;
}
.mobile-dock a:hover .ui-icon,
.mobile-dock a:focus-visible .ui-icon,
.mobile-dock a[aria-current="page"] .ui-icon {
  color:#ffe49a;
  filter:drop-shadow(0 0 7px rgba(240,201,111,.4));
  transform:translateY(-1px);
}
.efficient-market .catalog-toolbar button:before { content:none!important; display:none!important; }
.market-filter-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(238,207,125,.56);
  border-radius:10px;
  color:#fff0b7;
  background:radial-gradient(circle at 35% 25%,#61d7b9,#08715f 58%,#082c36);
  box-shadow:inset 0 0 0 2px rgba(2,22,29,.32),0 5px 14px rgba(0,0,0,.2);
}
.market-filter-icon .ui-icon { width:19px; height:19px; }
.efficient-market .catalog-toolbar button[aria-pressed="true"] .market-filter-icon {
  color:#fff8d7;
  border-color:#ffe49a;
  box-shadow:inset 0 0 0 2px rgba(2,22,29,.28),0 0 18px rgba(117,221,191,.28);
}
.collection-category-mark .ui-icon { width:27px; height:27px; }
.collection-category-grid>a:hover .collection-category-mark,
.collection-category-grid>a:focus-visible .collection-category-mark {
  color:#fff9dc;
  border-color:#ffe49a;
  box-shadow:inset 0 0 0 3px rgba(2,24,31,.34),0 0 24px rgba(117,221,191,.28);
}
.arcade-trial-art>b .trial-icon { width:21px; height:21px; }
.trial-sigil .trial-icon { width:29px; height:29px; }
.trial-feedback-banner>span .trial-icon,
.trial-complete-crest .trial-icon { width:42px; height:42px; }
.arcade-trial-art>b,
.trial-sigil,
.trial-feedback-banner>span,
.trial-complete-crest {
  color:#fff0ad;
  box-shadow:inset 0 0 0 2px hsla(var(--trial-hue),70%,72%,.08),0 0 28px hsla(var(--trial-hue),75%,60%,.28);
}
@media(max-width:1240px) and (min-width:901px) {
  .topbar { gap:16px; }
  .topbar nav { gap:11px; }
  .topbar nav a { gap:3px; font-size:13px; }
}
.page-back .ui-icon,
.mythic-trial-hud>.icon-button .ui-icon { width:22px; height:22px; }
.back-to-top .ui-icon { width:20px; height:20px; color:#ffe49a; }
[data-lives] { display:inline-flex!important; align-items:center; justify-content:center; gap:2px; }
.ward-shield-icon { width:14px; height:14px; color:#ffe49a; }

/* Refined Pharmacy Land crest and wordmark */
.brand { gap:10px; }
.brand-mark {
  width:48px;
  height:48px;
  flex:0 0 48px;
  position:relative;
  border:0;
  background:transparent;
  color:#ffe6a0;
  box-shadow:none;
}

/* Release guards: keep source art at native-or-smaller size and prevent the
   specimen caption from covering the adjacent answer controls. */
.relic-card > img {
  box-sizing: border-box;
  width: min(100%, 190px) !important;
  max-width: 190px;
  height: 190px !important;
  padding: 12px !important;
  justify-self: center;
}
.al-specimen {
  overflow: hidden;
}
.al-specimen figcaption {
  pointer-events: none;
}
.al-wordbank {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.brand-mark::after { display:none; }
.brand-mark img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(103,231,192,.15));
}
.brand-wordmark { display:grid;gap:0;line-height:1; }
.brand-wordmark b { color:#fff8e6;font:700 20px/1 Georgia,serif;letter-spacing:.01em; }
.brand-wordmark small { margin-top:4px;color:#d3b76e;font:800 8px/1.05 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.17em; }
@media (max-width:1180px) {
  .brand-wordmark small { display:none; }
}
@media (max-width:720px) {
  .brand-mark { width:42px;height:42px;flex-basis:42px; }
  .brand-wordmark b { font-size:17px; }
}



/* PHARMACY_LAND_APOTHECARY_ART_ICON_SYSTEM_V1 */
.apothecary-art-icon,
.nav-art-icon,
.trial-sigil-image {
  display:block;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}
.topbar nav a .nav-art-icon {
  width:25px;
  height:25px;
  padding:2px;
  border:1px solid rgba(240,201,111,.42);
  border-radius:8px;
  background:radial-gradient(circle at 35% 28%,rgba(30,132,108,.78),rgba(5,29,39,.94) 68%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.24));
  transition:transform .18s ease,filter .18s ease,border-color .18s ease;
}
.topbar nav a:hover .nav-art-icon,
.topbar nav a:focus-visible .nav-art-icon,
.topbar nav a[aria-current="page"] .nav-art-icon {
  transform:translateY(-1px) scale(1.06);
  border-color:#ffe49a;
  filter:drop-shadow(0 0 8px rgba(240,201,111,.42));
}
.mobile-dock a .nav-art-icon {
  width:27px;
  height:27px;
  padding:2px;
  border:1px solid rgba(240,201,111,.42);
  border-radius:9px;
  background:radial-gradient(circle at 35% 28%,rgba(30,132,108,.78),rgba(5,29,39,.94) 68%);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.3));
}
.mobile-dock a:hover .nav-art-icon,
.mobile-dock a:focus-visible .nav-art-icon,
.mobile-dock a[aria-current="page"] .nav-art-icon {
  transform:translateY(-1px) scale(1.06);
  border-color:#ffe49a;
  filter:drop-shadow(0 0 8px rgba(240,201,111,.42));
}
.market-filter-icon {
  overflow:hidden;
  isolation:isolate;
}
.market-filter-icon .apothecary-art-icon {
  width:27px;
  height:27px;
  transform:scale(.9);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
}
.efficient-market .catalog-toolbar button[aria-pressed="true"] .apothecary-art-icon {
  transform:scale(1);
  filter:drop-shadow(0 0 7px rgba(255,228,154,.45));
}
.collection-category-mark {
  overflow:hidden;
  isolation:isolate;
}
.collection-category-mark .apothecary-art-icon {
  width:40px;
  height:40px;
  transform:scale(.92);
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.3));
  transition:transform .18s ease,filter .18s ease;
}
.collection-category-grid>a:hover .apothecary-art-icon,
.collection-category-grid>a:focus-visible .apothecary-art-icon {
  transform:scale(1.02);
  filter:drop-shadow(0 0 9px rgba(240,201,111,.38));
}
.legendary-trial-library .arcade-trial-art img,
.arcade-library .arcade-card img {
  padding:0;
  object-fit:cover;
  object-position:center;
  background:#061b25;
}
.trial-sigil,
.trial-feedback-banner>span,
.trial-complete-crest {
  overflow:hidden;
  padding:0;
}
.trial-sigil-image {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.18);
  filter:saturate(1.08) contrast(1.05);
}
@media(max-width:1240px) and (min-width:901px) {
  .topbar nav a .nav-art-icon { width:21px; height:21px; }
}
@media(max-width:700px) {
  .mobile-dock a { gap:2px; }
}

/* PHARMACY_LAND_PRIMARY_NAV_ALIGNMENT_V1
   Keep every illustrated tile and its label on one optical row. */
.topbar nav {
  align-items:center;
}
.topbar nav a {
  display:grid;
  grid-template-columns:29px max-content;
  align-items:center;
  column-gap:7px;
  min-height:45px;
  padding:7px 9px;
  line-height:1;
}
.topbar nav a .nav-art-icon {
  box-sizing:border-box;
  width:29px;
  height:29px;
  margin:0;
  align-self:center;
  transform:none;
}
.topbar nav a>span {
  display:flex;
  align-items:center;
  min-height:29px;
  line-height:1;
}
.topbar nav a:hover .nav-art-icon,
.topbar nav a:focus-visible .nav-art-icon,
.topbar nav a[aria-current="page"] .nav-art-icon {
  transform:none;
}
@media(max-width:1240px) and (min-width:901px) {
  .topbar nav a {
    grid-template-columns:25px max-content;
    column-gap:5px;
  }
  .topbar nav a .nav-art-icon {
    width:25px;
    height:25px;
  }
  .topbar nav a>span {
    min-height:25px;
  }
}