/* V3 视觉层：柔和日系远征主视觉 + 斜向俯视 Q 版战场。 */
:root {
  color-scheme: light;
  --pastel-ink: #243b55;
  --pastel-paper: #fffaf0;
  --pastel-blue: #8dcbe0;
  --pastel-mint: #bfe6c2;
  --pastel-coral: #ee806e;
  --pastel-gold: #f2c562;
  --pastel-shadow: rgba(39, 58, 73, 0.28);
}

html,
body {
  background: radial-gradient(circle at 50% 10%, #e9fbff, #a5d7dc 52%, #547b8f);
}

.app {
  background: #eaf6ee;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 24px 70px rgba(32, 58, 72, 0.38);
}

/* 开场使用完整三人主视觉，不再用三张人物贴图硬拼。 */
.start-screen {
  background: #b9e5f1;
}

.start-bg {
  background: url("./assets/keyart-radiant-v2.webp") center 48% / cover no-repeat;
  filter: saturate(0.92) brightness(1.02);
  animation: opening-drift 14s ease-in-out infinite alternate;
}

.start-bg::after {
  background:
    linear-gradient(180deg, rgba(232, 249, 255, 0.08) 0 54%, rgba(32, 55, 70, 0.08) 72%, rgba(23, 44, 61, 0.82) 100%),
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.22), transparent 38%);
}

.start-team {
  display: none;
}

.sun-flare {
  background: rgba(255, 247, 197, 0.38);
  mix-blend-mode: screen;
}

.start-vignette {
  background: linear-gradient(90deg, rgba(31, 49, 65, 0.1), transparent 22% 78%, rgba(31, 49, 65, 0.08)),
    linear-gradient(0deg, rgba(25, 45, 61, 0.86) 0%, transparent 30%);
}

.edition-pill,
.sector-pill,
.matchup-pill,
.language-switch,
.dialog-languages {
  border-color: rgba(255, 255, 255, 0.78);
  color: #263f57;
  background: rgba(255, 251, 238, 0.78);
  box-shadow: 0 5px 14px rgba(47, 77, 91, 0.14);
  backdrop-filter: blur(10px);
}

.language-switch button[aria-pressed="true"],
.dialog-languages button[aria-pressed="true"] {
  color: white;
  background: #567f9b;
}

.start-copy {
  top: 9.5%;
  filter: drop-shadow(0 3px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 8px 18px rgba(38, 62, 78, 0.28));
}

.start-eyebrow {
  color: #35556f;
}

.start-copy h1 span {
  color: #fffdf5;
  -webkit-text-stroke: 1px #6a7b75;
}

.start-copy h1 strong {
  color: #f6d372;
  background: linear-gradient(180deg, #fff9cf, #efbd58 58%, #d68a50);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(78, 77, 65, 0.62);
  text-shadow: none;
}

.start-subtitle {
  color: #2c4961;
  background: rgba(255, 252, 241, 0.88);
  box-shadow: 0 3px 10px rgba(39, 65, 80, 0.14);
}

.primary-cta,
.deploy-button {
  border-color: #fff8d7;
  border-radius: 24px 8px 24px 8px;
  color: #fffdf6;
  background: linear-gradient(180deg, #ffc95d, #ed9b42 52%, #d47d43);
  box-shadow: 0 5px 0 #aa6941, 0 12px 28px rgba(94, 60, 36, 0.28);
  text-shadow: 0 2px 0 rgba(116, 69, 35, 0.34);
}

.start-fineprint {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 5px rgba(20, 42, 58, 0.72);
}

/* 基地顶部同时给出当前英雄能力与下一战情，避免玩家盲目出击。 */
.profile-copy em {
  max-width: 118px;
  overflow: hidden;
  color: #f8d787;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enemy-intel {
  position: absolute;
  z-index: 7;
  top: 7px;
  right: 9px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  width: min(49%, 190px);
  min-height: 45px;
  padding: 3px 7px 3px 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 13px 5px 13px 5px;
  color: #29475a;
  background: linear-gradient(135deg, rgba(255, 253, 241, 0.94), rgba(215, 242, 226, 0.92));
  box-shadow: 0 5px 16px rgba(32, 64, 67, 0.24);
  backdrop-filter: blur(8px);
}

.enemy-intel img {
  width: 39px;
  height: 39px;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(38, 48, 54, 0.28));
}

.enemy-intel span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.enemy-intel small,
.enemy-intel em {
  color: #6d8988;
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
}

.enemy-intel b {
  overflow: hidden;
  color: #2c4960;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-bubble {
  top: 61px;
}

/* 基地棋盘直接展示 Q 版兵种形象，圆形底只负责区分兵种阵营。 */
.unit-grid .unit-token {
  width: 78%;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--unit-accent) 54%, white), color-mix(in srgb, var(--unit-accent) 72%, #344456) 68%, #334052);
  box-shadow: 0 5px 0 rgba(38, 53, 63, 0.52), 0 9px 17px rgba(24, 47, 55, 0.32), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.board-unit-art {
  position: absolute;
  z-index: 2;
  width: 112%;
  height: 119%;
  bottom: -8%;
  left: -6%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 5px 3px rgba(37, 48, 52, 0.38));
  pointer-events: none;
  transform-origin: 50% 82%;
  animation: board-unit-breathe 2.7s ease-in-out infinite;
}

.unit-slot:nth-child(even) .board-unit-art {
  animation-delay: -1.2s;
}

.unit-grid .unit-stars,
.unit-grid .unit-level {
  z-index: 4;
}

.formation-state {
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 3px;
  padding: 2px 4px;
  border-radius: 6px 2px 6px 2px;
  color: #f8fff7;
  background: rgba(35, 77, 77, 0.84);
  font-size: 6px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.unit-slot.is-deploying {
  border-style: solid;
  border-color: rgba(194, 255, 218, 0.82);
  box-shadow: inset 0 0 12px rgba(111, 250, 177, 0.2);
}

.unit-slot.is-reserve .formation-state {
  color: #496069;
  background: rgba(238, 243, 231, 0.88);
}

.unit-slot.is-reserve .unit-token {
  opacity: 0.63;
  filter: grayscale(0.42) saturate(0.7);
  transform: scale(0.9);
}

.unit-slot.is-reserve.is-selected .unit-token,
.unit-slot.is-reserve.is-match .unit-token {
  opacity: 1;
  filter: none;
}

.unit-tier-2 .unit-token {
  box-shadow: 0 5px 0 rgba(38, 53, 63, 0.52), 0 0 15px rgba(143, 241, 225, 0.72), inset 0 0 20px rgba(255, 255, 255, 0.28);
}

.unit-tier-3 .unit-token::before,
.unit-tier-4 .unit-token::before {
  position: absolute;
  z-index: -1;
  inset: -7px;
  border: 2px solid rgba(205, 180, 255, 0.86);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 13px rgba(174, 134, 235, 0.68);
}

.unit-tier-4 .unit-token::before {
  inset: -9px;
  border: 3px double #ffe18b;
  box-shadow: 0 0 7px #fff7ba, 0 0 20px rgba(255, 183, 76, 0.88);
  animation: elite-unit-aura 2.2s ease-in-out infinite;
}

.unit-tier-4 .unit-level {
  color: #fff9de;
  background: linear-gradient(180deg, #dc8d43, #a95058);
}

.tutorial-merge-mark {
  position: absolute;
  z-index: 6;
  top: 17px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid white;
  border-radius: 50%;
  color: #3f5664;
  background: #ffe989;
  box-shadow: 0 2px 8px rgba(93, 72, 35, 0.34);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  pointer-events: none;
}

.unit-slot.is-tutorial {
  animation: tutorial-merge-pulse 1.35s ease-in-out infinite;
}

.merge-result {
  position: absolute;
  z-index: 7;
  right: 3px;
  bottom: 2px;
  left: 3px;
  padding: 3px 2px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px 2px 6px 2px;
  color: #344e5e;
  background: #ffeb8d;
  box-shadow: 0 2px 7px rgba(55, 70, 69, 0.28);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.recruit-button .mini-icon {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--unit-accent) 48%, white), var(--unit-accent));
}

.recruit-unit-art {
  width: 118%;
  height: 118%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 2px 1px rgba(39, 50, 53, 0.3));
}

/* 战场保持地图明亮，让角色和斜向分界线成为第一视觉焦点。 */
.battle-view,
.battle-view[data-theme="sky"],
.battle-view[data-theme="abyss"],
.battle-view[data-theme="tempest"],
.battle-view[data-theme="omega"],
.battle-view[data-theme="lunar"],
.battle-view[data-theme="dune"],
.battle-view[data-theme="citadel"] {
  --scene-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(229, 242, 220, 0.06));
  --scene-position: 50% 50%;
  color: var(--pastel-paper);
  background: #a9c985;
}

.battle-sky {
  inset: -1%;
  background: var(--scene-overlay), var(--battle-scene, url("./assets/map-coast.webp")) var(--scene-position) / cover no-repeat;
  filter: saturate(0.94) contrast(0.98) brightness(1.03);
}

.battle-view::before {
  z-index: 3;
  background: radial-gradient(circle at 50% 48%, transparent 48%, rgba(35, 51, 54, 0.18) 100%);
}

.battle-view::after {
  z-index: 12;
  background: rgba(25, 41, 61, 0.46);
}

.battle-scenery::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18% 82%, rgba(36, 53, 58, 0.08));
}

.battle-scenery::after {
  display: none;
}

.battle-hud {
  z-index: 16;
  top: calc(8px + env(safe-area-inset-top));
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
}

.combatant-card,
.enemy-card {
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px 5px 13px 5px;
  color: #263c54;
  background: linear-gradient(150deg, rgba(255, 252, 239, 0.94), rgba(224, 241, 230, 0.88));
  box-shadow: 0 5px 14px rgba(42, 61, 65, 0.2);
}

.enemy-card {
  background: linear-gradient(210deg, rgba(255, 248, 231, 0.95), rgba(245, 216, 207, 0.9));
}

.combatant-card span {
  color: #5f7581;
}

.versus {
  color: #fff3c2;
  text-shadow: 0 2px 0 #705c40, 0 0 8px white;
}

.health-track {
  border-color: rgba(73, 85, 76, 0.3);
  background: rgba(42, 54, 55, 0.22);
}

.matchup-pill {
  z-index: 15;
  top: calc(72px + env(safe-area-inset-top));
  color: #314c5e;
}

.battlefield {
  z-index: 5;
  top: calc(96px + env(safe-area-inset-top));
  right: 0;
  bottom: 70px;
  left: 0;
  perspective: none;
}

/* 参考俯视战棋的左下/右上对峙结构，竖屏也保留清晰动线。 */
.battle-line {
  z-index: 2;
  width: 150%;
  height: 8px;
  top: 50%;
  right: auto;
  bottom: auto;
  left: -25%;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #e8c66e 42% 62%, rgba(91, 111, 126, 0.74) 64% 100%);
  box-shadow: 0 -2px 7px rgba(255, 223, 113, 0.72), 0 3px 5px rgba(40, 61, 70, 0.32);
  transform: rotate(57deg);
  transform-origin: center;
}

.battle-line::before,
.battle-line::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.battle-line::before {
  width: 32%;
  height: 3px;
  top: -6px;
  left: 34%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ffb94f, white, #7aa9ff, transparent);
  box-shadow: 0 0 10px rgba(255, 224, 136, 0.78);
}

.battle-line::after {
  inset: -9px 0;
  background: linear-gradient(90deg, transparent 8%, rgba(255, 221, 120, 0.12), transparent 92%);
}

.battle-line i {
  display: none;
}

.formation,
.allied-formation,
.enemy-formation {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  pointer-events: none;
}

.battle-view .formation .battle-unit,
.battle-view .allied-formation .has-unit-art,
.battle-view .enemy-formation .has-enemy-art,
.battle-view .enemy-formation .has-enemy-art.is-boss {
  width: 78px;
  height: 98px;
  right: auto !important;
  bottom: auto !important;
  transform: none;
}

.battle-view .enemy-formation .has-enemy-art.is-boss {
  width: 94px;
  height: 118px;
  transform: none !important;
}

/* battle.css 的旧敌军卡片规则特异度更高，必须在 V3 层明确清空。 */
.battle-view .enemy-formation .battle-unit {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.battle-view .enemy-formation .actor-art-motion {
  background: transparent;
  box-shadow: none;
}

.battle-view .enemy-formation .actor-art {
  background: transparent;
}

.battle-view .allied-formation .battle-unit:nth-child(1) { z-index: 9; left: 8%; top: 68%; }
.battle-view .allied-formation .battle-unit:nth-child(2) { z-index: 8; left: 34%; top: 59%; }
.battle-view .allied-formation .battle-unit:nth-child(3) { z-index: 7; left: 7%; top: 46%; }
.battle-view .allied-formation .battle-unit:nth-child(4) { z-index: 6; left: 33%; top: 37%; }

.battle-view .enemy-formation .battle-unit:nth-child(1) { z-index: 9; right: 7% !important; top: 8%; }
.battle-view .enemy-formation .battle-unit:nth-child(2) { z-index: 8; right: 34% !important; top: 18%; }
.battle-view .enemy-formation .battle-unit:nth-child(3) { z-index: 7; right: 7% !important; top: 31%; }
.battle-view .enemy-formation .battle-unit:nth-child(4) { z-index: 6; right: 34% !important; top: 41%; }

.battle-view .allied-formation .battle-unit:not(.is-acting):not(.is-hit) {
  animation: chibi-unit-patrol 4.6s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.battle-view .allied-formation .battle-unit:nth-child(even):not(.is-acting):not(.is-hit) {
  animation-name: chibi-unit-patrol-reverse;
}

.battle-view .enemy-formation .battle-unit:not(.is-acting):not(.is-hit) {
  animation: chibi-unit-patrol-reverse 4.2s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.battle-view .enemy-formation .battle-unit:nth-child(even):not(.is-acting):not(.is-hit) {
  animation-name: chibi-unit-patrol;
}

.actor-art-motion,
.enemy-art-motion,
.ally-art-motion,
.is-ally.is-mariner .ally-art-motion,
.is-ally.is-skylink .ally-art-motion,
.enemy-talon .enemy-art-motion,
.enemy-neris .enemy-art-motion {
  z-index: 3;
  width: 104%;
  height: 104%;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 78%;
}

.battle-view .actor-art {
  filter: drop-shadow(0 5px 3px rgba(38, 48, 55, 0.36));
}

.battle-view .is-boss .actor-art {
  filter: drop-shadow(0 7px 5px rgba(36, 40, 51, 0.44)) drop-shadow(0 0 5px rgba(255, 224, 144, 0.46));
}

.battle-view .has-unit-art.is-art-ready .machine {
  opacity: 0;
}

.battle-view .actor-shadow,
.battle-view .has-enemy-art .actor-shadow,
.battle-view .allied-formation .has-unit-art .actor-shadow {
  width: 60%;
  height: 10px;
  left: 20%;
  bottom: 4px;
  background: radial-gradient(ellipse, rgba(42, 51, 48, 0.4), transparent 72%);
  filter: blur(2px);
  animation: chibi-shadow-pulse 1.8s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.unit-hp {
  position: absolute;
  z-index: 8;
  width: 58px;
  top: -8px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
  transform: translateX(-50%);
}

.unit-hp-track {
  display: block;
  width: 58px;
  height: 9px;
  overflow: hidden;
  border: 2px solid #303432;
  border-radius: 5px 2px 5px 2px;
  background: #594b27;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.38) inset, 0 2px 3px rgba(35, 42, 41, 0.34);
}

.unit-hp-track b {
  display: block;
  width: var(--unit-hp, 100%);
  height: 100%;
  background: linear-gradient(180deg, #ffe178 0 38%, #e5a431 44% 100%);
  box-shadow: 0 0 4px rgba(255, 225, 112, 0.82) inset;
  transition: width 0.18s linear;
}

.unit-count {
  color: #fffdf1;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 #252f35, 1px 0 0 #252f35, -1px 0 0 #252f35, 0 -1px 0 #252f35;
}

.battle-view .unit-level,
.battle-view .has-enemy-art .unit-level,
.battle-view .allied-formation .has-unit-art .unit-level {
  z-index: 9;
  top: -11px;
  right: auto;
  bottom: auto;
  left: -2px;
  padding: 1px 3px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 4px;
  color: white;
  background: rgba(45, 55, 61, 0.82);
  font-size: 6px;
}

.battle-view .unit-status {
  width: 72%;
  height: 72%;
  top: 14%;
  left: 14%;
}

/* 主角在自动战斗中作为指挥官头像，完整立绘保留给简报与技能 Cut-in。 */
.battle-hero {
  z-index: 11;
  width: 68px;
  height: 76px;
  bottom: 5px;
  left: 8px;
  overflow: visible;
  border: 2px solid rgba(255, 251, 224, 0.96);
  border-radius: 18px 6px 18px 6px;
  background: linear-gradient(150deg, rgba(255, 252, 238, 0.96), rgba(171, 213, 210, 0.92));
  box-shadow: 0 5px 0 rgba(71, 92, 96, 0.54), 0 8px 14px rgba(34, 49, 57, 0.28);
  filter: none;
  transform-origin: 50% 100%;
}

.battle-hero:not(.is-commanding):not(.is-skill-arming):not(.is-skill-striking) {
  animation: command-card-breathe 2.6s ease-in-out infinite;
}

.battle-hero::before {
  width: 76px;
  height: 76px;
  top: -2px;
  left: -6px;
  border: 2px solid color-mix(in srgb, var(--hero-accent) 64%, white);
  border-radius: 50%;
  opacity: 0.48;
  background: none;
}

.battle-hero::after {
  display: none;
}

.battle-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: 15px 4px 15px 4px;
  transform-origin: 50% 80%;
}

.battle-hero-tag {
  width: 92px;
  top: auto;
  bottom: 3px;
  left: 57px;
  padding: 4px 6px 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-left: 3px solid var(--hero-accent);
  border-radius: 0 8px 8px 0;
  color: #263f57;
  background: rgba(255, 252, 239, 0.9);
  box-shadow: 0 3px 8px rgba(33, 50, 60, 0.16);
}

.battle-hero-tag small { color: #657b84; font-size: 5px; }
.battle-hero-tag b { font-size: 8px; }

.overdrive-button {
  border-color: #fff3c4;
  color: #fffdf4;
  background: linear-gradient(145deg, #5a7996, #32546e);
  box-shadow: 0 4px 0 #20384c, 0 8px 16px rgba(30, 49, 61, 0.3);
}

.overdrive-button.is-ready {
  background: linear-gradient(145deg, #ffd66b, #e69745);
  box-shadow: 0 4px 0 #aa6540, 0 0 18px rgba(255, 211, 92, 0.68);
}

.skill-portrait img {
  mix-blend-mode: normal;
}

/* Q 版单位只做短促位移与命中特效，保持俯视战场空间关系。 */
.allied-formation .has-unit-art:not(.is-acting):not(.is-hit) .ally-art-motion,
.enemy-formation:not(.is-entering):not(.is-defeated) .has-enemy-art:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: pastel-unit-idle 1.8s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.allied-formation .has-unit-art.is-acting .ally-art-motion {
  animation: pastel-ally-lunge 0.48s cubic-bezier(0.18, 0.78, 0.24, 1) !important;
}

.enemy-formation .has-enemy-art.is-acting .enemy-art-motion {
  animation: pastel-enemy-lunge 0.48s cubic-bezier(0.18, 0.78, 0.24, 1) !important;
}

.allied-formation .has-unit-art.is-hit .actor-art-motion,
.enemy-formation .has-enemy-art.is-hit .actor-art-motion {
  animation: pastel-unit-hit 0.18s steps(2, end) !important;
}

.enemy-formation.is-entering::before {
  display: none;
}

.enemy-formation.is-entering .enemy-art-motion {
  animation: pastel-enemy-enter 0.62s cubic-bezier(0.18, 0.78, 0.24, 1) both;
}

.enemy-formation.is-defeated .enemy-art-motion {
  animation: pastel-enemy-defeat 0.44s ease-in forwards !important;
}

.battle-projectile {
  left: 31%;
  bottom: calc(29% + var(--source-offset));
  animation-name: pastel-projectile-ally;
}

.battle-projectile.is-enemy {
  top: calc(23% + var(--source-offset));
  right: 27%;
  animation-name: pastel-projectile-enemy;
}

.impact-burst {
  top: calc(19% + var(--target-offset));
  right: calc(8% + var(--target-shift));
}

.impact-burst.is-player {
  bottom: calc(20% + var(--target-offset));
  left: calc(11% + var(--target-shift));
}

.damage-number {
  top: calc(23% + var(--target-offset));
  right: calc(13% + var(--target-shift));
}

.damage-number.is-player {
  bottom: calc(27% + var(--target-offset));
  left: calc(16% + var(--target-shift));
}

.enemy-muzzle {
  top: calc(21% + var(--source-offset));
  right: 24%;
}

/* 简报延续同一套纸张、金色与水彩地图语言。 */
.chapter-briefing {
  color: #263f57;
  background: #b7d9c0;
}

.chapter-briefing > img {
  animation: chapter-enter 0.5s cubic-bezier(0.17, 0.83, 0.25, 1),
    chapter-hero-breathe 3.4s 0.52s ease-in-out infinite;
}

.profile-avatar img,
.guide-portrait img,
.hero-card.is-selected > img {
  transform-origin: 50% 82%;
  animation: portrait-breathe 3s ease-in-out infinite;
}

.chapter-backdrop {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 46%, rgba(35, 53, 62, 0.78) 100%),
    var(--chapter-scene, url("./assets/map-coast.webp")) var(--chapter-position) / cover no-repeat;
  filter: saturate(0.92) brightness(1.03);
}

.chapter-number {
  color: #304b60;
  background: rgba(255, 251, 237, 0.84);
}

.chapter-card {
  border-color: rgba(255, 255, 255, 0.88);
  color: #29455a;
  background: linear-gradient(145deg, rgba(255, 252, 241, 0.97), rgba(225, 240, 226, 0.95));
  box-shadow: 0 18px 44px rgba(39, 60, 67, 0.34);
}

.chapter-card > small,
.chapter-card > p,
.chapter-objective small {
  color: #64868b;
}

.chapter-card h2 {
  color: #cf8a4f;
}

.chapter-card h3,
.chapter-objective b {
  color: #2b4558;
}

.chapter-objective {
  border-color: rgba(97, 139, 139, 0.25);
  background: rgba(186, 222, 211, 0.3);
}

.chapter-story {
  border-color: rgba(115, 153, 153, 0.25);
  background: rgba(255, 255, 255, 0.46);
}

.story-head,
.chapter-story > b {
  color: #b97858;
}

.chapter-story > p {
  color: #304d5d;
}

.story-next {
  border-color: rgba(255, 255, 255, 0.84);
  color: #fffdf5;
  background: linear-gradient(180deg, #7bcbb9, #4fa999);
  box-shadow: 0 3px 0 #397e75;
}

@keyframes pastel-unit-idle {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg) scale(1); }
  46% { transform: translate(-50%, -50%) translateY(-4px) rotate(0.8deg) scale(1.035, 0.98); }
  72% { transform: translate(-50%, -50%) translateY(-1px) rotate(-0.2deg) scale(0.99, 1.02); }
}

@keyframes board-unit-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.035, 0.98); }
}

@keyframes tutorial-merge-pulse {
  0%, 100% { box-shadow: inset 0 0 13px rgba(255, 240, 139, 0.3), 0 0 0 0 rgba(255, 232, 111, 0.5); }
  50% { box-shadow: inset 0 0 17px rgba(255, 246, 173, 0.72), 0 0 0 4px rgba(255, 232, 111, 0.14); }
}

@keyframes elite-unit-aura {
  0%, 100% { opacity: 0.72; transform: rotate(-5deg) scale(0.96); }
  50% { opacity: 1; transform: rotate(5deg) scale(1.05); }
}

@keyframes chibi-unit-patrol {
  0%, 100% { transform: translate(0, 0); }
  24% { transform: translate(5px, -4px); }
  52% { transform: translate(2px, 2px); }
  76% { transform: translate(-4px, 3px); }
}

@keyframes chibi-unit-patrol-reverse {
  0%, 100% { transform: translate(0, 0); }
  24% { transform: translate(-5px, 4px); }
  52% { transform: translate(-2px, -2px); }
  76% { transform: translate(4px, -3px); }
}

@keyframes chibi-shadow-pulse {
  0%, 100% { opacity: 0.72; transform: scaleX(1); }
  50% { opacity: 0.46; transform: scaleX(0.82); }
}

@keyframes command-card-breathe {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-4px) rotate(0.5deg); }
}

@keyframes chapter-hero-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.018); }
}

@keyframes portrait-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025); }
}

@keyframes pastel-ally-lunge {
  0%, 100% { transform: translate(-50%, -50%); }
  46% { transform: translate(calc(-50% + 22px), calc(-50% - 22px)) scale(1.07); filter: brightness(1.16); }
}

@keyframes pastel-enemy-lunge {
  0%, 100% { transform: translate(-50%, -50%); }
  46% { transform: translate(calc(-50% - 22px), calc(-50% + 22px)) scale(1.07); filter: brightness(1.16); }
}

@keyframes pastel-unit-hit {
  0%, 100% { transform: translate(-50%, -50%); filter: none; }
  35% { transform: translate(calc(-50% - 6px), calc(-50% + 2px)); filter: brightness(2) saturate(0.3); }
  70% { transform: translate(calc(-50% + 4px), calc(-50% - 2px)); filter: sepia(1) saturate(2); }
}

@keyframes pastel-enemy-enter {
  from { opacity: 0; transform: translate(calc(-50% + 45px), calc(-50% - 45px)) scale(0.72); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes pastel-enemy-defeat {
  to { opacity: 0; transform: translate(-50%, -30%) rotate(8deg) scale(0.72); filter: grayscale(0.7); }
}

@keyframes pastel-projectile-ally {
  from { opacity: 0.4; transform: translate(0, 0) rotate(-34deg) scale(0.7); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translate(150px, -220px) rotate(-34deg) scale(1.2); }
}

@keyframes pastel-projectile-enemy {
  from { opacity: 0.4; transform: translate(0, 0) rotate(-34deg) scale(0.7); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translate(-150px, 220px) rotate(-34deg) scale(1.2); }
}

@media (max-width: 430px) {
  .start-copy { top: 10.5%; }
  .battle-view .formation .battle-unit,
  .battle-view .allied-formation .has-unit-art,
  .battle-view .enemy-formation .has-enemy-art { width: 72px; height: 91px; }
  .battle-view .enemy-formation .has-enemy-art.is-boss { width: 88px; height: 111px; }
}

@media (max-height: 690px) {
  .battle-view .allied-formation .battle-unit:nth-child(1) { top: 65%; }
  .battle-view .enemy-formation .battle-unit:nth-child(4) { top: 37%; }
  .start-copy { top: 8.5%; }
  .unit-grid { right: 28px; bottom: 29px; left: 28px; gap: 4px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .start-bg,
  .actor-art-motion,
  .battle-line::before,
  .battle-view .battle-unit,
  .battle-view .actor-shadow,
  .battle-hero,
  .chapter-briefing > img,
  .profile-avatar img,
  .guide-portrait img,
  .hero-card > img {
    animation: none !important;
  }

  .board-unit-art {
    animation: none !important;
  }

  .unit-slot.is-tutorial,
  .unit-tier-4 .unit-token::before {
    animation: none !important;
  }
}