:root {
  --bg: #212121;
  --text: #ffffff;
  --gap: 12px;
  --radius: 16px;
  --pad-x: 24px;
  --pad-y: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Trebuchet MS", Geneva, Verdana, sans-serif;
}

body {
  min-height: 100vh;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

.header {
  margin-bottom: var(--gap);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  border: 1.5px solid rgba(120, 200, 255, 0.4);
  background: linear-gradient(
    135deg,
    rgba(40, 90, 160, 0.35),
    rgba(20, 40, 70, 0.25),
    rgba(60, 120, 180, 0.3)
  );
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(80, 160, 255, 0.6);
  cursor: default;
  user-select: none;
}

.apps {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.banner {
  display: block;
  width: 100%;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  border: 1.5px solid var(--border, rgba(255, 255, 255, 0.35));
  background: linear-gradient(
    135deg,
    var(--c1, rgba(255, 255, 255, 0.12)),
    var(--c2, rgba(255, 255, 255, 0.08)),
    var(--c3, rgba(255, 255, 255, 0.12))
  );
  box-shadow: 0 4px 10px var(--shadow, rgba(0, 0, 0, 0.25));
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px var(--glow, rgba(255, 255, 255, 0.45));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.banner:hover,
.banner:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
}

.banner:active {
  transform: translateY(0);
}

/* Seeded per-title colors (stable, no JS) */
a[data-title="Callum's Footy"] {
  --c1: rgba(0, 180, 80, 0.28);
  --c2: rgba(0, 100, 50, 0.16);
  --c3: rgba(40, 200, 120, 0.22);
  --border: rgba(0, 230, 118, 0.45);
  --shadow: rgba(0, 180, 80, 0.25);
  --glow: rgba(0, 230, 118, 0.55);
}

a[data-title="Fitsplit"] {
  --c1: rgba(255, 120, 40, 0.28);
  --c2: rgba(180, 60, 20, 0.14);
  --c3: rgba(255, 160, 60, 0.2);
  --border: rgba(255, 140, 50, 0.45);
  --shadow: rgba(255, 100, 40, 0.22);
  --glow: rgba(255, 160, 80, 0.5);
}

a[data-title="Foodwise"] {
  --c1: rgba(120, 200, 40, 0.26);
  --c2: rgba(60, 120, 20, 0.14);
  --c3: rgba(160, 220, 60, 0.2);
  --border: rgba(140, 210, 50, 0.45);
  --shadow: rgba(100, 180, 40, 0.22);
  --glow: rgba(160, 230, 70, 0.5);
}

a[data-title="Wordie"] {
  --c1: rgba(80, 140, 255, 0.28);
  --c2: rgba(40, 80, 180, 0.14);
  --c3: rgba(120, 170, 255, 0.2);
  --border: rgba(100, 160, 255, 0.45);
  --shadow: rgba(60, 120, 255, 0.22);
  --glow: rgba(140, 180, 255, 0.5);
}

a[data-title="calendar (database test)"] {
  --c1: rgba(200, 160, 40, 0.26);
  --c2: rgba(140, 100, 20, 0.14);
  --c3: rgba(230, 190, 60, 0.2);
  --border: rgba(220, 180, 50, 0.45);
  --shadow: rgba(180, 140, 30, 0.22);
  --glow: rgba(240, 200, 80, 0.5);
}

a[data-title="pheasant plucker"] {
  --c1: rgba(180, 80, 40, 0.28);
  --c2: rgba(100, 40, 20, 0.14);
  --c3: rgba(220, 120, 60, 0.2);
  --border: rgba(200, 100, 50, 0.45);
  --shadow: rgba(160, 70, 30, 0.22);
  --glow: rgba(230, 130, 70, 0.5);
}

a[data-title="Dominoes"] {
  --c1: rgba(200, 200, 210, 0.22);
  --c2: rgba(80, 80, 90, 0.16);
  --c3: rgba(160, 160, 170, 0.18);
  --border: rgba(220, 220, 230, 0.4);
  --shadow: rgba(120, 120, 130, 0.25);
  --glow: rgba(240, 240, 250, 0.45);
}

a[data-title="Quiz"] {
  --c1: rgba(160, 80, 255, 0.26);
  --c2: rgba(90, 40, 160, 0.14);
  --c3: rgba(190, 120, 255, 0.2);
  --border: rgba(180, 100, 255, 0.45);
  --shadow: rgba(140, 70, 220, 0.22);
  --glow: rgba(200, 140, 255, 0.5);
}

a[data-title="Fin Finder"] {
  --c1: rgba(20, 160, 200, 0.28);
  --c2: rgba(10, 90, 130, 0.14);
  --c3: rgba(40, 190, 220, 0.2);
  --border: rgba(30, 180, 220, 0.45);
  --shadow: rgba(20, 140, 180, 0.22);
  --glow: rgba(60, 210, 240, 0.5);
}

a[data-title="Fruity"] {
  --c1: rgba(255, 80, 120, 0.28);
  --c2: rgba(180, 30, 70, 0.14);
  --c3: rgba(255, 120, 150, 0.2);
  --border: rgba(255, 90, 130, 0.45);
  --shadow: rgba(220, 50, 100, 0.22);
  --glow: rgba(255, 130, 160, 0.5);
}

a[data-title="Music"] {
  --c1: rgba(255, 60, 160, 0.26);
  --c2: rgba(140, 20, 100, 0.14);
  --c3: rgba(255, 100, 190, 0.2);
  --border: rgba(255, 80, 180, 0.45);
  --shadow: rgba(200, 40, 140, 0.22);
  --glow: rgba(255, 120, 200, 0.5);
}

a[data-title="Cards"] {
  --c1: rgba(220, 40, 40, 0.28);
  --c2: rgba(120, 20, 20, 0.14);
  --c3: rgba(240, 80, 80, 0.2);
  --border: rgba(230, 60, 60, 0.45);
  --shadow: rgba(180, 30, 30, 0.22);
  --glow: rgba(255, 100, 100, 0.5);
}

a[data-title="Circles"] {
  --c1: rgba(40, 200, 180, 0.26);
  --c2: rgba(20, 120, 110, 0.14);
  --c3: rgba(60, 230, 200, 0.2);
  --border: rgba(50, 220, 190, 0.45);
  --shadow: rgba(30, 170, 150, 0.22);
  --glow: rgba(80, 240, 210, 0.5);
}

a[data-title="BrainDump"] {
  --c1: rgba(100, 100, 255, 0.26);
  --c2: rgba(50, 50, 160, 0.14);
  --c3: rgba(140, 140, 255, 0.2);
  --border: rgba(120, 120, 255, 0.45);
  --shadow: rgba(80, 80, 220, 0.22);
  --glow: rgba(160, 160, 255, 0.5);
}

a[data-title="NotebookLM"] {
  --c1: rgba(60, 180, 120, 0.26);
  --c2: rgba(30, 100, 70, 0.14);
  --c3: rgba(90, 210, 150, 0.2);
  --border: rgba(70, 200, 140, 0.45);
  --shadow: rgba(40, 150, 100, 0.22);
  --glow: rgba(100, 230, 160, 0.5);
}

a[data-title="Adventure"] {
  --c1: rgba(180, 120, 40, 0.28);
  --c2: rgba(100, 60, 20, 0.14);
  --c3: rgba(220, 160, 60, 0.2);
  --border: rgba(200, 140, 50, 0.45);
  --shadow: rgba(160, 100, 30, 0.22);
  --glow: rgba(240, 180, 80, 0.5);
}

a[data-title="Writing"] {
  --c1: rgba(140, 180, 220, 0.26);
  --c2: rgba(70, 100, 140, 0.14);
  --c3: rgba(170, 200, 230, 0.2);
  --border: rgba(150, 190, 230, 0.45);
  --shadow: rgba(90, 130, 180, 0.22);
  --glow: rgba(180, 210, 240, 0.5);
}

a[data-title="Railway"] {
  --c1: rgba(255, 180, 40, 0.26);
  --c2: rgba(160, 100, 20, 0.14);
  --c3: rgba(255, 210, 80, 0.2);
  --border: rgba(255, 190, 50, 0.45);
  --shadow: rgba(200, 140, 30, 0.22);
  --glow: rgba(255, 220, 100, 0.5);
}

a[data-title="TVShow"] {
  --c1: rgba(80, 80, 200, 0.28);
  --c2: rgba(40, 40, 120, 0.14);
  --c3: rgba(120, 120, 230, 0.2);
  --border: rgba(100, 100, 220, 0.45);
  --shadow: rgba(60, 60, 180, 0.22);
  --glow: rgba(140, 140, 255, 0.5);
}

@media (max-width: 480px) {
  .page {
    padding: 16px;
  }

  .header {
    font-size: 1.25rem;
  }

  .banner {
    font-size: 1rem;
  }
}