/* src/styles/base.css */
/* Base tokens and global layout */
:root {
  color-scheme: dark;
  --ink: #f4f7ef;
  --muted: #9aa69a;
  --panel: rgba(14, 16, 14, 0.74);
  --panel-strong: rgba(22, 25, 21, 0.94);
  --line: rgba(244, 247, 239, 0.18);
  --green: #80f05b;
  --cyan: #42d9c8;
  --red: #ff5964;
  --amber: #f0c64d;
  --pink: #f06c9b;
  --side-rail-top: max(44px, 12vh);
  --side-rail-gap: 8px;
  --side-rail-width: 96px;
  --side-upgrade-height: 92px;
  --side-service-height: 82px;
  --side-service-top: calc(var(--side-rail-top) + var(--side-upgrade-height) + var(--side-rail-gap));
  --side-panel-width: min(390px, calc(100vw - 74px));
  --side-panel-left: var(--side-panel-width);
  --side-icon-size: 52px;
  --side-upgrade-icon-size: 46px;
  --side-label-size: 20px;
  --side-upgrade-label-size: 15px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at top, rgba(128, 240, 91, 0.09), transparent 26%),
    radial-gradient(circle at 80% 80%, rgba(66, 217, 200, 0.08), transparent 24%),
    #060706;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body.is-playing.has-mobile-controls {
  overscroll-behavior: none;
  touch-action: none;
}

button {
  font: inherit;
  color: inherit;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.74);
  color: var(--ink);
  font: inherit;
  padding: 10px;
}

#game {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background:
    radial-gradient(circle at center, rgba(8, 10, 8, 0.9), rgba(6, 7, 6, 1)),
    #060706;
  touch-action: none;
}

.hidden {
  display: none !important;
}

.orientation-gate {
  display: none;
}

.auth-panel {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
}

.is-playing .auth-panel,
.is-playing .resource-panel,
.is-playing .profile-modal,
.is-playing .menu-modal:not(.gameplay-modal),
.is-playing .menu-side-panel,
.is-playing .support-corner-button,
.is-playing .legal-corner-button {
  display: none !important;
  pointer-events: none !important;
}

body.is-playing,
body.is-playing * {
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.login-button,
.icon-text-button,
.settings-button,
.topbar-settings-button,
.settings-reset-button,
.mobile-mode-button,
.onboarding-control-button,
.keybind-button {
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background: rgba(10, 12, 10, 0.78);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 9px 11px;
  backdrop-filter: blur(10px);
}

.login-button {
  min-width: 124px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.settings-button {
  min-width: 96px;
  padding: 9px 11px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

/* src/styles/procedural-icons.css */
/* Procedural CSS icons and image-like UI art */
/* Small procedural ornaments keep labels and button hit areas stationary. */
[data-open-settings]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px;
  background: currentColor; clip-path: polygon(38% 0, 62% 0, 65% 18%, 81% 12%, 93% 32%, 80% 44%, 100% 50%, 90% 73%, 72% 69%, 64% 100%, 40% 100%, 34% 80%, 17% 88%, 4% 68%, 18% 53%, 0 43%, 10% 20%, 30% 27%);
  mask: radial-gradient(circle, transparent 0 21%, black 24%); opacity: .8; }
.leaderboard > h2::before { content: ""; display: inline-block; width: 12px; height: 13px; margin-inline-end: 6px; vertical-align: -2px; background: #d7bd80;
  clip-path: polygon(12% 0, 88% 0, 85% 38%, 66% 59%, 58% 59%, 58% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 82%, 42% 82%, 42% 59%, 34% 59%, 15% 38%); }
:root[data-menu-motion="full"] [data-open-settings]:is(:hover,:focus-visible,:active)::before { animation: menu-gear-turn .45s ease-out; }
:root[data-menu-motion="full"] .shop-menu-button:is(:hover,:focus-visible,:active) .shop-art { animation: menu-icon-hop .36s ease-out; }
:root[data-menu-motion="full"] .leaderboard:is(:hover,:focus-within) > h2::before { animation: menu-trophy-shine .6s ease-out; }
@keyframes menu-gear-turn { to { rotate: 60deg; } }
@keyframes menu-icon-hop { 45% { translate: 0 -5px; } }
@keyframes menu-trophy-shine { 45% { filter: brightness(1.65) drop-shadow(0 0 3px #ffe5a899); } }
/* Stack the label above its ornament when desktop side bays are narrow. */
@media (max-width: 999px) {
  body:not(.is-small-mobile) #startScreen .menu-side-panel .main-menu-label {
    position: absolute;
    inset: 16px 14px auto;
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  body:not(.is-small-mobile) #startScreen .menu-side-panel .menu-art {
    transform: scale(.48);
    transform-origin: right bottom;
    right: 14px;
    bottom: 12px;
  }
}

/* Machined menu instruments reuse the established art boxes. */
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .shop-weapon {
  border: 1px solid #1c303b; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, #10232e 6px 8px, #a9bbbf 8px 9px) 66% 50% / 38px 100% no-repeat,
    linear-gradient(#9fb0b4, #4a6674 45%, #1d3545 75%, #78919c);
  box-shadow: inset 0 1px 0 #dce7e47d, 0 3px 0 #081924;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .shop-weapon::before { border-color: #788b93; box-shadow: 0 2px 0 #0c2230; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .shop-bomb {
  border-color: #879899;
  background: radial-gradient(circle at 33% 25%, #a5b3b44d, transparent 39%), linear-gradient(130deg, #475f68, #132a38);
  box-shadow: inset 0 0 0 3px #183442, 0 3px 0 #071922;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .shop-bullet {
  background: linear-gradient(180deg, #e0c79d, #ab915e 40%, #65533c 80%, #a28c68);
  box-shadow: inset 7px 0 0 #7b755f, inset 9px 0 0 #dfcca3, 0 3px 0 #071b27;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .shop-bullet::after { border-left-color: #a8b6b5; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .paint-can {
  border-color: #617c8b; border-radius: 4px;
  background: linear-gradient(90deg, #17313f, #8ca3aa 27%, #4b6b7c 50%, #1e3b4b 80%);
  box-shadow: inset 0 4px 0 #a9b7b4, inset 0 -5px 0 #152d3a, 0 3px 0 #081a27;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .paint-can::after { height: 10px; border-radius: 2px; border: 1px solid #c0cbb73d; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .paint-swatch {
  border: 3px solid #7c949b; border-radius: 4px;
  box-shadow: inset 0 2px 0 #e5efe466, inset 0 0 0 2px #09293844, 0 3px 0 #071d29;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .swatch-a { background: linear-gradient(145deg, #71b5ae, #316e73); }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .swatch-b { background: linear-gradient(145deg, #c28e94, #7c4a64); }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .paint-drop { border-radius: 4px; width: 14px; height: 22px; background: linear-gradient(90deg, #a98c51, #dbc38b 40%, #775d39); box-shadow: inset 0 -4px 0 #142c39, 0 2px 0 #081a23; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .inventory-crate {
  border-color: #7e959d; border-radius: 4px;
  background: repeating-linear-gradient(0deg, transparent 0 9px, #78909855 9px 10px), linear-gradient(135deg, #5a737c, #1b3648);
  box-shadow: inset 0 1px 0 #d1d9c69c, inset 0 0 0 4px #0c243599, 0 4px 0 #061a28;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .inventory-crate::before { height: 7px; top: 19px; background: linear-gradient(#b6bea7, #778975 40%, #314744); border: 1px solid #152c34; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .inventory-crate::after { width: 8px; left: 25px; background: linear-gradient(90deg, #90a3a1, #48616b); border: 1px solid #213c4a; }
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .inventory-core {
  border: 3px solid #74929e;
  background: radial-gradient(circle, #b7dcce 0 13%, #2a5463 14% 28%, #96acac 29% 38%, #153342 39% 51%, transparent 52%),
    repeating-conic-gradient(#809a9f 0 17deg, #264655 18deg 36deg);
  box-shadow: inset 0 0 0 3px #102d3e, 0 3px 0 #071e2b;
}
body :is(#startScreen, #mobileMenuDrawer) .machine-panel .inventory-spark { opacity: .4; }
/* Enamel silhouettes read at menu size without a glow around every object. */
body .menu-art {
  opacity: 1;
  filter: none;
  transform: scale(.72);
  transform-origin: right center;
  right: 12px;
  bottom: 0;
}
body .menu-art :is(.shop-bomb, .shop-bullet, .shop-weapon, .paint-can,
  .paint-drop, .inventory-core, .inventory-spark) {
  filter: none;
  box-shadow: 0 3px 0 #08172355;
}
body .inventory-item-icon, body .item-slot-icon {
  position: relative;
  border: 2px solid #172b38;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 15%, #172d3c 16% 28%, transparent 29% 40%, #172d3c 41% 53%, transparent 54% 65%, #172d3c 66% 78%, transparent 79%) 50% 70% / 70% 24% no-repeat,
    linear-gradient(180deg, #ecf8ff55, transparent 16%),
    var(--item-color, var(--slot-color, #8bd4ff));
  box-shadow: inset 0 -4px 0 #0c263f33, 0 3px 0 #081926;
}
body .inventory-item-icon::before, body .item-slot-icon::before {
  content: ""; position: absolute; left: 20%; right: 20%; top: 15%; height: 22%;
  border-radius: 2px; background: #162f40;
  box-shadow: inset 0 1px 2px #06152266;
}
.platinum-icon {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 0 9px rgba(238, 249, 255, 0.45));
}

.platinum-icon::before,
.platinum-icon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 1px;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  background:
    linear-gradient(135deg, #ffffff 0%, #b8c9d2 42%, #f2fbff 68%, #8fa5b0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 12px rgba(183, 237, 255, 0.38);
}

.platinum-icon::after {
  inset: 8px;
  clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%);
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(168, 218, 236, 0.92));
  opacity: 0.86;
}


.cosmetic-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 34% 42%, var(--skin-primary) 0 9%, transparent 10%),
    radial-gradient(circle at 52% 53%, var(--skin-secondary) 0 11%, transparent 12%),
    radial-gradient(circle at 67% 40%, var(--skin-accent) 0 7%, transparent 8%),
    linear-gradient(135deg, rgba(16, 20, 20, 0.96), rgba(7, 9, 9, 0.96));
}

.cosmetic-preview::before,
.cosmetic-preview::after {
  content: "";
  position: absolute;
  inset: 18px auto auto 50%;
  width: 76px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--skin-primary), white 18%);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--skin-primary), var(--skin-secondary));
  transform: translateX(-50%) rotate(-18deg);
  box-shadow: 0 0 22px color-mix(in srgb, var(--skin-primary), transparent 54%);
}

.cosmetic-preview::after {
  inset: auto auto 15px 50%;
  width: 46px;
  height: 16px;
  border-color: color-mix(in srgb, var(--skin-accent), white 16%);
  background: var(--skin-accent);
  transform: translateX(-50%) rotate(18deg);
}


.menu-art {
  position: absolute;
  inset: auto 12px 12px auto;
  width: 128px;
  height: 82px;
  pointer-events: none;
}

.shop-bomb {
  position: absolute;
  left: 6px;
  bottom: 4px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 239, 198, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.7), transparent 18%),
    linear-gradient(135deg, #363c3f, #121617 72%);
  box-shadow: 0 0 18px rgba(240, 198, 77, 0.16);
}

.shop-bomb::before {
  content: "";
  position: absolute;
  right: -4px;
  top: -8px;
  width: 15px;
  height: 12px;
  border-radius: 4px;
  background: #d4b166;
  transform: rotate(28deg);
}

.shop-bomb::after {
  content: "";
  position: absolute;
  right: -17px;
  top: -18px;
  width: 22px;
  height: 18px;
  border-top: 3px solid #f0c64d;
  border-radius: 50%;
  transform: rotate(28deg);
}

.shop-bullet {
  position: absolute;
  right: 4px;
  bottom: 13px;
  width: 58px;
  height: 14px;
  border-radius: 999px 6px 6px 999px;
  background:
    linear-gradient(90deg, #f7e5aa 0 24%, #b6803f 24% 38%, #f0c64d 38% 100%);
  transform: rotate(-18deg);
  box-shadow: 0 0 14px rgba(240, 198, 77, 0.24);
}

.shop-bullet::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 0;
  border-left: 16px solid #fff2c4;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.shop-weapon {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 78px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1c2428, #6a7680 48%, #d4dde2 100%);
  transform: rotate(13deg);
}

.shop-weapon::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 22px;
  height: 22px;
  border: 5px solid #222a2e;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.shop-weapon::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 3px;
  width: 20px;
  height: 10px;
  border-radius: 5px 0 0 5px;
  background: #151b1e;
}

.paint-can {
  position: absolute;
  left: 10px;
  bottom: 6px;
  width: 42px;
  height: 48px;
  border: 2px solid rgba(244, 247, 239, 0.7);
  border-radius: 8px 8px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(135deg, #2e3942, #11161a);
}

.paint-can::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -10px;
  width: 24px;
  height: 13px;
  border: 2px solid #aebdc6;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.paint-can::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 15px;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(90deg, #42d9c8, #f06c9b 55%, #f0c64d);
}

.paint-swatch {
  position: absolute;
  width: 42px;
  height: 30px;
  border: 2px solid rgba(244, 247, 239, 0.44);
  border-radius: 7px;
  transform: rotate(-12deg);
}

.swatch-a {
  right: 40px;
  top: 10px;
  background: #42d9c8;
}

.swatch-b {
  right: 8px;
  top: 28px;
  background: #f06c9b;
  transform: rotate(14deg);
}

.paint-drop {
  position: absolute;
  right: 22px;
  bottom: 3px;
  width: 22px;
  height: 30px;
  border-radius: 50% 50% 52% 52%;
  background: linear-gradient(180deg, #f0c64d, #ff8c42);
  transform: rotate(18deg);
  box-shadow: 0 0 14px rgba(240, 198, 77, 0.24);
}

.inventory-crate {
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 62px;
  height: 48px;
  border: 2px solid rgba(255, 224, 102, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 224, 102, 0.2), transparent 38%),
    linear-gradient(180deg, #2b2f24, #11140f);
  box-shadow: 0 0 18px rgba(255, 224, 102, 0.18);
}

.inventory-crate::before,
.inventory-crate::after {
  content: "";
  position: absolute;
  background: rgba(255, 224, 102, 0.66);
}

.inventory-crate::before {
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
}

.inventory-crate::after {
  top: 0;
  bottom: 0;
  left: 29px;
  width: 2px;
}

.inventory-core {
  position: absolute;
  right: 14px;
  top: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f4f7ef 0 17%, #8bd4ff 18% 34%, transparent 35%),
    conic-gradient(from 0.15turn, #8bd4ff, #ffe066, #7cff95, #8bd4ff);
  box-shadow: 0 0 18px rgba(139, 212, 255, 0.32);
}

.inventory-spark {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background: #7cff95;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.spark-a {
  right: 66px;
  bottom: 15px;
}

.spark-b {
  right: 2px;
  bottom: 8px;
  width: 14px;
  height: 14px;
  background: #ffe066;
}


.mobile-ship-icon {
  width: 34px;
  height: 34px;
  overflow: visible;
}

.mobile-ship-panel-frame {
  fill: rgba(128, 240, 91, 0.11);
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.mobile-ship-panel-rail,
.mobile-ship-panel-arrow {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-ship-panel-module {
  fill: rgba(93, 247, 218, 0.17);
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* src/styles/onboarding-tutorial.css */
/* Onboarding and tutorial overlays */
.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: auto;
}

.onboarding-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(26, 31, 23, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56);
}

.onboarding-card h2 {
  margin: 0;
  color: var(--green);
  font-size: clamp(24px, 8vw, 42px);
  line-height: 0.96;
  white-space: nowrap;
}

.onboarding-copy {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.onboarding-mobile-controls {
  display: none;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.38);
}

body.has-mobile-controls .onboarding-mobile-controls {
  display: grid;
}

.onboarding-mobile-controls h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.onboarding-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-control-button {
  min-height: 44px;
  color: var(--muted);
}

.onboarding-control-button.active {
  border-color: rgba(128, 240, 91, 0.58);
  background: rgba(38, 67, 43, 0.72);
  color: var(--green);
}

.onboarding-actions button {
  min-height: 44px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.onboarding-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.onboarding-primary {
  grid-column: 1 / -1;
  min-height: 58px !important;
  border-color: rgba(128, 240, 91, 0.75) !important;
  background: linear-gradient(180deg, rgba(71, 112, 55, 0.96), rgba(48, 78, 39, 0.92));
  color: var(--ink);
  font-size: 20px;
}

.onboarding-secondary {
  min-height: 52px !important;
  background: rgba(66, 217, 200, 0.12);
  color: var(--cyan);
  font-size: 18px;
}

.tutorial-guide-overlay {
  position: fixed;
  inset: 0;
  /* Body-level guidance must stay above HUD stacking contexts, expanded maps,
     service panels, and the full-screen transition door. */
  z-index: 12020;
  pointer-events: none;
}

.tutorial-guide-card {
  position: fixed;
  left: var(--guide-x, 18px);
  top: var(--guide-y, 92px);
  width: min(320px, calc(100vw - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 209, 102, 0.44);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.9);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

.tutorial-guide-card b {
  display: block;
  margin-bottom: 5px;
  color: #ffd166;
  font-size: 13px;
  text-transform: uppercase;
}

.tutorial-guide-card p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

/* The guide keeps its existing placement contract; its robot lives inside that measured card. */
.tutorial-presentation-active .tutorial-guide-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  box-sizing: border-box;
  transform: translateX(var(--tutorial-card-kick, 0px));
  border-color: rgba(154, 170, 178, .42);
  background: linear-gradient(150deg, rgba(24, 34, 42, .97), rgba(8, 15, 23, .97));
}
.tutorial-robot-canvas { width: 72px; height: 84px; align-self: start; pointer-events: none; }
.tutorial-guide-speech { min-width: 0; position: relative; padding-top: 13px; }
.tutorial-guide-progress { position: absolute; top: 0; right: 0; color: #aeb9bd; font: 9px/1 monospace; letter-spacing: .08em; }
.tutorial-presentation-active .tutorial-guide-card b { color: #edf3f5; font-size: 12px; line-height: 1.3; }
.tutorial-presentation-active #tutorialGuideText { display: block; cursor: pointer; pointer-events: auto; min-height: 1.35em; outline-offset: 3px; }
.tutorial-presentation-active .tutorial-guide-card .tutorial-guide-hint { display: block; margin-top: 8px; font-size: 11px; color: #ffe1a0; }
.tutorial-guide-reaction { position: absolute; bottom: calc(100% + 14px); left: -10px; max-width: 240px; padding: 7px 10px; border: 1px solid #75858b; border-radius: 8px 8px 8px 1px; color: #f2f5ec; background: #25333d; font-size: 12px; white-space: normal; }
.tutorial-guide-stamp { position: absolute; right: -5px; top: -10px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #b4d4cc; border-radius: 50%; background: #1b3832; color: #ceeee5; font-weight: 900; transform: rotate(-10deg); }
.tutorial-guide-card[data-bubble-side="below"] .tutorial-guide-reaction { bottom: auto; top: calc(100% + 10px); border-radius: 1px 8px 8px 8px; }
.tutorial-guide-card[data-bubble-side="right"] .tutorial-guide-reaction { bottom: auto; top: 0; left: calc(100% + 12px); border-radius: 1px 8px 8px 8px; }
.tutorial-guide-card[data-bubble-side="left"] .tutorial-guide-reaction { bottom: auto; top: 0; left: auto; right: calc(100% + 12px); border-radius: 8px 1px 8px 8px; }
.tutorial-guide-reaction:not(.hidden)[data-phase="enter"] { transform-origin: 8px 100%; animation: tutorial-bubble-enter 120ms ease-out both; }
.tutorial-guide-reaction:not(.hidden)[data-phase="exit"] { transform-origin: 8px 100%; animation: tutorial-bubble-exit 120ms ease-in both; }
.tutorial-guide-card[data-bubble-side="below"] .tutorial-guide-reaction { transform-origin: 8px 0; }
.tutorial-guide-stamp:not(.hidden)[data-phase="enter"] { animation: tutorial-stamp-enter 120ms cubic-bezier(.15,.8,.3,1) both; }
.tutorial-guide-stamp:not(.hidden)[data-phase="exit"] { animation: tutorial-stamp-exit 120ms ease-in both; }
@keyframes tutorial-bubble-enter { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes tutorial-bubble-exit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }
@keyframes tutorial-stamp-enter { from { opacity: 0; transform: scale(1.3) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes tutorial-stamp-exit { from { opacity: 1; transform: scale(1) rotate(-10deg); } to { opacity: 0; transform: scale(.85) rotate(-18deg); } }
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-guide-reaction,
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-guide-stamp { animation: none !important; }
.tutorial-presentation-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tutorial-spotlight { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tutorial-spotlight-dim { position: fixed; background: rgba(1, 4, 9, .82); pointer-events: auto; }
.tutorial-spotlight-ring { position: fixed; border: 2px solid #ffe198; border-radius: 6px; box-sizing: border-box; pointer-events: none; }
.tutorial-spotlight-finger { position: fixed; color: #ffe7ae; font: 40px/44px sans-serif; text-shadow: 0 2px 3px #000; pointer-events: none; }
.tutorial-presentation-active .tutorial-guide-card, .tutorial-presentation-active .tutorial-world-markers { z-index: 2; }
.tutorial-presentation-active .tutorial-guide-arrow {
  z-index: 1; height: 2px; border: 0; opacity: .72; box-shadow: 0 0 7px rgba(255,209,102,.25);
  background: repeating-linear-gradient(90deg, #ffd166 0 3px, transparent 3px 9px);
  background-position-x: var(--tutorial-laser-flow, 0px);
}
.tutorial-presentation-active .tutorial-guide-arrow::after { display: none; }
.tutorial-stalled .tutorial-guide-arrow { height: 3px; opacity: 1; }
.tutorial-presentation-active .tutorial-keycap, .tutorial-presentation-active .tutorial-mouse-button, .tutorial-presentation-active .tutorial-mouse {
  transform: translateY(var(--tutorial-key-y, 0px)) scale(var(--tutorial-key-scale, 1));
}
.tutorial-presentation-active .tutorial-mouse-cue { position: relative; }
.tutorial-presentation-active .tutorial-mouse-cue::after {
  content: ""; width: 10px; height: 14px; position: absolute; top: 5px; left: 34px; pointer-events: none;
  background: #eef2e9; clip-path: polygon(0 0, 100% 65%, 61% 68%, 80% 100%, 59% 100%, 39% 70%, 0 95%);
  transform: translate(var(--tutorial-cursor-x, 0px), var(--tutorial-cursor-y, -2px));
}
.tutorial-marker-brackets { position: absolute; pointer-events: none; inset: calc(-1 * var(--tutorial-bracket-gap, 9px)); color: inherit; background: linear-gradient(currentColor,currentColor) top left / 7px 2px no-repeat, linear-gradient(currentColor,currentColor) top left / 2px 7px no-repeat, linear-gradient(currentColor,currentColor) top right / 7px 2px no-repeat, linear-gradient(currentColor,currentColor) top right / 2px 7px no-repeat, linear-gradient(currentColor,currentColor) bottom left / 7px 2px no-repeat, linear-gradient(currentColor,currentColor) bottom left / 2px 7px no-repeat, linear-gradient(currentColor,currentColor) bottom right / 7px 2px no-repeat, linear-gradient(currentColor,currentColor) bottom right / 2px 7px no-repeat; }
.tutorial-marker-distance { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); font: 10px/1 monospace; color: #f5ecd2; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.tutorial-presentation-active .tutorial-world-marker.waypoint { box-shadow: 0 0 calc(8px + var(--tutorial-marker-pulse, 0) * 9px) rgba(255,209,102,.25); }
.tutorial-presentation-active .tutorial-world-marker.offscreen { translate: calc(cos(var(--marker-angle)) * var(--tutorial-marker-nod, 0px)) calc(sin(var(--marker-angle)) * var(--tutorial-marker-nod, 0px)); }
.tutorial-world-marker.offscreen .tutorial-marker-brackets { display: none; }
.tutorial-learned-skills { display: flex; flex-wrap: wrap; gap: 4px 9px; padding-top: 9px; }
.tutorial-learned-skills span { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #7b8c94; }
.tutorial-learned-skills span::before { content: "◇"; color: #60747c; }
.tutorial-learned-skills span[data-skill="flight"]::before { content: "↗"; }
.tutorial-learned-skills span[data-skill="combat"]::before { content: "⌖"; }
.tutorial-learned-skills span[data-skill="service"]::before { content: "⚙"; }
.tutorial-learned-skills span[data-skill="build"]::before { content: "▦"; }
.tutorial-learned-skills span[data-skill="practice"]::before { content: "◎"; }
.tutorial-learned-skills span[data-complete="true"] { color: #d0e9df; }
.tutorial-learned-skills span[data-complete="true"]::before { color: #a9d7c4; }
.tutorial-learned-skills span[data-complete="true"]::after { content: "✓"; color: #a9d7c4; font-size: 8px; }
.tutorial-exit-confirm { margin-top: 10px; padding-top: 9px; border-top: 1px solid #596771; }
.tutorial-exit-choices { display: flex; gap: 6px; margin-top: 8px; }
.tutorial-exit-choices button { flex: 1; min-width: 0; min-height: 44px; padding: 6px; pointer-events: auto; border: 1px solid #718187; border-radius: 5px; background: #243640; color: #eff4f2; font-size: 11px; cursor: pointer; }
.tutorial-exit-choices button:last-child { color: #ffd9b0; border-color: #93795d; background: #3a2d23; }
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-guide-card { transform: none; }
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-world-marker.offscreen { translate: none; }
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-keycap,
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-mouse-button,
.tutorial-presentation-active[data-tutorial-motion="static"] .tutorial-mouse { transform: none; }
body.is-small-mobile .tutorial-presentation-active .tutorial-guide-card { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
body.is-small-mobile .tutorial-robot-canvas { width: 44px; height: 56px; }
body.is-small-mobile .tutorial-guide-speech { padding-top: 10px; }
body.is-small-mobile .tutorial-presentation-active .tutorial-guide-card b { font-size: 10px; }
body.is-small-mobile .tutorial-presentation-active #tutorialGuideText { font-size: 11px; line-height: 1.22; }
body.is-small-mobile .tutorial-guide-progress { font-size: 8px; }
body.is-small-mobile .tutorial-guide-reaction { max-width: 170px; padding: 5px 7px; font-size: 10px; }
body.is-small-mobile .tutorial-presentation-active .tutorial-guide-card .tutorial-guide-hint { margin-top: 5px; font-size: 10px; }
body.is-small-mobile .tutorial-learned-skills { gap: 3px 7px; }
body.is-small-mobile .tutorial-learned-skills span { font-size: 9px; }

/* Keep touch lessons beside the control instead of covering the playfield. */
body.is-small-mobile .tutorial-guide-card {
  box-sizing: border-box;
  width: min(236px, calc(100vw - 20px));
  max-width: var(--guide-width, calc(100vw - 20px));
  overflow-wrap: anywhere;
  padding: 5px 8px 6px 10px;
  border: 0;
  border-left: 3px solid #ffd166;
  border-radius: 2px;
  background: rgba(4, 7, 4, 0.84);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.48);
}

body.is-small-mobile .tutorial-guide-card b {
  display: inline;
  margin: 0 6px 0 0;
  color: #ffd166;
  font-size: 10px;
  letter-spacing: 0.035em;
}

body.is-small-mobile .tutorial-guide-card p {
  display: inline;
  color: #e3e9dc;
  font-size: 11px;
  line-height: 1.22;
}

.tutorial-guide-action {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(255, 209, 102, 0.62);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(134, 98, 32, 0.96), rgba(80, 59, 24, 0.92));
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
  pointer-events: auto;
}

@media (pointer: coarse) {
  .tutorial-guide-action,
  .tutorial-exit-button {
    min-height: 44px;
  }
}

.tutorial-desktop-cue {
  margin-top: 12px;
}

.tutorial-key-cue,
.tutorial-mouse-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tutorial-keycap,
.tutorial-mouse-button {
  min-width: 34px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 209, 102, 0.48);
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.18);
  font-size: 12px;
  font-weight: 1000;
}

.tutorial-key-status {
  min-width: 74px;
  min-height: 54px;
  gap: 2px;
  position: relative;
  padding: 6px 8px;
}

.tutorial-key-status::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 5px;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(244, 247, 239, 0.32);
  border-radius: 50%;
  background: rgba(6, 7, 6, 0.62);
}

.tutorial-key-status.complete {
  border-color: rgba(128, 240, 91, 0.78);
  background: rgba(128, 240, 91, 0.14);
  color: var(--green);
}

.tutorial-key-status.complete::after {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: rgba(128, 240, 91, 0.82);
  background: rgba(128, 240, 91, 0.24);
  color: var(--green);
  font-size: 10px;
  line-height: 1;
}

.tutorial-key-status b {
  font-size: 15px;
  line-height: 1;
}

.tutorial-key-status small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Keep the compact tutorial keys legible under the production orbital theme. */
.tutorial-presentation-active .tutorial-guide-card .tutorial-keycap {
  color: #172d3a;
  background: #dce7e9;
  border-color: #8ba0aa;
  box-shadow: 0 2px 0 #708c99;
}
.tutorial-presentation-active .tutorial-guide-card .tutorial-keycap b {
  color: inherit;
  margin: 0;
  font-size: 15px;
  line-height: 1;
}
.tutorial-presentation-active .tutorial-guide-card .tutorial-keycap small { color: #344e5d; }
.tutorial-presentation-active .tutorial-guide-card .tutorial-keycap.complete {
  color: #243b1e;
  background: #b8e686;
  border-color: #92bb6b;
  box-shadow: 0 2px 0 #638347;
}
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) > .tutorial-key-status {
  min-width: 0;
  min-height: 46px;
  padding: 5px 4px;
}
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) > :nth-child(1) { grid-column: 2; }
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) > :nth-child(2) { grid-column: 1; grid-row: 2; }
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) > :nth-child(3) { grid-column: 2; grid-row: 2; }
.tutorial-presentation-active .tutorial-guide-card .tutorial-key-cue:has(> .tutorial-key-status:nth-child(4):last-child) > :nth-child(4) { grid-column: 3; grid-row: 2; }

.tutorial-secondary-key {
  min-width: 92px;
  border-color: rgba(255, 209, 102, 0.64);
}

.tutorial-keycap.wide,
.tutorial-mouse-button.wide {
  min-width: 52px;
}

.tutorial-mouse {
  width: 40px;
  height: 58px;
  position: relative;
  border: 2px solid rgba(255, 209, 102, 0.66);
  border-radius: 18px;
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.2);
}

.tutorial-mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 18px;
  background: rgba(255, 209, 102, 0.66);
  transform: translateX(-50%);
}

.tutorial-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd166;
  transform: translateX(-50%);
}

.tutorial-exit-button {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  z-index: 12030;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background: rgba(8, 9, 9, 0.86);
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
}

body.tutorial-crosshair #game {
  cursor: crosshair;
}

.tutorial-guide-arrow {
  position: fixed;
  left: var(--arrow-x, 50%);
  top: var(--arrow-y, 50%);
  width: var(--arrow-length, 86px);
  height: 4px;
  border-radius: 999px;
  background: #ffd166;
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.62);
  transform-origin: 0 50%;
  transform: rotate(var(--arrow-angle, 0deg));
}

.tutorial-guide-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 4px solid #ffd166;
  border-top: 4px solid #ffd166;
  transform: translateY(-50%) rotate(45deg);
}

.tutorial-world-marker {
  position: fixed;
  left: var(--marker-x);
  top: var(--marker-y);
  width: var(--marker-size, 54px);
  height: var(--marker-size, 54px);
  display: grid;
  place-items: center;
  border: 2px solid #ffd166;
  border-radius: 50%;
  color: #ffd166;
  font-size: 12px;
  font-weight: 1000;
  background: rgba(255, 209, 102, 0.12);
  box-shadow:
    0 0 0 8px rgba(255, 209, 102, 0.08),
    0 0 28px rgba(255, 209, 102, 0.44);
  transform: translate(-50%, -50%);
}

.tutorial-world-marker.target {
  border-color: #ff5964;
  color: #ffbbc1;
  background: rgba(255, 89, 100, 0.12);
  box-shadow:
    0 0 0 8px rgba(255, 89, 100, 0.08),
    0 0 28px rgba(255, 89, 100, 0.44);
}

body.tutorial-lockdown .topbar-settings-button,
body.tutorial-lockdown .mobile-hud-options,
body.tutorial-lockdown .mobile-menu-button,
body.tutorial-lockdown .mobile-fullscreen-button,
body.tutorial-lockdown .mobile-ship-button,
body.tutorial-lockdown .mobile-menu-drawer,
body.tutorial-lockdown .mobile-ship-drawer,
body.tutorial-lockdown .mobile-menu-backdrop,
body.tutorial-lockdown .mobile-ship-backdrop,
body.tutorial-lockdown .actions,
body.tutorial-lockdown .leaderboard,
body.tutorial-lockdown .singleplayer-panel,
body.tutorial-lockdown:not(.tutorial-focus-map) .minimap {
  display: none !important;
}

/* Any world target that leaves the view becomes an edge pointer, not only the
   movement checkpoints. On touch the guide arrow is pinned to the control the
   player has to press, so this badge is the only thing aiming at the target. */
.tutorial-world-marker.offscreen {
  z-index: 5;
  width: 48px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(45, 39, 18, 0.98), rgba(10, 10, 7, 0.98));
  box-shadow:
    inset 0 0 0 3px #080907,
    0 0 0 2px rgba(255, 209, 102, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 209, 102, 0.34);
}

.tutorial-world-marker.target.offscreen {
  box-shadow:
    inset 0 0 0 3px #080907,
    0 0 0 2px rgba(255, 89, 100, 0.2),
    0 8px 22px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 89, 100, 0.38);
}

.tutorial-world-marker.offscreen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%) rotate(var(--marker-angle)) translateX(27px);
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(255, 209, 102, 0.62));
}

.tutorial-world-marker.target.offscreen::after {
  filter: drop-shadow(0 0 5px rgba(255, 89, 100, 0.66));
}

/* A thumb-held phone is further from the eye than a monitor, and the edge badge
   competes with the controls around it, so the touch build gets a larger pill
   and a longer arrow. */
@media (pointer: coarse) {
  .tutorial-world-marker.offscreen {
    width: 58px;
    height: 42px;
    border-radius: 9px;
  }

  .tutorial-world-marker.offscreen::after {
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(var(--marker-angle)) translateX(34px);
  }
}

.tutorial-ui-highlight {
  position: relative;
  z-index: 115 !important;
  border-color: rgba(255, 209, 102, 0.92) !important;
  outline: 3px solid rgba(255, 209, 102, 0.72);
  outline-offset: 5px;
  box-shadow:
    0 0 0 9px rgba(255, 209, 102, 0.14),
    0 0 34px rgba(255, 209, 102, 0.58) !important;
}

.builder-card.tutorial-ui-highlight,
.builder-tab.tutorial-ui-highlight {
  transform: translateY(-1px);
}

@media (max-height: 460px) and (orientation: landscape) {
  .onboarding-modal {
    align-items: flex-start;
    padding: 12px;
    overflow: auto;
  }

  .onboarding-card {
    width: min(640px, calc(100vw - 28px));
    padding: 16px 20px;
  }

  .onboarding-card h2 {
    margin: 4px 0 8px;
    font-size: 34px;
  }

  .onboarding-copy {
    margin-bottom: 12px;
    font-size: 13px;
  }

  .onboarding-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .onboarding-primary {
    grid-column: 1 / -1;
    min-height: 52px;
    font-size: 18px;
  }

  .onboarding-secondary {
    min-height: 52px;
    font-size: 17px;
  }

}

/* src/styles/account-settings.css */
/* Account, resource, settings, and username UI */
.control-mode-description {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.menu-account-rail {
  display: contents;
}

.auth-panel {
  max-width: calc(100vw - min(42vw, 280px) - 42px);
  flex-wrap: wrap;
}

.profile-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: min(310px, calc(100vw - 28px));
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 12, 10, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-align: left;
}

.profile-card > div {
  min-width: 0;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(128, 240, 91, 0.92), rgba(66, 217, 200, 0.72));
  color: #061006;
  font-weight: 900;
}

.profile-card strong,
.profile-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card strong {
  font-size: 13px;
}

.profile-card span {
  color: var(--muted);
  font-size: 11px;
}

.profile-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.profile-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-progress-row b {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
}

.profile-card .profile-progress-row span {
  font-size: 10px;
}

.profile-xp-track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(128, 240, 91, 0.22);
  border-radius: 999px;
  background: rgba(6, 7, 6, 0.72);
}

.profile-xp-track span {
  width: 0%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 12px rgba(128, 240, 91, 0.32);
  transition: width 160ms ease;
}

.resource-panel {
  max-width: min(42vw, 280px);
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 5;
  pointer-events: auto;
}

.resource-card {
  min-width: 132px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  max-width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(183, 237, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(183, 237, 255, 0.18), rgba(66, 217, 200, 0.08)),
    rgba(10, 12, 10, 0.82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  text-align: right;
  cursor: pointer;
}

.resource-card b {
  display: block;
  color: #eef9ff;
  font-size: 28px;
  min-width: 0;
  line-height: 1.05;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.daily-reward-hint {
  grid-column: 2;
  display: block;
  margin-top: 2px;
  color: var(--green);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  text-transform: lowercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

button.resource-card {
  appearance: none;
  color: inherit;
  font: inherit;
}

.icon-text-button {
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
}

.topbar-settings-button {
  margin-left: 8px;
  padding: 5px 8px;
  color: var(--green);
  font-size: 12px;
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: auto;
}

.settings-card {
  width: min(620px, calc(100vw - 36px));
  max-height: min(720px, calc(100svh - 36px));
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
}

.settings-head,
.settings-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-head h2,
.settings-section-title h3,
.settings-section-title p {
  margin: 0;
}

.settings-head h2 {
  font-size: 20px;
}

.settings-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-right: 4px;
}

.settings-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.13);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.46);
}

.settings-section-title h3 {
  color: var(--green);
  font-size: 15px;
}

.settings-section-title p {
  color: var(--muted);
  font-size: 12px;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 239, 0.1);
  border-radius: 8px;
  background: rgba(12, 16, 16, 0.72);
  font-weight: 800;
}

.settings-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}

.settings-select {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 239, 0.1);
  border-radius: 8px;
  background: rgba(9, 11, 10, 0.46);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.settings-select select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(128, 240, 91, 0.28);
  border-radius: 8px;
  background: rgba(4, 6, 5, 0.88);
  color: var(--ink);
  font: inherit;
}

.mobile-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-mode-button {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 900;
}

.mobile-mode-button.active {
  border-color: rgba(128, 240, 91, 0.54);
  color: var(--green);
  background: rgba(38, 67, 43, 0.62);
}

.mobile-control-editor {
  display: grid;
  gap: 10px;
}

.mobile-control-editor.disabled {
  opacity: 0.48;
}

.settings-range {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 239, 0.1);
  border-radius: 8px;
  background: rgba(9, 11, 10, 0.46);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.settings-range span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.settings-range b {
  color: var(--green);
}

.settings-range input {
  width: 100%;
  accent-color: var(--green);
}

.keybind-list {
  display: grid;
  gap: 8px;
}

.keybind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, auto);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(244, 247, 239, 0.1);
  border-radius: 8px;
  background: rgba(12, 16, 16, 0.72);
}

.keybind-label {
  min-width: 0;
  font-weight: 800;
}

.keybind-button {
  min-height: 34px;
  padding: 7px 10px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.keybind-button.listening {
  border-color: rgba(240, 198, 77, 0.8);
  color: var(--amber);
}

.settings-reset-button {
  min-height: 38px;
  color: var(--muted);
  font-weight: 900;
}

.danger-action-button {
  border-color: rgba(255, 89, 100, 0.48);
  color: #ffb0b7;
}

.sound-test-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: auto;
}

.sound-test-card {
  width: min(520px, calc(100vw - 36px));
  max-height: min(700px, calc(100svh - 36px));
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
}

.sound-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sound-test-head h2 {
  margin: 0;
  font-size: 20px;
}

.sound-test-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-right: 4px;
}

.sound-test-button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(24, 30, 29, 0.92), rgba(9, 12, 12, 0.88)),
    rgba(10, 12, 10, 0.78);
  overflow-wrap: anywhere;
  color: var(--cyan);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.sound-test-button:hover,
.sound-test-button:focus-visible {
  border-color: rgba(66, 217, 200, 0.5);
  background:
    linear-gradient(180deg, rgba(34, 48, 47, 0.96), rgba(13, 19, 18, 0.92)),
    rgba(10, 12, 10, 0.86);
  color: var(--ink);
}

.sound-test-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sound-test-repeat-badge {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 3px 7px;
  border: 1px solid rgba(240, 198, 77, 0.42);
  border-radius: 999px;
  background: rgba(240, 198, 77, 0.12);
  color: var(--amber);
  text-align: center;
  font-size: 10px;
  line-height: 1;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}

.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}

.menu-modal-card {
  width: min(560px, calc(100vw - 36px));
  min-height: min(360px, calc(100svh - 36px));
  max-height: calc(100svh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
}

.menu-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalog-modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.catalog-modal-card > .menu-modal-head {
  flex-shrink: 0;
}

.menu-modal-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-modal-head h2 {
  margin: 0;
  font-size: 20px;
}

.menu-modal-empty {
  min-height: 280px;
  margin-top: 14px;
  border: 1px dashed rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.36);
}

.username-modal {
  z-index: 146;
}

.username-card {
  min-height: 0;
  display: grid;
  gap: 14px;
}

.username-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.username-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.username-field input {
  min-height: 48px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.82);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.username-status {
  min-height: 18px;
  margin: 0;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
}

.developer-thanks-modal {
  z-index: 154;
  background: radial-gradient(circle at 50% 35%, rgba(49, 129, 169, 0.2), rgba(0, 0, 0, 0.78) 62%);
}

.developer-thanks-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 28px;
  border-color: rgba(116, 216, 255, 0.46);
  background:
    linear-gradient(145deg, rgba(18, 43, 51, 0.98), rgba(7, 12, 17, 0.98) 62%),
    var(--panel-strong);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.68), inset 0 0 52px rgba(62, 193, 255, 0.08);
}

.developer-thanks-stars {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 12%, #8ee7ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 62%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 20% 78%, #8ee7ff 0 1px, transparent 1.5px);
}

.developer-thanks-eyebrow,
.developer-thanks-signature,
.developer-thanks-letter,
.developer-thanks-card h2,
.developer-thanks-reward,
.developer-thanks-accept {
  position: relative;
}

.developer-thanks-eyebrow {
  margin: 0 0 8px;
  color: #78dcff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.developer-thanks-card h2 {
  margin: 0 0 18px;
  color: #f4fbff;
  font-size: clamp(24px, 4vw, 34px);
}

.developer-thanks-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 196, 86, 0.42);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 176, 42, 0.12), rgba(255, 223, 145, 0.04));
  color: #d6e4e9;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.developer-thanks-reward strong {
  color: #ffd878;
  font-size: 24px;
  letter-spacing: 0.03em;
  text-shadow: 0 0 20px rgba(255, 196, 86, 0.35);
}

.developer-thanks-letter {
  color: #c9d8dc;
  line-height: 1.62;
}

.developer-thanks-letter p {
  margin: 0 0 11px;
}

.developer-thanks-letter small {
  color: #7f999f;
}

.developer-thanks-signature {
  margin: 16px 0 20px;
  color: #9ddff2;
  font-style: italic;
  text-align: right;
}

.developer-thanks-accept {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(123, 224, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, #1685a9, #0b5570);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.developer-thanks-accept:hover,
.developer-thanks-accept:focus-visible {
  filter: brightness(1.13);
  outline: 2px solid rgba(138, 230, 255, 0.45);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .developer-thanks-card {
    width: min(94vw, 520px);
    padding: 20px;
  }

  .developer-thanks-reward {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-height: 500px) {
  .developer-thanks-modal {
    align-items: flex-start;
    padding: 8px;
  }

  .developer-thanks-card {
    width: min(700px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    padding: 14px 18px;
    overflow-y: auto;
  }

  .developer-thanks-eyebrow {
    margin-bottom: 3px;
    font-size: 9px;
  }

  .developer-thanks-card h2 {
    margin-bottom: 8px;
    font-size: 22px;
  }

  .developer-thanks-reward {
    margin-bottom: 8px;
    padding: 8px 12px;
  }

  .developer-thanks-reward strong {
    font-size: 20px;
  }

  .developer-thanks-letter {
    font-size: 13px;
    line-height: 1.38;
  }

  .developer-thanks-letter p {
    margin-bottom: 6px;
  }

  .developer-thanks-signature {
    margin: 6px 0 8px;
    font-size: 13px;
  }

  .developer-thanks-accept {
    min-height: 40px;
  }
}

/* src/styles/shop-legal.css */
/* Shop, cosmetics, reports, legal, and profile modal UI */
.username-submit-button {
  min-height: 52px;
  border: 1px solid rgba(128, 240, 91, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(65, 104, 51, 0.94), rgba(38, 66, 33, 0.9));
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
}

.monetization-panel {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.monetization-block {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.monetization-block h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.platinum-pack-grid,
.ad-reward-grid {
  display: grid;
  gap: 8px;
}

.platinum-pack-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ad-reward-grid {
  grid-template-columns: minmax(0, 1fr);
}

.platinum-pack-card,
.ad-reward-card,
.daily-reward-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(34px, 1fr) auto;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 23, 20, 0.84), rgba(7, 9, 8, 0.72)),
    rgba(8, 10, 9, 0.74);
}

.platinum-pack-card h3,
.platinum-pack-card p,
.ad-reward-card h3,
.ad-reward-card p,
.daily-reward-card h3,
.daily-reward-card p {
  min-width: 0;
  margin: 0;
}

.platinum-pack-card h3,
.ad-reward-card h3,
.daily-reward-card h3 {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.15;
}

.platinum-pack-card strong,
.ad-reward-card strong,
.daily-reward-card strong {
  color: var(--green);
  font-size: 16px;
  line-height: 1.1;
}

.daily-reward-card {
  border-color: rgba(128, 240, 91, 0.34);
}

.platinum-pack-card p,
.ad-reward-card p,
.daily-reward-card p,
.monetization-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.monetization-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(244, 247, 239, 0.14);
  border-radius: 8px;
}

.monetization-action {
  min-height: 34px;
  border: 1px solid rgba(128, 240, 91, 0.44);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(64, 96, 51, 0.92), rgba(33, 55, 29, 0.9));
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.monetization-action:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.52;
}

.monetization-status {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.shop-tab {
  min-height: 42px;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  background: rgba(9, 11, 10, 0.72);
  color: var(--muted);
  cursor: pointer;
  font-weight: 950;
}

.shop-tab.selected {
  border-color: rgba(128, 240, 91, 0.58);
  background: linear-gradient(180deg, rgba(50, 82, 42, 0.88), rgba(18, 30, 18, 0.82));
  color: var(--ink);
}

.shop-tab-panel {
  min-height: 0;
}

.shop-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-card {
  min-height: 230px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--item-color), transparent 78%), transparent 34%),
    rgba(6, 7, 6, 0.56);
}

.shop-card.unavailable {
  filter: grayscale(1);
  opacity: 0.52;
}

.shop-card h3,
.shop-card p {
  margin: 0;
}

.shop-card h3 {
  font-size: 15px;
  line-height: 1.1;
}

.shop-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.shop-meta {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.shop-buy-button {
  min-height: 40px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  color: #141712;
  background: linear-gradient(180deg, #f4f7ef, #9fb9a2);
  font-weight: 1000;
  cursor: pointer;
}

.shop-buy-button:disabled {
  cursor: not-allowed;
  color: rgba(244, 247, 239, 0.42);
  background: rgba(244, 247, 239, 0.08);
}

.shop-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.cosmetics-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cosmetic-card {
  min-height: 184px;
  display: grid;
  grid-template-rows: 128px auto auto auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 16%, color-mix(in srgb, var(--skin-accent), transparent 68%), transparent 32%),
    rgba(6, 7, 6, 0.56);
  color: var(--ink);
  text-align: left;
}

.cosmetic-card.active {
  border-color: var(--skin-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--skin-primary), transparent 62%);
}

.cosmetic-card.locked {
  border-color: rgba(240, 198, 77, 0.28);
}

.cosmetic-card h3,
.cosmetic-card p {
  margin: 0;
}

.cosmetic-ship-preview {
  width: min(128px, 100%);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background: rgba(4, 6, 6, 0.36);
}

.cosmetic-card h3 {
  font-size: 15px;
  line-height: 1.1;
}

.cosmetic-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.cosmetic-equip-button {
  min-height: 38px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  color: #141712;
  background: linear-gradient(180deg, #f4f7ef, #9fb9a2);
  font-weight: 1000;
  cursor: pointer;
}

.cosmetic-equip-button:disabled {
  cursor: default;
  color: var(--green);
  background: rgba(128, 240, 91, 0.12);
}

.cosmetics-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.legal-corner-button {
  position: fixed;
  right: 14px;
  bottom: 10px;
  z-index: 5;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(6, 7, 6, 0.56);
  font-size: 11px;
  font-weight: 800;
  pointer-events: auto;
  cursor: pointer;
}

.support-corner-button {
  position: fixed;
  left: 14px;
  bottom: 10px;
  z-index: 5;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(6, 7, 6, 0.56);
  font-size: 11px;
  font-weight: 800;
  pointer-events: auto;
  cursor: pointer;
}

.legal-corner-button:hover {
  color: var(--text);
  border-color: rgba(244, 247, 239, 0.28);
}

.support-corner-button:hover {
  color: var(--text);
  border-color: rgba(244, 247, 239, 0.28);
}

.legal-modal-card {
  width: min(680px, calc(100vw - 36px));
  min-height: 0;
  max-height: calc(100svh - 36px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.legal-copy {
  min-height: 0;
  margin-top: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 14px;
  padding-right: 4px;
}

.legal-copy section {
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.48);
}

.legal-copy h3,
.legal-copy p {
  margin: 0;
}

.legal-copy h3 {
  font-size: 16px;
}

.legal-copy p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.legal-copy a {
  color: var(--green);
  font-weight: 800;
}

.account-notice-card {
  min-height: 0;
}

.account-notice-copy {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.account-notice-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.account-notice-copy a {
  color: var(--green);
  font-weight: 800;
}

.report-modal-card {
  width: min(460px, calc(100vw - 36px));
}

.report-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.report-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.report-form input,
.report-form select,
.report-form textarea {
  min-height: 40px;
  width: 100%;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 8px;
  color: var(--text);
  background: rgba(6, 7, 6, 0.62);
  font: inherit;
  font-size: 13px;
}

.report-form input,
.report-form select {
  padding: 0 10px;
}

.report-form textarea {
  min-height: 130px;
  resize: vertical;
  padding: 10px;
}

.report-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.feedback-report-card {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: rgba(100, 238, 177, 0.24);
  background:
    radial-gradient(circle at 8% 0%, rgba(78, 220, 157, 0.13), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(84, 176, 255, 0.1), transparent 30%),
    rgba(10, 14, 12, 0.97);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(91, 255, 184, 0.04) inset;
}

.feedback-report-head {
  align-items: flex-start;
}

.feedback-report-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.feedback-report-heading h2,
.feedback-report-heading p {
  margin: 0;
}

.feedback-report-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feedback-report-mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(105, 255, 190, 0.42);
  border-radius: 14px;
  color: #d8ffe9;
  background: linear-gradient(145deg, rgba(74, 224, 153, 0.34), rgba(68, 153, 255, 0.16));
  box-shadow: 0 0 24px rgba(76, 222, 157, 0.16);
  font-size: 20px;
}

.feedback-report-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.feedback-report-intro {
  margin: 0;
  color: rgba(232, 245, 237, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-kind-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-kind-selector legend,
.feedback-message-field > span {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 7px;
  color: rgba(230, 244, 235, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.feedback-kind-option {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid rgba(235, 246, 239, 0.13);
  border-radius: 13px;
  background: rgba(4, 8, 6, 0.52);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.feedback-kind-option:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 239, 180, 0.32);
  background: rgba(16, 32, 24, 0.7);
}

.feedback-kind-option:has(input:checked) {
  border-color: rgba(94, 241, 173, 0.72);
  background: linear-gradient(135deg, rgba(54, 177, 117, 0.2), rgba(38, 99, 89, 0.16));
  box-shadow: 0 0 0 1px rgba(93, 243, 174, 0.1) inset, 0 10px 30px rgba(0, 0, 0, 0.16);
}

.feedback-kind-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-kind-option:focus-within {
  outline: 2px solid rgba(142, 255, 205, 0.84);
  outline-offset: 2px;
}

.feedback-kind-icon,
.feedback-context-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #bfffdc;
  background: rgba(90, 228, 163, 0.13);
  font-size: 17px;
  font-weight: 900;
}

.feedback-kind-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.feedback-kind-copy strong,
.feedback-context-copy strong {
  color: var(--text);
  font-size: 13px;
}

.feedback-kind-copy small,
.feedback-context-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.feedback-message-field {
  display: grid;
}

.feedback-message-field textarea {
  min-height: 132px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(235, 246, 239, 0.16);
  border-radius: 12px;
  color: var(--text);
  background: rgba(3, 7, 5, 0.68);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  user-select: text !important;
}

.feedback-message-field textarea:focus {
  border-color: rgba(97, 239, 175, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(70, 214, 149, 0.11);
}

.feedback-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  padding: 12px;
  border: 1px solid rgba(126, 188, 255, 0.18);
  border-radius: 13px;
  background: rgba(42, 86, 108, 0.11);
}

.feedback-context-copy {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.feedback-context-copy > div {
  display: grid;
  gap: 3px;
}

.feedback-context-toggle {
  position: relative;
  align-self: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.feedback-context-toggle input {
  position: absolute;
  opacity: 0;
}

.feedback-context-toggle > span[aria-hidden="true"] {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(238, 247, 242, 0.18);
  border-radius: 999px;
  background: rgba(5, 8, 7, 0.72);
  transition: background 140ms ease, border-color 140ms ease;
}

.feedback-context-toggle > span[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(226, 237, 231, 0.78);
  transition: transform 140ms ease, background 140ms ease;
}

.feedback-context-toggle input:checked + span {
  border-color: rgba(85, 235, 168, 0.68);
  background: rgba(42, 183, 113, 0.46);
}

.feedback-context-toggle input:checked + span::after {
  transform: translateX(20px);
  background: #d9ffea;
}

.feedback-context-toggle:focus-within {
  outline: 2px solid rgba(142, 255, 205, 0.84);
  outline-offset: 2px;
  border-radius: 999px;
}

.feedback-context-summary {
  grid-column: 1 / -1;
  min-height: 29px;
  padding: 7px 9px;
  overflow: hidden;
  border-radius: 8px;
  color: rgba(183, 225, 255, 0.84);
  background: rgba(3, 12, 18, 0.52);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-context-summary.is-disabled {
  color: var(--muted);
  font-family: inherit;
}

.feedback-report-status[data-tone="success"] { color: #8effbd; }
.feedback-report-status[data-tone="error"] { color: #ff9b9b; }
.feedback-report-status[data-tone="pending"] { color: #9ed7ff; }

.feedback-report-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.feedback-submit-button,
.feedback-secondary-button {
  min-height: 44px;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.feedback-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(102, 255, 185, 0.66);
  color: #07120c;
  background: linear-gradient(135deg, #7af0ad, #5fd6c5);
  box-shadow: 0 8px 24px rgba(50, 205, 139, 0.18);
}

.feedback-submit-button:hover { filter: brightness(1.07); }
.feedback-submit-button:disabled { opacity: 0.55; cursor: wait; }

.feedback-secondary-button {
  padding: 0 13px;
  border: 1px solid rgba(237, 246, 241, 0.15);
  color: rgba(226, 239, 231, 0.82);
  background: rgba(5, 9, 7, 0.54);
}

.feedback-secondary-button:hover {
  border-color: rgba(237, 246, 241, 0.28);
  color: var(--text);
}

.feedback-report-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.feedback-report-help a {
  color: #83e6b3;
  font-weight: 900;
}

@media (max-width: 620px) {
  .feedback-report-card { width: min(94vw, 620px); }
  .feedback-kind-selector,
  .feedback-report-actions { grid-template-columns: 1fr; }
  .feedback-kind-option { min-height: 66px; }
  .feedback-secondary-button { min-height: 40px; }
}

.legal-page {
  min-height: 100%;
  height: auto;
  overflow: auto;
}

.legal-page-main {
  width: min(880px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.legal-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.legal-page-nav a,
.legal-page-main a {
  color: var(--green);
  font-weight: 800;
}

.legal-page-nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.54);
  text-decoration: none;
}

.legal-page-main h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
}

.legal-page-updated {
  margin: 8px 0 24px;
  color: var(--muted);
  font-weight: 800;
}

.legal-page-main section {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.58);
}

.legal-page-main h2,
.legal-page-main p {
  margin: 0;
}

.legal-page-main h2 {
  color: var(--green);
  font-size: 18px;
}

.legal-page-main p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.profile-modal-card {
  width: min(430px, calc(100vw - 36px));
  max-height: calc(100svh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
}

.profile-modal-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-modal-head {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.profile-modal-head > div:not(.profile-avatar) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-avatar-large {
  width: 48px;
  height: 48px;
}

.profile-modal h2,
.profile-modal p,
.profile-stats {
  margin: 0;
}

.profile-modal h2 {
  font-size: 20px;
}

.profile-modal p {
  color: var(--muted);
  font-size: 13px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.profile-stats div {
  padding: 10px;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.58);
}

.profile-stats dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.profile-stats dd {
  margin: 5px 0 0;
  color: var(--green);
  font-size: 18px;
  font-weight: 900;
}

.profile-save-status {
  margin-top: 12px;
  min-height: 18px;
}

.profile-logout-button {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(255, 89, 100, 0.42);
  border-radius: 8px;
  background: rgba(60, 16, 20, 0.72);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 10px;
}

/* src/styles/start-menu.css */
/* Start side panels, default ship editor, inventory, and menu buttons */
/* A narrow mouse-operated window still needs the account menu routes. */
@media (max-width: 760px) and (pointer: fine) {
  body:not(.is-small-mobile) #startScreen .start-layout {
    width: calc(100vw - 36px);
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
  }
  body:not(.is-small-mobile) #startScreen .menu-side-panel {
    display: grid;
  }
}

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
}

.start-layout {
  pointer-events: none;
  width: min(1040px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(340px, 400px) minmax(160px, 1fr);
  align-items: stretch;
  gap: 18px;
}

.start-side-panel {
  pointer-events: auto;
  min-height: 470px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 21, 18, 0.82), rgba(8, 10, 8, 0.62)),
    rgba(6, 7, 6, 0.58);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
}

.default-ship-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 16px;
}

.default-ship-preview,
.default-ship-editor-shell {
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 10, 8, 0.72), rgba(3, 4, 4, 0.54)),
    rgba(6, 7, 6, 0.48);
  overflow: hidden;
}

#defaultShipCanvas,
#defaultShipEditorCanvas {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  display: block;
}

#defaultShipEditorCanvas {
  aspect-ratio: 1;
  max-width: 380px;
}

.default-ship-edit-button {
  min-height: 112px;
}

.default-ship-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.default-ship-status.login-required {
  min-height: 44px;
  color: #ffffff;
  font-size: clamp(15px, 1.45vw, 22px);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.default-ship-modal-card {
  width: min(920px, calc(100vw - 36px));
  min-height: min(680px, calc(100svh - 36px));
  max-height: calc(100svh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: auto;
}

.default-ship-editor-shell {
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 360px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 560px;
  margin-top: 14px;
  padding: 14px;
  overflow: visible;
}

.default-ship-editor-shell #defaultShipEditorCanvas {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: stretch;
  height: auto;
  max-width: none;
  max-height: min(560px, calc(100svh - 170px));
  aspect-ratio: 1;
  border: 1px solid rgba(128, 240, 91, 0.16);
  border-radius: 8px;
  background: rgba(5, 7, 7, 0.86);
}

.default-ship-module-palette {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding-right: 4px;
}

.default-ship-module-palette button,
.default-ship-reset-button,
.default-ship-save-button {
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.default-ship-module-palette button {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 72px;
  border: 1px solid rgba(244, 247, 239, 0.16);
  background:
    linear-gradient(180deg, rgba(16, 20, 20, 0.96), rgba(9, 12, 12, 0.92)),
    rgba(15, 18, 15, 0.78);
  font-size: 12px;
  text-align: left;
  padding: 8px;
}

.default-ship-module-preview {
  width: 56px;
  height: 46px;
  display: block;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 6px;
  background: rgba(5, 7, 7, 0.84);
}

.default-ship-module-palette button span {
  min-width: 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.default-ship-module-palette button.selected {
  border-color: rgba(128, 240, 91, 0.68);
  background: linear-gradient(180deg, rgba(55, 82, 45, 0.9), rgba(24, 35, 22, 0.9));
  box-shadow: inset 0 0 0 1px rgba(128, 240, 91, 0.18);
}

.default-ship-editor-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.default-ship-reset-button {
  min-height: 48px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  background: rgba(10, 12, 10, 0.82);
}

.default-ship-editor-copy {
  display: grid;
  gap: 4px;
}

.default-ship-limit-text,
.default-ship-editor-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.default-ship-limit-text {
  color: var(--cyan);
  font-size: 13px;
}

/* Default-loadout editing reuses the in-game service-bay composition while
   keeping its profile persistence logic independent from live build messages. */
.default-ship-service-modal {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #020402;
}

.default-ship-service-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(300px, 1fr) minmax(190px, 250px);
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

.default-ship-dock-builder {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 22px 16px 18px;
  overflow: hidden;
}

.default-ship-builder-header {
  margin: 0;
}

.default-ship-builder-header h2,
.default-ship-builder-header p {
  margin: 0;
}

.default-ship-builder-header p {
  margin-top: 4px;
  font-size: 11px;
}

.default-ship-dock-builder .default-ship-module-palette {
  min-height: 0;
  max-height: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px 8px 24px 4px;
}

.default-ship-bay-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.default-ship-bay-stage #defaultShipEditorCanvas {
  width: min(76vmin, 760px);
  height: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100svh - 32px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: #030504;
}

.default-ship-capacity-panel {
  position: relative;
  z-index: 3;
  align-self: start;
  display: grid;
  gap: 8px;
  margin: 82px 18px 0 0;
  padding: 18px 16px;
}

.default-ship-capacity-panel small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.default-ship-capacity-panel .default-ship-limit-text,
.default-ship-capacity-panel .default-ship-editor-hint {
  text-align: left;
}

.default-ship-capacity-panel .default-ship-limit-text {
  font-size: 18px;
}

.default-ship-save-button {
  z-index: 8;
}

.menu-side-panel {
  display: grid;
  grid-template-rows: repeat(3, 104px) 92px;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.main-menu-button,
.booster-row button {
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28, 33, 28, 0.88), rgba(10, 12, 10, 0.76)),
    rgba(10, 12, 10, 0.74);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

.main-menu-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 104px;
  text-align: left;
}

.main-menu-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 32%);
  opacity: 0.44;
  pointer-events: none;
}

.main-menu-label {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 23px;
  line-height: 1;
}

.main-menu-button:hover,
.booster-row button:hover {
  border-color: rgba(183, 237, 255, 0.54);
  background: rgba(22, 30, 30, 0.78);
}

.booster-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.booster-row button {
  min-height: 108px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background:
    linear-gradient(180deg, rgba(25, 31, 31, 0.96), rgba(8, 10, 10, 0.84)),
    rgba(10, 12, 10, 0.74);
}

.item-slot-row button {
  position: relative;
  grid-template-rows: auto minmax(36px, 1fr) auto auto;
  gap: 5px;
  overflow: hidden;
  padding: 8px 7px;
  isolation: isolate;
}

.item-slot-row button::before,
.item-slot-row button::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.item-slot-row button::before {
  inset: 10px 5px;
  border: 1px solid color-mix(in srgb, var(--slot-color, #8bd4ff) 55%, transparent);
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--slot-color, #8bd4ff) 24%, transparent) 10% 12%, transparent 12% 22%, color-mix(in srgb, var(--slot-color, #8bd4ff) 18%, transparent) 22% 24%, transparent 24%),
    rgba(5, 8, 8, 0.48);
}

.item-slot-row button::after {
  inset: 17px 2px;
  background:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--slot-color, #8bd4ff) 65%, transparent) 0 4px, transparent 4px 10px) left / 4px 100% no-repeat,
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--slot-color, #8bd4ff) 65%, transparent) 0 4px, transparent 4px 10px) right / 4px 100% no-repeat;
  opacity: 0.74;
}

.item-slot-row button.active {
  border-color: rgba(128, 240, 91, 0.72);
  background:
    linear-gradient(180deg, rgba(42, 72, 40, 0.92), rgba(11, 18, 12, 0.82)),
    rgba(10, 12, 10, 0.74);
}

.item-slot-key {
  justify-self: start;
  color: var(--slot-color, var(--muted));
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.item-slot-icon {
  width: 44px;
  height: 34px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(244, 247, 239, 0.48) 16% 20%, transparent 20% 80%, rgba(244, 247, 239, 0.48) 80% 84%, transparent 84%),
    radial-gradient(circle at 50% 50%, var(--slot-glow, #d8f3ff) 0 18%, var(--slot-color, #8bd4ff) 19% 42%, rgba(3, 5, 5, 0.94) 43%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--slot-color, #8bd4ff) 42%, transparent);
}

.item-slot-name {
  min-width: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.item-slot-count {
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
}

.item-slot-row button.empty {
  filter: grayscale(1);
  opacity: 0.5;
}

.item-slot-row button:disabled {
  cursor: not-allowed;
}

.inventory-modal-card {
  width: min(760px, calc(100vw - 36px));
  min-height: 0;
  max-height: calc(100svh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.inventory-shell {
  min-height: 0;
  margin-top: 14px;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.38fr);
  gap: 12px;
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.inventory-grid {
  min-height: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding-right: 4px;
}

.inventory-card {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 18%, rgba(244, 247, 239, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(16, 20, 20, 0.94), rgba(8, 10, 10, 0.94));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.inventory-card.selected,
.inventory-card.active {
  border-color: var(--item-color);
}

.inventory-card.active::after {
  content: "ACTIVE";
  position: absolute;
  right: 8px;
  top: 8px;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}

.inventory-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--item-glow) 0 16%, var(--item-color) 17% 42%, transparent 43%),
    conic-gradient(from 0.1turn, var(--item-color), #f4f7ef, var(--item-color));
  box-shadow: 0 0 18px rgba(139, 212, 255, 0.32);
}

.inventory-card h3,
.inventory-detail h3,
.inventory-card p,
.inventory-detail p {
  margin: 0;
}

.inventory-card h3 {
  font-size: 14px;
  line-height: 1.1;
}

.inventory-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.inventory-count {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.inventory-detail {
  min-height: 260px;
  padding: 14px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.56);
}

.inventory-detail {
  display: grid;
  align-content: start;
  gap: 10px;
}

.inventory-detail h3 {
  font-size: 20px;
}

.inventory-detail p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.inventory-detail .inventory-item-icon {
  width: 58px;
  height: 58px;
}

/* src/styles/start-screen.css */
/* Start screen choices and launch controls */
.reddit-community-button {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #a65b40;
  border-radius: 8px;
  background: #26333e;
  box-shadow: 0 3px 0 #0a1620, inset 0 1px 0 #ffffff0d;
  color: #fff4ee;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  touch-action: manipulation;
}

.reddit-community-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.reddit-community-button:hover {
  border-color: #ff8559;
  background: #3b3738;
}

.reddit-community-button:focus-visible {
  outline: 3px solid #ffad8f;
  outline-offset: 3px;
}

.reddit-community-button:active {
  translate: 0 1px;
}

body.is-small-mobile .reddit-community-button {
  top: calc(env(safe-area-inset-top, 0px) + 116px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: auto;
  flex-direction: column;
  gap: 4px;
  width: 88px;
  min-height: 58px;
  padding: 7px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}

.start-panel {
  pointer-events: auto;
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(26, 31, 23, 0.96), rgba(12, 14, 11, 0.92)),
    radial-gradient(circle at top left, rgba(128, 240, 91, 0.12), transparent 42%);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.start-panel h1,
.start-panel p {
  margin: 0;
}

.start-panel h1 {
  font-size: 34px;
  line-height: 1;
}

.eyebrow {
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0;
}

.start-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.choice-field {
  position: relative;
}

.choice-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.choice-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
}

.server-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.room-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .room-choice-grid .choice-radio span {
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: normal;
}

.choice-radio {
  --choice-accent: var(--cyan);
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--choice-accent), transparent 44%);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--choice-accent), transparent 86%), rgba(7, 9, 9, 0.72)),
    rgba(7, 9, 9, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.start-panel .choice-radio {
  display: flex;
}

.choice-radio input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--choice-accent), white 12%);
  border-radius: 50%;
  appearance: none;
  background: rgba(6, 7, 6, 0.7);
  box-shadow: 0 0 0 2px rgba(6, 7, 6, 0.7);
}

.choice-radio span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-small-mobile .room-choice-grid,
body.small-mobile-landscape .room-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.is-small-mobile .room-choice-grid .choice-radio span,
body.small-mobile-landscape .room-choice-grid .choice-radio span {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.05;
}

@media (max-width: 900px) and (orientation: portrait) {
  .room-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-choice-grid .choice-radio span {
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.05;
  }
}

.choice-radio.selected,
.choice-radio:has(input:checked) {
  border-color: color-mix(in srgb, var(--choice-accent), white 10%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--choice-accent), transparent 68%), rgba(7, 9, 9, 0.64)),
    rgba(7, 9, 9, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px color-mix(in srgb, var(--choice-accent), transparent 74%);
}

.choice-radio.selected input,
.choice-radio:has(input:checked) input {
  background:
    radial-gradient(circle at 50% 50%, var(--choice-accent) 0 42%, transparent 44%),
    rgba(6, 7, 6, 0.8);
}

.choice-radio[data-choice-value=""],
.choice-radio[data-choice-value="auto"] {
  --choice-accent: #b7edff;
}

.choice-radio[data-choice-value="singleplayer"] {
  --choice-accent: #ffd166;
}

.choice-radio[data-choice-value="wss://euserver.spacestrike.io/ws"] {
  --choice-accent: #42d9c8;
}

.choice-radio[data-choice-value="wss://usserver.spacestrike.io/ws"] {
  --choice-accent: #ff5964;
}

.choice-radio[data-choice-value="127.0.0.1:5174"] {
  --choice-accent: #80f05b;
}

#serverChoiceGroup .choice-radio.server-under-maintenance {
  --choice-accent: #ffd45c;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 3px 6px;
  align-content: center;
  border-color: #d3ae47;
  color: #fff3c2;
  background: repeating-linear-gradient(135deg, #181b16 0 9px, #e0b944 9px 18px);
  box-shadow: inset 0 0 0 1px #151810, 0 2px 6px #0005;
  cursor: not-allowed;
}

.server-under-maintenance > span,
.server-under-maintenance .server-maintenance-label {
  padding: 2px 4px;
  border-radius: 3px;
  background: #10130feb;
  color: #fff3c2;
}

.server-under-maintenance .server-maintenance-label {
  grid-column: 2;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.server-under-maintenance input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.choice-radio[data-choice-value="ffa"] {
  --choice-accent: #80f05b;
}

.choice-radio[data-choice-tone="ffa"] {
  --choice-accent: #80f05b;
}

.choice-radio[data-choice-tone="teams"] {
  --choice-accent: #ff5964;
}

.choice-radio[data-choice-value="war"] {
  --choice-accent: #ff5964;
}

.choice-radio[data-choice-tone="war"] {
  --choice-accent: #ff5964;
}

.choice-radio[data-choice-value="pve"] {
  --choice-accent: #c77dff;
}

.choice-radio[data-choice-tone="coop"] {
  --choice-accent: #c77dff;
}

#playButton {
  border: 1px solid rgba(128, 240, 91, 0.72);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(71, 112, 55, 0.92), rgba(48, 78, 39, 0.9));
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 11px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#playButton:disabled {
  cursor: wait;
  opacity: 0.62;
}

#startStatus {
  color: var(--muted);
  font-size: 13px;
}


/* Menu-only AdSense unit. Lives inside #startScreen, so it is hidden during
   gameplay by the .hidden toggle. Renders only when an ad slot is configured. */
.menu-ad-slot {
  width: min(728px, 92%);
  margin: 14px auto 0;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.menu-ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}

/* src/styles/hud-overlays.css */
/* HUD, leaderboard, minimap, singleplayer, death, and victory UI */
.network-quality {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
  z-index: 145;
  pointer-events: auto;
  color: #bcd0ce;
}
.network-quality[hidden], .network-quality-help[hidden] { display: none; }
body.has-mobile-controls .network-quality { right: calc(env(safe-area-inset-right, 0px) + 136px); }
.network-quality .network-quality-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid #829a943d;
  border-radius: 4px;
  background: #081012d9;
  color: inherit;
  box-shadow: none;
  font: 10px/1.3 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  touch-action: manipulation;
}
.network-quality-readout b { font-weight: 600; }
.network-quality[data-tone="good"] b { color: #a6dac0; }
.network-quality[data-tone="fair"] b { color: #edcc85; }
.network-quality[data-tone="poor"] b { color: #ffa697; }
.network-quality-readout:focus-visible { outline: 2px solid #8bcacb; outline-offset: 2px; }
.network-quality-help {
  position: absolute;
  right: 0;
  bottom: 30px;
  width: min(290px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #67837e;
  border-radius: 5px;
  background: #0b1519fa;
  color: #d7e4df;
  font: 12px/1.55 system-ui, sans-serif;
  white-space: pre-line;
}
.lag-report-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #76968b55;
  border-radius: 8px;
  background: #152b2840;
}
.lag-report-card p, .lag-report-card small { margin: 0; color: #b3c3bd; font-size: 12px; line-height: 1.5; }
.lag-report-card .feedback-secondary-button { justify-self: start; }
body.is-small-mobile .lag-report-card { order: -1; }
.lag-report-toast {
  position: fixed;
  z-index: 155;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 5px 8px;
  border: 1px solid #698d81;
  border-radius: 5px;
  background: #0c1e1aee;
  color: #d8eee3;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: auto;
}
.lag-report-toast[hidden], .lag-report-toast button[hidden] { display: none; }
.lag-report-toast > span { min-width: 0; overflow-wrap: anywhere; }
.lag-report-toast button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #748a825c;
  border-radius: 3px;
  background: #172e29;
  color: #d8eee3;
  font-size: 10px;
  box-shadow: none;
  touch-action: manipulation;
}
body.has-mobile-controls .lag-report-toast { max-width: calc(100vw - 288px); }

.hud {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: 14px;
}

.spawn-protection-banner {
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 150;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(238, 246, 255, 0.14);
  color: #ffffff;
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.48), inset 0 0 12px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  animation: spawn-protection-blink 820ms steps(2, jump-none) infinite;
}

@keyframes spawn-protection-blink {
  0%, 100% { opacity: 0.44; }
  50% { opacity: 1; }
}

:root[data-ui-motion="reduced"] .spawn-protection-banner { animation: none; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .spawn-protection-banner { animation: none; opacity: 0.9; }
}
:root[data-scene-team-intro="active"] body.is-small-mobile .spawn-protection-banner {
  top: calc(env(safe-area-inset-top, 0px) + 98px);
}
:root[data-boss-hud="active"] .spawn-protection-banner {
  top: calc(var(--boss-hud-bottom) + 8px);
}
:root[data-scene-team-intro="active"][data-boss-hud="active"] body.is-small-mobile .spawn-protection-banner {
  top: calc(var(--boss-hud-bottom) + 8px);
}

/* The authoritative EMP timer is mirrored on the HUD by updateHud(). */
#hud[data-emp-lock]:not([data-emp-lock="0"])::after {
  content: "EMP LOCK // " attr(data-emp-lock) "s";
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  z-index: 25;
  box-sizing: border-box;
  width: 122px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 3px 8px;
  transform: translateX(-50%);
  border: 2px solid transparent;
  background: linear-gradient(#10212a, #10212a) padding-box,
    conic-gradient(#72daf1 calc(var(--emp-lock-ratio, 0) * 1turn), #315363 0) border-box;
  color: #b6efff;
  font: 800 10px/1.1 var(--arcology-font, ui-monospace, monospace);
  letter-spacing: .04em;
  pointer-events: none;
}

#mobileBombButton[data-emp-lock]:not([data-emp-lock="0"])::before {
  content: attr(data-emp-lock) "s";
  position: absolute;
  inset: -3px;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 3px solid transparent;
  border-radius: inherit;
  background: linear-gradient(#10212ae8, #10212ae8) padding-box,
    conic-gradient(#72daf1 calc(var(--emp-lock-ratio, 0) * 1turn), #315363 0) border-box;
  color: #b6efff;
  font: 900 12px/1 var(--arcology-font, ui-monospace, monospace);
  pointer-events: none;
}

.topbar,
.leaderboard,
.minimap,
.singleplayer-panel,
.module-panel,
.actions,
.help {
  pointer-events: auto;
}

.topbar {
  position: relative;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.92), rgba(12, 14, 11, 0.82)),
    var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.topbar strong {
  margin-right: 12px;
  letter-spacing: 0;
}

.topbar span {
  color: var(--muted);
}

.stats {
  display: flex;
  gap: 14px;
  white-space: nowrap;
}

.stats b {
  color: var(--green);
  font-weight: 700;
}

.mobile-hud-options {
  position: relative;
  display: none;
}

body.is-playing .mobile-hud-options {
  display: block;
}

body.is-playing .topbar-settings-button {
  display: none;
}

.mobile-hud-options-button,
.mobile-hud-options-menu button {
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background: rgba(14, 17, 15, 0.92);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.mobile-hud-options-button {
  min-height: 30px;
  padding: 5px 8px;
  color: var(--green);
  font-size: 11px;
}

.mobile-hud-options-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 130;
  width: 150px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.94);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
}

.mobile-hud-options-menu button {
  min-height: 38px;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
}

.leaderboard {
  align-self: start;
  justify-self: end;
  width: min(260px, calc(100vw - 28px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.leaderboard h2 {
  margin: 0 0 8px;
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.leaderboard ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  padding: 2px 5px 2px 2px;
  border-radius: 7px;
}

.leaderboard li.is-team-1 {
  background: linear-gradient(90deg, rgba(92, 178, 255, 0.2), rgba(92, 178, 255, 0.055));
}

.leaderboard li.is-team-2 {
  background: linear-gradient(90deg, rgba(255, 89, 100, 0.2), rgba(255, 89, 100, 0.055));
}

.leaderboard li::before {
  content: attr(data-rank);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(244, 247, 239, 0.1);
  color: var(--cyan);
  font-size: 12px;
}

.leaderboard li.is-self {
  color: var(--ink);
}

.leaderboard li.is-boss {
  color: #ffcf5a;
  margin-bottom: 4px;
  border: 1px solid rgba(255, 207, 90, 0.24);
  background: linear-gradient(90deg, rgba(255, 176, 66, 0.12) var(--boss-health, 0%), rgba(255, 176, 66, 0.025) var(--boss-health, 0%));
}

.leaderboard li.is-boss::before {
  content: "!";
  color: #ffcf5a;
  background: rgba(255, 207, 90, 0.14);
  font-weight: 900;
}

.leaderboard li.is-boss b { color: #ffd18a; font-size: 11px; }

.leaderboard span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard b {
  color: var(--green);
  font-size: 13px;
}

.minimap {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 250px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 7, 6, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.minimap h2 {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#minimapCanvas {
  display: block;
  width: 228px;
  height: 228px;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 6px;
  background: rgba(6, 7, 6, 0.84);
  pointer-events: none;
}

.singleplayer-panel {
  position: fixed;
  right: 14px;
  top: 132px;
  z-index: 23;
  width: min(340px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(7, 9, 9, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
}

.singleplayer-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.singleplayer-panel-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.singleplayer-panel-head b {
  color: var(--amber);
  font-size: 12px;
}

.singleplayer-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

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

.singleplayer-actions:empty {
  display: none;
}

.singleplayer-actions button {
  min-height: 34px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(18, 22, 18, 0.9);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.singleplayer-actions button:hover {
  border-color: rgba(128, 240, 91, 0.52);
}

.module-panel {
  display: none;
}

.module-button,
.actions button {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(34, 39, 31, 0.96), rgba(18, 20, 17, 0.96)),
    var(--panel-strong);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.module-button:hover,
.actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(128, 240, 91, 0.48);
}

.module-button {
  position: relative;
  overflow: hidden;
  padding-left: 14px;
  background-image:
    linear-gradient(135deg, rgba(35, 41, 34, 0.96), rgba(17, 20, 17, 0.98));
}

.module-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--module-accent, var(--green));
  opacity: 0.92;
}

.module-button::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 247, 239, 0.18), transparent 72%);
  opacity: 0.3;
}

.module-button[data-module="engine"] {
  --module-accent: var(--green);
}

.module-button[data-module="booster"] {
  --module-accent: #ff8a30;
}

.module-button[data-module="radar"] {
  --module-accent: #f4f7ef;
}

.module-button[data-module="turret"] {
  --module-accent: var(--cyan);
}

.module-button[data-module="missile"] {
  --module-accent: var(--amber);
}

.module-button[data-module="flame"] {
  --module-accent: #ff8a42;
}

.module-button[data-module="laser"] {
  --module-accent: var(--pink);
}

.module-button[data-module="forcefield"] {
  --module-accent: #7dd8ff;
}

.module-button[data-module="drone"] {
  --module-accent: #d8e35f;
}

.module-button[data-module="repairer"] {
  --module-accent: #7dff9b;
}

.module-button[data-module="weaponContainer"] {
  --module-accent: #b8c9d2;
}

.module-button.selected {
  border-color: var(--green);
  background: rgba(54, 91, 44, 0.72);
}

.module-button.locked,
.default-ship-module-palette button.locked,
.builder-card.locked {
  position: relative;
  color: rgba(244, 247, 239, 0.58);
  filter: grayscale(1);
}

.module-button.locked::after,
.default-ship-module-palette button.locked::after,
.builder-card.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(244, 247, 239, 0.08) 0 8px,
    rgba(8, 10, 8, 0.22) 8px 16px
  );
}

.module-button span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 8px;
  background: rgba(244, 247, 239, 0.12);
  color: var(--cyan);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.actions {
  display: none;
  justify-self: center;
  gap: 8px;
}

.actions button {
  min-width: 104px;
  text-align: center;
}

.actions button.active {
  border-color: var(--amber);
  background: rgba(116, 87, 21, 0.72);
}

.help {
  display: none;
}

.death-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
}

.death-card {
  width: min(460px, calc(100vw - 36px));
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 89, 100, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(30, 18, 20, 0.94), rgba(8, 9, 9, 0.9)),
    rgba(8, 9, 9, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(14px);
  text-align: center;
  pointer-events: auto;
}

.death-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.death-card h2 {
  margin: 0;
  color: var(--red);
  font-size: 34px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.outcome-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.outcome-stat {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(244, 247, 239, 0.12);
  border-radius: 8px;
  background: rgba(244, 247, 239, 0.06);
}

.outcome-stat small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.outcome-stat b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.death-item-panel {
  display: grid;
  gap: 8px;
}

.death-item-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.death-item-row button {
  min-width: 0;
}

.death-item-row span {
  text-transform: none;
}

.death-item-row .item-slot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.death-actions button {
  min-height: 48px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(244, 247, 239, 0.08);
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
}

.death-actions button:first-child {
  border-color: rgba(128, 240, 91, 0.5);
  background: linear-gradient(180deg, rgba(65, 104, 51, 0.94), rgba(38, 66, 33, 0.9));
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: auto;
}

.confirm-card {
  width: min(380px, calc(100vw - 36px));
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(22, 25, 21, 0.98), rgba(9, 11, 9, 0.96)),
    var(--panel-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
  text-align: center;
}

.confirm-card span {
  color: var(--amber);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.confirm-card h2,
.confirm-card p {
  margin: 0;
}

.confirm-card h2 {
  color: var(--red);
  font-size: 30px;
  line-height: 1;
}

.confirm-card p {
  color: var(--muted);
  font-size: 14px;
}

.confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.confirm-actions button {
  min-height: 46px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(244, 247, 239, 0.08);
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
}

.danger-confirm-card .confirm-actions button:last-child {
  border-color: rgba(255, 89, 100, 0.55);
  background: linear-gradient(180deg, rgba(120, 30, 38, 0.95), rgba(72, 22, 27, 0.92));
}

.reconnect-choice-card {
  width: min(460px, calc(100vw - 36px));
  border-color: rgba(122, 205, 255, 0.42);
}

.reconnect-choice-card h2 {
  color: var(--ink);
}

.reconnect-choice-card .confirm-actions {
  grid-template-columns: minmax(0, 1fr);
}

.reconnect-choice-card .confirm-actions button:first-child {
  border-color: rgba(128, 240, 91, 0.55);
  background: linear-gradient(180deg, rgba(65, 104, 51, 0.94), rgba(38, 66, 33, 0.9));
}

.reconnect-choice-card .confirm-actions button:last-child {
  border-color: rgba(255, 182, 83, 0.5);
  background: linear-gradient(180deg, rgba(99, 68, 28, 0.92), rgba(60, 41, 18, 0.9));
}

.victory-overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 26%, rgba(128, 240, 91, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.victory-card {
  width: min(500px, calc(100vw - 36px));
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(128, 240, 91, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 36, 27, 0.96), rgba(8, 10, 9, 0.92)),
    rgba(8, 9, 9, 0.9);
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.56),
    inset 0 0 0 1px rgba(244, 247, 239, 0.08);
  backdrop-filter: blur(16px);
  text-align: center;
  pointer-events: auto;
}

.victory-card.defeat {
  border-color: rgba(255, 89, 100, 0.42);
  background:
    linear-gradient(180deg, rgba(42, 20, 23, 0.96), rgba(8, 10, 9, 0.92)),
    rgba(8, 9, 9, 0.9);
}

.victory-card span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.victory-card.defeat span {
  color: #ffb0b7;
}

.victory-card h2 {
  margin: 0;
  color: var(--green);
  font-size: 44px;
  line-height: 1;
}

.victory-card.defeat h2 {
  color: var(--red);
}

.victory-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.victory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.victory-actions button {
  min-height: 50px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(244, 247, 239, 0.08);
  color: var(--ink);
  cursor: pointer;
  font-weight: 950;
}

.victory-actions button:last-child {
  border-color: rgba(128, 240, 91, 0.56);
  background: linear-gradient(180deg, rgba(65, 104, 51, 0.94), rgba(38, 66, 33, 0.9));
}

.victory-card.defeat .victory-actions button:last-child {
  border-color: rgba(255, 89, 100, 0.48);
  background: linear-gradient(180deg, rgba(103, 42, 48, 0.94), rgba(65, 31, 36, 0.9));
  color: var(--ink);
}

/* The Shorts capture mode is a clean observer canvas: no game chrome, controls,
   menus, overlays, or player avatar should leak into the recorded frame. */
body.shorts-mode .hud,
body.shorts-mode .start-screen,
body.shorts-mode .auth-panel,
body.shorts-mode #resourcePanel,
body.shorts-mode #mobileMenuButton,
body.shorts-mode #mobileShipButton,
body.shorts-mode #mobileMenuDrawer,
body.shorts-mode #mobileShipDrawer,
body.shorts-mode .menu-modal,
body.shorts-mode .profile-modal,
body.shorts-mode .blast-door-transition,
body.shorts-mode .orientation-gate,
body.shorts-mode .singleplayer-panel,
body.shorts-mode .tutorial-guide-overlay,
body.shorts-mode .tutorial-exit-button,
body.shorts-mode button,
body.shorts-mode a,
body.shorts-mode input,
body.shorts-mode select,
body.shorts-mode textarea {
  display: none !important;
  pointer-events: none !important;
}

body.shorts-mode {
  overflow: hidden;
}

body.shorts-mode .shorts-overlay {
  display: none !important;
  pointer-events: none;
}

body.shorts-mode .shorts-overlay.is-active { display: block !important; }

/* Portal submission footage uses the AI battle camera without the Shorts
   promotional furniture. The query that enables this is local-development only. */
body.shorts-mode.portal-media-capture .shorts-overlay,
body.shorts-mode.portal-media-capture .shorts-intro,
body.shorts-mode.portal-media-capture .shorts-victory {
  display: none !important;
}

body.shorts-mode.portal-media-capture,
body.shorts-mode.portal-media-capture * {
  cursor: none !important;
}

.shorts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  color: #f4f7ef;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.shorts-hp-strip {
  position: absolute;
  top: clamp(72px, 10vh, 132px);
  left: clamp(12px, 4vw, 80px);
  right: clamp(42px, 11vw, 140px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Four or more fighters go two per row. The card sizes shrink with them so a 2x3
   still clears the intro panels and the VS strip at the bottom. */
.shorts-hp-strip.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.shorts-hp-strip.is-grid .shorts-fighter-card { padding: 13px 14px 14px; border-radius: 11px; }
.shorts-hp-strip.is-grid .shorts-fighter-heading { font-size: clamp(13px, 3.2vw, 21px); gap: 6px; }
.shorts-hp-strip.is-grid .shorts-hp-track { height: 13px; margin-top: 9px; }

.shorts-fighter-card {
  min-width: 0;
  padding: 21px 22px 22px;
  border: 2px solid rgba(244, 247, 239, 0.36);
  border-radius: 13px;
  background: rgba(5, 10, 14, 0.72);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.shorts-fighter-blue { border-color: rgba(86, 183, 255, 0.82); }
.shorts-fighter-red { border-color: rgba(255, 105, 118, 0.82); }

.shorts-fighter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(18px, 4.8vw, 30px);
  line-height: 1;
}

.shorts-fighter-heading b { font-variant-numeric: tabular-nums; }

.shorts-hp-track {
  width: 100%;
  height: 20px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(244, 247, 239, 0.16);
}

.shorts-hp-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 120ms linear;
}

.shorts-fighter-blue .shorts-hp-track span { background: #56b7ff; }
.shorts-fighter-red .shorts-hp-track span { background: #ff6976; transform-origin: right center; }

.shorts-fighter-red .shorts-hp-track span { margin-left: auto; }

.shorts-vs-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(82px, 12vh, 156px);
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  padding: 21px 32px;
  border: 2px solid rgba(244, 247, 239, 0.32);
  border-radius: 999px;
  background: rgba(5, 10, 14, 0.76);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  font-size: clamp(20px, 5vw, 31px);
}

.shorts-vs-panel b {
  color: #f7d76c;
  font-size: 1.15em;
}

.shorts-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(20, 28, 42, 0.35), rgba(2, 4, 9, 0.82) 72%);
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
}

body.shorts-mode .shorts-intro.is-active { display: block !important; }

.shorts-intro-panel {
  position: absolute;
  width: 64vw;
  height: 54vh;
  max-width: 720px;
  max-height: 1120px;
  overflow: hidden;
  border: 4px solid rgba(244, 247, 239, 0.82);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
  background: #07111e;
  isolation: isolate;
}

.shorts-intro-blue {
  top: 18%;
  left: -10vw;
  transform: translateX(-110%) skewX(-8deg);
  clip-path: polygon(0 0, 100% 12%, 90% 100%, 0 88%);
  border-color: #56b7ff;
}

.shorts-intro-red {
  top: 32%;
  right: -10vw;
  transform: translateX(110%) skewX(8deg);
  clip-path: polygon(10% 0, 100% 12%, 100% 100%, 0 88%);
  border-color: #ff6976;
}

.shorts-intro.is-active .shorts-intro-blue {
  animation: shorts-intro-blue-in 760ms cubic-bezier(.18,.82,.24,1) forwards;
}

.shorts-intro.is-active .shorts-intro-red {
  animation: shorts-intro-red-in 760ms cubic-bezier(.18,.82,.24,1) forwards;
}

.shorts-intro.is-active.is-leaving .shorts-intro-blue {
  animation: shorts-intro-blue-out 520ms cubic-bezier(.5,0,.8,.18) forwards;
}

.shorts-intro.is-active.is-leaving .shorts-intro-red {
  animation: shorts-intro-red-out 520ms cubic-bezier(.5,0,.8,.18) forwards;
}

.shorts-intro-panel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.96;
  z-index: 0;
}

.shorts-intro-copy {
  position: absolute;
  z-index: 2;
  top: 12%;
  display: grid;
  gap: 10px;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.42), 0 0 20px rgba(0, 0, 0, 0.9);
}

.shorts-intro-blue .shorts-intro-copy { top: 14%; left: 15%; transform: skewX(8deg); }
.shorts-intro-red .shorts-intro-copy { top: 14%; right: 15%; text-align: right; transform: skewX(-8deg); }

.shorts-intro-copy strong {
  font-size: clamp(34px, 10vw, 76px);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: #fff;
}

.shorts-intro-copy span {
  font-size: clamp(13px, 3.2vw, 24px);
  font-weight: 900;
  letter-spacing: 0.11em;
  color: rgba(244, 247, 239, 0.86);
}

.shorts-intro-versus {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  opacity: 0;
  color: #f7d76c;
  font-size: clamp(42px, 13vw, 108px);
  font-weight: 1000;
  font-style: italic;
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(247, 215, 108, 0.55);
}

.shorts-intro.is-active .shorts-intro-versus {
  animation: shorts-intro-vs 520ms 520ms cubic-bezier(.2,.9,.2,1) forwards;
}

.shorts-intro-start {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 5;
  transform: translateX(-50%) scale(0.7);
  opacity: 0;
  padding: 13px 28px;
  border: 3px solid #f7d76c;
  border-radius: 999px;
  background: rgba(7, 10, 15, 0.82);
  color: #fff;
  font-size: clamp(24px, 7vw, 52px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  box-shadow: 0 0 28px rgba(247, 215, 108, 0.32);
}

.shorts-intro.is-active .shorts-intro-start {
  /* Delay is driven by the capture config's fightAtMs so the cue and its
     voice line stay together when a take changes its intro pacing. */
  animation: shorts-intro-start 600ms var(--shorts-fight-delay, 1350ms) ease-out forwards;
}

.shorts-victory {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 36;
  place-items: center;
  align-content: center;
  pointer-events: none;
  /* Light enough that the wreck and the surviving ship stay readable behind it. */
  background: radial-gradient(circle at 50% 40%, rgba(6, 12, 22, 0.12), rgba(2, 4, 9, 0.55) 76%);
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
}

body.shorts-mode .shorts-victory.is-active { display: grid !important; }

.shorts-victory-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  /* Sits above centre so the arena floor and the winning ship stay visible. */
  margin-bottom: 26vh;
  padding: 34px 58px;
  border: 4px solid #f7d76c;
  border-radius: 22px;
  background: rgba(7, 10, 15, 0.84);
  box-shadow: 0 0 60px rgba(247, 215, 108, 0.34);
  text-align: center;
  animation: shorts-victory-in 620ms cubic-bezier(.2,.9,.2,1) backwards;
}

.shorts-victory.is-blue .shorts-victory-card {
  border-color: #56b7ff;
  box-shadow: 0 0 60px rgba(86, 183, 255, 0.4);
}

.shorts-victory.is-red .shorts-victory-card {
  border-color: #ff6976;
  box-shadow: 0 0 60px rgba(255, 105, 118, 0.4);
}

.shorts-victory-card strong {
  color: #fff;
  font-size: clamp(40px, 11vw, 96px);
  font-weight: 1000;
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-shadow: 0 7px 0 rgba(0, 0, 0, 0.48), 0 0 32px rgba(0, 0, 0, 0.85);
}

.shorts-victory.is-blue .shorts-victory-card strong { color: #9ed8ff; }
.shorts-victory.is-red .shorts-victory-card strong { color: #ffaeb5; }

.shorts-victory-card span {
  color: #f7d76c;
  font-size: clamp(26px, 7vw, 58px);
  font-weight: 1000;
  font-style: italic;
  letter-spacing: 0.16em;
}

@keyframes shorts-victory-in {
  0% { opacity: 0; transform: scale(0.72); }
  60% { opacity: 1; transform: scale(1.09); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shorts-intro-blue-in {
  0% { transform: translateX(-110%) skewX(-8deg); }
  70% { transform: translateX(6%) skewX(-8deg); }
  100% { transform: translateX(0) skewX(-8deg); }
}

@keyframes shorts-intro-red-in {
  0% { transform: translateX(110%) skewX(8deg); }
  70% { transform: translateX(-6%) skewX(8deg); }
  100% { transform: translateX(0) skewX(8deg); }
}

@keyframes shorts-intro-blue-out {
  0% { opacity: 1; transform: translateX(0) skewX(-8deg); }
  100% { opacity: 0; transform: translateX(-125%) skewX(-8deg); }
}

@keyframes shorts-intro-red-out {
  0% { opacity: 1; transform: translateX(0) skewX(8deg); }
  100% { opacity: 0; transform: translateX(125%) skewX(8deg); }
}

@keyframes shorts-intro-vs {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-8deg); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(-8deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }
}

@keyframes shorts-intro-start {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  45% { opacity: 1; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  body.is-playing:not(.has-mobile-controls):not(.builder-panel-open):not(.upgrade-panel-open) #game {
    cursor: crosshair;
  }

  body.is-playing.builder-panel-open #game,
  body.is-playing.upgrade-panel-open #game {
    cursor: default;
  }

  body.is-playing.builder-panel-open.builder-dragging #game {
    cursor: grabbing;
  }
}

.hit-reward-feed {
  position: fixed;
  /* A body-level overlay, above the HUD and other game notices. */
  z-index: 12050;
  /* Leave the objective line above the combat result stack. */
  top: max(calc(env(safe-area-inset-top, 0px) + 112px), var(--boss-hud-bottom, 0px));
  left: 50%;
  display: grid;
  gap: 3px;
  width: min(220px, 56vw);
  transform: translateX(-50%);
  pointer-events: none;
  transition: top 120ms ease-out;
}

:root[data-scene-team-intro="active"] body.is-small-mobile .hit-reward-feed {
  top: max(calc(env(safe-area-inset-top, 0px) + 138px), var(--boss-hud-bottom, 0px));
}
:root[data-boss-hud="active"] body:has(.spawn-protection-banner:not(.hidden)) .hit-reward-feed {
  top: max(calc(env(safe-area-inset-top, 0px) + 112px), calc(var(--boss-hud-bottom) + 40px));
}
:root[data-scene-team-intro="active"] body:not(.is-small-mobile) .hit-reward-feed,
:root[data-scene-team-intro="active"][data-boss-hud="active"] body:not(.is-small-mobile) .hit-reward-feed {
  top: max(calc(26vh + 104px), var(--boss-hud-bottom, 0px));
}
:root[data-ui-motion="reduced"] .hit-reward-feed { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .hit-reward-feed { transition: none; }
}

/* Preserve the HUD's menu/Shorts visibility after moving the feed outside it. */
.hud.hidden ~ .hit-reward-feed {
  display: none;
}

.hit-reward-entry {
  justify-self: center;
  padding: 2px 8px;
  border-left: 2px solid rgba(255, 204, 79, 0.78);
  background: linear-gradient(90deg, rgba(12, 15, 12, 0.68), rgba(12, 15, 12, 0.18));
  color: rgba(232, 244, 235, 0.9);
  font: 800 10px/1.25 var(--arcology-font, ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-shadow: 0 0 7px rgba(255, 212, 87, 0.32);
  animation: hit-reward-rise 180ms ease-out both;
}

.hit-reward-entry[data-gold="0"] {
  border-left-color: rgba(111, 221, 239, 0.7);
  color: rgba(197, 232, 238, 0.82);
}

.hit-reward-entry[data-kind="moduleDestroyed"] {
  border-left-color: rgba(255, 190, 76, 0.88);
  color: rgba(255, 229, 172, 0.94);
}

.hit-reward-entry[data-kind="enemyDestroyed"],
.hit-reward-entry[data-kind="playerKilled"] {
  border-left-color: rgba(255, 89, 100, 0.94);
  color: rgba(255, 218, 189, 0.98);
  box-shadow: 0 0 14px rgba(255, 89, 100, 0.1);
}

.hit-reward-entry.leaving {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.hit-reward-entry[data-streak="2"] { font-size: 12px; }
.hit-reward-entry[data-streak="3"] { font-size: 14px; }
.hit-reward-entry[data-still="true"] { animation: none; }
.hit-reward-entry[data-still="true"].leaving { transform: none; transition: opacity 220ms ease; }

@keyframes hit-reward-rise {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

:root[data-ui-motion="reduced"] .hit-reward-entry { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .hit-reward-entry { animation: none; }
}

/* src/styles/game-notice-components.css */
/* Top-level game notice geometry and materials. Lifetime/state stay in JS. */

.game-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 12040;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.game-notice-overlay.hidden {
  display: none;
}

.game-notice {
  --game-notice-opacity: 1;
  --game-notice-offset: 0px;
  position: absolute;
  top: 19vh;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 190px;
  min-height: 28px;
  padding: 6px 18px;
  opacity: var(--game-notice-opacity);
  transform: translate(-50%, var(--game-notice-offset));
  color: #d7e1ca;
  border: 2px solid #070907;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background:
    linear-gradient(90deg, #d75738 0 4px, transparent 4px) 9px center / 4px calc(100% - 12px) no-repeat,
    linear-gradient(180deg, rgba(48, 55, 45, 0.97), rgba(7, 12, 8, 0.97));
  box-shadow:
    inset 1px 1px rgba(164, 178, 150, 0.32),
    inset -2px -2px #020302,
    inset 0 0 0 5px #151a15,
    0 5px 0 rgba(1, 3, 1, 0.92),
    0 12px 24px rgba(0, 0, 0, 0.58);
  font: 650 14px/1.2 Inter, system-ui, sans-serif;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 0 #000;
}

.game-notice-objective {
  top: calc(env(safe-area-inset-top, 0px) + 78px);
  min-width: min(420px, calc(100vw - 32px));
  min-height: 40px;
  color: #bdf8ef;
  border-color: #163c36;
  font-size: 18px;
}

.game-notice-warning {
  min-width: 260px;
  min-height: 38px;
  color: #ffe08a;
  border-color: #5e4d1d;
  font-size: 24px;
  font-weight: 800;
}

.game-notice-player-kill {
  top: 22vh;
  min-width: 240px;
  min-height: 34px;
  color: #ff5964;
  border-color: #5f181e;
  font-size: 20px;
  font-weight: 800;
}

.game-notice-booster-hint {
  top: 38vh;
  min-width: min(280px, calc(100vw - 32px));
  min-height: 42px;
  color: #ffe08a;
  border-color: #6b5420;
  font-size: 18px;
}

.game-notice-compact,
.game-notice-enemy-kill {
  min-width: 128px;
  min-height: 21px;
  padding: 3px 11px;
  font-size: 11px;
}

.game-notice-enemy-kill {
  color: #b7ff6b;
  border-color: #28491b;
}

/* A phone notification is a glanceable status line, not another HUD panel. */
body.is-small-mobile .game-notice {
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 96px);
  min-width: 0;
  min-height: 0;
  padding: 3px 8px 4px 10px;
  overflow: hidden;
  border: 0;
  border-left: 2px solid currentColor;
  clip-path: none;
  background: rgba(4, 7, 4, 0.78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.46);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-small-mobile .game-notice-objective {
  max-width: min(340px, calc(100vw - 96px));
  padding: 4px 9px 5px 11px;
  font-size: 11px;
  white-space: normal;
}

body.is-small-mobile .game-notice-warning,
body.is-small-mobile .game-notice-player-kill {
  font-size: 12px;
}

body.is-small-mobile .game-notice-booster-hint,
body.is-small-mobile .game-notice-compact,
body.is-small-mobile .game-notice-enemy-kill {
  min-width: 0;
  min-height: 0;
  padding: 2px 7px 3px 9px;
  font-size: 10px;
}

/* src/styles/game-notice-motion.css */
/* Game notice motion only; geometry and visual materials live separately. */

.game-notice {
  animation: game-notice-engage 180ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
  transition: opacity 60ms linear, transform 120ms ease-out;
}

@keyframes game-notice-engage {
  from { filter: brightness(1.5); translate: 0 -8px; }
  to { filter: brightness(1); translate: 0 0; }
}

/* The resolved game setting wins over the OS setting when it is explicit. */
:root[data-ui-motion="reduced"] .game-notice { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .game-notice { animation: none !important; transition: none !important; }
}

/* src/styles/builder-upgrade.css */
/* Builder, upgrade, module info, and base service UI */
.upgrade-toggle {
  position: fixed;
  left: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
  width: var(--side-rail-width);
  height: var(--side-upgrade-height);
  padding: 10px 7px 9px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(15, 18, 16, 0.92);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  transition: left 180ms ease, border-color 160ms ease, background 160ms ease;
}

.upgrade-toggle {
  top: var(--side-rail-top);
  color: var(--cyan);
}

.upgrade-toggle {
  --side-control-accent: var(--cyan);
  --side-control-fill: rgba(66, 217, 200, 0.16);
}

.upgrade-toggle.builder-target {
  --side-control-accent: var(--green);
  --side-control-fill: rgba(128, 240, 91, 0.18);
}

.upgrade-toggle:not(.hidden),
.base-action-rail:not(.hidden) {
  display: grid;
  animation: builder-control-glow 560ms ease-out;
}

.upgrade-toggle:hover {
  border-color: color-mix(in srgb, var(--side-control-accent) 52%, transparent);
}

.upgrade-toggle.active {
  border-color: color-mix(in srgb, var(--side-control-accent) 68%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--side-control-accent) 14%, rgba(15, 18, 16, 0.94)), rgba(10, 13, 12, 0.95));
}

.base-action-rail {
  position: fixed;
  left: 0;
  top: var(--side-service-top);
  z-index: 24;
  display: grid;
  gap: var(--side-rail-gap);
  width: var(--side-rail-width);
  pointer-events: auto;
  transition: left 180ms ease;
}

body.builder-panel-open .upgrade-toggle,
body.builder-panel-open .base-action-rail,
body.upgrade-panel-open .upgrade-toggle,
body.upgrade-panel-open .base-action-rail {
  left: var(--side-panel-left);
}

.base-action-button {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto auto;
  width: var(--side-rail-width);
  height: var(--side-service-height);
  padding: 8px 7px 7px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(7, 9, 9, 0.94);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.base-action-button:hover:not(:disabled) {
  border-color: rgba(128, 240, 91, 0.52);
}

.base-action-button.unavailable {
  opacity: 0.42;
}

.base-action-svg,
.service-progress-svg {
  position: static;
  margin: auto;
  width: var(--side-icon-size);
  height: var(--side-icon-size);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.base-action-svg path:first-child,
.service-progress-svg path:first-child {
  fill: currentColor;
  fill-opacity: 0.22;
}

.repair-svg {
  color: var(--green);
  stroke: var(--green);
}

.rearm-svg {
  color: var(--amber);
  stroke: var(--amber);
}

.ship-builder-panel,
.upgrade-panel {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 25;
  width: var(--side-panel-width);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100svh;
  padding: 18px 16px 16px;
  border-right: 1px solid rgba(244, 247, 239, 0.16);
  background: rgba(7, 9, 9, 0.94);
  box-shadow: 18px 0 52px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px);
  transform: translateX(-100%);
  transition: transform 180ms ease;
  pointer-events: auto;
  overflow: visible;
}

.ship-builder-panel.open,
.upgrade-panel.open {
  transform: translateX(0);
}

.toolbox-svg,
.upgrade-svg {
  width: var(--side-icon-size);
  height: var(--side-icon-size);
  fill: var(--side-control-fill);
  stroke: var(--side-control-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.upgrade-svg {
  width: var(--side-upgrade-icon-size);
  height: var(--side-upgrade-icon-size);
}

.upgrade-toggle .build-mode-icon,
.upgrade-toggle .build-mode-label {
  display: none;
}

.upgrade-toggle.builder-target .upgrade-mode-icon,
.upgrade-toggle.builder-target .upgrade-mode-label {
  display: none;
}

.upgrade-toggle.builder-target .build-mode-icon,
.upgrade-toggle.builder-target .build-mode-label {
  display: block;
}

.control-label {
  align-self: end;
  color: var(--ink);
  font-size: var(--side-label-size);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.upgrade-toggle .control-label {
  color: var(--side-control-accent);
  font-size: var(--side-upgrade-label-size);
}

.base-action-button.unavailable .control-label {
  color: rgba(244, 247, 239, 0.42);
}

.service-cost {
  min-height: 0.95em;
  color: rgba(244, 247, 239, 0.72);
  font-size: max(9px, calc(var(--side-label-size) * 0.82));
  font-weight: 800;
  line-height: 0.95;
}

.base-action-button.unavailable .service-cost {
  color: rgba(244, 247, 239, 0.36);
}

@keyframes builder-control-glow {
  0% {
    box-shadow: 0 0 0 rgba(128, 240, 91, 0), 0 16px 32px rgba(0, 0, 0, 0.34);
    filter: brightness(1);
  }
  38% {
    box-shadow: 0 0 24px rgba(128, 240, 91, 0.42), 0 18px 36px rgba(0, 0, 0, 0.38);
    filter: brightness(1.28);
  }
  100% {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
    filter: brightness(1);
  }
}

:root[data-ui-motion="reduced"] :is(.upgrade-toggle, .base-action-rail) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) :is(.upgrade-toggle, .base-action-rail) { animation: none !important; }
}

.builder-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
}

.builder-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 0;
}

.builder-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.builder-sell,
.builder-tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(20, 24, 22, 0.96);
  color: var(--ink);
  cursor: pointer;
}

.builder-sell {
  min-width: 82px;
  height: 34px;
}

.builder-sell.active {
  border-color: var(--amber);
  color: var(--amber);
}

.builder-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 12px;
}

.builder-tab {
  height: 38px;
  font-weight: 700;
}

.builder-tab.selected {
  border-color: var(--green);
  background: rgba(35, 58, 35, 0.92);
  color: var(--green);
}

.builder-palette {
  flex: 1 1 0;
  min-height: 0;
  min-block-size: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 10px;
  padding: 2px 4px 18px 0;
  scrollbar-gutter: stable;
}

.builder-palette::-webkit-scrollbar {
  width: 8px;
}

.builder-palette::-webkit-scrollbar-track {
  background: rgba(244, 247, 239, 0.06);
  border-radius: 999px;
}

.builder-palette::-webkit-scrollbar-thumb {
  background: rgba(128, 240, 91, 0.36);
  border-radius: 999px;
}

.builder-card {
  position: relative;
  align-self: start;
  min-width: 0;
  display: grid;
  grid-template-rows: 104px minmax(56px, auto);
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(16, 20, 20, 0.94);
  cursor: grab;
  overflow: hidden;
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.builder-card:hover,
.builder-card.selected {
  border-color: rgba(128, 240, 91, 0.62);
}

.builder-card.sell-card:hover,
.builder-card.sell-card.selected {
  border-color: rgba(255, 89, 100, 0.74);
}

.builder-card.sell-card .builder-card-name {
  color: #ff8088;
  font-size: 16px;
}

.builder-card:active {
  cursor: grabbing;
}

.builder-card canvas {
  display: block;
  align-self: center;
  justify-self: center;
  width: 92px;
  height: 92px;
  background: rgba(5, 7, 7, 0.88);
  pointer-events: none;
  -webkit-user-drag: none;
}

.builder-card-body {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 56px;
  padding: 9px 9px 10px;
  background: rgba(12, 16, 16, 0.96);
  pointer-events: none;
}

.builder-card-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.15;
}

.builder-card-price {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.builder-card.locked .builder-card-price {
  white-space: normal;
}

.builder-tooltip {
  position: fixed;
  z-index: 40;
  max-width: 260px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-radius: 8px;
  background: rgba(7, 9, 9, 0.94);
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  font-size: 12px;
}

.builder-tooltip b {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 13px;
}

.module-info-popup {
  --module-info-accent: var(--green);
  --module-info-glow: rgba(128, 240, 91, 0.34);
  position: fixed;
  z-index: 160;
  width: min(286px, calc(100vw - 24px));
  padding: 10px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--module-info-accent) 48%, rgba(244, 247, 239, 0.18));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(17, 21, 22, 0.98), rgba(7, 9, 9, 0.96)),
    rgba(7, 9, 9, 0.96);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 26px var(--module-info-glow);
  color: var(--ink);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.25;
}

.module-info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.module-info-title b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-info-kind {
  flex: 0 0 auto;
  color: var(--module-info-accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.module-info-desc {
  margin: 0 0 8px;
  color: rgba(244, 247, 239, 0.74);
}

.module-info-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.module-info-stat {
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid rgba(244, 247, 239, 0.1);
  border-radius: 6px;
  background: rgba(4, 6, 6, 0.52);
  text-align: center;
}

.module-info-stat span,
.module-info-stat b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-info-stat span {
  margin-bottom: 2px;
  color: rgba(244, 247, 239, 0.54);
  font-size: 8px;
  font-weight: 800;
}

.module-info-stat b {
  color: var(--module-info-accent);
  font-size: 11px;
  font-weight: 900;
}

.module-info-popup.mobile {
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  left: 50%;
  width: min(360px, calc(100vw - 24px));
  transform: translateX(-50%);
}

.module-info-popup.docked {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 8px 0 10px;
  transform: none;
}

.default-ship-editor-shell > .module-info-popup.docked {
  grid-column: 2;
}

body.is-small-mobile.small-mobile-portrait.builder-panel-open .module-info-popup.mobile,
body.is-small-mobile.small-mobile-portrait.upgrade-panel-open .module-info-popup.mobile {
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  right: 10px;
  bottom: auto;
  left: auto;
  width: min(232px, calc(100vw - 72px));
  transform: none;
}

body.is-small-mobile.small-mobile-landscape.builder-panel-open .module-info-popup.mobile,
body.is-small-mobile.small-mobile-landscape.upgrade-panel-open .module-info-popup.mobile {
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: auto;
  left: auto;
  width: min(300px, max(180px, calc(100vw - min(304px, calc(100vw - 50px)) - 64px)));
  transform: none;
}

body.is-small-mobile .module-info-popup {
  font-size: 11px;
}

body.is-small-mobile .module-info-popup.mobile {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 10px;
  bottom: auto;
  left: auto;
  width: min(232px, calc(100vw - 72px));
  transform: none;
}

body.is-small-mobile.default-ship-editor-open .module-info-popup {
  display: none !important;
}

body.is-small-mobile.small-mobile-landscape .module-info-popup.mobile {
  width: min(260px, calc(100vw - 74px));
}

body.is-small-mobile .default-ship-editor-shell > .module-info-popup.docked {
  grid-column: 1;
}

body.is-small-mobile .module-info-stats {
  gap: 4px;
}

body.is-small-mobile .module-info-stat {
  padding: 4px 3px;
}

body.is-small-mobile .module-info-stat span {
  font-size: 8px;
}

body.is-small-mobile .module-info-stat b {
  font-size: 10px;
}

.service-progress {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  width: 62px;
  height: 62px;
  transform: translateX(-50%);
  pointer-events: none;
}

.service-progress-ring {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background:
    conic-gradient(var(--green) calc(var(--progress, 0) * 1%), rgba(244, 247, 239, 0.14) 0),
    rgba(7, 9, 9, 0.9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.service-progress-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: rgba(9, 12, 11, 0.96);
}

.service-progress-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 30px;
  height: 30px;
}

.service-progress[data-action="repair"] .repair-svg,
.service-progress[data-action="rearm"] .rearm-svg {
  display: block;
}

/* src/styles/mobile-controls.css */
/* Mobile gameplay controls */
.mobile-layout-guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.mobile-layout-guides i { display: none; position: absolute; pointer-events: none; opacity: .72; }
.mobile-layout-guides.aligned-x .mobile-layout-guide-x { display: block; left: var(--mobile-guide-x); top: 8px; bottom: 8px; border-left: 1px dashed #b8ded0; }
.mobile-layout-guides.aligned-y .mobile-layout-guide-y { display: block; top: var(--mobile-guide-y); left: 8px; right: 8px; border-top: 1px dashed #b8ded0; }
.mobile-controls.editing .mobile-layout-dragging { outline: 2px solid #b8ded0; outline-offset: 4px; }
.mobile-controls.editing .mobile-layout-dragging[data-layout-motion="full"] { filter: drop-shadow(0 0 8px #b0dfcd90); }
.mobile-controls {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  pointer-events: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.upgrade-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
}

.upgrade-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 0;
}

.upgrade-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.upgrade-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 4px 4px 0;
}

.skill-section {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 247, 239, 0.14);
}

.skill-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.skill-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 4px 18px 0;
}

.skill-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(16, 20, 20, 0.94);
  color: var(--ink);
}

.skill-card.equipped {
  border-color: rgba(66, 217, 200, 0.68);
  background: rgba(12, 38, 38, 0.92);
}

.skill-card h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.skill-card p {
  grid-column: 2 / 4;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.skill-buy,
.skill-equip {
  min-width: 86px;
  min-height: 36px;
  border: 1px solid rgba(66, 217, 200, 0.5);
  border-radius: 8px;
  background: rgba(12, 38, 38, 0.92);
  color: var(--cyan);
  cursor: pointer;
  font-weight: 900;
}

.skill-buy:disabled {
  border-color: rgba(244, 247, 239, 0.14);
  color: rgba(244, 247, 239, 0.42);
  cursor: not-allowed;
}

.skill-card.equipped .skill-equip {
  background: linear-gradient(180deg, rgba(66, 217, 200, 0.86), rgba(40, 118, 114, 0.92));
  color: #07221f;
}

.skill-hud {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(66, 217, 200, 0.4);
  border-radius: 999px;
  background: rgba(8, 12, 12, 0.82);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 20;
}

.skill-hud.hidden {
  display: none;
}

.skill-hud-key {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(66, 217, 200, 0.18);
  border: 1px solid rgba(66, 217, 200, 0.5);
  color: var(--cyan);
  font-size: 12px;
}

.skill-hud-state {
  color: var(--cyan);
}

.skill-hud[data-mode="cooldown"] .skill-hud-state {
  color: rgba(244, 247, 239, 0.5);
}

.skill-hud[data-mode="active"] {
  border-color: rgba(120, 255, 155, 0.7);
}

.skill-hud[data-mode="active"] .skill-hud-state {
  color: #7dff9b;
}

.upgrade-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(16, 20, 20, 0.94);
  color: var(--ink);
}

.upgrade-card h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.upgrade-card p {
  grid-column: 2 / 4;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.upgrade-bar {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.upgrade-card-icon,
.skill-card-icon {
  grid-row: 1 / span 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  background:
    radial-gradient(circle at 50% 35%, rgba(100, 230, 255, 0.2), transparent 64%),
    rgba(7, 18, 20, 0.82);
  color: #a9f3ff;
  font: 900 22px/1 var(--arcology-font, ui-monospace, monospace);
  text-shadow: 0 0 10px rgba(83, 225, 255, 0.48);
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
}

.skill-card-icon {
  border-color: color-mix(in srgb, #d98cff 52%, transparent);
  background:
    radial-gradient(circle at 50% 35%, rgba(214, 122, 255, 0.24), transparent 64%),
    rgba(18, 8, 24, 0.82);
  color: #e9b7ff;
  text-shadow: 0 0 10px rgba(217, 140, 255, 0.5);
}

.upgrade-segment {
  height: 12px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 4px;
  background: rgba(244, 247, 239, 0.08);
}

.upgrade-segment.filled {
  border-color: rgba(66, 217, 200, 0.68);
  background: linear-gradient(180deg, rgba(66, 217, 200, 0.86), rgba(40, 118, 114, 0.92));
}

.upgrade-buy {
  min-width: 86px;
  min-height: 36px;
  border: 1px solid rgba(66, 217, 200, 0.5);
  border-radius: 8px;
  background: rgba(12, 38, 38, 0.92);
  color: var(--cyan);
  cursor: pointer;
  font-weight: 900;
}

.upgrade-buy:disabled {
  border-color: rgba(244, 247, 239, 0.14);
  color: rgba(244, 247, 239, 0.42);
  cursor: not-allowed;
}

.mobile-controls.visible {
  display: block;
  pointer-events: none;
}

.mobile-controls.editing {
  z-index: 95;
  pointer-events: none;
}

.mobile-joystick {
  --stick-x: 0px;
  --stick-y: 0px;
  --stick-base-x: 0px;
  --stick-base-y: 0px;
  --stick-size: clamp(112px, 22vw, 152px);
  --stick-hit-size: clamp(184px, 34vw, 240px);
  position: absolute;
  left: var(--stick-base-x);
  top: var(--stick-base-y);
  width: var(--stick-hit-size);
  height: var(--stick-hit-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.mobile-joystick-base {
  position: absolute;
  inset: calc((var(--stick-hit-size) - var(--stick-size)) / 2);
  border: 2px solid rgba(244, 247, 239, 0.24);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 247, 239, 0.12), transparent 38%),
    rgba(7, 9, 9, 0.28);
  box-shadow:
    inset 0 0 24px rgba(66, 217, 200, 0.12),
    0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
}

.mobile-joystick-base-attack {
  border-color: rgba(255, 89, 100, 0.26);
  box-shadow:
    inset 0 0 24px rgba(255, 89, 100, 0.12),
    0 12px 34px rgba(0, 0, 0, 0.18);
}

.mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  border: 2px solid rgba(244, 247, 239, 0.34);
  border-radius: inherit;
  background: rgba(244, 247, 239, 0.2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));
}

.mobile-joystick-knob::before,
.mobile-joystick-knob::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

.mobile-joystick-left .mobile-joystick-knob::before {
  width: 58%;
  height: 58%;
  background:
    linear-gradient(rgba(244, 247, 239, 0.68), rgba(244, 247, 239, 0.68)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(90deg, rgba(244, 247, 239, 0.68), rgba(244, 247, 239, 0.68)) 0 50% / 100% 2px no-repeat;
}

.mobile-joystick-left .mobile-joystick-knob::after {
  width: 68%;
  height: 68%;
  background:
    conic-gradient(from 45deg, transparent 0 12.5%, rgba(244, 247, 239, 0.74) 12.5% 14.5%, transparent 14.5% 37.5%, rgba(244, 247, 239, 0.74) 37.5% 39.5%, transparent 39.5% 62.5%, rgba(244, 247, 239, 0.74) 62.5% 64.5%, transparent 64.5% 87.5%, rgba(244, 247, 239, 0.74) 87.5% 89.5%, transparent 89.5%);
  clip-path: polygon(50% 0, 58% 16%, 53% 16%, 53% 47%, 84% 47%, 84% 42%, 100% 50%, 84% 58%, 84% 53%, 53% 53%, 53% 84%, 58% 84%, 50% 100%, 42% 84%, 47% 84%, 47% 53%, 16% 53%, 16% 58%, 0 50%, 16% 42%, 16% 47%, 47% 47%, 47% 16%, 42% 16%);
}

.mobile-joystick-right .mobile-joystick-knob::before {
  width: 62%;
  height: 62%;
  border: 2px solid rgba(244, 247, 239, 0.72);
  border-radius: 50%;
}

.mobile-joystick-right .mobile-joystick-knob::after {
  width: 72%;
  height: 72%;
  background:
    linear-gradient(rgba(244, 247, 239, 0.7), rgba(244, 247, 239, 0.7)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(90deg, rgba(244, 247, 239, 0.7), rgba(244, 247, 239, 0.7)) 0 50% / 100% 2px no-repeat;
  border-radius: 50%;
}

.mobile-joystick.active .mobile-joystick-base {
  background:
    radial-gradient(circle at 50% 50%, rgba(128, 240, 91, 0.18), transparent 42%),
    rgba(7, 9, 9, 0.34);
}

.mobile-joystick.active .mobile-joystick-base-attack {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 89, 100, 0.2), transparent 42%),
    rgba(7, 9, 9, 0.34);
}

.mobile-joystick.active .mobile-joystick-knob {
  background: rgba(244, 247, 239, 0.26);
}

/* Fixed pseudo-elements keep feedback bounded without adding touch targets. */
.mobile-joystick,
.mobile-action-button {
  --mobile-feedback-rgb: 128 240 91;
  --stick-strength: 0;
}

.mobile-joystick-right {
  --mobile-feedback-rgb: 255 89 100;
}

.mobile-bomb-button {
  --mobile-feedback-rgb: 255 179 71;
}

.mobile-joystick-knob {
  z-index: 2;
}

.mobile-joystick.mobile-feedback-rich.active .mobile-joystick-knob {
  box-shadow:
    0 0 calc(3px + 16px * var(--stick-strength)) rgb(var(--mobile-feedback-rgb) / calc(0.1 + 0.45 * var(--stick-strength))),
    0 8px 22px rgba(0, 0, 0, 0.22);
}

.mobile-joystick.mobile-feedback-low.active .mobile-joystick-knob {
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y))) scale(calc(1 + 0.04 * var(--stick-strength)));
}

.mobile-joystick::before,
.mobile-joystick::after,
.mobile-action-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

.mobile-joystick::before {
  z-index: 1;
  left: 50%;
  top: 50%;
  width: calc(var(--stick-size) * 0.44);
  height: calc(var(--stick-size) * 0.44);
  border: 1px solid rgb(var(--mobile-feedback-rgb) / 0.6);
  transform: translate(calc(-50% + var(--stick-trail-x, 0px)), calc(-50% + var(--stick-trail-y, 0px)));
}

.mobile-joystick::after {
  z-index: 3;
  left: 50%;
  top: 50%;
  width: var(--stick-size);
  height: var(--stick-size);
  border: 2px solid rgb(var(--mobile-feedback-rgb) / 0.65);
  border-radius: inherit;
  transform: translate(-50%, -50%) scale(0.82);
}

.mobile-joystick.mobile-feedback-rich.mobile-trail-a::before {
  animation: mobile-knob-trail-a 120ms ease-out both;
}

.mobile-joystick.mobile-feedback-rich.mobile-trail-b::before {
  animation: mobile-knob-trail-b 120ms ease-out both;
}

.mobile-feedback-rich.mobile-ripple-a::after {
  animation: mobile-control-ripple-a 220ms ease-out both;
}

.mobile-feedback-rich.mobile-ripple-b::after {
  animation: mobile-control-ripple-b 220ms ease-out both;
}

@keyframes mobile-knob-trail-a {
  from { opacity: 0.32; }
  to { opacity: 0; }
}

@keyframes mobile-knob-trail-b {
  from { opacity: 0.32; }
  to { opacity: 0; }
}

@keyframes mobile-control-ripple-a {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.82); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes mobile-control-ripple-b {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.82); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

.mobile-joystick.tutorial-control-highlight .mobile-joystick-base,
.mobile-dpad.tutorial-control-highlight {
  border-color: rgba(255, 209, 102, 0.92);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 209, 102, 0.28), transparent 42%),
    rgba(7, 9, 9, 0.42);
  box-shadow:
    0 0 0 12px rgba(255, 209, 102, 0.16),
    0 0 42px rgba(255, 209, 102, 0.72),
    inset 0 0 30px rgba(255, 209, 102, 0.24);
}

.mobile-joystick.tutorial-control-highlight .mobile-joystick-base-attack {
  border-color: rgba(255, 89, 100, 0.92);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 89, 100, 0.32), transparent 42%),
    rgba(7, 9, 9, 0.42);
  box-shadow:
    0 0 0 12px rgba(255, 89, 100, 0.16),
    0 0 42px rgba(255, 89, 100, 0.76),
    inset 0 0 30px rgba(255, 89, 100, 0.26);
}

.mobile-joystick.tutorial-control-highlight .mobile-joystick-knob {
  border-color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 24px rgba(255, 209, 102, 0.68),
    0 8px 22px rgba(0, 0, 0, 0.22);
}

.mobile-joystick-right.tutorial-control-highlight .mobile-joystick-knob {
  box-shadow:
    0 0 24px rgba(255, 89, 100, 0.72),
    0 8px 22px rgba(0, 0, 0, 0.22);
}

.mobile-dpad {
  --dpad-x: 0px;
  --dpad-y: 0px;
  --dpad-size: 164px;
  position: absolute;
  left: var(--dpad-x);
  top: var(--dpad-y);
  width: var(--dpad-size);
  height: var(--dpad-size);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: max(5px, calc(var(--dpad-size) * 0.035));
  padding: max(6px, calc(var(--dpad-size) * 0.04));
  border-radius: 50%;
  background: rgba(7, 9, 9, 0.14);
  box-shadow:
    inset 0 0 24px rgba(66, 217, 200, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-dpad-button,
.mobile-dpad-center {
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
}

.mobile-dpad-button {
  border: 1px solid rgba(244, 247, 239, 0.12);
  background: rgba(12, 15, 14, 0.34);
  color: rgba(244, 247, 239, 0.62);
  display: grid;
  place-items: center;
  font-size: clamp(17px, calc(var(--dpad-size) * 0.16), 30px);
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-dpad-center {
  border: 1px solid rgba(244, 247, 239, 0.05);
  background:
    radial-gradient(circle at 50% 50%, rgba(128, 240, 91, 0.1), transparent 58%),
    rgba(12, 15, 14, 0.14);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-dpad-button.active {
  border-color: rgba(128, 240, 91, 0.52);
  background: rgba(54, 91, 48, 0.48);
  color: rgba(244, 247, 239, 0.86);
  box-shadow: inset 0 0 16px rgba(128, 240, 91, 0.18);
}

.mobile-controls.editing .mobile-dpad {
  outline: 2px dashed rgba(128, 240, 91, 0.6);
  outline-offset: 5px;
  pointer-events: auto;
}

.mobile-controls.editing .mobile-dpad-button {
  border-color: rgba(128, 240, 91, 0.3);
}

#mobileControls #moveDpad {
  gap: 0;
  padding: calc(var(--dpad-size) * 0.12);
  border: 2px solid #626b57;
  border-radius: 50%;
  background: var(--arcology-bolt, linear-gradient(transparent, transparent)),
    radial-gradient(circle at 50% 44%, rgba(44, 64, 36, 0.82), rgba(7, 10, 7, 0.9) 66%),
    var(--arcology-frame, linear-gradient(#2c4151, #243746));
  box-shadow: inset 0 0 0 5px #111510, inset 0 0 0 6px rgba(111, 122, 98, 0.34),
    inset 0 0 24px rgba(0, 0, 0, 0.58), 0 5px 0 #030403, 0 12px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}

#mobileControls #moveDpad.active {
  border-color: rgba(190, 237, 161, 0.84);
}

body .mobile-dpad .mobile-dpad-button {
  border: 1px solid rgba(135, 190, 190, 0.42);
  border-radius: 5px;
  background: linear-gradient(#3e6570, #243e48);
  color: #d0eee8;
  box-shadow: inset 0 1px 0 #badfd44d, 0 3px 0 #0d252b;
  font-size: calc(var(--dpad-size) * 0.14);
}

.mobile-dpad-up { grid-area: 1 / 2; }
.mobile-dpad-left { grid-area: 2 / 1; }
.mobile-dpad-right { grid-area: 2 / 3; }
.mobile-dpad-down { grid-area: 3 / 2; }

body .mobile-dpad .mobile-dpad-center {
  grid-area: 2 / 2;
  border-radius: 6px;
  background: radial-gradient(circle at 40% 30%, #7c9fa8, #345563 60%, #1b3440);
  border: 1px solid rgba(180, 218, 211, 0.46);
  box-shadow: inset 0 1px 0 #d7eee24d, 0 2px 4px #081d28;
  transform: translate(var(--dpad-grip-x, 0px), var(--dpad-grip-y, 0px));
  pointer-events: none;
}

body .mobile-dpad .mobile-dpad-button.active {
  color: #142c29;
  border-color: #daf4ae;
  background: linear-gradient(#d7edb0, #9ac770);
  box-shadow: inset 0 1px 0 #f1ffd2, 0 1px 0 #263e2c;
}

.mobile-action-button {
  --mobile-action-x: 0px;
  --mobile-action-y: 0px;
  --mobile-action-size: 58px;
  position: absolute;
  left: var(--mobile-action-x);
  top: var(--mobile-action-y);
  width: var(--mobile-action-size);
  height: var(--mobile-action-size);
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 247, 239, 0.16);
  border-radius: 50%;
  background: rgba(7, 9, 9, 0.34);
  color: rgba(244, 247, 239, 0.72);
  box-shadow:
    inset 0 0 18px rgba(244, 247, 239, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.16);
  transform: translate(-50%, -50%);
  touch-action: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-action-button span {
  display: block;
  font-size: clamp(9px, calc(var(--mobile-action-size) * 0.22), 14px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}

.mobile-action-button::after {
  left: 50%;
  top: 50%;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: 2px solid rgb(var(--mobile-feedback-rgb) / 0.65);
  transform: translate(-50%, -50%) scale(0.82);
}

.mobile-action-button.pressed {
  border-color: rgb(var(--mobile-feedback-rgb) / 0.8);
}

.mobile-action-button.mobile-feedback-low.pressed span,
.mobile-action-button.mobile-feedback-rich.pressed span {
  transform: scale(0.95);
}

.mobile-boost-button.has-boost-fuel::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  background: conic-gradient(rgb(var(--mobile-feedback-rgb) / 0.9) var(--boost-fuel-fill, 0%), rgba(244, 247, 239, 0.12) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.mobile-action-button.active {
  border-color: rgba(128, 240, 91, 0.62);
  background: rgba(54, 91, 48, 0.56);
  color: rgba(244, 247, 239, 0.92);
  box-shadow:
    inset 0 0 18px rgba(128, 240, 91, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.18);
}

.mobile-action-button.unavailable {
  opacity: 0.46;
}

.mobile-action-button.editing {
  outline: 2px dashed rgba(128, 240, 91, 0.6);
  outline-offset: 4px;
}

.mobile-bomb-button {
  border-color: rgba(255, 179, 71, 0.28);
  color: rgba(255, 224, 170, 0.82);
}

.mobile-bomb-button.active {
  border-color: rgba(255, 179, 71, 0.68);
  background: rgba(93, 52, 18, 0.58);
}

.mobile-skill-button {
  position: fixed;
  left: auto;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  right: calc(env(safe-area-inset-right, 0px) + 156px);
  bottom: auto;
  transform: none;
  width: 58px;
  height: 58px;
  border-color: rgba(66, 217, 200, 0.42);
  color: rgba(170, 240, 232, 0.9);
  z-index: 21;
  isolation: isolate;
  font: 900 25px/1 system-ui;
}

.mobile-skill-button::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(#9be5d9 var(--ui-skill-charge, 0%), #53716c55 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.mobile-skill-button[data-mode="cooldown"] { background: #132325; color: #8aaba7; }
.mobile-skill-button[data-mode="cooldown"]::after {
  content: attr(data-cooldown); position: absolute; right: 1px; bottom: 1px; min-width: 16px;
  padding: 1px 2px; background: #060e11ed; color: #e6f3ec; border: 1px solid #7fa59e;
  font: 700 10px/1 monospace; font-variant-numeric: tabular-nums;
}
.mobile-skill-button[data-mode="active"] { border-color: #78c6b9; box-shadow: inset 0 0 0 2px #57948666; }
.mobile-skill-button.ui-event-ready:not(.ui-event-static) { animation: mobile-skill-ready 260ms ease-out both; }
@keyframes mobile-skill-ready { 35% { filter: brightness(1.65); scale: 1.09; } to { filter: none; scale: 1; } }
:root[data-ui-motion="reduced"] .mobile-skill-button,
:root[data-ui-motion="reduced"] .mobile-skill-button.ui-event-ready { animation: none !important; }

.mobile-skill-button.active {
  border-color: rgba(66, 217, 200, 0.75);
  background: rgba(12, 52, 50, 0.58);
}

/* The floating skill control shares the options menu's screen area. Keep its
   higher control layer from intercepting menu actions while options are open. */
body.is-small-mobile:has(#mobileHudOptionsMenu:not(.hidden)) .mobile-skill-button {
  visibility: hidden;
  pointer-events: none;
}

.builder-panel-open .mobile-controls,
.mobile-controls.hidden {
  display: none;
}

/* src/styles/blast-door-transition.css */
.blast-door-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
}

.blast-door-transition.is-closed,
.blast-door-transition.is-moving {
  opacity: 1;
}

.blast-door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52vw;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 10%, transparent 90%, rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255, 255, 255, 0.06) 58px 60px),
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(0, 0, 0, 0.24) 76px 78px),
    linear-gradient(135deg, #252a30, #555d66 45%, #20252b);
  box-shadow:
    inset 0 0 0 2px rgba(214, 224, 230, 0.34),
    inset 0 0 54px rgba(0, 0, 0, 0.72),
    0 0 42px rgba(0, 0, 0, 0.82);
  transition: transform 760ms cubic-bezier(0.18, 0.86, 0.22, 1);
  will-change: transform;
}

.blast-door-left {
  left: 0;
  transform: translateX(-104%);
  border-right: 6px solid rgba(204, 214, 220, 0.72);
  background:
    radial-gradient(circle at 26% 32%, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 10%, transparent 90%, rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255, 255, 255, 0.06) 58px 60px),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(0, 0, 0, 0.24) 70px 73px),
    linear-gradient(135deg, #252a30, #555d66 45%, #20252b);
}

.blast-door-right {
  right: 0;
  transform: translateX(104%);
  border-left: 6px solid rgba(204, 214, 220, 0.72);
  background:
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.08), transparent 19%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.1), transparent 11%, transparent 88%, rgba(255, 255, 255, 0.07)),
    repeating-linear-gradient(0deg, transparent 0 64px, rgba(255, 255, 255, 0.055) 64px 66px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(0, 0, 0, 0.24) 88px 91px),
    linear-gradient(225deg, #242930, #5a626b 48%, #1d2228);
}

.blast-door-transition.is-closed .blast-door-left,
.blast-door-transition.is-closing .blast-door-left,
.blast-door-transition.is-closed .blast-door-right,
.blast-door-transition.is-closing .blast-door-right {
  transform: translateX(0);
}

.blast-door-leaf::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  border: 2px solid rgba(192, 205, 214, 0.34);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(0, 0, 0, 0.34) 48% 49%, rgba(220, 230, 235, 0.18) 49% 50%, transparent 50%),
    linear-gradient(0deg, transparent 0 48%, rgba(0, 0, 0, 0.34) 48% 49%, rgba(220, 230, 235, 0.18) 49% 50%, transparent 50%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
}

.blast-door-leaf::after {
  content: "";
  position: absolute;
  inset: 13% 14%;
  border: 1px solid rgba(255, 210, 88, 0.46);
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 210, 88, 0.12) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 44px);
}

.blast-door-rib,
.blast-door-cable,
.blast-door-wire-loom,
.blast-door-pipe,
.blast-door-hinge-rail,
.blast-door-motor-box,
.blast-door-lock-pin,
.blast-door-bolt-strip,
.blast-door-actuator,
.blast-door-status-light,
.blast-door-gear,
.blast-door-slider,
.blast-door-shutter,
.blast-door-scanner,
.blast-door-warning {
  position: absolute;
  display: block;
}

.blast-door-rib {
  left: 8%;
  right: 8%;
  height: 28px;
  border: 1px solid rgba(216, 226, 232, 0.36);
  border-radius: 4px;
  background:
    linear-gradient(90deg, #171c22, #59616a 22%, #1d2329 23% 27%, #737c85 48% 52%, #1d2329 73% 77%, #59616a, #171c22),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 34px);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.72), 0 4px 16px rgba(0, 0, 0, 0.32);
}

.blast-door-rib.rib-a {
  top: 10%;
}

.blast-door-rib.rib-b {
  bottom: 10%;
}

.blast-door-right .blast-door-rib.rib-a {
  left: 11%;
  right: 5%;
  top: 8%;
}

.blast-door-right .blast-door-rib.rib-b {
  left: 5%;
  right: 13%;
  bottom: 12%;
}

.blast-door-pipe {
  left: 12%;
  right: 12%;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.2), transparent 45%),
    repeating-linear-gradient(90deg, #76808a 0 28px, #222930 28px 38px, #b6c1c8 38px 42px, #222930 42px 52px);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.7), 0 0 12px rgba(205, 216, 222, 0.12);
}

.blast-door-pipe.pipe-a {
  top: 18%;
}

.blast-door-pipe.pipe-b {
  bottom: 18%;
}

.blast-door-left .blast-door-pipe.pipe-a {
  left: 10%;
  right: 24%;
}

.blast-door-left .blast-door-pipe.pipe-b {
  left: 17%;
  right: 10%;
}

.blast-door-right .blast-door-pipe.pipe-a {
  left: 22%;
  right: 9%;
  top: 21%;
}

.blast-door-right .blast-door-pipe.pipe-b {
  left: 9%;
  right: 21%;
  bottom: 15%;
}

.blast-door-cable {
  width: 4px;
  top: 18%;
  bottom: 18%;
  border-radius: 999px;
  background: linear-gradient(#b8c3ca, #171c22 24%, #55e9ff 48%, #171c22 72%, #d1d9de);
  box-shadow: 0 0 10px rgba(92, 235, 255, 0.35);
  opacity: 0.78;
}

.blast-door-wire-loom {
  width: 112px;
  height: 42px;
  border: 1px solid rgba(210, 222, 228, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(30, 36, 42, 0.9) 8% 13%, transparent 13%),
    repeating-linear-gradient(90deg, #53e9ff 0 3px, #1c232b 3px 7px, #f2c653 7px 10px, #1c232b 10px 15px, #b9c5cc 15px 18px, #1c232b 18px 24px);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.72),
    0 8px 16px rgba(0, 0, 0, 0.34),
    0 0 12px rgba(80, 228, 255, 0.12);
  opacity: 0.88;
  animation: blast-door-loom 1.1s linear infinite;
}

.blast-door-wire-loom::before,
.blast-door-wire-loom::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(8, 11, 15, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.blast-door-wire-loom::before {
  top: 9px;
}

.blast-door-wire-loom::after {
  bottom: 9px;
}

.blast-door-hinge-rail {
  top: 7%;
  bottom: 7%;
  width: 20px;
  border: 1px solid rgba(216, 226, 232, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(90deg, #11161c, #7b858e 45%, #1a2027),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(0, 0, 0, 0.45) 42px 50px, rgba(232, 239, 242, 0.26) 50px 56px);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.76), 0 0 18px rgba(0, 0, 0, 0.36);
}

.blast-door-motor-box {
  width: 112px;
  height: 86px;
  border: 1px solid rgba(217, 228, 233, 0.38);
  border-radius: 7px;
  background:
    radial-gradient(circle at 34% 40%, rgba(255, 210, 88, 0.46) 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 32%),
    linear-gradient(#555e67, #252b33);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    inset 0 -18px 30px rgba(0, 0, 0, 0.42),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

.blast-door-motor-box::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(17, 22, 28, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle, #0b0f14 0 22%, #adb8bf 23% 34%, #222932 35% 100%);
  animation: blast-door-gear 1.65s linear infinite;
}

.blast-door-lock-pin {
  width: 96px;
  height: 18px;
  border: 1px solid rgba(220, 230, 235, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #11161b, #d7e0e4 18%, #5b6570 50%, #d7e0e4 82%, #11161b);
  box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.34);
  animation: blast-door-lock-pin 1.25s ease-in-out infinite alternate;
}

.blast-door-bolt-strip {
  width: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #c9d4da 0 26%, #171c22 27% 56%, transparent 57%) 50% 0 / 14px 42px repeat-y,
    linear-gradient(#2b3239, #59636c, #2b3239);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.72), 0 0 12px rgba(0, 0, 0, 0.28);
}

.blast-door-cable.cable-a {
  left: 18%;
}

.blast-door-cable.cable-b {
  right: 18%;
  animation: blast-door-current 840ms linear infinite;
}

.blast-door-left .blast-door-cable.cable-a {
  left: 13%;
}

.blast-door-left .blast-door-cable.cable-b {
  right: 28%;
}

.blast-door-left .blast-door-wire-loom.loom-a {
  left: 26%;
  top: 22%;
  transform: rotate(2deg);
}

.blast-door-left .blast-door-wire-loom.loom-b {
  right: 12%;
  bottom: 21%;
  width: 98px;
  transform: rotate(-1deg);
}

.blast-door-left .blast-door-hinge-rail {
  left: 6%;
}

.blast-door-left .blast-door-motor-box {
  right: 13%;
  top: 44%;
}

.blast-door-left .blast-door-lock-pin.pin-a {
  right: 24%;
  top: 51%;
}

.blast-door-left .blast-door-lock-pin.pin-b {
  right: 28%;
  top: 56%;
  animation-delay: -420ms;
}

.blast-door-left .blast-door-bolt-strip.bolts-a {
  left: 10%;
  top: 18%;
  bottom: 18%;
}

.blast-door-left .blast-door-bolt-strip.bolts-b {
  right: 7%;
  top: 12%;
  bottom: 12%;
}

.blast-door-right .blast-door-cable.cable-a {
  left: 31%;
}

.blast-door-right .blast-door-cable.cable-b {
  right: 12%;
}

.blast-door-right .blast-door-wire-loom.loom-a {
  left: 10%;
  bottom: 22%;
  width: 118px;
  transform: rotate(-2deg);
}

.blast-door-right .blast-door-wire-loom.loom-b {
  right: 20%;
  top: 18%;
  width: 92px;
  transform: rotate(2deg);
}

.blast-door-right .blast-door-hinge-rail {
  right: 6%;
}

.blast-door-right .blast-door-motor-box {
  left: 11%;
  top: 44%;
  width: 132px;
}

.blast-door-right .blast-door-lock-pin.pin-a {
  left: 24%;
  top: 48%;
}

.blast-door-right .blast-door-lock-pin.pin-b {
  left: 31%;
  top: 54%;
  animation-delay: -360ms;
}

.blast-door-right .blast-door-bolt-strip.bolts-a {
  left: 7%;
  top: 12%;
  bottom: 12%;
}

.blast-door-right .blast-door-bolt-strip.bolts-b {
  right: 10%;
  top: 18%;
  bottom: 18%;
}

.blast-door-actuator {
  width: min(19vw, 220px);
  height: 24px;
  border: 1px solid rgba(214, 224, 230, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #0a0e13 0 12%, #c7d1d7 13% 25%, #424a52 26% 72%, #d5dde2 73% 82%, #0a0e13 83%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.14) 22px 24px);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.78), 0 0 14px rgba(210, 222, 228, 0.12);
}

.blast-door-actuator::before,
.blast-door-actuator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid rgba(205, 216, 222, 0.48);
  border-radius: 3px;
  background: linear-gradient(#68717a, #151a20);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.blast-door-actuator::before {
  left: -14px;
}

.blast-door-actuator::after {
  right: -14px;
}

.blast-door-actuator.actuator-a {
  left: 15%;
  top: 34%;
}

.blast-door-actuator.actuator-b {
  right: 15%;
  bottom: 34%;
  animation: blast-door-piston 900ms ease-in-out infinite alternate;
}

.blast-door-left .blast-door-actuator.actuator-a {
  left: 12%;
  top: 38%;
  width: min(18vw, 190px);
}

.blast-door-left .blast-door-actuator.actuator-b {
  right: 10%;
  bottom: 29%;
  width: min(17vw, 185px);
}

.blast-door-right .blast-door-actuator.actuator-a {
  left: 24%;
  top: 31%;
  width: min(23vw, 255px);
}

.blast-door-right .blast-door-actuator.actuator-b {
  right: 17%;
  bottom: 39%;
  width: min(16vw, 180px);
}

.blast-door-slider {
  left: 13%;
  right: 13%;
  height: 18px;
  border: 1px solid rgba(211, 222, 227, 0.4);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 16%, #cdd7dc 16% 22%, transparent 22%),
    linear-gradient(#11161b, #46505a 50%, #11161b);
  box-shadow: inset 0 0 11px rgba(0, 0, 0, 0.76), 0 0 10px rgba(0, 0, 0, 0.36);
  animation: blast-door-slider 1.55s ease-in-out infinite alternate;
}

.blast-door-slider.slider-a {
  top: 44%;
}

.blast-door-slider.slider-b {
  bottom: 44%;
  animation-delay: -520ms;
}

.blast-door-left .blast-door-slider.slider-a {
  left: 8%;
  right: 22%;
  top: 46%;
}

.blast-door-left .blast-door-slider.slider-b {
  left: 14%;
  right: 12%;
  bottom: 39%;
}

.blast-door-right .blast-door-slider.slider-a {
  left: 18%;
  right: 7%;
  top: 41%;
}

.blast-door-right .blast-door-slider.slider-b {
  left: 7%;
  right: 24%;
  bottom: 47%;
}

.blast-door-gear {
  width: clamp(42px, 5.7vw, 68px);
  height: clamp(42px, 5.7vw, 68px);
  border-radius: 50%;
  border: 8px dashed rgba(217, 226, 232, 0.58);
  background:
    radial-gradient(circle, #0b0f14 0 22%, rgba(255, 210, 88, 0.48) 23% 29%, #20262d 30% 45%, transparent 46%),
    conic-gradient(#87919a, #2d343c 16%, #c8d2d8 22%, #3d454e 34%, #87919a);
  box-shadow:
    0 0 0 10px rgba(0, 0, 0, 0.24),
    0 0 0 12px rgba(210, 222, 228, 0.18),
    inset 0 0 16px rgba(0, 0, 0, 0.78);
  animation: blast-door-gear 2.2s linear infinite;
}

.blast-door-gear.gear-a {
  left: 10%;
  top: 28%;
}

.blast-door-gear.gear-b {
  right: 10%;
  top: 28%;
  animation-direction: reverse;
  animation-duration: 1.8s;
}

.blast-door-gear.gear-c {
  left: 10%;
  bottom: 28%;
  width: clamp(32px, 4.5vw, 54px);
  height: clamp(32px, 4.5vw, 54px);
  border-width: 6px;
  animation-duration: 1.2s;
}

.blast-door-gear.gear-d {
  right: 10%;
  bottom: 28%;
  width: clamp(32px, 4.5vw, 54px);
  height: clamp(32px, 4.5vw, 54px);
  border-width: 6px;
  animation-direction: reverse;
  animation-duration: 1.35s;
}

.blast-door-left .blast-door-gear.gear-a {
  left: 8%;
  top: 29%;
}

.blast-door-left .blast-door-gear.gear-b {
  right: 18%;
  top: 18%;
  width: clamp(30px, 4.2vw, 50px);
  height: clamp(30px, 4.2vw, 50px);
  border-width: 5px;
}

.blast-door-left .blast-door-gear.gear-c {
  left: 9%;
  bottom: 24%;
}

.blast-door-left .blast-door-gear.gear-d {
  right: 33%;
  bottom: 15%;
}

.blast-door-right .blast-door-gear.gear-a {
  left: 20%;
  top: 17%;
  width: clamp(30px, 4.1vw, 48px);
  height: clamp(30px, 4.1vw, 48px);
  border-width: 5px;
}

.blast-door-right .blast-door-gear.gear-b {
  right: 7%;
  top: 30%;
}

.blast-door-right .blast-door-gear.gear-c {
  left: 24%;
  bottom: 15%;
}

.blast-door-right .blast-door-gear.gear-d {
  right: 9%;
  bottom: 25%;
  width: clamp(42px, 5.6vw, 68px);
  height: clamp(42px, 5.6vw, 68px);
  border-width: 8px;
}

.blast-door-shutter {
  width: 92px;
  height: 54px;
  border: 1px solid rgba(206, 220, 226, 0.36);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, #727b84 0 5px, #14191f 5px 10px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.72), 0 0 12px rgba(0, 0, 0, 0.38);
  animation: blast-door-shutter 980ms steps(4, end) infinite;
}

.blast-door-shutter.shutter-a {
  left: 15%;
  top: 23%;
}

.blast-door-shutter.shutter-b {
  right: 15%;
  bottom: 23%;
  animation-delay: -340ms;
}

.blast-door-left .blast-door-shutter.shutter-a {
  left: 16%;
  top: 20%;
}

.blast-door-left .blast-door-shutter.shutter-b {
  right: 9%;
  bottom: 19%;
  width: 76px;
}

.blast-door-right .blast-door-shutter.shutter-a {
  left: 10%;
  top: 58%;
  width: 78px;
}

.blast-door-right .blast-door-shutter.shutter-b {
  right: 13%;
  bottom: 17%;
  width: 112px;
}

.blast-door-status-light {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #48edff;
  box-shadow: 0 0 12px #48edff, 0 0 28px rgba(72, 237, 255, 0.42);
}

.blast-door-status-light.light-a {
  left: 28%;
  top: 26%;
  animation: blast-door-light 640ms steps(2, end) infinite;
}

.blast-door-status-light.light-b {
  right: 28%;
  bottom: 26%;
  background: #ffd65f;
  box-shadow: 0 0 12px #ffd65f, 0 0 28px rgba(255, 214, 95, 0.38);
  animation: blast-door-light 920ms steps(2, end) infinite reverse;
}

.blast-door-left .blast-door-status-light.light-a {
  left: 30%;
  top: 28%;
}

.blast-door-left .blast-door-status-light.light-b {
  right: 22%;
  bottom: 21%;
}

.blast-door-right .blast-door-status-light.light-a {
  left: 17%;
  top: 60%;
}

.blast-door-right .blast-door-status-light.light-b {
  right: 26%;
  bottom: 32%;
}

.blast-door-warning {
  left: 50%;
  top: 50%;
  width: min(20vw, 172px);
  height: min(20vw, 172px);
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 210, 88, 0.62);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(255, 210, 88, 0.2) 0 20%, transparent 21%),
    linear-gradient(90deg, transparent 0 47%, rgba(255, 210, 88, 0.22) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 0 47%, rgba(255, 210, 88, 0.22) 47% 53%, transparent 53%),
    rgba(9, 13, 18, 0.18);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.38), 0 0 20px rgba(255, 210, 88, 0.11);
}

.blast-door-left .blast-door-warning {
  left: 48%;
  top: 52%;
  width: min(18vw, 154px);
  height: min(18vw, 154px);
}

.blast-door-right .blast-door-warning {
  left: 53%;
  top: 47%;
  width: min(22vw, 188px);
  height: min(16vw, 136px);
  border-radius: 16px 6px 16px 6px;
}

.blast-door-scanner {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(104, 235, 255, 0.92), transparent);
  box-shadow: 0 0 18px rgba(104, 235, 255, 0.46);
  animation: blast-door-scan 1.65s ease-in-out infinite;
}

.blast-door-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(92px, 12vw, 150px);
  height: clamp(92px, 12vw, 150px);
  transform: translate(-50%, -50%) scale(0.72);
  border: 2px solid rgba(214, 224, 230, 0.76);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 216, 90, 0.9) 0 9%, rgba(31, 38, 46, 0.96) 10% 24%, transparent 25%),
    conic-gradient(from 20deg, rgba(209, 220, 226, 0.28), transparent 18%, rgba(104, 238, 255, 0.22), transparent 52%, rgba(209, 220, 226, 0.28));
  box-shadow: 0 0 34px rgba(176, 197, 207, 0.28), inset 0 0 20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 160ms ease, transform 280ms ease;
}

.blast-door-lock::before,
.blast-door-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 174%;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(211, 222, 227, 0.4);
  background: repeating-linear-gradient(90deg, rgba(211, 222, 227, 0.34) 0 10px, rgba(11, 16, 24, 0.95) 10px 22px);
  box-shadow: 0 0 14px rgba(80, 228, 255, 0.12);
}

.blast-door-lock::after {
  width: 14px;
  height: 174%;
  background: repeating-linear-gradient(0deg, rgba(255, 214, 95, 0.3) 0 10px, rgba(11, 16, 24, 0.95) 10px 22px);
}

.blast-door-transition.is-closed .blast-door-lock,
.blast-door-transition.is-closing .blast-door-lock {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.blast-door-lock span {
  position: absolute;
  inset: 18%;
  border: 2px dashed rgba(218, 229, 235, 0.68);
  border-radius: 50%;
  animation: blast-door-spin 1.35s linear infinite;
}

.blast-door-transition.is-closing .blast-door-leaf {
  transition-duration: 300ms;
}

@keyframes blast-door-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes blast-door-current {
  50% {
    filter: brightness(1.7);
    opacity: 1;
  }
}

@keyframes blast-door-loom {
  to {
    background-position: 24px 0, 24px 0;
  }
}

@keyframes blast-door-piston {
  to {
    filter: brightness(1.22);
    translate: 8px 0;
  }
}

@keyframes blast-door-lock-pin {
  to {
    translate: 10px 0;
    filter: brightness(1.16);
  }
}

@keyframes blast-door-light {
  50% {
    opacity: 0.28;
    filter: saturate(1.8);
  }
}

@keyframes blast-door-gear {
  to {
    transform: rotate(360deg);
  }
}

@keyframes blast-door-slider {
  to {
    background-position: 62% 0, 0 0;
    filter: brightness(1.16);
  }
}

@keyframes blast-door-shutter {
  50% {
    filter: brightness(1.18);
    background-position: 0 10px, 0 0;
  }
}

@keyframes blast-door-scan {
  0%, 100% {
    transform: translateY(-150px);
    opacity: 0;
  }

  18%, 82% {
    opacity: 0.9;
  }

  50% {
    transform: translateY(150px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .blast-door-leaf,
  :root:not([data-ui-motion="full"]) .blast-door-lock {
    transition-duration: 1ms;
  }

  :root:not([data-ui-motion="full"]) .blast-door-cable.cable-b,
  :root:not([data-ui-motion="full"]) .blast-door-wire-loom,
  :root:not([data-ui-motion="full"]) .blast-door-motor-box::before,
  :root:not([data-ui-motion="full"]) .blast-door-lock-pin,
  :root:not([data-ui-motion="full"]) .blast-door-actuator.actuator-b,
  :root:not([data-ui-motion="full"]) .blast-door-status-light,
  :root:not([data-ui-motion="full"]) .blast-door-gear,
  :root:not([data-ui-motion="full"]) .blast-door-slider,
  :root:not([data-ui-motion="full"]) .blast-door-shutter,
  :root:not([data-ui-motion="full"]) .blast-door-scanner,
  :root:not([data-ui-motion="full"]) .blast-door-lock span {
    animation: none;
  }
}

/* src/styles/responsive-mobile.css */
/* Responsive and small-mobile overrides */
.hidden {
  display: none !important;
}

.help p {
  margin: 0;
}

@media (max-width: 760px) {
  .hud {
    padding: 10px;
    gap: 8px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .leaderboard {
    width: min(220px, calc(100vw - 20px));
  }

  .minimap {
    left: 10px;
    top: 86px;
    bottom: auto;
    width: 136px;
    padding: 8px;
    pointer-events: auto;
  }

  #minimapCanvas {
    width: 118px;
    height: 118px;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .stats {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .auth-panel {
    left: 10px;
    top: 10px;
    gap: 6px;
  }

  .profile-card {
    width: min(250px, calc(100vw - 112px));
  }

  .settings-button {
    min-width: 82px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .resource-panel {
    right: 10px;
    top: 10px;
  }

  .resource-card {
    min-width: 86px;
    grid-template-columns: 22px auto;
    gap: 6px;
    padding: 7px 8px;
  }

  .platinum-icon {
    width: 21px;
    height: 21px;
  }

  .platinum-icon::before,
  .platinum-icon::after {
    inset: 1px;
  }

  .platinum-icon::after {
    inset: 6px;
  }

  .resource-card b {
    font-size: 21px;
  }

  .daily-reward-hint {
    font-size: 9px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .default-ship-module-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-shell {
    grid-template-columns: 1fr;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monetization-panel {
    grid-template-columns: 1fr;
  }

  .platinum-pack-grid {
    grid-template-columns: 1fr;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }

  .cosmetics-grid {
    grid-template-columns: 1fr;
  }

  .shop-card {
    min-height: 160px;
  }

  .legal-corner-button {
    right: 10px;
    bottom: 8px;
  }

  .start-layout {
    width: min(420px, calc(100vw - 20px));
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .start-side-panel {
    display: none;
  }

  .start-screen {
    padding: 10px;
  }

  .start-panel {
    max-height: calc(100svh - 20px);
    gap: clamp(8px, 2.4vmin, 10px);
    overflow-y: auto;
    padding: clamp(14px, 4vmin, 18px);
    border-radius: 10px;
  }

  .start-panel h1 {
    font-size: clamp(25px, 8vw, 30px);
  }

  input,
  select {
    padding: clamp(8px, 2.2vmin, 10px);
  }

  #playButton {
    padding: 10px 12px;
  }

  .module-panel {
    grid-template-columns: repeat(2, minmax(104px, 1fr));
    max-width: 232px;
  }

  .module-button,
  .actions button {
    padding: 8px;
    font-size: 13px;
  }

  .actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .help {
    font-size: 12px;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .hud {
    padding: clamp(6px, 1.8vmin, 10px);
    gap: clamp(5px, 1.4vmin, 8px);
  }

  .topbar {
    max-width: min(520px, calc(100vw - 16px));
    padding: clamp(6px, 1.8vmin, 9px) clamp(8px, 2.2vmin, 11px);
    border-radius: 8px;
    font-size: clamp(11px, 2.7vmin, 13px);
  }

  .topbar strong {
    margin-right: 8px;
  }

  .leaderboard {
    width: min(clamp(150px, 34vw, 220px), calc(100vw - 16px));
    padding: clamp(6px, 1.6vmin, 8px);
    font-size: clamp(10px, 2.5vmin, 12px);
  }

  .singleplayer-panel {
    top: auto;
    right: clamp(6px, 1.8vmin, 10px);
    bottom: clamp(6px, 1.8vmin, 10px);
    width: min(310px, calc(100vw - clamp(12px, 3.6vmin, 20px)));
    padding: clamp(7px, 1.8vmin, 9px);
  }

  .singleplayer-panel p,
  .singleplayer-actions button {
    font-size: clamp(10px, 2.5vmin, 12px);
  }

  .leaderboard h2,
  .leaderboard b,
  .leaderboard li {
    font-size: clamp(10px, 2.5vmin, 12px);
  }

  .leaderboard li {
    grid-template-columns: clamp(16px, 4.8vmin, 20px) minmax(0, 1fr) auto;
    gap: 6px;
  }

  .leaderboard li::before {
    width: clamp(16px, 4.8vmin, 20px);
    height: clamp(16px, 4.8vmin, 20px);
    border-radius: 6px;
    font-size: clamp(9px, 2.3vmin, 11px);
  }

  .minimap {
    left: clamp(6px, 1.8vmin, 10px);
    top: clamp(72px, 16svh, 86px);
    bottom: auto;
    width: clamp(100px, 28vmin, 136px);
    padding: clamp(5px, 1.6vmin, 8px);
  }

  .minimap h2 {
    margin-bottom: 5px;
    font-size: clamp(9px, 2.3vmin, 11px);
  }

  #minimapCanvas {
    width: calc(clamp(100px, 28vmin, 136px) - clamp(12px, 3.6vmin, 18px));
    height: calc(clamp(100px, 28vmin, 136px) - clamp(12px, 3.6vmin, 18px));
  }

  :root {
    --side-rail-top: clamp(58px, 14svh, 84px);
    --side-rail-gap: clamp(6px, 1.6vmin, 9px);
    --side-rail-width: clamp(54px, 12vw, 74px);
    --side-upgrade-height: clamp(58px, 14svh, 76px);
    --side-service-height: clamp(54px, 13svh, 68px);
    --side-service-top: calc(var(--side-rail-top) + var(--side-upgrade-height) + var(--side-rail-gap));
    --side-panel-width: min(340px, calc(100vw - var(--side-rail-width) - 8px));
    --side-panel-left: var(--side-panel-width);
    --side-icon-size: clamp(28px, 7vw, 40px);
    --side-upgrade-icon-size: clamp(26px, 6.4vw, 36px);
    --side-label-size: clamp(10px, 2.4vw, 14px);
    --side-upgrade-label-size: clamp(9px, 2.1vw, 12px);
  }

  .upgrade-toggle {
    padding: clamp(6px, 1.8vmin, 9px) 5px clamp(5px, 1.4vmin, 7px);
  }

  .base-action-button {
    padding: clamp(7px, 1.8vmin, 9px) 5px clamp(6px, 1.6vmin, 8px);
  }

  .ship-builder-panel,
  .upgrade-panel {
    width: var(--side-panel-width);
    padding: clamp(10px, 2.6vmin, 14px);
  }

  .builder-header {
    gap: 8px;
    padding-bottom: 10px;
  }

  .builder-header h2 {
    font-size: clamp(17px, 4.4vw, 20px);
  }

  .builder-tabs {
    gap: 6px;
    padding-bottom: 8px;
  }

  .builder-tab {
    height: clamp(30px, 7.5vh, 36px);
    font-size: clamp(11px, 3vw, 13px);
  }

  .builder-palette {
    grid-template-columns: 1fr;
    gap: clamp(7px, 1.8vmin, 10px);
  }

  .builder-card {
    grid-template-rows: minmax(58px, auto);
    grid-template-columns: clamp(58px, 16vmin, 78px) minmax(0, 1fr);
    min-height: clamp(58px, 16vmin, 72px);
  }

  .builder-card canvas {
    width: clamp(46px, 12vmin, 58px);
    height: clamp(46px, 12vmin, 58px);
  }

  .builder-card-body {
    min-height: 0;
    padding: 7px;
  }

  .mobile-joystick {
    --stick-size: clamp(84px, 20vmin, 126px);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .topbar {
    flex-direction: row;
    align-items: center;
  }

  .start-screen {
    align-items: start;
    padding: 54px 18px 16px clamp(114px, 18vw, 126px);
  }

  .start-layout {
    width: min(520px, calc(100vw - clamp(142px, 21vw, 154px)));
    grid-template-columns: minmax(110px, 1fr) clamp(218px, 35vw, 238px) minmax(110px, 1fr);
    gap: 8px;
  }

  .start-side-panel {
    display: grid;
    min-height: calc(100svh - 70px);
  }

  .default-ship-panel,
  .menu-side-panel {
    padding: 8px;
  }

  .default-ship-panel {
    gap: 7px;
  }

  .default-ship-preview {
    min-height: 0;
  }

  #defaultShipCanvas {
    max-width: min(100%, 110px);
  }

  .default-ship-edit-button {
    min-height: 48px;
  }

  .default-ship-status {
    min-height: 14px;
    font-size: 10px;
  }

  .default-ship-status.login-required {
    min-height: 32px;
    font-size: clamp(13px, 3.4vw, 18px);
  }

  .menu-side-panel {
    grid-template-rows: repeat(3, minmax(0, 1fr)) 38px;
    gap: 7px;
  }

  .main-menu-button {
    min-height: 0;
    padding: 8px;
  }

  .main-menu-label {
    font-size: clamp(12px, 2.4vw, 16px);
  }

  .menu-art {
    right: 6px;
    bottom: 6px;
    width: 64px;
    height: 42px;
    transform: scale(0.52);
    transform-origin: right bottom;
  }

  .booster-row {
    gap: 5px;
  }

  .booster-row button {
    min-height: 38px;
    padding: 6px;
    font-size: 13px;
  }

  .start-panel {
    max-height: calc(100svh - 70px);
    gap: 5px;
    padding: 8px 14px;
  }

  .start-panel h1 {
    font-size: clamp(23px, 5.2vw, 27px);
  }

  .start-panel label,
  #startStatus {
    font-size: 12px;
  }

  input,
  select {
    padding: 7px 9px;
  }

  #playButton {
    padding: 7px 10px;
  }

  .login-button {
    min-width: 108px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .settings-button {
    min-width: 88px;
  }

  .resource-panel {
    right: 18px;
    top: 10px;
  }

  .minimap {
    left: clamp(112px, 20vw, 140px);
    width: clamp(86px, 22vmin, 112px);
  }

  #minimapCanvas {
    width: calc(clamp(86px, 22vmin, 112px) - clamp(10px, 3vmin, 16px));
    height: calc(clamp(86px, 22vmin, 112px) - clamp(10px, 3vmin, 16px));
  }

  :root {
    --side-rail-top: calc(env(safe-area-inset-top, 0px) + clamp(50px, 14svh, 64px));
    --side-rail-gap: 5px;
    --side-rail-width: clamp(48px, 9vw, 60px);
    --side-upgrade-height: clamp(44px, 12svh, 52px);
    --side-service-height: clamp(44px, 12svh, 52px);
    --side-service-top: calc(var(--side-rail-top) + var(--side-upgrade-height) + var(--side-rail-gap));
    --side-panel-width: min(316px, calc(100vw - var(--side-rail-width) - 6px));
    --side-panel-left: var(--side-panel-width);
    --side-icon-size: clamp(22px, 5.2vw, 30px);
    --side-upgrade-icon-size: clamp(22px, 5vw, 28px);
    --side-label-size: clamp(8px, 1.8vw, 11px);
    --side-upgrade-label-size: clamp(8px, 1.7vw, 10px);
  }

  .builder-palette {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 10px;
  }

  .builder-card {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: minmax(50px, auto);
    min-height: 52px;
  }

  .builder-card canvas {
    width: 42px;
    height: 42px;
  }

  .builder-card-body {
    min-height: 0;
    padding: 6px 7px;
    align-content: center;
  }
}

.start-advanced-fields {
  display: grid;
  gap: 12px;
}

.mobile-menu-button,
.mobile-fullscreen-button,
.mobile-ship-button,
.mobile-ship-drawer,
.mobile-menu-drawer {
  display: none;
}

.mobile-menu-button,
.mobile-fullscreen-button {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 70;
  width: 46px;
  height: 42px;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(244, 247, 239, 0.22);
  border-radius: 8px;
  background: rgba(7, 9, 9, 0.88);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.mobile-menu-button {
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  gap: 4px;
}

.mobile-fullscreen-button {
  right: calc(env(safe-area-inset-right, 0px) + 64px);
}

.mobile-ship-button {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 69;
  width: 58px;
  height: 88px;
  place-items: center;
  grid-template-rows: auto auto;
  gap: 3px;
  padding: 8px 5px 7px;
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(7, 9, 9, 0.88);
  color: var(--green);
  box-shadow: 10px 0 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transform: translateY(-50%);
}

.mobile-ship-label {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.mobile-menu-button span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
}

.mobile-fullscreen-button span {
  width: 22px;
  height: 22px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 9px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 9px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 2px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 9px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 2px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 9px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 2px 9px no-repeat;
}

.mobile-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.mobile-ship-drawer {
  position: fixed;
  inset: 0;
  z-index: 79;
  pointer-events: none;
}

.mobile-menu-drawer:not(.hidden) {
  display: block;
}

.mobile-ship-drawer:not(.hidden) {
  display: block;
}

.mobile-menu-backdrop,
.mobile-ship-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  transition: opacity 160ms ease;
}

.mobile-ship-sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(314px, calc(100vw - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border-right: 1px solid rgba(244, 247, 239, 0.16);
  background: rgba(7, 9, 9, 0.96);
  box-shadow: 18px 0 46px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  transform: translateX(-102%);
  transition: transform 180ms ease;
}

.mobile-menu-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(330px, calc(100vw - 18px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border-left: 1px solid rgba(244, 247, 239, 0.16);
  background: rgba(7, 9, 9, 0.96);
  box-shadow: -18px 0 46px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  transform: translateX(102%);
  transition: transform 180ms ease;
}

body.mobile-menu-open .mobile-menu-drawer {
  pointer-events: auto;
}

body.mobile-ship-open .mobile-ship-drawer {
  pointer-events: auto;
}

body.mobile-menu-open .mobile-menu-backdrop,
body.mobile-ship-open .mobile-ship-backdrop {
  opacity: 1;
}

body.mobile-menu-open .mobile-menu-sheet {
  transform: translateX(0);
}

body.mobile-ship-open .mobile-ship-sheet {
  transform: translateX(0);
}

.mobile-menu-head,
.mobile-ship-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}

.mobile-menu-head h2,
.mobile-ship-head h2 {
  margin: 0;
  color: var(--green);
  font-size: 18px;
  line-height: 1;
}

.mobile-menu-close,
.mobile-ship-close {
  min-height: 38px;
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background: rgba(14, 17, 15, 0.92);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 8px 10px;
}

.mobile-ship-slot {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 2px;
}

.mobile-menu-slot:empty {
  display: none;
}

.mobile-drawer-action {
  min-height: 44px;
  border: 1px solid rgba(244, 247, 239, 0.2);
  border-radius: 8px;
  background: rgba(14, 17, 15, 0.92);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 9px 10px;
  text-align: left;
}

body.is-small-mobile .mobile-menu-drawer .mobile-wiki-action {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 11px;
  overflow: hidden;
  border-color: rgba(83, 211, 226, 0.64);
  background:
    linear-gradient(90deg, rgba(83, 211, 226, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(27, 39, 34, 0.98), rgba(7, 12, 10, 0.98));
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    inset 4px 0 0 rgba(83, 211, 226, 0.68),
    0 4px 0 #030403,
    0 8px 14px rgba(0, 0, 0, 0.3);
  transition: transform 100ms ease, border-color 140ms ease, filter 140ms ease;
}

.mobile-wiki-icon {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(136, 238, 246, 0.78);
  background: rgba(30, 94, 99, 0.24);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  box-shadow: inset 0 0 14px rgba(83, 211, 226, 0.17);
}

.mobile-wiki-icon::before,
.mobile-wiki-icon::after {
  content: "";
  position: absolute;
}

.mobile-wiki-icon::before {
  width: 13px;
  height: 13px;
  border: 2px solid #93f3ef;
  transform: rotate(45deg);
}

.mobile-wiki-icon::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e3ff9d;
  box-shadow: 0 0 8px rgba(227, 255, 157, 0.72);
}

.mobile-wiki-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobile-wiki-copy strong {
  color: #9ef4ed;
  font-size: 15px;
  line-height: 1.05;
}

.mobile-wiki-copy small {
  overflow: hidden;
  color: rgba(209, 226, 208, 0.7);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-wiki-arrow {
  color: #e3ff9d;
  font-size: 18px;
  line-height: 1;
}

body.is-small-mobile .mobile-menu-drawer .mobile-wiki-action:active {
  transform: translateY(2px) scale(0.995);
  filter: brightness(1.12);
}

body.is-small-mobile .mobile-menu-drawer .mobile-wiki-action:focus-visible {
  outline: 2px solid #e3ff9d;
  outline-offset: 2px;
}

body.is-small-mobile .mobile-menu-button:not(.hidden) {
  display: grid !important;
}

body.is-small-mobile .mobile-fullscreen-button:not(.hidden) {
  display: grid !important;
}

body.is-small-mobile .mobile-fullscreen-button {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 5px;
  border-radius: 7px;
  box-shadow: none;
  backdrop-filter: none;
}

body.is-small-mobile .mobile-fullscreen-button span {
  width: 17px;
  height: 17px;
  background-size:
    7px 2px, 2px 7px,
    7px 2px, 2px 7px,
    7px 2px, 2px 7px,
    7px 2px, 2px 7px;
}

body.is-small-mobile .mobile-menu-button {
  top: calc(env(safe-area-inset-top, 0px) + 70px);
}

body.is-small-mobile .mobile-ship-button:not(.hidden) {
  display: grid !important;
}

body.is-playing .mobile-ship-button,
body.is-playing .mobile-ship-drawer {
  display: none !important;
  pointer-events: none !important;
}

body.is-small-mobile:not(.is-playing) .auth-panel {
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  display: flex !important;
  gap: 6px;
}

body.is-small-mobile:not(.is-playing) .auth-panel .settings-button {
  display: none;
}

body.is-small-mobile:not(.is-playing) .login-button {
  min-width: 96px;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12px;
}

body.is-small-mobile:not(.is-playing) .profile-card {
  width: min(190px, calc(100vw - 128px));
  padding: 7px;
  border-radius: 8px;
}

body.is-small-mobile.small-mobile-landscape:not(.is-playing) .profile-card {
  width: min(178px, calc(100vw - 148px));
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  padding: 6px;
}

body.is-small-mobile.small-mobile-landscape:not(.is-playing) .profile-avatar {
  width: 30px;
  height: 30px;
}

body.is-small-mobile:not(.is-playing) .resource-panel:not(.hidden) {
  left: auto;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  display: block !important;
}

body.is-small-mobile.small-mobile-landscape:not(.is-playing) .resource-panel:not(.hidden) {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
}

body.is-small-mobile:not(.is-playing) .resource-card {
  min-width: 84px;
  padding: 6px 8px;
  border-radius: 8px;
}

body.is-small-mobile:not(.is-playing) .daily-reward-hint {
  font-size: 8px;
}

body.is-small-mobile .start-screen:not(.hidden),
body.is-small-mobile .hud:not(.hidden),
body.is-small-mobile .profile-modal:not(.hidden),
body.is-small-mobile .menu-modal:not(.hidden),
body.is-small-mobile .settings-modal:not(.hidden) {
  display: grid !important;
}

body.is-small-mobile .mobile-controls.visible:not(.hidden) {
  display: block !important;
}

body.is-small-mobile .hud {
  z-index: 96;
}

body.is-small-mobile .base-action-rail {
  z-index: 98;
}

body.is-small-mobile .base-action-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.is-small-mobile .start-screen {
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 76px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
}

body.is-small-mobile .start-layout {
  width: min(380px, calc(100vw - 24px));
  grid-template-columns: 1fr;
  gap: 0;
}

body.is-small-mobile .start-panel {
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px);
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}

body.is-small-mobile .start-advanced-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.is-small-mobile .start-advanced-fields label {
  min-width: 0;
  font-size: 12px;
}

body.is-small-mobile .start-advanced-fields .choice-field {
  grid-column: 1 / -1;
}

body.is-small-mobile .choice-radio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.is-small-mobile .choice-radio {
  min-height: 38px;
  padding: 6px 7px;
  font-size: 12px;
}

body.is-small-mobile .start-advanced-fields select {
  min-height: 40px;
  padding: 8px;
  font-size: 13px;
}

body.is-small-mobile .custom-server-field {
  display: grid;
  gap: 5px;
}

body.is-small-mobile .custom-server-field.hidden {
  display: none !important;
}

body.is-small-mobile .start-panel h1 {
  font-size: 29px;
  line-height: 1.02;
}

body.is-small-mobile .eyebrow {
  font-size: 13px;
}

body.is-small-mobile #playButton {
  min-height: 46px;
  border-radius: 8px;
  font-size: 16px;
}

body.is-small-mobile #startStatus {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.2;
}

body.small-mobile-landscape .start-screen {
  align-items: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 10px)
    calc(env(safe-area-inset-right, 0px) + 82px)
    calc(env(safe-area-inset-bottom, 0px) + 10px)
    calc(env(safe-area-inset-left, 0px) + 82px);
}

body.small-mobile-landscape .start-layout {
  width: min(420px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 164px));
}

body.small-mobile-landscape .start-panel {
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  gap: 7px;
  padding: 12px 14px;
}

body.small-mobile-landscape .start-panel h1 {
  font-size: 23px;
}

body.small-mobile-landscape .start-panel label {
  gap: 4px;
}

body.small-mobile-landscape .start-panel input {
  min-height: 40px;
  padding: 9px 10px;
}

body.small-mobile-landscape .choice-radio-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.small-mobile-landscape .server-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.small-mobile-landscape .choice-radio {
  display: flex;
  min-height: 34px;
  padding: 6px;
  align-items: center;
  justify-content: flex-start;
}

body.small-mobile-landscape .choice-radio input {
  min-height: 0;
  padding: 0;
}

body.small-mobile-landscape #playButton {
  min-height: 42px;
}

body.is-small-mobile .mobile-menu-drawer .auth-panel {
  position: static;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.is-small-mobile .mobile-menu-drawer .profile-card {
  grid-column: 1 / -1;
  width: 100%;
}

body.is-small-mobile .mobile-menu-drawer .login-button,
body.is-small-mobile .mobile-menu-drawer .settings-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

body.is-small-mobile .mobile-menu-drawer .resource-panel {
  position: static;
  display: block !important;
}

body.is-small-mobile .mobile-menu-drawer .resource-panel.hidden {
  display: none !important;
}

body.is-small-mobile .mobile-menu-drawer .resource-card {
  width: 100%;
  min-width: 0;
  justify-content: start;
}

body.is-small-mobile .mobile-menu-drawer .start-side-panel,
body.is-small-mobile .mobile-ship-drawer .start-side-panel {
  display: grid !important;
  min-height: 0;
  border-radius: 8px;
}

body.is-small-mobile .mobile-menu-drawer .menu-side-panel {
  padding: 10px;
  gap: 8px;
}

body.is-small-mobile .mobile-ship-drawer .default-ship-panel {
  min-height: 100%;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 12px;
}

body.is-small-mobile .mobile-ship-drawer .default-ship-preview {
  min-height: 260px;
  align-content: center;
}

body.is-small-mobile .mobile-ship-drawer #defaultShipCanvas {
  width: min(260px, 100%);
  max-width: none;
}

body.is-small-mobile .mobile-ship-drawer .default-ship-edit-button {
  min-height: 50px;
}

body.is-small-mobile .mobile-ship-drawer .default-ship-status {
  min-height: 14px;
  font-size: 11px;
}

body.is-small-mobile .mobile-ship-drawer .default-ship-status.login-required {
  min-height: 30px;
  font-size: clamp(13px, 3.6vw, 17px);
}

body.is-small-mobile .mobile-menu-drawer .start-advanced-fields {
  padding: 10px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(12, 14, 12, 0.72);
  gap: 9px;
}

body.is-small-mobile .mobile-menu-drawer .custom-server-field {
  padding: 10px;
  border: 1px solid rgba(244, 247, 239, 0.14);
  border-radius: 8px;
  background: rgba(12, 14, 12, 0.72);
  color: var(--muted);
  font-size: 12px;
}

body.is-small-mobile .mobile-menu-drawer .start-advanced-fields label {
  gap: 5px;
  font-size: 12px;
}

body.is-small-mobile .mobile-menu-drawer input,
body.is-small-mobile .mobile-menu-drawer select {
  min-height: 40px;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
}

body.is-small-mobile .mobile-menu-drawer .menu-side-panel {
  grid-template-rows: none;
  grid-auto-rows: minmax(54px, auto);
}

body.is-small-mobile .mobile-menu-drawer .main-menu-button {
  min-height: 58px;
  padding: 10px;
}

body.is-small-mobile .mobile-menu-drawer .main-menu-label {
  font-size: 17px;
}

body.is-small-mobile .mobile-menu-drawer .menu-art {
  right: 7px;
  bottom: 5px;
  width: 72px;
  height: 46px;
  transform: scale(0.56);
  transform-origin: right bottom;
}

body.is-small-mobile .mobile-menu-drawer .booster-row {
  gap: 6px;
}

body.is-small-mobile .mobile-menu-drawer .booster-row button {
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;
}

body.is-small-mobile .mobile-menu-drawer .support-corner-button,
body.is-small-mobile .mobile-menu-drawer .legal-corner-button {
  position: static;
  display: block !important;
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  font-size: 13px;
}

body.is-playing.is-small-mobile .mobile-menu-button:not(.hidden),
body.is-playing.is-small-mobile .mobile-ship-button:not(.hidden),
body.is-playing .mobile-menu-button,
body.is-playing .mobile-ship-button,
body.is-playing .mobile-menu-drawer:not(.hidden),
body.is-playing .mobile-ship-drawer:not(.hidden),
body.is-playing.is-small-mobile .mobile-menu-drawer .auth-panel,
body.is-playing.is-small-mobile .mobile-menu-drawer .resource-panel,
body.is-playing.is-small-mobile .mobile-menu-drawer .menu-side-panel,
body.is-playing.is-small-mobile .mobile-menu-drawer .support-corner-button,
body.is-playing.is-small-mobile .mobile-menu-drawer .legal-corner-button,
body.is-playing.is-small-mobile .mobile-ship-drawer .default-ship-panel,
body.is-playing.is-small-mobile .profile-modal:not(.hidden),
body.is-playing.is-small-mobile .menu-modal:not(.gameplay-modal):not(.hidden) {
  display: none !important;
  pointer-events: none !important;
}

body.is-small-mobile .topbar {
  max-width: calc(100vw - 68px - env(safe-area-inset-right, 0px));
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 11px;
  background: rgba(10, 13, 11, 0.94);
  backdrop-filter: none;
  contain: layout style;
}

body.is-small-mobile .topbar > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
}

body.is-small-mobile .topbar strong {
  margin-right: 0;
  font-size: 12px;
}

body.is-small-mobile .topbar-settings-button {
  display: none;
}

body.is-small-mobile .stats {
  gap: 6px;
  font-size: 11px;
}

body.is-small-mobile .mobile-hud-options {
  display: block;
}

body.is-small-mobile .mass-stat {
  display: none;
}

/* Keep the always-visible gameplay status rail slim on phones. The expanded
   options menu retains its larger touch targets; only the closed rail is
   compressed so it does not cover the playfield. */
body.is-playing.is-small-mobile .topbar {
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px #111510,
    inset 0 0 8px rgba(0, 0, 0, 0.42),
    0 2px 0 #030403,
    0 5px 10px rgba(0, 0, 0, 0.34);
}

body.is-playing.is-small-mobile.small-mobile-portrait .topbar {
  max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 14px);
}

body.is-playing.is-small-mobile .topbar > div:first-child {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 3px 5px;
  white-space: nowrap;
}

body.is-playing.is-small-mobile .topbar strong {
  font-size: 10px;
  line-height: 1;
}

body.is-playing.is-small-mobile .stats {
  min-height: 0;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px #020302,
    inset 0 0 7px rgba(0, 0, 0, 0.56);
}

body.is-playing.is-small-mobile .mobile-hud-options-button {
  height: 24px;
  min-height: 24px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px;
  line-height: 1;
  box-shadow:
    inset 1px 1px 0 rgba(120, 130, 106, 0.32),
    inset -1px -1px 0 #030403,
    0 2px 0 #030403;
}

body.is-playing.is-small-mobile .mobile-fullscreen-button {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 4px;
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 rgba(120, 130, 106, 0.32),
    inset -1px -1px 0 #030403,
    0 2px 0 #030403;
}

body.is-playing.is-small-mobile .mobile-fullscreen-button span {
  width: 14px;
  height: 14px;
  background-size:
    6px 1px, 1px 6px,
    6px 1px, 1px 6px,
    6px 1px, 1px 6px,
    6px 1px, 1px 6px;
}

body.is-small-mobile .leaderboard {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  display: block;
  width: 126px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(10, 13, 11, 0.92);
  backdrop-filter: none;
  contain: layout paint style;
  pointer-events: none;
}

body.is-small-mobile .leaderboard h2 {
  display: none;
}

body.is-small-mobile .leaderboard ol {
  gap: 3px;
}

body.is-small-mobile .leaderboard li {
  grid-template-columns: 15px minmax(0, 1fr) auto;
  gap: 4px;
  font-size: 9px;
}

body.is-small-mobile .leaderboard li:nth-child(n + 6) {
  display: none;
}

body.is-small-mobile .leaderboard li.is-self {
  display: grid;
}

body.is-small-mobile .leaderboard li::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  font-size: 9px;
}

body.is-small-mobile .leaderboard b {
  font-size: 9px;
}

body.is-small-mobile .death-overlay {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
  align-items: center;
}

body.is-small-mobile .death-card {
  width: min(420px, calc(100vw - 20px));
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  overflow-y: auto;
  gap: 10px;
  padding: 14px;
  overscroll-behavior: contain;
}

body.is-small-mobile .death-card h2 {
  font-size: 25px;
}

body.is-small-mobile .outcome-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.is-small-mobile .outcome-stat {
  min-height: 42px;
  padding: 6px 5px;
}

body.is-small-mobile .outcome-stat span {
  font-size: 11px;
}

body.is-small-mobile .outcome-stat b {
  font-size: 20px;
}

body.is-small-mobile .death-item-panel {
  gap: 6px;
}

body.is-small-mobile .death-item-row button {
  min-height: 34px;
  padding: 4px 3px;
  font-size: 11px;
}

body.is-small-mobile .death-actions {
  position: sticky;
  bottom: 0;
  padding-top: 6px;
  background: linear-gradient(180deg, rgba(20, 12, 14, 0), rgba(20, 12, 14, 0.96) 30%);
}

body.is-small-mobile .death-actions button {
  min-height: 42px;
}

body.is-small-mobile.small-mobile-landscape .death-overlay {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
}

body.is-small-mobile.small-mobile-landscape .death-card {
  width: min(760px, calc(100vw - 34px));
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 8px 12px;
  padding: 12px;
  text-align: left;
}

body.is-small-mobile.small-mobile-landscape .death-card > span {
  grid-column: 1;
}

body.is-small-mobile.small-mobile-landscape .death-card h2 {
  grid-column: 1;
  font-size: 25px;
}

body.is-small-mobile.small-mobile-landscape .outcome-stats {
  grid-column: 1;
}

body.is-small-mobile.small-mobile-landscape .death-item-panel {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
}

body.is-small-mobile.small-mobile-landscape .death-item-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.is-small-mobile.small-mobile-landscape .death-item-row button {
  min-height: 58px;
  grid-template-rows: auto auto auto;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10px;
}

body.is-small-mobile.small-mobile-landscape .death-item-row .item-slot-icon {
  width: 28px;
  height: 20px;
}

body.is-small-mobile.small-mobile-landscape .death-item-row .item-slot-name {
  font-size: 9px;
  white-space: normal;
}

body.is-small-mobile.small-mobile-landscape .death-actions {
  grid-column: 1 / 3;
  grid-row: 4;
  position: static;
  padding-top: 0;
  background: transparent;
}

body.is-small-mobile .singleplayer-panel {
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  right: calc(env(safe-area-inset-right, 0px) + 72px);
  bottom: auto;
  width: min(260px, calc(100vw - 176px));
  gap: 6px;
  padding: 8px;
  background: rgba(10, 13, 11, 0.92);
  backdrop-filter: none;
  contain: layout paint style;
}

body.is-small-mobile.builder-panel-open .singleplayer-panel,
body.is-small-mobile.upgrade-panel-open .singleplayer-panel {
  display: none;
}

body.is-small-mobile .singleplayer-panel p,
body.is-small-mobile .singleplayer-actions button {
  font-size: 11px;
}

body.is-small-mobile .singleplayer-actions {
  grid-template-columns: 1fr;
  gap: 6px;
}

body.is-small-mobile .minimap {
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  bottom: auto;
  width: 92px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(10, 13, 11, 0.9);
  backdrop-filter: none;
  contain: layout paint style;
}

body.is-small-mobile .minimap h2 {
  display: none;
}

body.is-small-mobile #minimapCanvas {
  width: 80px;
  height: 80px;
}

body.is-playing.is-small-mobile.small-mobile-landscape .minimap {
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: auto;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  bottom: auto;
}

@media (pointer: coarse) {
  body.is-playing .minimap {
    left: calc(env(safe-area-inset-left, 0px) + 76px);
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    bottom: auto;
    pointer-events: auto;
  }

  body.is-playing #minimapCanvas {
    pointer-events: auto;
    touch-action: manipulation;
  }
}

/* Hold M on desktop or tap the minimap on mobile to temporarily expand it. */
body.is-playing.minimap-expanded .minimap {
  --expanded-minimap-canvas-size: min(
    calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 50px),
    calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 74px),
    834px
  );
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 220;
  width: calc(var(--expanded-minimap-canvas-size) + 26px) !important;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px;
  border-color: rgba(240, 198, 77, 0.78);
  border-radius: 10px;
  background: rgba(6, 7, 6, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
  contain: none;
  transform: translate(-50%, -50%) !important;
}

body.is-playing.minimap-expanded .minimap h2 {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
}

body.is-playing.minimap-expanded #minimapCanvas {
  width: var(--expanded-minimap-canvas-size) !important;
  height: var(--expanded-minimap-canvas-size) !important;
  max-width: none;
  max-height: none;
  border-color: rgba(244, 247, 239, 0.2);
}

body.is-small-mobile .mobile-joystick {
  --stick-size: clamp(88px, 27vmin, 116px);
}

body.is-small-mobile .builder-tooltip {
  display: none !important;
}

body.is-small-mobile .upgrade-toggle,
body.is-small-mobile .base-action-button {
  border-radius: 8px;
}

body.is-small-mobile.small-mobile-landscape .start-screen {
  align-items: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    calc(env(safe-area-inset-right, 0px) + 82px)
    calc(env(safe-area-inset-bottom, 0px) + 8px)
    calc(env(safe-area-inset-left, 0px) + 82px);
}

body.is-small-mobile.small-mobile-landscape .start-layout {
  width: min(420px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 164px));
}

body.is-small-mobile.small-mobile-landscape .start-panel {
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  gap: 5px;
  padding: 10px 12px;
}

body.is-small-mobile.small-mobile-landscape .start-panel h1 {
  font-size: clamp(20px, 5.5svh, 24px);
}

body.is-small-mobile.small-mobile-landscape .start-panel label,
body.is-small-mobile.small-mobile-landscape #startStatus {
  font-size: 11px;
  line-height: 1.05;
}

body.is-small-mobile.small-mobile-landscape .start-panel input {
  min-height: 34px;
  padding: 6px 8px;
}

body.is-small-mobile.small-mobile-landscape .choice-radio-grid {
  gap: 5px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.is-small-mobile.small-mobile-landscape .server-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.is-small-mobile.small-mobile-landscape .choice-radio {
  display: flex;
  min-height: 36px;
  padding: 5px 8px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  font-size: 12px;
}

body.is-small-mobile.small-mobile-landscape .choice-radio input {
  width: 14px;
  height: 14px;
  min-height: 0;
  flex-basis: 14px;
  padding: 0;
}

body.is-small-mobile.small-mobile-landscape .choice-radio span {
  flex: 1 1 auto;
}

body.is-small-mobile.small-mobile-landscape #playButton {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 15px;
}

body.is-small-mobile.small-mobile-landscape {
  --side-rail-top: calc(env(safe-area-inset-top, 0px) + 54px);
  --side-rail-gap: 5px;
  --side-rail-width: 46px;
  --side-upgrade-height: 46px;
  --side-service-height: 46px;
  --side-service-top: calc(var(--side-rail-top) + var(--side-upgrade-height) + var(--side-rail-gap));
  --side-panel-width: min(304px, calc(100vw - var(--side-rail-width) - 4px));
  --side-panel-left: var(--side-panel-width);
  --side-icon-size: 22px;
  --side-upgrade-icon-size: 22px;
  --side-label-size: 8px;
  --side-upgrade-label-size: 8px;
}

body.is-small-mobile.small-mobile-landscape .ship-builder-panel,
body.is-small-mobile.small-mobile-landscape .upgrade-panel {
  width: var(--side-panel-width);
}

body.is-small-mobile.small-mobile-landscape.upgrade-panel-open {
  --side-panel-width: min(430px, calc(100vw - var(--side-rail-width) - 4px));
  --side-panel-left: var(--side-panel-width);
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel {
  overflow: hidden;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel.open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.85fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 7px 8px;
  padding: 8px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-header {
  grid-column: 1 / -1;
  padding-bottom: 0;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-header h2 {
  font-size: 15px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-header p {
  font-size: 10px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-list {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  gap: 6px;
  padding: 1px 2px 4px 0;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-section {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  margin-top: 0;
  padding: 0 0 0 8px;
  border-top: 0;
  border-left: 1px solid rgba(244, 247, 239, 0.14);
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-section-title {
  margin-bottom: 5px;
  font-size: 10px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-list {
  min-height: 0;
  gap: 6px;
  padding: 1px 2px 4px 0;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-card,
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card {
  gap: 5px 7px;
  padding: 7px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-card h3,
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card h3 {
  font-size: 11px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-card p,
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card p {
  font-size: 10px;
  line-height: 1.15;
}

body.is-small-mobile.small-mobile-landscape .upgrade-panel .upgrade-buy,
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-buy,
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-equip {
  min-width: 58px;
  min-height: 28px;
  font-size: 10px;
}

body.is-small-mobile.small-mobile-landscape .upgrade-toggle {
  padding: 4px 3px;
}

body.is-small-mobile.small-mobile-landscape .base-action-button {
  padding: 4px 3px;
}

body.is-small-mobile.small-mobile-landscape.builder-panel-open .upgrade-toggle,
body.is-small-mobile.small-mobile-landscape.builder-panel-open .base-action-rail,
body.is-small-mobile.small-mobile-landscape.upgrade-panel-open .upgrade-toggle,
body.is-small-mobile.small-mobile-landscape.upgrade-panel-open .base-action-rail {
  left: var(--side-panel-left);
}

body.is-small-mobile.small-mobile-portrait .mobile-menu-sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: min(calc(100svh - 60px), 720px);
  border-top: 1px solid rgba(244, 247, 239, 0.16);
  border-left: 0;
  border-radius: 8px 8px 0 0;
  transform: translateY(102%);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.44);
}

body.is-small-mobile.small-mobile-portrait.mobile-menu-open .mobile-menu-sheet {
  transform: translateY(0);
}

body.is-small-mobile.small-mobile-portrait .start-layout {
  width: min(360px, calc(100vw - 24px));
}

body.is-small-mobile.small-mobile-portrait .start-advanced-fields {
  grid-template-columns: 1fr;
}

body.is-small-mobile.small-mobile-portrait {
  --side-rail-top: calc(env(safe-area-inset-top, 0px) + 82px);
  --side-rail-gap: 5px;
  --side-rail-width: 48px;
  --side-upgrade-height: 50px;
  --side-service-height: 46px;
  --side-service-top: calc(var(--side-rail-top) + var(--side-upgrade-height) + var(--side-rail-gap));
  --side-panel-width: 100vw;
  --side-panel-left: 0px;
  --side-icon-size: 22px;
  --side-upgrade-icon-size: 22px;
  --side-label-size: 8px;
  --side-upgrade-label-size: 8px;
}

body.is-small-mobile.small-mobile-portrait .ship-builder-panel,
body.is-small-mobile.small-mobile-portrait .upgrade-panel {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: var(--side-panel-width);
  height: min(62svh, 430px);
  max-height: calc(100svh - 84px);
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border-top: 1px solid rgba(244, 247, 239, 0.16);
  border-right: 0;
  border-radius: 8px 8px 0 0;
  transform: translateY(100%);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.46);
}

body.is-small-mobile.small-mobile-portrait .ship-builder-panel.open,
body.is-small-mobile.small-mobile-portrait .upgrade-panel.open {
  transform: translateY(0);
}

body.is-small-mobile.small-mobile-portrait .upgrade-toggle {
  left: 0;
  bottom: auto;
  width: var(--side-rail-width);
  padding: 5px 3px 4px;
  border: 1px solid rgba(244, 247, 239, 0.18);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  transform: none;
}

body.is-small-mobile.small-mobile-portrait .upgrade-toggle {
  top: var(--side-rail-top);
  height: var(--side-upgrade-height);
}

body.is-small-mobile.small-mobile-portrait .upgrade-toggle .control-label {
  font-size: var(--side-label-size);
}

body.is-small-mobile.small-mobile-portrait .base-action-rail {
  left: 0;
  top: var(--side-service-top);
  bottom: auto;
  display: grid;
  width: var(--side-rail-width);
  gap: var(--side-rail-gap);
}

body.is-small-mobile.small-mobile-portrait.builder-panel-open .upgrade-toggle,
body.is-small-mobile.small-mobile-portrait.upgrade-panel-open .upgrade-toggle {
  left: 0;
}

body.is-small-mobile.small-mobile-portrait.builder-panel-open .base-action-rail,
body.is-small-mobile.small-mobile-portrait.upgrade-panel-open .base-action-rail {
  left: 0;
}

body.is-small-mobile.small-mobile-portrait .base-action-button {
  width: var(--side-rail-width);
  height: var(--side-service-height);
  border: 1px solid rgba(244, 247, 239, 0.18);
  padding: 4px 3px;
}

body.is-small-mobile.small-mobile-portrait .base-action-button .control-label {
  display: block;
  font-size: var(--side-label-size);
}

body.is-small-mobile.small-mobile-portrait .base-action-svg {
  width: var(--side-icon-size);
  height: var(--side-icon-size);
}

body.is-small-mobile .settings-card,
body.is-small-mobile .profile-modal-card,
body.is-small-mobile .menu-modal-card {
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100svh - 20px);
  border-radius: 8px;
}

body.is-small-mobile .default-ship-modal-card {
  display: block;
  min-height: 0;
  overflow: auto;
}

body.is-small-mobile .default-ship-editor-shell {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow: visible;
}

body.is-small-mobile .default-ship-editor-shell #defaultShipEditorCanvas {
  grid-row: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  align-self: auto;
  justify-self: stretch;
}

body.is-small-mobile .default-ship-module-palette {
  max-height: none;
  max-width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
}

body.is-small-mobile .default-ship-module-palette button {
  flex: 0 0 118px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 58px;
  gap: 7px;
  padding: 7px;
  scroll-snap-align: center;
  touch-action: pan-x;
}

body.is-small-mobile .default-ship-module-palette button.selected {
  border-color: rgba(128, 240, 91, 0.9);
  box-shadow: 0 0 0 2px rgba(128, 240, 91, 0.22), 0 0 18px rgba(128, 240, 91, 0.2);
}

body.is-small-mobile .default-ship-module-palette button span {
  font-size: 11px;
}

body.is-small-mobile .default-ship-module-preview {
  width: 42px;
  height: 36px;
}

body.is-small-mobile .default-ship-editor-actions {
  grid-template-columns: minmax(88px, 0.34fr) minmax(0, 1fr);
}

body.is-small-mobile.small-mobile-landscape.default-ship-editor-open .mobile-menu-button,
body.is-small-mobile.small-mobile-landscape.default-ship-editor-open .mobile-fullscreen-button,
body.is-small-mobile.small-mobile-landscape.default-ship-editor-open .mobile-ship-button {
  display: none !important;
  pointer-events: none !important;
}

body.is-small-mobile.small-mobile-landscape #defaultShipModal {
  padding: 8px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, calc(100vw - 36px));
  height: calc(100svh - 16px);
  max-height: calc(100svh - 16px);
  padding: 10px;
  overflow: hidden;
}

body.is-small-mobile.small-mobile-landscape .default-ship-editor-shell {
  grid-template-columns: minmax(0, 1fr) minmax(148px, 178px);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  max-height: none;
  margin-top: 6px;
  padding: 6px;
  overflow: hidden;
}

body.is-small-mobile.small-mobile-landscape .default-ship-editor-shell #defaultShipEditorCanvas {
  grid-column: 1;
  grid-row: 1 / 3;
  width: auto;
  max-width: min(100%, calc(100svh - 92px));
  max-height: calc(100svh - 92px);
  align-self: center;
  justify-self: center;
}

body.is-small-mobile.small-mobile-landscape .default-ship-module-palette {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  max-height: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
  padding: 1px 3px 1px 1px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-module-palette button {
  flex: none;
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 50px;
  gap: 6px;
  padding: 5px;
  font-size: 11px;
  scroll-snap-align: start;
  touch-action: pan-y;
}

body.is-small-mobile.small-mobile-landscape .default-ship-module-preview {
  width: 36px;
  height: 30px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-editor-actions {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr;
  align-self: end;
  justify-self: stretch;
}

body.is-small-mobile.small-mobile-landscape .default-ship-reset-button {
  min-height: 38px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-limit-text,
body.is-small-mobile.small-mobile-landscape .default-ship-editor-hint {
  text-align: center;
  font-size: 11px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-modal-card,
body.is-small-mobile.small-mobile-portrait .inventory-modal-card {
  min-height: 0;
}

/* Account widgets occupy a side rail; authentication never moves the launch card. */
body.is-small-mobile:not(.is-playing) {
  --menu-account-rail-width: min(220px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 84px));
}

body.is-small-mobile:not(.is-playing) .menu-account-rail {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--menu-account-rail-width);
  pointer-events: none;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .auth-panel,
body.is-small-mobile:not(.is-playing) .menu-account-rail .resource-panel:not(.hidden) {
  position: static;
  width: 100%;
  max-width: 100%;
  pointer-events: auto;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .profile-card {
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 6px;
  padding: 6px;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .profile-avatar {
  width: 28px;
  height: 28px;
}

body.is-small-mobile:not(.is-playing) .profile-card strong {
  font-size: 12px;
  line-height: 1.2;
}

body.is-small-mobile:not(.is-playing) .profile-card span {
  font-size: 10px;
  line-height: 1.2;
}

body.is-small-mobile:not(.is-playing) .profile-progress {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

body.is-small-mobile:not(.is-playing) .profile-progress-row {
  min-width: 0;
  gap: 6px;
  line-height: 1.1;
}

body.is-small-mobile:not(.is-playing) .profile-xp-track {
  height: 4px;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .resource-card {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 3px 6px;
  padding: 6px 8px;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .platinum-icon {
  width: 22px;
  height: 22px;
}

body.is-small-mobile:not(.is-playing) .menu-account-rail .resource-card b {
  font-size: 20px;
  line-height: 1.1;
}

body.is-small-mobile:not(.is-playing) .daily-reward-hint {
  margin-top: 0;
  line-height: 1.2;
}

body.is-small-mobile:not(.is-playing) #mobileMenuButton.mobile-menu-button {
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
}

body.is-small-mobile:not(.is-playing) #mobileShipButton.mobile-ship-button {
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 64px);
}

body.is-small-mobile.small-mobile-landscape:not(.is-playing) {
  --menu-card-width: min(420px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 224px));
  --menu-account-rail-width: min(200px, calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - var(--menu-card-width)) / 2 - 24px));
}

body.is-small-mobile.small-mobile-landscape #startScreen {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 112px) calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 112px);
}

body.is-small-mobile.small-mobile-landscape #startScreen .start-layout {
  width: var(--menu-card-width);
}

body.is-small-mobile #startScreen .start-panel {
  align-content: start;
  max-height: none;
  overflow: visible;
}

body.is-small-mobile #startScreen #playButton {
  min-height: 48px;
}

body.is-small-mobile.small-mobile-portrait #startScreen {
  padding-top: calc(env(safe-area-inset-top, 0px) + 164px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

body.is-small-mobile.small-mobile-portrait #startScreen #startStatus {
  height: 42px;
  min-height: 42px;
  font-size: 10px;
  line-height: 14px;
}

/* The maintenance badge occupies the same 44px row as a healthy server. */
body.is-small-mobile #serverChoiceGroup .choice-radio.server-under-maintenance {
  grid-template-columns: 10px minmax(0, 1fr);
  grid-template-rows: 11px 22px;
  gap: 1px 4px;
  padding: 4px 5px;
}

body.is-small-mobile #serverChoiceGroup .server-under-maintenance > span {
  padding: 0 2px;
  font-size: 9px;
  line-height: 11px;
}

body.is-small-mobile #serverChoiceGroup .server-under-maintenance input {
  width: 10px;
  height: 10px;
  min-height: 0;
}

body.is-small-mobile #serverChoiceGroup .server-maintenance-label {
  grid-column: 1 / -1;
  align-self: center;
  padding: 0 2px;
  font-size: 9px;
  line-height: 11px;
}

@media (orientation: landscape) and (max-width: 740px) {
  body.is-small-mobile .menu-account-rail .profile-progress-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  body.is-small-mobile .menu-account-rail .profile-progress-row span {
    max-width: 100%;
  }
  body.is-small-mobile:not(.is-playing) .menu-account-rail .resource-card {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  body.is-small-mobile:not(.is-playing) .menu-account-rail .resource-card b {
    font-size: 16px;
  }
  body.is-small-mobile .menu-account-rail .daily-reward-hint {
    grid-column: 1;
  }
  body.is-small-mobile .menu-account-rail .login-button {
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Put field names beside their controls on short screens so all touch targets
   and the launch button fit without a scroll container. */
@media (orientation: landscape) and (max-height: 440px) {
  body.is-small-mobile #startScreen .start-panel {
    padding: 12px 14px;
    gap: 3px;
  }
  body.is-small-mobile #startScreen .start-panel h1 {
    display: none;
  }
  body.is-small-mobile #startScreen .start-panel .eyebrow {
    font-size: 22px;
    line-height: 1.1;
  }
  body.is-small-mobile #startScreen .start-panel > label,
  body.is-small-mobile #startScreen .choice-field {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  body.is-small-mobile #startScreen .start-panel label > span {
    font-size: 10px;
    line-height: 1.2;
  }
  body.is-small-mobile #startScreen #startAdvancedFields {
    gap: 3px;
  }
  body.is-small-mobile #startScreen .choice-radio {
    min-height: 44px;
    padding: 5px;
    gap: 4px;
  }
  body.is-small-mobile #startScreen #pilotNameInput {
    min-height: 44px;
    padding: 6px 8px;
  }
  body.is-small-mobile #startScreen #startStatus {
    height: 28px;
    min-height: 28px;
    font-size: 10px;
    line-height: 14px;
  }
}

@media (orientation: portrait) and (max-height: 720px) {
  body.is-small-mobile #startScreen .start-panel {
    padding: 12px 14px;
    gap: 6px;
  }
  body.is-small-mobile #startScreen .start-panel h1 {
    display: none;
  }
  body.is-small-mobile #startScreen .room-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.is-small-mobile #startScreen #startAdvancedFields {
    gap: 6px;
  }
}

/* src/styles/arcology-terminal-material.css */
/*
 * Arcology Cyber Terminal: material system
 *
 * Palette, procedural paint recipes, typography, and primitive control
 * surfaces only. Component decoration, motion, and responsive compatibility
 * are intentionally kept in adjacent files.
 */

:root {
  --ink: #d7e1ca;
  --muted: #87917c;
  --panel: rgba(10, 13, 10, 0.9);
  --panel-strong: rgba(12, 15, 11, 0.98);
  --line: rgba(132, 151, 112, 0.32);
  --green: #9bdc67;
  --cyan: #79bda4;
  --red: #dc5b43;
  --amber: #c9a859;
  --pink: #b9808e;
  --arcology-black: #050705;
  --arcology-screen: #091007;
  --arcology-screen-soft: #0d160b;
  --arcology-metal: #151914;
  --arcology-metal-light: #252a22;
  --arcology-edge: #454d3e;
  --arcology-edge-dark: #060806;
  --arcology-wire: #9a4b32;
  --arcology-wire-muted: #563b2d;
  --arcology-lamp: #d75738;
  --arcology-steel-hi: #555d4d;
  --arcology-steel-mid: #252a23;
  --arcology-steel-low: #0a0c0a;
  --arcology-bolt:
    linear-gradient(90deg, transparent 0 1px, #a3aa91 1px 5px, transparent 5px) 9px 11.5px / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a3aa91 1px 5px, transparent 5px) calc(100% - 15px) 11.5px / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a3aa91 1px 5px, transparent 5px) 9px calc(100% - 11.5px) / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a3aa91 1px 5px, transparent 5px) calc(100% - 15px) calc(100% - 11.5px) / 6px 1px no-repeat,
    radial-gradient(circle at 12px 12px, #070807 0 2px, #858d77 2.4px 3.4px, #111410 3.8px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #070807 0 2px, #858d77 2.4px 3.4px, #111410 3.8px 5px, transparent 5.4px),
    radial-gradient(circle at 12px calc(100% - 12px), #070807 0 2px, #858d77 2.4px 3.4px, #111410 3.8px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #070807 0 2px, #858d77 2.4px 3.4px, #111410 3.8px 5px, transparent 5.4px);
  --arcology-panel-bolt:
    linear-gradient(90deg, transparent 0 1px, #a9af97 1px 5px, transparent 5px) 4px 6.5px / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a9af97 1px 5px, transparent 5px) calc(100% - 10px) 6.5px / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a9af97 1px 5px, transparent 5px) 4px calc(100% - 6.5px) / 6px 1px no-repeat,
    linear-gradient(90deg, transparent 0 1px, #a9af97 1px 5px, transparent 5px) calc(100% - 10px) calc(100% - 6.5px) / 6px 1px no-repeat,
    radial-gradient(circle at 7px 7px, #070807 0 1.5px, #a1a990 1.9px 3.2px, #111410 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 7px) 7px, #070807 0 1.5px, #a1a990 1.9px 3.2px, #111410 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at 7px calc(100% - 7px), #070807 0 1.5px, #a1a990 1.9px 3.2px, #111410 3.6px 5px, transparent 5.4px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #070807 0 1.5px, #a1a990 1.9px 3.2px, #111410 3.6px 5px, transparent 5.4px);
  --arcology-wear:
    linear-gradient(118deg, transparent 0 11%, rgba(185, 191, 166, 0.11) 11.2% 11.5%, transparent 11.8% 68%, rgba(0, 0, 0, 0.16) 68.3% 69%, transparent 69.3%),
    repeating-linear-gradient(93deg, transparent 0 23px, rgba(255, 255, 255, 0.018) 24px, transparent 25px 47px);
  --arcology-font: "Cascadia Mono", "IBM Plex Mono", Consolas, "Malgun Gothic", monospace;
  --arcology-crt:
    repeating-linear-gradient(0deg, rgba(187, 226, 142, 0.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 28%, rgba(115, 172, 77, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(12, 22, 10, 0.98), rgba(5, 9, 5, 0.98));
  --arcology-frame:
    var(--arcology-wear),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 24%),
    linear-gradient(180deg, #30362d 0, #20251f 12%, #0b0e0b 58%, #191d17 100%);
  --arcology-frame-shadow:
    inset 1px 1px 0 rgba(113, 122, 99, 0.48),
    inset -2px -2px 0 rgba(0, 0, 0, 0.96),
    inset 0 0 0 7px rgba(19, 23, 18, 0.96),
    inset 0 0 0 8px rgba(105, 114, 91, 0.28),
    0 20px 50px rgba(0, 0, 0, 0.62);
}

html,
body {
  background-color: #030403;
}

button,
input,
select,
.eyebrow,
.start-panel label,
.menu-modal-head,
.settings-head,
.builder-header,
.upgrade-header,
.topbar,
.leaderboard,
.minimap,
.tutorial-guide-card {
  font-family: var(--arcology-font);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(155, 220, 103, 0.9);
  outline-offset: 2px;
}

input,
select {
  border-color: rgba(124, 148, 103, 0.48);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.018) 0 1px, transparent 1px 4px),
    rgba(3, 7, 3, 0.96);
  color: #cfe6b8;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.78),
    inset 0 8px 18px rgba(0, 0, 0, 0.46);
  caret-color: var(--green);
}

input::placeholder {
  color: rgba(155, 174, 137, 0.52);
}

/* src/styles/arcology-terminal-components.css */
/*
 * Arcology Cyber Terminal: component appearance
 *
 * Procedural chassis, bezels, controls, screens, fasteners, harnesses, and
 * service details. This file contains no keyframes and no interaction logic.
 */

/* Main console assembly and its exposed signal runs. */
.start-layout {
  position: relative;
}

.start-layout::before,
.start-layout::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 28px;
  z-index: -1;
  border: 1px solid rgba(65, 72, 59, 0.62);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(154, 75, 50, 0.9) 8% 8.3%, transparent 8.3% 22%, rgba(95, 58, 42, 0.9) 22% 22.24%, transparent 22.24% 67%, rgba(154, 75, 50, 0.72) 67% 67.25%, transparent 67.25%),
    repeating-linear-gradient(0deg, #050705 0 3px, #20251e 3px 5px, #080a08 5px 8px);
  box-shadow:
    inset 0 1px 0 rgba(121, 134, 108, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.start-layout::before {
  top: -30px;
  border-radius: 3px 3px 0 0;
}

.start-layout::after {
  bottom: -30px;
  border-radius: 0 0 3px 3px;
  transform: scaleY(-1);
}

.start-panel,
.start-side-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--arcology-edge);
  border-radius: 4px;
  background: var(--arcology-frame);
  box-shadow: var(--arcology-frame-shadow);
  backdrop-filter: none;
}

.start-panel::before,
.start-side-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid rgba(95, 118, 76, 0.5);
  border-radius: 2px;
  background: var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.82),
    inset 0 0 26px rgba(0, 0, 0, 0.74),
    0 0 0 1px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.start-panel::after,
.start-side-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 18px;
  width: 3px;
  height: 17px;
  border: 1px solid rgba(255, 135, 91, 0.46);
  border-radius: 1px;
  background: var(--arcology-lamp);
  box-shadow: 0 0 6px rgba(215, 87, 56, 0.54);
  pointer-events: none;
}

.start-panel > *,
.start-side-panel > * {
  position: relative;
  z-index: 1;
}

.start-panel h1 {
  color: #d8e5c9;
  font-family: var(--arcology-font);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-shadow: 0 0 10px rgba(155, 220, 103, 0.12);
}

.eyebrow,
.start-panel label > span,
.main-menu-label {
  color: var(--green);
  text-shadow: 0 0 7px rgba(155, 220, 103, 0.26);
}

.eyebrow {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(155, 220, 103, 0.46);
  font-size: 13px;
  letter-spacing: 0.025em;
}

.start-panel label > span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.default-ship-preview,
.default-ship-editor-shell,
.default-ship-editor-shell #defaultShipEditorCanvas {
  border-color: rgba(107, 131, 88, 0.52);
  border-radius: 2px;
  background:
    linear-gradient(rgba(75, 105, 59, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 105, 59, 0.13) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(67, 112, 48, 0.14), transparent 64%),
    #050905;
  background-size: 30px 30px, 30px 30px, auto, auto;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.68),
    inset 0 0 36px rgba(0, 0, 0, 0.7);
}

.default-ship-status.login-required {
  color: #becbae;
  text-shadow: none;
}

.main-menu-button,
.booster-row button,
.default-ship-module-palette button,
.default-ship-reset-button,
.default-ship-save-button {
  border-color: rgba(117, 139, 98, 0.48);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.018) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(15, 25, 12, 0.98), rgba(5, 9, 5, 0.98));
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(195, 218, 174, 0.06),
    0 5px 0 #050605,
    0 10px 18px rgba(0, 0, 0, 0.32);
}

.main-menu-button {
  padding-left: 18px;
}

.main-menu-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(83, 103, 69, 0.44);
  border-radius: 1px;
  background:
    linear-gradient(90deg, rgba(155, 220, 103, 0.08), transparent 18%),
    transparent;
  pointer-events: none;
}

.main-menu-button::after {
  inset: 11px 6px auto auto;
  width: 3px;
  height: 17px;
  border: 1px solid rgba(255, 130, 86, 0.4);
  border-radius: 1px;
  background: var(--arcology-lamp);
  opacity: 0.72;
  box-shadow: 0 0 5px rgba(215, 87, 56, 0.5);
}

.main-menu-button:hover,
.booster-row button:hover,
.default-ship-module-palette button:hover {
  border-color: rgba(155, 220, 103, 0.7);
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.028) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(26, 44, 20, 0.98), rgba(7, 13, 7, 0.98));
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.65),
    inset 0 0 20px rgba(155, 220, 103, 0.06),
    0 4px 0 #050605,
    0 9px 16px rgba(0, 0, 0, 0.3);
}

.main-menu-button:active,
.booster-row button:active,
#playButton:active,
.login-button:active,
.settings-button:active,
.icon-text-button:active {
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.68),
    0 2px 0 #050605;
}

.main-menu-label {
  font-family: var(--arcology-font);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.menu-art {
  right: 18px;
  bottom: 10px;
  opacity: 0.7;
  filter: saturate(1.28) contrast(1.04) brightness(1.03);
  transform: scale(0.84);
  transform-origin: 100% 100%;
}

.booster-row button {
  color: #acbd9e;
}

.item-slot-row button::before {
  border-color: rgba(122, 149, 99, 0.5);
  border-radius: 1px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(155, 220, 103, 0.12) 10% 12%, transparent 12% 88%, rgba(155, 220, 103, 0.12) 88% 90%, transparent 90%),
    rgba(3, 6, 3, 0.58);
}

.item-slot-row button::after {
  opacity: 0.38;
  filter: sepia(1) hue-rotate(35deg) saturate(2);
}

.item-slot-icon {
  border-radius: 1px;
  filter: grayscale(0.75) sepia(0.5) hue-rotate(36deg) saturate(1.8);
  box-shadow: 0 0 8px rgba(155, 220, 103, 0.18);
}

.choice-radio {
  border-color: color-mix(in srgb, var(--choice-accent, var(--green)) 48%, rgba(112, 139, 91, 0.58));
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.014) 0 1px, transparent 1px 4px),
    rgba(4, 8, 4, 0.92);
  color: #9fae91;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.56);
}

.choice-radio input {
  border-color: rgba(155, 220, 103, 0.74);
  border-radius: 1px;
  background: #030503;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7);
}

.choice-radio.selected,
.choice-radio:has(input:checked) {
  border-color: color-mix(in srgb, var(--choice-accent, var(--green)) 82%, white 18%);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--choice-accent, var(--green)) 9%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, color-mix(in srgb, var(--choice-accent, var(--green)) 30%, #182018), color-mix(in srgb, var(--choice-accent, var(--green)) 13%, #090d09));
  color: #e2ead9;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 0 16px color-mix(in srgb, var(--choice-accent, var(--green)) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--choice-accent, var(--green)) 18%, transparent);
}

.choice-radio.selected input,
.choice-radio:has(input:checked) input {
  background:
    linear-gradient(var(--choice-accent, var(--green)), var(--choice-accent, var(--green))) 50% 50% / 6px 6px no-repeat,
    #050805;
}

#playButton,
.onboarding-primary,
.death-actions button:first-child,
.reconnect-choice-card .confirm-actions button:first-child,
.victory-actions button:last-child {
  position: relative;
  border-color: rgba(157, 211, 113, 0.78);
  border-radius: 2px;
  background:
    repeating-linear-gradient(135deg, #8fc95f 0 3px, #315126 3px 6px) left / 22px 100% no-repeat,
    linear-gradient(180deg, rgba(52, 82, 41, 0.98), rgba(25, 45, 20, 0.98));
  color: #e5ecd9;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(221, 242, 202, 0.12),
    0 5px 0 #050605,
    0 9px 18px rgba(0, 0, 0, 0.34);
  text-shadow: 0 0 7px rgba(155, 220, 103, 0.24);
}

#playButton:hover,
.onboarding-primary:hover,
.death-actions button:first-child:hover,
.victory-actions button:last-child:hover {
  filter: brightness(1.14);
}

#playButton:disabled {
  filter: grayscale(0.65);
}

#startStatus {
  color: #78856f;
}

/* Small persistent controls become physical panel keys. */
.login-button,
.icon-text-button,
.settings-button,
.topbar-settings-button,
.settings-reset-button,
.mobile-mode-button,
.onboarding-control-button,
.keybind-button,
.legal-corner-button,
.support-corner-button,
.mobile-menu-close,
.mobile-ship-close,
.mobile-drawer-action,
.mobile-hud-options-button,
.mobile-hud-options-menu button {
  border-color: rgba(113, 132, 96, 0.5);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(28, 33, 27, 0.97), rgba(8, 11, 8, 0.97));
  color: #b8c5aa;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    0 3px 0 rgba(3, 4, 3, 0.95),
    0 7px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

.login-button:hover,
.icon-text-button:hover,
.settings-button:hover,
.topbar-settings-button:hover,
.settings-reset-button:hover,
.mobile-mode-button:hover,
.keybind-button:hover {
  border-color: rgba(155, 220, 103, 0.68);
  color: var(--green);
}

/* Mechanical housings shared by modal, result, and tutorial windows. */
.menu-modal,
.profile-modal,
.settings-modal,
.sound-test-modal,
.confirm-modal,
.onboarding-modal,
.victory-overlay {
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.016) 0 1px, transparent 1px 4px),
    rgba(0, 2, 0, 0.76);
}

.menu-modal-card,
.settings-card,
.sound-test-card,
.profile-modal-card,
.death-card,
.confirm-card,
.victory-card,
.onboarding-card {
  position: relative;
  border-color: var(--arcology-edge);
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.016) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 45% 24%, rgba(89, 128, 66, 0.08), transparent 60%),
    linear-gradient(180deg, #11160f, #070907);
  box-shadow: var(--arcology-frame-shadow);
  backdrop-filter: none;
}

.menu-modal-card::before,
.settings-card::before,
.sound-test-card::before,
.profile-modal-card::before,
.death-card::before,
.confirm-card::before,
.victory-card::before,
.onboarding-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(105, 123, 90, 0.28);
  border-radius: 1px;
  pointer-events: none;
}

.menu-modal-card::after,
.settings-card::after,
.sound-test-card::after,
.profile-modal-card::after,
.death-card::after,
.confirm-card::after,
.victory-card::after,
.onboarding-card::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 14px;
  width: 3px;
  height: 15px;
  border-radius: 1px;
  background: var(--arcology-lamp);
  box-shadow: 0 0 6px rgba(215, 87, 56, 0.54);
  pointer-events: none;
}

.menu-modal-head,
.settings-head,
.sound-test-head,
.profile-modal-head,
.builder-header,
.upgrade-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(155, 220, 103, 0.3);
}

.menu-modal-head h2,
.settings-head h2,
.sound-test-head h2,
.profile-modal-head h2,
.builder-header h2,
.upgrade-header h2 {
  color: var(--green);
  font-family: var(--arcology-font);
  letter-spacing: 0.025em;
  text-shadow: 0 0 7px rgba(155, 220, 103, 0.24);
}

.settings-section,
.settings-toggle,
.settings-select,
.settings-range,
.menu-modal-empty,
.inventory-detail,
.account-notice-card,
.feedback-context-card {
  border-color: rgba(107, 128, 89, 0.4);
  border-radius: 2px;
  background: var(--arcology-crt);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.48);
}

.shop-tab,
.builder-tab,
.builder-sell,
.shop-buy-button,
.cosmetic-equip-button,
.feedback-submit-button,
.feedback-secondary-button,
.skill-buy,
.skill-equip,
.upgrade-buy,
.singleplayer-actions button,
.actions button,
.confirm-actions button,
.death-actions button,
.victory-actions button {
  border-color: rgba(112, 132, 95, 0.5);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(27, 33, 26, 0.96), rgba(8, 11, 8, 0.96));
  color: #b7c3aa;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.5),
    0 3px 0 rgba(2, 3, 2, 0.92);
}

.shop-tab.selected,
.builder-tab.selected,
.mobile-mode-button.active,
.onboarding-control-button.active {
  border-color: rgba(155, 220, 103, 0.74);
  background: linear-gradient(180deg, rgba(53, 83, 42, 0.96), rgba(21, 38, 17, 0.96));
  color: var(--green);
}

.shop-card,
.cosmetic-card,
.inventory-card,
.builder-card,
.upgrade-card,
.skill-card,
.daily-reward-card,
.monetization-panel {
  border-color: rgba(105, 127, 88, 0.46);
  border-radius: 2px;
  background: var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.58),
    0 5px 12px rgba(0, 0, 0, 0.26);
}

.inventory-card:hover,
.builder-card:hover,
.shop-card:hover,
.cosmetic-card:hover {
  border-color: rgba(155, 220, 103, 0.68);
}

.inventory-item-icon,
.cosmetic-preview {
  border-radius: 2px;
  filter: saturate(0.68) sepia(0.12) hue-rotate(18deg);
}

/* In-game terminal surfaces. */
.topbar,
.leaderboard,
.minimap,
.singleplayer-panel,
.skill-hud,
.mobile-hud-options-menu {
  border-color: rgba(105, 127, 88, 0.54);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.012) 0 1px, transparent 1px 5px),
    rgba(5, 8, 5, 0.84);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    0 9px 24px rgba(0, 0, 0, 0.34);
  backdrop-filter: none;
}

.topbar {
  border-left: 3px solid rgba(155, 220, 103, 0.76);
}

.topbar strong,
.leaderboard h2,
.minimap h2,
.singleplayer-panel-head span,
.skill-hud-key {
  color: var(--green);
  font-family: var(--arcology-font);
  text-shadow: 0 0 6px rgba(155, 220, 103, 0.22);
}

#minimapCanvas {
  border-color: rgba(113, 142, 92, 0.46);
  border-radius: 1px;
  background: #030703;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7);
}

.leaderboard li,
.leaderboard li::before {
  border-radius: 1px;
}

.leaderboard li::before {
  background: rgba(104, 141, 81, 0.15);
  color: var(--green);
}

.stats b,
.leaderboard b {
  color: var(--green);
}

/* Builder, upgrades, and base-service hardware. */
.upgrade-toggle,
.base-action-button {
  border-color: rgba(102, 121, 86, 0.58);
  border-radius: 0 3px 3px 0;
  background: var(--arcology-frame);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.62),
    0 10px 24px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
}

.ship-builder-panel,
.upgrade-panel {
  border-right-color: var(--arcology-edge);
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #11150f, #080b08);
  box-shadow:
    inset -5px 0 0 rgba(31, 37, 29, 0.86),
    18px 0 52px rgba(0, 0, 0, 0.58);
  backdrop-filter: none;
}

.builder-card canvas,
.builder-card-body {
  background: #050905;
}

.upgrade-segment {
  border-radius: 1px;
  background: #060806;
}

.upgrade-segment.filled {
  border-color: rgba(155, 220, 103, 0.68);
  background: linear-gradient(180deg, #8ac45c, #38562c);
}

/* Tutorial overlays retain their original geometry and high-visibility amber. */
.onboarding-card h2 {
  color: var(--green);
  font-family: var(--arcology-font);
  text-shadow: 0 0 9px rgba(155, 220, 103, 0.24);
}

.onboarding-copy {
  color: #9da993;
}

.onboarding-secondary {
  border-color: rgba(113, 132, 96, 0.5);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(28, 33, 27, 0.97), rgba(8, 11, 8, 0.97));
  color: #b7c4a9;
}

.tutorial-guide-card {
  border-color: rgba(199, 168, 89, 0.68);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(199, 168, 89, 0.022) 0 1px, transparent 1px 4px),
    rgba(7, 9, 6, 0.96);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    0 12px 32px rgba(0, 0, 0, 0.44);
}

.tutorial-guide-action,
.tutorial-exit-button {
  border-radius: 2px;
}

/* Mobile chrome keeps its coordinates and touch targets, but reads as hardware. */
.mobile-menu-button,
.mobile-fullscreen-button,
.mobile-ship-button,
.mobile-menu-sheet,
.mobile-ship-sheet {
  border-color: rgba(105, 127, 88, 0.58);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #151a13, #070a07);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.58),
    0 10px 26px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}

.mobile-menu-button span,
.mobile-fullscreen-button span {
  filter: sepia(1) hue-rotate(35deg) saturate(2);
}

.mobile-joystick-base,
.mobile-dpad,
.mobile-action-button {
  border-color: rgba(114, 135, 96, 0.5);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(155, 220, 103, 0.035) 0 1px, transparent 1px 9px),
    rgba(6, 9, 6, 0.56);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.48),
    inset 0 0 24px rgba(109, 154, 80, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}

.mobile-joystick-knob,
.mobile-dpad-button {
  border-color: rgba(145, 168, 124, 0.52);
  background: linear-gradient(180deg, rgba(46, 55, 42, 0.78), rgba(12, 16, 12, 0.74));
  color: #c6d2b9;
  box-shadow:
    inset 0 1px 0 rgba(225, 235, 216, 0.08),
    0 5px 12px rgba(0, 0, 0, 0.28);
}

.mobile-action-button.active,
.mobile-dpad-button.active,
.mobile-joystick.active .mobile-joystick-knob {
  border-color: rgba(155, 220, 103, 0.74);
  background: linear-gradient(180deg, rgba(61, 93, 47, 0.88), rgba(24, 43, 19, 0.84));
  color: #e0ead6;
}

.mobile-bomb-button {
  border-color: rgba(201, 168, 89, 0.55);
  color: #d5be83;
}

body.is-small-mobile .topbar,
body.is-small-mobile .leaderboard,
body.is-small-mobile .minimap,
body.is-small-mobile .singleplayer-panel {
  border-color: rgba(105, 127, 88, 0.54);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(155, 220, 103, 0.012) 0 1px, transparent 1px 5px),
    rgba(5, 8, 5, 0.86);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    0 8px 20px rgba(0, 0, 0, 0.34);
  backdrop-filter: none;
}

/*
 * Mechanical fidelity pass
 *
 * The reference reads as one assembled machine, not a collection of green
 * cards. These overrides build that object grammar with paint-only layers:
 * chassis -> bezel -> recessed phosphor surface -> sparse service hardware.
 */
.start-layout {
  isolation: isolate;
  z-index: 0;
}

.start-layout::before {
  display: block;
  inset: -36px -30px;
  width: auto;
  height: auto;
  border: 1px solid #59604f;
  border-radius: 2px;
  background:
    var(--arcology-bolt),
    linear-gradient(#d75738, #76261c) 13px calc(50% - 10px) / 3px 8px no-repeat,
    linear-gradient(180deg, #68705c 0 1px, #252a23 1px 30px, #070907 30px 36px) 6px 50% / 18px 36px no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(157, 68, 43, 0.92) 5% 5.35%, transparent 5.35% 18%, rgba(94, 59, 42, 0.92) 18% 18.28%, transparent 18.28% 74%, rgba(157, 68, 43, 0.76) 74% 74.3%, transparent 74.3%) 0 11px / 100% 4px no-repeat,
    linear-gradient(90deg, transparent 0 11%, rgba(113, 62, 43, 0.82) 11% 11.25%, transparent 11.25% 61%, rgba(157, 68, 43, 0.7) 61% 61.27%, transparent 61.27%) 0 calc(100% - 13px) / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #060806 0 12px, #3e4438 12px 14px, #111510 14px 19px) 54px 4px / calc(100% - 108px) 21px no-repeat,
    repeating-linear-gradient(90deg, #060806 0 11px, #343a30 11px 13px, #0e110d 13px 18px) 54px calc(100% - 25px) / calc(100% - 108px) 21px no-repeat,
    var(--arcology-wear),
    linear-gradient(180deg, #2f342c 0 5%, #111510 5% 95%, #252a23 95% 100%);
  box-shadow:
    0 0 0 2px #050605,
    0 0 0 10px #252a23,
    0 0 0 11px rgba(105, 113, 93, 0.7),
    0 26px 58px rgba(0, 0, 0, 0.78),
    inset 1px 1px 0 rgba(128, 137, 113, 0.45),
    inset -2px -2px 0 #050605;
  transform: none;
  pointer-events: none;
}

.start-layout::after {
  --arcology-clamp-gap: 128px;
  --arcology-clamp-metal-end: 134px;
  --arcology-clamp-end: 142px;
  display: block;
  left: -19px;
  right: -19px;
  top: -29px;
  bottom: auto;
  width: auto;
  height: 22px;
  z-index: -1;
  border: 1px solid #3e4438;
  border-radius: 1px;
  background:
    linear-gradient(#d75738, #76261c) calc(33.333% + 4px) 6px / 3px 7px no-repeat,
    linear-gradient(#d75738, #76261c) calc(100% - 21px) 6px / 3px 7px no-repeat,
    linear-gradient(90deg, #070907 0 1px, #68705c 1px 4px, #070907 4px 5px) calc(33.333% - 2.5px) 17px / 5px 5px no-repeat,
    linear-gradient(90deg, #070907 0 1px, #68705c 1px 4px, #070907 4px 5px) calc(66.666% - 2.5px) 17px / 5px 5px no-repeat,
    linear-gradient(180deg, #6e7662 0 1px, #282d25 1px 14px, #070907 14px 18px) calc(33.333% - 12px) 2px / 24px 18px no-repeat,
    linear-gradient(180deg, #6e7662 0 1px, #282d25 1px 14px, #070907 14px 18px) calc(66.666% - 12px) 2px / 24px 18px no-repeat,
    linear-gradient(180deg, #59614f 0 1px, #1c211b 1px 14px, #050605 14px 18px) calc(100% - 30px) 2px / 24px 18px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 var(--arcology-clamp-gap), #686f5d var(--arcology-clamp-gap) var(--arcology-clamp-metal-end), #080a08 var(--arcology-clamp-metal-end) var(--arcology-clamp-end)) 20px 1px / calc(31% - 20px) 20px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 var(--arcology-clamp-gap), #686f5d var(--arcology-clamp-gap) var(--arcology-clamp-metal-end), #080a08 var(--arcology-clamp-metal-end) var(--arcology-clamp-end)) 34.5% 1px / 31% 20px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 var(--arcology-clamp-gap), #686f5d var(--arcology-clamp-gap) var(--arcology-clamp-metal-end), #080a08 var(--arcology-clamp-metal-end) var(--arcology-clamp-end)) calc(69% + 1px) 1px / calc(31% - 20px) 20px no-repeat,
    linear-gradient(90deg, #31160f, #a34a2f) 14px 4px / calc(33.333% - 26px) 3px no-repeat,
    linear-gradient(90deg, #5b2e20, #b75a38) calc(33.333% + 12px) 4px / calc(33.333% - 24px) 3px no-repeat,
    linear-gradient(90deg, #a34a2f, #321811) calc(66.666% + 12px) 4px / calc(33.333% - 46px) 3px no-repeat,
    linear-gradient(90deg, #111410, #515b47) 8px 10px / calc(33.333% - 20px) 3px no-repeat,
    linear-gradient(90deg, #20261d, #687358) calc(33.333% + 12px) 10px / calc(33.333% - 24px) 3px no-repeat,
    linear-gradient(90deg, #515b47, #111410) calc(66.666% + 12px) 10px / calc(33.333% - 46px) 3px no-repeat,
    linear-gradient(90deg, #43291e, #7b442e) 22px 16px / calc(33.333% - 34px) 3px no-repeat,
    linear-gradient(90deg, #a44c31, #3a241b) calc(33.333% + 12px) 16px / calc(33.333% - 24px) 3px no-repeat,
    linear-gradient(90deg, #7b442e, #3a241b) calc(66.666% + 12px) 16px / calc(33.333% - 46px) 3px no-repeat,
    linear-gradient(180deg, #252a22, #090b09);
  box-shadow:
    inset 0 1px 0 rgba(117, 127, 105, 0.35),
    0 5px 0 #050605,
    0 9px 16px rgba(0, 0, 0, 0.48);
  transform: none;
  pointer-events: none;
}

.start-panel,
.start-side-panel {
  border-color: #59614f;
  background:
    var(--arcology-panel-bolt),
    var(--arcology-frame);
  box-shadow:
    inset 1px 1px 0 rgba(121, 130, 107, 0.45),
    inset -2px -2px 0 #050605,
    inset 0 0 0 9px #171b16,
    inset 0 0 0 10px rgba(99, 108, 88, 0.32),
    0 0 0 2px #060706,
    0 12px 28px rgba(0, 0, 0, 0.56);
}

.start-panel {
  background:
    linear-gradient(180deg, #6e7662 0 1px, #252a23 1px 7px, #050605 7px 10px) 50% 0 / 18px 10px no-repeat,
    linear-gradient(90deg, #070907 0 2px, #9a4b32 2px 5px, #070907 5px 7px) 50% 8px / 7px 22px no-repeat,
    var(--arcology-panel-bolt),
    var(--arcology-frame);
}

.start-panel::before,
.start-side-panel::before {
  inset: 13px;
  border-color: rgba(110, 139, 88, 0.46);
  background: var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 38px rgba(0, 0, 0, 0.84),
    0 0 0 3px #050605,
    0 0 0 6px #292e26,
    0 0 0 7px rgba(104, 114, 92, 0.34);
}

.start-panel::after,
.start-side-panel::after {
  right: 4px;
  top: 22px;
  bottom: 22px;
  width: 10px;
  height: auto;
  border: 1px solid #4b5143;
  background:
    linear-gradient(#e06948, #8f2f22) 50% 8px / 3px 19px no-repeat,
    repeating-linear-gradient(0deg, #050605 0 5px, #444a3d 5px 6px, #111410 6px 9px) 50% calc(100% - 8px) / 6px 46% no-repeat,
    linear-gradient(180deg, #292e27, #090b09);
  box-shadow:
    inset 1px 1px 0 rgba(119, 128, 107, 0.32),
    inset -1px -1px 0 #020302,
    -3px 0 0 #050605,
    0 0 7px rgba(215, 87, 56, 0.18);
}

.start-panel h1,
.eyebrow,
.start-panel label > span,
.main-menu-label {
  text-shadow: 0 0 3px rgba(155, 220, 103, 0.2);
}

.default-ship-preview,
.default-ship-editor-shell {
  border-color: #5a624f;
  box-shadow:
    inset 0 0 0 3px #030403,
    inset 0 0 38px rgba(0, 0, 0, 0.78),
    0 0 0 3px #080a08,
    0 0 0 7px #272c24,
    0 0 0 8px rgba(100, 111, 89, 0.35);
}

.main-menu-button {
  --menu-accent: #91c879;
  border-color: #59614f;
  background: var(--arcology-frame);
  box-shadow:
    inset 1px 1px 0 rgba(120, 129, 106, 0.4),
    inset -2px -2px 0 #030403,
    inset 0 0 0 4px #151914,
    0 5px 0 #040504,
    0 11px 18px rgba(0, 0, 0, 0.4);
}

#shopButton { --menu-accent: #ffbd57; }
#cosmeticsButton { --menu-accent: #df8cff; }
#inventoryButton { --menu-accent: #62ddf0; }

.main-menu-button::before {
  inset: 7px 16px 9px 7px;
  border-color: color-mix(in srgb, var(--menu-accent) 48%, #4b5847);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--menu-accent) 16%, transparent), transparent 36%),
    var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 20px rgba(0, 0, 0, 0.65),
    0 0 0 2px #080a08,
    0 3px 0 #030403;
}

.main-menu-button::after {
  content: "";
  position: absolute;
  inset: 10px 5px 11px auto;
  width: 8px;
  height: auto;
  border: 1px solid #454b3d;
  background:
    linear-gradient(#e26949, #8c3023) 50% 7px / 3px 18px no-repeat,
    repeating-linear-gradient(0deg, #050605 0 4px, #3e4438 4px 5px, #10130f 5px 8px) 50% calc(100% - 6px) / 4px 38% no-repeat,
    linear-gradient(#262b24, #080a08);
  box-shadow:
    inset 1px 1px rgba(125, 134, 111, 0.28),
    -2px 0 #050605;
}

.main-menu-label,
.menu-art {
  z-index: 2;
}

.main-menu-button:hover {
  border-color: color-mix(in srgb, var(--menu-accent) 68%, #717b62);
  background: var(--arcology-frame);
  box-shadow:
    inset 1px 1px 0 rgba(141, 151, 124, 0.46),
    inset -2px -2px 0 #030403,
    inset 0 0 0 4px #171c16,
    0 4px 0 #040504,
    0 10px 18px rgba(0, 0, 0, 0.42);
}

.main-menu-button:hover::before {
  border-color: color-mix(in srgb, var(--menu-accent) 78%, white 8%);
  filter: brightness(1.1);
}

.main-menu-button:active {
  box-shadow:
    inset 1px 1px 0 rgba(120, 129, 106, 0.35),
    inset -2px -2px 0 #030403,
    inset 0 0 0 4px #111510,
    0 1px 0 #040504,
    0 5px 9px rgba(0, 0, 0, 0.36);
}

.choice-radio {
  border-color: #4f5747;
  background:
    repeating-linear-gradient(135deg, #30362c 0 3px, #111510 3px 6px) 0 / 5px 100% no-repeat,
    var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 14px rgba(0, 0, 0, 0.58),
    0 2px 0 #030403;
}

.choice-radio.selected,
.choice-radio:has(input:checked) {
  border-color: color-mix(in srgb, var(--choice-accent, var(--green)) 74%, #b9c9ad);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--choice-accent, var(--green)) 82%, white 8%) 0 3px, color-mix(in srgb, var(--choice-accent, var(--green)) 44%, #162015) 3px 6px) 0 / 6px 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--choice-accent, var(--green)) 27%, #172018), color-mix(in srgb, var(--choice-accent, var(--green)) 9%, #080c08));
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 16px color-mix(in srgb, var(--choice-accent, var(--green)) 14%, transparent),
    0 2px 0 #030403;
}

#playButton {
  isolation: isolate;
  border-color: #606955;
  background: var(--arcology-frame);
  color: #e5ecd9;
  box-shadow:
    inset 1px 1px 0 rgba(130, 140, 114, 0.45),
    inset -2px -2px 0 #020302,
    inset 0 0 0 4px #151914,
    0 6px 0 #030403,
    0 12px 19px rgba(0, 0, 0, 0.42);
}

#playButton::before {
  content: "";
  position: absolute;
  inset: 6px 7px 8px;
  z-index: -1;
  border: 1px solid rgba(162, 211, 121, 0.72);
  background:
    repeating-linear-gradient(135deg, #9bdc67 0 3px, #36582a 3px 6px) 0 / 20px 100% no-repeat,
    linear-gradient(180deg, #35562b, #182f16);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(226, 244, 207, 0.12),
    0 3px 0 #020302;
}

#playButton[data-launch-state="pressed"], #playButton[data-launch-state="connecting"] { translate: 0 3px; box-shadow: inset 0 0 0 4px #151914, 0 2px 0 #030403; }
#playButton[data-launch-state="connecting"]::after,
#playButton[data-launch-state="ready"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg,#a5db76 0 28%,transparent 28% 36%,#a5db76 36% 64%,transparent 64% 72%,#a5db76 72%);
}
#playButton[data-launch-state="connecting"]::after { animation: arcology-launch-lamps 720ms steps(3,end) infinite; }
#playButton[data-launch-state="locked"] { filter: none; color: #a6aaa0; background: repeating-linear-gradient(135deg,#202722 0 5px,#454d40 5px 7px); }
#playButton[data-launch-state="locked"]::before { filter: grayscale(1); opacity: .45; }
#playButton[data-launch-state="error"] { animation: arcology-launch-denied 180ms ease-out; }
@keyframes arcology-launch-lamps { 0% { clip-path: inset(0 67% 0 0); } 66% { clip-path: inset(0 33% 0 0); } 100% { clip-path: inset(0); } }
@keyframes arcology-launch-denied { 50% { translate: 3px 0; border-color: #d87568; } }
:root[data-ui-motion="reduced"] #playButton[data-launch-state] { animation: none !important; translate: none; }
:root[data-ui-motion="reduced"] #playButton[data-launch-state="connecting"]::after { animation: none; }

.login-button,
.icon-text-button,
.settings-button,
.topbar-settings-button,
.settings-reset-button,
.mobile-mode-button,
.onboarding-control-button,
.keybind-button,
.legal-corner-button,
.support-corner-button,
.mobile-menu-close,
.mobile-ship-close,
.mobile-drawer-action,
.mobile-hud-options-button,
.mobile-hud-options-menu button {
  border-color: #535b4b;
  background: var(--arcology-frame);
  box-shadow:
    inset 1px 1px 0 rgba(120, 130, 106, 0.38),
    inset -2px -2px 0 #030403,
    inset 0 0 0 3px #111510,
    0 4px 0 #030403,
    0 8px 13px rgba(0, 0, 0, 0.32);
}

.login-button:active,
.icon-text-button:active,
.settings-button:active,
.topbar-settings-button:active,
.settings-reset-button:active,
.mobile-mode-button:active,
.onboarding-control-button:active,
.keybind-button:active,
.legal-corner-button:active,
.support-corner-button:active {
  box-shadow:
    inset 1px 1px 0 rgba(105, 113, 94, 0.3),
    inset -2px -2px 0 #030403,
    inset 0 0 0 3px #10130f,
    0 1px 0 #030403;
}

.menu-modal-card,
.settings-card,
.sound-test-card,
.profile-modal-card,
.death-card,
.confirm-card,
.victory-card,
.onboarding-card {
  isolation: isolate;
  border-color: #626a56;
  background:
    linear-gradient(#050605, #050605) 25px 10px / 24px 3px no-repeat,
    linear-gradient(#5b6352, #151914) 25px 4px / 24px 7px no-repeat,
    linear-gradient(#050605, #050605) calc(100% - 49px) 10px / 24px 3px no-repeat,
    linear-gradient(#5b6352, #151914) calc(100% - 49px) 4px / 24px 7px no-repeat,
    var(--arcology-bolt),
    var(--arcology-frame);
  box-shadow:
    0 0 0 2px #040504,
    0 0 0 9px #242922,
    0 0 0 10px rgba(103, 112, 91, 0.68),
    0 22px 50px rgba(0, 0, 0, 0.72),
    inset 1px 1px rgba(130, 139, 115, 0.38),
    inset -2px -2px #020302;
}

.menu-modal-card::before,
.settings-card::before,
.sound-test-card::before,
.profile-modal-card::before,
.death-card::before,
.confirm-card::before,
.victory-card::before,
.onboarding-card::before {
  inset: 12px;
  z-index: -1;
  border-color: rgba(105, 134, 84, 0.45);
  background: var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 32px rgba(0, 0, 0, 0.78),
    0 0 0 3px #050605,
    0 0 0 6px #292e26,
    0 0 0 7px rgba(107, 116, 95, 0.3);
}

.menu-modal-card::after,
.settings-card::after,
.sound-test-card::after,
.profile-modal-card::after,
.death-card::after,
.confirm-card::after,
.victory-card::after,
.onboarding-card::after {
  right: 4px;
  top: 22px;
  bottom: 22px;
  width: 9px;
  height: auto;
  z-index: 3;
  border: 1px solid #484f40;
  background:
    linear-gradient(#e06948, #8c3023) 50% 7px / 3px 18px no-repeat,
    repeating-linear-gradient(0deg, #050605 0 4px, #41473a 4px 5px, #111410 5px 8px) 50% calc(100% - 7px) / 5px 45% no-repeat,
    linear-gradient(#272c25, #080a08);
  box-shadow:
    inset 1px 1px rgba(121, 130, 107, 0.3),
    -3px 0 #050605;
}

.menu-modal-card > *,
.settings-card > *,
.sound-test-card > *,
.profile-modal-card > *,
.death-card > *,
.confirm-card > *,
.victory-card > *,
.onboarding-card > * {
  position: relative;
  z-index: 2;
}

.shop-tabs,
.cosmetics-tabs {
  padding: 5px;
  border: 1px solid #4c5344;
  background: linear-gradient(180deg, #252a23, #0c0f0c);
  box-shadow:
    inset 1px 1px rgba(119, 128, 106, 0.32),
    inset -2px -2px #020302,
    0 4px 0 #030403;
}

.shop-tab,
.cosmetics-tab,
.shop-buy-button,
.cosmetic-equip-button,
.upgrade-buy,
.skill-buy,
.skill-equip,
.builder-tab,
.builder-sell {
  border-color: #4d5545;
  border-radius: 1px;
  background: linear-gradient(180deg, #242a22, #090c09);
  box-shadow:
    inset 1px 1px rgba(118, 128, 105, 0.28),
    inset -2px -2px #020302,
    0 3px 0 #030403;
}

.shop-tab:is(.selected, .active, [aria-selected="true"]),
.cosmetics-tab:is(.selected, .active, [aria-selected="true"]),
.builder-tab:is(.selected, .active, [aria-selected="true"]) {
  background:
    repeating-linear-gradient(135deg, rgba(163, 214, 116, 0.65) 0 3px, rgba(55, 84, 43, 0.8) 3px 6px) 0 / 7px 100% no-repeat,
    linear-gradient(180deg, #314629, #101b0f);
}

.shop-card,
.cosmetic-card,
.inventory-card,
.builder-card,
.upgrade-card,
.skill-card,
.monetization-panel {
  border-color: #4e5646;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, #86b75f 0 3px, transparent 3px 6px) calc(100% - 10px) calc(100% - 6px) / 30px 3px no-repeat,
    var(--arcology-wear),
    linear-gradient(180deg, #20251f 0 8px, #080c08 8px calc(100% - 8px), #181d17 calc(100% - 8px));
  box-shadow:
    inset 0 0 0 3px #030403,
    inset 0 0 0 4px rgba(93, 104, 83, 0.3),
    0 4px 0 #030403,
    0 9px 16px rgba(0, 0, 0, 0.27);
}

.ship-builder-panel,
.upgrade-panel {
  border-right-color: #5b6451;
  background:
    var(--arcology-bolt),
    repeating-linear-gradient(0deg, #050605 0 7px, #42483b 7px 8px, #10130f 8px 12px) right 5px top 76px / 6px 132px no-repeat,
    linear-gradient(90deg, transparent 0 calc(100% - 16px), #2a2f27 calc(100% - 16px) calc(100% - 3px), #090b09 calc(100% - 3px)),
    var(--arcology-crt);
  box-shadow:
    inset -3px 0 0 #030403,
    inset -15px 0 0 rgba(34, 39, 32, 0.95),
    inset -16px 0 0 rgba(104, 113, 92, 0.35),
    0 0 0 2px #040504,
    18px 0 52px rgba(0, 0, 0, 0.68);
}

.builder-card canvas,
.builder-card-body {
  border-color: rgba(92, 115, 74, 0.42);
  background: var(--arcology-crt);
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 18px rgba(0, 0, 0, 0.7);
}

.upgrade-toggle,
.base-action-button {
  border-color: #59614f;
  background:
    linear-gradient(90deg, transparent calc(100% - 7px), rgba(219, 87, 56, 0.62) calc(100% - 7px) calc(100% - 4px), transparent calc(100% - 4px)),
    var(--arcology-frame);
  box-shadow:
    inset 1px 1px rgba(123, 132, 109, 0.38),
    inset -2px -2px #020302,
    inset 0 0 0 4px #121612,
    0 5px 0 #030403,
    0 11px 20px rgba(0, 0, 0, 0.42);
}

.topbar,
.leaderboard,
.minimap,
.singleplayer-panel,
.skill-hud,
.mobile-hud-options-menu,
body.is-small-mobile .topbar,
body.is-small-mobile .leaderboard,
body.is-small-mobile .minimap,
body.is-small-mobile .singleplayer-panel {
  border-color: #505847;
  background:
    linear-gradient(90deg, #a7d773 0 2px, transparent 2px) 6px 6px / 2px 14px no-repeat,
    var(--arcology-crt);
  box-shadow:
    inset 0 0 0 3px #111510,
    inset 0 0 0 4px rgba(102, 113, 90, 0.34),
    inset 0 0 20px rgba(0, 0, 0, 0.48),
    0 5px 0 #030403,
    0 11px 22px rgba(0, 0, 0, 0.4);
}

.topbar {
  border-left: 1px solid #505847;
  background:
    var(--arcology-panel-bolt),
    var(--arcology-crt);
}

.stats {
  padding: 6px 9px;
  border: 1px solid #3f4739;
  background: #050805;
  box-shadow:
    inset 0 0 0 2px #020302,
    inset 0 0 11px rgba(0, 0, 0, 0.62),
    0 0 0 3px #171b16;
}

.tutorial-guide-card {
  border-color: #696044;
  background:
    repeating-linear-gradient(135deg, rgba(205, 173, 91, 0.5) 0 3px, rgba(82, 65, 30, 0.46) 3px 6px) 0 / 7px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(199, 168, 89, 0.022) 0 1px, transparent 1px 4px),
    #080a07;
  box-shadow:
    inset 0 0 0 3px #030403,
    inset 0 0 0 4px rgba(128, 112, 68, 0.38),
    0 0 0 2px #050605,
    0 0 0 6px #252921,
    0 0 0 7px rgba(102, 109, 88, 0.48),
    0 15px 34px rgba(0, 0, 0, 0.55);
}

.mobile-menu-button,
.mobile-fullscreen-button,
.mobile-ship-button,
.mobile-menu-sheet,
.mobile-ship-sheet {
  border-color: #555d4c;
  background: var(--arcology-frame);
  box-shadow:
    inset 1px 1px rgba(122, 131, 108, 0.38),
    inset -2px -2px #020302,
    inset 0 0 0 4px #111510,
    0 5px 0 #030403,
    0 11px 22px rgba(0, 0, 0, 0.42);
}

.mobile-joystick-base,
.mobile-dpad,
.mobile-action-button {
  border-color: #626b57;
  background:
    var(--arcology-bolt),
    radial-gradient(circle at 50% 44%, rgba(44, 64, 36, 0.82), rgba(7, 10, 7, 0.9) 66%),
    var(--arcology-frame);
  box-shadow:
    inset 0 0 0 5px #111510,
    inset 0 0 0 6px rgba(111, 122, 98, 0.34),
    inset 0 0 24px rgba(0, 0, 0, 0.58),
    0 5px 0 #030403,
    0 12px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}

.mobile-joystick-knob,
.mobile-dpad-button {
  border-color: #68715d;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 35%),
    linear-gradient(180deg, #343b31, #111510);
  box-shadow:
    inset 1px 1px rgba(191, 202, 177, 0.14),
    inset -2px -2px #040504,
    0 5px 0 #030403,
    0 10px 17px rgba(0, 0, 0, 0.38);
}

.auth-panel {
  padding: 6px;
  border: 1px solid #535b4a;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #dd5a3c 0 3px, transparent 3px) calc(100% - 7px) 7px / 3px 16px no-repeat,
    var(--arcology-bolt),
    var(--arcology-frame);
  box-shadow:
    inset 1px 1px rgba(121, 130, 107, 0.36),
    inset -2px -2px #030403,
    inset 0 0 0 4px #111510,
    0 5px 0 #030403,
    0 12px 22px rgba(0, 0, 0, 0.42);
}

.support-corner-button,
.legal-corner-button {
  border-left-width: 5px;
}

/* Shipyard hardware: magazine, mounted tool spine, and assembly-bed brackets. */
.ship-builder-panel::before,
.upgrade-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px solid rgba(103, 113, 91, 0.42);
  background:
    var(--arcology-panel-bolt),
    linear-gradient(180deg, transparent 0 68px, #3d1811 68px 70px, #a14b31 70px 73px, transparent 73px) right 9px top / 4px 100% no-repeat,
    linear-gradient(180deg, transparent 0 72%, #111410 72%, #4c5544 73%, #0a0c0a 74%, transparent 74%) right 4px top / 10px 100% no-repeat;
  box-shadow:
    inset 0 0 0 3px #050605,
    inset 0 0 0 7px #242922,
    inset 0 0 0 8px rgba(101, 111, 89, 0.34);
  pointer-events: none;
}

.ship-builder-panel::after,
.upgrade-panel::after {
  content: "";
  position: absolute;
  right: 21px;
  bottom: 20px;
  width: 58px;
  height: 15px;
  z-index: 2;
  border: 1px solid #4f5746;
  background:
    repeating-linear-gradient(90deg, #050605 0 4px, #4a5143 4px 6px, #111410 6px 9px),
    #141813;
  box-shadow:
    inset 1px 1px rgba(130, 139, 114, 0.28),
    inset -2px -2px #020302,
    0 3px 0 #030403;
  pointer-events: none;
}

.builder-header,
.upgrade-header {
  margin: -4px -2px 10px;
  padding: 10px 12px 12px;
  border: 1px solid #4d5545;
  background:
    linear-gradient(90deg, #d95b3e 0 3px, transparent 3px) calc(100% - 8px) 8px / 3px 18px no-repeat,
    var(--arcology-frame);
  box-shadow:
    inset 1px 1px rgba(123, 133, 108, 0.34),
    inset -2px -2px #020302,
    inset 0 0 0 4px #111510,
    0 4px 0 #030403;
}

.builder-tabs {
  padding: 5px;
  margin-bottom: 9px;
  border: 1px solid #4b5243;
  background: linear-gradient(180deg, #242a22, #090c09);
  box-shadow:
    inset 1px 1px rgba(119, 128, 105, 0.3),
    inset -2px -2px #020302,
    0 4px 0 #030403;
}

.builder-palette {
  padding: 4px 8px 24px 4px;
  background:
    linear-gradient(90deg, #292f26 0 5px, #050605 5px 8px, transparent 8px calc(50% - 5px), #292f26 calc(50% - 5px) 50%, #050605 50% calc(50% + 3px), transparent calc(50% + 3px) calc(100% - 8px), #292f26 calc(100% - 8px) calc(100% - 3px), #050605 calc(100% - 3px)),
    repeating-linear-gradient(0deg, transparent 0 170px, rgba(130, 142, 112, 0.18) 170px 172px, #030403 172px 176px);
}

.builder-palette::-webkit-scrollbar-track,
.builder-palette::-webkit-scrollbar-thumb {
  border-radius: 0;
}

.builder-palette::-webkit-scrollbar-track {
  border: 1px solid #32382e;
  background: #060806;
}

.builder-palette::-webkit-scrollbar-thumb {
  border: 1px solid #68715b;
  background:
    repeating-linear-gradient(0deg, #35402e 0 4px, #182017 4px 7px);
}

.builder-card {
  border-left-width: 5px;
  border-right-width: 5px;
}

.builder-card:hover,
.builder-card.selected {
  filter: brightness(1.12);
}

.builder-card:active {
  box-shadow:
    inset 0 0 0 3px #030403,
    inset 0 0 0 4px rgba(93, 104, 83, 0.3),
    0 1px 0 #030403;
}

.builder-card canvas {
  border: 1px solid rgba(101, 128, 80, 0.44);
  box-shadow:
    inset 0 0 0 3px #020302,
    inset 0 0 20px rgba(0, 0, 0, 0.76),
    0 0 0 3px #151a14,
    0 3px 0 #030403;
}

.builder-card-body {
  border-top: 4px solid #181d17;
  box-shadow:
    inset 0 2px 0 #030403,
    inset 0 3px 0 rgba(105, 116, 92, 0.32);
}

.upgrade-toggle,
.base-action-button {
  border-left-width: 5px;
}

body.builder-panel-open .hud::before,
body.upgrade-panel-open .hud::before {
  content: "";
  position: absolute;
  left: max(calc(var(--side-panel-left) + var(--side-rail-width) + 164px), 590px);
  top: 194px;
  width: min(460px, calc(100vw - 940px));
  height: 520px;
  min-width: 300px;
  border: 0;
  background:
    linear-gradient(180deg, #31372d, #0a0c0a) left 50% / 14px 8px no-repeat,
    linear-gradient(180deg, #31372d, #0a0c0a) right 50% / 14px 8px no-repeat,
    linear-gradient(#5c6651, #5c6651) left top / 72px 3px no-repeat,
    linear-gradient(#5c6651, #5c6651) left top / 3px 72px no-repeat,
    linear-gradient(#5c6651, #5c6651) right top / 72px 3px no-repeat,
    linear-gradient(#5c6651, #5c6651) right top / 3px 72px no-repeat,
    linear-gradient(#5c6651, #5c6651) left bottom / 72px 3px no-repeat,
    linear-gradient(#5c6651, #5c6651) left bottom / 3px 72px no-repeat,
    linear-gradient(#5c6651, #5c6651) right bottom / 72px 3px no-repeat,
    linear-gradient(#5c6651, #5c6651) right bottom / 3px 72px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(155, 220, 103, 0.22) 8% 8.5%, transparent 8.5% 91.5%, rgba(155, 220, 103, 0.22) 91.5% 92%, transparent 92%);
  box-shadow:
    inset 0 0 0 1px rgba(4, 5, 4, 0.6),
    0 0 18px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.singleplayer-panel {
  background:
    var(--arcology-panel-bolt),
    repeating-linear-gradient(90deg, #050605 0 5px, #48503f 5px 7px, #111410 7px 10px) calc(100% - 12px) calc(100% - 8px) / 62px 8px no-repeat,
    var(--arcology-crt);
}

.singleplayer-panel-head {
  margin: -4px -4px 5px;
  padding: 7px 9px;
  border: 1px solid #444b3d;
  background: linear-gradient(180deg, #20261e, #090c09);
  box-shadow:
    inset 1px 1px rgba(118, 128, 104, 0.26),
    inset -2px -2px #020302;
}

.singleplayer-actions button {
  border-color: #4d5545;
  border-radius: 1px;
  background: linear-gradient(180deg, #272d25, #090c09);
  box-shadow:
    inset 1px 1px rgba(118, 128, 105, 0.28),
    inset -2px -2px #020302,
    0 3px 0 #030403;
}

.shop-card[aria-disabled="true"],
.shop-card.disabled,
.shop-card.unavailable {
  opacity: 1;
  filter: none;
}

.shop-card[aria-disabled="true"] > *,
.shop-card.disabled > *,
.shop-card.unavailable > * {
  opacity: 0.62;
  filter: grayscale(0.45);
}

.menu-modal-head,
.settings-head,
.sound-test-head,
.profile-modal-head {
  min-height: 40px;
  margin: -5px -4px 10px;
  padding: 7px 9px 9px;
  border: 1px solid #4e5646;
  background:
    linear-gradient(90deg, rgba(155, 220, 103, 0.72) 0 3px, transparent 3px) 6px 8px / 3px 17px no-repeat,
    var(--arcology-frame);
  box-shadow:
    inset 1px 1px rgba(122, 132, 108, 0.34),
    inset -2px -2px #020302,
    0 4px 0 #030403;
}

.menu-modal-head .icon-text-button,
.settings-head .icon-text-button,
.sound-test-head .icon-text-button,
.profile-modal-head .icon-text-button {
  min-height: 34px;
}

/* src/styles/arcology-terminal-motion.css */
/*
 * Arcology Cyber Terminal: motion
 *
 * Cosmetic boot, engagement, indicator, and physical key travel only. Game
 * state and button behavior remain in JavaScript; removing this file leaves a
 * fully usable static terminal skin.
 */

.start-panel,
.start-side-panel {
  animation: arcology-panel-boot 420ms ease-out both;
}

.start-panel {
  animation-delay: 50ms;
}

.menu-side-panel {
  animation-delay: 100ms;
}

.start-panel::after,
.start-side-panel::after {
  animation: arcology-status-pulse 2.8s steps(2, jump-none) infinite;
}

.main-menu-button::after {
  animation: arcology-status-pulse 3.4s steps(2, jump-none) infinite;
}

.menu-modal-card,
.settings-card,
.sound-test-card,
.profile-modal-card,
.death-card,
.confirm-card,
.victory-card,
.onboarding-card {
  animation: arcology-modal-engage 210ms ease-out both;
}

.menu-modal-card::after,
.settings-card::after,
.sound-test-card::after,
.profile-modal-card::after,
.death-card::after,
.confirm-card::after,
.victory-card::after,
.onboarding-card::after {
  animation: arcology-status-pulse 3.1s steps(2, jump-none) infinite;
}

#playButton,
.onboarding-primary,
.death-actions button:first-child,
.reconnect-choice-card .confirm-actions button:first-child,
.victory-actions button:last-child {
  transition: filter 140ms ease, transform 90ms ease, box-shadow 90ms ease;
}

.builder-card {
  transition: transform 90ms ease, border-color 130ms ease, filter 130ms ease;
}

.main-menu-button:active,
.booster-row button:active,
#playButton:active,
.login-button:active,
.icon-text-button:active,
.settings-button:active,
.topbar-settings-button:active,
.settings-reset-button:active,
.mobile-mode-button:active,
.onboarding-control-button:active,
.keybind-button:active,
.legal-corner-button:active,
.support-corner-button:active {
  transform: translateY(3px);
}

.builder-card:hover,
.builder-card.selected {
  transform: translateY(-2px);
}

.builder-card:active {
  transform: translateY(2px);
}

@keyframes arcology-panel-boot {
  0% {
    opacity: 0;
    filter: brightness(0.45) contrast(1.25);
  }
  46% {
    opacity: 0.86;
    filter: brightness(1.22) contrast(1.08);
  }
  100% {
    opacity: 1;
    filter: brightness(1) contrast(1);
  }
}

@keyframes arcology-modal-engage {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.965);
    filter: brightness(0.52) saturate(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled),
  .choice-radio,
  .inventory-card,
  .shop-card,
  .cosmetic-card,
  a.news-link {
    transition: filter 130ms ease, border-color 130ms ease, box-shadow 130ms ease, transform 110ms ease;
  }

  button:not(:disabled):hover,
  .choice-radio:hover,
  .inventory-card:hover,
  .shop-card:hover,
  .cosmetic-card:hover,
  a.news-link:hover {
    filter: brightness(1.14) saturate(1.09);
    box-shadow: 0 0 0 1px rgba(185, 235, 255, 0.12), 0 0 18px rgba(92, 209, 228, 0.12);
  }

  .main-menu-button:hover,
  .builder-card:hover,
  .upgrade-card:hover,
  .skill-card:hover {
    transform: translateY(-2px);
  }

  .choice-radio:has(input:focus-visible) {
    outline: 2px solid var(--choice-accent, var(--cyan));
    outline-offset: 3px;
  }
}

@keyframes arcology-status-pulse {
  0%,
  72%,
  100% {
    opacity: 0.42;
  }
  76%,
  84% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .start-panel,
  :root:not([data-ui-motion="full"]) .start-side-panel,
  :root:not([data-ui-motion="full"]) .menu-modal-card,
  :root:not([data-ui-motion="full"]) .settings-card,
  :root:not([data-ui-motion="full"]) .sound-test-card,
  :root:not([data-ui-motion="full"]) .profile-modal-card,
  :root:not([data-ui-motion="full"]) .death-card,
  :root:not([data-ui-motion="full"]) .confirm-card,
  :root:not([data-ui-motion="full"]) .victory-card,
  :root:not([data-ui-motion="full"]) .onboarding-card,
  :root:not([data-ui-motion="full"]) .start-panel::after,
  :root:not([data-ui-motion="full"]) .start-side-panel::after,
  :root:not([data-ui-motion="full"]) .main-menu-button::after,
  :root:not([data-ui-motion="full"]) .menu-modal-card::after,
  :root:not([data-ui-motion="full"]) .settings-card::after,
  :root:not([data-ui-motion="full"]) .sound-test-card::after,
  :root:not([data-ui-motion="full"]) .profile-modal-card::after,
  :root:not([data-ui-motion="full"]) .death-card::after,
  :root:not([data-ui-motion="full"]) .confirm-card::after,
  :root:not([data-ui-motion="full"]) .victory-card::after,
  :root:not([data-ui-motion="full"]) .onboarding-card::after,
  :root:not([data-ui-motion="full"]) #playButton,
  :root:not([data-ui-motion="full"]) .onboarding-primary,
  :root:not([data-ui-motion="full"]) .builder-card {
    animation: none !important;
    transition: none !important;
  }

  :root:not([data-ui-motion="full"]) button,
  :root:not([data-ui-motion="full"]) .choice-radio,
  :root:not([data-ui-motion="full"]) .inventory-card,
  :root:not([data-ui-motion="full"]) .shop-card,
  :root:not([data-ui-motion="full"]) .cosmetic-card {
    transition: none !important;
  }
}

/* src/styles/arcology-terminal-responsive.css */
/*
 * Arcology Cyber Terminal: responsive adaptation
 *
 * Device-density reductions and compatibility gates only. These rules consume
 * state classes owned by the existing UI logic and never implement behavior.
 */

/* Compact mobile material and layout adaptation. */
body.is-small-mobile:not(.is-playing) .start-layout::before {
  display: block;
  inset: -11px -9px;
  width: auto;
  height: auto;
  border-color: #59614f;
  background:
    var(--arcology-panel-bolt),
    repeating-linear-gradient(90deg, #060806 0 8px, #454b3e 8px 10px, #111410 10px 14px) 30px 3px / calc(100% - 60px) 8px no-repeat,
    var(--arcology-frame);
  box-shadow:
    0 0 0 2px #040504,
    0 0 0 7px #242922,
    0 0 0 8px rgba(111, 121, 98, 0.62),
    0 14px 28px rgba(0, 0, 0, 0.62);
}

body.is-small-mobile:not(.is-playing) .start-layout::after {
  display: none;
}

body.is-small-mobile .topbar,
body.is-small-mobile .leaderboard,
body.is-small-mobile .minimap,
body.is-small-mobile .singleplayer-panel,
body.is-small-mobile .mobile-menu-button,
body.is-small-mobile .mobile-fullscreen-button,
body.is-small-mobile .mobile-ship-button {
  border-color: #59614f;
  box-shadow:
    inset 0 0 0 3px #111510,
    inset 0 0 0 4px rgba(108, 119, 95, 0.4),
    inset 0 0 16px rgba(0, 0, 0, 0.46),
    0 3px 0 #030403,
    0 8px 17px rgba(0, 0, 0, 0.4);
}

body.is-small-mobile .mobile-joystick-base,
body.is-small-mobile .mobile-dpad,
body.is-small-mobile .mobile-action-button {
  background:
    var(--arcology-panel-bolt),
    radial-gradient(circle at 50% 44%, rgba(44, 64, 36, 0.82), rgba(7, 10, 7, 0.9) 66%),
    var(--arcology-frame);
}

body.is-small-mobile.small-mobile-landscape .singleplayer-panel {
  top: calc(env(safe-area-inset-top, 0px) + 112px);
  right: calc(env(safe-area-inset-right, 0px) + 72px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  width: min(244px, calc(100vw - 190px));
  max-height: none;
  padding: 8px;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
  box-shadow:
    inset 0 0 0 3px #111510,
    inset 0 0 0 4px rgba(108, 119, 95, 0.4),
    inset 0 0 16px rgba(0, 0, 0, 0.46),
    0 3px 0 #030403,
    0 7px 13px rgba(0, 0, 0, 0.38);
}

body.is-small-mobile.small-mobile-landscape .singleplayer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.is-small-mobile.small-mobile-landscape .singleplayer-actions button,
body.is-small-mobile.small-mobile-landscape .choice-radio {
  min-height: 44px;
}

body.is-small-mobile.small-mobile-landscape .choice-radio {
  padding: 6px 3px;
  gap: 3px;
  font-size: 10px;
}

body.is-small-mobile.small-mobile-landscape .start-panel {
  gap: 3px;
  padding: 8px 12px;
}

body.is-small-mobile.small-mobile-landscape .start-panel input {
  min-height: 44px;
  padding: 8px 9px;
}

body.is-small-mobile.small-mobile-landscape .start-panel h1 {
  font-size: clamp(19px, 5svh, 23px);
}

body.is-small-mobile.small-mobile-landscape .start-panel label,
body.is-small-mobile.small-mobile-landscape #startStatus {
  line-height: 1.1;
}

body.is-small-mobile.small-mobile-landscape #playButton {
  min-height: 46px;
}

body.is-small-mobile.small-mobile-landscape .room-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.is-small-mobile .choice-radio input,
body.is-small-mobile.small-mobile-landscape .choice-radio input {
  width: 14px;
  height: 14px;
  min-height: 0;
  flex: 0 0 14px;
  padding: 0;
}

body.is-small-mobile.tutorial-lockdown .mobile-fullscreen-button,
body.is-small-mobile.tutorial-lockdown .mobile-hud-options,
body.is-small-mobile.tutorial-lockdown .mobile-hud-options-button {
  display: none !important;
}

body.is-small-mobile.small-mobile-landscape .tutorial-exit-button {
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  min-height: 44px;
}

body.is-small-mobile.small-mobile-portrait:not(.is-playing) .mobile-ship-button {
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + 126px);
  width: 58px;
  height: 64px;
}

body.is-small-mobile.small-mobile-portrait:not(.is-playing) .choice-radio {
  min-height: 44px;
}

body.is-small-mobile .ship-builder-panel::after,
body.is-small-mobile .upgrade-panel::after,
body.is-small-mobile.builder-panel-open .hud::before,
body.is-small-mobile.upgrade-panel-open .hud::before {
  display: none;
}

/* Tablet chassis reduction preserves the three mounted bays. */
@media (min-width: 701px) and (max-width: 1100px) {
  .start-layout::before {
    inset: -30px -12px;
    background:
      var(--arcology-panel-bolt),
      linear-gradient(90deg, transparent 0 8%, #9d482f 8% 8.4%, transparent 8.4% 31%, #633725 31% 31.35%, transparent 31.35% 70%, #9d482f 70% 70.38%, transparent 70.38%) 0 11px / 100% 4px no-repeat,
      repeating-linear-gradient(90deg, #060806 0 10px, #40463a 10px 12px, #111510 12px 17px) 28px 4px / calc(32% - 28px) 19px no-repeat,
      repeating-linear-gradient(90deg, #060806 0 10px, #40463a 10px 12px, #111510 12px 17px) 36% 4px / 28% 19px no-repeat,
      repeating-linear-gradient(90deg, #060806 0 10px, #40463a 10px 12px, #111510 12px 17px) calc(100% - 32%) 4px / calc(32% - 28px) 19px no-repeat,
      var(--arcology-wear),
      linear-gradient(180deg, #2f342c 0 5%, #111510 5% 95%, #252a23 95% 100%);
  }

  .start-layout::after {
    --arcology-clamp-gap: 104px;
    --arcology-clamp-metal-end: 110px;
    --arcology-clamp-end: 118px;
    left: -8px;
    right: -8px;
  }
}

/* Compact phone enclosure: reduce layers, never the controls. */
@media (max-width: 700px) {
  .start-layout::before {
    display: block;
    inset: -12px -10px;
    border-color: #555d4c;
    background:
      var(--arcology-bolt),
      repeating-linear-gradient(90deg, #060806 0 8px, #3d4337 8px 10px, #111410 10px 14px) 34px 3px / calc(100% - 68px) 9px no-repeat,
      var(--arcology-frame);
    box-shadow:
      0 0 0 2px #040504,
      0 0 0 7px #242922,
      0 0 0 8px rgba(103, 112, 91, 0.62),
      0 14px 30px rgba(0, 0, 0, 0.62);
  }

  .start-layout::after {
    display: none;
  }

  .start-panel,
  .start-side-panel {
    box-shadow:
      inset 1px 1px 0 rgba(121, 130, 107, 0.42),
      inset -2px -2px 0 #050605,
      inset 0 0 0 7px #171b16,
      inset 0 0 0 8px rgba(99, 108, 88, 0.34),
      0 0 0 2px #060706,
      0 9px 22px rgba(0, 0, 0, 0.54);
  }

  .start-panel::before,
  .start-side-panel::before {
    inset: 10px;
    box-shadow:
      inset 0 0 0 2px #020302,
      inset 0 0 28px rgba(0, 0, 0, 0.8),
      0 0 0 2px #050605,
      0 0 0 4px #292e26,
      0 0 0 5px rgba(104, 114, 92, 0.34);
  }

  .start-panel::after,
  .start-side-panel::after {
    right: 3px;
    top: 16px;
    bottom: 16px;
    width: 7px;
  }

  .start-panel h1 {
    font-size: clamp(23px, 7.2vw, 31px);
  }

  .main-menu-label {
    font-size: 18px;
  }
}

/*
 * Compatibility gates
 *
 * These protect existing layout, touch, and visibility contracts. They stay
 * last so the Arcology paint layer cannot obscure or shrink a working control.
 */
body.builder-panel-open .ship-builder-panel,
body.upgrade-panel-open .upgrade-panel {
  padding-top: 92px;
}

body.builder-panel-open .singleplayer-panel,
body.upgrade-panel-open .singleplayer-panel {
  display: none !important;
}

body.builder-panel-open .spawn-protection-banner,
body.upgrade-panel-open .spawn-protection-banner {
  top: 112px;
}

.hud:has(.singleplayer-panel:not(.hidden)) > .leaderboard {
  display: none;
}

.room-choice-grid .choice-radio {
  padding-inline: 3px;
  gap: 3px;
  font-size: 10px;
}

.room-choice-grid .choice-radio span {
  overflow: visible;
  text-overflow: clip;
}

@media (pointer: coarse) {
  .choice-radio,
  .start-panel input:not([type="radio"]),
  .mobile-hud-options-button,
  .mobile-hud-options-menu button,
  .singleplayer-actions button {
    min-height: 44px;
  }

  #playButton {
    min-height: 46px;
  }

  .builder-tab,
  .builder-sell {
    height: 44px;
  }

  .choice-radio input {
    width: 14px;
    height: 14px;
    min-height: 0;
    flex: 0 0 14px;
    padding: 0;
  }
}

@media (pointer: coarse) and (min-width: 900px) {
  body.is-playing:not(.minimap-expanded) .minimap {
    left: calc(env(safe-area-inset-left, 0px) + var(--side-rail-width) + 8px) !important;
  }
}

body.is-playing.is-small-mobile:not(.minimap-expanded) .minimap {
  left: calc(env(safe-area-inset-left, 0px) + var(--side-rail-width) + 8px) !important;
}

@media (pointer: coarse) and (min-width: 761px) and (max-width: 1100px) {
  .module-info-popup.mobile {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(320px, calc(100vw - var(--side-panel-width) - var(--side-rail-width) - 44px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    transform: none;
  }
}

body.is-small-mobile.small-mobile-portrait .start-layout {
  width: min(352px, calc(100vw - 38px));
}

/* src/styles/service-station-components.css */
/* Service-station static material and component geometry.
   Runtime state belongs to game/service-station-system.js; motion is separate. */

.service-dock-hud {
  --service-accent: #9bdc67;
  --service-dock-hud-width: 430px;
  position: fixed;
  z-index: 160;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  left: 50%;
  width: min(var(--service-dock-hud-width), calc(100vw - 32px));
  min-height: 62px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #d7e1ca;
  background:
    radial-gradient(circle at 9px 9px, #10130f 0 2px, #8e9780 2.2px 4px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #10130f 0 2px, #8e9780 2.2px 4px, transparent 4.2px),
    linear-gradient(135deg, transparent 0 9px, #343a31 9px 11px, #20251f 11px calc(100% - 11px), #080b08 calc(100% - 11px));
  border: 2px solid #070907;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow:
    inset 1px 1px rgba(141, 153, 128, 0.34),
    inset 0 0 0 6px #151a15,
    inset 0 0 0 8px #050705,
    0 6px 0 #040604,
    0 14px 30px rgba(0, 0, 0, 0.62);
  transform: translateX(-50%);
}

.service-dock-hud.hidden {
  display: none;
}

.service-dock-hud::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 7px;
  border: 1px solid rgba(118, 129, 108, 0.42);
  clip-path: inherit;
}

.service-dock-lamp {
  width: 8px;
  height: 30px;
  justify-self: center;
  background: #49352c;
  border: 2px solid #090b09;
  box-shadow: inset 1px 1px rgba(255, 180, 126, 0.22), 0 0 0 1px #525a4c;
}

.service-dock-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #071007, #030603);
  border: 2px solid #080a08;
  box-shadow: inset 1px 1px rgba(99, 122, 91, 0.25), inset 0 0 14px rgba(58, 112, 43, 0.12);
}

.service-dock-copy small {
  color: #7f8d76;
  font: 700 9px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.service-dock-copy strong {
  overflow: hidden;
  color: var(--service-accent);
  font: 800 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px rgba(155, 220, 103, 0.25);
  white-space: nowrap;
}

.service-dock-meter {
  height: 12px;
  padding: 3px;
  background: #050705;
  border: 1px solid #4d5548;
  box-shadow: inset 0 1px 3px #000;
}

.service-dock-meter i {
  display: block;
  width: var(--dock-progress, 0%);
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--service-accent) 0 5px, #31502a 5px 7px);
  box-shadow: 0 0 7px rgba(155, 220, 103, 0.34);
}

.service-dock-exit {
  position: fixed;
  z-index: 148;
  pointer-events: auto;
  right: calc(env(safe-area-inset-right, 0px) + 26px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  width: clamp(184px, 16vw, 224px);
  min-height: 72px;
  padding: 14px 28px 14px 38px;
  color: #eff8e8;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(118, 132, 108, 0.2) 7px 8px, transparent 8px 14px) right 13px bottom 10px / 56px 7px no-repeat,
    linear-gradient(180deg, #465040 0 12%, #30382d 12% 48%, #171c17 48% 100%);
  border: 3px solid #070907;
  border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  box-shadow:
    inset 1px 1px rgba(181, 194, 166, 0.42),
    inset -3px -3px #090c09,
    inset 0 0 0 6px #232a21,
    0 6px 0 #030503,
    0 13px 24px rgba(0, 0, 0, 0.56);
  font: 900 17px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.12em;
  text-shadow: 0 0 7px rgba(155, 220, 103, 0.28);
}

.service-dock-exit.hidden {
  display: none;
}

.service-dock-exit::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 13px;
  bottom: 13px;
  left: 13px;
  width: 6px;
  background: #d75738;
  border: 2px solid #090b09;
  box-shadow: inset 1px 1px rgba(255, 184, 130, 0.26), 0 0 0 1px #596050, 0 0 7px rgba(215, 87, 56, 0.42);
}

.service-dock-exit::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 7px;
  border: 1px solid rgba(174, 188, 158, 0.3);
  clip-path: inherit;
}

.service-dock-exit:disabled {
  color: #858f7e;
  filter: saturate(0.45) brightness(0.72);
}

.service-ship-stats {
  position: fixed;
  z-index: 147;
  top: 54%;
  right: calc(env(safe-area-inset-right, 0px) + 26px);
  width: clamp(248px, 21vw, 314px);
  box-sizing: border-box;
  padding: 14px 12px 12px;
  pointer-events: none;
  color: #dce8d4;
  border: 2px solid #070907;
  clip-path: polygon(15px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  background:
    linear-gradient(135deg, rgba(155, 220, 103, 0.17), transparent 21%) top left / 100% 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(122, 143, 112, 0.045) 9px 10px),
    linear-gradient(160deg, rgba(35, 43, 33, 0.96), rgba(5, 9, 6, 0.97));
  box-shadow:
    inset 1px 1px rgba(156, 177, 144, 0.3),
    inset 0 0 0 6px #111711,
    inset 0 0 34px rgba(75, 126, 59, 0.12),
    0 8px 0 #030503,
    0 18px 38px rgba(0, 0, 0, 0.62);
  transform: translateY(-50%);
}

.service-ship-stats.hidden {
  display: none;
}

.service-ship-stats::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(142, 162, 131, 0.32);
  clip-path: inherit;
}

.service-ship-stats header {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 3px 9px 7px;
  border-bottom: 1px solid rgba(151, 174, 139, 0.32);
}

.service-ship-stats header small {
  color: #7f9277;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.18em;
}

.service-ship-stats header strong {
  color: #bff59f;
  font: 900 14px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.09em;
  text-shadow: 0 0 8px rgba(128, 240, 91, 0.22);
}

.service-ship-stats canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: -2px 0 -4px;
}

.service-ship-stats-condition {
  min-height: 12px;
  margin: 0 9px 2px;
  color: #9bdc67;
  font: 800 9px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.055em;
  text-align: center;
}

.service-ship-stats-condition.warning {
  color: #f0c64d;
  text-shadow: 0 0 7px rgba(240, 198, 77, 0.28);
}

body.service-station-pulling .service-dock-lamp {
  background: #d75738;
}

body.service-station-opening .service-dock-lamp {
  background: #f0c64d;
}

body.service-station-entering .service-dock-lamp {
  background: #42d9c8;
}

body.service-station-docked .service-dock-lamp {
  background: var(--service-accent);
}

body.service-station-launching .service-dock-lamp {
  background: #e4a04f;
}

body.service-station-docked .service-dock-meter i {
  width: 100%;
}

body:is(.service-station-pulling, .service-station-opening, .service-station-entering, .service-station-launching) :is(.upgrade-toggle, .base-action-rail),
body:is(.service-station-entering, .service-station-docked, .service-station-launching) :is(.leaderboard, .minimap, .singleplayer-panel) {
  display: none !important;
}

body:is(.service-station-pulling, .service-station-opening, .service-station-entering, .service-station-docked, .service-station-launching) .spawn-protection-banner {
  display: none !important;
}

/* Default-loadout editor: the profile editor reuses the bay's physical
   language, while its draft/save behavior stays in game.js. */
.default-ship-service-shell {
  isolation: isolate;
  background:
    radial-gradient(circle at 58% 50%, rgba(87, 132, 62, 0.1), transparent 34%),
    repeating-linear-gradient(90deg, rgba(83, 96, 75, 0.12) 0 2px, transparent 2px 72px),
    linear-gradient(180deg, #0a0d0a, #020402 62%, #070a07);
}

.default-ship-dock-builder {
  color: #d7e1ca;
  border-right: 3px solid #080a08;
  background:
    radial-gradient(circle at 11px 11px, #10130f 0 2px, #9aa38b 2.2px 4.5px, transparent 4.8px),
    radial-gradient(circle at calc(100% - 22px) 11px, #10130f 0 2px, #9aa38b 2.2px 4.5px, transparent 4.8px),
    radial-gradient(circle at 11px calc(100% - 11px), #10130f 0 2px, #9aa38b 2.2px 4.5px, transparent 4.8px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 11px), #10130f 0 2px, #9aa38b 2.2px 4.5px, transparent 4.8px),
    repeating-linear-gradient(0deg, #050605 0 7px, #444b3d 7px 9px, #111410 9px 13px) right 7px top 94px / 8px 122px no-repeat,
    linear-gradient(90deg, #252b23, #111510 12px, #071007 14px calc(100% - 20px), #292f27 calc(100% - 20px) calc(100% - 4px), #070907 calc(100% - 4px));
  box-shadow:
    inset 1px 1px rgba(151, 163, 139, 0.3),
    inset -4px -3px #030403,
    inset -19px 0 #171c16,
    14px 0 34px rgba(0, 0, 0, 0.58);
}

.default-ship-dock-builder::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 7px 20px 7px 7px;
  border: 2px solid #050705;
  box-shadow: inset 0 0 0 3px #252b23, inset 0 0 0 5px #090c09;
}

.default-ship-dock-builder::after {
  content: "";
  position: absolute;
  pointer-events: none;
  right: 4px;
  bottom: 54px;
  width: 15px;
  height: 38px;
  background:
    linear-gradient(#d75738, #7d3023) center 7px / 4px 13px no-repeat,
    linear-gradient(180deg, #3f4739, #151915);
  border: 2px solid #050705;
  box-shadow: inset 1px 1px rgba(154, 168, 139, 0.3), 0 3px 0 #020302;
}

.default-ship-builder-header {
  position: relative;
  z-index: 2;
  min-height: 56px;
  padding: 9px 10px;
  border: 2px solid #060806;
  background:
    linear-gradient(90deg, #d75738 0 4px, transparent 4px) 8px 10px / 4px 24px no-repeat,
    linear-gradient(180deg, #30372d, #111510);
  box-shadow: inset 1px 1px rgba(158, 171, 145, 0.3), inset -2px -2px #030403, 0 5px 0 #030403;
}

.default-ship-builder-header h2 {
  color: #d7e1ca;
  font: 900 17px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.04em;
}

.default-ship-builder-header > div {
  min-width: 0;
  padding-left: 8px;
}

.default-ship-builder-header p {
  color: #93bd76;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.default-ship-dock-builder .default-ship-module-palette {
  position: relative;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, #070907 0 6px, #30362d 6px 8px, transparent 8px calc(50% - 4px), #070907 calc(50% - 4px) calc(50% + 4px), #30362d calc(50% + 4px) calc(50% + 6px), transparent calc(50% + 6px));
  scrollbar-color: #59614f #070907;
  scrollbar-width: thin;
}

.default-ship-dock-builder .default-ship-module-palette button {
  border: 2px solid #080a08;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(136, 149, 124, 0.08), transparent 30%),
    linear-gradient(180deg, #252b23 0 7px, #071007 7px calc(100% - 5px), #171c16 calc(100% - 5px));
  box-shadow: inset 1px 1px rgba(135, 148, 121, 0.24), inset -2px -2px #030403, 0 3px 0 #030403;
}

.default-ship-dock-builder .default-ship-module-palette button.selected {
  border-color: #73965c;
  background:
    linear-gradient(90deg, #d75738 0 4px, transparent 4px),
    linear-gradient(180deg, #31462a, #0b140b);
}

.default-ship-module-preview {
  border-radius: 0;
  border: 2px solid #050705;
  background: #030603;
  box-shadow: inset 0 0 0 1px rgba(116, 145, 94, 0.25), inset 0 0 14px #000;
}

.default-ship-bay-stage {
  background:
    linear-gradient(90deg, #30362d 0 8px, #080a08 8px 14px, transparent 14px calc(100% - 14px), #080a08 calc(100% - 14px) calc(100% - 8px), #30362d calc(100% - 8px)),
    linear-gradient(180deg, #1a1f19, #030503 10%, #020402 90%, #171c16);
  box-shadow: inset 0 0 58px #000;
}

.default-ship-bay-stage::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 18px;
  border: 3px solid #070907;
  box-shadow: inset 0 0 0 2px #3d4438, inset 0 0 0 8px #101410;
}

.default-ship-bay-stage #defaultShipEditorCanvas {
  position: relative;
  z-index: 1;
  border: 3px solid #060806;
  box-shadow: 0 0 0 5px #2b3128, 0 0 0 8px #080a08, 0 18px 38px rgba(0, 0, 0, 0.62);
}

.default-ship-capacity-panel {
  color: #d7e1ca;
  border: 3px solid #070907;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background:
    radial-gradient(circle at 10px 10px, #11140f 0 2px, #909982 2.2px 4px, transparent 4.2px),
    linear-gradient(90deg, #d75738 0 4px, transparent 4px) 14px calc(100% - 17px) / 42px 4px no-repeat,
    linear-gradient(180deg, #30372d, #121612 9px, #061006 11px calc(100% - 9px), #171c16 calc(100% - 9px));
  box-shadow: inset 1px 1px rgba(157, 170, 145, 0.34), inset 0 0 0 7px #0d110d, 0 6px 0 #030403, 0 18px 34px rgba(0, 0, 0, 0.52);
}

.default-ship-capacity-panel small {
  color: #8d987f;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.default-ship-capacity-panel .default-ship-limit-text {
  color: #9bdc67;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 0 5px rgba(155, 220, 103, 0.24);
}

.default-ship-capacity-panel .default-ship-editor-hint {
  color: #a4ad9c;
}

/* src/styles/service-station-motion.css */
/* Service-station motion only. No layout, hit targets, or state logic here. */

.service-dock-hud {
  animation: service-dock-panel-engage 220ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.service-dock-lamp {
  animation: service-dock-lamp-pulse 900ms steps(2, end) infinite;
}

.service-dock-meter i {
  transition: width 90ms linear;
}

.service-dock-exit {
  transition: filter 110ms ease, transform 80ms ease, box-shadow 80ms ease;
}

.service-dock-exit:not(.hidden) {
  animation: service-dock-launch-key-engage 240ms cubic-bezier(0.18, 0.78, 0.2, 1) backwards;
}

.service-ship-stats:not(.hidden) {
  animation: service-ship-stats-engage 280ms cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

.service-dock-exit:not(:disabled):hover {
  filter: brightness(1.16);
  transform: translateY(-2px);
}

.service-dock-exit:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 1px 1px rgba(147, 160, 134, 0.26), inset -2px -2px #050705, 0 1px 0 #030503;
}

@keyframes service-dock-panel-engage {
  from { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes service-dock-lamp-pulse {
  0%, 45% { filter: brightness(0.68); }
  50%, 100% { filter: brightness(1.25); }
}

@keyframes service-dock-launch-key-engage {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes service-ship-stats-engage {
  from { opacity: 0; transform: translate(18px, -50%) scale(0.96); filter: brightness(0.72); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); filter: brightness(1); }
}

:root[data-ui-motion="reduced"] :is(.service-dock-hud, .service-dock-lamp, .service-dock-exit, .service-ship-stats) {
  animation: none !important;
}
:root[data-ui-motion="reduced"] .service-dock-lamp { filter: brightness(1) !important; }
:root[data-ui-motion="reduced"] :is(.service-dock-meter i, .service-dock-exit) { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) :is(.service-dock-hud, .service-dock-lamp, .service-dock-exit, .service-ship-stats) {
    animation: none !important;
  }
  :root:not([data-ui-motion="full"]) .service-dock-lamp { filter: brightness(1) !important; }
  :root:not([data-ui-motion="full"]) :is(.service-dock-meter i, .service-dock-exit) {
    transition: none !important;
  }
}

/* src/styles/service-station-responsive.css */
/* Service-station viewport adaptation only. Static visual density is reduced per device. */

@media (pointer: coarse) {
  .service-dock-exit {
    min-height: 60px;
  }
}

@media (max-width: 1100px) {
  .service-dock-hud {
    --service-dock-hud-width: 390px;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    width: min(390px, calc(100vw - 24px));
    grid-template-columns: 12px minmax(0, 1fr) 68px;
    gap: 9px;
  }

  .service-dock-exit {
    right: calc(env(safe-area-inset-right, 0px) + 20px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    width: 176px;
    min-height: 66px;
    font-size: 15px;
  }

  .service-ship-stats {
    right: calc(env(safe-area-inset-right, 0px) + 18px);
    width: clamp(218px, 27vw, 272px);
  }
}

/* Keep the banner in the world area, clear of both the editor and its controls. */
body:is(.builder-panel-open, .upgrade-panel-open) .service-dock-hud {
  left: calc(
    var(--side-panel-left) + var(--side-rail-width)
    + (100vw - var(--side-panel-left) - var(--side-rail-width)) / 2
  );
  width: min(var(--service-dock-hud-width), calc(100vw - var(--side-panel-left) - var(--side-rail-width) - 24px));
}

body.is-small-mobile .service-dock-hud {
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  width: min(420px, calc(100vw - 136px));
  min-height: 52px;
  grid-template-columns: 8px minmax(0, 1fr) 50px;
  gap: 6px;
  padding: 7px 9px;
  box-shadow: inset 1px 1px rgba(141, 153, 128, 0.3), inset 0 0 0 4px #151a15, inset 0 0 0 6px #050705, 0 3px 0 #040604, 0 8px 18px rgba(0, 0, 0, 0.58);
}

body.is-small-mobile .service-dock-copy {
  padding: 4px 7px;
}

body.is-small-mobile .service-dock-copy small {
  font-size: 8px;
}

body.is-small-mobile .service-dock-copy strong {
  font-size: 10px;
}

body.is-small-mobile .service-dock-lamp {
  width: 5px;
  height: 24px;
}

body.is-small-mobile .service-dock-exit {
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: 156px;
  min-width: 0;
  min-height: 58px;
  padding: 11px 18px 11px 32px;
  font-size: 13px;
}

body.is-small-mobile .service-ship-stats {
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  width: 168px;
  padding: 9px 7px 8px;
}

body.is-small-mobile .service-ship-stats header {
  padding: 2px 7px 4px;
}

body.is-small-mobile .service-ship-stats header small {
  font-size: 6px;
}

body.is-small-mobile .service-ship-stats header strong {
  font-size: 10px;
}

body.is-small-mobile .service-ship-stats-condition {
  margin-inline: 4px;
  font-size: 6px;
}

body.is-small-mobile.small-mobile-portrait .service-dock-hud {
  top: calc(env(safe-area-inset-top, 0px) + 86px);
  left: 50%;
  width: calc(100vw - 20px);
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

body.is-small-mobile.small-mobile-landscape:is(.builder-panel-open, .upgrade-panel-open) .service-dock-hud {
  left: calc(
    var(--side-panel-width) + var(--side-rail-width)
    + (100vw - var(--side-panel-width) - var(--side-rail-width)) / 2
  );
  width: min(390px, calc(100vw - var(--side-panel-width) - var(--side-rail-width) - 16px));
}

body.is-small-mobile.small-mobile-portrait:is(.builder-panel-open, .upgrade-panel-open) .service-dock-hud {
  top: calc(var(--side-rail-top) + var(--side-upgrade-height) + 8px);
}

body.is-small-mobile.small-mobile-portrait .service-dock-meter {
  display: none;
}

body.is-small-mobile.small-mobile-portrait .service-dock-exit {
  width: 150px;
  min-height: 60px;
}

body.is-small-mobile.small-mobile-portrait.service-station-docked.builder-panel-open .ship-builder-panel,
body.is-small-mobile.small-mobile-portrait.service-station-docked.upgrade-panel-open .upgrade-panel {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* Reserve space only for visible controls. Informational overlays must never
   cover the full-width phone editor or its side rail. */
body.is-small-mobile .service-dock-hud {
  pointer-events: none;
  min-height: 30px;
  padding: 3px 6px;
  grid-template-columns: 5px minmax(0, 1fr);
}

body.is-small-mobile .service-dock-copy { padding: 2px 5px; }
body.is-small-mobile .service-dock-copy small,
body.is-small-mobile .service-dock-meter { display: none; }
body.is-small-mobile .service-dock-lamp { height: 16px; }

body.is-small-mobile.small-mobile-landscape:has(#tutorialExitButton:not(.hidden)) .service-dock-hud {
  top: calc(env(safe-area-inset-top, 0px) + 38px);
}

body.is-small-mobile.small-mobile-portrait .service-dock-hud,
body.is-small-mobile.small-mobile-portrait:is(.builder-panel-open, .upgrade-panel-open) .service-dock-hud {
  top: calc(env(safe-area-inset-top, 0px) + 32px);
  left: calc(50% + 24px);
  width: calc(100vw - 68px);
}

body.is-small-mobile:is(.builder-panel-open, .upgrade-panel-open) .service-ship-stats {
  display: none;
}

body.is-small-mobile.small-mobile-landscape.upgrade-panel-open {
  --side-panel-width: min(430px, calc(100vw - 252px));
  --side-panel-left: var(--side-panel-width);
}

@media (max-width: 700px) {
  body.is-small-mobile.small-mobile-landscape.upgrade-panel-open {
    --side-panel-width: min(430px, calc(100vw - 170px));
  }
}

body.is-small-mobile.small-mobile-portrait:has(#serviceDockExit:not(.hidden)) :is(.ship-builder-panel, .upgrade-panel) {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  height: min(52svh, 352px);
  max-height: calc(100svh - 338px - env(safe-area-inset-bottom, 0px));
}

body.is-small-mobile.small-mobile-portrait :is(.ship-builder-panel, .upgrade-panel) {
  max-height: calc(100svh - 260px);
}

body.is-small-mobile.small-mobile-landscape:is(.builder-panel-open, .upgrade-panel-open) .module-info-popup.mobile,
body.is-small-mobile.small-mobile-portrait:is(.builder-panel-open, .upgrade-panel-open) .module-info-popup.mobile {
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  right: 10px;
  left: auto;
  bottom: auto;
  width: 232px;
  max-width: calc(100vw - 76px);
  padding: 5px 7px;
  transform: none;
  font-size: 10px;
}

body.is-small-mobile.small-mobile-portrait:is(.builder-panel-open, .upgrade-panel-open) .module-info-popup.mobile {
  top: calc(env(safe-area-inset-top, 0px) + 82px);
}

body.is-small-mobile:has(#serviceDockHud:not(.hidden)) .game-notice {
  top: calc(env(safe-area-inset-top, 0px) + 32px + var(--game-notice-offset));
}

body.is-small-mobile.small-mobile-landscape:is(.builder-panel-open, .upgrade-panel-open) .game-notice {
  left: calc(var(--side-panel-width) + (100vw - var(--side-panel-width)) / 2);
  max-width: calc(100vw - var(--side-panel-width) - 20px);
}

body.is-small-mobile.small-mobile-portrait:has(#serviceDockHud:not(.hidden)) .game-notice {
  top: calc(env(safe-area-inset-top, 0px) + 64px + var(--game-notice-offset));
}

body.is-small-mobile:has(#tutorialGuideOverlay:not(.hidden)) .game-notice-objective {
  display: none;
}

/* During guided placement, the highlighted world slot is the actionable
   target. Keep the optional module tooltip from covering that slot. */
body.is-small-mobile.builder-panel-open:has(#tutorialWorldMarkers .tutorial-world-marker) #moduleInfoPopup {
  display: none;
}

body.is-small-mobile:is(.builder-panel-open, .upgrade-panel-open) .module-info-title {
  margin-bottom: 3px;
}

body.is-small-mobile:is(.builder-panel-open, .upgrade-panel-open) .module-info-desc {
  margin-bottom: 4px;
}

body.is-small-mobile:is(.builder-panel-open, .upgrade-panel-open) .module-info-stat {
  padding: 2px;
}

/* Default-loadout service bay. Keep the SAVE actuator and remaining-module
   instrument reachable at every supported viewport. */
@media (max-width: 1100px) {
  .default-ship-service-shell {
    grid-template-columns: minmax(300px, 340px) minmax(260px, 1fr) minmax(176px, 198px);
  }

  .default-ship-dock-builder {
    padding: 18px 14px 16px;
  }

  .default-ship-capacity-panel {
    margin: 68px 12px 0 0;
    padding: 15px 13px;
  }

  .default-ship-bay-stage #defaultShipEditorCanvas {
    width: min(62vmin, 620px);
    height: auto;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .default-ship-service-shell {
    grid-template-columns: minmax(280px, 318px) minmax(0, 1fr);
  }

  .default-ship-bay-stage {
    grid-column: 2;
    padding-right: 12px;
  }

  .default-ship-capacity-panel {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    width: 176px;
    margin: 0;
  }

  .default-ship-bay-stage #defaultShipEditorCanvas {
    width: min(54vw, 58vmin);
    height: auto;
  }
}

body.is-small-mobile .default-ship-service-modal {
  padding: 0;
}

body.is-small-mobile .default-ship-service-shell {
  overflow: hidden;
}

body.is-small-mobile .default-ship-dock-builder .default-ship-module-palette {
  min-width: 0;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
}

body.is-small-mobile .default-ship-dock-builder .default-ship-module-palette button {
  min-width: 0;
  min-height: 50px;
  border-radius: 0;
}

body.is-small-mobile .default-ship-save-button {
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  width: 150px;
  min-height: 58px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-service-shell {
  grid-template-columns: minmax(220px, 236px) minmax(0, 1fr);
  grid-template-rows: 100svh;
}

body.is-small-mobile.small-mobile-landscape .default-ship-dock-builder {
  grid-column: 1;
  padding: 9px 10px 12px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-builder-header {
  min-height: 46px;
  padding: 6px 7px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-builder-header h2 {
  font-size: 13px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-builder-header p {
  display: none;
}

body.is-small-mobile.small-mobile-landscape .default-ship-reset-button {
  min-height: 44px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-dock-builder .default-ship-module-palette {
  display: grid;
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  align-content: start;
  gap: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px 6px 76px 2px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-dock-builder .default-ship-module-palette button {
  width: auto;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px;
  padding: 4px;
  font-size: 9px;
  touch-action: pan-y;
}

body.is-small-mobile.small-mobile-landscape .default-ship-module-preview {
  width: 34px;
  height: 30px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-bay-stage {
  grid-column: 2;
  padding-right: 146px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-bay-stage::before {
  inset: 8px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-bay-stage #defaultShipEditorCanvas {
  width: min(calc(100svh - 28px), calc(100% - 12px));
  height: auto;
  max-width: none;
  max-height: none;
}

body.is-small-mobile.small-mobile-landscape .default-ship-capacity-panel {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 136px;
  margin: 0;
  padding: 12px 10px;
}

body.is-small-mobile.small-mobile-landscape .default-ship-capacity-panel .default-ship-limit-text {
  font-size: 13px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-service-shell {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(286px, 42svh) minmax(0, 1fr);
}

body.is-small-mobile.small-mobile-portrait .default-ship-bay-stage {
  grid-row: 1;
  padding: 8px 8px 0;
}

body.is-small-mobile.small-mobile-portrait .default-ship-bay-stage::before {
  inset: 8px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-bay-stage #defaultShipEditorCanvas {
  width: min(82vw, 38svh);
  height: auto;
  max-width: none;
  max-height: none;
}

body.is-small-mobile.small-mobile-portrait .default-ship-dock-builder {
  grid-row: 2;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 76px);
  border-top: 3px solid #080a08;
  border-right: 0;
}

body.is-small-mobile.small-mobile-portrait .default-ship-builder-header {
  min-height: 48px;
  padding: 7px 8px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-builder-header h2 {
  font-size: 14px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-builder-header p {
  display: none;
}

body.is-small-mobile.small-mobile-portrait .default-ship-dock-builder .default-ship-module-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px 6px 10px 2px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-dock-builder .default-ship-module-palette button {
  width: auto;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
  font-size: 10px;
  touch-action: pan-y;
}

body.is-small-mobile.small-mobile-portrait .default-ship-module-preview {
  width: 38px;
  height: 32px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-capacity-panel {
  position: absolute;
  z-index: 6;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 150px;
  margin: 0;
  padding: 12px 10px;
}

body.is-small-mobile.small-mobile-portrait .default-ship-capacity-panel .default-ship-limit-text {
  font-size: 13px;
}

/* Viewport fallback for browser/device emulation before mobile-ui.js has added
   its body classes. This also keeps narrow desktop windows from clipping the
   three-column shell. */
@media (max-width: 700px) and (orientation: portrait) {
  .default-ship-service-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(286px, 42svh) minmax(0, 1fr);
  }

  .default-ship-bay-stage {
    grid-row: 1;
    padding: 8px 8px 0;
  }

  .default-ship-bay-stage::before {
    inset: 8px;
  }

  .default-ship-bay-stage #defaultShipEditorCanvas {
    width: min(82vw, 38svh);
    height: auto;
    max-width: none;
    max-height: none;
  }

  .default-ship-dock-builder {
    grid-row: 2;
    padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 76px);
    border-top: 3px solid #080a08;
    border-right: 0;
  }

  .default-ship-builder-header {
    min-height: 48px;
    padding: 7px 8px;
  }

  .default-ship-builder-header h2 {
    font-size: 14px;
  }

  .default-ship-builder-header p {
    display: none;
  }

  .default-ship-dock-builder .default-ship-module-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 6px;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px 6px 10px 2px;
  }

  .default-ship-dock-builder .default-ship-module-palette button {
    width: auto;
    min-width: 0;
    min-height: 50px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
    border-radius: 0;
    font-size: 10px;
    touch-action: pan-y;
  }

  .default-ship-module-preview {
    width: 38px;
    height: 32px;
  }

  .default-ship-capacity-panel {
    position: absolute;
    z-index: 6;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    width: 150px;
    margin: 0;
    padding: 12px 10px;
  }

  .default-ship-capacity-panel .default-ship-limit-text {
    font-size: 13px;
  }

  .default-ship-save-button {
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: 150px;
    min-height: 58px;
  }
}

/* src/styles/mechanical-ui-motion.css */
/*
 * Mechanical UI motion language
 *
 * LATCH: immediate controls and selection feedback.
 * RAIL: drawers, HUD trays, builder panels, and card magazines.
 * BOOT: full terminal surfaces and modal housings.
 *
 * Motion is presentation-only. It does not alter hit targets, layout
 * coordinates, visibility state, or gameplay timing.
 */

:root {
  --ui-motion-latch: 96ms;
  --ui-motion-rail: 360ms;
  --ui-motion-boot: 620ms;
  --ui-motion-ease-out: cubic-bezier(0.16, 0.78, 0.14, 1);
  --ui-motion-ease-rail: cubic-bezier(0.2, 0.72, 0.12, 1);
}

/* Start terminal: chassis first, then three independent equipment bays. */
.start-screen:not(.hidden) .start-layout::before {
  animation: mechanical-chassis-boot var(--ui-motion-boot) var(--ui-motion-ease-out) both;
}

.start-screen:not(.hidden) .start-layout::after {
  animation: mechanical-top-rail-lock 360ms 90ms var(--ui-motion-ease-rail) both;
}

.start-screen:not(.hidden) .default-ship-panel {
  animation: mechanical-panel-left var(--ui-motion-boot) 70ms var(--ui-motion-ease-rail) both;
}

.start-screen:not(.hidden) .start-panel {
  animation: mechanical-panel-center var(--ui-motion-boot) 110ms var(--ui-motion-ease-out) both;
}

.start-screen:not(.hidden) .menu-side-panel {
  animation: mechanical-panel-right var(--ui-motion-boot) 150ms var(--ui-motion-ease-rail) both;
}

.start-screen:not(.hidden) .start-panel > * {
  animation: mechanical-content-rise 260ms var(--ui-motion-ease-out) backwards;
}

.start-screen:not(.hidden) .start-panel > :nth-child(1) { animation-delay: 390ms; }
.start-screen:not(.hidden) .start-panel > :nth-child(2) { animation-delay: 425ms; }
.start-screen:not(.hidden) .start-panel > :nth-child(3) { animation-delay: 460ms; }
.start-screen:not(.hidden) .start-panel > :nth-child(4) { animation-delay: 495ms; }
.start-screen:not(.hidden) .start-panel > :nth-child(5) { animation-delay: 530ms; }
.start-screen:not(.hidden) .start-panel > :nth-child(6) { animation-delay: 565ms; }

.start-screen:not(.hidden) .default-ship-preview,
.start-screen:not(.hidden) .default-ship-edit-button,
.start-screen:not(.hidden) .default-ship-status {
  animation: mechanical-slot-in 260ms var(--ui-motion-ease-out) backwards;
}

.start-screen:not(.hidden) .default-ship-preview { animation-delay: 390ms; }
.start-screen:not(.hidden) .default-ship-edit-button { animation-delay: 440ms; }
.start-screen:not(.hidden) .default-ship-status { animation-delay: 480ms; }

.start-screen:not(.hidden) .menu-side-panel > .main-menu-button,
.start-screen:not(.hidden) .menu-side-panel > .booster-row {
  animation: mechanical-key-slot-in 260ms var(--ui-motion-ease-out) backwards;
}

.start-screen:not(.hidden) .menu-side-panel > :nth-child(1) { animation-delay: 420ms; }
.start-screen:not(.hidden) .menu-side-panel > :nth-child(2) { animation-delay: 465ms; }
.start-screen:not(.hidden) .menu-side-panel > :nth-child(3) { animation-delay: 510ms; }
.start-screen:not(.hidden) .menu-side-panel > :nth-child(4) { animation-delay: 555ms; }

.auth-panel,
.resource-panel {
  animation: mechanical-utility-from-top 360ms 220ms var(--ui-motion-ease-rail) backwards;
}

.support-corner-button,
.legal-corner-button {
  animation: mechanical-utility-from-bottom 360ms 260ms var(--ui-motion-ease-rail) backwards;
}

/* Sparse idle mechanisms: the housing remains still while the instrument moves. */
.start-screen:not(.hidden) #playButton:not(:disabled):not([data-launch-state="pressed"]):not([data-launch-state="connecting"]):not([data-launch-state="locked"]):not([data-launch-state="error"])::before {
  animation: mechanical-launch-bus 3.6s steps(8, end) infinite;
}

.start-screen:not(.hidden) .shop-bullet {
  animation: mechanical-ammo-feed 4.8s var(--ui-motion-ease-out) infinite;
}

.start-screen:not(.hidden) .shop-weapon {
  animation: mechanical-weapon-check 6.2s ease-in-out infinite;
}

.start-screen:not(.hidden) .paint-drop {
  animation: mechanical-paint-valve 5.4s ease-in-out infinite;
}

.start-screen:not(.hidden) .inventory-core {
  animation: mechanical-core-charge 3.8s steps(4, end) infinite;
}

.start-screen:not(.hidden) .inventory-spark {
  animation: mechanical-spark-tick 3.2s steps(2, end) infinite;
}

.start-screen:not(.hidden) .spark-b { animation-delay: 1.1s; }

/* Physical keys move immediately; their housings never delay activation. */
.main-menu-button,
.booster-row button,
#playButton,
.icon-text-button,
.login-button,
.settings-button,
.topbar-settings-button,
.mobile-drawer-action,
.mobile-menu-close,
.mobile-ship-close,
.shop-buy-button,
.cosmetic-equip-button,
.upgrade-buy,
.skill-buy,
.skill-equip,
.builder-tab,
.builder-sell {
  transition-duration: var(--ui-motion-latch);
  transition-timing-function: ease-out;
}

.choice-radio.selected,
.choice-radio:has(input:checked),
.shop-tab:is(.selected, .active, [aria-selected="true"]),
.cosmetics-tab:is(.selected, .active, [aria-selected="true"]),
.builder-tab:is(.selected, .active, [aria-selected="true"]) {
  animation: mechanical-selector-lock 180ms var(--ui-motion-ease-out) backwards;
}

@media (hover: hover) and (pointer: fine) {
  .main-menu-button:not(:disabled):hover .main-menu-label,
  .mobile-drawer-action:hover,
  .shop-card:hover h3,
  .cosmetic-card:hover h3,
  .inventory-card:hover h3 {
    text-shadow: 0 0 9px currentColor;
  }

  .main-menu-button:not(:disabled):hover .menu-art {
    filter: saturate(1.38) contrast(1.06) brightness(1.13);
  }
}

/* Full-screen housings engage before their internal magazines. */
.menu-modal:not(.hidden),
.profile-modal:not(.hidden),
.settings-modal:not(.hidden),
.sound-test-modal:not(.hidden),
.death-overlay:not(.hidden),
.confirm-modal:not(.hidden),
.victory-overlay:not(.hidden),
.onboarding-modal:not(.hidden) {
  animation: mechanical-backdrop-in 150ms ease-out both;
}

.menu-modal:not(.hidden) .menu-modal-card {
  animation: mechanical-housing-from-bottom 520ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 20%;
}

.profile-modal:not(.hidden) .profile-modal-card {
  animation: mechanical-housing-from-left 520ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 20%;
}

.settings-modal:not(.hidden) .settings-card {
  animation: mechanical-housing-from-right 520ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 20%;
}

.sound-test-modal:not(.hidden) .sound-test-card,
.confirm-modal:not(.hidden) .confirm-card,
.onboarding-modal:not(.hidden) .onboarding-card {
  animation: mechanical-housing-from-top 520ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 20%;
}

.death-overlay:not(.hidden) .death-card,
.victory-overlay:not(.hidden) .victory-card {
  animation: mechanical-housing-from-bottom 520ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 20%;
}

.menu-modal:not(.hidden) .default-ship-service-shell {
  animation: mechanical-housing-from-bottom 560ms 35ms var(--ui-motion-ease-rail) both;
  transform-origin: 50% 50%;
}

/* Keep the outgoing housing as a full hit shield until it is actually hidden.
   Its controls are inert, but rapid taps cannot fall through to the game/menu. */
.ui-surface-closing {
  pointer-events: auto !important;
}

.ui-surface-closing * {
  pointer-events: none !important;
}

:is(
  .menu-modal,
  .profile-modal,
  .settings-modal,
  .sound-test-modal,
  .death-overlay,
  .confirm-modal,
  .victory-overlay,
  .onboarding-modal
).ui-surface-closing {
  animation: mechanical-backdrop-out 320ms ease-in both !important;
}

.menu-modal.ui-surface-closing :is(.menu-modal-card, .default-ship-service-shell),
.death-overlay.ui-surface-closing .death-card,
.victory-overlay.ui-surface-closing .victory-card {
  animation: mechanical-housing-to-bottom 320ms ease-in both !important;
}

.profile-modal.ui-surface-closing .profile-modal-card {
  animation: mechanical-housing-to-left 320ms ease-in both !important;
}

.settings-modal.ui-surface-closing .settings-card {
  animation: mechanical-housing-to-right 320ms ease-in both !important;
}

.sound-test-modal.ui-surface-closing .sound-test-card,
.confirm-modal.ui-surface-closing .confirm-card,
.onboarding-modal.ui-surface-closing .onboarding-card {
  animation: mechanical-housing-to-top 320ms ease-in both !important;
}

.menu-modal:not(.hidden) :is(.menu-modal-head, .default-ship-builder-header),
.profile-modal:not(.hidden) :is(.profile-modal-head, h2),
.settings-modal:not(.hidden) .settings-head,
.sound-test-modal:not(.hidden) .sound-test-head,
.death-overlay:not(.hidden) > .death-card > :first-child,
.victory-overlay:not(.hidden) > .victory-card > :first-child,
.onboarding-modal:not(.hidden) .onboarding-head {
  animation: mechanical-header-clamp 230ms 390ms var(--ui-motion-ease-out) backwards;
}

:is(
  .menu-modal,
  .profile-modal,
  .settings-modal,
  .sound-test-modal,
  .death-overlay,
  .victory-overlay
):not(.ui-motion-settled) :is(
  .shop-card,
  .cosmetic-card,
  .inventory-card,
  .settings-section,
  .sound-test-list > *,
  .feedback-kind-option,
  .profile-stats > *,
  .outcome-stats > *
) {
  animation: mechanical-card-slot-in 250ms var(--ui-motion-ease-out) backwards;
}

:is(.shop-grid, .cosmetics-grid, .inventory-grid, .settings-content, .sound-test-list, .profile-stats, .outcome-stats) > :nth-child(2) { animation-delay: 35ms; }
:is(.shop-grid, .cosmetics-grid, .inventory-grid, .settings-content, .sound-test-list, .profile-stats, .outcome-stats) > :nth-child(3) { animation-delay: 70ms; }
:is(.shop-grid, .cosmetics-grid, .inventory-grid, .settings-content, .sound-test-list, .profile-stats, .outcome-stats) > :nth-child(4) { animation-delay: 105ms; }
:is(.shop-grid, .cosmetics-grid, .inventory-grid, .settings-content, .sound-test-list, .profile-stats, .outcome-stats) > :nth-child(5) { animation-delay: 140ms; }
:is(.shop-grid, .cosmetics-grid, .inventory-grid, .settings-content, .sound-test-list, .profile-stats, .outcome-stats) > :nth-child(n + 6) { animation-delay: 175ms; }

:is(.menu-modal, .profile-modal):not(.ui-motion-settled) :is(
  .inventory-detail:not(:empty),
  .default-ship-capacity-panel,
  .monetization-panel
) {
  animation: mechanical-readout-boot 280ms 150ms var(--ui-motion-ease-out) backwards;
}

/* Gameplay HUD: short deployment, then stable instruments. */
.hud:not(.hidden) .topbar {
  animation: mechanical-hud-top 420ms var(--ui-motion-ease-rail) both;
}

.hud:not(.hidden) .leaderboard {
  animation: mechanical-hud-left 420ms 45ms var(--ui-motion-ease-rail) both;
}

.hud:not(.hidden) .minimap {
  animation: mechanical-hud-right 420ms 80ms var(--ui-motion-ease-rail) both;
}

.hud:not(.hidden) .singleplayer-panel:not(.hidden) {
  animation: mechanical-objective-latch 440ms 110ms var(--ui-motion-ease-rail) both;
}

.hud:not(.hidden) .skill-hud:not(.hidden) {
  animation: mechanical-skill-rail 420ms 90ms var(--ui-motion-ease-rail) both;
}

.hud:not(.hidden) .topbar > *,
.hud:not(.hidden) .singleplayer-panel > * {
  animation: mechanical-readout-boot 220ms 170ms var(--ui-motion-ease-out) backwards;
}

.service-dock-hud:not(.hidden) .service-dock-copy > *,
.service-ship-stats:not(.hidden) > * {
  animation: mechanical-readout-boot 220ms 150ms var(--ui-motion-ease-out) backwards;
}

.upgrade-toggle:not(.hidden) {
  animation: builder-control-glow 560ms ease-out, mechanical-control-latch 260ms var(--ui-motion-ease-rail) backwards;
}

.base-action-rail:not(.hidden) > .base-action-button {
  animation: mechanical-control-latch 260ms var(--ui-motion-ease-rail) backwards;
}

.base-action-rail:not(.hidden) > :nth-child(2) { animation-delay: 55ms; }
.base-action-rail:not(.hidden) > :nth-child(3) { animation-delay: 110ms; }

/* Service magazines keep the parent transform state; only their contents stage in. */
.ship-builder-panel,
.upgrade-panel {
  transition: transform var(--ui-motion-rail) var(--ui-motion-ease-rail);
}

.ship-builder-panel.open :is(.builder-header, .builder-tabs),
.upgrade-panel.open :is(.upgrade-header, .skill-section-title) {
  animation: mechanical-header-clamp 230ms 90ms var(--ui-motion-ease-out) backwards;
}

.ship-builder-panel.open:not(.ui-motion-settled) .builder-card,
.upgrade-panel.open:not(.ui-motion-settled) :is(.upgrade-card, .skill-card) {
  animation: mechanical-card-slot-in 250ms var(--ui-motion-ease-out) backwards;
}

.ship-builder-panel.open:not(.ui-motion-settled) .builder-card:nth-child(2n),
.upgrade-panel.open:not(.ui-motion-settled) :is(.upgrade-card, .skill-card):nth-child(2n) { animation-delay: 45ms; }

.ship-builder-panel.open:not(.ui-motion-settled) .builder-card:nth-child(3n),
.upgrade-panel.open:not(.ui-motion-settled) :is(.upgrade-card, .skill-card):nth-child(3n) { animation-delay: 90ms; }

/* Mobile drawers ride a rail; internals latch after the sheet is in motion. */
.mobile-menu-backdrop,
.mobile-ship-backdrop {
  transition: opacity 170ms ease-out;
}

.mobile-menu-sheet,
.mobile-ship-sheet {
  transition: transform var(--ui-motion-rail) var(--ui-motion-ease-rail);
}

body.mobile-menu-open .mobile-menu-drawer:not(.ui-motion-settled) .mobile-menu-head,
body.mobile-ship-open .mobile-ship-drawer:not(.ui-motion-settled) .mobile-ship-head {
  animation: mechanical-header-clamp 220ms 105ms var(--ui-motion-ease-out) backwards;
}

body.mobile-menu-open .mobile-menu-drawer:not(.ui-motion-settled) .mobile-menu-content > *,
body.mobile-ship-open .mobile-ship-drawer:not(.ui-motion-settled) .mobile-ship-slot > * {
  animation: mechanical-mobile-row-in 230ms var(--ui-motion-ease-out) backwards;
}

body.mobile-menu-open .mobile-menu-content > :nth-child(1),
body.mobile-ship-open .mobile-ship-slot > :nth-child(1) { animation-delay: 110ms; }
body.mobile-menu-open .mobile-menu-content > :nth-child(2),
body.mobile-ship-open .mobile-ship-slot > :nth-child(2) { animation-delay: 145ms; }
body.mobile-menu-open .mobile-menu-content > :nth-child(3),
body.mobile-ship-open .mobile-ship-slot > :nth-child(3) { animation-delay: 180ms; }
body.mobile-menu-open .mobile-menu-content > :nth-child(4),
body.mobile-ship-open .mobile-ship-slot > :nth-child(4) { animation-delay: 215ms; }
body.mobile-menu-open .mobile-menu-content > :nth-child(n + 5),
body.mobile-ship-open .mobile-ship-slot > :nth-child(n + 5) { animation-delay: 250ms; }

/* Control hit areas never transform. Paint-only children perform the boot tick. */
.mobile-controls.visible:not(.hidden) :is(.mobile-joystick-base, .mobile-dpad, .mobile-action-button) {
  animation: mechanical-touch-control-boot 220ms var(--ui-motion-ease-out) backwards;
}

body.is-playing.is-small-mobile .mobile-controls.visible:not(.hidden) {
  z-index: 100;
}

/* Gameplay HUD/control rails sit above the world canvas, so active full-screen
   surfaces need a dedicated modal plane above them on desktop and mobile. */
body.is-playing .menu-modal:not(.hidden):not(.username-modal):not(.developer-thanks-modal),
body.is-playing :is(
  .profile-modal,
  .settings-modal,
  .sound-test-modal,
  .death-overlay,
  .victory-overlay
):not(.hidden) {
  z-index: 130;
}

body.is-playing.is-small-mobile.small-mobile-landscape .singleplayer-panel:not(.hidden):has(.singleplayer-actions:empty) {
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  right: calc(env(safe-area-inset-right, 0px) + 72px);
  bottom: auto;
  width: min(244px, calc(100vw - 190px));
  max-height: 88px;
  padding: 4px 6px;
  overflow: hidden;
  border: 0;
  background: rgba(5, 9, 5, 0.78);
  box-shadow: none;
  backdrop-filter: none;
}

body.is-playing.is-small-mobile.small-mobile-landscape .singleplayer-panel:not(.hidden):has(.singleplayer-actions:not(:empty)) {
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  right: auto;
  bottom: auto;
  left: calc(50% - 150px);
  width: min(300px, calc(100vw - 190px));
  max-height: min(178px, calc(100svh - 142px));
  padding: 5px 6px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(5, 9, 5, 0.9);
  backdrop-filter: none;
}

body.is-playing.is-small-mobile.small-mobile-landscape .singleplayer-panel:not(.hidden):has(.singleplayer-actions:not(:empty)) .singleplayer-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: 0;
}

body.is-playing.is-small-mobile.small-mobile-landscape .singleplayer-panel .singleplayer-actions:not(:empty) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

body.is-playing.is-small-mobile.small-mobile-landscape .singleplayer-panel .singleplayer-actions:not(:empty) button {
  min-height: 30px;
  padding: 4px;
  font-size: 9px;
}

.mobile-controls.visible:not(.hidden) .mobile-joystick-right .mobile-joystick-base { animation-delay: 45ms; }
.mobile-controls.visible:not(.hidden) .mobile-action-button { animation-delay: 80ms; }

.tutorial-guide-card {
  animation: mechanical-guide-latch 240ms var(--ui-motion-ease-out) backwards;
}

.tutorial-world-marker,
.tutorial-guide-arrow {
  transition: opacity var(--ui-motion-latch) ease-out, filter var(--ui-motion-latch) ease-out;
}

@keyframes mechanical-chassis-boot {
  0% { opacity: 0; transform: scaleX(0.16); filter: brightness(0.42) contrast(1.35); }
  82% { opacity: 1; transform: scaleX(1); filter: brightness(0.9) contrast(1.08); }
  92% { opacity: 1; transform: scaleX(1); filter: brightness(1.12) contrast(1.04); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) contrast(1); }
}

@keyframes mechanical-top-rail-lock {
  from { opacity: 0; transform: scaleX(0.18); filter: brightness(1.45); }
  to { opacity: 1; transform: scaleX(1); filter: brightness(1); }
}

@keyframes mechanical-panel-left {
  from { opacity: 1; transform: translate3d(-110vw, 0, 0); filter: brightness(0.62); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-panel-center {
  0% { opacity: 1; transform: translate3d(0, 110vh, 0); filter: brightness(0.62); }
  88% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(0.9); }
  94% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1.16); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-panel-right {
  from { opacity: 1; transform: translate3d(110vw, 0, 0); filter: brightness(0.62); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-content-rise {
  from { opacity: 0; transform: translateY(9px); filter: brightness(0.72); }
  to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes mechanical-slot-in {
  from { opacity: 0; transform: translateY(12px) scaleY(0.94); clip-path: inset(16% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes mechanical-key-slot-in {
  from { opacity: 0; transform: translateX(24px) scaleX(0.94); clip-path: inset(0 20% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes mechanical-utility-from-top {
  from { opacity: 1; transform: translate3d(0, -110vh, 0); filter: brightness(0.72); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-utility-from-bottom {
  from { opacity: 1; transform: translate3d(0, 110vh, 0); filter: brightness(0.72); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-launch-bus {
  0%, 72%, 100% { filter: brightness(0.9); background-position: 0 0, 0 0; }
  76% { filter: brightness(1.32); background-position: 0 5px, 0 0; }
  84% { filter: brightness(1.05); background-position: 0 10px, 0 0; }
}

@keyframes mechanical-ammo-feed {
  0%, 82%, 100% { transform: rotate(-18deg) translateX(0); }
  88% { transform: rotate(-18deg) translateX(4px); }
  92% { transform: rotate(-18deg) translateX(-1px); }
}

@keyframes mechanical-weapon-check {
  0%, 78%, 100% { transform: rotate(13deg) translateX(0); }
  84% { transform: rotate(13deg) translateX(3px); }
}

@keyframes mechanical-paint-valve {
  0%, 76%, 100% { transform: rotate(18deg) translateY(0); filter: brightness(1); }
  82% { transform: rotate(18deg) translateY(3px); filter: brightness(1.24); }
}

@keyframes mechanical-core-charge {
  0%, 68%, 100% { filter: brightness(0.9) saturate(0.9); }
  74%, 86% { filter: brightness(1.32) saturate(1.24); }
}

@keyframes mechanical-spark-tick {
  0%, 64%, 100% { opacity: 0.42; transform: rotate(45deg) scale(0.8); }
  70%, 82% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}

@keyframes mechanical-selector-lock {
  from { filter: brightness(1.42); transform: translateY(2px) scaleX(0.98); }
  to { filter: brightness(1); transform: none; }
}

@keyframes mechanical-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; }
}

@keyframes mechanical-backdrop-out {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mechanical-housing-from-left {
  from { opacity: 1; transform: translate3d(-110vw, 0, 0); filter: brightness(0.62); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-housing-from-right {
  from { opacity: 1; transform: translate3d(110vw, 0, 0); filter: brightness(0.62); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-housing-from-top {
  from { opacity: 1; transform: translate3d(0, -110vh, 0); filter: brightness(0.62); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-housing-from-bottom {
  from { opacity: 1; transform: translate3d(0, 110vh, 0); filter: brightness(0.62); }
  90% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(0.92); }
  96% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1.14); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-housing-to-left {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 1; transform: translate3d(-110vw, 0, 0); }
}

@keyframes mechanical-housing-to-right {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 1; transform: translate3d(110vw, 0, 0); }
}

@keyframes mechanical-housing-to-top {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 1; transform: translate3d(0, -110vh, 0); }
}

@keyframes mechanical-housing-to-bottom {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 110vh, 0); }
}

@keyframes mechanical-header-clamp {
  from { opacity: 0; transform: translateY(-9px) scaleX(0.9); clip-path: inset(0 30%); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes mechanical-card-slot-in {
  from { opacity: 0; transform: translateY(13px) scaleY(0.93); clip-path: inset(14% 0 0); filter: brightness(0.68); }
  to { opacity: 1; transform: none; clip-path: inset(0); filter: brightness(1); }
}

@keyframes mechanical-readout-boot {
  0% { opacity: 0; filter: brightness(1.65) contrast(1.25); }
  48% { opacity: 0.82; filter: brightness(0.72) contrast(1.2); }
  100% { opacity: 1; filter: brightness(1) contrast(1); }
}

@keyframes mechanical-hud-top {
  from { opacity: 1; transform: translate3d(0, -110vh, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mechanical-hud-left {
  from { opacity: 1; transform: translate3d(-110vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mechanical-hud-right {
  from { opacity: 1; transform: translate3d(110vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mechanical-objective-latch {
  from { opacity: 1; transform: translate3d(0, 110vh, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mechanical-skill-rail {
  from { opacity: 1; transform: translate(-50%, 110vh); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes mechanical-control-latch {
  from { opacity: 1; transform: translate3d(-110vw, 0, 0); filter: brightness(0.72); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1); }
}

@keyframes mechanical-mobile-row-in {
  from { opacity: 0; transform: translateX(16px); clip-path: inset(0 0 0 16%); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes mechanical-touch-control-boot {
  0% { opacity: 0; filter: brightness(1.5) saturate(0.6); }
  62% { opacity: 1; filter: brightness(1.18) saturate(1.08); }
  100% { opacity: 1; filter: none; }
}

@keyframes mechanical-guide-latch {
  from { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100%); filter: brightness(1.35); }
  to { opacity: 1; transform: none; clip-path: inset(0); filter: inherit; }
}

/* Apply the resolved game setting even when the OS does not request reduced
   motion. The OS fallback below covers the initial page before resolution. */
:root[data-ui-motion="reduced"] {
  --ui-motion-latch: 0.01ms;
  --ui-motion-rail: 0.01ms;
  --ui-motion-boot: 0.01ms;
}

.mobile-hud-options-menu:not(.hidden):not(.ui-surface-closing) { animation: mechanical-mobile-options-in 120ms ease-out both; transform-origin: top left; }
.mobile-hud-options-menu.ui-surface-closing { animation: mechanical-mobile-options-out 120ms ease-in both; transform-origin: top left; }
.mobile-hud-options-menu:not(.hidden):not(.ui-surface-closing) > * { animation: mechanical-mobile-option-row 120ms ease-out both; }
.mobile-hud-options-menu > :nth-child(2) { animation-delay: 20ms !important; }
.mobile-hud-options-menu > :nth-child(3) { animation-delay: 40ms !important; }
.mobile-hud-options-menu > :nth-child(4) { animation-delay: 60ms !important; }
.mobile-hud-options-menu > [data-self-destruct] { border-color: #aa715f; }
.mobile-hud-options-menu:not(.hidden):not(.ui-surface-closing) > [data-self-destruct] { animation: mechanical-mobile-option-warning 120ms ease-out both; }
@keyframes mechanical-mobile-options-in { from { opacity: 0; transform: translateY(-10px) scaleY(.84); clip-path: inset(0 0 100%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes mechanical-mobile-options-out { from { opacity: 1; transform: none; clip-path: inset(0); } to { opacity: 0; transform: translateY(-10px) scaleY(.84); clip-path: inset(0 0 100%); } }
@keyframes mechanical-mobile-option-row { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes mechanical-mobile-option-warning { from { border-color: #dd9170; box-shadow: inset 0 0 10px #ad503966; } to { border-color: #aa715f; box-shadow: none; } }
:root[data-ui-motion="reduced"] .mobile-hud-options-menu,
:root[data-ui-motion="reduced"] .mobile-hud-options-menu > * { animation: none !important; }

:root[data-ui-motion="reduced"] .start-layout::before,
:root[data-ui-motion="reduced"] .start-layout::after,
:root[data-ui-motion="reduced"] .start-panel,
:root[data-ui-motion="reduced"] .start-side-panel,
:root[data-ui-motion="reduced"] .start-panel > *,
:root[data-ui-motion="reduced"] .start-side-panel > *,
:root[data-ui-motion="reduced"] .auth-panel,
:root[data-ui-motion="reduced"] .resource-panel,
:root[data-ui-motion="reduced"] .support-corner-button,
:root[data-ui-motion="reduced"] .legal-corner-button,
:root[data-ui-motion="reduced"] .menu-art > *,
:root[data-ui-motion="reduced"] #playButton::before,
:root[data-ui-motion="reduced"] .menu-modal,
:root[data-ui-motion="reduced"] .profile-modal,
:root[data-ui-motion="reduced"] .settings-modal,
:root[data-ui-motion="reduced"] .sound-test-modal,
:root[data-ui-motion="reduced"] .death-overlay,
:root[data-ui-motion="reduced"] .confirm-modal,
:root[data-ui-motion="reduced"] .victory-overlay,
:root[data-ui-motion="reduced"] .onboarding-modal,
:root[data-ui-motion="reduced"] .menu-modal-card,
:root[data-ui-motion="reduced"] .profile-modal-card,
:root[data-ui-motion="reduced"] .settings-card,
:root[data-ui-motion="reduced"] .sound-test-card,
:root[data-ui-motion="reduced"] .death-card,
:root[data-ui-motion="reduced"] .confirm-card,
:root[data-ui-motion="reduced"] .victory-card,
:root[data-ui-motion="reduced"] .onboarding-card,
:root[data-ui-motion="reduced"] .default-ship-service-shell,
:root[data-ui-motion="reduced"] .menu-modal-head,
:root[data-ui-motion="reduced"] .default-ship-builder-header,
:root[data-ui-motion="reduced"] .profile-modal-head,
:root[data-ui-motion="reduced"] .profile-modal h2,
:root[data-ui-motion="reduced"] .settings-head,
:root[data-ui-motion="reduced"] .sound-test-head,
:root[data-ui-motion="reduced"] .onboarding-head,
:root[data-ui-motion="reduced"] .death-card > :first-child,
:root[data-ui-motion="reduced"] .victory-card > :first-child,
:root[data-ui-motion="reduced"] .choice-radio,
:root[data-ui-motion="reduced"] .shop-tab,
:root[data-ui-motion="reduced"] .cosmetics-tab,
:root[data-ui-motion="reduced"] .builder-tab,
:root[data-ui-motion="reduced"] .shop-card,
:root[data-ui-motion="reduced"] .cosmetic-card,
:root[data-ui-motion="reduced"] .inventory-card,
:root[data-ui-motion="reduced"] .settings-section,
:root[data-ui-motion="reduced"] .sound-test-list > *,
:root[data-ui-motion="reduced"] .feedback-kind-option,
:root[data-ui-motion="reduced"] .profile-stats > *,
:root[data-ui-motion="reduced"] .outcome-stats > *,
:root[data-ui-motion="reduced"] .inventory-detail,
:root[data-ui-motion="reduced"] .default-ship-capacity-panel,
:root[data-ui-motion="reduced"] .monetization-panel,
:root[data-ui-motion="reduced"] .topbar,
:root[data-ui-motion="reduced"] .topbar > *,
:root[data-ui-motion="reduced"] .leaderboard,
:root[data-ui-motion="reduced"] .minimap,
:root[data-ui-motion="reduced"] .singleplayer-panel,
:root[data-ui-motion="reduced"] .singleplayer-panel > *,
:root[data-ui-motion="reduced"] .skill-hud,
:root[data-ui-motion="reduced"] .service-dock-copy > *,
:root[data-ui-motion="reduced"] .service-ship-stats > *,
:root[data-ui-motion="reduced"] .upgrade-toggle,
:root[data-ui-motion="reduced"] .base-action-button,
:root[data-ui-motion="reduced"] .builder-header,
:root[data-ui-motion="reduced"] .builder-tabs,
:root[data-ui-motion="reduced"] .builder-card,
:root[data-ui-motion="reduced"] .upgrade-header,
:root[data-ui-motion="reduced"] .skill-section-title,
:root[data-ui-motion="reduced"] .upgrade-card,
:root[data-ui-motion="reduced"] .skill-card,
:root[data-ui-motion="reduced"] .mobile-menu-head,
:root[data-ui-motion="reduced"] .mobile-ship-head,
:root[data-ui-motion="reduced"] .mobile-menu-content > *,
:root[data-ui-motion="reduced"] .mobile-ship-slot > *,
:root[data-ui-motion="reduced"] .mobile-joystick-base,
:root[data-ui-motion="reduced"] .mobile-dpad,
:root[data-ui-motion="reduced"] .mobile-action-button,
:root[data-ui-motion="reduced"] .tutorial-guide-card {
  animation: none !important;
}

:root[data-ui-motion="reduced"] .ship-builder-panel,
:root[data-ui-motion="reduced"] .upgrade-panel,
:root[data-ui-motion="reduced"] .mobile-menu-sheet,
:root[data-ui-motion="reduced"] .mobile-ship-sheet,
:root[data-ui-motion="reduced"] .mobile-menu-backdrop,
:root[data-ui-motion="reduced"] .mobile-ship-backdrop,
:root[data-ui-motion="reduced"] button,
:root[data-ui-motion="reduced"] .choice-radio,
:root[data-ui-motion="reduced"] .shop-card,
:root[data-ui-motion="reduced"] .cosmetic-card,
:root[data-ui-motion="reduced"] .inventory-card {
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) {
    --ui-motion-latch: 0.01ms;
    --ui-motion-rail: 0.01ms;
    --ui-motion-boot: 0.01ms;
  }

  :root:not([data-ui-motion="full"]) .start-layout::before,
  :root:not([data-ui-motion="full"]) .start-layout::after,
  :root:not([data-ui-motion="full"]) .start-panel,
  :root:not([data-ui-motion="full"]) .start-side-panel,
  :root:not([data-ui-motion="full"]) .start-panel > *,
  :root:not([data-ui-motion="full"]) .start-side-panel > *,
  :root:not([data-ui-motion="full"]) .auth-panel,
  :root:not([data-ui-motion="full"]) .resource-panel,
  :root:not([data-ui-motion="full"]) .support-corner-button,
  :root:not([data-ui-motion="full"]) .legal-corner-button,
  :root:not([data-ui-motion="full"]) .menu-art > *,
  :root:not([data-ui-motion="full"]) #playButton::before,
  :root:not([data-ui-motion="full"]) .menu-modal,
  :root:not([data-ui-motion="full"]) .profile-modal,
  :root:not([data-ui-motion="full"]) .settings-modal,
  :root:not([data-ui-motion="full"]) .sound-test-modal,
  :root:not([data-ui-motion="full"]) .death-overlay,
  :root:not([data-ui-motion="full"]) .confirm-modal,
  :root:not([data-ui-motion="full"]) .victory-overlay,
  :root:not([data-ui-motion="full"]) .onboarding-modal,
  :root:not([data-ui-motion="full"]) .menu-modal-card,
  :root:not([data-ui-motion="full"]) .profile-modal-card,
  :root:not([data-ui-motion="full"]) .settings-card,
  :root:not([data-ui-motion="full"]) .sound-test-card,
  :root:not([data-ui-motion="full"]) .death-card,
  :root:not([data-ui-motion="full"]) .confirm-card,
  :root:not([data-ui-motion="full"]) .victory-card,
  :root:not([data-ui-motion="full"]) .onboarding-card,
  :root:not([data-ui-motion="full"]) .default-ship-service-shell,
  :root:not([data-ui-motion="full"]) .menu-modal-head,
  :root:not([data-ui-motion="full"]) .default-ship-builder-header,
  :root:not([data-ui-motion="full"]) .profile-modal-head,
  :root:not([data-ui-motion="full"]) .profile-modal h2,
  :root:not([data-ui-motion="full"]) .settings-head,
  :root:not([data-ui-motion="full"]) .sound-test-head,
  :root:not([data-ui-motion="full"]) .onboarding-head,
  :root:not([data-ui-motion="full"]) .death-card > :first-child,
  :root:not([data-ui-motion="full"]) .victory-card > :first-child,
  :root:not([data-ui-motion="full"]) .choice-radio,
  :root:not([data-ui-motion="full"]) .shop-tab,
  :root:not([data-ui-motion="full"]) .cosmetics-tab,
  :root:not([data-ui-motion="full"]) .builder-tab,
  :root:not([data-ui-motion="full"]) .shop-card,
  :root:not([data-ui-motion="full"]) .cosmetic-card,
  :root:not([data-ui-motion="full"]) .inventory-card,
  :root:not([data-ui-motion="full"]) .settings-section,
  :root:not([data-ui-motion="full"]) .sound-test-list > *,
  :root:not([data-ui-motion="full"]) .feedback-kind-option,
  :root:not([data-ui-motion="full"]) .profile-stats > *,
  :root:not([data-ui-motion="full"]) .outcome-stats > *,
  :root:not([data-ui-motion="full"]) .inventory-detail,
  :root:not([data-ui-motion="full"]) .default-ship-capacity-panel,
  :root:not([data-ui-motion="full"]) .monetization-panel,
  :root:not([data-ui-motion="full"]) .topbar,
  :root:not([data-ui-motion="full"]) .topbar > *,
  :root:not([data-ui-motion="full"]) .leaderboard,
  :root:not([data-ui-motion="full"]) .minimap,
  :root:not([data-ui-motion="full"]) .singleplayer-panel,
  :root:not([data-ui-motion="full"]) .singleplayer-panel > *,
  :root:not([data-ui-motion="full"]) .skill-hud,
  :root:not([data-ui-motion="full"]) .service-dock-copy > *,
  :root:not([data-ui-motion="full"]) .service-ship-stats > *,
  :root:not([data-ui-motion="full"]) .upgrade-toggle,
  :root:not([data-ui-motion="full"]) .base-action-button,
  :root:not([data-ui-motion="full"]) .builder-header,
  :root:not([data-ui-motion="full"]) .builder-tabs,
  :root:not([data-ui-motion="full"]) .builder-card,
  :root:not([data-ui-motion="full"]) .upgrade-header,
  :root:not([data-ui-motion="full"]) .skill-section-title,
  :root:not([data-ui-motion="full"]) .upgrade-card,
  :root:not([data-ui-motion="full"]) .skill-card,
  :root:not([data-ui-motion="full"]) .mobile-menu-head,
  :root:not([data-ui-motion="full"]) .mobile-ship-head,
  :root:not([data-ui-motion="full"]) .mobile-menu-content > *,
  :root:not([data-ui-motion="full"]) .mobile-ship-slot > *,
  :root:not([data-ui-motion="full"]) .mobile-joystick-base,
  :root:not([data-ui-motion="full"]) .mobile-dpad,
  :root:not([data-ui-motion="full"]) .mobile-action-button,
  :root:not([data-ui-motion="full"]) .tutorial-guide-card {
    animation: none !important;
  }

  :root:not([data-ui-motion="full"]) .ship-builder-panel,
  :root:not([data-ui-motion="full"]) .upgrade-panel,
  :root:not([data-ui-motion="full"]) .mobile-menu-sheet,
  :root:not([data-ui-motion="full"]) .mobile-ship-sheet,
  :root:not([data-ui-motion="full"]) .mobile-menu-backdrop,
  :root:not([data-ui-motion="full"]) .mobile-ship-backdrop,
  :root:not([data-ui-motion="full"]) button,
  :root:not([data-ui-motion="full"]) .choice-radio,
  :root:not([data-ui-motion="full"]) .shop-card,
  :root:not([data-ui-motion="full"]) .cosmetic-card,
  :root:not([data-ui-motion="full"]) .inventory-card {
    transition-duration: 0.01ms !important;
  }
}

/* src/styles/transient-text-overlays.css */
/* Transient guidance should read as colored HUD text, not opaque panels. */

.game-notice {
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 0;
  min-height: 0;
  padding: 1px 6px;
  border: 0;
  clip-path: none;
  background: none;
  box-shadow: none;
  color: #aeeeff;
  font-weight: 850;
  letter-spacing: 0.025em;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.96),
    0 0 8px color-mix(in srgb, currentColor 52%, transparent);
}

.game-notice-objective {
  min-width: 0;
  min-height: 0;
  color: #7ff7e7;
}

.game-notice-warning,
.game-notice-booster-hint {
  min-width: 0;
  min-height: 0;
  color: #ffd166;
}

.game-notice-player-kill {
  min-width: 0;
  min-height: 0;
  color: #ff7c86;
}

.game-notice-enemy-kill {
  color: #b7ff6b;
}

body.is-small-mobile .game-notice,
body.is-small-mobile .game-notice-objective,
body.is-small-mobile .game-notice-warning,
body.is-small-mobile .game-notice-player-kill,
body.is-small-mobile .game-notice-booster-hint,
body.is-small-mobile .game-notice-compact,
body.is-small-mobile .game-notice-enemy-kill {
  width: max-content;
  max-width: calc(100vw - 44px);
  min-width: 0;
  min-height: 0;
  padding: 1px 4px;
  overflow: visible;
  border: 0;
  clip-path: none;
  background: none;
  box-shadow: none;
  text-align: center;
  text-overflow: clip;
}

.hit-reward-entry {
  padding: 1px 4px;
  border: 0;
  background: none;
  color: #8ee7ff;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.98),
    0 0 8px rgba(111, 221, 239, 0.55);
}

.hit-reward-entry[data-gold="0"] {
  border: 0;
  color: #8ee7ff;
}

.hit-reward-entry[data-kind="moduleDestroyed"] {
  border: 0;
  color: #ffd166;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.98),
    0 0 9px rgba(255, 190, 76, 0.58);
}

.hit-reward-entry[data-kind="enemyDestroyed"] {
  border: 0;
  color: #b7ff6b;
  box-shadow: none;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.98),
    0 0 9px rgba(128, 240, 91, 0.58);
}

.hit-reward-entry[data-kind="playerKilled"] {
  border: 0;
  color: #ff7c86;
  box-shadow: none;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.98),
    0 0 9px rgba(255, 89, 100, 0.62);
}

.spawn-protection-banner {
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #ffffff;
  box-shadow: none;
}

.tutorial-guide-card {
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.98));
}

.tutorial-guide-card b {
  color: #ffd166;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.52);
}

.tutorial-guide-card p {
  color: #efffe4;
  font-weight: 760;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.98);
}

body.is-small-mobile .tutorial-guide-card {
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.singleplayer-panel {
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.98));
}

.singleplayer-panel-head span,
.singleplayer-panel-head b {
  color: #ffd166;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.46);
}

.singleplayer-panel p {
  color: #bff7ff;
  font-weight: 760;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.98);
}

.singleplayer-actions,
.singleplayer-actions button {
  pointer-events: auto;
}

/* src/styles/orbital-ui.css */
/* Orbital workshop: readable arcade shapes, painted housings and tactile keys.
   This final paint layer preserves the existing visibility and docking contracts. */
:root {
  --ink: #edf3f6;
  --muted: #9baebb;
  --panel: #1c2b38;
  --panel-strong: #21323f;
  --line: #3b5060;
  --green: #b8ed72;
  --cyan: #79d9e8;
  --amber: #f5c86d;
  --red: #ff7b7f;
  --pink: #eaa8d5;
  --device-font: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --device-face: linear-gradient(180deg, #2c4151, #243746);
  --device-edge: #101b26;
  --device-shadow: inset 0 1px 0 #ffffff16, 0 4px 0 #0b1520, 0 12px 24px #060e1833;
  --device-key: inset 0 1px 0 #ffffff20, 0 3px 0 #0b1520;
  --arcology-font: var(--device-font);
  --arcology-crt: linear-gradient(#182733, #14222e);
  --arcology-frame: var(--device-face);
  --arcology-frame-shadow: var(--device-shadow);
  --arcology-edge: var(--line);
  --arcology-bolt: linear-gradient(transparent, transparent);
  --arcology-panel-bolt: linear-gradient(transparent, transparent);
  --arcology-wear: linear-gradient(transparent, transparent);
  --ui-motion-latch: 90ms;
  --ui-motion-rail: 210ms;
  --ui-motion-boot: 240ms;
}

html, body { background: #101b28; font-family: var(--device-font); }
body :is(button, input, select, .eyebrow, .main-menu-label, .topbar, .leaderboard,
  .minimap, .tutorial-guide-card, .service-dock-copy strong) {
  font-family: var(--device-font);
  text-shadow: none;
}
body :is(button, input, select, [tabindex]):focus-visible {
  outline: 3px solid #79d9e8;
  outline-offset: 3px;
}
body :is(button, .choice-radio) { -webkit-tap-highlight-color: transparent; }
body input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), body select {
  min-height: 44px;
  border: 1px solid #425b6a;
  border-radius: 8px;
  background: #14232f;
  box-shadow: inset 0 2px 3px #07131d55;
  color: var(--ink);
  caret-color: var(--cyan);
}
body input::placeholder { color: #90a4b2; }

/* Strip the old nested frames, wiring and scanning overlays from housings. */
body :is(.start-layout, .start-panel, .start-side-panel, .menu-modal-card,
  .settings-card, .sound-test-card, .profile-modal-card, .death-card,
  .confirm-card, .victory-card, .onboarding-card, .ship-builder-panel,
  .upgrade-panel, .auth-panel, .topbar, .leaderboard, .minimap,
  .singleplayer-panel, .service-ship-stats, .service-dock-hud,
  .main-menu-button, .mobile-menu-sheet, .mobile-ship-sheet)::before,
body :is(.start-layout, .start-panel, .start-side-panel, .menu-modal-card,
  .settings-card, .sound-test-card, .profile-modal-card, .death-card,
  .confirm-card, .victory-card, .onboarding-card, .ship-builder-panel,
  .upgrade-panel, .auth-panel, .topbar, .leaderboard, .minimap,
  .singleplayer-panel, .service-ship-stats, .service-dock-hud,
  .main-menu-button, .mobile-menu-sheet, .mobile-ship-sheet)::after,
body.builder-panel-open .hud::before, body.upgrade-panel-open .hud::before {
  display: none;
  animation: none;
}

body :is(.start-panel, .start-side-panel, .menu-modal-card, .settings-card,
  .sound-test-card, .profile-modal-card, .death-card, .confirm-card,
  .victory-card, .onboarding-card, .ship-builder-panel, .upgrade-panel,
  .mobile-menu-sheet, .mobile-ship-sheet, .default-ship-capacity-panel) {
  border: 2px solid var(--device-edge);
  border-radius: 14px;
  background: var(--device-face);
  box-shadow: var(--device-shadow);
  clip-path: none;
  backdrop-filter: none;
  color: var(--ink);
}
body :is(.menu-modal, .profile-modal, .settings-modal, .sound-test-modal,
  .confirm-modal, .onboarding-modal, .victory-overlay) {
  background: #08121fbc;
  backdrop-filter: blur(5px);
}

/* Three small machines: assembly bed, launch console, equipment keys. */
body .start-screen { background: radial-gradient(ellipse at 50% 42%, #182f4088, #0c1926d9 75%); }
body .start-layout { gap: 20px; }
body .start-panel { padding: 26px; gap: 16px; align-content: center; }
body .start-panel, body .default-ship-panel {
  background:
    radial-gradient(circle at calc(100% - 12px) 12px, #7a909d 0 2px, #152633 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #7a909d 0 2px, #152633 2.5px 3.5px, transparent 4px),
    var(--device-face);
}
body .start-side-panel { min-height: 420px; }
body .default-ship-panel { padding: 16px; gap: 12px; }
body .ship-bay-label {
  display: flex; align-items: center; gap: 8px;
  margin: 1px 0 0; color: #c8d7df;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
body .ship-bay-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 3px #79d9e814;
}
body .default-ship-preview {
  border: 1px solid #3d5261; border-radius: 10px;
  background: #13232f;
  box-shadow: inset 0 3px 5px #07121c66;
}
body .default-ship-status, body .default-ship-status.login-required {
  min-height: 32px; font-size: 12px; font-weight: 500;
  line-height: 1.6; color: #aebfca; text-shadow: none; letter-spacing: 0;
}
body .start-panel .eyebrow {
  border: 0; padding: 0; color: #f4f7f8;
  font-size: clamp(24px, 2.35vw, 34px); font-weight: 900;
  line-height: 1.1; letter-spacing: -.055em; text-shadow: none;
}
body .start-panel h1 {
  font-family: var(--device-font); font-size: 17px; font-weight: 500;
  line-height: 1.5; letter-spacing: -.03em; color: #b4c6d2; text-shadow: none;
}
body .start-panel label > span {
  color: #adc0cd; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-shadow: none;
}
body .start-panel #nameInput { font-weight: 600; }
body #startStatus { color: #93aab9; font-size: 11px; line-height: 1.5; }
body .menu-side-panel {
  padding: 0; gap: 14px; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
body .main-menu-button {
  min-height: 84px; padding: 17px; overflow: hidden;
  border: 2px solid #0f1c27; border-radius: 12px;
  background: var(--device-face); box-shadow: var(--device-key);
}
body .main-menu-label { color: #e5edf2; font-size: 18px; letter-spacing: -.025em; }
body .main-menu-button:hover { background: #344d5f; filter: none; }
body .booster-row { gap: 8px; }
body .booster-row button {
  border: 1px solid #3d5262; border-radius: 9px;
  background: #192a36; box-shadow: inset 0 1px 0 #ffffff0c;
  color: #bdcdd7;
}
body .item-slot-row button::before, body .item-slot-row button::after { display: none; }
body .item-slot-icon { filter: none; }
body .item-slot-row button:disabled { opacity: .58; }
body .auth-panel { padding: 0; border: 0; background: none; box-shadow: none; }

/* Recessed switches. Selection remains visible without hover or motion. */
body .choice-radio {
  min-height: 42px; padding: 8px; gap: 7px;
  border: 1px solid #425563; border-radius: 7px;
  background: #1b2b37; box-shadow: inset 0 1px 2px #06141d55;
  color: #b5c7d2; font-size: 12px; font-weight: 700; text-shadow: none;
}
body .room-choice-grid .choice-radio { font-size: 12px; padding-inline: 7px; gap: 5px; }
body .room-choice-grid:has([data-choice-value="tutorial"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .choice-radio input {
  width: 10px; height: 10px; flex: 0 0 10px; min-height: 0;
  border: 2px solid #67808f; background: #12202b;
  box-shadow: none; border-radius: 50%;
}
body .choice-radio:is(.selected, :has(input:checked)) {
  color: #eff7fa; border-color: var(--choice-accent);
  background: color-mix(in srgb, var(--choice-accent) 14%, #192b37);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--choice-accent) 65%, transparent);
}
body .choice-radio:is(.selected, :has(input:checked)) input {
  border-color: var(--choice-accent); background: var(--choice-accent); box-shadow: none;
}

body :is(.login-button, .icon-text-button, .settings-button, .topbar-settings-button,
  .settings-reset-button, .mobile-mode-button, .onboarding-control-button,
  .keybind-button, .mobile-menu-close, .mobile-ship-close, .mobile-drawer-action,
  .mobile-hud-options-button, .mobile-hud-options-menu button, .shop-buy-button,
  .cosmetic-equip-button, .feedback-submit-button, .feedback-secondary-button,
  .skill-buy, .skill-equip, .upgrade-buy, .singleplayer-actions button,
  .actions button, .confirm-actions button, .death-actions button,
  .victory-actions button, .onboarding-secondary, .default-ship-module-palette button) {
  border: 1px solid #456071; border-radius: 8px;
  background: linear-gradient(#344e60, #2a4152); color: #e5eff5;
  box-shadow: var(--device-key); backdrop-filter: none;
  text-shadow: none; letter-spacing: 0;
}
body :is(.support-corner-button, .legal-corner-button) {
  border: 0; border-radius: 6px; background: #172938bb;
  padding: 8px 10px; box-shadow: none; color: #98aebb;
  font-size: 11px; text-shadow: none;
}
body #playButton, body .onboarding-primary, body .service-dock-exit,
body .death-actions button:first-child, body .victory-actions button:last-child {
  border: 2px solid #112519 !important; border-radius: 10px;
  background: linear-gradient(#c3f589, #a7e363);
  box-shadow: inset 0 2px 0 #e5ffc09c, 0 5px 0 #548936, 0 8px 0 #0a1620;
  color: #1c341c; font-weight: 900; text-shadow: none;
  letter-spacing: .015em; clip-path: none;
}
body #playButton { min-height: 56px; font-size: 20px; padding: 12px 18px; }
body #playButton::before, body .onboarding-primary::before,
body .service-dock-exit::before, body .service-dock-exit::after { display: none; }
body #playButton::after {
  content: ""; position: absolute; inset: 50% 21px auto auto;
  width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid #274525;
  background: none; box-shadow: none; transform: translateY(-50%); animation: none;
}
body #playButton:disabled { opacity: .55; }

/* One readable header and a quieter surface behind each content group. */
body :is(.menu-modal-head, .settings-head, .sound-test-head, .profile-modal-head,
  .builder-header, .upgrade-header, .mobile-menu-head, .mobile-ship-head) {
  margin: 0 0 14px; padding: 4px 0 14px;
  border: 0; border-bottom: 1px solid #425767;
  background: none; box-shadow: none;
}
body :is(.menu-modal-head h2, .settings-head h2, .sound-test-head h2,
  .profile-modal-head h2, .builder-header h2, .upgrade-header h2) {
  color: #ecf3f7; font-size: 20px; letter-spacing: -.025em; text-shadow: none;
}
body :is(.settings-section, .settings-toggle, .settings-select, .settings-range,
  .menu-modal-empty, .inventory-detail, .account-notice-card, .feedback-context-card,
  .onboarding-mobile-controls, .monetization-panel) {
  border: 1px solid #3a5060; border-radius: 10px;
  background: #1a2c39; box-shadow: none;
}
body :is(.shop-tabs, .cosmetics-tabs, .builder-tabs) {
  padding: 4px; gap: 5px; border: 0; border-radius: 9px;
  background: #12232f; box-shadow: inset 0 2px 2px #08172244;
}
body .shop-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body :is(.shop-tab, .cosmetics-tab, .builder-tab, .builder-sell) {
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; box-shadow: none; color: #adbeca;
}
body :is(.shop-tab, .cosmetics-tab, .builder-tab):is(.selected, .active, [aria-selected="true"]),
body .mobile-mode-button.active, body .onboarding-control-button.active {
  border-color: #759690; background: #35534b;
  color: #d3f6b3; box-shadow: inset 0 1px 0 #e5ffc025;
}
body :is(.shop-card, .cosmetic-card, .inventory-card, .builder-card,
  .upgrade-card, .skill-card, .daily-reward-card) {
  border: 1px solid #405969; border-radius: 10px;
  background: #1b2d3b; box-shadow: inset 0 1px 0 #ffffff0d, 0 3px 0 #0e1c27;
  color: #e3edf3; clip-path: none;
}
body :is(.shop-card, .cosmetic-card, .inventory-card, .builder-card):hover {
  background: #284353; border-color: #7296a8; filter: none;
}
body .builder-card.selected { border-color: #b8ed72; box-shadow: inset 0 0 0 1px #b8ed72; }
body :is(.builder-palette, .builder-card-body) { background: none; box-shadow: none; }
body .builder-card-body { border-top: 1px solid #344b5a; }
body .builder-card canvas { border: 0; border-radius: 7px; box-shadow: none; }
body .builder-palette { padding: 4px 4px 20px; gap: 10px; scrollbar-color: #526e80 #152632; }
body .builder-palette::-webkit-scrollbar-track { background: #152632; border: 0; }
body .builder-palette::-webkit-scrollbar-thumb { background: #526e80; border: 0; border-radius: 5px; }
body :is(.shop-card, .cosmetic-card, .inventory-card, .builder-card, .upgrade-card, .skill-card)::before,
body :is(.shop-card, .cosmetic-card, .inventory-card, .builder-card, .upgrade-card, .skill-card)::after { display: none; }

/* Instruments stay compact; colour is reserved for live values. */
body :is(.topbar, .leaderboard, .minimap, .singleplayer-panel, .skill-hud,
  .mobile-hud-options-menu, .service-dock-hud, .service-ship-stats) {
  border: 1px solid #3c5363; border-radius: 10px;
  background: #1b2b38f5; box-shadow: inset 0 1px 0 #ffffff0d, 0 3px 0 #081522aa;
  clip-path: none; backdrop-filter: none; text-shadow: none;
}
body .topbar { padding: 9px 12px; }
body .topbar strong { color: #d6e5ed; font-size: 13px; font-weight: 900; letter-spacing: -.03em; }
body .stats { border: 0; border-radius: 6px; padding: 5px 9px; background: #0f202c; box-shadow: none; }
body .stats b { font-size: 14px; color: #b8ed72; font-variant-numeric: tabular-nums; }
body #goldText { color: #f5c86d; }
body #massText { color: #8dd9ec; }
body :is(.leaderboard h2, .minimap h2, .singleplayer-panel-head span) {
  color: #acbfcc; font-weight: 700; text-shadow: none; letter-spacing: .03em;
}
body .leaderboard li { background: none; border-bottom: 1px solid #344956; box-shadow: none; }
body .leaderboard li::before { background: #304958; border: 0; border-radius: 5px; box-shadow: none; }
body .singleplayer-panel-head { margin: 0 0 8px; padding: 4px 0 8px; border: 0; border-bottom: 1px solid #3c5363; background: none; box-shadow: none; }
body .upgrade-toggle, body .base-action-button {
  border: 1px solid #526c7d; border-radius: 0 10px 10px 0;
  background: var(--device-face); box-shadow: var(--device-key);
  text-shadow: none; clip-path: none;
}
body .service-dock-copy { padding: 6px 8px; border: 0; border-radius: 6px; background: #12232e; box-shadow: inset 0 2px 2px #06141e44; }
body .service-dock-copy small { color: #99afbd; letter-spacing: .07em; }
body .service-dock-copy strong { text-shadow: none; letter-spacing: 0; }
body .service-dock-lamp { width: 8px; height: 8px; border: 0; border-radius: 50%; box-shadow: 0 0 0 3px #091722; }
body .service-dock-meter { border: 0; border-radius: 4px; background: #0c1c28; box-shadow: none; }
body .service-dock-meter i { border-radius: 2px; background: var(--service-accent); box-shadow: none; }
body .service-ship-stats :is(h2, h3, strong) { text-shadow: none; }
body .service-dock-exit { padding: 14px 24px; letter-spacing: 0; }
body .upgrade-segment { background: #102432; border-color: #496170; border-radius: 3px; }
body .upgrade-segment.filled { background: #9fdc69; box-shadow: inset 0 1px 0 #e4ffb777; }
body .upgrade-card-icon, body .skill-card-icon {
  align-self: start; min-height: 36px; border: 1px solid #587586; border-radius: 8px;
  background: #2c4a5b; box-shadow: inset 0 1px 0 #def5ff1a;
  color: #a3e2ef; text-shadow: none; clip-path: none;
}
body .skill-card-icon { color: #e6c6f0; background: #463d59; border-color: #786683; }
body .onboarding-card h2 { color: #eaf3f8; letter-spacing: -.055em; font-family: var(--device-font); text-shadow: none; }
body .onboarding-card .eyebrow { border: 0; color: #b8ed72; padding: 0; letter-spacing: .02em; text-shadow: none; }
body .onboarding-copy { color: #b4c6d2; line-height: 1.6; }
body .settings-section { padding: 14px; }
body .settings-section h3 { color: #e0edf4; }
body .settings-toggle, body .settings-range, body .settings-select { border: 0; background: #142935; }
body .settings-select select { border-color: #435f70; border-radius: 7px; background: #213c4c; color: #e5f0f6; box-shadow: inset 0 1px 2px #07152266; }
body .settings-toggle input[type="checkbox"] {
  appearance: none; position: relative; flex: 0 0 38px;
  width: 38px; height: 22px; margin: 0; min-height: 0; padding: 0;
  border: 1px solid #506b7c; border-radius: 12px;
  background: #0e202c; box-shadow: inset 0 2px 2px #08141c99; cursor: pointer;
}
body .settings-toggle input[type="checkbox"]::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #9bb2bf; box-shadow: inset 0 1px 0 #e3f6ff66, 0 1px 2px #0009;
}
body .settings-toggle input[type="checkbox"]:checked { background: #5f853e; border-color: #96bb6f; }
body .settings-toggle input[type="checkbox"]:checked::after { left: 19px; background: #e7f8d3; }
body .settings-range input[type="range"] { appearance: none; height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; }
body .settings-range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #527485; box-shadow: inset 0 1px 2px #07162266; }
body .settings-range input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 3px solid #bad4df; border-radius: 50%; background: #f1f8fa; box-shadow: 0 2px 0 #0a1d2b; }
body .settings-range input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #527485; }
body .settings-range input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #bad4df; border-radius: 50%; background: #f1f8fa; }
body .settings-content { scrollbar-width: thin; scrollbar-color: #638497 #192c39; }
body .tutorial-key-cue { gap: 6px; }
body .tutorial-key-status { min-width: 58px; min-height: 44px; padding: 6px; }
body .tutorial-keycap, body .tutorial-mouse-button {
  border: 1px solid #7f929a; border-radius: 6px;
  background: linear-gradient(#e4eceb, #c0cecf); color: #263a48;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #637e8d, 0 5px 0 #0c1b28;
}
body .tutorial-key-status small { color: #41596a; font-size: 9px; }
body .tutorial-key-status::after { width: 5px; height: 5px; right: 5px; top: 5px; border: 0; background: #778e9c; }
body .tutorial-key-status.complete { background: #b8e686; color: #243b1e; border-color: #92bb6b; }
body .tutorial-key-status.complete::after { content: ""; background: #517934; }
body .service-ship-stats header strong { font-family: var(--device-font); letter-spacing: 0; color: #e2eef5; }
body .service-ship-stats header small, body .service-ship-stats-condition { font-family: var(--device-font); letter-spacing: 0; color: #a7c5cf; }
body .default-ship-dock-builder { border-color: #12232f; background: var(--device-face); }
body .default-ship-service-shell { background: #12222f; }
body .default-ship-dock-builder { box-shadow: inset -1px 0 0 #4b6473, 4px 0 0 #0b1b28; }
body .default-ship-dock-builder::before, body .default-ship-dock-builder::after,
body .default-ship-bay-stage::before, body .default-ship-bay-stage::after { display: none; }
body .default-ship-dock-builder .default-ship-module-palette { background: none; scrollbar-color: #668699 #182c3a; gap: 9px; }
body .default-ship-dock-builder .default-ship-module-palette button {
  border: 1px solid #466272; border-radius: 9px;
  background: #1b3140; box-shadow: inset 0 1px 0 #ffffff12, 0 3px 0 #0b1b27;
}
body .default-ship-dock-builder .default-ship-module-palette button.selected {
  border-color: #abd982; background: #304d45; box-shadow: inset 0 0 0 1px #abd98255;
}
body .default-ship-module-preview { border: 1px solid #405c6b; border-radius: 6px; background: #152733; box-shadow: none; }
body .default-ship-bay-stage { background: #132632; box-shadow: inset 0 1px 0 #344f60; }
body .default-ship-bay-stage #defaultShipEditorCanvas { border: 1px solid #456170; border-radius: 12px; box-shadow: 0 4px 0 #081923; }
body .default-ship-builder-header p, body .default-ship-capacity-panel :is(small, p) { font-family: var(--device-font); text-shadow: none; }
body .default-ship-capacity-panel .default-ship-limit-text { color: #c0eca0; font-size: 16px; line-height: 1.4; }
body .default-ship-capacity-panel .default-ship-editor-hint { color: #afc4d0; }
body .tutorial-guide-title { color: #f5c86d; text-shadow: none; }
body .tutorial-guide-body { color: #edf4f8; text-shadow: 0 1px 3px #07121e; }
body .tutorial-guide-action { border-radius: 7px; box-shadow: none; }
body .module-info-popup {
  border: 1px solid #698492; border-radius: 9px; background: #1e3442f5;
  box-shadow: 0 3px 0 #0d1c29, 0 8px 20px #06101c55; color: #e2edf4;
}
body .module-info-title { color: #eaf4f9; text-shadow: none; }
body .module-info-desc { color: #afc3d0; }
body .module-info-stat { border-color: #3e5766; background: #142b39; box-shadow: none; }
body .game-notice { font-weight: 700; text-shadow: 0 2px 3px #071420; }

/* A pair of clean sliding leaves replaces the decorative cable assembly. */
body .blast-door-leaf {
  border-color: #8ba2af;
  background: linear-gradient(110deg, #213846, #3d596a 48%, #284351);
  box-shadow: inset 0 0 0 2px #142a39, inset 0 2px 0 #aec5d355, 0 0 20px #06132088;
}
body .blast-door-leaf::before {
  inset: 12% 12%; border: 1px solid #819eae66; border-radius: 12px;
  background: #1c334166; box-shadow: inset 0 3px 6px #0c1d2955;
}
body .blast-door-leaf::after, body .blast-door-leaf > span { display: none; }
body .blast-door-leaf > .blast-door-status-light {
  display: block; width: 6px; height: 24px;
  border: 0; border-radius: 3px; background: #a7dc83; box-shadow: none; animation: none;
}
body .blast-door-lock { border-color: #516e7f; border-radius: 8px; background: #203846; box-shadow: 0 3px 0 #102433; }

/* Short settle and press feedback. No idle scanner, flashing lamp or stagger. */
body #startScreen:not(.hidden) :is(.start-panel, .default-ship-panel, .menu-side-panel) {
  animation: orbital-seat 240ms ease-out both;
}
body #startScreen:not(.hidden) :is(.start-panel > *, .default-ship-preview,
  .default-ship-status, .default-ship-edit-button, .menu-side-panel > *) { animation: none; }
body #startScreen:not(.hidden) :is(.shop-bullet, .shop-weapon, .paint-drop,
  .inventory-core, .inventory-spark) { animation: none; }
body :is(.menu-modal-card, .onboarding-card, .settings-card) { animation-duration: 220ms; }
body :is(button, .choice-radio) { transition: background-color 100ms, border-color 100ms, box-shadow 90ms, translate 90ms; }
@media (hover: hover) and (pointer: fine) {
  body :is(.main-menu-button, .login-button, .settings-button, .shop-buy-button):hover { translate: 0 -1px; }
  body #playButton:hover, body .onboarding-primary:hover { background: linear-gradient(#d2ffa0, #b6ed77); }
}
body :is(.main-menu-button, .login-button, .settings-button, .icon-text-button):active {
  translate: 0 2px; transform: none; box-shadow: inset 0 1px 2px #06131e66, 0 1px 0 #0b1520;
}
body #playButton:active, body .onboarding-primary:active {
  translate: 0 3px; transform: none;
  box-shadow: inset 0 1px 2px #37532a33, 0 2px 0 #548936, 0 4px 0 #0a1620;
}
@keyframes orbital-seat { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) body #startScreen:not(.hidden) :is(.start-panel, .default-ship-panel, .menu-side-panel) { animation: none; }
  :root:not([data-ui-motion="full"]) body :is(button, .choice-radio) { transition: none; }
}

/* src/styles/orbital-ui-responsive.css */
/* Material stays consistent at mobile sizes; established touch/layout rules win. */
/* Tablets and desktop share a compact status rail. Phones keep their smaller
   controls; the expanded options menu keeps its full-size touch targets. */
body.is-playing:not(.is-small-mobile) .topbar {
  min-height: 40px; padding: 3px 8px; gap: 12px;
  flex-direction: row; align-items: center;
}
body.is-playing:not(.is-small-mobile) .topbar > div:first-child {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.is-playing:not(.is-small-mobile) .stats {
  flex: 0 0 auto; align-items: center; flex-wrap: nowrap;
  gap: 10px; padding: 1px 6px; font-size: 12px;
}
body.is-playing:not(.is-small-mobile) .mobile-hud-options-button {
  height: 30px; min-height: 30px; padding: 3px 8px; font-size: 11px;
}
body.is-small-mobile .hit-reward-feed {
  top: max(calc(env(safe-area-inset-top, 0px) + clamp(88px, 10vh, 112px)), var(--boss-hud-bottom, 0px));
}

body :is(.mobile-menu-button, .mobile-fullscreen-button, .mobile-ship-button) {
  border: 1px solid #506b7b; border-radius: 9px;
  background: var(--device-face); box-shadow: var(--device-key);
}
body .mobile-joystick-base {
  border: 2px solid #7898a770; border-radius: 50%;
  background: radial-gradient(circle, #263f5080 0 65%, #162d4080 66%);
  box-shadow: inset 0 2px 4px #06132155, 0 1px 0 #bed9eb22;
}
body .mobile-joystick-base::before, body .mobile-joystick-base::after { opacity: .15; }
body .mobile-joystick-knob {
  border: 2px solid #a7c8d777;
  background: radial-gradient(circle at 40% 30%, #64889a, #36566c);
  box-shadow: inset 0 1px 0 #d8f2ff55, 0 3px 0 #0d2235, 0 6px 10px #06132144;
}
body .mobile-dpad { border: 1px solid #607f9066; border-radius: 14px; background: #1b344580; box-shadow: none; }
body .mobile-dpad-button { border: 1px solid #698c9d66; border-radius: 8px; background: #315469b3; box-shadow: 0 2px 0 #112c42; }
body .mobile-action-button { border: 2px solid #7898a788; border-radius: 12px; background: #294454b3; box-shadow: var(--device-key); }
body .mobile-action-button.active, body .mobile-dpad-button.active {
  color: #d5fab4; background: #476b4fcf; border-color: #b8ed72;
}
body .mobile-joystick.active .mobile-joystick-knob { border-color: #b8ed72; box-shadow: inset 0 1px 0 #ecffd766, 0 2px 0 #172c2d; }
body.is-small-mobile :is(.topbar, .leaderboard, .minimap, .singleplayer-panel, .service-dock-hud, .service-ship-stats) {
  border: 1px solid #3c5363; border-radius: 8px;
  background: #1b2b38ed; box-shadow: inset 0 1px 0 #ffffff0d, 0 2px 0 #08152288;
}
body.is-small-mobile .start-layout::before, body.is-small-mobile .start-layout::after { display: none; }
body #startScreen :is(.start-layout, .start-panel, .start-side-panel)::before,
body #startScreen :is(.start-layout, .start-panel, .start-side-panel)::after { display: none; }
body.is-small-mobile :is(.mobile-menu-button, .mobile-fullscreen-button, .mobile-ship-button) {
  border: 1px solid #506b7b; border-radius: 9px;
  background: var(--device-face); box-shadow: var(--device-key);
}
body.is-small-mobile .server-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.is-small-mobile:not(.is-playing) #mobileMenuButton,
body.is-small-mobile:not(.is-playing) #mobileShipButton {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: auto; bottom: auto; width: 44px; height: 44px; min-height: 44px;
  padding: 7px; transform: none; border-radius: 9px;
}
body.is-small-mobile:not(.is-playing) #mobileMenuButton { right: calc(env(safe-area-inset-right, 0px) + 12px); }
body.is-small-mobile:not(.is-playing) #mobileShipButton { right: calc(env(safe-area-inset-right, 0px) + 64px); }
body.is-small-mobile:not(.is-playing) #mobileShipButton .mobile-ship-label { display: none; }
body.is-small-mobile:not(.is-playing) #mobileShipButton .mobile-ship-icon { width: 28px; height: 28px; }
body.is-small-mobile .start-panel { padding: 16px; gap: 10px; }
body.is-small-mobile .start-panel .eyebrow { font-size: 25px; }
body.is-small-mobile .start-panel h1 { font-size: 14px; }
body.is-small-mobile .choice-radio, body.is-small-mobile .room-choice-grid .choice-radio {
  min-height: 44px; padding: 7px; font-size: 11px; gap: 5px;
}
body.is-small-mobile .start-panel input:not([type="radio"]) { min-height: 44px; }
body.is-small-mobile .start-panel .choice-radio input { min-height: 0; width: 10px; height: 10px; flex-basis: 10px; padding: 0; }
body.is-small-mobile #playButton { min-height: 48px; padding: 10px 16px; font-size: 19px; }
body.is-small-mobile .main-menu-button { min-height: 72px; padding: 14px; }
body.is-small-mobile .main-menu-label { font-size: 17px; }
body.is-small-mobile .ship-bay-label { font-size: 11px; }
body.is-small-mobile .default-ship-status.login-required { font-size: 12px; line-height: 1.5; }
body.is-small-mobile :is(.mobile-menu-sheet, .mobile-ship-sheet) { border-radius: 12px; }
body.is-small-mobile :is(.onboarding-card, .settings-card, .menu-modal-card) { border-radius: 12px; }
body.is-small-mobile .onboarding-card h2 { font-size: clamp(24px, 6.8vw, 36px); }
body.is-small-mobile .onboarding-primary { font-size: 17px; }
body.is-small-mobile .ship-builder-panel .builder-header {
  margin: 0 0 6px; padding: 0 0 6px; gap: 8px;
}
body.is-small-mobile .ship-builder-panel .builder-header h2 { font-size: 15px; }
body.is-small-mobile .ship-builder-panel .builder-header p { font-size: 10px; line-height: 1.2; }
body.is-small-mobile .ship-builder-panel .builder-tabs { margin-bottom: 7px; padding: 3px; }
body.is-small-mobile .ship-builder-panel .builder-tab { min-height: 44px; height: 44px; font-size: 12px; }
body.is-small-mobile .ship-builder-panel .builder-palette { gap: 6px; padding: 2px 2px 12px; }
body.is-small-mobile .upgrade-panel .upgrade-header { margin: 0 0 8px; padding: 0 0 8px; }
body.is-small-mobile .upgrade-panel .upgrade-header h2 { font-size: 15px; }
body.is-small-mobile .upgrade-panel .upgrade-header p { font-size: 10px; }
body.is-small-mobile .upgrade-panel :is(.upgrade-card, .skill-card) { padding: 8px; gap: 6px; }
body.has-mobile-controls .upgrade-panel :is(.upgrade-buy, .skill-buy, .skill-equip),
body.is-small-mobile .upgrade-panel :is(.upgrade-buy, .skill-buy, .skill-equip) { min-height: 44px; min-width: 64px; }
body.is-small-mobile.small-mobile-portrait .upgrade-panel {
  overflow: hidden;
}
/* Each catalog keeps its own viewport so upgrades cannot push skills below the sheet. */
body.is-small-mobile .upgrade-panel :is(.upgrade-list, .skill-list) {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: #688a9e #192c39;
}
body.is-small-mobile.small-mobile-portrait .upgrade-panel .skill-section { flex-grow: 1.25; padding-bottom: 0; }
@media (max-width: 599px) and (max-height: 700px) {
  body.is-small-mobile.small-mobile-portrait:has(#serviceDockExit:not(.hidden)) .upgrade-panel {
    left: calc(var(--side-rail-width) + 6px);
    top: calc(env(safe-area-inset-top, 0px) + 82px);
    width: calc(100vw - var(--side-rail-width) - 6px);
    height: auto;
    max-height: none;
  }
}
@media (min-width: 600px) {
  body.is-small-mobile.small-mobile-portrait .upgrade-panel.open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px 12px;
  }
  body.is-small-mobile.small-mobile-portrait .upgrade-panel .upgrade-header {
    grid-column: 1 / -1; margin-bottom: 0;
  }
  body.is-small-mobile.small-mobile-portrait .upgrade-panel .upgrade-list {
    grid-column: 1; grid-row: 2;
  }
  body.is-small-mobile.small-mobile-portrait .upgrade-panel .skill-section {
    grid-column: 2; grid-row: 2; margin-top: 0; padding: 0 0 0 12px;
    border-top: 0; border-left: 1px solid rgba(244, 247, 239, 0.14);
  }
}
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card {
  grid-template-columns: 28px minmax(0, 1fr); gap: 7px;
}
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card-icon { grid-column: 1; grid-row: 1; min-height: 28px; height: 28px; font-size: 17px; }
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card h3 { grid-column: 2; grid-row: 1; word-break: keep-all; line-height: 1.3; }
body.is-small-mobile.small-mobile-landscape .upgrade-panel .skill-card p { grid-column: 1 / -1; grid-row: 2; line-height: 1.4; }
body.is-small-mobile.small-mobile-landscape .upgrade-panel :is(.skill-buy, .skill-equip) { grid-column: 1 / -1; grid-row: 3; }
body.is-small-mobile.small-mobile-landscape .ship-builder-panel,
body.is-small-mobile.small-mobile-landscape .upgrade-panel.open { padding-top: calc(env(safe-area-inset-top, 0px) + 48px); }
body.is-small-mobile.small-mobile-landscape .upgrade-panel :is(.upgrade-buy, .skill-buy, .skill-equip) { min-height: 44px; }
body.is-small-mobile.small-mobile-landscape .start-panel { gap: 6px; padding: 12px 16px; }
body.is-small-mobile.small-mobile-landscape .start-panel .eyebrow { font-size: 24px; }
body.is-small-mobile.small-mobile-landscape .start-panel h1 { font-size: 12px; line-height: 1.25; }
body.is-small-mobile.small-mobile-landscape .start-panel label { gap: 3px; }
body.is-small-mobile.small-mobile-landscape .start-panel label > span { font-size: 10px; }
body.is-small-mobile.small-mobile-landscape #startStatus { font-size: 10px; }
@media (min-width: 1000px) and (min-height: 600px) {
  body .start-layout { width: min(1080px, calc(100vw - 72px)); grid-template-columns: minmax(250px, 1fr) 390px minmax(240px, .9fr); }
  body .default-ship-panel { grid-template-rows: auto minmax(0, 1fr) auto auto; }
}
@media (max-height: 440px) and (orientation: landscape) {
  body.is-small-mobile.small-mobile-landscape .start-panel { padding: 10px 14px; gap: 5px; }
  body.is-small-mobile.small-mobile-landscape .start-panel h1 { display: none; }
  body.is-small-mobile .start-side-panel { min-height: 0; }
  body.is-small-mobile .room-choice-grid:has([data-choice-value="tutorial"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.is-small-mobile .room-choice-grid .choice-radio { font-size: 10px; padding: 5px 3px; gap: 3px; }
  body.is-small-mobile .room-choice-grid .choice-radio span { white-space: normal; }
}

/* src/styles/machined-ui.css */
/* Machined housings. These layers are inset/absolute so the existing layout,
   text order and touch rectangles remain authoritative. */
:root {
  --machine-edge: #111b22;
  --machine-highlight: #94a4a7;
  --machine-amber: #d0aa6c;
  --machine-steel: linear-gradient(100deg, #24343d, #809096 24%, #b0bbba 35%, #61767f 49%, #2a3d49 74%, #112530);
  --machine-face: linear-gradient(120deg, #a7b7bc0c, transparent 28% 75%, #060e1644), repeating-linear-gradient(0deg, #b8c9d303 0 1px, transparent 1px 4px), linear-gradient(165deg, #2b3a44, #1b2a34 55%, #18242d);
}

body #startScreen {
  background: radial-gradient(ellipse at 49% 42%, #21384970, #09151fdb 78%);
}
body .machine-panel {
  position: relative;
  border-color: #0b151d;
  border-radius: 8px;
  background: var(--machine-face);
  box-shadow: inset 0 1px 0 #d6e5e34d, inset 0 0 0 3px #61768077,
    inset 0 0 0 5px #091721b3, inset 0 0 0 6px #adbec21a,
    0 5px 0 #09131b, 0 6px 0 #53657066, 0 16px 30px #020b1555;
}
/* Drawers are anchored to their existing viewport edges. */
body :is(.mobile-menu-sheet, .mobile-ship-sheet).machine-panel { position: absolute; }
body #startScreen .start-panel,
body #startScreen .default-ship-panel { background: var(--machine-face); }
body .machine-panel > .machine-hardware {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}
.machine-hardware i, .machine-hardware b {
  display: block; position: absolute; margin: 0; padding: 0;
  pointer-events: none; font-style: normal;
}
.machine-rail {
  top: 32px; bottom: 32px; width: 7px; overflow: hidden;
  background: linear-gradient(90deg, #060f17, #2b404d 40%, #07131d);
  border: 1px solid #526770; border-radius: 2px;
  box-shadow: inset 1px 0 1px #0009;
}
.machine-rail.left { left: 4px; }
.machine-rail.right { right: 4px; }
.machine-rail b {
  inset: 0 1px;
  background: repeating-linear-gradient(0deg, #172b36 0 7px, #8b9a9d 7px 9px, #243c49 9px 13px);
  opacity: .7;
}
.machine-bridge {
  left: 34px; right: 34px; height: 7px;
  background: linear-gradient(#92a0a2, #506670 32%, #142a37 80%);
  border: 1px solid #0d1a23; border-radius: 2px;
  box-shadow: 0 1px 0 #8a9ba82b;
}
.machine-bridge.top { top: 4px; }
.machine-bridge.bottom { bottom: 4px; }
.machine-bridge b {
  top: 1px; left: 36%; width: 28%; height: 3px;
  background: repeating-linear-gradient(110deg, #ac915e 0 5px, #263841 5px 10px);
}
.machine-latch {
  width: 24px; height: 24px;
  background: linear-gradient(140deg, #adbbba, #536771 52%, #31434f);
  border: 1px solid #12212b; border-radius: 5px;
  box-shadow: inset 0 1px 0 #e0e8de61, 1px 3px 0 #06111a99;
}
.machine-latch.tl { left: 2px; top: 2px; }
.machine-latch.tr { right: 2px; top: 2px; }
.machine-latch.bl { left: 2px; bottom: 2px; }
.machine-latch.br { right: 2px; bottom: 2px; }
.machine-latch b {
  inset: 6px; border: 2px solid #132631; border-radius: 50%;
  background: linear-gradient(140deg, #b9c5c2, #728890 48%, #4b606d);
  box-shadow: 0 1px 0 #d6dfd557;
}
.machine-latch b::after {
  content: ""; position: absolute; top: 3px; left: 1px; right: 1px; height: 1px;
  background: #1a303e; transform: rotate(-35deg);
}
.machine-piston {
  top: calc(50% - 38px); height: 76px; width: 9px;
  border-radius: 3px; border: 1px solid #091722;
  background: var(--machine-steel);
  box-shadow: 1px 2px 2px #020b1480;
}
.machine-piston.left { left: -6px; }
.machine-piston.right { right: -6px; }
.machine-piston::before, .machine-piston::after {
  content: ""; position: absolute; left: -2px; right: -2px; height: 8px;
  border: 1px solid #192e3b; border-radius: 2px;
  background: linear-gradient(90deg, #637881, #acb8b6 40%, #3a515f);
}
.machine-piston::before { top: -2px; }
.machine-piston::after { bottom: -2px; }
.machine-piston b {
  top: 7px; bottom: 7px; left: 2px; right: 2px;
  background: linear-gradient(90deg, #b9c8c9, #718b99 50%, #1e3444);
  border: 1px solid #203746; transform-origin: center bottom;
}
.machine-exhaust {
  bottom: 3px; left: 23%; width: 42px; height: 10px;
  border: 1px solid #0c1e2a; border-radius: 2px;
  background: linear-gradient(#8b9b9e, #3a5261 45%, #162b3a);
  box-shadow: 0 2px 0 #081622;
}
.machine-exhaust b {
  inset: 2px 4px;
  background: repeating-linear-gradient(90deg, #071721 0 3px, #758c96 3px 5px);
  transform-origin: top;
}
.machine-bus {
  right: 31px; bottom: 5px; width: 38px; height: 4px;
  background: repeating-linear-gradient(90deg, #527879 0 5px, #152935 5px 8px);
  border-radius: 1px;
}
.machine-bus b {
  inset: 0;
  background: repeating-linear-gradient(90deg, #c5ba8a 0 5px, transparent 5px 8px);
  opacity: .48;
}
body .main-menu-button.machine-panel { overflow: hidden; border-radius: 7px; }
.main-menu-button .machine-latch { width: 16px; height: 16px; border-radius: 3px; }
.main-menu-button .machine-latch b { inset: 4px; border-width: 1px; }
.main-menu-button .machine-latch b::after { top: 2px; }
.main-menu-button .machine-rail { top: 21px; bottom: 21px; width: 5px; }
.main-menu-button .machine-bridge { left: 24px; right: 24px; height: 5px; }
.main-menu-button .machine-piston { display: none; }
.main-menu-button .machine-exhaust { left: 19px; width: 24px; height: 6px; }
.main-menu-button .machine-exhaust b { inset: 1px 3px; }
.main-menu-button .machine-bus { right: 20px; bottom: 4px; width: 24px; height: 3px; }
body .main-menu-button.machine-panel .main-menu-label { position: relative; z-index: 2; }
body .main-menu-button.machine-panel:hover {
  background: linear-gradient(120deg, #b0ced612, transparent 65%), var(--machine-face);
  box-shadow: inset 0 1px 0 #e1eae378, inset 0 0 0 3px #91a4a388, inset 0 0 0 5px #091721b3,
    0 5px 0 #08141d, 0 6px 0 #647d8366, 0 12px 24px #040c1544;
}
body :is(.auth-panel .login-button, .auth-panel .settings-button, .auth-panel .icon-text-button) {
  border-radius: 5px;
  background: linear-gradient(170deg, #536772, #2c424f 45%, #203340);
  border-color: #72858d;
  box-shadow: inset 0 1px 0 #d8e4dc45, inset 0 0 0 2px #09192566, 0 3px 0 #07131b;
}
body #startScreen .booster-row button {
  border-radius: 5px;
  background: linear-gradient(135deg, #31444e, #1a2d39);
  border-color: #536b79;
  box-shadow: inset 0 1px 0 #cedbd126, inset 0 0 0 3px #081c283d, 0 3px 0 #081622;
}
body #startScreen .item-slot-row button[aria-pressed="true"],
body .item-slot-row button[aria-pressed="true"] {
  border-color: #b8ed72;
  background: linear-gradient(135deg, #395640, #1c332d);
  box-shadow: inset 0 0 0 2px #b8ed724d, 0 3px 0 #081622;
}
body .item-slot-state {
  position: absolute;
  top: 7px;
  right: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #10212c;
  color: #a7bac4;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
body .item-slot-row button[aria-pressed="true"] .item-slot-state,
body .inventory-card[aria-pressed="true"] .inventory-active-state {
  background: #b8ed72;
  color: #183020;
}
body .inventory-active-state {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 4px;
  background: #142631;
  color: #a7bac4;
  font-size: 11px;
  font-weight: 800;
}
body .inventory-detail .inventory-use-button {
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #6e8794;
  border-radius: 5px;
  background: linear-gradient(#3c5360, #233a47);
  color: #e3eee9;
  font: 800 14px system-ui, sans-serif;
  cursor: pointer;
}
body .inventory-detail .inventory-use-button[aria-pressed="true"] {
  border-color: #b8ed72;
  background: #304d39;
  color: #d7f2b7;
}
body .inventory-detail .inventory-use-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body .start-panel #pilotNameInput {
  border-radius: 4px; border-color: #526975;
  background: linear-gradient(180deg, #0b1b27, #142835);
  box-shadow: inset 0 2px 3px #0008, 0 1px 0 #94a9b426;
}
body .start-panel .choice-radio {
  border-radius: 4px;
  background: linear-gradient(#31434e, #1c2f3d);
  box-shadow: inset 0 1px 0 #c8d8d51c, inset 0 -3px 0 #07182499, 0 1px 0 #69838d33;
}
body .start-panel .choice-radio:is(.selected, :has(input:checked)) {
  background: linear-gradient(180deg, #142833, color-mix(in srgb, var(--choice-accent) 12%, #162935));
  box-shadow: inset 0 3px 5px #0005, inset 0 -2px 0 var(--choice-accent);
}
body #playButton {
  border-radius: 5px;
  background: linear-gradient(180deg, #c2d2a3 0%, #a9c280 10%, #8daa5e 92%, #78964f 100%);
  border-color: #233226 !important;
  box-shadow: inset 0 1px 0 #efffdfaa, inset 0 0 0 3px #efffcc20, 0 4px 0 #435d32, 0 7px 0 #07141c;
  color: #172821;
}
body #playButton::before {
  display: block; content: ""; position: absolute; top: 12px; bottom: 12px; left: 7px; width: 6px;
  border: 0; border-radius: 1px;
  background: repeating-linear-gradient(0deg, #294634 0 3px, #cada9b 3px 6px);
  box-shadow: none; animation: none;
}
body #playButton:hover { background: linear-gradient(#d1dfb3, #adc983); }
body #startScreen .default-ship-preview {
  border-radius: 5px; border: 1px solid #6b828d;
  box-shadow: inset 0 0 0 3px #070f18, inset 0 0 0 4px #52697666, inset 0 5px 15px #0007;
  background: radial-gradient(ellipse, #233e4b, #0c1b26 75%);
}
body :is(.menu-modal-head, .settings-head, .profile-modal-head, .sound-test-head) {
  border-bottom: 1px solid #80949655;
  box-shadow: 0 1px 0 #06131f88;
}
body .machine-panel :is(.shop-card, .cosmetic-card, .inventory-card) {
  border-radius: 6px; background: linear-gradient(155deg, #263b47, #142834);
  box-shadow: inset 0 1px 0 #c3d9dc21, 0 3px 0 #081923;
}
.machine-atmosphere {
  position: fixed; inset: 0; z-index: 8; display: block;
  width: 100%; height: 100%; pointer-events: none !important;
  contain: strict;
}
/* Landscape phones also need the compact hardware even above 600px wide. */
body.is-small-mobile .machine-hardware .machine-piston { display: none; }
body.is-small-mobile .machine-hardware .machine-latch { width: 16px; height: 16px; border-radius: 3px; }
body.is-small-mobile .machine-hardware .machine-latch b { inset: 4px; border-width: 1px; }
body.is-small-mobile .machine-hardware .machine-latch b::after { top: 2px; }
body.is-small-mobile .machine-hardware .machine-rail { width: 4px; top: 23px; bottom: 23px; }
body.is-small-mobile .machine-hardware .machine-bridge { left: 24px; right: 24px; height: 5px; }
body.is-small-mobile.small-mobile-landscape .start-panel .eyebrow { padding-inline-start: 6px; }
@media (min-width: 1000px) and (min-height: 600px) {
  body #startScreen :is(.start-panel, .default-ship-panel) { overflow: visible; }
}
@media (max-width: 600px) {
  .machine-hardware .machine-piston { display: none; }
  .machine-hardware .machine-latch { width: 18px; height: 18px; }
  .machine-hardware .machine-latch b { inset: 4px; }
  .machine-hardware .machine-rail { width: 4px; top: 24px; bottom: 24px; }
  .machine-hardware .machine-bridge { left: 26px; right: 26px; height: 5px; }
  .machine-hardware .machine-exhaust { height: 6px; width: 26px; }
  .machine-hardware .machine-exhaust b { inset: 1px 3px; }
  body .machine-panel { box-shadow: inset 0 1px 0 #d6e5e340, inset 0 0 0 2px #63798566, inset 0 0 0 4px #091721b3, 0 4px 0 #08151e; }
}

/* src/styles/machined-ui-motion.css */
/* Chassis -> rack -> actuator -> latch. Only hardware moves at rest; surface
   travel is short and all controls retain their established final positions. */
body #startScreen:not(.hidden) :is(.start-panel, .default-ship-panel, .menu-side-panel) { animation: none; }
body #startScreen.machine-entering .default-ship-panel { animation: machine-bay-left 680ms cubic-bezier(.16,.8,.22,1) both; }
body #startScreen.machine-entering .start-panel { animation: machine-bay-center 640ms 70ms cubic-bezier(.16,.8,.22,1) both; }
body #startScreen.machine-entering .menu-side-panel > .main-menu-button { animation: machine-key-seat 580ms cubic-bezier(.14,.8,.16,1) both; }
body #startScreen.machine-entering .menu-side-panel > :nth-child(1) { animation-delay: 120ms; }
body #startScreen.machine-entering .menu-side-panel > :nth-child(2) { animation-delay: 185ms; }
body #startScreen.machine-entering .menu-side-panel > :nth-child(3) { animation-delay: 250ms; }
body #startScreen.machine-entering .menu-side-panel > .booster-row { animation: machine-controls-in 340ms 380ms ease-out both; }
body #startScreen.machine-entering .start-panel > :not(.machine-hardware) { animation: machine-controls-in 300ms 230ms cubic-bezier(.2,.8,.2,1) both; }
body #startScreen.machine-entering .start-panel > :nth-child(3) { animation-delay: 290ms; }
body #startScreen.machine-entering .start-panel > :nth-child(4) { animation-delay: 340ms; }
body #startScreen.machine-entering .start-panel > :nth-child(5) { animation-delay: 410ms; }
body #startScreen.machine-entering .start-panel > :nth-child(6) { animation-delay: 450ms; }
body #startScreen.machine-entering .default-ship-preview { animation: machine-controls-in 360ms 230ms ease-out both; }

.machine-entering .machine-rail b { animation: machine-rack-travel 620ms steps(16,end) both; }
.machine-entering .machine-rail.right b { animation-direction: reverse; }
.machine-entering .machine-piston b { animation: machine-piston-stroke 640ms 60ms cubic-bezier(.2,.7,.2,1) both; }
.machine-entering .machine-piston.right b { animation-delay: 100ms; }
.machine-entering .machine-bridge { animation: machine-bridge-seat 460ms 130ms cubic-bezier(.12,.8,.12,1) both; }
.machine-entering .machine-latch { animation: machine-latch-engage 320ms 340ms cubic-bezier(.16,.8,.22,1) both; }
.machine-entering .machine-latch.tr { animation-delay: 380ms; }
.machine-entering .machine-latch.bl { animation-delay: 430ms; }
.machine-entering .machine-latch.br { animation-delay: 470ms; }
.machine-entering .machine-latch b { animation: machine-lock-turn 300ms 450ms steps(7,end) both; }
.machine-entering .machine-bus b { animation: machine-power-on 740ms steps(5,end) both; }
.machine-entering .machine-exhaust b { animation: machine-vent-release 700ms 160ms ease-out both; }

/* After the temporary entry class is removed, remain at rest. Falling back
   to mechanical-housing-from-* or mechanical-header-clamp restarts entry. */
body :is(.menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal):not(.machine-entering) > .machine-panel,
body :is(.menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal):not(.machine-entering) > .machine-panel > :is(.menu-modal-head, .settings-head, .profile-modal-head, .sound-test-head, .shop-tabs, .cosmetics-grid, .inventory-grid, .settings-grid, .settings-section, .shop-catalog) {
  animation: none;
}

body :is(.menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal).machine-entering > .machine-panel {
  animation: machine-housing-in 620ms cubic-bezier(.16,.8,.18,1) both;
}
body .machine-entering > .machine-panel > :is(.menu-modal-head, .settings-head, .profile-modal-head, .sound-test-head) {
  animation: machine-controls-in 260ms 230ms ease-out both;
}
body .machine-entering > .machine-panel > :is(.shop-tabs, .cosmetics-grid, .inventory-grid, .settings-grid, .settings-section, .shop-catalog) {
  animation: machine-controls-in 320ms 300ms ease-out both;
}

/* Main-menu departure uses the existing 320ms hit-shield lifetime. */
body #startScreen.ui-surface-closing .default-ship-panel { animation: machine-bay-out-left 290ms 25ms ease-in both !important; }
body #startScreen.ui-surface-closing .start-panel { animation: machine-bay-out-center 280ms 30ms ease-in both !important; }
body #startScreen.ui-surface-closing .menu-side-panel > .main-menu-button { animation: machine-bay-out-right 240ms ease-in both !important; }
body #startScreen.ui-surface-closing .menu-side-panel > :nth-child(2) { animation-delay: 25ms !important; }
body #startScreen.ui-surface-closing .menu-side-panel > :nth-child(3) { animation-delay: 50ms !important; }
body #startScreen.ui-surface-closing .booster-row { animation: machine-bay-out-right 230ms 60ms ease-in both !important; }
body #startScreen.ui-surface-closing .start-panel > :not(.machine-hardware) { animation: machine-controls-out 160ms ease-in both !important; }
.machine-leaving .machine-rail b { animation: machine-rack-release 280ms steps(10,end) both !important; }
.machine-leaving .machine-latch { animation: machine-latch-release 170ms ease-in both !important; }
.machine-leaving .machine-piston b { animation: machine-piston-release 260ms ease-in both !important; }
.machine-leaving .machine-exhaust b { animation: machine-vent-release 290ms ease-out both !important; }

body #startScreen .machine-key-cycling .machine-rail b { animation: machine-rack-travel 500ms steps(12,end); }
body #startScreen .machine-key-cycling .machine-latch b { animation: machine-lock-turn 360ms steps(7,end); }
body #startScreen .machine-key-cycling .shop-weapon { animation: machine-tool-recoil 450ms ease-out; }
body #startScreen .machine-key-cycling .shop-bullet { animation: machine-ammo-index 450ms ease-out; }
body #startScreen .machine-key-cycling .paint-swatch { animation: machine-swatch-deploy 450ms cubic-bezier(.2,.8,.2,1); }
body #startScreen .machine-key-cycling .swatch-b { animation-delay: 70ms; }
body #startScreen .machine-key-cycling .inventory-crate { animation: machine-crate-unlock 460ms ease-out; }
body #startScreen .machine-key-cycling .inventory-core { animation: machine-core-seat 460ms 80ms ease-out; }

@keyframes machine-bay-left { 0% { opacity: 0; transform: translateX(-42px); } 65% { opacity: 1; transform: translateX(3px); } 82% { transform: translateX(-1px); } 100% { opacity: 1; transform: none; } }
@keyframes machine-bay-center { 0% { opacity: 0; transform: translateY(32px); } 64% { opacity: 1; transform: translateY(-3px); } 82% { transform: translateY(1px); } 100% { opacity: 1; transform: none; } }
@keyframes machine-key-seat { 0% { opacity: 0; transform: translateX(44px); } 68% { opacity: 1; transform: translateX(-4px); } 84% { transform: translateX(1px); } 100% { opacity: 1; transform: none; } }
@keyframes machine-controls-in { 0% { opacity: 0; transform: translateY(10px); } 75% { opacity: 1; transform: translateY(-1px); } 100% { opacity: 1; transform: none; } }
@keyframes machine-housing-in { 0% { opacity: 0; transform: translateY(34px) scale(.985); } 65% { opacity: 1; transform: translateY(-3px) scale(1); } 83% { transform: translateY(1px); } 100% { opacity: 1; transform: none; } }
@keyframes machine-rack-travel { from { transform: translateY(-39px); } to { transform: translateY(0); } }
@keyframes machine-rack-release { from { transform: translateY(0); } to { transform: translateY(39px); } }
@keyframes machine-piston-stroke { 0% { transform: scaleY(.25); } 60% { transform: scaleY(1.1); } 83% { transform: scaleY(.94); } 100% { transform: scaleY(1); } }
@keyframes machine-piston-release { to { transform: scaleY(.2); } }
@keyframes machine-bridge-seat { from { opacity: .2; transform: scaleX(.5); } to { opacity: 1; transform: scaleX(1); } }
@keyframes machine-latch-engage { 0% { transform: translateY(-9px); opacity: .35; } 72% { transform: translateY(1px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes machine-latch-release { to { transform: translateY(-8px); } }
@keyframes machine-lock-turn { from { rotate: -100deg; } to { rotate: 0deg; } }
@keyframes machine-power-on { 0%, 25% { opacity: .05; clip-path: inset(0 100% 0 0); } 60% { opacity: .9; } 100% { opacity: .48; clip-path: inset(0); } }
@keyframes machine-vent-release { 0%, 100% { transform: scaleY(1); } 25%, 65% { transform: scaleY(.35); } }
@keyframes machine-bay-out-left { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translateX(3px); } 100% { opacity: 0; transform: translateX(-60px); } }
@keyframes machine-bay-out-center { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0; transform: translateY(42px); } }
@keyframes machine-bay-out-right { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translateX(-2px); } 100% { opacity: 0; transform: translateX(60px); } }
@keyframes machine-controls-out { to { opacity: 0; transform: translateY(5px); } }
@keyframes machine-tool-recoil { 15% { translate: -9px 0; } 65% { translate: 1px 0; } 100% { translate: 0 0; } }
@keyframes machine-ammo-index { 0% { translate: -10px 7px; } 70% { translate: 1px -1px; } 100% { translate: 0 0; } }
@keyframes machine-swatch-deploy { 0% { translate: -8px 9px; rotate: -15deg; } 75% { translate: 1px -1px; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes machine-crate-unlock { 25% { translate: 0 -5px; } 75% { translate: 0 1px; } 100% { translate: 0 0; } }
@keyframes machine-core-seat { 0% { translate: 0 -8px; } 100% { translate: 0 0; } }

body.machine-reduced-motion .machine-atmosphere { display: none; }
body.machine-reduced-motion :is(.machine-entering, .machine-leaving, .machine-key-cycling),
body.machine-reduced-motion :is(.machine-entering, .machine-leaving, .machine-key-cycling) *,
body.machine-reduced-motion #startScreen.ui-surface-closing *,
body.machine-reduced-motion .machine-hardware * { animation: none !important; transition: none !important; }
:root[data-ui-motion="reduced"] { --ui-motion-latch: .01ms; --ui-motion-rail: .01ms; --ui-motion-boot: .01ms; }
body.machine-reduced-motion :is(#startScreen, .menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal) *,
body.machine-reduced-motion :is(#startScreen, .menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal) *::before,
body.machine-reduced-motion :is(#startScreen, .menu-modal, .settings-modal, .profile-modal, .sound-test-modal, .confirm-modal, .onboarding-modal) *::after {
  animation: none !important; transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .machine-atmosphere { display: none; }
  :root:not([data-ui-motion="full"]) body :is(.machine-entering, .machine-leaving, .machine-key-cycling),
  :root:not([data-ui-motion="full"]) body :is(.machine-entering, .machine-leaving, .machine-key-cycling) *,
  :root:not([data-ui-motion="full"]) body #startScreen.ui-surface-closing *,
  :root:not([data-ui-motion="full"]) body .machine-hardware * { animation: none !important; transition: none !important; }
}

/* src/styles/sf-blast-door.css */
/* Eight independently driven armor plates, a split central badge, and two
   transverse locks. Durations fit BLAST_DOOR_TIMING in blast-door-system.js. */
.blast-door-transition.sf-blast-door {
  --sf-hub-width: clamp(260px, 39vw, 540px);
  --sf-hub-height: clamp(174px, 28vh, 244px);
  --sf-open-ease: cubic-bezier(.35,.02,.13,1);
  --sf-close-ease: cubic-bezier(.12,.8,.23,1);
  isolation: isolate;
  transition: opacity 120ms linear;
}
.sf-blast-door *, .sf-blast-door *::before, .sf-blast-door *::after { box-sizing: border-box; }
.sf-door-panel {
  --sf-row: 0; --sf-open-delay: 280ms; --sf-close-delay: 30ms; --sf-x: -106%; --sf-y: -12%;
  --sf-armor-top: #617681; --sf-armor-bottom: #2b424e;
  position: absolute; top: calc(var(--sf-row) * 25% - 1px);
  width: calc(50% + 1px); height: calc(25% + 2px);
  border: 2px solid #091520;
  background:
    repeating-linear-gradient(90deg, transparent 0 37px, #67808e16 37px 38px, transparent 38px 77px),
    linear-gradient(180deg, #768a92 0, #344b58 3px, #182c3a 7px, #101e2a calc(100% - 8px), #536b77 calc(100% - 4px), #152936);
  box-shadow: 0 7px 15px #000a, inset 0 0 0 2px #8ba0ab42;
  transform: translate(var(--sf-x), var(--sf-y));
  transition: transform 680ms var(--sf-open-delay) var(--sf-open-ease);
  will-change: transform;
}
.sf-door-panel.sf-left { left: 0; }
.sf-door-panel.sf-right { right: 0; --sf-x: 106%; transition-delay: calc(var(--sf-open-delay) + 35ms); }
.sf-door-panel.sf-row-1 { --sf-row: 1; --sf-open-delay: 130ms; --sf-close-delay: 100ms; --sf-y: -4%; --sf-armor-top: #566c79; --sf-armor-bottom: #263d4c; }
.sf-door-panel.sf-row-2 { --sf-row: 2; --sf-open-delay: 205ms; --sf-close-delay: 65ms; --sf-y: 4%; --sf-armor-top: #5d7682; --sf-armor-bottom: #2a424f; }
.sf-door-panel.sf-row-3 { --sf-row: 3; --sf-open-delay: 345ms; --sf-close-delay: 0ms; --sf-y: 12%; }
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-panel {
  transform: translate(0, 0);
  transition-duration: 290ms;
  transition-delay: var(--sf-close-delay);
  transition-timing-function: var(--sf-close-ease);
}
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-panel.sf-right { transition-delay: calc(var(--sf-close-delay) + 15ms); }
.sf-door-panel::after {
  content: ""; position: absolute; top: 18%; bottom: 18%; width: 8px;
  background: repeating-linear-gradient(135deg, #b49a64 0 8px, #132a38 8px 16px);
  box-shadow: inset 0 0 0 1px #bbc8bd36;
}
.sf-left::after { right: 5px; }
.sf-right::after { left: 5px; }
.sf-door-armor {
  display: block; position: absolute; inset: 13px 22px;
  clip-path: polygon(22px 0, calc(100% - 34px) 0, 100% 27px, 100% calc(100% - 19px), calc(100% - 20px) 100%, 16px 100%, 0 calc(100% - 18px), 0 22px);
  background: linear-gradient(155deg, #a5b9bf, #728e99 26%, #324e60 58%, #8099a3 87%, #1b3547);
  box-shadow: inset 0 0 0 2px #d5e4df55;
}
.sf-door-armor::before {
  content: ""; position: absolute; inset: 5px;
  clip-path: polygon(20px 0, calc(100% - 32px) 0, 100% 25px, 100% calc(100% - 17px), calc(100% - 18px) 100%, 14px 100%, 0 calc(100% - 16px), 0 20px);
  background:
    radial-gradient(circle at 20px 20px, #213643 0 2px, #a2b4b9 2.5px 4.5px, #152b3b 5px 7px, transparent 7.5px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 20px), #1d3443 0 2px, #a2b4b9 2.5px 4.5px, #152b3b 5px 7px, transparent 7.5px),
    linear-gradient(115deg, #bdd0d326, transparent 32% 66%, #0312203b),
    repeating-linear-gradient(0deg, #ecf7ec06 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--sf-armor-top), var(--sf-armor-bottom));
}
.sf-door-channel {
  position: absolute; left: 8%; right: 14%; top: 26%; height: 49%;
  clip-path: polygon(0 0, 57% 0, 65% 45%, 100% 45%, 100% 51%, 63% 51%, 55% 6%, 0 6%);
  background: linear-gradient(#192f3f, #97afb761 50%, #102b3b);
}
.sf-right .sf-door-channel { scale: -1 1; }
.sf-door-vent {
  position: absolute; left: 12%; top: 36%; width: clamp(36px, 9vw, 124px); height: 34%; max-height: 52px;
  border: 3px solid #233e4c; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #0b2333 0 5px, #75919b 5px 7px, #284654 7px 11px);
  box-shadow: inset 0 2px 3px #000a, 0 1px 0 #b2c9c46b, 0 4px 0 #112c3a;
}
.sf-right .sf-door-vent { left: auto; right: 12%; }
.sf-door-dog {
  position: absolute; right: 6%; top: calc(50% - 23px); width: 42px; height: 46px;
  border: 2px solid #112b3c; border-radius: 4px;
  background:
    radial-gradient(circle at 10px 9px, #0e2939 0 2px, #90aab3 3px 5px, transparent 6px),
    radial-gradient(circle at 10px calc(100% - 9px), #0e2939 0 2px, #90aab3 3px 5px, transparent 6px),
    linear-gradient(90deg, #526f80, #b0c4c8 46%, #58778a 56%, #1f4156);
  box-shadow: 0 3px 0 #0c2435;
  transform: translateX(-17px);
  transition: transform 150ms ease-out;
}
.sf-right .sf-door-dog { right: auto; left: 6%; transform: translateX(17px); scale: -1 1; }
.sf-blast-door.is-closed .sf-door-dog { transform: translateX(0); }
.sf-door-lamp {
  position: absolute; right: 18%; top: 18%; height: 4px; width: clamp(24px, 6vw, 82px);
  background: #cbb584; border: 1px solid #293e3d;
  box-shadow: 0 0 8px #b9b47b40;
  transition: background-color 150ms;
}
.sf-right .sf-door-lamp { right: auto; left: 18%; }
.sf-blast-door.is-closed .sf-door-lamp { background: #99cfc7; box-shadow: 0 0 8px #78c6bf33; }
.sf-door-drive {
  display: block; position: absolute; left: 4%; bottom: 20px;
  width: 40%; height: 13px; max-width: 300px;
  border: 1px solid #0b2132; border-radius: 4px;
  background: linear-gradient(#183344, #a0b7bf 29%, #4a6a7e 49%, #183b53 76%, #60818f);
  box-shadow: 0 3px 3px #020f1977;
}
.sf-right .sf-door-drive { left: auto; right: 4%; scale: -1 1; }
.sf-door-drive i {
  display: block; position: absolute; left: 35%; right: 7px; top: 2px; bottom: 2px;
  background: linear-gradient(#d8e6e7, #8ca9b8 35%, #42687f 65%, #284860);
  transform: scaleX(.22); transform-origin: right center;
  transition: transform 320ms 60ms ease-out;
}
.sf-blast-door:is(.is-closing, .is-closed) .sf-door-drive i { transform: scaleX(1); transition-delay: 90ms; }
.sf-door-drive::before {
  content: ""; position: absolute; left: -3px; top: -7px; width: 26px; height: 26px;
  border: 2px solid #18374a; border-radius: 50%;
  background: radial-gradient(circle, #18364a 0 13%, #9db2b5 14% 28%, transparent 29%), repeating-conic-gradient(#91a6a6 0 15deg, #344f5a 15deg 30deg);
  box-shadow: 0 2px 0 #091f2e;
}
.sf-blast-door.is-opening .sf-door-drive::before { animation: sf-drive-spin 650ms steps(16,end) both; }
.sf-blast-door.is-closing .sf-door-drive::before { animation: sf-drive-spin 420ms steps(16,end) reverse both; }
.sf-door-tracks { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms 600ms; }
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-tracks { opacity: 1; transition-delay: 0ms; }
.sf-door-tracks i { position: absolute; left: 0; right: 0; top: 25%; height: 8px; border-block: 1px solid #89b2c438; background: repeating-linear-gradient(90deg, #234353 0 7px, #82969c 7px 8px, #122c3f 8px 13px); }
.sf-door-tracks i:nth-child(2) { top: 50%; }
.sf-door-tracks i:nth-child(3) { top: 75%; }

/* The two half-shells share precisely aligned artwork while sealed. */
.sf-door-hub {
  position: absolute; z-index: 4; top: calc(50% - var(--sf-hub-height) / 2);
  width: calc(var(--sf-hub-width) / 2 + .5px); height: var(--sf-hub-height);
  overflow: hidden;
  background: linear-gradient(135deg, #aabdc3, #426171 38%, #112d40 75%, #71939f);
  transition: transform 370ms 70ms cubic-bezier(.4,0,.14,1);
  will-change: transform;
}
.sf-hub-left {
  left: calc(50% - var(--sf-hub-width) / 2);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 27px), 0 27px);
  transform: translateX(-80vw);
}
.sf-hub-right {
  left: 50%;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 27px, 100% calc(100% - 27px), calc(100% - 22px) 100%, 0 100%);
  transform: translateX(80vw);
}
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-hub { transform: translateX(0); transition-duration: 250ms; transition-delay: 130ms; transition-timing-function: var(--sf-close-ease); }
.sf-door-mark {
  position: absolute; top: 5px; left: 5px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(10px, 2vh, 18px);
  width: calc(var(--sf-hub-width) - 10px); height: calc(var(--sf-hub-height) - 10px);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 24px), 0 24px);
  background:
    radial-gradient(circle at 23px 21px, #294859 0 2px, #8ba5ab 2.5px 5px, #112c40 5.5px 7px, transparent 7.5px),
    radial-gradient(circle at calc(100% - 23px) 21px, #294859 0 2px, #8ba5ab 2.5px 5px, #112c40 5.5px 7px, transparent 7.5px),
    radial-gradient(circle at 23px calc(100% - 21px), #294859 0 2px, #8ba5ab 2.5px 5px, #112c40 5.5px 7px, transparent 7.5px),
    radial-gradient(circle at calc(100% - 23px) calc(100% - 21px), #294859 0 2px, #8ba5ab 2.5px 5px, #112c40 5.5px 7px, transparent 7.5px),
    repeating-linear-gradient(0deg, #c8dadd04 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 15%, #3d5866, #102d3d 75%);
  box-shadow: inset 0 0 0 2px #0c2536, inset 0 0 0 3px #97b2b340;
}
.sf-hub-right .sf-door-mark { left: calc(5px - var(--sf-hub-width) / 2); }
.sf-door-mark img { display: block; width: clamp(54px, 8vh, 78px); height: clamp(54px, 8vh, 78px); border: 1px solid #88b8b14d; border-radius: 15px; box-shadow: 0 2px 0 #071b25, 0 0 30px #8ef3c10c; }
.sf-door-mark strong { font: 900 clamp(21px, 2.9vw, 40px)/1 "Segoe UI", system-ui, sans-serif; letter-spacing: -.04em; white-space: nowrap; color: #e4edeb; text-shadow: 0 2px 0 #061722; }
.sf-door-seal { display: flex; gap: 6px; }
.sf-door-seal i { width: 22px; height: 3px; background: #bba573; box-shadow: 0 0 7px #d5b47033; }
.sf-blast-door.is-closed .sf-door-seal i { background: #9ecab9; }
.sf-door-crosslock {
  position: absolute; z-index: 5; left: calc(50% - min(26vw, 345px)); width: min(52vw, 690px); height: 25px;
  border: 2px solid #0d293d; border-radius: 4px;
  background: linear-gradient(#aabac1, #44667b 35%, #1e425c 78%, #8babb4);
  box-shadow: 0 4px 4px #02131f66;
  transition: transform 210ms ease-in, opacity 160ms 180ms;
  opacity: 0;
}
.sf-crosslock-top { top: calc(50% - var(--sf-hub-height) / 2 - 12px); transform: translateY(-45px) scaleX(.5); }
.sf-crosslock-bottom { top: calc(50% + var(--sf-hub-height) / 2 - 13px); transform: translateY(45px) scaleX(.5); }
.sf-door-crosslock span {
  display: block; position: absolute; inset: 6px 12%;
  background: repeating-linear-gradient(120deg, #bca575 0 12px, #263f4b 12px 24px);
  border: 1px solid #aec7c236; border-radius: 1px;
}
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-crosslock { transform: translateY(0) scaleX(1); opacity: 1; transition-delay: 300ms; transition-duration: 120ms; }
.sf-door-frame {
  position: absolute; z-index: 6; left: 0; right: 0; height: 30px;
  border-block: 2px solid #17374a;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, #aac4c466 78px 81px, #0b293b 81px 86px),
    linear-gradient(#7c99a7, #365d75 24%, #19374e 64%, #486f85);
  box-shadow: 0 3px 8px #01111a80;
  transition: transform 360ms 530ms ease-in;
}
.sf-frame-top { top: 0; transform: translateY(-110%); }
.sf-frame-bottom { bottom: 0; transform: translateY(110%); }
.sf-blast-door:is(.is-closed, .is-closing) .sf-door-frame { transform: translateY(0); transition-duration: 180ms; transition-delay: 0ms; }
@keyframes sf-drive-spin { from { rotate: 0deg; } to { rotate: 210deg; } }
@media (max-width: 600px) {
  .sf-door-armor { inset: 8px 10px; }
  .sf-door-armor::before { inset: 3px; }
  .sf-door-panel::after { width: 4px; }
  .sf-left::after { right: 2px; }
  .sf-right::after { left: 2px; }
  .sf-door-dog { width: 24px; height: 36px; top: calc(50% - 18px); right: 3%; }
  .sf-right .sf-door-dog { left: 3%; }
  .sf-door-vent { left: 10%; height: 25%; top: 36%; border-width: 2px; }
  .sf-right .sf-door-vent { right: 10%; }
  .sf-door-drive { bottom: 12px; height: 8px; }
  .sf-door-drive::before { width: 18px; height: 18px; top: -5px; }
  .sf-door-crosslock { left: 7%; width: 86%; height: 20px; }
  .sf-door-frame { height: 19px; }
}
@media (max-height: 450px) {
  .blast-door-transition.sf-blast-door { --sf-hub-height: 164px; --sf-hub-width: clamp(260px, 38vw, 400px); }
  .sf-door-mark { gap: 10px; }
  .sf-door-mark img { width: 48px; height: 48px; border-radius: 10px; }
  .sf-door-mark strong { font-size: clamp(22px, 3vw, 30px); }
  .sf-door-armor { inset-block: 7px; }
  .sf-door-drive { bottom: 12px; height: 8px; }
  .sf-door-drive::before { width: 18px; height: 18px; top: -5px; }
  .sf-door-vent { height: 26px; top: 30%; }
  .sf-door-frame { height: 18px; }
}
.sf-blast-door.is-loading { pointer-events: auto; }
body.machine-reduced-motion .sf-blast-door:not(.is-loading) { display: none; }
body.machine-reduced-motion .sf-blast-door *,
body.machine-reduced-motion .sf-blast-door *::before { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .sf-blast-door:not(.is-loading) { display: none; }
  :root:not([data-ui-motion="full"]) .sf-blast-door *, :root:not([data-ui-motion="full"]) .sf-blast-door *::before { transition: none !important; animation: none !important; }
}

/* src/styles/portal-overrides.css */
/* App-store portal builds only. The class is applied by portal-adapter.js. */
body.portal-build #loginButton,
body.portal-build #profileCard,
body.portal-build #newsButton,
body.portal-build #resourcePanel,
body.portal-build #profileModal,
body.portal-build #shopModal,
body.portal-build #cosmeticsModal,
body.portal-build #inventoryModal,
body.portal-build #shopButton,
body.portal-build #cosmeticsButton,
body.portal-build #inventoryButton,
body.portal-build .booster-row,
body.portal-build #supportButton,
body.portal-build #termsButton,
body.portal-build #accountNoticeModal,
body.portal-build #developerThanksModal,
body.portal-build #usernameModal,
body.portal-build #reportModal,
body.portal-build #bugReportModal,
body.portal-build #mobileWikiButton,
body.portal-build #mobileHudBugReportButton,
body.portal-build #menuAdSlot,
body.portal-build #defaultShipEditButton {
  display: none !important;
}

body.portal-build .auth-panel {
  grid-template-columns: auto;
  min-width: 0;
}

body.portal-build .auth-panel .settings-button {
  min-width: 102px;
}

body.portal-build .portal-feature-panel {
  display: grid;
  place-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.portal-promo-card {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(199, 125, 255, 0.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 18%, rgba(199, 125, 255, 0.25), transparent 34%),
    linear-gradient(150deg, rgba(14, 20, 22, 0.92), rgba(27, 15, 35, 0.9));
  box-shadow:
    inset 0 0 36px rgba(88, 215, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.36);
}

.portal-promo-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 168px;
  height: 168px;
  border: 20px solid rgba(88, 215, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(199, 125, 255, 0.05);
  pointer-events: none;
}

.portal-promo-edition,
.portal-promo-card small {
  color: var(--cyan);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 900;
  letter-spacing: 0.13em;
}

.portal-promo-card strong {
  max-width: 9ch;
  color: #f7f4ff;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 0.94;
  text-wrap: balance;
  text-shadow: 0 0 26px rgba(199, 125, 255, 0.3);
}

.portal-promo-card p {
  max-width: 27ch;
  margin: 0;
  color: rgba(235, 244, 240, 0.76);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.45;
}

.portal-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-mode-chips span {
  min-width: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(88, 215, 255, 0.35);
  border-radius: 999px;
  color: #ecfbff;
  background: rgba(9, 23, 29, 0.7);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.portal-invite-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(88, 215, 255, 0.62);
  border-radius: 8px;
  color: #f7fdff;
  background: linear-gradient(135deg, rgba(32, 121, 142, 0.78), rgba(100, 49, 128, 0.82));
  box-shadow: inset 0 0 20px rgba(88, 215, 255, 0.08);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  cursor: pointer;
}

.portal-invite-copy:hover:not(:disabled),
.portal-invite-copy:focus-visible {
  border-color: rgba(199, 125, 255, 0.9);
  filter: brightness(1.12);
}

.portal-invite-copy:disabled {
  color: rgba(235, 244, 240, 0.46);
  border-color: rgba(126, 151, 151, 0.28);
  background: rgba(9, 23, 29, 0.58);
  cursor: default;
}

.portal-invite-settings .portal-invite-status {
  display: block;
  max-width: 28ch;
  margin-top: 8px;
  color: rgba(235, 244, 240, 0.62);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

body.portal-build #defaultShipStatus {
  color: rgba(235, 244, 240, 0.72);
}

body.portal-tutorial-prompt .onboarding-card {
  width: min(440px, calc(100vw - 32px));
  gap: 20px;
  padding: clamp(22px, 4vw, 34px);
  border-color: rgba(88, 215, 255, 0.42);
  background:
    radial-gradient(circle at 84% 12%, rgba(199, 125, 255, 0.18), transparent 36%),
    linear-gradient(155deg, rgba(13, 24, 28, 0.98), rgba(19, 13, 27, 0.98));
  box-shadow:
    inset 0 0 34px rgba(88, 215, 255, 0.06),
    0 28px 90px rgba(0, 0, 0, 0.68);
}

body.portal-tutorial-prompt .onboarding-card > .eyebrow,
body.portal-tutorial-prompt .onboarding-card > h2,
body.portal-tutorial-prompt .onboarding-copy,
body.portal-tutorial-prompt .onboarding-mobile-controls,
body.portal-tutorial-prompt #onboardingLoginButton {
  display: none !important;
}

body.portal-tutorial-prompt .onboarding-portal-question {
  display: block;
  margin: 0;
  color: #f7fdff;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 24px rgba(88, 215, 255, 0.24);
}

body.portal-tutorial-prompt .onboarding-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.portal-tutorial-prompt .onboarding-primary,
body.portal-tutorial-prompt #onboardingSkipTutorialButton {
  grid-column: auto;
  min-height: 56px !important;
  font-size: clamp(14px, 2.4vw, 18px);
}

body.portal-tutorial-prompt #onboardingSkipTutorialButton {
  display: block;
  border-color: rgba(88, 215, 255, 0.42);
  color: #dffaff;
  background: rgba(28, 76, 91, 0.38);
}

@media (max-width: 480px) {
  body.portal-tutorial-prompt .onboarding-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body.portal-build .portal-feature-panel {
    display: none !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body.portal-build .default-ship-panel,
  body.portal-build .portal-feature-panel {
    display: none !important;
  }

  body.portal-build .start-layout {
    width: min(560px, calc(100vw - 44px));
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.portal-build .start-panel {
    max-height: calc(100svh - 32px);
    gap: 4px;
    padding: 8px 14px;
  }

  body.portal-build .start-panel h1 {
    font-size: clamp(22px, 7svh, 29px);
  }

  body.portal-build .start-panel label {
    gap: 2px;
  }

  body.portal-build .start-panel input:not([type="radio"]) {
    min-height: 38px;
    padding: 6px 9px;
  }

  body.portal-build .choice-radio {
    min-height: 34px;
    padding-block: 4px;
  }

  body.portal-build #playButton {
    min-height: 40px;
    padding-block: 6px;
  }

  body.portal-build #startStatus {
    line-height: 1.1;
  }
}

body.is-small-mobile.portal-build .mobile-menu-drawer .portal-feature-panel {
  display: none !important;
}

/* src/styles/mobile-orientation-guard.css */
/* Explicit mobile identity owns portrait availability, not viewport size alone. */
body > .orientation-gate { display: none !important; }
body.orientation-blocked { overflow: hidden; }
body.orientation-blocked > .orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid !important;
  place-items: center;
  align-items: safe center;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  overflow: auto;
  background: radial-gradient(ellipse at 50% 35%, #233c49, #111f28 70%);
  color: #edf5f7;
  text-align: center;
  pointer-events: auto !important;
  touch-action: none;
  outline: none;
}
.orientation-gate-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100%, 380px);
  padding: 32px 20px;
  border: 1px solid #496371;
  border-radius: 14px;
  background: #1c303d;
  box-shadow: 0 6px 0 #091720, inset 0 1px 0 #ffffff0d;
}
.orientation-gate-icon {
  width: 104px;
  height: 104px;
  fill: none;
  stroke: #b7f779;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-menu-motion="full"] body.orientation-blocked .orientation-gate-icon {
  animation: menu-phone-landscape 3.2s ease-in-out infinite;
  transform-origin: center;
}
:root:not([data-menu-motion="full"]) .orientation-gate-icon { animation: none; }
@keyframes menu-phone-landscape {
  0%, 15%, 100% { rotate: 90deg; }
  45%, 75% { rotate: 0deg; }
}
.orientation-gate strong {
  color: #b7f779;
  font-size: clamp(22px, 5.8vw, 30px);
  line-height: 1.35;
  text-wrap: balance;
  word-break: keep-all;
}
.orientation-gate span {
  max-width: 29ch;
  color: #b7cbd5;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: balance;
  word-break: keep-all;
}

@media (max-height: 420px) {
  body.orientation-blocked > .orientation-gate { padding: 16px; }
  .orientation-gate-card { gap: 12px; padding: 20px 16px; }
  .orientation-gate-icon { width: 64px; height: 64px; }
}

/* src/styles/build-interaction.css */
/* Purchase cards keep the tray; selected-item details use the bottom edge. */
.default-ship-dock-builder {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

body :is(#moduleInfoPopup.bottom-bar, #moduleInfoPopup.bottom-bar.mobile) {
  position: fixed;
  top: auto;
  right: var(--module-info-right, 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  left: 12px;
  display: grid !important;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  gap: 4px 18px;
  align-items: center;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  transform: none;
  box-sizing: border-box;
  box-shadow: none;
  pointer-events: auto;
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
}

body #moduleInfoPopup.bottom-bar.hidden {
  display: none !important;
}

.bottom-bar .module-info-title { grid-column: 1; grid-row: 1; margin: 0; }
.bottom-bar .module-info-desc { grid-column: 1; grid-row: 2; margin: 0; }
.bottom-bar .module-info-desc { max-height: 2.6em; overflow-y: auto; line-height: 1.3; overscroll-behavior: contain; scrollbar-width: thin; }
.bottom-bar .module-info-stats { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(var(--module-info-stat-count, 6), minmax(0, 1fr)); align-items: stretch; gap: 6px; }
.bottom-bar .module-info-stat { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 3px; }
.bottom-bar .module-info-stat :is(span, b) { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.bottom-bar .module-info-stat span { font-size: 10px; margin: 0; }
.bottom-bar .module-info-stat b { font-size: 13px; }

body.module-info-bar-open #shipBuilderPanel {
  bottom: var(--module-info-bottom-space, 100px);
  max-height: calc(100svh - var(--module-info-bottom-space, 100px));
}
body.module-info-bar-open .default-ship-dock-builder,
body.is-small-mobile.module-info-bar-open .default-ship-dock-builder {
  padding-bottom: var(--module-info-bottom-space, 100px);
}
body.module-info-bar-open .default-ship-bay-stage,
body.is-small-mobile.module-info-bar-open .default-ship-bay-stage {
  padding-bottom: var(--module-info-bottom-space, 100px);
}
body.module-info-bar-open .default-ship-bay-stage #defaultShipEditorCanvas,
body.is-small-mobile.module-info-bar-open .default-ship-bay-stage #defaultShipEditorCanvas {
  width: min(76vmin, calc(100svh - var(--module-info-bottom-space, 100px) - 24px));
  max-width: calc(100% - 24px);
  max-height: none;
  height: auto;
}

body.is-small-mobile.small-mobile-landscape .default-ship-service-shell {
  grid-template-rows: minmax(0, 100svh);
}
body.is-small-mobile.small-mobile-landscape .default-ship-dock-builder {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

#defaultShipEditorCanvas { touch-action: none; cursor: crosshair; }
.default-ship-module-palette button { cursor: grab; user-select: none; -webkit-user-drag: none; }
:is(.builder-card, .default-ship-module-palette button) canvas { touch-action: none; }
body.builder-dragging, body.builder-dragging * { cursor: grabbing !important; }

.builder-trash-target {
  position: absolute;
  z-index: 20;
  inset: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px dashed #ef997d;
  border-radius: 12px;
  background: rgba(36, 16, 14, .98);
  color: #ffcfbb;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease;
}
.builder-trash-target strong { font-size: clamp(14px, 2vw, 22px); }
.builder-trash-target > span:last-child { font-size: 12px; opacity: .75; }
.builder-trash-icon {
  position: relative;
  width: 42px;
  height: 48px;
  margin-top: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, currentColor 10px 12px, transparent 12px 20px) center / 24px 30px no-repeat;
}
.builder-trash-icon::before { content: ""; position: absolute; width: 50px; left: -7px; top: -9px; border-top: 4px solid currentColor; }
.builder-trash-icon::after { content: ""; position: absolute; width: 16px; height: 5px; left: 10px; top: -16px; border: 3px solid currentColor; border-bottom: 0; }
body.builder-moving-module :is(.ship-builder-panel, .default-ship-dock-builder) > .builder-trash-target { opacity: 1; visibility: visible; }
body.builder-trash-hover .builder-trash-target { background: rgba(104, 36, 24, .98); border-color: #ffd4aa; border-style: solid; }
body.builder-moving-module :is(.ship-builder-panel, .default-ship-dock-builder) > :not(.builder-trash-target) { visibility: hidden; }
body.builder-dragging .module-info-popup { visibility: hidden; }

@media (max-height: 560px), (max-width: 900px) {
  body :is(#moduleInfoPopup.bottom-bar, #moduleInfoPopup.bottom-bar.mobile) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 3px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .bottom-bar .module-info-title b { font-size: 11px; }
  .bottom-bar .module-info-kind { font-size: 8px; }
  .bottom-bar .module-info-stats { grid-column: 1; grid-row: 3; gap: 3px; }
  .bottom-bar .module-info-stat { padding: 3px 2px; gap: 2px; }
  .bottom-bar .module-info-stat span { font-size: 8px; }
  .bottom-bar .module-info-stat b { font-size: 11px; }
}

@media (max-width: 1100px), (max-height: 560px) {
  body #shipBuilderPanel > .builder-header { display: none; }
  body.builder-panel-open :is(.leaderboard, #serviceShipStatsPanel, #serviceDockHud) { display: none !important; }
}

/* Keep the desktop two-column catalog, scaled down for a smaller build bay. */
@media (max-width: 1100px) and (orientation: landscape), (max-height: 560px) and (orientation: landscape) {
  body.builder-panel-open,
  body.is-small-mobile.small-mobile-landscape.builder-panel-open {
    --side-panel-width: clamp(188px, 28vw, 260px);
    --side-panel-left: var(--side-panel-width);
    --side-rail-width: 36px;
    --side-upgrade-height: 36px;
    --side-service-height: 36px;
    --side-rail-gap: 5px;
    --side-icon-size: 20px;
    --side-upgrade-icon-size: 20px;
    --side-label-size: 8px;
    --side-upgrade-label-size: 8px;
  }
  body #shipBuilderPanel { padding: 46px 8px 8px; }
  body #shipBuilderPanel .builder-tabs { padding: 2px; margin-bottom: 5px; }
  body #shipBuilderPanel .builder-tab { min-height: 28px; height: 28px; padding: 3px; font-size: 10px; }
  body #builderPalette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 2px 3px 6px 0; }
  body #builderPalette .builder-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 38px minmax(28px, auto);
    min-height: 0;
    gap: 3px;
    padding: 4px;
  }
  body #builderPalette .builder-card canvas { grid-column: 1; grid-row: 1; width: 48px; height: 36px; justify-self: center; }
  body #builderPalette .builder-card-body { grid-column: 1; grid-row: 2; min-height: 0; gap: 2px; padding: 3px 2px; }
  body #builderPalette .builder-card-name { font-size: 10px; line-height: 1.15; }
  body #builderPalette .builder-card-price { font-size: 9px; line-height: 1.15; }
  body.builder-panel-open :is(#upgradeToggle, .base-action-button) { min-height: 36px; padding: 3px; }
  body.builder-panel-open :is(#upgradeToggle, #baseActionRail) .control-label { font-size: 8px; }
  body.builder-panel-open .base-action-button small { font-size: 7px; }

  body :is(#defaultShipSaveButton, #serviceDockExit) { width: 108px; min-height: 40px; height: 40px; padding: 7px 10px; font-size: 12px; }
  body #defaultShipModal .default-ship-service-shell { grid-template-columns: clamp(172px, 24vw, 220px) minmax(0, 1fr); }
  body #defaultShipModal .default-ship-dock-builder { gap: 6px; padding-top: 7px; padding-left: 7px; padding-right: 7px; }
  body #defaultShipModal .default-ship-builder-header { min-height: 38px; padding: 4px; gap: 4px; }
  body #defaultShipModal .default-ship-builder-header h2 { font-size: 12px; }
  body #defaultShipModal .default-ship-builder-header p { display: none; }
  body #defaultShipResetButton { min-height: 30px; padding: 4px 6px; font-size: 10px; }
  body #defaultShipModulePalette { gap: 4px; padding: 2px 3px 6px 0; }
  body #defaultShipModulePalette button { grid-template-columns: 26px minmax(0, 1fr); min-height: 40px; padding: 3px; gap: 4px; }
  body #defaultShipModulePalette button span { font-size: 9px; line-height: 1.15; }
  body #defaultShipModulePalette canvas { width: 26px; height: 26px; }
  body #defaultShipModal .default-ship-bay-stage { padding-right: 116px; }
  body #defaultShipModal .default-ship-capacity-panel { position: absolute; top: 10px; right: 10px; width: 106px; margin: 0; padding: 9px 7px; }
  body #defaultShipModal .default-ship-capacity-panel small { font-size: 8px; }
  body #defaultShipModal :is(.default-ship-limit-text, .default-ship-editor-hint) { font-size: 10px; }
}

:root[data-ui-motion="reduced"] .builder-trash-target { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .builder-trash-target { transition: none; }
}

/* src/styles/ui-event-feedback.css */
/* Event-owned CSS uses individual translate/scale properties so existing
   mechanical transforms and widget layout remain intact. */
/* The HUD kick changes every combat frame. Non-inherited registration keeps a
   change from restyling every HUD descendant. */
@property --hud-kick-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --hud-kick-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ui-event-motion {
  --ui-event-x: 0px;
  --ui-event-y: 0px;
  --ui-flip-y: 0px;
  --ui-event-scale: 1;
  --ui-event-color: #a9d7e8;
  translate: var(--ui-event-x) calc(var(--ui-event-y) + var(--ui-flip-y));
  scale: var(--ui-event-scale);
}
.ui-hud-kick { translate: var(--hud-kick-x, 0px) var(--hud-kick-y, 0px); }
.ui-event-number { display: inline-block; font-variant-numeric: tabular-nums; }
.ui-event-danger { --ui-event-color: #ff8585; }
.ui-event-success { --ui-event-color: #95edb2; }
.ui-event-gold { --ui-event-color: #ffdc85; }
.ui-event-info { --ui-event-color: #afe2ee; }
.ui-event-a { animation: ui-event-pop-a var(--ui-event-duration, .38s) ease-out both; }
.ui-event-b { animation: ui-event-pop-b var(--ui-event-duration, .38s) ease-out both; }
.ui-event-denied.ui-event-a { animation-name: ui-event-deny-a; }
.ui-event-denied.ui-event-b { animation-name: ui-event-deny-b; }
.ui-event-feed { transform-origin: 0 50%; }
.hit-reward-entry.ui-event-feed { animation-name: ui-event-feed-enter; }
.ui-event-feed.ui-event-reward { position: relative; overflow: hidden; border-left-color: #ffd883;
  color: #ffe3a4; text-shadow: 0 0 6px rgba(255, 208, 114, .35); }
.ui-event-feed.ui-event-boss-reward { border-left-color: #fff0b6; background-color: rgba(115, 83, 32, .22); }
.ui-event-feed.ui-event-reward:not(.ui-event-static):not(.ui-event-low)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 233, 170, .24) 49%, transparent 62%);
  animation: ui-event-reward-gleam .56s ease-out both;
}
.ui-event-feed.ui-event-static, .ui-event-feed.ui-event-low { animation-name: ui-event-feed-still; }
.ui-event-ready { outline: 1px solid var(--ui-event-color); outline-offset: 2px; }
.ui-event-check::after { content: "✓"; display: inline-block; margin-left: .35em; color: #95edb2; }
.ui-event-rank-up::after { content: "▲"; display: inline-block; margin-left: .3em; color: #ffdc85; }
.ui-event-rank-down { color: #ff9c96; }
.ui-event-available:not(.ui-event-a):not(.ui-event-b) { animation: ui-event-breathe 1.8s ease-in-out infinite; }
.ui-event-low-hp:not(.ui-event-a):not(.ui-event-b) { animation: ui-event-heartbeat 1.3s ease-in-out infinite; }
.ui-event-low.ui-event-a { animation-name: ui-event-move-a; }
.ui-event-low.ui-event-b { animation-name: ui-event-move-b; }
.ui-event-low.ui-event-denied.ui-event-a { animation-name: ui-event-deny-move-a; }
.ui-event-low.ui-event-denied.ui-event-b { animation-name: ui-event-deny-move-b; }
.ui-event-static { animation: none !important; translate: none !important; scale: none !important; }
.ui-event-static.ui-event-a, .ui-event-static.ui-event-b,
.ui-event-static.ui-event-available { color: var(--ui-event-color) !important; outline: 1px solid var(--ui-event-color); outline-offset: 1px; }
.ui-event-static.ui-event-low-hp { color: #ff9393 !important; }
.ui-event-low.ui-event-available:not(.ui-event-a):not(.ui-event-b),
.ui-event-low.ui-event-low-hp:not(.ui-event-a):not(.ui-event-b) { animation-name: ui-event-breathe-move; }
.ui-event-rank-up.ui-event-a,.ui-event-rank-up.ui-event-b,
.ui-event-rank-down.ui-event-a,.ui-event-rank-down.ui-event-b { animation-name: ui-event-rank-color; }
.ui-event-low.ui-event-rank-up.ui-event-a,.ui-event-low.ui-event-rank-up.ui-event-b,
.ui-event-low.ui-event-rank-down.ui-event-a,.ui-event-low.ui-event-rank-down.ui-event-b { animation: none; }
.ui-event-flat { animation: none; color: var(--ui-event-color); }
.ui-event-glitch:not(.ui-event-low):not(.ui-event-static).ui-event-a { animation-name: ui-event-emp-a; animation-timing-function: steps(2,end); }
.ui-event-glitch:not(.ui-event-low):not(.ui-event-static).ui-event-b { animation-name: ui-event-emp-b; animation-timing-function: steps(2,end); }
.ui-event-level.ui-event-a { animation-name: ui-event-level-a; }
.ui-event-level.ui-event-b { animation-name: ui-event-level-b; }
.ui-event-low.ui-event-level.ui-event-a { animation-name: ui-event-move-a; }
.ui-event-low.ui-event-level.ui-event-b { animation-name: ui-event-move-b; }
.skill-hud.ui-event-motion { background-size: 100% 100%; }
.skill-hud.ui-event-motion::before { content: ""; position: absolute; inset: -3px; border-radius: inherit;
  padding: 2px; background: conic-gradient(#a9d7e8 var(--ui-skill-charge, 0%), transparent 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.skill-hud.ui-event-ready { box-shadow: inset 0 -2px 0 var(--ui-event-color); }
@keyframes ui-event-pop-a { 0% { scale: 1.12; translate: 0 -2px; color: var(--ui-event-color); text-shadow: 0 0 7px var(--ui-event-color); } 48% { scale: .98; translate: 0 1px; } 100% { scale: 1; translate: 0 0; } }
@keyframes ui-event-pop-b { 0% { scale: 1.12; translate: 0 -2px; color: var(--ui-event-color); text-shadow: 0 0 7px var(--ui-event-color); } 48% { scale: .98; translate: 0 1px; } 100% { scale: 1; translate: 0 0; } }
@keyframes ui-event-deny-a { 0%, 40% { translate: -3px 0; color: var(--ui-event-color); } 20%, 60% { translate: 3px 0; } 100% { translate: 0 0; } }
@keyframes ui-event-deny-b { 0%, 40% { translate: -3px 0; color: var(--ui-event-color); } 20%, 60% { translate: 3px 0; } 100% { translate: 0 0; } }
@keyframes ui-event-move-a { 0% { scale: 1.09; translate: 0 -2px; } 48% { scale: .99; translate: 0 1px; } 100% { scale: 1; translate: 0 0; } }
@keyframes ui-event-move-b { 0% { scale: 1.09; translate: 0 -2px; } 48% { scale: .99; translate: 0 1px; } 100% { scale: 1; translate: 0 0; } }
@keyframes ui-event-deny-move-a { 0%, 40% { translate: -3px 0; } 20%, 60% { translate: 3px 0; } 100% { translate: 0 0; } }
@keyframes ui-event-deny-move-b { 0%, 40% { translate: -3px 0; } 20%, 60% { translate: 3px 0; } 100% { translate: 0 0; } }
@keyframes ui-event-breathe { 0%,100% { scale: 1; color: inherit; } 50% { scale: 1.035; color: #b3efd0; } }
@keyframes ui-event-breathe-move { 0%,100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes ui-event-heartbeat { 0%,100%,36% { scale: 1; } 16% { scale: 1.045; color: #ff9a94; } 26% { scale: 1.015; } }
@keyframes ui-event-rank-color { 0%,50% { color: var(--ui-event-color); text-shadow: 0 0 6px var(--ui-event-color); } 100% { color: inherit; } }
@keyframes ui-event-emp-a { 0%,30% { translate: calc(var(--hud-kick-x,0px) + 1px) var(--hud-kick-y,0px); color: #9bceef; } 15%,45% { translate: calc(var(--hud-kick-x,0px) - 1px) var(--hud-kick-y,0px); } 100% { translate: var(--hud-kick-x,0px) var(--hud-kick-y,0px); } }
@keyframes ui-event-emp-b { 0%,30% { translate: calc(var(--hud-kick-x,0px) + 1px) var(--hud-kick-y,0px); color: #9bceef; } 15%,45% { translate: calc(var(--hud-kick-x,0px) - 1px) var(--hud-kick-y,0px); } 100% { translate: var(--hud-kick-x,0px) var(--hud-kick-y,0px); } }
@keyframes ui-event-level-a { 0% { rotate: x -30deg; scale: 1.16; color: var(--ui-event-color); } 50% { rotate: x 10deg; scale: .99; } 100% { rotate: x 0deg; scale: 1; } }
@keyframes ui-event-level-b { 0% { rotate: x -30deg; scale: 1.16; color: var(--ui-event-color); } 50% { rotate: x 10deg; scale: .99; } 100% { rotate: x 0deg; scale: 1; } }
@keyframes ui-event-feed-enter { 0% { opacity: .7; scale: 1.045; translate: 0 3px; } 45% { opacity: 1; scale: 1; translate: 0 0; } 100% { scale: 1; translate: 0 0; } }
@keyframes ui-event-feed-still { from { scale: 1.035; } to { scale: 1; } }
@keyframes ui-event-reward-gleam { from { translate: -80% 0; opacity: 0; } 20% { opacity: 1; } to { translate: 80% 0; opacity: 0; } }
/* The controller applies ui-event-static from the resolved game preference.
   This includes the OS preference while honoring an explicit user override. */

/* src/styles/action-feedback.css */
/* Local input response only. Confirm/deny colors belong to the shared UI bus. */
.machine-response-anchor { position: relative; }
.machine-action-sheen { position: absolute; inset: 1px; border-radius: inherit; overflow: hidden; pointer-events: none; }
.machine-action-sheen::before {
  content: ""; position: absolute; inset: 0; translate: -120% 0;
  background: linear-gradient(105deg, transparent 32%, rgb(207 244 248 / 14%) 49%, transparent 66%);
}
body:not(.machine-reduced-motion) .machine-hovering > .machine-action-sheen::before { animation: machine-button-sheen 360ms ease-out; }
@keyframes machine-button-sheen { to { translate: 120% 0; } }
:where(#startScreen,.menu-modal,.settings-modal,.profile-modal,.sound-test-modal,.confirm-modal,.onboarding-modal,.mobile-menu-drawer,.mobile-ship-drawer) button {
  transition: translate 120ms ease, scale 120ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
@media (hover: hover) {
  body:not(.machine-reduced-motion) :where(#startScreen,.menu-modal,.settings-modal,.profile-modal,.sound-test-modal,.confirm-modal,.onboarding-modal,.mobile-menu-drawer,.mobile-ship-drawer) button:not(:disabled):hover {
    translate: 0 -1px;
    box-shadow: inset 0 1px 0 rgb(215 248 252 / 22%), 0 3px 10px rgb(9 20 29 / 25%);
  }
}
body:not(.machine-reduced-motion) button.machine-pressed {
  translate: 0 1px;
  scale: .975;
}
body:not(.machine-reduced-motion) button.machine-released {
  animation: machine-button-release 230ms ease-out;
}
@keyframes machine-button-release {
  0% { scale: .975; translate: 0 1px; }
  45% { scale: 1.018; translate: 0 -1px; }
  100% { scale: 1; translate: 0 0; }
}
.machine-reduced-motion button.machine-pressed {
  border-color: #c1e6ea;
  box-shadow: inset 0 0 0 1px rgb(193 230 234 / 35%);
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) button.machine-pressed,
  :root:not([data-ui-motion="full"]) button.machine-released {
    animation: none !important;
    translate: none !important;
    scale: none !important;
  }
}

/* src/styles/round3-hud.css */
.scene-transition-hud{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.scene-transition-hud [hidden]{display:none!important}
.scene-spectator-card{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(360px,80vw);padding:8px 16px;border:1px solid #91acb866;border-left:3px solid #8fbcca;background:#0d171edb;color:#d8e4e5;font:600 12px/1.3 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.scene-spectator-signal{display:inline-block;width:5px;height:5px;margin-right:7px;background:#65867d;box-shadow:0 0 0 1px #bdd4c670;vertical-align:middle}
.scene-spectator-card[data-signal="true"] .scene-spectator-signal{background:#a8e5bc;box-shadow:0 0 7px #a8e5bc}
.scene-spectator-name{display:inline-block;max-width:27ch;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.scene-spectator-name[data-flip="0"]{animation:scene-spectator-flip-a 240ms ease-out both}
.scene-spectator-name[data-flip="1"]{animation:scene-spectator-flip-b 240ms ease-out both}
.scene-spectator-status{margin-left:8px;color:#ed9a91;font:700 9px/1 monospace;letter-spacing:.08em}
.scene-spectator-card[data-holding="true"]{border-left-color:#d58078;animation:scene-spectator-loss 280ms ease-out 1}
.scene-spectator-ruler{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#91d5be var(--spectator-next,0%),#445450 var(--spectator-next,0%))}
@keyframes scene-spectator-flip-a{from{transform:rotateX(-65deg);opacity:.4}to{transform:rotateX(0);opacity:1}}
@keyframes scene-spectator-flip-b{from{transform:rotateX(-65deg);opacity:.4}to{transform:rotateX(0);opacity:1}}
@keyframes scene-spectator-loss{50%{border-color:#ff8a82;background:#3a171bdd}to{border-left-color:#d58078}}
.scene-team-intro{--intro-progress:0;position:absolute;left:50%;top:26%;width:min(620px,88vw);display:flex;align-items:center;justify-content:center;gap:18px;transform:translateX(-50%);color:#ecf2ed;font:900 27px/1 system-ui;text-shadow:0 2px 5px #0008}
.scene-team-intro>span{display:flex;flex:1;flex-direction:column;gap:7px;padding:14px 23px;border:1px solid #adc6cd55;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.scene-team-intro small{font:600 12px/1.2 system-ui;color:#dae2e0}
.scene-team-blue{text-align:right;background:linear-gradient(90deg,#132b43df,#21405ded);border-right:3px solid #71abd7!important;transform:translateX(calc((var(--intro-progress) - 1)*140%))}
.scene-team-red{text-align:left;background:linear-gradient(90deg,#583036ed,#301b28df);border-left:3px solid #d78686!important;transform:translateX(calc((1 - var(--intro-progress))*140%))}
.scene-team-intro>strong{font-size:18px;letter-spacing:.08em;color:#d3ba83}
@media(max-width:600px){.scene-team-intro{top:21%;gap:10px;font-size:20px}.scene-team-intro>span{padding:11px 14px}.scene-spectator-card{bottom:14px;font-size:10px;padding:6px 12px}}
@media (max-height:520px) and (orientation:landscape){
  body.is-small-mobile .scene-team-intro{top:calc(env(safe-area-inset-top,0px) + 48px);width:min(430px,52vw);gap:5px;font-size:16px;line-height:1}
  body.is-small-mobile .scene-team-intro>span{min-height:40px;box-sizing:border-box;gap:1px;padding:5px 9px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
  body.is-small-mobile .scene-team-intro>strong{font-size:11px}
  body.is-small-mobile .scene-team-intro small{font-size:9px}
  body.is-small-mobile .scene-spectator-card{bottom:max(6px,env(safe-area-inset-bottom));max-width:min(230px,38vw);padding:4px 9px 6px;font-size:10px;line-height:1.15}
  body.is-small-mobile .scene-spectator-name{max-width:18ch}
  body.is-small-mobile .scene-spectator-status{font-size:8px;margin-left:4px}
}
:root[data-ui-motion="reduced"] .scene-spectator-name,
:root[data-ui-motion="reduced"] .scene-spectator-card,
.scene-spectator-card[data-static="true"],
.scene-spectator-card[data-static="true"] .scene-spectator-name{animation:none!important}

/* src/styles/round3-menu.css */
/* Round 3 menu feedback: all motion follows the resolved preference, including
   an explicit in-game override of the operating system's reduced-motion flag. */
.menu-server-feedback { position: relative; }
.menu-ping-bars { display: inline-flex; align-items: end; gap: 2px; height: 14px; margin-inline-start: 7px; vertical-align: middle; }
.menu-ping-bars i { display: block; width: 3px; height: 4px; background: #52626b; opacity: .45; }
.menu-ping-bars i:nth-child(2) { height: 7px; }
.menu-ping-bars i:nth-child(3) { height: 10px; }
.menu-ping-bars i:nth-child(4) { height: 13px; }
.menu-ping-bars i.lit { background: #a7d8a2; opacity: 1; }
.menu-ping-bars[hidden] { display: none; }
.menu-room-full { --menu-card-accent: #db8b78; }
.menu-connection { position: relative; padding-inline-start: 23px; }
.menu-connection::before { content: ""; position: absolute; left: 2px; top: .4em; width: 9px; height: 9px; border: 2px solid #b1d2df; border-radius: 50%; }
.menu-connection[data-menu-connection="connected"]::before { border-radius: 2px; border-color: #adf0a4; background: #789f774d; }
.menu-connection[data-menu-connection="failed"]::before { border-color: #ec8a78; border-radius: 1px; background: #d84f3a33; }
.menu-server-name { display: inline; margin-inline-start: .55em; color: #aac3cf; font: inherit; opacity: .8; }
.menu-news-unread { position: relative; }
.menu-news-dot { display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; border-radius: 50%; background: #b7f779; vertical-align: top; pointer-events: none; }
.menu-news-dot[hidden] { display: none; }
.menu-daily-available .platinum-icon { filter: drop-shadow(0 0 3px #d9f5ff90); }
.menu-feedback-card { position: relative; --menu-card-accent: var(--item-color, var(--skin-accent, #aac0cd)); }
.menu-feedback-card[data-menu-rarity="uncommon"] { --menu-card-accent: #a8d691; }
.menu-feedback-card[data-menu-rarity="rare"] { --menu-card-accent: #8bc8ff; }
.menu-feedback-card[data-menu-rarity="epic"] { --menu-card-accent: #c7a4ed; }
.menu-feedback-card[data-menu-rarity="legendary"] { --menu-card-accent: #e8c479; }
.menu-feedback-card::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--menu-card-accent), transparent 42%); border-radius: inherit; pointer-events: none; opacity: .5; }
.menu-xp-ring { --menu-xp-progress: 0; position: relative; display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; isolation: isolate; }
.menu-xp-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#afdcb9 calc(var(--menu-xp-progress) * 1turn), #38515d 0); z-index: -2; }
.menu-xp-ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #142530; z-index: -1; }
.shop-acquisition-stamp { position: absolute; inset: 8px 8px auto auto; z-index: 2; display: block; max-width: min(90%, 145px); padding: 4px 7px; overflow-wrap: anywhere; border: 1px solid #bdecd4; color: #cdf9df; background: rgba(9, 31, 21, .94); font: 800 clamp(9px, .8vw, 11px)/1.15 var(--arcology-font, ui-monospace, monospace); text-align: center; transform: rotate(-7deg); pointer-events: none; }
.shop-acquisition-stamp[data-long="true"] { font-size: 9px; letter-spacing: -.025em; }
.menu-kill-feed { position: fixed; top: var(--menu-feed-top, max(210px, calc(env(safe-area-inset-top, 0px) + 190px))); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 35; display: grid; gap: 4px; width: min(238px, 32vw); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.menu-kill-row { display: flex; align-items: center; justify-content: end; gap: 6px; min-width: 0; padding: 4px 7px; color: #d6e4e9; background: linear-gradient(90deg, #102530b8, #102530eb); border: 1px solid #506b70; border-inline-end: 2px solid #8aa7a2; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); font: 700 10px/1.25 var(--arcology-font, ui-monospace, monospace); letter-spacing: .025em; }
.menu-kill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42%; }
.menu-kill-own { color: #f0d29a; border-color: #927847; border-inline-end-color: #e2bd6c; background: linear-gradient(90deg, #302b1eb8, #302b1eeb); }
.menu-kill-arrow { font-size: 8px; color: #a6bec4; }
.menu-kill-ship { width: 17px; height: 11px; flex: 0 0 auto; background: currentColor; clip-path: polygon(0 32%, 23% 32%, 23% 5%, 67% 5%, 100% 50%, 67% 95%, 23% 95%, 23% 68%, 0 68%); opacity: .75; }
body:not(.is-playing) > .menu-kill-feed, body:is(.builder-panel-open, .upgrade-panel-open) > .menu-kill-feed, body:has(.hud.hidden) > .menu-kill-feed { display: none; }
:root[data-menu-motion="full"] .menu-ping-bars i { transition: opacity .2s, background-color .2s; }
:root[data-menu-motion="full"] .menu-connection[data-menu-connection="connecting"]::before { animation: menu-signal-wave 1.4s ease-out infinite; }
:root[data-menu-motion="full"] .menu-news-unread .menu-news-dot { animation: menu-dot-breathe 2.5s ease-in-out infinite; }
:root[data-menu-motion="full"] .menu-daily-available .platinum-icon { animation: menu-platinum-breathe 2.8s ease-in-out infinite; }
:root[data-menu-motion="full"] .menu-tab-entry:is(.ui-event-a, .ui-event-b) { animation: menu-tab-enter .24s ease-out both; }
:root[data-menu-motion="full"] .menu-server-feedback.selected:not(.ui-event-denied):is(.ui-event-a, .ui-event-b) { animation: menu-lock-sweep .36s ease-out; }
@media (hover: hover) and (pointer: fine) {
  :root[data-menu-motion="full"] .menu-feedback-card { transition: translate .18s ease-out; }
  :root[data-menu-motion="full"] .menu-feedback-card:hover { translate: 0 -2px; }
  :root[data-menu-motion="full"] .menu-feedback-card:hover::before { opacity: 1; }
  :root[data-menu-motion="full"] .menu-feedback-card:hover::after { animation: menu-card-sweep .7s ease-out; }
}
:root[data-menu-motion="full"] .menu-feedback-card:focus-within::after { animation: menu-card-sweep .7s ease-out; }
:root[data-menu-motion="full"] .menu-feedback-card:not([data-menu-rarity="common"])::after { animation: menu-rarity-breathe 3.6s ease-in-out infinite; animation-delay: var(--menu-card-phase, 0s); }
:root[data-menu-motion="full"] .menu-kill-row.menu-kill-enter { animation: menu-kill-shutter-in 140ms ease-out both; }
:root[data-menu-motion="full"] .menu-kill-row.menu-kill-exit { animation: menu-kill-shutter-out 140ms ease-in both; }
:root:not([data-menu-motion="full"]) :is(.menu-feedback-card, .menu-news-dot, .menu-daily-available .platinum-icon, .menu-tab-entry),
:root:not([data-menu-motion="full"]) :is(.menu-feedback-card, .menu-connection)::before,
:root:not([data-menu-motion="full"]) .menu-feedback-card::after { animation: none !important; transition: none !important; rotate: none; translate: none; }
@keyframes menu-signal-wave { 0%, 100% { box-shadow: 0 0 0 0 #b1d2df00; } 35% { box-shadow: 0 0 0 4px #b1d2df35; } 72% { box-shadow: 0 0 0 8px #b1d2df00; } }
@keyframes menu-dot-breathe { 50% { opacity: .5; scale: .8; } }
@keyframes menu-platinum-breathe { 50% { filter: drop-shadow(0 0 7px #d9f5ffae) brightness(1.16); } }
@keyframes menu-tab-enter { from { opacity: .55; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes menu-lock-sweep { 35% { box-shadow: inset 80px 0 38px -40px #bee6af45; } }
@keyframes menu-card-sweep { 35% { opacity: 1; box-shadow: inset 30px 0 24px -20px #e7f5ff65; } }
@keyframes menu-rarity-breathe { 50% { opacity: .85; } }
.menu-feedback-card::before { content: ""; position: absolute; inset: 3px 3px auto auto; width: 6px; height: 6px; background: var(--menu-card-accent); box-shadow: 0 0 5px var(--menu-card-accent); opacity: .25; pointer-events: none; transition: opacity 180ms; }
@keyframes menu-kill-shutter-in { from { opacity: 0; clip-path: inset(0 0 0 100%); translate: 10px 0; } to { opacity: 1; clip-path: inset(0); translate: 0 0; } }
@keyframes menu-kill-shutter-out { to { opacity: 0; clip-path: inset(0 100% 0 0); translate: 10px 0; } }
body.is-small-mobile .menu-kill-feed { width: min(170px, 42vw); gap: 3px; right: calc(env(safe-area-inset-right, 0px) + 8px); }
body.is-small-mobile .menu-kill-row { padding: 3px 5px; font-size: 8px; gap: 3px; }
body.is-small-mobile .menu-kill-row:nth-last-child(n + 3) { display: none; }
@media (max-width: 720px) { .menu-kill-feed { width: min(170px, 42vw); gap: 3px; } .menu-kill-row { font-size: 8px; padding: 3px 5px; gap: 3px; } }

/* src/styles/settings-feedback.css */
/* The preview owns a tiny isolated canvas; none of this moves the game camera. */
.settings-effect-preview { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 38px;
  gap: 7px 10px; margin: 10px 0 0; padding: 9px; border: 1px solid #526770; background: #14232c;
  border-radius: 3px; overflow: hidden; translate: var(--settings-preview-kick,0px) 0; }
.settings-effect-canvas { display: block; width: 100%; height: auto; aspect-ratio: 240 / 112; min-width: 0; }
.settings-effect-preview figcaption { grid-column: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; color: #aebfc7; font-size: 11px; line-height: 1.3; }
.settings-effect-preview figcaption strong { color: #d9e5e9; font-size: 10px; text-align: right; }
.settings-volume-meter { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; gap: 1px;
  border-left: 1px solid #31454f; padding-left: 6px; }
.settings-volume-meter i { flex: 0 0 2px; height: 50%; background: #334750; transform: scaleY(var(--settings-level,0.12)); transform-origin: center; }
.settings-volume-meter i.lit { background: #a2c9b5; }
.settings-modal:not(.hidden):not(.ui-surface-closing) .keybind-button.listening { animation: settings-key-wait 1.1s ease-in-out infinite; }
.settings-modal .keybind-button.settings-key-accepted { outline: 1px solid #a6d5b6; outline-offset: 2px; animation: settings-key-accept 420ms ease-out; }
@keyframes settings-key-wait { 50% { border-color: #b9e2ee; box-shadow: inset 0 0 10px #6da6ba40; } }
@keyframes settings-key-accept { 0% { scale: 1.09; background-color: #355949; } 60% { scale: .99; } 100% { scale: 1; } }
:root[data-ui-motion="reduced"] .settings-effect-preview { translate: none; }
:root[data-ui-motion="reduced"] .keybind-button { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ui-motion="full"]) .settings-effect-preview { translate: none; }
  :root:not([data-ui-motion="full"]) .keybind-button { animation: none !important; }
}

/* src/styles/match-chat.css */
.match-chat { --chat-right:18px; --chat-width:340px; position:fixed; inset:0; z-index:155; pointer-events:none; font:13px/1.35 system-ui,sans-serif; color:#edf5f2; }
.match-chat.hidden,.match-chat .hidden { display:none !important; }
.chat-tray { position:absolute; right:var(--chat-right); bottom:calc(56px + env(safe-area-inset-bottom,0px)); width:var(--chat-width); max-height:var(--chat-max-height,36vh); display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.chat-bubbles { display:flex; flex-direction:column; align-items:flex-end; gap:7px; width:100%; overflow:hidden; }
.chat-bubble { max-width:100%; width:fit-content; box-sizing:border-box; padding:8px 12px; border:1px solid #c0d8d024; border-radius:12px 12px 3px 12px; background:#0d191daf; box-shadow:0 2px 8px #0003; animation:chat-bubble-life 10s linear both; text-align:left; overflow-wrap:anywhere; }
.chat-bubble-heading { display:flex; gap:8px; align-items:baseline; margin-bottom:3px; font-size:10px; }
.chat-badge { color:#ead4a4; letter-spacing:.09em; font-size:9px; font-weight:700; }
[data-channel="team"] .chat-badge { color:#80d9bf; }
.chat-name { color:#e2eee7; font-weight:650; }
.chat-text { white-space:pre-wrap; }
.chat-toggle,.chat-write { min-height:30px; padding:5px 10px; color:#c9d8d2; border:1px solid #b8d3c834; border-radius:6px; background:#101b20b8; font:600 11px/1.2 system-ui,sans-serif; pointer-events:auto; cursor:pointer; clip-path:none; }
.chat-toggle { position:absolute; right:var(--chat-right); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:6px; }
.chat-write { opacity:.8; }
.match-chat:not(.chat-mobile) .chat-write { display:none; }
.chat-unread { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:1px 3px; border-radius:10px; background:#79b59c; color:#101916; font-size:9px; }
.chat-composer-layer { position:absolute; inset:0; pointer-events:auto; }
.chat-composer { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:min(550px,calc(100vw - 28px)); box-sizing:border-box; padding:9px 10px 7px; border:1px solid #98b9ac7d; border-radius:10px; background:#12201feb; box-shadow:0 8px 32px #0006,inset 0 1px #d9f6e216; color:#edf5f2; }
.chat-compose-row { display:flex; align-items:center; gap:8px; }
.chat-input { flex:1; min-width:0; width:0; height:35px; box-sizing:border-box; padding:7px 9px; border:0; border-bottom:1px solid #a6d0c049; border-radius:3px; background:#0711128a; color:#eff6f1; font:14px/1.3 system-ui,sans-serif; outline:none; }
.chat-input:focus { border-color:#8dccb0; }
.chat-input::placeholder { color:#829891; }
.chat-channels { display:flex; gap:1px; padding:2px; background:#07101070; border-radius:5px; }
.chat-channel,.chat-send { border:0; border-radius:4px; clip-path:none; min-height:31px; padding:6px 9px; color:#92a8a1; background:transparent; font:700 10px/1 system-ui,sans-serif; cursor:pointer; }
.chat-channel[aria-pressed="true"] { color:#c0e8d6; background:#63837347; }
.chat-channel[data-channel="all"][aria-pressed="true"] { color:#ead4a4; background:#a68a4240; }
.chat-send { background:#7aaf93; color:#0c2017; min-width:47px; }
.chat-hint { display:block; margin:6px 3px 0; font-size:9px; color:#7d9890; }
.chat-error { display:block; margin:5px 3px 0; font-size:11px; color:#edbb8a; }
.chat-speech-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.chat-core-bubble { position:absolute; left:0; top:0; max-width:220px; padding:6px 10px; box-sizing:border-box; border:1px solid #bdd6c83b; border-radius:10px; background:#101c24ba; color:#eff5ef; font:12px/1.3 system-ui,sans-serif; text-align:center; overflow-wrap:anywhere; box-shadow:0 2px 9px #0004; }
.chat-core-text { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.chat-core-bubble::after { content:""; position:absolute; bottom:-4px; left:calc(50% - 4px); width:7px; height:7px; transform:rotate(45deg); background:#101c24; }
.chat-core-bubble[data-channel="team"] { border-color:#87cdb859; }
.chat-layout-collapsed { visibility:hidden; }
.chat-mobile .chat-toggle { right:12px; bottom:auto; top:calc(var(--chat-toggle-top,57px) + env(safe-area-inset-top,0px)); min-height:30px; }
.chat-mobile .chat-tray { right:var(--chat-tray-right,12px); bottom:auto; top:calc(var(--chat-tray-top,96px) + env(safe-area-inset-top,0px)); max-height:var(--chat-max-height,35vh); }
.chat-mobile .chat-bubbles > :nth-last-child(n+3) { display:none; }
.chat-mobile .chat-bubble { padding:5px 9px; font-size:11px; }
.chat-mobile .chat-core-bubble { max-width:180px; max-height:68px; font-size:10px; padding:5px 8px; }
.chat-mobile .chat-composer { top:38%; }
@media(max-width:600px) { .chat-composer { padding:7px; } .chat-compose-row { gap:4px; } .chat-channel { padding:6px; font-size:9px; } .chat-input { font-size:16px; } .chat-send { min-width:40px; padding:6px; } }
@keyframes chat-bubble-life { 0% { opacity:0; transform:translateY(5px); } 3%,85% { opacity:1; transform:none; } 100% { opacity:0; transform:none; } }
@media(prefers-reduced-motion:reduce) { .chat-bubble { animation:none; } }