/* The retro skin intentionally sits last: structure stays reusable while the
   visual language can be replaced without touching simulation components. */

html,
body {
  background: var(--paper-deep);
}

body {
  background-image:
    radial-gradient(circle at 15% 0%, rgb(255 43 214 / 17%), transparent 28%),
    radial-gradient(circle at 85% 15%, rgb(0 246 255 / 14%), transparent 30%),
    radial-gradient(circle at 50% 75%, rgb(255 230 0 / 6%), transparent 35%),
    linear-gradient(rgb(57 255 136 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(57 255 136 / 2%) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: var(--font-mono);
}

body::after {
  display: none;
}

button,
select,
input,
output {
  font-family: var(--font-mono);
}

.lab-shell {
  width: min(1600px, 100%);
}

.topbar {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgb(255 230 0 / 24%);
}

.brand strong {
  color: var(--acid);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgb(121 255 135 / 28%);
}

.brand small,
.topbar-copy p,
.culture-status {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand-mark {
  border-radius: 0;
  color: var(--paper-deep);
  background: var(--acid);
  box-shadow: 3px 3px 0 #244a29;
}

.brand-mark span {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 0;
  background: var(--paper-deep);
}

.eyebrow,
.section-index,
.cycle-readout span,
.stat-block > div > span,
.population-chart > div > span {
  color: var(--accent);
}

.panel,
.control-rail,
.stats-strip {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dish-panel {
  position: relative;
  overflow: visible;
  border: 5px solid #2d1d36;
  outline: 2px solid #ffbe32;
  box-shadow:
    inset 0 0 0 2px #070308,
    9px 11px 0 #020102,
    0 0 24px rgb(0 246 255 / 18%),
    0 0 54px rgb(255 43 214 / 24%);
}

.dish-panel::before {
  position: absolute;
  z-index: 8;
  top: -10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 8px;
  background: radial-gradient(circle, #fff7a0 0 2px, #ff2bd6 2.5px 3.5px, transparent 4px) 0 0 / 20px 8px repeat-x;
  content: "";
  filter: drop-shadow(0 0 5px #fff45c);
  pointer-events: none;
  animation: marquee-chase .48s steps(2, end) infinite;
}

@keyframes marquee-chase {
  50% { background-position: 10px 0; filter: drop-shadow(0 0 8px #ff2bd6); }
}

.dish-header {
  background:
    linear-gradient(90deg, rgb(255 43 214 / 10%), transparent 32%, transparent 68%, rgb(255 230 0 / 8%)),
    var(--surface-raised);
}

.dish-header h1 {
  color: #fff5a6;
  text-shadow: 0 0 14px rgb(255 230 0 / 18%);
}

.specimen-section {
  box-shadow: inset 3px 0 0 #ff2bd6;
}

.specimen-identity {
  border: 1px solid #654460;
  background: linear-gradient(90deg, rgb(255 43 214 / 12%), rgb(0 246 255 / 5%));
}

.panel-header,
.dish-footer {
  background: var(--surface-raised);
}

.dish-header h1,
.section-heading h2 {
  text-transform: uppercase;
}

.icon-button,
.square-button,
.primary-button,
.secondary-button,
.tool-switcher,
.tool-button,
.field-label select,
.preset-button,
.dish-readout--bottom,
.specimen-empty,
.specimen-identity,
.specimen-swatch,
.about-dialog,
.dialog-close {
  border-radius: 0;
}

.icon-button,
.square-button {
  border-color: var(--line-strong);
}

.primary-button {
  border: 1px solid var(--acid);
  color: var(--paper-deep);
  background: var(--acid);
  box-shadow: 3px 3px 0 #1d4a25;
  text-transform: uppercase;
}

.primary-button:hover {
  color: var(--paper-deep);
  background: #a1ffa9;
}

.secondary-button {
  border-color: var(--line-strong);
  color: var(--ink);
  background: #0a100c;
  text-transform: uppercase;
}

.secondary-button:hover,
.icon-button:hover,
.square-button:hover {
  border-color: var(--acid);
  color: var(--acid);
  background: #101b13;
}

.tool-switcher {
  border-color: var(--line-strong);
  background: #060a07;
}

.tool-button {
  color: var(--ink-faint);
}

.tool-button.is-active {
  color: var(--paper-deep);
  background: var(--acid);
  box-shadow: none;
}

.dish-stage {
  border: 10px solid #17101d;
  border-bottom-width: 13px;
  border-radius: 22px / 12px;
  background: #040705;
  box-shadow:
    inset 0 0 0 2px #725871,
    inset 0 0 35px #000,
    0 0 0 2px #050306;
}

.dish-stage::before {
  z-index: 6;
  display: block;
  inset: 0;
  border-radius: 12% / 5%;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 13%) 3px 4px),
    radial-gradient(ellipse at center, transparent 57%, rgb(0 0 0 / 34%) 90%, rgb(0 0 0 / 72%));
  box-shadow: inset 0 0 38px rgb(0 0 0 / 78%);
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
}

.dish-footer {
  border-top: 4px solid #392742;
  background:
    linear-gradient(165deg, rgb(255 255 255 / 8%), transparent 35%),
    #130d17;
  box-shadow: inset 0 2px 0 #6d536f;
}

.dish-footer .primary-button,
.dish-footer .square-button {
  border-width: 2px;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #020202, inset 0 1px rgb(255 255 255 / 38%);
}

.dish-footer .primary-button {
  border-color: #ff7b8e;
  color: white;
  background: radial-gradient(circle at 35% 25%, #ff7186, #b1002b 70%);
}

.dish-footer .square-button:nth-child(2) { color: #161000; background: linear-gradient(#fff589, #d99300); }
.dish-footer .square-button:nth-child(3) { color: white; background: linear-gradient(#62dfff, #00669b); }
.dish-footer .arcade-sound { color: #180018; background: linear-gradient(#ff8bea, #aa168e); }
.dish-footer .arcade-sound.is-muted { filter: grayscale(1); opacity: .58; }

.dish-footer .primary-button:active,
.dish-footer .square-button:active {
  box-shadow: 0 1px 0 #020202;
  transform: translateY(2px);
}

.dish-readout {
  color: var(--ink-soft);
}

.dish-readout--top span:first-child {
  color: var(--acid);
  animation: terminal-blink 1.1s steps(2, jump-none) infinite;
}

.dish-readout--bottom {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgb(2 7 4 / 88%);
  backdrop-filter: none;
}

@keyframes terminal-blink {
  50% { opacity: 0.35; }
}

.speed-control input[type="range"]::-webkit-slider-runnable-track,
.range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #030604;
}

.speed-control input[type="range"]::-moz-range-track,
.range-field input[type="range"]::-moz-range-track {
  height: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #030604;
}

input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 16px;
  margin-top: -7px;
  border: 1px solid var(--paper-deep);
  border-radius: 0;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dark);
}

input[type="range"]::-moz-range-thumb {
  border-radius: 0;
  background: var(--accent);
}

.field-label select {
  border-color: var(--line-strong);
  color: var(--acid);
  background: #050906;
  text-transform: uppercase;
}

.preset-button {
  border-color: var(--line);
  background: #080d09;
}

.preset-button.is-active {
  border-color: var(--acid);
  background: #142319;
  box-shadow: inset 3px 0 0 var(--acid);
}

.preset-button.is-active strong {
  color: var(--acid);
}

.stat-icon {
  border-radius: 0;
}

.stat-icon::after {
  border-radius: 0;
  background: var(--acid);
}

.stat-block strong {
  color: var(--acid);
  text-shadow: 0 0 10px rgb(57 255 136 / 48%);
}

.stat-block:nth-child(2) strong { color: #ffe600; text-shadow: 0 0 10px rgb(255 230 0 / 46%); }
.stat-block:nth-child(3) strong { color: #ff2bd6; text-shadow: 0 0 10px rgb(255 43 214 / 46%); }
.stat-block:nth-child(4) strong { color: #00f6ff; text-shadow: 0 0 10px rgb(0 246 255 / 46%); }
.stat-block:nth-child(5) strong { color: #ff5a32; text-shadow: 0 0 10px rgb(255 90 50 / 46%); }

.population-chart small i {
  background: var(--accent);
}

.specimen-reticle {
  border-radius: 0;
}

.specimen-swatch {
  border: 2px solid var(--ink);
}

.about-dialog {
  border-color: var(--acid);
  background: #09100b;
  box-shadow: 8px 8px 0 #010201;
}

.about-dialog::backdrop {
  background: rgb(0 3 1 / 82%);
  backdrop-filter: none;
}

.dialog-close {
  color: var(--accent);
  background: #111a12;
}

.status-light {
  border-radius: 0;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid);
}

.status-light.is-paused {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

@media (max-width: 420px) {
  .transport-controls { gap: 5px; }
  .transport-controls [data-toggle-label] { display: none; }
  .transport-controls .primary-button,
  .transport-controls .square-button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 8px;
  }
}

@media (max-width: 360px) {
  .dish-stage {
    border-width: 5px;
    border-bottom-width: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dish-panel::before,
  .arena-event,
  .arcade-scoreboard span,
  .arcade-callout.is-visible {
    animation: none;
  }

  .arcade-callout.is-visible {
    opacity: 1;
    transform: none;
  }
}