* {
  box-sizing: border-box;
}

@font-face {
    font-family: "Digraville Mono";
    src: url("assets/fonts/digraville-mono.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Digraville Mono";
    src: url("assets/fonts/digraville-mono-bold.ttf") format("truetype");
    font-weight: 700 900;
    font-style: normal;
    font-display: block;
}

:root {
  --retro-font: "Digraville Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --retro-ui-font: "Digraville Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --retro-title-font: "Digraville Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --site-width: 900px;
  --site-height: 675px;
  --viewport-frame-width: min(calc(100vw - 16px), calc(133.333vh - 21px));
  --page-width: 820px;
  --left-col-width: 170px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --control-sm: 20px;
  --control-md: 24px;
  --control-lg: 32px;
  --border-thin: 1px;
  --border-ui: 2px;
  --border-panel: 4px;
  --green-deep: #003312;
  --green-panel: #004000;
  --green-mid: #00501a;
  --cream: #ffffcc;
  --paper: #ffffe6;
  --chrome: #c0c0c0;
  --panel-gray: #eeeeee;
  --shadow-hard: 4px 4px 0 rgba(0,0,0,.45);
  --z-photo: 90;
  --duration-fast: .12s;
  --duration-normal: .32s;
}

html {
  min-height: 100%;
}

button, a, [role="button"] {
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #000;
  font: 12px/1.22 var(--retro-font);
  background-color: var(--green-deep);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 6px);
}

body.is-loading {
  overflow: hidden;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), transparent 18%, transparent 82%, rgba(0,0,0,.5)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 6px),
    var(--green-deep);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

body.is-loaded .boot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loaded .boot-screen[aria-hidden="true"] {
  display: none;
}

.boot-window {
  width: min(420px, calc(100vw - 32px));
  border: var(--border-panel) ridge var(--chrome);
  background: var(--chrome);
  box-shadow: var(--shadow-hard);
  font-family: var(--retro-font);
}

.boot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 2px 8px;
  border-bottom: 2px solid #001800;
  color: #fff;
  background: var(--green-panel);
  font-weight: 700;
  line-height: 1;
}

.boot-led {
  width: 10px;
  height: 10px;
  border: 1px solid #900;
  background: #f00;
  box-shadow: 0 0 6px #f00;
  animation: bootBlink .8s steps(2, end) infinite;
}

.boot-body {
  padding: 12px;
  border: 2px inset #fff;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px),
    #001f0c;
  color: #ffff66;
  text-align: center;
}

.boot-logo {
  display: inline-block;
  margin: 0 auto 12px;
  padding: 4px 14px;
  border: 3px outset #00802a;
  color: #ffff99;
  background: #004d18;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 #001800, 0 0 8px #00b030;
  box-shadow: 4px 4px 0 #001800;
}

.boot-tape {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 170px;
  height: 74px;
  margin: 0 auto 10px;
  padding: 12px 20px;
  border: 4px ridge #808080;
  background:
    repeating-linear-gradient(0deg, #202820 0 2px, #151b18 2px 5px),
    #202020;
}

.boot-tape::before {
  content: "";
  position: absolute;
  right: 38px;
  bottom: 12px;
  left: 38px;
  height: 8px;
  border: 2px inset #a0a0a0;
  background: #99b36a;
}

.boot-tape span {
  width: 44px;
  height: 44px;
  border: 9px solid #070707;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #607060 0 12%, #111 12% 24%, #607060 24% 36%, #111 36% 48%, #607060 48% 60%, #111 60% 72%, #607060 72% 84%, #111 84% 100%);
  animation: bootSpin 1.2s linear infinite;
}

.boot-text {
  min-height: 18px;
  margin: 8px 0;
  color: #d8ff4f;
  font-weight: 700;
}

.boot-meter {
  width: min(280px, 100%);
  height: 16px;
  margin: 0 auto;
  padding: 2px;
  border: 2px inset #d8d8d8;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.18) 12px 14px),
    #102010;
}

.boot-meter i {
  display: block;
  width: 38%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, #a8ff38 0 8px, transparent 8px 12px);
  animation: bootMeter 1.1s steps(8, end) infinite;
}

@keyframes bootBlink {
  50% { opacity: .35; }
}

@keyframes bootSpin {
  to { transform: rotate(360deg); }
}

@keyframes bootMeter {
  0% { width: 18%; }
  50% { width: 86%; }
  100% { width: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-led,
  .boot-tape span,
  .boot-meter i {
    animation: none;
  }
}

@media (min-aspect-ratio: 4 / 3) and (min-width: 900px) {
  body {
    min-height: 100vh;
    padding: 12px 0;
    background-image:
      linear-gradient(90deg, rgba(0,0,0,.45), transparent 14%, transparent 86%, rgba(0,0,0,.45)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 6px);
  }
}

@media (min-width: 921px) and (min-aspect-ratio: 16 / 9) {
  body:not(.home-page) {
    min-height: 100vh;
    padding-right: max(0px, calc((100vw - var(--viewport-frame-width)) / 2));
    padding-left: max(0px, calc((100vw - var(--viewport-frame-width)) / 2));
  }
}

.seo-text {
  width: var(--page-width);
  max-width: calc(100vw - 12px);
  margin: var(--space-2) auto;
  padding: var(--space-2);
  border: var(--border-panel) ridge var(--chrome);
  color: #d7ff9e;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
    #003d17;
  font: 11px/1.3 var(--retro-font);
}

.seo-text p {
  margin: 4px 0;
}

.seo-text a {
  color: #ffff66;
  text-decoration: underline;
}

.seo-page {
  width: var(--site-width);
  max-width: calc(100vw - 16px);
  margin: var(--space-2) auto;
  padding: 6px;
  border: var(--border-panel) ridge var(--chrome);
  background: var(--chrome);
  font: 12px/1.22 var(--retro-font);
}

@media (min-width: 921px) and (min-aspect-ratio: 16 / 9) {
  .seo-page {
    width: var(--viewport-frame-width);
    max-width: var(--viewport-frame-width);
  }
}

.seo-page::before {
  content: "jecarchive.ru   *** ДИГРАВИЛЬ ФМ ***";
  display: block;
  height: 18px;
  margin: -6px -6px 0;
  padding: 2px var(--space-2);
  overflow: hidden;
  border-bottom: 2px solid #000;
  color: #fff;
  background: var(--green-panel);
  font: 11px/1 var(--retro-font);
  white-space: nowrap;
}

.seo-page h1 {
  margin: 0 -6px var(--space-2);
  padding: 5px var(--space-2);
  border-bottom: 2px solid #000;
  color: #ffff66;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 6px),
    #00501a;
  font: bold 18px/1.1 var(--retro-font);
  text-shadow: 2px 2px 0 #002b00;
}

.seo-page p,
.seo-page ul {
  margin: 6px 0;
}

.seo-page p > a:not(.direct-stream-link),
.error-page li > a {
  display: inline-block;
  max-width: 100%;
  padding: 1px 3px;
  border: 1px solid #8f8976;
  background: var(--cream);
  color: #004000;
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.seo-page p > a:not(.direct-stream-link):hover,
.error-page li > a:hover {
  background: #ffff99;
  color: #001f00;
}

.site-nav,
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 8px;
}

.site-nav a,
.breadcrumbs a,
.breadcrumbs span {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  color: #004000;
  text-decoration: underline;
}

.site-nav a:focus-visible,
.breadcrumbs a:focus-visible,
.track-search input:focus-visible,
.track-search button:focus-visible {
  outline: 2px solid #ffff66;
  outline-offset: 2px;
}

.home-seo {
  margin-top: 8px;
  padding: 0;
  border: 2px ridge var(--chrome);
  background: #ffffcc;
  color: #001f00;
  font: 12px/1.35 var(--retro-font);
  overflow: hidden;
}

.home-seo[open] {
  height: 150px;
}

.home-seo summary {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  color: #ffff66;
  background: var(--green-panel);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.home-seo summary::-webkit-details-marker {
  display: none;
}

.home-seo summary::before {
  content: "[+]";
  margin-right: 6px;
  color: #fff;
}

.home-seo[open] summary::before {
  content: "[-]";
}

.home-seo summary:focus-visible {
  outline: 2px solid #ffff66;
  outline-offset: -2px;
}

.home-seo summary span {
  min-width: 0;
  overflow: hidden;
  color: #ffff66;
  font: bold 13px/1.2 var(--retro-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-seo-body {
  height: 120px;
  max-height: 120px;
  padding: 6px 8px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--green-panel) #f7f7d0;
}

.home-seo p {
  margin: 6px 0;
}

.home-seo a,
.noscript-note a {
  color: #004000;
  font-weight: 700;
}

.noscript-note {
  margin: 0 0 8px;
  padding: 4px 6px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  color: #001f00;
  font: 12px/1.3 var(--retro-font);
}

.honeypot {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.track-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  margin: 8px 0;
  padding: 4px;
  border: 1px solid #8f8976;
  background: #efefef;
}

.track-search label {
  grid-column: 1 / -1;
  color: #004000;
  font-weight: 700;
}

.track-search input {
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 2px inset #fff;
  background: #ffffcc;
  font: 12px var(--retro-font);
}

.track-search button {
  min-height: 24px;
  padding: 2px 8px;
  border: 2px outset #fff;
  background: #d7d7d7;
  color: #004000;
  font: bold 12px var(--retro-font);
}

.track-search-status {
  grid-column: 1 / -1;
  min-height: 16px;
  color: #004000;
}

.seo-track-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  counter-reset: track;
  list-style: none;
}

.seo-track-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 52px 42px;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  padding: 2px var(--space-1);
  border: 1px solid #8f8976;
  background: #ffffcc;
  counter-increment: track;
}

.seo-track-list li::before {
  content: counter(track);
  color: #004000;
  font-weight: 700;
}

.seo-track-list a {
  min-width: 0;
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-track-list em {
  color: #555;
  font-style: normal;
  text-align: right;
}

.track-tag {
  justify-self: end;
  display: inline-block;
  min-width: 48px;
  max-width: 52px;
  padding: 1px 3px;
  border: 1px solid #00501a;
  background: #ffff99;
  color: #00501a;
  box-shadow: inset 1px 1px #fff;
  font: 700 9px/1 var(--retro-font);
  text-align: center;
  white-space: nowrap;
}

.track-tag.tag-new {
  background: #eaff70;
}

.track-tag.tag-top {
  border-color: #8a0000;
  background: #ffef66;
  color: #8a0000;
}

.track-tag-empty {
  visibility: hidden;
}

.seo-track-list li[hidden] {
  display: none;
}

.error-page {
  margin-top: 18px;
}

.error-page ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.change-list {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.change-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  font: 12px var(--retro-font);
}

.change-list li ul {
  grid-column: 2;
  margin: 3px 0 0;
  padding-left: 16px;
}

.change-list li li {
  display: list-item;
  padding: 1px 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.change-list time {
  color: #00501a;
  font-weight: bold;
  white-space: nowrap;
}

.change-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

a {
  color: #005b19;
  text-decoration: underline;
}

:where(a, button, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid #ffff66;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #003312;
}

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

.site {
  width: var(--site-width);
  height: var(--site-height);
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0 auto;
  table-layout: fixed;
  border: var(--border-panel) ridge var(--chrome);
  background: var(--chrome);
  box-shadow: none;
}

.site-col-left {
  width: var(--left-col-width);
}

.site-col-main {
  width: calc(var(--site-width) - var(--left-col-width));
}

.topbar {
  box-sizing: border-box;
  height: 22px;
  padding: 2px var(--space-2);
  color: #fff;
  background: var(--green-panel);
  border-bottom: 2px solid #000;
  font: 12px var(--retro-font);
  white-space: nowrap;
}

.topbar b {
  display: inline-block;
  margin-right: 20px;
}

.topbar-marquee {
  position: relative;
  display: inline-block;
  width: 570px;
  max-width: calc(100% - 150px);
  overflow: hidden;
  color: #ffff00;
  vertical-align: middle;
  white-space: nowrap;
}

.topbar-marquee span {
  display: inline-block;
  min-width: 100%;
  padding-left: 100%;
  will-change: transform;
  animation: topbarTicker 24s linear infinite;
}

.marquee-static {
  display: inline-block;
  max-width: 570px;
  overflow: hidden;
  color: #ffff00;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.led,
.red-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  background: #f00;
  box-shadow: 0 0 7px #f00;
  vertical-align: -1px;
}

.header {
  box-sizing: border-box;
  height: 58px;
  padding: 5px 8px;
  color: #fff;
  border-bottom: 2px solid #000;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 6px),
    #00501a;
}

.header-table {
  width: 100%;
}

.header-table td {
  vertical-align: middle;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.header-gif {
  width: 78px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid #fff;
  image-rendering: pixelated;
}

.css-logo {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  min-height: 58px;
  max-width: min(470px, calc(100vw - 330px));
  padding: 3px 14px 6px;
  color: #dfff62;
  background:
    linear-gradient(#0a6b21, #004414 58%, #002d0d);
  border: 3px solid #0b2a0d;
  border-top-color: #8dff41;
  border-left-color: #50b936;
  box-shadow:
    inset 0 0 0 3px #00651d,
    inset 0 -5px 0 #001f08,
    4px 4px 0 #001304,
    7px 7px 0 rgba(0,0,0,.45);
  font: 900 35px var(--retro-title-font);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    2px 0 0 #002b0b,
    -2px 0 0 #002b0b,
    0 2px 0 #002b0b,
    0 -2px 0 #002b0b,
    4px 4px 0 #001704,
    0 0 8px rgba(223,255,98,.35);
  white-space: nowrap;
}

.header-ads {
  width: 198px;
  text-align: right;
  white-space: nowrap;
}

.header-ads a {
  display: inline-block;
  margin-left: 4px;
  border: 2px ridge #00ff66;
  background: #000;
  box-shadow: 2px 2px 0 #001900;
  vertical-align: middle;
}

.header-ads img {
  display: block;
  width: 93px;
  height: 62px;
  image-rendering: auto;
}

.subtitle {
  margin-top: 5px;
  color: #ffff99;
  font: bold 11px var(--retro-font);
  text-transform: uppercase;
}

.header-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.weather-widget {
  display: inline-block;
  padding: 1px 4px;
  border: 1px solid #001a08;
  color: #003612;
  background: #ffffcc;
  box-shadow: 1px 1px 0 #001a08;
  font: bold 10px var(--retro-font);
  line-height: 1.1;
  white-space: nowrap;
}

.leftcol {
  width: var(--left-col-width);
  min-width: var(--left-col-width);
  max-width: var(--left-col-width);
  padding: var(--space-1);
  vertical-align: top;
  background: #d0d0d0;
  border-right: 2px ridge #fff;
}

.maincol {
  width: calc(var(--site-width) - var(--left-col-width));
  padding: var(--space-1);
  vertical-align: top;
  background: #dcdcdc;
}

.box,
.window {
  margin-bottom: var(--space-1);
  border: var(--border-ui) ridge #fff;
  border-right-color: #777;
  border-bottom-color: #777;
  background: var(--panel-gray);
}

.box {
  padding: var(--space-1);
}

.box-title,
.window-title {
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) var(--space-1);
  padding: 3px var(--space-2);
  color: #fff;
  background: var(--green-panel);
  border-bottom: 1px solid #000;
  font: bold 12px/1.12 var(--retro-font);
}

.window-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.rotation-total {
  flex: 1;
  color: #ffff99;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}

.rotation-link {
  color: inherit;
  text-decoration: none;
}

.rotation-link:hover {
  color: #ffff66;
  text-decoration: underline;
}

.win-buttons {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  align-items: center;
  height: 13px;
  margin-left: 4px;
}

.win-buttons i {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #b8ffb8;
  background: #003312;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.55);
}

.win-buttons .min::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 1px;
  background: #fff;
}

.win-buttons .max::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
}

.win-buttons .close::before,
.win-buttons .close::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 7px;
  height: 1px;
  background: #fff;
}

.win-buttons .close::before {
  transform: rotate(45deg);
}

.win-buttons .close::after {
  transform: rotate(-45deg);
}

.box p {
  margin: 4px 0;
  line-height: 1.18;
}

.leftcol .box:first-child p {
  font-size: 11px;
  line-height: 1.12;
  white-space: nowrap;
}

.leftcol .box:first-child b {
  display: inline-block;
  font-weight: 700;
}

.country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  min-width: 0;
  max-width: 100%;
  margin: 4px 0 2px;
  overflow: hidden;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 1px 3px;
  border: 1px solid #00501a;
  background: #ffffcc;
  color: #000;
  font: bold 9px var(--retro-font);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 1px 1px 0 #777;
}

.country-chip b {
  min-width: 0;
  overflow: hidden;
}

.country-chip em {
  flex: 0 0 auto;
  min-width: 8px;
  color: #00501a;
  font-style: normal;
  text-align: right;
}

.pixel-flag {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -2px;
  width: 18px;
  height: 12px;
  overflow: hidden;
  border: 1px solid #000;
  background: #ddd;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 1px 1px 0 rgba(0,0,0,.25);
}

.pixel-flag::before,
.pixel-flag::after {
  box-sizing: border-box;
}

.flag-fallback {
  display: inline-block;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, #f4f4f4 0 3px, #c6c6c6 3px 6px, #7f7f7f 6px 9px),
    #b9b9b9;
}

.flag-fallback::before {
  content: "";
}

.flag-ru {
  background: linear-gradient(to bottom, #fff 0 33%, #224fd0 33% 66%, #d81f2a 66% 100%);
}

.flag-by {
  background: linear-gradient(to right, transparent 0 4px, #c9152b 4px 100%);
}

.flag-by::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background:
    linear-gradient(45deg, #fff 0 25%, #c9152b 25% 50%, #fff 50% 75%, #c9152b 75% 100%);
  background-size: 4px 4px;
}

.flag-by::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #1f8f45;
}

.flag-ua {
  background: linear-gradient(to bottom, #1e6bff 0 50%, #ffd500 50% 100%);
}

.flag-us {
  background:
    linear-gradient(to bottom, #b22234 0 14%, #fff 14% 28%, #b22234 28% 42%, #fff 42% 56%, #b22234 56% 70%, #fff 70% 84%, #b22234 84% 100%);
}

.flag-us::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 5px;
  background: #3c3b6e;
}

.flag-de {
  background: linear-gradient(to bottom, #000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%);
}

.flag-pl {
  background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%);
}

.flag-gb {
  background:
    linear-gradient(to bottom, transparent 0 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(to right, transparent 0 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(to bottom, transparent 0 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(to right, transparent 0 46%, #c8102e 46% 54%, transparent 54%),
    #012169;
}

.flag-unknown {
  background:
    repeating-linear-gradient(45deg, #f2f2f2 0 3px, #b9b9b9 3px 6px, #747474 6px 9px),
    #b9b9b9;
}

.flag-unknown::before {
  content: "";
}

.flag-ru { background: linear-gradient(to bottom, #fff 0 33%, #224fd0 33% 66%, #d81f2a 66%); }
.flag-ua { background: linear-gradient(to bottom, #1e6bff 0 50%, #ffd500 50%); }
.flag-de { background: linear-gradient(to bottom, #000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-pl { background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50%); }
.flag-fr { background: linear-gradient(to right, #0055a4 0 33%, #fff 33% 66%, #ef4135 66%); }
.flag-nl { background: linear-gradient(to bottom, #ae1c28 0 33%, #fff 33% 66%, #21468b 66%); }
.flag-lv { background: linear-gradient(to bottom, #9e3039 0 40%, #fff 40% 60%, #9e3039 60%); }
.flag-lt { background: linear-gradient(to bottom, #fdb913 0 33%, #006a44 33% 66%, #c1272d 66%); }
.flag-ee { background: linear-gradient(to bottom, #4891d9 0 33%, #000 33% 66%, #fff 66%); }
.flag-am { background: linear-gradient(to bottom, #d90012 0 33%, #0033a0 33% 66%, #f2a800 66%); }
.flag-es { background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.flag-it { background: linear-gradient(to right, #009246 0 33%, #fff 33% 66%, #ce2b37 66%); }
.flag-ar { background: radial-gradient(circle at 9px 6px, #f6b40e 0 1px, transparent 2px), linear-gradient(to bottom, #74acdf 0 33%, #fff 33% 66%, #74acdf 66%); }
.flag-jp { background: radial-gradient(circle at 9px 6px, #bc002d 0 3px, transparent 4px), #fff; }
.flag-cn { background: radial-gradient(circle at 4px 4px, #ffde00 0 2px, transparent 3px), #de2910; }
.flag-in { background: radial-gradient(circle at 9px 6px, #06038d 0 1px, transparent 2px), linear-gradient(to bottom, #ff9933 0 33%, #fff 33% 66%, #138808 66%); }
.flag-web,
.flag-agartha { background: repeating-linear-gradient(45deg, #f2f2f2 0 3px, #b9b9b9 3px 6px, #747474 6px 9px), #b9b9b9; }
.flag-web::before { content: ""; }
.flag-agartha::before { content: ""; }

.flag-il {
  background:
    linear-gradient(to bottom, #fff 0 2px, #2455d6 2px 4px, #fff 4px 8px, #2455d6 8px 10px, #fff 10px);
}

.flag-il::before,
.flag-il::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.flag-il::before {
  top: 3px;
  border-bottom: 5px solid #2455d6;
}

.flag-il::after {
  top: 5px;
  border-top: 5px solid #2455d6;
}

.flag-cz {
  background: linear-gradient(145deg, #11457e 0 36%, transparent 37%), linear-gradient(to bottom, #fff 0 50%, #d7141a 50%);
}

.flag-ge {
  background: linear-gradient(to bottom, transparent 0 42%, #f00 42% 58%, transparent 58%), linear-gradient(to right, transparent 0 42%, #f00 42% 58%, transparent 58%), #fff;
}

.flag-ge::before {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    radial-gradient(circle at 2px 2px, #f00 0 1px, transparent 2px),
    radial-gradient(circle at 12px 2px, #f00 0 1px, transparent 2px),
    radial-gradient(circle at 2px 8px, #f00 0 1px, transparent 2px),
    radial-gradient(circle at 12px 8px, #f00 0 1px, transparent 2px);
}

.flag-az {
  background: linear-gradient(to bottom, #00b5e2 0 33%, #ef3340 33% 66%, #509e2f 66%);
}

.flag-az::before,
.flag-kz::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 2px;
  height: 2px;
  background: #fff;
}

.flag-kz {
  background: linear-gradient(to right, #f6c400 0 2px, transparent 2px), radial-gradient(circle at 10px 6px, #f6c400 0 2px, transparent 3px), #00abc2;
}

.flag-kz::before {
  background: #f6c400;
}

.flag-uz {
  background: linear-gradient(to bottom, #0099b5 0 30%, #ce1126 30% 35%, #fff 35% 65%, #ce1126 65% 70%, #1eb53a 70%);
}

.flag-ca {
  background: linear-gradient(to right, #d52b1e 0 25%, #fff 25% 75%, #d52b1e 75%);
}

.flag-ca::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 3px;
  height: 5px;
  background: #d52b1e;
}

.flag-se {
  background: linear-gradient(to right, transparent 0 28%, #fecc00 28% 42%, transparent 42%), linear-gradient(to bottom, transparent 0 38%, #fecc00 38% 58%, transparent 58%), #006aa7;
}

.flag-fi {
  background: linear-gradient(to right, transparent 0 30%, #002f6c 30% 46%, transparent 46%), linear-gradient(to bottom, transparent 0 38%, #002f6c 38% 58%, transparent 58%), #fff;
}

.flag-no {
  background: linear-gradient(to right, transparent 0 28%, #fff 28% 48%, transparent 48%), linear-gradient(to bottom, transparent 0 34%, #fff 34% 62%, transparent 62%), linear-gradient(to right, transparent 0 34%, #00205b 34% 42%, transparent 42%), linear-gradient(to bottom, transparent 0 42%, #00205b 42% 54%, transparent 54%), #ba0c2f;
}

.flag-dk {
  background: linear-gradient(to right, transparent 0 30%, #fff 30% 44%, transparent 44%), linear-gradient(to bottom, transparent 0 40%, #fff 40% 58%, transparent 58%), #c8102e;
}

.flag-tr {
  background: radial-gradient(circle at 8px 6px, #fff 0 3px, transparent 4px), #e30a17;
}

.flag-tr::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e30a17;
}

.flag-br {
  background: radial-gradient(circle at 9px 6px, #002776 0 3px, transparent 4px), linear-gradient(145deg, transparent 0 28%, #ffdf00 28% 50%, transparent 50%), linear-gradient(35deg, transparent 0 28%, #ffdf00 28% 50%, transparent 50%), #009b3a;
}

.flag-kr {
  background: radial-gradient(circle at 8px 6px, #cd2e3a 0 3px, transparent 4px), radial-gradient(circle at 10px 7px, #0047a0 0 3px, transparent 4px), #fff;
}

.tiny-gif {
  width: 5px;
  height: 5px;
  vertical-align: 1px;
}

.side-gif,
.streamer-gif {
  display: block;
  margin: 5px auto 0;
  image-rendering: pixelated;
}

.side-gif {
  display: none;
}

.streamer-gif {
  width: 72px;
  height: 30px;
  border: 1px inset #777;
  background: #fff;
  object-fit: cover;
}

.linksbox p {
  margin: 2px 0 3px;
  font-size: 10px;
  line-height: 1.08;
}

.linksbox p .site-smile {
  max-width: 20px;
  max-height: 20px;
  vertical-align: -5px;
}

.owner-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-top: 3px;
}

.linksbox a,
.owner-card a {
  display: block;
  margin: 0;
  padding: 3px 4px;
  border: 1px solid #777;
  background: #fffbe6;
  text-decoration: none;
}

.linksbox a,
.owner-card a {
  color: #004414;
  background: #fff;
  word-break: break-word;
}

.social-link {
  display: grid !important;
  grid-template-columns: 18px 1fr;
  gap: 4px;
  align-items: center;
  min-height: 24px;
  padding: 2px 4px;
  color: #000 !important;
  font: bold 10px var(--retro-ui-font);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: inset 1px 1px rgba(255,255,255,.45);
}

.youtube .social-icon {
  background: #d40000;
}

.telegram .social-icon {
  background: #229ed9;
}

.syzran-clock {
  padding-bottom: 4px;
}

.clock-face {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "dial city"
    "dial zone";
  column-gap: 6px;
  align-items: center;
  min-height: 39px;
  padding: 3px 5px;
  border: 2px inset #777;
  color: #b8ff36;
  background:
    repeating-linear-gradient(0deg, rgba(184,255,54,.08) 0 1px, transparent 1px 4px),
    #071207;
  text-align: left;
  font: 11px var(--retro-font);
  box-shadow: inset 0 0 10px #000;
}

.clock-face span,
.clock-face em {
  display: block;
  font-style: normal;
  color: #d7ff9e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-face span {
  grid-area: city;
  font-size: 11px;
  line-height: 1.05;
}

.clock-face em {
  grid-area: zone;
  font-size: 10px;
  line-height: 1;
}

.clock-face b {
  display: none;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0;
  text-shadow: 0 0 6px #7cff44;
}

.analog-clock {
  grid-area: dial;
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 3px inset #7b8d68;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #d7ff9e 0 2px, transparent 3px),
    repeating-conic-gradient(from 0deg, #b8ff36 0 2deg, transparent 2deg 30deg),
    #071207;
  box-shadow: inset 0 0 8px #000;
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  transform-origin: 50% 100%;
  background: #d7ff9e;
  box-shadow: 0 0 4px #7cff44;
}

.hand.hour {
  height: 8px;
}

.hand.minute {
  height: 10px;
}

.hand.second {
  width: 1px;
  height: 12px;
  background: #ff4b4b;
}

.pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffffcc;
}

.guestbook {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  font-size: 11px;
}

.guestbook form {
  flex: 0 0 auto;
}

.guestbook input,
.guestbook textarea,
.guestbook form > button {
  display: block;
  width: 100%;
  margin: 2px 0;
  min-height: 20px;
  padding: 2px 3px;
  border: 1px inset #fff;
  background: #ffffcc;
  color: #000;
  font: 11px/1.12 var(--retro-font);
}

.guestbook textarea {
  height: 28px;
  resize: none;
}

.guestbook form > button {
  border-style: outset;
  background: #d7d7d7;
  cursor: pointer;
  min-height: 20px;
}

.smiley-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 3px 0;
  padding: 2px;
  max-height: 78px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px inset #777;
  background: #e7e7b8;
  scrollbar-color: #00501a #ffffcc;
  scrollbar-width: thin;
}

.guestbook .smiley-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px outset #fff;
  background: #ffffcc;
}

.guestbook .smiley-button:active {
  border-style: inset;
}

.smiley-button img,
.guest-smile {
  image-rendering: pixelated;
  vertical-align: -3px;
}

.smiley-button img {
  width: auto;
  height: auto;
  max-width: 36px;
  max-height: 30px;
  object-fit: contain;
}

.guest-smile {
  width: auto;
  height: 18px;
  max-width: 36px;
  max-height: 18px;
  object-fit: contain;
  vertical-align: -4px;
}

.site-smile {
  display: none !important;
}

.old-smile {
  display: none;
}

.box-title .site-smile,
.window-title .site-smile,
.vote-tops b .site-smile,
.air-history b .site-smile {
  max-width: 32px;
  max-height: 24px;
  vertical-align: -7px;
}

.info-panel p .site-smile,
.footer .site-smile {
  max-width: 28px;
  max-height: 28px;
}

.linksbox p .site-smile {
  width: auto;
  height: 22px;
  max-width: 34px;
  max-height: 22px;
  object-fit: contain;
  vertical-align: -7px;
}

.air-history b .site-smile {
  width: auto;
  height: 18px;
  max-width: 42px;
  max-height: 18px;
  object-fit: contain;
  vertical-align: -4px;
}

.guestbook-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 146px;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-top: 1px dashed #777;
  margin-top: 5px;
  padding-top: 3px;
  scrollbar-color: #00501a #ffffcc;
  scrollbar-width: thin;
}

.guestbook-entry {
  margin-bottom: 2px;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.guestbook-entry.is-vip {
  margin: 2px 0 3px;
  padding: 2px 4px 3px;
  border: 1px solid #9b7400;
  background:
    linear-gradient(to bottom, #fff4a8 0, #ffe06a 55%, #f4c13f 100%);
  color: #211600;
  box-shadow:
    inset 0 0 0 1px #fff9c9,
    1px 1px 0 #8b6a00;
}

.guestbook-entry b {
  color: #00501a;
}

.guestbook-user-id {
  display: inline-block;
  margin-left: 3px;
  padding: 0 2px;
  border: 1px solid #9a9a6a;
  color: #3b3b1f;
  background: #eeeeaa;
  font: 8px/1 var(--retro-font);
  vertical-align: 1px;
}

.guestbook-vip {
  display: inline-block;
  margin-left: 3px;
  padding: 0 3px 1px;
  border: 1px solid #5f4200;
  color: #2b1700;
  background:
    linear-gradient(to bottom, #fff8a8 0, #ffd13d 58%, #b87a00 100%);
  font: bold 8px/1.05 var(--retro-font);
  font-style: normal;
  text-shadow: 1px 0 0 #fff6b8, 0 1px 0 #fff6b8;
  vertical-align: 1px;
  box-shadow:
    inset 0 0 0 1px #fff2a0,
    1px 1px 0 #6d4f00;
}

.guestbook-entry.is-vip b {
  color: #004d1a;
  text-shadow: 1px 1px 0 #fff0a0;
}

.guestbook-entry.is-vip .guestbook-user-id,
.guestbook-entry.is-vip time {
  border-color: #8f6a00;
  color: #3a2800;
  background: #fff2a6;
}

.guestbook-entry.is-sys b,
.guestbook-entry.is-sys .guestbook-user-id {
  color: #b00000;
}

.guestbook-entry.is-sys {
  color: #b00000;
}

.guestbook-entry.is-sys a {
  color: #b00000;
  font-weight: 800;
  text-decoration: underline;
}

.guestbook-entry.is-sys .guestbook-user-id {
  border-color: #c85a5a;
  background: #ffe0d8;
}

.guestbook-entry.is-admin,
.guestbook-entry.is-admin b,
.guestbook-entry.is-admin time {
  color: #b00000;
}

.guestbook-entry.is-admin time {
  border-color: #c85a5a;
  background: #ffe0d8;
}

.guestbook-entry.is-maintenance {
  margin: 3px 0 2px;
  padding: 3px 4px;
  border: 1px dashed #807000;
  background: #fff7a8;
  color: #4a3600;
}

.guestbook-entry.is-maintenance b,
.guestbook-entry.is-maintenance time {
  color: #7a0000;
}

.guestbook-entry.is-maintenance time {
  border-color: #ba9b00;
  background: #fff1ad;
}

.guestbook-entry.is-maintenance a,
.guestbook-entry.is-maintenance .maintenance-notice-link {
  color: #7a0000;
  font-weight: 800;
  text-decoration: underline;
  pointer-events: auto;
}

.guestbook-author {
  white-space: nowrap;
}

.guestbook-entry time {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  border: 1px solid #b8b88a;
  background: #f6f6c6;
  color: #5d5d45;
  font-size: 9px;
  line-height: 1.05;
  white-space: nowrap;
}

.ban-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 6px),
    #001f0c;
}

.ban-window {
  width: min(360px, calc(100vw - 32px));
  border: var(--border-panel) ridge var(--chrome);
  background: var(--chrome);
  box-shadow: var(--shadow-hard);
  font-family: var(--retro-font);
}

.ban-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding: 3px 8px;
  color: #fff;
  background: #600000;
  border-bottom: 2px solid #000;
}

.ban-body {
  padding: 12px;
  border: 2px inset #fff;
  color: #200;
  background: #ffffcc;
  font: bold 12px/1.3 var(--retro-font);
}

.ban-body p {
  margin: 6px 0;
}

.ban-id {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #8f8976;
  background: #fff;
  color: #004000;
}

.player-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  padding: 6px;
}

.boombox {
  position: relative;
  width: 360px;
  min-height: 266px;
  padding: 9px 10px 8px;
  border: 3px inset #777;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #343a3c, #151719);
  box-shadow: inset 0 0 0 1px #999;
}

.boombox.is-changing-tape::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 111px;
  height: 10px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #dcff68 0 8px, #111 8px 14px, transparent 14px 22px);
  border: 1px solid #000;
  box-shadow: 0 0 7px #dcff68;
  opacity: 0;
  animation: tapeGlitch .62s steps(4, end);
}

.speaker {
  position: absolute;
  top: 92px;
  width: 62px;
  height: 84px;
  border: 3px inset #777;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent),
    repeating-linear-gradient(90deg, #060708 0 5px, #2e3537 5px 8px);
}

.speaker.left {
  left: 15px;
}

.speaker.right {
  right: 15px;
}

.artist-screen {
  position: absolute;
  left: 13px;
  top: 12px;
  width: 64px;
  height: 56px;
  padding: 3px;
  border: 3px inset #d8d8cf;
  color: #21310f;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    #a9c56d;
  box-shadow: inset 0 0 10px rgba(0,0,0,.45);
  overflow: hidden;
  font: bold 8px var(--retro-font);
  text-align: center;
  cursor: zoom-in;
}

.artist-screen::before {
  content: "нет фото";
  position: absolute;
  inset: 16px 2px auto;
  z-index: 0;
  text-transform: uppercase;
}

.artist-screen img {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  height: 37px;
  border: 1px solid #1d2a13;
  object-fit: cover;
  filter: sepia(.35) saturate(.8) contrast(1.08);
}

.artist-screen.has-photo img {
  display: block;
}

.artist-screen.has-photo::before {
  content: "";
}

.artist-screen span {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artist-screen.has-photo:hover {
  overflow: visible;
}

.artist-screen.has-photo:hover img {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 30;
  width: 190px;
  height: 142px;
  transform: translateX(-10%);
  border: 3px ridge #d8d8cf;
  background: #000;
  object-fit: cover;
  filter: none;
  box-shadow: 6px 6px 0 #000;
}

.photo-zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 16, 4, .82);
  cursor: zoom-out;
}

.photo-zoom.is-open {
  display: flex;
}

.photo-zoom img {
  max-width: min(88vw, 620px);
  max-height: 82vh;
  border: 4px ridge #d8d8cf;
  background: #000;
  object-fit: contain;
  image-rendering: auto;
  box-shadow: 10px 10px 0 #000;
}

.sony-logo {
  position: absolute;
  right: 16px;
  top: 18px;
  width: 48px;
  height: auto;
  filter: invert(92%) sepia(7%) saturate(117%) hue-rotate(62deg) brightness(94%) contrast(93%)
    drop-shadow(1px 1px 0 #000)
    drop-shadow(-1px -1px 0 #575f61);
  opacity: .96;
  pointer-events: none;
}

.lcd {
  width: 174px;
  height: 94px;
  box-sizing: border-box;
  margin: 0 auto 7px;
  padding: 6px;
  color: #263719;
  background: #b4c979;
  border: 4px inset #d8d8cf;
  font: 11px var(--retro-font);
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}

.track-votes {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 128px;
  min-height: 26px;
  margin: -2px auto 7px;
}

.track-votes button {
  min-width: 54px;
  min-height: 26px;
  padding: 1px 6px 2px;
  color: #101510;
  background: linear-gradient(#e7e9df, #9aa095);
  border: 2px outset #d8d8cf;
  font: bold 12px var(--retro-font);
  line-height: 1;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}

.track-votes button:hover {
  background: linear-gradient(#ffffd0, #bfc782);
}

.track-votes button.is-active {
  color: #ffff66;
  background: #004000;
  border-style: inset;
  text-shadow: 1px 1px 0 #000;
}

.track-votes #dislikeBtn.is-active {
  color: #ffd7d7;
  background: #6b0000;
  box-shadow: inset 0 0 0 1px #2b0000;
}

.track-votes.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.boombox.is-changing-tape .lcd {
  animation: lcdChange .62s steps(3, end);
}

.lcd-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
  font-size: 10px;
}

#trackTitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  width: 100%;
  min-height: 16px;
  line-height: 16px;
  color: #203716;
  text-shadow:
    1px 0 0 rgba(32,55,22,.35),
    0 1px 0 rgba(32,55,22,.2);
}

#trackTitle .lcd-marquee {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

#trackTitle .lcd-marquee i {
  display: inline-block;
  max-width: 152px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  vertical-align: top;
}

#trackTitle .lcd-marquee::after {
  content: "";
}

#trackTitle.is-marquee .lcd-marquee {
  display: inline-flex;
  max-width: none;
  width: max-content;
  will-change: transform;
  animation: lcdTitleMarquee 15s linear infinite;
}

#trackTitle.is-marquee .lcd-marquee i,
#trackTitle.is-marquee .lcd-marquee::after {
  display: inline-block;
  max-width: none;
  min-width: 154px;
  padding-right: 18px;
  text-overflow: clip;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

#trackTitle.is-marquee .lcd-marquee::after {
  content: attr(data-copy);
}

#trackMeta {
  display: block;
  margin-top: 7px;
  height: 43px;
  line-height: 1.14;
  overflow: hidden;
  word-break: break-word;
  font-size: 10px;
}

.cassette {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  gap: 9px;
  align-items: center;
  justify-items: center;
  width: 198px;
  height: 62px;
  margin: 0 auto 8px;
  padding: 7px;
  border: 3px inset #777;
  background: linear-gradient(#111, #2a3033);
}

.reel {
  justify-self: center;
  width: 36px;
  height: 36px;
  border: 6px solid #080808;
  border-radius: 50%;
  background: conic-gradient(#151515 0 30deg, #838b86 31deg 55deg, #151515 56deg 95deg, #838b86 96deg 125deg, #151515 126deg);
  animation: reel 4s linear infinite;
}

#scope {
  width: 100%;
  height: 44px;
  background: #9eb66b;
  border: 2px inset #bfc8b2;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 7px;
}

.play-button,
.buttons .locked {
  width: 54px;
  min-height: 28px;
  padding: 0;
  border: 2px outset #fff;
  font: bold 10px var(--retro-font);
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #001018;
  background: linear-gradient(#f3f3f3, #9aa4a6 55%, #575f61);
  cursor: pointer;
}

.play-button:active {
  border-style: inset;
}

.buttons .locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #606060;
  background: #b5bbb7;
  border-style: inset;
  text-decoration: line-through;
}

.meters {
  width: 238px;
  margin: 0 auto;
  color: #cfff8a;
  font: 10px var(--retro-font);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.meters label {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 5px;
  align-items: center;
  margin: 4px 0;
}

.meters i {
  display: block;
  height: 10px;
  padding: 1px;
  border: 1px inset #fff;
  background: #282c2c;
}

.meters b {
  display: block;
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #b8ff36 0 7px, #1c5018 7px 10px);
}

.volume-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 5px;
  align-items: center;
  width: 238px;
  max-width: 100%;
  margin: 4px auto 0;
  color: #cfff8a;
  font: 10px var(--retro-font);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.volume-control input {
  width: 100%;
  accent-color: #35d12f;
  appearance: none;
  min-height: 18px;
  border: 1px inset #777;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.22) 9px 10px),
    linear-gradient(#111, #2d3435);
}

.volume-control em {
  font-style: normal;
  text-align: right;
}

.volume-control input::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 20px;
  border: 1px outset #eee;
  background: linear-gradient(90deg, #2b3030, #c8d0ca 45%, #596060);
  box-shadow: 1px 1px 0 #000;
}

.volume-control input::-moz-range-thumb {
  width: 11px;
  height: 20px;
  border: 1px outset #eee;
  border-radius: 0;
  background: linear-gradient(90deg, #2b3030, #c8d0ca 45%, #596060);
  box-shadow: 1px 1px 0 #000;
}

.info-panel {
  display: flex;
  flex-direction: column;
  min-height: 246px;
  padding: 7px;
  border: 2px inset #fff;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 5px),
    #ffffcc;
}

.info-panel h1 {
  margin: 0 0 8px;
  color: #00501a;
  font: bold 26px var(--retro-title-font);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #8cff4b;
}

.music-strip {
  display: block;
  width: 100%;
  height: 18px;
  margin: -3px 0 5px;
  border: 1px solid #000;
  object-fit: cover;
  image-rendering: pixelated;
}

.air-summary {
  display: grid;
  gap: 3px;
  margin: 4px 0;
}

.air-summary div,
.air-history {
  border: 1px solid #8f8976;
  background: #fffde0;
  font: 11px var(--retro-font);
}

.air-summary div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 5px;
  padding: 3px 4px;
}

.air-summary b,
.air-history b {
  color: #00501a;
}

.air-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.air-history {
  margin: 4px 0;
  padding: 2px 4px;
}

.air-history ol {
  margin: 1px 0 0;
  padding-left: 18px;
}

.air-history li {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.air-history time {
  color: #00501a;
}

.air-history li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-panel p,
.info-panel li {
  font-size: 12px;
  line-height: 1.25;
}

.info-panel p:last-child {
  margin-bottom: 0;
}

.stream-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.direct-stream-link {
  display: inline-block;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 7px 3px;
  border: 1px outset #d8d8d8;
  background: linear-gradient(#fff, #cfd6cf);
  color: #004000;
  font: bold 12px var(--retro-font);
  text-decoration: none;
  box-shadow: 1px 1px 0 #777;
}

.direct-stream-link:hover {
  background: linear-gradient(#f5fff0, #b8d9b8);
  color: #001f00;
}

.direct-stream-link:active {
  border-style: inset;
  box-shadow: none;
}

.share-site-button {
  cursor: pointer;
}

.info-panel ul {
  padding-left: 18px;
  margin: 6px 0;
}

.old-smile {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 2px;
  border: 1px solid #9b7b00;
  border-radius: 50%;
  background: #ffd83a;
  box-shadow: inset -2px -2px 0 #d99800, inset 2px 2px 0 #fff38c;
  vertical-align: -2px;
}

.old-smile::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 2px;
  height: 2px;
  background: #3a2500;
  box-shadow: 6px 0 0 #3a2500;
}

.old-smile::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 2px;
  border-bottom: 2px solid #3a2500;
  border-radius: 0 0 8px 8px;
}

.old-smile.wink::before {
  height: 1px;
  box-shadow: 6px 0 0 #3a2500;
}

.owner-card {
  margin-top: 12px;
  padding: 8px;
  border: 2px solid #fff;
  border-right-color: #777;
  border-bottom-color: #777;
  background: #f4f0df;
}

.owner-card .box-title {
  margin: -8px -8px 8px;
}

.owner-card p {
  margin: 8px 0;
}

.rotation {
  margin-bottom: 0;
}

.playlist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 5px;
}

.playlist li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 52px 42px;
  gap: 6px;
  align-items: center;
  min-height: 18px;
  max-width: 100%;
  padding: 2px 4px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  font: 11px var(--retro-font);
}

.playlist li.active {
  color: #fff;
  background: #00501a;
  border-color: #ffff00;
  box-shadow: inset 0 0 0 1px #ffff00, 0 0 0 1px #000;
}

.playlist li.active::before {
  content: "▶";
  position: absolute;
  left: 2px;
  color: #ffff00;
  font-size: 9px;
  line-height: 1;
}

.playlist li.active strong {
  padding-left: 2px;
  color: #ffff66;
}

.playlist.is-loading li {
  color: #395039;
  background: #f4f4c6;
}

.playlist .playlist-placeholder strong,
.playlist .playlist-placeholder em {
  opacity: .72;
}

.playlist strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist em {
  font-style: normal;
  text-align: right;
  opacity: .75;
  white-space: nowrap;
}

.vote-tops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 0 5px 5px;
}

.vote-tops section {
  min-width: 0;
  display: grid;
  grid-template-rows: 28px 1fr;
  border: 1px solid #8f8976;
  background: #fffde0;
  font: 11px var(--retro-font);
}

.vote-tops section > b {
  display: flex;
  align-items: center;
  min-height: 28px;
  box-sizing: border-box;
  padding: 2px 4px;
  color: #ffff66;
  background: #00501a;
  border-bottom: 1px solid #003b13;
  line-height: 1.05;
  overflow: hidden;
  white-space: nowrap;
}

.vote-tops ol {
  list-style-position: inside;
  display: grid;
  grid-template-rows: repeat(3, 18px);
  gap: 3px;
  margin: 0;
  padding: 4px;
}

.vote-tops li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  height: 18px;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 4px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  line-height: 1;
}

.vote-tops span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-tops ol.is-loading .empty {
  color: #395039;
  background: #f4f4c6;
}

.vote-tops em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #00501a;
  font-style: normal;
  font-weight: bold;
  white-space: nowrap;
}

.vote-tops em i {
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}

.vote-tops li.is-dislike em {
  color: #b00000;
}

.vote-tops li.is-dislike em i {
  border-top: 7px solid currentColor;
  border-bottom: 0;
}

.vote-tops .empty {
  display: block;
  padding: 4px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  color: #555;
}

.footer {
  padding: 4px;
  color: #fff;
  background: #000;
  border-top: 2px solid #000;
  font: 11px var(--retro-font);
  text-align: center;
}

@media (min-width: 921px) {
  body.home-page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 0;
    scrollbar-width: none;
  }

  body.home-page::-webkit-scrollbar {
    display: none;
  }

  body.home-page .site {
    --desktop-fit-fallback: 1;
    width: var(--site-width);
    height: var(--site-height);
    transform: scale(var(--desktop-fit, var(--desktop-fit-fallback)));
    transform-origin: top center;
    overflow: hidden;
  }

  .topbar {
    height: 18px;
    padding: 1px 7px;
  }

  .header {
    height: 62px;
    padding: 3px 8px;
  }

  .header-gif {
    width: 66px;
    height: 42px;
  }

  .css-logo {
    min-height: 42px;
    padding: 2px 12px 5px;
    font-size: 29px;
  }

  .header-ads img {
    width: 88px;
    height: 56px;
  }

  .subtitle {
    margin-top: 3px;
    font-size: 10px;
  }

  .leftcol,
  .maincol {
    padding: 4px;
  }

  .box,
  .window {
    margin-bottom: 3px;
  }

  .box {
    padding: 4px 5px;
  }

  .box-title,
  .window-title {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 11px;
    line-height: 1;
  }

  .box-title {
    margin: -5px -5px 4px;
  }

  .leftcol .box-title .site-smile {
    max-width: 22px;
    max-height: 16px;
    vertical-align: -4px;
  }

  .box p {
    margin: 3px 0;
    line-height: 1.12;
  }

  .country-list {
    flex-wrap: wrap;
    gap: 2px;
    max-height: 34px;
    margin-top: 3px;
    overflow: hidden;
  }

  .country-chip {
    flex: 0 1 auto;
    padding: 1px 2px;
    font-size: 8px;
  }

  .pixel-flag {
    width: 16px;
    height: 10px;
  }

  .side-gif {
    display: none;
  }

  .streamer-gif {
    width: 64px;
    max-height: 20px;
    object-fit: contain;
  }

  .social-link {
    min-height: 24px;
    padding: 2px 4px;
  }

  .clock-face {
    min-height: 34px;
    padding: 2px 4px;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 5px;
  }

  .analog-clock {
    width: 23px;
    height: 23px;
    border-width: 2px;
  }

  .hand.hour {
    height: 7px;
  }

  .hand.minute {
    height: 9px;
  }

  .hand.second {
    height: 10px;
  }

  .guestbook textarea {
    height: 24px;
  }

  .guestbook .smiley-picker {
    max-height: 42px;
  }

  .guestbook-list {
    max-height: none;
  }

  .rotation {
    min-height: 212px;
  }

  .player-layout {
    align-items: stretch;
    gap: 5px;
    padding: 5px;
  }

  .boombox {
    min-height: 242px;
    padding-top: 8px;
    padding-bottom: 5px;
  }

  .cassette {
    height: 56px;
    margin-bottom: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #scope {
    height: 38px;
  }

  .buttons {
    margin-bottom: 5px;
  }

  .meters label {
    grid-template-columns: 39px 1fr;
    gap: 4px;
    margin: 2px 0;
  }

  .meters i {
    height: 8px;
  }

  .volume-control {
    grid-template-columns: 39px minmax(0, 1fr) 28px;
    gap: 4px;
    width: 238px;
    max-width: 100%;
    margin-top: 2px;
    line-height: 1;
  }

  .volume-control input {
    min-height: 14px;
    height: 14px;
    border-width: 1px;
  }

  .volume-control input::-webkit-slider-thumb {
    width: 10px;
    height: 17px;
    border-width: 1px;
  }

  .volume-control input::-moz-range-thumb {
    width: 10px;
    height: 17px;
    border-width: 1px;
  }

  .info-panel {
    max-height: none;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }

  .info-panel p:last-child {
    margin-top: auto;
    padding-top: 4px;
  }

  .info-panel h1 {
    margin-bottom: 5px;
    font-size: 23px;
  }

  .music-strip {
    height: 15px;
    margin-bottom: 4px;
  }

  .air-history ol {
    max-height: 42px;
    overflow: hidden;
  }

  .info-panel p {
    margin: 5px 0;
    font-size: 11px;
    line-height: 1.18;
  }

  .playlist {
    gap: 3px;
    padding: 4px;
  }

  .playlist li {
    min-height: 14px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 10px;
  }

  .vote-tops {
    gap: 4px;
    padding: 0 4px 4px;
  }

  .vote-tops section,
  .vote-tops li {
    font-size: 10px;
  }

  .vote-tops section {
    grid-template-rows: 22px 1fr;
  }

  .vote-tops section > b {
    min-height: 22px;
  }

  .vote-tops ol {
    grid-template-rows: repeat(3, 14px);
    gap: 2px;
    padding: 3px;
  }

  .vote-tops li {
    height: 14px;
    min-height: 14px;
    margin-bottom: 0;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .footer {
    padding: 3px 4px;
    font-size: 10px;
  }

  .guestbook {
    font-size: 10px;
  }

  .guestbook input,
  .guestbook textarea,
  .guestbook form > button {
    margin: 1px 0;
    padding: 1px 3px;
    font-size: 10px;
    line-height: 1.05;
    min-height: 20px;
  }

  .guestbook form > button {
    min-height: 20px;
  }

  .guestbook .smiley-button {
    height: 20px;
    min-height: 0;
  }

  .guestbook .smiley-button img {
    max-width: 28px;
    max-height: 18px;
  }

  .guestbook-list {
    margin-top: 3px;
    max-height: none;
  }

  .guestbook-entry {
    margin-bottom: 1px;
    line-height: 1.12;
  }

  .guestbook-entry time {
    margin-left: 2px;
    padding: 0 2px;
    font-size: 8px;
  }
}

@keyframes reel {
  to { transform: rotate(360deg); }
}

@keyframes topbarTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes lcdTitleMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.boombox.is-changing-tape {
  animation: none;
}

.boombox.is-changing-tape::after {
  content: "<<< СМЕНА КАССЕТЫ >>>";
  left: 50%;
  right: auto;
  top: 104px;
  width: 172px;
  height: auto;
  padding: 3px 5px;
  color: #ffff00;
  background: #004000;
  border: 2px outset #fff;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
  font: bold 10px var(--retro-font);
  transform: translateX(-50%);
  animation: tapeGlitch .48s steps(2, end);
}

.boombox.is-changing-tape .lcd {
  animation: lcdChange .48s steps(2, end);
}

.boombox.is-changing-tape .reel {
  animation: reel .2s linear infinite;
}

.boombox.is-changing-tape .speaker,
.boombox.is-changing-tape #scope {
  animation: none;
}

@keyframes tapeGlitch {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

@keyframes lcdChange {
  0%, 100% { background: #b4c979; color: #263719; }
  50% { background: #eaff8d; color: #000; }
}

@media (max-width: 920px) {
  body {
    padding: 0;
  }

  .site {
    width: 100%;
    height: auto;
    max-width: 100vw;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }

  .site,
  .site > tbody,
  .site > tbody > tr,
  .site > tbody > tr > td,
  .header-table,
  .header-table > tbody,
  .header-table > tbody > tr,
  .header-table > tbody > tr > td {
    display: block;
  }

  .site > tbody > tr {
    width: 100%;
  }

  .site > tbody > tr:has(.leftcol, .maincol) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .site > tbody > tr > td[colspan] {
    width: 100%;
  }

  .leftcol,
  .maincol {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: 0;
  }

  .maincol {
    order: 1;
  }

  .leftcol {
    order: 2;
    border-top: 2px ridge #fff;
  }

  .leftcol .box:first-child p {
    white-space: normal;
  }

  .leftcol .box:first-child span {
    overflow-wrap: anywhere;
  }

  .player-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .boombox {
    width: min(360px, 100%);
    margin: 0 auto;
  }

  .header {
    height: auto;
    padding: 5px 7px;
  }

  .topbar {
    height: 20px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .subtitle {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.05;
  }

  .weather-widget {
    padding: 1px 3px;
    font-size: 9px;
  }

  .css-logo {
    max-width: calc(100vw - 115px);
    min-height: 52px;
    font-size: 31px;
  }

  .header-ads {
    width: 100%;
    margin-top: 4px;
    text-align: left;
    white-space: normal;
  }

  .header-ads a {
    margin: 2px 4px 0 0;
  }

  .header-ads img {
    width: 118px;
    height: auto;
    max-height: 54px;
    object-fit: contain;
  }

  .box,
  .window {
    margin-bottom: 5px;
  }

  .box {
    padding: 5px;
  }

  .box-title {
    margin: -5px -5px 5px;
  }

  .linksbox p {
    margin: 1px 0 2px;
  }

  .social-link {
    min-height: 28px;
    padding: 3px 5px;
  }

  .clock-face {
    min-height: 36px;
    padding: 2px 5px;
  }

  .guestbook textarea {
    height: 30px;
  }

  .guestbook .smiley-picker {
    max-height: 74px;
  }

  .guestbook .smiley-button {
    height: 28px;
  }

  .guestbook-list {
    max-height: 126px;
  }

  .stream-actions {
    gap: 5px;
  }

  .stream-actions {
    gap: 5px;
  }

  .direct-stream-link {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 7px 3px;
    font-size: 11px;
    line-height: 1;
  }

  .volume-control {
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    gap: 5px;
    width: 238px;
    max-width: 100%;
    margin-top: 3px;
    line-height: 1;
  }

  .volume-control input {
    min-height: 12px;
    height: 12px;
    border-width: 1px;
  }

  .volume-control input::-webkit-slider-thumb {
    width: 10px;
    height: 16px;
    border-width: 1px;
  }

  .volume-control input::-moz-range-thumb {
    width: 10px;
    height: 16px;
    border-width: 1px;
  }
}

@media (max-width: 520px) {
  .logo {
    gap: 6px;
  }

  .header-gif {
    width: 48px;
    height: 32px;
  }

  .css-logo {
    max-width: calc(100vw - 80px);
    min-height: 38px;
    padding: 2px 8px 4px;
    font-size: 21px;
  }

  .topbar-marquee {
    width: calc(100vw - 158px);
    max-width: calc(100vw - 158px);
  }

  .header-ads img {
    width: 108px;
    max-height: 48px;
  }

  .playlist {
    grid-template-columns: 1fr;
  }

  .change-list li {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .change-list li ul {
    grid-column: 1;
  }

  .boombox {
    width: min(340px, 100%);
    min-height: 254px;
    max-width: 100%;
    transform: none;
    transform-origin: top center;
  }

  .seo-track-list {
    grid-template-columns: 1fr;
  }

  .seo-track-list li {
    grid-template-columns: 30px minmax(0, 1fr) 52px 42px;
  }

  .seo-track-list a {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .artist-screen {
    left: 12px;
    width: 58px;
    height: 53px;
  }

  .artist-screen img {
    height: 34px;
  }

  .sony-logo {
    right: 14px;
    width: 45px;
  }

  .lcd {
    width: 160px;
    height: 88px;
    padding: 6px;
    transform: translateX(4px);
  }

  #trackTitle .lcd-marquee i {
    max-width: 138px;
  }

  #trackTitle.is-marquee .lcd-marquee i,
  #trackTitle.is-marquee .lcd-marquee::after {
    min-width: 140px;
    padding-right: 16px;
  }

  #trackMeta {
    height: 39px;
    line-height: 1.12;
  }

  .speaker {
    top: 96px;
    width: 54px;
    height: 76px;
  }

  .speaker.left {
    left: 14px;
  }

  .speaker.right {
    right: 14px;
  }

  .track-votes {
    margin-bottom: 6px;
  }

  .cassette {
    width: 188px;
    height: 58px;
    margin-bottom: 7px;
  }

  .reel {
    width: 34px;
    height: 34px;
  }

  #scope {
    height: 40px;
  }

  .buttons {
    gap: 5px;
  }

  .play-button,
  .buttons .locked {
    width: 50px;
    min-height: 30px;
    font-size: 9px;
  }

  .info-panel h1 {
    font-size: 21px;
    letter-spacing: 0;
  }

  .info-panel {
    padding: 6px;
  }

  .info-panel p,
  .info-panel li {
    font-size: 11px;
    line-height: 1.22;
  }

  .air-summary div {
    grid-template-columns: 45px 1fr;
    padding: 2px 4px;
  }

  .air-history {
    padding: 2px 4px;
  }

  .air-history li {
    grid-template-columns: 32px 1fr;
  }

  .playlist {
    gap: 3px;
    padding: 4px;
  }

  .playlist li {
    min-height: 17px;
    padding: 2px 3px;
    font-size: 10px;
  }

  .vote-tops {
    gap: 4px;
    padding: 0 4px 4px;
  }

  .vote-tops section,
  .vote-tops li {
    font-size: 10px;
  }

  .vote-tops li {
    min-height: 16px;
    margin-bottom: 2px;
    padding: 2px 3px;
  }
}

@media (max-width: 380px) {
  .boombox {
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 340px) {
  .boombox {
    width: 100%;
    min-height: 250px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .lcd {
    width: 154px;
  }

  .buttons {
    gap: 4px;
  }

  .play-button,
  .buttons .locked {
    width: 48px;
    min-height: 30px;
  }
}

@media (pointer: coarse) {
  .track-votes button,
  .play-button,
  .rotation-link,
  .seo-text a,
  .seo-page p > a,
  .error-page a {
    min-height: 32px;
  }

  .guestbook input,
  .guestbook form > button {
    min-height: 24px;
  }

  .guestbook textarea {
    min-height: 34px;
  }

  .volume-control input {
    min-height: 12px;
    height: 12px;
    border-width: 1px;
  }

  .volume-control input::-webkit-slider-thumb {
    width: 10px;
    height: 16px;
    border-width: 1px;
  }

  .volume-control input::-moz-range-thumb {
    width: 10px;
    height: 16px;
    border-width: 1px;
  }

  .direct-stream-link {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 7px 3px;
    line-height: 1;
  }

  .social-link {
    min-height: 28px;
  }

  .guestbook .smiley-button {
    height: 28px;
  }

  .track-votes {
    min-height: 32px;
  }

  .rotation-link,
  .social-link,
  .seo-text a,
  .seo-page p > a,
  .error-page a {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  #trackTitle.is-marquee .lcd-marquee {
    animation: none;
    transform: none;
  }

  .reel {
    animation: none;
  }
}

.old-smile,
.old-smile::before,
.old-smile::after {
  display: none;
}


.lcd-row span:last-child,
.clock-face b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}