:root {
  color-scheme: dark;
  --ink: #0b0a18;
  --ink-2: #121027;
  --paper: #f7f2e8;
  --muted: #b9b5c9;
  --line: rgba(255,255,255,.15);
  --sun: #f5d76e;
  --coral: #ff6f61;
  --cyan: #55dfe5;
  --violet: #9e7cff;
  --mint: #9be7c4;
  --max: 1240px;
  --radius: 28px;
  --shadow: 0 30px 90px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 11% 4%, rgba(158,124,255,.15), transparent 29rem),
    radial-gradient(circle at 92% 18%, rgba(85,223,229,.10), transparent 24rem),
    var(--ink);
  color: var(--paper);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  z-index: 20;
  mix-blend-mode: soft-light;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button, select { font: inherit; }
::selection { background: var(--sun); color: var(--ink); }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  padding: .65rem 1rem;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-180%);
  z-index: 99;
  border-radius: 999px;
}
.skip-link:focus { transform: none; }

.shell { width: min(calc(100% - 2.2rem), var(--max)); margin-inline: auto; }
.eyebrow {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sun);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11,10,24,.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: 1.25rem;
  white-space: nowrap;
}
.brand-mark {
  width: 34px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--sun);
  color: var(--ink);
  border-radius: 10px 10px 10px 3px;
  transform: rotate(-4deg);
  box-shadow: 4px 4px 0 var(--coral);
  font-size: 1rem;
}
.brand em { color: var(--coral); font-style: normal; }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .2rem;
}
.nav-links a {
  padding: .55rem .75rem;
  text-decoration: none;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 650;
  border-radius: 999px;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper); background: rgba(255,255,255,.07); }
.language-wrap { position: relative; margin-left: .5rem; }
.language-wrap::before { content: "◎"; position: absolute; left: .8rem; top: 50%; transform: translateY(-52%); pointer-events: none; color: var(--cyan); }
.language-select {
  appearance: none;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .62rem 2rem .62rem 2.15rem;
  min-width: 132px;
  cursor: pointer;
}
.language-wrap::after { content: "⌄"; position: absolute; right: .8rem; top: 44%; transform: translateY(-50%); pointer-events: none; }
.menu-toggle { display: none; }

.hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.hero h1, .page-intro h1 {
  margin: 0;
  max-width: 870px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(3.7rem, 7.6vw, 7.6rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.hero h1 i { font-style: italic; color: var(--sun); }
.hero-copy > p:not(.eyebrow) { max-width: 560px; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .72rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 780;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--sun); color: var(--ink); border-color: var(--sun); box-shadow: 5px 5px 0 var(--coral); }
.button-quiet { background: rgba(255,255,255,.04); }
.arrow { display: inline-block; transition: transform .2s ease; }
.button:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }

.hero-stack { min-height: 520px; position: relative; }
.stack-card {
  position: absolute;
  width: min(82%, 420px);
  aspect-ratio: 4/5;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-origin: 50% 120%;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.stack-card img { width: 100%; height: 100%; object-fit: cover; }
.stack-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(9,8,20,.8)); }
.stack-card span { position: absolute; left: 1.35rem; bottom: 1.1rem; z-index: 2; font-weight: 900; font-size: 1.2rem; }
.stack-card:nth-child(1) { left: 0; top: 5%; transform: rotate(-11deg) translateX(-4%); }
.stack-card:nth-child(2) { right: 3%; top: 10%; transform: rotate(10deg) translateX(5%); }
.stack-card:nth-child(3) { left: 16%; top: 0; transform: rotate(-1deg); z-index: 2; }
.stack-card:nth-child(4) { left: 18%; top: -2%; transform: rotate(2deg); z-index: 3; }
.stack-card:nth-child(4) img { object-position:center 34%; }
.hero-stack:hover .stack-card:nth-child(1) { transform: rotate(-16deg) translateX(-15%); }
.hero-stack:hover .stack-card:nth-child(2) { transform: rotate(15deg) translateX(14%); }
.hero-stack:hover .stack-card:nth-child(4) { transform:rotate(4deg) translateY(-2%); }

.ticker { border-block: 1px solid var(--line); overflow: hidden; background: var(--sun); color: var(--ink); transform: rotate(-1deg) scale(1.01); }
.ticker-track { width: max-content; display: flex; gap: 2rem; padding: .8rem 0; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; animation: ticker 24s linear infinite; }
.ticker-track span::after { content: "✦"; margin-left: 2rem; color: var(--coral); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding-block: clamp(5rem, 10vw, 9rem); }
.section-head { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.section-head h2 { margin: 0; font: 500 clamp(2.6rem, 5vw, 5rem)/.95 Georgia, serif; letter-spacing: -.045em; }
.section-head p { margin: 0 0 .4rem; max-width: 570px; color: var(--muted); justify-self: end; font-size: 1.08rem; }

.game-list { display: grid; gap: 1rem; }
.game-row {
  --accent: var(--sun);
  min-height: 360px;
  display: grid;
  grid-template-columns: 72px 1.05fr .95fr;
  gap: 1.2rem;
  align-items: stretch;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  text-decoration: none;
  background: rgba(255,255,255,.035);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.game-row:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent), white 25%); background: rgba(255,255,255,.06); }
.game-row.blockz { --accent: #ff8d78; }
.game-row.chroma { --accent: #6fe8ef; }
.game-row.bible { --accent: #f2c968; }
.game-row.anibubbles { --accent: #72c9ff; }
.game-number { font: italic 2.2rem Georgia, serif; color: var(--accent); padding: .7rem; }
.game-info { align-self: center; padding: 2rem 1rem; }
.game-info h3 { margin: 0; font-size: clamp(2.25rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -.06em; }
.game-info p { max-width: 470px; margin: 1.2rem 0 1.8rem; color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag { border: 1px solid color-mix(in srgb, var(--accent), transparent 45%); color: var(--accent); border-radius: 999px; padding: .25rem .65rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.game-thumb { min-height: 320px; border-radius: 20px; overflow: hidden; position: relative; }
.game-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.game-row:hover .game-thumb img { transform: scale(1.035); }
.game-thumb::after { content:"↗"; position:absolute; right:1rem; top:1rem; width:45px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:var(--ink); font-weight:900; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.principle { min-height: 290px; padding: 1.7rem; border-radius: 24px; color: var(--ink); display:flex; flex-direction:column; justify-content:space-between; }
.principle:nth-child(1) { background: var(--sun); transform: rotate(-1.2deg); }
.principle:nth-child(2) { background: var(--cyan); transform: translateY(1.8rem) rotate(1deg); }
.principle:nth-child(3) { background: var(--coral); transform: rotate(-.6deg); }
.principle strong { font-size: 3.3rem; line-height: 1; font-family: Georgia, serif; font-style: italic; }
.principle h3 { font-size: 1.35rem; margin: auto 0 .5rem; }
.principle p { margin: 0; line-height: 1.45; }

.page-intro { padding-block: clamp(5rem, 11vw, 10rem) clamp(3rem, 6vw, 6rem); }
.page-intro h1 { font-size: clamp(4rem, 9vw, 9rem); }
.page-intro .lede { max-width: 760px; color: var(--muted); font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 2rem 0 0; }

.game-hero {
  --accent: var(--sun);
  --accent2: var(--coral);
  min-height: 720px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.game-hero.blockz { --accent:#ff927e; --accent2:#a7e8cc; }
.game-hero.chroma { --accent:#69e7ef; --accent2:#b18bff; }
.game-hero.bible { --accent:#f3cb69; --accent2:#d98265; }
.game-hero.anibubbles { --accent:#72c9ff; --accent2:#ffce55; }
.game-hero.anibubbles .cover-frame img,.game-row.anibubbles .game-thumb img { object-position:center 34%; }
.game-hero h1 { margin:0; font:500 clamp(4rem, 8vw, 8.5rem)/.82 Georgia,serif; letter-spacing:-.07em; }
.game-hero h1 small { display:block; margin-top:1.2rem; font:850 clamp(1rem,1.5vw,1.3rem)/1.2 "Segoe UI Variable",sans-serif; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); }
.game-hero .lede { max-width:600px; margin:2rem 0 0; color:var(--muted); font-size:1.2rem; }
.game-attributes { max-width:640px; margin:1rem 0 0; color:var(--paper); font-size:.88rem; font-weight:800; letter-spacing:.035em; }
.status-note { display:inline-flex; align-items:center; gap:.55rem; margin-top:1.4rem; color:var(--accent); font-weight:800; font-size:.9rem; }
.status-note::before { content:""; width:9px; aspect-ratio:1; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,currentColor,transparent 80%); }
.cover-frame { position:relative; }
.cover-frame::before { content:""; position:absolute; width:45%; height:25%; background:var(--accent); border-radius:50%; filter:blur(80px); opacity:.35; left:25%; bottom:-8%; }
.cover-frame img { position:relative; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:38% 62% 42% 58% / 48% 35% 65% 52%; border:1px solid rgba(255,255,255,.23); box-shadow:var(--shadow); }
.cover-stamp { position:absolute; right:-1rem; bottom:1rem; width:118px; aspect-ratio:1; display:grid; place-items:center; text-align:center; padding:1rem; border-radius:50%; background:var(--accent); color:var(--ink); font-size:.75rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; transform:rotate(9deg); box-shadow:0 0 0 8px var(--ink),0 0 0 9px var(--accent); }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature { min-height:230px; border-top:1px solid var(--line); padding:1.4rem .4rem 0; }
.feature-index { font:italic 1.5rem Georgia,serif; color:var(--accent,var(--sun)); }
.feature h3 { font-size:1.3rem; margin:2.5rem 0 .5rem; }
.feature p { margin:0; color:var(--muted); }
.quote-panel { margin-top:5rem; padding:clamp(2rem,5vw,5rem); background:var(--paper); color:var(--ink); border-radius:var(--radius); display:grid; grid-template-columns:.45fr 1.55fr; gap:2rem; }
.quote-panel blockquote { margin:0; font:italic 500 clamp(2rem,4vw,4.5rem)/1 Georgia,serif; letter-spacing:-.045em; }
.legal-shortcuts { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }

.manifesto { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,7vw,7rem); align-items:start; }
.manifesto-sticky { position:sticky; top:120px; }
.manifesto-copy p { margin:0 0 1.5rem; font-size:clamp(1.25rem,2.2vw,1.8rem); color:var(--muted); }
.manifesto-copy p:first-child { color:var(--paper); }
.studio-facts { margin-top:5rem; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.studio-fact { padding:2rem 1.5rem; border-right:1px solid var(--line); }
.studio-fact:last-child { border-right:0; }
.studio-fact strong { display:block; font:italic 500 3.5rem/1 Georgia,serif; color:var(--sun); }
.studio-fact span { color:var(--muted); }
.contact-card { margin-top:5rem; background:linear-gradient(125deg,var(--violet),var(--cyan)); color:var(--ink); border-radius:var(--radius); padding:clamp(2rem,6vw,5rem); }
.contact-card h2 { max-width:700px; margin:0; font:500 clamp(2.6rem,5vw,5rem)/.95 Georgia,serif; letter-spacing:-.05em; }
.contact-card a { display:inline-block; margin-top:2rem; font-size:clamp(1.05rem,2vw,1.5rem); font-weight:900; text-underline-offset:.25rem; overflow-wrap:anywhere; }

.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-top:0; }
.support-card { padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); }
.support-card ul { margin:0 0 2rem; padding-left:1.3rem; color:#d5d1df; }
.support-card li { margin-bottom:.8rem; }
.support-card > p:last-child { color:var(--muted); }
.support-game { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.support-game a { color:var(--cyan); text-decoration:none; font-weight:750; font-size:.9rem; }
.support-game a:hover { text-decoration:underline; text-underline-offset:.22rem; }
.error-page { min-height:70vh; display:flex; flex-direction:column; justify-content:center; }

.legal-layout { display:grid; grid-template-columns:280px 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; padding-bottom:8rem; }
.legal-nav { position:sticky; top:110px; display:grid; gap:.5rem; }
.legal-nav button { width:100%; padding:.9rem 1rem; text-align:left; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); color:var(--muted); cursor:pointer; font-weight:750; }
.legal-nav button:hover,.legal-nav button[aria-pressed="true"] { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.legal-meta { margin-top:1rem; color:var(--muted); font-size:.85rem; }
.legal-document { max-width:820px; }
.legal-fallback { padding-bottom:8rem; }
.legal-fallback .legal-document { margin-inline:auto; }
.legal-document h2 { margin:0 0 1rem; font:500 clamp(2.4rem,5vw,4.7rem)/.95 Georgia,serif; letter-spacing:-.05em; }
.legal-document .legal-lede { color:var(--muted); font-size:1.15rem; margin-bottom:3rem; }
.legal-section { padding:2rem 0; border-top:1px solid var(--line); }
.legal-section h3 { margin:0 0 .8rem; font-size:1.2rem; }
.legal-section p { margin:.5rem 0; color:#d5d1df; }
.legal-section ul { color:#d5d1df; padding-left:1.2rem; }
.legal-section a { color:var(--cyan); text-underline-offset:.22rem; }
.legal-notice { margin-bottom:2.5rem; padding:1rem 1.1rem; border-left:4px solid var(--sun); background:rgba(245,215,110,.08); color:#e9e2c7; border-radius:0 12px 12px 0; }

.site-footer { border-top:1px solid var(--line); padding-block:3.5rem; background:#080713; }
.footer-grid { display:grid; grid-template-columns:1.1fr .7fr .7fr; gap:2rem; }
.footer-grid p { color:var(--muted); max-width:420px; }
.footer-links { display:grid; align-content:start; gap:.55rem; }
.footer-links strong { color:var(--sun); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.4rem; }
.footer-links a { color:var(--muted); text-decoration:none; }
.footer-links a:hover { color:var(--paper); }
.footer-bottom { margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; color:#858094; font-size:.85rem; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .nav { min-height:68px; flex-wrap:wrap; padding-block:.7rem; }
  .menu-toggle { margin-left:auto; display:grid; place-items:center; width:42px; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--paper); cursor:pointer; }
  .nav-links { order:3; width:100%; display:none; align-items:stretch; flex-direction:column; padding:.6rem 0; }
  .nav-links.is-open { display:flex; }
  .nav-links a { padding:.7rem .9rem; }
  .language-wrap { margin:0; }
  .language-select { width:100%; }
  .hero,.game-hero { grid-template-columns:1fr; min-height:0; }
  .hero-stack { min-height:480px; width:min(100%,560px); margin-inline:auto; }
  .section-head { grid-template-columns:1fr; }
  .section-head p { justify-self:start; }
  .game-row { grid-template-columns:52px 1fr; }
  .game-thumb { grid-column:1/-1; grid-row:2; }
  .game-info { padding:1rem .4rem; }
  .feature-grid { grid-template-columns:1fr; }
  .cover-stamp { right:.75rem; }
  .feature { min-height:190px; }
  .feature h3 { margin-top:1.4rem; }
  .quote-panel { grid-template-columns:1fr; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-sticky { position:static; }
  .legal-layout { grid-template-columns:1fr; }
  .legal-nav { position:static; grid-template-columns:repeat(3,1fr); }
  .support-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child { grid-column:1/-1; }
}

@media (max-width: 620px) {
  .shell { width:min(calc(100% - 1.25rem),var(--max)); }
  .brand { font-size:1.08rem; }
  .hero { padding-top:3.8rem; }
  .hero h1,.page-intro h1 { font-size:clamp(3.25rem,18vw,5rem); }
  .hero-stack { min-height:370px; }
  .stack-card { width:78%; border-radius:22px; }
  .game-row { display:block; min-height:0; border-radius:22px; }
  .game-number { padding:.25rem; }
  .game-thumb { min-height:240px; }
  .principles { grid-template-columns:1fr; }
  .principle { min-height:230px; transform:none!important; }
  .game-hero h1 { font-size:clamp(3.6rem,20vw,6rem); }
  .game-hero.anibubbles h1 { font-size:clamp(3rem,14vw,4.6rem); }
  .game-hero .hero-actions { flex-direction:column; align-items:stretch; }
  .game-hero .hero-actions .button { width:100%; text-align:center; }
  .cover-stamp { width:94px; right:.3rem; font-size:.62rem; }
  .studio-facts { grid-template-columns:1fr; }
  .studio-fact { border-right:0; border-bottom:1px solid var(--line); }
  .studio-fact:last-child { border-bottom:0; }
  .legal-nav { grid-template-columns:1fr; }
  .support-game { grid-template-columns:1fr 1fr; }
  .support-game strong { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > :first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}

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