/* =====================================================================
   pages.css — the pages the build writes from the facts and the news (Tools/monologic-site/seo/build_seo.py):
   the landing's platforms (on the first screen), a news story, Platforms & price, How to play, Press kit, 404.
   The same tokens and parts as the rest of the site (style.css): page-hero, legal, btn, eyebrow.
   ===================================================================== */

/* ---------- a news card is a link on the site's own addresses ---------- */
a.hnews-card{color:inherit;text-decoration:none}

/* ---------- the landing's platforms: on the first screen, right under the play buttons (Damian, 2026-09-29: seen
   without scrolling). Written by seo/build_seo.py from facts.json; each links to its store, PS VR2 to /platforms/ ---------- */
.hx-plat{display:flex;flex-wrap:wrap;gap:8px;max-width:100%;margin:clamp(16px,2.4vh,28px) 0 0;padding:0;list-style:none}
.hx-brand>.hx-plat{animation-delay:.34s}
.hx-plat li{display:flex;min-width:0}
.hxp{position:relative;display:inline-flex;align-items:center;gap:9px;min-width:0;min-height:44px;padding:8px 14px;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(7,8,12,.64);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;text-decoration:none;transition:border-color .2s,background-color .2s,transform .2s}
.hxp:hover{border-color:rgba(255,255,255,.56);background:rgba(7,8,12,.82);transform:translateY(-2px)}
.hxp:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hxp-dot{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42)}
.hxp.is-now .hxp-dot{background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18)}
.hxp.is-soon .hxp-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(233,185,73,.16)}
.hxp-name{font-family:var(--f-head);font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.hxp-dev{font-size:13px;color:rgba(255,255,255,.66);white-space:nowrap}
.hxp-state{font-size:13px;font-weight:700;white-space:nowrap}
.hxp.is-soon .hxp-state{color:var(--gold)}
.hxp.is-planned .hxp-state{color:rgba(255,255,255,.78)}
.hxp-cta{padding:4px 8px;border-radius:5px;background:var(--gold);color:#1a1200;font-family:var(--f-head);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s}
.hxp:hover .hxp-cta{background:var(--gold-hi)}
/* a tablet upright: the three in one row, the Steam devices wait for /platforms/ */
@media(max-width:1023px) and (min-width:761px){.hxp{gap:7px;padding-inline:10px}.hxp-dev{display:none}}
/* a phone upright: three equal cards in one row - the name, the state, the wishlist call under it; the state's colour
   is a line along the card's top, so the name keeps the whole width */
@media(max-width:760px){
  .hx-plat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:14px}
  .hxp{flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:0;padding:9px 10px 10px;border-radius:7px}
  .hxp.is-now{box-shadow:inset 0 2px 0 #3ddc84}
  .hxp.is-soon{box-shadow:inset 0 2px 0 var(--gold)}
  .hxp.is-planned{box-shadow:inset 0 2px 0 rgba(255,255,255,.34)}
  .hxp-dot{display:none}
  .hxp-name{max-width:100%;font-size:13px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis}
  .hxp-dev{display:none}
  .hxp-state{max-width:100%;font-size:12px;overflow:hidden;text-overflow:ellipsis}
  .hxp-cta{margin-top:5px;padding:3px 7px;font-size:10.5px}
}
/* a short phone upright (the bottom bar takes its share): two lines a card, the whole Steam card still leads to Steam */
@media(max-width:760px) and (max-height:820px){
  .hx-plat{margin-top:10px}
  .hxp-cta{display:none}
}
@media(max-width:340px){
  .hxp{padding-inline:8px}
  .hxp-name{font-size:12.5px}
  .hxp-state{font-size:11px}
}
/* a phone on its side and any low window: one slim row, the devices wait for /platforms/ */
@media(orientation:landscape) and (max-height:500px) and (min-width:480px){
  .hx-plat{display:flex;gap:6px;width:max-content;max-width:calc(100vw - 2 * clamp(18px,4vw,48px));margin-top:10px}
  .hxp{flex:none;flex-direction:row;align-items:center;gap:7px;min-height:36px;padding:5px 10px}
  .hxp.is-now,.hxp.is-soon,.hxp.is-planned{box-shadow:none}
  .hxp-dot{display:block;width:7px;height:7px}
  .hxp-name{font-size:13px}
  .hxp-dev{display:none}
  .hxp-cta{margin-top:0}
}

/* ---------- Platforms & price ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.pf-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:clamp(22px,2.6vw,32px);border:1px solid var(--bd-2);border-radius:14px;
  background:linear-gradient(160deg,var(--card,#14151b),var(--deep,#0b0c10))}
.pf-card.is-now{border-color:rgba(61,220,132,.45)}
.pf-card.is-soon{border-color:var(--bd-gold)}
.pf-state{align-self:flex-start;font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.08)}
.pf-card.is-now .pf-state{background:rgba(61,220,132,.16);color:#7af0b0}
.pf-card.is-soon .pf-state{background:rgba(233,185,73,.16);color:var(--gold)}
.pf-card h2{margin:6px 0 0;font-family:var(--f-head);font-size:clamp(26px,3vw,36px);text-transform:uppercase;line-height:1}
.pf-dev{color:var(--tx-hi);font-weight:600}
.pf-note{color:var(--tx-mid);margin-bottom:10px}
.pf-card .btn{margin-top:auto;align-self:flex-start}
.pf-stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.pf-card .pf-stores .btn{margin-top:0}
.pf-qa .legal h3{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.03em;font-size:18px;color:var(--tx-hi);margin:22px 0 6px}
@media (max-width:900px){.pf-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- How to play ---------- */
.gd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);max-width:78ch}
.gd-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:start;padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--bd-2);border-radius:14px;background:rgba(255,255,255,.025)}
.gd-n{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:22px}
.gd-step h2{margin:2px 0 6px;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(19px,2.2vw,24px)}
.gd-step p{margin:0;color:var(--tx-mid);line-height:1.65}
.gd-more,.art-cta,.nf-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,34px)}

/* ---------- Press kit ---------- */
.pr-facts{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px}
.pr-facts th,.pr-facts td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--bd)}
.pr-facts th{width:34%;color:var(--tx-hi);font-weight:600}
.pr-feats{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pr-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.pr-shots a{border:0!important;display:block;border-radius:8px;overflow:hidden}
.pr-shots img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:560px){.pr-facts th,.pr-facts td{display:block;width:auto;padding:6px 0}.pr-facts th{padding-top:14px;border-bottom:0}}

/* ---------- a news story ---------- */
.art-back{display:inline-block;margin-bottom:18px;color:var(--tx-mid);text-decoration:none;font-weight:600}
.art-back:hover{color:var(--tx-hi)}
.art-meta{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--tx-mid);font-size:14px}
.art-fig{margin:0 0 clamp(22px,3vw,34px);border-radius:14px;overflow:hidden;border:1px solid var(--bd-2);max-width:960px}
.art-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.art-body h3{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(18px,2.2vw,22px);color:var(--tx-hi);margin:24px 0 8px}
.art-body ul{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.art-more{margin-top:clamp(34px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.art-more h2{grid-column:1/-1;margin:0 0 4px;font-family:var(--f-head);text-transform:uppercase;font-size:20px;letter-spacing:.04em}
.art-more-item{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:1px solid var(--bd-2);border-radius:12px;color:var(--tx-hi);text-decoration:none}
.art-more-item:hover{border-color:rgba(255,255,255,.34)}
.art-more-item b{font-size:16px;line-height:1.3}
.art-more-item small{color:var(--tx-low)}
.art-more-item .hnews-cat{align-self:flex-start}
@media (max-width:760px){.art-more{grid-template-columns:minmax(0,1fr)}}

/* ---------- the site's account on the page (shared-nav/site-account.css draws the parts) ---------- */
.bua-corner{--bua-maxw:var(--maxw);--bua-gutter:var(--pad-x);border-bottom:1px solid var(--bd)}
.ms-account{margin-bottom:28px}
.ms-account[hidden]{display:none}
.ms-account-more{display:grid;gap:24px;margin-top:28px}
.ms-account-more #bua-following,.ms-account-more #bua-ko{scroll-margin-top:calc(var(--tb-h,72px) + 16px)}
/* ---------- a member's homepage (fan or fighter: html.bua-member, set by shared-nav/site-account.js before the page
   draws): their own hero instead of the game's promise, then what they use - the three ways to watch, the tournaments,
   KO of the Month, films, news, Discord. The pages for newcomers (the game, the showcases, the competitive world, the
   closing call) stay for guests and search engines. */
html.bua-member #hero .hx-brand{display:none}
html.bua-member #view-home.active{display:flex;flex-direction:column}
html.bua-member #view-home>:not(#hero):not(.site-cycle):not(#your-corner):not(#watch-films):not(#latest):not(#community){display:none!important}
html.bua-member #view-home>#hero{order:1}
html.bua-member #view-home>.site-cycle{order:2}
html.bua-member #view-home>#your-corner{order:3}
html.bua-member #view-home>#watch-films{order:4}
html.bua-member #view-home>#latest{order:5}
html.bua-member #view-home>#community{order:6}
#hero .hx-top>.bua-hero{align-self:center}
@media(max-width:760px){
  html.bua-member #hero .hx-top{padding-top:calc(var(--hx-media-h,0px) + 12px)}
}