/*
 * The battle page is marked by the server, before any deferred script runs.
 * This ID intentionally outranks the old art, HUD and battle-live styles.
 * Keep all sizing inside the viewport grid; never float HP or commands over it.
 */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 520px) {
  body#samurai-battle-page {
    --battle-hud-height: 132px;
    --battle-route-height: 26px;
    --battle-log-height: 22px;
    --battle-command-height: 64px;
    --battle-row-gap: 4px;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body#samurai-battle-page .player-game-shell,
  body#samurai-battle-page .player-stage {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
  }

  body#samurai-battle-page .player-game-shell > .player-hud,
  body#samurai-battle-page .player-bottom-nav,
  body#samurai-battle-page .player-mini-footer,
  body#samurai-battle-page .contact-float {
    display: none !important;
  }

  body#samurai-battle-page .game-shell.v25-game.simple-battle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--battle-hud-height) var(--battle-route-height) minmax(0, 1fr) var(--battle-log-height) var(--battle-command-height) !important;
    grid-template-areas: "hud" "route" "arena" "log" "controls" !important;
    align-items: stretch !important;
    gap: var(--battle-row-gap) !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #07111d !important;
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
  }

  body#samurai-battle-page .v25-battle-hud {
    grid-area: hud !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 36px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 4px !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: hidden !important;
  }

  body#samurai-battle-page .v25-battle-center {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 44px 0 3px !important;
  }

  body#samurai-battle-page .v25-battle-center > small,
  body#samurai-battle-page .v25-fighter-portrait,
  body#samurai-battle-page .v25-hp-orb,
  body#samurai-battle-page .simple-battle-meta,
  body#samurai-battle-page .enemy-phase-line,
  body#samurai-battle-page .item-strip {
    display: none !important;
  }

  body#samurai-battle-page .v25-battle-center > b,
  body#samurai-battle-page #roundText,
  body#samurai-battle-page .v25-turn-banner {
    position: static !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 3px 4px !important;
    margin: 0 !important;
    font-size:12px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  body#samurai-battle-page .v25-fighter-panel {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 18px 9px 16px minmax(0, 1fr) !important;
    gap: 3px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid #baa06366 !important;
    border-radius: 7px !important;
    background: #0d1928f2 !important;
    overflow: hidden !important;
  }

  body#samurai-battle-page .v25-fighter-panel.player { grid-column: 1 !important; }
  body#samurai-battle-page .v25-fighter-panel.enemy { grid-column: 2 !important; }

  body#samurai-battle-page .v25-fighter-title {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  body#samurai-battle-page .v25-fighter-title > span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* The old absolute track escaped a zero-height wrapper and covered HP text. */
  body#samurai-battle-page .v25-hp-wrap,
  body#samurai-battle-page .v25-hp-track {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 9px !important;
    min-height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body#samurai-battle-page .v25-hp-track { border-radius: 3px !important; }
  body#samurai-battle-page .v25-hp-fill { position: relative !important; z-index: 1; }

  body#samurai-battle-page .v25-hp-text,
  body#samurai-battle-page .v25-skill-line-head {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    min-width: 0 !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size:12px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: #e3e9f2 !important;
  }

  body#samurai-battle-page .v25-hp-text b,
  body#samurai-battle-page .v25-skill-line-head b {
    font-size: inherit !important;
    line-height: inherit !important;
    font-variant-numeric: tabular-nums;
  }

  body#samurai-battle-page .v25-skill-line {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#samurai-battle-page .v25-skill-track {
    box-sizing: border-box !important;
    height: 5px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }

  body#samurai-battle-page .battle-route {
    grid-area: route !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body#samurai-battle-page .battle-route > * {
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size:12px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body#samurai-battle-page .game-shell.v25-game.simple-battle #arena {
    grid-area: arena !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfb87b30 !important;
    border-radius: 8px !important;
    background-image: linear-gradient(180deg, #07111d15, #07111d20), var(--level-battle-mobile, var(--level-battle-desktop)) !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  /* Move the existing background animation into the cropped arena as well. */
  body#samurai-battle-page .v25-game.has-scene-motion #arena::before {
    content: "";
    position: absolute;
    inset: -3%;
    z-index: -1;
    pointer-events: none;
    background-image: inherit;
    background-size: cover;
    background-position: center bottom;
    animation: scene-pan var(--scene-motion-time, 24s) ease-in-out infinite alternate;
  }

  body#samurai-battle-page .v25-game.scene-motion-low #arena::before { animation-duration: 36s; }

  body#samurai-battle-page #arena #samurai,
  body#samurai-battle-page #arena #dragon {
    width: 57% !important;
    height: 94% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    top: auto !important;
    bottom: 2% !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }

  body#samurai-battle-page #arena #samurai { left: -3% !important; right: auto !important; }
  body#samurai-battle-page #arena #dragon { left: auto !important; right: -3% !important; }

  body#samurai-battle-page .battle-log.v07-log {
    grid-area: log !important;
    display: block !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size:12px !important;
    line-height: 16px !important;
    overflow: auto !important;
    scrollbar-width: none;
    overscroll-behavior: contain;
  }

  body#samurai-battle-page .battle-log > div { padding: 0 !important; line-height: 16px !important; }

  body#samurai-battle-page .v25-battle-controls {
    grid-area: controls !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    z-index: 20 !important;
  }

  body#samurai-battle-page .v25-battle-controls .v25-skill-button {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    touch-action: manipulation;
    transform: none !important;
  }

  body#samurai-battle-page .v25-skill-art {
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 4px !important;
    border-width: 1px !important;
    font-size: 22px !important;
  }

  body#samurai-battle-page .v25-skill-copy { min-width: 0 !important; }
  body#samurai-battle-page .v25-skill-copy b {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 21px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  body#samurai-battle-page .v25-skill-copy small,
  body#samurai-battle-page .v25-skill-cost { display: none !important; }

  body#samurai-battle-page #audioFloat {
    position: fixed !important;
    inset: auto !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    z-index: 1000 !important;
  }

  body#samurai-battle-page #audioFloat > summary {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
  }

  body#samurai-battle-page #audioFloat .audio-popover {
    top: 42px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 60px) !important;
    overflow: auto !important;
  }

  body#samurai-battle-page .modal {
    position: fixed !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    overflow: auto !important;
    z-index: 1200 !important;
  }

  body#samurai-battle-page .modal-box {
    box-sizing: border-box !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  /* The inset card is legacy-only; the portrait screen owns its viewport. */
  body#samurai-battle-page #stageAdCard.stage-ad-card {
    position: fixed !important;
    inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: auto !important;
    z-index: 1300 !important;
  }

  body#samurai-battle-page .battle-pre-back { min-height: 44px !important; }
  body#samurai-battle-page .boss-action-banner {
    top: 5% !important;
    box-sizing: border-box !important;
    max-width: 96% !important;
    padding: 6px 12px !important;
    font-size: 17px !important;
    line-height: 24px !important;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#samurai-battle-page .v25-game.has-scene-motion #arena::before { animation: none !important; }
}

/* A phone held sideways needs less HUD height, rather than smaller commands. */
@media (max-width: 1100px) and (max-height: 520px) {
  body#samurai-battle-page {
    --battle-hud-height: 112px;
    --battle-command-height: 52px;
    --battle-log-height: 0px;
    --battle-row-gap: 3px;
  }
  body#samurai-battle-page .v25-battle-hud {
    grid-template-rows: 36px minmax(0, 1fr) !important;
  }
  body#samurai-battle-page .v25-fighter-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 16px 8px 14px minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 3px 6px !important;
  }
  body#samurai-battle-page .v25-fighter-title { height: 16px !important; line-height: 16px !important; }
  body#samurai-battle-page .v25-hp-wrap,
  body#samurai-battle-page .v25-hp-track { height: 8px !important; min-height: 8px !important; }
  body#samurai-battle-page .v25-hp-text,
  body#samurai-battle-page .v25-skill-line-head { height: 14px !important; line-height: 14px !important; }
  body#samurai-battle-page .v25-skill-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(30px, .5fr) !important;
    align-items: center !important;
    gap: 7px !important;
  }
  body#samurai-battle-page .v25-skill-track { margin: 0 !important; }
  body#samurai-battle-page .battle-log.v07-log { visibility: hidden !important; padding: 0 !important; border: 0 !important; }
  body#samurai-battle-page #arena #samurai,
  body#samurai-battle-page #arena #dragon { height: 98% !important; width: 48% !important; }
  body#samurai-battle-page #arena #samurai { left: 5% !important; }
  body#samurai-battle-page #arena #dragon { right: 5% !important; }
}

/* P2.8.2 Sep 09: the frame follows the real dialog; actions share one layout. */
body.player-v25-body #preModal,
body.player-v25-body #resultModal {
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  overflow: auto !important;
}

body.player-v25-body #preModal > .modal-box,
body.player-v25-body #resultModal > .modal-box.battle-result-v5 {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(480px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  margin: auto !important;
  padding: clamp(18px, 4vw, 28px) !important;
  border: 1px solid #c6a55c !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg, #182338, #0b1321 74%) !important;
  background-image: linear-gradient(155deg, #182338, #0b1321 74%) !important;
  box-shadow: 0 24px 80px #000b, inset 0 0 0 4px #d8bb7520 !important;
  overflow: auto !important;
  overflow-wrap: anywhere !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #8f7952 #111b2b;
}

body.player-v25-body #preModal > .modal-box::before,
body.player-v25-body #preModal > .modal-box::after,
body.player-v25-body #resultModal > .modal-box::before,
body.player-v25-body #resultModal > .modal-box::after {
  content: none !important;
  display: none !important;
}

body.player-v25-body #preModal h2,
body.player-v25-body #resultModal h2 {
  font-size: clamp(21px, 5vw, 25px) !important;
  line-height: 1.4 !important;
  color: #ffe2a2 !important;
  overflow-wrap: anywhere !important;
}
body.player-v25-body #preModal .notice,
body.player-v25-body #preModal .player-notice,
body.player-v25-body #resultModal .notice {
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.65 !important;
  overflow-wrap: anywhere !important;
}
body.player-v25-body #preModal .result-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
}
body.player-v25-body #preModal .result-stats > div {
  min-width: 0 !important;
  padding: 10px 6px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

body.player-v25-body #preModal .battle-pre-actions,
body.player-v25-body .battle-result-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

body.player-v25-body #preModal .battle-pre-actions > button,
body.player-v25-body #preModal .battle-pre-actions > a,
body.player-v25-body .battle-result-actions > a {
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
  touch-action: manipulation;
}

body.player-v25-body #preModal .battle-pre-actions > #startBtn,
body.player-v25-body .battle-result-actions > .battle-continue {
  order: 0 !important;
  min-height: 52px !important;
  padding: 12px 18px !important;
  border: 1px solid #ffe4a0 !important;
  background: linear-gradient(110deg, #ffe7a3, #d3a34b) !important;
  color: #221a10 !important;
  -webkit-text-fill-color: #221a10 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 18px #dcb35a25 !important;
}
body.player-v25-body #preModal .battle-pre-actions > .secondary,
body.player-v25-body .battle-result-actions > .battle-return {
  order: 1 !important;
  min-height: 44px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #c5cede !important;
  -webkit-text-fill-color: #c5cede !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.player-v25-body #preModal .battle-pre-actions > .battle-pre-back { order: 2 !important; }
body.player-v25-body #preModal .battle-pre-actions > :focus-visible,
body.player-v25-body .battle-result-actions > :focus-visible {
  outline: 2px solid #fff0c4 !important;
  outline-offset: 2px !important;
}
@media (min-width: 1101px) {
  body.player-v25-body #preModal .battle-pre-actions > .secondary:hover,
  body.player-v25-body .battle-result-actions > .battle-return:hover {
    background: #ffffff0a !important;
    color: #eef2fa !important;
    -webkit-text-fill-color: #eef2fa !important;
  }
}
@media (max-width: 360px) {
  body.player-v25-body #preModal .result-stats { gap: 6px !important; }
  body.player-v25-body #preModal .result-stats > div { font-size: 12px !important; }
}

/* DESKTOP_BATTLE_LOG_20260916_3: leave the compact phone grid unchanged. */
@media (min-width: 1101px), (min-width: 761px) and (min-height: 521px) {
  body#samurai-battle-page .v25-game .battle-log.v07-log {
    box-sizing: border-box !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere;
  }

  body#samurai-battle-page .v25-game .battle-log.v07-log > div {
    padding: 1px 0 !important;
    line-height: 22px !important;
  }
}