@font-face {
  font-family: "Doto Radio";
  src: url("assets/fonts/Doto.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-variation-settings: "ROND" 0;
  font-display: block;
}

@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fonts/FusionPixel12-JA.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

.skin-toggle {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  background: #252525;
  box-shadow: 0 8px 30px #0008;
  font-size: 11px;
  letter-spacing: .08em;
}

.skin-toggle span {
  display: block;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: #555;
}

.skin-toggle[aria-pressed="true"] span {
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
}

.radio-skin {
  display: none;
  min-height: 100svh;
  padding: 4vh 3vw;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #111;
  background:
    radial-gradient(circle at 50% 42%, #303330 0 18%, transparent 62%),
    linear-gradient(135deg, #111312, #191b1a 54%, #090a0a);
}

.radio-body {
  position: relative;
  display: grid;
  grid-template-rows: 76fr 8fr 16fr 6.4fr;
  row-gap: 2.3%;
  width: min(1180px, 94vw, calc(92svh * 1.286));
  aspect-ratio: 1.286;
  padding: 3.4%;
  overflow: hidden;
  border: 1px solid #a9aaa8;
  border-radius: clamp(30px, 4.8vw, 68px);
  background: linear-gradient(#f7f7f5, #e1e1de 58%, #d8d8d4);
  box-shadow:
    0 24px 45px #7777,
    0 5px 8px #9997,
    inset 0 0 0 clamp(5px, .7vw, 11px) #ffffff80,
    inset 0 0 0 clamp(7px, 1vw, 15px) #b9bab777;
}

.lcd {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: clamp(4px, .55vw, 8px) solid #30312f;
  border-radius: clamp(17px, 2.2vw, 31px);
  background: #050605;
  box-shadow:
    inset 0 5px 15px #000,
    inset 0 0 0 2px #7777,
    0 1px 1px #fff;
}

.lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #fff0 0 72%, #fff1 83%, #fff0 94%),
    radial-gradient(ellipse at center, transparent 55%, #0008 118%);
  opacity: 1;
  transition: opacity 160ms ease-out;
}

#lcd-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  opacity: 1;
  transition: opacity 160ms ease-out;
}

.speaker-grid {
  width: 98%;
  min-width: 0;
  margin-inline: 1%;
  border-radius: 6px;
  opacity: .72;
  background-image:
    radial-gradient(circle at 35% 30%, #71716f 0 1.5px, #bcbcb8 1.7px 2.4px, transparent 2.6px);
  background-size: clamp(8px, .9vw, 13px) clamp(8px, .9vw, 13px);
}

.power-switch {
  display: flex;
  width: 100%;
  height: 80%;
  min-height: 0 !important;
  padding: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  border: 1px solid #777875 !important;
  border-radius: clamp(14px, 1.8vw, 25px) !important;
  background: linear-gradient(#f8f8f5, #d1d2ce) !important;
  box-shadow: inset 0 2px 3px #fff, inset 0 -2px 3px #aaa8 !important;
}

.power-led {
  width: clamp(15px, 1.55vw, 21px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #777875;
  box-shadow: inset 0 2px 3px #4a4a48, 0 1px 0 #fff;
  opacity: .65;
  transition: opacity 900ms ease-in, background-color 900ms ease-in, box-shadow 900ms ease-in;
}

.power-switch[aria-pressed="true"] .power-led {
  background: #ff7657;
  box-shadow: 0 0 5px #ff624c, 0 0 14px #ff624c, inset 0 1px 2px #ffc0bc;
  opacity: 1;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.power-switch:focus { outline: none; }

.radio-controls {
  display: grid;
  grid-template-columns: .58fr 1fr 1fr;
  gap: 3%;
  align-items: center;
  min-height: 0;
}

.radio-controls > button:not(.power-switch) {
  position: relative;
  width: 100%;
  height: 80%;
  min-height: 0;
  border: 1px solid #777875;
  border-radius: clamp(14px, 1.8vw, 25px);
  background: linear-gradient(#f6f6f3, #dededb);
  box-shadow:
    inset 0 2px 3px #fff,
    inset 0 -2px 4px #aaa8;
  transition: opacity 160ms ease-out, filter 160ms ease-out;
}

.radio-controls > button:not(.power-switch):active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px #aaa;
}

.radio-controls > button:focus { outline: none; }

.previous-icon,
.next-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(12px, 1.68vw, 25px);
  height: clamp(22px, 3.2vw, 44px);
  transform: translate(-50%, -50%);
}

.previous-icon::before,
.next-icon::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: #666764;
}

.previous-icon::after,
.next-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  border-top: clamp(9px, 1.36vw, 18px) solid transparent;
  border-bottom: clamp(9px, 1.36vw, 18px) solid transparent;
  transform: translateY(-50%);
}

.previous-icon::before { left: 0; }
.previous-icon::after { left: 3px; border-right: clamp(11px, 1.6vw, 23px) solid #666764; }
.next-icon::before { right: 0; }
.next-icon::after { right: 3px; border-left: clamp(11px, 1.6vw, 23px) solid #666764; }

.radio-body.power-off .lcd::after,
.radio-body.power-off #lcd-canvas {
  transition-duration: 900ms;
  transition-timing-function: ease-in;
}

.radio-body.power-off .lcd::after { opacity: .45; }
.radio-body.power-off #lcd-canvas { opacity: .3; }

body.radio-mode main { display: block; }
body.radio-mode .player,
body.radio-mode .catalogue { display: none; }
body.radio-mode .radio-skin { display: flex; }

@media (max-width: 800px) {
  .radio-skin { padding: 2vw; }
  .radio-body { width: min(98vw, calc(96svh * 1.286)); }
  .power-switch { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lcd::after,
  #lcd-canvas,
  .power-led,
  .radio-controls > button:not(.power-switch) { transition: none; }
}