/* Trang slot Ace Cascade: máy tối viền vàng đặt trên nền sáng, lá bài vẽ SVG, hoạt ảnh bằng Web Animations (js/ace.js). */
.swrap { padding: 18px 24px 28px; max-width: 1360px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.swrap > * { min-width: 0; }
.mcol { min-width: 0; }
[data-ic] { display: contents; }
.top .pl { height: 30px; padding: 0 12px; font-size: 12px; }
.top .pl.up { background: rgba(18,183,106,.13); color: var(--win); }
.top .pl.dn { background: rgba(240,56,74,.13); color: var(--lose); }

/* ---------- máy ---------- */
.machine {
  --gold: linear-gradient(135deg, #fff3c4 0%, #f6c94c 22%, #a86f00 48%, #ffe39a 72%, #8a5a00 100%);
  position: relative; border-radius: 30px; overflow: hidden; padding: 14px 18px 16px; max-width: 900px; min-width: min(100%, 620px); width: 100%; margin: 0 auto;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(46,224,143,.22), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(240,56,74,.16), transparent 70%),
    #03140d;
  box-shadow: 0 0 0 1px #2a1a00, 0 0 0 4px #c99a2e, 0 0 0 5px #5a3a00, 0 30px 70px rgba(20,22,26,.35);
  display: flex; flex-direction: column; gap: 10px; user-select: none; -webkit-user-select: none; transition: box-shadow .6s, background .6s;
}
/* hoa văn nỉ: lưới thoi rất mờ */
.machine::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px); }
.machine.fs {
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,194,61,.28), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(240,56,74,.35), transparent 70%), #1a0408;
  box-shadow: 0 0 0 1px #2a1a00, 0 0 0 4px #ffd35a, 0 0 0 5px #5a3a00, 0 0 60px rgba(255,194,61,.45), 0 30px 70px rgba(240,56,74,.35);
}
.mfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .35; mix-blend-mode: screen; pointer-events: none; }
.machine > :not(.mfx):not(.modal):not(.scene-wrap) { position: relative; }

.mhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mhead .fsbar { flex-basis: 100%; justify-content: center; }
@media (max-width: 900px) { .mhead { flex-direction: column; flex-wrap: nowrap; justify-content: center; } .mhead .fsbar { flex-basis: auto; } }
.marquee { width: min(46%, 330px); height: auto; filter: drop-shadow(0 0 18px rgba(255,194,61,.35)); }
.marquee svg { display: block; width: 100%; height: auto; }
.combo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(50%, 360px); }
.combo b {
  height: 38px; display: grid; place-items: center; border-radius: 12px; font: 800 18px var(--display); letter-spacing: -.02em;
  color: #c9a85a; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); border: 1px solid rgba(201,154,46,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: .25s; text-shadow: 0 1px 0 #000;
}
.combo b.on { color: #3a1d00; background: var(--gold); border-color: #fff3c4; box-shadow: 0 0 24px rgba(255,194,61,.65), inset 0 1px 0 rgba(255,255,255,.7); transform: scale(1.08); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.combo b.bump { animation: bump .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 0% { transform: scale(1.35); filter: brightness(1.6); } 100% { transform: scale(1.08); } }
.fsbar { display: flex; gap: 18px; font-size: 12.5px; font-weight: 700; color: #ffe7a3; background: linear-gradient(180deg, #7a0d1a, #3a040c); border: 1px solid #ffd35a; padding: 5px 16px; border-radius: 999px; box-shadow: 0 0 18px rgba(240,56,74,.5); }
.fsbar b { font-family: var(--display); color: #fff; }

/* khung cuộn: viền vàng 2 lớp, lòng nỉ tối */
.reels-frame { padding: 5px; border-radius: 22px; background: var(--gold); box-shadow: 0 0 0 1px #4a2a00, 0 0 34px rgba(255,194,61,.28), 0 14px 30px rgba(0,0,0,.5); position: relative; }
.reels-frame::before, .reels-frame::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(135deg, #ff8f9b, #e0263a 55%, #7a0d1a); border: 2px solid #ffe39a; transform: rotate(45deg); z-index: 3; box-shadow: 0 0 10px rgba(240,56,74,.7); }
.reels-frame::before { left: -4px; } .reels-frame::after { right: -4px; }
.reels-in { border-radius: 18px; padding: 8px; background: radial-gradient(ellipse at 50% 40%, #0c3a26, #041a10 70%, #020c07); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 10px 30px rgba(0,0,0,.7), inset 0 -6px 20px rgba(0,0,0,.5); position: relative; }
.machine.fs .reels-in { background: radial-gradient(ellipse at 50% 40%, #5a0d18, #2a0409 70%, #120204); }
.reels { position: relative; height: var(--h, 400px); overflow: hidden; border-radius: 12px; }
.colsep { position: absolute; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,211,90,.22), transparent); pointer-events: none; }
.colfx { position: absolute; top: 0; bottom: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .25s; background: linear-gradient(180deg, rgba(255,207,92,0), rgba(255,207,92,.22), rgba(255,207,92,0)); box-shadow: inset 0 0 0 2px rgba(255,207,92,.75), 0 0 30px rgba(255,194,61,.5); z-index: 4; }
.colfx.on { opacity: 1; animation: antp .5s ease-in-out infinite alternate; }
@keyframes antp { to { box-shadow: inset 0 0 0 2px rgba(255,240,190,1), 0 0 48px rgba(255,194,61,.9); } }
.fxl { position: absolute; inset: 8px; pointer-events: none; z-index: 6; }

.slotc { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); will-change: transform; }
.cd { width: 100%; height: 100%; border-radius: calc(var(--cw) * .12); transition: filter .25s, opacity .25s; position: relative; }
.cd svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.45)); overflow: visible; }
.cd.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%); background-size: 280% 100%; mix-blend-mode: soft-light; animation: shine 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
.cd.dim { filter: brightness(.32) saturate(.5); }
.cd.win { animation: winp .55s ease-in-out infinite alternate; z-index: 2; }
.cd.win::before { content: ""; position: absolute; inset: -3px; border-radius: calc(var(--cw) * .14); border: 2.5px solid #ffe39a; box-shadow: 0 0 0 1px #8a5a00, 0 0 24px 5px rgba(255,194,61,.95), inset 0 0 18px rgba(255,214,102,.8); pointer-events: none; z-index: 1; }
.cd.win svg { filter: drop-shadow(0 0 8px rgba(255,214,102,.9)); }
@keyframes winp { from { transform: scale(1); } to { transform: scale(1.08); } }
.cd.sc { animation: winp .45s ease-in-out infinite alternate; }
.cd.sc svg { filter: drop-shadow(0 0 16px rgba(255,214,102,1)); }
.spinrays { transform-origin: 50px 56px; animation: rays 9s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }

.spark { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 6px rgba(255,194,61,.95), 0 0 30px 10px rgba(240,56,74,.5); }
.bit { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 2px; }
.star { position: absolute; width: 14px; height: 14px; margin: -7px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #ffd35a); }
.ring { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid #ffe39a; box-shadow: 0 0 16px #ffc23d; }
.wpop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; z-index: 5; }
.wpop b { display: block; font: 800 clamp(26px, 4.6vw, 44px) var(--display); letter-spacing: -.02em; background: linear-gradient(180deg, #fff8dc, #ffd35a 50%, #e09a12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #4a2600) drop-shadow(0 0 14px rgba(255,194,61,.8)); }
.wpop small { display: inline-block; margin-top: 2px; font: 700 11.5px var(--body); color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,211,90,.5); padding: 2px 10px; border-radius: 999px; }

.winbar { height: 50px; min-width: 0; white-space: nowrap; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.35)); border: 1px solid rgba(201,154,46,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.4); }
.winbar small { font-size: 11.5px; font-weight: 800; color: #c9a85a; letter-spacing: .12em; text-transform: uppercase; }
.winbar b { font: 800 26px var(--display); letter-spacing: -.02em; background: linear-gradient(180deg, #fff8dc, #ffd35a 55%, #e09a12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,194,61,.5)); }
.winbar b:empty { display: none; }

/* ---------- điều khiển ---------- */
.controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "bet win spin tog"; align-items: center; gap: 14px; position: relative; padding: 8px 10px; border-radius: 20px; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); border-top: 1px solid rgba(201,154,46,.35); }
.winbar { grid-area: win; } .betbox { grid-area: bet; } .spin { grid-area: spin; } .toggles { grid-area: tog; }
.betbox { display: flex; align-items: center; gap: 8px; justify-self: start; background: rgba(0,0,0,.5); border: 1px solid rgba(201,154,46,.4); border-radius: 999px; padding: 5px; }
.rbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #7a5a1a; background: linear-gradient(180deg, #2a2f36, #0c0e11); color: #ffd35a; font: 700 22px/1 var(--display); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.rbtn:hover:not(:disabled) { filter: brightness(1.3); }
.rbtn:disabled { opacity: .35; cursor: not-allowed; }
.bv { min-width: 70px; text-align: center; line-height: 1.1; }
.bv small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #c9a85a; font-weight: 800; }
.bv b { font: 800 19px var(--display); color: #fff; }
.spin {
  width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; position: relative; color: #fff; display: grid; place-items: center; margin: -4px 6px;
  background: radial-gradient(circle at 50% 28%, #ff8f9b, #f0384a 45%, #a3142a 80%);
  box-shadow: 0 0 0 4px #ffd35a, 0 0 0 5px #6a4000, 0 0 0 9px rgba(0,0,0,.45), 0 14px 34px rgba(240,56,74,.55), inset 0 3px 0 rgba(255,255,255,.45), inset 0 -8px 14px rgba(0,0,0,.3);
  transition: transform .12s, filter .2s;
}
.spin svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.spin:hover:not(:disabled) { filter: brightness(1.08); }
.spin:active:not(:disabled) { transform: scale(.95); }
.spin.busy svg { animation: rot .7s linear infinite; }
.spin.free { background: radial-gradient(circle at 50% 28%, #fff3c4, #ffc23d 45%, #b8800e 80%); color: #3a1d00; box-shadow: 0 0 0 4px #fff3c4, 0 0 0 5px #6a4000, 0 0 0 9px rgba(0,0,0,.45), 0 0 34px rgba(255,194,61,.7), inset 0 3px 0 rgba(255,255,255,.6), inset 0 -8px 14px rgba(0,0,0,.2); }
.spin span { position: absolute; font: 800 17px var(--display); }
.spin span:empty { display: none; }
.spin:has(span:not(:empty)) svg { opacity: .22; }
.spin:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
@keyframes rot { to { transform: rotate(360deg); } }
.toggles { display: flex; gap: 8px; justify-self: end; }
.tbtn { height: 50px; min-width: 62px; border-radius: 16px; border: 1px solid rgba(201,154,46,.4); background: rgba(0,0,0,.5); color: #c9a85a; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 800; padding: 0 10px; letter-spacing: .03em; }
.tbtn svg { width: 18px; height: 18px; }
.tbtn[aria-pressed="true"], .tbtn.on { color: #3a1d00; background: var(--gold); border-color: #fff3c4; box-shadow: 0 0 16px rgba(255,194,61,.45); }
.automenu { position: absolute; right: 0; bottom: 70px; z-index: 8; background: #0c1a12; border: 1px solid rgba(201,154,46,.5); border-radius: 16px; padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.automenu small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #c9a85a; font-weight: 800; margin: 0 2px 8px; }
.automenu div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.automenu button { height: 38px; min-width: 50px; border-radius: 11px; border: 1px solid rgba(201,154,46,.35); background: rgba(255,255,255,.05); color: #fff; font: 700 14px var(--display); cursor: pointer; }
.automenu button:hover { background: rgba(255,211,90,.15); }

/* ---------- hộp thông báo trong máy ---------- */
.modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(30,8,10,.55), rgba(0,0,0,.86)); cursor: pointer; animation: fadein .3s; overflow: hidden; }
@keyframes fadein { from { opacity: 0; } }
.rays { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255,211,90,.35) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); animation: rspin 14s linear infinite; }
.rays.mega { background: repeating-conic-gradient(from 0deg, rgba(255,120,135,.4) 0 8deg, transparent 8deg 20deg); }
.rays.super { background: repeating-conic-gradient(from 0deg, rgba(120,255,190,.38) 0 8deg, transparent 8deg 20deg); }
@keyframes rspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mbox { text-align: center; padding: 20px; position: relative; z-index: 2; }
.mbox h2 { margin: 0; font: 800 clamp(40px, 9vw, 88px)/1 var(--display); letter-spacing: -.03em; background: linear-gradient(180deg, #fff9e0, #ffd66b 45%, #e08a00 55%, #fff0b0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6a3200) drop-shadow(0 0 30px rgba(255,194,61,.6)); animation: zoomin .7s cubic-bezier(.2, 1.5, .4, 1); }
.mbox h2.mega { background-image: linear-gradient(180deg, #fff, #ff9aa4 45%, #d1263a 55%, #ffd0d5); filter: drop-shadow(0 4px 0 #5a0812) drop-shadow(0 0 30px rgba(240,56,74,.7)); }
.mbox h2.super { background-image: linear-gradient(180deg, #fff, #a8ecc6 45%, #0e9f5b 55%, #d6ffe9); filter: drop-shadow(0 4px 0 #04301c) drop-shadow(0 0 34px rgba(61,242,154,.7)); }
.mbox .amt { margin-top: 14px; font: 800 clamp(32px, 6vw, 60px) var(--display); color: #fff; text-shadow: 0 0 24px rgba(255,194,61,.8), 0 4px 12px #000; font-variant-numeric: tabular-nums; }
.mbox p { margin: 12px 0 0; color: #ffe7a3; font-weight: 600; font-size: 14px; }
.mbox .btn { margin-top: 20px; }
@keyframes zoomin { from { transform: scale(.3); opacity: 0; } }
.gcoin { position: absolute; top: -40px; width: 28px; height: 28px; animation: fall linear forwards; z-index: 1; }
.gcoin i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc23d 45%, #b87000); box-shadow: inset 0 0 0 2px rgba(122,59,0,.4), inset 0 0 0 5px rgba(255,243,196,.35); animation: flipc .6s linear infinite; }
@keyframes fall { to { transform: translate(var(--dx), 120vh) rotate(var(--r)); } }
@keyframes flipc { 50% { transform: scaleX(.15); } }

/* ---------- cột phải ---------- */
.side { display: flex; flex-direction: column; gap: 14px; }
.ptable { padding: 8px 12px 12px; display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: 34px repeat(3, 1fr); align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; font: 700 12.5px var(--display); font-variant-numeric: tabular-nums; }
.prow:nth-child(odd) { background: var(--s2); }
.prow.h { background: none; font: 700 10.5px var(--body); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.prow svg { width: 30px; height: 37.5px; display: block; }
.prow span { text-align: right; }
.rules { margin: 0; padding: 12px 16px 4px 32px; display: grid; gap: 8px; font-size: 13px; color: var(--dim); line-height: 1.5; }
.rules b { color: var(--text); }
.rtp { display: flex; gap: 10px; margin: 8px 14px 14px; padding: 12px; border-radius: 14px; background: rgba(240,56,74,.06); border: 1px solid rgba(240,56,74,.15); color: var(--acc); }
.rtp b { display: block; font-size: 12.5px; color: var(--text); } .rtp span { font-size: 11.5px; color: var(--dim); }
.hlist { padding: 6px 8px 8px; max-height: 360px; overflow: auto; scrollbar-width: thin; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 12px; }
.hrow:hover { background: var(--s2); }
.hrow b { display: block; font-size: 13px; } .hrow small { display: block; font-size: 11.5px; color: var(--mute); }
.hrow .pf { text-align: right; font: 700 13.5px var(--display); font-variant-numeric: tabular-nums; }
.win { color: var(--win); } .lose { color: var(--lose); }
.empty { padding: 22px; text-align: center; color: var(--mute); }

@media (max-width: 1180px) { .swrap { grid-template-columns: minmax(0, 1fr); } .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } }
@media (max-width: 900px) {
  .swrap { padding: 12px 10px 18px; gap: 14px; }
  .machine { padding: 10px 10px 12px; gap: 8px; border-radius: 24px; min-width: min(100%, 340px); }
  .marquee { width: min(78%, 300px); }
  .reels-frame { padding: 4px; border-radius: 18px; }
  .reels-in { padding: 5px; border-radius: 14px; }
  .fxl { inset: 5px; }
  .combo { gap: 6px; width: 100%; } .combo b { height: 32px; font-size: 15px; border-radius: 10px; }
  .winbar { height: 42px; } .winbar b { font-size: 21px; }
  .controls { gap: 8px 6px; grid-template-columns: auto auto auto; grid-template-areas: "win win win" "bet spin tog"; justify-content: space-between; padding: 0 2px 6px; background: none; border-top: 0; }
  .controls .winbar { margin-bottom: 8px; }
  .betbox { gap: 4px; padding: 4px; }
  .spin { width: 74px; height: 74px; margin: 0; } .spin svg { width: 34px; height: 34px; }
  .rbtn { width: 34px; height: 34px; font-size: 19px; }
  .bv { min-width: 42px; } .bv b { font-size: 16px; }
  .toggles { gap: 5px; }
  .tbtn { height: 46px; min-width: 46px; padding: 0 4px; border-radius: 14px; font-size: 10px; }
  .side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) { .top .pl { display: none; } .top .rt { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .cd.gold::after, .cd.win, .cd.sc, .colfx.on, .spinrays, .rays { animation: none; } }

/* Wild Bounty: dùng chung slot.html, một bộ đếm hệ số thay cho thang ×1 ×2 ×3 ×5, tông gỗ / vàng miền Tây */
.machine.bounty { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(242,165,22,.28), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(240,56,74,.2), transparent 70%), #160c04; }
.machine.bounty .reels-in { background: radial-gradient(ellipse at 50% 40%, #4a2a0c, #231204 70%, #0f0802); }
.machine.bounty .combo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.machine.bounty .combo b { min-width: 96px; padding: 0 16px; font-size: 22px; }
.machine.bounty .combo .mlabel { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c9a85a; }
.machine.bounty.fs .combo b { color: #fff; background: linear-gradient(180deg, #ff8f9b, #e0263a 55%, #8a0f1e); border-color: #ffd35a; box-shadow: 0 0 26px rgba(240,56,74,.75); }
.machine.bounty .cd { border-radius: calc(var(--cw) * .14); }

/* ---------- nhận diện từng game: cảnh nền SVG + logo (js/slotart.js) ---------- */
.scene-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-wrap svg.scene { width: 100%; height: 100%; display: block; }
.scene-wrap .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.scene-wrap .scene-img.on { opacity: .92; }
.scene-wrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% 48%, rgba(0,0,0,.42), transparent 75%); }
.machine > .scene-wrap { position: absolute; }
.marquee svg { overflow: visible; }
.machine .mhead { position: relative; }
.mtools { display: flex; gap: 8px; align-items: center; }
.pillbtn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #fff3c4; background: var(--gold); color: #3a1d00; font: 700 12px var(--display); cursor: pointer; white-space: nowrap; box-shadow: 0 0 18px rgba(255,194,61,.45), inset 0 1px 0 rgba(255,255,255,.7); }
.pillbtn b { font-weight: 800; letter-spacing: .06em; margin-right: 4px; }
.pillbtn.xbet:not(.on) { background: rgba(0,0,0,.5); color: #ffd35a; border-color: rgba(201,154,46,.55); box-shadow: none; }
.pillbtn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; box-shadow: none; }
.ibtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(201,154,46,.45); background: rgba(0,0,0,.45); color: #ffd35a; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ibtn svg { width: 18px; height: 18px; }
.ibtn.off { color: var(--mute); }
.mbtns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.mbtns .btn { min-width: 120px; }
/* đầu máy: logo trái, nút phải, hàng hệ số + free spins bên dưới */
.machine .mhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo tools" "combo combo" "fs fs"; align-items: center; gap: 8px 12px; }
.machine .marquee { grid-area: logo; width: min(100%, 300px); justify-self: start; }
.machine .mtools { grid-area: tools; }
.machine .combo { grid-area: combo; justify-self: center; }
.machine .mhead .fsbar { grid-area: fs; justify-self: center; }
@media (max-width: 900px) {
  .machine .mhead { gap: 6px 8px; }
  .machine .mtools { gap: 6px; }
  .machine .mtools .pillbtn { height: 30px; padding: 0 10px; font-size: 10.5px; }
  .machine .marquee { width: min(100%, 190px); }
  .ibtn { width: 32px; height: 32px; }
  .pillbtn .lg { display: none; }
}

/* ---------- lớp phủ dùng chung (js/slotkit.js) ---------- */
.sk-ov { position: fixed; inset: 0; z-index: 70; background: rgba(20,22,26,.5); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: tin .2s; }
.sk-card { position: relative; width: min(100%, 460px); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(20,22,26,.3); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.sk-card h2 { margin: 0; font-size: 21px; padding-right: 40px; }
.sk-card.sk-round { width: min(100%, 560px); }
.sk-field { display: flex; flex-direction: column; gap: 6px; }
.sk-field > label { font-size: 12px; font-weight: 700; color: var(--dim); }
.sk-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sk-check input { width: 18px; height: 18px; accent-color: var(--acc); }
.sk-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.sk-seg button { flex: 1; min-width: 56px; height: 38px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s2); font: 700 13px var(--display); cursor: pointer; color: var(--dim); }
.sk-seg button.on { background: var(--acc); color: #fff; border-color: var(--acc); }
/* thẻ bên phải có tab */
.sk-side { overflow: hidden; }
.sk-tabs { margin: 12px; }
.sk-tabs > button { height: 34px; font-size: 12.5px; }
.sk-tabs > button.on { background: #fff; color: var(--text); box-shadow: var(--shadow-s); }
.sk-body { padding: 0 4px 6px; min-height: 120px; }
.sk-body .ptable { padding-top: 0; }
.sk-note { margin: 0 14px 8px; }
.sk-rounds { max-height: 520px; }
.sk-rounds .sk-r { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sk-fair { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.sk-kv { display: flex; flex-direction: column; gap: 3px; }
.sk-kv small { font-size: 10.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.sk-kv code { font: 500 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; background: var(--s2); padding: 6px 8px; border-radius: 8px; color: var(--dim); }
.sk-kv input { height: 40px; font: 500 13px ui-monospace, Menlo, monospace; }
.sk-rev, .sk-vres { padding: 10px 12px; border-radius: 12px; background: rgba(18,183,106,.08); border: 1px solid rgba(18,183,106,.25); font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.sk-vres.bad { background: rgba(240,56,74,.08); border-color: rgba(240,56,74,.3); }
.sk-vres div { color: var(--dim); }
.sk-rh p { margin: 4px 0 0; font-size: 12.5px; color: var(--mute); }
.sk-replay { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: #0c1a12; }
.sk-mini { display: grid; gap: 4px; }
.sk-mini > div { aspect-ratio: 1 / 1.1; border-radius: 6px; }
.sk-mini svg { width: 100%; height: 100%; display: block; }
.sk-mini > div:not(.hit) { opacity: .4; }
.sk-mini > div.hit { box-shadow: 0 0 0 2px #ffd35a, 0 0 10px rgba(255,194,61,.8); }
.sk-steps { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 12.5px; font-weight: 700; }
.sk-steps .btn { min-width: 40px; }
.sk-wins { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-wins .badge { background: rgba(255,211,90,.15); color: #ffe39a; }
.sk-replay .empty { color: #c4d8cd; }
.sk-fr { padding: 0; }

/* dòng chạy Live wins dưới máy (AI có nhãn) */
.ticker { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(201,154,46,.3); font-size: 12px; color: #e7dcc4; overflow: hidden; white-space: nowrap; }
.ticker .tk-l { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c9a85a; flex: none; }
.ticker .tk-i { overflow: hidden; text-overflow: ellipsis; animation: tkin .4s ease-out; }
.ticker b { color: #fff; } .ticker .tk-w { color: #ffd35a; } .ticker small { color: #c9a85a; }
.ticker em { font-style: normal; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; margin: 0 4px 0 3px; }
@keyframes tkin { from { opacity: 0; transform: translateY(6px); } }