/* Full-height mobile layout and interactive playfield */
body { overflow: hidden; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  padding-top: max(5px, env(safe-area-inset-top));
  padding-bottom: max(5px, env(safe-area-inset-bottom));
}

header { padding: 0 3px 5px; }
.logo small { display: none; }
.pause-button {
  min-width: 76px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #58d5ed;
  border-radius: 18px;
  background: #102647;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.pause-button:disabled { opacity: .35; cursor: default; }

.play-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  min-width: 0;
  min-height: 0;
}

.side-status {
  position: absolute;
  z-index: 4;
  top: 6px;
  bottom: 6px;
  display: flex;
  width: 24px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

.ammo-status { left: 3px; }
.life-status { right: 3px; }

.meter-number {
  margin: 0 0 4px;
  color: #ffe078;
  font: 800 14px/1 "DM Mono",monospace;
  text-shadow: 0 0 7px #000,0 0 8px #ffe07899;
}

.ammo-track,
.life-track {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 100%;
  max-height: 100%;
  min-height: 0;
}

.ammo-track {
  flex: 0 1 auto;
  max-height: calc(100% - 18px);
  gap: 1px;
}
.ammo-line {
  flex: 0 1 5px;
  width: 18px;
  height: 5px;
  min-height: 2px;
  max-height: 5px;
  border-radius: 3px 1px 1px 3px;
  transform: skewX(-10deg);
}
.ammo-line.full {
  border: 1px solid #fff0a6;
  background: linear-gradient(90deg,#fff4ae,#ffe078 70%,#d99a2b);
  box-shadow: 0 0 6px #ffe078bb;
}
.ammo-line.empty { border: 1px solid #465976; background: transparent; }

.life-track {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: clamp(0px,.32dvh,3px);
}
.life-heart {
  color: var(--pink);
  font: 900 clamp(9px,1.75dvh,15px)/1 sans-serif;
  font-style: normal;
  text-shadow: 0 0 6px #ff609f99;
}
.life-heart.empty { color: #4c5e79; text-shadow: none; }
.game {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) 31px;
  border-top: 1px solid var(--line);
  border-radius: 12px;
}

.feedback { min-height: 0; padding: 4px 8px 7px; }

.sky {
  height: auto;
  min-height: 230px;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}

.combat-layer {
  --ship-x: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 360px;
  overflow: hidden;
  transform-origin: top left;
  contain: layout paint style;
}

body[data-world="starport"] .sky {
  background-color: #07152f;
  background-image:
    radial-gradient(circle at 78% 18%,#89d7ff 0 8%,#2f6093 9%,transparent 23%),
    radial-gradient(#fff 1px,transparent 1px),
    radial-gradient(#60e6fc 1px,transparent 1px),
    linear-gradient(180deg,#08142f,#102a51);
  background-size: auto,47px 47px,69px 69px,auto;
}

body[data-world="crystal"] .sky {
  background-color: #101b3e;
  background-image:
    radial-gradient(ellipse at 25% 32%,#36e4d64d,transparent 31%),
    radial-gradient(ellipse at 78% 20%,#b35dff55,transparent 35%),
    radial-gradient(#d9ffff 1px,transparent 1px),
    linear-gradient(155deg,#091931,#25204f 55%,#0c3441);
  background-size: auto,auto,53px 53px,auto;
}

body[data-world="rust"] .sky {
  background-color: #2b170d;
  background-image:
    radial-gradient(circle at 76% 20%,#ffcf6c 0 7%,#b24c27 8%,transparent 23%),
    radial-gradient(#ffd096aa 1px,transparent 1px),
    linear-gradient(180deg,#38161a,#6b2c1d 58%,#27120d);
  background-size: auto,61px 61px,auto;
}

body[data-world="ice"] .sky {
  background-color: #071d3b;
  background-image:
    linear-gradient(120deg,transparent 8%,#73ffd633 24%,transparent 39%,#ad79ff2b 54%,transparent 72%),
    radial-gradient(#e9fdff 1px,transparent 1px),
    linear-gradient(180deg,#06132d,#0b4770 62%,#102744);
  background-size: auto,43px 43px,auto;
}

body[data-world="void"] .sky {
  background-color: #070713;
  background-image:
    repeating-radial-gradient(ellipse at 72% 28%,transparent 0 12px,#ca46ff18 14px,#62e9ff12 16px,transparent 20px),
    radial-gradient(ellipse at 72% 28%,#ff55e166,transparent 7%,#55208055 19%,transparent 38%),
    radial-gradient(#f0d7ff 1px,transparent 1px),
    linear-gradient(145deg,#02040d,#180b2c 65%,#05040c);
  background-size: auto,auto,73px 73px,auto;
}

.sky::before {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 31%;
  content: "";
  opacity: .75;
  pointer-events: none;
}

body[data-world="starport"] .sky::before {
  border-top: 2px solid #62e9ff77;
  background:
    repeating-linear-gradient(90deg,transparent 0 24px,#62e9ff44 25px 27px,transparent 28px 51px),
    linear-gradient(180deg,#17365b88,#07101fdd);
  box-shadow: 0 -8px 25px #62e9ff22;
}

body[data-world="crystal"] .sky::before {
  background: repeating-conic-gradient(from 25deg at 50% 100%,#62e9ff44 0 8deg,#a865ff55 9deg 16deg,transparent 17deg 27deg);
  clip-path: polygon(0 100%,0 58%,9% 15%,17% 68%,28% 28%,39% 76%,51% 10%,63% 70%,75% 35%,84% 72%,94% 18%,100% 64%,100% 100%);
}

body[data-world="rust"] .sky::before {
  border-top: 2px solid #ff9c4d55;
  background:
    repeating-linear-gradient(105deg,#171015 0 14px,#39211b 15px 26px,transparent 27px 43px),
    linear-gradient(180deg,transparent,#160c0ae8);
  clip-path: polygon(0 100%,0 45%,10% 54%,14% 21%,21% 20%,24% 65%,37% 55%,43% 30%,49% 31%,54% 71%,67% 49%,72% 12%,77% 13%,81% 63%,92% 42%,100% 48%,100% 100%);
}

body[data-world="ice"] .sky::before {
  background: linear-gradient(135deg,#9cf4ff88,#1b6c9c55 35%,#dffcff88 36% 53%,#396bb155 54% 72%,#b8f8ff66 73%);
  clip-path: polygon(0 100%,0 48%,8% 64%,15% 21%,24% 58%,34% 31%,43% 72%,54% 18%,65% 65%,76% 29%,84% 69%,93% 39%,100% 55%,100% 100%);
}

body[data-world="void"] .sky::before {
  background: repeating-linear-gradient(168deg,transparent 0 25px,#c64dff33 27px 29px,transparent 31px 52px);
  clip-path: polygon(0 100%,0 72%,18% 64%,31% 78%,47% 57%,61% 77%,78% 54%,100% 69%,100% 100%);
  box-shadow: inset 0 -35px 45px #020207;
}

.fleet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .22s ease,filter .22s ease;
}

.shield-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  transition: opacity .22s ease,filter .22s ease;
}

.defense-line,
.projectile,
.ship { transition: opacity .22s ease; }

.sky.supply-mode {
  cursor: default;
  box-shadow: inset 0 0 90px #050713;
}

.sky.supply-mode .fleet,
.sky.supply-mode .shield-layer {
  opacity: .1;
  filter: blur(2px) grayscale(.6);
}

.sky.supply-mode .defense-line,
.sky.supply-mode .projectile { opacity: .12; }
.sky.supply-mode .ship { opacity: .55; }

.word-ships {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 36px;
  left: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  pointer-events: none;
}

.word-ships.arming .word-ship {
  opacity: .42;
  filter: saturate(.35) brightness(.75);
  pointer-events: none;
}

.word-ships:not(.arming) .word-ship {
  transition: opacity .18s ease,filter .18s ease,box-shadow .18s ease;
}

.supply-repeat {
  position: absolute;
  z-index: 7;
  top: 318px;
  left: 50%;
  min-width: 180px;
  min-height: 48px;
  padding: 10px 18px;
  border: 3px solid #b9f5ff;
  border-radius: 25px;
  background: linear-gradient(180deg,#226282,#123b61);
  color: white;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 0 20px #62e9ff99,inset 0 -4px 0 #0a2645;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.9);
  transition: opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events: none;
}

.sky.supply-mode .supply-repeat {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
  animation: repeat-glow 1.7s ease-in-out infinite;
}

.supply-repeat:active { transform: translateX(-50%) scale(.95); }
.supply-repeat.speech-error { border-color: var(--pink); background: #612540; animation: none !important; }

.supply-next {
  position: absolute;
  z-index: 8;
  top: 318px;
  left: 50%;
  min-width: 210px;
  min-height: 56px;
  padding: 11px 22px;
  border: 3px solid #efffcf;
  border-radius: 29px;
  background: linear-gradient(180deg,#dfff9d,#94ce4d);
  color: #11220c;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow: 0 0 25px #caff75aa,inset 0 -5px 0 #56842a;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.88);
  transition: opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events: none;
}

.supply-next span { margin-left: 8px; font-size: 23px; }
.sky.supply-correction .supply-repeat { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
.sky.supply-correction .supply-next {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
  animation: next-glow 1.5s ease-in-out infinite;
}
.supply-next:active { transform: translateX(-50%) scale(.95); }
.supply-next:focus-visible { outline: 4px solid white; outline-offset: 3px; }

.pause-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #030614d9;
  backdrop-filter: blur(6px);
}

.pause-screen.hide { display: none; }

.pause-screen > div {
  width: min(320px,100%);
  padding: 30px 22px;
  border: 2px solid var(--cyan);
  border-radius: 18px;
  background: #101d3c;
  text-align: center;
  box-shadow: 0 0 35px #62e9ff55;
}

.pause-screen b { color: var(--cyan); font-size: 25px; }
.pause-screen p { margin: 12px 0 20px; color: var(--ink); }
.pause-screen button {
  min-width: 180px;
  min-height: 52px;
  border: 0;
  border-radius: 27px;
  background: var(--lime);
  color: #12210d;
  font-size: 16px;
  font-weight: 700;
}

.pause-screen .menu-button {
  margin-top: 10px;
  border: 1px solid #6680a5;
  background: #172950;
  color: white;
}

#panel { padding: 10px; }
#panel > div {
  max-height: calc(100dvh - 20px);
  padding: 19px 16px 15px;
  overflow: hidden;
}
#panel .eyebrow { margin: 0 0 4px; }
#panel h1 { margin: 5px 0; font-size: clamp(24px,8vw,34px); }
#panel #panelText { margin: 6px 0; font-size: 12px; }
#panel .start { margin: 10px 0 7px; }

.game-credit {
  display: block;
  margin-top: 8px;
  color: #7589a4;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: .02em;
}

.adult-open {
  display: inline-block;
  margin: 0 3px 7px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #6680a5;
  border-radius: 7px;
  background: #172950;
  color: #d5e4f5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.adult-panel { z-index: 8; padding: 12px; }
.adult-panel > div {
  width: min(460px,100%);
  max-height: calc(100dvh - 24px);
  padding: 22px 17px 17px;
  overflow-y: auto;
}
.adult-panel h2 { margin: 5px 0 8px; font-size: clamp(21px,6vw,28px); }
.adult-panel p:not(.eyebrow) { margin: 8px 0; font-size: 13px; }
.adult-section {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #344d72;
  border-radius: 12px;
  background: #0a1730;
  text-align: left;
}
.adult-section h3 { margin: 0 0 9px; color: var(--cyan); font: 700 10px "DM Mono",monospace; letter-spacing: .1em; }
.profile-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-choice {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #526788;
  border-radius: 22px;
  background: #132647;
  color: white;
  font-weight: 700;
}
.profile-choice.selected { border-color: var(--lime); background: #284632; color: var(--lime); }
.profile-add { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 9px; }
.profile-add input,
.profile-add button,
.adult-setting select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #526788;
  border-radius: 8px;
  background: #101f3c;
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.profile-add input { padding: 8px; }
.profile-add button { padding: 7px 10px; }
.adult-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.adult-summary > span { display: grid; gap: 3px; padding: 8px; border-radius: 8px; background: #132647; }
.adult-summary small { font-size: 8px; }
.adult-summary strong { color: var(--lime); font: 700 18px "DM Mono",monospace; }
.adult-review { grid-column: 1 / -1; margin: 3px 0 0 !important; color: #ffe078 !important; font: 700 10px/1.5 "DM Mono",monospace !important; }
.adult-setting { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; margin: 9px 0; color: #d4e1f1; font-size: 12px; }
.adult-setting input { grid-column: 1 / -1; width: 100%; accent-color: var(--cyan); }
.adult-setting output { color: var(--cyan); font: 700 11px "DM Mono",monospace; }
.adult-setting select { padding: 6px; }
.adult-check { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #d4e1f1; font-size: 11px; font-weight: 700; }
.adult-check input { width: 20px; height: 20px; accent-color: var(--lime); }
.adult-letters {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 7px;
  margin: 15px 0;
}
.adult-letter {
  min-height: 43px;
  border: 1px solid #526788;
  border-radius: 8px;
  background: #0d1833;
  color: #c4d5e9;
  font-size: 18px;
  font-weight: 700;
}
.adult-letter.selected {
  border-color: var(--lime);
  background: #284632;
  color: var(--lime);
  box-shadow: 0 0 8px #caff7555;
}
.adult-recommendation {
  min-height: 36px;
  color: var(--cyan) !important;
  font: 700 11px "DM Mono",monospace !important;
}
.adult-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.adult-actions button {
  min-height: 45px;
  border: 1px solid #6680a5;
  border-radius: 8px;
  background: #172950;
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.adult-actions #adultSave { border: 0; background: var(--lime); color: #12210d; }

.reset-progress {
  display: block;
  min-height: 44px;
  margin: 18px auto 0;
  padding: 9px 12px;
  border: 1px solid #8a5368;
  border-radius: 7px;
  background: transparent;
  color: #e3b7c7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.reset-progress:active { color: white; border-color: var(--cyan); }

.menu-stars {
  margin: 5px 0 !important;
  color: #ffe078 !important;
  font: 700 11px "DM Mono",monospace !important;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 5px;
  max-height: min(48dvh,390px);
  padding: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.level-choice {
  min-width: 0;
  min-height: 48px;
  padding: 4px 1px;
  border: 1px solid #40577e;
  border-radius: 7px;
  background: #101c39;
  color: white;
}

.level-choice strong,
.level-choice span { display: block; }
.level-choice strong { font: 700 14px "DM Mono",monospace; }
.level-choice span { margin-top: 3px; color: #687790; font-size: 9px; letter-spacing: -.05em; }
.level-choice.played span { color: #ffe078; }
.level-choice.selected { border-color: var(--cyan); background: #17385a; box-shadow: 0 0 10px #62e9ff77; }
.level-choice:disabled { opacity: .35; cursor: default; }
.level-choice[data-world="starport"] { --level-accent: #62e9ff; }
.level-choice[data-world="crystal"] { --level-accent: #b985ff; }
.level-choice[data-world="rust"] { --level-accent: #ff9b52; }
.level-choice[data-world="ice"] { --level-accent: #b9f5ff; }
.level-choice[data-world="void"] { --level-accent: #ff60d7; }
.level-choice[data-world] strong { color: var(--level-accent); }
.level-choice[data-level="1"],
.level-choice[data-level="9"],
.level-choice[data-level="17"],
.level-choice[data-level="25"],
.level-choice[data-level="33"] { border-left: 3px solid var(--level-accent); }
.level-choice.selected { border-color: var(--level-accent,var(--cyan)); box-shadow: 0 0 11px color-mix(in srgb,var(--level-accent,var(--cyan)) 55%,transparent); }

body.paused .sky .invader,
body.paused .sky .invader-shield,
body.paused .sky .projectile,
body.paused .sky .word-ship,
body.paused .sky .supply-shot,
body.paused .sky .ammo-transfer,
body.paused .sky .hit-splash { animation-play-state: paused; }

.word-ship {
  --supply-accent: #ffd266;
  --supply-glow: #ffd26699;
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 9px 12px 11px;
  overflow: visible;
  border: 2px solid var(--supply-accent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10px 13px,#fff4bd 0 1px,transparent 2px),
    radial-gradient(circle at calc(100% - 10px) 13px,#fff4bd 0 1px,transparent 2px),
    linear-gradient(90deg,#1e2535 0 8%,#745829 9% 19%,#3d342d 20% 80%,#745829 81% 91%,#1e2535 92%),
    linear-gradient(180deg,#806432,#2a2630);
  color: white;
  text-transform: uppercase;
  box-shadow: 0 0 18px var(--supply-glow),inset 0 -6px 0 #15131b,inset 0 1px 0 #fff3b94f;
  pointer-events: auto;
  animation: word-ship-arrive .28s ease-out both;
}

.word-ship::before {
  position: absolute;
  z-index: 0;
  top: -10px;
  left: 50%;
  width: 38px;
  height: 19px;
  border: 2px solid var(--supply-accent);
  border-bottom: 0;
  border-radius: 19px 19px 4px 4px;
  background: linear-gradient(180deg,#34445a,#172034);
  box-shadow: 0 -3px 10px var(--supply-glow);
  content: "";
  transform: translateX(-50%);
}

.word-ship::after {
  position: absolute;
  z-index: 0;
  right: 7px;
  bottom: 5px;
  left: 7px;
  height: 8px;
  border: 1px solid #f8df9a66;
  border-radius: 2px 2px 8px 8px;
  background: repeating-linear-gradient(90deg,#151a25 0 7px,#473a29 7px 10px);
  content: "";
}

.word-ship::before,
.word-ship::after,
.supply-wing,
.supply-badge,
.supply-hull-detail { display: none; }

.word-ship:nth-child(2) { animation-delay: .06s; }
.word-ship:nth-child(3) { animation-delay: .12s; }

.supply-wing {
  position: absolute;
  z-index: 0;
  top: 50%;
  width: 16px;
  height: 38px;
  border: 2px solid var(--supply-accent);
  background: linear-gradient(180deg,#6b542d 0 35%,#2a2530 36% 68%,#171a25 69%);
  clip-path: polygon(0 30%,100% 0,100% 100%,0 70%);
  transform: translateY(-42%);
}

.supply-wing.left { left: -8px; }
.supply-wing.right { right: -8px; transform: translateY(-42%) scaleX(-1); }

.supply-badge {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: 50%;
  width: 24px;
  height: 20px;
  border: 1px solid #ffe9a8;
  border-radius: 12px 12px 5px 5px;
  background: radial-gradient(circle at 50% 35%,#263d55,#10182a 72%);
  color: var(--lime);
  font: 700 13px/19px "DM Mono",monospace;
  box-shadow: inset 0 0 5px #62e9ff66;
  transform: translateX(-50%);
}

.supply-hull-detail {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 5px;
  bottom: 9px;
  left: 5px;
  border: 1px solid #f5d98b55;
  border-radius: 9px;
  background: linear-gradient(90deg,transparent 49%,#f5d98b33 50%,transparent 51%);
  pointer-events: none;
}

.supply-word {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 56px;
  place-items: center;
  padding: 4px 10px;
  overflow: hidden;
  border: 2px solid #f8df9a;
  border-radius: 7px;
  background: linear-gradient(180deg,#101d37,#080f21);
  color: white;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-overflow: clip;
  box-shadow: inset 0 0 8px #62e9ff22,0 2px 0 #17131b;
}

.supply-word::before,
.supply-word::after {
  position: absolute;
  top: 50%;
  color: #ffe9a8;
  font-size: 6px;
  content: "•";
  transform: translateY(-50%);
}
.supply-word::before { left: 2px; }
.supply-word::after { right: 2px; }

.supply-engines {
  position: absolute;
  z-index: 2;
  bottom: -7px;
  left: 50%;
  width: 45px;
  height: 7px;
  transform: translateX(-50%);
}

.supply-engines::before,
.supply-engines::after {
  content: "";
  position: absolute;
  top: 0;
  width: 11px;
  height: 7px;
  border: 2px solid #b9f5ff;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--cyan);
  box-shadow: 0 5px 12px var(--cyan),inset 0 -3px 0 #fff8;
}

.supply-engines::before { left: 0; }
.supply-engines::after { right: 0; }

.supply-reward {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: 7px;
  left: auto;
  padding: 2px 5px;
  border-radius: 8px;
  background: #10251c;
  color: var(--lime);
  font: 700 11px "DM Mono",monospace;
  white-space: nowrap;
}

.word-ship.correct {
  --supply-accent: var(--lime);
  --supply-glow: #caff75bb;
  border-color: var(--lime);
  background: #28523b;
  color: var(--lime);
  box-shadow: 0 0 28px var(--lime);
  animation: word-ship-correct .45s ease-out;
}

.word-ship.correct .supply-word { border-color: var(--lime); color: var(--lime); }
.word-ship.correct .supply-word::after {
  right: 5px;
  color: var(--lime);
  font-size: 18px;
  content: "✓";
}
.word-ship.correct .supply-wing { border-color: var(--lime); }
.word-ship.correct .supply-engines::before,
.word-ship.correct .supply-engines::after { background: var(--lime); box-shadow: 0 5px 12px var(--lime); }

.word-ship.wrong {
  --supply-accent: var(--pink);
  --supply-glow: #ff609fbb;
  border-color: var(--pink);
  background: #612540;
  color: white;
  animation: word-ship-wrong .3s ease-out;
}
.word-ship.wrong .supply-word::after {
  right: 5px;
  color: white;
  font-size: 19px;
  content: "×";
}

.word-ship:disabled { pointer-events: none; }

.supply-shot {
  position: absolute;
  z-index: 4;
  width: 5px;
  height: 20px;
  border-radius: 5px;
  background: #ffd266;
  box-shadow: 0 0 16px #ffd266,0 0 28px white;
  animation: supply-shot .3s linear forwards;
  pointer-events: none;
}

.ammo-transfer {
  position: absolute;
  z-index: 9;
  width: 18px;
  height: 6px;
  border: 1px solid #fff6b4;
  border-radius: 4px 1px 1px 4px;
  background: linear-gradient(90deg,#fff8bf,#ffe078 68%,#d99a2b);
  box-shadow: 0 0 9px #ffe078,0 0 17px #fff5a766;
  opacity: 0;
  transform: translate(0,0) rotate(-12deg) scale(.65);
  animation: ammo-transfer .62s cubic-bezier(.35,.05,.35,1) forwards;
  pointer-events: none;
}

.ammo-line.receiving { animation: ammo-receive .22s ease-out; }
.ammo-line.awaiting-transfer { opacity: .22; box-shadow: none; }

.hit-splash {
  position: absolute;
  z-index: 8;
  width: 1px;
  height: 1px;
  color: var(--pink);
  pointer-events: none;
}

.hit-splash.scout { color: var(--cyan); }
.hit-splash.tank { color: #ffd266; }
.hit-splash.boss,
.hit-splash.word { color: var(--lime); }
.hit-splash.shield { color: #9d8cff; }
.hit-splash.splitter { color: #ff9ee8; }
.hit-splash.fragment { color: #62e9ff; }
.hit-splash.solid-shield { color: #e9fdff; }

.splash-particle {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: splash-particle .46s ease-out forwards;
}

.hit-splash.big .splash-particle {
  width: 8px;
  height: 8px;
  animation-duration: .58s;
}

.splash-ring {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border: 3px solid currentColor;
  border-radius: 50%;
  animation: splash-ring .42s ease-out forwards;
}

.invader {
  position: absolute;
  width: 36px;
  height: 25px;
  border: 3px solid var(--pink);
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 0 13px #ff609f;
  animation: none;
  will-change: transform;
}

.invader::before,
.invader::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--pink);
}

.invader::before { left: 7px; }
.invader::after { right: 7px; }
.invader.destroyed { animation: invader-pop .2s ease-out forwards; }
.invader.escaped { animation: invader-escape .22s ease-in forwards; }

.projectile {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  pointer-events: none;
}

.defense-line {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 63px;
  left: 0;
  border-top: 1px dashed #caff7580;
  color: #caff75a8;
  text-align: center;
}

.defense-line span {
  position: relative;
  top: -8px;
  padding: 0 6px;
  background: #101934;
  font: 8px "DM Mono", monospace;
  letter-spacing: .12em;
}

.ship {
  --ship-accent: var(--cyan);
  --ship-secondary: var(--lime);
  z-index: 2;
  left: calc(var(--ship-x) - 29px);
  isolation: isolate;
  border-color: var(--ship-accent);
  background:
    radial-gradient(circle at 11px 17px,#9ff5ff 0 2px,transparent 2.5px),
    radial-gradient(circle at calc(100% - 11px) 17px,#9ff5ff 0 2px,transparent 2.5px),
    linear-gradient(90deg,#0a162b 0 13%,#214764 14% 34%,#112943 35% 65%,#214764 66% 86%,#0a162b 87%),
    linear-gradient(180deg,#285b78,#09162d);
  box-shadow: 0 0 17px var(--ship-accent),inset 0 -6px 0 #06101f,inset 0 2px 0 #bff8ff55;
  pointer-events: none;
}

.ship::after { content: none; }

.ship::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 4px;
  height: 15px;
  border-radius: 4px 4px 0 0;
  background: var(--ship-accent);
  box-shadow: 0 0 9px var(--ship-accent);
  transform: translateX(-50%);
}

.ship-cockpit,
.ship-core,
.ship-engines {
  position: absolute;
  display: block;
  pointer-events: none;
}

.ship-cockpit {
  z-index: 3;
  top: -12px;
  left: 50%;
  width: 18px;
  height: 12px;
  border: 2px solid var(--ship-secondary);
  border-bottom: 0;
  border-radius: 12px 12px 3px 3px;
  background: radial-gradient(circle at 50% 70%,#dffcff,#315873 70%);
  box-shadow: 0 -2px 9px color-mix(in srgb,var(--ship-secondary) 65%,transparent),inset 0 2px 0 #fff8;
  transform: translateX(-50%);
}

.ship-core {
  z-index: 2;
  top: 5px;
  left: 50%;
  width: 12px;
  height: 15px;
  border: 1px solid color-mix(in srgb,var(--ship-secondary) 75%,white);
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg,var(--ship-secondary),#fff 48%,var(--ship-accent) 52%,#17304c);
  box-shadow: 0 0 8px color-mix(in srgb,var(--ship-secondary) 65%,transparent);
  transform: translateX(-50%);
}

.ship-engines {
  z-index: 0;
  bottom: -8px;
  left: 50%;
  width: 36px;
  height: 11px;
  transform: translateX(-50%);
}

.ship-engines::before,
.ship-engines::after {
  position: absolute;
  top: 0;
  width: 10px;
  height: 9px;
  border: 2px solid var(--ship-accent);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg,#fff,var(--ship-accent));
  box-shadow: 0 5px 12px var(--ship-accent);
  content: "";
}
.ship-engines::before { left: 0; }
.ship-engines::after { right: 0; }

.ship.upgrading { animation: ship-upgrade 1.2s ease-out; }

.sky.breached { animation: breach-flash .35s ease-in-out 2; }
.sky.wave-clear { animation: clear-flash .4s ease-out; }

.invader.scout {
  width: 29px;
  height: 21px;
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.invader.scout::before,
.invader.scout::after { background: var(--cyan); }

.invader.tank {
  border-width: 4px;
  border-color: #ffd266;
  box-shadow: 0 0 14px #ffd266;
}

.invader.boss {
  width: 50px;
  height: 34px;
  border-width: 4px;
  border-color: #caff75;
  box-shadow: 0 0 20px #caff75;
}

.invader.boss::before,
.invader.boss::after { top: 10px; background: #caff75; }

.invader.splitter {
  width: 58px;
  height: 40px;
  border-width: 5px;
}

.invader.splitter::before,
.invader.splitter::after {
  top: 13px;
  width: 8px;
  height: 8px;
}

.invader.fragment {
  width: 22px;
  height: 16px;
  border-width: 2px;
}

.invader.fragment::before,
.invader.fragment::after {
  top: 4px;
  width: 3px;
  height: 3px;
}

.invader.fragment::before { left: 4px; }
.invader.fragment::after { right: 4px; }
.invader.fragment.spawned { animation: fragment-spawn .24s ease-out; }
.invader.damaged { filter: brightness(2.5); }

.durability-meter {
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 50%;
  display: flex;
  width: max(26px,90%);
  height: 5px;
  gap: 1px;
  transform: translateX(-50%);
  filter: none;
  pointer-events: none;
}

.durability-meter.boss { top: 2px; width: 88%; }
.durability-meter.shield { top: 2px; width: 82%; }
.durability-meter.boss { gap: 0; }
body[data-world="crystal"] .invader .durability-meter { top: 8px; width: 76%; }

.durability-segment {
  position: relative;
  flex: 1 1 2px;
  min-width: 1px;
  height: 5px;
  border: 1px solid #fff8c7;
  border-radius: 2px;
  background: #ffe078;
  box-shadow: 0 0 4px #ffe078;
}

.durability-meter.shield .durability-segment {
  border-color: #e8e3ff;
  background: #9d8cff;
  box-shadow: 0 0 4px #9d8cff;
}

.durability-segment.lost {
  border-color: #8b91a3;
  background: #171d2b;
  box-shadow: none;
}

.durability-segment.lost::after {
  position: absolute;
  top: 1px;
  right: -1px;
  left: -1px;
  height: 1px;
  background: #aab1c0;
  content: "";
  transform: rotate(-25deg);
}

body[data-world="starport"] .invader {
  background: linear-gradient(180deg,#3a1e4b,#14213b);
}

body[data-world="crystal"] .invader {
  border-color: #77f5ef;
  border-radius: 2px;
  background: linear-gradient(135deg,#b5ffffaa,#493b8399 48%,#81e8ff88 50%);
  box-shadow: 0 0 15px #7defff;
  clip-path: polygon(50% 0,100% 27%,84% 100%,50% 82%,16% 100%,0 27%);
}
body[data-world="crystal"] .invader::before,
body[data-world="crystal"] .invader::after { background: #f2ffff; }
body[data-world="crystal"] .invader.scout { border-color: #cb8cff; box-shadow: 0 0 15px #cb8cff; }
body[data-world="crystal"] .invader.tank { border-color: #9cefff; box-shadow: 0 0 18px #9cefff; }
body[data-world="crystal"] .invader.boss { border-color: #f1e6ff; box-shadow: 0 0 24px #c997ff; }

body[data-world="rust"] .invader {
  border-color: #ff884d;
  border-radius: 4px 4px 10px 10px;
  background:
    radial-gradient(circle at 6px 5px,#ffd090 0 1px,transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 5px,#ffd090 0 1px,transparent 2px),
    repeating-linear-gradient(90deg,#45231d 0 8px,#773b25 9px 15px);
  box-shadow: 0 0 13px #ff6b3d;
}
body[data-world="rust"] .invader::before,
body[data-world="rust"] .invader::after { border-radius: 1px; background: #ffe16f; }
body[data-world="rust"] .invader.scout { border-color: #caff75; box-shadow: 0 0 15px #caff75; }
body[data-world="rust"] .invader.tank { border-color: #ffc05e; box-shadow: 0 0 18px #ff944d; }
body[data-world="rust"] .invader.boss { border-color: #ffe078; box-shadow: 0 0 25px #ff864d; }

body[data-world="ice"] .invader {
  border-color: #b9f5ff;
  border-radius: 7px 7px 1px 1px;
  background: linear-gradient(145deg,#efffffcc,#4f8cc499 50%,#a4eaffaa 51%);
  box-shadow: 0 0 16px #8cecff;
  clip-path: polygon(0 0,100% 0,92% 74%,75% 74%,66% 100%,50% 78%,34% 100%,25% 74%,8% 74%);
}
body[data-world="ice"] .invader::before,
body[data-world="ice"] .invader::after { background: #173d69; }
body[data-world="ice"] .invader.scout { border-color: #72fff0; box-shadow: 0 0 16px #72fff0; }
body[data-world="ice"] .invader.tank { border-color: #d8c8ff; box-shadow: 0 0 19px #a99aff; }
body[data-world="ice"] .invader.boss { border-color: white; box-shadow: 0 0 26px #b9f5ff; }

body[data-world="void"] .invader {
  border-color: #ff60d7;
  border-radius: 50% 50% 13% 13%;
  background: radial-gradient(circle at 50% 35%,#6d2e8b,#170d2a 68%);
  box-shadow: 0 0 16px #ff43d4,inset 0 0 9px #9d52ff88;
}
body[data-world="void"] .invader::before,
body[data-world="void"] .invader::after { border-radius: 50%; background: #eaffff; box-shadow: 0 0 6px #62e9ff; }
body[data-world="void"] .invader.scout { border-color: #62e9ff; box-shadow: 0 0 18px #a448ff; }
body[data-world="void"] .invader.tank { border-color: #b878ff; box-shadow: 0 0 20px #cf55ff; }
body[data-world="void"] .invader.boss { border-color: #ff9ee8; box-shadow: 0 0 29px #ff42d0; }
body[data-world="void"] .invader.splitter {
  border-color: #ffb5ed;
  background:
    radial-gradient(circle at 50% 45%,#ee6bd0 0 8%,#6e2388 30%,#180c2b 68%),
    #170d2a;
  box-shadow: 0 0 25px #ff42d0,inset 0 0 14px #b65dff;
}
body[data-world="void"] .invader.fragment {
  border-color: #62e9ff;
  background: radial-gradient(circle,#66389a,#130c24 70%);
  box-shadow: 0 0 14px #62e9ff;
}

.invader-shield {
  position: absolute;
  height: 14px;
  border: 2px solid #9d8cff;
  border-bottom-width: 4px;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(180deg,#bfb5ff66,#5b4eb844);
  box-shadow: 0 0 13px #9d8cff,inset 0 0 8px #d7d1ff88;
  will-change: transform;
}

.invader-shield::before {
  position: absolute;
  right: 4px;
  bottom: -6px;
  left: 4px;
  height: 3px;
  border-radius: 50%;
  background: #9d8cff;
  box-shadow: 0 0 8px #9d8cff;
  content: "";
}

.invader-shield.damaged { filter: brightness(2.5); }
.invader-shield.ricochet { filter: brightness(3); }
.invader-shield.destroyed { animation: invader-pop .2s ease-out forwards; }
.invader-shield.stationary::after,
.invader-shield.indestructible::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 5px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  opacity: .8;
  transform: translateX(-50%);
}
body[data-world="crystal"] .invader-shield { border-color:#71fff3; background:linear-gradient(180deg,#d8ffff77,#725cff44); box-shadow:0 0 14px #77f5ef,inset 0 0 8px #d7d1ff; }
body[data-world="rust"] .invader-shield { border-color:#ff9b52; background:linear-gradient(180deg,#ffd28566,#8a351f55); box-shadow:0 0 14px #ff7545,inset 0 0 8px #ffd28588; }
body[data-world="ice"] .invader-shield.indestructible {
  color: #dffcff;
  border: 4px solid #efffff;
  border-bottom-width: 6px;
  background: linear-gradient(145deg,#efffff,#79bde8 46%,#416aa4 48%,#d8fbff);
  box-shadow: 0 0 18px #9cefff,inset 0 0 10px #fff;
  clip-path: polygon(0 22%,8% 0,26% 14%,44% 0,60% 16%,79% 0,100% 20%,93% 100%,8% 100%);
}

@keyframes fragment-spawn {
  from { opacity: .35; scale: 1.8; }
  to { opacity: 1; scale: 1; }
}
body[data-world="ice"] .invader-shield { border-color:#dffcff; background:linear-gradient(180deg,#fff9,#62d9ff55); box-shadow:0 0 16px #b9f5ff,inset 0 0 8px white; }
body[data-world="void"] .invader-shield { border-color:#ff60d7; background:linear-gradient(180deg,#ff9ee866,#65268e66); box-shadow:0 0 17px #ff43d4,inset 0 0 8px #c98cff; }

.projectile.wide {
  border: 1px solid #d8fbff;
  border-radius: 45%;
  background: linear-gradient(90deg,#62e9ff33,#e7fdff,#62e9ff33);
  box-shadow: 0 0 18px #62e9ff;
}


.sky.no-ammo { animation: no-ammo-flash .3s ease-out; }
.ship.dry-fire { animation: dry-fire .3s ease-out; }
#ammo.no-ammo { animation: ammo-pulse .3s ease-out; }

.upgrade-choices {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  max-height: min(64dvh,500px);
  margin-top: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#upgradePanel { padding: 10px; }
#upgradePanel > div {
  width: min(430px,100%);
  max-height: calc(100dvh - 20px);
  padding: 18px 16px;
  overflow: hidden;
}
#upgradePanel h2 { margin: 0; font-size: clamp(25px,8vw,34px); }

.upgrade-choice {
  position: relative;
  display: grid;
  grid-template-rows: minmax(62px,1fr) auto auto;
  place-items: center;
  min-height: 138px;
  padding: 10px;
  border: 2px solid #4772a1;
  border-radius: 15px;
  background: #142950;
  color: var(--ink);
  text-align: center;
}

.upgrade-choice:active { transform: scale(.98); }
.upgrade-choice:focus-visible { outline: 4px solid white; outline-offset: 3px; }
.upgrade-choice.available {
  border: 4px solid var(--lime);
  background: linear-gradient(160deg,#204c3b,#102b31 72%);
  box-shadow: 0 0 24px #caff7577,inset 0 0 18px #caff7518;
}
.upgrade-choice.locked {
  border: 2px solid #4c586c;
  background:
    repeating-linear-gradient(135deg,#101a2d 0 8px,#0c1527 8px 16px);
  color: #8795a9;
  box-shadow: none;
  cursor: help;
}

.upgrade-lane-name {
  color: var(--lime);
  font: 800 17px "DM Mono",monospace;
  letter-spacing: .05em;
}

.upgrade-cost {
  margin-top: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #ffe078;
  font: 800 17px "DM Mono",monospace;
}

.upgrade-choice.available .upgrade-cost {
  background: var(--lime);
  color: #10210d;
  box-shadow: 0 0 12px #caff7555;
}

.upgrade-choice.locked .upgrade-lane-name { color: #9ba7b8; }
.upgrade-choice.locked .upgrade-cost {
  border: 1px solid #667185;
  background: #11192a;
  color: #b8c0cc;
  font-size: 15px;
}

.upgrade-preview {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid #4c6c94;
  border-radius: 50%;
  background: #09172f;
  color: white;
}

.upgrade-icon {
  color: var(--cyan);
  font: 34px/1 sans-serif;
  text-shadow: 0 0 10px currentColor;
}

.upgrade-preview.ammo .upgrade-icon { color: #ffe078; }
.upgrade-preview.speed .upgrade-icon { color: #b9f5ff; }
.upgrade-choice.locked .upgrade-preview {
  border-color: #505b6d;
  filter: grayscale(1);
  opacity: .42;
}
.upgrade-choice:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 5px);
  justify-self: center;
}

.star-balance.locked-feedback { color: #ffb0c9 !important; font-size: 22px !important; animation: ammo-pulse .3s ease-out; }

.star-balance {
  margin: 5px 0 0;
  color: #ffe078 !important;
  font: 700 15px "DM Mono",monospace !important;
}

.complete-panel { padding: 12px; }
.complete-panel > div {
  width: min(400px,100%);
  padding: 22px 16px 18px;
}
.complete-panel h2 { margin: 0 0 18px; font-size: clamp(28px,9vw,38px); }

.complete-results {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.complete-result {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 130px;
  padding: 11px 4px;
  border: 2px solid #3f5f8c;
  border-radius: 15px;
  background: #0d1b38;
  text-align: center;
}

.complete-result small { color: #e5effa; font: 800 15px "DM Mono",monospace; }
.complete-result strong { font-size: 29px; line-height: 1; }

.complete-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 23px;
  font-style: normal;
  font-weight: 800;
}

.defence-result { color: #ffe078; }
.power-result { color: var(--cyan); }
.reading-result { color: var(--lime); }
.complete-continue { min-width: 170px; margin: 16px 0 0; font-size: 17px; }

.world-panel {
  --world-accent: var(--cyan);
  --world-deep: #173f69;
  padding: 12px;
}

.world-panel[data-world="crystal"] { --world-accent: #c390ff; --world-deep: #315d86; }
.world-panel[data-world="rust"] { --world-accent: #ff9b52; --world-deep: #7c2c20; }
.world-panel[data-world="ice"] { --world-accent: #b9f5ff; --world-deep: #276fa5; }
.world-panel[data-world="void"] { --world-accent: #ff60d7; --world-deep: #48156e; }

.world-panel > div {
  width: min(410px,100%);
  padding: 22px 18px 18px;
  overflow: hidden;
  border-color: var(--world-accent);
  background: linear-gradient(155deg,#172955,#080e22 72%);
  box-shadow: 0 0 34px color-mix(in srgb,var(--world-accent) 35%,transparent),0 20px 60px #000;
}

.world-kicker {
  margin: 0 0 13px;
  color: var(--world-accent) !important;
  font: 900 clamp(28px,9vw,40px)/1 "DM Mono",monospace !important;
  letter-spacing: .05em;
  text-shadow: 0 0 16px color-mix(in srgb,var(--world-accent) 70%,transparent);
  animation: world-title-arrive .65s ease-out both;
}

.world-panel h2 {
  margin: 17px 0 5px;
  color: white;
  font-size: clamp(25px,8vw,35px);
  line-height: 1.05;
}

.world-vista {
  position: relative;
  width: min(300px,100%);
  height: min(34dvh,210px);
  min-height: 155px;
  margin: auto;
  overflow: hidden;
  border: 2px solid var(--world-accent);
  border-radius: 22px;
  background:
    radial-gradient(#fff 1px,transparent 1px),
    radial-gradient(#a4f6ff 1px,transparent 1px),
    linear-gradient(160deg,#06102a,#15123c 65%,#080a1d);
  background-position: 0 0,17px 13px,0 0;
  background-size: 39px 39px,61px 61px,auto;
  box-shadow: inset 0 0 38px #000,0 0 22px color-mix(in srgb,var(--world-accent) 40%,transparent);
}

.world-vista::after {
  position: absolute;
  right: -12%;
  bottom: -32%;
  left: -12%;
  height: 62%;
  border-top: 3px solid color-mix(in srgb,var(--world-accent) 65%,white);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg,var(--world-deep),#070a17);
  box-shadow: 0 -9px 28px color-mix(in srgb,var(--world-accent) 45%,transparent);
  content: "";
}

.world-orb {
  position: absolute;
  z-index: 1;
  top: 16%;
  left: 50%;
  width: 108px;
  height: 108px;
  border: 3px solid color-mix(in srgb,var(--world-accent) 75%,white);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,white,var(--world-accent) 12%,var(--world-deep) 58%,#080b1c 76%);
  box-shadow: inset -14px -10px 21px #050816aa,0 0 31px var(--world-accent);
  transform: translateX(-50%);
  animation: world-orb-arrive .9s cubic-bezier(.2,.8,.2,1) both;
}

.world-panel[data-world="crystal"] .world-orb {
  border-radius: 20% 55% 28% 48%;
  background: conic-gradient(from 35deg,#dffcff,#9c67ff,#3ee7dc,#6149a7,#e9ffff);
  transform: translateX(-50%) rotate(18deg);
}

.world-panel[data-world="rust"] .world-orb {
  background:
    radial-gradient(circle at 68% 36%,#481912 0 7%,transparent 8%),
    radial-gradient(circle at 39% 64%,#6d2319 0 11%,transparent 12%),
    radial-gradient(circle at 34% 27%,#ffd07a,#c44b28 30%,#6f211b 70%);
}

.world-panel[data-world="ice"] .world-orb {
  background:
    linear-gradient(135deg,transparent 36%,#efffff 37% 43%,transparent 44%),
    linear-gradient(45deg,transparent 56%,#8beaff 57% 64%,transparent 65%),
    radial-gradient(circle at 35% 28%,white,#8feeff 24%,#3d70bd 68%);
}

.world-panel[data-world="void"] .world-orb {
  border-color: #ff9ee8;
  background: repeating-radial-gradient(circle at 44% 45%,#080612 0 8px,#a23ce5 10px,#f152d1 14px,#15102a 20px);
  box-shadow: 0 0 42px #df4cff;
}

.world-continue {
  min-width: 180px;
  margin: 13px 0 0;
  background: var(--world-accent);
  font-size: 17px;
}

@media (max-height: 590px) {
  .complete-panel > div { padding-block: 13px; }
  .complete-panel h2 { margin-bottom: 9px; }
  .complete-results { gap: 6px; }
  .complete-result { min-height: 105px; padding-block: 7px; }
  .complete-continue { margin-top: 10px; }
  .upgrade-choice { min-height: 112px; }
  .upgrade-preview { width: 50px; height: 50px; }
}

.upgrade-skip {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 3px solid #ffe078;
  border-radius: 14px;
  background: linear-gradient(180deg,#493d1f,#241f18);
  color: #fff2b0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 0 15px #ffe07844,inset 0 -4px 0 #17130d;
}

.upgrade-skip:active { transform: scale(.98); }
.upgrade-skip:focus-visible { outline: 4px solid white; outline-offset: 3px; }

.dev-tools {
  position: fixed;
  z-index: 20;
  top: 4px;
  left: 4px;
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #ff609f88;
  border-radius: 6px;
  background: #090d1ddd;
}

.dev-tools button {
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: #4b1f39;
  color: white;
  font: 9px "DM Mono", monospace;
}

@keyframes invader-pop {
  50% { opacity: 1; filter: brightness(3); box-shadow: 0 0 25px white; }
  100% { opacity: 0; filter: brightness(2); }
}

@keyframes breach-flash { 50% { background-color: #ff386455; } }
@keyframes clear-flash { 50% { background-color: #caff7528; } }
@keyframes no-ammo-flash {
  35% { box-shadow: inset 0 0 65px #ff315f; background-color: #59152c; }
}
@keyframes dry-fire {
  20% { transform: translateX(-7px); border-color: var(--pink); }
  45% { transform: translateX(7px); border-color: var(--pink); }
  70% { transform: translateX(-4px); }
}
@keyframes ammo-pulse {
  35% { color: white; text-shadow: 0 0 12px var(--pink); transform: scale(1.5); }
}
@keyframes word-ship-arrive {
  from { opacity: 0; transform: translateY(-18px) scale(.88); }
}
@keyframes word-ship-correct {
  50% { transform: scale(1.1); filter: brightness(1.8); }
}
@keyframes word-ship-wrong {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
@keyframes supply-shot {
  from { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  to { opacity: 0; transform: translateY(var(--supply-travel)); }
}
@keyframes ammo-transfer {
  0% { opacity: 0; transform: translate(0,0) rotate(-12deg) scale(.65); }
  12%,78% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--ammo-transfer-x),var(--ammo-transfer-y)) rotate(-35deg) scale(.9);
  }
}
@keyframes ammo-receive {
  45% { filter: brightness(2.8); transform: skewX(-10deg) scale(1.45); }
}
@keyframes splash-particle {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to { opacity: 0; transform: translate(var(--splash-x),var(--splash-y)) scale(.25) rotate(120deg); }
}
@keyframes splash-ring {
  from { opacity: 1; transform: scale(.25); }
  to { opacity: 0; transform: scale(3.2); }
}
@keyframes invader-escape {
  to { opacity: 0; transform: translateY(32px) scale(.7); }
}
@keyframes ship-upgrade {
  0%,100% { transform: scale(1); filter: none; }
  20% { transform: scale(1.25); filter: brightness(2.8); }
  45% { transform: scale(.92); filter: brightness(1.5); }
  70% { transform: scale(1.12); }
}
@keyframes repeat-glow {
  50% { border-color: white; box-shadow: 0 0 28px #62e9ff,inset 0 -4px 0 #0a2645; }
}
@keyframes next-glow {
  50% { box-shadow: 0 0 34px #caff75,inset 0 -5px 0 #56842a; filter: brightness(1.08); }
}
@keyframes world-title-arrive {
  from { opacity: 0; transform: translateY(-15px) scale(.9); }
}
@keyframes world-orb-arrive {
  from { opacity: 0; transform: translateX(-50%) scale(.25) rotate(-25deg); }
}

@media (min-width: 600px) {
  .app { padding-top: 12px; padding-bottom: 12px; }
  .game { grid-template-rows: minmax(360px, 1fr) 31px; }
}

@media (max-height: 610px) {
  .app { grid-template-rows: 49px minmax(0, 1fr); }
  .logo b { font-size: 14px; }
  .game { grid-template-rows: minmax(270px, 1fr) 25px; }
}

.combat-layer.compact-height .word-ships { top: 3px; gap: 4px; }
.combat-layer.compact-height .word-ship { min-height: 58px; padding-block: 5px 7px; }
.combat-layer.compact-height .supply-word { min-height: 42px; }
.combat-layer.compact-height .supply-repeat { top: 218px; min-height: 44px; padding-block: 7px; }
.combat-layer.compact-height .supply-next { top: 218px; min-height: 50px; padding-block: 8px; }

@media (prefers-reduced-motion: reduce) {
  .invader.destroyed,
  .invader.escaped { animation-duration: .01s !important; }
  .ship.upgrading,
  .word-ship,
  .supply-repeat,
  .supply-next,
  .sky.no-ammo,
  #ammo.no-ammo { animation: none !important; }
  .hit-splash,
  .ammo-transfer { display: none; }
}

body.reduce-motion .invader.destroyed,
body.reduce-motion .invader.escaped { animation-duration: .01s !important; }
body.reduce-motion .ship.upgrading,
body.reduce-motion .word-ship,
body.reduce-motion .supply-repeat,
body.reduce-motion .supply-next,
body.reduce-motion .world-kicker,
body.reduce-motion .world-orb,
body.reduce-motion .sky.no-ammo,
body.reduce-motion #ammo.no-ammo { animation: none !important; }
body.reduce-motion .hit-splash,
body.reduce-motion .ammo-transfer { display: none; }