/* Ticket reels (shared by the admin draw stage and the public draw panel). --h sets the reel height. */
.slot { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 22px 26px; background: #072A18; border-radius: 22px; box-shadow: inset 0 6px 24px rgba(0,0,0,.55), 0 20px 50px -20px rgba(0,0,0,.7); border: 3px solid #F28C1E; --h: clamp(72px, 12vw, 150px); }
.reel { width: calc(var(--h) * .72); height: var(--h); overflow: hidden; border-radius: 12px; background: linear-gradient(#FBF7EF, #fff 30%, #fff 70%, #EDE6D6); box-shadow: inset 0 0 0 2px rgba(11,63,34,.15), inset 0 14px 18px -10px rgba(0,0,0,.45), inset 0 -14px 18px -10px rgba(0,0,0,.45); position: relative; }
.reel::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: rgba(242,140,30,.5); transform: translateY(-50%); pointer-events: none; }
.reel-strip { display: flex; flex-direction: column; will-change: transform; }
.reel-strip span { height: var(--h); line-height: var(--h); font-size: calc(var(--h) * .62); font-weight: 800; color: #0B3F22; font-variant-numeric: tabular-nums; text-align: center; }
.reel.locked { box-shadow: inset 0 0 0 3px #1EA75A, inset 0 14px 18px -10px rgba(0,0,0,.45), inset 0 -14px 18px -10px rgba(0,0,0,.45); animation: reel-lock .35s cubic-bezier(.2,.9,.3,1.3); }
.slot-dash { font-size: calc(var(--h) * .6); font-weight: 800; color: #F9C58B; padding: 0 4px; line-height: 1; }
@keyframes reel-lock { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reel.locked { animation: none; } }