/* GameGrades remake: the collection side holds games as face-out cases (box art,
   rating box, price label); the editorial side sets scores and reviews as paper
   inside the website. Tokens live in gamegrades-colors.css. Loaded in <head>
   after style.css and before a page's own <style>, which keeps the cascade order
   CLAUDE.md asks for (style.css, then page CSS). */

@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: block; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/SourceSerif4-Italic-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: block; }

/* The wordmark (.gg-wordmark) and the Archivo / Bodoni faces live in wordmark.css. */

/* ── The case ─────────────────────────────────────────────── */
.gg-case { position: relative; display: block; width: 100%; aspect-ratio: 135 / 190; max-width: 100%; border-radius: 3px 7px 7px 3px; background: #000; overflow: hidden; container-type: inline-size; box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 18px 30px -10px rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.6); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; }
.gg-case-link { display: block; text-decoration: none; color: inherit; border-radius: 3px 7px 7px 3px; }
.gg-case-link:focus-visible { outline: 2px solid var(--gg-accent-light); outline-offset: 4px; }
.gg-sleeve { display: none; }
.gg-case-link:hover .gg-case, .gg-case-link:focus-visible .gg-case { box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 28px 40px -10px rgba(0,0,0,.85); }
.gg-case > img.gg-art, .gg-case > .gg-noart { position: absolute; left: 0; right: 0; bottom: 0; top: 8%; width: 100%; height: 92%; object-fit: cover; display: block; }
.gg-case > .gg-noart { display: grid; place-items: center; background: linear-gradient(160deg, #24212b, #121015); color: #7d7888; font: 800 6cqw/1.2 var(--gg-font-case); text-align: center; padding: 10cqw; }
.gg-case .gg-band { position: absolute; inset: 0 0 auto 0; height: 8%; display: flex; align-items: center; gap: 2cqw; padding: 0 5cqw 0 8cqw; background: var(--gg-band, #1d1b22); z-index: 2; }
.gg-case .gg-band .cover-platforms { position: static !important; inset: auto !important; transform: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; backdrop-filter: none !important; }
.gg-case .gg-band .pf-row { gap: 2.2cqw; }
.gg-case .gg-band .pf-row-item, .gg-case .gg-band .pf-icon { font-size: max(10px, 5.4cqw); }
.gg-case::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5%; z-index: 3; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.14) 55%, rgba(0,0,0,.3)); pointer-events: none; }
.gg-case::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(var(--gg-glare, 118deg), rgba(255,255,255,.2), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.07)); }
.gg-case .gg-yr { position: absolute; right: 7%; bottom: 4.6%; z-index: 4; font: 700 max(9px, 4.4cqw)/1 var(--gg-font-case); color: rgba(255,255,255,.88); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
/* Band colours follow case_band (database.py): an exclusive takes its family's, a game on several vendors' hardware is printed black. */
.gg-band-multi { --gg-band: #070708; } .gg-band-pc { --gg-band: #2c2c33; } .gg-band-playstation { --gg-band: #24489a; } .gg-band-xbox { --gg-band: #23753a; } .gg-band-switch { --gg-band: #b4142c; }
.gg-band-wiiu { --gg-band: #2f7fa3; } .gg-band-wii { --gg-band: #8a8f98; } .gg-band-gamecube { --gg-band: #4b3f8f; } .gg-band-n64 { --gg-band: #55555e; }
.gg-band-snes, .gg-band-nes { --gg-band: #6b6676; } .gg-band-3ds, .gg-band-ds { --gg-band: #6d7280; } .gg-band-gameboy { --gg-band: #6f8a3c; }
@media (prefers-reduced-motion: reduce) { .gg-case { transition: none; transform: none !important; } }

/* Rating box: where an age rating sits on a real box, the grade sits on ours */
.gg-rbox { position: absolute; left: 9%; bottom: 4%; z-index: 4; display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 2.4cqw; background: var(--gg-tag); color: var(--gg-tag-ink); border: max(1.5px, .9cqw) solid var(--gg-tag-ink); border-radius: 1cqw; padding: 1cqw 2.4cqw 1cqw 2cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.35); font-variant-numeric: lining-nums tabular-nums; }
.gg-rbox .n { min-inline-size: 4ch; font: 900 11cqw/0.9 var(--gg-font-case); font-stretch: 112%; grid-row: span 2; letter-spacing: -.03em; }
.gg-rbox .g { font: 900 3.4cqw/1 var(--gg-font-case); font-stretch: 125%; letter-spacing: .1em; border-bottom: max(1px, .45cqw) solid currentColor; padding-bottom: .5cqw; }
.gg-rbox .l { font: 700 2.7cqw/1.1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; padding-top: .5cqw; }
.gg-rbox.p10 { background: linear-gradient(155deg, #fff6d6, #f3c766 45%, #d7a73a 72%, #fbefc4); }
.gg-rbox.na .n { color: #8b8792; font-size: 8cqw; }
/* Score colour and scale: the number in the ramp's printed hue, a 0-10 bar along
   the foot. A 10 keeps the ink number on its gold stock, with a gold bar. */
.gg-rbox .n { color: var(--cp, var(--gg-tag-ink)); }
.gg-rbox.p10 .n { color: var(--gg-tag-ink); }
.gg-rbox .m { grid-column: 1 / -1; display: block; height: max(3px, 1.1cqw); margin-top: max(2px, .8cqw); border-radius: 999px; background: rgba(20, 18, 22, .12); overflow: hidden; }
.gg-rbox .m i { display: block; height: 100%; border-radius: inherit; background: var(--cp, var(--gg-tag-ink)); }
.gg-rbox.p10 .m { background: rgba(20, 18, 22, .18); }
.gg-rbox.p10 .m i { background: linear-gradient(90deg, #8a6418, #c99a32 50%, #8a6418); }

/* Price label: one quiet printed label on the rating box's baseline */
.gg-plabel { position: absolute; right: 8%; bottom: 4%; z-index: 4; display: grid; min-width: 30cqw; background: var(--gg-tag); color: var(--gg-tag-ink); border: max(1.5px, .9cqw) solid var(--gg-tag-ink); border-radius: 1.2cqw; box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,.35); pointer-events: none; font-variant-numeric: lining-nums tabular-nums; }
.gg-plabel .pr { display: flex; align-items: baseline; justify-content: flex-end; gap: 1.6cqw; padding: 1.6cqw 2.4cqw 1.2cqw; }
.gg-plabel .pr b { font: 800 7.2cqw/1 var(--gg-font-case); font-stretch: 100%; letter-spacing: -.02em; }
.gg-plabel .pr s { font: 600 4.4cqw/1 var(--gg-font-case); color: #85808c; text-decoration-thickness: max(1px, .35cqw); }
.gg-plabel .off { align-self: center; font: 800 3.8cqw/1 var(--gg-font-case); letter-spacing: .04em; color: #fff; background: #b4232a; border-radius: .8cqw; padding: .9cqw 1.2cqw .8cqw; }
.gg-plabel .pv { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; border-top: max(1px, .4cqw) solid var(--gg-tag-ink); padding: 1cqw 2.4cqw 1.2cqw; font: 700 4.4cqw/1 var(--gg-font-case); }
.gg-plabel .pv small { font: 800 3.2cqw/1 var(--gg-font-case); letter-spacing: .12em; color: #6a6670; }
.gg-plabel .pv s { color: #85808c; font-weight: 600; margin-right: 1cqw; }
.gg-plabel.sale .pr { display: grid; justify-items: end; gap: 1cqw; padding-top: 1.4cqw; }
.gg-plabel .was { display: flex; align-items: center; gap: 1.4cqw; }
.gg-plabel.sale .pr b { color: #b4232a; }
.gg-plabel .pv.new { justify-content: center; letter-spacing: .1em; font-size: 3.6cqw; font-weight: 800; text-transform: uppercase; }
@container (max-width: 190px) { .gg-plabel { min-width: 0; } .gg-plabel .pr b { font-size: 8cqw; } .gg-plabel .pv { font-size: 5cqw; } .gg-plabel .pv small { display: none; } }

/* Under the case */
.gg-item { position: relative; display: grid; gap: 10px; min-width: 0; align-content: start; }
.gg-item::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3%; aspect-ratio: 135 / 190; background: radial-gradient(closest-side, var(--gg-glow, rgba(113,90,184,.35)), transparent); filter: blur(22px); opacity: .5; z-index: 0; pointer-events: none; }
.gg-item > * { position: relative; z-index: 1; }
.gg-tagline { display: grid; gap: 4px; min-width: 0; }
.gg-tagline .gg-title { margin: 0; font: 800 15px/1.2 var(--gg-font-case); font-stretch: 95%; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-tagline .gg-sub { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px/1.2 var(--gg-font-case); color: var(--gg-text-3); }
.gg-tagline .gg-sub b { color: var(--gg-text-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }

/* ── The case opening in place (fly layer) ── */
.gg-case-motion { position: fixed; inset: 0; z-index: 4000; pointer-events: none; transition: transform .46s cubic-bezier(.22,.65,.3,1); }
.gg-case-motion.approaching { transform: scale(1.14); }
@media (max-width: 600px) { .gg-case-motion.approaching { transform: scale(1.06); } }
.gg-fly { position: fixed; z-index: 4000; perspective: 1100px; pointer-events: none; transition: opacity .24s ease; container-type: inline-size; }
.gg-fly .tray, .gg-fly .cov .inner { background: linear-gradient(135deg, var(--gg-surface-hover), var(--gg-bg-deep) 65%); border: 1px solid var(--gg-border-strong); box-sizing: border-box; box-shadow: inset 0 0 0 2px var(--gg-bg-deep), inset 0 0 0 3px var(--gg-border-strong), inset 0 0 14px rgba(0,0,0,.6), 0 16px 28px -12px rgba(0,0,0,.8); }
/* Keep tray hardware inside its own layer, below both faces of the lid. */
.gg-fly .tray { position: absolute; inset: 0; z-index: 0; border-radius: 3px 7px 7px 3px; overflow: hidden; }
.gg-fly .tray::before { content: ""; position: absolute; inset: 3% auto 3% 2%; width: 5%; border-inline: 1px solid var(--gg-border-strong); background: repeating-linear-gradient(180deg, transparent 0 8%, rgba(255,255,255,.09) 8% 8.5%, transparent 8.5% 16%); }
.gg-fly .tray::after { content: ""; position: absolute; inset: 4% 5% 4% 9%; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; pointer-events: none; }
.gg-fly .tray .bk { position: absolute; inset: 9% 10% 9% 13%; display: flex; flex-direction: column; background: var(--gg-tag); border-radius: 1px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.gg-fly .tray .bk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12) 2%, transparent 5%); pointer-events: none; }
.gg-fly .tray .bk img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: center top; display: block; }
.gg-fly .tray .bk .bkb { flex: none; height: 8%; min-height: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0 6%; background: var(--gg-band, var(--gg-surface)); color: var(--gg-text); font: 800 max(6px, 3.6cqw)/1 var(--gg-font-case); letter-spacing: .15em; }
.gg-fly .bk-name, .gg-fly .bk > .gg-noart { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8%; text-align: center; color: var(--gg-tag-ink); font: 800 8cqw/1.1 var(--gg-font-case); overflow-wrap: anywhere; }
.gg-fly .tray .clip { position: absolute; z-index: 1; left: 8%; width: 10%; height: 3%; background: linear-gradient(var(--gg-border-strong), var(--gg-bg-deep)); border: 1px solid var(--gg-border-strong); border-radius: 1px 3px 3px 1px; box-shadow: 1px 2px 2px rgba(0,0,0,.6); }
.gg-fly .clip-top { top: 17%; } .gg-fly .clip-bottom { bottom: 17%; }
.gg-fly .case-latch { position: absolute; right: 1%; top: 44%; height: 12%; width: 3%; border: 1px solid var(--gg-border-strong); border-radius: 2px; background: var(--gg-bg-deep); }
.gg-fly .cov { position: absolute; inset: 0; z-index: 1; transform-origin: left center; transform-style: preserve-3d; will-change: transform; transition: transform .46s cubic-bezier(.22,.65,.3,1); }
.gg-fly .cov > .gg-case { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: none !important; }
.gg-fly .cov .inner { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7px 3px 3px 7px; }
.gg-fly .inner::before { content: ""; position: absolute; inset: 4% 7%; border: 1px solid var(--gg-border-strong); border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.gg-fly .case-mark { position: absolute; bottom: 7%; left: 0; right: 0; text-align: center; color: var(--gg-text-3); opacity: .55; font: 800 3cqw/1 var(--gg-font-case); letter-spacing: .2em; }
.gg-fly.open .cov { transform: rotateY(-172deg); }
@keyframes gg-case-close { from { transform: rotateY(-172deg); } to { transform: rotateY(0deg); } }
.gg-fly.away { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gg-fly, .gg-case-motion { display: none; } }

/* ── Scores in main's format: number + 3px bar, gold for a 10 ──
   Dark surfaces use the exact values; paper uses the same hues a step deeper. */
.gg-pscore { min-inline-size: 4ch; display: inline-grid; justify-items: center; gap: 5px; font: 800 22px/1 var(--gg-font-case); font-variant-numeric: lining-nums tabular-nums; }
.gg-pscore.sm { font-size: 17px; }
.gg-pscore b { font: inherit; color: var(--c); }
.gg-pscore .pb { display: block; width: 4ch; height: 3px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.gg-pscore.sm .pb { width: 4ch; }
.gg-pscore .pb i { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.gg-pscore.na b { color: #6b7280; }
.gg-pscore.p10 b, .gg-pnum.p10 { color: transparent !important; background: var(--gg-gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gg-pscore.p10 .pb i, .gg-pfill.p10 { background: linear-gradient(90deg, #d4b44c 0%, #fbf2d4 50%, #d4b44c 100%) !important; }
.gg-pnum { color: var(--c); font-variant-numeric: lining-nums tabular-nums; }
.gg-pfill { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.gg-paper .gg-pscore b, .gg-paper .gg-pnum { color: var(--cp); }
.gg-paper .gg-pscore .pb { background: rgba(23,20,15,.14); }
.gg-paper .gg-pscore .pb i, .gg-paper .gg-pfill { background: var(--cp); }
.gg-paper .gg-pscore.na b { color: #9a9284; }
.gg-paper .gg-pscore.p10 b, .gg-paper .gg-pnum.p10 { background: var(--gg-gold-burnished); -webkit-background-clip: text; background-clip: text; }
.gg-paper .gg-pscore.p10 .pb i, .gg-paper .gg-pfill.p10 { background: linear-gradient(90deg, #a07a24 0%, #e9cf7d 50%, #a07a24 100%) !important; }

/* ── Paper inside the website (editorial side) ── */
.gg-paper { background: var(--gg-paper); color: var(--gg-ink); border-radius: 6px; position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 20px 40px -18px rgba(0,0,0,.7); font-optical-sizing: auto; }
.gg-paper::before { content: ""; position: absolute; inset: 0; background: var(--gg-grain); opacity: .85; mix-blend-mode: multiply; pointer-events: none; border-radius: inherit; }
.gg-paper > * { position: relative; }
.gg-kick { font: 700 11px/1.2 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; color: var(--gg-press-accent); }
.gg-dateline { font: 500 12px/1.35 var(--gg-font-case); color: var(--gg-ink-2); display: flex; gap: 4px 12px; flex-wrap: wrap; }
.gg-dateline b { color: var(--gg-ink); font-weight: 700; }
.gg-headline { font: 700 clamp(22px, 2.6vw, 30px)/1.08 var(--gg-font-serif); letter-spacing: -.012em; color: var(--gg-ink); margin: 6px 0 0; text-wrap: balance; }
.gg-headline a { color: inherit; text-decoration: none; }
.gg-headline a:hover { color: var(--gg-press-accent); }
.gg-prose { font: 400 16.5px/1.55 var(--gg-font-serif); color: var(--gg-ink); }
.gg-prose.dropcap > p:first-child::first-letter, .gg-prose.dropcap:not(:has(p))::first-letter { float: left; font: 700 2.7em/0.82 var(--gg-font-serif); padding: .1em .12em 0 0; color: var(--gg-accent); }
.gg-photo { position: relative; display: block; width: 100%; aspect-ratio: 460 / 215; max-width: 100%; overflow: hidden; border-radius: 3px; background: var(--gg-paper-2); }
.gg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(23,20,15,.25); pointer-events: none; }
.gg-cap { display: block; font: 500 11.5px/1.3 var(--gg-font-case); color: var(--gg-ink-2); letter-spacing: .02em; margin-top: 6px; }

/* ── Games grid (/): a wall of cases, art first ── */
.grid.gg-grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)) !important; gap: 36px 24px !important; padding-top: 8px; }
.grid.gg-grid > .card.gg-item { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0 !important; overflow: visible !important; padding: 0 !important; transform: none !important; display: grid !important; gap: 10px; }
.grid.gg-grid > .card.gg-item::before { content: "" !important; position: absolute !important; left: 8% !important; right: 8% !important; top: 3% !important; bottom: auto !important; height: auto !important; aspect-ratio: 135 / 190; background: radial-gradient(closest-side, rgba(113,90,184,.35), transparent) !important; filter: none; opacity: .5 !important; z-index: 0; pointer-events: none; border: 0 !important; }
.grid.gg-grid > .card.gg-item:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }
/* Release paint containment while a case lifts or receives keyboard focus. */
.grid.gg-grid > .card.gg-item:is(:hover, :focus-within) { content-visibility: visible; }
/* A compositor-only lift keeps desktop browsing responsive without repainting
   the cover's glare as the cursor moves. Case-opening motion is unchanged. */
.gg-grid .gg-case { transition: transform .16s ease; }
@media (min-width: 769px) {
  /* A desktop case card is much taller than the legacy 300px placeholder.
     Use the first rendered card's height for unseen rows, avoiding large
     document-height corrections as each row enters the viewport. */
  .grid.gg-grid > .card { contain-intrinsic-block-size: auto var(--gg-grid-card-height, 700px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gg-grid .gg-case-link:hover .gg-case { transform: translateY(-3px); }
}
.gg-grid .gg-item .gg-chips { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible !important; white-space: normal !important; margin: 2px 0 0; padding: 0 !important; max-width: none !important; }
.gg-grid .gg-item .gg-chips .game-tags { position: static !important; flex: 0 1 auto; max-width: 100% !important; width: auto !important; }
@media (max-width: 768px) {
  .gg-grid .gg-item .community-attr .k { font-size: 8.5px !important; letter-spacing: 0 !important; }
  .grid.gg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 14px !important; padding: 12px 14px !important; }
}

/* ── The game guide (/game/<id>): the booklet that was inside the case ──
   Gloss stock, four panels that fold out from the left. Unfolds only when the
   page was reached by opening a case (remake.js adds .gg-unfold). */
.gg-guide { --gg-band: #1d1b22; max-width: 1240px; margin: 8px auto 28px; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; background: var(--gg-gloss); color: var(--gg-gloss-ink); border-radius: 4px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4); position: relative; perspective: 2200px; font-family: var(--gg-font-case); }
.gg-guide::before { content: ""; position: absolute; inset: 0; background: var(--gg-grain); opacity: .4; mix-blend-mode: multiply; pointer-events: none; border-radius: inherit; z-index: 0; }
.gg-gpanel { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; padding: 24px 22px 0; transform-origin: left center; }
.gg-gpanel + .gg-gpanel { box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.26); }
.gg-gpanel + .gg-gpanel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.12); }
.gg-guide.gg-unfold .gg-gpanel { animation: gg-unfold .24s cubic-bezier(.2,.8,.25,1) both; }
.gg-guide.gg-unfold .gg-gpanel:nth-child(2) { animation-delay: .03s; }
.gg-guide.gg-unfold .gg-gpanel:nth-child(3) { animation-delay: .06s; }
.gg-guide.gg-unfold .gg-gpanel:nth-child(4) { animation-delay: .09s; }
@keyframes gg-unfold { from { transform: rotateY(-92deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes gg-unfold-v { from { transform: rotateX(80deg); opacity: .2; } to { transform: none; opacity: 1; } }
.gg-guide.gg-closing .gg-gpanel { animation: gg-refold .25s cubic-bezier(.4,0,.2,1) both; }
@keyframes gg-refold { from { transform: none; opacity: 1; } to { transform: rotateY(-80deg); opacity: .25; } }
@keyframes gg-refold-v { from { transform: none; opacity: 1; } to { transform: rotateX(70deg); opacity: .25; } }

.gg-gp1 { padding: 0; overflow: hidden; border-radius: 4px 0 0 4px; }
.gg-gband { height: 30px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; background: var(--gg-band); color: #fff; font: 800 9.5px/1 var(--gg-font-case); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; }
.gg-gcover { position: relative; aspect-ratio: 2 / 2.5; overflow: hidden; background: #000; container-type: inline-size; }
.gg-gcover > img, .gg-gcover > .gg-noart { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gg-gcover > .gg-noart { display: grid; place-items: center; background: linear-gradient(160deg, #24212b, #121015); color: #7d7888; font: 800 22px/1.2 var(--gg-font-case); text-align: center; padding: 24px; }
.gg-gcover .gg-rbox { left: 16px; bottom: 14px; font-size: 0; }
.gg-gcover .gg-rbox .gg-wordmark { font-size: max(11px, 3.4cqw); letter-spacing: 0; }
html body .gg-gcover .gg-wordmark :is(.gg-wm-game, .gg-wm-grades) { color: var(--gg-tag-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .gg-gcover .gg-wordmark .gg-wm-grades { background: var(--gg-wordmark-ink), var(--gg-tag-ink); -webkit-background-clip: text; background-clip: text; }
}
.gg-gp1-text { padding: 16px 22px 0; display: grid; gap: 6px; }
.gg-glabel { font: 800 10px/1 var(--gg-font-case); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--gg-gloss-ink-2); }
.gg-gtitle { margin: 0; font: 900 clamp(24px, 2.4vw, 32px)/.98 var(--gg-font-case); font-stretch: 105%; letter-spacing: -.025em; color: var(--gg-gloss-ink); text-wrap: balance; overflow-wrap: anywhere; }
.gg-gsub { color: var(--gg-gloss-ink-2); font-size: 12.5px; font-weight: 600; }
.gg-gp1 .gg-pfoot { padding-inline: 22px; }

.gg-ptitle { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font: 900 11px/1 var(--gg-font-case); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--gg-gloss-ink); }
.gg-ptitle::after { content: ""; flex: 1; height: 2px; background: var(--gg-band); }
.gg-pfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; font: 700 9.5px/1 var(--gg-font-case); color: var(--gg-gloss-ink-2); letter-spacing: .1em; text-transform: uppercase; }
.gg-pfoot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-pfoot .pg { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gg-gloss-ink); color: var(--gg-gloss); letter-spacing: 0; }

.gg-gshot { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; display: block; border-radius: 2px; margin-bottom: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.gg-gtext { font: 400 15px/1.5 var(--gg-font-serif); margin: 0 0 12px; color: var(--gg-gloss-ink); display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.gg-facts { margin: 0; display: grid; font-size: 12.5px; }
.gg-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gg-gloss-rule); align-items: baseline; }
.gg-facts dt { font: 700 9.5px/1.4 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; color: var(--gg-gloss-ink-2); }
.gg-facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.gg-facts s, .gg-quiet { color: var(--gg-gloss-ink-2); font-weight: 500; }
.gg-sale { color: #b4232a; font-weight: 800; }
.gg-gtags { display: flex; flex-wrap: wrap; gap: 4px; }
.gg-gtags a { color: var(--gg-gloss-ink); text-decoration: none; border: 1px solid var(--gg-gloss-rule); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; background: var(--gg-paper-raised); }
.gg-gtags a:hover { border-color: var(--gg-accent); color: var(--gg-press-accent); }
/* platform_row draws white marks for the dark site; on gloss they print in ink. */
.gg-gpf .pf-row { gap: 8px; }
.gg-gpf .pf-row-item { color: var(--gg-gloss-ink-2); opacity: 1; font-size: 16px; }
.gg-gpf .pf-row-item.is-played { color: var(--gg-gloss-ink); outline: 2px solid var(--gg-gloss-ink); outline-offset: 3px; border-radius: 2px; }

.gg-specs { display: grid; gap: 4px; }
.gg-spec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gg-gloss-rule); }
.gg-spec .k { font: 700 12px/1 var(--gg-font-case); letter-spacing: .04em; }
.gg-spec.lead .k { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.gg-spec .gg-pscore { justify-items: end; }
.gg-spec.lead .gg-pscore { font-size: 34px; }
.gg-spec.lead .gg-pscore .pb { width: 4ch; }
.gg-guide .gg-pscore b { color: var(--cp); }
.gg-guide .gg-pscore .pb { background: rgba(0,0,0,.12); }
.gg-guide .gg-pscore .pb i { background: var(--cp); }
.gg-guide .gg-pscore.na b { color: #a9a5ae; }
.gg-guide .gg-pscore.p10 b { background: var(--gg-gold-burnished); -webkit-background-clip: text; background-clip: text; }
.gg-guide .gg-pscore.p10 .pb i { background: linear-gradient(90deg, #a07a24 0%, #e9cf7d 50%, #a07a24 100%) !important; }
.gg-gnote { font: 500 11px/1.4 var(--gg-font-case); color: var(--gg-gloss-ink-2); margin: 10px 0 0; }
.gg-gattrs .community-attrs { margin: 10px 0 0; background: none; border: 0; padding: 0; }
.gg-gattrs .community-attr .k { color: var(--gg-gloss-ink-2); }
.gg-gattrs .community-attr .v, .gg-gattrs .community-attr .scale-word { color: var(--gg-gloss-ink); }
.gg-gattrs .community-attr .v.is-empty { color: #a9a5ae; }
/* Keep numeric grades and community details on a shared right edge. */
html body .gg-guide .gg-spec { grid-template-columns: minmax(0, 1fr) 80px; }
html body .gg-guide .gg-spec .gg-pscore { width: 100%; justify-items: end; }
html body .gg-guide .gg-spec .gg-pscore .pb { width: 4ch; }
html body .gg-guide .gg-gattrs .community-attrs { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0; }
html body .gg-guide .gg-gattrs .community-attr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; text-align: left; min-height: 32px; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gg-gloss-rule); }
html body .gg-guide .gg-gattrs .community-attr > :last-child { justify-self: end; text-align: right; }
html body .gg-guide .gg-gattrs .community-attr .k { font-size: 12px; line-height: 1.4; }
html body .gg-guide .gg-gattrs .community-attr .attr-scale { justify-content: flex-end; }
.gg-clipping { display: block; margin-top: 12px; padding: 10px 12px; background: var(--gg-paper); color: var(--gg-ink); text-decoration: none; box-shadow: 0 3px 8px rgba(0,0,0,.18); transform: rotate(-1.2deg); clip-path: polygon(0 3%, 6% 0, 14% 2%, 26% 0, 40% 3%, 55% 0, 70% 2%, 84% 0, 100% 2%, 99% 96%, 90% 100%, 75% 97%, 58% 100%, 42% 97%, 26% 100%, 10% 97%, 1% 100%); transition: transform .2s ease; }
.gg-clipping + .gg-clipping { transform: rotate(1deg); margin-top: 8px; }
.gg-clipping:hover, .gg-clipping:focus-visible { transform: rotate(0) translateY(-2px); }
.gg-clipping .k2 { font: 700 9px/1 var(--gg-font-case); color: var(--gg-press-accent); letter-spacing: .1em; text-transform: uppercase; }
.gg-clipping .hd { display: block; margin-top: 5px; font: 600 15px/1.25 var(--gg-font-serif); color: var(--gg-ink); }
.gg-clipping .by { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 600 11px/1.2 var(--gg-font-case); color: var(--gg-ink-2); }
.gg-clipping .gg-pscore { grid-auto-flow: column; align-items: center; gap: 6px; }
.gg-gmore { display: inline-block; margin-top: 12px; font: 700 11px/1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; color: var(--gg-press-accent); text-decoration: none; }
.gg-gmore:hover { text-decoration: underline; }

.gg-save { background: #101015; color: #d6f5e3; border-radius: 6px; padding: 12px; font: 600 11.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: inset 0 0 0 1px #1f2a24, inset 0 0 30px rgba(79,201,138,.07); position: relative; overflow: hidden; }
.gg-save::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.gg-save .hd { display: flex; justify-content: space-between; gap: 8px; color: #7fdcae; text-transform: uppercase; border-bottom: 1px dashed #2c4a3a; padding-bottom: 6px; margin-bottom: 6px; }
.gg-save .hd span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-save .ln { display: flex; justify-content: space-between; gap: 10px; }
.gg-save .ln span:first-child { color: #79937f; text-transform: uppercase; }
.gg-save .ln span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.gg-save .empty { color: #79937f; text-align: center; padding: 18px 0; text-transform: uppercase; }
.gg-save .blink { animation: gg-blink 1.1s steps(2) infinite; }
@keyframes gg-blink { 50% { opacity: 0; } }
.gg-stamps { display: grid; gap: 8px; margin-top: 12px; }
.gg-stamps .stp { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 9.5px/1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; color: var(--gg-gloss-ink-2); }
.gg-stamps em { font: 700 11.5px/1 var(--gg-font-case); font-style: normal; letter-spacing: .04em; border: 1.5px solid currentColor; padding: 3px 6px; border-radius: 2px; }
.gg-stamps em.u { color: #4b3a90; transform: rotate(-1.5deg); }
.gg-stamps em.s { color: #a8261b; transform: rotate(1deg); }
.gg-stamps em.none { color: #a9a5ae; border-style: dashed; }
.gg-gactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0 !important; border: 0 !important; }
.gg-gactions .btn { height: 36px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; font: 700 12.5px/1 var(--gg-font-case); background: var(--gg-paper-raised); color: var(--gg-gloss-ink); border: 1px solid var(--gg-gloss-rule); box-shadow: none; text-decoration: none; cursor: pointer; }
.gg-gactions .btn:hover { border-color: var(--gg-gloss-ink-2); }
.gg-gactions .btn.primary { background: var(--gg-gradient); color: #fff; border-color: transparent; }
.gg-gactions .btn img { filter: none; }
.gg-glinks { margin-top: 8px; }
.gg-glinks .btn { height: 30px; font-size: 11.5px; padding: 0 11px; border-radius: 8px; background: transparent; }

@media (max-width: 1060px) {
  .gg-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-gpanel:nth-child(3) { box-shadow: inset 0 14px 18px -14px rgba(0,0,0,.26); }
  .gg-gpanel:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .gg-guide { grid-template-columns: 1fr; margin: 4px 0 20px; }
  .gg-gpanel + .gg-gpanel { box-shadow: inset 0 14px 18px -14px rgba(0,0,0,.26); }
  .gg-gpanel + .gg-gpanel::before { display: none; }
  .gg-gpanel { transform-origin: top center; padding: 20px 18px 0; }
  .gg-guide.gg-unfold .gg-gpanel { animation-name: gg-unfold-v; }
  .gg-guide.gg-closing .gg-gpanel { animation-name: gg-refold-v; }
  .gg-gcover { aspect-ratio: 4 / 3.4; }
  .gg-gp1 { border-radius: 4px 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gg-guide.gg-unfold .gg-gpanel, .gg-guide.gg-closing .gg-gpanel, .gg-save .blink { animation: none; }
  .gg-clipping { transition: none; }
}

/* The press under the guide: the reviews, printed as the feed prints them. */
.gg-press-section { width: 100%; max-width: 900px; box-sizing: border-box; margin: 0 auto 40px; padding: 0 var(--gg-gutter, 16px); }
/* A masthead set in the room, not on paper: the clippings below are the
   paper. Same masthead face as the review article's (Bodoni italic is kept
   to the wordmark and mastheads). */
.gg-press-head { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 8px 0 0; margin-bottom: 20px; }
.gg-press-ear { font: 700 11px/1.3 var(--gg-font-case); letter-spacing: .2em; text-transform: uppercase; color: var(--gg-room-tx-3, #9aa0a6); }
.gg-press-head h2 { margin: 0; font: italic 400 clamp(36px, 5vw, 56px)/1 var(--gg-font-display, var(--gg-font-serif)); color: var(--gg-text); text-transform: none; letter-spacing: -.01em; }
.gg-press-dateline { justify-self: stretch; display: flex; justify-content: space-between; gap: 16px; padding: 7px 2px; border-block: 1px solid var(--gg-room-line-2, #3a3740); box-shadow: 0 -4px 0 -3px var(--gg-room-line-2, #3a3740); font: 700 12px/1.2 var(--gg-font-case); letter-spacing: .12em; text-transform: uppercase; color: var(--gg-room-tx-2, #c4bfcc); }
.gg-press-list { display: grid; gap: 18px; }
.gg-press .gg-press-initial { display: flex; align-items: center; justify-content: center; font-weight: 700; }
.gg-press-empty { margin: 0; color: var(--gg-room-tx-3, #9aa0a6); font-size: 15px; }
/* Layout for the clippings on this page. /feed lays its items out in its own
   page CSS; the game page used to do the same for its dark cards, so the
   structure (not the colour, which .gg-press owns) is restated here. */
.gg-press-list .feed-item { width: 100%; box-sizing: border-box; margin: 0; }
.gg-press-list .feed-header { display: flex; align-items: flex-start; gap: 12px; }
.gg-press-list .feed-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.gg-press-list .feed-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.gg-press-list .feed-header-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gg-press-list .feed-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gg-press-list .feed-username { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.gg-press-list .feed-time { margin-left: auto; white-space: nowrap; }
.gg-press-list .feed-content, .gg-press-list .feed-details { display: flex; flex-direction: column; gap: 12px; }
.gg-press-list .feed-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gg-press-list .feed-scores .score { width: auto; height: auto; min-width: 0; text-align: center; border-radius: 0; box-shadow: none; transform: none; }
.gg-press-list .feed-attributes { display: flex; flex-wrap: wrap; row-gap: 8px; }
.gg-press-list .feed-attribute { display: grid; gap: 4px; text-align: left; }
.gg-press-list .feed-attribute .label { text-transform: uppercase; }
.gg-press-list .feed-review-text { word-break: break-word; }
.gg-press-list .feed-review-text.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.gg-press-list .feed-read-more { background: none; border: 0; padding: 0; margin-top: 4px; cursor: pointer; }
.gg-press-list .feed-read-more[hidden] { display: none !important; }
.gg-press-list .feed-video-label { margin: 14px 0 -6px; font: 700 12px/1.3 var(--gg-font-case); letter-spacing: .04em; text-transform: uppercase; color: var(--gg-ink-2); }
.gg-press-list .feed-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gg-press-list .view-link { margin-left: auto; text-decoration: none; }
.gg-press-list .vote-control { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid; border-radius: 12px; }
.gg-press-list .vote-btn { background: none; border: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
.gg-press-list .vote-btn:hover { background: var(--gg-paper-raised); }
.gg-press-list .vote-score { min-width: 18px; text-align: center; font: 700 14px/1 var(--gg-font-case); }
.gg-press-list .share-btn { padding: 0 14px; border-radius: 12px; font: 700 14px/1 var(--gg-font-case); cursor: pointer; }
@media (max-width: 640px) {
  .gg-press-list .feed-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .gg-press-list .feed-scores .score:nth-child(3) { border-left: 0; }
}

/* Paint the destination directly. Whole-page snapshots can flash the dark
   page ground between documents. Only the remaining guide panels unfold. */
@view-transition { navigation: none; }
.gg-guide.gg-unfold .gg-gp1 { animation: none; }

/* ── The press (feed items, /feed and the profile feed) ──
   Each review is a clipping of paper set into the dark site: serif headline,
   horizontal art as the photo, scores in the number-and-bar format printed in
   the deeper paper shades. Selectors carry .gg-press twice-over specificity so
   the pages' own .feed-item rules (dark card) do not win. */
.feed-item.gg-press, .profile-feed-container .feed-item.gg-press { background: var(--gg-paper); color: var(--gg-ink); border: 0; border-radius: 6px; padding: 18px 20px 14px; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 20px 40px -18px rgba(0,0,0,.7); }
.gg-press .feed-header { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px double var(--gg-ink); }
.gg-press .feed-avatar { background: var(--gg-paper-2); color: var(--gg-ink-2) !important; filter: grayscale(.15) contrast(1.05); box-shadow: 0 0 0 1px var(--gg-rule); }
.gg-press .feed-username { color: var(--gg-ink); font: 700 14px/1.2 var(--gg-font-case); }
.gg-press .feed-username:hover { color: var(--gg-press-accent); }
.gg-press .feed-rp { background: none; color: var(--gg-ink-2); padding: 0; font: 700 11px/1 var(--gg-font-case); letter-spacing: .04em; }
.gg-press .feed-title-row { color: var(--gg-press-accent); font: italic 600 12.5px/1.2 var(--gg-font-serif); }
.gg-press .feed-time { color: var(--gg-ink-2); font: 600 11px/1.3 var(--gg-font-case); letter-spacing: .06em; text-transform: uppercase; }
.gg-press .feed-content { gap: 10px; }
.gg-press .gg-kick { display: block; margin-bottom: -6px; }
.gg-press .feed-game-title { margin: 0 0 4px; padding: 0; border: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.08 var(--gg-font-serif); letter-spacing: -.012em; color: var(--gg-ink); text-wrap: balance; }
.gg-press .feed-game-link:hover { color: var(--gg-press-accent) !important; }
.gg-press .feed-content-row { gap: 18px; align-items: flex-start; }
.gg-press .feed-cover { width: 260px; flex: 0 0 260px; }
.gg-press .feed-cover .gg-photo img, .gg-press .feed-cover img { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.gg-press .feed-cover .cover-placeholder { width: 100%; height: auto; aspect-ratio: 460 / 215; background: var(--gg-paper-2); color: var(--gg-ink-2); border-radius: 3px; }
.gg-press .feed-scores { margin: 0 0 12px; gap: 0; border-top: 1px solid var(--gg-ink); border-bottom: 1px solid var(--gg-rule); padding: 8px 0; }
.gg-press .feed-scores .score { display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; }
.gg-press .feed-scores .score + .score { border-left: 1px solid var(--gg-rule); }
.gg-press .feed-scores .score .label { color: var(--gg-ink-2); font: 700 10px/1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.gg-press .feed-scores .score .label.overall-label { color: var(--gg-ink); }
.gg-press .feed-scores .score:first-child .gg-pscore { font-size: 26px; }
.gg-press .feed-attributes { gap: 0; margin-bottom: 10px; }
.gg-press .feed-attribute { background: none; border: 0; border-radius: 0; padding: 2px 10px 2px 0; }
.gg-press .feed-attribute + .feed-attribute { border-left: 1px solid var(--gg-rule); padding-left: 10px; }
.gg-press .feed-attribute .label { color: var(--gg-ink-2); font: 700 9.5px/1 var(--gg-font-case); letter-spacing: .1em; }
.gg-press .feed-attribute .value, .gg-press .feed-attribute .attr-word, .gg-press .feed-attribute .scale-word { color: var(--gg-ink); font-family: var(--gg-font-case); }
.gg-press .feed-attribute .attr-scale i { color: var(--gg-ink-2); }
.gg-press .feed-body { color: var(--gg-ink); font: 400 16px/1.55 var(--gg-font-serif); }
.gg-press .feed-review-text a { color: var(--gg-press-accent); }
.gg-press .feed-review-text code { background: var(--gg-paper-2); color: var(--gg-ink); }
.gg-press .feed-read-more { color: var(--gg-press-accent); font: 700 11px/1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; }
.gg-press .feed-actions { border-top: 1px solid var(--gg-rule); padding-top: 10px; margin-top: 4px; }
.gg-press .vote-control { background: var(--gg-paper-2); border-color: var(--gg-rule); color: var(--gg-ink); }
.gg-press .vote-btn { color: var(--gg-ink-2); }
.gg-press .vote-score { color: var(--gg-ink); }
.gg-press .vote-control.is-upvoted .vote-btn.vote-up, .gg-press .vote-control.is-upvoted .vote-score { color: var(--gg-press-accent); }
.gg-press .share-btn { background: transparent; border: 1px solid var(--gg-rule); color: var(--gg-ink); }
.gg-press .share-btn:hover { border-color: var(--gg-ink-2); }
.gg-press .view-link { color: var(--gg-press-accent); font: 700 11px/1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 768px) {
  .feed-item.gg-press, .profile-feed-container .feed-item.gg-press { padding: 14px 14px 10px; }
  .gg-press .feed-cover { width: 100%; flex: 0 0 auto; }
  .gg-press .feed-scores .score .gg-pscore { font-size: 22px; }
}
/* Glyph scales and inline emphasis were tuned for the dark site: on paper and
   gloss they print in ink. */
.gg-paper .attr-scale i, .gg-guide .attr-scale i, .gg-paper .community-attr .attr-scale i, .gg-guide .community-attr .attr-scale i { background: rgba(23,20,15,.16); }
.gg-paper .attr-scale i.on, .gg-guide .attr-scale i.on { background: var(--gg-ink); }
.gg-paper .attr-scale.is-average i, .gg-guide .attr-scale.is-average i, .gg-guide .community-attr .attr-scale.is-average i { background: linear-gradient(90deg, var(--gg-ink) 0 var(--fill, 0%), rgba(23,20,15,.16) var(--fill, 0%) 100%); }
.gg-paper .attr-scale .scale-word, .gg-guide .attr-scale .scale-word { color: var(--gg-ink); }
.gg-paper .attr-scale:focus-visible, .gg-guide .attr-scale:focus-visible { box-shadow: 0 0 0 3px var(--gg-accent-soft); }
.gg-press .feed-review-text strong, .gg-press .feed-review-text b, .gg-press .feed-review-text em, .gg-press .feed-review-text h1, .gg-press .feed-review-text h2, .gg-press .feed-review-text h3 { color: inherit; }
.gg-press .feed-scores .score .label.overall-label { font-size: 10px !important; letter-spacing: .1em !important; }
.gg-press .feed-scores { align-items: start; }
/* The attributes sit on the scores' own four columns, centred under each one
   with the same dividers. They were a left-aligned flex row with its own gaps
   while feed.html pulled the scores 32px left, so no column ever lined up. */
.gg-press .feed-scores { margin-left: 0; gap: 0; }
.gg-press .feed-attributes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.gg-press .feed-attribute { justify-items: center; text-align: center; padding: 2px 6px; }
.gg-press .feed-attribute + .feed-attribute { border-left: 1px solid var(--gg-rule); padding-left: 6px; }
@media (max-width: 640px) {
  .gg-press .feed-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .gg-press .feed-attribute:nth-child(3) { border-left: 0; }
}

/* Keep navigation in the document flow so it cannot cover the article.
   The same exit remains available at the article foot. */
.user-review-page .gg-review-exit { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 6px 8px; border: 1px solid var(--gg-room-line-2); border-radius: 12px; background: var(--gg-room-2); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.gg-review-exit .gg-back, .gg-article .review-card-footer .gg-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; font: 700 13px/1 var(--gg-font-case); }
.gg-review-exit .gg-back { background: var(--gg-room); border: 1px solid var(--gg-room-line-2); color: var(--gg-text); }
.gg-review-exit .gg-review-game { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--gg-room-tx-2); font: 600 12px/1 var(--gg-font-case); }
.gg-article .review-card-footer { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gg-article .review-card-footer .gg-back { background: var(--gg-paper-2); border: 1px solid var(--gg-rule); color: var(--gg-ink); }
.gg-back:focus-visible, .gg-review-game:focus-visible { outline: 2px solid var(--gg-accent-light); outline-offset: 3px; }

/* ── The article (/review/<user>/<id>): one review, printed ── */
.review-card.gg-article { background: var(--gg-paper); color: var(--gg-ink); border: 0; border-radius: 6px; padding: 18px 26px 16px; overflow: visible; max-width: 100%; }
.gg-article .gg-mast { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 3px double var(--gg-ink); padding-bottom: 8px; margin-bottom: 14px; font: 600 11px/1.2 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; color: var(--gg-ink-2); }
.gg-article .gg-mast-name { font: italic 700 26px/1 var(--gg-font-display); letter-spacing: -.01em; text-transform: none; color: var(--gg-ink); }
.gg-article .gg-banner { aspect-ratio: 460 / 215; border-radius: 2px; }
.gg-article .gg-ahead { margin: 16px 0 18px; display: grid; gap: 4px; }
.gg-article .gg-ahl { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.02; }
.gg-article .gg-dateline { margin-top: 6px; align-items: center; }
.gg-article .gg-aplat { display: inline-flex; align-items: center; gap: 6px; }
.gg-article .gg-aplat .platform-badge, .gg-article .gg-aplat .pf-badge { background: var(--gg-paper-2); color: var(--gg-ink); border-color: var(--gg-rule); }
.gg-article .gg-acols { display: grid !important; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.gg-article .gg-abody { min-width: 0; }
.gg-article .gg-prose { font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.gg-article .gg-prose p { margin: 0 0 .9em; }
.gg-article .gg-prose a { color: var(--gg-press-accent); }
.gg-article .gg-prose blockquote { margin: 1em 0; padding: 0 0 0 16px; border-left: 3px solid var(--gg-accent); font-style: italic; color: var(--gg-ink-2); }
.gg-article .gg-prose code { background: var(--gg-paper-2); padding: 0 4px; border-radius: 3px; }
.gg-article .gg-anote { font: italic 400 17px/1.5 var(--gg-font-serif); color: var(--gg-ink-2); margin: 0; }
.gg-article .gg-avideo { margin-top: 18px; display: grid; gap: 8px; }
.gg-article .review-video-link { color: var(--gg-press-accent); font: 700 11px/1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; }
.gg-gradebox { border: 2px solid var(--gg-ink); padding: 12px 14px 14px; background: rgba(255,255,255,.28); position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.gg-gb-head { display: flex; justify-content: space-between; font: 800 10px/1 var(--gg-font-case); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--gg-ink); padding-bottom: 8px; }
.gg-gb-lead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--gg-rule); }
.gg-gb-lead .gg-pscore { font-size: 54px; justify-items: start; }
.gg-gb-lead .gg-pscore .pb { width: 4ch; height: 4px; }
.gg-gb-lead > span { font: 900 12px/1 var(--gg-font-case); letter-spacing: .16em; text-transform: uppercase; }
.gg-gb-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--gg-rule); }
.gg-gb-row > div { display: grid; justify-items: center; gap: 6px; padding: 10px 0; }
.gg-gb-row > div + div { border-left: 1px solid var(--gg-rule); }
.gg-gb-row .k { font: 700 9.5px/1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; color: var(--gg-ink-2); }
.gg-gb-comm { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gg-rule); font: 600 12px/1.2 var(--gg-font-case); color: var(--gg-ink-2); }
.gg-gb-comm b { font-weight: 800; color: var(--gg-ink); }
.gg-gb-comm b.is-above { color: #1f7a3a; } .gg-gb-comm b.is-below { color: #a8261b; }
.gg-gb-attrs { margin: 0; display: grid; }
.gg-gb-attrs > div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--gg-rule); align-items: center; }
.gg-gb-attrs dt { min-width: 0; overflow-wrap: anywhere; font: 700 9.5px/1.3 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; color: var(--gg-ink-2); }
.gg-gb-attrs dd { min-width: 0; overflow-wrap: anywhere; margin: 0; font: 600 13px/1.3 var(--gg-font-case); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gg-gb-attrs .attr-scale { flex: none; padding: 0; cursor: default; }
.gg-gb-attrs s { color: var(--gg-ink-2); font-weight: 500; }
.gg-gb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gg-article .gg-gb-actions .btn { height: 32px; padding: 0 11px; border-radius: 8px; display: inline-flex; align-items: center; background: transparent; color: var(--gg-ink); border: 1px solid var(--gg-rule); font: 700 12px/1 var(--gg-font-case); text-decoration: none; box-shadow: none; min-width: 0; flex: 0 0 auto; }
.gg-article .gg-gb-actions .btn.is-primary { background: var(--gg-gradient); color: #fff; border-color: transparent; }
.gg-article .review-card-footer { border-top: 1px solid var(--gg-rule); margin-top: 18px; padding-top: 12px; background: none; }
.gg-article .vote-control { background: var(--gg-paper-2); border-color: var(--gg-rule); color: var(--gg-ink); }
.gg-article .vote-btn { color: var(--gg-ink-2); }
.gg-article .vote-score { color: var(--gg-ink); }
.gg-article .vote-control.is-upvoted .vote-btn.vote-up, .gg-article .vote-control.is-upvoted .vote-score { color: var(--gg-press-accent); }
@media (max-width: 900px) {
  .gg-article .gg-acols { grid-template-columns: 1fr; gap: 18px; }
  .gg-article .gg-gradebox { order: -1; position: static; }
  .review-card.gg-article { padding: 14px 16px 12px; }
  .gg-article .gg-prose { font-size: 17px; }
  .gg-article .gg-mast-name { font-size: 21px; }
}

/* ── The library (/backlog): each row holds its case ── */
.full-list .covercol:has(.gg-rowcase) { width: 104px; }
.gg-rowcase { display: block; width: 84px; margin: 8px 0; perspective: 600px; }
.gg-rowcase .gg-case { box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 14px -6px rgba(0,0,0,.8); }
.gg-rowcase .gg-rbox, .gg-rowcase .gg-yr { display: none; }
.gg-rowcase .gg-band { height: 10%; padding: 0 4px 0 9px; }
.gg-rowcase .gg-case > img.gg-art, .gg-rowcase .gg-case > .gg-noart { top: 10%; height: 90%; }
.gg-rowcase .gg-band .pf-row-item, .gg-rowcase .gg-band .pf-icon { font-size: 8px; }
.gg-rowcase .gg-band .pf-row-more { display: none; }
.drag-proxy .gg-rowcase { visibility: hidden; }

/* ════════════════════════════════════════════════════════════════════
   The room: site chrome
   The header, the page ground and the page heads, as in the prototype.
   header.html's own block loads after this file and several pages paint
   html/body inline, so the selectors here carry repeated classes (and
   !important only where an inline style or an !important rule is in the
   way). Change the header here, not there.
   ════════════════════════════════════════════════════════════════════ */
html:root, html:root body { background-color: var(--gg-room) !important; }
html:root body { font-family: var(--gg-font-case); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
html:root body input, html:root body button, html:root body select, html:root body textarea { font-family: inherit; }

/* Content used to sit in a translucent black card over the chosen background
   art. The art now lights the top of the room and fades out, so the card
   (and its border) can go: content sits directly in the room.
   This is the one place the layer is laid out: several pages (Library, the
   list editors) never carried their own rule and drew it as a 0px static
   block, and the ones that did stacked a 72-89% black veil under the 20%
   opacity here, which left about 5% of the art visible. One dimming step
   (opacity + the fade mask), no veil. It sits at z-index -1 over a clear
   body (html still paints the room), so no page needs its own stacking
   rules to keep content above it. The layer is only as tall as the lit
   band and the art is centred in it: a Steam library_hero keeps its
   subject in the middle, and anchoring the top showed the sky and faded
   the subject out under the mask. The game page keeps its own brighter
   treatment (game_detail.html). */
html:root body.has-games-background { background-color: transparent !important; }
/* Plain art under one tint, never a filter or a mask. This layer is fixed and
   viewport-sized, and a filtered/masked one is re-filtered and re-masked on
   every scroll frame (it dropped 25-45% of frames at 1440px on the game and
   review pages). The tint bakes in what the old .5 opacity, mask (1 -> 45% .6
   -> 100% 0) and veil (.45 -> 30% .15 -> 60% 0) did over the room colour:
   alpha = 1 - .5 * mask * (1 - veil). games.css and game_detail.html bake
   their own the same way. */
html body .games-background { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; height: 88vh !important; min-height: 0 !important; z-index: -1 !important; pointer-events: none; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 1 !important; filter: none !important; transform: none !important; -webkit-mask-image: none; mask-image: none; }
html body:not(.game-detail-page) .games-background::after { content: "" !important; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,16,.725) 0%, rgba(13,12,16,.70) 15%, rgba(13,12,16,.69) 30%, rgba(13,12,16,.72) 45%, rgba(13,12,16,.78) 60%, rgba(13,12,16,.89) 80%, rgb(13,12,16) 100%) !important; }
/* Library keeps its own opacity and mask (library.css: absolute, so it
   scrolls away with the page head and costs nothing once off screen), so it
   keeps the veil those were tuned against. */
html body.lib-page .games-background::after { background: linear-gradient(180deg, rgba(13,12,16,.45) 0, rgba(13,12,16,.15) 30%, rgba(13,12,16,0) 60%) !important; }
/* Pages that fade the art in once it has resolved (data-bg-primary). */
html body .games-background[data-bg-primary]:not(.is-ready) { opacity: 0 !important; }
html body.game-detail-page .games-background { height: 100vh !important; background-position: center top !important; }
html body.has-content-card main::before { background: none !important; border: 0 !important; }

/* ── The bar ── */
html body .site-header.site-header.site-header { height: 62px; box-sizing: border-box; padding: 0 24px !important; gap: 14px; background: rgba(13,12,16,.94) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--gg-room-line) !important; flex-wrap: nowrap !important; }
html body .site-header.site-header .brand-nav-wrap { gap: 18px !important; min-width: 0; flex-wrap: nowrap !important; }
html body .site-header.site-header .brand-nav-wrap > a { flex: none; }
html body .site-header.site-header nav.main-nav { gap: 2px; flex-wrap: nowrap; }
html body .site-header.site-header .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 8px; color: var(--gg-room-tx-2); font: 600 13px/1 var(--gg-font-case); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
html body .site-header.site-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
html body .site-header.site-header .nav-link.active { background: rgba(113,90,184,.2); color: var(--gg-accent-light); text-decoration: none; }
html body .site-header.site-header .nav-link > span { top: -4px !important; right: -4px !important; }

/* Search: one field with its glass, Enter submits. The submit button stays in
   the form for keyboards and screen readers, visually hidden. */
html body .site-header.site-header .header-search { margin-left: auto; position: relative; display: flex; align-items: center; height: 38px; width: min(260px, 24vw); padding: 0 12px; gap: 8px; box-sizing: border-box; border-radius: 12px; background: var(--gg-room-2); border: 1px solid var(--gg-room-line-2); color: var(--gg-room-tx-3); }
html body .site-header.site-header .header-search:focus-within { border-color: var(--gg-accent); box-shadow: 0 0 0 3px var(--gg-accent-soft); }
html body .site-header.site-header .header-search .gg-search-ico { width: 15px; height: 15px; flex: none; }
html body .site-header.site-header .header-search input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; color: var(--gg-text); font: 500 13px var(--gg-font-case); }
html body .site-header.site-header .header-search .gg-search-go { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

html body .site-header.site-header .user-menu { gap: 8px !important; flex: none; }
html body .site-header.site-header .header-btn { height: 38px; border-radius: 12px; background: var(--gg-room-2); border: 1px solid var(--gg-room-line-2); color: var(--gg-text); font: 600 12.5px/1 var(--gg-font-case); display: inline-flex; align-items: center; padding: 0 14px; }
html body .site-header.site-header .header-btn:hover { background: var(--gg-room-3); border-color: #4a4552; }
html body .site-header.site-header .header-btn.primary { background: var(--gg-gradient); border-color: transparent; color: #fff; }
html body .site-header.site-header .notification-bell { width: 38px; height: 38px; padding: 0; justify-content: center; color: var(--gg-room-tx-2); }
html body .site-header.site-header .notification-badge { background: #a8261b; color: #fff; top: -4px; right: -4px; min-width: 17px; height: 17px; font: 700 10px/17px var(--gg-font-case); }

/* The account pill */
html body .site-header.site-header .gg-me { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 3px; border-radius: 999px; background: var(--gg-room-2); border: 1px solid var(--gg-room-line-2); color: var(--gg-text); text-decoration: none; font: 600 12.5px/1 var(--gg-font-case); }
html body .site-header.site-header .gg-me:hover, html body.avatar-menu-open .site-header.site-header .gg-me { background: var(--gg-room-3); border-color: #4a4552; }
html body .site-header.site-header .gg-me .avatar-small { width: 30px !important; height: 30px !important; min-width: 30px; border: 0 !important; background: var(--gg-accent) !important; color: #fff !important; font-weight: 800; font-size: 13px; display: inline-flex !important; align-items: center; justify-content: center; }
html body .site-header.site-header .gg-me-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .site-header.site-header .gg-me-caret { width: 13px; height: 13px; color: var(--gg-room-tx-3); transition: transform .18s ease; }
html body.avatar-menu-open .site-header.site-header .gg-me-caret { transform: rotate(180deg); }

/* The menu it opens: a popover under the pill, at every width. */
html body .site-header.site-header .avatar-menu { position: absolute; top: calc(100% + 10px); right: 0; left: auto; width: 214px; padding: 6px; z-index: 3600; background: #17151c; border: 1px solid var(--gg-room-line-2); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
html body.avatar-menu-open .site-header.site-header .avatar-menu { display: block; }
html body .site-header.site-header .avatar-menu a, html body .site-header.site-header .avatar-menu button { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--gg-text); font: 600 13px/1.2 var(--gg-font-case); text-align: left; text-decoration: none; cursor: pointer; }
html body .site-header.site-header .avatar-menu a:hover, html body .site-header.site-header .avatar-menu button:hover, html body .site-header.site-header .avatar-menu a:focus-visible, html body .site-header.site-header .avatar-menu button:focus-visible { background: var(--gg-room-3); }
html body .site-header.site-header .avatar-menu svg { width: 17px; height: 17px; flex: none; color: var(--gg-room-tx-3); }
html body .site-header.site-header .avatar-menu a[href="/logout"] { border-top: 1px solid var(--gg-room-line); border-radius: 0 0 8px 8px; margin-top: 4px; }

@media (max-width: 1100px) {
  html body .site-header.site-header .header-search { width: 200px; }
  html body .site-header.site-header .gg-me-name { display: none; }
  html body .site-header.site-header .gg-me { padding-right: 8px; }
}
@media (max-width: 900px) and (min-width: 641px) {
  html body .site-header.site-header .nav-link { padding: 8px 8px; }
  html body .site-header.site-header .header-search { width: 38px; padding: 0; justify-content: center; }
  html body .site-header.site-header .header-search input { position: absolute; opacity: 0; width: 1px; }
  html body .site-header.site-header .header-search:focus-within { width: 220px; padding: 0 12px; justify-content: flex-start; }
  html body .site-header.site-header .header-search:focus-within input { position: static; opacity: 1; width: auto; }
}
@media (max-width: 640px) {
  html body .site-header.site-header.site-header { height: auto; min-height: 58px; padding: 10px 14px !important; }
  html body .site-header.site-header .gg-me { padding: 0; border: 0; background: none; height: auto; }
  html body .site-header.site-header .gg-me .avatar-small { width: 38px !important; height: 38px !important; }
  html body .site-header.site-header .gg-me-caret { display: none; }
  html body .site-header.site-header .avatar-menu { position: fixed; top: calc(var(--header-h, 58px) + 8px); right: 12px; }
  html body .site-header.site-header .mobile-search-toggle, html body .site-header.site-header .notification-bell { background: var(--gg-room-2) !important; border-color: var(--gg-room-line-2) !important; }
  html body.mobile-search-open .site-header.site-header .header-search { width: auto; }
}

/* The tab bar on phones, in the room's colours. */
html body .mobile-tabbar { background: rgba(13,12,16,.96) !important; border-top-color: var(--gg-room-line) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body .mobile-tabbar a.active { color: var(--gg-accent-light) !important; }

/* ── Page heads ──
   Eyebrow, a big stretched title, a line of description, left-aligned in
   the content column. Pages render .gg-phead (gg_phead in case.html); the
   older centred .page-header bands are restyled to the same shape. */
.gg-phead { width: 100%; max-width: none; margin: 0; padding: 26px 20px 16px; box-sizing: border-box; text-align: left; }
.gg-phead .gg-ey { display: block; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-room-tx-3); }
.gg-phead h1 { margin: 8px 0 0; font: 900 clamp(32px, 4.4vw, 50px)/.95 var(--gg-font-case); font-stretch: 112%; letter-spacing: -.03em; color: #fff; }
.gg-phead p { margin: 8px 0 0; color: var(--gg-room-tx-2); max-width: 62ch; font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .gg-phead { padding: 18px 0 12px; } .gg-phead p { font-size: 13px; } }
html body .page-header.page-header { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* The list control bar under the header: same glass as the bar above it. */
/* These near-opaque plates scroll over artwork; live backdrop blur would
   re-filter the moving content on every frame. */
html body .page-controls.page-controls, html body .full-controls.full-controls, html body .backlog-controls.backlog-controls { background: rgba(13,12,16,.9) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--gg-room-line) !important; border-top: 0 !important; box-shadow: none !important; }
html body .page-controls:has([data-gg-close]) { position: relative; top: auto; }
html body .full-controls::before, html body .backlog-controls::before, html body .lists-page .page-controls::before { background: var(--gg-room) !important; }
html body .toplists-hero.gg-phead-host { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 6px !important; text-align: left; }
html body .toplists-hero.gg-phead-host::before, html body .toplists-hero.gg-phead-host::after { display: none !important; }
html body .page-controls .gg-crumb { font: 600 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--gg-room-tx-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 !important; }
html body .page-controls .gg-crumb a { color: inherit; text-decoration: none; } html body .page-controls .gg-crumb a:hover { color: #fff; }
html body .page-controls .gg-crumb span { color: var(--gg-room-tx-2); }
html body .page-controls:has(.gg-crumb) .controls-inner { max-width: 1240px; flex-direction: row !important; align-items: center !important; gap: 14px !important; }
html body .page-controls:has(.gg-crumb) .controls-inner > .btn { width: auto !important; flex: none; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--gg-room-2); border: 1px solid var(--gg-room-line-2); color: var(--gg-text); font: 600 12.5px/1 var(--gg-font-case); }
html body .page-controls:has(.gg-crumb) .gg-crumb { font-size: 11px !important; }
/* The background picker stayed off phones and touch screens on main; the
   menu keeps that rule rather than reintroducing it there. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) { html body .site-header.site-header .avatar-menu .gg-menu-bg { display: none; } }

/* Shelf & Press: readable at every width. The physical case and printed page
   remain the visual anchors; the surrounding UI has a common size and rhythm.
   Legacy templates ship their own CSS after this file, so these rules are
   scoped to the remake's components and outrank those specific old rules. */
html:root body { font-size: 16px; line-height: 1.55; color: var(--gg-text); }
html body main { box-sizing: border-box; min-width: 0; }
html body :is(.gg-phead, .gg-tagline, .gg-gpanel, .gg-abody) { overflow-wrap: anywhere; }
html body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gg-accent-light); outline-offset: 4px;
}
html body :is(.gg-paper, .gg-guide) :is(a, button, input, select):focus-visible {
  outline-color: var(--gg-press-accent);
}
html body :is(.gg-controls, .gg-pick, .gg-sheet) :is(input, select) { font-size: 16px; }
html body :is(.gg-btn, .gg-facet, .gg-tray-btn, .gg-opt, .gg-pick-trigger) {
  min-height: var(--gg-touch-target); font-size: 14px;
}
html body .gg-controls { background: var(--gg-room); border-color: var(--gg-room-line); }
html body .gg-controls-line { max-width: var(--gg-content-width); margin: auto; padding: 12px var(--gg-gutter); }
/* The 44px controls and 16px baseline made main's measured "fits in one line"
   thresholds stale: Library's bar clipped + Add Game at 1440px and Sort with it
   at 1024px, with no way to scroll to them. A bar that no longer fits now
   wraps, and the primary action keeps the right edge of whichever line it is
   on. The search field gives up width before anything wraps. */
@media (min-width: 769px) {
  html body .gg-controls-line { flex-wrap: wrap; row-gap: 10px; }
  html body .gg-controls-line .gg-search { flex: 0 1 210px; min-width: 150px; }
  html body .gg-controls-line .gg-search input { width: 100%; }
  html body .gg-controls-line > .gg-btn-primary { margin-left: auto; }
}
/* Below the width where the labelled bar fits, the sort-direction drum keeps
   its glyph and drops the words, the same trade main's compact actions make.
   The link's aria-label still says which way it sorts. */
@media (min-width: 769px) and (max-width: 1500px) {
  html body .gg-sort-split .gg-sort-drum { display: none; }
}
html body .gg-phead-row { display: flex; align-items: flex-end; gap: 32px; width: 100%; max-width: var(--gg-content-width); box-sizing: border-box; margin-inline: auto; padding: 36px var(--gg-gutter) 28px; }
html body .gg-phead-row .gg-phead { flex: 1; min-width: 0; padding: 0; }
html body .gg-controls.gg-controls--inline { position: static; background: transparent; border: 0; flex: 0 1 auto; }
html body .gg-controls--inline .gg-controls-line { padding: 0; justify-content: flex-end; flex-wrap: wrap; }
html body .gg-controls--inline .gg-spacer { display: none; }
html body .gg-ctl-k { color: var(--gg-room-tx-3); font-size: 13px; font-weight: 500; }
html body .gg-ctl-v { font-size: 14px; font-weight: 700; }
@media (max-width: 1100px) {
  html body .gg-phead-row { flex-direction: column; align-items: stretch; gap: 20px; }
  html body .gg-controls--inline .gg-controls-line { justify-content: flex-start; }
}
@media (max-width: 767px) {
  html body .gg-phead-row { padding: 24px 16px; }
  html body .gg-controls--nosearch .gg-filter-btn { width: auto; min-width: 156px; padding-inline: 16px; gap: 8px; }
}
html body .gg-search input { height: var(--gg-touch-target); background: var(--gg-room-2); border-color: var(--gg-room-line-2); }
html body .gg-sheet {
  visibility: hidden;
  transition: transform 340ms cubic-bezier(.33, 1, .68, 1), visibility 0s 340ms;
}
html body .gg-sheet:is(.is-open, .is-dragging) { visibility: visible; transition-delay: 0s; }
html body .gg-sheet h4 { font-size: 13px; color: var(--gg-room-tx-2); }

/* An aligned, generously sized header. Tablets get a full navigation row,
   rather than a search field that collapses into an invisible input. */
html body .site-header.site-header.site-header {
  height: 76px; gap: 20px;
  padding-inline: max(var(--gg-gutter), calc((100vw - var(--gg-content-width)) / 2)) !important;
}
html body .site-header.site-header .brand { font-size: 24px; }
html body .site-header.site-header .nav-link { min-height: 44px; box-sizing: border-box; font-size: 14px; padding: 12px; }
html body .site-header.site-header :is(.header-search, .header-btn, .gg-me) { height: 44px; font-size: 14px; }
html body .site-header.site-header .header-search { width: clamp(180px, 20vw, 280px); }
html body .site-header.site-header .header-search input { font-size: 16px; }
html body .site-header.site-header .notification-bell { width: 44px; }
html body .site-header.site-header .gg-me .avatar-small { width: 34px !important; height: 34px !important; min-width: 34px; }
html body .site-header.site-header .avatar-menu { width: 250px; max-width: calc(100vw - 32px); padding: 8px; }
html body .site-header.site-header .avatar-menu :is(a, button) { min-height: 44px; font-size: 15px; }
@media (min-width: 641px) and (max-width: 1180px) {
  html body .site-header.site-header.site-header { height: auto; padding-block: 12px !important; gap: 10px 16px; flex-wrap: wrap !important; }
  html body .site-header.site-header .brand-nav-wrap { display: contents !important; }
  html body .site-header.site-header nav.main-nav { order: 3; width: 100%; gap: 4px; overflow-x: auto; }
  html body .site-header.site-header .header-search,
  html body .site-header.site-header .header-search:focus-within { width: clamp(180px, 32vw, 300px); padding: 0 12px; }
  html body .site-header.site-header .header-search input { position: static; opacity: 1; width: auto; }
  html body .site-header.site-header .user-menu { margin-left: 0; }
}
@media (max-width: 640px) {
  html body .site-header.site-header.site-header { height: 68px; padding: 10px 16px !important; gap: 8px; }
  html body .site-header.site-header .brand { font-size: 20px; }
  html body .site-header.site-header.site-header:has(.auth-btn) { height: auto; min-height: 68px; flex-wrap: wrap !important; }
  /* Signed out, every public page opened on a two-row header on a phone, with
     Search / Login / Sign Up stranded on the left under the mark. They fit
     beside it; the wrap stays as the fallback on the narrowest phones, with
     the buttons held to the right. */
  html body .site-header.site-header.site-header:has(.auth-btn) .brand { font-size: 18px; }
  html body .site-header.site-header .user-menu:has(.auth-btn) { margin-left: auto !important; }
  /* header.css's phone rule gives the wordmark's wrapper width: 100%, which
     only shows where the header may wrap -- that is, signed out. */
  html body .site-header.site-header:has(.auth-btn) .brand-nav-wrap { width: auto !important; flex: 0 1 auto !important; }
  html body .site-header.site-header .user-menu { gap: 6px !important; }
  html body .site-header.site-header :is(.mobile-search-toggle, .notification-bell, .gg-me, .gg-me .avatar-small) {
    width: 44px !important; height: 44px !important; min-width: 44px; box-sizing: border-box;
  }
  html body.mobile-search-open .site-header.site-header .header-search { height: 60px; border-radius: 0; width: auto; }
  html body .mobile-tabbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html body .mobile-tabbar a { font-size: 12px; min-height: 52px; gap: 4px; }
  html body .mobile-tabbar a .tab-icon { padding: 4px 14px; }
  html body:has(.mobile-tabbar) { padding-bottom: 88px; }
}
@media (max-width: 360px) {
  html body .site-header.site-header.site-header { padding-inline: 12px !important; }
  html body .site-header.site-header .brand { font-size: 18px; }
  html body .site-header.site-header .user-menu { gap: 4px !important; }
}
@media (max-width: 380px) {
  html body .site-header.site-header.site-header:has(.auth-btn) { padding-inline: 12px !important; }
  /* !important: header.css pins .user-menu .auth-btn to 12px that way. */
  html body .site-header.site-header .header-btn.auth-btn { padding: 0 10px !important; }
}
@media (max-width: 364px) {
  html body .site-header.site-header.site-header:has(.auth-btn) .brand { font-size: 16px; }
}

html body .gg-phead { max-width: var(--gg-content-width); margin-inline: auto; padding: 36px var(--gg-gutter) 28px; }
html body .gg-phead .gg-ey { font-size: 12px; line-height: 1.4; }
html body .gg-phead h1 { font-size: clamp(38px, 4vw, 56px) !important; line-height: 1.08; margin-top: 10px; text-wrap: balance; }
html body .gg-phead p { font-size: 16px; line-height: 1.65; margin-top: 12px; max-width: 58ch; }
html body .grid.gg-grid { max-width: var(--gg-content-width); margin-inline: auto; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 40px 28px !important; padding: 8px var(--gg-gutter) 32px !important; }
html body .grid.gg-grid > .card.gg-item { gap: 14px; }
html body .gg-tagline .gg-title { font-size: 18px; line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html body .gg-tagline .gg-sub { font-size: 13px; line-height: 1.5; flex-wrap: wrap; }
html body .gg-tagline .gg-sub b { font-size: 12px; color: var(--gg-accent-light); }
html body .gg-grid .game-tag { font-size: 13px !important; line-height: 1.3; min-height: 32px; display: inline-flex; align-items: center; padding: 6px 10px; white-space: normal; }
html body .gg-grid .gg-item .gg-chips .game-tags { width: 100% !important; overflow: visible !important; }
html body .gg-grid .game-tags-inner { flex-wrap: wrap; white-space: normal; }
/* Missing data never changes a card's shape: the year line and the genre row
   hold their height when empty, and the title holds to one line (its full name
   is in the title attribute). The grades and attributes render dashes. */
html body .gg-grid .gg-item .gg-tagline .gg-title { -webkit-line-clamp: 1; }
html body .gg-grid .gg-item .gg-tagline .gg-sub { min-height: 1.5em; }
html body .gg-grid .gg-item .gg-tagline .gg-chips { min-height: 32px; }

/* Under the case. Overall is the rating box, so this is the other three on one
   ruled line, then the attributes, then one row of actions. It used to be four
   bordered score tiles, an attribute row and up to three rows of buttons, and
   the card ran to ~900px for one game. */
html body .gg-grid .gg-item .gg-grades { display: grid; gap: 8px; }
html body .gg-grid .gg-item .gg-grades-k { font-size: 12px; line-height: 1.4; letter-spacing: .02em; color: var(--gg-room-tx-3); }
html body .gg-grid .gg-item .gg-grades-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--gg-room-line); padding: 10px 0 9px; }
html body .gg-grid .gg-item .gg-grade { display: grid; justify-items: center; gap: 5px; min-width: 0; }
html body .gg-grid .gg-item .gg-grade + .gg-grade { border-left: 1px solid var(--gg-room-line); }
html body .gg-grid .gg-item .gg-grade .k { font-size: 12px; line-height: 1.2; color: var(--gg-room-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html body .gg-grid .gg-item .gg-grade .gg-pscore { font-size: 21px; }
html body .gg-grid .gg-item .gg-grade.is-sorted .k { color: var(--gg-accent-light); font-weight: 700; }
html body .gg-grid .gg-item .community-attrs { margin-top: 0; }
html body .gg-grid .gg-item .gg-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; border: 0; background: none; }
html body .gg-grid .gg-item .gg-card-actions .btn { min-height: 44px; height: auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
html body .gg-grid .gg-item .gg-card-act { flex: 1 0 112px; padding: 8px 10px; font-size: 14px !important; font-weight: 700; }
html body .gg-grid .gg-item .gg-card-act.is-primary { background: var(--gg-accent) !important; border-color: var(--gg-accent) !important; color: #fff !important; }
html body .gg-grid .gg-item .gg-card-act.is-pending { opacity: .5; }
html body .gg-grid .gg-item .gg-card-act.is-state { background: transparent !important; border-color: transparent !important; color: var(--gg-room-tx-3) !important; cursor: default; opacity: 1; padding-inline: 2px; }
html body .gg-grid .gg-item .gg-icon-btn { flex: 1 0 44px; max-width: 56px; padding: 0; color: var(--gg-room-tx-2); }
html body .gg-grid .gg-item .gg-icon-btn svg { width: 16px; height: 16px; }
html body .gg-grid .gg-item .gg-icon-btn img { width: 16px; height: 16px; filter: invert(1); opacity: .85; }
@media (max-width: 767px) {
  /* Two cards a row: the action takes its own line and the three icons share
     the one under it, each still a 44px target. */
  html body .gg-grid .gg-item .gg-card-act { flex-basis: 100%; }
  html body .gg-grid .gg-item .gg-icon-btn { max-width: none; }
  html body .gg-grid .gg-item .gg-grade .gg-pscore { font-size: 19px; }
  /* A third of a 161px card is ~53px; "Gameplay" at 12px is ~52px plus the rule. */
  html body .gg-grid .gg-item .gg-grade .k { font-size: 11px; letter-spacing: -.01em; }
}

/* The case's decorative print has a floor, not just a viewport multiplier.
   Rating box and price sticker sit in one row along the foot of the box (.gg-tags),
   rating left, sticker right. wrap-reverse means that when the two do not fit
   side by side the sticker wraps onto a line *above* the rating, so the pair can
   never overlap, at any case width or font floor. They used to be positioned
   independently, and the sticker was moved to the top of the art to stop the
   collision, where it covered the game's logo instead. */
html body .gg-case .gg-tags { position: absolute; left: 8%; right: 6%; bottom: 4%; z-index: 4; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: space-between; gap: 2.4cqw 3cqw; pointer-events: none; }
html body .gg-case .gg-tags > :is(.gg-rbox, .gg-plabel, .gg-yr) { position: static; inset: auto; flex: none; }
html body .gg-case .gg-tags > :is(.gg-plabel, .gg-yr) { margin-left: auto; }
html body .gg-case .gg-tags > .gg-yr { align-self: flex-end; padding-bottom: .6cqw; }
/* Which layout a case gets is decided by its width, not by how wide this
   game's numbers happen to be: a wide case sets the pair side by side (sized in
   cqw so a sale sticker still fits), a narrow one always stacks the sticker
   over the rating. wrap-reverse stays underneath as the guarantee. */
@container (max-width: 239px) {
  html body .gg-case .gg-tags { flex-direction: column-reverse; align-items: flex-start; flex-wrap: nowrap; }
  html body .gg-case .gg-tags > :is(.gg-plabel, .gg-yr) { align-self: flex-end; margin-left: 0; }
}
html body .gg-case .gg-rbox { gap: 6px; padding: 5px 7px; border-width: 2px; border-radius: 3px; }
html body .gg-case .gg-rbox .n { font-size: max(24px, 10cqw); line-height: 1; }
html body .gg-case .gg-rbox .g { font-size: max(11px, 3.4cqw); }
html body .gg-case .gg-rbox .l { font-size: max(10px, 2.7cqw); letter-spacing: .03em; }
/* "Community" is said by the grades line under every case; on the box itself
   it was the width that pushed the sticker off the row. */
html body :is(.gg-grid, .gg-fly.from-grid) .gg-case .gg-rbox .l { display: none; }
html body :is(.gg-grid, .gg-fly.from-grid) .gg-case .gg-rbox .g { border: 0; padding: 0; }
html body :is(.gg-grid, .gg-fly.from-grid) .gg-case .gg-rbox .n { grid-row: auto; }
html body .gg-case .gg-plabel { min-width: 0; border-width: 2px; border-radius: 4px; }
html body .gg-case .gg-plabel .pr { padding: 6px 8px; gap: 4px; }
html body .gg-case .gg-plabel .pr b { font-size: max(16px, 6.4cqw); }
html body .gg-case .gg-plabel .pr s { font-size: max(11px, 4cqw); }
html body .gg-case .gg-plabel .off { font-size: 11px; padding: 3px 4px; }
html body .gg-case .gg-plabel .pv { font-size: max(11px, 4cqw); padding: 5px 8px; gap: 4px; }
html body .gg-case .gg-plabel .pv small { font-size: 12px; }
html body .gg-case .gg-plabel .pv.new { font-size: 12px; letter-spacing: .02em; }
@container (max-width: 200px) {
  html body .gg-case .gg-rbox .l { display: none; }
  html body .gg-case .gg-rbox .g { border: 0; }
  html body .gg-case .gg-rbox .n { grid-row: auto; font-size: 26px; }
  html body .gg-case .gg-plabel .pv s, html body .gg-case .gg-plabel .pv small { display: none; }
}
@media (max-width: 767px) {
  html body .gg-phead { padding: 24px 16px 24px; }
  html body .grid.gg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 16px !important; padding-inline: 16px !important; }
  html body .gg-tagline .gg-title { font-size: 17px; }
  html body .gg-grid .game-tag { min-height: 44px; }
}
@media (max-width: 359px) {
  html body .grid.gg-grid { grid-template-columns: 1fr !important; max-width: 320px; }
}

/* Phones: one game a row, the portrait case standing behind a front panel.
   Games cards put the same landscape artwork as main on a removable sleeve
   over that window, with the rating and price on its lip. --gg-crate is the
   fraction of the portrait case on show; the fly layer reveals the rest as
   the sleeve and panel slide down, then swings the portrait lid open. */
html body .grid.gg-grid.gg-details-fly { position: fixed; z-index: 4001; pointer-events: none; margin: 0 !important; padding: 0 !important; gap: 0 !important; max-width: none; will-change: transform; transition: transform .15s cubic-bezier(.2,.8,.25,1); }
@keyframes gg-panel-close { from { transform: translateY(var(--gg-panel-drop)); } to { transform: translateY(0); } }
@keyframes gg-crate-close { from { clip-path: inset(0 -200% 0px -200%); } to { clip-path: inset(0 -200% var(--gg-hidden) -200%); } }
@media (max-width: 600px) {
  /* A removable landscape sleeve over the portrait case. The image keeps
     its whole composition; the dark lip holds the stickers below the art. */
  html body.games-page .gg-grid .gg-case > .gg-sleeve {
    display: block; position: absolute; top: 8%; left: 0; right: 0;
    bottom: calc((1 - var(--gg-crate)) * 100%); z-index: 1;
    background: var(--gg-room-2); overflow: hidden; pointer-events: none;
  }
  .gg-sleeve > img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: var(--gg-room); }
  .gg-sleeve-name { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: 16px; box-sizing: border-box; color: var(--gg-room-tx-2); font: 700 18px/1.3 var(--gg-font-case); text-align: center; }
  html body .gg-case.gg-sleeve-fly { position: absolute; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; }
  html body .gg-sleeve-fly > .gg-sleeve { display: block; position: absolute; inset: 0; background: var(--gg-room-2); }
  html body .gg-sleeve-fly .gg-tags { flex-direction: row; flex-wrap: wrap-reverse; align-items: flex-end; }
  html body .gg-sleeve-fly .gg-tags > :is(.gg-plabel, .gg-yr) { margin-left: auto; align-self: flex-end; }
  /* Keep sale pricing on one printed line so the sleeve's lip remains below
     the complete landscape image, including at 320px. */
  html body.games-page :is(.gg-grid .gg-case, .gg-sleeve-fly) .gg-plabel.sale .pr {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  }
  html body .gg-fly.from-grid.crated.sleeved .gg-art { -webkit-mask-image: none; mask-image: none; }
  html body .gg-fly.from-grid.crated { --gg-crate: .62; }
  html body .grid.gg-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; max-width: none; }
  html body .grid.gg-grid > .card.gg-item { --gg-crate: .62; gap: 0; background: var(--gg-room-2) !important; border: 1px solid var(--gg-room-line) !important; border-radius: 8px !important; overflow: hidden !important; }
  html body .grid.gg-grid > .card.gg-item::before { content: none !important; }
  html body .gg-grid .gg-item > .gg-case-link { position: relative; aspect-ratio: 135 / calc(190 * var(--gg-crate)); overflow: hidden; border-radius: 0; }
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-case { border-radius: 0; box-shadow: none; }
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-case::after { background: linear-gradient(118deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%); }
  /* The lip: the art darkens toward the front panel, as if in its shade. A
     mask on the art rather than an overlay, which would also dim the stickers
     (the case is its own stacking context, so nothing can sit between them). */
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-art { -webkit-mask-image: linear-gradient(#000 calc(var(--gg-crate) * 62%), rgba(0,0,0,.32) calc(var(--gg-crate) * 100%)); mask-image: linear-gradient(#000 calc(var(--gg-crate) * 62%), rgba(0,0,0,.32) calc(var(--gg-crate) * 100%)); }
  html body .gg-grid .gg-item > .gg-case-link { border-bottom: 1px solid var(--gg-room-line-2); }
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-tags { bottom: calc((1 - var(--gg-crate)) * 100% + 3.5%); left: 4%; right: 4%; z-index: 6; flex-direction: row; flex-wrap: wrap-reverse; align-items: flex-end; }
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-tags > :is(.gg-plabel, .gg-yr) { margin-left: auto; align-self: flex-end; }
  html body :is(.gg-grid .gg-item > .gg-case-link, .gg-fly.from-grid.crated) .gg-case .gg-band { padding-left: 4cqw; }
  /* Under the case, everything is spent to buy art above it. The tagline and
     grades boxes dissolve (display: contents) so their pieces share rows:
     title with the rating count, the year with the genres (one line that
     scrolls, never a row of its own), the three grades, then the attributes
     as one inline line rather than labels stacked over glyphs. */
  html body .gg-grid .gg-item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "case case case" "title title count" "sub chips chips" "grades grades grades" "attrs attrs attrs" "acts acts acts"; column-gap: 10px; }
  html body .gg-grid .gg-item > .gg-case-link { grid-area: case; }
  html body .gg-grid .gg-item :is(.gg-tagline, .gg-grades) { display: contents; }
  /* One line, always: a title that wraps makes its card taller than the rest. */
  html body .gg-grid .gg-item .gg-title { grid-area: title; margin: 10px 0 0 14px; font-size: 18px; -webkit-line-clamp: 1; line-height: 24px; }
  /* "Community" is what the grades row under it is; beside the title it only
     cost the title its second half. */
  html body .gg-grid .gg-item .gg-gk-c { display: none; }
  html body .gg-grid .gg-item .gg-grades-k { grid-area: count; align-self: end; margin: 0 14px 2px 0; font-size: 12px; white-space: nowrap; }
  html body .gg-grid .gg-item .gg-sub { grid-area: sub; align-self: center; margin: 4px 0 0 14px; font-size: 12.5px; white-space: nowrap; min-height: 26px; align-items: center; }
  html body .gg-grid .gg-item .gg-chips { grid-area: chips; align-self: center; flex-wrap: nowrap; overflow-x: auto !important; scrollbar-width: none; margin: 4px 0 0; padding-right: 14px !important; }
  html body .gg-grid .gg-item .gg-chips::-webkit-scrollbar { display: none; }
  html body .gg-grid .gg-item .gg-tagline .gg-chips { min-height: 26px; }
  html body .gg-grid .gg-item .gg-chips .game-tags-inner { flex-wrap: nowrap; }
  html body .gg-grid .gg-item .gg-chips .game-tag { min-height: 26px; font-size: 12px !important; padding: 2px 10px; white-space: nowrap; }
  html body .gg-grid .gg-item .gg-grades-row { grid-area: grades; margin: 10px 14px 0; padding: 7px 0 6px; }
  html body .gg-grid .gg-item .gg-grade { gap: 3px; }
  html body .gg-grid .gg-item .gg-grade .k { font-size: 11.5px; letter-spacing: .01em; }
  html body .gg-grid .gg-item .gg-grade .gg-pscore { font-size: 21px; }
  html body .gg-grid .gg-item .community-attrs { grid-area: attrs; display: flex; justify-content: space-between; gap: 10px; margin: 0 14px; padding: 7px 4px; min-height: 32px; box-sizing: border-box; border-bottom: 1px solid var(--gg-room-line); }
  html body .gg-grid .gg-item .community-attr { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
  html body .gg-grid .gg-item .community-attr .attr-scale i { width: 12px; height: 12px; }
  html body .gg-grid .gg-item .community-attr .scale-icons { gap: 2px; }
  html body .gg-grid .gg-item .community-attr .k { font-size: 9.5px !important; letter-spacing: .03em !important; }
  /* All three attributes set, at the narrowest phones: tighten rather than wrap,
     since a second line would make this card taller than its neighbours. */
  @media (max-width: 374px) {
    html body .gg-grid .gg-item .community-attrs { gap: 6px; padding-inline: 0; }
    html body .gg-grid .gg-item .community-attr { gap: 4px; }
    html body .gg-grid .gg-item .community-attr .k { font-size: 9px !important; letter-spacing: 0 !important; }
    html body .gg-grid .gg-item .community-attr .attr-scale i { width: 10px; height: 10px; }
    html body .gg-grid .gg-item .community-attr .scale-icons { gap: 1px; }
  }
  @media (max-width: 339px) { html body .gg-grid .gg-item .community-attrs { margin-inline: 8px; gap: 2px; } }
  html body .gg-grid .gg-item .community-attr .attr-scale { min-height: 0; }
  html body .gg-grid .gg-item > .gg-card-actions { grid-area: acts; padding: 10px 14px 12px; flex-wrap: nowrap; }
  html body .gg-grid .gg-item .gg-card-act { flex: 1 1 0; min-width: 0; width: auto; }
  /* Every action state is the same 44px (index.html pins enabled .actions .btn to 32px
     and leaves disabled ones, "✓ Reviewed", at 44), or the card
     height would follow the viewer's own library. */
  html body .gg-grid .gg-item .gg-card-actions .btn { height: 44px !important; min-height: 44px !important; max-height: 44px; white-space: nowrap; line-height: 1; }
  html body .gg-grid .gg-item .gg-icon-btn { flex: 0 0 48px; max-width: 48px; }
}

/* Editorial typography and the guide: comfortable reading, honest hierarchy. */
html body :is(.gg-kick, .gg-cap, .gg-dateline, .gg-pfoot, .gg-gnote, .gg-gmore,
  .gg-clipping .k2, .gg-clipping .by, .gg-stamps .stp, .gg-gb-head, .gg-gb-row .k,
  .gg-gb-attrs dt, .gg-facts dt) { font-size: 12px; line-height: 1.5; }
html body .gg-guide { max-width: var(--gg-content-width); grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .gg-gpanel { padding: 28px 26px 0; min-width: 0; }
html body .gg-gpanel:nth-child(3)::before { display: none; }
html body .gg-gpanel:nth-child(n+3) { border-top: 1px solid var(--gg-gloss-rule); }
html body .gg-gtext { font-size: 18px; line-height: 1.65; -webkit-line-clamp: unset; }
html body :is(.gg-facts, .gg-gb-attrs dd) { font-size: 15px; line-height: 1.5; }
html body .gg-facts > div { grid-template-columns: 110px minmax(0, 1fr); padding: 10px 0; }
html body .gg-gtags a { font-size: 13px; padding: 6px 10px; }
html body .gg-gnote { font-size: 14px; }
html body .gg-save { font-size: 14px; line-height: 1.7; padding: 16px; }
html body .gg-spec .k { font-size: 15px; line-height: 1.4; }
html body .gg-gactions .btn, html body .gg-article .gg-gb-actions .btn { height: auto; min-height: 44px; font-size: 14px !important; padding: 10px 14px; }
html body .gg-clipping .hd { font-size: 18px; line-height: 1.4; }
html body .gg-press .feed-body { font-size: 18px; line-height: 1.65; }
html body .gg-press :is(.feed-time, .feed-rp, .feed-attribute .label, .feed-read-more, .view-link) { font-size: 12px; line-height: 1.5; }
html body .gg-press .feed-scores .score .label,
html body .gg-press .feed-scores .score .label.overall-label { font-size: 12px !important; letter-spacing: .02em !important; line-height: 1.4; }
html body .gg-press .feed-scores .score { min-width: 0; padding: 4px; }
html body .gg-press :is(.share-btn, .vote-btn, .view-link, .feed-read-more) { min-height: 44px; display: inline-flex; align-items: center; }
html body .gg-press .feed-username { font-size: 16px; }
html body .gg-article .gg-prose { font-size: 20px; line-height: 1.7; max-width: 68ch; }
html body .gg-article .gg-acols { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
@media (max-width: 900px) {
  html body .gg-article .gg-acols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  html body .gg-guide { grid-template-columns: 1fr; }
  html body .gg-gpanel { padding: 24px 20px 0; }
  html body .gg-gpanel + .gg-gpanel { border-top: 1px solid var(--gg-gloss-rule); }
  html body .gg-press .feed-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  html body .gg-press .feed-scores .score:nth-child(3) { border-left: 0; }
  html body .gg-article .gg-prose { font-size: 18px; }
}

/* Reviews keep their editable badge and value hooks. Ink on paper tiles
   carries the score; gold stock still distinguishes a perfect ten. */
html body.reviews-page .full-list .scorecell .badge {
  background: var(--gg-paper) !important; color: var(--gg-ink) !important;
  -webkit-text-fill-color: var(--gg-ink) !important; border: 0; border-radius: 6px;
  min-width: 52px; padding: 12px 8px; font: 800 24px/1 var(--gg-font-case); box-shadow: none;
}
html body.reviews-page .full-list .scorecell .badge::before { display: none; }
html body.reviews-page .full-list .scorecell .badge.gold-glow { background: var(--gg-gold-pale) !important; }
html body:is(.reviews-page, .backlog-page) .full-list .gamename { font-size: 18px; line-height: 1.4; }
html body.reviews-page .full-list .gamename { font-family: var(--gg-font-serif); font-weight: 600; }
html body:is(.reviews-page, .backlog-page) .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
html body:is(.reviews-page, .backlog-page) .page-header-wrap { overflow: visible; }
html body:is(.reviews-page, .backlog-page) .full-list th { font-size: 12px; padding: 16px 10px; }
html body:is(.reviews-page, .backlog-page) .full-list td { font-size: 14px; }
html body:is(.reviews-page, .backlog-page) .mobile-card { border-radius: 12px; }
html body:is(.reviews-page, .backlog-page) .mobile-card-body { padding: 18px; gap: 16px; }
html body:is(.reviews-page, .backlog-page) .mobile-card-actions .btn { min-height: 44px; font-size: 14px; }
html body:is(.reviews-page, .backlog-page) .mobile-card-attr .k { font-size: 12px; line-height: 1.4; }
html body:is(.reviews-page, .backlog-page) .mobile-card-attr .v { font-size: 15px; }
html body.reviews-page .mobile-card-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; border: 0; overflow: visible; }
html body.reviews-page .mobile-card-score { background: var(--gg-paper); border: 0; border-radius: 6px; padding: 12px; }
html body.reviews-page .mobile-card-score .label { font-size: 12px; line-height: 1.4; color: var(--gg-ink-2); }
html body.reviews-page .mobile-card-score .value { font-size: 28px; color: var(--gg-ink) !important; -webkit-text-fill-color: var(--gg-ink) !important; background: none !important; }
html body.reviews-page .mobile-card-title { font: 700 25px/1.2 var(--gg-font-serif); }
html body.reviews-page .mobile-card-hero-titles { position: relative; inset: auto; padding: 16px !important; background: var(--gg-room-2); }
html body.reviews-page .mobile-card-hero-link img { height: 180px; }
html body.reviews-page .mobile-card-hero-aside { bottom: auto; top: 12px; }
html body.reviews-page .mobile-card-hero-scrim { bottom: auto; height: 180px; }

/* The Library's status and platform chips keep remake's 44px targets on touch;
   with a pointer the page sets them compact (backlog.html). */
@media (pointer: coarse) {
  html body.backlog-page :is(.play-chip, .pf-chip) { font-size: 14px; min-height: 44px; }
}
html body:is(.reviews-page, .backlog-page) .mobile-card-attr .k { font-size: 12px !important; }
html body:is(.reviews-page, .backlog-page) .mobile-card-attr .v { font-size: 15px !important; }
html body:is(.reviews-page, .backlog-page) .mobile-rank-move { min-width: 44px; min-height: 44px; }
html body .social-subnav a, html body .toplists-tabs-shell .tab-btn { font-size: 14px !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
html body .toplists-tabs-shell .tabs { flex-wrap: wrap; }
html body .social-subnav { gap: 6px; flex-wrap: wrap; }
html body:is(.reviews-page, .backlog-page) .full-list thead th { position: static !important; transform: none !important; }
html body:is(.reviews-page, .backlog-page) .full-list .rowcover { width: 108px !important; height: 72px !important; object-fit: cover; }
html body:is(.reviews-page, .backlog-page) .full-list .covercol { width: 128px; }
html body:is(.reviews-page, .backlog-page) main.fulltable { display: block; }
html body :is(.page-controls, .controls-inner) .btn { min-height: 44px; font-size: 14px !important; }

/* Lists join the editorial side: each entry is a printed chart, with an
   unmistakable favorite frame and full-size numbers on both layouts. */
html body.lists-page :is(.toplist-entry, .toplist-mobile-row) { background: var(--gg-paper) !important; color: var(--gg-ink); border: 1px solid var(--gg-rule); border-radius: 10px; }
html body.lists-page .favorite-frame { background: var(--gg-paper-2); border-color: var(--gg-gold-strong); border-radius: 12px; }
html body.lists-page .favorite-header { border-color: var(--gg-rule); }
html body.lists-page .favorite-title { color: var(--gg-ink); font-size: 14px; }
html body.lists-page :is(.full-card-header h3, .toplist-mobile-title) { color: var(--gg-ink) !important; font: 700 24px/1.25 var(--gg-font-serif); }
html body.lists-page :is(.full-card-meta, .toplist-mobile-meta) { color: var(--gg-ink-2); font-size: 14px; line-height: 1.5; }
html body.lists-page :is(.score-box, .toplist-mobile-score) { background: var(--gg-paper-2) !important; color: var(--gg-ink); border-color: var(--gg-rule) !important; box-shadow: none; }
html body.lists-page :is(.score-label, .toplist-mobile-score-label, .toplist-card-attr .label) { color: var(--gg-ink-2) !important; font-size: 12px !important; line-height: 1.4; }
html body.lists-page :is(.score-value, .toplist-mobile-score-value) { color: var(--gg-ink) !important; -webkit-text-fill-color: var(--gg-ink) !important; font-size: 26px !important; line-height: 1.2; background: none !important; }
html body.lists-page .toplist-card-attr { font-size: 14px; color: var(--gg-ink); }
html body.lists-page .toplist-card-attr :is(.attr-value, .hours-value) { color: var(--gg-ink); }
html body.lists-page .featured-review { background: var(--gg-paper-2); border-color: var(--gg-rule); color: var(--gg-ink); }
html body.lists-page :is(.favorite-review, .toplist-mobile-review) { background: var(--gg-paper-2); border-color: var(--gg-rule); color: var(--gg-ink); font: 400 17px/1.6 var(--gg-font-serif); }
html body.lists-page :is(.favorite-review-title, .toplist-mobile-review-divider, .toplist-card-attr .k) { color: var(--gg-ink-2); font-size: 12px; }
html body.lists-page :is(.toplist-mobile-review-text, .favorite-review-text) { color: var(--gg-ink); font: inherit; }
html body.lists-page .toplist-card-shell { background: var(--gg-paper) !important; border-color: var(--gg-rule); }
html body.lists-page .toplist-card-shell::after { display: none; }
html body.lists-page .toplist-card-shell::before { background: none; }
html body.lists-page .toplist-score-inline { background: var(--gg-paper-2); border-color: var(--gg-rule); padding: 10px; }
html body.lists-page .toplist-score-inline-label { color: var(--gg-ink-2); font-size: 12px; line-height: 1.4; }
html body.lists-page .toplist-score-inline-value { color: var(--gg-ink); font-size: 24px; line-height: 1.2; }
html body.lists-page .toplist-card-attr :is(.k, .v) { color: var(--gg-ink-2) !important; }
html body.lists-page .toplist-card-attr .v { font-size: 14px !important; color: var(--gg-ink) !important; }
html body.lists-page .toplist-mobile-badge { color: var(--gg-ink); background: var(--gg-gold-pale); border-color: var(--gg-gold-strong); font-size: 11px; }
html body.lists-page .toplist-card-attr .attr-scale i { background: var(--gg-ink); }
html body.lists-page .toplist-card-attr .attr-scale i:not(.on) { background: var(--gg-rule); }
html body.lists-page :is(.toplist-mobile-actions, .full-card-actions) .btn { min-height: 44px; font-size: 14px !important; color: var(--gg-ink); background: var(--gg-gloss); border: 1px solid var(--gg-rule); }
@media (max-width: 768px) {
  html body.lists-page .toplist-mobile-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  html body.lists-page .toplist-mobile-score { padding: 10px 6px; }
  html body.lists-page .toplist-mobile-title { font-size: 22px !important; }
  html body.lists-page .toplist-mobile-meta { font-size: 13px !important; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html body .gg-sheet { transition: none; }
}

/* Dialogs: paper on a darkened room (the "Shelf & Press" desk).
   The scrim and the card are restyled here; each page's own CSS still owns
   display/visibility, sizing and layout, so open/close logic is untouched.
   A dialog card carries class="gg-paper gg-dialog": .gg-paper is the shared
   material (ground, grain, ink); .gg-dialog scopes everything below so it
   never reaches the feed's clippings or the review article. Inside it is ink:
   serif italic title over a double rule, ink inputs, purple primary,
   white secondary, red-outline danger. */
html body :is(.modal, .auth-gate-modal, .feedback-modal, .downvote-modal, .yearly-modal, .compare-modal,
  .reviews-compare-modal, .friend-modal-overlay, .status-overlay, .compare-navigate-overlay,
  .reviews-compare-navigate-overlay, .evn-scrim, .wn-scrim, .cal-scrim) {
  background: var(--gg-room-scrim);
  /* No blur. At 86% the scrim already hides the page, so the blur was all
     cost: the browser re-blurs the whole viewport whenever the dialog or
     anything behind it repaints, which made typing and scrolling in the
     pickers visibly lag (median frame 50ms with it, 16.7ms without, at 4x
     CPU throttle). The page CSS that set its own blur loses to this. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Dialogs cover the whole room, chrome included. Several scrims sat below the
   fixed header (3500) and the phone tab bar (3400), so a card near the top was
   cut off under the header and the tab bar drew over the scrim. Above both,
   below the header's own menus (3600+) and the shared ggConfirm (10000), which
   can open from inside another dialog. */
html body :is(.feedback-modal, .downvote-modal, .yearly-modal, .compare-modal, .reviews-compare-modal,
  .friend-modal-overlay) { z-index: 3510 !important; }
html body :is(.status-overlay, .compare-navigate-overlay, .reviews-compare-navigate-overlay) { z-index: 3520 !important; }
html body .gg-dialog {
  background: var(--gg-paper);
  color: var(--gg-ink);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 30px 60px -20px rgba(0, 0, 0, .85);
  color-scheme: light;
}
/* .gg-paper positions the card and its children for the grain layer; the
   cards that are themselves fixed, and their pinned close, keep their own. */
html body .gg-dialog:is(.evn-modal, .cal-modal) { position: fixed; }
/* The email notice sits with the header (3500); its scrim has to clear it. */
html body .evn-scrim { z-index: 3505; }
html body .gg-dialog.evn-modal { z-index: 3510; }
/* What's new: the same depth as the email notice, which it waits for. */
html body .wn-scrim { z-index: 3505; }
html body .gg-dialog.wn-modal { position: fixed; z-index: 3510; }
/* .gg-paper > * makes every later sibling relative, and a relative block
   paints over an earlier absolute one: without the z-index the kicker and
   title swallowed every click on the close button. */
html body .gg-dialog > :is(.wn-dismiss, .evn-dismiss) { position: absolute; z-index: 2; }
/* Titles: the desk's italic serif, ruled off from the body with a double line. */
html body .gg-dialog :is(.modal-header h2, h3, .compare-modal-title, .reviews-compare-modal-title, .friend-modal-title, .status-title, .evn-title, .wn-title, .cal-modal-top h2) {
  font-family: var(--gg-font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-transform: none;
  color: var(--gg-ink);
}
html body .gg-dialog .new-game-form h3 { font-size: 20px; }
html body .gg-dialog :is(.modal-header, .yearly-modal-header, .compare-modal-header, .reviews-compare-modal-header,
  .friend-modal-header, .downvote-modal-header) {
  border-bottom: 3px double var(--gg-ink);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
html body .gg-dialog:is(.auth-gate-card, .feedback-card) > h3 {
  border-bottom: 3px double var(--gg-ink);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
html body .gg-dialog .downvote-modal-title { margin: 0; font-size: 22px; }
html body .gg-dialog :is(p, .compare-modal-subtitle, .reviews-compare-modal-subtitle, .friend-modal-subtitle,
  .status-message, .gg-confirm-message, .feedback-status, .friend-modal-empty, .no-results, .igdb-searching-state,
  .igdb-searching-text, .gg-dialog-note, .evn-message, .evn-status, .wn-lede, .wn-note, .cal-modal-sub, .brk-empty, .brk-h,
  .reviews-compare-invite-copy) {
  color: var(--gg-ink-2);
}
html body .gg-dialog .evn-addr { color: var(--gg-ink); }
html body .gg-dialog .evn-icon { color: var(--gg-press-accent); }
html body .gg-dialog .gg-confirm-message { color: var(--gg-ink); font-size: 15px; }
html body .gg-dialog a:not([class]) { color: var(--gg-press-accent); }
html body .gg-dialog-note { text-align: center; padding: 18px 12px; font-size: 13px; }
html body .gg-dialog-note.is-error, html body .gg-dialog-error { color: var(--gg-ink-danger); font-size: 13px; }
/* Close: a small ruled square, not a floating glyph. */
html body .gg-dialog :is(.modal-close, .close, .yearly-modal-close, .compare-modal-close, .reviews-compare-modal-close,
  .friend-modal-close, .downvote-modal-close, .evn-dismiss, .wn-dismiss, .cal-x) {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--gg-rule) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--gg-ink-2) !important;
  font: 400 20px/1 var(--gg-font-case) !important;
  cursor: pointer;
}
html body .gg-dialog :is(.modal-close, .close, .yearly-modal-close, .compare-modal-close, .reviews-compare-modal-close,
  .friend-modal-close, .downvote-modal-close, .evn-dismiss, .wn-dismiss, .cal-x):hover {
  border-color: var(--gg-ink) !important;
  color: var(--gg-ink) !important;
  background: rgba(23, 20, 15, .06) !important;
}
/* Buttons. Secondary is white on paper; the one primary is solid purple. */
html body .gg-dialog :is(.btn, .shop-btn, .auth-gate-btn, .evn-btn, .wn-btn, .reviews-compare-invite-btn, .log-btn) {
  min-height: 38px;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--gg-paper-raised-rule) !important;
  background: var(--gg-paper-raised) !important;
  color: var(--gg-ink) !important;
  font: 700 13px/1 var(--gg-font-case) !important;
  text-shadow: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
html body .gg-dialog :is(.btn, .shop-btn, .auth-gate-btn, .evn-btn, .wn-btn, .reviews-compare-invite-btn, .log-btn):hover {
  border-color: var(--gg-ink-2) !important;
  filter: none;
}
html body .gg-dialog :is(.btn.primary, .btn.btn-primary, .custom-list-create-btn, .shop-btn-primary, .auth-gate-btn.primary, .evn-btn-primary, .wn-btn-primary, .reviews-compare-invite-btn.is-primary, .log-btn, .gg-dialog-primary) {
  background: var(--gg-accent) !important;
  border-color: var(--gg-accent) !important;
  color: #fff !important;
}
html body .gg-dialog :is(.btn.primary, .btn.btn-primary, .custom-list-create-btn, .shop-btn-primary, .auth-gate-btn.primary, .evn-btn-primary, .wn-btn-primary, .reviews-compare-invite-btn.is-primary, .log-btn, .gg-dialog-primary):hover {
  background: var(--gg-press-accent) !important;
  border-color: var(--gg-press-accent) !important;
}
html body .gg-dialog .btn.danger {
  background: rgba(179, 38, 30, .08) !important;
  border-color: var(--gg-ink-danger) !important;
  color: var(--gg-ink-danger) !important;
}
html body .gg-dialog .btn.danger:hover { background: rgba(179, 38, 30, .16) !important; }
html body .gg-dialog :is(.btn, .shop-btn, .auth-gate-btn, .evn-btn, .wn-btn, .reviews-compare-invite-btn, .log-btn):focus-visible {
  outline: none;
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 3px rgba(113, 90, 184, .28);
}
html body .gg-dialog .shop-btn[disabled] { opacity: .5; cursor: not-allowed; }
html body .gg-dialog .btn-small { min-height: 32px; padding: 0 12px !important; border-radius: 9px !important; font-size: 12px !important; }
html body .gg-dialog .auth-gate-dismiss { color: var(--gg-ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* Fields: ink-ruled, lighter than the sheet, purple focus ring. */
html body .gg-dialog :is(label, .custom-list-field) { color: var(--gg-ink); font-weight: 700; }
html body .gg-dialog .custom-list-field em { color: var(--gg-ink-2); font-weight: 500; }
html body .gg-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  background: var(--gg-paper-field);
  border: 1.5px solid var(--gg-ink-2);
  border-radius: 10px;
  color: var(--gg-ink);
  font-family: var(--gg-font-case);
  font-weight: 500;
}
html body .gg-dialog :is(input, textarea)::placeholder { color: var(--gg-ink-3); opacity: 1; }
html body .gg-dialog :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--gg-accent);
  box-shadow: 0 0 0 3px rgba(113, 90, 184, .22);
}
html body .gg-dialog input[type="file"] { background: var(--gg-paper-field); border: 1.5px dashed var(--gg-rule); border-radius: 10px; color: var(--gg-ink-2); font-size: 12px; }
html body .gg-dialog input[type="checkbox"] { accent-color: var(--gg-accent); width: 16px; height: 16px; }
/* Pickable rows (friends, games, titles, reasons): white-ish slips on the sheet. */
html body .gg-dialog :is(.friend-compare-option, .reviews-friend-compare-option, .friend-item, .yearly-option,
  .selector-item, .downvote-reason-btn) {
  background: var(--gg-paper-field);
  border: 1.5px solid var(--gg-rule);
  border-radius: 10px;
  color: var(--gg-ink);
  box-shadow: none;
  transform: none;
}
html body .gg-dialog :is(.friend-compare-option, .reviews-friend-compare-option, .friend-item, .selector-item, .downvote-reason-btn):hover,
html body .gg-dialog .yearly-option:hover {
  background: var(--gg-paper-raised);
  border-color: var(--gg-accent);
  color: var(--gg-ink);
  transform: none;
}
html body .gg-dialog .selector-item.selected { background: rgba(113, 90, 184, .12); border-color: var(--gg-accent); }
html body .gg-dialog :is(.friend-compare-option span, .reviews-friend-compare-name, .friend-name, .yearly-option-name, .item-name) { color: var(--gg-ink); }
html body .gg-dialog :is(.friend-count, .yearly-option-score, .item-desc) { color: var(--gg-ink-2); }
html body .gg-dialog .item-score { color: var(--gg-press-accent); }
html body .gg-dialog .friend-pill { color: var(--gg-press-accent); border-color: rgba(91, 69, 166, .45); background: rgba(113, 90, 184, .1); }
html body .gg-dialog .yearly-option-cover { background: var(--gg-paper-2); color: var(--gg-ink-2); }
html body .gg-dialog .gg-dialog-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gg-accent); color: #fff; font-weight: 700; object-fit: cover;
}
/* Game search inside a dialog. */
html body .gg-dialog .search-results { background: var(--gg-paper-field); border: 1.5px solid var(--gg-rule); border-radius: 10px; }
html body .gg-dialog .search-results:empty { display: none; }
html body .gg-dialog .search-result-item { border-bottom: 1px solid var(--gg-rule); }
html body .gg-dialog .search-result-item:last-child { border-bottom: 0; }
html body .gg-dialog .search-result-item:hover { background: rgba(113, 90, 184, .1); }
html body .gg-dialog .result-name { color: var(--gg-ink); }
html body .gg-dialog .result-meta { color: var(--gg-ink-2); }
html body .gg-dialog .result-add-hint { font-size: 11px; font-weight: 700; color: var(--gg-press-accent); }
html body .gg-dialog .result-cover-placeholder { background: var(--gg-paper-2); color: var(--gg-ink-2); }
html body .gg-dialog .igdb-search-hint { color: var(--gg-ink-2); border-top-color: var(--gg-rule); }
html body .gg-dialog .divider { color: var(--gg-ink-2); }
html body .gg-dialog .divider::before, html body .gg-dialog .divider::after { background: var(--gg-rule); }
html body .gg-dialog .new-game-form { background: none; border: 0; border-top: 1px solid var(--gg-rule); border-radius: 0; padding: 16px 0 0; }
/* Spinners and the shop's result states, re-inked for a light ground. */
html body .gg-dialog :is(.compare-spinner, .reviews-compare-spinner, .status-spinner) { border-color: rgba(23, 20, 15, .14); border-top-color: var(--gg-accent); }
html body .gg-dialog .compare-loading { color: var(--gg-ink-2); }
html body .gg-dialog .status-icon.ok { color: var(--gg-ink-success); background: rgba(31, 122, 69, .1); border-color: rgba(31, 122, 69, .45); }
html body .gg-dialog .status-icon.bad { color: var(--gg-ink-danger); background: rgba(179, 38, 30, .08); border-color: rgba(179, 38, 30, .4); }
html body .gg-dialog .status-prize { color: var(--gg-press-accent); background: rgba(113, 90, 184, .12); border-color: rgba(91, 69, 166, .45); }
html body .gg-dialog .search-loading span { background: var(--gg-accent); }
/* Transient status ("Loading comparison...") is a light tag over the room,
   the same object the desk uses for its toasts. */
html body :is(.compare-navigate-card, .reviews-compare-navigate-card) {
  background: var(--gg-tag);
  color: var(--gg-tag-ink);
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .5);
}
html body :is(.compare-navigate-card, .reviews-compare-navigate-card) :is(.compare-spinner, .reviews-compare-spinner) {
  border-color: rgba(20, 18, 22, .15);
  border-top-color: var(--gg-accent);
}
@media (max-width: 520px) {
  html body .gg-dialog :is(.modal-header h2, h3, .compare-modal-title, .reviews-compare-modal-title, .friend-modal-title, .status-title) { font-size: 22px; }
}
/* Lists keeps two dialogs inside main, and its content-card CSS sets
   position: relative; z-index: 1 on main and on every main > *. That traps the
   yearly pick (inside #listsContent) under the sticky controls and footer, and
   turns the custom-list modal, a direct child, into an in-flow box. DOM order
   alone still paints main over the fixed cover background that precedes it. */
html body.lists-page.has-content-card > main,
html body.lists-page.has-content-card main > #listsContent { z-index: auto; }
html body.lists-page.has-content-card main > .yearly-modal { position: fixed; }
/* Calendar day: the header rule runs inside the card's padding, and the
   game field is a picker trigger styled as one more input. Its z-indexes are
   left alone; they are set around the picker that opens from it. */
html body .gg-dialog .cal-modal-top { margin: 0 16px 14px; padding: 16px 0 10px; border-bottom: 3px double var(--gg-ink); }
html body .gg-dialog .cal-game { background: var(--gg-paper-field); border: 1.5px solid var(--gg-ink-2); color: var(--gg-ink); }
html body .gg-dialog .cal-game.is-empty .cal-game-label { color: var(--gg-ink-3); }
html body .gg-dialog .cal-caret { border-color: var(--gg-ink-2); }
html body .gg-dialog .brk-row { background: var(--gg-paper-field); border: 1.5px solid var(--gg-rule); }
html body .gg-dialog .brk-row.is-editing { border-color: var(--gg-accent); }
html body .gg-dialog .brk-main:hover { background: var(--gg-paper-raised); }
html body .gg-dialog .brk-main.is-static:hover { background: none; }
html body .gg-dialog .brk-x { color: var(--gg-ink-2); }
html body .gg-dialog .log-msg.ok { color: var(--gg-ink-success); }
html body .gg-dialog .log-msg.err { color: var(--gg-ink-danger); }
/* Reviews' compare dialog also offers a taste-match invite under the list. */
html body .gg-dialog .reviews-compare-invite { border-top-color: var(--gg-rule); }
html body .gg-dialog .reviews-compare-invite-title { color: var(--gg-ink); }

/* ── Game pickers are the room, not the press ──
   Picking a game (background art, Add game, favourite game) is a
   collection action, so those dialogs carry gg-dialog--room beside the usual
   pair and are drawn in the room the cases sit in: dark stock, Archivo title
   over a single rule, no grain. Everything above reads its colours from the
   paper tokens, so the variant rebinds them on the card and only restates
   the few things that were drawn for a light ground. Lights down does not
   change it: it is already dark. */
html body .gg-dialog.gg-dialog--room {
  --gg-paper: var(--gg-room-2); --gg-paper-2: var(--gg-room-3); --gg-paper-field: var(--gg-room);
  --gg-paper-raised: var(--gg-room-3); --gg-paper-raised-rule: var(--gg-room-line-2);
  --gg-ink: #ecebef; --gg-ink-2: var(--gg-room-tx-2); --gg-ink-3: var(--gg-room-tx-3); --gg-rule: var(--gg-room-line);
  --gg-press-accent: var(--gg-accent-light); --gg-ink-danger: var(--gg-danger); --gg-ink-success: var(--gg-success, #28c76f);
  border: 1px solid var(--gg-room-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 60px -20px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
html body .gg-dialog.gg-dialog--room::before { content: none; }
html body .gg-dialog--room :is(.modal-header h2, h3) {
  font-family: var(--gg-font-case);
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}
html body .gg-dialog--room :is(.modal-header, .yearly-modal-header) { border-bottom: 1px solid var(--gg-room-line); }
html body .gg-dialog--room :is(.modal-close, .close, .yearly-modal-close):hover { background: rgba(255, 255, 255, .06) !important; }
html body .gg-dialog--room :is(.btn, .shop-btn):hover { border-color: var(--gg-accent) !important; }
html body .gg-dialog--room .search-result-item:hover { background: rgba(113, 90, 184, .16); }
html body .gg-dialog--room .result-cover { border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
html body .gg-dialog--room :is(.compare-spinner, .reviews-compare-spinner, .status-spinner) { border-color: rgba(255, 255, 255, .14); border-top-color: var(--gg-accent); }

/* ── Lights down: carbon editorial stock ──
   The account menu's "Lights down" sets html[data-paper="carbon"] (remembered
   per device, applied in header.html before anything paints). Every paper and
   gloss surface reads its colours from the tokens swapped here, so the press
   keeps its type, rules and layout and only the stock changes: warm carbon
   with soft ivory ink. Games owns its neutral grey palette in games.css.
   What follows the tokens is the short list of things that
   were printed for a light ground and do not come from a token. */
html[data-paper="carbon"] {
  --gg-paper: #221e19; --gg-paper-2: #2e2920; --gg-paper-field: #2a251e;
  --gg-paper-raised: #332d24; --gg-paper-raised-rule: #4a4337;
  --gg-ink: #ece5d6; --gg-ink-2: #b3a994; --gg-ink-3: #8f8572; --gg-rule: #423b2f;
  --gg-press-accent: #c0b1f1; --gg-ink-danger: #f19a8f; --gg-ink-success: #6fd6a0;
  --gg-gloss: #1f1e23; --gg-gloss-ink: #ecebef; --gg-gloss-ink-2: #a9a6b2; --gg-gloss-rule: #36343c;
  /* No newsprint on carbon: the light stock carries it, the dark one stays plain. */
  --gg-newsprint: none;
  --gg-newsprint-edge: none;
  /* Reviews' desk lamp and mat on carbon: dimmer light, and a mat a step
     below the dark clippings so they still lift off it. */
  --gg-lamp-pool: radial-gradient(ellipse var(--gg-lamp-reach) var(--gg-lamp-depth) at var(--gg-lamp-x) 195px, rgba(255, 224, 188, .05), rgba(255, 205, 153, .022) 32%, transparent 78%),
                  radial-gradient(ellipse 140% 110% at 30% 20%, transparent 45%, rgba(0, 0, 0, .55) 100%);
  --gg-mat: #121014;
  --gg-lamp-on-mat: radial-gradient(ellipse var(--gg-lamp-reach) var(--gg-lamp-depth) at var(--gg-lamp-x) 0, rgba(255, 224, 188, .055), rgba(255, 205, 153, .022) 32%, rgba(255, 205, 153, .005) 65%, transparent 90%),
                   radial-gradient(1800px 1500px at var(--gg-lamp-x) 0, transparent 30%, rgba(0, 0, 0, .38) 100%);
  --gg-lamp-on-paper: radial-gradient(ellipse var(--gg-lamp-reach) var(--gg-lamp-depth) at var(--gg-lamp-x) 0, rgba(255, 224, 188, .035), rgba(255, 205, 153, .015) 28%, rgba(255, 205, 153, .004) 58%, transparent 88%);
  --gg-lamp-paper-edge: rgba(255, 249, 236, .08);
}
/* The wordmark's "Grades" is set in the paper colour; it stays light. */
html[data-paper="carbon"] .gg-wordmark .gg-wm-grades { color: #e6e3dd; }
html[data-paper="carbon"] .gg-noart {
  background: linear-gradient(160deg, #27272c, #18181b);
  color: var(--gg-ink-3);
}
/* Grain darkens light stock; on dark stock it has to lighten, faintly. */
html[data-paper="carbon"] :is(.gg-paper, .gg-guide)::before { mix-blend-mode: screen; filter: invert(1); opacity: .22; }
html[data-paper="carbon"] :is(.gg-paper, .gg-dialog, .feed-item.gg-press, .review-card.gg-article) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 48px -20px rgba(0, 0, 0, .9);
}
/* Scores: the deeper "printed" hues are for ivory. On carbon, the site's own. */
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) :is(.gg-pscore b, .gg-pnum) { color: var(--c); }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) :is(.gg-pscore .pb i, .gg-pfill) { background: var(--c); }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) .gg-pscore .pb { background: rgba(255, 255, 255, .14); }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) .gg-pscore.na b { color: #7d7888; }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) :is(.gg-pscore.p10 b, .gg-pnum.p10) { background: var(--gg-gold-metallic); -webkit-background-clip: text; background-clip: text; }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) :is(.gg-pscore.p10 .pb i, .gg-pfill.p10) { background: linear-gradient(90deg, #d4b44c 0%, #fbf2d4 50%, #d4b44c 100%) !important; }
/* Attribute glyph scales print empty pips in ink-at-16%; on carbon, light-at-16%. */
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) .attr-scale i { background: rgba(255, 255, 255, .16); }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) .attr-scale i.on { background: var(--gg-ink); }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide) .attr-scale.is-average i { background: linear-gradient(90deg, var(--gg-ink) 0 var(--fill, 0%), rgba(255, 255, 255, .16) var(--fill, 0%) 100%); }
/* The article: the grade box's white wash turned it into a grey slab. */
html[data-paper="carbon"] .gg-gradebox { background: rgba(255, 255, 255, .025); }
html[data-paper="carbon"] .gg-gb-comm b.is-above { color: #6fd6a0; }
html[data-paper="carbon"] .gg-gb-comm b.is-below { color: #f19a8f; }
/* Spoilers are a dark bar over light paper; on carbon they need a light one. */
/* Lists prints its entries and thoughts on the paper tokens without being .gg-paper. */
html[data-paper="carbon"] :is(.gg-paper, .gg-guide, .gg-dialog, body.lists-page main) .spoiler:not(.is-revealed) { background-color: #525259; }
html[data-paper="carbon"] :is(.gg-paper, .gg-guide, .gg-dialog, body.lists-page main) .spoiler:not(.is-revealed):hover { background-color: #62626a; }
/* The guide booklet: its default band and panel seams were dark-on-light. */
html[data-paper="carbon"] .gg-guide { --gg-band: #34313b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -20px rgba(0, 0, 0, .8); }
html[data-paper="carbon"] .gg-gpanel + .gg-gpanel::before { background: rgba(255, 255, 255, .07); }
html[data-paper="carbon"] .gg-gpanel + .gg-gpanel { box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .5); }
html[data-paper="carbon"] .gg-stamps em.u { color: #b3a4ee; }
html[data-paper="carbon"] .gg-stamps em.s { color: #f19a8f; }
html[data-paper="carbon"] .gg-stamps em.none { color: #7d7888; }
html[data-paper="carbon"] .gg-gshot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-paper="carbon"] .gg-sale { color: #f0857c; }
html[data-paper="carbon"] .gg-gattrs .community-attr .v.is-empty { color: #7d7888; }
html[data-paper="carbon"] .gg-gpf .pf-row-item.is-played { outline-color: var(--gg-gloss-ink); }
/* Danger/selected tints in dialogs were mixed for a light ground. */
html[data-paper="carbon"] .gg-dialog .btn.danger { background: rgba(241, 154, 143, .1) !important; }
html[data-paper="carbon"] .gg-dialog .selector-item.selected { background: rgba(192, 177, 241, .12); }
html[data-paper="carbon"] .gg-dialog .friend-pill, html[data-paper="carbon"] .gg-dialog .status-prize { border-color: rgba(192, 177, 241, .45); background: rgba(192, 177, 241, .1); }
html[data-paper="carbon"] .gg-dialog { color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) {
  html.gg-paper-switching :is(.gg-paper, .gg-guide, .gg-dialog, .feed-item.gg-press, .review-card.gg-article) { transition: background-color .25s ease, color .25s ease; }
}
/* The menu's switch: a state pill rather than a second line of text. */
html body .avatar-menu .gg-menu-paper .gg-paper-state { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-room-tx-3); border: 1px solid var(--gg-room-line-2); border-radius: 999px; padding: 2px 8px; }
html body .avatar-menu .gg-menu-paper .gg-paper-state::before { content: "Off"; }
html body .avatar-menu .gg-menu-paper[aria-checked="true"] .gg-paper-state { color: #fff; background: var(--gg-accent); border-color: var(--gg-accent); }
html body .avatar-menu .gg-menu-paper[aria-checked="true"] .gg-paper-state::before { content: "On"; }

/* ── Lists: the chart page (partials/chart.html) ──
   The top three on a podium in their own landscape art, the full ranking
   printed as a chart on paper, and in a comparison the friend's chart beside
   yours. Desktop: podium | chart, or (yours: podium over chart) | theirs. */
html body .gg-charts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; max-width: var(--gg-content-width); box-sizing: border-box; margin: 4px auto 0; padding: 0 var(--gg-gutter) 40px; }
html body .gg-charts-main { display: grid; gap: 24px; min-width: 0; }
html body .gg-charts > * { min-width: 0; }
@media (max-width: 1000px) { html body .gg-charts { grid-template-columns: minmax(0, 1fr); } }
/* Compare the rankings themselves, sharing row heights even when one title
   or reviewer name wraps. Keep the established mobile layout until its
   side-by-side design is ready for UAT. */
@media (min-width: 769px) {
html body .gg-compare-mobile-podium { display: none; }
html body .gg-charts.is-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
html body .gg-charts.is-compare > .gg-charts-main { display: contents; }
@supports (grid-template-rows: subgrid) {
  html body .gg-charts.is-compare { grid-template-rows: auto repeat(var(--gg-compare-rows), auto); }
  html body .gg-charts.is-compare .gg-chart { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  html body .gg-charts.is-compare .gg-crows { display: contents; }
}
@media (max-width: 1100px) {
  html body .gg-charts.is-compare .gg-crow { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; }
  html body .gg-charts.is-compare .gg-crow-n { grid-column: 1; grid-row: 1; align-self: start; }
  html body .gg-charts.is-compare .gg-crow-art { grid-column: 2; grid-row: 1; width: min(100%, 180px); }
  html body .gg-charts.is-compare .gg-crow-score { grid-column: 3; grid-row: 1; align-self: start; }
  html body .gg-charts.is-compare .gg-crow-body { grid-column: 2 / -1; grid-row: 2; }
}
}

html body .gg-podium { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: start; }
html body .gg-pod { display: grid; gap: 5px; min-width: 0; }
html body .gg-pod-1 { grid-column: 1 / -1; }
html body .gg-pod-art { position: relative; display: block; aspect-ratio: 460 / 215; border-radius: 6px; overflow: hidden; background: var(--gg-room-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 36px -18px rgba(0, 0, 0, .85); }
html body .gg-pod-art > img, html body .gg-pod-art > .gg-noart { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
html body .gg-pod-art > .gg-noart { display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: linear-gradient(160deg, #24212b, #121015); color: #7d7888; font: 800 18px/1.2 var(--gg-font-case); text-align: center; }
html body .gg-pod-art:hover > img, html body .gg-pod-art:focus-visible > img { transform: scale(1.025); }
/* A low corner shade so a white numeral holds on bright art. */
html body .gg-pod-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(20deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 42%); }
html body .gg-pod-no { position: absolute; left: 14px; bottom: 4px; z-index: 1; font: 900 italic 64px/.8 var(--gg-font-case); font-variant-numeric: lining-nums; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .7); pointer-events: none; }
html body .gg-pod-1 .gg-pod-no { font-size: 112px; color: var(--gg-gold); }
html body .gg-pod-score { position: absolute; right: 12px; bottom: 12px; z-index: 1; background: rgba(13, 12, 16, .8); padding: 8px 10px 7px; border-radius: 10px; pointer-events: none; }
html body .gg-pod-1 .gg-pod-score .gg-pscore { font-size: 30px; }
html body .gg-pod-1 .gg-pod-score .gg-pscore .pb { width: 4ch; }
html body .gg-pod-name { font: 800 16px/1.2 var(--gg-font-case); color: var(--gg-text); text-decoration: none; margin-top: 4px; overflow-wrap: anywhere; }
html body .gg-pod-1 .gg-pod-name { font: 700 26px/1.1 var(--gg-font-serif); letter-spacing: -.012em; }
html body .gg-pod-name:hover { color: var(--gg-accent-light); }
html body .gg-pod-sub { font: 500 12.5px/1.3 var(--gg-font-case); color: var(--gg-room-tx-3); }
html body .gg-pod-quote { margin: 8px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--gg-accent); }
html body .gg-pod-quote p { margin: 0; font: italic 400 16.5px/1.55 var(--gg-font-serif); color: var(--gg-room-tx-2); }
html body .gg-pod-quote a { display: inline-block; margin-top: 8px; font: 700 11px/1 var(--gg-font-case); letter-spacing: .08em; text-transform: uppercase; color: var(--gg-accent-light); text-decoration: none; }
html body .gg-pod-quote a:hover { text-decoration: underline; }

html body .gg-chart { padding: 18px 20px 6px; }
html body .gg-chart-h h2 { margin: 0 0 4px; font: italic 600 30px/1.05 var(--gg-font-serif); letter-spacing: -.012em; color: var(--gg-ink); text-transform: none; overflow-wrap: anywhere; }
html body .gg-chart-h .gg-dateline { margin-bottom: 10px; }
html body .gg-crows { list-style: none; margin: 0; padding: 0; }
html body .gg-crow { position: relative; display: grid; grid-template-columns: 30px 128px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--gg-rule); }
html body .gg-crow-n { font: 800 22px/1 var(--gg-font-case); font-variant-numeric: lining-nums tabular-nums; color: var(--gg-ink-2); text-align: right; }
html body .gg-crow:nth-child(-n+3) .gg-crow-n { color: var(--gg-ink); }
html body .gg-crow-art { display: block; aspect-ratio: 460 / 215; border-radius: 3px; overflow: hidden; background: var(--gg-paper-2); box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .2); }
html body .gg-crow-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .gg-crow-art > .gg-noart { display: grid; place-items: center; height: 100%; padding: 4px; box-sizing: border-box; font: 700 9px/1.1 var(--gg-font-case); color: var(--gg-ink-2); text-align: center; overflow: hidden; }
html body .gg-crow-body { display: grid; gap: 3px; min-width: 0; }
html body .gg-crow-t { font: 700 17px/1.15 var(--gg-font-serif); color: var(--gg-ink); text-decoration: none; overflow-wrap: anywhere; }
/* The whole row opens the review; the title's link is stretched over it. */
html body .gg-crow-t::after { content: ""; position: absolute; inset: 0; }
html body .gg-crow:hover .gg-crow-t { color: var(--gg-press-accent); }
html body .gg-crow-t:focus-visible { outline: none; }
html body .gg-crow-t:focus-visible::after { outline: 2px solid var(--gg-press-accent); outline-offset: 2px; border-radius: 4px; }
html body .gg-crow-w { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12px/1.3 var(--gg-font-case); color: var(--gg-ink-2); }
html body .gg-crow-edit { position: relative; z-index: 1; font-weight: 700; color: var(--gg-press-accent); text-decoration: none; }
html body .gg-crow-edit:hover { text-decoration: underline; }
/* A game the other list also ranks: stamped with their rank, and ruled. */
html body .gg-crow-mark { font: 700 11px/1 var(--gg-font-case); letter-spacing: .03em; color: var(--gg-press-accent); border: 1.5px solid currentColor; border-radius: 2px; padding: 3px 6px; transform: rotate(-1.5deg); white-space: nowrap; }
html body .gg-crow.is-shared::before { content: ""; position: absolute; left: -20px; top: 10px; bottom: 10px; width: 3px; background: var(--gg-accent); border-radius: 0 2px 2px 0; }
html body .gg-crow-dims { display: flex; flex-wrap: wrap; gap: 5px 12px; font: 500 11.5px/1.35 var(--gg-font-case); color: var(--gg-ink-2); }
html body .gg-crow-dims b { font-size: 12px; letter-spacing: 0; color: var(--gg-ink); }
html body .gg-crow-score .gg-pscore { font-size: 21px; }
html body .gg-chart-empty { text-align: center; color: var(--gg-room-tx-3); margin: 40px 0; }
@media (max-width: 640px) {
  html body .gg-podium { gap: 16px 12px; }
  html body .gg-pod-no { font-size: 50px; left: 10px; }
  html body .gg-pod-1 .gg-pod-no { font-size: 84px; }
  html body .gg-pod-score { right: 8px; bottom: 8px; padding: 6px 8px 5px; }
  html body .gg-pod:not(.gg-pod-1) .gg-pod-score .gg-pscore { font-size: 17px; }
  html body .gg-pod:not(.gg-pod-1) .gg-pod-name { font-size: 14px; }
  html body .gg-pod-1 .gg-pod-name { font-size: 22px; }
  html body .gg-chart { padding: 14px 14px 4px; }
  html body .gg-chart-h h2 { font-size: 26px; }
  html body .gg-crow { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; }
  html body .gg-crow-n { grid-column: 1; grid-row: 1; align-self: start; margin-top: 6px; }
  html body .gg-crow-art { grid-column: 2; grid-row: 1; width: min(100%, 180px); }
  html body .gg-crow-score { grid-column: 3; grid-row: 1; align-self: start; }
  html body .gg-crow-body { grid-column: 2 / -1; grid-row: 2; }
  html body .gg-crow-n { font-size: 18px; }
  html body .gg-crow-t { font-size: 16px; }
  html body .gg-crow.is-shared::before { left: -14px; }
  html body .gg-crow-dims { display: flex; }
}
@media (prefers-reduced-motion: reduce) { html body .gg-pod-art > img { transition: none; } }
/* Under the podium: the #1 of each of the viewer's other charts. */
html body .gg-leaders { border-top: 1px solid var(--gg-room-line); padding-top: 14px; }
html body .gg-leaders-h { margin: 0 0 12px; font: 700 11px/1.2 var(--gg-font-case); letter-spacing: .12em; text-transform: uppercase; color: var(--gg-room-tx-3); }
html body .gg-leaders ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html body .gg-leader { display: grid; gap: 4px; text-decoration: none; color: var(--gg-text); }
html body .gg-leader-art { display: block; aspect-ratio: 460 / 215; border-radius: 4px; overflow: hidden; background: var(--gg-room-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
html body .gg-leader-art > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
html body .gg-leader-art > .gg-noart { display: grid; place-items: center; height: 100%; font: 700 11px/1.2 var(--gg-font-case); color: #7d7888; padding: 6px; text-align: center; box-sizing: border-box; }
html body .gg-leader:hover .gg-leader-art > img { transform: scale(1.04); }
html body .gg-leader-k { margin-top: 4px; font: 700 10.5px/1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; color: var(--gg-accent-light); }
html body .gg-leader-t { font: 700 14px/1.2 var(--gg-font-case); overflow-wrap: anywhere; }
html body .gg-leader:hover .gg-leader-t { color: var(--gg-accent-light); }
html body .gg-leader-v { display: flex; align-items: center; gap: 8px; }
html body .gg-leader-v em { font: 700 10px/1 var(--gg-font-case); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-gold); border: 1px solid rgba(243, 199, 102, .45); border-radius: 999px; padding: 3px 7px; }
@media (max-width: 640px) { html body .gg-leaders ul { gap: 10px; } html body .gg-leader-t { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { html body .gg-leader-art > img { transition: none; } }
/* The article's byline: the reviewer (to their profile), the dateline, and on
   your own review the way back into the editor. Replaces the header card. */
.gg-article .gg-abyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.gg-article .gg-abyline .gg-dateline { margin-top: 0; }
.gg-article .gg-aauthor { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--gg-ink-2); font: 500 13px/1.2 var(--gg-font-case); }
.gg-article .gg-aauthor b { color: var(--gg-ink); font-weight: 700; }
.gg-article .gg-aauthor:hover b { color: var(--gg-press-accent); }
.gg-article .gg-aavatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px var(--gg-paper), 0 0 0 2.5px var(--gg-rule); }
.gg-article .gg-aavatar-fallback { display: grid; place-items: center; background: var(--gg-accent); color: #fff; font: 700 14px/1 var(--gg-font-case); }
.gg-article .gg-aedit { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--gg-ink-2); color: var(--gg-ink); font: 700 12.5px/1 var(--gg-font-case); text-decoration: none; }
.gg-article .gg-aedit:hover { border-color: var(--gg-press-accent); color: var(--gg-press-accent); }
.gg-article .gg-aedit:focus-visible { outline: 2px solid var(--gg-press-accent); outline-offset: 2px; }

/* ── The review article, refined ──
   Newsprint: a faint stock (pulp fibres, a soft mottle, the odd ink fleck) and
   an edge that darkens a touch, under the shared grain. Tokens, so Lights down
   swaps in its own. Kept to the article: it is the one page that is a newspaper. */
html body .review-card.gg-article { background-color: var(--gg-paper); background-image: var(--gg-newsprint-edge), var(--gg-newsprint); }
/* Byline: reviewer and Edit share the first line at every width, so Edit never
   wraps on its own; the dateline sits between them on desktop, under on phones. */
html body .gg-article .gg-abyline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "author date edit"; align-items: center; gap: 8px 16px; }
html body .gg-article .gg-aauthor { grid-area: author; white-space: nowrap; }
html body .gg-article .gg-abyline .gg-dateline { grid-area: date; min-width: 0; }
html body .gg-article .gg-aedit { grid-area: edit; white-space: nowrap; }
@media (max-width: 640px) {
  html body .gg-article .gg-abyline { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "author edit" "date date"; }
}
/* The grade box. The lead row's old `> span` rule tracked the number itself at
   .16em ("1 0"); the label is now its own eyebrow and the number is set tight,
   over a bar that runs the width of the box. */
html body .gg-gb-lead { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; padding: 12px 0 14px; }
html body .gg-gb-lead > .gg-gb-lead-k { font: 800 10px/1 var(--gg-font-case); letter-spacing: .16em; text-transform: uppercase; color: var(--gg-ink-2); }
html body .gg-gb-lead .gg-pscore { font-size: 68px; letter-spacing: -.035em; line-height: .86; justify-items: stretch; gap: 12px; }
html body .gg-gb-lead .gg-pscore b { font-weight: 800; letter-spacing: -.035em; justify-self: start; }
html body .gg-gb-lead .gg-pscore .pb { width: 100%; height: 5px; }
html body .gg-gb-row > div { gap: 8px; padding: 12px 4px 13px; }
html body .gg-gb-row .k { font-size: 9.5px; letter-spacing: .12em; }
html body .gg-gb-row .gg-pscore { font-size: 27px; letter-spacing: -.02em; gap: 7px; }
html body .gg-gb-row .gg-pscore .pb { width: 4ch; height: 4px; }
/* Actions: View Game across, the three links sharing one row beneath it. */
html body .gg-article .gg-gb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html body .gg-article .gg-gb-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; }
html body .gg-article .gg-gb-actions .btn.is-primary { flex-basis: 100%; }
html body .gg-article .gg-gb-actions .btn.is-icon { flex: 0 0 44px; padding: 0; }
html body .gg-article .gg-gb-actions .btn.is-icon .pf-icon { width: 20px; height: 20px; }





/* The article flows around a stationary scorecard, then uses the full sheet. */
@media (min-width: 901px) {
  html body .gg-article .gg-acols { display: flow-root !important; }
  html body .gg-article .gg-gradebox { float: right; position: static; width: 300px; box-sizing: border-box; margin: 0 0 24px 28px; }
  html body .gg-article .gg-abody { display: contents; }
  html body .gg-article .gg-prose { max-width: none; }
  html body .gg-article .gg-prose :is(blockquote, pre, table) { display: flow-root; }
  html body .gg-article .gg-avideo { clear: both; padding-top: 18px; }
}
html body .gg-article .gg-prose img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  html body .gg-article .gg-gradebox { display: contents; }
  html body .gg-article .gg-gb-summary { grid-row: 1; border: 2px solid var(--gg-ink); padding: 12px 14px; }
  html body .gg-article .gg-abody { grid-row: 2; }
  html body .gg-article .gg-gb-details { grid-row: 3; border-top: 1px solid var(--gg-rule); padding-top: 12px; }
}

@media (max-width: 900px) {
  html body .gg-article .gg-gb-lead { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 0; }
  html body .gg-article .gg-gb-lead .gg-pscore { font-size: 46px; gap: 6px; min-width: 64px; }
  html body .gg-article .gg-gb-row .k { font-size: 11px; letter-spacing: 0; }
}

/* A vote control that cannot be used (your own review, or signed out) shows
   its score but does not offer the arrows. The buttons are rendered
   `disabled`, so no click handler on any page can fire for them. */
html body .vote-control[data-disabled="1"] .vote-btn,
html body .vote-control .vote-btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* A game's name is printed large in a few places with nothing else to wrap
   at. An unbroken name ran those 1,000-3,000px wide and panned the page
   sideways; break inside the word only when nothing else fits. */
html body :is(.gg-headline, .desk-title, .desk-kick, .desk-meta, .gg-kick, .gg-press-ear, .gg-press-dateline) { overflow-wrap: anywhere; }