:root { --ls-bg: #080617; --ls-panel: rgba(22, 18, 52, .82); --ls-panel-strong: rgba(18, 14, 44, .96); --ls-gold: #ffd35a; --ls-gold-dark: #b56b00; --ls-blue: #00c9ff; --ls-purple: #a020f0; --ls-pink: #ff2d95; --ls-green: #57e389; --ls-red: #ff3f5f; --ls-text: #fff8e8; --ls-muted: #b9b2d8; --ls-radius: 28px; --ls-shadow: 0 30px 80px rgba(0,0,0,.42);
    /* "Vegas Nights" (default/balanced machine) palette - neon lights, gold trim. Overridden per
       [data-theme] below so selecting a different machine actually recolors it, not just moves a
       selection highlight. */
    --ls-machine-grad-1: #c2185b; --ls-machine-grad-2: #4a0e6b; --ls-machine-grad-3: #100720;
    --ls-slot-border: #f5bd3a;
    --ls-reel-grad-1: #fff7e7; --ls-reel-grad-2: #f2d7ab; --ls-reel-grad-3: #fff2dc; --ls-reel-border: #c47c16;
    --ls-btn-grad-1: #00c9ff; --ls-btn-grad-2: #0066ff;
    /* Classic 3-row layout. --ls-row-scale shrinks each symbol cell proportionally on machines
       with more rows (see [data-theme="pirate"/"space"] below) so .reel's overall height (symbol
       height * row count, computed via calc() wherever .reel/.symbol are sized) stays roughly the
       same across every machine instead of ballooning taller the more rows it has. */
    --ls-rows: 3; --ls-row-scale: 1;
}

#page-help-btn, #go-to-top { display: none !important; }
#btnStandaloneApp { cursor: pointer; display: inline-block; float: left; font-size: 12px; margin-top: 15px; line-height: 18px; color: #FFF; padding: 5px 10px; text-decoration: none; margin-right: 3px; margin-left: 3px; font-size: 12px; border-radius: 15px; background-color: transparent; transition: all .2s ease-in-out; box-shadow: rgba(0, 0, 0, 0.0) 0 0 0; }
    #btnStandaloneApp:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.1); background-color: var(--link-hover-background-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important; }
    #btnStandaloneApp:active { transform: scale(0.9); }
    #btnStandaloneApp[data-type="browser"]::before { content: ""; display: inline-block; float: left; margin-right: 5px; width: 18px; height: 18px; background-image: url(../../Assets/icons/desktopview.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
    #btnStandaloneApp[data-type="app"]::before { content: ""; display: inline-block; float: left; margin-right: 5px; width: 18px; height: 18px; background-image: url(../../Assets/icons/appview.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }

#backToGameListBtn { cursor: pointer; text-decoration: none !important; display: inline-block; user-select: none; font-weight: bold; line-height: 18px; padding: 8px 18px; margin-bottom: 14px; font-size: 13px; border-radius: 20px; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); color: #766BFF; color: var(--input-button-background-color); background-color: transparent; transition: all .2s ease-in-out; }
    #backToGameListBtn:hover { background-color: #766BFF; background-color: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); box-shadow: 0 4px 12px rgba(118,107,255,0.35); }
    #backToGameListBtn:active { transform: scale(0.95); }
    #backToGameListBtn::before { content: ""; display: inline-block; float: left; background-image: url(../../Assets/icons/back.png); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-top: 2px; margin-right: 5px; width: 14px; height: 14px; filter: var(--formcontrol-field-image-filter); transition: filter .2s ease-in-out; }
    #backToGameListBtn:hover::before, #backToGameListBtn:active::before { filter: grayscale(1) invert(1) brightness(100); }

/* Pirate Gold - weathered brass/gold over deep teal, aged-parchment reels. --ls-purple/pink/blue
   also get overridden here since the avatar ring, XP bar, and background orbs all sit on those
   three variables - without this they'd stay royal-purple/pink/blue regardless of theme. */
.ls-app[data-theme="pirate"] {
    --ls-gold: #f0b429; --ls-panel: rgba(8, 34, 36, .84);
    --ls-machine-grad-1: #0b4a4a; --ls-machine-grad-2: #0a2e3d; --ls-machine-grad-3: #051620;
    --ls-slot-border: #d9a441;
    --ls-reel-grad-1: #f3e3c3; --ls-reel-grad-2: #d9bd8a; --ls-reel-grad-3: #f3e3c3; --ls-reel-border: #7a5a2e;
    --ls-btn-grad-1: #14919b; --ls-btn-grad-2: #0b5e66;
    --ls-purple: #0e7d7d; --ls-pink: #f0b429; --ls-blue: #2dd4bf;
    --ls-rows: 4; --ls-row-scale: .755;
}

/* Galaxy Gems - neon cyan over deep cosmic violet, crystalline reels, sci-fi glow. */
.ls-app[data-theme="space"] {
    --ls-gold: #67e8f9; --ls-panel: rgba(18, 10, 46, .84);
    --ls-machine-grad-1: #1a0b4d; --ls-machine-grad-2: #0d0630; --ls-machine-grad-3: #030110;
    --ls-slot-border: #7dd3fc;
    --ls-reel-grad-1: #ded9ff; --ls-reel-grad-2: #a79fe0; --ls-reel-grad-3: #ded9ff; --ls-reel-border: #6d5ee0;
    --ls-btn-grad-1: #a020f0; --ls-btn-grad-2: #5b0ea8;
    --ls-purple: #7c3aed; --ls-pink: #e879f9; --ls-blue: #22d3ee;
    --ls-rows: 5; --ls-row-scale: .612;
}

/* Ancient Egypt - sand and pyramids, antique gold and turquoise. */
.ls-app[data-theme="egypt"] {
    --ls-gold: #d4a531; --ls-panel: rgba(58, 41, 20, .84);
    --ls-machine-grad-1: #8a5a2b; --ls-machine-grad-2: #5c3a1a; --ls-machine-grad-3: #2b1a0a;
    --ls-slot-border: #c9962f;
    --ls-reel-grad-1: #f0e0b8; --ls-reel-grad-2: #d9b878; --ls-reel-grad-3: #f0e0b8; --ls-reel-border: #8a5a2b;
    --ls-btn-grad-1: #1a8a8a; --ls-btn-grad-2: #0d5555;
    --ls-purple: #b8622f; --ls-pink: #e0a878; --ls-blue: #2dd4bf;
}

/* Lucky Charms - green and gold, the brightest/most cheerful of the five. */
.ls-app[data-theme="lucky"] {
    --ls-gold: #ffd700; --ls-panel: rgba(10, 40, 18, .84);
    --ls-machine-grad-1: #0d5c2e; --ls-machine-grad-2: #0a3d1f; --ls-machine-grad-3: #041a0d;
    --ls-slot-border: #ffd700;
    --ls-reel-grad-1: #fff4d6; --ls-reel-grad-2: #f0d888; --ls-reel-grad-3: #fff4d6; --ls-reel-border: #b8860b;
    --ls-btn-grad-1: #22c55e; --ls-btn-grad-2: #15803d;
    --ls-purple: #16a34a; --ls-pink: #ffd700; --ls-blue: #84cc16;
}
#main-container .inner-container { max-width: 100% !important; padding-top: 0px !important; padding-left: 0px !important; padding-right: 0px !important; }

/* container-type makes .ls-shell's breakpoints below respond to how wide .ls-app is actually
   rendered, not the browser viewport - needed because this view renders two very different
   ways: full viewport width in the standalone .app SPA layout, but squeezed into the site's
   ~800px max-width content column (see #main-container .inner-container in Site.css) in the
   normal embedded layout. A viewport-based @media query would never see that second, narrower
   case and would keep trying to lay out a 3-column desktop grid that doesn't fit. */
.ls-app { container-type: inline-size; min-height: 100vh; position: relative; overflow: hidden; color: var(--ls-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Above the machine/cards (z-index 2-3) so coin bursts render over the game instead of behind
   it, but below the reward modal (z-index 10) so that still sits on top of any residual burst. */
.ls-particles { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

.ls-bg-orb { position: absolute; width: 320px; height: 320px; border-radius: 999px; filter: blur(38px); opacity: .35; z-index: 0; animation: floatOrb 9s ease-in-out infinite; }
.orb-a { background: var(--ls-purple); left: -80px; top: 160px; }
.orb-b { background: var(--ls-pink); right: -120px; top: 180px; animation-delay: -2s; }

@keyframes floatOrb {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-28px) scale(1.08); }
}

.ls-topbar { position: relative; z-index: 2; padding: 22px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.ls-brand { display: flex; align-items: center; gap: 14px; }
.ls-brand-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; }
    .ls-brand-icon img { float: left; width: 58px; }
.ls-eyebrow { font-size: 12px; color: var(--ls-muted); text-transform: uppercase; letter-spacing: .16em; }
.ls-brand h1 { margin: 0; color: var(--body-text-color); font-size: clamp(28px, 4vw, 44px); line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.32); }

.ls-wallet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.wallet-pill { min-width: auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ls-panel); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
    .wallet-pill strong { font-size: 18px; }

/* max-width + centering keeps the 3 columns close together now that #main-container's own width
   cap is overridden for this page (see the full-bleed rule above) - without it the 270px side
   panels end up stranded far from the (still 820px-capped) slot machine on a wide monitor. */
.ls-shell { position: relative; z-index: 2; display: grid; grid-template-columns: 270px minmax(360px, 1fr) 270px; gap: 20px; max-width: 1440px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 38px) 34px; align-items: start; }

.ls-card { background: var(--ls-panel); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(16px); margin-bottom: 14px; }

.profile-card { text-align: center; }
.avatar-ring { width: 82px; height: 82px; margin: 0 auto 10px; border-radius: 999px; padding: 4px; background: conic-gradient(from 90deg, var(--ls-gold), var(--ls-pink), var(--ls-blue), var(--ls-gold)); }
.avatar { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; font-size: 38px; background: #171237; }
.profile-card h2 { margin: 0 0 12px; font-size: 20px; }
.xp-row { display: flex; justify-content: space-between; color: var(--ls-muted); font-size: 13px; margin-bottom: 6px; }
.xp-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ls-blue), var(--ls-purple), var(--ls-pink)); border-radius: inherit; transition: width .35s ease; }

.card-title { font-weight: 900; font-size: 16px; margin-bottom: 12px; letter-spacing: .02em; }
.reward-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.reward-day, .theme-tile, .booster, .ls-mini-btn { border: 0; color: var(--ls-text); cursor: pointer; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.reward-day { padding: 10px; font-weight: 700; }
    .reward-day.active { background: linear-gradient(145deg, #ffb927, #ff6c1a); }
    .reward-day.gem { background: linear-gradient(145deg, #37c9ff, #8d4dff); }
.ls-mini-btn { width: 100%; padding: 12px; font-weight: 900; background: linear-gradient(145deg, #57e389, #179c57); }

.mission { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); color: var(--ls-muted); }
    .mission:first-of-type { border-top: 0; }
    .mission b { color: var(--ls-gold); }

.slot-stage { min-width: 0; }
.machine-top { position: relative; text-align: center; margin: 0 auto -12px; max-width: 720px; padding: 18px 24px 16px; border-radius: 34px 34px 18px 18px; background: linear-gradient(145deg, var(--ls-machine-grad-1), var(--ls-machine-grad-2) 55%, var(--ls-machine-grad-3)); border: 4px solid var(--ls-gold); box-shadow: var(--ls-shadow), inset 0 2px 0 rgba(255,255,255,.24); overflow: hidden; z-index: 2; }
.marquee-lights { position: absolute; inset: 8px 20px auto; height: 10px; background: repeating-linear-gradient(90deg, var(--ls-gold) 0 10px, transparent 10px 24px); filter: drop-shadow(0 0 8px var(--ls-gold)); opacity: .9; }
.machine-help-btn { position: absolute; top: 45px; right: 14px; z-index: 4; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--ls-gold); background: rgba(0,0,0,.35); color: var(--ls-gold); font-weight: 900; font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, filter .12s ease; }
    .machine-help-btn:hover { transform: scale(1.1); filter: brightness(1.2); }
.crown { font-size: 34px; margin-top: 8px; }
.machine-title { font-size: clamp(30px, 5vw, 64px); margin-top: 10px; line-height: .9; font-weight: 1000; letter-spacing: .05em; color: var(--ls-gold); text-shadow: 0 5px 0 #7a3200, 0 0 26px rgba(255,211,90,.55); }
.jackpot-bar { margin-top: 25px; font-weight: 900; color: #fff; }
    .jackpot-bar span { color: var(--ls-gold); }

.slot-machine { max-width: 820px; margin: 0 auto; padding: 30px clamp(14px, 3vw, 30px) 26px; border-radius: 36px; background: var(--ls-panel); backdrop-filter: blur(10px); border: 4px solid var(--ls-slot-border); /*box-shadow: var(--ls-shadow), inset 0 0 0 2px rgba(255,255,255,.08);*/ }
.machine-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.hud-box { padding: 10px; border-radius: 16px; text-align: center; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.12); }
    .hud-box span { display: block; color: var(--ls-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
    .hud-box strong { font-size: 23px; color: var(--ls-gold); }

.reel-window { position: relative; padding: 18px; border-radius: 26px; background: linear-gradient(145deg, #110d2e, #060512); border: 3px solid rgba(255,211,90,.85); overflow: hidden; box-shadow: inset 0 0 24px rgba(0,0,0,.72); }
.reels { display: grid; user-select: none !important; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; z-index: 2; }
/* Height is symbol-height * row-count, both driven by --ls-rows/--ls-row-scale (see :root and the
   per-[data-theme] blocks above) - Pirate (4 rows) and Space (5 rows) get taller reels made of
   proportionally smaller symbols, so the machine's overall height stays close to the 3-row
   machines' instead of ballooning, while still fitting more rows on screen. */
.reel { height: calc(98px * var(--ls-row-scale) * var(--ls-rows)); border-radius: 20px; overflow: hidden; }
.reel-strip { transform: translateY(0); transition: transform 1.15s cubic-bezier(.12,.85,.16,1); }
.symbol { height: calc(98px * var(--ls-row-scale)); display: grid; place-items: center; font-size: calc(clamp(34px, 5vw, 65px) * var(--ls-row-scale)); text-shadow: 0 5px 6px rgba(0,0,0,.22); }
    .symbol.win { animation: symbolPop .6s ease infinite alternate; }
    .symbol img { width: 35%; }

#luckySlotsApp[data-theme="vegas"] .reel { background: rgba(0, 0, 47, 0.2); backdrop-filter: blur(5px); border: 3px solid var(--ls-reel-border); box-shadow: inset 0 10px 24px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.3); }
#luckySlotsApp[data-theme="pirate"] .reel { background: linear-gradient(180deg, #566482, #858eda 45%, #80bf80); border: 3px solid var(--ls-reel-border); box-shadow: inset 0 10px 24px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.3); height: calc(120px * var(--ls-row-scale) * var(--ls-rows)); }
#luckySlotsApp[data-theme="pirate"] .symbol { height: calc(120px * var(--ls-row-scale)); }
#luckySlotsApp[data-theme="lucky"] .reel { background: rgba(70, 119, 47, 0.5); backdrop-filter: blur(5px); border: 3px solid var(--ls-reel-border); box-shadow: inset 0 10px 24px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.3); }
#luckySlotsApp[data-theme="space"] .reel { height: calc(135px * var(--ls-row-scale) * var(--ls-rows)); }
#luckySlotsApp[data-theme="space"] .symbol { height: calc(135px * var(--ls-row-scale)); }

#luckySlotsApp[data-theme="vegas"] .reel-window, #luckySlotsApp[data-theme="vegas"] .machine-top { background-image: url(../../Assets/Games/Images/vegas-nights.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#luckySlotsApp[data-theme="pirate"] .reel-window, #luckySlotsApp[data-theme="pirate"] .machine-top { background-image: url(../../Assets/Games/Images/pirate.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#luckySlotsApp[data-theme="egypt"] .reel-window, #luckySlotsApp[data-theme="egypt"] .machine-top { background-image: url(../../Assets/Games/Images/ancient-egypt.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#luckySlotsApp[data-theme="lucky"] .reel-window, #luckySlotsApp[data-theme="lucky"] .machine-top { background-image: url(../../Assets/Games/Images/lucky.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#luckySlotsApp[data-theme="space"] .reel-window, #luckySlotsApp[data-theme="space"] .machine-top { background-image: url(../../Assets/Games/Images/space.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }

@keyframes symbolPop { from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.13); filter: brightness(1.25) drop-shadow(0 0 10px gold); }
}

.payline { position: absolute; left: 20px; right: 20px; height: 4px; border-radius: 999px; z-index: 3; opacity: 0; background: linear-gradient(90deg, transparent, #fff, var(--ls-gold), #fff, transparent); box-shadow: 0 0 14px var(--ls-gold); }
/* .payline-1 (the "middle" flash bar) is always exactly 50% by symmetry regardless of row count -
   .reel-window's padding is the same on top and bottom, so the box's midpoint never moves. The
   top/bottom bars aren't that simple though: they were hardcoded to 23%/76%, which only ever
   approximately matched where the actual top/bottom symbol row sits (row-window padding is a
   fixed 18px while the row itself is ~98px, so the top row's real center is ~20.3% down, not
   23%) - and got further off once Pirate/Space introduced different row counts and per-theme
   symbol scale (--ls-row-scale) on top of that fixed padding. Deriving top/bottom from the same
   padding+symbol-height math .reel/.symbol are sized with keeps them aligned to the real edge
   rows on every machine instead of a single guessed percentage for all of them. */
.payline-1 { top: 50%; }
.payline-2 { top: calc((18 + 98 * var(--ls-row-scale) / 2) / (36 + var(--ls-rows) * 98 * var(--ls-row-scale)) * 100%); transform: rotate(8deg); }
.payline-3 { top: calc(100% - (18 + 98 * var(--ls-row-scale) / 2) / (36 + var(--ls-rows) * 98 * var(--ls-row-scale)) * 100%); transform: rotate(-8deg); }
.payline.active { animation: flashLine .55s ease-in-out 4; }

@keyframes flashLine {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}

.message-banner { margin: 16px 0; min-height: 48px; border-radius: 18px; display: grid; place-items: center; text-align: center; font-weight: 900; padding: 10px 16px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.12); color: var(--ls-gold); text-shadow: 0 0 12px rgba(255,211,90,.25); }
.controls { display: grid; grid-template-columns: 1fr 1.35fr 1fr .8fr .8fr; gap: 10px; }
.control-btn, .spin-btn { border: 0; border-radius: 18px; cursor: pointer; color: white; font-weight: 1000; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 10px 0 rgba(0,0,0,.28), 0 18px 30px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.3); transition: transform .12s ease, filter .12s ease; }
.control-btn { padding: 16px 10px; background: linear-gradient(145deg, var(--ls-btn-grad-1), var(--ls-btn-grad-2)); }
    .control-btn.ghost { background: linear-gradient(145deg, #7c51ff, #4121a4); }
    .control-btn.muted { background: linear-gradient(145deg, #5a5a6e, #33333f); opacity: .75; }
.spin-btn { position: relative; overflow: hidden; padding: 18px 10px; background: linear-gradient(145deg, #ff3232, #c9052f); font-size: 26px; }
    .spin-btn.small { font-size: 16px; padding: 14px 26px; }
    .spin-btn > span { position: relative; z-index: 1; }
    /* Shown while auto spin is engaged (see toggleAutoSpin() in JS) - replaces the old separate
       Auto/Stop button as the only visual cue that spins are now repeating on their own. */
    .spin-btn.auto-active { cursor: pointer !important; background: linear-gradient(145deg, #57e389, #179c57); animation: autoSpinPulse 1.1s ease-in-out infinite; }
    /* Wind-up cue while the spin button is held but auto spin hasn't kicked in yet - a light fill
       sweeps left-to-right over SPIN_HOLD_MS (see bindSpinHold() in JS, which also sets
       --spin-charge-ms so this animation's duration always matches the actual hold threshold
       instead of an independently-guessed number). Released early, the class comes off and the
       fill just disappears with it - reaching the end visually hands off to .auto-active. */
    .spin-btn.charging::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,.4); transform: scaleX(0); transform-origin: left; animation: spinCharge var(--spin-charge-ms, 450ms) linear forwards; }
    .control-btn:hover, .spin-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
    .control-btn:active, .spin-btn:active { transform: translateY(5px); box-shadow: 0 5px 0 rgba(0,0,0,.28), 0 10px 20px rgba(0,0,0,.22); }
button:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

.theme-tile, .booster { width: 100%; margin-bottom: 8px; padding: 12px; display: grid; grid-template-columns: 36px 1fr; align-items: center; text-align: left; gap: 10px; }
    .theme-tile span, .booster span { font-size: 28px; float: left; }
    .theme-tile small, .booster small { color: var(--ls-muted); margin-top: 1px; display: block; clear: both; }
    .theme-tile.selected { background: linear-gradient(145deg, rgba(255,211,90,.28), rgba(255,122,24,.2)); border-color: rgba(255,211,90,.7); }
    .theme-tile.locked { opacity: .6; }
.booster { background: linear-gradient(145deg, rgba(77,141,255,.22), rgba(141,77,255,.2)); }
.achievements { display: grid; gap: 8px; }
.achievement { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.08); color: var(--ls-muted); display: flex; justify-content: space-between; gap: 10px; }
    .achievement.done { color: white; background: rgba(87,227,137,.18); border: 1px solid rgba(87,227,137,.35); }

#coinsText:before { content: "$"; display: inline-block; margin-right: 2px; }
.hidden { display: none !important; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); }
    .modal-backdrop.hidden { display: none; }
.reward-modal { max-width: 80%; text-align: center; padding: 30px; border-radius: 30px; background: linear-gradient(145deg, #25185b, #110b2e); border: 3px solid var(--ls-gold); box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.reward-icon { font-size: 78px; animation: rewardBounce .7s ease infinite alternate; }
.reward-modal h2 { font-size: 34px; margin: 8px 0; color: var(--ls-gold); }
.reward-modal p { color: var(--ls-muted); font-size: 18px; margin-bottom: 10px; }

/* Egypt's Pick-a-Treasure mini-game - a grid of face-down tiles inside the same reward-modal
   shell, each hiding an independent coin value revealed on click (see revealPick() in JS). */
.pick-modal { width: min(480px, 92vw); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 8px; }
.pick-tile { aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--ls-gold); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); color: var(--ls-text); font-size: 30px; display: grid; place-items: center; position: relative; cursor: pointer; transition: transform .12s ease, filter .12s ease; }
    .pick-tile:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.15); }
    .pick-tile:disabled { cursor: not-allowed; }
    .pick-tile.revealed { border-color: rgba(255,255,255,.4); background: linear-gradient(145deg, rgba(255,211,90,.22), rgba(255,122,24,.14)); }
    .pick-tile small { position: absolute; bottom: 6px; font-size: 12px; font-weight: 900; color: var(--ls-gold); }
.pick-total-row { color: var(--ls-muted); font-size: 18px; margin: 6px 0 0; }
    .pick-total-row strong { color: var(--ls-gold); }

/* Per-machine "how to play" modal (openMachineHelp() in JS) - content is rebuilt from whichever
   machine is currently active every time it opens, not static markup. */
.help-modal { width: min(460px, 70vw); text-align: left; max-height: 60vh; overflow-y: auto; }
    .help-modal h2 { text-align: center; }
.help-tagline { text-align: center; font-style: italic; }
.help-section { margin-top: 16px; }
.help-section-title { font-weight: 900; color: var(--ls-gold); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.help-text { color: var(--ls-text); font-size: 15px; margin: 0; }
.help-symbols { display: grid; gap: 6px; }
.help-symbol-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.help-symbol-icon { font-size: 22px; display: grid; place-items: center; }
    .help-symbol-icon img { width: 24px; height: 24px; }
.help-symbol-name { color: var(--ls-text); font-size: 14px; }
.help-symbol-value { color: var(--ls-gold); font-weight: 900; font-size: 14px; }

/* Vegas's Free Spins badge - a small persistent pulsing pill in the machine-top so the player
   knows spins are still queued even between individual spins, not just during "Spinning...". */
.free-spins-badge { margin-top: 8px; display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--ls-gold); color: var(--ls-gold); font-weight: 900; font-size: 13px; animation: freeSpinsPulse 1.4s ease-in-out infinite; }

@keyframes freeSpinsPulse {
    0%,100% { opacity: 1; }
    50% { opacity: .6; }
}

@keyframes autoSpinPulse {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

@keyframes spinCharge {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes rewardBounce {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-8px) scale(1.08); }
}

.shake { animation: shake .35s ease; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (max-width: 1250px) {
    .ls-shell { grid-template-columns: 1fr; }
    .ls-side-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ls-card { margin-bottom: 0; }
}

/* Vertical fit is a separate problem from horizontal fit above: the container-width overrides
   for #main-container don't change the page's actual viewport height, so plain @media queries
   (not @container) are the right tool here - a laptop-height window can still be too short for
   the topbar + machine-top + full 294px reels + controls to all fit without scrolling, even once
   the layout is exactly one column wide. Scale the machine itself down in two tiers instead. */
@media (max-height: 860px) {
    .ls-topbar { padding-top: 14px; padding-bottom: 14px; }
    .ls-card { padding: 12px; margin-bottom: 10px; }
    .machine-top { margin-bottom: -8px; padding: 12px 20px 10px; }
    .jackpot-bar { margin-top: 12px; }
    .slot-machine { padding: 18px clamp(14px, 3vw, 30px) 16px; }
    .machine-hud { margin-bottom: 10px; }
    .reels { gap: 8px; }
    .reel { height: calc(70px * var(--ls-row-scale) * var(--ls-rows)); }
    .symbol { height: calc(70px * var(--ls-row-scale)); font-size: calc(clamp(26px, 4vw, 40px) * var(--ls-row-scale)); }
    .message-banner { margin: 10px 0; min-height: 36px; }
}

@media (max-width: 760px) {
    .ls-topbar { align-items: flex-start; flex-direction: column; }
    .ls-wallet { justify-content: flex-start; }
    .ls-side-panel { grid-template-columns: 1fr; }
    .reels { gap: 6px; }
    .reel { height: calc(70px * var(--ls-row-scale) * var(--ls-rows)); }
    .symbol { height: calc(70px * var(--ls-row-scale)); font-size: calc(34px * var(--ls-row-scale)); }
    .avatar-ring, .profile-card h2 { float: left; }
    .avatar-ring { height: 24px; width: 24px; margin-right: 10px; }
        .avatar-ring .avatar { font-size: 15px; }
    .jackpot-bar { margin-top: 10px; }
    .xp-row { display: block; clear: both; }
    .control-btn, .spin-btn, .wallet-pill strong, .hud-box strong { font-size: 14px; }
    .control-btn, .spin-btn { max-height: 42px; padding: 12px 10px; }
    #betDownBtn span, #betUpBtn span { display: none; }
    #betDownBtn::before, #betUpBtn::before { content: ""; display: block; clear: both; font-size: 20px; line-height: 20px; }
    #betDownBtn::before { content: "-"; }
    #betUpBtn::before { content: "+"; }
}

@media (max-height: 680px) {
    .ls-topbar { padding-top: 8px; padding-bottom: 8px; }
    .ls-card { padding: 10px; }
    .machine-top { padding: 8px 16px 6px; }
    .jackpot-bar { margin-top: 6px; }
    .free-spins-badge { margin-top: 4px; }
    .reels { gap: 5px; }
    .reel { height: calc(55px * var(--ls-row-scale) * var(--ls-rows)) !important; }
    .symbol { height: calc(55px * var(--ls-row-scale)) !important; font-size: calc(26px * var(--ls-row-scale)); }
    .message-banner { margin: 6px 0; min-height: 30px; }
    .controls { gap: 6px; }
    .control-btn, .spin-btn { padding-top: 10px; padding-bottom: 10px; }
}

/* Below ~460px of actual available width (e.g. embedded in the site's content column on a
   phone), even a single-column layout is still too wide for the fixed 5-reel/820px-authored
   slot machine - shrink its own internal spacing instead of letting reels get clipped. */
@media (max-width: 460px) {
    .machine-top { padding: 14px 12px 12px; border-radius: 24px 24px 14px 14px; }
    .slot-machine { padding: 18px 8px 18px; border-radius: 24px; }
    .reel-window { padding: 10px; }
    .reels { gap: 4px; }
    .reel { height: calc(50px * var(--ls-row-scale) * var(--ls-rows)); }
    .symbol { height: calc(50px * var(--ls-row-scale)); font-size: calc(22px * var(--ls-row-scale)); }
}