@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Permanent+Marker&family=VT323&family=Comic+Neue:wght@400;700&family=Bungee+Shade&display=swap');

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

  :root {
    --neon-blue: #00f0ff;
    --neon-pink: #ff00e6;
    --neon-purple: #b44dff;
    --neon-green: #39ff14;
    --neon-yellow: #ffe600;
    --deep-space: #050510;
    --panel-bg: rgba(10, 5, 30, 0.72);
    --panel-border: #1a0a3e;
    --text-main: #d0c8ff;
    --text-bright: #ffffff;
    --link-color: #00f0ff;
    --glow-blue: 0 0 10px #00f0ff, 0 0 20px #00f0ff44;
    --glow-pink: 0 0 10px #ff00e6, 0 0 20px #ff00e644;
    --glow-purple: 0 0 10px #b44dff, 0 0 20px #b44dff44;
    --text-muted: #665599;
  }

  html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='3' fill='%2300f0ff' /%3E%3Ccircle cx='12' cy='12' r='8' stroke='%2300f0ff' fill='none' stroke-width='1' opacity='0.5'/%3E%3Cline x1='12' y1='0' x2='12' y2='6' stroke='%2300f0ff' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='12' y1='18' x2='12' y2='24' stroke='%2300f0ff' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='0' y1='12' x2='6' y2='12' stroke='%2300f0ff' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='18' y1='12' x2='24' y2='12' stroke='%2300f0ff' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E") 12 12, crosshair;
  }

  body {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    background: var(--deep-space);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
  }

  /* ============ COMBINED CANVAS (stars + comets) ============ */
  #starfield {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* ============ GALAXY BLOBS ============ */
  .galaxy {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
    animation: drift 30s ease-in-out infinite alternate;
  }
  .galaxy-1 {
    width: 600px; height: 600px;
    background: radial-gradient(ellipse, #6b21a8 0%, #1e0a3a 50%, transparent 70%);
    top: -100px; left: -100px;
    animation-duration: 40s;
  }
  .galaxy-2 {
    width: 500px; height: 400px;
    background: radial-gradient(ellipse, #0e4a6e 0%, #0a1628 50%, transparent 70%);
    bottom: -50px; right: -80px;
    animation-duration: 35s;
    animation-delay: -10s;
  }
  .galaxy-3 {
    width: 350px; height: 350px;
    background: radial-gradient(ellipse, #581c87 0%, #1a0533 50%, transparent 70%);
    top: 40%; left: 50%;
    animation-duration: 45s;
    animation-delay: -20s;
  }
  .galaxy-4 {
    width: 280px; height: 200px;
    background: radial-gradient(ellipse, #0c4a4a 0%, #061a2a 50%, transparent 70%);
    top: 15%; right: 10%;
    animation-duration: 50s;
    animation-delay: -5s;
    opacity: 0.15;
  }
  @keyframes drift {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(40px, -30px) scale(1.08) rotate(2deg); }
    66% { transform: translate(-20px, 20px) scale(1.05) rotate(-1deg); }
    100% { transform: translate(15px, -10px) scale(0.95) rotate(1deg); }
  }

  /* ============ GLITTER OVERLAY ============ */
  .glitter-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
  .glitter {
    position: absolute;
    border-radius: 50%;
    background: white;
    animation: glitterPulse var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
  }
  .glitter.star-shape {
    border-radius: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  @keyframes glitterPulse {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.5) rotate(180deg); box-shadow: 0 0 6px 2px white, 0 0 12px 4px var(--neon-blue); }
  }


  /* ============ SEAMLESS MARQUEE ============ */
  .marquee-banner {
    position: relative;
    z-index: 10;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple), var(--neon-blue), var(--neon-green), var(--neon-pink));
    background-size: 300% 100%;
    animation: rainbowSlide 4s linear infinite;
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: seamlessScroll var(--scroll-speed, 20s) linear infinite;
    will-change: transform;
  }
  .marquee-track span {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--deep-space);
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 40px;
    flex-shrink: 0;
  }
  @keyframes seamlessScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes rainbowSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
  }

  /* ============ MAIN LAYOUT ============ */
  .ms-container {
    position: relative;
    z-index: 10;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 16px;
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 20px;
  }

  /* ============ PANEL STYLES (unique hover per section) ============ */
  .panel {
    background: var(--panel-bg);
    border: 2px solid var(--panel-border);
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: inset 0 0 30px rgba(100, 50, 200, 0.1), 0 0 15px rgba(100, 50, 200, 0.15);
    backdrop-filter: blur(6px);
    transition: border-color 0.4s, box-shadow 0.4s;
  }
  .panel-profile:hover { border-color: rgba(255, 0, 230, 0.4); box-shadow: inset 0 0 30px rgba(255, 0, 230, 0.08), 0 0 25px rgba(255, 0, 230, 0.2); }
  .panel-about:hover { border-color: rgba(0, 240, 255, 0.4); box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.08), 0 0 25px rgba(0, 240, 255, 0.2); }
  .panel-meet:hover { border-color: rgba(57, 255, 20, 0.4); box-shadow: inset 0 0 30px rgba(57, 255, 20, 0.06), 0 0 25px rgba(57, 255, 20, 0.15); }
  .panel-interests:hover { border-color: rgba(255, 230, 0, 0.4); box-shadow: inset 0 0 30px rgba(255, 230, 0, 0.06), 0 0 25px rgba(255, 230, 0, 0.15); }
  .panel-top8:hover { border-color: rgba(180, 77, 255, 0.4); box-shadow: inset 0 0 30px rgba(180, 77, 255, 0.1), 0 0 25px rgba(180, 77, 255, 0.25); }
  .panel-blog:hover { border-color: rgba(255, 0, 230, 0.35); box-shadow: inset 0 0 30px rgba(255, 0, 230, 0.06), 0 0 25px rgba(255, 0, 230, 0.18); }
  .panel-comments:hover { border-color: rgba(0, 240, 255, 0.35); box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.06), 0 0 25px rgba(0, 240, 255, 0.18); }

  .panel-header {
    font-family: 'Permanent Marker', cursive;
    font-size: 16px;
    color: var(--neon-blue);
    text-shadow: var(--glow-blue);
    border-bottom: 1px solid var(--neon-blue);
    padding-bottom: 8px;
    margin-bottom: 12px;
    letter-spacing: 1px;
  }

  /* ============ PROFILE PIC — SVG AVATAR + ANIMATED BORDER ============ */
  .profile-pic-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #0d0221, #1a0533, #0a1628);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* animated cycling border — with hue-rotate fallback for Firefox */
  .profile-pic-wrapper::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 6px;
    background: conic-gradient(from 0deg, var(--neon-pink), var(--neon-purple), var(--neon-blue), var(--neon-green), var(--neon-pink));
    animation: rotateBorderFallback 3s linear infinite;
  }
  @keyframes rotateBorderFallback {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
  /* Enhanced version for browsers supporting @property */
  @supports (background: conic-gradient(from var(--a, 0deg), red, blue)) {
    @property --border-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .profile-pic-wrapper::before {
      background: conic-gradient(from var(--border-angle, 0deg), var(--neon-pink), var(--neon-purple), var(--neon-blue), var(--neon-green), var(--neon-pink));
      animation: rotateBorderProp 3s linear infinite;
    }
    @keyframes rotateBorderProp {
      0% { --border-angle: 0deg; }
      100% { --border-angle: 360deg; }
    }
  }
  /* scanline overlay */
  .profile-pic-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
  }
  .profile-pic-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .profile-pic-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 240, 255, 0.03);
    animation: crtFlicker 0.1s infinite alternate;
    pointer-events: none;
  }
  @keyframes crtFlicker {
    0% { opacity: 0.03; }
    100% { opacity: 0.08; }
  }
  .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
  }

  .profile-name {
    font-family: 'Bungee Shade', cursive;
    font-size: 18px;
    text-align: center;
    margin: 10px 0 4px;
    line-height: 1.3;
  }
  .glitter-text {
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--neon-purple), var(--neon-green), var(--neon-pink));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glitterShift 3s linear infinite;
  }
  @keyframes glitterShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  .profile-tagline {
    text-align: center;
    font-size: 12px;
    color: var(--neon-green);
    font-style: italic;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    font-family: 'Comic Neue', cursive;
  }

  .profile-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid rgba(180, 77, 255, 0.15);
    border-radius: 4px;
    background: rgba(180, 77, 255, 0.04);
  }
  .stat-item {
    text-align: center;
    font-family: 'VT323', monospace;
  }
  .stat-num {
    display: block;
    font-size: 20px;
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  }
  .stat-label {
    font-size: 12px;
    color: var(--text-muted);
  }

  .profile-details {
    font-size: 16px;
    line-height: 2;
    font-family: 'VT323', monospace;
  }
  .profile-details .label {
    color: var(--neon-blue);
    font-weight: bold;
  }

  .mood-indicator {
    text-align: center;
    margin: 12px 0;
    padding: 8px;
    border: 1px dashed var(--neon-purple);
    border-radius: 4px;
    animation: moodPulse 2s ease-in-out infinite;
    font-family: 'VT323', monospace;
    font-size: 16px;
  }
  @keyframes moodPulse {
    0%, 100% { border-color: var(--neon-purple); }
    50% { border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(255, 0, 230, 0.3); }
  }

  .hit-counter {
    text-align: center;
    margin-top: 12px;
    padding: 10px;
    background: #000;
    border: 2px inset #333;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: var(--neon-green);
    text-shadow: 0 0 8px var(--neon-green);
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
  }
  .hit-counter::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(transparent, rgba(57, 255, 20, 0.05), transparent);
    animation: counterSweep 3s linear infinite;
    pointer-events: none;
  }
  @keyframes counterSweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  /* ============ MUSIC PLAYER ============ */
  .music-player {
    background: linear-gradient(180deg, #0d0221, #1a0533);
    border: 2px solid var(--neon-purple);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 0 20px rgba(180, 77, 255, 0.3), inset 0 0 20px rgba(180, 77, 255, 0.08);
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
  }
  .music-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(180, 77, 255, 0.02) 3px, rgba(180, 77, 255, 0.02) 6px);
    pointer-events: none;
  }
  .player-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--neon-purple);
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--neon-purple);
    position: relative;
  }
  .player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  .player-btn {
    background: none;
    border: 1px solid var(--neon-purple);
    color: var(--neon-purple);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
  }
  .player-btn .icon {
    display: block;
    position: relative;
  }
  /* prev/next: small triangle + bar */
  .btn-prev .icon, .btn-next .icon {
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .btn-prev .icon { border-right: 8px solid var(--neon-purple); margin-right: 1px; }
  .btn-next .icon { border-left: 8px solid var(--neon-purple); margin-left: 1px; }
  .btn-prev:hover .icon { border-right-color: var(--deep-space); }
  .btn-next:hover .icon { border-left-color: var(--deep-space); }
  /* play: triangle */
  .btn-play .icon-play {
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid var(--neon-pink);
    margin-left: 2px;
  }
  .btn-play:hover .icon-play { border-left-color: var(--deep-space); }
  /* pause: two bars */
  .btn-play .icon-pause {
    display: flex; gap: 3px;
  }
  .btn-play .icon-pause span {
    display: block; width: 3px; height: 12px;
    background: var(--neon-pink);
  }
  .btn-play:hover .icon-pause span { background: var(--deep-space); }
  .player-btn:hover {
    background: var(--neon-purple);
    color: var(--deep-space);
    box-shadow: 0 0 15px var(--neon-purple);
    transform: scale(1.1);
  }
  .player-btn.play {
    width: 42px; height: 42px;
    font-size: 16px;
    border-color: var(--neon-pink);
    color: var(--neon-pink);
  }
  .player-btn.play:hover {
    background: var(--neon-pink);
    color: var(--deep-space);
    box-shadow: 0 0 20px var(--neon-pink);
  }
  .visualizer {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 10px;
    height: 35px;
    align-items: flex-end;
    position: relative;
  }
  .viz-bar {
    width: 3px;
    border-radius: 2px;
  }
  .player-tracklist {
    margin-top: 10px;
    border-top: 1px solid rgba(180, 77, 255, 0.2);
    padding-top: 8px;
    position: relative;
  }
  .tracklist-item {
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: var(--text-bright);
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    opacity: 0.75;
  }
  .tracklist-item:hover {
    opacity: 1;
    background: rgba(180, 77, 255, 0.1);
  }
  .tracklist-item.active {
    opacity: 1;
    color: var(--neon-pink);
    text-shadow: 0 0 6px rgba(255, 0, 230, 0.4);
    background: rgba(255, 0, 230, 0.06);
    border-left: 2px solid var(--neon-pink);
  }
  .tracklist-item .track-num {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 16px;
  }
  .tracklist-item.active .track-num {
    color: var(--neon-pink);
  }

  .player-album-art {
    width: 64px; height: 64px;
    margin: 0 auto 8px;
    border: 2px solid var(--neon-purple);
    border-radius: 50%;
    background: conic-gradient(from 0deg, #1a0533, #0d0221, #1a0533, #0d0221, #1a0533);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: relative;
    transition: box-shadow 0.3s;
  }
  .player-album-art.spinning { animation: spin 4s linear infinite, albumPulse 2s ease-in-out infinite; }
  .player-album-art::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: var(--neon-purple);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--neon-purple);
  }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes albumPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(180, 77, 255, 0.3); }
    50% { box-shadow: 0 0 30px rgba(180, 77, 255, 0.5), 0 0 50px rgba(180, 77, 255, 0.2); }
  }
  .player-song-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
    position: relative;
  }
  .player-song {
    font-size: 14px;
    font-family: 'Permanent Marker', cursive;
    color: var(--text-bright);
  }
  .mini-eq {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    height: 14px;
  }
  .mini-eq-bar {
    width: 2px;
    background: var(--neon-green);
    border-radius: 1px;
    box-shadow: 0 0 3px var(--neon-green);
  }
  .mini-eq-bar.active { animation: miniEq var(--sp) ease-in-out infinite alternate; animation-delay: var(--dl); }
  @keyframes miniEq {
    0% { height: 3px; }
    100% { height: var(--mh); }
  }
  .player-artist {
    text-align: center;
    color: var(--neon-blue);
    margin-bottom: 10px;
    font-family: 'VT323', monospace;
    font-size: 15px;
    position: relative;
  }
  .player-time {
    display: flex;
    justify-content: space-between;
    font-family: 'VT323', monospace;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    position: relative;
  }
  .player-progress {
    width: 100%;
    height: 6px;
    background: #1a0a3e;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .player-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
    border-radius: 3px;
    box-shadow: 0 0 8px var(--neon-pink);
    transition: width 0.1s linear;
  }
  .autoplay-notice {
    text-align: center;
    margin-top: 8px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
    animation: neonFlicker 8s infinite;
  }

  /* ============ RIGHT COLUMN ============ */
  .about-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
  }
  .link-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--neon-blue);
    border-radius: 3px;
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: var(--neon-blue) !important;
    text-decoration: none !important;
    transition: all 0.3s;
    background: rgba(0, 240, 255, 0.05);
  }
  .link-badge:hover {
    background: var(--neon-blue);
    color: var(--deep-space) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    text-shadow: none !important;
  }
  .about-text a {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.2s;
  }
  .about-text a:hover { color: var(--neon-pink); text-shadow: var(--glow-pink); }

  /* ============ TOP 8 ============ */
  .top8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .top8-friend {
    text-align: center;
    transition: transform 0.3s;
    position: relative;
  }
  .top8-friend:hover {
    transform: scale(1.12);
    z-index: 20;
  }
  .friend-pic {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid var(--neon-blue);
    border-radius: 4px;
    background: linear-gradient(135deg, #1a0a3e, #0d0221);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 6px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .friend-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
  }
  .friend-pic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 60%, rgba(0, 240, 255, 0.08));
    pointer-events: none;
  }
  .top8-friend:hover .friend-pic {
    border-color: transparent;
    animation: friendGlitch 0.3s ease;
    box-shadow: 0 0 15px var(--neon-pink), 0 0 30px rgba(255, 0, 230, 0.2);
    background: linear-gradient(135deg, #2a0a4e, #1a0533);
  }
  .top8-friend:hover .friend-pic::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(var(--neon-pink), var(--neon-blue), var(--neon-purple), var(--neon-pink));
    z-index: -1;
    border-radius: 6px;
    animation: rotateBorderFallback 1.5s linear infinite;
  }
  @keyframes friendGlitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); filter: hue-rotate(40deg); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); filter: hue-rotate(-30deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
  }
  .friend-name {
    color: var(--neon-blue);
    font-family: 'VT323', monospace;
    font-size: 14px;
    transition: all 0.3s;
  }
  .top8-friend:hover .friend-name { color: var(--neon-pink); text-shadow: var(--glow-pink); }
  .friend-rank {
    position: absolute;
    top: -4px; left: -4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
    z-index: 5;
    background: rgba(5, 5, 16, 0.8);
    padding: 2px 4px;
    border-radius: 2px;
    border: 1px solid var(--neon-yellow);
  }

  /* ============ BLOG ============ */
  .blog-entry {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: rgba(26, 10, 62, 0.3);
    border-left: 3px solid var(--neon-purple);
    transition: all 0.3s;
  }
  .blog-entry:hover {
    background: rgba(26, 10, 62, 0.5);
    border-left-color: var(--neon-pink);
    box-shadow: 0 0 15px rgba(255, 0, 230, 0.1);
    transform: translateX(4px);
  }
  .blog-entry:last-child { margin-bottom: 0; }
  .blog-date { font-family: 'VT323', monospace; font-size: 14px; color: var(--neon-purple); margin-bottom: 4px; }
  .blog-title { font-size: 16px; font-family: 'Permanent Marker', cursive; color: var(--neon-pink); margin-bottom: 6px; text-shadow: 0 0 6px rgba(255, 0, 230, 0.3); }
  .blog-body { font-size: 13px; line-height: 1.7; color: var(--text-main); }
  .blog-body a { color: var(--neon-blue); text-decoration: none; text-shadow: 0 0 6px rgba(0, 240, 255, 0.3); transition: all 0.2s; }
  .blog-body a:hover { color: var(--neon-pink); text-shadow: var(--glow-pink); }
  .blog-tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
  .blog-tag { font-family: 'VT323', monospace; font-size: 12px; color: var(--neon-blue); background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.2); padding: 1px 6px; border-radius: 2px; }

  /* ============ COMMENTS ============ */
  .comment {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(13, 2, 33, 0.4);
    transition: all 0.3s;
    border: 1px solid transparent;
  }
  .comment:hover { background: rgba(26, 10, 62, 0.4); border-color: rgba(180, 77, 255, 0.2); box-shadow: 0 0 10px rgba(180, 77, 255, 0.1); }
  .comment:last-child { margin-bottom: 0; }
  .comment-avatar {
    width: 44px; height: 44px;
    border: 2px solid var(--neon-blue);
    border-radius: 4px;
    background: linear-gradient(135deg, #1a0a3e, #0d0221);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    transition: border-color 0.3s;
  }
  .comment:hover .comment-avatar { border-color: var(--neon-pink); }
  .comment-user { color: var(--neon-blue); font-family: 'VT323', monospace; font-size: 16px; margin-bottom: 2px; transition: color 0.3s; }
  .comment:hover .comment-user { color: var(--neon-pink); }
  .comment-time { font-size: 11px; font-family: 'VT323', monospace; color: var(--text-muted); margin-bottom: 4px; }
  .comment-text { font-size: 13px; color: var(--text-main); line-height: 1.5; }

  /* ============ COMMENT FORM ============ */
  .comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .comment-input, .comment-textarea {
    background: rgba(5, 5, 16, 0.8);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Comic Neue', cursive;
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .comment-input:focus, .comment-textarea:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }
  .comment-textarea { resize: vertical; min-height: 60px; }
  .comment-submit {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    color: white; border: none;
    padding: 8px 20px; border-radius: 4px;
    font-family: 'Press Start 2P', monospace; font-size: 9px;
    cursor: pointer; transition: all 0.3s;
    text-transform: uppercase; letter-spacing: 1px;
  }
  .comment-submit:hover { box-shadow: 0 0 20px var(--neon-pink); transform: translateY(-2px); }
  .user-comments:empty { display: none; }

  /* ============ BLINK + UNDER CONSTRUCTION ============ */
  .blink { animation: neonFlicker 8s infinite; }
  @keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    32% { opacity: 1; }
    32.5% { opacity: 0.2; }
    33% { opacity: 1; }
    33.5% { opacity: 0.4; }
    34% { opacity: 1; }
  }
  /* ============ ARAB MONEY RAIN ============ */
  .money-rain-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
  }
  .money-drop {
    position: absolute;
    top: -150px;
    animation: moneyFall linear forwards;
  }
  .money-drop img {
    width: 80px;
    height: auto;
    opacity: 0.85;
  }
  @keyframes moneyFall {
    0% { transform: translateY(0) rotate(var(--tilt)); opacity: 0.85; }
    85% { opacity: 0.85; }
    100% { transform: translateY(calc(100vh + 200px)) rotate(var(--tilt-end)); opacity: 0; }
  }

  /* ============ KILLING IN THE NAME MIDDLE FINGERS ============ */
  .finger-float-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
  }
  .finger-float {
    position: absolute;
    font-size: 40px;
    animation: fingerPop 3s ease-in-out forwards;
    transition: scale 0.1s ease, opacity 1.5s ease;
  }
  @keyframes fingerPop {
    0% { opacity: 0; }
    10% { opacity: 0.25; }
    80% { opacity: 0.25; }
    100% { opacity: 0; }
  }

  /* ============ PINK + WHITE PETAL DRIFT ============ */
  /* ============ 1999 WINDOWS 98 POPUPS ============ */
  .retro-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
  }
  .win98-popup {
    position: absolute;
    width: 240px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    box-shadow: 2px 2px 0 #808080, 4px 4px 8px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 12px;
    color: #000;
    pointer-events: auto;
    animation: win98Pop 0.2s ease-out;
    opacity: 0.92;
  }
  @keyframes win98Pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 0.92; }
  }
  .win98-titlebar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
  }
  .win98-titlebar:active { cursor: grabbing; }
  .win98-close {
    background: #c0c0c0;
    border: 1px outset #fff;
    color: #000;
    font-size: 10px;
    width: 16px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .win98-close:hover { background: #ff0000; color: white; }
  .win98-body {
    padding: 12px 10px;
    line-height: 1.4;
  }
  .win98-btn {
    display: block;
    width: 70px;
    margin: 0 auto 10px;
    padding: 2px 0;
    text-align: center;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    font-size: 11px;
    cursor: pointer;
  }
  .win98-btn:hover { background: #d0d0d0; }
  .win98-btn:active { border-style: inset; }

  .petal-drift-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
  }
  .petal {
    position: absolute;
    font-size: 24px;
    opacity: 0;
    animation: petalDrift linear forwards;
    transition: opacity 2s ease;
  }
  @keyframes petalDrift {
    0% { opacity: 0; }
    5% { opacity: 0.6; }
    85% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  }

  /* ============ SCROLLBAR ============ */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--deep-space); }
  ::-webkit-scrollbar-thumb { background: var(--scroll-gradient, linear-gradient(var(--neon-purple), var(--neon-pink))); border-radius: 5px; }

  /* ============ FOOTER ============ */
  .ms-footer {
    position: relative; z-index: 10;
    text-align: center; padding: 24px 16px;
    font-family: 'VT323', monospace; font-size: 14px;
    color: #554488;
    border-top: 1px solid #1a0a3e;
  }
  .ms-footer a { color: var(--neon-blue); text-decoration: none; transition: color 0.2s; }
  .ms-footer a:hover { color: var(--neon-pink); }
  .footer-badges { display: flex; justify-content: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
  .footer-badge {
    font-family: 'Press Start 2P', monospace; font-size: 7px;
    padding: 4px 8px; border: 1px solid #333;
    background: #0a0a0a; color: #888; border-radius: 2px;
  }

  /* ============ CURSOR SPARKLE ============ */
  .cursor-sparkle {
    position: fixed; pointer-events: none; z-index: 9999;
    animation: sparkleFade 0.7s forwards;
  }
  @keyframes sparkleFade {
    0% { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0) rotate(180deg) translateY(-30px); }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 760px) {
    .ms-container { grid-template-columns: 1fr; max-width: 480px; }
    .top8-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .profile-name { font-size: 14px; }
    .friend-pic { font-size: 24px; }
    .friend-rank { font-size: 6px; }
    .profile-stats { gap: 10px; }
    .win98-popup { width: 170px; font-size: 10px; }
    .win98-titlebar { font-size: 9px; padding: 2px 3px; }
    .win98-body { padding: 8px 6px; font-size: 10px; }
    .win98-btn { width: 50px; font-size: 10px; padding: 4px 0; }
  }
  @media (max-width: 400px) {
    .top8-grid { grid-template-columns: repeat(2, 1fr); }
  }