/* The receipt (spec §10). Flat paper, torn bottom edge, no props (spec §9). */
/* Torn-edge masks: shapes, not colours. A mask only reads alpha, so black means
   "show" and transparent means "cut away". */
:root{
  --torn:linear-gradient(black 0 0) top/100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom,transparent,black 1deg 90deg,transparent 91deg) bottom/14px 10px repeat-x;
  --torn-sm:linear-gradient(black 0 0) top/100% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at bottom,transparent,black 1deg 90deg,transparent 91deg) bottom/10px 7px repeat-x;
}
.receipt{
  position:relative;z-index:1;
  /* On paper the ring is the paper's own ink; gold would be 2.48:1. */
  --focus-ring:var(--paper-ink);
  background:var(--paper);color:var(--paper-ink);
  font:400 var(--t-meta)/1.65 var(--font-mono);
  padding:20px 18px 14px;
  -webkit-mask:var(--torn);
  mask:var(--torn);
}
.receipt a{text-decoration:none}
.receipt a:hover{color:var(--ink-accent)}
.receipt h1,.receipt h2,.receipt p{margin:0}

.r-center{text-align:center}
.r-small{font-size:var(--t-micro);letter-spacing:.08em}
.r-store{font:400 44px/1 var(--font-display);letter-spacing:.03em;color:var(--ink-accent);text-align:center;margin:4px 0 6px}
.r-store img{display:block;margin:0 auto;max-width:100%;height:auto}

.r-rule{border:0;border-top:2px dashed var(--ink-accent);margin:10px 0}
.r-rule--double{border-top:4px double var(--ink-accent)}

/* Same markup as the person page's best-game block, printed on paper: the
   skin's ink, the paper's own greys. */
.receipt .statnums{--stat-accent:var(--ink-accent)}
.receipt .statnums__n dt{color:inherit;opacity:.6}
/* The player's own numbers, itemised the way the team's are in ITEMS. */
.receipt .statline__items{margin:10px 0 0;padding:0}
.receipt .statline__item{display:flex;align-items:baseline;gap:8px;
  font:400 var(--t-meta)/1.9 var(--font-mono);font-variant-numeric:tabular-nums}
.receipt .statline__item dt{flex:none;letter-spacing:.1em}
.receipt .statline__item dd{margin:0;order:3;flex:none;font-weight:700}
.receipt .statline__item::after{content:"";order:2;flex:1;min-width:16px;
  border-bottom:1px dotted var(--paper-leader);transform:translateY(-5px)}
/* The total bar's grammar -- label left, figure right -- without its fill.
   A filled bar of centred caps read as a button, and the fill belongs to the
   total, which is the receipt's actual climax. Double rules are the receipt's
   own way of marking something out; they already frame the store header. */
.r-milestone{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:14px 0 2px;padding:7px 0;color:var(--ink-accent);
  font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.14em;
  border-top:4px double var(--ink-accent);border-bottom:4px double var(--ink-accent)}
.r-milestone b{font:400 26px/1 var(--font-display);letter-spacing:.02em}
.receipt .statline__go{display:inline-flex;align-items:center;min-height:44px;
  font:700 var(--t-micro)/1.4 var(--font-mono);letter-spacing:.14em;
  text-decoration:none;color:var(--ink-accent)}
.receipt .statline__go:hover{text-decoration:underline;text-underline-offset:4px}

/* Player of the night: the photo sits beside the night's points, on paper the
   way the person page's headshot sits on paper. */
/* The photo, then a column holding the name and the numbers, so the numbers
   start where the name does rather than under the photo (Ron, 2026-09-20). */
.r-potn{display:flex;align-items:center;gap:14px;margin-top:4px}
.r-potn__col{min-width:0;flex:1}
.r-potn__col .statnums{margin-top:4px;gap:clamp(14px,4.5vw,26px)}
/* Sized against the longest name the receipt can print. MAMUKELASHVILI is
   14 characters with nowhere to break; HOLLIS-JEFFERSON is 16 but wraps at
   its hyphen. The photo takes what is left. */
.r-potn__photo{width:clamp(88px,24vw,120px);height:auto;flex:none;
  background:var(--paper);border-bottom:2px solid var(--ink-accent)}
.r-potn__name{margin:0;font:400 clamp(1.75rem,7.5vw,2.5rem)/.95 var(--font-display);
  letter-spacing:.01em;overflow-wrap:anywhere}
.r-potn__name a{text-decoration:none}
.r-potn__name a:hover{text-decoration:underline;text-underline-offset:4px}

.r-score{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.r-score__team{font:800 var(--t-score)/1 var(--font-body);text-transform:uppercase}
.r-score__pts{font:400 72px/.9 var(--font-display);font-variant-numeric:tabular-nums}
.r-score--lost{opacity:.5}
.r-tag{display:inline-block;margin-left:8px;padding:3px 6px;background:var(--ink-accent);color:var(--ink-on-accent);font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.12em;vertical-align:middle}

.r-tldr{font:600 var(--t-tldr)/1.15 var(--font-body)}
.r-head{font:700 var(--t-meta)/1.65 var(--font-mono);letter-spacing:.14em;color:var(--ink-accent)}
.r-prose{font:400 var(--t-base)/1.3 var(--font-body);margin-top:4px}
.r-big{font:400 48px/1 var(--font-display);letter-spacing:.02em}

.r-row{display:flex;align-items:baseline}
.r-row__lead{flex:1;min-width:12px;margin:0 6px;border-bottom:1px dotted var(--paper-leader);transform:translateY(-4px)}

/* Ranked the way the rotation beside it is: the head and the opponent step
   back in ink, Toronto stays at full strength. It read in weight and opacity
   before, which put two different systems on one receipt (Ron, Sep 20). */
.r-qs{display:grid;grid-template-columns:1.4fr repeat(var(--periods,4),1fr) 1.2fr;
  text-align:right;font-variant-numeric:tabular-nums;color:var(--st-ink-2)}
.r-qs>:first-child{text-align:left}
.r-qs--head{color:var(--st-ink-3)}
.r-qs--tor{color:var(--st-ink-1)}

/* The stat table is in tokens.css: it is printed on paper here and on the
   house ground elsewhere, and tokens.css is the only sheet both load. */

/* A facade, not a button. It takes the 16:9 box the iframe will occupy, so
   the video does not appear to arrive from somewhere else, and so the whole
   frame is the tap target rather than a 44px bar under it. Nothing is fetched
   from YouTube until it is tapped: the page loads with no third-party request
   at all, and one tap costs 30 across 8 Google domains. */
.r-hl__play{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;width:100%;aspect-ratio:16/9;margin-top:6px;padding:14px;
  border:2px solid var(--paper-ink);background:none;color:var(--paper-ink);
  font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.14em;cursor:pointer}
.r-hl__play{position:relative;overflow:hidden;padding:0}
/* The video's own frame. hqdefault is 4:3 with letterbox bars, so it is
   cropped to the 16:9 box rather than letterboxed twice. */
.r-hl__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-hl__glyph{position:relative;display:block;width:0;height:0;
  filter:drop-shadow(0 2px 6px var(--over-media));
  border-left:26px solid var(--paper);border-top:16px solid transparent;
  border-bottom:16px solid transparent}
.r-hl__label{position:relative;color:var(--paper);
  text-shadow:0 1px 6px var(--over-media-text)}
.r-hl__play:hover .r-hl__thumb,.r-hl__play:focus-visible .r-hl__thumb{opacity:.75}
.r-hl__play:hover,.r-hl__play:focus-visible{background:var(--paper-ink);color:var(--paper)}
.r-hl__frame{display:block;width:100%;aspect-ratio:16/9;border:0;margin-top:6px}

.r-total{display:flex;justify-content:space-between;align-items:center;margin:12px 0 4px;padding:7px 10px;background:var(--ink-accent);color:var(--ink-on-accent);letter-spacing:.1em}
.r-total b{font:400 30px/1 var(--font-display);letter-spacing:.02em}
.r-barcode{height:38px;margin:10px 8px 4px;background:repeating-linear-gradient(90deg,var(--paper-ink) 0 2px,transparent 2px 3px,var(--paper-ink) 3px 4px,transparent 4px 7px,var(--paper-ink) 7px 10px,transparent 10px 12px)}