/* src/app/theme.css */
:root {
  color-scheme: dark;
  --page: #090b0a;
  --surface: #111512;
  --surface-raised: #1a211c;
  --surface-hover: #253129;
  --surface-active: #303f34;
  --text: #f0eee5;
  --text-heading: #faf6e9;
  --text-muted: #b9c2b5;
  --text-disabled: #9ba699;
  --border: #343f36;
  --border-strong: #64735f;
  --accent: #b8d2a6;
  --accent-hover: #d3e5c7;
  --accent-surface: #354b39;
  --accent-surface-hover: #405d45;
  --accent-surface-active: #4c6b50;
  --on-accent: #f2f6e9;
  --gold: #e4c48d;
  --gold-surface: #28251c;
  --danger: #f3aa9d;
  --focus: #f0c982;
  accent-color: var(--accent);
  background: var(--page);
  color: var(--text);
}
::selection {
  color: var(--text-heading);
  background: var(--accent-surface);
}
a {
  color: var(--accent);
  text-underline-offset: .2em;
}
a:visited {
  color: var(--accent);
}
a:hover {
  color: var(--accent-hover);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
input,
select,
textarea {
  caret-color: var(--gold);
}
option {
  color: var(--text);
  background: var(--surface-raised);
}
h1,
h2,
h3,
h4,
.brand {
  color: var(--text-heading);
}
[role=alert] {
  color: var(--danger);
}

/* src/app/visuals.css */
.game-art {
  display: inline-block;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: #101612;
  isolation: isolate;
}
.game-art img {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: fill;
}
.pet-portrait,
.hero-portrait {
  width: 100%;
  aspect-ratio: 1;
}
.skill-icon,
.item-icon {
  width: 2.8rem;
  height: 2.8rem;
  vertical-align: middle;
  border-radius: 7px;
}
.game-shell,
.travel-journal,
.reward-shell {
  --surface: #101411;
  --surface-raised: #191f1a;
}
.game-shell.local-play,
.game-shell.party,
.game-shell.workshop,
.game-shell.summon {
  max-width: 82rem;
  padding-inline: clamp(1rem, 3.2vw, 2.5rem);
}
.game-shell.local-play main,
.game-shell.party main,
.game-shell.workshop main,
.game-shell.summon main {
  max-width: 68rem;
  padding-top: 1.5rem;
}
.game-shell .masthead {
  align-items: center;
  gap: .6rem 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.game-shell .masthead .brand {
  font-size: 1.6rem;
  letter-spacing: .1em;
}
.game-shell .masthead p:first-child {
  font-size: .75rem;
  letter-spacing: .12em;
}
.game-shell .source {
  max-width: 24rem;
  color: var(--text-muted);
  font-size: .72rem;
}
.game-shell .status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  padding-block: .65rem;
  font-size: .8125rem;
}
.game-shell .status-strip > p:first-child {
  flex: 1;
}
.game-shell .status-strip .action {
  margin: 0;
}
.game-shell .status-strip button {
  padding: .35rem .7rem;
  font-size: .8125rem;
}
.game-shell h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  letter-spacing: .07em;
}
.game-shell button {
  border-radius: 6px;
}
.game-shell button.primary {
  color: #f7edcf;
  background: #4b422b;
  border-color: #9b8350;
}
.game-shell button.primary:hover:enabled {
  background: #625336;
}
.game-shell button.primary:disabled {
  color: var(--text-disabled);
  background: var(--surface-raised);
  border-color: var(--border);
}
.game-shell .bottom-nav {
  max-width: 68rem;
  gap: .5rem;
  padding-top: .7rem;
  border-top: 1px solid #786440;
  background: #101411;
}
.game-shell .bottom-nav button {
  border-radius: 6px;
  color: var(--text-muted);
}
.game-shell .bottom-nav button[aria-current] {
  color: #f4dfb1;
  background: #302b20;
}
.game-shell footer {
  max-width: 68rem;
  margin-inline: auto;
  text-align: start;
  color: var(--text-muted);
}
.game-shell main > a {
  display: inline-flex;
  margin-inline-end: 1rem;
}
.scene-banner {
  position: relative;
  min-height: 17rem;
  overflow: hidden;
  border: 1px solid #4b4a35;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  background: #0b1110;
}
.scene-banner .scene-art {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.scene-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #080d0bf5 0%,
      #080d0bd9 44%,
      #080d0b24 100%);
}
.scene-caption {
  position: relative;
  z-index: 1;
  max-width: 35rem;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.scene-caption h1,
.scene-caption h2 {
  color: #faf3e2;
  margin-block: .65rem .6rem;
}
.scene-caption .scene-kicker {
  color: #e7ca94;
  font-size: .72rem;
  letter-spacing: .2em;
  margin: 0;
}
.scene-caption .scene-description {
  color: #dedfd0;
  font-size: .9rem;
  line-height: 1.9;
}
.resource-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  padding: .65rem 0 1rem;
  margin-bottom: .4rem;
}
.resource-token {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--text-muted);
  min-width: 0;
}
.resource-token .item-icon {
  width: 2rem;
  height: 2rem;
}
.resource-token strong {
  color: #f1dfb7;
  font-size: .95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.companion-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block: .5rem 1.5rem;
}
.game-shell a.companion-card {
  display: block;
  position: relative;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #3d473a;
  border-radius: 10px;
  text-decoration: none;
  background: #101612;
}
.companion-card .game-art {
  display: block;
}
.companion-card .companion-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(transparent, #0a100cf5 55%);
}
.companion-caption h3 {
  margin: .2rem 0;
  color: #faf1dc;
  font-size: 1.1rem;
}
.companion-caption p {
  margin: 0;
  font-size: .75rem;
  color: #d3c6a8;
}
.portrait-tag {
  color: #e3c78f;
  font-size: .7rem;
  letter-spacing: .08em;
}
.companion-card.hero-card {
  border-color: #6e5c3b;
}
.companion-card:focus-visible,
.companion-card:hover {
  border-color: #c4a36d;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-block: 1.3rem 2rem;
}
.game-shell .quick-links a {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  min-height: 5rem;
  padding: .8rem 1rem;
  color: var(--text);
  background: #181e19;
  border: 1px solid #354034;
  border-radius: 8px;
  text-decoration: none;
}
.quick-links a > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.quick-links strong,
.quick-links small {
  display: block;
}
.quick-links strong {
  font-family:
    "Noto Serif SC",
    "Songti SC",
    SimSun,
    serif;
  font-size: 1.05rem;
  font-weight: 600;
}
.quick-links small {
  color: var(--text-muted);
  font-size: .75rem;
  margin-top: .15rem;
}
.quick-links .quick-arrow {
  color: var(--gold);
}
.game-shell .quick-links a:hover {
  background: #232b23;
  border-color: #7c7253;
}
.game-shell .chapter,
.game-shell .party-section,
.game-shell .work-section,
.game-shell .summon-section {
  border-color: #354034;
}
.game-shell .formation-strip {
  gap: 1rem;
}
.game-shell .formation-strip li {
  position: relative;
  gap: 0;
  padding: 0 0 1rem;
  border: 1px solid #4a4935;
  border-radius: 10px;
  overflow: hidden;
  background: #151b16;
}
.formation-strip li > small,
.formation-strip li > strong,
.formation-strip li > span:not(.game-art) {
  margin-inline: 1rem;
}
.formation-strip li > small {
  margin-top: .55rem;
}
.game-shell .formation-strip .game-art {
  width: 100%;
  margin: 0;
}
.game-shell .formation-strip strong {
  color: #f4ead6;
}
.game-shell .party-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: .7rem;
}
.game-shell .party-tabs button,
.game-shell .work-tabs button {
  border-radius: 6px;
}
.game-shell .party-tabs button[aria-current],
.game-shell .work-tabs button[aria-current] {
  color: #f1dfb7;
  background: #342d20;
  border-color: #79613b;
}
.game-shell .catalog-filters {
  margin-block: 1rem;
}
.pet-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  margin-top: 1.2rem;
}
.game-shell details.catalog-card {
  min-width: 0;
  margin: 0;
  border: 1px solid #3a463b;
  border-radius: 9px;
  overflow: hidden;
  background: #161d17;
}
.game-shell details.catalog-card.is-owned {
  border-color: #a2884e;
}
.game-shell details.catalog-card > summary {
  display: block;
  padding: 0;
  position: relative;
  list-style: none;
}
.catalog-card > summary::-webkit-details-marker {
  display: none;
}
.catalog-card .pet-portrait {
  display: block;
}
.catalog-caption {
  display: grid;
  gap: .12rem;
  padding: .8rem 1rem 1rem;
  position: relative;
  background: #161d17;
}
.catalog-caption strong {
  color: #f8f0db;
  font-size: 1.1rem;
  font-family:
    "Songti SC",
    SimSun,
    serif;
}
.catalog-caption small {
  color: #c5c9ba;
  font-size: .75rem;
}
.catalog-caption::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  color: #d4bd8a;
}
.catalog-card[open] .catalog-caption::after {
  content: "−";
}
.catalog-card > :not(summary) {
  margin-inline: 1rem;
  font-size: .8125rem;
}
.catalog-card .skill-strip {
  margin-block: .3rem .8rem;
}
.catalog-card .skill-token {
  justify-content: start;
}
.game-shell .catalog-card[open] {
  grid-column: span 2;
}
.game-shell .catalog-card[open] > summary .pet-portrait {
  width: min(16rem, 100%);
  margin-inline: auto;
}
.skill-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-block: 1rem;
}
.owned-pet-portrait {
  float: left;
  max-width: 12rem;
  margin: 0 1.3rem 1rem 0;
  border-radius: 8px;
}
.chapter:has(.owned-pet-portrait) {
  display: flow-root;
}
.skill-library label {
  display: grid;
  gap: .4rem;
  max-width: 28rem;
}
.skill-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: .75rem;
}
.game-shell .skill-library-grid details {
  margin: 0;
  border: 1px solid #3b493b;
  background: #192019;
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.game-shell .skill-library-grid summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
}
.skill-library-grid summary > span:last-child {
  min-width: 0;
}
.skill-library-grid strong,
.skill-library-grid small {
  display: block;
}
.skill-library-grid strong {
  font-size: .95rem;
  color: #e9d4aa;
}
.skill-library-grid small {
  color: #bec7b7;
  font-size: .75rem;
}
.skill-library-grid details > p,
.skill-library-grid details > small {
  margin: .5rem .8rem .9rem;
  font-size: .8125rem;
}
.skill-library-grid details[hidden] {
  display: none;
}
.skill-token {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #dedacb;
  font-size: .75rem;
}
.skill-token .skill-icon {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid #6b6447;
}
.workshop .pet-summary {
  display: flow-root;
  padding: 1.3rem;
  border: 1px solid #494d37;
  border-radius: 10px;
  background: #151c16;
  margin-block: 1.25rem;
}
.game-shell.workshop .workshop-portrait {
  float: left;
  width: min(35%, 18rem);
  margin: 0 1.7rem 1rem 0;
  border: 1px solid #474f3c;
  border-radius: 8px;
}
.game-shell.workshop .pet-summary > label {
  margin-top: 0;
}
.workshop .pet-summary .panel-list {
  grid-template-columns: max-content 1fr max-content 1fr;
  max-width: 28rem;
}
.game-shell .work-tabs {
  gap: .5rem;
  padding-block: .8rem;
  border-width: 1px;
}
.game-shell .skill-detail {
  display: flow-root;
  padding: 1rem;
  margin-block: .8rem;
  background: #181f19;
  border: 1px solid #3d493b;
  border-radius: 8px;
}
.skill-detail > .skill-icon {
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 .8rem .4rem 0;
  border: 1px solid #9e8450;
}
.game-shell .skill-detail h3 {
  margin-top: .15rem;
  color: #ebd2a3;
}
.skill-detail p {
  color: var(--text-muted);
  font-size: .8125rem;
}
.workshop summary .skill-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin-right: .7rem;
}
.cost-list dt .item-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .35rem;
}
.starter-portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 38rem;
  gap: 1rem;
  margin-block: 1.25rem;
}
.starter-portraits figure {
  min-width: 0;
  margin: 0;
  border: 1px solid #625d3f;
  border-radius: 8px;
  overflow: hidden;
  background: #161d17;
}
.starter-portraits .game-art {
  display: block;
}
.starter-portraits figcaption {
  color: #eed3a0;
  padding: .65rem 1rem;
  font-size: .875rem;
}
.wish-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
  margin-block: 1rem 1.5rem;
}
.game-shell .wish-gallery button {
  padding: 0;
  min-width: 0;
  background: #151b16;
  overflow: hidden;
  border-color: #414d3e;
}
.wish-gallery .game-art {
  display: block;
}
.wish-gallery strong,
.wish-gallery small {
  display: block;
  padding: .25rem;
  font-size: .75rem;
}
.wish-gallery small {
  color: var(--text-muted);
  padding-bottom: .6rem;
}
.game-shell .wish-gallery button[aria-pressed=true] {
  border-color: #e0bc75;
  background: #30291d;
}
.game-shell .wish-gallery button:disabled {
  opacity: .65;
}
.summon-results > li {
  display: flow-root;
}
.summon-results .pet-portrait {
  float: left;
  width: 8rem;
  margin: 0 1rem 1rem 0;
  border: 1px solid #806e48;
  border-radius: 8px;
}
.travel-journal .scene-banner {
  min-height: 15rem;
}
.travel-journal .journal-current {
  border: 1px solid #556043;
  border-radius: 9px;
}
.travel-journal .journal-companion > .pet-portrait {
  float: left;
  width: 9rem;
  margin: 0 1.25rem 1rem 0;
  border-radius: 9px;
}
.travel-journal .journal-companion {
  display: flow-root;
}
.reward-shell .reward-entry h2::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-right: .6rem;
  vertical-align: middle;
  background: url("/assets/art/items-T2JGP7PD.webp") 33.333% 0 / 400% 400%;
  border-radius: 7px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .companion-card .game-art img,
  .catalog-card .game-art img {
    transition: filter 160ms ease-out;
  }
  .companion-card:hover img,
  .catalog-card > summary:hover img {
    filter: brightness(1.1);
  }
}
@media (max-width: 48rem) {
  .pet-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
  }
  .wish-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .scene-banner {
    min-height: 14rem;
  }
  .scene-caption {
    max-width: 27rem;
  }
  .game-shell .source {
    max-width: 20rem;
  }
  .companion-showcase {
    gap: .6rem;
  }
  .companion-caption h3 {
    font-size: .95rem;
  }
}
@media (max-width: 34rem) {
  .game-shell.local-play,
  .game-shell.party,
  .game-shell.workshop,
  .game-shell.summon {
    padding-inline: 1rem;
  }
  .game-shell .masthead {
    padding-block: .8rem;
  }
  .game-shell .masthead .source {
    font-size: .65rem;
  }
  .game-shell .status-strip > p:first-child {
    flex-basis: 100%;
  }
  .scene-banner {
    min-height: 14.5rem;
    border-radius: 8px;
  }
  .scene-banner::after {
    background:
      linear-gradient(
        90deg,
        #080d0bed,
        #080d0b85);
  }
  .scene-caption {
    padding: 1.5rem 1.1rem;
  }
  .scene-caption .scene-description {
    font-size: .8125rem;
    max-width: 18rem;
  }
  .companion-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-shell a.companion-card.hero-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 40% 1fr;
  }
  .companion-card.hero-card .companion-caption {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .75rem;
    background: #171c15;
  }
  .companion-caption {
    padding-inline: .75rem;
  }
  .quick-links {
    gap: .5rem;
  }
  .game-shell .quick-links a {
    padding: .7rem .6rem;
    gap: .4rem;
    flex-wrap: wrap;
  }
  .quick-links .item-icon {
    width: 2rem;
    height: 2rem;
  }
  .quick-links strong {
    font-size: .9rem;
  }
  .quick-links small {
    font-size: .65rem;
  }
  .quick-links .quick-arrow {
    display: none;
  }
  .resource-bar {
    gap: .45rem 1rem;
  }
  .resource-token {
    font-size: .7rem;
  }
  .pet-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-caption {
    padding: .65rem .75rem;
  }
  .catalog-caption::after {
    right: .7rem;
  }
  .game-shell .catalog-card[open] {
    grid-column: 1 / -1;
  }
  .game-shell .formation-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }
  .game-shell .formation-strip li {
    display: flex;
    flex-direction: column;
  }
  .formation-strip li > small,
  .formation-strip li > strong,
  .formation-strip li > span:not(.game-art) {
    margin-inline: .5rem;
    font-size: .75rem;
  }
  .game-shell.workshop .workshop-portrait {
    float: none;
    display: block;
    width: min(100%, 19rem);
    margin: 0 auto 1.2rem;
  }
  .workshop .pet-summary .panel-list {
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: .2rem .6rem;
  }
  .game-shell .work-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-shell .party-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skill-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  .game-shell .skill-library-grid summary {
    gap: .4rem;
    padding: .6rem;
    flex-wrap: wrap;
  }
}
@media (max-width: 22rem) {
  .quick-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .resource-token span:not(.game-art) {
    max-width: 5rem;
  }
  .workshop .pet-summary .panel-list {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
.innate-token {
  border: 1px solid var(--accent, #8b6a36);
}
.pet-signature {
  margin-block: .65rem;
}
.pet-signature summary {
  cursor: pointer;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pet-signature p {
  overflow-wrap: anywhere;
}

/* src/app/leaderboards/style.css */
.leaderboards {
  width: min(52rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  min-width: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1.5rem 5rem #17271e40;
  overflow: hidden;
}
.leaderboards[open] {
  display: flex;
  flex-direction: column;
}
.leaderboards::backdrop {
  background: #14251dc2;
}
.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
  padding: .85rem clamp(.9rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}
.leaderboard-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
}
.leaderboard-heading h2 {
  margin: 0;
  color: var(--text-heading);
  font-family:
    "Noto Serif SC",
    "Songti SC",
    SimSun,
    serif;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 500;
}
.leaderboards .leaderboard-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: transparent;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
}
.leaderboard-content {
  min-height: 0;
  padding: .2rem clamp(.9rem, 3vw, 1.5rem) 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.leaderboard-heading > span {
  color: var(--gold);
  font-size: .8rem;
}
.leaderboard-note,
.leaderboard-status {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.7;
}
.leaderboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.leaderboard-controls button {
  min-height: 44px;
  flex: 1 1 auto;
  padding: .6rem .7rem;
}
.leaderboard-controls button[aria-pressed=true] {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-surface);
}
.leaderboard-self {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  font-variant-numeric: tabular-nums;
}
.leaderboard-self:not(:empty) {
  padding: .9rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--gold);
  background: var(--gold-surface);
}
.leaderboard-self strong {
  color: var(--gold);
  font-size: 1.25rem;
}
.leaderboard-self > span:last-child {
  color: var(--text-muted);
  font-size: .88rem;
}
.leaderboard-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.leaderboard-table caption {
  text-align: left;
  color: var(--text-muted);
  font-size: .85rem;
  padding-bottom: .75rem;
}
.leaderboard-table th,
.leaderboard-table td {
  padding: .85rem .45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  overflow-wrap: anywhere;
}
.leaderboard-table th {
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 500;
}
.leaderboard-table th:first-child {
  width: 16%;
}
.leaderboard-table th:last-child {
  width: 30%;
}
.leaderboard-table[data-kind=arena] th:first-child {
  width: 12%;
}
.leaderboard-table[data-kind=arena] th:nth-child(3) {
  width: 18%;
}
.leaderboard-table[data-kind=arena] th:last-child {
  width: 25%;
}
.leaderboard-titles {
  margin: .5rem 0 1rem;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.8;
}
.leaderboard-table td:first-child {
  color: var(--gold);
  font-weight: 650;
}
.leaderboard-table .is-self {
  background: var(--accent-surface);
  color: var(--on-accent);
}
.leaderboard-empty {
  padding: 1.4rem .5rem;
  border: 1px dashed var(--border-strong);
  text-align: center;
}
.leaderboard-empty h3 {
  color: var(--gold);
  margin: .3rem 0;
}
.leaderboard-empty p {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.7;
}
@media (max-width: 420px) {
  .leaderboard-self > span:last-child {
    flex-basis: 100%;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: .7rem .3rem;
    font-size: .8rem;
  }
}

/* src/app/style.css */
:root {
  color-scheme: dark;
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
  font-size: 100%;
  color: var(--text);
  background: var(--page);
  line-height: 1.75;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
summary,
input {
  font: inherit;
}
button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  overflow-wrap: anywhere;
}
button:hover:enabled {
  background: var(--surface-hover);
}
button:active:enabled {
  background: var(--surface-active);
}
button:disabled {
  color: var(--text-disabled);
  border-color: var(--border);
  background: var(--surface-raised);
  cursor: default;
}
button.primary {
  background: var(--accent-surface);
  color: var(--on-accent);
  border-color: var(--border-strong);
}
button.primary:hover:enabled {
  background: var(--accent-surface-hover);
}
button.primary:disabled {
  background: var(--surface-raised);
  color: var(--text-disabled);
  border-color: var(--border);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
h1:focus,
[role=status]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
}
h1,
h2,
.brand {
  font-family:
    "Noto Serif SC",
    "Songti SC",
    SimSun,
    serif;
  font-weight: 600;
}
h1 {
  margin: .15rem 0 .6rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: .1em;
  line-height: 1.4;
}
h2 {
  font-size: 1.25rem;
  margin: 0 0 .8rem;
  letter-spacing: .04em;
}
p {
  margin: .6rem 0;
  overflow-wrap: anywhere;
}
small {
  font-size: .8125rem;
  line-height: 1.6;
}
.game-shell {
  max-width: 58rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  background: var(--surface);
  border-inline: 1px solid var(--border);
}
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .3rem 2rem;
  padding: 1.6rem 0 1rem;
  border-bottom: 2px solid var(--border-strong);
}
.eyebrow {
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0;
}
.brand {
  font-size: 1.6rem;
  letter-spacing: .16em;
  margin: .15rem 0 0;
}
.source {
  font-size: .8125rem;
  max-width: 20rem;
  color: var(--gold);
  margin: 0;
}
.status-strip {
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.status-strip p {
  margin: .25rem 0;
}
.status-actions:empty {
  display: none;
}
.status-actions .action {
  margin: .5rem 0;
}
main {
  padding: 1.8rem 0 1rem;
}
.lead {
  color: var(--text-muted);
  margin: .4rem 0 1.8rem;
  max-width: 36rem;
}
.chapter {
  margin: 0 0 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.muted {
  color: var(--text-muted);
}
.party-list {
  padding: 0;
  list-style: none;
  margin: .7rem 0;
}
.party-list li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px dotted var(--border);
  overflow-wrap: anywhere;
}
.party-list li > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.position {
  color: var(--gold);
  font-size: .8125rem;
  flex-shrink: 0;
}
.party-list small {
  color: var(--text-muted);
  flex-shrink: 0;
}
.resource-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem 1rem;
  max-width: 26rem;
}
.resource-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.party-editor {
  border-top: 1px solid var(--border);
  margin-bottom: 2rem;
  padding-top: 1rem;
}
.party-editor label {
  display: grid;
  gap: .3rem;
  margin-block: .8rem;
}
.party-editor select {
  font: inherit;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .5rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--text);
  background: var(--surface);
}
.action {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: .25rem;
  margin: .8rem 0;
}
.action small {
  color: var(--text-muted);
}
details {
  margin-top: 1rem;
  border-block: 1px solid var(--border);
}
details + details {
  border-top: 0;
  margin-top: 0;
}
summary {
  padding: .7rem .25rem;
  min-height: 44px;
  color: var(--accent);
  cursor: pointer;
  overflow-wrap: anywhere;
}
details p,
details .action {
  margin-inline: .5rem;
}
footer {
  padding: .7rem 0 1.5rem;
  color: var(--text-muted);
  font-size: .8125rem;
}
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: .6rem 0 max(.6rem, env(safe-area-inset-bottom));
  border-top: 2px solid var(--border-strong);
  background: var(--surface);
}
.bottom-nav button {
  padding: .5rem .25rem;
  border: 0;
  border-radius: 0;
}
.bottom-nav button[aria-current=page] {
  background: var(--accent-surface);
  color: var(--on-accent);
}
.skip {
  position: fixed;
  top: -10rem;
  left: 1rem;
  z-index: 4;
  padding: .7rem;
  background: var(--surface);
  color: var(--accent);
}
.skip:focus {
  top: 1rem;
}
@media (min-width: 48rem) {
  main {
    max-width: 40rem;
    margin-inline: auto;
  }
  .bottom-nav {
    max-width: 40rem;
    margin-inline: auto;
  }
  footer {
    text-align: center;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button {
    transition: background-color 120ms ease-out;
  }
}

/* src/app/battle-report/style.css */
.battle-report {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.battle-report [hidden] {
  display: none !important;
}
.battle-report h2 {
  margin: .2rem 0 .6rem;
}
.report-outcome {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: .7rem;
}
.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0;
}
.report-controls button {
  min-width: 44px;
}
.report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.4rem;
}
.report-stats article {
  min-width: 0;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.report-stats h3 {
  margin: .3rem 0;
  font-size: 1.0625rem;
}
.report-stats dl {
  margin: .6rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem .6rem;
}
.report-stats dt {
  min-width: 0;
}
.report-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  max-width: 9ch;
}
.report-note {
  color: var(--text-muted);
}
.report-lines {
  padding-inline-start: 1.6rem;
}
.report-lines li {
  margin: .6rem 0;
  padding-inline-start: .15rem;
}
.report-audit {
  border: 0;
  margin-inline: .4rem;
}
.report-audit code {
  font-family: inherit;
  font-size: .875rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-lines,
.report-audit-lines > p {
  content-visibility: auto;
  contain-intrinsic-size: auto 8rem;
}
.report-lines[aria-busy=true]::after,
.report-audit-lines[aria-busy=true]::after {
  content: "正在展开已结算记录…";
  display: block;
  color: var(--text-muted);
  margin-block: .6rem;
}
.battle-report summary,
.battle-report button {
  min-height: 44px;
}
.battle-report :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 24rem) {
  .report-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* src/app/battle-feed/style.css */
.battle-feed {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.battle-feed[hidden] {
  display: none;
}
.battle-feed-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.battle-feed-header h2 {
  margin: 0;
}
.battle-feed-progress,
.battle-feed-title,
.battle-feed-note {
  color: var(--text-muted);
  font-size: .75rem;
}
.battle-feed-title {
  margin-block: .25rem .6rem;
}
.battle-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: .75rem;
  padding-block: .75rem .25rem;
  border-block: 1px solid var(--border);
}
.battle-vitals[hidden] {
  display: none;
}
.battle-team {
  min-width: 0;
}
.battle-feed .battle-team h3 {
  margin: 0 0 .5rem;
  color: var(--text-muted);
  font: 500 .75rem/1.4 "Microsoft YaHei", sans-serif;
}
.battle-unit-list {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.battle-unit {
  min-width: 0;
  min-height: 2.4rem;
}
.battle-unit-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem;
  margin-bottom: .25rem;
}
.battle-unit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .75rem;
  line-height: 1.4;
}
.battle-unit-value {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: .6875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.battle-unit-track {
  height: .4375rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-raised);
}
.battle-unit-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #9ebfa7;
  transition: width .22s ease-out;
}
.battle-team[data-side=enemy] .battle-unit-fill {
  background: #c5918b;
}
.battle-unit[data-state=low] .battle-unit-fill {
  background: #d0ac6f;
}
.battle-unit[data-state=down] .battle-unit-name {
  color: var(--text-disabled);
}
.battle-unit-shield {
  display: block;
  margin-top: .15rem;
  color: #a5bfd0;
  font-size: .625rem;
  line-height: 1.1;
}
.battle-unit-shield[hidden] {
  display: none;
}
.battle-unit[data-state=down] .battle-unit-shield {
  color: var(--danger);
}
.battle-feed-status {
  margin-block: .5rem;
  color: var(--accent);
  font-size: .875rem;
}
.battle-feed-lines {
  height: clamp(10rem, 28vh, 17rem);
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: .6rem 0;
  padding: 0 .65rem;
  border-block: 1px solid var(--border);
  list-style: none;
  scrollbar-gutter: stable;
}
.battle-feed-lines:empty {
  display: none;
}
.battle-feed-lines li {
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr);
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  font-size: .8125rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.feed-round {
  color: var(--text-muted);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}
.feed-side {
  display: inline-block;
  margin-right: .45rem;
  padding: 0 .25rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .6875rem;
}
.battle-feed-lines li[data-side=enemy] .feed-side {
  color: var(--danger);
}
.battle-feed-lines li[data-kind=action] {
  color: var(--accent);
}
.battle-feed-lines li[data-kind=defeated] {
  color: var(--danger);
}
.battle-feed-lines li[data-kind=battle_finished] {
  color: var(--gold);
  font-weight: 600;
}
.battle-feed-note {
  display: block;
  margin-top: .5rem;
}
.adventure-session > .battle-feed {
  flex-basis: 100%;
  margin-top: .75rem;
}
.adventure-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  flex-basis: 100%;
}
.local-play .adventure-heading h2 {
  margin: 0;
}
.adventure-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: .5rem;
}
.adventure-actions .action {
  margin: 0;
}
.local-play .adventure-session > p {
  margin-block: .3rem;
  font-size: .8125rem;
}
.local-play main > .battle-feed {
  margin-block: 1rem;
}
@media (max-width: 40rem) {
  .battle-feed {
    padding: .75rem;
  }
  .battle-vitals {
    gap: .75rem;
  }
  .battle-unit-name {
    font-size: .6875rem;
  }
  .battle-unit-value {
    font-size: .625rem;
  }
  .battle-feed-lines {
    max-height: 15rem;
    padding-inline: .25rem;
  }
  .battle-feed-lines li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: .35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .battle-unit-fill {
    transition: none;
  }
}

/* src/app/local-play/style.css */
.local-play .masthead {
  align-items: start;
}
.local-play .masthead p:first-child {
  margin: 0;
  letter-spacing: .13em;
  color: var(--gold);
}
.local-play {
  max-width: 70rem;
}
.local-play main {
  max-width: 48rem;
}
.local-play .chapter {
  margin-block: 1.8rem;
}
.local-play .commission {
  border-bottom: 1px dotted var(--border);
  padding-block: .7rem 1rem;
}
.local-play h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
.local-play form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1rem;
  margin-block: 1.4rem;
}
.local-play form p,
.local-play form button,
.local-play form h3 {
  grid-column: 1/-1;
}
.local-play label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.local-play input[type=number] {
  display: block;
  width: 100%;
  min-height: 44px;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: .5rem;
  background: var(--surface-raised);
  color: var(--text);
}
.local-play input[type=checkbox] {
  min-width: 24px;
  min-height: 24px;
}
.local-play select {
  font: inherit;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: .5rem;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--surface-raised);
  color: var(--text);
}
.local-play a {
  display: flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding-block: .4rem;
  overflow-wrap: anywhere;
}
.local-play .battle-report {
  margin-top: 2rem;
}
.local-play .status-strip .action {
  margin-block: .4rem;
}
.local-play .adventure-session {
  border-block: 2px solid var(--border-strong);
  padding-block: .6rem 1rem;
  margin-block: 1.5rem;
  overflow-wrap: anywhere;
}
.local-play .adventure-session h2 {
  margin-block: .5rem;
}
.game-shell .auto-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-strong);
}
.game-shell .auto-main-status {
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: .8rem;
}
.game-shell .auto-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.game-shell .auto-main-actions .action {
  margin: 0;
}
@media (max-width: 40rem) {
  .game-shell .auto-main {
    align-items: stretch;
    flex-direction: column;
  }
  .game-shell .auto-main-actions .action {
    flex: 1;
  }
  .game-shell .auto-main-actions button {
    width: 100%;
  }
}
.local-play .bottom-nav {
  max-width: 48rem;
}
.local-play :is(code, pre, dd, li) {
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (max-width: 24rem) {
  .local-play form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* src/app/tower/style.css */
.tower-section {
  margin: 1rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  background:
    linear-gradient(
      125deg,
      var(--surface-raised),
      var(--surface));
  color: var(--text);
  border-radius: 6px;
  scroll-margin-top: 5rem;
}
.tower-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
}
.tower-heading h2 {
  margin: 0;
}
.tower-badge {
  font-size: .78rem;
  letter-spacing: .12em;
  padding: .25rem .55rem;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.tower-section progress {
  width: 100%;
  height: .5rem;
  accent-color: var(--gold);
  margin: .25rem 0 .9rem;
}
.tower-section summary {
  cursor: pointer;
  font-weight: 600;
}
.tower-section details {
  margin-top: .9rem;
}
.tower-section h3 {
  margin-top: 1.2rem;
}
.tower-section p {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.tower-enemy {
  margin: .65rem 0;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.tower-enemy h4 {
  margin: 0 0 .4rem;
}
.tower-enemy p {
  margin: .2rem 0;
}
.tower-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: .55rem;
  margin: .8rem 0 1rem;
  font-variant-numeric: tabular-nums;
}
.tower-rewards span {
  padding: .4rem .55rem;
  background: var(--gold-surface);
  color: var(--gold);
  border: 1px solid var(--border);
  font-size: .88rem;
}
.tower-floor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .4rem;
}
.tower-section .tower-floor {
  min-height: 44px;
  padding: .45rem .2rem;
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.tower-floor.cleared {
  background: var(--accent-surface);
  color: var(--on-accent);
}
.tower-floor.available {
  border: 2px solid var(--gold);
  color: var(--gold);
}
.tower-section .tower-floor[aria-pressed=true] {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
@media (max-width: 420px) {
  .tower-floor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* src/app/arena/style.css */
.arena {
  margin: 1.2rem 0;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  background: var(--surface);
  scroll-margin-top: 5rem;
}
.arena > summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--gold);
}
.arena-content {
  padding: 0 clamp(.85rem, 3vw, 1.5rem) 1.2rem;
}
.arena-heading,
.arena-self {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem;
}
.arena-heading h2 {
  margin: .6rem 0;
}
.arena-heading > span {
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  font-size: .8rem;
  color: var(--gold);
}
.arena-self {
  margin: 1rem 0 .5rem;
  padding: 1rem;
  background: var(--gold-surface);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.arena p {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.arena-rule,
.arena-status,
.arena-opponent small {
  color: var(--text-muted);
  font-size: .85rem;
}
.arena-opponents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: .85rem;
}
.arena-opponent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  min-width: 0;
}
.arena-opponent h4 {
  margin: 0;
  color: var(--text);
}
.arena-opponent p {
  margin: .4rem 0;
}
.arena-opponent > button {
  margin-top: auto;
}
.arena-opponent > details {
  margin: .6rem 0 1rem;
}
.arena-opponent small {
  display: block;
  margin-top: .5rem;
}
.arena button {
  min-height: 44px;
}
.arena button:focus-visible,
.arena summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.arena-units {
  margin: .65rem 0;
}
.arena-units > div {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
}
.arena-units p {
  font-size: .85rem;
}
.arena-empty,
.arena-receipt {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
}
.arena table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .88rem;
}
.arena th,
.arena td {
  text-align: left;
  padding: .5rem .35rem;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.arena-history {
  padding-left: 1.3rem;
  line-height: 1.9;
  font-size: .9rem;
}
@media (prefers-reduced-motion: no-preference) {
  .arena-opponent {
    transition: border-color .15s ease;
  }
  .arena-opponent:hover {
    border-color: var(--gold);
  }
}

/* src/app/ruins-theme.css */
:root {
  color-scheme: light;
  --page: #f2efe7;
  --surface: #fbf9f3;
  --surface-raised: #eae7dd;
  --surface-hover: #e8eee6;
  --surface-active: #dce6da;
  --text: #3d453b;
  --text-heading: #263d32;
  --text-muted: #6e7468;
  --text-disabled: #77796f;
  --border: #dcded0;
  --border-strong: #adb8a3;
  --accent: #365f49;
  --accent-hover: #234a35;
  --accent-surface: #e5ecdf;
  --accent-surface-hover: #d5e2ce;
  --on-accent: #2d503b;
  --gold: #8a6338;
  --gold-surface: #f0e7d6;
  --danger: #a34f3f;
  --focus: #b45f3f;
}
.ruins-shell.game-shell {
  --surface: #fbf9f3;
  --surface-raised: #eae7dd;
  --rail: 11.5rem;
  --bar: 4.5rem;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  background: var(--page);
  font-size: .875rem;
  line-height: 1.65;
}
.ruins-shell.game-shell .masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--bar);
  padding: .6rem 1.5rem;
  gap: 1.6rem;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ruins-shell .masthead > div:first-child > p:first-child {
  display: none;
}
.ruins-shell.game-shell .masthead .brand {
  margin: 0;
  white-space: nowrap;
  font-size: 1.4rem;
  letter-spacing: .08em;
}
.ruins-shell.game-shell .masthead .source {
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: .25rem .6rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .7rem;
  letter-spacing: .04em;
}
.traveler-identity {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.traveler-seal {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  background: var(--accent-surface);
  font: 1.2rem SimSun, serif;
}
.traveler-identity strong {
  display: block;
  font-weight: 500;
  font-size: .875rem;
}
.traveler-identity small {
  display: block;
  color: var(--text-muted);
  font-size: .7rem;
}
.header-resources {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem 1.75rem;
  flex: 1;
  margin: 0;
  font-size: .75rem;
}
.header-resources > div {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.header-resources dt {
  color: var(--text-muted);
}
.header-resources dd {
  margin: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
  width: auto;
  max-width: 72rem;
  margin-left: calc(var(--rail) + 2rem);
  margin-right: 2rem;
}
.ruins-shell.game-shell > main {
  padding: 1.25rem 0;
}
.ruins-shell.game-shell > .status-strip {
  padding: .6rem 0;
  font-size: .75rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ruins-shell.game-shell > .status-strip button {
  min-height: 44px;
  padding: .25rem .7rem;
  font-size: .75rem;
}
.ruins-shell.game-shell[data-screen=ready] > .status-quiet {
  display: none;
}
.ruins-shell.game-shell .header-refresh {
  margin: 0;
}
.ruins-shell.game-shell .header-refresh button {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.4rem;
  border-color: transparent;
  color: var(--text-muted);
}
.header-refresh small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ruins-shell.game-shell footer {
  padding: 1rem 0;
  font-size: .7rem;
  text-align: left;
  border-top: 1px solid var(--border);
}
.ruins-shell.game-shell .bottom-nav {
  position: fixed;
  top: var(--bar);
  bottom: 0;
  left: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  width: var(--rail);
  max-width: none;
  margin: 0;
  padding: 1rem .75rem;
  overflow-y: auto;
  background: #263e33;
  border: 0;
  border-right: 1px solid #263e33;
}
.nav-label {
  margin: .2rem .65rem .8rem;
  color: #bdcaba;
  font-size: .7rem;
  letter-spacing: .16em;
}
.ruins-shell.game-shell .bottom-nav :is(button, a) {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: .6rem .75rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #dce5d5;
  background: transparent;
  font-size: .875rem;
  text-align: left;
  text-decoration: none;
}
.ruins-shell.game-shell .bottom-nav :is(button, a):hover {
  background: #355142;
}
.ruins-shell.game-shell .bottom-nav [aria-current] {
  color: #f6f1dc;
  background: #48634c;
  border-color: #6d8161;
}
.nav-glyph {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.5rem;
  color: #d9dec4;
  background: transparent;
  font: 1.2rem SimSun, serif;
}
.nav-tools {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #526152;
}
.nav-tools .nav-glyph {
  color: #e1c999;
  background: transparent;
}
.nav-note {
  margin: auto .65rem 0;
  padding-top: 2rem;
  color: #c3cdb8;
  font-size: .7rem;
}
.ruins-shell.game-shell .bottom-nav .mobile-more {
  display: none;
}
.ruins-shell h1:focus:not(:focus-visible) {
  outline: none;
}
.ruins-shell.game-shell :is(button, input, select) {
  border-radius: 2px;
  font-size: .8125rem;
}
.ruins-shell.game-shell button {
  padding: .5rem .85rem;
}
.ruins-shell.game-shell button.primary {
  background: #a95539;
  border-color: #a95539;
  color: #fff6e8;
}
.ruins-shell.game-shell button.primary:hover:enabled {
  background: #8c432c;
}
.ruins-shell.game-shell button:disabled {
  background: var(--surface-raised);
  color: var(--text-disabled);
  border-color: var(--border);
}
.ruins-shell.game-shell :is(h1, h2) {
  font-family:
    "Noto Serif SC",
    "Songti SC",
    SimSun,
    serif;
  font-weight: 500;
}
.ruins-shell.game-shell h1 {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  letter-spacing: .025em;
}
.ruins-shell.game-shell h2 {
  font-size: 1.15rem;
}
.ruins-shell.game-shell h3 {
  font-size: 1rem;
}
.ruins-shell .scene-banner {
  min-height: 0;
  margin-bottom: 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ruins-shell .scene-banner .scene-art,
.ruins-shell .scene-banner::after {
  display: none;
}
.ruins-shell .scene-caption {
  max-width: none;
  padding: 0;
}
.ruins-shell .scene-caption h1 {
  margin: .25rem 0;
}
.ruins-shell .scene-caption .scene-kicker {
  display: none;
}
.ruins-shell .scene-caption .scene-description {
  margin: .25rem 0 0;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.6;
}
.ruins-shell.game-shell :is(.chapter, .party-section, .work-section, .summon-section, .wish-summary, .adventure-session) {
  margin-block: 1.1rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}
.ruins-shell .resource-bar {
  padding-block: .3rem .75rem;
  gap: .4rem 1.5rem;
}
.ruins-shell .resource-token .item-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 2px;
}
.ruins-shell .companion-showcase {
  gap: .75rem;
  margin-block: .5rem 1rem;
}
.ruins-shell.game-shell a.companion-card,
.ruins-shell.game-shell a.companion-card.hero-card {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  min-height: 6rem;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}
.ruins-shell .companion-card .game-art {
  width: 5rem;
}
.ruins-shell .companion-card .companion-caption,
.ruins-shell .companion-card.hero-card .companion-caption {
  position: static;
  display: block;
  padding: .5rem .75rem;
  background: transparent;
}
.ruins-shell .companion-caption h3 {
  margin: .25rem 0;
  font-size: .95rem;
}
.ruins-shell .companion-caption p {
  color: var(--text-muted);
}
.ruins-shell .portrait-tag {
  color: var(--gold);
  font-size: .65rem;
}
.ruins-shell .quick-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-block: 1rem;
}
.ruins-shell.game-shell .quick-links a {
  gap: .6rem;
  min-height: 4.5rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}
.ruins-shell .quick-links .item-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
}
.ruins-shell .quick-links strong {
  font-size: .9rem;
  font-weight: 500;
}
.ruins-shell .quick-links small {
  font-size: .65rem;
}
.ruins-shell.game-shell .formation-strip {
  gap: .75rem;
}
.ruins-shell.game-shell .formation-strip li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-content: center;
  gap: .2rem .75rem;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface);
}
.ruins-shell.game-shell .formation-strip li .game-art {
  width: 5rem;
  grid-row: 1 / 5;
}
.ruins-shell.game-shell .formation-strip li > :is(small, strong, span:not(.game-art)) {
  margin: 0;
  font-size: .8125rem;
}
.ruins-shell.game-shell :is(.party-tabs, .work-tabs) {
  gap: .4rem;
  padding-block: .75rem;
}
.ruins-shell.game-shell :is(.party-tabs, .work-tabs) button[aria-current] {
  background: var(--accent-surface);
  border-color: var(--border-strong);
  color: var(--accent);
}
.ruins-shell .pet-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}
.ruins-shell.game-shell details.catalog-card {
  border-radius: 2px;
  border-color: var(--border);
  background: var(--surface);
}
.ruins-shell .catalog-caption {
  padding: .6rem .75rem;
  background: var(--surface);
}
.ruins-shell.game-shell .catalog-card[open] {
  grid-column: span 2;
}
.ruins-shell.game-shell .owned-pet-portrait {
  width: 7rem;
  max-width: 35%;
}
.ruins-shell.game-shell.workshop .workshop-portrait {
  width: 9rem;
  margin-right: 1.25rem;
}
.ruins-shell.game-shell .skill-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 2px;
}
.ruins-shell .starter-portraits {
  max-width: 24rem;
}
.ruins-shell > :is(.work-links, .summon-nav) {
  display: none;
}
@media (min-width: 70rem) {
  .ruins-shell[data-page=explore] main > label {
    display: block;
    max-width: 28rem;
  }
}
@media (min-width: 90rem) {
  .ruins-shell.workshop .work-section,
  .ruins-shell.summon .summon-section {
    max-width: 70rem;
  }
}
@media (max-width: 60rem) {
  .ruins-shell.game-shell {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  .ruins-shell.game-shell .masthead {
    position: relative;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    padding: .4rem 1rem;
  }
  .ruins-shell.game-shell .masthead .brand {
    font-size: 1.25rem;
  }
  .traveler-identity {
    margin-left: auto;
  }
  .header-resources {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: .4rem 1.25rem;
  }
  .ruins-shell.game-shell .masthead .source {
    display: none;
  }
  .ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .ruins-shell.game-shell .bottom-nav {
    top: auto;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .15rem;
    width: auto;
    padding: .25rem .5rem max(.25rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--border-strong);
    overflow: visible;
  }
  .ruins-shell.game-shell .bottom-nav > button {
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-height: 52px;
    padding: .3rem .15rem;
    font-size: .75rem;
  }
  .ruins-shell.game-shell .bottom-nav .mobile-more {
    display: flex;
  }
  .ruins-shell.game-shell .bottom-nav .mobile-more.has-active-tool {
    color: #f6f1dc;
    background: #48634c;
    border-color: #6d8161;
  }
  .ruins-shell .bottom-nav > .nav-label,
  .ruins-shell .nav-note {
    display: none;
  }
  .ruins-shell .nav-glyph {
    width: 1.1rem;
    height: 1.25rem;
    font-size: 1rem;
  }
  .ruins-shell .nav-tools {
    position: absolute;
    right: .5rem;
    bottom: calc(100% + .5rem);
    left: .5rem;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin: 0;
    padding: .65rem;
    background: #263e33;
    border: 1px solid #6d8161;
    box-shadow: 0 -.4rem 1.4rem #263e3322;
  }
  .ruins-shell .bottom-nav[data-tools-open=true] .nav-tools {
    display: grid;
  }
  .ruins-shell.game-shell .nav-tools a {
    gap: .6rem;
    min-height: 48px;
    font-size: .875rem;
  }
  .ruins-shell .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ruins-shell .companion-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  .ruins-shell.game-shell a.companion-card,
  .ruins-shell.game-shell a.companion-card.hero-card {
    grid-column: auto;
    grid-template-columns: 3rem minmax(0, 1fr);
    min-height: 5rem;
    padding: .5rem;
  }
  .ruins-shell .companion-card .game-art {
    width: 3rem;
  }
  .ruins-shell .companion-card .companion-caption,
  .ruins-shell .companion-card.hero-card .companion-caption {
    min-width: 0;
    padding: .2rem .5rem;
  }
  .ruins-shell.game-shell .formation-strip li {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .5rem;
  }
  .ruins-shell.game-shell .formation-strip li .game-art {
    width: 100%;
    max-width: 5rem;
  }
  .ruins-shell .pet-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ruins-shell.game-shell.workshop .workshop-portrait {
    width: 8rem;
    max-width: 100%;
  }
}
@media (max-width: 40rem) {
  .ruins-shell.game-shell {
    font-size: .9375rem;
  }
  .ruins-shell.game-shell .masthead {
    gap: .2rem .5rem;
    padding: .35rem .75rem;
  }
  .ruins-shell .traveler-seal,
  .ruins-shell .traveler-identity strong {
    display: none;
  }
  .ruins-shell .traveler-identity small {
    max-width: 8rem;
  }
  .ruins-shell.game-shell .masthead .source {
    display: none;
  }
  .ruins-shell .header-resources {
    column-gap: 1rem;
    font-size: .75rem;
  }
  .ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
    margin-inline: .75rem;
  }
  .ruins-shell.game-shell > main {
    padding-block: .75rem;
  }
  .ruins-shell .scene-caption {
    padding: 0;
  }
  .ruins-shell .scene-banner {
    margin-bottom: .75rem;
  }
  .ruins-shell.game-shell > .status-strip {
    gap: .4rem;
    padding-block: .5rem;
  }
  .ruins-shell.game-shell > .status-strip > p:first-child {
    flex-basis: auto;
    min-width: 0;
  }
  .ruins-shell .resource-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem .4rem;
    margin-block: .5rem;
    padding-bottom: .5rem;
  }
  .ruins-shell .resource-token {
    flex-wrap: wrap;
    gap: .2rem;
    font-size: .75rem;
  }
  .ruins-shell .resource-token strong {
    font-size: .875rem;
  }
  .ruins-shell.game-shell a.companion-card,
  .ruins-shell.game-shell a.companion-card.hero-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .35rem;
    min-height: 9rem;
    padding: .65rem .3rem;
    text-align: center;
  }
  .ruins-shell .companion-card .game-art {
    width: 3.25rem;
  }
  .ruins-shell .companion-card .companion-caption,
  .ruins-shell .companion-card.hero-card .companion-caption {
    width: 100%;
    padding: 0;
  }
  .ruins-shell .companion-caption h3 {
    font-size: .875rem;
    line-height: 1.4;
  }
  .ruins-shell .companion-caption .portrait-tag {
    font-size: .7rem;
  }
  .ruins-shell .companion-caption p {
    font-size: .75rem;
  }
  .ruins-shell .companion-caption :is(h3, p) {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .ruins-shell.game-shell .quick-links a {
    min-height: 4.5rem;
    padding: .65rem;
  }
  .ruins-shell .quick-links strong {
    font-size: .9375rem;
  }
  .ruins-shell .quick-links small {
    font-size: .75rem;
    line-height: 1.5;
  }
  .ruins-shell .quick-links .quick-arrow {
    display: none;
  }
}
@media (max-width: 24rem) {
  .ruins-shell .resource-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ruins-shell.game-shell .masthead .source {
    margin-left: 0;
  }
  .header-resources {
    column-gap: .8rem;
  }
  .ruins-shell .quick-links small {
    font-size: .7rem;
  }
}

/* src/app/clarity.css */
.ruins-shell.party > .party-tabs {
  display: flex;
  gap: 1.25rem;
  padding-block: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.ruins-shell.party > .party-tabs button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: .65rem 0;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
}
.ruins-shell.party > .party-tabs button[aria-current] {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent);
}
.ruins-shell.party h1 {
  margin-block: .25rem .5rem;
}
.party-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.party-toolbar button {
  flex-shrink: 0;
}
.party-workspace {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.party-members,
.party-editor-host {
  min-width: 0;
}
.ruins-shell.party .formation-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  margin: 0;
}
.ruins-shell.game-shell .formation-strip li {
  display: block;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
}
.ruins-shell .formation-strip li.is-selected {
  border-color: var(--border-strong);
  background: var(--accent-surface);
}
.ruins-shell.game-shell .unit-select {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 86px;
  padding: .65rem;
  border: 0;
  text-align: left;
}
.ruins-shell.game-shell .formation-strip .unit-select .game-art {
  width: 3.25rem;
  max-width: none;
  margin: 0;
}
.ruins-shell .unit-copy {
  min-width: 0;
}
.ruins-shell .unit-copy > :is(strong, small, span) {
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: .75rem;
}
.ruins-shell .unit-copy > strong {
  margin-block: .1rem;
  color: var(--text-heading);
  font-size: .875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.unit-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.25rem;
  padding: 0 0 .85rem;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.unit-stats > div {
  min-width: 0;
}
.unit-stats dt {
  color: var(--text-muted);
  font-size: .7rem;
}
.unit-stats dd {
  margin: .1rem 0 0;
  color: var(--text-heading);
  font-size: 1.15rem;
}
.party-bond {
  margin-top: .85rem;
  color: var(--text-muted);
  font-size: .75rem;
}
.party-calculation {
  margin-block: 1.25rem 0;
  font-size: .8125rem;
}
.party-calculation > :not(summary) {
  margin-inline: 1rem;
}
.ruins-shell .roster-editor[hidden] {
  display: none;
}
.ruins-shell.game-shell .roster-editor {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.roster-editor h2 {
  margin-bottom: .75rem;
}
.roster-editor form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.roster-editor form > :is(p, details, .party-action, .check-line, .hero-skill-fields, a) {
  grid-column: 1 / -1;
}
.roster-editor form > label {
  margin-block: .4rem;
}
.roster-editor form > details {
  margin-block: .5rem;
}
.roster-editor .party-action {
  margin-block: .75rem .25rem;
}
.roster-editor .party-action button {
  background: var(--accent-surface);
  color: var(--on-accent);
}
.roster-editor > p {
  color: var(--text-muted);
  font-size: .8125rem;
}
.roster-editor > details {
  font-size: .8125rem;
}
.roster-editor > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .4rem;
  font-size: .8125rem;
}
.hero-skill-fields p {
  color: var(--text-muted);
  font-size: .8125rem;
}
.ruins-shell.game-shell[data-page=explore] .adventure-session {
  margin-block: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.explore-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.explore-toolbar > label {
  flex: 1 1 13rem;
  max-width: 22rem;
  color: var(--text-muted);
  font-size: .75rem;
}
.explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8125rem;
}
.explore-progress {
  color: var(--text-muted);
  font-size: .8125rem;
}
.explore-options {
  margin-top: 1.25rem;
}
.explore-options > details {
  font-size: .8125rem;
}
.gear-overview {
  font-size: .8125rem;
  color: var(--text-muted);
}
.section-disclosure {
  margin-block: .65rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.section-disclosure > summary {
  min-height: 48px;
  padding: .75rem 1rem;
}
.section-disclosure > summary h2 {
  display: inline;
  margin: 0;
  font-size: 1rem;
}
.ruins-shell.game-shell .section-disclosure > :is(.work-section, .summon-section) {
  margin: 0;
  padding: 0 1rem 1rem;
  border: 0;
  background: transparent;
}
.ruins-shell.game-shell .camp-rewards {
  padding: 0;
  border: 0;
  background: transparent;
}
.camp-harvest {
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.camp-harvest > p {
  font-size: .9375rem;
}
.camp-harvest details {
  font-size: .8125rem;
}
.camp-rewards > h2 {
  margin-block: 1.25rem .75rem;
}
.commission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.ruins-shell.local-play .commission {
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.commission h3 {
  margin-top: 0;
}
.commission > p {
  color: var(--text-muted);
  font-size: .8125rem;
}
.commission > .commission-brief {
  color: var(--gold);
}
.commission details {
  font-size: .75rem;
}
.ruins-shell.game-shell .secondary-link {
  color: var(--text-muted);
  font-size: .8125rem;
}
.single-challenges > .action {
  display: inline-flex;
  margin: .5rem 1rem .75rem .5rem;
  vertical-align: top;
}
.ruins-shell.game-shell.workshop .pet-summary {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .3rem 1rem;
  padding: .5rem 0;
  border: 0;
  background: transparent;
}
.ruins-shell.game-shell.workshop .workshop-portrait {
  grid-column: 1;
  grid-row: 1 / 4;
  float: none;
  width: 4.5rem;
  max-width: none;
  margin: 0;
  border-radius: 2px;
}
.workshop .pet-summary > :is(label, p, .panel-list) {
  grid-column: 2;
  margin: 0;
}
.workshop .pet-summary > p {
  color: var(--text-muted);
  font-size: .75rem;
}
.workshop .pet-summary > .panel-list {
  width: 100%;
  max-width: 28rem;
  margin-block: .4rem;
  font-size: .8125rem;
}
.workshop .pet-summary > details {
  grid-column: 1 / -1;
  font-size: .8125rem;
}
.workshop .pet-summary > details summary {
  font-size: .8125rem;
}
.workshop .section-disclosure .work-section > p:first-child {
  color: var(--text-muted);
  font-size: .8125rem;
}
.ruins-shell.game-shell.workshop .work-tabs {
  gap: .75rem;
  padding-block: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.ruins-shell.game-shell.workshop .work-tabs button {
  border-bottom: 2px solid transparent;
  min-height: 48px;
  color: var(--text-muted);
}
.ruins-shell.game-shell.workshop .work-tabs button[aria-current] {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.ruins-shell.game-shell.summon :is(.wish-summary, .summon-section) {
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.ruins-shell.game-shell.summon .section-disclosure .summon-section {
  border: 0;
  padding-inline: 1rem;
}
.ruins-shell.game-shell.equipment-page :is(.gear-slot, .gear-bag-item, .gear-detail, .gear-boss-choice, .gear-pending) {
  border-radius: 2px;
  border-color: var(--border);
  border-left-color: var(--gear-color);
  background: var(--surface);
}
.ruins-shell.game-shell.equipment-page .gear-tabs button[aria-current] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-surface);
}
.ruins-shell.game-shell.equipment-page .gear-forge-form {
  border-radius: 2px;
  border-color: var(--border);
}
.ruins-shell .wish-gallery {
  max-width: 48rem;
}
.ruins-shell .wish-gallery button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem;
  border-radius: 2px;
}
.ruins-shell .wish-gallery .game-art {
  width: 3.5rem;
}
.travel-journal {
  padding: clamp(1rem, 2.5vw, 2rem);
  font-size: .875rem;
}
.travel-journal .journal-masthead {
  padding-bottom: .75rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.travel-journal .journal-masthead h1 {
  font-size: 1.75rem;
  letter-spacing: .05em;
}
.travel-journal .journal-origin {
  font-size: .75rem;
}
.travel-journal main {
  padding-block: 1.25rem;
}
.travel-journal .nav-copy-short {
  display: none;
}
.travel-journal footer .journal-link {
  margin-inline-start: 1rem;
  font-size: .75rem;
}
@media (max-width: 65rem) {
  .travel-journal .journal-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block: .75rem;
  }
  .travel-journal .journal-nav button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
@media (max-width: 48rem) {
  .party-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .ruins-shell.party .formation-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }
  .ruins-shell.game-shell .unit-select {
    flex-direction: column;
    gap: .35rem;
    min-height: 124px;
    padding: .5rem .25rem;
    text-align: center;
  }
  .ruins-shell.game-shell .formation-strip .unit-select .game-art {
    width: 2.75rem;
  }
  .ruins-shell .unit-copy > strong {
    font-size: .8125rem;
  }
  .ruins-shell .unit-copy > :is(small, span) {
    font-size: .6875rem;
  }
  .party-bond {
    margin: .5rem 0 0;
  }
}
@media (max-width: 40rem) {
  .travel-journal .journal-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .2rem;
    overflow: visible;
  }
  .travel-journal .journal-nav button {
    min-width: 0;
    padding-inline: .25rem;
  }
  .travel-journal .nav-copy-full {
    display: none;
  }
  .travel-journal .nav-copy-short {
    display: inline;
  }
  .ruins-shell.party > .party-tabs {
    gap: .7rem;
  }
  .ruins-shell.party > .party-tabs button {
    flex: 1 0 0;
    min-width: 0;
    padding-inline: 0;
    font-size: .8125rem;
  }
  .party-toolbar {
    margin-bottom: .75rem;
  }
  .unit-stats {
    margin-bottom: 1rem;
    padding-bottom: .6rem;
  }
  .roster-editor form[aria-label=双宠与站位配置] {
    grid-template-columns: minmax(0, 1fr);
  }
  .commission-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ruins-shell.game-shell.workshop .pet-summary {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: .35rem .75rem;
    padding: .5rem 0;
  }
  .ruins-shell.game-shell.workshop .workshop-portrait {
    width: 3.5rem;
  }
  .ruins-shell .wish-gallery {
    gap: .4rem;
  }
  .ruins-shell .wish-gallery button {
    padding: .4rem;
  }
}

/* src/app/journey.css */
.travel-journal,
.reward-shell {
  --surface: #fbf9f3;
  --surface-raised: #eae7dd;
}
.ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
  max-width: 88rem;
  margin-left: max(calc(var(--rail) + 2rem), calc((100vw + var(--rail) - 88rem) / 2));
  margin-right: 2rem;
}
.ruins-shell.game-shell > main {
  padding-block: 1.7rem;
}
.ruins-shell.game-shell .masthead .brand {
  color: #304c39;
  letter-spacing: .16em;
}
.ruins-shell.game-shell h1 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: .1em;
}
.ruins-shell.game-shell h2 {
  font-weight: 600;
}
.ruins-shell.game-shell :is(button, input, select) {
  border-radius: 5px;
}
.ruins-shell.game-shell button {
  min-height: 44px;
}
.ruins-shell.game-shell button.primary {
  padding-inline: 1.3rem;
  font-weight: 600;
}
.ruins-shell.game-shell .scene-banner {
  min-height: 10.5rem;
  margin-bottom: 1.7rem;
  overflow: hidden;
  border: 1px solid #d9ddcd;
  border-radius: 6px;
  background: #e7eade;
}
.ruins-shell .scene-banner .scene-art {
  display: block;
  left: 35%;
  width: 65%;
}
.ruins-shell .scene-banner::after {
  display: block;
  background:
    linear-gradient(
      90deg,
      #e9ecdf 0%,
      #e9ecdf 30%,
      #e9ecdfed 42%,
      #e9ecdf25 75%,
      transparent);
}
.ruins-shell .scene-caption {
  max-width: 65%;
  padding: 1.6rem 1.8rem;
}
.ruins-shell .scene-caption .scene-kicker {
  display: block;
  color: #596e50;
  font-size: .65rem;
  letter-spacing: .17em;
}
.ruins-shell .scene-caption h1 {
  margin-block: .45rem;
  color: #294133;
}
.ruins-shell .scene-caption .scene-description {
  color: #52634e;
  font-size: .8125rem;
  max-width: 27rem;
  line-height: 1.8;
}
.ruins-shell.game-shell .companion-caption h3 {
  color: var(--text-heading);
}
.ruins-shell.game-shell :is(.companion-caption p, .skill-token span) {
  color: var(--text-muted);
}
.ruins-shell.game-shell :is(.skill-token, .innate-token, .skill-detail, .pet-signature, .party-calculation) {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}
.ruins-shell.game-shell :is(.resource-token strong, .formation-strip strong, .skill-detail h3, .catalog-card h3) {
  color: var(--text-heading);
}
.ruins-shell.game-shell :is(.wish-gallery button, .summon-summary, .party-section, .work-section) {
  background: var(--surface);
}
.ruins-shell.game-shell .wish-gallery button[aria-pressed=true] {
  background: var(--gold-surface);
  border-color: var(--gold);
}
.ruins-shell.game-shell .quick-links a:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.ruins-shell .nav-tools > .nav-label {
  margin-bottom: .2rem;
  grid-column: 1 / -1;
}
.journey-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  align-items: start;
  gap: 1.5rem;
}
.journey-play,
.journey-aside {
  min-width: 0;
}
.journey-kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: .6875rem;
  letter-spacing: .1em;
}
.journey-muted {
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.8;
}
.ruins-shell.game-shell[data-page=explore] .stage-challenge {
  margin: 0 0 1.1rem;
  padding: 1.5rem;
  border: 1px solid #cdd5c3;
  border-radius: 6px;
  background: var(--surface);
  scroll-margin-top: calc(var(--bar) + 1rem);
}
.journey-result h2:focus:not(:focus-visible) {
  outline: none;
}
.journey-ready {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  counter-reset: journey-step;
  margin: 1.6rem 0 .5rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--border);
}
.journey-ready li {
  counter-increment: journey-step;
  font-size: .75rem;
}
.journey-ready li::before {
  content: "0" counter(journey-step);
  display: block;
  margin-bottom: .4rem;
  color: #8a947b;
  font-family: Georgia, serif;
  font-size: 1.3rem;
}
.journey-ready strong {
  display: block;
  color: var(--accent);
  font-weight: 500;
}
.journey-ready span {
  display: block;
  margin-top: .3rem;
  color: var(--text-muted);
  font-size: .6875rem;
}
.ruins-shell .stage-challenge > .adventure-heading {
  gap: .8rem 1rem;
}
.ruins-shell .stage-challenge > .adventure-heading h2 {
  font-size: 1.05rem;
}
.ruins-shell .stage-challenge > p {
  color: var(--text-muted);
  margin-block: .5rem;
  font-size: .75rem;
}
.ruins-shell .stage-challenge .adventure-actions .action small {
  max-width: 16rem;
  font-size: .7rem;
}
.journey-result {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.result-seal {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: .15rem;
  border: 1px solid #92a77b;
  border-radius: 4px;
  background: #e8eddf;
  color: #47613c;
  font: 1.8rem/1 SimSun, serif;
}
.result-copy .journey-kicker {
  margin: 0;
}
.ruins-shell .result-copy h2 {
  margin: .15rem 0 .25rem;
  font-size: 1.5rem;
  letter-spacing: .035em;
}
.result-copy .journey-muted {
  margin: .25rem 0 0;
}
.journey-result[data-outcome=defeat] .result-seal {
  border-color: #c4a17a;
  color: #946445;
  background: #f2e9db;
}
.result-highlight {
  grid-column: 2;
  margin: .6rem 0 0;
  font-size: .75rem;
  color: #4b6544;
}
.result-growth {
  grid-column: 2;
  font-size: .8125rem;
}
.journey-settlement {
  padding-top: 0;
}
.journey-settlement .journey-result {
  margin-bottom: .75rem;
}
.journey-settlement .action {
  margin-bottom: 0;
}
.journey-receipt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  padding: .75rem 0 1rem;
  margin-top: -.75rem;
  font-size: .75rem;
}
.journey-receipt > span {
  color: var(--text-muted);
}
.journey-receipt strong {
  color: #8a6338;
  font-weight: 500;
}
.ruins-shell .journey-route {
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--border);
}
.ruins-shell .journey-route h2 {
  font-size: 1.35rem;
  margin: .4rem 0 .25rem;
  letter-spacing: .06em;
}
.journey-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 .8rem;
}
.journey-path li {
  display: grid;
  place-items: center;
  min-height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-disabled);
  background: #eae9e1;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.journey-path li[data-state=cleared] {
  color: #4c6846;
  background: #e4e9da;
  border-color: #c5d0b9;
}
.journey-path li[data-state=next] {
  color: #fbf7e9;
  background: #4e6b4f;
  border-color: #4e6b4f;
  outline: 2px solid #bac8ac;
  outline-offset: 3px;
  font-weight: 600;
}
.journey-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block: 1.2rem .65rem;
}
.ruins-shell .journey-section-heading h2 {
  margin: 0;
  font-size: 1rem;
}
.journey-section-heading a {
  font-size: .6875rem;
}
.ruins-shell .journey-squad .companion-showcase {
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
  margin: 0;
}
.ruins-shell.game-shell .journey-squad a.companion-card,
.ruins-shell.game-shell .journey-squad a.companion-card.hero-card {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  min-height: 4.5rem;
  padding: .45rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.ruins-shell .journey-squad .companion-card .game-art {
  width: 3.4rem;
  border-radius: 4px;
}
.ruins-shell .journey-squad .companion-card .companion-caption {
  padding: .2rem .65rem;
}
.ruins-shell .journey-squad .companion-caption h3 {
  margin-block: .1rem;
  font-size: .875rem;
}
.ruins-shell .journey-squad .companion-caption :is(.portrait-tag, p) {
  font-size: .625rem;
  line-height: 1.6;
}
.ruins-shell .journey-squad .companion-caption p {
  margin: .1rem 0;
}
.ruins-shell .journey-growth {
  display: block;
  margin-top: .9rem;
  padding: .7rem .8rem;
  border: 1px solid #d9d0b9;
  border-radius: 4px;
  background: #efe8d8;
  text-decoration: none;
}
.journey-growth strong,
.journey-growth span {
  display: block;
  font-size: .75rem;
}
.journey-growth span {
  margin-top: .2rem;
  font-size: .6875rem;
  color: #746347;
}
.journey-aside > details {
  margin-top: 1rem;
  font-size: .75rem;
}
.journey-aside > details > summary {
  padding-inline: 0;
}
.journey-aside > details p {
  color: var(--text-muted);
  line-height: 1.8;
}
.ruins-shell .battle-feed {
  padding: 1.1rem 0 0;
  margin-top: 1rem;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
}
.ruins-shell .battle-feed-header h2 {
  font-size: 1rem;
}
.ruins-shell .battle-feed .battle-feed-title {
  font-size: .6875rem;
}
.ruins-shell .battle-vitals {
  margin-block: 1rem .6rem;
  padding-top: 0;
  gap: 1.5rem;
  border-top: 0;
}
.ruins-shell .battle-feed .battle-team h3 {
  color: var(--text-muted);
  margin-bottom: .8rem;
}
.ruins-shell .battle-unit {
  min-height: 3rem;
}
.ruins-shell .battle-unit-name {
  color: var(--text);
  font-size: .8125rem;
}
.ruins-shell .battle-unit-value {
  color: var(--text-muted);
  font-size: .6875rem;
}
.ruins-shell .battle-unit-track {
  height: .5rem;
  background: #e4e6da;
  border-radius: 2px;
}
.ruins-shell .battle-unit-fill {
  background: #67815b;
}
.ruins-shell .battle-team[data-side=enemy] .battle-unit-fill {
  background: #b1765f;
}
.ruins-shell .battle-unit[data-state=low] .battle-unit-fill {
  background: #aa834b;
}
.ruins-shell .battle-unit-shield {
  color: #466b75;
}
.ruins-shell .battle-feed-status {
  margin-top: .4rem;
  color: var(--accent);
}
.ruins-shell .battle-feed-record {
  margin-top: .75rem;
  border-bottom: 0;
}
.ruins-shell .battle-feed-record summary {
  padding-inline: 0;
  font-size: .75rem;
  color: var(--text-muted);
}
.ruins-shell .battle-feed-note {
  font-size: .6875rem;
  color: var(--text-muted);
}
.ruins-shell .battle-feed-lines {
  padding-inline: 0;
}
.ruins-shell .battle-feed-lines li[data-kind=battle_finished] {
  color: #6c713b;
}
.ruins-shell .battle-feed-lines li[data-kind=defeated] {
  color: #a34f3f;
}
.journey-play > details {
  font-size: .8125rem;
}
.journey-play > details > summary {
  padding: .8rem .2rem;
  color: var(--text-muted);
}
.ruins-shell .journey-replay .battle-feed {
  margin: 0;
  padding: 1rem;
  background: var(--surface);
}
.ruins-shell .explore-options {
  margin-top: 1.25rem;
}
.ruins-shell .explore-options > summary {
  color: var(--accent);
}
.ruins-shell .explore-options .explore-toolbar {
  margin: .4rem .75rem;
  padding-block: .75rem;
}
.ruins-shell .explore-options .explore-progress {
  margin-inline: .75rem;
}
.ruins-shell .explore-options > details {
  margin-inline: .75rem;
}
.ruins-shell .explore-options .tower-section {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}
.ruins-shell .explore-options .tower-section :is(progress, .tower-floor, .tower-enemy) {
  color: var(--text);
  background: var(--surface);
}
.ruins-shell .camp-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding: 1.2rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.camp-goal p {
  margin: .2rem 0;
  color: var(--text-muted);
  font-size: .75rem;
}
.ruins-shell .camp-goal h2 {
  margin: .25rem 0;
  font-size: 1.35rem;
}
.ruins-shell .camp-goal .action {
  margin: 0;
}
.ruins-shell .camp-goal + .resource-bar {
  display: none;
}
.ruins-shell.equipment-page .gear-main-stats {
  color: #735837;
}
.ruins-shell.equipment-page .quality-common {
  --gear-color: #6e6b5d;
}
.ruins-shell.equipment-page .quality-fine {
  --gear-color: #477045;
}
.ruins-shell.equipment-page .quality-rare {
  --gear-color: #3c698e;
}
.ruins-shell.equipment-page .quality-epic {
  --gear-color: #795690;
}
.ruins-shell.equipment-page .quality-legendary,
.ruins-shell.equipment-page .gear-pending {
  --gear-color: #926224;
}
.ruins-shell.equipment-page .quality-mythic {
  --gear-color: #a34f57;
}
@media (max-width: 76rem) {
  .journey-workspace {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1.25rem;
  }
  .ruins-shell.game-shell[data-page=explore] .stage-challenge {
    padding: 1.1rem;
  }
  .ruins-shell .stage-challenge > .adventure-heading {
    align-items: start;
  }
}
@media (max-width: 60rem) {
  .ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
    margin-inline: 1.25rem;
  }
  .ruins-shell.game-shell > main {
    padding-block: 1.1rem;
  }
  .ruins-shell .journey-workspace {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
  .ruins-shell .scene-caption {
    padding: 1.3rem;
    max-width: 75%;
  }
}
@media (max-width: 46rem) {
  .ruins-shell.game-shell > :is(main, .status-strip, footer, .party-tabs) {
    margin-inline: .9rem;
  }
  .ruins-shell .journey-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .journey-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .journey-aside > details {
    grid-column: 1 / -1;
    margin: 0;
  }
  .ruins-shell .journey-route {
    border-bottom: 0;
  }
  .journey-section-heading {
    margin-top: 0;
  }
  .ruins-shell .journey-route h2 {
    font-size: 1.1rem;
  }
  .journey-path {
    gap: .4rem;
    margin-top: 1rem;
  }
  .journey-path li {
    min-height: 2rem;
  }
  .ruins-shell .scene-banner {
    min-height: 10rem;
    margin-bottom: 1.1rem;
  }
  .ruins-shell .scene-caption {
    max-width: 86%;
    padding: 1.1rem;
  }
  .ruins-shell .scene-banner .scene-art {
    left: 15%;
    width: 85%;
  }
  .ruins-shell .scene-banner::after {
    background:
      linear-gradient(
        90deg,
        #e9ecdf,
        #e9ecdfec 35%,
        #e9ecdf40);
  }
  .ruins-shell .scene-caption .scene-description {
    max-width: 20rem;
    font-size: .75rem;
  }
  .ruins-shell .stage-challenge > .adventure-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .journey-ready {
    gap: .65rem;
  }
  .ruins-shell .stage-challenge .adventure-actions {
    display: block;
  }
  .ruins-shell .stage-challenge .adventure-actions .action {
    align-items: stretch;
  }
  .ruins-shell .stage-challenge .adventure-actions .action small {
    max-width: none;
  }
  .ruins-shell .result-copy h2 {
    font-size: 1.25rem;
  }
  .ruins-shell .battle-vitals {
    gap: 1rem;
  }
  .ruins-shell .battle-unit-name {
    font-size: .75rem;
  }
  .ruins-shell .battle-unit-heading {
    flex-wrap: wrap;
  }
  .ruins-shell .camp-goal h2 {
    font-size: 1.15rem;
  }
}
@media (max-width: 25rem) {
  .journey-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .ruins-shell .journey-squad .companion-showcase {
    grid-template-columns: minmax(0, 1fr);
  }
  .journey-result {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .6rem;
  }
  .result-seal {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.5rem;
  }
  .ruins-shell .result-copy h2 {
    font-size: 1.1rem;
  }
  .journey-receipt {
    gap: .4rem .7rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .journey-growth,
  .journey-path li {
    transition: background-color 140ms ease-out;
  }
}
.journey-capture,
.journey-build-guide,
.journey-growth {
  min-width: 0;
  margin-block: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: 6px;
}
.journey-growth h2 {
  margin-top: 0;
  font-size: 1.12rem;
}
.journey-growth p {
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.journey-growth small {
  display: block;
  color: var(--text-muted);
  margin-top: .6rem;
}
.growth-reward {
  padding-block: .7rem;
  border-bottom: 1px solid var(--border);
}
.growth-reward button {
  max-width: 100%;
  white-space: normal;
}
.growth-upgrade {
  display: block;
  margin-top: .65rem;
  overflow-wrap: anywhere;
}
.journey-capture h2,
.journey-build-guide h2 {
  margin-top: 0;
  font-size: 1.12rem;
}
.journey-capture .explore-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: end;
}
.journey-capture .explore-toolbar > label {
  flex: 1 1 12rem;
}
.journey-capture .explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
.capture-target progress {
  display: block;
  width: 100%;
  height: .6rem;
  margin-block: .9rem .4rem;
  accent-color: var(--accent, #395d48);
}
.capture-target p {
  margin-block: .5rem;
}
.journey-build-guide {
  border-inline-start: 4px solid var(--accent, #395d48);
}
.journey-build-guide ul {
  padding-inline-start: 1.3rem;
  margin-block: .5rem;
}
.journey-build-guide li {
  margin-block: .3rem;
}
.journey-build-guide details {
  margin-block: .8rem;
}
.journey-build-guide summary,
.journey-build-guide button {
  min-height: 44px;
}
.journey-build-guide button {
  width: 100%;
  padding: .7rem;
  font: inherit;
}
.journey-build-guide small {
  display: block;
  margin-block: .4rem;
}
.journey-build-guide[data-phase=success] {
  background: var(--surface, #eff2e6);
}
@media (max-width: 36rem) {
  .journey-capture,
  .journey-build-guide,
  .journey-growth {
    padding: .9rem;
  }
}

/* src/app/help.css */
.game-help-trigger {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: -.3rem 0 -.3rem .2rem;
  border: 0;
  background: transparent;
  vertical-align: middle;
  font: 14px/1 sans-serif;
  letter-spacing: 0;
}
.game-help-trigger span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent);
  background: var(--surface);
}
.game-help-trigger:hover:enabled {
  background: transparent;
}
.game-help-trigger:hover span {
  color: var(--surface);
  background: var(--accent);
}
.game-help-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(80dvh, 42rem);
  box-sizing: border-box;
  margin: auto;
  padding: 1.3rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 16px 64px #17332b35;
}
.game-help-dialog::backdrop {
  background: #122b22a6;
}
.game-help-dialog > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.game-help-dialog h2 {
  margin: .4rem 0;
  color: var(--text-heading);
  font-size: 1.25rem;
  line-height: 1.5;
}
.game-help-dialog p {
  margin: 1rem 0;
  font-size: .9375rem;
  line-height: 1.85;
}
.game-help-dialog .game-help-close {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.6rem;
}
.game-help-dialog .game-help-done {
  display: block;
  min-height: 44px;
  margin: 1.2rem 0 0 auto;
  padding: .55rem 1.2rem;
  border-color: var(--accent);
  color: var(--surface);
  background: var(--accent);
}
@media (max-width: 25rem) {
  .game-help-dialog {
    padding: 1rem;
  }
  .game-help-dialog h2 {
    font-size: 1.1rem;
  }
}

/* src/app/web-account.css */
.web-account.game-shell {
  display: grid;
  grid-template-columns: 1fr minmax(0, 22rem);
  gap: 3rem;
  align-content: center;
  align-items: start;
  padding-block: 3rem;
  background: #fbf9f3;
  color: #263d32;
  color-scheme: light;
}
.web-account header {
  display: grid;
  justify-items: start;
  gap: 1rem;
}
.web-account header img {
  border: 1px solid var(--border-strong);
}
.web-account h1 {
  font-size: clamp(1.6rem, 4vw, 2.65rem);
  color: var(--gold);
  line-height: 1.2;
}
.web-account h2 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
}
.web-account form {
  display: grid;
  gap: .9rem;
  border-top: 1px solid var(--gold);
  padding-top: 1.25rem;
}
.web-account label {
  display: grid;
  gap: .4rem;
  color: var(--text);
}
.web-account input {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  padding: .65rem .7rem;
  font: inherit;
  border: 1px solid #818b79;
  color: var(--text);
  background: #f2efe7;
}
.web-account .web-account-hint,
.web-account .web-account-error {
  margin: 0;
  font-size: .86rem;
  color: var(--text-muted);
}
.web-account .web-account-error {
  color: var(--danger);
}
.web-account .web-account-error:empty {
  display: none;
}
.web-account button,
.web-account-actions button {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--border-strong);
  background: #eae7dd;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.web-account .web-account-submit {
  background: #355142;
  border-color: #355142;
  color: #faf6e9;
  font-weight: 700;
}
.web-account button:disabled,
.web-account-actions button:disabled {
  opacity: .55;
  cursor: wait;
}
.web-account :focus-visible,
.web-account-actions :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.web-account-actions {
  max-width: 58rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  margin: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}
@media (max-width: 46rem) {
  .web-account.game-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    justify-content: start;
    align-content: start;
  }
}