/* ============================================================
   Maker of Games — shared base
   Tokens, reset, and the components every page uses:
   skip link, back bar, footer, flip cards, motion prefs.
   ============================================================ */

@font-face {
  font-family: 'American Captain';
  src: url('assets/AmericanCaptain.woff2') format('woff2'),
       url('assets/AmericanCaptain.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink:   #0a0a0b;
  --paper: #f5f5f2;
  --muted: #b9b9b4;
  --dim:   #7c7c78;
  --hair:  rgba(245, 245, 242, .16);

  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --slab: 'Roboto Slab', Georgia, serif;
  --condensed: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --round: 'Nunito', system-ui, sans-serif;
  --display: 'Poppins', system-ui, sans-serif;
  --serif: 'Spectral', Georgia, serif;
  --captain: 'American Captain', 'Space Grotesk', sans-serif;

  --gutter: clamp(22px, 6vw, 56px);
  --wide: 1080px;
}

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

html { scroll-behavior: smooth; }

/* Art and decorative elements deliberately hang past the edge; `clip`
   contains them without making the root a scroll container. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
picture { display: block; }
picture > img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .78; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  font: 700 13px/1 var(--sans);
  clip-path: inset(50%);
}
.skip-link:focus { clip-path: none; }

/* ── Shared animations ──────────────────────────────────────── */

@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes bob    { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
@keyframes drift  { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-12px) rotate(8deg) } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) rotate(0deg) } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) } }
/* Opens at 1.25×, not 1.6× — a bigger stamp overshoots the viewport on a
   320px screen while it lands. */
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-3deg) scale(1.25) } 70% { opacity: 1; transform: rotate(-3deg) scale(.96) } 100% { opacity: 1; transform: rotate(-3deg) scale(1) } }

/* ── Flip cards (shared by every page that fans a deck) ─────── */

.flip {
  margin: 0; padding: 0; border: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
.flip__inner {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .7, .3, 1);
}
.flip__front { display: block; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__back {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* A fanned hand of three cards — same geometry on home and the
   Tatorship page. */
.hand { position: relative; width: min(370px, 100%, 80vw); aspect-ratio: 1 / 1; }
.hand__card { position: absolute; width: 54%; }
.hand__card--0 { left: 0;   top: 8%;  z-index: 1; --tilt: -9deg; }
.hand__card--1 { left: 23%; top: 0;   z-index: 2; --tilt: 1deg;  }
.hand__card--2 { left: 46%; top: 10%; z-index: 3; --tilt: 10deg; }
.hand__card .flip__inner { transform: rotate(var(--tilt)); }
.hand__card[aria-pressed="true"] .flip__inner { transform: rotate(var(--tilt)) rotateY(180deg); }
.hand__card img { border-radius: 10px; }
.hand__card .flip__front { filter: drop-shadow(-8px 10px 0 rgba(28, 23, 18, .55)); }
.hand__hint { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .16em; }

/* ── Back bar (subpage nav) ─────────────────────────────────── */

.backbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 16px clamp(20px, 5vw, 48px);
}
.backbar__home {
  display: flex; align-items: center; gap: 10px;
  font: 400 12px/1 var(--mono); letter-spacing: .14em;
  padding: 6px 0;
}
.backbar__home img { width: 30px; }
.backbar__links { display: flex; flex-wrap: wrap; gap: 18px; font: 400 11px/1 var(--mono); letter-spacing: .12em; }
.backbar__links a { padding: 8px 2px; }

/* ── Footer (identical on every page) ───────────────────────── */

.footer {
  background: var(--ink);
  color: var(--muted);
  padding: 30px var(--gutter);
  border-top: 1px solid rgba(245, 245, 242, .14);
}
.footer__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
}
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--paper); padding: 6px 0; }
.footer__brand img { width: 32px; }
.footer__brand span { font: 400 11px/1 var(--mono); letter-spacing: .16em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; font: 400 11px/1 var(--mono); letter-spacing: .12em; }
.footer__links a { color: var(--muted); padding: 8px 2px; }

/* ── Video facade (YouTube, loaded only on click) ───────────── */

.facade {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.facade img { display: block; width: 100%; }
.facade__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.facade__play span {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11, 15, 38, .82);
  color: #f0b95c;
  font: 400 12px/1 var(--mono);
  letter-spacing: .14em;
  padding: 14px 20px;
  border-radius: 999px;
}
/* The facade is replaced by this on click; sizing itself means it works in
   any of the three containers without extra positioning rules. */
.yt-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}