/* Puttcroft landing — layout around the game (first screen) + the short page below it. Tabletop toy (BRIEF §6, §14).
   Loaded after /game/game.css; only overrides .play's outer box (height/padding/position), never the game's insides. */

body.lp { background: var(--table) var(--plank); }
.lp .topbar { --wrap-top: 1320px; }

/* ---------- first screen (phone first) ---------- */
.lp { --tag-h: 46px; }
.lp-tag {
  margin: 0; padding: 0 var(--gutter); height: var(--tag-h); overflow: hidden;
  font: 600 15.5px/1.3 var(--font-display); letter-spacing: .005em; color: var(--ink);
}
.lp-tag span { display: block; color: var(--felt-ink); }
.lp .play {
  position: relative; top: auto;
  height: calc(100vh - var(--topbar-h) - var(--tag-h));
  height: calc(100svh - var(--topbar-h) - var(--tag-h) - env(safe-area-inset-top));
  min-height: 430px; padding: 0 8px max(8px, env(safe-area-inset-bottom));
}
.lp .topcard .wordmark { display: none; }          /* brand lives in the top bar */
.lp .strip-icons { display: none; }                 /* nav lives in the top bar */
.lp .strip { padding: 4px 6px; }
.lp .ca-slot { flex: 1; }

.lp-hero { padding: 18px var(--gutter) 0; display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.lp-rules { margin: 0; font: 400 16px/1.5 var(--font-body); color: var(--ink); }

/* today's market */
.mkt { padding: 16px 16px 14px; }
.mkt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mkt-head h2 { margin: 0; color: var(--felt-ink); }
.mkt-date { font: 700 12.5px/1 var(--font-body); color: var(--ink-2); }
.mkt-holes { list-style: none; margin: 0; padding: 0; }
.mkt-holes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 56px auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mkt-holes li:last-child { border-bottom: 0; }
.mkt-holes li.empty { display: block; color: var(--ink-2); font-size: 15px; }
.mkt-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--felt); color: #fff; font: 600 15px/1 var(--font-display); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.mkt-name { min-width: 0; font: 600 17px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-name small { display: block; margin-top: 3px; font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mkt-skel .mkt-n { background: var(--cream); color: var(--ink-2); box-shadow: none; text-shadow: none; }
.mkt-skel .mkt-name { font: 400 15px/1.2 var(--font-body); color: var(--ink-2); }
.spark { width: 56px; height: 22px; overflow: visible; }
.spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark.up path { stroke: var(--felt-3); }
.spark.dn path { stroke: var(--ink-2); stroke-dasharray: 0; opacity: .7; }
.mkt-par { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 600 12px/1 var(--font-display); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.mkt-par b { font-size: 18px; color: var(--ink); margin-left: 2px; }
.mkt-par i { display: inline-flex; align-items: center; gap: 2px; font: 400 12px/1 var(--font-mono); color: var(--felt-ink); font-style: normal; }
.mkt-par i svg { width: 16px; height: 16px; }
.mkt-ai { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 9px 12px; border-radius: 12px; background: var(--felt-wash); font: 600 14px/1 var(--font-display); color: var(--felt-ink); }
.mkt-ai svg { width: 26px; height: 26px; flex: none; margin: -4px 0; }
.mkt-ai b { margin-left: auto; font-size: 22px; color: var(--ink); }
.mkt-ai small { font: 400 13px/1 var(--font-mono); color: var(--felt-ink); }
.mkt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--line); font: 600 13px/1.2 var(--font-display); color: var(--ink-2); letter-spacing: .02em; }
.mkt-foot b { color: var(--ink); font-size: 15px; }
.mkt-reset b { font: 400 13.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- below the first screen ---------- */
.lp-more { max-width: 720px; margin: 0 auto; padding: 16px var(--gutter) 8px; display: grid; gap: 16px; }
.lp-more h2, .sec-head h2 { margin: 6px 0 10px; font: 600 25px/1.12 var(--font-display); letter-spacing: .005em; }
.lp-more p { margin: 0 0 12px; }
.lp-more .card { padding: 20px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.sec-head h2 { margin: 0 0 10px; }
.sec-head a { font: 600 14.5px/1.2 var(--font-display); text-decoration: none; white-space: nowrap; }
.sec-head a:hover { text-decoration: underline; text-decoration-color: var(--flag); }

/* live numbers */
.nums { display: grid; gap: 8px; }
.nums-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.num { background: var(--card); border-radius: var(--radius); box-shadow: 0 2px 0 var(--table-2); padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 4px; }
.num b { font: 600 30px/1 var(--font-display); color: var(--ink); }
.num b small { font-size: 16px; color: var(--felt-ink); }
.num span { font: 700 13px/1.2 var(--font-body); color: var(--ink-2); }
.nums-label { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.nums-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--felt-3); box-shadow: 0 0 0 0 rgba(79,163,90,.5); animation: live 2s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(79,163,90,0); } 100% { box-shadow: 0 0 0 0 rgba(79,163,90,0); } }

/* AI caddie */
.ai { display: grid; gap: 18px; overflow: hidden; }
.ai-illo {
  position: relative; display: grid; place-items: end center; aspect-ratio: 16 / 9; padding: 10px 0 8px;
  border-radius: 18px; border: 9px solid var(--rail);
  background:
    radial-gradient(circle at 78% 38%, #2B2420 0 9px, var(--felt-3) 9.5px 12px, transparent 12.5px),
    repeating-linear-gradient(-28deg, rgba(111,190,108,.38) 0 26px, rgba(111,190,108,0) 26px 52px),
    var(--felt);
  box-shadow: inset 0 3px 0 var(--rail-hi), inset 0 -4px 0 var(--rail-2), inset 0 8px 14px rgba(0,0,0,.08), 0 6px 14px rgba(60,40,20,.14);
}
.ai-illo svg { width: min(150px, 46%); height: auto; filter: drop-shadow(0 4px 0 rgba(60,40,20,.12)); }
.ai-flag { transform-origin: 82px 15px; animation: wave 1.2s steps(2, jump-none) infinite; }
@keyframes wave { 50% { transform: scaleX(.82) skewY(5deg); } }
.ai-body { min-width: 0; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 4px 0 14px; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 11px; border-radius: 14px; background: var(--cream); text-align: center; min-width: 0; }
.vs-side b { font: 600 38px/1 var(--font-display); color: var(--ink); }
.vs-side small { font: 400 12.5px/1.2 var(--font-mono); color: var(--ink-2); }
.vs-ai { background: var(--felt-wash); }
.vs-ai small { color: var(--felt-ink); }
.vs-you.win { background: var(--felt); }
.vs-you.win b, .vs-you.win small, .vs-you.win .label { color: #fff; }
.vs-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 0 var(--table-2); font: 600 13px/1 var(--font-display); color: var(--ink-2); }
.ai-fine { font-size: 14px; color: var(--ink-2); }

/* board */
.mini-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini-board li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 58px; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px dashed var(--line); font-size: 15px; }
.mini-board li:last-of-type { border-bottom: 0; }
.mini-board .rk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 14px/1 var(--font-display); background: var(--cream); color: var(--ink-2); }
.mini-board .rk-1 { background: var(--felt-3); color: #fff; }
.mini-board .rk-2 { background: var(--rail); color: #fff; }
.mini-board .rk-3 { background: var(--rail-hi); color: var(--ink); }
.mini-board .rk-ai { background: var(--card); box-shadow: 0 0 0 2px var(--felt); }
.mini-board .rk-ai svg { width: 22px; height: 22px; }
.mini-board .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mini-board .nm small { display: block; font: 600 11px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--felt-ink); }
.mini-board .holder { font-style: normal; margin-right: 4px; }
.mini-board .tag { font: 600 10.5px/1 var(--font-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--cream); padding: 3px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.mini-board .st { font: 400 13px/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.mini-board .tt { font: 600 19px/1 var(--font-display); text-align: right; white-space: nowrap; }
.mini-board .tt small { font: 400 12px/1 var(--font-mono); color: var(--ink-2); margin-left: 4px; }
.mini-board .row-ai { background: var(--felt-wash); border-radius: 12px; border-bottom-color: transparent; }
.mini-board .empty { display: block; color: var(--ink-2); border: 0; padding: 12px 6px 4px; }
.board-fine { margin: 10px 0 0 !important; font-size: 12.5px; color: var(--ink-2); }

/* pot */
.pot { display: grid; gap: 18px; }
.pot-copy p#pot-rule { font-size: 16px; }
.pot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 !important; font: 600 14.5px/1.3 var(--font-display); }
.pot-side { display: grid; gap: 12px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; padding: 6px 4px 0; border-bottom: 3px solid var(--table-2); }
.pd { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.pd-pct { font: 600 21px/1 var(--font-display); color: var(--ink); }
.pd-1 .pd-pct { font-size: 25px; }
.pd-block {
  position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--rail-hi), var(--rail) 60%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -5px 0 var(--rail-2);
}
.pd-place { font: 600 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(90,50,10,.35); }
.pd-flag { position: absolute; left: 50%; top: -1px; width: 3px; height: 30px; transform: translateY(-100%); background: var(--rail-2); border-radius: 2px; }
.pd-flag::after { content: ""; position: absolute; left: 3px; top: 0; border-left: 18px solid var(--flag); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.pd-1 .pd-pct { margin-bottom: 32px; }
.pot-live { padding: 14px 16px; border-radius: 14px; background: var(--cream); }
.pot-live .pot-pre { margin: 0; font: 600 17px/1.3 var(--font-display); color: var(--ink); }
.pot-eth { margin: 6px 0 4px; font: 600 18px/1 var(--font-display); color: var(--ink-2); }
.pot-eth b { font-size: 40px; color: var(--ink); }
.pot-how { margin: 0 !important; font-size: 13px; color: var(--ink-2); }
.pot-live.is-stale .pot-eth b { color: var(--ink-2); }

/* how it works */
.how .sec-head h2 { margin-bottom: 12px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; padding: 0 !important; }
.step img { width: 100%; height: 100%; min-height: 128px; object-fit: cover; background: var(--felt); }
.step-t { position: relative; padding: 14px 16px 14px; }
.step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); font: 600 13px/1 var(--font-display); margin-bottom: 6px; }
.step h3 { margin: 0 0 4px; font: 600 18px/1.2 var(--font-display); }
.step p { margin: 0 !important; font-size: 14.5px; line-height: 1.5; color: var(--ink); }

/* wallet */
.wallet h2 { margin-top: 4px; }
.wallet #wallet-slot { margin-top: 4px; }
.wallet .bw-sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* faq */
.faq .sec-head h2 { margin-bottom: 8px; }
.faq details { background: var(--card); border-radius: 14px; box-shadow: 0 2px 0 var(--table-2); margin-bottom: 8px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font: 600 16.5px/1.25 var(--font-display); border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); font: 600 18px/1 var(--font-display); color: var(--ink-2); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 16px 16px; font-size: 15px; color: var(--ink); }

body.lp .foot, body .foot { padding: 34px var(--gutter) calc(36px + env(safe-area-inset-bottom)); max-width: var(--wrap); margin: 0 auto; }

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .lp-tag { font-size: 17px; }
  .lp { --tag-h: 50px; }
  .ai { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .ai-illo { aspect-ratio: auto; height: 100%; min-height: 220px; place-items: end center; }
  .ai-illo svg { width: 150px; }
  .pot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .step img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* ---------- desktop: game left, today's market right ---------- */
@media (min-width: 1024px) {
  :root { --topbar-h: 64px; }
  .lp .topbar { padding-left: 24px; padding-right: 24px; }
  .lp-first {
    display: grid; grid-template-columns: minmax(0, 1fr) 344px; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "play tag" "play hero"; column-gap: 28px;
    max-width: 1320px; margin: 0 auto; padding: 0 24px 22px;
    height: calc(100vh - var(--topbar-h)); height: calc(100svh - var(--topbar-h)); min-height: 620px;
  }
  .lp .play { grid-area: play; height: auto; min-height: 0; padding: 0; }
  .lp-tag { grid-area: tag; height: auto; padding: 6px 0 14px; font-size: 31px; line-height: 1.12; letter-spacing: -.005em; }
  .lp-tag span { margin-top: 6px; }
  .lp-hero { grid-area: hero; padding: 0; max-width: none; margin: 0; align-content: start; overflow: auto; }
  .lp-rules { display: none; }            /* the game shows the same rules on the felt */
  .mkt-holes li { padding: 8px 0; }
  .lp-more { max-width: var(--wrap); padding: 34px 24px 8px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
  .lp-more .card { padding: 28px; }
  .lp-more h2, .sec-head h2 { font-size: 30px; }
  .nums { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .nums-label { grid-column: 2; grid-row: 1; }
  .ai { grid-column: 1 / span 7; grid-template-columns: 220px minmax(0, 1fr); }
  .ai-illo { height: auto; min-height: 0; aspect-ratio: 4 / 5; align-self: start; }
  .board { grid-column: 8 / -1; }
  .pot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
  .pot-copy p#pot-rule { font-size: 17px; max-width: 56ch; }
  .how { grid-column: 1 / -1; }
  .steps { gap: 20px; }
  .step-t { padding: 18px 20px 20px; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 15px; }
  .wallet { grid-column: 1 / span 5; align-self: start; }
  .faq { grid-column: 6 / -1; }
  .lp .foot { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1280px) {
  .lp-first { grid-template-columns: minmax(0, 1fr) 372px; column-gap: 36px; }
  .lp-tag { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .nums-label i, .ai-flag { animation: none; }
  .faq summary::after { transition: none; }
}

/* token card (hero) */
.launch { padding: 16px; }
.launch h2 { margin: 0 0 8px; }
.launch-k { margin: 0; font: 700 13px/1.3 var(--font-body); color: var(--ink-2); }
.launch-when { margin: 2px 0 8px; font: 600 22px/1.15 var(--font-display); }
.launch-cd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 12px; background: var(--cream); }
.launch-cd b { font: 400 26px/1 var(--font-mono); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.launch-cd span { font: 700 12px/1.2 var(--font-body); color: var(--ink-2); }
.launch-cd.is-done b { font: 600 18px/1 var(--font-display); color: var(--felt-ink); }
.launch-pre { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.launch-ca { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--cream); }
.launch-ca .mono { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; }
.launch-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) and (max-height: 860px) {
  .lp-tag { font-size: 25px !important; padding-bottom: 10px; }
  .lp-tag span { margin-top: 2px; }
  .lp-hero { gap: 10px; }
  .mkt { padding: 12px 14px 10px; }
  .mkt-holes li { padding: 5px 0; }
  .mkt-par { flex-direction: row; align-items: baseline; }
  .launch { padding: 12px 14px; }
  .launch-when { font-size: 19px; margin-bottom: 6px; }
  .launch-cd b { font-size: 21px; }
  .launch.is-live { display: none; }      /* the strip under the game already carries CA + Buy */
}