/* pikugames.com: the kiss-cut sticker sheet. One backing sheet in a restricted ink set (sheet, ink, one amber);
   every game is a die-cut sticker in its own art and colour. Zero scripts; motion is CSS on one clock.
   An asset: URL inside url() becomes a hashed URL at build; the .g-<id> theme classes are appended by build.mjs. */

@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(/assets/fonts/titilliumweb-semibold.6032ed59.woff2) format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(/assets/fonts/titilliumweb-bold.fd4d4065.woff2) format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 900; font-style: normal; font-display: swap;
  src: url(/assets/fonts/titilliumweb-black.d81b5f7f.woff2) format("woff2"); }

:root {
  --sheet: #f6f6f3;            /* the backing paper, cool white */
  --sheet-deep: #e6e6e1;       /* the printed registration grid, one step below */
  --grid: var(--sheet-deep);
  --ink: #141216;
  --ink-2: #514c56;            /* secondary, tinted from the ink, never gray */
  --amber: #ffb852;            /* the one signal ink: labels that matter, never body text on the sheet */
  --amber-deep: #d98a1e;
  --cut: #ffffff;              /* the kiss-cut border */
  --field: var(--sheet);       /* a game landing overrides this with its own ground */
  --field-ink: var(--ink);
  --accent: var(--amber);
  --accent-deep: var(--amber-deep);
  --tilt: 0deg;
  --module: 24px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sans: "Titillium Web", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --clock: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow: 0 1px 2px rgba(20, 18, 22, 0.14), 0 10px 24px -6px rgba(20, 18, 22, 0.28);
  --shadow-up: 0 2px 4px rgba(20, 18, 22, 0.14), 0 22px 40px -10px rgba(20, 18, 22, 0.36);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--sheet); }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--module) var(--module);
  background-position: 0 0;
  color: var(--ink);
  font: 600 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: text-decoration-color var(--clock) var(--ease); }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: 8px; top: -60px; padding: 8px 14px; background: var(--ink); color: var(--sheet);
  border-radius: 999px; z-index: 10; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }

/* ---- the sheet's printed chrome: header and footer -------------------------------------------------------- */
.top, .foot, main > * { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--module);
  padding: calc(var(--module) * 0.75) 0; }
.brand { text-decoration: none; }
.wordmark { font-weight: 900; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wordmark span { color: var(--ink); box-shadow: inset 0 -0.34em 0 var(--amber); }
.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
.top nav a { text-decoration: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 999px; color: var(--ink-2);
  transition: color var(--clock) var(--ease), background-color var(--clock) var(--ease); }
.top nav a:hover { color: var(--ink); background: rgba(20, 18, 22, 0.06); }
.top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0;
  padding-bottom: 4px; }
.foot { margin-top: calc(var(--module) * 4); padding: calc(var(--module) * 1.5) 0 calc(var(--module) * 2);
  border-top: 2px solid var(--ink); font-size: 0.9375rem; color: var(--ink-2);
  display: grid; gap: 8px var(--module); grid-template-columns: 1fr auto; align-items: baseline; }
.foot-brand { grid-column: 1; }
.foot .wordmark { font-size: 1.125rem; }
.foot nav { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 4px; text-align: right; }
.foot a { text-decoration-thickness: 1.5px; }

/* ---- the hub ----------------------------------------------------------------------------------------------- */
.hero-studio { padding: calc(var(--module) * 1.5) 0 calc(var(--module) * 0.5); }
.hero-studio h1 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -0.015em; max-width: 40ch; }
.hero-studio h1 span { display: block; color: var(--ink-2); font-weight: 700; }

.card { display: grid; gap: var(--module); }
.card-body { display: grid; gap: 8px; }
.card h3 { font-size: 1.5rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .subtitle { font-weight: 700; color: var(--ink-2); }
.card .blurb { max-width: 48ch; }
.more { font-weight: 700; }

/* ---- the games carousel: a scroll-snap row of stickers. Swipe on touch; arrows and dots on desktop once
   assets/js/carousel.js runs (until then the arrows are invisible but hold their place, so nothing shifts, and the
   dots are plain links). The rail's padding leaves room for the tilt, the peel and the shadow. ----------------- */
.games { --rail-gap: calc(var(--module) * 1.5); --rail-pad: 14px; min-width: 0; }
.rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: var(--rail-gap); align-items: start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  padding: 4px var(--rail-pad) calc(var(--module) * 0.75); margin-inline: calc(var(--rail-pad) * -1);
  scrollbar-width: thin; scrollbar-color: var(--sheet-deep) transparent; }
@media (min-width: 600px) { .rail { grid-auto-columns: 70%; } }
@media (min-width: 900px) { .rail { grid-auto-columns: calc((100% - var(--rail-gap)) / 2); } }
@media (prefers-reduced-motion: no-preference) { .rail { scroll-behavior: smooth; } }
.rail:focus-visible { outline-offset: -3px; border-radius: 28px; }
.slide { scroll-snap-align: start; }
.slide .sticker img { aspect-ratio: 3 / 2; object-fit: cover; }
.rail-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px;
  min-height: 44px; }
.rail-btn { visibility: hidden; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--cut); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow); transition: transform var(--clock) var(--ease), background-color var(--clock) var(--ease),
  opacity var(--clock) var(--ease); }
.rail-ready .rail-btn { visibility: visible; }
.rail-btn:hover:not(:disabled) { background: var(--amber); transform: translateY(-2px); }
.rail-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.rail-dots { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.rail-dots a { display: grid; place-items: center; width: 28px; height: 44px; }
.rail-dots a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-2);
  transition: background-color var(--clock) var(--ease), transform var(--clock) var(--ease); }
.rail-dots a[aria-current="true"]::before, .rail-dots a.is-on::before { background: var(--ink);
  border-color: var(--ink); }
.rail-dots a[aria-current="true"]::before { background: var(--amber); transform: scale(1.25); }
@media (hover: none) and (pointer: coarse) { .rail-btn { display: none; } }

/* ---- the sticker: art inside a kiss-cut border, tilted, lettered. The one motion moment is the peel on hover or
   focus (a lift and a degree more tilt); nothing animates on load. --------------------------------------------- */
.sticker-link { display: block; text-decoration: none; color: inherit;
  padding: var(--module) 0 calc(var(--module) * 0.5); }
.sticker { display: block; position: relative; border-radius: 28px; border: 8px solid var(--cut);
  background: var(--cut);
  box-shadow: var(--shadow); overflow: hidden; transform: rotate(var(--tilt));
  transition: transform var(--clock) var(--ease), box-shadow var(--clock) var(--ease); }
.sticker img { width: 100%; border-radius: 20px; }
.sticker-link:hover .sticker, .sticker-link:focus-visible .sticker {
  transform: rotate(calc(var(--tilt) + 1.6deg)) translateY(-6px); box-shadow: var(--shadow-up); }
.sticker-link:focus-visible { outline-offset: 6px; }

 .lettering { display: block; position: absolute; left: 6%; bottom: 7%; margin: 0; color: #fff; font-weight: 900;
  line-height: 0.95;
  font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.03em; paint-order: stroke fill;
  -webkit-text-stroke: 0.09em var(--accent-deep); text-shadow: 0 3px 8px rgba(20, 18, 22, 0.28); }
/* the contour cut: the white kiss-cut line is baked into the asset's alpha (tools/art.py side), one soft
   drop-shadow lifts it off the sheet; the lettering sits on the sheet under it */
.sticker-contour { border: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none;
  padding: 12px 0 0; }
.sticker-contour img { border-radius: 0;
  filter: drop-shadow(0 10px 14px rgba(20, 18, 22, 0.3)); }
.sticker-contour .lettering { position: static; display: block; margin-top: -0.35em; color: var(--cut);
  -webkit-text-stroke: 0.09em var(--ink); text-shadow: 0 3px 8px rgba(20, 18, 22, 0.28); }
.sticker-link:hover .sticker-contour, .sticker-link:focus-visible .sticker-contour { box-shadow: none; }

/* ---- the printed labels: status and store pills ------------------------------------------------------------ */
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-2);
  flex: none; }
.status-live { color: var(--ink); }
.status-live::before { background: var(--amber); border-color: var(--amber); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--sheet);
  text-decoration: none; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 1px 0 rgba(20, 18, 22, 0.2);
  transition: transform var(--clock) var(--ease), background-color var(--clock) var(--ease); }
.store:hover, .store:focus-visible { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.stores-none { display: none; }

/* ---- the one-account note ---------------------------------------------------------------------------------- */
.account { margin-top: calc(var(--module) * 3); padding-top: calc(var(--module) * 1.5);
  border-top: 2px solid var(--ink); display: grid; gap: var(--module); }
@media (min-width: 900px) { .account { grid-template-columns: 1fr 1fr; } }
.account h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); max-width: 14ch; }
.account-copy { display: grid; gap: 12px; max-width: 58ch; }
.account-copy a { font-weight: 700; }
.mini-stickers { display: flex; gap: 12px; margin-top: 4px; }
.mini-stickers img { width: 64px; height: 64px; border: 4px solid var(--cut); border-radius: 18px;
  box-shadow: var(--shadow); background: var(--cut); }
.mini-stickers img:nth-child(1) { transform: rotate(-4deg); }
.mini-stickers img:nth-child(2) { transform: rotate(3deg); }
.mini-stickers img:nth-child(3) { transform: rotate(-2deg); }

/* ---- a game landing: the game's own colour owns the whole field ------------------------------------------- */
.page-game { background-color: var(--field); color: var(--field-ink); --grid: rgba(127, 127, 127, 0.16); }
.page-game .top nav a { color: var(--field-ink); opacity: 0.78; }
.page-game .top nav a:hover { opacity: 1; background: rgba(127, 127, 127, 0.14); }
.page-game .wordmark span { color: var(--field-ink); box-shadow: inset 0 -0.34em 0 var(--accent); }
.page-game .foot { border-top-color: var(--field-ink); color: var(--field-ink); }
.page-game .foot a, .page-game a { text-decoration-color: var(--accent); }
.page-game a:hover { text-decoration-color: var(--field-ink); }
.page-game :focus-visible { outline-color: var(--accent); }
.page-game ::selection { background: var(--accent); color: var(--field); }
.hero-game { display: grid; gap: calc(var(--module) * 1.5); padding: var(--module) 0 calc(var(--module) * 2);
  align-items: center; }
.hero-game > *, .rail > *, .card > *, .account > *, .shots li { min-width: 0; }
@media (min-width: 900px) { .hero-game { grid-template-columns: 7fr 5fr; gap: calc(var(--module) * 2); } }
.hero-copy { display: grid; gap: var(--module); }
.hero-copy h1 { font-size: clamp(2.75rem, 6vw, 5rem); }
.hero-copy .subtitle { font-size: 1.125rem; font-weight: 700; opacity: 0.85; margin-top: -8px; }
.hero-copy .tagline { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 900; line-height: 1.2;
  letter-spacing: -0.01em; max-width: 22ch; }
.page-game .store { background: var(--accent); color: var(--field); }
.page-game .store:hover, .page-game .store:focus-visible { background: var(--field-ink); color: var(--field); }
.g-pikuball.page-game .store { background: var(--accent-deep); color: #fff; }
.page-game .status { color: var(--field-ink); opacity: 0.85; }
.page-game .status::before { border-color: currentColor; }
.page-game .status-live::before { background: var(--accent); border-color: var(--accent); }
.page-game .stores-none { display: inline-flex; }
.platforms { font-weight: 700; opacity: 0.75; }
.about { display: grid; gap: 16px; max-width: 64ch; font-size: 1.125rem; padding: var(--module) 0; }
.facts dl { display: grid; gap: 0; margin: 0; border-top: 2px solid var(--field-ink); }
@media (min-width: 700px) { .facts dl { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.facts dl > div { padding: 14px 16px 16px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.35); }
.facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.facts dd { margin: 4px 0 0; font-weight: 700; font-size: 1.0625rem; }
.shots { padding: calc(var(--module) * 2) 0 var(--module); }
.shots ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--module) * 1.5); }
@media (min-width: 700px) { .shots ul { grid-template-columns: repeat(2, 1fr); } }
.shots li { border: 6px solid var(--cut); border-radius: 22px; background: var(--cut); box-shadow: var(--shadow);
  overflow: hidden; align-self: start; }
.shots figure { margin: 0; }
/* every arena card is the same 16:9 cut, so the two-column strip stays even whatever the source size */
.shots li img { border-radius: 16px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shots figcaption { padding: 8px 6px 4px; color: var(--ink); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; }
.shots li:nth-child(4n + 1) { transform: rotate(-1.2deg); }
.shots li:nth-child(4n + 2) { transform: rotate(0.9deg); }
.shots li:nth-child(4n + 3) { transform: rotate(0.7deg); }
.shots li:nth-child(4n + 4) { transform: rotate(-0.8deg); }
.game-foot { display: grid; gap: 12px; padding: var(--module) 0; max-width: 64ch; }
.game-foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 700; }
.testing { font-weight: 700; }
.openapp { opacity: 0.8; }

/* ---- the reading pages: policies, support, deletion, 404 -------------------------------------------------- */
.doc { max-width: 68ch; padding: var(--module) 0; font-size: 1.0625rem; line-height: 1.6; }
.doc-head { margin-bottom: calc(var(--module) * 1.5); }
.doc h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.updated { margin-top: 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); }
.doc .lede { font-size: 1.1875rem; }
.doc h2 { font-size: 1.5rem; margin: calc(var(--module) * 2) 0 12px; scroll-margin-top: var(--module); }
.doc h2 + p, .doc p + p, .doc ul + p, .doc p + ul { margin-top: 14px; }
.doc ul { padding-left: 1.2em; margin: 14px 0 0; }
.doc li + li { margin-top: 6px; }
.doc strong { font-weight: 900; }
.faq { margin: 0; }
.faq dt { font-weight: 900; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }
.notfound { padding: calc(var(--module) * 3) 0; }

/* ---- small screens and motion ------------------------------------------------------------------------------ */
@media (max-width: 599px) {
  body { font-size: 16px; }
  .top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot { grid-template-columns: 1fr; }
  .foot nav { grid-column: 1; grid-row: auto; text-align: left; }
  .sticker { border-width: 6px; border-radius: 22px; }
  .sticker img { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker, .store, a, .top nav a, .rail-btn, .rail-dots a::before { transition: none; }
  .sticker-link:hover .sticker, .sticker-link:focus-visible .sticker { transform: rotate(var(--tilt)); }
}

/* per-game themes, generated from src/games.mjs */
.g-pikuball{--accent:#1f8a63;--accent-deep:#166b4c;--field:#fdfaf4;--field-ink:#233240;--tilt:-1.6deg}
.g-pikuguns{--accent:#ffb852;--accent-deep:#c75a2e;--field:#130e0d;--field-ink:#fff7eb;--tilt:1.2deg}
.g-pikubots{--accent:#3ab8ff;--accent-deep:#ff7a2f;--field:#0a0e14;--field-ink:#ebf2f7;--tilt:-0.9deg}
.g-tala{--accent:#f2c46b;--accent-deep:#3d5fc4;--field:#0d1630;--field-ink:#f3eee4;--tilt:1.4deg}
.g-tinysoldiers{--accent:#c4252b;--accent-deep:#4b5320;--field:#fbf3e6;--field-ink:#2b2117;--tilt:-1.2deg}