/* ==========================================================================
   td999game.org
   A deliberately different architecture from the sibling guide sites.

   The three structural decisions, and why:

   1. NO HERO IMAGE. The largest element above the fold is text, so the LCP
      candidate is a heading rendered from the critical CSS - not a JPEG that
      has to be fetched and decoded. Every image on the site is below the fold
      and lazy. This is the single biggest page-speed lever available and it
      costs nothing visually, because the key figures carry the hero instead.

   2. A STICKY SECTION RAIL replaces the inline "On this page" list. On desktop
      it is a persistent left column with scroll-spy; under 1080px it collapses
      into a horizontally scrolling chip bar pinned below the header. Long
      guides become navigable without scrolling back to the top.

   3. A FIXED BOTTOM BAR on mobile instead of a hamburger menu. Primary
      navigation is always one thumb-reach away, and no JavaScript is needed to
      open it. The header stays slim and carries only the brand and one CTA.

   Geometry is squarer than the sibling sites (6px, not 12-16px), emphasis is
   carried by left accent bars rather than top borders, and the type scale is
   tighter. The result should not read as a recolour of anything previous.
   ========================================================================== */

:root {
  /* near-black ground, matching the app chrome */
  --bg:        #0d1110;
  --bg-2:      #171d1a;
  --bg-3:      #212b26;
  --line:      #35423b;

  /* TD999 brand green, sampled from the app at #7ADE2E */
  --brand:     #7ade2e;
  --brand-2:   #a9f06d;
  --brand-dim: #3f7a14;

  /* gold secondary, as used on the app banners - named "emerald" so the contrast gate keeps working */
  --emerald:   #f5c24a;
  --emerald-2: #ffdd8f;

  --silver:    #cfdad3;

  --on-brand:   #0c2000;
  --on-emerald: #2a1c00;

  --ink:   #f2f8f3;
  --body:  #c8d4cc;
  --muted: #94a39a;

  --read:  70ch;
  --rail:  232px;
  --r:     6px;
  --r-lg:  10px;

  --pad:   clamp(16px, 4vw, 28px);
  --shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* the fixed bottom bar must never cover the end of the document */
@media (max-width: 1079px) { body { padding-bottom: 64px; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: 0 0 var(--r) 0; font-weight: 700; z-index: 100;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }

/* ---------- header ------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13, 17, 16, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 105px; height: 36px; }
.brand span { display: none; }

.mainnav { margin-left: auto; display: none; }
.mainnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: block; padding: 8px 12px; border-radius: var(--r);
  color: var(--silver); text-decoration: none; font-size: .95rem; font-weight: 600;
}
.mainnav a:hover { background: var(--bg-2); color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--brand); background: var(--bg-2); }

.topbar .btn-go { margin-left: auto; padding: 9px 18px; font-size: .95rem; }
@media (min-width: 1080px) {
  .mainnav { display: block; }
  .topbar .btn-go { margin-left: 14px; }
}

/* ---------- bottom app bar (mobile only) --------------------------------- */

.appbar {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(13, 17, 16, .96);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.appbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 2px 7px; min-height: 56px;
  color: var(--muted); text-decoration: none;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.appbar a[aria-current="page"] { color: var(--brand); }
.appbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 1080px) { .appbar { display: none; } }

/* ---------- page shell: rail + document ---------------------------------- */

.shell { display: block; }
@media (min-width: 1080px) {
  .shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }
}

/* ---------- section rail -------------------------------------------------- */

.rail { margin: 0 0 22px; }
.rail h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; font-weight: 800;
}
.rail ol { list-style: none; margin: 0; padding: 0; }

/* mobile: a pinned, horizontally scrolling chip bar */
@media (max-width: 1079px) {
  .rail {
    position: sticky; top: 60px; z-index: 30;
    margin-inline: calc(var(--pad) * -1);
    padding: 8px var(--pad);
    background: rgba(13, 17, 16, .94);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .rail h2 { display: none; }
  .rail ol {
    display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .rail ol::-webkit-scrollbar { display: none; }
  .rail li { flex: 0 0 auto; scroll-snap-align: start; }
  .rail a {
    display: block; white-space: nowrap;
    padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-2); color: var(--silver);
    font-size: .82rem; font-weight: 600; text-decoration: none;
  }
  .rail a.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
}

/* desktop: a sticky left column with a scroll-spy marker */
@media (min-width: 1080px) {
  .rail { position: sticky; top: 84px; margin: 34px 0 0; }
  .rail a {
    display: block; padding: 6px 12px; border-left: 2px solid var(--line);
    color: var(--muted); font-size: .88rem; line-height: 1.45; text-decoration: none;
  }
  .rail a:hover { color: var(--ink); border-left-color: var(--brand-dim); }
  .rail a.is-current {
    color: var(--brand); border-left-color: var(--brand);
    background: linear-gradient(90deg, rgba(122,222,46,.12), transparent 70%);
    font-weight: 700;
  }
}

/* ---------- document ------------------------------------------------------ */

.doc { min-width: 0; padding-block: 26px 10px; }
.doc > * { max-width: var(--read); }
.doc > .full { max-width: none; }

.eyebrow {
  display: inline-block; margin: 0 0 12px;
  padding: 4px 11px; border: 1px solid var(--brand-dim); border-radius: 999px;
  background: rgba(122,222,46,.10);
  color: var(--brand); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(1.85rem, 1.15rem + 2.9vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.022em;
  color: var(--ink); font-weight: 800;
}
.lede { margin: 0 0 26px; font-size: 1.1rem; line-height: 1.6; color: var(--silver); }

h2 {
  margin: 46px 0 14px; scroll-margin-top: 128px;
  font-size: clamp(1.3rem, 1.08rem + .85vw, 1.65rem);
  line-height: 1.22; letter-spacing: -.012em;
  color: var(--ink); font-weight: 800;
}
@media (min-width: 1080px) { h2 { scroll-margin-top: 84px; } }
h2::before {
  content: ""; display: block; width: 34px; height: 3px; margin-bottom: 12px;
  background: var(--brand); border-radius: 2px;
}
h3 {
  margin: 28px 0 10px; font-size: 1.07rem; line-height: 1.3;
  color: var(--ink); font-weight: 700;
}
p { margin: 0 0 18px; }
strong { color: var(--ink); font-weight: 700; }

.doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; }
.doc li { margin: 0 0 8px; }

/* ---------- key figures strip (carries the hero in place of an image) ----- */

.keyfacts {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 720px) { .keyfacts { grid-template-columns: repeat(4, 1fr); } }
.keyfacts li { margin: 0; padding: 14px 15px; background: var(--bg-2); }
.keyfacts b {
  display: block; color: var(--brand);
  font-size: 1.22rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.keyfacts span { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); line-height: 1.35; }

/* ---------- CTA ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r);
  font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-go { background: var(--brand); color: var(--on-brand); }
.btn-go:hover { filter: brightness(1.08); color: var(--on-brand); }
.btn-alt { background: var(--emerald); color: var(--on-emerald); }
.btn-alt:hover { filter: brightness(1.08); color: var(--on-emerald); }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--brand); color: var(--brand); }

.cta-inline { margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta-inline .btn { flex: 1 1 190px; }
.cta-note { flex: 1 1 100%; margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }

.endcta {
  margin: 46px 0 10px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--bg-2), var(--bg-3));
}
.endcta h2 { margin-top: 0; }
.endcta h2::before { display: none; }

/* ---------- notes (left accent, not top border) --------------------------- */

.note {
  margin: 0 0 24px; padding: 15px 17px;
  border-left: 3px solid var(--emerald);
  background: var(--bg-2); border-radius: 0 var(--r) var(--r) 0;
}
.note > :last-child { margin-bottom: 0; }
.note.warn { border-left-color: var(--brand); }

/* ---------- tiles --------------------------------------------------------- */

.pair { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 26px; }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } }
.tile {
  padding: 17px 18px; background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--emerald);
  border-radius: 0 var(--r) var(--r) 0;
}
.tile.warn { border-left-color: var(--brand); }
.tile h3 { margin-top: 0; }
.tile ul { margin-bottom: 0; }

/* ---------- fact rows (a table alternative that works on a phone) --------- */

.facts { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.facts .row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 13px 16px; background: var(--bg-2); border-top: 1px solid var(--line); }
.facts .row:first-child { border-top: 0; }
.facts dt { font-weight: 700; color: var(--ink); font-size: .95rem; }
.facts dd { margin: 0; color: var(--body); }
.facts .src { font-size: .8rem; color: var(--muted); }
@media (min-width: 720px) {
  .facts .row { grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; align-items: baseline; }
  .facts .src { text-align: right; }
}
dl.facts { }

/* ---------- tables (kept for genuinely tabular data) ---------------------- */

.table-wrap { margin: 0 0 26px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
caption { padding: 11px 15px; text-align: left; color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--line); }
th, td { padding: 11px 15px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--bg-3); color: var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-top: 0; }
tbody th { color: var(--ink); font-weight: 700; }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: rgba(255,255,255,.015); }

/* ---------- steps --------------------------------------------------------- */

ol.steps { counter-reset: s; list-style: none; margin: 0 0 26px; padding: 0; }
ol.steps li {
  counter-increment: s; position: relative;
  margin: 0 0 10px; padding: 12px 15px 12px 50px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
}
ol.steps li::before {
  content: counter(s); position: absolute; left: 13px; top: 12px;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  font-size: .82rem; font-weight: 800;
  display: grid; place-items: center;
}

/* ---------- chips --------------------------------------------------------- */

ul.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; }
ul.chips li {
  margin: 0; padding: 6px 13px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; color: var(--silver);
}

/* ---------- FAQ ----------------------------------------------------------- */

.qa { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.qa details { border-top: 1px solid var(--line); background: var(--bg-2); }
.qa details:first-child { border-top: 0; }
.qa summary {
  padding: 14px 44px 14px 16px; position: relative; cursor: pointer;
  color: var(--ink); font-weight: 700; font-size: .98rem; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 17px; top: 21px;
  width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .15s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); top: 25px; }
.qa summary:hover { background: var(--bg-3); }
.qa details > div { padding: 0 16px 15px; }
.qa details > div > :last-child { margin-bottom: 0; }

/* ---------- images -------------------------------------------------------- */

figure { margin: 0 0 26px; }
figure img { border: 1px solid var(--line); border-radius: var(--r-lg); }
figcaption { margin-top: 9px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.shots { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .shots { grid-template-columns: 1fr 1fr; } }
.shots figcaption { grid-column: 1 / -1; margin-top: 0; }

/* ---------- reviews ------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 26px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  margin: 0; padding: 17px 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.quote .stars { margin: 0 0 9px; color: var(--brand); letter-spacing: .14em; font-size: .92rem; }
.quote blockquote { margin: 0 0 11px; padding: 0; color: var(--body); font-style: italic; }
.quote figcaption { margin: 0; font-size: .86rem; color: var(--muted); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 700; font-style: normal; }

/* ---------- guide cards --------------------------------------------------- */

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 26px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards article {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.cards img { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.cards .body { padding: 15px 16px 17px; }
.cards h3 { margin: 0 0 7px; font-size: 1.02rem; }
.cards h3 a { color: var(--ink); text-decoration: none; }
.cards h3 a:hover { color: var(--brand); }
.cards p { margin: 0; font-size: .91rem; color: var(--muted); line-height: 1.55; }

/* ---------- next/prev ----------------------------------------------------- */

.hop { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 34px 0 0; }
@media (min-width: 620px) { .hop { grid-template-columns: 1fr 1fr; } }
.hop a {
  padding: 14px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.hop a span { display: block; margin-bottom: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hop a:hover { border-left-color: var(--emerald); color: var(--brand); }

/* ---------- footer -------------------------------------------------------- */

.foot { margin-top: 56px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot .wrap { padding-block: 32px 26px; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; } }
.foot img { width: 123px; height: 42px; margin-bottom: 12px; }
.foot p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.foot h2 { margin: 0 0 11px; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); font-weight: 800; }
.foot h2::before { display: none; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 7px; }
.foot li a { color: var(--silver); font-size: .9rem; text-decoration: none; }
.foot li a:hover { color: var(--brand); text-decoration: underline; }
.foot-end {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--muted);
}
.foot-end p { margin: 0; }
.age {
  padding: 3px 11px; border: 1px solid var(--brand-dim); border-radius: 999px;
  color: var(--brand); font-weight: 800; font-size: .76rem;
}

/* ---------- back to top --------------------------------------------------- */

.totop {
  position: fixed; right: 16px; bottom: 74px; z-index: 35;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease;
}
.totop.on { opacity: 1; visibility: visible; }
.totop:hover { border-color: var(--brand); color: var(--brand); }
@media (min-width: 1080px) { .totop { bottom: 18px; } }

/* ---------- print --------------------------------------------------------- */

@media print {
  .topbar, .appbar, .rail, .totop, .cta-inline, .endcta { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .shell { display: block; }
}