:root {
  --c1: #ff00e6;
  --c2: #00f0ff;
  --gold: #ffd84a;
  --bg: #0b0018;
  --frame: #ffd84a;
  --reel1: #1c0533;
  --reel2: #2d0a52;
  --title-font: "Arial Black", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: #fff;
  font-family: "Arial Black", "Segoe UI", system-ui, sans-serif; user-select: none; }

#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--glow, var(--c1)) 30%, transparent), transparent 55%),
              linear-gradient(180deg, var(--sky1, var(--bg)), var(--sky2, var(--bg))); }
#bg .rays { display: none; }
#bg.casino .rays { display: block; }
.rays { position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0 6deg, transparent 6deg 18deg);
  animation: spinRays 30s linear infinite; }
@keyframes spinRays { to { transform: translate(-50%, -50%) rotate(360deg); } }


#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  max-width: 720px; margin: 0 auto; padding: 12px 16px; }
#app.shake { animation: shake .45s; }
@keyframes shake { 0%,100%{transform:translate(0)} 20%{transform:translate(-8px,4px)} 40%{transform:translate(7px,-5px)} 60%{transform:translate(-5px,-3px)} 80%{transform:translate(4px,5px)} }

#hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#menu { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff2a55; border: 2px solid #fff; box-shadow: 0 0 8px #ff2a55; animation: breathe 1s infinite; }
.pill { background: rgba(0,0,0,.45); border: 2px solid var(--c2); color: #fff; border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 15px; box-shadow: 0 0 12px var(--c2), inset 0 0 8px var(--c2); cursor: pointer; }
.coins { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold), inset 0 0 8px var(--gold); font-size: 18px; }
.coins .icon { margin-right: 6px; }
.level-box { flex: 1; max-width: 220px; text-align: center; }
.level-label { font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 8px var(--c1); }
.xpbar { height: 12px; background: rgba(0,0,0,.5); border-radius: 6px; border: 1px solid var(--c1); overflow: hidden; }
#xpfill { height: 100%; width: 0; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .4s; box-shadow: 0 0 10px var(--c1); }

#machine { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Machine title drawn like a logo: a thick dark outline + 3D extrusion layer behind,
   metallic gradient lettering in front with a light sweep, in each machine's own font. */
/* Machine title drawn like a logo, in three stacked copies of the name:
   ::before = thick dark outline + 3D extrusion, the element itself = invisible spacer,
   ::after  = metallic gradient lettering with a light sweep running through it. */
#machineName { position: relative; margin: 0; font-family: var(--logo-font, var(--title-font)); font-weight: 900; text-align: center;
  font-size: clamp(30px, 9vw, 56px); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; color: transparent; }
#machineName::before, #machineName::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
#machineName::before { -webkit-text-stroke: 8px #1a0d00; color: #1a0d00;
  text-shadow: 0 2px 0 #120800, 0 4px 0 #0d0600, 0 6px 0 #080400, 0 9px 12px rgba(0,0,0,.85);
  filter: drop-shadow(0 0 1.5px #fff3c4) drop-shadow(0 0 1px #fff3c4) drop-shadow(0 0 14px rgba(0,0,0,.6)); }
#machineName::after {
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 0 0 / 250% 100%,
    linear-gradient(180deg, #fffbe6 0%, var(--gold) 38%, color-mix(in srgb, var(--gold) 55%, #7a3b00) 52%, var(--gold) 66%, #fff3c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.5s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0, 0 0; } to { background-position: -100% 0, 0 0; } }

/* Dragon Gold: black letters with a gold outline; a white glow runs through the inside of the letters only */
#machineName.logo-dragon::before { -webkit-text-stroke: 7px #f5c542; color: #f5c542;
  text-shadow: 0 2px 0 #b8860b, 0 4px 0 #8a5a00, 0 6px 0 #5c3a00, 0 9px 12px rgba(0,0,0,.85);
  filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 16px rgba(0,0,0,.7)); }
#machineName.logo-dragon::after {
  background: linear-gradient(110deg, transparent 38%, #fff 48%, #fff 52%, transparent 62%) 0 0 / 300% 100%, #000;
  -webkit-background-clip: text; background-clip: text; }
#lineInfo { font-size: 13px; letter-spacing: 3px; opacity: .85; margin: 2px 0 8px; }
/* ---- Progressive jackpot plaques ---- */
#jackpots { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.jp { flex: 1; position: relative; text-align: center; padding: 4px 8px 6px; border-radius: 12px; line-height: 1.05;
  border: 3px solid var(--jpc); background: linear-gradient(180deg, color-mix(in srgb, var(--jpc) 45%, #000), #0a0410 75%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--jpc) 60%, transparent), inset 0 2px 0 rgba(255,255,255,.25); }
.jp small { display: block; font-family: "Bangers", Impact, sans-serif; font-size: 17px; letter-spacing: 3px;
  color: var(--jpc); -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 0 8px var(--jpc); }
.jp b { display: block; font-size: clamp(14px, 4.2vw, 20px); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
.jp-major { --jpc: #ff3d6e; }
.jp-minor { --jpc: #38bdf8; }
.jp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%) 0 0 / 250% 100%; animation: jpShine 3s linear infinite; }
.jp-minor::after { animation-delay: -1.5s; }
@keyframes jpShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.jp.hit { animation: jpHit .3s steps(2) infinite; }
@keyframes jpHit { 50% { background: var(--jpc); } }
#machineTag { position: relative; font-family: var(--tag-font, var(--title-font)); font-size: 22px; line-height: 1.1; margin-top: 2px;
  color: #fff; -webkit-text-stroke: 4px #140a00; paint-order: stroke fill;
  text-shadow: 0 2px 0 #000, 0 0 14px color-mix(in srgb, var(--c2) 80%, transparent); }

#reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; width: min(100%, calc((100dvh - 400px) * 1.25)); padding: 8px;
  border-radius: 22px; background: linear-gradient(180deg, rgba(20,0,40,.85), rgba(0,0,0,.85));
  border: 4px solid var(--frame); box-shadow: 0 0 25px var(--frame), 0 0 60px var(--c1), inset 0 0 30px rgba(0,0,0,.9); }
.reel { position: relative; overflow: hidden; border-right: 2px solid color-mix(in srgb, var(--frame) 45%, transparent);
  background: linear-gradient(180deg, var(--reel1), var(--reel2) 50%, var(--reel1)); }
.reel:last-child { border-right: 0; }
.cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(30px, 9vw, 62px);
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.35); }
.strip { display: flex; flex-direction: column; will-change: transform; }
/* shading at the top and bottom of each reel makes it read as a rolling drum */
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55)); }
.reel.anticipate { animation: anticipate .35s ease-in-out infinite alternate; }
@keyframes anticipate { from { box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--gold); } to { box-shadow: 0 0 0 3px #fff, 0 0 30px var(--gold), 0 0 50px var(--c1); } }
/* ---- Symbol tiles ---- */
.sym { position: relative; z-index: 1; line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.t-low .sym { font-size: .82em; }

/* Symbol idle moves. Each runs on a 6s loop with a random offset, so tiles take turns moving. */
.sym { animation-duration: 6s; animation-iteration-count: infinite; animation-delay: var(--d, 0s); }
.mv-hop { animation-name: mvHop; animation-timing-function: ease-out; }
.mv-wobble { animation-name: mvWobble; animation-timing-function: ease-in-out; }
.mv-flip { animation-name: mvFlip; animation-timing-function: ease-in-out; }
.mv-jiggle { animation-name: mvJiggle; animation-timing-function: ease-in-out; }
@keyframes mvHop { 0%, 72%, 100% { transform: translateY(0) scale(1); } 75% { transform: translateY(4%) scale(1.14, .86); }
  81% { transform: translateY(-24%) scale(.92, 1.08); } 87% { transform: translateY(0) scale(1.1, .9); }
  91% { transform: translateY(-6%) scale(1); } 94% { transform: translateY(0) scale(1); } }
@keyframes mvWobble { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-16deg) scale(1.08); }
  82% { transform: rotate(13deg) scale(1.08); } 88% { transform: rotate(-7deg); } 94% { transform: rotate(0); } }
@keyframes mvFlip { 0%, 74% { transform: perspective(300px) rotateY(0); } 92%, 100% { transform: perspective(300px) rotateY(360deg); } }
@keyframes mvJiggle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 74% { transform: scale(1.25) rotate(-10deg); }
  78% { transform: scale(1.2) rotate(10deg); } 82% { transform: scale(1.25) rotate(-6deg); } 88% { transform: scale(1) rotate(0); } }
/* while a reel rolls, everything on it holds still so the roll stays sharp */
.strip.rolling .sym, .strip.rolling .cell::after { animation: none !important; }
.t-mid .sym, .t-high .sym { font-size: .78em; }
.t-top { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c1) 85%, #fff), var(--c1) 50%, color-mix(in srgb, var(--c1) 35%, #000));
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 18px rgba(0,0,0,.5); }
.t-top .sym { font-size: 1.05em; }
.t-wild { background: linear-gradient(180deg, #6b0a22, #2a0010 70%); box-shadow: inset 0 0 0 3px #ffcc33, inset 0 0 20px rgba(255,120,0,.45); flex-direction: column; }
.t-wild .sym { font-size: .5em; margin-bottom: -2px; }
.wild-word { position: relative; z-index: 1; font-family: "Arial Black", Impact, sans-serif; font-size: .42em; letter-spacing: 1px;
  background: linear-gradient(180deg, #fffbe0, #ffd84a 45%, #ff9a00); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a2a00) drop-shadow(0 0 6px rgba(255,200,0,.7)); }
/* a light glint sweeps across feature tiles every few seconds */
.t-top::after, .t-wild::after { content: ''; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%); animation: glint 4s ease-in-out infinite; animation-delay: var(--shine-delay, 0s); }
@keyframes glint { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
@keyframes breatheSym { 50% { transform: scale(1.08); } }

/* ---- Wins: winning tiles get a pulsing gold frame and pop; everything else dims ---- */
#reels.has-win .cell:not(.win) { filter: brightness(.5) saturate(.7); transition: filter .3s; }
.cell.win { z-index: 3; animation: winFrame .6s ease-in-out infinite alternate; }
.cell.win .sym { animation: winPop .6s ease-in-out infinite alternate; animation-delay: 0s; }
@keyframes winFrame { from { box-shadow: inset 0 0 0 3px #ffd84a, inset 0 0 10px #ffb300; }
  to { box-shadow: inset 0 0 0 5px #fff6c8, inset 0 0 26px #ff9a00; } }
@keyframes winPop { from { transform: scale(1); } to { transform: scale(1.15); filter: drop-shadow(0 0 10px #ffd84a); } }

#winMeter { margin-top: 12px; min-width: 60%; padding: 6px 18px; border-radius: 14px; text-align: center; line-height: 1.1;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(20,0,40,.75)); border: 2px solid color-mix(in srgb, var(--frame) 60%, transparent);
  box-shadow: inset 0 0 14px rgba(0,0,0,.6); transition: box-shadow .3s, transform .3s; }
#winMeter small { display: block; font-size: 11px; letter-spacing: 3px; opacity: .7; }
#winAmt { display: block; min-height: 1.2em; font-size: clamp(22px, 6.5vw, 34px); color: #fff; }
#winMeter.on { box-shadow: 0 0 20px var(--gold), inset 0 0 14px rgba(255,216,74,.35); }
#winMeter.on #winAmt { color: var(--gold); text-shadow: 0 0 12px var(--gold); }
#winMeter.mega { transform: scale(1.08); }

#controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.bet { display: flex; align-items: center; gap: 8px; }
.bet-display { text-align: center; min-width: 70px; }
.bet-display small { display: block; font-size: 10px; letter-spacing: 1px; opacity: .8; }
.bet-display span { font-size: 20px; color: var(--gold); }
@keyframes breathe { 50% { box-shadow: 0 0 40px var(--c1), 0 0 90px var(--c1), inset 0 -8px 16px rgba(0,0,0,.4); } }

/* ---- Whole-screen shake: --q is the strength (set from JS per win stage) ---- */
body.quake { animation: quake .11s linear infinite; }
@keyframes quake {
  0%   { transform: translate(0, 0) rotate(0); }
  20%  { transform: translate(calc(var(--q) * -1px), calc(var(--q) * .6px)) rotate(calc(var(--q) * -.12deg)); }
  40%  { transform: translate(calc(var(--q) * .9px), calc(var(--q) * -.8px)) rotate(calc(var(--q) * .1deg)); }
  60%  { transform: translate(calc(var(--q) * -.6px), calc(var(--q) * -.5px)) rotate(calc(var(--q) * .06deg)); }
  80%  { transform: translate(calc(var(--q) * .7px), calc(var(--q) * .9px)) rotate(calc(var(--q) * -.08deg)); }
  100% { transform: translate(0, 0) rotate(0); } }

/* ---- Big / Mega / Epic win screen ---- */
#bigwin { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(60,20,0,.55), rgba(0,0,0,.88) 70%); }
.bw-rays { position: absolute; left: 50%; top: 45%; width: 240vmax; height: 240vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255,216,74,.38) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 30%); mask: radial-gradient(circle, #000 4%, transparent 30%);
  animation: spinRays 7s linear infinite; }
#bigwin.s2 .bw-rays { background: repeating-conic-gradient(rgba(255,79,216,.45) 0 6deg, transparent 6deg 12deg, rgba(255,216,74,.45) 12deg 18deg, transparent 18deg 24deg);
  animation-duration: 3.5s; }
#bigwin.s3 .bw-rays { background: repeating-conic-gradient(#ff4d4d88 0 5deg, #ffd84a88 5deg 10deg, #4dff8888 10deg 15deg, #4dd2ff88 15deg 20deg, #b34dff88 20deg 25deg, transparent 25deg 32deg);
  animation-duration: 1.6s; }
.bw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.bw-flash.go { animation: flash .5s ease-out; }
#bigwin.s3 .bw-flash { animation: strobe .25s steps(2) infinite; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes strobe { 0% { opacity: .08; background: #ff4fd8; } 50% { opacity: .1; background: #22d3ee; } }
.bw-stack { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bw-title { font-family: "Bangers", Impact, "Arial Black", sans-serif; font-size: clamp(64px, 20vw, 140px); line-height: .95; letter-spacing: 3px;
  background: linear-gradient(180deg, #fffbe6 0%, #ffd84a 40%, #ff9a00 60%, #fff3a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #5a1e00; filter: drop-shadow(0 6px 0 #5a1e00) drop-shadow(0 0 22px #ffb300);
  animation: bwPulse .7s ease-in-out infinite alternate; }
.bw-title.slam { animation: slam .55s cubic-bezier(.2, 1.8, .4, 1), bwPulse .7s ease-in-out .55s infinite alternate; }
#bigwin.s2 .bw-title { background-image: linear-gradient(180deg, #fff 0%, #ff8af0 35%, #b026ff 65%, #ffe1fb 100%); -webkit-text-stroke-color: #3b0058;
  filter: drop-shadow(0 6px 0 #3b0058) drop-shadow(0 0 26px #ff4fd8); }
#bigwin.s3 .bw-title { background-image: linear-gradient(90deg, #ff4d4d, #ffd84a, #4dff88, #4dd2ff, #b34dff, #ff4d4d); background-size: 200% 100%;
  -webkit-text-stroke-color: #000; filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 30px #fff);
  animation: slam .55s cubic-bezier(.2, 1.8, .4, 1), rainbowText .8s linear infinite, bwPulse .35s ease-in-out infinite alternate; }
@keyframes slam { 0% { transform: scale(3.2) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes bwPulse { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.08) rotate(2deg); } }
@keyframes rainbowText { to { background-position: 200% 0; } }
#bwAmount { margin-top: 8px; font-family: "Bangers", Impact, sans-serif; font-size: clamp(40px, 12vw, 80px); letter-spacing: 2px; color: #fff;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000, 0 0 20px #ffd84a; font-variant-numeric: tabular-nums; }
#bwAmount.final { animation: slam .45s cubic-bezier(.2, 1.8, .4, 1); color: #ffd84a; }
.bw-tap { margin-top: 18px; font-size: 14px; letter-spacing: 3px; opacity: .8; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---- NICE / GREAT WIN ribbon across the reels ---- */
#winBanner { position: fixed; left: 50%; top: 50%; z-index: 44; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
#winBanner span { display: block; padding: 10px 46px; font-family: "Bangers", Impact, sans-serif; font-size: clamp(36px, 11vw, 64px); letter-spacing: 2px; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 2px #4a1500; paint-order: stroke fill; text-shadow: 0 4px 0 #4a1500;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, #fff), var(--c1) 55%, color-mix(in srgb, var(--c1) 55%, #000));
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); box-shadow: inset 0 3px 0 rgba(255,255,255,.5); }
#winBanner::before { content: ''; position: absolute; inset: -5px -10px; z-index: -1; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); filter: drop-shadow(0 0 12px var(--gold)); }
#winBanner.great span { background: linear-gradient(180deg, #fff6c8, #ffb300 55%, #b45309); -webkit-text-stroke-color: #5a1e00; }
#winBanner.show { animation: banner 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
#winBanner.great.show { animation-duration: 1.6s; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2, 2) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15, .9) rotate(2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(-2deg); } }

/* coins flying to the counter */
.flycoin { position: fixed; left: 0; top: 0; z-index: 55; font-size: 26px; pointer-events: none; margin: -13px 0 0 -13px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pill.coins.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.12); box-shadow: 0 0 24px var(--gold); } }

#modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); padding: 16px; }
.card { background: linear-gradient(160deg, #2a0650, #0d0020); border: 3px solid var(--c2); border-radius: 20px; padding: 22px;
  max-width: 420px; width: 100%; text-align: center; box-shadow: 0 0 40px var(--c2); max-height: 85vh; overflow: auto; }
.card h2 { margin-top: 0; color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.machine-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 10px 14px;
  border-radius: 12px; background: rgba(255,255,255,.07); border: 2px solid transparent; cursor: pointer; font: inherit; color: #fff; width: 100%; }
.machine-opt.active { border-color: var(--gold); }
.machine-opt.locked { opacity: .45; cursor: not-allowed; }
.hidden { display: none !important; }

/* ---- Background scenes (scene.js) ---- */
#scene { position: absolute; inset: 0; }
#scene .layer { position: absolute; left: -2%; bottom: 0; width: 104%; }
#scene .layer0 { opacity: .9; animation: drift 40s ease-in-out infinite alternate; }
#scene .layer1 { animation: drift 28s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-1%); } to { transform: translateX(1%); } }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; transform: scale(.6); } }
.aurora { position: absolute; left: -30%; width: 160%; height: 22%; border-radius: 50%; mix-blend-mode: screen; opacity: .55; filter: blur(28px);
  background: linear-gradient(90deg, transparent, var(--a) 25%, var(--b) 50%, var(--a) 75%, transparent);
  animation: aurora 16s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translateX(-8%) skewY(-6deg) scaleY(.8); opacity: .35; } 50% { opacity: .7; } 100% { transform: translateX(8%) skewY(5deg) scaleY(1.2); opacity: .45; } }
.orb { position: absolute; width: var(--size); height: var(--size); transform: translate(-50%, -50%); border-radius: 50%; }
.orb.sun { width: calc(var(--size) * 2.2); height: calc(var(--size) * 2.2); animation: sunPulse 5s ease-in-out infinite alternate;
  background: radial-gradient(circle, #fff 0%, var(--c) 18%, color-mix(in srgb, var(--c) 55%, transparent) 24%, color-mix(in srgb, var(--c) 18%, transparent) 42%, transparent 70%); }
.orb.moon { background: radial-gradient(circle at 40% 38%, #fff, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 60px 15px color-mix(in srgb, var(--c) 40%, transparent); }
.orb.planet { background: radial-gradient(circle at 35% 35%, #fff, var(--c) 45%, #2a0a4a); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 50%, transparent); animation: bob 8s ease-in-out infinite alternate; }
.orb.planet::after { content: ''; position: absolute; left: -35%; top: 38%; width: 170%; height: 24%; border-radius: 50%; border: 5px solid var(--ring); transform: rotate(-18deg); opacity: .8; }
@keyframes sunPulse { to { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes bob { to { transform: translate(-50%, -42%); } }
.beams { position: absolute; left: 50%; top: -10%; width: 200vmax; height: 200vmax; transform: translateX(-50%); transform-origin: 50% 0;
  background: repeating-conic-gradient(from 150deg at 50% 0, rgba(255,255,255,.12) 0 3deg, transparent 3deg 11deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  animation: beams 9s ease-in-out infinite alternate; }
@keyframes beams { from { transform: translateX(-50%) rotate(-4deg); } to { transform: translateX(-50%) rotate(4deg); } }
.cloud { position: absolute; left: -40%; width: var(--w); height: calc(var(--w) * .32); border-radius: 999px; background: var(--c); opacity: .55; filter: blur(2px);
  box-shadow: calc(var(--w) * .25) calc(var(--w) * -.12) 0 calc(var(--w) * .06) var(--c), calc(var(--w) * -.2) calc(var(--w) * -.06) 0 calc(var(--w) * .02) var(--c);
  animation: cloud linear infinite; }
@keyframes cloud { to { transform: translateX(180vw); } }
.lake { position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, rgba(190,220,255,.35), rgba(40,60,140,.6)); backdrop-filter: blur(2px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.lake::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px); animation: ripple 3s linear infinite; }
@keyframes ripple { to { background-position: 0 9px; } }
.fog { position: absolute; left: -20%; right: -20%; bottom: 0; height: 30%; opacity: .25;
  background: radial-gradient(ellipse at 30% 100%, var(--c), transparent 60%), radial-gradient(ellipse at 75% 100%, var(--c), transparent 55%);
  animation: drift 12s ease-in-out infinite alternate; }
.win-light { animation: winLight 6s steps(1) infinite; }
@keyframes winLight { 0%, 85% { opacity: 1; } 86%, 100% { opacity: .2; } }
.sway { transform-origin: bottom; transform-box: fill-box; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* ---- Machine themes ---- */
#deco { position: absolute; inset: 0; overflow: hidden; }
#deco span { position: absolute; bottom: -60px; opacity: .22; animation: floatUp linear infinite; filter: drop-shadow(0 0 6px var(--c2)); }
@keyframes floatUp { from { transform: translateY(0) rotate(0); } to { transform: translateY(-120vh) rotate(360deg); } }
.lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lobby-card { position: relative; padding: 12px 8px; border-radius: 16px; cursor: pointer; color: #fff; font: inherit; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--m1) 60%, transparent), transparent 70%), var(--mbg);
  border: 3px solid var(--mf); box-shadow: 0 0 12px color-mix(in srgb, var(--mf) 60%, transparent); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lobby-card.active { box-shadow: 0 0 22px var(--mf), inset 0 0 18px color-mix(in srgb, var(--m2) 40%, transparent); }
.lobby-card.locked { filter: saturate(.55) brightness(.8); }
.lobby-card.locked .lc-foot { color: #fff; background: rgba(0,0,0,.7); }
.lc-syms { font-size: 26px; letter-spacing: 2px; }
.lc-name { font-size: 16px; font-weight: 900; text-transform: uppercase; color: var(--mf); text-shadow: 0 0 8px var(--m1); line-height: 1.1; }
.lc-tag { font-family: system-ui, sans-serif; font-size: 11px; opacity: .85; }
.lc-foot { margin-top: 4px; font-size: 12px; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: var(--m2); }

/* ---- Free spins ---- */
#boostChip { margin-top: 4px; font-size: 11px; letter-spacing: 1px; color: #000; background: var(--gold); border-radius: 999px; padding: 2px 8px; display: inline-block; box-shadow: 0 0 10px var(--gold); }

/* ---- Avatar ---- */
#avatarBtn { background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.avatar { --s: 48px; width: var(--s); height: var(--s); border-radius: 50%; position: relative; flex: none;
  font-size: calc(var(--s) * .62); border: 3px solid var(--gold); box-shadow: 0 0 10px var(--gold);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 55%), var(--av-bg, #14b8a6); }
.avatar span { position: absolute; left: 50%; line-height: 1; transform: translate(-50%, -50%); pointer-events: none; }
.av-item { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.avatar.big { --s: 120px; border-width: 5px; }
.avatar.cheer { animation: hop .35s ease-out 3; }
@keyframes hop { 50% { transform: translateY(-8px) rotate(-8deg) scale(1.08); } }
.av-intro { margin: 0 0 12px; opacity: .9; font-family: system-ui, sans-serif; }
.av-preview { display: flex; justify-content: center; padding: 18px 0 10px; }
.av-preview .avatar { animation: hop 1.6s ease-in-out infinite; }
.av-name { width: 100%; max-width: 260px; font: inherit; font-size: 18px; text-align: center; color: #fff; padding: 8px 12px; margin-bottom: 12px;
  background: rgba(0,0,0,.4); border: 2px solid var(--c2); border-radius: 12px; outline: none; user-select: text; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 88px; align-content: start; gap: 8px; margin-bottom: 12px; min-height: calc(4 * 88px + 3 * 8px); }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 2px solid transparent; color: #fff; font: inherit; }
.av-opt .av-icon { font-size: 34px; line-height: 1.1; height: 38px; display: flex; align-items: center; }
.av-opt small { font-size: 11px; font-family: system-ui, sans-serif; font-weight: 700; }
.av-opt.active { border-color: var(--gold); background: rgba(255,216,74,.15); box-shadow: 0 0 12px rgba(255,216,74,.5); }
.av-opt.locked .av-icon { filter: grayscale(.8) brightness(.6); }
.av-opt.locked small { color: var(--gold); }
.av-opt.confirm { border-color: #10b981; background: rgba(16,185,129,.2); }
.av-opt.confirm small { color: #6ee7b7; }
.swatch { display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; }

/* ---- Shared tabs ---- */
.tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.tab { font: inherit; font-size: 13px; color: #fff; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 2px solid transparent; }
.tab.active { border-color: var(--c2); background: color-mix(in srgb, var(--c2) 25%, transparent); box-shadow: 0 0 10px var(--c2); }
.card.wide { max-width: 520px; }

/* ---- Daily rewards ---- */
.daily-sub { margin: 0 0 12px; font-family: system-ui, sans-serif; opacity: .85; font-size: 14px; }
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.day { position: relative; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12);
  font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.day b { font-size: 11px; letter-spacing: 1px; opacity: .8; }
.day .rw { font-family: system-ui, sans-serif; font-weight: 700; }
.day .rw span { margin-right: 3px; }
.day.chest { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255,216,74,.25), rgba(255,0,230,.2)); border-color: var(--gold); }
.chest-icon { font-size: 36px; }
.day.today { border-color: var(--gold); box-shadow: 0 0 16px var(--gold); animation: breathe 1.4s infinite; background: rgba(255,216,74,.18); }
.day.done { opacity: .5; }
.day .check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #10b981; text-shadow: 0 0 10px #000; }
.daily-foot { margin: 14px 0 6px; }
.claim { font: inherit; font-size: 20px; color: #000; padding: 12px 28px; border-radius: 999px; border: 3px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #fff3a8, var(--gold)); box-shadow: 0 0 20px var(--gold); animation: breathe 1.2s infinite; }
.next { font-family: system-ui, sans-serif; opacity: .85; }
.next .cd { color: var(--gold); font-weight: 800; }

/* ---- Store ---- */
.test-note { font-family: system-ui, sans-serif; font-size: 13px; opacity: .8; margin: 0 0 10px; }
.store-row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; color: #fff; text-align: left; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12); }
.store-row:active { transform: scale(.98); }
.sr-icon { font-size: 30px; }
.sr-main { flex: 1; font-size: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sr-main em { font-style: normal; font-size: 10px; letter-spacing: 1px; background: #ff2a55; border-radius: 6px; padding: 2px 6px; }
.sr-main small { font-size: 16px; letter-spacing: 2px; }
.price { background: linear-gradient(180deg, #6ee7b7, #10b981); color: #00281a; padding: 8px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.price.coin { background: rgba(0,0,0,.4); color: var(--gold); border: 2px solid var(--gold); }

#toast { position: fixed; left: 50%; bottom: 24%; transform: translate(-50%, 20px); z-index: 80; pointer-events: none; opacity: 0;
  background: rgba(0,0,0,.85); border: 2px solid var(--gold); color: var(--gold); padding: 10px 18px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
#toast.show { animation: toast 2s ease-out; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }



/* =========================================================
   Buttons: chunky 3D, glossy, each with its own shape.
   .btn3d      = rounded block with a raised bottom edge that sinks when pressed.
   .shape-btn  = custom-shaped face (clip-path / mask); the depth comes from a
                 drop-shadow filter on the button so it follows the shape.
   ========================================================= */
.btn3d { --face: #7c3aed; --edge: #3b0f8a; position: relative; border: 0; cursor: pointer; color: #fff; font: inherit;
  border-radius: 18px; padding: 10px 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--face) 55%, #fff) 0%, var(--face) 45%, color-mix(in srgb, var(--face) 75%, #000) 100%);
  box-shadow: 0 6px 0 var(--edge), 0 10px 16px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.18);
  text-shadow: 0 2px 0 rgba(0,0,0,.4); transition: transform .07s, box-shadow .07s; }
.btn3d::before { content: ''; position: absolute; left: 7%; right: 7%; top: 3px; height: 42%; border-radius: 14px 14px 50% 50% / 14px 14px 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events: none; }
.btn3d:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge), 0 3px 6px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18); }
#modalClose { --face: #0ea5e9; --edge: #075985; margin-top: 8px; font-size: 18px; min-width: 130px; }

/* SPIN: big arcade key with a gold rim, a chasing light around the rim and a glint sweeping across */
#spin { --face: color-mix(in srgb, var(--c1) 80%, #ff2d95); --edge: color-mix(in srgb, var(--c1) 45%, #000);
  width: 128px; height: 96px; border-radius: 28px; padding: 0; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-size: 32px; letter-spacing: 2px; outline: 4px solid var(--gold); outline-offset: -1px; }
/* after 10s untouched, SPIN hops with a squash-and-stretch to invite a tap */
#spin.nudge { animation: nudge 1s cubic-bezier(.3, .7, .4, 1); }
@keyframes nudge {
  0% { transform: translateY(0) scale(1); } 12% { transform: translateY(3px) scale(1.12, .86); }
  32% { transform: translateY(-26px) scale(.92, 1.1); } 52% { transform: translateY(0) scale(1.1, .9); }
  64% { transform: translateY(-9px) scale(.97, 1.03); } 78% { transform: translateY(0) scale(1.03, .97); }
  100% { transform: translateY(0) scale(1); } }
#spin small { font-size: 18px; color: #fff3a8; margin-top: 2px; }
#spin span, #spin small { position: relative; z-index: 1; }
#spin.free { --face: #10b981; --edge: #065f46; }
#spin:disabled { filter: saturate(.5) brightness(.8); }

/* AUTO: a toggle with an indicator light */
#auto { --face: #334155; --edge: #0f172a; padding: 10px 12px 10px 28px; font-size: 15px; border-radius: 14px; }
#auto .led { position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%;
  background: #475569; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
#auto.on { --face: #0891b2; --edge: #164e63; }
#auto .lock { display: none; position: absolute; top: -8px; right: -8px; font-size: 16px; filter: drop-shadow(0 1px 2px #000); }
#auto.locked { filter: saturate(.4) brightness(.85); }
#auto.locked .lock { display: block; }
#auto.on .led { background: #6ee7b7; box-shadow: 0 0 8px #34d399, 0 0 14px #34d399; animation: breathe 1s infinite; }

/* Shaped buttons */
.shape-btn { --face: #7c3aed; --edge: #3b0f8a; position: relative; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: #fff;
  filter: drop-shadow(0 5px 0 var(--edge)) drop-shadow(0 8px 6px rgba(0,0,0,.45)); transition: filter .07s, transform .07s; }
.shape-btn .face { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  padding: 9px 16px; font-size: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--face) 55%, #fff) 0%, var(--face) 48%, color-mix(in srgb, var(--face) 75%, #000) 100%); }
.shape-btn .face::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 42%; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.shape-btn:active { transform: translateY(4px); filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
#menu { gap: 10px; align-items: center; }

/* Daily = admission ticket with notched sides and a perforation line */
.ticket { --face: #e11d48; --edge: #7f1d1d; }
.ticket .face { padding: 9px 18px 9px 26px; border-radius: 6px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; }
.ticket .face::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 17px; border-left: 2px dashed rgba(255,255,255,.45); }

/* Store = price tag with a punched hole */
.tag { --face: #16a34a; --edge: #14532d; }
.tag .face { padding: 9px 14px 9px 26px; border-radius: 0 10px 10px 0; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.tag .face::after { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #052e16; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }

/* Machines = a mini slot cabinet: arched top with chasing bulbs, a little reel window, a pull lever */
.cabinet { --face: #7c3aed; --edge: #3b0764; margin-right: 12px; }
.cabinet .face { flex-direction: row; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 18px 18px 8px 8px; }
.cabinet .face::after { content: ''; position: absolute; inset: 2px; border-radius: 16px 16px 6px 6px; border: 3px dotted #fff3a8;
  animation: bulbs .5s steps(1) infinite; pointer-events: none; }
@keyframes bulbs { 50% { border-color: #ffb300; } }
.cab-win { position: relative; z-index: 1; width: 1.25em; height: 1.25em; font-size: 22px; line-height: 1.25em; overflow: hidden; border-radius: 6px;
  background: linear-gradient(180deg, #e5e7eb, #fff 40%, #fff 60%, #d1d5db); box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px #fde68a; }
.cab-strip { display: flex; flex-direction: column; align-items: center; }
.cab-strip span { height: 1.25em; display: block; }
.cab-label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-size: 13px; letter-spacing: 1px; font-weight: 800; }
.cab-label small { margin-top: 3px; font-size: 10px; letter-spacing: 1px; color: #fde68a; font-weight: 700; }
.cab-lever { position: absolute; right: -11px; top: 8px; width: 4px; height: 22px; border-radius: 2px; background: linear-gradient(90deg, #9ca3af, #f3f4f6, #6b7280);
  transform-origin: 50% 100%; }
.cab-lever::before { content: ''; position: absolute; left: -5px; top: -10px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fecaca, #ef4444 50%, #7f1d1d); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cab-lever.pull { animation: leverPull .6s ease-in-out; }
@keyframes leverPull { 40% { transform: scaleY(-.6) translateY(-6px); } }
.badge-new { position: absolute; top: -10px; right: -16px; z-index: 3; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: 900; letter-spacing: 1px;
  color: #fff; background: #ff2a55; border: 2px solid #fff; box-shadow: 0 0 10px #ff2a55; animation: newPop .9s ease-in-out infinite; }
@keyframes newPop { 50% { transform: scale(1.15) rotate(-6deg); } }
.lobby-card.is-new::after { content: 'NEW!'; position: absolute; top: 8px; right: -26px; transform: rotate(35deg); padding: 2px 30px; font-size: 11px; font-weight: 900;
  letter-spacing: 1px; color: #fff; background: #ff2a55; box-shadow: 0 0 10px #ff2a55; }
.lobby-card { position: relative; overflow: hidden; }

/* Bet arrows: pointed left/right, with a recessed display plate between them */
.arrow { --face: #0ea5e9; --edge: #0c4a6e; }
.arrow .face { width: 50px; height: 46px; padding: 0; font-size: 26px; }
.arrow.left .face { clip-path: polygon(0 50%, 42% 0, 100% 0, 100% 100%, 42% 100%); padding-left: 10px; border-radius: 0 10px 10px 0; }
.arrow.right .face { clip-path: polygon(0 0, 58% 0, 100% 50%, 58% 100%, 0 100%); padding-right: 10px; border-radius: 10px 0 0 10px; }
.bet { gap: 2px; }
.bet-display { padding: 6px 8px; border-radius: 10px; background: linear-gradient(180deg, #05010c, #1a0b2e);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(255,255,255,.12); min-width: 72px; }

.dot { z-index: 2; }
.claim { box-shadow: 0 6px 0 #a35b00, 0 10px 16px rgba(0,0,0,.5), 0 0 20px var(--gold); }
.claim:active { transform: translateY(5px); box-shadow: 0 1px 0 #a35b00, 0 0 12px var(--gold); }
@media (max-width: 380px) { #spin { width: 108px; height: 84px; font-size: 26px; } .arrow .face { width: 42px; } #auto { padding-left: 24px; font-size: 13px; } }

/* tap-to-type bet */
.bet-display { cursor: pointer; position: relative; }
.bet-display::after { content: '✎'; position: absolute; right: 3px; top: 1px; font-size: 10px; opacity: .55; }
.bet-entry input { width: 100%; max-width: 280px; font: inherit; font-size: 24px; text-align: center; color: var(--gold); padding: 10px 12px; margin: 4px 0 10px;
  border-radius: 12px; border: 2px solid var(--gold); background: #0b0418; outline: none; }
.be-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.be-chip { font: inherit; font-size: 14px; color: #fff; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--c2); background: rgba(255,255,255,.08); cursor: pointer; }
.be-err { min-height: 1.2em; margin: 0 0 6px; color: #fca5a5; font-size: 14px; font-family: system-ui, sans-serif; }

/* ---- Status ---- */
.status-chip { --st: #e09a5a; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1px; vertical-align: 2px; margin-left: 4px; cursor: pointer;
  padding: 2px 8px 2px 6px; border-radius: 999px; color: #1a1000; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st) 55%, #fff), var(--st) 55%, color-mix(in srgb, var(--st) 60%, #000));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--st) 40%, #000), 0 0 8px color-mix(in srgb, var(--st) 60%, transparent); }
.status-chip.st-whale { color: #fff; background: linear-gradient(180deg, #1e3a8a, #0b1530 60%, #000); box-shadow: 0 2px 0 #000, 0 0 12px #38bdf8; }
.status-list { text-align: left; }
.st-next { text-align: center; margin: 0 0 10px; }
.st-row { --st: #fff; border: 2px solid color-mix(in srgb, var(--st) 50%, transparent); border-radius: 14px; padding: 8px 12px; margin-bottom: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--st) 18%, transparent), transparent); }
.st-row.current { border-color: var(--st); box-shadow: 0 0 14px color-mix(in srgb, var(--st) 60%, transparent); }
.st-row.locked { opacity: .6; }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-head b { color: var(--st); font-size: 18px; }
.st-head small { margin-left: auto; font-size: 11px; opacity: .8; font-family: system-ui, sans-serif; }
.st-icon { font-size: 22px; }
.st-row ul, .st-up ul { margin: 4px 0 0; padding-left: 4px; list-style: none; font-size: 13px; font-family: system-ui, sans-serif; line-height: 1.5; }
.st-up { margin-top: 10px; padding: 10px; border-radius: 14px; border: 2px solid var(--st); box-shadow: 0 0 18px var(--st); text-align: left; }
.st-up-title { text-align: center; font-family: "Bangers", Impact, sans-serif; font-size: 26px; letter-spacing: 2px; color: var(--st); }
.st-bonus { color: #fde68a !important; }

/* ---- LVL box is a button: tap for next-level details ---- */
#levelBtn { cursor: pointer; padding: 3px 6px 4px; border-radius: 12px; transition: transform .08s, background .2s; }
#levelBtn:active { transform: scale(.96); background: rgba(255,255,255,.08); }
#levelBtn .xpbar { position: relative; height: 15px; box-shadow: 0 0 8px color-mix(in srgb, var(--c1) 50%, transparent); }
#xpPct { position: absolute; inset: 0; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 2px #000; }
#levelBtn .level-label::after { content: ' ⓘ'; font-size: 11px; opacity: .7; }
.lvl-info { text-align: left; }
.lvl-info h3 { margin: 12px 0 4px; font-size: 15px; color: var(--gold); letter-spacing: 1px; }
.lvl-info ul { margin: 0; padding-left: 4px; list-style: none; line-height: 1.6; font-family: system-ui, sans-serif; font-size: 14px; }
.li-bar { position: relative; height: 22px; border-radius: 11px; overflow: hidden; background: rgba(0,0,0,.5); border: 2px solid var(--c1); }
.li-bar div { height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px var(--c1); }
.li-bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.li-big { text-align: center; font-size: 18px; margin: 10px 0 8px; }
.li-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.li-grid div { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); }
.li-grid small { display: block; font-size: 10px; letter-spacing: 1px; opacity: .75; }
.li-grid b { font-size: 17px; color: var(--gold); }
.li-note { font-size: 13px; opacity: .9; font-family: system-ui, sans-serif; margin: 8px 0 0; }
/* keep "LVL n" and the status chip on one line */
.level-label { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.level-label .status-chip { margin-left: 2px; vertical-align: 0; font-size: 10px; padding: 2px 7px 2px 5px; }

/* ---- coin pill never wraps ---- */
.pill.coins { display: flex; align-items: center; white-space: nowrap; min-width: 0; }

/* ---- Store: VIP tier ---- */
.vip-head { margin: 14px 0 6px; text-align: center; font-family: "Bangers", Impact, sans-serif; font-size: 22px; letter-spacing: 3px; color: #ffd84a;
  text-shadow: 0 2px 0 #7a4a00, 0 0 12px #ffb300; }
.vip-head small { display: block; font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: 1px; color: #fde68a; text-shadow: none; }
.store-row.vip { border-color: #ffd84a !important; background: linear-gradient(90deg, rgba(255,216,74,.22), rgba(120,60,0,.35)) !important;
  box-shadow: 0 0 14px rgba(255,216,74,.45); }

/* ---- My Life screen ---- */
body.life-open #app { visibility: hidden; }
#life { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  background: radial-gradient(circle at 50% 0, #3b1a66, #0b0418 60%); padding: 10px 12px 24px; }
#life.hidden { display: none; }
.life-top { display: flex; align-items: center; gap: 8px; max-width: 720px; width: 100%; margin: 0 auto; }
.life-back { --face: #0ea5e9; --edge: #075985; font-size: 15px; padding: 8px 12px; }
.life-money { flex: 1; text-align: center; padding: 4px 8px; border-radius: 12px; background: rgba(0,0,0,.45); border: 2px solid var(--gold); line-height: 1.1; min-width: 0; }
.life-money small { display: block; font-size: 9px; letter-spacing: 2px; opacity: .75; }
.life-money b { font-size: 15px; color: var(--gold); white-space: nowrap; }
.life-money.worth { border-color: #34d399; } .life-money.worth b { color: #6ee7b7; }

/* showcase: a little world built from what you own */
#lifeScene { position: relative; max-width: 720px; width: 100%; margin: 12px auto 8px; height: 250px; border-radius: 20px; overflow: hidden;
  border: 3px solid var(--gold); box-shadow: 0 0 20px rgba(255,216,74,.4);
  background: linear-gradient(180deg, #4f7cff 0%, #9cc3ff 45%, #ffd9a8 62%); }
.ls-sun { position: absolute; right: 12%; top: 10%; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #fff7c2, #ffd84a 60%, transparent 70%);
  box-shadow: 0 0 40px #ffd84a; }
.ls-sea { position: absolute; left: 0; right: 0; top: 56%; height: 16%; background: linear-gradient(180deg, #2b7bd6, #155aa8);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.ls-ground { position: absolute; left: -5%; right: -5%; bottom: 0; height: 30%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: linear-gradient(180deg, #4ade80, #15803d); }
.le { display: inline-block; line-height: 1; filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.le.dark { filter: hue-rotate(var(--hue, 0deg)) brightness(.45) contrast(1.4) drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.ls-home { position: absolute; left: 6%; bottom: 22%; font-size: 92px; }
.ls-empty { opacity: .9; font-size: 70px; }
.ls-yacht { position: absolute; right: 6%; top: 46%; font-size: 46px; animation: lsRock 3s ease-in-out infinite; }
.ls-car { position: absolute; left: 34%; bottom: 4%; font-size: 58px; transform: scaleX(-1); animation: lsIdle 1.2s ease-in-out infinite; }
.ls-ship { position: absolute; left: 40%; top: 6%; font-size: 44px; animation: lsHover 4s ease-in-out infinite; }
.ls-me { position: absolute; right: 8%; bottom: 6%; }
.ls-me .avatar.big { --s: 88px; }
.ls-bling { position: absolute; left: -8px; bottom: -4px; font-size: 30px; animation: lsSparkle 1.6s ease-in-out infinite; }
.ls-tag { position: absolute; left: 10px; top: 8px; display: flex; flex-direction: column; line-height: 1.15; padding: 4px 10px; border-radius: 10px; background: rgba(0,0,0,.45); }
.ls-tag b { font-size: 15px; } .ls-tag small { font-size: 11px; opacity: .85; font-family: system-ui, sans-serif; }
.ls-edit { position: absolute; right: 8px; top: 8px; font: inherit; font-size: 12px; color: #fff; padding: 4px 10px; border-radius: 999px; border: 2px solid #fff; background: rgba(0,0,0,.4); cursor: pointer; }
@keyframes lsRock { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(3px); } }
@keyframes lsIdle { 50% { transform: scaleX(-1) translateY(-2px); } }
@keyframes lsHover { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(14px, -8px) rotate(6deg); } }
@keyframes lsSparkle { 50% { transform: scale(1.15) rotate(-8deg); filter: drop-shadow(0 0 8px #fff); } }

#lifeTabs { display: flex; gap: 6px; max-width: 720px; width: 100%; margin: 4px auto 10px; overflow-x: auto; }
.life-tab { flex: 1; min-width: 58px; font: inherit; font-size: 22px; color: #fff; padding: 6px 2px; border-radius: 12px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; }
.life-tab small { font-size: 10px; letter-spacing: 1px; margin-top: 2px; }
.life-tab.on { border-color: var(--gold); background: rgba(255,216,74,.18); box-shadow: 0 0 12px rgba(255,216,74,.45); }

#lifeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 720px; width: 100%; margin: 0 auto; }
.life-card { --tier: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; cursor: pointer;
  font: inherit; color: #fff; padding: 12px 8px 10px; border-radius: 16px; border: 2px solid hsl(calc(200 + var(--tier) * 160) 80% 65% / .7);
  background: linear-gradient(180deg, hsl(calc(200 + var(--tier) * 160) 60% 30%), #0b0418); box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.life-card .le.big { font-size: 54px; margin-bottom: 4px; }
.life-card b { font-size: 14px; line-height: 1.15; }
.life-card small { font-size: 11px; opacity: .8; font-family: system-ui, sans-serif; min-height: 2.4em; }
.lc-price { margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #1a1000; background: var(--gold); }
.life-card.pricey .lc-price { background: #475569; color: #e2e8f0; }
.life-card.pricey .le.big { filter: grayscale(.6) brightness(.8) hue-rotate(var(--hue, 0deg)); }
.life-card.owned .lc-price { background: #10b981; color: #fff; }
.life-card.featured { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,216,74,.6), 0 4px 0 rgba(0,0,0,.4); }
.life-card.featured .lc-price { background: linear-gradient(90deg, #ffd84a, #fff3a8, #ffd84a); color: #5a3a00; }
.life-card:active { transform: translateY(3px); }
.life-buy { text-align: center; }
.le.huge { font-size: 90px; animation: lsSparkle 1.6s ease-in-out infinite; }
.lb-name { font-size: 22px; margin: 6px 0 2px; color: var(--gold); }
.lb-fact { margin: 0 0 10px; opacity: .8; font-family: system-ui, sans-serif; font-size: 14px; }

.xp-bonus { color: #7dd3fc !important; }
#life > * { flex-shrink: 0; }   /* the scroll container must not squash the showcase or tabs */
.store-row em.xp-bonus { background: #0369a1 !important; color: #e0f2fe !important; }
#life { padding-top: max(34px, env(safe-area-inset-top)); }

/* Style tab inside My Life */
.style-kinds { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.style-kind { font: inherit; font-size: 13px; color: #fff; padding: 6px 14px; border-radius: 999px; cursor: pointer; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.style-kind.on { border-color: var(--gold); background: rgba(255,216,74,.2); }
.style-card .sc-preview { --s: 74px; margin-bottom: 4px; }
.style-card.pricey .sc-preview { filter: grayscale(.5) brightness(.8); }
.life-buy .avatar.big { margin: 0 auto 6px; }

/* ---- My Life artwork (life-art.js) ---- */
.la { display: block; width: 100%; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.life-card .la.big { width: 100%; max-width: 170px; margin: -4px auto 2px; }
.life-card.pricey .la.big { filter: saturate(.55) brightness(.8); }
.la.huge { width: 220px; max-width: 70vw; margin: 0 auto; }
.ls-home { left: 2%; bottom: 18%; width: 46%; }
.ls-car { left: 28%; bottom: 2%; width: 40%; transform: none; animation: none; }
.ls-yacht { right: 0; top: 34%; width: 34%; animation: none; }
.ls-ship { left: 30%; top: 0; width: 34%; animation: none; }
.ls-bling { left: -18px; bottom: -10px; width: 48px; }
.ls-home .art, .ls-car .art { filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.art .a-spin { transform-box: fill-box; transform-origin: center; animation: artSpin 1.4s linear infinite; }
.art .a-idle { animation: artIdle .5s ease-in-out infinite alternate; }
.art .a-glow { animation: artGlow 1.6s ease-in-out infinite alternate; }
.art .a-flicker { animation: artFlicker 5s steps(1) infinite; }
.art .a-flag { transform-box: fill-box; transform-origin: left center; animation: artFlag .9s ease-in-out infinite alternate; }
.art .a-smoke { transform-box: fill-box; transform-origin: center; animation: artSmoke 3.3s ease-out infinite; }
.art .a-sway { transform-box: view-box; animation: artSway 3s ease-in-out infinite alternate; }
.art .a-shimmer { animation: artShimmer 2.2s linear infinite; }
.art .a-water { animation: artWater 2.4s linear infinite; }
.art .a-water.slow { animation-duration: 4s; animation-direction: reverse; }
.art .a-rock { transform-box: fill-box; transform-origin: center bottom; animation: artRock 3s ease-in-out infinite; }
.art .a-spray { animation: artSpray .5s ease-in-out infinite alternate; }
.art .a-sail { transform-box: fill-box; transform-origin: left center; animation: artSail 2.2s ease-in-out infinite alternate; }
.art .a-twinkle { transform-box: fill-box; transform-origin: center; animation: artTwinkle 2s ease-in-out infinite; }
.art .a-tick { transform-box: view-box; transform-origin: 100px 60px; animation: artTick 60s steps(60) infinite; }
.art .a-flame { transform-box: view-box; animation: artFlame .14s ease-in-out infinite alternate; }
.art .a-flame-x { transform-box: view-box; animation: artFlameX .14s ease-in-out infinite alternate; }
.art .a-hover { animation: artHover 3s ease-in-out infinite; }
.art .a-blink { animation: artBlink 1s steps(1) infinite; }
.art .a-beam { animation: artBeam 1.6s ease-in-out infinite alternate; }
.art .a-pulse { transform-box: fill-box; transform-origin: center; animation: artPulse 2s ease-in-out infinite; }
.art .a-spin-slow { stroke-dasharray: 12 8; animation: artDash 3s linear infinite; }
@keyframes artSpin { to { transform: rotate(-360deg); } }
@keyframes artIdle { to { transform: translateY(-1px); } }
@keyframes artGlow { from { opacity: .6; } to { opacity: 1; } }
@keyframes artFlicker { 0%, 100% { opacity: 1; } 40% { opacity: .35; } 46% { opacity: 1; } 80% { opacity: .5; } }
@keyframes artFlag { from { transform: skewY(-6deg) scaleX(.92); } to { transform: skewY(5deg) scaleX(1); } }
@keyframes artSmoke { from { transform: translate(0, 0) scale(.5); opacity: .9; } to { transform: translate(8px, -30px) scale(2.2); opacity: 0; } }
@keyframes artSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes artShimmer { from { transform: translateX(0); opacity: 0; } 50% { opacity: 1; } to { transform: translateX(40px); opacity: 0; } }
@keyframes artWater { to { transform: translateX(20px); } }
@keyframes artRock { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(2px); } }
@keyframes artSpray { from { opacity: .4; } to { opacity: 1; } }
@keyframes artSail { from { transform: scaleX(.85); } to { transform: scaleX(1.05); } }
@keyframes artTwinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes artTick { to { transform: rotate(360deg); } }
@keyframes artFlame { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
@keyframes artFlameX { from { transform: scaleX(.7); } to { transform: scaleX(1.15); } }
@keyframes artHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes artBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes artBeam { from { opacity: .3; } to { opacity: 1; } }
@keyframes artPulse { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes artDash { to { stroke-dashoffset: -40; } }

/* WIN bubble: hidden until a win, then pops up over the bottom edge of the reels */
#reels { position: relative; }
#winMeter { position: absolute; left: 50%; bottom: -26px; z-index: 6; margin: 0; min-width: 0; width: max-content; max-width: 90%;
  padding: 4px 22px 6px; border: 3px solid var(--gold); background: linear-gradient(180deg, #2a1048, #0b0418);
  transform: translateX(-50%) scale(.3); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .35s cubic-bezier(.2, 1.8, .4, 1), opacity .2s, visibility 0s .35s; }
#winMeter.on { transform: translateX(-50%) scale(1); opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.2, 1.8, .4, 1), opacity .2s; }
#machine { padding-bottom: 30px; }

.life-card .art, .la.huge .art { overflow: hidden; }   /* keep waves and stars inside the picture */

/* hand-drawn premium avatars (alien, robot) */
.avatar .av-art { display: block; width: 1em; height: 1em; overflow: visible; }
.av-art .aa-aura { transform-box: fill-box; transform-origin: center; animation: aaAura 6s linear infinite; }
.av-art .aa-antenna { transform-box: view-box; animation: aaAnt 1.6s ease-in-out infinite alternate; }
.av-art .aa-antenna.r { animation-direction: alternate-reverse; }
.av-art .aa-glow { animation: aaGlow 1.2s ease-in-out infinite alternate; }
.av-art .aa-eyes { transform-box: fill-box; transform-origin: center; animation: aaBlink 4s ease-in-out infinite; }
.av-art .aa-look { animation: aaLook 5s ease-in-out infinite; }
.av-art .ar-blink { animation: artBlink .8s steps(1) infinite; }
.av-art .ar-scan { animation: arScan 2.4s ease-in-out infinite alternate; }
.av-art .ar-eyes { transform-box: fill-box; transform-origin: center; animation: aaBlink 5s ease-in-out infinite; }
.av-art .ar-talk rect { transform-box: fill-box; transform-origin: center; animation: arTalk .45s ease-in-out infinite alternate; }
@keyframes aaAura { to { transform: rotate(360deg); } }
@keyframes aaAnt { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes aaGlow { from { opacity: .5; } to { opacity: 1; filter: drop-shadow(0 0 3px #d9f99d); } }
@keyframes aaBlink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes aaLook { 0%, 30%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(3px, 0); } 70%, 90% { transform: translate(-3px, 1px); } }
@keyframes arScan { from { transform: translateX(0); } to { transform: translateX(44px); } }
@keyframes arTalk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* MAX BET button sits just above the bet display */
.bet { position: relative; }
.max-bet { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 2; white-space: nowrap;
  --face: #f59e0b; --edge: #92400e; font-size: 12px; letter-spacing: 1px; padding: 5px 12px 6px; border-radius: 10px; color: #3b1d00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.max-bet:active { transform: translateX(-50%) translateY(4px); }
.max-bet.at-max { --face: #64748b; --edge: #334155; color: #e2e8f0; text-shadow: none; }
.bet-display.bump { animation: bump .3s ease-out; }

.store-row em.status-up { background: linear-gradient(90deg, #db2777, #7c3aed) !important; color: #fff !important; }

.pill.coins { cursor: pointer; }   /* tap to see the exact balance */

/* car paint shop */
.paint-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.paint-pick .swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 8px 0 4px; }
.paint-pick .swatch { aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); background: var(--sw);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.35); padding: 0; cursor: pointer;
  color: #fff; font: 800 13px system-ui, sans-serif; }
.paint-pick .swatch.factory { background: conic-gradient(#dc2626, #facc15, #15803d, #0ea5e9, #7e22ce, #dc2626); text-shadow: 0 1px 2px #000; }
.paint-pick .swatch.on { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 3px var(--gold), inset 0 -4px 6px rgba(0,0,0,.35); }
.paint-name { margin: 6px 0 0; opacity: .8; font-family: system-ui, sans-serif; font-size: 13px; }

/* ---- Settings ---- */
.gear-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--c2); background: rgba(0,0,0,.45); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gear-btn:active { transform: rotate(40deg) scale(.92); }
.settings { text-align: left; font-family: system-ui, sans-serif; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.set-icon { font-size: 20px; width: 26px; text-align: center; }
.set-text { flex: 1; font-size: 15px; }
.set-text small { display: block; opacity: .65; font-size: 12px; margin-top: 2px; }
.set-row input { display: none; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #475569; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.set-row input:checked + .switch { background: #22c55e; }
.set-row input:checked + .switch::after { transform: translateX(20px); }
.set-section { margin-top: 14px; }
.set-section h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.set-section p { margin: 4px 0; font-size: 13px; line-height: 1.4; }
.set-ver { opacity: .5; }
.set-btn { margin: 6px 6px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.set-btn.danger { border-color: #f87171; color: #fecaca; }

/* level-up banner (auto-spin / endless levels): slides down, never blocks the reels */
#levelBanner { position: fixed; left: 50%; top: 10px; z-index: 60; transform: translate(-50%, -140%); padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #fde68a, #f59e0b); color: #3b1d00; font-weight: 900; letter-spacing: .5px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  white-space: nowrap; pointer-events: none; }
#levelBanner.show { animation: lvlBanner 2.6s ease-in-out; }
@keyframes lvlBanner { 0% { transform: translate(-50%, -140%); } 12%, 85% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -140%); } }

/* battery savers: nothing animates in the background, behind My Life, or when the player asks for less motion */
body.paused *, body.paused *::before, body.paused *::after,
body.life-open #app *, body.life-open #bg * { animation-play-state: paused !important; }
.life-card.offscreen *, .life-card.offscreen *::before, .life-card.offscreen *::after { animation-play-state: paused !important; }
body.reduce-motion #bg *, body.reduce-motion .rays, body.reduce-motion .cell *, body.reduce-motion .cell,
body.reduce-motion .art *, body.reduce-motion .cabinet .face::after, body.reduce-motion .badge-new,
body.reduce-motion #spin.nudge, body.reduce-motion .avatar * { animation: none !important; }

/* ---- Bonus features (bonus.js) ---- */
.cell.t-scatter .plate.s-scatter { position: absolute; inset: 6%; border-radius: 14px; z-index: 0;
  background: radial-gradient(circle at 50% 40%, #fff7c2, #f472b6 45%, #7c3aed 100%);
  box-shadow: 0 0 0 3px #fde68a, 0 0 16px #f472b6, inset 0 -6px 10px rgba(0,0,0,.35); animation: scatterGlow 1.4s ease-in-out infinite alternate; }
.cell.t-scatter .sym { position: relative; z-index: 1; }
.bonus-word { background: linear-gradient(180deg, #f472b6, #7c3aed) !important; color: #fff !important; }
.cell.scatter-hit { animation: scatterHit .5s ease-in-out 3; }
@keyframes scatterGlow { to { box-shadow: 0 0 0 3px #fff, 0 0 26px #f9a8d4, inset 0 -6px 10px rgba(0,0,0,.35); } }
@keyframes scatterHit { 50% { transform: scale(1.18) rotate(-4deg); } }
.reel.wild-reel { box-shadow: inset 0 0 0 3px #fde68a, 0 0 22px #fbbf24; animation: wildReelPulse .6s ease-in-out infinite alternate; }
@keyframes wildReelPulse { to { box-shadow: inset 0 0 0 3px #fff, 0 0 34px #fde047; } }

#bonusBar { margin: 4px auto 6px; padding: 6px 12px; width: fit-content; max-width: 96%; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #db2777, #7c3aed); color: #fff; box-shadow: 0 0 14px rgba(236,72,153,.6); text-align: center; }
#bonusBar b { color: #fde68a; }

.bonus-intro { text-align: center; }
.bonus-intro .bi-big { font-size: 64px; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 4px 0 #92400e, 0 0 24px rgba(253,224,71,.7);
  animation: biPop .6s cubic-bezier(.3, 1.8, .5, 1); }
.bonus-intro .bi-mult { font-size: 22px; }
.bonus-intro .bi-mult b { color: #f472b6; font-size: 28px; }
.bonus-intro .bi-note { opacity: .7; font-size: 13px; }
@keyframes biPop { from { transform: scale(.2); opacity: 0; } }

.pick-bonus { text-align: center; }
.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px auto; max-width: 300px; }
.pb-box { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 14px; cursor: pointer; perspective: 400px; background: none; }
.pb-box > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; transition: transform .45s; font-size: 38px; }
.pb-front { background: radial-gradient(circle at 50% 35%, #f9a8d4, #be185d 60%, #500724); box-shadow: 0 5px 0 #500724, inset 0 -6px 10px rgba(0,0,0,.35);
  animation: pbWiggle 2.4s ease-in-out infinite; }
.pb-box:nth-child(3n+2) .pb-front { animation-delay: -.8s; } .pb-box:nth-child(3n) .pb-front { animation-delay: -1.6s; }
.pb-back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 35%, #fef9c3, #f59e0b 70%); color: #3b1d00; font-size: 26px !important;
  display: flex !important; flex-direction: column; gap: 2px; }
.pb-back b { font-size: 20px; font-weight: 900; }
.pb-box.open .pb-front { transform: rotateY(180deg); animation: none; }
.pb-box.open .pb-back { transform: rotateY(360deg); }
.pb-box.missed .pb-back { filter: grayscale(.8) brightness(.7); }
.pb-total { font-size: 18px; } .pb-total b { color: var(--gold); }
@keyframes pbWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }

/* ---- Goals: missions, achievements, events (missions.js) ---- */
.shield { --face: #0891b2; --edge: #164e63; }
.shield .face { padding: 9px 14px; font-size: 18px; clip-path: polygon(50% 0, 100% 14%, 96% 62%, 50% 100%, 4% 62%, 0 14%); }
.goals { font-family: system-ui, sans-serif; text-align: left; }
.goal-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.goal-tabs button { flex: 1; padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.goal-tabs button.on { background: var(--c2); color: #000; border-color: transparent; }
.goal-note { margin: 0 0 8px; font-size: 12px; opacity: .65; text-align: center; }
.goal-row, .goal-chest { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.goal-row.ready, .goal-chest.ready { border-color: var(--gold); box-shadow: 0 0 12px rgba(253,224,71,.35); }
.goal-row.claimed, .goal-chest.claimed { opacity: .55; }
.gr-icon, .gc-icon { font-size: 26px; flex: none; }
.gr-main { flex: 1; min-width: 0; }
.gr-main b { display: block; font-size: 14px; margin-bottom: 5px; }
.gr-main b small { color: var(--gold); letter-spacing: 1px; }
.gr-main > small { opacity: .75; font-size: 12px; }
.gr-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.45); overflow: hidden; }
.gr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e, #a3e635); border-radius: 8px; }
.gr-bar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.gr-claim { flex: none; min-width: 64px; padding: 8px 10px; border-radius: 10px; border: 0; font: 800 12px system-ui, sans-serif; cursor: pointer;
  background: linear-gradient(180deg, #fde68a, #f59e0b); color: #3b1d00; box-shadow: 0 3px 0 #92400e; }
.gr-claim:disabled { background: #334155; color: #94a3b8; box-shadow: none; cursor: default; }
.goal-chest b { display: block; } .goal-chest small { display: block; opacity: .75; font-size: 12px; } .goal-chest > div { flex: 1; }
.goal-row.event { border-color: rgba(250,204,21,.4); }
.lc-featured { position: absolute; top: 0; left: 0; right: 0; padding: 2px; font-size: 10px; font-weight: 900; letter-spacing: 1px; background: linear-gradient(90deg, #f59e0b, #fde047); color: #3b1d00; }
.lc-feature { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #f9a8d4; margin: 2px 0; }

/* phone fit: header with the settings gear, and four buttons in the menu row */
#hud { gap: 6px; }
.level-box { max-width: 170px; min-width: 0; }
.pill.coins { flex: 0 1 auto; }
#menu { gap: 7px; }
#menu .ticket .face { padding: 8px 17px 8px 25px; font-size: 13px; }   /* room for the notches on both ends */
#menu .ticket .face::after { left: 16px; }
#menu .tag .face { padding: 8px 11px 8px 22px; font-size: 13px; }
#menu .cabinet { margin-right: 10px; }

/* ---- First-time tips and the 18+ notice (tutorial.js) ---- */
.tut-hidden { display: none !important; }
.tut-ring { position: fixed; z-index: 70; border-radius: 18px; pointer-events: none; border: 3px solid #fde047;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 18px #fde047; animation: tutPulse 1.1s ease-in-out infinite alternate; }
@keyframes tutPulse { to { box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 32px #fde047; transform: scale(1.03); } }
.tut-tip { position: fixed; left: 16px; right: 16px; z-index: 71; padding: 12px 14px; border-radius: 14px; pointer-events: none;
  background: #fffbe6; color: #2a1650; font: 600 15px/1.35 system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: tutIn .35s ease-out; }
.tut-tip small { display: block; margin-top: 6px; font-size: 11px; opacity: .6; }
.tut-tip::before { content: ''; position: absolute; left: var(--arrow-x); width: 0; height: 0; border: 12px solid transparent; }
.tut-tip.below::before { top: -22px; border-bottom-color: #fffbe6; }
.tut-tip.above::before { bottom: -22px; border-top-color: #fffbe6; }
@keyframes tutIn { from { opacity: 0; transform: translateY(8px); } }
.age-gate { text-align: center; font-family: system-ui, sans-serif; }
.age-gate .ag-icon { font-size: 54px; }
.age-gate p { line-height: 1.45; }

/* jackpot ticker: another player's hit slides across above the pots */
#jpTicker { position: relative; height: 0; overflow: visible; pointer-events: none; }
#jpTicker span { position: absolute; left: 50%; top: -6px; white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.75); border: 1px solid var(--gold); color: #fff; opacity: 0; transform: translateX(-50%); }
#jpTicker.show span { animation: jpTick 5.5s ease-in-out; }
#jpTicker b.major { color: #fb7185; } #jpTicker b.minor { color: #67e8f9; }
@keyframes jpTick { 0% { opacity: 0; transform: translate(60%, 0); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-160%, 0); } }
.rec-code { font-family: monospace; font-size: 16px; letter-spacing: 1px; color: var(--gold); user-select: all; }

.wild-word.bonus-word { font-size: .32em; letter-spacing: 0; }   /* BONUS is one letter longer than WILD */
.cell.t-scatter { flex-direction: column; }                       /* gift above the BONUS label, like WILD */
.cell.t-scatter .sym { font-size: .5em; margin-bottom: -2px; }
/* small phones: give the header a little more room so LVL and the gear don't overlap */
@media (max-width: 380px) {
  #hud { gap: 4px; }
  #hud .level-box { max-width: 136px; flex: 0 1 136px; }
  .level-label { font-size: 12px; letter-spacing: 0; gap: 2px; }
  .status-chip { letter-spacing: 0; margin-left: 2px; }
  .status-chip { font-size: 9px; padding: 1px 5px; }
  .pill.coins { flex: 1 1 auto; }
  .gear-btn { width: 32px; height: 32px; font-size: 16px; }
  .pill.coins { padding-left: 8px; padding-right: 10px; }
}