/* Rules pages — /arcade/<game>. Loaded after category.css, which carries the
   chassis (nav, hero band, type, .rows, .btn, footer). This file is only what
   a rules page adds: the facts strip, numbered rules, the figure pair, the
   questions, and the board you can play. Its own filename for the same reason
   arcade-page.css has one: category.css may still be cached when a new rules
   page ships. */

/* A rules page has one column and no product shot, so the hero is text only
   and the board gets the full width underneath it. */
.hero--rules { padding-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.hero--rules h1 { max-width: 14ch; }
.crumb { color: var(--cat-text-3); text-decoration: none; }
.crumb:hover { color: var(--cat-text-2); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0 clamp(1.25rem, 4vw, 2.5rem);
  margin: .35rem 0 0;
  padding: 0;
}
.facts > div { display: flex; flex-direction: column; gap: .15rem; }
.facts dt {
  font-family: var(--cat-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cat-text-3);
}
.facts dd {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--cat-text);
}

/* ── The board ───────────────────────────────────────────────────────
   Wood, because that is what an Ayo board is: one carved plank, two rows
   of hollows. The brass edge is the same metal ramp as the buttons and
   the band above, so the board reads as part of this site rather than as
   an embedded widget. */
.play { padding-top: clamp(.5rem, 2vw, 1rem); }
.ayo { max-width: 700px; }
.ayo-bank {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .86rem;
  color: var(--cat-text-2);
}
.ayo-bank b { color: var(--cat-text); font-weight: 650; }
.ayo-bank .tally {
  font-family: var(--cat-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cat-text);
  white-space: nowrap;
}
.ayo-bank .tally small { color: var(--cat-text-3); font-size: inherit; }
.ayo-meter {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--cat-line);
  overflow: hidden;
}
.ayo-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #CEAB64, #EAD491);
  transition: width .35s ease;
}

.ayo-board {
  margin: .8rem 0;
  padding: clamp(.6rem, 2.4vw, 1.1rem);
  border-radius: clamp(16px, 4vw, 28px);
  border: 1px solid #8A6A32;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%),
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .0) 0 11px, rgba(0, 0, 0, .07) 11px 12px),
    linear-gradient(135deg, #4A2F17, #2E1C0D 55%, #3B2512);
  box-shadow:
    0 28px 54px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(234, 212, 145, .35),
    inset 0 -10px 22px rgba(0, 0, 0, .4);
}
.ayo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.3rem, 1.6vw, .8rem);
}
.ayo-row + .ayo-row {
  margin-top: clamp(.5rem, 2vw, .95rem);
  padding-top: clamp(.5rem, 2vw, .95rem);
  border-top: 1px solid rgba(234, 212, 145, .14);
}
.ayo-pit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ayo-row--them .ayo-pit { flex-direction: column-reverse; }
.ayo-seeds {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 6%;
  width: 100%;
  aspect-ratio: 1;
  padding: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1B1008, #0D0703 70%);
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 1px 0 rgba(234, 212, 145, .16);
  transition: box-shadow .18s ease, transform .18s ease;
}
/* Ayo seeds are grey, not brown: hard, smooth and a little green. */
.ayo-seeds i {
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E4E2D6, #9B9C8C 62%, #6E6F62);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.ayo-seeds.is-few i { width: 30%; }
.ayo-seeds.is-many { padding: 12%; gap: 4%; }
.ayo-seeds.is-many i { width: 19%; }
.ayo-n {
  font-family: var(--cat-mono);
  font-size: .72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(234, 212, 145, .7);
  line-height: 1;
}

/* A pit you may play is lit; one you may not is simply not lit. Nothing
   on the board is greyed out, because an Ayo board has no disabled state. */
button.ayo-pit { cursor: default; }
.is-live button.ayo-pit:not(:disabled) { cursor: pointer; }
.is-live button.ayo-pit:not(:disabled) .ayo-seeds {
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 1.5px rgba(234, 212, 145, .55);
}
.is-live button.ayo-pit:not(:disabled):hover .ayo-seeds,
.is-live button.ayo-pit:not(:disabled):focus-visible .ayo-seeds {
  transform: translateY(-2px);
  box-shadow:
    inset 0 5px 10px rgba(0, 0, 0, .75),
    0 0 0 2px #EAD491,
    0 8px 18px rgba(234, 212, 145, .18);
}
button.ayo-pit:focus-visible { outline: none; }
.ayo-pit.is-origin .ayo-seeds { box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-accent); }
.ayo-pit.is-drop .ayo-seeds { box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 2px #EAD491; }
.ayo-pit.is-taken .ayo-seeds {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .75), 0 0 0 2px var(--cat-good), 0 0 22px rgba(53, 200, 138, .35);
}

.ayo-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.ayo-status { color: var(--cat-text); font-size: .95rem; min-height: 1.7em; }
.ayo-new {
  flex: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--cat-text-2);
  background: none;
  border: 1px solid var(--cat-line-2);
  border-radius: 6px;
  padding: .3rem .7rem;
  cursor: pointer;
}
.ayo-new:hover { color: var(--cat-text); border-color: var(--cat-accent); }
.ayo-new:focus-visible { outline: 2px solid var(--cat-gold); outline-offset: 3px; }
.ayo:not(.is-live) .ayo-new { display: none; }

/* ── Numbered rules ──────────────────────────────────────────────── */
ol.rules { list-style: none; counter-reset: rule; margin: 0; padding: 0; display: grid; }
ol.rules > li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .35rem 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--cat-line);
}
ol.rules > li:last-child { border-bottom: none; }
ol.rules > li::before {
  content: counter(rule, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--cat-mono);
  font-size: .78rem;
  color: var(--cat-signal);
  padding-top: .28rem;
}
ol.rules h3 { margin: 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
ol.rules p { color: var(--cat-text-2); font-size: .96rem; max-width: 60ch; }

/* ── A position, before and after ────────────────────────────────── */
.figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin: 0 0 1.4rem;
}
.fig { margin: 0; }
.fig .ayo-board { margin: 0 0 .7rem; padding: .6rem; border-radius: 16px; box-shadow: 0 14px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(234, 212, 145, .3); }
.fig .ayo-row { gap: .3rem; }
.fig .ayo-row + .ayo-row { margin-top: .4rem; padding-top: .4rem; }
.fig .cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1B1008, #0D0703 70%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .75);
  font-family: var(--cat-mono);
  font-size: clamp(.78rem, 2.2vw, .95rem);
  font-variant-numeric: tabular-nums;
  color: #D9D6C8;
}
.fig .cell.from { box-shadow: inset 0 3px 7px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-accent); }
.fig .cell.took { box-shadow: inset 0 3px 7px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-good); color: var(--cat-good); }
.fig .cell.zero { color: rgba(217, 214, 200, .35); }
.fig figcaption { font-size: .84rem; color: var(--cat-text-3); line-height: 1.5; }
.fig figcaption b { color: var(--cat-text-2); font-weight: 600; }

/* ── Questions ───────────────────────────────────────────────────── */
.qa { display: grid; margin: 0; }
.qa > div { padding: 1.1rem 0; border-bottom: 1px solid var(--cat-line); }
.qa > div:last-child { border-bottom: none; }
.qa dt { font-weight: 600; letter-spacing: -.01em; margin-bottom: .3rem; }
.qa dd { color: var(--cat-text-2); font-size: .96rem; max-width: 62ch; }

.prose p { color: var(--cat-text-2); max-width: 62ch; }
.prose p + p { margin-top: 1rem; }

/* ── The other games ─────────────────────────────────────────────── */
.more { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--cat-line); display: grid; gap: 1rem; }
.more > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.more .eyebrow { padding-top: .35rem; }
a.chip { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
a.chip:hover { color: var(--cat-text); border-color: var(--cat-line-2); }
a.chip:focus-visible { outline: 2px solid var(--cat-gold); outline-offset: 3px; }

@media (max-width: 760px) {
  .more > div { grid-template-columns: 1fr; gap: .5rem; }
  .facts { gap: 0 1.1rem; }
  .figs { grid-template-columns: 1fr; }
  ol.rules > li { grid-template-columns: 2rem 1fr; gap: .3rem .6rem; }
  .ayo-foot { flex-direction: column; align-items: flex-start; gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ayo-seeds, .ayo-meter i { transition: none; }
}