:root {
  --bg: #111312;
  --panel: #191d1b;
  --panel-2: #202522;
  --line: #3b423d;
  --text: #e7ece7;
  --muted: #9aa59d;
  --blue: #2e78a6;
  --blue-dark: #1f4255;
  --red: #a8473f;
  --red-dark: #56302d;
  --white-zone: #d8d8d0;
  --amber: #d5a13a;
  --green: #6cab70;
  --danger: #d85b50;
  --shadow: rgba(0, 0, 0, 0.35);
  --cyan: #27dff3;
  --cyan-soft: rgba(39, 223, 243, 0.34);
  --red-glow: rgba(255, 83, 78, 0.42);
  --ui-panel-frame: none;
  --ui-popup-frame: none;
  --ui-window-surface: linear-gradient(180deg, #19292f, #101b21);
  /* Legacy consumers share the CSS surfaces; button PNGs are no longer used. */
  --ui-button-normal: linear-gradient(180deg, #19292f, #101b21);
  --ui-button-hover: linear-gradient(180deg, #233c43, #172b32);
  --ui-button-pressed: linear-gradient(180deg, #0d1c22, #14282f);
  --ui-button-selected: linear-gradient(180deg, #20444b, #142e35);
  --ui-slot-frame: none;
  --ui-slot-selected: none;
  --ui-slot-selector: none;
  --ui-gauge-frame: none;
  --ui-gauge-fill-cyan: linear-gradient(90deg, #219cab, #72dae0);
  --ui-gauge-fill-amber: linear-gradient(90deg, #aa7b36, #e0b568);
  --ui-condition-cyan: linear-gradient(180deg, #20444b, #142e35);
  --ui-condition-amber: linear-gradient(180deg, #443a28, #2b271e);
  --ui-divider-line: linear-gradient(180deg, transparent 45%, #526c76 45% 55%, transparent 55%);
  --ui-icon-mail: none;
  --ui-icon-alert: none;
  --ui-icon-settings: none;
  --ui-icon-credit: none;
  --ui-icon-crystal: none;
  --ui-icon-home: none;
  --ui-icon-team: none;
  --ui-icon-equipment: none;
  --ui-icon-operation: none;
  --ui-icon-ai: none;
  --ui-icon-clear: none;
  --ui-icon-close: none;
  --ui-icon-chevron-left: none;
  --ui-icon-chevron-right: none;
  --ui-icon-notice: none;
  --ui-action-guard: none;
  --ui-action-detect: none;
  color-scheme: dark;
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    url("../assets/images/backgrounds/subway-platform.svg") center / contain no-repeat fixed,
    #000;
  color: var(--text);
  touch-action: manipulation;
}

body[data-route="home"] {
  background:
    url("../assets/images/backgrounds/pop-v1/home-nishi-settlement-anime-v6.webp") center / contain no-repeat fixed,
    #000;
}

/* Preparation/selection backgrounds share the loading-screen rule below. */

/* Background color treatment stays behind characters and UI. */
body:is([data-route="home"], [data-route="stages"], [data-route="explore"],
  [data-route="formation"], [data-route="hangar"], [data-route="ai"]) .app-shell {
  background: transparent;
}

body[data-route="start"] {
  background: #000;
}

body[data-route="scenario"],
body[data-route="battle"] {
  background: #000;
}

body[data-route="start"] .app-shell {
  padding: 0;
  background: #000;
}

/* All devices use the desktop 1280x720 canvas. Legacy device-specific
   reflow blocks remain dormant so there is only one layout definition. */
@media not all {
  body::after {
    content: "端末を横向きにしてください";
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999;
    width: min(320px, calc(100vw - 32px));
    padding: 20px;
    color: #f5f7f5;
    background:
      linear-gradient(180deg, rgba(39, 223, 243, 0.12), transparent 40%),
      rgba(4, 6, 6, 0.96);
    border: 1px solid rgba(39, 223, 243, 0.54);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68), inset 0 0 28px rgba(255, 255, 255, 0.04);
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 18px;
    font-weight: 800;
  }

  .app-shell {
    opacity: 0.18;
    pointer-events: none;
    filter: blur(2px);
  }
}

button,
select,
input {
  font: inherit;
}

button {
  color: var(--text);
  background: rgba(12, 14, 13, 0.82);
  border: 1px solid rgba(202, 210, 204, 0.38);
  border-radius: 4px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, filter 160ms ease;
  user-select: none;
}

button:hover,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  border-color: var(--amber);
  outline: 1px solid var(--amber);
}

button:hover {
  filter: brightness(1.08);
}

button:disabled {
  color: #68716b;
  cursor: not-allowed;
}

select,
input {
  width: 100%;
  min-height: 38px;
  color: var(--text);
  background: #101412;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
}

.app-shell {
  position: fixed;
  left: calc(50% + var(--app-center-x, 0px));
  top: calc(50% + var(--app-center-y, 0px));
  width: 1280px;
  height: 720px;
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: 0;
  padding: 12px 0 12px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--app-scale, 1));
  transform-origin: center center;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.045) 0 1px, transparent 1px 14.285%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18%),
    rgba(2, 4, 4, 0.22);
}

body[data-route="battle"] .app-shell {
  padding: 0;
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding: 10px 16px;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.commander-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.header-settings-button {
  min-width: 52px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
}

.level-ring {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #f5f7f5;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-left-color: var(--cyan);
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.22);
}

.brand {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand span,
.commander,
.small-note {
  color: var(--muted);
  font-size: 19px;
  min-width: 0;
}

.top-tools,
.resource-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tool-icon,
.resource-chip {
  min-width: 44px;
  min-height: 36px;
  display: grid;
  place-items: center;
  color: rgba(245, 247, 245, 0.92);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(226, 234, 228, 0.28);
  font-weight: 700;
}

.top-back-button {
  flex: 0 0 auto;
  min-width: 70px;
  min-height: 42px;
  justify-content: center;
  padding: 0 12px;
  color: var(--cyan);
  border-color: rgba(39, 223, 243, 0.42);
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.16), transparent 70%),
    rgba(0, 0, 0, 0.34);
  font-size: 20px;
  font-weight: 900;
}

.command-back-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

.command-back-button {
  min-width: 72px;
  min-height: 34px;
  justify-content: center;
  padding: 0 14px;
  color: var(--cyan);
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.18), transparent 72%),
    rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(39, 223, 243, 0.58);
  font-size: 19px;
  font-weight: 900;
  pointer-events: auto;
  box-shadow: inset 0 0 14px rgba(39, 223, 243, 0.08);
}

.command-back-button:active {
  transform: translateY(1px);
}

.qr-tool {
  justify-content: center;
  padding: 0 10px;
  color: var(--cyan);
  text-align: center;
  text-shadow: 0 0 10px var(--cyan-soft);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.mobile-qr-modal {
  width: min(420px, calc(100% - 36px));
  display: grid;
  gap: 14px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.08), transparent 34%),
    rgba(5, 7, 7, 0.94);
  border: 1px solid rgba(226, 234, 228, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 30px rgba(255, 255, 255, 0.035);
}

.retreat-confirm-modal {
  width: min(360px, calc(100% - 36px));
  display: grid;
  gap: 14px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.08), transparent 34%),
    rgba(5, 7, 7, 0.94);
  border: 1px solid rgba(226, 234, 228, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 30px rgba(255, 255, 255, 0.035);
  text-align: center;
}

.retreat-confirm-title {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.retreat-confirm-text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.retreat-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.retreat-confirm-actions button {
  text-align: center;
  font-weight: 800;
}

.retreat-confirm-yes {
  color: var(--danger, #ff5d5d);
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.modal-head strong,
.modal-head span {
  display: block;
}

.modal-head strong {
  color: #fff;
  font-size: 20px;
}

.modal-head span,
.qr-note {
  color: var(--muted);
  font-size: 18px;
}

.modal-close {
  min-width: 40px;
  min-height: 36px;
  padding: 0;
  text-align: center;
}

.qr-box {
  display: grid;
  place-items: center;
  padding: 14px;
  background: #f7f8f4;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.qr-box img {
  width: min(260px, 100%);
  height: auto;
  display: block;
}

.qr-url-field {
  display: grid;
  gap: 6px;
}

.qr-url-field span {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 800;
}

.qr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qr-actions button {
  text-align: center;
}

.qr-note {
  margin: 0;
  line-height: 1.5;
}

.portrait-settings-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  background: transparent;
}

.portrait-settings-modal {
  width: min(420px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.08), transparent 34%),
    rgba(5, 7, 7, 0.92);
  border: 1px solid rgba(226, 234, 230, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 30px rgba(255, 255, 255, 0.035);
}

.portrait-select-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portrait-select-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 6px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(226, 234, 228, 0.28);
  font-size: 17px;
}

.portrait-select-item.selected {
  color: #fff;
  border-color: rgba(246, 213, 121, 0.7);
  box-shadow: 0 0 0 2px rgba(246, 213, 121, 0.35);
}

.portrait-select-item.locked {
  position: relative;
  color: rgba(226, 234, 228, 0.42);
  border-color: rgba(226, 234, 228, 0.12);
  background: rgba(0, 0, 0, 0.52);
  cursor: not-allowed;
}

.portrait-select-item.locked .portrait-select-thumb {
  opacity: 0.34;
  filter: grayscale(1) brightness(0.56);
}

.portrait-select-lock {
  margin-top: -4px;
  color: rgba(255, 126, 120, 0.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.portrait-select-thumb {
  margin: 0 auto;
}

.resource-chip {
  min-width: 118px;
  padding: 0 12px;
  color: #f2f4f2;
  justify-content: center;
}

.screen {
  margin-top: 16px;
  padding: 16px;
  max-height: calc(100% - 110px);
  overflow: auto;
}

.screen,
.stage-screen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
    rgba(18, 21, 19, 0.9);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 18px 42px var(--shadow);
}

.command-screen {
  height: 100%;
  max-height: 100%;
  margin-top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.route-home {
  padding: 0;
  max-height: calc(100% - 110px);
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.route-start {
  width: 100%;
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.start-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Fill the width and favor the upper artwork, cropping more at the bottom. */
  background:
    url("../assets/images/backgrounds/start-screen-key-visual-v2.webp?v=710abb631772") center 20% / 100% auto no-repeat,
    #000;
}

.start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 5, 7, 0.38) 0%, transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.46));
  pointer-events: none;
}

/* スタート画面登録.cmd で登録した絵（js/start-screen.js）。位置合わせは標準の絵と同じ。 */
.start-screen.has-custom-start {
  background-image: var(--start-screen-image);
}

/* 登録した動画は画面を覆い、静止画（poster）から切り替わる。暗いグラデーションは動画の上。 */
.start-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  pointer-events: none;
}

.start-screen.has-start-video::before {
  z-index: 1;
}

/* タイトルロゴ「地下深淵（メトロアビス）」。絵の邪魔をしないよう、左上の隅にまとめる。
   ルビと副題は漢字の中央にそろえる。字間（letter-spacing）は最後の字の後ろにも付くので、
   その分を左の余白で打ち消して中央を合わせる。 */
.start-brand {
  position: absolute;
  left: 26px;
  top: 18px;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.92);
  pointer-events: none;
}

.start-brand h1 {
  margin: 0 -0.08em 0 0;
  color: #f7ffff;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.96),
    0 0 24px rgba(39, 223, 243, 0.34);
}

.start-brand rt {
  padding-left: 0.4em;
  color: #72f5ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4em;
  text-align: center;
}

/* スタート画面登録.cmd で「右上」を選んだとき。暗いグラデーションも右上に移す。 */
.start-screen.logo-right .start-brand {
  left: auto;
  right: 26px;
}

.start-screen.logo-right::before {
  background:
    linear-gradient(225deg, rgba(0, 5, 7, 0.38) 0%, transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.46));
}

.start-brand p {
  margin: 0;
  padding-left: 0.5em;
  color: rgba(226, 250, 250, 0.84);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5em;
}

.start-launch-button {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px 28px 38px;
  color: #f5ffff;
  background: none;
  border: 0;
  border-image: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  backdrop-filter: none;
  transform: none;
  animation: none;
}

/* 画面全体を開始操作に使い、共通ボタンスキンや枠は表示しない。 */
.start-launch-button:hover,
.start-launch-button:focus-visible,
.start-launch-button:active {
  background: none;
  border: 0;
  border-image: none;
  box-shadow: none;
  outline: 0;
  transform: none;
  filter: none;
}

.start-launch-button strong {
  font-size: 26px;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.94), 0 0 18px rgba(39, 223, 243, 0.5);
}

.start-launch-button small {
  color: rgba(218, 241, 241, 0.82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.start-launch-button:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 開始後の読み込み中は、スタート画面の上に普段のロード画面と同じ文字とゲージ（画面の端から端まで）を出す。 */
.start-loading-gauge {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #f4ffff;
  pointer-events: none;
}

/* 絵を残したまま、下の文字が読めるように下側だけ暗くする。 */
.start-loading-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 3, 5, 0.8) 100%);
}

.battle-screen {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-tunnel-anime-v4.webp");
  --battle-background-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.14) 34%, rgba(0, 0, 0, 0.62) 78%, rgba(0, 0, 0, 0.92));
  --battle-background-base: rgba(7, 8, 8, 0.98);
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 0;
  background:
    var(--battle-background-overlay),
    var(--battle-background-image) center / contain no-repeat,
    #000;
  border-color: rgba(230, 236, 230, 0.22);
  overflow: hidden;
}

.battle-screen.battle-assets-pending[data-battle-background] {
  --battle-background-image: none;
}

.battle-asset-warning {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 95;
  max-width: min(520px, calc(100% - 20px));
  padding: 7px 10px;
  color: #ffe7a8;
  background: rgba(20, 12, 2, 0.92);
  border: 1px solid rgba(255, 188, 72, 0.72);
  font-size: 12px;
}

.battle-asset-warning summary {
  cursor: pointer;
  font-weight: 800;
}

.battle-asset-warning ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

.battle-screen[data-battle-background="abandoned-platform"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-platform-anime-v2.webp");
}

.battle-screen[data-battle-background="sunlit-platform"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-platform-sunlight-anime-v1.webp");
}

.battle-screen[data-battle-background="blast-door"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-processing-anime-v2.webp");
}

.battle-screen[data-battle-background="connecting-passage"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-connecting-passage-anime-v2.webp");
}

.battle-screen[data-battle-background="shopping-passage"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-shopping-passage-anime-v2.webp");
}

.battle-screen[data-battle-background="maintenance-corridor"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-maintenance-corridor-anime-v2.webp");
}

.battle-screen[data-battle-background="ventilation-sunshaft"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-ventilation-sunshaft-anime-v6.webp");
}

.battle-screen[data-battle-background="company-office"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/home-company-office-anime-v3.webp");
}

.battle-screen[data-battle-background="new-residential-block"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/scene-new-residential-block-anime-v2.webp");
}

.battle-screen[data-battle-background="church-dining"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/scene-church-dining-anime-v1.webp");
}

.battle-screen[data-battle-background="armored-train-breach"] {
  --battle-background-image: url("../assets/images/backgrounds/pop-v1/battle-armored-train-breach-anime-v6.webp");
}

.scenario-screen {
  position: relative;
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.scenario-screen > .battle-stage {
  pointer-events: none;
  isolation: isolate;
  z-index: 0;
}

.scenario-screen > .battle-stage * {
  animation-play-state: paused !important;
}

/* Keep battlefield placement unchanged while dialogue hides combat controls. */
.scenario-screen :is(
  .battle-hud,
  .battle-info,
  .unit-overhead,
  .status-badges,
  .jagdpanther-ammo-icons,
  .unit-action-chip
) {
  visibility: hidden;
}

.scenario-stage {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 45%, rgba(0, 0, 0, 0.3));
}

.scenario-standee-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.scenario-standee {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  /* Scale against the fixed 16:9 game canvas, not the device viewport. */
  height: min(85%, 760px);
  transition: opacity 160ms ease;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
  background-repeat: no-repeat;
  background-position: var(--character-position);
  background-size: auto var(--scenario-standee-scale, 100%);
  background-color: transparent;
}

/* Story scenes always show the unarmed art (see renderScenario() in js/app.js). */
.scenario-standee.standee-unarmed {
  background-image: var(--standee-off-image);
  --scenario-standee-scale: var(--scenario-standee-off-scale, 100%);
}

/* Non-playable speakers: the image is set inline from GameData.storySpeakers. */
.scenario-standee.scenario-standee-npc {
  /* Scale the element so the head is not clipped by its background box.
     --npc-zoom / --scenario-story-drop come from GameData.storySpeakers. */
  --standee-zoom: calc(1.2705 * var(--npc-zoom, 1));
  bottom: -14%;
  background-position: center bottom;
  background-size: auto 100%;
}

/* Everyone on stage but the speaker fades back (2026-10-20: stronger than the
   old 0.72 so the speaker stands out among up to four standees). */
.scenario-standee.not-talking {
  opacity: 0.42;
}

.scenario-skip-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  min-width: 74px;
  min-height: 40px;
  padding: 0 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.scenario-textbox {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  min-height: 120px;
  padding: 16px 22px 18px;
  display: grid;
  gap: 6px;
  background: rgba(4, 6, 6, 0.88);
  border: 1px solid rgba(226, 234, 228, 0.28);
  border-radius: 6px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.scenario-speaker-name {
  color: var(--cyan);
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 10px var(--cyan-soft);
}

.scenario-text {
  color: #f5f7f5;
  font-size: 20px;
  line-height: 1.6;
  white-space: pre-line;
  padding-right: 60px;
}

.scenario-text.narration {
  color: var(--muted);
  font-style: italic;
}

.scenario-next-indicator {
  position: absolute;
  right: 20px;
  bottom: 14px;
  color: var(--cyan);
  font-size: 20px;
  animation: scenario-next-bounce 1.2s ease-in-out infinite;
}

@keyframes scenario-next-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.home-grid {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 18px;
}

.visual-home {
  position: relative;
  grid-template-columns: 1fr;
  align-items: stretch;
  height: 100%;
  padding: 18px;
  overflow: hidden;
}

.visual-home::before {
  content: none;
}

.home-operator {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  /* 高さ基準の立ち絵が横に伸ばした手まで描けるよう、表示枠は画面幅を取る。
     細い縦長の枠では、画像自体が欠けていなくても background の左右が切れてしまう。 */
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(9, 11, 10, 0.1), rgba(9, 11, 10, 0.68) 84%);
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.56));
}

.operator-caption {
  position: absolute;
  left: 22px;
  bottom: 28px;
  padding: 8px 12px;
  color: var(--cyan);
  background: rgba(3, 5, 5, 0.68);
  border: 1px solid rgba(39, 223, 243, 0.48);
  border-radius: 3px;
  font-size: 16px;
  text-shadow: 0 0 12px var(--cyan-soft);
}

.home-command-panel {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: center;
  min-height: clamp(250px, 43vh, 430px);
  margin-left: 720px;
  z-index: 1;
  background: none;
  border: 0;
  box-shadow: none;
  transform: translateY(-80px);
}

.home-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.big-action {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(214, 217, 212, 0.72)),
    rgba(230, 230, 224, 0.82);
  color: #111413;
  border-color: rgba(255, 255, 255, 0.32);
  border-left: 5px solid #d14d49;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  white-space: normal;
}

.big-action.primary {
  grid-column: 1 / -1;
  min-height: 124px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(226, 232, 228, 0.78)),
    rgba(230, 230, 224, 0.88);
  border-left-color: var(--cyan);
  box-shadow: 0 0 26px rgba(39, 223, 243, 0.13), 0 18px 38px rgba(0, 0, 0, 0.32);
}

body[data-route="home"] .top-tools .tool-icon:not(.qr-tool),
body[data-route="home"] .resource-cluster {
  display: none;
}

body[data-route="home"] .home-command-panel .squad-dock {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  padding: 8px;
}

body[data-route="home"] .home-command-panel .dock-head {
  margin-bottom: 6px;
}

body[data-route="home"] .home-command-panel .dock-head strong {
  font-size: 16px;
}

body[data-route="home"] .home-command-panel .dock-unit {
  min-height: 78px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 7px;
}

body[data-route="home"] .home-command-panel .dock-portrait {
  min-height: 54px;
  margin: 0;
}

.big-action strong {
  font-size: 22px;
  line-height: 1.15;
}

.big-action span {
  color: rgba(17, 20, 19, 0.64);
  font-size: 19px;
}

.home-ops {
  position: absolute;
  left: 16px;
  top: 84px;
  width: 154px;
  display: grid;
  gap: 10px;
  z-index: 2;
}

.ops-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  color: #f3f5f3;
  background: rgba(7, 8, 8, 0.62);
  border: 1px solid rgba(226, 234, 228, 0.28);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.035);
}

.ops-icon {
  color: rgba(245, 247, 245, 0.9);
  font-size: 22px;
}

.ops-label {
  display: grid;
  min-width: 0;
}

.ops-label strong {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-label small {
  color: rgba(245, 247, 245, 0.54);
  font-size: 18px;
}

.ops-alert {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #c74743;
  border-radius: 50%;
  font-weight: 700;
}

.squad-dock {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100% - 36px));
  padding: 10px 12px 12px;
  background: rgba(4, 5, 5, 0.72);
  border: 1px solid rgba(226, 234, 228, 0.3);
  z-index: 2;
  backdrop-filter: blur(4px);
}

.dock-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}

.dock-head strong {
  color: #fff;
  font-size: 20px;
}

.dock-head span {
  color: var(--muted);
  font-size: 18px;
}

.dock-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dock-unit {
  min-height: 118px;
  display: grid;
  align-content: end;
  padding: 8px;
  color: #f5f7f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(226, 234, 228, 0.26);
  overflow: hidden;
  min-width: 0;
}

.dock-unit.selected {
  border-color: rgba(39, 223, 243, 0.72);
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.14), transparent 68%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(39, 223, 243, 0.12), 0 0 18px rgba(39, 223, 243, 0.14);
}

.dock-portrait {
  min-height: 68px;
  margin: -8px -8px 6px;
  background-image: linear-gradient(180deg, transparent 44%, rgba(2, 5, 6, 0.82));
  background-repeat: no-repeat;
}

.dock-unit span,
.dock-unit small {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-unit small {
  color: var(--muted);
  font-size: 18px;
}

.bottom-dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 20;
  width: calc(100% - 24px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(5, 6, 6, 0.86);
  border: 1px solid rgba(226, 234, 228, 0.28);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.035);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.bottom-dock-item {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  color: rgba(245, 247, 245, 0.72);
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(226, 234, 228, 0.16);
  min-width: 0;
}

.bottom-dock-item:last-child {
  border-right: 0;
}

.bottom-dock-item.active {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.24), transparent),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 3px 0 var(--cyan), 0 0 22px rgba(39, 223, 243, 0.14);
}

.bottom-icon {
  display: grid;
  place-items: center;
  min-height: 42px;
  color: inherit;
  font-size: 26px;
}

.bottom-label {
  display: grid;
  min-width: 0;
  text-align: left;
}

.bottom-label strong {
  font-size: 17px;
  line-height: 1.2;
}

.bottom-label small {
  color: rgba(245, 247, 245, 0.48);
  font-size: 18px;
}

.nav-row,
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.nav-row button,
.toolbar button {
  min-width: 92px;
  text-align: center;
}

.active-nav,
.selected {
  color: #101414;
  background: linear-gradient(90deg, rgba(39, 223, 243, 0.95), rgba(193, 241, 245, 0.82));
  border-color: rgba(39, 223, 243, 0.92);
  box-shadow: 0 0 18px var(--cyan-soft);
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  min-width: 0;
}

.section-title h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.grid {
  display: grid;
  gap: 12px;
}

.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%),
    rgba(12, 14, 13, 0.84);
  border: 1px solid rgba(226, 234, 228, 0.24);
  border-radius: 0;
  padding: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.025), 0 12px 26px rgba(0, 0, 0, 0.24);
}

.explore-placeholder {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 520px;
  padding: 28px;
}

.explore-placeholder strong {
  color: var(--cyan);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
}

.explore-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.explore-placeholder .big-action {
  min-height: auto;
  padding: 12px 22px;
}

.card.selected {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(213, 161, 58, 0.35);
}

.card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.formation-portrait {
  min-height: 186px;
  margin: -12px -12px 12px;
  border-bottom: 1px solid rgba(226, 234, 228, 0.26);
  background-image: linear-gradient(180deg, transparent 58%, rgba(11, 13, 12, 0.88));
  background-repeat: no-repeat;
}

.meta {
  color: var(--muted);
  font-size: 19px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.ui-tag {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: rgba(245, 247, 245, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(226, 234, 228, 0.24);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.tag-cyan {
  color: var(--cyan);
  border-color: rgba(39, 223, 243, 0.45);
  background: rgba(39, 223, 243, 0.1);
}

.tag-danger {
  color: #ff7c76;
  border-color: rgba(255, 83, 78, 0.45);
  background: rgba(255, 83, 78, 0.1);
}

.tag-alert {
  color: #f5d071;
  border-color: rgba(213, 161, 58, 0.5);
  background: rgba(213, 161, 58, 0.12);
}

.tag-clear {
  color: #b8f0c0;
  border-color: rgba(108, 171, 112, 0.5);
  background: rgba(108, 171, 112, 0.13);
}

.tag-role {
  color: #f3f5f3;
  border-color: rgba(226, 234, 228, 0.36);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.stat {
  display: grid;
  grid-template-columns: minmax(44px, 0.75fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #111512;
  border: 1px solid #2a302c;
  border-radius: 4px;
  font-size: 19px;
}

.stat strong {
  color: #f3f5f3;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stat-bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.stat-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), rgba(155, 246, 255, 0.7));
  box-shadow: 0 0 10px var(--cyan-soft);
}

.stat-bar {
  display: none;
}

.equip-line strong {
  color: #f3f5f3;
  font-weight: 600;
  text-align: right;
}

.equipment-icon {
  display: grid;
  place-items: center;
  min-height: 54px;
  color: var(--cyan);
  background: rgba(39, 223, 243, 0.08);
  border: 1px solid rgba(39, 223, 243, 0.3);
  font-size: 26px;
  text-shadow: 0 0 14px var(--cyan-soft);
}

.equipment-art {
  min-height: 64px;
  position: relative;
  overflow: hidden;
  color: transparent;
  background-color: rgba(0, 0, 0, 0.34);
  border-color: rgba(226, 234, 228, 0.26);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04), 0 0 16px rgba(39, 223, 243, 0.08);
  text-shadow: none;
}

/* Independent cutouts prevent adjacent sheet cells from bleeding into an icon. */
.equipment-art::before {
  content: "";
  position: absolute;
  inset: 6%;
  background-image: var(--equipment-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

.icon-tunnel-composite {
  --equipment-image: url("../assets/images/equipment/icons-v6/tunnel-composite.webp");
}

.icon-r3-coil-carbine {
  --equipment-image: url("../assets/images/equipment/icons-v6/r3-coil-carbine.webp");
}

.icon-br7-barrier {
  --equipment-image: url("../assets/images/equipment/icons-v6/br7-barrier.webp");
}

.icon-mole-eye {
  --equipment-image: url("../assets/images/equipment/icons-v6/mole-eye.webp");
}

.icon-kestrel-drive {
  --equipment-image: url("../assets/images/equipment/icons-v6/kestrel-drive.webp");
}

.icon-ground-zero-shell {
  --equipment-image: url("../assets/images/equipment/icons-v6/ground-zero-shell.webp");
}

.icon-r7-high-coil {
  --equipment-image: url("../assets/images/equipment/icons-v6/r7-high-coil.webp");
}

.icon-mimir-cell {
  --equipment-image: url("../assets/images/equipment/icons-v6/mimir-cell.webp");
}

.icon-canary-resonance {
  --equipment-image: url("../assets/images/equipment/icons-v6/canary-resonance.webp");
}

.icon-hermes-processor {
  --equipment-image: url("../assets/images/equipment/icons-v6/hermes-processor.webp");
}

.icon-moleskin-laminate {
  --equipment-image: url("../assets/images/equipment/icons-v6/moleskin-laminate.webp");
}

.icon-weisslanze-railgun {
  --equipment-image: url("../assets/images/equipment/icons-v6/weisslanze-railgun.webp");
}

.icon-brocken-ram-barrier {
  --equipment-image: url("../assets/images/equipment/icons-v6/brocken-ram-barrier.webp");
}

.icon-kestrel-wide-radar {
  --equipment-image: url("../assets/images/equipment/icons-v6/kestrel-wide-radar.webp");
}

.icon-longeye-range-module {
  --equipment-image: url("../assets/images/equipment/icons-v6/longeye-range-module.webp");
}

.icon-abyss-mirror {
  --equipment-image: url("../assets/images/equipment/icons-v6/abyss-mirror.webp");
}

.icon-brute-heavy-railgun {
  --equipment-image: url("../assets/images/equipment/icons-v6/brute-heavy-railgun.webp");
}

.icon-orpheus-phase {
  --equipment-image: url("../assets/images/equipment/icons-v6/orpheus-phase.webp");
}

.icon-nocturne-core {
  --equipment-image: url("../assets/images/equipment/icons-v6/nocturne-core.webp");
}

.icon-beowulf-servo {
  --equipment-image: url("../assets/images/equipment/icons-v6/beowulf-servo.webp");
}

.icon-hawkeye-gunnery-armor {
  --equipment-image: url("../assets/images/equipment/icons-v6/hawkeye-gunnery-armor.webp");
}

.icon-nocturne-long-cannon {
  --equipment-image: url("../assets/images/equipment/icons-v6/nocturne-long-cannon.webp");
}

.icon-beowulf-melee-barrier {
  --equipment-image: url("../assets/images/equipment/icons-v6/beowulf-melee-barrier.webp");
}

.icon-argos-long-radar {
  --equipment-image: url("../assets/images/equipment/icons-v6/argos-long-radar.webp");
}

.icon-mole-eye-support {
  --equipment-image: url("../assets/images/equipment/icons-v6/mole-eye-support.webp");
}

.icon-beowulf-close-armor {
  --equipment-image: url("../assets/images/equipment/icons-v6/beowulf-close-armor.webp");
}

.icon-nemesis-pile {
  --equipment-image: url("../assets/images/equipment/icons-v6/nemesis-pile.webp");
}

.icon-atlas-absolute-barrier {
  --equipment-image: url("../assets/images/equipment/icons-v6/atlas-absolute-barrier.webp");
}

.icon-hermes-integrated-sight {
  --equipment-image: url("../assets/images/equipment/icons-v6/hermes-integrated-sight.webp");
}

.icon-undergrid-stabilizer {
  --equipment-image: url("../assets/images/equipment/icons-v6/undergrid-stabilizer.webp");
}

.chip-action-attack {
  border-color: rgba(255, 83, 78, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 83, 78, 0.12), transparent 48%),
    rgba(6, 8, 8, 0.58);
}

.chip-action-guard {
  border-color: rgba(213, 161, 58, 0.42);
}

.chip-action-detect {
  border-color: rgba(245, 208, 113, 0.42);
  background:
    linear-gradient(90deg, rgba(213, 161, 58, 0.1), transparent 48%),
    rgba(6, 8, 8, 0.58);
}

.chip-action-skill {
  border-color: rgba(246, 213, 121, 0.58);
  background:
    linear-gradient(90deg, rgba(213, 161, 58, 0.16), transparent 50%),
    rgba(6, 8, 8, 0.62);
}

.panel-kicker {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.stage-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  margin: 24px 16px 8px;
  padding: 24px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.stage-screen > .section-title {
  margin: 0;
}

.stage-select-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.stage-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px 12px;
  height: 100%;
  min-height: 0;
  background: rgba(4, 7, 7, 0.6);
  border: 1px solid var(--control-edge);
}

.stage-rail-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--control-edge);
  color: var(--cyan);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}

.stage-rail-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
}

.stage-rail-scroll .stage-node {
  cursor: grab;
}

.stage-rail-scroll.dragging,
.stage-rail-scroll.dragging .stage-node {
  cursor: grabbing;
}

.stage-rail-track {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  gap: 28px;
  padding: 4px 0;
}

.stage-rail-track::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: rgba(226, 234, 228, 0.22);
  z-index: 0;
}

.stage-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.stage-node:hover {
  transform: none;
  filter: none;
  background: rgba(255, 255, 255, 0.05);
}

.stage-node-dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(226, 234, 228, 0.5);
  background: rgba(5, 7, 7, 0.92);
}

.stage-node.cleared .stage-node-dot {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(39, 223, 243, 0.6);
}

.stage-node.active .stage-node-dot {
  border-color: #f6d579;
  box-shadow: 0 0 0 4px rgba(246, 213, 121, 0.28), 0 0 12px rgba(246, 213, 121, 0.55);
}

.stage-node-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stage-node-label strong {
  color: #f5f7f5;
  font-size: 17px;
  white-space: nowrap;
}

.stage-node-label small {
  display: block;
  color: var(--muted);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-node.active .stage-node-label strong {
  color: #f6d579;
}

.stage-detail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto 116px;
  align-content: start;
  gap: 16px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: rgba(4, 7, 7, 0.65);
  border: 1px solid var(--control-edge);
  padding: 18px 20px;
}

.stage-detail > * + * {
  margin-top: 0;
}

.stage-deploy-panel + .stage-bottom-row {
  margin-top: 0;
}

.stage-briefing-panel {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.stage-briefing-panel.has-background-preview {
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 20px;
  align-content: stretch;
}

.stage-briefing-panel.has-background-preview .stage-briefing-head {
  grid-column: 1 / -1;
}

.stage-briefing-panel.has-background-preview .stage-briefing-text {
  grid-column: 1;
  grid-row: 2;
}

.stage-briefing-background {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-tunnel-anime-v4.webp");
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(39, 223, 243, 0.34);
  background-color: rgba(4, 7, 7, 0.88);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.32);
  background:
    var(--stage-preview-image) center / contain no-repeat,
    #000;
}

.stage-briefing-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.36)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.stage-briefing-background[data-battle-background="abandoned-platform"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-platform-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="sunlit-platform"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-platform-sunlight-anime-v1.webp");
}

.stage-briefing-background[data-battle-background="blast-door"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-processing-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="connecting-passage"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-connecting-passage-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="shopping-passage"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-shopping-passage-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="maintenance-corridor"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-maintenance-corridor-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="ventilation-sunshaft"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-ventilation-sunshaft-anime-v6.webp");
}

.stage-briefing-background[data-battle-background="company-office"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/home-company-office-anime-v3.webp");
}

.stage-briefing-background[data-battle-background="new-residential-block"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/scene-new-residential-block-anime-v2.webp");
}

.stage-briefing-background[data-battle-background="church-dining"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/scene-church-dining-anime-v1.webp");
}

.stage-briefing-background[data-battle-background="armored-train-breach"] {
  --stage-preview-image: url("../assets/images/backgrounds/pop-v1/battle-armored-train-breach-anime-v6.webp");
}

.stage-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stage-briefing-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.stage-briefing-tag {
  color: var(--cyan);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
}

.stage-briefing-panel h3 {
  margin: 0;
  color: #f5f7f5;
  font-size: 22px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-briefing-text {
  margin: 0;
  color: rgba(226, 234, 228, 0.92);
  font-size: 17px;
  line-height: 1.65;
  font-style: normal;
  white-space: pre-line;
  display: block;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 10px;
  overscroll-behavior: contain;
}

.stage-panel-label {
  color: var(--cyan);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.stage-deploy-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.stage-deploy-track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
}

.deploy-cell {
  position: relative;
  min-width: 0;
  height: 42px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 28px);
  justify-content: center;
  place-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(226, 234, 228, 0.14);
}

.deploy-cell.ally-zone {
  background: rgba(39, 223, 243, 0.1);
  border-color: rgba(39, 223, 243, 0.32);
}

.deploy-cell.enemy-zone {
  background: rgba(255, 83, 78, 0.14);
  border-color: rgba(255, 83, 78, 0.36);
}

.deploy-marker {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 28px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #ff7a68;
}

.stage-bottom-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.stage-enemy-panel {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.stage-enemy-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.stage-enemy-chip {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(226, 234, 228, 0.2);
}

.stage-enemy-letter {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #ff7a68;
}

.enemy-marker-brackets {
  position: absolute;
  inset: 0;
  display: block;
}

.enemy-marker-letter {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 83, 78, 0.9), 0 1px 1px rgba(0, 0, 0, 0.65);
}

.stage-enemy-icon {
  display: inline-block;
  width: 82%;
  max-height: 76px;
  aspect-ratio: 132 / 118;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: 210% 100%;
  background-position: left center;
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(255, 83, 78, 0.3));
}

.stage-enemy-icon.icon-alt {
  background-position: right center;
}

.stage-enemy-icon {
  transform: scaleX(-1);
}

.catalog-enemy-icon {
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent;
}

.stage-enemy-chip strong {
  display: block;
  width: 100%;
  min-width: 0;
  color: #f5f7f5;
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-launch-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 54px;
  align-self: flex-end;
  padding: 8px 20px;
  font-size: 26px;
  line-height: 1;
  text-align: center;
}

body[data-viewport="mobile-portrait"] .stage-select-layout {
  grid-template-columns: 1fr;
}

body[data-viewport="mobile-portrait"] .stage-rail-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

body[data-viewport="mobile-portrait"] .stage-rail-track {
  flex-direction: row;
  min-height: 0;
  min-width: 100%;
  gap: 14px;
  padding-bottom: 6px;
}

body[data-viewport="mobile-portrait"] .stage-rail-track::before {
  left: 24px;
  right: 24px;
  top: 19px;
  bottom: auto;
  height: 3px;
  width: auto;
}

body[data-viewport="mobile-portrait"] .stage-node-label small {
  max-width: 120px;
}

body[data-viewport="mobile-portrait"] .stage-briefing-panel.has-background-preview {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(120px, 1fr);
}

body[data-viewport="mobile-portrait"] .stage-briefing-panel.has-background-preview .stage-briefing-head,
body[data-viewport="mobile-portrait"] .stage-briefing-panel.has-background-preview .stage-briefing-text,
body[data-viewport="mobile-portrait"] .stage-briefing-background {
  grid-column: 1;
}

body[data-viewport="mobile-portrait"] .stage-briefing-panel.has-background-preview .stage-briefing-text {
  grid-row: 2;
}

body[data-viewport="mobile-portrait"] .stage-briefing-background {
  grid-row: 3;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  margin-top: 0;
}

.battle-stage {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto clamp(170px, 30vh, 220px) auto;
  gap: 10px;
  overflow: hidden;
}

.battle-hud {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 20px;
  align-items: start;
  padding: 16px 16px 10px;
}

.battle-hud {
  position: relative;
}

.battle-retreat-button {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 5;
  color: #fff;
}

.battle-enemy-icons {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.battle-enemy-icon-slot {
  width: 60px;
  aspect-ratio: 132 / 118;
  display: grid;
  place-items: center;
  background: rgba(4, 5, 5, 0.5);
  border: 1px solid rgba(255, 122, 104, 0.4);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.battle-enemy-icon-slot.defeated {
  border-color: rgba(226, 234, 228, 0.2);
  opacity: 0.32;
  filter: grayscale(1);
}

.battle-enemy-icon {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 210% 100%;
  background-position: left center;
}

.battle-enemy-icon.icon-alt {
  background-position: right center;
}

.hud-cluster {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hud-right {
  justify-content: flex-end;
}

.hud-button {
  min-width: 78px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 8px 14px;
  color: #f5f7f5;
  background: rgba(4, 5, 5, 0.54);
  border: 1px solid rgba(230, 236, 230, 0.42);
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.035), 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 24px;
  letter-spacing: 0;
}

.wave-block,
.frontline-hud {
  display: grid;
  gap: 9px;
}

.hud-label {
  color: #f1f4f2;
  font-size: 18px;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
}

.battle-stage-name {
  color: rgba(245, 247, 245, 0.88);
  font-size: 15px;
  text-align: center;
}

.battle-status-strip {
  position: absolute;
  left: 50%;
  bottom: -24px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.battle-main {
  position: relative;
  min-height: 0;
  display: block;
  overflow: visible;
}

.battle-main.has-result {
  overflow: visible;
}

.wave-pips {
  display: flex;
  gap: 18px;
  padding-left: 4px;
}

.wave-pips span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(230, 236, 230, 0.75);
  transform: rotate(45deg);
  background: #0d100f;
}

.wave-pips .active {
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.frontline-row {
  display: grid;
  grid-template-columns: auto repeat(12, 24px) auto;
  gap: 9px;
  align-items: center;
}

.side-label {
  font-size: 18px;
  line-height: 1;
}

.ally-side {
  color: var(--cyan);
}

.enemy-side {
  color: #ff5f58;
}

.front-pip {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.front-ally {
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-soft);
}

.front-neutral {
  background: #c8cbca;
}

.front-enemy {
  background: #ff5d57;
  box-shadow: 0 0 12px var(--red-glow);
}

.battlefield {
  --field-plane-top: 56px;
  --field-plane-bottom: 42px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(48px, 1fr));
  gap: 0;
  align-self: stretch;
  height: clamp(170px, 30vh, 220px);
  margin-top: 0;
  padding: 14px 0 14px;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  overflow: visible;
  clip-path: inset(-28px 0 -60px 0);
  transform: none;
  transform-origin: center top;
}

.battlefield::before,
.battlefield::after {
  content: none;
  position: absolute;
  inset: var(--field-plane-top) 0 var(--field-plane-bottom);
  pointer-events: none;
}

.battlefield::before {
  z-index: 5;
  border: 0;
  box-shadow: none;
}

.battlefield::after {
  content: none;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 0;
  color: #eaf0ed;
  font-weight: 700;
  overflow: visible;
  z-index: 1;
}

.perspective-grid {
  position: absolute;
  inset: var(--field-plane-top) 0 var(--field-plane-bottom);
  /* SVG needs an explicit size to share the frontline's vertical bounds. */
  width: 100%;
  height: calc(100% - var(--field-plane-top) - var(--field-plane-bottom));
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.grid-zone {
  stroke: rgba(226, 234, 228, 0.24);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.grid-zone-ally {
  fill: rgba(31, 215, 232, 0.12);
  stroke: rgba(75, 238, 244, 0.3);
}

.grid-zone-neutral {
  fill: rgba(218, 224, 220, 0.06);
  stroke: rgba(226, 234, 228, 0.24);
}

.grid-zone-enemy {
  fill: rgba(255, 83, 78, 0.12);
  stroke: rgba(255, 106, 96, 0.3);
}

.scan-line {
  display: none;
}

.scan-line::before {
  content: none;
}

@keyframes scanSweep {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

.shot-effect {
  position: absolute;
  left: var(--shot-left);
  top: 53%;
  width: var(--shot-width);
  height: 42px;
  z-index: 4;
  pointer-events: none;
  transform: translateY(-50%);
  animation: shotFade 860ms ease-out var(--shot-delay) both;
}

.shot-effect::before {
  content: none;
}

.impact-flash,
.flying-bullet {
  position: absolute;
  display: block;
  pointer-events: none;
}

.impact-flash {
  left: var(--effect-left);
  top: var(--effect-top, 52%);
  z-index: 8;
  transform: translate(-50%, -50%);
}

.impact-flash {
  width: 32px;
  height: 32px;
  background:
    linear-gradient(45deg, transparent 43%, rgba(255, 209, 138, 0.9) 44% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 43%, rgba(255, 138, 36, 0.9) 44% 55%, transparent 56%),
    radial-gradient(circle, #fff 0 8%, rgba(255, 138, 36, 0.82) 9% 28%, rgba(255, 95, 32, 0.18) 29% 58%, transparent 59%);
  filter: drop-shadow(0 0 9px rgba(255, 138, 36, 0.88));
  animation: impactBurst 260ms ease-out both;
}

.stable-effect {
  animation: none !important;
  opacity: 0.9;
}

.damage-pop.stable-effect,
.hit-reaction.stable-effect,
.guard-effect.stable-effect,
.lock-effect.stable-effect,
.melee-impact.stable-effect {
  transform: translate(-50%, -50%);
}

.detect-line.stable-effect {
  transform: none;
}

.flying-bullet {
  left: var(--bullet-left);
  top: var(--bullet-top);
  z-index: 9;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, #fff 0 10%, #ffe0a8 11% 28%, #ff9a2f 29% 62%, #d95716 63% 100%);
  box-shadow:
    0 0 6px rgba(255, 138, 36, 0.96),
    0 0 11px rgba(255, 111, 28, 0.58);
  filter: drop-shadow(0 0 5px rgba(255, 138, 36, 0.9));
}

.flying-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--trail-left);
  width: 19px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 36, 0.62));
  opacity: 0.58;
  transform: translateY(-50%) scaleX(var(--bullet-dir));
}

@keyframes impactBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7) rotate(18deg);
  }
}

.destruction-effect {
  --destruction-accent: #ff6b2c;
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top, 46%);
  z-index: 14;
  width: 0;
  height: 0;
  pointer-events: none;
}

.destruction-effect.destruction-ally {
  --destruction-accent: #27dff3;
}

.destruction-effect > span,
.destruction-debris {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

.destruction-flash {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 6%, #ffd369 7% 17%, #ff6b2c 18% 36%, rgba(255, 58, 20, 0.46) 37% 54%, transparent 72%);
  filter: drop-shadow(0 0 14px #ff8a24) drop-shadow(0 0 30px rgba(255, 65, 20, 0.82));
  animation: destructionFlash 760ms ease-out var(--destruction-delay, 0ms) both;
}

.destruction-cross {
  width: 178px;
  height: 178px;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(255, 227, 145, 0.92) 48% 52%, transparent 54% 100%),
    linear-gradient(0deg, transparent 0 46%, rgba(255, 116, 42, 0.88) 48% 52%, transparent 54% 100%);
  filter: drop-shadow(0 0 10px rgba(255, 112, 36, 0.9));
  animation: destructionCross 720ms ease-out var(--destruction-delay, 0ms) both;
}

.destruction-ring {
  width: 68px;
  height: 68px;
  border: 3px solid var(--destruction-accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--destruction-accent), inset 0 0 10px rgba(255, 255, 255, 0.46);
  animation: destructionRing 980ms ease-out var(--destruction-delay, 0ms) both;
}

.destruction-smoke {
  width: 112px;
  height: 82px;
  border-radius: 46% 54% 42% 58%;
  background: radial-gradient(ellipse at center, rgba(49, 45, 41, 0.86) 0 28%, rgba(22, 24, 23, 0.74) 48%, transparent 72%);
  filter: blur(4px) drop-shadow(0 -8px 13px rgba(0, 0, 0, 0.72));
  animation: destructionSmoke 1320ms ease-out var(--destruction-delay, 0ms) both;
}

.destruction-debris {
  width: 13px;
  height: 6px;
  border: 1px solid rgba(255, 202, 116, 0.84);
  background: linear-gradient(90deg, #332d27, #ff7a28 45%, #111817);
  box-shadow: 0 0 7px rgba(255, 91, 28, 0.78);
  animation: destructionDebris 1120ms cubic-bezier(0.15, 0.72, 0.28, 1) calc(var(--destruction-delay, 0ms) + var(--debris-delay, 0ms)) both;
}

.destruction-debris:nth-of-type(even) {
  width: 8px;
  height: 10px;
}

@keyframes destructionFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  42% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.88); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); }
}

@keyframes destructionCross {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(12deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(28deg); }
}

@keyframes destructionRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}

@keyframes destructionSmoke {
  0%, 18% { opacity: 0; transform: translate(-50%, -40%) scale(0.35); }
  34% { opacity: 0.84; }
  100% { opacity: 0; transform: translate(-50%, -118%) scale(1.45); }
}

@keyframes destructionDebris {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  14% { opacity: 1; }
  76% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--debris-x)), calc(-50% + var(--debris-y))) scale(0.72) rotate(var(--debris-rotation)); }
}

@keyframes shotFade {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

.damage-pop,
.hit-reaction,
.guard-effect,
.lock-effect,
.melee-impact {
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top, 42%);
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.damage-pop {
  min-width: 38px;
  padding: 3px 6px;
  color: #fff;
  background: rgba(8, 10, 10, 0.72);
  border: 1px solid rgba(255, 83, 78, 0.55);
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 83, 78, 0.8);
  animation: damageRise 490ms ease-out both;
}

.damage-ally {
  border-color: rgba(39, 223, 243, 0.55);
  text-shadow: 0 0 10px var(--cyan-soft);
}

.hit-reaction {
  top: var(--effect-top, 58%);
  width: 48px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 245, 220, 0.72);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 12%, transparent 13%),
    linear-gradient(90deg, transparent 43%, rgba(255, 245, 220, 0.82) 44% 56%, transparent 57%),
    linear-gradient(0deg, transparent 43%, rgba(255, 138, 36, 0.88) 44% 56%, transparent 57%);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 138, 36, 0.92);
  animation: hitJolt 290ms ease-out both;
}

.hit-ally {
  border-color: rgba(39, 223, 243, 0.55);
}

@keyframes hitJolt {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(-8deg);
  }
  34% {
    opacity: 1;
    transform: translate(calc(-50% + 3px), -50%) scale(1.04) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 5px), -50%) scale(1.16) rotate(-4deg);
  }
}

.guard-effect {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(39, 223, 243, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 223, 243, 0.2), transparent 62%);
  box-shadow: 0 0 18px var(--cyan-soft), inset 0 0 16px var(--cyan-soft);
  animation: guardPulse 780ms ease-out var(--effect-delay) both;
}

.lock-effect {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  color: #f5d071;
  border: 1px solid rgba(213, 161, 58, 0.8);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(213, 161, 58, 0.62) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(213, 161, 58, 0.62) 48% 52%, transparent 53%);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(213, 161, 58, 0.8);
  animation: lockPulse 820ms ease-out var(--effect-delay) both;
}

.detect-line {
  position: absolute;
  left: var(--detect-left);
  top: 34%;
  z-index: 8;
  width: var(--detect-width);
  height: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(245, 208, 113, 0.9) 0 8px, transparent 8px 14px);
  filter: drop-shadow(0 0 7px rgba(213, 161, 58, 0.8));
  animation: detectTrace 760ms ease-out var(--effect-delay) both;
}

.melee-impact {
  width: 112px;
  height: 76px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.9) 46% 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(255, 95, 88, 0.9) 46% 54%, transparent 55%);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 95, 88, 0.9);
  animation: meleeBurst 620ms ease-out var(--effect-delay) both;
}

@keyframes damageRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.85);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -125%) scale(1.08);
  }
}

@keyframes guardPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes lockPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45) rotate(0deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82) rotate(24deg);
  }
}

@keyframes detectTrace {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@keyframes meleeBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.zone-ally {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.zone-neutral {
  background: transparent;
  border-color: transparent;
}

.zone-enemy {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.base-label {
  position: absolute;
  top: 8px;
  left: 0;
  min-width: 96px;
  z-index: 7;
  color: var(--cyan);
  font-size: 18px;
  line-height: 1.35;
  text-shadow: 0 0 12px var(--cyan-soft);
}

.cell:last-child .base-label {
  left: auto;
  right: 0;
  color: #ff5f58;
  text-align: right;
  text-shadow: 0 0 12px var(--red-glow);
}

.base-label::after {
  content: "BASE";
  display: block;
  color: inherit;
  font-size: 20px;
}

.cell:last-child .base-label::after {
  content: "ENEMY BASE";
}

.lane-unit-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: auto;
}

.unit-token {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: min(118px, 130%);
  min-height: 128px;
  border-radius: 0;
  color: #f4f8f4;
  font-size: 19px;
  border: 0;
  box-shadow: none;
  background-repeat: no-repeat;
  background-color: transparent;
  transform: translateX(0);
  will-change: transform;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.unit-token:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.unit-overhead {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 0;
  width: 52px;
  display: grid;
  gap: 2px;
  z-index: 4;
  transform: translate(-50%, -6px);
  pointer-events: none;
}

.enemy-token .unit-overhead {
  top: auto;
  bottom: 0;
  transform: translate(-50%, -6px);
}

.unit-mini-bar {
  height: 4px;
  overflow: hidden;
  background: rgba(2, 5, 5, 0.72);
  border: 1px solid rgba(226, 234, 228, 0.32);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}

.unit-mini-bar > i {
  display: block;
  height: 100%;
}

.hp-mini > i {
  background: linear-gradient(90deg, var(--cyan), #9bf6ff);
  box-shadow: 0 0 8px var(--cyan-soft);
}

.skill-mini {
  position: relative;
  border-color: rgba(213, 161, 58, 0.42);
}

.skill-mini::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -28%;
  z-index: 2;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 174, 0.95), transparent);
  transform: skewX(-18deg);
  animation: skillMiniSweep 1.35s ease-in-out infinite;
  pointer-events: none;
}

.skill-mini > i {
  position: relative;
  background: linear-gradient(90deg, #d5a13a, #f6d579);
  box-shadow: 0 0 8px rgba(213, 161, 58, 0.55);
}

.skill-mini > i::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -45%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 251, 206, 0.95), transparent);
  transform: skewX(-18deg);
  animation: skillGaugeShimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}

.skill-mini.full {
  animation: skillGaugeReady 1.25s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(213, 161, 58, 0.42);
}

.status-badges {
  position: absolute;
  left: 50%;
  top: 8px;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: none;
}

.status-badge {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(4, 6, 6, 0.72);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.42);
}

.jagdpanther-ammo-icons {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  min-width: 48px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.88));
}

.jagdpanther-ammo-icon {
  position: relative;
  display: block;
  width: 8px;
  height: 19px;
  border: 1px solid rgba(255, 240, 177, 0.92);
  border-radius: 50% 50% 2px 2px;
  background: linear-gradient(90deg, #8d5d18 0%, #f5d06c 45%, #a66e1d 100%);
  box-shadow: 0 0 7px rgba(245, 208, 108, 0.68), inset 0 -4px 0 rgba(55, 31, 5, 0.55);
}

.jagdpanther-ammo-icon::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -3px;
  height: 4px;
  border: 1px solid rgba(255, 233, 151, 0.82);
  border-radius: 1px;
  background: #8c5717;
}

.character-enemy-token .jagdpanther-ammo-icons {
  transform: translate(-50%, -100%) scaleX(-1);
}

.status-detect {
  color: #f5d071;
  border-color: rgba(213, 161, 58, 0.72);
  text-shadow: 0 0 8px rgba(213, 161, 58, 0.9);
}

.status-guard {
  color: var(--cyan);
  border-color: rgba(39, 223, 243, 0.72);
  text-shadow: 0 0 8px var(--cyan-soft);
}

.lane-unit {
  position: absolute;
  left: var(--unit-x);
  top: var(--unit-y);
  transform: translate(-50%, -50%);
}

.ally-token {
  width: min(177px, 195%);
  min-height: 192px;
  filter: drop-shadow(0 0 8px rgba(39, 223, 243, 0.26)) drop-shadow(0 16px 10px rgba(0, 0, 0, 0.46));
}

.ally-token .unit-overhead {
  top: auto;
  bottom: 0;
  transform: translate(-50%, -6px);
}

.enemy-token {
  width: min(177px, 195%);
  min-height: 192px;
  background-size: 210% 100%;
  filter: drop-shadow(0 0 8px rgba(255, 83, 78, 0.3)) drop-shadow(0 16px 10px rgba(0, 0, 0, 0.46));
}

.enemy-left {
  background-position: left center;
}

.enemy-right {
  background-position: right center;
}

.catalog-enemy-token {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  transform: translate(-50%, -50%) scaleX(-1);
}

.catalog-enemy-token .unit-overhead {
  transform: translate(-50%, -6px) scaleX(-1);
}

.catalog-enemy-token .status-badges {
  transform: translateX(-50%) scaleX(-1);
}

.unit-icon {
  display: none;
}

.unit-name {
  display: none;
}

.front-marker {
  position: absolute;
  bottom: 4px;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  color: #f4f7f5;
  font-size: 18px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.42);
}

.battle-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
  min-height: 0;
  margin-top: 0;
  padding: 0 0 16px;
}

.hpbar {
  height: 10px;
  margin-top: 8px;
  background: #0c0f0d;
  border: 1px solid #303630;
  border-radius: 999px;
  overflow: hidden;
}

.hpbar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #9bf6ff);
  box-shadow: 0 0 12px var(--cyan);
}

.skill-gauge-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
}

.skill-gauge-row > span,
.skill-gauge-row > strong {
  color: var(--amber);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.skill-gauge-row > strong {
  color: #f6d579;
  text-align: right;
}

.skillbar {
  height: 7px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(213, 161, 58, 0.38);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.skillbar > i {
  position: relative;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d5a13a, #f6d579);
  box-shadow: 0 0 12px rgba(213, 161, 58, 0.55);
  overflow: hidden;
}

.skillbar > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 32%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 251, 206, 0.9),
    transparent
  );
  transform: skewX(-18deg);
  animation: skillGaugeShimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}

.skillbar.full {
  border-color: rgba(246, 213, 121, 0.9);
  animation: skillGaugeReady 1.25s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(213, 161, 58, 0.24), inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.skillbar.full > i {
  box-shadow: 0 0 16px rgba(255, 222, 94, 0.9);
}

@keyframes skillGaugeShimmer {
  0%, 42% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  58% { opacity: 0.9; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

@keyframes skillGaugeReady {
  0%, 100% { box-shadow: 0 0 10px rgba(213, 161, 58, 0.22), inset 0 0 8px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 24px rgba(255, 222, 94, 0.7), inset 0 0 12px rgba(255, 222, 94, 0.22); }
}

@keyframes skillMiniSweep {
  0%, 20% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  42% { opacity: 1; }
  78%, 100% { transform: translateX(560%) skewX(-18deg); opacity: 0; }
}

.skill-name {
  margin-top: 5px;
  color: #f6d579;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passive-name {
  margin-top: 5px;
  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ability-line {
  padding: 7px 9px;
  border-left: 2px solid rgba(39, 223, 243, 0.72);
  background: rgba(39, 223, 243, 0.06);
  color: #dfe9e9;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.ability-line.skill-line {
  border-left-color: rgba(213, 161, 58, 0.78);
  background: rgba(213, 161, 58, 0.07);
}

.skill-effect {
  --ability-accent: #f0bd4f;
  --ability-accent-bright: #ffe9a3;
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top, 48%);
  z-index: 8;
  min-width: 92px;
  padding: 5px 9px;
  color: #17120a;
  background: linear-gradient(90deg, var(--ability-accent), var(--ability-accent-bright));
  border: 1px solid color-mix(in srgb, var(--ability-accent-bright) 82%, #fff);
  box-shadow: 0 0 20px color-mix(in srgb, var(--ability-accent) 58%, transparent);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, -120%);
  animation: skillPulse 900ms ease-out var(--effect-delay) both;
  pointer-events: none;
}

@keyframes skillPulse {
  0% { opacity: 0; transform: translate(-50%, -95%) scale(0.9); }
  18% { opacity: 1; transform: translate(-50%, -130%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}

.unit-panel {
  --skill-fill: 0%;
  position: relative;
  min-height: 236px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 12px;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.13), transparent 42%),
    rgba(5, 6, 6, 0.66);
  border-color: rgba(226, 234, 228, 0.38);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.unit-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--skill-fill);
  background:
    linear-gradient(180deg, rgba(246, 213, 121, 0.1), rgba(213, 161, 58, 0.32)),
    linear-gradient(90deg, rgba(213, 161, 58, 0.1), rgba(255, 230, 122, 0.2), rgba(213, 161, 58, 0.1));
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 0 0;
  box-shadow: inset 0 0 22px rgba(213, 161, 58, 0.2);
  animation: skillPanelCharge 2.2s linear infinite;
  transition: height 220ms ease;
  pointer-events: none;
}

@keyframes skillPanelCharge {
  0% { background-position: 0 0, 0 0; filter: brightness(0.95); }
  50% { filter: brightness(1.18); }
  100% { background-position: 0 0, 220% 0; filter: brightness(0.95); }
}

.unit-panel.skill-full {
  border-color: rgba(255, 222, 94, 0.88);
  box-shadow:
    0 0 20px rgba(213, 161, 58, 0.36),
    inset 0 0 28px rgba(213, 161, 58, 0.18);
}

.unit-panel.skill-full::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border: 1px solid rgba(255, 222, 94, 0.64);
  box-shadow: 0 0 18px rgba(213, 161, 58, 0.44), inset 0 0 18px rgba(213, 161, 58, 0.16);
  pointer-events: none;
}

.unit-portrait {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(100%, 214px);
  aspect-ratio: 1 / 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: rgba(255, 255, 255, 0.82);
  font-size: 56px;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(39, 223, 243, 0.25);
  overflow: hidden;
}

.unit-portrait::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--skill-fill);
  background:
    linear-gradient(90deg, rgba(213, 161, 58, 0.14), rgba(255, 230, 122, 0.012) 28%, rgba(255, 230, 122, 0.006) 50%, rgba(255, 230, 122, 0.012) 72%, rgba(213, 161, 58, 0.14)),
    linear-gradient(180deg, rgba(246, 213, 121, 0.018), rgba(213, 161, 58, 0.09));
  box-shadow: inset 0 0 16px rgba(213, 161, 58, 0.045);
  pointer-events: none;
  transition: height 220ms ease;
}

.unit-panel.skill-full .unit-portrait::before {
  content: "";
  box-shadow:
    0 0 18px rgba(213, 161, 58, 0.18),
    inset 0 0 24px rgba(213, 161, 58, 0.1);
}

.unit-portrait::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--streak-bottom, -22%);
  z-index: 1;
  height: 5px;
  background: linear-gradient(
    0deg,
    transparent,
    rgba(255, 247, 175, 0.25) 42%,
    rgba(255, 248, 196, 0.95) 50%,
    rgba(255, 247, 175, 0.25) 58%,
    transparent
  );
  box-shadow: 0 0 7px rgba(255, 218, 87, 0.7);
  opacity: var(--streak-opacity, 0);
  pointer-events: none;
}

.unit-panel.skill-full .unit-portrait::after {
  box-shadow: 0 0 11px rgba(255, 218, 87, 0.9);
}

.unit-portrait.vanguard {
  border-color: rgba(213, 161, 58, 0.38);
}

.unit-portrait.sniper {
  border-color: rgba(255, 83, 78, 0.36);
}

.unit-panel-body {
  min-width: 0;
}

.unit-panel h3 {
  margin: 0;
  color: #f5f7f5;
  font-size: 18px;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 12px rgba(39, 223, 243, 0.34);
}

.unit-panel-overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.72));
  border-left: 2px solid rgba(39, 223, 243, 0.72);
  pointer-events: none;
}

.unit-hp {
  color: rgba(226, 234, 228, 0.9);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

.unit-panel-hpbar {
  position: relative;
  height: 5px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid rgba(226, 234, 228, 0.42);
  background: rgba(2, 5, 5, 0.62);
}

.unit-panel-hpbar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--hp-fill);
  background: linear-gradient(90deg, rgba(39, 223, 243, 0.9), rgba(165, 250, 255, 0.92));
  box-shadow: 0 0 10px rgba(39, 223, 243, 0.4);
}

.ready-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.ready-line span {
  color: var(--cyan);
  border: 1px solid rgba(39, 223, 243, 0.7);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 19px;
  text-shadow: 0 0 12px var(--cyan-soft);
}

.ready-line small {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result {
  padding: 12px;
  border: 1px solid var(--amber);
  background:
    linear-gradient(180deg, rgba(213, 161, 58, 0.16), rgba(5, 6, 6, 0.78)),
    rgba(5, 6, 6, 0.74);
  border-radius: 6px;
  backdrop-filter: blur(3px);
}

.battle-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18), transparent 52%),
    linear-gradient(90deg, transparent, rgba(39, 223, 243, 0.08), transparent);
}

.battle-start-banner {
  width: min(640px, 72%);
  aspect-ratio: 2070 / 472;
  background: var(--control-surface);
  filter: drop-shadow(0 0 22px rgba(39, 223, 243, 0.34)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.58));
}

.loading-screen-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  color: #f4ffff;
  background: #020506;
}

.route-loading-screen {
  position: absolute;
}

.app-shell.screen-assets-pending > :not(.screen-reveal-cover) {
  visibility: hidden;
  pointer-events: none;
}

.screen-reveal-cover {
  position: absolute;
  inset: 0;
  z-index: 100;
}

.loading-screen-media,
.loading-screen-shade {
  position: absolute;
  inset: 0;
}

.loading-screen-image,
.loading-screen-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.loading-screen-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 42%, rgba(0, 3, 5, 0.8) 100%),
    linear-gradient(90deg, rgba(0, 5, 7, 0.48), transparent 48%);
}

.loading-screen-copy {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  z-index: 2;
  display: grid;
  gap: 5px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
}

.loading-screen-kicker {
  color: rgba(108, 239, 246, 0.86);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.loading-screen-title {
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: 0.06em;
  text-shadow: 0 0 16px rgba(39, 223, 243, 0.42);
}

.loading-screen-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 12px;
  overflow: hidden;
  border-top: 1px solid rgba(137, 243, 248, 0.58);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 10px, transparent 10px 13px),
    rgba(0, 0, 0, 0.72);
}

.loading-screen-fill {
  display: block;
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.35) 0 5px, transparent 5px 11px),
    linear-gradient(90deg, #168f9a, #43edf4 64%, #d7ffff);
  box-shadow: 0 0 16px rgba(39, 223, 243, 0.74);
  transition: width 120ms ease-out;
}

.loading-screen-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(226, 238, 236, 0.68);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.loading-screen-percent {
  color: #d8ffff;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(39, 223, 243, 0.66);
}

.loading-screen-note {
  color: rgba(207, 219, 216, 0.52);
  font-size: 10px;
}

.loading-screen-overlay.has-load-error .loading-screen-title {
  color: #ffd8d5;
  text-shadow: 0 0 16px rgba(255, 83, 78, 0.46);
}

.loading-screen-blackout {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #000;
}

.battle-loading-retry {
  justify-self: center;
  min-width: 150px;
  margin-top: 4px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 128, 121, 0.72);
  color: #fff4f2;
  background: rgba(105, 24, 21, 0.76);
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.battlefield.is-hit-stop .lane-unit,
.battlefield.is-hit-stop .battle-effect-layer * {
  animation-play-state: paused !important;
  transition-duration: 0ms !important;
}

.battle-result-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: min(620px, 78vw);
  min-height: 170px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  transform: translate(-50%, -50%);
  text-align: center;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.32), 0 24px 70px rgba(0, 0, 0, 0.6);
}

.battle-result-modal strong {
  color: #fff;
  font-size: 28px;
  text-shadow: 0 0 16px rgba(213, 161, 58, 0.7);
}

.battle-result-banner {
  width: min(520px, 100%);
  margin: 0 auto;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 18px rgba(39, 223, 243, 0.24)) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5));
}

.battle-result-banner.mission-clear {
  aspect-ratio: 2082 / 482;
  background-image: none;
}

.battle-result-banner.mission-failed {
  aspect-ratio: 2068 / 475;
  background-image: none;
  filter: drop-shadow(0 0 18px rgba(255, 83, 70, 0.3)) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55));
}

.battle-result-modal .toolbar {
  justify-content: center;
  margin: 8px 0 0;
}

.battle-result-reward {
  width: min(460px, 100%);
  display: block;
  margin: 2px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(213, 161, 58, 0.5);
  background: linear-gradient(90deg, rgba(213, 161, 58, 0.15), rgba(5, 6, 6, 0.25));
  text-align: left;
}

.battle-result-reward-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.battle-result-reward-entry {
  min-width: 0;
  flex: 1 1 210px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.battle-result-reward-icon,
.battle-result-reward-character-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.battle-result-reward-icon {
  background-image: var(--ui-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

.battle-result-reward .battle-result-reward-character-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(39, 223, 243, 0.42));
}

.battle-result-reward-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.battle-result-reward-label {
  color: var(--amber);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.battle-result-reward strong {
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(213, 161, 58, 0.46);
}

.battle-unit-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 18px 12px;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(2px);
}

.battle-unit-detail {
  width: 100%;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 14px;
  overflow: visible;
  color: #e9eee9;
  background:
    linear-gradient(180deg, rgba(14, 18, 18, 0.94), rgba(4, 6, 6, 0.94)),
    rgba(4, 6, 6, 0.94);
  border: 1px solid rgba(230, 236, 230, 0.28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 26px rgba(255, 255, 255, 0.035);
}

.battle-unit-detail-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
  border-radius: 4px;
  background-color: #020303;
  border: 1px solid rgba(226, 234, 228, 0.2);
}

.battle-enemy-detail-portrait {
  display: grid;
  place-items: center;
}

.battle-enemy-detail-icon {
  display: block;
  width: 84%;
  aspect-ratio: 132 / 118;
  background-repeat: no-repeat;
  background-size: 210% 100%;
  background-position: left center;
  filter: drop-shadow(0 0 6px rgba(255, 83, 78, 0.3));
}

.battle-enemy-detail-icon.icon-alt {
  background-position: right center;
}

.battle-unit-detail-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.battle-unit-detail .modal-close {
  position: relative;
  z-index: 2;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
  pointer-events: auto;
}

.battle-unit-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.battle-unit-detail-head strong {
  display: block;
  font-size: 22px;
}

.battle-unit-detail-head span {
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
}

.battle-unit-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.battle-detail-stats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

.battle-detail-stat {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(226, 234, 228, 0.16);
}

.battle-detail-stat span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.battle-detail-stat strong {
  color: #f3f7f3;
  font-size: 14px;
  white-space: nowrap;
}

.battle-unit-abilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.battle-ability-detail {
  display: grid;
  gap: 2px;
  min-height: 52px;
  align-content: center;
  padding: 6px 8px;
  border-left: 2px solid rgba(39, 223, 243, 0.72);
  background: rgba(39, 223, 243, 0.06);
}

.battle-ability-detail.skill-line {
  border-left-color: rgba(213, 161, 58, 0.78);
  background: rgba(213, 161, 58, 0.07);
}

.battle-ability-detail span {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;
}

.battle-ability-detail.skill-line span {
  color: var(--amber);
}

.battle-ability-detail strong {
  font-size: 19px;
}

.battle-ability-detail em {
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hidden {
  display: none;
}

@media not all {
  .home-actions,
  .cols-2,
  .cols-3 {
    grid-template-columns: 1fr;
  }

  .visual-home {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 12px;
  }

  .home-operator {
    min-height: 210px;
    background-position: left bottom;
    background-size: auto 112%;
    opacity: 0.88;
  }

  .home-command-panel {
    min-height: auto;
    gap: 12px;
  }

  .home-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .big-action {
    min-height: 82px;
    padding: 12px;
  }

  .big-action strong {
    font-size: 18px;
  }

  .home-ops,
  .squad-dock {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .home-ops {
    grid-template-columns: 1fr 1fr;
    order: 3;
    gap: 8px;
  }

  .squad-dock {
    order: 4;
  }

  .dock-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bottom-dock {
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    overflow-x: auto;
  }

  .bottom-dock-item {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 68px;
    padding: 8px 10px;
  }

  .bottom-label {
    text-align: center;
  }

  .bottom-label strong {
    font-size: 19px;
  }

  .bottom-label small {
    display: none;
  }

  .topbar,
  .resource-cluster,
  .top-tools {
    flex-wrap: wrap;
  }

  .topbar,
  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .battle-stage {
    gap: 8px;
    grid-template-rows: auto clamp(160px, 30vh, 205px) auto;
  }

  .battle-main {
    display: block;
    overflow: hidden;
  }

  .battlefield {
    grid-template-columns: repeat(12, minmax(36px, 1fr));
    height: clamp(160px, 30vh, 205px);
    margin-top: 0;
    padding: 18px 0 12px;
    transform: none;
  }

  .cell {
    min-height: 0;
  }

  .battle-hud {
    grid-template-columns: minmax(140px, 0.7fr) minmax(260px, 1.6fr) minmax(140px, 0.7fr);
    gap: 8px;
    padding-bottom: 8px;
  }

  .hud-right {
    justify-content: flex-end;
  }

  .hud-cluster {
    gap: 8px;
  }

  .hud-button {
    min-width: 54px;
    min-height: 38px;
    padding: 6px 8px;
    font-size: 16px;
  }

  .hud-label {
    font-size: 19px;
  }

  .wave-pips {
    gap: 9px;
  }

  .wave-pips span {
    width: 10px;
    height: 10px;
  }

  .frontline-row {
    grid-template-columns: auto repeat(12, minmax(12px, 1fr)) auto;
    gap: 4px;
  }

  .front-pip {
    width: auto;
    height: 12px;
  }

  .unit-panel {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 92px;
    padding: 8px;
  }

  .unit-portrait {
    min-height: 78px;
    font-size: 42px;
  }

  .unit-panel h3 {
    font-size: 16px;
  }

  .unit-panel .meta,
  .ready-line small {
    font-size: 18px;
  }

  .ready-line span {
    padding: 4px 8px;
    font-size: 19px;
  }

  .battle-status-strip {
    position: static;
    transform: none;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media not all {
  body {
    place-items: stretch;
  }

  .app-shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) 50px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  body[data-route="battle"] .app-shell {
    display: block;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .topbar {
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
  }

  .commander-profile {
    gap: 8px;
  }

  .level-ring {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .brand h1 {
    font-size: 18px;
  }

  .brand span {
    display: none;
  }

  .top-tools,
  .resource-cluster {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .resource-chip {
    display: none;
  }

  .tool-icon {
    min-width: 36px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 19px;
  }

  .screen {
    min-height: 0;
    margin-top: 0;
    padding: 8px;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }

  .route-home {
    max-height: none;
  }

  .visual-home {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 8px 64px;
  }

  .home-operator {
    min-height: 0;
    background-size: auto 104%;
    background-position: center bottom;
  }

  .operator-caption {
    left: 8px;
    bottom: 8px;
    padding: 4px 7px;
    font-size: 18px;
  }

  .home-command-panel {
    min-height: 0;
    gap: 8px;
    align-content: center;
  }

  .home-command-panel .section-title {
    margin-bottom: 0;
    padding-bottom: 6px;
  }

  .section-title h2 {
    font-size: 17px;
  }

  .small-note {
    font-size: 18px;
  }

  .home-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .big-action {
    min-height: 64px;
    padding: 9px 10px;
    gap: 3px;
  }

  .big-action strong {
    font-size: 16px;
  }

  .big-action span {
    font-size: 18px;
  }

  .home-ops {
    display: none;
  }

  .squad-dock {
    position: absolute;
    inset: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    padding: 6px;
  }

  .dock-head {
    display: none;
  }

  .dock-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .dock-unit {
    min-height: 58px;
    grid-template-columns: 52px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 7px;
    padding: 6px;
  }

  .dock-portrait {
    min-height: 46px;
    margin: 0;
  }

  .bottom-dock {
    position: static;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    transform: none;
  }

  .bottom-dock-item {
    min-height: 46px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 5px 7px;
  }

  .bottom-icon {
    min-height: 28px;
    font-size: 18px;
  }

  .bottom-label strong {
    font-size: 18px;
  }

  .bottom-label small {
    display: none;
  }

  .nav-row,
  .toolbar {
    gap: 6px;
    margin-bottom: 8px;
  }

  .section-title {
    flex-direction: row;
    align-items: end;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .toolbar button,
  .nav-row button {
    min-height: 34px;
    min-width: 70px;
    padding: 6px 8px;
    font-size: 18px;
  }

  .card {
    padding: 8px;
  }

  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formation-portrait {
    min-height: 110px;
    margin: -8px -8px 8px;
  }

  .stat-grid {
    gap: 4px;
  }

  .stat {
    padding: 4px 6px;
    font-size: 18px;
  }

  .battle-stage {
    grid-template-rows: 64px minmax(128px, 1fr) 98px;
    gap: 4px;
  }

  .battle-hud {
    grid-template-columns: minmax(168px, 0.82fr) minmax(300px, 1.5fr) minmax(160px, 0.7fr);
    gap: 8px;
    padding: 6px 8px 4px;
  }

  .hud-cluster {
    gap: 7px;
    align-items: center;
  }

  .hud-button {
    min-width: 56px;
    min-height: 38px;
    padding: 5px 8px;
    font-size: 15px;
  }

  .wave-block,
  .frontline-hud {
    gap: 4px;
  }

  .battle-stage-name {
    font-size: 18px;
  }

  .hud-label {
    font-size: 19px;
  }

  .wave-pips {
    gap: 8px;
  }

  .wave-pips span {
    width: 10px;
    height: 10px;
  }

  .frontline-row {
    grid-template-columns: auto repeat(12, minmax(10px, 1fr)) auto;
    gap: 4px;
  }

  .front-pip {
    width: auto;
    height: 12px;
  }

  .side-label {
    font-size: 18px;
  }

  .battle-status-strip {
    position: absolute;
    left: 50%;
    bottom: -18px;
    gap: 4px;
    transform: translateX(-50%);
  }

  .battle-status-strip .ui-tag {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 18px;
  }

  .battlefield {
    height: 100%;
    min-height: 128px;
    padding: 8px 0 8px;
  }

  .base-label {
    top: 5px;
    min-width: 68px;
    font-size: 18px;
  }

  .base-label::after {
    font-size: 18px;
  }

  .front-marker {
    bottom: 2px;
    font-size: 18px;
  }

  .unit-token {
    width: min(86px, 118%);
    min-height: 92px;
  }

  .enemy-token {
    width: min(96px, 128%);
    min-height: 88px;
  }

  .battle-info {
    gap: 6px;
    padding-bottom: 4px;
  }

  .unit-panel {
    min-height: 96px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 7px;
    padding: 6px;
  }

  .unit-portrait {
    min-height: 82px;
  }

  .unit-panel h3 {
    font-size: 20px;
  }

  .unit-panel .meta,
  .ready-line small {
    font-size: 18px;
  }

  .unit-panel .meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hpbar {
    height: 7px;
    margin-top: 5px;
  }

  .ready-line {
    gap: 6px;
    margin-top: 6px;
  }

  .ready-line span {
    padding: 3px 7px;
    font-size: 18px;
  }
}

@media not all {
  .app-shell {
    grid-template-rows: 42px minmax(0, 1fr) 42px;
    padding-bottom: 0;
  }

  .topbar {
    min-height: 42px;
    padding: 4px 6px;
  }

  .level-ring {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .tool-icon {
    min-width: 32px;
    min-height: 28px;
    padding: 0 6px;
    font-size: 18px;
  }

  .screen {
    margin-top: 4px;
    padding: 6px;
    max-height: none;
  }

  .route-home {
    max-height: none;
  }

  .visual-home {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px 6px 54px;
  }

  .home-operator {
    background-size: auto 96%;
  }

  .operator-caption {
    display: none;
  }

  .home-command-panel {
    gap: 6px;
  }

  .home-command-panel .section-title {
    display: none;
  }

  .section-title {
    margin-bottom: 5px;
    padding-bottom: 4px;
  }

  .section-title h2 {
    font-size: 20px;
  }

  .cols-3 {
    gap: 6px;
  }

  .formation-portrait {
    min-height: 82px;
  }

  .card h3 {
    font-size: 19px;
  }

  .tag-row {
    gap: 4px;
    margin-bottom: 5px;
  }

  .ui-tag {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 18px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-action {
    min-height: 56px;
    padding: 7px 9px;
  }

  .big-action strong {
    font-size: 15px;
  }

  .big-action span {
    font-size: 18px;
  }

  .squad-dock {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 5px;
  }

  .dock-unit {
    min-height: 48px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  .dock-portrait {
    min-height: 38px;
  }

  .dock-unit small {
    display: none;
  }

  .bottom-dock {
    bottom: auto;
  }

  .bottom-dock-item {
    min-height: 40px;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 4px 6px;
  }

  .bottom-icon {
    min-height: 24px;
    font-size: 16px;
  }

  .bottom-label strong {
    font-size: 18px;
  }

  .battle-stage {
    grid-template-rows: 52px minmax(118px, 1fr) 82px;
    gap: 3px;
  }

  .battle-hud {
    grid-template-columns: minmax(128px, 0.7fr) minmax(260px, 1.6fr) minmax(132px, 0.7fr);
    gap: 5px;
    padding: 4px 6px 3px;
  }

  .hud-cluster {
    gap: 5px;
  }

  .hud-button {
    min-width: 46px;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 19px;
  }

  .battle-stage-name {
    display: none;
  }

  .hud-label {
    font-size: 18px;
  }

  .wave-pips {
    gap: 6px;
  }

  .wave-pips span {
    width: 8px;
    height: 8px;
  }

  .frontline-row {
    gap: 3px;
  }

  .front-pip {
    height: 10px;
  }

  .side-label {
    font-size: 18px;
  }

  .battle-status-strip {
    display: none;
  }

  .battlefield {
    min-height: 118px;
    padding: 6px 0;
  }

  .base-label {
    font-size: 18px;
  }

  .base-label::after,
  .front-marker {
    display: none;
  }

  .unit-token {
    width: min(74px, 112%);
    min-height: 78px;
  }

  .enemy-token {
    width: min(82px, 120%);
    min-height: 74px;
  }

  .battle-info {
    gap: 4px;
  }

  .unit-panel {
    min-height: 84px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  .unit-portrait {
    min-height: 70px;
  }

  .unit-panel h3 {
    font-size: 18px;
  }

  .unit-panel .meta {
    font-size: 18px;
  }

  .hpbar {
    height: 6px;
    margin-top: 4px;
  }

  .ready-line {
    margin-top: 5px;
  }

  .ready-line span {
    padding: 2px 6px;
    font-size: 18px;
  }

  .ready-line small {
    display: none;
  }
}

body[data-viewport="mobile-landscape"] {
  place-items: stretch;
}

body[data-viewport="mobile-landscape"] .app-shell {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 50px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body[data-viewport="mobile-landscape"][data-route="battle"] .app-shell {
  display: block;
}

body[data-viewport="mobile-landscape"] .topbar {
  min-height: 48px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
}

body[data-viewport="mobile-landscape"] .screen {
  min-height: 0;
  height: 100%;
  max-height: none;
  margin-top: 0;
}

body[data-viewport="mobile-landscape"] .bottom-dock {
  position: static;
  width: 100%;
  transform: none;
}

body[data-viewport="mobile-landscape"] .resource-chip,
body[data-viewport="mobile-landscape"] .brand span,
body[data-viewport="mobile-landscape"] .home-ops {
  display: none;
}

body[data-viewport="mobile-portrait"]::after {
  content: "端末を横向きにしてください";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  width: min(320px, calc(100vw - 32px));
  padding: 20px;
  color: #f5f7f5;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.12), transparent 40%),
    rgba(4, 6, 6, 0.96);
  border: 1px solid rgba(39, 223, 243, 0.54);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68), inset 0 0 28px rgba(255, 255, 255, 0.04);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

body[data-viewport="mobile-portrait"] .app-shell {
  opacity: 0.18;
  pointer-events: none;
  filter: blur(2px);
}

/* Unified PC/phone layout: keep the same 16:9 UI on every device. */
body::after,
body[data-viewport="mobile-portrait"]::after {
  content: none;
}

body[data-viewport] {
  place-items: center;
}

body[data-viewport] .app-shell {
  position: fixed;
  left: calc(50% + var(--app-center-x, 0px));
  top: calc(50% + var(--app-center-y, 0px));
  width: 1280px;
  height: 720px;
  display: block;
  aspect-ratio: 16 / 9;
  padding: 12px 0 12px;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--app-scale, 1));
  transform-origin: center center;
}

body[data-viewport][data-route="battle"] .app-shell {
  display: block;
  padding: 0;
}

body[data-viewport] .topbar {
  min-height: 86px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
}

body[data-viewport] .commander-profile {
  gap: 14px;
}

body[data-viewport] .level-ring {
  width: 72px;
  height: 72px;
  font-size: 34px;
}

body[data-viewport] .brand h1 {
  font-size: clamp(22px, 3vw, 34px);
}

body[data-viewport] .brand span,
body[data-viewport] .resource-chip,
body[data-viewport] .bottom-label small,
body[data-viewport] .battle-stage-name,
body[data-viewport] .base-label::after,
body[data-viewport] .front-marker,
body[data-viewport] .ready-line small {
  display: block;
}

body[data-viewport] .home-ops {
  position: absolute;
  left: 16px;
  top: 84px;
  width: 154px;
  display: grid;
  grid-template-columns: none;
  gap: 10px;
}

body[data-viewport] .dock-head,
body[data-viewport] .battle-status-strip {
  display: flex;
}

body[data-viewport] .battle-status-strip {
  position: absolute;
  left: 50%;
  bottom: -24px;
  gap: 8px;
  transform: translateX(-50%);
}

body[data-viewport] .top-tools,
body[data-viewport] .resource-cluster {
  flex-wrap: nowrap;
  gap: 14px;
}

body[data-viewport] .tool-icon,
body[data-viewport] .resource-chip {
  display: grid;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  font-size: inherit;
}

body[data-viewport] .screen {
  height: auto;
  min-height: 0;
  margin-top: 16px;
  padding: 16px;
  max-height: calc(100% - 110px);
  border-radius: 6px;
  overflow: auto;
}

body[data-viewport] .battle-screen {
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

body[data-viewport] .scenario-screen {
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

body[data-viewport] .route-home {
  padding: 0;
  max-height: calc(100% - 110px);
  overflow: hidden;
}

body[data-viewport] .route-start {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}

body[data-viewport] .visual-home {
  grid-template-columns: 1fr;
  align-content: stretch;
  gap: 18px;
  padding: 18px;
}

body[data-viewport] .home-operator {
  min-height: 0;
  background-position: center bottom;
  background-size: contain;
  opacity: 1;
}

body[data-viewport] .operator-caption {
  display: block;
  left: 22px;
  bottom: 28px;
  padding: 8px 12px;
  font-size: 16px;
}

body[data-viewport] .home-command-panel {
  min-height: 310px;
  gap: 18px;
}

body[data-viewport] .home-command-panel .section-title {
  display: flex;
}

body[data-viewport] .section-title {
  flex-direction: row;
  align-items: end;
  margin-bottom: 12px;
  padding-bottom: 10px;
}

body[data-viewport] .section-title h2 {
  font-size: 22px;
}

body[data-viewport] .small-note {
  font-size: 19px;
}

body[data-viewport] .home-actions {
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-viewport] .big-action {
  min-height: 112px;
  padding: 16px;
  gap: 8px;
}

body[data-viewport] .big-action strong {
  font-size: 22px;
}

body[data-viewport] .big-action span {
  font-size: 19px;
}

body[data-viewport] .squad-dock {
  position: absolute;
  left: auto;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100% - 36px));
  padding: 10px 12px 12px;
}

body[data-viewport] .dock-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-viewport] .dock-unit {
  min-height: 118px;
  display: grid;
  grid-template-columns: none;
  align-content: end;
  gap: 0;
  padding: 8px;
}

body[data-viewport] .dock-portrait {
  min-height: 68px;
  margin: -8px -8px 6px;
}

body[data-route="home"] .home-command-panel .dock-unit,
body[data-viewport][data-route="home"] .home-command-panel .dock-unit {
  min-height: 78px;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

body[data-route="home"] .home-command-panel .dock-chibi,
body[data-viewport][data-route="home"] .home-command-panel .dock-chibi {
  width: 70px;
  height: 64px;
  justify-self: center;
  align-self: center;
  margin: -6px 0 -4px -6px;
  transform: translateY(2px);
}

body[data-viewport] .bottom-dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: calc(100% - 24px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  transform: translateX(-50%);
}

body[data-viewport] .bottom-dock-item {
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 16px;
}

body[data-viewport] .bottom-icon {
  min-height: 42px;
  font-size: 26px;
}

body[data-viewport] .bottom-label strong {
  font-size: 17px;
}

body[data-viewport] .cols-2 {
  grid-template-columns: 1fr 1fr;
}

body[data-viewport] .cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-viewport] .formation-portrait {
  min-height: 186px;
  margin: -12px -12px 12px;
}

body[data-viewport] .card {
  padding: 12px;
}

body[data-viewport] .card h3 {
  font-size: 18px;
}

body[data-viewport] .ui-tag {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 18px;
}

body[data-viewport] .stat {
  padding: 6px 8px;
  font-size: 19px;
}

body[data-viewport] .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-viewport] .battle-stage {
  grid-template-rows: auto 216px auto;
  gap: 10px;
}

body[data-viewport] .battle-hud {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 20px;
  padding: 16px 16px 10px;
}

body[data-viewport] .hud-cluster {
  gap: 16px;
}

body[data-viewport] .hud-button {
  min-width: 78px;
  min-height: 52px;
  padding: 8px 14px;
  font-size: 24px;
}

body[data-viewport] .hud-label {
  font-size: 18px;
}

body[data-viewport] .wave-pips {
  gap: 18px;
}

body[data-viewport] .wave-pips span {
  width: 14px;
  height: 14px;
}

body[data-viewport] .frontline-row {
  grid-template-columns: auto repeat(12, 24px) auto;
  gap: 9px;
}

body[data-viewport] .front-pip {
  height: 18px;
}

body[data-viewport] .side-label {
  font-size: 18px;
}

body[data-viewport] .battlefield {
  height: 216px;
  min-height: 0;
  padding: 14px 0;
}

body[data-viewport] .base-label {
  top: 8px;
  min-width: 96px;
  font-size: 18px;
}

body[data-viewport] .front-marker {
  bottom: 4px;
  font-size: 18px;
}

body[data-viewport] .unit-token {
  width: min(118px, 130%);
  min-height: 128px;
}

body[data-viewport] .ally-token {
  width: min(177px, 195%);
  min-height: 192px;
}

body[data-viewport] .ally-token .unit-overhead {
  top: auto;
  bottom: 0;
  transform: translate(-50%, -6px);
}

body[data-viewport] .enemy-token {
  width: min(177px, 195%);
  min-height: 192px;
}

body[data-viewport] .battle-info {
  gap: 10px;
  padding: 0 0 16px;
}

body[data-viewport] .unit-panel {
  min-height: 118px;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
}

body[data-viewport] .unit-portrait {
  min-height: 108px;
}

body[data-viewport] .unit-panel h3 {
  font-size: 20px;
}

body[data-viewport] .unit-panel .meta,
body[data-viewport] .ready-line small {
  font-size: 19px;
}

body[data-viewport] .hpbar {
  height: 10px;
  margin-top: 8px;
}

body[data-viewport] .skill-gauge-row {
  margin-top: 7px;
}

body[data-viewport] .ready-line {
  gap: 12px;
  margin-top: 10px;
}

body[data-viewport] .ready-line span {
  padding: 6px 12px;
  font-size: 19px;
}

.hangar-console,
body[data-viewport] .hangar-console {
  display: grid;
  grid-template-columns: minmax(380px, 0.78fr) minmax(0, 0.92fr);
  gap: 12px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.formation-card-console {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
  overflow: hidden;
}

.formation-card-board {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 128px;
  gap: 12px;
  overflow: hidden;
}

.formation-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 2px dotted rgba(226, 234, 228, 0.62);
}

.formation-card-head em {
  color: var(--cyan);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.formation-card-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 170px;
  align-content: start;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.formation-card-grid,
.stage-rail-scroll,
.stage-briefing-text {
  scrollbar-color: rgba(39, 223, 243, 0.72) rgba(0, 0, 0, 0.42);
  scrollbar-width: thin;
}

.formation-card-grid::-webkit-scrollbar,
.stage-rail-scroll::-webkit-scrollbar,
.stage-briefing-text::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.formation-card-grid::-webkit-scrollbar-track,
.stage-rail-scroll::-webkit-scrollbar-track,
.stage-briefing-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.42);
}

.formation-card-grid::-webkit-scrollbar-thumb,
.stage-rail-scroll::-webkit-scrollbar-thumb,
.stage-briefing-text::-webkit-scrollbar-thumb {
  background: rgba(39, 223, 243, 0.72);
  border: 2px solid rgba(0, 0, 0, 0.42);
}

.formation-card-grid::after {
  content: none;
  grid-column: 1 / -1;
  height: 24px;
}

.formation-character-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(226, 234, 228, 0.04), rgba(0, 0, 0, 0.32)),
    rgba(3, 5, 5, 0.72);
  border: 1px solid rgba(226, 234, 228, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.32);
}

.formation-character-card.selected {
  border-color: rgba(246, 213, 121, 0.92);
  box-shadow: 0 0 0 2px rgba(246, 213, 121, 0.34), 0 16px 28px rgba(0, 0, 0, 0.42);
}

.formation-character-card.in-formation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 2px solid rgba(39, 223, 243, 0.76);
}

.formation-card-portrait {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, transparent 48%, rgba(5, 7, 7, 0.72));
  background-repeat: no-repeat;
  filter: saturate(0.95);
}

.formation-card-ribbon {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 43%;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 34px;
  color: #071010;
  background: rgba(157, 224, 50, 0.88);
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(157, 224, 50, 0.22);
}

.formation-card-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  pointer-events: none;
  background: transparent;
}

.formation-card-body strong {
  min-width: 0;
  overflow: hidden;
  color: #f5f7f5;
  font-size: 15px;
  text-overflow: ellipsis;
  text-shadow: 0 2px 3px #000, 0 0 6px #000, 0 0 12px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.formation-card-body span {
  grid-column: 2;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 900;
  text-align: right;
  text-shadow: 0 2px 3px #000, 0 0 6px #000, 0 0 12px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.formation-team-dock {
  min-height: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 164px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.1), transparent 54%),
    rgba(0, 0, 0, 0.56);
  border: 1px solid rgba(226, 234, 228, 0.18);
}

.formation-team-label {
  display: grid;
  gap: 2px;
  color: #f5f7f5;
}

.formation-team-label span {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.formation-team-label strong {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1px;
}

.formation-team-slots {
  display: grid;
  grid-template-columns: repeat(3, 104px);
  gap: 10px;
  align-items: center;
}

.formation-team-slot {
  position: relative;
  min-width: 0;
  min-height: 100px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.formation-team-slot.selected .formation-chibi {
  filter: drop-shadow(0 0 12px rgba(246, 213, 121, 0.78));
}

/* 順番入れ替えのドラッグ。タッチでもブラウザにジェスチャを取られないようにする。 */
.formation-team-slot.filled {
  touch-action: none;
}

.formation-team-slot.reordering {
  z-index: 3;
  cursor: grabbing;
  /* button 既定の overflow:hidden を解除して、掴んだちびキャラを枠の外へ出す。 */
  overflow: visible;
}

.formation-team-slot.reordering .formation-chibi {
  /* 掴んでいる間は前進モーションの絵に差し替える。 */
  --battle-chibi-image: var(--chibi-advance-image, var(--chibi-neutral-image, var(--chibi-image)));
  transform:
    translate(var(--reorder-shift, 0px), calc(-16px + var(--reorder-lift, 0px)))
    scale(1.2);
  filter:
    drop-shadow(0 0 14px rgba(39, 223, 243, 0.85))
    drop-shadow(0 14px 10px rgba(0, 0, 0, 0.55));
}

/* 編成欄の外へ出している間。離せば編成から外れることを赤く示す。 */
.formation-team-slot.discarding .formation-chibi {
  opacity: 0.72;
  filter:
    grayscale(0.45)
    drop-shadow(0 0 16px rgba(255, 96, 96, 0.95))
    drop-shadow(0 14px 10px rgba(0, 0, 0, 0.55));
}

.formation-team-slot.reorder-target::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px dashed rgba(39, 223, 243, 0.85);
  border-radius: 6px;
  background: rgba(39, 223, 243, 0.14);
  pointer-events: none;
}

.formation-team-slot span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  color: #f5f7f5;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 8px #000;
}

.formation-chibi {
  width: 104px;
  height: 90px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(39, 223, 243, 0.28)) drop-shadow(0 14px 8px rgba(0, 0, 0, 0.42));
}

.formation-empty-dot {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  color: rgba(226, 234, 228, 0.66);
  background: radial-gradient(circle, rgba(226, 234, 228, 0.28), rgba(226, 234, 228, 0.08));
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
}

.formation-team-actions {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
}

.formation-team-actions .formation-status-action {
  min-height: 38px;
}

.formation-status-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.08), transparent 48%),
    rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(226, 234, 228, 0.18);
}

.formation-status-top {
  min-height: 0;
  display: grid;
  grid-template-rows: auto;
}

.formation-status-art {
  min-height: 0;
  background-image: linear-gradient(180deg, transparent 58%, rgba(5, 7, 7, 0.82));
  background-repeat: no-repeat;
  border: 1px solid rgba(226, 234, 228, 0.22);
}

.formation-status-id {
  display: grid;
  gap: 5px;
}

.formation-status-namebar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.formation-status-id h3 {
  margin: 0;
  color: #f5f7f5;
  font-size: 28px;
}

.formation-status-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.formation-status-action {
  min-width: 0;
  min-height: 30px;
  justify-content: center;
  padding: 0 8px;
  color: var(--cyan);
  background: rgba(0, 0, 0, 0.64);
  border: 1px solid rgba(39, 223, 243, 0.36);
  font-size: 18px;
  font-weight: 900;
}

.formation-status-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.formation-status-action:active,
.formation-team-slot:active:not(.reordering) .formation-chibi {
  transform: translateY(1px);
}

.formation-status-id p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-viewport] .formation-status-panel .stat-grid,
body[data-viewport] .hangar-stat-readout .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-viewport] .formation-status-panel .stat,
body[data-viewport] .hangar-stat-readout .stat {
  padding: 5px 7px;
  font-size: 15px;
}

.formation-status-ability {
  display: grid;
  gap: 7px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.035), transparent 70%),
    #0b0f0d;
  border: 1px solid rgba(226, 234, 228, 0.16);
  border-radius: 4px;
}

.formation-ability-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
  min-width: 0;
  padding: 6px 7px;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.08), transparent 48%),
    rgba(10, 16, 14, 0.9);
  border: 1px solid rgba(226, 234, 228, 0.13);
  border-radius: 4px;
}

.formation-ability-kind {
  padding-top: 1px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 900;
}

.formation-ability-row strong {
  min-width: 0;
  overflow: hidden;
  color: #f3f5f3;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formation-ability-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.panel-headline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 234, 228, 0.18);
}

.panel-headline strong {
  color: #f5f7f5;
  font-size: 18px;
}

.roster-thumb {
  height: 58px;
  border: 1px solid rgba(226, 234, 228, 0.22);
  background-image: linear-gradient(180deg, transparent 54%, rgba(6, 8, 8, 0.82));
  background-repeat: no-repeat;
}

.equipment-workbench {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hangar-slot-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background:
    linear-gradient(90deg, rgba(213, 161, 58, 0.12), transparent 42%, rgba(39, 223, 243, 0.1)),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(226, 234, 228, 0.16);
}

.hangar-slot-carousel::before {
  content: none;
  position: absolute;
  left: 49px;
  top: 4px;
  z-index: 3;
  width: 136px;
  height: calc(100% - 8px);
  pointer-events: none;
  background-image: var(--ui-slot-selector);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 8px rgba(246, 213, 58, 0.24));
}

.carousel-arrow {
  min-width: 0;
  min-height: 72px;
  padding: 0;
  justify-content: center;
  color: #061010;
  background: linear-gradient(180deg, rgba(246, 213, 121, 0.95), rgba(213, 161, 58, 0.82));
  border-color: rgba(246, 213, 121, 0.82);
  font-size: 20px;
  box-shadow: 0 0 16px rgba(213, 161, 58, 0.2);
}

.slot-carousel-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 5);
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding: 0;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
}

.slot-carousel-track::-webkit-scrollbar {
  display: none;
}

.slot-carousel-track.dragging {
  cursor: grabbing;
}

.hangar-slot-tile {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-rows: minmax(54px, 1fr);
  padding: 16px 6px 6px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.28), rgba(39, 223, 243, 0.12)),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(39, 223, 243, 0.34);
  position: relative;
}

.hangar-slot-tile.selected {
  background:
    linear-gradient(180deg, rgba(246, 213, 121, 0.9), rgba(213, 161, 58, 0.5)),
    rgba(0, 0, 0, 0.26);
  border-color: rgba(246, 213, 121, 0.92);
  box-shadow: 0 0 18px rgba(213, 161, 58, 0.24);
}

.hangar-slot-tile .equipment-art {
  min-height: 54px;
}

.hangar-slot-tile .hangar-slot-empty-art {
  display: grid;
  place-items: center;
  min-height: 54px;
  color: rgba(226, 234, 228, 0.64);
  background: rgba(5, 10, 10, 0.24);
  border: 1px solid rgba(226, 234, 228, 0.16);
  font-size: 30px;
  font-weight: 700;
}

.hangar-slot-tile span {
  position: absolute;
  top: 7px;
  left: 5px;
  /* WEAPON / OPTIONS がタイル幅（約75px）に収まらず見切れていたため、
     右端も固定して縮め、想定外に長いラベルが来ても文字が切れず「…」で済むようにする。 */
  right: 4px;
  z-index: 1;
  overflow: hidden;
  color: rgba(226, 234, 228, 0.78);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.hangar-slot-tile.selected span {
  color: #f5f7f5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

.hangar-parts-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  position: relative;
}

.hangar-parts-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding: 8px 10px;
  background: rgba(226, 234, 228, 0.72);
  color: #071010;
}

.hangar-parts-head .panel-kicker {
  color: rgba(5, 10, 10, 0.62);
}

.hangar-parts-head strong {
  font-size: 16px;
}

.hangar-parts-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding-right: 3px;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.hangar-parts-list::-webkit-scrollbar {
  display: none;
}

.hangar-parts-list.dragging {
  cursor: grabbing;
}

.hangar-part-row {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 0;
  text-align: left;
  background: rgba(226, 234, 228, 0.72);
  border: 1px solid rgba(226, 234, 228, 0.18);
  color: #071010;
}

.hangar-part-row.selected {
  background: linear-gradient(90deg, rgba(246, 213, 121, 0.92), rgba(226, 234, 228, 0.76));
  border-color: rgba(246, 213, 121, 0.92);
  box-shadow: inset 4px 0 0 rgba(213, 161, 58, 0.95);
}

.hangar-part-row .equipment-art {
  min-height: 94px;
  border: 0;
  border-right: 1px solid rgba(5, 10, 10, 0.18);
  background-color: rgba(39, 223, 243, 0.28);
}

.hangar-part-row .equipment-empty-art {
  display: grid;
  place-items: center;
  min-height: 68px;
  color: rgba(226, 234, 228, 0.86);
  font-size: 30px;
  font-weight: 700;
  background: rgba(5, 10, 10, 0.12);
}

.hangar-part-row.selected .equipment-empty-art {
  color: #071010;
}

.hangar-part-info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 8px 6px 0;
}

.hangar-part-info strong {
  color: #071010;
  font-size: 16px;
}

.hangar-part-info span {
  color: #071010;
  font-size: 18px;
  font-weight: 800;
}

.hangar-part-info em {
  overflow: hidden;
  color: rgba(5, 10, 10, 0.72);
  font-size: 18px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hangar-part-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hangar-part-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hangar-part-info .part-rarity {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(111, 230, 244, 0.42);
  color: #8deefa;
  background: rgba(24, 124, 140, 0.18);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.hangar-part-info .part-rarity.rarity-rare {
  border-color: rgba(246, 213, 121, 0.55);
  color: #f6d579;
  background: rgba(193, 145, 43, 0.16);
}

.hangar-part-info .part-rarity.rarity-prototype {
  border-color: rgba(218, 147, 255, 0.62);
  color: #e6b2ff;
  background: rgba(137, 58, 176, 0.18);
}

.hangar-part-info .part-drop-hint {
  overflow: hidden;
  color: rgba(226, 234, 228, 0.55);
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-profile-summary {
  margin: 4px 0 0;
  padding: 7px 9px;
  border-left: 2px solid rgba(39, 223, 243, 0.62);
  color: rgba(226, 234, 228, 0.76);
  background: rgba(39, 223, 243, 0.06);
  font-size: 13px;
  line-height: 1.45;
}

.hangar-preview-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  background:
    linear-gradient(90deg, transparent 48%, rgba(39, 223, 243, 0.08)),
    rgba(0, 0, 0, 0.24);
}

.hangar-character-stage {
  position: relative;
  min-height: 214px;
  background:
    radial-gradient(circle at 60% 35%, rgba(226, 234, 228, 0.12), transparent 38%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
}

.hangar-character-art {
  position: absolute;
  inset: 0 2% 0 2%;
  background-image: linear-gradient(180deg, transparent 62%, rgba(5, 7, 7, 0.58));
  background-repeat: no-repeat;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.52));
}

.hangar-stat-readout {
  display: grid;
  grid-template-columns: minmax(120px, 0.65fr) minmax(260px, 1.35fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  background: rgba(226, 234, 228, 0.72);
  color: #071010;
  backdrop-filter: blur(4px);
}

/* Phone landscape command screens: keep Formation, Equipment and AI inside the 16:9 play frame. */
body[data-viewport="mobile-landscape"]:not([data-route="battle"]) .app-shell {
  padding: 6px 0;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .topbar {
  min-height: 42px;
  padding: 4px 8px;
  gap: 8px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .level-ring {
  width: 34px;
  height: 34px;
  font-size: 16px;
  border-width: 1px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .brand h1 {
  font-size: 15px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .brand span,
body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .resource-chip {
  display: none;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .top-tools,
body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .resource-cluster {
  gap: 6px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .tool-icon {
  min-width: 32px;
  min-height: 28px;
  padding: 0 7px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"]) .top-back-button {
  min-width: 46px;
  min-height: 28px;
  padding: 0 7px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"]:is([data-route="formation"], [data-route="hangar"], [data-route="ai"], [data-route="stages"]) .screen {
  height: 100%;
  max-height: none;
  margin-top: 0;
  padding: 7px 8px 8px;
  grid-template-rows: 30px minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
}

body[data-viewport="mobile-landscape"] .command-back-row {
  min-height: 30px;
}

body[data-viewport="mobile-landscape"] .command-back-button {
  min-width: 58px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .hangar-console {
  height: 100%;
  min-height: 0;
  gap: 8px;
  overflow: hidden;
}

body[data-viewport="mobile-landscape"] .hangar-console {
  grid-template-columns: 380px minmax(0, 1fr);
}

body[data-viewport="mobile-landscape"] .equipment-workbench,
body[data-viewport="mobile-landscape"] .hangar-preview-card {
  min-height: 0;
  overflow: hidden;
}

body[data-viewport="mobile-landscape"] .panel-headline {
  margin-bottom: 6px;
  padding-bottom: 5px;
}

body[data-viewport="mobile-landscape"] .panel-headline strong {
  font-size: 20px;
}

body[data-viewport="mobile-landscape"] .panel-kicker {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .roster-thumb {
  height: 42px;
}

body[data-viewport="mobile-landscape"] .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

body[data-viewport="mobile-landscape"] .stat {
  padding: 4px 6px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-card-console {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 8px;
}

body[data-viewport="mobile-landscape"] .formation-card-board {
  grid-template-rows: 34px minmax(0, 1fr) 78px;
  gap: 7px;
}

body[data-viewport="mobile-landscape"] .formation-card-head {
  padding-bottom: 4px;
}

body[data-viewport="mobile-landscape"] .formation-card-head em {
  font-size: 19px;
}

body[data-viewport="mobile-landscape"] .formation-card-grid {
  gap: 6px;
  grid-auto-rows: 134px;
  padding-right: 5px;
}

body[data-viewport="mobile-landscape"] .formation-character-card {
  display: block;
}

body[data-viewport="mobile-landscape"] .formation-card-ribbon {
  left: 6px;
  right: 6px;
  min-height: 26px;
  font-size: 19px;
}

body[data-viewport="mobile-landscape"] .formation-card-body {
  padding: 6px;
}

body[data-viewport="mobile-landscape"] .formation-card-body strong {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-card-body span {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-team-dock {
  grid-template-columns: 44px minmax(0, 1fr) 132px;
  gap: 6px;
  padding: 5px 7px;
}

body[data-viewport="mobile-landscape"] .formation-team-label span {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-team-slots {
  grid-template-columns: repeat(3, 62px);
  gap: 6px;
}

body[data-viewport="mobile-landscape"] .formation-team-slot {
  min-height: 58px;
}

body[data-viewport="mobile-landscape"] .formation-team-slot span {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-chibi {
  width: 62px;
  height: 52px;
}

body[data-viewport="mobile-landscape"] .formation-empty-dot {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-team-actions {
  gap: 4px;
}

body[data-viewport="mobile-landscape"] .formation-team-actions .formation-status-action {
  min-height: 30px;
  padding: 0 4px;
}

body[data-viewport="mobile-landscape"] .formation-status-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 5px;
  padding: 7px;
}

body[data-viewport="mobile-landscape"] .formation-status-top {
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .formation-status-id {
  gap: 4px;
}

body[data-viewport="mobile-landscape"] .formation-status-id h3 {
  font-size: 20px;
}

body[data-viewport="mobile-landscape"] .formation-status-namebar {
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .formation-status-actions {
  gap: 4px;
}

body[data-viewport="mobile-landscape"] .formation-status-action {
  min-height: 26px;
  padding: 0 5px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-status-id p {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-status-panel .stat-grid,
body[data-viewport="mobile-landscape"] .hangar-stat-readout .stat-grid {
  gap: 4px;
  margin-top: 0;
}

body[data-viewport="mobile-landscape"] .formation-status-panel .stat,
body[data-viewport="mobile-landscape"] .hangar-stat-readout .stat {
  padding: 4px 6px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-status-ability {
  gap: 4px;
  padding: 3px;
}

body[data-viewport="mobile-landscape"] .formation-ability-row {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1px 5px;
  padding: 4px 5px;
}

body[data-viewport="mobile-landscape"] .formation-ability-kind,
body[data-viewport="mobile-landscape"] .formation-ability-row strong,
body[data-viewport="mobile-landscape"] .formation-ability-row p {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .formation-ability-row p {
  -webkit-line-clamp: 2;
}

body[data-viewport="mobile-landscape"] .equipment-workbench {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .hangar-slot-carousel {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 5px;
  padding: 4px;
}

body[data-viewport="mobile-landscape"] .hangar-slot-carousel::before {
  left: 36px;
  top: 2px;
  width: 102px;
  height: calc(100% - 4px);
}

body[data-viewport="mobile-landscape"] .carousel-arrow {
  min-height: 48px;
  font-size: 16px;
}

body[data-viewport="mobile-landscape"] .slot-carousel-track {
  gap: 5px;
  grid-auto-columns: 96px;
  padding: 0 101px 0 0;
}

body[data-viewport="mobile-landscape"] .hangar-slot-tile {
  min-height: 48px;
  grid-template-rows: minmax(30px, 1fr);
  padding: 4px;
}

body[data-viewport="mobile-landscape"] .hangar-slot-tile .equipment-art {
  min-height: 30px;
}

body[data-viewport="mobile-landscape"] .hangar-slot-tile .hangar-slot-empty-art {
  min-height: 30px;
  font-size: 22px;
}

body[data-viewport="mobile-landscape"] .hangar-parts-head {
  padding: 5px 7px;
}

body[data-viewport="mobile-landscape"] .hangar-parts-head strong {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .hangar-parts-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  overflow-y: auto;
}

body[data-viewport="mobile-landscape"] .hangar-part-row {
  min-height: 48px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .hangar-part-row .equipment-art {
  min-height: 46px;
}

body[data-viewport="mobile-landscape"] .hangar-part-row .equipment-empty-art {
  min-height: 46px;
}

body[data-viewport="mobile-landscape"] .hangar-part-info {
  gap: 1px;
  padding: 4px 5px 4px 0;
}

body[data-viewport="mobile-landscape"] .hangar-part-info strong {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .hangar-part-info span,
body[data-viewport="mobile-landscape"] .hangar-part-info em {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .hangar-character-stage {
  min-height: 176px;
}

body[data-viewport="mobile-landscape"] .hangar-stat-readout {
  grid-template-columns: minmax(118px, 0.62fr) minmax(0, 1.38fr);
  gap: 8px;
  padding: 6px;
}

body[data-viewport="mobile-landscape"] .ai-editor-card {
  gap: 6px;
  padding: 9px;
}

body[data-viewport="mobile-landscape"] select {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-chip-editor {
  height: 100%;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}

body[data-viewport="mobile-landscape"] .ai-loop-column {
  grid-template-rows: 28px minmax(0, 1fr);
  gap: 4px;
  padding: 6px 6px;
  border-width: 2px;
  border-radius: 26px;
}

body[data-viewport="mobile-landscape"] .ai-loop-lanes {
  --loop-lane-gap: 5px;
  --loop-edge: 10px;
}

body[data-viewport="mobile-landscape"] .ai-loop-lane {
  gap: 4px;
}

body[data-viewport="mobile-landscape"] .ai-loop-lanes::before {
  border-width: 3px;
}

body[data-viewport="mobile-landscape"] .ai-loop-arrow {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-loop-slot {
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
}

body[data-viewport="mobile-landscape"] .ai-loop-slot strong {
  font-size: 19px;
}

body[data-viewport="mobile-landscape"] .ai-loop-index,
body[data-viewport="mobile-landscape"] .ai-loop-slot em,
body[data-viewport="mobile-landscape"] .ai-loop-slot-clear {
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-loop-slot-clear {
  min-height: 16px;
  padding: 0 2px;
}

body[data-viewport="mobile-landscape"] .ai-loop-slot em {
  min-height: 16px;
  padding: 1px 4px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-chip-board {
  gap: 5px;
  padding: 7px;
}

body[data-viewport="mobile-landscape"] .ai-board-head {
  grid-template-columns: minmax(0, 1fr);
}

body[data-viewport="mobile-landscape"] .ai-shelf-label {
  padding: 3px 7px;
  font-size: 16px;
}

body[data-viewport="mobile-landscape"] .ai-action-shelf,
body[data-viewport="mobile-landscape"] .ai-condition-shelf {
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .ai-action-chip-row {
  gap: 5px;
  padding-bottom: 4px;
  border-bottom-width: 2px;
}

body[data-viewport="mobile-landscape"] .action-chip {
  min-height: 48px;
  gap: 2px;
  padding: 4px;
  border-radius: 9px;
}

body[data-viewport="mobile-landscape"] .action-chip strong {
  font-size: 21px;
}

body[data-viewport="mobile-landscape"] .action-chip span {
  font-size: 18px;
}

.ai-loop-slot-clear {
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 3px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  background-image: var(--ui-icon-clear), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 9px 9px, 100% 100%;
  font-size: 0;
}

.ai-loop-slot-clear:disabled {
  opacity: 0;
  pointer-events: none;
}

.ai-condition-category-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}

.ai-category-chip {
  min-height: 36px;
  padding: 4px 8px;
  color: #071010;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.ai-category-chip.condition-amber {
  background: linear-gradient(180deg, rgba(255, 224, 120, 0.9), rgba(212, 165, 58, 0.72));
}

.ai-category-chip.condition-cyan {
  background: linear-gradient(180deg, rgba(92, 244, 244, 0.9), rgba(38, 203, 210, 0.72));
}

.ai-category-chip.selected {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 16px rgba(246, 213, 121, 0.28);
}

.ai-condition-detail {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(226, 234, 228, 0.14);
}

.ai-condition-option-row,
.ai-condition-direction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-condition-option,
.ai-direction-chip {
  width: 190px;
  flex: 0 0 190px;
  min-height: 34px;
  padding: 4px 14px;
  color: #071010;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.ai-condition-option.condition-amber,
.ai-direction-chip.condition-amber {
  background: linear-gradient(180deg, rgba(255, 224, 120, 0.9), rgba(212, 165, 58, 0.72));
}

.ai-condition-option.condition-cyan,
.ai-direction-chip.condition-cyan {
  background: linear-gradient(180deg, rgba(92, 244, 244, 0.9), rgba(38, 203, 210, 0.72));
}

.ai-condition-option.selected,
.ai-direction-chip.selected {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 16px rgba(246, 213, 121, 0.3);
}

.ai-condition-slider {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 2px 6px 0;
}

.ai-slider-readout {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(120px, auto) minmax(80px, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.ai-slider-readout span:last-child {
  text-align: right;
}

.ai-slider-value {
  color: #fff3a5;
  font-size: 22px;
  text-align: center;
  text-shadow: 0 0 12px rgba(246, 213, 121, 0.42);
}

.ai-slider-track {
  position: relative;
  min-width: 0;
  height: 38px;
  display: grid;
  align-items: center;
}

.ai-range-slider {
  --range-progress: 50%;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 32px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

.ai-range-slider::-webkit-slider-runnable-track {
  height: 10px;
  border: 1px solid rgba(226, 234, 228, 0.46);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(39, 223, 243, 0.16);
}

.ai-range-slider.fill-left::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #ffe000 0 var(--range-progress), #21bdd1 var(--range-progress) 100%);
}

.ai-range-slider.fill-right::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #21bdd1 0 var(--range-progress), #ffe000 var(--range-progress) 100%);
}

.ai-range-slider::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(255, 255, 238, 0.98);
  border-radius: 50%;
  background: #ffe000;
  box-shadow: 0 0 0 3px rgba(246, 213, 121, 0.2), 0 0 16px rgba(246, 213, 121, 0.42);
}

.ai-range-slider.thumb-cyan::-webkit-slider-thumb {
  border-color: rgba(232, 255, 255, 0.98);
  background: #21bdd1;
  box-shadow: 0 0 0 3px rgba(39, 223, 243, 0.2), 0 0 16px rgba(39, 223, 243, 0.46);
}

.ai-range-slider::-moz-range-track {
  height: 10px;
  border: 1px solid rgba(226, 234, 228, 0.46);
  border-radius: 2px;
}

.ai-range-slider.fill-left::-moz-range-track {
  background: linear-gradient(90deg, #ffe000 0 var(--range-progress), #21bdd1 var(--range-progress) 100%);
}

.ai-range-slider.fill-right::-moz-range-track {
  background: linear-gradient(90deg, #21bdd1 0 var(--range-progress), #ffe000 var(--range-progress) 100%);
}

.ai-range-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 238, 0.98);
  border-radius: 50%;
  background: #ffe000;
  box-shadow: 0 0 0 3px rgba(246, 213, 121, 0.2), 0 0 16px rgba(246, 213, 121, 0.42);
}

.ai-range-slider.thumb-cyan::-moz-range-thumb {
  border-color: rgba(232, 255, 255, 0.98);
  background: #21bdd1;
  box-shadow: 0 0 0 3px rgba(39, 223, 243, 0.2), 0 0 16px rgba(39, 223, 243, 0.46);
}

.ai-range-slider:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.94);
  outline-offset: 4px;
}

.ai-slider-ticks {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.ai-slider-ticks i {
  width: 1px;
  height: 20px;
  background: rgba(226, 234, 228, 0.38);
  box-shadow: 0 0 5px rgba(39, 223, 243, 0.18);
}

.ai-condition-hint,
.ai-condition-preview {
  color: var(--muted);
  font-size: 18px;
}

.ai-condition-preview {
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(226, 234, 228, 0.14);
}

body[data-viewport="mobile-landscape"] .ai-loop-slot-clear {
  min-width: 15px;
  min-height: 15px;
  background-size: 8px 8px, 100% 100%;
}

body[data-viewport="mobile-landscape"] .ai-condition-category-row {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 5px;
}

body[data-viewport="mobile-landscape"] .ai-category-chip {
  min-height: 38px;
  padding: 4px 8px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-condition-detail {
  padding: 6px 7px;
  gap: 6px;
}

body[data-viewport="mobile-landscape"] .ai-condition-option,
body[data-viewport="mobile-landscape"] .ai-direction-chip {
  min-height: 38px;
  padding: 4px 12px;
  font-size: 18px;
}

body[data-viewport="mobile-landscape"] .ai-condition-hint,
body[data-viewport="mobile-landscape"] .ai-condition-preview {
  font-size: 18px;
}

.ai-editor-card {
  display: grid;
  gap: 10px;
}

.ai-chip-editor {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 12px;
}

body[data-route="ai"] .screen,
body[data-route="hangar"] .screen,
body[data-route="formation"] .screen,
body[data-route="stages"] .screen {
  height: 100%;
  max-height: 100%;
  margin-top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

body[data-route="ai"] .screen,
body[data-route="hangar"] .screen,
body[data-route="formation"] .screen {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-route="home"] .screen {
  height: 100%;
}

.ai-loop-column {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  gap: 5px;
  padding: 10px 9px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.14), transparent 68%),
    rgba(0, 0, 0, 0.34);
  border: 3px solid rgba(89, 238, 238, 0.86);
  border-radius: 38px;
  box-shadow: inset 0 0 20px rgba(39, 223, 243, 0.1), 0 0 18px rgba(39, 223, 243, 0.08);
}

/* 12 slots form a counter-clockwise loop: 01-06 run down the left lane,
   07-12 run up the right lane, and the top edge returns to 01. */
.ai-loop-lanes {
  --loop-lane-gap: 8px;
  --loop-edge: 12px;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--loop-lane-gap);
  padding: var(--loop-edge) 0;
}

/* The loop track runs through the centre of both lanes. */
.ai-loop-lanes::before {
  content: "";
  position: absolute;
  top: calc(var(--loop-edge) / 2 - 2px);
  bottom: calc(var(--loop-edge) / 2 - 2px);
  left: calc((100% - var(--loop-lane-gap)) / 4 - 2px);
  right: calc((100% - var(--loop-lane-gap)) / 4 - 2px);
  border: 4px solid rgba(89, 238, 238, 0.86);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(39, 223, 243, 0.28), inset 0 0 10px rgba(39, 223, 243, 0.16);
}

.ai-loop-lane {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

/* The second lane is read bottom to top: 07 at the bottom, 12 at the top. */
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(1) { grid-row: 6; }
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(2) { grid-row: 5; }
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(3) { grid-row: 4; }
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(4) { grid-row: 3; }
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(5) { grid-row: 2; }
.ai-loop-lane.lane-upward > .ai-loop-slot:nth-child(6) { grid-row: 1; }

/* Direction arrowheads on the bottom (left to right) and top (right to left) edges. */
.ai-loop-flow {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 16px;
  height: 16px;
  background: rgba(89, 238, 238, 0.96);
  filter: drop-shadow(0 0 4px rgba(39, 223, 243, 0.5));
}

.ai-loop-flow.flow-bottom {
  bottom: calc(var(--loop-edge) / 2 - 8px);
  transform: translateX(-50%);
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.ai-loop-flow.flow-top {
  top: calc(var(--loop-edge) / 2 - 8px);
  transform: translateX(-50%);
  clip-path: polygon(85% 0, 0 50%, 85% 100%);
}

.ai-loop-arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #062020;
  background: rgba(89, 238, 238, 0.94);
  font-weight: 900;
}

.ai-loop-arrow {
  border-radius: 18px 18px 8px 8px;
  font-size: 24px;
}

.ai-loop-slot {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "index glyph"
    "condition condition";
  gap: 3px;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(92, 244, 244, 0.96), rgba(38, 203, 210, 0.9));
  border: 1px solid rgba(226, 234, 228, 0.28);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
}

.ai-loop-slot.active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 20px rgba(246, 213, 121, 0.26);
}

.ai-loop-slot.empty {
  background: rgba(226, 234, 228, 0.08);
  border-style: dashed;
  opacity: 0.82;
}

.ai-loop-index {
  grid-area: index;
  color: #062020;
  font-size: 18px;
  font-weight: 900;
}

.ai-loop-slot strong {
  grid-area: glyph;
  display: grid;
  place-items: center;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(3, 6, 6, 0.45);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.ai-loop-slot.empty .ai-loop-index {
  color: rgba(226, 234, 228, 0.62);
}

.ai-loop-slot.empty strong {
  min-width: 0;
  overflow: hidden;
  background: none;
  color: rgba(226, 234, 228, 0.42);
  font-size: 18px;
}

.ai-loop-slot em {
  grid-area: condition;
  min-width: 0;
  overflow: hidden;
  display: block;
  min-height: 18px;
  padding: 2px 6px;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
}

.ai-loop-slot-clear {
  min-width: 0;
  min-height: 24px;
  padding: 0 4px;
  justify-content: center;
  color: #f5f7f5;
  background: rgba(5, 5, 8, 0.5);
  border-color: rgba(226, 234, 228, 0.26);
  font-size: 18px;
  font-weight: 900;
}

.ai-loop-slot-clear:disabled {
  opacity: 0.28;
}

.ai-chip-board {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 238px 150px;
  gap: 8px;
  overflow: hidden;
}

.ai-condition-shelf {
  min-height: 0;
  grid-template-rows: 45px 138px 38px;
  overflow: hidden;
  padding-right: 6px;
}

.ai-character-summary {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 180px 290px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  padding: 14px 8px 2px;
  background-image:
    var(--ui-divider-line),
    linear-gradient(90deg, rgba(39, 223, 243, 0.055), transparent 72%);
  background-repeat: no-repeat;
  background-position: left top, left top;
  background-size: 100% 10px, 100% 100%;
}

.ai-character-unit {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.ai-character-chibi.formation-chibi {
  width: 100%;
  height: 100%;
  min-height: 78px;
  background-position: center;
  background-size: contain;
}

.ai-character-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 5px 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.26));
}

.ai-character-identity strong {
  min-width: 0;
  overflow: hidden;
  color: #f5f7f5;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-character-identity span {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 900;
}

.ai-character-stats {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: center;
  overflow: hidden;
}

.ai-character-stats .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  margin: 0;
}

body[data-viewport] .ai-character-stats .stat {
  gap: 5px;
  padding: 2px 4px;
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.15;
}

.ai-character-abilities {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
}

.ai-character-abilities .formation-ability-row {
  min-width: 0;
  min-height: 0;
  align-content: start;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px 6px;
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid rgba(226, 234, 228, 0.13);
  border-image: none;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.08), transparent 58%),
    rgba(3, 7, 7, 0.5);
  box-shadow: none;
}

.ai-character-abilities .formation-ability-row p {
  font-size: 14px;
  line-height: 1.3;
  -webkit-line-clamp: 4;
}

.ai-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.ai-action-shelf,
.ai-condition-shelf {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.ai-shelf-label {
  justify-self: start;
  padding: 3px 8px;
  color: #071010;
  background: rgba(226, 234, 228, 0.92);
  font-size: 18px;
  font-weight: 900;
}

.ai-action-chip-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 0;
  background-image: var(--ui-divider-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 12px;
}

.ai-palette-chip {
  min-width: 0;
  justify-content: center;
  text-align: center;
  border: 0;
  touch-action: none;
}

.action-chip {
  min-height: 76px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(92, 244, 244, 0.96), rgba(38, 203, 210, 0.9));
}

.action-chip strong {
  display: grid;
  place-items: center;
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(3, 6, 6, 0.5);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.action-chip span {
  min-width: 0;
  overflow: hidden;
  color: #071010;
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-palette-chip.selected {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 20px rgba(246, 213, 121, 0.22);
}

.ai-edit-hint {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(226, 234, 228, 0.18);
}

.ai-edit-hint strong {
  color: var(--amber);
  font-size: 18px;
}

.ai-edit-hint span {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;
}

.ai-edit-hint em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-condition-shelf {
  overflow-y: auto;
  padding-right: 6px;
  align-content: start;
}

.ai-condition-group {
  display: grid;
  gap: 6px;
  padding: 4px 0 9px;
  border-bottom: 2px dotted rgba(226, 234, 228, 0.78);
}

.ai-condition-group > strong {
  color: #f5f7f5;
  font-size: 18px;
  font-weight: 800;
}

.ai-condition-chip-row {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, max-content);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.condition-chip {
  min-height: 32px;
  min-width: 104px;
  padding: 4px 14px;
  border: 8px solid transparent;
  border-image-slice: 28 fill;
  border-image-width: 8px;
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.condition-chip.condition-amber {
  border-image-source: var(--ui-condition-amber);
  background-image: linear-gradient(180deg, rgba(255, 224, 120, 0.96), rgba(212, 165, 58, 0.9));
  color: #071010;
}

.condition-chip.condition-cyan {
  border-image-source: var(--ui-condition-cyan);
  background-image: linear-gradient(180deg, rgba(92, 244, 244, 0.96), rgba(38, 203, 210, 0.9));
  color: #071010;
}

.ai-slot-condition.condition-amber {
  background: linear-gradient(90deg, rgba(255, 224, 120, 0.88), rgba(212, 165, 58, 0.58));
  color: #071010;
}

.ai-slot-condition.condition-cyan {
  background: linear-gradient(90deg, rgba(92, 244, 244, 0.9), rgba(38, 203, 210, 0.58));
  color: #071010;
}

body[data-viewport="mobile-landscape"] .condition-chip {
  min-width: 82px;
}

.ai-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 12px;
  pointer-events: none;
  color: #fff;
  background: rgba(3, 8, 8, 0.84);
  border: 2px solid rgba(89, 238, 238, 0.92);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(89, 238, 238, 0.32), 0 16px 28px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}

/* Legacy UI layout layer. Image tokens are now CSS values; ui.css owns the
   flat surfaces and glyphs without changing routing, autosave or battle logic. */
.home-ops,
.squad-dock,
.card,
.formation-card-board,
.formation-status-panel,
.formation-team-dock,
.equipment-workbench,
.ai-chip-editor,
.ai-chip-board,
.mobile-qr-modal,
.retreat-confirm-modal,
.battle-unit-detail,
.unit-panel {
  border: 14px solid transparent;
  border-image-source: var(--ui-panel-frame);
  border-image-slice: 34 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  background-color: rgba(4, 7, 7, 0.82);
  background-image:
    linear-gradient(180deg, rgba(39, 223, 243, 0.035), transparent 52%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 360px 360px;
}

.battle-result-modal {
  border: 18px solid transparent;
  border-image-source: var(--ui-popup-frame);
  border-image-slice: 38 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  background-color: rgba(4, 7, 7, 0.9);
  background-image:
    linear-gradient(180deg, rgba(246, 213, 121, 0.08), transparent 56%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 360px 360px;
}

button:where(:not(.condition-chip):not(.action-chip):not(.ai-category-chip):not(.ai-condition-option):not(.ai-direction-chip):not(.ai-loop-slot-clear):not(.stage-node)),
.tool-icon,
.resource-chip,
.hud-button,
.formation-status-action,
.carousel-arrow {
  border: 10px solid transparent;
  border-image-source: var(--ui-button-normal);
  border-image-slice: 24 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  background-color: transparent;
  background-image: var(--ui-button-normal);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

button:where(:not(.condition-chip):not(.action-chip):not(.ai-category-chip):not(.ai-condition-option):not(.ai-direction-chip):not(.ai-loop-slot-clear):not(.stage-node)):hover,
button:where(:not(.condition-chip):not(.action-chip):not(.ai-category-chip):not(.ai-condition-option):not(.ai-direction-chip):not(.ai-loop-slot-clear):not(.stage-node)):focus-visible,
.tool-icon:hover,
.hud-button:hover,
.formation-status-action:hover,
.carousel-arrow:hover {
  border-image-source: var(--ui-button-hover);
  background-image: var(--ui-button-hover);
  outline: 0;
}

button:where(:not(.condition-chip):not(.action-chip):not(.ai-category-chip):not(.ai-condition-option):not(.ai-direction-chip):not(.ai-loop-slot-clear):not(.stage-node)):active,
.tool-icon:active,
.hud-button:active,
.formation-status-action:active,
.carousel-arrow:active {
  border-image-source: var(--ui-button-pressed);
  background-image: var(--ui-button-pressed);
}

button.selected,
button.active,
.bottom-dock-item.active,
.formation-status-action.primary,
.formation-team-slot.selected,
.carousel-slot.selected {
  border-image-source: var(--ui-button-selected);
  background-image: var(--ui-button-selected);
}

.formation-character-card,
.formation-team-slot,
.stat,
.formation-ability-row,
.hangar-slot-tile,
.battle-ability-detail,
.battle-detail-stat {
  border: 10px solid transparent;
  border-image-source: var(--ui-slot-frame);
  border-image-slice: 34 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  background-color: rgba(4, 7, 7, 0.7);
  background-image:
    linear-gradient(90deg, rgba(39, 223, 243, 0.035), transparent 60%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 300px 300px;
}

.formation-character-card.selected,
.formation-character-card.in-formation,
.formation-team-slot.selected,
.hangar-slot-tile.selected {
  border-image-source: var(--ui-slot-selected);
}

.stat-bar,
.hpbar,
.skillbar {
  border: 8px solid transparent;
  border-image-source: var(--ui-gauge-frame);
  border-image-slice: 18 fill;
  border-image-width: 8px;
  border-image-repeat: stretch;
  background-color: transparent;
  background-image: var(--ui-gauge-frame);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.stat-bar i,
.hpbar > span,
.skillbar > i {
  background-image: var(--ui-gauge-fill-cyan);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

.skillbar > i,
.skillbar.full > i {
  background-image: var(--ui-gauge-fill-amber);
}

.panel-headline,
.formation-card-head,
.section-title {
  border-bottom: 0;
  background-image: var(--ui-divider-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 12px;
}

.ui-image-icon {
  --ui-icon-image: var(--ui-icon-settings);
  display: inline-grid;
  place-items: center;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.tool-icon.ui-image-icon {
  min-width: 44px;
  min-height: 36px;
  background-image: var(--ui-icon-image), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 28px 28px, 100% 100%;
}

.tool-icon.ui-image-icon:hover,
.tool-icon.ui-image-icon:focus-visible {
  background-image: var(--ui-icon-image), var(--ui-button-hover);
}

.hud-button.ui-image-icon {
  background-image: var(--ui-icon-image), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 32px 32px, 100% 100%;
}

.modal-close.ui-image-icon,
.carousel-arrow.ui-image-icon {
  background-image: var(--ui-icon-image), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 24px 24px, 100% 100%;
}

.modal-close.ui-image-icon:hover,
.modal-close.ui-image-icon:focus-visible,
.carousel-arrow.ui-image-icon:hover,
.carousel-arrow.ui-image-icon:focus-visible {
  background-image: var(--ui-icon-image), var(--ui-button-hover);
}

.ops-alert.ui-image-icon {
  background-color: transparent;
  background-image: var(--ui-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  border-radius: 0;
  color: transparent;
  font-size: 0;
}

.bottom-icon.ui-image-icon {
  width: 28px;
  height: 28px;
  background-image: var(--ui-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.icon-mail { --ui-icon-image: var(--ui-icon-mail); }
.icon-alert { --ui-icon-image: var(--ui-icon-alert); }
.icon-settings { --ui-icon-image: var(--ui-icon-settings); }
.icon-home { --ui-icon-image: var(--ui-icon-home); }
.icon-team { --ui-icon-image: var(--ui-icon-team); }
.icon-equipment { --ui-icon-image: var(--ui-icon-equipment); }
.icon-operation { --ui-icon-image: var(--ui-icon-operation); }
.icon-ai { --ui-icon-image: var(--ui-icon-ai); }

.resource-chip.ui-resource-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
}

.resource-chip.ui-resource-icon::before,
.ops-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.resource-credit.ui-resource-icon {
  flex-direction: row;
  white-space: nowrap;
}

.resource-credit.ui-resource-icon::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-image: var(--ui-icon-credit);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(39, 223, 243, 0.48));
}
.resource-crystal::before { background-image: var(--ui-icon-crystal); }

.ops-icon {
  background: none;
  border: 0;
}

.ops-icon::before {
  width: 26px;
  height: 26px;
  background-image: var(--ui-icon-alert);
}

.big-action {
  color: #f5f7f5;
  border-left-width: 10px;
  clip-path: none;
}

.big-action strong {
  color: #fff;
  text-shadow: 0 0 12px rgba(39, 223, 243, 0.18);
}

.big-action span {
  color: rgba(226, 234, 228, 0.78);
}

.dock-unit span,
.dock-unit small,
.ops-label strong,
.ops-label small {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.74);
}

.formation-status-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

body[data-viewport] .formation-status-panel .stat-grid,
body[data-viewport] .hangar-stat-readout .stat-grid {
  align-self: start;
  align-content: start;
  gap: 1px 4px;
  margin-top: 0;
  overflow: visible;
}

.formation-status-panel .formation-ability-row,
.hangar-stat-readout .formation-ability-row {
  border-width: 5px;
  border-image-width: 5px;
  padding: 4px 6px;
}

body[data-viewport] .formation-status-panel .stat,
body[data-viewport] .hangar-stat-readout .stat {
  gap: 2px;
  padding: 2px 5px;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 17px;
  line-height: 1.15;
}

body[data-viewport] .formation-status-panel .formation-ability-kind,
body[data-viewport] .hangar-stat-readout .formation-ability-kind {
  font-size: 15px;
}

body[data-viewport] .formation-status-panel .formation-ability-row strong,
body[data-viewport] .hangar-stat-readout .formation-ability-row strong {
  font-size: 16px;
}

body[data-viewport] .formation-status-panel .formation-ability-row p,
body[data-viewport] .hangar-stat-readout .formation-ability-row p {
  font-size: 15px;
}

.formation-status-panel .stat-bar {
  height: 12px;
  border-width: 3px;
  border-image-width: 3px;
}

.formation-status-panel .formation-status-ability,
.hangar-stat-readout .formation-status-ability {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
}

.formation-status-panel .formation-ability-row,
.hangar-stat-readout .formation-ability-row {
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

body[data-viewport="mobile-landscape"] .formation-status-panel .stat-grid,
body[data-viewport="mobile-landscape"] .hangar-stat-readout .stat-grid {
  gap: 1px 4px;
}

body[data-viewport="mobile-landscape"] .formation-status-panel .stat,
body[data-viewport="mobile-landscape"] .hangar-stat-readout .stat {
  gap: 2px;
  padding: 2px 5px;
  font-size: 17px;
  line-height: 1.15;
}

.formation-status-action.primary {
  color: #f5f7f5;
  text-shadow: 0 0 10px rgba(246, 213, 121, 0.22);
}

.hangar-part-row {
  color: #f5f7f5;
}

.hangar-part-row .equipment-art {
  border-right-color: rgba(39, 223, 243, 0.24);
  background-color: rgba(39, 223, 243, 0.08);
}

.hangar-part-info strong {
  color: #fff;
}

.hangar-part-info span {
  color: rgba(226, 234, 228, 0.86);
}

.hangar-part-info em {
  color: rgba(226, 234, 228, 0.68);
}

.hangar-part-row.selected .hangar-part-info strong,
.hangar-part-row.selected .hangar-part-info span,
.hangar-part-row.selected .hangar-part-info em {
  color: #fff;
}

.hangar-stat-readout {
  border: 10px solid transparent;
  border-image-source: var(--ui-panel-frame);
  border-image-slice: 34 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  color: #f5f7f5;
  background-color: rgba(4, 7, 7, 0.82);
  background-image:
    linear-gradient(90deg, rgba(39, 223, 243, 0.06), transparent 62%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 300px 300px;
}

body[data-viewport] .hangar-stat-readout .stat-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Hangar preview: full-height character art with a transparent HUD overlay. */
.hangar-preview-card {
  isolation: isolate;
  grid-template-rows: minmax(0, 1fr);
  background: #020303;
}

.hangar-preview-card .hangar-character-stage,
.hangar-preview-card .hangar-stat-readout {
  grid-area: 1 / 1;
}

.hangar-preview-card .hangar-character-stage {
  z-index: 0;
  min-height: 0;
  background: transparent;
}

.hangar-preview-card .hangar-character-art {
  inset: 0;
  background-image: var(--character-image);
  background-position: center 2%;
  background-size: auto 100%;
  background-color: transparent;
}

.hangar-preview-card .hangar-stat-readout {
  position: relative;
  z-index: 1;
  align-self: end;
  min-height: 230px;
  padding: 46px 14px 10px;
  border: 0;
  border-image: none;
  color: #f5f7f5;
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(2, 3, 3, 0) 0%,
    rgba(2, 3, 3, 0.28) 22%,
    rgba(2, 3, 3, 0.68) 58%,
    rgba(2, 3, 3, 0.86) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backdrop-filter: none;
}

.hangar-character-identity {
  position: absolute;
  top: 8px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: #f5f7f5;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.hangar-character-identity span {
  color: var(--cyan);
  font-size: 18px;
  flex-shrink: 0;
}

.hangar-stat-readout .formation-status-ability,
.hangar-stat-readout .formation-ability-row {
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
}

.hangar-stat-readout .formation-status-ability {
  padding: 0;
}

.hangar-stat-readout .stat,
.hangar-stat-readout .formation-ability-row {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 0 10px rgba(0, 0, 0, 0.88);
}

.formation-card-console .hangar-preview-card .hangar-stat-readout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px;
  padding: 46px 8px 8px;
}

body[data-viewport] .formation-card-console .hangar-stat-readout .stat {
  padding: 1px 2px;
  font-size: 15px;
}

body[data-viewport] .formation-card-console .hangar-stat-readout .formation-status-ability {
  gap: 3px;
  padding: 2px;
}

body[data-viewport] .formation-card-console .hangar-stat-readout .formation-ability-row {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1px 4px;
  padding: 3px 2px;
}

body[data-viewport] .formation-card-console .hangar-stat-readout .formation-ability-kind,
body[data-viewport] .formation-card-console .hangar-stat-readout .formation-ability-row p {
  font-size: 14px;
}

body[data-viewport] .formation-card-console .hangar-stat-readout .formation-ability-row strong {
  font-size: 15px;
}

body[data-viewport="mobile-landscape"] .hangar-preview-card .hangar-stat-readout {
  min-height: 210px;
  padding: 36px 10px 8px;
}

.action-icon {
  display: inline-block;
  line-height: 1;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  color: inherit;
}

.action-icon svg {
  display: block;
  overflow: visible;
}

.action-chip strong .action-icon {
  font-size: 30px;
}

.ai-loop-slot strong .action-icon {
  font-size: 18px;
}

.icon-close { --ui-icon-image: var(--ui-icon-close); }
.icon-chevron-left { --ui-icon-image: var(--ui-icon-chevron-left); }
.icon-chevron-right { --ui-icon-image: var(--ui-icon-chevron-right); }
.icon-notice { --ui-icon-image: var(--ui-icon-notice); }

button.modal-close.ui-image-icon,
button.carousel-arrow.ui-image-icon {
  background-image: var(--ui-icon-image), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 24px 24px, 100% 100%;
}

button.modal-close.ui-image-icon:hover,
button.modal-close.ui-image-icon:focus-visible,
button.carousel-arrow.ui-image-icon:hover,
button.carousel-arrow.ui-image-icon:focus-visible {
  background-image: var(--ui-icon-image), var(--ui-button-hover);
}

.status-badge {
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% 78%;
}

.status-detect {
  background-image: var(--ui-action-detect);
}

.status-guard {
  background-image: var(--ui-action-guard);
}

.ai-loop-slot-clear {
  background-image: var(--ui-icon-clear), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 18px 18px, 100% 100%;
  font-size: 0;
}

.ai-loop-slot-clear:disabled {
  opacity: 0.32;
}

/* Equipment carousel: selection is shown on the card itself, not with an overlay frame. */
.hangar-slot-carousel::before {
  content: none;
  display: none;
}

button.hangar-slot-tile.selected {
  border-image-source: var(--ui-slot-frame);
  border-image-slice: 34 fill;
  border-color: rgba(226, 234, 228, 0.26);
  background-color: rgba(4, 7, 7, 0.7);
  background-image:
    linear-gradient(90deg, rgba(39, 223, 243, 0.035), transparent 60%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 300px 300px;
  box-shadow: 0 0 16px rgba(246, 213, 58, 0.22);
  filter: none;
}

button.hangar-slot-tile.selected:hover,
button.hangar-slot-tile.selected:focus-visible {
  border-image-source: var(--ui-slot-frame);
  border-image-slice: 34 fill;
  background-image:
    linear-gradient(90deg, rgba(39, 223, 243, 0.035), transparent 60%),
    var(--ui-window-surface);
  outline: 0;
}

button.hangar-slot-tile.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(#ffe64a, #ffe64a) top left / 16px 2px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) top right / 16px 2px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) bottom left / 16px 2px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) bottom right / 16px 2px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) top left / 2px 16px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) top right / 2px 16px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) bottom left / 2px 16px no-repeat,
    linear-gradient(#ffe64a, #ffe64a) bottom right / 2px 16px no-repeat;
  filter: drop-shadow(0 0 5px rgba(246, 213, 58, 0.72));
}

button.hangar-slot-tile.selected .equipment-art {
  position: relative;
  z-index: 1;
}

button.hangar-slot-tile.selected .equipment-art {
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04), 0 0 16px rgba(39, 223, 243, 0.08);
  border-color: rgba(226, 234, 228, 0.26);
}

button.hangar-slot-tile.selected span {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.78);
}

/*
 * Character portrait art system.
 * ------------------------------------------------------------------------
 * How to add a brand-new character (4 steps, nothing else in this file
 * or in app.js needs to change - portraitClassFor() derives the class
 * name straight from the character's id in GameData.characters):
 *   1. Add the character's entry to GameData.characters in js/data.js.
 *   2. Drop the art files under assets/images/characters/, e.g.
 *        <any-folder-name>/sprite-sheet.webp  (battle sheet, 3x2 cells)
 *        <any-folder-name>/chibi.webp         (idle thumbnail)
 *        <any-folder-name>/chibi_advance.webp (advance thumbnail)
 *        <any-folder-name>/chibi_attack.webp  (attack thumbnail)
 *      The four files above are generated by tools/build-sprite-sheets.mjs
 *      from assets/sprite-sheets-src/<name>.webp.
 *        <any-folder-name>/standee-on.webp     (VN dialogue art, weapon equipped, transparent PNG)
 *        <any-folder-name>/standee-off.webp    (VN dialogue art, no weapon, transparent PNG)
 *      The per-character folder name doesn't have to match the character's
 *      id - it's just whatever you point --chibi-image/--standee-on-image/
 *      --standee-off-image at below, so using the character's in-story name
 *      (e.g. a katakana name, like the existing ルクス/マウス/マルダー
 *      folders) instead of their internal id is fine. The old top-level
 *      chibi/ folder is legacy and no longer referenced.
 *   3. Add one ".portrait-<id> { --character-image / --chibi-image /
 *      --standee-on-image / --standee-off-image / --character-position }"
 *      block below (copy an existing one and point the url()s at your new
 *      files).
 * Every rule after the .portrait-<id> blocks is generic - it only reads
 * the --character-image/--chibi-image/--standee-on-image/--standee-off-image
 * /--character-position custom properties, so it automatically works for
 * any character id. The scenario screen picks --standee-on-image when the
 * character currently has a main weapon equipped, --standee-off-image
 * otherwise (see renderScenario() in js/app.js). Until the standee files
 * exist for a character, the scenario dialogue screen for that character
 * simply renders no art (no error, just an empty area).
 */
.portrait-elena {
  --character-image: url("../assets/images/characters/ルクス/standee-on.webp?v=18ba3d4a420a");
  --chibi-retreat-image: url("../assets/images/characters/ルクス/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/ルクス/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/ルクス/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/ルクス/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/ルクス/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/ルクス/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: var(--character-image);
  --standee-off-image: url("../assets/images/characters/ルクス/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-kuroha {
  --character-image: url("../assets/images/characters/マウス/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/マウス/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/マウス/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/マウス/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/マウス/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/マウス/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/マウス/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/マウス/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/マウス/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-seina {
  --character-image: url("../assets/images/characters/マルダー/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/マルダー/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/マルダー/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/マルダー/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/マルダー/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/マルダー/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/マルダー/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/マルダー/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/マルダー/standee-off.webp?v=marder-off-flipped-v1");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-elefant {
  --character-image: url("../assets/images/characters/エレファント/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/エレファント/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/エレファント/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/エレファント/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/エレファント/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/エレファント/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/エレファント/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/エレファント/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/エレファント/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-grille {
  --character-image: url("../assets/images/characters/グリレ/standee-on.webp?v=b581dd48fdc9");
  --chibi-retreat-image: url("../assets/images/characters/グリレ/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/グリレ/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/グリレ/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/グリレ/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/グリレ/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/グリレ/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: var(--character-image);
  --standee-off-image: url("../assets/images/characters/グリレ/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-tiger {
  --character-image: url("../assets/images/characters/ティーガ/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/ティーガ/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/ティーガ/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/ティーガ/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/ティーガ/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/ティーガ/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/ティーガ/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/ティーガ/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/ティーガ/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-flamingo {
  --character-image: url("../assets/images/characters/フラミンゴ/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/フラミンゴ/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/フラミンゴ/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/フラミンゴ/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/フラミンゴ/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/フラミンゴ/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/フラミンゴ/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/フラミンゴ/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/フラミンゴ/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-jagdpanther {
  --character-image: url("../assets/images/characters/ヤークトパンター/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/ヤークトパンター/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/ヤークトパンター/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/ヤークトパンター/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/ヤークトパンター/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/ヤークトパンター/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/ヤークトパンター/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/ヤークトパンター/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/ヤークトパンター/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-rammtiger {
  --character-image: url("../assets/images/characters/ラムティーガ/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/ラムティーガ/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/ラムティーガ/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/ラムティーガ/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/ラムティーガ/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/ラムティーガ/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/ラムティーガ/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/ラムティーガ/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/ラムティーガ/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.portrait-leopard {
  --character-image: url("../assets/images/characters/レオパルト/standee-on.webp");
  --chibi-retreat-image: url("../assets/images/characters/レオパルト/chibi_retreat.webp?v=sprite-sheet-6-v3");
  --chibi-neutral-image: url("../assets/images/characters/レオパルト/chibi.webp?v=sprite-sheet-6-v3");
  --chibi-advance-image: url("../assets/images/characters/レオパルト/chibi_advance.webp?v=sprite-sheet-6-v3");
  --chibi-detect-image: url("../assets/images/characters/レオパルト/chibi_detect.webp?v=sprite-sheet-6-v3");
  --chibi-action-image: url("../assets/images/characters/レオパルト/chibi_attack.webp?v=sprite-sheet-6-v3");
  --chibi-melee-image: url("../assets/images/characters/レオパルト/chibi_melee.webp?v=sprite-sheet-6-v3");
  --chibi-image: var(--chibi-neutral-image);
  --standee-on-image: url("../assets/images/characters/レオパルト/standee-on.webp");
  --standee-off-image: url("../assets/images/characters/レオパルト/standee-off.webp");
  --scenario-standee-on-scale: 100%;
  --scenario-standee-off-scale: 100%;
  --character-position: center center;
}

.home-operator.operator-standee {
  background-image: var(--standee-off-image, var(--character-image));
  background-repeat: no-repeat;
  /* 高さ基準で敷き、足元を枠の下端に合わせる。cover にすると縦長の立ち絵が
     枠からはみ出して頭と足が途切れるため使わない。 */
  background-position: center bottom;
  background-size: auto var(--home-standee-scale, 100%);
}

body[data-viewport] .home-operator.operator-standee {
  background-position: center bottom;
  background-size: auto var(--home-standee-scale, 100%);
}

.dock-portrait,
.formation-portrait,
.formation-card-portrait,
.roster-thumb,
.hangar-character-art,
.unit-portrait {
  background-image:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 7, 0.86)),
    var(--character-image);
  background-repeat: no-repeat;
  background-position: center, var(--character-position);
  background-size: auto, contain;
  background-color: #020303;
}

.formation-chibi,
.ally-token {
  background-image: var(--battle-chibi-image, var(--chibi-image));
  background-repeat: no-repeat;
  background-position: var(--character-position);
  background-size: contain;
  background-color: transparent;
}

.lane-unit.has-battle-sprite {
  background-image: none !important;
}

.battle-unit-sprite-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* Battle sprites come from a 6-cell sheet (3 columns x 2 rows, see
   tools/build-sprite-sheets.mjs). The frame has the aspect of one cell and
   clips the sheet; --sheet-col/--sheet-row pick the visible cell. The frame
   is wider than the token so the art keeps the size of the old 627px sprites. */
.battle-unit-sprite-frame {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 123%;
  aspect-ratio: 585 / 504;
  overflow: hidden;
  transform: translate(-50%, var(--sprite-offset-y, 0%)) scale(var(--sprite-scale, 1));
  transform-origin: 50% 100%;
  pointer-events: none;
}

/* パンツァーの待機姿勢を、プレアブル3人の頭頂77px・足元446px
   （585x504の1コマ内）に合わせる。コマ枠だけを補正し、隊列とUIは動かさない。
   全6姿勢で同じ補正を使い、動作による身長や足の動きはそのまま残す。 */
.battle-unit-sprite-frame[data-enemy-type="panzer-scout"] {
  --sprite-scale: 0.9609;
  --sprite-offset-y: 0.6944%;
}

.battle-unit-sprite-frame[data-enemy-type="panzer-assault"] {
  --sprite-scale: 0.8913;
  --sprite-offset-y: -4.6109%;
}

.battle-unit-sprite-frame[data-enemy-type="panzer-vanguard"] {
  --sprite-scale: 0.9365;
  --sprite-offset-y: 0.1989%;
}

.battle-unit-sprite-frame[data-enemy-type="panzer-destroyer"] {
  --sprite-scale: 1.0394;
  --sprite-offset-y: 3.5474%;
}

.battle-unit-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  max-width: none;
  height: 200%;
  transform: translate(
    calc(var(--sheet-col, 1) * -100% / 3),
    calc(var(--sheet-row, 0) * -50%)
  );
  pointer-events: none;
  user-select: none;
}

.battle-unit-sprite.is-unavailable {
  display: none;
}

.lane-unit.has-battle-sprite > .status-badges {
  z-index: 4;
}

.stage-enemy-icon.character-enemy-chibi,
.battle-enemy-icon.character-enemy-chibi {
  background-image: var(--chibi-image);
  background-repeat: no-repeat;
  background-position: var(--character-position);
  background-size: contain;
  background-color: transparent;
  transform: scaleX(-1);
}

.stage-enemy-icon.character-enemy-chibi {
  transform: scaleX(-1);
}

.character-enemy-token {
  background-image: var(--battle-chibi-image, var(--chibi-image));
  background-repeat: no-repeat;
  background-position: var(--character-position);
  background-size: contain;
  background-color: transparent;
  transform: translate(-50%, -50%) scaleX(-1);
  filter: drop-shadow(0 0 8px rgba(255, 83, 78, 0.3)) drop-shadow(0 16px 10px rgba(0, 0, 0, 0.46));
}

.character-enemy-token .unit-overhead {
  top: auto;
  bottom: 0;
  height: auto;
  transform: translate(-50%, -6px) scaleX(-1);
}

.character-enemy-token .status-badges {
  transform: translateX(-50%) scaleX(-1);
}

.roster-thumb,
.formation-card-portrait {
  background-image: var(--character-image);
  background-repeat: no-repeat;
  background-position: var(--character-position);
  background-size: cover;
  background-color: #020303;
}

.formation-character-card .formation-card-portrait {
  background-position: center 10%;
  background-size: 225% auto;
}

.unit-panel .unit-portrait {
  background-image: var(--character-image);
  background-repeat: no-repeat;
  background-position: center 12%;
  background-size: 225% auto;
  background-color: transparent;
}

.battle-info .unit-panel {
  height: 295px;
  min-height: 0;
  max-height: 295px;
  aspect-ratio: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.battle-info .unit-portrait {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
}

body[data-viewport] .unit-panel {
  height: 295px;
  min-height: 0;
  max-height: 295px;
  aspect-ratio: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

body[data-viewport] .battle-info .unit-portrait {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
}

body[data-viewport] .unit-panel h3 {
  font-size: 18px;
}

.hangar-console > .hangar-preview-card {
  border: 0;
  border-image: none;
}

.hangar-console .hangar-stat-readout .stat,
.hangar-console .hangar-stat-readout .stat strong {
  transition: color 140ms ease, text-shadow 140ms ease;
}

.hangar-console .hangar-stat-readout .stat.stat-increase,
.hangar-console .hangar-stat-readout .stat.stat-increase strong {
  color: #42cfff;
  text-shadow: 0 0 10px rgba(66, 207, 255, 0.42), 0 2px 4px rgba(0, 0, 0, 0.98);
}

.hangar-console .hangar-stat-readout .stat.stat-decrease,
.hangar-console .hangar-stat-readout .stat.stat-decrease strong {
  color: #ff5d57;
  text-shadow: 0 0 10px rgba(255, 93, 87, 0.36), 0 2px 4px rgba(0, 0, 0, 0.98);
}

/* Formation screen: roster / focused unit / unit details. */
.formation-card-console,
body[data-viewport="mobile-landscape"] .formation-card-console {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) 360px 320px;
  gap: 12px;
  overflow: visible;
}

body[data-route="formation"] .command-back-row {
  position: relative;
  z-index: 3;
}

.formation-card-board {
  position: relative;
  z-index: 2;
}

.formation-card-board,
body[data-viewport="mobile-landscape"] .formation-card-board {
  grid-template-rows: 38px minmax(0, 1fr);
  gap: 8px;
}

.formation-card-head,
body[data-viewport="mobile-landscape"] .formation-card-head {
  align-items: center;
  min-height: 0;
  padding: 0 0 5px;
}

.formation-card-grid,
body[data-viewport="mobile-landscape"] .formation-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 142px;
  gap: 6px;
  padding-right: 5px;
}

.formation-character-card,
body[data-viewport="mobile-landscape"] .formation-character-card {
  min-height: 0;
}

.formation-card-ribbon,
body[data-viewport="mobile-landscape"] .formation-card-ribbon {
  left: 7px;
  right: 7px;
  min-height: 29px;
  font-size: 17px;
}

.formation-card-body,
body[data-viewport="mobile-landscape"] .formation-card-body {
  padding: 6px 7px;
}

.formation-card-body strong,
.formation-card-body span,
body[data-viewport="mobile-landscape"] .formation-card-body strong,
body[data-viewport="mobile-landscape"] .formation-card-body span {
  font-size: 15px;
}

.formation-focus-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 116px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-image: none;
  background-color: transparent;
  background-image: none;
}

.formation-focus-stage {
  position: relative;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.formation-focus-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--character-image);
  background-repeat: no-repeat;
  background-position: center 2%;
  background-size: auto 100%;
  transform: scale(1.3);
  transform-origin: center top;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.56));
}

.formation-focus-team {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 6px 0 3px;
  background: none;
  border: 0;
}

.formation-focus-team .formation-team-slots,
body[data-viewport="mobile-landscape"] .formation-focus-team .formation-team-slots {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.formation-focus-team .formation-team-slot,
body[data-viewport="mobile-landscape"] .formation-focus-team .formation-team-slot {
  min-height: 104px;
}

.formation-focus-team .formation-chibi,
body[data-viewport="mobile-landscape"] .formation-focus-team .formation-chibi {
  width: 100px;
  height: 86px;
  background-position: calc(50% - 5px) center;
}

.formation-focus-team .formation-team-slot span,
body[data-viewport="mobile-landscape"] .formation-focus-team .formation-team-slot span {
  font-size: 16px;
}

.formation-detail-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px 172px minmax(0, 1fr) minmax(0, 1fr) 56px;
  gap: 6px;
  overflow: hidden;
  padding: 8px;
  border: 0;
  border-image: none;
  background-color: transparent;
  background-image: none;
}

.formation-detail-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 5px 7px;
  background-image: var(--ui-divider-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 10px;
}

.formation-detail-identity h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #f5f7f5;
  font-size: 23px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formation-detail-identity span {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(39, 223, 243, 0.26);
}

.formation-detail-stats {
  min-height: 0;
  overflow: hidden;
  padding: 5px 7px;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.05), transparent 70%),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(226, 234, 228, 0.12);
}

.formation-detail-panel .formation-detail-stats .stat-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
}

body[data-viewport] .formation-detail-panel .formation-detail-stats .stat {
  gap: 4px;
  padding: 1px 3px;
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.12;
}

.formation-detail-panel .formation-ability-row {
  min-height: 0;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px 6px;
  align-content: start;
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid rgba(226, 234, 228, 0.13);
  border-image: none;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.08), transparent 58%),
    rgba(3, 7, 7, 0.62);
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 0 10px rgba(0, 0, 0, 0.88);
}

.formation-detail-panel .formation-ability-kind {
  font-size: 14px;
}

.formation-detail-panel .formation-ability-row strong {
  font-size: 15px;
}

.formation-detail-panel .formation-ability-row p {
  font-size: 14px;
  line-height: 1.3;
  -webkit-line-clamp: 3;
}

.formation-detail-panel .formation-team-actions {
  min-height: 0;
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
}

.formation-detail-panel .formation-status-action {
  min-height: 0;
  height: 100%;
  text-align: center;
}

/* Keep AI choices in one row and prevent the shared selected skin from darkening them. */
body[data-route="ai"] .ai-condition-category-row,
body[data-route="ai"][data-viewport="mobile-landscape"] .ai-condition-category-row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 6px;
}

body[data-route="ai"] button.action-chip.selected {
  color: #071010;
  border: 2px solid rgba(232, 255, 255, 0.98);
  border-image: none;
  background-color: #5cf4f4;
  background-image: linear-gradient(180deg, #ecffff 0%, #5cf4f4 44%, #26cbd2 100%);
  box-shadow:
    0 0 0 2px rgba(39, 223, 243, 0.78),
    0 0 20px rgba(39, 223, 243, 0.48),
    inset 0 0 14px rgba(255, 255, 255, 0.42);
  filter: brightness(1.08);
}

body[data-route="ai"] button.ai-category-chip.selected,
body[data-route="ai"] button.ai-condition-option.selected,
body[data-route="ai"] button.ai-direction-chip.selected {
  color: #161104;
  border: 2px solid rgba(255, 255, 238, 0.98);
  border-image: none;
  background-color: #f6d579;
  background-image: linear-gradient(180deg, #fff8c8 0%, #f6d579 48%, #d4a53a 100%);
  box-shadow:
    0 0 0 2px rgba(246, 213, 121, 0.72),
    0 0 18px rgba(246, 213, 121, 0.4),
    inset 0 0 12px rgba(255, 255, 255, 0.38);
  filter: brightness(1.06);
}

/* The app shell already scales to the phone viewport, so keep AI dimensions identical to desktop. */
body[data-route="ai"][data-viewport="mobile-landscape"] .app-shell {
  display: block;
  grid-template-rows: none;
  padding: 12px 0;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .screen {
  height: 100%;
  max-height: 100%;
  padding: 16px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .command-back-row {
  min-height: 36px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .command-back-button {
  min-width: 72px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 19px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-chip-editor {
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-column {
  grid-template-rows: 42px minmax(0, 1fr);
  gap: 5px;
  padding: 10px 9px;
  border-width: 3px;
  border-radius: 38px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-lanes {
  --loop-lane-gap: 8px;
  --loop-edge: 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-lane {
  gap: 5px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-lanes::before {
  border-width: 4px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-arrow {
  font-size: 24px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-slot {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 3px;
  padding: 5px;
  border-radius: 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-slot strong {
  font-size: 26px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-slot em {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 18px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-slot-clear {
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  background-size: 9px 9px, 100% 100%;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-chip-board {
  gap: 8px;
  padding: 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-shelf-label {
  padding: 3px 8px;
  font-size: 18px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-action-shelf,
body[data-route="ai"][data-viewport="mobile-landscape"] .ai-condition-shelf {
  gap: 8px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-action-chip-row {
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 0;
  background-size: 100% 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .action-chip {
  min-height: 76px;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 12px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .action-chip strong {
  font-size: 28px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .action-chip strong .action-icon {
  font-size: 30px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-condition-category-row {
  gap: 6px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-category-chip {
  min-height: 36px;
  padding: 4px 8px;
  font-size: 18px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-condition-detail {
  gap: 8px;
  padding: 8px 10px;
}

body[data-route="ai"][data-viewport="mobile-landscape"] .ai-condition-option,
body[data-route="ai"][data-viewport="mobile-landscape"] .ai-direction-chip {
  min-height: 34px;
  padding: 4px 14px;
  font-size: 18px;
}

/* Let each base district remain visible beneath the existing tactical frames. */
body[data-route="formation"] .formation-card-board {
  background:
    linear-gradient(180deg, rgba(4, 7, 7, 0.72), rgba(4, 7, 7, 0.84));
}

body[data-route="hangar"] .hangar-preview-card {
  background: rgba(2, 3, 3, 0.38);
}

body[data-route="hangar"] .equipment-workbench {
  background:
    linear-gradient(180deg, rgba(4, 7, 7, 0.72), rgba(4, 7, 7, 0.84));
}

body[data-route="ai"] .ai-chip-editor {
  background:
    linear-gradient(180deg, rgba(4, 7, 7, 0.70), rgba(4, 7, 7, 0.82));
}

/* Home command tiles use a compact diamond formation. */
body[data-route="home"] .home-actions,
body[data-viewport][data-route="home"] .home-actions {
  display: grid;
  grid-template-columns: repeat(2, 252px);
  grid-template-rows: 210px 252px;
  justify-content: center;
  align-items: start;
  gap: 0 4px;
}

body[data-route="home"] .big-action,
body[data-viewport][data-route="home"] .big-action {
  position: relative;
  width: 252px;
  height: 252px;
  min-height: 252px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 56px 40px;
  color: #f5f7f5;
  background: linear-gradient(135deg, #8ff8ff 0%, #20d7e5 38%, #087c91 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 8px rgba(39, 223, 243, 0.28));
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

body[data-route="home"] .big-action::before,
body[data-viewport][data-route="home"] .big-action::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  clip-path: inherit;
  background:
    linear-gradient(135deg, rgba(39, 223, 243, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(10, 26, 27, 0.96), rgba(2, 8, 9, 0.98));
}

body[data-route="home"] .big-action::after,
body[data-viewport][data-route="home"] .big-action::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  clip-path: inherit;
  border: 1px solid rgba(143, 248, 255, 0.34);
}

body[data-route="home"] .big-action.primary,
body[data-viewport][data-route="home"] .big-action.primary {
  grid-column: 1 / -1;
  justify-self: center;
  width: 252px;
  height: 252px;
  min-height: 252px;
  background: linear-gradient(135deg, #d8ffff 0%, #31e8f2 36%, #0a829a 100%);
  box-shadow: none;
}

body[data-route="home"] .big-action strong,
body[data-viewport][data-route="home"] .big-action strong,
body[data-route="home"] .big-action span,
body[data-viewport][data-route="home"] .big-action span {
  position: relative;
  z-index: 1;
  max-width: 172px;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
}

body[data-route="home"] .big-action strong,
body[data-viewport][data-route="home"] .big-action strong {
  font-size: 28px;
  line-height: 1.1;
}

body[data-route="home"] .big-action span,
body[data-viewport][data-route="home"] .big-action span {
  color: rgba(226, 244, 242, 0.82);
  font-size: 18px;
  line-height: 1.3;
}

body[data-route="home"] .big-action:hover,
body[data-route="home"] .big-action:focus-visible {
  outline: 0;
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.56)) drop-shadow(0 0 14px rgba(39, 223, 243, 0.62));
}

body[data-route="home"] .home-topbar {
  align-items: flex-start;
  min-height: 86px;
  padding: 10px 16px;
  pointer-events: none;
}

body[data-route="home"] .home-topbar > * {
  pointer-events: auto;
}

body[data-route="home"] .route-home,
body[data-viewport][data-route="home"] .route-home,
body[data-route="home"] .visual-home,
body[data-viewport][data-route="home"] .visual-home {
  overflow: visible;
}

.home-slideshow {
  position: absolute;
  left: 32px;
  bottom: 44px;
  z-index: 1;
  width: 332px;
  padding: 11px;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: auto;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.home-slideshow-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #020506;
  border: 1px solid var(--control-edge);
  border-radius: var(--control-radius);
  touch-action: pan-y;
}

.home-slide-item {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}

.home-slide-item.active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.home-slide {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
}

.home-slide-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 2px;
}

.home-slide-dot {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 50%;
}

.home-slide-dot-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  grid-area: 1 / 1;
}

.home-slide-dot.active .home-slide-dot-mark {
  background: var(--control-accent);
}

.home-identity-tools {
  display: grid;
  justify-items: start;
  align-content: start;
}

.shared-status-tools {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-left: auto;
  pointer-events: auto;
}

.app-shell > .shared-status-tools {
  position: absolute;
  top: 28px;
  right: 16px;
  z-index: 4;
  margin: 0;
}

/* Preserve the command header's space after moving its controls to the canvas. */
body[data-route] .command-back-row {
  min-height: 52px;
}

.shared-status-tools .shared-credit,
body[data-viewport] .shared-status-tools .shared-credit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: 0;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  flex-direction: row;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.shared-status-tools .shared-credit::before,
body[data-viewport] .shared-status-tools .shared-credit::before {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  filter: brightness(1.08) drop-shadow(0 0 7px rgba(39, 223, 243, 0.58));
}

button.shared-header-options,
body[data-viewport] button.shared-header-options {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  flex: 0 0 52px;
  padding: 0;
  font-size: 0;
  text-indent: 0;
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

button.shared-header-options::after,
body[data-viewport] button.shared-header-options::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  background: var(--ui-icon-settings) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(39, 223, 243, 0.68));
  pointer-events: none;
}

button.shared-header-options:hover::after,
button.shared-header-options:focus-visible::after {
  filter: brightness(1.28) drop-shadow(0 0 7px rgba(39, 223, 243, 0.88));
}

.home-user-badge {
  position: relative;
  min-width: 190px;
  padding: 4px 12px 7px 14px;
  border-left: 3px solid var(--cyan);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.86);
  transition: opacity 160ms ease, visibility 160ms ease;
}

.home-user-badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.home-user-badge small,
.commander-name-button {
  display: block;
}

.home-user-badge small {
  color: rgba(39, 223, 243, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.commander-name-button {
  max-width: 100%;
  margin-top: 1px;
  padding: 0;
  color: #fff;
  background: none;
  background-image: none;
  border: 0;
  border-image: none;
  box-shadow: none;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  text-shadow: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.home-commander-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-commander-name-row .commander-name-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commander-name-button:hover,
.commander-name-button:focus-visible {
  color: var(--cyan);
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-route="home"] button.home-adjutant-button {
  box-sizing: border-box;
  width: max-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 8px 0 0 14px;
  padding: 5px 13px 5px 8px;
  color: rgba(238, 252, 250, 0.9);
  background: rgba(3, 10, 11, 0.8) !important;
  background-image: none !important;
  border: 1px solid rgba(39, 223, 243, 0.48) !important;
  border-image: none !important;
  box-shadow: inset 0 0 12px rgba(39, 223, 243, 0.08);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

body[data-route="home"] button.home-adjutant-button:hover,
body[data-route="home"] button.home-adjutant-button:focus-visible {
  color: #fff;
  border-color: var(--cyan) !important;
  background: rgba(5, 19, 21, 0.9) !important;
  background-image: none !important;
  outline: 0;
}

body[data-route="home"] .home-adjutant-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-image: var(--ui-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body[data-route="home"] button.home-ui-toggle {
  box-sizing: border-box;
  width: 116px;
  min-width: 116px;
  min-height: 62px;
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  color: #fff;
  background: rgba(3, 10, 11, 0.78);
  border: 1px solid rgba(39, 223, 243, 0.64);
  box-shadow: inset 0 0 18px rgba(39, 223, 243, 0.08), 0 4px 18px rgba(0, 0, 0, 0.44);
  text-align: center;
}

body[data-route="home"] button.home-ui-toggle strong {
  font-size: 23px;
}

body[data-route="home"] button.home-ui-toggle span {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 900;
}

.home-ui-toggle.is-off {
  background: rgba(3, 7, 8, 0.42);
  border-color: rgba(213, 161, 58, 0.7);
}

.home-ui-toggle.is-off span {
  color: var(--amber);
}

.home-bottom-controls {
  position: absolute;
  right: max(32px, calc(env(safe-area-inset-right, 0px) + 24px));
  bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 48px));
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

body[data-route="home"] .home-bottom-controls .home-ui-toggle {
  flex: 0 0 116px;
  min-height: 62px;
  margin-left: 0;
}

.home-corner-button {
  position: relative;
  z-index: 5;
  width: 162px;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(3, 9, 10, 0.78);
  border: 1px solid rgba(39, 223, 243, 0.5);
  box-shadow: inset 0 0 18px rgba(39, 223, 243, 0.06), 0 6px 20px rgba(0, 0, 0, 0.46);
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

.home-corner-button .tool-icon {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.home-corner-button > span:last-child {
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.home-portrait-control {
  left: auto;
}

body[data-route="home"].home-ui-hidden .home-user-badge,
body[data-route="home"].home-ui-hidden .home-command-panel,
body[data-route="home"].home-ui-hidden .home-corner-button,
body[data-route="home"].home-ui-hidden .home-header-options,
body[data-route="home"].home-ui-hidden .home-status-tools,
body[data-route="home"].home-ui-hidden .home-slideshow,
body[data-route="home"].home-ui-hidden button:not(.home-ui-toggle) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body[data-route="home"].home-ui-hidden .home-ui-toggle {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Endless exploration, unlock economy, and locked collection states. */
.command-status-tools {
  margin-left: auto;
  pointer-events: auto;
}

.home-credit {
  margin-left: auto;
}

/* Keep the exploration briefing comfortably inside the shared game canvas. */
body[data-route="explore"] .route-explore,
body[data-viewport][data-route="explore"] .route-explore {
  margin: 16px 32px 0;
  padding: 24px;
  height: calc(100% - 126px);
  max-height: calc(100% - 126px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

body[data-route="explore"] .route-explore > .section-title {
  margin: 0;
}

.explore-dashboard {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 20px;
}

.explore-hero,
body[data-viewport] .explore-hero {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(60px, 1fr);
  align-content: stretch;
  gap: 24px;
  padding: 28px;
  border-width: 1px;
  background:
    radial-gradient(circle at 72% 26%, rgba(39, 223, 243, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(39, 223, 243, 0.1), transparent 46%),
    rgba(4, 8, 8, 0.9);
  border-color: rgba(39, 223, 243, 0.42);
}

.explore-hero-copy {
  display: grid;
  gap: 8px;
}

.explore-hero-copy > strong {
  color: #f7fbfa;
  font-size: 40px;
  line-height: 1.2;
  text-shadow: none;
}

.explore-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: #b4c6cd;
  font-size: 16px;
  line-height: 1.7;
}

.explore-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.explore-record {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(226, 234, 228, 0.18);
  border-left: 3px solid var(--cyan);
}

.explore-record span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.explore-record strong {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 30px;
}

.explore-record small {
  grid-column: 2;
  grid-row: 1;
  color: rgba(39, 223, 243, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.explore-launch-button {
  min-height: 60px;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(219, 255, 255, 0.92);
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(39, 223, 243, 0.22);
}

.explore-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 10px;
}

.explore-rules {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.explore-rule {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-content: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(226, 234, 228, 0.13);
}

.explore-rule strong {
  color: var(--cyan);
  font-size: 13px;
}

.explore-rule span {
  color: #b4c6cd;
  font-size: 13px;
  line-height: 1.45;
}

.explore-rules,
body[data-viewport] .explore-rules {
  flex: 1 1 0;
  min-height: 0;
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
  padding: 14px 16px;
  border-width: 1px;
  gap: 6px;
  overflow: hidden;
}

.formation-character-card.locked {
  cursor: default;
  border-color: rgba(226, 234, 228, 0.13);
}

.formation-character-card.locked .formation-card-portrait {
  filter: grayscale(0.72) saturate(0.25) brightness(0.38);
}

.formation-character-card.locked .formation-card-body {
  opacity: 0.58;
}

.unlock-lock-button {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 7;
  min-width: 92px;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 7px;
  padding: 7px 10px;
  color: #f6d579;
  background: rgba(2, 5, 5, 0.88);
  border: 1px solid rgba(246, 213, 121, 0.62);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.64), 0 0 16px rgba(213, 161, 58, 0.14);
}

.unlock-lock-button:hover,
.unlock-lock-button:focus-visible {
  transform: translate(-50%, calc(-50% - 1px));
}

.unlock-lock-glyph {
  font-size: 22px;
  line-height: 1;
}

.unlock-lock-button strong {
  font-size: 16px;
}

.hangar-part-row.locked {
  position: relative;
  overflow: hidden;
  color: rgba(7, 16, 16, 0.7);
}

.hangar-part-row.locked > .equipment-art,
.hangar-part-row.locked > .hangar-part-info {
  filter: grayscale(0.9) saturate(0.2) brightness(0.48);
  opacity: 0.66;
}

.part-lock-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 3;
  min-width: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  color: #f6d579;
  background: rgba(4, 7, 7, 0.9);
  border: 1px solid rgba(213, 161, 58, 0.6);
  transform: translateY(-50%);
  font-size: 15px;
}

.part-lock-badge strong {
  color: inherit;
}

.unlock-confirm-modal {
  width: min(520px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px 18px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(39, 223, 243, 0.1), transparent 42%),
    rgba(4, 7, 7, 0.98);
  border: 1px solid rgba(246, 213, 121, 0.56);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72), inset 0 0 30px rgba(255, 255, 255, 0.035);
}

.unlock-confirm-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 234, 228, 0.16);
}

.unlock-confirm-head > .unlock-confirm-icon {
  font-size: 30px;
}

.unlock-confirm-head > div {
  display: grid;
  gap: 2px;
}

.unlock-confirm-head small {
  color: var(--amber);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.unlock-confirm-head strong {
  color: #fff;
  font-size: 25px;
}

.unlock-character-preview,
.unlock-part-preview {
  grid-row: span 3;
  min-height: 220px;
  background-repeat: no-repeat;
  background-position: center 10%;
  background-size: 220% auto;
  border: 1px solid rgba(226, 234, 228, 0.18);
  filter: saturate(0.72) brightness(0.72);
}

.unlock-character-preview {
  background-image: var(--character-image);
}

.unlock-part-preview {
  min-height: 160px;
  display: grid;
  place-items: center;
  background-position: center;
  background-size: 150px 150px;
  font-size: 36px;
}

.unlock-description {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.unlock-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3px 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.44);
  border-left: 3px solid var(--amber);
}

.unlock-price span {
  color: var(--muted);
  font-size: 13px;
}

.unlock-price strong {
  color: #f6d579;
  font-size: 28px;
}

.unlock-price small {
  grid-column: 1 / -1;
  color: rgba(226, 234, 228, 0.62);
  font-size: 12px;
}

.unlock-shortage {
  margin: 0;
  color: #ff7771;
  font-size: 13px;
  font-weight: 800;
}

.unlock-confirm-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.unlock-confirm-actions button {
  min-height: 48px;
  justify-content: center;
}

.unlock-confirm-button:not(:disabled) {
  color: #171104;
  background: linear-gradient(180deg, #fff6ba, #e3b74c);
  border-color: #f6d579;
  font-weight: 900;
}

.exploration-result-modal {
  width: min(760px, 84vw);
  max-height: 88vh;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  padding: 18px 22px;
}

.exploration-result-modal .battle-result-banner {
  width: min(430px, 72%);
}

.exploration-depth-line {
  color: var(--cyan);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.exploration-reward-panel,
.exploration-pending-panel,
.exploration-lost-panel {
  display: grid;
  gap: 6px;
  padding: 9px 12px;
  text-align: left;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(226, 234, 228, 0.16);
}

.exploration-reward-title,
.exploration-pending-panel > strong {
  color: rgba(226, 234, 228, 0.72);
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-shadow: none !important;
}

.exploration-reward-list,
.exploration-pending-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exploration-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 4px 8px;
  color: #f5f7f5;
  background: rgba(39, 223, 243, 0.08);
  border: 1px solid rgba(39, 223, 243, 0.25);
  font-size: 13px;
  font-weight: 800;
}

.exploration-reward-chip i {
  color: var(--cyan);
  font-style: normal;
  font-size: 16px;
}

.exploration-reward-chip.reward-credit,
.exploration-reward-chip.reward-part {
  border-color: rgba(246, 213, 121, 0.38);
}

.exploration-reward-chip.reward-credit i,
.exploration-reward-chip.reward-part i {
  color: var(--amber);
}

.exploration-reward-chip.reward-heal {
  border-color: rgba(157, 224, 50, 0.38);
}

.exploration-reward-chip.reward-heal i {
  color: #9de032;
}

.exploration-reward-empty {
  color: rgba(226, 234, 228, 0.56);
  font-size: 13px;
}

.exploration-result-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px !important;
}

.exploration-result-actions button {
  min-height: 44px;
  justify-content: center;
  font-weight: 900;
}

.exploration-return-button {
  color: #fff;
  background: linear-gradient(180deg, #dbffff, #42dce7);
  border-color: rgba(219, 255, 255, 0.88);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.92);
}

.exploration-continue-button {
  color: #fff;
  background: linear-gradient(180deg, #fff6ba, #d5a13a);
  border-color: rgba(246, 213, 121, 0.88);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.92);
}

.exploration-risk-note {
  margin: 0;
  color: rgba(255, 119, 113, 0.88);
  font-size: 12px;
  line-height: 1.35;
}

.exploration-lost-panel {
  border-color: rgba(255, 83, 78, 0.4);
}

.exploration-lost-panel strong {
  color: #ff7771;
  font-size: 20px;
  text-shadow: none;
}

.exploration-lost-panel span {
  color: rgba(226, 234, 228, 0.76);
  font-size: 14px;
}

.home-options-modal {
  width: min(380px, calc(100vw - 36px));
  display: grid;
  gap: 16px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.08), transparent 34%),
    rgba(5, 7, 7, 0.96);
  border: 14px solid transparent;
  border-image-source: var(--ui-panel-frame);
  border-image-slice: 34 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.66);
}

.commander-name-editor-modal {
  width: min(420px, calc(100vw - 36px));
  display: grid;
  gap: 16px;
  padding: 18px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(39, 223, 243, 0.1), transparent 38%),
    rgba(5, 7, 7, 0.97);
  border: 14px solid transparent;
  border-image-source: var(--ui-panel-frame);
  border-image-slice: 34 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.66);
}

.commander-name-form {
  display: grid;
  gap: 10px;
}

.commander-name-label {
  color: rgba(226, 234, 228, 0.82);
  font-size: 14px;
  font-weight: 800;
}

.commander-name-form input {
  min-height: 48px;
  color: #fff;
  border-color: rgba(39, 223, 243, 0.46);
  font-size: 20px;
  font-weight: 800;
}

.commander-name-form input[aria-invalid="true"] {
  border-color: #ff7771;
  outline-color: #ff7771;
}

.commander-name-note {
  min-height: 18px;
  margin: 0;
  color: rgba(226, 234, 228, 0.68);
  font-size: 13px;
}

.commander-name-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.commander-name-actions button {
  min-height: 48px;
  text-align: center;
}

.commander-name-save {
  color: #fff;
  border-color: rgba(39, 223, 243, 0.72);
  background: linear-gradient(180deg, rgba(39, 223, 243, 0.32), rgba(14, 83, 91, 0.62));
}

.home-options-actions {
  display: grid;
  gap: 8px;
}

.home-option-action {
  min-height: 50px;
  padding: 10px 14px;
  color: #fff;
  border-color: rgba(39, 223, 243, 0.34);
}

.audio-settings {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(39, 223, 243, 0.28);
}

.audio-volume-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  color: #e2eae4;
  font-size: 17px;
  font-weight: 700;
}

.audio-volume-value {
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.audio-volume-slider {
  width: 100%;
  min-width: 0;
  height: 22px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}

.audio-mute-toggle.active {
  color: #ffd0d0;
  border-color: rgba(255, 120, 120, 0.6);
}

/* Battle presentation polish: battlefield-first composition and impact feedback. */
.battle-stage,
body[data-viewport] .battle-stage {
  grid-template-rows: 118px minmax(0, 1fr) 230px;
  gap: 0;
}

.battle-hud,
body[data-viewport] .battle-hud {
  z-index: 20;
  grid-template-columns: minmax(420px, 620px);
  align-items: start;
  padding: 10px 16px 6px;
  background:
    linear-gradient(180deg, rgba(2, 4, 4, 0.9), rgba(2, 4, 4, 0.42) 70%, transparent);
  pointer-events: none;
}

.battle-hud > * {
  pointer-events: auto;
}

.frontline-hud {
  position: relative;
  gap: 5px;
  padding: 7px 64px 8px;
  border: 1px solid rgba(226, 234, 228, 0.18);
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.08), transparent 38% 62%, rgba(255, 83, 78, 0.08)),
    rgba(3, 6, 6, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34), inset 0 -1px rgba(255, 255, 255, 0.04);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
}

.battle-hud-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.battle-hud-title .battle-stage-name {
  overflow: hidden;
  color: rgba(245, 247, 245, 0.9);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-hud-clock {
  flex: none;
  color: rgba(226, 234, 228, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.frontline-row,
body[data-viewport] .frontline-row {
  grid-template-columns: auto repeat(12, minmax(12px, 22px)) auto;
  gap: 5px;
  justify-content: center;
}

.front-pip,
body[data-viewport] .front-pip {
  width: 100%;
  height: 10px;
  border-color: rgba(255, 255, 255, 0.18);
  transition: background-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.front-neutral {
  background: rgba(200, 203, 202, 0.28);
}

.side-label,
body[data-viewport] .side-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.battle-status-strip {
  position: absolute;
  left: auto;
  right: 22px;
  bottom: 7px;
  gap: 4px;
  transform: none;
}

.battle-status-strip .ui-tag,
body[data-viewport] .battle-status-strip .ui-tag {
  min-height: 16px;
  padding: 1px 5px;
  border: 0;
  background: transparent;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.battle-retreat-button {
  left: 12px;
  top: 10px;
  min-height: 38px;
  padding: 5px 13px;
}

.battle-enemy-icons {
  right: 12px;
  top: 10px;
  gap: 5px;
}

.battle-enemy-icon-slot {
  width: 46px;
  background: rgba(4, 5, 5, 0.6);
}

.battle-main {
  height: 100%;
  overflow: visible;
}

.battlefield,
body[data-viewport] .battlefield {
  --field-plane-top: 14%;
  --field-plane-bottom: 8%;
  height: 100%;
  min-height: 0;
  padding: 0;
  isolation: isolate;
  clip-path: inset(-28px 0 -60px 0);
  overflow: visible;
}

.battlefield::before,
.battlefield::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.battlefield::before {
  z-index: 3;
  content: none;
  background: none;
  animation: none;
}

.battlefield::after {
  z-index: 18;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(90deg, transparent 80%, rgba(255, 83, 78, 0.04));
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.5);
}

.perspective-grid {
  inset: var(--field-plane-top) 0 var(--field-plane-bottom);
  opacity: 0.82;
}

/* These cutaway scenes share the approved narrow walking band.
   Keep the tactical grid below the rear wall and above the near wall. */
.battle-screen:is([data-battle-background="tunnel"],
  [data-battle-background="blast-door"],
  [data-battle-background="connecting-passage"],
  [data-battle-background="abandoned-platform"],
  [data-battle-background="sunlit-platform"],
  [data-battle-background="shopping-passage"],
  [data-battle-background="armored-train-breach"],
  [data-battle-background="maintenance-corridor"]) .battlefield {
  --field-plane-top: calc(50% + var(--battle-lane-offset, 0%));
  --field-plane-bottom: 7%;
}

.grid-zone {
  stroke-width: 0.7px;
  transition: fill 260ms ease, stroke 260ms ease;
}

.grid-zone-ally {
  fill: none;
  stroke: rgba(75, 238, 244, 0.2);
}

.grid-zone-neutral {
  fill: rgba(218, 224, 220, 0.025);
  stroke: rgba(226, 234, 228, 0.14);
}

.grid-zone-enemy {
  fill: rgba(255, 83, 78, 0.055);
  stroke: rgba(255, 106, 96, 0.2);
}

.frontline-boundary {
  position: absolute;
  left: var(--frontline-x);
  top: var(--field-plane-top);
  bottom: var(--field-plane-bottom);
  z-index: 7;
  width: 2px;
  transform: translateX(-50%);
  transition: left 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.frontline-boundary::before,
.frontline-boundary::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.frontline-boundary::before {
  inset-block: 0;
  width: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor, 0 0 24px currentColor;
  opacity: 0.86;
}

.frontline-boundary::after {
  top: 50%;
  width: 16px;
  height: 42%;
  border: 1px solid currentColor;
  border-width: 1px 0;
  background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 7px);
  opacity: 0.3;
  transform: translate(-50%, -50%);
}

.frontline-ally-boundary {
  color: #42eff6;
}

.frontline-enemy-boundary {
  color: #ff6861;
}

.lane-unit {
  z-index: var(--lane-z, 8);
  transform: translate(-50%, -50%) scale(var(--lane-scale, 1));
  transition: filter 150ms ease, opacity 150ms ease;
}

.catalog-enemy-token,
.character-enemy-token {
  transform: translate(-50%, -50%) scale(var(--lane-scale, 1)) scaleX(-1);
}

.lane-unit.is-action-focus {
  z-index: 15;
  filter:
    saturate(1.2)
    brightness(1.12)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.36))
    drop-shadow(0 16px 12px rgba(0, 0, 0, 0.54));
  animation: activeUnitPulse 720ms ease-in-out var(--action-delay) both;
}

.unit-action-chip {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 20;
  min-width: 58px;
  padding: 3px 8px;
  color: #071010;
  border: 1px solid rgba(219, 255, 255, 0.9);
  background: linear-gradient(90deg, #d9ffff, #42dce7);
  box-shadow: 0 0 16px rgba(39, 223, 243, 0.54);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  animation: actionChipIn 300ms ease-out var(--action-delay) both;
  pointer-events: none;
}

.enemy-token .unit-action-chip {
  color: #1d0807;
  border-color: rgba(255, 215, 210, 0.9);
  background: linear-gradient(90deg, #ffd9d5, #ff6a63);
  box-shadow: 0 0 16px rgba(255, 83, 78, 0.54);
}

.catalog-enemy-token .unit-action-chip,
.character-enemy-token .unit-action-chip {
  transform: translate(-50%, -100%) scaleX(-1);
}

.muzzle-flash,
.impact-particles {
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top, 52%);
  z-index: 12;
  pointer-events: none;
}

.muzzle-flash {
  width: 54px;
  height: 24px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 132, 32, 0.9) 38%, #fff7cf 50%, transparent 72%),
    radial-gradient(ellipse, #fff 0 9%, #ffc157 10% 28%, transparent 65%);
  filter: drop-shadow(0 0 10px rgba(255, 133, 32, 0.95));
  transform: translate(-50%, -50%);
  animation: muzzleBurst 150ms ease-out var(--effect-delay) both;
}

.flying-bullet {
  width: 13px;
  height: 13px;
  margin-left: -6px;
  margin-top: -6px;
  box-shadow:
    0 0 8px rgba(255, 244, 202, 1),
    0 0 18px rgba(255, 111, 28, 0.86),
    0 0 32px rgba(255, 83, 32, 0.42);
}

.flying-bullet::before {
  width: 44px;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255, 96, 24, 0.28), rgba(255, 221, 157, 0.96));
  opacity: 0.92;
}

.impact-flash {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 8px rgba(255, 138, 36, 0.98));
  animation: impactBurst 350ms ease-out var(--effect-delay) both;
}

.impact-particles {
  width: 1px;
  height: 1px;
  animation: particleContainer 380ms ease-out var(--effect-delay) both;
}

.impact-particles i {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 2px;
  background: linear-gradient(90deg, #fff7ca, #ff791f);
  box-shadow: 0 0 6px rgba(255, 113, 25, 0.9);
  animation: impactParticle 360ms ease-out calc(var(--effect-delay) + var(--particle-delay)) both;
}

.damage-pop,
.hit-reaction,
.lock-effect,
.melee-impact,
.detect-line,
.skill-effect {
  animation-delay: var(--effect-delay, 0ms);
}

.damage-pop {
  min-width: 46px;
  padding: 4px 8px;
  font-size: 22px;
  box-shadow: 0 0 14px rgba(255, 83, 78, 0.24);
}

.damage-pop.damage-heavy {
  min-width: 58px;
  color: #fff6dd;
  border-width: 2px;
  font-size: 28px;
  box-shadow: 0 0 20px rgba(255, 83, 78, 0.44);
}

.damage-pop.damage-shield {
  margin-top: -26px;
  margin-left: -30px;
  color: #bffbff;
  border-color: rgba(83, 226, 255, 0.92);
  background: rgba(4, 35, 48, 0.88);
  text-shadow: 0 0 12px #45dfff;
  box-shadow: 0 0 18px rgba(69, 223, 255, 0.58);
}

.damage-pop.damage-after-shield {
  margin-left: 30px;
}

.melee-impact {
  width: 146px;
  height: 102px;
  border-width: 2px;
  font-size: 22px;
  box-shadow: 0 0 28px rgba(255, 95, 88, 0.4);
}

.lock-effect {
  width: 68px;
  height: 68px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.skill-effect {
  z-index: 14;
  min-width: 116px;
  font-size: 15px;
}

.lane-unit.is-damage-shaking {
  animation: targetDamageShake 420ms ease-out var(--damage-shake-delay, 0ms) both;
}

.battle-info {
  height: 230px;
  gap: 7px;
  padding: 6px 0 8px;
  background: linear-gradient(180deg, rgba(2, 4, 4, 0.18), rgba(2, 4, 4, 0.84) 18%);
}

.battle-info .unit-panel,
body[data-viewport] .unit-panel {
  height: 216px;
  min-height: 0;
  max-height: 216px;
  transition: opacity 160ms ease, filter 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.battle-info .unit-panel.is-action-focus {
  z-index: 3;
  border-color: rgba(114, 247, 255, 0.82);
  box-shadow:
    0 0 22px rgba(39, 223, 243, 0.34),
    inset 0 0 24px rgba(39, 223, 243, 0.1);
}

.battle-info .unit-portrait {
  background-position: center 11%;
  background-size: 205% auto;
}

.unit-panel-overlay {
  left: 7px;
  right: 7px;
  bottom: 7px;
  gap: 2px;
  padding: 5px 7px;
}

.unit-panel h3,
body[data-viewport] .unit-panel h3 {
  font-size: 15px;
}

.unit-hp {
  font-size: 13px;
}

.unit-panel-action {
  position: absolute;
  right: 7px;
  top: 6px;
  padding: 2px 6px;
  color: #b9fbff;
  border: 1px solid rgba(39, 223, 243, 0.42);
  background: rgba(3, 13, 14, 0.76);
  font-size: 10px;
  font-weight: 900;
}

.battle-info .unit-panel.defeated,
body[data-viewport] .unit-panel.defeated {
  --skill-fill: 0%;
  border-color: rgba(166, 174, 174, 0.52);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.72);
}

.unit-panel.defeated::before {
  height: 0;
  opacity: 0;
  animation: none;
}

.unit-panel.defeated .unit-portrait {
  filter: grayscale(1) brightness(0.44) contrast(0.92);
}

.unit-panel.defeated .unit-portrait::before,
.unit-panel.defeated .unit-portrait::after {
  height: 0;
  opacity: 0;
}

.unit-panel.defeated .unit-panel-overlay {
  border-left-color: rgba(174, 184, 184, 0.58);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.88));
}

.unit-panel-defeated-label {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 5;
  min-width: 112px;
  padding: 7px 14px;
  color: #f3f5f5;
  border: 1px solid rgba(205, 214, 214, 0.78);
  background: rgba(20, 23, 23, 0.9);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.8), inset 0 0 12px rgba(255, 255, 255, 0.05);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.battle-skill-cutin {
  --ability-accent: #27dff3;
  --ability-accent-bright: #b9fbff;
  --cutin-flag-shape: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
  position: absolute;
  left: 0;
  top: 20%;
  z-index: 80;
  width: min(920px, 92vw);
  height: 150px;
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: stretch;
  color: #fff;
  background:
    linear-gradient(
      105deg,
      rgba(3, 10, 11, 0.98),
      color-mix(in srgb, var(--ability-accent) 18%, rgba(4, 18, 20, 0.96)) 58%,
      color-mix(in srgb, var(--ability-accent) 76%, rgba(4, 18, 20, 0.9))
    );
  border-block: 2px solid color-mix(in srgb, var(--ability-accent-bright) 82%, #fff);
  box-shadow:
    0 0 42px color-mix(in srgb, var(--ability-accent) 42%, transparent),
    0 20px 50px rgba(0, 0, 0, 0.56);
  -webkit-clip-path: var(--cutin-flag-shape);
  clip-path: var(--cutin-flag-shape);
  overflow: hidden;
  animation: skillCutinSweep 2375ms cubic-bezier(0.2, 0.78, 0.22, 1) var(--cutin-delay) both;
  pointer-events: none;
}

.battle-skill-cutin.cutin-enemy {
  --ability-accent: #f23d46;
  --ability-accent-bright: #ffc1c5;
  --cutin-flag-shape: polygon(0 50%, 7% 0, 100% 0, 100% 100%, 7% 100%);
  left: auto;
  right: 0;
  grid-template-columns: 62% 38%;
  background:
    linear-gradient(
      255deg,
      rgba(3, 10, 11, 0.98),
      color-mix(in srgb, var(--ability-accent) 18%, rgba(4, 18, 20, 0.96)) 58%,
      color-mix(in srgb, var(--ability-accent) 76%, rgba(4, 18, 20, 0.9))
    );
  transform-origin: right center;
  animation-name: skillCutinSweepEnemy;
}

.battle-skill-cutin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.24) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: cutinSheen 1750ms ease-out var(--cutin-delay) both;
}

.battle-skill-cutin.cutin-enemy::after {
  animation-name: cutinSheenEnemy;
}

.battle-skill-cutin-portrait {
  background-image: var(--character-image);
  background-repeat: no-repeat;
  background-position: var(--skill-cutin-portrait-position, center top);
  background-size: var(--skill-cutin-portrait-size, 150% auto);
  filter: saturate(0.9) contrast(1.08) drop-shadow(12px 0 16px rgba(0, 0, 0, 0.46));
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.battle-skill-cutin.cutin-enemy .battle-skill-cutin-portrait {
  grid-column: 2;
  grid-row: 1;
  filter: saturate(0.9) contrast(1.08) drop-shadow(-12px 0 16px rgba(0, 0, 0, 0.46));
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}

.battle-skill-cutin.cutin-enemy .battle-skill-cutin-portrait:is(.is-character-enemy-cutin, .is-catalog-enemy-cutin) {
  transform: scaleX(-1);
  filter: saturate(0.9) contrast(1.08) drop-shadow(12px 0 16px rgba(0, 0, 0, 0.46));
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}

.battle-skill-cutin.cutin-enemy .battle-skill-cutin-portrait.is-catalog-enemy-cutin {
  background-position: center;
  background-size: contain;
}

.battle-skill-cutin-copy {
  z-index: 2;
  align-self: center;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 18px 56px 18px 4px;
  text-align: right;
  white-space: nowrap;
}

.battle-skill-cutin.cutin-enemy .battle-skill-cutin-copy {
  grid-column: 1;
  grid-row: 1;
  padding: 18px 4px 18px 56px;
  text-align: left;
}

.battle-skill-cutin.cutin-no-portrait {
  width: min(620px, calc(100% - 36px));
  grid-template-columns: 1fr;
}

.battle-skill-cutin.cutin-no-portrait .battle-skill-cutin-copy,
.battle-skill-cutin.cutin-enemy.cutin-no-portrait .battle-skill-cutin-copy {
  grid-column: 1;
  grid-row: 1;
  justify-items: center;
  padding: 18px 68px;
  text-align: center;
}

.battle-skill-cutin-copy span {
  color: var(--ability-accent-bright);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.battle-skill-cutin-copy strong {
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ability-accent) 72%, transparent);
}

.battle-skill-cutin-copy small {
  color: rgba(226, 234, 228, 0.76);
  font-size: 12px;
  font-weight: 800;
}

.skill-lux-second-line-shot {
  --skill-primary: #ffd43b;
  --skill-bright: #fff3a3;
  --skill-deep: #b87800;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-marder-double-shot {
  --skill-primary: #3f7cff;
  --skill-bright: #c8dcff;
  --skill-deep: #1746b8;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-maus-armored-advance {
  --skill-primary: #8fe388;
  --skill-bright: #e4ffd6;
  --skill-deep: #3e9d57;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-grille-range-volley {
  --skill-primary: #ff5cab;
  --skill-bright: #ffd0e8;
  --skill-deep: #b91f6c;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-rammtiger-ram-charge {
  --skill-primary: #9b5cff;
  --skill-bright: #e1c8ff;
  --skill-deep: #5721b6;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-flamingo-burning-range {
  --skill-primary: #ff762d;
  --skill-bright: #ffe36f;
  --skill-deep: #b3330b;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-elefant-zero-decay {
  --skill-primary: #a7afbb;
  --skill-bright: #f2f5f8;
  --skill-deep: #525b68;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-leopard-shield-advance {
  --skill-primary: #54c8ff;
  --skill-bright: #c9f3ff;
  --skill-deep: #147eba;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-jagdpanther-piercing-shot {
  --skill-primary: #e8be35;
  --skill-bright: #fff39b;
  --skill-deep: #9f7212;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

.skill-tiger-knockback-shot {
  --skill-primary: #ff365f;
  --skill-bright: #ffc2d1;
  --skill-deep: #aa1238;
  --ability-accent: var(--skill-primary);
  --ability-accent-bright: var(--skill-bright);
}

@keyframes battlefieldFogDrift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1.02); opacity: 0.72; }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.04); opacity: 0.95; }
}

@keyframes activeUnitPulse {
  0% { filter: brightness(1) saturate(1); }
  34% { filter: brightness(1.28) saturate(1.25) drop-shadow(0 0 16px rgba(255, 255, 255, 0.48)); }
  100% { filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 9px rgba(255, 255, 255, 0.3)); }
}

@keyframes actionChipIn {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(0.72); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@keyframes muzzleBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.25); }
  35% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.5); }
}

@keyframes particleContainer {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes impactParticle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(0.75) rotate(32deg); }
}

@keyframes targetDamageShake {
  0%, 100% { margin-left: 0; margin-top: 0; }
  14% { margin-left: -6px; margin-top: 2px; }
  28% { margin-left: 5px; margin-top: -3px; }
  44% { margin-left: -4px; margin-top: -1px; }
  62% { margin-left: 3px; margin-top: 2px; }
  80% { margin-left: -1px; margin-top: 0; }
}

@keyframes skillCutinSweep {
  0% { opacity: 0; transform: translateX(-104%) skewX(-7deg); }
  14% { opacity: 1; transform: translateX(0) skewX(0); }
  72% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18%) scaleX(1.04); }
}

@keyframes skillCutinSweepEnemy {
  0% { opacity: 0; transform: translateX(104%) skewX(7deg); }
  14% { opacity: 1; transform: translateX(0) skewX(0); }
  72% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(18%) scaleX(1.04); }
}

@keyframes cutinSheen {
  0%, 18% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

@keyframes cutinSheenEnemy {
  0%, 18% { transform: translateX(120%); }
  70%, 100% { transform: translateX(-120%); }
}

/* Skill-specific battle effects */
.flying-bullet.projectile-rapid {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #fff 0 18%, #ffe28a 19% 46%, #ff7040 47% 100%);
  box-shadow: 0 0 8px #fff4b8, 0 0 17px rgba(255, 94, 48, 0.92);
}

.flying-bullet.projectile-lock {
  background: radial-gradient(circle, #fff 0 14%, #e3a1ff 15% 48%, #8b35ef 49% 100%);
  box-shadow: 0 0 10px #f4d6ff, 0 0 26px rgba(181, 75, 255, 0.9);
}

.flying-bullet.projectile-lock::before {
  background: linear-gradient(90deg, transparent, rgba(179, 72, 255, 0.3), #f4ddff);
}

.flying-bullet.projectile-scan {
  background: radial-gradient(circle, #fff 0 14%, #bdff83 15% 48%, #4ccf57 49% 100%);
  box-shadow: 0 0 10px #e5ffc8, 0 0 26px rgba(80, 226, 95, 0.88);
}

.flying-bullet.projectile-scan::before {
  background: linear-gradient(90deg, transparent, rgba(88, 222, 97, 0.3), #eaffd8);
}

.flying-bullet.projectile-rail {
  width: 34px;
  height: 7px;
  margin-left: -17px;
  margin-top: -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6a35, #fff 46% 64%, #ffd66d);
  box-shadow: 0 0 9px #fff, 0 0 26px rgba(255, 117, 48, 0.94), 0 0 48px rgba(255, 190, 58, 0.58);
}

.flying-bullet.projectile-rail::before {
  width: 118px;
  height: 8px;
  left: var(--trail-left);
  background: linear-gradient(90deg, transparent, rgba(255, 110, 43, 0.2), rgba(255, 244, 199, 0.96));
}

.flying-bullet.projectile-sniper {
  width: 34px;
  height: 7px;
  margin-left: -17px;
  margin-top: -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #aa57ff, #fff 46% 64%, #ff7ad9);
  box-shadow: 0 0 9px #fff, 0 0 26px rgba(171, 78, 255, 0.94), 0 0 48px rgba(255, 83, 198, 0.58);
}

.flying-bullet.projectile-sniper::before {
  width: 118px;
  height: 8px;
  left: var(--trail-left);
  background: linear-gradient(90deg, transparent, rgba(164, 70, 255, 0.2), rgba(255, 218, 249, 0.96));
}

.flying-bullet.projectile-artillery {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 236, 179, 0.9);
  background: radial-gradient(circle, #fff 0 10%, #ffbc45 11% 42%, #ca3b1d 43% 100%);
  box-shadow: 0 0 14px #ff9a31, 0 0 30px rgba(255, 66, 28, 0.82);
}

.flying-bullet.projectile-artillery.skill-side-enemy {
  border-color: #ffc1c5;
}

.flying-bullet.projectile-burst,
.flying-bullet.projectile-burst-fragment {
  background: radial-gradient(circle, #fff 0 10%, #ffb3ae 11% 34%, #ff413a 35% 100%);
  box-shadow: 0 0 10px #fff, 0 0 24px rgba(255, 52, 45, 0.94);
}

.muzzle-flash.projectile-lock {
  background:
    linear-gradient(90deg, transparent, rgba(191, 91, 255, 0.9) 38%, #fff 50%, transparent 74%),
    radial-gradient(ellipse, #fff 0 9%, #d184ff 10% 28%, transparent 65%);
  filter: drop-shadow(0 0 13px rgba(188, 82, 255, 0.98));
}

.muzzle-flash.projectile-scan {
  background:
    linear-gradient(90deg, transparent, rgba(102, 229, 91, 0.9) 38%, #fff 50%, transparent 74%),
    radial-gradient(ellipse, #fff 0 9%, #baff7d 10% 28%, transparent 65%);
  filter: drop-shadow(0 0 13px rgba(94, 229, 87, 0.98));
}

.muzzle-flash.projectile-rail {
  background:
    linear-gradient(90deg, transparent, rgba(255, 126, 47, 0.9) 38%, #fff 50%, transparent 74%),
    radial-gradient(ellipse, #fff 0 9%, #ffb555 10% 28%, transparent 65%);
  filter: drop-shadow(0 0 13px rgba(255, 115, 42, 0.98));
}

.muzzle-flash.projectile-sniper {
  background:
    linear-gradient(90deg, transparent, rgba(185, 72, 255, 0.9) 38%, #fff 50%, transparent 74%),
    radial-gradient(ellipse, #fff 0 9%, #ef8ce9 10% 28%, transparent 65%);
  filter: drop-shadow(0 0 13px rgba(194, 74, 255, 0.98));
}

.impact-lock {
  filter: hue-rotate(235deg) brightness(1.35) drop-shadow(0 0 18px rgba(189, 82, 255, 0.98));
}

.impact-scan {
  filter: hue-rotate(70deg) brightness(1.3) drop-shadow(0 0 18px rgba(91, 224, 88, 0.98));
}

.impact-pierce {
  filter: hue-rotate(230deg) brightness(1.35) drop-shadow(0 0 18px rgba(204, 78, 255, 0.98));
}

.impact-heavy-blast,
.impact-blast {
  width: 82px;
  height: 82px;
  filter: drop-shadow(0 0 22px rgba(255, 96, 28, 1));
}

.skill-explosion {
  --explosion-color: #ff6b26;
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top, 52%);
  z-index: 14;
  width: 0;
  height: 0;
  pointer-events: none;
}

.skill-explosion > span,
.skill-explosion > i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.skill-explosion-core {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, #ffe06d 8% 18%, var(--explosion-color) 19% 42%, rgba(255, 52, 24, 0.32) 43% 60%, transparent 72%);
  filter: drop-shadow(0 0 16px var(--explosion-color));
  animation: skillExplosionCore 620ms ease-out var(--effect-delay) both;
}

.skill-explosion-ring {
  width: 72px;
  height: 72px;
  border: 3px solid var(--explosion-color);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--explosion-color), inset 0 0 14px rgba(255, 255, 255, 0.7);
  animation: skillExplosionRing 720ms ease-out var(--effect-delay) both;
}

.skill-explosion-smoke {
  width: 126px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(55, 48, 40, 0.9), rgba(23, 22, 21, 0.68) 48%, transparent 72%);
  filter: blur(4px);
  animation: skillExplosionSmoke 820ms ease-out var(--effect-delay) both;
}

.skill-explosion > i {
  width: 9px;
  height: 3px;
  background: #fff2b2;
  box-shadow: 0 0 7px var(--explosion-color);
  transform-origin: 0 0;
  animation: skillExplosionSpark 600ms ease-out calc(var(--effect-delay) + var(--spark-delay)) both;
}

.explosion-lock,
.explosion-pierce {
  --explosion-color: #bc55ff;
}

.explosion-scan {
  --explosion-color: #59dc58;
}

.explosion-lock .skill-explosion-core,
.explosion-scan .skill-explosion-core,
.explosion-pierce .skill-explosion-core {
  width: 82px;
  height: 82px;
}

.explosion-lock .skill-explosion-core,
.explosion-pierce .skill-explosion-core {
  background: radial-gradient(circle, #fff 0 6%, #ebafff 7% 22%, rgba(168, 64, 235, 0.7) 23% 44%, transparent 66%);
}

.explosion-scan .skill-explosion-core {
  background: radial-gradient(circle, #fff 0 6%, #ccff9c 7% 22%, rgba(64, 204, 77, 0.7) 23% 44%, transparent 66%);
}

.explosion-heavy-blast .skill-explosion-core {
  width: 164px;
  height: 164px;
}

.explosion-heavy-blast .skill-explosion-ring {
  width: 108px;
  height: 108px;
  border-width: 5px;
}

.skill-motion {
  --motion-color: #c96cff;
  --motion-dir: 1;
  --motion-shift: 26px;
  position: absolute;
  left: var(--motion-left);
  top: var(--motion-top);
  z-index: 11;
  width: var(--motion-width);
  height: 0;
  transform: scaleX(var(--motion-dir));
  transform-origin: center;
  pointer-events: none;
}

.motion-streak {
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--motion-color), #fff);
  box-shadow: 0 0 12px var(--motion-color), 0 0 28px var(--motion-color);
  transform-origin: left center;
  animation: skillMotionStreak var(--motion-duration) ease-out var(--effect-delay) both;
}

.motion-afterimage {
  position: absolute;
  top: -38px;
  width: 42px;
  height: 76px;
  border: 2px solid var(--motion-color);
  border-radius: 48% 52% 42% 58%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--motion-color) 28%, transparent), transparent 68%);
  filter: blur(1px) drop-shadow(0 0 10px var(--motion-color));
  animation: skillAfterimage var(--motion-duration) ease-out var(--effect-delay) both;
}

.afterimage-one { left: 24%; opacity: 0.7; }
.afterimage-two { left: 58%; opacity: 0.42; animation-delay: calc(var(--effect-delay) + 75ms); }

.motion-lux-retreat { --motion-color: #c866ff; }
.motion-armored { --motion-color: #62df83; }
.motion-ram-advance { --motion-color: #9b5cff; }

.motion-ram-advance .motion-streak {
  height: 8px;
  top: -4px;
  background: linear-gradient(90deg, transparent, var(--motion-color) 42%, #fff);
  box-shadow: 0 0 14px var(--motion-color), 0 0 30px color-mix(in srgb, var(--motion-color) 72%, transparent);
}

.melee-impact.melee-ram-charge {
  width: 224px;
  height: 156px;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  animation: ramSlashFrame 1200ms ease-out var(--effect-delay) both;
}

.melee-impact.melee-ram-charge.skill-visual {
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}

.ram-slash-blade {
  --slash-angle: -24deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 206px;
  height: 12px;
  border-radius: 999px 30% 30% 999px;
  background: linear-gradient(90deg, transparent 0 5%, var(--skill-primary, #9b5cff) 24%, #fff 52%, var(--skill-bright, #e1c8ff) 72%, transparent 100%);
  box-shadow:
    0 0 10px var(--skill-bright, #e1c8ff),
    0 0 28px var(--skill-primary, #9b5cff);
  transform-origin: center;
  animation: ramSlashBlade 1100ms cubic-bezier(0.16, 0.76, 0.2, 1) var(--effect-delay) both;
}

.ram-slash-two {
  --slash-angle: 27deg;
  width: 178px;
  height: 8px;
  animation-delay: calc(var(--effect-delay) + 100ms);
}

@keyframes ramSlashFrame {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes ramSlashBlade {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(0.06) scaleY(0.35); }
  24% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(1) scaleY(1); }
  62% { opacity: 0.9; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(1.08) scaleY(0.72); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(1.18) scaleY(0.08); }
}

.melee-impact.melee-armored-clash {
  width: 176px;
  height: 126px;
  color: #e0ffd9;
  border: 4px solid rgba(91, 226, 118, 0.92);
  border-radius: 46%;
  background:
    radial-gradient(ellipse, rgba(255, 255, 255, 0.94) 0 4%, rgba(91, 226, 118, 0.72) 5% 22%, transparent 58%),
    repeating-conic-gradient(from 0deg, rgba(168, 255, 154, 0.88) 0 2deg, transparent 2deg 30deg);
  box-shadow: 0 0 26px rgba(80, 225, 108, 0.88), inset 0 0 30px rgba(75, 205, 93, 0.4);
  text-shadow: 0 0 14px #68ee78;
}

.skill-area {
  --area-color: #ff6c27;
  position: absolute;
  left: var(--area-left);
  top: var(--area-top);
  z-index: 13;
  width: var(--area-width);
  height: 0;
  pointer-events: none;
}

.skill-area > span {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  transform: translate(-50%, -50%);
}

.area-core {
  width: max(86px, 100%);
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.95) 0 5%, var(--area-color) 6% 28%, transparent 66%);
  filter: drop-shadow(0 0 16px var(--area-color));
  animation: skillAreaCore 720ms ease-out var(--effect-delay) both;
}

.area-wave {
  width: max(92px, 100%);
  height: 54px;
  border: 3px solid var(--area-color);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--area-color);
  animation: skillAreaWave 760ms ease-out var(--effect-delay) both;
}

.area-smoke {
  width: max(120px, 112%);
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(41, 36, 33, 0.78), transparent 68%);
  filter: blur(5px);
  animation: skillAreaSmoke 850ms ease-out var(--effect-delay) both;
}

.area-line-blast { --area-color: #ff4941; }
.area-ram-shock { --area-color: #ff372d; }
.area-shield-wave { --area-color: #63e17f; }

.area-line-blast .area-wave {
  width: 110%;
  height: 28px;
  border-radius: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 72, 62, 0.78), #fff, transparent);
}

.area-ram-shock .area-wave {
  width: max(150px, 128%);
  height: 94px;
  border-width: 5px;
}

.skill-surge {
  --surge-color: #c66cff;
  --surge-dir: 1;
  position: absolute;
  left: var(--surge-left);
  top: var(--surge-top);
  z-index: 13;
  width: var(--surge-width);
  height: 0;
  transform: scaleX(var(--surge-dir));
  transform-origin: center;
  pointer-events: none;
}

.skill-surge > span {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  transform: translate(-50%, -50%);
}

.surge-core {
  width: max(110px, 100%);
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.48), color-mix(in srgb, var(--surge-color) 42%, transparent) 28%, transparent 68%);
  filter: drop-shadow(0 0 22px var(--surge-color));
  animation: skillSurgeCore 900ms ease-out var(--effect-delay) both;
}

.surge-ring {
  width: 92px;
  height: 92px;
  border: 3px solid var(--surge-color);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--surge-color), inset 0 0 14px var(--surge-color);
  animation: skillSurgeRing 900ms ease-out var(--effect-delay) both;
}

.surge-rays {
  width: 150px;
  height: 150px;
  background: repeating-conic-gradient(from 0deg, var(--surge-color) 0 2deg, transparent 2deg 28deg);
  opacity: 0.48;
  animation: skillSurgeRays 1000ms ease-out var(--effect-delay) both;
}

.surge-mobility { --surge-color: #ffe16b; }
.surge-armor { --surge-color: #65df82; }
.surge-overdrive { --surge-color: #ff4338; }
.surge-fire { --surge-color: #ff5a24; }

.surge-fire .surge-core {
  left: 0;
  width: 108%;
  height: 82px;
  border-radius: 38%;
  background:
    radial-gradient(ellipse at 16% 58%, #fff4a6 0 3%, #ff6a24 4% 18%, transparent 38%),
    radial-gradient(ellipse at 50% 45%, #fff4a6 0 3%, #ff3e1f 4% 20%, transparent 42%),
    radial-gradient(ellipse at 84% 60%, #fff4a6 0 3%, #ff7a25 4% 18%, transparent 38%);
  transform-origin: left center;
  animation-name: skillFireSurgeCore;
}

.terrain-anomaly {
  position: absolute;
  left: var(--terrain-left);
  top: var(--field-plane-top);
  bottom: var(--field-plane-bottom);
  z-index: 5;
  width: var(--terrain-width);
  pointer-events: none;
}

.terrain-burning {
  border: 1px solid rgba(255, 90, 34, 0.34);
  border-block-color: rgba(255, 151, 52, 0.5);
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255, 53, 24, 0.12) 58%, rgba(255, 92, 22, 0.28) 100%),
    repeating-linear-gradient(112deg, transparent 0 9px, rgba(255, 133, 38, 0.12) 10px 12px);
  box-shadow: inset 0 -18px 24px rgba(255, 61, 22, 0.22), 0 0 18px rgba(255, 67, 25, 0.16);
  animation: terrainBurnPulse 1.1s ease-in-out infinite alternate;
}

.terrain-burning::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(255, 77, 18, 0.42));
  filter: blur(5px);
}

.terrain-burning > i {
  position: absolute;
  left: var(--flame-left);
  bottom: 2%;
  width: 18%;
  height: 48%;
  border-radius: 60% 35% 60% 30%;
  background: linear-gradient(180deg, rgba(255, 244, 152, 0.92), #ff7524 46%, rgba(255, 44, 20, 0.2) 82%, transparent);
  filter: blur(1px) drop-shadow(0 0 8px rgba(255, 76, 24, 0.92));
  transform-origin: center bottom;
  animation: terrainFlame 780ms ease-in-out var(--flame-delay) infinite alternate;
}

.burn-hit {
  position: absolute;
  left: var(--effect-left);
  top: var(--effect-top);
  z-index: 14;
  width: 0;
  height: 0;
  pointer-events: none;
}

.burn-hit > span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.burn-hit-flame {
  width: 44px;
  height: 68px;
  border-radius: 50% 42% 55% 36%;
  background: radial-gradient(ellipse at 50% 75%, #fff6a6 0 8%, #ff8a25 9% 32%, #ff311f 33% 56%, transparent 70%);
  filter: drop-shadow(0 0 10px rgba(255, 61, 26, 0.9));
  animation: burnHitFlame 720ms ease-out var(--effect-delay) both;
}

.burn-hit-ring {
  width: 36px;
  height: 20px;
  border: 2px solid #ff6d24;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff4f20;
  animation: burnHitRing 700ms ease-out var(--effect-delay) both;
}

.damage-burn {
  z-index: 20;
  color: #fff0b4;
  border-color: rgba(255, 102, 33, 0.86);
  background: rgba(59, 16, 5, 0.84);
  text-shadow: 0 0 12px #ff5a24;
}

.unit-skill-aura {
  --aura-color: #c66cff;
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 1;
  width: 126px;
  height: 126px;
  border: 3px solid var(--aura-color);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--aura-color) 20%, transparent) 64%, transparent 72%);
  box-shadow: 0 0 18px var(--aura-color), inset 0 0 16px var(--aura-color);
  transform: translate(-50%, -50%);
  animation: unitAuraPulse 920ms ease-in-out infinite alternate;
  pointer-events: none;
}

.unit-skill-aura::before,
.unit-skill-aura::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.unit-skill-aura::before {
  width: 148px;
  height: 148px;
  background: repeating-conic-gradient(var(--aura-color) 0 2deg, transparent 2deg 26deg);
  opacity: 0.32;
  animation: unitAuraSpin 5s linear infinite;
}

.unit-skill-aura::after {
  width: 94px;
  height: 94px;
  border: 1px dashed var(--aura-color);
  border-radius: 50%;
  animation: unitAuraSpin 3s linear infinite reverse;
}

.skill-state-armor:not(.skill-state-overdrive) .unit-skill-aura { --aura-color: #65df82; }
.skill-state-mobility .unit-skill-aura { --aura-color: #ffe36b; }
.skill-state-attack .unit-skill-aura { --aura-color: #ff6a3d; }
/* 制圧榴弾で火力が下がっている間。 */
.skill-state-attack-down .unit-skill-aura { --aura-color: #9a8cff; opacity: 0.8; }
.skill-state-detect-power .unit-skill-aura { --aura-color: #c86bff; }
.skill-state-shield .unit-skill-aura { --aura-color: #72dfff; }
.skill-state-overdrive .unit-skill-aura { --aura-color: #ff463b; }
.skill-state-burning .unit-skill-aura { --aura-color: #ff6328; opacity: 0.72; }

.unit-skill-shield {
  --shield-color: #72dfff;
  position: absolute;
  left: 73%;
  top: 51%;
  z-index: 5;
  width: 68px;
  height: 118px;
  border: 4px solid var(--shield-color);
  border-radius: 50%;
  background:
    repeating-linear-gradient(60deg, transparent 0 12px, color-mix(in srgb, var(--shield-color) 22%, transparent) 13px 15px),
    radial-gradient(ellipse, color-mix(in srgb, var(--shield-color) 26%, transparent), transparent 68%);
  box-shadow:
    0 0 18px var(--shield-color),
    inset 0 0 24px color-mix(in srgb, var(--shield-color) 70%, transparent);
  opacity: calc(0.58 + var(--shield-ratio, 1) * 0.38);
  transform: translate(-50%, -50%) perspective(120px) rotateY(-18deg);
  animation: unitShieldPulse 680ms ease-in-out infinite alternate;
  pointer-events: none;
}

.unit-skill-shield::before,
.unit-skill-shield::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed color-mix(in srgb, var(--shield-color) 82%, white);
  border-radius: 50%;
}

.unit-skill-shield::after {
  inset: 22px 14px;
  border-style: solid;
  box-shadow: 0 0 11px var(--shield-color);
}

.enemy-token .unit-skill-shield {
  --shield-color: #f23d46;
  left: 73%;
  transform: translate(-50%, -50%) perspective(120px) rotateY(-18deg);
}

.ally-token.portrait-kuroha .unit-skill-shield {
  --shield-color: #8fe388;
}

.skill-state-overdrive {
  filter: saturate(1.48) brightness(1.16) drop-shadow(0 0 18px rgba(255, 58, 42, 0.92)) !important;
}

.skill-state-mobility:not(.skill-state-overdrive) {
  filter: saturate(1.2) brightness(1.14) drop-shadow(0 0 16px rgba(255, 223, 83, 0.76));
}

.skill-state-armor:not(.skill-state-overdrive) {
  filter: saturate(1.16) brightness(1.1) drop-shadow(0 0 18px rgba(92, 224, 112, 0.82));
}

.skill-state-stopped {
  filter: grayscale(0.72) brightness(0.62) !important;
}

/* Propagate each skill's palette through every battle visual. */
.skill-visual.flying-bullet {
  background: radial-gradient(
    circle,
    #fff 0 12%,
    var(--skill-bright, #ffe9a3) 13% 42%,
    var(--skill-primary, #f0bd4f) 43% 100%
  );
  box-shadow:
    0 0 10px #fff,
    0 0 26px color-mix(in srgb, var(--skill-primary, #f0bd4f) 92%, transparent),
    0 0 44px color-mix(in srgb, var(--skill-primary, #f0bd4f) 48%, transparent);
}

.skill-visual.flying-bullet::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--skill-primary, #f0bd4f) 34%, transparent),
    var(--skill-bright, #ffe9a3)
  );
}

.skill-visual.muzzle-flash {
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--skill-primary, #f0bd4f) 88%, transparent) 38%,
      #fff 50%,
      transparent 74%
    ),
    radial-gradient(
      ellipse,
      #fff 0 9%,
      var(--skill-bright, #ffe9a3) 10% 28%,
      transparent 65%
    );
  filter: drop-shadow(
    0 0 13px color-mix(in srgb, var(--skill-primary, #f0bd4f) 96%, transparent)
  );
}

.skill-visual.impact-flash {
  width: 56px;
  height: 56px;
  background:
    linear-gradient(
      45deg,
      transparent 43%,
      var(--skill-bright, #ffe9a3) 44% 55%,
      transparent 56%
    ),
    linear-gradient(
      -45deg,
      transparent 43%,
      var(--skill-primary, #f0bd4f) 44% 55%,
      transparent 56%
    ),
    radial-gradient(
      circle,
      #fff 0 8%,
      var(--skill-bright, #ffe9a3) 9% 16%,
      var(--skill-primary, #f0bd4f) 17% 25%,
      transparent 40%
    );
  filter: drop-shadow(
    0 0 12px color-mix(in srgb, var(--skill-primary, #f0bd4f) 96%, transparent)
  );
}

.skill-visual.impact-particles i {
  background: linear-gradient(
    90deg,
    var(--skill-bright, #ffe9a3),
    var(--skill-primary, #f0bd4f)
  );
  box-shadow: 0 0 7px var(--skill-primary, #f0bd4f);
}

.skill-explosion.skill-visual {
  --explosion-color: var(--skill-primary, #f0bd4f);
}

.skill-explosion.skill-visual .skill-explosion-core {
  background: radial-gradient(
    circle,
    #fff 0 7%,
    var(--skill-bright, #ffe9a3) 8% 20%,
    var(--skill-primary, #f0bd4f) 21% 44%,
    color-mix(in srgb, var(--skill-deep, #9a6411) 34%, transparent) 45% 61%,
    transparent 72%
  );
}

.skill-motion.skill-visual {
  --motion-color: var(--skill-primary, #f0bd4f);
}

.skill-area.skill-visual {
  --area-color: var(--skill-primary, #f0bd4f);
}

.skill-area.skill-visual .area-wave {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--skill-primary, #f0bd4f) 76%, transparent),
    var(--skill-bright, #ffe9a3),
    transparent
  );
}

.skill-surge.skill-visual {
  --surge-color: var(--skill-primary, #f0bd4f);
}

.melee-impact.skill-visual {
  color: var(--skill-bright, #ffe9a3);
  border-color: color-mix(in srgb, var(--skill-primary, #f0bd4f) 88%, #fff);
  background:
    radial-gradient(
      ellipse,
      #fff 0 4%,
      var(--skill-bright, #ffe9a3) 5% 14%,
      color-mix(in srgb, var(--skill-primary, #f0bd4f) 88%, transparent) 15% 34%,
      transparent 64%
    ),
    repeating-conic-gradient(
      color-mix(in srgb, var(--skill-bright, #ffe9a3) 88%, transparent) 0 3deg,
      transparent 3deg 22deg
    );
  box-shadow:
    0 0 28px var(--skill-primary, #f0bd4f),
    0 0 58px color-mix(in srgb, var(--skill-primary, #f0bd4f) 68%, transparent);
  text-shadow: 0 0 16px var(--skill-primary, #f0bd4f);
}

.skill-side-enemy {
  --skill-primary: #f23d46;
  --skill-bright: #ffc1c5;
  --skill-deep: #9f131f;
}

.skill-effect.skill-side-enemy {
  --ability-accent: #f23d46;
  --ability-accent-bright: #ffc1c5;
}

.damage-pop.damage-artillery {
  z-index: 24;
  animation: damageRise 760ms ease-out var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley {
  --explosion-color: #ff702c;
  z-index: 16;
  filter:
    drop-shadow(0 0 22px rgba(255, 92, 30, 0.86))
    drop-shadow(0 0 40px color-mix(in srgb, var(--skill-primary, #ff5cab) 56%, transparent));
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-core {
  z-index: 4;
  width: 101px;
  height: 78px;
  overflow: visible;
  background:
    radial-gradient(circle at 48% 51%, #fff 0 5%, #fff6ad 6% 12%, #ffb21f 13% 24%, rgba(255, 76, 24, 0.96) 25% 42%, transparent 61%),
    radial-gradient(circle at 30% 44%, #ffe86d 0 8%, #ff7427 9% 30%, transparent 52%),
    radial-gradient(circle at 70% 39%, #fff0a1 0 7%, #ff5a24 8% 28%, transparent 50%);
  filter:
    brightness(1.18)
    drop-shadow(0 0 18px #ff842d)
    drop-shadow(0 0 32px var(--skill-primary, #ff5cab));
  animation: grilleBlastCore 850ms cubic-bezier(0.12, 0.72, 0.2, 1) var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-core::before,
.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-core::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, #fffbd1 0 8%, #ffc332 9% 25%, #ff5524 26% 58%, transparent 72%);
  filter: drop-shadow(0 0 13px #ff6f24);
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-core::before {
  left: 6px;
  top: 15px;
  width: 46px;
  height: 42px;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-core::after {
  right: 3px;
  top: 5px;
  width: 53px;
  height: 49px;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-ring {
  z-index: 2;
  width: 73px;
  height: 35px;
  border: 2px solid color-mix(in srgb, var(--skill-primary, #ff5cab) 76%, #ffd464);
  background: radial-gradient(ellipse, rgba(255, 195, 61, 0.3), transparent 64%);
  box-shadow:
    0 0 22px #ff702c,
    0 0 42px var(--skill-primary, #ff5cab),
    inset 0 0 18px rgba(255, 247, 197, 0.78);
  animation: grilleBlastRing 900ms ease-out var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .skill-explosion-smoke {
  z-index: 5;
  width: 103px;
  height: 67px;
  overflow: visible;
  background:
    radial-gradient(circle at 28% 58%, rgba(71, 62, 53, 0.96) 0 17%, transparent 36%),
    radial-gradient(circle at 51% 39%, rgba(45, 42, 39, 0.98) 0 23%, transparent 44%),
    radial-gradient(circle at 73% 62%, rgba(80, 68, 57, 0.9) 0 18%, transparent 38%);
  filter: blur(3px) drop-shadow(0 0 12px rgba(255, 96, 34, 0.36));
  animation: grilleBlastSmoke 980ms ease-out var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .grille-blast-ground {
  z-index: 1;
  width: 128px;
  height: 32px;
  border-radius: 50%;
  border-bottom: 5px solid rgba(255, 111, 38, 0.72);
  background:
    repeating-conic-gradient(from 88deg, rgba(255, 217, 112, 0.72) 0 2deg, transparent 2deg 13deg),
    radial-gradient(ellipse, rgba(255, 89, 30, 0.62), rgba(112, 54, 31, 0.28) 42%, transparent 70%);
  filter: drop-shadow(0 0 17px #ff6b27);
  animation: grilleBlastGround 900ms ease-out var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley .grille-blast-column {
  z-index: 3;
  width: 47px;
  height: 91px;
  border-radius: 48%;
  background:
    radial-gradient(circle at 50% 74%, #fff6a6 0 7%, #ff9b24 8% 22%, rgba(255, 68, 22, 0.82) 23% 39%, transparent 54%),
    linear-gradient(180deg, transparent 5%, rgba(255, 108, 34, 0.3) 30%, rgba(255, 198, 56, 0.82) 78%, transparent 100%);
  filter: blur(1px) drop-shadow(0 0 17px #ff7629);
  animation: grilleBlastColumn 900ms ease-out var(--effect-delay) both;
}

.skill-explosion.explosion-blast.skill-grille-range-volley > i {
  z-index: 6;
  width: 7px;
  height: 2px;
  background: linear-gradient(90deg, #fffbd0, #ffbd34 42%, #7b3922);
  box-shadow: 0 0 9px #ff7a28;
  animation-duration: 780ms;
}

.skill-explosion.explosion-blast.skill-grille-range-volley > i:nth-of-type(3n) {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #4b4038;
  box-shadow: 0 0 7px rgba(255, 103, 33, 0.72);
}

.skill-area.area-blast.skill-grille-range-volley,
.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
) {
  z-index: 15;
}

.skill-area.area-blast.skill-grille-range-volley .area-core,
.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
) .area-core {
  width: max(95px, 102%);
  height: 61px;
  background:
    radial-gradient(circle at 35% 56%, #fff 0 4%, #ffd34b 5% 14%, #ff6327 15% 34%, transparent 55%),
    radial-gradient(circle at 65% 46%, #fff6a1 0 5%, #ff9a2f 6% 20%, #d63a20 21% 39%, transparent 61%);
  filter:
    drop-shadow(0 0 20px #ff702c)
    drop-shadow(0 0 28px color-mix(in srgb, var(--skill-primary, #ff5cab) 62%, transparent));
  animation: grilleAreaFire 840ms ease-out var(--effect-delay) both;
}

.skill-area.area-blast.skill-grille-range-volley .area-wave,
.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
) .area-wave {
  width: max(113px, 123%);
  height: 37px;
  border: 2px solid color-mix(in srgb, var(--skill-primary, #ff5cab) 74%, #ffc94c);
  background:
    repeating-conic-gradient(from 89deg, rgba(255, 227, 139, 0.7) 0 2deg, transparent 2deg 17deg),
    radial-gradient(ellipse, rgba(255, 104, 34, 0.42), transparent 68%);
  box-shadow:
    0 0 20px #ff6f2a,
    0 0 38px var(--skill-primary, #ff5cab);
  animation: grilleAreaWave 900ms ease-out var(--effect-delay) both;
}

.skill-area.area-blast.skill-grille-range-volley .area-smoke,
.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
) .area-smoke {
  width: max(114px, 114%);
  height: 56px;
  background:
    radial-gradient(circle at 22% 55%, rgba(68, 61, 55, 0.92) 0 15%, transparent 32%),
    radial-gradient(circle at 46% 38%, rgba(39, 38, 37, 0.94) 0 21%, transparent 41%),
    radial-gradient(circle at 72% 57%, rgba(73, 63, 55, 0.88) 0 18%, transparent 36%);
  filter: blur(5px);
  animation: grilleAreaSmoke 980ms ease-out var(--effect-delay) both;
}

.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
).skill-side-enemy .area-core {
  background:
    radial-gradient(circle at 35% 56%, #fff 0 4%, #ffc1c5 5% 14%, #f23d46 15% 34%, transparent 55%),
    radial-gradient(circle at 65% 46%, #ffe0e2 0 5%, #ff6670 6% 20%, #9f131f 21% 39%, transparent 61%);
  filter:
    drop-shadow(0 0 20px #f23d46)
    drop-shadow(0 0 28px rgba(159, 19, 31, 0.78));
}

.skill-area.area-blast:is(
  .skill-raven-tile-blast,
  .skill-raven-full-barrage-lv2,
  .skill-panzer-assault-rear-blast
).skill-side-enemy .area-wave {
  border-color: #f23d46;
  background:
    repeating-conic-gradient(from 89deg, rgba(255, 193, 197, 0.72) 0 2deg, transparent 2deg 17deg),
    radial-gradient(ellipse, rgba(242, 61, 70, 0.48), transparent 68%);
  box-shadow:
    0 0 20px #f23d46,
    0 0 38px #9f131f;
}

@keyframes grilleBlastCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  30% { opacity: 1; transform: translate(-50%, -54%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -68%) scale(1.5); }
}

@keyframes grilleBlastRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  18% { opacity: 0.96; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}

@keyframes grilleBlastSmoke {
  0%, 18% { opacity: 0; transform: translate(-50%, -32%) scale(0.28); }
  42% { opacity: 0.92; transform: translate(-50%, -60%) scale(0.82); }
  100% { opacity: 0; transform: translate(-50%, -148%) scale(1.5); }
}

@keyframes grilleBlastGround {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.12); }
  20% { opacity: 0.96; }
  100% { opacity: 0; transform: translate(-50%, -46%) scaleX(2.1) scaleY(1.45); }
}

@keyframes grilleBlastColumn {
  0%, 10% { opacity: 0; transform: translate(-50%, -24%) scale(0.18); }
  32% { opacity: 1; transform: translate(-50%, -66%) scale(0.86); }
  100% { opacity: 0; transform: translate(-50%, -132%) scale(1.32); }
}

@keyframes grilleAreaFire {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
  18% { opacity: 1; transform: translate(-50%, -54%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(1.62); }
}

@keyframes grilleAreaWave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  24% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05); }
}

@keyframes grilleAreaSmoke {
  0%, 22% { opacity: 0; transform: translate(-50%, -38%) scale(0.26); }
  46% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.46); }
}

.ally-token.portrait-leopard.skill-state-armor:not(.skill-state-overdrive) .unit-skill-aura {
  --aura-color: #54c8ff;
}

.enemy-token .unit-skill-aura {
  --aura-color: #f23d46 !important;
}

.enemy-token.skill-state-armor:not(.skill-state-overdrive) {
  filter:
    saturate(1.24)
    brightness(1.12)
    drop-shadow(0 0 18px rgba(242, 61, 70, 0.88));
}

@keyframes unitShieldPulse {
  from { filter: brightness(0.88); }
  to { filter: brightness(1.28) drop-shadow(0 0 8px var(--shield-color)); }
}

.terrain-burning.burning-enemy {
  border-color: rgba(242, 61, 70, 0.58);
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(242, 61, 70, 0.16) 58%, rgba(174, 19, 31, 0.34) 100%),
    repeating-linear-gradient(112deg, transparent 0 9px, rgba(255, 107, 113, 0.14) 10px 12px);
  box-shadow: inset 0 -18px 24px rgba(174, 19, 31, 0.3), 0 0 18px rgba(242, 61, 70, 0.24);
}

.terrain-burning.burning-enemy::before {
  background: linear-gradient(180deg, transparent, rgba(242, 61, 70, 0.5));
}

.terrain-burning.burning-enemy > i {
  background: linear-gradient(180deg, #ffd8da, #f23d46 46%, rgba(159, 19, 31, 0.26) 82%, transparent);
  filter: blur(1px) drop-shadow(0 0 8px rgba(242, 61, 70, 0.94));
}

.burn-hit.skill-side-enemy .burn-hit-flame {
  background: radial-gradient(ellipse at 50% 75%, #ffe1e3 0 8%, #f86a70 9% 32%, #b01422 33% 56%, transparent 70%);
  filter: drop-shadow(0 0 18px rgba(242, 61, 70, 0.96));
}

.burn-hit.skill-side-enemy .burn-hit-ring {
  border-color: #f23d46;
  box-shadow: 0 0 14px #b01422;
}

/* Lux's rear attack gets a brighter muzzle flash and a longer gold trail. */
.muzzle-flash.skill-lux-second-line-shot {
  width: 70px;
  height: 30px;
}

.flying-bullet.skill-lux-second-line-shot {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}

.flying-bullet.skill-lux-second-line-shot::before {
  width: 72px;
  height: 7px;
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in srgb, var(--skill-primary) 45%, transparent);
}

/* Elefant fires one large shell into the enemy frontline. */
.flying-bullet.skill-elefant-zero-decay {
  width: 60px;
  height: 18px;
  margin-left: -30px;
  margin-top: -9px;
}

.flying-bullet.skill-elefant-zero-decay::before {
  width: 126px;
  height: 12px;
  opacity: 1;
}

/* Precision Salvo sends fast gold tracers toward each marked target. */
.flying-bullet.skill-jagdpanther-piercing-shot {
  width: 42px;
  height: 8px;
  margin-left: -21px;
  margin-top: -4px;
  transform: rotate(var(--precision-shot-angle, 0deg));
  background: linear-gradient(90deg, var(--skill-primary), var(--skill-bright) 45%, #fff 88%);
}

.flying-bullet.skill-jagdpanther-piercing-shot::before {
  width: var(--precision-trail-length, 220px);
  height: 16px;
  left: auto;
  right: calc(100% - 2px);
  opacity: 1;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--skill-primary) 24%, transparent) 22%,
    var(--skill-primary) 72%,
    var(--skill-bright)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--skill-primary) 65%, transparent);
}

/* MILAN keeps Marder's electric-blue effects; the trail follows the curved flight path. */
.flying-bullet.skill-marder-double-shot {
  width: 17px;
  height: 17px;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid color-mix(in srgb, var(--skill-bright) 88%, #fff);
  background: radial-gradient(
    circle,
    #fff 0 17%,
    var(--skill-bright) 18% 38%,
    var(--skill-primary) 39% 68%,
    var(--skill-deep) 69% 100%
  );
  box-shadow:
    0 0 12px #fff,
    0 0 30px var(--skill-primary),
    0 0 58px color-mix(in srgb, var(--skill-primary) 72%, transparent);
  animation: marderBulletPulse 130ms ease-in-out infinite alternate;
}

.flying-bullet.skill-marder-double-shot::before {
  width: 88px;
  height: 10px;
  left: auto;
  right: calc(100% - 1px);
  top: 50%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--skill-primary) 28%, transparent) 24%,
    var(--skill-primary) 68%,
    #fff
  );
  transform: translateY(-50%);
  box-shadow:
    0 0 10px var(--skill-primary),
    0 0 22px color-mix(in srgb, var(--skill-primary) 76%, transparent);
}

.flying-bullet.skill-marder-double-shot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid color-mix(in srgb, var(--skill-bright) 78%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--skill-primary);
  animation: marderBulletHalo 360ms ease-out infinite;
}

.muzzle-flash.skill-marder-double-shot {
  width: 108px;
  height: 50px;
  background:
    repeating-conic-gradient(
      from 90deg,
      transparent 0 9deg,
      color-mix(in srgb, var(--skill-primary) 82%, transparent) 10deg 14deg,
      transparent 15deg 28deg
    ),
    radial-gradient(
      ellipse,
      #fff 0 8%,
      var(--skill-bright) 9% 23%,
      var(--skill-primary) 24% 47%,
      transparent 70%
    );
  filter:
    drop-shadow(0 0 14px var(--skill-primary))
    drop-shadow(0 0 28px color-mix(in srgb, var(--skill-primary) 72%, transparent));
  animation-duration: 220ms;
}

.muzzle-flash.skill-marder-double-shot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--skill-primary), #fff, transparent);
  box-shadow: 0 0 14px var(--skill-primary);
  animation: marderMuzzleLance 220ms ease-out var(--effect-delay) both;
}

.skill-effect.skill-marder-double-shot {
  border-width: 2px;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--skill-primary) 64%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--skill-primary) 24%, transparent);
  text-shadow:
    0 0 9px #fff,
    0 0 20px var(--skill-primary);
}

@keyframes marderBulletPulse {
  from { transform: rotate(var(--missile-angle, 0deg)) scale(0.88); filter: brightness(1); }
  to { transform: rotate(var(--missile-angle, 0deg)) scale(1.18); filter: brightness(1.5); }
}

@keyframes marderBulletHalo {
  0% { opacity: 0.92; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes marderMuzzleLance {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.12); }
  32% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.3); }
}

@keyframes skillExplosionCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
}

@keyframes skillExplosionRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}

@keyframes skillExplosionSmoke {
  0%, 20% { opacity: 0; transform: translate(-50%, -30%) scale(0.3); }
  42% { opacity: 0.86; }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1.35); }
}

@keyframes skillExplosionSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(0); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(78px); }
}

@keyframes skillMotionStreak {
  0% { opacity: 0; transform: scaleX(0); }
  20% { opacity: 1; }
  78% { opacity: 0.86; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.08); }
}

@keyframes skillAfterimage {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  28% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--motion-shift)), -50%) scale(1.1); }
}

@keyframes skillAreaCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes skillAreaWave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

@keyframes skillAreaSmoke {
  0%, 24% { opacity: 0; transform: translate(-50%, -45%) scale(0.3); }
  44% { opacity: 0.78; }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.28); }
}

@keyframes skillSurgeCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  28% { opacity: 0.94; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); }
}

@keyframes skillFireSurgeCore {
  0% { opacity: 0; transform: translate(0, -50%) scaleX(0.08) scaleY(0.54); }
  28% { opacity: 0.94; transform: translate(0, -50%) scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: translate(0, -50%) scaleX(1.08) scaleY(1.18); }
}

@keyframes skillSurgeRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
  34% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes skillSurgeRays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  36% { opacity: 0.58; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(42deg); }
}

@keyframes terrainBurnPulse {
  from { filter: brightness(0.88); }
  to { filter: brightness(1.22); }
}

@keyframes terrainFlame {
  0% { opacity: 0.34; transform: scaleY(0.55) rotate(-7deg); }
  100% { opacity: 0.9; transform: scaleY(1.12) rotate(8deg); }
}

@keyframes burnHitFlame {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.25); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(1.35); }
}

@keyframes burnHitRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes unitAuraPulse {
  from { opacity: 0.48; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 0.92; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes unitAuraSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media not all {
  .battle-stage,
  body[data-viewport] .battle-stage {
    grid-template-rows: 66px minmax(0, 1fr) 116px;
  }

  .battle-hud,
  body[data-viewport] .battle-hud {
    grid-template-columns: minmax(340px, 500px);
    padding: 4px 8px 2px;
  }

  .frontline-hud {
    gap: 2px;
    padding: 4px 54px 5px;
  }

  .battle-hud-title .battle-stage-name {
    max-width: 180px;
    font-size: 10px;
  }

  .battle-hud-clock {
    font-size: 8px;
  }

  .frontline-row,
  body[data-viewport] .frontline-row {
    grid-template-columns: auto repeat(12, minmax(9px, 17px)) auto;
    gap: 3px;
  }

  .front-pip,
  body[data-viewport] .front-pip {
    height: 7px;
  }

  .side-label,
  body[data-viewport] .side-label {
    font-size: 8px;
  }

  .battle-status-strip {
    right: 15px;
    bottom: 3px;
  }

  .battle-status-strip .ui-tag,
  body[data-viewport] .battle-status-strip .ui-tag {
    min-height: 12px;
    padding: 0 3px;
    font-size: 7px;
  }

  .battle-retreat-button {
    left: 6px;
    top: 4px;
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .battle-enemy-icons {
    right: 6px;
    top: 4px;
    gap: 3px;
  }

  .battle-enemy-icon-slot {
    width: 31px;
  }

  .battle-info {
    height: 116px;
    gap: 4px;
    padding: 3px 0 4px;
  }

  .battle-info .unit-panel,
  body[data-viewport] .unit-panel {
    height: 109px;
    max-height: 109px;
  }

  .battle-info .unit-portrait {
    background-position: center 9%;
    background-size: 170% auto;
  }

  .unit-panel-overlay {
    left: 4px;
    right: 4px;
    bottom: 3px;
    padding: 3px 5px;
  }

  .unit-panel h3,
  body[data-viewport] .unit-panel h3 {
    font-size: 10px;
  }

  .unit-hp {
    font-size: 8px;
  }

  .unit-panel-hpbar {
    height: 3px;
    margin-top: 0;
  }

  .unit-panel-action {
    right: 4px;
    top: 3px;
    padding: 1px 3px;
    font-size: 7px;
  }

  .lane-unit,
  body[data-viewport] .unit-token,
  body[data-viewport] .ally-token,
  body[data-viewport] .enemy-token {
    width: 120px;
    min-height: 132px;
  }

  .unit-action-chip {
    font-size: 8px;
  }

  .battle-skill-cutin {
    top: 14%;
    width: 92vw;
    height: 84px;
  }

  .battle-skill-cutin-copy {
    padding: 8px 32px 8px 2px;
  }

  .battle-skill-cutin-copy strong {
    font-size: 19px;
  }

  .battle-skill-cutin-copy span,
  .battle-skill-cutin-copy small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield::before,
  .lane-unit.is-action-focus,
  .unit-action-chip,
  .lane-unit.is-damage-shaking,
  .battle-skill-cutin,
  .battle-skill-cutin::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The app already scales its 16:9 canvas on short landscape screens. Keep the
   logical battle composition unchanged so it is not reduced a second time. */
@media not all {
  .battle-stage,
  body[data-viewport] .battle-stage {
    grid-template-rows: 118px minmax(0, 1fr) 230px;
  }

  .battle-hud,
  body[data-viewport] .battle-hud {
    grid-template-columns: minmax(420px, 620px);
    padding: 10px 16px 6px;
  }

  .frontline-hud {
    gap: 5px;
    padding: 7px 64px 8px;
  }

  .battle-hud-title .battle-stage-name {
    max-width: none;
    font-size: 13px;
  }

  .battle-hud-clock {
    font-size: 11px;
  }

  .frontline-row,
  body[data-viewport] .frontline-row {
    grid-template-columns: auto repeat(12, minmax(12px, 22px)) auto;
    gap: 5px;
  }

  .front-pip,
  body[data-viewport] .front-pip {
    height: 10px;
  }

  .side-label,
  body[data-viewport] .side-label {
    font-size: 11px;
  }

  .battle-status-strip {
    right: 22px;
    bottom: 7px;
  }

  .battle-status-strip .ui-tag,
  body[data-viewport] .battle-status-strip .ui-tag {
    min-height: 16px;
    padding: 1px 5px;
    font-size: 9px;
  }

  .battle-retreat-button {
    left: 12px;
    top: 10px;
    min-height: 38px;
    padding: 5px 13px;
    font-size: inherit;
  }

  .battle-enemy-icons {
    right: 12px;
    top: 10px;
    gap: 5px;
  }

  .battle-enemy-icon-slot {
    width: 46px;
  }

  .battle-info {
    height: 230px;
    gap: 7px;
    padding: 6px 0 8px;
  }

  .battle-info .unit-panel,
  body[data-viewport] .unit-panel {
    height: 216px;
    max-height: 216px;
  }

  .battle-info .unit-portrait {
    background-position: center 11%;
    background-size: 205% auto;
  }

  .unit-panel-overlay {
    left: 7px;
    right: 7px;
    bottom: 7px;
    padding: 5px 7px;
  }

  .unit-panel h3,
  body[data-viewport] .unit-panel h3 {
    font-size: 15px;
  }

  .unit-hp {
    font-size: 13px;
  }

  .unit-panel-hpbar {
    height: 5px;
    margin-top: 2px;
  }

  .unit-panel-action {
    right: 7px;
    top: 6px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .lane-unit,
  body[data-viewport] .unit-token,
  body[data-viewport] .ally-token,
  body[data-viewport] .enemy-token {
    width: min(177px, 195%);
    min-height: 192px;
  }

  .unit-action-chip {
    font-size: 11px;
  }

  .battle-skill-cutin {
    top: 20%;
    width: min(920px, 92vw);
    height: 150px;
  }

  .battle-skill-cutin-copy {
    padding: 18px 56px 18px 4px;
  }

  .battle-skill-cutin-copy strong {
    font-size: clamp(22px, 3vw, 38px);
  }

  .battle-skill-cutin-copy span {
    font-size: 11px;
  }

  .battle-skill-cutin-copy small {
    font-size: 12px;
  }
}

.catalog-enemy-token .unit-action-chip,
.character-enemy-token .unit-action-chip {
  animation-name: actionChipInEnemy;
}

@keyframes actionChipInEnemy {
  0% { opacity: 0; transform: translate(-50%, -70%) scaleX(-1) scale(0.72); }
  100% { opacity: 1; transform: translate(-50%, -100%) scaleX(-1) scale(1); }
}

/* Refreshed armory catalog: keep rarity colors legible over the late UI skin. */
.hangar-part-info .part-rarity.rarity-standard,
.hangar-part-row.selected .hangar-part-info .part-rarity.rarity-standard {
  color: #8deefa;
}

.hangar-part-info .part-rarity.rarity-rare,
.hangar-part-row.selected .hangar-part-info .part-rarity.rarity-rare {
  color: #f6d579;
}

.hangar-part-info .part-rarity.rarity-prototype,
.hangar-part-row.selected .hangar-part-info .part-rarity.rarity-prototype {
  color: #e6b2ff;
}

.hangar-part-row.selected .hangar-part-info .part-drop-hint {
  color: rgba(255, 255, 255, 0.72);
}

body[data-viewport="mobile-landscape"] .hangar-part-row {
  min-height: 76px;
  grid-template-columns: 74px minmax(0, 1fr);
}

body[data-viewport="mobile-landscape"] .hangar-part-row .equipment-art {
  min-height: 74px;
}

body[data-viewport="mobile-landscape"] .hangar-part-info {
  gap: 1px;
}

body[data-viewport="mobile-landscape"] .hangar-part-info .part-rarity {
  font-size: 9px;
}

body[data-viewport="mobile-landscape"] .hangar-part-info .part-drop-hint {
  font-size: 10px;
}

/* The AI editor already has its own outer panel frame. */
body[data-route="ai"] .ai-chip-board {
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
  padding: 26px;
}

/* Parts list cards: keep the artwork square and show only the essential data. */
.hangar-part-row {
  min-height: 82px;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: minmax(82px, auto);
  overflow: hidden;
}

.hangar-part-row .equipment-art,
.hangar-part-row .equipment-empty-art {
  width: 62px;
  height: 62px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: center;
}

.hangar-part-info {
  height: 62px;
  max-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 5px;
  padding: 0 8px 0 0;
  overflow: hidden;
}

.hangar-part-info strong,
.hangar-part-info > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-viewport="mobile-landscape"] .hangar-part-row {
  min-height: 74px;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: minmax(74px, auto);
}

body[data-viewport="mobile-landscape"] .hangar-part-row .equipment-art,
body[data-viewport="mobile-landscape"] .hangar-part-row .equipment-empty-art {
  width: 54px;
  height: 54px;
  min-height: 0;
}

body[data-viewport="mobile-landscape"] .hangar-part-info {
  height: 54px;
  max-height: 54px;
  padding: 0 5px 0 0;
}

/* UI consistency audit: keep the fixed desktop canvas predictable on every viewport. */
body[data-viewport][data-route="start"] .app-shell,
body[data-viewport][data-route="scenario"] .app-shell,
body[data-viewport][data-route="battle"] .app-shell {
  padding: 0;
}

body[data-route="stages"] .screen {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--amber) !important;
  outline-offset: 2px;
}

button.modal-close.ui-image-icon,
button.carousel-arrow.ui-image-icon {
  background-image: var(--ui-icon-image), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 24px 24px, 100% 100%;
}

button.modal-close.ui-image-icon:hover,
button.modal-close.ui-image-icon:focus-visible,
button.carousel-arrow.ui-image-icon:hover,
button.carousel-arrow.ui-image-icon:focus-visible {
  background-image: var(--ui-icon-image), var(--ui-button-hover);
}

.modal-close {
  min-width: 48px;
  min-height: 44px;
}

.ai-loop-slot-clear,
body[data-route="ai"][data-viewport="mobile-landscape"] .ai-loop-slot-clear {
  min-width: 28px;
  min-height: 28px;
  background-image: var(--ui-icon-clear), var(--ui-button-normal);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 16px 16px, 100% 100%;
  font-size: 0;
}

button.ai-loop-slot-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  border-image: none;
  background: none;
}

.ai-loop-slot:has(.ai-loop-slot-select:focus-visible) {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.ai-loop-slot-clear {
  z-index: 3;
}

.ai-loop-slot-clear:not(:disabled):hover,
.ai-loop-slot-clear:not(:disabled):focus-visible {
  background-image: var(--ui-icon-clear), var(--ui-button-hover);
}

.modal-backdrop,
.portrait-settings-overlay {
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.portrait-settings-overlay {
  display: grid;
  place-items: center;
}

.mobile-qr-modal,
.portrait-settings-modal,
.retreat-confirm-modal,
.unlock-confirm-modal,
.home-options-modal,
.commander-name-editor-modal {
  max-height: calc(100% - 36px);
  border: 14px solid transparent;
  border-image-source: var(--ui-panel-frame);
  border-image-slice: 34 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  background-color: rgba(4, 7, 7, 0.96);
  background-image:
    linear-gradient(180deg, rgba(39, 223, 243, 0.06), transparent 48%),
    var(--ui-window-surface);
  background-repeat: no-repeat, repeat;
  background-size: auto, 360px 360px;
}

.mobile-qr-modal {
  width: min(420px, calc(100% - 36px));
  overflow-y: auto;
}

.retreat-confirm-modal {
  width: min(380px, calc(100% - 36px));
}

.portrait-settings-modal {
  width: min(440px, calc(100% - 36px));
  overflow-y: auto;
}

.portrait-settings-modal > .modal-head {
  position: sticky;
  top: -16px;
  z-index: 5;
  margin: -16px -16px 0;
  padding: 16px 16px 10px;
  background: rgba(4, 7, 7, 0.97);
  border-bottom: 1px solid rgba(39, 223, 243, 0.28);
}

.unlock-confirm-modal {
  width: min(520px, calc(100% - 40px));
  overflow-y: auto;
}

.home-options-modal {
  width: min(380px, calc(100% - 36px));
  overflow-y: auto;
}

.commander-name-editor-modal {
  width: min(420px, calc(100% - 36px));
}

.qr-error,
.home-option-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.qr-error {
  color: #3d1613;
  text-align: center;
}

.battle-result-modal {
  z-index: 60;
  width: min(620px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  overflow-y: auto;
}

.exploration-result-modal {
  width: min(760px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 16px 20px;
  border-width: 1px;
  overflow: hidden;
}

.exploration-result-modal.is-lost {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.exploration-result-rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.exploration-result-rewards > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
}

.exploration-result-rewards > div > strong {
  flex: 0 0 auto;
  font-size: 14px !important;
}

.exploration-result-rewards :is(.exploration-reward-list, .exploration-pending-values) {
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.exploration-result-rewards .exploration-reward-chip {
  max-width: 100%;
  font-size: 14px;
}

.exploration-result-rewards .exploration-reward-chip > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.exploration-result-modal .exploration-result-actions {
  margin: 0 !important;
}

.exploration-result-modal .exploration-result-actions button {
  min-height: 48px;
}

.exploration-result-modal .exploration-risk-note {
  font-size: 14px;
}

.battle-stage.has-result .battlefield,
.battle-stage.has-result .battle-info,
.battle-stage.has-result .battle-hud {
  pointer-events: none;
}

.battle-unit-detail-backdrop {
  background: rgba(0, 0, 0, 0.34);
}

.battle-unit-detail {
  max-height: calc(100% - 24px);
  overflow-y: auto;
}

.battle-ability-detail em {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.formation-detail-panel .formation-ability-row {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(39, 223, 243, 0.55) rgba(0, 0, 0, 0.22);
}

.formation-detail-panel .formation-ability-row p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.formation-team-help {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  color: rgba(226, 234, 228, 0.78);
  background: none;
  border: 0;
  text-shadow: 0 1px 3px #000, 0 0 5px #000;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}

.formation-focus-team .formation-team-slots {
  padding-top: 18px;
}

.hangar-parts-list {
  padding-right: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(39, 223, 243, 0.58) rgba(0, 0, 0, 0.22);
}

.hangar-parts-list::-webkit-scrollbar {
  display: block;
  width: 6px;
}

.hangar-parts-list::-webkit-scrollbar-thumb {
  background: rgba(39, 223, 243, 0.58);
  border-radius: 999px;
}

.hangar-parts-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
}

.scenario-back-button,
.scenario-skip-button {
  position: absolute;
  top: 16px;
  z-index: 3;
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.scenario-back-button {
  left: 16px;
}

.scenario-skip-button {
  right: 16px;
}

.scenario-next-button {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  min-width: 92px;
  min-height: 40px;
  padding: 4px 12px;
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.scenario-text {
  padding-right: 126px;
}

.home-command-panel {
  min-height: 310px;
}

.battle-skill-cutin {
  width: min(920px, calc(100% - 36px));
}

.battle-skill-cutin-copy strong,
.loading-screen-title {
  font-size: 30px;
}

/* --- Story mode: locked stages, scene stages, name entry, battle tutorials --- */
.stage-node.locked {
  cursor: default;
  opacity: 0.42;
}

.stage-node.locked:hover {
  background: transparent;
}

.stage-node.scene .stage-node-dot {
  border-radius: 4px;
}

.tag-party {
  color: #f3f5f3;
  border-color: rgba(39, 223, 243, 0.45);
  background: rgba(39, 223, 243, 0.1);
}

.scenario-stage.is-scene {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.55));
}

.scenario-textbox.has-prompt {
  cursor: default;
}

.scenario-name-form {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.scenario-name-row {
  display: flex;
  gap: 10px;
}

.scenario-name-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  color: #f5f7f5;
  font: inherit;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(39, 223, 243, 0.55);
  border-radius: 4px;
}

.scenario-name-input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.scenario-name-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.scenario-name-submit {
  min-width: 96px;
  min-height: 44px;
  color: #fff;
  font-weight: 900;
}

.scenario-name-preview {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.battle-tutorial {
  position: absolute;
  inset: 0;
  z-index: 90; /* above the skill cut-in (80) */
  cursor: pointer;
  background: rgba(0, 0, 0, 0.22);
}

.battle-tutorial-box {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, calc(100% - 32px));
  padding: 14px 20px 14px;
  display: grid;
  gap: 8px;
  background: rgba(4, 10, 12, 0.92);
  border: 1px solid rgba(39, 223, 243, 0.5);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(39, 223, 243, 0.18);
}

.battle-tutorial-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.battle-tutorial-kicker {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.battle-tutorial-speaker {
  color: #f5f7f5;
  font-size: 18px;
}

.battle-tutorial-text {
  margin: 0;
  color: #f5f7f5;
  font-size: 19px;
  line-height: 1.6;
  white-space: pre-line;
}

.battle-tutorial-text.narration {
  color: #dfe7e2;
}

.battle-tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.battle-tutorial-control {
  min-height: 40px;
  padding: 0 14px;
  color: #fff;
  font-weight: 800;
}

.battle-tutorial-mute {
  color: var(--muted);
}

/* 白刃: the two frontline boundaries slam together at the meeting point,
   flash, then ease back to their real positions (see applyFrontlineBoundaries). */
.battlefield.is-frontline-clash .frontline-boundary {
  transition: left 240ms cubic-bezier(0.55, 0, 1, 0.45);
}

.battlefield.is-frontline-clash .frontline-boundary::before {
  width: 4px;
  opacity: 1;
  box-shadow: 0 0 14px currentColor, 0 0 36px currentColor;
}

.frontline-clash-flash {
  position: absolute;
  left: var(--frontline-clash-x);
  top: var(--field-plane-top);
  bottom: var(--field-plane-bottom);
  z-index: 8;
  width: 72px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, 0.85), rgba(255, 214, 140, 0.35) 40%, transparent 72%);
}

.battlefield.is-frontline-clash .frontline-clash-flash {
  animation: frontline-clash-flash 380ms ease-out 220ms both;
}

@keyframes frontline-clash-flash {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
  25% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield.is-frontline-clash .frontline-boundary {
    transition: none;
  }

  .battlefield.is-frontline-clash .frontline-clash-flash {
    animation: none;
  }
}

/* Part slots: all five tiles in a fixed row, no arrows and no scrolling. */
.hangar-slot-carousel.is-fixed,
body[data-viewport] .hangar-slot-carousel.is-fixed {
  grid-template-columns: minmax(0, 1fr);
}

.slot-carousel-track.is-fixed,
body[data-viewport] .slot-carousel-track.is-fixed {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
  padding: 0;
  cursor: default;
  touch-action: auto;
}

/* While a tutorial note pauses the battle, freeze on-screen animations too
   (skill cut-ins, hit effects) so the note can be read over them. */
.battle-stage.is-tutorial-paused :is(*, *::before, *::after) {
  animation-play-state: paused !important;
}

.battle-stage.is-tutorial-paused :is(.battle-tutorial, .battle-tutorial *) {
  animation-play-state: running !important;
}

/* Keep cut-ins below the top HUD controls with room for their outlines. */
.battle-skill-cutin {
  top: 80px;
}

.battle-tutorial.has-cutin .battle-tutorial-box {
  top: auto;
  bottom: 24px;
}

/* Ally cut-ins take the left half, enemy cut-ins the right half, so an ally
   and an enemy skill can be shown at the same time without overlapping. */
.battle-skill-cutin {
  width: calc(50% - 6px);
  max-width: 640px;
}

.battle-skill-cutin .battle-skill-cutin-copy {
  min-width: 0;
}

.battle-skill-cutin .battle-skill-cutin-copy strong {
  font-size: clamp(20px, 2.4vw, 32px);
  overflow-wrap: anywhere;
}

/* Scene stages have no deploy map or enemy row; keep the 開始 button in the
   same bottom-right slot as the battle stages' 出撃 button. */
.stage-detail.is-scene {
  grid-template-rows: minmax(0, 1fr) 116px;
}

.stage-detail.is-scene .stage-bottom-row {
  justify-content: flex-end;
}

/* Formation member list: one card per row. Each card shows the unarmed
   standee from head to waist on the right, with name and job on the left. */
body[data-viewport] .formation-card-console {
  grid-template-columns: 300px minmax(0, 1fr) 320px;
}

body[data-viewport] .formation-card-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 116px;
  gap: 6px;
}

body[data-viewport] .formation-character-card .formation-card-portrait {
  background-image: var(--standee-off-image, var(--character-image));
  background-repeat: no-repeat;
  background-position: right 4% top 5%;
  background-size: auto 260%;
  background-color: #020303;
}

body[data-viewport] .formation-card-body {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: 2px;
  padding: 8px 10px;
}

/* 長い名前（ヤークトパンター等）も省略せず1行で全部出す。 */
body[data-viewport] .formation-card-body strong {
  overflow: visible;
  font-size: 18px;
  text-overflow: clip;
}

body[data-viewport] .formation-card-body span {
  grid-column: 1;
  font-size: 15px;
  text-align: left;
}

body[data-viewport] .formation-card-ribbon {
  top: 8px;
  right: auto;
  left: 8px;
  min-height: 24px;
  padding: 0 10px;
  font-size: 14px;
}

/* Formation dock: larger chibis in the advance pose; the one being dragged
   switches to the retreat pose. The thumbnails are 512px squares with the
   art's feet at 89% height, so the art is scaled up and anchored low. */
body[data-viewport] .formation-focus-team .formation-chibi {
  --battle-chibi-image: var(--chibi-advance-image, var(--chibi-image));
  width: 100%;
  height: 104px;
  background-position: center bottom -10px;
  background-size: auto 120%;
}

body[data-viewport] .formation-focus-team .formation-team-slot.reordering .formation-chibi {
  --battle-chibi-image: var(--chibi-retreat-image, var(--chibi-image));
}

/* Raise the armed standee partway toward the chibi dock below it
   (halfway between the original spot and fully clearing the dock). */
body[data-viewport] .formation-focus-art {
  inset: -12% 0 12% 0;
}

/* Parts list cards: give the artwork the same breathing room on the left
   as the gap between it and the text. */
body[data-viewport] .hangar-part-row {
  padding-left: 10px;
}

/* Hangar preview: the armed standees are square, wider than this box at
   full height, so fit the whole image instead of cropping its sides. */
body[data-viewport] .hangar-preview-card .hangar-character-art {
  background-position: center 2%;
  background-size: contain;
}

/* AI screen summary: larger chibi. The box reaches up into the panel's top
   padding, and the image is pinned to the box top so tall poses never lose
   their heads (thumbnail art spans roughly 1%-89% of the image height).
   Its pose follows the selected chip's action (set from renderAiCharacterSummary). */
body[data-viewport] .ai-character-unit {
  overflow: visible;
}

body[data-viewport] .ai-character-chibi.formation-chibi {
  height: calc(100% + 14px);
  margin-top: -14px;
  background-position: center top;
  background-size: auto 112%;
}

/* Battle unit cards: frame the armed standee from head to thigh instead of
   a face close-up. Sized by the card height so the framing stays the same
   however many units share the row (the square standee is drawn 2.31x the
   card height, starting about 4% down the image). */
body[data-viewport] .battle-info .unit-portrait {
  background-position: center 7%;
  background-size: auto 231%;
}

/* Exploration rules: larger, brighter text. Each rule stacks its label above
   its description so the description gets the panel's full width. */
body[data-viewport] .explore-rules .panel-kicker {
  font-size: 18px;
}

body[data-viewport] .explore-rule {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 4px;
  padding-top: 8px;
}

body[data-viewport] .explore-rule strong {
  font-size: 18px;
  line-height: 1.3;
}

body[data-viewport] .explore-rule span {
  color: #dde8ec;
  font-size: 17px;
  line-height: 1.55;
}

/* SKILL rows use the same amber heading as the battle screen's skill line. */
body[data-viewport] .formation-ability-row.ability-skill .formation-ability-kind {
  color: var(--amber);
}

/* Wave change: a black curtain slides in from the right, the next wave is
   set up behind it, then it slides out to the left (see stepWaveTransition). */
.wave-curtain {
  position: absolute;
  inset: 0;
  z-index: 97;
  background:
    linear-gradient(90deg, rgba(39, 223, 243, 0.55) 0 3px, transparent 3px),
    #020405;
  pointer-events: auto;
}

.wave-curtain.is-covering {
  animation: wave-curtain-in 450ms cubic-bezier(0.6, 0, 0.4, 1) both;
}

.wave-curtain.is-revealing {
  animation: wave-curtain-out 450ms cubic-bezier(0.6, 0, 0.4, 1) both;
}

@keyframes wave-curtain-in {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes wave-curtain-out {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-curtain.is-covering { animation: wave-curtain-fade-in 300ms both; }
  .wave-curtain.is-revealing { animation: wave-curtain-fade-out 300ms both; }
}

@keyframes wave-curtain-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wave-curtain-fade-out { from { opacity: 1; } to { opacity: 0; } }

.battle-hud-wave {
  flex: none;
  color: #f6d579;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Each clear reward gets a full row when there are several (equipment name +
   credits side by side truncated the equipment name). */
.battle-result-reward-entry {
  flex-basis: 100%;
}

/* Replays list the first-clear equipment as already received. */
.battle-result-reward-entry.is-claimed {
  opacity: 0.5;
}

/* Equipment rewards show the part's own art in the 38px icon slot. */
.battle-result-reward .battle-result-reward-art {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(39, 223, 243, 0.3);
}

/* Story guide lines ({ guide, text }): styled like the battle tutorial notes. */
.scenario-textbox.is-guide {
  border-color: rgba(39, 223, 243, 0.5);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 0 18px rgba(39, 223, 243, 0.18);
}

.scenario-guide-title {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.scenario-text.guide {
  color: #f5f7f5;
  font-style: normal;
}

/* The stage background preview keeps one size and position on every stage:
   fixed 16:9 in the right column, pinned to the top of the briefing row,
   instead of stretching with that row (taller on scene stages). */
.stage-briefing-background {
  align-self: start;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Figures (UI screenshots) attached to tutorial notes and guide lines. */
.battle-tutorial-box.has-figure {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
}

.battle-tutorial-box.has-figure > :not(.battle-tutorial-figure) {
  grid-column: 1;
}

.battle-tutorial-figure {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  max-height: 340px;
  max-width: 320px;
  object-fit: contain;
  border: 1px solid rgba(39, 223, 243, 0.4);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.scenario-figure {
  position: absolute;
  left: 50%;
  bottom: 168px;
  z-index: 2;
  transform: translateX(-50%);
  max-width: min(560px, calc(100% - 48px));
  max-height: calc(100% - 248px);
  object-fit: contain;
  border: 1px solid rgba(39, 223, 243, 0.45);
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Top-left HUD cluster: 撤退 button + 作戦時間 clock side by side. */
.battle-hud-left {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.battle-hud .battle-hud-left .battle-retreat-button {
  position: static;
}

/* 作戦時間: digital countdown (M:SS). */
.battle-time-clock {
  --clock-color: #27dff3;
  flex: none;
  min-width: 66px;
  min-height: 38px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: var(--clock-color);
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--clock-color) 55%, transparent);
  background: rgba(3, 6, 6, 0.85);
  border: 1px solid color-mix(in srgb, var(--clock-color) 60%, transparent);
  border-radius: 4px;
}

.battle-time-clock.is-low {
  --clock-color: #f6d579;
}

.battle-time-clock.is-critical {
  --clock-color: #ff6861;
  animation: battle-clock-critical 1s ease-in-out infinite;
}

@keyframes battle-clock-critical {
  50% { box-shadow: 0 0 14px rgba(255, 104, 97, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-time-clock.is-critical { animation: none; }
}

/* Home secretary standee: fixed at the horizontal center of the screen, 140%.
   Scaling around the center pushes the top 144px off screen, so it is moved
   down 150px to keep every character's head in view. */
body[data-viewport] .home-operator.operator-standee {
  left: 50%;
  transform: translate(-50%, 150px) scale(1.4);
}

/* Loading screen: one unlocked character's unarmed standee on the right and
   the profile card on the upper left (see appendLoadingMedia). */
.loading-screen-overlay.has-character,
body[data-route="stages"],
body[data-route="explore"],
body[data-route="formation"],
body[data-route="hangar"],
body[data-route="ai"] {
  background:
    radial-gradient(ellipse 46% 70% at 74% 58%, rgba(39, 223, 243, 0.24), transparent 70%),
    repeating-linear-gradient(90deg, rgba(108, 239, 246, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(108, 239, 246, 0.04) 0 1px, transparent 1px 48px),
    #020506;
}

.loading-screen-standee {
  position: absolute;
  right: 7%;
  bottom: -9%;
  height: 93%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
  filter: drop-shadow(0 0 26px rgba(39, 223, 243, 0.22));
}

.loading-screen-standee.is-ready {
  opacity: 1;
  transform: none;
}

.loading-screen-overlay.has-character .loading-screen-shade {
  background:
    linear-gradient(180deg, transparent 58%, rgba(0, 3, 5, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 5, 7, 0.6), transparent 56%);
}

.loading-screen-profile {
  position: absolute;
  left: 34px;
  top: 34px;
  z-index: 2;
  width: min(46%, 540px);
  display: grid;
  gap: 8px;
  padding: 16px 20px 18px;
  border-left: 3px solid rgba(67, 237, 244, 0.9);
  background: linear-gradient(90deg, rgba(2, 10, 12, 0.86), rgba(2, 10, 12, 0.6));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.loading-screen-profile-kicker {
  color: rgba(108, 239, 246, 0.8);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.loading-screen-profile-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.loading-screen-profile-name {
  color: #f4ffff;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(39, 223, 243, 0.4);
}

.loading-screen-profile-job {
  padding: 2px 8px;
  border: 1px solid rgba(246, 213, 121, 0.7);
  color: #f6d579;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.loading-screen-profile-text {
  margin: 0;
  color: rgba(226, 240, 238, 0.92);
  font-size: 14px;
  line-height: 1.85;
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen-standee { transition: none; transform: none; }
}

/* Standee balance: a per-character zoom for armed (on) and unarmed (off)
   art, chosen by eye so the cast looks natural side by side. The art has very
   different head-to-body ratios, so heads are only brought partly together,
   and the three body heights (小 / 中 / 大) stay visible. The zoom is applied
   with transform, so it is never clipped by the box. Used by scenario
   dialogue, the home secretary, the loading screen, the formation screen
   and the hangar. */
.portrait-elena { --standee-on-zoom: 0.96; --standee-off-zoom: 1; } /* 小 */
.portrait-seina { --standee-on-zoom: 0.97; --standee-off-zoom: 0.95; } /* 小 */
.portrait-grille { --standee-on-zoom: 0.98; --standee-off-zoom: 0.97; } /* 小 */
.portrait-kuroha { --standee-on-zoom: 0.93; --standee-off-zoom: 0.95; } /* 中 */
.portrait-elefant { --standee-on-zoom: 1.14; --standee-off-zoom: 1.12; } /* 中 */
.portrait-jagdpanther { --standee-on-zoom: 1.05; --standee-off-zoom: 1.05; } /* 中 */
.portrait-leopard { --standee-on-zoom: 1.09; --standee-off-zoom: 1.03; } /* 中 */
.portrait-flamingo { --standee-on-zoom: 1.12; --standee-off-zoom: 1.1; } /* 大 */
.portrait-rammtiger { --standee-on-zoom: 1.17; --standee-off-zoom: 1.15; } /* 大 */

.scenario-standee {
  transform: translateX(-50%) translateY(var(--scenario-story-drop, 0%)) scale(var(--standee-zoom, 1));
  transform-origin: 50% 100%;
}

.scenario-standee.standee-unarmed { --standee-zoom: calc(var(--standee-off-zoom, 1) * var(--scenario-story-zoom, 1)); }

/* Story dialogue only (2026-10-20): the three leads are drawn a little larger
   than elsewhere. ルクス sits 3% lower, and マウス/マルダー are lowered so the top
   of their heads lines up with ルクス's (drop = share of the standee box height,
   from each standee-off image's first opaque row: ルクス 35, マウス 42,
   マルダー 2 of 2432px). Recompute the drops if a zoom or the art changes.
   Home, loading and formation screens keep the zoom above. */
.scenario-standee.portrait-elena { --scenario-story-zoom: 1.05; --scenario-story-drop: 3%; }
.scenario-standee.portrait-kuroha { --scenario-story-zoom: 1.177; --scenario-story-drop: 9.4%; }
.scenario-standee.portrait-seina { --scenario-story-zoom: 1.133; --scenario-story-drop: 7.06%; }
/* ラムティーガ: 5% larger and 8% lower in story dialogue only (2026-10-23). */
.scenario-standee.portrait-rammtiger { --scenario-story-zoom: 1.05; --scenario-story-drop: 8%; }
/* フラミンゴ: 10% then 5% larger (1.1 × 1.05) and 8% lower in story dialogue only (2026-10-23). */
.scenario-standee.portrait-flamingo { --scenario-story-zoom: 1.155; --scenario-story-drop: 8%; }
/* グリレ: 5% larger and 4% lower in story dialogue only (2026-10-23). */
.scenario-standee.portrait-grille { --scenario-story-zoom: 1.05; --scenario-story-drop: 4%; }

/* Home: the 140% scale is around the center and the legs are already off
   screen, so the extra zoom keeps the top of the art where it was (moving
   down by the added half height) and grows downward; heads stay in view. */
body[data-viewport] .home-operator.operator-standee {
  transform:
    translate(-50%, calc(150px + (var(--standee-off-zoom, 1) - 1) * 70%))
    scale(calc(1.4 * var(--standee-off-zoom, 1)));
}

.loading-screen-standee {
  transform-origin: 50% 100%;
  transform: translateX(18px) scale(var(--standee-off-zoom, 1));
}

.loading-screen-standee.is-ready {
  transform: scale(var(--standee-off-zoom, 1));
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen-standee { transform: scale(var(--standee-off-zoom, 1)); }
}

/* Formation screen: the armed focus art used to be scaled 130% from its top,
   which put the feet (about 97% down the art) at 126% of the box. It is now
   118% so the large characters stay below the screen top, and the art is
   moved so the feet stay at 126% for every zoom (126% - 1.18 * 97% * zoom).
   The member cards crop the unarmed art, so the zoom enlarges the crop. */
body[data-viewport] .formation-focus-art {
  transform:
    translateY(calc(126% - var(--standee-on-zoom, 1) * 114.46%))
    scale(calc(1.18 * var(--standee-on-zoom, 1)));
}

body[data-viewport] .formation-character-card .formation-card-portrait {
  background-size: auto calc(260% * var(--standee-off-zoom, 1));
}

body[data-viewport] .hangar-preview-card .hangar-character-art {
  transform: scale(var(--standee-on-zoom, 1));
}

/* Battle cards crop the armed art around the face. Match head sizes despite
   different frame silhouettes; x/y position the face inside this crop only. */
body[data-viewport] .battle-info .unit-portrait {
  background-position: var(--battle-card-x, 50%) var(--battle-card-y, 7%);
  background-size: auto calc(231% * var(--battle-card-zoom, 1));
}

.portrait-elena {
  --battle-card-zoom: 1.08;
  --battle-card-x: 30%;
  --battle-card-y: 0%;
  --skill-cutin-portrait-position: 40% top;
  --skill-cutin-portrait-size: 145% auto;
  --armed-preview-position: 35% top;
}
.portrait-seina { --battle-card-zoom: 1.15; --battle-card-y: 8%; }
.portrait-kuroha { --battle-card-x: 90%; }
.portrait-grille {
  --battle-card-zoom: 1.08;
  --battle-card-x: 55%;
  --battle-card-y: -1%;
  --skill-cutin-portrait-position: 55% top;
  --skill-cutin-portrait-size: 145% auto;
  --armed-preview-position: 55% top;
}
.portrait-elefant { --battle-card-zoom: 1.55; --battle-card-x: 72%; --battle-card-y: 15%; }
.portrait-rammtiger { --battle-card-zoom: 1.5; --battle-card-x: 55%; --battle-card-y: 9%; }
.portrait-flamingo { --battle-card-zoom: 1.5; --battle-card-x: 60%; --battle-card-y: 0%; }
.portrait-leopard { --battle-card-zoom: 1.35; --battle-card-x: 60%; --battle-card-y: 8%; }
.portrait-jagdpanther { --battle-card-zoom: 1.22; --battle-card-y: 2%; }

/* Updated armed art: keep the face centered in unlock previews without
   changing the unarmed member-list, secretary, or story portraits. */
.unlock-character-preview:is(.portrait-elena, .portrait-grille) {
  background-position: var(--armed-preview-position);
}

/* 秘書設定: tier ②③ videos registered with 秘書動画登録.html are listed
   under their own heading and chosen from small 16:9 thumbnails. */
.portrait-select-heading {
  margin: 14px 0 8px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.portrait-select-heading:first-of-type {
  margin-top: 4px;
}

.portrait-select-videos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portrait-select-video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #020506;
}

.portrait-select-video-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Locked secretary videos: dimmed thumbnail, the unlock condition with the
   progress so far, and a credit unlock button. */
.portrait-select-video-item.locked {
  cursor: default;
  align-content: start;
}

.portrait-select-video-item.locked .portrait-select-video-thumb {
  opacity: 0.4;
  filter: grayscale(1) brightness(0.55);
}

.portrait-select-conditions {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(226, 234, 228, 0.7);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.portrait-select-buy {
  min-height: 30px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

.unlock-secretary-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 4px auto 10px;
  object-fit: cover;
}

/* Home secretary video (tiers ②③): a 16:9 loop over the whole home screen,
   on the standee's layer, so the menus and the slideshow stay on top. */
.home-secretary-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #020506;
}

/* 秘書設定: a larger window so the choices are easy to pick. Characters
   show their unarmed standee (upper body) instead of the chibi. */
.portrait-settings-modal {
  width: min(1080px, calc(100% - 36px));
}

.portrait-settings-modal .portrait-select-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.portrait-settings-modal .portrait-select-videos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portrait-settings-modal .portrait-select-item {
  align-content: start;
  padding: 8px 8px 10px;
  font-size: 18px;
}

.portrait-select-standee {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: radial-gradient(ellipse at 50% 30%, rgba(39, 223, 243, 0.12), transparent 70%);
}

.portrait-select-item.locked .portrait-select-standee {
  opacity: 0.34;
  filter: grayscale(1) brightness(0.56);
}

.portrait-settings-modal .portrait-select-conditions {
  font-size: 12px;
}

.portrait-settings-modal .portrait-select-buy {
  min-height: 34px;
  font-size: 13px;
}

/* Story select: clear rewards sit in the bottom row, between the enemy list
   and the 出撃 button. */
.stage-reward-panel {
  flex: 0 0 212px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.stage-reward-title {
  color: var(--amber);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.stage-reward-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stage-reward-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(213, 161, 58, 0.45);
  background: linear-gradient(90deg, rgba(213, 161, 58, 0.15), rgba(5, 6, 6, 0.25));
}

.stage-reward-entry.is-claimed {
  opacity: 0.5;
}

.stage-reward-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
}

.stage-reward-icon.stage-reward-art {
  border: 1px solid rgba(39, 223, 243, 0.3);
}

.stage-reward-icon.stage-reward-character {
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(39, 223, 243, 0.42));
}

.stage-reward-icon.stage-reward-credit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(39, 223, 243, 0.3);
  background: rgba(0, 0, 0, 0.34);
}

.stage-reward-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.stage-reward-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #f5f7f5;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-reward-copy small {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.stage-bottom-row.has-reward .stage-enemy-icons {
  grid-template-columns: repeat(var(--stage-enemy-columns, 4), minmax(0, 1fr));
}

/* Full-screen story illustrations ({ illustration } lines in js/story.js).
   Shown in place of the standee, under the text box and controls. */
.scenario-illustration {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
}

.scenario-illustration.is-entering {
  animation: scenario-illustration-in 600ms ease-out both;
}

.scenario-illustration-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

@keyframes scenario-illustration-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scenario-illustration.is-entering {
    animation: none;
  }
}

/* Hangar preview: show the armed standee whole at its own zoom. The art box
   keeps a fixed 567px square (its size before the column was widened), and
   the left column is wide enough for the widest zoomed art (~650px), so
   nothing is cropped at the card edges. */
body[data-viewport] .hangar-console {
  grid-template-columns: 680px minmax(0, 1fr);
  overflow: visible;
}

body[data-viewport] .hangar-preview-card,
body[data-viewport] .hangar-preview-card .hangar-character-stage {
  overflow: visible;
}

body[data-viewport] .hangar-preview-card .hangar-character-art {
  inset: 0 auto auto 50%;
  width: 567px;
  height: 567px;
  margin-left: -283.5px;
  background-position: center top;
  background-size: contain;
}