:root {
  --bg: #010006;
  --white: #f6edca;
  --paper: #e9ddc3;
  --poster-blue: #4f64c8;
  --poster-red: #fd6b38;
  --black: #0a0910;
  --green-text: #66a35f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #e9ddc3;
  color: #2d347a;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.socials {
 display: none;
}

#radio-player {
  position: fixed;
  inset: 0;
  z-index: 10;
  mix-blend-mode: normal;
  background: #e9ddc3;
}

#visualizer {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  mix-blend-mode: normal;
  background: transparent;
  animation: zoom 80s infinite ease;
  transform-origin: 50% 50%;
}


@keyframes zoom {
  0% { transform: scale(1); }
  50% { transform: scale(2); }
  100% { transform: scale(1); }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background-image: url("../img/noise.gif");
  background-repeat: repeat;
  background-size: 320px;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

#radio-audio {
  display: none;
}

/* 
.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 12;
  width: min(28vw, 340px);
  height: 100vh;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}

.chat-stream {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  padding: 18px 4px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 84%, transparent 100%);
}

.chat-message {
  align-self: flex-start;
  max-width: 92%;
  padding: 10px 12px 11px;
  border-radius: 16px;
  background: rgba(246, 237,202, 0.95);
  color: var(--green-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 500ms ease, transform 500ms ease;
}

.chat-message.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.chat-sender {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(102, 163, 95, 0.82);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.chat-text {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.chat-form {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(246, 237, 202, 0.12);
  border: 1px solid rgba(246, 237, 202, 0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.chat-panel.is-active .chat-form {
  opacity: 1;
  transform: translateY(0);
}

.chat-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.chat-label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(246, 237, 202, 0.98);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.chat-input,
.chat-textarea {
  width: 100%;
  border: 1.5px solid rgba(246, 237, 202, 0.85);
  border-radius: 18px;
  background: rgba(246, 237,202, 0.72);
  color: var(--black);
  font-size: 14px;
  line-height: 1.35;
  padding: 11px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.chat-textarea {
  min-height: 72px;
}

*/

.chat-message {
    max-width: 92%;
    padding: 10px 12px 11px;
    border-radius: 16px;
    background: rgba(246, 237,202, 0.95);
    color: var(--green-text);
}


.station-logo {
  position: fixed;
  right: 24px;
  left: auto;
  bottom: 24px;
  z-index: 12;
  width: min(38vw, 300px);
  min-width: 170px;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: darken;
}

.play-toggle {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 13;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: var(--poster-red);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  mix-blend-mode: darken;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.play-toggle:hover {
  background: rgba(233,221,195,0.82);
  color: var(--poster-red);
  mix-blend-mode: unset;
}

.play-toggle:focus-visible {
  outline: 2px solid var(--poster-red);
  outline-offset: 6px;
}

.play-toggle[disabled] {
  cursor: wait;
}

@media (max-width: 900px) {
  .chat-panel {
    width: min(34vw, 300px);
    padding: 18px 14px;
  }

  .chat-text {
    font-size: 13px;
  }
}

@media (max-width: 700px) {

  .station-logo {
    width: 70%;
    right: auto;
    left: 50%;
    top: 25%;
    bottom: auto;
    transform: translateX(-50%)
  }
  
  .play-toggle {
    background: rgba(233,221,195,1);
    top: auto;
    bottom: 25%;
    border: 5px solid var(--poster-red);
    transform: translateX(-50%);
  }

  .chat-panel {
    width: min(44vw, 220px);
    padding: 14px 10px;
    gap: 12px;
  }

  .chat-track {
    gap: 8px;
    padding: 14px 2px;
  }

  .chat-message {
    padding: 8px 10px 9px;
    border-radius: 14px;
  }

  .chat-sender {
    font-size: 10px;
  }

  .chat-text,
  .chat-input,
  .chat-textarea {
    font-size: 12px;
  }

  .chat-form {
    padding: 10px;
    border-radius: 18px;
  }

  .chat-input,
  .chat-textarea {
    border-radius: 16px;
    padding: 10px 12px;
  }

  .chat-textarea {
    min-height: 60px;
  }
}

/* Desktop intro */
@media (min-width:701px){
  #visualizer{transition:opacity 1.725s ease}
  .station-logo{left:24px;right:auto;top:auto;bottom:24px;transition:left 1.725s cubic-bezier(.22,.8,.25,1),bottom 1.725s cubic-bezier(.22,.8,.25,1),width 1.725s cubic-bezier(.22,.8,.25,1),transform 1.725s cubic-bezier(.22,.8,.25,1)}
  .play-toggle{transition:opacity .975s ease}
  body.intro-active #visualizer{opacity:0}
  body.intro-active .station-logo{left:50%;bottom:50%;width:70vw;min-width:0;transform:translate(-50%,50%)}
  body.intro-active .play-toggle,body.intro-active .comments-toggle{opacity:0;pointer-events:none}
}

/* Info modal */
.info-toggle{position:fixed;top:14px;left:14px;z-index:115;width:36px;height:36px;border:1px solid rgba(246,237,202,.55);border-radius:50%;background:rgba(246,237,202,.82);color:#f45928;display:grid;place-items:center;padding:0;cursor:pointer;font:600 18px/1 Georgia,serif;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:background .2s ease,opacity .975s ease}
.info-toggle:hover{background:#e9ddc3}
.info-toggle:focus-visible,.info-close:focus-visible{outline:2px solid #f45928;outline-offset:3px}
.info-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(1,0,6,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.info-modal.is-open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.info-modal[hidden]{display:grid}
.info-modal-inner{position:relative;width:min(760px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;padding:48px 52px 44px;border:10px solid #f45928;border-radius:24px;background:#e9ddc3;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.info-modal h1{margin:0 0 26px;color:#f45928;font-size:clamp(24px,2.5vw,38px);line-height:1.08;font-weight:500;letter-spacing:-.025em}
.info-copy{color:#352c7d;font-size:17px;line-height:1.5}
.info-copy p{margin:0 0 1.1em}.info-copy p:last-child{margin-bottom:0}
.info-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:1px solid #f45928;border-radius:50%;background:#fff5d0;color:#f45928;display:grid;place-items:center;padding:0;cursor:pointer;font:300 28px/1 Arial,sans-serif}
.info-close:hover{background:#f45928;color:#f0deb4}
body.info-open{overflow:hidden}
@media(max-width:700px){.info-toggle{top:12px;left:12px;width:34px;height:34px}.info-modal{padding:14px}.info-modal-inner{width:100%;max-height:calc(100vh - 28px);padding:44px 24px 30px;border-radius:20px}.info-modal h1{font-size:24px;margin-bottom:20px}.info-copy{font-size:15px;line-height:1.45}}
@media(min-width:701px){body.intro-active .info-toggle{opacity:0;pointer-events:none}}

/* Fixed launch screen */
body{font-family:"Space Mono",monospace}
.load-screen{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:50% 50%;background:#f0deb4;color:#f76434;opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s;overflow:auto}
.load-screen.is-closing{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s .7s}
.load-logo-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:5vw 3vw 5vw 5vw}
.load-logo{display:block;width:100%;max-width:none;height:auto;object-fit:contain;pointer-events:none;user-select:none}
.load-info{min-height:100vh;display:flex;align-items:center;padding:64px 7vw 64px 4vw}
.load-info-inner{width:100%;max-width:690px}
.load-info h1{margin:0 0 28px;font:700 clamp(22px,2.25vw,38px)/1.15 "Space Mono",monospace;letter-spacing:-.04em;color:#f76434}
.load-copy{font:400 clamp(13px,1.05vw,17px)/1.55 "Space Mono",monospace;color:#f76434}
.load-copy p{margin:0 0 1.25em}.load-copy p:last-child{margin-bottom:0}
.load-start{margin-top:34px;border:1.5px solid #f76434;background:#f76434;color:#f0deb4;;padding:14px 22px;cursor:pointer;font:700 14px/1 "Space Mono",monospace;letter-spacing:.04em;transition:background .2s ease,color .2s ease}
.load-start:hover{background:transparent;color:#f76434}
.load-start:focus-visible,.load-close:focus-visible{outline:2px solid #f76434;outline-offset:4px}
.load-start[disabled]{cursor:wait;opacity:.55}
.load-close{position:fixed;top:20px;right:20px;z-index:201;width:42px;height:42px;border:1.5px solid #f76434;border-radius:50%;background:transparent;color:#f76434;display:grid;place-items:center;padding:0;cursor:pointer;font:400 30px/1 "Space Mono",monospace;transition:background .2s ease,color .2s ease}
.load-close:hover{background:#f76434;color:#f0deb4}
body.intro-active #visualizer{opacity:1}
body.intro-active .station-logo{left:24px;right:auto;top:auto;bottom:24px;width:min(38vw,300px);min-width:170px;transform:none}
body.intro-active .play-toggle,body.intro-active .comments-toggle{opacity:1;pointer-events:auto}

@media(max-width:700px){
  .load-screen{grid-template-columns:1fr;grid-template-rows:auto auto}
  .load-logo-wrap{min-height:0;padding:22px 68px 18px}
  .load-logo{width:88%;margin:auto}
  .load-info{min-height:0;align-items:flex-start;padding:12px 28px 52px}
  .load-info h1{font-size:21px;margin-bottom:21px}
  .load-copy{font-size:12.5px;line-height:1.4}
  .load-start{width:100%;margin-top:26px;padding:15px 18px}
  .load-close{top:14px;right:14px;width:38px;height:38px;font-size:26px}
}

/* Reopen intro information */
.info-toggle{position:fixed;top:14px;left:14px;z-index:115;width:36px;height:36px;border:1.5px solid #f76434;border-radius:50%;background:#f0deb4;color:#f76434;display:grid;place-items:center;padding:0;cursor:pointer;font:700 17px/1 "Space Mono",monospace;transition:background .2s ease,color .2s ease,opacity .3s ease}
.info-toggle:hover{background:#f76434;color:#f0deb4}
.info-toggle:focus-visible{outline:2px solid #f76434;outline-offset:3px}
body.intro-active .info-toggle{opacity:0;pointer-events:none}
@media(max-width:700px){.info-toggle{top:12px;left:12px;width:34px;height:34px;font-size:16px}}

/* Video launch screen */
.video-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(233,221,195,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.video-intro.is-closing{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s .7s}
.video-intro-player{position:relative;height:90vh;aspect-ratio:9/16;max-width:calc(100vw - 48px);overflow:hidden;background:#000}
#intro-youtube,#intro-youtube iframe{display:block;width:100%;height:100%;border:0}
.video-play-toggle{position:absolute;inset:0;z-index:2;border:0;background:transparent;color:#fdf6cc;cursor:pointer;font:700 13px/1 "Space Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.video-play-toggle span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(244,89,40,.9);transition:background .2s ease}
.video-play-toggle.is-playing span{opacity:0}.video-play-toggle.is-playing:hover span{opacity:1}.video-play-toggle.is-playing:hover span:after{content:"PAUSE"}.video-play-toggle.is-playing:hover span{font-size:0}.video-play-toggle.is-playing:hover span:after{font-size:13px}
.video-intro-close{position:fixed;top:18px;right:18px;z-index:203;width:40px;height:40px;border:1.5px solid #f45928;border-radius:50%;background:rgba(233,221,195,.82);color:#f45928;cursor:pointer;font:300 28px/1 Arial,sans-serif;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body.video-intro-open{overflow:hidden}
@media(max-width:700px){.video-intro{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}.video-intro-player{width:100vw;height:100vh;max-width:none;aspect-ratio:auto}.video-intro-player iframe{position:absolute;left:50%;top:50%;width:max(100vw,56.25vh)!important;height:max(100vh,177.777vw)!important;transform:translate(-50%,-50%)}.video-intro-close{top:12px;right:12px}}

/* Full-screen information screen — matches the previous launch screen */
.info-modal{position:fixed;inset:0;z-index:220;display:grid;grid-template-columns:50% 50%;place-items:stretch;padding:0;background:#f0deb4;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f76434;opacity:0;visibility:hidden;overflow:auto;transition:opacity .45s ease,visibility 0s .45s}
.info-modal.is-open{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.info-modal[hidden]{display:grid}
.info-logo-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:5vw 3vw 5vw 5vw}
.info-logo{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none}
.info-panel{min-height:100vh;display:flex;align-items:center;padding:64px 7vw 64px 4vw}
.info-modal-inner{position:static;width:100%;max-width:690px;max-height:none;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.info-modal h1{margin:0 0 28px;font:700 clamp(22px,2.25vw,38px)/1.15 "Space Mono",monospace;letter-spacing:-.04em;color:#f76434}
.info-copy{font:400 clamp(13px,1.05vw,17px)/1.55 "Space Mono",monospace;color:#f76434}
.info-copy p{margin:0 0 1.25em}.info-copy p:last-child{margin-bottom:0}
.info-start{margin-top:34px;border:1.5px solid #f76434;background:#f76434;color:#f0deb4;padding:14px 22px;cursor:pointer;font:700 14px/1 "Space Mono",monospace;letter-spacing:.04em;transition:background .2s ease,color .2s ease}
.info-start:hover{background:transparent;color:#f76434}
.info-start:focus-visible,.info-close:focus-visible{outline:2px solid #f76434;outline-offset:4px}
.info-start[disabled]{cursor:wait;opacity:.55}
.info-close{position:fixed;top:20px;right:20px;z-index:221;width:42px;height:42px;border:1.5px solid #f76434;border-radius:50%;background:transparent;color:#f76434;display:grid;place-items:center;padding:0;cursor:pointer;font:400 30px/1 "Space Mono",monospace;transition:background .2s ease,color .2s ease}
.info-close:hover{background:#f76434;color:#f0deb4}
@media(max-width:700px){.info-modal{grid-template-columns:1fr;grid-template-rows:auto auto}.info-logo-wrap{min-height:0;padding:22px 68px 18px}.info-logo{width:88%;margin:auto}.info-panel{min-height:0;align-items:flex-start;padding:12px 28px 52px}.info-modal h1{font-size:21px;margin-bottom:21px}.info-copy{font-size:12.5px;line-height:1.4}.info-start{width:100%;margin-top:26px;padding:15px 18px}.info-close{top:14px;right:14px;width:38px;height:38px;font-size:26px}}

.video-intro-stack{height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.video-intro-stack .video-intro-player{height:calc(90vh - 54px)}
.video-intro-start{flex:0 0 auto;border:0;background:#f45928;color:#e9ddc3;padding:14px 24px;cursor:pointer;font:700 12px/1 "Space Mono",monospace;letter-spacing:.04em}
@media(max-width:700px){.video-intro-stack{width:100vw;height:100vh;gap:0;background:#000}.video-intro-stack .video-intro-player{width:100vw;height:calc(100vh - 52px);max-width:none}.video-intro-start{width:100%;height:52px;padding:0 20px}}