/* 国漫插画图集与第二版界面。此层只负责呈现，游戏规则仍由引擎处理。 */
:root {
  --art-gold: #e7c985;
  --art-jade: #8dcbb4;
  --art-line: #d4bb7957;
  --art-paper: #f0e5c8;
}

.art-icon {
  display: inline-block;
  width: 1.9em;
  height: 1.9em;
  flex: 0 0 auto;
  vertical-align: middle;
  background-image: url('assets/icon-atlas.png');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--ix, 0%) var(--iy, 0%);
  filter: drop-shadow(0 2px 3px #001d1c70);
}
.nav-tabs button .art-icon { width: 24px; height: 24px; margin-right: 7px; padding: 0; }
.action-card .art-icon { width: 40px; height: 40px; margin: 0 2px; }
.currency .art-icon { width: 24px; height: 24px; margin-right: 4px; }
.item-top .art-icon { width: 44px; height: 44px; }
.quest-mark .art-icon { width: 29px; height: 29px; }
.next-step-card > .art-icon { width: 48px; height: 48px; }
.outcome-seal .art-icon { width: 54px; height: 54px; }
.scene-location .art-icon { width: 34px; height: 34px; }

.portrait.original {
  background-image: url('assets/characters.png');
  background-size: 200% auto;
  background-position: left top;
  background-repeat: no-repeat;
}
.portrait.original.female { background-position: right top; }
.scene-character .portrait.original { background-size: 210% auto; }
.portrait.art-portrait {
  background-image: url('assets/portraits-v2.png');
  background-size: 200% 200%;
  background-position: var(--px, 0%) var(--py, 0%);
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.scene-character { z-index: 2; }
.scene-character:has(.art-portrait) {
  width: min(440px, 67%);
  height: auto;
  aspect-ratio: 3 / 2;
  left: -2%;
  bottom: 0;
  filter: drop-shadow(0 12px 13px #061a22a1);
}
.scene-character .portrait.art-portrait {
  width: 100%;
  height: 100%;
  background-size: 200% 200%;
  background-position: var(--px, 0%) var(--py, 0%);
}
.scene-caption, .scene-location, .scene-poem { z-index: 3; }
.avatar .portrait.art-portrait,
.battle-avatar .portrait.art-portrait {
  position: absolute;
  width: 240%;
  height: auto;
  aspect-ratio: 3 / 2;
  left: -70%;
  top: -6%;
  background-size: 200% 200%;
  background-position: var(--px, 0%) var(--py, 0%);
}
.npc-portrait {
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  border: 1px solid var(--art-line);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #102e2c;
  box-shadow: 0 0 0 5px #c1ae7b0a;
}
.npc-portrait .portrait.art-portrait {
  position: absolute;
  width: 245%;
  height: auto;
  left: -72.5%;
  top: -7%;
}

:is(.art-skin-button, .gold-button, .start-button, .action-card.primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f0e2b4;
  background: linear-gradient(110deg, #395e46, #1c3d36);
  border: 1px solid #dcc3899c;
  box-shadow: inset 0 0 0 2px #8c6b3025, 0 3px 11px #0002;
  text-shadow: 0 1px 3px #082824;
}
:is(.art-skin-button, .gold-button, .start-button, .action-card.primary)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/ui-kit.png') 12.364% 5.754% / 292.571% 660.645% no-repeat;
  opacity: .85;
  transition: opacity .22s ease, filter .22s ease;
}
:is(.art-skin-button, .gold-button, .start-button, .action-card.primary):hover:not(:disabled) {
  color: #fff0c3;
  border-color: #f2d89a;
  box-shadow: inset 0 0 0 2px #b9984c2b, 0 4px 18px #d3b25c1a;
}
:is(.art-skin-button, .gold-button, .start-button, .action-card.primary):hover:not(:disabled)::before { opacity: 1; filter: brightness(1.12); }
:is(.art-skin-button, .gold-button, .start-button, .action-card.primary):disabled::before { opacity: .42; }
:is(.art-skin-button, .gold-button, .start-button, .action-card.primary) > * { position: relative; }
:is(.creation-navigation > .outlined-button, .next-step-actions > .outlined-button) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #29423a;
  color: #183d35;
  text-shadow: 0 1px 1px #f6e9c8;
}
:is(.creation-navigation > .outlined-button, .next-step-actions > .outlined-button)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/ui-kit.png') 91.189% 5.721% / 274.286% 682.667% no-repeat;
  opacity: .72;
}
.frame-decoration.panel, .creation-modal, .view-panel { position: relative; isolation: isolate; }
.frame-decoration.panel::before, .creation-modal::before, .view-panel::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: url('assets/ui-kit.png') 16.979% 42.188% / 368.345% 266.667% no-repeat;
  opacity: .1;
  mix-blend-mode: screen;
}

.creation-modal {
  width: min(1120px, 100%);
  height: min(820px, 94dvh);
  max-height: 94dvh;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
  overflow: hidden;
  border-color: #ddc68c88;
}
.creation-art {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-shadow: inset -1px 0 #dcc78c29;
}
.creation-art-title { top: 35px; left: 28px; right: 25px; width: auto; }
.creation-art-title h2 { font-size: clamp(24px, 2.8vw, 32px); text-wrap: balance; }
.creation-art > .portrait.art-portrait {
  width: 142%;
  height: auto;
  aspect-ratio: 3 / 2;
  left: -21%;
  right: auto;
  bottom: 58px;
  background-size: 200% 200%;
  background-position: var(--px, 0%) var(--py, 0%);
}
.creation-art-footer { bottom: 28px; font-size: 13px; }
.creation-art-footer strong { display: block; font-size: 25px; letter-spacing: 4px; font-weight: 500; margin-bottom: 7px; }
.creation-art-footer p { font-size: 13px; letter-spacing: 2px; margin: 3px 0 8px; }
.story-divider { height: 32px; color: transparent; background: url('assets/ui-kit.png') 0% 100% / 200% 300% no-repeat; opacity: .8; }
.story-divider::before, .story-divider::after { display: none; }
.creation-form {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 30px 34px 24px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 95% 0%, #62744425, transparent 65%), #122e30;
}
.creation-form > h2 { font-size: 27px; margin: 4px 0 17px; letter-spacing: 4px; }
.creation-form > .eyebrow { display: block; margin-bottom: 17px; }
.create-step-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 23px;
  padding-bottom: 17px;
  border-bottom: 1px solid #c4b47826;
  flex: 0 0 auto;
}
.create-step-tabs button {
  min-width: 0;
  padding: 9px 3px;
  border-color: #c8b97a2d;
  color: #a7b9ab;
  font-size: 13px;
  letter-spacing: 1px;
  background: #07232935;
  border-radius: 3px;
}
.create-step-tabs button.active,
.create-step-tabs button.selected,
.create-step-tabs button[aria-selected='true'] {
  border-color: #e2c487a6;
  color: #ead6a3;
  background: linear-gradient(110deg, #4a644441, #ad945321);
  box-shadow: inset 0 -2px #c7ab6b5c;
}
.create-step-tabs button:disabled { opacity: .38; }
.create-step-tabs button small { display: block; font-size: 10px; line-height: 1.4; color: #9bb398; margin-bottom: 3px; letter-spacing: 2px; }
.create-step-tabs button.active small { color: #d4be87; }
.create-step { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; padding-right: 8px; margin-right: -8px; scrollbar-width: thin; scrollbar-color: #bba87765 transparent; animation: art-step-in .28s ease-out both; }
.create-step[hidden] { display: none !important; }
.create-step h3 { font-size: 17px; font-weight: 500; letter-spacing: 2px; color: #e1d5af; margin: 7px 0 11px; }
.create-step > p { font-size: 13px; color: #a5b8a9; line-height: 1.9; margin-bottom: 15px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 14px 0 18px;
}
.form-grid > * { min-width: 0; }
.form-grid label { display: grid; gap: 7px; font-size: 13px; color: var(--gold); }
.form-grid input, .form-grid select {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #bfaa7157;
  border-radius: 3px;
  background: #081f25bd;
  color: #e1e5d6;
  padding: 9px 10px;
  font-size: 14px;
}
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 13px 0 19px;
}
.option-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  border: 1px solid #92ab863e;
  border-radius: 4px;
  padding: 12px;
  background: linear-gradient(135deg, #2d4b3820, #0421294d);
  color: #cdd7c9;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.option-card strong { font-size: 15px; font-weight: 500; letter-spacing: 1px; color: #e4d7b1; }
.option-card small, .option-card p { font-size: 12px; color: #a6b8a7; line-height: 1.75; margin: 0; }
.option-card > span:not(.art-icon):not(.portrait) { font-size: 12px; line-height: 1.7; }
.option-card.selected, .option-card.active, .option-card[aria-pressed='true'] {
  border-color: #dcca8b;
  background: linear-gradient(120deg, #526a424f, #a9963e16);
  box-shadow: inset 0 0 0 1px #ccba7b25, 0 0 18px #c2b46a0a;
}
.option-card.selected strong, .option-card[aria-pressed='true'] strong { color: #f1dfa8; }
.option-card:focus-visible { outline-offset: 3px; }
:is(.appearance-options, .appearance-options3) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 21px;
}
:is(.appearance-options, .appearance-options3) .option-card { padding: 8px 7px 11px; align-items: center; text-align: center; overflow: hidden; }
.appearance-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid #c7b47826; margin-bottom: 3px; }
.appearance-thumb .portrait.art-portrait { position: static; width: 100%; height: 100%; aspect-ratio: 3 / 2; flex: 0 0 auto; }
.appearance-thumb .portrait.original { width: 100%; height: 100%; flex: 0 0 auto; background-size: 200% auto; background-position: left 18%; }
.appearance-thumb .portrait.original.female { background-position: right 18%; }
:is(.appearance-options, .appearance-options3) strong { font-size: 13px; letter-spacing: 0; }
:is(.appearance-options, .appearance-options3) small { font-size: 11px; }
.creation-summary {
  min-width: 0;
  margin: 17px 0;
  padding: 16px 18px;
  border: 1px solid #d0b77c50;
  border-radius: 4px;
  background: linear-gradient(130deg, #647a4123, #061f252e);
  font-size: 13px;
  line-height: 1.9;
}
.creation-summary h3 { color: #e5d4a5; font-size: 17px; margin: 0 0 9px; }
.creation-summary p { color: #b7c7b3; margin: 5px 0; }
.creation-summary strong { font-weight: 500; color: #e5d4a5; }
.creation-summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 15px; margin: 10px 0 0; }
.creation-summary dt { color: #96ae9a; }
.creation-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; color: #dedcc3; }
.creation-summary .stat-grid { margin-top: 14px; gap: 9px 20px; }
.creation-form .allocation-row > div:first-child { flex: 1; min-width: 0; padding-right: 13px; }
.creation-form .allocation-row small { font-size: 12px; line-height: 1.7; }
.creation-form .point-controls { gap: 12px; flex: 0 0 auto; }
.creation-form .presets { gap: 7px; }
.creation-form .presets button { min-width: 0; padding: 8px 4px; font-size: 12px; }
.creation-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 19px;
  border-top: 1px solid #b5b07224;
  flex: 0 0 auto;
}
.creation-navigation > button { min-height: 44px; }
.creation-navigation .gold-button, .creation-navigation .start-button { flex: 1; min-width: 0; white-space: normal; padding: 12px 16px; letter-spacing: 2px; }
.creation-navigation .outlined-button { min-width: 82px; }
.creation-form .creation-note { font-size: 11px; line-height: 1.8; }

.next-step-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 18px;
  padding: 20px 23px;
  border: 1px solid #d4bd7d65;
  border-radius: 4px;
  background: linear-gradient(105deg, #53705227, #102a2edc);
  box-shadow: inset 3px 0 #d5bb7c71, 0 8px 22px #0001;
}
.next-step-info { min-width: 0; flex: 1; }
.next-step-info .eyebrow { font-size: 11px; letter-spacing: 2px; }
.next-step-info h3, .next-step-info strong { display: block; color: #e5d8b0; font-size: 16px; line-height: 1.7; font-weight: 500; margin: 4px 0; letter-spacing: 1px; }
.next-step-info p { font-size: 13px; line-height: 1.9; color: #a8bcaa; margin: 5px 0 0; }
.next-step-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; min-width: 116px; }
.next-step-actions button { min-height: 41px; font-size: 13px; letter-spacing: 1px; padding: 9px 12px; }
.next-step-actions .text-button { min-height: 28px; font-size: 12px; }

.story-chains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 23px; }
.story-chain-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #bdaa7050;
  border-radius: 4px;
  background: linear-gradient(125deg, #314d342b, #081e253b);
  position: relative;
  overflow: hidden;
}
.story-chain-card h2, .story-chain-card h3 { font-size: 20px; letter-spacing: 2px; font-weight: 500; color: #e2d2a6; margin: 0 0 9px; }
.story-chain-card > p { color: #abbfaa; font-size: 13px; line-height: 1.95; margin: 7px 0; }
.story-chain-card.complete, .story-chain-card.completed { border-color: #91b89765; background: linear-gradient(125deg, #48664330, #0c282b66); }
.chain-track { display: flex; gap: 8px; margin: 15px 0 14px; }
.chain-step {
  display: block;
  flex: 1;
  min-width: 0;
  height: 6px;
  padding: 0;
  border: 1px solid #8aab8f3a;
  border-radius: 3px;
  background: #021b253d;
}
.chain-step.done, .chain-step.complete, .chain-step.completed { border-color: #cebc806b; background: linear-gradient(90deg, #648f77, #cfbd7f); box-shadow: 0 0 8px #c9b67917; }
.chain-step.active, .chain-step.current { border-color: #e0c98791; background: linear-gradient(90deg, #a78b4866, #7f9c5166); }
.chain-progress { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; height: auto; border-radius: 0; background: transparent; overflow: visible; margin: 0 0 10px; }
.chain-progress strong { min-width: 0; color: #e1d3ac; font-size: 17px; font-weight: 500; line-height: 1.7; letter-spacing: 1px; }
.chain-progress > span { flex: 0 0 auto; color: #a8bc98; font-size: 12px; line-height: 1.7; white-space: nowrap; }
.chain-progress-label { color: #b9c697; font-size: 12px; }
.story-chain-card .outlined-button { margin-top: 11px; }
.story-chain-card .chain-ending, .story-chain-card blockquote { margin: 17px 0 0; padding: 13px 15px; border-left: 2px solid #cabb83a1; background: #c1b9750c; color: #d5d7b5; font-size: 13px; line-height: 1.95; }
.relationship-score { display: inline-block; margin-top: 6px; color: #cbbf91; font-size: 12px; line-height: 1.6; }
.relationship-score strong { color: #e5d7aa; font-size: inherit; display: inline; }
.character-traits { margin-top: 7px; text-align: center; color: #9cb99e; font-size: 12px; line-height: 1.8; }
.retreat-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; border-top: 1px solid #a9b28b22; margin-top: 17px; padding-top: 13px; }
.retreat-row > span { flex: 1; min-width: 0; color: #97ad9b; font-size: 12px; line-height: 1.8; }
.retreat-row button { flex: 0 0 auto; }
.animation-setting { display: flex; align-items: center; gap: 10px; margin: 2px 0 24px; color: #ccdabf; font-size: 14px; }
.animation-setting input { width: 18px; height: 18px; margin: 0; accent-color: #9ab28c; cursor: pointer; }
.enemy-emblem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.enemy-emblem .art-icon { width: 57px; height: 57px; }
.enemy-emblem > span:not(.art-icon) { font-size: 20px; line-height: 1.1; letter-spacing: 3px; }

.fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.fx-sprite {
  background-image: url('assets/effects.png');
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: var(--fx, 0%) var(--fy, 0%);
  aspect-ratio: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fx-overlay .fx-sprite {
  position: absolute;
  width: min(88vmin, 760px);
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}
.fx-cultivate .fx-sprite, .fx-sprite.fx-cultivate { --fx: 0%; --fy: 0%; animation: art-cultivate 1.45s ease-out both; }
.fx-breakthrough .fx-sprite, .fx-sprite.fx-breakthrough { --fx: 0%; --fy: 100%; animation: art-breakthrough 1.35s ease-out both; }
.fx-rest .fx-sprite, .fx-sprite.fx-rest, .fx-craft .fx-sprite { --fx: 100%; --fy: 0%; animation: art-rest 1.35s ease-out both; }
.fx-combat .fx-sprite, .fx-sprite.fx-combat { --fx: 100%; --fy: 100%; animation: art-combat .85s ease-out both; }
.fx-breakthrough { background: radial-gradient(ellipse, #e2c77c12, transparent 62%); animation: art-light-wash 1.35s ease-out both; }
.fx-combat .fx-sprite { width: min(95vmin, 850px); }
.ambient-energy {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: .21;
  mix-blend-mode: screen;
}
.ambient-energy .fx-sprite {
  position: absolute;
  width: 64%;
  left: -3%;
  bottom: -29%;
  --fx: 100%;
  --fy: 0%;
  animation: art-ambient 19s ease-in-out infinite;
  filter: saturate(.8);
}

@keyframes art-step-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes art-cultivate { 0% { opacity: 0; transform: scale(.54) rotate(-16deg); } 32% { opacity: .72; } 70% { opacity: .5; } 100% { opacity: 0; transform: scale(1.14) rotate(13deg); } }
@keyframes art-breakthrough { 0% { opacity: 0; transform: scale(.44); } 22% { opacity: .94; transform: scale(.92); } 49% { opacity: .72; } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes art-rest { 0% { opacity: 0; transform: translateY(25px) scale(.7); } 37% { opacity: .63; } 100% { opacity: 0; transform: translateY(-18px) scale(1.09); } }
@keyframes art-combat { 0% { opacity: 0; transform: translate(-45px, 30px) scale(.74) rotate(-8deg); } 25% { opacity: .88; } 58% { opacity: .63; } 100% { opacity: 0; transform: translate(28px, -19px) scale(1.06) rotate(3deg); } }
@keyframes art-light-wash { 0%, 100% { background-color: transparent; } 27% { background-color: #e5cd8712; } }
@keyframes art-ambient { 0%, 100% { opacity: .6; transform: translateY(8px) scale(.97) rotate(-5deg); } 50% { opacity: 1; transform: translateY(-8px) scale(1.025) rotate(5deg); } }

@media (min-width: 1450px) {
  .scene-character:has(.art-portrait) { width: min(510px, 69%); }
}
@media (max-width: 1200px) {
  .creation-form { padding: 25px; }
  .creation-art-title { left: 23px; }
  .next-step-card { gap: 12px; padding: 18px; }
  .next-step-card > .art-icon { width: 39px; height: 39px; }
  .story-chain-card { padding: 18px; }
}
@media (max-width: 980px) {
  .creation-modal { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .creation-art > .portrait.art-portrait { width: 170%; left: -35%; bottom: 62px; }
  .creation-art-title h2 { font-size: 24px; }
  .creation-form { padding: 23px; }
  .next-step-card { flex-wrap: wrap; }
  .next-step-actions { flex-direction: row; width: 100%; padding-top: 8px; }
  .next-step-actions > button { flex: 1; }
}
@media (max-width: 680px) {
  .modal-backdrop { padding: 10px; }
  .creation-modal { display: block; width: 100%; height: auto; max-height: 94dvh; overflow-y: auto; overflow-x: hidden; }
  .creation-art { height: 185px; min-height: 185px; box-shadow: inset 0 -1px #d6bd8030; }
  .creation-art-title { top: 20px; left: 20px; right: auto; width: 57%; }
  .creation-art-title h2 { font-size: 22px; line-height: 1.7; margin-top: 7px; }
  .creation-art > .portrait.art-portrait { width: 240px; height: auto; aspect-ratio: 3 / 2; left: auto; right: -31px; bottom: -9px; }
  .creation-art > .portrait.original { width: 215px; height: 290px; left: auto; right: -12px; bottom: -106px; }
  .creation-art-footer { display: none; }
  .creation-form { max-height: none; overflow: visible; padding: 20px; }
  .create-step { flex: none; overflow: visible; padding-right: 0; margin-right: 0; }
  .creation-form > h2 { font-size: 23px; letter-spacing: 3px; margin-bottom: 14px; }
  .create-step-tabs { margin-bottom: 19px; padding-bottom: 14px; gap: 6px; }
  .create-step-tabs button { font-size: 12px; letter-spacing: 0; padding: 10px 2px; }
  .create-step h3 { font-size: 16px; }
  .form-grid { gap: 11px; }
  .option-grid { gap: 9px; }
  .option-card { padding: 11px; }
  .option-card strong { font-size: 14px; }
  .option-card small { font-size: 12px; }
  :is(.appearance-options, .appearance-options3) { gap: 7px; }
  :is(.appearance-options, .appearance-options3) .option-card { padding: 6px 4px 9px; }
  :is(.appearance-options, .appearance-options3) strong { font-size: 12px; }
  :is(.appearance-options, .appearance-options3) small { font-size: 10px; }
  .creation-summary { padding: 14px; }
  .creation-navigation { gap: 9px; padding-top: 15px; margin-top: 12px; }
  .creation-navigation .outlined-button { min-width: 68px; padding: 8px 10px; }
  .creation-navigation .gold-button, .creation-navigation .start-button { font-size: 14px; padding: 12px; }
  .scene-character:has(.art-portrait) { width: 83%; max-width: 370px; height: auto; left: -7%; bottom: -2px; }
  .next-step-card { gap: 11px; margin-top: 15px; padding: 16px; }
  .next-step-card > .art-icon { width: 35px; height: 35px; }
  .next-step-info h3, .next-step-info strong { font-size: 15px; }
  .next-step-info p { font-size: 12px; }
  .next-step-actions { gap: 8px; padding-top: 5px; }
  .next-step-actions button { padding: 10px; min-width: 0; white-space: normal; }
  .story-chains { gap: 14px; margin-top: 18px; }
  .story-chain-card { padding: 16px; }
  .story-chain-card h2, .story-chain-card h3 { font-size: 18px; letter-spacing: 1px; }
  .chain-track { gap: 6px; margin-top: 15px; }
  .chain-progress strong { font-size: 16px; letter-spacing: 0; }
  .relationship-score { font-size: 11px; }
  .npc-portrait { width: 74px; height: 74px; }
  .character-traits { display: none; }
  .creation-form .presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-overlay .fx-sprite { width: 115vmin; }
  .nav-tabs button .art-icon { display: inline-block; width: 21px; height: 21px; margin-right: 5px; }
  .nav-tabs button { display: inline-flex; align-items: center; padding: 0 10px; }
}
@media (max-width: 380px) {
  .page-shell { padding: 0 11px; }
  .brand { gap: 8px; }
  .brand strong { font-size: 19px; letter-spacing: 2px; }
  .brand small { font-size: 8px; letter-spacing: .5px; }
  .brand-seal { width: 32px; height: 39px; font-size: 23px; }
  .top-tools { gap: 5px; }
  .currency { font-size: 12px; }
  .currency b { margin-right: 3px; }
  .currency .art-icon { width: 20px; height: 20px; margin-right: 2px; }
  .icon-button { width: 29px; height: 29px; }
  .creation-form { padding: 18px 15px; }
  .creation-art { height: 166px; min-height: 166px; }
  .creation-art-title { left: 16px; top: 18px; width: 57%; }
  .creation-art-title h2 { font-size: 20px; letter-spacing: 1px; }
  .creation-art > .portrait.art-portrait { width: 212px; right: -35px; bottom: -5px; }
  .option-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.appearance-options, .appearance-options3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.appearance-options, .appearance-options3) strong { font-size: 11px; }
  :is(.appearance-options, .appearance-options3) small { display: none; }
  .creation-form .point-controls { gap: 8px; }
  .creation-form .allocation-row small { font-size: 11px; }
  .creation-form .allocation-row strong { font-size: 14px; letter-spacing: 1px; }
  .creation-form .presets button { font-size: 11px; }
  .creation-summary { font-size: 12px; }
  .next-step-card > .art-icon { display: none; }
  .scene-caption { left: 17px; }
  .scene h1 { font-size: 25px; letter-spacing: 3px; }
  .scene-poem { right: 12px; font-size: 12px; }
  .character-panel { gap: 0 10px; grid-template-columns: 59px minmax(0, 1fr) minmax(0, 1fr); }
  .character-panel .avatar { width: 55px; height: 55px; }
  .character-panel h2 { font-size: 16px; letter-spacing: 1px; }
  .character-panel .realm-pill { font-size: 10px; }
  .character-meters .meter > div:first-child { font-size: 10px; }
  .character-meters .meter small { font-size: 9px; }
  .action-grid { gap: 9px; }
  .action-card { padding: 12px 7px; gap: 6px; }
  .action-card .art-icon { width: 30px; height: 30px; margin: 0; }
  .action-card strong { font-size: 14px; letter-spacing: 1px; }
  .action-card small { font-size: 10px; }
  .modal-body { padding: 26px 17px; }
  .battle-versus { gap: 15px; }
  .battle-avatar, .enemy-emblem { width: 82px; height: 82px; }
  .battle-actions { gap: 5px; }
  .battle-actions button { font-size: 12px; }
  .retreat-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .retreat-row > button { text-align: center; }
}

body.animations-off *, body.animations-off *::before, body.animations-off *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* 文字安全区随内容撑开，插画边框只绘制按钮外沿。 */
.gold-button, .start-button, .outlined-button, .action-card {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.gold-button, .start-button { min-height: 56px; padding: 14px 25px; line-height: 1.6; }
.action-card { min-height: 104px; padding: 22px 24px; gap: 14px; align-items: center; }
.action-card > div { min-width: 0; flex: 1; }
.action-card strong, .action-card small { white-space: normal; overflow-wrap: anywhere; }
.action-card strong { line-height: 1.7; }
.action-card small { line-height: 1.8; margin-top: 3px; }
.cultivation-title { flex-wrap: wrap; gap: 12px 18px; }
.cultivation-title > *, .skill-content, .sect-card > div:nth-child(2), .realm-step > div:nth-child(2) { min-width: 0; }
.event-choices > button > div { align-items: flex-start; gap: 10px; }
.event-choices strong { min-width: 0; flex: 1; overflow-wrap: anywhere; line-height: 1.7; }
.choice-index, .chance-tag { flex-shrink: 0; }
.chance-tag { margin-top: 4px; }
.next-step-actions > .outlined-button, .creation-navigation > .outlined-button { min-height: 48px; padding: 11px 22px; line-height: 1.6; }
@media (max-width: 680px) {
  .action-grid { grid-template-columns: minmax(0, 1fr); }
  .action-card { min-height: 96px; padding: 22px 24px; gap: 16px; }
  .action-card strong { font-size: 16px; }
  .action-card small { font-size: 12px; }
  .event-choices > button > div { flex-wrap: wrap; }
  .event-choices strong { flex-basis: calc(100% - 36px); }
  .chance-tag { margin-left: 30px; margin-top: 0; }
}
body.animations-off .fx-overlay, body.animations-off .ambient-energy { display: none !important; }
@media (max-height: 500px) and (min-width: 681px) {
  .creation-modal { height: auto; overflow-y: auto; }
  .creation-form { max-height: none; overflow: visible; }
  .create-step { flex: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fx-overlay, .ambient-energy { display: none !important; }
}