:root {
  --bg:
    #080808;

  --panel:
    rgba(18, 18, 18, 0.78);

  --border:
    rgba(255, 255, 255, 0.09);

  --green:
    #56ffb0;

  /*
    All former accent colors now resolve
    to the same theme green.
  */

  --cyan:
    var(--green);

  --purple:
    var(--green);

  --pink:
    var(--green);

  --white:
    #f5f7ff;

  --muted:
    #aeb4bd;

  --terminal-dark:
    rgba(8, 8, 8, 0.88);

  --terminal-screen:
    #070707;

  --content-width:
    920px;
}

/* ============================
   Base
============================ */

* {
  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;
}

html {
  min-height:
    100%;

  scroll-behavior:
    smooth;
}

body {
  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;

  font-family:
    "Space Grotesk",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--white);

  background-color:
    #080808;

  background-image:
    url("bg.gif");

  background-repeat:
    repeat;

  background-size:
    auto;

  background-position:
    top left;

  overflow-x:
    hidden;
}

/* ============================
   Dark Background Overlay
============================ */

body::before {
  content:
    "";

  position:
    fixed;

  inset:
    0;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.48),
      rgba(0, 0, 0, 0.68)
    );

  pointer-events:
    none;

  z-index:
    -2;
}

/* ============================
   Green Ambient Glow
============================ */

body::after {
  content:
    "";

  position:
    fixed;

  inset:
    0;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(86, 255, 176, 0.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 50% 55%,
      rgba(86, 255, 176, 0.045),
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(86, 255, 176, 0.055),
      transparent 38%
    );

  pointer-events:
    none;

  z-index:
    -1;
}

/* ============================
   Rain
============================ */

#rain {
  position:
    fixed;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      transparent 0%,
      rgba(255, 255, 255, 0.12) 100%
    );

  background-size:
    2px 25px;

  opacity:
    0.12;

  animation:
    rain 0.35s
    linear infinite;

  z-index:
    0;
}

@keyframes rain {
  from {
    transform:
      translateY(-40px);
  }

  to {
    transform:
      translateY(40px);
  }
}

/* ============================
   Site Header
============================ */

.site-header {
  position:
    fixed;

  top:
    0;

  left:
    0;

  width:
    100%;

  min-height:
    64px;

  padding:
    0 28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 7, 0.94),
      rgba(20, 20, 20, 0.90),
      rgba(7, 7, 7, 0.94)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.48);

  z-index:
    100;
}

.site-header::after {
  content:
    "";

  position:
    absolute;

  left:
    6%;

  right:
    6%;

  bottom:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 255, 176, 0.35),
      var(--green),
      rgba(86, 255, 176, 0.35),
      transparent
    );

  opacity:
    0.85;

  box-shadow:
    0 0 10px
    rgba(86, 255, 176, 0.60),

    0 0 22px
    rgba(86, 255, 176, 0.22);
}

/* ============================
   Logo
============================ */

.logo {
  color:
    var(--white);

  font-size:
    23px;

  font-weight:
    700;

  letter-spacing:
    5px;

  text-decoration:
    none;
}

.logo strong {
  color:
    var(--white);

  font:
    inherit;

  text-shadow:
    none;
}

.logo-r,
.logo-x,
.logo-y,
.logo-z {
  color:
    var(--green);

  text-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.65),

    0 0 16px
    rgba(86, 255, 176, 0.28);
}

.logo-r {
  display:
    inline-block;

  transition:
    opacity 0.08s linear;
}

/* ============================
   Main
============================ */

main {
  position:
    relative;

  flex:
    1 0 auto;

  width:
    100%;

  z-index:
    1;
}

/* ============================
   Shared Glass
============================ */

.glass {
  background:
    var(--panel);

  backdrop-filter:
    blur(25px);

  -webkit-backdrop-filter:
    blur(25px);

  border:
    1px solid
    var(--border);

  box-shadow:
    0 15px 50px
    rgba(0, 0, 0, 0.62),

    0 0 40px
    rgba(86, 255, 176, 0.05);
}

/* ============================
   Player Section
============================ */

.hero {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    84px
    24px
    10px;
}

/* ============================
   Radio Terminal
============================ */

.radio-terminal {
  position:
    relative;

  width:
    min(
      var(--content-width),
      100%
    );

  padding:
    0;

  overflow:
    hidden;

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 24, 24, 0.92),
      rgba(7, 7, 7, 0.94)
    );

  transform-style:
    preserve-3d;

  transition:
    transform 0.2s ease-out,
    box-shadow 0.4s;

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.68),

    0 0 42px
    rgba(86, 255, 176, 0.07),

    0 0 72px
    rgba(86, 255, 176, 0.035);
}

.radio-terminal:hover {
  box-shadow:
    0 26px 70px
    rgba(0, 0, 0, 0.72),

    0 0 58px
    rgba(86, 255, 176, 0.11),

    0 0 90px
    rgba(86, 255, 176, 0.045);
}

/* ============================
   Radio Header
============================ */

.radio-terminal-header {
  position:
    relative;

  min-height:
    54px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  background:
    rgba(8, 8, 8, 0.82);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.radio-terminal-header::after {
  content:
    "";

  position:
    absolute;

  left:
    8%;

  right:
    8%;

  bottom:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 255, 176, 0.35),
      var(--green),
      rgba(86, 255, 176, 0.35),
      transparent
    );

  opacity:
    0.90;

  box-shadow:
    0 0 10px
    rgba(86, 255, 176, 0.65),

    0 0 20px
    rgba(86, 255, 176, 0.24);

  pointer-events:
    none;

  z-index:
    3;
}

.radio-header-right {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.radio-status-badge {
  padding:
    5px 9px;

  border:
    1px solid
    rgba(86, 255, 176, 0.22);

  border-radius:
    999px;

  color:
    var(--green);

  background:
    rgba(86, 255, 176, 0.06);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.2px;

  box-shadow:
    inset 0 0 12px
    rgba(86, 255, 176, 0.05),

    0 0 12px
    rgba(86, 255, 176, 0.04);
}

/* ============================
   Live Dot
============================ */

.live-dot {
  flex:
    0 0 auto;

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 8px
    var(--green),

    0 0 18px
    rgba(86, 255, 176, 0.70);

  animation:
    livePulse 1.4s
    ease-in-out infinite;
}

@keyframes livePulse {
  0%,
  100% {
    opacity:
      0.68;
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.18);
  }
}

/* ============================
   Clock
============================ */

#clock {
  color:
    var(--muted);

  font-size:
    12px;

  letter-spacing:
    1px;

  white-space:
    nowrap;
}

/* ============================
   Radio Screen
============================ */

.radio-screen {
  position:
    relative;

  width:
    calc(100% - 20px);

  margin:
    10px;

  padding:
    18px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    12px;

  background:
    rgba(6, 6, 6, 0.92);

  box-shadow:
    inset 0 0 35px
    rgba(0, 0, 0, 0.82),

    0 0 18px
    rgba(86, 255, 176, 0.035);
}

.radio-screen::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    4;

  box-shadow:
    inset 0 0 30px
    rgba(86, 255, 176, 0.025),

    inset 0 0 50px
    rgba(86, 255, 176, 0.018);
}

/* ============================
   Radio Scanlines
============================ */

.radio-scanlines {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    3;

  opacity:
    0.045;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px
    );

  mix-blend-mode:
    screen;
}

/* ============================
   Player Body
============================ */

.player-body {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    220px
    minmax(0, 1fr)
    170px;

  align-items:
    center;

  gap:
    20px;

  z-index:
    2;
}

/* ============================
   Artwork
============================ */

.album-monitor {
  min-width:
    0;
}

.album {
  width:
    220px;

  height:
    220px;

  overflow:
    hidden;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      rgba(25, 25, 25, 0.96),
      rgba(8, 8, 8, 0.96)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  box-shadow:
    inset 0 0 24px
    rgba(0, 0, 0, 0.55),

    0 12px 28px
    rgba(0, 0, 0, 0.52);
}

.album img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border:
    0;

  transition:
    transform 0.35s,
    opacity 0.25s;
}

.album img:hover {
  transform:
    scale(1.025);
}

/* ============================
   Track Information
============================ */

.info {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;
}

.metadata-label {
  margin-bottom:
    8px;

  color:
    rgba(174, 180, 189, 0.58);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    1.4px;
}

.info h1 {
  margin-bottom:
    5px;

  font-size:
    clamp(26px, 4vw, 38px);

  line-height:
    1.08;

  overflow-wrap:
    anywhere;
}

.info h3 {
  min-height:
    22px;

  margin-bottom:
    4px;

  color:
    var(--green);

  font-size:
    17px;

  font-weight:
    400;

  overflow-wrap:
    anywhere;

  text-shadow:
    0 0 12px
    rgba(86, 255, 176, 0.20);
}

/* ============================
   Duck CRT Console
============================ */

.duck-console {
  width:
    170px;

  max-width:
    100%;

  padding:
    9px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    12px;

  background:
    rgba(12, 12, 12, 0.78);

  box-shadow:
    inset 0 0 22px
    rgba(0, 0, 0, 0.48),

    0 10px 24px
    rgba(0, 0, 0, 0.34),

    0 0 18px
    rgba(86, 255, 176, 0.03);
}

.duck-label {
  width:
    100%;

  color:
    rgba(174, 180, 189, 0.58);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.25px;

  text-align:
    center;
}

.duck-frame {
  position:
    relative;

  width:
    150px;

  height:
    150px;

  max-width:
    100%;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    9px;

  background:
    #050505;

  box-shadow:
    inset 0 0 18px
    rgba(0, 0, 0, 0.72),

    inset 0 0 28px
    rgba(86, 255, 176, 0.025),

    0 0 12px
    rgba(86, 255, 176, 0.05);
}

.duck-frame img {
  position:
    relative;

  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    150px;

  max-height:
    150px;

  object-fit:
    contain;

  z-index:
    1;

  filter:
    contrast(1.05)
    saturate(0.96)
    brightness(0.96);
}

.duck-frame::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    2;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      rgba(0, 0, 0, 0.12) 2px,
      rgba(0, 0, 0, 0.12) 4px
    );

  opacity:
    0.58;

  mix-blend-mode:
    multiply;
}

.duck-frame::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    3;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.075),
      transparent 22%,
      transparent 68%,
      rgba(86, 255, 176, 0.025)
    ),
    radial-gradient(
      ellipse at center,
      transparent 46%,
      rgba(0, 0, 0, 0.18) 75%,
      rgba(0, 0, 0, 0.48) 100%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(86, 255, 176, 0.035),
      transparent 62%
    );

  box-shadow:
    inset 0 0 14px
    rgba(255, 255, 255, 0.025),

    inset 0 0 28px
    rgba(0, 0, 0, 0.42);

  animation:
    duckCrtFlicker 2.8s
    steps(2, end)
    infinite;
}

@keyframes duckCrtFlicker {
  0%,
  18%,
  22%,
  63%,
  67%,
  100% {
    opacity:
      1;
  }

  20% {
    opacity:
      0.93;
  }

  65% {
    opacity:
      0.96;
  }
}

/* ============================
   Playback Row
============================ */

.playback-row {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  margin-top:
    16px;
}

/* ============================
   Play Button
============================ */

.controls {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;
}

.controls button {
  width:
    52px;

  height:
    52px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    19px;

  color:
    var(--white);

  background:
    linear-gradient(
      145deg,
      rgba(34, 34, 34, 0.96),
      rgba(10, 10, 10, 0.98)
    );

  box-shadow:
    inset 0 0 16px
    rgba(255, 255, 255, 0.025),

    0 0 18px
    rgba(86, 255, 176, 0.065);

  transition:
    transform 0.22s,
    border-color 0.22s,
    box-shadow 0.22s,
    color 0.22s;
}

.controls button:hover {
  color:
    var(--green);

  border-color:
    rgba(86, 255, 176, 0.48);

  transform:
    scale(1.06);

  box-shadow:
    inset 0 0 18px
    rgba(86, 255, 176, 0.07),

    0 0 20px
    rgba(86, 255, 176, 0.22);
}

.controls button:focus-visible {
  outline:
    2px solid
    var(--green);

  outline-offset:
    3px;
}

/* ============================
   Real Audio Visualizer
============================ */

.equalizer {
  position:
    relative;

  flex:
    0 0 240px;

  width:
    240px;

  height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    5px;

  padding:
    4px 0;
}

.equalizer::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    50%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 255, 176, 0.08),
      rgba(86, 255, 176, 0.20),
      rgba(86, 255, 176, 0.08),
      transparent
    );

  pointer-events:
    none;
}

.equalizer div {
  position:
    relative;

  flex:
    0 0 5px;

  width:
    5px;

  height:
    46px;

  border-radius:
    999px;

  background:
    linear-gradient(
      to top,
      rgba(86, 255, 176, 0.72),
      var(--green)
    );

  box-shadow:
    0 0 5px
    rgba(86, 255, 176, 0.30);

  transform:
    scaleY(0.08);

  transform-origin:
    center center;

  opacity:
    0.60;

  will-change:
    transform,
    opacity;

  z-index:
    1;
}

.equalizer div:nth-child(3n) {
  box-shadow:
    0 0 7px
    rgba(86, 255, 176, 0.38);
}

.equalizer div:nth-child(4n) {
  background:
    linear-gradient(
      to top,
      rgba(86, 255, 176, 0.62),
      #baffdb
    );
}

/* ============================
   Volume Controls
============================ */

.volume-control {
  width:
    fit-content;

  max-width:
    100%;

  margin-top:
    9px;

  padding:
    6px 8px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  border:
    1px solid
    rgba(86, 255, 176, 0.10);

  border-radius:
    7px;

  background:
    rgba(12, 12, 12, 0.78);

  box-shadow:
    inset 0 0 14px
    rgba(0, 0, 0, 0.32),

    0 0 12px
    rgba(86, 255, 176, 0.025);
}

.volume-label {
  flex:
    0 0 auto;

  color:
    rgba(174, 180, 189, 0.48);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.1px;
}

.volume-mute {
  flex:
    0 0 auto;

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(86, 255, 176, 0.18);

  border-radius:
    6px;

  color:
    var(--white);

  background:
    rgba(24, 24, 24, 0.92);

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    13px;

  line-height:
    1;

  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.volume-mute:hover {
  border-color:
    rgba(86, 255, 176, 0.55);

  box-shadow:
    0 0 12px
    rgba(86, 255, 176, 0.16);

  transform:
    translateY(-1px);
}

.volume-mute:focus-visible {
  outline:
    2px solid
    var(--green);

  outline-offset:
    2px;
}

.volume-slider {
  --volume-fill:
    80%;

  width:
    120px;

  min-width:
    55px;

  height:
    4px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    0;

  border-radius:
    999px;

  outline:
    none;

  cursor:
    pointer;

  background:
    linear-gradient(
      to right,
      var(--green) 0%,
      var(--green) var(--volume-fill),
      rgba(255, 255, 255, 0.12) var(--volume-fill),
      rgba(255, 255, 255, 0.12) 100%
    );

  box-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.14);
}

.volume-slider::-webkit-slider-thumb {
  width:
    14px;

  height:
    14px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    2px solid
    #090909;

  border-radius:
    50%;

  background:
    var(--white);

  box-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.70),

    0 0 14px
    rgba(86, 255, 176, 0.30);
}

.volume-slider::-moz-range-thumb {
  width:
    11px;

  height:
    11px;

  border:
    2px solid
    #090909;

  border-radius:
    50%;

  background:
    var(--white);

  box-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.70),

    0 0 14px
    rgba(86, 255, 176, 0.30);
}

.volume-value {
  flex:
    0 0 auto;

  min-width:
    31px;

  color:
    var(--green);

  font-size:
    9px;

  font-weight:
    700;

  text-align:
    right;

  text-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.24);
}

/* ============================
   Player Metadata Row
============================ */

.player-meta-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    10px;
}

/* ============================
   Stream Console
============================ */

.stream-console {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    7px 9px;

  width:
    fit-content;

  max-width:
    100%;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    6px;

  background:
    rgba(12, 12, 12, 0.78);
}

.stream-console-label {
  color:
    rgba(174, 180, 189, 0.48);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.2px;
}

.stream-state {
  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    0.35px;
}

/* ============================
   Listener Console
============================ */

.listener-console {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 9px;

  width:
    fit-content;

  border:
    1px solid
    rgba(86, 255, 176, 0.10);

  border-radius:
    6px;

  background:
    rgba(12, 12, 12, 0.78);

  box-shadow:
    inset 0 0 12px
    rgba(86, 255, 176, 0.025);
}

.listener-console-label {
  color:
    rgba(174, 180, 189, 0.48);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.2px;
}

.listener-count {
  color:
    var(--green);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.5px;

  text-shadow:
    0 0 8px
    rgba(86, 255, 176, 0.30);
}

/* ============================
   Shared Terminal Text
============================ */

.terminal-channel {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  font-size:
    13px;

  font-weight:
    500;

  letter-spacing:
    1.4px;
}

.terminal-label {
  color:
    var(--muted);
}

.terminal-divider {
  color:
    rgba(255, 255, 255, 0.28);
}

.terminal-room {
  color:
    var(--green);

  text-shadow:
    0 0 10px
    rgba(86, 255, 176, 0.38);
}

/* ============================
   IRC Section
============================ */

.chat-section {
  width:
    min(
      var(--content-width),
      calc(100% - 48px)
    );

  margin:
    10px auto 20px;

  padding:
    0;
}

/* ============================
   IRC Terminal
============================ */

.chat-terminal {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  border-radius:
    22px;

  padding-bottom:
    10px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 24, 24, 0.92),
      rgba(7, 7, 7, 0.94)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.68),

    0 0 42px
    rgba(86, 255, 176, 0.07),

    0 0 72px
    rgba(86, 255, 176, 0.035);
}

/* ============================
   IRC Header
============================ */

.terminal-header {
  position:
    relative;

  min-height:
    54px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  background:
    rgba(8, 8, 8, 0.82);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);
}

.terminal-header::after {
  content:
    "";

  position:
    absolute;

  left:
    8%;

  right:
    8%;

  bottom:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 255, 176, 0.35),
      var(--green),
      rgba(86, 255, 176, 0.35),
      transparent
    );

  opacity:
    0.90;

  box-shadow:
    0 0 10px
    rgba(86, 255, 176, 0.65),

    0 0 20px
    rgba(86, 255, 176, 0.24);

  pointer-events:
    none;

  z-index:
    3;
}

.terminal-dot {
  flex:
    0 0 auto;

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 8px
    var(--green),

    0 0 18px
    rgba(86, 255, 176, 0.7);

  animation:
    terminalPulse 1.8s
    ease-in-out infinite;
}

@keyframes terminalPulse {
  0%,
  100% {
    opacity:
      0.65;
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.18);
  }
}

.terminal-status {
  flex:
    0 0 auto;

  padding:
    5px 9px;

  border:
    1px solid
    rgba(86, 255, 176, 0.22);

  border-radius:
    999px;

  color:
    var(--green);

  background:
    rgba(86, 255, 176, 0.06);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.2px;

  box-shadow:
    inset 0 0 12px
    rgba(86, 255, 176, 0.05);
}

/* ============================
   IRC Screen
============================ */

.terminal-screen {
  position:
    relative;

  width:
    calc(100% - 20px);

  height:
    520px;

  margin:
    10px 10px 0;

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    var(--terminal-screen);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  box-shadow:
    inset 0 0 35px
    rgba(0, 0, 0, 0.82),

    0 0 18px
    rgba(86, 255, 176, 0.035);
}

.terminal-screen iframe {
  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    100%;

  border:
    0;

  z-index:
    1;
}

/* ============================
   Scanlines
============================ */

.scanlines {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    2;

  opacity:
    0.10;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.09) 4px
    );

  mix-blend-mode:
    screen;
}

.terminal-screen::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    3;

  box-shadow:
    inset 0 0 30px
    rgba(86, 255, 176, 0.025),

    inset 0 0 50px
    rgba(86, 255, 176, 0.018);
}

/* ============================
   Footer
============================ */

footer {
  position:
    relative;

  flex:
    0 0 auto;

  width:
    100%;

  margin-top:
    auto;

  text-align:
    center;

  padding:
    14px 16px;

  color:
    var(--muted);

  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 7, 0.96),
      rgba(22, 22, 22, 0.92),
      rgba(7, 7, 7, 0.96)
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);

  font-size:
    12px;

  line-height:
    1.4;

  letter-spacing:
    0.2px;

  box-shadow:
    0 -10px 30px
    rgba(0, 0, 0, 0.52),

    0 4px 24px
    rgba(86, 255, 176, 0.045),

    0 8px 40px
    rgba(86, 255, 176, 0.025);

  z-index:
    2;
}

footer::before {
  content:
    "";

  position:
    absolute;

  bottom:
    -1px;

  left:
    8%;

  right:
    8%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 255, 176, 0.35),
      var(--green),
      rgba(86, 255, 176, 0.35),
      transparent
    );

  opacity:
    0.90;

  box-shadow:
    0 0 10px
    rgba(86, 255, 176, 0.65),

    0 0 20px
    rgba(86, 255, 176, 0.24);

  pointer-events:
    none;
}

footer::after {
  content:
    "";

  position:
    absolute;

  left:
    15%;

  right:
    15%;

  bottom:
    0;

  height:
    22px;

  background:
    radial-gradient(
      ellipse at center bottom,
      rgba(86, 255, 176, 0.08),
      rgba(86, 255, 176, 0.035) 45%,
      transparent 75%
    );

  pointer-events:
    none;
}

footer a {
  position:
    relative;

  z-index:
    1;

  color:
    var(--green);

  text-decoration:
    none;

  font-weight:
    500;

  transition:
    color 0.25s,
    text-shadow 0.25s;
}

footer a:hover {
  color:
    var(--white);

  text-shadow:
    0 0 12px
    var(--green);
}

/* ============================
   Tablet
   Keep Player Horizontal
============================ */

@media (max-width: 900px) {

  .site-header {
    min-height:
      58px;

    padding:
      0 18px;
  }

  .logo {
    font-size:
      20px;

    letter-spacing:
      3px;
  }

  .hero {
    padding:
      72px
      16px
      8px;
  }

  .player-body {
    grid-template-columns:
      minmax(150px, 180px)
      minmax(0, 1fr)
      minmax(120px, 145px);

    gap:
      14px;
  }

  .album-monitor {
    width:
      100%;

    min-width:
      0;

    margin:
      0;
  }

  .album {
    width:
      100%;

    max-width:
      180px;

    height:
      auto;

    aspect-ratio:
      1 / 1;
  }

  .info {
    min-width:
      0;

    padding:
      0;
  }

  .info h1 {
    font-size:
      clamp(22px, 3.8vw, 32px);
  }

  .info h3 {
    font-size:
      15px;
  }

  .equalizer {
    flex:
      0 1 190px;

    width:
      min(190px, 100%);

    gap:
      3px;
  }

  .equalizer div {
    flex-basis:
      4px;

    width:
      4px;
  }

  .volume-slider {
    width:
      100px;
  }

  .duck-console {
    width:
      100%;

    min-width:
      0;

    padding:
      7px;
  }

  .duck-frame {
    width:
      100%;

    max-width:
      130px;

    height:
      auto;

    aspect-ratio:
      1 / 1;
  }

  .duck-frame img {
    max-width:
      100%;

    max-height:
      100%;
  }

  .chat-section {
    width:
      calc(100% - 32px);

    margin-top:
      8px;
  }

  .terminal-screen {
    height:
      500px;
  }

}

/* ============================
   Small Mobile
   Keep Player Horizontal
============================ */

@media (max-width: 520px) {

  .site-header {
    min-height:
      54px;

    padding:
      0 14px;
  }

  .logo {
    font-size:
      18px;

    letter-spacing:
      2px;
  }

  .hero {
    padding:
      64px
      5px
      5px;
  }

  .radio-terminal {
    border-radius:
      14px;
  }

  .radio-terminal-header {
    min-height:
      44px;

    padding:
      0 9px;

    gap:
      8px;
  }

  .terminal-channel {
    gap:
      5px;

    font-size:
      10px;

    letter-spacing:
      0.6px;
  }

  .live-dot {
    width:
      6px;

    height:
      6px;
  }

  .radio-header-right {
    gap:
      6px;
  }

  .radio-status-badge {
    display:
      none;
  }

  #clock {
    font-size:
      9px;

    letter-spacing:
      0.4px;
  }

  .radio-screen {
    width:
      calc(100% - 10px);

    margin:
      5px;

    padding:
      7px;

    border-radius:
      9px;
  }

  .player-body {
    grid-template-columns:
      minmax(76px, 0.85fr)
      minmax(0, 1.7fr)
      minmax(66px, 0.75fr);

    align-items:
      center;

    justify-items:
      stretch;

    gap:
      6px;
  }

  .album-monitor {
    width:
      100%;

    min-width:
      0;

    margin:
      0;

    text-align:
      center;
  }

  .album {
    width:
      100%;

    max-width:
      105px;

    height:
      auto;

    aspect-ratio:
      1 / 1;

    margin:
      0 auto;

    border-radius:
      7px;
  }

  .metadata-label {
    width:
      100%;

    margin-bottom:
      4px;

    font-size:
      6px;

    letter-spacing:
      0.65px;

    text-align:
      center;
  }

  .info {
    width:
      100%;

    min-width:
      0;

    padding:
      0;

    align-items:
      center;

    text-align:
      center;
  }

  .info h1 {
    width:
      100%;

    margin-bottom:
      3px;

    font-size:
      clamp(14px, 4.4vw, 22px);

    line-height:
      1.04;

    text-align:
      center;
  }

  .info h3 {
    width:
      100%;

    min-height:
      14px;

    margin-bottom:
      0;

    font-size:
      clamp(9px, 2.7vw, 12px);

    line-height:
      1.1;

    text-align:
      center;
  }

  .playback-row {
    width:
      100%;

    min-width:
      0;

    justify-content:
      center;

    gap:
      5px;

    margin-top:
      7px;
  }

  .controls {
    flex:
      0 0 auto;

    justify-content:
      center;
  }

  .controls button {
    width:
      34px;

    height:
      34px;

    font-size:
      13px;
  }

  .equalizer {
    flex:
      0 1 92px;

    width:
      92px;

    min-width:
      0;

    height:
      34px;

    gap:
      2px;

    padding:
      2px 0;
  }

  .equalizer div {
    flex:
      0 0 2px;

    width:
      2px;

    height:
      30px;
  }

  .volume-control {
    width:
      100%;

    max-width:
      150px;

    margin-top:
      5px;

    padding:
      4px 5px;

    gap:
      4px;
  }

  .volume-label {
    font-size:
      5.5px;

    letter-spacing:
      0.4px;
  }

  .volume-mute {
    width:
      23px;

    height:
      23px;

    font-size:
      10px;

    border-radius:
      5px;
  }

  .volume-slider {
    flex:
      1 1 auto;

    width:
      auto;

    min-width:
      28px;

    height:
      3px;
  }

  .volume-slider::-webkit-slider-thumb {
    width:
      11px;

    height:
      11px;
  }

  .volume-slider::-moz-range-thumb {
    width:
      8px;

    height:
      8px;
  }

  .volume-value {
    min-width:
      25px;

    font-size:
      7px;
  }

  .player-meta-row {
    width:
      100%;

    margin-top:
      6px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      3px;
  }

  .stream-console,
  .listener-console {
    width:
      100%;

    max-width:
      150px;

    min-width:
      0;

    justify-content:
      center;

    gap:
      4px;

    padding:
      4px 5px;

    text-align:
      center;

    border-radius:
      5px;
  }

  .stream-console-label,
  .listener-console-label {
    font-size:
      6px;

    letter-spacing:
      0.6px;
  }

  .stream-state,
  .listener-count {
    min-width:
      0;

    font-size:
      8px;

    line-height:
      1.1;
  }

  .stream-state {
    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }

  .duck-console {
    width:
      100%;

    min-width:
      0;

    max-width:
      none;

    margin:
      0;

    padding:
      4px;

    gap:
      4px;

    border-radius:
      8px;
  }

  .duck-label {
    font-size:
      5.5px;

    letter-spacing:
      0.45px;

    white-space:
      nowrap;
  }

  .duck-frame {
    width:
      100%;

    max-width:
      90px;

    height:
      auto;

    aspect-ratio:
      1 / 1;

    margin:
      0 auto;

    border-radius:
      6px;
  }

  .duck-frame img {
    width:
      100%;

    height:
      100%;

    max-width:
      100%;

    max-height:
      100%;

    object-fit:
      contain;
  }

  .chat-section {
    width:
      calc(100% - 10px);

    margin-top:
      5px;

    margin-bottom:
      10px;
  }

  .chat-terminal {
    border-radius:
      14px;

    padding-bottom:
      5px;
  }

  .terminal-header {
    min-height:
      44px;

    padding:
      0 9px;
  }

  .terminal-status {
    padding:
      4px 6px;

    font-size:
      8px;
  }

  .terminal-screen {
    width:
      calc(100% - 10px);

    height:
      460px;

    margin:
      5px 5px 0;

    border-radius:
      8px;
  }

  footer {
    padding:
      11px;

    font-size:
      11px;
  }

}

/* ============================
   Very Small Screens
============================ */

@media (max-width: 380px) {

  .hero {
    padding-left:
      3px;

    padding-right:
      3px;
  }

  .radio-screen {
    width:
      calc(100% - 8px);

    margin:
      4px;

    padding:
      5px;
  }

  .player-body {
    grid-template-columns:
      minmax(64px, 0.8fr)
      minmax(0, 1.75fr)
      minmax(56px, 0.7fr);

    gap:
      4px;
  }

  .metadata-label {
    font-size:
      5px;

    letter-spacing:
      0.35px;
  }

  .album {
    max-width:
      88px;

    border-radius:
      6px;
  }

  .info h1 {
    font-size:
      clamp(12px, 4.1vw, 17px);
  }

  .info h3 {
    font-size:
      clamp(8px, 2.5vw, 10px);
  }

  .playback-row {
    gap:
      3px;

    margin-top:
      5px;
  }

  .controls button {
    width:
      30px;

    height:
      30px;

    font-size:
      11px;
  }

  .equalizer {
    flex:
      0 1 74px;

    width:
      74px;

    height:
      30px;

    gap:
      1px;
  }

  .equalizer div {
    flex-basis:
      2px;

    width:
      2px;

    height:
      26px;
  }

  .volume-control {
    max-width:
      125px;

    padding:
      3px 4px;

    gap:
      3px;
  }

  .volume-label {
    font-size:
      5px;
  }

  .volume-mute {
    width:
      21px;

    height:
      21px;

    font-size:
      9px;
  }

  .volume-value {
    min-width:
      23px;

    font-size:
      6.5px;
  }

  .player-meta-row {
    gap:
      2px;

    margin-top:
      4px;
  }

  .stream-console,
  .listener-console {
    padding:
      3px 4px;

    gap:
      3px;
  }

  .stream-console-label,
  .listener-console-label {
    font-size:
      5px;

    letter-spacing:
      0.35px;
  }

  .stream-state,
  .listener-count {
    font-size:
      7px;
  }

  .duck-console {
    padding:
      3px;

    gap:
      3px;

    border-radius:
      6px;
  }

  .duck-label {
    font-size:
      4.5px;

    letter-spacing:
      0.2px;
  }

  .duck-frame {
    max-width:
      74px;

    border-radius:
      5px;
  }

}

/* ============================
   Ultra Narrow Screens
============================ */

@media (max-width: 330px) {

  .radio-terminal-header {
    padding:
      0 7px;
  }

  .terminal-channel {
    font-size:
      9px;

    gap:
      4px;
  }

  #clock {
    font-size:
      8px;
  }

  .player-body {
    grid-template-columns:
      minmax(56px, 0.78fr)
      minmax(0, 1.8fr)
      minmax(50px, 0.66fr);

    gap:
      3px;
  }

  .album {
    max-width:
      76px;
  }

  .metadata-label {
    display:
      none;
  }

  .info h1 {
    font-size:
      12px;
  }

  .info h3 {
    font-size:
      8px;
  }

  .controls button {
    width:
      27px;

    height:
      27px;

    font-size:
      10px;
  }

  .equalizer {
    flex-basis:
      64px;

    width:
      64px;

    height:
      27px;

    gap:
      1px;
  }

  .equalizer div {
    flex-basis:
      1.5px;

    width:
      1.5px;

    height:
      23px;
  }

  .volume-control {
    max-width:
      105px;
  }

  .volume-label,
  .volume-value {
    display:
      none;
  }

  .stream-console-label,
  .listener-console-label {
    display:
      none;
  }

  .duck-label {
    font-size:
      4px;
  }

  .duck-frame {
    max-width:
      64px;
  }

}

/* ============================
   Reduced Motion
============================ */

@media (
  prefers-reduced-motion: reduce
) {

  html {
    scroll-behavior:
      auto;
  }

  #rain,
  .live-dot,
  .terminal-dot {
    animation:
      none;
  }

  .duck-frame::after {
    animation:
      none;
  }

  .player {
    transform:
      none !important;
  }

}