@font-face{font-family:Manrope;src:url(/assets/design/fonts/manrope.ttf) format("truetype");font-weight:200 800;font-display:swap}
:root{--ground:#f7f5f0;--ground-glow:#ffffff;--shell:#e8e5dc;--rail:#f7f5f0;--panel:#ffffff;--raised:#eef0ea;--raised-deep:#dfe6dd;
      --card-mid:#c9dccb;--card-mid-ink:#17201e;--games:#f1ecdf;--games-raised:#e7e0cf;--chip:#e4e8e0;--chip-hover:#d8dfd4;--chip-ink:#2a3a33;
      --chip-on:#17201e;--chip-on-ink:#ffffff;--card-front:#175c45;--card-front-ink:#ffffff;--card-front-dim:#cfe3d7;
      --field:#eef0ea;--field-ink:#17201e;--field-dim:#5f6c65;--handle:#17201e;--handle-ink:#ffffff;--mark-bg:#175c45;--mark-ink:#ffffff;
      --ink:#17201e;--ink-2:#4f5d57;--ink-3:#5f6c65;--accent:#175c45;--up:#b42318;--line:#dfe3dc;--focus:#175c45;
      --selection:#cfe3d7;--selection-ink:#17201e;--shadow:0 18px 36px -16px #17201e55;color-scheme:light}
*{box-sizing:border-box}
html{background:var(--ground);scrollbar-color:var(--chip-hover) var(--ground)}
body{margin:0;background:radial-gradient(ellipse at top,var(--ground-glow),var(--ground) 70%) fixed;color:var(--ink);font:15px/1.5 Manrope,system-ui,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
     -webkit-font-smoothing:antialiased;caret-color:var(--accent)}
::selection{background:var(--selection);color:var(--selection-ink)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2{text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.record>div{min-width:0}
.chip:active,.full:active,.covers .go:active,.xsearch button:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--chip-on);color:var(--chip-on-ink);padding:8px 12px;border-radius:8px;z-index:50;font-weight:600}
.skip:focus{top:12px}
h1,h2,h3,p{margin:0}
.xwrap{max-width:1680px;margin:0 auto;padding:12px 14px 24px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 6px 10px}
.wordmark{font-weight:800;font-size:19px;letter-spacing:-.03em}
.wordmark span{color:var(--accent)}

/* the shell */
.shell{position:relative;display:grid;grid-template-columns:64px 1fr 1fr 320px;grid-template-rows:52px auto 1fr;gap:14px;
       height:calc(100vh - 96px);min-height:640px;padding:16px;border-radius:28px;background:var(--shell);
       transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
.shell.open{grid-template-columns:196px 1fr 1fr 320px}

/* rail */
.rail{grid-area:1/1/4/2;display:flex;flex-direction:column;align-items:stretch;background:var(--rail);border-radius:26px;padding:12px 10px;gap:4px;overflow:hidden}
.rail .mark{width:40px;height:40px;border-radius:50%;background:var(--mark-bg);color:var(--mark-ink);display:grid;place-items:center;margin:2px auto 12px;flex:none}
.rail .mark svg{width:24px;height:24px;display:block}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail a{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:14px;color:var(--ink-2);white-space:nowrap}
.rail a:hover{background:var(--raised);color:var(--ink);text-decoration:none}
.rail a[aria-current]{color:var(--ink)}
.rail a[aria-current] .ic{position:relative}
.rail a[aria-current] .ic::after{content:"";position:absolute;right:-6px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.rail .ic{display:grid;place-items:center;width:20px;flex:none}
.rail .lab{font-size:14px;font-weight:600;opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s}
.shell.open .rail .lab{opacity:1;transform:none}
.rail .bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px}

/* canvas */
.canvas{grid-area:1/2/4/4;position:relative;min-width:0;background:var(--panel);border-radius:26px;padding:22px 26px}
.handle{position:absolute;left:-26px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--handle);color:var(--handle-ink);border:8px solid var(--shell);display:grid;place-items:center;padding:0;z-index:3;transition:transform .2s}
.handle svg{transition:transform .22s}
.shell.open .handle svg{transform:rotate(180deg)}
.handle:hover{transform:translateY(-50%) scale(1.06)}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.record{display:flex;align-items:center;gap:12px}
.now-m{display:none}
.record img{width:34px;height:34px;border-radius:10px;background:#fff;padding:5px;object-fit:contain}
.record .rec-h{font:700 22px/1.15 Manrope,system-ui,sans-serif;letter-spacing:-.025em;margin:0;color:var(--ink)}
.record p{font-size:13.5px;color:var(--ink-3);margin:2px 0 0}
.full{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2);padding:9px 12px;border-radius:14px;background:var(--raised);white-space:nowrap}
.full:hover{color:var(--ink);text-decoration:none;background:var(--chip-hover)}
.chartbox{position:absolute;left:26px;right:26px;top:104px;bottom:230px}
.chart{width:100%;height:100%;display:block}
.chart.m{display:none}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--ink-3);font-size:12px;font-family:inherit}
.chart .lbl{fill:var(--ink-2);font-size:12px;font-weight:600;font-family:inherit}
.chart .lbl.big{fill:var(--ink);font-size:14px;font-weight:700}
.chart .area{fill:var(--accent);opacity:.1}
.chart .plan[hidden]{display:none}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.chart .end{fill:var(--accent);stroke:var(--panel);stroke-width:3}
.sum{position:absolute;left:26px;bottom:88px;max-width:calc(50% - 72px);font-size:14px;line-height:1.55;color:var(--ink-2)}
.sum b{color:var(--ink);font-weight:700}
.sum .up{color:var(--up)}
.xsearch{position:absolute;left:22px;bottom:22px;width:min(360px,calc(50% - 48px));height:46px;border-radius:24px;background:var(--field);color:var(--field-ink);display:flex;align-items:center;padding:0 5px 0 18px;gap:10px}
.xsearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--field-ink);outline:0}
.xsearch input::placeholder{color:var(--field-dim)}
.xsearch button{width:36px;height:36px;border-radius:50%;border:0;background:var(--chip-on);color:var(--chip-on-ink);display:grid;place-items:center;padding:0;flex:none}
.xsearch button svg{display:block;width:17px;height:17px}
.xsearch:focus-within{box-shadow:0 0 0 2px var(--accent)}
.xresults{position:absolute;left:22px;bottom:74px;width:min(380px,calc(50% - 40px));max-height:280px;overflow:auto;background:var(--raised);border-radius:14px;padding:6px;box-shadow:var(--shadow);z-index:4;scrollbar-width:thin}
.xresults[hidden]{display:none}
.xresults a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px}
.xresults a:hover,.xresults a:focus-visible{background:var(--chip-hover);text-decoration:none;outline:0}
.xresults small{color:var(--ink-2);font-size:12.5px;flex:none}
.xresults .none{padding:12px;color:var(--ink-3);font-size:13px}

/* chips, notched into the canvas */
.chips{grid-area:3/3/4/4;align-self:end;height:216px;min-width:0;position:relative;z-index:2;background:var(--raised);border-radius:26px;box-shadow:0 0 0 14px var(--shell);padding:18px 20px 16px;display:flex;flex-direction:column;gap:10px}
.chips h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row .k{font-size:12.5px;color:var(--ink-2);min-width:52px;font-weight:600}
.chip{height:30px;padding:0 12px;border-radius:15px;border:0;background:var(--chip);color:var(--chip-ink);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.chip:hover{background:var(--chip-hover);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--chip-on);color:var(--chip-on-ink)}
.chip img{width:16px;height:12px;border-radius:2px;object-fit:cover}
.chip.cc{padding:0 9px}
.chip.cc img{width:20px;height:15px}
.chip.cc[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}
#cc-name{margin-left:4px}
.val{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink)}
.val img{width:16px;height:12px;border-radius:2px;object-fit:cover}
.k2{margin-left:14px;min-width:0}
.chips .fine{font-size:12.5px;color:var(--ink-2);margin-top:auto;line-height:1.35}

/* right column */
.status{grid-area:1/4/2/5;background:var(--raised);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;font-size:13px;white-space:nowrap;min-width:0;color:var(--ink-2)}
.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px}
.status a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cards{grid-area:2/4/3/5}
.stack{position:relative;padding-top:92px}
.card{position:absolute;left:0;right:0;border-radius:14px;padding:15px 18px}
.card.back{top:0;height:150px;background:var(--raised-deep);color:var(--ink-2)}
.card.mid{top:46px;height:150px;background:var(--card-mid);color:var(--card-mid-ink)}
.card.front{position:relative;background:var(--card-front);color:var(--card-front-ink);box-shadow:var(--shadow)}
.card .k{font-size:13px;font-weight:700;letter-spacing:.01em}
.card.back .k,.card.mid .k{display:flex;justify-content:space-between;gap:10px}
.card.back .sub{color:var(--ink-2)}
.card.back .k b,.card.mid .k b{font-weight:700;color:var(--ink)}
.card.front .k{color:var(--card-front-dim)}
.card .big{font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.card .big span{display:inline-block}
.card .big span.slide,.now-m b.slide{animation:slide .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes slide{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.card .big small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--card-front-dim);line-height:1.3}
.card .sub{font-size:13px;color:var(--card-front-dim);margin-top:10px;line-height:1.45}

.covers{grid-area:3/4/4/5;position:relative;background:var(--games);border-radius:26px;padding:16px 18px;display:flex;flex-direction:column;min-height:0}
.covers .xh{font-size:15px;font-weight:700}
.covers .go{position:absolute;right:14px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--games-raised);color:var(--ink);display:grid;place-items:center}
.covers .go:hover{background:var(--chip-on);color:var(--chip-on-ink);text-decoration:none}
.covers .fine{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.glist{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;overflow:hidden;flex:1}
.g{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;padding:6px;margin:0 -6px;border-radius:12px;transition:background .15s}
.g:hover{background:var(--games-raised);text-decoration:none}
.g img{width:104px;height:39px;object-fit:cover;border-radius:8px;display:block}
.g b{font-size:13.5px;font-weight:700;display:block;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g span{font-size:12.5px;color:var(--ink-2);display:block;line-height:1.3;margin-top:2px}
.g span em{font-style:normal;color:var(--accent);font-weight:600}


@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* country bars for a Steam record (drawn by explorer.js) */
.bars{display:flex;flex-direction:column;gap:5px;padding:4px 0 0}
.brow{display:grid;grid-template-columns:150px 1fr 190px;gap:12px;align-items:center;font-size:13px;padding:3px 8px;border-radius:10px;width:100%;border:0;background:none;text-align:left;font-family:inherit;color:inherit;transition:background .15s}
button.brow:hover{background:var(--chip)}
.brow.on{background:var(--raised)}
.brow.none{color:var(--ink-3)}
.bl{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.bl img{width:18px;height:13px;border-radius:2px;object-fit:cover}
.bt{display:block;height:14px;background:var(--line);border-radius:7px;overflow:hidden}
.xbar{display:block;height:100%;width:100%;background:var(--accent);border-radius:7px;transform-origin:left center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brow.us .bar{background:var(--ink)}
.bv{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.bv small{font-weight:500;color:var(--ink-3);margin-left:4px}
.bv i{font-style:normal;color:var(--up);font-weight:600;font-size:12px}
.chartnote{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.chartnote.empty{font-size:15px;color:var(--ink-2);max-width:60ch;line-height:1.6;padding:22px 0}
.chartbox .chartnote{position:absolute;left:0;bottom:-24px}
.chartbox .chartnote.empty{position:static}
.latest{margin:14px 8px 0;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-size:13.5px}
.latest h2{font-size:14px;font-weight:700;margin:0}
.latest ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.latest li{display:flex;gap:8px;align-items:baseline}
.latest li span{color:var(--ink-3);font-size:12px}
.latest .more{margin-left:auto;font-weight:600;color:var(--accent)}
.noimg{display:block;width:104px;height:39px;border-radius:8px;background:var(--raised)}
/* ---- shared chrome on every page: explorer parts keep their own type even where redesign.css is loaded ---- */
.explorer-ui,.explorer-ui input,.explorer-ui button{font-family:Manrope,system-ui,sans-serif}
.explorer-ui h1,.explorer-ui h2,.explorer-ui h3,.explorer-ui p{margin:0}
.explorer-ui .xh{font:700 15px/1.3 Manrope,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.explorer-ui a{color:inherit;text-decoration:none}
.explorer-ui nav{font:inherit;text-transform:none;letter-spacing:0}
.explorer-ui .shell a:hover,.explorer-ui .latest a:hover,.explorer-ui .xfooter a:hover{text-decoration:underline;text-underline-offset:3px}
.explorer-ui .rail a:hover,.explorer-ui .g:hover,.explorer-ui .xresults a:hover,.explorer-ui .full:hover,.explorer-ui .covers .go:hover{text-decoration:none}
.explorer-ui img{max-width:none}
body.xpage{background:radial-gradient(ellipse at top,var(--ground-glow),var(--ground) 70%) fixed}
body.xpage .xwrap{padding-bottom:0}
body.xpage .shell{height:calc(100vh - 72px)}
.home-x .xwrap{padding-bottom:12px}
body.xpage main.legacy-content{padding-top:8px}
.shell.bar-only{display:flex;flex-direction:column;gap:12px;height:auto;min-height:0;padding:12px;border-radius:22px}
.rail.bar{grid-area:auto;flex-direction:row;align-items:center;padding:6px 8px;border-radius:22px;overflow:visible;gap:2px}
.rail.bar .mark{margin:0 6px 0 0}
.rail.bar nav{flex-direction:row;gap:2px;flex-wrap:wrap}
.rail.bar .bottom{flex-direction:row;margin:0 0 0 auto;gap:2px}
.rail.bar a{height:40px;padding:0 11px}
.rail.bar .lab{opacity:1;transform:none;font-size:13.5px}
.barsearch{position:relative;padding:0 2px 2px}
.barsearch .xsearch{position:static;width:min(420px,100%)}
.barsearch .xresults{left:2px;top:54px;bottom:auto;width:min(420px,100%)}
.noimg{display:grid;place-items:center;width:104px;height:39px;border-radius:8px;background:var(--raised-deep);color:var(--ink-2);font-size:13px;font-weight:800;letter-spacing:.04em}
.xfooter{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 8px 0;padding-bottom:12px;font-size:12px;color:var(--ink-3)}
.xfooter nav{display:flex;gap:16px;flex-wrap:wrap}
.xfooter a:hover{color:var(--ink)}

/* ---- phones and narrow windows: one column, the rail becomes a tab bar with labels ---- */
@media (max-width:1040px){
  .xwrap{padding:8px 10px 16px}
  .topline{margin:4px 6px 10px}
  .shell,body.xpage .shell,.shell.bar-only{display:flex;flex-direction:column;height:auto;min-height:0;padding:8px;gap:8px;border-radius:22px}
  .rail,.rail.bar{flex-direction:row;align-items:stretch;justify-content:flex-start;padding:5px;border-radius:17px;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail .mark,.rail.bar .mark{display:none}
  .rail nav,.rail.bar nav{flex-direction:row;gap:0;flex-wrap:nowrap}
  .rail .bottom,.rail.bar .bottom{flex-direction:row;margin:0;gap:0}
  .rail a,.rail.bar a{flex:1 0 auto;flex-direction:column;justify-content:center;gap:5px;height:56px;min-width:62px;padding:0 8px;border-radius:13px}
  .rail .lab,.rail.bar .lab{display:block;opacity:1;transform:none;font-size:11px;font-weight:600;line-height:1;letter-spacing:0}
  .rail a[aria-current] .ic::after{right:-5px;top:-2px;width:6px;height:6px}
  .canvas{min-height:0;padding:16px 14px 14px;border-radius:20px}
  .chead{flex-direction:column;align-items:stretch;gap:12px}
  .record{align-items:flex-start;gap:10px}
  .record img{width:30px;height:30px;margin-top:1px}
  .record .rec-h{font-size:20px}
  .record p{font-size:13px}
  .full{align-self:flex-start}
  .now-m{display:block;margin-top:10px;font-size:15px;color:var(--ink-2)}
  .now-m b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-right:4px}
  .handle{display:none}
  .chartbox{position:static;height:auto;margin:12px 0 4px}
  .chart.d{display:none}
  .chart.m{display:block;height:auto}
  .chart .lbl{font-size:13px}
  .chart .lbl.big{font-size:14px}
  .chartbox .chartnote{position:static;margin-top:8px}
  .sum{position:static;max-width:none;margin:8px 0 12px;font-size:14px}
  .xsearch{position:static;width:100%;height:44px}
  .xresults{left:14px;right:14px;width:auto;bottom:auto;top:auto}
  .chips{box-shadow:none;height:auto;align-self:auto;padding:14px 14px 12px;border-radius:20px}
  .chips .fine{white-space:normal}
  .status{padding:11px 14px;white-space:normal}
  .covers{height:auto;padding:14px;border-radius:20px}
  .brow{grid-template-columns:116px 1fr auto;gap:10px;font-size:12.5px;padding:3px 4px}
  .bv small{display:block;margin:0}
  .barsearch{padding:0}
  .barsearch .xsearch,.barsearch .xresults{width:100%}
  .barsearch .xresults{left:0;top:50px}
  .latest{flex-direction:column;align-items:flex-start;gap:8px;margin:12px 6px 0}
  .latest ul{gap:10px 16px}
  .latest .more{margin-left:0}
  .xfooter{margin:12px 6px 0;gap:10px}
}

/* the page content below the interface shares its type */
body.xpage .legacy-content h1,body.xpage .legacy-content h2,body.xpage .legacy-content h3{font-family:Manrope,system-ui,sans-serif}
body.xpage .legacy-content h1{font-weight:700;letter-spacing:-.03em}
body.xpage .legacy-content h2,body.xpage .legacy-content h3{font-weight:700;letter-spacing:-.015em}

/* legibility floor for the content below the interface (the October layout had 8 to 10px labels) */
body.xpage .legacy-content .crumb{font-size:12px}
body.xpage .legacy-content .price-cell .eyebrow{font-size:11px}
body.xpage .legacy-content th{font-size:11.5px}
body.xpage .legacy-content .fine,body.xpage .legacy-content .billing-note,body.xpage .legacy-content .source-note{font-size:12px}
body.xpage .legacy-content .chart-note,body.xpage .legacy-content .verified{font-size:12.5px}