/* Bob Wood Idle — shared styles.
   Palette lifted from the game's own UI so the site and the app feel like the
   same object: warm cream cards, forest green, bark brown ink. */

:root {
  /* ---- colour ---- */
  --forest:      #6f9c58;
  --forest-deep: #4d7340;
  --forest-dark: #3c5b33;
  --cream:       #fcf4e4;
  --cream-deep:  #f6ebd6;
  --card:        #fffaf0;
  --ink:         #4a3521;
  --ink-soft:    #5c4329;
  --muted:       #8c7359;
  --gold:        #d9a33d;
  --line:        #e9dcc4;
  --line-soft:   #f0e6d4;

  /* ---- spacing scale ----
     A scale rather than ad-hoc pixel values. The old sheet set margins one at a
     time and the rhythm drifted — most visibly under the hero, where the header
     ended and the first card began with almost nothing between them. */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 18px;
  --s-4: 26px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 92px;

  /* ---- form ---- */
  --radius:    18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(74, 53, 33, .06), 0 2px 8px rgba(74, 53, 33, .05);
  --shadow:    0 2px 0 rgba(74, 53, 33, .05), 0 10px 28px rgba(74, 53, 33, .09);
  --shadow-lg: 0 4px 12px rgba(74, 53, 33, .10), 0 24px 56px rgba(74, 53, 33, .16);
  --ring:      0 0 0 3px rgba(111, 156, 88, .45);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.65 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--forest-deep);
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--ink); }

/* One visible focus style for everything, so keyboard users are never guessing.
   :focus-visible rather than :focus — a mouse click on a button should not leave
   a ring behind it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Keyboard and screen-reader users get past the header without tabbing it. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ header */

.top {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(170deg, var(--forest) 0%, var(--forest-deep) 62%, var(--forest-dark) 100%);
  color: #fffdf6;
  padding: clamp(44px, 9vw, 76px) 0 clamp(52px, 10vw, 88px);
  text-align: center;
  /* The curve is what separates hero from content. Previously the two met on a
     hard line with no breathing room, which is what made the page read as a
     stack of blocks rather than as a page. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

/* Soft horizon glow, so the flat gradient has some depth to it. */
.top::after {
  content: "";
  position: absolute;
  inset: auto 0 -40% 0;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, .10), transparent 70%);
  pointer-events: none;
}

.top .wrap { position: relative; z-index: 1; }

.top .icon {
  width: clamp(96px, 22vw, 128px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 24%;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .16),
    0 14px 34px rgba(0, 0, 0, .26);
  display: block;
  margin: 0 auto var(--s-4);
}

.top h1 {
  margin: 0 0 var(--s-2);
  font-size: clamp(31px, 6.6vw, 47px);
  line-height: 1.12;
  letter-spacing: -.9px;
}

.top p.tagline {
  margin: 0 auto;
  max-width: 32ch;
  font-size: clamp(16px, 3.4vw, 19.5px);
  color: rgba(255, 253, 246, .93);
}

/* Sub-pages: smaller hero, since the content is the point rather than the pitch. */
.top.slim { padding: clamp(34px, 7vw, 52px) 0 clamp(38px, 7vw, 56px); }
.top.slim h1 { font-size: clamp(27px, 5.4vw, 38px); }

/* ------------------------------------------------------------- download cta */

.cta {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1d1d1f;
  color: #fff;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
.btn:active { transform: translateY(0); }

/* Shown instead of the button until there is a real App Store URL. Deliberately
   plain: a dead "Download" button that goes nowhere is worse than an honest
   "not yet" — it wastes a click and reads as a broken site. */
.btn.pending {
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
  cursor: default;
  border: 1.5px solid rgba(255, 255, 255, .38);
}
.btn.pending:hover { transform: none; box-shadow: none; }

/* Three short facts under the CTA. Does more for conversion than another
   paragraph would, and answers the questions people actually have. */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: rgba(255, 253, 246, .82);
}
.trust li { display: flex; align-items: center; gap: 7px; }
.trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------- content */

/* `main.wrap`, NOT `main`.
   Every page writes <main class="wrap">, and `.wrap` sets `padding: 0 22px` —
   a class beats an element selector, so a bare `main { padding: ... }` had its
   top padding silently overridden to zero. That is why the hero and the first
   card sat flush against each other with no breathing room. Matching both the
   element and the class wins the cascade; the longhand properties also stop the
   horizontal padding from being clobbered in either direction. */
main.wrap {
  display: block;
  padding-top: clamp(40px, 8vw, 72px);
  padding-bottom: var(--s-7);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 32px);
  margin-bottom: var(--s-4);
}
.card:last-child { margin-bottom: 0; }

h2 {
  font-size: clamp(21px, 4vw, 25px);
  line-height: 1.25;
  margin: 0 0 var(--s-3);
  letter-spacing: -.45px;
}

h3 {
  font-size: 17.5px;
  margin: var(--s-4) 0 var(--s-1);
  color: var(--forest-deep);
  letter-spacing: -.2px;
}
h3:first-of-type { margin-top: var(--s-2); }

p { margin: 0 0 var(--s-2); }
p:last-child, ul:last-child { margin-bottom: 0; }

ul { margin: 0 0 var(--s-2); padding-left: 22px; }
li { margin-bottom: var(--s-1); }

/* An eyebrow above a section heading — orients the reader in one word. */
.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: var(--s-1);
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.features li {
  margin: 0;
  padding: var(--s-3);
  padding-left: 62px;
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.features .emoji {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
}
/* DIRECT CHILD ONLY.
   As a descendant selector this also caught every <strong> inside .detail, turning
   each emphasised name in the body copy into its own block — so a sentence naming
   three buildings broke into six ragged fragments. Only the feature's own title is
   a block; emphasis inside the copy stays inline. */
.features > li > strong { display: block; margin-bottom: 2px; }
.features span.detail {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  display: block;
}

.muted { color: var(--muted); }
.small { font-size: 14.5px; }

.updated {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 var(--s-4);
}

/* ------------------------------------------------------------- screenshot */

/* Phone-and-text showcase. Stacks on narrow screens, sits side by side once
   there is room for both without squeezing the device. */
.showcase {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  justify-items: center;
}

.showcase-points { list-style: none; margin: 0; padding: 0; }
.showcase-points li {
  margin: 0 0 var(--s-3);
  padding-left: 28px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
.showcase-points li:last-child { margin-bottom: 0; }
.showcase-points strong { color: var(--ink); display: block; }
.showcase-points li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
}

/* ---- the device ----
   A CSS mockup rather than a PNG frame: it stays crisp at any density, costs no
   bytes, and recolours with the palette instead of baking a bezel colour into
   an asset. */
.phone {
  position: relative;
  width: min(260px, 72vw);
  padding: 9px;
  background: linear-gradient(160deg, #3b3b40 0%, #232327 45%, #37373c 100%);
  border-radius: 44px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .13),
    var(--shadow-lg);
}

.phone-screen {
  position: relative;
  display: block;
  width: 100%;
  /* MATCHES THE SCREENSHOT, deliberately — 9:16, not the 9:19.5 of a current
     iPhone. The game captures at 9:16, and forcing that into a taller frame with
     `cover` would crop ~18% off the left and right, taking the settings gear and
     the edge of the task list with it. Cropping real UI out of a real screenshot
     to flatter the bezel is the wrong trade. If a 19.5 capture turns up later,
     change this one value and nothing else needs touching. */
  aspect-ratio: 9 / 16;
  border-radius: 32px;
  overflow: hidden;
  background: var(--cream-deep);
}

.phone-screen img {
  width: 100%;
  height: 100%;
  display: block;
  /* The frame's aspect-ratio matches the capture, so `cover` is an exact fit and
     no object-position nudge is needed. */
  object-fit: cover;
}

/* Dynamic island. Purely decorative, hence aria-hidden on the element. */
.phone-screen::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 17px;
  background: #17171a;
  border-radius: 999px;
}

/* Side buttons, just enough to read as a device rather than a rounded box. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 2px;
  background: #2a2a2e;
  border-radius: 2px 0 0 2px;
}
.phone::before { top: 92px; height: 28px; }
.phone::after  { top: 130px; height: 46px; }

.shot-caption {
  margin: var(--s-4) 0 0;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------ accordions */
/* Native <details>, not a JS widget. The page is served as static HTML with no
   build step, and the browser already gives us open/close state, keyboard
   support and find-in-page that reveals collapsed matches — all of which a
   hand-rolled version would have to reimplement and would mostly get wrong. */

.guide { display: grid; gap: 10px; }

details.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: border-color .16s ease, background .16s ease;
}
details.acc[open] {
  background: var(--card);
  border-color: var(--forest);
}

details.acc > summary {
  cursor: pointer;
  padding: 16px 50px 16px 18px;
  font-weight: 700;
  position: relative;
  border-radius: var(--radius-sm);
  /* Both properties needed: Safari only honours the WebKit pseudo-element. */
  list-style: none;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { color: var(--forest-deep); }

details.acc > summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--muted);
  border-bottom: 2.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
details.acc[open] > summary::after {
  transform: translateY(-20%) rotate(-135deg);
  border-color: var(--forest-deep);
}

.acc-body {
  padding: var(--s-3) 18px 20px;
  border-top: 1px solid var(--line-soft);
}
.acc-body > :first-child { margin-top: 0; }
.acc-body h4 {
  font-size: 15.5px;
  margin: var(--s-3) 0 var(--s-1);
  color: var(--forest-deep);
}
.acc-body h4:first-child { margin-top: 0; }

/* A named upgrade track, resource or perk mentioned in running text. */
.term {
  font-weight: 700;
  color: var(--forest-deep);
  white-space: nowrap;
}

/* --------------------------------------------------------------- back link */

/* Was a bare "← Back" text link, which on a page of cards read as stray text
   rather than as a control. A pill gives it an edge and a hit area, and the
   arrow moving on hover is the affordance that says where it goes. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-4);
  padding: 9px 18px 9px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, color .14s ease, transform .14s ease;
}
.back::before {
  content: "←";
  font-size: 16px;
  line-height: 1;
  transition: transform .16s ease;
}
.back:hover {
  color: var(--forest-deep);
  border-color: var(--forest);
}
.back:hover::before { transform: translateX(-3px); }

/* --------------------------------------------------------------- footer */

footer {
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-5);
  color: var(--muted);
  font-size: 15px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

.foot-brand { max-width: 34ch; }
.foot-brand img {
  width: 46px;
  height: 46px;
  border-radius: 22%;
  display: block;
  margin-bottom: var(--s-2);
  box-shadow: var(--shadow-sm);
}
.foot-brand strong {
  display: block;
  color: var(--ink);
  font-size: 16.5px;
  margin-bottom: 4px;
}
.foot-brand p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* A <p>, not a heading. Each column is already named for assistive tech by the
   nav's aria-label, and real headings here would pad the document outline with
   "Game"/"Help" on every page for no reader benefit. */
.foot-nav .foot-h {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin-bottom: var(--s-1); }
.foot-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.foot-nav a:hover { color: var(--forest-deep); text-decoration: underline; }

.foot-bar {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.foot-bar p { margin: 0; }

/* --------------------------------------------------------------- responsive */

@media (min-width: 640px) {
  .cta { flex-direction: column; }
  .features { grid-template-columns: 1fr 1fr; }
  /* The last feature spans both columns when the count is odd, so the grid
     never ends on a lonely half-width card. */
  .features li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-4); }

  .showcase {
    grid-template-columns: auto 1fr;
    justify-items: start;
    gap: var(--s-5);
  }
}

@media (max-width: 420px) {
  .wrap { padding: 0 18px; }
  .back { margin-bottom: var(--s-3); }
}

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

@media print {
  .top, footer, .back, .cta { display: none; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  details.acc[open] > summary::after { display: none; }
  details.acc > .acc-body { display: block !important; }
}