/* ==========================================================================
   Crazy Core — site styles
   Layout concept: paper-and-ink bands, color-coded like an office filing
   system; one loud element per page (the wordmark / the game hero).
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset WOFF2) ---------- */
@font-face { font-family: "Caprasimo"; src: url("../fonts/caprasimo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Yeseva One"; src: url("../fonts/yeseva-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../fonts/pt-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../fonts/pt-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../fonts/pt-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Color: ink + paper, five filing-tab accents */
  --ink: #1B1A3A;
  --ink-soft: #3B3963;
  --paper: #FFFBF2;
  --paper-2: #F7EFDF;
  --tomato: #FF4B3E;
  --tomato-deep: #D42C20;
  --sun: #FFC83D;
  --teal: #18B5A4;
  --teal-deep: #0E7F73;
  --grape: #7A5CFF;
  --grape-deep: #4F35D6;
  --bubble: #FF8FC7;
  --line: rgba(27, 26, 58, 0.14);
  --on-dark-muted: #C9C6EA;

  /* Type */
  --f-display: "Caprasimo", "Cooper Black", "Georgia", serif;
  --f-ui: "Fredoka", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --f-title: "Yeseva One", "Didot", "Georgia", serif;
  --f-serif: "PT Serif", "Georgia", "Times New Roman", serif;

  /* Scale (perfect fourth-ish) */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --t-2xl: clamp(2.2rem, 1.6rem + 3vw, 3.75rem);

  --r-lg: 24px;
  --r-md: 14px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --wrap: 1200px;
  --header-h: 72px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tomato); }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sun); color: var(--ink); }

.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: 16px; top: -100px; z-index: 100; background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * 32px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px), min(32px, 4vw));
  padding-right: max(16px, env(safe-area-inset-right, 0px), min(32px, 4vw));
}
.band { padding-block: clamp(64px, 9vw, 120px); }
.band--tight { padding-block: clamp(40px, 6vw, 72px); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--paper2 { background: var(--paper-2); }
.band--grape { background: var(--grape-deep); color: var(--paper); }
.band--sun { background: var(--sun); color: var(--ink); }
.band--teal { background: #DDF4F0; }

.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-family: var(--f-display); font-size: var(--t-2xl); letter-spacing: -0.01em; }
.section-head p { font-size: var(--t-lg); color: var(--ink-soft); line-height: 1.5; }
.band--ink .section-head p, .band--grape .section-head p { color: var(--on-dark-muted); }
.lede-serif { font-family: var(--f-serif); font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-ui); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--tomato { --btn-bg: var(--tomato-deep); --btn-fg: #fff; }
.btn--sun { --btn-bg: var(--sun); --btn-fg: var(--ink); }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.band--ink .btn, .band--grape .btn, .game-hero .btn { border-color: var(--paper); box-shadow: 4px 4px 0 rgba(255, 251, 242, .9); }
.band--ink .btn:hover, .band--grape .btn:hover, .game-hero .btn:hover { box-shadow: 6px 6px 0 rgba(255, 251, 242, .9); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* ---------- Stamp (rubber stamp label from the game UI) ---------- */
.stamp {
  display: inline-block;
  font-family: var(--f-display);
  color: var(--tomato);
  border: 3px solid currentColor;
  border-radius: 10px;
  padding: 0.05em 0.45em 0.12em;
  transform: rotate(-4deg);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
}
.band--ink .stamp, .game-hero .stamp { mix-blend-mode: normal; }
.stamp--teal { color: var(--teal-deep); }
.stamp--grape { color: var(--grape); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 251, 242, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid var(--ink);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.brand img { width: 40px; height: 40px; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(120deg); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 500;
  transition: background-color .15s ease;
}
.nav a:not(.btn):hover { background: var(--paper-2); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav .btn { min-height: 44px; padding: 8px 18px; margin-left: 8px; font-size: 1rem; box-shadow: 3px 3px 0 var(--ink); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 14px;
    background: var(--sun); cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s ease, background-color .2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -7px; }
  .nav-toggle span::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
    background: var(--paper); border-bottom: 2px solid var(--ink);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 16px; font-size: 1.125rem; }
  .nav .btn { margin: 8px 0 0; }
}

/* ---------- Home hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 28px; min-width: 0; }
.wordmark {
  font-family: var(--f-display);
  font-size: clamp(4rem, 3rem + 7.5vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0.035em 0.035em 0 var(--sun), 0.07em 0.07em 0 var(--tomato);
}
.wordmark span { display: block; }
.wordmark span:last-child { padding-left: 0.42em; }
.hero-lede { font-size: var(--t-lg); line-height: 1.5; max-width: 34rem; }
.hero-lede strong { font-weight: 600; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper); font-size: var(--t-sm); font-weight: 500; line-height: 1.3;
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--teal)); flex: none; }

.core { position: relative; width: 100%; max-width: 460px; justify-self: center; aspect-ratio: 1; }
.core svg { width: 100%; height: 100%; overflow: visible; }
.core .burst { transform-origin: 50% 50%; animation: spin 48s linear infinite; }
.core .pupil { transition: transform .25s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.core .ring { transform-origin: 50% 50%; animation: pop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.core .ring:nth-of-type(2) { animation-delay: .1s; }
.core .ring:nth-of-type(3) { animation-delay: .2s; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .core { max-width: 340px; order: -1; }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--ink); color: var(--paper); border-block: 2px solid var(--ink); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; flex: none; }
.ticker li { display: inline-flex; align-items: center; gap: 22px; padding: 16px 22px 16px 0; font-weight: 500; font-size: 1.125rem; white-space: nowrap; }
.ticker li::after { content: ""; width: 18px; height: 18px; background: var(--sun); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ticker li:nth-child(3n+2)::after { background: var(--bubble); }
.ticker li:nth-child(3n)::after { background: var(--teal); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Featured game (home) ---------- */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); box-shadow: 8px 8px 0 var(--ink);
}
.feature-media { position: relative; background: var(--ink); min-height: 100%; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.feature-media .stamp { position: absolute; left: 18px; top: 18px; background: rgba(255, 251, 242, .92); font-size: 1rem; mix-blend-mode: normal; }
.feature-body { display: grid; gap: 20px; align-content: center; padding: clamp(24px, 4vw, 48px); min-width: 0; }
.feature-body h3 { font-family: var(--f-display); font-size: var(--t-2xl); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.feature-body h3 .stamp { font-size: 0.42em; }
.feature-body .lede-serif { font-size: var(--t-lg); color: var(--ink-soft); }
.platforms { display: grid; gap: 10px; list-style: none; }
.platforms li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--paper-2); font-weight: 500; }
.status { font-size: var(--t-xs); font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status--live { background: var(--teal-deep); color: #fff; }
.status--soon { background: var(--sun); color: var(--ink); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

.next-up {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 22px 26px; border: 2.5px dashed var(--ink-soft); border-radius: var(--r-lg);
}
.next-up p { font-size: var(--t-md); }
.next-up strong { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; margin-right: 8px; }

/* ---------- Studio ---------- */
.studio .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.studio h2 { font-family: var(--f-display); font-size: var(--t-2xl); }
.studio-copy { display: grid; gap: 20px; font-size: var(--t-lg); line-height: 1.55; }
.studio-copy p:not(:first-of-type) { color: var(--on-dark-muted); }
.beliefs { list-style: none; display: grid; gap: 18px; }
.beliefs li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.beliefs .dot { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); border: 2.5px solid var(--paper); transform: rotate(-6deg); }
.beliefs .dot svg { width: 26px; height: 26px; }
.beliefs h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; margin-bottom: 4px; }
.beliefs p { color: var(--on-dark-muted); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; border-top: 2px solid rgba(255, 251, 242, .25); }
.facts div { padding: 16px 0; border-bottom: 2px solid rgba(255, 251, 242, .25); }
.facts dt { font-size: var(--t-sm); color: var(--on-dark-muted); }
.facts dd { margin: 0; font-weight: 600; font-size: 1.125rem; }
@media (max-width: 860px) { .studio .wrap { grid-template-columns: 1fr; } }

/* ---------- Community / newsletter ---------- */
.community .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.community h2 { font-family: var(--f-display); font-size: var(--t-2xl); margin-bottom: 14px; }
.community p { font-size: var(--t-lg); line-height: 1.5; }
.signup {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); box-shadow: 8px 8px 0 var(--ink); display: grid; gap: 14px; transform: rotate(-1deg);
}
.signup h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; }
.community .signup p { font-size: var(--t-sm); line-height: 1.5; }
.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row input { flex: 1 1 220px; min-width: 0; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.socials a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper); text-decoration: none; font-weight: 500;
}
.socials a:hover { background: var(--ink); color: var(--paper); }
.socials svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .community .wrap { grid-template-columns: 1fr; } .signup { transform: none; } }

/* ---------- Forms ---------- */
label { font-weight: 500; font-size: var(--t-sm); }
input, textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 13px 16px; min-height: 52px;
}
textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.form-grid { display: grid; gap: 18px; }
.form-grid .field { display: grid; gap: 6px; }
.form-note { font-size: var(--t-sm); color: var(--ink-soft); }
.form-status { font-weight: 500; font-size: var(--t-sm); min-height: 1.5em; }
.form-status.is-ok { color: var(--teal-deep); }
.form-status.is-error { color: var(--tomato-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 56px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-stripes { display: grid; grid-template-columns: repeat(5, 1fr); height: 10px; }
.footer-stripes i:nth-child(1) { background: var(--tomato); }
.footer-stripes i:nth-child(2) { background: var(--sun); }
.footer-stripes i:nth-child(3) { background: var(--teal); }
.footer-stripes i:nth-child(4) { background: var(--grape); }
.footer-stripes i:nth-child(5) { background: var(--bubble); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid .brand { color: var(--paper); font-size: 1.75rem; }
.footer-grid p { color: var(--on-dark-muted); margin-top: 14px; max-width: 22rem; }
.footer-grid h2 { font-family: var(--f-ui); font-weight: 600; font-size: 1rem; color: var(--sun); margin-bottom: 12px; }
.footer-grid ul { list-style: none; display: grid; gap: 8px; }
.footer-grid a, .footer-grid button.linklike { color: var(--paper); text-decoration: none; }
.footer-grid a:hover, .footer-grid button.linklike:hover { text-decoration: underline; text-decoration-color: var(--sun); }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 251, 242, .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--on-dark-muted); font-size: var(--t-sm); }
button.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Pigslaughter page
   ========================================================================== */
.game-hero { background: var(--ink); color: var(--paper); padding-block: clamp(36px, 6vw, 80px) clamp(56px, 8vw, 104px); overflow: hidden; position: relative; }
.game-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 28px;
  background: repeating-conic-gradient(var(--teal) 0 25%, var(--paper) 0 50%) 0 0 / 28px 28px;
}
.game-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: var(--t-sm); color: var(--on-dark-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.breadcrumb a { color: var(--on-dark-muted); }
.game-hero .wrap > div:first-child { container-type: inline-size; min-width: 0; }
.game-title { display: grid; gap: 6px; margin-top: 18px; }
.game-title h1 { font-family: var(--f-display); font-size: clamp(2.4rem, 0.9rem + 9vw, 5rem); font-size: min(5.25rem, 15cqi); line-height: .92; letter-spacing: -0.01em; }
.game-title .stamp { justify-self: start; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); margin-left: 0.4em; color: var(--tomato); }
.game-hero .tagline { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lg); line-height: 1.45; color: var(--paper); margin-top: 22px; max-width: 30rem; }
.game-hero .summary { color: var(--on-dark-muted); margin-top: 14px; max-width: 32rem; }

.stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 540px; }
.store {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: 18px; border: 3px solid var(--paper); text-decoration: none; line-height: 1.2;
}
.store svg { width: 44px; height: 44px; }
.store small { display: block; font-size: var(--t-xs); font-weight: 500; opacity: .85; }
.store strong { display: block; font-size: 1.2rem; font-weight: 600; }
.store--steam { background: var(--sun); color: var(--ink); border-color: var(--sun); box-shadow: 5px 5px 0 var(--paper); transition: transform .15s ease, box-shadow .15s ease; }
.store--steam:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--paper); }
.store--ios { background: transparent; color: var(--paper); border-style: dashed; cursor: default; }
.store--ios .stamp { position: absolute; right: -10px; top: -16px; background: var(--ink); color: var(--bubble); font-size: 0.85rem; border-width: 2.5px; transform: rotate(6deg); }
@media (max-width: 420px) { .stores { grid-template-columns: 1fr; } }

.screen {
  position: relative; border: 4px solid var(--paper); border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 10px 10px 0 var(--tomato); transform: rotate(1.2deg);
}
.screen video, .screen img { width: 100%; aspect-ratio: 1280 / 644; object-fit: cover; }
.screen-note {
  position: absolute; left: -14px; bottom: -26px; z-index: 2; width: min(220px, 52%);
  background: var(--sun); color: var(--ink); padding: 12px 14px 14px; border: 2px solid var(--ink);
  transform: rotate(-4deg); box-shadow: 4px 4px 0 var(--ink); font-weight: 600; line-height: 1.25; font-size: 0.98rem;
}
.screen-note small { display: block; margin-top: 6px; font-weight: 400; font-size: 0.8rem; }
.screen-wrap { position: relative; padding-bottom: 20px; }
.video-toggle {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.video-toggle svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .game-hero .wrap { grid-template-columns: 1fr; }
  .screen-wrap { margin-top: 12px; }
}

.factbar { background: var(--sun); border-bottom: 3px solid var(--ink); }
.factbar dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.factbar dl > div { padding: 20px 18px; border-left: 2px solid rgba(27, 26, 58, .2); }
.factbar dl > div:first-child { border-left: 0; padding-left: 0; }
.factbar dt { font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft); }
.factbar dd { margin: 2px 0 0; font-weight: 600; line-height: 1.3; }
@media (max-width: 900px) {
  .factbar dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar dl > div, .factbar dl > div:first-child { border-left: 0; padding: 14px 12px 14px 0; border-top: 2px solid rgba(27, 26, 58, .15); }
  .factbar dl > div:nth-child(-n+2) { border-top: 0; }
  .factbar dl > div:last-child { grid-column: 1 / -1; }
}

/* Memo */
.memo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.memo {
  position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 6px;
  padding: clamp(24px, 4vw, 44px); box-shadow: 10px 10px 0 var(--teal); font-family: var(--f-serif); transform: rotate(-1deg);
}
.memo .stamp { position: absolute; right: 18px; top: 20px; font-size: 0.95rem; }
.memo h3 { font-family: var(--f-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
.memo dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 16px 0 18px; padding-bottom: 18px; border-bottom: 3px double var(--ink); }
.memo dt { font-weight: 700; }
.memo dd { margin: 0; }
.memo p { line-height: 1.7; }
.memo p + p { margin-top: 14px; }
.memo-copy { display: grid; gap: 18px; font-size: var(--t-lg); line-height: 1.55; }
.memo-copy h2 { font-family: var(--f-display); font-size: var(--t-2xl); }
.memo-copy .muted { color: var(--ink-soft); font-size: var(--t-md); }
@media (max-width: 900px) { .memo-layout { grid-template-columns: 1fr; } .memo { transform: none; } }
@media (max-width: 560px) { .memo .stamp { position: static; display: inline-block; margin-bottom: 14px; } .screen-note { left: 8px; } }

/* Shift steps (a real sequence) */
.shift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 4px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 2px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--f-display); font-size: 1.6rem; line-height: 1; padding-bottom: .06em; font-variant-numeric: lining-nums;
  background: var(--c, var(--sun)); color: var(--ink); border: 2.5px solid var(--ink); box-sizing: border-box;
}
.steps h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; margin-bottom: 4px; }
.steps p { color: var(--ink-soft); }
.shots { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); }
.shot { margin: 0; border: 3px solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.shot img { width: 100%; aspect-ratio: 1600 / 805; object-fit: cover; }
.shot figcaption { background: var(--paper); padding: 10px 14px; font-size: var(--t-sm); border-top: 3px solid var(--ink); font-family: var(--f-serif); font-style: italic; }
@media (max-width: 900px) { .shift { grid-template-columns: 1fr; } .shots { position: static; } }

/* Employee files */
.files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; }
.file {
  position: relative; display: grid; gap: 14px; align-content: start;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 6px 18px 18px 18px; padding: 22px 20px 20px; margin-top: 26px;
}
.file::before {
  content: attr(data-file); position: absolute; left: -2.5px; top: -28px; height: 28px; padding: 4px 14px 0;
  background: var(--c); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
}
.file-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.file-head img { width: 88px; height: 94px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper-2); }
.file h3 { font-family: var(--f-title); font-size: 1.6rem; line-height: 1.05; }
.file h3 small { display: block; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft); margin-bottom: 2px; }
.file .role { font-family: var(--f-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-soft); margin-top: 4px; }
.style-tag { justify-self: start; transform: rotate(3deg); padding: 3px 12px; border-radius: 6px; background: var(--c); font-size: var(--t-xs); font-weight: 600; border: 2px solid var(--ink); }
.stats { display: grid; gap: 6px; }
.stat { display: grid; grid-template-columns: 82px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: var(--t-sm); }
.stat b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.meter { height: 10px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--ink); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v); background: var(--ink); border-radius: 999px; }
.ability { padding-top: 12px; border-top: 2px dashed var(--line); }
.ability h4 { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-sm); color: var(--tomato-deep); }
.ability h4.unique { color: var(--grape-deep); }
.ability p { font-size: var(--t-sm); line-height: 1.45; }
@media (max-width: 1080px) { .files { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .files { grid-template-columns: 1fr; } }

/* Floors */
/* Floors read like elevator buttons */
.floors { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.floor {
  display: grid; gap: 18px; align-content: start;
  padding: 22px; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--r-md);
  border-top: 10px solid var(--c);
}
.floor-btn {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--paper-2) 60%);
  border: 3px solid var(--ink); box-shadow: 0 0 0 5px var(--c), 3px 5px 0 5px var(--ink);
  font-family: var(--f-display); font-size: 1.7rem; line-height: 1; padding-bottom: .06em; font-variant-numeric: lining-nums; color: var(--ink);
}
.floor .code { font-size: var(--t-xs); font-weight: 600; color: var(--c-text, var(--ink-soft)); letter-spacing: .03em; margin-bottom: 2px; }
.floor h3 { font-family: var(--f-title); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); }
@media (max-width: 1000px) { .floors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .floors { grid-template-columns: 1fr; }
  .floor { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
}

.clearance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.level { padding: 22px; border-radius: var(--r-md); border: 2.5px solid var(--ink); display: grid; gap: 8px; align-content: start; }
.level h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; }
.level p { font-size: var(--t-sm); line-height: 1.5; }
.level--normal { background: #fff; }
.level--crunch { background: #F5E2A8; }
.level--death { background: var(--ink); color: var(--paper); border-style: dashed; }
.level--death p { color: var(--on-dark-muted); }
@media (max-width: 760px) { .clearance { grid-template-columns: 1fr; } }

/* Arsenal */
.arsenal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; list-style: none; }
.weapon--classified { grid-column: span 2; }
@media (max-width: 1000px) { .arsenal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .arsenal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.weapon { background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 12px 14px; display: grid; gap: 6px; justify-items: center; text-align: center; border: 2.5px solid var(--paper); }
.weapon img { width: 128px; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.weapon span { font-weight: 600; font-size: var(--t-sm); line-height: 1.25; }
.weapon em { font-style: normal; font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; background: var(--c, var(--line)); }
.weapon--classified { background: transparent; color: var(--paper); border: 2.5px dashed var(--on-dark-muted); align-content: center; min-height: 160px; }
.weapon--classified strong { font-family: var(--f-display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.counts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; list-style: none; }
.counts li { padding: 12px 18px; border-radius: 999px; border: 2px solid rgba(255, 251, 242, .35); }
.counts b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--sun); margin-right: 6px; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin-top: 56px; }
.gallery button { display: block; width: 100%; padding: 0; border: 3px solid var(--paper); border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: #000; transition: transform .2s ease; }
.gallery button:hover { transform: rotate(-1deg) scale(1.02); }
.gallery img { width: 100%; aspect-ratio: 1600 / 805; object-fit: cover; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Platforms */
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.platform { position: relative; border: 3px solid var(--ink); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); background: #fff; display: grid; gap: 16px; align-content: start; }
.platform--soon { background: var(--paper-2); border-style: dashed; }
.platform header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.platform h3 { font-family: var(--f-display); font-size: var(--t-xl); }
.specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; margin: 0; font-size: var(--t-sm); }
.specs dt, .specs dd { padding: 9px 0; border-top: 1.5px solid var(--line); margin: 0; }
.specs dt { font-weight: 600; }
.platform .stamp { font-size: 1rem; }
@media (max-width: 760px) { .platform-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq-layout .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } .faq-layout .section-head { position: static; } }
.faq { display: grid; gap: 12px; }
.faq details { border: 2.5px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; font-weight: 600; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-display); font-size: 1.6rem; line-height: 1; transition: transform .2s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--ink-soft); }
.faq details > div p + p { margin-top: 10px; }

.legal-strip { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 22px 26px; border-radius: var(--r-lg); background: var(--paper-2); border: 2.5px solid var(--ink); margin-top: 48px; }
.legal-strip p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 40rem; }
.legal-strip .btn-row .btn { min-height: 44px; padding: 8px 18px; font-size: 1rem; }

/* ---------- Dialogs (legal + lightbox) ---------- */
dialog:focus, dialog:focus-visible { outline: none; }
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(27, 26, 58, .72); backdrop-filter: blur(3px); }
.doc-dialog { width: min(820px, calc(100vw - 24px)); height: min(88vh, 960px); height: min(88dvh, 960px); }
.doc {
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 10px 10px 0 var(--sun);
}
.doc-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px 22px 16px; border-bottom: 3px double var(--ink); background: var(--paper); }
.doc-head small { display: block; font-family: var(--f-serif); font-style: italic; color: var(--ink-soft); font-size: var(--t-sm); }
.doc-head h2 { font-family: var(--f-display); font-size: var(--t-xl); margin-top: 2px; }
.doc-close { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sun); cursor: pointer; display: grid; place-items: center; }
.doc-close svg { width: 18px; height: 18px; }
.doc-body { overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(20px, 4vw, 40px) 36px; font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.7; }
.doc-body h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.2rem; margin: 30px 0 8px; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: 12px; }
.doc-body ul { padding-left: 1.3em; display: grid; gap: 6px; }
.doc-body .summary-box { font-family: var(--f-ui); background: #E6F7F4; border: 2px solid var(--teal-deep); border-radius: 12px; padding: 16px 18px; margin-bottom: 24px; }
.doc-body .summary-box strong { display: block; margin-bottom: 6px; }
.doc-body .summary-box ul { font-size: var(--t-sm); line-height: 1.5; }
.doc-body .caps { text-transform: uppercase; font-size: .95rem; }

.lightbox { width: min(1400px, calc(100vw - 24px)); }
.lightbox figure { margin: 0; position: relative; }
.lightbox img { width: 100%; border: 3px solid var(--paper); border-radius: 14px; background: #000; }
.lightbox figcaption { color: var(--paper); text-align: center; margin-top: 10px; font-family: var(--f-serif); font-style: italic; }
.lightbox .doc-close { position: absolute; right: -6px; top: -16px; }
dialog[open] { animation: dlg .22s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes dlg { from { transform: translateY(16px) scale(.97); opacity: 0; } }

/* ---------- Contact page ---------- */
.contact-hero { padding-block: clamp(48px, 7vw, 96px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-grid h1 { font-family: var(--f-display); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: .95; text-shadow: 0.04em 0.04em 0 var(--bubble); }
.contact-grid .lede { font-size: var(--t-lg); margin-top: 20px; max-width: 30rem; }
.email-card { margin-top: 32px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); display: grid; gap: 10px; }
.email-card small { color: var(--on-dark-muted); }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.email-line a { font-weight: 600; font-size: 1.3rem; color: var(--paper); overflow-wrap: anywhere; }
.copy-btn { border: 2px solid var(--paper); background: transparent; color: var(--paper); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 500; font-size: var(--t-sm); }
.copy-btn:hover { background: var(--paper); color: var(--ink); }
.contact-form { background: #fff; border: 3px solid var(--ink); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); box-shadow: 10px 10px 0 var(--teal); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.notfound h1 { font-family: var(--f-display); font-size: clamp(5rem, 3rem + 10vw, 11rem); line-height: .9; text-shadow: 0.04em 0.04em 0 var(--sun), 0.08em 0.08em 0 var(--tomato); }
.notfound p { font-size: var(--t-lg); margin: 18px auto 30px; max-width: 30rem; }
.notfound .btn-row { justify-content: center; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none; }
}

/* ==========================================================================
   Texture layer — "printed matter": paper grain, halftone, riso offsets,
   tape, rubber-stamp grunge, ruled and graph paper, blueprint lines.
   ========================================================================== */
:root {
  --pink: #FF5FA2;
  --pink-soft: #FFE0EE;
  --pink-deep: #C2185B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .10 0 0 0 0 .23 .32 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .95 .34 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .25' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 .16 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --dots-ink: radial-gradient(circle, rgba(27, 26, 58, .16) 1.15px, transparent 1.7px);
  --coffee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none'%3E%3Ccircle cx='100' cy='100' r='74' stroke='%23A0703C' stroke-opacity='.32' stroke-width='7'/%3E%3Ccircle cx='100' cy='100' r='70' stroke='%23A0703C' stroke-opacity='.12' stroke-width='12'/%3E%3Cpath d='M40 140 q-12 18 -4 30' stroke='%23A0703C' stroke-opacity='.25' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Paper everywhere */
body { background-color: var(--paper); background-image: var(--grain), var(--fibers); }
.band--paper2 { background-color: var(--paper-2); background-image: var(--grain), var(--fibers); }
.band--ink, .game-hero, .site-footer, .ticker { background-image: var(--grain-light); }

/* Riso misregistration on the big display type */
.wordmark { text-shadow: 0.035em 0.035em 0 var(--sun), 0.07em 0.07em 0 var(--tomato), -0.012em -0.01em 0 rgba(24, 181, 164, .55); }
.section-head h2, .studio h2, .community h2, .memo-copy h2, .contact-grid h1 { text-shadow: 0.03em 0.03em 0 rgba(255, 95, 162, .38); }
.band--ink .section-head h2, .band--grape .section-head h2, .studio h2 { text-shadow: 0.035em 0.035em 0 rgba(255, 95, 162, .55); }

/* Rubber-stamp grunge */
.stamp { -webkit-mask-image: var(--grunge); mask-image: var(--grunge); -webkit-mask-size: 150px; mask-size: 150px; }

/* Print crop marks for framed sections */
.cropmarks { position: relative; }
.cropmarks::before, .cropmarks::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; opacity: .5;
  border-color: currentColor; border-style: solid;
}
.cropmarks::before { left: max(8px, env(safe-area-inset-left, 0px)); top: 14px; border-width: 1.5px 0 0 1.5px; }
.cropmarks::after { right: max(8px, env(safe-area-inset-right, 0px)); bottom: 14px; border-width: 0 1.5px 1.5px 0; }

/* Home hero: halftone sun behind the core, graph lines under the type */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 95, 162, .5) 1.6px, transparent 2.2px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle at 78% 46%, #000 0, rgba(0,0,0,.65) 18%, transparent 46%);
  mask-image: radial-gradient(circle at 78% 46%, #000 0, rgba(0,0,0,.65) 18%, transparent 46%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(27, 26, 58, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 26, 58, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(100deg, #000 0, rgba(0,0,0,.5) 45%, transparent 70%);
  mask-image: linear-gradient(100deg, #000 0, rgba(0,0,0,.5) 45%, transparent 70%);
}
@media (max-width: 860px) {
  .hero::before { -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0, transparent 40%); mask-image: radial-gradient(circle at 50% 18%, #000 0, transparent 40%); }
}

/* Ticker: torn receipt edges */
.ticker { position: relative; border: 0; }
.ticker::before, .ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 1;
  background: linear-gradient(-45deg, transparent 5.5px, var(--paper) 0) 0 0 / 11px 8px, linear-gradient(45deg, transparent 5.5px, var(--paper) 0) 0 0 / 11px 8px;
}
.ticker::before { top: -1px; transform: scaleY(-1); }
.ticker::after { bottom: -1px; }
.ticker li { padding-block: 22px; }

/* Graph paper sections */
.graph { background-image: var(--grain), linear-gradient(rgba(24, 181, 164, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 181, 164, .1) 1px, transparent 1px); background-size: 240px 240px, 28px 28px, 28px 28px; }

/* Masking tape */
.taped { position: relative; }
.taped::before, .taped::after {
  content: ""; position: absolute; z-index: 3; width: 104px; height: 30px; pointer-events: none;
  background: rgba(255, 233, 168, .82) var(--grain);
  clip-path: polygon(3% 8%, 9% 0, 15% 9%, 22% 1%, 30% 8%, 38% 0, 46% 9%, 55% 1%, 63% 8%, 71% 0, 79% 9%, 87% 1%, 94% 9%, 100% 3%, 98% 92%, 91% 100%, 84% 91%, 76% 100%, 68% 92%, 60% 100%, 52% 91%, 44% 100%, 36% 92%, 28% 100%, 20% 91%, 12% 100%, 5% 92%, 0 97%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.taped::before { left: -22px; top: 10px; transform: rotate(-38deg); }
.taped::after { right: -22px; top: 10px; transform: rotate(38deg); }
.taped--pink::before, .taped--pink::after { background-color: rgba(255, 143, 199, .78); }
.taped--top::before { left: 50%; top: -16px; transform: translateX(-50%) rotate(-3deg); }
.taped--top::after { display: none; }

/* Halftone over photos (print look) */
.feature-media::after, .shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(27, 26, 58, .22) .9px, transparent 1.4px) 0 0 / 5px 5px;
  mix-blend-mode: multiply; opacity: .55;
}
.shot { position: relative; }
.shot figcaption { position: relative; z-index: 1; }

/* Studio band: Ben-Day dots and a big outlined burst */
.studio { position: relative; overflow: hidden; isolation: isolate; background-image: var(--grain-light); }
.studio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 2px, transparent 2.6px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(160deg, transparent 35%, #000 100%); mask-image: linear-gradient(160deg, transparent 35%, #000 100%);
}
.studio::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -150px; bottom: -190px; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M200 12 L229 53 L272 26 L283 75 L333 67 L325 117 L374 128 L347 171 L388 200 L347 229 L374 272 L325 283 L333 333 L283 325 L272 374 L229 347 L200 388 L171 347 L128 374 L117 325 L67 333 L75 283 L26 272 L53 229 L12 200 L53 171 L26 128 L75 117 L67 67 L117 75 L128 26 L171 53Z' fill='none' stroke='%23FFC83D' stroke-width='5'/%3E%3Ccircle cx='200' cy='200' r='90' fill='none' stroke='%23FF8FC7' stroke-width='5' stroke-dasharray='14 10'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: spin 90s linear infinite;
}

/* Sun band: pop-art pink dots */
.band--sun { position: relative; isolation: isolate; background-image: var(--grain); }
.band--sun::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 95, 162, .55) 2.2px, transparent 2.8px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 55%); mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 55%);
}

/* Lined paper for cards that hold writing */
.lined {
  background-color: #fff;
  background-image: var(--grain), linear-gradient(90deg, transparent 38px, rgba(255, 75, 62, .35) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 31px, rgba(76, 123, 232, .16) 31px 32px);
}
.signup.lined { background-position: 0 0, 0 0, 0 18px; }

/* Footer: faint halftone */
.site-footer { position: relative; isolation: isolate; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 1.4px, transparent 2px) 0 0 / 10px 10px;
}

/* Feature card + platform cards: paper fill */
.feature, .platform, .faq details, .contact-form, .level--normal, .file, .floor, .memo { background-image: var(--grain); }
.platform--soon { background-image: var(--grain), repeating-linear-gradient(-45deg, transparent 0 14px, rgba(122, 92, 255, .05) 14px 28px); }

/* ---------- Pigslaughter page in pink ---------- */
.game-hero { isolation: isolate; }
.game-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 95, 162, .42) 1.8px, transparent 2.4px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 35%, #000 0, rgba(0,0,0,.6) 25%, transparent 60%);
  mask-image: radial-gradient(ellipse at 85% 35%, #000 0, rgba(0,0,0,.6) 25%, transparent 60%);
}
.game-hero .wrap { position: relative; }
.game-title .stamp { color: var(--pink); }
.screen { box-shadow: 10px 10px 0 var(--pink); }
.store--ios .stamp { color: var(--pink); }
.breadcrumb a:hover { color: var(--pink); }

.factbar { background-color: var(--pink); background-image: var(--grain); border-bottom: 0; position: relative; }
.factbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; z-index: 2;
  background: linear-gradient(-45deg, transparent 6px, var(--pink) 0) 0 0 / 12px 10px, linear-gradient(45deg, transparent 6px, var(--pink) 0) 0 0 / 12px 10px;
  transform: scaleY(-1);
}
.factbar dt { color: rgba(27, 26, 58, .78); }
.factbar dl > div { border-color: rgba(27, 26, 58, .22); }

.band--pink { background-color: var(--pink-soft); background-image: var(--grain); position: relative; isolation: isolate; }
.band--pink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 95, 162, .3) 1.6px, transparent 2.2px) 0 0 / 12px 12px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%); mask-image: linear-gradient(180deg, #000, transparent 40%);
}
.faq summary::after { color: var(--pink-deep); }
.faq details[open] { border-color: var(--pink-deep); box-shadow: 5px 5px 0 var(--pink); }

/* Memo: ruled paper, margin line, coffee ring, paperclip */
.memo {
  background-color: #fff;
  background-image: var(--coffee), var(--grain), repeating-linear-gradient(transparent 0 27px, rgba(76, 123, 232, .13) 27px 28px);
  background-size: 190px 190px, auto, auto;
  background-position: right -40px bottom -50px, 0 0, 0 12px;
  background-repeat: no-repeat, repeat, repeat;
  box-shadow: 10px 10px 0 var(--pink);
}
.memo::after {
  content: ""; position: absolute; left: 34px; top: -18px; width: 22px; height: 58px;
  border: 3px solid #8A8FA3; border-radius: 12px; border-bottom-color: #8A8FA3; transform: rotate(6deg);
  box-shadow: inset 0 0 0 3px transparent; background: linear-gradient(transparent 0 0);
}

/* Employee files: hole punches and a tint */
.file { padding-left: 34px; }
.file .punch { position: absolute; left: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-soft); box-shadow: inset 1.5px 1.5px 0 rgba(27, 26, 58, .35); border: 1.5px solid rgba(27, 26, 58, .35); }
.file .punch:nth-of-type(1) { top: 26%; }
.file .punch:nth-of-type(2) { top: 72%; }
.meter i { background: var(--pink-deep); }
.file-head img { background: #F1E9DE; }

/* Floors: elevator panel */
.floor-panel {
  border: 3px solid var(--ink); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 32px);
  background-color: #D9DCE3;
  background-image: var(--grain), repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 4px), linear-gradient(160deg, #EEF0F4, #C6CAD3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 8px 8px 0 var(--ink);
}
.floor-panel .floors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.floor { border-top-width: 2.5px; border-left: 8px solid var(--c); grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; }
.floor-btn { width: 60px; height: 60px; font-size: 1.35rem; box-shadow: 0 0 0 4px var(--c), 2px 4px 0 4px var(--ink); }
.floor-btn.is-small { font-size: 1rem; }
.floor h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.floor .code { margin-bottom: 4px; }

@media (max-width: 860px) { .floor-panel .floors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .floor-panel .floors { grid-template-columns: 1fr; } }
.hazards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; list-style: none; }
.hazards li { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--t-sm); font-weight: 500; }
.hazards li::before { content: "⚠"; color: var(--sun); margin-right: 8px; }

/* Arsenal: blueprint */
.blueprint {
  background-color: #1E2A5A;
  background-image: var(--grain-light), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 240px 240px, 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.weapon { background-color: var(--paper); background-image: var(--grain); }
.weapon img { width: 100%; max-width: 168px; height: auto; aspect-ratio: 4 / 3; mix-blend-mode: normal; filter: drop-shadow(3px 4px 0 rgba(27, 26, 58, .18)); }
.weapon--classified { background: transparent; }
.weapon--classified span { font-weight: 500; }
.abilities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; margin-top: 18px; }
.abilities li { border: 2px solid rgba(255, 251, 242, .5); border-radius: var(--r-md); padding: 16px; display: grid; gap: 6px; align-content: start; background: rgba(255, 255, 255, .04); }
.abilities h4 { font-family: var(--f-ui); font-weight: 600; font-size: 1.05rem; color: var(--bubble); }
.abilities p { font-size: var(--t-sm); color: var(--on-dark-muted); line-height: 1.45; }
.sub-head { font-family: var(--f-display); font-size: var(--t-xl); margin-top: 56px; }
.sub-lede { color: var(--on-dark-muted); margin-top: 8px; max-width: 40rem; }
@media (max-width: 1000px) { .abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .abilities { grid-template-columns: 1fr; } }

/* Features list */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.features li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border: 2.5px solid var(--ink); border-radius: var(--r-md); background-color: #fff; background-image: var(--grain); }
.features .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c); border: 2px solid var(--ink); transform: rotate(-5deg); }
.features .ico svg { width: 24px; height: 24px; }
.features h3 { font-family: var(--f-ui); font-weight: 600; font-size: 1.1rem; margin-bottom: 2px; }
.features p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* Store ticket edge on the Steam card */
.platform--steam { border-top-width: 3px; }
.platform--steam::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -3px; height: 6px;
  background: radial-gradient(circle at 6px 0, var(--paper) 4px, transparent 4.5px) 0 0 / 14px 6px;
}
.price-note { font-weight: 600; font-size: 1.05rem; }
.price-note small { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--ink-soft); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { .studio::after { animation: none; } }

/* Tape needs room outside clipped boxes */
.feature.taped { overflow: visible; }
.feature-media { overflow: hidden; border-radius: calc(var(--r-lg) - 3px) 0 0 calc(var(--r-lg) - 3px); }
@media (max-width: 860px) { .feature-media { border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; } }
.shot.taped { overflow: visible; }
.shot picture { display: block; overflow: hidden; border-radius: 11px 11px 0 0; position: relative; }
.shot.taped::after { content: none; }
.screen-wrap.taped::before { left: -18px; top: 4px; }
.screen-wrap.taped::after { right: -14px; top: 0; }
.floor { border: 2.5px solid var(--ink); border-left: 8px solid var(--c); }
.file-head img { width: 104px; height: 110px; object-position: 50% 20%; }
.weapon--classified span { font-size: var(--t-sm); line-height: 1.4; max-width: 22rem; }

.feature-media .stamp { top: auto; bottom: 18px; left: 18px; }
html, body { overflow-x: clip; }
@media (max-width: 600px) { .taped::before { left: -8px; } .taped::after { right: -8px; } .screen-wrap.taped::before { left: -6px; } .screen-wrap.taped::after { right: -6px; } }