/*! "Top Steam games this month" pages (/top, /top/YYYY-MM).
    Developer notes for this file: docs/frontend-notes.md

    Loaded after tag.css, whose base rules (body, links, the card title with
    its Steam mark, the currency picker, the preview bar) this page reuses.
    Everything page-specific is prefixed tp- so it cannot collide with the tag
    page classes. */

/* --- month rail: the months with a page, plus the currency picker --- */
.rail { display:flex; align-items:center; gap:12px; padding:10px 28px;
        border-bottom:1px solid rgba(255,255,255,.08); }
.rail-months { display:flex; gap:4px; overflow-x:auto; flex:1; min-width:0; }
.rail-pill { padding:6px 12px; border-radius:8px; font:600 12.5px 'Inter',sans-serif;
             white-space:nowrap; color:rgba(255,255,255,.55);
             border:1px solid rgba(255,255,255,.1); }
.rail-pill:hover { color:#fff; border-color:rgba(255,255,255,.22); }
.rail-pill.on { background:oklch(78% 0.13 300); color:#14141a; border-color:transparent; }
.rail .curpick { flex:none; padding:5px 10px; }

/* --- page shell --- */
.tp { max-width:1200px; margin:0 auto; padding:34px 28px 60px;
      display:flex; flex-direction:column; gap:40px; }

/* --- masthead: month number + calendar --- */
.tp-mast { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
           gap:40px; align-items:start; padding-bottom:64px; position:relative;
           border-bottom:1px solid rgba(255,255,255,.1); }
.tp-mast-l { display:flex; flex-direction:column; gap:16px; min-width:0; }
.tp-crumb { font:400 12.5px 'JetBrains Mono',monospace; color:rgba(255,255,255,.45); }
.tp-crumb ol { display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.tp-crumb li + li::before { content:"/"; margin:0 .6em; color:rgba(255,255,255,.25); }
.tp-crumb a { color:rgba(255,255,255,.65); text-decoration:none; }
.tp-crumb a:hover { color:#fff; text-decoration:underline; }
/* The month number is a backdrop: an outline drawn behind the year and the
   H1, sitting on the same baseline and rising above them. Dimmer than it was
   as a block of its own, so the text on top of it stays the thing you read. */
.tp-title { position:relative; padding:64px 0 0 26px; }
.tp-num { position:absolute; left:-8px; bottom:-16px; z-index:0; pointer-events:none;
          font:700 260px/.8 'Space Grotesk',sans-serif; letter-spacing:-.05em;
          color:transparent; -webkit-text-stroke:2px rgba(185,138,247,.5);
          user-select:none; }
.tp-title-r { position:relative; z-index:1; display:flex; flex-direction:column; gap:6px;
              padding-bottom:8px; min-width:0; }
.tp-year { font:700 15px 'JetBrains Mono',monospace; color:oklch(88% 0.09 300); }
.tp-title h1 { margin:0; font:700 44px/.95 'Space Grotesk',sans-serif;
               letter-spacing:-.03em; text-wrap:balance; }
.tp-intro { margin:0; max-width:560px; font:400 14.5px/1.8 'Inter',sans-serif;
            color:rgba(255,255,255,.52); text-wrap:pretty; }
.tp-intro em { font-style:normal; color:oklch(88% 0.09 300); }
.tp-status { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tp-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
           border:1px solid rgba(185,138,247,.42); border-radius:999px;
           background:rgba(185,138,247,.08); font:600 10px 'Inter',sans-serif;
           letter-spacing:.08em; text-transform:uppercase; color:#b98af7; }
.tp-pill .dot { width:7px; height:7px; border-radius:50%; background:oklch(82% 0.15 150);
                box-shadow:0 0 0 3px oklch(82% 0.15 150 / .2); }
.tp-pill.final .dot { background:rgba(255,255,255,.4); box-shadow:none; }
.tp-detail { font:400 12px 'Inter',sans-serif; color:rgba(255,255,255,.4); }
.tp-mast-r { display:flex; flex-direction:column; gap:8px; min-width:0; }

/* --- calendar --- */
.tp-cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.tp-cal-wd { font:600 10px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase;
          color:rgba(255,255,255,.32); text-align:center; }
.tp-cal-day { position:relative; overflow:hidden; min-height:58px; border-radius:7px;
           padding:6px 7px; display:flex; flex-direction:column;
           justify-content:space-between; color:#fff; background:#141417;
           border:1px solid rgba(255,255,255,.08); }
.tp-cal-day:hover { color:#fff; }
.tp-cal-day.blank { visibility:hidden; }
.tp-cal-day.art { border-color:rgba(185,138,247,.55); }
.tp-cal-day.today { border:1px solid #fff; }
.tp-cal-day.future { background:#0b0b0d; border:1px dashed rgba(185,138,247,.6); }
.tp-cal-day img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
               opacity:.55; }
.tp-cal-day.future img { opacity:.38; filter:grayscale(.6); }
.tp-cal-n, .tp-cal-v { position:relative; z-index:1; text-shadow:0 1px 4px #000; }
.tp-cal-n { font:700 11px 'JetBrains Mono',monospace; }
.tp-cal-v { font:600 10px 'JetBrains Mono',monospace; color:oklch(88% 0.09 300);
         white-space:nowrap; }
.tp-cal-legend { display:flex; gap:16px; flex-wrap:wrap; font:400 11px 'Inter',sans-serif;
              color:rgba(255,255,255,.38); }

/* --- pets: pixel art, always drawn at a whole multiple of its size --- */
.pet { image-rendering:pixelated; flex:none; }
.pet.flip { transform:scaleX(-1); }
.pet-pic { display:contents; }
.pet-header { position:absolute; left:0; bottom:-1px; }
.pet-late_arrivals { margin:-30px 0 -6px; }
.pet-coming { margin:-24px 0 -8px; }
.pet-cta { margin-bottom:-22px; }

/* --- section heads --- */
.tp-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tp-head .kicker, .tp-card .kicker { font:600 11px 'Inter',sans-serif; letter-spacing:.14em;
                  text-transform:uppercase; color:oklch(80% 0.13 85); }
.tp-head h2 { margin:0; font:700 22px 'Space Grotesk',sans-serif; color:rgba(255,255,255,.92); }
.tp-head .rule { flex:1; height:1px; background:rgba(255,255,255,.1); min-width:20px; }
.tp-sub, .tp-colsub { font:400 12px 'Inter',sans-serif; color:rgba(255,255,255,.32); }
.tp-sec { display:flex; flex-direction:column; gap:18px; }

/* --- the two top 10 lists --- */
.tp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));
           gap:40px; }
.tp-col { display:flex; flex-direction:column; gap:6px; min-width:0; container-type:inline-size; }
/* In the two list columns the kicker and the rule share the first line and the
   H2 gets the whole column width under them. Its size follows the column
   (cqi = 1% of the column width), from 22px down to 17px, so a long heading
   stays on one line where it can and wraps into balanced lines where not. */
.tp-col .tp-head { margin-bottom:6px; display:grid; grid-template-columns:auto minmax(20px,1fr);
                   column-gap:14px; row-gap:8px; align-items:center; }
.tp-col .tp-head .kicker { grid-area:1 / 1; }
.tp-col .tp-head .rule { grid-area:1 / 2; }
.tp-col .tp-head h2 { grid-area:2 / 1 / 3 / -1; font-size:clamp(17px, 3.9cqi, 22px);
                      line-height:1.2; text-wrap:balance; }
.tp-colsub { margin-bottom:4px; }
.tp-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.tp-row { display:grid; grid-template-columns:48px 148px minmax(0,1fr); gap:14px;
          align-items:start; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.tp-rank { font:700 40px/1 'Space Grotesk',sans-serif; color:transparent; margin-top:-2px;
           -webkit-text-stroke:1.5px rgba(255,255,255,.3); }
.tp-shot { display:block; aspect-ratio:460/215; border-radius:8px; overflow:hidden;
           background:#17171c; border:1px solid rgba(255,255,255,.08); position:relative; }
.tp-shot.dashed { border:1px dashed rgba(185,138,247,.55); }
.tp-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.tp-badge { position:absolute; top:6px; left:6px; color:#14141a; font:700 9px 'Inter',sans-serif;
            letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.tp-badge.new { background:oklch(82% 0.15 150); }
.tp-badge.day { background:oklch(78% 0.13 300); }
.tp-badge.date { background:oklch(80% 0.13 85); }
.tp-body { display:flex; flex-direction:column; gap:7px; min-width:0; }
.tp-name { font:700 15.5px/1.25 'Space Grotesk',sans-serif; color:#fff; }
.tp-name.sm { font-size:14.5px; }
.tp-name:hover { color:#fff; text-decoration:underline; }
.tp-name:hover .gc-steam { fill:#fff; }
.tp-name:hover .gc-arrow { stroke:#fff; }
.tp-stats { display:flex; flex-wrap:wrap; gap:4px 12px; font:400 11.5px/1.5 'JetBrains Mono',monospace;
            color:rgba(255,255,255,.45); border-left:2px solid rgba(185,138,247,.5);
            padding-left:9px; }
.tp-stats b { font-weight:600; color:oklch(88% 0.09 300); }
.tp-stats.reviews { border-left-color:oklch(85% 0.14 150 / .5); }
.tp-stats.reviews b { color:oklch(85% 0.14 150); }

/* --- late arrivals and games still to come --- */
.tp-mini { font:400 11.5px/1.5 'JetBrains Mono',monospace; color:rgba(255,255,255,.45);
           border-left:2px solid rgba(255,255,255,.12); padding-left:9px;
           display:flex; flex-direction:column; gap:2px; }
.tp-mini .g { color:oklch(85% 0.14 150); }
.tp-mini.lilac { border-left-color:rgba(185,138,247,.5); }
.tp-mini b { color:oklch(88% 0.09 300); font-weight:600; }
/* Late arrivals and games still to come use the tag pages' scroller: .strip,
   .gc, the arrows and the edge fades all come from tag.css and TAG_STRIP_JS.
   The heading keeps its sub line and the arrows together at the right end. */
.tp-late .gc, .tp-coming .gc { gap:10px; }
.tp-head .row-nav { margin-left:auto; }

/* --- the month in numbers --- */
.tp-card { border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:20px 22px;
           display:flex; flex-direction:column; gap:14px; min-width:0; }
.tp-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
            gap:16px; }
.tc-title { font:700 17px/1.3 'Space Grotesk',sans-serif; }
.tb-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
           flex-wrap:wrap; }
.tb-head b { font:700 16px 'Space Grotesk',sans-serif; }
.tb-head span { font:400 11px 'Inter',sans-serif; color:rgba(255,255,255,.32); }
.tb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
           gap:12px 40px; }
.tb-row { display:grid; grid-template-columns:120px minmax(0,1fr) 44px 50px; gap:10px;
          align-items:center; }
.tb-row.nd { grid-template-columns:120px minmax(0,1fr) 44px; }
.tb-tag { font:600 11.5px 'JetBrains Mono',monospace; color:rgba(255,255,255,.7); overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap; }
.tb-track { height:6px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.tb-track i { display:block; height:100%; border-radius:3px; background:#b98af7; }
.tb-n { font:600 12px 'JetBrains Mono',monospace; color:oklch(88% 0.09 300); text-align:right; }
.d { font:600 11px 'JetBrains Mono',monospace; color:rgba(255,255,255,.45); text-align:right; }
.d.up { color:oklch(85% 0.14 150); }
.d.down { color:oklch(72% 0.14 25); }

.pm-bar { display:flex; height:14px; border-radius:4px; overflow:hidden; gap:2px; }
.pm-legend { display:flex; flex-direction:column; gap:6px; }
.pm-legend div { display:flex; align-items:center; gap:8px; font:400 12px 'JetBrains Mono',monospace;
                 color:rgba(255,255,255,.6); }
.pm-legend .k { flex:1; }
.pm-legend b { font:600 12px 'JetBrains Mono',monospace; color:#fff; }
.pm-legend .dot { width:10px; height:10px; border-radius:3px; flex:none; }
.pm-free { background:oklch(85% 0.14 150); }
.pm-b1 { background:oklch(88% 0.09 300); }
.pm-b2 { background:#b98af7; }
.pm-b3 { background:oklch(62% 0.15 300); }
.pm-b4 { background:oklch(80% 0.13 85); }

.wd-bars { display:flex; align-items:flex-end; gap:8px; height:130px; }
.wd-bars > div { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
                 height:100%; justify-content:flex-end; }
.wd-bars .n { font:600 10px 'JetBrains Mono',monospace; color:rgba(255,255,255,.5); }
.wd-bars .bar { width:100%; border-radius:4px 4px 0 0; background:rgba(255,255,255,.18); }
.wd-bars .bar.on { background:#b98af7; }
.wd-bars .k { font:600 10px 'JetBrains Mono',monospace; color:rgba(255,255,255,.4); }

.vs { display:flex; flex-direction:column; gap:10px; }
.vs-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px;
          align-items:baseline; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.07); }
.vs-row .k { font:500 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.6); }
.vs-row b { font:700 14px 'JetBrains Mono',monospace; color:#fff; }

/* --- CTA, update line --- */
.tp-cta { display:flex; align-items:center; justify-content:space-between; gap:20px;
          flex-wrap:wrap; border:1px solid rgba(255,255,255,.12); border-radius:14px;
          padding:22px 26px; }
.tp-cta b { font:700 19px 'Space Grotesk',sans-serif; max-width:560px; text-wrap:pretty; }
.tp-cta b em { font-style:normal; color:oklch(78% 0.13 300); }
.tp-cta-r { display:flex; align-items:flex-end; gap:18px; }
.tp-cta .btn { background:oklch(78% 0.13 300); color:#14141a; border-radius:10px;
               padding:13px 24px; font:700 14.5px 'Space Grotesk',sans-serif; white-space:nowrap; }
.tp-cta .btn:hover { background:oklch(84% 0.13 300); color:#14141a; }
.tp-note { margin:0; font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.32); }
.tp .site-footer { margin-top:0; }

@media (max-width: 640px) {
  .rail { padding:8px 16px; }
  .tp { padding:22px 16px 40px; gap:32px; }
  .tp-mast { padding-bottom:58px; gap:28px; }
  .tp-title { padding:48px 0 0 14px; }
  .tp-num { font-size:170px; left:-6px; bottom:-16px; -webkit-text-stroke-width:1.5px; }
  .tp-title h1 { font-size:34px; }
  .tp-cal { gap:3px; }
  .tp-cal-day { min-height:46px; padding:4px 5px; border-radius:6px; }
  .tp-cal-v { font-size:9px; }
  .tp-row { grid-template-columns:30px 112px minmax(0,1fr); gap:10px; }
  .tp-rank { font-size:28px; }
  .tp-name { font-size:14.5px; }
  .tb-row { grid-template-columns:96px minmax(0,1fr) 38px 44px; gap:8px; }
  .tb-row.nd { grid-template-columns:96px minmax(0,1fr) 38px; }
  .tp-cta { padding:18px; }
  .tp-cta b { font-size:17px; }
  .tp-cta-r { width:100%; min-width:0; }
  /* The dog and the button share one line. The button text may wrap here:
     kept on one line it is ~300px wide, and with the dog beside it that is
     wider than the card on a 360px screen, which scrolled the page sideways. */
  .tp-cta .btn { flex:1 1 auto; min-width:0; text-align:center; white-space:normal;
                 text-wrap:balance; }
  /* Both scrollers go full bleed like the tag page rows: the strip runs to the screen edges and
     tag.css puts the 16px gutter back as padding, so card 2 peeks in. */
  .tp .strip { margin:0 -16px; }
  /* The strip bleeds past the page padding here, the bar and the arrow do
     not: bar on the gutter, arrow 8px from the screen edge as on tag pages. */
  .tp .strip-bar { margin:10px 0 0; }
  .tp .strip-hint { right:-8px; }
  /* The heading wraps here, so a pet pulled up onto the rule would sit on
     the words instead. */
  .pet-late_arrivals, .pet-coming { margin:0; }
}

@media (max-width: 380px) {
  .rail .curpick label { display:none; }
  .tp-num { font-size:150px; }
}

/* --- the /monthly hub --- */
.mh-mast { display:flex; flex-direction:column; gap:14px; padding-bottom:28px;
           border-bottom:1px solid rgba(255,255,255,.1); }
.mh-mast h1 { margin:0; font:700 72px/.9 'Space Grotesk',sans-serif; letter-spacing:-.035em;
              color:transparent; -webkit-text-stroke:2px rgba(185,138,247,.75); text-wrap:balance; }
.mh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px;
           margin:0; padding:0; list-style:none; }
.mh-grid a { display:flex; flex-direction:column; gap:8px; color:#fff; }
.mh-grid a:hover b { text-decoration:underline; }
.mh-art { position:relative; display:block; aspect-ratio:460/215; border-radius:10px;
          overflow:hidden; background:#17171c; border:1px solid rgba(255,255,255,.08); }
.mh-art img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.mh-art .tp-pill { position:absolute; top:8px; left:8px; background:rgba(11,11,13,.82); }
.mh-grid b { font:700 19px 'Space Grotesk',sans-serif; }
.mh-meta { font:400 12px 'JetBrains Mono',monospace; color:oklch(88% 0.09 300); }
.mh-top { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.45);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 640px) {
  .mh-mast h1 { font-size:44px; -webkit-text-stroke-width:1.5px; }
}