/* ============================================================================
   taplevelpat, core design system.

   The idea: the site is a lit showcase. Each game brings one colour of its own,
   and that colour runs through its tile, its card, its glow and its dialog. The
   page around them stays quiet so the games are the brightest thing on screen.

   Light theme = daylight on a cool white shelf. Dark theme = the same shelf
   under coloured light. Both are written once with light-dark().
   ============================================================================ */

/* --- 1. Palette and tokens ------------------------------------------------ */

:root {
  color-scheme: light dark;

  --canvas: light-dark(#f7f6fb, #0a0912);
  --canvas-deep: light-dark(#eeecf7, #050409);
  --surface: light-dark(#ffffff, #16142a);
  --surface-raised: light-dark(#ffffff, #1e1b37);
  --surface-sunken: light-dark(#f1eff9, #110f20);

  --ink: light-dark(#141126, #f5f3ff);
  --ink-soft: light-dark(#4c4668, #b4adcf);
  --ink-faint: light-dark(#726c8e, #857ea6);
  --ink-invert: light-dark(#ffffff, #0a0912);

  --line: light-dark(rgba(28, 20, 60, 0.12), rgba(178, 158, 255, 0.16));
  --line-strong: light-dark(rgba(28, 20, 60, 0.26), rgba(178, 158, 255, 0.32));

  /* The three brand colours only ever appear together, as one gradient. */
  --brand-1: light-dark(#7c3aed, #9d6bff);
  --brand-2: light-dark(#ff2d78, #ff5c96);
  --brand-3: light-dark(#ff8f1c, #ffb04d);
  --brand: light-dark(#6d28d9, #b490ff);
  --brand-soft: light-dark(rgba(109, 40, 217, 0.1), rgba(180, 144, 255, 0.16));
  --brand-gradient: linear-gradient(100deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);

  --scrim: linear-gradient(to top, rgba(8, 6, 20, 0.72) 0%, rgba(8, 6, 20, 0.28) 38%, transparent 72%);
  --chip-ink: #ffffff;
  --chip-bg: rgba(10, 8, 22, 0.55);

  --shadow-sm: 0 1px 2px light-dark(rgba(30, 20, 70, 0.08), rgba(0, 0, 0, 0.5));
  --shadow-md: 0 14px 34px -16px light-dark(rgba(40, 22, 90, 0.38), rgba(0, 0, 0, 0.72));
  --shadow-lg: 0 34px 70px -30px light-dark(rgba(40, 22, 90, 0.45), rgba(0, 0, 0, 0.86));

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --font-display: "Segoe UI Variable Display", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1: clamp(1.1rem, 1.03rem + 0.32vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.68vw, 1.8rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 4.1rem);

  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);
  --page-max: 1280px;
  --header-height: 4.25rem;

  --ease-out: cubic-bezier(0.22, 0.68, 0.32, 1);
  --ease-pop: cubic-bezier(0.34, 1.3, 0.44, 1);

  /* Overridden per card, tile and dialog through CSP-safe data-game selectors below. */
  --accent: var(--brand);
  --tone-a: #9d6bff;
  --tone-b: #4c1d95;
}

:root[data-resolved-theme="light"] { color-scheme: light; }
:root[data-resolved-theme="dark"] { color-scheme: dark; }

/* The colour each game paints behind its screenshot. */
[data-tone="dawn"] { --tone-a: #ffcf6b; --tone-b: #f2622f; }
[data-tone="dusk"] { --tone-a: #d79bff; --tone-b: #6d28c8; }
[data-tone="night"] { --tone-a: #7f9bff; --tone-b: #201a5e; }
[data-tone="star"] { --tone-a: #8fc6ff; --tone-b: #2445a3; }
[data-tone="forest"] { --tone-a: #b6f06a; --tone-b: #1c8450; }
[data-tone="sea"] { --tone-a: #7ff0e2; --tone-b: #0c7b88; }
[data-tone="room"] { --tone-a: #ffd591; --tone-b: #9c5620; }
[data-tone="ember"] { --tone-a: #ffb08a; --tone-b: #c02b3d; }
[data-tone="deep"] { --tone-a: #9fb4ff; --tone-b: #282f9b; }

[data-game="first-fault"] { --accent: #ff5a4d; }
[data-game="morning-route"] { --accent: #ffa62b; }
[data-game="oddly-paired"] { --accent: #1fcfbc; }
[data-game="blinkshift"] { --accent: #ff9d3d; }
[data-game="one-second-garden"] { --accent: #7fd13b; }
[data-game="numberlight"] { --accent: #4d9cff; }
[data-game="wonderbid"] { --accent: #c161ff; }
[data-game="hushbeat"] { --accent: #4a68ff; }
[data-game="ringspark"] { --accent: #ff5c86; }
[data-game="microgarden"] { --accent: #1fc98a; }
[data-game="packed-alibi"] { --accent: #f0a324; }

/* --- 2. Base -------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--canvas);
  background-image:
    radial-gradient(72% 52% at 6% -8%, color-mix(in srgb, var(--brand-1) 26%, transparent), transparent 62%),
    radial-gradient(58% 46% at 98% 0%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 60%),
    radial-gradient(90% 40% at 50% 104%, color-mix(in srgb, var(--brand-3) 14%, transparent), transparent 66%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would propagate to the viewport and hide a real overflow bug. */
  overflow-x: clip;
}

img,
svg,
picture { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: inherit; }

/* The language switch hides the inactive translation with the hidden attribute. Any author
   rule that sets display, such as the grid on a bilingual block, silently outranks the
   browser default and shows both languages at once, so the attribute wins here explicitly. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--brand-2);
  color: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 90;
  padding: 0.6rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: #ffffff;
  background: var(--brand-1);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible { transform: translateY(0); }

.shell-width {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- 3. The mark and the wordmark ---------------------------------------- */

.studio-mark {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.studio-mark__from { stop-color: var(--brand-1); }
.studio-mark__mid { stop-color: var(--brand-2); }
.studio-mark__to { stop-color: var(--brand-3); }

.studio-mark__ripple { opacity: 0.78; transition: opacity 0.3s var(--ease-out); }
.studio-mark__ripple--outer { opacity: 0.42; }
.studio-mark__dot { transition: transform 0.35s var(--ease-pop); transform-origin: 16px 9px; }

.brand:hover .studio-mark__ripple { opacity: 1; }
.brand:hover .studio-mark__dot { transform: scale(1.2); }

.brand-mark {
  display: block;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
}

.brand-mark--small { width: 2rem; height: 2rem; }

/* The name is one word. It never wraps, never hyphenates, never splits. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .wordmark { color: var(--brand); }
}

/* --- 4. Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: light-dark(rgba(247, 246, 251, 0.82), rgba(10, 9, 18, 0.82));
  backdrop-filter: saturate(1.5) blur(16px);
  min-height: var(--header-height);
}

.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--brand-gradient);
  opacity: 0.55;
}

.site-header__inner {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}

.brand-type {
  display: grid;
  line-height: 1.15;
}

.brand-type .wordmark { font-size: 1.24rem; }

.brand-type small {
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline-start: auto;
}

.site-nav__link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--ink);
  background: var(--brand-soft);
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.85rem;
  bottom: 0.22rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
}

.site-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-control select {
  appearance: none;
  padding: 0.42rem 1.7rem 0.42rem 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.6rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.theme-control select:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.theme-control option {
  color: var(--ink);
  background: var(--surface);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.language-switch span {
  padding: 0.24rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-radius: var(--radius-pill);
  transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}

/* Solid, not the brand gradient: the gradient ends in amber, and two white letters sitting on
   that end fall below a readable contrast ratio. */
.language-switch__active {
  color: #ffffff;
  background-color: light-dark(#6d28d9, #7c3aed);
}

.language-switch:hover span:not(.language-switch__active) { color: var(--ink); }

@media (max-width: 900px) {
  :root { --header-height: 3.6rem; }

  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .site-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    gap: 0.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.1rem;
  }

  .site-nav::-webkit-scrollbar { display: none; }
  .site-controls { margin-inline-start: auto; }
  .brand-type small { display: none; }
}

@media (max-width: 380px) {
  .theme-control { display: none; }
}

/* --- 5. Buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.22s var(--ease-out), background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), filter 0.18s var(--ease-out);
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button--primary {
  color: #ffffff;
  background-image: var(--brand-gradient);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--brand-2) 85%, transparent);
}

.button--primary:hover {
  filter: saturate(1.1) brightness(1.04);
  box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--brand-2) 90%, transparent);
}

.button--secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.button--secondary:hover {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

.button--email {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 600;
}

.button--email:hover {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--brand-1) 85%, transparent);
}

/* --- 6. Section furniture ------------------------------------------------- */

main { display: block; }

.section {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6.5rem) var(--gutter);
}

.eyebrow,
.section-index {
  display: inline-block;
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .eyebrow,
  .section-index { color: var(--brand); }
}

.section-heading {
  display: grid;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.section-heading h2 { font-size: var(--step-3); }

.section-heading > p {
  color: var(--ink-soft);
  max-width: 46ch;
}

@media (min-width: 860px) {
  .section-heading {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* --- 7. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  /* The showcase glow deliberately spills past the tiles, and on a phone that spill is wider
     than the gutter. Clipping it here keeps the page from gaining a sideways scroll, while
     overflow-y stays visible because the paired value is clip rather than hidden. */
  overflow-x: clip;
}

@media (min-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* Grid items default to a min-content floor. Phone screenshots are 1080px wide, so without
   this the hero column would refuse to shrink below the image and push the page sideways. */
.hero > * { min-width: 0; }

.hero__copy { max-width: 34rem; }

.hero__title {
  font-size: var(--step-4);
  margin-bottom: 1.1rem;
}

.hero__title em {
  font-style: normal;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero__title em { color: var(--brand); }
}

.hero__lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 42ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.hero__facts li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.hero__facts li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-image: var(--brand-gradient);
}

/* The showcase: four games on a shelf, each lit by its own colour. */
.showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 1.8vw, 1.15rem);
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  padding-bottom: clamp(1rem, 3vw, 2.25rem);
}

/* The coloured light the shelf sits in. A pseudo-element, so re-rendering the tiles from the
   catalogue can never wipe it out. */
.showcase::before {
  content: "";
  position: absolute;
  inset: -16% -12% -6%;
  z-index: -1;
  background:
    radial-gradient(46% 42% at 24% 26%, color-mix(in srgb, var(--brand-1) 55%, transparent), transparent 70%),
    radial-gradient(46% 42% at 78% 34%, color-mix(in srgb, var(--brand-2) 48%, transparent), transparent 70%),
    radial-gradient(52% 40% at 52% 88%, color-mix(in srgb, var(--brand-3) 42%, transparent), transparent 72%);
  filter: blur(34px);
  opacity: light-dark(0.55, 0.5);
  pointer-events: none;
}

.showcase__tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-image: linear-gradient(165deg, var(--tone-a), var(--tone-b));
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: tile-float 5.5s var(--ease-out) infinite alternate;
  animation-delay: calc(var(--tile-index, 0) * 0.55s);
}

.showcase__tile:nth-child(1) { --tile-index: 0; }
.showcase__tile:nth-child(2) { --tile-index: 1; }
.showcase__tile:nth-child(3) { --tile-index: 2; }
.showcase__tile:nth-child(4) { --tile-index: 3; }

.noscript-message { padding-block: 1rem; }

/* The second column sits lower, so the four tiles read as a shelf rather than a table. */
.showcase__tile:nth-child(2n) { transform: translateY(clamp(1rem, 4vw, 2.4rem)); }

@keyframes tile-float {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}

.showcase__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s var(--ease-out);
}

.showcase__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}

.showcase__caption {
  position: absolute;
  inset-inline: 0.7rem;
  bottom: 0.65rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(6, 4, 16, 0.7);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.showcase:hover .showcase__tile img { transform: scale(1.04); }

/* --- 8. Filters ----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.filter-chip {
  padding: 0.52rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.filter-chip:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  color: #ffffff;
  background-color: transparent;
  background-image: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand-2) 90%, transparent);
}

.filter-chip__count {
  margin-inline-start: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  opacity: 0.65;
}

/* --- 9. The game showcase ------------------------------------------------- */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1.1rem, 2.6vw, 1.9rem);
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

/* The colour strip is the card's signature: the grid reads as a row of lit shelves. */
.game-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 4;
  height: 4px;
  background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 15%, transparent));
}

.game-card:hover,
.game-card:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: var(--shadow-lg), 0 22px 54px -26px color-mix(in srgb, var(--accent) 80%, transparent);
}

.game-card__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}

.game-card__shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-image: linear-gradient(165deg, var(--tone-a), var(--tone-b));
}

.game-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out);
}

.game-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}

.game-card:hover .game-card__shot img { transform: scale(1.06); }

.game-card__number {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.22rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--chip-ink);
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xs);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--chip-ink);
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.status-pill i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.game-card__shot .status-pill {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  right: 0.7rem;
}

.game-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  padding: 1rem 1.15rem 1.2rem;
}

.game-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.game-card__meta span:not(:last-child)::after {
  content: " ·";
  color: var(--line-strong);
}

.game-card h3 {
  font-size: var(--step-1);
  line-height: 1.18;
}

.game-card__strap {
  font-size: var(--step--1);
  color: var(--ink-soft);
  flex: 1;
}

.game-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
}

.game-card__more b {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #ffffff;
  background: var(--accent);
  border-radius: 50%;
  transition: transform 0.24s var(--ease-pop);
}

.game-card:hover .game-card__more b { transform: translateX(4px); }

/* --- 10. Studio and contact ----------------------------------------------- */

.about {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.about__intro h2 { font-size: var(--step-3); margin-bottom: 0.9rem; }
.about__intro p { color: var(--ink-soft); max-width: 42ch; }

.about__points {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.about__points article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1.15rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.24s var(--ease-out), transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
}

.about__points article:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.about__points span {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .about__points span { color: var(--brand); }
}

.about__points h3 { font-size: var(--step-1); }
.about__points p { font-size: var(--step--1); color: var(--ink-soft); }

.contact {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.9rem, 4vw, 3.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background-image: var(--brand-gradient);
}

@media (min-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

.contact h2 { font-size: var(--step-2); margin-bottom: 0.7rem; }
.contact p { color: var(--ink-soft); }

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-start;
}

@media (min-width: 860px) {
  .contact__actions { justify-content: flex-end; }
}

/* --- 11. Footer ----------------------------------------------------------- */

.site-footer {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  background: light-dark(rgba(255, 255, 255, 0.62), rgba(5, 4, 12, 0.55));
}

.site-footer__inner {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--gutter);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 2.5rem;
  }

  .site-footer__legal { grid-column: 1 / -1; }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.site-footer__brand .wordmark {
  display: block;
  font-size: 1.1rem;
}

.site-footer__brand span {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
}

@media (min-width: 900px) {
  .site-footer__nav { justify-content: flex-end; }
}

.site-footer__link {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.site-footer__link:hover {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.site-footer__legal {
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

/* --- 12. Dialogs ---------------------------------------------------------- */

dialog {
  color: var(--ink);
  border: 0;
  padding: 0;
}

dialog::backdrop {
  background: light-dark(rgba(20, 14, 44, 0.5), rgba(3, 2, 10, 0.74));
  backdrop-filter: blur(5px);
}

.game-dialog {
  width: min(100%, 62rem);
  max-width: 100%;
  max-height: min(92svh, 52rem);
  margin: auto;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 90px -40px color-mix(in srgb, var(--accent) 80%, transparent);
}

.game-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
  .game-dialog[open] { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
}

.game-dialog__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 5;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--chip-ink);
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out);
}

.game-dialog__close:hover { background: rgba(10, 8, 22, 0.85); }

.game-dialog__media {
  position: relative;
  background-image: linear-gradient(165deg, var(--tone-a), var(--tone-b));
  min-height: 14rem;
}

.game-dialog__media-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.game-dialog__media-trigger img {
  width: 100%;
  height: 100%;
  max-height: min(70svh, 40rem);
  object-fit: cover;
  object-position: top center;
}

/* On a phone the dialog stacks, so the screenshot takes the top third and the text starts
   without a scroll. */
@media (max-width: 819px) {
  .game-dialog__media-trigger img { max-height: 40svh; }
  .game-dialog__media { min-height: 0; }
}

.game-dialog__expand {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--chip-ink);
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
}

.game-dialog__media-label {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.24rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xs);
}

.game-dialog__copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
}

.game-dialog__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.game-dialog__meta .status-pill {
  color: var(--ink);
  background: var(--surface-sunken);
}

.game-dialog__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* The raw accent is tuned for glows, so text mixes it toward the ink to stay readable. */
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}

.game-dialog h2 { font-size: var(--step-2); }

.game-dialog__description { color: var(--ink-soft); }

.game-dialog dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-block: 1px solid var(--line);
}

.game-dialog dt {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}

.game-dialog dd { margin: 0; font-size: var(--step--1); font-weight: 600; }

.dialog-disclosure__label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}

.dialog-disclosure ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  list-style: none;
}

.dialog-disclosure li {
  padding: 0.28rem 0.68rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.dialog-disclosure li[data-disclosure="none"] { color: light-dark(#1c7a4d, #6fe0a6); }
.dialog-disclosure li[data-disclosure="children"] { color: light-dark(#2554b0, #93bcff); }

.store-row {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.store-button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  text-align: start;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.store-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px);
}

.store-button:disabled { cursor: not-allowed; opacity: 0.62; }

.store-button__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
  color: #ffffff;
  background-image: var(--brand-gradient);
  border-radius: var(--radius-sm);
}

.store-button span span,
.store-button > span:nth-child(2) { display: grid; line-height: 1.2; }

.store-button small { font-size: 0.62rem; color: var(--ink-faint); }
.store-button strong { font-size: var(--step--1); }

.store-button b {
  margin-inline-start: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.dialog-support {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}

.dialog-support:hover { color: var(--brand); }

.image-viewer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: light-dark(rgba(247, 246, 251, 0.97), rgba(5, 4, 12, 0.97));
  display: none;
}

.image-viewer[open] {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.image-viewer figure {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  max-height: 100%;
}

.image-viewer img {
  max-width: 100%;
  max-height: 80svh;
  width: auto;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.image-viewer figcaption {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

.image-viewer__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}

/* --- 13. Motion and print ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header,
  .site-footer__nav,
  .filters,
  .hero__actions { display: none; }

  body { background: #fff; color: #000; }
  .wordmark { color: #000; }
}