/* Y2K aesthetic — Xbox 360 Blades dashboard. Glossy green, glass panels, vertical tabs. Pure CSS, no JS. */

:root {
  --g1: #eaffb0;
  --g2: #8ee000;
  --g3: #3c9a1f;
  --g4: #0c3d0a;
  --btn-y: #ffcc00;
  --btn-x: #2e7cd6;
  --btn-b: #e2231a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Space Grotesk', Verdana, Geneva, Arial, sans-serif;
  font-size: 14px;
  color: #eafce0;
  background: radial-gradient(ellipse at 50% 28%, #7ed321 0%, #2c6e17 35%, #0a2606 75%, #051403 100%);
}

/* --- banner / dashboard logo --- */

#banner {
  text-align: center;
  padding: 30px 20px 16px;
}

#banner h1 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--g1);
  text-shadow: 0 0 18px rgba(142, 224, 0, 0.9), 0 2px 0 var(--g4);
}

.tagline {
  display: block;
  margin-top: 6px;
  color: #cdeeb0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(60%); }
  100% { transform: translateX(-160%); }
}

/* --- window / dashboard frame --- */

.window {
  max-width: 100rem;
  margin: 1rem auto 0;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "title title"
    "nav   main";
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(142, 224, 0, 0.25);
}

#home .window {
  margin-top: 0;
}

.titlebar {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(180deg, #b6f24a, #4f9c1c);
  color: #16330a;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.titlebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlebar-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tb-btn {
  width: 12px;
  height: 12px;
  font-size: 0;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.tb-btn:nth-child(1) { background: radial-gradient(circle at 30% 30%, #fff, var(--btn-y) 60%, #7a5e00); }
.tb-btn:nth-child(2) { background: radial-gradient(circle at 30% 30%, #fff, var(--btn-x) 60%, #14335c); }
.tb-btn:nth-child(3) { background: radial-gradient(circle at 30% 30%, #fff, var(--btn-b) 60%, #6e0f0a); }

.theme-toggle {
  width: 22px;
  height: 22px;
  margin-top: auto;
  margin-bottom: 4px;
  align-self: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #16330a;
  background: radial-gradient(circle at 30% 30%, #fff, var(--g1) 60%, var(--g3));
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.theme-toggle:hover {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* --- nav: vertical blade tabs --- */

nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 8px;
  background: linear-gradient(180deg, #1c4d12, var(--g4));
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

nav a {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  color: var(--g1);
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

nav a i {
  color: var(--g1);
  transform: rotate(180deg);
  flex-shrink: 0;
}

nav a:hover {
  background: linear-gradient(180deg, var(--g2), var(--g3));
  color: #06210a;
  box-shadow: 0 0 14px rgba(142, 224, 0, 0.7);
}

nav a:hover i {
  color: #06210a;
}

/* --- main: glass panel --- */

main {
  grid-area: main;
  position: relative;
  padding: 24px 28px 36px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25)),
    radial-gradient(ellipse at top, #2c6e17, var(--g4) 70%);
  color: #eafce0;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}

/* --- sparkle divider --- */

.divider {
  position: relative;
  height: 3px;
  margin: 20px 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--g1), var(--g2), var(--g1), transparent);
  background-size: 200% 100%;
  animation: sparkle 4s linear infinite;
}

@keyframes sparkle {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* --- headings / links --- */

h1, h2 {
  color: var(--g1);
  text-shadow: 0 0 8px rgba(142, 224, 0, 0.6);
}

a {
  color: #d4ff7a;
  text-decoration: none;
}

a:visited {
  color: #9be04a;
}

article ul, main ul {
  list-style: none;
  padding-left: 0;
  position: relative;
}

article ul li, main > ul li, #recent-posts li, #portfolio-highlights li {
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

article ul li a, main > ul li a, #recent-posts li a, #portfolio-highlights li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.25));
  color: #d4ff7a;
}

article ul li a:hover, main > ul li a:hover, #recent-posts li a:hover, #portfolio-highlights li a:hover {
  background: linear-gradient(180deg, rgba(142, 224, 0, 0.35), rgba(0, 0, 0, 0.25));
  box-shadow: 0 0 12px rgba(142, 224, 0, 0.5);
}

.row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.row-meta {
  font-size: 12px;
  color: #a8d97a;
  flex-shrink: 0;
}

.row-desc {
  font-size: 12px;
  color: #cdeeb0;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

.row-desc:empty {
  display: none;
}

.meta {
  font-size: 12px;
  color: #a8d97a;
}

/* --- footer --- */

footer {
  position: relative;
  margin-top: 24px;
  padding: 14px 10px 10px;
  text-align: center;
  font-size: 11px;
  color: #cdeeb0;
}

footer i {
  margin-right: 3px;
}