/* hallmark: custom · site's original blue theme kept (owner, 28 Oct) · tiers Primary/Secondary · nothing moves on scroll · overruled: 7a pure white and 48 literals (original theme, owner's call), 62 hero video hidden at rest (hero rule), 19 dash in banner (owner's wording) */
/* ==========================================================================
   v78: the price tiers, sale banner and layout fixes, in the site's own
   colours. Loaded after every other stylesheet. Design system:
   10k-websites-skill/design-system/MASTER.md
   ========================================================================== */
:root{
  /* the site's own colours (site.css) stay as they are; these only tint the
     new pieces in its blue accent, rgba of --accent #6f9bff */
  --acc-a02:rgba(111,155,255,.02);
  --acc-a04:rgba(111,155,255,.04);
  --acc-a09:rgba(111,155,255,.09);
  --acc-a12:rgba(111,155,255,.12);
  --acc-a18:rgba(111,155,255,.18);
  --acc-a45:rgba(111,155,255,.45);
  --tier-bg:rgba(255,255,255,.025);
  --on-accent:#050a1c;
}
[hidden]{display:none !important}

/* ---------- scroll: nothing moves, fades or shrinks ----------
   Owner, 28 Oct: covers, titles, prices and buttons stay perfectly still while
   the page scrolls. The old reveals faded and slid sections in; now every
   section is simply there. */
.js .reveal,.reveal,.reveal.in,.reveal.done{opacity:1 !important;transform:none !important}
@keyframes page-in{from{opacity:1}to{opacity:1}}
@keyframes card-rise{from{transform:none}to{transform:none}}
@keyframes copy-rise{from{transform:none}to{transform:none}}
@keyframes num-in{from{transform:none}to{transform:none}}
@keyframes price-in{from{transform:none}to{transform:none}}
@keyframes badge-pop{from{transform:none}to{transform:none}}
/* the hero's two buttons used to fade in with the film; they stay solid now */
.settle .row{opacity:1 !important}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---------- labels: sentence case, untracked, the body face ---------- */
.cue,.cur-lab,.eyebrow,.find-count,.find-sort-lab,.foot-legal,.game-meta,.game-steam,.game-tag,.gp-ed,
.gp-facts dt,.gp-h,.gp-store,.store-note,.hold-status,.is-store .store-ask,.kicker,.legal-end p,.legal-meta,
.legal-note .t,.legal-switch a,.legal-toc .toc-t,.plat-n,.rv-sample,.tag,label{
  text-transform:none;letter-spacing:normal;font-family:var(--body)}

/* ---------- prices and focus ---------- */
.game-price .now,.game-price .was{font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}

/* ---------- one site-wide sale banner (no per-game % badges) ----------
   Sits in the page flow under the hero, so it never covers the film. */
.game-off,#gp-off,#gp-save{display:none !important}
.sale-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;
  max-width:var(--maxw);margin:28px auto 0;padding:12px 24px;border:1px solid var(--acc-a45);border-radius:16px;
  background:linear-gradient(180deg,var(--acc-a12),var(--acc-a04)),var(--panel);text-align:center}
.sale-bar p{margin:0;color:var(--text-primary);font-weight:600;font-size:1rem;line-height:1.45}
.sale-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 4px var(--acc-a18)}
.sale-bar-page{margin-top:104px}
.sale-bar-page + .gp{padding-top:clamp(28px,4vw,48px)}
@media (max-width:1300px){.sale-bar{margin-left:var(--pad);margin-right:var(--pad)}}
@media (max-width:640px){.sale-bar{padding:12px 16px}.sale-bar p{font-size:.92rem}}

/* ---------- the tiers: compact, price biggest, Primary highlighted ---------- */
.tiers{display:grid;gap:4px;padding:0 12px 12px}
.tier{border:1px solid var(--line);border-radius:12px;padding:8px 12px 12px;background:var(--tier-bg)}
.tier-primary{border-color:var(--acc-a45);background:linear-gradient(180deg,var(--acc-a09),var(--acc-a02))}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.tier-name{font-family:var(--body);font-weight:700;font-size:.88rem;color:var(--text-primary)}
.tier .game-price{margin:0;gap:8px;font-family:var(--body);animation:none}
.tier .game-price .now{font-size:1.38rem;font-weight:800;letter-spacing:-.01em;color:var(--pay-green)}
.tier .game-price .was{font-size:.8rem;font-weight:500}
.tier-ask{font-size:.86rem;font-weight:700;color:var(--text-primary)}
.tier-line{margin:4px 0 8px;font-size:.78rem;line-height:1.35;color:var(--text-secondary)}
.tier-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 12px;border-radius:8px;
  background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.84rem;text-decoration:none;
  transition:background-color .2s ease}
.tier-cta:hover{background:var(--accent-hover)}
.tier-cta span{white-space:nowrap}
.tier-cta .wa{width:16px;height:16px;fill:currentColor;flex:none}
.game-body{gap:8px}
.game-more{margin-top:4px}

/* the game page: the same three tiers, side by side when there is room */
.gp-tiers .tiers{padding:0;margin:16px 0 8px}
@media (min-width:1024px){
  .gp-tiers .tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gp-tiers .tier{display:flex;flex-direction:column;padding:12px 16px 16px}
  .gp-tiers .tier-cta{margin-top:auto}
  .gp-tiers .tier .game-price .now{font-size:1.7rem}
}

/* ---------- shelf layout for three tiers ---------- */
.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phones: one game per row, cover beside the title, tiers full width */
@media(max-width:560px){
  .game-grid{grid-template-columns:minmax(0,1fr) !important;gap:16px}
  .game-link{display:grid !important;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-items:start}
  .game-link .game-art{grid-column:1;grid-row:1}
  .game-link .plat-bar{grid-column:1;grid-row:2;align-self:start}
  .game-link .plat-bar .plat-mark svg{height:12px}
  .game-link .game-body{grid-column:2;grid-row:1 / 3;padding:16px 16px 8px 0}
  .tiers{padding:4px 12px 12px}
  .tier .game-price .now{font-size:1.32rem}
}

/* web interface guidelines: dark UI chrome, no tap delay on buttons */
html{color-scheme:dark}
.tier-cta,.cur-btn,.btn{touch-action:manipulation}
.tier-head > *{min-width:0}