@font-face {
  font-family: vtFont;
  src: url(/VT323-Regular.ttf);
}

::selection {
  background: #000;
  color: #00c800;
}

::placeholder {
  color: inherit;
  opacity: 0.45;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #000; }
::-webkit-scrollbar-corner { background: #fff; }
* { scrollbar-color: #000 #fff; scrollbar-width: thin; }

body {
  caret-color: #00c800;
  cursor: crosshair;
  accent-color: #000;
}

.radio {
  position: fixed;
  right: 1.5em;
  bottom: 1.5em;
  width: 240px;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  z-index: 50;
  font-family: vtFont, "Courier New", monospace;
}
.radio__bar {
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
  font-size: 1em;
  line-height: 1.6em;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.5em;
}
.radio__bar::before,
.radio__bar::after {
  content: "";
  flex: 1;
  min-width: 0;
  height: 0.45em;
  background: repeating-linear-gradient(
    to bottom,
    #000 0 1px,
    transparent 1px 3px
  );
}
.radio__body {
  padding: 0.45em 0.5em 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.radio__scope-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.radio__scope {
  display: block;
  width: 100%;
  height: 48px;
  background: #000;
  border: 1px solid #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.radio__scope-loader {
  position: absolute;
  inset: 1px;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: vtFont, "Courier New", monospace;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #00c800;
  text-shadow: 0 0 4px #00c800, 0 0 1px #00c800;
  text-transform: uppercase;
  white-space: pre;
}
.radio__scope-wrap.is-loading .radio__scope-loader {
  display: flex;
}
.radio__scope-loader i {
  font-style: normal;
  will-change: opacity;
}
.radio__scope-loader i:nth-of-type(1) { animation: scope-dot-1 1.2s linear infinite; }
.radio__scope-loader i:nth-of-type(2) { animation: scope-dot-2 1.2s linear infinite; }
.radio__scope-loader i:nth-of-type(3) { animation: scope-dot-3 1.2s linear infinite; }
@keyframes scope-dot-1 {
  0%, 24%   { opacity: 0; }
  25%, 100% { opacity: 1; }
}
@keyframes scope-dot-2 {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes scope-dot-3 {
  0%, 74%   { opacity: 0; }
  75%, 100% { opacity: 1; }
}
.radio__row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.radio__btn {
  font-family: inherit;
  font-size: 1em;
  line-height: 1;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 0.15em 0.5em 0.2em;
  min-width: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.radio__btn[hidden] { display: none; }
.radio__btn svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.radio__btn:hover,
.radio__btn:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}
.radio__btn[aria-pressed="true"] {
  background: #000;
  color: #fff;
}
.radio__btn[aria-pressed="true"]:hover,
.radio__btn[aria-pressed="true"]:focus-visible {
  background: #fff;
  color: #000;
}
.radio__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.radio__btn[disabled]:hover,
.radio__btn[disabled]:focus-visible {
  background: #fff;
  color: #000;
}

/* Share button — same chassis as the other .radio__btn entries; the SVG is
   stroke-based (link/arrow glyph) rather than fill-based, so override the
   svg path defaults so it renders. .is-copied flips colors briefly after a
   successful copy as visual confirmation. */
.radio__btn--share svg {
  fill: none;
}
.radio__btn--share.is-copied {
  background: #000;
  color: #00c800;
}
.radio__btn--share.is-copied:hover,
.radio__btn--share.is-copied:focus-visible {
  background: #000;
  color: #00c800;
}

/* Favorite button — outline heart by default, filled when the live track is
   in the library. Same chassis as .radio__btn / .radio__btn--share. The SVG
   path is stroke-based (heart outline) so we override the default fill, then
   flip to currentColor when .is-fav is set. The is-fav background-flip
   matches the [aria-pressed="true"] idiom used by the mood buttons — both
   read as "this state is active" without any animation. */
.radio__btn--fav svg {
  fill: none;
}
.radio__btn--fav.is-fav svg path {
  fill: currentColor;
}
.radio__btn--fav.is-fav {
  background: #000;
  color: #fff;
}
.radio__btn--fav.is-fav:hover,
.radio__btn--fav.is-fav:focus-visible {
  background: #fff;
  color: #000;
}

.radio__mood {
  display: flex;
  border: 2px solid #000;
}
.radio__mood-btn {
  flex: 1;
  font-family: inherit;
  font-size: 0.72em;
  line-height: 1;
  background: #fff;
  color: #000;
  border: none;
  border-right: 1px solid #000;
  padding: 0.22em 0 0.28em;
  letter-spacing: 0.12em;
}
.radio__mood-btn:last-child {
  border-right: none;
}
.radio__mood-btn:hover,
.radio__mood-btn:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}
.radio__mood-btn[aria-pressed="true"] {
  background: #000;
  color: #fff;
}
.radio__mood-btn[aria-pressed="true"]:hover,
.radio__mood-btn[aria-pressed="true"]:focus-visible {
  background: #fff;
  color: #000;
}

.radio__track {
  display: block;
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.radio__track-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
/* Inverted "station ID" block. VT323 is single-weight, so font-weight: bold
   doesn't render — colour inversion is what carries the emphasis. */
.radio__track-artist {
  background: #000;
  color: #fff;
  padding: 0 0.35em;
  margin: 0 0.05em;
  letter-spacing: 0.06em;
}
.radio__track-title {
  margin-left: 0.15em;
}

.radio__seek {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72em;
  letter-spacing: 0.06em;
}
.radio__seek-bar {
  flex: 1;
  position: relative;
  height: 10px;
  box-sizing: border-box;
  background: #000;
  border: 2px solid #000;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}
.radio__seek-bar:hover,
.radio__seek-bar:focus-visible {
  outline: none;
}
.radio__seek-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: #00c800;
  pointer-events: none;
}
.radio__seek-bar.is-disabled {
  pointer-events: none;
}
.radio__seek-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  background: #000;
  color: #00c800;
  border: 2px solid #000;
  padding: 0 0.45em;
  /* Stable width so the bar doesn't grow when the readout collapses to "—:—". */
  min-width: 6.6em;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 3px #00c800, 0 0 1px #00c800;
}

@media (max-width: 640px), (hover: none) {
  #radio-popout { display: none; }
}
@media (max-width: 640px) {
  .radio {
    right: 1em;
    bottom: 1em;
    width: 200px;
    box-shadow: 3px 3px 0 #000;
  }
}

/* Top bar with exit-to-index link, mirrors style.css for consistency
   on radio.html (which doesn't load style.css). */
body.radio-page .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25em 0.8em;
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
  z-index: 100;
  font-family: vtFont, "Courier New", monospace;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
body.radio-page .top-bar a,
body.radio-page .top-bar a:visited {
  color: inherit;
  text-decoration: none;
  padding: 0 0.4em;
}
body.radio-page .top-bar a:hover,
body.radio-page .top-bar a:focus {
  background: #000;
  color: #fff;
  outline: none;
}

/* radio.html — floats the popup-sized radio at the center of the page
   over the site's green background when opened standalone. */
body.radio-page {
  margin: 0;
  padding: 0;
  background: #00c800;
  color: #000;
  font-family: vtFont, "Courier New", monospace;
  font-size: 22px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bee cursor only while the radio is rendering a new track. */
body:has(#radio-scope-wrap.is-loading),
body:has(#radio-scope-wrap.is-loading) * {
  cursor: url(/bee.png) 8 0, auto;
}
body.radio-page .radio {
  position: static;
}
body.radio-page #radio-popout {
  display: none;
}

/* Popup variant — radio.html loaded into the 290×290 popout window.
   Fills the window edge-to-edge instead of floating in the middle.
   Breakpoint sits well above the popup size to absorb any OS/browser
   chrome that bumps the inner width above 290. */
@media (max-width: 600px) {
  body.radio-page .top-bar { display: none; }
  body.radio-page {
    background: #fff;
    display: block;
  }
  body.radio-page .radio {
    width: 100%;
    border: none;
    box-shadow: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  body.radio-page .radio__body {
    flex: 1;
    padding: 0.7em 0.8em 0.8em;
    gap: 0.6em;
  }
  body.radio-page .radio__scope {
    height: 72px;
  }
  body.radio-page .radio__scope-loader {
    font-size: 26px;
  }
}

/* CRT scanlines + vignette — matches style.css for site-wide consistency */
body.radio-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0 1px,
    transparent 1px 3px
  );
}
body.radio-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
}