@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --S: 200px; --ink: #1a0b00; color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #05030a; }
body { font-family: Oswald, system-ui, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body::before { content: ""; position: fixed; inset: -40px; background: var(--bgimg) center / cover; filter: blur(30px) brightness(.45); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; -webkit-user-drag: none; }
i { font-style: normal; }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; display: grid; place-content: center; gap: 18px; text-align: center; z-index: 10; background: radial-gradient(circle, #1c1035, #05030a 70%); }
.boot b { font: 400 54px "Lilita One", sans-serif; color: #ffd23f; text-shadow: 0 4px 0 #8a3a00; }
.load { width: 320px; height: 10px; border-radius: 5px; background: #ffffff14; overflow: hidden; margin: 0 auto; }
.load i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a00, #ffd23f); transition: width .2s; }
.boot small { font: 500 14px Oswald; letter-spacing: .2em; color: #8a7fb0; }

/* ---------- stage (fixed design resolution, scaled to fit) ---------- */
.stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; overflow: hidden; background: #000; }
.stage[data-o="land"] { width: 1920px; height: 1080px; }
.stage[data-o="port"] { width: 1080px; height: 1920px; }
.stage.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 5px -3px; } 30%, 50%, 70% { translate: -8px 4px; } 40%, 60% { translate: 8px -2px; } }
.bg { position: absolute; inset: 0; background: var(--bgimg) center / cover; transition: filter 1s; }
.stage.mode-fs .bg { filter: hue-rotate(45deg) saturate(1.4) brightness(.7); }
.stage.mode-hs .bg { filter: sepia(.6) hue-rotate(-30deg) saturate(1.7) brightness(.55); }

/* logo with a shine sweep masked by its own artwork */
.logo { position: absolute; aspect-ratio: 600 / 280; background: var(--logo) center / contain no-repeat; animation: logoBob 4s ease-in-out infinite; transition: opacity .5s; }
.logo::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, #fff9 50%, transparent 60%) -200% 0 / 200% 100% no-repeat; animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 60% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes logoBob { 50% { transform: translateY(-6px) rotate(-.6deg); } }
[data-o="land"] .logo { left: 20px; top: 34px; width: 430px; }
[data-o="port"] .logo { left: 270px; top: 18px; width: 540px; }

/* ---------- jackpot plaques ---------- */
.jp { position: absolute; background: var(--plq) center / 100% 100% no-repeat; display: grid; place-items: end center; filter: drop-shadow(0 8px 10px #000a); }
.jp::after { content: ""; position: absolute; inset: 8px; border-radius: 40px; background: linear-gradient(105deg, transparent 40%, #ffffff55 50%, transparent 60%) -200% 0 / 200% 100% no-repeat; animation: shine 6s ease-in-out infinite; pointer-events: none; }
.jp.MAJOR::after { animation-delay: 1.5s; } .jp.MINOR::after { animation-delay: 3s; } .jp.MINI::after { animation-delay: 4.5s; }
.jp b { font: 400 50px/1 "Lilita One"; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(#fff 20%, #ffe9a8 60%, #ffc21a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1a00) drop-shadow(0 0 1px #3a1a00); }
.jp.GRAND { width: 520px; height: 120px; } .jp.GRAND b { font-size: 60px; padding-bottom: 16px; }
.jp:not(.GRAND) { width: 320px; height: 96px; } .jp:not(.GRAND) b { font-size: 42px; padding-bottom: 13px; }
[data-o="land"] .GRAND { left: 700px; top: 10px; }
[data-o="land"] .MAJOR { left: 470px; top: 134px; } [data-o="land"] .MINOR { left: 810px; top: 134px; } [data-o="land"] .MINI { left: 1150px; top: 134px; }
[data-o="port"] .GRAND { left: 280px; top: 250px; }
[data-o="port"] .MAJOR { left: 22px; top: 380px; } [data-o="port"] .MINOR { left: 380px; top: 380px; } [data-o="port"] .MINI { left: 738px; top: 380px; }
.jp.hit { animation: jphit .25s steps(2) 14; }
@keyframes jphit { 50% { filter: brightness(2) drop-shadow(0 0 30px #ffd23f); } }

/* ---------- characters ---------- */
.dino { position: absolute; aspect-ratio: 300 / 420; }
[data-o="land"] .dino { left: 16px; top: 330px; width: 420px; }
[data-o="port"] .dino { left: 0; top: 1236px; width: 380px; }
.dino .body, .dino .tail, .dino .arm { position: absolute; inset: 0; width: 100%; }
.dino .body { transform-origin: 50% 100%; animation: breathe 3s steps(24) infinite; }
.dino .tail { transform-origin: 42% 76%; animation: wag 1.8s steps(12) infinite alternate; }
.dino .arm { transform-origin: 71% 55%; animation: armIdle 3s steps(18) infinite; }
@keyframes wag { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }
@keyframes armIdle { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-25deg); } 88% { transform: rotate(-8deg); } 94% { transform: rotate(-22deg); } }
.dino .head { position: absolute; left: 21%; top: -3%; width: 72%; aspect-ratio: 1; transform-origin: 25% 92%; animation: headIdle 3s steps(24) infinite; }
.dino .head img { position: absolute; inset: 0; width: 100%; }
.dino .jaw { transform-origin: 30% 62%; animation: chomp 6s ease-in-out infinite; }
@keyframes chomp { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(14deg); } 94% { transform: rotate(2deg); } 96% { transform: rotate(10deg); } }
.dino .lid { position: absolute; left: 41%; top: 24%; width: 16.5%; height: 18.5%; border-radius: 50%; background: linear-gradient(#5fd040, #3a9a26); transform: scaleY(0); transform-origin: 50% 0; animation: blinkLid 4.2s infinite; }
@keyframes blinkLid { 0%, 94%, 100% { transform: scaleY(0); } 96.5% { transform: scaleY(1); } }
.dino.roar .jaw { animation: jawOpen 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jawOpen { 0% { transform: none; } 20% { transform: rotate(-4deg); } 35%, 80% { transform: rotate(28deg); } 45%, 55%, 65%, 75% { transform: rotate(24deg); } 100% { transform: none; } }
.dino.cheer .jaw { animation: jawOpen .6s 3; }
.dino.roar .tail, .dino.cheer .tail { animation: wag .3s steps(4) infinite alternate; }
.dino.cheer .arm { animation: wave .5s steps(5) infinite alternate; }
@keyframes wave { from { transform: rotate(-10deg); } to { transform: rotate(-60deg); } }
@keyframes breathe { 50% { transform: scale(1.012, 1.025); } }
@keyframes headIdle { 50% { transform: translateY(5px) rotate(2deg); } }
.dino.roar .head { animation: roarHead 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.dino.roar .body { animation: roarBody 1.1s ease-out; }
@keyframes roarHead { 0% { transform: none; } 18% { transform: rotate(10deg) translateY(10px); } 35%, 80% { transform: rotate(-16deg) scale(1.12) translateX(10px); } 40%, 50%, 60%, 70% { translate: 3px -2px; } 100% { transform: none; } }
@keyframes roarBody { 30%, 80% { transform: scale(1.03, .98); } }
.dino.cheer .head { animation: cheer .6s ease-in-out 3; }
@keyframes cheer { 50% { transform: translateY(-20px) rotate(-6deg); } }

.side { position: absolute; }
[data-o="land"] .side { left: 1536px; top: 300px; width: 370px; height: 560px; }
[data-o="port"] .side { left: 400px; top: 1236px; width: 670px; height: 440px; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .5s, transform .5s; }
.fsp, .hsp { opacity: 0; transform: scale(.8); pointer-events: none; }
.stage.mode-fs .heroes, .stage.mode-hs .heroes { opacity: 0; transform: scale(.8); }
.stage.mode-fs .fsp, .stage.mode-hs .hsp { opacity: 1; transform: none; }
.trio { display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1; }
.heroc { position: relative; width: 150px; margin: 0 -16px; filter: drop-shadow(0 10px 8px #0009); animation: pigBob 2.4s steps(16) infinite; transform-origin: 50% 100%; }
.heroc img { width: 100%; }
.heroc:nth-child(2) { width: 176px; animation-delay: -.8s; z-index: 1; } .heroc:nth-child(3) { animation-delay: -1.6s; }
[data-o="port"] .heroc { width: 190px; } [data-o="port"] .heroc:nth-child(2) { width: 220px; }
/* blinking eyelids drawn over each hero's eyes */
.heroc i { position: absolute; width: 11.5%; height: 11.5%; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; animation: blinkLid 3.6s infinite; }



.heroes.scared .heroc { animation: shiver .1s steps(2) infinite; }
.heroes.scared .heroc i { transform: scaleY(.45); animation: none; }
.heroes.scared .heroc::after { content: ""; position: absolute; right: 14%; top: 18%; width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: radial-gradient(circle at 35% 60%, #fff, #8ad8ff 60%); box-shadow: 0 0 0 2px #2a1222; animation: sweat .6s steps(4) infinite; }
@keyframes shiver { 50% { transform: translateX(-4px) rotate(-2deg); } }
@keyframes sweat { to { transform: translateY(18px); opacity: 0; } }
@keyframes pigBob { 50% { transform: translateY(-8px) scale(1.02, .98); } }
.heroc.jump { animation: pigJump .6s steps(8); }
@keyframes pigJump { 40% { transform: translateY(-50px) rotate(-8deg) scale(1.1); filter: drop-shadow(0 0 30px #ffd23f); } }
.shelf { width: 92%; height: 26px; margin-top: -14px; border-radius: 6px; background: linear-gradient(#d39150, #8a4e1e 60%, #5a2e0e); box-shadow: 0 12px 20px #000a, inset 0 2px 0 #f0b878; }
.caption { margin-top: 18px; padding: 10px 26px 12px; border-radius: 18px; background: linear-gradient(#4a1680ee, #24084aee); box-shadow: 0 0 0 4px #ffc933, 0 0 0 7px #3a1a00, 0 10px 20px #000a; }
.caption b { display: block; font: 400 44px/1 "Lilita One"; color: #ffe066; text-shadow: 0 3px 0 #a84a00, 0 5px 0 var(--ink); }
.caption span { font: 600 22px Oswald; letter-spacing: .12em; color: #fff; }
.counter { padding: 12px 34px 16px; border-radius: 22px; background: linear-gradient(#4a1680, #1c0640); box-shadow: 0 0 0 4px #ffc933, 0 0 0 7px #3a1a00, 0 0 40px #ffb30066; }
.counter span { display: block; font: 600 20px Oswald; letter-spacing: .2em; color: #ffc933; }
.counter b { display: inline-block; font: 400 76px/1 "Lilita One"; text-shadow: 0 4px 0 #a84a00, 0 7px 0 var(--ink); }
.counter b.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.3); } }
.levels { display: flex; gap: 10px; margin: 26px 0 12px; }
.levels div { position: relative; width: 104px; opacity: .35; filter: grayscale(1) brightness(.7); transition: .4s; }
.levels div.on { opacity: 1; filter: drop-shadow(0 0 16px #ffd23f); transform: scale(1.15); }
.levels div.up { animation: lvup .8s; }
@keyframes lvup { 30% { transform: scale(1.7) rotate(-10deg); filter: brightness(2.5) drop-shadow(0 0 30px #fff); } }
.levels img { width: 100%; }
.levels i { position: absolute; right: -4px; bottom: 0; font: 400 30px "Lilita One"; text-shadow: 0 3px 0 var(--ink), 0 0 4px var(--ink); }
.panel small { font: 500 18px/1.4 Oswald; color: #e8dcff; text-shadow: 0 2px 4px #000; max-width: 340px; margin-top: 16px; }
.lights { display: flex; gap: 16px; justify-content: center; padding: 10px 0 2px; }
.lights i { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #1a1a1a); box-shadow: inset 0 3px 6px #000, 0 0 0 3px #3a1a00; transition: .25s; }
.lights i.on { background: radial-gradient(circle at 35% 35%, #fff, #7cf06a 40%, #1f8a2a); box-shadow: 0 0 22px #7cf06a, 0 0 0 3px #3a1a00; }
.lights.reset i { animation: bump .5s; }

/* ---------- reel frame ---------- */
.frame { position: absolute; }
[data-o="land"] .frame { left: 400px; top: 240px; width: 1120px; height: 690px; --ix: 50px; --iy: 45px; }
[data-o="port"] .frame { left: 0; top: 488px; width: 1080px; height: 680px; --ix: 30px; --iy: 40px; }
.frame-img { position: absolute; inset: 0; background: var(--frame) center / 100% 100% no-repeat; pointer-events: none; z-index: 6; filter: drop-shadow(0 18px 30px #000c); }
.reels, .hsgrid { position: absolute; left: var(--ix); top: var(--iy); width: 1020px; height: 600px; }
.reels { display: flex; gap: 5px; background: linear-gradient(90deg, #6a4200, #ffd447 50%, #6a4200); }
.reel { position: relative; width: var(--S); height: 100%; overflow: hidden; background: radial-gradient(130% 70% at 50% 50%, #24386e, #101b3e 70%, #070d22); }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(#000a, transparent 14%, transparent 86%, #000a); }
.strip { position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; }
.reel.antic { z-index: 2; }
.reel.antic::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 6px solid transparent; border-radius: 4px;
  background: conic-gradient(from var(--a), #fff6a0, #ff7a00, #fff, #ff3d7f, #fff6a0) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinA .8s linear infinite; filter: drop-shadow(0 0 12px #ffb300); }
.reel.antic .strip { filter: brightness(1.25); }
.frame.anticipate .reel:not(.antic) { filter: brightness(.55); transition: filter .3s; }
@keyframes spinA { to { --a: 360deg; } }

.sym { position: relative; width: var(--S); height: var(--S); }
.sym img { width: 100%; height: 100%; }
.sym.land img { animation: land .35s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 50% 90%; }
@keyframes land { 0% { transform: scale(1.12, .8); } 40% { transform: scale(.94, 1.08); } 70% { transform: scale(1.03, .97); } }
.val { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; z-index: 2; font: 400 40px/1 "Lilita One"; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #3a1a00, 2px 0 0 #3a1a00, -2px 0 0 #3a1a00, 0 -2px 0 #3a1a00, 2px 2px 0 #3a1a00, -2px 2px 0 #3a1a00, 0 6px 6px #000a; transition: opacity .2s; }
.val.jpv { font-size: 34px; } .val.MINI { color: #b8ff9f; } .val.MINOR { color: #9fdcff; } .val.MAJOR { color: #ffb0dc; }

/* win presentation */
.reels.dim .sym:not(.win) { filter: brightness(.35) saturate(.6); transition: filter .25s; }
.sym.win { z-index: 3; }
.sym.win::before { content: ""; position: absolute; inset: 3px; z-index: 3; border: 5px solid transparent; border-radius: 16px; pointer-events: none;
  background: conic-gradient(from var(--a), var(--wc, #ffd23f), #fff, var(--wc, #ffd23f), #ffffff88, var(--wc, #ffd23f)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinA 1.4s linear infinite; filter: drop-shadow(0 0 10px var(--wc, #ffb300)); }
.sym.win img { animation: winPop .9s steps(9) infinite; filter: drop-shadow(0 0 14px #ffd86a); }
@keyframes winPop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } 55% { transform: scale(1.04); } }
.sym.win.s-teddy img { animation: squish .8s steps(8) infinite; transform-origin: 50% 95%; }
@keyframes squish { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.14, .88); } 50% { transform: scale(.94, 1.12) translateY(-8px); } }
.sym.win.s-robot img { animation: rattle .5s linear infinite; }
@keyframes rattle { 0%, 100% { transform: scale(1.08) rotate(0); } 25% { transform: scale(1.1) rotate(-4deg) translateY(-3px); } 75% { transform: scale(1.1) rotate(4deg) translateY(-3px); } }
.sym.win.s-rocket img { animation: lift 1s steps(10) infinite; }
@keyframes lift { 0%, 100% { transform: none; } 50% { transform: translate(8px, -14px) scale(1.12); } }
.sym.win.s-train img { animation: march .6s steps(2) infinite; }
@keyframes march { 50% { transform: scale(1.1) translateY(-6px) rotate(3deg); } }
.sym.win.hero img, .sym.glow.hero img { animation: wiggle .7s steps(7) infinite; transform-origin: 50% 90%; }
@keyframes wiggle { 0%, 100% { transform: scale(1.06) rotate(0); } 25% { transform: scale(1.14) rotate(-7deg); } 75% { transform: scale(1.14) rotate(7deg); } }
.sym.win.s-dino img, .sym.win.s-dino5 img, .sym.roar img { animation: roarSym .12s linear infinite; transform-origin: 50% 80%; filter: drop-shadow(0 0 18px #9bff6a); }
@keyframes roarSym { 0%, 100% { transform: scale(1.15) rotate(-3deg); } 50% { transform: scale(1.2) rotate(3deg); } }
.sym.glow img { animation: winPop .7s steps(7) infinite; filter: drop-shadow(0 0 18px #ffe066) brightness(1.15); }
.sym.blown img { animation: blown .55s ease-out forwards; }
.sym.blown .val { opacity: 0; }
@keyframes blown { 25% { transform: rotate(-14deg) translateX(-12px) scale(1.06); } 100% { transform: rotate(5deg) scale(.9); filter: brightness(.55) saturate(.6); } }
.bubble { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 8; white-space: nowrap; padding: 4px 16px 6px; border-radius: 16px;
  background: linear-gradient(#8cff6a, #1f9a2a); box-shadow: 0 0 0 3px #0e4a12, 0 5px 0 #0e4a12, 0 0 20px #7cf06a; font: 400 32px "Lilita One"; text-shadow: 0 2px 0 #0e4a12; }
.bubble.bump { animation: bubbleBump .2s; }
@keyframes bubbleBump { 50% { transform: translateX(-50%) scale(1.3); } }
.shock { position: absolute; z-index: 9; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none;
  border: 10px solid #d8ffb0; box-shadow: 0 0 30px #9bff6a, inset 0 0 30px #9bff6a; animation: shock .8s ease-out forwards; }
@keyframes shock { to { transform: scale(40); opacity: 0; border-width: 1px; } }

.winamt { position: absolute; left: 50%; top: 50%; z-index: 7; pointer-events: none; opacity: 0; white-space: nowrap;
  transform: translate(-50%, -50%) scale(.5); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  font: 400 120px/1 "Lilita One"; font-variant-numeric: tabular-nums;
  background: linear-gradient(#fffbe0 15%, #ffd23f 50%, #ff8a00 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #4a1a00; filter: drop-shadow(0 6px 0 #6a2200) drop-shadow(0 0 30px #000) drop-shadow(0 0 20px #ffb300); }
.winamt.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Hold & Spin */
.hsgrid { display: none; grid-template-columns: repeat(5, var(--S)); grid-template-rows: repeat(3, var(--S)); grid-auto-flow: column; gap: 0 5px; z-index: 5; background: linear-gradient(90deg, #6a4200, #ffd447 50%, #6a4200); }
.frame.hs .hsgrid { display: grid; }
.frame.hs .reels { visibility: hidden; }
.hc { position: relative; overflow: hidden; background: radial-gradient(circle, #3a2068, #120830); box-shadow: inset 0 0 0 2px #00000060, inset 0 0 30px #000; }
.hc .roller { position: absolute; left: 0; right: 0; top: 0; display: none; }
.hc.roll .roller { display: block; animation: roller .32s linear infinite; }
.hc .roller img { width: var(--S); height: var(--S); opacity: .7; }
@keyframes roller { from { transform: translateY(-400px); } to { transform: translateY(0); } }
.hc .sym { position: absolute; inset: 0; animation: hsLand .5s cubic-bezier(.3, 1.6, .5, 1); }
.hc.lock { background: radial-gradient(circle, #ffe29a, #c27a00 75%, #6a3a00); }
.hc.lock::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff, transparent 60%); opacity: 0; animation: flash .5s ease-out; pointer-events: none; }
.hc.count { animation: count .35s; z-index: 2; }
@keyframes hsLand { 0% { transform: translateY(-100%) scale(.8); } }
@keyframes flash { 0% { opacity: 1; } }
@keyframes count { 50% { transform: scale(1.14); filter: brightness(1.8); } }

.msg { position: absolute; display: flex; align-items: center; justify-content: center; font: 600 28px Oswald; letter-spacing: .14em; color: #fff3c4; text-shadow: 0 2px 0 #000, 0 0 16px #ffb30099; white-space: nowrap; }
[data-o="land"] .msg { left: 400px; width: 1120px; top: 928px; height: 50px; }
[data-o="port"] .msg { left: 0; width: 1080px; top: 1170px; height: 60px; }
.msg button { margin-left: 14px; padding: 4px 20px; border-radius: 10px; background: linear-gradient(#8cff6a, #1f9a2a); box-shadow: 0 0 0 2px #0e4a12, 0 4px 0 #0e4a12; font: 600 22px Oswald; letter-spacing: .1em; }

/* ---------- game bar ---------- */
.bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; background: linear-gradient(#0d0a1ce6, #020107); border-top: 2px solid #ffc93366; box-shadow: 0 -10px 30px #000a; }
[data-o="land"] .bar { height: 100px; padding: 0 240px 0 30px; gap: 24px; }
[data-o="port"] .bar { height: 300px; display: grid; grid-template: "credit bet win" 1.1fr "tools . au" 1fr / 1fr 1fr 1fr; align-items: center; justify-items: center; padding: 10px 24px 16px; }
.meter { text-align: center; min-width: 220px; }
.meter span { display: block; font: 600 16px Oswald; letter-spacing: .3em; color: #ffc933; }
.meter b { font: 700 40px/1.1 Oswald; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.meter.win b { color: #8cff6a; text-shadow: 0 0 14px #7cf06a88; }
[data-o="land"] .credit { margin-left: auto; }
.betbox { display: flex; align-items: center; gap: 10px; }
.betbox .meter { min-width: 150px; }
.rb { width: 54px; height: 54px; border-radius: 50%; font: 700 34px/1 Oswald; background: radial-gradient(circle at 50% 30%, #4a4466, #1c1830); box-shadow: inset 0 2px 0 #ffffff30, 0 0 0 2px #ffc93388, 0 4px 0 #000; }
.rb:active { transform: translateY(3px); }
.rb:disabled, .ic:disabled, .auto:disabled { opacity: .3; cursor: default; }
.tools { display: flex; gap: 14px; }
.ic { width: 54px; height: 54px; padding: 12px; border-radius: 14px; color: #d8d0f0; background: #ffffff10; box-shadow: inset 0 0 0 2px #ffffff18; }
.ic svg { width: 100%; height: 100%; }
.ic[aria-pressed="true"] { color: #ffd23f; box-shadow: inset 0 0 0 2px #ffd23f88, 0 0 14px #ffb30055; }
#soundBtn[aria-pressed="false"] .wave { opacity: 0; }
.auto { height: 54px; padding: 0 22px; border-radius: 27px; font: 700 20px Oswald; letter-spacing: .14em; background: #ffffff10; box-shadow: inset 0 0 0 2px #ffffff30; }
.auto[aria-pressed="true"] { background: linear-gradient(#8cff6a, #1f9a2a); box-shadow: 0 0 20px #7cf06a; color: #062a08; }
[data-o="port"] .credit { grid-area: credit; min-width: 0; } [data-o="port"] .betbox { grid-area: bet; } [data-o="port"] .win { grid-area: win; min-width: 0; }
[data-o="port"] .tools { grid-area: tools; } [data-o="port"] .auto { grid-area: au; }

.spin { position: absolute; z-index: 20; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #9bff7a, #2bbf3a 45%, #0b6a1a 80%);
  box-shadow: 0 0 0 8px #0a0a12, 0 0 0 14px #ffd23f, 0 0 0 18px #6a4200, 0 12px 24px 14px #000c, 0 0 50px 20px #5aff5a44, inset 0 -14px 24px #064a10, inset 0 8px 10px #ffffff70;
  transition: transform .08s, filter .2s; }
.spin svg { width: 62%; margin: auto; display: block; filter: drop-shadow(0 3px 0 #0b5a14); }
.spin:active, .spin.down { transform: scale(.94); }
.spin.busy svg { animation: spinIcon .7s linear infinite; }
.spin.busy { filter: saturate(.6) brightness(.9); }
@keyframes spinIcon { to { transform: rotate(360deg); } }
[data-o="land"] .spin { right: 40px; bottom: 14px; }
[data-o="port"] .spin { left: 465px; bottom: 12px; width: 150px; height: 150px; }

/* ---------- overlays ---------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.fly { position: absolute; left: 0; top: 0; z-index: 31; pointer-events: none; white-space: nowrap; font: 400 44px/1 "Lilita One"; color: #fff;
  text-shadow: 0 3px 0 #3a1a00, 2px 0 0 #3a1a00, -2px 0 0 #3a1a00, 0 -2px 0 #3a1a00, 0 0 20px #ffd23f; }
.ovl { position: absolute; inset: 0; z-index: 40; display: none; place-items: center; background: radial-gradient(circle, #0009, #000d); cursor: pointer; }
.ovl.on { display: grid; animation: fade .3s; }
.ovl.flash::before { content: ""; position: absolute; inset: 0; background: #fff; animation: fadeOut .6s forwards; pointer-events: none; }
@keyframes fade { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
.rays { position: absolute; left: 50%; top: 50%; width: 2400px; height: 2400px; margin: -1200px; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, #ffd23f33 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); mask: radial-gradient(circle, #000 10%, transparent 55%);
  animation: rays 14s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.card { position: relative; width: 820px; padding: 60px 50px 42px; text-align: center; border-radius: 40px;
  background: radial-gradient(circle at 50% 0, #5a2ab8, #1c0a4c 70%); box-shadow: 0 0 0 7px #ffc933, 0 0 0 13px #3a1a00, 0 0 90px #ffb300aa; animation: cardIn .6s cubic-bezier(.3, 1.5, .5, 1); }
[data-o="port"] .card { width: 900px; }
@keyframes cardIn { from { transform: scale(.2) rotate(-8deg); opacity: 0; } }
.card .art { width: 300px; margin: -210px auto 0; filter: drop-shadow(0 16px 20px #000c); animation: pigBob 1.6s ease-in-out infinite; }
.card h2 { font: 400 84px/1 "Lilita One"; background: linear-gradient(#fffbe0 15%, #ffd23f 50%, #ff8a00 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px #4a1a00; filter: drop-shadow(0 5px 0 #6a2200); }
.card p { margin-top: 16px; font: 500 30px/1.35 Oswald; color: #ece2ff; }
.card .amt { margin-top: 14px; font: 400 120px/1 "Lilita One"; color: #fff; text-shadow: 0 6px 0 #1f8a1a, 0 10px 0 var(--ink), 0 0 40px #7cf06a; font-variant-numeric: tabular-nums; }
.card small { display: block; margin-top: 24px; font: 500 20px Oswald; letter-spacing: .3em; color: #b8a8e8; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.big { position: relative; text-align: center; }
.big h2 { font: 400 190px/.9 "Lilita One"; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(#fffbe0 15%, #ffd23f 50%, #ff7a00 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 4px #4a1a00; filter: drop-shadow(0 8px 0 #7a2a00) drop-shadow(0 0 40px #ffb300); animation: bigIn .7s cubic-bezier(.3, 1.6, .5, 1), wobble 1.4s ease-in-out .7s infinite; }
[data-o="port"] .big h2 { font-size: 150px; }
.big.mega h2 { background-image: linear-gradient(#ffe6f6 15%, #ff6ac1 50%, #b4148a 85%); }
.big.epic h2 { background-image: linear-gradient(#e6fbff 15%, #4fd8ff 50%, #3a3ae0 85%); }
.big .amt { margin-top: 30px; font: 400 150px/1 "Lilita One"; color: #fff; text-shadow: 0 7px 0 #1f8a1a, 0 12px 0 var(--ink), 0 0 50px #7cf06a; font-variant-numeric: tabular-nums; }
@keyframes bigIn { from { transform: scale(3); opacity: 0; } }
@keyframes wobble { 50% { transform: scale(1.06) rotate(-2deg); } }

.info { position: absolute; inset: 0; z-index: 45; overflow-y: auto; padding: 50px 80px 60px; background: #0a0620f4; }
.info h2 { font: 400 64px "Lilita One"; color: #ffe066; text-align: center; }
.info h3 { margin: 34px 0 12px; font: 400 40px "Lilita One"; color: #ffc933; }
.close { position: sticky; top: 0; float: right; width: 70px; height: 70px; border-radius: 50%; background: #e5333f; box-shadow: 0 0 0 4px #3a0008, 0 5px 0 #3a0008; font-size: 32px; z-index: 2; }
.pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
[data-o="port"] .pays { grid-template-columns: repeat(2, 1fr); }
.pay { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; background: #ffffff0c; }
.pay img { width: 120px; flex: none; }
.pay div { font: 500 26px/1.35 Oswald; }
.pay em { font-style: normal; color: #ffc933; display: inline-block; width: 34px; }
.rule { display: flex; gap: 24px; align-items: center; margin-top: 10px; }
.rule img { width: 150px; flex: none; }
.rule p, .legal { font: 400 26px/1.45 Oswald; color: #ddd3f5; }
.legal { margin-top: 40px; font-size: 20px; color: #9b8fc4; }
.info b { color: #fff; }

@media (prefers-reduced-motion: reduce) { .logo, .dino *, .trio img, .rays, .jp::after { animation: none !important; } }

/* ---------- v3 additions ---------- */
.sym.smash img { animation: smash .28s ease-in forwards; }
.sym.smash .val { opacity: 0; }
@keyframes smash { 30% { transform: scale(1.18) rotate(-6deg); filter: brightness(2); } 100% { transform: scale(.2) rotate(20deg); opacity: 0; } }
.sym.morph img { animation: morph .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes morph { 0% { transform: scale(.2) rotate(-25deg); filter: brightness(3) drop-shadow(0 0 30px #fff); opacity: 0; } 60% { filter: brightness(1.6) drop-shadow(0 0 20px #ffe066); } }

.iris { position: absolute; left: 50%; top: 50%; z-index: 60; border-radius: 50%; translate: -50% -50%; pointer-events: none;
  box-shadow: 0 0 0 4000px #05030a, inset 0 0 0 10px #ffd23f, 0 0 40px 10px #ffb300; }

.stage.attract .frame-img { animation: attractGlow 1.2s ease-in-out infinite alternate; }
@keyframes attractGlow { to { filter: drop-shadow(0 0 30px #ffd23f) drop-shadow(0 18px 30px #000c) brightness(1.15); } }
.stage.attract .spin { animation: spinCall .9s ease-in-out infinite; }
@keyframes spinCall { 50% { transform: scale(1.08); filter: brightness(1.25); } }
.blink { animation: blink 1s steps(2) infinite; }

/* Toy Wheel */
.wheelbox { position: relative; text-align: center; }
.wtitle { font: 400 90px/1 "Lilita One"; margin-bottom: 18px; background: linear-gradient(#fffbe0 15%, #ffd23f 50%, #ff8a00 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #4a1a00; filter: drop-shadow(0 6px 0 #6a2200); }
.wheel { position: relative; width: 660px; height: 660px; margin: 0 auto; }
[data-o="land"] .wheel { width: 580px; height: 580px; }
[data-o="land"] .wtitle { font-size: 76px; margin-bottom: 30px; }
.wrot { position: absolute; inset: 0; }
.wrot img { width: 100%; filter: drop-shadow(0 20px 30px #000c); }
.wl { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--r)); }
.wl span { position: absolute; left: 0; top: var(--lr, -205px); transform: translate(-50%, -50%); white-space: nowrap; display: block;
  font: 400 40px/1 "Lilita One"; color: #fff; text-shadow: 0 3px 0 #3a1a00, 2px 0 0 #3a1a00, -2px 0 0 #3a1a00, 0 -2px 0 #3a1a00, 0 0 10px #000; }
[data-o="land"] .wl { --lr: -192px; }
.wl.jpl span { font-size: 34px; color: #ffe066; }
.wl.won span { animation: wonLabel .4s ease-in-out infinite alternate; }
@keyframes wonLabel { to { color: #fff; transform: translate(-50%, -50%) scale(1.35); filter: drop-shadow(0 0 16px #fff); } }
.pointer { position: absolute; left: 50%; top: -34px; width: 90px; translate: -50% 0; transform-origin: 50% 20%; z-index: 2; filter: drop-shadow(0 8px 8px #000a); }
.pointer.flick { animation: flick .12s ease-out; }
@keyframes flick { 50% { transform: rotate(-14deg); } }
.wheelbox small { display: block; margin-top: 18px; font: 500 22px Oswald; letter-spacing: .3em; color: #e8dcff; animation: blink 1.2s steps(2) infinite; }

/* History & stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0; }
[data-o="port"] .stats { grid-template-columns: repeat(2, 1fr); }
.stats div { padding: 14px 18px; border-radius: 16px; background: #ffffff0c; box-shadow: inset 0 0 0 2px #ffc93333; }
.stats span { display: block; font: 600 18px Oswald; letter-spacing: .15em; color: #ffc933; text-transform: uppercase; }
.stats b { font: 700 38px/1.2 Oswald; font-variant-numeric: tabular-nums; }
.hlist table { width: 100%; border-collapse: collapse; font: 500 24px Oswald; font-variant-numeric: tabular-nums; }
.hlist th { text-align: left; color: #ffc933; font-weight: 600; letter-spacing: .1em; padding: 8px 12px; border-bottom: 2px solid #ffc93355; }
.hlist td { padding: 8px 12px; border-bottom: 1px solid #ffffff12; color: #ddd3f5; }
.hlist tr.up td { color: #9bff7a; }
.reset { padding: 10px 22px; border-radius: 12px; background: #ffffff12; box-shadow: inset 0 0 0 2px #ffffff30; font: 600 18px Oswald; letter-spacing: .1em; color: #ddd3f5; }
.tools { flex-wrap: wrap; }
[data-o="land"] .tools { gap: 10px; } [data-o="land"] .ic { width: 50px; height: 50px; padding: 11px; }
[data-o="port"] .tools { gap: 8px; max-width: 330px; } [data-o="port"] .ic { width: 48px; height: 48px; padding: 10px; }

/* ---------- v4: paylines, ambience, progression, gamble ---------- */
.ltabs { position: absolute; top: var(--iy); height: 600px; z-index: 8; display: flex; flex-direction: column; }
[data-o="land"] .ltabs { width: 34px; } [data-o="land"] .ltabs.L { left: 12px; } [data-o="land"] .ltabs.R { right: 12px; }
[data-o="port"] .ltabs { width: 17px; } [data-o="port"] .ltabs.L { left: 11px; } [data-o="port"] .ltabs.R { right: 11px; }
.ltabs > div { height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.ltab { display: grid; place-items: center; height: 21px; border-radius: 5px; font: 700 14px/1 Oswald; color: #1a0b00; cursor: pointer;
  background: linear-gradient(color-mix(in srgb, var(--lc) 60%, #fff), var(--lc)); box-shadow: inset 0 -2px 0 #0004, 0 1px 2px #000a; opacity: .55; transition: opacity .2s, transform .2s, box-shadow .2s; }
[data-o="port"] .ltab { font-size: 10px; height: 20px; border-radius: 3px; }
.ltab:hover { opacity: 1; }
.ltab.on { opacity: 1; transform: scale(1.25); box-shadow: 0 0 12px var(--lc), 0 0 0 2px #fff; z-index: 2; }
.lines { position: absolute; left: var(--ix); top: var(--iy); width: 1020px; height: 600px; overflow: visible; z-index: 7; pointer-events: none; }
.lines path { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1600; animation: drawLine .45s ease-out both; }
.lines .lglow { stroke-width: 22; opacity: .45; filter: blur(6px); }
.lines .lcore { stroke-width: 8; }
.lines .lhot { stroke: #fff; stroke-width: 2.5; opacity: .85; }
@keyframes drawLine { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.reels::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, #ffffff14 0%, #ffffff06 30%, transparent 31%, transparent 64%, #ffffff0a 65%, transparent 75%); }

/* ambience */
.twinkles { position: absolute; inset: 0; pointer-events: none; }
.twinkles i { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(circle, #fff 0 5%, var(--c) 12%, transparent 60%); mix-blend-mode: screen; animation: twinkle 2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: .9; transform: scale(1.1); } }
.godrays { position: absolute; left: 50%; top: 40%; width: 2200px; height: 2200px; margin: -1100px; pointer-events: none; mix-blend-mode: screen; opacity: .22;
  background: repeating-conic-gradient(from 0deg, #ffd89066 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 5%, transparent 50%); mask: radial-gradient(circle, #000 5%, transparent 50%);
  animation: rays 60s linear infinite; }
.stage.mode-fs .godrays { opacity: .35; filter: hue-rotate(180deg); } .stage.mode-hs .godrays { opacity: .4; }
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff6d0, #ffd27a00 70%); scale: var(--s); animation: mote 12s linear infinite; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 50% { transform: translate(40px, -120px); } 85% { opacity: .7; } 100% { transform: translate(-20px, -260px); opacity: 0; } }

/* level / xp */
.xp { display: flex; align-items: center; gap: 10px; }
.xp b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 400 26px "Lilita One";
  background: radial-gradient(circle at 40% 30%, #9fd8ff, #2a64d0 60%, #0f2a6e); box-shadow: 0 0 0 3px #ffd23f, 0 0 16px #4fb6ff88; text-shadow: 0 2px 0 #0b1f55; }
.xp i { display: block; width: 120px; height: 12px; border-radius: 6px; background: #ffffff18; overflow: hidden; box-shadow: inset 0 1px 3px #000; }
.xp u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4fb6ff, #9bff7a); transition: width .6s; }
[data-o="port"] .xp { position: absolute; left: 24px; top: -70px; }
[data-o="port"] .xp i { width: 90px; }
.rb.max { width: auto; padding: 0 14px; border-radius: 27px; font: 700 18px Oswald; letter-spacing: .1em; color: #ffd23f; }
[data-o="port"] .rb.max { display: none; }

/* toasts */
.toasts { position: absolute; left: 50%; top: 24px; translate: -50% 0; z-index: 70; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 14px; padding: 10px 26px 10px 12px; border-radius: 40px; background: linear-gradient(#4a1a90f2, #1c0848f2);
  box-shadow: 0 0 0 3px #ffd23f, 0 10px 30px #000c; animation: toastIn .5s cubic-bezier(.3, 1.6, .5, 1); }
.toast.out { animation: toastOut .5s forwards; }
.toast img { width: 64px; }
.toast b { display: block; font: 400 30px/1.1 "Lilita One"; color: #ffe066; }
.toast span { font: 600 20px Oswald; color: #9bff7a; letter-spacing: .05em; }
@keyframes toastIn { from { transform: translateY(-120px) scale(.6); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-120px); opacity: 0; } }

/* daily gift */
.gift { position: relative; text-align: center; }
.gift h2, .gamble h2 { font: 400 96px/1 "Lilita One"; background: linear-gradient(#fffbe0 15%, #ffd23f 50%, #ff8a00 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #4a1a00; filter: drop-shadow(0 6px 0 #6a2200); }
.gift p, .gamble p { margin: 10px 0 30px; font: 500 30px Oswald; color: #ece2ff; }
.gamble p b { color: #ffe066; }
.gifts { display: flex; gap: 40px; justify-content: center; }
.gbox { position: relative; width: 240px; animation: pigBob 1.6s ease-in-out infinite; }
.gbox:nth-child(2) { animation-delay: -.5s; } .gbox:nth-child(3) { animation-delay: -1s; }
.gbox img { width: 100%; filter: drop-shadow(0 16px 20px #000c); transition: transform .2s; }
.gbox:hover img { transform: scale(1.08) rotate(-3deg); }
.gbox i { position: absolute; left: 0; right: 0; bottom: 30px; font: 400 44px "Lilita One"; color: #fff; text-shadow: 0 3px 0 #3a1a00, 0 0 12px #000; }
.gbox.won img { animation: morph .6s cubic-bezier(.3, 1.8, .5, 1); filter: drop-shadow(0 0 40px #ffe066); }
.gbox.other { opacity: .45; filter: grayscale(.7); }
[data-o="port"] .gbox { width: 260px; } [data-o="port"] .gifts { gap: 14px; }

/* gamble */
.gamble { text-align: center; }
.pcard { width: 260px; height: 370px; margin: 0 auto; perspective: 1200px; }
.pin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.pcard.flip .pin { transform: rotateY(180deg); }
.pcard:not(.flip) .pin { animation: cardHover 1.2s ease-in-out infinite alternate; }
@keyframes cardHover { to { transform: translateY(-10px) rotateZ(-2deg); } }
.cback, .cface { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; box-shadow: 0 20px 40px #000c, 0 0 0 6px #fff; }
.cback { background: repeating-linear-gradient(45deg, #c4142a 0 14px, #9a0e20 14px 28px); outline: 10px solid #fff; outline-offset: -26px; }
.cface { transform: rotateY(180deg); background: #fffaf0; display: grid; place-items: center; font: 400 200px/1 serif; }
.cface.red, .past .red { color: #d8102a; } .cface.black, .past .black { color: #1a1220; }
.past { display: flex; gap: 10px; justify-content: center; min-height: 56px; margin: 18px 0; }
.past i { display: grid; place-items: center; width: 40px; height: 56px; border-radius: 6px; background: #fffaf0; font: 28px serif; }
.gbtns { display: flex; gap: 24px; justify-content: center; }
.gbtns button { min-width: 210px; height: 90px; border-radius: 45px; font: 400 40px "Lilita One"; color: #fff; box-shadow: 0 0 0 4px #fff3c4, 0 8px 0 #0008; text-shadow: 0 3px 0 #0006; }
.gbtns .red { background: linear-gradient(#ff5a6a, #b80e22); } .gbtns .black { background: linear-gradient(#4a4460, #120e1c); } .gbtns .take { background: linear-gradient(#9bff7a, #1f9a2a); color: #062a08; text-shadow: none; }
[data-o="port"] .gbtns button { min-width: 0; padding: 0 26px; }
.gbtns button:active { transform: translateY(4px); }

/* info: payline diagrams, achievements */
.lgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.lmini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #ffffff0a; }
.lmini b { font: 400 30px "Lilita One"; color: var(--lc); width: 40px; text-align: center; }
.lmini i { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; flex: 1; }
.lmini span { aspect-ratio: 1; border-radius: 3px; background: #ffffff18; }
.lmini span.on { background: var(--lc); box-shadow: 0 0 8px var(--lc); }
[data-o="port"] .lgrid { grid-template-columns: repeat(3, 1fr); }
.achs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.achs div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: #ffffff0a; opacity: .45; }
.achs div.ok { opacity: 1; box-shadow: inset 0 0 0 2px #ffd23f88; }
.achs b { font: 400 26px "Lilita One"; color: #ffe066; } .achs span { font: 500 20px Oswald; color: #ddd3f5; } .achs em { font: 700 20px Oswald; font-style: normal; color: #9bff7a; white-space: nowrap; }

/* big win: heroes dance */
.heroes.dance .heroc { animation: pigDance .45s steps(4) infinite alternate; }
.heroes.dance .heroc:nth-child(2) { animation-delay: -.22s; }
@keyframes pigDance { from { transform: translateY(0) rotate(-10deg); } to { transform: translateY(-40px) rotate(10deg) scale(1.08); } }

/* ---------- v5: clay & ink, characters, line betting ---------- */
.card, .caption, .counter, .toast, .speech, .automenu { filter: url(#wobble); }
.speech { position: absolute; z-index: 35; translate: -50% -100%; padding: 10px 22px 12px; border-radius: 26px; white-space: nowrap; pointer-events: none;
  background: #fffdf4; color: #2a1222; font: 400 34px/1 Chewy, "Lilita One", cursive; letter-spacing: .02em;
  box-shadow: 0 0 0 4px #2a1222, 6px 8px 0 #0006; animation: speechIn .35s steps(5); }
.speech::after { content: ""; position: absolute; left: 50%; bottom: -16px; margin-left: -10px; border: 12px solid transparent; border-top: 16px solid #fffdf4; filter: drop-shadow(0 4px 0 #2a1222); }
.speech.pink { background: #ffe1ee; } .speech.pink::after { border-top-color: #ffe1ee; }
.speech.green { background: #e6ffd6; } .speech.green::after { border-top-color: #e6ffd6; }
.speech.out { animation: speechOut .35s steps(4) forwards; }
@keyframes speechIn { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); } }
@keyframes speechOut { to { transform: scale(.4) translateY(20px); opacity: 0; } }

/* line betting */
.ltab.off { opacity: .15; filter: grayscale(1); }
.betbox .meter { min-width: 120px; }
.meter.total { position: relative; min-width: 170px; }
.meter.total b { color: #ffe066; }
.meter.total .max { position: absolute; right: -66px; top: 50%; translate: 0 -50%; height: 44px; }
[data-o="land"] .bar { gap: 14px; padding: 0 230px 0 24px; }
[data-o="land"] .meter { min-width: 150px; } [data-o="land"] .meter b { font-size: 34px; }
[data-o="land"] .meter.total { margin-right: 70px; }
[data-o="land"] .xp { position: absolute; left: 36px; top: -770px; }
[data-o="port"] .bar { height: 380px; grid-template: "credit total win" 1fr "lines . lbet" 1fr "tools . au" 1fr / 1fr 1fr 1fr; }
[data-o="port"] .lnbox { grid-area: lines; } [data-o="port"] .lbbox { grid-area: lbet; } [data-o="port"] .total { grid-area: total; }
[data-o="port"] .meter.total .max { display: none; }
[data-o="port"] .spin { bottom: 40px; }
[data-o="port"] .xp { top: -70px; }

/* autoplay menu */
.automenu { position: absolute; right: 230px; bottom: 110px; z-index: 25; padding: 18px 22px; border-radius: 22px; background: #1c0848f4; box-shadow: 0 0 0 4px #ffd23f, 0 20px 40px #000c; text-align: center; }
[data-o="port"] .automenu { right: 24px; bottom: 120px; }
.automenu b { display: block; font: 400 34px "Lilita One"; color: #ffe066; margin-bottom: 12px; }
.automenu .ac { display: flex; gap: 10px; margin-bottom: 14px; }
.automenu .ac button { width: 72px; height: 60px; border-radius: 16px; font: 400 30px "Lilita One"; background: linear-gradient(#8cff6a, #1f9a2a); color: #062a08; box-shadow: 0 5px 0 #0e4a12; }
.automenu label { display: flex; gap: 10px; align-items: center; font: 500 20px Oswald; color: #e8dcff; margin-top: 6px; }
.automenu input { width: 22px; height: 22px; accent-color: #7cf06a; }

/* ---------- v6: build bank, missions, album, game feel ---------- */
.build { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 18px 8px 8px; border-radius: 20px; background: #1c0848dd; box-shadow: 0 0 0 3px #ff9ad0, 0 8px 18px #000a; filter: url(#wobble); }
.build img { width: 84px; transform-origin: 50% 90%; }
.build img.gulp { animation: gulp .35s steps(4); }
@keyframes gulp { 40% { transform: scale(1.25, .85); } 70% { transform: scale(.92, 1.1); } }
.build span { display: block; font: 600 15px Oswald; letter-spacing: .14em; color: #ff9ad0; }
.build i { display: block; width: 190px; height: 16px; margin: 4px 0; border-radius: 8px; background: #ffffff18; overflow: hidden; box-shadow: inset 0 2px 4px #000; }
.build u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6ac1, #ffd23f); transition: width .5s steps(6); box-shadow: 0 0 10px #ff6ac1; }
.build b { font: 400 24px "Lilita One"; color: #fff; }
.build.shake img { animation: shiver .08s steps(2) infinite; filter: drop-shadow(0 0 20px #ff6ac1); }
.build.broken img { animation: smash .4s forwards; }
[data-o="port"] .build { margin-top: 10px; }

.stage.spinning .dino .head { animation: watch .5s steps(4) forwards; }
@keyframes watch { to { transform: rotate(5deg) translate(6px, 4px); } }
.stage.spinning .heroc img { transform: translateY(-4px) rotate(-3deg); transition: transform .2s steps(3); }
.stage.hitstop *, .stage.hitstop *::before, .stage.hitstop *::after { animation-play-state: paused !important; }
.stage.super .bg { filter: hue-rotate(-40deg) saturate(1.6) brightness(.8); }

.floattxt { position: absolute; z-index: 32; pointer-events: none; translate: -50% -50%; font: 400 46px "Lilita One"; color: #fff;
  text-shadow: 0 3px 0 #2a1222, 2px 0 0 #2a1222, -2px 0 0 #2a1222, 0 -2px 0 #2a1222, 0 0 18px var(--c); animation: floatUp 1.4s steps(14) forwards; }
@keyframes floatUp { 0% { transform: scale(.4); opacity: 0; } 20% { transform: scale(1.2) translateY(-20px); opacity: 1; } 100% { transform: translateY(-140px); opacity: 0; } }
.praise { position: absolute; left: 50%; top: 22%; z-index: 9; translate: -50% 0; pointer-events: none; white-space: nowrap; font: 400 110px/1 Chewy, "Lilita One";
  color: #fffbe0; -webkit-text-stroke: 4px #2a1222; text-shadow: 0 8px 0 #2a1222, 0 0 40px #ffb300; animation: praise 1.5s steps(15) forwards; filter: url(#wobble); }
@keyframes praise { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 18% { transform: scale(1.25) rotate(4deg); opacity: 1; } 30% { transform: scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { transform: scale(1.1) translateY(-40px); opacity: 0; } }
.coinfly { position: absolute; left: 0; top: 0; z-index: 33; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #ffc933 45%, #a86a00); box-shadow: 0 0 0 3px #6a4000, 0 0 14px #ffd23f; }
#credit.bump, .meter b.bump { animation: bump .35s; display: inline-block; }
.flyby { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flyby .fb { position: absolute; left: 0; top: 0; width: 110px; opacity: .85; filter: blur(.6px) drop-shadow(0 8px 6px #0006); }
.ic { position: relative; }
.ic .dot { position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; }
.ic .dot[hidden] { display: none; }
.info .center { text-align: center; }
.mlist { display: grid; gap: 14px; margin: 20px 0; }
.mlist div { display: grid; grid-template-columns: 1fr 220px 90px 110px; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 18px; background: #ffffff0c; box-shadow: inset 0 0 0 2px #ffffff18; }
.mlist div.ok { box-shadow: inset 0 0 0 3px #7cf06a; }
.mlist b { font: 400 30px "Lilita One"; color: #fff; }
.mlist i { display: block; height: 16px; border-radius: 8px; background: #ffffff18; overflow: hidden; }
.mlist u { display: block; height: 100%; background: linear-gradient(90deg, #4fb6ff, #9bff7a); }
.mlist span { font: 600 24px Oswald; color: #ddd3f5; } .mlist em { font: 700 24px Oswald; font-style: normal; color: #9bff7a; text-align: right; }
[data-o="port"] .mlist div { grid-template-columns: 1fr 120px; } [data-o="port"] .mlist i { grid-column: 1 / -1; }
.album { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; }
[data-o="port"] .album { grid-template-columns: repeat(3, 1fr); }
.album div { text-align: center; padding: 10px; border-radius: 16px; background: #ffffff0a; }
.album img { width: 100%; filter: grayscale(1) brightness(.3); }
.album .got img { filter: none; animation: pigBob 2s steps(12) infinite; }
.album b { font: 400 22px "Lilita One"; color: #ffe066; }
[data-o="land"] .tools { flex-wrap: nowrap; gap: 7px; } [data-o="land"] .ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
[data-o="land"] .meter { min-width: 128px; }

/* ---------- v7: rampage, 5-of-a-kind, coach marks, settings, low quality ---------- */
.dino.stomp { animation: stomp .38s steps(5); }
@keyframes stomp { 30% { transform: translateY(-40px) scale(1.04, .96); } 60% { transform: translateY(0) scale(1.1, .88); } }
.sym.drop img { animation: dropIn .45s steps(6); transform-origin: 50% 100%; }
@keyframes dropIn { 0% { transform: translateY(-420px) scale(.9, 1.2); } 70% { transform: translateY(0) scale(1.2, .75); } 85% { transform: scale(.92, 1.1); } }
.coach { position: absolute; inset: 0; z-index: 80; }
.coach .hole { position: absolute; border-radius: 26px; box-shadow: 0 0 0 4000px #000b, 0 0 0 5px #ffd23f, 0 0 40px 10px #ffb300; animation: coachPulse 1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes coachPulse { to { box-shadow: 0 0 0 4000px #000b, 0 0 0 8px #fff3a0, 0 0 60px 16px #ffb300; } }
.coach .tip { position: absolute; width: 500px; padding: 24px 28px; border-radius: 26px; background: #fffdf4; color: #2a1222; box-shadow: 0 0 0 5px #2a1222, 8px 10px 0 #0007; filter: url(#wobble); animation: speechIn .4s steps(5); }
.coach p { font: 400 30px/1.25 Chewy, "Lilita One", cursive; }
.coach b { color: #c4142a; }
.coach button { margin-top: 16px; padding: 10px 30px; border-radius: 30px; font: 400 28px "Lilita One"; color: #fff; background: linear-gradient(#ff6a7a, #c4142a); box-shadow: 0 0 0 3px #2a1222, 0 5px 0 #2a1222; }
.sets { display: grid; gap: 22px; max-width: 760px; margin: 40px auto; }
.sets label { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 24px; border-radius: 18px; background: #ffffff0c; font: 500 28px Oswald; color: #ece2ff; }
.sets input[type=range] { width: 340px; accent-color: #ffd23f; }
.sets input[type=checkbox] { width: 32px; height: 32px; accent-color: #7cf06a; }
.sets select { font: 500 24px Oswald; padding: 8px 14px; border-radius: 12px; background: #1c0848; color: #fff; border: 2px solid #ffd23f; }
.stage.low .godrays, .stage.low .motes, .stage.low .twinkles, .stage.low .flyby { display: none; }
.stage.low .card, .stage.low .caption, .stage.low .counter, .stage.low .toast, .stage.low .speech, .stage.low .automenu, .stage.low .build, .stage.low .praise, .stage.low .coach .tip { filter: none; }
.stage.low .logo::after, .stage.low .jp::after { animation: none; }

/* ---------- v8: tin soldiers, building site, offered spins ---------- */
.heroc i { top: 34%; width: 5.5%; height: 6%; background: #ffd8b6; }
.heroc i:nth-of-type(1) { left: 42.5%; } .heroc i:nth-of-type(2) { left: 51.8%; }
.heroc:nth-child(2) i { animation-delay: -1.2s; } .heroc:nth-child(3) i { animation-delay: -2.3s; }
.build img { width: 150px; }
[data-o="land"] .build { flex-direction: column; text-align: center; padding: 10px 14px; }
[data-o="land"] .build img { width: 230px; }
.build img.rise { animation: rise .7s steps(7); }
@keyframes rise { 30% { transform: scale(1.18, .86); filter: brightness(1.6) drop-shadow(0 0 20px #fff6a0); } 60% { transform: scale(.94, 1.08); } }
.brickfly { position: absolute; left: 0; top: 0; z-index: 33; width: 30px; height: 20px; border-radius: 4px; pointer-events: none; background: var(--c);
  box-shadow: 0 0 0 3px #2a1222, inset 0 -4px 0 #0004; }
.brickfly::before, .brickfly::after { content: ""; position: absolute; top: -6px; width: 9px; height: 6px; border-radius: 3px 3px 0 0; background: var(--c); box-shadow: 0 0 0 2px #2a1222; }
.brickfly::before { left: 4px; } .brickfly::after { right: 4px; }
.levels div { width: 84px; }
.spin.offer::after { content: "OFFERT ×" attr(data-offers); position: absolute; left: 50%; top: -34px; translate: -50% 0; white-space: nowrap; padding: 4px 12px; border-radius: 14px;
  background: #ffd23f; color: #2a1222; font: 400 22px "Lilita One"; box-shadow: 0 0 0 3px #2a1222; height: auto; }

/* ---------- v9: Castle bonus (Huff N' More Puff style) ---------- */
.hc { background: radial-gradient(circle at 50% 70%, #5a8a3a, #2a4a1a 75%); }
.hc::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 12%; height: 18%; border-radius: 50%; background: #7a5a2a55; }
.hc.lock[data-lv="0"] { background: radial-gradient(circle, #ffe9b0, #d8a85a 75%); }
.hc.lock[data-lv="1"] { background: radial-gradient(circle, #ffd29a, #b8702a 75%); }
.hc.lock[data-lv="2"] { background: radial-gradient(circle, #fff6c4, #c49a1a 75%); box-shadow: inset 0 0 0 3px #ffe066, inset 0 0 30px #8a5a00; }
.hc .roller img { opacity: .55; }
.hc .castle { z-index: 2; }
.trooper { position: absolute; inset: 8%; width: 84%; z-index: 4; animation: trooperIn .35s steps(5); filter: drop-shadow(0 8px 6px #0008); }
@keyframes trooperIn { 0% { transform: translateY(-160%) scale(.8, 1.2); } 70% { transform: translateY(0) scale(1.15, .85); } }
#csCount { display: inline-block; }
.clv div { width: 90px; }

/* ---------- v10: bet picker, offered spins button ---------- */
.betpickbtn { text-align: center; }
.betpickbtn span { display: block; font: 600 16px Oswald; letter-spacing: .3em; color: #ffc933; }
.betpickbtn b { font: 700 34px/1.1 Oswald; color: #ffe066; font-variant-numeric: tabular-nums; }
.betpickbtn:hover b { text-decoration: underline; }
.betpick { position: absolute; bottom: 110px; left: 50%; translate: -50% 0; z-index: 26; padding: 18px 22px; border-radius: 22px; background: #1c0848f6; box-shadow: 0 0 0 4px #ffd23f, 0 20px 40px #000c; text-align: center; }
[data-o="port"] .betpick { bottom: 320px; }
.betpick b { display: block; font: 400 32px "Lilita One"; color: #ffe066; margin-bottom: 12px; }
.betpick div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.betpick button { min-width: 96px; height: 58px; border-radius: 14px; font: 700 24px Oswald; background: #ffffff14; box-shadow: inset 0 0 0 2px #ffffff30; font-variant-numeric: tabular-nums; }
.betpick button.on { background: linear-gradient(#ffe066, #f5a516); color: #2a1222; box-shadow: 0 0 16px #ffb300; }
.betpick small { display: block; margin-top: 10px; font: 500 16px Oswald; color: #b8a8e8; }
.offerbtn { position: absolute; z-index: 21; padding: 8px 18px; border-radius: 22px; background: linear-gradient(#ffe066, #f5a516); color: #2a1222;
  font: 400 22px "Lilita One"; box-shadow: 0 0 0 3px #2a1222, 0 5px 0 #2a1222, 0 0 20px #ffb300; animation: spinCall 1.2s ease-in-out infinite; white-space: nowrap; }
.offerbtn[hidden] { display: none; }
.offerbtn:disabled { animation: none; filter: saturate(.6); }
[data-o="land"] .offerbtn { right: 30px; bottom: 214px; }
[data-o="port"] .offerbtn { left: 50%; translate: -50% 0; bottom: 204px; }
.spin.offer::after { content: none; }

/* ---------- v11: rewarded ad ---------- */
.adbox { position: relative; width: 900px; max-width: 94%; padding: 34px 40px 30px; border-radius: 30px; text-align: center; background: linear-gradient(#fffdf4, #ffe9c4); color: #2a1222; box-shadow: 0 0 0 6px #2a1222, 0 30px 60px #000c; cursor: default; }
.adtag { position: absolute; left: 22px; top: 18px; padding: 4px 12px; border-radius: 8px; background: #2a1222; color: #ffe066; font: 700 16px Oswald; letter-spacing: .2em; }
.adscene { position: relative; height: 300px; margin: 10px 0 18px; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 120%, #8ad86a, #3a7a2a 60%), #6ac0ff; }
.adfort { position: absolute; left: 50%; bottom: 0; width: 360px; translate: -50% 0; animation: pigBob 2s steps(12) infinite; }
.adsol { position: absolute; bottom: 6px; width: 110px; animation: adMarch 3s steps(12) infinite; }
.adsol.s1 { left: 6%; } .adsol.s2 { left: 18%; animation-delay: -1s; } .adsol.s3 { right: 8%; animation-delay: -2s; }
@keyframes adMarch { 50% { transform: translateY(-14px) rotate(-5deg); } }
.adrex { position: absolute; right: -10px; top: 20px; width: 170px; animation: adRex 4s steps(16) infinite; }
@keyframes adRex { 0%, 60% { transform: translateX(160px); } 75%, 90% { transform: translateX(0) rotate(-8deg); } 100% { transform: translateX(160px); } }
.adbox h2 { font: 400 44px/1.05 "Lilita One"; color: #c4142a; }
.adbox p { margin: 10px 0 18px; font: 500 24px Oswald; }
.adbar { height: 14px; border-radius: 7px; background: #2a122222; overflow: hidden; }
.adbar u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #36b04a); }
.adclaim { margin-top: 18px; min-width: 340px; height: 70px; border-radius: 35px; font: 400 32px "Lilita One"; color: #fff; background: linear-gradient(#8cff6a, #1f9a2a); box-shadow: 0 0 0 4px #2a1222, 0 6px 0 #2a1222; }
.adclaim:disabled { background: #9a90a8; color: #fff; }