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

body {
font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
min-height:100vh;
/* Background logo with dark overlay for readability */
background:linear-gradient(rgba(0,0,0,0.66), rgba(0,0,0,0.85)), url(logo.jpg) center/cover no-repeat fixed;
color:#e0e0e0;
line-height:1.6;
}

.container {
max-width:600px;
margin:0 auto;
padding:20px;
min-height:100vh;
display:flex;
flex-direction:column;
}

h1 {
text-align:center;
margin:20px 0;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
font-size:2.0rem;
}

h2 {
text-align:center;
margin:10px 0;
font-weight:300;
letter-spacing:1px;
text-transform:uppercase;
font-size:1rem;
}

h3 {
text-align:center;
margin:8px 0;
font-weight:100;
letter-spacing:1px;
font-size:1rem;
}

/* External Player Links */
.stream-links {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin-bottom:1px;
margin-top:5px;
}

.stream-links a {
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.2);
color:#fff;
padding:8px 16px;
text-decoration:none;
border-radius:4px;
font-size:.85rem;
transition:all .2s;
}

.stream-links a:hover {
background:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.4);
}

/* Web Player */
.player-box {
background:rgba(0,0,0,0.0);
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
padding:8px;
margin-bottom:8px;
text-align:center;
backdrop-filter:blur(10px);
}

audio {
width:100%;
height:40px;
border-radius:4px;
}

/* Track History */
.history-box {
background:rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
padding:8px;
backdrop-filter:blur(10px);
}

.history-box h2 {
font-size:.9rem;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:8px;
color:#888;
border-bottom:1px solid rgba(255,255,255,0.1);
padding-bottom:8px;
}

.track {
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
border-bottom:1px solid rgba(255,255,255,0.15);
}

.track:last-child {
border-bottom:none;
}

.track.current {
color:#4fc3f7;
}

.track-info {
flex:1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-right:4px;
margin-left:4px;
}

.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* vertically align title and badge */
  min-width: 0; /* Allows children to shrink below their content width */
  width: 100%;  /* Ensures the header fills the available space */
}

.track-title {
font-weight:700;
color:#fff;
  flex: 1; /* Takes remaining space, but can shrink */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Crucial for truncation to work inside a flex child */
}

.track-artist {
font-weight:200;
color:#aaa;
}

.badge {
background:#b72222;
color:#000;
font-size:.65rem;
padding:2px 6px;
border-radius:3px;
margin-left:4px;
margin-right:4px;
font-weight:bold;
text-transform:uppercase;
vertical-align:middle;
flex-shrink: 0; /* Prevents badge from shrinking */
}

.badge.next-badge {
background-color:#6c757d;
/* grey */
color:white;
}

.track.next {
/* optional: slightly muted styling */
opacity:.6;
}

.track-time {
font-size:.8rem;
color:#666;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}

.loading {
color:#666;
font-style:italic;
}

/* Statistics list – similar to track list */
.stats-list {
margin-top:8px;
}

.stat-row {
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
border-bottom:1px solid rgba(255,255,255,0.15);
}

.stat-row:last-child {
border-bottom:none;
}

.stat-label {
font-size:.9rem;
color:#aaa;
text-transform:uppercase;
letter-spacing:.5px;
}

.stat-value {
font-weight:600;
color:#aaa;
font-size:.95rem;
}

/* Mobile Optimizations */
@media max-width 480px {
.container {
padding:15px;
}

h1 {
font-size:1.2rem;
}

.stream-links a {
flex:1 1 45%;
text-align:center;
font-size:.8rem;
}

.track {
flex-direction:column;
align-items:flex-start;
gap:4px;
}

.track-time {
font-size:.75rem;
}
}

/* Default link color (unvisited) */
a {
  color: #00ccff; /* unvisited */
}

a:link {
color:#00ccff;
/* Light blue */
}

/* Visited link color */
a:visited {
color:#aa80ff;
/* Light purple */
}

/* Hover effect */
a:hover {
color:#ffffff;
/* White on hover */
}

/* Active link (while clicking) */
a:active {
color:#ffaa00;
/* Orange when clicked */
/* Custom Player Styles */
/* custom-playercolor:#e0e0e0; */
font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

:root {
  color-scheme: light dark;
}

:root {
  -webkit-tap-highlight-color: transparent; /* removes tap highlight */
}

.copy-button {
    background-color: rgba(10, 10, 10, 0.25);
    border: 1px solid rgba(75, 75, 75, 0.75);   /* width, style, color */
    color: #bbbbbb;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 20px 100px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    backdrop-filter: blur(8px);
    background: radial-gradient(circle, rgba(85,85,85,0.4), rgba(0,0,0,0.4));
    flex-shrink: 1;
}

.copy-button:hover {
    background-color: rgba(10, 10, 10, 0.4);          /* slight darken */
    border-color: rgba(220, 220, 220, 0.9);          /* lighter border */
    background: radial-gradient(circle, rgba(105,105,105,0.2), rgba(0,0,0,0.2));
    transform: scale(1.02);                          /* optional subtle zoom */
}

.player-main {
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin-bottom:15px;
}

.control-btn {
border:none;
border-radius:50%;
width:40px;
height:40px;
color:white;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .2s ease;
backdrop-filter: blur(8px);
background: radial-gradient(circle, rgba(85,85,85,0.4), rgba(0,0,0,0.4));
flex-shrink:0;
}

.control-btn:hover {
transform:scale(1.05);
box-shadow:0 6px 20px rgba(128,128,128,0.6);
}

.control-btn:active {
transform:scale(0.95);
}

.control-btn.stopping {
background:radial-gradient(circle,#557755,#335533,#000000);
}

.control-btn svg {
margin-left:3px;
/* Optical centering for play icon */
}

.control-btn.stopping svg {
margin-left:0;
}

.player-info {
text-align:left;
min-width:80px;
}

.status-indicator {
display:flex;
align-items:center;
gap:8px;
margin-bottom:4px;
font-size:.85rem;
font-weight:500;
letter-spacing:.5px;
text-transform:uppercase;
}

.status-dot {
width:8px;
height:8px;
border-radius:50%;
display:inline-block;
position:relative;
}

.status-dot.live {
background-color:#4ade80;
box-shadow:0 0 0 rgba(74,222,128,0.4);
animation:pulse 2s infinite;
}

.status-dot.connecting {
background-color:#fbbf24;
animation:pulse 1s infinite;
}

.status-dot.idle {
background-color:#6b7280;
}

@keyframes pulse {
0% { box-shadow:0 0 0 0 rgba(74,222,128,0.7);
}

70% {
box-shadow:0 0 0 10px rgba(74,222,128,0);
}

100% {
box-shadow:0 0 0 0 rgba(74,222,128,0);
}
}

.status-text {
color:#9ca3af;
}

.status-text.live {
color:#4ade80;
}

.status-text.connecting {
color:#fbbf24;
}

.stream-label {
font-size:.75rem;
color:#6b7280;
font-weight:400;
}

.volume-control {
display:flex;
align-items:center;
gap:10px;
justify-content:center;
max-width:500px;
margin:0 auto;
}

.volume-slider {
-webkit-appearance:none;
appearance:none;
width:100%;
height:4px;
border-radius:2px;
background:rgba(255,255,255,0.3);
outline:none;
cursor:pointer;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance:none;
appearance:none;
width:14px;
height:14px;
border-radius:50%;
background:#bbbbbb;
cursor:pointer;
transition:all .2s ease;
}

.volume-slider::-moz-range-thumb {
width:14px;
height:14px;
border:none;
border-radius:50%;
background:#bbbbbb;
cursor:pointer;
transition:all .2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
background:#764ba2;
transform:scale(1.2);
}

.volume-slider::-moz-range-thumb:hover {
background:#764ba2;
transform:scale(1.2);
}

/* WebKit track (Chrome, Safari, Android) */
.volume-slider::-webkit-slider-runnable-track {
  background: rgba(128, 128, 128, 0.3); /* Your desired track color */
}

/* Firefox track (for completeness) */
.volume-slider::-moz-range-track {
  background: rgba(128, 128, 128, 0.3);
}

/* Stop icon styling */
.stop-icon {
d:path('M6 6h12v12H6z');
}

/* Container that maintains aspect ratio */
.bandwidth-container {
  position: relative;
  width: 100%;
  padding-bottom: 58.33%; /* 600px wide ÷ 350px high = 58.33% */
  overflow: hidden;
}

.bandwidth-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keeps aspect ratio */
}

.bandwidth-graph {
  /* Image sizing & transparency */
  width: 100%;
  height: auto;
  opacity: 0.75; /* Adjust 0-1 for transparency */

  /* Optional effects */
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) /* Soft shadow */
    brightness(1.05); /* Slight brightness boost if needed */

  /* Smooth hover effect */
  transition: opacity 0.3s ease;
}

.bandwidth-graph:hover {
  opacity: 1; /* Full opacity on hover */
}

/* If using flex layout */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.flex-container .bandwidth-container {
  flex: 0 1 600px; /* Fixed max-width but responsive */
  min-width: 300px; /* Mobile friendly */
}