/* Prize presentation floats over the real cabinet, not inside another card. */
dialog.machine-reward:not(.detail-sheet){width:min(calc(100% - 24px),440px);padding:10px 16px 20px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow-x:hidden}
dialog.machine-reward::backdrop{background:linear-gradient(#0006,#0009 80%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* The opening effects have finished; leave only the cabinet behind the prize. */
body:has(dialog.machine-reward[open]) .machine-live-scene :is(.prize-capsule,.reveal-rays,.reveal-shade,.reveal-sparks){visibility:hidden}
.machine-reward #modalContent{position:relative;text-align:center}
.machine-reward .modal-top{min-height:40px;margin:0 0 2px;align-items:center;text-align:left}
.machine-reward .modal-top .eyebrow{display:none}
.machine-reward .modal-top h2{font-size:12px;font-weight:500;color:#c5c5bd;text-shadow:0 2px 8px #000}
.machine-reward .modal-top .icon-button{width:40px;height:40px;border-radius:50%;background:#0a0c0d60;border-color:#d5bd7c44;color:#eee8dc}
.reward-showcase .reward-hero{width:min(100%,340px);height:auto;aspect-ratio:1;margin:0 auto;display:grid;place-items:center;isolation:isolate;background:radial-gradient(circle,color-mix(in srgb,var(--reward-color) 16%,transparent),transparent 68%)}
.reward-showcase .reward-hero:before,.reward-showcase .reward-hero:after{content:none}
.reward-orbit{position:absolute;inset:0;width:100%;height:100%;color:var(--reward-color);z-index:-1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--reward-color) 20%,transparent));pointer-events:none}
.reward-hero img.reward-sakura{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:.7;filter:brightness(.85) saturate(.78);z-index:2}
.reward-hero img.token-medallion{display:block;width:49%;height:auto;aspect-ratio:1;max-height:none;object-fit:contain;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;filter:drop-shadow(0 0 14px #e8aa3566);z-index:1}
.reward-hero img.catalog-art.large{width:79%;height:79%;max-height:none;object-fit:contain;z-index:1;filter:drop-shadow(0 8px 12px #0009)}
.reward-showcase .reward-category{margin:3px 0 7px;font-size:11px;font-weight:750;letter-spacing:1px;color:var(--reward-color);text-shadow:0 2px 8px #000}
.reward-showcase h2{font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.5px;color:#fbfaf4;text-shadow:0 3px 12px #000}
.reward-amount{display:block;font-size:58px;font-weight:800;line-height:1.05;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.reward-unit{display:block;font-size:23px;font-weight:700;letter-spacing:.5px;margin-top:4px}
.reward-showcase .reward-caption{font-size:12px;color:#c2c3bb;text-shadow:0 2px 8px #000;margin:9px 0}
.machine-reward .reward-effect{border:0;background:none;padding:0;color:var(--reward-color);text-shadow:0 2px 8px #000}
.machine-reward .reward-breakdown{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin:12px 0 2px;padding:8px 0;border-top:1px solid #c9b88825;color:#b2b4aa}
.machine-reward .reward-breakdown>span{padding:0;border:0;display:flex;gap:6px;font-size:10px}
.machine-reward .reward-breakdown b{font-weight:600;color:#dadbd3}
.machine-reward #modalContent>.primary.full{margin-top:14px;min-height:48px}
.machine-reward #modalContent>.secondary.full{margin-top:8px;min-height:44px;background:#05070555;border-color:#dfb039;color:#f6cb57}
.machine-reward .panel{background:#080c0c80;text-align:left}
.reward-tokens .reward-orbit{display:none}.reward-tokens .reward-hero img.token-medallion{width:100%;filter:none}
.reward-item .reward-hero img.reward-sakura{z-index:0;opacity:1;mix-blend-mode:screen;filter:var(--reward-scene-tone,none);mask-image:radial-gradient(ellipse,#000 55%,transparent 74%)}
.reward-item[style*="--r0"]{--reward-scene-tone:grayscale(1)}.reward-item[style*="--r1"]{--reward-scene-tone:hue-rotate(210deg)}.reward-item[style*="--r2"]{--reward-scene-tone:hue-rotate(285deg)}.reward-item[style*="--r4"]{--reward-scene-tone:hue-rotate(115deg)}
@media(max-height:690px){
 .reward-showcase .reward-hero{width:min(100%,210px)}
 dialog.machine-reward:not(.detail-sheet){padding:4px 12px 12px}
 .reward-showcase h2{font-size:23px}
 .reward-amount{font-size:42px}.reward-unit{font-size:18px}
 .machine-reward .reward-breakdown{margin-top:7px;padding:6px 0}
 .machine-reward #modalContent>.primary.full{margin-top:9px}
}
@media(prefers-reduced-motion:no-preference){
 .machine-reward .reward-hero{animation:prize-emerge .45s ease-out both}
 @keyframes prize-emerge{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
}