/* THE STANK TANK - retro-future style
   Colors are set once here so they are easy to change. */
:root {
  --night: #1b0a3c;
  --panel: #2a1259;
  --pink: #ff2e93;
  --cyan: #2ef2ff;
  --sun: #ffb020;
  --text: #f4ecff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Title ---------- */
header {
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  /* striped sunset behind the title */
  background: linear-gradient(to bottom, var(--night) 0%, #5a1470 60%, #ff2e93 100%);
  border-bottom: 4px solid var(--cyan);
}

h1 {
  margin: 0;
  font-family: "Orbitron", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 9vw, 5rem);
  letter-spacing: 0.06em;
  color: var(--sun);
  text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--night);
}

.tagline { margin: 0.75rem 0 0; color: var(--cyan); }

/* ---------- Sections ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
#home, #music, #punk { max-width: 900px; margin: 0 auto; }

h2 {
  font-family: "Orbitron", "Arial Black", sans-serif;
  color: var(--cyan);
  border-bottom: 2px dashed var(--pink);
  padding-bottom: 0.4rem;
}

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ---------- Team cards ---------- */
.team-card {
  background: var(--panel);
  border: 3px solid var(--cyan);
  box-shadow: 6px 6px 0 var(--pink);
  padding: 1.25rem;
}

.team-card h3 {
  margin: 0 0 0.25rem;
  font-family: "Orbitron", "Arial Black", sans-serif;
  color: var(--sun);
  font-size: 1.15rem;
}

.record { margin: 0 0 1rem; color: var(--cyan); font-weight: bold; }

.label { margin: 1rem 0 0; color: var(--pink); font-size: 0.85rem; }
.value { margin: 0.1rem 0 0; }
.score { font-size: 1.4rem; font-weight: bold; }
.win  { color: #5dff8f; }
.loss { color: #ff7a7a; }

a { color: var(--cyan); }
a:hover, a:focus { color: var(--sun); }

.loading, .error { color: var(--sun); }

footer { text-align: center; padding: 2rem 1rem; color: var(--pink); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 1rem 0;
}

.tab {
  font-family: "Orbitron", "Arial Black", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: var(--panel);
  border: 3px solid var(--cyan);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}

.tab:hover { color: var(--sun); }

.tab.active {
  color: var(--night);
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 4px 4px 0 var(--cyan);
}

[hidden] { display: none !important; }

/* ---------- Music ---------- */
.note { color: var(--pink); margin-top: 0; }

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.track {
  background: var(--panel);
  border: 3px solid var(--cyan);
  box-shadow: 4px 4px 0 var(--pink);
}

.track img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 3px solid var(--cyan);
}

.track a { display: block; padding: 0.75rem; text-decoration: none; }
.track .date { display: block; color: var(--pink); font-size: 0.8rem; padding: 0 0.75rem 0.75rem; margin-top: -0.4rem; }

/* ---------- Team status ---------- */
.badge {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--night);
  background: var(--cyan);
}
.badge.hot { background: var(--pink); }
.standing { margin: -0.7rem 0 0.5rem; font-size: 0.9rem; }
.series { color: var(--sun); }

/* ---------- Home ---------- */
.section-title {
  margin: 2rem 0 0.75rem;
  font-family: "Orbitron", "Arial Black", sans-serif;
  color: var(--sun);
}
.note.small { font-size: 0.8rem; margin: 0.75rem 0 0; }

.rating {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--night);
}
.rating.good { background: #5dff8f; }
.rating.ok   { background: var(--sun); }
.rating.bad  { background: #ff7a7a; }

.sunset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--pink);
}
.sunset-row .why { font-size: 0.85rem; color: var(--cyan); }

/* ---------- Sports grid: 3 across on desktop, 2 on tablet, 1 on phone ---------- */
#team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { #team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #team-grid { grid-template-columns: 1fr; } }

/* ---------- Surf grid: 2 across (2 rows of 2), 1 on phone ---------- */
#surf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #surf-grid { grid-template-columns: 1fr; } }

/* ---------- Surf grid: 2 across (2 rows of 2), 1 on phone ---------- */
#surf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #surf-grid { grid-template-columns: 1fr; } }

/* ---------- Surf grid: 2 across (2 rows of 2), 1 on phone ---------- */
#surf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #surf-grid { grid-template-columns: 1fr; } }

/* ---------- Surf grid: 2 across (2 rows of 2), 1 on phone ---------- */
#surf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #surf-grid { grid-template-columns: 1fr; } }

/* ---------- Punk tab: text rows (used when posts have no pictures) ---------- */
.punk-list { display: grid; gap: 0.75rem; }
.punk-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: var(--panel);
  border: 3px solid var(--cyan);
  box-shadow: 4px 4px 0 var(--pink);
  padding: 0.6rem 0.85rem;
}
.punk-row a { text-decoration: none; }
.punk-row .date { flex-shrink: 0; color: var(--pink); font-size: 0.8rem; }
@media (max-width: 640px) { .punk-row { flex-direction: column; gap: 0.2rem; } }