/* screens/results.css · WP10 · SPEC 3.12 (results board, #res-field, verdict tiers, rank strip, ceremony).

   How it works
   - The board is a CSS grid with named areas, so the markup order of index.html never changes. Base styles are the
     FINAL state of the ceremony: if no animation runs (reduced motion, skip) the board is complete.
   - The ceremony: results-view.js adds #results.reveal (and #res-field.reveal) on aisu:screen -> results and writes
     --t0 (= aisu:screen.moveAt, the time Aisu has left the board's region). Every entrance below starts at
     calc(var(--t0) + slot), the slots of SPEC 3.12. Async parts (rank strip, VERIFIED hanko, medal, New high score
     ribbon) are gated by .pre-rank / .pre-badge and animated from JS when their slot or their data arrives.
   - Only transform and opacity animate. No filter, no backdrop-filter. Text never under .875rem.
   - Aisu: the board (and its red plate) ends left of --safe-title-r; #res-field fades to 0 before it. */

@property --t0 { syntax: '<time>'; inherits: true; initial-value: 0ms; }

/* ============================================================================================ field (#backdrop) */
#res-field {
  --fx: calc(2.5vw + var(--res-w) / 2);                  /* verdict centre: rays and glow radiate from it */
  --fy: calc(3vh + 2.3rem);
  --glow: rgb(232 32 47 / .42); --glow-2: rgb(122 14 34 / .62); --glow-3: rgb(13 11 22 / .9);
  --ray-a: rgb(255 120 60 / .16); --ray-b: rgb(246 240 228 / .07);
  background:
    radial-gradient(42rem 30rem at var(--fx) var(--fy), rgb(255 200 90 / .22), transparent 70%),
    radial-gradient(70rem 62rem at var(--fx) 46%, var(--glow), var(--glow-2) 52%, var(--glow-3) 88%);
  -webkit-mask: linear-gradient(90deg, #000 0 calc(var(--safe-title-r) - 8rem), transparent var(--safe-title-r));
  mask: linear-gradient(90deg, #000 0 calc(var(--safe-title-r) - 8rem), transparent var(--safe-title-r));
}
#res-field::before {                                     /* night seigaiha texture under the glow */
  content: ''; position: absolute; inset: 0;
  background: url(../../img/svg/pat-seigaiha-night.svg) 0 0 / 3.2rem 1.6rem; opacity: .35;
}
#res-field .res-field__rays {
  background: repeating-conic-gradient(from -3deg at var(--fx) var(--fy), var(--ray-a) 0 5deg, transparent 5deg 10deg, var(--ray-b) 10deg 15deg, transparent 15deg 20deg);
  -webkit-mask: radial-gradient(64rem 46rem at var(--fx) var(--fy), #000 10%, transparent 72%);
  mask: radial-gradient(64rem 46rem at var(--fx) var(--fy), #000 10%, transparent 72%);
}
#res-field .res-field__flames { height: 5rem; opacity: .9; }
#res-field[data-tier="flawless"] { --glow: rgb(255 190 60 / .48); --glow-2: rgb(196 64 20 / .58); --ray-a: rgb(255 214 90 / .26); --ray-b: rgb(255 248 200 / .12); }
#res-field[data-tier="nice"]     { --glow: rgb(232 32 47 / .3); --ray-a: rgb(255 120 60 / .11); }
#res-field[data-tier="almost"]   { --glow: rgb(242 85 42 / .24); --glow-2: rgb(76 22 32 / .7); --ray-a: rgb(255 120 60 / .08); --ray-b: transparent; }
#res-field[data-tier="keep"]     { --glow: rgb(150 46 64 / .2); --glow-2: rgb(34 18 42 / .78); --ray-a: rgb(255 140 90 / .05); --ray-b: transparent; }
#res-field:is([data-tier="almost"], [data-tier="keep"]) .res-field__flames { opacity: .45; }
#res-field[data-tier="failed"] { --glow: rgb(20 38 168 / .4); --glow-2: rgb(16 20 74 / .72); }
#res-field[data-tier="failed"]::before { opacity: .5; }
#res-field[data-tier="failed"] :is(.res-field__rays, .res-field__flames) { display: none; }

/* ============================================================================================ the board */
#results, #res-field { --res-w: min(50rem, var(--safe-title-r) - 2.5vw - 1.2rem); }   /* + the red plate (.91rem) */
#results .results-board {
  --pad-x: 1.75rem;
  left: 2.5vw; top: 3vh; width: var(--res-w); height: 94vh;
  overflow: visible; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto minmax(auto, 1fr) auto auto auto auto;
  grid-template-areas: "head head" "band band" "score stars" "mid mid" "timing timing" "note note" "rank rank" "acts acts";
  gap: 0 1.4rem; align-content: stretch; padding: 0 var(--pad-x) 1.35rem;
  border-radius: var(--r-xl);
  background:
    url(../../img/svg/paper-grain.webp) 0 0 / 16rem,
    radial-gradient(60rem 22rem at 50% 0, rgb(255 236 190 / .9), transparent 70%),
    linear-gradient(180deg, #FFFDF6 0%, #F7F0E2 55%, #EFE3CC 100%);
  box-shadow: var(--plate-red), var(--float);
}
/* certificate rule: a thin double inner frame */
#results .results-board::before {
  content: ''; position: absolute; inset: .45rem; z-index: -1; border-radius: calc(var(--r-xl) - .45rem); pointer-events: none;
  border: 2px solid rgb(44 15 21 / .14); box-shadow: inset 0 0 0 .22rem rgb(255 250 240 / .7), inset 0 0 0 calc(.22rem + 1.5px) rgb(176 122 18 / .22);
}
/* faint seigaiha watermark in the lower half */
#results .results-board::after {
  content: ''; position: absolute; left: .6rem; right: .6rem; bottom: .6rem; height: 55%; z-index: -1; pointer-events: none;
  border-radius: 0 0 calc(var(--r-xl) - .6rem) calc(var(--r-xl) - .6rem);
  background: url(../../img/svg/pat-seigaiha-ivory.svg) 0 0 / 3rem 1.5rem; opacity: .55;
  -webkit-mask: linear-gradient(0deg, #000, transparent); mask: linear-gradient(0deg, #000, transparent);
}
#results[data-tier="failed"] .results-board { box-shadow: .6rem .7rem 0 0 var(--cobalt-deep), .6rem .7rem 0 var(--ow-l) var(--ink), var(--float); }

/* ---------------------------------------------------------------- verdict header (overlaps the board's top edge) */
#results .res-head {
  grid-area: head; position: relative; z-index: 3;
  clip-path: inset(-30rem -30rem 0 -30rem);                   /* the burst's lower spikes end at the band's top edge */
  display: grid; grid-template-columns: auto; justify-content: center; align-content: center;
  height: 7.1rem; margin-top: -.85rem; min-height: 0;
}
#results .res-head > :not(.res-head__rays) { grid-area: 1 / 1; }   /* twinkles: positioned around the verdict's own box */
#results #res-verdict {
  position: relative; z-index: 2; place-self: center;
  font-size: 4.6rem; line-height: 1.12;
  --tk-gradient: linear-gradient(180deg, #FFF8C4 8%, #FFD23A 40%, #FF8A1C 70%, #E8202F 100%);
}
#results #res-verdict[data-size="s"] { font-size: 5.4rem; }
#results #res-verdict[data-size="l"] { font-size: 4rem; }
#results .res-head__burst {
  position: relative; z-index: 1; align-self: stretch; justify-self: stretch; margin: -.95rem -3.4rem -.55rem;
  background: url(../../img/svg/burst-red.svg) 50% 50% / 100% 100% no-repeat;
}
#results .res-head__shock {
  position: relative; z-index: 0; place-self: center; width: 15rem; aspect-ratio: 1; border-radius: 50%;
  border: .5rem solid var(--f2); box-shadow: 0 0 0 .18rem var(--ink), inset 0 0 0 .18rem var(--ink); opacity: 0;
}
#results .res-head__rays {
  position: absolute; z-index: 0; left: 50%; width: 52rem; translate: -50% 0; top: calc(1.2rem - 3vh); bottom: -.2rem;
  --cy: calc(3vh + 2.1rem);
  background: repeating-conic-gradient(from -4deg at 50% var(--cy), rgb(232 32 47 / .2) 0 6deg, transparent 6deg 12deg, rgb(255 178 30 / .24) 12deg 18deg, transparent 18deg 24deg);
  -webkit-mask: radial-gradient(27rem 10rem at 50% var(--cy), #000 35%, transparent 100%);
  mask: radial-gradient(27rem 10rem at 50% var(--cy), #000 35%, transparent 100%);
  pointer-events: none;
}
/* drum-roll cue: a gold fan with "Results" while the board counts up; hidden in the final state (the verdict takes over) */
#results .res-head__cue {
  position: relative; z-index: 2; place-self: center; display: grid; place-items: end center;
  width: 15.5rem; aspect-ratio: 600 / 247; margin-top: -1.1rem; opacity: 0; pointer-events: none;
  background: url(../../img/svg/judge-fan-gold.svg) 50% 100% / contain no-repeat;
}
#results .res-head__cue::before {
  content: 'Results'; padding: .1rem 1.1rem .15rem; margin-bottom: .05rem; border-radius: var(--r-pill);
  background: var(--night-2) url(../../img/svg/pat-seigaiha-night.svg) 0 0 / 2.4rem 1.2rem; border: var(--ow-s) solid var(--ink);
  box-shadow: .3rem .35rem 0 var(--ink);
  font: 700 1.9rem/1.1 var(--font-display); font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory);
}
#results[data-tier="failed"] .res-head__cue { background-image: none; }
#results .res-head__tw {
  position: absolute; z-index: 3; width: 1.8rem; aspect-ratio: 1; pointer-events: none;
  background: url(../../img/svg/twinkle-ink.svg) 50% 50% / contain no-repeat;
}
#results .res-head__tw--1 { left: -4.6rem; top: -.2rem; width: 2.3rem; rotate: -12deg; }
#results .res-head__tw--2 { left: -6rem; top: 2.9rem; width: 1.35rem; rotate: 10deg; }
#results .res-head__tw--3 { right: -4.2rem; top: -.6rem; width: 1.6rem; rotate: 14deg; }
#results .res-head__tw--4 { right: -5.4rem; top: 2.3rem; width: 2.2rem; rotate: -8deg; }
#results .res-head:has(#res-verdict[data-size="l"]) :is(.res-head__tw--2, .res-head__tw--4) { display: none; }
#results .res-head:has(#res-verdict[data-size="l"]) .res-head__tw--1 { left: -3.4rem; }
#results .res-head:has(#res-verdict[data-size="l"]) .res-head__tw--3 { right: -3.2rem; }

/* tiers: verdict fill, burst, plate (SPEC 3.12 table). Lettering is left only for keep (1★) and failed: flawless …
   almost (6★ … 2★) show a sticker (below) */
#results[data-tier="flawless"] .res-head__burst { background-image: url(../../img/svg/burst-cobalt.svg); }
#results[data-tier="keep"] #res-verdict { --tk-fill: var(--ivory); --tk-gradient: linear-gradient(var(--paper), var(--ivory-2)); }
#results[data-tier="keep"] .res-head__burst { margin-inline: -2.4rem; margin-block: -.9rem -.7rem; }
#results[data-tier="failed"] #res-verdict { --tk-gradient: var(--grad-ash); --tk-shadow: var(--cobalt-deep); }
#results[data-tier="failed"] .res-head__burst {
  margin: -.9rem -2.2rem -.6rem; border-radius: 999px; background: var(--night-2) url(../../img/svg/pat-seigaiha-night.svg) 0 0 / 2.4rem 1.2rem;
  box-shadow: 0 0 0 var(--ow-l) var(--ink), .45rem .55rem 0 var(--ow-l) var(--ink);
}
#results[data-tier="failed"] :is(.res-head__rays, .res-head__tw, .res-head__shock) { display: none; }
#results:is([data-tier="almost"], [data-tier="keep"]) :is(.res-head__tw--2, .res-head__tw--4) { display: none; }

/* verdict stickers (results-view VERDICT_ART, data-art = amazing | great-play | nice | solid; 1★ and failed keep the
   lettering above). The sticker is an <img> (alt "", aria-hidden) and the verdict text stays in the DOM, visually
   hidden. The stickers bring their own burst or frame, so the red burst goes; they sit on the band's top edge and may
   lap .9rem over it (the band's left half holds the banner, its title starts lower). */
#results .res-head:has(#res-verdict[data-art]) { clip-path: inset(-30rem -30rem -.9rem -30rem); }
#results .res-head:has(#res-verdict[data-art]) .res-head__burst { display: none; }
/* 6★ (flawless) shares Amazing! with 5★: the cobalt burst stays behind it, wider than the sticker's own */
#results[data-tier="flawless"] .res-head:has(#res-verdict[data-art]) .res-head__burst { display: block; margin: -.3rem -2.4rem .05rem; }
#results #res-verdict[data-art] {
  padding: 0; line-height: 0; font-size: 1rem; translate: 0 var(--art-dy, 0rem);   /* centred on the head, then nudged */
}
#results #res-verdict[data-art]::before, #results #res-verdict[data-art]::after { content: none; }
#results .res-verdict__art { display: block; width: var(--art-w); height: var(--art-h); max-width: none; pointer-events: none; user-select: none; }
#results .res-verdict__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* sizes (on the head, so the twinkles read them too; --art-w = --art-h × the file's aspect): the head is 7.1rem from
   ~1.1rem under the window's top; each sticker keeps .6rem off the top and laps at most .5rem over the band (the title
   starts 1.1rem under its edge). Smaller tiers get smaller stickers. */
#results .res-head:has(#res-verdict[data-art="amazing"])    { --art-h: 7.7rem; --art-w: 23.02rem; --art-dy: .1rem; }
#results .res-head:has(#res-verdict[data-art="great-play"]) { --art-h: 8.1rem; --art-w: 8.93rem; --art-dy: .05rem; }
#results .res-head:has(#res-verdict[data-art="nice"])       { --art-h: 7.6rem; --art-w: 13.94rem; --art-dy: .15rem; }
#results .res-head:has(#res-verdict[data-art="solid"])      { --art-h: 6.5rem; --art-w: 12.91rem; --art-dy: .3rem; }
#results #res-verdict[data-art="great-play"] { rotate: -4deg; }
#results #res-verdict[data-art="solid"] { rotate: -3deg; }
/* the twinkles sit around the sticker: with both grid lines set their box is the head's one cell, which is centred on
   the head like the sticker (with an auto end line an absolute item would reach the head's padding edge instead) */
#results .res-head:has(#res-verdict[data-art]) .res-head__tw {
  grid-area: 1 / 1 / 2 / 2; --cx: calc(var(--art-w) / 2); --cy: calc(50% + var(--art-dy) - var(--art-h) / 2);
}
#results .res-head:has(#res-verdict[data-art]) .res-head__tw--1 { left: calc(50% - var(--cx) - 2.5rem); top: calc(var(--cy) + .3rem); }
#results .res-head:has(#res-verdict[data-art]) .res-head__tw--2 { left: calc(50% - var(--cx) - 3.1rem); top: calc(var(--cy) + 3.6rem); }
#results .res-head:has(#res-verdict[data-art]) .res-head__tw--3 { left: auto; right: calc(50% - var(--cx) - 2.2rem); top: var(--cy); }
#results .res-head:has(#res-verdict[data-art]) .res-head__tw--4 { left: auto; right: calc(50% - var(--cx) - 3.2rem); top: calc(var(--cy) + 3.1rem); }

/* fireworks host (deco.fireworks): the top of the board and the margin above it */
#results .res-fw { position: absolute; z-index: 2; left: -1rem; right: -1rem; top: calc(-3vh - .2rem); height: 17rem; pointer-events: none; }

/* ---------------------------------------------------------------- song band (full bleed, scalloped) */
#results .res-side.band {
  grid-area: band; z-index: 1;
  display: grid; position: relative; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.3rem;
  min-height: 6.4rem; margin: 0 calc(-1 * var(--pad-x)) .8rem; padding: .55rem 1.6rem .45rem 1.5rem;
  border-radius: 0; border-block: var(--ow) solid var(--ink); border-bottom: 0;
  box-shadow: inset 0 .25rem 0 rgb(255 255 255 / .14), inset 0 -.35rem 0 rgb(80 0 10 / .22);
}
#results .res-cover-wrap { position: relative; width: 9.2rem; height: 5.175rem; margin: -1.2rem 0 -.7rem; rotate: -3deg; }
#results #res-cover {
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night-3);
  border: var(--ow) solid var(--ink); border-radius: var(--r-s); box-shadow: .3rem .35rem 0 var(--ink);
}
#results .res-cover-wrap .tape { left: -1.5rem; top: -.15rem; width: 3.8rem; rotate: -36deg; background-color: #E9DDC4; }
/* the song's own results banner (song.json `banner`, results-view bannerURL): a rounded sticker that is bigger than the
   16:9 cover and hangs out of the band; its corners are transparent, so the radius follows the art (95 px of 1228) */
#results .res-cover-wrap[data-banner] { width: 12.4rem; height: auto; aspect-ratio: 560 / 296; margin: -1.65rem 0 -1.15rem -.2rem; }
#results .res-cover-wrap[data-banner] #res-cover {
  object-fit: contain; background: none; border: 0; border-radius: 7.7% / 14.6%; box-shadow: .3rem .38rem 0 var(--ink);
}
#results .res-cover-wrap[data-banner] .tape { left: -1.3rem; top: .1rem; }
#results .res-song-info { display: grid; gap: .35rem; min-width: 0; justify-items: start; }
#results #res-song {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 2.1rem/1.15 var(--font-display); font-stretch: 75%; letter-spacing: .02em; color: var(--ivory);
  -webkit-text-stroke: max(2px, .13em) var(--ink); paint-order: stroke fill; padding-right: .2em;
}
#results .res-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .5rem; min-width: 0; }
#results .res-tags__heat { width: 1.7rem; height: 1.7rem; flex: none; background: url(../../img/svg/dif-medium.svg) 50% 50% / contain no-repeat; }
#results .res-tags[data-dif="easy"] .res-tags__heat { background-image: url(../../img/svg/dif-easy.svg); }
#results .res-tags[data-dif="hard"] .res-tags__heat { background-image: url(../../img/svg/dif-hard.svg); }
#results .res-tags[data-dif="expert"] .res-tags__heat { background-image: url(../../img/svg/dif-expert.svg); }
#results .res-tags .pill { min-height: 1.6rem; box-shadow: 0 .15rem 0 var(--ink); }
#results .res-tags__mode { background: var(--paper); color: var(--ink); }
#results .res-tags__mode[data-mode="clone"] { background: var(--cobalt); color: var(--ivory); }
#results .res-tags__mode:empty, #results .res-tags__by:empty { display: none; }
#results .res-tags__by { font: 900 var(--fs-small)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 .12rem 0 var(--ink); }

/* full-combo crown sticker at the band's top-right corner: the gold pill is the element, the crown sits on it */
#results #res-crown {
  position: relative; z-index: 2; isolation: isolate; align-self: end; margin: 0 0 .35rem; padding: .3rem .75rem .32rem; white-space: nowrap;
  border: var(--ow-s) solid var(--ink); border-radius: var(--r-pill); background: var(--grad-gold); box-shadow: 0 .18rem 0 var(--ink);
  font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
#results #res-crown::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% - .35rem); width: 5.4rem; height: 4.6rem; translate: -50% 0; rotate: -6deg;
  background: url(../../img/svg/crown.svg) 50% 100% / contain no-repeat;
}
#results #res-crown::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -2.4rem; width: 9.5rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 225 110 / .8), rgb(255 190 60 / .28) 60%, transparent);
}

/* ---------------------------------------------------------------- score row: gold foil pill, delta chip, ribbon */
#results .res-score-row { grid-area: score; position: relative; align-self: center; justify-self: start; display: flex; margin: 1.15rem 0 .2rem; }
#results .res-score-box {
  display: flex; align-items: center; gap: 1.1rem; min-width: 26rem; height: 5.5rem; padding: 0 1.8rem 0 .55rem;
  border-radius: var(--r-pill); box-shadow: inset 0 .2rem 0 rgb(255 255 255 / .65), inset 0 -.3rem 0 rgb(150 90 0 / .25), 0 .4rem 0 var(--ink);
  background: url(../../img/svg/pat-seigaiha-gold.svg) 0 0 / 2.4rem 1.2rem, var(--grad-gold);
  background-blend-mode: soft-light, normal;
}
#results .res-score-box__label {
  display: grid; place-items: center; align-self: stretch; margin-block: .55rem; padding: 0 .85rem; border-radius: var(--r-pill);
  background: var(--night-2); color: var(--f2); border: var(--ow-s) solid var(--ink);
  font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .14em;
}
#results #res-score {
  flex: 1; text-align: right; font: 700 3.9rem/1 var(--font-num); color: var(--ink); letter-spacing: .01em;
  -webkit-text-stroke: max(2px, .09em) var(--paper); paint-order: stroke fill; text-shadow: 0 .06em 0 rgb(120 70 0 / .35);
}
#results #res-delta {
  position: absolute; left: 4.2rem; bottom: -.95rem; z-index: 2; rotate: -2deg; padding: .15rem .7rem; white-space: nowrap;
  border: var(--ow-s) solid var(--ink); border-radius: var(--r-pill); box-shadow: 0 .16rem 0 var(--ink);
  background: var(--paper); color: var(--ink-2); font: 900 var(--fs-small)/1.25 var(--font-body); letter-spacing: .04em;
}
#results #res-delta.up { background: var(--ok); color: var(--paper); -webkit-text-stroke: max(1.5px, .1em) var(--ink); paint-order: stroke fill; }
#results #res-badge {
  position: absolute; right: -4.4rem; top: -1.25rem; z-index: 3; rotate: 7deg; padding-block: .32rem .36rem;
  font: 700 1.05rem/1.1 var(--font-display); font-stretch: 85%; text-transform: none; letter-spacing: .01em;
}

/* ---------------------------------------------------------------- stars: an arc of five */
#results #res-stars {
  grid-area: stars; align-self: center; justify-self: end; display: flex; align-items: center; gap: .1rem;
  min-height: 0; margin: 1.1rem 0 0; padding: .3rem .2rem 0;
}
/* the owner's stars (img/results/estrella-*.webp): grey when off, gold-yellow when on, metal gold for 6★ */
#results #res-stars span {
  position: relative; display: block; width: 3.3rem; aspect-ratio: 192 / 177;
  background: url(../../img/results/estrella-vacia@192.webp) 50% 50% / contain no-repeat;
}
#results #res-stars span.on { background-image: url(../../img/results/estrella-llena@192.webp); }
#results #res-stars.gold span.on { background-image: url(../../img/results/estrella-dorada@192.webp); }
#results #res-stars span:nth-child(1), #results #res-stars span:nth-child(5) { width: 2.8rem; translate: 0 .5rem; }
#results #res-stars span:nth-child(2), #results #res-stars span:nth-child(4) { width: 3.3rem; translate: 0 .12rem; }
#results #res-stars span:nth-child(3) { width: 3.9rem; }
#results #res-stars span:nth-child(1) { rotate: -10deg; } #results #res-stars span:nth-child(2) { rotate: -5deg; }
#results #res-stars span:nth-child(4) { rotate: 5deg; } #results #res-stars span:nth-child(5) { rotate: 10deg; }
#results[data-tier="failed"] #res-stars { display: none; }

/* failed: the mascot pile replaces the stars */
#results[data-tier="failed"] .res-fail { display: grid; }
#results .res-fail { grid-area: stars; position: relative; justify-items: center; align-self: center; margin: 1.2rem .3rem 0 0; }
#results .res-fail img {
  display: block; width: 15.5rem; height: 8.72rem; object-fit: cover; rotate: 2.5deg; background: var(--night-3);
  border: var(--ow) solid var(--ink); border-radius: var(--r-s); box-shadow: .35rem .4rem 0 var(--ink);
}
#results .res-fail::before {                              /* tape on the photo's top corners */
  content: ''; position: absolute; z-index: 1; top: -.55rem; left: 50%; width: 4.6rem; height: 1.25rem; translate: -50% 0; rotate: 3deg;
  background: #E9DDC4; -webkit-mask: url(../../img/svg/tape-torn.svg) 0 0 / 100% 100%; mask: url(../../img/svg/tape-torn.svg) 0 0 / 100% 100%; opacity: .95;
}
#results .res-fail__cap {
  position: relative; z-index: 1; margin-top: -1.15rem; padding: .25rem .95rem .3rem; rotate: -3deg;
  border: var(--ow-s) solid var(--ink); border-radius: var(--r-xs); background: var(--paper); box-shadow: 0 .2rem 0 var(--ink);
  font: 700 1.15rem/1.1 var(--font-display); font-stretch: 85%; color: var(--ink);
}

/* ---------------------------------------------------------------- middle block: bar + 2x2 cells | ring + streak */
#results .res-mid {
  grid-area: mid; align-self: center; display: grid; gap: .85rem 1rem; margin-top: 1.45rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 15.5rem; grid-template-rows: 1.75rem 5.75rem 5.75rem;
}
#results #res-bar {
  grid-area: 1 / 1 / 2 / 3; display: flex; height: auto; overflow: hidden; align-self: stretch;
  border: var(--ow) solid var(--ink); border-radius: var(--r-pill); background: var(--night-3);
  box-shadow: 0 .2rem 0 var(--ink); position: relative;
}
#results #res-bar::after {                                /* gloss */
  content: ''; position: absolute; left: .5rem; right: .5rem; top: .18rem; height: .3rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .38); pointer-events: none;
}
#results #res-bar i { display: block; height: 100%; flex: none; transform-origin: 0 50%; }
#results #res-bar i + i { box-shadow: inset .16rem 0 0 var(--ink); }
#results #res-bar .b-perfect { background: linear-gradient(180deg, #FFF0A8, #F5C542 55%, #D99A1A); }
#results #res-bar .b-great { background: linear-gradient(180deg, #B4C2FF, #4A66FF 60%, #2340FF); }
#results #res-bar .b-good { background: linear-gradient(180deg, #FFF8E6, #CDBB9C); }
#results #res-bar .b-miss { background: linear-gradient(180deg, #E4DFF0, #A49CBF); }
#results #res-bar i[style*="width: 0"] { display: none; }

#results .res-grid { grid-area: 1 / 1 / 4 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: inherit; }
#results .res-cell--perfect { grid-area: 2 / 1; } #results .res-cell--great { grid-area: 2 / 2; }
#results .res-cell--good { grid-area: 3 / 1; } #results .res-cell--miss { grid-area: 3 / 2; }
#results .res-cell--acc { grid-area: 1 / 3 / 3 / 4; } #results .res-cell--combo { grid-area: 3 / 3; }

/* judgement cells: sticker cards with a colour tag, a big count, the share and a share strip */
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) {
  --tint: var(--paper); --strip: var(--ivory-3);
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: start;
  padding: .55rem .95rem .75rem .7rem; overflow: hidden;
  border: var(--ow) solid var(--ink); border-radius: var(--r-m); box-shadow: 0 .28rem 0 var(--ink);
  background: linear-gradient(150deg, var(--tint) 0%, var(--paper) 62%);
}
#results .res-cell--perfect { --tint: #FFEDB0; --strip: linear-gradient(90deg, #FFE07A, #D99A1A); }
#results .res-cell--great   { --tint: #DCE3FF; --strip: linear-gradient(90deg, #7C8EFF, #2340FF); }
#results .res-cell--good    { --tint: #F4EAD6; --strip: linear-gradient(90deg, #E6D7BB, #B9A27C); }
#results .res-cell--miss    { --tint: #E9E5F2; --strip: linear-gradient(90deg, #C9C3DD, #8E86A8); }
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dt {
  grid-area: 1 / 1; display: inline-flex; align-items: center; padding: .14rem .6rem .18rem; border-radius: var(--r-xs);
  border: var(--ow-s) solid var(--ink); box-shadow: 0 .16rem 0 var(--ink);
  font: 700 1rem/1.1 var(--font-display); font-stretch: 85%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dt .dot { display: none; }
#results .res-cell--perfect dt { background: var(--grad-gold); }
#results .res-cell--great dt { background: var(--grad-blue); color: var(--ivory); -webkit-text-stroke: max(1.5px, .1em) var(--ink); paint-order: stroke fill; }
#results .res-cell--good dt { background: var(--paper); }
#results .res-cell--miss dt { background: var(--night-2); color: var(--miss); }
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) dd {
  grid-area: 2 / 1 / 3 / 3; align-self: end; justify-self: end; margin-top: -.2rem;
  font: 700 2.9rem/1 var(--font-num); color: var(--ink);
}
#results .res-cell--miss dd { color: var(--ink-2); }
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::before {   /* share */
  content: attr(data-pct); grid-area: 1 / 2; justify-self: end; align-self: center;
  font: 900 var(--fs-small)/1 var(--font-body); color: var(--ink-2); letter-spacing: .04em;
}
#results :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::after {    /* share strip */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .42rem; transform-origin: 0 50%;
  transform: scaleX(var(--share, 0)); background: var(--strip); box-shadow: inset 0 .1rem 0 rgb(44 15 21 / .35);
}

/* accuracy ring (#res-ring, --acc set once) with the number inside */
#results .res-cell--acc { position: relative; display: block; }
#results .res-cell--acc dt {
  display: block; position: absolute; z-index: 0; left: 0; right: 0; top: calc(50% + 1.15rem); text-align: center;
  font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
#results #res-ring {
  --ring: 8.4rem;
  position: absolute; z-index: -1; left: 50%; top: calc(-1.15rem - var(--ring) / 2); width: var(--ring); height: var(--ring); translate: -50% 0;
  border-radius: 50%; border: var(--ow) solid var(--ink); box-shadow: 0 .3rem 0 var(--ink);
  background:
    radial-gradient(circle, var(--paper) 0 61%, var(--ink) calc(61% + .5px) 65.5%, transparent calc(65.5% + .5px)),
    repeating-conic-gradient(rgb(44 15 21 / .22) 0 1deg, transparent 1deg 15deg),
    conic-gradient(var(--f1), var(--f2) calc(var(--acc, 0) * .45turn), var(--f3) calc(var(--acc, 0) * 1turn), var(--night-3) 0);
}
#results[data-tier="flawless"] #res-ring { background:
    radial-gradient(circle, var(--paper) 0 61%, var(--ink) calc(61% + .5px) 65.5%, transparent calc(65.5% + .5px)),
    repeating-conic-gradient(rgb(44 15 21 / .22) 0 1deg, transparent 1deg 15deg),
    conic-gradient(#FFF6C8, #F5C542 .4turn, #D99A1A .75turn, #FFE07A 1turn); }
#results[data-tier="failed"] #res-ring { background:
    radial-gradient(circle, var(--paper) 0 61%, var(--ink) calc(61% + .5px) 65.5%, transparent calc(65.5% + .5px)),
    repeating-conic-gradient(rgb(44 15 21 / .22) 0 1deg, transparent 1deg 15deg),
    conic-gradient(#E4DFF0, var(--miss) calc(var(--acc, 0) * 1turn), var(--night-3) 0); }
#results .res-cell--acc dd {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -64%; text-align: center;
  font: 700 2.15rem/1 var(--font-num); color: var(--ink); letter-spacing: -.01em;
}

/* best streak */
#results .res-cell--combo {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-content: center;
  padding: .45rem .8rem .5rem .55rem; border: var(--ow) solid var(--ink); border-radius: var(--r-m); box-shadow: 0 .28rem 0 var(--ink);
  background: linear-gradient(150deg, #FFE2C7, var(--paper) 65%);
}
#results .res-cell--combo::before { content: ''; grid-area: 1 / 1 / 3 / 2; align-self: center; width: 2.5rem; height: 3rem; background: url(../../img/svg/flame-blaze-rim.svg) 50% 50% / contain no-repeat; }
#results .res-cell--combo dt { grid-area: 1 / 2; font: 900 var(--fs-small)/1.1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
#results .res-cell--combo dd { grid-area: 2 / 2; font: 700 2.2rem/1 var(--font-num); color: var(--ink); }
#results .res-cell--combo::after {
  content: attr(data-of); position: absolute; right: .8rem; bottom: .7rem;
  font: 900 var(--fs-small)/1 var(--font-body); color: var(--ink-2); letter-spacing: .04em;
}

/* ---------------------------------------------------------------- timing: Early <-> Late meter + line */
#results .res-timing-row {
  grid-area: timing; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .9rem;
  min-height: 3.5rem; margin-top: 1.1rem; padding: .45rem 1.1rem .45rem .7rem;
  border: var(--ow) solid var(--ink); border-radius: var(--r-m); background: var(--paper); box-shadow: 0 .28rem 0 var(--ink);
}
#results .res-timing-row::before {
  content: 'Timing'; padding: .3rem .6rem; border-radius: var(--r-xs); background: var(--night-2); color: var(--ivory);
  font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
#results #res-meter { display: flex; align-items: center; gap: .5rem; font: 900 var(--fs-small)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
#results .res-meter__early { color: var(--cobalt); }
#results .res-meter__late { color: var(--red-deep); }
#results .res-meter__track {
  position: relative; display: block; width: 14rem; height: 1rem; border-radius: var(--r-pill);
  border: var(--ow-s) solid var(--ink); box-shadow: inset 0 .14rem 0 rgb(44 15 21 / .25);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), rgb(44 15 21 / .35) calc(16.666% - 1px) 16.666%),
    linear-gradient(90deg, var(--early), #EEE9F6 38% 62%, var(--late));
}
#results .res-meter__mark {
  position: absolute; left: 50%; top: 50%; width: 1.35rem; height: 1.35rem; z-index: 1; translate: -50% -50%;
  border-radius: 50%; border: var(--ow-s) solid var(--ink); box-shadow: 0 .16rem 0 var(--ink);
  background: url(../../img/mascot/flame-icon.svg) 50% 45% / 62% auto no-repeat, var(--paper);
  transform: translateX(calc(var(--off, 0) * 6.5rem));
}
#results #res-meter[data-empty] .res-meter__mark { display: none; }
#results #res-timing { font: 800 .95rem/1.3 var(--font-body); color: var(--ink); text-wrap: pretty; }

/* ---------------------------------------------------------------- No Fail: PRACTICE stamp + note */
#results #res-note {
  grid-area: note; display: flex; align-items: center; gap: 1.1rem; min-height: 4.5rem; margin-top: 1rem; padding: .55rem 1.2rem .55rem .9rem;
  border: var(--ow) dashed var(--ink-2); border-radius: var(--r-m); background: linear-gradient(90deg, #FFF1C2, var(--paper) 70%);
  font: 800 1rem/1.35 var(--font-body); color: var(--ink);
}
#results #res-note::before {
  content: 'PRACTICE'; flex: none; padding: .35rem .7rem .3rem; rotate: -7deg;
  border: .2rem solid var(--gold-deep); border-radius: var(--r-xs); box-shadow: inset 0 0 0 .14rem var(--paper), inset 0 0 0 .3rem var(--gold-deep);
  background: rgb(255 239 176 / .7); color: var(--gold-deep);
  font: 700 1.15rem/1 var(--font-display); font-stretch: 85%; letter-spacing: .1em;
}

/* ---------------------------------------------------------------- rank strip (className res-rank ok|warn|'') */
#results #res-rank {
  grid-area: rank; display: flex; align-items: center; gap: 1rem; min-height: 4.6rem; margin-top: 1rem; padding: .45rem 1rem .45rem .65rem;
  border: var(--ow) solid var(--ink); border-radius: var(--r-m); background: var(--paper); box-shadow: 0 .28rem 0 var(--ink);
  font: 900 1.05rem/1.3 var(--font-body); color: var(--ink);
}
#results #res-rank:empty { display: none; }
#results #res-rank::before { content: ''; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
#results #res-rank b { font: 700 1.75rem/1 var(--font-display); font-stretch: 85%; color: var(--red); -webkit-text-stroke: max(1.5px, .06em) var(--ink); paint-order: stroke fill; vertical-align: -.08em; }
#results #res-rank button { margin-left: auto; flex: none; }
/* pending: a spinning flame (the only loop of the strip, while pending) */
#results #res-rank:not(.ok, .warn)::before {
  width: 2.9rem; height: 2.9rem; margin: .3rem;
  background: url(../../img/mascot/flame-icon.svg) 50% 45% / 58% auto no-repeat, var(--night-3); box-shadow: 0 0 0 var(--ow-s) var(--ink), inset 0 0 0 .2rem var(--f3);
  --loop: ff-spin 1.2s linear infinite; animation: var(--loop);
}
#results #res-rank:not(.ok, .warn) { background: linear-gradient(90deg, var(--ivory-2), var(--paper) 60%); color: var(--ink-2); }
/* ok: VERIFIED hanko, medal for the top 3 */
#results #res-rank.ok { background: linear-gradient(90deg, #DDF4E5, var(--paper) 62%); }
#results #res-rank.ok::before {
  content: 'Verified'; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: -.55rem 0; rotate: -12deg;
  padding-bottom: 1.05rem; letter-spacing: 0; color: var(--ok); border: .2rem solid currentColor;
  box-shadow: inset 0 0 0 .16rem var(--paper), inset 0 0 0 .3rem currentColor;
  background: url(../../img/svg/check.svg) 50% 76% / 1.15rem auto no-repeat, rgb(31 174 91 / .1);
  font: 700 var(--fs-small)/1 var(--font-display); font-stretch: 75%; text-transform: uppercase;
}
#results #res-rank .res-rank__medal { flex: none; width: 3.4rem; height: 3.6rem; margin: -.4rem 0 -.4rem .2rem; rotate: 8deg; }
/* warn: ember strip, meh face */
#results #res-rank.warn { background: linear-gradient(90deg, var(--f2), #FFE9A8 70%); }
#results #res-rank.warn::before {
  width: 3rem; height: 3rem; margin: .25rem;
  background: url(../../img/mascot/face-meh.svg) 50% 60% / 74% auto no-repeat, var(--f4);
  box-shadow: 0 0 0 var(--ow-s) var(--ink), inset 0 .25rem 0 rgb(255 255 255 / .25);
}

/* ---------------------------------------------------------------- buttons (the bichito stands in the corner on the right) */
#results .res-actions { grid-area: acts; align-self: end; display: flex; gap: 1rem; margin: 1.25rem 6.6rem 0 0; flex-wrap: nowrap; }
#results .res-actions button { flex: 1 1 0; min-height: 4rem; justify-content: space-between; padding-inline: 1.5rem 1.1rem; font-size: 1.4rem; }
#results #btn-again { flex-grow: 1.45; }

/* the bichito stands in the free corner right of the buttons (inside the board, so his bubble stays off Aisu) */
#results > .mascot-anchor { left: calc(2.5vw + var(--res-w) - 7.7rem); }

/* confetti (tiers 4-6): one-shot pieces falling over the board, clipped to it */
#results .res-confetti { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: var(--r-xl); pointer-events: none; display: none; }
#results .res-confetti i {
  position: absolute; left: var(--x, 50%); top: -1.6rem; width: calc(.55rem * var(--s, 1)); height: calc(.95rem * var(--s, 1)); opacity: 0;
  background: var(--c, var(--red)); border: 1.5px solid var(--ink); border-radius: 2px; rotate: var(--r0, 0deg);
}
#results .res-confetti i:nth-child(5n + 1) { --c: var(--red); }
#results .res-confetti i:nth-child(5n + 2) { --c: var(--gold); }
#results .res-confetti i:nth-child(5n + 3) { --c: var(--cobalt-hi); }
#results .res-confetti i:nth-child(5n + 4) { --c: var(--paper); }
#results .res-confetti i:nth-child(5n + 5) { --c: var(--f3); border-radius: 50%; height: calc(.6rem * var(--s, 1)); width: calc(.6rem * var(--s, 1)); }

/* "Any key: skip" (only during the ceremony; it sits where the buttons will land) */
#results .res-skip {
  display: block; position: absolute; z-index: 4; bottom: 2.65rem; left: calc((100% - 6.6rem) / 2); translate: -50% 0; opacity: 0; pointer-events: none;
  padding: .3rem .9rem; border-radius: var(--r-pill); background: var(--night-2); border: var(--ow-s) solid var(--ink);
  color: var(--ivory); font: 900 var(--fs-small)/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
body[data-input="pad"] #results .res-skip { font-size: 0; }
body[data-input="pad"] #results .res-skip::after { content: 'Any button: skip'; font-size: var(--fs-small); }

/* ============================================================================================ the ceremony (3.12)
   t0 = --t0 (aisu:screen.moveAt). Async parts (rank, hanko, medal, ribbon) are animated from JS. */
#results.reveal.pre-rank #res-rank, #results.reveal.pre-badge #res-badge { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  body[data-screen="results"] #res-field.reveal { animation: ff-fade 200ms linear var(--t0) backwards; }
  #results.reveal .results-board { animation: ffr-board 420ms var(--ease-out-expo) var(--t0) backwards; }
  #results.reveal .res-side { animation: ff-rise-in 260ms var(--ease-out) calc(var(--t0) + 80ms) backwards; }
  #results.reveal .res-cover-wrap { animation: ffr-cover 380ms var(--spring-pop) calc(var(--t0) + 100ms) backwards; }
  #results.reveal .res-score-box { animation: ff-pop 320ms var(--spring-pop) calc(var(--t0) + 100ms) backwards; }
  #results.reveal #res-bar { animation: ff-fade 160ms linear calc(var(--t0) + 120ms) backwards; }
  #results.reveal #res-bar i { animation: ff-bar 320ms var(--ease-out) calc(var(--t0) + 160ms) backwards; }
  #results.reveal #res-bar .b-great { animation-delay: calc(var(--t0) + 210ms); }
  #results.reveal #res-bar .b-good { animation-delay: calc(var(--t0) + 260ms); }
  #results.reveal #res-bar .b-miss { animation-delay: calc(var(--t0) + 310ms); }
  #results.reveal :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss) { animation: ffr-cell 320ms var(--spring-stamp) calc(var(--t0) + 320ms) backwards; }
  #results.reveal .res-cell--great { animation-delay: calc(var(--t0) + 370ms); }
  #results.reveal .res-cell--good { animation-delay: calc(var(--t0) + 420ms); }
  #results.reveal .res-cell--miss { animation-delay: calc(var(--t0) + 470ms); }
  #results.reveal :is(.res-cell--perfect, .res-cell--great, .res-cell--good, .res-cell--miss)::after { animation: ff-bar 300ms var(--ease-out) calc(var(--t0) + 400ms) backwards; }
  #results.reveal .res-cell--acc :is(dt, dd) { animation: ff-fade 180ms linear calc(var(--t0) + 470ms) backwards; }
  #results.reveal #res-ring { animation: ffr-ring 400ms var(--spring-pop) calc(var(--t0) + 470ms) backwards; }
  #results.reveal .res-cell--combo { animation: ff-rise-in 260ms var(--ease-out) calc(var(--t0) + 500ms) backwards; }
  #results.reveal .res-timing-row { animation: ff-rise-in 260ms var(--ease-out) calc(var(--t0) + 480ms) backwards; }
  #results.reveal .res-meter__mark { animation: ffr-mark 480ms var(--ease-out-expo) calc(var(--t0) + 540ms) backwards; }
  #results.reveal #res-timing { animation: ff-fade 220ms linear calc(var(--t0) + 560ms) backwards; }
  #results.reveal #res-stars span { animation: ff-fade 160ms linear calc(var(--t0) + 640ms) backwards; }
  #results.reveal #res-stars span.on { animation: ffr-star 340ms var(--spring-pop) calc(var(--t0) + 640ms + var(--i, 0) * 80ms) backwards; }
  #results.reveal .res-fail { animation: ffr-photo 420ms var(--spring-pop) calc(var(--t0) + 640ms) backwards; }
  #results.reveal .res-head__cue { animation: ffr-cue 860ms linear calc(var(--t0) + 120ms) both; }
  #results.reveal .res-head__rays { animation: ff-fade 380ms linear calc(var(--t0) + 1000ms) backwards; }
  #results.reveal .res-head__burst { animation: ffr-burst 360ms var(--spring-pop) calc(var(--t0) + 990ms) backwards; }
  #results.reveal #res-verdict { animation: ff-stamp 500ms var(--spring-stamp) calc(var(--t0) + 1000ms) backwards; }
  #results.reveal .res-head__shock { animation: ff-shockwave 420ms var(--ease-out) calc(var(--t0) + 1180ms); }
  #results.reveal .res-head__tw { animation: ffr-twinkle 320ms var(--spring-pop) calc(var(--t0) + 1200ms) backwards; }
  #results.reveal .res-head__tw--2 { animation-delay: calc(var(--t0) + 1240ms); }
  #results.reveal .res-head__tw--3 { animation-delay: calc(var(--t0) + 1280ms); }
  #results.reveal .res-head__tw--4 { animation-delay: calc(var(--t0) + 1320ms); }
  #results.reveal #res-delta { animation: ff-pop 320ms var(--spring-pop) calc(var(--t0) + 1220ms) backwards; }
  #results.reveal #res-crown { animation: ff-stamp 500ms var(--spring-stamp) calc(var(--t0) + 1340ms) backwards; }
  #results.reveal #res-note { animation: ff-rise-in 260ms var(--ease-out) calc(var(--t0) + 1400ms) backwards; }
  #results.reveal #res-note::before { animation: ff-stamp 480ms var(--spring-stamp) calc(var(--t0) + 1460ms) backwards; }
  #results.reveal .res-actions button { animation: ff-rise-in 260ms var(--ease-out) calc(var(--t0) + 180ms) backwards; }
  #results.reveal .res-actions button + button { animation-delay: calc(var(--t0) + 220ms); }
  /* .res-skip stays hidden: the ceremony lasts ~1.5s and the buttons are there from +180ms (it sat on top of them) */
  #results.reveal:is([data-tier="flawless"], [data-tier="legendary"], [data-tier="amazing"]) .res-confetti { display: block; }
  #results.reveal .res-confetti i { animation: ffr-confetti var(--dur, 1800ms) cubic-bezier(.25, .2, .55, 1) calc(var(--t0) + 1160ms + var(--d, 0ms)) both; }
}

/* the song ends (camera play -> title): the board does not wait for Aisu at --move-at. It rides in from the left
   behind her on the camera's own curve (shot-math camSpring, w = 10/s, sampled over 700ms), 50ms after the shot,
   landing at --move-at + 150ms. ffr-board starts it at -(its width + 6vw): at every frame (25ms steps, her running
   50ms late) its right edge + 1.2rem stays left of her silhouette + 3.56vh halo at 1024x768, 1100x900, 1280x720,
   1440x900 and 2560x1080 (impl board_race.py). The section skips the G0 wait; #res-field keeps it (its --t0 is
   --move-at). results-view starts the ceremony at RACE_T0 and holds skips (which would finish this slide) until
   --move-at. When body[data-move] goes the board is the plain ffr-board again, already finished. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timing-function: linear(0, 1)) {
    body[data-move="play-title"] #results { animation: none; }
    body[data-move="play-title"] #results.reveal .results-board {
      animation: ffr-board calc(var(--move-at, 0ms) + 100ms) linear(0, 0.0354, 0.1173, 0.22, 0.3277, 0.4313, 0.526, 0.6096, 0.6817, 0.7428, 0.7938, 0.836, 0.8705, 0.8985, 0.9211, 0.9392, 0.9537, 0.9652, 0.9743, 0.9815, 0.9872, 0.9916, 0.9951, 0.9979, 1) 50ms backwards;
    }
  }
}

@keyframes ffr-board   { from { transform: translateX(calc(-100% - 6vw)); } }
@keyframes ffr-cover   { from { opacity: 0; transform: scale(.6) rotate(-14deg); } 30% { opacity: 1; } }
@keyframes ffr-cell    { 0% { opacity: 0; transform: scale(1.35) rotate(-4deg); } 18% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ffr-ring    { from { opacity: 0; transform: rotate(-90deg) scale(.6); } 25% { opacity: 1; } }
@keyframes ffr-mark    { from { transform: translateX(0); } }
@keyframes ffr-star    { 0% { opacity: 0; transform: scale(2.3) rotate(-28deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ffr-photo   { from { opacity: 0; transform: translateY(-1.5rem) rotate(-8deg) scale(.8); } 30% { opacity: 1; } }
@keyframes ffr-burst   { from { opacity: 0; transform: scale(.2) rotate(-8deg); } 35% { opacity: 1; } }
@keyframes ffr-twinkle { from { opacity: 0; transform: scale(0) rotate(-90deg); } 40% { opacity: 1; } }
@keyframes ffr-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0rem), 58rem) rotate(var(--rot, 540deg)); } }
@keyframes ffr-cue     { 0% { opacity: 0; transform: translateY(.8rem) scale(.5); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
                         12% { opacity: 1; transform: none; } 38% { transform: none; } 41% { transform: scale(1.05); } 45% { transform: none; }
                         64% { transform: none; } 67% { transform: scale(1.06); } 71% { transform: none; } 80% { transform: none; } 83% { transform: scale(1.07); }
                         88% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.4, 0, 1, 1); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes ffr-skip    { 0% { opacity: 0; } 6%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================================================ other sizes */
/* heights under 675px hit the 12px rem floor: the board scrolls internally, the header stays inside */
@media (max-height: 674px) {
  #results .results-board { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-top: 1.4rem; }
  #results .res-head { margin-top: 0; }
  #results .res-fw { top: 0; }
}
/* compact board (< 48rem, narrow windows): the middle block stacks */
@container (max-width: 43.5rem) {        /* content box: board < ~47rem */
  #results .res-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1.75rem 5.75rem 5.75rem 8.6rem; }
  #results .res-grid { grid-area: 1 / 1 / 5 / 3; }                  /* the subgrid takes the 4th row (ring + streak) */
  #results .res-cell--acc { grid-area: 4 / 1; } #results .res-cell--combo { grid-area: 4 / 2; align-self: center; }
  #results .res-timing-row { grid-template-columns: auto minmax(0, 1fr); }
  #results #res-timing { grid-column: 1 / -1; }
  #results .res-score-box { min-width: 0; }
  #results #res-score { font-size: 3.1rem; }                         /* seven digits fit next to the stars */
  #results #res-badge { right: -2rem; }
  /* the banner and the stars shrink so the title and the score keep their room */
  #results .res-cover-wrap[data-banner] { width: 10.4rem; }
  #results #res-stars span { width: 2.6rem; }
  #results #res-stars span:nth-child(1), #results #res-stars span:nth-child(5) { width: 2.3rem; }
  #results #res-stars span:nth-child(2), #results #res-stars span:nth-child(4) { width: 2.7rem; }
  #results #res-stars span:nth-child(3) { width: 3.2rem; }
}

/* reduced graphics: no fireworks, rays, flames or foil shine (base.css hides the shared ones) */
body.lowfx #results :is(.res-head__rays, .res-fw) { display: none; }
body.lowfx #results .res-score-box::after { display: none; }