/* GameToClaim — dark theme, raised "key" controls, yellow price stickers. */
:root {
  --paper: #121a26;
  --surface: #1a2433;
  --ink: #e6ebf2;
  --muted: #9eabbc;
  --line: #2d3b50;
  --sticker: #ffd43b;
  --sticker-ink: #172233;
  --go: #3cc79a;
  --go-ink: #0d1a14;
  --link: #8fb6ff;
  --focus: #ffd43b;
  --key-edge: #0b1018;
  --key-top: #2a3546;
  --key-face: #222d3d;
  --glow: rgba(255, 212, 59, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 1rem; line-height: 1.5;
}
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img { display: block; max-width: 100%; }
button, select, input { font: inherit; color: inherit; }
.vh, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: .5rem; background: var(--surface); padding: .5rem 1rem; z-index: 50; }

main, .top, .foot { max-width: 1320px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 700px) { main, .top, .foot { padding-inline: 28px; } }

/* ---------- header */
.top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: 1.1rem .9rem; border-bottom: 2px solid var(--ink);
}
.brand { font-stretch: 62%; font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.2rem; }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding-block: .2rem; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--sticker); }
.wish-count {
  display: inline-block; min-width: 1.35rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 999px;
  background: var(--sticker); color: var(--sticker-ink); font-size: .78rem; font-weight: 800; text-align: center; line-height: 1.35rem;
}
.wish-count[hidden] { display: none; }

/* ---------- type */
h1, h2, h3 { font-stretch: 75%; line-height: 1.1; margin: 0; }
h1 { font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-weight: 800; font-size: 1.6rem; margin: 2.4rem 0 1rem; }
h3 { font-weight: 700; font-size: 1.05rem; font-stretch: 85%; }
s { color: var(--muted); font-weight: 400; }

/* ---------- raised key look, shared by filters, tiles and buttons */
.key, .qk, .key-select, .more, .filters-toggle, .sort select, .rail-close {
  background: linear-gradient(180deg, var(--key-top), var(--key-face));
  border: 1px solid var(--line); border-radius: 7px; color: var(--ink);
  box-shadow: 0 3px 0 var(--key-edge), 0 6px 10px -6px rgba(0, 0, 0, .6);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.key:hover, .qk:hover, .more:hover, .filters-toggle:hover {
  transform: translateY(-2px); border-color: var(--muted);
  box-shadow: 0 5px 0 var(--key-edge), 0 12px 16px -8px rgba(0, 0, 0, .7);
}

/* ---------- browse layout */
.browse { display: grid; gap: 2rem; padding-top: 1.6rem; }
@media (min-width: 980px) { .browse { grid-template-columns: 280px minmax(0, 1fr); } }
.results { min-width: 0; }

/* filter rail */
.rail-head, .rail-foot { display: none; }
.rail form { display: grid; gap: 1rem; }
.box {
  margin: 0; padding: 1rem 1.05rem 1.1rem; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.box:hover, .box:focus-within {
  transform: translateY(-3px); border-color: rgba(255, 212, 59, .7);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, .45), 0 0 28px -4px rgba(255, 212, 59, .3), 0 14px 28px -12px rgba(0, 0, 0, .8);
}
.box legend { float: left; width: 100%; padding: 0; margin-bottom: .7rem; font-weight: 800; font-stretch: 85%; font-size: 1.05rem; }
.box legend + * { clear: both; }
.box.has-active legend::after {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .45rem; border-radius: 50%;
  background: var(--sticker); box-shadow: 0 0 8px 2px rgba(255, 212, 59, .9); vertical-align: middle;
}
.keys { display: grid; gap: .55rem; }
.keys-2 { grid-template-columns: 1fr 1fr; }
.keys-3 { grid-template-columns: repeat(3, 1fr); }
.key { position: relative; display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; cursor: pointer; font-weight: 600; font-size: .94rem; }
.keys .key { justify-content: center; text-align: center; padding: .6rem .4rem; }
.box > .key { margin-bottom: .5rem; }
.key input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.key-checkbox:not(.keys .key)::before {
  content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid var(--muted); background: var(--paper);
}
.key em { margin-left: auto; font-style: normal; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.key:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.key:has(input:checked) {
  transform: translateY(2px); border-color: var(--sticker);
  box-shadow: 0 1px 0 var(--key-edge), 0 0 0 1px var(--sticker), 0 0 16px 2px var(--glow);
}
.key-checkbox:not(.keys .key):has(input:checked)::before { background: var(--sticker); border-color: var(--sticker); box-shadow: inset 0 0 0 2px var(--surface); }
.keys .key:has(input:checked) { background: var(--sticker); color: var(--sticker-ink); }
.keys .key:has(input[value=""]:checked) {      /* "Any" is the default: pressed, but no glow */
  background: var(--key-face); color: var(--ink); border-color: var(--muted); box-shadow: 0 1px 0 var(--key-edge);
}
.key:has(input:disabled) { opacity: .5; cursor: default; transform: none; }
.key-select { width: 100%; padding: .6rem .6rem; }

/* category tabs + tiles */
.coll { margin-bottom: 1.4rem; }
.coll-tabs { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; border-bottom: 2px solid var(--line); margin-bottom: .9rem; }
.ct { border: 0; background: none; padding: .45rem 0; font-weight: 700; color: var(--muted); font-size: 1rem; cursor: pointer; text-decoration: none; }
.ct:hover { color: var(--ink); }
.ct[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--sticker); }
.ct-wish { margin-left: auto; color: var(--ink); }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.quick[hidden] { display: none; }
.qk { display: grid; align-content: start; gap: .2rem; padding: .7rem .8rem .7rem; text-decoration: none; min-height: 5rem; }
.qk-name { font-weight: 800; font-stretch: 85%; font-size: 1rem; line-height: 1.15; }
.qk-n { color: var(--muted); font-size: .82rem; line-height: 1.3; }
.qk.on { transform: translateY(2px); background: var(--sticker); color: var(--sticker-ink); border-color: var(--sticker);
  box-shadow: 0 1px 0 var(--key-edge), 0 0 18px 3px var(--glow); }
.qk.on .qk-n { color: #3a4558; }

/* results header + bar */
.results-head { margin-bottom: .8rem; }
.rule { color: var(--muted); margin: .45rem 0 0; max-width: 70ch; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .6rem; }
.results-bar p { margin: 0; color: var(--muted); }
.results-bar strong { color: var(--ink); }
.sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 600; font-size: .92rem; }
.sort select { padding: .45rem .5rem; }
.filters-toggle { display: none; padding: .5rem .9rem; font-weight: 700; cursor: pointer; }
.active-n { display: inline-block; min-width: 1.3rem; border-radius: 999px; background: var(--sticker); color: var(--sticker-ink); font-size: .8rem; text-align: center; }
.active-n[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1.3rem; min-height: .5rem; }
.chip { border: 0; cursor: pointer; background: var(--sticker); color: var(--sticker-ink); font-weight: 700; font-size: .85rem; padding: .25rem .6rem; border-radius: 999px; }
.chip::after { content: " ✕"; }
.chip-clear { border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; font-size: .88rem; }

/* ---------- cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 2rem 1.4rem; }
.card { min-width: 0; }
.art { position: relative; }
.cover { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 6px; background: var(--surface); }
.cover-blank { display: flex; align-items: flex-end; padding: .6rem .7rem; color: var(--ink); font-stretch: 75%; font-weight: 800;
  background: linear-gradient(135deg, #2b3a55, #1a2433); }
.cover-lead { border-radius: 8px; }
.card h3 { margin-top: .7rem; overflow-wrap: anywhere; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .price { margin: .3rem 0 0; font-variant-numeric: tabular-nums; }
.card .price .sticker.off { display: none; }   /* only the phone list view shows it, next to the old price */
.card .price strong { font-stretch: 125%; font-weight: 800; font-size: 1.2rem; margin-right: .2rem; }
.card .store { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; }
.labels { list-style: none; padding: 0; margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.labels li { font-size: .8rem; font-weight: 600; border: 1px solid var(--line); border-radius: 4px; padding: .1rem .4rem; }

/* the sticker: the one loud thing */
.sticker {
  position: absolute; top: -8px; left: -6px; background: var(--sticker); color: var(--sticker-ink);
  font-stretch: 125%; font-weight: 900; font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums;
  padding: .45rem .6rem .4rem; border-radius: 6px; transform: rotate(-5deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.art-lead .sticker { font-size: clamp(1.6rem, 4vw, 2.6rem); top: -14px; left: -10px; padding: .55rem .8rem .5rem; }
.sticker-free { background: var(--go); color: var(--go-ink); }
.sticker-keep { display: flex; align-items: center; gap: .5em; padding: .35em .7em .35em .6em; background: #e11d48; color: #fff; font-size: 1.05rem;
  -webkit-mask: radial-gradient(circle .3em at 0 50%, transparent 98%, #000); mask: radial-gradient(circle .3em at 0 50%, transparent 98%, #000); }
.sticker-keep b { font-weight: 900; font-size: 1.25em; line-height: 1; padding-right: .45em; border-right: 2px dashed rgba(255, 255, 255, .7); }
.sticker-keep i { font: 800 .6em/1.15 "Archivo Narrow", "Archivo", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }

/* wishlist heart */
.wish {
  position: absolute; top: .45rem; right: .45rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; background: rgba(18, 26, 38, .78); color: var(--ink);
  transition: transform .12s ease, background .12s ease;
}
.wish svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wish:hover { transform: scale(1.1); }
.wish[aria-pressed="true"] { color: var(--sticker); }
.wish[aria-pressed="true"] svg { fill: currentColor; filter: drop-shadow(0 0 6px var(--glow)); }
.wish-big { position: static; width: 2.9rem; height: 2.9rem; background: var(--surface); border: 1px solid var(--line); }

.buy { display: inline-block; background: var(--go); color: var(--go-ink); font-weight: 700; text-decoration: none;
  padding: .7rem 1.2rem; border-radius: 6px; border: 0; cursor: pointer; }
.buy:hover { filter: brightness(1.08); }
.buy-small { padding: .4rem .75rem; font-size: .92rem; white-space: nowrap; }
.see-all { margin: 2rem 0 0; text-align: center; }
.more { padding: .7rem 1.4rem; font-weight: 700; cursor: pointer; }
.empty-note, .empty { padding-block: 2.5rem; max-width: 60ch; color: var(--muted); grid-column: 1 / -1; }

/* ---------- game page */
.game-head { display: grid; gap: 1.5rem; padding-block: 2.2rem 0; }
@media (min-width: 820px) { .game-head { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; } }
.lead-price { font-size: 1.15rem; margin: .8rem 0 .8rem; font-variant-numeric: tabular-nums; }
.lead-price strong { font-stretch: 125%; font-weight: 900; font-size: 2.1rem; margin-right: .3rem; }
.actions { display: flex; align-items: center; gap: .7rem; }
.checked { color: var(--muted); margin: .7rem 0 1rem; }
.desc { max-width: 62ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 1.2rem 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
.prices { width: 100%; border-collapse: collapse; min-width: 480px; }
.prices th, .prices td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prices thead th { font-size: .88rem; color: var(--muted); font-weight: 600; }
.prices .num { text-align: right; font-variant-numeric: tabular-nums; }
.prices strong { font-stretch: 115%; font-weight: 800; }
.sub { display: block; color: var(--muted); font-size: .88rem; font-weight: 400; }
.note { color: var(--muted); font-size: .92rem; max-width: 70ch; }
.note.wide { max-width: none; }
.chart-wrap { margin-bottom: 1.5rem; }
.chart-wrap h3 { margin-bottom: .4rem; }
.chart { margin: 0; max-width: 680px; }
.chart svg { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .low { stroke: var(--go); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .line { fill: none; stroke: var(--sticker); stroke-width: 2.5; }
.chart text { fill: var(--muted); font: 12px "Archivo", sans-serif; }
.chart figcaption { color: var(--muted); font-size: .88rem; }

/* ---------- prose + footer */
.prose { max-width: 66ch; padding-block: 2rem; }
/* Footer pages: on wide screens the text sits left and a side column (On this page, More about us) uses the right. */
.prose-side { display: none; }
.prose h2[id] { scroll-margin-top: 1rem; }
@media (min-width: 1000px) {
  .prose-wrap { display: grid; grid-template-columns: minmax(0, 76ch) minmax(240px, 320px); column-gap: 4rem; align-items: start; }
  .prose-wrap .prose { max-width: none; }
  .prose-side { display: grid; gap: 1.2rem; position: sticky; top: 1rem; margin-top: 2rem; }
}
.side-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.side-box h2 { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.side-box a { text-decoration: none; }
.side-box a:hover { text-decoration: underline; }
.side-box a[aria-current="page"] { color: var(--ink); font-weight: 800; pointer-events: none; }
/* Contact page */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 1.4rem 0; }
.contact-card { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.contact-card:hover, .contact-card:focus-visible { border-color: rgba(255, 212, 59, .7); transform: translateY(-2px); }
.contact-card strong { font-size: 1.05rem; }
.contact-card > span:last-child { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.contact-card .cc-ico { font-size: 1.5rem; line-height: 1; }
.contact-card.on { border-color: var(--sticker); background: color-mix(in srgb, var(--sticker) 10%, var(--surface)); }
.contact-form-wrap { margin: 1.2rem 0; }
.cf-form { display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cf-form h2 { margin: 0; font-size: 1.2rem; }
.cf-l { display: grid; gap: .35rem; font-weight: 700; }
.cf-hint { font-weight: 400; color: var(--muted); font-size: .88rem; }
.cf-form textarea, .cf-form input[type="email"] { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 400; }
.cf-form textarea { resize: vertical; min-height: 12rem; }
.prose .cf-form p { margin: 0; }
.cf-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.cf-actions .buy { display: inline-block; border: 0; cursor: pointer; }
.cf-actions .buy:disabled { opacity: .6; cursor: default; }
.cf-bad { color: #ff6b6b; }
.cf-fine { margin: 0; color: var(--muted); font-size: .85rem; }
.contact-note { color: var(--muted); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .contact-card:hover { transform: none; } }
.prose p { margin: 1rem 0; }
.foot { margin-top: 4rem; padding-block: 1.6rem 2.4rem; border-top: 2px solid var(--ink); color: var(--muted); font-size: .92rem; }
.foot p { max-width: 80ch; margin: .5rem 0; }
.foot-links a { margin-right: 1rem; }
/* Wide screens: the notes on the left, the links in their own column on the right (was a narrow strip with empty space). */
@media (min-width: 900px) {
  .foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: 4rem; align-items: start; }
  .foot > p { grid-column: 1; max-width: 90ch; }
  .foot > .foot-links { grid-column: 2; grid-row: 1 / span 4; margin: .5rem 0; padding-left: 2rem; border-left: 1px solid var(--line, rgba(128, 144, 170, .3));
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; align-content: start; }
  .foot-links a { margin-right: 0; }
}
.disclosure { color: var(--ink); }
code { font-size: .95em; background: var(--surface); padding: .1rem .3rem; border-radius: 4px; }

/* ---------- phones and tablets: filters become a full-screen panel */
@media (max-width: 979px) {
  .filters-toggle { display: inline-flex; gap: .4rem; align-items: center; }
  .rail {
    position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto;
    padding: 1rem 16px 6rem; transform: translateX(-105%); transition: transform .22s ease; visibility: hidden;
  }
  body.filters-open { overflow: hidden; }
  body.filters-open .rail { transform: none; visibility: visible; }
  .rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .rail-head h2 { margin: 0; }
  .rail-close { padding: .45rem .9rem; font-weight: 700; cursor: pointer; }
  .rail-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: .8rem 16px; background: var(--paper); border-top: 1px solid var(--line); }
  .rail-foot .buy { width: 100%; font-size: 1.05rem; }
  .box:hover, .box:focus-within { transform: none; }
  .quick { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); grid-template-columns: none; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
  .qk { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .key:hover, .qk:hover, .box:hover, .box:focus-within, .more:hover { transform: none; }
}

/* ---------- discount colour tiers (keep in sync with tier() in build.py and deals.js) */
.sticker.t-90 { background: #f0503c; color: #fff; }
.sticker.t-75 { background: #ff8a1a; color: #1e0d00; }
.sticker.t-50 { background: #ffd43b; color: #172233; }
.sticker.t-25 { background: #c8f06a; color: #14210a; }
.sticker.t-0  { background: #8fa3bd; color: #0e1520; }

/* ---------- "Save $X" next to prices */
.save { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 4px; font-size: .78rem; font-weight: 700;
  color: #7ee2a8; background: rgba(60, 199, 154, .13); white-space: nowrap; vertical-align: .12em; }
.lead-price .save { font-size: .9rem; }

/* ---------- card hover glow (same feel as the filter boxes) */
.card { padding: 8px 8px 12px; margin: -8px -8px -12px; border-radius: 12px; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.card:hover, .card:focus-within { transform: translateY(-4px); background: var(--surface); border-color: rgba(255, 212, 59, .7);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, .4), 0 0 28px -4px rgba(255, 212, 59, .3), 0 16px 30px -14px rgba(0, 0, 0, .85); }

/* ---------- stats bar */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 0 0 1.3rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: .75rem .9rem; }
.stat small { display: block; color: var(--muted); font-size: .82rem; }
.stat b { display: block; font-size: 1.6rem; font-stretch: 110%; font-weight: 800; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.stat b.neg { color: #ff8a7a; } .stat b.pos { color: #7ee2a8; } .stat b.dim { color: var(--muted); font-size: 1.1rem; padding-top: .35rem; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- big price history chart (game page) */
.history { margin-top: 2rem; }
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hist-head h2 { margin: 0; }
.hist-ranges { display: flex; gap: .4rem; }
.hist-ranges button { padding: .35rem .8rem; font-size: .88rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.hist-ranges button[aria-pressed="true"] { background: var(--sticker); color: var(--sticker-ink); border-color: var(--sticker); }
.hist-box { position: relative; margin-top: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1rem .6rem; }
.hist-fig svg { width: 100%; height: auto; max-height: 15rem; display: block; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hist-fig .hov-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.hist-fig .hov-dot { fill: var(--sticker); stroke: var(--paper); stroke-width: 2.5; pointer-events: none; }
.hist-tip { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: .15rem; padding: .45rem .65rem; border-radius: 9px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); font-size: .86rem; white-space: nowrap; }
.hist-tip[hidden] { display: none; }
.hist-tip b { font-weight: 700; }
.hist-tip span { display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.hist-tip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.hist-tip i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hist-tip i.best { background: var(--sticker); }
.hist-fig .grid { stroke: var(--line); stroke-width: 1; }
.hist-fig .ylab, .hist-fig .xlab { fill: var(--muted); font: 12px "Archivo", sans-serif; }
.hist-fig .line { fill: none; stroke-width: 2; opacity: .85; }
.hist-fig .line.best { stroke: var(--sticker); stroke-width: 3; opacity: 1; }
.hist-fig .area { fill: rgba(255, 212, 59, .12); }
.hist-fig .dot { fill: var(--sticker); stroke: var(--paper); stroke-width: 3; }
.hist-fig .low { stroke: #7ee2a8; stroke-width: 1.5; stroke-dasharray: 6 6; }
.hist-fig .lowlab { fill: #7ee2a8; font: 600 12px "Archivo", sans-serif; }
.hist-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .5rem; color: var(--muted); font-size: .88rem; }
.hist-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; }
.hist-legend .lowkey i { background: repeating-linear-gradient(90deg, #7ee2a8 0 5px, transparent 5px 9px); }

/* ---------- daily drop calendar */
.daily { padding-top: 1.8rem; }
.daily-head { text-align: center; margin-bottom: 1.4rem; }
.daily-head .rule { margin-inline: auto; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .7rem; }
.cal .dow { color: var(--muted); font-weight: 600; font-size: .85rem; padding-left: .3rem; }
.door { position: relative; min-height: 120px; border-radius: 12px; padding: .6rem; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--ink); }
.door.blank { background: none; border: 0; }
.door .n { font-weight: 800; font-size: .95rem; color: var(--muted); }
.door.locked { background: linear-gradient(160deg, var(--key-top), var(--key-face)); box-shadow: 0 3px 0 var(--key-edge); }
.door.locked .lock { margin: auto; font-size: 2rem; font-weight: 900; color: var(--line); }
.door.missed { opacity: .4; }
.door.past { opacity: .8; transition: opacity .15s, border-color .15s; }
.door.past:hover { opacity: 1; border-color: rgba(255, 212, 59, .6); }
.door.past .mini { aspect-ratio: 16 / 9; border-radius: 6px; }
.door.past .t { font-size: .8rem; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.door.past .st { font-size: .72rem; color: var(--muted); }
.door.today { grid-column: span 2; grid-row: span 2; padding: 0; border: 2px solid var(--sticker);
  box-shadow: 0 0 0 4px rgba(255, 212, 59, .15), 0 0 40px -8px rgba(255, 212, 59, .55); }
.door.today .door-art { position: relative; }
.door.today .door-art .sticker { top: 10px; left: 10px; }
.door.today .door-info { padding: .8rem 1rem 1rem; display: grid; gap: .4rem; justify-items: start; }
.door.today .k { color: var(--sticker); font-weight: 800; font-size: .8rem; letter-spacing: .04em; }
.door.today h2 { margin: 0; font-size: 1.4rem; } .door.today h2 a { color: inherit; text-decoration: none; }
.door.today .price { margin: 0; } .door.today .price strong { font-size: 1.5rem; font-stretch: 120%; }
.countdown { text-align: center; color: var(--muted); margin-top: 1.4rem; }
.countdown b { color: var(--sticker); font-size: 1.4rem; font-variant-numeric: tabular-nums; margin-left: .3rem; }
@media (max-width: 800px) { .cal { grid-template-columns: repeat(4, 1fr); } .cal .dow, .door.blank { display: none; } }

/* ---------- demo banner */
.demo-banner { background: #3a2a05; color: #ffd43b; text-align: center; padding: .5rem 1rem; font-weight: 600; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { .card:hover, .card:focus-within { transform: none; } }
.today-drop { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; padding: .6rem; max-width: 980px; margin: 0 auto 2rem; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 2px solid var(--sticker); box-shadow: 0 0 0 4px rgba(255, 212, 59, .15), 0 0 40px -8px rgba(255, 212, 59, .55); }
/* Daily drop picture: shown whole (never cropped, so no cut-off logo or text), centred in a rounded frame; any bars beside or
   above it are filled with a blurred copy of the same picture. min-width/min-height 0 and the clip keep a big picture or
   a blur from ever leaving the frame, also while the reveal runs. */
.today-drop .door-art { position: relative; min-width: 0; min-height: 0; display: grid; align-content: center; isolation: isolate;
  background: #0b111b; clip-path: inset(0 round 10px); }
.today-drop .door-art::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--art) center / cover no-repeat;
  filter: blur(22px) brightness(.5) saturate(1.2); }
.today-drop .door-art .cover { aspect-ratio: auto 460 / 215; height: auto; width: 100%; max-width: 100%; max-height: 22rem; object-fit: contain; border-radius: 0; background: none; }   /* a tall picture is letterboxed, it does not make the box tall */
.today-drop .door-art .cover-blank { height: 100%; aspect-ratio: auto; }
.today-drop .door-art .sticker { z-index: 2; }   /* a big picture must never stretch the box (it did while the reveal ran: overflow is visible then) */
.today-drop .door-art .sticker { top: 12px; left: 12px; font-size: 1.4rem; }
.today-drop .door-info { padding: 1.2rem 1.4rem; display: grid; gap: .5rem; align-content: center; justify-items: start; }
.today-drop .k { color: var(--sticker); font-weight: 800; font-size: .85rem; }
.today-drop h2 { margin: 0; font-size: 1.8rem; } .today-drop h2 a { color: inherit; text-decoration: none; }
.today-drop .price { margin: 0; } .today-drop .price strong { font-size: 1.8rem; font-stretch: 120%; }
.today-drop .countdown { text-align: left; margin: .4rem 0 0; }
.cal-title { margin: 0 0 .8rem; font-size: 1.3rem; }
.door.is-today { opacity: 1; border: 2px solid var(--sticker); box-shadow: 0 0 22px -6px rgba(255, 212, 59, .6); }
.door.is-today .n, .door.is-today .st { color: var(--sticker); font-weight: 700; }
@media (max-width: 800px) { .today-drop { grid-template-columns: 1fr; } }

/* ---------- Featured & recommended (Steam-style showcase) */
.feat { margin: 0 0 1.6rem; }
.feat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
.feat-head h2 { margin: 0; font-size: 1.25rem; }
.feat-head span { color: var(--muted); font-size: .85rem; }
.fbox { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 36px -22px #000; }
.fbox { display: grid; }
/* All slides share one grid cell, so the box is always as tall as the tallest slide
   and nothing moves when you change slides. Hidden slides stay in place, invisible. */
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.55fr 1fr; }
.slide[hidden] { display: grid; visibility: hidden; }
.slide .main { position: relative; display: block; }
.slide .main .cover { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.slide .main .sticker { top: 12px; left: 12px; font-size: 1.3rem; }
.slide .info { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.slide .lab { align-self: flex-start; background: rgba(255, 212, 59, .14); color: var(--sticker); font-weight: 800; font-size: .74rem;
  padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.slide h3 { margin: 0; font-size: 1.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slide h3 a { color: inherit; text-decoration: none; }
.slide .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.slide .thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; opacity: .85; transition: opacity .15s; }
.slide .thumbs img:hover { opacity: 1; }
.slide .blurb { color: var(--ink); font-size: .9rem; margin: 0; opacity: .85; }
.slide .why { color: var(--muted); font-size: .84rem; margin: 0; }
.slide .pbox { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: #0e141f; border-radius: 8px; padding: 8px 10px; }
.slide .pbox s { display: block; color: var(--muted); font-size: .82rem; }
.slide .pbox b { font-size: 1.3rem; font-stretch: 115%; }
.slide .pbox .buy { margin-left: auto; padding: .5rem .8rem; font-size: .92rem; white-space: nowrap; }
.fbox .arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 64px; padding: 0; border: 0;
  display: grid; place-items: center; background: rgba(10, 14, 22, .75); color: #fff; font-size: 1.6rem; border-radius: 6px; cursor: pointer; }
.fbox .arr:hover { background: rgba(10, 14, 22, .95); color: var(--sticker); }
.fbox .arr.l { left: 8px; } .fbox .arr.r { right: 8px; }
.fdots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.fdots .dot { width: 18px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--line); cursor: pointer; }
.fdots .dot[aria-current="true"] { background: var(--sticker); width: 26px; }
.inline-h { font-size: 1.3rem; margin: 0; }
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; }
  .slide .thumbs { display: none; }
  .fbox .arr { top: 28%; }
}

/* ---------- search bar (top bar, every page) */
.top { align-items: center; }
.search { flex: 1; max-width: 460px; margin-left: auto; }
.search input {
  width: 100%; padding: .6rem .9rem .6rem 2.4rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239eabbc' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem center / 1.05rem;
  color: var(--ink); font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: rgba(255, 212, 59, .8); box-shadow: 0 0 0 3px rgba(255, 212, 59, .25), 0 0 22px -6px rgba(255, 212, 59, .5); }
.top nav { margin-left: 1rem; }
@media (max-width: 760px) {
  .search { order: 3; flex-basis: 100%; max-width: none; margin: .4rem 0 0; }
  .top nav { margin-left: 0; }
}

/* ---------- dropdowns: make the opened list match the dark theme everywhere */
select { color-scheme: dark; }
select option, select optgroup { background-color: #1a2433; color: #e6ebf2; }
select option:checked { background-color: #2b3a55; color: #ffd43b; }
select option:hover, select option:focus { background-color: #24324a; }

/* ---------- review rating: stars + Steam wording + count */
.rating { margin: .25rem 0 0; font-size: .82rem; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; cursor: help; }
.stars { letter-spacing: .06em; font-size: .9rem; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--sticker) calc(var(--s) * 20%), #3a4659 calc(var(--s) * 20%)); }
.rl { font-weight: 700; }
.rl.pos { color: #66c0f4; } .rl.mix { color: #d6b56c; } .rl.neg { color: #e0715a; }
.rc { color: var(--muted); font-variant-numeric: tabular-nums; }
.rating-big { font-size: .95rem; margin: 0; } .rating-big .stars { font-size: 1.05rem; }
.rsrc { min-width: 2.6rem; font-size: .8rem; font-weight: 800; color: var(--acc, var(--muted)); }   /* "Steam" / "GOG" before the stars on game pages */
.slide .rating { margin: 0; }
/* Ratings box on game pages (behind critic_ratings): Players and Critics cards, one row per site, never averaged.
   Each site has its own colour (--acc); players get a ring gauge, critics a rounded-square one. No logos. */
.rt-steam { --acc: #66c0f4; } .rt-gog { --acc: #c18cf0; } .rt-rawg { --acc: #ff8f66; }
.rt-metacritic { --acc: #ffcc33; } .rt-igdb { --acc: #3fd0bf; }
:root[data-theme="light"] .rt-steam { --acc: #1a6fb0; } :root[data-theme="light"] .rt-gog { --acc: #7a3db0; }
:root[data-theme="light"] .rt-rawg { --acc: #b8461b; } :root[data-theme="light"] .rt-metacritic { --acc: #8a6500; }
:root[data-theme="light"] .rt-igdb { --acc: #0d7a6d; }
.facts dd.rt-top { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.rsrc a { color: var(--acc); text-decoration: none; } .rsrc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rt-jump { font-size: .85rem; text-underline-offset: 3px; }
.ratings { scroll-margin-top: 1rem; }
.rt-cols { display: grid; gap: 1rem; }
@media (min-width: 760px) { .rt-cols { grid-template-columns: 1fr 1fr; } }
.rt-group { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .8rem 1rem .3rem; min-width: 0; }
.rt-group h3 { font-size: .78rem; font-stretch: 100%; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .1rem; }
.rt-list { list-style: none; margin: 0; padding: 0; }
.rt-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; grid-template-areas: "gauge name count";
  column-gap: .9rem; align-items: center; padding: .6rem 0; cursor: help; }
.rt-row + .rt-row { border-top: 1px solid var(--line); }
.rt-gauge { grid-area: gauge; position: relative; display: block; width: 3.4rem; height: 3.4rem; }
.rt-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-square svg { transform: none; }
.rt-gauge circle, .rt-gauge rect { fill: none; stroke: var(--line); stroke-width: 4.5; }
.rt-gauge .fill { stroke: var(--acc); stroke-linecap: round; }
.rt-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; }
.rt-num small { font-size: .6em; font-weight: 700; color: var(--muted); margin-left: .04em; }
.rt-num > span { line-height: 1; text-align: center; }
.rt-num small.of5 { display: block; margin: .12rem 0 0; font-size: .58em; }   /* "/5" under the number, so it fits inside the gauge */
.rt-name { grid-area: name; font-weight: 800; font-size: 1.02rem; line-height: 1.25; min-width: 0; color: var(--acc); }
.rt-name a { color: var(--acc); text-decoration: none; } .rt-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rt-word { font-weight: 600; font-size: .95rem; color: var(--ink); }
.rt-count { grid-area: count; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rt-note { margin: .7rem 0 0; font-size: .85rem; }
@media (max-width: 479px) {
  .rt-row { grid-template-columns: 3.1rem minmax(0, 1fr); grid-template-areas: "gauge name" "gauge count"; row-gap: .1rem; column-gap: .8rem; }
  .rt-gauge { width: 3.1rem; height: 3.1rem; }
  .rt-solo .rt-name { grid-row: 1 / span 2; }   /* no count line: name centred beside the gauge */
  .rt-count { text-align: left; }
}

/* ---------- Daily Drop: clean heading, glow only on the featured game card */
.top nav a[href="/daily/"] { position: relative; color: #ffe89b; text-shadow: none; }
.top nav a[href="/daily/"]::before { content: "✦"; color: #ffd43b; display: inline-block; margin-right: .3rem; font-size: .83em; }
.top nav a[href="/daily/"]:hover { text-shadow: none; }
.radiant-head { position: relative; isolation: isolate; padding: 1.8rem 1rem 2rem; }
.daily-eyebrow { color: #ffda5f; letter-spacing: .2em; font-size: .82rem; font-weight: 900; display: inline-block; margin-bottom: .6rem;
  text-shadow: none; }
.radiant-head h1 { color: #fff3cb; text-shadow: none; }
.radiant-head .rule { text-shadow: none; }
.today-drop.radiant { position: relative; overflow: visible; isolation: isolate; border-color: #ffe28a;
  box-shadow: 0 0 0 1px rgba(255, 214, 98, .45), 0 0 22px rgba(255, 201, 52, .35), 0 0 75px rgba(248, 157, 32, .19); }
.today-drop.radiant::before { content: ""; position: absolute; z-index: -1; inset: -8px; border-radius: 20px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 233, 142, .5), transparent 40%, rgba(255, 175, 42, .30) 76%, rgba(255, 223, 80, .48)); filter: blur(18px); opacity: .78; }
.today-drop.radiant .door-art { overflow: hidden; border-radius: 10px; }
.today-drop.radiant .door-info { border-radius: 0 12px 12px 0; background: var(--surface); }
.today-drop.radiant { background: var(--surface); }
.today-drop.radiant * { text-shadow: none; }
.today-drop.radiant .k { text-shadow: none; }
.offer-expiry { margin: .3rem 0 -.1rem; color: var(--muted); font-size: .95rem; }
.offer-expiry b { color: var(--ink); font-weight: 700; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .7rem 0 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.cal-nav > * { flex: 1; }
.cal-nav strong { text-align: center; font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
.cal-nav-link { color: #ffda62; text-decoration: none; font-weight: 750; font-size: .88rem; }
.cal-nav-link:last-child { text-align: right; }
.cal-nav-link:hover { text-decoration: underline; }
.door.locked { border: 1px dashed rgba(255, 217, 81, .22); opacity: .72; }
.door.locked .lock { color: #ffd85a; opacity: .73; text-shadow: none; }
.door .future-label, .door .no-record { font-size: .73rem; margin-top: auto; color: var(--muted); }
.door.missed { opacity: .5; }
.door.past { opacity: 1; border-color: rgba(255, 218, 103, .2); }
.door.past:hover { box-shadow: 0 0 14px rgba(255, 214, 97, .15); }
.cal-hint, .daily-unavailable { margin: 1rem auto 2rem; color: var(--muted); font-size: .9rem; text-align: center; }
.archive-reveal { max-width: 1000px; margin: auto; }
.archive-reveal .today-drop { box-shadow: 0 0 22px rgba(255, 212, 59, .12); }
.archive-reveal .door-info .note { margin: .5rem 0; }
@media (max-width: 800px) {
  .today-drop.radiant .door-art { border-radius: 10px; }
  .today-drop.radiant .door-info { border-radius: 0 0 12px 12px; }
  .cal { gap: .42rem; }
  .door { min-height: 112px; padding: .38rem; }
  .cal-nav strong { font-size: 1.05rem; }
  .cal-nav-link { font-size: .78rem; }
}
@media (max-width: 450px) {
  .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-nav-link { max-width: 31%; }
}
@media (prefers-reduced-motion: reduce) {
  .today-drop.radiant, .radiant-head, .top nav a[href="/daily/"] { animation: none; }
}

/* ---------- genre picker (right of the results bar, choices as a grid) */
.gpick { position: relative; margin-left: auto; }
.gbtn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 8px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--key-top), var(--key-face)); box-shadow: 0 3px 0 var(--key-edge); }
.gbtn[aria-expanded="true"] { border-color: var(--sticker); }
.gval { background: var(--sticker); color: var(--sticker-ink); border-radius: 999px; padding: 0 .4rem; font-size: .78rem; font-weight: 800; }
.gpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(640px, calc(100vw - 32px)); padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.keys-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; padding: 2px 2px 6px; }
.gpop-foot { display: flex; justify-content: space-between; margin: 10px 0 0; }
.gpop-foot button { padding: .4rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--key-face); cursor: pointer; font-weight: 600; }
.gpop-foot .gdone { background: var(--sticker); color: var(--sticker-ink); border-color: var(--sticker); }
.results-bar .sort { margin-left: 0; }

/* ---------- search: other games not on sale */
.other-games { margin: 1.6rem 0 0; }
.other-games h2 { font-size: 1.1rem; margin: 0 0 .6rem; } .other-games h2 span { color: var(--muted); font-weight: 500; font-size: .9rem; }
.other-games ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.other-games li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; background: var(--surface); }
.other-games li + li { border-top: 1px solid var(--line); }
.other-games li a { color: var(--ink); font-weight: 600; text-decoration: none; } .other-games li a:hover { text-decoration: underline; }
.og-price { white-space: nowrap; font-variant-numeric: tabular-nums; } .og-price small { color: var(--muted); }

/* ---------- theme switch */
.theme-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; align-self: center;
  border: 1px solid var(--line); background: var(--key-face); color: var(--sticker); font-size: 1rem; line-height: 1; }
.theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: inline; }

/* ---------- currency button (US$, CA$, £, €, A$) and the parts of a page drawn in each currency (build.py both()).
   A currency's own part (c-cad) shows only when it is picked (<html data-cur="CAD">); the home part hides (h-cad) only in a
   currency that has its own part. A new currency in site.regions needs its two lines here. */
.cur-btn { height: 34px; min-width: 44px; padding: 0 .6rem; border-radius: 17px; cursor: pointer; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--key-face); color: var(--ink); font-family: inherit; font-weight: 700; font-size: .8rem; line-height: 1;
  letter-spacing: .01em; white-space: nowrap; }
.cur-btn:hover { border-color: var(--accent, #ffd43b); }
.cur-home, .cur-alt { display: contents; }
:root:not([data-cur="CAD"]) .c-cad, :root:not([data-cur="GBP"]) .c-gbp, :root:not([data-cur="EUR"]) .c-eur, :root:not([data-cur="AUD"]) .c-aud,
:root[data-cur="CAD"] .h-cad, :root[data-cur="GBP"] .h-gbp, :root[data-cur="EUR"] .h-eur, :root[data-cur="AUD"] .h-aud { display: none !important; }
/* flags: drawn here (no emoji: Windows shows letters instead); on the button too, on phones as well */
.flag { display: inline-block; flex: none; width: 20px; height: 14px; border-radius: 2px; vertical-align: middle;
  background: #888 center / 100% 100% no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.flag-usd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Cpath d='M0 0.00h30v1.54H0zM0 3.08h30v1.54H0zM0 6.15h30v1.54H0zM0 9.23h30v1.54H0zM0 12.31h30v1.54H0zM0 15.38h30v1.54H0zM0 18.46h30v1.54H0z' fill='%23b22234'/%3E%3Crect width='12' height='10.77' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.4' cy='1.5' r='.55'/%3E%3Ccircle cx='4.4' cy='1.5' r='.55'/%3E%3Ccircle cx='7.4' cy='1.5' r='.55'/%3E%3Ccircle cx='10.4' cy='1.5' r='.55'/%3E%3Ccircle cx='1.4' cy='4.1' r='.55'/%3E%3Ccircle cx='4.4' cy='4.1' r='.55'/%3E%3Ccircle cx='7.4' cy='4.1' r='.55'/%3E%3Ccircle cx='10.4' cy='4.1' r='.55'/%3E%3Ccircle cx='1.4' cy='6.7' r='.55'/%3E%3Ccircle cx='4.4' cy='6.7' r='.55'/%3E%3Ccircle cx='7.4' cy='6.7' r='.55'/%3E%3Ccircle cx='10.4' cy='6.7' r='.55'/%3E%3Ccircle cx='1.4' cy='9.3' r='.55'/%3E%3Ccircle cx='4.4' cy='9.3' r='.55'/%3E%3Ccircle cx='7.4' cy='9.3' r='.55'/%3E%3Ccircle cx='10.4' cy='9.3' r='.55'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-cad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23d52b1e'/%3E%3Crect x='7.5' width='15' height='20' fill='%23fff'/%3E%3Cpath d='M15 4.2 15.9 5.9 17 5.4 16.6 8.2 18.2 7 18.6 8 20 7.7 19.5 9.4 20.3 9.8 17.6 12 17.9 13 15.3 12.6 15.4 15.6 14.6 15.6 14.7 12.6 12.1 13 12.4 12 9.7 9.8 10.5 9.4 10 7.7 11.4 8 11.8 7 13.4 8.2 13 5.4 14.1 5.9z' fill='%23d52b1e'/%3E%3C/svg%3E"); }
.flag-gbp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url%28%23t%29' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E"); }
.flag-eur { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23039'/%3E%3Cg fill='%23fc0'%3E%3Ccircle cx='15.00' cy='4.00' r='.95'/%3E%3Ccircle cx='18.00' cy='4.80' r='.95'/%3E%3Ccircle cx='20.20' cy='7.00' r='.95'/%3E%3Ccircle cx='21.00' cy='10.00' r='.95'/%3E%3Ccircle cx='20.20' cy='13.00' r='.95'/%3E%3Ccircle cx='18.00' cy='15.20' r='.95'/%3E%3Ccircle cx='15.00' cy='16.00' r='.95'/%3E%3Ccircle cx='12.00' cy='15.20' r='.95'/%3E%3Ccircle cx='9.80' cy='13.00' r='.95'/%3E%3Ccircle cx='9.00' cy='10.00' r='.95'/%3E%3Ccircle cx='9.80' cy='7.00' r='.95'/%3E%3Ccircle cx='12.00' cy='4.80' r='.95'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-aud { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23012169'/%3E%3CclipPath id='t'%3E%3Cpath d='M7.5 5H15v5zv5H0zH0V0zV0h7.5z'/%3E%3C/clipPath%3E%3CclipPath id='c'%3E%3Cpath d='M0 0h15v10H0z'/%3E%3C/clipPath%3E%3Cg clip-path='url%28%23c%29'%3E%3Cpath d='M0 0l15 10m0-10L0 10' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M0 0l15 10m0-10L0 10' clip-path='url%28%23t%29' stroke='%23c8102e' stroke-width='1.2'/%3E%3Cpath d='M7.5 0v10M0 5h15' stroke='%23fff' stroke-width='3.4'/%3E%3Cpath d='M7.5 0v10M0 5h15' stroke='%23c8102e' stroke-width='2'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpolygon points='7.50 13.20 7.89 14.39 9.06 13.95 8.38 15.00 9.45 15.65 8.20 15.76 8.37 17.00 7.50 16.10 6.63 17.00 6.80 15.76 5.55 15.65 6.62 15.00 5.94 13.95 7.11 14.39'/%3E%3Cpolygon points='21.00 2.40 21.29 3.10 22.05 3.16 21.47 3.65 21.65 4.39 21.00 4.00 20.35 4.39 20.53 3.65 19.95 3.16 20.71 3.10'/%3E%3Cpolygon points='25.50 7.40 25.79 8.10 26.55 8.16 25.97 8.65 26.15 9.39 25.50 8.99 24.85 9.39 25.03 8.65 24.45 8.16 25.21 8.10'/%3E%3Cpolygon points='21.00 13.90 21.29 14.60 22.05 14.66 21.47 15.15 21.65 15.89 21.00 15.49 20.35 15.89 20.53 15.15 19.95 14.66 20.71 14.60'/%3E%3Cpolygon points='17.50 7.90 17.79 8.60 18.55 8.66 17.97 9.15 18.15 9.89 17.50 9.49 16.85 9.89 17.03 9.15 16.45 8.66 17.21 8.60'/%3E%3C/g%3E%3C/svg%3E"); }
.cur-menu { width: min(230px, calc(100vw - 16px)); }
.cur-opt .cur-sym { min-width: 2.2rem; }
.cur-opt .cur-name { color: var(--muted); font-weight: 500; font-size: .9rem; }
.cur-menu-note { margin: .25rem 0 0; padding: .5rem .6rem .2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.35; }
/* a deals list in the other currency: the cards built into the page are US$ ones, so they wait for deals.js to draw them again */
:root[data-cur] .browse #results:not(.cur-ready) { visibility: hidden; }

/* ---------- light theme (dark stays the default) */
:root[data-theme="light"] {
  --paper: #eef1f6; --surface: #ffffff; --ink: #172233; --muted: #5a6a80; --line: #d3dae5;
  --sticker: #ffd43b; --sticker-ink: #172233; --link: #2456c7; --focus: #c99700;
  --key-edge: #c3ccd9; --key-top: #ffffff; --key-face: #f3f5f9; --glow: rgba(214, 160, 0, .35);
  color-scheme: light;
}
:root[data-theme="light"] .slide .pbox { background: #f1f4f9; }
:root[data-theme="light"] .wish { background: rgba(255, 255, 255, .85); }
:root[data-theme="light"] select option, :root[data-theme="light"] select optgroup { background-color: #fff; color: #172233; }
:root[data-theme="light"] select option:checked { background-color: #fff3c4; color: #172233; }
:root[data-theme="light"] .stars { background-image: linear-gradient(90deg, #e0a800 calc(var(--s) * 20%), #c9d1dc calc(var(--s) * 20%)); }
:root[data-theme="light"] .rl.pos { color: #1a73b8; } :root[data-theme="light"] .rl.mix { color: #9a6b00; } :root[data-theme="light"] .rl.neg { color: #c2412a; }
:root[data-theme="light"] .top nav a[href="/daily/"] { color: #9a6b00; }
:root[data-theme="light"] .top nav a[href="/daily/"]::before { color: #e0a800; }
:root[data-theme="light"] .daily-eyebrow, :root[data-theme="light"] .cal-nav-link { color: #9a6b00; }
:root[data-theme="light"] .radiant-head h1 { color: var(--ink); }
:root[data-theme="light"] .door.locked .lock { color: #c99700; }
:root[data-theme="light"] .today-drop .k, :root[data-theme="light"] .door.is-today .n, :root[data-theme="light"] .door.is-today .st { color: #9a6b00; }
:root[data-theme="light"] .slide .lab { color: #8a5f00; background: rgba(255, 212, 59, .3); }
:root[data-theme="light"] .demo-banner { background: #fff3c4; color: #5a4300; }

/* ---------- v11: filter rail fits without scrolling; filter buttons by Sort */
.box-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.box-pair .box { margin: 0; padding-inline: .7rem; }
.box-pair .keys { grid-template-columns: 1fr; gap: .45rem; }
.box-pair .keys .key { padding: .5rem .3rem; font-size: .88rem; }
.rail form > * + * { margin-top: .9rem; }
.pickers { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.pickers .gpick { margin-left: 0; }
.gbtn.on { border-color: var(--sticker); }
.gpick[data-pick="min"] .gpop, .gpick[data-pick="stars"] .gpop { width: 280px; }
.keys-small .key { padding: .5rem .4rem; font-size: .9rem; }
.f2p .grid { margin-top: 1rem; }
.f2p-go { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.f2p-stores small { color: var(--muted); font-weight: 600; }
.f2p-stores { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.f2p-stores .ct[aria-pressed="true"] { color: var(--sticker); border-bottom: 3px solid var(--sticker); }
@media (max-width: 760px) {
  .pickers { margin-left: 0; width: 100%; }
  .pickers { position: relative; }
  .gpick { position: static; }
  .gpop { left: 0; right: 0; width: auto !important; }
}

/* v12: Featured & recommended about 20% shorter */
.slide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.slide .main .cover { aspect-ratio: 16 / 7.6; }
.slide h3 { font-size: 1.2rem; -webkit-line-clamp: 1; }
.slide .pbox { padding: 6px 10px; }
.slide .blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.prices .pct { color: var(--go); font-weight: 700; font-size: .9rem; }
.prices td s { color: var(--muted); }

/* ---------- deal verdict (cards + game page) */
.verdict { display: inline-block; margin: .35rem 0 0; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.v-great { background: rgba(60, 199, 154, .18); color: #4fe0b0; }
.v-good  { background: rgba(102, 192, 244, .16); color: #7cc8f5; }
.v-avg   { background: rgba(214, 181, 108, .16); color: #e0c17a; }
.v-small { background: rgba(158, 171, 188, .14); color: var(--muted); }
.card .verdict + .labels { margin-top: .3rem; }
.deal-check { margin: 1rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.deal-check h2 { margin: 0 0 .5rem; font-size: 1rem; }
.dc-verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.dc-verdict .verdict { margin: 0; font-size: .9rem; }
.dc-why { color: var(--muted); font-size: .9rem; }
.deal-check ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .93rem; }
:root[data-theme="light"] .v-great { color: #0f7a55; } :root[data-theme="light"] .v-good { color: #1a6aa8; }
:root[data-theme="light"] .v-avg { color: #8a6200; }

/* Deal check beside the price history chart */
.hist-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; margin-top: 1.5rem; }
.hist-row > .history { margin: 0; min-width: 0; }
.hist-row > .deal-check { margin: 2.6rem 0 0; }
@media (max-width: 900px) { .hist-row { grid-template-columns: 1fr; } .hist-row > .deal-check { margin: 0; } }
.game, .game > * { min-width: 0; max-width: 100%; }
.table-wrap { max-width: 100%; position: relative; }   /* keeps the hidden "Link" header inside the scroll box */

.f2p-go { align-items: center; }
.f2p-lab { color: var(--muted); font-size: .85rem; font-weight: 600; }
.f2p-tag { padding: .3rem .65rem; border-radius: 6px; font-size: .85rem; font-weight: 800; text-decoration: none;
  background: var(--go); color: var(--go-ink); }
.f2p-tag:hover { filter: brightness(1.1); }

/* brand: name with the slogan underneath */
.brand { display: inline-flex; flex-direction: column; gap: .25rem; }
.brand .slogan { font-stretch: 100%; font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: var(--sticker); }
:root[data-theme="light"] .brand .slogan { color: #9a6b00; }
.foot-legal { color: var(--muted); font-size: .85rem; }

/* ---------- logo in the header (emblem + three-colour name + slogan) */
:root { --cyan: #22c6f0; --link: #5cd3f5; }
.brand { flex-direction: row; align-items: center; gap: .6rem; }
.brand-mark { width: 44px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: .2rem; }
.wm { font-stretch: 100%; font-weight: 900; letter-spacing: -.01em; font-size: 1.75rem; line-height: 1; }
.wm1 { color: #eef2f8; } .wm2 { color: var(--cyan); } .wm3 { color: var(--sticker); }
.brand .slogan { font-size: .74rem; }
:root[data-theme="light"] { --cyan: #0a8fc0; --link: #0a6fa0; }
:root[data-theme="light"] .wm1 { color: var(--ink); }
:root[data-theme="light"] .wm3 { color: #c48f00; }
@media (max-width: 420px) { .wm { font-size: 1.45rem; } .brand-mark { width: 38px; } }

/* ---------- "Deals" menu link: a light sweep flowing through the letters, top-right to bottom-left */
.top nav a[href="/"] {
  --base: var(--ink); --beam: #ffffff; --beam2: var(--sticker);
  background-image: linear-gradient(225deg, var(--base) 0%, var(--base) 40%, var(--beam2) 46%, var(--beam) 50%, var(--beam2) 54%, var(--base) 60%, var(--base) 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: deals-shine 3.2s linear infinite;
}
.top nav a[href="/"][aria-current="page"] { text-decoration-color: var(--sticker); }
:root[data-theme="light"] .top nav a[href="/"] { --beam: #c48f00; --beam2: #f5c542; }
@keyframes deals-shine { from { background-position: 0% 100%; } to { background-position: 100% 0%; } }
@media (prefers-reduced-motion: reduce) {
  .top nav a[href="/"] { animation: none; background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
}

/* ---------- filters stay in view while scrolling */
.sticky-bar { position: sticky; top: 0; z-index: 15; background: var(--paper); margin: 0 -6px; padding: .6rem 6px 0;
  box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .6); }
.sticky-bar .chips { margin-bottom: .7rem; }
.sticky-bar .chips:empty { margin-bottom: .2rem; }
@media (min-width: 980px) {
  .browse { align-items: start; }
  .rail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 8px 10px; margin: -6px -8px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* ---------- back-to-top button */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; color: var(--sticker-ink);
  background: var(--sticker); border: 0; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 212, 59, .25);
  transition: transform .15s ease; }
.to-top:hover { transform: translateY(-3px); }
.to-top[hidden] { display: none; }
@media (max-width: 979px) { .to-top { bottom: 84px; right: 16px; } }   /* clear of the phone filter button bar */

/* genre keys in the filter rail: compact so many genres fit */
.box-genre .keys .key { padding: .45rem .35rem; font-size: .84rem; line-height: 1.15; }
.gpick[data-pick="max"] .gpop { width: 300px; }

/* ---------- filter rail adapts to the screen height (see fitRail in deals.js):
   --rg shrinks the space between boxes first; --rk slims the buttons only if still needed */
@media (min-width: 980px) {
  .rail form { gap: calc(1rem * var(--rg, 1)); }
  .rail form > * + * { margin-top: calc(.9rem * var(--rg, 1)); }
  .rail .box { padding-top: calc(1rem * var(--rk, 1)); padding-bottom: calc(1.1rem * var(--rk, 1)); }
  .rail .box legend { margin-bottom: calc(.7rem * var(--rk, 1)); }
  .rail .keys { gap: calc(.55rem * var(--rk, 1)); }
  .rail .key { padding-top: calc(.55rem * var(--rk, 1)); padding-bottom: calc(.55rem * var(--rk, 1)); }
  .rail .keys .key { padding-top: calc(.6rem * var(--rk, 1)); padding-bottom: calc(.6rem * var(--rk, 1)); }
}

/* ---------- store filter as keycap buttons: name on top, deal count underneath */
.box-store .keys .key { flex-direction: column; gap: .1rem; line-height: 1.15; }
.box-store .keys .key em { margin-left: 0; font-size: .74rem; }
.box-store .keys .key:has(input:disabled) { opacity: .5; cursor: default; }
.keys .key:has(input:checked) em { color: var(--sticker-ink); opacity: .75; }

/* one row of four short options (Price, Discount, Reviews) */
.keys-4 { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.keys-4 .key { padding-left: .15rem; padding-right: .15rem; font-size: .88rem; white-space: nowrap; }
.box legend small { color: var(--muted); font-weight: 600; font-size: .8rem; }

/* ---------- Price: inline clickable keys beside the Genre button */
.price-keys { display: inline-flex; align-items: center; gap: .35rem; }
.price-keys .pk-lab { color: var(--muted); font-weight: 700; font-size: .9rem; margin-right: .15rem; }
.price-keys .key { padding: .4rem .6rem; font-size: .9rem; border-radius: 8px; }
@media (max-width: 520px) { .price-keys .key { padding: .38rem .45rem; font-size: .85rem; } }

/* category description: one line across the full width; first-row stickers clear of the filter bar */
.results-head .rule { max-width: none; }
.results-head:has(h1.vh) { margin-bottom: .4rem; }
.results-head:has(h1.vh) .rule { margin-top: 0; }
#results { padding-top: 12px; }

/* ---------- Price: slider + custom box */
.price-range { display: inline-flex; align-items: center; gap: .55rem; }
.price-range .pk-lab { color: var(--muted); font-weight: 700; font-size: .9rem; }
.pr-slider { -webkit-appearance: none; appearance: none; width: 150px; height: 6px; border-radius: 999px; cursor: pointer; background:
  linear-gradient(90deg, var(--sticker) var(--fill, 100%), var(--line) var(--fill, 100%)); }
.pr-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sticker);
  border: 2px solid var(--sticker-ink); box-shadow: 0 0 0 3px rgba(255, 212, 59, .25); }
.pr-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--sticker); border: 2px solid var(--sticker-ink); }
.pr-val { min-width: 5.6rem; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.price-range.on .pr-val { color: var(--sticker); }
.pr-box { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .5rem; height: 2.1rem; border-radius: 8px;
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--key-top), var(--key-face)); box-shadow: 0 3px 0 var(--key-edge); }
.pr-box span { color: var(--muted); font-weight: 700; }
.pr-num { width: 4.2rem; border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: .92rem; -moz-appearance: textfield; }
.pr-num::-webkit-outer-spin-button, .pr-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-num:focus { outline: none; } .pr-box:focus-within { border-color: var(--sticker); }
.price-range.on .pr-box { border-color: rgba(255, 212, 59, .7); }
@media (max-width: 520px) { .pr-slider { width: 110px; } .pr-val { min-width: 4.8rem; } }
.pr-slider { width: 130px; }
.pr-num::placeholder { color: var(--muted); opacity: 1; }
.price-range { gap: .4rem; }
.pr-slider { width: 104px; }
.pr-num { width: 3.3rem; }
.pr-box { padding: 0 .4rem; }

/* ---------- daily drop: door, streak, share, why today */
.today-drop { position: relative; }
.drop-door { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: 14px; overflow: hidden; }
.drop-door .door-l, .drop-door .door-r { position: absolute; top: 0; bottom: 0; width: 50%;
  background: repeating-linear-gradient(135deg, #1a2740 0 14px, #16223a 14px 28px); border: 2px solid var(--sticker);
  transition: transform .75s cubic-bezier(.7, 0, .3, 1); }
.drop-door .door-l { left: 0; border-right-width: 1px; border-radius: 14px 0 0 14px; }
.drop-door .door-r { right: 0; border-left-width: 1px; border-radius: 0 14px 14px 0; }
.drop-door.opening .door-l { transform: translateX(-102%); }
.drop-door.opening .door-r { transform: translateX(102%); }
.drop-door.opening .door-open { opacity: 0; }
.door-open { position: relative; z-index: 2; padding: .9rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer; font-weight: 900;
  font-size: 1.1rem; letter-spacing: .02em; background: var(--sticker); color: var(--sticker-ink); transition: opacity .2s;
  box-shadow: 0 0 0 4px rgba(255, 212, 59, .25), 0 0 40px rgba(255, 212, 59, .5); animation: door-pulse 1.8s ease-in-out infinite; }
@keyframes door-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 212, 59, .15), 0 0 60px rgba(255, 212, 59, .7); } }
.drop-extras { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .4rem 0 0; }
.share-btn { padding: .45rem .9rem; border-radius: 8px; cursor: pointer; font-weight: 700; color: var(--ink);
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--key-top), var(--key-face)); box-shadow: 0 3px 0 var(--key-edge); }
.share-btn:hover { border-color: var(--sticker); }
.streak { color: var(--sticker); font-weight: 700; font-size: .9rem; }
.drop-similar { max-width: 1100px; margin: 2rem auto 0; }
.drop-similar h3 { margin: 0 0 1.3rem; font-size: 1.1rem; }   /* room above the -90% stickers on the cards */
.daily:has(.today-drop.sealed) .drop-similar { visibility: hidden; }   /* no spoilers before the door opens */
.drop-title { text-decoration: underline; text-decoration-color: rgba(255, 212, 59, .45); text-decoration-thickness: 2px;
  text-underline-offset: 5px; transition: color .15s, text-decoration-color .15s; }
.today-drop h2 a.drop-title { text-decoration: underline; text-decoration-color: rgba(255, 212, 59, .45); }
.today-drop h2 a.drop-title:hover { color: var(--sticker); text-decoration-color: var(--sticker); }
.drop-title .go { display: inline-block; margin-left: .35rem; color: var(--sticker); transition: transform .15s; }
.drop-title:hover .go { transform: translateX(4px); }
.drop-note { margin: 0; font-style: italic; color: var(--muted); }
.verdict.grab { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.today-drop .door-info > .verdict { margin: 0; }
.drop-low { margin: .2rem 0 0; font-weight: 700; color: var(--ink); font-size: .95rem; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (prefers-reduced-motion: reduce) { .door-open { animation: none; } .drop-door .door-l, .drop-door .door-r { transition: none; } }
.drop-door[hidden] { display: none; }

/* v46: compact drop, share button top-right */
.today-drop .share-btn { position: absolute; top: 10px; right: 12px; z-index: 1; padding: .35rem .75rem; font-size: .85rem; }
.today-drop .door-info { padding: 1.4rem 1.3rem .9rem; gap: .3rem; }
.today-drop .door-info .k { padding-right: 5.5rem; }
.today-drop h2 { font-size: 1.5rem; } .today-drop .price strong { font-size: 1.5rem; }
.today-drop .countdown { margin-top: .15rem; } .today-drop .drop-extras { margin-top: 0; } .today-drop .drop-extras:empty { display: none; }
.today-drop .door-info .buy { padding-top: .5rem; padding-bottom: .5rem; }
@media (max-width: 800px) { .today-drop .door-info { padding-top: .9rem; } .today-drop .door-info .k { padding-right: 0; } }
@media (max-width: 900px) { .drop-low { font-size: .82rem; } }

/* v49: blurred until clicked, then thrown at you */
.drop-door .door-l, .drop-door .door-r { display: none; }
.drop-door { background: rgba(8, 14, 24, .25); }
.today-drop.sealed .door-art, .today-drop.sealed .door-info { filter: blur(16px) saturate(.8); pointer-events: none; user-select: none; }
/* The boomerang flight itself is animated in daily.js (a smooth curve sampled every few
   milliseconds). While it flies, the heavy glow and shadows are switched off so the browser only
   moves one layer, which keeps it smooth. */
.today-drop.revealing { z-index: 20; will-change: transform; box-shadow: none; }
.today-drop.revealing::before { opacity: 0; transition: none; }
.today-drop::before { transition: opacity .5s; }
.today-drop.revealing .door-art { overflow: visible; }
.today-drop.impact { animation: drop-shake .35s linear; }
@keyframes drop-shake { 20% { transform: translate(-7px, 4px); } 40% { transform: translate(6px, -5px); }
  60% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -2px); } }
.today-drop.fx-wait-slap .door-art .sticker { opacity: 0; }
.today-drop.fx-slap .door-art .sticker { animation: drop-slap .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes drop-slap {
  0%   { opacity: 0; transform: scale(4) rotate(-35deg); }
  60%  { opacity: 1; transform: scale(.82) rotate(8deg); }
  80%  { transform: scale(1.08) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
.today-drop.fx-wait-text .door-info > * { opacity: 0; }
.today-drop.fx-text .door-info > * { animation: drop-rise .4s ease-out both; }
.today-drop.fx-text .door-info > :nth-child(1) { animation-delay: 0.0s; }
.today-drop.fx-text .door-info > :nth-child(2) { animation-delay: 0.1s; }
.today-drop.fx-text .door-info > :nth-child(3) { animation-delay: 0.2s; }
.today-drop.fx-text .door-info > :nth-child(4) { animation-delay: 0.3s; }
.today-drop.fx-text .door-info > :nth-child(5) { animation-delay: 0.4s; }
.today-drop.fx-text .door-info > :nth-child(6) { animation-delay: 0.5s; }
.today-drop.fx-text .door-info > :nth-child(n+7) { animation-delay: 0.6s; }
@keyframes drop-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.today-drop.fx-text .door-info .share-btn { animation-name: drop-fade; }
@keyframes drop-fade { from { opacity: 0; } to { opacity: 1; } }
html:has(.today-drop.revealing), body:has(.today-drop.revealing) { overflow-x: clip; }

/* v54: ice reveals ("melt" and "fire"); pick one in daily.js (REVEAL) or test with ?anim= */
.today-drop.sealed.frozen .door-art, .today-drop.sealed.frozen .door-info { filter: none; }
.ice { position: absolute; inset: 0; z-index: 4; border-radius: 14px; pointer-events: none; overflow: hidden;
  -webkit-backdrop-filter: blur(12px) saturate(.6) brightness(1.15); backdrop-filter: blur(12px) saturate(.6) brightness(1.15);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 200%22 preserveAspectRatio=%22none%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.55%22 stroke-width=%22.7%22%3E%3Cpath d=%22M0 30 L40 44 L70 38 L120 60%22/%3E%3Cpath d=%22M400 20 L360 40 L330 34 L300 70 L260 76%22/%3E%3Cpath d=%22M0 170 L50 150 L90 158 L130 130%22/%3E%3Cpath d=%22M400 180 L350 160 L320 168 L280 140%22/%3E%3Cpath d=%22M200 0 L190 30 L205 50%22/%3E%3Cpath d=%22M40 44 L35 70%22/%3E%3Cpath d=%22M360 40 L372 70%22/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .45 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(225, 244, 255, .55), rgba(140, 195, 240, .32) 45%, rgba(215, 238, 255, .5));
  box-shadow: inset 0 0 50px rgba(255, 255, 255, .55), inset 0 0 0 2px rgba(205, 238, 255, .85), inset 0 -18px 30px rgba(170, 220, 255, .35);
  transition: box-shadow .6s, background-color .6s; }
.frozen .drop-door { background: none; }
.ice.melting { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 200%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 200 L0 100 L0.0 99.1 C0.0 111.3 2.1 111.3 2.1 99.1 L6.2 99.3 C6.2 110.4 8.2 110.4 8.2 99.3 L12.0 97.8 C12.0 108.2 15.0 108.2 15.0 97.8 L17.9 98.6 L23.2 100.4 C23.2 115.2 25.3 115.2 25.3 100.4 L30.4 98.9 C30.4 106.9 32.7 106.9 32.7 98.9 L37.7 98.4 L42.1 99.4 L44.8 97.8 C44.8 110.2 47.3 110.2 47.3 97.8 L50.8 100.4 L54.2 101.5 L57.4 100.4 L62.5 101.1 C62.5 116.0 64.7 116.0 64.7 101.1 L68.4 101.3 C68.4 112.2 70.5 112.2 70.5 101.3 L75.0 101.3 L80.1 99.1 L84.4 100.4 L89.4 102.2 L93.9 97.8 L100 100 L100 200 Z%22 fill=%22%23fff%22/%3E%3C/svg%3E") 0 100%/100% 200% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 200%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 200 L0 100 L0.0 99.1 C0.0 111.3 2.1 111.3 2.1 99.1 L6.2 99.3 C6.2 110.4 8.2 110.4 8.2 99.3 L12.0 97.8 C12.0 108.2 15.0 108.2 15.0 97.8 L17.9 98.6 L23.2 100.4 C23.2 115.2 25.3 115.2 25.3 100.4 L30.4 98.9 C30.4 106.9 32.7 106.9 32.7 98.9 L37.7 98.4 L42.1 99.4 L44.8 97.8 C44.8 110.2 47.3 110.2 47.3 97.8 L50.8 100.4 L54.2 101.5 L57.4 100.4 L62.5 101.1 C62.5 116.0 64.7 116.0 64.7 101.1 L68.4 101.3 C68.4 112.2 70.5 112.2 70.5 101.3 L75.0 101.3 L80.1 99.1 L84.4 100.4 L89.4 102.2 L93.9 97.8 L100 100 L100 200 Z%22 fill=%22%23fff%22/%3E%3C/svg%3E") 0 100%/100% 200% no-repeat; animation: ice-melt 1.7s cubic-bezier(.45, .1, .7, .9) forwards; }
@keyframes ice-melt { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 -4%; mask-position: 0 -4%; } }
.ice-drop { position: absolute; z-index: 6; width: 7px; height: 11px; margin-left: -3px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: radial-gradient(circle at 35% 35%, #fff, #9fdcff 45%, rgba(80, 170, 240, .7));
  box-shadow: 0 0 6px rgba(160, 220, 255, .8); }
.ice.heating { box-shadow: inset 0 0 60px rgba(255, 150, 40, .55), inset 0 0 0 2px rgba(255, 200, 120, .9), inset 0 -40px 60px rgba(255, 110, 20, .45); }
.ice-cracks { position: absolute; inset: 0; width: 100%; height: 100%; }
.ice-cracks path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 2px #fff); animation: crack-draw .45s ease-out forwards; }
@keyframes crack-draw { to { stroke-dashoffset: 0; } }
.ice-shard { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 14px; will-change: transform, opacity;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeColorMatrix values=%220 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .45 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"), linear-gradient(160deg, rgba(225, 244, 255, .85), rgba(150, 200, 240, .7) 45%, rgba(215, 238, 255, .8)); }
.flames { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: 7; pointer-events: none; transform: translateY(40%); opacity: 0;
  transition: transform .5s ease-out, opacity .35s; clip-path: inset(-300% 0 0 0 round 0 0 14px 14px);
  background: linear-gradient(to top, rgba(255, 110, 20, .55), rgba(255, 140, 30, .18) 35%, transparent 70%); }
.flames.up { transform: none; opacity: 1; }
.flames.out { opacity: 0; transform: translateY(25%); transition: transform .6s ease-in, opacity .6s; }
.flames span { position: absolute; bottom: -8%; height: 80%; aspect-ratio: .68; transform-origin: 50% 100%;
  animation: flame-flicker .45s ease-in-out infinite alternate; }
.flames span::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; aspect-ratio: 1; border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg); filter: blur(3px);
  background: radial-gradient(circle at 50% 50%, #fff7c2 0, #ffd84a 20%, #ff9a1c 42%, #ff5410 62%, rgba(200, 30, 0, .6) 78%, rgba(200, 30, 0, 0) 92%); }
.flames span:nth-child(even)::before { background: radial-gradient(circle at 50% 50%, #ffe98a 0, #ffb52e 26%, #ff6a12 52%, rgba(210, 40, 0, .65) 74%, rgba(210, 40, 0, 0) 90%); }
@keyframes flame-flicker { 0% { transform: scale(1, 1) skewX(-3deg); } 50% { transform: scale(.92, 1.14) skewX(4deg); }
  100% { transform: scale(1.05, .9) skewX(-2deg); } }
@media (prefers-reduced-motion: reduce) { .flames span { animation: none; } }
.flames.low { height: 42%; }
.flames.low.out { transition: transform .9s ease-in, opacity .9s; }

/* v59: cover motions (reveals.js COVERS) */
.rv-layer { position: absolute; inset: 0; z-index: 4; border-radius: 14px; }
.rv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; }
.rv-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; font-weight: 900; font-size: 1.15rem;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); white-space: nowrap; }
.rv-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 70; }
.today-drop.sealed.frozen .door-art, .today-drop.sealed.frozen .door-info { filter: none; }
/* ---------- gift wrap */
.gw-strip { position: absolute; top: 0; bottom: 0; border-radius: 0;
  background: radial-gradient(circle, #ffd76a 0 3px, transparent 4px) 0 0/30px 30px, repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 7px, transparent 7px 24px), linear-gradient(#d4142f, #9a0b20); }
.gw-strip:first-child { border-radius: 14px 0 0 14px; } .gw-strip:nth-child(5) { border-radius: 0 14px 14px 0; }
.gw-rib-v, .gw-rib-h { position: absolute; background: linear-gradient(90deg, #f9e08a, #dca733 50%, #f9e08a); box-shadow: 0 0 0 1px rgba(120, 80, 0, .4); }
.gw-rib-v { left: calc(50% - 18px); width: 36px; top: 0; bottom: 0; } .gw-rib-h { top: calc(50% - 18px); height: 36px; left: 0; right: 0; background: linear-gradient(#f9e08a, #dca733 50%, #f9e08a); }
.gw-bow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 96px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }


/* ---------- loot box */
.lb { position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at 50% 55%, #241a44, #07060d 75%); display: grid; place-items: center; overflow: hidden; }
.lb-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--rar) 0, transparent 65%); opacity: .45; }
.chest { position: relative; width: 170px; height: 120px; }
.chest-body { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(90deg, transparent 18%, var(--rar) 18% 24%, transparent 24% 76%, var(--rar) 76% 82%, transparent 82%), linear-gradient(#7a4a1f, #4e2d10);
  box-shadow: 0 0 30px var(--rar), inset 0 0 0 4px rgba(0, 0, 0, .25); }
.chest-lid { position: absolute; left: -4px; right: -4px; top: 0; height: 42%; border-radius: 40px 40px 6px 6px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, transparent 18%, var(--rar) 18% 24%, transparent 24% 76%, var(--rar) 76% 82%, transparent 82%), linear-gradient(#93592a, #5d3614); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .25); }
.chest-lock { position: absolute; left: 50%; top: 34%; width: 26px; height: 30px; margin-left: -13px; border-radius: 5px; background: var(--rar); box-shadow: 0 0 14px var(--rar); }
.lb-flash { position: absolute; inset: -40px; background: #fff; opacity: 0; z-index: 70; pointer-events: none; }
.lb-rays { position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; z-index: 65; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(var(--rar) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000, transparent 60%); mask: radial-gradient(circle, #000, transparent 60%); }
.rv-word { position: absolute; left: 50%; top: 50%; z-index: 75; transform: translate(-50%, -50%); pointer-events: none; font-weight: 900; font-size: 4rem; letter-spacing: .06em;
  color: #fff; -webkit-text-stroke: 2px rgba(0, 0, 0, .35); text-shadow: 0 0 18px var(--rar, #ffd43b), 0 0 40px var(--rar, #ffd43b); white-space: nowrap; }


/* ---------- glitch */
.rv-static { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; image-rendering: pixelated; opacity: .88; }
.rv-scan { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px); }


/* ---------- slot machine */
.slot-m { position: absolute; inset: 0; border-radius: 14px; padding: 46px 22px 22px; display: flex; gap: 14px;
  background: linear-gradient(#3a0f4a, #1a0722); box-shadow: inset 0 0 0 4px #ffd43b, inset 0 0 0 7px #8a5a00; }
.slot-title { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-weight: 900; letter-spacing: .25em; color: #ffd43b; text-shadow: 0 0 10px #ff9a1c; }
.reel { position: relative; flex: 1; overflow: hidden; border-radius: 10px; background: linear-gradient(#fff, #e9e3f2 50%, #fff); box-shadow: inset 0 10px 14px rgba(0, 0, 0, .35), inset 0 -10px 14px rgba(0, 0, 0, .35); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; }
.tile { display: grid; place-items: center; font-size: 56px; font-weight: 900; color: #3a0f4a; text-align: center; line-height: 1.05; }
.tile.final { font-size: 34px; color: #b0108a; }
.payline { position: absolute; left: 14px; right: 14px; top: calc(50% + 12px); height: 3px; background: rgba(255, 60, 60, .7); box-shadow: 0 0 8px red; z-index: 2; }
.rv-coin { position: absolute; z-index: 80; font-size: 30px; pointer-events: none; }


/* ---------- curtain */
.cur { position: absolute; top: 0; bottom: 0; width: 51%; box-shadow: 0 0 20px rgba(0, 0, 0, .6);
  background: linear-gradient(rgba(0, 0, 0, .35), transparent 20%, transparent 80%, rgba(0, 0, 0, .45)), repeating-linear-gradient(90deg, #6c0b15 0 10px, #b5182c 22px, #7d0d19 36px, #6c0b15 44px); }
.cur.l { left: 0; border-radius: 14px 0 0 14px; transform-origin: 0 50%; } .cur.r { right: 0; border-radius: 0 14px 14px 0; transform-origin: 100% 50%; }
.cur-top { position: absolute; left: -2px; right: -2px; top: -2px; height: 40px; z-index: 2; border-radius: 14px 14px 0 0; background: linear-gradient(#a3132a, #6c0b15);
  box-shadow: 0 6px 0 -2px #e2b13c, 0 10px 14px rgba(0, 0, 0, .45); }
.spot { position: absolute; inset: -40px; z-index: 55; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 48% 62% at 50% 52%, rgba(255, 245, 210, .16), transparent 55%, rgba(0, 0, 0, .75) 80%); }


/* ---------- glass */
.glass { position: absolute; inset: 0; border-radius: 14px; -webkit-backdrop-filter: blur(9px) brightness(.85); backdrop-filter: blur(9px) brightness(.85);
  background: linear-gradient(120deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); cursor: crosshair; }
.gshard { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(120deg, rgba(210, 235, 255, .55), rgba(170, 200, 230, .38)); }
.gcracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 31; pointer-events: none; }
.gcracks path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: crack-draw .25s ease-out forwards; filter: drop-shadow(0 0 2px #fff); }


/* ---------- magic */
.mg { position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at 50% 50%, #2a1450, #07040e 75%); }

/* v60: sign in */
.account { position: relative; align-self: center; }
.signin-btn, .account-btn { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .95rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); border: 1px solid var(--line); background: var(--key-face); }
.signin-btn { border-color: var(--sticker); }
.signin-btn:hover, .account-btn:hover { background: var(--sticker); color: var(--sticker-ink); }
.account-btn { padding: 0 .8rem 0 3px; }
.account-pic { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.account-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 290px; padding: .9rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); display: grid; gap: .55rem; }
.account-panel p { margin: 0; }
.account-title { font-weight: 800; }
.account-small { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.account-google { min-height: 44px; }
.account-out { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--accent, #22c6f0); }   /* same look as the "Settings" link above it */
.account-out:hover { text-decoration: underline; }
.account-out:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .account-panel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; } }

/* v61: price alerts (wishlist page panel + opt-in toast) */
.account-link { color: var(--accent, #22c6f0); font-weight: 700; text-decoration: none; }
.account-link:hover { text-decoration: underline; }
.alerts-panel { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ap-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.ap-head h2 { margin: 0; font-size: 1.15rem; flex-basis: 100%; }
.ap-head p { margin: 0; flex: 1 1 320px; color: var(--muted); }
.ap-on { color: #3ddc97; }
.ap-btn { padding: .5rem 1rem; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; background: var(--sticker); color: var(--sticker-ink); }
.ap-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
.ap-btn.ghost:hover { border-color: var(--sticker); }
.ap-sub, .ap-empty { margin: .9rem 0 .4rem; color: var(--muted); font-size: .9rem; }
.ap-sender { font-size: .8rem; overflow-wrap: anywhere; }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ap-item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem; border-radius: 10px; background: var(--key-face); }
.ap-item.muted .ap-game { opacity: .55; }
.ap-game { display: flex; align-items: center; gap: .7rem; flex: 1 1 280px; min-width: 0; color: var(--ink); text-decoration: none; }
.ap-game img { width: 92px; height: 43px; object-fit: cover; border-radius: 6px; flex: none; }
.ap-info { display: grid; min-width: 0; }
.ap-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-status { font-size: .85rem; color: var(--muted); } .ap-status.sale { color: #3ddc97; font-weight: 700; }
.ap-low { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.ap-low.at b { display: block; color: #4fe0b0; font-weight: 800; }
:root[data-theme="light"] .ap-low.at b { color: #0f7a55; }
/* Sale-day planner: summary above the wishlist games */
.ap-planner { margin: 1rem 0 .2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid #1fb57a; border-radius: 10px; background: var(--paper); }
.ap-planner h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.ap-planner p { margin: 0 0 .3rem; overflow-wrap: anywhere; }
.ap-planner .ap-sub { margin: .4rem 0 0; font-size: .85rem; }
.ap-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.ap-switch { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; cursor: pointer; }
.ap-switch input { width: 18px; height: 18px; accent-color: var(--sticker); }
.ap-select, .ap-cap input { font: inherit; font-size: .88rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .25rem .4rem; }
.ap-cap { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--muted); }
.ap-cap input { width: 5.5em; }
.ap-remove, .ap-delete { background: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem; color: var(--muted); text-decoration: underline; padding: 0; }
.ap-remove:hover, .ap-delete:hover { color: var(--ink); }
.ap-delete { margin-top: .9rem; }
.alert-toast { position: fixed; z-index: 90; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); padding: .9rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--sticker); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); display: grid; gap: .5rem; }
.alert-toast p { margin: 0; }
.alert-toast-row { display: flex; gap: .6rem; }
.alert-yes { padding: .5rem 1rem; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; background: var(--sticker); color: var(--sticker-ink); }
.alert-no { padding: .5rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* v64: "added to wishlist" window */
.added-win { padding: .9rem 1rem 3.6rem; }
.added-win .account-title { padding-right: 1.6rem; }
.aw-close { position: absolute; top: .35rem; right: .45rem; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.aw-close:hover { color: var(--ink); background: var(--key-face); }
.aw-list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .4rem; max-height: 46vh; overflow: auto; }
.aw-item { display: flex; align-items: center; gap: .6rem; padding: .35rem; border-radius: 8px; background: var(--key-face); }
.aw-item img { width: 64px; height: 30px; object-fit: cover; border-radius: 4px; flex: none; }
.aw-title { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-switch { flex: none; min-width: 72px; padding: .3rem .6rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800;
  border: 1px solid var(--line); background: transparent; color: var(--muted); }
.aw-switch.on { background: var(--sticker); border-color: var(--sticker); color: var(--sticker-ink); }
.aw-cart { position: absolute; right: .8rem; bottom: .7rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sticker); color: var(--sticker-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); text-decoration: none; }
.aw-cart:hover { transform: scale(1.06); }
.aw-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: #e8364e; color: #fff; font-size: .72rem; font-weight: 800; }

/* v66: site notice bar (config site.notice) */
.notice-bar { padding: .45rem 16px; text-align: center; font-size: .88rem; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(90deg, #ffd43b, #ffb020); color: #1b1300; }

/* v67: game page tags and review % */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .4rem; }
.tag { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 700; text-decoration: none;
  color: var(--ink); background: var(--key-face); border: 1px solid var(--line); }
a.tag:hover, a.tag:focus-visible { border-color: var(--sticker); background: var(--sticker); color: var(--sticker-ink); }
.tag-feat { color: var(--muted); background: transparent; }
/* Early Access: amber pill on cards and game pages */
.ea-tag, .tag-ea { color: #f0b45a; background: rgba(240, 160, 60, .16); border-color: rgba(240, 160, 60, .4); }
.ea-tag { display: inline-block; margin: 0; padding: .1rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.card .meta .ea-tag { padding: .1rem .35rem; }
:root[data-theme="light"] .ea-tag, :root[data-theme="light"] .tag-ea { color: #8a5300; background: rgba(214, 140, 0, .15); border-color: rgba(214, 140, 0, .45); }
.rating .rp { font-weight: 800; color: var(--ink); }

/* v68: wishlist note (fades out) + similar games */
.wish-toast { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translate(-50%, 16px); opacity: 0; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--sticker); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-weight: 700; font-size: .92rem;
  transition: opacity .35s, transform .35s; pointer-events: none; }
.wish-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.wish-toast-link { color: var(--sticker); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wish-toast { transition: none; } }
.similar { margin-top: 2rem; }
.similar-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.similar-head h2 { margin: 0; }
.similar-head .see-all { color: var(--sticker); font-weight: 700; white-space: nowrap; text-decoration: none; }
.similar-head .see-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.slider { position: relative; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 3 * 2rem) / 4)); gap: 2rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 10px 14px; margin: 0 -10px; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > .card { scroll-snap-align: start; scroll-margin-left: 10px; }
.slide-btn { position: absolute; z-index: 3; top: 30%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.slide-btn:hover { border-color: var(--sticker); color: var(--sticker); }
.slide-btn.prev { left: -14px; } .slide-btn.next { right: -14px; }
.slide-btn[hidden] { display: none; }
@media (max-width: 700px) { .slider-track { grid-auto-columns: 68%; } .slide-btn { display: none; } }

/* v69: the whole game card is clickable (the title link stretches over it; the heart stays on top) */
.card { position: relative; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.card .wish { z-index: 3; }
.card h3 a:focus-visible { outline: none; }
.card h3 a:focus-visible::after { outline: 2px solid var(--sticker); outline-offset: 2px; }

/* v70: searching hides the carousel and category tiles so results show straight away */
.browse.searching .feat, .browse.searching .coll { display: none; }   /* results right under the header search */
.browse.searching .empty-note { padding-block: .4rem 0; }
.browse.searching .other-games { margin-top: .8rem; }

/* v71: on deal pages the search bar sits in the Popular / Best deals / Top rated row */
.top.no-search nav { margin-left: auto; }
.coll-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; border-bottom: 2px solid var(--line); margin-bottom: .9rem; }
.coll-row .coll-tabs { border-bottom: 0; margin-bottom: 0; align-self: stretch; align-items: flex-end; }
.coll-row .search { flex: 0 1 380px; max-width: 380px; margin: 0 0 .4rem auto; order: 0; }
@media (max-width: 760px) { .coll-row .search { flex-basis: 100%; max-width: none; margin: 0 0 .6rem; order: -1; } }

/* v72: "Buy now or wait?" answer at the top of the Deal check box */
.dc-answer { margin: 0; padding: .1rem 0 .1rem .7rem; border-left: 4px solid var(--muted); line-height: 1.45; font-size: .95rem; }
.adv-buy { border-left-color: #1fb57a; } .adv-buy b { color: #2fd18f; }
.adv-ok { border-left-color: var(--sticker); } .adv-ok b { color: var(--sticker); }
.adv-wait { border-left-color: #ff8a1a; } .adv-wait b { color: #ff9d40; }
:root[data-theme="light"] .adv-buy b { color: #0e7a50; } :root[data-theme="light"] .adv-ok b { color: #8a6500; } :root[data-theme="light"] .adv-wait b { color: #b45300; }

/* v73: Deal check sits full width above the price history chart */
.game > .deal-check { margin: 1.6rem 0 0; }
.game > .deal-check h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.game > .deal-check + .history { margin-top: 1.4rem; }

/* v74: games that match a search but aren't on sale: real cards under a clear heading */
.other-games { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 2px solid var(--line); }
.browse.searching .other-games { margin-top: .6rem; }
.og-head { margin-bottom: 1.2rem; }
.other-games .og-head h2 { font-size: 1.35rem; margin: 0 0 .25rem; color: var(--ink); }
.og-sub { margin: 0; color: var(--muted); }
.og-heart { color: var(--sticker); }
.sticker-off { background: #3a4b63; color: #e6edf6; }
:root[data-theme="light"] .sticker-off { background: #5b6b80; color: #fff; }
.card-off .price strong { color: var(--ink); }

/* ---------- v75: light theme with more depth: tinted background with soft brand glows, cards and
   panels on raised off-white surfaces, stronger lines and readable green "Save" tags */
:root[data-theme="light"] {
  --paper: #e2e8f0; --surface: #f9fbfd; --ink: #142033; --muted: #4c5c72; --line: #c3cddb;
  --key-edge: #b4c0d0; --key-top: #ffffff; --key-face: #eef2f7;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(255, 212, 59, .22), transparent 62%),
    radial-gradient(900px 520px at -6% 4%, rgba(10, 143, 192, .13), transparent 60%),
    linear-gradient(180deg, #dbe2ec 0, #e6ebf2 700px, #e2e8f0 100%);
  background-attachment: fixed;
}
/* every game card sits on its own raised surface (in dark it only lights up on hover) */
:root[data-theme="light"] .card { background: var(--surface); border-color: #d3dbe6;
  box-shadow: 0 1px 2px rgba(20, 32, 51, .06), 0 10px 22px -16px rgba(20, 32, 51, .45); }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .card:focus-within { background: #ffffff; border-color: rgba(214, 160, 0, .75);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, .45), 0 18px 32px -18px rgba(20, 32, 51, .55); }
:root[data-theme="light"] .box, :root[data-theme="light"] .deal-check, :root[data-theme="light"] .advice,
:root[data-theme="light"] .hist-box, :root[data-theme="light"] .qk {
  box-shadow: 0 1px 2px rgba(20, 32, 51, .05), 0 8px 20px -16px rgba(20, 32, 51, .4); }
:root[data-theme="light"] .save { color: #0b6b47; background: #cdeedd; }
:root[data-theme="light"] .v-great { background: #cdeedd; } :root[data-theme="light"] .v-good { background: #d6e8f7; }
:root[data-theme="light"] .v-avg { background: #f3e6c4; } :root[data-theme="light"] .v-small { background: #e1e6ee; }
:root[data-theme="light"] .top, :root[data-theme="light"] .foot { border-color: #142033; }
:root[data-theme="light"] .cover-blank { background: linear-gradient(135deg, #2a3a55, #1b2638); }
.grid { column-gap: 2rem; }                 /* same spacing in both themes: switching theme never moves anything */
.slider-track { gap: 2rem; }
:root[data-theme="light"] .pct { color: #0b7a50; }
.table-wrap { padding: 0 .4rem; }
:root[data-theme="light"] .table-wrap { background: var(--surface); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 32, 51, .05), 0 8px 20px -16px rgba(20, 32, 51, .4); }

/* ---------- v76: richer light theme: navy header and footer bands frame the page (same colours as the
   dark theme, so the brand reads the same), a faint dot texture and stronger brand glows, frosted sticky bar */
:root[data-theme="light"] .top, :root[data-theme="light"] .foot {
  --paper: #121a26; --surface: #1a2433; --ink: #e6ebf2; --muted: #9eabbc; --line: #2d3b50;
  --key-edge: #0b1018; --key-top: #2a3546; --key-face: #222d3d; --cyan: #22c6f0; --link: #5cd3f5; --focus: #ffd43b;
  color-scheme: dark; color: var(--ink);
  /* full-width band painted outside the box without clipping anything (dropdowns stay visible) */
  border-image: linear-gradient(#142033 0 0) fill 0 / / 0 100vmax;
}
:root[data-theme="light"] .top { border-bottom-color: transparent; margin-bottom: 1.4rem; }
:root[data-theme="light"] .foot { border-top-color: transparent; }
:root[data-theme="light"] .top .wm1 { color: #eef2f8; }
:root[data-theme="light"] .top .wm3 { color: var(--sticker); }
:root[data-theme="light"] .top .brand .slogan { color: var(--sticker); }
:root[data-theme="light"] .top nav a[href="/daily/"] { color: #ffe89b; }
:root[data-theme="light"] .top nav a[href="/daily/"]::before { color: var(--sticker); }
:root[data-theme="light"] body {
  background:
    radial-gradient(rgba(20, 32, 51, .07) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(1100px 560px at 90% 0%, rgba(255, 212, 59, .30), transparent 62%),
    radial-gradient(950px 560px at -8% 10%, rgba(10, 143, 192, .18), transparent 60%),
    linear-gradient(180deg, #d8e0eb 0, #e6ebf2 760px, #e2e8f0 100%);
  background-attachment: fixed;
}
:root[data-theme="light"] .card { background: linear-gradient(180deg, #ffffff 0, #f3f6fa 100%); }
:root[data-theme="light"] .sticky-bar { background: rgba(226, 232, 240, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 16px -14px rgba(20, 32, 51, .45); }

/* ---------- v77: dark theme polish: deeper navy header/footer bands frame the page; very faint brand glows */
:root:not([data-theme="light"]) .top, :root:not([data-theme="light"]) .foot {
  border-image: linear-gradient(#0c131d 0 0) fill 0 / / 0 100vmax; }
:root:not([data-theme="light"]) .top { border-bottom-color: transparent; margin-bottom: 1.4rem; }
:root:not([data-theme="light"]) .foot { border-top-color: transparent; }
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(1100px 560px at 90% 0%, rgba(255, 212, 59, .07), transparent 62%),
    radial-gradient(950px 560px at -8% 10%, rgba(34, 198, 240, .07), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

/* v78: carousel button sits at the left under the price when it wraps */
.slide .pbox .buy { margin-left: 0; }
/* v78: light theme: the yellow outlines (selected filter, hovered box) in a deeper gold that shows on white */
:root[data-theme="light"] .key:has(input:checked) { border-color: #d29b00;
  box-shadow: 0 1px 0 var(--key-edge), 0 0 0 2px #e0a800, 0 0 14px 1px rgba(224, 168, 0, .35); }
:root[data-theme="light"] .box:hover, :root[data-theme="light"] .box:focus-within { border-color: #d29b00;
  box-shadow: 0 0 0 2px rgba(224, 168, 0, .6), 0 0 26px -4px rgba(224, 168, 0, .4), 0 14px 28px -14px rgba(20, 32, 51, .45); }

/* v79: hearts: red when saved (the usual "liked" colour), clear outline when not, in both themes */
.wish[aria-pressed="true"] { color: #ff5470; }
.wish[aria-pressed="true"] svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(255, 84, 112, .55)); }
.wish:hover { color: #ff5470; }
:root[data-theme="light"] .wish { background: rgba(255, 255, 255, .92); color: #142033; box-shadow: 0 2px 6px rgba(20, 32, 51, .25); }
:root[data-theme="light"] .wish:hover, :root[data-theme="light"] .wish[aria-pressed="true"] { color: #e11d48; }
:root[data-theme="light"] .wish[aria-pressed="true"] svg { filter: drop-shadow(0 0 5px rgba(225, 29, 72, .4)); }
.og-heart { color: #ff5470; } :root[data-theme="light"] .og-heart { color: #e11d48; }
/* v79: "See all deals" link readable on the light background */
:root[data-theme="light"] .similar-head .see-all { color: #9a6b00; }

/* ---------- v80: search suggestions dropdown (suggest.js) */
.suggest { position: absolute; z-index: 80; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; }
.suggest[hidden] { display: none; }
.sg-item { display: flex; align-items: center; gap: .7rem; padding: 6px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.sg-item img, .sg-noimg { flex: 0 0 auto; width: 92px; height: 43px; object-fit: cover; border-radius: 5px; background: var(--paper); }
.sg-text { display: grid; min-width: 0; gap: 1px; }
.sg-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-price { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-price b { color: var(--ink); }
.sg-off { color: #ff7a59; font-weight: 800; }
.sg-full { color: var(--muted); }
.sg-item:hover, .sg-item.on { background: var(--paper); box-shadow: inset 0 0 0 1px var(--sticker); }
.sg-all { display: block; margin-top: 4px; padding: 8px; border-top: 1px solid var(--line); text-align: center; font-weight: 700;
  color: var(--sticker); text-decoration: none; }
.sg-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-none { margin: 0; padding: 10px; color: var(--muted); }
:root[data-theme="light"] .suggest { box-shadow: 0 18px 40px -14px rgba(20, 32, 51, .45); }
:root[data-theme="light"] .sg-all { color: #9a6b00; }
:root[data-theme="light"] .sg-off { color: #c2412a; }
:root[data-theme="light"] .sg-item:hover, :root[data-theme="light"] .sg-item.on { background: #eef2f7; box-shadow: inset 0 0 0 1px #d29b00; }
@media (max-width: 480px) { .sg-item img, .sg-noimg { width: 72px; height: 34px; } }

/* v81: Steam wishlist import (wishlist page) */
.ap-import { margin: 1rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ap-import h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ap-import .ap-sub { margin: 0 0 .6rem; }
.ap-import-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.ap-import-form input { flex: 1 1 260px; min-width: 0; padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); }
.ap-import-form input:focus { outline: none; border-color: var(--sticker); box-shadow: 0 0 0 3px rgba(255, 212, 59, .25); }
.ap-import-msg { margin: .55rem 0 0; font-weight: 600; }
.ap-import-msg:empty { display: none; }
.ap-import-msg.ok { color: #3cc79a; } .ap-import-msg.warn { color: #ff9d40; }
:root[data-theme="light"] .ap-import-msg.ok { color: #0b6b47; } :root[data-theme="light"] .ap-import-msg.warn { color: #b45300; }

.steam-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none;
  background: linear-gradient(180deg, #2a475e, #1b2838); color: #e6f1fb; border: 1px solid #3d6c8d; }
.steam-btn:hover { background: linear-gradient(180deg, #3d6c8d, #22394d); color: #fff; }
.ap-or { margin: .8rem 0 .4rem; color: var(--muted); font-size: .9rem; }

/* v82: header (and its sign-in / account panels) stays above the page content */
.top { position: relative; z-index: 40; }

/* v83: "Hide games I own" (filter rail) */
.box[hidden] { display: none; }


.ap-owned { margin: .6rem 0 0; color: var(--muted); }
.ap-link { border: 0; background: none; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; }

/* v84: "Owned" tag on games the visitor owns on Steam (bottom-left of the cover; on the game page next to the heart) */
.owned-tag { position: absolute; left: .45rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem .22rem .45rem; border-radius: 999px; background: rgba(12, 18, 28, .86); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2; pointer-events: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.owned-tag::before { content: "\2713"; color: #7ee08a; font-weight: 900; }
/* v85: "Share your wishlist" box + the shared page */
.ap-share .ap-import-form + .ap-import-form { margin-top: .5rem; }
.ap-share-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; }
.ap-share-links { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
.ap-share-links a, .ap-share-links button { font: inherit; }
.shared-head { margin: .5rem 0 1.2rem; }
.shared-head .k { margin: 0; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.shared-head h1 { margin: .2rem 0 .3rem; overflow-wrap: anywhere; }
.shared-sub { margin: 0; color: var(--muted); font-weight: 600; }
.shared-h { margin: 1.6rem 0 .9rem; font-size: 1.2rem; }
.shared-msg { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.shared-msg p { margin: 0; }
.shared-cta { margin: 2.4rem 0 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.shared-cta h2 { margin: 0; font-size: 1.1rem; flex: 1 0 100%; }
.shared-cta p { margin: 0; flex: 1 1 320px; color: var(--muted); }
/* v85: "Ends in 7 hours" on cards */
.ends { margin: .15rem 0 0; font-size: .82rem; font-weight: 700; color: var(--muted); }
.ends::before { content: "\23F1\FE0E  "; }
.ends-soon { color: #ff8a5c; }
:root[data-theme="light"] .ends-soon { color: #c2410c; }
/* v86: phones. The carousel stacks (picture on top, details below); an older desktop rule further up
   used to win over the phone rule and squeezed both columns into a phone screen. */
@media (max-width: 760px) {
  .slide { grid-template-columns: minmax(0, 1fr); }
  .slide .main .cover { aspect-ratio: 16 / 9; }
  .slide .info { padding: 10px 12px 12px; gap: 6px; }
  .slide h3 { font-size: 1.15rem; -webkit-line-clamp: 2; }
  .slide .blurb { display: none; }
  .slide .pbox { flex-wrap: wrap; }
  .slide .pbox .buy { flex: 1 0 100%; margin-left: 0; text-align: center; padding: .6rem .8rem; }
  .fbox .arr { top: calc((100vw - 32px) * .28125); width: 30px; height: 46px; font-size: 1.3rem; }
}
@media (max-width: 760px) {
  :root:not([data-theme="light"]) .top, :root[data-theme="light"] .top { margin-bottom: .5rem; }
  .browse { padding-top: .4rem; gap: 1.2rem; }
}
/* phones: the Filters / Genre / Price / Sort block scrolls away with the page instead of staying pinned
   (pinned, it covered about a third of a phone screen) */
@media (max-width: 760px) { .sticky-bar { position: static; } }
/* phones: "Prices by store" rows become small cards (store + price, then runs on + lowest tracked, then the button),
   instead of a 5-column table that runs off the screen */
@media (max-width: 600px) {
  .table-wrap:has(.prices) { overflow: visible; }
  .prices { min-width: 0; }
  .prices thead { display: none; }
  .prices tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "store price" "os low" "go go";
    gap: .5rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .prices th, .prices td { padding: 0; border: 0; }
  .prices th[scope="row"] { grid-area: store; font-size: 1.05rem; }
  .prices .pr-price { grid-area: price; text-align: right; }
  .prices .pr-price strong { display: block; font-size: 1.15rem; }
  .prices .pr-os { grid-area: os; }
  .prices .pr-low { grid-area: low; text-align: right; }
  .prices .pr-os::before, .prices .pr-low::before { content: attr(data-label); display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
  .prices .pr-go { grid-area: go; }
  .prices .pr-go .buy { display: block; text-align: center; }
}
/* "Ending soon" link in the category tab row */
.ct-ending { color: #ff8a5c; display: inline-flex; align-items: center; gap: .35rem; }
.ct-ending:hover { color: #ffa27c; }
.ct-ending.on { color: var(--ink); box-shadow: inset 0 -3px 0 #ff8a5c; }
.ct-ending .ct-n { font-size: .72rem; font-weight: 800; padding: .05rem .4rem; border-radius: 999px; background: rgba(255, 138, 92, .16); color: #ff8a5c; }
:root[data-theme="light"] .ct-ending { color: #c2410c; }
:root[data-theme="light"] .ct-ending .ct-n { background: rgba(194, 65, 12, .12); color: #c2410c; }
@media (max-width: 760px) {
  .coll-tabs { column-gap: .85rem; }
  .coll-tabs .ct { font-size: .95rem; }
  .ct-ending .ct-n { display: none; }
}
/* desktop: keep the right arrow on the picture (it used to sit on top of the price box) */
@media (min-width: 761px) { .fbox .arr.r { right: 8px; left: auto; } .slide .info { padding-right: 52px; } }   /* arrow at the very end; the text keeps clear of it */

/* v87 ---------- phones, round 2 */
.nav-tools { display: contents; }          /* desktop: theme + sign-in sit in the menu as before */
@media (max-width: 760px) {
  /* header: logo on the left, theme + sign-in on the right of the same line; menu on one line below */
  .top { position: relative; padding-block: .8rem .6rem; row-gap: .45rem; }
  .brand { max-width: calc(100% - 9.5rem); }
  .nav-tools { display: flex; align-items: center; gap: .5rem; position: absolute; top: .9rem; right: 16px; }
  .top nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; column-gap: .9rem; padding-bottom: 2px; font-size: .95rem; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; flex: 0 0 auto; }
  /* category tabs on one line (swipe sideways if the text is large) */
  .coll-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .coll-tabs::-webkit-scrollbar { display: none; }
  .coll-tabs > * { flex: 0 0 auto; white-space: nowrap; }
  /* deals bar: count, then Filters · Genre · Sort on one row, then the price slider across */
  .results-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .55rem .5rem; align-items: center; position: relative; }
  .results-bar > .inline-h { grid-column: 1 / -1; grid-row: 1; font-size: 1.15rem; }
  .results-bar > #count { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; }
  .results-bar:not(:has(.inline-h)) > #count { grid-row: 1; }
  .results-bar > .filters-toggle { grid-row: 3; grid-column: 1; }
  .results-bar .pickers { display: contents; }
  .results-bar .gpick { grid-row: 3; grid-column: 2; }
  .results-bar .sort { grid-row: 3; grid-column: 3; justify-self: end; }
  .results-bar .sort select { font-size: .95rem; max-width: 100%; }
  .results-bar .gpop { left: 0; right: 0; }
}
/* v88: narrow phones (and phones with larger text/zoom): logo shrinks so theme + sign-in never overlap it */
@media (max-width: 760px) {
  .brand { max-width: none; min-width: 0; padding-right: 8.6rem; }
  .brand-text { min-width: 0; }
  .wm { font-size: clamp(1.05rem, 6.2vw, 1.75rem); white-space: nowrap; }
  .brand .slogan { font-size: clamp(.58rem, 3vw, .74rem); white-space: nowrap; }
  .brand-mark { width: clamp(30px, 9vw, 44px); }

  .nav-tools .theme-btn { width: 32px; height: 32px; }
  .nav-tools .cur-btn { height: 32px; min-width: 40px; padding: 0 .5rem; }
  .nav-tools .signin-btn { padding: .32rem .75rem; font-size: .88rem; }
  /* deals bar: three buttons the same height, Sort fills its space with a gap before it */
  .results-bar .filters-toggle, .results-bar .gbtn, .results-bar .sort select { height: 2.6rem; box-sizing: border-box; padding-block: 0; }
  .results-bar .sort { justify-self: stretch; }
  .results-bar .sort select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .brand { padding-right: 7.8rem; }
  .nav-tools .signin-btn { padding: .3rem .6rem; font-size: .82rem; }
}
/* wishlist alert rows: "or under $" lines up under "Alert me", the price box under the discount menu */
.ap-controls { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .55rem .8rem; }
.ap-cap { display: contents; }
.ap-switch input { margin: 0; }
.ap-select, .ap-cap input { height: 2.1rem; box-sizing: border-box; padding-block: 0; }
.ap-cap input { width: 100%; min-width: 5.5em; }
.ap-remove { justify-self: start; }
.nav-wish { white-space: nowrap; }
@media (max-width: 400px) {
  .nav-my { display: none; }
  .top nav { column-gap: .75rem; font-size: .9rem; }
  .nav-wish::first-letter { text-transform: uppercase; }
}
.ap-controls > .ap-switch { grid-row: 1; grid-column: 1; }
.ap-controls > .ap-select { grid-row: 1; grid-column: 2; }
.ap-cap > span { grid-row: 2; grid-column: 1; }
.ap-cap > input { grid-row: 2; grid-column: 2; }
.ap-controls > .ap-remove { grid-row: 2; grid-column: 3; }
.ap-switch, .ap-cap > span, .ap-remove { white-space: nowrap; }
.ap-controls { grid-template-columns: auto minmax(0, 8.5rem) auto; justify-content: start; }
.ap-controls { grid-template-columns: auto auto 1fr; }
.ap-cap > input { min-width: 0; width: 100%; }
/* v89: phone header, signed in or not. The logo text is sized from the space actually left next to the
   buttons (container units), so it shrinks instead of running under them; signed in, only the picture shows. */
@media (max-width: 760px) {
  .brand { flex: 1 0 100%; box-sizing: border-box; padding-right: 7.4rem; }
  .brand-text { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
  .wm { font-size: min(1.75rem, 14.2cqi); }
  .brand .slogan { font-size: min(.74rem, 7.6cqi); }
  .nav-tools .account-btn:has(.account-pic) .account-name { display: none; }
  .nav-tools .account-btn:has(.account-pic) { padding: 2px; }
  .nav-tools .account-name { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) { .brand { padding-right: 7rem; } }
/* v90: compact account button on phones (photo or initial only), so the header buttons have a known width */
.account-initial { display: none; }
@media (max-width: 760px) {
  .nav-tools .account-name { display: none; }
  .nav-tools .account-btn { padding: 2px; width: 34px; justify-content: center; }
  .account-initial { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sticker); color: var(--sticker-ink); font-weight: 800; font-size: .9rem; }
  .brand { padding-right: 8.2rem; }
}
@media (max-width: 380px) { .brand { padding-right: 7.6rem; } }
@media (max-width: 760px) { .top:has(.account-btn) .brand { padding-right: 6rem; } }

/* weekly deals email switch, under the price alerts */
/* same layout as the alerts row above: text on the left, button on the right (wraps under on phones) */
.ap-weekly { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  margin-top: .5rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* 404 page */
.nf { padding-block: 2rem 1rem; max-width: 640px; }
.nf h1 { margin: 0 0 .5rem; }
.nf p { color: var(--muted); }
.nf-search .search { max-width: 100%; width: 100%; margin: .6rem 0 .4rem; display: block; }
.nf-search input { width: 100%; font-size: 1.05rem; }
.nf-links a { white-space: nowrap; }
.nf-top { padding-bottom: 2rem; }
.nf-top h2 { margin: 1rem 0 .8rem; }

/* phones: Filters · Genre · Type · Platform on one row (Sort and Price sit on the row below) */
@media (max-width: 760px) {
  .results-bar { grid-template-columns: repeat(4, auto) minmax(0, 1fr); gap: .55rem .35rem; }
  .results-bar .gpick[data-pick="os"] { grid-column: 2; }
  .results-bar .gpick[data-pick="genre"] { grid-column: 3; }
  .results-bar .gpick[data-pick="tag"] { grid-column: 4; }
  .results-bar .filters-toggle, .results-bar .gbtn { padding-inline: .55rem; }
  .results-bar .gbtn > span[aria-hidden="true"] { display: none; }   /* no ▾ arrows: four buttons fit */
}
@media (max-width: 380px) {
  .results-bar .filters-toggle, .results-bar .gbtn { padding-inline: .45rem; font-size: .9rem; }
}

/* price slider in the top row (deals.js puts it there when it fits) */
.results-bar > .price-range { flex: 0 0 auto; }
.results-bar > .price-range .pr-slider { width: 100px; }
.results-bar > .price-range .pk-lab { display: none; }   /* "US$ Any" next to it says what it is */
@media (min-width: 761px) and (max-width: 1100px) {
}

/* computers: the deals bar stays on one line on every page (the price slider moves to the row below if needed) */
@media (min-width: 761px) {
  .results-bar { flex-wrap: nowrap; }
  .results-bar > .inline-h { white-space: nowrap; }
  .results-bar > #count { min-width: 9.5rem; flex: 0 1 auto; }   /* may wrap to 2 lines, never squeezed to nothing */
  .results-bar .pickers { flex-wrap: nowrap; flex: 0 0 auto; }
  .results-bar .sort { flex: 0 0 auto; }
}
@media (min-width: 761px) {
  .results-bar { column-gap: .7rem; }
  .results-bar > .price-range .pr-slider { width: 90px; }
  .results-bar.tight .gbtn > span[aria-hidden="true"] { display: none; }
  .results-bar.tight .gbtn, .results-bar.tight .filters-toggle { padding-inline: .7rem; }
  .results-bar.tight > #count { font-size: .86rem; min-width: 7rem; }
  .results-bar.tighter > .inline-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Second row under the deals bar: the price slider when it doesn't fit on top (phones: Sort + Price) */
.bar-row2 { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin: 0 0 .6rem; }
.bar-row2.empty { display: none; }
.bar-row2 .pr-slider { width: 120px; }
/* Platform picker: icon + name */
.key-os span { display: inline-flex; align-items: center; gap: .45rem; }
.key-os svg { flex: 0 0 auto; opacity: .85; }
.gpick[data-pick="os"] .gpop { width: 320px; }
@media (max-width: 760px) {
  .bar-row2 { justify-content: flex-start; gap: .5rem; }
  .bar-row2 .sort { flex: 0 0 auto; margin: 0; }
  .bar-row2 .sort .gbtn { height: 2.4rem; }
  .bar-row2 .pr-box { width: 5.4rem; flex: 0 0 auto; }
  .bar-row2 .price-range { flex: 1 1 auto; min-width: 0; display: flex; }
  .bar-row2 .pr-slider { flex: 1 1 auto; width: auto; min-width: 0; }
  .bar-row2 .pk-lab { display: none; }
  .gpick[data-pick="os"] .gpop { width: auto; }
}

/* Genre / Platform / Type panels drop down under their button, centred on it (deals.js places them, keeping
   them inside the screen) */
.gpop { position: fixed; left: 0; top: 0; right: auto; transform: none; z-index: 60;
  width: min(680px, calc(100vw - 24px)) !important; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.gpop[hidden] { display: none; }
.gpop .keys-g, .gpop .keys-os { max-height: none; overflow: auto; min-height: 0; flex: 1 1 auto; }
#pick-os { width: min(360px, calc(100vw - 24px)) !important; }

/* Big-sale pages and the sale calendar */
.sale-status { display: inline-block; margin: .3rem 0 .2rem; padding: .45rem .8rem; border-radius: 8px; font-size: .95rem;
  border: 1px solid var(--line); background: var(--surface); }
.sale-status.live { border-color: #1fb57a; } .sale-status.live b { color: #1fb57a; }
.sale-status.soon b { color: var(--sticker); }
.sale-status.ended { color: var(--muted); }
.sale-tip { color: var(--muted); font-size: .9rem; margin: .4rem 0 0; }
.sale-faq { max-width: 70ch; margin: 2.5rem 0 1rem; }
.sale-faq h2 { font-size: 1.25rem; }
.sale-faq h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.sale-faq p { color: var(--muted); margin: 0; }
.sale-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: center;
  margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700;
  border: 1px solid rgba(255, 212, 59, .5); background: rgba(255, 212, 59, .1); }
.sale-strip .ss-go { color: var(--sticker); white-space: nowrap; }
/* sale calendar: season rows by store columns; the store's next sale is highlighted */
.sale-grid { --steam: #3d8bff; --gog: #a66bff; display: grid; gap: 8px; margin-top: 1.2rem; }
.sc-row { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 8px; margin-inline: -8px; padding: 8px; border-radius: 12px; }
.sc-row > * { min-width: 0; }
.sc-row.sc-hrow { padding-block: 0; }
.sc-row:not(.sc-hrow) { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 26%, transparent),
  color-mix(in srgb, var(--tc) 6%, transparent) 70%, transparent); }
.sc-lab { grid-row: 1 / span var(--n, 1); align-self: center; display: grid; justify-items: center; gap: 4px;
  font: 700 1.1rem "Archivo Narrow", "Archivo", system-ui, sans-serif; }
.sc-lab svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--tc); color: #1a1500; }
.sc-head { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sc);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 24%, var(--surface)), var(--surface) 70%); box-shadow: 0 0 22px -10px var(--sc); }
.sc-head svg { position: absolute; right: -6px; top: -8px; width: 74px; height: 74px; color: var(--sc); opacity: .22; transform: rotate(-12deg); }
.sc-head b { position: relative; font: 700 1.35rem "Archivo Narrow", "Archivo", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.sc-steam { --sc: var(--steam); } .sc-gog { --sc: var(--gog); }
.sc-cell { display: grid; }
.sc-ev { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid transparent; }
.sc-ev.hl { background: rgba(255, 212, 59, .12); border-color: var(--sticker); }
.sc-ev.sc-none { color: var(--muted); font-size: .9rem; background: none; border: 1px dashed var(--line); }
.sc-ev .sc-add { flex: none; margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); text-decoration: none; }
.sc-ev .sc-add:hover { border-color: var(--sticker); }
.sc-ev .sc-add.off, .sc-ev .sc-add.off:hover { opacity: .38; border-style: dashed; border-color: var(--line); cursor: not-allowed; }
.sc-ev .sc-add svg { width: 20px; height: 20px; }
.sc-ev b, .sc-ev small { display: block; }
.sc-ev small { color: var(--muted); font-size: .85rem; }
.sc-ev .sc-tile { flex: none; width: 56px; text-align: center; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); padding: 0 0 6px; }
.sc-ev .sc-tile i { display: block; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #1a1500; background: var(--tc); border-radius: 7px 7px 0 0; margin-bottom: 3px; padding: 1px 0; line-height: 1.4; }
.sc-ev .sc-tile b { color: var(--ink); font: 700 1.2rem/1.1 "Archivo Narrow", "Archivo", system-ui, sans-serif; }
.sc-ev .sc-tile small { font-size: .7rem; white-space: nowrap; }
.s-winter { --tc: #6fb7ff; } .s-spring { --tc: #5fd39a; } .s-summer { --tc: #ffb24d; } .s-autumn { --tc: #ff7d5c; }
/* light theme: cards take a soft tint of their season (not stark white); the next sale is a clean warm yellow */
:root[data-theme="light"] .sc-ev { background: color-mix(in srgb, var(--tc) 22%, #fff); border-color: color-mix(in srgb, var(--tc) 40%, #fff); }
:root[data-theme="light"] .sc-ev.hl { background: #fff1b8; border-color: #d9a800; }
:root[data-theme="light"] .sc-ev.sc-none { background: none; border-color: var(--line); }
:root[data-theme="light"] .sc-ev .sc-tile { background: color-mix(in srgb, var(--tc) 12%, #fff); border-color: color-mix(in srgb, var(--tc) 45%, #fff); }
:root[data-theme="light"] .sc-ev .sc-tile small { color: #4c5c72; }
:root[data-theme="light"] .sc-ev .sc-add { background: rgba(255, 255, 255, .7); border-color: color-mix(in srgb, var(--tc) 45%, #fff); }
@media (max-width: 620px) {
  .sc-row { grid-template-columns: 1fr; }
  .sc-hrow, .sc-who { display: none; }   /* phone: the big STEAM / GOG title buttons are gone; each card keeps its own store label */
  .sc-lab { grid-row: auto; justify-items: start; display: flex; align-items: center; gap: 8px; }
  .sc-cell::before { content: attr(data-store); font: 700 .8rem "Archivo Narrow", "Archivo", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  /* Phone: every sale card gets a store-coloured header strip (store name + a generic icon, no logos) and a matching outline. */
  .sc-cell { position: relative; }
  .sc-cell[data-store="Steam"] { --c: var(--steam); --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%207h10a5%205%200%200%201%204.9%204l.9%204.8a2.4%202.4%200%200%201-4.2%202L16.9%2016H7.1l-1.7%201.8a2.4%202.4%200%200%201-4.2-2L2.1%2011A5%205%200%200%201%207%207Zm.5%202.5v1.5H6v1.5h1.5V14H9v-1.5h1.5V11H9V9.5H7.5Zm9%20.8a1%201%200%201%200%200%202%201%201%200%200%200%200-2Zm2%202a1%201%200%201%200%200%202%201%201%200%200%200%200-2Z%22%20/%3E%3C/svg%3E"); }
  .sc-cell[data-store="GOG"] { --c: var(--gog); --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.5%206a5.5%205.5%200%201%201-1.2%2010.9L6%2018.2H4.2v1.8H2.4v-2.2l5-5A5.5%205.5%200%200%201%208.5%206Zm1.5%203a1.6%201.6%200%201%200%200%203.2A1.6%201.6%200%200%200%2010%209Z%22%20transform%3D%22translate%284%20-2%29%22/%3E%3C/svg%3E"); }
  .sc-cell::before { display: flex; align-items: center; padding: 4px 12px; border-radius: 10px 10px 0 0; background: var(--c); color: #fff;
    font: 700 .74rem "Archivo Narrow", "Archivo", system-ui, sans-serif; letter-spacing: .1em; }
  .sc-cell[data-store="Steam"]::before, .sc-cell[data-store="GOG"]::before { color: #fff; }
  .sc-cell::after { content: ""; position: absolute; top: 4px; right: 12px; width: 16px; height: 16px; background: #fff;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
  .sc-cell .sc-ev { border: 1px solid var(--c); border-top: 0; border-radius: 0 0 10px 10px; }
  .sc-cell .sc-ev.sc-none { border-style: dashed; }
  .sc-cell .sc-ev.hl { border-color: var(--sticker); }
  :root[data-theme="light"] .sc-cell .sc-ev { border-color: var(--c); border-top: 0; }
  :root[data-theme="light"] .sc-cell .sc-ev.hl { border-color: #d9a800; }
}
.cal-sub { margin: 1rem 0; }
.cal-sub-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800;
  text-decoration: none; background: var(--sticker); color: var(--sticker-ink); }
.cal-sub p { margin: .5rem 0 0; font-size: .9rem; color: var(--muted, inherit); }
/* "Next big sale" link above the Daily drop calendar */
.next-sale { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .2rem 0 .8rem; }
.next-sale .ns-main { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid rgba(255, 212, 59, .5); background: rgba(255, 212, 59, .1); color: var(--ink); font-weight: 700;
  text-decoration: none; font-size: .92rem; }
.next-sale .ns-main:hover { border-color: var(--sticker); }
.next-sale .ns-all { font-size: .88rem; }
.ct-sales { text-decoration: none; }
.next-sale .ns-lab { color: var(--muted); font-weight: 700; font-size: .9rem; }

/* Sort as a dropdown like the others */
.sort.gpick { margin-left: 0; }
.sort .glab { white-space: nowrap; }
#pick-sort { width: 230px !important; }
.keys-sort { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gpop .keys-os, .gpop .keys-sort { overflow: visible; }   /* small panels: never a scrollbar */
.gpop .keys-g { padding-bottom: 6px; }
.sort .gbtn { color: var(--ink); font-weight: 700; }

/* Free games to keep */
.fg-sec { margin: 1.5rem 0 2rem; }
.fg-sec h2 { font-size: 1.3rem; margin: 0 0 .9rem; }
.fg-card .fg-when { margin: .3rem 0 .6rem; color: var(--muted); font-size: .92rem; }
.fg-card .fg-when.now b { color: #ff8a1a; }
.fg-card .buy, .fg-card .fg-link { display: inline-block; }
.fg-past .fg-card { opacity: .7; }
.fg-alert { color: var(--muted); font-size: .95rem; }

/* Mobile UI refinement: compact controls, calendar-first drop, consistent sale chips. */
.feat .slide[data-href] { cursor: pointer; }
@media (max-width: 760px) {
  .results-bar .pickers { display: none; }
  .rail .mobile-rail-pickers { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem; }
  .rail .mobile-rail-pickers .gpick { width: 100%; }
  .rail .mobile-rail-pickers .gbtn { width: 100%; justify-content: space-between; }
  .bar-row2 { display: flex; align-items: center; gap: .65rem; flex-wrap: nowrap; width: 100%; }
  .bar-row2 .price-range { min-width: 0; flex: 1 1 auto; }
  .bar-row2 .price-range .pr-slider { min-width: 45px; flex: 1 1 auto; }
  .bar-row2 .sort { flex: 0 0 auto; margin-left: auto; }
  .results-bar { grid-template-columns: 1fr; }
  .results-bar > .filters-toggle { grid-column: 1; grid-row: 3; justify-self: start; }
  .daily .cal-nav { margin-top: .7rem; }
  .daily .today-drop { margin-top: 1.2rem; }
  .daily .cal { order: -1; }
  .daily { display: flex; flex-direction: column; }
  .daily .daily-head { order: -3; }
  .daily .cal-nav { order: -2; }
  .daily .cal { order: -1; }
  .daily .today-drop, .daily .daily-unavailable { order: 2; }
  .daily .next-sale { order: 3; }
  .daily .cal-hint { order: 1; }
  .daily .drop-similar { order: 4; }
  .cal-nav .cal-sales { white-space: nowrap; font-size: .78rem; }
  .next-sale { display: grid; gap: .55rem; }
  .next-sale .ns-main { display: block; width: 100%; box-sizing: border-box; padding: .7rem .85rem; border-radius: 12px; font-size: .9rem; line-height: 1.35; }
  .next-sale .ns-lab { font-size: .95rem; }
  .next-sale .ns-all { white-space: nowrap; }
}
.drop-day-dialog { border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem; width: min(410px, calc(100vw - 36px)); max-height: 85dvh; overflow-y: auto; background: var(--panel, #172332); color: var(--ink); box-shadow: 0 20px 90px #0009; }
.drop-day-dialog[open] { animation: dropDayIn .22s ease-out; }
.drop-day-dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.drop-day-close { float: right; border: 0; color: inherit; background: transparent; font-size: 1.8rem; cursor: pointer; }
.drop-day-content img { width: 100%; border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }
.drop-day-content h2 { margin: .7rem 0; }
.drop-day-content .buy { display: block; text-align: center; margin-top: 1rem; }
.drop-day-date { color: var(--muted); font-weight: 700; }
@keyframes dropDayIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .drop-day-dialog[open] { animation: none; } }

/* Giveaways (cards, grid) and the coloured Giveaways / Sale calendar tabs. Consolidated Oct 21 from the staging
   rounds: same final look, each rule once. */
.free-games .fg-grid, .f2p-giveaway-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 2rem 2rem; align-items: stretch; }   /* same gap as every other .grid: a .card is 16px wider than its column (hover halo) */
.free-games .fg-grid .fg-card { min-width: 0; width: 100%; }
.free-games .fg-grid .fg-card .art { position: relative; }
.free-games .fg-grid .fg-card .cover { width: 100%; }
.free-games .fg-grid .fg-card .sticker-free { display: none; }
@media (min-width: 761px) { .free-games .fg-grid .fg-card .cover { aspect-ratio: 16 / 9; object-fit: cover; } }
@media (max-width: 760px) {
  .free-games .fg-grid, .f2p-giveaway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.7rem; }
  .free-games .fg-grid .fg-card { padding: .55rem; }
  .free-games .fg-grid .fg-card h3 { font-size: .94rem; }
}
@media (max-width: 370px) { .free-games .fg-grid, .f2p-giveaway-grid { grid-template-columns: 1fr; } }

.coll-row .coll-tabs > .ct-giveaways { color: #32c8a0; }
.coll-row .coll-tabs > a.ct-sales { color: #f2bc3d; }
.coll-row .coll-tabs > .ct-giveaways:hover { color: #70f6d0; }
.coll-row .coll-tabs > a.ct-sales:hover { color: #ffdf78; }
:root[data-theme="light"] .coll-row .coll-tabs > .ct-giveaways { color: #087e65; }
:root[data-theme="light"] .coll-row .coll-tabs > a.ct-sales { color: #986900; }
/* coloured emoji on every device (not the plain text style) */
.coll-row .ct-giveaways span[aria-hidden], .coll-row .ct-sales span[aria-hidden], .f2p-giveaways span[aria-hidden] {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-variant-emoji: emoji; }

/* Sort panel: same key style as the other pickers */
.gpop#pick-sort { width: min(205px, calc(100vw - 24px)) !important; padding: 10px; }
.gpop#pick-sort .keys-sort { gap: 8px; }
.gpop#pick-sort .keys-sort .key { font-size: .9rem; padding: .45rem .6rem; min-height: 0; line-height: 1.3; }

/* Deals count */
.results-bar > #count { min-width: 0; white-space: nowrap; font-size: .88rem; }
.results-bar > #count strong { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .results-bar > #count { font-size: .82rem; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .results-bar { flex-wrap: wrap; }
  .results-bar > #count { flex: 1 0 100%; white-space: normal; order: 1; }
  .results-bar > .inline-h { order: 0; }
  .results-bar > .pickers, .results-bar > .price-range, .results-bar > .sort { order: 2; }
}

/* Free to play page: "Giveaways" filter in the same row as Steam / GOG */
.f2p .f2p-giveaway-grid[hidden], .f2p .f2p-normal .card[hidden] { display: none; }
.f2p .f2p-giveaway-grid { margin-top: 1rem; }
.f2p-stores button.ct.f2p-giveaways { display: inline-block; border: 0; border-radius: 0; background: none; padding: .45rem 0; margin: 0;
  font: inherit; font-weight: 700; white-space: nowrap; color: #20ba91; text-shadow: 0 0 8px rgba(32, 186, 145, .2); cursor: pointer; }
.f2p-stores button.ct.f2p-giveaways:hover { color: #62eac2; }
.f2p-stores button.ct.f2p-giveaways[aria-pressed="true"] { border-bottom: 3px solid #20ba91; color: #39ddb0; }
.f2p-stores button.ct.f2p-giveaways small { color: inherit; }

/* Wishlist is a focused page: no discovery carousel, category navigation or deal-filter controls.
   Keep filter DOM in place because deals.js uses it to render saved game cards. */
.browse[data-mode="wishlist"] > .rail,
.browse[data-mode="wishlist"] .feat,
.browse[data-mode="wishlist"] .coll,
.browse[data-mode="wishlist"] .sticky-bar { display: none !important; }
.browse[data-mode="wishlist"] { display: block; }
.browse[data-mode="wishlist"] .results { width: 100%; max-width: none; min-width: 0; }

/* Home page Giveaways tab: the same cards as Free to play's Giveaways filter, shown in place of the deals */
.home-giveaways { margin: 1rem 0 2rem; }
.home-giveaways[hidden] { display: none; }
@media (max-width: 760px) { .f2p-giveaway-grid .sticker-keep { font-size: .74rem; top: -6px; left: -8px; } }   /* two narrow columns: a smaller ticket */
.gw-h { font-size: 1.3rem; margin: 2rem 0 .9rem; }
.f2p-giveaway-more[hidden] { display: none; }
.f2p-giveaway-more .gw-h:first-child { margin-top: 1.6rem; }
.fg-past .fg-card, .f2p-giveaway-grid.fg-past .card { opacity: .7; }
.home-giveaways .note { margin-top: 1rem; }
.browse.show-giveaways .coll .quick, .browse.show-giveaways .sticky-bar, .browse.show-giveaways #results,
.browse.show-giveaways .see-all, .browse.show-giveaways #other-games { display: none !important; }
.ct-giveaways .ct-n { font-size: .72rem; font-weight: 800; padding: .05rem .4rem; border-radius: 999px; background: rgba(50, 200, 160, .16); }
.coll-tabs button.ct-giveaways { font-family: inherit; display: inline-flex; align-items: center; gap: .35rem; }
.browse[data-mode="collection"].show-giveaways .results-head { display: none; }
.coll-tabs button.ct-giveaways[aria-pressed="true"] { box-shadow: inset 0 -3px 0 currentColor; }

/* Beta notice: suggestions link */
.notice-bar .notice-mail { margin-left: .35rem; overflow-wrap: anywhere; }
.browse.show-giveaways .ct[aria-selected="true"] { color: var(--muted); box-shadow: none; }

/* Settings page (/settings/) */
.settings-page { max-width: 1120px; margin: 0 auto 3rem; padding: 1rem; }
.settings-page h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.settings-columns { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.settings-columns[hidden], .settings-out[hidden] { display: none; }
.settings-out { max-width: 640px; margin-top: 1.5rem; }
.settings-nav { display: flex; flex-direction: column; gap: .3rem; align-self: start; position: sticky; top: 20px; }
.settings-nav a { padding: .8rem 1rem; color: var(--muted); text-decoration: none; border-radius: 10px; }
.settings-nav a:hover { background: var(--key-face); color: var(--ink); }
.settings-nav a[aria-current="page"] { background: var(--key-face); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--sticker); }
.settings-main { display: grid; gap: 1.25rem; min-width: 0; }
.settings-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1rem, 3vw, 1.6rem); }
.settings-main > .settings-card[hidden] { display: none; }
.settings-card h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
.settings-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.settings-card .ap-head h3 { font-size: 1.05rem; }
.set-who { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; min-width: 0; }
.set-who div { display: grid; min-width: 0; }
.set-who strong, .set-muted { overflow-wrap: anywhere; }
.set-muted { color: var(--muted); font-size: .9rem; }
.set-pic { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 1.2rem; }
span.set-pic { background: var(--sticker); color: var(--sticker-ink); font-weight: 800; }
.set-row { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.set-label { flex: 0 0 170px; color: var(--muted); }
.set-value { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.set-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.set-status { min-height: 1.2em; margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.set-block { padding: 1rem 0; border-top: 1px solid var(--line); }
.set-block:first-child { padding-top: 0; border-top: 0; }
.ap-btn.danger { background: #d9534f; color: #fff; }
.ap-btn.danger:hover { background: #c9302c; }
.ap-settings-link { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .settings-columns { grid-template-columns: 1fr; gap: 1rem; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .settings-nav a { padding: .5rem .7rem; font-size: .88rem; }
  .settings-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sticker); }
  .set-label { flex-basis: 100%; font-size: .85rem; }
}

/* Phones: Filters, price and Sort on one line under the deal count */
@media (max-width: 760px) {
  .bar-row2 .filters-toggle { flex: 0 0 auto; margin: 0; height: 2.4rem; padding: 0 .75rem; }
  .bar-row2 .pr-box { width: 4.8rem; }
  .bar-row2 .pr-box > span { display: none; }
  /* dropdown lists in the Filters panel: two columns, so they stay short */
  .gpop .keys-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .gpop .keys-g .key { padding: .5rem .55rem; font-size: .88rem; min-width: 0; }
  .gpop .keys-g .key span { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 370px) { .bar-row2 .pr-slider { display: none; } }   /* very narrow: the price box is enough */

/* Daily drop: day sheet details (phones) */
.drop-day-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .2rem 0; }
.drop-day-price strong { font-size: 1.5rem; }
.drop-day-price s { color: var(--muted); }
.drop-day-off { background: var(--sticker); color: var(--sticker-ink); font-weight: 800; border-radius: 6px; padding: .05rem .4rem; font-size: .85rem; }
.drop-day-note { color: var(--muted); margin: .3rem 0 0; }
.drop-day-more { display: block; text-align: center; margin-top: .8rem; color: var(--link); }

/* Daily drop calendar on phones: a compact month grid (7 small squares per week); tap a day for its details */
@media (max-width: 760px) {
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cal .dow { display: block; text-align: center; padding: 0 0 2px; font-size: .68rem; }
  .cal .door.blank { display: block; }
  .cal .door { min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 8px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0; }
  .cal .door .n { position: relative; z-index: 1; font-size: .8rem; }
  .cal .door .n-today, .cal .door .t, .cal .door .st, .cal .door .no-record, .cal .door .future-label { display: none; }
  .cal .door.locked .lock { margin: 0; font-size: .7rem; line-height: 1; }
  .cal .door.locked .n { font-size: .75rem; }
  .cal .door.past .mini { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); aspect-ratio: auto; border-radius: 6px; object-fit: cover; opacity: .6; }
  .cal .door.past .cover-blank span { display: none; }
  .cal .door.past .n { color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
  .cal .door.is-today { box-shadow: 0 0 12px -3px rgba(255, 212, 59, .7); }
  .cal .door.is-today .n { color: var(--sticker); }
}

/* Wishlist page while the signed-in panel loads (WISHLIST_WAIT_SCRIPT): a placeholder, no jumping list */
.ap-pending .browse[data-mode="wishlist"] .alerts-panel[hidden] { display: block; min-height: 180px; }
.ap-pending .browse[data-mode="wishlist"] .alerts-panel[hidden]::before { content: "Loading your wishlist\2026"; color: var(--muted); }
.ap-pending .browse[data-mode="wishlist"] .results-head .rule,   /* the page text for visitors who are not signed in */
.ap-pending .browse[data-mode="wishlist"] #results, .ap-pending .browse[data-mode="wishlist"] .see-all,
.ap-pending .browse[data-mode="wishlist"] #other-games { display: none !important; }

/* Switchable grid/list view (staging): no layout overrides in the default grid view. */
.deal-view-toggle {width:38px;height:38px;flex:none;display:inline-grid;place-items:center;cursor:pointer;
border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--key-face);}
.deal-view-toggle:hover {border-color:var(--sticker);}
.deal-view-toggle:focus-visible {outline:3px solid var(--focus);outline-offset:2px;}
.deal-view-toggle svg {width:19px;height:19px;}
.deal-view-toggle .view-icon-grid {display:none;fill:currentColor;}
:root[data-deal-view="list"] .deal-view-toggle .view-icon-list {display:none;}
:root[data-deal-view="list"] .deal-view-toggle .view-icon-grid {display:block;}

/* In list view, grid items stretch by default; deal verdicts must remain text-sized badges. */


/* Phones: one row under the deal count (Filters, price, Sort, grid/list), and the Filters panel as dropdown rows */
.sort-lab { display: none; }
@media (max-width: 760px) {
  .bar-row2 { gap: .4rem; }
  .bar-row2 .sort { flex: 0 0 auto; margin: 0; gap: .3rem; }
  .bar-row2 .sort-lab { display: inline; font-size: .85rem; }
  .bar-row2 .sort .gbtn { padding-inline: .5rem; gap: .25rem; max-width: 9.2rem; }
  .bar-row2 .sort .glab { overflow: hidden; text-overflow: ellipsis; }
  .bar-row2 .filters-toggle { padding: 0 .6rem; }

  /* Store, Activates on, Play with friends, Discount, Reviews: a button-like row that folds the choices away */
  .rail fieldset.box.fold { padding: 0; background: none; border: 0; box-shadow: none; transform: none; }
  .rail fieldset.box.fold:hover, .rail fieldset.box.fold:focus-within { transform: none; box-shadow: none; border-color: transparent; }
  .rail fieldset.box.fold legend { float: none; display: flex; align-items: center; gap: .4rem; box-sizing: border-box; width: 100%;
    margin: 0; padding: .45rem .8rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; font-stretch: 100%;
    border: 1px solid var(--line); background: linear-gradient(160deg, var(--key-top), var(--key-face)); box-shadow: 0 3px 0 var(--key-edge); }
  .rail fieldset.box.fold legend::before { content: "\25BE"; order: 3; margin-left: auto; }
  .rail fieldset.box.fold.open legend::before { content: "\25B4"; }
  .rail fieldset.box.fold legend .gval { order: 2; margin-left: .2rem; }
  .rail fieldset.box.fold.has-active legend::after { display: none; }
  .rail fieldset.box.fold legend:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .rail fieldset.box.fold:not(.open) > .keys { display: none; }
  .rail fieldset.box.fold.open > .keys { margin-top: .5rem; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
  .rail form { gap: .65rem; }
  .rail .mobile-rail-pickers { margin-bottom: 0; }
}
@media (max-width: 760px) { .gpop .keys-os .key { justify-content: space-between; text-align: left; } }

/* Phones, round 2 */
.box legend .gval { display: none; }
@media (max-width: 760px) {
  .rail fieldset.box.fold legend .gval { display: inline; }
  /* Platform / Genre / Type open right under their button and push the next filter down */
  .rail .gpop.docked { position: static; width: auto !important; max-height: none !important; margin-top: .5rem; left: auto; top: auto; }
  .rail .gpop.docked .keys-g { overflow: visible; }
  .gpop .keys-os .key span { white-space: nowrap; gap: .35rem; }
  .gpop .keys-os .key svg { width: 14px; height: 14px; }
  /* Free to play: All stores / Steam / GOG / Giveaways stay on one line */
  .f2p-stores { flex-wrap: nowrap; gap: .65rem; overflow-x: auto; scrollbar-width: none; }
  .f2p-stores::-webkit-scrollbar { display: none; }
  .f2p-stores .ct { flex: 0 0 auto; white-space: nowrap; font-size: .9rem; }
}
@media (max-width: 760px) { .rail form > * + * { margin-top: 0; } }   /* equal space between all filter rows */
@media (max-width: 760px) { .rail form { grid-template-columns: minmax(0, 1fr); } .rail .gpop.docked { box-sizing: border-box; } }
@media (max-width: 380px) { .f2p-stores .ct small { display: none; } }   /* counts give way so the row never scrolls */

/* Verdict ("Great deal") and label ("New deal") on one row */
.card .tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-top: .35rem; }
.card .tags .verdict, .card .tags .labels { margin: 0; }
/* Daily drop: the intro above the calendar takes less room on phones */
@media (max-width: 760px) {
  .daily .radiant-head { padding: .5rem .5rem .6rem; }
  .daily .daily-head { margin-bottom: .6rem; }
  .daily-eyebrow { font-size: .7rem; margin-bottom: .2rem; }
  .daily .radiant-head h1 { font-size: 1.45rem; line-height: 1.1; margin: 0; }
  .daily .radiant-head .rule { font-size: .85rem; line-height: 1.3; margin-top: .3rem; }
}

/* Store line, verdict ("Great deal") and label ("New deal") share a row; each pill drops to the next row only if it has no room */
.card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .3rem; margin-top: .1rem; }
.card .meta .store { margin: 0; font-size: .78rem; white-space: nowrap; }   /* "Steam · Deck Verified" + Great deal + New deal fit one card row on computers */
.card .meta .tags, .card .meta .labels { display: contents; }
.card .meta .verdict { margin: 0; font-size: .74rem; padding: .1rem .35rem; }
.card .meta .labels li { font-size: .74rem; padding: .08rem .3rem; }

/* Phones, round 5 */
@media (max-width: 760px) {
  /* "All deals" and the count / age on one line */
  .results-bar { grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
  .results-bar > .inline-h { grid-column: 1; grid-row: 1; }
  .results-bar > #count { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .results-bar:not(:has(.inline-h)) > #count { grid-column: 1 / -1; }
}


/* PC list view (wider than 760 px).
   Three columns: the photo in the grid's shape | title, rating, store and deal tags | the price block on the right,
   so the row is balanced instead of leaving the right side empty. */
@media (min-width: 761px) {
  :root[data-deal-view="list"] .browse .results #results, :root[data-deal-view="list"] .browse .results .og-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  :root[data-deal-view="list"] .browse .results #results .card:not(.sim-cards .card), :root[data-deal-view="list"] .browse .results .og-grid .card:not(.sim-cards .card) {
    display: grid; grid-template-columns: clamp(150px, 22%, 210px) minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
    column-gap: 1.2rem; align-items: start; margin: 0; padding: .8rem 1.1rem .8rem .8rem; border: 1px solid var(--line); background: var(--surface); }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; min-width: 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > :where(:not(.art)) { grid-column: 2; min-width: 0; margin-top: 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art > a { display: block; text-decoration: none; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .cover { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .cover-blank { overflow: hidden; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art .sticker { top: 5px; left: 5px; font-size: .9rem; padding: .2rem .4rem .16rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art .wish { top: 5px; right: 5px; width: 2rem; height: 2rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) h3 { grid-row: 1; margin: 0; font-size: 1.05rem; line-height: 1.25; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .rating { grid-row: 2; margin: .25rem 0 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > :is(.meta, .store) { grid-row: 3; margin-top: .5rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > .ends { grid-row: 4; margin-top: .35rem; }
  /* right column: price big, old price and saving under it, all right-aligned and centred on the photo */
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price { grid-column: 3; grid-row: 1 / -1; align-self: center; margin: 0; display: grid; grid-template-columns: auto auto;
    justify-content: end; justify-items: end; align-items: center; gap: .3rem .5rem; text-align: right; white-space: nowrap; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price strong { grid-column: 1 / -1; margin: 0; font-size: 1.55rem; line-height: 1.1; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price .save { margin: 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > .f2p-go { grid-column: 3; grid-row: 1 / -1; align-self: center; margin: 0; }
}

/* Phone list view: no picture. Rows line up across the card: title | price, stars and count | discount and old price,
   store and deal tags | heart (a later row when there is an Owned or ends line, so the heart is level with the last row on the left). */
@media (max-width: 760px) {
  :root[data-deal-view="list"] .browse .results #results, :root[data-deal-view="list"] .browse .results .og-grid { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  :root[data-deal-view="list"] .browse .results #results .card:not(.sim-cards .card), :root[data-deal-view="list"] .browse .results .og-grid .card:not(.sim-cards .card) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto; column-gap: .8rem; row-gap: 0; align-items: start;
    margin: 0; padding: .7rem .75rem; border: 1px solid var(--line); background: var(--surface); }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art { display: contents; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art > a, :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art > .sticker { display: none; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > :where(:not(.art)) { grid-column: 1; min-width: 0; margin-top: 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) h3 { grid-row: 1; margin: 0; font-size: 1rem; line-height: 1.45rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .rating { grid-row: 2; margin: .3rem 0 0; align-self: center; flex-wrap: nowrap; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .rating .rl { display: none; }   /* stars and the number of reviews only */
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > :is(.meta, .store) { grid-row: 3; align-self: center; margin-top: .3rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > .ends { grid-row: 4; margin-top: .3rem; }
  /* the deal tags stay together: if they do not fit beside the store name they move down as a pair, never one tag alone */
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .meta .tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
  /* heart and X sit at the bottom of the row and are 2rem tall: tags get the same height so their middle is the heart's middle, whether the tags share the store line or wrap under it */
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .meta .tags { min-height: 2rem; margin: 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price { grid-column: 2; grid-row: 1 / 3; align-self: start; justify-self: end; margin: 0; display: grid;
    grid-template-columns: auto auto; justify-content: end; justify-items: end; align-items: center; gap: 0 .4rem; text-align: right; white-space: nowrap; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price strong { grid-column: 1 / -1; margin: 0; font-size: 1.45rem; line-height: 1.45rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price .sticker.off { display: inline-block; position: static; transform: none; box-shadow: none;
    font-size: .72rem; padding: .18rem .35rem .14rem; border-radius: 5px; margin-top: .3rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price s { font-size: .85rem; margin-top: .3rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price .save { display: none; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art > .wish { position: static; grid-column: 2; grid-row: 3; justify-self: end; align-self: end; width: 2rem; height: 2rem; margin-top: .3rem; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card):has(> .ends) .art > .wish { grid-row: 4; }   /* level with the last row on the left */
  /* "Not interested" ✕ sat on top of the heart (it is absolute, and the card is its reference here): same cell, left of the heart, side by side */
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .art > .nope { position: static; grid-column: 2; grid-row: 3; justify-self: end; align-self: end; margin: .3rem 2.4rem 0 0; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card):has(> .ends) .art > .nope { grid-row: 4; }
  :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) > .f2p-go { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 760px) {
    :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price { grid-template-rows: subgrid; align-self: stretch; row-gap: 0; }
    :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price strong { align-self: start; }
    :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price .sticker.off, :root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .price s { align-self: center; }
  }
}

/* Phones: Price is a dropdown row in the Filters panel (slider and a box for an exact price); Sort ends the toolbar line */
.rail .box-price { display: none; }
.rail form > .box-price + * { margin-top: 0; }   /* hidden on computers: the next box keeps its place */
@media (max-width: 760px) {
  .rail .box-price { display: block; }
  .rail .box-price .pr-home { display: block; }
  .rail .box-price .price-range { display: flex; align-items: center; gap: .8rem; width: 100%; }
  .rail .box-price .pk-lab { display: none; }
  .rail .box-price .pr-slider { flex: 1 1 auto; width: auto; min-width: 0; }
  .rail .box-price .pr-box { flex: 0 0 auto; height: 2.3rem; }
  .rail .box-price .pr-num { width: 4rem; }
  .bar-row2 .sort { margin-left: auto; }
}

/* Platform / Genre / Type choices: every box the same size; a long name is cut with "..." (full name on hover) */
.gpop .keys-g .key { justify-content: flex-start; text-align: left; gap: .4rem; min-width: 0; padding: .45rem .6rem; font-size: .86rem; line-height: 1.25; }
.gpop .keys-g .key > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.gpop .keys-g .key em { flex: none; font-size: .74rem; }
.gpop .keys-os .key > span { display: flex; align-items: center; gap: .4rem; }

/* Daily drop calendar on computers: every day the same size, whatever it holds (picture, "?" or nothing) */
/* ...and compact: square day boxes, the picture inset inside each box with the date and name over it, so a month fits on one screen.
   Today keeps the same size (a bright ring), so it never covers its neighbours. */
@media (min-width: 801px) {
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: auto; gap: .5rem; max-width: 52rem; margin-inline: auto; }
  .cal .dow { align-self: end; }
  .cal .door { aspect-ratio: 1; min-height: 0; padding: .4rem .5rem; gap: .1rem; border-radius: 10px; }
  .cal .door .no-record, .cal .door .future-label { display: none; }
  .cal .door .n { font-size: .8rem; line-height: 1.1; }
  .cal .door.locked { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .cal .door.locked .lock { margin: auto 0 0; font-size: 1.1rem; }
  .cal .door.past { padding: 0; }
  .cal .door.past .mini { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); aspect-ratio: auto; border-radius: 7px; object-fit: cover; }
  .cal .door.past .cover-blank span { display: none; }
  .cal .door.past::after { content: ""; position: absolute; inset: 3px; border-radius: 7px; pointer-events: none; transition: opacity .15s;
    background: linear-gradient(to top, rgba(8, 13, 24, .94) 0%, rgba(8, 13, 24, .55) 50%, rgba(8, 13, 24, .15) 100%); }
  .cal .door.past:hover::after { opacity: .6; }
  .cal .door.past > .n, .cal .door.past > .t, .cal .door.past > .st { position: relative; z-index: 1; margin: 0 .55rem; text-shadow: 0 1px 3px #000; }
  .cal .door.past > .n { margin-top: .45rem; color: #fff; }
  .cal .door.past > .t { margin-top: auto; margin-bottom: .45rem; font-size: .76rem; line-height: 1.2; -webkit-line-clamp: 2; color: #fff; }
  .cal .door.past > .st { display: none; margin-bottom: .45rem; font-size: .68rem; line-height: 1.25; color: #e6ebf5;
    overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cal .door.past:hover > .t { margin-bottom: .1rem; -webkit-line-clamp: 1; }
  .cal .door.past:hover > .st { display: -webkit-box; }   /* hover: the picture brightens and the price line slides in */
  .cal .door.is-today { border: 2px solid var(--sticker); box-shadow: 0 0 10px -2px rgba(255, 212, 59, .65); }
  .cal .door.is-today > .n { color: var(--sticker); font-weight: 800; }
  .cal .door.is-today > .st { display: -webkit-box; }
  .cal .door.is-today > .t { margin-bottom: .1rem; -webkit-line-clamp: 1; }
}

/* Daily drop box: the whole box is a link once revealed, so it lifts and glows like the cards on the main page */
.today-drop[data-href]:not(.sealed):not(.revealing) { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.today-drop[data-href]:not(.sealed):not(.revealing):is(:hover, :focus-within) { transform: translateY(-4px); border-color: #fff0b3;
  box-shadow: 0 0 0 1px rgba(255, 224, 138, .8), 0 0 26px rgba(255, 201, 52, .55), 0 0 85px rgba(248, 157, 32, .3), 0 18px 34px -18px #000; }
.today-drop[data-href]:not(.sealed):not(.revealing):is(:hover, :focus-within) h2 a.drop-title { color: var(--sticker); text-decoration-color: var(--sticker); }
.today-drop[data-href]:not(.sealed):not(.revealing):is(:hover, :focus-within) .drop-title .go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .today-drop[data-href]:is(:hover, :focus-within) { transform: none; } }

/* "Next big sales" above the calendar: a bright label and a tint per store */
.next-sale .ns-lab { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .5rem; border-radius: 999px; color: #2a1500;
  background: linear-gradient(100deg, #ffd43b, #ff9f1c); font-weight: 800; font-size: .88rem; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.next-sale .ns-lab { justify-self: start; }
.next-sale .ns-ico { width: 1.25rem; height: 1.25rem; flex: none; }
.next-sale .ns-main.ns-steam { border-color: rgba(76, 168, 255, .65); background: linear-gradient(100deg, rgba(47, 140, 255, .22), rgba(47, 140, 255, .08)); }
.next-sale .ns-main.ns-gog { border-color: rgba(190, 120, 255, .65); background: linear-gradient(100deg, rgba(170, 95, 255, .24), rgba(170, 95, 255, .08)); }
.next-sale .ns-main.ns-live { border-color: rgba(47, 207, 143, .8); background: linear-gradient(100deg, rgba(47, 207, 143, .26), rgba(47, 207, 143, .08)); }
.next-sale .ns-main:hover { filter: brightness(1.15); }
:root[data-theme="light"] .next-sale .ns-main { color: #17202e; }

/* List view (phones and computers): no "Owned" tag on the card */
:root[data-deal-view="list"] .browse .results .card:not(.sim-cards .card) .owned-tag { display: none; }

/* Phones: one tab bar (Popular / Best deals / Top rated), the lists of that tab as full-width rows with their
   descriptions, then a row of three shortcuts (Ending soon, Giveaways, Sale calendar). Nothing scrolls sideways.
   .coll becomes the grid; the row and tab list dissolve into it so the shortcuts can sit below the lists. */
@media (max-width: 760px) {
  .coll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem .5rem; }
  .coll-row, .coll-row .coll-tabs { display: contents; }
  .coll-row .search { grid-column: 1 / -1; order: 0; margin: 0; }
  .coll-tabs > * { order: 2; min-width: 0; }
  /* the lists of the open tab: full-width rows (name, description, chevron) in one rounded card */
  .quick { order: 3; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  .quick[hidden] { display: none; }
  .qk { grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: center; align-content: center; min-height: 0; padding: .55rem .8rem;
    background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; scroll-snap-align: none; }
  .qk:first-child { border-top: 0; }
  .qk:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--key-face); }
  .qk.on:hover { background: var(--sticker); border-color: var(--line); }
  .qk::after { content: "\203A"; grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 1.3rem; line-height: 1; }
  .qk-name { font-size: .95rem; }
  .qk-n { font-size: .8rem; }
  .qk.on { background: var(--sticker); transform: none; }
  .qk.on::after { color: var(--sticker-ink); }
  /* the three tabs: one segmented bar */
  .coll-tabs > button.ct[role="tab"] { text-align: center; padding: .5rem .2rem; font-size: .9rem; border: 1px solid var(--line); background: var(--surface);
    margin-inline: -.25rem; border-radius: 0; box-shadow: none; }
  .coll-tabs > button.ct[role="tab"]:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
  .coll-tabs > button.ct[role="tab"]:nth-child(3) { border-radius: 0 10px 10px 0; margin-right: 0; }
  .coll-tabs > button.ct[role="tab"][aria-selected="true"] { background: var(--sticker); color: var(--sticker-ink); border-color: var(--sticker); box-shadow: none; position: relative; }
  .browse.show-giveaways .coll-tabs > button.ct[role="tab"][aria-selected="true"] { background: var(--surface); color: var(--muted); border-color: var(--line); }
  /* shortcut row */
  .coll-tabs > .ct-ending, .coll-tabs > .ct-giveaways, .coll-tabs > .ct-sales { order: 4; display: flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 0; height: 2.3rem; padding: 0 .25rem; font-size: .78rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); white-space: nowrap; box-shadow: none; }
  .coll-tabs > .ct-ending { border-color: rgba(255, 138, 92, .45); }
  .coll-tabs > .ct-giveaways .ct-n { display: none; }
  .coll-tabs > .ct-ending .ct-n { display: inline; padding: .02rem .3rem; font-size: .68rem; }
  .coll-tabs > .ct-ending.on, .coll-tabs > .ct-giveaways[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
  .coll-tabs > .ct-ending .ct-more { display: none; }
  .coll-tabs > .ct-giveaways, .coll-tabs > .ct-sales { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 400px) { .coll-tabs > .ct-ending .ct-n, .coll-tabs > .ct-sales .ct-more { display: none; } }

/* ---------- Computers (980 px and up): the filters are one compact panel. Price joins it; Activates on and Play with
   friends fold up and say what is chosen. Platform / Genre / Type stay in the bar above the deals. */
.rail-pc-head { display: none; }
@media (min-width: 980px) {
  .rail form { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); overflow: hidden; }
  .rail form > * + * { margin-top: 0; }
  .rail-pc-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; order: 0; }
  .rail-pc-head h2 { margin: 0; font-size: 1.1rem; font-stretch: 85%; }
  .rail-clear, .rail-all { padding: 0; border: 0; background: none; color: #8fb6ff; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
  .rail-all { margin-left: auto; }
  .rail-clear { margin-left: .4rem; padding: 0; border: 0; background: none; color: #8fb6ff; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
  .rail-clear[hidden] { display: none; }
  .rail .box { order: 9; padding: .7rem 1rem .85rem; background: none; border: 0; border-radius: 0; box-shadow: inset 0 1px 0 var(--line); transform: none; }
  .rail .box:hover, .rail .box:focus-within { transform: none; box-shadow: inset 0 1px 0 var(--line); }
  .rail .box legend { margin-bottom: .5rem; font-size: .74rem; font-weight: 800; font-stretch: 100%; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .rail .box.box-store { order: 1; } .rail .box.box-price { order: 2; } .rail .box.box-discount { order: 3; }
  .rail .box.box-act { order: 5; } .rail .box.box-play { order: 6; }
  .rail .keys { gap: .4rem; }
  .rail .keys .key { padding: .4rem .3rem; font-size: .88rem; border-radius: 7px; }
  .rail .box-store .keys .key { gap: .05rem; }
  .rail .keys-4 .key { font-size: .86rem; }
  /* Price: slider and a box for an exact price, in the panel */
  .rail .box-price { display: block; }
  .rail .box-price .pr-home { display: block; }
  .rail .box-price .price-range { display: flex; align-items: center; gap: .8rem; width: 100%; }
  .rail .box-price .pk-lab { display: none; }
  .rail .box-price .pr-slider { flex: 1 1 auto; width: auto; min-width: 0; }
  .rail .box-price .pr-box { flex: 0 0 auto; height: 2.1rem; }
  .rail .box-price .pr-num { width: 3.4rem; }
  /* Activates on / Play with friends: closed rows with the choice on the right */
  .rail fieldset.box.fold { padding: 0; box-shadow: none; }
  .rail fieldset.box.fold legend { float: none; display: flex; align-items: center; gap: .4rem; box-sizing: border-box; width: 100%; margin: 0; padding: .7rem 1rem; cursor: pointer; box-shadow: inset 0 1px 0 var(--line); }
  .rail fieldset.box.fold legend::before { content: "\25B8"; order: 3; margin-left: auto; font-size: .8rem; }
  .rail fieldset.box.fold.open legend::before { content: "\25BE"; }
  .rail fieldset.box.fold legend .gval { display: inline; order: 2; margin-left: .6rem; text-transform: none; letter-spacing: 0; }
  .rail fieldset.box.fold legend .gval[hidden] { display: none; }
  .rail fieldset.box.fold.has-active legend::after { display: none; }
  .rail fieldset.box.fold legend:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .rail fieldset.box.fold:not(.open) > .keys { display: none; }
  .rail fieldset.box.fold.open > .keys { margin: 0 1rem .85rem; }
  .rail fieldset.box.fold:hover, .rail fieldset.box.fold:focus-within { box-shadow: none; }
}

/* wishlist alerts list: Select all / Deselect all and Sort, one row above the games */
.ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: 0 0 .6rem; }
.ap-toolbar .ap-btn { padding: .35rem .9rem; font-size: .88rem; }
.ap-sortlab { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; font-size: .88rem; font-weight: 700; color: var(--muted); }
.ap-sortlab .ap-select { height: 2.1rem; color: var(--ink); font-weight: 600; }
.ap-toolbar .ap-btn:disabled { opacity: .5; cursor: default; }

/* v-wl2: on desktop the bar uses the rows' own column widths, so Select all sits right above the "Alert me" boxes */
.ap-toolbar { padding: 0 .5rem; }
.ap-tb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-left: 0; }
@media (min-width: 761px) {
  .ap-toolbar { justify-content: flex-end; }
  .ap-controls, .ap-tb-ctl { display: grid; grid-template-columns: 7.2rem 9rem 4rem; gap: .55rem .8rem; justify-content: start; }
  .ap-tb-ctl .ap-all { grid-column: 1; justify-self: start; padding-inline: .7rem; white-space: nowrap; }
  .ap-tb-ctl .ap-sortlab { grid-column: 2 / 4; margin-left: 0; justify-content: flex-end; gap: .45rem; }
  .ap-tb-ctl .ap-sortlab .ap-select { width: 10.2rem; }
}
/* Select all looks like the Sort menu next to it */
.ap-toolbar .ap-all { height: 2.1rem; box-sizing: border-box; padding: 0 .7rem; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.ap-toolbar .ap-all:hover { border-color: var(--sticker); }
@media (max-width: 760px) { .ap-tb-ctl { flex-wrap: nowrap; width: 100%; } .ap-tb-ctl .ap-sortlab { margin-left: auto; } }
@media (max-width: 760px) { .ap-toolbar .ap-all { white-space: nowrap; flex: none; } .ap-tb-ctl .ap-sortlab { flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .ap-tb-ctl .ap-sortlab .ap-select { min-width: 9.2rem; flex: 1 1 auto; max-width: 11rem; } }

/* ---------- game page v76: banner on top (picture shown whole over a blurred copy of itself), then stores, deal check,
   price history, ratings, bundles and DLC in one column. */
.gp-hero { padding-top: 1.6rem; }
.gp-banner { --ink: #e6ebf2; --muted: #b4c0d0; --line: rgba(255, 255, 255, .28); --surface: rgba(18, 26, 38, .55); --link: #8fb6ff;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; background: #121a26; color: #e6ebf2; }
.gp-banner::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--art) center / cover;
  filter: blur(26px) brightness(.42) saturate(1.2); }
.gp-banner-in { display: grid; gap: 1rem; padding: 1rem; }
.gp-banner-text { display: grid; align-content: center; gap: .2rem; min-width: 0; }
.gp-banner-text h1 { margin: 0; }
.gp-banner .lead-price { margin: .4rem 0 .7rem; }
.gp-banner .checked { margin: .6rem 0 0; }
.gp-pic { margin: 0; }
.gp-banner .cover { object-fit: contain; background: transparent; }
.gp-banner .art-lead .sticker { font-size: 1.1rem; top: .5rem; left: .5rem; padding: .2rem .5rem .15rem; }
@media (min-width: 820px) {
  .gp-banner-in { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: center; gap: 2rem; padding: 1.6rem 1.8rem; }
  .gp-banner-in > .gp-pic { order: 2; }
}
.gp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .9rem; }
.gp-strip .tags { margin: 0; }
.gp-nbs { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.gp-nb { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--muted); font-size: .9rem; text-decoration: none; }
.gp-nb b { font-size: 1.2rem; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.gp-nb b small { font-size: .7em; color: var(--muted); }
.gp-facts { display: flex; flex-wrap: wrap; gap: .2rem 0; margin: .8rem 0 0; font-size: .92rem; }
.gp-facts dt { margin-right: .4rem; } .gp-facts dd { margin: 0 1.4rem 0 0; font-weight: 600; }
.gp-hero + section { margin-top: 1.6rem; }
.gp-flow { display: grid; gap: 1rem; margin-top: 1.6rem; }
.gp-flow > .deal-check, .gp-flow > .history { margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gp-flow > .history h2, .gp-flow > .deal-check h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.game > .ratings, .game > .gp-box { margin-top: 1.6rem; }
.gp-box h2 { margin: 0 0 .7rem; }
.gp-box .note { margin: .8rem 0 0; }
.gp-img { display: block; width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 6px; background: var(--paper); }
.gp-img.cover-blank { font-size: .6rem; padding: .25rem; }
.gp-bundle { position: relative; display: grid; gap: .8rem; padding: .8rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gp-bundle.gp-save { border-color: rgba(60, 199, 154, .45); background: linear-gradient(135deg, rgba(60, 199, 154, .14), var(--surface) 70%); }
@media (min-width: 560px) { .gp-bundle { grid-template-columns: 13rem minmax(0, 1fr); align-items: center; } }
.gp-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; align-content: start; }
.gp-n1 { grid-template-columns: minmax(0, 1fr); }
.gp-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* side by side on a phone */
@media (min-width: 560px) { .gp-n2 { grid-template-columns: minmax(0, 1fr); } }   /* stacked beside the text; the text is as tall as the pair */
.gp-n3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* the third sits centred on the second row */
.gp-n3 .gp-img { grid-column: span 2; }
.gp-n3 .gp-img:nth-child(3) { grid-column: 2 / span 2; }
.gp-bundle h3 { margin: 0 0 .2rem; font-size: 1rem; }
.gp-bundle h3 a, .gp-dlc h3 a { color: var(--ink); text-decoration: none; }
.gp-bundle h3 a::after, .gp-dlc h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 12px; }   /* the whole card is the link, like the game grid */
.gp-bundle:hover, .gp-dlc:hover { border-color: var(--link); }
.gp-price { margin: 0; font-variant-numeric: tabular-nums; }
.gp-bundle .gp-price strong { font-size: 1.3rem; font-stretch: 115%; font-weight: 900; }
.gp-what { margin: .1rem 0 .2rem; font-size: .9rem; font-weight: 700; color: #4fe0b0; }
:root[data-theme="light"] .gp-what { color: #0f7a55; }
.gp-dlcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 720px) { .gp-dlcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gp-dlc { position: relative; display: grid; gap: .4rem; align-content: start; padding: .5rem .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.gp-dlc.gp-onsale { border-color: var(--sticker); }
.gp-pic { position: relative; }
.gp-chip { position: absolute; top: .4rem; right: .4rem; padding: .05rem .4rem; border-radius: 4px; background: var(--sticker); color: var(--sticker-ink); font-size: .72rem; font-weight: 900; }
.gp-dlc h3 { margin: 0; padding-inline: .2rem; font-size: .88rem; line-height: 1.25; }
.gp-dlc .gp-price { padding-inline: .2rem; font-size: .9rem; }
.gp-dlc .gp-price strong { font-size: 1rem; }

/* v77: the store name is the way out (highlighted like the Daily drop title); bundle pictures as tall as the text; phones */
.store-go { color: var(--sticker); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 212, 59, .55);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.store-go .go { display: inline-block; margin-left: .25rem; transition: transform .15s; }
.store-go:hover { text-decoration-color: var(--sticker); } .store-go:hover .go { transform: translateX(4px); }
:root[data-theme="light"] .gp-banner .store-go { color: #ffd43b; }
.gp-banner .lead-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; }
.gp-banner .actions { margin-top: .2rem; }
.gp-bundle { align-items: stretch; }
.gp-collage { align-self: stretch; grid-auto-rows: 1fr; }
.gp-collage .gp-img { height: 100%; min-height: 0; }
.gp-bundle-text { display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; }
.gp-bundle-text > * { margin: 0; }
.gp-dlc h3, .gp-bundle h3, .gp-dlc p, .gp-bundle p, .gp-bundle .sub { user-select: text; }
.gp-bundle h3 a, .gp-dlc h3 a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.gp-bundle h3 a:hover, .gp-dlc h3 a:hover { color: var(--link); text-decoration-color: var(--link); }
@media (max-width: 700px) {
  .gp-banner-in { padding: .8rem; gap: .8rem; }
  .gp-banner-text h1 { font-size: 1.7rem; }
  .gp-banner .lead-price strong { font-size: 2rem; }
  .gp-strip { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: .8rem; }
  .gp-nbs { justify-content: space-between; gap: .2rem .6rem; }
  .gp-nb { flex-direction: column; align-items: center; gap: 0; font-size: .78rem; }
  .gp-strip .tags { flex-wrap: wrap; gap: .35rem; }
  .gp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; font-size: .9rem; }
  .gp-facts dt { margin: 0; color: var(--muted); }
  .gp-facts dd { margin: 0; }
}
a.gp-nb:hover { text-decoration: underline; text-underline-offset: 3px; }
.gp-dlc.gp-text { padding: .7rem .8rem; gap: .25rem; }
.gp-dlc.gp-text h3 { padding-inline: 0; font-size: .95rem; }
.gp-dlc.gp-text .gp-price { padding-inline: 0; }
.gp-dlc.gp-text .gp-chip { top: .6rem; right: .6rem; }
.gp-dlc.gp-text h3 { padding-right: 3rem; }
.gp-dlc.gp-text .gp-what { margin: 0; font-size: .82rem; }

/* System requirements box: one platform is a plain table. More than one gets a row of tabs instead of a wide
   table, so a phone never scrolls to see 2-3 platforms' worth of columns (CSS-only tabs: a radio input per OS,
   its label, and :checked shows the matching panel). */
.pcreq-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pcreq-table th, .pcreq-table td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.pcreq-table tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.pcreq-table td { overflow-wrap: break-word; }
.pcreq-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.pcreq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; box-sizing: border-box; width: 100%; }
.pcreq-tabs label { flex: 0 1 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem;
  border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--muted);
  cursor: pointer; max-width: 100%; box-sizing: border-box; }
.pcreq-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.pcreq-panel { display: none; }
#pcreq-tab-windows:checked ~ .pcreq-tabs label[for="pcreq-tab-windows"] { border-color: #5aa9ff; color: var(--ink);
  background: color-mix(in srgb, #5aa9ff 16%, transparent); }
#pcreq-tab-macos:checked ~ .pcreq-tabs label[for="pcreq-tab-macos"] { border-color: #b9a7ff; color: var(--ink);
  background: color-mix(in srgb, #b9a7ff 16%, transparent); }
#pcreq-tab-linux:checked ~ .pcreq-tabs label[for="pcreq-tab-linux"] { border-color: #ffb347; color: var(--ink);
  background: color-mix(in srgb, #ffb347 16%, transparent); }
#pcreq-tab-windows:checked ~ .pcreq-panel-windows,
#pcreq-tab-macos:checked ~ .pcreq-panel-macos,
#pcreq-tab-linux:checked ~ .pcreq-panel-linux { display: block; }
@media (max-width: 700px) {
  .pcreq-table { font-size: .82rem; }
  .pcreq-table th, .pcreq-table td { padding: .45rem .4rem; }
}

/* v78: the price chart has a squarer phone version with bigger text; one of the two is shown */
.hist-fig[hidden] { display: none !important; }
.hist-fig.hf-narrow { display: none; }
.hist-fig .narrow .ylab, .hist-fig .narrow .xlab { font-size: 13px; }
.hist-fig .narrow .lowlab { font-size: 12px; }
.hist-fig .narrow .line { stroke-width: 2.5; } .hist-fig .narrow .line.best { stroke-width: 3.5; }
@media (max-width: 700px) { .hist-fig.hf-wide { display: none; } .hist-fig.hf-narrow { display: block; } .hist-fig svg { max-height: none; } }
/* v79 */
.gp-banner .lead-price { margin-bottom: 0; }
.gp-banner .lead-was { margin: .1rem 0 .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; font-size: 1.05rem; }
.gp-banner .lead-was s { color: var(--muted); }
.gp-pic { position: relative; }
.gp-pic .wish { top: .5rem; right: .5rem; }
.gp-strip, .gp-nbs, .gp-strip .tags { min-width: 0; max-width: 100%; }
.gp-hero { overflow-x: clip; }
@media (max-width: 700px) { .gp-banner .lead-price strong { font-size: 1.75rem; } .gp-banner .lead-price { font-size: 1rem; flex-wrap: nowrap; } .store-go { white-space: nowrap; } }
.gp-dlc .gp-img.cover-blank { font-size: .85rem; padding: .5rem .6rem; align-items: center; }
/* v82: the rating pills carry the small ring (players) or square (critics) gauge, no bigger than the text line */
.gp-nb { align-items: center; gap: .4rem; }
.gp-nb .rt-gauge { width: 3.1rem; height: 3.1rem; flex: none; }
.gp-nb .rt-gauge circle, .gp-nb .rt-gauge rect { stroke-width: 5; }
.gp-nb .rt-num { font-size: 1rem; }
.gp-nb .rt-num small { display: none; }
.gp-nb { font-size: 1rem; }
@media (max-width: 700px) { .gp-nb { gap: .15rem; } }
/* bundle cards are one height whatever is inside */
@media (min-width: 560px) {
  .gp-bundle { height: 9.8rem; box-sizing: border-box; }
  .gp-bundle-text .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gp-bundle h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gp-collage { min-height: 0; overflow: hidden; }
}

/* ---------- v76: light theme with more colour (dark untouched). Cool blue-tinted panels, a warm sun
   corner, coloured section headings, quick tiles in four tints, tinted keys and a coloured footer.
   Text colours stay dark on light tints (contrast >= 4.5:1). */
:root[data-theme="light"] {
  --tint-blue: #e3eefb; --tint-gold: #fff1c2; --tint-mint: #dcf3e8; --tint-rose: #fbe4e6; --tint-violet: #ebe5f8;
  --accent: #2456c7;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 90% -8%, rgba(255, 196, 40, .34), transparent 62%),
    radial-gradient(900px 560px at -6% 6%, rgba(36, 120, 230, .22), transparent 60%),
    radial-gradient(800px 600px at 60% 105%, rgba(60, 199, 154, .16), transparent 60%),
    linear-gradient(180deg, #d3e0f1 0, #e0e9f5 700px, #dde7f3 100%);
  background-attachment: fixed;
}
/* filter rail: blue-tinted panel (boxes inside stay flat) and bold blue headings */
:root[data-theme="light"] .box { background: linear-gradient(180deg, #ffffff, #f0f6fd); border-color: #bfd0e6; }
:root[data-theme="light"] .rail .box { background: none; }
:root[data-theme="light"] .rail form { background: linear-gradient(180deg, #ffffff 0, #eaf2fc 55%, #fff6d6 100%);
  border-radius: 10px; }
:root[data-theme="light"] .box:hover, :root[data-theme="light"] .box:focus-within { border-color: rgba(214, 160, 0, .8); }
:root[data-theme="light"] .box legend, :root[data-theme="light"] .rail h2 { color: #17398a; }
:root[data-theme="light"] .key, :root[data-theme="light"] .key-select, :root[data-theme="light"] .sort select {
  background: linear-gradient(180deg, #ffffff, #e6effa); border-color: #b3c5de; }
:root[data-theme="light"] .key:hover, :root[data-theme="light"] .qk:hover, :root[data-theme="light"] .more:hover,
:root[data-theme="light"] .filters-toggle:hover { border-color: var(--accent); }
:root[data-theme="light"] .keys .key:has(input:checked) { background: var(--sticker); }
:root[data-theme="light"] .keys .key:has(input[value=""]:checked) { background: #dce8f8; border-color: var(--accent); }
/* quick tiles and tabs */
:root[data-theme="light"] .qk { border-left: 4px solid var(--accent); background: linear-gradient(180deg, #ffffff, var(--tint-blue)); }
:root[data-theme="light"] .qk.on { background: var(--sticker); border-left-color: #b88700; }
:root[data-theme="light"] .coll-tabs { border-bottom-color: #9fb6d6; }
:root[data-theme="light"] .ct:hover { color: var(--accent); }
/* results bar becomes a soft blue ribbon; cards get a coloured hover edge */
:root[data-theme="light"] .results-bar { background: linear-gradient(90deg, #d9e7f9, #e9f1fb 60%, #fff3cc);
  border: 1px solid #bfd0e6; border-radius: 12px; padding: .55rem .8rem; }
:root[data-theme="light"] .card { background: linear-gradient(180deg, #ffffff, #f1f6fc); border-color: #c3d2e6; }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .card:focus-within { background: linear-gradient(180deg, #ffffff, #fff8dc); }
:root[data-theme="light"] .card .price strong { color: #0b5a3c; }
:root[data-theme="light"] .card .price s { color: #5b6b80; }
:root[data-theme="light"] .labels li { background: #e8f0fb; border-color: #bccde3; }
:root[data-theme="light"] .cover { box-shadow: 0 6px 14px -8px rgba(20, 40, 80, .55); }
/* headings with a coloured marker, links that warm up on hover */
:root[data-theme="light"] main > h2, :root[data-theme="light"] .results > h2 { color: #17398a; }
:root[data-theme="light"] main > h2::before { content: ""; display: inline-block; width: .38rem; height: 1em; margin-right: .5rem;
  border-radius: 2px; background: linear-gradient(180deg, #ffd43b, #e08a00); vertical-align: -.12em; }
:root[data-theme="light"] .top nav a:hover { color: #ffd43b; }
:root[data-theme="light"] .foot { background: linear-gradient(180deg, transparent, rgba(36, 86, 199, .10)); border-top: 3px solid #e0a800;
  border-radius: 0 0 14px 14px; }
:root[data-theme="light"] .table-wrap, :root[data-theme="light"] .deal-check, :root[data-theme="light"] .advice,
:root[data-theme="light"] .hist-box { background: linear-gradient(180deg, #ffffff, #eff5fc); border-color: #bfd0e6; }
:root[data-theme="light"] .rail-all, :root[data-theme="light"] .rail-clear { color: #1d4cb0; }

/* ---------- v77: no near-white surfaces left in the light theme. Panels, cards, keys and tables start from a soft
   blue tint instead of white; only the very top highlight of a key stays light. */
:root[data-theme="light"] {
  --surface: #e6eef9; --line: #b4c6de; --key-top: #f3f7fc; --key-face: #d9e6f6; --key-edge: #a6b9d3;
  --tint-blue: #d3e4f8; --tint-gold: #ffe9a8; --tint-mint: #c6ecdb; --tint-rose: #f8d3d8;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 90% -8%, rgba(255, 190, 30, .42), transparent 62%),
    radial-gradient(900px 560px at -6% 6%, rgba(36, 120, 230, .30), transparent 60%),
    radial-gradient(800px 600px at 60% 105%, rgba(40, 190, 140, .22), transparent 60%),
    linear-gradient(180deg, #c5d6ec 0, #d3e0f1 700px, #cfdcee 100%);
  background-attachment: fixed;
}
:root[data-theme="light"] .rail form { background: linear-gradient(180deg, #e3edfa 0, #d6e5f8 55%, #fbeab6 100%); }
:root[data-theme="light"] .box { background: linear-gradient(180deg, #e8f0fb, #dae7f8); border-color: #a9bdd8; }
:root[data-theme="light"] .card { background: linear-gradient(180deg, #e9f1fb, #d9e6f7); border-color: #a9bdd8; }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .card:focus-within { background: linear-gradient(180deg, #fff3c9, #ffe9a8); }
:root[data-theme="light"] .key, :root[data-theme="light"] .key-select, :root[data-theme="light"] .sort select,
:root[data-theme="light"] .more, :root[data-theme="light"] .filters-toggle, :root[data-theme="light"] .rail-close {
  background: linear-gradient(180deg, #f3f7fc, #d3e2f5); border-color: #9fb5d2; }
:root[data-theme="light"] .qk { background: linear-gradient(180deg, #eaf2fc, var(--tint-blue)); }
:root[data-theme="light"] .qk.on { background: var(--sticker); }
:root[data-theme="light"] .keys .key:has(input[value=""]:checked) { background: #c4d8f2; }
:root[data-theme="light"] .results-bar { background: linear-gradient(90deg, #c9dcf5, #dbe8f9 60%, #ffe7a3); border-color: #a9bdd8; }
:root[data-theme="light"] .table-wrap, :root[data-theme="light"] .deal-check, :root[data-theme="light"] .advice,
:root[data-theme="light"] .hist-box { background: linear-gradient(180deg, #e9f1fb, #d9e6f7); border-color: #a9bdd8; }
:root[data-theme="light"] .slide { background: #e3edfa; }
:root[data-theme="light"] .slide .pbox { background: #d3e2f5; }
:root[data-theme="light"] .labels li { background: #cfdff4; border-color: #9fb5d2; }
:root[data-theme="light"] .wish { background: rgba(230, 238, 249, .92); }
:root[data-theme="light"] .foot { background: linear-gradient(180deg, transparent, rgba(36, 86, 199, .18)); }

/* ---------- v78: calendar day popup in the light theme (its dark fallback panel made dark text unreadable) */
:root[data-theme="light"] .drop-day-dialog { --panel: #e6eef9; background: linear-gradient(180deg, #eaf2fc, #d6e5f8); border-color: #9fb5d2;
  color: var(--ink); box-shadow: 0 20px 70px rgba(20, 40, 80, .45); }
:root[data-theme="light"] .drop-day-dialog::backdrop { background: rgba(20, 32, 51, .55); }
:root[data-theme="light"] .drop-day-date, :root[data-theme="light"] .drop-day-note { color: #3f5069; }
:root[data-theme="light"] .drop-day-content h2, :root[data-theme="light"] .drop-day-price { color: var(--ink); }
:root[data-theme="light"] .drop-day-content a:not(.buy) { color: #1d4cb0; }

/* the grey slab behind the "All deals" ribbon (sticky bar backdrop) goes away in the light theme: the ribbon itself is opaque */
:root[data-theme="light"] .sticky-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-theme="light"] .results-bar { box-shadow: 0 8px 18px -12px rgba(20, 40, 80, .45); }

/* ---------- v79: category tiles: six distinct colours (no repeats within a row of up to six); the hover keeps the tile's own colour
   (coloured lift and glow instead of the dark shadow) */
:root[data-theme="light"] .qk { --c: #2456c7; --c2: #8fb0e8; --t1: #eaf2fc; --t2: #d3e4f8; --glow: 36, 86, 199;
  border-left-color: var(--c); background: linear-gradient(180deg, var(--t1), var(--t2));
  box-shadow: 0 3px 0 var(--c2), 0 8px 12px -8px rgba(var(--glow), .45); }
:root[data-theme="light"] .qk:nth-child(6n+2) { --c: #d19a00; --c2: #ecc861; --t1: #fff6d6; --t2: #ffe9a8; --glow: 200, 140, 0; }
:root[data-theme="light"] .qk:nth-child(6n+3) { --c: #12a07a; --c2: #7fd1b5; --t1: #e3f6ee; --t2: #c6ecdb; --glow: 18, 160, 122; }
:root[data-theme="light"] .qk:nth-child(6n+4) { --c: #d6455d; --c2: #eba0ad; --t1: #fdebed; --t2: #f8d3d8; --glow: 214, 69, 93; }
:root[data-theme="light"] .qk:nth-child(6n+5) { --c: #7a4fd0; --c2: #b9a1ea; --t1: #f1ebfc; --t2: #e0d4f6; --glow: 122, 79, 208; }
:root[data-theme="light"] .qk:nth-child(6n) { --c: #0e8aa0; --c2: #86cbd8; --t1: #e0f3f7; --t2: #bfe6ee; --glow: 14, 138, 160; }
:root[data-theme="light"] .qk:hover, :root[data-theme="light"] .qk:focus-visible {
  border-color: var(--c); border-left-color: var(--c); background: linear-gradient(180deg, var(--t2), var(--t2));
  box-shadow: 0 5px 0 var(--c2), 0 12px 18px -8px rgba(var(--glow), .6); }
:root[data-theme="light"] .qk.on, :root[data-theme="light"] .qk.on:hover { background: var(--sticker); border-color: var(--c); box-shadow: 0 1px 0 var(--c2), 0 0 18px 3px rgba(var(--glow), .45); }
@media (max-width: 979px) { :root[data-theme="light"] .qk:hover { box-shadow: none; } }

/* ---------- v80: price history chart readable on the light theme (the pale dark-theme colours washed out) */
:root[data-theme="light"] .hist-fig .line.best { stroke: #d08a00; stroke-width: 3.5; }
:root[data-theme="light"] .hist-fig .area { fill: rgba(208, 138, 0, .16); }
:root[data-theme="light"] .hist-fig .dot, :root[data-theme="light"] .hist-fig .hov-dot { fill: #d08a00; stroke: #eaf2fc; }
:root[data-theme="light"] .hist-fig .low { stroke: #0f8a62; }
:root[data-theme="light"] .hist-fig .lowlab { fill: #0b6b47; font-weight: 700; }
:root[data-theme="light"] .hist-fig .grid { stroke: #b4c6de; }
:root[data-theme="light"] .hist-fig .ylab, :root[data-theme="light"] .hist-fig .xlab { fill: #3f5069; }
:root[data-theme="light"] .hist-legend .lowkey i { background: repeating-linear-gradient(90deg, #0f8a62 0 5px, transparent 5px 9px); }
:root[data-theme="light"] .hist-fig .line[style*="#8fb6ff"] { stroke: #2456c7 !important; }
:root[data-theme="light"] .hist-fig .line[style*="#c3a6ff"] { stroke: #7a4fd0 !important; }
:root[data-theme="light"] .hist-fig .line[style*="#7ee2a8"] { stroke: #0f8a62 !important; }
:root[data-theme="light"] .hist-fig .line[style*="#ff9fb2"] { stroke: #d6455d !important; }
:root[data-theme="light"] .hist-legend i[style*="#8fb6ff"] { background: #2456c7 !important; }
:root[data-theme="light"] .hist-legend i[style*="#c3a6ff"] { background: #7a4fd0 !important; }
:root[data-theme="light"] .hist-legend i[style*="#7ee2a8"] { background: #0f8a62 !important; }
:root[data-theme="light"] .hist-legend i[style*="#ff9fb2"] { background: #d6455d !important; }

:root[data-theme="light"] .hist-legend i[style*="--sticker"] { background: #d08a00 !important; }

/* ---------- v81: room for the lifted card and its tilted sticker: the sideways-scrolling rows clipped the top of a hovered card
   (overflow-x makes overflow-y clip too), and grid cards touched the bar or heading above them. Spacing only, both themes. */
.slider-track { padding-top: 24px; margin-top: -14px; }
.similar-head { margin-bottom: .5rem; }
.results-bar { margin-bottom: 1.1rem; }
.chips { margin-bottom: 1.5rem; }

/* ---------- v82: page background back to the original `main` look (faint dot texture, soft gold and cyan glows on a grey-blue wash);
   every other light-theme colour stays as approved */
:root[data-theme="light"] body {
  background:
    radial-gradient(rgba(20, 32, 51, .07) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(1100px 560px at 90% 0%, rgba(255, 212, 59, .30), transparent 62%),
    radial-gradient(950px 560px at -8% 10%, rgba(10, 143, 192, .18), transparent 60%),
    linear-gradient(180deg, #d8e0eb 0, #e6ebf2 760px, #e2e8f0 100%);
  background-attachment: fixed;
}

/* ---------- v83: light theme palette "warm grey + indigo" on a multicolour mesh page background (violet, pink, gold, mint, sky blue).
   Cards, panels and keys are neutral so text stays readable on top of the colour; the card hover is a blue glowing border only.
   Dark theme untouched. */
:root[data-theme="light"] {
  --surface: #fafbfd; --line: #cdd2e0; --key-top: #ffffff; --key-face: #e6e9f3; --key-edge: #b9bfd3;
  --accent: #4a43c9; --link: #4a43c9; --focus: #4a43c9;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(650px 520px at 8% 12%, #8f86ff 0, transparent 70%),
    radial-gradient(650px 520px at 92% 10%, #ff8fc4 0, transparent 70%),
    radial-gradient(650px 520px at 55% 45%, #ffd27a 0, transparent 70%),
    radial-gradient(700px 560px at 10% 95%, #7ee0c8 0, transparent 70%),
    radial-gradient(700px 560px at 92% 92%, #7db7ff 0, transparent 70%),
    #ece7ff;
  background-attachment: fixed;
}
:root[data-theme="light"] .rail form { background: linear-gradient(180deg, #f6f7fb 0, #e9ebf6 60%, #fff1d6 100%); }
:root[data-theme="light"] .box, :root[data-theme="light"] .card { background: linear-gradient(180deg, #fafbfd, #eff1f6); border-color: #cdd2e0; }
:root[data-theme="light"] .rail .box { background: none; }
:root[data-theme="light"] .box legend, :root[data-theme="light"] h1, :root[data-theme="light"] main > h2,
:root[data-theme="light"] .similar-head h2 { color: #34308f; }
:root[data-theme="light"] .rail-all, :root[data-theme="light"] .rail-clear { color: #4a43c9; }
:root[data-theme="light"] .key, :root[data-theme="light"] .key-select, :root[data-theme="light"] .sort select,
:root[data-theme="light"] .more, :root[data-theme="light"] .filters-toggle, :root[data-theme="light"] .rail-close {
  background: linear-gradient(180deg, #ffffff, #e6e9f3); border-color: #cdd2e0; }
:root[data-theme="light"] .key:hover, :root[data-theme="light"] .more:hover, :root[data-theme="light"] .filters-toggle:hover { border-color: #4a43c9; }
:root[data-theme="light"] .keys .key:has(input:checked) { background: #ffc23d; }
:root[data-theme="light"] .keys .key:has(input[value=""]:checked) { background: #e6e9f3; border-color: #34308f; }
/* card hover: only the border lights up (blue glow), the card colour stays */
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .card:focus-within {
  background: linear-gradient(180deg, #fafbfd, #eff1f6); border-color: #2456c7;
  box-shadow: 0 0 0 2px rgba(36, 86, 199, .55), 0 14px 30px -12px rgba(36, 86, 199, .5); }
:root[data-theme="light"] .results-bar { background: linear-gradient(90deg, #e9ebf6, #f2f3f8 60%, #fff1d6); border-color: #cdd2e0; }
:root[data-theme="light"] .slide, :root[data-theme="light"] .slide .pbox { background: #fafbfd; }
:root[data-theme="light"] .labels li { background: #e6e9f3; border-color: #cdd2e0; }
:root[data-theme="light"] .coll-tabs { border-bottom-color: #b9bfd3; }
:root[data-theme="light"] .ct:hover { color: #4a43c9; }
:root[data-theme="light"] .ct[aria-selected="true"] { box-shadow: inset 0 -3px 0 #2456c7; }
:root[data-theme="light"] .table-wrap, :root[data-theme="light"] .deal-check, :root[data-theme="light"] .advice,
:root[data-theme="light"] .hist-box { background: linear-gradient(180deg, #fafbfd, #eff1f6); border-color: #cdd2e0; }
:root[data-theme="light"] .foot { background: linear-gradient(180deg, transparent, rgba(74, 67, 201, .14)); }
:root[data-theme="light"] .drop-day-dialog { background: linear-gradient(180deg, #fafbfd, #e9ebf6); border-color: #b9bfd3; }
/* category tiles keep six distinct colours (v79) on a neutral base */
:root[data-theme="light"] .qk { background: linear-gradient(180deg, #ffffff, var(--t1)); }
:root[data-theme="light"] .qk:hover { background: linear-gradient(180deg, #ffffff, var(--t2)); }

/* ---------- Settings > Themes: the picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.theme-opt { display: grid; gap: .35rem; align-content: start; text-align: left; padding: .7rem .8rem .8rem; cursor: pointer; border-radius: 12px;
  background: var(--key-face); border: 2px solid var(--line); color: var(--ink); font: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.theme-opt:hover { transform: translateY(-2px); border-color: var(--muted); }
.theme-opt.on { border-color: var(--sticker); box-shadow: 0 0 0 2px var(--glow); }
.theme-opt.on strong::after { content: " \2713"; color: var(--go); }
.theme-swatch { display: flex; height: 2.2rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.theme-swatch i { flex: 1; }
.theme-opt strong { font-size: 1rem; }
.theme-note { color: var(--muted); font-size: .84rem; line-height: 1.3; }

/* ---------- Dark looks picked in Settings > Themes (data-theme = aurora, arcade, ember, emerald, plum). Classic dark is the default
   and has no attribute. Each look sets a handful of variables; one shared block below turns them into glows, gradients and a coloured hover edge. */
:root[data-theme="aurora"] { --paper: #0d1220; --surface: #151c2e; --line: #2c3a5c; --key-top: #2a3656; --key-face: #1e2842; --key-edge: #090d18; --link: #8fb6ff;
  --th-g1: rgba(99,102,241,.35); --th-g2: rgba(236,72,153,.22); --th-g3: rgba(20,184,166,.25); --th-c1: #18203a; --th-c2: #121a30;
  --th-head: #a5b4fc; --th-hov: #22d3ee; --th-hova: rgba(34,211,238,.45); --th-glow: rgba(99,102,241,.55);
  --th-t1: #6366f1; --th-t2: #22d3ee; --th-t3: #ec4899; --th-t4: #fbbf24; --th-price: #6ee7b7; }
:root[data-theme="arcade"] { --paper: #0a0712; --surface: #150f24; --line: #3a2a63; --key-top: #2c2050; --key-face: #1d1438; --key-edge: #07040e; --link: #7dd3fc;
  --th-g1: rgba(168,85,247,.38); --th-g2: rgba(34,211,238,.22); --th-g3: rgba(236,72,153,.28); --th-c1: #1a1230; --th-c2: #120c24;
  --th-head: #22d3ee; --th-hov: #f0abfc; --th-hova: rgba(232,121,249,.5); --th-glow: rgba(168,85,247,.6);
  --th-t1: #a855f7; --th-t2: #22d3ee; --th-t3: #f472b6; --th-t4: #facc15; --th-price: #facc15; }
:root[data-theme="ember"] { --paper: #14100d; --surface: #201914; --line: #4a382b; --key-top: #3a2c22; --key-face: #2a2019; --key-edge: #0c0907; --link: #fdba74;
  --th-g1: rgba(249,115,22,.32); --th-g2: rgba(220,38,38,.22); --th-g3: rgba(245,158,11,.22); --th-c1: #261c15; --th-c2: #1b140f;
  --th-head: #fdba74; --th-hov: #fbbf24; --th-hova: rgba(251,191,36,.45); --th-glow: rgba(249,115,22,.5);
  --th-t1: #f97316; --th-t2: #ef4444; --th-t3: #fbbf24; --th-t4: #a3e635; --th-price: #fde68a; }
:root[data-theme="emerald"] { --paper: #08130f; --surface: #10201a; --line: #24493c; --key-top: #1f3d33; --key-face: #162d26; --key-edge: #050c09; --link: #6ee7b7;
  --th-g1: rgba(16,185,129,.33); --th-g2: rgba(20,184,166,.22); --th-g3: rgba(132,204,22,.18); --th-c1: #12281f; --th-c2: #0d1e17;
  --th-head: #6ee7b7; --th-hov: #5eead4; --th-hova: rgba(94,234,212,.45); --th-glow: rgba(16,185,129,.5);
  --th-t1: #10b981; --th-t2: #f59e0b; --th-t3: #38bdf8; --th-t4: #f472b6; --th-price: #a7f3d0; }
:root[data-theme="plum"] { --paper: #150c1c; --surface: #211430; --line: #4b2f66; --key-top: #3a2450; --key-face: #2a1a3c; --key-edge: #0c0610; --link: #d8b4fe;
  --th-g1: rgba(147,51,234,.38); --th-g2: rgba(244,63,94,.2); --th-g3: rgba(250,204,21,.16); --th-c1: #27173a; --th-c2: #1c112b;
  --th-head: #fcd34d; --th-hov: #facc15; --th-hova: rgba(250,204,21,.5); --th-glow: rgba(147,51,234,.55);
  --th-t1: #a855f7; --th-t2: #facc15; --th-t3: #fb7185; --th-t4: #34d399; --th-price: #fde68a; }
:root[data-theme]:not([data-theme="light"]) body {
  background: radial-gradient(900px 600px at 6% 4%, var(--th-g1), transparent 62%), radial-gradient(900px 600px at 96% 8%, var(--th-g2), transparent 62%),
    radial-gradient(1000px 700px at 80% 95%, var(--th-g3), transparent 62%), var(--paper);
  background-attachment: fixed; }
:root[data-theme]:not([data-theme="light"]) .box, :root[data-theme]:not([data-theme="light"]) .card,
:root[data-theme]:not([data-theme="light"]) .qk { background: linear-gradient(180deg, var(--th-c1), var(--th-c2)); border-color: var(--line); }
:root[data-theme]:not([data-theme="light"]) .rail .box { background: none; }
:root[data-theme]:not([data-theme="light"]) .rail form { background: linear-gradient(180deg, var(--th-c1), var(--th-c2)); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px -14px var(--th-glow); }
:root[data-theme]:not([data-theme="light"]) .box legend, :root[data-theme]:not([data-theme="light"]) h1,
:root[data-theme]:not([data-theme="light"]) main > h2, :root[data-theme]:not([data-theme="light"]) .similar-head h2 { color: var(--th-head); }
:root[data-theme]:not([data-theme="light"]) .card:hover, :root[data-theme]:not([data-theme="light"]) .card:focus-within {
  border-color: var(--th-hov); box-shadow: 0 0 0 2px var(--th-hova), 0 0 32px -4px var(--th-hova), 0 16px 30px -14px #000; }
:root[data-theme]:not([data-theme="light"]) .qk { border-left: 4px solid var(--th-t1); }
:root[data-theme]:not([data-theme="light"]) .qk:nth-child(4n+2) { border-left-color: var(--th-t2); }
:root[data-theme]:not([data-theme="light"]) .qk:nth-child(4n+3) { border-left-color: var(--th-t3); }
:root[data-theme]:not([data-theme="light"]) .qk:nth-child(4n) { border-left-color: var(--th-t4); }
:root[data-theme]:not([data-theme="light"]) .qk.on { background: var(--sticker); }
:root[data-theme]:not([data-theme="light"]) .results-bar { background: linear-gradient(90deg, var(--th-c1), var(--th-c2)); border: 1px solid var(--line);
  border-radius: 12px; padding: .55rem .8rem; box-shadow: 0 10px 26px -16px var(--th-glow); }
:root[data-theme]:not([data-theme="light"]) .sticky-bar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme]:not([data-theme="light"]) .top { border-bottom-color: var(--th-hov); }
:root[data-theme]:not([data-theme="light"]) .foot { border-top-color: var(--th-hov); }
:root[data-theme]:not([data-theme="light"]) .ct[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--th-hov); }
:root[data-theme]:not([data-theme="light"]) .hist-box, :root[data-theme]:not([data-theme="light"]) .deal-check,
:root[data-theme]:not([data-theme="light"]) .advice, :root[data-theme]:not([data-theme="light"]) .table-wrap {
  background: linear-gradient(180deg, var(--th-c1), var(--th-c2)); border-color: var(--line); box-shadow: 0 12px 30px -18px var(--th-glow); }
:root[data-theme]:not([data-theme="light"]) .card .price strong { color: var(--th-price); }

/* ---------- header theme list (opened by the sun/moon button; every theme is one button) */
.theme-menu { position: absolute; z-index: 60; width: min(250px, calc(100vw - 16px)); padding: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); }
.theme-menu[hidden] { display: none; }
.theme-menu-opt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; }
.theme-menu-opt:hover { background: var(--key-face); }
.theme-menu-opt.on { background: var(--key-face); box-shadow: inset 3px 0 0 var(--sticker); }
.theme-menu-opt.on::after { content: "\2713"; margin-left: auto; color: var(--go); }
.theme-menu-dots { display: flex; flex: none; width: 2.1rem; height: 1rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.theme-menu-dots i { flex: 1; }
.theme-menu-more { display: block; margin-top: .25rem; padding: .5rem .6rem; border-top: 1px solid var(--line); color: var(--link); font-size: .9rem; text-decoration: none; }
.theme-menu-more:hover { text-decoration: underline; }

/* the game page banner is always a dark picture panel: its title keeps the light banner ink in every theme (heading colours must not reach it) */
:root[data-theme] .gp-banner .gp-banner-text h1 { color: var(--ink); }

/* ---------- Light looks picked in Settings > Themes (html gets data-theme="light" plus data-look = sky, mint, peach, lavender, sand). Each look sets variables;
   one shared block turns them into the colour haze, tinted cards, tile edges and border hover. Plain Light has no data-look. */
:root[data-theme="light"][data-look="sky"] { --paper: #e9f1fb; --line: #b9cfea; --link: #1f5fbf;
  --lk-g1: rgba(120,170,255,.55); --lk-g2: rgba(255,190,150,.5); --lk-g3: rgba(190,160,255,.4); --lk-g4: rgba(255,255,255,.5); --lk-c1: #fbfdff; --lk-c2: #eaf2fc;
  --lk-head: #1d4f9e; --lk-hov: #2f80ed; --lk-hova: rgba(47,128,237,.5); --lk-glow: rgba(47,128,237,.5);
  --lk-t1: #2f80ed; --lk-t2: #f2994a; --lk-t3: #9b6bdc; --lk-t4: #27ae9a; }
:root[data-theme="light"][data-look="mint"] { --paper: #e8f6ee; --line: #b4dcc6; --link: #0f7a4f;
  --lk-g1: rgba(90,220,160,.5); --lk-g2: rgba(150,230,120,.42); --lk-g3: rgba(90,200,220,.4); --lk-g4: rgba(255,255,255,.5); --lk-c1: #fbfffc; --lk-c2: #e6f6ed;
  --lk-head: #0e6b45; --lk-hov: #16a36a; --lk-hova: rgba(22,163,106,.5); --lk-glow: rgba(22,163,106,.45);
  --lk-t1: #16a36a; --lk-t2: #e8a317; --lk-t3: #2d9cdb; --lk-t4: #e0577a; }
:root[data-theme="light"][data-look="peach"] { --paper: #fdeee4; --line: #f0c7b0; --link: #c2410c;
  --lk-g1: rgba(255,170,120,.55); --lk-g2: rgba(255,130,170,.4); --lk-g3: rgba(255,215,120,.5); --lk-g4: rgba(255,255,255,.5); --lk-c1: #fffaf6; --lk-c2: #fde9dc;
  --lk-head: #a8340f; --lk-hov: #ef5b3c; --lk-hova: rgba(239,91,60,.48); --lk-glow: rgba(239,91,60,.42);
  --lk-t1: #ef5b3c; --lk-t2: #f2a900; --lk-t3: #d6457a; --lk-t4: #2aa198; }
:root[data-theme="light"][data-look="lavender"] { --paper: #f1eafc; --line: #d2c2f0; --link: #6a3fc2;
  --lk-g1: rgba(180,140,255,.55); --lk-g2: rgba(255,160,210,.45); --lk-g3: rgba(140,170,255,.45); --lk-g4: rgba(255,255,255,.5); --lk-c1: #fdfbff; --lk-c2: #f0e8fc;
  --lk-head: #55309e; --lk-hov: #8b5cf6; --lk-hova: rgba(139,92,246,.5); --lk-glow: rgba(139,92,246,.42);
  --lk-t1: #8b5cf6; --lk-t2: #ec4899; --lk-t3: #3b82f6; --lk-t4: #14b8a6; }
:root[data-theme="light"][data-look="sand"] { --paper: #f6efe2; --line: #e0d1b4; --link: #0b7a75;
  --lk-g1: rgba(120,210,200,.5); --lk-g2: rgba(235,170,120,.45); --lk-g3: rgba(240,215,140,.5); --lk-g4: rgba(255,255,255,.5); --lk-c1: #fffdf8; --lk-c2: #f6ecda;
  --lk-head: #0a625e; --lk-hov: #12a39b; --lk-hova: rgba(18,163,155,.5); --lk-glow: rgba(18,163,155,.4);
  --lk-t1: #12a39b; --lk-t2: #d9703c; --lk-t3: #c9a227; --lk-t4: #6a7fdb; }
:root[data-theme="light"][data-look] body { background: radial-gradient(900px 600px at 6% 4%, var(--lk-g1), transparent 62%), radial-gradient(900px 600px at 96% 8%, var(--lk-g2), transparent 62%),
    radial-gradient(1000px 700px at 80% 95%, var(--lk-g3), transparent 62%), radial-gradient(700px 500px at 40% 50%, var(--lk-g4), transparent 65%), var(--paper) !important;
  background-attachment: fixed; }
:root[data-theme="light"][data-look] .box, :root[data-theme="light"][data-look] .card { background: linear-gradient(180deg, var(--lk-c1), var(--lk-c2)) !important; border-color: var(--line) !important; }
:root[data-theme="light"][data-look] .rail .box { background: none !important; }
:root[data-theme="light"][data-look] .rail form { background: linear-gradient(180deg, var(--lk-c1), var(--lk-c2)); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px -14px var(--lk-glow); }
:root[data-theme="light"][data-look] .box legend, :root[data-theme="light"][data-look] main > h2, :root[data-theme="light"][data-look] .similar-head h2, :root[data-theme="light"][data-look] h1 { color: var(--lk-head) !important; }
:root[data-theme="light"][data-look] .gp-banner .gp-banner-text h1 { color: var(--ink) !important; }
:root[data-theme="light"][data-look] .card:hover, :root[data-theme="light"][data-look] .card:focus-within { border-color: var(--lk-hov) !important; box-shadow: 0 0 0 2px var(--lk-hova), 0 14px 30px -12px var(--lk-hova) !important; }
:root[data-theme="light"][data-look] .qk { border-left: 4px solid var(--lk-t1) !important; background: linear-gradient(180deg, var(--lk-c1), var(--lk-c2)) !important; }
:root[data-theme="light"][data-look] .qk:nth-child(4n+2) { border-left-color: var(--lk-t2) !important; }
:root[data-theme="light"][data-look] .qk:nth-child(4n+3) { border-left-color: var(--lk-t3) !important; }
:root[data-theme="light"][data-look] .qk:nth-child(4n) { border-left-color: var(--lk-t4) !important; }
:root[data-theme="light"][data-look] .results-bar { background: linear-gradient(90deg, var(--lk-c1), var(--lk-c2)); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; box-shadow: 0 10px 26px -16px var(--lk-glow); }
:root[data-theme="light"][data-look] .top { border-bottom: 2px solid var(--lk-hov) !important; }
:root[data-theme="light"][data-look] .foot { border-top: 2px solid var(--lk-hov) !important; }
:root[data-theme="light"][data-look] .ct[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--lk-hov) !important; }
:root[data-theme="light"][data-look] .hist-box, :root[data-theme="light"][data-look] .deal-check, :root[data-theme="light"][data-look] .advice, :root[data-theme="light"][data-look] .table-wrap { background: linear-gradient(180deg, var(--lk-c1), var(--lk-c2)) !important; border-color: var(--line) !important; box-shadow: 0 12px 30px -18px var(--lk-glow); }

/* theme lists: a heading and divider for the dark group and the light group */
.theme-menu-head { margin: .35rem .2rem .15rem; padding-top: .4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.theme-menu-head:first-child { margin-top: .1rem; padding-top: 0; border-top: 0; }
.theme-group-head { grid-column: 1 / -1; margin: .6rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.theme-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* "Report a wrong price or match" fold-out at the bottom of game pages */
.gp-report { margin: 1.4rem 0 0; }
.gp-report summary { cursor: pointer; display: inline-block; color: var(--muted); font-size: .9rem; font-weight: 600; padding: .3rem 0; }
.gp-report summary:hover, .gp-report summary:focus-visible { color: var(--ink); }
.rp-form { margin-top: .6rem; padding: .9rem 1rem; max-width: 34rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rp-form fieldset { border: 0; margin: 0 0 .7rem; padding: 0; min-width: 0; }
.rp-form legend { padding: 0; margin-bottom: .3rem; font-weight: 800; font-size: .95rem; }
.rp-opt { display: block; padding: .25rem 0; overflow-wrap: anywhere; }
.rp-note { display: block; font-weight: 700; font-size: .92rem; }
.rp-hint { color: var(--muted); font-weight: 400; }
.rp-note textarea { display: block; width: 100%; margin-top: .3rem; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.rp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .8rem 0 .2rem; }
.rp-send { padding: .5rem 1rem; border-radius: 8px; border: 0; background: var(--sticker); color: var(--sticker-ink); font-weight: 800; cursor: pointer; }
.rp-send:disabled { opacity: .55; cursor: default; }
.rp-msg { font-size: .9rem; color: var(--muted); }
.rp-msg.rp-bad { color: #ff8f7a; }
:root[data-theme="light"] .rp-msg.rp-bad { color: #b3321b; }
.rp-fine { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }

/* "Recently viewed" row on the home page */
.recent { margin: 0 0 1rem; }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.rv-head h2 { margin: 0; font-size: 1.05rem; }
.rv-clear { border: 0; background: none; padding: .2rem 0; color: var(--muted); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.rv-clear:hover, .rv-clear:focus-visible { color: var(--ink); }
.rv-row { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rv-tile { flex: 0 0 9.5rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; padding: .45rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.rv-tile:hover, .rv-tile:focus-visible { border-color: var(--sticker); }
.rv-pic { display: block; }
.rv-pic .cover { display: block; }
.rv-pic .cover-blank { padding: .35rem .4rem; font-size: .72rem; overflow: hidden; }
.rv-title { font-size: .85rem; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; min-height: 2.1rem; }
.rv-price { font-size: .85rem; }
.rv-off { color: var(--go); font-weight: 800; }
.rv-full { color: var(--muted); font-size: .78rem; }

/* Share button on game pages; "Picked for you" on the wishlist (reuses the Recently viewed tiles) */
.gp-share { justify-self: start; margin-top: .35rem; padding: .35rem .8rem; font-size: .85rem; }
.gp-share[hidden] { display: none; }
.rv-sub { margin: 0; color: var(--muted); font-size: .85rem; }
.recs { margin: 1.5rem 0 1rem; }
.recs .rv-head { flex-wrap: wrap; }
.recs .rv-head h2 { white-space: nowrap; }
.rv-row.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); overflow: visible; }
.rv-grid .rv-tile { flex: none; }
.recs.recs-off { margin-bottom: .6rem; }
.wl-account .browse[data-mode="wishlist"] :is(.sticky-bar, #results, #other-games, .see-all, .recs) { display: none !important; }
.rv-row[hidden] { display: none; }

/* Deals page: "Similar to <game>" rows inside the grid (full width), and the Recently viewed tab */
.sim-row { grid-column: 1 / -1; min-width: 0; }
.sim-row:empty { display: none; }
.sim-off { margin: 0; color: var(--muted); font-size: .85rem; }
.coll-row .coll-tabs > .ct-recent[hidden] { display: none; }
.coll-row .coll-tabs > .ct-recent[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }

/* v4: the Similar rows: the full grid card, smaller, as many across as fit (recs.js counts them from the width: --sim-n), arrows for the rest */
.sim-row { margin-inline: -8px; }   /* a grid card draws 8px beyond its cell (margin -8px), so the box lines up with the cards' outer edges */
.sim-row .sim { position: relative; margin: 0; padding: 1rem 3.6rem calc(1rem + 14px);   /* the cards own 12px bottom halo counts: the gap under the cards equals the one above the title */
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel, rgba(255, 255, 255, .03)); }
.sim .rv-head { align-items: baseline; margin-bottom: .5rem; }
.sim .rv-head h2 { font-size: 1rem; line-height: 1.3; min-width: 0; }
.sim-acts { display: inline-flex; gap: 1rem; flex-wrap: nowrap; white-space: nowrap; flex: none; justify-content: flex-end; align-items: baseline; }
.sim-box { position: static; }
.sim-arr { position: absolute; top: 55%; transform: translateY(-50%); z-index: 3; width: 32px; height: 56px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center;
  background: rgba(10, 14, 22, .78); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sim-arr.l { left: .6rem; } .sim-arr.r { right: .6rem; }   /* in the box's side padding: the cards (and their 8px hover halo) start after it */
.sim-arr[hidden] { display: none; }
.sim-arr:hover:not(:disabled) { background: rgba(10, 14, 22, .95); color: var(--sticker); }
.sim-arr:disabled { opacity: .3; cursor: default; }
.sim-cards { --sim-n: 1; display: grid; grid-template-columns: repeat(var(--sim-n), minmax(0, 1fr)); gap: 1.2rem 1.6rem; padding-top: 1.1rem; }
.sim-cards .card { font-size: .8rem; }
.sim-cards .card h3 { font-size: .92rem; margin-top: .45rem; }
.sim-cards .card .price strong { font-size: 1rem; }
.sim-cards .card .rating, .sim-cards .card .rating * { font-size: .78rem; }
@media (max-width: 760px) { .coll-row .coll-tabs > .ct-recent { display: none !important; } }
@media (max-width: 760px) {
  .sim-row .sim { padding-left: 2.9rem; padding-right: 2.9rem; }
  .sim .rv-head { flex-wrap: wrap; row-gap: .3rem; }
  .sim .rv-head h2 { flex: 1 1 100%; }
  .sim-acts { gap: 1rem; }
  .sim-arr { width: 26px; height: 48px; font-size: 1.3rem; }
  .sim-arr.l { left: .4rem; } .sim-arr.r { right: .4rem; }
}

/* v4: whole bundle / DLC cards are links with the game grid's hover; store names in the store colours; share button after the title; one-line history note */
.gp-bundle, .gp-dlc { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gp-bundle:hover, .gp-dlc:hover, .gp-bundle:focus-within, .gp-dlc:focus-within { transform: translateY(-3px); border-color: rgba(255, 212, 59, .7);
  box-shadow: 0 0 0 2px rgba(255, 212, 59, .35), 0 14px 26px -14px rgba(0, 0, 0, .8); }
.gp-bundle h3 a:focus-visible::after, .gp-dlc h3 a:focus-visible::after { outline: 2px solid var(--sticker); outline-offset: 2px; }
.gp-titlerow { min-width: 0; }
.gp-titlerow h1 { display: inline; overflow-wrap: anywhere; }
.gp-titlerow .gp-share { display: inline-flex; vertical-align: middle; margin: 0 0 0 .7rem; white-space: nowrap; }
.gp-titlerow .gp-share[hidden] { display: none; }
.gp-banner .store-go.store-steam { color: #66c0f4; text-decoration-color: rgba(102, 192, 244, .55); }
.gp-banner .store-go.store-gog { color: #c18cf0; text-decoration-color: rgba(193, 140, 240, .55); }
:root[data-theme="light"] .gp-banner .store-go.store-steam { color: #66c0f4; }
:root[data-theme="light"] .gp-banner .store-go.store-gog { color: #c18cf0; }
.store-go.store-steam:hover { text-decoration-color: #66c0f4; } .store-go.store-gog:hover { text-decoration-color: #c18cf0; }

/* v4: every category tile the same size (desktop: a box, phone: a row), wherever the text wraps */
.qk { height: 6rem; min-height: 0; box-sizing: border-box; overflow: hidden; align-content: center; }
.qk-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }   /* a long name wraps, never cut with "..." */
.qk-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .qk { height: 3.5rem; }
  .qk-n { -webkit-line-clamp: 1; }
}

/* v5: stars only on the suggestion cards, a tighter title-to-cards gap, swipe room, share button on the title's line */
.sim-cards { touch-action: pan-y; }
.sim-cards .rating .rl, .sim-cards .rating .rp, .sim-cards .rating .rc { display: none; }
.sim .rv-head { margin-bottom: .1rem; }
.sim-cards { padding-top: .55rem; }
.gp-titlerow .gp-share { vertical-align: baseline; position: relative; top: -10px; padding-block: .3rem; line-height: 1.1; }

/* v6: bigger "Similar to" heading; suggestion cards: stars and the deal tag on the left, the prices on the right; notes in the
   bundle/DLC boxes use the full width (one row on desktop); DLC as rows like the bundles, same card look */
.sim .rv-head h2 { font-size: 1.2rem; }
.sim-cards .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-content: start; }
.sim-cards .card > .art, .sim-cards .card > h3, .sim-cards .card > .ends { grid-column: 1 / -1; }
.sim-cards .card > .rating { grid-column: 1; grid-row: 3; margin: .1rem 0 0; align-self: center; }
.sim-cards .card > .price { grid-column: 2; grid-row: 3 / span 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .05rem; margin: .1rem 0 0; }
.sim-cards .card > .price .save { margin: .15rem 0 0; }
.sim-cards .card > .meta { grid-column: 1; grid-row: 4; min-width: 0; }
.bundle-check .note { max-width: none; }
.gp-dlcs { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 720px) { .gp-dlcs { grid-template-columns: minmax(0, 1fr); } }
.gp-dlc { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: .8rem; align-items: center; align-content: center; padding: .5rem .7rem .5rem .5rem; }
.gp-dlc > .gp-pic { grid-column: 1; grid-row: 1 / span 3; }
.gp-dlc > :not(.gp-pic) { grid-column: 2; }
.gp-dlc h3 { padding-inline: 0; font-size: 1rem; }
.gp-dlc .gp-price { padding-inline: 0; }
.gp-dlc.gp-text { grid-template-columns: minmax(0, 1fr); }
.gp-dlc.gp-text > :not(.gp-pic) { grid-column: 1; }
@media (min-width: 560px) { .gp-dlc { grid-template-columns: 11rem minmax(0, 1fr); } }
.gp-dlc { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
@media (min-width: 560px) { .gp-dlc { grid-template-columns: 11rem minmax(0, 1fr) auto; } }
.gp-dlc > .gp-store { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: end; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .02em; border: 1px solid currentColor; }
.gp-store-steam { color: #66c0f4; } .gp-store-gog { color: #c18cf0; }
:root[data-theme="light"] .gp-store-steam { color: #1a6fb0; } :root[data-theme="light"] .gp-store-gog { color: #7a3db0; }
.gp-dlc.gp-text { grid-template-columns: minmax(0, 1fr) auto; }
.gp-dlc.gp-text > .gp-store { grid-column: 2; }
.sim-cards .card > .meta { flex-direction: column; align-items: flex-start; gap: .25rem; }
.sim-cards .card .meta .verdict, .sim-cards .card .meta .store { white-space: nowrap; }
@media (max-width: 560px) { .sim .rv-head h2 { font-size: 1.05rem; } }

/* v7: every bundle picture box one size; DLC rows as big as the bundles; suggestion cards line up row by row; Early Access on one line */
@media (min-width: 560px) { .gp-bundle { grid-template-columns: 12rem minmax(0, 1fr); } }
.gp-collage { height: 8rem; overflow: hidden; }
@media (min-width: 560px) { .gp-collage { height: auto; } }
.gp-collage .gp-img { object-fit: cover; }
.gp-dlc { padding: .8rem; column-gap: 1rem; min-height: 8.4rem; }
@media (min-width: 560px) { .gp-dlc { grid-template-columns: 12rem minmax(0, 1fr) auto; } }
.gp-dlc h3 { font-size: 1.05rem; }
.gp-dlc .gp-price { font-size: 1rem; }
.gp-dlc .gp-price strong { font-size: 1.3rem; font-stretch: 115%; font-weight: 900; }
.gp-dlc > .gp-store { padding: .35rem .9rem; font-size: .92rem; }
.gp-dlc.gp-text { min-height: 0; }
.ea-tag { white-space: nowrap; }
.sim-cards .card > .price { display: contents; }
.sim-cards .card > .price strong { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; margin: 0; }
.sim-cards .card > .price s { grid-column: 2; grid-row: 4; justify-self: end; align-self: center; }
.sim-cards .card > .price .save { grid-column: 2; grid-row: 5; justify-self: end; align-self: start; margin: .15rem 0 0; }
.sim-cards .card > .meta { display: contents; }
.sim-cards .card .meta .store { grid-column: 1; grid-row: 4; align-self: center; }
.sim-cards .card .meta .tags { display: flex; grid-column: 1; grid-row: 5; flex-wrap: wrap; gap: .25rem; align-items: flex-start; margin-top: .15rem; }
.sim-cards .card .meta .tags .labels { display: contents; }
.sim-cards .card .ea-tag { font-size: .68rem; padding: .08rem .35rem; }
.sim-cards .card .meta .tags .verdict, .sim-cards .card .meta .tags .ea-tag { white-space: nowrap; }
.sim-cards .card { column-gap: .5rem; }
.sim-cards .card > .price .save { font-size: .7rem; padding: .05rem .3rem; }
.sim-cards .card .ea-tag { font-size: .64rem; padding: .06rem .3rem; }
@media (min-width: 560px) { .gp-dlc:not(.gp-text) { min-height: 9.8rem; box-sizing: border-box; } }   /* as tall as a bundle row */
/* v8: the DLC picture fills the row's height like a bundle's picture box (no empty band above and below it) */
.gp-dlc:not(.gp-text) { align-items: center; }
.gp-dlc > .gp-pic { align-self: stretch; min-height: 0; }
.gp-dlc > .gp-pic .gp-img { height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 560px) { .gp-dlc:not(.gp-text) { min-height: 8.6rem; } }
@media (max-width: 559px) { .gp-dlc > .gp-pic .gp-img { min-height: 5rem; } }
.gp-dlc:not(.gp-text) { grid-template-rows: 1fr auto auto 1fr; align-content: stretch; }
.gp-dlc:not(.gp-text) > .gp-pic { grid-row: 1 / span 4; }
.gp-dlc:not(.gp-text) > h3 { grid-row: 2; align-self: end; }
.gp-dlc:not(.gp-text) > .gp-price { grid-row: 3; align-self: start; }
.gp-dlc:not(.gp-text) > .gp-store { grid-row: 1 / span 4; }
.gp-dlc > .gp-pic .gp-img.cover-blank { height: 100%; }
@media (max-width: 559px) {
  .gp-dlc:not(.gp-text) { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .gp-dlc:not(.gp-text) > .gp-store { grid-column: 2; grid-row: 4; justify-self: start; align-self: start; margin-top: .45rem; padding: .25rem .75rem; font-size: .82rem; }
}

/* v9: grid cards get a three-column footer (stars | rating and store | price) and four status tiles in fixed places.
   The phone list view and the suggestion rows keep the old lines (they do not carry .card-t). */
.card-t { container-type: inline-size; }
.cfoot, .ctiles { display: none; }
.card-t > .cfoot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.card-t > .ctiles { display: flex; gap: .35rem; margin-top: .6rem; }
.card-t:not(.browse .results .card-t) > :is(.rating, .price, .meta) { display: none; }
:root:not([data-deal-view="list"]) .browse .results .card-t > :is(.rating, .price, .meta) { display: none; }
:root[data-deal-view="list"] .browse .results .card-t:not(.sim-cards .card-t) > :is(.cfoot, .ctiles) { display: none; }
/* the "Similar to" rows are always drawn like grid cards, even when the list is in list view */
:root[data-deal-view="list"] .sim-cards .card-t > :is(.rating, .price, .meta) { display: none; }
.cfoot > div { display: grid; gap: .15rem; align-content: start; min-width: 0; padding-inline: .5rem; }
.cfoot .cf1 { padding-left: 0; }
.cfoot .cf2 { justify-items: center; text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cfoot .cf3 { padding-right: 0; justify-items: end; text-align: right; }
.cf1 .stars { white-space: nowrap; }
.cf1 .rc, .cmore { font-size: .8rem; }
.cpct { font-size: .8rem; font-weight: 800; color: #7fc0ff; white-space: nowrap; }
.cstore { font-size: .82rem; color: var(--muted); }
.cmore { color: var(--muted); }
.cf3 strong { font-stretch: 125%; font-weight: 800; font-size: 1.3rem; line-height: 1.05; white-space: nowrap; }
.cf3 s { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.ctile { flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: .15rem; padding: .4rem .15rem .35rem; min-height: 3.3rem; border-radius: 8px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--ink);
  font-size: .64rem; font-weight: 800; line-height: 1.12; text-align: center; min-width: 0; }

.ctile.v-great { color: #4fe0b0; border-color: rgba(60, 199, 154, .55); background: rgba(60, 199, 154, .1); }
.ctile.v-good { color: #7cc8f5; border-color: rgba(102, 192, 244, .5); background: rgba(102, 192, 244, .1); }
.ctile.v-avg { color: #e0c17a; border-color: rgba(214, 181, 108, .5); background: rgba(214, 181, 108, .1); }
.ctile.v-small { color: var(--muted); }
.ctile.c-n { color: var(--ink); border-color: rgba(230, 235, 242, .55); background: rgba(230, 235, 242, .08); }
.ctile.c-e { color: #f0b45a; border-color: rgba(240, 160, 60, .55); background: rgba(240, 160, 60, .1); }
.ctile.c-d { color: #8fb6ff; border-color: rgba(102, 192, 244, .5); background: rgba(102, 192, 244, .1); }
:root[data-theme="light"] .cpct { color: #1a6aa8; }
:root[data-theme="light"] .ctile.v-great { color: #0f7a55; } :root[data-theme="light"] .ctile.v-good { color: #1a6aa8; }
:root[data-theme="light"] .ctile.v-avg { color: #8a6200; } :root[data-theme="light"] .ctile.c-e { color: #8a5300; }
:root[data-theme="light"] .ctile.c-d { color: #1a5fa8; }
:root[data-theme="light"] .card .cf3 strong { color: #0b5a3c; }
:root[data-theme]:not([data-theme="light"]) .card .cf3 strong { color: var(--th-price); }
.card-off .cf3 strong { color: var(--ink); }
/* two lines of title height on grid cards, so the footer and tiles start at the same height across a row (a three-line title still grows) */
@media (min-width: 560px) { .card-t:not(.browse .results .card-t) > h3, :root:not([data-deal-view="list"]) .browse .results .card-t > h3 { min-height: 2.5em; line-height: 1.25; } }
/* v10: store and "+1 store" on one line; footers all the same height; the suggestion rows use the same card */
.cstore { white-space: nowrap; }
.cstore .cmore { white-space: nowrap; }
.cmore { color: var(--muted); }
.cfoot .cf2 .cstore { font-size: .78rem; }
.sim-cards .card > :is(.cfoot, .ctiles) { grid-column: 1 / -1; }
/* the middle column has to hold "GOG +1 store" on one line: slimmer side padding, a slightly smaller price and store line */
.cfoot > div { padding-inline: .4rem; }
.cfoot .cf3 strong { font-size: 1.2rem; }
.cfoot .cf2 .cstore { font-size: .72rem; }
.cfoot .cf2 .cpct { font-size: .78rem; }

/* narrower cards (3 suggestion cards across a laptop, the 230px grid on small phones): the same three columns, in smaller type;
   under 235px the rating and store drop under the stars and the price keeps its column */
@container (max-width: 300px) {
  .cf1 .stars { font-size: .85rem; letter-spacing: .02em; }
  .cf1 .rc { font-size: .8rem; }
  .cfoot .cf3 strong { font-size: 1.05rem; }
  .cf3 s { font-size: .78rem; }
  .cfoot .cf2 .cpct { font-size: .84rem; }
  .cfoot .cf2 .cstore { font-size: .78rem; }
  .cfoot > div { padding-inline: .3rem; }
  .cfoot .cf1 { padding-left: 0; } .cfoot .cf3 { padding-right: 0; }
}
@container (max-width: 235px) {
  .card-t > .cfoot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a p" "m p"; row-gap: .3rem; column-gap: .5rem; }
  .cfoot .cf1 { grid-area: a; } .cfoot .cf2 { grid-area: m; justify-items: start; text-align: left; border-left: 0; border-right: 0; padding-inline: 0; } .cfoot .cf3 { grid-area: p; }
}

/* v11: tags are plain text tiles, all the same height, one line each; the text shrinks as more tags share the row */
.ctile { display: flex; align-items: center; justify-content: center; min-height: 1.9rem; padding: .25rem .2rem; font-size: .74rem; line-height: 1.1; white-space: nowrap; }
.ctile:first-child:nth-last-child(3), .ctile:nth-child(2):nth-last-child(2), .ctile:nth-child(3):last-child { font-size: .68rem; }
.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: .62rem; }
@container (max-width: 275px) {
  .ctile { font-size: .68rem; }
  .ctile:first-child:nth-last-child(3), .ctile:nth-child(2):nth-last-child(2), .ctile:nth-child(3):last-child { font-size: .62rem; }
  .ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: .56rem; padding-inline: .1rem; }
}
.ctile { gap: .25rem; }
.ctile svg { flex: none; width: .85rem; height: .85rem; }
.ctile:first-child:nth-last-child(4) svg, .ctile:nth-child(2):nth-last-child(3) svg, .ctile:nth-child(3):nth-last-child(2) svg, .ctile:nth-child(4):last-child svg { width: .7rem; height: .7rem; }
@container (max-width: 275px) {
  .ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { gap: .15rem; }
  .ctile:first-child:nth-last-child(4) svg, .ctile:nth-child(2):nth-last-child(3) svg, .ctile:nth-child(3):nth-last-child(2) svg, .ctile:nth-child(4):last-child svg { width: .6rem; height: .6rem; }
}
/* four tags share the row: words only (icons would not fit), a touch smaller */
.ctile:first-child:nth-last-child(4) svg, .ctile:nth-child(2):nth-last-child(3) svg, .ctile:nth-child(3):nth-last-child(2) svg, .ctile:nth-child(4):last-child svg { display: none; }
.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: .6rem; }
@container (max-width: 275px) {
  .ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: .56rem; }
}
@container (min-width: 340px) {   /* a wide card (one across on a phone) has room for the icons even with four tags */
  .ctile:first-child:nth-last-child(4) svg, .ctile:nth-child(2):nth-last-child(3) svg, .ctile:nth-child(3):nth-last-child(2) svg, .ctile:nth-child(4):last-child svg { display: block; width: .75rem; height: .75rem; }
  .ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: .64rem; }
}

/* v12: the middle column is only as wide as its words; the stars and the price share the rest, so they are not squeezed */
.card-t > .cfoot { grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr); }
.cfoot > div { padding-inline: .6rem; }
.cfoot .cf1 { padding-left: 0; } .cfoot .cf3 { padding-right: 0; }
@container (max-width: 300px) { .cfoot > div { padding-inline: .3rem; } .cfoot .cf1 { padding-left: 0; } .cfoot .cf3 { padding-right: 0; } }
@container (max-width: 235px) {
  .card-t > .cfoot { grid-template-columns: minmax(0, 1fr) auto; }
  .cfoot .cf2 { padding-inline: 0; }
}

/* v13: all three footer columns centred, with side padding so nothing touches the card's edge or a divider */
.cfoot .cf1, .cfoot .cf3 { justify-items: center; text-align: center; padding-inline: .5rem; }
@container (max-width: 300px) { .cfoot .cf1, .cfoot .cf3 { padding-inline: .3rem; } }
@container (max-width: 235px) {
  .cfoot .cf1 { justify-items: start; text-align: left; padding-inline: 0; }
  .cfoot .cf3 { justify-items: end; text-align: right; padding-inline: 0; }
}

/* v14: a roomy card (one across on a phone, or wide) uses the space: much bigger stars, count, rating and store lines */
@container (min-width: 301px) {
  .cf1 .stars { font-size: 1.35rem; letter-spacing: .08em; }
  .cf1 .rc { font-size: 1.05rem; }
  .cfoot .cf2 .cpct { font-size: 1.1rem; }
  .cfoot .cf2 .cstore { font-size: .98rem; }
  .cfoot .cf3 strong { font-size: 1.5rem; }
  .cfoot .cf3 s { font-size: 1rem; }
}

/* v15: the price shrinks with the card so it stays inside its column; each tag's text is as large as its tag allows (capped) */
@container (min-width: 301px) {
  .cfoot .cf3 strong { font-size: clamp(1.1rem, 5.4cqi, 1.5rem); }
  .cfoot .cf3 s { font-size: clamp(.8rem, 3.4cqi, 1rem); }
}
.ctile:only-child { font-size: 1rem; }
.ctile:first-child:nth-last-child(2), .ctile:nth-child(2):last-child { font-size: clamp(.8rem, calc(8.3cqi - 4px), 1rem); }
.ctile:first-child:nth-last-child(3), .ctile:nth-child(2):nth-last-child(2), .ctile:nth-child(3):last-child { font-size: clamp(.64rem, calc(5.5cqi - 4px), .92rem); }
.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: clamp(.56rem, calc(4.1cqi - 1.5px), .8rem); }
@container (min-width: 340px) {
  .ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: clamp(.6rem, calc(3.2cqi - 1px), .8rem); }
}
.ctile { min-height: 2.1rem; }
@container (max-width: 300px) {   /* the long cases ("GOG +2 stores", a 5-digit price) must still fit the three columns */
  .cfoot .cf3 strong { font-size: clamp(.9rem, 5.2cqi, 1.05rem); }
  .cfoot .cf2 .cstore { font-size: .74rem; }
}
@container (max-width: 300px) {
  .cfoot > div { padding-inline: .2rem; }
  .cfoot .cf1 { padding-left: 0; } .cfoot .cf3 { padding-right: 0; }
  .cfoot .cf2 .cmore { font-size: .66rem; }
  .cfoot .cf3 strong { font-size: clamp(.85rem, 5cqi, 1.05rem); }
}
@container (max-width: 265px) {
  .cf1 .stars { font-size: .76rem; letter-spacing: .02em; }
  .cf1 .rc { font-size: .72rem; }
}
/* v16: every tag on a card uses one text size (4 tags a little smaller), with room between the icon, the text and the border */
.ctile, .ctile:only-child { font-size: clamp(.68rem, 3.6cqi, .92rem); padding-inline: .35rem; gap: .3rem; }
.ctile:first-child:nth-last-child(2), .ctile:nth-child(2):last-child,
.ctile:first-child:nth-last-child(3), .ctile:nth-child(2):nth-last-child(2), .ctile:nth-child(3):last-child { font-size: clamp(.68rem, 3.6cqi, .92rem); }
.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { font-size: clamp(.56rem, 3cqi, .8rem); padding-inline: .15rem; }
.ctile svg { width: .85rem; height: .85rem; }
/* prices a bit bigger, still sized to the card so they stay inside their column */
@container (min-width: 301px) { .cfoot .cf3 strong { font-size: clamp(1.2rem, 5.9cqi, 1.6rem); } .cfoot .cf3 s { font-size: clamp(.85rem, 3.6cqi, 1.05rem); } }
@container (max-width: 300px) { .cfoot .cf3 strong { font-size: clamp(.95rem, 5.7cqi, 1.15rem); } .cfoot .cf3 s { font-size: .8rem; } }
/* v17: stars, rating and price grow with the card; a long price (9+ characters) gets a smaller size so it stays in its column */
@container (min-width: 236px) {
  .cf1 .stars { font-size: clamp(.9rem, 5.6cqi, 1.5rem); }
  .cf1 .rc { font-size: clamp(.82rem, 4.2cqi, 1.15rem); }
  .cfoot .cf2 .cpct { font-size: clamp(.9rem, 5cqi, 1.3rem); }
  .cfoot .cf2 .cstore { font-size: clamp(.76rem, 3.4cqi, 1rem); }
  .cfoot .cf3 strong { font-size: clamp(1.1rem, 6.4cqi, 1.75rem); }
  .cfoot .cf3 s { font-size: clamp(.82rem, 3.8cqi, 1.1rem); }
  .cfoot .cf3.pl strong { font-size: clamp(.95rem, 5cqi, 1.4rem); }
}
/* v18: worst cases: a review count of 100,000 or more (up to 9 digits) and a price of 9+ characters; tags with an icon must fit */
.cf1 .rc { white-space: nowrap; }
@container (min-width: 236px) {
  .cf1.cl .stars { font-size: clamp(.85rem, 4.6cqi, 1.25rem); }
  .cf1.cl .rc { font-size: clamp(.64rem, 2.7cqi, .9rem); }
  .cfoot .cf3.pl strong { font-size: clamp(.82rem, 4.4cqi, 1.3rem); }
}
.ctile svg { width: .75rem; height: .75rem; }
.ctile:not(:only-child) { padding-inline: .25rem; gap: .2rem; letter-spacing: -.01em; }
.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child { padding-inline: .1rem; font-size: clamp(.54rem, 2.9cqi, .8rem); }
.ctile:first-child:nth-last-child(3), .ctile:nth-child(2):nth-last-child(2), .ctile:nth-child(3):last-child { font-size: clamp(.62rem, 3.1cqi, .9rem); }
@container (max-width: 270px) { .ctile:not(:only-child) svg { display: none; } }
/* v19: the price, old price, stars and review count are sized from their own column's width and their text length (--n, --o), so they can never run out of the column */
.card-t > .cfoot .cf1, .card-t > .cfoot .cf3 { container-type: inline-size; min-width: 0; }
.card-t > .cfoot .cf3 strong { font-size: min(1.75rem, calc(100cqi / (var(--n) * .76))); }
.card-t > .cfoot .cf3 s { font-size: min(1.1rem, calc(100cqi / (var(--o) * .66))); }
.card-t > .cfoot .cf1 .stars { font-size: min(1.5rem, calc(100cqi / 5.6)); }
.card-t > .cfoot .cf1 .rc { font-size: min(1.15rem, calc(100cqi / (var(--n) * .6))); }
/* v20: every tag on every card has the same text size: the largest that the tightest case (4 tags, widest label "Early Access"/"Average deal", no icon) holds at that card width */
.card-t > .ctiles .ctile { font-size: clamp(.4rem, calc(3.6cqi - 1.6px), 1.05rem); }
.card-t > .ctiles :is(.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child) svg { display: none; }
/* v21: titles stop at 2 lines (full name on hover); every tag on every card has the same text size, as large as 3 tags can hold (long labels wrap onto 2 lines, all tags the same height); 4 tags become icons whose names show on hover */
.card-t h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-t > .ctiles .ctile { position: relative; font-size: clamp(.55rem, 5.4cqi, 1.05rem); white-space: normal; line-height: 1.05; min-height: 2.8rem; text-align: center; padding-inline: .15rem; gap: .2rem; letter-spacing: 0; }
.card-t > .ctiles .ctile svg { display: none; }
.card-t > .ctiles :is(.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child) svg { display: block; width: 1.3rem; height: 1.3rem; }
.card-t > .ctiles :is(.ctile:first-child:nth-last-child(4), .ctile:nth-child(2):nth-last-child(3), .ctile:nth-child(3):nth-last-child(2), .ctile:nth-child(4):last-child) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* v22: the "Similar games on sale" row has roomy cards (about three across on a laptop, like the suggestion rows), and the price of the narrow stacked footer never collapses */
.slider-track { grid-auto-columns: 300px; }
@media (min-width: 1000px) { .slider-track { grid-auto-columns: 330px; } }
@media (max-width: 700px) { .slider-track { grid-auto-columns: calc(100% - 3.2rem); } }
.card-t > .cfoot .cf3 strong { font-size: var(--pf, min(1.75rem, calc(100cqi / (var(--n) * .76)))); }
.card-t > .cfoot .cf3 s { font-size: var(--of, min(1.1rem, calc(100cqi / (var(--o) * .66)))); }
@container (max-width: 235px) {
  .card-t > .cfoot .cf3 { container-type: normal; --pf: min(1.3rem, calc(44cqi / (var(--n) * .76))); --of: min(1rem, calc(44cqi / (var(--o) * .66))); }
}

/* v24: phones: the Share button sits in the bottom right corner of the title block, on the "Price checked" line */
@media (max-width: 700px) {
  .gp-banner-text { position: relative; }
  .gp-titlerow .gp-share { position: absolute; right: 0; bottom: 0; top: auto; margin: 0; vertical-align: baseline; }
  .gp-banner-text .checked { padding-right: 6rem; }
}

/* v25: phones: a DLC is a card like an edition or pack (picture on top, then name, then price and store); the row layout stays from 560 px up */
@media (max-width: 559px) {
  .gp-dlc:not(.gp-text) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: .8rem; row-gap: .5rem; align-items: center; align-content: start; min-height: 0; padding: .8rem; }
  .gp-dlc:not(.gp-text) > .gp-pic { grid-column: 1 / -1; grid-row: auto; align-self: auto; }
  .gp-dlc:not(.gp-text) > .gp-pic .gp-img { width: 100%; height: auto; aspect-ratio: 460 / 215; }
  .gp-dlc:not(.gp-text) > h3 { grid-column: 1 / -1; }
  .gp-dlc:not(.gp-text) > .gp-price { grid-column: 1; grid-row: auto; }
  .gp-dlc:not(.gp-text) > .gp-store { grid-column: 2; grid-row: auto; }
  .gp-dlc:not(.gp-text) .gp-price .pct { display: none; }   /* the picture sticker already says it */
}

/* v26: phones: a wishlist game is a card: picture banner on top (the grid card's shape), name, price, note, then the alert settings in one block. Desktop rows unchanged. */
@media (max-width: 700px) {
  .ap-item { display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
  .ap-game { flex-direction: column; align-items: stretch; gap: 0; }
  .ap-game img { width: 100%; height: auto; min-height: 0; aspect-ratio: 460 / 215; border-radius: 0; }
  .ap-info { padding: .65rem .8rem .3rem; gap: .2rem; }
  .ap-title { white-space: normal; font-size: 1.05rem; line-height: 1.2; }
  .ap-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem .7rem; padding: .5rem .8rem .8rem; justify-content: stretch; }
  .ap-controls > .ap-select { grid-row: 1; grid-column: 1; width: 100%; min-width: 0; }
  .ap-controls > .ap-cap { display: flex; grid-row: 1; grid-column: 2; min-width: 0; gap: .35rem; }
  .ap-controls .ap-cap > span, .ap-controls .ap-cap > input { grid-row: auto; grid-column: auto; }
  .ap-controls .ap-cap > input { flex: 1 1 auto; width: 100%; min-width: 0; }
  .ap-controls > .ap-switch { grid-row: 2; grid-column: 1; }
  .ap-controls > .ap-remove { grid-row: 2; grid-column: 2; justify-self: end; }
}

/* v27: phones: Filters panel header with two round icon buttons (expand/collapse all, close) and the filter rows as one grouped list with thin dividers */
.rail-ib { display: none; }
@media (max-width: 760px) {
  .rail-head { gap: .5rem; }
  .rail-head h2 { margin-right: auto; }
  .rail-ib { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; cursor: pointer; background: var(--surface); border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
  .rail-ib:hover { transform: none; border-color: var(--muted); box-shadow: none; }
  .rail-ib svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
  .rail-tog .co, .rail-tog.is-open .ex { display: none; }
  .rail-tog.is-open .co { display: inline; }
  .rail-ib:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .rail form { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .rail .mobile-rail-pickers { gap: 0; margin: 0; }
  .rail .mobile-rail-pickers .gbtn, .rail fieldset.box.fold legend { background: none; border: 0; border-radius: 0; box-shadow: none; padding: .8rem .9rem; font-weight: 600; font-size: 1rem; }
  .rail .mobile-rail-pickers .gpick + .gpick { border-top: 1px solid var(--line); }
  .rail fieldset.box.fold legend { border-top: 1px solid var(--line); }   /* a fieldset's own top border is cut by its legend */
  .rail .mobile-rail-pickers .gpick:first-child { border-top: 0; }
  .rail .mobile-rail-pickers .gpop.docked { margin: 0; padding: 0 .9rem .8rem; background: none; border: 0; box-shadow: none; }
  .rail fieldset.box.fold.open > .keys { margin: 0; padding: 0 .9rem .8rem; background: none; border: 0; }
  .rail fieldset.box.fold .key, .rail .gpop.docked .key { border-radius: 99px; box-shadow: none; }
}

/* ---- /dashboard/ (Steam profile, playtime, achievements, friends, wishlist deals) ---- */
.dash-page { max-width: 1180px; margin: 0 auto 3rem; padding: 1rem; }
.dash-page h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.dash-out { max-width: 640px; margin-top: 1.5rem; }
.dash-out:empty { display: none; }
.dash-root[hidden] { display: none; }
.dash-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; align-items: stretch; }
.dash-tri > .dash-wide { grid-column: 1 / -1; }
/* week, playtime and profile are one even row; align-items:stretch makes the three cards match height */
.dash-card { background: var(--panel, var(--surface)); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1rem, 3vw, 1.4rem); min-width: 0; }
.dash-card h2 { margin: 0 0 .9rem; font-size: 1.1rem; }
.dash-muted { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.dash-foot { margin: .8rem 0 0; }
.dash-more { margin: .6rem 0 0; }
.dash-empty { margin: 0; color: var(--muted); font-size: .92rem; }
.dash-tiles + .dash-empty { margin-top: .8rem; }
.dash-card .ap-link { display: inline-block; margin-top: .8rem; }
.dash-card .ap-link.dash-corner { display: block; width: max-content; max-width: 100%; margin-left: auto; text-align: right; }
.dash-card .ap-btn { display: inline-block; text-decoration: none; }
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.dash-tile { background: var(--key-face); border-radius: 12px; padding: .7rem .5rem; text-align: center; min-width: 0; }
.dash-tile b { display: block; font-size: 1.5rem; line-height: 1.1; }
.dash-tile span { display: block; margin-top: .2rem; color: var(--muted); font-size: .75rem; line-height: 1.25; }
/* profile */
.dash-who { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.dash-avatar-wrap { flex: none; display: grid; border-radius: 50%; padding: 3px; border: 2px solid var(--line); }
.dash-avatar-wrap.dash-online { border-color: var(--go); }
.dash-avatar-wrap.dash-in-game { border-color: var(--link); }
.dash-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--key-face); }
.dash-avatar.sm { width: 38px; height: 38px; font-size: .95rem; }
.dash-initial { font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.dash-name { display: grid; gap: .15rem; min-width: 0; }
.dash-name strong { font-size: 1.15rem; overflow-wrap: anywhere; }
.dash-status { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.dash-status.dash-online { color: var(--go); }
.dash-status.dash-in-game { color: var(--link); }
.dash-level { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: 1rem; }
.dash-badge { background: var(--sticker); color: var(--sticker-ink); font-weight: 800; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; }
.dash-bar { height: 8px; border-radius: 99px; background: var(--key-face); overflow: hidden; margin-top: .5rem; }
.dash-bar span { display: block; height: 100%; background: var(--sticker); border-radius: 99px; }
.dash-steam { margin-top: 1rem; }
.dash-profile-tile { display: flex; flex-direction: column; }
/* fills the rest of the card's height (so the card matches week/playtime even with few or no friends); View on Steam sits pinned below it */
.dash-profile-friends { flex: 1; display: flex; flex-direction: column; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.dash-profile-friends .dash-empty { margin: auto 0; }
.dash-sub-h { margin: 0 0 .7rem; font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.dash-profile-tile .dash-steam { margin-top: 1rem; }
.dash-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.dash-friends li { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dash-friends .dash-avatar-wrap { padding: 2px; }
.dash-fname { display: grid; min-width: 0; }
.dash-fname strong { font-size: .95rem; overflow-wrap: anywhere; }
/* last 7 days */
/* recent games and wishlist deals */
.dash-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dash-game { display: grid; gap: .25rem; align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
.dash-game strong { overflow-wrap: anywhere; }
.dash-gamepic { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 12px; display: block; background: var(--key-face); }
.dash-gamepic.cover-blank { display: grid; place-items: center; text-align: center; padding: .5rem; font-size: .8rem; color: var(--muted); overflow: hidden; }
.dash-game:hover .dash-gamepic, .dash-game:focus-visible .dash-gamepic { outline: 2px solid var(--sticker); outline-offset: 2px; }
.dash-picbox { position: relative; }
.dash-off { position: absolute; top: .5rem; right: .5rem; background: var(--sticker); color: var(--sticker-ink); font-weight: 800; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; }
.dash-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.dash-price b { color: var(--go); }
.dash-price s { color: var(--muted); font-size: .85rem; }
.dash-price em { font-style: normal; color: var(--muted); font-size: .8rem; }
/* DLC on sale for owned games */
.dash-dlc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.dash-dlc { position: relative; display: grid; gap: .35rem; align-content: start; min-width: 0; padding: .5rem; border-radius: 12px; transition: background .12s; }
.dash-dlc-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* the whole row is the link */
.dash-dlc:has(:focus-visible) { background: color-mix(in srgb, var(--sticker) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sticker) 55%, transparent); }   /* keyboard focus only: a mouse click must not leave the row lit */
@media (hover: hover) { .dash-dlc:hover { background: color-mix(in srgb, var(--sticker) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sticker) 55%, transparent); } }   /* not on touch screens, where hover sticks after a tap */
.dash-dlc-link { display: grid; gap: .3rem; color: var(--ink); text-decoration: none; min-width: 0; }
.dash-dlc-pic { display: block; min-width: 0; }
.dash-dlc-link strong { overflow-wrap: anywhere; }
.dash-have { position: relative; z-index: 1; justify-self: start; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .15rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.dash-have:hover, .dash-have:focus-visible { color: var(--ink); border-color: var(--ink); }
.dash-dlc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.dash-dlc-top h2 { margin: 0; }
.dash-dlc-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.dash-fold { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: .8rem; padding: .3rem .8rem; cursor: pointer; }
.dash-fold:hover, .dash-fold:focus-visible { color: var(--ink); border-color: var(--ink); }
.dash-view { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.dash-view-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; color: var(--muted); font: inherit; font-size: .8rem; padding: .3rem .7rem; cursor: pointer; }
.dash-view-btn[aria-pressed="true"] { background: var(--sticker); color: var(--sticker-ink); font-weight: 700; }
.dash-view-btn:not([aria-pressed="true"]):hover { color: var(--ink); }
.dash-dlc-games { display: grid; gap: 1.4rem; }
.dash-dlc-game { display: grid; gap: .7rem; min-width: 0; }
.dash-dlc-game + .dash-dlc-game, .dash-dlc-more .dash-dlc-games { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.dash-dlc-more .dash-dlc-games { margin-top: 1.1rem; }
.dash-dlcs.is-list .dash-dlc-list { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.dash-dlcs.is-list .dash-dlc { grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; align-content: center; padding: .4rem .5rem; }
.dash-dlcs.is-list .dash-dlc-pic { grid-column: 1; grid-row: 1; }
.dash-dlcs.is-list .dash-dlc-link { grid-column: 2; grid-row: 1; align-self: center; gap: .1rem; }
.dash-dlcs.is-list .dash-have { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
.dash-dlcs.is-list .dash-off { top: .2rem; right: .2rem; font-size: .65rem; padding: 0 .35rem; }
@media (max-width: 520px) { .dash-dlcs.is-list .dash-dlc { grid-template-columns: 72px minmax(0, 1fr); } .dash-dlcs.is-list .dash-dlc-pic { grid-row: 1 / span 2; } .dash-dlcs.is-list .dash-dlc-link, .dash-dlcs.is-list .dash-have { grid-column: 2; } .dash-dlcs.is-list .dash-dlc-link { align-self: end; } .dash-dlcs.is-list .dash-have { grid-row: 2; justify-self: start; align-self: start; } }
/* phones (always the list view, no Grid button): the picture on the left with "I have this" under it, the text on the right. The picture row is as
   tall as the text needs, between the picture's natural shape and about 4:5; past that the picture stays put at the top and the button sits right under it. */
@media (max-width: 700px) {
  .dash-view { display: none; }
  .dash-dlcs .dash-dlc-list { container-type: inline-size; }
  .dash-dlcs.is-list .dash-dlc { --pw: calc((100cqw - 1rem) * .38); grid-template-columns: 38% minmax(0, 1fr); column-gap: .8rem; row-gap: .45rem;
    grid-template-rows: minmax(calc(var(--pw) * .467), calc(var(--pw) * .8)) auto; align-items: start; align-content: start; }
  .dash-dlcs.is-list .dash-dlc-pic { grid-column: 1; grid-row: 1; align-self: stretch; }
  .dash-dlcs.is-list .dash-dlc-pic .dash-picbox { height: 100%; }
  .dash-dlcs.is-list .dash-dlc-pic .dash-gamepic { height: 100%; aspect-ratio: auto; }
  .dash-dlcs.is-list .dash-dlc-link { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .dash-dlcs.is-list .dash-have { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
}
/* playtime donut */
.dash-donut-body { display: grid; gap: 1.1rem; justify-items: center; }
.dash-donut { position: relative; width: 170px; height: 170px; }
.dash-donut svg { width: 100%; height: 100%; display: block; }
.dash-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dash-donut-mid b { font-size: 1.5rem; line-height: 1.1; }
.dash-donut-mid span { color: var(--muted); font-size: .75rem; }
.dash-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; width: 100%; font-size: .9rem; }
.dash-legend li { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.dash-legend i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.dash-legend a, .dash-legend span { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.dash-legend a:hover { text-decoration: underline; }
.dash-legend em { flex: none; font-style: normal; color: var(--muted); font-size: .85rem; }
.dash-dot-blank { flex: none; width: 11px; height: 11px; }
.dash-expand { width: 100%; margin-top: .2rem; }
.dash-expand summary { cursor: pointer; list-style: none; }
.dash-card .dash-expand summary.ap-link { display: block; width: max-content; max-width: 100%; margin: .8rem auto 0; text-align: center; }
.dash-expand summary::-webkit-details-marker { display: none; }
.dash-expand .dash-legend-scroll { max-height: 200px; overflow-y: auto; margin-top: .7rem; padding-right: .3rem; }
/* achievements */
.dash-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem 1.5rem; }
.dash-ach li { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.dash-ach li div { display: grid; min-width: 0; }
.dash-ach strong { font-size: .95rem; overflow-wrap: anywhere; }
.dash-achpic { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--key-face); display: grid; place-items: center; }
@media (max-width: 820px) {
  /* 2 columns: week and playtime pair up (equal height), profile goes full width below so no cell is left empty */
  .dash-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tri > .dash-wide { grid-column: 1 / -1; }
  .dash-tri > .dash-week { grid-column: 1; grid-row: 1; }
  .dash-tri > .dash-playtime { grid-column: 2; grid-row: 1; }
  .dash-tri > .dash-profile-tile { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
  .dash-tri { grid-template-columns: minmax(0, 1fr); }
  .dash-tri > .dash-week { grid-column: 1; grid-row: 1; }
  .dash-tri > .dash-playtime { grid-column: 1; grid-row: 2; }
  .dash-tri > .dash-profile-tile { grid-column: 1; grid-row: 3; }
  .dash-recent, .dash-dlc-list { grid-template-columns: minmax(0, 1fr); }
  .dash-recent { gap: .9rem; }
  .dash-game { grid-template-columns: 42% minmax(0, 1fr); column-gap: .8rem; align-content: center; align-items: center; }
  .dash-game > :first-child { grid-column: 1; grid-row: 1 / span 3; }
  .dash-game > :not(:first-child) { grid-column: 2; }
  .dash-dlc { grid-template-columns: 42% minmax(0, 1fr); column-gap: .8rem; align-content: center; align-items: center; }
  .dash-dlc-pic { grid-column: 1; grid-row: 1 / span 2; }
  .dash-dlc-link, .dash-have { grid-column: 2; }
  .dash-dlc-link { align-self: end; }
  .dash-have { align-self: start; }
}
@media (min-width: 701px) and (max-width: 980px) { .dash-recent, .dash-dlc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* "Not interested": ✕ in the bottom corner of the cover (the heart is top right, the discount sticker top left) */
.card[hidden] { display: none !important; }
.card .art { position: relative; }
.nope { position: absolute; right: .45rem; bottom: .45rem; z-index: 3; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: rgba(18, 26, 38, .78); opacity: .75; transition: opacity .12s ease, background .12s ease; }
.nope svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nope:hover, .nope:focus-visible { opacity: 1; background: rgba(18, 26, 38, .95); }
:root[data-theme="light"] .nope { background: rgba(255, 255, 255, .92); color: #142033; box-shadow: 0 2px 6px rgba(20, 32, 51, .25); }
.hid-bar { margin: .8rem 0 0; text-align: center; color: var(--muted, inherit); font-size: .92rem; }
.hid-link { margin-left: .5rem; padding: 0; border: 0; background: none; color: var(--sticker); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hid-bar[hidden] { display: none; }
.hid-toast { border-radius: 14px; text-align: center; width: max-content; }

/* dashboard: last 2 weeks by game (Steam's numbers), more achievements and a progress bar per recent game */
.dash-fort { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.dash-fort li { min-width: 0; }
.dash-fort-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; min-width: 0; }
.dash-fort-name { font-size: .9rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
a.dash-fort-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-fort-top .dash-muted { flex: none; }
.dash-fort .dash-bar { margin-top: .3rem; height: 7px; }
.dash-fort-other { background: var(--line) !important; }
.dash-ach-rest { margin-top: .8rem; }
.dash-ach-rest[hidden] { display: none; }
.dash-ach-btn { display: block; margin: 1rem auto 0; }
.dash-sub { margin: 1.3rem 0 .7rem; font-size: .95rem; }
.dash-achgames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1.5rem; }
.dash-achgames li { min-width: 0; }
.dash-achgame-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; min-width: 0; }
.dash-achgame-top strong { font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-achgame-top span { flex: none; }
.dash-achgames .dash-bar { margin-top: .35rem; height: 6px; }

/* Phones with the currency button: the wordmark is sized to the space the brand leaves free, so keep room for all three
   header buttons plus a clear gap of at least 15 px (Nov 1: the owner found it almost touching the currency button;
   checked at 320-760 px, signed in and out). Under 381 px "Sign in" is smaller, so less room is needed there. */
@media (max-width: 760px) {
  :root[data-alt-cur] .top .brand { padding-right: 11.2rem; }                       /* currency + theme + "Sign in" */
  :root[data-alt-cur] .top:has(.account-btn) .brand { padding-right: 9rem; }       /* currency + theme + avatar */
}
@media (max-width: 380px) { :root[data-alt-cur] .top:not(:has(.account-btn)) .brand { padding-right: 10.6rem; } }
/* Computers 761-1199 px: the currency button takes the search box's room; "My " goes and the menu sits a little closer */
@media (min-width: 761px) and (max-width: 1199px) {
  :root[data-alt-cur] .top .nav-my { display: none; }
  :root[data-alt-cur] .top .nav-wish::first-letter { text-transform: uppercase; }
  :root[data-alt-cur] .top nav { column-gap: .8rem; }
}
/* Phones: the Sort menu names itself ("Newest added", "Highest reviewed"), so its word label goes, giving the longest name room next to Select all */
@media (max-width: 760px) { .ap-tb-ctl .ap-sortlab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.set-check { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .3rem; font-size: .95rem; cursor: pointer; }
.set-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--sticker); flex: none; }
.set-pin { display: block; width: min(100%, 16rem); box-sizing: border-box; height: 2.1rem; margin: .4rem 0; padding: 0 .6rem; font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.set-locked { margin: 0 0 .3rem; font-weight: 700; }

/* Grid view: the status tiles (Great deal, Early Access...) sit at the bottom of every card, so they line up across a row even when
   one card's footer is a line taller or shorter (a long review count wrapping), and a lone tile lines up with the tiles beside it. */
:root:not([data-deal-view="list"]) .browse .results .card-t:not(.sim-cards .card-t) { display: flex; flex-direction: column; }
:root:not([data-deal-view="list"]) .browse .results .card-t:not(.sim-cards .card-t) > .cfoot { margin-bottom: .6rem; }
:root:not([data-deal-view="list"]) .browse .results .card-t:not(.sim-cards .card-t) > .ctiles { margin-top: auto; }