.reels{position:relative;isolation:isolate;margin:20px 0 14px}.reel-cabinet{position:relative;border:3px double var(--art-line);border-radius:10px;background:var(--surface);padding:16px}.reel-lights{position:absolute;inset:-5px 12px auto;display:flex;justify-content:space-between;gap:6px}.reel-lights i{height:7px;width:7px;flex-shrink:0;background:var(--paper);border:1px solid var(--art-line);border-radius:50%}.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.slot{min-width:0;position:relative;text-align:center}.reel-window{position:relative;height:116px;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:inset 0 12px 14px -12px var(--muted),inset 0 -12px 14px -12px var(--muted)}.reel-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--field),transparent 25%,transparent 75%,var(--field));opacity:.65}.reel-strip{position:relative;will-change:transform}.reel-strip span{height:116px;display:flex;align-items:center;justify-content:center;font:clamp(24px,4.4vw,45px) var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-1.5px;white-space:nowrap;padding:0 3px}.reel-window[data-state="spinning"] .reel-strip{filter:blur(1px)}.reel-window[data-state="stopped"]{border-color:var(--green)}.reel-window[data-state="stopped"] .reel-strip span{color:var(--green)}.reel-stop-mark{position:absolute;right:4px;bottom:4px;font-size:7px;color:var(--green);opacity:0}.reel-window[data-state="stopped"] .reel-stop-mark{opacity:1}.reel-unit{display:none}.slot input{display:block;width:100%;min-width:0;min-height:48px;margin-top:8px;border:1px solid var(--line);background:var(--field);border-radius:5px;color:var(--ink);padding:8px 10px;font-size:16px;text-align:center;text-overflow:ellipsis}.slot input::placeholder{color:var(--muted);font-size:14px}.slot input:focus{border-color:var(--red);outline:2px solid var(--red);outline-offset:1px}.slot input:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.suggestions{position:fixed;z-index:50;background:var(--menu);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px #12282c25;max-height:220px;overflow:auto;overscroll-behavior:contain;text-align:left}.suggestions button{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 14px;min-height:44px;font-size:14px;line-height:1.35}.suggestions button:hover,.suggestions button:focus{background:var(--soft)}.suggestions p{font-size:12px;padding:12px}
.reel-readout{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 3px 0}.reel-readout .eyebrow{font-size:9px;color:var(--muted);letter-spacing:1px}.reel-readout strong{display:block;font:28px var(--font-display);font-variant-numeric:tabular-nums;margin-top:3px}.reel-readout small{font:12px var(--font-data);color:var(--muted)}.reel-score{text-align:right}.reel-score strong{color:var(--green)}.reel-status{min-height:24px;margin-top:5px}.reel-status p{font-size:12px;line-height:1.5;margin:0;color:var(--muted)}.reels[data-tier="exact"] .reel-cabinet{border-color:var(--green)}.reels[data-tier="exact"] #reel-verdict{color:var(--green);font-weight:bold;letter-spacing:1px}.reels[data-tier="exact"] .reel-lights i,.reels[data-tier="close"] .reel-lights i{background:var(--red);border-color:var(--red)}
.reel-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}.reel-confetti i{position:absolute;left:var(--x);top:25%;width:5px;height:9px;background:var(--red);opacity:0;animation:reel-confetti 1000ms ease-out var(--delay) both}.reel-confetti i:nth-child(3n){background:var(--green)}.reel-confetti i:nth-child(3n + 1){background:var(--ink)}
@keyframes reel-confetti{10%{opacity:1;transform:translateY(-35px) rotate(0)}100%{opacity:0;transform:translate(var(--drift),140px) rotate(var(--turn))}}
@media(prefers-reduced-motion:no-preference){.reel-window[data-state="stopped"]{animation:reel-stop 180ms ease-out}.reels[data-phase="landed"][data-tier="exact"] .reel-cabinet{animation:reel-win 650ms ease-out}@keyframes reel-stop{50%{transform:translateY(2px)}}@keyframes reel-win{50%{box-shadow:0 0 0 5px var(--soft-line)}}}
@media(prefers-reduced-motion:reduce){.reel-confetti{display:none}.reel-window[data-state="spinning"] .reel-strip{filter:none}}
@media(max-width:600px){.reels{margin:16px 0 10px}.reel-cabinet{padding:10px 8px}.slots{gap:8px}.reel-window,.reel-strip span{height:84px}.reel-strip span{font-size:clamp(16px,4.8vw,29px);letter-spacing:-.8px}.slot input{min-height:44px;padding:8px 4px;margin-top:7px;font-size:16px}.slot input::placeholder{font-size:12px}.reel-readout{padding-top:10px}.reel-readout strong{font-size:25px}.reel-readout .eyebrow{font-size:8px}.reel-readout small{font-size:10px}.reel-status{min-height:20px}.reel-status p{font-size:11px}.reel-lights i{width:6px;height:6px}}
@media(max-height:650px){.reels{margin-top:12px;margin-bottom:8px}.reel-cabinet{padding:8px}.reel-window,.reel-strip span{height:62px}.reel-readout{padding-top:8px}.reel-readout strong{font-size:23px}.reel-status{min-height:18px}}

.suggestions button{display:flex;align-items:center;gap:8px}.suggestions button img{flex:0 0 auto;height:14px;width:21px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--line);background:var(--field)}.suggestions button span{flex:1 1 auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.slot-flag{position:absolute;top:6px;left:6px;height:18px;width:26px;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:var(--field);z-index:2}
