/* ============================================================
   CRYSTAL CASTLES // UNOFFICIAL FAN ARCHIVE
   estetica anno 2005 - hecho con amor y html basico
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

/* --- RESET --- */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, ul, ol, li, table, tr, td, th, thead, tbody,
form, input, button, textarea, select, hr, img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- BODY + STARFIELD BACKGROUND --- */
body {
  background-color: #050008;
  background-image:
    radial-gradient(circle, rgba(153,0,255,0.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,255,200,0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 120px 120px, 200px 200px, 300px 300px, 80px 80px;
  background-position: 10px 20px, 60px 80px, 150px 40px, 30px 60px;
  color: #bb88dd;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  cursor: crosshair;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050008; }
::-webkit-scrollbar-thumb { background: #550099; }
::-webkit-scrollbar-thumb:hover { background: #9900ff; }

/* --- LINKS --- */
a {
  color: #ff00cc;
  text-decoration: none;
}
a:hover {
  color: #00ffcc;
  text-decoration: underline;
  text-shadow: 0 0 6px #00ffcc;
}
a:visited {
  color: #cc88ff;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px #9900ff, inset 0 0 4px rgba(153,0,255,0.1); }
  50%       { box-shadow: 0 0 10px #9900ff, 0 0 20px #550099, inset 0 0 6px rgba(153,0,255,0.2); }
}

@keyframes pulse-border {
  0%, 100% { border-color: #440077; }
  50%       { border-color: #9900ff; }
}

@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 4px #ff00cc; }
  50%       { text-shadow: 0 0 12px #ff00cc, 0 0 20px #ff88ee; }
}

@keyframes spin-star {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

@keyframes glitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, 1px); text-shadow: 2px 0 #00ffcc; }
  94% { transform: translate(3px, -1px); text-shadow: -2px 0 #ff00cc; }
  96% { transform: translate(-1px, 0); }
}

@keyframes marquee-sparkle {
  0%, 100% { color: #ff00cc; }
  33%       { color: #00ffcc; }
  66%       { color: #cc88ff; }
}

/* --- BLINK CLASS --- */
.blink { animation: blink 1s step-end infinite; }
.blink-slow { animation: blink 2s step-end infinite; }

/* --- GLOW TEXT --- */
.glow-pink   { animation: text-glow 2s ease-in-out infinite; color: #ff00cc; }
.glow-cyan   { text-shadow: 0 0 6px #00ffcc; color: #00ffcc; }
.glow-purple { text-shadow: 0 0 6px #cc88ff; color: #cc88ff; }

/* ============================================================
   TOP MARQUEE
   ============================================================ */

.top-marquee {
  background: #0d0020;
  border-bottom: 2px solid #9900ff;
  border-top: 2px solid #ff00cc;
  padding: 4px 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #ff00cc;
  letter-spacing: 0.05em;
}

.bottom-marquee {
  background: #0d0020;
  border-top: 2px solid #9900ff;
  border-bottom: 2px solid #ff00cc;
  padding: 4px 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #00ffcc;
  letter-spacing: 0.05em;
}

/* ============================================================
   SITE BANNER
   ============================================================ */

.site-banner {
  background: linear-gradient(180deg, #0a0020 0%, #050008 60%, #100025 100%);
  border-bottom: 3px double #9900ff;
  padding: 18px 0 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.site-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(153,0,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-inner .banner-skull,
.banner-inner h1 {
  margin-left: 10px;
  margin-right: 10px;
}

.banner-skull {
  font-size: 2rem;
  color: #9900ff;
  animation: sparkle 3s ease-in-out infinite;
  text-shadow: 0 0 10px #9900ff;
}

.banner-skull:last-child {
  animation-delay: 1.5s;
}

.site-banner h1 {
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: #eeddff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  animation: glitch 6s infinite;
  text-shadow: 0 0 10px #9900ff, 0 0 20px #550099;
}

.banner-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #665577;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 4px;
}

.banner-years {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #550099;
  letter-spacing: 0.3em;
  margin-top: 6px;
}

.banner-nav {
  margin-top: 10px;
  border-top: 1px solid #440077;
  padding-top: 8px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.banner-nav a {
  color: #cc88ff;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  padding: 3px 10px;
  border-right: 1px solid #440077;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.banner-nav a:first-child { border-left: 1px solid #440077; }
.banner-nav a:hover { background: #150025; color: #ff00cc; text-decoration: none; }
.banner-nav a.active { color: #ff00cc; background: #150025; }

/* ============================================================
   MAIN TABLE LAYOUT
   ============================================================ */

.main-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 6px;
}

.layout-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
}

.sidebar-td {
  width: 185px;
  vertical-align: top;
}

.main-td {
  vertical-align: top;
}

/* ============================================================
   SIDEBAR + CONTENT BOXES
   (the classic 2005 "box with header" pattern)
   ============================================================ */

.sidebar-box,
.content-box {
  background: #0a0015;
  border: 1px solid #440077;
  margin-bottom: 6px;
  animation: pulse-border 4s ease-in-out infinite;
}

.sidebar-box:hover,
.content-box:hover {
  border-color: #9900ff;
  animation: none;
}

.box-title {
  background: #150025;
  border-bottom: 1px solid #550099;
  padding: 4px 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  color: #ff00cc;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 0 4px #ff00cc;
}

.box-content {
  padding: 8px;
  font-size: 11px;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.sidebar-nav {
  list-style: none;
}

.sidebar-nav li {
  border-bottom: 1px dotted #440077;
}

.sidebar-nav li:last-child {
  border-bottom: none;
}

.sidebar-nav a {
  display: block;
  padding: 3px 4px;
  color: #cc88ff;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.sidebar-nav a:hover {
  background: #1a0030;
  color: #ff00cc;
  text-decoration: none;
  padding-left: 8px;
}

.sidebar-nav a.active {
  color: #00ffcc;
  font-weight: bold;
}

/* ============================================================
   VISITOR COUNTER
   ============================================================ */

.visitor-counter {
  margin-top: 8px;
  text-align: center;
  padding: 4px;
  border: 1px solid #550099;
  background: #000010;
}

.counter-label {
  font-size: 9px;
  color: #665577;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.counter-num {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: #00ff44;
  text-shadow: 0 0 6px #00ff44;
  letter-spacing: 0.15em;
}

/* ============================================================
   SIDEBAR QUICK FACTS
   ============================================================ */

.box-content .label-key {
  color: #00aa88;
  font-size: 10px;
}

/* ============================================================
   BEST VIEWED BOX
   ============================================================ */

.best-viewed {
  border-style: dashed;
  border-color: #665577;
}

.best-viewed .box-content {
  color: #665577;
  font-size: 10px;
}

/* ============================================================
   WELCOME / UPDATES BOX
   ============================================================ */

.welcome-text p {
  margin-bottom: 6px;
  line-height: 1.65;
}

.update-date {
  color: #00aa88;
  font-size: 10px;
}

/* ============================================================
   NAVIGATION GRID (inner table)
   ============================================================ */

.nav-grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

.nav-grid-cell {
  background: #150025;
  border: 1px solid #440077;
  padding: 8px 10px;
  width: 50%;
  vertical-align: top;
  transition: background 0.2s, border-color 0.2s;
}

.nav-grid-cell:hover {
  background: #1a0030;
  border-color: #9900ff;
}

.nav-grid-cell a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-cell-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  color: #cc88ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.nav-grid-cell:hover .nav-cell-title {
  color: #ff00cc;
  text-shadow: 0 0 4px #ff00cc;
}

.nav-cell-desc {
  font-size: 11px;
  color: #665577;
  line-height: 1.4;
}

/* ============================================================
   STATS TABLE
   ============================================================ */

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stat-cell {
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid #440077;
}

.stat-cell:last-child { border-right: none; }

.stat-num {
  font-family: 'VT323', monospace;
  font-size: 2.2rem;
  color: #cc88ff;
  line-height: 1;
  text-shadow: 0 0 6px #550099;
}

.stat-label {
  font-size: 9px;
  color: #665577;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
  line-height: 1.3;
}

/* ============================================================
   SECTION TITLES (inner pages)
   ============================================================ */

.section-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  color: #cc88ff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #440077;
}

/* ============================================================
   TIMELINE (shows page)
   ============================================================ */

.timeline-entry {
  border-bottom: 1px dotted #440077;
  padding: 6px 4px;
  display: flex;
  align-items: flex-start;
}

.timeline-entry:hover {
  background: #150025;
}

.timeline-year {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  color: #550099;
  min-width: 52px;
  line-height: 1.1;
  margin-right: 10px;
}

.timeline-info h4 {
  font-size: 11px;
  color: #eeddff;
  font-weight: bold;
  margin-bottom: 2px;
}

.timeline-info p {
  font-size: 11px;
  color: #665577;
}

.tag-show  { color: #00ffcc;  font-size: 9px; padding: 1px 4px; border: 1px solid #00aa88;  text-transform: uppercase; display: inline-block; margin-right: 3px; }
.tag-album { color: #cc88ff;  font-size: 9px; padding: 1px 4px; border: 1px solid #550099;  text-transform: uppercase; display: inline-block; margin-right: 3px; }
.tag-other { color: #ff88ee;  font-size: 9px; padding: 1px 4px; border: 1px solid #ff00cc;  text-transform: uppercase; display: inline-block; margin-right: 3px; }

/* ============================================================
   DISCOGRAPHY TABLE
   ============================================================ */

.disco-entry {
  display: flex;
  align-items: flex-start;
  padding: 6px 4px;
  border-bottom: 1px dotted #440077;
}

.disco-entry:hover { background: #150025; }

.disco-year {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  color: #550099;
  min-width: 52px;
  line-height: 1.1;
  margin-right: 10px;
}

.disco-info .release-name {
  font-size: 11px;
  font-weight: bold;
  color: #eeddff;
}

.disco-info .release-type {
  font-size: 10px;
  color: #cc88ff;
  margin-bottom: 2px;
}

.disco-info p {
  font-size: 11px;
  color: #665577;
}

/* ============================================================
   MEMBERS (biography page)
   ============================================================ */

.member-block {
  padding: 8px;
  border: 1px solid #440077;
  background: #150025;
  margin-bottom: 6px;
}

.member-name {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  font-weight: bold;
  color: #eeddff;
  text-transform: uppercase;
}

.member-role   { color: #00ffcc; font-size: 10px; }
.member-period {
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  color: #550099;
  margin: 2px 0;
}
.member-desc { font-size: 11px; color: #665577; margin-top: 4px; }

/* ============================================================
   ARCHIVE PLACEHOLDER GRID
   ============================================================ */

.archive-note {
  background: #0d0010;
  border: 1px dashed #550099;
  padding: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #665577;
  text-align: center;
}

.archive-year-header {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: #cc88ff;
  border-bottom: 1px solid #440077;
  padding-bottom: 2px;
  margin: 8px 0 4px;
}

.archive-item-list {
  list-style: none;
}

.archive-item-list li {
  padding: 3px 0;
  border-bottom: 1px dotted #440077;
  font-size: 11px;
  color: #665577;
}

.archive-item-list li:before {
  content: '>> ';
  color: #550099;
}

/* ============================================================
   LINKS PAGE
   ============================================================ */

.links-entry {
  padding: 5px 4px;
  border-bottom: 1px dotted #440077;
  font-size: 11px;
}

.links-entry:hover { background: #150025; }
.links-entry .link-title { color: #ff00cc; font-weight: bold; }
.links-entry .link-desc  { color: #665577; font-size: 10px; margin-top: 1px; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  max-width: 860px;
  margin: 0 auto 0;
  border-top: 3px double #9900ff;
  background: #0a0015;
  padding: 10px 12px 8px;
  text-align: center;
}

.footer-inner {
  font-size: 10px;
  color: #665577;
  letter-spacing: 0.08em;
  line-height: 2;
}

.footer-inner span {
  margin: 0 6px;
}

.webring {
  margin-top: 6px;
  font-size: 10px;
  color: #665577;
  border-top: 1px dotted #440077;
  padding-top: 6px;
  font-style: italic;
}

.webring a { color: #cc88ff; }

/* ============================================================
   LANG TOGGLE BUTTON
   ============================================================ */

.lang-toggle {
  background: #150025;
  border: 1px solid #550099;
  color: #cc88ff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.2s;
}

.lang-toggle:hover {
  background: #1a0030;
  border-color: #ff00cc;
  color: #ff00cc;
  text-shadow: 0 0 4px #ff00cc;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
  font-size: 10px;
  color: #665577;
  margin-bottom: 6px;
  letter-spacing: 0.1em;
}

.breadcrumb a { color: #cc88ff; }

/* ============================================================
   UTILITY
   ============================================================ */

.separator {
  border: none;
  border-top: 1px solid #440077;
  margin: 6px 0;
}

.sparkle-row {
  text-align: center;
  font-size: 10px;
  color: #550099;
  padding: 3px 0;
  letter-spacing: 0.3em;
}

.now-playing {
  font-size: 10px;
  color: #665577;
  border-top: 1px dotted #440077;
  padding-top: 6px;
  margin-top: 6px;
  text-align: center;
}

.now-playing .track { color: #ff00cc; animation: marquee-sparkle 3s infinite; }

/* ============================================================
   RESPONSIVE (minimal - es 2005 despues de todo)
   ============================================================ */

@media (max-width: 640px) {
  .sidebar-td { display: none; }
  .layout-table, .layout-table tr, .layout-table td {
    display: block; width: 100%;
  }
  .site-banner h1 { font-size: 1.4rem; }
}