/* Player-first homepage. This layer is deliberately scoped: the existing store
   remains stable while the new system proves itself on the front door. */
/* ONE SHELL WIDTH AND ONE VERTICAL STEP. Every band on this page set its own
   margin, so the rhythm down the page ran 18 · 136 · 88 · 88 · 72 · 120px and
   read as six unrelated boxes rather than one page. `--home-gap` is the step
   between bands and `--home-shell` is the column they all share — the mast,
   the notice bar, the content and the FOOTER, which was the one that missed:
   index.html wears `.store-foot`, whose `--wrap` is 1180px against this
   page's 1280, so the footer's first link sat 38px inboard of everything
   above it. The dead `.home-foot` block that was written for it styled no
   element on any page. */
/* THE CORNER IS THE SITE'S, NOT THIS PAGE'S. store.css has set `--r: 3px`
   and `--r-sm: 2px` for the whole store since it was written, and this shell
   arrived with nine `border-radius:999px` controls and 10–20px panels — so
   the front door spoke a different language from the 53 pages behind it, and
   said so inside a single card: the `LIVE` chip and the `play` button under a
   pill-shaped tab row are store.css's 3px, because they are the store's own.
   Operator picked the square (2026-09-21). Two tokens, so the next change of
   mind is two numbers. */
.home { --home-lime:#b8ff38; --home-cream:#f2f5ed; --home-panel:#141a15; --home-shell:1280px; --home-gap:80px; --home-r:3px; --home-r-card:4px; }
.home .home-wrap { max-width:var(--home-shell); padding:28px 28px var(--home-gap); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.home .grad-bar { background:#111711; border-bottom:1px solid #263026; box-shadow:none; }
.home .grad-in { max-width:var(--home-shell); min-height:42px; padding:5px 28px; }
.home .grad-say b { color:var(--home-lime); }
.home .grad-action { margin-left:auto; color:var(--home-cream); font-weight:700; }
.home .grad-hide { margin-left:6px; }
.home .paper-mast { position:sticky; top:0; z-index:30; background:rgba(10,12,10,.92); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.08); }
.home .paper-mast .mast-in { max-width:var(--home-shell); min-height:72px; padding:0 28px; display:flex; align-items:center; gap:28px; }
/* ONE ROW, SO NO BAND. store.css paints the two-tier mast's nav band with
   `.paper-mast::before` (45px, a shade lighter, pinned to the bottom). This
   shell is a single row, so the band drew a second tone across the lower
   half of it — the header read as two strips with the nav floating across
   the seam. */
.home .paper-mast::before { display:none; }
.home .paper-mast .wordmark { display:flex; align-items:center; gap:10px; color:var(--home-cream); font:700 1.15rem var(--sg); letter-spacing:-.02em; white-space:nowrap; }
/* The bar is brand + nav on the left, tools on the right, and the slack
   between them in exactly one place. It used to be `flex:1` on the nav, which
   put the whole surplus of a 1280px bar between "builders" and the search box
   — a 380px hole on a wide screen with the search, the account and the
   install button crushed together on the far side of it. */
.home .paper-mast .mast-props { display:flex; align-items:center; gap:26px; margin-right:auto; }
.home .paper-mast .mast-props a { color:#bac4b7; font-weight:600; font-size:.9rem; text-transform:capitalize; letter-spacing:0; padding:0 2px; }
.home .paper-mast .mast-props a[aria-current], .home .paper-mast .mast-props a:hover { color:#fff; text-decoration:none; }
/* `account` is the one prop this shell does not draw twice: the account chip
   two boxes right IS that door, and the site spine (test_site.py: tier one is
   identical on every page) keeps the link in the markup for every other
   page's mast and for the 404's. Matched by its href, not its position: the
   spine grew a sixth tab (trade, 2026-09-24) and a position rule would have
   hidden whichever tab slid into the slot. */
.home .paper-mast .mast-props a[href="profile.html"] { display:none; }
.home .paper-mast .mast-search { width:clamp(180px,17vw,280px); }
.home .paper-mast .mast-search input { width:100%; height:40px; border:1px solid #364136; border-radius:var(--home-r); padding:0 16px; background:#141914; color:#fff; }
/* the launcher is the second way in, so it is an outline beside the account
   chip, not the lime fill — the lime belongs to the play button in the hero */
.home .paper-mast .mast-get { order:10; height:auto; min-height:40px; display:inline-flex; align-items:center; padding:0 16px; background:none; box-shadow:none; border:1px solid #3a463a; color:#d6ded3; border-radius:var(--home-r); font-weight:700; letter-spacing:.08em; }
.home .paper-mast .mast-get:hover { border-color:var(--home-lime); color:#fff; filter:none; text-decoration:none; }
.home .paper-mast .mast-acct { order:9; display:flex; align-items:center; gap:9px; min-height:40px; padding:0 6px 0 12px; border:1px solid #2f3a2f; border-radius:var(--home-r); background:#10150f; }
.home .paper-mast .mast-acct:hover { border-color:#4a5749; }
.home .paper-mast .acct-name { color:#d6ded3; font-weight:700; font-size:.84rem; white-space:nowrap; }
.home .paper-mast .acct-face { display:flex; }
.home .paper-mast .acct-tile { display:grid; place-items:center; width:28px; height:28px; border-radius:var(--home-r); background:#232d22; color:#cfe0c6; font:700 .72rem var(--mono); }
/* signed out, the tile is a "·" — an avatar for nobody. The chip is one word
   until there is a wallet behind it (store.js::paintAway / paintHere). */
.home .paper-mast .mast-acct[data-state="away"] { padding-inline:14px; }
.home .paper-mast .mast-acct[data-state="away"] .acct-face { display:none; }
.home .paper-mast .mast-nav, .home .paper-mast .mast-wish, .home .paper-mast .acct-bal { display:none; }
/* The floor follows the column it sits in. */
.home-hero { position:relative; min-height:clamp(460px,38vw,600px); display:flex; align-items:stretch; overflow:hidden; border:1px solid #303b30; border-radius:var(--home-r-card); background:#151b16; box-shadow:0 30px 80px rgba(0,0,0,.35); }
/* THE HERO IS A REAL FRAME OF THE GAME, and it sits beside the copy rather
   than under it (2026-10-12). It was concept art — a green castle Gates does
   not contain — laid under the whole band, and store.css's marquee rules held
   it at .72 opacity under a .9 veil, so whatever filled the slot reached the
   page as a dark smear. A screenshot is only worth showing if it can be seen:
   the art takes the right two thirds at full strength and fades into the
   panel the copy stands on. `.marquee[data-mq-slug]` is in the selectors
   because store.css's rules carry it, and without it they win. */
.home-hero .mq-art { position:absolute; inset:0 0 0 36%; }
.home-hero .mq-art img { width:100%; height:100%; object-fit:cover; }
.home-hero.marquee[data-mq-slug] .mq-art img { opacity:1; }
.home-hero.marquee[data-mq-slug] .mq-veil { position:absolute; inset:0; background:linear-gradient(90deg,#151b16 0%,rgba(21,27,22,.6) 18%,rgba(21,27,22,0) 45%),linear-gradient(0deg,rgba(10,12,10,.45),transparent 40%); }
/* the pitch sits ON the floor of the frame, the way a store's hero does.
   It was top-padded into a stretched box instead, which left 64px above the
   eyebrow and 143px of nothing under the platform line. */
.home-hero .mq-body { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; width:min(760px,66%); padding:56px 64px; }
.home-hero .mq-eyebrow { color:#d9e2d5; font:700 .78rem var(--sg); text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; }
.live-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--home-lime); box-shadow:0 0 14px var(--home-lime); }
/* the one moving thing on the page, and it is the word PLAYABLE NOW's
   evidence rather than decoration. Off under prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference) {
  .live-dot { animation:live-pulse 2.6s ease-in-out infinite; }
  @keyframes live-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(184,255,56,.5),0 0 14px var(--home-lime); }
    55% { box-shadow:0 0 0 7px rgba(184,255,56,0),0 0 14px var(--home-lime); }
  }
}
.home-hero .mq-name { font:700 clamp(2.9rem,5vw,4.9rem)/.95 var(--sg); letter-spacing:-.065em; color:#fff; margin:0 0 24px; text-wrap:balance; }
.home-hero .mq-line { max-width:560px; color:#d0d8ce; font-size:1.15rem; line-height:1.6; margin-bottom:30px; }
.home-hero .mq-acts { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.home-hero .btn { min-height:52px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--home-r); font-weight:800; border:1px solid #536052; }
.home-hero .hero-primary { background:var(--home-lime); color:#0a0c0a; border-color:var(--home-lime); }
.home-hero .ghost { color:#fff; background:rgba(10,12,10,.48); }
/* the price is a label in the note line, not a third button-shaped box */
.home-hero .mq-price { display:inline-block; margin-right:10px; padding:2px 7px; border:1px solid rgba(184,255,56,.45); border-radius:var(--home-r); color:var(--home-lime); font:700 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }
.home-hero .btn:hover { transform:translateY(-1px); text-decoration:none; }
.hero-note { color:#9ca99a; font-size:.86rem; margin-top:18px; }
.hero-note a { color:#d6ded3; text-decoration:underline; text-decoration-color:rgba(214,222,211,.35); text-underline-offset:3px; }
.hero-note a:hover { color:#fff; text-decoration-color:currentColor; }
.trust-strip { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:18px 0 var(--home-gap); padding:20px 24px; border:1px solid #2c362d; border-radius:var(--home-r-card); background:#101510; color:#bfc8bd; }
.trust-strip strong { color:#fff; }
.trust-strip a { white-space:nowrap; font-weight:700; color:var(--home-lime); }
.home .row { margin:0 0 var(--home-gap); }
.discover-head { align-items:end; margin-bottom:28px; }
.section-kicker, .path-tag { color:var(--home-lime); font:700 .74rem var(--sg); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.home h2 { color:#fff; font:700 clamp(2rem,3.2vw,3.25rem)/1 var(--sg); letter-spacing:-.045em; }
.home .row-act, .text-link { color:#eaf0e7; font-weight:700; }
.home .tabbar { display:flex; gap:8px; border:0; margin-bottom:22px; overflow:auto; }
.home .tab { min-height:44px; flex:none; padding:0 17px; border:1px solid #344035; border-radius:var(--home-r); background:#121712; color:#b8c2b5; text-transform:none; letter-spacing:0; }
.home .tab.on { background:var(--home-cream); border-color:var(--home-cream); color:#111; }
/* The catalog is the store's own card shelf now, not a row list beside a
   hover preview inside a bordered panel: with one listed game that panel drew
   a 68px row, a 540px preview and ~470px of empty box under it. `.shelf.few`
   (store.css) lies a short shelf down into full-width strips. */
.home #tab-rows { margin-top:2px; }
.home .shelf.few { gap:14px; }
.home .shelf.few .card { border-radius:var(--home-r-card); }
.home .shelf.few .capsule { flex-basis:38%; max-width:420px; }
.home .shelf > .row-empty { color:#9aa798; }
/* a dark panel like every other band on the page — the cream slab was the
   one surface on the site that broke the night palette */
.benefits { margin:0 0 var(--home-gap); padding:64px; border:1px solid #2c362d; border-radius:var(--home-r-card); background:linear-gradient(160deg,#141a15 0%,#0f130f 100%); color:#d6ded3; }
.benefits h2, .benefits h3 { color:#fff; }
.benefits-head { max-width:680px; margin-bottom:42px; }
.benefits-head>p:last-child { margin-top:18px; color:#aeb9ab; font-size:1.08rem; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:34px; }
.benefit-grid article { padding-top:22px; border-top:1px solid #2f3a2f; }
.benefit-num { color:var(--home-lime); font:600 .74rem var(--mono); }
.benefit-grid h3 { font:700 1.25rem var(--sg); margin:18px 0 10px; }
.benefit-grid p { color:#aeb9ab; line-height:1.6; }
.benefits .text-link { color:var(--home-lime); }
.path-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:var(--home-gap); }
/* THE TWO DOORS CARRY THE ART THAT WAS ALREADY CUT FOR THEM. `featured-
   community.jpg` and `featured-builders.jpg` are authored for exactly these
   destinations — they are the art on the two house slides in
   store.js::HOUSE_SLIDES — and index.html's carousel has been `hidden` since
   the front page was recut, so both files shipped and rendered nowhere while
   the cards that point at the same two pages were flat gradient boxes. The
   scrim is what keeps the copy legible over them, and it is the reason the
   art may be this loud. */
.path-card { position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:42px; border:1px solid #303a30; border-radius:var(--home-r-card); color:#fff; background:linear-gradient(140deg,#192219,#101410); }
.path-card::before { content:""; position:absolute; inset:0; background-size:cover; background-position:center 32%; opacity:.66; transition:transform .45s ease,opacity .25s ease; }
.path-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,9,7,.96) 8%,rgba(7,9,7,.78) 30%,rgba(7,9,7,.34) 62%,rgba(7,9,7,.06) 100%); }
.path-card > * { position:relative; z-index:2; }
.community-path::before { background-image:url(../art/store/featured-community.jpg); }
.builder-path::before { background-image:url(../art/store/featured-builders.jpg); }
.path-card:hover { border-color:#71816e; text-decoration:none; transform:translateY(-2px); }
.path-card:hover::before { transform:scale(1.045); opacity:.8; }
.path-card h2 { margin-bottom:14px; }
.path-card p { max-width:440px; color:#b5c0b2; margin-bottom:28px; }
.path-go { color:var(--home-lime); font-weight:800; }
.builder-path { background:#111611; }
/* index.html and search.html wear `.store-foot` like every other page, so the
   footer only had to be brought onto this shell's column and step — the
   `.home-foot` block that used to sit here styled no element on any page. */
.home .store-foot { margin-top:0; }
.home .store-foot .foot-in { max-width:var(--home-shell); padding:40px 28px 44px; }

/* Browse is the second step of the player journey, so it shares the homepage
   shell while keeping the catalog renderer and URL-backed filters intact. */
.browse-page .home-wrap { padding-top:64px; }
.browse-head { max-width:820px; margin:0 0 44px; }
.browse-head h1 { color:#fff; font:700 clamp(3rem,6vw,5.4rem)/.95 var(--sg); letter-spacing:-.06em; text-transform:none; }
.browse-head .lede { max-width:620px; margin-top:18px; color:#aeb9ab; font-size:1.12rem; }
.browse-search { display:flex; gap:10px; margin-top:30px; }
.browse-search input { flex:1; min-width:0; height:56px; padding:0 20px; border:1px solid #3a473a; border-radius:var(--home-r); background:#141a15; color:#fff; font:1rem var(--body); }
.browse-search input:focus { border-color:var(--home-lime); outline:2px solid rgba(184,255,56,.15); }
.browse-search button { min-width:116px; border:0; border-radius:var(--home-r); background:var(--home-lime); color:#0a0c0a; font:800 .95rem var(--sg); cursor:pointer; }
.browse-page #browse-root { margin-bottom:88px; }
.browse-page .mkt-grid { grid-template-columns:250px minmax(0,1fr); gap:28px; }
.browse-page .filter-rail { position:sticky; top:96px; gap:22px; padding:22px; border-color:#303b30; border-radius:var(--home-r-card); background:#111611; box-shadow:none; }
.browse-page .f-label { margin-bottom:8px; color:#9ba897; font-size:.7rem; }
.browse-page .filter-rail select, .browse-page .sortbar select { min-height:46px; border-color:#344034; border-radius:var(--home-r); box-shadow:none; }
.browse-page .f-check { min-height:44px; display:flex; align-items:center; gap:10px; color:#d6ded3; }
.browse-page .f-check input { width:18px; min-height:18px; accent-color:var(--home-lime); }
.browse-page .f-tags { display:flex; flex-wrap:wrap; gap:7px; }
.browse-page .f-tag { padding:7px 10px; border:1px solid #344034; border-radius:var(--home-r); color:#b6c0b3; font-size:.78rem; }
.browse-page .f-tag:hover, .browse-page .f-tag.on { border-color:var(--home-lime); color:#fff; text-decoration:none; }
.browse-page .sortbar { min-height:58px; margin-bottom:14px; padding:0 0 14px; }
.browse-page .result-count { font:700 1rem var(--sg); }
.browse-page .rrows { display:flex; flex-direction:column; gap:12px; }
.browse-page .rrow { min-height:150px; border:1px solid #2e382e; border-radius:var(--home-r-card); overflow:hidden; background:#131813; transition:border-color .15s ease,transform .15s ease; }
.browse-page .rrow:hover { border-color:#596958; transform:translateY(-1px); }
.browse-page .rrow-cap { width:260px; }
.browse-page .rrow-cap img { width:100%; height:100%; object-fit:cover; }
.browse-page .rrow-body { padding:22px; }
.browse-page .rrow-name { color:#fff; font:700 1.35rem var(--sg); }
.browse-page .rrow-kind { margin-top:4px; color:#9daa99; }
.browse-page .rrow-tags { margin-top:17px; }
.browse-page .rrow-act { min-width:142px; padding:20px; align-items:stretch; justify-content:center; }
.browse-page .browse-open { background:var(--home-lime); color:#0a0c0a; border-radius:var(--home-r); }
.browse-page .wish { border-radius:var(--home-r); }
@media (min-width:1600px) { .home { --home-shell:1400px; --home-gap:88px; } }
@media (max-width:900px) {
  .home .paper-mast .mast-search { display:none; }
  .home .paper-mast .mast-props { gap:16px; }
  .home .paper-mast .mast-props a[href="community.html"], .home .paper-mast .mast-props a[href="builders.html"] { display:none; }
  .home-hero { min-height:560px; }
  .home-hero .mq-body { width:78%; padding:42px; }
  /* too narrow to stand the copy beside the frame: the frame goes back under
     it, and the veil carries the text side */
  .home-hero .mq-art { inset:0; }
  .home-hero.marquee[data-mq-slug] .mq-veil { background:linear-gradient(90deg,rgba(10,12,10,.94) 0%,rgba(10,12,10,.8) 42%,rgba(10,12,10,.2) 85%),linear-gradient(0deg,rgba(10,12,10,.6),transparent 50%); }
  .benefits { padding:42px; }
  .browse-page .mkt-grid { grid-template-columns:1fr; }
  .browse-page .filter-rail { position:static; display:grid; grid-template-columns:1fr 1fr; }
  .browse-page .filter-rail .f-group:last-child { grid-column:1/-1; }
}
@media (max-width:640px) {
  .home { --home-gap:56px; }
  .home .home-wrap { padding:16px 16px var(--home-gap); }
  /* THE NOTICE WRAPS RATHER THAN TRUNCATES. It was one nowrap line with an
     ellipsis, which on a 390px phone hid 380 of its 738px — a reader got
     "the mint is open — the snapshot door is free, three per wall…" and the
     door it points at was in the half that was cut. deploy/capture_site.js
     measures both halves of this: `clippedContainers` and `smallestBodyPx`,
     and the sentence was under the 13px prose floor as well. */
  .home .grad-in { min-height:44px; padding:8px 16px; align-items:flex-start; flex-wrap:nowrap; }
  .home .grad-say { font-size:.82rem; line-height:1.4; flex:1; min-width:0; }
  .home .grad-say b { font-size:.82rem; }
  /* the count is nowrap and the markup glues it to "wallet." with no space,
     so on a phone the pair is one 200px token: it took a line of its own and
     left "three per" alone on the line above it. Breaking inside the phrase
     is fine — the figures themselves hold no spaces to break at. */
  .home .grad-left { white-space:normal; }
  .home .grad-hide { flex:0 0 auto; min-width:44px; min-height:44px; margin:-8px 0 -8px 4px; }
  .home .paper-mast .mast-in { min-height:64px; padding:0 16px; gap:12px; }
  .home .paper-mast .wordmark { font-size:0; flex:1; }
  .home .paper-mast .mast-props { display:none; }
  .home .paper-mast .mast-acct { display:block; }
  .home .paper-mast .acct-lines { display:none; }
  .home .paper-mast .mast-get { padding:0 15px; min-height:44px; font-size:.84rem; }
  .home-hero { min-height:610px; border-radius:var(--home-r-card); align-items:flex-end; }
  .home-hero .mq-art img { object-position:58% center; }
  .home-hero.marquee[data-mq-slug] .mq-veil { background:linear-gradient(0deg,rgba(7,9,7,.99) 8%,rgba(7,9,7,.74) 55%,rgba(7,9,7,.38)); }
  .home-hero .mq-body { width:100%; padding:30px 24px; }
  .home-hero .mq-name { font-size:3.2rem; }
  .home-hero .mq-line { font-size:1rem; line-height:1.5; }
  .home-hero .mq-acts { align-items:stretch; flex-direction:column; }
  .home-hero .btn { width:100%; }
  .hero-note a { display:inline-flex; align-items:center; min-height:44px; }
  .trust-strip { align-items:flex-start; flex-direction:column; }
  .discover-head { align-items:flex-start; gap:18px; }
  /* a link a thumb has to hit is 44px tall, however short its text is */
  .home .row-act, .trust-strip a, .text-link { display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; }
  .benefits { margin-inline:-1px; padding:34px 24px; }
  .benefit-grid, .path-grid { grid-template-columns:1fr; }
  .benefit-grid { gap:30px; }
  .path-card { min-height:280px; padding:30px 26px; }
  .home .store-foot .foot-in { padding:32px 16px 36px; }
  .browse-page .home-wrap { padding-top:40px; }
  .browse-head { margin-bottom:34px; }
  .browse-head h1 { font-size:3rem; }
  .browse-search { flex-direction:column; }
  .browse-search button { min-height:50px; }
  .browse-page .filter-rail { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; padding:18px; }
  .browse-page .filter-rail .f-group:last-child { grid-column:1/-1; min-width:0; }
  .browse-page .f-check { font-size:.82rem; }
  .browse-page .f-tags { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
  .browse-page .f-tag { flex:none; }
  .browse-page .rrow { display:grid; grid-template-columns:112px minmax(0,1fr); }
  .browse-page .rrow-cap { width:112px; min-height:116px; }
  .browse-page .rrow-body { padding:16px; }
  .browse-page .rrow-name { font-size:1.1rem; }
  .browse-page .rrow-tags { display:none; }
  .browse-page .rrow-act { grid-column:1/-1; min-width:0; padding:12px 14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .browse-page .rrow-act .card-price, .browse-page .rrow-act .chip { grid-column:1/-1; justify-self:start; }
}