/* The friend comparison as a head-to-head (/compare/<user>).
   One rule runs through every part of it: you are on the LEFT and PURPLE,
   your friend is on the RIGHT and RUST, and agreement sits in the middle in
   plain ink. Shape says it too: your marker is a circle, theirs a square.
   The tug of war, the dumbbells, the stickers on the winning grade and the
   gap arrows all obey it, so once the hero has taught it nothing below needs
   a legend. Score numbers keep the site's ramp (--cp on paper, --c in carbon)
   so a grade reads the same colour here as anywhere else.

   Reading order is fun first, then fast: the matchup and the tug of war,
   four headline clippings, the tale of the tape, then the ledger, reached
   in well under a screen and a half on a phone. */

body.friend-compare-page {
  --compare-shell-max: 1160px;
  /* Room (dark) and paper hues for each side. */
  --cmp-you: #a08cf0;
  --cmp-them: #eba779;
  --cmp-same: #d9d1c1;
  --cmp-you-ink: var(--gg-press-accent);
  --cmp-them-ink: #9b5028;
  --cmp-same-ink: var(--gg-ink-3);
}
html[data-paper="carbon"] body.friend-compare-page { --cmp-them-ink: #e6a878; }
/* The paper's tooth breaking up a stamp's ink: speckled holes, mostly solid. */
body.friend-compare-page { --cmp-ink-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='46'%3E%3Cfilter id='t' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 -2.05'/%3E%3C/filter%3E%3Crect width='90' height='46' filter='url(%23t)'/%3E%3C/svg%3E"); }

.cmp { gap: 14px; }
/* compare_styles pushes main down by a header height, but the header is in the
   page's flow here, not fixed, so that was a second header's worth of empty
   room above the matchup. */
@media (min-width: 681px) { body.friend-compare-page main { margin-top: 16px; } }
.cmp h1, .cmp h2 { margin: 0; }
.cmp-na { color: var(--gg-ink-3); }
.compare-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.friend-compare-page :is(a, summary, button):focus-visible { outline: 2px solid var(--gg-accent-light); outline-offset: 3px; }

/* ── Score numbers ─────────────────────────────────────────────── */
.cmp-num { font: 800 22px/1 var(--gg-font-case); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; color: var(--cp, var(--gg-ink)); }
.cmp-num.sm { font-size: 15px; letter-spacing: -.01em; }
.cmp-num.na { color: var(--gg-ink-3); font-weight: 500; }
.cmp-num.p10 { background: var(--gg-gold-burnished); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-paper="carbon"] .cmp-num { color: var(--c, var(--gg-ink)); }
html[data-paper="carbon"] .cmp-num.p10 { background: linear-gradient(180deg, #fff1c4, #f3c766 55%, #d7a73a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp-num.na { background: none; }

/* ── The dumbbell: one 0-10 scale, both grades, the gap between ── */
.cmp-bell { position: relative; display: block; height: 22px; min-width: 0; }
.cmp-bell-track { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; border-radius: 2px; background: var(--gg-rule); }
.cmp-bell-track::after { content: ''; position: absolute; left: 50%; top: -3px; height: 8px; border-left: 1px solid var(--gg-rule); }
.cmp-bell-bar { position: absolute; top: calc(50% - 3px); height: 6px; border-radius: 6px; transform-origin: left center; }
.cmp-bell-bar.is-you { background: linear-gradient(90deg, color-mix(in srgb, var(--cmp-them-ink) 55%, transparent), color-mix(in srgb, var(--cmp-you-ink) 80%, transparent)); }
.cmp-bell-bar.is-them { background: linear-gradient(90deg, color-mix(in srgb, var(--cmp-you-ink) 55%, transparent), color-mix(in srgb, var(--cmp-them-ink) 80%, transparent)); }
.cmp-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--gg-paper); }
.cmp-dot.is-you { background: var(--cmp-you-ink); }
.cmp-dot.is-them { background: var(--cmp-them-ink); border-radius: 2px; }
.cmp-dot.is-match { width: 14px; height: 14px; background: linear-gradient(90deg, var(--cmp-you-ink) 50%, var(--cmp-them-ink) 50%); box-shadow: 0 0 0 2px var(--gg-paper), 0 0 0 4px color-mix(in srgb, var(--gg-ink-success) 45%, transparent); }

/* ── The gap mark: points at whoever rated it higher, louder as it grows ──
   Printed, not a pill. Under two points it is just type in that side's ink;
   from two it is boxed in a rule; from three it is rubber-stamped, in the
   editor's FILED-stamp language: a double rule in ink, multiplied into the
   paper, pressed a little crooked, the ink broken up by the paper's tooth.
   It leans the same way as the row's sticker, one hand applying both;
   marks leaning in opposite directions side by side read as a glitch. An exact
   match is a label set between two hairlines, the way a box score marks a tie. */
.cmp-gap { --side-ink: var(--gg-ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 52px; padding: 4px 6px; color: var(--side-ink); font: 700 14px/1 var(--gg-font-case); font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .15s ease; }
.cmp-gap i { font-style: normal; font-size: 10px; }
.cmp-gap.is-you { --side-ink: var(--cmp-you-ink); }
.cmp-gap.is-them { --side-ink: var(--cmp-them-ink); }
.cmp-gap[data-heat="1"] { font-weight: 600; opacity: .85; }
.cmp-gap[data-heat="2"] { font-weight: 800; }
.cmp-gap[data-heat="3"] { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--side-ink); border-radius: 2px; }
.cmp-gap[data-heat="3"], .cmp-gap[data-heat="4"] { min-width: 44px; }
.cmp-gap[data-heat="4"] { padding: 4px 7px 3px; border: 3.5px double var(--side-ink); border-radius: 4px; background: color-mix(in srgb, var(--side-ink) 13%, transparent); font-weight: 900; font-size: 16px; transform: rotate(-4deg); mix-blend-mode: multiply;
  -webkit-mask-image: var(--cmp-ink-tooth); mask-image: var(--cmp-ink-tooth); -webkit-mask-size: 90px 46px; mask-size: 90px 46px; }
html[data-paper="carbon"] .cmp-gap[data-heat="4"] { mix-blend-mode: normal; }
.cmp .cmp-gap.is-same { min-width: 0; padding: 3px 1px 2px; border-block: 1px solid currentColor; color: var(--gg-ink-2); font: 700 10px/1.2 var(--gg-font-case); letter-spacing: .16em; text-transform: uppercase; }
.cmp-gap.is-na { color: var(--gg-ink-3); font-weight: 500; }

/* ── Avatars ─────────────────────────────────────────────────── */
.cmp-avatar { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; color: #fff; font: 800 12px/1 var(--gg-font-case); box-shadow: 0 0 0 2px var(--side, var(--cmp-you)); }
.cmp-avatar.is-you { --side: var(--cmp-you); background: var(--gg-accent); }
.cmp-avatar.is-them { --side: var(--cmp-them); background: #9b5028; border-radius: 10px; }

/* ── Hero: the matchup ───────────────────────────────────────── */
.cmp-hero { position: relative; padding: 14px 26px 16px; border: 1px solid var(--gg-room-line-2); border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(560px 300px at 0% 0%, color-mix(in srgb, var(--cmp-you) 20%, transparent), transparent 70%),
    radial-gradient(560px 300px at 100% 0%, color-mix(in srgb, var(--cmp-them) 17%, transparent), transparent 70%),
    linear-gradient(180deg, var(--gg-room-3), var(--gg-room-2)); text-align: center; }
.cmp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-hero .compare-back-link { margin: 0; font-size: 12px; }
.cmp-eyebrow { margin: 0; color: var(--gg-room-tx-3); font: 700 11px/1 var(--gg-font-case); letter-spacing: .2em; text-transform: uppercase; }
.cmp-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 26px; max-width: 820px; margin: 6px auto 0; }
.cmp-player { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--gg-text); text-decoration: none; }
.cmp-player.is-you { flex-direction: row-reverse; text-align: right; }
.cmp-player .cmp-avatar { width: 60px; height: 60px; font-size: 25px; box-shadow: 0 0 0 3px var(--side), 0 12px 30px -10px var(--side); }
.cmp-player .cmp-avatar.is-them { border-radius: 16px; }
.cmp-player-copy { display: grid; gap: 5px; min-width: 0; }
.cmp-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 21px/1.1 var(--gg-font-case); }
.cmp-player.is-you .cmp-player-name { color: var(--cmp-you); }
.cmp-player.is-them .cmp-player-name { color: var(--cmp-them); }
.cmp-player-avg { min-height: 1em; color: var(--gg-room-tx-3); font: 600 12px/1 var(--gg-font-case); letter-spacing: .04em; }
.cmp-player-avg b { color: var(--gg-text); font-weight: 800; }
.cmp-player:hover .cmp-player-name { text-decoration: underline; text-underline-offset: 4px; }

/* The match as the site's rating-box sticker: tag stock, ink border, GG mark. */
.cmp-meter { --match: 0; display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; padding: 11px 15px 9px 13px; background: var(--gg-tag); color: var(--gg-tag-ink); border: 3px solid var(--gg-tag-ink); border-radius: 8px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.7); transform: rotate(-2deg); text-align: left; }
.cmp-meter-n { grid-row: span 2; font: 900 52px/.85 var(--gg-font-case); font-stretch: 112%; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.cmp-meter-n small { font-size: .45em; letter-spacing: 0; }
.cmp-meter-g { font: 900 15px/1 var(--gg-font-case); font-stretch: 125%; letter-spacing: .1em; border-bottom: 2px solid currentColor; padding-bottom: 3px; justify-self: start; }
.cmp-meter-l { font: 700 10px/1.1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; padding-top: 4px; }
.cmp-meter-m { grid-column: 1 / -1; height: 6px; margin-top: 9px; border-radius: 999px; background: rgba(20,18,22,.12); overflow: hidden; }
.cmp-meter-m i { display: block; height: 100%; width: calc(var(--match) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--gg-accent), #9b5028); transform-origin: left; }
.cmp-meter.is-empty .cmp-meter-n { color: #8b8792; }

.cmp-verdict { margin-top: 14px !important; color: var(--gg-text); font: 700 clamp(28px, 3.6vw, 40px)/1.05 var(--gg-font-serif); letter-spacing: -.02em; }
.cmp-verdict-line { margin: 5px 0 0; color: var(--gg-room-tx-2); font: italic 400 16px/1.4 var(--gg-font-serif); }

/* ── The tug of war: every shared cover, pulled toward whoever liked it more ── */
.cmp-spread { position: relative; margin-top: 16px; }
.cmp-tally-key, .cmp-spread-cols { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.cmp-tally-key { margin-bottom: 8px; font: 700 11px/1.2 var(--gg-font-case); letter-spacing: .05em; text-transform: uppercase; }
.cmp-tally-key > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cmp-tally-key > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tally-key i { font-style: normal; }
.cmp-tally-key b { font: 800 26px/1 var(--gg-font-case); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cmp-tally-key .is-you { grid-column: 1 / 5; color: var(--cmp-you); }
.cmp-tally-key .is-same { grid-column: 5; justify-content: center; color: var(--cmp-same); }
.cmp-tally-key .is-them { grid-column: 6 / 10; flex-direction: row-reverse; color: var(--cmp-them); }
.cmp-spread-cols { --tile-h: 36px; }
.cmp-col { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.cmp-col.is-you { --side: var(--cmp-you); }
.cmp-col.is-same { --side: var(--cmp-same); }
.cmp-col.is-them { --side: var(--cmp-them); }
.cmp-col-stack { display: flex; flex-direction: column-reverse; gap: 4px; min-height: calc(var(--peak) * (var(--tile-h) + 4px) + 4px); padding: 4px; border-radius: 8px 8px 0 0; border-bottom: 3px solid var(--side); background: color-mix(in srgb, var(--side) 7%, transparent); }
.cmp-col.is-same .cmp-col-stack { background: color-mix(in srgb, var(--side) 12%, transparent); }
.cmp-col.is-empty .cmp-col-stack { border-bottom-color: color-mix(in srgb, var(--side) 35%, transparent); }
.cmp-chip { position: relative; display: block; flex: none; height: var(--tile-h); border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--side) 75%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.cmp-chip img, .cmp-chip .is-blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-chip .is-blank { display: grid; place-items: center; background: var(--gg-room-3); color: var(--gg-room-tx-3); font: 800 14px/1 var(--gg-font-serif); }
.cmp-chip:hover, .cmp-chip:focus-visible { transform: scale(1.1); z-index: 2; box-shadow: 0 0 0 2px var(--side), 0 8px 18px rgba(0,0,0,.5); }
.cmp-chip-more { flex: none; height: 24px; border: 1px dashed color-mix(in srgb, var(--side) 60%, transparent); border-radius: 4px; background: transparent; color: var(--side); font: 800 12px/1 var(--gg-font-case); cursor: pointer; }
.cmp-col-label { padding-top: 6px; color: var(--gg-room-tx-3); font: 700 11px/1 var(--gg-font-case); font-variant-numeric: tabular-nums; }
.cmp-col.is-same .cmp-col-label { color: var(--cmp-same); }

/* The tug of war's hover card: the cover's name and both grades, on tag stock. */
.cmp-tip { position: absolute; z-index: 6; display: grid; grid-template-columns: auto auto; gap: 4px 14px; max-width: 260px; padding: 9px 12px; background: var(--gg-tag); color: var(--gg-tag-ink); border: 2px solid var(--gg-tag-ink); border-radius: 6px; box-shadow: 0 12px 28px -8px rgba(0,0,0,.7); transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; font: 600 11px/1.2 var(--gg-font-case); text-align: left; }
.cmp-tip[hidden] { display: none; }
.cmp-tip b { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.2 var(--gg-font-serif); }
.cmp-tip em { font: 800 16px/1 var(--gg-font-case); font-style: normal; }
.cmp-tip .is-you { color: var(--gg-accent); }
.cmp-tip .is-them { color: #9b5028; text-align: right; }

.cmp-facts-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: 10px 0 0; color: var(--gg-room-tx-3); font: 500 12.5px/1.4 var(--gg-font-case); }
.cmp-facts-line b { color: var(--gg-text); font-weight: 800; }
.cmp-jump { color: var(--cmp-you); font-weight: 700; text-decoration: none; }
.cmp-jump:hover { text-decoration: underline; }

/* ── Headlines: four clippings, each one game and both grades ── */
.cmp-clips { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
/* One or two headlines keep a clipping's width rather than stretching to the page. */
.cmp-clips[style*="--n:1"], .cmp-clips[style*="--n:2"] { grid-template-columns: repeat(var(--n), minmax(0, 420px)); justify-content: center; }
.cmp-clip { display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: center; min-width: 0; min-height: 112px; overflow: hidden; color: var(--gg-ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.cmp-clip:hover { transform: translateY(-2px); }
.cmp-clip:hover .cmp-clip-art.is-case { transform: rotate(-3deg) translateY(-2px); }
.cmp-clip-art.is-case { transition: transform .2s ease; }
.cmp-clip-art { position: relative; display: block; align-self: stretch; overflow: hidden; border-right: 3px solid var(--clip, var(--gg-ink)); background: var(--gg-paper-2); }
.cmp-clip-art img, .cmp-clip-art .is-blank { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-clip-art .is-blank { display: grid; place-items: center; color: var(--gg-ink-3); font: 800 28px/1 var(--gg-font-serif); }
/* With box art the clipping shows the game as its case, whole: no crop, the
   clipping's colour run across the top like the platform band on a case. */
.cmp-clip:has(.cmp-clip-art.is-case) { grid-template-columns: auto minmax(0, 1fr); }
.cmp-clip-art.is-case { align-self: center; width: 70px; height: auto; aspect-ratio: 135 / 190; margin: 10px 0 10px 12px; border: 0; border-top: 6px solid var(--clip, var(--gg-ink)); border-radius: 3px 3px 2px 2px; box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 8px 14px -8px rgba(0,0,0,.55); }
.cmp-clip-copy { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 10px 12px; }
.cmp-clip-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--clip, var(--gg-press-accent)); font: 800 9.5px/1.2 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; }
.cmp-clip-title { font: 700 16px/1.15 var(--gg-font-serif); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp-clip-why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gg-ink-2); font: italic 400 12px/1.3 var(--gg-font-serif); }
.cmp-clip-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 3px; }
.cmp-clip-who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cmp-clip-who.is-them { justify-content: flex-end; }
.cmp-clip-name { display: none; }
.cmp-clip-who.is-you::before, .cmp-clip-who.is-them::after { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.cmp-clip-who.is-you::before { background: var(--cmp-you-ink); }
.cmp-clip-who.is-them::after { background: var(--cmp-them-ink); border-radius: 1px; }
.cmp-clip .cmp-num.sm { font-size: 17px; }
.cmp-clip .cmp-gap { min-width: 0; padding: 4px 6px; font-size: 13px; }
.cmp-clip.is-favorite { --clip: #a07a24; }
.cmp-clip.is-you { --clip: var(--cmp-you-ink); }
.cmp-clip.is-them { --clip: var(--cmp-them-ink); }
.cmp-clip.is-letdown { --clip: var(--gg-ink-2); }
html[data-paper="carbon"] .cmp-clip.is-favorite { --clip: #f3c766; }

/* ── Tale of the tape: four categories, one strip ────────────── */
.cmp-tape { padding: 12px 20px 10px; background-image: var(--gg-newsprint-edge), var(--gg-newsprint); }
.cmp-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 7px; border-bottom: 3px double var(--gg-ink); }
.cmp-sheet-head h2, .cmp-ledger-title { font: 700 21px/1.1 var(--gg-font-serif); letter-spacing: -.01em; }
.cmp-sheet-note { flex: 1 1 auto; margin: 0; color: var(--gg-ink-2); font: 400 12px/1.4 var(--gg-font-case); }
.cmp-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--gg-ink-2); font: 600 11px/1 var(--gg-font-case); white-space: nowrap; }
.cmp-legend i { width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.cmp-legend i.is-you { background: var(--cmp-you-ink); }
.cmp-legend i.is-them { background: var(--cmp-them-ink); border-radius: 1px; }
.cmp-tape-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp-tape-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label label sync" "you bell them"; align-items: center; gap: 4px 10px; min-width: 0; padding: 10px 16px 6px; border-left: 1px solid var(--gg-rule); }
.cmp-tape-row:first-child { padding-left: 0; border-left: 0; }
.cmp-tape-row:last-child { padding-right: 0; }
.cmp-tape-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--gg-font-case); }
.cmp-tape-label small { margin-left: 7px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cmp-tape-row.is-closest .cmp-tape-label small { color: var(--gg-ink-success); }
.cmp-tape-row.is-furthest .cmp-tape-label small { color: var(--gg-ink-danger); }
.cmp-tape-row > .cmp-cell.is-you { grid-area: you; }
.cmp-tape-row > .cmp-bell { grid-area: bell; }
.cmp-tape-row > .cmp-cell.is-them { grid-area: them; }
.cmp-tape-row .cmp-num { font-size: 24px; }
.cmp-tape-sync { grid-area: sync; color: var(--gg-ink-2); font: 500 11px/1 var(--gg-font-case); white-space: nowrap; }
.cmp-tape-sync b { color: var(--gg-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── The ledger ──────────────────────────────────────────────── */
.cmp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--gg-room-line-2); border-radius: 16px; background: var(--gg-room-2); }
.cmp-toolbar-head { display: flex; align-items: baseline; gap: 12px; }
.cmp-ledger-title { color: var(--gg-text); white-space: nowrap; }
body.friend-compare-page .compare-toolbar-count { padding: 0; border: 0; background: transparent; color: var(--gg-room-tx-3); font: 600 12px/1.4 var(--gg-font-case); }
.compare-lenses { display: flex; gap: 6px; margin: 0; }
.compare-lenses button { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 38px; padding: 6px 13px; border: 1px solid var(--gg-room-line-2); border-radius: 999px; background: transparent; color: var(--gg-room-tx-2); font: 600 12px/1.2 var(--gg-font-case); cursor: pointer; white-space: nowrap; }
.compare-lenses button span { opacity: .7; font-variant-numeric: tabular-nums; }
.compare-lenses button:hover { border-color: var(--gg-accent-light); }
.compare-lenses button.is-active { background: var(--gg-accent-soft); border-color: var(--gg-accent); color: #ece6ff; }
.compare-lenses button.is-you.is-active { background: color-mix(in srgb, var(--cmp-you) 20%, transparent); border-color: var(--cmp-you); }
.compare-lenses button.is-them.is-active { background: color-mix(in srgb, var(--cmp-them) 18%, transparent); border-color: var(--cmp-them); color: #ffe9da; }
.cmp-lens-t { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-lens-t .cmp-fname { display: inline; max-width: none; }
.cmp-toolbar .compare-toolbar-row { flex: 1 1 340px; flex-wrap: nowrap; gap: 8px; }
body.friend-compare-page .cmp-toolbar .compare-search { flex: 1 1 auto; min-width: 0; }
.cmp-toolbar .compare-search input { height: 40px; }
body.friend-compare-page .cmp-toolbar .compare-sort-select { display: block; flex: 0 1 190px; min-width: 0; }
.cmp-toolbar .compare-sort-select label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cmp-ledger { padding: 0 22px 8px; background-image: var(--gg-newsprint-edge), var(--gg-newsprint); }
.cmp-ledger.compare-list { display: block; gap: 0; }
.cmp-ledger-head, .cmp-row-sum { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(300px, 1.15fr) 72px 22px; align-items: center; gap: 18px; }
/* The column labels follow you down the list (at 0: compare_styles lets this
   page's header scroll away), so a row deep in the ledger still says whose
   number is whose without repeating it on every row. */
.cmp-ledger > .cmp-ledger-head { position: sticky; top: 0; z-index: 3; padding: 12px 0 9px; border-bottom: 2px solid var(--gg-ink); background: var(--gg-paper); background-image: var(--gg-newsprint); color: var(--gg-ink-2); font: 700 10px/1 var(--gg-font-case); letter-spacing: .1em; text-transform: uppercase; }
.cmp-ledger-head::before { content: ''; }
.cmp-lh-grades, .cmp-row-grades { display: grid; grid-template-columns: 86px minmax(0, 1fr) 86px; align-items: center; gap: 12px; }
.cmp-lh-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.cmp-lh-person.is-you { color: var(--cmp-you-ink); }
.cmp-lh-person.is-them { color: var(--cmp-them-ink); justify-content: flex-end; }
.cmp-lh-person .cmp-avatar { width: 20px; height: 20px; font-size: 9px; }
.cmp-lh-person .cmp-avatar.is-them { border-radius: 6px; }
.cmp-lh-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cmp-lh-scale { display: flex; justify-content: space-between; color: var(--gg-ink-3); letter-spacing: 0; }
.cmp-lh-gap { text-align: center; }

.cmp-row { border-bottom: 1px solid var(--gg-rule); scroll-margin: calc(var(--header-h, 72px) + 20px) 0 90px; }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row[hidden] { display: none; }
.cmp-row-sum { padding: 9px 0; cursor: pointer; list-style: none; border-radius: 4px; }
.cmp-row-sum::-webkit-details-marker { display: none; }
.cmp-row-sum:hover { background: color-mix(in srgb, var(--gg-ink) 4%, transparent); }
.cmp-row-art { width: 92px; aspect-ratio: 460 / 215; border-radius: 3px; overflow: hidden; background: var(--gg-paper-2); }
.cmp-row-art img, .cmp-row-art .is-blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-row-art .is-blank { display: grid; place-items: center; color: var(--gg-ink-3); font: 800 18px/1 var(--gg-font-serif); }
.cmp-row-title { display: grid; gap: 4px; min-width: 0; }
.cmp-row-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--gg-font-serif); }
.cmp-row-title small { display: flex; align-items: center; min-height: 1em; min-width: 0; padding: 2px 0; white-space: nowrap; color: var(--gg-ink-2); font: 500 11px/1 var(--gg-font-case); }

.cmp-ranks { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Kickers on the row that earned one: a three-point split, or two nines that match.
   Printed, not stamped: the row's stamp is its gap mark. */
.cmp-tag { flex: none; font: 800 9.5px/1.2 var(--gg-font-case); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.cmp-tag::after { content: '·'; margin: 0 6px; color: var(--gg-ink-3); letter-spacing: 0; }
.cmp-tag.is-split { color: var(--gg-ink-danger); }
.cmp-tag.is-unanimous { color: var(--gg-ink-success); }

/* The winning grade wears the sticker: tag stock in its side's colour, so a
   glance down the ledger reads who liked what more without reading numbers.
   Slapped on a little crooked, the same way as the gap stamp beside it. */
.cmp-row-grades .cmp-cell { justify-self: center; display: inline-grid; place-items: center; min-width: 56px; padding: 5px 7px 4px; border: 2px solid transparent; border-radius: 7px; }
.cmp-row-grades .cmp-cell.is-you { --side-ink: var(--cmp-you-ink); }
.cmp-row-grades .cmp-cell.is-them { --side-ink: var(--cmp-them-ink); }
.cmp-row.is-you .cmp-row-grades .cmp-cell.is-you,
.cmp-row.is-them .cmp-row-grades .cmp-cell.is-them { border-color: var(--side-ink); background: color-mix(in srgb, var(--side-ink) 11%, var(--gg-paper)); box-shadow: 0 2px 0 color-mix(in srgb, var(--side-ink) 30%, transparent); transform: rotate(-2deg); }
.cmp-row-grades .cmp-num { font-size: 25px; }
.cmp-row-gap { text-align: center; }
.cmp-row-toggle { width: 22px; height: 22px; position: relative; }
.cmp-row-toggle::before { content: ''; position: absolute; left: 6px; top: 4px; width: 7px; height: 7px; border-right: 2px solid var(--gg-ink-2); border-bottom: 2px solid var(--gg-ink-2); transform: rotate(45deg); transition: transform .18s ease; }
.cmp-row[open] .cmp-row-toggle::before { transform: translateY(5px) rotate(225deg); }
.cmp-row[open] > .cmp-row-sum { background: color-mix(in srgb, var(--gg-ink) 4%, transparent); }
.cmp-row.is-flash > .cmp-row-sum { animation: cmp-flash 1.6s ease-out; }
@keyframes cmp-flash { 0%, 30% { background: color-mix(in srgb, var(--gg-accent) 22%, transparent); } 100% { background: transparent; } }

.cmp-row-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px 36px; padding: 6px 0 16px 110px; }
.cmp-row-take { grid-column: 1 / -1; margin: 0 0 4px; color: var(--gg-press-accent); font: 600 13px/1.4 var(--gg-font-case); }
.cmp-row-take span { margin-left: 12px; color: var(--gg-ink-2); font-size: 11px; font-weight: 400; }
.cmp-subgrades { display: grid; align-content: start; }
.cmp-sub { display: grid; grid-template-columns: 78px 40px minmax(0, 1fr) 40px 60px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--gg-rule); }
.cmp-sub:last-child { border-bottom: 0; }
.cmp-sub .cmp-cell { text-align: center; }
.cmp-sub .cmp-bell { height: 18px; }
.cmp-sub .cmp-dot { width: 10px; height: 10px; }
.cmp-sub .cmp-gap { min-width: 0; padding: 3px 7px; font-size: 12px; }
.cmp-sub-label { font: 600 12px/1 var(--gg-font-case); color: var(--gg-ink-2); }
.cmp-sub.is-widest .cmp-sub-label { color: var(--gg-ink); font-weight: 800; }
.cmp-sub-gap { text-align: right; }
.cmp-facts { width: 100%; border-collapse: collapse; table-layout: fixed; font: 500 12px/1.3 var(--gg-font-case); color: var(--gg-ink); }
.cmp-facts th, .cmp-facts td { padding: 5px 4px; border-bottom: 1px dotted var(--gg-rule); text-align: center; overflow-wrap: anywhere; }
.cmp-facts thead th { color: var(--gg-ink-2); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--gg-rule); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-facts tbody th { text-align: left; color: var(--gg-ink-2); font-weight: 500; }
.cmp-facts tr:last-child > * { border-bottom: 0; }
.cmp-row .compare-review-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 8px; font: 600 12px/1.4 var(--gg-font-case); }
.cmp-row .compare-review-links a { color: var(--gg-press-accent); text-decoration: none; }
.cmp-row .compare-review-links a:hover { text-decoration: underline; }

/* The friend's name where room is short: one line, ellipsized. */
.cmp-fname { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cmp-clip-kicker .cmp-fname { max-width: 14ch; }

/* ── Entrance: drawn in once, after first paint ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .cmp-meter-m i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .2s; }
  .cmp-chip { opacity: 0; transform: translateY(-22px); transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.2s + var(--i) * 80ms); }
  .cmp-tape .cmp-bell-bar, .cmp-ledger .cmp-bell-bar { transform: scaleX(0); transition: transform .7s cubic-bezier(.22, 1, .36, 1) .2s; }
  .cmp-ready .cmp-meter-m i, .cmp-ready .cmp-tape .cmp-bell-bar, .cmp-ready .cmp-ledger .cmp-bell-bar { transform: none; }
  .cmp-ready .cmp-chip { opacity: 1; transform: none; }
  .cmp-ready .cmp-chip:hover, .cmp-ready .cmp-chip:focus-visible { transform: scale(1.1); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-row.is-flash > .cmp-row-sum { animation: none; outline: 2px solid var(--cmp-you-ink); }
}

/* ── Narrower ────────────────────────────────────────────────── */
/* Four headlines fold to two by two; three stay on one line to the tablet,
   so none is left on a row of its own. */
@media (max-width: 1100px) {
  .cmp-clips[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cmp-clips[style*="--n:3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cmp-ledger-head, .cmp-row-sum { grid-template-columns: 76px minmax(0, 1fr) minmax(250px, 1.2fr) 64px 22px; gap: 12px; }
  .cmp-row-art { width: 76px; }
  .cmp-row-body { grid-template-columns: 1fr; padding-left: 0; }
  .cmp-tape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-tape-row:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cmp-tape-row:nth-child(even) { padding-right: 0; }
  .cmp-tape-row:nth-child(n+3) { border-top: 1px solid var(--gg-rule); }
}
@media (max-width: 760px) {
  .cmp-spread-cols { --tile-h: 30px; }
  .cmp-spread-cols, .cmp-tally-key { gap: 4px; }
  .cmp-col-stack { padding: 3px; gap: 3px; min-height: calc(var(--peak) * (var(--tile-h) + 3px) + 3px); }
}

@media (max-width: 680px) {
  .cmp { gap: 12px; }
  .cmp-hero { padding: 12px 12px 14px; border-radius: 14px; }
  .cmp-eyebrow { font-size: 10px; letter-spacing: .14em; }
  .cmp-face { gap: 10px; margin-top: 10px; }
  .cmp-player, .cmp-player.is-you { flex-direction: column; gap: 7px; text-align: center; }
  .cmp-player-copy { justify-items: center; gap: 4px; max-width: 100%; }
  .cmp-player .cmp-avatar { width: 48px; height: 48px; font-size: 20px; }
  .cmp-player .cmp-avatar.is-them { border-radius: 13px; }
  .cmp-player-name { max-width: 100%; font-size: 15px; }
  .cmp-player-avg { font-size: 11px; }
  .cmp-meter { padding: 8px 10px 7px 9px; column-gap: 7px; border-width: 2.5px; }
  .cmp-meter-n { font-size: 40px; }
  .cmp-meter-g { font-size: 12px; }
  .cmp-meter-l { font-size: 8px; }
  .cmp-meter-m { margin-top: 7px; height: 5px; }
  .cmp-verdict { margin-top: 12px !important; font-size: 28px; }
  .cmp-verdict-line { font-size: 14px; }

  .cmp-spread { margin-top: 14px; }
  .cmp-spread-cols, .cmp-tally-key { gap: 3px; }
  .cmp-spread-cols { --tile-h: 22px; }
  .cmp-col-stack { padding: 2px; gap: 3px; border-radius: 5px 5px 0 0; min-height: calc(var(--peak) * (var(--tile-h) + 3px) + 2px); }
  .cmp-chip { border-radius: 3px; }
  .cmp-chip-more { height: 18px; padding: 0; font-size: 10px; }
  .cmp-col-label { font-size: 9px; padding-top: 5px; }
  .cmp-tally-key { margin-bottom: 6px; font-size: 9px; letter-spacing: .02em; }
  .cmp-tally-key > span { display: grid; gap: 2px; justify-items: start; }
  .cmp-tally-key .is-same { justify-items: center; }
  .cmp-tally-key .is-them { justify-items: end; }
  .cmp-tally-key b { font-size: 22px; }
  .cmp-facts-line { gap: 2px 14px; margin-top: 8px; font-size: 11.5px; }
  .cmp-facts-line > span:first-child { flex-basis: 100%; }
  .cmp-clip-art.is-case { width: 62px; margin-left: 10px; }

  /* Headlines become a deck you flick through, the next one peeking in. */
  .cmp-clips, .cmp-clips[style*="--n:1"] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; margin: 0 -14px; padding: 2px 14px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 14px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cmp-clips::-webkit-scrollbar { display: none; }
  .cmp-clips[style*="--n:1"] { grid-auto-columns: 100%; }
  /* style.css caps main's gutter at 10px under 481px; bleed by exactly that,
     or the deck runs 4px past the viewport and the page pans sideways. */
  @media (max-width: 480px) {
    .cmp-clips, .cmp-clips[style*="--n:1"] { margin: 0 -10px; padding-inline: 10px; scroll-padding: 0 10px; }
  }
  .cmp-clip { scroll-snap-align: start; min-height: 104px; grid-template-columns: 36% minmax(0, 1fr); }
  .cmp-clip:hover { transform: none; }
  .cmp-clip-copy { padding: 9px 10px; }
  .cmp-clip-title { font-size: 15px; }

  .cmp-tape { padding: 10px 12px 6px; }
  .cmp-sheet-head h2, .cmp-ledger-title { font-size: 19px; }
  .cmp-sheet-note { display: none; }
  .cmp-sheet-head { justify-content: space-between; }
  .cmp-legend { font-size: 10px; }
  .cmp-tape-row { gap: 3px 6px; padding: 9px 0 6px 10px; }
  .cmp-tape-row:nth-child(even) { padding-left: 10px; }
  .cmp-tape-label { font-size: 12px; }
  .cmp-tape-label small { display: block; margin: 2px 0 0; font-size: 8px; }
  .cmp-tape-row .cmp-num { font-size: 19px; }
  .cmp-tape-sync { font-size: 9px; align-self: start; }

  .cmp-toolbar { gap: 10px; padding: 12px; border-radius: 14px; }
  .cmp-toolbar-head { flex: 1 1 100%; justify-content: space-between; }
  .compare-lenses { flex: 1 1 100%; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .compare-lenses::-webkit-scrollbar { display: none; }
  .compare-lenses button { min-height: 36px; padding: 6px 11px; font-size: 12px; }
  .cmp-toolbar .compare-toolbar-row { flex: 1 1 100%; }
  body.friend-compare-page .cmp-toolbar .compare-search { flex: 1 1 55%; min-width: 0; }
  body.friend-compare-page .cmp-toolbar .compare-sort-select { flex: 1 1 45%; }
  .cmp-toolbar .compare-search input { font-size: 16px; }

  /* A ledger row becomes two lines: art and title over the head-to-head. */
  .cmp-ledger { padding: 0 12px 4px; }
  .cmp-ledger > .cmp-ledger-head { display: flex; justify-content: space-between; margin: 0 -12px; padding: 10px 12px 8px; }
  .cmp-ledger-head::before, .cmp-lh-game, .cmp-lh-gap { display: none; }
  .cmp-lh-grades { flex: 1; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 8px; }
  .cmp-lh-person { font-size: 10px; }
  .cmp-lh-person .cmp-avatar { display: none; }
  .cmp-lh-person.is-you { justify-content: center; }
  .cmp-lh-person.is-them { justify-content: center; }
  .cmp-row-sum { grid-template-columns: 64px minmax(0, 1fr) auto 18px; grid-template-areas: "art title gap tog" "grades grades grades grades"; gap: 6px 10px; padding: 10px 0 8px; }
  .cmp-row-art { grid-area: art; width: 64px; }
  .cmp-row-title { grid-area: title; }
  .cmp-row-title b { font-size: 15px; }
  .cmp-row-title small { font-size: 10px; }
  .cmp-row-gap { grid-area: gap; }
  .cmp-row-toggle { grid-area: tog; width: 18px; }
  .cmp-row-toggle::before { left: 4px; }
  .cmp-row-grades { grid-area: grades; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 8px; }
  .cmp-row-grades .cmp-cell { min-width: 52px; padding: 4px 6px 3px; }
  .cmp-row-grades .cmp-num { font-size: 22px; }
  .cmp-row .cmp-gap { min-width: 0; padding: 4px 8px; font-size: 13px; }
  .cmp-row-body { padding: 0 0 12px; gap: 8px; }
  .cmp-row-take { font-size: 12px; }
  .cmp-row-take span { display: block; margin: 2px 0 0; }
  .cmp-sub { grid-template-columns: 64px 30px minmax(0, 1fr) 30px 44px; gap: 6px; }
  .cmp-sub-label { font-size: 11px; }
  .cmp-sub .cmp-num { font-size: 14px; }
  .cmp-sub .cmp-gap { font-size: 11px; padding: 3px 5px; }
  .cmp-facts { font-size: 11px; }
  .cmp-fname { max-width: 11ch; }
}

@media (max-width: 440px) {
  .cmp-eyebrow-n { display: none; }
  .cmp-tally-key .is-same > span, .cmp-tally-key i { display: none; }
  .cmp-face { gap: 6px; }
  .cmp-meter { column-gap: 6px; padding: 7px 8px 6px 8px; }
  .cmp-meter-n { font-size: 34px; }
  .cmp-player-name { font-size: 14px; }
}
@media (max-width: 360px) {
  .cmp-player-name { font-size: 13px; }
  .cmp-meter-n { font-size: 30px; }
  .cmp-verdict { font-size: 25px; }
  .cmp-spread-cols { --tile-h: 18px; }
  .cmp-tally-key b { font-size: 19px; }
  .cmp-tape-grid { grid-template-columns: 1fr; }
  .cmp-tape-row, .cmp-tape-row:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .cmp-tape-row:nth-child(n+2) { border-top: 1px solid var(--gg-rule); }
}