/* Dark Desire — fixed 1920x1080 scene, scaled as a whole. The scene itself is static; only game events animate. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #12041a; font-family: 'Rubik', 'Arial Black', sans-serif; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #12041a; }
#viewport::before { content: ''; position: absolute; inset: -60px; background: url(img/bg.webp) center / cover no-repeat; filter: blur(26px) brightness(.55); }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 1920px; height: 1080px; overflow: hidden; }
#bgLayer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: block; pointer-events: none; }
#stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 45% 40%, transparent 55%, rgba(20, 0, 26, .45)); }
img { -webkit-user-drag: none; user-select: none; }

#logo { position: absolute; z-index: 5; width: 320px; left: 120px; top: 14px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }

/* ---------- girl: sits on the balcony floor behind the reels ---------- */
#girlBox { position: absolute; z-index: 2; left: 1332px; top: 312px; width: 1040px; height: 1162px; pointer-events: none; }
/* soft contact shadow on the floor: under the supporting hand and along the body */
#girlShadow { position: absolute; z-index: 2; left: 1330px; top: 960px; width: 640px; height: 120px; pointer-events: none;
  background: radial-gradient(closest-side at 6% 30%, rgba(10, 0, 14, .55), transparent), radial-gradient(60% 50% at 55% 75%, rgba(10, 0, 14, .45), transparent); filter: blur(4px); }
#girlBox canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(-12px 10px 22px rgba(20, 0, 30, .55)); }

/* ---------- machine ---------- */
#machine { position: absolute; z-index: 3; left: 450px; top: 30px; width: 900px; height: 828px; }
#frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .55)); }
#reelBack, #board, #curtLayer { position: absolute; left: 117px; top: 127px; width: 666px; height: 613px; }
#reelBack { z-index: 1; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, #3a0a36, #1c0419 70%, #12020f); box-shadow: inset 0 0 50px rgba(0, 0, 0, .8); }
#reelBack i { position: absolute; top: 4%; bottom: 4%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 120, 200, .18) 20%, rgba(255, 120, 200, .18) 80%, transparent); }
#reelBack i:nth-child(1) { left: 20%; } #reelBack i:nth-child(2) { left: 40%; } #reelBack i:nth-child(3) { left: 60%; } #reelBack i:nth-child(4) { left: 80%; }
#board { z-index: 2; }
.col { position: absolute; top: 0; width: 20%; height: 100%; overflow: hidden; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.35), #000 7%, #000 93%, rgba(0,0,0,.35)); mask: linear-gradient(180deg, rgba(0,0,0,.35), #000 7%, #000 93%, rgba(0,0,0,.35)); }
.col.tease::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(255, 170, 225, .9), inset 0 0 36px rgba(255, 60, 170, .7); background: linear-gradient(180deg, transparent 0%, rgba(255, 190, 235, .35) 50%, transparent 100%) 0 0 / 100% 40% no-repeat; animation: tease .9s linear infinite; }
@keyframes tease { from { background-position: 0 -120%; } to { background-position: 0 220%; } }
.strip { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.cell { position: relative; width: 100%; height: var(--ch); display: flex; align-items: center; justify-content: center; }
.cell .sym { position: relative; z-index: 1; width: 92%; height: 92%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)); transition: filter .3s, opacity .3s; }
.cell.lo .sym { width: 84%; height: 86%; }
.cell.S .sym, .cell.T .sym { width: 100%; height: 100%; }
.cell.land .sym { animation: landBounce .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes landBounce { 0% { transform: scale(.8); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* FREE SPINS symbol: the chest under the title breathes a little */
.cell.S .breath { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  -webkit-mask: radial-gradient(28% 22% at 50% 52%, #000 55%, transparent 100%); mask: radial-gradient(28% 22% at 50% 52%, #000 55%, transparent 100%);
  transform-origin: 50% 70%; animation: chest 2.2s ease-in-out infinite; }
@keyframes chest { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-1.2%) scale(1.025, 1.035); } 60% { transform: translateY(-.6%) scale(1.015, 1.02); } }

/* wins: a flame frame runs around each winning symbol, the symbol itself plays */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cell.win { z-index: 3; }
.cell.win .sym { animation: symHop 1.15s cubic-bezier(.3, .7, .4, 1) infinite; transform-origin: 50% 85%; }
@keyframes symWin { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)) brightness(1.15); } }
.cell.dimmed .sym { filter: brightness(.45) saturate(.7); }
.cell.scat .sym { animation: symWin .8s ease-in-out infinite; }
.strip.moving .sym { filter: blur(.7px) brightness(.95); }
/* the FREE SPINS plate reads a bit bigger than a regular symbol */
.cell.S { z-index: 2; }
.cell.S .sym, .cell.S .breath { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; }

/* anticipation: the camera leans in and the waiting reels glow */
#machine { transition: transform 1.4s cubic-bezier(.25, .7, .25, 1); transform-origin: var(--zx, 50%) 55%; }
#machine.zoom { transform: scale(1.07); }
#zoomDim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(60% 70% at var(--zx2, 50%) 45%, transparent 35%, rgba(8, 0, 12, .7)); }
#zoomDim.on { opacity: 1; }

/* ---------- WILD curtain: unfolds out of the star, rolls away with the reel ---------- */
#curtLayer { z-index: 4; pointer-events: none; overflow: hidden; border-radius: 20px; }
.curtain { position: absolute; width: 20%; will-change: transform; }
.curtain .cpanel { position: absolute; inset: 0 2px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #3b0a35, #1a0317 55%, #2c0627); box-shadow: inset 0 0 0 2px #ffd1ec, inset 0 0 0 5px #3a0630, inset 0 0 0 7px #ff4fb0, inset 0 0 0 9px #2a0422, inset 0 0 30px rgba(255, 50, 160, .6); }
.curtain::after { content: ''; position: absolute; inset: 3px 5px; border-radius: 10px; pointer-events: none; opacity: 0; transition: opacity .3s;
  border: 1.5px solid rgba(255, 222, 240, .9); box-shadow: 0 0 10px rgba(255, 70, 170, .8), inset 0 0 10px rgba(255, 70, 170, .5); }
.curtain.lit::after { opacity: 1; animation: rimPulse 1s ease-in-out infinite; }
.curtain .cpanel::before { content: ''; position: absolute; inset: 0; background: url(img/bg.webp) 82% 40% / auto 115%; opacity: .5; }
.curtain .cgirl { position: absolute; left: 50%; top: 15%; width: 172%; height: auto; aspect-ratio: 360 / 1077; transform: translateX(-50%); }
.curtain .cfade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 3, 23, .55) 0%, transparent 22%, transparent 66%, rgba(26, 3, 23, .9) 100%); }
.curtain .cwild { position: absolute; left: 5%; width: 90%; top: 1.5%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); }
.curtain .cmult { position: absolute; left: 2%; right: 2%; bottom: 2%; height: 96px; display: flex; align-items: center; justify-content: center; }
.curtain .cmult img { max-width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1.5px #ffe6f5) drop-shadow(0 0 1.5px #ffe6f5) drop-shadow(0 4px 6px rgba(0, 0, 0, .8)); }
.curtain .cmult .mtext { font-family: 'Metal Mania', serif; font-size: 72px; line-height: 1; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #2a0218 10%, #ff1e82 85%); -webkit-text-stroke: 2px #ffd0ea; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .8)); }
.curtain .seam { position: absolute; left: 0; right: 0; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ffe3f4, transparent); box-shadow: 0 0 16px 4px rgba(255, 90, 190, .9); opacity: 0; }
.curtain.lit .cpanel { animation: curtLit 1.1s ease-in-out infinite; }
@keyframes curtLit { 50% { filter: brightness(1.12); } }
.curtain .cmult.bump { animation: mbump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mbump { from { transform: scale(1.5); } }
.flyStar { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; }

/* ---------- win bar: under the reels ---------- */
#winBar { position: absolute; z-index: 5; left: 560px; width: 680px; top: 862px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(16, 2, 18, .82) 18%, rgba(16, 2, 18, .82) 82%, transparent); opacity: 0; transition: opacity .35s; }
#winBar::before, #winBar::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 150, 210, .55), transparent); }
#winBar::before { top: 0; } #winBar::after { bottom: 0; }
#winBar.show { opacity: 1; }
#winBar .wl { font: 900 34px Cinzel, serif; letter-spacing: .06em; color: #f3c46b; text-shadow: 0 2px 0 #3a1a00, 0 0 10px rgba(0, 0, 0, .6); }
#winBar .cur, .pnum .cur { font: 900 34px Rubik, sans-serif; color: #fff; text-shadow: 0 2px 0 #2a0019; }
#winNum { --h: 44px; }
#winBar.pop #winNum { animation: numPop .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- free spins counter ---------- */
#fsBox { position: absolute; z-index: 5; left: 60px; top: 330px; width: 300px; height: 172px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: url(img/panel.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.fsmode #fsBox { display: flex; }
#fsBox .lbl { margin-top: 16px; font: 400 28px 'Ruslan Display', serif; color: #ffd6ee; text-shadow: 0 2px 0 #2a0019; }
#fsBox .lbl2 { font: 800 14px Rubik, sans-serif; color: #f0b6d8; letter-spacing: .1em; }
#fsNum { --h: 52px; }
#fsBox.hit #fsNum { animation: numPop .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- sprite numbers ---------- */
.num { display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; --h: 60px; }
.num img { height: var(--h); margin: 0 calc(var(--h) * .012); display: block; filter: drop-shadow(0 3px 0 rgba(30, 0, 20, .6)); }
.num img.c { height: calc(var(--h) * .46); margin: 0 calc(var(--h) * .03) calc(var(--h) * -.12); }
.num img.x { height: calc(var(--h) * .7); margin: 0 calc(var(--h) * .02) calc(var(--h) * .02); }
.num img.sp { visibility: hidden; width: calc(var(--h) * .28); height: 1px; }
@keyframes numPop { from { transform: scale(1.18); } }

#fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }

/* ---------- popups ---------- */
.popup { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; }
.popup.show { display: flex; }
.popup .dim { position: absolute; inset: 0; background: rgba(12, 0, 16, .78); animation: fadeIn .45s ease-out both; }
.popup.hide .dim { animation: fadeOut .5s ease-in both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.popup > :not(.dim) { position: relative; }
.popup.hide > :not(.dim) { animation: popOut .45s ease-in both !important; }
@keyframes popOut { to { transform: scale(.9); opacity: 0; } }
.tapHint { margin-top: 26px; font: 700 24px Rubik, sans-serif; letter-spacing: .08em; color: #f5d6ea; opacity: .85; animation: fadeIn .4s 1s both; }

#popBig { cursor: pointer; }
#popBig .halo { position: absolute; left: 50%; top: 45%; width: 1500px; height: 900px; margin: -450px 0 0 -750px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 60, 170, .35), transparent); animation: fadeIn .8s both; pointer-events: none; }
#bigTitle { width: 1080px; display: flex; justify-content: center; }
#bigTitle img { width: 100%; display: block; animation: titleIn .7s cubic-bezier(.2, 1.3, .4, 1) both; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .7)); }
#bigTitle.swap img { animation: titleSwap .6s cubic-bezier(.2, 1.3, .4, 1) both, softPulse 2.2s .6s ease-in-out infinite; }
@keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes titleIn { from { transform: scale(.4); opacity: 0; } }
@keyframes titleSwap { from { transform: scale(1.3); opacity: 0; } }
#bigNum { --h: 120px; margin-top: 6px; animation: fadeIn .5s .3s both; }
#bigNum.done { animation: numPop .5s cubic-bezier(.3, 1.6, .5, 1), numBreath 1.6s .5s ease-in-out infinite; }

.plate { width: 1000px; animation: plateIn .6s cubic-bezier(.2, 1.2, .4, 1) both; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .7)); }
.plate .pimg { width: 100%; display: block; }
@keyframes plateIn { from { transform: scale(.85); opacity: 0; } }
.plate .inner { position: absolute; left: 12%; right: 12%; top: 24%; bottom: 14%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center; }
.pt1 { line-height: 1; font: 400 70px/1 'Ruslan Display', serif; color: #ffd6ee; text-shadow: 0 4px 0 #2a0019, 0 0 22px rgba(255, 60, 170, .45); }
.pt2 { font: 400 36px/1 'Ruslan Display', serif; letter-spacing: .04em; color: #f6c6e3; text-shadow: 0 3px 0 #2a0019; }
.pnum { display: flex; align-items: flex-end; gap: 18px; line-height: 1; }
.pnum .num { --h: 96px; }
.pnum .cur { font-size: 58px; margin-bottom: 6px; }
.playBtn { margin-top: 28px; padding: 18px 90px; font: 900 32px Rubik, sans-serif; letter-spacing: .08em; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ff5cbc, #c0177a 55%, #8a0b56); border: 2px solid #ffc6e6; border-radius: 50px; box-shadow: 0 8px 0 #4a0430, 0 12px 30px rgba(0, 0, 0, .5);
  animation: fadeIn .4s .6s both; transition: transform .15s, filter .15s; }
.playBtn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.playBtn:active { transform: translateY(4px); box-shadow: 0 4px 0 #4a0430; }

.infoPanel { width: 1300px; max-height: 920px; overflow: auto; padding: 40px 60px; box-sizing: border-box; color: #ffe3f4; cursor: default;
  background: linear-gradient(180deg, rgba(40, 4, 40, .97), rgba(16, 2, 20, .97)); border: 2px solid #b3307f; border-radius: 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); animation: plateIn .45s both; font: 600 20px/1.45 Rubik, sans-serif; }
.infoPanel h2 { font: 400 44px 'Ruslan Display', serif; text-align: center; margin: 0 0 20px; color: #ff9bd3; }
.infoPanel h3 { font: 400 28px 'Ruslan Display', serif; margin: 26px 0 8px; color: #ff9bd3; }
.infoPanel p { margin: 6px 0; }
.ptab { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pit { display: flex; align-items: center; gap: 10px; background: rgba(255, 40, 160, .07); border: 1px solid rgba(255, 80, 180, .25); border-radius: 14px; padding: 8px; font-size: 17px; }
.pit img { width: 74px; height: 74px; object-fit: contain; }
.pit b { color: #fff; }
.mrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mrow img { height: 54px; }
.lineGrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.lineGrid svg { width: 100%; background: rgba(0, 0, 0, .35); border-radius: 8px; }
.closeBtn { display: block; margin: 26px auto 0; padding: 14px 60px; font: 900 24px Rubik, sans-serif; color: #fff; background: linear-gradient(180deg, #ff5cbc, #a80d63); border: 2px solid #ffc2e6; border-radius: 40px; cursor: pointer; }

/* ---------- black iris ---------- */
#iris { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; overflow: hidden; }
#iris.on { display: block; pointer-events: all; }
#iris i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 300vmax #000; }

/* ---------- intro (static, like a provider's loading screen) ---------- */
#intro { position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden; }
#intro.out { animation: fadeOut .7s ease-in forwards; }
#introProvider { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .8s; }
#introProvider.on { opacity: 1; }
#introProvider img { width: min(32vw, 480px); }
#introStage { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 1920px; height: 1080px; opacity: 0; transition: opacity .7s; }
#introStage.on { opacity: 1; }
#introStage .ibg { position: absolute; inset: 0; background: url(img/bg.webp) center / cover; }
#introLoad::before { content: ''; position: absolute; inset: 0; background: rgba(14, 2, 18, .55); backdrop-filter: blur(6px); }
#introLoad, #introMenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s; pointer-events: none; }
#introLoad > *, #introMenu > * { position: relative; }
#introLoad.on, #introMenu.on { opacity: 1; pointer-events: all; }
.presents { font: 700 26px Rubik, sans-serif; color: #f5d6ea; letter-spacing: .3em; margin-bottom: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ilogo { width: 640px; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6)); }
.loadbar { position: relative; width: 560px; height: 14px; margin-top: 40px; border-radius: 8px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 2px rgba(255, 150, 210, .35); overflow: hidden; }
.loadbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(180deg, #ff9fd6, #e2268f 60%, #a10f60); transition: width .15s linear; }
.loadPct { margin-top: 14px; font: 800 22px Rubik, sans-serif; color: #f5d6ea; }

#introMenu { cursor: pointer; justify-content: flex-start; padding-top: 24px; box-sizing: border-box; }
#introMenu::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 2, 18, .15), rgba(14, 2, 18, .45)); }
.mlogo { width: 470px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)); }
.vol { display: flex; align-items: center; gap: 8px; margin: 4px 0 30px; padding: 8px 22px; border-radius: 30px; background: rgba(20, 0, 20, .75); border: 2px solid #8a2a6c; }
.vol span { font: 900 19px Rubik, sans-serif; color: #f5d6ea; letter-spacing: .1em; margin-right: 6px; }
.vol b { width: 20px; height: 20px; border-radius: 50%; background: #3a0a30; border: 2px solid #c94b97; }
.vol b.on { background: radial-gradient(circle at 35% 30%, #ffd1ef, #ff2d95 55%, #8a0a52); }
.cards { display: flex; gap: 46px; }
.card { width: 460px; height: 560px; box-sizing: border-box; padding: 24px 30px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(58, 10, 52, .94), rgba(22, 3, 24, .96)); border: 3px solid #a03077; box-shadow: 0 18px 36px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(0, 0, 0, .25); }
.card .icon { position: relative; height: 270px; width: 100%; display: flex; align-items: center; justify-content: center; }
.card .ct { font: 400 32px 'Ruslan Display', serif; color: #ff9bd3; text-shadow: 0 3px 0 #2a0019; margin: 12px 0 12px; }
.card p { margin: 0; font: 700 20px/1.42 Rubik, sans-serif; color: #f3d7e8; }
.curtIcon .mini { position: relative; width: 110px; height: 262px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #3b0a35, #1a0317); box-shadow: 0 0 0 3px #e06aad, 0 10px 20px rgba(0, 0, 0, .5); }
.curtIcon .cg { position: absolute; width: 190%; left: 50%; top: 16%; transform: translateX(-50%); }
.curtIcon .cw { position: absolute; width: 92%; left: 4%; top: 1%; }
.curtIcon .cx { position: absolute; width: 80%; left: 10%; bottom: 3%; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }
.curtIcon .st { position: absolute; width: 130px; left: calc(50% - 185px); top: 66px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.card .icon .fsimg { width: 260px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.maxIcon span { font: 400 92px 'Metal Mania', serif; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #ffe3f4, #ff2d95 60%, #8a0a52); -webkit-text-stroke: 2px #ffd0ea; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
#introMenu .tapHint { margin-top: 30px; font: 400 32px 'Ruslan Display', serif; color: #ffe3f4; text-shadow: 0 3px 0 #2a0019; animation: none; opacity: 1; }
.plusTag { position: absolute; z-index: 31; pointer-events: none; font: 400 56px 'Metal Mania', serif; color: #fff; -webkit-text-stroke: 2px #c0177a; text-shadow: 0 0 14px rgba(255, 60, 170, .9), 0 4px 0 #3a0026; }
#popFs { cursor: pointer; }
#popFs .tapHint { margin-top: 30px; font-size: 26px; opacity: .6; animation: fadeIn .5s 1s both; }

/* big win: the title pops in and swaps tiers; the digits twinkle softly */
#bigTitle img { animation: titleIn .7s cubic-bezier(.2, 1.3, .4, 1) both, softPulse 2.2s .7s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .65)); }
#bigTitle.swap img { animation: titleSwap .6s cubic-bezier(.2, 1.3, .4, 1) both, softPulse 2.2s .6s ease-in-out infinite; }
@keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
#bigTitle .sweep { display: none; }
#popBig .halo { display: none; }
/* big win counter: fixed-width digit slots so the number never jumps while it counts, and a slow even pulse */
#bigNum { animation: fadeIn .5s .3s both, numBreath 1.6s ease-in-out infinite; }
@keyframes numBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
#popBig.hide #bigTitle, #popBig.hide #bigNum { animation: bigOut .6s cubic-bezier(.5, 0, .8, .4) both !important; }
@keyframes bigOut { to { transform: scale(.7) translateY(-40px); opacity: 0; } }
#bigTitle .old { position: absolute; left: 0; top: 0; width: 100%; animation: none !important; pointer-events: none; }
#bigTitle.swap img:not(.old) { animation: titleFly .75s cubic-bezier(.2, 1.1, .35, 1) both, softPulse 2.2s .75s ease-in-out infinite; }
@keyframes titleFly { from { transform: scale(1.6); opacity: 0; filter: blur(6px) drop-shadow(0 12px 20px rgba(0, 0, 0, .65)); } to { transform: scale(1); opacity: 1; filter: blur(0) drop-shadow(0 12px 20px rgba(0, 0, 0, .65)); } }
#fx.inPop { position: absolute !important; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
#popBig #bigTitle, #popBig #bigNum, #popBig .tapHint { z-index: 1; }
#bigTitle.swap img:not(.old) { animation: none; }

/* winning symbol: hops up, squashes on landing, settles — and shines briefly at the top of the hop */
@keyframes symHop {
  0% { transform: translateY(0) scale(1, 1); filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)) brightness(1); }
  14% { transform: translateY(2%) scale(1.1, .9); }
  38% { transform: translateY(-12%) scale(.95, 1.1); filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .45)) brightness(1.25); }
  60% { transform: translateY(0) scale(1.08, .93); filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)) brightness(1.05); }
  74% { transform: translateY(-2%) scale(.98, 1.02); }
  86%, 100% { transform: translateY(0) scale(1, 1); filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)) brightness(1); }
}
/* the curtain: a gothic banner — pointed arch on top, cut corners below, thin double rim, no rounded box */
.curtain { clip-path: polygon(0% 8%, 6% 4.6%, 16% 2.1%, 30% .6%, 50% 0%, 70% .6%, 84% 2.1%, 94% 4.6%, 100% 8%, 100% 97.4%, 91% 100%, 9% 100%, 0% 97.4%); }
.curtain .cpanel { border-radius: 0; inset: 0; box-shadow: inset 0 0 26px rgba(255, 50, 160, .45); }
.curtain .frameS { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.curtain .frameS polygon { fill: none; vector-effect: non-scaling-stroke; }
.curtain .cwild { left: 8%; width: 84%; top: 4.5%; }
.curtain::after { display: none; }
.curtain.lit .cpanel { animation: curtLit 1.15s ease-in-out infinite; }
@keyframes curtLit { 50% { filter: brightness(1.15) saturate(1.1); } }
/* bonus-buy button: no pulsing glow */
.sui-on { animation: none !important; filter: none !important; }

/* curtain dressing: deep velvet inside, a jewel on the arch tip, two studs at the cut corners */
.curtain .cpanel { background: radial-gradient(120% 60% at 50% 35%, #5a0f4c, #2a0626 55%, #14020f), #1a0317; box-shadow: inset 0 0 30px rgba(0, 0, 0, .65), inset 0 0 60px rgba(255, 50, 160, .25); }
.curtain .cpanel::before { opacity: .28; }
.curtain .jewel { position: absolute; z-index: 4; left: 50%; top: 4px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #fff, #ff7ccc 40%, #a3105f); box-shadow: 0 0 0 2px #1c0218, 0 0 10px rgba(255, 90, 190, .9); }
.curtain .stud { position: absolute; z-index: 4; bottom: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ff7ccc 45%, #8a0c50); box-shadow: 0 0 0 1.5px #1c0218; }
.curtain .stud.l { left: 16px; } .curtain .stud.r { right: 16px; }
.curtain .cfade { background: linear-gradient(180deg, rgba(20, 2, 18, .5) 0%, transparent 20%, transparent 62%, rgba(20, 2, 18, .92) 100%); }
.curtain .stud { display: none; }
.curtain .csweep { position: absolute; left: -10%; right: -10%; top: 0; height: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 225, 245, .35) 50%, transparent); }
.curtain.lit .cgirl { animation: girlGlow 1.6s ease-in-out infinite; }
@keyframes girlGlow { 50% { filter: brightness(1.12); } }

/* digits in fixed slots: each digit keeps its full height, centred in a slot of one width */
.num.slots .slot { display: flex; justify-content: center; align-items: flex-end; width: calc(var(--h) * .66); height: var(--h); }
.num.slots .slot img { height: var(--h); width: auto; margin: 0; }
.num.slots .slot.c { width: calc(var(--h) * .26); }
.num.slots .slot.c img { height: calc(var(--h) * .46); margin-bottom: calc(var(--h) * -.12); }
.num.slots .slot.sp { width: calc(var(--h) * .24); }
.num.slots .slot.x { width: calc(var(--h) * .55); }
.num.slots .slot.x img { height: calc(var(--h) * .7); }

/* FREE SPINS symbol: just a little bigger, scaled from its own centre */
.cell.S .sym, .cell.S .breath { position: absolute; left: 0; top: 0; width: 100%; height: 100%; scale: 1.12; }

/* intro: the backdrop is blurred from the very first frame and only clears for the feature menu */
#introStage .ibg { filter: blur(12px) brightness(.5) saturate(1.1); transform: scale(1.05); transition: filter 1s ease, transform 1s ease; }
#introStage.menu .ibg { filter: none; transform: none; }
#introLoad::before { display: none; }
#introLoad { gap: 0; }
#introLoad .ilogo { width: 600px; animation: logoIn 1.2s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes logoIn { from { opacity: 0; transform: scale(.94); } }
.loadline { position: relative; width: 440px; height: 3px; margin-top: 46px; background: rgba(255, 220, 240, .14); border-radius: 2px; }
.loadline i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 90, 180, .2), #ff5fb6 70%, #ffe1f2); transition: width .15s linear; }
.loadline i::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff3fa; box-shadow: 0 0 10px 3px rgba(255, 110, 200, .9); }
#introLoad .loadPct { margin-top: 18px; font: 600 14px Rubik, sans-serif; letter-spacing: .4em; color: rgba(255, 225, 242, .7); }
#introLoad .loadPct b { color: #fff; font-weight: 800; }
#introLoad .brand { position: absolute; bottom: 40px; font: 800 15px Rubik, sans-serif; letter-spacing: .6em; color: rgba(255, 255, 255, .45); }

/* menu: the long WILD on its own, the max win written in the game's digits */
.curtIcon .mini { width: 120px; height: 264px; clip-path: polygon(0% 8%, 6% 4.6%, 16% 2.1%, 30% .6%, 50% 0%, 70% .6%, 84% 2.1%, 94% 4.6%, 100% 8%, 100% 97.4%, 91% 100%, 9% 100%, 0% 97.4%); border-radius: 0; box-shadow: none;
  background: radial-gradient(120% 60% at 50% 35%, #5a0f4c, #2a0626 55%, #14020f); }
.curtIcon .st { display: none; }
.maxIcon { flex-direction: column; gap: 10px; }
.maxIcon .num { --h: 74px; }
.maxSub { font: 400 30px 'Ruslan Display', serif; color: #ffd6ee; letter-spacing: .1em; text-shadow: 0 3px 0 #2a0019; }
.maxIcon span { display: none; }

/* PlayUI bonus cards: same height, titles and pictures on one line, buttons on one line at the bottom */
.pu-cards { align-items: stretch !important; }
.pu-card { display: flex !important; flex-direction: column !important; }
.pu-card h3 { min-height: 2.4em; display: flex; align-items: center; justify-content: center; margin-bottom: .3em !important; }
.pu-card p { flex: 1 1 auto; min-height: 4.6em; }
.pu-card .pu-buy { margin-top: auto !important; }

/* ---------- WGP1 (02.11.2026): WIND GAME SOFT integration. PlayUI bar below the scene, portrait reel column, server notices ---------- */
#viewport { touch-action: manipulation; }
body.dd-portrait #girlBox, body.dd-portrait #girlShadow { display: none; }
body.dd-portrait #logo { left: 710px; top: -14px; width: 380px; }
body.dd-portrait #machine { top: 190px; }
body.dd-portrait #winBar { top: 1022px; }
body.dd-portrait #fsBox { left: 440px; top: 30px; width: 230px; height: 124px; transform-origin: 0 0; }
body.dd-portrait #fsBox .lbl { margin-top: 6px; font-size: 22px; }
body.dd-portrait .popup .plate, body.dd-portrait #bigTitle, body.dd-portrait #bigNum { transform: scale(.72); }
.dd-net { position: fixed; z-index: 1200; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px; background: #21171ff5; border: 1px solid #603546; border-radius: 18px; box-shadow: 0 12px 50px #000b; color: #faf3f6; font: 400 15px/1.5 Arimo, Arial, sans-serif; display: flex; flex-wrap: wrap; gap: 10px; }
.dd-net[hidden], .dd-net [hidden] { display: none !important; }
.dd-net p { flex: 1 1 100%; margin: 0 0 4px; }
.dd-net button, .dd-net a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; padding: 10px 16px; border-radius: 12px; background: #ed174d; color: #fff; font: 700 15px Arimo, Arial, sans-serif; text-decoration: none; cursor: pointer; }
.dd-net #netCancel, .dd-net #netClose { background: #291923; box-shadow: inset 0 0 0 1px #603546; }