*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper: #F7F3EC;
  --card: #FFFFFF;
  --ink: #241D18;
  --ink-soft: #5A4C40;
  --muted: #8C7C6C;
  --line: #E2D8C8;
  --hair: #EAE1D3;

  --clatter: #E08A22;
  --pandu: #3F8F58;
  --hue: #E01F45;

  --shell: 1060px;
  --radius: 18px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Baloo 2', 'Inter', sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
a { color: inherit; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; background: var(--ink); color: #fff; padding: 12px 20px; z-index: 100; }

/* ── Nav ───────────────────────────────── */

.nav { border-bottom: 1px solid var(--hair); }
.nav .inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 28px; height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.wordmark {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.02rem;
  letter-spacing: 0.22em; text-decoration: none; color: var(--ink);
}
.nav .links { display: flex; gap: 28px; }
.nav .links a {
  font-size: 0.88rem; color: var(--muted); text-decoration: none; letter-spacing: 0.02em;
}
.nav .links a:hover { color: var(--ink); }

/* ── Hero ──────────────────────────────── */

.hero { padding: 132px 0 108px; border-bottom: 1px solid var(--hair); }
.hero h1 {
  font-size: clamp(2.7rem, 7.4vw, 5rem); font-weight: 800;
  max-width: 16ch; margin-bottom: 26px;
}
.hero p {
  font-size: 1.12rem; color: var(--ink-soft); max-width: 44ch;
}

/* ── Index of games ────────────────────── */

.index { padding: 0 0 20px; }
.entry {
  display: grid; grid-template-columns: 54px 128px 1fr auto;
  gap: 32px; align-items: center;
  padding: 44px 0; border-bottom: 1px solid var(--hair);
  position: relative;
}
.entry .num {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.86rem;
  color: var(--muted); letter-spacing: 0.1em;
}
.entry .tile {
  width: 128px; height: 128px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--card);
}
.entry .tile svg { width: 100%; height: 100%; display: block; }
.entry h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 4px; }
.entry .line {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.04rem; margin-bottom: 10px;
}
.entry .said { color: var(--muted); font-size: 0.95rem; max-width: 52ch; }
.entry .go { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.entry .go a {
  font-size: 0.88rem; text-decoration: none; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 600;
}
.entry .go .play {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #FFF6EA; padding: 11px 20px; border-radius: 999px;
}
.entry .go .play svg { width: 17px; height: 17px; fill: currentColor; }
.entry .go .site {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); color: var(--ink);
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--ink);
}
.entry .go .site svg { width: 15px; height: 15px; flex-shrink: 0; }
.entry .go .site:hover { background: var(--ink); color: #FFF6EA; }

.entry.clatter .line { color: var(--clatter); }
.entry.pandu .line { color: var(--pandu); }
.entry.hue .line { color: var(--hue); }

/* ── Studio note ───────────────────────── */

.note { padding: 84px 0; border-bottom: 1px solid var(--hair); }
.note .cols { display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.note h2 {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 6px;
}
.note p { font-size: 1.06rem; color: var(--ink-soft); max-width: 58ch; }
.note p + p { margin-top: 16px; }
.note strong { color: var(--ink); font-weight: 600; }

/* ── Contact ───────────────────────────── */

.contact { padding: 84px 0; }
.contact .cols { display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.contact h2 {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 10px;
}
.contact a.mail {
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.2rem); text-decoration: none; color: var(--ink);
  border-bottom: 2px solid var(--line);
}
.contact a.mail:hover { border-color: var(--ink); }
.contact p { color: var(--muted); font-size: 0.95rem; margin-top: 16px; }

/* ── Footer ────────────────────────────── */

.foot { background: var(--ink); color: #E4D8C9; padding: 54px 0 44px; }
.foot .inner { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.foot .cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(228, 216, 201, 0.14);
}
.foot h3 {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #A2917F; margin-bottom: 14px;
}
.foot ul { list-style: none; display: grid; gap: 9px; }
.foot a { text-decoration: none; font-size: 0.89rem; opacity: 0.82; }
.foot a:hover { opacity: 1; }
.foot .base {
  padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.78rem; color: #8E7F6F;
}

/* ── Responsive ────────────────────────── */

@media (max-width: 880px) {
  .entry { grid-template-columns: 96px 1fr; gap: 22px; padding: 36px 0; }
  .entry .num { grid-column: 1 / -1; margin-bottom: -10px; }
  .entry .tile { width: 96px; height: 96px; }
  .entry .go { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 18px; align-items: center; margin-top: 18px; }
  .note .cols, .contact .cols { grid-template-columns: 1fr; gap: 18px; }
  .hero { padding: 86px 0 72px; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .entry { grid-template-columns: 1fr; }
  .entry .tile { width: 84px; height: 84px; }
  .entry .go { grid-column: 1; }
  .foot .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }