html, body {
overflow-x: hidden;
}

@font-face{
font-family: 'nrdyyh';
src:url('nrdyyh.woff') format('woff');
}

@font-face{
font-family: 'digi';
src:url('square_sans_serif_7.ttf') format('truetype');
}

.desktop-style div.boardlist:nth-child(1) {
position: fixed;
top: 0;
left: 0;
right: 0;
margin-top: 0;
z-index: 30;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
border-bottom: 1px solid;
background-color: black;
}

body{
background-color: black;
font-family: monospace;
margin: 0 auto;
}

code{
font-family: monospace;
color: #61c9ef;
}

p{
font-family: monospace;
color: white;
}

.top-bar h1 {
margin: 15px 0 10px 0;
line-height: 1;
}

h1{
font-family: nrdyyh;
color: #61c9ef;
}

h1.glitch {
position: relative;
animation: glitch-skew 0.6s linear;
}

h1.glitch::before,
h1.glitch::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
}

h1.glitch::before {
color: #61c9ef; /* cyan */
z-index: -1;
animation: glitch-top 0.6s linear;
}

h1.glitch::after {
color: #EF6182; /* pink/red */
z-index: -2;
animation: glitch-bottom 0.6s linear;
}

/* --- TOP LAYER SHIFT --- */
@keyframes glitch-top {
0%   { transform: translate(0); }
15%  { transform: translate(-4px, -4px); }
30%  { transform: translate(-6px, 3px); }
45%  { transform: translate(5px, -3px); }
60%  { transform: translate(-3px, 4px); }
75%  { transform: translate(4px, -2px); }
100% { transform: translate(0); }
}

/* --- BOTTOM LAYER SHIFT --- */
@keyframes glitch-bottom {
0%   { transform: translate(0); }
15%  { transform: translate(4px, 4px); }
30%  { transform: translate(6px, -3px); }
45%  { transform: translate(-5px, 3px); }
60%  { transform: translate(3px, -4px); }
75%  { transform: translate(-4px, 2px); }
100% { transform: translate(0); }
}

/* --- SKEW DISTORTION --- */
@keyframes glitch-skew {
0%   { transform: skew(0deg); }
20%  { transform: skew(10deg); }
40%  { transform: skew(-10deg); }
60%  { transform: skew(6deg); }
80%  { transform: skew(-6deg); }
100% { transform: skew(0deg); }
}

title{
font-family: nrdyyh;
color: #61c9ef;
}

h2{
font-family: monospace;
color: silver;
}

h3{
font-family: monospace;
color: silver;
}

ul{
font-family: monospace;
color: silver;
}

fieldset{
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

legend{
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}

.player-meta {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-family: monospace;
color: silver;
padding: 4px 10px;
box-sizing: border-box;
}
  
#listenerCount{
text-align: left;
}

#copyright{
text-align: center;
flex: 1;
}

#radioOP{
text-align: right;
}

a,a:active,a:focus,a:hover{
outline: medium none !important;
font-family: monospace;
color: #61c9ef;
}

.ascii-container{
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center;     /* Centers vertically (if height is set) */
width: 100%;
padding: 15px 0;
background-color: black; /* Optional: adds a background */
}

pre{
font-family: "Courier New", Courier, monospace;
font-size: 3px;          /* Adjust this to make the art larger or smaller */
line-height: 1;          /* Keeps the vertical spacing tight */
text-align: left;        /* Keeps the characters aligned relative to each other */
white-space: pre;        /* Crucial for ASCII art */
/* overflow-x: auto;        Adds scrollbar on mobile */
background: black;
color: white;
padding: 15px;
border: 4px ridge silver;
}

.blink-text{
animation-name: blink_animation;
animation-duration: 0.5s; /* How long one cycle takes */
animation-iteration-count: infinite; /* Makes it repeat forever */
font-family: monospace;
font-stretch: expanded;
font-size: 20px;
font-weight: 900;
color: #61c9ef;
}

@keyframes blink_animation {
0%{
opacity: 1; /* Fully visible */
}
50%{
opacity: 0; /* Invisible */
}
100%{
opacity: 1; /* Fully visible */
}
}

.blinky{
animation-name: blink_animation;
animation-duration: 5s; /* How long one cycle takes */
animation-iteration-count: infinite; /* Makes it repeat forever */
font-family: monospace;
font-size: 10px;
}

.radioAlert{
justify-content: left;
test-align: left;
margin: 0;
padding: 0;
}

.emphasis{
font-family: nrdyyh;
color: #61c9ef;
/* Apply the gradient background */
background: linear-gradient(90deg, #61EFCE 0%, #61c9ef 50%, #61EFCE 100%);
/* Make the background size larger to enable movement */
background-size: 200% 100%;
/* Clip the background to the text shape */
-webkit-background-clip: text;
background-clip: text;
/* Hide the original text color */
color: transparent;
/* Apply the animation */
animation: glimmer 0.2s linear infinite;
}

.onAir {
background-color: #EF6182;
color: white;
padding: 1px 15px;
border: none;
border-radius: 1 px;
position: relative;
font-weight: bold;
width: 100%;
}

.button {
background-color: rgba(0, 0, 0, 0.85);;
color: white;
padding: 1px 15px;
border: 1px solid #EF6182;
border-radius: 1px; 
cursor: pointer;
position: relative;
font-weight: bold;
width: 100%;
}

.button p{
color: white;
background-color: rgba(0, 0, 0, 0.85);;
}

.button:hover {
background-color: rgba(0, 0, 0, 0.85);;
color: white;
border: 1px solid #EF6182;
font-weight: bold;
}

.button:hover span{
color: white;
font-weight: bold;
}

.button:active {
background-color: rgba(0, 0, 0, 0.85);;
color: #EF6182;
font-weight: bold;
}

.button:active span{
color: #EF6182;
font-weight: bold;
}

.button:active p{
color: #EF6182;
font-weight: bold;
}

button:focus,
button:focus-visible,
.nav-item:focus,
.nav-item:focus-visible {
outline: none;
}

.playback-container {
display: flex; /* Makes the container a flex container and aligns children horizontally */
gap: 1px; /* Adds space between items */
justify-content: space-around; /* Distributes space around items */
}

#playBtn {
background-color: rgba(0, 0, 0, 0.85);;
color: white;
padding: 5px 15px;
border: 1px solid #EF6182;
border-radius: 1px; 
cursor: pointer;
position: relative;
font-weight: bold;
width: 50%;
font-family: digi;
}

#playBtn p{
color: white;
background-color: rgba(0, 0, 0, 0.85);
}

#playBtn:hover {
background-color: rgba(0, 0, 0, 0.85);
color: white;
border: 1px solid #EF6182;
font-weight: bold;
}

#playBtn:hover span{
color: white;
font-weight: bold;
}

#playBtn:active {
background-color: rgba(0, 0, 0, 0.85);
color: #EF6182;
font-weight: bold;
}

#playBtn:active span{
color: #EF6182;
font-weight: bold;
}

#playBtn:active p{
color: #EF6182;
font-weight: bold;
}

#pauseBtn {
background-color: rgba(0, 0, 0, 0.85);
color: white;
padding: 5px 15px;
border: 1px solid #EF6182;
border-radius: 1px;
cursor: pointer;
position: relative;
font-weight: bold;
width: 50%;
font-family: digi;
}

#pauseBtn p{
color: white;
background-color: rgba(0, 0, 0, 0.85);
}

#pauseBtn:hover {
background-color: rgba(0, 0, 0, 0.85);
color: white;
border: 1px solid #EF6182;
font-weight: bold;
}

#pauseBtn:hover span{
color: white;
font-weight: bold;
}

#pauseBtn:active {
background-color: black; 
color: #EF6182;
font-weight: bold;
}

#pauseBtn:active span{
color: #EF6182;
font-weight: bold;
}

#pauseBtn:active p{
color: #EF6182;
font-weight: bold;
}

#volume-slider {
-webkit-appearance: none; /* Override default browser styles */
width: 100%;
height: 15px;
background: #1c1c1c;
outline: none;
opacity: 1.0;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 0%;
cursor: pointer;
align-items: left;
background-image: repeating-linear-gradient(
45deg, 
#000 0,         /* Color 1 start */
#000 10px,      /* Color 1 end */
transparent 10px, /* Color 2 start (transparent) */
transparent 20px  /* Color 2 end */
);
}

#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default browser styles */
appearance: none;
width: 20px;
height: 10px;
background: #EF6182;
border-color: #EF6182;
border-radius: 0%; /* Make the thumb square */
cursor: pointer;
}

#volume-slider::-moz-range-thumb {
width: 20px;
height: 10px;
border-color: #EF6182;
background: #EF6182;
border-radius: 0%;
cursor: pointer;
}

#volume-display {
min-width: 40px;
height: 15px;
text-align: center;
color: white;
background-color: #1c1c1c;
font-family: 'digi';
}

.volume-container {
display: flex;
align-items: center;
gap: 0px;
max-width: 100%;
font-weight: bold;
}

.volume-label{
in-width: 40px;
height: 15px;
text-align: center;
color: white;
background-color: #1c1c1c;
font-family: 'digi';

}

.glimmer-text-container{
font-size: 15px;
font-weight: bold;
font-family: 'nrdyyh';
background: linear-gradient(90deg, #61EFCE 0%, #61c9ef 50%, #61EFCE 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: glimmer 4s linear infinite;
}

@keyframes glimmer{
0%{
background-position-x: 100%;
}
100%{
background-position-x: -100%;
}
}

.section-nav {
margin: 0 5px;
/*cursor: pointer;*/
}

.nav-item {
margin: 0 5px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
font-family: 'nrdyyh';
background: linear-gradient(90deg, #61EFCE 0%, #61c9ef 50%, #61EFCE 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: glimmer 2s linear infinite;
}

.nav-item:hover {
font-size: 15px;
font-weight: bold;
font-family: 'nrdyyh';
background: linear-gradient(90deg, #E92452 0%, #EF6182 50%, #E92452 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: glimmer 0.5s linear infinite;
}

.nav-item.active {
font-size: 15px;
font-weight: bold;
font-family: 'nrdyyh';
background: linear-gradient(90deg, #F59EB2 0%, #EF6182 50%, #F59EB2 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: glimmer 2s linear infinite;
}

.content-section {
display: none;
}

.content-section.active {
display: block;
}

#visualizer-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
}

#butterchurn-canvas {
width: 100%;
height: 100%;
display: block;
}

.content-wrapper {
position: relative;
z-index: 5;
padding-bottom: 220px; /* space for sticky player */
}

.content-box {
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 20px;
margin: 5px auto 20px auto;
max-width: 900px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
.content-box {
margin: 5px 10px 20px 10px;  /* same 10px inset as album panel */
}
}

#audio-player-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.98);
padding: 0px;
z-index: 10;
border-top: 1px solid #EF6182;
}

.top-bar{
position: relative;
z-index: 6;
background-color: black;
padding-bottom: 10px;
}

@media (max-width: 600px) {
.player-meta {
flex-direction: row;        /* stay horizontal */
align-items: center;
justify-content: space-between;
padding: 4px 6px;
gap: 6px;
}
.player-meta small {
font-size: 8px;            /* shrink text */
white-space: nowrap;        /* prevent wrapping */
}
#copyright {
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;    /* adds ... if too long */
}
#listenerCount {
flex: 0 0 auto;
}
#radioOP {
flex: 0 0 auto;
text-align: right;
}
}

@media (max-width: 800px) {
#artistInfo {
position: relative;
width: auto;
right: auto;
top: auto;
max-height: none;
}
}

.album-layout {
display: flex;
gap: 1rem;
align-items: flex-start;
}

.album-art-wrapper {
width: 120px;
height: 120px;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
}

.album-art {
width: 100%;
height: 100%;
object-fit: cover; /* crops evenly */
display: block;
}

.album-text {
flex: 1;
}

@media (max-width: 768px) {
html, body {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
.content-wrapper {
height: calc(100vh - 160px); /* adjust based on header height */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}

#artistInfo {
position: fixed;
bottom: calc(70px + 70px);
left: 5px;
width: min(420px, 92vw);
max-height: min(240px, 25vh);
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
border-radius: 10px;
padding: 1rem;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
z-index: 9999;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all 0.25s ease;
scrollbar-width: none;
}

#artistInfo::-webkit-scrollbar {
display: none;
}

#artistInfo.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

@media (max-width: 768px) {
#artistInfo {
left: 10px;
right: 10px;
width: auto;
bottom: 150px;
max-height: 60vh;
}
}