:root {
  --bg: #0b0f12;
  --fg: #b7ffbf;
  --fg-dim: #6cd376;
  --accent: #39ff14;
  --amber: #ffbf00;
  --muted: #1a2228;
  --glass: rgba(255,255,255,0.02);
  --row-h: 20px;           /* exact pixel row height for crisp translation */
  --px-gap: 2px;           /* gap between “LED” pixels */
}

/* THEME VARIANTS */
html[data-theme="amber"]  { --fg:#ffe6bf; --fg-dim:#c8a36d; --accent:#ffbd4a; }
html[data-theme="mono"]   { --fg:#e6e6e6; --fg-dim:#9b9b9b; --accent:#e6e6e6; }
html[data-theme="violet"] { --fg:#e6dcff; --fg-dim:#b9a6ff; --accent:#b388ff; }
html[data-theme="ice"]    { --fg:#defaff; --fg-dim:#9dc2cc; --accent:#9BE2FF; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 70% -10%, #152028 0%, #0b0f12 45%, #070b0e 100%) fixed;
  color: var(--fg);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { min-height: 100%; display: grid; place-items: center; padding: 28px 16px; }
.term {
  width: 100%; max-width: 1040px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.02);
  position: relative; overflow: hidden;
}
.term.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0,
    rgba(255,255,255,0) 2px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none; mix-blend-mode: soft-light;
}
.term.crt::before {
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.85) 100%);
  filter: blur(2px); pointer-events: none;
}

.topbar {
  height: 36px; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px; padding: 0 10px;
  border-bottom: 1px solid var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.traffic { display: inline-flex; gap: 8px; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.title { text-align: center; font-weight: 600; letter-spacing: .2px; color: var(--fg-dim); user-select: none; }
.actions { display:flex; gap:8px; }
.btn { padding: 6px 10px; border: 1px solid var(--muted); border-radius: 6px; color: var(--fg-dim); background: var(--glass); cursor: pointer; font-size: 12px; text-transform: lowercase; }
.btn:hover { color: var(--fg); border-color: rgba(255,255,255,0.14); }

.viewport { padding: 18px 16px 24px; }
.brand { margin-bottom: 12px; }
.logo { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 20px; color: var(--fg); }
.logo .dot { color: var(--amber); }
.tag { color: var(--fg-dim); margin-top: 4px; }

/* SLOTS */
.slot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.square {
  border: 1px dashed #1e241f;
  border-radius: 8px;
  background: #0d120f;
  padding: 10px 12px;
  min-height: 240px;
  display: grid; align-content: center; gap: 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
.row {
  position: relative;
  height: var(--row-h);
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0,0,0,0.2);
}
.tape { position: absolute; left: 0; right: 0; top: 0; will-change: transform, filter; }

/* CRISP PIXEL FRAMES (no text glyphs) */
.frame.pxframe {
  font-size: 0;            /* ensure no text metrics */
  letter-spacing: 0;
  text-shadow: none;
  display: grid;
  grid-template-columns: repeat(var(--cols, 22), 1fr);
  align-items: center;
  justify-items: center;
  height: var(--row-h);
  line-height: var(--row-h);
  gap: var(--px-gap);
}
.frame.pxframe .px {
  display: block;
  width: 100%;
  height: calc(var(--row-h) - 6px);
  background: transparent;
  border-radius: 2px;
}
.frame.pxframe .px.on { background: var(--fg); }

.alt .frame { filter: none; opacity: 1; } /* no “brighten” wash on alternating rows */

/* UI footers */
.result { margin-top: 14px; min-height: 24px; color: var(--amber); }
.controls { display: flex; gap: 10px; margin-top: 14px; align-items:center; }
.hint { color: var(--fg-dim); font-size: 12px; }
.footer { margin-top: 32px; color: var(--fg-dim); }

@media (max-width: 700px) {
  :root { --row-h: 18px; --px-gap: 1.5px; }
  .square { min-height: 200px; }
}
/* mobile: rows closer together (less vertical gaps) */
@media (max-width: 640px) {
  /* 1) Remove the inter-row gap inside each square */
  .square { gap: 0; }

  /* 2) Make each row a hair shorter so scanlines sit closer */
  :root { --row-h: 10px; }  /* was 18–20px; tweak to taste */

  /* 3) Let each “LED” almost fill the row to reduce dead space */
  .frame.pxframe .px { height: calc(var(--row-h) - 2px); }
}