* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f6b5dc; font-family: 'Rubik', 'Arial Black', sans-serif; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #e9a6c8; }
/* soft blurred copy of the art fills whatever the window shows around the fixed 16:9 scene */
#viewport::before { content: ''; position: absolute; inset: -60px; background: url(img/bg.webp) center 70% / cover no-repeat; filter: blur(26px) saturate(1.1) brightness(.92); }
/* the scene art lives inside the stage, so it scales together with the girl, reels and logo */
#bgLayer { position: absolute; left: -14px; top: -54px; width: 2023px; height: 1128px; max-width: none; pointer-events: none; display: block; }
#viewport::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(120, 20, 90, .25)); }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#stage.land { width: 1920px; height: 1080px; }
#stage.port { width: 1080px; height: 1920px; }
img { -webkit-user-drag: none; }

/* ---------- casino gradient text: fill on the element, outline + shadow on ::before ---------- */
.g { position: relative; isolation: isolate; color: transparent; white-space: nowrap; line-height: 1.1; }
.g::before, .g::after { content: attr(data-t); position: absolute; inset: 0; white-space: inherit; pointer-events: none; }
.g::before { z-index: -1; color: #6d0751; -webkit-text-stroke: .16em #6d0751; text-shadow: 0 .09em 0 #45033a, 0 .14em .3em rgba(40, 0, 40, .55); }
.g::after { z-index: 1; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #fffbe0 0%, #ffe95c 38%, #ffc21a 56%, #ff9500 100%); }
.g.cyan::after { background-image: linear-gradient(180deg, #f2ffff 0%, #8ff8ff 40%, #2fd9ff 58%, #1a8cff 100%); }
.g.cyan::before { color: #3b0a78; -webkit-text-stroke-color: #3b0a78; text-shadow: 0 .09em 0 #24044d, 0 .14em .3em rgba(20, 0, 50, .55); }
.g.pink::after { background-image: linear-gradient(180deg, #fff2fb 0%, #ffb3e6 40%, #ff5fc4 60%, #e2189a 100%); }

/* ---------- logo / girl ---------- */
#logo { position: absolute; filter: drop-shadow(0 10px 18px rgba(120, 10, 80, .35)); animation: logoFloat 6s ease-in-out infinite; transform-origin: 50% 70%; }
.land #logo { width: 330px; left: 56px; top: 18px; }
.port #logo { width: 360px; left: 360px; top: calc(16px + var(--extra) * .25); }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
#girlBox { position: absolute; pointer-events: none; filter: drop-shadow(0 16px 20px rgba(120, 20, 90, .3)); }
#girlBox canvas { width: 100%; height: 100%; display: block; }
.land #girlBox { width: 490px; height: 846px; left: 10px; top: 186px; }
.port #girlBox { width: 370px; height: 639px; left: 20px; bottom: calc(240px + var(--extra) * .1); }

/* ---------- machine ---------- */
#machine { position: absolute; }
.land #machine { width: 1120px; height: 806px; left: 465px; top: 150px; }
.port #machine { width: 1070px; height: 770px; left: 5px; top: calc(440px + var(--extra) * .45); }
#frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(110, 20, 70, .45)); z-index: 3; }
#reelBack, #board { position: absolute; left: 8%; top: 15.1%; width: 84%; height: 71.85%; }
#reelBack { background: linear-gradient(180deg, #4b1272 0%, #6c1f9c 38%, #7a26a8 60%, #4f1477 100%); box-shadow: inset 0 0 50px rgba(20, 0, 40, .6); z-index: 1; overflow: hidden; }
#reelBack::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 8.33%, rgba(0, 0, 0, .07) 8.33% 16.666%); }
#reelBack::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, rgba(20, 0, 40, .5), transparent); }
#reelBack i { position: absolute; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; z-index: 2;
  background: linear-gradient(90deg, #8a4a06 0%, #ffd66b 30%, #fff4c2 50%, #f0a92c 72%, #8a4a06 100%);
  box-shadow: 0 0 6px rgba(0, 0, 0, .45), 0 0 10px rgba(255, 200, 90, .25); }
#reelBack i::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95), transparent); animation: railShine 5s ease-in-out infinite; }
#reelBack i:nth-child(1) { left: 16.666%; }
#reelBack i:nth-child(2) { left: 33.333%; } #reelBack i:nth-child(2)::after { animation-delay: .25s; }
#reelBack i:nth-child(3) { left: 50%; } #reelBack i:nth-child(3)::after { animation-delay: .5s; }
#reelBack i:nth-child(4) { left: 66.666%; } #reelBack i:nth-child(4)::after { animation-delay: .75s; }
#reelBack i:nth-child(5) { left: 83.333%; } #reelBack i:nth-child(5)::after { animation-delay: 1s; }
@keyframes railShine { 0% { top: -30%; } 30%, 100% { top: 110%; } }
#board { z-index: 2; overflow: hidden; }
#frameGlow { position: absolute; inset: -2%; pointer-events: none; z-index: 4; opacity: 0; border-radius: 40px;
  background: radial-gradient(closest-side, transparent 86%, rgba(255, 220, 100, .55) 95%, transparent 100%); transition: opacity .3s; mix-blend-mode: screen; }
#machine.win #frame { animation: frameWin .55s ease-in-out infinite alternate; }
#machine.win #frameGlow { opacity: 1; animation: glowPulse .55s ease-in-out infinite alternate; }
@keyframes frameWin { from { filter: drop-shadow(0 14px 22px rgba(110, 20, 70, .45)) brightness(1); } to { filter: drop-shadow(0 0 26px rgba(255, 210, 80, .95)) drop-shadow(0 0 60px rgba(255, 170, 40, .6)) brightness(1.18); } }
@keyframes glowPulse { from { opacity: .45; } to { opacity: 1; } }
#frameSweep { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; -webkit-mask: url(img/frame.webp) center / 100% 100%; mask: url(img/frame.webp) center / 100% 100%; }
#frameSweep::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 18%; left: -30%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: sweep 6s ease-in-out infinite; }
#machine.win #frameSweep::before { animation-duration: 1.1s; }
@keyframes sweep { 0% { left: -30%; } 35%, 100% { left: 120%; } }
#machine.shake { animation: shake .45s ease-out; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

/* ---------- cells ---------- */
.cell { position: absolute; width: 16.6667%; height: 25%; display: flex; align-items: center; justify-content: center; will-change: transform; }
.cell .sym { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(30, 0, 40, .45)); pointer-events: none; }
.cell.S .sym { width: 100%; height: 100%; }
.cell.M .sym { width: 100%; height: 100%; animation: orbIdle 2.4s ease-in-out infinite; }
.cell .tag { position: absolute; width: 58%; height: 40%; object-fit: contain; left: 21%; top: 34%; filter: drop-shadow(0 3px 2px rgba(60, 0, 40, .5)); pointer-events: none; }
.cell.spent .tag { opacity: 0; transition: opacity .15s; }
@keyframes orbIdle { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
.cell.win { z-index: 3; }
.cell.win .sym { animation: symWin .42s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ffd25a) brightness(1.12); }
.cell.win::before { content: ''; position: absolute; inset: 2%; border-radius: 22%; background: radial-gradient(circle, rgba(255, 245, 200, .9), rgba(255, 190, 60, .35) 55%, transparent 72%); animation: haloSpin 1.2s linear infinite; }
.cell.win::after { content: ''; position: absolute; inset: -6%; background: conic-gradient(from 0deg, transparent 0 10%, rgba(255, 230, 140, .55) 12%, transparent 16% 35%, rgba(255, 230, 140, .5) 37%, transparent 41% 60%, rgba(255, 230, 140, .5) 62%, transparent 66% 85%, rgba(255, 230, 140, .5) 87%, transparent 91%); border-radius: 50%; animation: haloSpin 2.4s linear infinite; mix-blend-mode: screen; }
@keyframes symWin { from { transform: translateY(0) scale(1.02); } to { transform: translateY(-7%) scale(1.16); } }
@keyframes haloSpin { to { transform: rotate(360deg); } }
.cell.glow .sym, .cell.glow .tag { animation: orbGlow .3s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 30px #ff7ad9); }
@keyframes orbGlow { from { transform: scale(1); } to { transform: scale(1.18); } }
.cell.scat .sym { animation: scatBounce .5s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 34px #ffcf3a); }
.cell.scat::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255, 240, 160, .55) 0 6deg, transparent 6deg 22deg); border-radius: 50%; animation: haloSpin 3s linear infinite; -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); }
@keyframes scatBounce { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.2) rotate(4deg); } }
.flyTag { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; will-change: transform; }
img.flyTag { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #ff74d4) drop-shadow(0 6px 6px rgba(80, 0, 50, .5)); }
.winFloat { position: absolute; z-index: 31; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px rgba(255, 220, 90, .9)) drop-shadow(0 5px 0 rgba(90, 0, 60, .5)); }

/* ---------- sprite digits ---------- */
.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) * -.045); display: block; }
.num img.c { height: calc(var(--h) * .36); align-self: flex-end; margin: 0 calc(var(--h) * .0) calc(var(--h) * -.11) calc(var(--h) * -.02); }
.num img.x { height: calc(var(--h) * .62); margin: 0 calc(var(--h) * .06) calc(var(--h) * .06); }
.num img.sp { visibility: hidden; width: calc(var(--h) * .22); height: 1px; }
.num.pop { animation: numPop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes numPop { from { transform: scale(1.35); filter: brightness(1.6); } }

/* ---------- top panel, fs counter, total multiplier ---------- */
#topPanel { position: absolute; z-index: 6; filter: drop-shadow(0 10px 16px rgba(90, 10, 70, .45));
  opacity: 0; transform: translateY(-24px) scale(.85); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.3, 1.5, .5, 1); }
#topPanel.show { opacity: 1; transform: none; }
.land #topPanel { width: 540px; left: 755px; top: 46px; }
.port #topPanel { width: 640px; left: 220px; top: calc(300px + var(--extra) * .35); }
#topPanel > img, #multOrb > img { width: 100%; display: block; }
#topPanel .inner { position: absolute; left: 11.1%; right: 11%; top: 14%; bottom: 20%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#topNum { --h: 60px; }
#topPanel.hit { animation: panelHit .45s ease-out; }
@keyframes panelHit { 30% { transform: scale(1.08); filter: brightness(1.45) drop-shadow(0 0 30px #ffd84a); } }
#topPanel::after { content: ''; position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(img/panel_top.webp) center / 100% 100%; mask: url(img/panel_top.webp) center / 100% 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) -200% 0 / 200% 100% no-repeat; animation: panelShine 5s ease-in-out infinite; }
@keyframes panelShine { 0% { background-position: 200% 0; } 40%, 100% { background-position: -200% 0; } }

#fsBox { position: absolute; z-index: 6; display: none; filter: drop-shadow(0 10px 16px rgba(90, 10, 70, .45)); }
.fsmode #fsBox { display: block; animation: boxIn .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes boxIn { from { transform: scale(.4) translateY(-30px); opacity: 0; } }
.land #fsBox { width: 330px; left: 1592px; top: 168px; }
.port #fsBox { width: 340px; left: 370px; top: calc(1240px + var(--extra) * .5); }
#fsBox > img { width: 100%; display: block; }
#fsBox .inner { position: absolute; left: 7%; right: 7%; top: 27%; bottom: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#fsBox .lbl { font-family: 'Lobster', cursive; font-weight: 400; font-size: 44px; line-height: 1; }
#fsBox .lbl::before { -webkit-text-stroke-width: .12em; }
#fsBox::after { content: ''; position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(img/panel_crown.webp) center / 100% 100%; mask: url(img/panel_crown.webp) center / 100% 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) -200% 0 / 200% 100% no-repeat; animation: panelShine 4.5s ease-in-out infinite; }
#fsNum { --h: 50px; }

#multOrb { position: absolute; z-index: 6; filter: drop-shadow(0 12px 18px rgba(90, 10, 70, .45)); opacity: 0; transform: scale(.3); pointer-events: none;
  transition: opacity .35s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
#multOrb.on { opacity: 1; transform: scale(1); }
.land #multOrb { width: 230px; left: 1642px; top: 400px; }
.port #multOrb { width: 230px; left: 790px; top: calc(1230px + var(--extra) * .5); }
#multOrb .inner { position: absolute; left: 21.9%; width: 55.3%; top: 29.4%; height: 48.7%; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
#multNum { --h: 46px; position: relative; }
#multOrb.hit > img, #multOrb.hit .inner { animation: orbHit .5s ease-out; }
@keyframes orbHit { 35% { transform: scale(1.14) rotate(-4deg); filter: brightness(1.6) drop-shadow(0 0 40px #ff7ae0); } }

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

/* ---------- popups (smooth in/out; the dim covers the whole window) ---------- */
.popup { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
.popup.show { display: flex; }
.popup .dim { position: absolute; inset: -3000px; background: rgba(28, 0, 38, .74); animation: dimIn .45s ease-out both; }
.popup.hide .dim { animation: dimOut .5s ease-in both; }
@keyframes dimIn { from { opacity: 0; } }
@keyframes dimOut { to { opacity: 0; } }
.popup > :not(.dim) { position: relative; }
.popup.hide > :not(.dim):not(.confetti) { animation: popOut .45s cubic-bezier(.5, 0, .9, .5) both !important; }
@keyframes popOut { to { transform: scale(.75) translateY(30px); opacity: 0; } }
.tapHint { margin-top: 24px; font-weight: 800; font-size: 26px; letter-spacing: .04em; animation: tap 1.6s ease-in-out infinite; }
@keyframes tap { 50% { opacity: .45; } }
.popup .confetti { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

.crownPanel { width: 1000px; animation: panelIn .7s cubic-bezier(.25, 1.5, .5, 1) both; filter: drop-shadow(0 20px 40px rgba(30, 0, 40, .6)); }
.port .crownPanel { width: 1020px; }
.crownPanel > img { width: 100%; display: block; }
@keyframes panelIn { from { transform: scale(.4) translateY(60px); opacity: 0; } 60% { opacity: 1; } }
.crownPanel .inner { position: absolute; left: 6%; right: 6%; top: 25%; bottom: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pt1 { font-family: 'Lobster', cursive; font-size: 96px; font-weight: 400; line-height: 1.05; transform: rotate(-3deg); animation: ptIn .7s .2s both cubic-bezier(.3, 1.7, .5, 1); }
.pt1::before { -webkit-text-stroke-width: .11em; }
.pt2 { font-weight: 900; font-size: 42px; letter-spacing: .03em; animation: ptIn .5s .35s both; }
#popFsT3 { animation-delay: .55s; }
@keyframes ptIn { from { transform: scale(.3); opacity: 0; } }
.pbar { position: relative; width: 82%; margin: 2px 0; animation: ptIn .6s .45s both cubic-bezier(.3, 1.7, .5, 1); }
.pbar > img { width: 100%; display: block; }
.pbar .slot { position: absolute; left: 11%; right: 11%; top: 24%; bottom: 22%; display: flex; align-items: center; justify-content: center; }
.pbar .num { --h: 76px; }

#bigTitle { position: relative; width: 1100px; aspect-ratio: var(--ar, 2.6); }
.port #bigTitle { width: 1000px; }
#bigTitle .main { position: absolute; animation: titleIn .8s cubic-bezier(.25, 1.6, .5, 1) both; }
#bigTitle .main img { width: 100%; height: 100%; display: block; animation: titlePulse 1.8s .8s ease-in-out infinite; filter: drop-shadow(0 16px 30px rgba(40, 0, 50, .6)); }
#bigTitle .pc { position: absolute; animation: pieceIn .9s var(--d) both cubic-bezier(.2, 1.5, .5, 1); }
#bigTitle .pc img { width: 100%; height: 100%; display: block; animation: pieceFloat var(--t) var(--d2) ease-in-out infinite alternate; filter: drop-shadow(0 8px 10px rgba(40, 0, 50, .45)); }
@keyframes titleIn { from { transform: scale(.2) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes titlePulse { 50% { transform: scale(1.035); } }
@keyframes pieceIn { from { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.2); opacity: 0; } 50% { opacity: 1; } }
@keyframes pieceFloat { from { transform: translate(0, 0) rotate(calc(var(--r) * -1)); } to { transform: translate(var(--mx), var(--my)) rotate(var(--r)); } }
#bigTitle.swap .main { animation: titleSwap .7s cubic-bezier(.25, 1.8, .5, 1) both; }
@keyframes titleSwap { 0% { transform: scale(1.5); filter: brightness(2.5); opacity: .3; } 100% { transform: scale(1); } }
#popBig .rays { position: absolute; left: 50%; top: 42%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; pointer-events: none; animation: dimIn .8s both;
  background: repeating-conic-gradient(rgba(255, 220, 120, .15) 0 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 58%); mask: radial-gradient(circle, #000 8%, transparent 58%); }
#popBig .rays::after { content: ''; position: absolute; inset: 0; animation: haloSpin 16s linear infinite; }
#popBig.show .rays { animation: dimIn .8s both, haloSpin 18s linear infinite; }
#bigNum { --h: 124px; margin-top: 4px; filter: drop-shadow(0 8px 0 rgba(120, 0, 70, .5)) drop-shadow(0 0 30px rgba(255, 200, 60, .45)); animation: ptIn .6s .3s both; }
#bigNum.done { animation: numDone .6s cubic-bezier(.3, 1.8, .5, 1), amtPulse 1.1s .6s ease-in-out infinite; }
@keyframes numDone { from { transform: scale(1.35); filter: brightness(2); } }
@keyframes amtPulse { 50% { transform: scale(1.05); } }

#popInfo { cursor: default; }
.infoPanel { width: 1280px; max-height: 88%; overflow: auto; background: linear-gradient(180deg, #7d22b8, #4a0f78); border: 6px solid #ffc93c; border-radius: 34px; padding: 28px 40px 34px; color: #fff; box-shadow: 0 20px 60px rgba(20, 0, 30, .7), inset 0 0 40px rgba(255, 120, 230, .2); animation: panelIn .5s both; }
.port .infoPanel { width: 1020px; }
.infoPanel h2 { margin: 0 0 14px; text-align: center; font-size: 46px; font-weight: 900; color: #fff200; text-shadow: 0 4px 0 #c4007a; }
.infoPanel h3 { margin: 26px 0 10px; font-size: 26px; font-weight: 900; color: #2ef2ff; }
.infoPanel p { margin: 6px 0; font-size: 19px; line-height: 1.5; font-weight: 700; color: #f6e6ff; }
.ptab { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pit { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 210, 90, .5); border-radius: 18px; padding: 8px 12px; }
.pit img { width: 84px; height: 84px; object-fit: contain; }
.pit div { font-size: 17px; line-height: 1.55; font-weight: 700; }
.pit b { color: #ffe35a; }
.mrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
.mrow img { height: 46px; }
.closeBtn { display: block; margin: 26px auto 0; font: 900 26px 'Rubik', sans-serif; color: #fff; padding: 14px 54px; border-radius: 40px; border: 4px solid #ffd25a; background: linear-gradient(180deg, #ff6fc0, #c4007a); cursor: pointer; box-shadow: 0 6px 0 #5a0a5a; }

/* ---------- candy wipe ---------- */
#wipe { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; display: none; }
#wipe.on { display: block; pointer-events: auto; }
#wipe .fill { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffd1ef, #ff7cc8 60%, #d63a9e); opacity: 0; }
#wipe img { position: absolute; will-change: transform; filter: drop-shadow(0 10px 14px rgba(120, 0, 70, .35)); }

/* ---------- intro ---------- */
#intro { position: fixed; inset: 0; z-index: 300; background: #000; overflow: hidden; cursor: default; transition: opacity .7s; }
#intro.bg { background: #b2569a url(img/bg.webp) center 30% / cover no-repeat; }
#intro.bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(90, 20, 90, .25), rgba(50, 0, 60, .7)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#intro.out { opacity: 0; pointer-events: none; }
#introProvider { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1s ease; }
#introProvider.on { opacity: 1; }
#introProvider img { width: min(44vw, 60vh, 560px); }
#introStage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#introStage.land { width: 1920px; height: 1080px; }
#introStage.port { width: 1080px; height: 1920px; }
#introLoad, #introMenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .7s ease, transform .7s ease; transform: scale(.97); }
#introLoad.on, #introMenu.on { opacity: 1; pointer-events: auto; transform: none; }
.presents { font-weight: 900; font-size: 34px; letter-spacing: .08em; margin-bottom: 26px; }
.ilogo { width: 640px; filter: drop-shadow(0 16px 30px rgba(60, 0, 60, .55)); animation: logoFloat 4s ease-in-out infinite; }
.port .ilogo { width: 760px; }
.loadbar { position: relative; width: 760px; margin-top: 40px; }
.loadbar img { width: 100%; display: block; position: relative; z-index: 2; }
.loadbar .track { position: absolute; left: 11.6%; right: 11.6%; top: 27%; bottom: 25%; border-radius: 40px; background: #5a0846; overflow: hidden; z-index: 3; box-shadow: inset 0 4px 8px rgba(0, 0, 0, .45); }
.loadbar .track i { display: block; height: 100%; width: 0; border-radius: 40px; transition: width .25s ease-out;
  background: repeating-linear-gradient(-45deg, #fff 0 18px, #ff8fd2 18px 36px); background-size: 51px 100%; animation: stripes .6s linear infinite; box-shadow: 0 0 16px rgba(255, 255, 255, .7); }
@keyframes stripes { to { background-position: 51px 0; } }
.loadPct { margin-top: 16px; font-weight: 900; font-size: 30px; color: #fff; text-shadow: 0 3px 0 #6d0751, 0 0 14px rgba(255, 120, 220, .6); }
#introMenu { justify-content: flex-start; padding-top: 34px; cursor: pointer; }
.mlogo { width: 420px; filter: drop-shadow(0 14px 24px rgba(60, 0, 60, .55)); }
.vol { display: flex; align-items: center; gap: 10px; margin: 6px 0 26px; padding: 10px 28px; border-radius: 40px; background: linear-gradient(180deg, #ff6fc0, #b4137e); border: 4px solid #ffd25a; box-shadow: 0 6px 0 #5a0a5a, 0 10px 20px rgba(60, 0, 60, .4); }
.vol span { font-weight: 900; font-size: 26px; margin-right: 8px; }
.vol b { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9a0c8 40%, #6d3a6d); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); }
.vol b.on { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd23a 40%, #e07a00); box-shadow: 0 0 10px rgba(255, 210, 60, .8); }
.cards { display: flex; gap: 46px; }
.card { position: relative; width: 470px; height: 560px; border-radius: 48px; padding: 30px 30px 36px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, #ff86cf 0%, #d8329f 45%, #8e1a8e 100%); border: 7px solid #ffd25a;
  box-shadow: 0 0 0 5px #a2156f, 0 16px 0 #5a0a5a, 0 26px 40px rgba(50, 0, 60, .5), inset 0 6px 0 rgba(255, 255, 255, .45), inset 0 -20px 40px rgba(70, 0, 90, .45);
  animation: cardIn .8s cubic-bezier(.25, 1.5, .5, 1) both; }
.card:nth-child(2) { animation-delay: .12s; } .card:nth-child(3) { animation-delay: .24s; }
@keyframes cardIn { from { transform: translateY(80px) scale(.85); opacity: 0; } }
.card::before { content: ''; position: absolute; left: 22px; right: 22px; top: 14px; height: 18px; border-radius: 10px; background: repeating-linear-gradient(-45deg, #fff 0 14px, #ff5fb4 14px 28px); opacity: .85; }
.card .icon { position: relative; height: 210px; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 16px; animation: iconBob 3s ease-in-out infinite; }
.card:nth-child(2) .icon { animation-delay: .5s; } .card:nth-child(3) .icon { animation-delay: 1s; }
@keyframes iconBob { 50% { transform: translateY(-8px); } }
.card .icon img { height: 200px; filter: drop-shadow(0 10px 12px rgba(60, 0, 60, .45)); }
.card .cascade img { height: 150px; margin: 0 -26px; }
.card .cascade img:nth-child(2) { height: 180px; position: relative; z-index: 2; margin-top: -30px; }
.card .orbIcon .tag { position: absolute; height: 74px; left: 50%; top: 52%; transform: translate(-50%, -50%); filter: none; }
.card .ct { font-weight: 900; font-size: 34px; margin: 14px 0 12px; white-space: normal; }
.card p { margin: 0; font-weight: 700; font-size: 21px; line-height: 1.45; color: #fff; text-shadow: 0 2px 3px rgba(80, 0, 60, .6); }
#introMenu .tapHint { margin-top: 34px; font-size: 38px; }
.port #introMenu { padding-top: 60px; }
.port .mlogo { width: 520px; }
.port .cards { flex-direction: column; gap: 30px; }
.port .card { width: 960px; height: 300px; flex-direction: row; text-align: left; padding: 28px 34px 28px 20px; gap: 18px; }
.port .card .icon { width: 260px; height: 230px; margin: 0; flex: none; }
.port .card .ct { margin: 0 0 10px; font-size: 36px; }
.port .card .txt { display: flex; flex-direction: column; justify-content: center; }

/* Native scene and controls occupy separate rectangles. */
body[data-provider=sweet] .wg-help-fabs{display:none!important}
#softNativeNav{position:relative;z-index:70;width:100%;padding:0 8px;background:#19121f}
#serverStatus{position:fixed;z-index:80;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100% - 24px);padding:10px 14px;border-radius:12px;background:#281536ed;color:#fff;font:600 14px Arial;text-align:center;box-shadow:0 4px 18px #0004}
#serverStatus[hidden]{display:none}#serverStatus button{display:block;margin:8px auto 0;min-height:44px;padding:8px 16px;border:0;border-radius:9px;background:#ffe290;color:#281536;font:700 14px Arial}#serverStatus button[hidden]{display:none}
.sui-hhead,.sui-hrow{grid-template-columns:1.2fr 1fr 1fr .8fr!important}.sui-hhead>span:last-child,.sui-hrow>span:last-child,.sui-hdet>div:nth-child(7),.sui-hdet>div:nth-child(8){display:none}
.sui-modal{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.sui-narrow .sui-panel{max-height:calc(100dvh - 24px);overflow:auto}.sui-narrow .sui-cards{gap:12px}.sui-narrow .sui-card{flex:0 0 auto}
.port .infoPanel{width:1000px;max-height:calc(100% - 80px);font-size:32px;overflow:auto}
@media(max-width:820px){
#viewport .sui-menu{max-height:calc(100dvh - 140px);overflow-y:auto}
#viewport .sui-menu button{min-height:44px}
}