/* Top Down Tabletop: the landing page at / (landing/index.html). Loads after landing.css and
   for-shops.css, which supply the nav, buttons, section bands, hero card, framed shots, tick
   lists and FAQ. This file adds the device composite, the four doors, the split sections, the
   game tiles and the store plans. Tokens only; every image is a first-party sample-data shot. */

/* Nav: Games / For stores / Sign in as text links, Create free account as the gradient button */
.nav .links a.nav-cta { color: #fff; border: none; border-radius: 10px; padding: 9px 14px; background: var(--grad-primary);
  box-shadow: 0 0 14px rgba(255,0,166,.3); }
.nav .links a.nav-cta:hover { color: #fff; filter: brightness(1.1); }
@media (max-width: 780px) {
  .nav .links a.nav-signin:not(.dl):not(.companion),
  .nav .links a.nav-cta:not(.dl):not(.companion) { display: inline-flex; }
}
@media (max-width: 460px) {
  .nav { gap: 10px; }
  .nav .logo { height: 40px; }
  .nav .links { gap: 10px; }
  .nav .links a.nav-cta { padding: 8px 10px; font-size: .6rem; }
}

/* Hero */
.fs-hero .fs-lede { max-width: 600px; }
.fs-hero .fs-cta { align-items: center; }
.lp-hero-store { margin-top: 16px; color: var(--text); font-size: .92rem; }
.lp-hero-store a { color: var(--cyan); text-decoration: underline; }

/* Hero device composite: TV, laptop, phone and a floating rating card. Pure CSS frames. */
.lp-devices { position: relative; min-width: 0; aspect-ratio: 100 / 84; container-type: inline-size; }
.lp-dev { margin: 0; position: absolute; min-width: 0; }
.lp-dev-tv { top: 0; right: 0; width: 82%; z-index: 1; }
.lp-dev-laptop { left: 0; bottom: 3%; width: 54%; z-index: 2; }
.lp-dev-phone { right: 2%; bottom: 0; width: 22%; z-index: 3; }

.lp-laptop-screen, .lp-phone-screen { position: relative; display: grid; place-items: center; text-align: center;
  padding: 4px; background: var(--input); color: var(--text); font-family: var(--mono); font-size: max(.5rem, 1.9cqw);
  letter-spacing: .04em; line-height: 1.25;
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(10,227,241,.07) 9px 10px); }
.lp-laptop-screen { aspect-ratio: 16 / 10; border: 3px solid var(--border-hi); border-bottom-width: 5px;
  border-radius: 9px 9px 2px 2px; box-shadow: 0 0 30px var(--border), 0 14px 30px var(--bg); }
.lp-laptop-base { height: 2.4cqw; margin: 0 -6%; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-hi); border-top: 0; }
.lp-dev-phone .lp-phone-screen { aspect-ratio: 9 / 19; border: 3px solid var(--border-hi); border-radius: 14px;
  box-shadow: 0 0 26px var(--border), 0 12px 26px var(--bg); }
.lp-dev-phone .lp-phone-screen::before { content: ''; position: absolute; top: 4px; left: 50%; width: 28%; height: 3px;
  margin-left: -14%; border-radius: 3px; background: var(--border-hi); }

.lp-rating { position: absolute; left: 3%; top: 6%; z-index: 4; display: grid; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--border-hi); border-top: 3px solid var(--green); border-radius: 12px;
  background: radial-gradient(120% 120% at 0% 0%, var(--surface-2) 0%, var(--surface) 70%);
  box-shadow: 0 0 26px var(--border-hi), 0 12px 26px var(--bg); }
.lp-rating-k { font-family: var(--head); font-weight: 700; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.lp-rating-v { font-family: var(--display); font-weight: 900; font-size: clamp(1.05rem, 5.2cqw, 1.6rem); color: var(--text); white-space: nowrap; }
.lp-rating-v b { font-family: var(--mono); font-size: .62em; color: var(--green); margin-left: 4px; }
.lp-rating-tag { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* "Screenshot coming" frames: CSS only, no fake UI. data-shot names the file to drop in. */
.lp-coming span { color: var(--dim); }
.lp-coming-body { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 10px; text-align: center;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  background: var(--input);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(10,227,241,.06) 14px 15px); }

/* Doors: one row on a computer, stacked on a phone */
.lp-doors { list-style: none; display: grid; grid-template-columns: 1fr; gap: 18px; }
.lp-door { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 22px;
  background: var(--card-paper); border: 1px solid var(--section-light-rule); border-top: 4px solid var(--door, var(--section-light-accent));
  border-radius: 16px; box-shadow: 0 6px 18px var(--section-light-rule); }
.lp-door-cyan { --door: var(--cyan); }
.lp-door-gold { --door: var(--gold); }
.lp-door-mag { --door: var(--magenta); }
.lp-door-green { --door: var(--green); }
.lp-door h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.lp-door p { color: var(--section-light-ink-dim); font-size: .94rem; flex: 1; }
.lp-door-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.lp-door-cta .btn { padding: 14px 18px; font-size: .72rem; }
.lp-door-note { font-family: var(--mono); font-size: .68rem; color: var(--section-light-ink-dim); }
@media (min-width: 640px) { .lp-doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-doors { grid-template-columns: repeat(4, 1fr); } }

/* Rating steps */
.lp-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 22px; }
.lp-steps li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--text);
  border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 14px;
  background: radial-gradient(120% 80% at 0% 0%, var(--surface-2) 0%, var(--surface) 60%, var(--bg) 100%); }
.lp-steps li:nth-child(2) { border-top-color: var(--magenta); }
.lp-steps li:nth-child(3) { border-top-color: var(--gold); }
.lp-lead { max-width: 760px; color: var(--text); margin-bottom: 28px; }
.lp-lead b { color: var(--cyan); }
@media (min-width: 761px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }

/* Split sections: copy beside shots */
.lp-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.lp-copy { min-width: 0; }
.lp-copy .sub { margin-bottom: 18px; }
.lp-copy .btn { margin-top: 22px; }
.lp-check { list-style: none; display: grid; gap: 12px; font-size: .96rem; }
.lp-check li::before { content: none; }
.lp-check li { position: relative; padding-left: 24px; }
.lp-check li::after { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.fs-light .lp-check { color: var(--section-light-ink-dim); }
.fs-light .lp-check b { color: var(--section-light-ink); }
.fs-dark .lp-check { color: var(--text); }
.lp-media { display: grid; gap: 16px; min-width: 0; }
.lp-media-2 { grid-template-columns: 1fr; }
.lp-shot figcaption { font-family: var(--mono); letter-spacing: .04em; }
@media (min-width: 761px) { .lp-media-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .lp-split { grid-template-columns: 0.9fr 1.1fr; gap: 44px; }
  .lp-split-rev { grid-template-columns: 1.1fr 0.9fr; }
  .lp-split-rev .lp-copy { order: 2; }
}

/* Phone-shaped shots */
.lp-phone-shot { margin: 0 auto; width: 100%; max-width: 250px; }
.lp-phone-shot .lp-phone-screen { aspect-ratio: 9 / 18; border: 4px solid var(--border-hi); border-radius: 26px;
  font-size: .78rem; text-transform: uppercase; box-shadow: 0 0 30px var(--border), 0 14px 32px var(--bg); }
.lp-media-phone { justify-items: center; }
.lp-media-store { grid-template-columns: 1fr 1fr; align-items: start; }
.lp-store-main { grid-column: 1 / -1; }
.lp-phone-shot-sm { max-width: 150px; align-self: center; }
.lp-phone-shot-sm .lp-phone-screen { font-size: .6rem; border-radius: 20px; }

/* Supported games: 8 equal text tiles */
.lp-games { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.lp-game { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 18px;
  border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 14px;
  background: radial-gradient(120% 80% at 0% 0%, var(--surface-2) 0%, var(--surface) 60%, var(--bg) 100%); }
.lp-game:nth-child(4n + 2) { border-top-color: var(--magenta); }
.lp-game:nth-child(4n + 3) { border-top-color: var(--gold); }
.lp-game:nth-child(4n) { border-top-color: var(--green); }
.lp-game h3 { font-family: var(--head); font-weight: 700; font-size: .95rem; letter-spacing: .03em; color: var(--text); }
.lp-game-row { color: var(--text); font-size: .88rem; }
.lp-game-row span { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2px; }
.lp-unofficial { margin-top: 22px; color: var(--dim); font-size: .85rem; }
.lp-unofficial a { color: var(--cyan); text-decoration: underline; }
@media (min-width: 560px) { .lp-games { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-games { grid-template-columns: repeat(4, 1fr); } }

/* For game stores */
.lp-list { display: grid; gap: 14px; padding-left: 0; list-style: none; counter-reset: lp; color: var(--section-light-ink-dim); }
.lp-list li { counter-increment: lp; position: relative; padding-left: 40px; }
.lp-list li::before { content: counter(lp); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px;
  height: 28px; border-radius: 50%; font-family: var(--mono); font-weight: 700; color: var(--card-paper); background: var(--section-light-accent); }
.lp-list b { color: var(--section-light-ink); }
.lp-plans { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.lp-plan { padding: 20px 22px; background: var(--card-paper); border: 1px solid var(--section-light-rule); border-radius: 14px;
  box-shadow: 0 6px 18px var(--section-light-rule); color: var(--section-light-ink-dim); }
.lp-plan b { color: var(--section-light-ink); }
.lp-plan-pro { border: 2px solid var(--section-light-accent); }
.lp-trial-note { margin: 14px 0 18px; color: var(--section-light-ink-dim); font-size: .9rem; }
.lp-cta-left { justify-content: flex-start; }
@media (min-width: 761px) { .lp-plans { grid-template-columns: 1fr 1fr; } }

/* Final CTA */
.lp-start-store { margin-top: 18px; color: var(--section-light-ink-dim); }

/* Phones: nothing may force the page wider than the viewport */
@media (max-width: 460px) {
  .lp-cta-left .btn, .lp-door-cta .btn, .lp-copy .btn { width: 100%; justify-content: center; text-align: center; }
  .lp-door { padding: 20px 16px; }
  .lp-rating { padding: 7px 10px; left: 0; }
  .lp-rating-k { font-size: .5rem; }
}