@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fredoka.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --wall: #14161f;
  --card: #1d2029;
  --card-2: #232734;
  --line: #2e3242;
  --canvas: #f5f1e8;
  --ink: #232028;
  --coral: #ff6d8d;
  --teal: #35d0ba;
  --yellow: #ffcf4d;
  --blue: #58a6ff;
  --purple: #b58cff;
  --text: #eef0f4;
  --muted: #9aa1b2;
  --green: #7ed07e;
  --red: #ff8f7d;
  --display: 'Fredoka', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--text);
  font: 17px/1.68 var(--body);
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* canvas header with a paint-swatch stripe under it */
header { background: var(--canvas); }
header::after {
  content: ""; display: block; height: 8px;
  background: linear-gradient(90deg,
    var(--coral) 0 20%, var(--yellow) 20% 40%, var(--teal) 40% 60%,
    var(--blue) 60% 80%, var(--purple) 80% 100%);
}
header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 14px; padding-bottom: 14px; }
.logo {
  font-family: var(--display); font-weight: 650; font-size: 1.15em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
nav { display: flex; flex-wrap: wrap; gap: 3px 4px; font-size: 0.86em; }
nav a {
  color: var(--ink); text-decoration: none;
  padding: 4px 11px; border-radius: 999px; font-weight: 600;
}
nav a:hover { background: rgba(35,32,40,.12); }
nav a.here { background: var(--ink); color: var(--canvas); }

/* paint drips hanging off the header stripe */
.drips { display: flex; gap: 0; height: 0; overflow: visible; pointer-events: none; }
.drips span { display: block; width: 10px; border-radius: 0 0 6px 6px; margin-top: 0; }
.drips span:nth-child(1) { height: 16px; background: var(--coral);  margin-left: 12%; }
.drips span:nth-child(2) { height: 14px; background: var(--yellow); margin-left: 13%; }
.drips span:nth-child(3) { height: 22px; background: var(--teal);   margin-left: 17%; }
.drips span:nth-child(4) { height: 12px; background: var(--blue);   margin-left: 21%; }
.drips span:nth-child(5) { height: 13px; background: var(--purple); margin-left: 14%; }

main { padding: 46px 0 44px; }
h1 {
  font-family: var(--display); font-weight: 650;
  font-size: clamp(1.7em, 4.5vw, 2.2em); line-height: 1.15;
  margin: 0 0 8px; letter-spacing: .2px;
}
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.35em; margin: 1.9em 0 .5em; color: var(--teal);
}
h3 { font-family: var(--display); font-weight: 600; font-size: 1.06em; margin: 1.5em 0 .4em; color: var(--yellow); }
a { color: var(--blue); }
a:focus-visible, nav a:focus-visible, .cards a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.updated { color: var(--muted); font-size: 0.85em; margin-bottom: 20px; }
.lede { font-size: 1.05em; }

.statchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; padding: 0; list-style: none; }
.statchips li {
  background: var(--card); border: 2px solid var(--line); border-top-width: 5px; border-radius: 12px;
  padding: 8px 14px; text-align: center;
}
.statchips li.c1 { border-top-color: var(--coral); }
.statchips li.c2 { border-top-color: var(--yellow); }
.statchips li.c3 { border-top-color: var(--teal); }
.statchips li.c4 { border-top-color: var(--blue); }
.statchips strong { display: block; font-family: var(--display); font-weight: 650; font-size: 1.2em; }
.statchips span { font-size: .74em; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 16px 0; font-size: 0.93em; }
th, td { border: 1px solid var(--line); border-top: 0; border-left: 0; padding: 9px 13px; text-align: left; vertical-align: top; }
tr > *:first-child { border-left: 1px solid var(--line); }
thead th, tr:first-child > * { border-top: 1px solid var(--line); }
th { background: var(--card-2); font-family: var(--display); font-weight: 600; }
td { background: var(--card); }
table tr:first-child > *:first-child { border-top-left-radius: 10px; }
table tr:first-child > *:last-child { border-top-right-radius: 10px; }
table tr:last-child > *:first-child { border-bottom-left-radius: 10px; }
table tr:last-child > *:last-child { border-bottom-right-radius: 10px; }

.note, .tldr {
  background: var(--card); border: 2px solid var(--line); border-left: 5px solid var(--coral);
  padding: 13px 17px; border-radius: 12px; margin: 18px 0;
}
.tldr strong:first-child { color: var(--coral); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 13px; margin: 16px 0; padding: 0; list-style: none; }
.cards a {
  display: block; height: 100%;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  padding: 15px 17px; text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.cards a:hover { border-color: var(--teal); transform: translateY(-2px); }
.cards strong { font-family: var(--display); font-weight: 600; color: var(--teal); display: block; margin-bottom: 4px; }
.cards span { font-size: 0.85em; color: var(--muted); }

.cta { margin: 34px 0 0; }
.playbtn {
  display: inline-block; background: var(--coral); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 650; font-size: 1.05em;
  padding: 12px 26px; border-radius: 999px;
}
.playbtn:hover { filter: brightness(1.08); }

img.shot { max-width: 100%; border-radius: 14px; border: 2px solid var(--line); display: block; margin: 18px 0; }
ol li, ul li { margin: 6px 0; }
footer {
  border-top: 1px solid var(--line); background: #101218;
  color: var(--muted); font-size: 0.8em; padding: 20px 0 34px; margin-top: 44px;
}
footer p { margin: 6px 0; }
footer a { color: var(--muted); }
.yes { color: var(--green); font-weight: 600; }
.no { color: var(--red); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cards a { transition: none; }
  .cards a:hover { transform: none; }
}