:root {
  color-scheme: dark;
  --ink: #f5f8fa;
  --muted: #8295a3;
  --dim: #526572;
  --bg: #050a0e;
  --panel: #0a141b;
  --line: #1b2b35;
  --line-strong: #2a3d49;
  --orange: #ff5b22;
  --orange-hot: #ff7848;
  --cyan: #44d7ff;
  --green: #48db8a;
  --red: #ff4f70;
  --shadow: 0 16px 42px rgba(0, 0, 0, .34);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -12rem, rgba(68, 215, 255, .12), transparent 30rem),
    linear-gradient(180deg, #091118 0%, #050a0e 48%, #03070a 100%);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }

button {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.terminal {
  width: min(100%, 42rem);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(.8rem, env(safe-area-inset-top)) .75rem max(1.25rem, env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 4.3rem;
  padding: .1rem .2rem .7rem;
}

.eyebrow, h1, h2 { margin: 0; }

.eyebrow {
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .16em;
}

h1 {
  margin-top: .08rem;
  font-size: clamp(1.72rem, 8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
}

h2 {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.connection {
  display: flex;
  align-items: center;
  gap: .46rem;
  max-width: 9.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(3, 9, 13, .74);
  padding: .55rem .72rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.2;
}

.connection span {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 .75rem rgba(255, 79, 112, .62);
}

.connection.online {
  color: var(--green);
  border-color: rgba(72, 219, 138, .4);
}

.connection.online span {
  background: var(--green);
  box-shadow: 0 0 .85rem rgba(72, 219, 138, .6);
}

.pairing, .state-panel, .fire-panel, .readout {
  border: 1px solid var(--line);
  border-radius: 1.05rem;
  background: linear-gradient(155deg, rgba(14, 28, 37, .97), rgba(7, 16, 22, .97));
  box-shadow: var(--shadow);
}

.pairing {
  padding: 1.25rem;
  margin-top: 17vh;
}

.pairing h2 {
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: 1.15rem;
  letter-spacing: -.015em;
}

.pairing label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}

.pair-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}

.pair-row input {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: .75rem;
  outline: none;
  background: #050c11;
  color: var(--ink);
  padding: .95rem;
  font-size: 1rem;
}

.pair-row input:focus { border-color: var(--cyan); }

.pair-row button {
  border: 0;
  border-radius: .75rem;
  background: var(--cyan);
  color: #021018;
  padding: 0 1rem;
  font-weight: 950;
}

.controls {
  display: grid;
  gap: .65rem;
}

.hidden { display: none; }

.state-panel, .fire-panel { padding: .85rem; }

.state-panel {
  position: relative;
  overflow: hidden;
}

.state-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), transparent 72%);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}

.section-head span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

#state-code {
  color: var(--ink);
  font-size: .82rem;
}

.segmented {
  display: grid;
  gap: .4rem;
}

.segmented.two { grid-template-columns: repeat(2, 1fr); }
.segmented.three { grid-template-columns: repeat(3, 1fr); }

.state-button, .out-button, .base-button, .state-actions button {
  min-height: 3.15rem;
  border: 1px solid var(--line);
  border-radius: .72rem;
  background: rgba(3, 10, 15, .78);
  color: var(--muted);
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.state-button.active, .out-button.active {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(68, 215, 255, .25), rgba(68, 215, 255, .11));
  color: #a9edff;
  box-shadow: inset 0 0 0 1px rgba(68, 215, 255, .12), 0 0 1rem rgba(68, 215, 255, .07);
}

.base-button.active {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(72, 219, 138, .25), rgba(72, 219, 138, .1));
  color: #adf4cd;
  box-shadow: inset 0 0 0 1px rgba(72, 219, 138, .12), 0 0 1rem rgba(72, 219, 138, .06);
}

.state-grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: .65rem;
  margin-top: .72rem;
}

.state-grid h2 { margin: 0 0 .4rem .08rem; }

.bases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .38rem;
}

.state-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: .42rem;
  margin-top: .6rem;
}

.state-actions button {
  min-height: 2.85rem;
  color: #b9c7cf;
  font-size: .78rem;
  letter-spacing: .035em;
}

.state-actions button:active,
.state-button:active,
.out-button:active,
.base-button:active { transform: scale(.975); }

.fire-panel {
  border-color: #2b302f;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 91, 34, .07), transparent 17rem),
    linear-gradient(155deg, rgba(15, 25, 31, .98), rgba(7, 15, 20, .98));
}

.fire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.fire {
  position: relative;
  min-height: 5.35rem;
  overflow: hidden;
  border: 1px solid rgba(255, 91, 34, .48);
  border-radius: .85rem;
  background: linear-gradient(155deg, rgba(255, 91, 34, .22), rgba(255, 91, 34, .06));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 .6rem 1.4rem rgba(0, 0, 0, .17);
  transition: transform 55ms ease, border-color 55ms ease, filter 55ms ease;
}

.fire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 38%);
  pointer-events: none;
}

.fire strong, .fire span {
  position: relative;
  z-index: 1;
  display: block;
}

.fire strong {
  font-size: 1.8rem;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1;
}

.fire span {
  margin-top: .3rem;
  color: #ffb79e;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.fire.homer {
  grid-column: 1 / -1;
  min-height: 5rem;
  border-color: #ff7b4c;
  background: linear-gradient(120deg, #e63f0b, #ff6c2f 52%, #cb2d05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 .7rem 1.8rem rgba(212, 52, 5, .24);
}

.fire.homer strong { font-size: 2rem; }
.fire.homer span { color: #fff0e9; }

.fire.run {
  border-color: rgba(72, 219, 138, .46);
  background: linear-gradient(155deg, rgba(72, 219, 138, .22), rgba(72, 219, 138, .06));
}

.fire.run span { color: #aef2cb; }

.fire:active, .fire.pressed {
  transform: scale(.965);
  border-color: #fff;
  filter: brightness(1.18);
}

.fire.unmapped {
  opacity: .42;
  filter: saturate(.3);
}

.readout {
  overflow: hidden;
  background: rgba(7, 16, 22, .9);
}

.armed, .last {
  display: grid;
  gap: .15rem;
  padding: .72rem .85rem;
  border-bottom: 1px solid var(--line);
}

.armed > span, .last > span, .money span {
  color: var(--dim);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.armed strong, .last strong {
  overflow: hidden;
  font-size: .92rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.armed strong { color: var(--orange-hot); }
.last strong { color: var(--green); }

.armed small, .last small {
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.money div {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .7rem .75rem;
}

.money div + div { border-left: 1px solid var(--line); }

.money strong {
  overflow: hidden;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

@media (max-height: 740px) {
  .terminal { padding-top: max(.45rem, env(safe-area-inset-top)); }
  .topbar { min-height: 3.8rem; padding-bottom: .45rem; }
  .state-panel, .fire-panel { padding: .72rem; }
  .state-button, .out-button, .base-button { min-height: 2.8rem; }
  .fire { min-height: 4.6rem; }
  .fire.homer { min-height: 4.4rem; }
}

@media (min-width: 700px) {
  .terminal { padding-inline: 1rem; }
  .controls { grid-template-columns: .92fr 1.08fr; align-items: start; }
  .readout { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .fire { transition: none; }
}