#loading-overlay { position: fixed; inset: 0; background: #0b0f17; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999} .loading-spinner { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #ffd700; border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 10px} .loading-text { color: #e5e7eb; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: 0.04em; opacity: 0.9} @keyframes spin { to { transform: rotate(360deg)} } :root { --casino-gold-primary: #FFD700; --casino-gold-secondary: #DAA520; --casino-gold-tertiary: #B8860B; --casino-gold-dark: #8B6914; --btn-surface-base: #1a0f08; --btn-surface-mid: #2a1810; --btn-surface-dark: #0f0704; --bezel-gold: #8f6b2f; --bezel-highlight: #ffd54d; --bezel-shadow: #5a431f; --bezel-rim-light: rgba(255, 255, 255, 0.12); --bezel-rim-shadow: rgba(0, 0, 0, 0.35); --led-amber: rgba(255, 215, 0, 0.45); --led-blue: rgba(115, 167, 255, 0.35); --led-red: rgba(255, 109, 109, 0.35); --led-green: rgba(76, 175, 80, 0.35); --led-off: rgba(51, 0, 0, 0.6); --text-primary: #ffe085; --text-secondary: #e3f2ff; --text-danger: #ffebeb; --text-success: #f0fff0; --text-disabled: rgba(255, 224, 133, 0.65); --shadow-low: rgba(0, 0, 0, 0.55); --shadow-medium: rgba(0, 0, 0, 0.65); --shadow-high: rgba(0, 0, 0, 0.75); --glow-primary: rgba(255, 215, 0, 0.45); --glow-secondary: rgba(115, 167, 255, 0.35); --font-primary: "Arial Black", system-ui, sans-serif; --font-display: "Impact", "Arial Black", sans-serif; --font-size-small: 12px; --font-size-base: 15px; --font-size-large: 18px; --font-size-display: clamp(20px, 4vw, 36px); --letter-spacing-tight: 0.04em; --letter-spacing-normal: 0.08em; --letter-spacing-wide: 0.14em; --hit-target-min: 44px; --hit-target-large: 56px; --hit-target-mega: 64px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --radius-small: 8px; --radius-medium: 12px; --radius-large: 16px; --radius-xl: 20px; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 300ms; --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1); --elevation-button: 0 6px 18px var(--shadow-low); --elevation-button-hover: 0 8px 24px var(--shadow-medium); --elevation-button-active: 0 3px 12px var(--shadow-medium); --elevation-panel: 0 10px 28px var(--shadow-medium); --elevation-modal: 0 16px 40px var(--shadow-high)} .casino-button { display: inline-grid; place-items: center; position: relative; isolation: isolate; min-width: var(--hit-target-min); min-height: var(--hit-target-min); padding: var(--spacing-md) var(--spacing-xl); font: 800 var(--font-size-base)/1 var(--font-primary); letter-spacing: var(--letter-spacing-normal); text-transform: uppercase; color: var(--text-primary); text-align: center; background: linear-gradient(145deg, var(--btn-surface-mid) 0%, var(--btn-surface-base) 50%, var(--btn-surface-dark) 100%); border-radius: var(--radius-medium); border: 2px solid transparent; background-clip: padding-box; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 10px var(--led-amber); box-shadow: var(--elevation-button), 0 0 0 2px rgba(255, 215, 0, 0.28) inset, 0 -2px 0 rgba(0, 0, 0, 0.35) inset; cursor: pointer; user-select: none; touch-action: manipulation; transition: transform var(--duration-normal) var(--easing-standard), box-shadow var(--duration-normal) var(--easing-standard), filter var(--duration-normal) var(--easing-standard); will-change: transform, filter} .casino-button::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: calc(var(--radius-medium) + 4px); background: conic-gradient(from 0deg, transparent 0 45deg, var(--bezel-highlight) 45deg 90deg, transparent 90deg 180deg, var(--bezel-highlight) 180deg 225deg, transparent 225deg 360deg); filter: blur(0.4px); animation: led-rotate 3s linear infinite} .casino-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 140% at 20% 10%, var(--bezel-rim-light), transparent 60%), radial-gradient(120% 140% at 80% 90%, var(--bezel-rim-shadow), transparent 60%), conic-gradient(from 220deg, var(--bezel-shadow), var(--bezel-gold) 20%, var(--bezel-highlight) 25%, var(--bezel-gold) 35%, var(--bezel-shadow) 60%, var(--bezel-gold) 80%, var(--bezel-highlight) 85%, var(--bezel-shadow)); mix-blend-mode: overlay; opacity: 0.65} .casino-button:hover { transform: translateY(-1px); box-shadow: var(--elevation-button-hover), 0 0 0 2px rgba(255, 215, 0, 0.35) inset, 0 -2px 0 rgba(0, 0, 0, 0.35) inset; filter: drop-shadow(0 0 14px var(--glow-primary))} .casino-button:active { transform: translateY(1px); box-shadow: var(--elevation-button-active), 0 3px 10px var(--shadow-medium) inset} .casino-button:focus, .casino-button:focus-visible { outline: none; box-shadow: var(--elevation-button), 0 0 0 3px var(--bezel-highlight), 0 0 16px var(--glow-primary), 0 0 0 6px rgba(255, 215, 0, 0.3); transform: translateY(-1px); position: relative; z-index: 10} .casino-button.focused { box-shadow: var(--elevation-button), 0 0 0 3px var(--bezel-highlight), 0 0 16px var(--glow-primary), 0 0 0 6px rgba(255, 215, 0, 0.3)} input:focus, input:focus-visible, button:focus, button:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { outline: 3px solid var(--casino-gold-primary); outline-offset: 2px; box-shadow: 0 0 0 1px var(--casino-surface-dark), 0 0 8px var(--glow-primary)} .auto-threshold-input:focus { outline: 2px solid var(--casino-gold-primary); outline-offset: 1px; background: rgba(255, 215, 0, 0.1); border-color: var(--casino-gold-primary)} .paytable-button:focus, .paytable-close-button:focus { outline: 2px solid var(--casino-gold-primary); outline-offset: 2px; background: rgba(255, 215, 0, 0.15)} .casino-button.touch-active, .casino-button:active { transform: translateY(2px) scale(0.98); filter: brightness(1.1)} @media (prefers-contrast: high) { .casino-button:focus, .casino-button:focus-visible { outline: 4px solid #ffffff; outline-offset: 2px} :root { --text-disabled: rgba(255, 224, 133, 0.8)} } @media (prefers-reduced-motion: reduce) { .casino-button { transition: none} .casino-button:hover, .casino-button:focus { transform: none} } .focus-trap-active { position: relative} .focus-trap-active::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; pointer-events: none} .skip-link { position: absolute; top: -40px; left: 6px; background: var(--casino-gold-primary); color: var(--btn-surface-dark); padding: 8px; text-decoration: none; border-radius: 4px; z-index: 1000; font-weight: bold} .skip-link:focus { top: 6px} .casino-button:disabled, .casino-button[aria-disabled="true"] { opacity: 0.48; pointer-events: none; filter: none; text-shadow: none; color: var(--text-disabled)} .casino-button--primary { --text-color: #ffec9d; --bezel-color: #a97b32; --bezel-hi: #ffd54d; --bezel-lo: #6c5123; color: var(--text-color); filter: drop-shadow(0 0 14px var(--glow-primary))} .casino-button--secondary { --text-color: #d1e7ff; --bezel-color: #2e5aa6; --bezel-hi: #73a7ff; --bezel-lo: #1a2d52; color: var(--text-color); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 10px var(--led-blue)} .casino-button--danger { --text-color: #ffe1e1; --bezel-color: #8a2a2a; --bezel-hi: #ff6d6d; --bezel-lo: #461616; color: var(--text-color); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 10px var(--led-red)} .casino-button--large { min-width: var(--hit-target-large); min-height: var(--hit-target-large); padding: var(--spacing-lg) var(--spacing-xl); font-size: var(--font-size-large); letter-spacing: var(--letter-spacing-wide)} .casino-button--mega { min-width: var(--hit-target-mega); min-height: var(--hit-target-mega); padding: var(--spacing-xl) calc(var(--spacing-xl) * 1.5); font: 900 var(--font-size-display)/1 var(--font-display); letter-spacing: var(--letter-spacing-wide); box-shadow: 0 8px 32px var(--shadow-high), 0 0 0 3px rgba(255, 215, 0, 0.4) inset, 0 -3px 0 rgba(0, 0, 0, 0.5) inset} .casino-button--mega::before { inset: -6px; animation-duration: 2s} .progressive-meter { display: grid; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-medium); background: radial-gradient(120% 150% at 10% 0%, rgba(255, 215, 0, 0.15), transparent 40%), linear-gradient(135deg, #0d0906, #1a0f08); box-shadow: var(--elevation-panel), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; position: relative; overflow: hidden} .progressive-meter__label { font: 700 var(--font-size-small)/1 var(--font-primary); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: #ffefb5; opacity: 0.9} .progressive-meter__value { font: 900 var(--font-size-display)/1 var(--font-display); letter-spacing: var(--letter-spacing-tight); color: #fff8d6; text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 215, 0, 0.5)} .bet-panel { --panel-gap: var(--spacing-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center; gap: var(--panel-gap); padding: var(--spacing-lg); border-radius: var(--radius-large); background: linear-gradient(180deg, #0c0704, #120b07); box-shadow: var(--elevation-panel), 0 0 0 1px rgba(255, 255, 255, 0.06) inset} .bet-control { display: grid; gap: var(--spacing-sm); grid-template-rows: auto auto} .bet-control__label { font: 700 var(--font-size-small)/1.2 var(--font-primary); letter-spacing: var(--letter-spacing-tight); color: #f0e3b8; text-transform: uppercase} .bet-control__input-group { display: grid; grid-template-columns: auto minmax(68px, 96px) auto; gap: var(--spacing-sm); align-items: center} .bet-control__input { width: 100%; height: var(--hit-target-min); text-align: center; font: 700 var(--font-size-base)/1.1 system-ui, sans-serif; letter-spacing: var(--letter-spacing-tight); color: #fdfbf5; background: #0b0705; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-small); padding: 0 var(--spacing-sm)} .bet-control__input:focus { outline: 2px solid var(--bezel-highlight); outline-offset: 1px; border-color: var(--bezel-highlight)} .bet-total { grid-column: 1 / -1; justify-self: center; font: 700 var(--font-size-large)/1.1 system-ui, sans-serif; color: #ffeaa0; text-align: center} @keyframes led-rotate { to { transform: rotate(360deg)} } @keyframes meter-sparkle { 0%, 100% { opacity: 0; transform: scale(0.8)} 50% { opacity: 1; transform: scale(1.2)} } @media (prefers-reduced-motion: reduce) { .casino-button::before { animation: none} * { animation-duration: 0.001s !important; transition-duration: 0.001s !important} } @media (forced-colors: active) { .casino-button { border: 1px solid CanvasText; text-shadow: none; box-shadow: none} .progressive-meter { box-shadow: none; border: 1px solid CanvasText} } @media (max-width: 720px) { .bet-panel { grid-template-columns: repeat(2, minmax(0, 1fr))} .bet-total { grid-column: span 2; justify-self: start} :root { --hit-target-min: 48px; --hit-target-large: 56px; --hit-target-mega: 64px} } @media (min-resolution: 2dppx) { .casino-button::before { filter: blur(0.2px)} } @media (hover: none) and (pointer: coarse) { .casino-button:hover { transform: none; filter: none} .casino-button:active { transform: scale(0.98)} } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .casino-button-deck { display: grid; gap: var(--spacing-xl); padding: var(--spacing-xl); border-radius: var(--radius-large); background: linear-gradient(135deg, #0c0704 0%, #120b07 50%, #0c0704 100%), radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.02), transparent 50%); box-shadow: var(--elevation-panel), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; position: relative; transform: perspective(1000px) rotateX(2deg); transform-style: preserve-3d} @media (min-width: 1024px) { .casino-button-deck { grid-template-areas: "bet-panel bet-panel primary-controls primary-controls service-controls" "progressive-bank progressive-bank progressive-bank progressive-bank progressive-bank"; grid-template-columns: repeat(5, 1fr); max-width: 1200px; margin: 0 auto} } @media (min-width: 768px) and (max-width: 1023px) { .casino-button-deck { grid-template-areas: "bet-panel bet-panel" "primary-controls service-controls" "progressive-bank progressive-bank"; grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto} } @media (max-width: 767px) { .casino-button-deck { grid-template-areas: "bet-panel" "primary-controls" "service-controls" "progressive-bank"; grid-template-columns: 1fr; transform: none; gap: var(--spacing-lg); padding: var(--spacing-lg)} } .bet-panel { grid-area: bet-panel} .primary-controls { grid-area: primary-controls} .service-controls { grid-area: service-controls} .progressive-bank { grid-area: progressive-bank} .bet-panel { display: grid; gap: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-medium); background: linear-gradient(145deg, #0f0805 0%, #1a0f08 50%, #0b0603 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.1) inset} @media (min-width: 1024px) { .bet-panel { grid-template-columns: repeat(3, 1fr); align-items: center} .bet-total { grid-column: span 3; justify-self: center} } @media (min-width: 768px) and (max-width: 1023px) { .bet-panel { grid-template-columns: repeat(2, 1fr); align-items: start} .bet-total { grid-column: span 2; justify-self: center} } @media (max-width: 767px) { .bet-panel { grid-template-columns: 1fr} .bet-total { grid-column: 1; justify-self: center} } .primary-controls { display: grid; gap: var(--spacing-lg); align-items: center; justify-items: center} @media (min-width: 768px) { .primary-controls { grid-template-columns: 1fr 2fr 1fr} } @media (max-width: 767px) { .primary-controls { grid-template-columns: 1fr; gap: var(--spacing-md)} #mega-spin-button { order: 1; width: 100%; max-width: 280px} } .service-controls { display: grid; gap: var(--spacing-lg); align-items: center} @media (min-width: 768px) { .service-controls { grid-template-columns: 1fr auto} } @media (max-width: 767px) { .service-controls { grid-template-columns: 1fr} } .progressive-bank { display: grid; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-medium); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 215, 0, 0.08), transparent 70%), linear-gradient(135deg, #0a0603, #150c08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.15) inset} @media (min-width: 1024px) { .progressive-bank { grid-template-columns: repeat(4, 1fr)} } @media (min-width: 768px) and (max-width: 1023px) { .progressive-bank { grid-template-columns: repeat(2, 1fr)} } @media (max-width: 767px) { .progressive-bank { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm)} } .progressive-meter { display: grid; gap: var(--spacing-xs); padding: var(--spacing-md); border-radius: var(--radius-small); background: radial-gradient(circle at 30% 0%, rgba(255, 215, 0, 0.12), transparent 60%), linear-gradient(145deg, #0d0906, #1a0f0a); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; text-align: center; position: relative; overflow: hidden} .progressive-meter::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1) 50%, transparent); transition: left 1s ease-in-out} .progressive-meter.meter-updated::before { left: 100%} .progressive-meter--mini { border-top: 2px solid rgba(255, 215, 0, 0.3)} .progressive-meter--minor { border-top: 2px solid rgba(255, 165, 0, 0.4)} .progressive-meter--major { border-top: 2px solid rgba(255, 140, 0, 0.5)} .progressive-meter--mega { border-top: 2px solid rgba(255, 69, 0, 0.6); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 69, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08) inset} .progressive-meter__label { font: 700 var(--font-size-small)/1 var(--font-primary); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: #fff7d4; opacity: 0.95} .progressive-meter__value { font: 900 clamp(14px, 3vw, 24px)/1 var(--font-display); letter-spacing: var(--letter-spacing-tight); color: #fffcec; text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 215, 0, 0.4)} @media (max-width: 480px) { .progressive-meter__value { font-size: clamp(12px, 4vw, 18px)} } .igt-status-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; padding: 0 10px} .igt-control-panel { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 15px} .igt-button-section { display: flex; justify-content: center; align-items: center; min-height: 100px; padding: 15px} @media (max-width: 768px) { .igt-status-row { flex-direction: column; gap: 10px} .igt-button-section { padding: 10px; min-height: 80px} } #game-world { margin-top: 80px} .max-bet-active { animation: max-bet-flash 1.5s ease-in-out} @keyframes max-bet-flash { 0%, 100% { filter: drop-shadow(0 0 14px var(--glow-primary))} 50% { filter: drop-shadow(0 0 28px var(--glow-primary)) brightness(1.2)} } #mega-spin-button { position: relative; overflow: hidden} .mega-spin-label { font: 900 clamp(18px, 4vw, 32px)/1 var(--font-display); letter-spacing: var(--letter-spacing-wide)} .mega-spin-sublabel { font: 600 var(--font-size-small)/1 var(--font-primary); letter-spacing: var(--letter-spacing-normal); opacity: 0.8; margin-top: var(--spacing-xs)} .autoplay-label { font: 700 var(--font-size-base)/1 var(--font-primary); letter-spacing: var(--letter-spacing-normal)} .autoplay-count { font: 900 var(--font-size-large)/1 var(--font-display); color: #00ff88; text-shadow: 0 0 8px rgba(0, 255, 136, 0.4); margin-top: var(--spacing-xs)} @media (max-width: 480px) { :root { --font-size-small: 11px; --font-size-base: 13px; --font-size-large: 16px} .bet-control__label { font-size: var(--font-size-small)} .casino-button { min-width: 48px; min-height: 48px; padding: var(--spacing-sm) var(--spacing-md)} } @media (forced-colors: active) { .progressive-meter, .bet-panel, .casino-button-deck { border: 1px solid CanvasText; background: Canvas; color: CanvasText} .progressive-meter__value, .autoplay-count { color: CanvasText; text-shadow: none} } @media (prefers-reduced-motion: reduce) { .casino-button-deck { transform: none} .progressive-meter::before { transition: none} .max-bet-active { animation: none; filter: drop-shadow(0 0 14px var(--glow-primary)) !important} } @media (hover: none) and (pointer: coarse) { .casino-button { min-width: 48px; min-height: 48px} .casino-button--large { min-width: 56px; min-height: 56px} .casino-button--mega { min-width: 72px; min-height: 72px} .bet-control__input-group { gap: var(--spacing-md)} } @media print { .casino-button-deck { transform: none; box-shadow: none; background: white; color: black; border: 2px solid black} .progressive-meter { background: white; border: 1px solid black} .progressive-meter__value { color: black; text-shadow: none} } :root { --vegas-space-xs: 4px; --vegas-space-sm: 8px; --vegas-space-md: 12px; --vegas-space-lg: 16px; --vegas-space-xl: 24px; --vegas-space-xxl: 64px; --vegas-text-display: clamp(18px, 3vw, 28px); --vegas-text-jackpot: clamp(14px, 2.2vw, 22px); --vegas-text-control: clamp(12px, 1.8vw, 18px); --vegas-gold-primary: #ffd54d; --vegas-red-accent: #dc143c; --vegas-black-cabinet: #0f0505; --vegas-brass: #b8860b; --vegas-panel: #1a0f0a; --vegas-text: #f5f7fa; --vegas-button-height-primary: 80px; --vegas-panel-width: 300px; --z-jackpots: 100; --z-game: 50; --z-controls: 25; --z-status: 10} @media (max-width: 768px) { :root { --vegas-button-height-primary: 64px; --vegas-panel-width: 260px} } @import './vegas-design-tokens.css'; @import './vegas-grid-system.css'; #game-world .cabinet-frame { position: absolute; inset: -14px; border-radius: var(--vegas-bevel-radius-large); background: linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 2px) 0 0/4px 100%, linear-gradient(180deg, #3c4147, #1f2327); box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -3px 18px rgba(0,0,0,0.8), 0 28px 48px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08); z-index: -1} #game-world .cabinet-frame::before{ content:''; position:absolute; inset: 6px; border-radius: calc(var(--vegas-bevel-radius-large) - 6px); background: conic-gradient(from 90deg, #ffffff, #bfc9d1, #7b8a96, #bfc9d1, #ffffff); -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; box-shadow: inset 0 0 16px rgba(255,255,255,0.25); opacity: 0.9} #game-world .cabinet-detail{ position:absolute; inset: -10px -12px -20px -12px; border-radius: calc(var(--vegas-bevel-radius-large) + 6px); background: radial-gradient(120% 50% at 50% 0%, rgba(255,213,77,0.12), transparent 60%), linear-gradient(180deg, #2b0e0b 0%, #140707 100%); box-shadow: inset 0 2px 0 rgba(255,213,77,0.15), inset 0 -8px 20px rgba(0,0,0,0.85); z-index:-2} .cabinet-corner{ width:22px; height:22px; border-radius:7px; background: conic-gradient(from 0deg, #fff, #bfc9d1, #7b8a96, #bfc9d1, #fff); box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35); border: none} .vegas-marquee{ display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 12px auto 16px; border-radius: 14px; padding: 12px 20px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,215,0,0.08) 0px, rgba(255,215,0,0.08) 8px, rgba(255,215,0,0.04) 8px, rgba(255,215,0,0.04) 16px), linear-gradient(180deg, #2a1810, #1a0f08, #0f0704); box-shadow: 0 0 24px rgba(255,215,0,0.3), 0 4px 16px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.12), inset 0 -2px 8px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.2)} .vegas-marquee::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: -100%; width: 200%; border-radius: 10px; background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.6) 25%, rgba(255,255,255,0.8) 50%, rgba(255,215,0,0.6) 75%, transparent 100%); animation: marquee-chase 3s linear infinite; pointer-events: none} @keyframes marquee-chase { 0% { left: -100%} 100% { left: 100%} } .vegas-marquee__title{ font: 900 clamp(16px, 2.8vw, 24px)/1.1 'Arial Black', system-ui; letter-spacing: 0.2em; color: #fff8dc; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 16px rgba(255,215,0,0.7), 0 0 32px rgba(255,215,0,0.4); position: relative; z-index: 2; background: linear-gradient(45deg, #fff8dc, #ffd700, #fff8dc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; animation: marquee-text-glow 2s ease-in-out infinite alternate} @keyframes marquee-text-glow { from { text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 16px rgba(255,215,0,0.7), 0 0 32px rgba(255,215,0,0.4)} to { text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 24px rgba(255,215,0,0.9), 0 0 48px rgba(255,215,0,0.6)} } .vegas-marquee__ticker{ margin-left: 16px; font: 700 clamp(12px, 1.8vw, 16px)/1.2 system-ui; color: #ffeb85; opacity: 0.95; animation: ticker-pulse 1.5s ease-in-out infinite alternate} @keyframes ticker-pulse { from { opacity: 0.95} to { opacity: 0.7} } .vegas-left-panel, .vegas-right-panel { position: relative; border-radius: 8px; background: linear-gradient(180deg, #2a1810, #1a0f08); box-shadow: 0 0 20px rgba(255,0,128,0.3), inset 0 2px 0 rgba(255,255,255,0.06), inset 0 -4px 12px rgba(0,0,0,0.6)} .vegas-left-panel::before, .vegas-right-panel::before { content: ''; position: absolute; inset: 0; border-radius: 8px; padding: 2px; background: conic-gradient( from 0deg, rgba(255,0,128,0.6) 0deg, rgba(128,0,255,0.6) 90deg, rgba(0,128,255,0.6) 180deg, rgba(0,255,128,0.6) 270deg, rgba(255,0,128,0.6) 360deg ); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask-composite: xor; animation: rgb-chase 4s linear infinite; pointer-events: none} @keyframes rgb-chase { 0% { filter: hue-rotate(0deg) brightness(0.8)} 25% { filter: hue-rotate(90deg) brightness(1.2)} 50% { filter: hue-rotate(180deg) brightness(0.8)} 75% { filter: hue-rotate(270deg) brightness(1.2)} 100% { filter: hue-rotate(360deg) brightness(0.8)} } .vegas-speaker-grille { width: 80px; height: 120px; border-radius: 40px; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.8) 30%, transparent 32%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 28%, transparent 30%); background-size: 8px 8px; background-position: 0 0, 4px 4px; box-shadow: inset 0 0 0 3px #3c4147, inset 0 0 0 4px rgba(255,255,255,0.15), inset 0 8px 16px rgba(0,0,0,0.7), 0 0 12px rgba(255,215,0,0.2); position: relative; margin: 12px auto} .vegas-speaker-grille::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: rgba(255,215,0,0.1); animation: speaker-pulse 2s ease-in-out infinite alternate} @keyframes speaker-pulse { from { background: rgba(255,215,0,0.1)} to { background: rgba(255,215,0,0.25)} } .vegas-coin-door { width: 100px; height: 60px; background: linear-gradient(90deg, transparent 35%, #1a0f08 36%, #1a0f08 64%, transparent 65%), linear-gradient(145deg, #4a5258, #2a2e33, #4a5258); border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5); position: relative; margin: 16px auto 8px} .vegas-coin-door::before { content: '$ INSERT COIN OR BILL $'; position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font: 700 10px/1 system-ui; color: #ffeb85; opacity: 0.8; letter-spacing: 0.05em} .vegas-coin-door::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 3px; background: #0d0704; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,215,0,0.3)} .vegas-ticket-printer { width: 120px; height: 8px; background: #1a0f08; border-radius: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(255,215,0,0.15); margin: 8px auto; position: relative} .vegas-ticket-printer::before { content: 'TICKET OUT'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 600 8px/1 system-ui; color: #d4af37; opacity: 0.7; letter-spacing: 0.1em} .vegas-reels-viewport .screen-bezel{ border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), inset 0 -6px 16px rgba(0,0,0,0.85), 0 0 16px rgba(255,215,0,0.15)} .flex { display: flex} .items-center { align-items: center} .justify-center { justify-content: center} .justify-between { justify-content: space-between} .min-h-screen { min-height: 100vh} .w-full { width: 100%} .max-w-4xl { max-width: 56rem} .px-4 { padding-left: 1rem; padding-right: 1rem} .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem} .mb-6 { margin-bottom: 1.5rem} .mb-1 { margin-bottom: 0.25rem} .mx-4 { margin-left: 1rem; margin-right: 1rem} .gap-4 { gap: 1rem} .relative { position: relative} .block { display: block} .text-xl { font-size: 1.25rem} .font-bold { font-weight: bold} .bg-slate-800 { background-color: #1e293b} .rounded-lg { border-radius: 0.5rem} .shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)} .overflow-hidden { overflow: hidden} .flex-1 { flex: 1 1 0%} .max-w-md { max-width: 28rem} .bet-controls-panel { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 10px} .bet-label { color: #9aa4b2; font-size: 12px} .bet-input { width: 64px; padding: 4px; border-radius: 6px; border: 1px solid #334155; background: #0b0f17; color: #e5e7eb} .max-bet-button { padding: 6px 10px; border-radius: 8px; background: #ef4444; color: white; border: 1px solid rgba(255,255,255,0.1); cursor: pointer} .bet-total { color: #9aa4b2; font-size: 12px} .bet-total strong { color: #e5e7eb} :root { --vegas-gold-1: #FFD700; --vegas-gold-2: #DAA520; --vegas-gold-3: #B8860B; --vegas-gold-4: #8B6914; --vegas-red-1: #DC143C; --vegas-red-2: #B22222; --vegas-red-3: #8B0000; --vegas-red-4: #6B0000; --velvet-burgundy: #2D0F1A; --brass-accent: #CD7F32; --mahogany-dark: #420C09; --crystal-gold: rgba(255, 215, 0, 0.15); --warm-amber: rgba(255, 140, 0, 0.12); --gold-1: var(--vegas-gold-1); --gold-2: var(--vegas-gold-2); --gold-3: var(--vegas-gold-3); --gold-4: var(--vegas-gold-4); --cabinet-top: var(--mahogany-dark); --cabinet-mid: var(--velvet-burgundy); --cabinet-edge: var(--brass-accent); --glass: rgba(255, 215, 0, 0.08)} * { -webkit-tap-highlight-color: transparent} body { font-family: "Poppins", sans-serif; background: url("data:image/svg+xml,%3csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23DC143C' fill-opacity='0.08'%3e%3cpath d='M30 30L0 60v-30h30zM60 30L30 60v-30h30z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"), radial-gradient(circle at 25% 25%, var(--warm-amber) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(220, 20, 60, 0.08) 0%, transparent 50%), radial-gradient(circle at 50% 100%, var(--crystal-gold) 0%, transparent 70%), linear-gradient(135deg, #1A0A0A 0%, var(--velvet-burgundy) 30%, #0F0505 70%, #1A0808 100%); margin: 0; padding: 0; color: #f9fafb; overflow-x: hidden; perspective: 1000px} .sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} @media (max-width: 768px) { body { overflow-x: hidden} #canvas-container { margin-bottom: 8px} .bet-controls-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px} .max-bet-button { min-height: 44px} .bet-input { min-height: 44px; padding: 8px; font-size: 16px} .bet-label { font-size: 14px} } body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='velvetTexture'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' seed='2' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23velvetTexture)' fill='%23FFD700' fill-opacity='0.03'/%3e%3c/svg%3e"); opacity: 0.15; pointer-events: none; z-index: -2; mix-blend-mode: multiply} body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 150% 100% at 50% 0%, var(--crystal-gold) 0%, transparent 70%), radial-gradient(ellipse 120% 80% at 20% 50%, rgba(205, 127, 50, 0.08) 0%, transparent 60%), radial-gradient(ellipse 120% 80% at 80% 50%, rgba(220, 20, 60, 0.06) 0%, transparent 60%); pointer-events: none; z-index: -1} #game-world { position: relative; padding: 4px; border-radius: 1.2rem; transform-style: preserve-3d; perspective: 1000px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6))} #game-world::before { content: ""; position: absolute; inset: -14px -14px -24px -14px; background: linear-gradient(135deg, var(--mahogany-dark) 0%, #2D0A08 25%, var(--brass-accent) 26%, #CD7F32 27%, var(--velvet-burgundy) 30%, #1A0808 100%); border-radius: 1.8rem; box-shadow: inset 0 2px 0 rgba(205, 127, 50, 0.15), inset 0 -3px 12px rgba(0, 0, 0, 0.8), 0 50px 80px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--brass-accent), 0 0 20px rgba(255, 215, 0, 0.1); z-index: -2; transform: translateZ(-26px)} #game-world::after { content: ""; position: absolute; inset: -22px -22px -40px -22px; border-radius: 2.2rem; background: radial-gradient(1200px 200px at 50% 0%, var(--crystal-gold) 0%, transparent 70%), linear-gradient(160deg, var(--mahogany-dark) 0%, #1A0505 40%, var(--velvet-burgundy) 70%, #0F0505 100%); z-index: -3; transform: translateZ(-36px); box-shadow: inset 0 3px 0 rgba(205, 127, 50, 0.08), inset 0 -6px 15px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.05)} .cabinet-frame { position: absolute; inset: -12px; border-radius: 1.6rem; background: linear-gradient(145deg, var(--brass-accent) 0%, #B8740A 8%, var(--mahogany-dark) 12%, var(--velvet-burgundy) 88%, var(--brass-accent) 92%, #CD7F32 100%); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), inset 0 3px 2px rgba(255, 215, 0, 0.1), inset 0 -3px 2px rgba(0, 0, 0, 0.7), 0 0 0 3px var(--brass-accent), 0 0 30px rgba(205, 127, 50, 0.2); z-index: -1; transform: translateZ(-10px)} .cabinet-frame::before { content: ""; position: absolute; inset: 3px; border-radius: 1.4rem; background: linear-gradient(135deg, var(--velvet-burgundy) 0%, #1A0808 40%, var(--mahogany-dark) 60%, #2D0F1A 100%); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(205, 127, 50, 0.05)} .cabinet-frame::after { content: ""; position: absolute; inset: -6px; border-radius: 1.8rem; background: conic-gradient(from 0deg, var(--vegas-gold-1) 0deg, var(--vegas-red-1) 60deg, var(--vegas-gold-2) 120deg, var(--brass-accent) 180deg, var(--vegas-red-2) 240deg, var(--vegas-gold-1) 300deg, var(--vegas-gold-1) 360deg); opacity: 0.25; filter: blur(15px); z-index: -2; animation: none} .cabinet-detail { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); width: 86%; height: 20px; background: linear-gradient(90deg, transparent 0%, var(--brass-accent) 2%, var(--mahogany-dark) 5%, var(--velvet-burgundy) 50%, var(--mahogany-dark) 95%, var(--brass-accent) 98%, transparent 100%), linear-gradient(145deg, var(--mahogany-dark), var(--velvet-burgundy)); border-radius: 0 0 16px 16px; box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(205, 127, 50, 0.1), 0 12px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.05); z-index: -3} .cabinet-detail::before { content: ""; position: absolute; top: 4px; left: 15%; right: 15%; height: 4px; background: linear-gradient(90deg, transparent 0%, rgba(205, 127, 50, 0.3) 10%, var(--vegas-gold-1) 50%, rgba(205, 127, 50, 0.3) 90%, transparent 100%); border-radius: 3px; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))} .cabinet-corner { position: absolute; width: 20px; height: 20px; border: 3px solid var(--brass-accent); background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 60%), linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(139, 69, 19, 0.2)); border-radius: 6px; z-index: 5; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px)} .corner-tl { top: 16px; left: 16px; border-right: none; border-bottom: none} .corner-tr { top: 16px; right: 16px; border-left: none; border-bottom: none} .corner-bl { bottom: 16px; left: 16px; border-right: none; border-top: none} .corner-br { bottom: 16px; right: 16px; border-left: none; border-top: none} .ambient-light { position: absolute; inset: 0; border-radius: 1.6rem; background: radial-gradient(circle at 25% 15%, var(--crystal-gold) 0%, transparent 300px), radial-gradient(circle at 80% 85%, rgba(220, 20, 60, 0.08) 0%, transparent 320px), radial-gradient(circle at 50% 50%, var(--warm-amber) 0%, transparent 250px), radial-gradient(800px 200px at 50% 0%, rgba(255, 215, 0, 0.08) 0%, transparent 80%); filter: blur(30px); opacity: 0.8; pointer-events: none; z-index: -1; animation: vegas-ambience 25s infinite alternate; mask-image: radial-gradient(85% 85% at 50% 50%, #000 50%, transparent 100%)} @keyframes vegas-ambience { 0% { transform: translate(-2%, -2%) scale(1.02); opacity: 0.7} 50% { transform: translate(1%, 1%) scale(1.05); opacity: 0.9} 100% { transform: translate(2%, 2%) scale(1); opacity: 0.8} } #canvas-container { position: relative; width: 100%; max-width: 100%; aspect-ratio: 5 / 3.2; background: url("data:image/svg+xml,%3csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none'%3e%3cpath d='M20 20L0 0v20h20zM40 20L20 0v20h20zM20 40L0 20v20h20zM40 40L20 20v20h20z' fill='%23DC143C' fill-opacity='0.03'/%3e%3ccircle cx='20' cy='20' r='2' fill='%23FFD700' fill-opacity='0.05'/%3e%3c/g%3e%3c/svg%3e"), radial-gradient(120% 60% at 50% 0%, var(--crystal-gold) 0%, transparent 70%), radial-gradient(ellipse at center, var(--mahogany-dark) 0%, var(--velvet-burgundy) 50%, #0A0303 100%); border-radius: 1.1rem; box-shadow: 0 0 0 2px var(--brass-accent), 0 0 0 4px rgba(205, 127, 50, 0.3), 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 80px rgba(0, 0, 0, 0.6), inset 0 2px 0 var(--crystal-gold), inset 0 -3px 12px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 215, 0, 0.1); overflow: hidden; backdrop-filter: blur(3px); transform: translateZ(12px)} #canvas-container::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 18%, transparent 40%); border-radius: 1.1rem 1.1rem 0 0; pointer-events: none; z-index: 2; mix-blend-mode: screen} #canvas-container::after { content: ""; position: absolute; inset: -4px; border-radius: calc(1.1rem + 4px); border: 4px solid transparent; background: conic-gradient(from 45deg, var(--vegas-gold-1) 0deg, var(--vegas-red-1) 90deg, var(--brass-accent) 180deg, var(--vegas-red-2) 270deg, var(--vegas-gold-1) 360deg) border-box; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6; z-index: 1; animation: none; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 30px rgba(220, 20, 60, 0.2))} #canvas-container .screen-bezel { position: absolute; inset: 8px; border-radius: 0.9rem; background: linear-gradient(135deg, var(--velvet-burgundy) 0%, #1A0505 50%, var(--mahogany-dark) 100%); box-shadow: inset 0 2px 0 rgba(205, 127, 50, 0.1), inset 0 0 0 2px rgba(255, 215, 0, 0.05), inset 0 -8px 16px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 0} @keyframes rotate { 0% { transform: rotate(0deg)} 100% { transform: rotate(360deg)} } @keyframes vegas-neon-rotate { 0% { transform: rotate(0deg)} 100% { transform: rotate(360deg)} } #canvas-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; imageSmoothingEnabled: true; z-index: 0} .digital { font-family: "Courier New", Courier, monospace; letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 16px rgba(255, 215, 0, 0.4), 0 0 24px rgba(255, 215, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.8); color: var(--vegas-gold-1)} .digital-display { background: linear-gradient(135deg, var(--mahogany-dark) 0%, #2D0808 40%, var(--velvet-burgundy) 100%); border: 2px solid var(--brass-accent); box-shadow: inset 0 3px 8px rgba(255, 215, 0, 0.1), inset 0 -4px 12px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.15), 0 0 0 1px rgba(205, 127, 50, 0.2); position: relative; overflow: hidden; border-radius: 0.8rem; transform: translateZ(6px)} .digital-display::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 215, 0, 0.04) 2px, rgba(255, 215, 0, 0.04) 4px); pointer-events: none; z-index: 1} .digital-display::before { content: ""; position: absolute; top: 0; left: -40%; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); animation: scan 3s infinite; z-index: 2; opacity: 0.8} @keyframes scan { 0% { transform: translateX(-60%)} 55% { transform: translateX(160%)} 100% { transform: translateX(160%)} } .digital-display .readout-glass { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% -10%, rgba(255, 255, 255, 0.12), transparent 60%), radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.35), transparent 60%); mix-blend-mode: screen; pointer-events: none; z-index: 0} .readout-label { color: var(--brass-accent); text-transform: uppercase; font-weight: 700; letter-spacing: 0.2em; font-size: 0.75rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 8px rgba(205, 127, 50, 0.3)} .readout-value { display: inline-block; padding: 3px 8px; border-radius: 6px; background: linear-gradient(135deg, rgba(42, 13, 5, 0.6), rgba(29, 8, 13, 0.8)); border: 1px solid var(--brass-accent); box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(205, 127, 50, 0.1), 0 0 12px rgba(255, 215, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3)} .flex.items-center.justify-between.gap-4 { position: relative; transform: translateZ(8px); gap: 1.25rem} .flex.items-center.justify-between.gap-4::before { content: ""; position: absolute; top: -35px; left: -35px; right: -35px; bottom: -35px; background: radial-gradient(ellipse at center, var(--crystal-gold) 0%, var(--warm-amber) 30%, transparent 80%); border-radius: 1.4rem; z-index: -1; pointer-events: none; animation: vegas-breathe 6s ease-in-out infinite} @keyframes breathe { 0%,100% { transform: scale(1); opacity: 0.5} 50% { transform: scale(1.04); opacity: 0.8} } @keyframes vegas-breathe { 0%,100% { transform: scale(1); opacity: 0.6} 50% { transform: scale(1.06); opacity: 0.9} } #spin-button { background: conic-gradient(from 215deg at 50% 50%, rgba(255, 255, 255, 0.25), transparent 30%), linear-gradient(135deg, var(--vegas-gold-1) 0%, var(--vegas-gold-2) 25%, var(--brass-accent) 50%, var(--vegas-gold-3) 75%, var(--vegas-gold-4) 100%); background-size: 200% 200%; box-shadow: 0 15px 35px rgba(255, 215, 0, 0.6), 0 0 0 2px var(--brass-accent), 0 0 0 4px rgba(205, 127, 50, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 25px rgba(255, 215, 0, 0.3); transition: transform 0.14s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 0.14s ease, background-position 0.3s ease, border-color 0.2s ease, filter 0.2s ease; position: relative; overflow: hidden; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.2); font-weight: 800; letter-spacing: 0.08em; border: 3px solid var(--vegas-gold-2); transform: translateZ(18px); perspective: 500px; z-index: 10; transform-style: preserve-3d; border-radius: 1rem; isolation: isolate; clip-path: polygon(6% 0%, 94% 0%, 100% 22%, 100% 78%, 94% 100%, 6% 100%, 0% 78%, 0% 22%)} #spin-button:disabled { filter: grayscale(0.1) brightness(0.9); cursor: not-allowed; opacity: 0.92} #spin-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%); mix-blend-mode: screen; opacity: 0.8; pointer-events: none; z-index: 1} #spin-button::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.45) 45deg, transparent 90deg); animation: rotate 3s linear infinite; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; border-radius: 50%; filter: blur(1px); z-index: 0} #spin-button.ready::after { opacity: 0.26} #spin-button .bevel { content: ""; position: absolute; inset: 2px; border-radius: 0.8rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 18%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2)); mix-blend-mode: overlay; pointer-events: none; z-index: 0} #spin-button .sheen { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 52%); transform: translateX(-120%) skewX(-18deg); transition: transform 0.7s ease; pointer-events: none; z-index: 2; mix-blend-mode: screen} #spin-button:hover:not(:disabled) .sheen { transform: translateX(120%) skewX(-18deg)} #spin-button:hover:not(:disabled) { transform: translateY(-6px) scale(1.08) translateZ(25px); box-shadow: 0 25px 45px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.4), 0 0 90px rgba(255, 215, 0, 0.25), 0 0 120px rgba(255, 215, 0, 0.15), 0 0 0 3px var(--vegas-gold-1), 0 0 0 6px rgba(255, 215, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.5); background-position: 100% 100%; border-color: var(--vegas-gold-1); filter: saturate(1.1) brightness(1.05)} #spin-button:active:not(:disabled) { transform: translateY(2px) scale(0.985) translateZ(12px); box-shadow: 0 6px 14px rgba(245, 158, 11, 0.45), inset 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1); transition: all 0.05s ease; background: linear-gradient(145deg, var(--gold-1) 0%, var(--gold-2) 36%, var(--gold-3) 76%, var(--gold-4) 100%), radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.2), transparent 35%)} @keyframes rotate-glow { 0% { transform: rotate(0deg)} 100% { transform: rotate(360deg)} } @keyframes vegas-pulse { 0% { box-shadow: 0 15px 35px rgba(255, 215, 0, 0.6), 0 0 0 0 rgba(255, 215, 0, 0.6), 0 0 0 0 rgba(255, 215, 0, 0.3), 0 0 0 2px var(--brass-accent)} 70% { box-shadow: 0 15px 35px rgba(255, 215, 0, 0.6), 0 0 0 20px rgba(255, 215, 0, 0), 0 0 0 40px rgba(255, 215, 0, 0), 0 0 0 2px var(--brass-accent)} 100% { box-shadow: 0 15px 35px rgba(255, 215, 0, 0.6), 0 0 0 0 rgba(255, 215, 0, 0), 0 0 0 0 rgba(255, 215, 0, 0), 0 0 0 2px var(--brass-accent)} } #spin-button.ready { animation: vegas-pulse 3s infinite} .ui-chrome { position: absolute; inset: -12px -14px; border-radius: 1.6rem; background: linear-gradient(145deg, rgba(205, 127, 50, 0.08) 0%, rgba(255, 215, 0, 0.03) 20%, transparent 40%), linear-gradient(180deg, var(--crystal-gold) 0%, transparent 35%); pointer-events: none; z-index: -1; box-shadow: inset 0 0 0 1px var(--brass-accent), inset 0 2px 0 rgba(255, 215, 0, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.05)} .ui-divider { position: absolute; top: -15px; left: 0; right: 0; height: 12px; background: radial-gradient(90% 150% at 50% 0%, var(--crystal-gold) 0%, rgba(205, 127, 50, 0.1) 40%, transparent 70%); filter: blur(10px); pointer-events: none} .glow-trace { position: absolute; inset: 0; border-radius: 1.2rem; box-shadow: inset 0 0 50px var(--crystal-gold), inset 0 0 100px rgba(220, 20, 60, 0.05), inset 0 0 150px var(--warm-amber); pointer-events: none} .slot-engrave { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-weight: 800; letter-spacing: 0.4em; font-size: 0.75rem; color: var(--vegas-gold-2); text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2); pointer-events: none; opacity: 0.9} @media (max-width: 640px) { #spin-button { letter-spacing: 0.06em; padding: 1.1rem 1.75rem} .slot-engrave { display: none} .readout-value { padding: 2px 4px} } .corner-tl, .corner-tr, .corner-bl, .corner-br { background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 60%); border-color: var(--vegas-gold-2); border-width: 3px} #game-world { position: relative} #game-world::before { background-size: 100% 100%, 20px 20px; background-image: linear-gradient(135deg, var(--mahogany-dark) 0%, #2D0A08 25%, var(--brass-accent) 26%, #CD7F32 27%, var(--velvet-burgundy) 30%, #1A0808 100%), radial-gradient(circle at 50% 50%, rgba(205, 127, 50, 0.1) 1px, transparent 2px)} body { position: relative} body.flex.items-center.justify-center.min-h-screen { display:flex; align-items:center; justify-content:center; min-height:100vh} .flex.items-center.justify-between.gap-4 { display:flex; align-items:center; justify-content:space-between; gap:1rem} #canvas-container { position: relative} #canvas-container canvas { position:absolute} #reels-canvas.spinning { will-change: transform; transform: translateZ(0)} @keyframes vegas-shimmer { 0%, 100% { opacity: 0.8} 50% { opacity: 1} } .digital-display .readout-glass { background: radial-gradient(80% 60% at 50% -10%, var(--crystal-gold) 0%, transparent 70%), radial-gradient(120% 120% at 50% 120%, rgba(42, 13, 5, 0.4), transparent 70%)} .win-banner { position: relative; padding: 30px 60px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 140, 0, 0.95) 50%, rgba(255, 215, 0, 0.95) 100%); border-radius: 20px; box-shadow: 0 0 50px rgba(255, 215, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2); border: 3px solid var(--vegas-gold-1); overflow: hidden; min-width: 400px; text-align: center; transform-origin: center} .banner-glow { position: absolute; inset: -10px; background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.6) 0%, rgba(255, 215, 0, 0.3) 30%, transparent 70%); border-radius: 30px; z-index: -1; animation: bannerGlow 2s ease-in-out infinite alternate} @keyframes bannerGlow { 0% { transform: scale(1); opacity: 0.6} 100% { transform: scale(1.1); opacity: 1} } .banner-content { position: relative; z-index: 2} .banner-title { font-family: 'Arial Black', sans-serif; font-size: 36px; font-weight: 900; color: #1a1a1a; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.8); letter-spacing: 3px; margin-bottom: 10px; animation: titlePulse 1s ease-in-out infinite alternate} @keyframes titlePulse { 0% { transform: scale(1)} 100% { transform: scale(1.05)} } .banner-amount { font-family: 'Courier New', monospace; font-size: 28px; font-weight: bold; color: #2a2a2a; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 255, 255, 0.8); margin-bottom: 8px} .banner-subtitle { font-family: 'Arial', sans-serif; font-size: 16px; font-weight: 700; color: #333; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); letter-spacing: 1px} .win-banner.tier-0 { background: linear-gradient(135deg, rgba(144, 238, 144, 0.95) 0%, rgba(50, 205, 50, 0.95) 50%, rgba(144, 238, 144, 0.95) 100%); border-color: #90EE90} .win-banner.tier-1 { background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 140, 0, 0.95) 50%, rgba(255, 215, 0, 0.95) 100%); border-color: var(--vegas-gold-1)} .win-banner.tier-2 { background: linear-gradient(135deg, rgba(255, 69, 0, 0.95) 0%, rgba(255, 215, 0, 0.95) 30%, rgba(255, 140, 0, 0.95) 70%, rgba(255, 69, 0, 0.95) 100%); border-color: #FF4500; box-shadow: 0 0 60px rgba(255, 69, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2)} .win-banner.tier-3 { background: linear-gradient(135deg, rgba(220, 20, 60, 0.95) 0%, rgba(255, 215, 0, 0.95) 25%, rgba(255, 140, 0, 0.95) 50%, rgba(255, 215, 0, 0.95) 75%, rgba(220, 20, 60, 0.95) 100%); border-color: #DC143C; box-shadow: 0 0 80px rgba(220, 20, 60, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3)} .win-banner.tier-4 { background: linear-gradient(135deg, rgba(138, 43, 226, 0.95) 0%, rgba(255, 215, 0, 0.95) 20%, rgba(255, 0, 255, 0.95) 40%, rgba(255, 215, 0, 0.95) 60%, rgba(255, 140, 0, 0.95) 80%, rgba(138, 43, 226, 0.95) 100%); border-color: #8A2BE2; box-shadow: 0 0 100px rgba(138, 43, 226, 1), inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.4); animation: megaJackpotPulse 0.5s ease-in-out infinite alternate} @keyframes megaJackpotPulse { 0% { transform: scale(1); filter: hue-rotate(0deg) saturate(1)} 100% { transform: scale(1.1); filter: hue-rotate(10deg) saturate(1.2)} } .banner-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px} .banner-particles::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px); background-size: 30px 30px; animation: sparkleRotate 4s linear infinite; opacity: 0.6} @keyframes sparkleRotate { 0% { transform: rotate(0deg) translateX(10px)} 100% { transform: rotate(360deg) translateX(10px)} } .canvas-win-fx { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4} @keyframes attractModePulse { 0%, 100% { opacity: 0.3; transform: scale(1)} 50% { opacity: 0.8; transform: scale(1.05)} } .attract-mode .casino-btn { animation: attractModePulse 3s ease-in-out infinite} .attract-mode .mega-spin-btn { animation: attractModePulse 2s ease-in-out infinite} .autoplay-constraints { position: absolute; top: 100%; left: 0; right: 0; background: rgba(0, 0, 0, 0.9); border: 1px solid var(--vegas-gold-2); border-radius: 0 0 8px 8px; padding: 10px; font-size: 10px; color: var(--vegas-gold-1); opacity: 0; transform: translateY(-10px); transition: all 0.3s ease-out; z-index: 1001} .autoplay-btn.active + .autoplay-constraints { opacity: 1; transform: translateY(0)} .service-meters { position: fixed; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); border: 1px solid var(--brass-accent); border-radius: 8px; padding: 10px; font-family: 'Courier New', monospace; font-size: 10px; color: var(--vegas-gold-1); z-index: 999; opacity: 0; transition: opacity 0.3s ease-out} .service-mode .service-meters { opacity: 1} .meter-row { display: flex; justify-content: space-between; margin-bottom: 4px; min-width: 150px} .meter-label { color: #ccc} .meter-value { color: var(--vegas-gold-1); font-weight: bold} .denomination-ladder { display: flex; flex-direction: column; gap: 5px; margin: 10px 0} .denom-option { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(40, 40, 40, 0.9) 100%); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 6px; cursor: pointer; transition: all 0.2s ease-out} .denom-option:hover { border-color: rgba(255, 215, 0, 0.6); background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(60, 60, 60, 0.9) 100%)} .denom-option.active { border-color: var(--vegas-gold-1); background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3)} .denom-value { font-weight: bold; color: var(--vegas-gold-1)} .denom-multiplier { font-size: 12px; color: #ccc} #paylines-canvas.advanced { background: linear-gradient(135deg, rgba(11, 18, 32, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%); border: 2px solid var(--vegas-gold-2); box-shadow: inset 0 1px 3px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.6)} .feature-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 3px solid var(--vegas-gold-1); border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 140, 0, 0.1) 70%, transparent 100%); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--vegas-gold-1); text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); opacity: 0; animation: featureReveal 0.5s ease-out forwards; z-index: 5} @keyframes featureReveal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(180deg)} 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg)} } .feature-indicator.scatter { border-color: #FF6B6B; color: #FF6B6B; text-shadow: 0 0 10px rgba(255, 107, 107, 0.8)} .feature-indicator.wild { border-color: #4ECDC4; color: #4ECDC4; text-shadow: 0 0 10px rgba(78, 205, 196, 0.8)} .feature-indicator.multiplier { border-color: #FFE066; color: #FFE066; text-shadow: 0 0 10px rgba(255, 224, 102, 0.8)} @media (prefers-reduced-motion: reduce) { .win-banner, .banner-glow, .banner-title, .casino-btn, .led-segment, .meter-sparkle { animation: none !important} .casino-btn:active .btn-surface { transform: translateY(1px) scale(0.99)} } @media (prefers-contrast: high) { .casino-btn .btn-surface { border-width: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.8)} .win-banner { border-width: 4px; box-shadow: 0 0 30px rgba(255, 215, 0, 1)} } .casino-button-panel { position: relative; display: grid; grid-template-areas: "service main betting" "progressive progressive progressive"; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(160px, 1fr); grid-template-rows: auto auto; gap: 20px; padding: 20px; background: linear-gradient(135deg, var(--mahogany-dark) 0%, var(--velvet-burgundy) 30%, var(--brass-accent) 50%, var(--velvet-burgundy) 70%, var(--mahogany-dark) 100%); border-radius: 12px; box-shadow: inset 0 2px 4px rgba(205, 127, 50, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.6)} .service-section { grid-area: service} .main-controls { grid-area: main} .betting-controls { grid-area: betting} .progressive-meters { grid-area: progressive} .casino-btn { position: relative; padding: 0; border: none; background: none; cursor: pointer; width: 80px; height: 80px; margin: 8px; transform-style: preserve-3d; transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); outline: none; user-select: none; -webkit-tap-highlight-color: transparent} .casino-btn:focus { outline: 2px solid var(--vegas-gold-1); outline-offset: 4px} .btn-surface { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 60% 30% at 50% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%), linear-gradient(135deg, #E8E8E8 0%, #D0D0D0 25%, #B8B8B8 50%, #A0A0A0 75%, #888888 100%); border: 3px solid var(--brass-accent); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(205, 127, 50, 0.6); transition: all 0.1s ease-out; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2} .casino-btn:active .btn-surface { transform: translateY(3px) scale(0.98); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(205, 127, 50, 0.8)} .btn-label { font-family: 'Arial Black', sans-serif; font-size: 11px; font-weight: 900; color: #2c2c2c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.3); letter-spacing: 0.5px; line-height: 1; margin: 0} .btn-sublabel { font-family: 'Arial', sans-serif; font-size: 8px; font-weight: 700; color: #4c4c4c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); letter-spacing: 0.3px; margin-top: 2px} .btn-icon { font-size: 14px; line-height: 1; margin-top: 2px} .mega-spin-btn { width: 120px; height: 120px; margin: 12px} .mega-spin-btn .btn-surface { background: radial-gradient(ellipse 70% 30% at 50% 15%, rgba(255, 215, 0, 0.8) 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%), linear-gradient(135deg, var(--vegas-gold-1) 0%, var(--vegas-gold-2) 30%, var(--vegas-gold-3) 70%, var(--vegas-gold-4) 100%); border: 4px solid var(--brass-accent); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(205, 127, 50, 0.7), 0 0 30px rgba(255, 215, 0, 0.3)} .mega-label { font-size: 16px; color: #1a1a1a; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.4)} .mega-spin-btn .btn-sublabel { font-size: 10px; color: #2a2a2a} .mega-spin-btn.mega-active .btn-surface { animation: megaSpinPulse 2s ease-in-out; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(205, 127, 50, 0.7), 0 0 50px rgba(255, 215, 0, 0.8)} @keyframes megaSpinPulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(205, 127, 50, 0.7), 0 0 30px rgba(255, 215, 0, 0.3)} 50% { transform: scale(1.05); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(255, 255, 255, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(205, 127, 50, 0.9), 0 0 60px rgba(255, 215, 0, 0.6)} } .btn-led-ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 1} .mega-led { inset: -12px} .led-segment { position: absolute; width: 4px; height: 4px; background-color: #330000; border-radius: 50%; top: 50%; left: 50%; margin: -2px 0 0 -2px; box-shadow: 0 0 3px rgba(255, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3); transition: all 0.1s ease-out} .mega-led .led-segment { width: 6px; height: 6px; margin: -3px 0 0 -3px} .btn-shadow { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%); z-index: 0; transition: all 0.1s ease-out} .mega-shadow { inset: 12px} .casino-btn:active .btn-shadow { transform: scale(0.8); opacity: 0.7} .btn-reflection { position: absolute; top: 10%; left: 20%; right: 40%; height: 30%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); border-radius: 50%; pointer-events: none; z-index: 3} .progressive-meters { display: flex; justify-content: space-around; align-items: center; padding: 15px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%); border-radius: 8px; border: 2px solid var(--brass-accent); box-shadow: inset 0 2px 4px rgba(205, 127, 50, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.6)} .meter-container { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 15px; background: linear-gradient(to bottom, #1a1a1a 0%, #0a0a0a 100%); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 6px; box-shadow: inset 0 1px 2px rgba(255, 215, 0, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.8); min-width: 80px} .meter-label { font-family: 'Arial Black', sans-serif; font-size: 10px; font-weight: 900; color: var(--vegas-gold-1); text-shadow: 0 0 4px rgba(255, 215, 0, 0.6); letter-spacing: 1px; margin-bottom: 4px} .meter-value { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; color: var(--vegas-gold-1); text-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8); text-align: center; transition: all 0.3s ease-out} .meter-sparkle { position: absolute; inset: -4px; border-radius: 6px; opacity: 0; background: radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.6) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.4) 0%, transparent 50%); pointer-events: none; transition: opacity 0.3s ease-out} .meter-sparkle.active { opacity: 1; animation: sparkleFlash 1s ease-out} @keyframes sparkleFlash { 0%, 100% { opacity: 0; transform: scale(1)} 25% { opacity: 0.8; transform: scale(1.05)} 50% { opacity: 1; transform: scale(1.1)} 75% { opacity: 0.6; transform: scale(1.05)} } .service-section, .betting-controls { display: flex; flex-direction: column; align-items: center; gap: 10px} .main-controls { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px} .autoplay-btn.active .btn-surface { background: radial-gradient(ellipse 60% 30% at 50% 20%, rgba(0, 255, 0, 0.4) 0%, rgba(0, 255, 0, 0.1) 50%, transparent 100%), linear-gradient(135deg, #90EE90 0%, #32CD32 25%, #228B22 50%, #006400 75%, #004000 100%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(0, 255, 0, 0.6), 0 0 20px rgba(0, 255, 0, 0.4)} @media (max-width: 1024px) { .casino-button-panel { grid-template-areas: "main" "betting" "service" "progressive"; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto} .main-controls { flex-direction: row; flex-wrap: wrap} .betting-controls, .service-section { flex-direction: row; justify-content: center} } @media (max-width: 768px) { .casino-btn { width: 60px; height: 60px; margin: 6px} .mega-spin-btn { width: 90px; height: 90px; margin: 10px} .btn-label { font-size: 9px} .mega-label { font-size: 14px} .progressive-meters { flex-wrap: wrap; gap: 10px} .meter-container { min-width: 60px; padding: 8px 10px} .meter-value { font-size: 12px} } @media (-webkit-min-device-pixel-ratio: 2) { .led-segment { box-shadow: 0 0 2px rgba(255, 0, 0, 0.4), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.4)} .btn-surface { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(205, 127, 50, 0.6)} } @media (max-width: 768px) { .casino-button-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 16px; padding: 20px} .main-controls { order: 1} .service-section { order: 2; flex-direction: row; justify-content: center} .betting-controls { order: 3; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto} .mega-spin-btn { width: 100px; height: 50px} .mega-label { font-size: 16px} } @media (prefers-reduced-motion: reduce) { .casino-btn, .btn-surface, .btn-led-ring { transition: none} .btn-led-ring.led-on, .btn-led-ring.led-pulse { animation: none} } @media (forced-colors: active) { .casino-btn .btn-surface { border: 2px solid ButtonBorder; background: ButtonFace} .casino-btn .btn-label { color: ButtonText} } .canvas-background { z-index: 1} .canvas-reels { z-index: 2} .canvas-ui-fx { z-index: 3} .control-panel-flex { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 12px} .paytable-button { padding: 6px 10px; border-radius: 8px; background: #1f2937; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: all 0.2s ease} .paytable-button:hover { background: #374151; border-color: rgba(255,255,255,0.15)} .auto-settings-flex { display: flex; align-items: center; gap: 10px; color: #9aa4b2; font-size: 12px} .auto-threshold-input { width: 96px; padding: 4px; border-radius: 6px; border: 1px solid #334155; background: #0b0f17; color: #e5e7eb} .paytable-modal-overlay { position: fixed; inset: 0; display: none !important; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 1000} .paytable-modal-overlay[style*="display: flex"] { display: flex !important} .paytable-modal-content { width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: #0b0f17; border: 1px solid #334155; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 16px; color: #e5e7eb} .paytable-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px} .paytable-title { margin: 0; font-weight: 700} .paytable-close-button { background: #111827; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: all 0.2s ease} .paytable-close-button:hover { background: #1f2937} .paytable-description { color: #9aa4b2; margin-top: 0} .paytable-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px} .paytable-section { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px} .paytable-list { margin: 6px 0 0 16px} .paytable-canvas-container { grid-column: 1 / -1; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px} .paylines-canvas { width: 100%; height: auto; border-radius: 6px; background: #0b1220}