/* Bowlitaire website: shared tokens, type, header, footer, badges and prose pages.
   Tokens are DESIGN.md's "Starlite Lanes, 1962" palette; components read colours and sizes only from here. */

@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/BigShouldersDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/BigShouldersDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/BigShouldersDisplay-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("../fonts/Yellowtail-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --lounge: #12242b;
  --lounge-glow: #1d3a43;
  --monitor: #0d0f10;
  --flap: #1c1c1e;
  --rail: #3b4044;
  --cherry: #d7263d;
  --cherry-deep: #9c1529;
  --cherry-hover: #c21f35;
  --neon: #ff5a6e;
  --neon-glow: rgba(255, 70, 95, 0.6);
  --neon-core: #ffe9ec;
  --gold: #f2b134;
  --gold-deep: #c98a12;
  --aqua: #5ec4b6;
  --aqua-deep: #2f8f86;
  --teal-panel: #134a55;
  --stock: #fff8ec;
  --card-stock: #f6e8c9;
  --card-edge: #b39463;
  --ink: #1b1715;
  --chrome: #c9d3d2;
  --chrome-dark: #9aa7aa;
  --maple: #e2b479;
  --maple-dark: #c38a4c;
  --pin-face: #fff7e8;
  --pin-edge: #cdb48a;
  --pin-line: #b0915f;
  --hole: #2a0a10;
  --slot: rgba(60, 35, 10, 0.45);
  --text-body: #e8dccb;
  --text-muted: #9aa6a8;
  --shadow: rgba(0, 0, 0, 0.38);

  --font: "Big Shoulders Display", "Arial Narrow", sans-serif-condensed, sans-serif;
  --script: "Yellowtail", cursive;

  --fs-display: clamp(3.5rem, 2.2rem + 5.2vw, 6.5rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-title: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: 1.25rem;
  --fs-small: 1.0625rem;
  --fs-label: 0.9375rem;

  --r-flap: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-key: 16px;
  --r-panel: 18px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-key: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 5px 10px rgba(0, 0, 0, 0.35);
  --shadow-ticket: 0 3px 0 var(--card-edge), 0 10px 16px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 0 #e6d3ad, 0 2px 0 #d7c095, 0 3px 0 #c6aa7a, 0 4px 0 #b39463, 0 5px 0 #9c7c4f, 0 9px 12px rgba(0, 0, 0, 0.38);

  --page: min(1280px, 100% - 2 * var(--gutter));
  --gutter: clamp(16px, 4vw, 64px);

  color-scheme: dark;
  scrollbar-color: var(--rail) var(--monitor);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, var(--lounge-glow), var(--lounge) 62%) no-repeat, var(--lounge);
  color: var(--text-body);
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--stock); font-weight: 900; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--gold); color: var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--monitor); }
::-webkit-scrollbar-thumb { background: var(--rail); border: 3px solid var(--monitor); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--chrome-dark); }

a { color: var(--aqua); text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--aqua) 55%, transparent); }
a:hover { color: var(--stock); text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: var(--r-sm); background: var(--stock); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:hover { color: var(--ink); }

/* Header: the neon sign and two links. */
.site-header {
  width: var(--page);
  margin-inline: auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.sign {
  margin-right: auto;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem);
  line-height: 1;
  color: var(--neon-core);
  text-decoration: none;
  text-shadow: 0 0 2px var(--neon), 0 0 10px var(--neon-glow), 0 0 26px rgba(255, 70, 95, 0.35);
  transform: rotate(-4deg);
  padding: 6px 4px 10px;
}
.sign:hover { color: var(--neon-core); }
.site-nav { display: flex; gap: clamp(18px, 2.6vw, 32px); }
.site-nav a {
  color: var(--text-body);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  padding: 10px 0;
}
.site-nav a:hover { color: var(--stock); text-decoration: underline; text-decoration-color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold); }

/* Keys: jukebox-key buttons and links. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-key);
  font: 900 1.125rem/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-key);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background-color 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.key:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35); }
.key--cherry { background: var(--cherry); color: var(--stock); }
.key--cherry:hover { background: var(--cherry-hover); color: var(--stock); }
.key--chrome { background: var(--chrome); color: var(--ink); }
.key--chrome:hover { background: var(--stock); color: var(--ink); }
.key--cream { background: var(--stock); color: var(--ink); }
.key:focus-visible { outline-offset: 4px; }

/* Store badges, under a Coming soon label until launch. The badges themselves are never altered. */
.stores { display: flex; flex-direction: column; gap: 12px; }
.stores__soon {
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.stores__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; --badge-h: 52px; }
.badge { display: block; height: var(--badge-h); border-radius: 9px; }
.badge[aria-disabled="true"] { cursor: default; }
.badge img { height: 100%; width: auto; }
/* Google's PNG carries 41 px of clear space around a 564 x 168 badge; the frame trims it without touching the art. */
.badge--google { width: calc(var(--badge-h) * 564 / 168); overflow: hidden; }
.badge--google img { height: calc(var(--badge-h) * 250 / 168); margin: calc(var(--badge-h) * -41 / 168); max-width: none; }

/* Footer. */
.site-footer {
  margin-top: clamp(72px, 10vw, 128px);
  background: var(--monitor);
  border-top: 2px solid var(--rail);
}
.site-footer__inner {
  width: var(--page);
  margin-inline: auto;
  padding: 36px 0 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer nav a { color: var(--text-body); font-weight: 800; letter-spacing: 0.03em; text-decoration: none; padding: 8px 0; display: inline-block; }
.site-footer nav a:hover { color: var(--stock); text-decoration: underline; text-decoration-color: var(--gold); }
.site-footer small { font-size: var(--fs-small); color: var(--text-muted); }

/* Read pages: How to play, Support, Privacy, Terms, Delete account. */
.prose {
  width: min(44rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-top: clamp(24px, 5vw, 64px);
}
.prose__head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.prose__head h1 { font-size: clamp(3rem, 2.2rem + 3.4vw, 5rem); line-height: 0.95; letter-spacing: -0.005em; }
.prose__head p { margin-top: 18px; font-size: var(--fs-lead); color: var(--text-body); max-width: 40rem; }
.prose__body { max-width: 42rem; }
.prose__body h2 { font-size: var(--fs-title); line-height: 1.1; margin: 1.9em 0 0.5em; }
.prose__body h2:first-child { margin-top: 0; }
.prose__body h3 { font-size: 1.375rem; line-height: 1.15; margin: 1.8em 0 0.4em; }
.prose__body p, .prose__body li { max-width: 62ch; }
.prose__body p + p { margin-top: 0.85em; }
.prose__body ul, .prose__body ol { margin: 0.7em 0 0; padding-left: 1.3em; }
.prose__body li + li { margin-top: 0.55em; }
.prose__body li::marker { color: var(--gold); }
.prose__body strong { color: var(--stock); font-weight: 900; }
.prose__meta { color: var(--text-muted); font-size: var(--fs-small); }

/* A cream ticket for one key fact on a Read page. */
.ticket {
  position: relative;
  margin-top: 1.6em;
  padding: 20px 26px;
  max-width: 40rem;
  border-radius: var(--r-panel);
  background: var(--stock);
  color: var(--ink);
  box-shadow: var(--shadow-ticket);
}
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--lounge); }
.ticket::before { left: -9px; }
.ticket::after { right: -9px; }
.ticket a { color: var(--cherry-deep); text-decoration-color: currentColor; }
.ticket a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .site-header { min-height: 68px; gap: 16px; }
  .site-nav a { font-size: 1.0625rem; }
  .stores__row { --badge-h: 46px; gap: 12px; }
}

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

/* How to play: pin diagrams drawn on a strip of maple lane, and the scoring table. */
.figure { margin: 1.4em 0 0; max-width: 26rem; }
.figure svg.diagram { color: var(--ink); }
.figure svg.diagram { width: 100%; height: auto; padding: 14px 12px 8px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--maple-dark), var(--maple) 12% 88%, var(--maple-dark)); --slot-d: var(--slot); }
.figure figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--text-muted); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 24px; max-width: 42rem; }
.diagram .d-num { font-family: var(--font); font-weight: 900; font-size: 66px; text-anchor: middle; }
.diagram .d-rank { font-family: var(--font); font-weight: 900; font-size: 22px; }
.prose__body ol li::marker { font-weight: 900; }
.scores { margin-top: 1em; border-collapse: separate; border-spacing: 0 6px; width: 100%; max-width: 38rem; }
.scores th, .scores td { text-align: left; padding: 10px 16px; background: var(--monitor); }
.scores thead th { background: none; padding: 0 16px; font-weight: 800; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.scores tbody th { border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--stock); font-weight: 900; white-space: nowrap; }
.scores tbody td { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.mark { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 8px; border-radius: var(--r-flap); background: var(--flap); color: var(--stock); box-shadow: inset 0 0 0 1px var(--rail); }
.mark--x { color: var(--gold); }
.cta-row { margin-top: 2em; display: flex; flex-wrap: wrap; gap: 14px; }