/*
 * LNLC — Lion and Lamb Casual.
 * Bones from Snowman (one game fills the screen, everything else is quiet),
 * warmth from ustwo games (pill buttons, soft serif headlines, sunny colour).
 * Colours are lifted from Roly-Poly Eggs itself: the yolk-yellow stripes of
 * its store art, the orange of its logo, the barn's sage walls and wood.
 */

:root {
  --cream: #fbf4e6;
  --paper: #fffaf0;
  --ink: #3b2a1e;
  --ink-soft: #6f5a48;
  --yolk: #f6c446;
  --yolk-deep: #efb22e;
  --orange: #f08a2c;
  --barn: #b9c2ad;
  --barn-deep: #8f9c86;
  --wood: #c98a52;
  --wood-deep: #8a5a33;
  --night: #1d1a2b;
  --line: rgba(59, 42, 30, 0.14);

  --display: "Fraunces", Georgia, serif;
  --body: "Nunito", system-ui, sans-serif;

  --radius: 22px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

/* ---------- Draft ribbon (mockup only) ---------- */

.draft-ribbon {
  background: var(--night);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 6px 12px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 244, 230, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}

.brand-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  white-space: nowrap;
}

.brand-name {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav {
  display: flex;
  gap: 8px;
}

.nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  transition: transform 0.15s ease, background 0.15s ease;
}

.nav a:hover { transform: translateY(-2px); background: #fff; }

.nav a[aria-current="page"] { background: var(--yolk); }

.nav a { white-space: nowrap; }

/* "Lion and Lamb" beside four pills is wider than a phone, so the header
   takes two rows there: the name, then the pills spread across. */
@media (max-width: 560px) {
  .site-header .wrap {
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 8px;
  }
  .brand { flex-direction: row; align-items: baseline; gap: 8px; }
  .brand-mark { font-size: 21px; }
  .brand-name { margin-top: 0; }
  .nav { width: 100%; justify-content: space-between; gap: 6px; }
  .nav a { padding: 6px 11px; font-size: 13px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18); }

.btn.light { background: var(--paper); color: var(--ink); }

.btn.ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.soon svg { width: 18px; height: 18px; }

/* ---------- Game hero (Snowman-style full-bleed panel) ---------- */

.game-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--yolk) 0 46px,
      var(--yolk-deep) 46px 92px
    );
}

/* The ground the family stands on: a wooden barn floor. */
.game-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background:
    linear-gradient(180deg, var(--wood) 0 10px, #b67a46 10px 100%);
  box-shadow: inset 0 14px 0 rgba(0, 0, 0, 0.08);
}

.game-hero .logo {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: min(560px, 78vw);
  z-index: 2;
  filter: drop-shadow(0 8px 0 rgba(120, 70, 20, 0.18));
  animation: bob 4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-2deg) translateY(-8px); }
}

.family {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: clamp(0px, 1.2vw, 18px);
  z-index: 3;
  width: min(1100px, 104vw);
  justify-content: center;
}

.family img {
  height: clamp(84px, 15vw, 210px);
  width: auto;
}

.family img.small { height: clamp(66px, 11vw, 150px); }

.family .gap { width: clamp(10px, 5vw, 80px); }

.game-hero .caption {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 var(--gutter) clamp(22px, 4vw, 44px);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  text-shadow: 0 2px 0 rgba(90, 50, 20, 0.35);
}

.game-hero .title {
  margin: 0;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.game-hero .tagline {
  margin: 4px 0 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.game-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  text-shadow: none;
}

.game-hero .soon { color: var(--ink); }

/* On a phone the pieces are stacked instead of pinned: logo, the family
   standing on the barn floor, then the name and buttons on the floor itself.
   Pinned, the logo floated over a tall empty band and the family stood on
   the title. */
@media (max-width: 640px) {
  .game-hero {
    min-height: 0 !important;
    flex-direction: column;
    align-items: stretch;
    padding-top: 36px;
  }
  .game-hero::after { display: none; }
  .game-hero .logo {
    position: static;
    width: 86vw;
    margin: 0 auto;
    transform: rotate(-3deg);
    animation: none;
  }
  .family {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin: 28px 0 -10px;
    z-index: 5;
  }
  .family .gap { width: 6px; }
  .family img.bully { display: none; }
  .game-hero .caption {
    padding-top: 26px;
    background: linear-gradient(180deg, var(--wood) 0 10px, #b67a46 10px 100%);
  }
}

/* ---------- Sister-studio panel ----------
   Breakthrough's key art is drawn on white, edge to edge, with the pilots
   along the bottom, so cropping it to fill the screen cut their faces off.
   The whole picture is shown instead, with a Snowman-style name band under it. */

.sister {
  background: #fff;
  color: #fff;
}

.sister img {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.sister .caption {
  background: var(--night);
  padding: clamp(20px, 3vw, 32px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.sister .kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}

.sister .title {
  margin: 6px 0 0;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ---------- Front door: one studio, two doors ----------
   Lion and Lamb Studio first; from there it splits into S (stories, which
   lives on lionandlamb.dev) and C (casual, which lives here). */

.gate-intro { padding: clamp(40px, 7vw, 84px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.gate-intro .lede { margin: 0 auto; }

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(78vh, 760px);
}

.door {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}

.door-s { background: var(--night); }

.door-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
  transition: transform 0.6s ease;
}

.door-s::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 16, 30, 0) 35%, rgba(20, 16, 30, 0.85) 100%);
}

.door-c {
  background: repeating-linear-gradient(-45deg, var(--yolk) 0 46px, var(--yolk-deep) 46px 92px);
}

/* The barn floor along the bottom of the casual door. */
.door-c::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: -1;
  background: linear-gradient(180deg, var(--wood) 0 10px, #b67a46 10px 100%);
}

.door-stage {
  position: absolute;
  inset: 0 0 38% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: -1;
  transition: transform 0.6s ease;
}

.door-logo { width: min(380px, 70%); transform: rotate(-3deg); filter: drop-shadow(0 6px 0 rgba(120, 70, 20, 0.18)); }

.door-family { display: flex; align-items: flex-end; gap: 6px; margin-bottom: -22px; }
.door-family img { height: clamp(80px, 10vw, 140px); width: auto; }
.door-family img.small { height: clamp(62px, 7.5vw, 104px); }

.door-caption {
  width: 100%;
  padding: clamp(22px, 3.4vw, 40px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.door-mark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
}

.door-name {
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.door-caption p { margin: 12px 0 18px; max-width: 420px; font-weight: 600; }

.door-caption .btn { text-shadow: none; }

.door:hover .door-art { transform: scale(1.04); }
.door:hover .door-stage { transform: translateY(-6px); }

@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; min-height: 0; }
  .door { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .door-art, .door-stage { transition: none; }
}

/* ---------- Content sections ---------- */

.section { padding: clamp(56px, 9vw, 112px) 0; }

.section.paper { background: var(--paper); }

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
}

.display {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  overflow-wrap: break-word;
}

.display.md { font-size: clamp(28px, 3.8vw, 44px); }

.lede {
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 28px;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- Blocks: soft 3D slabs, after ustwo ---------- */

.slab {
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper);
  box-shadow: 0 8px 0 rgba(59, 42, 30, 0.1);
}

.slab.yolk { background: var(--yolk); }
.slab.barn { background: var(--barn); }
.slab.night { background: var(--night); color: #fff; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.facts .slab { text-align: center; }

.facts strong {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  margin-bottom: 8px;
}

.facts span { font-weight: 700; font-size: 15px; }

@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Screens rail ---------- */

.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Snap to the content edge, not the screen edge. */
  scroll-padding-inline: var(--gutter);
  padding: 8px var(--gutter) 24px;
  margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: thin;
}

.rail img {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 340px);
  border-radius: 18px;
  scroll-snap-align: start;
  box-shadow: 0 8px 0 rgba(59, 42, 30, 0.1);
}

/* ---------- Characters ---------- */

.cast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cast figure {
  margin: 0;
  text-align: center;
}

.cast .slab {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 230px;
}

.cast img { max-height: 190px; width: auto; }

.cast figcaption { margin-top: 12px; font-weight: 800; }

.cast figcaption small {
  display: block;
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 720px) { .cast { grid-template-columns: repeat(2, 1fr); } .cast .slab { height: 170px; } .cast img { max-height: 140px; } }

/* ---------- Studios (about) ---------- */

.studios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.studios .slab { display: flex; flex-direction: column; gap: 10px; }

.studios .mark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
}

.studios p { margin: 0; }

.studios .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 720px) { .studios { grid-template-columns: 1fr; } }

/* ---------- Prose (about, legal) ---------- */

.prose { max-width: 720px; }

.prose p, .prose li { color: var(--ink-soft); }

.prose h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
  font-size: 26px;
  margin: 40px 0 10px;
  color: var(--ink);
}

.prose blockquote {
  margin: 0 0 28px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--ink);
}

.note {
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(240, 138, 44, 0.12);
  color: var(--ink);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #f5e9d6;
  padding: 56px 0 36px;
}

.site-footer .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}

.site-footer h3 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: 0.7;
}

.site-footer a { text-decoration: none; display: block; margin: 4px 0; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .fine {
  margin-top: 40px;
  font-size: 13px;
  opacity: 0.6;
}

@media (max-width: 720px) { .site-footer .cols { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .game-hero .logo { animation: none; }
  .btn, .nav a { transition: none; }
}

/* Korean pages: Fraunces and Nunito have no Hangul, so the browser fell back
   to a thin system serif for headings. Use the system Korean sans instead. */
:lang(ko) .display,
:lang(ko) .prose h2,
:lang(ko) .prose p,
:lang(ko) .prose li {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", var(--body);
  letter-spacing: -0.01em;
  word-break: keep-all;
}