/* ============================================================
   drup.fm — panorama radio uit de watertoren
   poster-groen × windows 95
   ============================================================ */

:root{
  --green: #2eb24a;
  --green-deep: #1f8c39;
  --green-dark: #14642a;
  --black: #0c0d0c;
  --purple: #b487e0;
  --blue: #2b2bd9;
  --orange: #c2511c;
  --chrome: #c9c6bd;
  --chrome-hi: #f4f2ea;
  --chrome-lo: #807d74;
  --chrome-shadow: #2a2a26;
  --lcd: #06140a;
  --lcd-ink: #4dff7c;
  --font-pixel: "Silkscreen", monospace;
  --font-term: "VT323", monospace;
  --font-fat: "Archivo Black", sans-serif;
  --font-script: "Yellowtail", cursive;
  --drop: #8d87e9;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{ height: 100%; }

body{
  background: var(--black);
  font-family: var(--font-pixel);
  color: var(--black);
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: none;
}

/* ============ CRT overlay ============ */
.crt{
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9999;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.13) 0px, rgba(0,0,0,.13) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.crt::after{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.38) 100%);
}

/* ============ boot screen ============ */
.boot{
  position: fixed; inset: 0; z-index: 500;
  background: var(--black);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 6vh 6vw;
  transition: opacity .5s steps(5);
}
.boot.is-off{ opacity: 0; pointer-events: none; }
.boot-log{
  font-family: var(--font-term);
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.35;
  color: var(--lcd-ink);
  text-shadow: 0 0 8px rgba(77,255,124,.5);
  white-space: pre-wrap;
}
.boot-log::after{ content:"▮"; animation: blink 1s steps(1) infinite; }
.boot-btn{
  margin-top: 5vh;
  font-family: var(--font-pixel);
  font-size: clamp(13px, 1.8vw, 18px);
  color: var(--black);
  background: var(--green);
  border: 3px solid var(--lcd-ink);
  box-shadow: 6px 6px 0 var(--green-dark);
  padding: 14px 26px;
  cursor: pointer;
  animation: blink 1.2s steps(1) infinite;
}
.boot-btn:hover{ animation: none; background: var(--purple); }
.boot-btn:active{ transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--green-dark); }
@keyframes blink{ 50%{ opacity:.25; } }

/* ============ desktop / wallpaper ============ */
.desktop{
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, var(--green) 0%, var(--green-deep) 70%, var(--green-dark) 100%);
  overflow: hidden;
}
.desktop::before{ /* grain */
  content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.wallpaper{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wp-fm{
  position: absolute;
  left: 2vw; bottom: -14vh;
  font-family: var(--font-script);
  font-size: 92vh;
  line-height: .9;
  color: var(--black);
  -webkit-text-stroke: .035em var(--black); /* dikt de brush-strepen aan */
  transform: rotate(-7deg);
  letter-spacing: -.08em;
  opacity: .95;
}
.wp-fm-text{ display: inline-block; filter: url(#roughen); }
.wp-drop{ /* de paarse klodder op de f, zoals op de poster */
  position: absolute;
  top: -2.5%; left: 30.5%;
  width: .2em; height: .16em;
  background: radial-gradient(circle at 40% 40%, var(--drop) 60%, #7b73dd 100%);
  border-radius: 62% 38% 55% 45% / 60% 65% 35% 40%;
  transform: rotate(-18deg);
  filter: url(#roughen);
  pointer-events: auto; /* easter egg: hij leeft */
}
.drop-eye, .drop-mouth{
  position: absolute;
  background: var(--black);
  border-radius: 50%;
}
.drop-eye:nth-child(1){ left: 17%; top: 63%; width: 7%; height: 8%; }
.drop-eye:nth-child(2){ left: 43%; top: 71%; width: 8%; height: 9%; }
.drop-mouth{ left: 25%; top: 80%; width: 15%; height: 17%; }

.wp-drop.is-blinking .drop-eye{ animation: dropBlink .7s ease-in-out; }
@keyframes dropBlink{
  0%, 30%, 60%, 100%{ transform: scaleY(1); }
  15%, 45%{ transform: scaleY(.08); }
}
.wp-blob{
  position:absolute; border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: .55;
}
.wp-blob-a{ width: 34vw; height: 26vw; background: var(--purple); right: 8vw; bottom: 4vh; }
.wp-blob-b{ width: 16vw; height: 14vw; background: var(--purple); left: 26vw; bottom: 30vh; opacity:.35; }

/* ============ desktop icons ============ */
.icons{
  position:absolute; top: 3vh; right: 2vw;
  display:flex; flex-direction:column; gap: 22px;
  z-index: 5;
}
.icon{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width: 96px;
  background:none; border:none; cursor:pointer;
  text-decoration:none;
}
.icon-img{
  font-size: 34px; line-height:1;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.55));
}
.icon-label{
  font-family: var(--font-pixel);
  font-size: 10px;
  color: #fff;
  background: rgba(12,13,12,.85);
  padding: 2px 5px;
}
.icon:hover .icon-label{ background: var(--blue); }
.icon:active{ transform: translateY(1px); }

/* ============ windows ============ */
.win{
  position:absolute;
  left: var(--x, 30%); top: var(--y, 20%);
  width: min(440px, 94vw);
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
  box-shadow: 10px 10px 0 rgba(0,0,0,.45);
  z-index: 10;
  animation: winpop .14s steps(3);
}
@keyframes winpop{ from{ transform: scale(.92); } }

.win-doc{ width: min(360px, 92vw); }

.win-title{
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(90deg, var(--black) 0%, #1d2a1f 100%);
  color: var(--green);
  padding: 5px 6px;
  user-select: none;
  cursor: grab;
}
.win-title:active{ cursor: grabbing; }
.win-title-text{
  font-family: var(--font-pixel); font-size: 11px;
  text-transform: lowercase; letter-spacing:.04em;
  overflow:hidden; white-space:nowrap;
}
.win.is-front .win-title{ background: linear-gradient(90deg, var(--black) 0%, var(--blue) 160%); }

.win-btns{ display:flex; gap:4px; }
.win-btn{
  width:20px; height:18px;
  font-family: var(--font-pixel); font-size:10px; line-height:1;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
  cursor:pointer; color: var(--black);
}
.win-btn:active{ border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow); }

.win-menu{
  display:flex; gap:14px;
  font-size:10px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--chrome-lo);
  user-select:none;
}
.win-menu span{ cursor:pointer; }
.win-menu span:hover{ background: var(--black); color: var(--green); }
.win-menu .is-on{ color: var(--green-dark); }

.win-body{ padding: 8px; }

.win-status{
  display:flex; justify-content:space-between;
  font-size: 9px;
  padding: 4px 8px;
  border-top: 2px solid var(--chrome-hi);
  color: #444;
}

/* docs (kladblok) */
.doc-body{ background:#fff; margin:4px; border:2px solid; border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow); }
.doc-body pre{
  font-family: var(--font-term);
  font-size: 17px; line-height: 1.3;
  padding: 12px 14px;
  white-space: pre-wrap;
}
.doc-body a{ color: var(--blue); }
.doc-body a:hover{ background: var(--blue); color:#fff; text-decoration:none; }

/* ============ player ============ */
.player-body{ display:flex; flex-direction:column; gap:8px; }

.lcd{
  display:flex; gap:8px;
  background: var(--lcd);
  border: 2px solid;
  border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow);
  padding: 8px;
  color: var(--lcd-ink);
  text-shadow: 0 0 6px rgba(77,255,124,.45);
}
.lcd-art{
  flex: 0 0 86px; height: 86px;
  background: #0a2212 center/cover no-repeat;
  border: 1px solid #1c4a2c;
  image-rendering: pixelated;
}
.lcd-art:empty::after{ content:"☁"; display:grid; place-items:center; height:100%; font-size:30px; opacity:.4; }
.lcd-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }

.lcd-marquee{
  overflow:hidden; white-space:nowrap;
  font-family: var(--font-term);
  font-size: 21px; line-height: 1;
}
.lcd-marquee span{ display:inline-block; padding-left:0; }
.lcd-marquee.is-scrolling span{ animation: scrolltext 11s linear infinite; padding-left:100%; }
@keyframes scrolltext{ to{ transform: translateX(-100%); } }

.lcd-artist{
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--purple);
  text-shadow: 0 0 6px rgba(180,135,224,.5);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.lcd-row{ display:flex; align-items:flex-end; gap:8px; margin-top:auto; }
.lcd-time{ font-family: var(--font-term); font-size:17px; }

.viz{ flex:1; display:flex; align-items:flex-end; gap:2px; height:22px; }
.viz i{
  flex:1; background: var(--lcd-ink);
  height: 8%;
  transition: height .12s steps(3);
}
.viz i:nth-child(3n){ background: var(--purple); }

.seek{
  height: 10px;
  background: #0a2212;
  border: 1px solid #1c4a2c;
  cursor: pointer;
}
.seek-fill{
  height:100%; width:0%;
  background: repeating-linear-gradient(90deg, var(--lcd-ink) 0 4px, transparent 4px 6px);
}

/* controls */
.controls{ display:flex; align-items:center; gap:6px; }
.ctl{
  width: 44px; height: 36px;
  font-size: 15px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
  cursor:pointer;
}
.ctl:active{ border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow); }
.ctl-play{ width: 58px; font-size: 17px; }

.shfl-lamp{
  font-size: 9px;
  padding: 3px 6px;
  color: var(--black);
  background: var(--green);
  border: 1px solid var(--green-dark);
  box-shadow: inset 0 0 4px rgba(255,255,255,.6);
}

.vol{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.vol-label{ font-size: 9px; }
.vol input{
  width: 90px; height: 18px;
  -webkit-appearance:none; appearance:none;
  background: repeating-linear-gradient(90deg, var(--chrome-lo) 0 2px, transparent 2px 6px);
  cursor:pointer;
}
.vol input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width: 12px; height: 18px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
}
.vol input::-moz-range-thumb{
  width: 12px; height: 18px; border-radius:0;
  background: var(--chrome);
  border: 2px solid var(--chrome-shadow);
}

/* queue */
.queue{
  border: 2px solid;
  border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow);
  background: var(--lcd);
}
.queue-head{
  font-size: 9px; color: var(--green);
  padding: 4px 6px;
  border-bottom: 1px solid #1c4a2c;
}
.queue-list{
  list-style:none;
  max-height: 132px;
  overflow-y: auto;
  font-family: var(--font-term);
  font-size: 17px;
  color: var(--lcd-ink);
}
.queue-list li{
  padding: 1px 8px;
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.queue-list li:hover{ background:#11331d; }
.queue-list li.is-current{ background: var(--green-dark); color:#fff; }
.queue-list li.is-current::before{ content:"▶ "; }
.queue-list::-webkit-scrollbar{ width: 14px; }
.queue-list::-webkit-scrollbar-track{ background: var(--chrome); }
.queue-list::-webkit-scrollbar-thumb{
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
}

/* ============ taskbar ============ */
.taskbar{
  position: fixed; left:0; right:0; bottom:0; height: 42px;
  display:flex; align-items:center; gap:8px;
  background: var(--chrome);
  border-top: 2px solid var(--chrome-hi);
  padding: 4px 6px;
  z-index: 300;
}
.start{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-fat);
  font-size: 15px;
  text-transform: lowercase;
  padding: 3px 12px 3px 8px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
  cursor:pointer;
}
.start:active, .start.is-open{ border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow); }
.start-drop{ font-size: 16px; }
.start-logo{ height: 14px; width: auto; display: block; }
.start-logo *{ fill: var(--black); }
.start-logo .hole{ fill: var(--chrome); } /* "gaten" in dezelfde kleur als de knop */

.task-marquee{
  flex:1; overflow:hidden; white-space:nowrap;
  background: var(--black);
  color: var(--green);
  font-family: var(--font-term);
  font-size: 19px;
  height: 28px; line-height: 28px;
  border: 2px solid;
  border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow);
  padding: 0 6px;
}
.task-marquee span{ display:inline-block; animation: scrolltext 22s linear infinite; padding-left:100%; }

.tray{
  display:flex; align-items:center; gap:8px;
  border: 2px solid;
  border-color: var(--chrome-shadow) var(--chrome-hi) var(--chrome-hi) var(--chrome-shadow);
  padding: 3px 10px;
  font-size: 11px;
}
.tray-item{ animation: blink 2s steps(1) infinite; }
.tray-clock{ font-family: var(--font-pixel); }

/* ============ start menu ============ */
.startmenu{
  position: fixed; left: 6px; bottom: 44px;
  display:flex;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-shadow) var(--chrome-shadow) var(--chrome-hi);
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  z-index: 400;
}
.startmenu-side{
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: linear-gradient(0deg, var(--green-dark), var(--green));
  color:#fff;
  font-family: var(--font-fat);
  font-size: 15px;
  padding: 10px 4px;
  letter-spacing:.06em;
}
.startmenu ul{ list-style:none; min-width: 200px; }
.startmenu li{
  font-size: 11px;
  padding: 9px 14px;
  cursor:pointer;
  user-select:none;
}
.startmenu li:hover{ background: var(--black); color: var(--green); }
.startmenu li a{ color:inherit; text-decoration:none; display:block; }
.startmenu-sep{ border-top: 2px solid var(--chrome-lo); padding:0 !important; }

/* hidden soundcloud iframe */
#sc{
  position: fixed;
  width: 2px; height: 2px;
  bottom: 0; right: 0;
  opacity: .01;
  pointer-events: none;
}

[hidden]{ display:none !important; }

/* ============ mobile ============ */
@media (max-width: 640px){
  .win{
    position: fixed;
    left: 50% !important; top: 8px !important;
    transform: translateX(-50%);
    width: 94vw;
  }
  .win-doc{ top: 20vh !important; }
  .icons{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; top:auto; bottom: 52px; left: 8px; right: 8px; gap: 6px; }
  .icon{ width: 60px; }
  .icon-label{ font-size: 8px; }
  .wp-fm{ font-size: 64vh; left: -14vw; }
  .task-marquee{ font-size: 16px; }
  .vol input{ width: 60px; }
}