/* ==========================================================================
   LORDTONY — vaporwave hacker portfolio
   Design tokens
   ========================================================================== */
:root {
  --bg: #05000f;
  --bg-mid: #12002e;
  --bg-window: #1a1030;
  --bg-playlist: #03020a;
  --blue-dark: #12008a;
  --blue-purple: #7a12c8;
  --navy: #0a0a55;

  --cyan: #29fff5;
  --magenta: #ff4fd8;
  --magenta-2: #ff2fb0;
  --yellow: #ffe74c;
  --purple: #b06bff;
  --green: #6bff9e;
  --online-green: #008000;

  --win95-face: #c3c3c3;
  --win95-light: #fff;
  --win95-dark: #5a5a5a;

  --text-light: #eafcff;
  --text-dark: #1a1a1a;
  --text-darker: #0a0a0a;
  --muted: #8f86b5;
  --muted-2: #7a6a9a;
  --jp-accent: #a01aa0;

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'VT323', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); overflow-x: hidden; }
body { font-family: var(--font-mono); color: var(--text-light); }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--magenta); color: var(--bg); }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--bg-mid); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan), var(--magenta)); border: 2px solid var(--bg-mid); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes gridscroll { 0% { background-position: 0 0; } 100% { background-position: 0 80px; } }
@keyframes sunbob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-14px); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeRev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.15; } }
@keyframes spin3d { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes spinY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes flick { 0%,100% { opacity: 0.05; } 50% { opacity: 0.12; } }
@keyframes glitchA { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(3px,-3px); } 60% { transform: translate(-2px,-2px); } 80% { transform: translate(2px,3px); } }
@keyframes glitchB { 0%,100% { transform: translate(0,0); } 25% { transform: translate(4px,-2px); } 50% { transform: translate(-3px,3px); } 75% { transform: translate(3px,2px); } }
@keyframes eq { 0% { height: 8%; } 100% { height: 100%; } }
@keyframes ravehue { 0% { filter: hue-rotate(0deg) saturate(1.4); } 100% { filter: hue-rotate(360deg) saturate(1.4); } }
@keyframes chadspin { 0% { transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 50% { transform: translate(-50%,-50%) rotate(8deg) scale(1.08); } 100% { transform: translate(-50%,-50%) rotate(-8deg) scale(1); } }
@keyframes rainbow { 0% { color:#ff4fd8; } 25% { color:#29fff5; } 50% { color:#ffe74c; } 75% { color:#b06bff; } 100% { color:#ff4fd8; } }
@keyframes subpulse { 0%,100% { transform:scale(1) rotate(0deg); } 50% { transform:scale(1.06) rotate(-1.5deg); } }
@keyframes subshake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-2px); } 75% { transform:translateX(2px); } }

/* ==========================================================================
   Background layers
   ========================================================================== */
.bg-fixed {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg,#b46fb0 0%,#c877bd 20%,#e589c9 40%,#ff9ed6 52%,#ffb0d8 57.4%,#8fd9e6 57.5%,#79cfe0 100%);
}
.bg-sun {
  position: absolute; left: 50%; bottom: 42.6%; width: 330px; height: 330px; border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,#ffe98a 0%,#ffd77e 38%,#ff9fd0 78%,#ff8fcb 100%);
  box-shadow: 0 0 70px 8px rgba(255,200,150,0.35);
  animation: sunbob 6s ease-in-out infinite;
}
.bg-sun-stripes {
  position: absolute; left: 50%; bottom: 42.6%; width: 330px; height: 330px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, transparent 0 24px, rgba(198,120,189,0.55) 24px 32px);
  border-radius: 50%; opacity: 0.9;
  mask: linear-gradient(180deg,transparent 0 50%, #000 50%);
  -webkit-mask: linear-gradient(180deg,transparent 0 50%, #000 50%);
  animation: sunbob 6s ease-in-out infinite;
}
.bg-grid {
  position: absolute; left: -25%; right: -25%; bottom: 0; height: 42.5%;
  background-image:
    linear-gradient(90deg, rgba(255,79,191,0.7) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,79,191,0.7) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(320px) rotateX(74deg);
  transform-origin: bottom;
  animation: gridscroll 1.2s linear infinite;
}

/* CRT / scanline overlays */
.crt-scanlines { position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px); }
.crt-flicker { position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: var(--cyan); mix-blend-mode: overlay; animation: flick 0.18s steps(2) infinite; }
.crt-scan-band { position: fixed; left: 0; right: 0; top: 0; height: 120px; z-index: 9997; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent); animation: scan 5.5s linear infinite; }
.crt-vignette { position: fixed; inset: 0; z-index: 9997; pointer-events: none; box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.6); }

/* Floating wireframe decorations */
.shape-cube-wrap { position: fixed; top: 16%; left: 6%; z-index: 1; pointer-events: none; perspective: 600px; animation: floaty 7s ease-in-out infinite; }
.shape-cube { width: 90px; height: 90px; transform-style: preserve-3d; animation: spin3d 9s linear infinite; }
.shape-cube div { position: absolute; inset: 0; }
.shape-cube .f1 { border: 2px solid var(--cyan); box-shadow: 0 0 12px var(--cyan); transform: translateZ(45px); }
.shape-cube .f2 { border: 2px solid var(--magenta); box-shadow: 0 0 12px var(--magenta); transform: translateZ(-45px); }
.shape-cube .f3 { border: 2px solid var(--yellow); transform: rotateY(90deg) translateZ(45px); }
.shape-cube .f4 { border: 2px solid var(--yellow); transform: rotateY(90deg) translateZ(-45px); }

.shape-triangle-wrap { position: fixed; top: 60%; right: 7%; z-index: 1; pointer-events: none; animation: floaty 9s ease-in-out infinite; }
.shape-triangle { width: 0; height: 0; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 76px solid rgba(255,79,216,0.15); filter: drop-shadow(0 0 10px var(--magenta)); animation: spinY 6s linear infinite; }

.shape-ring { position: fixed; top: 40%; right: 16%; z-index: 1; pointer-events: none; width: 64px; height: 64px; border: 2px solid var(--purple); border-radius: 50%; box-shadow: 0 0 16px var(--purple), inset 0 0 16px var(--purple); animation: floaty 5.5s ease-in-out infinite; }

/* ==========================================================================
   Content root
   ========================================================================== */
#lt-root { position: relative; z-index: 2; }
#lt-root.rave { animation: ravehue 1.1s linear infinite; }

/* Marquees */
.marquee-bar { overflow: hidden; white-space: nowrap; background: var(--bg); border-bottom: 3px solid var(--magenta); box-shadow: 0 0 20px var(--magenta); }
.marquee-track { display: inline-block; animation: marquee 22s linear infinite; font-family: var(--font-pixel); font-size: 13px; color: var(--cyan); padding: 12px 0; }
.marquee-track span { padding: 0 34px; }

.marquee-divider { overflow: hidden; white-space: nowrap; background: var(--bg-mid); }
.marquee-divider.magenta { border-top: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); }
.marquee-divider.cyan { border-top: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.marquee-divider .track { display: inline-block; font-family: var(--font-mono); font-size: 26px; padding: 6px 0; }
.marquee-divider .track.rev { animation: marqueeRev 18s linear infinite; color: var(--magenta); }
.marquee-divider .track.fwd { animation: marquee 20s linear infinite; color: var(--cyan); }
.marquee-divider .track span { padding: 0 26px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { max-width: 1040px; margin: 0 auto; padding: 70px 24px 40px; text-align: center; }

.wordmark-box { position: relative; display: inline-block; line-height: 1; max-width: 100%; }
.wordmark { font-size: 64px; font-family: var(--font-pixel); }
.wordmark.layer-a { position: absolute; inset: 0; color: var(--cyan); animation: glitchA 2.2s infinite; opacity: 0.85; }
.wordmark.layer-b { position: absolute; inset: 0; color: var(--magenta-2); animation: glitchB 1.7s infinite; opacity: 0.85; }
.wordmark.layer-main { position: relative; color: #fff; text-shadow: 0 0 18px var(--magenta); }
br.wordmark-break { display: none; }
@media (max-width: 520px) {
  .wordmark { font-size: 12vw; line-height: 1.3; }
  .wordmark-box { line-height: 1.3 !important; }
  br.wordmark-break { display: block; }
}

.hero-subtitle { margin-top: 20px; font-family: var(--font-jp); font-size: 22px; letter-spacing: 8px; color: var(--yellow); text-shadow: 0 0 10px #ff8a3d; }

.hero-bio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; margin-top: 36px; }
.avatar { width: 150px; height: 150px; border: 4px solid var(--cyan); box-shadow: 0 0 26px var(--cyan); object-fit: cover; }
.bio { max-width: 460px; text-align: left; font-size: 24px; line-height: 1.25; color: var(--text-light); text-shadow: 0 0 6px rgba(41,255,245,0.4); }
.bio .accent-magenta { color: var(--magenta); }
.bio .accent-yellow { color: var(--yellow); }

.badge-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; }
.badge { font-family: var(--font-pixel); font-size: 9px; padding: 8px 12px; border: 2px solid; }
.badge.construction { background: var(--magenta-2); color: var(--bg); border-color: #fff; box-shadow: 3px 3px 0 var(--cyan); animation: blink 1s steps(1) infinite; }
.badge.netscape { background: var(--navy); color: var(--cyan); border-color: var(--cyan); }
.badge.resolution { background: #111; color: var(--yellow); border-color: var(--yellow); }
.badge.online { background: var(--online-green); color: #fff; border-color: #fff; animation: blink 0.6s steps(1) infinite; }

/* ==========================================================================
   Section headings
   ========================================================================== */
.section { max-width: 1040px; margin: 0 auto; padding: 34px 24px 20px; }
.section.featured { padding-top: 56px; }

.h-featured { font-family: var(--font-pixel); font-size: 22px; color: var(--yellow); text-shadow: 4px 4px 0 var(--magenta-2); margin: 0 0 8px; }
.h-sub { font-size: 22px; color: var(--cyan); margin: 0 0 30px; }
.h-more { font-family: var(--font-pixel); font-size: 18px; color: var(--cyan); text-shadow: 3px 3px 0 var(--blue-dark); margin: 0 0 26px; }
.h-videos { font-family: var(--font-pixel); font-size: 18px; color: var(--magenta); text-shadow: 3px 3px 0 var(--blue-dark); margin: 0 0 8px; }
.h-videos-sub { font-size: 22px; color: var(--cyan); margin: 0; }

/* ==========================================================================
   Windows-95 chrome (shared by project cards + popups)
   ========================================================================== */
.win-card { background: var(--win95-face); border: 2px solid var(--win95-light); border-right-color: var(--win95-dark); border-bottom-color: var(--win95-dark); }
.win-card.featured { box-shadow: 0 0 30px rgba(255,79,216,0.5), 8px 8px 0 rgba(0,0,0,0.5); }
.win-card.more { box-shadow: 5px 5px 0 rgba(0,0,0,0.5); display: flex; flex-direction: column; }

.win-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; }
.win-titlebar.featured { background: linear-gradient(90deg,var(--blue-dark),var(--blue-purple)); }
.win-titlebar.more { background: linear-gradient(90deg,var(--win95-dark),var(--blue-purple)); padding: 5px 8px; }
.win-titlebar-text { font-family: var(--font-mono); color: #fff; letter-spacing: 1px; }
.win-titlebar-text.featured { font-size: 22px; }
.win-titlebar-text.more { font-size: 19px; }

.win-btns { display: flex; gap: 4px; }
.win-btn-icon { background: var(--win95-face); border: 2px solid var(--win95-light); border-right-color: var(--win95-dark); border-bottom-color: var(--win95-dark); font-family: monospace; text-align: center; color: #000; display: inline-flex; align-items: center; justify-content: center; }
.win-btn-icon.lg { width: 20px; height: 18px; font-size: 12px; }
.win-btn-icon.sm { width: 18px; height: 16px; font-size: 11px; }

.win-body.featured { padding: 20px; color: var(--text-darker); }
.win-body.more { padding: 14px 16px; color: var(--text-darker); flex: 1; display: flex; flex-direction: column; }

/* Reusable Win95 button */
.btn-win95 { display: inline-block; font-family: var(--font-pixel); text-decoration: none; color: #000; background: var(--win95-face); border: 2px solid var(--win95-light); border-right-color: var(--win95-dark); border-bottom-color: var(--win95-dark); cursor: pointer; }
.btn-win95.lg { font-size: 10px; padding: 10px 14px; display: inline-flex; align-items: center; gap: 7px; }
.btn-win95.sm { font-size: 9px; padding: 9px 12px; display: inline-flex; align-items: center; gap: 6px; }
.btn-win95 .play-icon { color: var(--jp-accent); }

/* ==========================================================================
   Project cards
   ========================================================================== */
.featured-list { display: flex; flex-direction: column; gap: 34px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; }

.card-content-row { display: flex; flex-wrap: wrap; gap: 20px; }
.card-shot {
  width: 220px; height: 150px; flex: 0 0 auto; border: 2px solid var(--win95-dark);
  background: #bbb; object-fit: cover;
  color: #333; font-family: var(--font-mono); font-size: 14px;
}
.card-info { flex: 1 1 300px; min-width: 260px; }
.card-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-title { font-family: var(--font-pixel); font-size: 16px; color: var(--blue-dark); margin: 0; }
.card-title-jp { font-family: var(--font-jp); font-size: 18px; color: var(--jp-accent); }
.card-tags { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.tag-chip { font-family: var(--font-pixel); font-size: 8px; padding: 5px 8px; }
.tag-chip.lang { background: var(--blue-dark); color: var(--cyan); }
.tag-chip.badge { background: var(--magenta-2); color: #fff; }
.card-desc { font-family: var(--font-mono); font-size: 22px; line-height: 1.15; color: var(--text-dark); margin: 0 0 16px; }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.more-card .tag-chip.lang { align-self: flex-start; margin-bottom: 10px; }
.more-card .card-desc { font-size: 21px; margin: 0 0 14px; flex: 1; }
.more-card .card-actions { align-self: flex-start; gap: 8px; }

/* ==========================================================================
   Media player (video archive)
   ========================================================================== */
.media-player { background: var(--bg-window); border: 2px solid var(--cyan); box-shadow: 0 0 26px var(--cyan); }
.media-player-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg,var(--blue-purple),var(--blue-dark)); padding: 6px 8px; }
.media-player-title { font-family: var(--font-mono); font-size: 20px; color: var(--cyan); }
.media-player-count { font-family: var(--font-pixel); font-size: 8px; color: var(--yellow); }

.media-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 9px 8px 0; background: var(--bg); }
.media-tab { display: inline-block; text-decoration: none; font-family: var(--font-pixel); font-size: 8px; padding: 8px 10px; border: 2px solid var(--cyan); border-bottom: none; cursor: pointer; letter-spacing: 1px; background: var(--bg-mid); color: var(--cyan); }
.media-tab.active { background: var(--cyan); color: var(--bg); }

.media-list { background: var(--bg-playlist); border-top: 2px solid var(--cyan); padding: 6px; max-height: 540px; overflow: auto; }
.media-row { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px 10px; border-bottom: 1px solid rgba(41,255,245,0.12); }
.media-row:hover { background: var(--blue-dark); }
.media-row-n { font-family: var(--font-pixel); font-size: 9px; color: var(--muted-2); width: 26px; flex: 0 0 auto; }
.media-row-play { color: var(--magenta); font-size: 14px; flex: 0 0 auto; }
.media-row-text { flex: 1; min-width: 0; }
.media-row-title { display: block; font-family: var(--font-mono); font-size: 23px; color: var(--cyan); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-row-desc { display: block; font-family: var(--font-mono); font-size: 17px; color: var(--muted); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-row-tag { font-family: var(--font-pixel); font-size: 7px; flex: 0 0 auto; padding: 4px 6px; color: var(--bg); }
.media-row-link { color: var(--yellow); font-size: 13px; font-family: var(--font-pixel); flex: 0 0 auto; }

.media-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-mid); border-top: 2px solid var(--cyan); padding: 7px 10px; font-family: var(--font-mono); font-size: 19px; color: var(--magenta); }
.media-status a { text-decoration: none; color: var(--cyan); }

/* ==========================================================================
   Now playing
   ========================================================================== */
.now-playing-section { max-width: 720px; margin: 40px auto; padding: 0 24px; }
.now-playing { background: var(--bg-window); border: 2px solid var(--cyan); box-shadow: 0 0 26px var(--cyan); }
.now-playing-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg,var(--blue-purple),var(--blue-dark)); padding: 5px 8px; }
.now-playing-title { font-family: var(--font-mono); font-size: 20px; color: var(--cyan); }
.now-playing-kbps { font-family: var(--font-pixel); font-size: 8px; color: var(--yellow); }
.now-playing-body { padding: 16px; }

.track-marquee { overflow: hidden; white-space: nowrap; background: var(--bg); border: 1px inset var(--cyan); padding: 6px 0; margin-bottom: 12px; }
.track-marquee-track { display: inline-block; animation: marquee 12s linear infinite; font-family: var(--font-mono); font-size: 24px; color: var(--cyan); }
.track-marquee-track span { padding: 0 30px; }

.player-controls { display: flex; align-items: flex-end; gap: 16px; }
.play-btn { cursor: pointer; font-family: var(--font-pixel); font-size: 16px; color: var(--bg); background: var(--cyan); border: 2px solid #fff; border-right-color: #0a7; border-bottom-color: #0a7; width: 56px; height: 56px; }
.equalizer { flex: 1; height: 56px; display: flex; align-items: flex-end; gap: 3px; }
.eq-bar { flex: 1; min-width: 4px; }
.player-time-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 20px; color: var(--magenta); margin-top: 10px; }

/* ==========================================================================
   Footer / webring
   ========================================================================== */
.site-footer { border-top: 3px solid var(--magenta); box-shadow: 0 0 20px var(--magenta); margin-top: 20px; padding: 34px 24px 60px; text-align: center; background: rgba(5,0,15,0.72); }
.webring-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.webring-chip { font-family: var(--font-pixel); font-size: 8px; padding: 7px 10px; border: 1px solid; text-decoration: none; }
.webring-chip.dark { background: #000; color: var(--cyan); border-color: var(--cyan); }
.webring-chip.magenta { background: var(--magenta-2); color: #fff; border-color: #fff; }
.webring-chip.github { background: #161616; color: #fff; border-color: #666; }
.webring-chip.youtube { background: #111; color: var(--yellow); border-color: var(--yellow); animation: subshake 0.5s steps(2) infinite; }

.visitor-row { font-family: var(--font-mono); font-size: 24px; color: var(--cyan); }
.visitor-count { font-family: var(--font-pixel); font-size: 16px; letter-spacing: 3px; color: var(--yellow); background: #000; padding: 4px 8px; border: 1px solid var(--yellow); }
.copyright { font-family: var(--font-mono); font-size: 20px; color: var(--magenta); margin-top: 14px; }
.easter-hint { margin-top: 16px; font-family: var(--font-mono); font-size: 18px; color: var(--muted-2); }
.easter-hint .keys { color: var(--cyan); }
.easter-hint a { color: var(--yellow); cursor: pointer; }

/* ==========================================================================
   Caught On Tape popup
   ========================================================================== */
.tape-popup { position: fixed; z-index: 9998; width: min(560px,92vw); max-height: 82vh; display: flex; flex-direction: column; background: var(--bg-window); border: 2px solid var(--cyan); box-shadow: 8px 8px 0 rgba(0,0,0,0.55); transform: translate(-50%,-50%); }
.tape-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(90deg,var(--blue-purple),var(--blue-dark)); padding: 7px 8px; }
.tape-title { font-family: var(--font-mono); font-size: 21px; color: var(--cyan); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.tape-btn { width: 22px; height: 20px; background: var(--win95-face); border: 2px solid var(--win95-light); border-right-color: var(--win95-dark); border-bottom-color: var(--win95-dark); font-family: monospace; font-size: 12px; text-align: center; color: #000; line-height: 16px; text-decoration: none; display: inline-block; }
.tape-btn.tape-close { font-size: 13px; cursor: pointer; }
.tape-body { background: var(--bg-playlist); padding: 6px; overflow: auto; }
.tape-row { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 10px; border-bottom: 1px solid rgba(41,255,245,0.12); }
.tape-row:hover { background: var(--blue-dark); }
.tape-row-play { color: var(--magenta); font-size: 14px; flex: 0 0 auto; }
.tape-row-title { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 23px; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-row-link { color: var(--yellow); font-size: 13px; font-family: var(--font-pixel); flex: 0 0 auto; }
.tape-footer { background: var(--bg-mid); border-top: 2px solid var(--cyan); padding: 7px 10px; font-family: var(--font-mono); font-size: 18px; color: var(--magenta); }

/* ==========================================================================
   Rave mode
   ========================================================================== */
.rave-stripes { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(45deg,rgba(255,79,216,0.16) 0 30px, rgba(41,255,245,0.16) 30px 60px); }
.rave-marquee { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; overflow: hidden; white-space: nowrap; pointer-events: none; background: #000; border-bottom: 2px solid var(--cyan); }
.rave-marquee-track { display: inline-block; animation: marquee 5s linear infinite; font-family: var(--font-pixel); font-size: 16px; padding: 8px 0; }
.rave-marquee-track span { padding: 0 30px; animation: rainbow 1s linear infinite; }
.rave-chad { position: fixed; top: 50%; left: 50%; z-index: 9999; transform: translate(-50%,-50%); text-align: center; animation: chadspin 1.6s ease-in-out infinite; }
.rave-chad img { width: 260px; height: 260px; border: 6px solid #fff; box-shadow: 0 0 60px var(--magenta), 0 0 120px var(--cyan); filter: grayscale(0.4) contrast(1.3); object-fit: cover; }
.rave-chad-caption { margin-top: 14px; font-family: var(--font-pixel); font-size: 18px; animation: rainbow 0.7s linear infinite; text-shadow: 0 0 12px #fff; }
.rave-exit { display: inline-block; margin-top: 12px; pointer-events: auto; font-family: var(--font-mono); font-size: 22px; color: var(--cyan); cursor: pointer; text-decoration: none; }