/* MORI R2, preserving R1. Source: cached FIGHT 3 / 249:2341, 2026-10-04.
   Asset bytes are preserved in assets/mori; this stylesheet owns presentation only. */

@font-face {
  font-family: "Inter";
  src: url("assets/mori/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/mori/fonts/PlayfairDisplay-Latin-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/mori/fonts/PlayfairDisplay-Cyrillic-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: dark;
  --mori-gold: #d39a16;
  --mori-attack-modifier: #baa671;
  --mori-text: #dedbd3;
  --mori-muted: #a6a19a;
  --mori-dark: #0f0f0f;
  --mori-control: #1d1d1d;
  --mori-line: #38352e;
  --mori-error: #f0a68f;
  --mori-figure-scale: 1;
  --mori-field-height: 300px;
  --mori-head-room: 24px;
  --mori-zone-top: 44px;
  --mori-zone-gap: 12px;
  /* System and Telegram controls occupy consecutive regions. env and SDK system
     describe the same region; content insets describe the additional controls. */
  --mori-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-top, var(--tg-safe-area-inset-top, 0px))) + var(--tg-content-safe-top, var(--tg-content-safe-area-inset-top, 0px)));
  --mori-safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, var(--tg-safe-area-inset-bottom, 0px))) + var(--tg-content-safe-bottom, var(--tg-content-safe-area-inset-bottom, 0px)));
  --mori-safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-left, var(--tg-safe-area-inset-left, 0px))) + var(--tg-content-safe-left, var(--tg-content-safe-area-inset-left, 0px)));
  --mori-safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-right, var(--tg-safe-area-inset-right, 0px))) + var(--tg-content-safe-right, var(--tg-content-safe-area-inset-right, 0px)));
  font-family: "Inter", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 0; height: 100%; }

body {
  overflow: hidden;
  background: #080808;
  color: var(--mori-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--mori-gold);
  outline-offset: 3px;
}

.app-shell {
  width: 100%;
  max-width: 402px;
  height: 100vh;
  height: var(--tg-viewport-height, 100dvh);
  margin: 0 auto;
  padding: var(--mori-safe-top) var(--mori-safe-right) var(--mori-safe-bottom) var(--mori-safe-left);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--mori-text);
  font-family: "Inter", sans-serif;
  background: var(--mori-dark) url("assets/mori/combat/scene-background.png") center top / 402px 804px no-repeat;
}

.app-header {
  flex: none;
  min-height: 48px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #25231e;
  background: rgba(8, 8, 8, .94);
}

.wordmark {
  color: var(--mori-gold);
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.demo-badge { color: var(--mori-muted); font-size: 11px; letter-spacing: .08em; white-space: nowrap; }

.screen {
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #5f4a20 transparent;
  scroll-padding-block: 12px 100px;
}

.screen > * { min-width: 0; flex-shrink: 0; }
.screen-heading { margin: 0; color: var(--mori-gold); font-family: "Playfair Display", serif; font-size: 26px; font-weight: 600; line-height: 1.2; }
.screen-heading h1 { margin: 0; font: inherit; color: inherit; }
.screen-heading h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.eyebrow { margin: 0 0 6px; color: var(--mori-muted); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: .12em; }
.screen-copy { margin: 0; color: var(--mori-muted); line-height: 1.55; }
.screen-copy, .profile-copy, .invite-summary, .result-copy, .result-move { overflow-wrap: anywhere; }
.demo-note { margin: 0; color: var(--mori-muted); font-size: 12px; line-height: 18px; }
.inline-error { margin: 0; padding: 4px 16px 8px; color: var(--mori-error); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.inline-error p { margin: 0; }
.invite-link-label { display: grid; gap: 6px; color: var(--mori-muted); font-size: 12px; }
.invite-link { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--mori-line); border-radius: 4px; background: #151410; color: var(--mori-text); font: inherit; font-size: 12px; }
.sync-action { min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--mori-gold); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.resume-action { align-self: center; }
.exchange-summary { margin: 0; padding: 0 16px; color: var(--mori-text); font-size: 12px; line-height: 18px; }
.exchange-summary:empty { display: none; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-entry { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; min-height: 112px; padding: 14px 12px; border: 1px solid var(--mori-line); border-left: 2px solid #74602f; border-radius: 0 8px 8px 0; background: rgba(29,29,29,.82); color: var(--mori-text); text-align: left; }
.history-entry span { min-width: 0; overflow-wrap: anywhere; }
.history-entry-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%; }
.history-opponent { font-size: 15px; font-weight: 500; line-height: 20px; }
.history-outcome { color: var(--mori-gold); font-size: 13px; font-weight: 500; line-height: 20px; text-align: right; }
.history-reason { color: var(--mori-muted); font-size: 12px; line-height: 18px; }
.history-hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10px; align-items: baseline; gap: 8px; width: 100%; font-size: 12px; line-height: 20px; }
.history-hp > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--mori-muted); }
.history-hp strong { color: var(--mori-text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-hp .history-open { color: var(--mori-gold); font-size: 22px; line-height: 20px; }
.history-entry-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; width: 100%; margin-top: 2px; color: var(--mori-muted); font-size: 11px; line-height: 18px; }
.local-time { font-variant-numeric: tabular-nums; }
.history-entry:active:not(:disabled) { background: #2a2317; border-color: #8b6820; }
.history-entry:disabled { cursor: default; }
.history-feedback { margin: 0; color: var(--mori-muted); font-size: 12px; line-height: 18px; }
.history-feedback p { margin: 0; }
.history-empty, .history-error { color: var(--mori-muted); font-size: 13px; line-height: 20px; }
.history-empty p, .history-error p { margin: 0; }
.history-empty .section-title, .history-error .section-title { margin-bottom: 4px; }
.history-empty--compact { padding: 12px; border-left: 1px solid var(--mori-line); }
.history-error { padding: 12px; border-left: 2px solid #8c6550; overflow-wrap: anywhere; }
.history-error .sync-action { margin: 2px 0 -6px; padding-left: 0; }
.section-title { margin: 0; color: var(--mori-text); font-size: 14px; font-weight: 500; line-height: 20px; }

.mori-card {
  padding: 20px 16px;
  border-radius: 0 8px 8px 0;
  background: rgba(29, 29, 29, .72);
}

.screen--profile { background: url("assets/mori/profile/scene-back.png") center top / 402px 804px no-repeat; }
.profile-card { display: grid; grid-template-columns: minmax(0, 1fr) 95.0287px; align-items: center; gap: 12px; }
.profile-portrait { grid-column: 2; grid-row: 1; max-width: 100%; height: auto; }
.profile-portrait img { max-width: 100%; height: auto; }
.profile-copy { grid-column: 1; grid-row: 1; }
.profile-kicker { display: block; margin-bottom: 8px; color: var(--mori-muted); font-size: 10px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.profile-copy h2 { margin: 0 0 8px; color: var(--mori-gold); font-family: "Playfair Display", serif; font-size: 22px; font-weight: 600; line-height: 1.2; }
.profile-copy p { margin: 0; color: var(--mori-muted); font-size: 13px; }
.screen--profile[data-screen="profile"] .profile-card { padding-top: 14px; padding-bottom: 14px; grid-template-columns: minmax(0, 1fr) 72px; }
.screen--profile[data-screen="profile"] .profile-copy h2 { font-size: 22px; overflow-wrap: anywhere; }
.cabinet-battle, .cabinet-invite { padding: 16px; border-left: 2px solid #74602f; }
.cabinet-battle-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cabinet-battle-heading .profile-kicker { margin: 0; }
.cabinet-round { flex: none; color: var(--mori-gold); font-size: 12px; line-height: 18px; }
.cabinet-title { margin: 0; color: var(--mori-text); font-size: 18px; font-weight: 500; line-height: 24px; overflow-wrap: anywhere; }
.cabinet-hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0 6px; }
.cabinet-hp > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cabinet-hp .hp-value { font-size: clamp(14px, 4vw, 18px); }
.cabinet-caption { margin: 0; color: var(--mori-muted); font-size: 11px; line-height: 18px; text-align: center; }
.cabinet-battle .primary-action { display: block; margin: 14px auto 0; }
.cabinet-invite .invite-link-label { margin-top: 12px; }
.cabinet-idle { padding: 0 2px; color: var(--mori-muted); font-size: 13px; line-height: 20px; }
.cabinet-idle h2 { margin: 0 0 4px; color: var(--mori-text); font-size: 14px; font-weight: 500; }
.cabinet-idle p { margin: 0; }
.cabinet-latest { display: flex; flex-direction: column; gap: 8px; }

.invite-card { padding-top: 12px; }
.invite-fighters { display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; padding: 8px 0 16px; }
.fighter-portrait { position: relative; flex: none; width: 135px; height: 266px; display: flex; align-items: flex-end; justify-content: center; }
.fighter-portrait .fighter { position: absolute; bottom: 26px; left: 50%; margin-left: -67.5px; transform: scale(.8); transform-origin: center bottom; }
.fighter-portrait > span { position: relative; max-width: 100%; color: var(--mori-gold); font-size: 12px; line-height: 20px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.versus { align-self: center; flex: none; color: var(--mori-muted); font-size: 22px; }
.invite-summary { margin: 0; color: var(--mori-text); text-align: center; font-size: 14px; line-height: 1.6; }
.invite-summary h2 { margin: 0 0 8px; color: var(--mori-gold); font-size: 18px; font-weight: 600; line-height: 1.3; }
.invite-summary p { margin: 6px 0; }
.invite-summary strong { color: var(--mori-gold); font-weight: 600; }

.result-card { text-align: center; }
.result-symbol { margin: 0 auto 12px; color: var(--mori-gold); font-family: "Playfair Display", serif; font-size: 48px; line-height: 1; }
.result-symbol img { margin: 0 auto; }
.result-heading { margin: 0 0 12px; color: var(--mori-gold); font-size: 20px; font-weight: 600; line-height: 1.3; }
.result-opponent { margin: -4px 0 8px; color: var(--mori-text); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; color: var(--mori-muted); font-size: 12px; line-height: 18px; }
.result-copy { margin: 0; color: var(--mori-muted); }
.result-card > .cabinet-caption { margin: -10px 0 14px; }
.result-move { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--mori-line); text-align: left; font-size: 13px; }
.result-move:empty { display: none; }
.result-move h3 { margin: 0 0 6px; color: var(--mori-muted); font-size: 11px; font-weight: 500; line-height: 18px; }
.result-move p { margin: 4px 0; }
.result-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--mori-line); border-bottom: 1px solid var(--mori-line); }
.result-value { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.result-label { color: var(--mori-muted); font-size: 12px; line-height: 18px; }
.result-value .hp-bar { max-width: 193px; margin: 2px auto; }
.result-value .hp-value { font-size: clamp(14px, 4vw, 18px); }
.result-damage { color: var(--mori-text); font-size: 12px; line-height: 18px; }

.action-dock {
  z-index: 2;
  flex: none;
  margin-top: auto;
  padding: 8px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.screen:not(.screen--combat) > .action-dock {
  position: sticky;
  bottom: 0;
  background: rgba(15, 15, 15, .97);
}

.primary-action {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 256px;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: #24120d;
  color: var(--mori-gold);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  letter-spacing: .04em;
}

.primary-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: inherit;
  background: url("assets/mori/combat/confirm-material.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.primary-action:active:not(:disabled) { filter: brightness(1.18); }
.primary-action:disabled { color: #9a895e; background: #1d1713; }
.primary-action:disabled::before { opacity: .4; }
.secondary-action { min-height: 44px; max-width: 256px; width: 100%; padding: 10px 12px; border: 1px solid #5d4b25; border-radius: 4px; background: transparent; color: var(--mori-text); font-size: 13px; line-height: 22px; }
.secondary-action:active:not(:disabled) { background: #2a2317; }
.secondary-action:disabled { color: #837b6c; border-color: var(--mori-line); }

.demo-panel { flex: none; margin: 0; border-top: 1px solid var(--mori-line); color: var(--mori-muted); font-size: 12px; }
.demo-panel summary { min-height: 28px; padding: 4px 0; cursor: pointer; }
.demo-panel[open] { padding-bottom: 8px; }
.demo-panel .secondary-action { max-width: none; margin-top: 8px; }
.demo-panel p { margin: 6px 0; font-size: 12px; }

.screen--combat {
  padding: 8px 0 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, max-content) auto auto;
  align-content: start;
  gap: 6px;
  overflow: hidden;
}

.screen--combat > .screen-heading { margin: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; font-family: "Inter", sans-serif; font-size: 16px; line-height: 22px; letter-spacing: .04em; }
.screen--combat .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 2px; }
.screen--combat .screen-heading h1 { grid-column: 1; grid-row: 2; }
.round-clock { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--mori-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.state-banner { margin: 0; padding: 5px 0; color: var(--mori-muted); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.screen--combat > .state-banner { margin: 0 16px; }
.state-banner p { margin: 0; }
.state-banner strong { color: var(--mori-gold); font-weight: 600; }
.state-banner--unknown, .state-banner--error, .screen--combat[data-phase="unknown"] > .state-banner { color: var(--mori-error); }

.combat-stage {
  min-height: 0;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #5f4a20 transparent;
  scroll-padding-block: 8px;
}

.hp-row { flex: none; display: grid; grid-template-columns: minmax(0, 193px) minmax(0, 193px); justify-content: space-between; gap: 16px; }
.hp-bar { position: relative; min-width: 0; width: 100%; aspect-ratio: 193 / 37; overflow: hidden; mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: alpha; }
.hp-bar--self { mask-image: url("assets/mori/combat/hp-left-base.svg"); }
.hp-bar--opponent { mask-image: url("assets/mori/combat/hp-right-base.svg"); }
.hp-layer { position: absolute; left: 0; top: 0; height: auto; opacity: 1; }
.hp-layer--base, .hp-layer--frame { width: 193px; max-width: 100%; }
/* Presentation ratio supplied by server HP, not a damage formula. */
.hp-layer--red { width: var(--hp-fill, 100%); max-width: none; height: 100%; object-fit: cover; object-position: left; }
.hp-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mori-gold); font-size: clamp(18px, 5.97vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.fighter-field { position: relative; flex: none; min-height: calc(224px + var(--mori-head-room)); height: calc(var(--mori-field-height) + var(--mori-head-room)); }
.fighters { position: absolute; left: 16px; right: 16px; bottom: 0; height: 300px; display: grid; grid-template-columns: minmax(0, 135px) minmax(0, 135px); justify-content: space-between; pointer-events: none; }
.fighter { position: relative; width: 135px; height: 300px; transform: scale(var(--mori-figure-scale)); transform-origin: center bottom; mix-blend-mode: lighten; }
.fighter-body { position: absolute; left: 14.84px; top: 0; width: 110px; height: 300px; }
.fighter-goggles { position: absolute; left: 56.34px; top: 13.9px; }

.zone-columns { position: absolute; top: calc(var(--mori-head-room) + var(--mori-zone-top)); left: 16px; right: 16px; display: grid; grid-template-columns: minmax(0, 135px) minmax(0, 135px); justify-content: space-between; gap: 12px; }
.zone-column { position: relative; min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mori-zone-gap); border: 0; }
.zone-column--defense { grid-column: 1; }
.zone-column--attack { grid-column: 2; }
.zone-heading { position: absolute; top: calc(0px - var(--mori-head-room) - var(--mori-zone-top)); left: 0; width: 100%; margin: 0; padding: 0; color: var(--mori-muted); font-size: 11px; font-weight: 500; line-height: 18px; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.zone-button { position: relative; min-height: 44px; width: 100%; padding: 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 12px; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 8px; background: var(--mori-control); color: var(--mori-gold); box-shadow: 4px 4px 4px rgba(0, 0, 0, .1); font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: .04em; text-align: center; }
.zone-icon { justify-self: center; opacity: 1; filter: brightness(3.6); }
.zone-label { min-width: 0; text-transform: uppercase; white-space: nowrap; }
.zone-button--with-modifier .zone-label { display: flex; flex-direction: column; align-items: center; }
.zone-modifier { color: var(--mori-attack-modifier); font-size: 12px; font-weight: 300; line-height: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.zone-check { opacity: 0; font-size: 13px; line-height: 18px; }
.zone-button.is-selected, .zone-button[aria-pressed="true"] { border-color: var(--mori-gold); background: #332a17; }
.zone-button.is-selected .zone-check, .zone-button[aria-pressed="true"] .zone-check { opacity: 1; }
.zone-button:active:not(:disabled) { background: #493919; border-color: var(--mori-gold); }
.zone-button:disabled { color: #a68b4e; background: #1b1b1b; }
.zone-button:disabled.is-selected, .zone-button:disabled[aria-pressed="true"] { border-color: #927024; background: #292416; }
.move-summary { flex: none; min-height: 36px; margin: 0; padding: 0 16px 4px; color: var(--mori-muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.move-summary p { margin: 0; }
.move-summary strong { color: var(--mori-gold); font-weight: 600; }
.screen--combat > .action-dock { margin: 0; padding: 8px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 12px; border-top: 1px solid #2a2418; background: rgba(15, 15, 15, .97); }
.screen--combat > .action-dock .primary-action { justify-self: center; }
.screen--combat > .action-dock .secondary-action { width: 78px; min-height: 44px; padding: 8px 6px; font-size: 12px; line-height: 18px; }
.screen--combat .primary-action { font-size: 21px; }
.screen--combat > .demo-panel { margin: 0 16px; max-height: 96px; overflow-y: auto; }
.screen--combat > .sync-action { margin: 0 16px; justify-self: center; }

@media (hover: hover) {
  .history-entry:hover:not(:disabled) { border-color: #8b6820; background: #252117; }
  .zone-button:hover:not(:disabled) { border-color: #8b6820; }
  .primary-action:hover:not(:disabled) { color: #edb63b; }
  .secondary-action:hover:not(:disabled) { border-color: var(--mori-gold); }
}

@media (max-width: 359px) {
  .screen { padding-left: 12px; padding-right: 12px; }
  .screen--combat { padding-left: 0; padding-right: 0; }
  .screen-heading { font-size: 24px; }
  .profile-card { padding-left: 12px; padding-right: 12px; }
  .profile-copy h2 { font-size: 20px; }
  .invite-fighters { gap: 8px; }
  .fighter-portrait { width: 110px; }
  .screen--combat .primary-action { font-size: 17px; }
}

@media (min-width: 720px) {
  :root { --mori-field-height: 360px; --mori-figure-scale: 1.2; --mori-zone-top: 54px; --mori-zone-gap: 16px; }
  .app-shell { max-width: 560px; }
  .screen { padding-left: 24px; padding-right: 24px; }
  .screen--combat { padding-left: 0; padding-right: 0; }
  .app-header { padding-left: 24px; padding-right: 24px; }
  .screen--combat > .screen-heading, .screen--combat > .state-banner { margin-left: 28px; margin-right: 28px; }
  .fighters, .zone-columns { left: 28px; right: 28px; grid-template-columns: minmax(0, 164px) minmax(0, 164px); }
  .fighter { justify-self: center; }
  .zone-button { min-height: 52px; padding: 12px 14px; grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 6px; font-size: 18px; }
  .zone-heading { font-size: 12px; }
  .move-summary { padding-left: 28px; padding-right: 28px; font-size: 13px; }
  .exchange-summary { padding-left: 28px; padding-right: 28px; }
  .screen--combat .primary-action { max-width: 320px; min-height: 56px; font-size: 24px; }
  .screen--combat > .demo-panel { margin-left: 28px; margin-right: 28px; }
  .profile-card { grid-template-columns: minmax(0, 1fr) 95.0287px; padding: 24px; }
}

@media (min-height: 760px) and (max-width: 719px) {
  :root { --mori-field-height: 360px; --mori-figure-scale: 1.2; --mori-zone-top: 54px; --mori-zone-gap: 16px; }
  .zone-button { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
}

@media (max-height: 680px) {
  :root { --mori-field-height: 270px; --mori-figure-scale: .9; }
  .screen { padding-top: 12px; gap: 12px; }
  .screen--combat { padding-top: 6px; gap: 4px; }
  .fighter-portrait { height: 206px; }
  .fighter-portrait .fighter { transform: scale(.6); }
  .mori-card { padding-top: 16px; padding-bottom: 16px; }
  .invite-fighters { padding-top: 0; padding-bottom: 12px; }
}

@media (max-height: 580px) {
  :root { --mori-field-height: 240px; --mori-figure-scale: .8; --mori-zone-top: 28px; --mori-zone-gap: 8px; }
  .app-header { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .wordmark { font-size: 24px; }
  .screen { gap: 8px; padding-top: 8px; }
  .screen--combat { gap: 4px; }
  .screen--combat > .screen-heading { font-size: 14px; line-height: 20px; }
  .screen--combat .eyebrow { display: none; }
  .state-banner { padding-top: 3px; padding-bottom: 3px; font-size: 12px; line-height: 18px; }
  .combat-stage { gap: 8px; padding-top: 4px; }
  .move-summary { min-height: 28px; font-size: 11px; line-height: 16px; }
  .screen--combat > .action-dock { padding-top: 6px; padding-bottom: 8px; }
  .screen--combat .primary-action { font-size: 20px; }
  .fighter-portrait { height: 176px; }
  .fighter-portrait .fighter { transform: scale(.5); }
  .result-symbol { margin-bottom: 8px; font-size: 36px; }
  .result-move { margin-top: 12px; padding-top: 12px; }
}

@media (min-width: 720px) and (max-height: 680px) {
  :root { --mori-field-height: 280px; --mori-figure-scale: .93; --mori-zone-top: 32px; --mori-zone-gap: 10px; }
  .zone-button { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
  .screen--combat .primary-action { min-height: 48px; font-size: 22px; }
}

@media (min-width: 720px) and (max-height: 580px) {
  :root { --mori-field-height: 240px; --mori-figure-scale: .8; --mori-zone-top: 28px; --mori-zone-gap: 8px; }
  .zone-button { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .screen--combat .primary-action { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Keep the original button bounds in every height/width mode. */
.zone-button--with-modifier { padding-top: 0; padding-bottom: 0; }

/* Scoped presentation of already resolved server values; legacy battle layout stays intact. */
.level74-hp { min-width: 0; width: 100%; }
.level74-hp .level74-hp-value { font-size: clamp(10px, 3.2vw, 15px); letter-spacing: 0; }
.level74-frozen-level { display: block; text-align: center; color: var(--mori-muted); font-size: 11px; line-height: 1.4; }
.level74-frozen-level:not(:empty) { padding-top: 4px; }
.level74-effects, .level74-settlement { min-width: 0; padding: 12px 0; color: var(--mori-text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.level74-effects h3, .level74-settlement h3 { margin: 0 0 8px; color: var(--mori-text); font-size: 16px; }
.level74-effects ul { padding-left: 18px; margin: 8px 0; }
.level74-effects li + li { margin-top: 6px; }
.level74-settlement p { margin: 6px 0; }
.level74-settlement small { color: var(--mori-muted); }
.level74-history-xp { color: var(--mori-gold); font-size: 12px; line-height: 1.5; }