/* ==========================================
   GLOBAL SETUP & BACKGROUND
   ========================================== */
* { box-sizing: border-box; }

html {
  background-color: #0a0033;
}

body {
  margin: 0;
  color: #f5f5f5;
  font-family: "Comic Sans MS", "Comic Sans", serif;
  position: relative;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #0a0033;
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  animation: dotsDrift 12s linear infinite;
  pointer-events: none;
  z-index: -2;
}

@keyframes dotsDrift {
  from { background-position: 0 0, 30px 30px; }
  to   { background-position: 60px 60px, 90px 90px; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,0,255,.08), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0,255,255,.08), transparent 35%);
  animation: aurora 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes aurora {
  from { transform: translate(-5%, -5%) scale(1); }
  to { transform: translate(5%, 5%) scale(1.2); }
}

/* ==========================================
   LAYOUT CONTAINERS
   ========================================== */
.layout {
  width: min(96vw, 1340px);
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 14px;
}

.frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border: 6px ridge #ff00ff;
  background: rgba(10, 0, 51, 0.85);
  padding: 20px;
  animation: borderGlow 5s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff inset; }
  50% { box-shadow: 0 0 35px #00ffff, 0 0 60px #ff00ff inset; }
}

@media (max-width: 720px) {
  .layout { flex-direction: column; padding: 14px 8px; gap: 12px; }
  .sidebar { position: static; flex: 1 1 auto; width: 100%; font-size: 12px; }
  .frame { padding: 12px; }
  .hero h1 { font-size: 32px; letter-spacing: 1px; }
  .hero .subtitle { font-size: 13px; }
  .ticker span { font-size: 14px; }
  .status-line { font-size: 12px; }
  .widgets-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .counter { font-size: 16px; letter-spacing: 2px; padding: 5px 8px; }
  .sidebar .tree-line { white-space: pre-wrap; word-break: break-word; }
  .track img, .now-page .track-art { width: 36px; height: 36px; }
  .album-card img { width: 52px; height: 52px; }
  .avatar-placeholder { width: 120px; height: 120px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 26px; }
  .frame { border-width: 4px; padding: 10px; }
  .widgets-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1500px) {
  .hero h1 { font-size: 62px; }
  .content p, .content li { font-size: 17px; }
}

/* ==========================================
   SIDEBAR & DIRECTORY TREE
   ========================================== */
.sidebar {
  flex: 0 0 250px;
  background: #000;
  border: 3px ridge #00ffff;
  padding: 12px 10px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #0f0;
  position: sticky;
  top: 16px;
  animation: sidebarPulse 6s infinite;
}

.sidebar-title {
  color: #ff00ff;
  text-shadow: 0 0 6px #ff00ff;
  font-weight: bold;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
  border-bottom: 1px dashed #00ffff;
  padding-bottom: 6px;
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar .tree-line { color: #0a0; white-space: pre; }
.sidebar a { color: #0f0; text-decoration: none; }
.sidebar a:hover, .sidebar a.active { color: #ffff00; text-shadow: 0 0 6px #ffff00; }

.sidebar .toggle-btn {
  background: none;
  border: none;
  color: #0f0;
  font-family: "Courier New", monospace;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.sidebar .toggle-btn:hover { color: #ffff00; }
.sidebar .submenu { display: none; }
.sidebar .submenu.open { display: block; }

@keyframes sidebarPulse {
  0%, 100% { box-shadow: 0 0 18px #00ffff inset, 0 0 14px #ff00ff; }
  50% { box-shadow: 0 0 30px #ff00ff inset, 0 0 20px #00ffff; }
}

/* ==========================================
   HEADER ELEMENTS & EFFECTS
   ========================================== */
.hero { text-align: center; padding: 10px 0 0 0; }
.hero h1 {
  font-family: "Courier New", "Arial Black", sans-serif;
  font-size: 54px;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-1deg) scale(1); }
  50% { transform: rotate(1deg) scale(1.02); }
}

.hero .subtitle {
  font-size: 16px;
  color: #00ffff;
  text-shadow: 0 0 6px #00ffff;
}

.ticker {
  background: #000;
  border-top: 3px dashed #ff00ff;
  border-bottom: 3px dashed #00ffff;
  overflow: hidden;
  white-space: nowrap;
  padding: 6px 0;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 18s linear infinite;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 18px;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #3300ff, #ff00ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.status-line {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #0f0;
  text-align: center;
  margin-top: 10px;
  min-height: 20px;
}
.status-line .cursor {
  display: inline-block;
  width: 8px;
  background: #0f0;
  animation: retro-blink 0.8s steps(2, start) infinite;
}

.divider {
  text-align: center;
  font-size: 20px;
  letter-spacing: 12px;
  margin: 18px 0;
  color: #ffd700;
  text-shadow: 0 0 8px #ffd700;
}

/* ==========================================
   PAGE SECTIONS & GENERAL CONTENT
   ========================================== */
.content {
  background: repeating-linear-gradient(45deg, #1a0060, #1a0060 10px, #20007a 10px, #20007a 20px);
  border: 2px dashed #00ffff;
  padding: 14px;
  margin-bottom: 20px;
}
.content h2 {
  background-color: red;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  color: #fff;
  padding: 6px 10px;
  border: 2px solid #fff;
  font-size: 20px;
  text-shadow: 2px 2px 0px #ff00ff, -1px -1px 0px #00ffff;
}
.content p, .content li { font-size: 16px; line-height: 1.55; }

.update-box {
  display: inline-block;
  background-color: rgb(13, 255, 0);
  background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
  margin: 8px 0 12px 0;
  padding: 4px 10px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: rgb(0, 0, 0);
  border: 1px dashed rgb(255, 255, 255);
  text-transform: uppercase;
  text-shadow: 0 0 15px #ffffff;
}

.blink { animation: retro-blink 0.8s steps(2, start) infinite; }
@keyframes retro-blink { to { visibility: hidden; } }

/* ==========================================
   ABOUT PAGE CONTENT & AVATAR
   ========================================== */
.bio-container { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px; }
.avatar-column { flex: 1; min-width: 200px; text-align: center; }
.bio-column { flex: 2; min-width: 300px; line-height: 1.6; }

.avatar-placeholder {
  border: 3px double #00ffff;
  padding: 10px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 10px #00ffff inset;
}
.avatar-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border: 1px solid #ff00ff;
}
.avatar-placeholder img:hover { animation: picture-wiggle .4s; }

/* Skills, styled as small widget tiles to match .widget-box / .contact-box elsewhere */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 15px;
}
.skill-item {
  padding: 6px 8px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #00ffff;
  text-shadow: 0 0 2px #00ffff;
  transition: transform 0.15s ease;
}
.skill-item:hover { transform: rotate(-1deg) scale(1.03); }

/* Interest tags */
.interests-list { display: flex; gap: 8px; flex-wrap: wrap; }
.interest-tag {
  border: 1px dashed #ff00ff;
  padding: 3px 8px;
  font-size: 12px;
  color: #ff00ff;
  background: rgba(255, 0, 255, 0.03);
}

@keyframes picture-wiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

.section-title,
.content h2.section-title {
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffff00;
  background: none;
  background-image: none;
  text-shadow: 0 0 3px #ffff00;
  border: none;
  margin-top: 22px;
  margin-bottom: 10px;
  padding: 0;
  letter-spacing: 2px;
}

.interest-tag { display: inline-block; transition: transform .15s ease; }
.interest-tag:hover { transform: rotate(-2deg) scale(1.05); }

/* ==========================================
   CONTACT SECTION
   ========================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.contact-box {
  flex: 1;
  min-width: 180px;
  background-color: #05001a;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;

  border: 2px dashed #ff00ff;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.2);
  transition: all 0.2s ease-in-out;
}

.contact-icon {
  font-size: 20px;
  color: #ff00ff;
  text-shadow: 0 0 4px #ff00ff;
}

.contact-label {
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: bold;
  color: #ffff00;
  text-shadow: 0 0 3px #ffff00;
}

.contact-detail {
  font-size: 12px;
  color: #cccccc;
}
.contact-box:hover{
    transform:translateY(-3px) rotate(-1deg);
    box-shadow:
        0 0 15px #ff00ff,
        inset 0 0 8px rgba(255,0,255,.3);
}


/* ==========================================
   DIGITAL FILING CABINET
   ========================================== */
.cabinet { display: flex; flex-direction: column; gap: 15px; }
.drawer { border: 3px solid #000; box-shadow: 4px 4px 0 #000; background: #ff3ea5; transform: rotate(-1deg); transition: transform 0.15s ease; }
.cabinet .drawer:nth-child(3n+2) { background: #ff8c00; transform: rotate(0.8deg); }
.cabinet .drawer:nth-child(3n+4) { background: #4a7de3; transform: rotate(-0.6deg); }
.cabinet .drawer:nth-child(3n) { background: #00d9c0; transform: rotate(-0.6deg); }
.drawer.open { box-shadow: 2px 2px 0 #000; }

.drawer-title {
  width: 100%;
  border: none;
  border-bottom: 3px solid #000;
  padding: 12px 15px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: #e9f3f3;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;


  background-color: #cd08a559;
  background-image:
    radial-gradient(rgba(44, 68, 200, 0.496) 1px, transparent 1px),
    radial-gradient(rgba(30, 4, 4, 0.905) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.drawer.open .drawer-title { border-bottom-style: dashed; }
.drawer-title::before { content: "★ ° ☆ ° ★ ° ☆ ° ★"; margin-right: 8px; color: #9dd10d; }
.drawer-title span { font-size: 1.2rem; flex-shrink: 0; }
.drawer-title:hover { background-color: rgba(255, 255, 255, 0.35); }
.drawer-content { display: none; padding: 10px; background: rgba(255, 255, 255, 0.15); }
.drawer.open .drawer-content { display: block; }

/* ==========================================
   DOWNLOADS GRID
   ========================================== */
.downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 10px; }
.download-card {
  background: #000;
  border: 2px inset #00ffff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #f5f5f5;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.download-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #2a0080, #4b00b3);
  border: 2px dashed #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  overflow: hidden;
}
.download-thumb img { width: 100%; height: 100%; object-fit: cover; }
.download-title { font-size: 13px; font-weight: bold; color: #ffff00; text-shadow: 0 0 4px #ffff00; margin: 4px 0 2px 0; }
.download-meta { font-family: "Courier New", monospace; font-size: 11px; color: #0f0; }
.download-meta .meta-tag { display: inline-block; margin-top: 3px; color: #ff00ff; text-shadow: 0 0 4px #ff00ff; }

/* ==========================================
   HOMEPAGE WIDGETS ROW
   ========================================== */
.widgets-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 20px 0; }
.widget-box { background: #000; border: 2px solid #00ffff; box-shadow: 0 0 10px #00ffff inset; padding: 10px; text-align: center; font-family: "Courier New", monospace; transition: transform 0.15s ease; }
.widget-label { font-size: 10px; color: #ccc; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.widget-value { font-size: 15px; color: #0f0; text-shadow: 0 0 5px #0f0; }
.widget-value.small { font-size: 12px; }

/* ==========================================
   BUTTONS STYLING
   ========================================== */
.vibe-btn, .nav-button, .guestbook button {
  background: linear-gradient(to bottom, #ff00ff, #9900cc);
  color: #fff;
  border: 2px outset #ff00ff;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  cursor: pointer;
}
.vibe-btn { font-size: 12px; padding: 5px 10px; margin-top: 8px; }
.nav-button { display: inline-block; font-size: 15px; padding: 10px 20px; text-decoration: none; }
.guestbook button { padding: 8px 16px; margin-top: 8px; }

.vibe-btn:hover, .nav-button:hover, .guestbook button:hover { filter: brightness(1.2); animation: jelly .4s; }
.guestbook button:active, .nav-button:active { border-style: inset; background: linear-gradient(to bottom, #9900cc, #ff00ff); padding: 9px 15px 7px 17px; }

@keyframes jelly {
  0% { transform: scale(1); }
  25% { transform: scale(1.08,.95); }
  50% { transform: scale(.96,1.05); }
  75% { transform: scale(1.04,.97); }
  100% { transform: scale(1); }
}

/* ==========================================
   GUESTBOOK / CHATROOM INTERFACE
   ========================================== */
.guestbook textarea, .guestbook input[type="text"] {
  width: 100%;
  background: #000;
  color: #0f0;
  border: 2px inset #00ff00;
  font-family: "Courier New", monospace;
  padding: 8px;
}
.guestbook input[type="text"] { padding: 6px; margin-bottom: 8px; }
.guestbook textarea { min-height: 70px; resize: vertical; }

.guestbook-entries {
  background: #000;
  border: 2px inset #00ff00;
  padding: 8px;
  margin-top: 10px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #0f0;
  max-height: 120px;
  overflow-y: auto;
}
.guestbook-entries::-webkit-scrollbar { width: 10px; }
.guestbook-entries::-webkit-scrollbar-track { background: #000; border-left: 1px dashed #00ff00; }
.guestbook-entries::-webkit-scrollbar-thumb { background: #00ff00; border: 2px solid #000; }

/* ==========================================
   LINKS & HOVERS
   ========================================== */
a { transition: color .2s, text-shadow .2s, transform .2s; }
a:hover { transform: translateX(3px); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 10px 0; }
.link-list li::before { content: "☆ "; }
.link-list a { color: #00ffff; text-decoration: none; font-family: "Courier New", monospace; font-size: 16px; text-shadow: 0 0 6px #00ffff; border-bottom: 1px dashed #00ffff; }
.link-list a:hover { color: #ffff00; text-shadow: 0 0 8px #ffff00; border-bottom-color: #ffff00; }
.link-blurb { margin: 4px 0 0 20px; font-size: 13px; color: #cccccc; font-family: serif; }

/* ==========================================
   VISITOR COUNTER
   ========================================== */
.counter-wrap { text-align: center; margin: 20px 0; }
.counter {
  display: inline-block;
  background: #000;
  border: 2px solid #ff0000;
  padding: 6px 10px;
  font-family: "Courier New", monospace;
  letter-spacing: 4px;
  font-size: 22px;
  color: #ff3333;
  animation: counterGlow 1.8s infinite;
}
.counter-label { display: block; font-size: 11px; color: #ccc; margin-top: 4px; }

@keyframes counterGlow {
  0%, 100% { transform: scale(1); text-shadow: 0 0 8px red; }
  50% { transform: scale(1.03); text-shadow: 0 0 20px red; }
}

/* ==========================================
   VISUAL EFFECTS (SPARKLES, ANIMATED CARDS)
   ========================================== */
.download-card:hover, .widget-box:hover, .drawer:hover { transform: rotate(-1deg) scale(1.03); }

.sparkle-trail {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  font-size: 16px;
  z-index: 9999;
  animation: sparkle-fade 2400ms ease-out forwards;
}

@keyframes sparkle-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(90deg) translateY(-14px); }
}

.shooting-star {
  position: fixed;
  top: 0; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px #fff, 0 0 14px 4px #ffee88;
  pointer-events: none;
  z-index: 9998;
  animation: shooting-star-travel 1.4s linear forwards;
}
.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 2px;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
  transform: translate(-100%, -50%) rotate(-24deg);
  transform-origin: right center;
}

@keyframes shooting-star-travel {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--travel-x), var(--travel-y)); }
}

.star {
  position: fixed;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: floatStar linear infinite, twinkle 2s ease-in-out infinite;
}

@keyframes floatStar {
  from { transform: translateY(100vh); }
  to { transform: translateY(-10vh); }
}
@keyframes twinkle {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}

/* ==========================================
   FOOTER STAMP
   ========================================== */
footer {
  text-align: center;
  font-size: 11px;
  color: #888;
  margin-top: 20px;
  font-family: "Courier New", monospace;
}
footer img { vertical-align: middle; margin: 0 4px; }
/* ==========================================
   EXACT AGE WIDGET
   ========================================== */
.age-widget {
  background-color: #05001a;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;

  border: 2px dashed #ff00ff;
  padding: 12px 16px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.age-label {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 4px #00ffff;
  letter-spacing: 1px;
}

.age-value {
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  color: #0f0;
  text-shadow: 0 0 6px #0f0;
  letter-spacing:2px;
}
/* ==========================================
    AUDIO LOG
   ========================================== */

.lastfm-box {
  background:#000;
  border:3px ridge #ff00ff;
  padding:12px;
  font-family:"Courier New", monospace;
  box-shadow:
    0 0 15px #ff00ff,
    inset 0 0 15px rgba(0,255,255,.2);
  max-width:650px;
  margin:20px auto;
}

.lastfm-header {
  color:#00ffff;
  border-bottom:1px dashed #00ffff;
  padding-bottom:8px;
  margin-bottom:10px;
  font-weight:bold;
}

.online-dot {
  float:right;
  color:#0f0;
  font-size:11px;
}

.track {
  display:flex;
  gap:10px;
  padding:8px;
  border-bottom:1px dotted #444;
  align-items:center;
}

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

.track img {
  width:45px;
  height:45px;
  object-fit:cover;
  border:1px solid #ff00ff;
}

.track-info {
  flex:1;
}

.track-name {
  color:#ffff00;
  text-shadow:0 0 5px #ffff00;
}

.artist {
  color:#00ffff;
  font-size:12px;
}

.now {
  color:#ff00ff;
  font-size:11px;
  font-weight:bold;
}
.rotation-box {
  background:#000;
  border:3px ridge #00ffff;
  padding:12px;
  font-family:"Courier New", monospace;
  box-shadow:
    0 0 12px #00ffff inset,
    0 0 10px #ff00ff;
}

.rotation-header {
  color:#ff00ff;
  border-bottom:1px dashed #ff00ff;
  padding-bottom:8px;
  margin-bottom:10px;
  font-weight:bold;
}

.album-card {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dotted #444;
}

.album-card:last-child {
  border-bottom:none;
}

.album-card img {
  width:70px;
  height:70px;
  object-fit:cover;
  border:2px solid #ffff00;
}

.album-name {
  color:#ffff00;
  text-shadow:0 0 5px #ffff00;
  font-weight:bold;
}

.album-artist {
  color:#00ffff;
}

.album-count {
  color:#0f0;
  font-size:11px;
}
.genre-box {
  background:#000;
  border:3px ridge #0f0;
  padding:12px;
  font-family:"Courier New", monospace;
  box-shadow:
    0 0 12px #0f0,
    inset 0 0 15px rgba(255,255,0,.15);
  max-width:650px;
  margin:20px auto;
}

.genre-header {
  color:#ffff00;
  border-bottom:1px dashed #0f0;
  padding-bottom:8px;
  margin-bottom:12px;
  font-weight:bold;
}

.genres-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.genre-tag {
  display:inline-block;
  padding:5px 10px;
  font-size:12px;
  border-radius:2px;
  text-transform:lowercase;
  transition:transform .15s ease;
}

.genre-tag:hover {
  transform:rotate(-2deg) scale(1.08);
}

.genre-tag-hot {
  border:1px solid #0f0;
  color:#0f0;
  text-shadow:0 0 6px #0f0;
  background:rgba(0,255,0,.08);
}

.genre-tag-warm {
  border:1px dashed #00ffff;
  color:#00ffff;
  background:rgba(0,255,255,.05);
}

.genre-tag-cool {
  border:1px dotted #ff00ff;
  color:#ff00ff;
  background:rgba(255,0,255,.03);
}

.radio-console {
  background:#000;
  border:3px ridge #00ffff;
  padding:15px;
  margin:20px auto;
  max-width:500px;
  font-family:"Courier New", monospace;
  text-align:center;
  box-shadow:
    0 0 15px #00ffff,
    inset 0 0 20px rgba(255,0,255,.2);
}

.radio-title {
  color:#ff00ff;
  font-size:18px;
  font-weight:bold;
  text-shadow:0 0 8px #ff00ff;
}

.radio-info {
  margin-top:10px;
  color:#00ffff;
  font-size:12px;
  line-height:1.8;
}
/* ==========================================
    NOW PAGE
   ========================================== */

.now-page .now-intro {
  font-size: 14px;
  color: #cccccc;
  font-style: italic;
}

.now-page .now-section {
  background-color: #05001a;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 2px dashed #00ffff;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.now-page .now-section:nth-child(even) { border-color: #ff00ff; }

.now-page .now-heading {
  font-family: "times New roman", monospace;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffff00;
  text-shadow: 0 0 3px #ffff00;
  margin: 0 0 8px 0;
}

.now-page .now-list { list-style: none; margin: 0; padding: 0; }
.now-page .now-list li { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.now-page .now-list li::before { content: "✧ "; color: #ff00ff; }

/* readable footnote: dark dot-grid bg, glowing yellow text, magenta dotted border */
.now-page .now-footnote {
  display: inline-block;
  background-color: #05001a;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  margin: 18px 0 12px 0;
  padding: 6px 12px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #ffff00;
  text-shadow: 0 0 4px #ffff00;
  text-align: center;
  border: 3px dotted #ff00ff;
}

.now-page .now-footnote a {
  color: #00ffff;
  text-shadow: 0 0 4px #00ffff;
  text-decoration: none;
  border-bottom: 1px dashed #00ffff;
}

.now-page .now-footnote a:hover {
  color: #ffff00;
  text-shadow: 0 0 6px #ffff00;
  border-bottom-color: #ffff00;
}

/* ==========================================
   DRIFTING DOTS inside radio page boxes
   ========================================== */
.radio-console, .lastfm-box, .rotation-box, .genre-box, .bio-container {
  background-color: #000;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  animation: boxDotsDrift 5s linear infinite;
}

@keyframes boxDotsDrift {
  from { background-position: 0 0, 8px 8px; }
  to   { background-position: 16px 16px, 24px 24px; }
}

/* ==========================================
   NOW PAGE — BLOG POST STYLES
   ========================================== */
.entry-label {
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  opacity: 0.85;
}

.now-page .blog-post {
  font-family: 'Times New Roman', Times, serif;
  max-width: 560px;
  margin: 0 auto;
  padding: 1em 0.5em 2em;
  font-size: 1.05rem;
  line-height: 1.7;
}

.now-page .entry-label {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: 0.1em;
}

.now-page .entry-date {
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0;
  margin-bottom: 1.8em;
}

.now-page .blog-post p {
  margin: 0 0 1.2em;
  text-indent: 1.5em; /* classic book-style indent */
}

.now-page .blog-post p.entry-label,
.now-page .blog-post p.entry-date,
.now-page .blog-post p:first-of-type {
  text-indent: 0;
}

.now-page .blog-post blockquote {
  font-style: italic;
  text-align: center;
  margin: 2em 1em;
  line-height: 2.1;
}

.now-page .blog-post blockquote p {
  text-indent: 0;
  margin: 0;
}

/* ==========================================
   NOW PAGE — TOP TRACKS THIS MONTh
   ========================================== */
.now-page .top-tracks-box {
  border: 2px solid var(--hot-pink, #ff2fb0);
  background-color: rgba(10, 5, 30, 0.85);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  animation: boxDotsDrift 5s linear infinite;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 2.5em;
  margin-bottom: 16px;
  box-shadow: 0 0 10px rgba(255, 47, 176, 0.4);
}

.now-page .top-tracks-header {
  font-family: "Comic Sans MS", cursive;
  color: var(--gold, #ffd94a);
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(255, 217, 74, 0.6);
}

/* tiny "as of" timestamp under the header */
.now-page .top-tracks-note {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #cccccc;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.75;
}

.now-page .track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Courier New", monospace;
  padding: 6px;
  border-bottom: 1px dashed rgba(0, 255, 255, 0.25);
  transition: transform 0.15s ease;
}

.now-page .track-row:hover {
  transform: rotate(-0.5deg) scale(1.02);
}

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

.now-page .track-rank {
  color: var(--lime, #a6ff00);
  font-weight: bold;
  width: 28px;
}

.now-page .track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.now-page .track-name {
  color: var(--hot-pink, #ff2fb0);
  font-weight: bold;
  text-decoration: none;
  align-self: flex-start;
}

a.track-name:hover {
  transform: none;
  color: var(--gold, #ffd94a);
  text-shadow: 0 0 6px rgba(255, 217, 74, 0.7);
}

.now-page .track-artist {
  color: var(--cyan, #4ce0ff);
  font-size: 0.85rem;
}

.now-page .track-plays {
  color: var(--gold, #ffd94a);
  font-size: 0.8rem;
  white-space: nowrap;
}
.now-page .track-art {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border: 1px solid var(--hot-pink, #ff2fb0);
  flex-shrink: 0;
}

/* fallback when a track has no album art */
.now-page .track-art-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--cyan, #4ce0ff);
  background: rgba(0, 255, 255, 0.06);
  border-style: dashed;
}