/* Crowstastic. The palette is the game's own - teal, cream, charcoal - not
   the orange the sibling sites use. See PLAN.md section 6. */

:root {
  --charcoal: #22242B;
  --slate: #3A3D47;
  --cream: #F7E7C8;
  --cream-dim: #E3CDA4;
  --teal: #2AA39A;
  --coral: #FF6B5A;
  --gold: #F5C542;

  --wrap: 1120px;
  --gap: clamp(48px, 8vw, 104px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--charcoal);
  color: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: 1.15rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-play { background: var(--teal); color: #06201E; }
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42,163,154,.32); }
.btn-quiet { background: rgba(247, 231, 200, .1); color: var(--cream); }
.btn-quiet:hover { background: rgba(247, 231, 200, .18); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px clamp(16px, 4vw, 40px);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.solid {
  background: rgba(34, 36, 43, .92);
  box-shadow: 0 1px 0 rgba(247, 231, 200, .08);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-wordmark { font-weight: 800; letter-spacing: -.01em; font-size: 1.15rem; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav-links a { text-decoration: none; font-weight: 600; opacity: .85; }
.nav-links a:hover { opacity: 1; color: var(--gold); }
.nav-links .btn { opacity: 1; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--cream); border-radius: 2px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 60px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(34, 36, 43, .98);
    padding: 8px 20px 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid rgba(247, 231, 200, .08); }
  .nav-links .btn { margin-top: 16px; justify-content: center; }
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--gap) clamp(16px, 4vw, 40px);
}
.section h2 { margin-bottom: 12px; }
.section-lead {
  color: var(--cream-dim);
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: 40px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(120px, 18vh, 190px) clamp(16px, 4vw, 40px) var(--gap);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--cream-dim);
  max-width: 34ch;
  margin: 18px 0 30px;
}
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-note { font-size: .9rem; color: rgba(247, 231, 200, .6); }
.hero-art img { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5)); }

/* The hero sits on a sky rather than a flat panel. DESIGN-PARALLAX.md asks
   for a gradient and not an image, and that is the right call twice over: it
   downloads nothing, it fits any viewport without a second asset at a second
   aspect ratio, and it keeps the CSP argument ('self' plus one analytics
   host) intact. Both stops fade to transparent, so the glow has no edge to
   give itself away where the 1120px column ends. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute;
  /* Full viewport width, not the 1120px column. Confined to .hero the
     gradients were clipped by the column's edge and the falloff turned into
     two vertical seams down the page - the one thing a backdrop must not
     have. Both ellipses now finish inside 100vw on their own. */
  top: -25%; bottom: -6%; left: 50%;
  width: 100vw; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 46% at 60% 48%, rgba(42, 163, 154, .20), transparent 70%),
    radial-gradient(28% 38% at 30% 16%, rgba(245, 197, 66, .09), transparent 72%);
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 320px; margin-inline: auto; }
}

/* ── The three-step loop ─────────────────────────────────────────────── */
.loop {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; list-style: none;
}
.loop-step { position: relative; padding-top: 8px; }
.loop-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 50%; background: rgba(42, 163, 154, .16);
  color: var(--teal); font-weight: 800;
}
.loop-step h3 { margin-bottom: 6px; }
.loop-step p { color: var(--cream-dim); }

/* ── Feature cards ───────────────────────────────────────────────────── */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.card {
  background: rgba(58, 61, 71, .42);
  border: 1px solid rgba(247, 231, 200, .08);
  border-radius: 18px;
  padding: 26px 24px;
}
.card-icon { margin-bottom: 16px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--cream-dim); }

/* ── Screenshot strip ────────────────────────────────────────────────── */
.shots {
  display: flex; gap: 20px; overflow-x: auto;
  padding-bottom: 14px; scroll-snap-type: x mandatory;
}
.shot { flex: 0 0 clamp(220px, 30vw, 300px); scroll-snap-align: start; }
.shot img { border-radius: 16px; border: 1px solid rgba(247, 231, 200, .1); }
.shot figcaption {
  margin-top: 10px; font-size: .88rem; color: rgba(247, 231, 200, .62);
}

/* ── Rarity tiers ────────────────────────────────────────────────────── */
.tier-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}
.tier { text-align: center; padding: 24px 18px; border-radius: 18px; }
.tier img { margin: 0 auto 14px; }
.tier h3 { margin-bottom: 6px; }
.tier p { color: var(--cream-dim); font-size: .96rem; }
.tier-common { background: rgba(58, 61, 71, .38); }
.tier-rare { background: rgba(42, 163, 154, .12); }
.tier-epic { background: rgba(255, 107, 90, .12); }
.tier-legendary { background: rgba(245, 197, 66, .13); }

/* ── Download ────────────────────────────────────────────────────────── */
.download { text-align: center; }
.download .section-lead { margin-inline: auto; }
.store-row {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap;
}
.store-soon { color: rgba(247, 231, 200, .6); font-size: .95rem; }

/* ── Studio and siblings ─────────────────────────────────────────────── */
.sibling-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.sibling {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; border-radius: 16px; text-decoration: none;
  background: rgba(58, 61, 71, .32);
  border: 1px solid rgba(247, 231, 200, .07);
  transition: border-color .2s ease, transform .2s ease;
}
.sibling:hover { border-color: rgba(42, 163, 154, .5); transform: translateY(-3px); }
.sibling-name { font-weight: 700; }
.sibling-note { color: var(--cream-dim); font-size: .92rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(247, 231, 200, .08);
  margin-top: var(--gap);
}
.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 40px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.footer-copy { color: rgba(247, 231, 200, .55); font-size: .9rem; margin-top: 10px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a, .footer-consent {
  color: rgba(247, 231, 200, .75);
  text-decoration: none; font-size: .92rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.footer-links a:hover, .footer-consent:hover { color: var(--gold); }

/* Keyboard users must be able to see where they are. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ── Standalone pages: /press, /support, /changelog, /promo ──────────── */
.page { padding-top: clamp(110px, 16vh, 170px); }
.page h1 { margin-bottom: 12px; }
.page h2 { margin: var(--gap) 0 18px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.press-body { color: var(--cream-dim); max-width: 68ch; margin-bottom: 14px; }
.fine { color: rgba(247, 231, 200, .55); font-size: .9rem; max-width: 62ch; margin-top: 18px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; }
.fact {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 18px; background: rgba(58, 61, 71, .34);
}
.fact dt { color: rgba(247, 231, 200, .62); }
.fact dd { font-weight: 600; text-align: right; }

.asset-list { list-style: none; display: flex; gap: 14px; flex-wrap: wrap; }
.asset-list a {
  display: inline-block; padding: 12px 20px; border-radius: 12px;
  background: rgba(58, 61, 71, .45);
  border: 1px solid rgba(247, 231, 200, .1);
  text-decoration: none; font-weight: 600;
}
.asset-list a:hover { border-color: var(--teal); }

.faq { display: grid; gap: 10px; max-width: 74ch; }
.faq-item {
  background: rgba(58, 61, 71, .34);
  border: 1px solid rgba(247, 231, 200, .07);
  border-radius: 14px; padding: 4px 20px;
}
.faq-item summary {
  padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ' +'; color: var(--teal); font-weight: 800; }
.faq-item[open] summary::after { content: ' −'; }
.faq-item p { color: var(--cream-dim); padding-bottom: 18px; }

.contact-mail { font-size: 1.2rem; font-weight: 700; margin-top: 8px; }
.contact-mail a { color: var(--teal); text-decoration: none; }

/* The promo landing page. Deliberately one column and short: whoever gets
   here either needs the code or needs the store, nothing else. */
.page-promo { max-width: 620px; text-align: center; }
.page-promo .section-lead { margin-inline: auto; }
.promo-code {
  display: inline-block; margin: 22px 0 26px; padding: 14px 30px;
  border-radius: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .18em; color: var(--gold);
  background: rgba(34, 36, 43, .8); border: 2px dashed rgba(245, 197, 66, .6);
  user-select: all;
}
.promo-step { color: var(--cream-dim); margin-bottom: 6px; }
.promo-actions {
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px;
}
.promo-scheme { color: rgba(247, 231, 200, .7); font-size: .93rem; }
.page-promo .fine { margin-inline: auto; }

.release { margin-bottom: 34px; }
.release-date { color: rgba(247, 231, 200, .5); font-size: .95rem; font-weight: 400; }

/* ── Touch targets and motion ────────────────────────────────────────── */

/* 48px minimum on any touch device, keyed to the pointer rather than to the
   viewport width: a touch laptop at 1440px has the same thumb as a phone.
   The footer links were 24px tall, which is half the floor. */
@media (pointer: coarse) {
  .nav-logo,
  .nav-links a,
  .footer-links a,
  .footer-consent,
  .asset-list a,
  .promo-scheme,
  .consent-link,
  .sibling-name {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .faq-item summary { min-height: 48px; display: flex; align-items: center; }
  .footer-links { gap: 8px 24px; }
  /* The consent choices are the one place on the site where a mis-tap is
     recorded as an answer, so they get the full target, not the 44px the
     close button can live with. */
  .consent-banner .btn, .consent-panel .btn { min-height: 48px; }
  .consent-row label { min-height: 48px; }
  .consent-x { width: 48px; height: 48px; }
}

/* Reduced motion: keep what tells you something happened, drop what is only
   decoration. The nav still turns solid, because that is information. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .sibling:hover { transform: none; }
  .shots { scroll-behavior: auto; }
}

/* /go is a waypoint, not a page: it is on screen for a moment while the
   redirect fires, so it says one thing and centres it. */
.page-go, .page-404 { max-width: 620px; text-align: center; }
.page-go .section-lead, .page-404 .section-lead { margin-inline: auto; }

/* ── The crow run ────────────────────────────────────────────────────── */
.mg { max-width: 720px; }
.mg:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 18px; }

.mg-stage { position: relative; border-radius: 16px; overflow: hidden; }
.mg-canvas {
  display: block; width: 100%; aspect-ratio: 800 / 450;
  background: #2b3a4a; cursor: pointer; touch-action: manipulation;
}

.mg-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center;
  background: rgba(34, 36, 43, .82);
}
/* `display: flex` above outranks the user-agent's `[hidden] { display: none }`,
   so the panel stayed on screen for the whole run with nothing in the console
   to say so: the script set the attribute correctly and the stylesheet quietly
   ignored it, leaving an 82% opaque sheet over a game that was playing fine
   underneath. Same fix, and same reason, as the consent surfaces at the bottom
   of this file. Any hidden element that also declares `display` needs this. */
.mg-overlay[hidden] { display: none; }
.mg-overlay-title { font-size: 1.3rem; font-weight: 700; }
.mg-overlay-body { color: var(--cream-dim); max-width: 40ch; }
.mg-overlay-button { margin-top: 10px; }

/* The pick-up line sits at the top of the stage, away from the thumb that is
   tapping the bottom of it. */
.mg-found {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: rgba(34, 36, 43, .85); color: var(--gold);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.mg-found.flash { animation: mg-pop 2.2s ease forwards; }
@keyframes mg-pop {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.mg-hud {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
}
.mg-label { color: rgba(247, 231, 200, .6); font-size: .9rem; }
.mg-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.mg-bar {
  flex: 1; height: 7px; border-radius: 99px;
  background: rgba(247, 231, 200, .14); overflow: hidden;
}
.mg-bar i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.mg-shelf {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 8px; margin-top: 16px;
}
.mg-slot {
  display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 12px; background: rgba(58, 61, 71, .4);
}
/* A missing piece is a silhouette, not a dark smudge: on this background,
   dimming it to black just reads as a hole in the shelf. */
.mg-slot img { filter: grayscale(1) brightness(0) invert(1); opacity: .22; transition: all .4s ease; }
.mg-slot.got { background: rgba(42, 163, 154, .16); }
.mg-slot.got img { filter: none; opacity: 1; }

@media (max-width: 560px) {
  .mg-shelf { grid-template-columns: repeat(5, 1fr); }
}

.mg-hint { margin-top: 14px; }

.mg-reward {
  margin-top: 22px; padding: 22px 20px; border-radius: 16px; text-align: center;
  background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .45);
}
.mg-reward h3 { margin: 8px 0; }
.mg-reward p { color: var(--cream-dim); }
.mg-reward .promo-code { margin: 18px 0; }

@media (prefers-reduced-motion: reduce) {
  .mg-found.flash { animation: none; opacity: 1; }
}

/* ── Cookie consent ──────────────────────────────────────────────────── */
/* Both surfaces are rendered on every page and hidden by the `hidden`
   attribute; consent.js decides which to show. The id+attribute selectors
   below outrank the display rules, so `hidden` keeps working. */
#consent-banner[hidden], #consent-panel[hidden] { display: none; }

.consent-banner .btn, .consent-panel .btn {
  border: 0; cursor: pointer; font-family: inherit; font-size: .95rem;
}

.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  gap: 18px 26px; flex-wrap: wrap;
  padding: 16px clamp(16px, 4vw, 40px);
  background: rgba(34, 36, 43, .97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(42, 163, 154, .38);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .35);
  animation: consent-rise .28s ease-out;
}
@keyframes consent-rise { from { transform: translateY(100%); } to { transform: none; } }

.consent-text {
  flex: 1 1 380px; max-width: 620px;
  color: var(--cream); font-size: .93rem; line-height: 1.55;
}
.consent-text a { color: var(--gold); }

.consent-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consent-link {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: .92rem; color: rgba(247, 231, 200, .8); text-decoration: underline;
  padding: 8px 6px;
}
.consent-link:hover { color: var(--gold); }

.consent-panel {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
}
.consent-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.consent-sheet {
  position: relative; width: min(460px, 100%);
  max-height: 85vh; overflow-y: auto;
  padding: 24px; border-radius: 18px;
  background: #2C2F38; border: 1px solid rgba(247, 231, 200, .12);
}
.consent-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent-head h2 { font-size: 1.3rem; }
.consent-x {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--cream-dim); font-size: 1.9rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 10px;
}
.consent-x:hover { color: var(--gold); }

.consent-row { padding: 16px 0; border-top: 1px solid rgba(247, 231, 200, .09); }
.consent-row:first-of-type { margin-top: 6px; }
.consent-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.consent-row input[disabled] { cursor: default; }
.consent-row p { margin: 6px 0 0 28px; color: var(--cream-dim); font-size: .88rem; line-height: 1.5; }

.consent-foot { margin-top: 20px; display: flex; justify-content: flex-end; }

@media (max-width: 620px) {
  .consent-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .consent-actions { justify-content: center; }
  .consent-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}