/*
 * Responsive layout stabilization layer
 * Purpose:
 * 1) keep battle UI compact and non-overlapping on desktop;
 * 2) convert desktop floating battle panels into stacked mobile panels;
 * 3) remove mobile board overflow caused by the forced 620px width.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app,
.topbar,
.panel,
.board-shell,
.board-panel,
.battle-stage,
.battle-board-wrap {
  min-width: 0;
}

/* Battle topbar: timeline should actually occupy a real, flexible slot after it is moved there. */
.topbar.in-battle {
  align-items: stretch;
}

.topbar.in-battle .topbar-timeline-host:not(:empty) {
  display: block;
  flex: 1 1 420px;
  min-width: 280px;
}

.topbar.in-battle .timeline-float.in-topbar {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
  transform: none;
  box-shadow: none;
}

.topbar.in-battle .timeline-float.in-topbar .timeline {
  min-width: 0;
}

/* Desktop battle viewport: give the board clear breathing room and prevent panel widths from exploding. */
.app.device-desktop .battle-board-wrap,
.app.device-desktop .board-panel,
.app.device-desktop .board-shell {
  min-width: 0;
}

.app.device-desktop .timeline-float:not(.in-topbar) {
  width: clamp(360px, calc(100% - 760px), 780px);
}

.app.device-desktop .team-float {
  width: clamp(240px, 24vw, 320px);
}

.app.device-desktop .focus-float,
.app.device-desktop .ready-float {
  width: clamp(260px, 27vw, 360px);
}

.app.device-desktop .turn-float {
  width: clamp(300px, 31vw, 430px);
}

.app.device-desktop .extra-float {
  width: min(620px, calc(100% - 96px));
}

/* Mid-size desktops / laptops: reduce collision pressure instead of letting panels crowd the board. */
@media (min-width: 901px) and (max-width: 1280px) {
  .app.device-desktop .topbar {
    gap: 10px;
  }

  .app.device-desktop .topbar.in-battle {
    flex-wrap: wrap;
  }

  .app.device-desktop .topbar.in-battle .topbar-timeline-host:not(:empty) {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
  }

  .app.device-desktop .timeline-float:not(.in-topbar) {
    width: min(620px, calc(100% - 560px));
  }

  .app.device-desktop .team-float {
    width: clamp(220px, 25vw, 280px);
  }

  .app.device-desktop .focus-float,
  .app.device-desktop .ready-float {
    width: clamp(240px, 27vw, 320px);
  }

  .app.device-desktop .turn-float {
    width: clamp(280px, 32vw, 380px);
  }
}

/* Mobile: use a scrollable page and stacked panels, not desktop absolute overlays. */
.app.device-mobile {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  gap: 8px;
}

.app.device-mobile.battle-started {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-rows: auto auto;
}

.app.device-mobile .topbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.app.device-mobile .topbar .actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.app.device-mobile .topbar .actions button {
  width: 100%;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.app.device-mobile .topbar.in-battle .topbar-timeline-host:not(:empty) {
  display: block;
  width: 100%;
  min-width: 0;
}

.app.device-mobile .timeline-float.in-topbar {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  box-shadow: none;
}

.app.device-mobile .timeline-float.in-topbar .row,
.app.device-mobile .timeline-float.in-topbar .global-actions {
  gap: 8px;
}

.app.device-mobile .timeline-float.in-topbar .global-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app.device-mobile .battle-stage,
.app.device-mobile.battle-started .battle-stage {
  display: grid;
  grid-template-rows: auto;
  gap: 10px;
  min-height: 0;
  height: auto;
}

.app.device-mobile .board-shell,
.app.device-mobile.battle-started .board-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  height: auto;
  align-content: start;
}

.app.device-mobile .board-panel,
.app.device-mobile.battle-started .board-panel {
  height: auto;
  min-height: 0;
}

.app.device-mobile .battle-board-wrap,
.app.device-mobile.battle-started .battle-board-wrap {
  width: 100%;
  min-width: 0;
  height: auto;
  overflow: hidden;
}

.app.device-mobile .mobile-board-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 6px;
  border: 1px solid rgba(111, 125, 72, 0.28);
  border-radius: 8px;
  background: rgba(9, 11, 8, 0.62);
}

.app.device-mobile .mobile-status-title {
  max-width: 8em;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.device-mobile .mobile-board-status .status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app.device-mobile .focus-float .unit-status-area {
  display: none;
}

/* Critical fix: do not force a 620px battlefield on phones. */
.app.device-mobile .board {
  --board-min-width: 0px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
}

.app.device-mobile .board-panel .board {
  min-height: 0;
}

.app.device-mobile .cell {
  border-radius: 6px;
}

.app.device-mobile .piece {
  padding: 2px;
  font-size: clamp(7px, 2.1vw, 10px);
  line-height: 1.1;
}

.app.device-mobile .coord {
  left: 2px;
  top: 1px;
  font-size: 7px;
}

/* Mobile slim battle portraits follow the desktop composition:
 * allies stay near the far left edge, enemies near the far right edge.
 * The Y anchor is always the board midpoint; the animation owns the -50% vertical shift,
 * which prevents the portrait from occasionally falling back to the older low-position state. */
.app.device-mobile .board-portrait {
  top: calc(50% + var(--portrait-offset, 0) * 10px);
  width: min(172px, 44vw);
}

.app.device-mobile .board-portrait.portrait-round,
.app.device-mobile .board-portrait.portrait-stamina {
  width: min(188px, 48vw);
}

.app.device-mobile .board-portrait.ally {
  left: -2px;
  right: auto;
  transform-origin: left center;
  animation-name: boardPortraitSettle, boardPortraitSlideMobileLeftSide;
}

.app.device-mobile .board-portrait.enemy {
  right: -2px;
  left: auto;
  transform-origin: right center;
  animation-name: boardPortraitSettle, boardPortraitSlideMobileRightSide;
}

.app.device-mobile .board-portrait.ally img {
  object-position: left center;
}

.app.device-mobile .board-portrait.enemy img {
  object-position: right center;
}

.app.device-mobile .board-portrait-overlay {
  inset: 6px;
}

@keyframes boardPortraitSlideMobileLeftSide {
  0% {
    transform: translate(-22px, -50%) scale(0.88);
  }
  18% {
    transform: translate(0, -50%) scale(1.03);
  }
  100% {
    transform: translate(0, -50%) scale(1);
  }
}

@keyframes boardPortraitSlideMobileRightSide {
  0% {
    transform: translate(22px, -50%) scale(0.88);
  }
  18% {
    transform: translate(0, -50%) scale(1.03);
  }
  100% {
    transform: translate(0, -50%) scale(1);
  }
}

/* The three interaction panels become normal stacked cards on mobile, eliminating overlaps. */
.app.device-mobile .focus-float,
.app.device-mobile .ready-float,
.app.device-mobile .turn-float {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  order: 20;
}

.app.device-mobile .focus-float.hidden,
.app.device-mobile .turn-float.hidden {
  display: none !important;
}

.app.device-mobile .float-handle {
  cursor: default;
  touch-action: auto;
}

.app.device-mobile .float-handle .small {
  display: none;
}

.app.device-mobile .board-actions,
.app.device-mobile .stamina-bar,
.app.device-mobile .skill-list {
  min-width: 0;
}

.app.device-mobile .board-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.app.device-mobile .board-actions button {
  width: 100%;
}

.app.device-mobile .selected-portrait {
  inset: 0;
}

.app.device-mobile .selected-portrait::before {
  inset: 10px;
}

/* Mobile out-of-turn actions must remain visible as a normal stacked card even when no reaction is active. */
.app.device-mobile .extra-float,
.app.device-mobile .extra-float:not(.active) {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  order: 24;
}

/* When clash / guard options actually become available, elevate the same panel into a bottom reaction sheet. */
.app.device-mobile .extra-float.active {
  display: block !important;
  position: fixed !important;
  inset: auto 8px 8px 8px !important;
  left: 8px !important;
  right: 8px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: none !important;
  max-height: min(68dvh, 560px);
  transform: none !important;
  overflow: auto;
  z-index: 42;
}

.app.device-mobile .extra-overlay {
  position: fixed;
  inset: 0;
  z-index: 41;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(2px);
}

.app.device-mobile .extra-float .row {
  gap: 8px;
  align-items: flex-start;
}

.app.device-mobile .extra-float .pager {
  gap: 8px;
  flex-wrap: wrap;
}

.app.device-mobile.battle-started #logPanel {
  display: block !important;
  order: 32;
  height: min(34dvh, 260px);
  max-height: none;
  min-height: 140px;
  overflow: hidden;
}

.app.device-mobile #log {
  height: 100%;
  max-height: none;
}

.app.device-mobile .log-columns {
  display: block;
  overflow: hidden;
}

.app.device-mobile .log-column {
  display: none;
}

.app.device-mobile .log-mobile-stream {
  display: grid;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

/* Pre-battle and generic small-screen content should wrap instead of overlapping. */
.app.device-mobile .row,
.app.device-mobile .collapse-head {
  min-width: 0;
}

.app.device-mobile .prebattle-panel > .row,
.app.device-mobile .setup-config-head,
.app.device-mobile .collapse-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.app.device-mobile .setup-launch-actions {
  justify-items: stretch;
  max-width: none;
  text-align: left;
}

.app.device-mobile .setup-launch-actions button {
  width: 100%;
}

.app.device-mobile .setup-config-box {
  padding-right: var(--panel-pad);
  overflow: hidden;
}

.app.device-mobile .setup-portrait-splash {
  position: static;
  width: min(72vw, 220px);
  margin: 0 auto;
}

.app.device-mobile .setup-duel-grid,
.app.device-mobile .setup-tree-row {
  grid-template-columns: 1fr;
}

.app.device-mobile .setup-school-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app.device-mobile .setup-school-chip {
  min-width: 0;
  justify-content: center;
}

.app.device-mobile .segmented-pill,
.app.device-mobile .gender-pill,
.app.device-mobile .setup-tab {
  max-width: 100%;
}

/* Narrow phones: simplify text density a little more. */
@media (max-width: 430px) {
  .app.device-mobile {
    padding: 6px;
  }

  .app.device-mobile .topbar .actions {
    grid-template-columns: 1fr;
  }

  .app.device-mobile .timeline-float.in-topbar .global-actions {
    grid-template-columns: 1fr;
  }

  .app.device-mobile .panel {
    padding: 10px;
  }

  .app.device-mobile .float-handle {
    margin: -10px -10px 10px;
    padding: 9px 10px;
  }

  .app.device-mobile .extra-float.active {
    inset: auto 6px 6px 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
}