:root{
  --bg:#05060a;
  --panel:#0c0f18;
  --fg:#e8e8e8;
  --dim:#b7b7b7;
  --border:#2b2f45;
  --accent:#00ff6a;
  --accent2:#ff2bd6;
  --warn:#ffd400;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 20% 10%, #0c1230 0%, #05060a 45%, #03040a 100%);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height:1.35;
}

.track-line {
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
}

.mini-player {
  display: inline-block;
  font-size: 8px;
  line-height: 8px;
  margin-left: 0px;
  margin-bottom: 2px;
  cursor: pointer;
  letter-spacing: 1px;
  user-select: none;
  vertical-align: middle;
  color: var(--accent);
}

.mini-player .btn {
  display: inline-block;
}

.mini-player:hover {
  opacity: 0.7;
}

/* faint retro grid */
.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.frame{
  width: 980px;
  margin: 18px auto;
  border: 3px solid var(--border);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

.left{
  width: 240px;
  vertical-align: top;
  padding: 12px;
  border-right: 2px solid var(--border);
}

.main{
  vertical-align: top;
  padding: 12px;
}

.panel{
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 10px;
  margin-bottom: 12px;
}

.panel-title{
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--warn);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hr{
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}

.tiny{ font-size: 12px; }
.dim{ color: var(--dim); }
.accent{ color: var(--accent); }
.accent2{ color: var(--accent2); }

.nav{
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav li{ margin: 6px 0; }
.nav a{
  display: inline-block;
  padding: 2px 4px;
  border: 1px dashed transparent;
}
.nav a:hover{
  border-color: var(--accent2);
}

.badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{
  font-size: 11px;
  border: 1px solid var(--border);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
}

.hero{
  border: 2px solid var(--border);
  background: linear-gradient(135deg, rgba(0,255,106,0.10), rgba(255,43,214,0.08));
  padding: 12px;
  margin-bottom: 12px;
}

.logo{
  border: 2px dashed var(--accent2);
  padding: 10px;
  text-align: center;
  background: rgba(0,0,0,0.25);
}
.logo-top{
  font-size: 42px;
  letter-spacing: 6px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,255,106,0.25);
}
.logo-mid{
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--warn);
  margin-top: 2px;
}
.logo-bot{
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
  margin-top: 6px;
}
.hero-sub{
  margin-top: 10px;
  text-align: center;
  color: var(--dim);
}

.news-item{
  border: 1px dashed var(--border);
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
}
.news-date{
  font-size: 12px;
  color: var(--accent2);
}
.news-text{
  margin-top: 4px;
}

.releases{
  width: 100%;
  border-collapse: collapse;
}
.cover{
  width: 180px;
  vertical-align: top;
  padding-right: 10px;
}
.coverbox{
  width: 170px;
  height: 170px;
  border: 2px solid var(--border);
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 8px,
    rgba(0,0,0,0.08) 8px,
    rgba(0,0,0,0.08) 16px
  );
  display:flex;
  align-items:center;
  justify-content:center;
}
.coverbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.covertext{
  text-align:center;
  font-size: 12px;
  color: var(--dim);
}
.rel{ vertical-align: top; }
.rel-title{ font-weight: bold; }
.rel-links{ margin: 6px 0; }
.rel-desc{ color: var(--dim); margin: 6px 0; }
.tracklist{
  border: 1px solid var(--border);
  padding: 8px;
  background: rgba(0,0,0,0.2);
  font-size: 12px;
}

.two-col{
  display:flex;
  gap: 18px;
}
.bullets{
  margin: 6px 0 0 18px;
}
.contact{ font-size: 14px; }

.footer{
  text-align: center;
  padding: 8px 0;
}

/* 90s blink */
.blink{
  color: var(--accent);
  animation: blink 1.1s step-end infinite;
  margin-bottom: 6px;
}
@keyframes blink{
  50%{ opacity: 0; }
}

/* mobile */
@media (max-width: 1040px){
  .frame{ width: 96%; }
}
@media (max-width: 780px){
  .frame, .frame tr, .frame td{ display:block; width:100%; }
  .left{ border-right: none; border-bottom: 2px solid var(--border); }
  .two-col{ flex-direction: column; }
}