/* Toyling Games — site styles. Flat brand colours, square pixels, no gradients or shadows. */
@font-face {
  font-family: "Toyling Caps";
  src: url("/assets/fonts/ToylingCaps-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --blue: #1675F8;
  --orange: #FF703D;
  --yellow: #FFD43B;
  --snow: #FFFFFF;
  --navy: #10233F;
  --paper: #FFF6E5;

  --sky: var(--paper);
  --ink: var(--navy);
  --surface: var(--paper);
  --surface-2: var(--snow);
  --line: var(--navy);

  --font-display: "Pixelify Sans", "Silkscreen", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-caps: "Toyling Caps", "Silkscreen", ui-monospace, monospace;

  --s: 4;      /* hero cell scale (integer, set by JS) */
  --ls: 4;     /* hero logo cell scale (integer, set by JS) */
  --rs: 3;     /* footer ridge cell scale */
  --header-h: 68px;
  --radius: 0;
}

html[data-theme="night"] {
  --sky: var(--navy);
  --ink: var(--snow);
  --surface: var(--navy);
  --surface-2: #10233F;
  --line: var(--snow);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--yellow); color: var(--navy); font-weight: 800; border: 2px solid var(--navy);
}
.skip-link:focus { top: 12px; }

html[data-theme="day"] .night-only, html:not([data-theme]) .night-only { display: none !important; }
html[data-theme="night"] .day-only { display: none !important; }

.pixel, .brand img, .hero-logo, .polaroid img, .intro-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.polaroid img { image-rendering: auto; }

.container { width: min(1120px, 100% - 48px); margin-inline: auto; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h); padding: 0 24px;
  background: var(--sky);
  border-bottom: 2px solid var(--line);
}
.brand { display: inline-flex; line-height: 0; }
.brand img { width: 98px; height: 36px; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  font: 600 1.05rem/1 var(--font-display); text-decoration: none; padding: 10px 12px;
}
.site-nav a:hover { color: var(--blue); }
html[data-theme="night"] .site-nav a:hover { color: var(--yellow); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 6px;
  min-height: 44px; padding: 0 14px;
  font: 600 1rem/1 var(--font-display); color: var(--navy);
  background: var(--yellow); border: 2px solid var(--navy); cursor: pointer;
}
.theme-toggle:hover { background: var(--orange); }
.theme-icon {
  width: 12px; height: 12px; background: var(--navy);
  /* pixel moon / sun: a 3x3 plus, the same shape as the D-pad */
  clip-path: polygon(33.3% 0, 66.6% 0, 66.6% 33.3%, 100% 33.3%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.3% 100%, 33.3% 66.6%, 0 66.6%, 0 33.3%, 33.3% 33.3%);
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 20px; border: 2px solid var(--line); background: transparent; color: var(--ink);
  font: 700 1.1rem/1 var(--font-display); text-decoration: none; cursor: pointer;
  transition: background-color 120ms steps(2), color 120ms steps(2), transform 120ms steps(2);
}
.btn:hover { background: var(--ink); color: var(--surface); }
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--yellow); color: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: var(--orange); color: var(--navy); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 0.95rem; }
.actions, .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

/* ------------------------------------------------------------------ hero (parallax) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: max(600px, calc(100svh - var(--header-h)));
  background: var(--sky);
}
.layer {
  position: absolute; left: -24px; right: -24px; bottom: -4px;
  height: calc(180px * var(--s));
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: calc(480px * var(--s)) calc(180px * var(--s));
  image-rendering: pixelated; image-rendering: crisp-edges;
  pointer-events: none; will-change: transform;
}
.layer-sky  { background-image: url("/assets/brand/hero/day-sky-stars@1x.png"); z-index: 0; }
.layer-far  { background-image: url("/assets/brand/hero/day-range-far@1x.png"); z-index: 1; }
.layer-near { background-image: url("/assets/brand/hero/day-range-near@1x.png"); z-index: 3; }
.layer-snow { background-image: url("/assets/brand/hero/day-snowfield@1x.png"); z-index: 4; }
html[data-theme="night"] .layer-sky  { background-image: url("/assets/brand/hero/night-sky-stars@1x.png"); }
html[data-theme="night"] .layer-far  { background-image: url("/assets/brand/hero/night-range-far@1x.png"); }
html[data-theme="night"] .layer-near { background-image: url("/assets/brand/hero/night-range-near@1x.png"); }
html[data-theme="night"] .layer-snow { background-image: url("/assets/brand/hero/night-snowfield@1x.png"); }
/* with JS the night sky is redrawn from the kit's star list so no star ever sits behind the hero copy */
html.js[data-theme="night"] .layer-sky { background-image: none; }
/* narrow screens: shift the scenery so the tall Ida peak stays in view beside the logo */
@media (max-width: 700px) {
  .layer { background-position: calc(50% + 48px * var(--s)) bottom; }
}

.hero-content {
  position: absolute; z-index: 2; left: 0; right: 0; top: clamp(16px, 5vh, 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 20px; will-change: transform;
}
.hero-logo { width: calc(55px * var(--ls)); height: calc(68px * var(--ls)); }
.hero-tagline {
  margin: 18px 0 0; max-width: 34ch;
  font: 600 clamp(1.15rem, 2.4vw, 1.5rem)/1.35 var(--font-display);
}
.hero-actions { justify-content: center; margin-top: 18px; }

/* ------------------------------------------------------------------ sections */
.section { position: relative; padding: clamp(56px, 9vw, 112px) 0; }
.eyebrow {
  /* Toyling Caps is drawn on a 10-unit grid: font-size 20px = 2 px per cell (crisp) */
  margin: 0 0 12px; font: 400 20px/1 var(--font-caps); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--blue);
}
html[data-theme="night"] .eyebrow { color: var(--yellow); }
h2 { margin: 0 0 18px; font: 700 clamp(2rem, 4.6vw, 3.25rem)/1.1 var(--font-display); }
.lede { font-size: 1.15rem; max-width: 52ch; }

.games { background: var(--snow); color: var(--navy); }
.games .eyebrow { color: var(--blue); }
html[data-theme="night"] .games { background: #FFFFFF; }
.games .btn { border-color: var(--navy); color: var(--navy); }
.games .btn:hover { background: var(--navy); color: var(--snow); }
.games .btn-primary:hover { background: var(--orange); color: var(--navy); }
.games-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 28px; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; background: var(--blue);
  clip-path: polygon(33.3% 0, 66.6% 0, 66.6% 33.3%, 100% 33.3%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.3% 100%, 33.3% 66.6%, 0 66.6%, 0 33.3%, 33.3% 33.3%);
}
.facts strong { font-family: var(--font-display); font-size: 1.15em; }

.polaroids { position: relative; min-height: 520px; }
.polaroid {
  position: absolute; margin: 0; width: min(64%, 360px); background: var(--snow);
  border: 2px solid var(--navy); will-change: transform;
}
.polaroid img { display: block; width: 100%; height: auto; }
.tilt-a { left: 0; top: 0; transform: rotate(-3deg); z-index: 2; }
.tilt-b { right: 0; top: 96px; transform: rotate(4deg); z-index: 1; }

.studio { background: var(--paper); color: var(--navy); overflow: hidden; }
html[data-theme="night"] .studio { background: var(--navy); color: var(--snow); }
.studio-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.intro-player { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.intro-canvas {
  width: calc(57px * 4); height: calc(70px * 4); cursor: pointer;
  padding: 24px; box-sizing: content-box; background: var(--paper); border: 2px solid var(--navy);
}
html[data-theme="night"] .intro-canvas { background: var(--navy); border-color: var(--snow); }
.sparkle-field { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute; width: 18px; height: 18px; background: var(--yellow); image-rendering: pixelated;
  clip-path: polygon(33.3% 0, 66.6% 0, 66.6% 33.3%, 100% 33.3%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.3% 100%, 33.3% 66.6%, 0 66.6%, 0 33.3%, 33.3% 33.3%);
  will-change: transform;
}
.s1 { left: 2.5%; top: 12%; }
.s2 { right: 3%; top: 9%; background: var(--orange); }
.s3 { left: 3.5%; bottom: 12%; background: var(--blue); }
.s4 { right: 2.5%; bottom: 16%; }
@media (max-width: 1240px) { .sparkle-field { display: none; } }

.press { background: var(--yellow); color: var(--navy); }
.press .eyebrow { color: var(--navy); }
.press .btn { border-color: var(--navy); color: var(--navy); }
.press .btn:hover { background: var(--navy); color: var(--yellow); }
.press .btn-primary { background: var(--snow); }
.press-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.fact-sheet { margin: 0; border: 2px solid var(--navy); background: var(--snow); }
.fact-sheet div { display: grid; grid-template-columns: 11.5rem 1fr; gap: 12px; padding: 14px 18px; border-top: 2px solid var(--navy); }
.fact-sheet div:first-child { border-top: 0; }
.fact-sheet dt { font: 400 20px/1.35 var(--font-caps); letter-spacing: 0.05em; text-transform: uppercase; padding-top: 2px; }
.fact-sheet dd { margin: 0; font-weight: 700; }

/* ------------------------------------------------------------------ footer */
.site-footer { position: relative; background: var(--navy); color: var(--snow); }
.footer-ridge {
  position: absolute; left: 0; right: 0; top: calc(-30px * var(--rs)); height: calc(30px * var(--rs));
  background: url("/assets/brand/motif-range-strip@1x.png") left bottom / calc(160px * var(--rs)) calc(30px * var(--rs)) repeat-x;
  image-rendering: pixelated; image-rendering: crisp-edges; will-change: background-position;
}
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; padding: 48px 0 40px; }
.footer-inner img { width: 110px; height: 136px; image-rendering: pixelated; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer nav a { font: 600 1.05rem/1 var(--font-display); text-decoration: none; }
.site-footer nav a:hover { color: var(--yellow); }
.copyright { margin: 0; font-size: 0.95rem; }

/* ------------------------------------------------------------------ game page */
.game-hero { position: relative; background: var(--paper); color: var(--navy); padding: clamp(40px, 7vw, 88px) 0; overflow: hidden; }
html[data-theme="night"] .game-hero { background: var(--navy); color: var(--snow); }
.game-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.game-title { margin: 0 0 14px; font: 700 clamp(2.6rem, 7vw, 4.8rem)/1 var(--font-display); }
.made-by { display: block; width: calc(99px * 2); height: auto; margin-top: 28px; image-rendering: pixelated; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.gallery figure { margin: 0; background: var(--snow); border: 2px solid var(--navy); padding: 10px 10px 14px; color: var(--navy); align-self: start; }
.gallery figure:nth-child(3n+1) { transform: rotate(-1.5deg); }
.gallery figure:nth-child(3n+2) { transform: rotate(1deg); }
.gallery figure:nth-child(3n) { transform: rotate(-0.5deg); }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { margin-top: 10px; font-size: 0.98rem; line-height: 1.45; }
.gallery .wide { grid-column: span 2; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px; list-style: none; padding: 0; margin: 0; }
.feature-list li { border-top: 2px solid var(--line); padding-top: 14px; }
.feature-list h3 { margin: 0 0 6px; font: 700 1.3rem/1.2 var(--font-display); }
.feature-list p { margin: 0; }
.small-print { font-size: 0.95rem; max-width: 70ch; opacity: 1; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 880px) {
  .games-grid, .studio-grid, .press-grid, .game-hero-grid { grid-template-columns: 1fr; }
  .polaroids { min-height: 440px; max-width: 520px; }
  .footer-inner { grid-template-columns: 1fr; align-items: start; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .wide { grid-column: span 2; }
  .feature-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-header { padding: 0 14px; }
  .site-nav a { padding: 10px 6px; font-size: 0.98rem; }
  .theme-label { display: none; }
  .theme-toggle { padding: 0 12px; }
  .polaroids { min-height: 360px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .wide { grid-column: auto; }
  .fact-sheet div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .site-nav a[href="#studio"], .site-nav a[href="/#studio"] { display: none; }
}