.center-stage {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  gap: 10px;
}

.turn-banner {
  position: fixed;
  z-index: 70;
  left: 50%;
  top: 50%;
  overflow: hidden;
  width: clamp(300px, 36vw, 480px);
  height: auto;
  min-height: 0;
  aspect-ratio: 174 / 45;
  padding: clamp(8px, 1.2vw, 16px) clamp(36px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0;
  background: transparent url("../../assets/ui/battle-message-frame.svg") center / 100% 100% no-repeat;
  box-shadow: none !important;
  clip-path: none;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear;
  animation: none !important;
}

.turn-banner::after {
  display: none !important;
}

.turn-banner.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% - 8px)) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.turn-banner.is-stage-intro {
  transform-origin: center;
  animation: turnBannerIntroZoom 960ms cubic-bezier(0.2, 0.92, 0.2, 1) 420ms both;
}

.turn-banner.enemy-turn {
  border-color: rgba(255, 75, 67, 0.72);
  box-shadow: var(--shadow-red);
}

.turn-banner.is-playback {
  border-color: rgba(255, 226, 160, 0.82);
  box-shadow: 0 0 24px rgba(239, 184, 77, 0.52), inset 0 0 22px rgba(239, 184, 77, 0.12);
}

.turn-banner.is-playback .turn-title {
  color: #ffe2a0;
}

.turn-banner.is-playback.is-delayed-playback {
  border-color: rgba(91, 226, 255, 0.82);
  box-shadow: 0 0 28px rgba(80, 200, 255, 0.58), inset 0 0 22px rgba(80, 200, 255, 0.14);
}

.turn-banner.is-playback.is-delayed-playback .turn-title {
  color: #a8f4ff;
}

.turn-banner.is-playback.enemy-turn {
  border-color: rgba(255, 75, 67, 0.78);
  box-shadow: var(--shadow-red), inset 0 0 22px rgba(255, 75, 67, 0.14);
}

.turn-banner.is-playback.enemy-turn .turn-title {
  color: var(--red-soft);
}

.turn-banner.is-game-over {
  animation: resultBannerPulse 1.8s ease-in-out infinite;
}

.turn-banner.is-game-over::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.16) 48%, transparent 64% 100%);
  transform: translateX(-120%);
  animation: resultBannerSweep 2.2s ease-in-out infinite;
}

.turn-banner.is-victory {
  border-color: rgba(104, 221, 100, 0.82);
  box-shadow: 0 0 24px rgba(104, 221, 100, 0.58), inset 0 0 22px rgba(104, 221, 100, 0.12);
}

.turn-banner.is-victory .turn-title {
  color: #a7f7ac;
}

.turn-banner.is-defeat {
  border-color: rgba(255, 75, 67, 0.8);
  box-shadow: var(--shadow-red), inset 0 0 22px rgba(255, 75, 67, 0.12);
}

.turn-title {
  color: #66e7ff;
  font-size: 1.65rem;
  line-height: 1.08;
  font-weight: 900;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.enemy-turn .turn-title {
  color: var(--red-soft);
}

.turn-subtitle {
  margin-top: 4px;
  color: #cbefff;
  font-weight: 800;
  line-height: 1.15;
}

.turn-banner.is-status .turn-title {
  font-size: clamp(0.82rem, 1.4vw, 1.12rem);
  line-height: 1.12;
  text-transform: none;
}

.battlefield {
  position: relative;
  grid-row: 2;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  overflow: visible;
}

.waiting-match-panel {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100% - 24px));
  padding: 18px;
  display: grid;
  gap: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(95, 221, 255, 0.72);
  background: rgba(2, 11, 20, 0.96);
  color: #eafaff;
  text-align: center;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: 0 0 28px rgba(40, 187, 232, 0.24), inset 0 0 20px rgba(57, 205, 245, 0.06);
}

.waiting-match-kicker,
.waiting-match-code {
  color: #72e5ff;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}

.waiting-match-panel h2,
.waiting-match-panel p {
  margin: 0;
}

.waiting-match-panel h2 {
  font-size: 1.24rem;
  line-height: 1.12;
}

.waiting-match-panel p {
  color: #c4dce8;
  font-size: 0.88rem;
  line-height: 1.35;
}

.waiting-match-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.waiting-match-actions > * {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.action-callout {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: min(360px, 72%);
  padding: 10px 16px;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  background: rgba(4, 10, 18, 0.92);
  color: var(--red-soft);
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: var(--shadow-red);
  animation: actionCallout 1.04s ease-out both;
}

.action-callout.from-human {
  color: var(--blue-soft);
  box-shadow: var(--shadow-blue);
}

.action-callout.kind-missile-fx {
  color: #ff8b7e;
  box-shadow: 0 0 28px rgba(255, 55, 38, 0.72), inset 0 0 22px rgba(255, 55, 38, 0.16);
}

.action-callout.kind-mortar-fx {
  color: #ffd27a;
  box-shadow: 0 0 30px rgba(255, 150, 45, 0.7), inset 0 0 22px rgba(255, 150, 45, 0.16);
}

.action-callout.kind-cutter-fx {
  color: #9bf7ff;
  box-shadow: 0 0 30px rgba(80, 220, 255, 0.7), inset 0 0 22px rgba(80, 220, 255, 0.16);
}

.action-callout-title {
  font-size: 1.04rem;
  line-height: 1.15;
  font-weight: 900;
}

.action-callout-target {
  margin-top: 3px;
  color: #fff0c4;
  font-size: 0.82rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}

.global-fx {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: min(460px, 84%);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
}

.global-fx-chip {
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid currentColor;
  background: rgba(3, 10, 18, 0.9);
  color: var(--red-soft);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  border-radius: 4px;
  box-shadow: var(--shadow-red);
  animation: globalFx 0.94s ease-out both;
}

.global-fx-chip.from-human {
  color: var(--blue-soft);
  box-shadow: var(--shadow-blue);
}

.global-fx-chip.missile-fx {
  color: #ff8b7e;
  box-shadow: 0 0 24px rgba(255, 55, 38, 0.68), inset 0 0 16px rgba(255, 55, 38, 0.14);
}

.global-fx-chip.mortar-fx {
  color: #ffd27a;
  box-shadow: 0 0 26px rgba(255, 150, 45, 0.7), inset 0 0 16px rgba(255, 150, 45, 0.14);
}

.global-fx-chip.cutter-fx {
  color: #9bf7ff;
  box-shadow: 0 0 24px rgba(80, 220, 255, 0.66), inset 0 0 16px rgba(80, 220, 255, 0.14);
}

.ship-zone {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  --engineering-cell-size: clamp(44px, 5.2vw, 62px);
  --engineering-cell-gap: 7px;
}

.ship-art {
  position: absolute;
  left: 50%;
  width: min(880px, 94%);
  max-height: clamp(150px, 24vh, 260px);
  transform: translateX(-50%);
  opacity: 0.92;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.ship-zone.enemy-zone .ship-art {
  top: 10px;
  filter: drop-shadow(0 0 26px rgba(255, 70, 65, 0.38)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.75));
}

.ship-zone.player-zone .ship-art {
  bottom: 6px;
  filter: drop-shadow(0 0 26px rgba(80, 200, 255, 0.42)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.75));
}

.ship-normal-shield {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: min(670px, 76%);
  height: 20px;
  transform: translateX(-50%);
  border: 2px solid rgba(80, 200, 255, 0.92);
  background: rgba(3, 15, 24, 0.78);
  box-shadow:
    0 0 16px rgba(80, 200, 255, 0.36),
    inset 0 0 12px rgba(80, 200, 255, 0.22);
  pointer-events: auto;
  overflow: hidden;
}

.ship-normal-shield::before,
.ship-normal-shield::after {
  content: "";
  position: absolute;
  inset: -7px 8%;
  border-top: 1px solid rgba(174, 234, 255, 0.44);
  filter: blur(0.2px);
}

.ship-normal-shield::after {
  inset: auto 14% -7px;
  border-top: 0;
  border-bottom: 1px solid rgba(174, 234, 255, 0.32);
}

.ship-normal-shield-fill {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: var(--ship-shield-fill, 100%);
  background: linear-gradient(90deg, rgba(43, 185, 255, 0.95), rgba(121, 244, 255, 0.74));
  box-shadow: 0 0 16px rgba(80, 220, 255, 0.58);
}

.ship-normal-shield-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d7fbff;
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.82);
  opacity: 0.9;
}

.ship-zone.enemy-zone .ship-normal-shield {
  bottom: 0;
}

.ship-zone.player-zone .ship-normal-shield {
  top: 0;
}

.ship-engineering-bay {
  position: absolute;
  z-index: 6;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--engineering-cell-gap);
  width: max-content;
  max-width: min(560px, 94%);
  transform: translateX(-50%);
  pointer-events: auto;
}

.ship-zone.enemy-zone .ship-engineering-bay {
  top: 0;
}

.ship-zone.player-zone .ship-engineering-bay {
  bottom: 0;
}

.engineering-cell {
  position: relative;
  width: var(--engineering-cell-size);
  aspect-ratio: 1.08;
  min-width: 0;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid rgba(80, 200, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(18, 54, 74, 0.96), rgba(4, 15, 25, 0.94));
  color: #bdf4ff;
  clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
  box-shadow:
    0 0 14px rgba(80, 200, 255, 0.22),
    inset 0 0 16px rgba(80, 200, 255, 0.1);
  overflow: hidden;
}

.engineering-cell::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(196, 242, 255, 0.16);
  clip-path: inherit;
  pointer-events: none;
}

.engineering-cell-icon,
.engineering-cell-value,
.engineering-cell-label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engineering-cell-icon {
  grid-area: stack;
  color: rgba(214, 250, 255, 0.86);
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 900;
  opacity: 0.5;
  transform: translateY(-1px) scale(1.08);
}

.engineering-cell-value {
  grid-area: stack;
  z-index: 2;
  box-sizing: border-box;
  min-width: 24px;
  max-width: calc(100% + 10px);
  padding: 3px 5px;
  overflow: visible;
  text-overflow: clip;
  color: #f2fdff;
  background: rgba(1, 8, 14, 0.58);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 0 10px rgba(80, 220, 255, 0.58);
}

.engineering-cell-label {
  color: rgba(207, 237, 245, 0.76);
  font-size: 0.48rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.engineering-cell.is-empty {
  opacity: 0.68;
  filter: saturate(0.72);
  background:
    linear-gradient(180deg, rgba(13, 32, 45, 0.9), rgba(4, 13, 22, 0.88));
}

.engineering-cell.is-impaired {
  border-color: rgba(255, 88, 78, 0.86);
  color: #ffd0ca;
  background: linear-gradient(180deg, rgba(78, 20, 18, 0.94), rgba(18, 5, 7, 0.9));
  box-shadow:
    0 0 18px rgba(255, 75, 67, 0.34),
    inset 0 0 18px rgba(255, 75, 67, 0.13);
}

.engineering-cell.is-impaired .engineering-cell-value {
  color: #ffe2dd;
  text-shadow: 0 0 10px rgba(255, 92, 82, 0.7);
}

.engineering-shield {
  border-color: rgba(94, 220, 255, 0.76);
  background: linear-gradient(180deg, rgba(18, 80, 112, 0.9), rgba(4, 18, 29, 0.9));
}

.engineering-trap {
  border-color: rgba(255, 210, 126, 0.78);
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(66, 42, 10, 0.92), rgba(14, 10, 4, 0.9));
  box-shadow:
    0 0 15px rgba(255, 186, 75, 0.26),
    inset 0 0 16px rgba(255, 186, 75, 0.12);
}

.engineering-trap.is-hidden {
  border-style: dashed;
}

.engineering-delayed {
  border-color: rgba(196, 132, 255, 0.82);
  color: #efd2ff;
  background: linear-gradient(180deg, rgba(50, 18, 72, 0.94), rgba(12, 5, 18, 0.9));
  box-shadow:
    0 0 16px rgba(196, 92, 255, 0.3),
    inset 0 0 16px rgba(196, 92, 255, 0.13);
}

.engineering-delayed.is-missile {
  border-color: rgba(255, 116, 82, 0.86);
  color: #ffd4c4;
  background: linear-gradient(180deg, rgba(78, 26, 12, 0.94), rgba(18, 7, 4, 0.9));
  box-shadow:
    0 0 16px rgba(255, 92, 65, 0.3),
    inset 0 0 16px rgba(255, 92, 65, 0.13);
}

.engineering-delayed.is-gatling,
.engineering-overflow {
  border-color: rgba(255, 226, 138, 0.84);
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(65, 45, 12, 0.94), rgba(16, 11, 4, 0.9));
}

.engineering-cell.is-resolving {
  filter: brightness(1.16);
  box-shadow:
    0 0 18px currentColor,
    inset 0 0 18px rgba(255, 255, 255, 0.16);
}