/* Shared styles for every page */

:root {
  --bg: #23262f;
  --bg-glow: #2f3442;
  --text: #f1f3f7;
  --muted: #b9bfcc;
  --accent: #8fe3e8;
  --frame: #000;
}

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

html { background: var(--bg); }

body {
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -10%, var(--bg-glow), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: var(--accent); color: #111; }

/* ---------- Navbar ---------- */

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}

.brand img { width: 44px; height: auto; }

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  list-style: none;
}

nav ul a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

nav ul a:hover { color: var(--text); }
nav ul a.active { color: var(--text); border-color: var(--accent); }

/* ---------- Page heading ---------- */

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.page-head {
  text-align: center;
  margin-bottom: 44px;
}

.page-head h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
}

.page-head p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: center;
  align-items: start;
  gap: 40px 32px;
}

.card { display: flex; flex-direction: column; gap: 14px; }

.card > img,
.card > a > img {
  display: block;
  width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 4px solid var(--frame);
  border-radius: 6px;
  transition: transform 0.2s;
}

.card > a:hover > img { transform: translateY(-4px); }

.track { display: flex; flex-direction: column; gap: 8px; }

.track h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--track, var(--text));
}

.card select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #222;
  cursor: pointer;
}

.card audio { width: 100%; height: 40px; }

/* ---------- Home page ---------- */

.hero {
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 24px 60px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
}

.hero p {
  max-width: 640px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 30px 12px 24px;
  border: 2px solid var(--text);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.hero-btn svg { width: 16px; height: 16px; fill: currentColor; }

.hero-btn:hover { background: transparent; color: var(--text); }

/* ---------- Per-game colors ---------- */

.mc     { --bg: #1d241f; --bg-glow: #2c3a2e; --accent: #8fd65a; }
.mario  { --bg: #1a2040; --bg-glow: #263066; --accent: #ff7272; }
.zelda  { --bg: #18231f; --bg-glow: #24382f; --accent: #e9c873; }
.hk     { --bg: #11141c; --bg-glow: #1f2535; --accent: #d8e1ff; }
.ut     { --bg: #000;    --bg-glow: #111;    --accent: #ffd800; --frame: #fff; }

@media (max-width: 560px) {
  nav { justify-content: center; }
  main { padding-top: 24px; }
}

/* Wide artwork: show the whole picture instead of cropping the logo */
.card img.fit { object-fit: contain; background: #000; }

/* Home + Collection: game collage behind everything, softened and darkened so the text stays readable */
body.home, body.collection { background: var(--bg); }

body.home::before,
body.home::after,
body.collection::before,
body.collection::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* the collage, slightly blurred so it reads as texture instead of competing with the title */
body.home::before,
body.collection::before {
  inset: -20px;
  background: url("The%20BEST%20Game%20Music_files/games-bg.png") center / cover;
  filter: blur(4px) saturate(0.7) brightness(0.55);
}

/* darkest right behind the text, fading out toward the edges */
body.home::after {
  background:
    radial-gradient(ellipse 65% 60% at 50% 50%, rgba(18, 20, 28, 0.94), rgba(18, 20, 28, 0.5) 100%),
    linear-gradient(rgba(18, 20, 28, 0.7), transparent 120px);
}

/* Collection: darker all over, since the cover art needs to stand out */
body.collection::after {
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, rgba(18, 20, 28, 0.9), rgba(18, 20, 28, 0.7) 100%),
    linear-gradient(rgba(18, 20, 28, 0.6), transparent 120px);
}

.home nav,
.home .hero,
.collection nav,
.collection main { position: relative; z-index: 1; }

.home .hero p {
  color: #f1f3f7;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6);
}
.home .hero h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* Game characters around the edges of the home page (made by figures.js).
   Each one moves the way it would in its game, at its own speed, so they never move together. */
.figures {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --scale: 1;
}

.figure {
  position: absolute;
  translate: -50% -50%;
  rotate: var(--tilt);
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.figure.ground { translate: -50% 4%; }

.figure img {
  display: block;
  /* h is the size on a 1440x900 screen; they grow and shrink with the window, but never get tiny */
  height: max(calc(var(--h) * 0.5px), calc(var(--h) * min(0.111vh, 0.0694vw)) * var(--scale));
  width: auto;
  transform-origin: 50% 100%;
  animation-delay: calc(var(--start) * var(--dur) * var(--jitter) * -1);
  animation-duration: calc(var(--dur) * var(--jitter));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.figure img.flip { scale: -1 1; }

/* Paimon floats, like she does in Genshin */
.move-float img { --dur: 7s; animation-name: float; animation-direction: alternate; }
@keyframes float {
  from { transform: translate(0, 0) rotate(-3deg); }
  40%  { transform: translate(5px, -10px) rotate(1deg); }
  to   { transform: translate(-3px, -18px) rotate(3deg); }
}

/* standing still, just breathing */
.move-breathe img { --dur: 4.5s; animation-name: breathe; }
@keyframes breathe {
  50% { transform: scale(1.01, 1.025); }
}

/* leaning side to side from the feet */
.move-sway img { --dur: 6s; animation-name: sway; animation-direction: alternate; }
@keyframes sway {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}

/* the Creeper sits there... then swells and flashes like it's about to blow */
.move-hiss img { --dur: 11s; animation-name: hiss; animation-timing-function: linear; }
@keyframes hiss {
  0%, 84%, 100% { transform: none; filter: none; }
  87% { transform: scale(1.03); filter: brightness(1.7); }
  89% { transform: scale(1.01); filter: none; }
  92% { transform: scale(1.06); filter: brightness(2.2); }
  94% { transform: scale(1.02); filter: none; }
  96% { transform: scale(1.09); filter: brightness(2.8); }
  98% { transform: none; filter: none; }
}

/* the mushroom waits, then does a quick squishy hop */
.move-hop img { --dur: 5s; animation-name: hop; animation-timing-function: linear; }
@keyframes hop {
  0%, 70%, 100% { transform: none; }
  73% { transform: scale(1.08, 0.9); }
  79% { transform: translateY(-34px) scale(0.95, 1.06); }
  85% { transform: none; }
  88% { transform: scale(1.1, 0.88); }
  92% { transform: none; }
}

@media (max-width: 900px) {
  .figures { --scale: 0.55; }
  .figure { opacity: 0.45; }
}

/* phones: only the ones standing on the bottom edge, so nothing covers the text */
@media (max-width: 600px) {
  .figure:not(.ground) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .figure img { animation: none; }
}