/* Kinetic Workshop design system (design/kinetic_workshop/DESIGN.md) */
:root {
  --surface: #fbf9f3;
  --surface-lowest: #ffffff;
  --surface-low: #f5f3ee;
  --surface-container: #f0eee8;
  --surface-high: #eae8e2;
  --surface-highest: #e4e2dd;
  --tray: #f7f4eb;
  --ink: #1b1c19;
  --ink-variant: #3d4948;
  --outline: #6c7a78;
  --outline-variant: #bcc9c7;

  --primary: #006a65;
  --primary-container: #4ecdc4;
  --on-primary-container: #00544f;
  --primary-fixed: #7cf6ec;
  --secondary: #3a684d;
  --secondary-container: #b9ebc9;
  --on-secondary-container: #3e6c51;
  --mat: #2b593f;
  --mat-deep: #1f4530;
  --tertiary: #ae2f34;
  --tertiary-container: #ffa19e;
  --tertiary-fixed: #ffdad8;
  --coral: #ff6b6b;
  --sun: #ffd166;
  --lilac: #a288e3;
  --inverse: #30312d;
  --inverse-on: #f2f1eb;

  /* per-game accent, overridden inline on game pages */
  --game: var(--primary-container);
  --game-accent: var(--coral);

  --font-display: "Epilogue", "Arial Black", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 0.5rem;
  --r: 1rem;
  --r-md: 1.5rem;
  --r-lg: 2rem;
  --r-xl: 3rem;

  --gutter: 1.5rem;
  --margin: 2.5rem;
  --shelf: 0 4px 0 0 var(--mat-deep);
  --rim: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/22px var(--font-body);
  overflow-x: hidden;
}
body::before {
  /* cutting-mat dot grid */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(58, 104, 77, 0.28) 1px, transparent 1px);
  background-size: 24px 24px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--primary-container); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; flex: none; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 800px; }

/* ---------- type ---------- */
.display { font-size: 56px; line-height: 64px; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }
.headline-lg { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.headline-md { font-size: 26px; line-height: 32px; font-weight: 700; }
.headline-sm { font-size: 20px; line-height: 26px; font-weight: 700; }
.body-lg { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.body-sm { font-size: 13px; line-height: 18px; }
.label { font: 700 12px/16px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.label-sm { font: 700 10px/14px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--ink-variant); }
.wavy { color: var(--primary); text-decoration: underline wavy var(--primary-container); text-decoration-thickness: 4px; text-underline-offset: 8px; }
@media (max-width: 767px) {
  :root { --gutter: 1rem; --margin: 1.5rem; }
  .display { font-size: 38px; line-height: 44px; letter-spacing: -0.02em; }
  .headline-lg { font-size: 28px; line-height: 34px; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(240, 238, 232, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 0 var(--surface-highest);
}
.site-header__bar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--primary-container); color: var(--on-primary-container);
  display: grid; place-items: center; box-shadow: 0 3px 0 0 var(--ink);
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font: 800 18px/1.35 var(--font-display); padding-top: 0.1em; color: var(--primary); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__sub { color: var(--secondary); }
.pillnav { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface-lowest); border-radius: var(--r-lg); box-shadow: 0 3px 0 0 var(--surface-high); }
.pillnav a { padding: 0.4rem 1rem; border-radius: var(--r-lg); text-decoration: none; font: 700 14px/18px var(--font-body); letter-spacing: 0.03em; color: var(--ink-variant); transition: background 0.15s; }
.pillnav a:hover { background: var(--surface-high); color: var(--ink); }
.pillnav a[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); box-shadow: 0 3px 0 0 var(--on-primary-container); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 899px) { .pillnav { display: none; } }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--primary-container);
  --btn-fg: var(--mat-deep);
  --btn-shelf: var(--mat-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.4rem;
  border: 2px solid var(--btn-shelf); border-radius: 9999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 15px/18px var(--font-body); letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 0 var(--btn-shelf), var(--rim);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--btn-shelf); }
.btn--coral { --btn-bg: var(--coral); --btn-fg: #fffdf7; --btn-shelf: #8c1520; }
.btn--dark { --btn-bg: var(--inverse); --btn-fg: var(--inverse-on); --btn-shelf: #000; }
.btn--mat { --btn-bg: var(--mat); --btn-fg: #fffdf7; --btn-shelf: #0f2a1b; }
.btn--light { --btn-bg: var(--surface-lowest); --btn-fg: var(--ink); --btn-shelf: var(--ink); }
.btn--ghost { background: transparent; border-style: dashed; border-color: var(--mat); box-shadow: none; color: var(--mat); }
.btn--ghost:hover { border-style: solid; filter: none; }
.btn--sm { white-space: nowrap; min-height: 36px; padding: 0.35rem 0.9rem; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 3px 0 0 var(--btn-shelf), var(--rim); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn .icon { font-size: 20px; }

/* store buttons */
.store-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.store-btn { justify-content: flex-start; border-radius: var(--r-md); padding: 0.85rem 1.2rem; min-height: 64px; box-shadow: 0 6px 0 0 var(--btn-shelf), var(--rim); }
.store-btn:active { transform: translateY(6px); }
.store-btn .icon { font-size: 28px; }
.store-btn__text { display: flex; flex-direction: column; text-align: left; }
.store-btn__title { font: 700 18px/22px var(--font-display); }
.store-btn__sub { font: 700 10px/14px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.store-btn--soon { --btn-bg: var(--surface-high); --btn-fg: var(--ink-variant); --btn-shelf: var(--outline-variant); border-style: dashed; cursor: default; }
.store-btn--soon:active { transform: none; box-shadow: 0 6px 0 0 var(--btn-shelf), var(--rim); }
.badge-img { height: 56px; width: auto; }
.coming-soon {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.2rem;
  border: 2px dashed var(--mat); border-radius: var(--r-md); background: var(--tray); color: var(--mat);
}

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.7rem; border-radius: 9999px;
  border: 1.5px solid var(--mat-deep);
  background: var(--surface-lowest); color: var(--mat-deep);
  font: 700 10px/14px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.chip .icon { font-size: 14px; }
.chip--live { background: var(--secondary-container); }
.chip--web { background: var(--primary-container); }
.chip--dev { background: var(--sun); }
.chip--coral { background: var(--tertiary-fixed); color: var(--tertiary); border-color: var(--tertiary); }
.chip--plain { border-color: transparent; background: var(--surface-high); color: var(--ink-variant); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot--pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- surfaces ---------- */
.board {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface-container);
  box-shadow: 0 8px 0 0 var(--ink-variant);
  overflow: hidden;
}
.board::before, .board::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(36px); }
.board::before { width: 260px; height: 260px; right: -70px; top: -70px; background: var(--primary-fixed); opacity: 0.45; }
.board::after { width: 220px; height: 220px; left: -60px; bottom: -60px; background: var(--tertiary-container); opacity: 0.35; }
.board > * { position: relative; z-index: 1; }
.tile {
  background: var(--surface-lowest);
  border: 2px solid var(--mat);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 0 var(--mat-deep), var(--rim);
}
.section { margin: calc(var(--margin) * 1.6) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }

/* ---------- hub ---------- */
.ribbon { display: flex; justify-content: center; margin: 1.25rem 0 1.5rem; }
.ribbon__inner {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; border-radius: 9999px;
  background: var(--tertiary-fixed); color: #410006; box-shadow: 0 3px 0 0 var(--tertiary);
  transform: rotate(-1deg); text-decoration: none; transition: transform 0.2s; max-width: 100%;
}
.ribbon__inner:hover { transform: rotate(0); }
.ribbon__inner span:not(.icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero { padding: var(--margin); }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 1.1rem; }
.hero__copy .body-lg { max-width: 34rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.polaroid {
  background: var(--surface-lowest); padding: 0.75rem 0.75rem 0.6rem; border-radius: var(--r-md);
  box-shadow: 0 8px 0 0 var(--ink-variant), 0 14px 24px -8px rgba(31, 69, 48, 0.3);
  transform: rotate(1.5deg);
}
.polaroid img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.polaroid__cap { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-top: 0.55rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 2px dashed var(--outline-variant); }
.stat { border-radius: var(--r); padding: 0.75rem 1rem; box-shadow: 0 3px 0 0 var(--outline-variant); }
.stat b { display: block; font: 800 30px/1.1 var(--font-display); }
.stat:nth-child(1) { background: var(--secondary-container); }
.stat:nth-child(2) { background: var(--primary-fixed); }
.stat:nth-child(3) { background: var(--tertiary-fixed); }
.stat:nth-child(4) { background: var(--surface-highest); }
@media (max-width: 959px) { .hero__grid { grid-template-columns: 1fr; } .polaroid { max-width: 520px; } }
@media (max-width: 767px) { .hero { padding: 1.25rem; } .stats { grid-template-columns: repeat(2, 1fr); } .stat b { font-size: 24px; } }

.filterbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem; background: var(--surface-container); border-radius: 9999px; box-shadow: inset 0 2px 4px rgba(31, 69, 48, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.tab { border: 0; background: transparent; cursor: pointer; padding: 0.45rem 0.95rem; border-radius: 9999px; color: var(--ink-variant); font: 700 12px/16px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--mat); color: #fffdf7; box-shadow: 0 3px 0 0 var(--mat-deep); }
.tab .count { opacity: 0.7; }
.search { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; min-height: 44px; min-width: min(320px, 100%); background: var(--tray); border: 2px solid rgba(43, 89, 63, 0.3); border-radius: 9999px; box-shadow: inset 0 2px 4px rgba(31, 69, 48, 0.12); }
.search:focus-within { background: #fff; border-color: var(--primary-container); box-shadow: 0 0 0 2px var(--mat); }
.search input { border: 0; background: transparent; outline: 0; font: inherit; width: 100%; color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grid { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; padding: 0.85rem; gap: 0.9rem; }
.card[hidden] { display: none; }
.card__media { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1024 / 500; background: var(--surface-high); }
.card__media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.card:hover .card__media > img:first-child { transform: scale(1.03); }
.card__media .chip { position: absolute; top: 0.7rem; left: 0.7rem; }
.card__icon { position: absolute; right: 0.7rem; bottom: 0.7rem; width: 52px; height: 52px; border-radius: 14px; border: 2px solid #fff; box-shadow: 0 3px 0 0 var(--mat-deep); }
.card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.35rem; flex: 1; }
.card__meta { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--ink-variant); }
.card__genre { color: var(--tertiary); }
.card__title { font: 700 22px/26px var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.card__title a { text-decoration: none; }
.card__desc { color: var(--ink-variant); }
.card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 0.35rem 0.35rem; border-top: 2px dashed var(--surface-highest); }
.card__actions .btn { flex: 1 1 auto; }
.empty { text-align: center; padding: 3rem 1rem; border: 2px dashed var(--outline-variant); border-radius: var(--r-lg); color: var(--ink-variant); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step { padding: 1.25rem; border-radius: var(--r-md); box-shadow: 0 4px 0 0 var(--surface-highest); display: flex; flex-direction: column; gap: 0.5rem; }
.step__num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 16px/1 var(--font-display); border: 2px solid var(--mat-deep); box-shadow: 0 2px 0 0 var(--mat-deep); }
.step:nth-child(1) .step__num { background: var(--primary-container); }
.step:nth-child(2) .step__num { background: var(--secondary-container); }
.step:nth-child(3) .step__num { background: var(--tertiary-container); }
@media (max-width: 859px) { .steps { grid-template-columns: 1fr; } }

.cta-band { border-radius: var(--r-lg); background: var(--primary-container); color: var(--mat-deep); box-shadow: 0 8px 0 0 var(--on-primary-container); padding: 1.75rem var(--margin); display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; }

/* ---------- footer ---------- */
.site-footer { margin-top: calc(var(--margin) * 2); padding: 1.75rem 0 2.25rem; background: var(--surface-high); border-top: 2px solid var(--surface-highest); }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-links a { text-decoration: none; }
.privacy-link { background: var(--sun) !important; }

/* ---------- game landing ---------- */
.crumbs { display: flex; align-items: center; gap: 0.25rem; color: var(--ink-variant); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.game-hero { padding-top: 1.5rem; }
.game-hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.game-hero__title { text-align: center; max-width: 52rem; margin: 0 auto 0.75rem; }
.game-hero__title .accent { color: var(--primary); text-decoration: underline wavy var(--game); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.game-hero__lede { text-align: center; max-width: 40rem; margin: 0 auto 2rem; color: var(--ink-variant); }

.bezel {
  position: relative; margin: 0 auto;
  background: var(--surface-high); border: 4px solid rgba(58, 104, 77, 0.4);
  border-radius: 2.5rem; padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 12px 0 0 #214f36, 0 20px 30px -8px rgba(0, 33, 17, 0.3);
}
.bezel--portrait { max-width: 480px; }
.bezel--landscape { max-width: 1040px; }
.bezel__stud { position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6), 0 3px 0 rgba(0, 0, 0, 0.35); }
.bezel__stud:nth-of-type(1) { left: 3rem; background: var(--coral); }
.bezel__stud:nth-of-type(2) { left: 5.2rem; width: 20px; height: 20px; background: var(--game); }
.bezel__stud:nth-of-type(3) { right: 3.5rem; width: 28px; height: 28px; background: var(--secondary-container); }
.bezel__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.3rem 0.7rem; color: var(--ink-variant); }
.bezel__lights { display: flex; gap: 6px; align-items: center; }
.bezel__lights i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.bezel__lights i:nth-child(1) { background: var(--tertiary); }
.bezel__lights i:nth-child(2) { background: var(--primary-container); }
.bezel__lights i:nth-child(3) { background: var(--secondary); }
.bezel__file { padding-left: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--r-md); background: #111;
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.8);
  border: 2px solid var(--surface-highest);
}
.bezel--portrait .screen { aspect-ratio: 9 / 16; width: min(100%, calc((100vh - 220px) * 9 / 16)); width: min(100%, calc((100svh - 220px) * 9 / 16)); min-width: min(100%, 300px); margin: 0 auto; }
.bezel--landscape .screen { aspect-ratio: 16 / 9; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.screen__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
/* Fullscreen: real (:fullscreen) or "fill the window" (.is-window-fs, iPhone Safari) */
.screen.is-fs { background: #000; border: 0; border-radius: 0; box-shadow: none; }
.screen.is-window-fs {
  position: fixed; inset: 0; z-index: 1000; margin: 0;
  width: 100% !important; min-width: 0; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto;
}
html.game-fs, html.game-fs body { overflow: hidden; }
/* Portrait games keep their 9:16 shape on wide screens instead of stretching. */
.bezel--portrait .screen.is-fs iframe { left: 50%; width: min(100%, calc(100dvh * 9 / 16)); transform: translateX(-50%); }
.fs-exit {
  display: none; position: absolute; z-index: 3;
  top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(27, 28, 25, 0.55); color: #fff; cursor: pointer; place-items: center;
  opacity: 0.75; transition: opacity 0.15s;
}
.fs-exit:hover, .fs-exit:focus-visible { opacity: 1; }
.screen.is-fs .fs-exit { display: grid; }
.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(to top, rgba(27, 28, 25, 0.75), rgba(27, 28, 25, 0.35));
  border: 0; width: 100%; cursor: pointer; color: inherit; font: inherit; padding: 1rem;
}
.overlay[hidden] { display: none; }
.blob {
  width: 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  background: var(--game); color: var(--mat-deep);
  box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.7), 0 10px 0 0 rgba(0, 0, 0, 0.45), 0 16px 25px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s; animation: squish 2.4s ease-in-out infinite;
}
.overlay:hover .blob { transform: scale(1.06); }
.overlay:active .blob { transform: scale(0.95); }
.blob .icon { font-size: 52px; }
.blob__eyes { display: flex; gap: 8px; margin-bottom: 2px; }
.blob__eyes i { width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }
.blob__eyes i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translateX(2px); }
@keyframes squish { 0%, 100% { border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%; } 50% { border-radius: 55% 45% 40% 60% / 60% 45% 55% 40%; } }
.overlay__hint { background: rgba(255, 255, 255, 0.92); color: var(--ink); padding: 0.4rem 1rem; border-radius: 9999px; box-shadow: 0 4px 0 0 var(--ink); display: inline-flex; gap: 0.4rem; align-items: center; }
.overlay--soon { cursor: default; }
.overlay--soon .blob { background: var(--surface-highest); animation: none; }
.console { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.9rem; }
.console__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.key { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border: 0; border-radius: var(--r); background: var(--surface-lowest); color: var(--ink); font: 700 12px/16px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 0 var(--ink); text-decoration: none; }
.key:active { transform: translateY(3px); box-shadow: none; }
.key .icon { font-size: 18px; }

.game-cta { max-width: 1040px; margin: 2.25rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.proof__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--surface-container); border-radius: var(--r-md); }
.proof__icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--game); color: var(--mat-deep); border: 2px solid var(--mat-deep); }
@media (max-width: 767px) { .proof { grid-template-columns: 1fr; } }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.feature { padding: 1.25rem; background: var(--tray); display: flex; flex-direction: column; gap: 0.6rem; }
.feature__top { display: flex; justify-content: space-between; align-items: center; }
.feature__num { color: var(--ink-variant); }
.feature__rivet { width: 14px; height: 14px; border-radius: 50%; background: var(--game); border: 2px solid var(--mat-deep); }
.feature__icon { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--surface-lowest); border: 2px solid var(--mat); box-shadow: 0 3px 0 0 var(--mat-deep); }

.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 1.25rem; overflow-x: auto; padding: 0.5rem 0.25rem 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.gallery--landscape { grid-auto-columns: minmax(300px, 440px); }
.shot { scroll-snap-align: start; padding: 0.6rem; background: var(--surface-lowest); border-radius: var(--r-md); box-shadow: 0 6px 0 0 var(--ink-variant); transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s; border: 0; cursor: zoom-in; text-align: left; font: inherit; color: inherit; }
.shot:hover { transform: rotate(0) translateY(-3px); }
.shot img { border-radius: var(--r); width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface-high); }
.gallery--landscape .shot img { aspect-ratio: 16 / 9; }
.shot figcaption { padding: 0.55rem 0.2rem 0.1rem; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(27, 28, 25, 0.85); }
.lightbox img { max-width: 96vw; max-height: 88vh; border-radius: var(--r-md); }
.lightbox form { display: flex; justify-content: center; margin-top: 0.75rem; }

/* ---------- privacy (single column, max 800px) ---------- */
.doc { max-width: 800px; margin: 2rem auto 0; padding: 2rem 2.25rem; }
.doc h1 { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.doc h2 { font-size: 22px; line-height: 28px; margin: 2.25rem 0 0.75rem; padding-top: 1.25rem; border-top: 2px dashed var(--surface-highest); }
.doc h3 { font-size: 17px; line-height: 24px; margin: 1.5rem 0 0.5rem; }
.doc p, .doc li { font-size: 16px; line-height: 26px; }
.doc p { margin: 0 0 0.9rem; }
.doc ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.doc li { margin-bottom: 0.4rem; }
.doc a { color: var(--primary); word-break: break-word; }
.doc code { font-size: 0.9em; background: var(--surface-container); padding: 0.1em 0.35em; border-radius: 6px; word-break: break-all; }
.doc em { color: var(--ink-variant); }
.doc .table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.doc table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 20px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1.5px solid var(--surface-highest); }
.doc th { background: var(--surface-container); font: 700 12px/16px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.toc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.5rem; }
.toc a { text-decoration: none; }
@media (max-width: 767px) { .doc { padding: 1.25rem 1rem; border-radius: var(--r-md); } .doc h1 { font-size: 28px; line-height: 34px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}