/* Nobody's Listening: a pixel-art walnut radio. Art is SVG on a 192 x 154 grid;
   one grid unit is --u, derived from the cabinet's width. */

:root {
  --surface: #0f0b09;
  --wood-lo: #2a1810;
  --wood: #4a2a1b;
  --wood-hi: #6b3f28;
  --brass-lo: #7a5522;
  --brass: #c9963f;
  --brass-hi: #f1d27a;
  --glass: #1a1310;
  --amber-lo: #a8541a;
  --amber: #f0a030;
  --amber-hi: #ffd066;
  --red: #d8342a;
  --cream: #e8d9b8;
  --muted: #8c7a64;
  --halo-1: #3a1f10;
  --halo-2: #22140d;
  --f-brass: "Press Start 2P", Tiny5, monospace;
  --f-glass: Tiny5, DotGothic16, "Hiragino Sans", "Noto Sans CJK JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

html { background: var(--surface); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--surface);
  color: var(--cream);
  font-family: var(--f-glass);
  font-size: 16px;
  line-height: 24px;
  font-kerning: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  padding: 28px 16px 44px;
}

.room {
  width: 100%;
  max-width: 620px;
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.title {
  margin: 0;
  font-family: var(--f-brass);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cream);
}

/* The set: fills the width on phones (fractional scale is invisible on DPR 2+),
   integer scales on DPR-1 screens. */
.set {
  position: relative;
  width: 100%;
  aspect-ratio: 192 / 154;
  container-type: inline-size;
}
@media (min-width: 416px) and (max-width: 607px) and (max-resolution: 1.4dppx) {
  .set { width: 384px; }
}
@media (min-width: 608px) {
  .set { width: 576px; }
  .title { font-size: 24px; line-height: 32px; }
}

.cabinet {
  position: relative;
  width: 100%;
  height: 100%;
  --u: calc(100cqw / 192);
}
.cabinet::before {                      /* light pooling on the table, stepped, ink only */
  content: '';
  position: absolute;
  left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(4 * var(--u)); bottom: calc(6 * var(--u));
  z-index: 0;
  box-shadow: none;
}
.set[data-power="on"] .cabinet::before {
  box-shadow:
    0 calc(2 * var(--u)) 0 calc(2 * var(--u)) var(--halo-1),
    0 calc(4 * var(--u)) 0 calc(6 * var(--u)) var(--halo-2);
}

svg.art, .ctl > svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
  overflow: visible;
}
svg.art { position: absolute; inset: 0; z-index: 1; }
svg text {
  font-family: var(--f-glass);
  font-size: 8px;                        /* 8 user units: one text pixel per grid unit */
  fill: currentColor;
}

/* Palette classes for the generated rects */
.w  { fill: var(--wood); }
.wl { fill: var(--wood-lo); }
.wh { fill: var(--wood-hi); }
.b  { fill: var(--brass); }
.bl { fill: var(--brass-lo); }
.bh { fill: var(--brass-hi); }
.g  { fill: var(--glass); }
.s  { fill: var(--surface); }
.ink { fill: var(--muted); color: var(--muted); }
.glow { fill: var(--glass); }
.led { fill: var(--glass); }
.nc { fill: var(--brass-lo); }
.nt, .nh { fill: transparent; }
.mark { fill: var(--wood-lo); }
.live-dot { fill: var(--red); visibility: hidden; }
.live-text { fill: var(--amber-hi); color: var(--amber-hi); visibility: hidden; }

/* State: light is state */
.set[data-power="on"] .ink { fill: var(--amber); color: var(--amber); }
.set[data-power="on"] .glow { fill: var(--amber-lo); }
.set[data-power="on"] .led { fill: var(--amber-hi); }
.set[data-power="on"] .nc { fill: var(--red); }
.set[data-power="on"] .nt { fill: var(--amber-hi); }
.set[data-power="on"] .nh { fill: var(--amber-lo); }
.set[data-state="dead"] .ink { fill: var(--amber-lo); color: var(--amber-lo); }
.set[data-state="dead"] .led { fill: var(--brass-lo); }
.set[data-state="playing"] .live-dot,
.set[data-state="playing"] .live-text { visibility: visible; }

.set[data-state="tuning"] .glow,
.set[data-state="tuning"] .nt { animation: glow-flicker .3s steps(1, end) infinite; }
.set[data-state="tuning"] .led { animation: led-blink .5s steps(1, end) infinite; }
.set[data-state="blocked"] .led { animation: led-blink 1s steps(1, end) infinite; }
.set[data-state="playing"] .glow { animation: glow-breathe 3.5s steps(1, end) infinite; }

@keyframes glow-flicker {
  0% { fill: var(--amber); }
  34% { fill: var(--amber-lo); }
  67% { fill: var(--amber-hi); }
}
@keyframes glow-breathe {
  0%, 100% { fill: var(--amber-lo); }
  50% { fill: var(--amber); }
}
@keyframes led-blink {
  0% { fill: var(--amber-hi); }
  50% { fill: var(--glass); }
}

/* Box geometry on the grid (kept in CSS, not inline, so the page needs no
   'unsafe-inline' in its Content-Security-Policy) */
#dial     { --x: 5;   --y: 3;   --w: 182; --h: 36; }
.readout  { --x: 38;  --y: 48;  --w: 116; --h: 56; }
#power    { --x: 6;   --y: 112; --w: 28;  --h: 28; }
#tune     { --x: 68;  --y: 112; --w: 56;  --h: 28; }
#volume   { --x: 158; --y: 112; --w: 28;  --h: 28; }
.label-power  { --x: 0;   --y: 138; --w: 40; --h: 8; }
.label-volume { --x: 152; --y: 138; --w: 40; --h: 8; }

/* Overlays positioned in grid units */
.ctl, .readout, .control-label {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.ctl {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.knob {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ctl:focus-visible {
  outline: var(--u) solid var(--brass-hi);
  outline-offset: var(--u);
}

/* Needle: whole columns, one column per step */
.needle {
  transform: translateX(calc(var(--col, 96) * 1px));
  transition: transform calc(var(--steps, 1) * 10ms) steps(var(--steps, 1), end);
}

/* Volume mark sits on a detent (JS writes --mx / --my in grid units) */
.mark { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, -5) * 1px)); }

/* Tune key: the cap and its label drop one unit while pressed */
.key { display: block; }
.key-label {
  position: absolute;
  left: calc(4 * var(--u));
  top: calc(2 * var(--u));
  width: calc(48 * var(--u));
  height: calc(16 * var(--u));
  display: grid;
  place-items: center;
  font-family: var(--f-brass);
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--wood-lo);
  pointer-events: none;
}
.key.pressed .cap, .key:active .cap { transform: translateY(1px); }
.key.pressed .key-label, .key:active .key-label { transform: translateY(var(--u)); }

.control-label {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brass-hi);
  white-space: nowrap;
  pointer-events: none;
}
@media (min-width: 608px) { .control-label { letter-spacing: 2px; } }

/* Readout: a real display, so text sits left */
.readout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.set[data-power="on"] .readout { visibility: visible; }
.station-name-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
}
.favicon {
  width: 16px; height: 16px;
  flex: none;
  image-rendering: pixelated;
}
.station-name {
  font-size: 16px;
  line-height: 16px;
  color: var(--amber);
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  unicode-bidi: plaintext;
}
.station-place {
  width: 100%;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber-hi);
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}
.station-place:not(:empty) { padding-bottom: 4px; border-bottom: var(--u) solid var(--brass-lo); }
.station-lang {
  font-size: 16px;
  line-height: 16px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 22 * var(--u));
  unicode-bidi: plaintext;
}
@media (min-width: 608px) {
  .station-name { font-size: 24px; line-height: 24px; -webkit-line-clamp: 3; }
  .favicon { width: 24px; height: 24px; }
  .key-label { font-size: 24px; line-height: 24px; }
}

/* Copy below the set */
.status {
  margin: 0;
  min-height: 24px;
  max-width: 30em;
  color: var(--cream);
}
@media (min-width: 608px) { .status { font-size: 24px; line-height: 32px; } }
.lede { margin: 0; max-width: 32em; color: var(--muted); }
.colophon { max-width: 32em; color: var(--muted); }
.colophon p { margin: 0; }
.colophon a { color: var(--brass); text-decoration-color: var(--brass-lo); text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .needle, .mark { transition: none; }
  .set[data-state] .glow, .set[data-state] .nt, .set[data-state] .led { animation: none; }
}