/* Existing page layouts stay below the shared control skin in the cascade. */
@layer game, buttons;
@layer game {
:root {
  color-scheme: dark;
  --bg: #141b19;
  --panel: #1c2522;
  --border: #35443c;
  --text: #e5e5d8;
  --muted: #91a398;
  --accent: #d6bc7f;
  font-family:
    system-ui,
    -apple-system,
    "PingFang SC",
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 90% 0, #31413740, transparent 55%), var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.8;
}
header,
nav,
main,
footer {
  max-width: 1200px;
  margin: auto;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
}
.brand {
  font-family: "Noto Serif SC", serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 26px;
  color: var(--text);
  text-decoration: none;
}
.brand span {
  color: var(--accent);
}
.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--muted);
}
.wallet {
  display: flex;
  gap: 24px;
  color: var(--muted);
}
.wallet b {
  color: var(--accent);
  font-size: 20px;
  padding-left: 6px;
}
nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px 18px;
}
.nav-end {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
main {
  padding: 20px 24px 60px;
}
h1,
h2,
h3 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 600;
  line-height: 1.5;
}
h1 {
  font-size: 34px;
  margin: 10px 0 16px;
}
h2 {
  font-size: 23px;
}
h3 {
  font-size: 17px;
  margin: 0 0 16px;
}
p {
  margin: 8px 0 16px;
}
small,
.muted {
  color: var(--muted);
}
.intro {
  padding: 30px 0;
}
.intro > small,
.journey-heading small,
.encounter > small,
.settlement > small {
  color: var(--accent);
  letter-spacing: 0.15em;
}
.opening-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card,
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 18px;
}
.opening {
  padding: 28px;
  position: relative;
}
.opening h2 {
  margin-top: 16px;
}
.opening.locked {
  border-color: var(--accent);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  margin: 20px 0;
}
.metric small,
.metric strong {
  display: block;
}
.metric strong {
  font-size: 24px;
  font-weight: 500;
  color: #eeeada;
}
.actions,
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.actions {
  margin-top: 20px;
}
.row {
  margin-bottom: 18px;
}
button {
  font: inherit;
  color: var(--text);
  border: 1px solid #47574c;
  background: transparent;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  transition: 0.15s;
}
button:hover {
  border-color: var(--accent);
  background: #d6bc7f10;
}
button.primary {
  background: var(--accent);
  color: #252c24;
  border-color: var(--accent);
  font-weight: 600;
}
button.active,
button.selected {
  border-color: var(--accent);
  color: var(--accent);
}
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.relic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.relic {
  text-align: left;
  padding: 18px;
}
.relic small,
.relic b {
  display: block;
}
.relic.empty {
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.journey-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
.power {
  text-align: right;
}
.power small {
  display: block;
}
.power strong {
  font-size: 42px;
  color: var(--accent);
  font-family: serif;
}
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 22px;
}
.formula {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 24px;
}
.settings {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.settings label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
select,
input {
  font: inherit;
  background: #151d19;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px;
}
input[type="number"] {
  width: 100px;
}
.settings .check {
  flex-direction: row;
  align-items: center;
}
.encounter {
  border-color: #a78f55;
  background: linear-gradient(120deg, #333225, #1c2522);
}
.risk {
  font-size: 13px;
  background: #111a1590;
  padding: 14px 18px;
  border-radius: 4px;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 18px;
}
.item {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin-bottom: 8px;
}
.item span {
  float: right;
  color: var(--accent);
  font-size: 12px;
}
.item small {
  display: block;
}
.item + h3 {
  margin-top: 28px;
}
.logs {
  max-height: 640px;
  overflow: auto;
  padding-right: 12px;
}
.log {
  border-left: 1px solid var(--border);
  padding: 0 0 12px 18px;
  margin: 0 0 5px;
}
.log p {
  margin: 3px 0;
  font-size: 13px;
}
.log small {
  font-size: 10px;
}
.log-panel .row {
  justify-content: space-between;
}
.checkpoint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.checkpoint small {
  display: block;
}
.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.badge {
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 20px;
  color: var(--muted);
}
.badge.earned {
  color: var(--accent);
  border-color: var(--accent);
}
.unknown {
  opacity: 0.6;
}
.negative,
.error {
  color: #efaa91;
}
.error {
  max-width: 1152px;
  margin: 16px auto;
  padding: 18px;
  border: 1px solid #aa6f5a;
  background: #442c25;
}
footer {
  text-align: center;
  border-top: 1px solid var(--border);
  padding: 20px;
  color: var(--muted);
  font-size: 11px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #dfc896;
  color: #1b241c;
  padding: 10px 24px;
  border-radius: 6px;
  max-width: 90%;
  z-index: 5;
}
#toast:empty {
  display: none;
}
@media (max-width: 800px) {
  .opening-grid,
  .relic-grid {
    grid-template-columns: 1fr;
  }
  .growth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
  h1 {
    font-size: 27px;
  }
  header {
    padding: 20px 16px;
  }
  .wallet {
    gap: 12px;
    font-size: 11px;
  }
  .wallet b {
    font-size: 17px;
  }
  .brand {
    font-size: 21px;
  }
  nav {
    padding: 0 16px 12px;
    flex-wrap: wrap;
  }
  .nav-end {
    margin-left: 0;
  }
  nav button {
    padding: 6px 10px;
  }
  main {
    padding: 12px 16px 40px;
  }
  .opening {
    padding: 22px;
  }
  .intro {
    padding: 15px 0;
  }
  .checkpoint {
    align-items: flex-start;
  }
  .checkpoint button {
    white-space: nowrap;
  }
  .panel {
    padding: 20px;
  }
  .power strong {
    font-size: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}
/* Each route has one primary task; secondary information lives in its own view. */
main {
  max-width: 1100px;
  padding-top: 32px;
}
.page {
  min-height: calc(100vh - 280px);
}
header {
  padding-top: 24px;
  padding-bottom: 24px;
}
nav {
  align-items: center;
  gap: 12px;
}
nav button {
  padding: 10px 20px;
}
.intro {
  max-width: 720px;
  padding: 18px 0 30px;
}
.intro p {
  color: var(--muted);
  line-height: 1.9;
}
h1[tabindex]:focus {
  outline: none;
}
.section-nav {
  display: flex;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.section-nav button {
  flex-shrink: 0;
  border-color: transparent;
  color: var(--muted);
  padding: 8px 16px;
}
.section-nav button.active {
  color: var(--accent);
  background: #d6bc7f0c;
  border-color: var(--border);
}
.journey-heading {
  padding: 4px 0 22px;
}
.journey-heading h1 {
  margin-bottom: 0;
}
.main-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px 30px;
  margin-bottom: 22px;
}
.main-stats .metric + .metric {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.playback {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.playback .muted {
  margin-left: 4px;
  flex: 1;
  font-size: 12px;
}
.encounter,
.quiet-stage {
  min-height: 250px;
  padding: 32px;
}
.encounter h2,
.quiet-stage h2 {
  margin-top: 16px;
  margin-bottom: 18px;
}
.encounter > p,
.quiet-stage > p {
  max-width: 700px;
  line-height: 2;
  font-size: 16px;
}
.quiet-stage {
  background: linear-gradient(125deg, #253129, #1c2522);
}
.encounter .actions {
  padding-top: 8px;
  gap: 16px;
}
.encounter .actions button {
  min-width: 120px;
}
.risk {
  margin: 24px 0;
  line-height: 2;
}
.loadout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 24px;
}
.loadout-summary p {
  margin-bottom: 0;
}
.opening-grid {
  gap: 24px;
}
.opening {
  display: flex;
  flex-direction: column;
  padding: 26px;
}
.opening .actions {
  margin-top: auto;
  padding-top: 12px;
  gap: 8px;
}
.opening .actions button {
  padding: 8px 12px;
}
.growth-grid {
  gap: 20px;
}
.growth-grid .panel {
  padding: 26px;
}
.growth-grid h2 {
  margin: 14px 0;
}
.settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
}
.settings label {
  gap: 10px;
  font-size: 13px;
}
.settings select,
.settings input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 10px;
}
.settings .check {
  align-self: end;
  min-height: 44px;
}
.save-panel {
  margin-top: 32px;
}
.save-panel .actions {
  margin-top: 24px;
}
summary {
  cursor: pointer;
  color: var(--muted);
}
details[open] summary {
  margin-bottom: 20px;
}
.settlement {
  padding: 32px;
}
.settlement h2 {
  margin-top: 18px;
}
.settlement > .primary {
  margin-top: 16px;
}
.settlement-summary { margin: 18px 0; text-align: left; min-width: 0; }
.settlement-summary > section { padding: 12px 0; border-top: 1px solid var(--border); }
.settlement-summary h3, .settlement-summary h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; }
.settlement-summary h3 small, .settlement-summary h4 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.settlement-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; list-style: none; padding: 0; margin: 0; }
.summary-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; max-width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, .025); overflow-wrap: anywhere; }
.summary-item b { min-width: 0; font-size: 12px; line-height: 1.6; font-weight: 500; }
.summary-item span { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.summary-item em { display: inline-block; margin-left: 4px; font-size: 10px; font-style: normal; color: var(--accent); }
.summary-item.rarity-legendary { border-color: #c79b59; }
.summary-item.rarity-epic { border-color: #8765a8; }
.summary-item.rarity-rare { border-color: #587f9f; }
.settlement-enemy-group + .settlement-enemy-group { margin-top: 12px; }
.history-summary { margin: 16px 0; }
.settlement-next {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding-top: 22px;
}
.settlement-next p {
  color: var(--muted);
}
.rewind-panel {
  padding: 30px;
}
.checkpoint {
  padding: 24px 0;
}
.checkpoint small {
  margin-top: 8px;
}
.log-panel {
  padding: 28px;
}
.logs {
  max-height: 65vh;
}
.log {
  padding-bottom: 20px;
  margin-bottom: 12px;
}
.log p {
  line-height: 1.9;
}
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
}
.item span {
  float: none;
  text-align: right;
}
.item small {
  grid-column: 1 / -1;
}
/* Build descriptions use the full card width, including long mastery rewards. */
.item.build-item {
  grid-template-columns: minmax(0, 1fr);
}
.item.build-item > * {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.item.build-item > span {
  text-align: left;
}
.item.build-item > p {
  margin: 4px 0;
}
.build-item[data-rarity=rare] > b { color: #8bbbd6; }
.build-item[data-rarity=epic] > b { color: #d6bc7f; }
.build-item[data-rarity=legendary] > b { color: #ed9470; }
.item + h3 {
  margin-top: 36px;
}
.ending-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ending {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
}
.ending h2 {
  margin-top: 0;
  font-size: 21px;
}
.ending.earned {
  border-color: #8e7e50;
  color: var(--accent);
}
@media (max-width: 800px) {
  main {
    padding: 24px 20px 48px;
  }
  header {
    padding: 22px 20px;
  }
  nav {
    padding: 0 20px 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
  }
  nav button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 12px;
  }
  .wallet {
    gap: 10px;
  }
  .wallet span {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .wallet b {
    padding: 0;
  }
  .brand small {
    letter-spacing: 0.1em;
  }
  .section-nav {
    margin-bottom: 24px;
    padding-bottom: 16px;
    gap: 2px;
  }
  .section-nav button {
    padding: 8px 10px;
  }
  .main-stats {
    padding: 20px;
    gap: 14px;
  }
  .main-stats .metric + .metric {
    padding-left: 14px;
  }
  .main-stats strong {
    font-size: 22px;
  }
  .playback {
    gap: 10px;
  }
  .playback .muted {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }
  .playback button:last-child {
    margin-left: auto;
  }
  .encounter,
  .quiet-stage,
  .settlement,
  .rewind-panel {
    padding: 24px;
  }
  .settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .settings .check {
    grid-column: 1 / -1;
  }
  .loadout-summary {
    gap: 16px;
    align-items: flex-start;
  }
  .loadout-summary button {
    white-space: nowrap;
    padding: 8px 12px;
  }
  .opening-grid {
    gap: 22px;
  }
  .opening {
    padding: 26px;
  }
  .opening .actions {
    padding-top: 8px;
  }
  .opening .actions button {
    flex: 1;
  }
  .ending-grid {
    grid-template-columns: 1fr;
  }
  .checkpoint {
    display: block;
  }
  .checkpoint button {
    margin-top: 16px;
  }
}
@media (max-width: 420px) {
  header {
    gap: 14px;
  }
  .brand {
    font-size: 20px;
    letter-spacing: 0.08em;
  }
  .brand small {
    font-size: 9px;
  }
  .wallet {
    font-size: 10px;
  }
  .wallet b {
    font-size: 18px;
  }
  .growth-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .settings {
    grid-template-columns: 1fr;
  }
  .item {
    grid-template-columns: 1fr;
  }
  .item span {
    text-align: left;
  }
}
/* One-screen game layout: compact chrome, paged collections, viewport fitting. */
body { line-height: 1.5; }
#app { width: 100%; }
header { padding: 10px 24px; }
.brand { font-size: 22px; }
.brand small { display: none; }
nav { padding: 0 24px 8px; gap: 8px; }
nav button, button { padding: 6px 12px; }
main { max-width: 1200px; padding: 10px 24px; }
.page { min-height: 0; }
footer { padding: 6px; }
h1 { font-size: 26px; margin: 4px 0 8px; }
h2 { font-size: 20px; margin: 8px 0; }
h3 { font-size: 16px; margin-bottom: 8px; }
p { margin: 5px 0 8px; }
.intro { max-width: none; padding: 4px 0 10px; }
.intro p { line-height: 1.5; }
.card, .panel, .opening, .growth-grid .panel { padding: 14px; margin-bottom: 10px; }
.opening-grid { gap: 12px; }
.opening h2 { margin: 7px 0; }
.opening .metrics { margin: 8px 0; padding: 8px 0; gap: 6px 14px; }
.metric strong { font-size: 21px; }
.opening .actions { padding-top: 6px; }
.opening .actions button { padding: 5px 9px; }
.actions, .row { gap: 8px; margin-top: 8px; margin-bottom: 8px; }
.loadout-summary { padding: 8px 0; margin-top: 6px; gap: 12px; }
.journey-heading { padding: 0 0 8px; }
.power strong { font-size: 30px; }
.section-nav { padding-bottom: 7px; margin-bottom: 10px; gap: 4px; }
.section-nav button { padding: 5px 12px; }
.main-stats, .stats { padding: 10px 16px; gap: 10px; margin-bottom: 10px; }
.playback { gap: 8px; margin-bottom: 10px; }
.encounter, .quiet-stage { min-height: 0; padding: 16px; }
.encounter h2, .quiet-stage h2 { margin: 6px 0; }
.encounter > p, .quiet-stage > p { font-size: 14px; line-height: 1.6; }
.risk { padding: 8px 12px; margin: 8px 0; line-height: 1.6; }
.encounter .actions { padding-top: 0; gap: 8px; }
.settlement-next { padding-top: 10px; margin-top: 12px; }
.checkpoint { padding: 10px 0; }
.checkpoint small { margin-top: 4px; }
.settings { padding-top: 10px; gap: 10px 18px; }
.settings label { gap: 4px; }
.settings select, .settings input[type=number] { padding: 6px; }
.save-panel { margin-top: 10px; }
.save-panel .actions { margin-top: 8px; }
.relic-grid { gap: 10px; }
.relic { padding: 10px; }
.ending-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.ending { padding: 12px; }
.ending h2 { font-size: 17px; }
.logs { max-height: none; overflow: visible; padding-right: 0; }
.log { margin-bottom: 5px; padding-bottom: 6px; }
.log p { line-height: 1.5; }
.item { padding: 7px 0; margin-bottom: 4px; gap: 2px 12px; }
.item + h3 { margin-top: 12px; }
.formula { margin-bottom: 8px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; grid-column: 1/-1; padding-top: 8px; }
@media (orientation: landscape) {
  .opening-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .growth-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .relic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .settings { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .settings .check { grid-column: auto; }
  .checkpoint { display: flex; align-items: center; }
  .checkpoint button { margin-top: 0; }
}
@media (orientation: portrait) {
  header { padding: 8px 14px; }
  nav { padding: 0 14px 7px; }
  main { padding: 8px 14px; }
  .opening-grid { gap: 7px; }
  .opening { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; padding: 10px; }
  .opening > small, .opening > h2, .opening > p { grid-column: 1; margin: 0; }
  .opening .metrics { grid-column: 2; grid-row: 1/4; margin: 0; padding: 4px; }
  .opening .actions { grid-column: 1/-1; }
  .opening .actions button { flex: 1; }
  .relic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .growth-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ending-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .playback .muted { flex-basis: auto; order: initial; }
}
/* Shared phone canvas on every device (width:height = 9:18). */
html { min-height: 100%; background: #0c1210; }
body { min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; }
#app { width: 420px; flex: 0 0 420px; min-height: 840px; background: var(--bg); box-shadow: 0 0 70px #0007; }
header { padding: 12px 14px; }
.brand { font-size: 22px; }
.wallet { gap: 12px; font-size: 11px; }
.wallet span { display: flex; flex-direction: column; align-items: flex-end; }
.wallet b { font-size: 20px; padding: 0; }
nav { padding: 0 12px 10px; gap: 5px; flex-wrap: nowrap; overflow: visible; }
nav button { flex: 1; padding: 8px 4px; font-size: 14px; white-space: nowrap; }
button { min-height: 46px; padding: 10px 14px; font-size: 15px; }
main { padding: 10px 14px; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
.intro { padding: 0 0 8px; }
.intro > small { font-size: 11px; }
.intro p { font-size: 12px; margin: 4px 0; }
.opening-grid { grid-template-columns: 1fr; gap: 8px; }
.opening { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 10px 12px; margin: 0; }
.opening > small, .opening > h2, .opening > p { grid-column: 1; margin: 0; }
.opening > small { font-size: 10px; }
.opening > p { font-size: 11px; line-height: 1.45; }
.opening h2 { font-size: 18px; }
.opening .metrics { grid-column: 2; grid-row: 1/4; margin: 0; padding: 3px 0 3px 10px; gap: 3px 10px; border: 0; border-left: 1px solid var(--border); }
.opening .metric small { font-size: 10px; }
.opening .metric strong { font-size: 19px; }
.opening .actions { grid-column: 1/-1; padding-top: 5px; margin: 0; }
.opening .actions button { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 14px; }
.row { font-size: 11px; }
.loadout-summary { padding: 7px 0; margin-top: 4px; font-size: 12px; }
.loadout-summary button { min-height: 44px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.growth-grid, .relic-grid, .ending-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.growth-grid .panel { padding: 12px; }
.growth-grid p { font-size: 12px; }
.growth-grid button { width: 100%; }
.relic { min-height: 90px; padding: 12px; font-size: 14px; }
.relic small { font-size: 12px; }
.section-nav { gap: 3px; overflow: visible; }
.section-nav button { flex: 1; padding: 8px 4px; font-size: 13px; min-height: 44px; }
.settings { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.settings select, .settings input[type=number] { min-height: 44px; font-size: 15px; }
.settings .check { grid-column: 1/-1; min-height: 44px; }
.settings input[type=checkbox] { width: 22px; height: 22px; }
.save-panel .actions button { flex: 1; }
.main-stats { gap: 8px; padding: 10px; }
.main-stats .metric + .metric { padding-left: 10px; }
.main-stats .metric small { font-size: 11px; }
.playback { gap: 6px; }
.playback .muted { order: 3; flex-basis: 100%; }
.playback button { padding: 8px 10px; font-size: 14px; }
.encounter .actions button { min-height: 48px; flex: 1; min-width: 0; }
.checkpoint { display: block; }
.checkpoint button { width: 100%; margin-top: 8px; }
.pagination button { flex: 1; }
.log p { font-size: 13px; }
footer { font-size: 10px; }
.opening { grid-template-rows: 16px 27px 30px auto 44px; }
.opening > small { grid-row: 1; }
.opening > h2 { grid-row: 2; }
.opening > p:not(.muted) { grid-row: 3; }
.opening > p.muted { grid-column: 1/-1; grid-row: 4; font-size: 10px; }
.opening > p.muted br { display: none; }
.opening .metrics { grid-row: 1/4; }
.opening .actions { grid-row: 5; }
.opening .actions button { min-height: 44px; }
.intro h1 { font-size: 23px; }
.opening { display: flex; flex-direction: column; padding: 16px; gap: 8px; }
.opening > p.muted { font-size: 12px; }
.opening > p:not(.muted) { font-size: 13px; }
.opening h2 { font-size: 23px; }
.opening .metrics { width: 100%; margin: 4px 0; padding: 10px 0; border-left: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); gap: 8px; }
.opening .metric small { font-size: 12px; }
.opening .metric strong { font-size: 25px; }
.opening .actions { display: flex; width: 100%; padding-top: 4px; }
.opening .actions button { min-height: 50px; font-size: 16px; }
.home-screen { min-height: 610px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center; padding: 30px 18px; gap: 16px; }
.home-screen > small { color: var(--accent); letter-spacing: .2em; }
.home-screen p { color: var(--muted); line-height: 2; }
.home-screen button { min-height: 54px; font-size: 18px; }
/* Standalone title screen, without in-game navigation or wallet. */
.page[data-page=home] { min-height: calc(var(--canvas-viewport-height, 840px) - 20px); }
.splash-screen { min-height: inherit; display: flex; flex-direction: column; align-items: center; position: relative; isolation: isolate; padding: 0 4px 18px; }
.splash-mark { position: absolute; top: 150px; color: #d6bc7f08; font-family: "Songti SC",serif; font-size: 300px; line-height: 1; z-index: -1; pointer-events: none; }
.splash-title { text-align: center; margin: 84px 0 64px; }
.splash-title > small { color: var(--muted); font-size: 12px; letter-spacing: .35em; }
.splash-title h1 { font-size: 48px; letter-spacing: .16em; margin: 20px 0 12px; font-family: "Songti SC",serif; }
.splash-title h1 span { color: var(--accent); }
.splash-title p { color: var(--muted); font-size: 13px; letter-spacing: .2em; }
.splash-menu { display: flex; flex-direction: column; gap: 8px; width: 280px; }
.splash-menu button { min-height: 56px; font-size: 18px; letter-spacing: .14em; }
.splash-menu .splash-resume { min-height: 44px; font-size: 13px; border-color: transparent; color: var(--muted); background: transparent; }
.splash-topbar { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.splash-tools { margin-left:auto; display: flex; gap: 4px; }
.cloud-badge { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; min-height:44px; padding:6px 4px; border:0; background:transparent; color:var(--muted); font-size:11px; white-space:nowrap; }
.cloud-badge svg { flex-shrink:0; }
.cloud-badge i { width:5px; height:5px; border-radius:50%; background:#91958a; }
.cloud-badge[data-status=synced] { color:#b9d6bd; }
.cloud-badge[data-status=synced] i { background:#8bc49c; }
.cloud-badge[data-status=pending] i, .cloud-badge[data-status=busy] i { background:#d6bc7f; }
.cloud-badge:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.splash-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 48px; min-height: 64px; padding: 6px 4px; border: 0; background: transparent; color: var(--muted); font-size: 11px; line-height: 1.4; letter-spacing: .08em; }
.splash-entry-icon { display: grid; place-items: center; }
.splash-entry svg { display: block; }
.splash-tools .splash-entry { min-width: 60px; gap: 4px; font-size: 11px; }
.splash-tools svg { width: 20px; height: 20px; }
.splash-shortcuts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; margin: 32px 0 40px; padding: 18px 4px 0; border-top: 1px solid #d6bc7f20; }
.splash-shortcuts .splash-entry { min-height: 88px; color: #c1cabc; }
.splash-shortcuts .splash-entry-icon { width: 48px; height: 48px; border: 1px solid #d6bc7f38; border-radius: 50%; color: var(--accent); background: #d6bc7f07; }
.splash-entry:hover { background: #d6bc7f0b; color: var(--accent); }
.splash-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.splash-entry:hover .splash-entry-icon { border-color: var(--accent); }
.splash-footnote { color: var(--muted); font-size: 11px; letter-spacing: .2em; margin-top: auto; text-align: center; }
.starting-skill { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; }
.starting-skill > small { grid-column: 1/-1; font-size: 10px; color: var(--accent); }
.starting-skill > b { font-size: 14px; }
.starting-skill > span { font-size: 10px; color: var(--muted); align-self: center; }
.starting-talents { width: 100%; }
.starting-talents > small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.starting-talent { display: grid; grid-template-columns: 32px 64px 1fr; align-items: center; gap: 6px; padding: 5px 0; font-size: 11px; }
.starting-talent b { font-size: 12px; }
.starting-talent .rarity { font-size: 10px; color: var(--muted); border: 1px solid currentColor; border-radius: 3px; text-align: center; }
.starting-talent[data-rarity=稀有] .rarity, .starting-talent[data-rarity=稀有] b { color: #8bbbd6; }
.starting-talent[data-rarity=史诗] .rarity, .starting-talent[data-rarity=史诗] b { color: #d7b373; }
.opening { gap: 5px; padding: 12px; }
.opening .metrics { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 8px 0; }
.opening .metric strong { font-size: 23px; }
.opening .metric small { font-size: 10px; }
.run-talents { margin-bottom: 10px; }
.opening-intro h1 { margin: 0 0 4px; }
.opening-intro p { font-size: 11px; }
.opening { padding: 10px 12px; gap: 3px; }
.starting-skill { grid-template-columns: 54px 1fr; padding: 6px 8px; gap: 0 8px; }
.starting-skill > small { grid-column: 1; grid-row: 1/3; align-self: center; }
.starting-skill > b, .starting-skill > span { grid-column: 2; }
.starting-skill > b { font-size: 13px; }
.starting-talent { padding: 4px 0; }
.footer-feedback { min-height: 32px; font-size: 11px; padding: 3px 10px; margin-left: 8px; }
.feedback-form { display: flex; flex-direction: column; gap: 12px; }
.feedback-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.feedback-form select, .feedback-form input { min-height: 44px; }
.feedback-form textarea { width: 100%; resize: none; font: inherit; font-size: 15px; background: #151d19; border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 10px; }
.feedback-form .muted { font-size: 11px; }
.feedback-receipt { overflow-wrap: anywhere; font-size: 12px; color: var(--accent); }
footer { position: relative; padding: 6px 50px 6px 6px; min-height: 27px; }
.footer-feedback { position: absolute; right: 5px; top: 0; min-height: 27px; margin: 0; }
/* Journey dashboard: character, encounter and journal share one screen. */
.page:has(.character-overview) .journey-heading { padding-bottom: 4px; }
.page:has(.character-overview) .journey-heading h1 { font-size: 21px; }
.page:has(.character-overview) .section-nav { margin-bottom: 8px; }
.character-overview { padding: 10px 12px; }
.overview-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.overview-stats small { font-size: 10px; }
.overview-stats strong { font-size: 20px; }
.character-overview p { font-size: 12px; color: var(--accent); margin: 6px 0 2px; }
.character-overview > small { font-size: 11px; }
.playback { flex-wrap: nowrap; margin-bottom: 8px; }
.playback .muted { order: initial; flex-basis: auto; font-size: 10px; margin: 0; }
.playback button { min-height: 40px; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
.page:has(.character-overview) .encounter, .page:has(.character-overview) .quiet-stage { padding: 12px; }
.page:has(.character-overview) .encounter h2, .page:has(.character-overview) .quiet-stage h2 { font-size: 20px; margin: 4px 0; }
.page:has(.character-overview) .encounter > p, .page:has(.character-overview) .quiet-stage > p { font-size: 12px; line-height: 1.6; margin-bottom: 7px; }
.risk { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 7px 8px; }
.risk b { color: var(--accent); }
.journey-journal { padding: 10px 12px; background: #101815; border-color: #465b4c; margin-bottom: 0; }
.journey-journal .row { margin: 0 0 5px; justify-content: space-between; }
.journey-journal h3 { font-size: 14px; margin: 0; }
.journey-journal button { min-height: 30px; padding: 3px 8px; font-size: 11px; }
.journey-journal .log { padding: 0 0 5px 9px; margin: 0 0 5px; }
.journey-journal .log:last-child { margin: 0; padding-bottom: 0; }
.journey-journal .log small { font-size: 9px; }
.journey-journal .log p { font-size: 11px; line-height: 1.4; margin: 2px 0 0; }
.journey-journal .log p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.character-overview p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Collectible, fate and ending interludes stay inside the shared phone canvas. */
#app { position: relative; }
.interlude-backdrop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: #080e0cf2; padding: 26px; animation: veil-in .7s ease both; }
.interlude { width: 100%; text-align: center; padding: 34px 16px; border: 1px solid #9b8450; border-radius: 12px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%,#67512f50,transparent 70%),#151e19; box-shadow: 0 0 70px #d6bc7f20; animation: reveal-in 1s ease both; }
.interlude::before, .interlude::after { content: ''; position: absolute; width: 150px; height: 150px; left: calc(50% - 75px); top: 30px; border: 1px solid #d6bc7f25; border-radius: 50%; pointer-events: none; animation: halo-turn 12s linear infinite; }
.interlude::after { width: 180px; height: 180px; top: 15px; left: calc(50% - 90px); border-style: dashed; animation-direction: reverse; }
.interlude-symbol { height: 160px; font: 90px/160px "Songti SC",serif; color: var(--accent); text-shadow: 0 0 35px #dec88e88; }
.interlude > small { color: var(--accent); letter-spacing: .2em; }
.interlude h2 { font-size: 30px; margin: 15px 0; }
.interlude p { line-height: 2; font-size: 16px; margin: 0 0 20px; }
.interlude > .muted { display: block; font-size: 12px; line-height: 1.8; }
.interlude button { width: 100%; margin-top: 28px; min-height: 52px; }
.interlude-ending { background: radial-gradient(ellipse at 50% 30%,#465c5455,transparent 70%),#111c18; }
.interlude-relic { border-color: #d6bc7f; box-shadow: 0 0 80px #d6bc7f44; }
.overview-stats { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.overview-stats .metric:nth-child(2) strong { font-size: 12px; line-height: 1.5; margin-top: 4px; }
.journey-gear { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 4px; }
.journey-gear > div { display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; }
.journey-gear > div > small { font-size: 10px; flex: 0 0 24px; padding-top: 3px; }
.journey-gear > div > div { display: flex; gap: 3px; flex-wrap: wrap; font-size: 10px; }
.gear-tag { display: inline-flex; gap: 3px; align-items: center; padding: 2px 4px; border: 1px solid #46534a; border-radius: 3px; font-size: 10px; }
.gear-tag small { font-size: 9px; }
.gear-tag em { font-style: normal; font-size: 9px; color: #abd1b0; }
.gear-tag[data-rarity=rare] { color: #8bbbd6; border-color: #42687c; }
.gear-tag[data-rarity=epic] { color: #d6bc7f; border-color: #8e7847; }
.encounter > small { animation: event-light 1.2s ease; }
.recent-logs .log { animation: none; }
@keyframes veil-in { from { opacity:0; } to { opacity:1; } }
@keyframes reveal-in { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes halo-turn { to { transform:rotate(360deg); } }
@keyframes event-light { from { text-shadow:0 0 18px #d6bc7f; } to { text-shadow:none; } }
@keyframes log-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .interlude-backdrop,.interlude,.interlude::before,.interlude::after,.encounter > small,.recent-logs .log { animation:none; } }
/* Keep interlude text readable from its first frame; animate position and glow. */
@keyframes veil-in { from { background:#080e0ce8; } to { background:#080e0cf2; } }
@keyframes reveal-in { from { transform:translateY(16px) scale(.97); } to { transform:none; } }
/* Distinct visual languages: fate scroll, relic archive, and ending landscapes. */
.interlude::before,.interlude::after { display:none; }
.fate-art,.relic-art,.ending-art { position:relative; height:170px; margin-bottom:20px; overflow:hidden; }
.fate-art { display:grid; place-items:center; }
.fate-art b { font:80px "Songti SC",serif; color:#a5d3c8; text-shadow:0 0 24px #68cbb788; }
.fate-art i { position:absolute; width:130px; height:130px; border:1px solid #7dc0b080; transform:rotate(45deg); animation:fate-orbit 10s linear infinite; }
.fate-art i:nth-child(2) { width:155px; height:155px; border-style:dashed; animation-direction:reverse; }
.interlude-special { border-color:#6d9f91; background:radial-gradient(ellipse at 50% 20%,#28564b,transparent 70%),#111d19; }
.relic-art { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.relic-art b { display:grid; place-items:center; width:105px; height:120px; border:2px solid #e5c57c; border-radius:8px; font:64px "Songti SC",serif; background:linear-gradient(145deg,#715725,#211b0e); box-shadow:0 0 35px #e3bb5a66; animation:relic-rise 2s ease both; }
.relic-art span { font-size:10px; letter-spacing:.35em; color:#e5c57c; margin-top:9px; }
.relic-art i { position:absolute; width:220px; height:2px; background:linear-gradient(90deg,transparent,#e5c57c,transparent); transform:rotate(30deg); animation:archive-ray 3s ease infinite; }
.relic-art i:nth-child(2) { transform:rotate(-30deg); animation-delay:.7s; }
.ending-art { height:190px; display:grid; place-items:center; border-bottom:1px solid #ffffff22; }
.ending-art b { font:75px "Songti SC",serif; z-index:2; }
.ending-art i { position:absolute; display:block; }
.art-guard { background:linear-gradient(#071425,#27374b); }
.art-guard i:first-child { width:70px; height:70px; border-radius:50%; background:#d5e2ec; top:20px; right:35px; animation:moon-rise 4s ease both; }
.art-guard i:nth-child(2) { width:100%; height:55px; bottom:0; background:repeating-linear-gradient(90deg,#19222a 0 30px,transparent 30px 42px),linear-gradient(transparent 15px,#19222a 15px); }
.art-guard b { color:#dbe7f0; text-shadow:0 0 22px #8cbbe9; }
.art-ember { background:radial-gradient(ellipse at 50% 90%,#753919,#140d0a 80%); }
.art-ember i { width:7px; height:7px; border-radius:50%; background:#ffc573; bottom:5px; left:30%; animation:ember-rise 3s ease-out infinite; }
.art-ember i:nth-child(2) { left:65%; animation-delay:1s; }
.art-ember i:nth-child(3) { left:48%; animation-delay:1.8s; }
.art-ember b { color:#f7b769; text-shadow:0 0 24px #f17826; animation:ember-glow 2s ease infinite alternate; }
.art-dawn { background:linear-gradient(#29353c,#b68b56); }
.art-dawn i:first-child { width:100px; height:100px; border-radius:50%; background:#ffe7ac; bottom:-35px; box-shadow:0 0 50px #ffd98d; animation:sun-rise 5s ease both; }
.art-dawn i:nth-child(2) { width:240px; height:240px; background:repeating-conic-gradient(from 0deg,transparent 0deg 12deg,#fff0c433 12deg 17deg); bottom:-170px; animation:halo-turn 30s linear infinite; }
.art-dawn b { color:#fff0c4; text-shadow:0 0 16px #ffe39a; }
.art-travel { background:linear-gradient(#1d3541,#526d64); perspective:180px; }
.art-travel i:first-child { width:70px; height:160px; bottom:-80px; background:linear-gradient(#baa581,#605c4b); transform:rotateX(45deg); clip-path:polygon(42% 0,58% 0,100% 100%,0 100%); }
.art-travel i:nth-child(2),.art-travel i:nth-child(3) { width:130px; height:70px; background:#213d38; bottom:0; left:-30px; clip-path:polygon(0 100%,50% 0,100% 100%); animation:travel-pan 6s ease both; }
.art-travel i:nth-child(3) { left:auto; right:-30px; background:#2d4941; }
.art-travel b { color:#dae9df; animation:traveler-steps 3s ease-in-out infinite; }
.art-unfinished,.art-rest { background:linear-gradient(#172323,#3c4842); }
.art-unfinished i:first-child,.art-rest i:first-child { width:32px; height:45px; border:2px solid #b3a47e; border-radius:10px; bottom:18px; box-shadow:0 0 25px #d9b55c44; animation:lantern-dim 6s ease both; }
.art-unfinished i:nth-child(2),.art-rest i:nth-child(2) { width:3px; height:38px; background:#6f796e; bottom:62px; }
.art-unfinished b,.art-rest b { color:#b9c3b5; animation:mist-drift 6s ease both; }
.ending-guard { border-color:#8199b0; }.ending-ember { border-color:#c08547; }.ending-dawn { border-color:#edd098; }.ending-travel { border-color:#82a994; }.ending-unfinished { border-color:#768678; }
.journey-status { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
.status-tag { font-size:9px; border:1px solid #456457; color:#a8c6b4; border-radius:3px; padding:2px 4px; }
.status-tag.negative { border-color:#885d50; color:#efaa91; }
@keyframes fate-orbit { to { transform:rotate(405deg); } }
@keyframes relic-rise { from { transform:translateY(65px) scale(.65); } to { transform:none; } }
@keyframes archive-ray { 0%,100% { opacity:.15; } 50% { opacity:1; } }
@keyframes moon-rise { from { transform:translateY(65px); } to { transform:none; } }
@keyframes ember-rise { from { transform:translateY(0); opacity:1; } to { transform:translateY(-170px) translateX(20px); opacity:0; } }
@keyframes ember-glow { to { text-shadow:0 0 45px #ff963c; } }
@keyframes sun-rise { from { transform:translateY(70px); } to { transform:translateY(-25px); } }
@keyframes travel-pan { from { transform:translateX(20px); } to { transform:none; } }
@keyframes traveler-steps { 50% { transform:translateY(-5px); } }
@keyframes lantern-dim { from { box-shadow:0 0 45px #edca7d; } to { box-shadow:0 0 12px #a38d5c66; } }
@keyframes mist-drift { from { transform:translateX(-10px); } to { transform:translateX(10px); } }
@media (prefers-reduced-motion:reduce) { .fate-art *, .relic-art *, .ending-art * { animation:none !important; } }
.page:has(.character-overview) .journey-heading h1 { font-size:19px; line-height:1.25; margin:2px 0 0; }
.page:has(.character-overview) .section-nav button { min-height:38px; }
.journey-status { gap:2px; }
.reading-note { font-size:11px; }

.update-notice { position:fixed; z-index:100; left:50%; bottom:18px; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 24px); display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #d6bc7f; border-radius:12px; background:#171c1a; color:#eee4cd; box-shadow:0 4px 24px #0008; font-size:14px; }
.update-notice button { white-space:nowrap; }
.release-version { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.splash-footnote .release-version { display: block; margin-top: 8px; }

.journey-goal{margin:16px 0;padding:16px;border:1px solid #b88b50;border-radius:12px;text-align:left}.journey-goal summary{font-weight:700;cursor:pointer}.journey-goal p{font-size:14px;line-height:1.8}.power-gain{color:var(--accent,#d9ad67);display:block;margin:6px 0}.settlement-power{display:grid;gap:8px;text-align:center;padding:24px 12px;margin:16px 0;background:linear-gradient(135deg,#33261b,#171a22);border:1px solid #c79b59;border-radius:16px;color:#f1d7a1}.settlement-power strong{font-size:clamp(42px,10vw,72px);line-height:1.1;font-variant-numeric:tabular-nums}.settlement-power span:last-child{font-size:12px;line-height:1.7}
.settlement-power { min-width: 0; container-type: inline-size; }
.settlement-power strong {
  min-width: 0;
  max-width: 100%;
  /* Fit the complete number to the card, including thousands separators. */
  font-size: min(72px, calc(100cqi / var(--power-chars, 9) / 0.68));
  letter-spacing: normal;
  white-space: nowrap;
}
.settlement-power span { min-width: 0; overflow-wrap: anywhere; }

.goal-dialog{max-height:82vh;display:flex;flex-direction:column;text-align:left}.goal-content{overflow:auto;min-height:0;overscroll-behavior:contain}.goal-content p{font-size:14px;line-height:1.65;margin:10px 0}.goal-dialog h2{font-size:22px}.goal-dialog>button{flex-shrink:0}.reward-power{display:grid;gap:5px;margin:14px 0;padding:12px;border:1px solid #c79b59;border-radius:12px;color:#f1d7a1}.reward-power strong{font-size:32px}.reward-power span{font-size:14px}.interlude:has(.reward-power){max-height:86vh;overflow:auto}

.scene-reward{margin:12px 0;padding:12px;border:1px solid #c79b59;border-radius:12px;color:#f1d7a1}.scene-reward p{margin:6px 0;font-size:15px}.scene-reward small{display:block;line-height:1.6}.interlude:has(.scene-reward){max-height:86vh;overflow:auto}.interlude:has(.scene-reward) .fate-art{height:100px;transform:scale(.65);margin:0 auto}

.failure-explanation{padding:12px;margin:12px 0;border:1px solid #977f65;border-radius:12px;text-align:left}.failure-explanation h3{font-size:17px;margin:0 0 8px}.failure-explanation p{font-size:14px;line-height:1.7;margin:8px 0}.failure-encouragement{color:#e0c68d}.interlude:has(.failure-explanation){max-height:86vh;overflow:auto}.interlude:has(.failure-explanation) .ending-art{height:100px;transform:scale(.65);margin:0 auto}

.starting-skill>.skill-description{grid-column:2;font-size:10px;line-height:1.5}

.atlas-grid{display:grid;gap:10px}.atlas-entry h3{margin:6px 0}.atlas-entry p{font-size:13px;line-height:1.65;margin:6px 0}.atlas-entry>small{color:var(--muted)}.atlas-effect,.skill-specialty{color:#d9be85;font-size:12px;line-height:1.65}.atlas-filters{display:grid;grid-template-columns:1fr 110px;gap:10px}.atlas-filters label{font-size:12px}.atlas-filters input,.atlas-filters select{width:100%;min-width:0;margin-top:5px}.atlas-entry details{font-size:12px}.atlas-controls .section-nav{flex-wrap:wrap}

/* Keep the journey anchors steady as encounters and results change. */
.page:has(.character-overview) .character-overview {
  height: 148px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.page:has(.character-overview) :is(.encounter, .quiet-stage) {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-anchor: none;
}
.page:has(.character-overview) .encounter > small,
.page:has(.character-overview) .encounter > h2,
.page:has(.character-overview) .encounter > .risk,
.page:has(.character-overview) .encounter > .actions {
  flex-shrink: 0;
}
.page:has(.character-overview) .encounter > p {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.page:has(.character-overview) .encounter > .actions {
  margin-top: auto;
  margin-bottom: 0;
}
.page:has(.character-overview) .quiet-stage { justify-content: center; }
.page:has(.character-overview) .journey-journal {
  height: 202px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-anchor: none;
}
.interlude-battle {
  height: 480px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: none;
}
.interlude-battle .fate-art { height: 80px; margin-bottom: 10px; }
.interlude-battle h2 { margin: 10px 0; }
.interlude-battle p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.interlude-battle button { margin-top: 14px; }

.journey-journal > .row { flex-shrink: 0; }
.journey-journal .recent-logs {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.journey-journal .recent-logs .log {
  margin: 0;
  padding: 0 0 0 9px;
  min-height: 0;
  overflow: hidden;
}

/* Battle results reserve a visible footer and scroll only the outcome details. */
.battle-result-backdrop {
  position: fixed;
  inset: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: var(--canvas-viewport-height, 840px);
  padding: 24px;
  animation: none;
}
.battle-result {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
  border: 1px solid #9b8450;
  border-radius: 12px;
  background: #151e19;
  text-align: center;
  box-shadow: 0 0 40px #0006;
}
.battle-result-heading {
  display: block;
  flex-shrink: 0;
  padding: 0 0 12px;
  margin: 0;
  width: 100%;
}
.battle-result-heading small { color: var(--accent); font-size: 11px; }
.battle-result-heading h2 { margin: 5px 0 0; font-size: 24px; }
.battle-result-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.battle-result-body p { font-size: 14px; line-height: 1.8; margin: 0; }
.battle-result-body .scene-reward { margin: 12px 0 0; text-align: left; }
.battle-result-body .scene-reward p { margin: 8px 0 0; font-size: 13px; }
.battle-result-footer { flex-shrink: 0; padding-top: 16px; }
.battle-result-footer small { display: block; font-size: 11px; color: var(--muted); }
.battle-result-footer button { width: 100%; min-height: 48px; margin-top: 10px; }
.battle-result-footer button { transition: background-color .15s, border-color .15s; }

/* Choices and their outcomes occupy the same journey stage. */
.page:has(.character-overview) .inline-result {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
}
.inline-result {
  display: flex;
  flex-direction: column;
  height: 220px;
  padding: 12px;
  overflow: hidden;
  overflow-anchor: none;
  border-color: #6d9f91;
  background: linear-gradient(145deg, #20362f, #18221e);
}
.inline-result > small { color: var(--accent); font-size: 10px; flex-shrink: 0; }
.inline-result h2 { font-size: 20px; margin: 4px 0 6px; flex-shrink: 0; }
.inline-result-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.inline-result-body p { font-size: 12px; line-height: 1.6; margin: 0 0 6px; }
.inline-reward { border-left: 2px solid #a38c55; padding-left: 8px; margin-top: 8px; }
.inline-reward b { font-size: 12px; color: var(--accent); }
.inline-reward small { font-size: 10px; color: var(--muted); }
.inline-power { color: var(--accent); }
/* 法宝羁绊：事件卡羁绊行、构筑页羁绊块、器脉标签。器脉用中性色，具名按凡／灵／仙映射品级配色。 */
.inline-bonds { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.bond-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #46534a; border-radius: 999px; font-size: 12px; line-height: 1.6; color: #c9d4c6; background: #141c17; overflow-wrap: anywhere; }
.bond-tag[data-rarity=rare], .bond-row[data-rarity=rare] > b { color: #8bbbd6; border-color: #42687c; }
.bond-tag[data-rarity=epic], .bond-row[data-rarity=epic] > b { color: #d6bc7f; border-color: #8e7847; }
.bond-tag[data-rarity=legendary], .bond-row[data-rarity=legendary] > b { color: #e8a0c9; border-color: #8a5577; }
.bond-tag[data-rarity=lineage], .bond-row[data-rarity=lineage] > b { color: #b8c7bd; border-color: #566a5c; }
.bond-block { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid #2d3a34; border-radius: 8px; background: #121a15; }
.bond-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.bond-block-head small { color: var(--muted); font-size: 11px; }
.bond-row { display: grid; gap: 2px; padding: 4px 0; border-top: 1px solid #1f2a24; font-size: 12px; }
.bond-row > b { font-size: 13px; }
.bond-row > small { color: var(--muted); line-height: 1.5; }
.bond-upcoming { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #1f2a24; }
.bond-upcoming > small { color: var(--muted); font-size: 11px; }
.lineage-tag { font-weight: 400; font-size: 10px; color: var(--muted); border: 1px solid #46534a; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.summary-item.rarity-lineage b { color: #b8c7bd; }
.inline-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; flex-shrink: 0; }
.inline-result-actions small { font-size: 10px; color: var(--muted); }
.inline-result-actions button { min-height: 40px; font-size: 12px; margin: 0; transition: background-color .15s, border-color .15s; }
.result-relic, .inline-result:has(.inline-reward) { border-color: #a38c55; }

/* Motion lives inside the card: no translations or fades on readable content. */
.inline-result { position: relative; isolation: isolate; --result-glow: #78b8a5; animation: result-edge 1.2s ease-out both; }
.inline-result > :not(.result-art) { position: relative; z-index: 1; }
.inline-result > h2 { padding-right: 64px; }
.inline-result::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--result-glow) 15%, transparent) 48%, transparent 76%);
  border-radius: inherit;
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: result-light 1.1s ease-out both;
}
.visual-victory, .visual-relic { --result-glow: #e0bc69; }
.visual-defeat { --result-glow: #c97769; background: linear-gradient(145deg, #352622, #1e201d); }
.visual-escape { --result-glow: #91bdcf; }
.visual-story { --result-glow: #b7a4d0; }
.result-art { position: absolute; right: 14px; top: 10px; width: 62px; height: 62px; color: var(--result-glow); opacity: .65; pointer-events: none; z-index: 0; }
.result-art b { position: absolute; inset: 0; display: grid; place-items: center; font: 34px "Songti SC", serif; text-shadow: 0 0 16px currentColor; }
.result-art i { position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: 50%; animation: result-ring 1.4s ease-out both; }
.result-art i:nth-child(2) { inset: 0; opacity: .35; animation-delay: .15s; }
.visual-relic .result-art i { border-radius: 6px; transform: rotate(12deg); animation: result-relic 1.3s ease-out both; }
.visual-story .result-art i { border-radius: 3px; border-style: dashed; }
.visual-escape .result-art i { border-width: 1px 0 0; border-radius: 50%; animation: result-wind 1.2s ease-out both; }
.visual-defeat .result-art i { animation: result-dim 1.1s ease-out both; }
.settlement > .ending-art { height: 160px; margin: 12px 0; border-radius: 10px; }
@keyframes result-edge { from { border-color: var(--result-glow); box-shadow: inset 0 0 22px color-mix(in srgb, var(--result-glow) 22%, transparent); } to { box-shadow: inset 0 0 0 transparent; } }
@keyframes result-light {
  0% { background-position: 100% 0; opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}
@keyframes result-ring { from { transform: scale(.65); opacity: .9; } to { transform: scale(1); opacity: .2; } }
@keyframes result-relic { from { transform: translateY(12px) rotate(-8deg); } to { transform: rotate(12deg); } }
@keyframes result-wind { from { transform: translateX(-28px) rotate(-20deg); opacity: .1; } to { transform: translateX(10px) rotate(10deg); opacity: .7; } }
@keyframes result-dim { from { opacity: 1; } to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .inline-result, .inline-result::before, .result-art * { animation: none !important; }
}
.inline-result.visual-victory, .inline-result.visual-relic { border-color: #a38c55; }
.inline-result.visual-defeat { border-color: #885d50; }
.inline-result.visual-escape { border-color: #5d899b; }
.inline-result.visual-story { border-color: #88759e; }

/* Shared spirit flame. Only the flame moves; the indicator stays in its metric. */
.ember-fire { position:relative; width:170px; height:170px; margin:auto; pointer-events:none; --ember-strength:1; }
.spirit-flame::before { content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(ellipse at 50% 67%,#ff9e3a66,transparent 68%); opacity:var(--ember-strength); transition:opacity .8s ease; }
.flame-ash,.flame-live,.flame-body,.flame-core { position:absolute; inset:0; }
.flame-ash,.flame-body,.flame-core { mask:var(--flame-mask) center/contain no-repeat; -webkit-mask:var(--flame-mask) center/contain no-repeat; }
.flame-ash { background:linear-gradient(#35332d,#675044); opacity:calc(.2 + (1 - var(--ember-strength)) * .45); }
.flame-live { transform-origin:50% 86%; transform:scaleY(calc(.28 + var(--ember-strength) * .72)); opacity:calc(.3 + var(--ember-strength) * .7); transition:transform .85s ease,opacity .85s ease; filter:drop-shadow(0 0 6px #f18b2a66); }
.flame-body { background:linear-gradient(15deg,#bd381c 5%,#f47824 30%,#ffbc50 55%,#ffe5a4 70%,#ef6a27 88%); background-size:150% 200%; animation:spirit-fire-flow 2.2s ease-in-out infinite alternate; }
.flame-core { transform:translateY(20%) scale(.43,.52); transform-origin:50% 70%; background:linear-gradient(#fff9d8,#ffd96b 55%,#ff9c39); animation:spirit-core-pulse 1.7s ease-in-out infinite alternate; }
.flame-sparks { position:absolute; inset:8% 20% 22%; opacity:var(--ember-strength); transition:opacity .8s ease; }
.flame-sparks i { position:absolute; left:30%; bottom:12%; width:3px; height:3px; border-radius:50%; background:#ffcf78; animation:spirit-spark 2.4s ease-out infinite; }
.flame-sparks i:nth-child(2) { left:72%; animation-delay:-.9s; }
.flame-sparks i:nth-child(3) { left:46%; animation-delay:-1.7s; }
.flame-smoke { position:absolute; left:43%; bottom:23%; width:14%; height:30%; border-radius:50%; background:radial-gradient(ellipse,#a79d8c66,transparent 72%); opacity:0; }
.spirit-flame[data-flame-stage="embers"] .flame-live { filter:drop-shadow(0 0 3px #c3422080); }
.spirit-flame[data-flame-stage="embers"] .flame-body { background:linear-gradient(#a73120,#dc6228); }
.spirit-flame[data-flame-stage="exhausted"] .flame-live { opacity:0; transform:scaleY(.08); filter:none; }
.spirit-flame[data-flame-stage="exhausted"] .flame-smoke { animation:spirit-smoke-out 1.5s ease-out both; }
.spirit-flame[data-flame-stage="exhausted"] .flame-body,.spirit-flame[data-flame-stage="exhausted"] .flame-core,.spirit-flame[data-flame-stage="exhausted"] .flame-sparks i { animation:none; }
.flame-farewell .flame-live { animation:spirit-burn-out 1.5s ease-out both; }
.flame-farewell::before { animation:spirit-glow-out 1.5s ease-out both; }
@keyframes spirit-burn-out { from { transform:scaleY(.42); opacity:.7; } 65% { transform:scaleY(.18); opacity:.3; } to { transform:scaleY(.08); opacity:0; } }
@keyframes spirit-glow-out { from { opacity:.25; } to { opacity:0; } }
.metric-ap { position:relative; }
.ember-compact { position:absolute; right:0; bottom:2px; width:28px; height:32px; margin:0; }
.ember-compact .flame-sparks i { width:1.5px; height:1.5px; }
.ember-rekindled::before { animation:spirit-relight 1.2s ease-out both; }
@keyframes spirit-fire-flow { from { background-position:30% 100%; } to { background-position:65% 0%; } }
@keyframes spirit-core-pulse { from { opacity:.65; } to { opacity:1; } }
@keyframes spirit-spark { 0% { transform:translate(0,0); opacity:0; } 18% { opacity:.9; } 100% { transform:translate(5px,-32px); opacity:0; } }
@keyframes spirit-smoke-out { from { transform:translateY(0) scale(.6); opacity:.6; } to { transform:translateY(-25px) scale(1.3); opacity:0; } }
@keyframes spirit-relight { from { opacity:1; transform:scale(1.18); } to { opacity:var(--ember-strength); transform:scale(1); } }
.guide-screen { min-height:800px; display:flex; flex-direction:column; padding:14px 10px 24px; }
.guide-top { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:var(--muted); }
.guide-top button { font-size:12px; min-height:40px; }
.guide-art { padding:22px 0 14px; text-align:center; }
.guide-art > small { display:block; color:var(--accent); font-size:12px; letter-spacing:.12em; margin-top:8px; }
.guide-copy { min-height:230px; }
.guide-copy > small { color:var(--accent); font-size:11px; }
.guide-copy h1 { font-size:25px; line-height:1.45; margin:14px 0; }
.guide-copy p { font-size:15px; line-height:1.9; margin:12px 0; }
.guide-flow { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:12px; color:var(--accent); margin-top:18px; }
.guide-flow i { font-style:normal; opacity:.5; }
.guide-bottom { margin-top:auto; padding-top:18px; }
.guide-dots { display:flex; justify-content:center; gap:8px; margin-bottom:22px; }
.guide-dots span { width:6px; height:6px; border-radius:50%; background:#536157; }
.guide-dots .active { background:var(--accent); box-shadow:0 0 8px #d6bc7f55; }
.guide-actions { display:flex; gap:10px; }
.guide-actions button { flex:1; min-height:48px; font-size:14px; }
.splash-menu button[data-action="openGuide"] { font-size:14px; min-height:42px; }
@keyframes ember-flicker { from { transform:rotate(-5deg) scale(.92, .94); } to { transform:rotate(5deg) scale(1.04,1.06); } }
@keyframes ember-breathe { from { transform:scale(.85); } to { transform:scale(1.12); } }
@keyframes ember-spark { from { transform:translate(0,0); opacity:.8; } to { transform:translate(10px,-70px); opacity:0; } }
@keyframes ember-relight { from { box-shadow:0 0 22px #ffd18c; opacity:1; } to { box-shadow:0 0 0 transparent; opacity:.4; } }
@media (prefers-reduced-motion:reduce) { .ember-fire, .ember-fire::before, .ember-fire * { animation:none !important; transition:none !important; } }

/* Live power feedback: the total rolls toward the engine value, glows with
   --power-heat while gains keep arriving, and nudges up on each mote arrival.
   Vars live on #app (outside the reconciled tree); motes live in .power-fx. */
#app { --power-heat: 0; --power-lift: 0; --power-shake-x: 0px; --power-shake-y: 0px; }
.live-journey .hero-vitals .hero-power strong {
  transform: translate(var(--power-shake-x), calc(var(--power-lift) * -2px + var(--power-shake-y)));
  color: color-mix(in srgb, #f1d7a1, #fff6dc calc(var(--power-heat) * 100%));
  text-shadow: 0 0 calc(var(--power-heat) * 12px) rgba(255, 220, 150, calc(var(--power-heat) * .95)), 0 0 calc(var(--power-heat) * 30px) rgba(255, 170, 70, calc(var(--power-heat) * .55));
}
.live-journey .journey-player::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, #ffd98a66, #ffb75a22 45%, transparent 70%); opacity: var(--power-heat); pointer-events: none; }
.power-fx { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.power-mote { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; font: 700 14px/1 "Songti SC", "Noto Serif SC", serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: #ffe8a6; text-shadow: 0 0 8px #dca354, 0 1px 2px #0009; }
.power-mote.fx-surge { font-size: 19px; text-shadow: 0 0 14px #ffc568, 0 1px 2px #0009; }
.power-mote.fx-burst { font-size: 25px; color: #fff3c9; text-shadow: 0 0 18px #fff0b5, 0 0 32px #e8a84c, 0 1px 2px #000a; }
.power-mote.fx-card { font-size: 22px; padding: 3px 9px; border: 1px solid #ffe4a388; border-radius: 8px; background: #302514ed; box-shadow: 0 0 18px #edbb6366; }
.power-mote.fx-card.fx-burst { font-size: 27px; box-shadow: 0 0 28px #edbb63aa; }
.power-mote.fx-loss { color: #e69b95; text-shadow: 0 0 10px #bd514b, 0 1px 2px #0009; }
@media (prefers-reduced-motion: reduce) { .power-fx { display: none; } .live-journey .hero-vitals .hero-power strong { transform: none; } }
.inline-result .inline-power { font-size: 19px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.inline-power-delta { display: inline-block; font-size: 24px; font-weight: 800; margin-left: 6px; color: #ffe4a3; white-space: nowrap; }
/* Rewards stay above the independently scrollable story. */
.inline-result > .inline-power { flex-shrink: 0; margin: 2px 0 7px; padding: 5px 8px; border-radius: 8px; background: #f2c56a12; font-size: 16px; line-height: 1.35; }
.inline-result > .inline-power .inline-power-delta { font-size: 25px; }
.breakthrough-progress { margin-top: 7px; }
.breakthrough-progress > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.breakthrough-progress b { font-size: 11px; color: #ecd19c; }
.breakthrough-progress small { font-size: 10px; color: var(--muted); }
.breakthrough-track { height: 5px; border-radius: 4px; background: #ffffff12; overflow: hidden; margin: 4px 0 2px; }
.breakthrough-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#aa8650,#f3d58e); transition: width .3s; }

/* Event cards grow with rewards: never make players scroll inside an event. */
.page:has(.character-overview) :is(.inline-result, .encounter, .quiet-stage),
.inline-result {
  height: auto;
  min-height: 220px;
  max-height: none;
  overflow: visible;
}
.inline-result-body,
.page:has(.character-overview) .encounter > p {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
.inline-result-actions { margin-top: auto; }
.inline-result .inline-reward { margin-top: 6px; }
.inline-result .inline-reward b { font-size: 14px; }
.inline-result .inline-reward p { font-size: 13px; }
.event-story { margin-top: 7px; font-size: 12px; color: var(--muted); }
.event-story summary { cursor: pointer; }
.event-story p { padding-top: 5px; }

/* Legendary labels grow with their descriptions; event cards keep page scrolling. */
.starting-talent[data-rarity=传说] .rarity, .starting-talent[data-rarity=传说] b,
.gear-tag[data-rarity=legendary], .atlas-entry[data-rarity=legendary] > small { color: #ed9470; border-color: #b66b4c; }

/* Compact shop pages fit the shared mobile canvas without clipping item effects. */
.shop-screen { display: flex; flex-direction: column; gap: 10px; }
.shop-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-heading h1 { margin: 2px 0 0; font-size: 23px; }
.shop-heading small, .shop-heading > span { font-size: 11px; color: var(--muted); }
.shop-categories { display: flex; gap: 6px; }
.shop-categories > button { flex: 1; min-width: 0; padding-left: 4px; padding-right: 4px; }
.shop-categories button { min-height: 44px; padding: 7px; font-size: 14px; }
.shop-rule { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.shop-catalog { display: grid; gap: 9px; }
.shop-catalog .shop-card { margin: 0; padding: 11px 12px; }
.shop-card-title, .shop-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-card-title h3 { margin: 0; font-size: 16px; }
.shop-card-title small { font-size: 11px; color: var(--muted); }
.shop-card[data-rarity=legendary] .shop-card-title small, .shop-card[data-rarity=传说] .shop-card-title small { color: #ed9470; }
.shop-effect { margin: 7px 0; font-size: 13px; line-height: 1.6; }
.shop-card-bottom small, .shop-owned { font-size: 11px; color: var(--muted); }
.shop-card-bottom button { min-height: 44px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.shop-catalog > .pagination { padding-top: 3px; gap: 12px; }
.shop-catalog > .pagination button { min-height: 44px; padding: 7px 12px; }

/* Mobile opening: relics and build effects lead, biography stays secondary. */
.opening-screen { padding: 12px 4px 20px; }
.opening-screen .opening-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 20px; }
.opening-screen .opening-intro small { color: var(--accent); letter-spacing: .16em; font-size: 11px; }
.opening-screen .opening-intro h1 { margin: 5px 0 7px; font-size: 28px; }
.opening-screen .opening-intro p { color: var(--muted); font-size: 13px; }
.opening-screen .opening-intro > button { flex-shrink: 0; font-size: 12px; }
.opening-workbench { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 22px; align-items: start; }
.opening-build { min-width: 0; }
.opening-screen .panel { padding: 16px; border-radius: 12px; }
.opening-screen .opening-relics { background: linear-gradient(145deg, #d6bc7f0c, transparent 70%), var(--panel); border-color: #82714d; }
.opening-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.opening-section-heading > div > small { font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.opening-section-heading h2 { font-size: 22px; margin: 3px 0 0; }
.opening-section-heading h3 { margin: 0; }
.opening-section-heading > .muted { font-size: 11px; text-align: right; }
.opening-slot-count { font-size: 28px; color: var(--accent); font-variant-numeric: tabular-nums; }
.opening-slot-count small { font-size: 13px; }
.opening-relics > p { font-size: 11px; margin-bottom: 12px; }
.opening-equipped { display: grid; gap: 8px; }
.opening-relic { display: block; width: 100%; min-width: 0; text-align: left; border-radius: 7px; padding: 10px 12px; white-space: normal; }
.opening-relic.selected { border-color: #8e7c52; background: #d6bc7f09; color: var(--text); }
.opening-relic:hover { background: #d6bc7f16; }
.opening-relic-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.opening-relic-heading b { font-size: 14px; color: #e8d5a8; }
.opening-relic-heading small { flex-shrink: 0; font-size: 10px; color: var(--accent); }
.opening-relic-effect { display: block; margin-top: 4px; color: #b3c1b7; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.opening-relic-brief { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.opening-empty-slot { padding: 10px 12px; border: 1px dashed #47574c; border-radius: 7px; font-size: 12px; color: var(--muted); }
.opening-empty-slot > span { color: var(--accent); margin-right: 6px; }
.opening-empty-slot small { font-size: 10px; margin-left: 8px; }
.opening-relic-library { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cave-return-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #8e7c52; border-radius: 8px; background: #d6bc7f0c; font-size: 12px; color: var(--muted); }
.cave-return-bar button { flex-shrink: 0; }
.cave-recipe-state { display: block; margin-top: 6px; font-size: 11px; color: var(--accent); }
.opening-relic-library .pagination { margin: 0; gap: 6px; }
.opening-relic-library .pagination button { font-size: 12px; padding: 6px 10px; }
.opening-relics .opening-library-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.opening-preparations .opening-section-heading button { min-height: 34px; padding: 5px 12px; font-size: 12px; }
.opening-preparations p { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.opening-preparations p b { text-align: right; font-weight: 500; }
.opening-cost { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.opening-cost b { color: var(--accent); font-size: 20px; }
.opening-cost b small { font-size: 11px; font-weight: normal; }
.opening-screen .opening-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.opening-screen .opening-build-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 12px; margin: 0; background: linear-gradient(150deg, #d6bc7f0c, transparent 55%), var(--panel); border-color: #756446; }
.opening-build-card[data-rarity=传说] { border-color: #b66b4c; }
.opening-build-card.locked { box-shadow: 0 0 0 1px var(--accent); }
.opening-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.opening-quality { color: var(--accent); padding: 3px 9px; border: 1px solid #d6bc7f40; border-radius: 20px; font-size: 11px; }
.opening-build-card[data-rarity=传说] .opening-quality { color: #ed9470; border-color: #b66b4c; }
.opening-screen .starting-talents h3 { margin: 0 0 9px; font-size: 17px; }
.opening-screen .starting-talents h3 small { font-family: system-ui, sans-serif; font-size: 10px; font-weight: normal; margin-left: 8px; }
.opening-screen .starting-talent { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 9px; padding: 9px 10px; margin-bottom: 6px; background: #ffffff03; border: 1px solid #ffffff0a; border-radius: 6px; }
.opening-screen .starting-talent:last-child { margin-bottom: 0; }
.opening-screen .starting-talent b { font-size: 16px; }
.opening-screen .starting-talent > span:last-child { grid-column: 2; font-size: 12px; line-height: 1.6; color: #c4cec6; overflow-wrap: anywhere; }
.opening-screen .starting-talent[data-rarity=史诗] { background: #d6bc7f08; border-color: #d6bc7f26; }
.opening-screen .starting-talent[data-rarity=传说] { background: #ed947008; border-color: #ed947040; }
.opening-screen .starting-skill { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
.opening-screen .starting-skill > small, .opening-screen .starting-skill > b, .opening-screen .starting-skill > span { grid-column: 1; grid-row: auto; }
.opening-screen .starting-skill > small { font-size: 10px; }
.opening-screen .starting-skill > b { font-size: 16px; }
.opening-screen .starting-skill > span { font-size: 11px; }
.opening-screen .starting-skill details { font-size: 11px; color: var(--muted); }
.opening-screen summary { cursor: pointer; }
.opening-screen details p { font-size: 12px; line-height: 1.6; margin: 7px 0; }
.opening-screen .opening .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 0; margin: 0; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.opening-screen .opening .metric strong { font-size: 22px; }
.opening-screen .opening .metric small { font-size: 10px; }
.opening-background { color: var(--muted); font-size: 11px; }
.opening-background > small { font-size: 10px; }
.opening-screen .opening .actions { margin: 0; padding: 0; gap: 8px; }
.opening-screen .opening .actions button { flex: 1; min-height: 46px; font-size: 14px; }
.opening-screen .opening .actions button.primary { flex: 1.7; }
.opening-screen .pagination { margin: 0; }
.opening-refresh { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.opening-refresh button { font-size: 12px; min-height: 40px; }
.opening-refresh small, .opening-replace-note { font-size: 10px; color: var(--muted); }
.opening-screen { padding: 3px 0 12px; }
.opening-screen .opening-intro { gap: 8px; padding-bottom: 14px; }
.opening-screen .opening-intro h1 { font-size: 21px; }
.opening-screen .opening-intro p { font-size: 11px; }
.opening-screen .opening-intro > button { padding: 7px 9px; min-height: 40px; font-size: 11px; }
.opening-workbench { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 18px; }
.opening-screen .panel { padding: 12px; }
.opening-section-heading { margin-bottom: 8px; }
.opening-section-heading h2 { font-size: 20px; }
.opening-preparations p { display: inline-flex; justify-content: flex-start; margin-right: 14px; gap: 6px; font-size: 11px; }
.opening-preparations .opening-section-heading { margin-bottom: 3px; }
.opening-cost { margin-top: 4px; padding-top: 5px; }
.opening-relic { padding: 8px 10px; }
.opening-screen .opening-build-card { padding: 13px; gap: 11px; }
.opening-screen .starting-talent { padding: 7px 9px; }
.opening-screen .starting-talent b { font-size: 15px; }
.opening-relic-library { display: block; }
.opening-relic-library > summary { font-size: 12px; color: var(--accent); }
.opening-relic-library > summary small { float: right; font-size: 10px; color: var(--muted); }
.opening-relic-library > p { margin: 9px 0; font-size: 11px; }
.opening-relic-options { display: grid; gap: 8px; margin-top: 10px; }
.opening-screen .starting-skill > .opening-skill-specialty { color: #c4cec6; font-size: 12px; line-height: 1.6; }
.shop-categories button.active { background: #d6bc7f24; color: var(--accent); border-color: var(--accent); }
.opening-workbench > .opening-relics { grid-column: 1; grid-row: 1; margin: 0; }
.opening-workbench > .opening-build { grid-column: 2; grid-row: 1 / span 2; }
.opening-workbench > .opening-preparations { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }

.opening-workbench > .opening-build { grid-column: 1; grid-row: 2; }
.opening-workbench > .opening-preparations { grid-column: 1; grid-row: 3; }
.opening-equipped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opening-relic-heading { flex-wrap: wrap; gap: 2px 5px; }
.opening-relic-heading b { font-size: 13px; }
.opening-relic-heading small { font-size: 9px; }
.opening-relic-effect { font-size: 11px; }
.opening-empty-slot small { display: block; margin-left: 0; }

/* Growth uses the same compact, paged mobile layout as the shop. */
.growth-categories { grid-template-columns: repeat(2,1fr); }
.growth-catalog .growth-card { margin: 0; padding: 11px 12px; }
.growth-actions { display: flex; gap: 7px; }
.growth-actions button { flex: 1; min-height: 44px; padding: 6px 7px; font-size: 12px; }
.growth-extra { display: flex; align-items: center; gap: 10px; }
.growth-extra button { flex-shrink: 0; min-height: 44px; padding: 7px 10px; font-size: 12px; }
.growth-extra small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.growth-transcend { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, rgba(255,255,255,.12)); }
.growth-transcend .shop-effect { margin: 0; flex: 1; min-width: 0; }
.growth-transcend button { flex-shrink: 0; min-height: 40px; padding: 6px 9px; font-size: 12px; }
.milestone-card.done { opacity: .78; }
.milestone-card .shop-card-bottom .muted { font-size: 11px; }

/* Achievement notices stay separate from event cards and never pause play. */
.achievement-notices {
  position: fixed; top: max(12px, env(safe-area-inset-top));
  right: max(12px, calc((100vw - 420px) / 2 + 12px));
  width: min(340px, calc(100vw - 24px)); z-index: 100;
  pointer-events: none;
}
.achievement-notices:empty { display: none; }
.achievement-notice {
  position: relative; padding: 10px 16px 12px; border: 1px solid #c8b37e;
  border-radius: 10px; background: #1b2924f5; color: #e7e4d6;
  box-shadow: 0 8px 28px #0006; pointer-events: auto;
  animation: achievement-arrive .2s ease-out;
}
.achievement-notice[hidden] { display: none; }
.achievement-notice-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.achievement-notice-heading small { color: #d8c18b; letter-spacing: .15em; }
.achievement-notice .achievement-notice-close { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: -8px -10px -4px 0; border: 0; background: transparent; color: #c5c9bf; font: 24px/1 system-ui, sans-serif; }
.achievement-notice h2 { margin: 0 0 7px; color: #f0dcaa; font-size: 19px; }
.achievement-notice p { margin: 0 0 10px; color: #d2d7cb; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.achievement-notice .achievement-notice-view { min-height: 44px; padding: 6px 14px; font-size: 12px; }
@keyframes achievement-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .achievement-notice { animation: none; } }

/* Viewport docks: every paged list keeps its controls clear of changing content. */
#app > footer {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 420px; height: 44px; box-sizing: border-box; margin: 0;
  padding: 0 68px 0 12px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-top: 1px solid var(--border); z-index: 40;
}
#app > footer .footer-feedback { top: 0; right: 8px; height: 44px; min-height: 44px; }
#app:has(> footer) > main { padding-bottom: 58px; }
.pagination, .shop-catalog > .pagination {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: 392px; height: 60px; box-sizing: border-box; padding: 8px 0;
  background: var(--bg); z-index: 39; border-top: 1px solid var(--border);
}
.pagination button { min-height: 44px; padding: 7px 12px; }
.pagination-count { order: 1; min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.pagination button:last-child { order: 2; }
/* Keep opening relic controls above their variable-length choices, in the card. */
.opening-relic-options > .pagination {
  position: static; left: auto; bottom: auto; transform: none;
  width: 100%; height: auto; padding: 0 0 10px; z-index: auto;
  background: transparent; border-top: 0; border-bottom: 1px solid var(--border);
}
.opening-relic-page { display: grid; gap: 8px; align-content: start; overflow-anchor: none; }
.page:has(.opening-relic-options > .pagination) { padding-bottom: 0; }
.page:has(.pagination) { padding-bottom: 60px; }
.catalog-search { min-width: 0; }
.catalog-search > label { display: block; font-size: 12px; color: var(--muted); }
.catalog-search > div { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.catalog-search input { flex: 1; width: 100%; min-width: 0; min-height: 44px; margin: 0; }
.catalog-search button { flex-shrink: 0; min-height: 44px; padding: 6px 8px; font-size: 12px; }
.atlas-filters .catalog-search input { margin-top: 0; }
.catalog-count { margin: 0; font-size: 12px; line-height: 1.6; }
.page[data-page=shop] { padding-bottom: 60px; }
.page[data-page=growth] { padding-bottom: 124px; }
.growth-extra {
  position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%);
  width: 392px; height: 64px; box-sizing: border-box; background: var(--bg); z-index: 38;
  border-top: 1px solid var(--border);
}
.page[data-page=growth] { padding-bottom: 0; }
#app:has(.growth-screen) > main { padding-bottom: 168px; }
.growth-catalog .growth-card { padding: 8px 12px; }
.growth-card .shop-effect { margin: 5px 0; font-size: 12px; }

/* A mobile opening wizard: one decision at a time, three comparable folded cards. */
#app:has(.opening-wizard) > nav { display: none; }
.opening-wizard { padding: 0 0 14px; }
.opening-wizard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opening-wizard-top > small { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.opening-wizard-top > button { min-height: 36px; font-size: 11px; padding: 6px 10px; }
.opening-steps { display: flex; list-style: none; padding: 0; margin: 20px 0 24px; gap: 0; }
.opening-steps li { position: relative; flex: 1; }
.opening-steps li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 23px); width: calc(100% - 46px); height: 1px; background: var(--border); }
.opening-steps li.done::after { background: #d6bc7f80; }
.opening-steps button { border: 0; padding: 0; width: 100%; min-height: 58px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; }
.opening-steps button:disabled { opacity: 1; }
.opening-steps button > span { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; color: var(--muted); }
.opening-steps button > b { font-size: 11px; font-weight: 500; color: var(--muted); }
.opening-steps .current button > span { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 18px #d6bc7f24; }
.opening-steps .current button > b, .opening-steps .done button > b { color: var(--accent); }
.opening-steps .done button > span { border-color: #d6bc7f80; color: var(--accent); }
.opening-step-title { margin-bottom: 18px; }
.opening-step-title h1 { font-size: 24px; margin: 0 0 6px; }
.opening-step-title p { font-size: 12px; color: var(--muted); margin: 0; }
.opening-step-content { min-width: 0; }
.opening-wizard .opening-relics { margin: 0; }
.opening-wizard .opening-relics .opening-section-heading > div > small { display: none; }
.opening-wizard .opening-relics .opening-section-heading h2 { font-size: 17px; }
.opening-step-actions { display: flex; gap: 8px; margin-top: 14px; }
.opening-step-actions > button { flex: 1; min-height: 48px; font-size: 14px; padding: 9px; }
.opening-step-actions > button.primary { flex: 1.6; }
.opening-step-note { display: block; font-size: 10px; color: var(--muted); text-align: center; margin-top: 10px; }
.opening-draw-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--accent); font-size: 11px; }
.opening-draw-caption > small { font-size: 10px; color: var(--muted); }
.opening-deck { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; perspective: 1100px; }
.opening-draw-card { position: relative; isolation: isolate; border: 1px solid #4a564b; border-radius: 10px; background: linear-gradient(120deg,#ffffff03,transparent),var(--panel); min-width: 0; height: auto; max-height: none; overflow: visible; }
.opening-draw-card[data-rarity=史诗] { border-color: #99804d; background: linear-gradient(120deg,#d6bc7f0d,transparent),var(--panel); }
.opening-draw-card[data-rarity=传说] { border-color: #bc744e; background: linear-gradient(120deg,#ed947013,transparent),var(--panel); }
.opening-draw-card.expanded, .opening-draw-card.locked { box-shadow: 0 0 0 1px #d6bc7f50; }
/* Rare-or-better openings get a flowing light ring on the border and a breathing glow, scaled by tier.
   Only background-position moves; the ring layer itself never translates, so nothing leaks outside the card. */
.opening-draw-card:is([data-rarity=稀有], [data-rarity=史诗], [data-rarity=传说]) { --ring-base: #8bbbd64d; --ring-glow: #d8ecf8; --ring-shadow: #8bbbd62e; --ring-cycle: 4.4s; }
.opening-draw-card[data-rarity=史诗] { --ring-base: #d7b37366; --ring-glow: #ffe9b8; --ring-shadow: #d7b37348; --ring-cycle: 3.4s; }
.opening-draw-card[data-rarity=传说] { --ring-base: #ed947080; --ring-glow: #fff3dc; --ring-shadow: #ed947066; --ring-cycle: 2.6s; }
.opening-draw-card:is([data-rarity=稀有], [data-rarity=史诗], [data-rarity=传说])::before { content: ""; position: absolute; inset: -2px; z-index: 2; padding: 2px; border-radius: 12px; pointer-events: none; background-color: var(--ring-base); background-image: linear-gradient(115deg, transparent 38%, var(--ring-glow) 50%, transparent 62%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 120% 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: opening-ring-flow var(--ring-cycle) ease-in-out infinite; }
.opening-draw-card:is([data-rarity=稀有], [data-rarity=史诗], [data-rarity=传说])::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 14px 1px var(--ring-shadow); animation: opening-ring-breathe calc(var(--ring-cycle) * 1.5) ease-in-out infinite; }
.opening-draw-card[data-rarity=传说]::after { box-shadow: 0 0 18px 2px var(--ring-shadow), 0 0 40px -6px var(--ring-shadow); }
.is-dealing .opening-draw-card:not(.locked):is([data-rarity=稀有], [data-rarity=史诗], [data-rarity=传说])::before { animation: opening-ring-flow var(--ring-cycle) ease-in-out infinite, opening-ring-wait 1000ms linear var(--deal-delay) both; }
.is-dealing .opening-draw-card:not(.locked):is([data-rarity=稀有], [data-rarity=史诗], [data-rarity=传说])::after { animation: opening-ring-breathe calc(var(--ring-cycle) * 1.5) ease-in-out infinite, opening-ring-wait 1000ms linear var(--deal-delay) both; }
@keyframes opening-ring-flow {
  0% { background-position: 120% 0; }
  58%, 100% { background-position: -120% 0; }
}
@keyframes opening-ring-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@keyframes opening-ring-wait {
  0%, 62% { opacity: 0; }
  100% { opacity: 1; }
}
.opening-card-toggle { display: block; width: 100%; text-align: left; border: 0; border-radius: inherit; min-height: 110px; padding: 12px; background: transparent; }
.opening-card-toggle:disabled { opacity: 1; }
.opening-card-topline, .opening-card-footline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opening-card-topline { font-size: 11px; color: var(--muted); }
.opening-card-topline em { font-style: normal; font-size: 10px; color: var(--accent); margin-left: 5px; }
.opening-card-topline .opening-quality { font-size: 10px; padding: 2px 7px; }
.opening-talent-preview { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 10px 0; }
.opening-talent-preview b { font-size: 16px; font-weight: 600; color: var(--text); }
.opening-talent-preview [data-rarity=稀有] { color: #8bbbd6; }
.opening-talent-preview [data-rarity=史诗] { color: #d7b373; }
.opening-talent-preview [data-rarity=传说] { color: #ed9470; }
.opening-card-footline { font-size: 10px; color: var(--muted); line-height: 1.6; }
.opening-card-footline > span:last-child { color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.opening-card-body { padding: 0 12px 12px; }
.opening-card-body[hidden] { display: none; }
.opening-card-body .starting-talents { padding-top: 12px; border-top: 1px solid var(--border); }
.opening-card-body .starting-skill { margin-top: 12px; }
.opening-wizard .metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 10px 0; margin: 12px 0; gap: 8px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.opening-wizard .metric small { font-size: 10px; }
.opening-wizard .metric strong { font-size: 21px; }
.opening-wizard .opening-refresh { justify-content: space-between; margin-top: 14px; }
.opening-wizard .opening-refresh > button { min-height: 46px; padding: 8px 16px; font-size: 13px; border-color: #9c885a; color: var(--accent); }
.opening-wizard .opening-refresh > small { text-align: right; font-size: 10px; line-height: 1.6; }
.opening-back-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.opening-back-row > button { border: 0; color: var(--muted); min-height: 40px; font-size: 11px; padding: 4px 0; }
.opening-back-row > small { font-size: 10px; }
.opening-card-back { display: none; }
.is-dealing .opening-draw-card:not(.locked) { animation: opening-deal 1000ms cubic-bezier(.22,.7,.2,1) var(--deal-delay) both; pointer-events: none; }
.is-dealing .opening-draw-card:not(.locked) .opening-card-back { display: flex; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at center,#52432c,#202820 70%); border: 1px solid #c4a65e70; border-radius: inherit; animation: opening-unveil 1000ms ease var(--deal-delay) both; pointer-events: none; }
.opening-card-back i { font-family: "Songti SC",serif; font-size: 38px; font-style: normal; color: var(--accent); text-shadow: 0 0 18px #d6bc7f66; }
.opening-card-back small { letter-spacing: .25em; font-size: 11px; color: var(--accent); }
@keyframes opening-deal {
  0% { opacity: 0; transform: translateY(22px) scale(.95) rotateX(-22deg); }
  22% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
  46% { transform: rotateY(-87deg); }
  63% { transform: rotateY(8deg); box-shadow: 0 0 25px #d6bc7f33; }
  100% { opacity: 1; transform: none; box-shadow: none; }
}
@keyframes opening-unveil {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
.opening-confirm { margin: 0 0 12px; background: linear-gradient(145deg,#d6bc7f0c,transparent),var(--panel); border-color: #8f7b50; }
.opening-confirm[data-rarity=传说] { border-color: #bc744e; }
.opening-confirm-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opening-confirm h2 { margin: 12px 0 3px; font-size: 23px; }
.opening-confirm > .muted { font-size: 11px; }
.opening-confirm-talents { display: grid; gap: 7px; margin-top: 14px; }
.opening-confirm-talents > div { display: grid; grid-template-columns: 32px 1fr; gap: 3px 8px; font-size: 12px; }
.opening-confirm-talents .rarity { font-size: 10px; color: var(--muted); }
.opening-confirm-talents p { grid-column: 2; margin: 0; font-size: 11px; color: #b4c3b8; }
.opening-confirm-talents [data-rarity=史诗] b { color: #d7b373; }
.opening-confirm-talents [data-rarity=传说] b { color: #ed9470; }
.opening-confirm-relics { position: relative; padding-right: 44px; }
.opening-confirm-relics > small { font-size: 10px; }
.opening-confirm-relics p { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; font-size: 11px; }
.opening-confirm-relics p span { padding: 3px 7px; border: 1px solid #d6bc7f30; border-radius: 4px; color: #e8d5a8; }
.opening-confirm-relics > button { position: absolute; right: 0; top: 0; font-size: 11px; border: 0; color: var(--accent); min-height: 44px; padding: 5px; }
@media (prefers-reduced-motion: reduce) {
  .is-dealing .opening-draw-card:not(.locked) { animation: none; }
  .is-dealing .opening-draw-card:not(.locked) .opening-card-back { display: none; }
  .opening-draw-card::before, .opening-draw-card::after { animation: none; }
}

/* Attributes lead every opening decision; names and flavour are supporting details. */
.opening-wizard .opening-steps { margin: 12px 0 16px; }
.opening-wizard .opening-step-title { margin-bottom: 12px; }
.opening-wizard .opening-step-title h1 { font-size: 22px; }
.opening-wizard .opening-step-title p { font-size: 11px; }
.opening-attributes { display: grid; grid-template-columns: 1.15fr repeat(3,minmax(0,1fr)); align-items: end; gap: 6px; margin: 6px 0 8px; }
.opening-wizard .opening-attributes .metric small { font-size: 10px; line-height: 1.5; color: var(--muted); }
.opening-wizard .opening-attributes .metric strong { font-size: 22px; line-height: 1.25; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.opening-wizard .opening-attributes .opening-power strong { color: #f0d698; font-size: 26px; }
.opening-attribute-bonuses { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; font-size: 10px; color: var(--muted); line-height: 1.6; padding: 6px 0; border-top: 1px solid #ffffff0a; }
.opening-attribute-bonuses b { font-weight: 600; color: #d6e0d8; font-variant-numeric: tabular-nums; }
.opening-card-toggle { padding: 10px 12px 6px; min-height: 0; }
.opening-card-footline { margin-top: 4px; }
.opening-card-commands { display: flex; gap: 8px; padding: 0 12px 10px; }
.opening-card-commands > button { min-height: 44px; padding: 7px 12px; font-size: 12px; }
.opening-card-commands > button.primary { margin-left: auto; padding: 7px 20px; }
.opening-wizard .starting-talent[data-rarity] b { font-size: 11px; font-weight: 400; color: var(--muted); }
.opening-wizard .starting-talent > span:last-child { font-size: 14px; line-height: 1.6; color: var(--text); }
.opening-wizard .starting-skill > b { font-size: 11px; font-weight: 400; color: var(--muted); }
.opening-wizard .starting-skill > span { font-size: 14px; color: var(--text); }
.opening-wizard .starting-skill > .opening-skill-specialty { font-size: 14px; color: var(--text); }
.opening-confirm .opening-attributes { margin-top: 18px; }
.opening-confirm-skill { font-size: 11px; color: var(--muted); margin: 9px 0; }
.opening-confirm-talents > div { grid-template-columns: 32px 1fr; gap: 1px 8px; }
.opening-confirm-talents [data-rarity] b { color: var(--muted); font-size: 10px; font-weight: 400; }
.opening-confirm-talents p { font-size: 14px; color: var(--text); }
.opening-relic-preview { margin-top: 12px; }
.opening-relic-preview > small { font-size: 10px; color: var(--muted); }
.opening-wizard .opening-steps button { flex-direction: row; justify-content: center; gap: 6px; min-height: 34px; }
.opening-wizard .opening-steps button > span { width: 26px; height: 26px; font-size: 11px; }
.opening-wizard .opening-steps li:not(:last-child)::after { top: 16px; left: calc(50% + 43px); width: calc(100% - 86px); }
.opening-wizard .opening-step-title { margin-bottom: 8px; }

/* Keep the opening build visible while names and origins stay in the accordion. */
.opening-build-preview { display: grid; gap: 6px; padding: 8px 0 4px; border-top: 1px solid #ffffff0d; text-align: left; }
.opening-build-row { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 7px; align-items: start; }
.opening-build-row > small { font-size: 10px; line-height: 1.7; color: var(--muted); }
.opening-skill-preview { display: grid; gap: 2px; min-width: 0; font-size: 12px; line-height: 1.55; color: var(--text); }
.opening-skill-preview > span:first-child { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.opening-skill-preview b { font-size: 12px; font-weight: 500; color: #e8d5a8; }
.opening-skill-preview small { color: var(--muted); font-size: 10px; }
.opening-talent-effects { display: grid; gap: 3px; min-width: 0; }
.opening-talent-effects > span { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.55; color: var(--text); }
.opening-talent-effects small { font-size: 9px; color: var(--muted); }
.opening-talent-effects [data-rarity=稀有] > small { color: #8bbbd6; }
.opening-talent-effects [data-rarity=史诗] > small { color: #d7b373; }
.opening-talent-effects [data-rarity=传说] > small { color: #ed9470; }
.opening-card-body > .opening-attribute-bonuses { padding-bottom: 9px; border-top: 0; }
.opening-card-body .starting-talents { padding-top: 9px; }

/* The opening uses its own small home entry and spends the viewport on choices. */

#app:has(.opening-wizard) > main { padding-top: 4px; }
.opening-wizard { padding-bottom: 0; }
.opening-wizard-top { gap: 6px; }
.opening-wizard-top > .opening-home { display: grid; place-items: center; width: 36px; min-height: 40px; padding: 0; border: 0; color: var(--muted); flex-shrink: 0; }
.opening-wizard-top > button:last-child { min-height: 36px; padding: 4px 7px; border: 0; color: var(--muted); }
.opening-wizard .opening-steps { flex: 1; margin: 0; }
.opening-wizard .opening-steps button { gap: 4px; min-height: 40px; }
.opening-wizard .opening-steps button > span { width: 23px; height: 23px; font-size: 10px; }
.opening-wizard .opening-steps button > b { font-size: 10px; }
.opening-wizard .opening-steps li:not(:last-child)::after { top: 20px; left: calc(50% + 33px); width: calc(100% - 66px); }
.opening-wizard .opening-step-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 9px; margin: 5px 0 4px; }
.opening-wizard .opening-step-title h1 { font-size: 18px; margin: 0; }
.opening-wizard .opening-step-title p { font-size: 10px; }
.opening-draw-caption { margin-bottom: 6px; font-size: 10px; }
.opening-deck { gap: 7px; }
.opening-card-toggle { padding: 4px 10px 8px; }
.opening-card-topline { justify-content: flex-start; min-height: 36px; gap: 6px; padding-right: 110px; font-size: 10px; }
.opening-card-topline .opening-quality { font-size: 9px; padding: 1px 5px; white-space: nowrap; }
.opening-card-commands { position: absolute; top: 4px; right: 8px; padding: 0; gap: 5px; z-index: 1; }
.opening-card-commands > button { min-height: 36px; padding: 3px 7px; font-size: 10px; }
.opening-card-commands > button.primary { margin: 0; padding: 3px 10px; }
.opening-draw-card .opening-attributes { margin: 0 0 5px; }
.opening-wizard .opening-draw-card .opening-attributes .metric strong { font-size: 22px; line-height: 1.15; }
.opening-wizard .opening-draw-card .opening-attributes .opening-power strong { font-size: 25px; }
.opening-build-preview { gap: 4px; padding: 5px 0 0; }
.opening-build-row { grid-template-columns: 24px minmax(0,1fr); gap: 5px; }
.opening-skill-preview { font-size: 13px; line-height: 1.5; gap: 0; }
.opening-skill-preview b { font-size: 13px; }
.opening-skill-preview small { display: inline; font-size: 12px; white-space: nowrap; }
.opening-talent-effects { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.opening-talent-effects > span { display: block; font-size: 13px; line-height: 1.5; padding: 1px 5px; color: #b9c6bd; border: 1px solid currentColor; border-radius: 4px; }
.opening-talent-effects [data-rarity=稀有] { color: #8bbbd6; }
.opening-talent-effects [data-rarity=史诗] { color: #d7b373; }
.opening-talent-effects [data-rarity=传说] { color: #ed9470; }
.opening-talent-effects > span b { font-weight: 600; margin-right: 6px; }
.opening-talent-effects > span > span { opacity: .92; }
.opening-wizard .opening-refresh { margin-top: 8px; align-items: center; }
.opening-wizard .opening-refresh > button { min-height: 40px; font-size: 12px; padding: 6px 12px; }
.opening-wizard .opening-refresh > small { font-size: 10px; }

/* Share spare viewport space between the three cards; content can still grow. */
#app:has(.opening-step-content[data-step="1"]) > main { padding-bottom: 118px; }
.opening-wizard:has(.opening-step-content[data-step="1"]) { display: flex; flex-direction: column; min-height: calc(var(--canvas-viewport-height, 840px) - 166px); }
.opening-wizard-top, .opening-step-title, .opening-draw-caption { flex-shrink: 0; }
.opening-step-content[data-step="1"] { display: flex; flex-direction: column; flex: 1; }
.opening-step-content[data-step="1"] > .opening-deck { flex: 1; }
.opening-deck > .opening-draw-card { flex: 0 0 auto; }
.opening-wizard .opening-refresh {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: 392px; height: 60px; margin: 0; padding: 8px 0;
  display: flex; justify-content: space-between; gap: 8px;
  background: var(--bg); z-index: 39;
}
.opening-wizard .opening-refresh > button { min-height: 44px; }

.release-notes-link { border: 0; background: transparent; color: var(--accent); font-size: 11px; min-height: 36px; padding: 3px 8px; letter-spacing: .04em; }
.splash-footnote > .release-notes-link { display: block; margin: 4px auto 0; }
#app > footer > .release-notes-link { min-height: 44px; padding: 0 5px; font-size: 10px; }
.release-notes-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font-size: 11px; }
.release-notes-heading > span { color: var(--accent); font-variant-numeric: tabular-nums; }
.release-notes h2 { margin: 8px 0 20px; font-size: 21px; }
.release-notes h3 { margin: 18px 0 6px; font-size: 14px; color: #e8d5a8; }
.release-notes ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.release-notes li + li { margin-top: 7px; }

/* One-life preparations are selected in the final opening step. */
.opening-preparations .opening-section-heading > small { color: var(--muted); font-size: 11px; }
.opening-preparation-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.opening-preparation-options > .opening-preparation { display: flex; flex-direction: column; gap: 5px; padding: 9px; text-align: left; min-width: 0; height: auto; }
.opening-preparation > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; width: 100%; }
.opening-preparation b { font-size: 12px; font-weight: 500; }
.opening-preparation small { font-size: 10px; white-space: nowrap; color: var(--muted); }
.opening-preparation > span:last-child { font-size: 11px; line-height: 1.5; color: var(--muted); }
.opening-preparation.selected { color: var(--accent); border-color: var(--accent); background: #d8bf7920; }
.opening-preparation.selected small { color: var(--accent); }
.opening-preparations > .opening-preparation-rule { display: block; margin: 8px 0; font-size: 10px; color: var(--muted); }
.opening-preparation-shortfall { display: block; margin-top: 5px; color: #ed9470; font-size: 11px; }
.growth-categories > button { flex: 1; }

/* Every secondary screen shares a small home entry and one page title. */
#app > .page-header { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 14px 0 8px; min-height: 44px; }
.page-header > .page-home { display: grid; place-items: center; flex: 0 0 36px; width: 36px; min-height: 40px; padding: 0; background: transparent; border: 0; color: var(--muted); }
.page-header > .settings-back { display: flex; align-items: center; gap: 2px; flex-basis: auto; width: auto; min-height: 44px; padding: 0 6px; font-size: 12px; }
.page-header > h1 { margin: 0; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.opening-wizard .opening-step-title h2 { margin: 0; font-size: 18px; }
.page-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 11px; color: var(--muted); }
.page-balance > span { margin-left: 12px; }
.page-balance b { color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums; }
.page[data-page="guide"] .guide-screen { min-height: calc(var(--canvas-viewport-height, 840px) - 64px); }

/* 飞升演出独立于 #app 的 zoom，覆盖真实视口。 */
html.ascension-playing { overflow: hidden; }
.ascension-sky {
  position: fixed; inset: 0; z-index: 10000; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; color: #fff1c9; text-align: center;
  background: radial-gradient(ellipse at 50% 36%, #514b32 0, #172b2c 42%, #080f17 83%);
  font-family: "Songti SC", "Noto Serif SC", serif;
  animation: ascension-arrive .6s ease-out both;
}
.ascension-sky * { box-sizing: border-box; }
.ascension-scene { position: absolute; inset: 0; pointer-events: none; }
.ascension-aura { position: absolute; inset: -30%; background: radial-gradient(ellipse at center, #ffe5a68c, #e8b76220 25%, transparent 60%); opacity: 0; animation: ascension-aura 7.6s ease-out both; }
.ascension-rays { position: absolute; width: 160vmax; height: 160vmax; left: calc(50% - 80vmax); top: calc(36% - 80vmax); background: repeating-conic-gradient(from 8deg, transparent 0deg 12deg, #f7d89017 15deg, transparent 19deg 27deg); opacity: 0; animation: ascension-rays 7.6s ease-out both; }
.ascension-cloud { position: absolute; top: -8%; width: 100%; height: 80%; filter: blur(12px); background: radial-gradient(ellipse at 35% 30%, #090f1cf0 0, #142b34a0 24%, transparent 55%); animation: ascension-cloud 5s ease-in-out both; }
.cloud-left { left: -25%; --part: -30%; }
.cloud-right { right: -25%; transform: scaleX(-1); --part: 30%; }
.ascension-lightning { position: absolute; top: -5%; width: min(18vw, 170px); height: 55%; background: #fff0b7; filter: drop-shadow(0 0 14px #a7ceff); clip-path: polygon(65% 0, 43% 30%, 66% 27%, 27% 62%, 45% 58%, 0 100%, 18% 49%, 35% 51%, 44% 19%, 52% 20%); opacity: 0; animation: ascension-lightning 2.3s ease-out both; }
.bolt-left { left: 22%; }
.bolt-right { right: 21%; transform: scaleX(-1); animation-delay: .35s; }
.ascension-gate { position: absolute; left: 50%; top: 10%; width: clamp(118px, 19vw, 230px); height: 38%; max-height: 360px; transform: translateX(-50%); border: 1px solid #ffe1a1; border-radius: 50% 50% 0 0; box-shadow: 0 0 35px #e5c27c65, inset 0 0 40px #ffe8b247; background: linear-gradient(#fff1c92e, #f3d89909); opacity: 0; animation: ascension-gate 7.6s ease-out both; }
.ascension-gate i { position: absolute; inset: 3px 50% 0 3px; border: 1px solid #e5be7080; border-radius: 100% 0 0 0; background: linear-gradient(90deg, #26302d, #75643e); transform-origin: left center; animation: ascension-door 4s 1.3s ease-in-out both; }
.ascension-gate i + i { inset: 3px 3px 0 50%; border-radius: 0 100% 0 0; transform-origin: right center; }
.ascension-gate span { position: absolute; top: 15%; left: 0; right: 0; font-size: 12px; letter-spacing: .8em; padding-left: .8em; opacity: .65; }
.ascension-path { position: absolute; left: 25%; width: 50%; top: 26%; bottom: 0; background: linear-gradient(#fff0be70, #d2b77604); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: 0; animation: ascension-path 7.6s ease-out both; }
.ascension-ring { position: absolute; width: min(76vw, 600px); aspect-ratio: 1; border: 1px solid #f0d18e90; border-radius: 50%; left: 50%; top: 36%; transform: translate(-50%, -50%) rotateX(66deg); box-shadow: 0 0 30px #f8dc8e25, inset 0 0 30px #f8dc8e25; opacity: 0; animation: ascension-ring 7.6s ease-out both; }
.ring-inner { width: min(58vw, 440px); border-style: dashed; animation-delay: .2s; }
.ascension-traveler { position: absolute; left: calc(50% - 18px); top: 43%; width: 36px; height: 70px; filter: drop-shadow(0 0 12px #ffe7ab); animation: ascension-traveler 7.6s ease-in-out both; }
.ascension-traveler i { position: absolute; width: 12px; height: 12px; left: 12px; border-radius: 50%; background: #172527; border: 1px solid #e8d4a4; }
.ascension-traveler b { position: absolute; top: 11px; inset-inline: -6px; height: 55px; background: linear-gradient(90deg, #0e2025, #5f695a, #14272b); clip-path: polygon(42% 0, 58% 0, 68% 35%, 100% 93%, 58% 85%, 48% 100%, 35% 85%, 0 93%, 32% 35%); }
.ascension-motes { position: absolute; inset: 0; }
.ascension-motes i { position: absolute; left: var(--x); top: 88%; width: 3px; height: 3px; border-radius: 50%; background: #ffe6a1; box-shadow: 0 0 9px #fdd48c; opacity: 0; animation: ascension-mote 5.7s var(--delay) ease-out both; }
.ascension-chapters { position: absolute; left: 16px; right: 16px; top: 57%; font-size: clamp(20px, 3vw, 28px); letter-spacing: .35em; }
.ascension-chapters span { position: absolute; inset: 0; opacity: 0; animation: ascension-chapter 2.2s .1s ease both; }
.ascension-chapters span + span { animation-delay: 2.3s; }
.ascension-copy { position: absolute; left: 20px; right: 20px; top: 51%; opacity: 0; animation: ascension-copy 3s 4.1s ease-out both; }
.ascension-copy small { font-size: 12px; letter-spacing: .25em; color: #e3c78d; }
.ascension-copy h2 { margin: 8px 0 14px; padding-left: .28em; font-weight: 500; font-size: clamp(54px, 9vw, 90px); letter-spacing: .28em; line-height: 1.2; color: #fff0bf; text-shadow: 0 0 35px #ffe4a180, 0 2px 1px #684819; }
.ascension-copy p { color: #e9dfc7; font-size: clamp(14px, 2vw, 17px); line-height: 1.9; margin: 0 0 18px; letter-spacing: .16em; }
.ascension-achievement { color: #d3c197; font: 12px/1.7 system-ui, sans-serif; letter-spacing: .06em; }
.ascension-achievement span { margin: 0 8px; }
.ascension-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); white-space: nowrap; min-height: 44px; padding: 10px 24px; border: 1px solid #e8d29a60; border-radius: 30px; background: #112324b3; color: #e6d4ab; font: 13px/1.5 system-ui, sans-serif; cursor: pointer; }
.ascension-skip:hover { background: #385047; border-color: #ffe3a1; }
.ascension-skip:focus-visible { outline: 2px solid #ffe3a1; outline-offset: 5px; }
.ascension-skip span { margin-left: 10px; }
@keyframes ascension-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes ascension-aura { 0%,15% { opacity: 0; transform: scale(.6); } 48% { opacity: .95; } 100% { opacity: .5; transform: scale(1.2); } }
@keyframes ascension-rays { 0%,20% { opacity: 0; transform: rotate(-14deg); } 58% { opacity: 1; } 100% { opacity: .65; transform: rotate(14deg); } }
@keyframes ascension-cloud { 0%,22% { opacity: 1; translate: 0; } 100% { opacity: .25; translate: var(--part) -15%; } }
@keyframes ascension-lightning { 0%,20%,34%,60%,100% { opacity: 0; } 24%,39% { opacity: .85; } 28%,46% { opacity: .1; } }
@keyframes ascension-gate { 0%,15% { opacity: 0; } 35%,80% { opacity: 1; } 100% { opacity: .4; } }
@keyframes ascension-door { 0%,20% { transform: scaleX(1); } 75%,100% { transform: scaleX(.07); opacity: .3; } }
@keyframes ascension-path { 0%,27% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .2; } }
@keyframes ascension-ring { 0%,20% { opacity: 0; scale: .6; } 40%,60% { opacity: .8; } 100% { opacity: 0; scale: 1.5; } }
@keyframes ascension-traveler { 0%,25% { opacity: 0; transform: translateY(60px); } 36% { opacity: 1; } 70% { opacity: 1; } 90%,100% { opacity: 0; transform: translateY(-24vh) scale(.25); } }
@keyframes ascension-mote { 0% { opacity: 0; } 20%,65% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--drift), calc(-1 * var(--rise))); } }
@keyframes ascension-chapter { 0%,100% { opacity: 0; transform: translateY(8px); } 25%,70% { opacity: 1; transform: translateY(0); } }
@keyframes ascension-copy { from { opacity: 0; transform: translateY(18px); } 45%,100% { opacity: 1; transform: none; } }
@media (max-height: 600px) {
  .ascension-copy { top: 42%; }
  .ascension-copy h2 { font-size: 48px; margin: 4px 0; }
  .ascension-copy p { font-size: 13px; margin-bottom: 8px; }
  .ascension-gate { top: 4%; height: 34%; }
  .ascension-skip { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ascension-sky, .ascension-sky * { animation: none !important; }
  .ascension-copy, .ascension-gate { opacity: 1; }
  .ascension-aura { opacity: .5; }
  .ascension-chapters, .ascension-lightning, .ascension-traveler, .ascension-cloud, .ascension-ring, .ascension-motes { display: none; }
  .ascension-gate i { transform: scaleX(.07); }
}

/* 天劫征兆贴合真实视口：只笼罩上方两成，不阻挡交互。 */
.tribulation-sky {
  position: fixed; inset: 0 0 auto; width: 100%; height: 20vh; height: 20dvh;
  z-index: 80; pointer-events: none; overflow: hidden; isolation: isolate;
  opacity: .72;
  mask-image: linear-gradient(#000 0%, #000 48%, transparent 100%);
  animation: tribulation-arrive 2.4s ease-out both;
}
.tribulation-sky * { pointer-events: none; }
.tribulation-clouds { position: absolute; inset: -10% -5% 0; width: 110%; height: 110%; }
.tribulation-cloud-bank { animation: tribulation-drift 26s ease-in-out infinite alternate; transform-origin: center; }
.tribulation-mist {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 22% 0%, #0a142a35, transparent 65%), radial-gradient(ellipse at 80% 12%, #91aac21a, transparent 58%);
  background-size: 120% 130%; animation: tribulation-mist 19s ease-in-out infinite alternate;
}
.tribulation-bolt {
  position: absolute; top: 0; width: clamp(64px, 12vw, 160px); height: 92%;
  fill: none; stroke: #c5dcf6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #96b9ef80); opacity: 0;
  animation: tribulation-lightning 13s linear infinite;
}
.tribulation-bolt path { vector-effect: non-scaling-stroke; }
.tribulation-bolt-left { left: 23%; }
.tribulation-bolt-right { right: 18%; animation-duration: 17s; animation-delay: -7s; }
.tribulation-omen { margin: 6px 0; color: #a8bacb; font-size: 11px; letter-spacing: .08em; }
@keyframes tribulation-arrive { from { opacity: 0; } to { opacity: .72; } }
@keyframes tribulation-drift { from { transform: translateX(-2%) scaleY(.94); } to { transform: translateX(2%) scaleY(1.06); } }
@keyframes tribulation-mist { from { background-position: 0% 0%; } to { background-position: 100% 30%; } }
@keyframes tribulation-lightning {
  0%, 40%, 42%, 43.5%, 100% { opacity: 0; }
  40.5% { opacity: .5; }
  41% { opacity: .12; }
  42.5% { opacity: .32; }
}
@media (prefers-reduced-motion: reduce) {
  .tribulation-sky, .tribulation-sky * { animation: none !important; }
  .tribulation-bolt { display: none; }
}

html.tribulation-playing { overflow: hidden; }
.tribulation-trial { position: fixed; inset: 0; z-index: 9999; overflow: hidden; isolation: isolate; background: #040912; color: #d6e4f0; font-family: "Songti SC", "Noto Serif SC", serif; text-align: center; }
.trial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; animation: trial-arrive .8s ease-out both; }
.trial-heading { position: absolute; top: max(7%, env(safe-area-inset-top)); left: 16px; right: 16px; }
.trial-heading > small { font: 11px/1.8 system-ui, sans-serif; color: #91a7bc; letter-spacing: .35em; }
.trial-heading h2 { margin: 10px 0 0; font-size: clamp(38px, 7vw, 64px); line-height: 1.6; font-weight: 400; letter-spacing: .4em; padding-left: .4em; text-shadow: 0 0 32px #88b4db50; }
.trial-chapter { margin: 4px 0 16px; letter-spacing: .3em; font-size: 13px; color: #a7bfd5; }
.trial-seals { display: flex; justify-content: center; gap: 18px; }
.trial-seals i { display: grid; place-items: center; border: 1px solid #7290aa50; width: 24px; height: 24px; font: 11px/1 serif; color: #7290aa; transform: rotate(45deg); opacity: .3; }
.trial-seals i:nth-child(1) { animation: trial-seal .8s 1.5s both; }
.trial-seals i:nth-child(2) { animation: trial-seal .8s 2.7s both; }
.trial-seals i:nth-child(3) { animation: trial-seal .8s 3.9s both; }
.trial-result { position: absolute; top: 73%; left: 20px; right: 20px; opacity: 0; transform: translateY(12px); transition: opacity 1s, transform 1s; }
.tribulation-trial[data-stage="result"] .trial-result { opacity: 1; transform: none; }
.trial-result > small { color: #a0b0bf; font-size: 10px; letter-spacing: .24em; }
.trial-result h3 { margin: 4px 0; font-size: clamp(24px, 4vw, 34px); font-weight: 400; letter-spacing: .18em; }
.trial-result p { margin: 2px 0 8px; color: #9faebe; font-size: 12px; }
.trial-strength { font: 10px/1.8 system-ui, sans-serif; color: #8a9db0; }
.trial-strength span { margin-left: 12px; white-space: nowrap; }
.trial-reward { display: block; margin-top: 5px; font: 14px/1.7 system-ui, sans-serif; color: #ead49a; }
.tribulation-trial[data-outcome="success"][data-stage="result"] .trial-result h3 { color: #f2deb1; text-shadow: 0 0 25px #d4b67040; }
.trial-skip { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; white-space: nowrap; padding: 8px 22px; border: 1px solid #8caac34d; border-radius: 28px; background: #0c1a27b8; color: #afc0cf; font: 12px/1.5 system-ui, sans-serif; }
.trial-skip:focus-visible { outline: 2px solid #d5c18d; outline-offset: 4px; }
.settlement-trial-reward { color: #e8ce91; }

/* Keep the final build beside its result, ahead of explanations and battle records. */
.settlement { padding: 14px; }
.settlement-heading { display: flex; align-items: center; gap: 12px; text-align: left; }
.settlement-heading > div { min-width: 0; }
.settlement-heading > .spirit-flame { flex:0 0 58px; width:58px; height:64px; margin:0; }
.settlement-heading .ending-art { flex: 0 0 58px; width: 58px; height: 64px; margin: 0; border: 0; border-radius: 8px; }
.settlement-heading .ending-art b { font-size: 32px; }
.settlement-heading h2 { margin: 2px 0; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.settlement-heading small, .settlement-heading span { color: var(--muted); font-size: 10px; }
.settlement .settlement-power { margin: 12px 0 10px; padding: 12px 8px; gap: 5px; border-radius: 10px; }
.settlement .settlement-power strong { font-size: min(48px, calc(100cqi / var(--power-chars, 9) / 0.68)); }
.settlement .settlement-power span { font-size: 11px; }
.settlement-rewards { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.settlement-rewards > div { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 6px 10px; background: #d6bc7f08; border-radius: 6px; }
.settlement-rewards small { font-size: 11px; }
.settlement-rewards b { font-size: 18px; color: var(--accent); overflow-wrap: anywhere; }
.settlement-build { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.settlement-build > section { min-width: 0; padding: 0; border: 0; }
.settlement-build h3 { display: block; font-size: 14px; margin: 0 0 8px; }
.settlement-build h3 small { display: block; margin-top: 2px; font-size: 10px; }
.settlement-build .settlement-list { display: grid; gap: 6px; }
.settlement-build .summary-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 7px 8px; }
.settlement-build .summary-item b { font-weight: 600; }
.settlement-build .summary-contribution { color: var(--accent); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.settlement-build .rarity-legendary b { color: #e3bf7e; }
.settlement-build .rarity-epic b { color: #c3a1e2; }
.settlement-build .rarity-rare b { color: #94c0dc; }
.settlement-build > section > .muted { font-size: 11px; }
.settlement-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.settlement-actions button { min-width: 0; padding: 8px 4px; font-size: 13px; }
.settlement .failure-explanation h3 { font-size: 14px; }
.settlement .failure-explanation p { font-size: 12px; }
.settlement-reason { color: var(--muted); font-size: 12px; }
@keyframes trial-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes trial-seal { to { opacity: .9; color: #c7d7e6; border-color: #adc9e2; box-shadow: 0 0 12px #8bb9e340; } }
@media (max-height: 700px) { .trial-heading { top: 4%; } .trial-heading h2 { font-size: 34px; } .trial-result { top: 64%; } .trial-result h3 { font-size: 24px; } }
@media (max-height: 460px) { .trial-heading { top: 3%; right: auto; left: 5%; width: 32%; } .trial-heading h2 { font-size: 30px; margin-top: 0; } .trial-heading > small { font-size: 9px; } .trial-result { top: 33%; left: auto; right: 3%; width: 31%; } .trial-result h3 { font-size: 22px; } .trial-result p { font-size: 10px; } .trial-strength span { display: block; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .tribulation-trial, .trial-seals i { animation: none; } .trial-result { transition: none; } .trial-seals i { opacity: .65; } }

/* 长数值必须留在各自属性格内，不能遮住幸运等相邻属性。 */
.overview-stats > .metric { min-width: 0; }
.overview-stats .metric strong { max-width: 100%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Global rankings use ordinary document flow, including expanded build details. */
.rank-tabs { flex-wrap:wrap; }
.rank-form { display:grid; gap:12px; margin:16px 0; }
.rank-form label { display:grid; gap:8px; }
.rank-form input { width:100%; min-width:0; box-sizing:border-box; padding:12px; color:inherit; background:transparent; border:1px solid #6665; border-radius:8px; font:inherit; }
.rank-row-heading { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:center; }
.rank-row-heading strong { grid-column:2; overflow-wrap:anywhere; }
.rank-row-heading b { overflow-wrap:anywhere; }
.rank-place { grid-row:span 2; font-size:1.2rem; color:#b98d53; }
.rank-own { border-color:#b98d53; }
.rank-build { margin-top:14px; }
.rank-build p,.rank-status p { overflow-wrap:anywhere; }
.rank-status .actions { flex-wrap:wrap; }

/* 元婴天象独立于缩放画布，不影响事件卡布局。 */
html.nascent-playing { overflow: hidden; }
.nascent-soul-sky { position: fixed; inset: 0; z-index: 1500; background: transparent; color: #e4eee5; isolation: isolate; }
.nascent-backdrop, .nascent-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nascent-backdrop { opacity: .38; }
.nascent-player { position: absolute; left: 50%; top: 60%; width: clamp(80px, min(26vw, 14vh), 150px); height: auto; transform: translate(-50%, -100%); filter: drop-shadow(0 0 10px #55e4cc80); pointer-events: none; }
.nascent-copy { position: absolute; top: max(6%, env(safe-area-inset-top)); left: 16px; right: 16px; text-align: center; pointer-events: none; text-shadow: 0 2px 18px #000; }
.nascent-chapter { color: #a7c7bd; font-size: 11px; letter-spacing: .28em; }
.nascent-copy h2 { margin: 12px 0 8px; font: 500 clamp(32px, 7vw, 48px)/1.5 "Songti SC", "Noto Serif SC", serif; letter-spacing: .22em; color: #f1dca4; }
.nascent-copy p { margin: 0; font-size: 12px; line-height: 1.9; letter-spacing: .18em; opacity: 0; transition: opacity .8s; }
.nascent-soul-sky[data-stage="formed"] .nascent-copy p { opacity: 1; }
.nascent-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 24px; border: 1px solid #d5bd7666; border-radius: 24px; background: #071b21d9; color: #e6d3a6; font: 13px/1.6 system-ui, sans-serif; white-space: nowrap; }
.nascent-skip:focus-visible { outline: 2px solid #e4ce94; outline-offset: 4px; }
@media (max-height: 460px) { .nascent-copy { top: 4%; left: 3%; right: auto; width: 32%; } .nascent-copy h2 { font-size: 28px; margin: 4px 0; } .nascent-chapter { font-size: 9px; } .nascent-copy p { font-size: 10px; } .nascent-skip { left: auto; right: 3%; transform: none; bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .nascent-copy p { transition: none; } }

/* 洞府：真实时间驱动的第二条成长线。页面允许整页滚动，不裁切内容。 */
.cave-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--muted); font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.cave-status.ready { color: var(--accent); border-color: #d6bc7f66; }
.cave-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.splash-cave { margin: -24px 0 20px; display: flex; justify-content: center; }
footer { display: flex; flex-direction: column; align-items: center; gap: 4px; }
footer > div { margin-top: 0; }
footer .cave-status { max-width: 100%; white-space: normal; text-align: center; }
.cave-rule { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.cave-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cave-actions button { flex: 1; min-height: 44px; }
.cave-grid { display: grid; gap: 9px; }
.cave-plot { margin: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.cave-plot.empty { border-style: dashed; }
.cave-plot > small { font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.cave-plot p { margin: 0; font-size: 12px; line-height: 1.6; }
.cave-plot > button { align-self: flex-start; min-height: 40px; }
.cave-plot-heading small { font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.cave-plot-heading h3 { margin: 2px 0 0; font-size: 17px; }
.cave-plot[data-rarity=rare] { border-color: #5f7d8d; }
.cave-plot[data-rarity=epic] { border-color: #8b6d9c; }
.cave-meter { height: 6px; border-radius: 3px; background: #ffffff10; overflow: hidden; }
.cave-meter i { display: block; height: 100%; background: linear-gradient(90deg, #8aa47a, var(--accent)); transition: width .4s; }
.cave-seed-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cave-seed-options button { min-height: 40px; font-size: 12px; padding: 6px 8px; }
.cave-seed-options button small { color: var(--muted); margin-left: 4px; }
.cave-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.cave-upgrade button { min-height: 36px; font-size: 12px; padding: 5px 10px; text-align: right; }
.cave-upgrade small { color: var(--muted); }
.cave-inventory { margin: 0; }
.cave-inventory h3 { margin: 0 0 8px; font-size: 15px; }
.cave-inventory h3 small { display: block; margin-top: 2px; font-size: 10px; font-weight: normal; color: var(--muted); }
.cave-tier { margin-top: 6px; }
.cave-tier > small { font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.cave-stock-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cave-stock { display: inline-flex; flex-direction: column; gap: 1px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; }
.cave-stock b { font-weight: 500; }
.cave-stock small { font-size: 10px; color: var(--muted); }
.cave-stock[data-rarity=rare] { border-color: #5f7d8d; }
.cave-stock[data-rarity=epic] { border-color: #8b6d9c; }
.cave-heading { margin: 4px 0 0; font-size: 15px; }
.cave-heading small { font-size: 10px; font-weight: normal; color: var(--muted); margin-left: 6px; }
.cave-recipe { margin: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.cave-recipe[data-rarity=rare] { border-color: #5f7d8d; }
.cave-recipe[data-rarity=epic] { border-color: #8b6d9c; }
.cave-recipe-grades { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.cave-recipe-grades span:first-child { color: var(--text); }
.cave-ingredients { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 11px; }
.cave-ingredients span { padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px; }
.cave-ingredients span.short { color: #ed9470; border-color: #885d50; }
.cave-recipe > button { align-self: flex-start; min-height: 38px; }
.cave-study { display: flex; gap: 6px; align-items: stretch; }
.cave-study select { flex: 1; min-width: 0; font: inherit; font-size: 13px; background: #151d19; border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 6px 8px; }
.cave-study button { min-height: 40px; white-space: nowrap; }
.cave-satchel .opening-preparation[data-rarity=rare] { border-color: #5f7d8d; }
.cave-satchel .opening-preparation[data-rarity=epic] { border-color: #8b6d9c; }
.cave-satchel .opening-preparation.selected { border-color: var(--accent); }
.cave-satchel > button { margin-top: 8px; }
.cave-reward { margin-bottom: 6px; }
@media (min-width: 720px) { .cave-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* Code-native plaques, with semantic colors and distinct interaction states.
   Layers keep old component colors from overriding the skin; layout stays local. */
@layer buttons {
  :root {
    --button-gold-top: #ead79b;
    --button-gold-bottom: #c5a45e;
    --button-gold-ink: #30291b;
    --button-gold-line: #8c7142;
    --control-hue: 155;
    --control-saturation: 10%;
    --control-accent: #c1cfc4;
  }

  button {
    --button-top: hsl(var(--control-hue) var(--control-saturation) 22%);
    --button-bottom: hsl(var(--control-hue) var(--control-saturation) 15%);
    --button-ink: var(--control-accent);
    --button-line: hsl(var(--control-hue) var(--control-saturation) 37%);
    --button-rim: hsl(var(--control-hue) var(--control-saturation) 26%);
    --button-inner: hsl(var(--control-hue) var(--control-saturation) 33%);
    --button-ornament: #ffffff06;
    appearance: none;
    border: 1px solid var(--button-line);
    border-radius: 4px;
    background-color: var(--button-bottom);
    background-image:
      radial-gradient(circle at 0 100%, transparent 9px, var(--button-ornament) 10px 11px, transparent 12px 17px, var(--button-ornament) 18px 19px, transparent 20px),
      radial-gradient(circle at 100% 0, transparent 9px, var(--button-ornament) 10px 11px, transparent 12px 17px, var(--button-ornament) 18px 19px, transparent 20px),
      linear-gradient(175deg, var(--button-top), var(--button-bottom));
    color: var(--button-ink);
    box-shadow: inset 0 0 0 2px var(--button-rim),
      inset 0 0 0 3px var(--button-inner), 0 2px 3px #00000026;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-weight: 600;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: filter 140ms ease, box-shadow 140ms ease;
  }

  /* Gold identifies the main action, rather than every clickable surface. */
  button.primary {
    --button-top: #f1dfa7;
    --button-bottom: #cfad65;
    --button-ink: #282416;
    --button-line: #c1a365;
    --button-rim: #fae8b4;
    --button-inner: #9b7a3e;
    --button-ornament: #8c714214;
    text-shadow: 0 1px #ffffff18;
  }

  /* A restrained gold outline marks persistent selection on the ink surface. */
  button:is(.active, .selected, [aria-pressed="true"], [aria-current="step"]),
  .opening-steps .current button {
    --button-top: #393d2e;
    --button-bottom: #282f25;
    --button-ink: #f2dfaa;
    --button-line: #c9ae70;
    --button-rim: #625f42;
    --button-inner: #454b34;
    --control-accent: #d6bc7f;
    box-shadow: inset 0 0 0 2px var(--button-rim),
      inset 0 0 0 3px var(--button-inner), inset 0 -3px var(--control-accent),
      0 0 0 1px var(--control-accent);
  }

  /* Ending/resetting progress is visually distinct from ordinary navigation. */
  button:is([data-action="settle"], [data-action="resetGrowth"]) {
    --button-top: #54372e;
    --button-bottom: #392622;
    --button-ink: #eac0ae;
    --button-line: #966958;
    --button-rim: #67483b;
    --button-inner: #825b4b;
    --control-accent: #eac0ae;
  }

  button:disabled,
  button[aria-disabled="true"] {
    --button-top: #29352f;
    --button-bottom: #202b25;
    --button-ink: #9eaa9f;
    --button-line: #465448;
    --button-rim: #303f35;
    --button-inner: #465448;
    --button-ornament: transparent;
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--button-rim), inset 0 0 0 3px var(--button-inner);
    text-shadow: none;
    cursor: not-allowed;
  }

  button:is(.opening-preparation, .opening-relic, .opening-card-toggle) :is(small, b, em, span),
  .opening-steps button > :is(span, b),
  .cave-seed-options button small {
    color: inherit;
  }
  .opening-card-toggle .opening-talent-preview [data-rarity] {
    color: revert-layer;
  }
  .opening-steps button > span {
    background: #141b1914;
    border-color: currentColor;
    box-shadow: none;
  }
  .splash-shortcuts .splash-entry-icon {
    color: inherit;
    border-color: #d6bc7f30;
    background: transparent;
  }
  .splash-shortcuts .splash-entry {
    --button-top: #26352d;
    --button-bottom: #1b2721;
    --button-line: #40574a;
    --button-rim: #2d4035;
    --button-ornament: transparent;
    box-shadow: inset 0 0 0 2px var(--button-rim);
    font-family: inherit;
    font-weight: 500;
  }
  .splash-shortcuts {
    gap: 6px;
  }
  button.cave-status {
    box-shadow: inset 0 0 0 2px var(--button-rim);
    --button-ornament: transparent;
  }
  button.cave-status.ready {
    --button-line: #acc997;
    --button-ink: #d6e6bd;
  }

  @media (hover: hover) {
    button:not(:disabled):not([aria-disabled="true"]):hover {
      filter: brightness(1.15);
      border-color: var(--control-accent);
    }
  }
  button:not(:disabled):not([aria-disabled="true"]):active {
    filter: brightness(.82);
    box-shadow: inset 0 0 0 2px var(--control-accent),
      inset 0 0 0 3px var(--button-inner), inset 0 3px 5px #00000026;
  }
  button:focus-visible {
    outline: 2px solid #f3dda5;
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    button { transition: none; }
  }
}

/* Confirmed journey prototype, 2026-10-14. All event content grows with the page. */
#app.live-journey { width: min(100%, 720px); flex-basis: auto; min-height: 100dvh !important; --bg: #141b19; --panel: #1c2522; }
#app.live-journey > main { padding: 10px 12px 18px; min-height: calc(100dvh - 44px); }
.live-journey .page[data-page=journey] { display: flex; flex-direction: column; gap: 10px; min-height: calc(100dvh - 72px); padding: 0; }
.live-journey .panel { margin: 0; border-radius: 12px; }
#app.live-journey > footer { position: static; left: auto; bottom: auto; transform: none; height: auto; padding: 8px 12px; width: 100%; }
#app.live-journey > footer .footer-feedback { position: static; }
#app > .journey-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 8px 0 4px; background: #141b19f5; backdrop-filter: blur(6px); border-bottom: 1px solid #2a3630; }
.journey-topbar button { margin: 0; line-height: 1.2; }
.journey-topbar > button { flex: 0 0 auto; white-space: nowrap; }
.journey-topbar .journey-home { padding: 6px 8px; min-height: 32px; background: transparent; border: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.journey-title { flex: 1; min-width: 0; line-height: 1.2; }
.journey-title h1 { margin: 0; display: block; font: 600 14px "Songti SC", serif; letter-spacing: .06em; }
.journey-title small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-topbar .journal-toggle { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.journey-pause, .journey-topbar .journey-pause { min-width: 72px; height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 8px; background: #2a2a1f; color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.journey-topbar .journey-pause.play { background: var(--accent); color: #1b1a12; }
.journey-topbar .journey-settings { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 16px; }
.live-journey .journey-hero { position: relative; isolation: isolate; overflow: hidden; padding: 12px 12px 10px; border-color: #3b5048; background: linear-gradient(160deg,#1f2d28,#1a2320); }
.journey-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#141b1926,#141b1999 45%,#141b19d9), url('./src/media/journey-cave-v2.jpg') left center / cover; opacity: .65; pointer-events: none; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.hero-top .rank-pill { margin: 0; padding: 1px 7px; min-height: 20px; border: 1px solid #456457; border-radius: 10px; color: #a8c6b4; background: #18201999; font-size: 9px; }
.hero-body { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; align-items: center; }
.journey-player { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.journey-player::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle,#7fd6c22b,transparent 70%); animation: ember-breathe 4s ease-in-out infinite alternate; }
.journey-player img { position: relative; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 6px 10px #0008); }
.hero-vitals { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 10px; min-width: 0; }
.hero-realm { grid-column: 1 / -1; font: 600 17px/1.3 "Songti SC",serif; letter-spacing: .08em; }
/* Realm tint: hue by major realm, brightness by phase. From 元婴 on the name
   carries a glow that grows with each phase; 大乘 wears divine light. */
.realm-tag { --realm: #d8d2c4; --glow-size: 6px; --glow-alpha: 45%; display: inline-block; position: relative; color: var(--realm); white-space: nowrap; }
.realm-tag[data-realm="1"] { --realm: #cfd6d1; }
.realm-tag[data-realm="2"] { --realm: #9fd6b2; }
.realm-tag[data-realm="3"] { --realm: #f0c86a; }
.realm-tag[data-realm="4"] { --realm: #cfa9f5; }
.realm-tag[data-realm="5"] { --realm: #8ac4ff; }
.realm-tag[data-realm="6"] { --realm: #7fe3dc; }
.realm-tag[data-realm="7"] { --realm: #ff9d78; }
.realm-tag[data-realm="8"] { --realm: #fff0c4; }
.realm-tag em { font-style: normal; font-weight: 500; opacity: .62; }
.realm-tag[data-phase="2"] { --glow-size: 8px; --glow-alpha: 55%; }
.realm-tag[data-phase="2"] em { opacity: .8; }
.realm-tag[data-phase="3"] { --glow-size: 10px; --glow-alpha: 65%; }
.realm-tag[data-phase="3"] em { opacity: 1; }
.realm-tag[data-phase="4"] { --glow-size: 13px; --glow-alpha: 85%; }
.realm-tag[data-phase="4"] em { opacity: 1; font-weight: 700; }
.realm-tag[data-realm="4"], .realm-tag[data-realm="5"], .realm-tag[data-realm="6"], .realm-tag[data-realm="7"] {
  text-shadow: 0 0 var(--glow-size) color-mix(in srgb, var(--realm) var(--glow-alpha), transparent), 0 0 calc(var(--glow-size) * 2.2) color-mix(in srgb, var(--realm) calc(var(--glow-alpha) / 2), transparent);
}
/* 大乘: flowing gold-white light through the glyphs, a breathing halo and slow rays behind. */
.realm-tag[data-realm="8"] {
  isolation: isolate; color: transparent;
  background: linear-gradient(100deg, #fff3d6 0%, #ffd77e 18%, #ffffff 34%, #ffd27a 50%, #fff8e6 64%, #ffe2a0 82%, #fff3d6 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 calc(var(--glow-size) * .5) #fff0c4bb) drop-shadow(0 0 var(--glow-size) #f3c86e88);
  animation: realm-divine-shimmer 3.2s linear infinite;
}
.realm-tag[data-realm="8"] em { color: var(--realm); opacity: 1; }
.realm-tag[data-realm="8"][data-phase="1"] em, .realm-tag[data-realm="8"][data-phase="2"] em { opacity: .85; }
.hero-realm .realm-tag[data-realm="8"]::before, .hero-realm .realm-tag[data-realm="8"]::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero-realm .realm-tag[data-realm="8"]::before { inset: -70% -28%; border-radius: 50%; background: radial-gradient(ellipse at center, #ffe9b06e, #f3c86e2e 45%, transparent 72%); animation: realm-divine-breathe 2.6s ease-in-out infinite alternate; }
.hero-realm .realm-tag[data-realm="8"]::after { inset: -120% -40%; background: repeating-conic-gradient(from 0deg, #fff3c800 0deg 11deg, #fff3c846 13deg 15deg, #fff3c800 17deg 30deg); -webkit-mask: radial-gradient(ellipse at center, #000 18%, transparent 68%); mask: radial-gradient(ellipse at center, #000 18%, transparent 68%); animation: realm-divine-rays 16s linear infinite; }
@keyframes realm-divine-shimmer { from { background-position: 200% 0; } to { background-position: -60% 0; } }
@keyframes realm-divine-breathe { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes realm-divine-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .realm-tag[data-realm="8"], .hero-realm .realm-tag[data-realm="8"]::before, .hero-realm .realm-tag[data-realm="8"]::after { animation: none; } }
.breakthrough-progress small .realm-tag { font-weight: 600; }
.hero-vitals .hero-power, .hero-vitals .metric-ap { position: relative; padding: 0; min-width: 0; }
.hero-vitals small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.hero-vitals strong { display: block; font: 600 32px/1.15 "Songti SC",serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: #f1d7a1; }
.hero-vitals .metric-ap strong { font-size: 28px; color: #f6d9b4; padding-right: 30px; }
.hero-vitals .metric-ap { container-type: inline-size; }
.hero-vitals .metric-ap strong { font-size: min(28px, 25cqi); }
.journey-hero .breakthrough-progress { margin-top: 8px; padding: 0; background: transparent; border: 0; }
.journey-hero .breakthrough-progress > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; align-items: baseline; }
.journey-hero .breakthrough-progress b { font-size: 12px; }
.journey-hero .breakthrough-progress small { font-size: 10px; }
.journey-hero .breakthrough-track { height: 6px; margin: 4px 0; }
.journey-hero .breakthrough-track i { background: linear-gradient(90deg,#4f8f84,#7fd6c2); }
.journey-hero .tribulation-omen { margin: 2px 0 0; font-size: 11px; }
.live-journey .journey-build { padding: 10px 12px; }
.build-attributes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.build-attributes .metric { padding: 0; display: inline-flex; align-items: baseline; gap: 5px; }
.build-attributes .metric small { font-size: 10px; }
.build-attributes .metric strong { font-size: 13px; }
.build-talents { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.build-talents > small { font-size: 10px; color: var(--muted); }
.build-group { margin-top: 8px; }
.build-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.build-group-head b { color: var(--text); font-size: 12px; }
.build-group-head small { color: var(--muted); font-size: 10px; font-weight: 400; }
.build-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.build-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px; max-width: 100%; border: 1px solid #46534a; border-radius: 4px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.build-chip small { font-size: 9px; color: var(--muted); }
.build-pills .build-chip em { color: var(--muted); }
.build-pills-total { color: var(--accent) !important; }
.pill-reward p { margin: 2px 0 0; font-size: 13px; }
.pill-reward p[data-rarity=rare] { color: #8bbbd6; }
.pill-reward p[data-rarity=epic] { color: #d6bc7f; }
.build-chip em { font-style: normal; font-size: 10px; color: #abd1b0; }
.build-chip[data-rarity=rare], .build-chip[data-rarity=稀有] { color: #8bbbd6; border-color: #42687c; }
.build-chip[data-rarity=epic], .build-chip[data-rarity=史诗] { color: #d6bc7f; border-color: #8e7847; }
.build-chip[data-rarity=legendary], .build-chip[data-rarity=传说] { color: #e8a0c9; border-color: #8a5577; }
.build-chip.primary-skill { border-color: var(--accent); background: #2a2a1f; }
.build-chip.primary-skill > small:first-child { color: var(--accent); }
.build-overflow { margin-top: 5px; }
.build-overflow summary { cursor: pointer; width: fit-content; border: 1px dashed #5a6a60; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--muted); }
.build-overflow[open] summary { margin-bottom: 5px; }
.build-detail-link { text-align: right; margin-top: 6px; }
.build-detail-link button { min-height: 28px; font-size: 11px; padding: 3px 10px; margin: 0; }
.journey-build .journey-status { margin-top: 8px; gap: 5px; }
.journey-build .status-tag { font-size: 10px; }
.live-journey .journey-playback { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px; font-size: 12px; color: var(--muted); }
.journey-playback i { flex: 0 0 7px; height: 7px; border-radius: 50%; background: #7fd6c2; box-shadow: 0 0 8px #7fd6c2; }
.journey-playback.paused i { background: var(--muted); box-shadow: none; }
.journey-playback.waiting i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.journey-playback span { flex: 1; min-width: 0; }
.journey-playback button { min-height: 28px; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11px; white-space: nowrap; }
.live-journey .journey-event, .journey-event { height: auto; min-height: 0; max-height: none; overflow: visible; padding: 16px 16px 14px; display: block; }
.journey-event .inline-result-body { height: auto; max-height: none; overflow: visible; }
.journey-event .event-actions { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; }
.journey-event .event-actions button { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 10px 12px; font: 500 15px/1.5 "Songti SC",serif; border-radius: 10px; }
.event-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.event-glyph { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #5a6a60; border-radius: 50%; font: 14px "Songti SC",serif; color: var(--text); background: #243029; }
.event-kind .event-dwell { margin-left: auto; letter-spacing: 0; font-size: 11px; }
.journey-event h2 { padding: 0; margin: 6px 0 4px; font-size: 21px; line-height: 1.4; }
.journey-event .inline-power { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; padding: 6px 10px; margin: 4px 0 2px; background: #111a15; }
.journey-event .inline-power-delta { margin-left: auto; font-size: 18px; }
.journey-event .inline-reward { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #182019; border: 1px solid #2d3a34; }
.journey-event .inline-reward b { font-size: 13px; }
.journey-event .inline-reward p { margin: 2px 0 0; font-size: 13px; }
.journey-event .inline-reward small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.journey-event .event-summary { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.journey-event .risk { margin: 10px 0 0; font-size: 13px; padding: 10px 12px; }
.event-foot { text-align: right; margin-top: 8px; }
.event-foot button { min-height: 28px; border: 0; background: transparent; color: var(--accent); padding: 0; font-size: 11px; }
.event-quiet { border-color: #2f3f38; background: linear-gradient(160deg,#1b2622,#1c2522); }
.journey-event.event-quiet h2 { font-size: 18px; }
.quiet-round { margin-top: 6px; color: #7fd6c2; font-size: 12px; overflow-wrap: anywhere; }
.event-battle { border-color: #6b5a3b; background: linear-gradient(120deg,#2b2a1f,#1c2522 60%); }
.journey-event.visual-victory { border-color: #a78f55; background: linear-gradient(120deg,#353225,#1c2522 60%); }
.journey-event.visual-defeat { border-color: #7a4a3c; background: linear-gradient(120deg,#342420,#1c2522 60%); }
.journey-event.visual-escape { border-color: #4a5e6b; background: linear-gradient(120deg,#24303a,#1c2522 60%); }
.event-side, .journey-event.visual-story, .event-gain, .journey-event.visual-opportunity { border-color: #3f5a52; background: linear-gradient(160deg,#1d2b27,#1c2522 60%); }
.journey-event.visual-relic { border-color: #42687c; background: linear-gradient(170deg,#202d33,#1c2522 45%); }
.live-journey .early-settlement { margin-top: auto; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.journal-layer { position: fixed; inset: 0; height: 100dvh; z-index: 80; overflow: hidden; }
.journal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background: #0b100ecc; backdrop-filter: blur(3px); border: 0; border-radius: 0; box-shadow: none; filter: none; }
.journal-backdrop:hover, .journal-backdrop:active { box-shadow: none; filter: none; }
.journey-topbar .journey-home, .journey-topbar .journey-settings,
.journey-playback button, .event-foot button, .journal-drawer-head button { box-shadow: none; }
.journal-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(86%,360px); display: flex; flex-direction: column; background: #161e1b; border-left: 1px solid #3b4a42; box-shadow: -12px 0 30px #0008; padding: 0; }
.journal-drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.journal-drawer-head h2 { flex: 1; margin: 0; font-size: 17px; }
.journal-drawer-head button { border: 0; background: transparent; font-size: 12px; min-height: 32px; padding: 0 4px; }
.journal-running { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 14px 8px; font-size: 12px; color: var(--muted); }
.journal-running button { margin: 0; }
.journal-drawer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid #2d3a34; }
.journal-drawer-tools select { min-width: 70px; min-height: 32px; padding: 4px; font-size: 12px; }
.journal-drawer-tools button { flex: 1; margin: 0; min-height: 32px; padding: 4px 6px; font-size: 11px; color: var(--accent); }
.journal-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; padding: 12px 14px; scrollbar-width: thin; }
.journal-entry { padding: 8px 0; border-top: 1px dashed #2d3a34; overflow-wrap: anywhere; }
.journal-entry small { font-size: 10px; color: var(--muted); }
.journal-entry p, .journal-current > p { margin: 3px 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-current { background: #182019; padding: 8px 10px; border-left: 2px solid #4f8f84; border-radius: 0 6px 6px 0; margin-bottom: 12px; }
.journal-current > small { font-size: 10px; color: #7fd6c2; }
.journal-current h3 { font-size: 15px; margin: 5px 0; }
.journal-history-title { font-size: 12px; color: var(--muted); }
.journal-drawer-pages { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 14px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #2d3a34; background: #161e1b; font-size: 12px; }
.journal-drawer-pages button { min-height: 36px; margin: 0; padding: 4px 12px; font-size: 12px; }
.atlas-art-frame { float: right; display: grid; place-items: center; width: 104px; height: 104px; margin: 0 0 8px 12px; border: 1px solid #46534a; border-radius: 10px; background: radial-gradient(circle,#ffffff08,transparent 75%); }
.atlas-art-frame img { width: 96px; height: 96px; object-fit: contain; }
.atlas-art-frame[data-rarity=rare] { border-color: #42687c; }
.atlas-art-frame[data-rarity=epic] { border-color: #8e7847; }
.atlas-art-frame[data-rarity=legendary] { border-color: #8a5577; }
.atlas-art-frame.undiscovered img { opacity: .5; filter: saturate(.4); }
.atlas-entry::after { content: ""; display: block; clear: both; }
@media (max-width: 389px) {
  .hero-body { grid-template-columns: 76px minmax(0,1fr); gap: 8px; }
  .journey-player { width: 76px; height: 76px; }
  .journey-player img { width: 72px; height: 72px; }
  .hero-vitals { gap: 4px 6px; }
  .hero-vitals .hero-power strong { font-size: 28px; }
  .journey-title small { font-size: 9px; }
  .journey-topbar .journey-home { padding: 6px; }
}
@media (min-width: 600px) {
  .hero-body { grid-template-columns: 112px minmax(0,1fr); gap: 14px; }
  .journey-player { width: 112px; height: 112px; }
  .journey-player img { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) { .journey-player::before { animation: none; } }

/* Cave art uses live objects over quiet backgrounds; controls remain real HTML. */
.cave-icon { display: inline-block; flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; overflow: hidden; vertical-align: middle; }
.cave-scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 3 / 2; margin: 0; border: 1px solid #435748; border-radius: 8px; overflow: hidden; background: #28352c; }
.cave-scene-background { display: block; width: 100%; height: 100%; object-fit: cover; }
.cave-scene figcaption { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px 22px; background: linear-gradient(#132019db, #13201980 65%, transparent); color: #f1e6c8; pointer-events: none; }
.cave-scene figcaption b { font: 600 15px "Songti SC", serif; white-space: nowrap; }
.cave-scene figcaption span { font-size: 10px; text-align: right; line-height: 1.5; }
.cave-scene .cave-scene-spot { position: absolute; left: var(--spot-x); top: var(--spot-y); transform: translate(-50%, -50%); width: 26%; height: 41%; min-height: 0; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-family: inherit; text-shadow: none; color: #eee3c7; overflow: visible; }
.cave-scene .cave-scene-spot:hover, .cave-scene .cave-scene-spot:active { box-shadow: none; }
.cave-scene .cave-scene-spot:focus-visible { outline-offset: 2px; }
.cave-scene-object { position: relative; z-index: 1; width: 85%; height: 68%; filter: drop-shadow(0 3px 2px #18211966); transform-origin: center bottom; }
.cave-scene-spot[data-stage=young] .cave-scene-object { transform: scale(.68); }
.cave-scene-label { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1px; align-items: center; max-width: 100%; padding: 3px 5px; border: 1px solid #9aaa7855; border-radius: 3px; background: #15231be8; line-height: 1.25; }
.cave-scene-label b { font-size: 10px; font-weight: 500; }
.cave-scene-label small { color: #acbca9; font-size: 9px; }
.cave-scene-spot.ready .cave-scene-label { border-color: #d6bc7f; background: #333421ed; color: #f0dc9f; }
.cave-scene-spot.ready .cave-scene-label small { color: #e0cc97; }
.cave-scene .cave-scene-spot.locked { opacity: .75; }
.cave-scene-empty { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 7px; border: 1px dashed #e4e0c277; border-radius: 50%; color: #e6e3ce; background: #15231b70; font-size: 20px; font-weight: 400; }
.cave-scene-spot.locked .cave-scene-empty { opacity: .35; }
.cave-scene-furnace .cave-scene-spot, .cave-scene-library .cave-scene-spot { width: 32%; height: 49%; }
.cave-scene-furnace .cave-scene-object { height: 78%; }
.cave-scene-furnace .cave-scene-spot[data-level="1"] .cave-scene-object { filter: sepia(.6) saturate(.65) drop-shadow(0 3px 2px #18211966); }
.cave-scene-furnace .cave-scene-spot[data-level="3"] .cave-scene-object { filter: sepia(.3) saturate(1.6) hue-rotate(-22deg) drop-shadow(0 3px 2px #18211966); }
.cave-scene-furnace .cave-scene-spot[data-level="4"] .cave-scene-object { filter: hue-rotate(245deg) saturate(.7) drop-shadow(0 3px 2px #18211966); }
.cave-scene-furnace .cave-scene-spot[data-level="5"] .cave-scene-object { filter: grayscale(.8) brightness(1.35) drop-shadow(0 3px 2px #18211966); }
.cave-scene-spot[data-stage=brewing]::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: 27%; height: 19%; background: radial-gradient(ellipse, #ffc362aa, #d77d3a55 45%, transparent 72%); animation: cave-fire 2s ease-in-out infinite alternate; }
.cave-scene-spot[data-stage=brewing]::after { content: ""; position: absolute; left: 47%; top: 0; width: 9%; height: 25%; border-radius: 50%; background: #f0e4cf77; filter: blur(3px); animation: cave-smoke 3s ease-in-out infinite; pointer-events: none; }
.cave-scene-spot[data-stage=studying]::before { content: ""; position: absolute; left: 17%; right: 17%; top: 25%; bottom: 22%; background: radial-gradient(ellipse, #f1cb6266, transparent 70%); animation: cave-fire 4s ease-in-out infinite alternate; }
.cave-scene-satchel .cave-scene-object { width: 78%; height: 73%; }
.cave-object-heading { display: flex; align-items: center; gap: 10px; }
.cave-object-heading > div { min-width: 0; }
.cave-upgrade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.cave-upgrade > button { width: 100%; text-align: center; }
.cave-plot-heading small { color: var(--accent); font-size: 10px; }
.cave-plot[id], #cave-recipes, #cave-satchel-inventory { scroll-margin-top: 56px; }
.cave-seed-options .cave-icon { width: 28px; height: 28px; margin-right: 3px; }
.cave-stock-art { display: grid; grid-template-columns: 34px auto; gap: 0 5px; min-width: 0; }
.cave-stock-art .cave-icon { width: 34px; height: 38px; grid-row: 1 / 3; }
.cave-stock-art b { align-self: end; }
.cave-stock-art small { align-self: start; }
.cave-recipe .shop-card-title { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 8px; }
.cave-recipe .shop-card-title .cave-icon { grid-row: 1 / 3; width: 42px; height: 42px; }
.cave-recipe .shop-card-title small { grid-column: 2; text-align: left; }
.cave-ingredients .cave-icon { width: 20px; height: 22px; margin-right: 3px; }
.cave-pill-card > span:first-child { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0 5px; }
.cave-pill-card > span:first-child .cave-icon { width: 34px; height: 40px; grid-row: 1 / 3; }
.cave-pill-card > span:first-child small { grid-column: 2; }
.atlas-art-frame > .cave-icon { width: 96px; height: 96px; }
.atlas-art-frame.undiscovered > .cave-icon { opacity: .45; filter: saturate(.4); }
@keyframes cave-fire { from { opacity: .55; } to { opacity: 1; } }
@keyframes cave-smoke { 0% { opacity: 0; transform: translateY(5px) scale(.8); } 50% { opacity: .65; } 100% { opacity: 0; transform: translateY(-10px) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .cave-scene-spot::before, .cave-scene-spot::after { animation: none; } }

.journey-event.inline-result > h2 { padding-right: 0; }
.journey-event.visual-relic[data-rarity=common] { border-color: #5a6a60; --result-glow: #a8c6b4; }
.journey-event.visual-relic[data-rarity=rare] { border-color: #42687c; --result-glow: #8bbbd6; }
.journey-event.visual-relic[data-rarity=epic] { border-color: #8e7847; --result-glow: #d6bc7f; }
.journey-event.visual-relic[data-rarity=legendary] { border-color: #8a5577; --result-glow: #e8a0c9; }
.journal-backdrop { touch-action: none; }

.journey-topbar button, .journal-drawer button { box-shadow: none; }
.journey-event .event-actions button.primary { border: 1px solid #8e7847; background: linear-gradient(180deg,#3a3524,#2a2a1f); color: #f1dfb3; box-shadow: none; }

/* 洞府货架 · 货郎的行箧（2026-10-14） */
.shop-greeting { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.shop-greeting small { display: block; font-size: 11px; color: var(--muted); }
.item-illustration { object-fit: contain; }
.shop-card:has(> .shop-item-art) { display: flow-root; }
.shop-card > .shop-item-art { float: right; width: 64px; height: 64px; margin: 0 0 8px 10px; object-fit: contain; }
.shop-card:has(> .shop-item-art) > .shop-card-title { display: block; }
.shop-card:has(> .shop-item-art) > .shop-card-title small { display: block; margin-top: 4px; }
.shop-card-title h3 { overflow-wrap: anywhere; }
.shop-card-bottom { clear: both; }
.relic > .item-illustration { display: block; width: 48px; height: 48px; margin: 0 auto 8px; }
.opening-relic:has(> .item-illustration) { display: flow-root; }
.opening-relic > .item-illustration { float: right; width: 48px; height: 48px; margin: 0 0 6px 8px; }
.shop-card.shop-empty { opacity: .72; border-style: dashed; }
.shop-card.shop-treasure details { margin: 0 0 6px; font-size: 12px; }
.shop-card.shop-treasure details summary { cursor: pointer; color: var(--muted); }
.shop-card.shop-treasure details p { margin: 4px 0 0; line-height: 1.5; }
.shop-refresh { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 10px 0; }
.shop-refresh small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.cave-held h3 { margin: 0 0 6px; font-size: 15px; }
.cave-held h3 small { font-size: 11px; color: var(--muted); font-weight: normal; }
.growth-dao { font-size: 12px; color: var(--muted); }
.opening-loan { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line, rgba(255,255,255,.12)); }
.opening-loan h3 { margin: 0; font-size: 16px; }
.toy-profile { display:flex; gap:12px; align-items:center; min-width:0; margin-bottom:12px; }
.toy-profile img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.toy-profile h2 { margin:0; overflow-wrap:anywhere; }
.toy-profile p { margin:4px 0; }
.toy-identity { overflow-wrap:anywhere; }
.toy-rank-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.rank-row-heading:has(.toy-rank-avatar) { grid-template-columns:28px 28px minmax(0,1fr); }
.rank-row-heading:has(.toy-rank-avatar) strong { grid-column:3; }
.splash-shortcuts:has([data-action="tab:leaderboard"]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.poster-layer { position:fixed; inset:0; z-index:100; overflow-y:auto; overscroll-behavior:contain; padding:16px 12px; background:#081613e8; }
.cloud-status { display:flex; align-items:center; gap:8px; justify-content:space-between; padding:7px 10px; margin:0 0 10px; border:1px solid #7d79524d; border-radius:9px; color:#c7cdbd; font-size:12px; line-height:1.5; }
.cloud-status span { min-width:0; overflow-wrap:anywhere; }
.cloud-status button { flex-shrink:0; padding:4px 10px; min-height:32px; font-size:12px; }
.cloud-settings { font-size:14px; line-height:1.7; }
.cloud-layer { position:fixed; inset:0; z-index:200; overflow-y:auto; padding:28px 14px; background:#081613ed; overscroll-behavior:contain; }
.cloud-dialog { width:min(100%,390px); margin:0 auto; padding:20px; border:1px solid #9c946a; border-radius:16px; background:#182723; color:#e0e3cf; line-height:1.7; }
.cloud-dialog h2 { font-size:21px; margin:0 0 14px; }
.cloud-dialog p { overflow-wrap:anywhere; }
.cloud-dialog button { display:block; width:100%; margin-top:12px; }
.cloud-choice { border-top:1px solid #77795466; margin-top:18px; padding-top:10px; }
.cloud-choice h3 { font-size:17px; }
.poster-dialog { width:min(100%,480px); margin:0 auto; padding:16px; border:1px solid #9bbd8666; border-radius:16px; background:#192c26; color:#e2e6ce; }
.poster-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.poster-heading h2 { margin:0; }
.settlement-poster-image { display:block; width:100%; height:auto; border-radius:6px; }
.poster-dialog .actions { display:flex; flex-wrap:wrap; gap:8px; }

/* Opening rarity must survive the shared button descendant color rules. */
.opening-wizard :where(.opening-draw-card, .opening-confirm, .opening-talent-effects > span, .opening-skill-preview, .starting-skill, .opening-confirm-skill, .opening-confirm-talents > div) { --opening-rarity: #b9c6bd; }
.opening-wizard [data-rarity=稀有], .opening-wizard [data-rarity=rare] { --opening-rarity: #8bbbd6; }
.opening-wizard [data-rarity=史诗], .opening-wizard [data-rarity=epic] { --opening-rarity: #d7b373; }
.opening-wizard [data-rarity=传说], .opening-wizard [data-rarity=legendary] { --opening-rarity: #ed9470; }
.opening-wizard .opening-card-toggle .opening-card-topline .opening-quality,
.opening-wizard .opening-confirm-heading .opening-quality,
.opening-wizard .opening-card-toggle .opening-talent-effects > [data-rarity],
.opening-wizard .opening-card-toggle .opening-skill-preview > span:first-child > :is(b, small),
.opening-wizard .starting-skill > :is(b, .opening-skill-rarity),
.opening-wizard .opening-confirm-skill,
.opening-wizard .opening-confirm-talents > [data-rarity] > :is(b, .rarity) { color: var(--opening-rarity); }
.opening-wizard .opening-draw-card[data-rarity] { border-color: var(--opening-rarity); }
.opening-wizard .opening-quality { border-color: currentColor; }
.settlement-restart { margin: 12px 0; }
.settlement-restart > button { width: 100%; min-height: 44px; margin: 0; }
.cave-prefer { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--muted); }
.cave-prefer-note { display: block; margin-top: 4px; font-size: 11px; color: var(--accent); }
.cave-prefer select { flex: 1; min-width: 0; font: inherit; font-size: 12px; background: #151d19; border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 5px 8px; }
.cave-reminder { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: #d6bc7f66; background: linear-gradient(120deg, #d6bc7f12, transparent 60%), var(--panel); }
.cave-reminder-body small { font-size: 10px; color: var(--accent); letter-spacing: .12em; }
.cave-reminder-body p { margin: 2px 0 0; font-size: 12px; line-height: 1.6; }
.cave-reminder-body b { color: var(--accent); }
.cave-reminder > button { flex: none; min-height: 40px; }
.cave-reminder-dialog h2 { font-size: 21px; }
.cave-reminder-list { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.8; color: #e8dcc0; }
.cave-reminder-actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 6px; }
.cave-reminder-actions button { flex: 1; min-height: 46px; }
/* The reminder follows the viewport, not the long settlement page. */
.cave-reminder-backdrop { position: fixed; }
/* Gift codes grow with their content; long tokens wrap on narrow screens. */
.gift-panel label{display:block;margin:12px 0 6px}
.gift-panel textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:88px;resize:vertical;overflow-wrap:anywhere;word-break:break-all;font:inherit;padding:10px;border:1px solid var(--border);border-radius:8px;background:#151d19;color:var(--text)}
.gift-panel .actions{margin-top:12px}
.gift-panel .gift-status{white-space:pre-wrap;overflow-wrap:anywhere}
.gift-panel details{margin-top:12px}
.gift-uid{box-sizing:border-box;width:100%;min-width:0;padding:10px;border:1px solid var(--border);border-radius:6px;font:inherit;background:#151d19;color:var(--text)}
/* Keep the sync indicator light even under the shared carved-button theme. */
.splash-topbar .cloud-badge { border:0; background:transparent; box-shadow:none; color:var(--muted); font-weight:400; }
.splash-topbar .cloud-badge[data-status=synced] { color:#b9d6bd; }

/* Optional B站 support gifts: content grows with page scrolling. */
.support-rewards { display:grid; gap:10px; }
.support-reward { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
.support-reward h3 { margin:0 0 6px; }
.support-reward p { margin:0; color:var(--muted); }
.support-reward button { flex-shrink:0; }
.support-status { min-height:1.6em; overflow-wrap:anywhere; }

/* Cloud detection text uses existing topbar space without shifting the menu. */
.splash-topbar { position:relative; }
.cloud-hint { position:absolute; top:100%; left:4px; max-width:190px; padding-top:3px; color:var(--muted); font-size:10px; line-height:1.4; white-space:nowrap; }