/* Free Solitaire Hub: shared tokens, chrome, overlays and content pages. */

/* Manrope, self-hosted (SIL OFL, see /assets/fonts/OFL.txt). One variable file
   per subset covers weights 200–800. Text shows at once in a system font and
   swaps to Manrope when it arrives; latin-ext only downloads if a page uses
   characters outside basic Latin. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Locked palette */
  --felt: #1f5737;
  --chrome: #1e3b2d;
  --menu: #27483a;
  --page: #172119;
  --chrome-fg: #f1f3ef;
  --chrome-muted: rgba(241, 243, 239, 0.62);
  --chrome-line: rgba(255, 255, 255, 0.09);
  --btn: rgba(255, 255, 255, 0.1);
  --btn-hover: rgba(255, 255, 255, 0.18);
  --page-fg: #e7eae5;
  --page-muted: #a6ada7;
  --page-text: #c6ccc7; /* body text on the content pages */
  --accent: #f6c660;
  --accent-soft: rgba(246, 198, 96, 0.16);
  --on-accent: #1a1a1a;
  --line: rgba(255, 255, 255, 0.22);
  --scrim: rgba(0, 0, 0, 0.55);
  --card: #fbfaf6;
  --ink: #1b1b1b;
  --red: #cb161f;
  --back: #7b2b30;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1200px;
  --dock-h: 0px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--page-fg);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--page-fg);
}

img {
  display: block;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Header ---------------------------------------------------------- */

/* Logo and menu stay at the top while the page scrolls. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--chrome);
  color: var(--chrome-fg);
  border-bottom: 1px solid var(--chrome-line);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 12px;
}

/* Reserve the height the header controls give the header (36px in phone
   landscape, 44px from tablet up on content pages and from 1024px up on the
   game page), so the page doesn't move down when the script adds them. */
.l-landscape .site-header .inner {
  min-height: 56px;
}

.l-wide .site-header .inner,
.l-tablet .page .site-header .inner {
  min-height: 64px;
}

.logo {
  flex: none;
  display: block;
}

.logo img {
  height: 28px;
  width: auto;
}

/* Content pages: "Play now" in the header, next to the menu button. */
.header-play {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--chrome-fg);
  color: var(--chrome);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.header-play:hover {
  color: var(--chrome);
  opacity: 0.9;
}

/* Narrow phones (under 375px): smaller logo and button so logo, Play now
   (or the points pill on the game page) and the menu still share one row. */
@media (max-width: 374px) {
  .logo img { height: 22px; }
  .header-play { padding: 0 10px; font-size: 13px; }
}

/* Game page phones: the logo shrinks a little so logo, the Points pill
   (with its "+") and the menu fit on one row. */
@media (max-width: 419px) {
  .game .logo img { height: 24px; }
}

@media (max-width: 374px) {
  .game .logo img { height: 20px; }
  .game .site-header .inner { gap: 8px; }
  .l-phone .game .header-slot { margin-right: -8px; }
  .game .points { font-size: 13px; }
}

.menu-btn {
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px 0;
  padding: 6px; /* 44px tap area, 32px visible box when open or hovered */
  border: 0;
  border-radius: 14px;
  background-color: transparent;
  background-clip: content-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
}

.menu-btn:hover,
.menu-btn.open {
  background-color: var(--btn); /* not the shorthand: keep background-clip */
}

.menu-btn .bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.menu-btn .x {
  display: none;
  font-size: 20px;
  line-height: 1;
}

.menu-btn.open .bar {
  display: none;
}

.menu-btn.open .x {
  display: block;
}

/* ---- Footer ---------------------------------------------------------- */

.site-footer {
  flex: none;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--outer, 16px);
}

.footer-inner,
.dock-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--page-muted);
}

.footer-inner {
  padding: 14px 0 16px;
  border-top: 1px solid var(--chrome-line);
}

.footer-inner a,
.footer-inner .linklike {
  color: var(--page-muted);
  text-decoration: none;
  font-weight: 600;
}

.footer-inner a:hover,
.footer-inner .linklike:hover {
  color: var(--page-fg);
}

.copy {
  margin-left: auto;
  white-space: nowrap;
}

.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ---- Buttons and controls -------------------------------------------- */

.btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--chrome-line);
  border-radius: 10px;
  background: var(--btn);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  background: var(--btn-hover);
}

.btn-light {
  border: 0;
  background: var(--chrome-fg);
  color: var(--chrome);
  font-weight: 700;
}

.btn-light:hover {
  background: var(--chrome-fg);
  opacity: 0.9;
}

.btn-gold {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.btn-gold:hover {
  background: var(--accent);
  opacity: 0.9;
}

.btn-big {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

.switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: var(--btn);
  box-shadow: inset 0 0 0 1px var(--chrome-line);
  cursor: pointer;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--chrome-fg);
  transition: left 0.15s ease-out;
}

.switch[aria-checked='true'] {
  background: var(--accent);
  box-shadow: none;
}

.switch[aria-checked='true']::after {
  left: 21px;
  background: var(--on-accent);
}

.seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--btn);
}

.seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--chrome-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.seg button[aria-checked='true'] {
  background: var(--chrome-fg);
  color: var(--chrome);
}

/* ---- Close button: the same round badge on every pop-up ---------------- */

/* Floating boxes: the badge sits on the top-right corner. */
.close-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--chrome-line);
  border-radius: 50%;
  background: var(--menu);
  color: var(--chrome-fg);
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.close-badge:hover {
  background: #31574a;
}

/* 44px tap target around the small badge. */
.close-badge::before {
  content: '';
  position: absolute;
  inset: -9px;
}

/* Edge-to-edge sheets on phones: same badge, tucked inside the corner so it
   never hangs off the screen. */
.sheet > .close-badge {
  top: 14px;
  right: 14px;
}

/* ---- Overlays: dialogs and sheets ------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fadeIn 0.2s ease-out both;
}

.dialog-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  padding-bottom: max(24px, calc(var(--dock-h) + 14px));
  overflow-y: auto;
  pointer-events: none;
}

.dialog-wrap > * {
  pointer-events: auto;
}

.dialog {
  position: relative; /* anchors the corner close badge */
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  background: var(--chrome);
  color: var(--chrome-fg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: pop 0.2s ease-out both;
}

.dialog-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dialog-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--chrome-muted);
}

.dialog-actions {
  display: flex;
  gap: 8px;
}

.dialog-actions .btn {
  flex: 1;
  height: 44px;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  max-height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: var(--chrome);
  color: var(--chrome-fg);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
  animation: pop 0.22s ease-out both;
}

.grabber {
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: var(--chrome-line);
}

/* Reserved ad slots. Until AdSense arrives they are empty and unfilled, so
   they read as padding; the sizes stay so nothing shifts when ads load. */
.ad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  max-width: 100%;
  border-radius: 4px;
}

/* House promo: a link to our own pages in the rail and under the win and
   daily dialogs (design 3l, "blocked or offline"). */
.ad-house {
  align-items: flex-start;
}

.house-promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 250px;
  max-height: 100%;
  padding: 24px;
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  background: var(--chrome);
  color: var(--chrome-fg);
  text-align: center;
  text-decoration: none;
}

.house-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-muted);
}

.house-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}

.house-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--chrome-muted);
}

.house-cta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}

.house-promo:hover .house-cta,
.house-promo:focus-visible .house-cta {
  color: var(--accent);
}

.ad-320x50 { width: 320px; height: 50px; }
.ad-728x90 { width: 728px; height: 90px; }
.ad-300x250 { width: 300px; height: 250px; }
.ad-300x600 { width: 300px; height: 600px; }
.ad-320x480 { width: 320px; height: 480px; }

/* ---- Phone menu (2c) ---------------------------------------------------- */

/* Starts below the header, so the header (and the menu button, now an X)
   stays clickable while the menu is open. */
.nav-overlay {
  position: fixed;
  inset: var(--nav-top, 49px) 0 0;
  z-index: 50;
}

.nav-sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--chrome-line);
  border-radius: 0 0 16px 16px;
  background: var(--chrome);
  color: var(--chrome-fg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: pop 0.18s ease-out both;
  /* Short landscape screens: scroll inside the sheet instead of cutting items off. */
  max-height: calc(100vh - var(--nav-top, 49px));
  max-height: calc(100dvh - var(--nav-top, 49px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-list {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-item {
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

/* Hover: lighter row, gold text, a small nudge and an arrow on the right. */
.nav-item::after {
  content: '\203A';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-item:hover,
.nav-item:focus-visible {
  background: var(--btn-hover);
  color: var(--accent);
  padding-left: 16px;
}

.nav-item:hover::after,
.nav-item:focus-visible::after {
  opacity: 1;
  transform: none;
}

.nav-item:active {
  background: var(--btn);
}

.nav-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--chrome-line);
}

.nav-copy {
  padding: 10px 20px 16px;
  font-size: 12px;
  color: var(--chrome-muted);
}

/* ---- Cookie consent (4b) ------------------------------------------------ */

.consent {
  z-index: 70;
}

.consent .scrim {
  background: rgba(0, 0, 0, 0.35);
}

.consent-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 24px;
}

.consent-title {
  padding-right: 36px; /* room for the badge on phones */
}

/* Tablet and desktop: the banner floats clear of the screen sides, so the
   badge moves onto its corner like every other pop-up. */
@media (min-width: 600px) and (min-height: 480px) {
  .consent-sheet {
    overflow: visible;
  }

  .consent-sheet > .close-badge {
    top: -10px;
    right: -8px;
  }

  .consent-title {
    padding-right: 0;
  }
}

.consent-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chrome-muted);
}

.consent-text a {
  font-weight: 600;
}

.consent-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.consent-buttons .btn {
  height: 44px;
}

.consent-manage {
  height: 40px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.consent-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--chrome-line);
}

/* Settings-style rows, shared by the settings sheet and consent options. */
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 6px 0;
  border-bottom: 1px solid var(--chrome-line);
}

.set-row:last-child {
  border-bottom: 0;
}

.set-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.set-label {
  font-size: 15px;
  font-weight: 600;
}

.set-desc {
  font-size: 12px;
  color: var(--chrome-muted);
}

/* ---- Content pages (3j, 4g–4j) ------------------------------------------ */

.page-main {
  --gutter: clamp(16px, 5vw, 56px);
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px var(--gutter) 28px;
}

/* Narrow centred column (contact page): the form sits in the middle of the
   screen, horizontally always and vertically when there is room. */
.page-main.page-narrow {
  max-width: calc(640px + 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-narrow .back-link {
  align-self: flex-start;
}

.page-narrow .form {
  max-width: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin: -6px 0 10px;
  color: var(--page-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.page-main a.back-link:hover {
  color: var(--page-fg);
}

.back-link span {
  font-size: 18px;
  line-height: 1;
}

.crumb {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--page-muted);
}

.crumb a {
  color: var(--page-muted);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--page-fg);
}

/* Content page headings stay brighter than the body text. */
.page-main :is(h1, h2, h3) {
  color: var(--chrome-fg);
}

/* A link inside a heading keeps the heading's weight. */
.page-main :is(h1, h2, h3) a {
  font-weight: inherit;
}

.page-main h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}

/* Jump links (e.g. /how-to-play/#strategy) stop below the sticky header. */
.page-main [id] {
  scroll-margin-top: 64px;
}

.page-main h1.with-lead {
  margin-bottom: 10px;
}

.page-main h2 {
  margin: 20px 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-main p,
.page-main ul {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--page-text);
  text-wrap: pretty;
}

.page-main ul {
  padding-left: 18px;
}

.page-main ul.spaced {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Text under a heading (the page title h1, h2, h3) sits slightly in from
   it, on the content pages and the homepage text below the board (.intro). */
:is(.page-main, .intro) :is(h1, h2, h3) ~ :is(p, ul, .faq-a, .updated) {
  margin-left: 12px;
}

.page-main strong {
  color: var(--page-fg);
}

.page-main a {
  font-weight: 600;
}

/* A button that reads as a link in running text (e.g. "robots.txt", which
   opens a pop-up rather than the raw file). Same look as .page-main a. */
.page-main .text-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.page-main .text-link:hover {
  color: var(--page-fg);
}

/* History page building blocks (used inside the timeline cards): each era opens with a banner,
   picture on the left and the gold era label, heading and a quick fact on
   the right; the story runs full width underneath. A section's second
   picture is a smaller banner inside the text. width/height in the HTML
   reserve the image space (no layout shift). */
.era-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--chrome);
}

.era-banner img {
  flex: none;
  width: 200px;
  height: auto;
  border-radius: 10px;
}

/* Story text under each banner is indented like the rest of the page. */
.era > :is(p, ul) {
  margin-left: 12px;
}

.era-banner-plain {
  padding: 14px 16px;
}

.era-head {
  min-width: 0;
}

.page-main .era-label {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-main .era-banner h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.page-main .era-head .era-fact {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--page-text);
}

.era-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 12px 0 14px 12px;
  padding: 10px;
  border: 1px solid var(--chrome-line);
  border-radius: 12px;
}

.era-inline img {
  flex: none;
  width: 140px;
  height: auto;
  border-radius: 8px;
}

.era-inline figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--page-text);
}

.era-inline .era-label {
  display: block;
  margin-bottom: 2px;
}

/* Gold-edged box (first used for a pull quote): now holds the bottom
   timeline list on the history page. */
.info-box {
  margin: 8px 0 16px 12px;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--chrome);
}

.page-main .info-box ul {
  margin: 0;
  color: var(--chrome-fg);
}

/* Phones: a smaller picture beside the heading. */
@media (max-width: 599.98px) {
  .era-banner {
    gap: 12px;
    padding: 10px;
  }

  .era-banner img {
    width: 112px;
  }

  .page-main .era-banner h2 {
    font-size: 17px;
  }

  .page-main .era-head .era-fact {
    font-size: 13px;
  }

  .era-inline img {
    width: 104px;
  }
}

/* History page (layout A, "timeline spine"): the eras hang off a gold line.
   Wide screens: each era's text card sits on one side of the line and its
   date and pictures on the other, alternating left and right. Phones: the
   line runs down the left; date, pictures, then the card to its right.
   js/history.js adds .tl-js to animate (cards slide in, the line grows,
   dots fill and pulse); without it everything is simply shown. Only
   opacity and transform animate, so nothing shifts the layout. */
.timeline {
  position: relative;
  margin: 44px 0 44px;
  padding: 0 0 0 34px;
  list-style: none;
}

.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 3px;
  border-radius: 2px;
}

/* The track is a faint gold, so the line always visibly runs into the end
   circle even before the gold fill has reached it. */
.timeline::before {
  background: rgba(246, 198, 96, 0.22);
}

/* Gold fill: full length without animation; with .tl-js it follows the
   reader's progress (--tl-progress, 0 to 1, set by js/history.js). */
.timeline::after {
  background: linear-gradient(var(--accent), rgba(246, 198, 96, 0.55));
  transform-origin: top;
}

.tl-js .timeline::after {
  transform: scaleY(var(--tl-progress, 0));
}

.tl-item {
  position: relative;
  margin: 0 0 50px;
}

/* Date: a gold dot on the line with the year beside it. */
.tl-year {
  position: absolute;
  top: 2px;
  left: -31px; /* dot centred on the line */
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px; /* 2x the original 13px */
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

.tl-year::before {
  content: '';
  flex: none;
  width: 19px;
  height: 19px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--page);
  box-sizing: border-box;
}

/* Pictures: below the date on phones, beside the line on wide screens. */
.tl-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 56px; /* room for the year above */
  margin-bottom: 12px;
}

.tl-media:empty {
  display: none;
}

.tl-nomedia .tl-card {
  padding-top: 56px;
}

.tl-media img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.tl-media figure {
  margin: 0;
}

/* A wide picture with words in it (the Windows Solitaire numbers) gets the
   whole column so its text stays readable. */
.tl-media-wide img {
  max-width: 100%;
}

.tl-media figcaption {
  max-width: 300px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--page-text);
}

.tl-media .era-label {
  display: block;
  margin-bottom: 2px;
}

.tl-card .era-banner {
  margin-top: 0;
}

.page-main .tl-card > :is(p, ul) {
  margin-left: 4px;
}

.tl-card .era-inline {
  margin-left: 4px;
}

@media (min-width: 900px) {
  .timeline {
    padding: 0;
  }

  .timeline::before,
  .timeline::after {
    left: calc(50% - 1.5px);
  }

  /* Card | line | date and pictures (mirrored on alternate entries). */
  .tl-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    align-items: start;
    margin-bottom: 60px;
  }

  .tl-left .tl-card { grid-column: 1; grid-row: 1; }
  .tl-left .tl-media { grid-column: 3; grid-row: 1; align-items: flex-start; }
  .tl-right .tl-card { grid-column: 3; grid-row: 1; }
  .tl-right .tl-media { grid-column: 1; grid-row: 1; align-items: flex-end; }

  .tl-media,
  .tl-media:empty {
    display: flex;
    padding-top: 68px;
    margin: 0;
  }

  .tl-right .tl-media figcaption {
    text-align: right;
  }

  .tl-nomedia .tl-card {
    padding-top: 0;
  }

  /* Dot on the line; year on the pictures' side of it. */
  .tl-year {
    top: 14px;
  }

  .tl-left .tl-year {
    left: calc(50% - 9.5px);
  }

  .tl-right .tl-year {
    left: auto;
    right: calc(50% - 9.5px);
    flex-direction: row-reverse;
  }
}

/* Short entries (a single picture) have a span caption: one per line. */
.era-head > span {
  display: block;
}

/* End of the line: a gold circle. */
/* The circle sits inside the list (the line runs into it) rather than
   hanging below it over the next section. */
.tl-end {
  position: relative;
  height: 23px;
}

.tl-end::before {
  content: '';
  position: absolute;
  top: 0;
  left: -33px; /* centred on the line (phones) */
  width: 23px;
  height: 23px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .tl-end::before {
    left: calc(50% - 11.5px);
  }

  .tl-mini .tl-card {
    padding-bottom: 24px;
  }
}

/* Animation (only with .tl-js on <html>). Cards slide in when they come
   into view and slide in again if you scroll back up and down; each dot
   fills gold and pulses as the gold line reaches it. */
.tl-js .tl-item :is(.tl-card, .tl-media) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease-out, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

@media (min-width: 900px) {
  .tl-js .tl-left .tl-card,
  .tl-js .tl-right .tl-media {
    transform: translateX(-24px);
  }

  .tl-js .tl-right .tl-card,
  .tl-js .tl-left .tl-media {
    transform: translateX(24px);
  }
}

.tl-js .tl-item.tl-in :is(.tl-card, .tl-media) {
  opacity: 1;
  transform: none;
}

.tl-js .tl-year::before,
.tl-js .tl-end::before {
  transition: background-color 0.2s ease-out;
}

.tl-js .tl-end::before {
  background: var(--page);
}

.tl-js .tl-reached .tl-year::before,
.tl-js .tl-end.tl-reached::before {
  background: var(--accent);
  animation: tlPulse 0.9s ease-out 1;
}

@keyframes tlPulse {
  0% { box-shadow: 0 0 0 0 rgba(246, 198, 96, 0.75); transform: scale(1.25); }
  40% { transform: scale(1); }
  100% { box-shadow: 0 0 0 14px rgba(246, 198, 96, 0); transform: scale(1); }
}

/* Back-to-top chevron (home, history, how to play, terms, privacy): bottom right, shown once
   you've scrolled down (js/to-top.js adds .show; without JS it is always
   there). */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--dock-h, 0px) + max(16px, env(safe-area-inset-bottom))); /* above the game page's pinned bar */
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--chrome-line);
  border-radius: 50%;
  background: var(--chrome);
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}

.to-top svg {
  width: 22px;
  height: 22px;
}

.to-top:hover,
.to-top:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.tt-js .to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.tt-js .to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Pop-up showing a plain-text file (robots.txt): wider than the standard
   dialog, text scrolls inside it. */
.textfile-dialog {
  max-width: 560px;
}

.textfile-body {
  max-height: min(60vh, 480px);
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--chrome-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--chrome-fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.updated {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--page-text);
}

/* Gold [placeholder] to be filled in before launch. */
.ph {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.play-now {
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 6px 0 4px;
  border-radius: 10px;
  background: var(--chrome-fg);
  color: var(--chrome);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.page-main a.play-now:hover {
  color: var(--chrome);
  opacity: 0.9;
}

.faq-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--chrome-line);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-q {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.page-main .faq-a {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Contact form (4h) */
.form {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--page-fg);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--chrome-line);
  border-radius: 10px;
  background: var(--chrome);
  color: var(--page-fg);
  font-size: 15px;
  font-weight: 500;
}

.field textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}

.field ::placeholder {
  color: var(--page-muted);
  opacity: 0.8;
}

.form-note {
  font-size: 13px;
  color: var(--page-text);
}

/* Page shell per width: hamburger on phones, footer everywhere else. */
@media (min-width: 760px) {
  .page-main {
    padding-top: 32px;
  }
}

/* Content pages use the full width like the game page: header and footer
   run edge to edge, the text column grows up to 1440px. */
.page .site-header .inner,
.page .site-footer {
  max-width: none;
}

.page .site-header .inner {
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

.page .site-footer {
  padding: 0 clamp(16px, 2vw, 24px);
}

/* Longer lines on wide screens read better a touch larger. */
@media (min-width: 1024px) {
  .page-main p,
  .page-main ul {
    font-size: 16px;
  }

  .page-main .faq-a {
    font-size: 15px;
  }
}

/* The hamburger menu shows on every page at every width. On desktop (1024px
   and up) it opens as a compact panel under the button, not a full-width sheet. */
.l-wide .menu-btn {
  margin-left: 4px;
}

.l-wide .nav-sheet {
  left: auto;
  right: max(var(--outer, 12px), 12px);
  width: 300px;
  border: 1px solid var(--chrome-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

/* Content pages: line the panel up with their header padding. */
.l-wide .page .nav-sheet {
  right: clamp(12px, 2vw, 24px);
}

@media (max-width: 759.98px) {
  .page .site-footer {
    display: none;
  }
}

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