/* Home page: the hero with the playable lane, the four modes with the score sheet, How a hit works, the badges. */

/* ---------- Hero ---------- */
.hero {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: 20px 0 28px;
  min-height: calc(100svh - 80px);
}
.hero__copy { max-width: 36rem; }
.hero__intro {
  margin-bottom: clamp(8px, 1.2vw, 14px);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1.1;
  color: var(--text-body);
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.hero__pitch {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: var(--fs-lead);
  line-height: 1.35;
  max-width: 30rem;
}
.hero__actions {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 28px;
}

/* ---------- The demo lane ---------- */
.demo {
  --demo-w: min(560px, 46vw, calc((100svh - 136px) / 1.54));
  position: relative;
  width: var(--demo-w);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.demo__lane {
  position: absolute;
  inset: 0 0 13cqw;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  background:
    linear-gradient(90deg, rgba(110, 60, 20, 0.28), transparent 9% 91%, rgba(110, 60, 20, 0.28)),
    repeating-linear-gradient(90deg, var(--maple) 0 3.2cqw, #dcad70 3.2cqw 3.3cqw),
    var(--maple);
}
/* The masking panel behind the back row, as in the app. */
.demo__mask {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30cqw;
  background: linear-gradient(var(--monitor) 0 17.5cqw, var(--teal-panel) 17.5cqw);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}
.demo__foul {
  position: absolute;
  left: 0; right: 0;
  bottom: 21cqw;
  height: 0.7cqw;
  min-height: 3px;
  background: var(--cherry);
}


.monitor {
  position: relative;
  z-index: 1;
  margin-top: 2.2cqw;
  width: 62cqw;
  height: 13cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  padding: 0 3cqw;
  border-radius: var(--r-md);
  background: var(--monitor);
  border: 2px solid var(--rail);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.flaps { display: flex; gap: 1cqw; perspective: 300px; }
.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: max(26px, 7.4cqw);
  height: max(36px, 9.6cqw);
  border-radius: var(--r-flap);
  background: var(--flap);
  color: var(--stock);
  font-weight: 900;
  font-size: max(26px, 7.6cqw);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #000; }
.monitor__label {
  font-weight: 800;
  font-size: max(14px, 3.5cqw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.monitor[data-result] .monitor__label { color: var(--stock); }

.field {
  position: relative;
  z-index: 1;
  width: 55cqw;
  aspect-ratio: 1 / 1.542;
  margin-top: 3.4cqw;
}
.pin {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: none; /* the silhouette catches taps, so overlapping pins never steal each other's */
  border-radius: 40% 40% 30% 30% / 20% 20% 12% 12%;
}
.pin svg { width: 100%; height: 100%; overflow: visible; }
.pin .shape { pointer-events: visiblePainted; }
.pin:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pin__slot, .pin__lift, .pin__body { position: absolute; inset: 0; }
.pin__slot { opacity: 0; }
.pin__slot path { fill: none; stroke: var(--slot); stroke-width: 2.4; stroke-dasharray: 7 6; }
.pin__lift { transition: transform 0.18s var(--ease-out); }
.pin__body { transform-origin: 50% 97%; }
.pin__body .shape { filter: drop-shadow(0 4px 3px rgba(70, 35, 5, 0.4)); }
.pin .edge { fill: none; stroke: var(--pin-line); stroke-width: 1.6; }
.pin .num { font-family: var(--font); font-weight: 900; font-size: 66px; text-anchor: middle; }
.pin[data-suit="S"] .ink { fill: var(--ink); }
.pin[data-suit="H"] .ink { fill: var(--cherry); }
.pin[aria-pressed="true"] .pin__lift { transform: translateY(-3.6%); }
.pin[aria-pressed="true"] .edge { stroke: var(--gold); stroke-width: 6; }
.pin__tick { position: absolute; right: -10%; top: 32%; width: 34%; aspect-ratio: 1; opacity: 0; transform: scale(0.6); transition: opacity 0.14s var(--ease-out), transform 0.18s var(--ease-out); }
.pin[aria-pressed="true"] .pin__tick { opacity: 1; transform: none; }
.pin__chev {
  position: absolute;
  left: 50%;
  bottom: -5%;
  width: 22%;
  aspect-ratio: 1.6;
  margin-left: -11%;
  background: var(--cherry);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0;
}
.pin[data-open] .pin__chev { opacity: 1; }
.pin[data-down] { cursor: default; }
.pin[data-down] .pin__slot { opacity: 1; }
.pin[data-down] .pin__lift, .pin[data-down] .pin__chev { visibility: hidden; }
.pin.is-shaking .pin__lift { animation: shake 0.32s var(--ease-out); }
@keyframes shake {
  0%, 100% { translate: 0; }
  20% { translate: -7% 0; }
  45% { translate: 6% 0; }
  70% { translate: -3% 0; }
}

.hint {
  position: relative;
  z-index: 2;
  margin-top: 3cqw;
  min-height: max(44px, 9.4cqw);
  max-width: 96cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px max(18px, 4.4cqw);
  border-radius: 999px;
  background: var(--monitor);
  border: 2px solid var(--rail);
  color: var(--gold);
  font-weight: 800;
  font-size: max(15px, 3.5cqw);
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: center;
}
.hint.is-shaking { animation: shake-pill 0.32s var(--ease-out); }
@keyframes shake-pill { 0%, 100% { translate: 0; } 25% { translate: -6px 0; } 55% { translate: 5px 0; } 80% { translate: -2px 0; } }

.tray {
  position: relative;
  z-index: 2;
  width: 100cqw;
  margin-top: 3.4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  padding: 4.6cqw 4cqw 4cqw 5cqw;
  border-radius: var(--r-panel);
  background: var(--aqua);
  box-shadow: inset 0 -6px 0 var(--aqua-deep), 0 10px 18px rgba(0, 0, 0, 0.35);
}
.piles { display: flex; gap: 4.2cqw; min-height: calc(max(46px, 13.6cqw) * 1.4 + 1.6cqw + 17px); }
.pile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.pile__stack { position: relative; width: max(46px, 13.6cqw); aspect-ratio: 1 / 1.4; }
.pile__back {
  position: absolute;
  inset: 0;
  border-radius: 12%;
  background: repeating-linear-gradient(45deg, var(--cherry) 0 6%, var(--cherry-deep) 6% 8%);
  border: 2px solid var(--stock);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}
.pile__back:nth-child(1) { transform: translate(9%, -7%); }
.pile__back:nth-child(2) { transform: translate(4.5%, -3.5%); }
.pile[data-left="1"] .pile__back, .pile[data-left="0"] .pile__back { display: none; }
.pile[data-left="2"] .pile__back:nth-child(1) { display: none; }
.pile__left {
  font-weight: 800;
  font-size: max(12px, 2.9cqw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.pile__empty {
  position: absolute;
  inset: 0;
  border-radius: 12%;
  border: 2px dashed rgba(27, 23, 21, 0.35);
}

.card {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 12%;
  background: var(--card-stock);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s var(--ease-out), opacity 0.2s var(--ease-out);
}
.card[data-suit="H"] { color: var(--cherry); }
.card[aria-pressed="true"] { transform: translateY(-7%); outline: 3px solid var(--gold); outline-offset: 2px; }
.card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.card[aria-pressed="true"]:focus-visible { outline-width: 4px; }
.card.is-in-play { opacity: 0.35; }
.card.is-shaking { animation: shake-pill 0.32s var(--ease-out); }
.card__idx {
  position: absolute;
  left: 9%;
  top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: max(15px, 4.6cqw);
  line-height: 1;
}
.card__idx svg { width: max(7px, 2.1cqw); height: auto; margin-top: 2%; fill: currentColor; }
.card__idx--flip { left: auto; top: auto; right: 9%; bottom: 4%; transform: rotate(180deg); }
.card__idx u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.card__ball { position: absolute; left: 22%; top: 50%; width: 56%; margin-top: -28%; }
.card__tick { position: absolute; right: -14%; top: -10%; width: 38%; opacity: 0; }
.card[aria-pressed="true"] .card__tick { opacity: 1; }

.keys { display: flex; flex-direction: column; gap: 2.6cqw; min-width: 0; }
.keys .key {
  min-height: 44px;
  height: max(44px, 10.6cqw);
  padding: 0 max(14px, 4cqw);
  font-size: max(15px, 3.6cqw);
  min-width: max(104px, 27cqw);
}
.keys .key[hidden] { display: none; }
.keys .key[aria-disabled="true"] { background: var(--cherry-deep); color: rgba(255, 248, 236, 0.72); cursor: default; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.keys .key--chrome[aria-disabled="true"] { background: var(--chrome-dark); color: rgba(27, 23, 21, 0.6); }

/* The bowl: the ball and the gold impact ring. */
.roll, .impact { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: 3; }
.roll {
  width: 11cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 28%, var(--hole) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 60% 25%, var(--hole) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 51% 44%, var(--hole) 0 6.5%, transparent 7.5%),
    radial-gradient(circle at 34% 30%, #6a6a6a, #151515 58%, #000 100%);
  box-shadow: 0 6px 8px rgba(70, 35, 5, 0.45);
}
.roll[data-suit="H"] {
  background:
    radial-gradient(circle at 40% 28%, var(--hole) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 60% 25%, var(--hole) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 51% 44%, var(--hole) 0 6.5%, transparent 7.5%),
    radial-gradient(circle at 34% 30%, #ff7d8c, var(--cherry) 55%, #6e0f1d 100%);
}
.impact { width: 26cqw; aspect-ratio: 1; border-radius: 50%; border: 0.9cqw solid var(--gold); }

/* ---------- Modes and the score sheet ---------- */
.modes {
  width: var(--page);
  margin: clamp(32px, 6vw, 72px) auto 0;
}
.modes > h2 { font-size: var(--fs-h2); line-height: 1; }
.sheet {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 14px 0 18px;
  background: linear-gradient(var(--lounge) 80%, rgba(18, 36, 43, 0));
}
.sheet__frames {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.45fr);
  gap: 6px;
  max-width: 900px;
  min-height: 74px;
}
.frame {
  display: grid;
  grid-template-rows: auto auto 1fr;
  border-radius: var(--r-flap);
  background: var(--flap);
  overflow: hidden;
  min-height: 74px;
}
.frame__no { padding: 4px 7px 0; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--text-muted); }
.frame__marks { display: flex; justify-content: flex-end; }
.frame__mark { width: 30px; height: 24px; display: grid; place-items: center; font-weight: 900; font-size: 1.0625rem; color: var(--stock); border-left: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.frame__mark:first-child:not(:only-child) { border-left: 0; }
.frame__total { display: grid; place-items: center; font-weight: 900; font-size: 1.625rem; color: var(--stock); line-height: 1; padding: 4px 0 6px; }
.frame .x { color: var(--gold); }
.frame .frame__marks, .frame .frame__total { opacity: 0; transition: opacity 0.14s var(--ease-out); }
.frame[data-filled] .frame__marks, .frame[data-filled] .frame__total { opacity: 1; }
.frame[data-current] { box-shadow: inset 0 0 0 2px var(--gold); }
.sheet__note { margin-top: 10px; font-size: var(--fs-small); color: var(--text-muted); min-height: 1.4em; }

.mode {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 34rem);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(48px, 8vh, 96px) 0;
}
.mode:nth-of-type(even) { grid-template-columns: minmax(0, 34rem) minmax(240px, 300px); justify-content: start; }
.mode:nth-of-type(even) .phone { order: 2; }
.mode:nth-of-type(odd) { justify-content: start; padding-left: clamp(0px, 6vw, 96px); }
.mode h3 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1; margin-bottom: 16px; }
.mode p { max-width: 34rem; }
.mode p + p { margin-top: 0.8em; }

/* A simple device frame drawn in CSS. */
.phone {
  margin: 0;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(145deg, #2b3134, var(--monitor) 60%);
  box-shadow: inset 0 0 0 2px var(--rail), 0 24px 40px rgba(0, 0, 0, 0.45);
}
.phone img { width: 100%; height: auto; aspect-ratio: 640 / 1391; border-radius: 37px; background: var(--monitor); }

/* ---------- How a hit works ---------- */
.how {
  width: var(--page);
  margin: clamp(48px, 8vw, 112px) auto 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-panel);
  background: var(--stock);
  color: var(--ink);
  box-shadow: var(--shadow-ticket);
  max-width: 1100px;
}
.how h2 { color: var(--ink); font-size: var(--fs-h2); line-height: 1; }
.how__steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 44px);
}
.how__steps li { counter-increment: step; position: relative; padding-top: 52px; }
.how__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cherry);
  color: var(--stock);
  font-weight: 900;
  font-size: 1.375rem;
}
.how__steps strong { font-weight: 900; }
.how__more { margin-top: 28px; max-width: 46rem; }
.how__more a { color: var(--cherry-deep); font-weight: 900; text-decoration-color: currentColor; }
.how__more a:hover { color: var(--ink); }
.how ::selection { background: var(--ink); color: var(--stock); }

/* ---------- Get the app ---------- */
.get {
  width: var(--page);
  margin: clamp(64px, 9vw, 120px) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.get h2 { font-size: var(--fs-h2); line-height: 1; max-width: 22ch; }

/* ---------- Narrow screens: the demo stacks under the headline. ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; justify-items: center; padding-top: 4px; }
  .hero__copy { justify-self: stretch; }
  .demo { --demo-w: min(100%, 520px); }
  .field { width: 58cqw; aspect-ratio: 1 / 1.542; }
  .mode, .mode:nth-of-type(even), .mode:nth-of-type(odd) { grid-template-columns: 1fr; padding-left: 0; gap: 28px; }
  .mode:nth-of-type(even) .phone { order: 0; }
  .phone { width: min(260px, 72vw); }
  .how__steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(3.1rem, 15vw, 4rem); }
  .hero__actions { gap: 18px; }
  .sheet__frames { gap: 3px; min-height: 58px; }
  .frame { min-height: 58px; }
  .frame__no { padding: 3px 4px 0; font-size: 0.6875rem; }
  .frame__mark { width: auto; flex: 1; height: 19px; font-size: 0.875rem; }
  .frame__total { font-size: 1.0625rem; }
  .modes > h2 { font-size: 2.25rem; }
}
@media (max-width: 560px) {
  .hero__actions > .key { display: none; } /* the header already links How to play; the lane comes up sooner */
}

/* Boosters: the app's booster balls, on an aqua ball-return shelf. */
.boosters {
  width: var(--page);
  margin: clamp(48px, 8vw, 112px) auto 0;
}
.boosters > h2 { font-size: var(--fs-h2); line-height: 1; }
.boosters__lead { margin-top: 14px; max-width: 34em; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; color: var(--text-body); }
.boosters__row {
  list-style: none;
  padding: 0;
  margin-top: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px);
}
.booster { display: flex; flex-direction: column; align-items: center; text-align: center; }
.booster__ball svg { display: block; width: clamp(88px, 10vw, 140px); height: auto; }
.booster h3 { margin-top: 12px; font-size: clamp(22px, 2vw, 28px); font-weight: 900; line-height: 1.05; color: var(--stock); }
.booster p { margin-top: 6px; max-width: 14em; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; line-height: 1.3; color: var(--text-body); }
.boosters__shelf {
  height: 14px;
  margin-top: 26px;
  border-radius: 7px;
  background: linear-gradient(var(--aqua), var(--aqua-deep));
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
}
.boosters__note { margin-top: 22px; font-size: 18px; font-weight: 700; color: var(--text-muted); }
@media (max-width: 760px) {
  .boosters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .boosters__row .booster:last-child { grid-column: 1 / -1; }
  .boosters__shelf { display: none; }
}