/* =========================================
   GALAXY BACKGROUND (THEME-SPECIFIC)
   ========================================= */
/* Nebula background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(circle at 20% 30%, rgba(0, 255, 238, 0.174) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(143, 39, 239, 0.164) 0%, transparent 50%),
    radial-gradient(circle at 40% 50%, rgba(255,0,150,0.05) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.03) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,128,255,0.04) 0%, transparent 50%);
    
  background-blend-mode: screen;
}

/* More stars */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;

  /* Generate lots of stars */
  box-shadow:
    50px 100px #fff, 200px 300px #fff, 400px 150px #fff,
    600px 500px #fff, 750px 200px #fff, 900px 700px #fff,
    1100px 350px #fff, 1300px 600px #fff, 1500px 100px #fff,
    1700px 400px #fff, 1900px 750px #fff, 2100px 500px #fff,
    2300px 900px #fff, 2500px 250px #fff,
    120px 80px #fff, 340px 430px #fff, 720px 210px #fff,
    980px 670px #fff, 1400px 330px #fff, 1800px 580px #fff,
    2050px 450px #fff, 2600px 750px #fff, 300px 900px #fff,
    500px 150px #fff, 800px 400px #fff, 1600px 600px #fff,
    1900px 300px #fff, 2200px 700px #fff, 2400px 500px #fff;
  
  animation: twinkle 5s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

body.light-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(158,105,20,0.15), transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(255,99,71,0.12), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 35%);
  background-blend-mode: normal; /* switch from 'screen' to 'normal' */
}

@keyframes galaxy-move-light {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 500px 400px, -400px 300px, 300px -600px; }
}

/* Twinkling stars in light mode (subtle) */
body.light-mode::after {
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    80px 150px rgba(255,255,255,0.6),
    250px 300px rgba(255,255,255,0.5),
    400px 120px rgba(255,255,255,0.4),
    600px 500px rgba(255,255,255,0.5),
    750px 200px rgba(255,255,255,0.6),
    900px 700px rgba(255,255,255,0.4),
    1100px 350px rgba(255,255,255,0.5);
  animation: twinkle-light 3s infinite alternate;
}

@keyframes twinkle-light {
  0% { opacity: 0.3; }
  50% { opacity: 0.5; }
  100% { opacity: 0.7; }
}
/* Optional: Add a subtle theme-based overlay for extra depth */
body.theme-ryo-yamada::before {
  background:
    radial-gradient(circle at 20% 30%, var(--accent) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--accent-2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 35%);
}

body.theme-bocchi::before {
  background:
    radial-gradient(circle at 25% 35%, var(--accent) 0%, transparent 45%),
    radial-gradient(circle at 70% 65%, var(--accent-2) 0%, transparent 45%),
    radial-gradient(circle at 55% 50%, rgba(255,255,255,0.05) 0%, transparent 35%);
}

body.theme-welt-yang::before {
  background:
    radial-gradient(circle at 20% 25%, var(--accent) 0%, transparent 40%),
    radial-gradient(circle at 75% 60%, var(--accent-2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 35%);
}

body.theme-herta::before {
  background:
    radial-gradient(circle at 15% 20%, var(--accent) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--accent-2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 35%);
}

body.theme-evernight::before {
  background:
    radial-gradient(circle at 25% 30%, var(--accent) 0%, transparent 45%),
    radial-gradient(circle at 70% 65%, var(--accent-2) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 35%);
}

/* =========================================
   THEME TOKENS
   ========================================= */
:root {
  --bg: #0a0a12; --text: #cceeff; --text-dim: #9aa8b0; --heading: #a55beb;
  --accent: #00ffee; --accent-2: #8a2be2; --card: #121222; --card-2: #1a1a2a;
  --border: rgba(0,255,238,0.28); --shadow-1: 0 0 14px rgba(0,255,238,0.2),0 0 26px rgba(138,43,226,0.18);
  --shadow-2: 0 0 10px rgba(0,255,238,0.16); --link-underline: #8a2be2;
  --font: 'Orbitron', monospace; --font-mono: 'Press Start 2P', monospace;
}

/* Light Mode */
body.light-mode {
  --bg:#9a9999;--text:#444;--text-dim:#6b6b6b;--heading:#ff6347;
  --accent:#ff6347;--accent-2:#ffb347;--card:#fff9f3;--card-2:#ffffff;
  --border:rgba(255,179,71,0.55);--shadow-1:0 6px 18px rgba(255,179,71,0.25);
  --shadow-2:0 4px 12px rgba(255,179,71,0.2);--link-underline:#e63946;
}

/* Bocchi Theme — Pink */
body.theme-ryo-yamada {
  --bg: #0d0b1a;
  --text: #d6e2ff;
  --text-dim: #8a92a8;
  --heading: #5e7cff;
  --accent: #4dd2ff;
  --accent-2: #b366ff;
  --card: #14122a;
  --card-2: #1c1a34;
  --border: rgba(93,125,255,0.35);
  --shadow-1: 0 0 14px rgba(77,210,255,0.20), 0 0 26px rgba(179,102,255,0.18);
  --shadow-2: 0 0 10px rgba(77,210,255,0.16);
  --link-underline: #5e7cff;
}

body.theme-bocchi {
  --bg: #1c0e1a;
  --text: #ffe6f2;
  --text-dim: #b88ba3;
  --heading: #ff66b2;
  --accent: #ff99cc;
  --accent-2: #ff4d88;
  --card: #241320;
  --card-2: #2c182a;
  --border: rgba(255,102,178,0.38);
  --shadow-1: 0 0 14px rgba(255,153,204,0.20), 0 0 26px rgba(255,77,136,0.18);
  --shadow-2: 0 0 10px rgba(255,153,204,0.16);
  --link-underline: #ff66b2;
}

body.theme-welt-yang {
  --bg: #0e0e12;
  --text: #e0e6f2;
  --text-dim: #9ca3b8;
  --heading: #b0bf3f;
  --accent: #ffd27f;
  --accent-2: #ff9f43;
  --card: #16161c;
  --card-2: #1f1f28;
  --border: rgba(63,127,191,0.4);
  --shadow-1: 0 0 14px rgba(63,127,191,0.22), 0 0 26px rgba(255,159,67,0.18);
  --shadow-2: 0 0 10px rgba(255,210,127,0.15);
  --link-underline: #9bbf3f;
}

body.theme-herta {
  --bg: #140a12;
  --text: #d4faff;
  --text-dim: #7ea6ad;
  --heading: #6e4dff;
  --accent: #ff4db8;
  --accent-2: #b366ff;
  --card: #21091f;
  --card-2: #2a1826;
  --border: rgba(77,216,255,0.38);
  --shadow-1: 0 0 14px rgba(77,216,255,0.20), 0 0 26px rgba(110,77,255,0.18);
  --shadow-2: 0 0 10px rgba(179,102,255,0.16);
  --link-underline: #6e4dff;
}

body.theme-evernight {
  --bg: #050508;
  --text: #eaeaea;
  --text-dim: #8a8a8a;
  --heading: #b3003c;
  --accent: #ff0044;
  --accent-2: #66001f;
  --card: #0c0c10;
  --card-2: #141418;
  --border: rgba(255,0,68,0.32);
  --shadow-1: 0 0 14px rgba(255,0,68,0.22), 0 0 26px rgba(102,0,31,0.18);
  --shadow-2: 0 0 10px rgba(179,0,60,0.15);
  --link-underline: #b3003c;
}
body {margin:0;height:100%;display:flex;flex-direction:column;align-items:center;font-family:var(--font-mono);background:var(--bg);color:var(--text);transition:0.3s;}
.container {width:min(92vw,900px);margin:28px auto;padding:0 6px;}
@keyframes bg-move{0%{background-position:0 0;}100%{background-position:100% 100%;}}

/* =========================================
   TERMINAL / CARDS / POSTS
   ========================================= */
.post{width:100%;margin:0 auto;padding:24px;background:var(--card);border-radius:14px;border:none;box-shadow:var(--shadow-1);position:relative;overflow:hidden;backdrop-filter:blur(12px) saturate(1.6);transition:transform 0.4s,box-shadow 0.4s,backdrop-filter 0.4s;}
.version{color:var(--text-dim);font-size:12px;margin:8px 0 0;text-align:center;}
.localTime{color:var(--text-dim);font-size:12px;margin:10px 0 0;text-align:center;}
.card {
  width: 95%;
  margin: 0;
  padding: 24px;
  background: var(--card);
  border: none; /* ⬅️ removed the border */
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(1.6);
  transition: transform 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}

.card h2{margin:28px 0 12px;font-size:14px;color:var(--accent-2);text-shadow:0 0 6px var(--accent);border-left:4px solid var(--accent);padding-left:8px;padding-right: 8px;}
.card ul{margin:0 0 18px 18px;padding:0;list-style:none;}
.card ul li{position:relative;margin:6px 0;padding-left:18px;padding-right: 18px;color:var(--text);font-size:12px;}
.card ul li:hover{color:var(--accent);transition:color 0.25s;}
#youtube-gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 16px;margin-top: 8px;}
.yt-card {width: 100%;border-radius: 12px;overflow: hidden;box-shadow: 0 6px 16px rgba(0,0,0,0.35);border: 1px solid var(--border);background: var(--card-2);cursor: pointer;transition: transform 0.3s ease, box-shadow 0.3s ease;display: flex;flex-direction: column;}
.yt-card:hover {transform: translateY(-4px) scale(1.02);box-shadow: 0 12px 24px rgba(0,0,0,0.45);}
.yt-card img {width: 100%;height: auto;object-fit: cover;display: block;}
.yt-card .meta {padding: 10px 12px;display: flex;flex-direction: column;gap: 4px;}
.yt-card .meta .title {font-weight: 600;font-size: 0.95rem;color: var(--text);line-height: 1.2;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.yt-card .meta .dim {font-size: 0.8rem;color: var(--text-dim);}
/* =========================================
   CHANGELOG CARD — uses .card styles but aligned left
   ========================================= */

/* inherit all .card visuals */
.changelog-card {
  contain: card; /* optional syntactic sugar, ignored if unsupported */
  position: absolute;
  left: 2%;
  top: 80px;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(1.6);
  padding: 20px;
  z-index: 5;
}
.twitch-card {
  contain: card; /* optional syntactic sugar, ignored if unsupported */
  position: absolute;
  right: 2%;
  top: 80px;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(1.6);
  padding: 20px;
  z-index: 5;
}
/* ensure it stays readable & doesn’t overlap main content */
@media (max-width: 1600px) {
  .changelog-card,.twitch-card {
    position: relative;
    width: 95%;
    margin: 20px auto;
    left: 0;
    top: 0;
  }
}

/* optional: make header & version text centered + glowing accent line */
.changelog-card,.twitch-card h2 {
  margin-top: 0;
  font-size: 14px;
  color: var(--accent);
  border-left: 4px solid var(--accent);
  padding-left: 8px;
  text-shadow: 0 0 6px var(--accent);
}

.changelog-card .version,
.changelog-card .localTime, .twitch-card .localTime{
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  margin: 6px 0;
  opacity: 0.9;
}

/* glowing gradient line (reuse your .card::before aesthetic) */
.changelog-card::before,.twitch-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  opacity: 0.65;
}

/* hover effect same as card but subtler to avoid distraction */
.changelog-card:hover,.twitch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px var(--accent), 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
}


/* =========================================
   TERMINAL CLI
   ========================================= */
.terminal-cli{margin-top:24px;background:var(--card-2);border-radius:12px;border:1px solid var(--border);padding:12px;color:var(--text);font-size:12px;display:flex;flex-direction:column;gap:6px;max-width:100%;box-shadow:var(--shadow-2);}
#cli-output{max-height:200px;overflow-y:auto;white-space:pre-wrap;}
.cli-input-line{display:flex;align-items:center;gap:6px;}
.cli-prompt{color:var(--accent);}
#cli-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-mono);font-size:12px;}
#cli-input::placeholder{color:var(--text-dim);}
#cli-output::-webkit-scrollbar{width:6px;}#cli-output::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;}#cli-output::-webkit-scrollbar-track{background:var(--card-2);}

/* =========================================
   FILE CONTAINER / LIGHTBOX
   ========================================= */
.file-container{position:relative;overflow:hidden;border-radius:6px;background:#111;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;backdrop-filter:blur(12px) saturate(1.6);}
.file-container img,.file-container video{width:100%;height:100%;object-fit:cover;}
.file-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);color:#fff;padding:5px;font-size:12px;text-align:center;opacity:0;transition:opacity 0.2s;pointer-events:none;}
.file-container:hover .file-overlay{opacity:1;pointer-events:auto;}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;justify-content:center;align-items:center;z-index:1000;}
.lightbox-content{position:relative;max-width:90%;max-height:90%;text-align:center;}
.lightbox-content video,.lightbox-content img{max-width:100%;max-height:80vh;}
#lightbox-close{position:absolute;top:5px;right:10px;font-size:28px;cursor:pointer;color:#fff;}
#lightbox-prev,#lightbox-next{position:fixed;top:50%;transform:translateY(-50%);font-size:3rem;color:#fff;background:rgba(0,0,0,0.4);padding:10px 20px;border-radius:8px;cursor:pointer;z-index:10001;}
#lightbox-prev{left:10px;}#lightbox-next{right:10px;}
#lightbox-prev:hover,#lightbox-next:hover{background-color:rgba(0,0,0,0.6);}

/* =========================================
   BUTTONS / NAV / FILTERS
   ========================================= */
.buttons,.nav-links,.file-filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0;}
.buttons a,.filter-btn,.nav-btn{position:relative;overflow:hidden;padding:12px 18px;font-size:12px;border-radius:10px;border:1px solid var(--border);background:var(--card-2);color:var(--text);box-shadow:var(--shadow-2);letter-spacing:0.04em;transition:all 0.25s;}
.buttons a:hover,.filter-btn:hover,.nav-btn:hover{transform:translateY(-2px);box-shadow:0 0 14px var(--accent);background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#0a0a0a;border-color:transparent;}
.filter-btn{padding:6px 12px;font-size:11px;border:1px solid var(--accent);background:var(--card-2);color:var(--accent);cursor:pointer;transition:all 0.25s;}
.filter-btn:hover{background:var(--heading);color:#fff;box-shadow:0 0 12px var(--accent),0 0 20px var(--heading);transform:translateY(-1px);}
.nav-btn{padding:12px 20px;font-size:12px;border:2px solid var(--accent);color:var(--accent);background:transparent;border-radius:10px;letter-spacing:0.05em;}
.nav-btn-disabled{padding:12px 20px;font-size:12px;border:2px solid var(--accent);color:var(--accent);background:transparent;border-radius:10px;letter-spacing:0.05em;pointer-events:none;cursor:not-allowed;opacity:0.5;}
.buttons a::after,.filter-btn::after,.nav-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.4s;}
.buttons a:hover::after,.filter-btn:hover::after,.nav-btn:hover::after{opacity:1;}

/* =========================================
   TYPOGRAPHY / GLITCH
   ========================================= */
h1{font-size: 60px;margin:0;letter-spacing:0.08em;color:var(--heading);text-shadow:0 0 8px var(--accent);text-align:center;font-family:var(--font);}
h2{margin:0;letter-spacing:0.08em;color:var(--heading);text-shadow:0 0 8px var(--accent);text-align:center;font-family:var(--font);}
a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--link-underline);transition:all 0.25s;}
a:hover{color:#fff;background-color:var(--accent);border-radius:4px;}
.glitch{position:relative;display:block;margin:0 auto;padding:4px 0;width:max-content;text-align:center;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;text-align:center;opacity:0.2;pointer-events:none;animation: logo-float 2s infinite;}
.glitch::before{color:var(--accent-2);}
.glitch::after{color:var(--accent);}

@keyframes logo-float {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0px, -5px); }
  50% { transform: translate(0px, 5px); }
  75% { transform: translate(0px, -5px); }
  100% { transform: translate(0, 0); }
}

/* =========================================
   NOW PLAYING / SPOTIFY
   ========================================= */
.now-playing{display:flex;align-items:center;gap:14px;margin:16px auto 0;padding:12px 14px;background:var(--card-2);border:1px solid var(--border);border-radius:12px;max-width:420px;box-shadow:var(--shadow-2);}
.album-art{height:76px;width:76px;border-radius:10px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,0.35);border:1px solid var(--border);transition:transform 0.3s,box-shadow 0.3s;}
.album-art:hover{transform:scale(1.05);box-shadow:0 0 24px var(--accent),0 0 48px var(--accent-2);}
.track-info{line-height:1.3;}
.listening-to{font-size:10px;color:var(--text-dim);margin-bottom:4px;letter-spacing:0.05em;text-transform:uppercase;}
#track-name{overflow:hidden;position:relative;max-width:280px;}
#track-name span{display:inline-block;padding-right:3rem;}
.bg-player{position:fixed;bottom:20px;right:20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(12px) brightness(0.9);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:pointer;transition:transform 0.3s ease,opacity 0.3s ease;overflow:visible;}
.bg-player:hover{transform:scale(1.1);opacity:0.9;}
.bg-player .inner i{font-size:24px;color:white;}
.bg-player::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,0.5);opacity:0;transform:translate(-50%, -50%) scale(1);}
@keyframes pulse-bpm{0%{transform:scale(1);}12%{transform:scale(1.25);}25%{transform:scale(1.1);}100%{transform:scale(1);}}
@keyframes ring-bpm{0%{opacity:0.8;transform:translate(-50%,-50%) scale(1);}50%{opacity:0.3;transform:translate(-50%,-50%) scale(1.8);}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2);}}
.bg-player.playing{animation:pulse-bpm 1.765s cubic-bezier(0.3,0.8,0.4,1) infinite;}
.bg-player.playing::after{animation:ring-bpm 1.765s ease-out infinite;}

.track-artists{font-size:12px;color:var(--text-dim);}
@keyframes scroll-text{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* =========================================
   MOBILE / RESPONSIVE OPTIMIZED
   ========================================= */
@media(max-width:768px){
  /* prevent horizontal scrolling */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  h1.glitch {
    font-size: clamp(1rem,4.2vw,1.6rem);
    margin: 0.3rem 0;
  }

  .version, .localTime {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .container, .terminal, .post, .card, .terminal-cli, .buttons, .nav-links, .file-filters {
    box-sizing: border-box;
    max-width: 100%;
  }

  .buttons a, .nav-links a {
    font-size: 0.85rem;
    padding: 10px;
    margin: 5px 0;
    flex: 1 1 auto;
    min-width: 45%; /* responsive buttons */
    text-align: center;
  }

  #spotify-container {
    flex-direction: column;
    align-items: center;
    padding: 8px;
  }

  #spotify-container img.album-art {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
  }

  #track-name, #track-artists {
    font-size: 0.85rem;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .spotify-time {
    font-size: 0.7rem;
  }

  #storage-text {
    font-size: 0.8rem;
    word-break: break-word;
    text-align: center;
    padding: 0 6px;
  }

  .cli-input-line {
    flex-direction: column;
    font-size: 0.85rem;
  }

  .cli-prompt {
    margin-bottom: 4px;
  }

  .latest-files h2 {
    font-size: 1rem;
  }

  .file-filters button {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* FIX fixed/floating elements to stay inside viewport */
  .bg-player {
    bottom: 14px;
    right: 14px;
    max-width: 64px;
    max-height: 64px;
  }

  .theme-toggle {
    top: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }

  /* scale lightbox content */
  .lightbox-content {
    max-width: 95vw;
    max-height: 85vh;
  }

  /* ensure file containers fit */
  .file-container img, .file-container video {
    max-width: 100%;
    height: auto;
  }

  /* buttons / nav / filters wrap */
  .buttons, .nav-links, .file-filters {
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
    justify-content: center;
  }

  /* scrollable text adjustments */
  #track-name span {
    animation: scroll-text 12s linear infinite;
  }
}


/* =========================================
   THEME TOGGLE
   ========================================= */
.theme-toggle{position:fixed;top:14px;right:14px;padding:10px 12px;font-size:12px;border-radius:10px;border:1px solid var(--border);background:var(--card-2);color:var(--text);box-shadow:var(--shadow-2);cursor:pointer;transition:transform 0.15s,box-shadow 0.25s,background 0.25s;z-index:10;}
.theme-toggle:hover{transform:translateY(-2px);box-shadow:0 0 14px var(--accent);}
.theme-toggle:focus-visible{outline:2px dashed var(--accent);outline-offset:3px;}

/* =========================================
   PARTICLES / AMBIENT
   ========================================= */
.particle-shimmer::after,.particle-shimmer::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px),radial-gradient(circle,rgba(138,43,226,0.03) 2px,transparent 2px);background-size:180px 180px,320px 320px;animation:float-particles 80s linear infinite;opacity:0.25;}
@keyframes float-particles{from{transform:translateY(0);}to{transform:translateY(-200px);}}