/* NEVERBORED - Winamp 2.x, floating in deep space.
   Only script: the few lines in index.html that light things up when the mix plays. */

/* ---------- SPACE ---------- */
/* ---------- TEXT COLOR ----------
   Orange sampled from the NEVER half of the logo. (Original green was --ink #3dff3d, --ink-dim #1f8f1f, --glow #0f0.) */
:root { --ink: #f08633; --ink-dim: #844a1c; --glow: rgba(240,134,51,.75); }

html {
  min-height: 100%;
  background-color: #04010c;
  background-image:
    /* nebula clouds */
    radial-gradient(ellipse 46% 26% at 14% 10%, rgba(150,40,210,.60), transparent 72%),
    radial-gradient(ellipse 40% 30% at 90% 22%, rgba(30,100,235,.50), transparent 72%),
    radial-gradient(ellipse 50% 24% at 72% 62%, rgba(255,60,190,.32), transparent 72%),
    radial-gradient(ellipse 42% 30% at 8% 72%, rgba(20,170,210,.34), transparent 72%),
    radial-gradient(ellipse 60% 14% at 50% 40%, rgba(200,130,255,.20), transparent 75%),
    radial-gradient(ellipse 35% 20% at 55% 95%, rgba(255,120,60,.20), transparent 72%),
    /* milky way band */
    linear-gradient(112deg, transparent 28%, rgba(190,160,255,.10) 40%, rgba(255,215,240,.16) 50%, rgba(190,160,255,.10) 60%, transparent 72%),
    /* fine dust of far-off stars */
    radial-gradient(circle, rgba(255,255,255,.9) 0, rgba(255,255,255,.9) .6px, transparent 1.1px),
    radial-gradient(circle, rgba(190,210,255,.8) 0, rgba(190,210,255,.8) .6px, transparent 1.1px),
    linear-gradient(#04010c, #100428 50%, #04010c);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 61px 61px, 89px 89px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 13px 29px, 47px 7px, 0 0;
}

/* twinkling stars: two layers, fixed to the window, timed differently */
body::before, body::after {
  content: ""; position: fixed; left: 0; top: 0; width: 1px; height: 1px;
  z-index: -1; pointer-events: none; background: transparent;
}
body::before {
  box-shadow:
    11.9vw 50.3vh #fff,
    88.4vw 89.5vh #ffe9f6,
    78.3vw 54.8vh #ffe9f6,
    75.1vw 58.7vh #fff,
    0.3vw 8.1vh #dfe8ff,
    81.7vw 45.0vh #ffe9f6,
    67.9vw 21.0vh #dfe8ff,
    34.8vw 99.9vh #dfe8ff,
    80.5vw 100.0vh #fff,
    72.3vw 9.0vh #dfe8ff,
    28.8vw 14.1vh #dfe8ff,
    2.5vw 71.1vh #dfe8ff,
    46.1vw 9.1vh #ffe9f6,
    86.7vw 42.5vh #ffe9f6,
    39.8vw 52.5vh #ffe9f6,
    56.4vw 98.2vh #fff,
    57.6vw 76.6vh #fff,
    96.3vw 52.3vh #fff,
    71.7vw 42.9vh #fff,
    48.2vw 22.9vh #fff,
    62.7vw 45.7vh #ffe9f6,
    71.5vw 96.0vh #dfe8ff,
    56.0vw 67.0vh #dfe8ff,
    54.8vw 64.7vh #ffe9f6,
    80.5vw 40.2vh #fff,
    29.4vw 26.9vh #fff,
    15.0vw 88.2vh #ffe9f6,
    80.4vw 92.7vh #dfe8ff,
    92.2vw 26.0vh #ffe9f6,
    46.7vw 76.7vh #ffe9f6,
    80.8vw 55.8vh #fff,
    83.1vw 31.7vh #fff,
    43.8vw 71.7vh #dfe8ff,
    45.3vw 96.5vh #ffe9f6,
    84.2vw 47.9vh #fff,
    64.9vw 90.3vh #dfe8ff,
    9.7vw 74.8vh #ffe9f6,
    14.6vw 91.6vh #fff,
    0.0vw 58.1vh #fff,
    61.0vw 19.9vh #fff,
    62.1vw 75.2vh #dfe8ff,
    66.8vw 63.5vh #fff,
    0.5vw 66.5vh #ffe9f6,
    69.0vw 93.8vh #fff,
    47.3vw 13.1vh #dfe8ff,
    8.4vw 66.9vh #fff,
    78.3vw 91.5vh #dfe8ff,
    50.8vw 39.0vh #fff,
    52.0vw 19.7vh #fff,
    95.9vw 38.9vh #fff,
    5.1vw 34.7vh #dfe8ff,
    93.5vw 94.5vh #fff,
    51.0vw 32.8vh #dfe8ff,
    45.0vw 91.4vh #ffe9f6,
    94.9vw 57.2vh #fff,
    15.4vw 52.0vh #ffe9f6,
    62.3vw 45.9vh #fff,
    67.8vw 7.0vh #ffe9f6,
    3.4vw 64.7vh #fff,
    4.5vw 54.5vh #fff,
    45.2vw 75.5vh #fff,
    48.4vw 67.9vh #fff,
    12.9vw 53.0vh #fff,
    16.0vw 84.4vh #ffe9f6,
    27.3vw 53.3vh #fff,
    38.3vw 18.7vh #fff,
    26.3vw 49.8vh #ffe9f6,
    28.8vw 17.7vh #ffe9f6,
    44.5vw 52.7vh #dfe8ff,
    81.6vw 84.8vh #fff,
    0.5vw 9.3vh #ffe9f6,
    64.6vw 40.8vh #fff,
    96.1vw 35.2vh #fff,
    35.2vw 68.7vh #fff,
    11.0vw 71.6vh #fff,
    57.0vw 56.3vh #fff,
    10.1vw 26.4vh #ffe9f6,
    17.1vw 68.5vh #dfe8ff,
    72.2vw 18.5vh #fff,
    50.7vw 27.7vh #fff,
    29.1vw 31.5vh #dfe8ff,
    25.6vw 1.4vh #dfe8ff,
    41.5vw 1.5vh #fff,
    23.5vw 31.0vh #fff,
    68.6vw 57.6vh #dfe8ff,
    31.5vw 45.6vh #fff,
    92.5vw 31.6vh #fff,
    59.4vw 42.6vh #fff,
    68.6vw 86.1vh #dfe8ff,
    38.9vw 94.7vh #dfe8ff,
    5.8vw 71.5vh #fff,
    28.1vw 33.1vh #fff,
    29.7vw 41.7vh #fff,
    54.2vw 34.2vh #fff,
    72.2vw 11.3vh #fff,
    11.8vw 12.6vh #dfe8ff,
    59.7vw 97.3vh #dfe8ff,
    2.9vw 57.8vh #dfe8ff,
    41.5vw 37.7vh #ffe9f6,
    66.3vw 77.5vh #fff,
    54.3vw 66.2vh #ffe9f6,
    88.9vw 78.7vh #fff,
    2.3vw 27.7vh #ffe9f6,
    41.8vw 95.8vh #fff,
    94.4vw 59.4vh #fff,
    55.3vw 65.0vh #dfe8ff,
    34.1vw 52.0vh #dfe8ff,
    5.6vw 84.1vh #fff,
    47.1vw 97.0vh #fff,
    92.7vw 90.6vh #ffe9f6,
    70.7vw 36.0vh #fff,
    56.2vw 27.6vh #fff,
    37.5vw 45.9vh #ffe9f6,
    54.9vw 47.4vh #dfe8ff,
    18.8vw 62.8vh #fff,
    48.5vw 0.5vh #dfe8ff,
    81.4vw 83.5vh #ffe9f6,
    79.5vw 63.9vh #fff,
    29.9vw 54.7vh #dfe8ff,
    13.8vw 74.0vh #fff,
    53.3vw 85.0vh #dfe8ff,
    57.3vw 95.6vh #ffe9f6,
    53.9vw 97.1vh #fff,
    96.5vw 10.5vh #fff,
    73.3vw 33.4vh #dfe8ff,
    31.0vw 73.7vh #fff,
    16.2vw 29.3vh #dfe8ff,
    35.7vw 97.3vh #fff,
    97.6vw 63.0vh #ffe9f6,
    93.9vw 35.6vh #fff,
    72.2vw 3.0vh #dfe8ff,
    53.9vw 16.4vh #fff,
    51.5vw 88.2vh #fff,
    84.2vw 6.4vh #dfe8ff,
    21.6vw 15.4vh #fff,
    12.7vw 98.5vh #ffe9f6,
    10.7vw 83.7vh #fff,
    38.1vw 61.7vh #fff,
    34.8vw 90.9vh #fff,
    55.6vw 24.7vh #dfe8ff;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
body::after {
  width: 2px; height: 2px; border-radius: 50%;
  box-shadow:
    68.4vw 45.6vh #ffc4f0,
    8.3vw 77.9vh #fff,
    80.8vw 77.8vh #ffc4f0,
    75.3vw 22.6vh #ffc4f0,
    43.3vw 56.2vh #ffc4f0,
    90.7vw 72.4vh #fff3c4,
    40.3vw 17.7vh #fff3c4,
    22.0vw 68.9vh #ffc4f0,
    75.9vw 35.0vh #fff3c4,
    21.3vw 44.2vh #bfe4ff,
    43.1vw 32.9vh #fff,
    32.0vw 84.1vh #fff3c4,
    26.4vw 54.5vh #ffc4f0,
    23.4vw 97.2vh #fff,
    26.8vw 57.4vh #fff3c4,
    39.9vw 55.0vh #ffc4f0,
    67.4vw 33.7vh #fff3c4,
    90.9vw 84.7vh #bfe4ff,
    42.4vw 64.8vh #fff,
    92.3vw 72.4vh #fff,
    26.7vw 70.2vh #bfe4ff,
    33.4vw 64.4vh #fff3c4,
    83.3vw 80.2vh #fff3c4,
    33.9vw 3.7vh #bfe4ff,
    63.6vw 66.1vh #ffc4f0,
    32.7vw 78.0vh #fff3c4,
    51.5vw 62.3vh #ffc4f0,
    7.9vw 69.2vh #fff,
    98.3vw 15.6vh #bfe4ff,
    94.3vw 20.6vh #bfe4ff,
    70.6vw 8.4vh #fff3c4,
    71.2vw 68.1vh #bfe4ff,
    10.8vw 27.1vh #fff3c4,
    4.4vw 55.0vh #bfe4ff,
    98.8vw 91.0vh #ffc4f0,
    34.4vw 31.8vh #fff3c4,
    25.5vw 88.3vh #ffc4f0,
    3.7vw 49.0vh #fff,
    48.1vw 36.6vh #fff3c4,
    19.9vw 27.4vh #fff3c4,
    30.4vw 58.2vh #fff3c4,
    86.3vw 72.6vh #ffc4f0,
    98.1vw 61.6vh #ffc4f0,
    48.9vw 66.1vh #ffc4f0,
    18.1vw 98.9vh #bfe4ff;
  animation: twinkle 5.1s ease-in-out -2s infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

body {
  margin: 0;
  padding: 14px 10px 30px;
  font: 12px Verdana, Tahoma, Arial, sans-serif;
  color: #cfcfe0;
  background: transparent;
}

a { color: var(--ink); }
a:hover { color: #fff; background: #0000c6; }

.wrap { width: 980px; max-width: 100%; margin: 0 auto; position: relative; }

/* ---------- Winamp-style window ---------- */
.win {
  position: relative;
  background: #3a3a4e;
  border: 2px solid;
  border-color: #9a9ab4 #0a0a12 #0a0a12 #9a9ab4;
  margin-bottom: 8px;
}
.tb {
  background: linear-gradient(#66668a, #2b2b40);
  color: #e8d48a;
  font: bold 11px Verdana, Tahoma, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-bottom: 1px solid #0a0a12;
  display: flex;
  justify-content: space-between;
}
.tb span.ctl { letter-spacing: 0; color: #c8c8dc; }
.tb .ttl { display: inline-flex; align-items: center; gap: 8px; }
.tb .inf { flex: none; display: block; }
.body { padding: 6px; }

.lcd {
  background: #000;
  color: var(--ink);
  font: bold 13px "Courier New", Courier, monospace;
  border: 2px solid;
  border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12;
  padding: 5px 7px;
  text-shadow: 0 0 5px var(--glow);
}
.lcd .dim { color: var(--ink-dim); text-shadow: none; }

.head-lcd { display: flex; flex-direction: column; }
.social { margin-top: auto; padding-top: 8px; display: flex; gap: 14px; }
.social a { color: var(--ink); line-height: 0; }
.social a:hover, .social a:focus-visible { color: #ffe36a; }
.social svg { display: block; }

/* ---------- Header ---------- */
.head { display: grid; grid-template-columns: 1fr 210px; gap: 8px; }
.logo {
  background: #000;
  border: 2px solid;
  border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.logo img { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 auto; }
.tag { color: #ff9af0; letter-spacing: 3px; font-size: 11px; }
/* CSS-only scrolling text (no JS, no <marquee>) */
.mq { overflow: hidden; white-space: nowrap; }
.mq span { display: inline-block; padding-left: 100%; animation: mq 14s linear infinite; animation-delay: -4s; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-100%); } }


/* visualizer + transport */
.player { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.vis { height: 44px; overflow: hidden; display: flex; align-items: flex-end; gap: 2px; padding: 3px 4px; background: #000; border: 2px solid; border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12; }
/* Live equalizer: the script in index.html sets each bar's height (and --p, the falling peak cap) from the
   audio analyser and adds body.live. Fallback (opened from disk / no Web Audio): CSS bounce via body.playing. */
.vis i { flex: 1; position: relative; height: 3px; background: linear-gradient(#ff3b3b, #ffe23b 40%, #3dff3d) bottom / 100% 44px no-repeat; }
.vis i::after { content: ""; display: none; position: absolute; left: 0; right: 0; bottom: calc(var(--p, 3px) - 2px); height: 2px; background: #e8e8f4; }
body.live .vis i::after { display: block; }
body.live .vis i { animation: none !important; }
body.playing .vis i { animation: bounce 1.1s ease-in-out infinite alternate; }
body.playing .vis i:nth-child(3n)   { animation-duration: .7s;  animation-delay: -.2s; }
body.playing .vis i:nth-child(3n+1) { animation-duration: .9s;  animation-delay: -.5s; }
body.playing .vis i:nth-child(3n+2) { animation-duration: 1.3s; animation-delay: -.9s; }
body.playing .vis i:nth-child(5n)   { animation-duration: .6s;  animation-delay: -.1s; }
@keyframes bounce { from { height: 4px; } to { height: 36px; } }

.seek { margin: 6px 0; }
.seek input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; margin: 0; padding: 0; box-sizing: border-box; background: #111; border: 2px solid; border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12; border-radius: 0; cursor: pointer; }
.seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 10px; background: linear-gradient(#d8d8ec, #7a7a96); border: 1px solid #0a0a12; border-radius: 0; box-shadow: inset 1px 1px 0 #fff8; }
.seek input::-moz-range-thumb { width: 16px; height: 8px; background: linear-gradient(#d8d8ec, #7a7a96); border: 1px solid #0a0a12; border-radius: 0; box-shadow: inset 1px 1px 0 #fff8; }
.seek input::-moz-range-track { background: transparent; }
.seek input:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
#sky { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.xport { display: flex; gap: 3px; }
.xport span {
  flex: 1; text-align: center; padding: 3px 0; color: #dcdcf0; font-size: 12px;
  background: linear-gradient(#7c7c9c, #3d3d54);
  border: 2px solid; border-color: #b4b4cc #0a0a12 #0a0a12 #b4b4cc;
}

/* ---------- 3 column body ---------- */
.cols { display: grid; grid-template-columns: 360px 1fr; /* with the Apple Music playlist: 360px 1fr 350px */ gap: 8px; align-items: stretch; }

/* playlist style lists */
.pl { list-style: none; margin: 0; padding: 0; background: #000; border: 2px solid; border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12; }
.pl li { font: 12px/1.35 "Courier New", Courier, monospace; color: var(--ink); padding: 2px 5px; }
.pl li.on { background: #0000c6; color: #fff; }
.pl li em { font-style: normal; color: var(--ink-dim); }
.pl li.on em { color: #9fb0ff; }

.hint { color: #ffe36a; text-shadow: 0 0 5px #ffb800; animation: blink 1s steps(1) infinite; display: none; margin-left: 6px; }
.lcd.small { font-size: 12px; line-height: 1.6; }
.foot-note { font-size: 10px; color: #9a9ab4; margin: 5px 1px 0; }

/* Beatport frame */
.frame { display: block; width: 100%; height: 250px; border: 2px solid; border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12; background: #000; }
/* Apple Music frame */
.frame.tall { height: 297px; background: #f8f8fa; }

/* ---------- NEXT DROP ---------- */
.drop { display: flex; flex-direction: column; }   /* stretches to the same height as the left column, so the bottoms line up */
.drop .body { padding: 6px; flex: 1; display: flex; flex-direction: column; }
.drop .lcd { flex: 1; display: flex; align-items: center; }
.drop .lcd .info { margin: 0; }
.new { display: inline-block; background: #e0342b; color: #fff; font: bold 10px Verdana, sans-serif; padding: 1px 5px; letter-spacing: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.info { width: 100%; border-collapse: collapse; }
.info td { padding: 2px 10px; font: bold clamp(18px, 2.5vw, 26px)/1.15 "Courier New", Courier, monospace; }
.info td:first-child { color: var(--ink-dim); width: 100px; font-size: clamp(12px, 1.4vw, 16px); }
.info td.ttl { color: var(--ink); width: auto; text-align: left; padding: 0 10px 6px; font-weight: 900; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: 1px; white-space: nowrap; }

.rsvp {
  display: block; text-align: center; margin-top: 10px; padding: 10px;
  font: bold 16px Verdana, sans-serif; letter-spacing: 1px; text-decoration: none; color: #fff;
  background: linear-gradient(#a56bff, #5a1fc4);
  border: 2px solid; border-color: #d2b4ff #26095a #26095a #d2b4ff;
}
.rsvp:hover { background: linear-gradient(#bb8cff, #7238e0); color: #fff; }

/* ---------- stickers (original artwork, sound system culture) ---------- */
.stk { position: absolute; z-index: 4; font-family: Verdana, Arial, sans-serif; font-weight: 900; text-align: center; box-shadow: 1px 2px 4px rgba(0,0,0,.6); }
.stk.sq    { padding: 6px 8px; background: #fff; color: #d0111b; border: 3px solid #d0111b; font-size: 11px; letter-spacing: 1px; line-height: 1.1; }

/* ---------- footer ---------- */
/* mix player */
.mix { display: block; width: 100%; height: 34px; margin-top: 6px; color-scheme: dark; }

.links { text-align: center; margin: 36px 0 0; font-size: 11px; letter-spacing: 1px; color: #b8b8d0; text-shadow: 0 0 4px #000, 0 0 8px #000; }

/* ---------- links page ---------- */
.linkwrap { width: 420px; padding-top: 48px; }
.linkwrap .logo { margin: 0 auto; max-width: 280px; }
.linklist { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.linkbtn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  font: bold 15px Verdana, sans-serif; letter-spacing: 2px; text-decoration: none; color: var(--ink);
  background: linear-gradient(#1c1c2a, #0a0a12);
  border: 2px solid; border-color: #5a5a78 #06060a #06060a #5a5a78;
}
.linkbtn svg { flex: none; color: var(--ink); }
.linkbtn:hover, .linkbtn:focus-visible { color: #ffe36a; background: linear-gradient(#26263a, #101018); }
.linkbtn:hover svg, .linkbtn:focus-visible svg { color: #ffe36a; }

/* ---------- privacy page ---------- */
.txt { background: #000; border: 2px solid; border-color: #0a0a12 #9a9ab4 #9a9ab4 #0a0a12; padding: 12px 16px; font: 13px/1.6 "Courier New", Courier, monospace; color: var(--ink); }
.txt h2 { font: bold 14px "Courier New", monospace; color: #ffe36a; margin: 14px 0 2px; letter-spacing: 2px; }
.txt h2:first-child { margin-top: 0; }
.txt p { margin: 0 0 6px; }
.txt a { color: #ff9af0; }

/* ---------- small screens (CSS only) ---------- */
/* ---------- phones and small tablets ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.head > *, .player > *, .cols > * { min-width: 0; }   /* let grid columns shrink instead of forcing the page wider */
.tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .tap { display: inline; } .clk { display: none; }
  .seek input { height: 28px; }
  .seek input::-webkit-slider-thumb { width: 34px; height: 22px; }
  .seek input::-moz-range-thumb { width: 32px; height: 20px; }
}
@media (max-width: 860px) {
  .cols, .head, .player { grid-template-columns: minmax(0, 1fr); }
  .drop { order: -1; min-height: 0; }
  .drop .lcd { display: block; padding: 4px 6px 12px; }
  .info, .info tbody, .info tr, .info td { display: block; width: auto; }
  .info td { padding: 0 6px; font-size: clamp(26px, 8.2vw, 44px); }
  .info td:first-child { font-size: 13px; padding-top: 12px; width: auto; }
  .info td.ttl { font-size: clamp(30px, 9.4vw, 48px); padding: 6px 6px 0; }
  .links { padding: 0 12px; line-height: 1.8; }
}