/*! Developer notes for this file: docs/frontend-notes.md */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:#0b0b0d; font-family:'Inter',system-ui,sans-serif; color:rgba(255,255,255,.92); }
input::placeholder { color:rgba(255,255,255,.32); }
input, select { color-scheme:dark; }
@keyframes sr-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.wrap { --wrap-gap:28px; max-width:1200px; margin:0 auto; padding:30px 24px 80px; display:flex; flex-direction:column; gap:var(--wrap-gap); }
/* <main> holds everything above the footer, so it repeats the column layout
   for its own children. */
.wrap > main { display:flex; flex-direction:column; gap:var(--wrap-gap); }

/* Hero (design_handoff_homepage_hero, option 3a): billboard line, H1, the
   profile field, then the SEO paragraph. Narrower than .wrap so the results
   and the FAQ below keep their 1200px. */
.hero { --wrap-gap:26px; width:100%; max-width:1000px; margin:0 auto; padding-top:66px;
        display:flex; flex-direction:column; align-items:center; gap:var(--wrap-gap); text-align:center;
        background:radial-gradient(ellipse 60% 420px at 50% 300px, oklch(30% 0.06 300 / .55), transparent 70%); }

.db-bill { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
           margin:0; font:500 14px/1.3 'Inter',sans-serif; color:rgba(255,255,255,.6);
           overflow:hidden; max-height:120px; opacity:1;
           transition:max-height .3s ease, opacity .3s ease .05s, margin-bottom .3s ease; }
.db-bill vent-logo { flex-shrink:0; }
.db-bill.is-hidden { max-height:0; opacity:0; margin-bottom:calc(-1 * var(--wrap-gap)); }
.db-odo { --tile-h:26px; --tile-w:17px; display:flex; align-items:flex-end; gap:2px;
          font:700 18px/1 'Space Grotesk',sans-serif; color:#fff; }
.db-tile { position:relative; flex:none; width:var(--tile-w); height:var(--tile-h); overflow:hidden;
           background:#0d0d10; border:1px solid oklch(78% 0.13 300 / .5); border-radius:4px; }
.db-tile::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px;
                  background:rgba(0,0,0,.6); }
.db-reel { display:flex; flex-direction:column; will-change:transform; }
.db-reel span { height:var(--tile-h); flex:none; display:flex; align-items:center; justify-content:center; }
.db-comma { height:var(--tile-h); display:flex; align-items:flex-end; padding-bottom:2px;
            color:rgba(255,255,255,.4); }
.db-games { font:700 16px/1 'Space Grotesk',sans-serif; color:oklch(88% 0.09 300); }

.hero h1 { margin:0; font:700 58px/1.04 'Space Grotesk',sans-serif; letter-spacing:-.01em;
           color:#fff; text-wrap:balance; }

.hero-form { width:100%; display:flex; flex-direction:column; align-items:center; gap:22px; }
.field { width:100%; display:flex; flex-direction:column; gap:12px; text-align:left; }
.field-label { display:none; }
.field-bar { display:flex; align-items:center; gap:12px; background:#f3f2f2; border-radius:999px;
             padding:8px 8px 8px 24px; box-shadow:0 18px 60px oklch(60% 0.15 300 / .35);
             transition:box-shadow .15s ease; }
.field-bar:focus-within { box-shadow:0 0 0 3px #b98af7, 0 18px 60px oklch(60% 0.15 300 / .45); }
.steam-ico { width:26px; height:26px; flex-shrink:0; fill:#0b0b0d; }
#profile { flex:1; min-width:0; background:none; border:none; outline:none; padding:14px 4px;
           font:500 18px 'Inter',sans-serif; color:#0b0b0d; }
#profile::placeholder { color:rgba(11,11,13,.52); }
.go { flex-shrink:0; background:#b98af7; color:#0b0b0d; border:none; border-radius:999px;
      padding:17px 32px; font:700 17px 'Space Grotesk',sans-serif; cursor:pointer; white-space:nowrap; }
.go:hover { background:oklch(84% 0.11 300); }
.go:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.go:disabled { opacity:.5; cursor:wait; }
.field-example { margin:0; padding-left:26px; font:400 13px 'Inter',sans-serif; color:rgba(255,255,255,.5); }
.field-example code { font:500 13px ui-monospace,monospace; color:rgba(255,255,255,.75); white-space:nowrap; }
/* Highlighter sweep over the vanity part, looping forever:
   0.7 s sweep, 2 s hold, quick clear, repeat. */
.field-example mark { padding:1px 4px; margin:0 -1px; border-radius:4px; font-weight:700; color:#0b0b0d;
                      background:linear-gradient(#b98af7,#b98af7) no-repeat left / 100% 100%;
                      animation:hl-loop 3s cubic-bezier(.6,0,.3,1) .9s infinite both; }
@keyframes hl-loop { 0% { background-size:0% 100%; color:inherit; } 9% { color:inherit; }
                     23%, 88% { background-size:100% 100%; color:#0b0b0d; }
                     100% { background-size:0% 100%; color:inherit; } }
@media (prefers-reduced-motion:reduce) { .field-example mark { animation:none !important; } }

.hero-meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px;
             font:500 13.5px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.fb-toggle { background:none; border:none; padding:4px 0; cursor:pointer;
             font:600 13.5px 'Inter',sans-serif; color:oklch(88% 0.09 300); }
.fb-toggle:hover { color:#fff; }
.fb-toggle:focus-visible { outline:2px solid #b98af7; outline-offset:3px; border-radius:3px; }

.tagline { width:100%; margin:28px 0 0; padding-top:28px; border-top:1px solid rgba(255,255,255,.1);
           column-count:2; column-gap:40px; text-align:left;
           font:400 14.5px/1.7 'Inter',sans-serif; color:rgba(255,255,255,.58);
           text-wrap:pretty; overflow:hidden; max-height:400px; opacity:1;
           transition:max-height .3s ease, opacity .3s ease .05s, margin-top .3s ease, padding-top .3s ease; }
.tagline strong { color:rgba(255,255,255,.85); font-weight:600; }
.tagline strong:first-child { color:#fff; }
.tagline.is-hidden { max-height:0; opacity:0; margin-top:calc(-1 * var(--wrap-gap)); padding-top:0;
                     border-top-color:transparent; }
@media (prefers-reduced-motion: reduce) { .tagline, .db-bill, .field-bar { transition:none; } }

.panel { background:#141417; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:28px 30px; display:flex; flex-direction:column; gap:22px; }
.lbl { font:600 11px/1 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.hint { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.35); }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips button { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); border-radius:20px; padding:6px 13px; font:600 12px 'Inter',sans-serif; cursor:pointer; }
.chips button.pos { background:oklch(72% 0.17 150 / .18); border-color:oklch(72% 0.17 150); color:oklch(88% 0.13 150); }
.chips button.neg { background:oklch(66% 0.19 25 / .16); border-color:oklch(66% 0.19 25); color:oklch(85% 0.13 25); text-decoration:line-through; }
.chips .toggle { background:none; border:1px dashed rgba(255,255,255,.22); color:rgba(255,255,255,.55); }
.custom-tag { background:#0d0d10; border:1px dashed rgba(255,255,255,.16); border-radius:8px; padding:9px 12px; font:400 14px 'Inter',sans-serif; color:#fff; outline:none; width:100%; }
.dd { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#141417; border:1px solid rgba(255,255,255,.16); border-radius:8px; max-height:224px; overflow-y:auto; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.dd button { display:block; width:100%; text-align:left; background:none; border:none; color:rgba(255,255,255,.75); padding:8px 12px; font:500 13px 'Inter',sans-serif; cursor:pointer; }
.dd button:hover { background:rgba(255,255,255,.07); color:#fff; }
.dd .none { padding:8px 12px; font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.35); }

.seed-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.seed-box { position:relative; flex:1 1 280px; max-width:340px; }
.dd.games button { display:flex; align-items:center; gap:9px; }
.dd.games img { width:46px; height:22px; object-fit:cover; border-radius:3px; flex:none; }
.dd.games .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd.games .yr { margin-left:auto; color:rgba(255,255,255,.32); font-size:11.5px; flex:none; }
.seed-chip { display:inline-flex; align-items:center; gap:9px; background:oklch(78% 0.13 300 / .14); border:1px solid oklch(78% 0.13 300 / .55); border-radius:20px; padding:5px 6px 5px 6px; font:600 12.5px 'Inter',sans-serif; color:oklch(88% 0.09 300); }
.seed-chip img { width:52px; height:24px; object-fit:cover; border-radius:12px 3px 3px 12px; }
.seed-chip button { background:none; border:none; color:inherit; cursor:pointer; font-size:14px; padding:0 6px 0 0; opacity:.7; }
.seed-chip button:hover { opacity:1; }
.seed-weight { display:flex; align-items:center; gap:9px; font:500 12px 'Inter',sans-serif; color:rgba(255,255,255,.45); }
.seed-weight input { accent-color:oklch(78% 0.13 300); width:130px; }
.seed-weight b { color:rgba(255,255,255,.75); font-weight:600; min-width:118px; }
.seed-err { font:400 12.5px 'Inter',sans-serif; color:oklch(78% 0.13 25); max-width:520px; }
.seed-chip-card { background:oklch(78% 0.13 300 / .15); color:oklch(88% 0.09 300); border:1px solid oklch(78% 0.13 300 / .45); border-radius:6px; padding:3px 9px; font:600 12px 'Inter',sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.free-check { display:flex; align-items:center; gap:8px; padding-top:22px; cursor:pointer; font:600 14px 'Inter',sans-serif; color:rgba(255,255,255,.85); }
.free-check input { width:17px; height:17px; accent-color:#b98af7; }

.seg { display:flex; background:#0d0d10; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:3px; gap:2px; }
.seg button { flex:1; padding:7px 10px; border-radius:6px; border:none; font:600 11.5px 'Inter',sans-serif; cursor:pointer; background:transparent; color:rgba(255,255,255,.55); white-space:nowrap; }
.seg button.on { background:oklch(78% 0.13 300); color:#14141a; }

.banner-error { background:oklch(66% 0.19 25 / .12); border:1px solid oklch(66% 0.19 25 / .45); border-radius:12px; padding:18px 20px; display:flex; align-items:flex-start; gap:16px; }
.banner-error vent-logo { flex:none; margin-top:1px; }
.banner-error .msg { display:flex; flex-direction:column; gap:6px; }
.banner-error b { font:700 14px 'Space Grotesk',sans-serif; color:oklch(85% 0.13 25); }
.banner-error p { font:400 13px/1.6 'Inter',sans-serif; color:rgba(255,255,255,.65); margin:0; }

.loading { display:flex; flex-direction:column; align-items:center; gap:16px; padding:50px 0; }
.loading p { font:500 13px 'Inter',sans-serif; color:rgba(255,255,255,.5); animation:sr-pulse 1.6s ease-in-out infinite; margin:0; }

.reel { width:100%; max-width:760px; overflow:hidden; position:relative;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.reel-track { display:flex; gap:10px; width:max-content; animation:reel-scroll 24s linear infinite; }
@keyframes reel-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.reel-card { position:relative; width:150px; height:70px; flex:0 0 auto; border-radius:8px;
             overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#17171b; }
.reel-card img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.reel-card.hot { border-color:oklch(72% 0.17 150 / .55); }
.reel-card.warm { border-color:oklch(78% 0.13 300 / .5); }
.reel-pct { position:absolute; right:5px; bottom:4px; font:700 10.5px 'Inter',sans-serif;
            padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.66);
            color:rgba(255,255,255,.82); }
.reel-card.hot .reel-pct { color:oklch(88% 0.13 150); }
.reel-card.warm .reel-pct { color:oklch(88% 0.1 300); }

.reel-done { display:flex; align-items:center; justify-content:center; height:70px;
             font:600 15px 'Space Grotesk',sans-serif; color:oklch(88% 0.13 150);
             border:1px solid oklch(72% 0.17 150 / .4); border-radius:10px;
             background:oklch(72% 0.17 150 / .08); animation:reel-pop .32s ease-out; }
@keyframes reel-pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .reel-track { animation:none; }
  .reel-done { animation:none; }
}
@media (max-width: 560px) { .reel-card { width:118px; height:56px; } .reel-done { height:56px; font-size:13.5px; } }

.empty { text-align:center; padding:50px 20px; }
.empty b { font:700 18px 'Space Grotesk',sans-serif; display:block; margin-bottom:8px; }
.empty p { font:400 14px 'Inter',sans-serif; color:rgba(255,255,255,.5); margin:0; }

.results-head { scroll-margin-top:12px; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.results-head b { font:700 17px 'Space Grotesk',sans-serif; overflow-wrap:anywhere; }

.card.profile-card { align-items:center; text-align:center; padding:22px 16px 18px; gap:12px; border:2px solid #45acff; overflow:hidden; }
.pc-ava { position:relative; width:118px; height:118px; margin-top:8px; flex:none; }
.pc-ava .ava { width:100%; height:100%; border-radius:10px; display:block; object-fit:cover; }
.pc-ava .frame { position:absolute; inset:0; width:100%; height:100%; transform:scale(1.22); pointer-events:none; }
.pc-username { font:700 19px 'Space Grotesk',sans-serif; overflow-wrap:anywhere; padding:0 6px; }
.pc-total { font:400 13px 'Inter',sans-serif; color:rgba(255,255,255,.55); margin-top:-6px; }
.pc-stats { width:100%; display:flex; flex-direction:column; gap:7px; padding:0 6px; margin-top:2px; }
.pc-lbl { font:600 10px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); text-align:left; }
.pc-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font:400 13px 'Inter',sans-serif; }
.pc-row .g { text-align:left; overflow-wrap:anywhere; color:rgba(255,255,255,.85); }
.pc-row .v { flex:none; color:rgba(255,255,255,.5); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }

.card { display:flex; flex-direction:column; background:#141417; border:1px solid rgba(255,255,255,.08); border-radius:14px; min-width:0; }

.card.wild, .card.upc { border:1px solid transparent; position:relative; }
.ants { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.ants rect {
  width:calc(100% - 1px); height:calc(100% - 1px);
  fill:none; stroke-width:1; stroke-dasharray:6 6;
  animation:ants-crawl 10s linear infinite;
}
.card.wild .ants rect { stroke:oklch(80% 0.13 85 / .55); }
.card.upc .ants rect { stroke:oklch(80% 0.1 220 / .55); }
@keyframes ants-crawl { to { stroke-dashoffset:-120; } }
.card.wishlisted { border:1px solid oklch(78% 0.13 300 / .65); box-shadow:0 0 14px oklch(78% 0.13 300 / .18); }
.wish-badge { position:absolute; top:8px; left:8px; background:oklch(78% 0.13 300); color:#14141a; font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.card.wild .wish-badge { top:28px; }
.imgwrap { position:relative; width:100%; aspect-ratio:460/215; background:#0d0d10; cursor:pointer; overflow:hidden; border-radius:13px 13px 0 0; }
.imgwrap img { width:100%; height:100%; object-fit:cover; display:block; }
.wild-badge { position:absolute; top:8px; left:8px; background:oklch(80% 0.13 85); color:#14141a; font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.upc-badge { position:absolute; top:8px; left:8px; background:oklch(80% 0.1 220); color:#14141a; font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.card.upc .wish-badge { top:28px; }
.match-badge { position:absolute; top:10px; right:10px; width:58px; height:58px; border-radius:50%; background:#0d0d10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.match-badge b { font:700 15px 'Space Grotesk',sans-serif; color:#fff; line-height:1; }
.match-badge span { font:600 7.5px 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.title-overlay { position:absolute; bottom:0; left:0; right:0; padding:26px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.8)); }
.title-overlay a { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; font:700 17px 'Space Grotesk',sans-serif; color:#fff; text-decoration:none; }
.title-overlay a:hover .title-name { color:#b98af7; }
.title-name { min-width:0; }
.steam-cta { flex:0 0 auto; display:flex; align-items:center; gap:5px; line-height:0; padding-bottom:3px; }
.steam-mark { width:18px; height:18px; fill:#fff; }
.ext-arrow { width:12px; height:12px; fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.title-overlay a:hover .ext-arrow { stroke:#b98af7; }
.title-overlay a:hover .steam-cta { opacity:.85; }
.card-body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:10px; }
.reason-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.reason-chip { background:oklch(80% 0.13 85 / .16); color:oklch(85% 0.13 85); border:1px solid oklch(80% 0.13 85 / .4); border-radius:6px; padding:3px 9px; font:600 12px 'Inter',sans-serif; }
.meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.price { font:700 14px 'Space Grotesk',sans-serif; color:#fff; }
.price.free { color:oklch(72% 0.17 150); }
.discount { background:oklch(72% 0.17 150 / .18); color:oklch(85% 0.14 150); border-radius:5px; padding:2px 7px; font:700 12px 'Inter',sans-serif; }
.review { font:600 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.year { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.35); }
.pills { display:flex; flex-wrap:wrap; gap:5px; }
.pills .pill { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); border-radius:6px; padding:2px 7px; font:600 10.5px 'Inter',sans-serif; }
.pills .pill.must { background:oklch(78% 0.13 300 / .16); border-color:oklch(78% 0.13 300 / .55); color:oklch(88% 0.1 300); }
.feat-row { display:flex; flex-wrap:wrap; gap:5px; }
.feat { position:relative; display:flex; outline:none; }
.feat img { display:block; width:16px; height:16px; image-rendering:pixelated; }
.feat-tip { position:absolute; bottom:100%; left:0; transform:translateY(-8px);
            white-space:nowrap; pointer-events:none; z-index:5;
            background:#f3f2f2; color:#0b0b0d; padding:5px 8px; box-shadow:3px 3px 0 #b98af7;
            font:600 12px 'Inter',sans-serif; display:none; }
.feat:hover .feat-tip, .feat:focus-visible .feat-tip { display:block; }
.feat:focus-visible img { outline:2px solid #b98af7; outline-offset:1px; }
.thumbs { display:flex; gap:5px; margin-top:2px; }
.thumbs button { display:flex; align-items:center; justify-content:center; gap:4px; padding:3px 8px; border-radius:5px; border:1px solid rgba(255,255,255,.12); background:transparent; color:rgba(255,255,255,.6); font:600 10.5px 'Inter',sans-serif; cursor:pointer; }
.thumbs button[data-v="1"]:hover { border-color:oklch(72% 0.17 150 / .6); color:oklch(85% 0.14 150); }
.thumbs button[data-v="-1"]:hover { border-color:oklch(66% 0.19 25 / .6); color:oklch(85% 0.13 25); }
.thumbs button:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }
.meta-dates { display:flex; flex-direction:column; gap:2px; margin-top:-2px; }
.thumbs button.up-on { border-color:oklch(72% 0.17 150); background:oklch(72% 0.17 150 / .18); color:oklch(85% 0.14 150); }
.thumbs button.down-on { border-color:oklch(66% 0.19 25); background:oklch(66% 0.19 25 / .18); color:oklch(85% 0.13 25); }
.thumbs .hide-btn { flex:0 0 auto; margin-left:auto; padding:3px 7px; color:rgba(255,255,255,.4); }
.thumbs .hide-btn:hover { color:oklch(85% 0.13 25); border-color:oklch(66% 0.19 25 / .5); }
.taste-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; overflow-x:auto; }
.taste-row > .taste-sub { margin-right:2px; }
.taste-chip { background:oklch(78% 0.13 300 / .12); border:1px solid oklch(78% 0.13 300 / .35); color:oklch(88% 0.1 300); border-radius:8px; padding:5px 11px; font:600 12.5px 'Inter',sans-serif; white-space:nowrap; }
.taste-chip b { color:#fff; }
.taste-chip.top { background:oklch(72% 0.17 150 / .12); border-color:oklch(72% 0.17 150 / .4); color:oklch(88% 0.13 150); font-weight:700; }
.taste-chip .hrs { opacity:.6; font-weight:400; }
.taste-mix .taste-chip { display:inline-flex; align-items:baseline; gap:5px; }
.taste-mix .taste-chip .hrs { order:1; }
.taste-mix .taste-chip .mix { order:2; }
.taste-mix .taste-chip .mix::before { content:"· "; opacity:.55; }
/* Taste mix collapses at every width, not only on phones: the recommender
   splits scattered taste bins, so a library now yields ~12 mixes instead of
   ~8 and the full row is noise on a wide screen too. */
.taste-mix .mix-extra { display:none; }
.taste-mix.show-all .mix-extra { display:inline-flex; }
.mix-more { display:block; align-self:flex-start; margin-top:2px;
            background:none; border:none; padding:4px 2px; cursor:pointer;
            font:600 12.5px 'Inter',sans-serif; color:oklch(88% 0.1 300);
            text-decoration:underline; text-underline-offset:3px; }
.mix-more:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }

.taste-sub { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.45); }
.updated { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.35); }
.updated.stale { color:oklch(80% 0.13 85); }
.because { font:400 12.5px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.42); font-style:italic; }

.card--perfect { position:relative; }
.card--perfect:not(.wild):not(.wishlisted) { border-color:oklch(72% 0.17 150 / .55); }
.sweep-full { position:absolute; inset:0; overflow:hidden; border-radius:14px; pointer-events:none; z-index:1; }
.sweep-full::after {
  content:""; position:absolute; top:0; bottom:0; width:70px;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation:sweep-irregular 9s linear infinite;
}
.card--perfect .match-badge { z-index:2; overflow:hidden; }
.card--perfect .wild-badge, .card--perfect .wish-badge { z-index:2; }
.badge-sweep {
  position:absolute; top:0; bottom:0; width:16px;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation:badge-minisweep 9s linear infinite; z-index:1;
}
@keyframes sweep-irregular {
  0%      { left:-40%; }
  6%      { left:130%; }
  6.01%   { left:-40%; }
  34%     { left:-40%; }
  40%     { left:130%; }
  40.01%  { left:-40%; }
  82%     { left:-40%; }
  88%     { left:130%; }
  100%    { left:130%; }
}
@keyframes badge-minisweep {
  0%     { opacity:0; left:-80%; }
  7.9%   { opacity:0; left:-80%; }
  8%     { opacity:1; left:-80%; }
  13%    { opacity:1; left:160%; }
  13.5%  { opacity:0; left:160%; }
  41.9%  { opacity:0; left:160%; }
  42%    { opacity:1; left:-80%; }
  47%    { opacity:1; left:160%; }
  47.5%  { opacity:0; left:160%; }
  89.9%  { opacity:0; left:160%; }
  90%    { opacity:1; left:-80%; }
  95%    { opacity:1; left:160%; }
  95.5%  { opacity:0; left:160%; }
  100%   { opacity:0; left:160%; }
}
@media (prefers-reduced-motion: reduce) {
  .sweep-full::after, .badge-sweep { animation:none; display:none; }
}

.year-input::-webkit-outer-spin-button, .year-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.year-input { -moz-appearance:textfield; appearance:textfield; }
.year-select { display:none; }

.lbl { font-size:12px; }
.hint { font-size:13px; }
.chips button { font-size:13px; }
.fw .pill { font-size:12px; }
.pills .pill { font-size:10.5px; }
.price { font-size:15px; }
.review, .year, .updated, .because, .taste-sub { font-size:13.5px; }
.taste-chip { font-size:13.5px; }

.seo { margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding-top:28px; }
.seo h2 { font:700 19px 'Space Grotesk',sans-serif; margin:0 0 14px; }
.seo details { background:#141417; border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-bottom:8px; }
.seo summary { cursor:pointer; padding:13px 16px; font:600 14.5px 'Inter',sans-serif; color:rgba(255,255,255,.85); list-style-position:inside; }
.seo summary:hover { color:#b98af7; }
.seo .seo-body { padding:0 16px 14px; font:400 14px/1.7 'Inter',sans-serif; color:rgba(255,255,255,.6); }
.seo .seo-body p { margin:0 0 10px; }
.seo .seo-body ul { margin:0 0 10px; padding-left:20px; }
.seo .seo-body li { margin:0 0 8px; }
.seo .seo-body strong { color:rgba(255,255,255,.82); font-weight:600; }

.price-row { display:flex; gap:6px; }
.price-row > * { min-width:0; }
.price-row #maxprice { flex:1 1 auto; }
.price-row #currency { flex:0 1 auto; text-overflow:ellipsis; }

.filterbar { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; align-items:center; text-align:left;
             padding:16px; background:#141417; border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.fw { position:relative; }
.pill { display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
        border-radius:20px; cursor:pointer; background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7);
        font:600 13px 'Inter',sans-serif; }
.pill:hover { border-color:rgba(255,255,255,.3); color:#fff; }
.pill:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }
.pill .chev { opacity:.5; font-size:11px; }

.pill.set { background:oklch(78% 0.13 300 / .16); border-color:oklch(78% 0.13 300 / .55);
            color:oklch(88% 0.09 300); }
.pill-count { background:oklch(78% 0.13 300); color:#14141a; border-radius:9px;
              margin-left:7px; padding:1px 7px; font:700 11px 'Inter',sans-serif; }
.fb-reset { background:none; border:none; cursor:pointer;
            font:600 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.38); padding:6px 4px; }
.fb-reset:hover { color:oklch(85% 0.13 25); }

.pop { position:absolute; top:calc(100% + 8px); left:0; width:var(--pop-w,320px);
       max-width:calc(100vw - 32px); background:#1c1c22;
       border:1px solid rgba(255,255,255,.16); border-radius:12px;
       box-shadow:0 12px 34px rgba(0,0,0,.6); padding:16px;
       display:flex; flex-direction:column; gap:12px; z-index:40; }

.pop.flip { left:auto; right:0; }
.pop-body { display:flex; flex-direction:column; gap:12px; }
.pop-help { font:400 12.5px/1.7 'Inter',sans-serif; color:rgba(255,255,255,.55); margin:0; }
.pop-help b { color:rgba(255,255,255,.85); font-weight:600; }
.pop-help .g { color:oklch(88% 0.13 150); font-weight:600; }
.pop-help .r { color:oklch(85% 0.13 25); font-weight:600; }
.pop-help .n { color:rgba(255,255,255,.7); font-weight:600; }
.pop-rel { position:relative; }
.pop-rel .custom-tag { width:100%; }
.pop input, .pop select { background:#0d0d10; border:1px solid rgba(255,255,255,.14);
                          border-radius:8px; padding:10px 12px;
                          font:600 14px 'Inter',sans-serif; color:#fff; outline:none; }
.pop input:focus, .pop select:focus { border-color:oklch(78% 0.13 300); }
.pop .custom-tag { border-style:dashed; font-weight:400; padding:9px 12px; }
.pop-input, .pop > .pop-body > select, .pop .custom-tag { width:100%; }
.pop input[type=range] { padding:0; border:none; background:none; }
.pop input[type=checkbox] { width:17px; height:17px; padding:0; accent-color:#b98af7; }
.pop .free-check { display:flex; align-items:center; gap:8px; cursor:pointer;
                   padding:0; font:600 14px 'Inter',sans-serif; color:rgba(255,255,255,.85); }
.pop .year-input { width:84px; }
.pop #currency, .pop #maxprice { width:100%; }
.pop .chips { max-height:190px; overflow-y:auto; }
.year-row { display:flex; align-items:center; gap:6px; }
.year-sep { color:rgba(255,255,255,.3); }
.review-row { display:flex; align-items:center; gap:8px; }
.review-row #minreview { width:110px; }
.review-suffix { color:rgba(255,255,255,.45); font:500 12.5px 'Inter',sans-serif; }

.sheet-apply { display:none; }
.grab { display:none; }
.sheet-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet-title b { font:700 13px 'Space Grotesk',sans-serif; color:rgba(255,255,255,.9); }
.sheet-x { background:none; border:none; cursor:pointer; font-size:19px; line-height:1;
           color:rgba(255,255,255,.4); padding:0 2px; }
.sheet-x:hover { color:rgba(255,255,255,.9); }
.fb-scrim { display:none; }

@media (max-width: 640px) {

  .pill { padding:10px 14px; }
  .fb-scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; }
  .pop { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
         border-radius:20px 20px 0 0; border:none; border-top:1px solid rgba(255,255,255,.14);
         background:#16161a; padding:14px 16px 22px; gap:14px;
         box-shadow:0 -18px 50px rgba(0,0,0,.6); max-height:82vh; overflow-y:auto; z-index:10000; }
  .pop.flip { right:0; left:0; }
  .sheet-head { display:block; }
  .grab { display:block; width:38px; height:4px; border-radius:2px;
          background:rgba(255,255,255,.2); margin:0 auto 12px; }
  .sheet-title { display:flex; align-items:center; justify-content:space-between; }
  .sheet-title b { font:700 17px 'Space Grotesk',sans-serif; color:rgba(255,255,255,.92); }
  .sheet-x { background:none; border:none; cursor:pointer; font-size:26px; line-height:1;
             color:rgba(255,255,255,.45); padding:0 4px; }
  .sheet-apply { display:block; width:100%; background:oklch(78% 0.13 300); color:#14141a;
                 border:none; border-radius:10px; padding:15px; cursor:pointer;
                 font:700 15px 'Space Grotesk',sans-serif; }
  .pop .pop-input, .pop .custom-tag, .pop select, .pop #minreview { padding:12px; }
  .pop input[type=checkbox] { width:18px; height:18px; }

  .pop .seg { flex-direction:column; background:none; border:none; padding:0; gap:8px; }
  .pop .seg button { padding:14px; border-radius:8px; font-size:14px;
                     background:#0d0d10; border:1px solid rgba(255,255,255,.14);
                     color:rgba(255,255,255,.75); }
  .pop .seg button.on { background:oklch(78% 0.13 300); color:#14141a; border-color:transparent; }
  .review-row #minreview { width:auto; flex:1; }
}

@media (max-width: 640px) {

  .wrap { --wrap-gap:20px; padding:28px 20px 60px; }
  .panel { padding:16px; gap:14px; border-radius:14px; }

  .hero { --wrap-gap:20px; padding-top:16px;
          background:radial-gradient(ellipse 90% 320px at 50% 260px, oklch(30% 0.06 300 / .55), transparent 70%); }
  .db-bill { gap:8px; font-size:13px; }
  .db-bill vent-logo { display:none; }
  .db-odo { --tile-h:22px; --tile-w:15px; font-size:15px; }
  .db-games { font-size:14px; }
  .hero h1 { font-size:36px; line-height:1.05; }

  /* The field becomes the white card: label, icon + input, example, then a
     full-width button. .field-bar steps out of the layout so its three
     children land in the card's grid. */
  .field { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; row-gap:0;
           background:#f3f2f2; border-radius:22px; padding:12px 8px 8px;
           box-shadow:0 14px 44px oklch(60% 0.15 300 / .35); }
  .field:focus-within { box-shadow:0 0 0 3px #b98af7, 0 14px 44px oklch(60% 0.15 300 / .45); }
  .field-bar { display:contents; }
  .field-label { display:block; grid-column:1 / -1; padding:0 12px 4px;
                 font:600 11px 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:rgba(11,11,13,.6); }
  .steam-ico { width:22px; height:22px; margin-left:12px; align-self:center; }
  #profile { padding:13px 12px 13px 0; font-size:16px; border-bottom:1.5px solid rgba(11,11,13,.15); }
  .field-example { grid-column:1 / -1; order:4; padding:8px 12px 12px; font-size:12px; color:rgba(11,11,13,.55); }
  .field-example code { font-size:12px; color:rgba(11,11,13,.55); }
  .go { grid-column:1 / -1; order:5; width:100%; border-radius:16px; padding:16px; font-size:16px; }

  .hero-meta { gap:16px; font-size:13px; }
  .fb-toggle { font-size:13px; padding:13px 0; min-height:44px; }
  .filterbar { justify-content:flex-start; padding:12px; }

  .tagline { column-count:1; margin-top:10px; padding-top:20px; font-size:14px; line-height:1.65; }

  .thumbs button, .thumbs .hide-btn { padding:7px 10px; }

  .taste-row { flex-wrap:nowrap; overscroll-behavior-x:contain; }
  .taste-row .taste-chip { flex-shrink:0; }
  .taste-row:not(.taste-mix) > .taste-sub { position:sticky; left:0; z-index:1;
                            flex-shrink:0; white-space:nowrap;
                            align-self:stretch; display:flex; align-items:center;
                            background:#141417; padding-right:8px; margin-right:0; }

  .taste-mix { flex-direction:column; align-items:stretch; gap:6px; }
  .taste-mix > .taste-sub { margin-right:0; }
  .taste-mix .taste-chip { overflow-x:auto; overscroll-behavior-x:contain;
                           scrollbar-width:none; }
  .taste-mix .taste-chip::-webkit-scrollbar { display:none; }
  .taste-mix .taste-chip > * { flex-shrink:0; }

  .price-row { flex-direction:column; }
  .price-row #currency { width:100%; }

  .year-input { display:none; }
  .year-select { display:block; background:#0d0d10; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:8px 9px; font:500 13px 'Inter',sans-serif; color:#fff; outline:none; }
}

/* --- "Your games got bigger": big updates in owned games (GET /api/owned-updates),
   after the recommendation grid. From design_handoff_owned_updates (option 3b,
   loading state from 1c). Dark only, like the rest of the page. --- */
.ou { display:flex; flex-direction:column; gap:14px; padding-top:20px; }
.ou-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ou-title { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.ou-title b { font:700 17px 'Space Grotesk',sans-serif; color:rgba(255,255,255,.92); }
.ou-count { background:oklch(78% 0.13 300 / .14); border:1px solid oklch(78% 0.13 300 / .5); color:oklch(88% 0.1 300);
            border-radius:20px; padding:2px 9px; font:600 12px 'Inter',sans-serif; }
                    color:rgba(255,255,255,.66); font:600 15px 'Inter',sans-serif; cursor:pointer; }
.ou-sub { font:400 13px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.46); margin-top:-8px; text-wrap:pretty; }

.ou-lane { display:flex; gap:16px; align-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory;
           scrollbar-width:none; padding:2px 0 10px; overscroll-behavior-x:contain; }
.ou-lane::-webkit-scrollbar { display:none; }

.ou-card { flex:0 0 300px; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:16px; min-width:0;
           position:relative; overflow:hidden; background:#0d0d10; isolation:isolate; }
.ou-bg { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover;
         filter:blur(28px) saturate(1.4) brightness(.32); z-index:-1; pointer-events:none; }
.ou-card::after { content:""; position:absolute; inset:0; border-radius:16px; border:1px solid rgba(255,255,255,.1); pointer-events:none; }
.ou-card.is-1-0::after { border-color:oklch(72% 0.17 150 / .7); box-shadow:inset 0 0 24px oklch(72% 0.17 150 / .18); z-index:2; }
.ou-art { aspect-ratio:460/215; -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent); }
.ou-art img { width:100%; height:100%; object-fit:cover; display:block; }
.ou-body { padding:0 18px 18px; margin-top:-26px; position:relative; display:flex; flex-direction:column; gap:14px; flex:1; }
.ou-namebox { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ou-badge-10 { background:oklch(72% 0.17 150); color:#14141a; font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.ou-name { font:700 21px/1.15 'Space Grotesk',sans-serif; color:#fff; text-wrap:balance; }
.ou-stats { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.ou-hours { display:flex; flex-direction:column; gap:2px; }
.ou-hours b { font:700 28px/1 'Space Grotesk',sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.ou-cap { font:600 10px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ou-away { display:flex; flex-direction:column; gap:2px; padding-bottom:1px; }
.ou-away b { font:700 15px/1.2 'Space Grotesk',sans-serif; color:oklch(88% 0.1 300); }
.ou-away span { font:500 11.5px 'Inter',sans-serif; color:rgba(255,255,255,.6); }

.ou-strip { display:flex; flex-direction:column; gap:6px; }
.ou-track { position:relative; height:16px; }
.ou-rail { position:absolute; left:0; right:0; top:7px; height:2px; border-radius:2px; background:rgba(255,255,255,.14); }
.ou-since { position:absolute; right:0; top:7px; height:2px; border-radius:2px; background:oklch(78% 0.13 300 / .6); }
.ou-left { position:absolute; top:1px; width:2px; height:14px; border-radius:1px; background:rgba(255,255,255,.7); }
.ou-dot { position:absolute; top:3px; width:10px; height:10px; margin-left:-5px; border-radius:50%;
          box-shadow:0 0 0 2px rgba(13,13,16,.9); background:oklch(78% 0.13 300); }
.ou-dot.is-1-0 { background:oklch(72% 0.17 150); }
.ou-strip-lbl { display:flex; justify-content:space-between; gap:8px; font:500 11px 'Inter',sans-serif; color:rgba(255,255,255,.55); }

.ou-lead { display:flex; flex-direction:column; gap:6px; padding:12px 13px; border-radius:11px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.08); }
.ou-date { font:600 11px 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.ou-link { color:oklch(88% 0.1 300); text-decoration:underline; text-decoration-color:oklch(78% 0.13 300 / .55); text-underline-offset:3px; }
.ou-link:hover { color:#c9a6fa; text-decoration-color:currentColor; }
.ou-link:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; border-radius:2px; }
.ou-lead .ou-link { font:600 16px/1.3 'Space Grotesk',sans-serif; text-underline-offset:4px; text-wrap:pretty; }
.ou-ext { width:12px; height:12px; margin-left:6px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-1px; }
.ou-excerpt { margin:0; font:400 13px/1.55 'Inter',sans-serif; color:rgba(255,255,255,.72);
              display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ou-rest { display:flex; flex-direction:column; gap:7px; }
.ou-rest-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ou-rest-row .ou-link { min-width:0; font:600 13px/1.4 'Inter',sans-serif; }
.ou-rest-row span { flex:none; font:400 12px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.ou-more { font:500 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.6); }
.ou-foot { margin-top:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font:500 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.62); }
.ou-patches { color:rgba(255,255,255,.78); }
.ou-size { background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.78); border-radius:6px; padding:2px 7px; font:600 10.5px 'Inter',sans-serif; }

/* Loading (from option 1c): scanning bar + pulsing ghost cards */
.ou-scan { height:2px; border-radius:2px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; }
.ou-scan::before { content:""; position:absolute; top:0; bottom:0; left:0; width:40%;
                   background:linear-gradient(90deg,transparent,oklch(78% 0.13 300),transparent); animation:ou-scan 1.4s ease-in-out infinite; }
@keyframes ou-scan { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.ou-ghosts { display:flex; gap:16px; overflow:hidden; opacity:.7; }
.ou-ghost { flex:0 0 300px; height:250px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#141417;
            display:flex; flex-direction:column; animation:sr-pulse 1.6s ease-in-out infinite; }
.ou-ghost i { display:block; background:rgba(255,255,255,.06); border-radius:4px; }
.ou-ghost .g-art { height:96px; border-radius:15px 15px 0 0; }
.ou-ghost .g-lines { padding:15px; display:flex; flex-direction:column; gap:9px; }
@media (prefers-reduced-motion: reduce) { .ou-scan::before, .ou-ghost { animation:none; } }

@media (max-width: 640px) {
  .ou-lane { margin:0 -20px; padding:2px 20px 10px; scroll-padding-left:20px; }
  .ou-ghosts { margin-right:-20px; }
}

/* v2 navigation: design_handoff_owned_updates_v2 (option 5a). */
.ou-head { flex-wrap:wrap; }
.ou-nav { display:flex; align-items:center; gap:8px; flex:none; }
.ou-prev { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);
           color:#fff; font:600 17px 'Inter',sans-serif; cursor:pointer; }
.ou-prev:hover { background:rgba(255,255,255,.12); }
.ou-next { display:flex; align-items:center; gap:8px; height:38px; max-width:240px; padding:0 8px 0 14px; border-radius:19px; border:none;
           background:oklch(78% 0.13 300); color:#14141a; font:600 13px 'Inter',sans-serif; cursor:pointer; }
.ou-next:hover { background:#c9a6fa; }
.ou-next-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ou-next-ic { flex:none; width:24px; height:24px; border-radius:50%; background:rgba(20,20,26,.16); display:flex; align-items:center;
              justify-content:center; font:700 15px 'Inter',sans-serif; }
.ou-nav button:focus-visible, .ou-filter:focus-visible, .ou-all:focus-visible, .ou-chip:focus-visible, .ou-edge:focus-visible, .ou-seg:focus-visible
  { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }

.ou-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ou-filters { display:flex; gap:6px; flex-wrap:wrap; }
.ou-filter { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; cursor:pointer; font:600 12.5px 'Inter',sans-serif;
             border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.78); }
.ou-filter span { font-weight:500; opacity:.7; }
.ou-filter:hover { border-color:rgba(255,255,255,.32); }
.ou-filter[aria-pressed="true"] { background:#f3f2f2; color:#0b0b0d; border-color:transparent; }
.ou-all { padding:6px 4px; border:none; background:transparent; color:oklch(88% 0.1 300); font:600 12.5px 'Inter',sans-serif; cursor:pointer;
          text-decoration:underline; text-decoration-color:oklch(78% 0.13 300 / .55); text-underline-offset:3px; }

.ou-chips { position:relative; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.ou-chips::-webkit-scrollbar { display:none; }
.ou-chip { flex:none; display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:10px; cursor:pointer; text-align:left;
           border:1px solid rgba(255,255,255,.1); background:#141417; transition:background .15s, border-color .15s; }
.ou-chip:hover { border-color:rgba(255,255,255,.3); }
.ou-chip[aria-selected="true"] { border-color:oklch(78% 0.13 300 / .7); background:oklch(78% 0.13 300 / .16); }
.ou-chip img { width:58px; height:27px; object-fit:cover; border-radius:6px; display:block; flex:none; }
.ou-chip > span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ou-chip b { font:600 12.5px 'Inter',sans-serif; color:#fff; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.ou-chip small { font:500 11px 'Inter',sans-serif; color:rgba(255,255,255,.55); white-space:nowrap; }
.ou-chip small.is-1-0 { color:oklch(85% 0.14 150); }

.ou-stage { position:relative; }
.ou-lane { position:relative; }
.ou-fade { position:absolute; top:0; bottom:10px; right:0; width:72px; background:linear-gradient(90deg,transparent,#0b0b0d); pointer-events:none; }
.ou-edge { position:absolute; top:52px; width:46px; height:46px; border-radius:50%; border:none; background:#f3f2f2; color:#0b0b0d;
           font:700 20px 'Inter',sans-serif; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.55); z-index:4; }
.ou-edge:hover { background:#fff; }
.ou-edge-prev { left:-14px; }
.ou-edge-next { right:-14px; }
.ou-card.ou-flash::before { content:""; position:absolute; inset:0; border-radius:16px; border:2px solid oklch(78% 0.13 300);
                            box-shadow:0 0 0 3px oklch(78% 0.13 300 / .25); pointer-events:none; z-index:3; animation:ou-flash .9s ease-out forwards; }
@keyframes ou-flash { 0%,45% { opacity:1; } 100% { opacity:0; } }

.ou-progress { display:flex; gap:4px; }
.ou-seg { flex:1; min-width:0; padding:9px 0; border:none; background:transparent; cursor:pointer; display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.ou-seg i { height:4px; border-radius:2px; background:rgba(255,255,255,.16); transition:background .2s; }
.ou-seg.is-past i { background:rgba(255,255,255,.4); }
.ou-seg[aria-selected="true"] i { background:oklch(78% 0.13 300); }
.ou-seg span { font:500 11px 'Inter',sans-serif; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.ou-seg[aria-selected="true"] span { color:#fff; }

.ou.is-expanded .ou-lane { flex-wrap:wrap; overflow-x:visible; }
@media (prefers-reduced-motion: reduce) { .ou-card.ou-flash::before { animation-duration:.01s; } }
@media (max-width: 640px) {
  .ou-edge { display:none !important; }
  .ou-chips { margin:0 -20px; padding:2px 20px; scroll-padding-left:20px; }
  .ou-fade { right:-20px; }
  .ou-seg { padding:12px 0; }
  .ou-seg span { display:none; }
}

/* Hiding a game (owner request 2026-10-12): an x on each card, remembered in
   this browser only (grm-ou-hidden), with "Show N hidden games" to undo. */
.ou-hide { position:absolute; top:10px; right:10px; z-index:4; width:30px; height:30px; border-radius:50%;
           border:1px solid rgba(255,255,255,.22); background:rgba(11,11,13,.62); color:rgba(255,255,255,.82);
           font:500 18px/1 'Inter',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center;
           -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ou-hide:hover { background:rgba(11,11,13,.88); color:#fff; border-color:rgba(255,255,255,.45); }
.ou-hide:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }
.ou-tools-r { display:flex; align-items:center; gap:14px; margin-left:auto; }
.ou-unhide { padding:6px 4px; border:none; background:transparent; color:rgba(255,255,255,.62); cursor:pointer;
             font:500 12.5px 'Inter',sans-serif; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; }
.ou-unhide:hover { color:#fff; }
.ou-unhide:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }
.ou-none { margin:0; padding:28px 4px; font:500 13px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
@media (max-width: 640px) {
  /* one swipeable row of filters instead of two wrapped lines */
  .ou-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px; width:calc(100% + 40px); }
  .ou-filters::-webkit-scrollbar { display:none; }
  .ou-filter { flex:none; }
}

/* Floating shortcut to "Your games got bigger": the module sits under the
   recommendations, a long scroll away on mobile. Shown only while the module
   is still below the screen, gone for the search once it has been reached.
   Hidden under the cookie bar's slot while that bar is up. */
.ou-cta { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:50;
          display:flex; align-items:center; gap:9px; padding:10px 16px 10px 12px; border:0; border-radius:999px;
          background:oklch(78% 0.13 300); color:#14141a; font:600 14px 'Inter',sans-serif; cursor:pointer;
          box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
          opacity:0; visibility:hidden; transform:translate(-50%, 14px);
          transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; white-space:nowrap; }
.ou-cta.on { opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .2s ease, transform .2s ease, visibility 0s; }
.ou-cta:hover { background:#c9a6fa; }
.ou-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.ou-cta-n { background:#14141a; color:oklch(88% 0.1 300); border-radius:999px; padding:2px 8px; font:700 12px 'Inter',sans-serif; }
.ou-cta svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
body:has(.cc-bar.cc-in) .ou-cta { display:none; }
@media (prefers-reduced-motion: reduce) { .ou-cta, .ou-cta.on { transform:translate(-50%, 0); transition:none; } }