/* spotlight-discovery.css — the Spotlight page's browse layer (spotlight.html only).
 *
 * Loaded after style.css and spotlight.css, so it can restyle the shared .shelf / .game-row /
 * .game-card classes without touching the homepage, which never loads this file.
 *
 * Ordinary shelf cards are landscape artwork with NO caption line — the artwork carries the name,
 * so the only things over the picture are the small status chip in its top-left corner and, on
 * Continue playing, the 3px progress rail along its bottom edge. Continue playing is the one row
 * that keeps a name line (opened by its lime play triangle). The ranked Top games row swaps the
 * landscape art for the artwork worker's real portrait (2:3) poster, moves the name line out of the
 * markup entirely, and tucks the oversized 1..10 numeral behind the poster's left edge. Continue
 * playing cards are plain #play/<id> links into the player: no hover or focus panel, no expanded
 * state. Every shelf heading opens with a stroke-only lime glyph (aria-hidden) parked in the page's
 * LEFT GUTTER, outside the heading text block, so the title and subtitle share the first card's
 * left edge; the mark is centred across the title + subtitle block.
 *
 * Desktop shows six whole cards per row at >=1200px; narrower widths step down to five, four,
 * three and two, so rows finish inside the viewport at every size. The Continue playing shelf is the
 * exception: its row fits five wider cards at desktop, stepping down 5 → 4 → 3 → 2, so the recent
 * launches (and the fresh-browser preview) read a size larger than the six-card rows. Scrollbars
 * stay hidden while arrows, swipes and single-card keyboard steps keep working.
 *
 * The floating detail card is fixed-positioned on <body>, so it sits above the page without
 * reflowing content or being clipped by a row's overflow. It is centred on the source card's
 * THUMBNAIL rectangle, clamped into the viewport, kept below the site header, and keeps the page's
 * own background (#0b0d0b through --bg), a 300px width and 44px-tall action targets.
 *
 * This file is linked after style.css and .sd-row has the same specificity as the shared
 * .game-row, so the Spotlight rows win here and the homepage (which never loads this file) is
 * untouched.
 */

/* Cards: landscape artwork, name below, status chip ---------------------------------- */
.sd-card{display:flex;flex-direction:column;gap:8px}
.sd-card .sd-art{border:0;padding:0;background:#23291c;display:block;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;position:relative;isolation:isolate;cursor:pointer}
.sd-card .sd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .4s,filter .4s}
.sd-card:hover .sd-img,.sd-card .sd-art:focus-visible .sd-img{transform:scale(1.045);filter:saturate(1)}
.sd-card .sd-art:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sd-card .cover-contain{object-fit:contain}
.sd-fallback{display:grid;place-items:center;width:100%;height:100%;background:var(--cover,#37452b);color:#eef4e4;font-family:Pixel,monospace;font-size:22px;letter-spacing:1px;position:absolute;inset:0}
/* The name is no longer painted over the artwork, so the gradient is only a soft vignette for
   depth behind the status chip instead of a text backdrop. */
.sd-card .sd-art:after{background:linear-gradient(0deg,#0407038f 0%,transparent 52%)}
/* Name line under the artwork — Continue playing cards only (ordinary shelf cards carry no caption,
   their artwork includes the name). Two clamped lines at a readable 14px: no overlay, no shadow and
   no gradient padding. pointer-events:none keeps the whole card one click/tap target. */
.sd-card .sd-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:700;line-height:1.34;letter-spacing:-.1px;color:#f1f3e8;text-shadow:none;overflow-wrap:anywhere;pointer-events:none}
/* Top-left chip: sits on the artwork, never interactive. */
.sd-badge{position:absolute;left:8px;top:8px;z-index:3;padding:3px 6px;font-size:12px;line-height:1.3;letter-spacing:.4px;color:#dfe7d5;background:#0a100bdb;border:1px solid #ffffff21;border-radius:3px;pointer-events:none}

/* Top games — the Netflix treatment, from the reference: an oversized neon numeral 1..10 tucked
   behind the poster's left edge. Each card is a two-column grid — the numeral's column on the left,
   the 2:3 poster on the right — so every card keeps the same width and every poster the same size.
   The numeral is SVG text drawn in the digit's own ink box (RANK_VIEWBOX in the module, read from the
   shipped body font: cap height 700, round-digit overshoot to 714/-14, widest ink at 592), mapped
   onto its box with preserveAspectRatio="none". Its box runs from the card's left edge to a little
   way behind the poster's left edge, and the card grid stretches that box to the poster's exact
   height — so the ink box's bottom row IS the poster's bottom edge and the numeral cannot paint a
   pixel below the poster, with no negative margin and no line-height guesswork. Every digit is
   right-anchored in the box, so the narrow 1 sits as close to the poster as a wide 0, and 10 is
   squeezed into one digit's width by textLength rather than a transform. The fill is the page's own
   background, the outline is lime (see .sd-rank text), the glow is a low-opacity haze, and the whole
   numeral sits at z-index 0 under the poster (z-index 1). */
.sd-ranked{position:relative;display:grid;grid-template-columns:47% minmax(0,1fr);grid-template-areas:"rank art";align-items:end;container-type:inline-size}
.sd-ranked .sd-art{grid-area:art;position:relative;z-index:1;aspect-ratio:2/3}
.sd-row[data-portrait] .sd-art{aspect-ratio:2/3}
.sd-rank{grid-area:rank;align-self:stretch;justify-self:end;position:relative;z-index:0;width:.61em;margin-right:-.15em;font-size:clamp(58px,7vw,190px);font-size:100cqw;pointer-events:none;user-select:none}
.sd-rank svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;filter:drop-shadow(0 0 10px #c4fa5338)}
/* Neon outline on a dark fill: the stroke width is in viewBox units where non-scaling-stroke is
   missing (2.3px at the rendered size) and exactly 2px where it is supported. */
.sd-rank text{font-family:Space,Arial,sans-serif;font-weight:900;fill:var(--bg);stroke:var(--lime);stroke-linejoin:round;stroke-width:11}
@supports(vector-effect:non-scaling-stroke){.sd-rank text{stroke-width:2;vector-effect:non-scaling-stroke}}
.sd-rank-ten text{letter-spacing:0}

/* Shelf headings: the cyberpunk glyph is taken OUT of the heading text block and parked in the
   page's left gutter, so the title + subtitle keep the first card's left edge at every width.
   --sd-gutter is clamped below the catalogue's own left padding (4.6% desktop, 5% mobile), so the
   mark always sits inside that margin and can never cross the viewport edge or add a horizontal
   scrollbar. The title block holds only the h3 and its subtitle; the glyph is absolutely positioned
   across their full height, which centres it between the two lines. */
.sd-shelf{--sd-gutter:clamp(16px,4.4vw,26px)}
.sd-shelf-title{position:relative;min-width:0}
.sd-shelf .sd-glyph{position:absolute;left:calc(var(--sd-gutter) * -1);top:50%;transform:translateY(-50%)}
.sd-shelf .shelf-heading h3{display:block;font-size:19px;letter-spacing:-.4px;margin:0}
.sd-shelf .shelf-subtitle{margin:6px 0 0;padding:0;max-width:62ch}
.sd-title-text{min-width:0}
/* Continue playing cards open with a small lime play triangle on the name line — on those cards
   only, never in the shelf heading and never on any other card. */
.sd-play-mark{display:inline-flex;align-items:center;margin-right:7px;color:var(--lime);vertical-align:-1px}
.sd-play-mark svg{width:11px;height:11px;fill:currentColor;stroke:none}
/* Every heading keeps the same treatment — warm-white title, muted count, muted subtitle. The
   Top games numerals carry the accent; the heading itself is not recoloured. */
.sd-glyph{display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px;color:var(--lime)}
.sd-glyph svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor}
/* Top games: a low-opacity lime radial glow behind the whole ranked row — a glow, never a green
   panel and never a visible rectangle. It is a centred ellipse that fades to fully transparent at
   its own edge, so all four boundaries dissolve; it sits at z-index -1 inside the section's own
   stacking context, behind the cards. */
.sd-shelf[data-sd-shelf="top"]{position:relative;isolation:isolate}
.sd-shelf[data-sd-shelf="top"]::before{content:'';position:absolute;inset:-18px -1% -6px;z-index:-1;pointer-events:none;background:radial-gradient(45% 45% at 50% 50%,#c4fa5314,transparent 100%)}
/* Continue playing progress rail: 3px, pinned along the artwork's bottom edge. The preview paints
   fixed sample fractions and says so in its own label; a real history entry paints an empty track
   labelled "Gameplay progress unavailable" — a cross-origin frame cannot report gameplay progress. */
.sd-rail{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;height:3px;background:#232a1d}
.sd-rail-fill{display:block;height:100%;background:var(--lime)}

/* Rows: hidden scrollbar; six whole cards at >=1200px; arrows, swipes and keyboard keep working. */
/* Each width subtracts one extra pixel so sub-pixel rounding can never turn a fitted row into a
   1px scroller. */
.sd-row{--sd-gap:16px;gap:var(--sd-gap);grid-auto-columns:calc((100% - 81px)/6)}
/* The shared .game-row gives every card 2px of padding (with a matching -2px margin) so a focus
   outline is never clipped by the scroller, and turns on scroll-snap-type: x mandatory. On a
   scrollable row Chromium snaps to scrollLeft 2, which would drag the first card 2px left of the
   heading title; nudging the snap position by that same 2px keeps the snap on the title/card edge,
   so the first card and the title stay flush at every width. */
.sd-row{scroll-padding-left:2px}
/* Continue playing (demo or real history) is the page's standout row: five wider cards fill the
   desktop viewport at >=1200px, so the launch history reads a size larger than the six-card rows.
   The shelf still holds up to 20 entries — the rest scroll into view. Steps down 5 → 4 → 3 → 2. */
.sd-shelf[data-sd-shelf="demo"] .sd-row,
.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 64px)/5)}
.sd-row{scrollbar-width:none;-ms-overflow-style:none}
.sd-row::-webkit-scrollbar{display:none;width:0;height:0}
.page-spotlight,.page-spotlight .filters,.sd-panel-body{scrollbar-width:none}
.page-spotlight::-webkit-scrollbar,.page-spotlight .filters::-webkit-scrollbar,.sd-panel-body::-webkit-scrollbar{display:none}
@media(max-width:1199px){.sd-row{grid-auto-columns:calc((100% - 65px)/5)}
  .sd-shelf[data-sd-shelf="demo"] .sd-row,.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 48px)/4)}}
@media(max-width:1023px){.sd-row{--sd-gap:14px;grid-auto-columns:calc((100% - 43px)/4)}
  .sd-shelf[data-sd-shelf="demo"] .sd-row,.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 42px)/4)}}
@media(max-width:860px){.sd-row{--sd-gap:14px;grid-auto-columns:calc((100% - 29px)/3)}
  .sd-shelf[data-sd-shelf="demo"] .sd-row,.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 28px)/3)}}
@media(max-width:720px){.sd-row{--sd-gap:12px;grid-auto-columns:calc((100% - 25px)/3)}
  .sd-shelf[data-sd-shelf="demo"] .sd-row,.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 24px)/3)}}
@media(max-width:520px){.sd-row{--sd-gap:12px;grid-auto-columns:calc((100% - 13px)/2)}
  .sd-shelf[data-sd-shelf="demo"] .sd-row,.sd-shelf[data-sd-shelf="recent"] .sd-row{grid-auto-columns:calc((100% - 12px)/2)}}

/* Filtered / search / favourites: a responsive grid of every result --------------- */
.sd-results{scroll-margin-top:90px}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.sd-grid .sd-card{min-width:0}

/* Floating detail card: the page's own background, ~30% narrower than the original overlay, compact
   vertical rhythm, 44px action targets. It is centred on the source card's thumbnail by the module. */
.sd-panel{position:fixed;z-index:80;width:min(300px,92vw);display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 30px 70px #000000c4;animation:sd-panel-in .18s ease-out}
/* Transparent bridge across the gap, so a pointer travelling from the card into the panel
   never leaves "hovered" ground and the panel does not flicker shut. */
.sd-panel::before{content:'';position:absolute;left:0;right:0;height:14px;top:-13px}
.sd-panel[data-flip="above"]::before{top:auto;bottom:-13px}
.sd-panel-art{position:relative;border-radius:10px 10px 0 0;overflow:hidden;background:#23291c}
.sd-panel-img{display:block;width:100%;aspect-ratio:16/9;max-height:24vh;object-fit:cover}
.sd-panel-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;max-height:46vh;overflow:auto}
.sd-panel-title{margin:0;font-size:15px;line-height:1.25;letter-spacing:-.2px}
.sd-panel-genre{margin:0;font-size:12px;color:#b2bca7}
.sd-panel-copy{margin:0;font-size:13px;line-height:1.55;color:#dbe2d1}
.sd-panel-avail{margin:0;font-size:12px;line-height:1.5;color:#b2bca7;padding-left:10px;border-left:2px solid #c4fa5366}
.sd-panel-avail.is-pending{color:#cbd6bd}
.sd-panel-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.sd-panel-actions .button{min-height:44px;flex:1 1 auto;justify-content:center;font-size:13px;padding:10px 12px}
.sd-panel-actions .heart-inline{display:inline-flex;align-items:center;gap:8px}
.sd-panel-actions .heart-inline svg{width:15px;height:15px}
.sd-panel-actions .heart-inline.saved{color:var(--lime);border-color:var(--lime)}
@keyframes sd-panel-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* Responsive ---------------------------------------------------------------------- */
@media(max-width:1050px){
  .sd-shelf .shelf-heading h3{font-size:17px}
  .sd-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}
@media(max-width:720px){
  /* At phone widths the 16px glyph leaves only a 1px gap to the title's left edge — the title
     itself is unchanged, so shrink the mark (and its svg) to 12px. The absolute left gutter
     offset and the vertical centring are untouched: the glyph still sits fully inside the page
     margin, still centred across the title + subtitle block. */
  .sd-glyph{width:12px;height:12px}
  .sd-glyph svg{width:12px;height:12px}
  .sd-panel{width:min(300px,94vw)}
  .sd-panel-img{max-height:22vh}
  .sd-panel-body{max-height:44vh;padding:10px 11px 12px}
  .sd-panel-actions .button{flex:1 1 46%}
  .sd-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  /* The ranked Top games row keeps two cards per row on phones, so the 2:3 posters stay wide
     enough to read instead of thinning into needles. The numeral is sized from the card in cqw, so
     it scales with the poster at any width and needs no viewport-based override. */
  .sd-row[data-portrait]{grid-auto-columns:calc((100% - 12px)/2)}
}
@media(prefers-reduced-motion:reduce){
  .sd-panel{animation:none}
  .sd-card .sd-img{transition:none}
}