/* ==========================================================================
   Home — the element. Mostly white, navy as accent and anchor.
   Deliberately not the broadsheet: no warm ground, no grain, no dense
   columns. Loaded after styles.css.
   ========================================================================== */

/* Mostly white, and still not bare: two fixed washes far enough apart that
   neither reads as a shape, only as light in the room. Fixed rather than
   scrolled so the page never shows a seam where a gradient ends. */
.page-home {
  background:
    radial-gradient(60rem 40rem at 100% -8%, color-mix(in srgb, var(--cyan) 9%, transparent) 0%, transparent 70%),
    radial-gradient(52rem 42rem at -10% 108%, color-mix(in srgb, var(--navy) 7%, transparent) 0%, transparent 68%),
    var(--white);
  background-attachment: fixed, fixed, scroll;
  color: var(--ink-white);
}

.page-home ::selection { background: var(--navy); color: #fff; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

/* The ground behind the search box. Two layers, both CSS: a ruled field the
   width of the page, and a pair of washes in the brand blues that lift the
   right-hand side without printing anything on it. The page stays white —
   these are the palest tints the blues have — but it is no longer empty. */
.hero__rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--navy) 0 1px, transparent 1px 3.5rem),
    repeating-linear-gradient(180deg, var(--navy) 0 1px, transparent 1px 3.5rem);
  opacity: 0.035;
  /* Fades out to the left and bottom so the ruling never fights the
     headline, and never ends on a hard line. */
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 72%);
}
.hero__wash {
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(58rem, 90%);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 38%, color-mix(in srgb, var(--cyan) 26%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--navy) 15%, transparent) 0%, transparent 58%);
  filter: blur(2px);
}
@media (max-width: 60rem) { .hero__wash { inset: -28% -30% auto auto; } }

/* Keeps the shell's own width: the hero must start on the same left edge as
   the game gate, the set list and the footer. Measure is on the children. */
.hero__inner { position: relative; }

.hero__eyebrow { margin-bottom: 1.1rem; color: var(--cyan-on-paper); }

.hero__title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--navy-deep);
  margin-bottom: 1rem;
  max-width: 18ch;
}
.hero__sub {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--muted);
  max-width: 40ch;
}

/* ------------------------------------------------------------------ search */

.search { position: relative; max-width: 34rem; }
.search__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: 1.5px solid var(--navy);
  padding: 0.2rem 0.2rem 0.2rem 1rem;
  transition: box-shadow 0.22s var(--ease);
}
.search__field:focus-within { box-shadow: 0 0 0 3px rgba(14, 74, 123, 0.18); }

.search__icon { width: 1.05rem; height: 1.05rem; flex: none; stroke: var(--navy); }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 1.05rem;          /* >=16px so iOS does not zoom on focus */
  color: var(--ink-white);
  padding-block: 0.85rem;
}
.search input::placeholder { color: #93a0ad; }

.search__clear {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  font: inherit;
  font-size: 1.1rem;
  color: var(--muted);
}
.search__clear:hover { color: var(--navy); }
.search__clear[hidden] { display: none; }

.search__submit {
  flex: none;
  border: 0;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.35rem;
  transition: background 0.22s var(--ease);
}
.search__submit:hover { background: var(--navy-deep); }

.search__hint {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Card hits and the stack, immediately under the field. Wider than the 34rem
   search box so three results fit across it, and still on the same left edge:
   the results belong to the field, and this is the first place the eye goes
   after typing. Card hits used to be inside the sets panel, below the gate and
   the set index, which put them most of a screen away from the cursor. */
.hero__results { max-width: 54rem; }
/* The gap belongs to the results, not to the wrapper: on the gate, with
   nothing searched, they are hidden and there should be no space under the
   hint at all. */
.hero__results > :first-child:not([hidden]) { margin-top: 1.4rem; }
.search__hint b { color: var(--navy-deep); font-weight: 600; font-variant-numeric: lining-nums; }

/* -------------------------------------------------------------- game gate */
/* Three large squares of artwork, one per game, each carrying its own title. */

.gate { scroll-margin-top: 5.25rem; padding-block: clamp(1rem, 2vw, 2rem) clamp(3rem, 6vw, 5rem); }
.gate__title { color: var(--muted); margin-bottom: 1.4rem; }

.games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
@media (max-width: 46rem) { .games { grid-template-columns: 1fr; } }

.game {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Everything the gate tiles LOOK like -- the frame around the picture, how
   large it is, and all four of its animations -- is inline in <style> in
   tools/templates/index.html. It lives there because a stylesheet is a
   separate request with its own cache, and three rounds of changes to these
   three tiles appeared to do nothing while browsers held an older home.css.
   The HTML always revalidates. Only the button reset and the grid are here,
   and the inline block restates the grid because the tiles outgrew it. */

.gate__note { margin: 1.5rem 0 0; font-size: 0.92rem; color: var(--muted); }

/* ------------------------------------------------------------- sets panel */

.js .panel:not(.is-open) { display: none; }
.panel {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  scroll-margin-top: 5.25rem;   /* clears the sticky header on reveal */
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
}

.panel__back {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--navy);
  margin-right: auto;
}
.panel__back:hover { color: var(--cyan-on-paper); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  border: 1px solid var(--rule-white);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.chip:hover { color: var(--navy); border-color: var(--navy); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------------------------------------------------------------- controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem 1.1rem;
}
.controls__title { font-size: 1.4rem; color: var(--navy-deep); margin-right: auto; }

.sort { display: flex; align-items: center; gap: 0.6rem; }
.sort label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sort select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-white);
  background: var(--white);
  border: 1px solid var(--rule-white);
  border-radius: 0;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}
.sort select:hover { border-color: var(--navy); }

/* -------------------------------------------------------------------- sets */

.sets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--navy);
}
@media (max-width: 54rem) { .sets { grid-template-columns: 1fr; } }

.set {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule-white);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s var(--ease), padding 0.18s var(--ease);
}
.set:hover { background: var(--white-cool); }
.set__name { font-size: 1.04rem; }
.set__game {
  grid-column: 1;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.set__count {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 0.8rem;
  font-variant-numeric: lining-nums;
  color: var(--muted);
  white-space: nowrap;
}
.set:hover .set__count { color: var(--cyan-on-paper); }
.set[hidden] { display: none; }

/* Empty state for a search that finds nothing. */
.sets-empty {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  text-align: center;
  color: var(--muted);
}
.sets-empty[hidden] { display: none; }
.sets-empty svg { width: 3rem; height: auto; stroke: var(--navy); opacity: 0.35; margin-bottom: 1rem; }
.sets-empty p { margin: 0 0 0.4rem; font-size: 1.08rem; color: var(--navy-deep); }
.sets-empty span { font-size: 0.9rem; }



/* ======================================================== the facts strip
   Four generated figures between the search box and the gate. Rules rather
   than cards: boxes here would compete with the three tiles below, which are
   the thing to click. On a phone they fold to two columns and keep the rule
   as a divider. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1rem, 2.6vw, 2.4rem);
  margin: clamp(2rem, 4.5vw, 3.4rem) auto clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule-white);
}
.fact { display: grid; gap: 0.3rem; }
.fact b {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
  font-variant-numeric: lining-nums;
}
.fact span { font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 46rem) {
  .facts { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; }
}

/* The Japanese tile's own plant, cut from that artwork and stood in the hero's
   bottom-right corner the way it stands in the corner of the tile: bleeding off
   both edges rather than floating clear of them. Navy is baked into the file, so
   the only thing to set here is how far back it sits. */
.hero__leaf {
  position: absolute;
  right: -1.5rem;
  bottom: -2.5rem;
  width: clamp(9rem, 20vw, 15rem);
  height: auto;
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}
/* Below this the hero is one column and the leaf would sit under the search
   box rather than beside it. */
@media (max-width: 60rem) { .hero__leaf { display: none; } }