/* Palette lifted from the archived jellyfishdm.com: royal blue field, near-black bars, white text,
   Montserrat at heavy weights. The cyan is the jellyfish in the old logo, used here as the single
   accent so it stays a highlight rather than decoration.

   Montserrat is requested by name but never fetched — no third-party request from this site, by
   design. Visitors who have it get it; everyone else lands on a close geometric fallback. Drop a
   woff2 into static/ and add an @font-face here if you want it guaranteed. */
:root {
  color-scheme: dark;
  --bg:     #003c82;
  --bg-deep:#00294f;
  --bar:    #111111;
  --fg:     #ffffff;
  --dim:    rgba(255,255,255,.72);
  --faint:  rgba(255,255,255,.14);
  --panel:  rgba(255,255,255,.07);
  --accent: #5ec8e8;
  --abyss:  #00101f;
  --column: 70rem;
}

* { box-sizing: border-box; }

/* Column layout so the footer bar sits at the bottom of the viewport on a short page instead of
   floating halfway up with blue beneath it. */
body {
  margin: 0;
  color: var(--fg);
  font: 16px/1.65 "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Spans the whole document, not the viewport, so scrolling carries you down through it. */
  background: linear-gradient(180deg,
      #0a5cad 0%, var(--bg) 18%, #00325f 45%, var(--bg-deep) 72%, var(--abyss) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Overscroll at the bottom should be abyss, not a pale default. */
html { background: var(--abyss); }

/* Two fixed layers that make the descent felt rather than merely coloured: sunlight from the
   surface, and the dark closing in. Both are driven by scroll position where the browser supports
   it, so they track exactly where you are on the page instead of running on a timer. Without that
   support the document-height gradient above still darkens as you go — the effect degrades, the
   page never breaks. */
body::before,
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }

body::before {
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(150,235,255,.30), transparent 62%),
    radial-gradient(28% 55% at 22% -8%, rgba(190,245,255,.16), transparent 70%),
    radial-gradient(22% 48% at 74% -8%, rgba(190,245,255,.13), transparent 70%);
}
body::after { background: var(--abyss); opacity: 0; }

@supports (animation-timeline: scroll()) {
  body::before { animation: surface-fades linear both; animation-timeline: scroll(root); }
  body::after  { animation: dark-gathers linear both; animation-timeline: scroll(root); }
  @keyframes surface-fades { to { opacity: 0; } }
  @keyframes dark-gathers  { to { opacity: .62; } }
}

a { color: var(--accent); }

/* --- bars ------------------------------------------------------------------------------------ */
/* Full-bleed dark strip, with the contents held to the same column as the page body. */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--bar);
  padding: .9rem max(1rem, calc((100% - var(--column)) / 2));
}
footer.bar { margin-top: 4rem; color: var(--dim); font-size: .9rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}
.brand:hover { color: var(--accent); }
.logo { display: block; width: 34px; height: 34px; flex: none; }

nav a {
  margin-left: 1.6rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: .25rem;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- page ------------------------------------------------------------------------------------ */
main { flex: 1 0 auto; width: 100%; max-width: var(--column); margin: 0 auto; padding: 3rem 1rem 4rem; }

/* Prose is held narrower than the grid — a 70rem measure is unreadable for body text. */
.lead { font-size: 1.15rem; color: var(--fg); max-width: 46rem; margin: 0 0 1rem; }
.about p { max-width: 46rem; color: var(--dim); margin: 0 0 1.15rem; }
.about .lead { color: var(--fg); }
.about .contact { margin-top: 2rem; color: var(--fg); }
.section { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; margin: 3.5rem 0 1.5rem; }

h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 2rem;
}

.year { color: var(--dim); font-weight: 500; font-size: .8em; }
.empty { color: var(--dim); }

/* --- game grid ------------------------------------------------------------------------------- */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--faint);
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(94,200,232,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(94,200,232,.25);
}

/* The whole card is one anchor, so it is reachable by keyboard and works with JavaScript off. */
.card > a { display: block; padding-bottom: 1rem; color: inherit; text-decoration: none; }
.card > a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: .75rem; }

.card .thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(94,200,232,.18), transparent 70%),
    var(--bg-deep);
  border-bottom: 1px solid var(--faint);
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card h2 { font-size: 1.1rem; font-weight: 700; margin: 1rem 1.1rem .35rem; }
.card p { margin: 0 1.1rem; color: var(--dim); font-size: .92rem; }

/* --- player modal ---------------------------------------------------------------------------- */
dialog { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
dialog::backdrop { background: rgba(0,20,45,.82); backdrop-filter: blur(3px); }

.modal {
  background: var(--bg-deep);
  border: 1px solid var(--faint);
  border-radius: .75rem;
  padding: 1rem 1.15rem 1.25rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.modal header { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.modal header .grow { flex: 1 1 auto; }
.modal h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }

.stage {
  width: min(90vw, 1100px);
  aspect-ratio: 16 / 9;
  max-height: 68vh;
  background: #000;
  border-radius: .5rem;
  overflow: hidden;
}
.stage iframe { display: block; width: 100%; height: 100%; border: 0; }

button.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--faint);
  border-radius: .4rem;
  padding: .5rem 1rem;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
button.secondary:hover { background: rgba(94,200,232,.15); border-color: var(--accent); }
button.secondary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Motion is an enhancement here, never the thing carrying the meaning. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .card:hover { transform: none; }
}