.recorded-reveal{--reel-size:92px;margin:20px 0 16px;min-width:0}
.reveal-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:6px;background:var(--surface-low);border-radius:15px;margin-bottom:20px}
.reveal-modes button{min-width:0;min-height:44px;padding:10px 7px;border:0;border-radius:11px;background:transparent;color:var(--text-secondary);font:inherit;font-size:.8125rem;font-weight:650;cursor:pointer}
.reveal-modes button[aria-pressed=true]{background:var(--primary-container);color:var(--on-primary);box-shadow:0 5px 15px #0003}
.reveal-modes button:hover{filter:brightness(1.1)}
.reveal-modes button:focus-visible,.recorded-scratch canvas:focus-visible{outline:3px solid var(--ice-container);outline-offset:3px}
.reveal-facts{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:.75rem;color:var(--text-secondary)}
.reveal-prize{font-weight:650;text-align:center;margin:13px 0 20px;overflow-wrap:anywhere}
.reveal-stage{position:relative;display:grid;place-items:center;min-height:250px;padding:22px 12px;border-radius:24px;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--primary-container) 20%,transparent),transparent 68%),linear-gradient(145deg,var(--surface-low),var(--surface-card));box-shadow:inset 0 1px 0 #ffffff0b,0 16px 30px -20px #0008;overflow:hidden}
.reveal-status{min-height:2.8em;text-align:center;font-size:.8125rem;color:var(--text-secondary);line-height:1.6;margin:16px 0}
.reveal-result{text-align:center;padding:15px 8px 20px;animation:recorded-result-in .45s ease both}
.reveal-result[hidden],.reveal-controls [hidden],.recorded-scratch canvas[hidden]{display:none!important}
.reveal-result .eyebrow{display:block;color:var(--primary-container);font-size:.6875rem;letter-spacing:.12em;margin:10px 0 6px}
.reveal-result h3{font-size:1.85rem;line-height:1.2;margin:0;overflow-wrap:anywhere}
.reveal-medal{display:grid;place-items:center;width:50px;height:50px;margin:auto;border-radius:17px;background:var(--primary-container);color:var(--on-primary);box-shadow:0 9px 26px color-mix(in srgb,var(--primary-container) 15%,transparent);font-size:28px}
.reveal-controls{display:grid;gap:11px}.reveal-controls>.text-button{min-height:40px;justify-self:center}
.reveal-replay-note{text-align:center;color:var(--text-secondary);font-size:.6875rem;line-height:1.5;margin:14px 0 0}
.reveal-delivery{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;margin:24px 0 10px}
.recorded-wheel{position:relative;width:min(100%,250px);aspect-ratio:1;display:grid;place-items:center;margin:8px}
.wheel-disc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -22.5deg,var(--primary-container) 0 45deg,var(--ice-deep) 45deg 90deg,var(--ice-container) 90deg 135deg,var(--primary-deep) 135deg 180deg,var(--primary-container) 180deg 225deg,var(--ice-deep) 225deg 270deg,var(--ice-container) 270deg 315deg,var(--primary-deep) 315deg);border:8px solid var(--surface-raised);box-shadow:0 13px 28px #0006,inset 0 0 0 2px #ffffff38;will-change:transform}
.wheel-disc>span{--angle:calc(var(--segment)*45deg);position:absolute;inset:0;display:grid;place-items:start center;padding-top:17px;transform:rotate(var(--angle));color:var(--on-primary);font-size:24px;font-weight:700}
.wheel-disc>span:nth-child(even){color:var(--ice-container)}
.wheel-hub{z-index:1;display:grid;place-items:center;position:relative;width:72px;height:72px;border-radius:50%;background:var(--surface-card);box-shadow:0 6px 18px #0006,inset 0 0 0 5px #ffffff0c;font-size:21px;font-weight:900;letter-spacing:-.06em;color:var(--text-primary)}
.wheel-pointer{position:absolute;z-index:2;top:-9px;left:calc(50% - 13px);width:26px;height:32px;background:var(--primary-container);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 3px #0005)}
[data-mode=wheel][data-phase=playing] .wheel-disc{animation:recorded-wheel-spin 3.2s cubic-bezier(.14,.64,.1,1) both}
[data-mode=wheel][data-phase=complete] .wheel-hub{background:var(--primary-container);color:var(--on-primary);transition:background .3s}
.recorded-slot{position:relative;width:min(100%,370px);padding:17px 17px 22px;background:linear-gradient(145deg,var(--surface-raised),var(--surface-low));border-radius:23px;box-shadow:inset 0 1px 0 #ffffff24,0 14px 25px #0005}
.slot-lights{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 7px 16px;color:var(--primary-container);font-size:.75rem;letter-spacing:.22em}
.slot-lights>span{width:7px;height:7px;border-radius:50%;background:var(--ice-container);box-shadow:0 0 10px var(--ice-container)}
.slot-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.slot-reel{height:var(--reel-size);min-width:0;overflow:hidden;border-radius:12px;background:var(--ice-container);color:var(--on-ice);box-shadow:inset 0 4px 9px #0003}
.slot-reel:nth-child(2){background:var(--primary-container);color:var(--on-primary)}.slot-track{will-change:transform;transform:translateY(0)}
.slot-track>span{height:var(--reel-size);display:grid;place-items:center;font-size:43px;font-weight:800;overflow:hidden}
[data-mode=slot][data-phase=playing] .slot-track{animation:recorded-reel-roll .23s linear infinite}
[data-mode=slot][data-phase=playing] .slot-reel:nth-child(2) .slot-track{animation-duration:.19s}
[data-mode=slot][data-phase=playing] .slot-reel:nth-child(3) .slot-track{animation-duration:.27s}
[data-stop="1"] .slot-reel:first-child .slot-track,[data-stop="2"] .slot-reel:nth-child(-n+2) .slot-track,[data-stop="3"] .slot-track{animation:none!important;transform:translateY(calc(-6*var(--reel-size)));transition:transform .38s cubic-bezier(.15,.76,.22,1)}
.slot-line{height:3px;width:60%;margin:19px auto 0;border-radius:3px;background:var(--primary-container);opacity:.5}
[data-mode=slot][data-phase=playing] .slot-lights>span{animation:recorded-light .6s ease-in-out infinite alternate}
.recorded-scratch{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--surface-low);box-shadow:0 10px 23px #0004}
.scratch-underlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--primary-container) 22%,transparent),transparent 75%),var(--surface-low)}
.scratch-underlay>span{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:var(--primary-container);color:var(--on-primary);font-size:30px;font-weight:750}.scratch-underlay strong{font-size:1.25rem;line-height:1.3;overflow-wrap:anywhere;max-width:100%}
.recorded-scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:16px}
.scratch-cursor{display:none;position:absolute;width:26px;height:26px;border:2px solid var(--on-primary);outline:2px solid var(--primary-container);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.recorded-scratch:focus-within .scratch-cursor{display:block}[data-phase=complete] .scratch-cursor{display:none!important}
[data-mode=scratch] .reveal-stage{gap:16px;padding:20px;min-height:0}[data-mode=scratch] .reveal-stage>.fine{margin:0;text-align:center;font-size:.75rem;line-height:1.6}
@keyframes recorded-wheel-spin{from{transform:rotate(0)}to{transform:rotate(1440deg)}}
@keyframes recorded-reel-roll{from{transform:translateY(0)}to{transform:translateY(calc(-5*var(--reel-size)))}}
@keyframes recorded-light{to{opacity:.3;box-shadow:0 0 4px var(--ice-container)}}
@keyframes recorded-result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.recorded-reveal{--reel-size:70px}.reveal-stage{min-height:225px;padding:18px 10px}.recorded-wheel{width:min(100%,210px)}.wheel-disc>span{font-size:20px;padding-top:10px}.reveal-result h3{font-size:1.5rem}.recorded-slot{padding:14px 12px 18px}.slot-track>span{font-size:32px}.reveal-modes{gap:4px;padding:5px}.reveal-modes button{font-size:.75rem;padding-inline:4px}[data-mode=scratch] .reveal-stage{padding:12px}.scratch-underlay>span{width:40px;height:40px;border-radius:13px;font-size:23px}.scratch-underlay strong{font-size:1rem}.scratch-underlay{gap:7px;padding:12px}}