/* The cassette shares its silhouette, reels and label with the story player. */
.review-prize {
  --ink:#213e35; --stamp:#566a60; --wash:#e0e3d9; --accent:#c9d2c7;
  --tape-edge:#34433f; --tape-light:#dce0d9; --tape-body:#a8b0ab; --tape-shade:#8c9791;
  --tape-wall:#748179; --tape-gloss:#f3f2e6; --tape-label:#e2e3db; --tape-stripe:#808c85; --tape-window:#56645e; --tape-glass:#bcc3b8;
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); overflow:hidden; position:relative;
  margin:18px 0 26px; border:2px solid #263e36; border-radius:16px; box-shadow:0 5px #263e36; background:#fffaf0;
}
.review-prize[data-finish=honey] {
  --stamp:#8c622a;--wash:#f8e8bd;--accent:#eec571;--tape-edge:#42392c;--tape-light:#ffe7a6;--tape-body:#e5bb69;
  --tape-shade:#c79951;--tape-wall:#a67a42;--tape-gloss:#fff1c7;--tape-label:#fff4d6;
  --tape-stripe:#ba7643;--tape-window:#584f40;--tape-glass:#d4ae72;
}
.review-prize[data-finish=jade] {
  --stamp:#26745b;--wash:#d7f2dd;--accent:#84e4a5;--tape-edge:#1c453d;--tape-light:#bdf9bf;--tape-body:#72dfaa;
  --tape-shade:#36ab85;--tape-wall:#278268;--tape-gloss:#e2ffd3;--tape-label:#fff2d0;
  --tape-stripe:#cf8453;--tape-window:#274f49;--tape-glass:#a6d2ab;
}
.review-prize[data-finish=gold] {
  --stamp:#8b5c1c;--wash:#f6e5ac;--accent:#ffda73;--tape-edge:#55381d;--tape-light:#fff3a8;--tape-body:#f3c768;
  --tape-shade:#dca846;--tape-wall:#a5702f;--tape-gloss:#fff4bb;--tape-label:#ffe4a0;
  --tape-stripe:#ba7e2e;--tape-window:#674a2c;--tape-glass:#eabd65;
}
.prize-stage {position:relative;min-width:0;isolation:isolate;overflow:hidden;display:grid;place-items:center;
  border-inline-end:2px solid #263e36;background:#25483e;
  background-image:radial-gradient(ellipse at 49% 50%,#446751 0%,#274c41 57%,#213c36 100%)}
.prize-stage:before {content:"";position:absolute;inset:0;opacity:.17;background:radial-gradient(circle at 1px 1px,#e0eac9 .9px,transparent 1.2px) 0 0 / 8px 8px}
.prize-grooves {position:absolute;inset:-30%; opacity:.23;pointer-events:none;background:repeating-radial-gradient(ellipse at 49% 58%,transparent 0px 16px,#9ab49b 17px,transparent 18px 27px)}
.prize-stage:after {content:"";position:absolute;inset:10px;border:1px solid #c3d5ae36;border-radius:6px;pointer-events:none}
.prize-art {position:relative;width:min(98%,345px);height:auto;overflow:visible;z-index:1;filter:drop-shadow(0 4px 1px #122c2433)}
.prize-ribbon {opacity:0;transform-origin:95px 100px;transform:scaleY(.25);transition:transform .3s ease-in,opacity .25s}
[data-finish=graphite] .prize-ribbon {transform:scaleY(1);opacity:1}
[data-finish=graphite] .prize-art .tape-hub path{fill:#62706b}
[data-finish=graphite] .prize-art .tape-hub circle:first-child {fill:#d7dcd4}
[data-finish=graphite] .prize-art [class^=tape-pack] {fill:#6e746e;stroke:#404a45}
.prize-art .tape-hub{transform-box:fill-box;transform-origin:center}
[data-finish=gold] .prize-art .prize-shell {fill:url(#prize-foil)}
[data-finish=gold] .prize-art .tape-hub circle:first-child {fill:#ffdf86;stroke:#5a411e}
[data-finish=gold] .prize-art .tape-hub path{fill:#977335}
[data-finish=gold] .prize-art .tape-hub circle:last-child {fill:#65552f}
.prize-stars,.prize-polish,.prize-glints {opacity:0}
[data-finish=gold] .prize-glints {opacity:.76}
[data-finish=gold] .prize-faceplate {fill:url(#prize-foil);stroke:#76501f}
[data-finish=graphite] .prize-stage {background-image:radial-gradient(ellipse at 50% 48%,#596c61,#354d47 62%,#283e3a)}
[data-finish=jade] .prize-stage {background-image:radial-gradient(ellipse at 50% 48%,#50825d,#235d49 54%,#163e35)}
[data-finish=gold] .prize-stage {background-image:radial-gradient(ellipse at 50% 48%,#7e7644,#494e36 55%,#303f31)}
[data-finish=gold] .prize-stars {opacity:1}
.review-prize[data-finish=jade] .prize-art {filter:drop-shadow(0 0 10px #7ce8b056) drop-shadow(0 3px 1px #1c362881)}
.review-prize[data-finish=gold] .prize-art {filter:drop-shadow(0 0 12px #ffd47a61) drop-shadow(0 3px 1px #30291880)}
.prize-caption {min-width:0;position:relative;align-self:center;padding:clamp(19px,2.4vw,30px) clamp(18px,3vw,38px);color:var(--ink)}
.prize-caption h2 {margin:0;font:800 clamp(1.05rem,2.05vw,1.55rem)/1.15 TonSerif,Georgia,serif;color:#3a5246;letter-spacing:-.028em}
.prize-caption .result-total {display:flex;align-items:baseline;gap:0 18px;flex-wrap:wrap;margin:2px 0 8px;padding:0;background:none}
.prize-caption .result-total strong {display:inline-flex;gap:.06em;align-items:baseline;font:900 clamp(3rem,6.5vw,5.1rem)/1.04 TonSerif,Georgia,serif;letter-spacing:-.055em;color:#233e35;font-variant-numeric:tabular-nums}
.prize-caption .prize-percent {min-width:1ch;font-variant-numeric:lining-nums tabular-nums}
.prize-caption .result-total small {font-size:.48em;letter-spacing:-.035em;color:var(--stamp)}
.prize-caption .result-total .score-words {font-size:.94rem;font-weight:650;color:#526456;white-space:normal}
.prize-caption .review-count {margin:6px 0 0;font-size:.88rem;font-weight:650;color:#466053}
.score-strip {display:flex;gap:5px;max-width:340px}
.score-strip i {position:relative;flex:1;height:9px;background:#e5e5d9;border:1px solid #bcc8b6;border-radius:3px;overflow:hidden}
.score-strip i::after {content:"";position:absolute;inset:0 auto 0 0;width:var(--earned,0%);background:var(--stamp)}
.score-strip i[data-count=counting]{border-color:var(--stamp);box-shadow:0 0 0 1px var(--stamp)}
.sentence-results .review-fragment {position:relative;overflow:hidden}
.review-fragment::after {position:absolute;pointer-events:none;content:"";left:0;bottom:0;width:var(--earned,0%);height:2px;background:#70a589}
.review-fragment[data-outcome=partial]::after {background:#d2a558}
.review-fragment[data-count=counting]{border-color:#628f74;background:#f3f5e8}
.review-fragment[data-count=pending] .result-sign,.review-fragment[data-count=counting] .result-sign,.review-fragment[data-count=pending] .result-state,.review-fragment[data-count=counting] .result-state {opacity:0}
.review-fragment .result-sign,.review-fragment .result-state {transition:opacity .17s ease}
.sentence-results>p.score-note {color:#657365;font-size:.84rem}
@media(min-width:751px){.review-prize{min-height:204px}}
@media(max-width:750px){.review-prize{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.prize-caption{padding:18px 15px}}
@media(max-width:510px){
 .review-prize{grid-template-columns:minmax(0,1fr);margin:13px 0 21px;border-radius:12px}
 .prize-stage{border-inline-end:0;border-bottom:1.5px solid #263e36;height:132px}
 .prize-art{width:218px}.prize-stage:after{inset:6px}
 .prize-caption{padding:13px 17px 15px}.prize-caption h2{font-size:1.06rem}.prize-caption .result-total{gap:0 12px;margin:1px 0 7px}
 .prize-caption .result-total strong{font-size:3.15rem}.prize-caption .review-count{font-size:.82rem}
 .score-strip{max-width:none}.score-strip i{height:7px}
}
@media(prefers-reduced-motion:no-preference){
 .prize-pose{transform-origin:50% 58%}
 [data-counting=true] .prize-pose{animation:prize-arrive .42s ease-out both}
 [data-counting=true][data-finish=honey] .prize-pose{animation-name:prize-honey}
 [data-counting=true][data-finish=jade] .prize-pose{animation-name:prize-jade}
 @keyframes prize-honey{0%,100%{transform:none}45%{transform:translateY(-3px) scale(1.03)}}
 @keyframes prize-jade{0%,100%{transform:none}45%{transform:translateY(-4px) scale(1.04)}}
 /* A distinct animation restarts the same lift when gold follows jade on the final frame. */
 [data-finish=gold] .prize-pose{animation:prize-gold .42s ease-out both}
 @keyframes prize-gold{0%,100%{transform:none}45%{transform:translateY(-4px) scale(1.04)}}
 [data-counting=true] .prize-art .tape-hub{animation:prize-reel 1.7s linear infinite}
 [data-finish=gold] .prize-polish {animation:prize-shine 1s .06s ease-out both}
 [data-finish=gold] .prize-stars {animation:prize-stars .68s ease-out both;transform-origin:56% 48%}
 @keyframes prize-arrive{from{transform:translateY(5px) scale(.95)}to{transform:none}}
 @keyframes prize-reel{to{transform:rotate(1turn)}}
 @keyframes prize-shine{0%{opacity:0}13%{opacity:.63}80%{opacity:.3}100%{opacity:0;transform:translateX(350px)}}
 @keyframes prize-stars{0%{opacity:0;transform:scale(.85)}65%{opacity:1;transform:scale(1.045)}100%{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.prize-ribbon,.review-fragment .result-sign,.review-fragment .result-state{transition:none}}
@media(forced-colors:active){.review-prize{border:2px solid CanvasText}.prize-stage{forced-color-adjust:none}.score-strip i::after,.review-fragment::after{background:Highlight}}
