/* Backgammon Room home page, on top of styles.css. Layout after aave.com (inset sheets, one
   dark band, phones in the hero); the review chart in the app's review colours. */
:root {
  --blunder: #e8732a;
  --inaccuracy: #56b4e9;
  --cube-error: #cc79a7;
}

/* ---------- sheets: the inset rounded panels */
.sheet {
  max-width: 92rem;
  margin: 0 var(--inset);
  border-radius: var(--radius-sheet);
}
@media (min-width: 94rem) { .sheet { margin: 0 auto; } }

/* ---------- hero */
.hero-sheet {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) 0;
  background:
    radial-gradient(60% 45% at 50% 100%, var(--amber-glow), transparent 70%),
    linear-gradient(180deg, var(--page) 0%, var(--sheet) 55%, var(--sand) 100%);
  text-align: center;
}
.hero-copy { max-width: 46rem; margin: 0 auto; }
.hero h1 {
  margin: 0;
  font: 700 clamp(2.75rem, 7.4vw, 5.5rem)/1 var(--round);
  letter-spacing: -0.04em;
}
.hero .lede {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-2);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}
.soon { margin: 0; font: 500 0.9375rem/1.3 var(--round); color: var(--ink-3); }
.soon span { white-space: nowrap; }
.soon span + span::before { content: " · "; }
/* Under the button on a phone: one half per line, no dot left hanging. */
@media (max-width: 30rem) {
  .soon span { display: block; }
  .soon span + span::before { content: none; }
}

/* Three iPhones: the live board in the middle, Home and a review fanned out behind, cut by
   the sheet's bottom edge as on aave.com. */
.phones {
  --w: clamp(200px, 23vw, 300px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  height: calc(var(--w) * 2.174 * 0.9);
}
/* The iPhone's dark titanium edge, shared by the portrait and landscape frames. */
:root { --phone-frame: linear-gradient(145deg, #3a332c, #14110e 40%, #2a241f); }
.phone {
  position: relative;
  width: var(--w);
  flex: none;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.17);
  background: var(--phone-frame);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 3px rgba(40, 25, 10, 0.25),
    0 30px 60px -22px rgba(70, 40, 10, 0.45);
}
/* A screenshot sits in a <picture> (AVIF, JPEG fallback) that takes no box of its own. */
.phone picture, .phone-land picture { display: contents; }
.phone img, .phone > svg, .phone > .screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--w) * 0.14);
  background: var(--night);
}
.phone-main { z-index: 2; }
/* Holds the live board's place until it draws; without scripts the screenshot takes it. */
@media (scripting: none) { .phone > .screen { display: none; } }
.phone-left, .phone-right { --side: calc(var(--w) * 0.86); width: var(--side); padding: calc(var(--side) * 0.032); border-radius: calc(var(--side) * 0.17); margin-top: calc(var(--w) * 0.22); }
.phone-left img, .phone-right img { border-radius: calc(var(--side) * 0.14); }
.phone-left { margin-right: calc(var(--w) * -0.2); rotate: -7deg; transform-origin: 100% 100%; }
.phone-right { margin-left: calc(var(--w) * -0.2); rotate: 7deg; transform-origin: 0% 100%; }

/* The phones rise and fan out; the headline and the button are there from the first paint. */
@media (prefers-reduced-motion: no-preference) {
  .phone-main { animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .phone-left { animation: fan-left 1100ms 150ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .phone-right { animation: fan-right 1100ms 150ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fan-left { from { opacity: 0; rotate: 0deg; translate: 30% 40px; } }
@keyframes fan-right { from { opacity: 0; rotate: 0deg; translate: -30% 40px; } }

@media (max-width: 40rem) {
  .phones { --w: 62vw; }
  .phone-left { margin-right: calc(var(--w) * -0.42); }
  .phone-right { margin-left: calc(var(--w) * -0.42); }
}

/* ---------- section heads */
.section-head { max-width: 44rem; margin: 0 auto; text-align: center; }
.section-head h2, .split-copy h2, .online-copy h2, .faq h2, .get h2 {
  margin: 0;
  font: 700 clamp(2rem, 4.6vw, 3.25rem)/1.05 var(--round);
  letter-spacing: -0.035em;
}
.section-head p { margin: 1rem auto 0; max-width: 36rem; font-size: 1.125rem; color: var(--ink-2); }

/* ---------- the night band: play */
.night-sheet {
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  background-color: var(--night);
  background-image: radial-gradient(70% 40% at 50% 0%, var(--amber-glow-dim), transparent 70%);
  color: var(--night-text);
}
.night .section-head p { color: var(--night-2); }

.levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: var(--wide);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}
.level { padding-top: 1rem; border-top: 1px solid var(--night-rule); }
.level h3 { margin: 0 0 1rem; font: 600 0.9375rem/1 var(--round); color: var(--night-2); }
.level ul { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.level li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font: 500 0.8125rem/1.2 var(--round); color: var(--night-text); text-align: center; }
.level img { width: 100%; max-width: 64px; height: auto; }
@media (max-width: 60rem) { .levels { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 1.25rem; } }
/* A phone: each level on one line, its name beside its three faces. */
@media (max-width: 34rem) {
  .levels { grid-template-columns: 1fr; gap: 0; }
  .level { display: grid; grid-template-columns: 5.75rem 1fr; align-items: center; padding: 0.9rem 0; }
  .level h3 { margin: 0; }
  .level img { max-width: 48px; }
}

.facts { margin: 0; }
.facts dt { font: 600 1.0625rem/1.3 var(--round); letter-spacing: -0.01em; }
.facts dd { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--night-2); }
.facts-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--wide);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}
.facts-4 > div { padding-top: 1.25rem; border-top: 1px solid var(--night-rule); }
@media (max-width: 60rem) { .facts-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .facts-4 { grid-template-columns: 1fr; gap: 1.5rem; } }
.facts-stack { display: grid; gap: 1.25rem; margin-top: 2rem; }
.facts-stack > div { padding-top: 1.25rem; border-top: 1px solid var(--night-rule); }

.online {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: var(--wide);
  margin: clamp(5rem, 10vw, 8rem) auto 0;
}
.online-copy > p { margin: 1rem 0 0; font-size: 1.0625rem; color: var(--night-2); }
.online-copy .next { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--night-3); }
.phone-land {
  padding: 1.6%;
  border-radius: 7.5% / 16%;
  background: var(--phone-frame);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.phone-land img { width: 100%; border-radius: 6.2% / 13.5%; }
@media (max-width: 52rem) { .online { grid-template-columns: 1fr; } }

/* ---------- light bands */
.band {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter);
}
.band-tint {
  max-width: none;
  margin: 0 var(--inset);
  border-radius: var(--radius-sheet);
  background: linear-gradient(180deg, var(--sheet), var(--sheet-end));
}
.band-tint > .daily-grid { max-width: var(--wide); margin-inline: auto; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.split-copy > p { margin: 1rem 0 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 32rem; }
.split-media { position: relative; display: flex; justify-content: center; }
.phone-solo { --w: clamp(220px, 26vw, 300px); }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }

.steps { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 1.25rem; max-width: 32rem; }
.steps li { position: relative; padding-left: 2.75rem; color: var(--ink-2); font-size: 0.9375rem; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.875rem/1 var(--round);
  background: var(--ink);
  color: var(--page);
}
.steps strong { display: block; color: var(--ink); font: 600 1.0625rem/1.3 var(--round); margin-bottom: 0.15rem; }

/* ---------- the review chart (the app's review colours; it draws itself once in view) */
.chart {
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 24px;
  background: var(--night);
  color: var(--night-text);
}
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; align-items: baseline; }
.chart-title { font: 600 1.125rem/1.2 var(--round); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; font-size: 0.8125rem; color: var(--night-2); }
.legend > span { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-big { background: var(--blunder); }
.dot-small { background: var(--inaccuracy); }
.dot-cube { background: var(--cube-error); }
.chart-svg { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.chart-svg .rule { stroke: rgba(243, 236, 223, 0.35); stroke-width: 1; stroke-dasharray: 4 5; }
.chart-svg .axis { fill: var(--night-3); font: 12px var(--text); }
.chart-svg .area { fill: rgba(243, 236, 223, 0.08); }
.chart-svg .line { fill: none; stroke: rgba(243, 236, 223, 0.92); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .marker { stroke: var(--night); stroke-width: 3; }
.marker-big { fill: var(--blunder); }
.marker-small { fill: var(--inaccuracy); }
.marker-cube { fill: var(--cube-error); }
.callout line { stroke: var(--blunder); stroke-width: 1.5; }
.callout text { fill: var(--night-2); font: 14px var(--text); }
.callout .callout-strong { fill: var(--night-text); font: 600 15px var(--round); }
.chart-note { display: none; margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--night-2); }
.chart-note strong { display: block; color: var(--night-text); font: 600 1rem/1.4 var(--round); }
/* On a phone the chart is drawn at about 40% of its size: the callout and axis move out of the
   drawing, the line and dots get heavier so they stay legible. */
@media (max-width: 40rem) {
  .chart-svg .callout, .chart-svg .axis { display: none; }
  .chart-note { display: block; }
  .chart-svg .line { stroke-width: 5; }
  .chart-svg .rule { stroke-width: 2; stroke-dasharray: 8 10; }
  .chart-svg .marker { r: 13px; stroke-width: 5; }
  .chart-svg .marker-big { r: 17px; }
}
.chart-tip { display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--night-rule); }
.chart-tip img { width: 56px; flex: none; }
.chart-tip p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--night-text); }
.tip-label { display: block; font: 600 0.8125rem/1.4 var(--round); color: var(--amber); }
.aside { margin: 1.25rem 0 0; text-align: center; color: var(--ink-3); font-size: 0.9375rem; }

.js .chart .area, .js .chart .marker, .js .chart .callout { opacity: 0; transition: opacity 500ms ease; }
.js .chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms cubic-bezier(0.45, 0, 0.2, 1); }
.js .chart.is-in .line { stroke-dashoffset: 0; }
.js .chart.is-in .area { opacity: 1; transition-delay: 900ms; }
.js .chart.is-in .marker-small { opacity: 1; transition-delay: 500ms; }
.js .chart.is-in .marker-big, .js .chart.is-in .callout { opacity: 1; transition-delay: 750ms; }
.js .chart.is-in .marker-cube { opacity: 1; transition-delay: 1000ms; }

/* ---------- a few minutes a day */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.daily-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.daily-item .phone { --w: clamp(200px, 20vw, 250px); margin-bottom: 2.25rem; }
.daily-item h3 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 1.875rem)/1.15 var(--round); letter-spacing: -0.025em; }
.daily-item > p { max-width: 26rem; margin: 0.75rem 0 0; font-size: 1.0625rem; color: var(--ink-2); }
@media (max-width: 46rem) { .daily-grid { grid-template-columns: 1fr; } }

/* ---------- the guides (the French home): each a title and one line, ruled like the FAQ */
.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  max-width: 56rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 0;
  list-style: none;
}
.guide-list a { display: block; height: 100%; padding: 1.25rem 0 1.35rem; border-top: 1px solid var(--rule); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.guide-list strong { display: block; font: 600 1.1875rem/1.3 var(--round); letter-spacing: -0.01em; color: var(--ink); }
.guide-list span { display: block; margin-top: 0.3rem; font-size: 0.9375rem; color: var(--ink-2); }
.guide-list a:active strong { color: var(--amber-text); }
@media (hover: hover) { .guide-list a:hover strong { color: var(--amber-text); } }
@media (max-width: 40rem) { .guide-list { grid-template-columns: 1fr; } }
.guide-list + .aside { max-width: 36rem; margin: 2rem auto 0; }

/* ---------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; align-items: start; }
.faq-head p { max-width: 18rem; margin: 1rem 0 0; color: var(--ink-2); }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  display: block;
  padding: 1.35rem 3rem 1.35rem 0;
  font: 600 1.125rem/1.35 var(--round);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--amber-edge);
  transition: rotate 200ms ease;
}
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; }
.faq details p { margin: -0.35rem 0 1.5rem; max-width: 40rem; color: var(--ink-2); }
.faq details a { color: var(--amber-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@media (hover: hover) { .faq details a:hover { color: var(--ink); } }
@media (max-width: 52rem) { .faq { grid-template-columns: 1fr; } }

/* ---------- get the app */
.get { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.get-sheet {
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  background:
    radial-gradient(60% 70% at 50% 100%, var(--amber-glow), transparent 70%),
    linear-gradient(180deg, var(--sheet), var(--sand));
  text-align: center;
}
.get-icon { width: 96px; margin: 0 auto 1.75rem; border-radius: 22px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 16px 32px -12px rgba(70, 40, 10, 0.5); }
.get p { max-width: 30rem; margin: 1rem auto 0; color: var(--ink-2); font-size: 1.0625rem; }
.get a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* ---------- reveal on scroll (only when the script runs; without it everything shows) */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity 700ms ease, translate 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { translate: none; transition: opacity 400ms ease; }
  .js .chart .line { transition: none; }
}

/* Print: every section, whether or not it was scrolled to, and the chart drawn. */
@media print {
  .js .reveal { opacity: 1; translate: none; }
  .js .chart .line { stroke-dashoffset: 0; }
  .js .chart .area, .js .chart .marker, .js .chart .callout { opacity: 1; }
  .top { position: static; }
}

/* ---------- the live board (drawn by home.js into the middle phone) */
.live-board text { font-family: var(--text); }
.live-board .num { fill: #cdb896; font-size: 10px; text-anchor: middle; }
.live-board .pill-text { fill: var(--night-text); font: 600 15px var(--round); }
.live-board .pill-sub { fill: rgba(243, 236, 223, 0.6); font: 500 12px var(--text); }
.live-board .status { fill: #fff; font: 600 16px var(--text); }
.live-board .cube-text { fill: #2b2117; font: 700 12px var(--round); text-anchor: middle; }
.live-board .checker { transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 400ms ease; }
.live-board .die { transition: opacity 250ms ease; }
.live-board .die.used { opacity: 0.38; }
.live-board .die.gone { opacity: 0; }
.live-board .lead-ring { transition: opacity 200ms ease; }

/* The coach's moment on the live board: the notice fades, the rings close in on the blots your
   play left, and Pip's bubble rises into the free band below the dice. */
.live-board .lb-notice { fill: rgba(243, 236, 223, 0.86); font: 600 14px var(--round); text-anchor: middle; transition: opacity 300ms ease; }
.live-board .lb-ring {
  fill: none;
  stroke: var(--blunder);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 250ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-board .lb-ring:nth-of-type(2) { transition-delay: 120ms; }
.live-board .lb-bubble { transition: opacity 400ms ease 350ms, transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 350ms; }
.live-board .lb-off { opacity: 0; transition-delay: 0ms; }
.live-board .lb-ring.lb-off { transform: scale(1.45); }
.live-board .lb-bubble.lb-off { transform: translate(0, 26px); }
.live-board .lb-verdict { fill: var(--ink); font: 700 13px var(--round); }
.live-board .lb-chances { fill: var(--ink-2); font: 600 13px var(--round); text-anchor: end; font-variant-numeric: tabular-nums; }
.live-board .lb-sentence { fill: var(--ink); font: 500 15px var(--text); }
@media (prefers-reduced-motion: reduce) {
  .live-board .lb-ring.lb-off, .live-board .lb-bubble.lb-off { transform: none; }
}