/* Slot cuộn cổ điển (Cash Stack, Gem Fortune): dùng chung khung máy của slot.css, thêm cuộn quay + đường thắng. */
.machine.cash { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,194,61,.22), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(240,56,74,.25), transparent 70%), #150406; }
.machine.cash .reels-in { background: radial-gradient(ellipse at 50% 40%, #3a0a12, #1a0408 70%, #0a0203); }
.machine.gems { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(47,111,224,.3), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(18,183,106,.2), transparent 70%), #040a18; }
.machine.gems .reels-in { background: radial-gradient(ellipse at 50% 40%, #0d2350, #06112a 70%, #020610); }

.creels { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap, 10px); }
.reel { position: relative; height: calc(var(--ch, 90px) * 3); overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(255,255,255,.04) 50%, rgba(0,0,0,.55)); box-shadow: inset 0 0 0 1px rgba(255,211,90,.18), inset 0 12px 20px rgba(0,0,0,.6), inset 0 -12px 20px rgba(0,0,0,.6); }
.reel.special, .reel.mult { background: linear-gradient(180deg, rgba(60,4,12,.8), rgba(240,56,74,.14) 50%, rgba(60,4,12,.8)); box-shadow: inset 0 0 0 2px rgba(255,211,90,.45), inset 0 12px 20px rgba(0,0,0,.6), inset 0 -12px 20px rgba(0,0,0,.6); }
.strip { will-change: transform; }
.cell { height: var(--ch, 90px); display: grid; place-items: center; padding: 8%; transition: filter .25s, transform .25s; }
.cell svg { width: 100%; height: 100%; max-width: calc(var(--ch) * 1.05); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.reel.spinning .strip { filter: blur(1.4px) brightness(1.1); }
.reel.tease { animation: antp .45s ease-in-out infinite alternate; box-shadow: inset 0 0 0 3px #ffe39a, 0 0 40px rgba(255,194,61,.8); }
.cell.win { animation: winp .5s ease-in-out infinite alternate; }
.cell.win svg { filter: drop-shadow(0 0 10px rgba(255,214,102,1)) drop-shadow(0 0 2px #fff); }
.reel.mult .cell:not(.sel) { opacity: .35; filter: saturate(.4); }
/* đường thắng: hàng giữa (Cash Stack) hoặc các đường SVG (Gem Fortune) */
.machine.cash .payline { position: absolute; left: -6px; right: -6px; top: calc(var(--ch) * 1.5); height: 0; border-top: 3px solid rgba(255,211,90,.85); box-shadow: 0 0 14px rgba(255,194,61,.8); pointer-events: none; transform: translateY(-1.5px); }
.machine.cash .reel::before, .machine.cash .reel::after { content: ""; position: absolute; left: 0; right: 0; height: var(--ch); background: rgba(0,0,0,.45); pointer-events: none; z-index: 1; }
.machine.cash .reel::before { top: 0; } .machine.cash .reel::after { bottom: 0; }
.machine.gems .payline { display: none; }
.machine.gems .reel.mult::after { content: ""; position: absolute; left: 4px; right: 4px; top: var(--ch); height: var(--ch); border-radius: 12px; border: 3px solid #ffd35a; box-shadow: 0 0 18px rgba(255,194,61,.7), inset 0 0 12px rgba(255,194,61,.35); pointer-events: none; }
svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
svg.lines polyline { fill: none; stroke: #ffe39a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ffc23d); stroke-dasharray: 2000; animation: draw .6s ease-out both, lpulse 1s ease-in-out .6s infinite alternate; }
@keyframes draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@keyframes lpulse { to { stroke: #fff; } }

.readout { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; font-size: 13px; font-weight: 700; color: #ffe7a3; }
.readout .dim { color: var(--mute); }
.num-r { display: flex; gap: 6px; align-items: center; }
.num-r b, .readout .mx { font: 800 22px var(--display); padding: 2px 10px; border-radius: 10px; background: linear-gradient(180deg, #fff8dc, #ffd35a 55%, #e09a12); color: #3a1d00; box-shadow: 0 0 14px rgba(255,194,61,.5); }
.num-r .gap { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); }
.readout .mx { background: linear-gradient(180deg, #ff9aa4, #e0263a); color: #fff; }

.wheel { position: relative; width: min(78vw, 320px); margin: 16px auto 0; }
.wheel svg { width: 100%; display: block; filter: drop-shadow(0 0 30px rgba(255,194,61,.5)); }
.wheel #wh { transform-origin: 130px 130px; transform-box: view-box; }
.wheel .pin { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -14px; border: 14px solid transparent; border-top: 26px solid #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.gemrow svg { width: 30px !important; height: 30px !important; }
@media (max-width: 900px) { .num-r b, .readout .mx { font-size: 18px; } }