* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

html.fit-16x9,
html.fit-16x9 body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  color: #000;
  font: 12px "Times New Roman", Times, serif;
  background-color: #003312;
  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);
}

html.fit-16x9 body {
  padding: 0;
}

html.fit-16x9 .site {
  transform: scale(var(--site-scale, 1));
  transform-origin: top center;
}

@media (min-aspect-ratio: 16 / 10) 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);
  }
}

.seo-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.seo-page {
  width: min(820px, 100vw);
  margin: 0 auto;
  padding: 10px;
  border: 4px ridge #c0c0c0;
  background: #d7d7d7;
  font: 12px "Courier New", monospace;
}

.seo-page h1 {
  margin: 0 0 8px;
  padding: 4px 6px;
  color: #ffff66;
  background: #00501a;
  font: bold 18px "Courier New", monospace;
}

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

.seo-track-list li {
  display: grid;
  grid-template-columns: 34px 1fr 42px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid #8f8976;
  background: #ffffcc;
}

.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;
}

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

.site {
  width: min(820px, 100vw);
  margin: 0 auto;
  border: 4px ridge #c0c0c0;
  background: #c0c0c0;
  box-shadow: none;
}

.topbar {
  height: 22px;
  padding: 2px 8px;
  color: #fff;
  background: #004000;
  border-bottom: 2px solid #000;
  font: 12px "Courier New", monospace;
  white-space: nowrap;
}

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

.topbar marquee {
  display: inline-block;
  width: 570px;
  color: #ffff00;
  vertical-align: middle;
}

.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 {
  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 Impact, "Arial Black", system-ui, sans-serif;
  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 "Courier New", monospace;
  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 "Courier New", monospace;
  line-height: 1.1;
  white-space: nowrap;
}

.leftcol {
  width: 160px;
  padding: 5px;
  vertical-align: top;
  background: #d0d0d0;
  border-right: 2px ridge #fff;
}

.maincol {
  padding: 5px;
  vertical-align: top;
  background: #dcdcdc;
}

.box,
.window {
  margin-bottom: 4px;
  border: 2px ridge #fff;
  border-right-color: #777;
  border-bottom-color: #777;
  background: #eeeeee;
}

.box {
  padding: 5px 6px;
}

.box-title,
.window-title {
  margin: -6px -6px 6px;
  padding: 3px 7px;
  color: #fff;
  background: #004000;
  border-bottom: 1px solid #000;
  font: bold 12px "Courier New", monospace;
}

.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.2;
}

.country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 4px 0 2px;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 3px;
  border: 1px solid #00501a;
  background: #ffffcc;
  color: #000;
  font: bold 9px "Courier New", monospace;
  line-height: 1;
  box-shadow: 1px 1px 0 #777;
}

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

.pixel-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 12px;
  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);
}

.flag-real {
  overflow: hidden;
  background: #ffffcc;
  font: 13px "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}

.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-il {
  background:
    linear-gradient(to bottom, #fff 0 18%, #2455d6 18% 32%, #fff 32% 68%, #2455d6 68% 82%, #fff 82% 100%);
}

.flag-il::before {
  content: "✡";
  position: absolute;
  left: 4px;
  top: 0;
  color: #2455d6;
  font: bold 8px Arial, sans-serif;
  line-height: 10px;
}

.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: linear-gradient(135deg, #777 0 25%, #ddd 25% 50%, #999 50% 75%, #333 75%);
}

.pixel-flag {
  display: inline-block;
  overflow: hidden;
}

.flag-real {
  font: inherit;
}

.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-il::before {
  content: "";
  left: 7px;
  top: 4px;
  width: 4px;
  height: 4px;
  background:
    linear-gradient(60deg, transparent 0 38%, #2455d6 38% 62%, transparent 62%),
    linear-gradient(120deg, transparent 0 38%, #2455d6 38% 62%, transparent 62%);
}

.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: 96px;
  height: 40px;
  border: 1px inset #777;
  background: #fff;
  object-fit: cover;
}

.linksbox a,
.owner-card a {
  display: block;
  margin: 5px 0;
  padding: 5px;
  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: 22px 1fr;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  color: #000 !important;
  font: bold 12px Verdana, Arial, sans-serif;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  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: 3px;
}

.clock-face {
  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: center;
  font: 11px "Courier New", monospace;
  box-shadow: inset 0 0 10px #000;
}

.clock-face span,
.clock-face em {
  display: block;
  font-style: normal;
  color: #d7ff9e;
}

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

.analog-clock {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 1px auto;
  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: 10px;
}

.hand.minute {
  height: 13px;
}

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

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

.guestbook {
  font-size: 11px;
}

.guestbook input,
.guestbook textarea,
.guestbook button {
  display: block;
  width: 100%;
  margin: 3px 0;
  border: 2px inset #fff;
  background: #ffffcc;
  color: #000;
  font: 11px "Times New Roman", Times, serif;
}

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

.guestbook button {
  border-style: outset;
  background: #d7d7d7;
  cursor: pointer;
}

.smiley-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 3px 0;
  padding: 1px;
  max-height: 58px;
  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: 23px;
  margin: 0;
  padding: 0;
  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 {
  max-width: 22px;
  max-height: 22px;
}

.guest-smile {
  max-width: 30px;
  max-height: 30px;
}

.site-smile {
  max-width: 32px;
  max-height: 32px;
  image-rendering: pixelated;
  vertical-align: -8px;
}

.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,
.linksbox p .site-smile {
  max-width: 28px;
  max-height: 28px;
}

.guestbook-list {
  max-height: 92px;
  overflow-y: auto;
  overflow-x: hidden;
  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.15;
  overflow-wrap: anywhere;
}

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

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

.boombox {
  position: relative;
  width: 320px;
  min-height: 246px;
  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: 76px;
  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 "Courier New", monospace;
  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: 21px;
  top: 18px;
  width: 54px;
  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: 140px;
  min-height: 72px;
  margin: 0 auto 7px;
  padding: 6px;
  color: #263719;
  background: #b4c979;
  border: 4px inset #d8d8cf;
  font: 11px "Courier New", monospace;
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}

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

.track-votes button {
  min-width: 54px;
  height: 22px;
  padding: 1px 6px 2px;
  color: #101510;
  background: linear-gradient(#e7e9df, #9aa095);
  border: 2px outset #d8d8cf;
  font: bold 12px "Courier New", monospace;
  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: 5px;
  margin-bottom: 5px;
}

#trackTitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  width: 100%;
  min-height: 16px;
}

#trackTitle span {
  display: inline-block;
}

#trackTitle.is-marquee span {
  min-width: 100%;
  padding-left: 100%;
  animation: lcdTitleMarquee 11s linear infinite;
  text-overflow: clip;
}

#trackMeta {
  display: block;
  margin-top: 6px;
  line-height: 1.18;
}

.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;
  height: 27px;
  padding: 0;
  border: 3px outset #fff;
  font: bold 10px "Courier New", monospace;
  line-height: 24px;
  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 "Courier New", monospace;
  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: 46px 1fr 36px;
  gap: 6px;
  align-items: center;
  width: 238px;
  margin: 5px auto 0;
  color: #cfff8a;
  font: 10px "Courier New", monospace;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.volume-control input {
  width: 100%;
  accent-color: #35d12f;
  appearance: none;
  height: 14px;
  border: 2px 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: 14px;
  height: 24px;
  border: 2px outset #eee;
  background: linear-gradient(90deg, #2b3030, #c8d0ca 45%, #596060);
  box-shadow: 1px 1px 0 #000;
}

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

.info-panel {
  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 Arial, sans-serif;
  letter-spacing: -1px;
  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 "Courier New", monospace;
}

.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 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 1fr 42px;
  gap: 6px;
  align-items: center;
  min-height: 18px;
  max-width: 100%;
  padding: 2px 4px;
  border: 1px solid #8f8976;
  background: #ffffcc;
  font: 11px "Courier New", monospace;
}

.playlist li:hover::after {
  content: attr(data-full);
  position: absolute;
  left: 30px;
  right: 4px;
  bottom: calc(100% + 2px);
  z-index: 6;
  padding: 4px 6px;
  border: 2px outset #fff;
  color: #000;
  background: #ffffcc;
  box-shadow: 3px 3px 0 #000;
  font: 11px "Courier New", monospace;
  white-space: normal;
  pointer-events: none;
}

.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 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;
  border: 1px solid #8f8976;
  background: #fffde0;
  font: 11px "Courier New", monospace;
}

.vote-tops section > b {
  display: block;
  padding: 2px 4px;
  color: #ffff66;
  background: #00501a;
  border-bottom: 1px solid #003b13;
}

.vote-tops ol {
  list-style-position: inside;
  margin: 0;
  padding: 4px;
}

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

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

.vote-tops em {
  color: #00501a;
  font-style: normal;
  font-weight: bold;
  white-space: nowrap;
}

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

.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 "Courier New", monospace;
  text-align: center;
}

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

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

.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 "Courier New", monospace;
  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%;
    max-width: 100vw;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }

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

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

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

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

  .header {
    height: auto;
  }

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

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

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

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

  .header-gif {
    width: 54px;
    height: 36px;
  }

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

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

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

  .boombox {
    width: min(320px, 100%);
  }

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

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