.ship-wrap {
  animation: saucer-bank-patrol 5.6s linear infinite alternate;
}

@keyframes saucer-bank-patrol {
  0% {
    left: 18%;
    transform: translateX(-50%) translateY(1px) rotate(-9deg);
  }
  5% {
    left: 21.2%;
    transform: translateX(-50%) translateY(4px) rotate(4deg);
  }
  10% {
    left: 24.4%;
    transform: translateX(-50%) translateY(0) rotate(-2deg);
  }
  30% {
    left: 37.2%;
    transform: translateX(-50%) translateY(var(--jink-y-1, 2px)) rotate(var(--jink-bank-1, -1deg));
  }
  50% {
    left: 50%;
    transform: translateX(-50%) translateY(var(--jink-y-2, 4px)) rotate(var(--jink-bank-2, 1deg));
  }
  70% {
    left: 62.8%;
    transform: translateX(-50%) translateY(var(--jink-y-3, 1px)) rotate(var(--jink-bank-3, 2deg));
  }
  90% {
    left: 75.6%;
    transform: translateX(-50%) translateY(0) rotate(2deg);
  }
  95% {
    left: 78.8%;
    transform: translateX(-50%) translateY(4px) rotate(-4deg);
  }
  100% {
    left: 82%;
    transform: translateX(-50%) translateY(1px) rotate(9deg);
  }
}

.point-penalty.phase-score-token {
  color: #54ff8a;
  text-shadow: 0 2px #075522, 0 0 5px #fff, 0 0 18px #24ff69, 0 0 35px rgba(24, 255, 94, .8);
  animation: phase-score-pop var(--score-hold, 3.95s) ease-out forwards;
}

.point-penalty.defeat-token {
  color: #ff301f;
  text-shadow: 0 3px #660700, 0 0 6px #fff, 0 0 20px #ff2818, 0 0 42px rgba(255, 26, 10, .95);
  animation: phase-score-pop 5s ease-out forwards;
}

.point-penalty.defeat-token b {
  border-color: #ff4b32;
  background: rgba(42, 3, 1, .9);
  color: #ffc0b4;
  text-shadow: 0 0 8px #ff2e17;
}

.point-penalty.defeat-token small {
  display: block;
  width: min(82vw, 350px);
  margin-top: 13px;
  color: #fff1ed;
  font: 900 clamp(16px, 4.8vw, 21px) ui-monospace;
  line-height: 1.25;
  letter-spacing: .025em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 2px #2a0000, 0 0 8px #ff2e17;
  white-space: normal;
}

.point-penalty.phase-score-token b {
  border-color: #54ff8a;
  background: rgba(2, 30, 13, .84);
  color: #baffcf;
  text-shadow: 0 0 7px #20ff65;
}

.point-penalty.phase-score-token b small {
  display: block;
  margin-top: 7px;
  color: #baffcf;
  font: 900 9px/1.25 ui-monospace;
  letter-spacing: .08em;
  white-space: normal;
}

.run-score #runTimes {
  margin: 7px 0 3px;
  color: #dce8ec;
  font-size: 9px;
  letter-spacing: .06em;
}

.performance-insights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 9px;
}

.performance-insights b {
  padding: 4px 7px;
  border: 1px solid rgba(84, 255, 138, .48);
  border-radius: 4px;
  background: rgba(12, 63, 31, .48);
  color: #a9ffc3;
  font: 900 7px ui-monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(36, 255, 105, .55);
}

.pinball-score-token b {
  width: min(340px, 90vw);
  padding: 11px 13px 12px;
}

.pinball-score-token .pinball-line,
.pinball-score-token .pinball-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 7px 9px;
  border-top: 1px solid rgba(84, 255, 138, .42);
  color: #baffcf;
  text-align: left;
}

.pinball-score-token .pinball-line small,
.pinball-score-token .pinball-total small {
  margin: 0;
  color: #8fffb1;
  font: 900 9px ui-monospace;
  letter-spacing: .13em;
}

.pinball-score-token .pinball-line strong,
.pinball-score-token .pinball-total strong {
  color: #effff3;
  font: 900 clamp(20px, 6.5vw, 29px) ui-monospace;
  line-height: 1;
  text-shadow: 0 0 5px #fff, 0 0 13px #24ff69;
}

.pinball-score-token .bonus-line {
  max-height: 0;
  margin-top: 0;
  padding-block: 0;
  transform: translateY(-8px);
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, margin .35s ease, padding .35s ease, transform .35s ease, opacity .25s ease;
}

.pinball-score-token.show-bonus .bonus-line {
  max-height: 48px;
  margin-top: 8px;
  padding-block: 7px;
  transform: translateY(0);
  opacity: 1;
}

.raider-score-token.show-perfect .perfect-line,
.raider-score-token.show-time .time-bonus-line {
  max-height: 48px;
  margin-top: 8px;
  padding-block: 7px;
  transform: translateY(0);
  opacity: 1;
}

.pinball-score-token .pinball-total {
  margin-top: 0;
  transform: translateY(-12px) rotateX(68deg);
  opacity: 0;
  transform-origin: center top;
}

.pinball-score-token.tallying .pinball-total {
  animation: pinball-total-roll .48s cubic-bezier(.18, .82, .2, 1) forwards;
}

.pinball-score-token.total-settled .pinball-total {
  filter: brightness(1.35);
}

@keyframes pinball-total-roll {
  0% { transform: translateY(-12px) rotateX(68deg); opacity: 0; }
  64% { transform: translateY(3px) rotateX(-8deg); opacity: 1; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}

.point-penalty.turret-score-token b {
  display: block;
  box-sizing: border-box;
  width: min(330px, 88vw);
  padding: 10px 12px 8px;
  font-size: clamp(16px, 5.2vw, 23px);
  line-height: 1.05;
  letter-spacing: .075em;
  text-align: center;
  white-space: normal;
}

.point-penalty.turret-score-token b small {
  display: block;
  margin-top: 7px;
  font: 900 .58em ui-monospace;
  letter-spacing: .24em;
  color: #7dffa5;
}

.point-penalty.turret-score-token b em {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(84,255,138,.55);
  color: #54ff8a;
  font: 900 clamp(25px, 8vw, 38px) ui-monospace;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 2px #075522, 0 0 5px #fff, 0 0 18px #24ff69;
}

.raider-reward {
  position: absolute;
  z-index: 24;
  transform: translate(-50%, -50%);
  color: #baffc9;
  font: 900 clamp(22px, 7vw, 31px) ui-monospace;
  line-height: 1;
  text-shadow: 0 2px #075522, 0 0 5px #fff, 0 0 14px #24ff69;
  white-space: nowrap;
  pointer-events: none;
  animation: raider-reward-pop .95s ease-out forwards;
}

@keyframes raider-reward-pop {
  0% { transform: translate(-50%, -50%) scale(.45); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  68% { transform: translate(-50%, -65%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -95%) scale(.92); opacity: 0; }
}

.status-strip .combo-status strong {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin: 0;
  white-space: nowrap;
}

.status-strip .combo-status strong span {
  color: #a9bfce;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: 1;
}

.status-strip .combo-status strong b {
  color: #efffff;
  font: 900 17px ui-monospace;
  line-height: 1;
}

/* Score and combo now own the space previously used by informational counters. */
.status-strip {
  grid-template-columns: .9fr 1.65fr 1.45fr;
  grid-template-rows: 1fr;
}

.status-strip > div:nth-child(1),
.status-strip > div:nth-child(2),
.status-strip > div:nth-child(3) {
  grid-row: 1;
}

.status-strip > div:nth-child(3) {
  grid-column: 3;
  border-bottom: 0;
}

.status-strip .combo-status strong b {
  font-size: 25px;
}

.status-strip .combo-status strong span {
  font-size: 12px;
}

.miss-penalty {
  position: absolute;
  z-index: 24;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transform: translateX(-50%);
  color: #ff5b45;
  font: 900 clamp(18px, 5.8vw, 25px) ui-monospace;
  text-shadow: 0 2px #5e0800, 0 0 9px rgba(255, 42, 20, .8);
  white-space: nowrap;
  pointer-events: none;
  animation: miss-penalty-pop 1.15s ease-out forwards;
}

.miss-penalty b {
  padding: 3px 6px;
  border: 1px solid #ff624c;
  border-radius: 3px;
  background: rgba(42, 3, 1, .84);
  font-size: .55em;
  letter-spacing: .12em;
}

.app-shell.miss-alarm {
  animation: miss-rattle .36s ease-out;
}

@keyframes miss-rattle {
  0%,100% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 1px); }
}

@keyframes miss-penalty-pop {
  0% { transform: translate(-50%, 8px) scale(.65); opacity: 0; }
  18%,72% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -12px) scale(.94); opacity: 0; }
}

.battlefield.turret-hero .defense-turret .turret-head {
  animation: turret-online-hero 1s ease-in-out both;
}

@keyframes turret-online-hero {
  0% { filter: brightness(1) drop-shadow(0 2px 3px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(49,231,255,.45)); }
  45% { filter: brightness(1.65) saturate(1.25) drop-shadow(0 0 8px #31e7ff) drop-shadow(0 0 15px rgba(55,255,108,.95)); }
  100% { filter: brightness(1.65) saturate(1.25) drop-shadow(0 0 8px #31e7ff) drop-shadow(0 0 15px rgba(55,255,108,.95)); }
}

@keyframes phase-score-pop {
  0% { transform: translate(-50%, 18px) scale(.35); opacity: 0; }
  7% { transform: translate(-50%, 0) scale(1.18); opacity: 1; }
  16%, 90% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -15px) scale(.96); opacity: 0; }
}

.fortress-card.next::before {
  display: grid;
  position: absolute;
  z-index: 11;
  inset: 0;
  place-items: center;
  color: #fff;
  font: 1000 clamp(23px, 7.8vw, 34px) ui-monospace, monospace;
  letter-spacing: -.08em;
  line-height: 1;
  text-shadow: 0 2px 2px #020811, 0 0 5px #06111e, 0 0 13px rgba(255, 255, 255, .9), 0 0 24px rgba(49, 231, 255, .75);
  pointer-events: none;
}

.fortress-card.next::before {
  background: radial-gradient(circle, rgba(17, 46, 68, .84) 0, rgba(7, 20, 34, .35) 48%, transparent 72%);
  animation: active-position-pulse 1.15s ease-in-out infinite alternate;
}

@keyframes active-position-pulse {
  to { transform: scale(1.1); filter: brightness(1.25); }
}

.target-card.answer-hidden {
  visibility: hidden;
}

.position-grid.numeric-keypad {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.numeric-keypad .position-code {
  grid-column: 1 / -1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(49, 231, 255, .5);
  border-radius: 7px;
  background: rgba(5, 24, 37, .92);
  box-shadow: inset 0 0 14px rgba(49, 231, 255, .1), 0 0 10px rgba(49, 231, 255, .12);
}

.position-code small {
  color: #80a9ba;
  font: 800 8px ui-monospace, monospace;
  letter-spacing: .1em;
}

.position-code strong {
  color: #fff;
  font: 1000 21px ui-monospace, monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 10px var(--cyan);
}

.numeric-keypad .position-button {
  height: 31px;
  padding: 0;
  color: #fff;
  border-color: #5d8096;
}

.replay-option {
  margin-top: 12px;
}

.replay-option button {
  width: 100%;
  min-height: 42px;
  border: 1px solid #496c82;
  border-radius: 7px;
  background: linear-gradient(180deg, #13263a, #091522);
  color: #dffaff;
  font: 900 11px ui-monospace, monospace;
  letter-spacing: .08em;
}

.replay-option small {
  display: block;
  margin-top: 6px;
  color: #7894a8;
  font: 800 8px ui-monospace, monospace;
  letter-spacing: .05em;
}

.status-strip {
  position: relative;
  height: 68px;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.status-strip > div:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.status-strip > div:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
  border-left: 1px solid rgba(62, 105, 139, .26);
  border-right: 1px solid rgba(62, 105, 139, .26);
}

.status-strip > div:nth-child(2) strong {
  margin-top: 1px;
  color: #fff;
  font-size: 44px;
  line-height: .82;
  letter-spacing: -.07em;
  text-shadow: 0 0 8px #fff, 0 0 18px var(--cyan), 0 0 34px rgba(49, 231, 255, .65);
}

.status-strip > div:nth-child(3),
.status-strip > div:nth-child(4) {
  grid-column: 3;
  min-height: 0;
  border-right: 0;
}

.status-strip > div:nth-child(3) {
  grid-row: 1;
  border-bottom: 1px solid rgba(62, 105, 139, .26);
}

.status-strip > div:nth-child(4) {
  grid-row: 2;
}

.status-strip > div:nth-child(3) strong,
.status-strip > div:nth-child(4) strong {
  margin-top: 0;
  font-size: 10px;
}

.tutorial-overlay {
  position: fixed;
  z-index: 70;
  inset: 0;
  background: rgba(1, 6, 14, .12);
}

.tutorial-card {
  position: absolute;
  z-index: 3;
  top: calc(108px + env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100% - 30px), 430px);
  padding: 17px 17px 15px;
  transform: translateX(-50%);
  border: 1px solid var(--cyan);
  border-radius: 13px;
  background: radial-gradient(circle at 50% 0, rgba(23, 72, 98, .98), rgba(6, 19, 32, .98) 70%);
  box-shadow: 0 0 28px rgba(49, 231, 255, .28), 0 14px 38px rgba(0, 0, 0, .6);
  text-align: center;
}

.tutorial-card h2 {
  margin: 6px 0 7px;
  color: #fff;
  font-size: 21px;
  letter-spacing: .05em;
}

.tutorial-card > p:not(.eyebrow) {
  min-height: 42px;
  margin: 0;
  color: #bdd2df;
  font-size: 12px;
  line-height: 1.45;
}

.tutorial-rings {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.tutorial-ring {
  position: fixed;
  border: 3px solid #fff36a;
  border-radius: 16px;
  box-shadow: 0 0 5px #fff, 0 0 14px #ffd52f, 0 0 29px rgba(255, 191, 24, .9), inset 0 0 14px rgba(255, 231, 64, .3);
  animation: tutorial-ring-pulse .75s ease-in-out infinite alternate;
}

.tutorial-ring::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  width: max-content;
  padding: 4px 7px;
  border: 1px solid #fff36a;
  border-radius: 5px;
  background: #07111d;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 213, 47, .75);
  font: 1000 9px ui-monospace, monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 5px #000;
  white-space: nowrap;
}

.tutorial-ring.label-above::after {
  top: -24px;
  bottom: auto;
}

.target-card.tutorial-reveal {
  visibility: visible !important;
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 11px 0;
}

.tutorial-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #36556b;
}

.tutorial-dots i.active {
  background: #fff;
  box-shadow: 0 0 8px var(--cyan);
}

.tutorial-actions {
  display: block;
}

.tutorial-actions button {
  height: 40px;
  border: 1px solid #46677d;
  border-radius: 7px;
  background: #0b1a29;
  color: #91a9ba;
  font: 900 10px ui-monospace, monospace;
  letter-spacing: .08em;
}

.tutorial-actions button {
  width: 100%;
  border: 0;
  background: linear-gradient(90deg, #237bd8, var(--cyan));
  color: #03121b;
}

@keyframes tutorial-ring-pulse {
  to { transform: scale(1.06); filter: brightness(1.3); }
}

@media (max-height: 700px) {
  .tutorial-card {
    top: calc(82px + env(safe-area-inset-top));
    padding: 12px 14px;
  }
  .tutorial-card h2 { font-size: 18px; }
  .tutorial-card > p:not(.eyebrow) { min-height: 34px; font-size: 11px; }
}

footer {
  display: none;
}

.suit-button {
  height: 46px;
  border-radius: 8px;
}

.suit-button span {
  font-size: 25px;
}

.suit-button small {
  font-size: 8px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button.top-restart {
  width: auto;
  padding: 0 10px;
  border-color: #ff8737;
  background: linear-gradient(180deg, #67270d, #321205);
  color: #ffd0a8;
  box-shadow: inset 0 1px rgba(255, 218, 181, .2), 0 0 9px rgba(255, 92, 24, .25);
  font: 900 9px ui-monospace, monospace;
  letter-spacing: .05em;
}

.icon-button.top-restart:active {
  background: linear-gradient(180deg, #8d3610, #481705);
  box-shadow: 0 0 13px rgba(255, 106, 34, .6);
}

.tutorial-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 13px;
  border: 1px solid #31536a;
  border-radius: 9px;
  background: rgba(8, 23, 37, .9);
  text-align: left;
}

.tutorial-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tutorial-toggle > i {
  position: relative;
  width: 42px;
  height: 23px;
  border-radius: 14px;
  background: #1b3243;
  box-shadow: inset 0 1px 4px #02070c;
}

.tutorial-toggle > i::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #718898;
  transition: .2s;
}

.tutorial-toggle input:checked + i {
  background: rgba(49, 231, 255, .35);
  box-shadow: inset 0 0 8px rgba(49, 231, 255, .55), 0 0 9px rgba(49, 231, 255, .3);
}

.tutorial-toggle input:checked + i::after {
  left: 22px;
  background: #fff;
  box-shadow: 0 0 8px var(--cyan);
}

.tutorial-toggle span strong,
.tutorial-toggle span small {
  display: block;
}

.tutorial-toggle span strong {
  color: #e9fbff;
  font-size: 11px;
  letter-spacing: .08em;
}

.tutorial-toggle span small {
  margin-top: 3px;
  color: #7894a8;
  font-size: 9px;
}

/* Fortress defense bays arrive in two construction milestones. */
.defense-turret {
  opacity: 0;
  transform: translateY(18px) scale(.68);
  transform-origin: center bottom;
  transition: opacity .2s ease, transform .55s cubic-bezier(.2, .9, .2, 1.25);
}

.battlefield.bays-built .defense-turret {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bay-lock-in .58s ease-out both;
}

.defense-turret::before {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 63px;
  height: 34px;
  border: 2px solid #a9bec8;
  background: linear-gradient(145deg, #d2dee3 0 10%, #718995 28%, #344d59 62%, #142630 100%);
  box-shadow: inset 0 3px #e2edf1, inset 0 -5px #10222c, 0 0 9px rgba(49, 231, 255, .38);
}

.defense-turret.left::before {
  left: 25px;
  border-radius: 3px 6px 8px 3px;
  clip-path: polygon(0 48%, 30% 48%, 30% 24%, 62% 24%, 62% 0, 100% 0, 100% 100%, 0 100%);
}

.defense-turret.right::before {
  right: 25px;
  border-radius: 6px 3px 3px 8px;
  clip-path: polygon(0 0, 38% 0, 38% 24%, 70% 24%, 70% 48%, 100% 48%, 100% 100%, 0 100%);
}

.defense-turret::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 6px;
  width: 49px;
  height: 20px;
  border: 2px solid #718b99;
  background: linear-gradient(180deg, #213943, #4d6874 52%, #172a34);
  box-shadow: inset 0 2px #90a8b3, inset 0 -3px #0d1c24, 0 0 6px rgba(49, 231, 255, .25);
}

.defense-turret.left::after {
  left: 32px;
  border-radius: 3px 5px 6px 3px;
  clip-path: polygon(0 36%, 28% 36%, 28% 0, 100% 0, 100% 100%, 0 100%);
}

.defense-turret.right::after {
  right: 32px;
  border-radius: 5px 3px 3px 6px;
  clip-path: polygon(0 0, 72% 0, 72% 36%, 100% 36%, 100% 100%, 0 100%);
}

.defense-turrets {
  z-index: 4;
  left: 50%;
  right: auto;
  bottom: 31px;
  width: calc(var(--card-w) * 5 + 22px);
  transform: translateX(-50%);
}

.defense-turret.left { left: -39px; }
.defense-turret.right { right: -39px; }

.defense-turret > span {
  bottom: 0;
  width: 43px;
}

.defense-turret.left > span { left: 3px; }
.defense-turret.right > span { left: 3px; }

.battlefield.bays-built .defense-turret::after {
  background-image: radial-gradient(circle at 10px 8px, #4ff1ff 0 2px, transparent 3px), radial-gradient(circle at calc(100% - 10px) calc(100% - 7px), #4ff1ff 0 2px, transparent 3px), linear-gradient(180deg, #213943, #4d6874 52%, #172a34);
}

.bay-door {
  position: absolute;
  z-index: 4;
  bottom: 13px;
  width: 18px;
  height: 27px;
  border: 1px solid #b7c8d0;
  background: linear-gradient(90deg, #263b48, #96aab4 55%, #304956);
  box-shadow: inset 0 0 5px #13232d, 0 0 5px rgba(49, 231, 255, .25);
  transition: transform 2.5s 1s cubic-bezier(.2, .8, .2, 1), opacity 1.4s 1.8s;
}

.bay-door::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #31e7ff;
  box-shadow: 0 0 5px #31e7ff;
}

.bay-door.door-left { left: 7px; border-radius: 8px 1px 1px 3px; }
.bay-door.door-left::after { right: 2px; }
.bay-door.door-right { right: 7px; border-radius: 1px 8px 3px 1px; }
.bay-door.door-right::after { left: 2px; }

.defense-turret .turret-head {
  opacity: 0;
  bottom: 4px;
  transform: translateY(24px) scale(.7);
}

.battlefield.turrets-deployed .defense-turret .turret-head {
  opacity: 1;
  bottom: 9px;
  transform: translateY(0) scale(1);
  transition: opacity .55s 1.2s, bottom 2.5s 1s cubic-bezier(.16, .85, .2, 1.05), transform .08s linear;
}

.battlefield.turrets-deployed .door-left {
  transform: translateX(-15px) rotate(-28deg);
  opacity: .72;
}

.battlefield.turrets-deployed .door-right {
  transform: translateX(15px) rotate(28deg);
  opacity: .72;
}

@keyframes bay-lock-in {
  0% { filter: brightness(2.2); }
  45% { filter: brightness(1.35); }
  70% { transform: translateY(-3px) scale(1.04); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

@media (max-height: 700px) {
  .defense-turrets { bottom: 25px; }
}

@media (max-width: 360px) {
  .defense-turret.left { left: -27px; }
  .defense-turret.right { right: -27px; }
  .defense-turret::before { width: 52px; }
  .defense-turret::after { width: 40px; }
}

/* Layered paper damage keeps every rank readable while the card breaks apart. */
.fortress-card.damaged .card-face {
  overflow: visible;
  background: linear-gradient(145deg, #f7f6ef 0, #d8d4c7 58%, #b8b1a2 100%);
  box-shadow: inset 0 0 3px rgba(53,35,22,.32), inset 0 0 10px rgba(65,31,14,.16), 0 2px 5px rgba(0,0,0,.58);
}

.damage-surface {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.damage-surface::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse at 100% 4%, rgba(19,8,3,.95) 0 6%, rgba(91,39,15,.8) 9%, transparent 25%), radial-gradient(ellipse at 3% 98%, rgba(28,12,5,.82) 0 4%, rgba(105,45,17,.58) 9%, transparent 24%), linear-gradient(90deg, rgba(34,17,9,.3), transparent 12% 86%, rgba(30,13,5,.48));
  opacity: .32;
}

.impact-burn {
  position: absolute;
  z-index: 3;
  right: -4px;
  top: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #030201 0 16%, #291108 19% 31%, #783419 36% 44%, rgba(126,62,29,.4) 53%, transparent 72%);
  box-shadow: 0 0 4px rgba(255,105,31,.25);
}

.split {
  position: absolute;
  z-index: 4;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.main-split {
  left: 48%;
  top: 7%;
  width: 8px;
  height: 88%;
  transform: rotate(-8deg);
  clip-path: polygon(42% 0,70% 0,56% 13%,100% 23%,52% 36%,82% 50%,38% 63%,65% 78%,28% 100%,0 100%,24% 78%,2% 64%,35% 49%,12% 34%,45% 22%,20% 11%);
  background: linear-gradient(90deg, rgba(35,15,7,.15), #140804 27%, #020101 50%, #5b2811 74%, rgba(28,12,5,.08));
  filter: drop-shadow(1px 0 1px rgba(255,181,91,.28));
}

.branch-one,.branch-two {
  width: 47%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #31170c 18% 82%, transparent);
  box-shadow: 0 1px rgba(255,255,255,.24);
  transform-origin: right center;
}

.branch-one { left: 6%; top: 38%; transform: rotate(21deg); }
.branch-two { right: 4%; top: 62%; transform: rotate(-27deg); }

.char-patch {
  position: absolute;
  z-index: 2;
  right: -8px;
  top: 14%;
  width: 25px;
  height: 52%;
  background: radial-gradient(ellipse at 100% 50%, #080402 0 25%, #32140a 43%, rgba(113,47,17,.55) 58%, transparent 75%);
  opacity: .15;
  filter: blur(.2px);
}

.ember-seam {
  position: absolute;
  z-index: 5;
  left: calc(48% + 2px);
  top: 14%;
  width: 2px;
  height: 72%;
  transform: rotate(-8deg);
  background: linear-gradient(transparent, #ff5a13 18%, #ffb129 45%, #ff3b0b 75%, transparent);
  box-shadow: 0 0 3px #ff4610;
  opacity: 0;
}

.damage-1 .damage-surface { opacity: .72; }
.damage-1 .impact-burn { transform: scale(.72); }
.damage-1 .branch-one { opacity: .6; }
.damage-2 .damage-surface::after { opacity: .55; }
.damage-2 .impact-burn { transform: scale(.92); }
.damage-2 .branch-one,.damage-2 .branch-two { opacity: .75; }
.damage-2 .main-split { opacity: .58; width: 4px; }
.damage-2 .char-patch { opacity: .38; }
.damage-3 .damage-surface::after { opacity: .78; }
.damage-3 .main-split,.damage-3 .branch-one,.damage-3 .branch-two { opacity: .9; }
.damage-3 .char-patch { opacity: .72; width: 31px; }
.damage-4 .damage-surface::after { opacity: 1; }
.damage-4 .main-split,.damage-4 .branch-one,.damage-4 .branch-two { opacity: 1; }
.damage-4 .main-split { width: 11px; }
.damage-4 .char-patch { opacity: 1; width: 36px; }
.damage-4 .ember-seam { opacity: 1; animation: ember-breathe .58s ease-in-out infinite alternate; }

.fortress-card.damage-1 .card-face { clip-path: polygon(0 0, 91% 0, 100% 9%, 100% 100%, 0 100%); }
.fortress-card.damage-2 .card-face { clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 0 100%, 0 9%); }
.fortress-card.damage-3 .card-face { clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 83%, 90% 100%, 0 100%, 0 18%, 7% 10%); }
.fortress-card.damage-4 .card-face { clip-path: polygon(8% 0, 70% 0, 100% 30%, 100% 72%, 83% 100%, 0 100%, 0 25%); }

.fortress-card.critical {
  box-shadow: 0 0 7px 1px rgba(255,76,18,.68), inset 0 0 12px rgba(255,55,8,.26);
  animation: critical-heat .75s ease-in-out infinite alternate;
}

.fortress-card.critical .card-flames {
  right: -2px;
  top: -8px;
  width: 19px;
  height: 28px;
  filter: drop-shadow(0 0 3px rgba(255,78,14,.72));
}

.fortress-card.critical .card-flames i {
  width: 7px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 88%, #fff7a0 0 10%, #ffc22d 24%, #ff5a11 52%, rgba(123,20,3,.28) 72%, transparent 76%);
  clip-path: polygon(50% 0, 72% 32%, 100% 60%, 76% 100%, 18% 100%, 0 62%, 29% 35%);
  animation: realistic-flame .42s ease-in-out infinite alternate;
}

.fortress-card.critical .card-flames i:nth-child(1) { left: 0; height: 13px; animation-delay: -.17s; }
.fortress-card.critical .card-flames i:nth-child(2) { left: 6px; height: 22px; animation-delay: -.31s; }
.fortress-card.critical .card-flames i:nth-child(3) { right: 0; height: 15px; animation-delay: -.08s; }
.fortress-card.critical .card-flames b { opacity: .3; transform:scale(.65); }
.fortress-card.critical .card-flames em { position:absolute;bottom:4px;width:2px;height:2px;border-radius:50%;background:#ffd65a;box-shadow:0 0 3px #ff4c0d;animation:ash-spark 1s ease-out infinite; }
.fortress-card.critical .card-flames em:nth-of-type(1) { left:5px;animation-delay:-.3s; }
.fortress-card.critical .card-flames em:nth-of-type(2) { right:3px;animation-delay:-.75s; }

@keyframes ember-breathe { to { filter: brightness(1.7); box-shadow: 0 0 5px #ff5a12; } }
@keyframes realistic-flame { from { transform: translateY(1px) rotate(-4deg) scale(.9,1); opacity:.8; } to { transform: translateY(-2px) rotate(5deg) scale(1.08,.86); opacity:1; } }
@keyframes ash-spark { 0% { transform:translate(0,0);opacity:0; } 20% { opacity:1; } 100% { transform:translate(4px,-18px);opacity:0; } }
@keyframes critical-heat { to { filter: brightness(1.08) saturate(1.08); } }

/* Five stable damage skins prevent every fortress card from breaking identically. */
.damage-variant-2 .damage-surface { transform: scaleX(-1); }
.damage-variant-2 .card-flames { left: -2px; right: auto; }
.fortress-card.damage-variant-2.damage-3 .card-face { clip-path: polygon(24% 0,100% 0,100% 82%,93% 90%,100% 100%,10% 100%,0 83%,0 24%); }
.fortress-card.damage-variant-2.damage-4 .card-face { clip-path: polygon(30% 0,92% 0,100% 25%,100% 100%,17% 100%,0 72%,0 30%); }

.damage-variant-3 .damage-surface { transform: rotate(180deg); }
.damage-variant-3 .card-flames { left: -3px; right: auto; top: auto; bottom: -3px; transform: rotate(-12deg); }
.fortress-card.damage-variant-3.damage-3 .card-face { clip-path: polygon(0 0,90% 0,100% 17%,100% 76%,84% 100%,24% 100%,0 78%); }
.fortress-card.damage-variant-3.damage-4 .card-face { clip-path: polygon(0 0,100% 0,100% 70%,72% 100%,30% 100%,0 76%,0 15%); }

.damage-variant-4 .impact-burn { left: -5px; right: auto; top: 8%; transform: scale(.88); }
.damage-variant-4 .main-split { left: 38%; transform: rotate(11deg); }
.damage-variant-4 .ember-seam { left: calc(38% + 2px); transform: rotate(11deg); }
.damage-variant-4 .branch-one { top: 29%; transform: rotate(-17deg); }
.damage-variant-4 .branch-two { top: 72%; transform: rotate(18deg); }
.damage-variant-4 .char-patch { left: -9px; right: auto; top: 24%; }
.damage-variant-4 .card-flames { left: -2px; right: auto; top: 7px; }
.fortress-card.damage-variant-4.damage-3 .card-face { clip-path: polygon(18% 0,100% 0,100% 100%,23% 100%,0 80%,0 20%); }
.fortress-card.damage-variant-4.damage-4 .card-face { clip-path: polygon(28% 0,100% 0,100% 68%,82% 100%,22% 100%,0 74%,0 27%); }

.damage-variant-5 .impact-burn { right: 4%; top: auto; bottom: -6px; transform: scale(.82); }
.damage-variant-5 .main-split { left: 60%; transform: rotate(14deg); }
.damage-variant-5 .ember-seam { left: calc(60% + 2px); transform: rotate(14deg); }
.damage-variant-5 .branch-one { left: 12%; top: 52%; transform: rotate(31deg); }
.damage-variant-5 .branch-two { right: 9%; top: 34%; transform: rotate(-14deg); }
.damage-variant-5 .char-patch { right: 8%; top: auto; bottom: -8px; width: 72%; height: 28%; background: radial-gradient(ellipse at 52% 100%,#080402 0 25%,#32140a 43%,rgba(113,47,17,.55) 58%,transparent 75%); }
.damage-variant-5 .card-flames { left: 50%; right: auto; top: -8px; transform: translateX(-50%); }
.fortress-card.damage-variant-5.damage-3 .card-face { clip-path: polygon(0 0,78% 0,100% 19%,100% 100%,66% 100%,55% 91%,42% 100%,0 100%,0 12%); }
.fortress-card.damage-variant-5.damage-4 .card-face { clip-path: polygon(0 0,72% 0,100% 28%,100% 79%,85% 100%,66% 100%,53% 86%,37% 100%,0 100%,0 22%); }

/* Silver command-interface skin shared by selection, tutorial, and report screens. */
.stack-chooser {
  background: radial-gradient(ellipse at 50% 8%, #4f5a63 0, #1b242c 24%, #080d12 58%, #020406 100%);
}

.stack-chooser-card,.modal-card,.tutorial-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #aeb9bf;
  background: linear-gradient(145deg, rgba(153,164,170,.96) 0, rgba(69,79,86,.98) 9%, rgba(27,35,41,.99) 30%, rgba(10,15,20,.99) 72%, rgba(52,62,68,.98) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.82), inset 0 -2px rgba(0,0,0,.72), 0 0 0 1px #202b31, 0 18px 55px rgba(0,0,0,.72), 0 0 24px rgba(211,228,236,.16);
}

.stack-chooser-card {
  padding: 24px 20px 20px;
  border-radius: 16px;
}

.stack-chooser-card::before,.modal-card::before,.tutorial-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -40%;
  bottom: -40%;
  left: -55%;
  width: 34%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), rgba(235,247,252,.22), rgba(255,255,255,.04), transparent);
  animation: metal-shimmer 6.5s ease-in-out infinite;
  pointer-events: none;
}

.stack-chooser-card > *,.modal-card > *,.tutorial-card > * { position: relative; z-index: 1; }
.stack-chooser .eyebrow,.modal-card .eyebrow,.tutorial-card .eyebrow { color: #d9e2e6; text-shadow: 0 0 8px rgba(224,244,252,.35); }
.stack-chooser-card > p:not(.eyebrow),.modal-card p:not(.eyebrow),.tutorial-card > p:not(.eyebrow) { color: #bac4c9; }

.chooser-orbit {
  border-color: rgba(220,232,238,.62);
  background: radial-gradient(circle, rgba(166,180,187,.16), rgba(14,20,25,.38));
  box-shadow: 0 0 25px rgba(210,229,237,.16), inset 0 0 24px rgba(218,233,239,.12);
}
.chooser-orbit::before,.chooser-orbit::after { border-color: rgba(150,168,178,.62); }
.chooser-orbit b { color: #eef6f8; text-shadow: 0 0 10px rgba(219,241,248,.55); }
.chooser-orbit i { background: #d6e1e5; box-shadow: 0 0 12px #effcff; }

.stack-options button {
  overflow: hidden;
  border-color: #7e8b92;
  background: linear-gradient(120deg, #9da7ac 0, #59656b 4%, #2e3940 18%, #151d23 56%, #39444a 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.62), inset 0 -2px rgba(0,0,0,.58), 0 3px 9px rgba(0,0,0,.42);
}
.stack-options button::after { content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.16) 49%,transparent 62%);transform:translateX(-120%);transition:transform .65s ease;pointer-events:none; }
.stack-options button:active::after { transform:translateX(120%); }
.stack-options button:active { border-color:#f3fbff;filter:brightness(1.18); }
.stack-options strong { color:#f4f7f8; text-shadow:0 1px #000; }
.stack-options small { color:#b2bdc2; }
.stack-options span { color:#e4edf0; }

.primary-button,.replay-option button {
  border: 1px solid #c8d1d5;
  background: linear-gradient(180deg, #e5eaec 0, #9ba6ab 44%, #59656b 52%, #89949a 100%);
  color: #11191e;
  box-shadow: inset 0 1px #fff, inset 0 -2px #354047, 0 4px 12px rgba(0,0,0,.42);
  text-shadow: 0 1px rgba(255,255,255,.58);
}

.leaderboard .run-score {
  border-color: #9aa7ad;
  background: radial-gradient(circle at 50% 0, rgba(217,228,233,.18), rgba(20,27,32,.92) 66%);
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 20px rgba(206,224,232,.12);
}
.run-score span,.run-score small { color:#c4ced2; }
.run-score strong { color:#f2f6f7; text-shadow:0 0 7px #fff,0 0 18px rgba(203,229,239,.55); }
.leaderboard > p { color:#c0cbd0!important; }
.leaderboard li { border-color:#65737a;background:linear-gradient(110deg,rgba(88,99,105,.72),rgba(24,31,36,.92) 22%,rgba(12,17,21,.96));box-shadow:inset 0 1px rgba(255,255,255,.16); }
.leaderboard li.current { border-color:#dbe4e8;background:linear-gradient(110deg,rgba(167,179,185,.36),rgba(39,48,54,.94)); }
.leaderboard li b,.leaderboard li span { color:#aebbc1; }
.leaderboard li strong { color:#f5f8f9; }

@keyframes metal-shimmer {
  0%,18% { left:-55%;opacity:0; }
  30% { opacity:.9; }
  52% { left:125%;opacity:.35; }
  100% { left:125%;opacity:0; }
}

/* Approved twin-cannon turret A. The head rotates independently on the existing bay. */
.defense-turret .turret-head {
  left: -7px;
  width: 63px;
  height: 63px;
  border: 0;
  border-radius: 0;
  background: url('assets/twin-cannon-turret.png') center / contain no-repeat;
  box-shadow: none;
  transform-origin: 50% 54%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(49,231,255,.45));
}

.defense-turret .turret-head > * { display: none; }
.defense-turret.firing .turret-head { filter: brightness(1.22) drop-shadow(0 0 7px rgba(55,255,108,.8)); }
.ground-laser.twin-beam { height: 4px; }

/* Design B observatory dome. Six broad bands telescope flat into the floor rim. */
.dome-shell {
  position: absolute;
  z-index: 5;
  left: -7px;
  bottom: 2px;
  width: 63px;
  height: 59px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(49,231,255,.35));
}

.dome-shell > i {
  position: absolute;
  inset: 0;
  background: url('assets/telescope-dome-b.png') center / 100% 100% no-repeat;
  transform-origin: 50% 91%;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.18,.72,.22,1), ease;
}

.dome-shell > i:nth-child(1) { clip-path: inset(0 0 80% 0); transition-duration: 2.5s, .55s; transition-delay: 1s, 2.95s; }
.dome-shell > i:nth-child(2) { clip-path: inset(16% 0 65% 0); transition-duration: 2.42s, .55s; transition-delay: 1.08s, 2.95s; }
.dome-shell > i:nth-child(3) { clip-path: inset(31% 0 49% 0); transition-duration: 2.34s, .55s; transition-delay: 1.16s, 2.95s; }
.dome-shell > i:nth-child(4) { clip-path: inset(47% 0 33% 0); transition-duration: 2.26s, .55s; transition-delay: 1.24s, 2.95s; }
.dome-shell > i:nth-child(5) { clip-path: inset(63% 0 17% 0); transition-duration: 2.18s, .55s; transition-delay: 1.32s, 2.95s; }
.dome-shell > i:nth-child(6) { clip-path: inset(79% 0 0 0); transition-duration: 2.1s, .55s; transition-delay: 1.4s, 2.95s; }

.battlefield.turrets-deployed .dome-shell > i {
  transform: translateY(17px) scaleX(.9) scaleY(.08);
  opacity: 0;
}

.battlefield.turrets-deployed .dome-shell > i:nth-child(1) { transform: translateY(30px) scaleX(.48) scaleY(.06); }
.battlefield.turrets-deployed .dome-shell > i:nth-child(2) { transform: translateY(27px) scaleX(.56) scaleY(.065); }
.battlefield.turrets-deployed .dome-shell > i:nth-child(3) { transform: translateY(24px) scaleX(.64) scaleY(.07); }
.battlefield.turrets-deployed .dome-shell > i:nth-child(4) { transform: translateY(21px) scaleX(.72) scaleY(.075); }
.battlefield.turrets-deployed .dome-shell > i:nth-child(5) { transform: translateY(18px) scaleX(.81) scaleY(.08); }
.battlefield.turrets-deployed .dome-shell > i:nth-child(6) { transform: translateY(15px) scaleX(.9) scaleY(.085); }

/* Design B mothership: a wide, shallow battleship that enters after card one. */
.ship-wrap {
  top: calc(48px - min(17.8vw, 96px));
  left: 50%;
  width: 80%;
  height: min(17.8vw, 96px);
  transform: translateX(-50%);
  opacity: 1;
  filter: drop-shadow(0 5px 13px rgba(32, 126, 255, .72));
  animation: none;
  transition: transform 1.8s cubic-bezier(.16,.76,.25,1), opacity .9s ease;
}

.ship-wrap.waiting {
  transform: translate(-50%, -65px) scale(.96);
  opacity: 0;
}

.ship-wrap.deployed {
  transform: translateX(-50%);
  opacity: 1;
}

.mothership-body {
  position: absolute;
  inset: 0;
  background: url('assets/mothership-b.png') center / contain no-repeat;
  transform-origin: 50% 70%;
  animation: mothership-drift 6.5s ease-in-out infinite alternate;
}

.mothership-body .ship-cannon {
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.mothership-body .ship-cannon::after { display: none; }
.mothership-body .cannon-left { left: 31.7%; right: auto; }
.mothership-body .cannon-center { left: 50%; right: auto; transform: translateX(-50%); }
.mothership-body .cannon-right { left: auto; right: 31.7%; }

@keyframes mothership-drift {
  from { transform: translateX(-2.5%) rotate(-.35deg); }
  to { transform: translateX(2.5%) rotate(.35deg); }
}

/* Readable stealth-drone flight: stable core, banking wings, directional engines. */
.bomb.drone {
  width: 116px;
  height: 60px;
  transform: none;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .72)) drop-shadow(0 0 10px rgba(184, 229, 255, .7));
}

.bomb.drone::before {
  left: 39px;
  top: 9px;
  width: 38px;
  height: 37px;
  background: linear-gradient(145deg, #f7fbfd 0, #aebfc8 28%, #536a77 63%, #dce6ea 100%);
}

.bomb.drone .drone-wing {
  top: 15px;
  width: 61px;
  height: 29px;
  background: linear-gradient(160deg, #f8fbfc 0, #b9c9d0 30%, #617783 66%, #dbe5e9 100%);
  clip-path: polygon(100% 0, 72% 12%, 8% 43%, 0 62%, 57% 100%, 100% 69%);
  transition: transform .1s linear, filter .18s ease;
  transform-origin: 88% 52%;
}

.bomb.drone .drone-wing.left { transform: rotate(var(--wing-bank, 0deg)); }
.bomb.drone .drone-wing.right { transform: scaleX(-1) rotate(var(--wing-bank, 0deg)); }

.bomb.drone .drone-core {
  left: 34px;
  top: 3px;
  width: 48px;
  height: 46px;
  transform: none;
}

.bomb.drone .drone-thruster {
  left: 49px;
  top: 43px;
  width: 18px;
  height: 19px;
  transform: skewX(var(--trail-lean, 0deg));
  transform-origin: center top;
  transition: transform .1s linear;
}

.bomb.drone .drone-thruster::before,
.bomb.drone .drone-thruster::after {
  content: '';
  position: absolute;
  top: 1px;
  width: 5px;
  height: 17px;
  background: linear-gradient(#fff, #6cf1ff 30%, #4777ff 68%, transparent);
  filter: drop-shadow(0 0 4px #4da9ff);
}

.bomb.drone .drone-thruster::before { left: -15px; }
.bomb.drone .drone-thruster::after { right: -15px; }

.bomb.drone.aiming .drone-wing {
  filter: brightness(1.22) drop-shadow(0 0 5px #ff587e);
}

.bomb.drone.aiming .drone-core {
  border-color: #ff244f;
  box-shadow: inset 0 0 13px rgba(255, 45, 91, .6), 0 0 16px rgba(255, 38, 79, .9);
}

/* Alien Crescent Raider asset with a large live card display. */
.bomb.drone {
  width: 104px;
  height: 70px;
  background: url('assets/alien-crescent-raider-v1.png') center / contain no-repeat;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)) drop-shadow(0 0 7px rgba(69, 184, 255, .58));
  transition: transform .1s linear, filter .18s ease;
}

.bomb.drone::before,
.bomb.drone .drone-wing,
.bomb.drone .drone-eye,
.bomb.drone .drone-thruster {
  display: none;
}

.bomb.drone .drone-core {
  left: 50%;
  top: 20px;
  width: 29px;
  height: 35px;
  transform: translateX(-50%);
  border: 1px solid #89dfff;
  border-radius: 3px;
  clip-path: polygon(10% 0, 90% 0, 100% 8%, 100% 92%, 90% 100%, 10% 100%, 0 92%, 0 8%);
  background: linear-gradient(145deg, #ffffff, #dff7ff);
  box-shadow: inset 0 0 5px rgba(71, 185, 255, .42), 0 0 5px rgba(51, 209, 255, .7);
}

.bomb.drone .drone-core b {
  flex-direction: column;
  gap: 1px;
  color: #08121b;
  font-size: 19px;
  line-height: .66;
  letter-spacing: -.06em;
  text-shadow: none;
}

.bomb.drone .drone-core b span {
  font-size: 22px;
  line-height: .76;
}

.bomb.drone .drone-core b.red {
  color: #c50936;
  text-shadow: none;
}

.bomb.drone.aiming {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)) drop-shadow(0 0 11px rgba(255, 40, 76, .95));
}

/* The Elite's card stays readable while its outer iris accelerates around it. */
.bomb.drone.elite-raider {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .82));
  animation: none;
  transform-origin: 50% 50%;
}

.bomb.drone.elite-raider .elite-spinner {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("assets/elite-raider-rotor-v4.png") center / contain no-repeat;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

.bomb.drone.elite-raider .drone-core {
  z-index: 1;
  left: 22px;
  top: 14px;
  width: 34px;
  height: 50px;
  transform: none;
  clip-path: none;
  border: 2px solid #24201b;
  border-radius: 4px;
  background: linear-gradient(145deg, #fffdf5, #e8e0d2);
  box-shadow: 0 0 0 3px #111, inset 0 0 7px rgba(78, 50, 20, .22);
}

.bomb.drone.elite-raider .elite-bezel {
  position: absolute;
  z-index: 3;
  inset: 4px;
  background: url("assets/elite-raider-bezel-v1.png") center / contain no-repeat;
  pointer-events: none;
}

.bomb.drone.elite-raider .drone-core b {
  font-size: 20px;
  line-height: .72;
}

.bomb.drone.elite-raider .drone-core b span {
  font-size: 24px;
}

.bomb.drone.elite-raider.charging {
  animation: elite-charge-shell 1.5s cubic-bezier(.32, 0, .78, 1) forwards;
}

.bomb.drone.elite-raider.charging .elite-spinner {
  animation: elite-charge-iris 1.5s cubic-bezier(.32, 0, .78, 1) forwards;
}

@keyframes elite-charge-shell {
  0% { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .82)); }
  55% { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .82)) drop-shadow(0 0 7px rgba(255, 93, 16, .55)); }
  82% { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .82)) drop-shadow(0 0 14px rgba(255, 71, 10, .88)) drop-shadow(0 0 24px rgba(255, 183, 34, .68)); }
  100% { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .82)) drop-shadow(0 0 20px #ff3c08) drop-shadow(0 0 35px rgba(255, 193, 41, .98)) brightness(1.22); }
}

@keyframes elite-charge-iris {
  0%, 42% { filter: brightness(1) saturate(1); }
  78% { filter: brightness(1.22) saturate(1.3); }
  100% { filter: brightness(1.55) saturate(1.65); }
}

.elite-warning {
  position: absolute;
  z-index: 21;
  width: min(310px, 84vw);
  transform: translate(-50%, -50%);
  padding: 7px 10px;
  border: 1px solid #ff6a26;
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, rgba(65, 7, 2, .94) 14%, rgba(65, 7, 2, .94) 86%, transparent);
  color: #fff0bf;
  font: 900 clamp(13px, 4.5vw, 20px) ui-monospace;
  letter-spacing: .1em;
  text-align: center;
  text-shadow: 0 0 5px #fff, 0 0 13px #ff3517;
  pointer-events: none;
  animation: elite-warning-triple 1.8s steps(1) forwards;
}

@keyframes elite-warning-triple {
  0%, 26%, 55% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  15%, 42%, 72% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  88%, 100% { opacity: 0; }
}

.app-shell.elite-alarm::after {
  content: '';
  position: absolute;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, transparent 28%, rgba(255, 57, 12, .18) 67%, rgba(135, 8, 0, .66) 100%);
  box-shadow: inset 0 0 60px rgba(255, 38, 7, .88);
  animation: elite-perimeter-triple 1.8s steps(1) forwards;
}

@keyframes elite-perimeter-triple {
  0%, 26%, 55% { opacity: 1; }
  15%, 42%, 72%, 100% { opacity: 0; }
}

/* Permanent armored floor and turret wells. The cards remain above this layer. */
.defense-turrets {
  z-index: 4;
}

.defense-turrets::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -43px;
  right: -43px;
  bottom: -2px;
  height: 19px;
  border: 2px solid #a8bdc7;
  border-radius: 5px 5px 9px 9px;
  background: linear-gradient(180deg, #d3dfe4 0 12%, #708895 19%, #354e5a 56%, #142731 100%);
  box-shadow: inset 0 3px #edf5f7, inset 0 -5px #0b1b23, 0 0 10px rgba(49, 231, 255, .35);
  clip-path: polygon(0 18%, 7% 0, 93% 0, 100% 18%, 97% 100%, 3% 100%);
}

.defense-turrets::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -33px;
  right: -33px;
  bottom: 7px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #46efff 0 4px, transparent 4px 22px);
  filter: drop-shadow(0 0 4px #31e7ff);
  opacity: .75;
}

.defense-turret::before {
  left: 1px;
  right: auto;
  bottom: 0;
  width: 47px;
  height: 17px;
  border: 2px solid #9fb5c0;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #bccbd2, #4f6874 48%, #162932);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.defense-turret.left::before,
.defense-turret.right::before {
  left: 1px;
  right: auto;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.defense-turret::after {
  left: 4px;
  right: auto;
  bottom: 11px;
  width: 41px;
  height: 29px;
  border: 2px solid #7894a1;
  border-radius: 12px 12px 5px 5px;
  background: radial-gradient(ellipse at 50% 100%, #07151d 0 45%, #314b58 48% 62%, #8aa1ac 66% 71%, #1b303a 74%);
  box-shadow: inset 0 0 7px #08151c, 0 0 7px rgba(49, 231, 255, .28);
  clip-path: none;
}

.defense-turret.left::after,
.defense-turret.right::after {
  left: 4px;
  right: auto;
  clip-path: none;
}

.defense-turret.left { left: -42px; }
.defense-turret.right { right: -42px; }

@media (max-width: 360px) {
  .defense-turrets::before { left: -28px; right: -28px; }
  .defense-turrets::after { left: -22px; right: -22px; }
  .defense-turret.left { left: -28px; }
  .defense-turret.right { right: -28px; }
}

/* Moving turret hardware never enters the fortress card rectangle. */
.battlefield.bays-built .defense-turret {
  animation: none;
}

.defense-turret.left { left: -55px; }
.defense-turret.right { right: -55px; }

/* Intercept beams stay above the fortress even though its floor stays behind it. */
.laser-layer { z-index: 9; }
.ground-laser { z-index: 16; }
.ground-muzzle { z-index: 15; }

@media (max-width: 480px) {
  .defense-turret.left {
    left: -55px;
    transform-origin: right bottom;
  }

  .defense-turret.right {
    right: -55px;
    transform-origin: left bottom;
  }

  .battlefield.bays-built .defense-turret {
    transform: translateY(0) scale(.8);
  }
}

/* Final specificity pass for the pinball tally over the legacy turret score skin. */
.point-penalty.pinball-score-token b .pinball-line,
.point-penalty.pinball-score-token b .pinball-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  color: #baffcf;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  text-shadow: none;
}

.point-penalty.pinball-score-token b .bonus-line {
  max-height: 0;
  margin-top: 0;
  padding-block: 0;
  transform: translateY(-8px);
  opacity: 0;
}

.point-penalty.pinball-score-token.show-bonus b .bonus-line {
  max-height: 48px;
  margin-top: 8px;
  padding-block: 7px;
  transform: translateY(0);
  opacity: 1;
}

.point-penalty.raider-score-token.show-perfect b .perfect-line,
.point-penalty.raider-score-token.show-time b .time-bonus-line {
  max-height: 48px;
  margin-top: 8px;
  padding-block: 7px;
  transform: translateY(0);
  opacity: 1;
}

.point-penalty.pinball-score-token b .pinball-total {
  margin-top: 0;
  transform: translateY(-12px) rotateX(68deg);
  opacity: 0;
  transform-origin: center top;
}

.point-penalty.pinball-score-token.tallying b .pinball-total {
  animation: pinball-total-roll .48s cubic-bezier(.18, .82, .2, 1) forwards;
}

/* Phase 2 uses the same recessed ship-display language as the build readout. */
.phase-two-controls .recall-heading {
  min-height: 42px;
  margin-bottom: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid #9baab1;
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, rgba(126, 244, 255, .055) 0 1px, transparent 1px 3px), linear-gradient(180deg, #061219, #102832 52%, #07151c);
  box-shadow: inset 0 0 12px #000, inset 0 0 10px rgba(49, 231, 255, .14), 0 0 0 3px #293b44, 0 0 0 4px #778890, 0 4px 10px rgba(0, 0, 0, .5);
}

.phase-two-controls .phase-two-title {
  color: #efffff;
  font-size: 13px;
  letter-spacing: .045em;
  text-shadow: none;
}

.phase-two-controls .recall-heading > strong {
  display: grid;
  min-width: 76px;
  padding: 3px 7px;
  border: 0;
  border-left: 1px solid #48616c;
  border-radius: 0;
  background: none;
  color: #efffff;
  text-align: center;
}

.phase-two-controls .recall-heading > strong span {
  color: #a8f9ff;
  font: 900 6px ui-monospace;
  letter-spacing: .08em;
}

.phase-two-controls #recallStatus {
  color: #efffff;
  font: 900 17px ui-monospace;
  line-height: 1;
}

/* The card identity sits above every damage and flame layer. */
.protected-card-index {
  position: absolute;
  z-index: 32;
  left: 6px;
  top: 5px;
  min-width: 17px;
  padding: 2px 3px 3px;
  border-radius: 2px 2px 4px 2px;
  background: #f4f2e9;
  box-shadow: 1px 1px 2px rgba(46, 27, 15, .2);
  color: #071323;
  font: 900 12px/.78 ui-monospace, monospace;
  text-align: left;
  text-shadow: none;
  filter: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.protected-card-index.red {
  color: #b51048;
}

.fortress-card.damaged .protected-card-index,
.fortress-card.critical .protected-card-index {
  background: #f4f2e9;
  box-shadow: 1px 1px 2px rgba(46, 27, 15, .2);
  filter: none;
}

/* Every built card uses one neutral stock color in every damage state. */
.fortress-card.built {
  background: linear-gradient(145deg, #ffffff 0, #f5f7f8 62%, #e8edf0 100%);
  border-color: #ffffff;
}

.fortress-card.built .card-face,
.fortress-card.damaged .card-face,
.fortress-card.critical .card-face {
  background: linear-gradient(145deg, #ffffff 0, #f5f7f8 62%, #e8edf0 100%);
}

.fortress-card.damaged .damage-surface {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 31%, 35% 31%);
}

.fortress-card.damage-4 .card-face,
.fortress-card.damage-variant-2.damage-3 .card-face,
.fortress-card.damage-variant-2.damage-4 .card-face,
.fortress-card.damage-variant-4.damage-3 .card-face,
.fortress-card.damage-variant-4.damage-4 .card-face {
  clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 75%, 84% 100%, 0 100%);
}

.damage-variant-2 .card-flames,
.damage-variant-4 .card-flames {
  left: auto;
  right: -2px;
  top: 8px;
}

@media (max-width: 430px) {
  :root {
    --card-w: 52px;
    --card-h: 62px;
  }
}

@media (max-width: 360px) {
  :root {
    --card-w: 42px;
    --card-h: 52px;
  }

  .defense-turret.left {
    left: -58px;
    transform-origin: right bottom;
  }

  .defense-turret.right {
    right: -58px;
    transform-origin: left bottom;
  }

  .battlefield.bays-built .defense-turret {
    transform: translateY(0) scale(.68);
  }
}

/* The fortress sits on a deep armored spacecraft deck, not a floating rail. */
.defense-turrets::before {
  left: 50%;
  right: auto;
  bottom: -34px;
  width: min(100vw, 540px);
  height: 70px;
  transform: translateX(-50%);
  border: 2px solid #9eafb7;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  clip-path: polygon(0 14%, 4% 0, 96% 0, 100% 14%, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(140, 164, 174, .55) 8.4% 9%, transparent 9.4% 90.6%, rgba(140, 164, 174, .55) 91% 91.6%, transparent 92%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(1, 10, 16, .55) 49px 51px, rgba(191, 207, 213, .18) 52px 53px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #aab8be 0 5%, #657983 8% 19%, #354a54 21% 53%, #1c3039 56% 100%);
  box-shadow:
    inset 0 4px rgba(237, 246, 248, .78),
    inset 0 10px 15px rgba(4, 15, 21, .36),
    inset 0 -18px 26px rgba(2, 10, 15, .48),
    0 -3px 13px rgba(49, 231, 255, .25);
}

/* Illuminated armor ridge running beneath the cards and turret wells. */
.defense-turrets::after {
  left: 50%;
  right: auto;
  bottom: 21px;
  width: min(92vw, 500px);
  height: 7px;
  transform: translateX(-50%);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, #8ef7ff 0 6px, #183b46 6px 27px),
    #17333d;
  box-shadow: 0 0 5px #31e7ff, 0 3px 0 #0b1d25, 0 -2px 0 #a4b9c1;
  filter: none;
  opacity: .82;
}

/* Recessed fortress command display. */
.battle-message {
  z-index: 18;
  bottom: 3px;
  min-width: min(250px, 72vw);
  min-height: 26px;
  padding: 6px 16px 5px;
  border: 1px solid #78919b;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, rgba(130, 247, 255, .045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #08151b, #102832 55%, #071218);
  box-shadow:
    inset 0 0 11px rgba(0, 0, 0, .95),
    inset 0 0 8px rgba(49, 231, 255, .16),
    0 0 0 3px #263c46,
    0 0 0 4px #778b94,
    0 0 12px rgba(49, 231, 255, .3);
  color: #aafaff;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: .18em;
  text-align: center;
  text-shadow: 0 0 4px currentColor, 0 0 10px currentColor;
}

@media (max-width: 360px) {
  .defense-turrets::before {
    left: 50%;
    right: auto;
    width: 100vw;
  }

  .defense-turrets::after {
    left: 50%;
    right: auto;
    width: 94vw;
  }

  .battle-message {
    min-width: 68vw;
    padding-inline: 10px;
    font-size: 8px;
  }
}

/* Illustrated player-ship deck shared with the drone, mothership, and turret art style. */
.defense-turrets::before {
  left: 50%;
  right: auto;
  bottom: -53px;
  width: min(112vw, 560px);
  height: 112px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: url('assets/fortress-deck-weathered-v3.png') center bottom / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 -2px 7px rgba(49, 231, 255, .2)) drop-shadow(0 8px 8px rgba(0, 0, 0, .7));
}

.defense-turrets::after,
.battle-message {
  display: none;
}

/* Digital fortress readout in the lower command deck. */
.objective {
  position: relative;
  overflow: hidden;
  grid-template-columns: 1fr 52px;
  gap: 8px;
  border: 1px solid #9baab1;
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, rgba(126, 244, 255, .055) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #061219, #102832 52%, #07151c);
  box-shadow: inset 0 0 12px #000, inset 0 0 10px rgba(49, 231, 255, .14), 0 0 0 3px #293b44, 0 0 0 4px #778890, 0 4px 10px rgba(0, 0, 0, .5);
}

.objective-icon {
  display: none;
}

.objective > div:nth-child(2) {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  color: #a8f9ff;
  font-family: ui-monospace, monospace;
  text-align: center;
  text-shadow: 0 0 4px currentColor, 0 0 10px rgba(49, 231, 255, .6);
}

.objective > div:nth-child(2) span {
  color: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .035em;
}

.objective strong {
  display: inline;
  color: #efffff;
  font-size: 14px;
  line-height: 1;
  text-shadow: none;
  filter: none;
}

.target-card {
  z-index: 1;
  border-left-color: #48616c;
  padding-left: 10px;
  color: #efffff;
  font-size: 22px;
  letter-spacing: .14em;
  text-shadow: none;
  filter: none;
}

@media (max-width: 360px) {
  .defense-turrets::before {
    width: 118vw;
    height: 104px;
  }

  .objective > div:nth-child(2) {
    gap: 4px;
  }

  .objective > div:nth-child(2) span {
    font-size: 11px;
    letter-spacing: 0;
  }

  .objective strong {
    font-size: 11px;
  }

  .target-card {
    padding-left: 7px;
    font-size: 20px;
    letter-spacing: .1em;
  }
}

/* Mobile menu and scoring readability */
@media (display-mode:standalone),(display-mode:fullscreen){html,body,.app-shell{background-color:#050a14}#buildControls,#phaseTwoControls{padding-bottom:calc(7px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#0b1929 0,#06101c 72%,#050a14 100%)}}
.fortress-row.completed.settled{animation:none}
.custom-position-display span,.custom-control-label{font-size:10px}.custom-position-display b{font-size:13px}.custom-progress{font-size:11px}.custom-name-panel label{font-size:11px}.custom-builder-actions button,.custom-review-back{font-size:10px}.custom-review-heading small{font-size:11px}.custom-review-sectors header{font-size:9px}
.stack-chooser{padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}.stack-chooser-card{width:min(100%,500px)}.chooser-orbit{width:72px;height:72px;margin-bottom:12px}.stack-chooser h2{margin:5px 0 7px;font-size:clamp(28px,8.5vw,38px)}.stack-chooser-card>p:not(.eyebrow){max-width:390px;margin-bottom:13px;font-size:14px;line-height:1.35}.stack-options{gap:7px}.stack-options button{min-height:68px;padding-block:10px}.stack-options strong{font-size:17px}.stack-options small{margin-top:3px;font-size:12px;line-height:1.25}.stack-options span{font-size:10px}.stack-options .custom-stack-option .custom-stack-edit{min-height:68px;font-size:10px;line-height:1.25}.tutorial-toggle{margin-top:9px;padding:9px 12px}.tutorial-toggle span strong{font-size:13px}.tutorial-toggle span small{font-size:11px}.modal{padding:12px}.modal-card{width:min(100%,450px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px 16px}.modal-card h2{margin:6px 0;font-size:29px}.modal-card p:not(.eyebrow){margin:6px 0 10px;font-size:15px;line-height:1.35}.leaderboard{margin:10px 0 3px}.run-score{padding:11px}.run-score span,.run-score small{font-size:10px}.run-score strong{font-size:42px}.run-score #runTimes{margin:5px 0 2px;font-size:12px}.performance-insights{gap:6px;margin-top:7px}.performance-insights b{padding:6px 8px;font-size:10px;letter-spacing:.05em}.leaderboard>p{margin:9px 0 5px!important;font-size:10px!important}.leaderboard li{padding:8px 9px}.leaderboard li b{font-size:13px}.leaderboard li strong{font-size:17px}.leaderboard li span{font-size:10px;line-height:1.35}.primary-button{height:52px;font-size:13px}.replay-option{margin-top:8px}.replay-option button{min-height:46px;font-size:12px}.replay-option small{margin-top:4px;font-size:10px}.pinball-score-token b{width:min(380px,94vw);padding:13px 14px 14px;font-size:clamp(20px,6vw,27px)}.pinball-score-token .pinball-line small,.pinball-score-token .pinball-total small{font-size:11px;letter-spacing:.08em}.pinball-score-token .pinball-line strong,.pinball-score-token .pinball-total strong{font-size:clamp(24px,8vw,34px)}
@media(max-height:720px){.chooser-orbit{width:58px;height:58px;margin-bottom:7px}.stack-chooser h2{font-size:25px}.stack-chooser-card>p:not(.eyebrow){margin-bottom:8px;font-size:12px}.stack-options{gap:5px}.stack-options button,.stack-options .custom-stack-option .custom-stack-edit{min-height:58px}.stack-options strong{font-size:15px}.stack-options small{font-size:10px}.modal-card{padding:14px 13px}.modal-card h2{font-size:25px}.modal-card p:not(.eyebrow){font-size:13px}.run-score strong{font-size:36px}.performance-insights b{padding:4px 6px;font-size:9px}.leaderboard li{padding:6px 8px}.primary-button{height:46px}.replay-option button{min-height:41px}}