/* Keep incoming section links from the former pococo.ai catalogue visible. */
#next, #how, #feel, #join { scroll-margin-top: 88px; }
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin-variable-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme:light;
  --ink:#2c2a29;
  --paper:#f1ede7;
  --card:#f7f4ed;
  --elev:#eae5dc;
  --muted:#5f5c58;
  --red:#8f2a1e;
  --red-soft:#f0e3de;
  --green:#325e3e;
  --green-soft:#e6efe5;
  --blue:#364e7a;
  --blue-soft:#e4e8f0;
  --gold:#8e651e;
  --gold-soft:#efe9d8;
  --line:color-mix(in srgb,var(--red) 10%,#d8d1c6);
  --shadow:0 18px 55px color-mix(in srgb,var(--red) 8%,transparent)}

[data-theme=dark] {
  color-scheme:dark;
  --ink:#eceae4;
  --paper:#181513;
  --card:#221e1b;
  --elev:#2a2522;
  --muted:#c6c2ba;
  --red:#dd6a55;
  --red-soft:#38211d;
  --green:#729d7d;
  --green-soft:#1e2e22;
  --blue:#9dabd4;
  --blue-soft:#1e2433;
  --gold:#e7c171;
  --gold-soft:#332916;
  --line:color-mix(in srgb,var(--red) 18%,#3a342f);
  --shadow:0 20px 60px rgba(0,0,0,.28)}
[data-theme=dark] .button {
  background:#8f2a1e;
  border-color:var(--red);
  color:#fff}
[data-theme=dark] .button--ghost {
  background:var(--card);
  color:var(--red);
  border-color:var(--red)}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.75 "Sora",system-ui,-apple-system,"Segoe UI",sans-serif}
.games-home { isolation:isolate; background:transparent }
.landscape-canvas,#dotCanvas {
  position:fixed;
  inset:0;
  pointer-events:none}
.landscape-canvas { z-index:-2; background:var(--paper) }
#dotCanvas { z-index:-1 }
.games-home .top { background:color-mix(in srgb,var(--games-wash,var(--paper)) 90%,transparent) }
a {
  color:inherit;
  text-underline-offset:.2em}
img {
  display:block;
  max-width:100%;
  height:auto}
.skip {
  position:absolute;
  left:-999px}
.skip:focus {
  left:1rem;
  top:1rem;
  z-index:9;
  background:var(--card);
  padding:.7rem;
  border:2px solid}
.shell {
  width:min(1120px,calc(100% - 2rem));
  margin:auto}
.top {
  position:sticky;
  top:0;
  z-index:5;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px)}
.top__in {
  min-height:68px;
  display:flex;
  align-items:center;
  gap:1rem}
.brand {
  font-family:"Outfit",system-ui,sans-serif;
  font-weight:500;
  text-decoration:none;
  letter-spacing:-.04em;
  font-size:1.25rem}
.brand__games { color:var(--red) }
.top nav {
  margin-left:auto;
  display:flex;
  gap:.8rem;
  align-items:center}
.iconbtn,.lang {
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  padding:.4rem .65rem;
  font:inherit;
  font-weight:600;
  text-decoration:none;
  border-radius:99px}
.hero {
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5rem)}
.hero > div {
  max-width:760px}
.eyebrow,.status {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  color:var(--red)}
.hero h1 {
  font-family:"Literata",Georgia,serif;
  font-weight:350;
  font-size:clamp(3.2rem,7vw,6.6rem);
  line-height:1.01;
  letter-spacing:-.045em;
  margin:0 0 1.5rem;
  max-width:9ch}
.hero h1 span {
  display:block}
.hero--compact {
  --hero-wordmark-size:clamp(112px,15vw,210px);
  padding-top:72px;
  text-align:center}
.hero--compact > div { max-width:none }
/* Match the main homepage's wordmark size and distance from the page top.
   The Games header occupies 68px of the main site's 140px opening offset. */
.hero__wordmark {
  position:relative;
  top:-1ex;
  display:flex;
  justify-content:center;
  width:fit-content;
  margin:0 auto 72px;
  font-family:"Outfit","Helvetica Neue",sans-serif;
  font-size:var(--hero-wordmark-size);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.04em;
  white-space:nowrap;
  user-select:none}
.hero--compact h1 {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.05em .22em;
  max-width:none;
  font-size:clamp(3.2rem,6.1vw,5.5rem);
  line-height:1.12}
.hero--compact .lead { max-width:none }
.hero--compact .actions { justify-content:center }
.hero h1 em {
  color:var(--red);
  font-style:normal}
html:lang(ja) .hero h1 {
  font-family:system-ui,"Yu Gothic UI","Yu Gothic","Hiragino Sans",sans-serif;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.035em}
.lead {
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.55;
  max-width:31rem}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem}
.button {
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  padding:.8rem 1rem;
  border:1px solid var(--red);
  border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in srgb,var(--red) 18%,transparent)}
.button--ghost {
  background:transparent;
  color:var(--red)}
.section {
  padding:4.5rem 0}
.section,[id] {
  scroll-margin-top:88px}
.section h2,.feature h3 {
  font-family:"Literata",Georgia,serif;
  font-weight:350;
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1;
  letter-spacing:-.05em;
  margin:.4rem 0 2rem}
.feature h3 { font-size:clamp(2rem,4vw,3.3rem) }
.feature {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,6vw,5rem);
  align-items:center}
.frame {
  margin:0;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden}
.frame img {
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover}
.ticks {
  padding:0;
  list-style:none}
.ticks li {
  padding:.35rem 0}
.shelf {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem}
.game {
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden}
.game figure {
  margin:0;
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  background:var(--gold-soft)}
.game img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain}
.game--hachi img {
  object-position:center}
.status {
  position:absolute;
  top:.75rem;
  left:.75rem;
  background:color-mix(in srgb,var(--card) 90%,transparent);
  color:var(--red);
  padding:.35rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(8px)}
.game__body {
  padding:1.3rem}
.game h3 {
  font-family:"Literata",Georgia,serif;
  font-weight:450;
  font-size:2rem;
  margin:0}
.working {
  font-size:.9rem;
  color:var(--muted)}
.values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem}
.value {
  padding:1.3rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card)}
.value:nth-child(1) { background:var(--blue-soft)}
.value:nth-child(2) { background:var(--green-soft)}
.value:nth-child(3) { background:var(--gold-soft)}
.value h3 {
  margin:.25rem 0}
.contact {
  background:var(--card);
  color:var(--ink);
  padding:clamp(2rem,7vw,5rem);
  border:1px solid var(--line);
  border-radius:20px}
.contact h2 {
  margin-top:0;
  color:var(--red)}
.join {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:2rem}
.join__option {
  min-height:148px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease}
.join__option:nth-child(1) { border-top:4px solid var(--blue)}
.join__option:nth-child(2) { border-top:4px solid var(--green)}
.join__option:nth-child(3) { border-top:4px solid var(--gold)}
.join__option:hover { transform:translateY(-3px)}
.join__option b { font-family:"Literata",Georgia,serif;font-size:1.15rem}
.join__option span { color:var(--muted);font-size:.9rem}
body .family-footer,body .family-footer__base { border-top:0 }
:focus-visible {
  outline:3px solid var(--red);
  outline-offset:3px}
@media(min-width:1001px) {
  /* The main site's 100vh hero vertically centers its content on tall
     desktops. Its other rows, gaps and logo margin total 534.8px.
     Include that same centering space, plus its 140px/80px padding,
     instead of matching only the minimum opening offset. */
  .hero--compact {
    --main-hero-height:calc(var(--hero-wordmark-size) * .92 + 534.8px + 220px);
    padding-top:calc(72px + max(0px, (100vh - var(--main-hero-height)) / 2))}
}
@media(min-width:761px) and (max-height:600px) and (orientation:landscape) {
  /* Main-site short-window padding is 104px, including our 68px header. */
  .hero--compact { padding-top:36px }
}
@media(max-width:760px) {
  .hero--compact { padding-top:44px }
  .hero__wordmark {
  top:0;
  font-size:clamp(4.5rem,23.5vw,7.5rem);
  margin-bottom:36px}
  .feature {
  grid-template-columns:1fr}
.shelf,.values {
  grid-template-columns:1fr}
.brand {
  display:inline-flex;
  min-height:42px;
  align-items:center}
.top nav {
  gap:.4rem;
  font-size:.8rem}
.top .lang {
  min-height:40px;
  display:inline-flex;
  align-items:center}
.top .iconbtn {
  min-width:42px;
  min-height:40px}
.join {
  grid-template-columns:1fr}
.frame {
  max-width:30rem}
.section {
  padding:3rem 0}
}
@media(max-width:480px) {
  .hero--compact { padding-top:92px }
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}