/* Idle Vibe Tycoon marketing site.
   Palette and type roles follow DESIGN.md. Tints are opacity over production
   colors only, never new hex values. Mobile is the primary layout. */

:root {
  --aqua: #68DDE0;
  --coral: #F587A9;
  --peach: #FFD0B3;
  --lavender: #C4B1F5;
  --cream: #FFF4DE;
  --sunny: #FFC85A;
  --mint: #A9E4C3;
  --navy: #38415E;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;

  --r-card: 14px;
  --r-ctl: 10px;
  --line: 3px solid var(--navy);
  --shadow: 6px 6px 0 rgba(56, 65, 94, 0.15);
  --shadow-sm: 4px 4px 0 rgba(56, 65, 94, 0.18);

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pixel: "Silkscreen", "Courier New", monospace;
}

* { box-sizing: border-box; }

/* Anchor targets clear the sticky chip bar on phones, so a jump never hides the
   heading underneath it. */
section[id], main [id] { scroll-margin-top: 84px; }
@media (min-width: 1000px) {
  section[id], main [id] { scroll-margin-top: 16px; }
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sunny); color: var(--navy);
  padding: var(--s3) var(--s4); font-weight: 800; border: var(--line);
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* ---------- type roles ---------- */
.pixel { font-family: var(--pixel); font-weight: 400; }
.display { font-family: var(--pixel); font-size: 30px; line-height: 1.15; }
.h2 { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.h3 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.body { font-size: 16px; }
.small { font-size: 14px; }
.label {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
}
.data { font-weight: 900; font-variant-numeric: tabular-nums; }
.muted { opacity: 0.78; }
.center { text-align: center; }

/* ---------- controls: minimum 48px targets everywhere ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: var(--line); border-radius: var(--r-ctl);
  background: var(--navy); color: var(--cream);
  font: inherit; font-size: 16px; font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.btn.primary { background: var(--sunny); color: var(--navy); }
.btn.ghost { background: var(--cream); color: var(--navy); }
.btn.icon { width: 48px; min-width: 48px; padding: 0; }
.btn svg { width: 24px; height: 24px; flex: none; }
.btn.lg { min-height: 56px; font-size: 18px; padding: 0 var(--s6); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }

/* iOS: struck through and badged, so it never reads as available. */
.btn.soon { position: relative; color: var(--navy); }
.btn.soon::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  border-top: 2px solid var(--navy); transform: rotate(-18deg); opacity: 0.4;
}
.btn.soon .badge {
  position: absolute; right: -8px; top: -10px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  background: var(--navy); color: var(--sunny);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- marquee ----------
   A deliberately scrolling strip. It is its own scroll container so the long
   text can never widen the document, and it is hidden from assistive tech
   because it carries no information the headings do not. */
.marquee {
  background: var(--navy); color: var(--sunny);
  border-bottom: var(--line);
  overflow: hidden; white-space: nowrap;
  width: 100%;
}
.marquee span {
  display: inline-block;
  font-family: var(--pixel); font-size: 13px; letter-spacing: 2px;
  padding: var(--s2) 0;
}

/* ---------- section nav ----------
   One source of truth in the markup, rendered two ways: a sticky left rail on
   desktop, a horizontally scrollable chip bar on phones. The current section is
   marked by JS via IntersectionObserver, and never by scroll position alone,
   because the page has several short sections. */
.sidenav {
  position: sticky; top: var(--s4);
  align-self: start;
  border-left: 4px solid rgba(56, 65, 94, 0.2);
  padding-left: var(--s4);
  display: grid; gap: 2px;
}
.sidenav ol { margin: 0; padding: 0; list-style: none; }
.sidenav a {
  display: block; padding: 10px var(--s2); border-radius: 8px;
  font-size: 14px; font-weight: 800; text-decoration: none;
  color: var(--navy); opacity: 0.55;
}
.sidenav a:hover { opacity: 1; background: color-mix(in srgb, var(--peach) 55%, var(--cream)); }
.sidenav a[aria-current="true"] {
  opacity: 1;
  border-left: 6px solid var(--coral);
  margin-left: calc(var(--s4) * -1 - 4px);
  padding-left: calc(var(--s2) + 6px);
  background: color-mix(in srgb, var(--coral) 22%, var(--cream));
}

/* Phone: the same list becomes a scrolling chip bar pinned under the masthead.
   Its own scroll container, so a long list never widens the document. */
.sidenav-mobile {
  position: sticky; top: 0; z-index: 30;
  width: 100%; max-width: 100%;
  background: var(--cream); border-bottom: var(--line);
  margin-bottom: var(--s5);
  padding: var(--s2) var(--s4);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sidenav-mobile::-webkit-scrollbar { display: none; }
.sidenav-mobile ol { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.sidenav-mobile a {
  display: block; white-space: nowrap;
  min-height: 40px; padding: 0 var(--s4);
  display: inline-flex; align-items: center;
  border: 2px solid var(--navy); border-radius: 999px;
  font-size: 13px; font-weight: 800; text-decoration: none; background: var(--cream);
}
.sidenav-mobile a[aria-current="true"] { background: var(--aqua); }
@media (min-width: 1000px) {
  .sidenav-mobile { display: none; }
  .sidenav { display: grid; }
}
@media (max-width: 999px) {
  .sidenav { display: none; }
}

/* ---------- desktop layout: sticky rail + content column ---------- */
.layout { display: block; }
.layout-main { min-width: 0; }
@media (min-width: 1000px) {
  .layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
  }
}

.masthead {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
}
.masthead .logo {
  font-family: var(--pixel); font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; text-decoration: none;
  white-space: nowrap; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.masthead nav { display: none; gap: var(--s4); }
.masthead nav a { font-size: 14px; font-weight: 800; text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.masthead .grow { flex: 1; }
.masthead .btn.primary { min-height: 44px; padding: 0 var(--s4); font-size: 14px; white-space: nowrap; }
@media (max-width: 460px) {
  /* Icon-only store button once the wordmark and the label cannot both fit. */
  .masthead .btn.primary .btn-label { display: none; }
  .masthead .btn.primary { width: 48px; padding: 0; justify-content: center; }
}

/* ---------- hero ---------- */
.hero { padding: var(--s6) 0 var(--s7); display: grid; gap: var(--s6); }
.hero .eyebrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.hero h1 {
  font-family: var(--pixel); font-size: 40px; line-height: 1.08;
  margin: 0 0 var(--s4);
}
.hero .lede { font-size: 18px; max-width: 34ch; }
.hero .sub { margin-top: var(--s3); max-width: 46ch; }
.hero .btn-row { margin-top: var(--s5); }
.hero .or-web { margin-top: var(--s4); font-size: 14px; }
.hero .or-web a { font-weight: 800; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s3); border: 2px solid var(--navy); border-radius: 999px;
  background: var(--cream); font-size: 12px; font-weight: 800;
}
.chip.coral { background: var(--coral); }
.chip.mint { background: var(--mint); }
.chip.sunny { background: var(--sunny); }
.chip.lav { background: var(--lavender); }

/* Poster stack: the video is the headline act, a game screenshot taped over
   its lower corner. The screenshot is a tall portrait, so the card is clipped
   to a short band: the visible slice is the top of the device screen, which is
   where the stage card and the office are. */
.poster { position: relative; }
.poster .frame {
  border: var(--line); border-radius: var(--r-card);
  overflow: hidden; box-shadow: var(--shadow); background: var(--navy);
}
.poster .frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.poster .tape {
  position: absolute; top: -10px; left: 50%; width: 92px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--sunny); border: 2px solid var(--navy); opacity: 0.9;
}
.poster .card {
  position: absolute; right: var(--s4); bottom: -30px;
  width: 104px;
  border: var(--line); border-radius: var(--r-card);
  background: var(--cream); padding: 5px 5px 0;
  box-shadow: var(--shadow-sm); transform: rotate(3deg);
  overflow: hidden; max-height: 190px;
}
.poster .card img {
  width: 100%; height: auto; display: block;
  border-radius: 6px 6px 0 0;
}
.poster .card figcaption {
  font-size: 10px; font-weight: 800; padding: 4px 2px; line-height: 1.2;
}

/* ---------- big numbers ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: var(--line); border-radius: var(--r-card);
  overflow: hidden; background: var(--cream); box-shadow: var(--shadow);
}
.stats div { padding: var(--s3) var(--s4); border-top: var(--line); border-left: var(--line); }
.stats div:nth-child(odd) { border-left: 0; }
.stats div:nth-child(-n+2) { border-top: 0; }
.stats .v { font-family: var(--pixel); font-size: 26px; line-height: 1.2; }
.stats .k {
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; opacity: 0.75;
}

/* ---------- sections ---------- */
.section { padding: var(--s7) 0; border-top: var(--line); }
.section > .label { display: block; margin-bottom: var(--s3); }
.section > .h2 { margin-bottom: var(--s4); max-width: 24ch; }

/* Screenshot rail: the Play Store screens, cropped to the device.
   These are tall phone captures, so a rail item is a full-height card at a
   fixed width. `contain` keeps the whole screen visible rather than scaling
   the device frame up and cropping it into unreadable detail. */
.rail {
  display: flex; gap: var(--s4); align-items: flex-start;
  overflow-x: auto; padding-bottom: var(--s3);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail figure { flex: none; width: 210px; scroll-snap-align: start; }
.rail img {
  display: block; width: 100%; height: auto;
  border: var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); background: var(--cream);
}
.rail figcaption { font-size: 12px; font-weight: 800; margin-top: var(--s2); }
@media (min-width: 720px) { .rail figure { width: 230px; } }

/* Play in browser: opt-in, self-hosted, never the primary path. */
.play-panel {
  border: var(--line); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--aqua) 22%, var(--cream));
  padding: var(--s5); box-shadow: var(--shadow);
}
.play-panel .device {
  margin-top: var(--s4); border: var(--line); border-radius: var(--r-card);
  overflow: hidden; background: var(--cream);
  position: relative;
}
/* If the game has not shipped to this host yet, show the store path rather
   than a dead black rectangle. board.js removes this once the build responds. */
.play-panel .fallback {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: var(--s3);
  padding: var(--s5); text-align: center; background: var(--cream);
}
.play-panel .fallback p { max-width: 34ch; margin: 0 auto; }
.play-panel.live .fallback { display: none; }
.play-panel iframe {
  display: block; width: 100%; height: 520px; border: 0; background: var(--cream);
}
@media (min-width: 720px) { .play-panel iframe { height: 640px; } }

/* Team */
.team { display: grid; gap: var(--s3); }
.member {
  border: var(--line); border-radius: var(--r-card);
  background: var(--cream); padding: var(--s4); box-shadow: var(--shadow-sm);
}
.member .top { display: flex; align-items: center; gap: var(--s3); }
.member .face {
  flex: none; width: 44px; height: 44px;
  border: var(--line); border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 13px;
}
.member .face.aqua { background: var(--aqua); }
.member .face.coral { background: var(--coral); }
.member .face.mint { background: var(--mint); }
.member .face.sunny { background: var(--sunny); }
.member .face.lavender { background: var(--lavender); }
.member .nums { font-size: 13px; font-weight: 800; opacity: 0.82; margin-top: var(--s2); }
.taglist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s3); }
.taglist li {
  font-size: 11px; font-weight: 800;
  border: 2px solid var(--navy); border-radius: 999px; padding: 2px 9px;
}
.taglist.models li { background: var(--aqua); }
.taglist li:nth-child(even).models { background: var(--coral); }

/* Learnings */
.notes { display: grid; gap: var(--s3); }
.note {
  border: var(--line); border-left-width: 8px; border-radius: var(--r-card);
  background: var(--cream); padding: var(--s4);
}
.note.hard { border-left-color: var(--coral); }
.note.learned { border-left-color: var(--mint); }
.note p + p { margin-top: 6px; }

/* Paper trail */
.counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
/* On a phone the ledger becomes stacked rows rather than a squeezed table. */
.ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ledger,
.ledger tbody,
.ledger tr,
.ledger td { display: block; width: 100%; }
.ledger tr { border-bottom: var(--line); padding: var(--s3) 0; }
.ledger tr:last-child { border-bottom: 0; }
.ledger td { border-bottom: 0; padding: 3px 0; }
.ledger td:first-child { font-family: var(--pixel); font-size: 12px; opacity: 0.8; }
.ledger td:nth-child(2) { font-size: 14px; }
.ledger td:last-child { margin-top: var(--s2); }
@media (min-width: 720px) {
  .ledger thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .ledger { display: table; width: 100%; }
  .ledger tbody { display: table-row-group; }
  .ledger tr { display: table-row; border-bottom: 0; padding: 0; }
  .ledger td { display: table-cell; width: auto; padding: var(--s3) var(--s3) var(--s3) 0; vertical-align: top; border-bottom: 2px solid rgba(56, 65, 94, 0.15); }
  .ledger td:first-child { font-family: var(--pixel); font-size: 12px; opacity: 1; white-space: nowrap; }
  .ledger td:last-child { margin-top: 0; white-space: nowrap; }
  .ledger tbody tr:last-child td { border-bottom: 0; }
}
.counts div {
  border: var(--line); border-radius: var(--r-card);
  background: var(--cream); padding: var(--s3); text-align: center;
  box-shadow: var(--shadow-sm);
}
.counts .v { font-family: var(--pixel); font-size: 22px; }
.ledger { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: 14px; }
.ledger th {
  text-align: left; font-size: 11px; letter-spacing: 0.6px;
  text-transform: uppercase; padding: var(--s2) var(--s2);
  border-bottom: var(--line);
}
.ledger td { padding: var(--s3) var(--s2); border-bottom: 2px solid rgba(56, 65, 94, 0.15); vertical-align: top; }
.ledger td:first-child { font-family: var(--pixel); font-size: 12px; }
.pill {
  display: inline-block; padding: 2px 10px; white-space: nowrap;
  border: 2px solid var(--navy); border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.pill.done { background: var(--mint); }
.pill.review { background: var(--sunny); }
.pill.backlog { background: var(--cream); }

/* Shipaton band */
.shipaton { background: var(--coral); border-top: var(--line); border-bottom: var(--line); padding: var(--s6) 0; }
.shipaton .cats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.shipaton .cats li { background: var(--cream); }
.shipaton p { max-width: 60ch; }

/* Built with */
.stack { display: flex; flex-wrap: wrap; gap: var(--s2); }
.stack li {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--navy); border-radius: var(--r-ctl);
  background: var(--cream); padding: 7px var(--s3);
  font-size: 13px; font-weight: 800;
}
.stack li.lead { background: var(--sunny); }
.stack .dot { width: 9px; height: 9px; border-radius: 2px; border: 2px solid var(--navy); }

/* Get involved */
.involve {
  background: color-mix(in srgb, var(--lavender) 34%, var(--cream));
  border-top: var(--line); padding: var(--s6) 0;
}

/* Footer */
.footer { border-top: var(--line); padding: var(--s5) 0 var(--s7); }
.footer .links { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
.footer .links a { font-size: 14px; font-weight: 800; text-decoration: none; }
.footer .links a:hover { text-decoration: underline; }

/* Sticky mobile action bar: download first, always. */
.dock {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: var(--s2); align-items: center;
  padding: var(--s2) var(--s4);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: var(--line);
}
.dock .btn.primary { flex: 1; }
@media (min-width: 720px) { .dock { display: none; } }

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  body { font-size: 17px; }
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; padding: var(--s7) 0 var(--s8); }
  .masthead .logo { font-size: 14px; }
  .hero h1 { font-size: 68px; }
  .hero .lede { font-size: 21px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats div { border-top: 0; }
  .stats div:nth-child(-n+2) { border-top: 0; }
  .stats div + div { border-left: var(--line); }
  .counts { grid-template-columns: repeat(4, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  .notes { grid-template-columns: 1fr 1fr; }
  .rail figure { width: 268px; }
  .display { font-size: 40px; }
  .h2 { font-size: 34px; }
  .section { padding: var(--s8) 0; }
  .play-panel { display: grid; grid-template-columns: 320px 1fr; gap: var(--s6); align-items: center; }
  .play-panel .device { margin-top: 0; }
  .play-panel iframe { height: 640px; }
  .masthead nav { display: flex; }
  .section.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .dock, .masthead nav { display: none; }
}