/* Lost Biscuit Games. Pixel art is the north star: hard edges, notched corners, stepped motion, no blur. */
:root {
  --ink: #141020; --night: #1e1c26; --deep: #262333; --panel: #2e2a40; --dusk: #3b3560;
  --cream: #f6e3b4; --biscuit: #e0a35a; --gold: #f2b84b; --gold-dk: #b9781a; --orange: #e08a3a;
  --teal: #6cc3b4; --teal-dk: #2f7672; --red: #c0392b; --khaki: #b5a77a; --muted: #b9adc9;
  --px: 4px;
  --head: "Silkscreen", monospace; --body: "Pixelify Sans", system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--night) }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; color: var(--cream); font: 400 20px/1.55 var(--body); font-variant-ligatures: none; -webkit-font-smoothing: none; overflow-x: hidden }   /* Pixelify joins "fi" into one glyph */
img { image-rendering: pixelated; max-width: 100%; height: auto; display: block }
a { color: var(--gold) }
b { color: var(--gold); font-weight: 600 }
.nowrap { white-space: nowrap }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 8px 12px; z-index: 10 }
.skip:focus { left: 8px }
:focus-visible { outline: var(--px) solid var(--teal); outline-offset: var(--px) }

/* Notched pixel box: four flat shadows leave the corners cut, like a hand-drawn 9-slice. */
.px, .btn, .game, .kit-item, .follow, .bubble, .badge, .tags li, .frame {
  --edge: var(--ink);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge),
              calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge);
}

/* ───────── Hero ───────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: -1 }
.nav { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 48px) }
.nav-mark { display: block; transition: transform .2s steps(2) }
.nav-mark img { width: 74px; height: 68px; filter: drop-shadow(0 4px 0 rgb(20 16 32 / .55)) }
.nav-mark:hover { transform: translateY(-4px) }
.nav-links { display: flex; gap: clamp(12px, 3vw, 32px) }
.nav-links a { font: 14px var(--head); color: var(--cream); text-decoration: none; padding: 6px 2px; border-bottom: var(--px) solid transparent }
.nav-links a:hover { color: var(--gold); border-bottom-color: var(--gold) }
.hero-inner { position: relative; display: grid; justify-items: center; gap: 22px; padding: 96px 20px 120px; text-align: center }
.logo-btn { all: unset; cursor: pointer; display: block; border-radius: 0 }
.logo-btn:focus-visible { outline: var(--px) solid var(--teal); outline-offset: 8px }
.logo { width: min(560px, 84vw); filter: drop-shadow(0 12px 0 rgb(20 16 32 / .55)); animation: bob 2.4s steps(4) infinite alternate; transform-origin: 50% 90% }
.logo-btn:hover .logo { animation-play-state: paused; transform: rotate(-2deg) scale(1.02) }
.logo-btn.wobble .logo { animation: wobble .5s steps(5) }
@keyframes bob { from { transform: translateY(0) } to { transform: translateY(-12px) } }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-5deg) } 40% { transform: rotate(4deg) } 60% { transform: rotate(-3deg) } 80% { transform: rotate(2deg) } }
.bubble { position: absolute; top: 70px; left: 50%; translate: 40% 0; margin: 0; max-width: 260px; padding: 10px 14px; background: var(--cream); color: var(--ink); font: 16px/1.3 var(--head); --edge: var(--ink); z-index: 2; animation: pop .3s steps(3) }
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -16px; width: 12px; height: 12px; background: var(--cream);
  box-shadow: -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0) }
@keyframes pop { from { transform: scale(.4) } to { transform: scale(1) } }
.tagline { margin: 0; font: 600 clamp(20px, 2.6vw, 28px)/1.3 var(--body); color: var(--cream); text-shadow: 0 var(--px) 0 var(--ink) }
.cta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; width: 28px; height: 28px }
.scroll-hint span { display: block; width: 100%; height: 100%; background: var(--gold);
  clip-path: polygon(0 25%, 14% 25%, 14% 39%, 29% 39%, 29% 54%, 43% 54%, 43% 68%, 57% 68%, 57% 54%, 71% 54%, 71% 39%, 86% 39%, 86% 25%, 100% 25%, 100% 46%, 86% 46%, 86% 61%, 71% 61%, 71% 75%, 57% 75%, 57% 89%, 43% 89%, 43% 75%, 29% 75%, 29% 61%, 14% 61%, 14% 46%, 0 46%);
  animation: nudge 1.2s steps(2) infinite }
@keyframes nudge { 50% { transform: translateY(8px) } }

/* ───────── Buttons ───────── */
.btn { --bg: var(--gold); --lip: var(--gold-dk); display: inline-block; padding: 14px 22px 18px; background: var(--bg); color: var(--ink); text-decoration: none;
  font: 15px var(--head); letter-spacing: .5px; cursor: pointer; position: relative; top: 0;
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--lip), inset 0 var(--px) 0 0 rgb(255 255 255 / .35),
              0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
              0 calc(2 * var(--px)) 0 0 var(--ink) }
.btn:hover { --bg: #ffd27a }
.btn:active { top: var(--px); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--lip), 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink) }
.btn-teal { --bg: var(--teal); --lip: var(--teal-dk) } .btn-teal:hover { --bg: #8fe0d2 }
.btn-off { --bg: var(--dusk); --lip: #2a2547; color: var(--muted); cursor: default } .btn-off:hover { --bg: var(--dusk) } .btn-off:active { top: 0 }

/* ───────── Sections ───────── */
.section { padding: clamp(72px, 10vw, 128px) clamp(16px, 5vw, 64px); max-width: 1180px; margin: 0 auto }
.section-dark { max-width: none; background: var(--deep); padding-inline: max(clamp(16px, 5vw, 64px), calc((100% - 1180px) / 2)) }
.section-title { margin: 0 0 48px; font: 400 clamp(32px, 5vw, 52px)/1.1 var(--head); color: var(--cream); text-shadow: var(--px) var(--px) 0 var(--ink), calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--red) }
.kicker { display: block; margin-bottom: 10px; font: 16px var(--head); color: var(--teal); text-shadow: none; letter-spacing: 2px }
.kicker::before { content: "✦ " }

/* Game card */
.game { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 48px); padding: clamp(18px, 3vw, 32px); background: var(--panel); --edge: var(--ink); align-items: center }
.frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); --edge: var(--gold); overflow: hidden }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(0 100% 0 0); z-index: 1; transition: opacity 0s .5s, clip-path 0s .5s }
.shot.is-on { opacity: 1; clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path .5s steps(8) }   /* the new shot wipes in over the old one */
.scanlines { z-index: 3 }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(20 16 32 / .18) 3px 4px) }
.dots { display: flex; gap: 14px; justify-content: center; margin-top: 18px }
.dots button { width: 16px; height: 16px; padding: 0; border: 0; background: var(--dusk); cursor: pointer; box-shadow: 0 0 0 var(--px) var(--ink) }
.dots button[aria-selected="true"] { background: var(--gold) }
.badge { display: inline-block; margin: 0 0 12px; padding: 4px 10px; background: var(--red); color: var(--cream); font: 13px var(--head); letter-spacing: 1px; animation: blink 1.4s steps(1) infinite }
@keyframes blink { 50% { background: #e0533f } }
.game h3 { margin: 0 0 10px; font: 400 clamp(30px, 4vw, 44px)/1 var(--head); color: var(--gold); text-shadow: var(--px) var(--px) 0 var(--ink) }
.hook { font-weight: 600; font-size: 22px; color: var(--cream) }
.game p { margin: 0 0 14px }
.tags { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 14px }
.tags li { padding: 4px 10px; background: var(--dusk); font: 12px var(--head); color: var(--cream); --edge: var(--ink) }
.soon { color: var(--muted) }
.more { margin-top: 56px; text-align: center; color: var(--muted) }
.more-title { margin: 0 0 4px; font: 18px var(--head); color: var(--teal) }
.more p { margin: 0 }

/* Grass edge between sections: built from steps, so it stays crisp at any width */
.ground { height: 24px; background:
  linear-gradient(var(--deep) 0 0) 0 100% / 100% 12px no-repeat,
  repeating-linear-gradient(90deg, #5f8f3c 0 8px, #4a7a32 8px 16px, #5f8f3c 16px 20px, transparent 20px 24px, #3e6a2c 24px 32px, transparent 32px 40px) 0 4px / 100% 8px no-repeat,
  repeating-linear-gradient(90deg, #4a7a32 0 12px, #3e6a2c 12px 20px, #5f8f3c 20px 32px) 0 12px / 100% 4px no-repeat,
  var(--night) }

/* Expedition kit */
.lede { max-width: 820px; margin: 0 0 56px; font-size: 22px }
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
.kit-item { padding: 26px 24px; background: var(--panel); --edge: var(--ink); transition: transform .15s steps(2) }
.kit-item:hover { transform: translateY(-6px) }
.kit-icon { width: 72px; height: 72px; margin-bottom: 14px }
.kit-item h3 { margin: 0 0 8px; font: 400 18px/1.3 var(--head); color: var(--gold) }
.kit-item p { margin: 0; color: var(--muted); font-size: 18px }

/* Follow */
.follow { padding: clamp(28px, 5vw, 56px); background: var(--panel); --edge: var(--gold); text-align: center }
.follow .section-title { margin-bottom: 20px }
.follow p { margin: 0 auto 30px; max-width: 640px }

/* Footer */
.footer { background: #17151f }
.grass { height: 16px; background:
  repeating-linear-gradient(90deg, #5f8f3c 0 8px, transparent 8px 12px, #4a7a32 12px 20px, transparent 20px 24px) 0 0 / 100% 8px no-repeat,
  linear-gradient(#3e6a2c 0 0) 0 8px / 100% 8px no-repeat, var(--night) }
.hero-grass { background-color: #16121f }   /* gaps between the blades show the hero's near hill */
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 5vw, 64px) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--muted); font-size: 16px }
.footer-inner p { margin: 0; flex: 1 1 320px }
.footer-inner a { font: 13px var(--head) }

/* Reveal: elements step in from below as you scroll */
.js .reveal { opacity: 0; transform: translateY(24px) }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .4s steps(4), transform .4s steps(4) }

.crumbs { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; image-rendering: pixelated }

@media (max-width: 860px) {
  .game { grid-template-columns: 1fr }
  .kit { grid-template-columns: 1fr }
  .nav-links a { font-size: 12px }
  .bubble { translate: -50% 0; top: 60px }
}
@media (prefers-reduced-motion: reduce) {
  .logo, .badge, .scroll-hint span { animation: none }
  .js .reveal { opacity: 1; transform: none }
}