/* ============================================================
   THE DELETED YEARS — shared.css
   ============================================================ */

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

body {
  background-color: #060010;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(102,0,204,0.04) 30px, rgba(102,0,204,0.04) 31px),
    repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(102,0,204,0.04) 30px, rgba(102,0,204,0.04) 31px);
  color: #ccaaff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  min-height: 100vh;
  cursor: crosshair;
}

a { color: #ff99ff; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

/* HEADER */
#header {
  background: linear-gradient(135deg, #000066 0%, #1a0055 25%, #330099 50%, #0a0077 75%, #220088 100%);
  border-bottom: 4px solid #ff00ff;
  border-top: 2px solid #9900ff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

#header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,0,255,0.03) 10px, rgba(255,0,255,0.03) 11px);
  pointer-events: none;
}

#header h1 {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 32px;
  color: #ff00ff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000, 0 0 12px #ff00ff, 0 0 30px #9900ff;
  line-height: 1;
}

#header-tagline {
  font-size: 10px;
  color: #cc99ff;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 5px;
  text-shadow: 0 0 6px #6600cc;
}

#header-right {
  text-align: right;
  font-size: 10px;
  color: #9966cc;
  line-height: 2;
  border-left: 1px solid #330066;
  padding-left: 14px;
}

/* NAV */
#nav {
  background: #0d001f;
  border-bottom: 3px solid #cc00cc;
  display: flex;
  flex-wrap: wrap;
}

#nav a {
  display: inline-block;
  padding: 9px 18px;
  font-family: Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #cc99ff;
  border-right: 1px solid #330055;
  transition: background 0.1s;
}

#nav a:hover, #nav a.active {
  background: #6600cc;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 6px #fff;
}

/* TICKER */
#ticker {
  background: #000;
  border-top: 2px solid #ff00ff;
  border-bottom: 2px solid #ff00ff;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
}

#ticker-inner {
  display: inline-block;
  animation: ticker 55s linear infinite;
  font-size: 11px;
  color: #ff00ff;
  letter-spacing: 3px;
  text-shadow: 0 0 6px #ff00ff;
}

@keyframes ticker { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }

/* BLINK */
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* LAYOUT */
#wrapper {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 10px;
  padding: 10px;
  max-width: 1140px;
  margin: 0 auto;
}

#sidebar { display: flex; flex-direction: column; gap: 8px; }
#main    { display: flex; flex-direction: column; gap: 10px; }

/* BOXES */
.s-box {
  background: #0d0020;
  border: 1px solid #9900cc;
  border-top: 3px solid #ff00ff;
  padding: 10px;
}

.s-box h3 {
  font-family: Impact, sans-serif;
  font-size: 12px;
  color: #ffff00;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px dashed #330055;
  padding-bottom: 6px;
  margin-bottom: 9px;
  text-shadow: 0 0 4px #aaaa00;
}

.s-box ul { list-style: none; }
.s-box ul li { font-size: 12px; color: #ccaaee; line-height: 2.1; border-bottom: 1px dotted #2a0044; }
.s-box ul li::before { content: "» "; color: #ff00ff; }
.s-box ul li a { color: #dd99ff; }
.s-box ul li a:hover { color: #ff00ff; }
.s-box p { font-size: 12px; color: #ccaaee; line-height: 1.8; }
.s-box p strong { color: #ffff00; }

.m-box {
  background: #0d0020;
  border: 1px solid #9900cc;
  border-top: 3px solid #ff00ff;
  padding: 12px;
}

.m-box h2 {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 15px;
  color: #ff99ff;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px dashed #440066;
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-shadow: 0 0 4px #aa00aa;
}

/* STAT ROWS */
.stat-row { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; border-bottom:1px dotted #2a0044; color:#ccaaee; }
.stat-row:last-child { border:none; }
.stat-row .val { color:#ffff00; font-weight:bold; }

/* COUNTER */
.counter-display {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #ffff00;
  letter-spacing: 6px;
  background: #001100;
  border: 2px solid #00ff00;
  padding: 6px 10px;
  text-align: center;
  display: block;
  margin: 6px 0;
  text-shadow: 0 0 6px #00ff00;
}

.counter-label { font-size:10px; color:#669966; text-align:center; letter-spacing:2px; text-transform:uppercase; display:block; }

/* BUTTONS */
.btn {
  background: #4400aa;
  border: 1px solid #ff00ff;
  border-bottom: 3px solid #cc00cc;
  color: #fff;
  padding: 8px 18px;
  font-family: Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
}
.btn:hover { background: #6600cc; text-decoration: none; }

.btn-green {
  background: #003300;
  border: 1px solid #00ff00;
  border-bottom: 3px solid #00aa00;
  color: #00ff00;
}
.btn-green:hover { background: #005500; text-decoration: none; }

/* TAGS */
.bc-tags { display:flex; flex-wrap:wrap; gap:3px; }
.tag { font-size:9px; padding:2px 5px; background:#1a0033; border:1px solid #550088; color:#cc99ee; letter-spacing:1px; }
.tag.pending { background:#0a0a0a; border-color:#444444; color:#777777; }

/* BAND CARD */
.band-card {
  background: #06000f;
  border: 1px solid #440077;
  border-top: 3px solid #880099;
  padding: 10px;
  cursor: pointer;
  display: block;
  color: inherit;
  transition: border-color 0.1s;
}
.band-card:hover { border-color:#ff00ff; border-top-color:#ff00ff; background:#0f001a; text-decoration:none; }
.band-card.featured { border-color:#ff00ff; border-top:3px solid #ff00ff; box-shadow:0 0 10px rgba(255,0,255,0.15); }

.bc-av { width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-family:Impact,sans-serif; font-size:13px; letter-spacing:1px; margin-bottom:8px; border:2px solid currentColor; text-shadow:0 0 4px currentColor; }
.bc-name { font-family:Impact,'Arial Black',sans-serif; font-size:14px; color:#ff99ff; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; line-height:1.2; }
.bc-loc { font-size:10px; color:#8866aa; margin-bottom:7px; letter-spacing:1px; }

/* BAND GRID */
.band-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(175px, 1fr)); gap:8px; }

/* SEARCH */
.search-grid { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:end; }
.search-grid label { display:block; font-size:10px; color:#bb99ff; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.search-grid input, .search-grid select { width:100%; background:#06000f; border:1px solid #6600cc; border-bottom:2px solid #9900cc; color:#cc99ff; padding:7px 9px; font-family:'Courier New',monospace; font-size:11px; outline:none; }
.search-grid input:focus, .search-grid select:focus { border-color:#ff00ff; }
.search-grid select option { background:#06000f; }

/* ABOUT TEXT BLOCK */
.about-text { font-size:13px; line-height:1.9; color:#ccaaee; border-left:4px solid #ff00ff; padding-left:14px; }
.about-text strong { color:#ffff00; }

/* ARCHIVE RADIO */
#random-player {
  background: #000d00;
  border: 2px solid #00ff00;
  border-top: 3px solid #00ff66;
  padding: 10px;
}
#random-player h3 { font-family:Impact,sans-serif; font-size:12px; color:#00ff00; letter-spacing:2px; text-transform:uppercase; border-bottom:1px dashed #005500; padding-bottom:6px; margin-bottom:9px; text-shadow:0 0 4px #00ff00; }
#rp-progress { height:3px; background:#002200; margin-bottom:8px; overflow:hidden; }
#rp-progress-fill { height:100%; background:#00ff00; width:0%; transition:width 0.5s linear; box-shadow:0 0 4px #00ff00; }
#rp-track { font-size:11px; color:#00ff00; letter-spacing:1px; min-height:32px; line-height:1.6; padding:4px 0; border-bottom:1px solid #003300; margin-bottom:8px; }
#rp-band { font-size:10px; color:#00aa44; letter-spacing:1px; display:block; margin-top:2px; }
#rp-controls { display:flex; gap:6px; }
.rp-btn { flex:1; background:#001a00; border:1px solid #00aa00; color:#00ff00; padding:7px 4px; font-family:Impact,sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; text-align:center; }
.rp-btn:hover { background:#003300; border-color:#00ff00; }

/* LOST BANDS GRID */
.lost-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lost-card {
  background: #0f0010;
  border: 1px solid #550033;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: border-color 0.1s;
  text-decoration: none;
  min-width: 140px;
}

.lost-card:hover {
  border-color: #cc0055;
  background: #1a0018;
  text-decoration: none;
}

.lost-name {
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 13px;
  color: #dd77aa;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
}

.lost-loc {
  font-size: 10px;
  color: #884466;
  letter-spacing: 1px;
}

.lost-cta {
  font-size: 9px;
  color: #773355;
  letter-spacing: 1px;
  margin-top: 2px;
  font-style: italic;
}

/* PAGINATION */
#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #330055;
}

.pg-btn {
  background: #1a0033;
  border: 1px solid #6600cc;
  color: #cc99ff;
  padding: 6px 16px;
  font-family: Impact, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s;
}

.pg-btn:hover:not(:disabled) { background: #440088; border-color: #ff00ff; color: #fff; }
.pg-btn:disabled { opacity: 0.3; cursor: default; }

#page-info {
  font-size: 10px;
  color: #9966cc;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}

/* FOOTER */
#footer {
  border-top: 3px solid #330055;
  background: #060010;
  padding: 14px 20px;
  text-align: center;
  font-size: 10px;
  color: #553377;
  letter-spacing: 2px;
  margin-top: 14px;
}
#footer a { color:#6600cc; }
#footer a:hover { color:#ff00ff; }
.footer-note { color:#2a0033; margin-top:6px; }