:root {
  --bg-void: #080c12;
  --bg-panel: #111922;
  --bg-panel-alt: #192631;
  --bg-inset: #0a1119;
  --line: #2b3946;
  --line-soft: #202c38;
  --outline: #060a10;

  --text-primary: #e3eaf0;
  --text-dim: #a7b5c3;
  --text-faint: #8193a5;

  --accent-ore: #cba77a;
  --accent-metal: #a8c1d6;
  --accent-credits: #d2bd87;
  --accent-signal: #8ac4d3;
  --accent-mint: #9fbdad;
  --accent-signal-dim: rgba(109, 164, 188, 0.12);
  --accent-warm: rgba(194, 159, 111, 0.12);
  --danger: #db8d83;

  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-nav: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 2px;

  --sticker-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  --sticker-shadow-sm: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

body {
  background-image: radial-gradient(ellipse at 65% 0%, rgba(46, 68, 88, 0.15), transparent 65%);
  background-attachment: fixed;
}



button {
  font-family: inherit;
  cursor: pointer;
}

.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* ============ SIDEBAR ============ */
.sidebar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 24px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}

.brand__mark {
  color: var(--accent-signal);
  font-size: 22px;
  line-height: 1;
}

.brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--text-dim);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-tab__icon { font-size: 15px; width: 18px; text-align: center; }

.nav-tab:hover {
  background: var(--bg-panel-alt);
  color: var(--text-primary);
}

.nav-tab.is-active {
  background: var(--accent-signal-dim);
  border-color: rgba(70, 201, 189, 0.35);
  color: var(--accent-signal);
}

.sidebar__footer {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-badge {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
}

.level-badge__label {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

.level-badge__value {
  font-size: 18px;
  color: var(--accent-signal);
  font-weight: 600;
}

.save-controls {
  display: flex;
  gap: 6px;
}

.btn-ghost {
  flex: 1;
  background: var(--bg-inset);
  border: 2px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 7px 4px;
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn-ghost:active { transform: scale(0.96); }
.btn-ghost:hover { border-color: var(--accent-signal); color: var(--accent-signal); }
.btn-ghost--danger:hover { border-color: var(--danger); color: var(--danger); }

/* ============ MAIN ============ */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Resource ticker */
.ticker {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
}

.ticker__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.ticker__label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ticker__value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
}

.ticker[data-resource] { color: inherit; }
.ticker__item[data-resource="ore"] .ticker__value { color: var(--accent-ore); }
.ticker__item[data-resource="metal"] .ticker__value { color: var(--accent-metal); }
.ticker__item[data-resource="credits"] .ticker__value { color: var(--accent-credits); }

.ticker__rate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.ticker__divider {
  width: 1px;
  height: 34px;
  background: var(--line);
}

.ticker__xp {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 220px;
}

.ticker__xp-heading {
  display: flex;
  justify-content: flex-end;
}

.ticker__level-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--accent-signal-dim);
  border: 2px solid rgba(95, 224, 200, 0.4);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-signal);
}

.ticker__level-chip-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
}

.ticker__xp-track {
  height: 5px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ticker__xp-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-signal);
  transition: width 0.2s ease;
}

.ticker__xp-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
}

/* Tab panels */
.tab-panel {
  display: none;
  padding: 26px 28px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.tab-panel.is-active { display: flex; flex-direction: column; }

.panel-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 4px;
}

.panel-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 20px;
}

.panel-subhead {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 4px;
}

/* System Map layout */
.system-map {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.canvas-frame {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #3c327a 0%, #241f57 72%);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow), 0 0 50px rgba(255, 190, 130, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

#system-canvas {
  display: block;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.canvas-frame__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.inspector {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.inspector__empty {
  margin: auto 0;
  text-align: center;
}

@keyframes pop-in {
  0%   { transform: scale(0.9); opacity: 0.6; }
  55%  { transform: scale(1.035); opacity: 1; }
  80%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

.inspector__body.pop-in {
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inspector__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-signal);
  letter-spacing: 0.09em;
  margin: 0 0 6px;
}

.inspector__msg {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.inspector__name {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 16px;
}

.telemetry {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.telemetry__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-soft);
  font-family: var(--font-mono);
}

.telemetry__row dt {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.telemetry__row dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-primary);
}

.inspector__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.btn-primary, .btn-secondary {
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-primary {
  background: var(--accent-signal);
  color: #123832;
  box-shadow: var(--sticker-shadow-sm);
}

.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-primary:disabled { background: var(--bg-inset); color: var(--text-faint); cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: var(--bg-inset);
  border-color: var(--line);
  color: var(--text-dim);
}

.btn-secondary:hover { border-color: var(--accent-signal); color: var(--accent-signal); }
.btn-secondary:active { transform: translateY(1px); }

/* Advanced resources readout */
.resource-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.resource-chip {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--sticker-shadow-sm);
  padding: 8px 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.resource-chip__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--text-dim);
}

.resource-chip__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.resource-chip__rate {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.resource-chip--exotic {
  border-color: rgba(224, 98, 154, 0.5);
  background: linear-gradient(135deg, rgba(224, 98, 154, 0.14), rgba(255, 216, 115, 0.08));
}

.resource-chip--exotic .resource-chip__label { color: #e0629a; }

/* Refinery */
.refinery-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  max-width: 420px;
}

.refinery-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0;
}

.refinery-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.refinery-card__cost {
  font-weight: 700;
  color: var(--accent-credits) !important;
}

/* Market grid */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.market-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.market-card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
}

.market-card p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.market-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.market-card__actions .btn-secondary,
.market-card__actions .btn-primary {
  flex: 1;
  padding: 8px 10px;
  font-size: 11.5px;
  white-space: nowrap;
}

.market-card__price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
}

.market-card__price--up { color: var(--accent-mint, #8cf5c0); }
.market-card__price--down { color: var(--danger); }

/* Upgrades grid, grouped into tech-tree branches */
.upgrade-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tech-branch__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-signal);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.upgrade-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.upgrade-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upgrade-card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
}

.upgrade-card p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.upgrade-card__cost {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-credits);
}

.upgrade-card__level {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}

/* Fleet */
.fleet-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.fleet-summary strong { color: var(--text-primary); }

.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.blueprint-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blueprint-card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
}

.blueprint-card p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.blueprint-card__cost {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-credits) !important;
}

.stance-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  max-width: 480px;
}

.stance-row {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-shadow-sm);
  padding: 10px 14px;
}

.stance-row__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  flex: 1;
}

.stance-row .btn-secondary {
  padding: 6px 10px;
  font-size: 11px;
}

.fleet-roster {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fleet-row {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-shadow-sm);
  padding: 10px 14px;
  font-size: 12.5px;
}

.fleet-row__station {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 11px;
}

/* Events */
.event-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-row {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-left: 5px solid var(--accent-signal);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-shadow-sm);
  padding: 12px 14px;
  font-size: 12.5px;
}

.event-row--faded { border-left-color: var(--text-faint); opacity: 0.6; }

.event-row__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  display: block;
  margin-bottom: 4px;
}

/* Evolution / skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.skill-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2px solid var(--line);
  box-shadow: var(--sticker-shadow-sm);
}

.skill-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0;
}

.skill-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.skill-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin: 0;
}

.skill-card--locked {
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.85;
}

.skill-card--locked .skill-card__eyebrow { color: var(--text-faint); }
.skill-card--locked h3 { color: var(--text-dim); }

.skill-card--probing {
  background: var(--bg-panel);
}

.skill-card--probing .skill-card__eyebrow { color: var(--accent-credits); }

.skill-card__progress {
  height: 8px;
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 4px;
}

.skill-card__progress-fill {
  height: 100%;
  background: var(--accent-credits);
  transition: width 0.2s ease;
}

.skill-card--unlocked {
  background: linear-gradient(135deg, rgba(95, 224, 200, 0.14), rgba(255, 216, 115, 0.1));
  border-color: rgba(95, 224, 200, 0.5);
}

.skill-card--unlocked .skill-card__eyebrow { color: var(--accent-signal); }
.skill-card--unlocked p { color: var(--text-primary); }

/* Aurum ticker chip */
.ticker__item--aurum .ticker__value { color: #ffd873; }
.ticker__item--aurum .ticker__rate { color: #e0629a; font-style: italic; }

/* Store tab */
.boost-card,
.pass-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  max-width: 480px;
}

.boost-card h3,
.pass-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0;
}

.boost-card p,
.pass-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.boost-card__progress {
  height: 10px;
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.boost-card__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-signal), #ffd873);
  transition: width 0.1s linear;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.theme-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sticker-shadow-sm);
  padding: 40px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.theme-card h3 {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.theme-card--active {
  border-color: var(--accent-signal);
  box-shadow: 0 0 0 2px rgba(95, 217, 204, 0.4), var(--sticker-shadow-sm);
}

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; overflow-x: auto; }
  .system-map { grid-template-columns: 1fr; }
}

/* Operator expansion: persistent controls, legible milestones and settings. */
.mode-chip { color: var(--accent-signal); font-size: 10px; font-weight: 800; max-width: 150px; overflow-wrap: anywhere; }
.account-form { display: grid; gap: 10px; max-width: 480px; }
.account-form input { background: var(--bg-void); color: var(--text-primary); font: inherit; padding: 10px; border: 2px solid var(--line); border-radius: 8px; min-width: 0; width: 100%; }
.account-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.online-overview, .raid-card { margin-bottom: 24px; }
.leaderboard-scroll { overflow-x: auto; margin-bottom: 24px; }
.leaderboard { border-collapse: collapse; width: 100%; font-size: 13px; }
.leaderboard th, .leaderboard td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.leaderboard .is-me { background: var(--accent-signal-dim); color: var(--accent-signal); }
#multiplayer-login[hidden], #multiplayer-world[hidden] { display: none; }
#multiplayer-status { color: var(--accent-signal); line-height: 1.6; }
.command-grid.stock-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.exchange-summary { padding: 18px; border: 2px solid var(--accent-signal); border-radius: var(--radius); line-height: 1.9; font-weight: 700; }
.exchange-note { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.stock-card h2 { font-family: var(--font-display); font-size: 20px; margin: 0; }
.stock-card .stock-price { font-size: 28px; color: var(--text-primary); font-weight: 800; margin: 10px 0 0; }
.stock-card .stock-change { font-size: 12px; margin: 0 0 12px; }
.stock-card .is-up { color: var(--accent-signal); }
.stock-card .is-down { color: var(--danger); }
.stock-chart { width: 100%; height: 110px; color: var(--accent-signal); background: var(--bg-inset); border-radius: 8px; }
.stock-card .stock-range { font-size: 11px; }
.stock-card input { display: block; width: 100%; margin-top: 8px; background: var(--bg-void); color: var(--text-primary); border: 2px solid var(--line); padding: 10px; border-radius: 8px; font: inherit; }
.stock-card .stock-quote { font-size: 12px; min-height: 3.2em; }
.stock-actions { display: flex; gap: 12px; }
.stock-actions button { flex: 1; }
.stock-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
.stock-trades p { padding: 12px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.large-text .exchange-note, .large-text .stock-card p, .large-text .stock-trades p { font-size: 16px; }
.large-text .stock-card .stock-price { font-size: 32px; }
.command-eyebrow { color: var(--accent-signal); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.command-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.command-links a { color: var(--accent-signal); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 14px; margin: 12px 0 28px; }
.command-card { background: var(--bg-panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.command-card h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 12px; }
.command-card p, .command-card li { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.command-card p:first-child { margin-top: 0; }
.achievement-card.is-earned { border-color: var(--accent-signal); }
.achievement-card.is-earned p { color: var(--accent-signal); }
.achievement-card progress { width: 100%; height: 10px; accent-color: var(--accent-signal); }
.hazard-card { border-color: var(--danger); }
.ascension-card, .settings-card, .dispatch-card { margin: 12px 0 28px; }
.settings-card > label { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-signal); }
.hotkey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.hotkey-grid label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hotkey-grid input { width: 46px; text-align: center; }
input[type="text"], select { background: var(--bg-void); color: var(--text-primary); border: 2px solid var(--line); border-radius: 8px; padding: 9px; font: inherit; }
#body-selector { width: 100%; margin: 8px 0 20px; }
#dispatch-badge { font-size: 9px; color: var(--accent-credits); }
#dispatch-badge[hidden] { display: none; }
.operation-status:empty { display: none; }
.operation-status { margin: 0; padding: 12px 28px; color: var(--accent-signal); font-size: 13px; }
dialog { background: var(--bg-void); color: var(--text-primary); border: 2px solid var(--accent-signal); border-radius: var(--radius); max-width: min(540px, 90vw); padding: 28px; line-height: 1.6; }
dialog::backdrop { background: rgba(10, 8, 30, 0.8); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
:focus-visible { outline: 3px solid var(--accent-credits); outline-offset: 4px; }
.high-contrast { --bg-void: #120c29; --bg-panel: #221a40; --text-primary: #fff; --text-dim: #eee8ff; --text-faint: #d6cef0; --line: #b4a9d0; --line-soft: #8c80aa; }
.large-text .panel-subtitle, .large-text .command-card p, .large-text .command-card li,
.large-text .nav-tab, .large-text .btn-primary, .large-text .btn-secondary,
.large-text .upgrade-card p, .large-text .market-card p, .large-text .refinery-card p,
.large-text .blueprint-card p, .large-text .skill-card p, .large-text .event-row,
.large-text .telemetry dt, .large-text .telemetry dd, .large-text .ticker__label,
.large-text .ticker__rate, .large-text .ticker__xp-label, .large-text .inspector__msg { font-size: 16px; }
.large-text .ticker__value { font-size: 24px; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1100px) {
  .ticker { flex-wrap: wrap; gap: 12px; }
  .ticker__xp { margin-left: 0; }
}
@media (max-width: 880px) {
  .sidebar { flex-wrap: wrap; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar__footer { flex: 1; }
  .tab-panel { padding: 20px 16px; }
}

/* Industrial command interface: restrained color, compact controls, fine borders. */
body { font-size: 14px; }
.app { grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 26px 12px 18px; background: #0b1119; }
.sidebar, .ticker, .inspector, .resource-chip, .refinery-card, .market-card,
.upgrade-card, .blueprint-card, .stance-row, .fleet-row, .event-row,
.skill-card, .boost-card, .pass-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand__mark { font-size: 33px; color: #b9d2df; }
.brand__text { letter-spacing: 0.17em; font-weight: 500; font-size: 12px; line-height: 1.65; }
.sidebar__nav { gap: 3px; }
.nav-tab { border-width: 1px; border-left: 2px solid transparent; padding: 12px 10px; font-size: 12px; font-weight: 500; border-radius: 0; }
.nav-tab__icon { font: 10px var(--font-mono); color: var(--text-faint); }
.nav-tab.is-active { border-color: transparent; border-left-color: var(--accent-signal); background: linear-gradient(90deg, rgba(107,165,186,0.16), transparent); color: #dce9f1; }
.nav-tab.is-active .nav-tab__icon { color: var(--accent-signal); }
.sidebar__footer { margin-top: 36px; }
.ticker { position: sticky; top: 0; z-index: 3; gap: 16px; padding: 18px 26px; background: #0d141d; flex-wrap: wrap; }
.ticker__item { min-width: 102px; }
.ticker__label { font: 9px var(--font-mono); letter-spacing: 0.08em; }
.ticker__value { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ticker__rate { font-size: 10px; }
.ticker__xp { width: 160px; }
.ticker__level-chip { background: transparent; border: 0; padding: 0; font: 11px var(--font-mono); }
.ticker__xp-track { height: 3px; }
.ticker__item--aurum .ticker__value { color: #c9b88f; }
.ticker__item--aurum .ticker__rate { color: var(--text-faint); font-style: normal; }
.mode-chip { font: 9px var(--font-mono); letter-spacing: 0.08em; flex-basis: 100%; max-width: none; }
.tab-panel { padding: 28px; }
.panel-title { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; margin-bottom: 10px; }
.panel-subtitle { line-height: 1.7; max-width: 960px; }
.panel-subhead { margin: 24px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.command-eyebrow { font: 9px var(--font-mono); letter-spacing: 0.16em; margin: 0 0 12px; }
.sector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.detail-switch { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 10px var(--font-mono); color: var(--text-dim); padding: 8px 10px; border: 1px solid var(--line); }
.detail-switch input { width: 14px; height: 14px; }
.system-map { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.canvas-frame { max-width: none; background: #080d15; border-width: 1px; box-shadow: none; }
#system-canvas { touch-action: none; cursor: grab; }
.map-overlay { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; font: 9px var(--font-mono); letter-spacing: 0.1em; color: #8d9eb0; }
.map-controls { position: absolute; bottom: 38px; right: 16px; display: flex; gap: 4px; }
.map-controls button { border: 1px solid #334454; background: #101923; color: #bbccd8; min-width: 30px; min-height: 30px; font: 10px var(--font-mono); }
.map-controls button:hover { border-color: var(--accent-signal); color: white; }
.canvas-frame__hint { left: 16px; bottom: 12px; transform: none; font-size: 9px; letter-spacing: 0; }
.inspector { border-width: 1px; padding: 18px; min-height: 330px; background: #101720; }
.inspector > label { font: 10px var(--font-mono); color: var(--text-dim); }
.inspector__empty { text-align: left; }
.inspector__name { font-size: 22px; font-weight: 500; }
.telemetry__row { flex-wrap: wrap; gap: 8px; border-bottom-style: solid; padding-bottom: 12px; }
.telemetry__row dt { font-size: 9px; }
.telemetry__row dd { font-size: 11px; line-height: 1.6; }
.inspector__body.pop-in { animation: telemetry-in 0.18s ease-out; }
@keyframes telemetry-in { from { opacity: 0; } to { opacity: 1; } }
.btn-primary, .btn-secondary, .btn-ghost { border-width: 1px; font-weight: 500; font-size: 12px; transition: background 0.15s, border-color 0.15s; }
.btn-primary { background: #234e5c; border-color: #3c7181; color: #d7e8ef; box-shadow: none; }
.btn-primary:hover { background: #2c5d6e; filter: none; }
.btn-secondary, .btn-ghost { background: #141f2b; color: #b9c6d1; }
.btn-ghost { font-size: 9px; }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active { transform: none; }
.command-card, .refinery-card, .market-card, .upgrade-card, .blueprint-card, .skill-card,
.resource-chip, .stance-row, .fleet-row, .theme-card, .boost-card, .pass-card { border-width: 1px; }
.command-card h2 { font-size: 18px; font-weight: 500; }
.command-card h3, .upgrade-card h3, .blueprint-card h3, .market-card h3 { font-size: 14px; font-weight: 500; }
.command-card p, .command-card li { font-size: 13px; line-height: 1.7; }
.achievement-card.is-earned { border-color: #385d65; }
.achievement-card progress { height: 5px; }
.resource-chip--exotic { border-color: #4b596d; background: #151d29; }
.resource-chip--exotic .resource-chip__label { color: #afbcd2; }
.skill-card--unlocked { border-color: #3a6069; background: #14252e; }
.theme-card--active { box-shadow: none; }
.command-links a { font: 11px var(--font-mono); text-decoration: none; padding: 9px 14px; }
.exchange-summary { border-width: 1px; border-color: #365361; background: #101b25; font: 12px/1.9 var(--font-mono); }
.stock-card .stock-price { font: 500 28px var(--font-mono); }
.stock-chart { border-radius: 0; }
.event-row { border-width: 1px; border-left-width: 2px; }
.event-row p { line-height: 1.6; }
input[type="text"], input[type="password"], input[type="number"], select,
.stock-card input, .account-form input { border-width: 1px; border-radius: 2px; font: 12px var(--font-body); }
input[type="checkbox"] { accent-color: #76aab9; }
dialog { border-width: 1px; background: #101720; }
.operation-status { background: #0d151e; border-top: 1px solid var(--line-soft); font: 11px/1.7 var(--font-mono); }
.high-contrast { --bg-void: #03070b; --bg-panel: #0b141e; --text-primary: #ffffff; --text-dim: #d4e0ea; --text-faint: #aec3d5; --line: #6a8295; --line-soft: #445968; }
.high-contrast .canvas-frame__hint, .high-contrast .map-overlay { color: #d4e0ea; }
.low-detail { --sticker-shadow: none; --sticker-shadow-sm: none; }
.low-detail body { background-image: none; }
.low-detail *, .low-detail *::before, .low-detail *::after { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; transition: none !important; }
@media (max-width: 1150px) { .system-map { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 880px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; padding: 14px; display: block; }
  .sidebar__brand { padding: 0 0 12px; margin-bottom: 10px; }
  .brand__text br { display: none; }
  .brand__text { font-size: 11px; }
  .sidebar__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .nav-tab { padding: 9px 6px; gap: 6px; font-size: 10px; height: 100%; }
  .nav-tab__icon { display: none; }
  .sidebar__footer { margin-top: 12px; padding-top: 12px; flex-direction: row; align-items: center; gap: 16px; }
  .level-badge { gap: 10px; }
  .level-badge__value { font-size: 14px; }
  .level-badge__label { font-size: 8px; }
  .save-controls { flex: 1; }
  .ticker { position: static; padding: 16px; gap: 14px; }
  .ticker__item { min-width: 90px; flex: 1; }
  .ticker__divider { display: none; }
  .ticker__xp { width: 130px; flex: 1; }
  .tab-panel { padding: 22px 14px; }
  .system-map { grid-template-columns: minmax(0, 1fr); }
  .sector-heading { flex-wrap: wrap; gap: 0; margin-bottom: 16px; }
  .sector-heading .panel-subtitle { margin-bottom: 12px; }
  .map-overlay { top: 12px; left: 12px; right: 12px; font-size: 8px; }
  .map-controls { bottom: 32px; right: 10px; }
  .canvas-frame__hint { font-size: 8px; left: 10px; }
  .inspector { min-height: 0; }
  .large-text .nav-tab { font-size: 13px; }
}

/* System / regional navigation shares the tactical panel. */
#system-view[hidden], #sector-view[hidden] { display: none; }
.map-switch { display: flex; gap: 8px; margin: 0 0 16px; }
.map-switch button, .sector-grid button { border: 1px solid var(--border, #2b3b49); background: #101b28; color: #b9cad8; padding: 12px; border-radius: 4px; cursor: pointer; }
.map-switch button[aria-pressed="true"], .sector-grid button[aria-pressed="true"] { border-color: #8dcedd; background: #21394a; color: #e0f7ff; }
.sector-chart { padding: 20px; border: 1px solid var(--border, #2b3b49); background: #090f19; min-width: 0; }
.sector-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.sector-grid button { min-height: 90px; white-space: pre-line; font: 12px 'IBM Plex Mono', monospace; line-height: 1.8; padding: 5px; }
#sector-operators { overflow-wrap: anywhere; }
@media (max-width: 550px) { .sector-chart { padding: 10px; } .sector-grid { gap: 4px; } .sector-grid button { font-size: 10px; min-height: 65px; } }


.planetfall { display: flex; align-items: center; gap: 28px; padding: 28px; margin-bottom: 20px; border: 1px solid #2b3b49; background: #0d1723; }
.home-planet { flex: 0 0 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #d8b99a, #896850 42%, #291f1c 72%, #090e17); box-shadow: 0 0 30px #b4854820; }
.planetfall.is-established .home-planet { flex-basis: 64px; height: 64px; }
#mine-planet { min-height: 64px; min-width: 180px; touch-action: manipulation; font-size: 18px; }
.unlock-hint { display: block; color: #a8b9ca; font-size: 10px; line-height: 1.4; margin-top: 5px; }
.nav-tab:has(.unlock-hint:not(:empty)) { flex-wrap: wrap; }
.nav-tab .unlock-hint { width: 100%; text-align: left; }
.nav-tab[aria-disabled="true"] { opacity: .65; }
.map-switch[hidden], #planet-project[hidden], table[hidden], #raid-form[hidden] { display: none; }
@media (max-width: 650px) { .planetfall { flex-direction: column; padding: 18px; } .home-planet { flex-basis: auto; width: 120px; height: 120px; } .planetfall.is-established .home-planet { display: none; } }
.unlock-hint:empty { display: none; }
.premium-category { grid-column: 1 / -1; margin: 12px 0 0; color: #b6dce7; }
.billing-interval { grid-column: 1 / -1; display: flex; gap: 8px; }
.billing-interval button { min-height: 44px; padding: 10px 24px; }
.billing-interval button[aria-pressed="true"] { background: #31465a; border-color: #b4c8da; color: #fff; }
.premium-bundle { border-color: #547286; }
.store-terms { margin: 18px 0 28px; color: #afbecb; }
.store-terms summary, .premium-card summary { cursor: pointer; padding: 8px 0; }
#premium-products { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.premium-card { grid-column: span 2; }
.premium-membership { grid-column: span 3; }
@media (max-width: 1100px) { #premium-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .premium-card { grid-column: span 1; } }
@media (max-width: 650px) { #premium-products { grid-template-columns: minmax(0, 1fr); } }
.premium-card { min-width: 0; padding: 24px; border: 1px solid #2b3b49; background: linear-gradient(160deg, #182330, #0b111b 70%); display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.premium-card h3 { margin: 8px 0; font-size: 23px; color: #f4f5f6; }
.premium-art { height: 165px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 80%, #ffffff0c, transparent 65%); }
.premium-art svg { width: 100%; height: 165px; }
.premium-price { color: #fff; font-size: 29px; margin: 6px 0 18px; }
.premium-price span { font-size: 12px; color: #a5b8c9; }
.premium-card button { margin-top: auto; width: 100%; min-height: 46px; }
.premium-card details { text-align: left; color: #acbdcc; font-size: 12px; margin-bottom: 18px; }
.premium-card p { line-height: 1.6; }
.premium-tagline { color: #a5b8c9; margin-top: 0; }
.premium-benefits { padding-left: 20px; text-align: left; line-height: 1.8; margin-bottom: 24px; }
.premium-universus { border-color: #91a8c1; background: linear-gradient(155deg, #26394c, #0c131e 70%); }
.pass-emblem { width: 90px; height: 90px; border-radius: 50%; border: 1px solid #e9eff5; position: relative; }
.solar-emblem { background: radial-gradient(circle, #fff 5%, #becbda 25%, #394859 55%, #101823 65%); box-shadow: 0 0 25px #ffffff18; }
.universus-emblem { background: radial-gradient(circle, #fff 3%, #d8e4ef 6%, transparent 9%), radial-gradient(ellipse, #536b83, #101823 65%); }
.universus-emblem::before, .universus-emblem::after { content: ''; position: absolute; inset: 16px -22px; border: 2px solid #dce7f3; border-radius: 50%; transform: rotate(-35deg); }
.universus-emblem::after { transform: rotate(35deg); }
.bundle-theme { display: block; border: 1px solid #40596b; padding: 16px; margin: 10px 0; color: #d7eaf0; }

.account-gateway { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; background: #0c1020; padding: 24px; }
.account-gateway[hidden] { display: none; }
.gateway-card { max-width: 540px; margin: 3vh auto; }
.remember-label { display: flex; align-items: center; gap: 12px; }
.account-form .remember-label input { width: auto; }


/* Studio ident and separate loading sequence. */
.studio-intro { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:#eef7ff; background:radial-gradient(ellipse at 50% 60%, #202641, #090d18 70%); overflow:hidden; }
.studio-intro::backdrop { background:#090d18; }
.studio-ident, .intro-loading { position:absolute; top:30%; width:100%; text-align:center; transition:opacity .6s ease, transform .6s ease; }
.studio-ident[hidden], .intro-loading[hidden] { display:none; }
.studio-present { font:11px var(--font-body,sans-serif); letter-spacing:.3em; color:#91a8bb; padding:0 20px; }
#studio-name { margin:18px 20px 0; font:700 clamp(40px,8vw,88px)/1.1 var(--font-body,sans-serif); letter-spacing:-.04em; animation:studio-reveal 1.3s ease both; }
#studio-name span { display:block; margin-top:14px; font-size:.3em; font-weight:400; letter-spacing:.4em; text-transform:uppercase; animation:studio-reveal 1.4s .3s ease both; }
.studio-ident.is-leaving, .intro-loading.is-leaving { opacity:0; transform:translateY(-12px); }
.robot-track { position:relative; margin-top:38px; height:132px; width:100%; }
.robot-ground { position:absolute; bottom:8px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#749ba9,transparent); }
.studio-robot { position:absolute; left:-110px; bottom:12px; width:90px; height:100px; animation:robot-cross 4.6s .2s linear both; }
.robot-upper { position:absolute; width:90px; height:70px; animation:robot-bounce .16s ease-in-out infinite alternate; }
.robot-head { position:absolute; top:7px; left:18px; width:61px; height:42px; background:linear-gradient(135deg,#fff0c4 0%,#e6b15e 45%,#ae7742 46%,#e0a758 100%); clip-path:polygon(0 15%,70% 0,100% 28%,92% 90%,20% 100%,0 76%); }
.robot-head::before { content:''; position:absolute; top:13px; left:13px; width:43px; height:17px; background:#142631; clip-path:polygon(0 0,100% 12%,88% 100%,9% 85%); }
.robot-head i { position:absolute; top:18px; left:34px; width:18px; height:5px; background:#9dffed; transform:skewX(-16deg); }
.robot-antenna { position:absolute; left:9px; top:16px; width:13px; height:27px; background:#7d98a9; clip-path:polygon(0 0,100% 25%,100% 100%,0 70%); }
.robot-body { position:absolute; top:47px; left:27px; width:40px; height:28px; background:#7b96a8; clip-path:polygon(8% 0,100% 10%,83% 100%,0 80%); }
.robot-body b { display:block; width:12px; height:12px; background:#a1ffe6; margin:6px 0 0 14px; transform:rotate(45deg); border:3px solid #243848; }
.robot-arm { position:absolute; top:48px; left:40px; width:12px; height:31px; background:#dba75d; border:3px solid #755c40; border-radius:2px; transform-origin:50% 5px; animation:robot-stride .23s ease-in-out infinite alternate; }
.robot-leg { position:absolute; top:70px; left:39px; width:13px; height:27px; background:linear-gradient(#b6c8d5 45%,#344957 45%,#344957 60%,#b6c8d5 60%); border-radius:2px; transform-origin:50% 3px; animation:robot-stride .23s ease-in-out infinite alternate; }
.robot-leg::after { content:''; position:absolute; bottom:-3px; left:-3px; width:27px; height:11px; background:#e7b96d; clip-path:polygon(0 0,75% 0,100% 65%,100% 100%,0 100%); }
.robot-leg--back, .robot-arm--front { animation-direction:alternate-reverse; }
.intro-loading { animation:studio-reveal .6s ease both; }
#loading-title { font:500 clamp(24px,5vw,48px)/1.2 var(--font-body,sans-serif); letter-spacing:.16em; margin:20px; }
#intro-loading-message { color:#cadde9; font:14px var(--font-body,sans-serif); padding:0 20px; transition:opacity .18s ease,transform .18s ease; }
#intro-loading-message.is-changing { opacity:0; transform:translateY(5px); }
.intro-loader { width:72px; height:72px; position:relative; margin:36px auto; border:1px solid #364758; border-radius:50%; }
.intro-loader i { position:absolute; inset:8px; border:2px solid transparent; border-top-color:#a1ffe6; border-bottom-color:#e7b96d; border-radius:50%; animation:loader-orbit 1.6s linear infinite; }
.intro-loader i + i { inset:24px; background:#a1ffe6; border:0; border-radius:3px; animation-direction:reverse; }
.account-gateway [aria-pressed=true] { background:#294d5d; color:#fff; border-color:#a1ffe6; box-shadow:inset 0 -2px #a1ffe6; }
@keyframes studio-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes robot-cross { to { transform:translateX(calc(100vw + 220px)); } }
@keyframes robot-stride { from { transform:rotate(-46deg); } to { transform:rotate(46deg); } }
@keyframes robot-bounce { to { transform:translateY(-5px) rotate(3deg); } }
@keyframes loader-orbit { to { transform:rotate(360deg); } }
.studio-intro--quiet .studio-robot { left:calc(50% - 45px); }
.studio-intro--quiet *, .studio-intro--quiet #studio-name, .studio-intro--quiet #studio-name span { animation:none !important; transition:none !important; }
.studio-intro--quiet .is-changing { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce) { .studio-robot { left:calc(50% - 45px); } .studio-intro * { animation:none !important; transition:none !important; } }
@media (max-height:500px) { .studio-ident,.intro-loading { top:10%; } .robot-track { margin-top:10px; } }

.intro-progress-wrap { width:min(320px,calc(100% - 48px)); margin:28px auto 0; }
.intro-progress-label { display:flex; justify-content:space-between; margin-bottom:10px; color:#9eb6c7; font:12px var(--font-body,sans-serif); }
#intro-percentage { color:#d9fff4; font-variant-numeric:tabular-nums; }
#intro-progress { display:block; appearance:none; width:100%; height:8px; border:0; border-radius:4px; overflow:hidden; background:#263444; accent-color:#a1ffe6; }
#intro-progress::-webkit-progress-bar { background:#263444; border-radius:4px; }
#intro-progress::-webkit-progress-value { background:linear-gradient(90deg,#658fab,#a1ffe6); border-radius:4px; }
#intro-progress::-moz-progress-bar { background:linear-gradient(90deg,#658fab,#a1ffe6); border-radius:4px; }
/* Station hardpoints retain the same layout in low-detail mode. */
.station-panel { padding: 20px; border: 1px solid #436171; background: #101c28; margin: 20px 0; }
.station-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.station-catalog button { display: grid; gap: 8px; text-align: left; padding: 14px; background: #172b39; color: #d6e9ef; border: 1px solid #517080; font: inherit; cursor: pointer; }
.station-catalog small { color: #b4cad5; line-height: 1.45; }
.station-panel button:focus-visible { outline: 3px solid #f4d56d; outline-offset: 2px; }
#station-salvage { padding: 12px; background: #172b39; color: #d6e9ef; border: 1px solid #517080; cursor: pointer; }
#station-salvage[aria-pressed="true"] { border-color: #f4d56d; }
.station-catalog button[aria-pressed="true"] { outline: 2px solid #69d9e7; }
.station-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#station-selection { min-height: 4.5em; line-height: 1.5; }
.station-toolbar button { background: #172b39; color: #d6e9ef; border: 1px solid #517080; padding: 10px; min-height: 44px; }
#station-planet { display: block; width: 100%; max-width: 480px; margin-top: 8px; padding: 12px; background: #172b39; color: #d6e9ef; }
.station-surface { max-width: 800px; border: 1px solid #617787; margin: 18px auto; background: #0b1520; padding: 8px; }
.station-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); aspect-ratio: 1; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 22% 30%, #ffffff12 0 8%, transparent 9%), radial-gradient(ellipse at 76% 63%, #0008 0 13%, transparent 14%), repeating-linear-gradient(135deg, #0002 0 3px, transparent 3px 23px), linear-gradient(25deg, #121f29, var(--planet-color, #725444)); }
.station-grid .station-tile { min-width: 0; min-height: 0; padding: 0; background: #101f2928; border: 1px solid #c3e4ed24; border-radius: 0; }
.station-grid .station-tile.locked { background: repeating-linear-gradient(135deg, #050b12c9 0 7px, #6c819129 7px 8px); }
.station-grid .station-tile:hover, .station-grid .station-tile:focus-visible { background: #69d9e733; }
.station-grid .station-building { position: absolute; z-index: 2; padding: 3px; border: 1px solid var(--building-color); background: linear-gradient(135deg, #708594, #24343d 18%, #0a131b 85%); color: var(--building-color); box-shadow: 4px 5px 0 #0006, inset 0 0 0 3px #24333e; touch-action: none; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; }
.station-building svg { width: 90%; height: 80%; min-height: 0; filter: drop-shadow(1px 3px 2px #0008); }
.station-building span { color: #f1f6f8; font-size: clamp(7px, 1vw, 12px); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-building.selected { outline: 3px solid #fff; outline-offset: -3px; }
.station-ghost { position: absolute; z-index: 3; pointer-events: none; background: #59ef9d40; border: 2px solid #80ffb5; box-sizing: border-box; }
.station-ghost.invalid { background: repeating-linear-gradient(45deg, #f3536155 0 5px, #f3536122 5px 10px); border-color: #ff7f8a; }
.station-surface-caption { padding: 10px 4px 2px; color: #adcedb; font-family: monospace; }
.station-catalog button { grid-template-columns: 56px 1fr; align-items: center; color: var(--building-color, #d6e9ef); }
.station-catalog svg { width: 56px; height: 56px; grid-row: span 2; }
.station-catalog small { grid-column: 2; }
.station-panel button:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 480px) { .station-panel { padding: 10px; } .station-surface { padding: 3px; } .station-catalog { grid-template-columns: 1fr; } .station-building span { display: none; } .station-grid .station-building { padding: 1px; } }
.password-field { position: relative; width: 100%; }
.account-form .password-field input { width: 100%; box-sizing: border-box; padding-right: 52px; }
#password-reveal { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: #b6d5df; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
#password-reveal[aria-pressed="true"] { color: #69d9e7; background: #69d9e714; }
#password-reveal:focus-visible { outline: 2px solid #f4d56d; outline-offset: -3px; }
#guest-limit-dialog { max-width: min(520px, calc(100vw - 40px)); color: #d6e9ef; background: #101c28; padding: 24px; border: 1px solid #69d9e7; }
#guest-limit-dialog::backdrop { background: #030813cc; }
#building-cost-dialog { max-width: min(480px, calc(100vw - 40px)); padding: 24px; color: #d6e9ef; background: #101c28; border: 1px solid #e5b957; }
#building-cost-dialog::backdrop { background: #030813bb; }
.hauling-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.hauling-form label { display: grid; gap: 6px; }
.hauling-form input, .hauling-form select { min-width: 0; width: 100%; box-sizing: border-box; padding: 10px; background: #132532; color: #d6e9ef; border: 1px solid #517080; }
.hauling-card { margin-top: 18px; padding: 16px; background: #0c1924; border: 1px solid #385f70; }
.hauling-card progress { width: 100%; height: 8px; accent-color: #69d9e7; }
.hauling-track { position: relative; height: 28px; margin: 12px 10px; background: linear-gradient(#517080, #517080) center / 100% 1px no-repeat; }
.hauling-track span { position: absolute; top: 2px; transform: translateX(-50%); color: #69d9e7; font-size: 20px; }
/* Ambient motion uses compositor-friendly transforms, never gameplay timers. */
.tab-panel { position: relative; isolation: isolate; }
.tab-panel::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0; opacity: 0.2; background: radial-gradient(circle at 18% 32%, #77d5ed 0 1px, transparent 2px), radial-gradient(circle at 79% 66%, #ad88d7 0 1px, transparent 2px); background-size: 180px 200px, 250px 230px; animation: ambient-breathe 9s ease-in-out infinite alternate; }
.tab-panel:not(.is-active)::before { animation-play-state: paused; }
.panel-title::after { content: ''; display: block; width: 80px; height: 2px; margin-top: 12px; background: linear-gradient(90deg, transparent, #69d9e7, transparent); transform-origin: left; animation: console-signal 4s ease-in-out infinite; }
.mining-strike { animation: mining-pulse 0.35s ease-out; }
@keyframes ambient-breathe { from { opacity: 0.1; transform: translateY(0); } to { opacity: 0.3; transform: translateY(8px); } }
@keyframes console-signal { 0%, 100% { opacity: 0.3; transform: scaleX(0.5); } 50% { opacity: 0.85; transform: scaleX(1); } }
@keyframes mining-pulse { from { box-shadow: inset 0 0 45px #69d9e75c; } to { box-shadow: inset 0 0 0 #69d9e700; } }
.low-detail .tab-panel::before { display: none; }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

/* Playful space-toy finish; decorative scenes never cover game controls. */
:root { --font-body: 'Trebuchet MS', 'Segoe UI', sans-serif; }
body { background-color: #171d32; }
.command-card, .station-panel, .hauling-card, .upgrade-card { border-radius: 18px; border: 2px solid #566488; background-color: #25314a; box-shadow: 0 5px 0 #11182b; }
.panel-title { color: #fff0be; letter-spacing: -.025em; text-shadow: 0 3px 0 #11182b; }
.btn-primary { border-radius: 12px; background: #92e9cc; color: #172a32; border: 2px solid #294e55; box-shadow: 0 4px 0 #142c38; font-weight: 800; }
.btn-secondary, .nav-tab, .station-catalog button, .station-toolbar button { border-radius: 12px; }
.nav-tab.is-active { background: #405375; color: #fff0be; }
.station-surface { border-radius: 16px; }
.station-grid .station-building { border-radius: 9px; }
.space-vignette { width: min(100%, 420px); margin: 32px auto 12px; pointer-events: none; }
.space-vignette svg { display: block; width: 100%; height: auto; overflow: visible; }
.space-bob { animation: space-bob 4s ease-in-out infinite; }
.space-sparkles { animation: space-twinkle 3s ease-in-out infinite alternate; }
.tab-panel:nth-of-type(even) .space-bob { animation-delay: -2s; }
.tab-panel:not(.is-active) .space-vignette * { animation-play-state: paused; }
@keyframes space-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes space-twinkle { from { opacity: .35; } to { opacity: 1; } }
.low-detail .space-vignette { display: none; }
.high-contrast .command-card, .high-contrast .station-panel, .high-contrast .hauling-card, .high-contrast .upgrade-card { background: #101823; border-color: #d7e8ff; }
@media (prefers-reduced-motion: reduce) { .space-vignette * { animation: none !important; } }
.sidebar { background: #20283f; }
.ticker { background: #25314a; }
.refinery-card, .market-card, .blueprint-card, .skill-card, .boost-card, .pass-card, .event-row { border-radius: 16px; background-color: #25314a; border-color: #566488; }
.btn-primary:not(:disabled):hover { background: #b5f4df; color: #172a32; }
.space-bob { transform-box: fill-box; transform-origin: center; }

/* Illustrated activity scenes: independent mechanical layers, no gameplay timers. */
.space-vignette { width: 100%; max-width: 900px; margin: 20px auto 28px; border: 2px solid #64759d; border-radius: 22px; overflow: hidden; background: #1b2740; box-shadow: 0 6px 0 #11182b, 0 12px 30px #080e2233; }
.space-vignette svg { overflow: hidden; max-height: 280px; }
.scene-robot, .robot-arm, .robot-eyes, .radar-dish, .engine-flame { transform-box: fill-box; transform-origin: center; }
.scene-robot { animation: robot-work 3s ease-in-out infinite; }
.robot-arm { transform-origin: bottom left; animation: robot-wave 3s ease-in-out infinite; }
.robot-eyes { animation: robot-blink 5s infinite; }
.scene-steam { animation: vent-steam 3s ease-out infinite; }
.signal-lamp { animation: space-twinkle 1.8s ease-in-out infinite alternate; }
.crystal-glimmer { animation: space-twinkle 4s ease-in-out infinite alternate; }
.scene-scan { stroke-dasharray: 65 20; animation: monitor-trace 3s linear infinite; }
.radar-dish { animation: dish-sweep 6s ease-in-out infinite alternate; }
.radar-waves { animation: radar-ping 3s ease-out infinite; }
.engine-flame { transform-origin: right center; animation: engine-burn .65s ease-in-out infinite alternate; }
.scene-comet { animation: comet-cross 9s ease-in infinite; }
@keyframes robot-work { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes robot-wave { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(16deg); } }
@keyframes robot-blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes vent-steam { from { transform: translateY(5px); opacity: 0; } 35% { opacity: .35; } to { transform: translate(8px,-20px); opacity: 0; } }
@keyframes monitor-trace { to { stroke-dashoffset: -85; } }
@keyframes dish-sweep { from { transform: rotate(-8deg); } to { transform: rotate(9deg); } }
@keyframes radar-ping { 0%,100% { opacity: 0; } 40% { opacity: .7; } 80% { opacity: .1; } }
@keyframes engine-burn { from { transform: scaleX(.7); opacity: .7; } to { transform: scaleX(1.1); opacity: 1; } }
@keyframes comet-cross { 0%,65% { opacity: 0; transform: translate(0,0); } 70% { opacity: .8; } 90%,100% { opacity: 0; transform: translate(-250px,65px); } }
.command-card, .upgrade-card, .refinery-card, .market-card, .blueprint-card, .hauling-card { background-image: radial-gradient(circle at 12px 12px, #9ba9cd 0 2px, transparent 3px), radial-gradient(circle at calc(100% - 12px) 12px, #9ba9cd 0 2px, transparent 3px), linear-gradient(145deg, #ffffff07, transparent 45%); border-top-color: #8897b9; box-shadow: inset 0 1px 0 #ffffff16, 0 5px 0 #11182b; }
.station-catalog button { background-image: linear-gradient(145deg, #849cbb22, transparent 65%); box-shadow: inset 0 1px 0 #bbcce82b; }
.low-detail .command-card, .low-detail .upgrade-card, .low-detail .refinery-card, .low-detail .market-card, .low-detail .blueprint-card, .low-detail .hauling-card { background-image: none; }
@media (max-width: 600px) { .space-vignette { margin: 16px auto 22px; border-radius: 16px; } .space-vignette svg { min-height: 145px; } }

/* Soft materials and rounded controls in the full-detail presentation. */
:root { --radius: 22px; --radius-sm: 12px; --radius-pill: 999px; --bg-void: #151d32; --bg-panel: #24324c; --bg-panel-alt: #2a3c55; --bg-inset: #18273d; }
html:not(.low-detail) .command-card, html:not(.low-detail) .refinery-card, html:not(.low-detail) .market-card, html:not(.low-detail) .upgrade-card, html:not(.low-detail) .blueprint-card, html:not(.low-detail) .hauling-card, html:not(.low-detail) .station-panel { border-radius: 24px; border-width: 1px; padding: 24px; background-image: radial-gradient(ellipse at 15% 0, #a1bedd1a, transparent 60%), linear-gradient(155deg, #30445e, #25334d 60%, #202c43); box-shadow: inset 0 1px 0 #d4e6ff30, 0 10px 26px #07102045; }
html:not(.low-detail) .space-vignette { border-radius: 28px; border-width: 1px; box-shadow: 0 10px 30px #080e2255, inset 0 1px 0 #fff3; }
html:not(.low-detail) .nav-tab { border-radius: 16px; padding: 13px 12px; }
html:not(.low-detail) .nav-tab.is-active { background: linear-gradient(120deg, #53678a, #354969); box-shadow: inset 0 1px 0 #c4d8ff35, 0 4px 12px #10172d55; border-color: transparent; }
html:not(.low-detail) .btn-primary, html:not(.low-detail) .btn-secondary, html:not(.low-detail) .btn-ghost, html:not(.low-detail) .station-toolbar button, html:not(.low-detail) .station-catalog button { border-radius: 16px; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
html:not(.low-detail) .btn-primary:not(:disabled) { background: linear-gradient(160deg, #c4ffe2, #8edcce 58%, #69bbbd); box-shadow: inset 0 1px 0 #fff9, 0 4px 12px #0b263c66; color: #18373d; }
html:not(.low-detail) .btn-primary:not(:disabled):hover { transform: translateY(-1px); }
html:not(.low-detail) input:not([type=checkbox]), html:not(.low-detail) select { border-radius: 12px; }
html:not(.low-detail) .resource-chip, html:not(.low-detail) .stance-row, html:not(.low-detail) .fleet-row, html:not(.low-detail) .skill-card, html:not(.low-detail) .event-row, html:not(.low-detail) .inspector { border-radius: 18px; }
html:not(.low-detail) .station-grid .station-building { border-radius: 16px; background: radial-gradient(ellipse at 30% 10%, #738ca5, #304960 55%, #1c2b42); box-shadow: 2px 5px 8px #06102377, inset 0 1px 1px #d4eaff88; border: 1px solid #a9c6d477; }
.machine-simple { display: none; }
.machine-rich { display: block; }
.machine-fan { transform-box: fill-box; transform-origin: center; animation: machine-spin 8s linear infinite; }
@keyframes machine-spin { to { transform: rotate(360deg); } }
.tab-panel:not(.is-active) .machine-fan { animation-play-state: paused; }
.low-detail .machine-rich, .low-detail .rich-surface { display: none; }
.low-detail .machine-simple { display: block; }
.high-contrast .command-card, .high-contrast .upgrade-card, .high-contrast .station-panel { background: #101823 !important; border-color: #d7e8ff !important; }
@media (max-width: 600px) { html:not(.low-detail) .command-card, html:not(.low-detail) .station-panel { padding: 16px; border-radius: 20px; } html:not(.low-detail) .station-grid .station-building { border-radius: 8px; } }

#account-settings-fields { display: grid; gap: 24px; }
#account-settings-fields[hidden] { display: none; }
#account-settings-fields .account-form { max-width: 560px; padding-bottom: 20px; border-bottom: 1px solid #8398b744; }
#account-settings-fields > button { justify-self: start; }

/* Each studio visit selects a complete 4.6-second robot routine. */
.space-vignette .robot-arm { transform-origin: bottom left; animation: robot-wave 3s ease-in-out infinite; }
.studio-robot .robot-arm { transform-origin: 50% 5px; animation: robot-stride .23s ease-in-out infinite alternate; }
.studio-robot .robot-arm--front { animation-direction: alternate-reverse; }
.studio-intro:not(.studio-intro--quiet) .studio-robot { animation: intro-robot-travel 4.6s .2s linear both; }
.studio-intro:not(.studio-intro--quiet)[data-robot-action="backflip"] .studio-robot { transform-origin: 50% 60%; animation: intro-robot-travel 4.6s .2s linear both, intro-robot-backflip 4.6s .2s linear both; }
.studio-intro[data-robot-action="hop"] .robot-upper { animation: intro-robot-hop 4.6s .2s ease-in-out both; }
.studio-intro[data-robot-action="hop"] .robot-leg { animation: intro-robot-hop-leg 4.6s .2s ease-in-out both; }
.studio-intro[data-robot-action="twirl"] .robot-rig { animation: intro-robot-twirl 4.6s .2s ease-in-out both; }
.studio-intro[data-robot-action="twirl"] .robot-upper { animation:none; }
.studio-intro[data-robot-action="skid"] .robot-upper { animation: intro-robot-skid 4.6s .2s ease-in-out both; }
.studio-intro[data-robot-action="skid"] .studio-robot { animation-timing-function: cubic-bezier(.2,.7,.8,.25); }
@keyframes intro-robot-travel { 0% { left:-110px; } 35% { left:calc(50% - 45px); } 65% { left:calc(50% - 45px); } 100% { left:calc(100% + 110px); } }
@keyframes intro-robot-backflip { 0%,35% { transform:translate(0,0); } 39% { transform:translate(0,7px); } 44% { transform:translate(-5px,-39px); } 50% { transform:translate(-14px,-76px); } 55% { transform:translate(-23px,-60px); } 60% { transform:translate(-28px,-18px); } 62% { transform:translate(-28px,5px); } 66% { transform:translate(-28px,0); } 75%,100% { transform:translate(0,0); } }
@keyframes intro-robot-hop { 0%,32%,49%,67%,100% { transform:translateY(0) rotate(0); } 38%,55% { transform:translateY(4px) scaleY(.94); } 43%,60% { transform:translateY(-30px) rotate(-8deg); } }
@keyframes intro-robot-hop-leg { 0% { transform:rotate(-36deg); } 2.5% { transform:rotate(36deg); } 5% { transform:rotate(-36deg); } 7.5% { transform:rotate(36deg); } 10% { transform:rotate(-36deg); } 12.5% { transform:rotate(36deg); } 15% { transform:rotate(-36deg); } 17.5% { transform:rotate(36deg); } 20% { transform:rotate(-36deg); } 22.5% { transform:rotate(36deg); } 25% { transform:rotate(-36deg); } 27.5% { transform:rotate(36deg); } 30% { transform:rotate(-36deg); } 70% { transform:rotate(-36deg); } 72.5% { transform:rotate(36deg); } 75% { transform:rotate(-36deg); } 77.5% { transform:rotate(36deg); } 80% { transform:rotate(-36deg); } 82.5% { transform:rotate(36deg); } 85% { transform:rotate(-36deg); } 87.5% { transform:rotate(36deg); } 90% { transform:rotate(-36deg); } 92.5% { transform:rotate(36deg); } 95% { transform:rotate(-36deg); } 97.5% { transform:rotate(36deg); } 100% { transform:rotate(-36deg); } 35% { transform:rotate(0); } 38%,55% { transform:rotate(-30deg); } 43%,60% { transform:translateY(-22px) rotate(35deg); } 49%,67% { transform:translateY(0) rotate(0); } }
@keyframes intro-robot-twirl { 0%,35% { transform:perspective(450px) rotateY(0); } 60%,100% { transform:perspective(450px) rotateY(360deg); } }
@keyframes intro-robot-skid { 0%,25% { transform:rotate(10deg); } 36%,45% { transform:translateX(10px) rotate(-22deg); } 52% { transform:rotate(9deg); } 62%,100% { transform:rotate(0); } }
html:not(.low-detail) .studio-robot .robot-head { clip-path:none; border-radius:18px 22px 16px 18px; background:linear-gradient(145deg,#fff0c4,#e6b15e 55%,#ae7742); box-shadow:inset 0 2px 1px #fff8; }
html:not(.low-detail) .studio-robot .robot-head::before { clip-path:none; border-radius:9px; }
html:not(.low-detail) .studio-robot .robot-body { clip-path:none; border-radius:12px; background:linear-gradient(135deg,#b6ccda,#647e98); }

/* A single skeleton carries head, torso, arms AND legs through the somersault. */
.robot-rig { position:absolute; inset:0; transform-origin:50% 58%; }
.studio-intro[data-robot-action="backflip"] .robot-rig { animation: robot-somersault 4.6s .2s linear both; }
.studio-intro[data-robot-action="backflip"] .robot-upper { animation:none; }
.studio-intro[data-robot-action="backflip"] .robot-leg { animation: robot-tuck-legs 4.6s .2s linear both; }
.studio-intro[data-robot-action="backflip"] .robot-leg--back { animation-name:robot-tuck-back; }
.studio-intro[data-robot-action="backflip"] .robot-arm { animation: robot-tuck-arms 4.6s .2s linear both; }
@keyframes robot-somersault { 0%,35% { transform:rotate(0) scaleY(1); } 39% { transform:rotate(8deg) scaleY(.9); } 44% { transform:rotate(-40deg); } 50% { transform:rotate(-180deg); } 55% { transform:rotate(-290deg); } 60% { transform:rotate(-360deg); } 62% { transform:rotate(-360deg) scaleY(.92); } 66%,100% { transform:rotate(-360deg) scaleY(1); } }
@keyframes robot-tuck-legs { 0% { transform:rotate(-36deg); } 2.5% { transform:rotate(36deg); } 5% { transform:rotate(-36deg); } 7.5% { transform:rotate(36deg); } 10% { transform:rotate(-36deg); } 12.5% { transform:rotate(36deg); } 15% { transform:rotate(-36deg); } 17.5% { transform:rotate(36deg); } 20% { transform:rotate(-36deg); } 22.5% { transform:rotate(36deg); } 25% { transform:rotate(-36deg); } 27.5% { transform:rotate(36deg); } 30% { transform:rotate(-36deg); } 70% { transform:rotate(-36deg); } 72.5% { transform:rotate(36deg); } 75% { transform:rotate(-36deg); } 77.5% { transform:rotate(36deg); } 80% { transform:rotate(-36deg); } 82.5% { transform:rotate(36deg); } 85% { transform:rotate(-36deg); } 87.5% { transform:rotate(36deg); } 90% { transform:rotate(-36deg); } 92.5% { transform:rotate(36deg); } 95% { transform:rotate(-36deg); } 97.5% { transform:rotate(36deg); } 100% { transform:rotate(-36deg); } 35% { transform:rotate(0); } 39% { transform:rotate(-35deg); } 45%,54% { transform:translateY(-10px) rotate(-105deg); } 60%,64% { transform:rotate(-18deg); } 66% { transform:rotate(0); } }
@keyframes robot-tuck-back { 0% { transform:rotate(36deg); } 2.5% { transform:rotate(-36deg); } 5% { transform:rotate(36deg); } 7.5% { transform:rotate(-36deg); } 10% { transform:rotate(36deg); } 12.5% { transform:rotate(-36deg); } 15% { transform:rotate(36deg); } 17.5% { transform:rotate(-36deg); } 20% { transform:rotate(36deg); } 22.5% { transform:rotate(-36deg); } 25% { transform:rotate(36deg); } 27.5% { transform:rotate(-36deg); } 30% { transform:rotate(36deg); } 70% { transform:rotate(36deg); } 72.5% { transform:rotate(-36deg); } 75% { transform:rotate(36deg); } 77.5% { transform:rotate(-36deg); } 80% { transform:rotate(36deg); } 82.5% { transform:rotate(-36deg); } 85% { transform:rotate(36deg); } 87.5% { transform:rotate(-36deg); } 90% { transform:rotate(36deg); } 92.5% { transform:rotate(-36deg); } 95% { transform:rotate(36deg); } 97.5% { transform:rotate(-36deg); } 100% { transform:rotate(36deg); } 35% { transform:rotate(12deg); } 39% { transform:rotate(35deg); } 45%,54% { transform:translateY(-9px) rotate(-75deg); } 60%,64% { transform:rotate(18deg); } 66% { transform:rotate(12deg); } }
@keyframes robot-tuck-arms { 0% { transform:rotate(-36deg); } 2.5% { transform:rotate(36deg); } 5% { transform:rotate(-36deg); } 7.5% { transform:rotate(36deg); } 10% { transform:rotate(-36deg); } 12.5% { transform:rotate(36deg); } 15% { transform:rotate(-36deg); } 17.5% { transform:rotate(36deg); } 20% { transform:rotate(-36deg); } 22.5% { transform:rotate(36deg); } 25% { transform:rotate(-36deg); } 27.5% { transform:rotate(36deg); } 30% { transform:rotate(-36deg); } 70% { transform:rotate(-36deg); } 72.5% { transform:rotate(36deg); } 75% { transform:rotate(-36deg); } 77.5% { transform:rotate(36deg); } 80% { transform:rotate(-36deg); } 82.5% { transform:rotate(36deg); } 85% { transform:rotate(-36deg); } 87.5% { transform:rotate(36deg); } 90% { transform:rotate(-36deg); } 92.5% { transform:rotate(36deg); } 95% { transform:rotate(-36deg); } 97.5% { transform:rotate(36deg); } 100% { transform:rotate(-36deg); } 35% { transform:rotate(-15deg); } 39% { transform:rotate(45deg); } 44% { transform:rotate(-155deg); } 48%,55% { transform:rotate(-85deg); } 62% { transform:rotate(-40deg); } 66% { transform:rotate(-15deg); } }

/* Exit gait is shared by every routine: no action poses remain on the limbs. */
.studio-intro[data-robot-phase="walking-out"] .robot-rig { animation:none; transform:none; }
.studio-intro[data-robot-phase="walking-out"] .robot-upper { animation:robot-bounce .18s ease-in-out infinite alternate; transform:none; }
.studio-intro[data-robot-phase="walking-out"] .robot-leg,
.studio-intro[data-robot-phase="walking-out"] .robot-arm { animation:robot-exit-step .42s ease-in-out infinite; transform-origin:50% 3px; }
.studio-intro[data-robot-phase="walking-out"] .robot-leg--back,
.studio-intro[data-robot-phase="walking-out"] .robot-arm--front { animation-direction:reverse; }
@keyframes robot-exit-step { 0%,100% { transform:rotate(0); } 25% { transform:rotate(32deg); } 75% { transform:rotate(-32deg); } }