/* ============================================================ * DESKTOP / iPAD LAYOUT BREAKPOINT * * The numeric breakpoint (currently 1100px) is defined in exactly * one place: the inline script in index.html. That script * runs synchronously before this stylesheet renders and toggles * either `html.layout-desktop` or `html.layout-mobile` on the * element via window.matchMedia. * * All layout-related rules in this file are scoped under one of * those two classes (using `:where(...)` so specificity is unchanged) * instead of `@media (min-width: 1100px)` / `(max-width: 1099px)`. * To change the breakpoint, edit ONLY the `BREAKPOINT` constant in * the index.html inline script — no CSS edits are required. * * Non-layout `@media (max-width: 768px)` queries (particle counts, * tutorial scrolling, etc.) are intentionally untouched and must * remain regular media queries. * ============================================================ */ :root { --sab: env(safe-area-inset-bottom, 0px); --royal-blue: #0f1c3f; --royal-blue-dark: #050a18; --gold: #ffd700; --gold-dark: #b8860b; --gold-light: #fffacd; --gold-rgb: 255, 215, 0; --red: #dc2626; --red-dark: #7f1d1d; --danger: #ef4444; --success: #22c55e; --success-dark: #15803d; --purple: #a855f7; --purple-dark: #581c87; --blue: #3b82f6; --orange: #f97316; --orange-dark: #c2410c; --cyan: #06b6d4; /* Responsive scaling - base values */ --card-width: clamp(70px, 12vw, 100px); --card-height: clamp(98px, 16.8vw, 140px); /* Dynamic spacing based on viewport */ --space-xs: clamp(4px, 0.8vh, 8px); --space-sm: clamp(8px, 1.2vh, 14px); --space-md: clamp(12px, 2vh, 20px); --space-lg: clamp(16px, 3vh, 30px); --space-xl: clamp(20px, 4vh, 40px); /* Responsive font sizes */ --font-xs: clamp(0.65rem, 1.5vw, 0.8rem); --font-sm: clamp(0.75rem, 1.8vw, 0.9rem); --font-md: clamp(0.85rem, 2vw, 1rem); --font-lg: clamp(1rem, 2.5vw, 1.3rem); --font-xl: clamp(1.2rem, 3vw, 1.6rem); /* Container padding */ --container-padding: clamp(10px, 2vw, 25px); --border-radius: clamp(10px, 2vw, 20px); --border-width: clamp(4px, 0.8vw, 8px); } /* Stylized Scrollbars (desktop only) */ :where(html.layout-desktop) * { scrollbar-width: thin; scrollbar-color: var(--gold-dark) rgba(15, 28, 63, 0.5); } :where(html.layout-desktop) *::-webkit-scrollbar { width: 8px; height: 8px; } :where(html.layout-desktop) *::-webkit-scrollbar-track { background: rgba(15, 28, 63, 0.5); border-radius: 4px; } :where(html.layout-desktop) *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.3); } :where(html.layout-desktop) *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%); } :where(html.layout-desktop) *::-webkit-scrollbar-corner { background: rgba(15, 28, 63, 0.5); } /* Cloud Sync Indicator */ .cloud-sync-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 50px); right: 12px; display: flex; align-items: center; gap: 8px; background: rgba(15, 28, 63, 0.85); border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 20px; padding: 6px 14px; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .cloud-sync-indicator.active { opacity: 1; visibility: visible; } .sync-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 215, 0, 0.3); border-top-color: var(--gold); border-radius: 50%; animation: syncSpin 0.8s linear infinite; } @keyframes syncSpin { to { transform: rotate(360deg); } } .sync-text { font-size: 0.75rem; font-weight: 600; color: var(--gold); letter-spacing: 0.5px; } /* Loading Screen */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f1c3f 0%, #050a18 50%, #0f1c3f 100%); display: flex; justify-content: center; align-items: center; z-index: 100000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loading-content { text-align: center; animation: loadingFadeIn 0.8s ease-out; } @keyframes loadingFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .loading-icon { width: 180px; height: 180px; border-radius: 36px; box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5); animation: loadingIconPulse 2s ease-in-out infinite; margin-bottom: 20px; } @keyframes loadingIconPulse { 0%, 100% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 80px rgba(255, 215, 0, 0.6), 0 20px 50px rgba(0, 0, 0, 0.6); } } .loading-title { font-family: 'Cinzel', serif; font-size: 2.5rem; color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.8); margin: 0 0 8px 0; letter-spacing: 2px; } .loading-tagline { font-family: 'Roboto Mono', monospace; font-size: 1rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 30px; } .loading-progress-container { width: 200px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin: 0 auto 15px; overflow: hidden; border: 1px solid rgba(255, 215, 0, 0.2); } .loading-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light, #ffe066)); border-radius: 3px; transition: width 0.3s ease-out; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .loading-status { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); font-family: 'Roboto Mono', monospace; letter-spacing: 1px; min-height: 1.2em; } @media (max-width: 480px) { .loading-icon { width: 140px; height: 140px; border-radius: 28px; } .loading-title { font-size: 1.8rem; } .loading-tagline { font-size: 0.8rem; } .loading-progress-container { width: 160px; } } /* Prevent zoom on mobile */ html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; } html { background-color: #0d0d18; } /* Base Styles */ body { font-family: 'Roboto Mono', monospace; background-color: #0d0d18; color: white; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: var(--container-padding); padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); box-sizing: border-box; } /* Prevent filter/animation on body from breaking position:fixed modals (iOS Safari) */ body[class*="cosmetic-bg-"], body[class*="bg-prestige"] { animation: none !important; filter: none !important; will-change: auto !important; } /* PWA Standalone Mode - Remove borders for fullscreen experience */ @media all and (display-mode: standalone) { body { /* iOS 11.0-11.2 uses constant(), newer versions use env() */ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top, 0); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom, 0); } } /* PWA standalone class (added via JavaScript for cross-browser support) */ body.pwa-standalone { /* iOS 11.0-11.2 fallback */ padding-top: constant(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); /* Modern iOS */ padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); /* Use all viewport height units for best compatibility */ min-height: 100vh; min-height: 100svh; /* Small viewport - excludes browser UI */ min-height: 100dvh; /* Dynamic viewport - adjusts with browser UI */ min-height: calc(var(--vh, 1vh) * 100); /* JS-calculated fallback */ } body.pwa-standalone .game-container { border: none !important; border-radius: 0 !important; box-shadow: none !important; } body.pwa-standalone .game-container::before, body.pwa-standalone .game-container::after { display: none !important; } body.pwa-standalone .game-container .chrome-bar-top, body.pwa-standalone .game-container .chrome-bar-bottom, body.pwa-standalone .corner-rivet { display: none !important; } body.pwa-standalone .game-wrapper { max-width: 100%; padding: 0; /* Use JS-calculated height */ min-height: calc(var(--vh, 1vh) * 100); } /* Animations */ @keyframes blurMove { 0% { transform: translateY(0) scaleY(1); filter: blur(0); } 50% { transform: translateY(-10px) scaleY(1.1); filter: blur(4px); } 100% { transform: translateY(10px) scaleY(1.1); filter: blur(4px); } } @keyframes bonusPulse { 0% { box-shadow: 0 0 10px var(--gold); border-color: var(--gold); } 50% { box-shadow: 0 0 50px var(--gold), inset 0 0 30px var(--gold); border-color: var(--gold-light); } 100% { box-shadow: 0 0 10px var(--gold); border-color: var(--gold); } } @keyframes winGlow { 0% { box-shadow: 0 0 5px var(--gold); transform: scale(1); z-index: 10; } 50% { box-shadow: 0 0 25px var(--gold), 0 0 50px var(--gold-light); transform: scale(1.05); z-index: 10; } 100% { box-shadow: 0 0 5px var(--gold); transform: scale(1); z-index: 10; } } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } @keyframes collectPulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(34, 197, 94, 0.7); } 50% { transform: scale(1.02); box-shadow: 0 0 25px rgba(34, 197, 94, 0.7); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(34, 197, 94, 0.7); } } @keyframes goldShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes legendaryPulse { from { box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); border-color: #a855f7; } to { box-shadow: 0 0 25px rgba(168, 85, 247, 0.6); border-color: #fff; } } @keyframes fadeOut { to { opacity: 0; transform: translateY(50px) scale(0.5); } } @keyframes fallDown { 0% { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg) scale(1); opacity: 0; } } /* Utility Classes */ .shake-element { animation: shake 0.5s; animation-iteration-count: 1; } .particle { position: absolute; pointer-events: none; animation: fadeOut 1s forwards; } /* Pooled particles (reusable) */ .pooled-particle { border-radius: 50%; will-change: transform, opacity; } .pooled-particle.win-particle { background: var(--gold); } /* Money Shower Styles */ .money-particle { position: fixed; top: -50px; z-index: 9999; pointer-events: none; opacity: 0; animation: fallDown linear forwards; } .money-bill { width: 50px; height: 25px; background: linear-gradient(135deg, #22c55e, #15803d); border: 2px solid #bbf7d0; border-radius: 4px; color: #bbf7d0; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .money-bill::after { content: '$'; } .money-coin { width: 30px; height: 30px; background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b); border: 2px solid #fffacd; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; color: #4a3b00; font-weight: bold; font-size: 18px; font-family: 'Cinzel', serif; } .money-coin::after { content: '★'; } /* Golden Cascade - Jackpot Animation */ .jackpot-particle { position: fixed; top: -60px; z-index: 10000; pointer-events: none; opacity: 0; animation: jackpotFall linear forwards; } @keyframes jackpotFall { 0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } 50% { opacity: 1; transform: translateY(50vh) rotate(180deg) scale(1.2); } 100% { opacity: 0; transform: translateY(110vh) rotate(360deg) scale(0.8); } } .jackpot-crown { width: 45px; height: 45px; background: radial-gradient(circle at 30% 30%, #ffd700, #ff8c00); border: 3px solid #fff5cc; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.5); text-shadow: 0 0 10px #fff; } .jackpot-crown::after { content: '♔'; } .jackpot-diamond { width: 35px; height: 35px; background: linear-gradient(135deg, #fff, #e0e0ff, #b8b8ff); border: 2px solid #fff; transform: rotate(45deg); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 50px rgba(180, 180, 255, 0.6); } .jackpot-star { width: 40px; height: 40px; background: radial-gradient(circle at 30% 30%, #ffd700, #daa520); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 30px rgba(255, 215, 0, 1); } .jackpot-ace { width: 40px; height: 55px; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 3px solid #ffd700; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 28px; font-weight: bold; color: #ffd700; font-family: 'Cinzel', serif; box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); } .jackpot-ace::after { content: 'A'; } /* Upgrade Match Bonus Particles */ .upgrade-match-particle { position: fixed; top: -30px; width: 20px; height: 20px; border-radius: 50%; z-index: 10000; pointer-events: none; opacity: 0; animation: upgradeMatchFall linear forwards; } @keyframes upgradeMatchFall { 0% { opacity: 1; transform: translateY(0) scale(1); } 25% { opacity: 1; transform: translateY(25vh) scale(1.5); } 50% { opacity: 0.8; transform: translateY(50vh) scale(1.2); } 100% { opacity: 0; transform: translateY(110vh) scale(0.5); } } /* Top Bar */ .top-bar { width: 100%; max-width: 950px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } #game-title { white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; margin-right: 8px; } .top-bar-right { display: flex; align-items: center; gap: 12px; margin-right: 8px; flex-shrink: 0; } .xp-container { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1a0a2e 0%, #0d0518 100%); border: 2px solid #9966ff; border-radius: 20px; padding: 4px 12px; font-family: 'Roboto Mono', monospace; } .xp-level-label { color: #9966ff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; } .xp-level-badge { background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); color: white; font-weight: 900; font-size: 0.85rem; padding: 2px 8px; border-radius: 10px; min-width: 24px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(153, 102, 255, 0.5); } .prestige-stars { color: var(--gold); font-size: 0.75rem; text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); } .xp-progress-track { width: 50px; height: 8px; background: #1a0a2e; border-radius: 4px; overflow: hidden; border: 1px solid #4a3060; } .xp-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6633cc, #9966ff, #cc99ff); border-radius: 4px; transition: width 0.3s ease; } .xp-progress-bar.max-level { background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)); animation: xpMaxPulse 1.5s ease-in-out infinite; } @keyframes xpMaxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .xp-float-text { position: absolute; color: #cc99ff; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 6px rgba(153, 102, 255, 0.6), 0 1px 2px rgba(0,0,0,0.8); pointer-events: none; z-index: 9999; animation: xpFloatUp 1.5s ease-out forwards; white-space: nowrap; } @keyframes xpFloatUp { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(-30px); } 100% { opacity: 0; transform: translateY(-45px); } } .machine-xp-tag { background: linear-gradient(135deg, #6633cc, #9966ff) !important; color: #fff !important; font-weight: 700; } .prestige-btn { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%); color: #1a0a2e; border: none; padding: 3px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 700; cursor: pointer; text-transform: uppercase; animation: prestigeGlow 2s ease-in-out infinite; } .prestige-btn:hover { transform: scale(1.05); } @keyframes prestigeGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } 50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.8); } } .royal-coins-box { background: linear-gradient(135deg, #2a1f0a 0%, #1a1205 100%); border: 2px solid var(--gold); border-radius: 20px; padding: 6px 14px; font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 0.9rem; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.5); } .victory-coins { color: var(--gold); font-weight: bold; font-size: 1.2rem; margin: 5px 0; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } h1 { font-family: 'Cinzel', serif; color: var(--gold); text-transform: uppercase; margin: 0; font-size: 2.5rem; letter-spacing: 2px; text-shadow: 0 2px 0 #000, 0 0 20px rgba(255, 215, 0, 0.5); background: linear-gradient(to bottom, var(--gold-light), var(--gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .reset-btn { background: none; border: 1px solid #444; color: #666; font-size: 0.7rem; padding: 5px 10px; cursor: pointer; border-radius: 5px; text-transform: uppercase; font-family: 'Roboto Mono', monospace; } .reset-btn:hover { border-color: var(--danger); color: var(--danger); } .mute-btn { background: transparent; border: 1px solid #444; color: #666; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.7rem; font-family: 'Roboto Mono'; } .mute-btn:hover { color: white; border-color: white; } /* Desktop vignette - darken area outside the machine for focus */ :where(html.layout-desktop) body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 5; } :where(html.layout-desktop) .top-bar { position: relative; z-index: 10; } :where(html.layout-desktop) .easter-hunt-active .top-bar { max-width: none; padding-left: 20px; } :where(html.layout-desktop) .easter-hunt-active .top-bar-right { gap: 8px; } :where(html.layout-desktop) .game-wrapper { z-index: 10; position: absolute; left: 50%; transform: translateX(-50%); top: 60px; } :where(html.layout-desktop) .game-container { box-shadow: 0 0 0 2px #000, 0 0 0 calc(var(--border-width) - 2px) var(--gold-dark), 0 0 0 var(--border-width) var(--gold), 0 8px 20px rgba(0, 0, 0, 0.6), 0 20px 50px rgba(0, 0, 0, 0.7), 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 120px rgba(255, 215, 0, 0.08); } /* Game Layout */ .game-wrapper { display: flex; gap: var(--space-lg); max-width: 480px; width: 100%; flex-wrap: wrap; justify-content: center; align-items: flex-start; flex: none; margin-left: auto; margin-right: auto; overflow-y: auto; overflow-x: visible; padding: var(--space-sm) 10px; padding-bottom: var(--space-sm); } .game-container { background: repeating-linear-gradient( 135deg, transparent, transparent 8px, rgba(255, 255, 255, 0.02) 8px, rgba(255, 255, 255, 0.02) 16px ), linear-gradient(180deg, #1e293b 0%, #0f172a 100%); padding: var(--container-padding); padding-top: calc(var(--container-padding) + 10px); border-radius: var(--border-radius); border: 1px solid #334155; box-shadow: 0 0 0 2px #000, 0 0 0 calc(var(--border-width) - 2px) var(--gold-dark), 0 0 0 var(--border-width) var(--gold), 0 20px 50px rgba(0, 0, 0, 0.8); text-align: center; flex: 2; min-width: 300px; min-height: 0; position: relative; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); } .game-container.bonus-active { border-color: #fff; animation: bonusPulse 2s infinite; } /* Corner Rivets */ .game-container::before, .game-container::after { content: ''; position: absolute; width: 14px; height: 14px; background: radial-gradient(circle at 35% 35%, #c0c0c0, #6b7280 40%, #4b5563 70%, #374151); border-radius: 50%; border: 2px solid #1f2937; box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 50; } .game-container::before { top: 10px; left: 10px; } .game-container::after { top: 10px; right: 10px; } /* Chrome Accent Bar - Top */ .game-container .chrome-bar-top { position: absolute; top: 0; left: 20px; right: 20px; height: 4px; background: linear-gradient(90deg, transparent 0%, #6b7280 5%, #d1d5db 20%, #f3f4f6 50%, #d1d5db 80%, #6b7280 95%, transparent 100% ); border-radius: 0 0 2px 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Chrome Accent Bar - Bottom */ .game-container .chrome-bar-bottom { position: absolute; bottom: 0; left: 20px; right: 20px; height: 4px; background: linear-gradient(90deg, transparent 0%, #6b7280 5%, #d1d5db 20%, #f3f4f6 50%, #d1d5db 80%, #6b7280 95%, transparent 100% ); border-radius: 2px 2px 0 0; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3); } /* Bottom Corner Rivets */ .corner-rivet { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle at 35% 35%, #c0c0c0, #6b7280 40%, #4b5563 70%, #374151); border-radius: 50%; border: 2px solid #1f2937; box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 50; } .corner-rivet.bottom-left { bottom: 10px; left: 10px; } .corner-rivet.bottom-right { bottom: 10px; right: 10px; } /* VIP Monitor */ .vip-monitor { background: #0f0f0f; border: 2px solid var(--red-dark); box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 12px; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 15px; position: relative; } .vip-header { color: var(--red); font-family: 'Cinzel', serif; font-weight: 900; border-bottom: 2px dashed #333; padding-bottom: 10px; letter-spacing: 1px; text-align: center; font-size: 1.2rem; text-shadow: 0 0 10px var(--red-dark); } .vip-stat { display: flex; justify-content: space-between; font-size: 0.9rem; color: #888; } #round-display { color: var(--gold); font-weight: bold; text-shadow: 0 0 8px var(--gold-dark); } .vip-value { font-weight: bold; color: var(--gold); text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); text-align: right; } /* Spins Container */ .spins-container { background: #000; border-radius: 8px; padding: 10px; margin-top: 5px; border: 1px solid #333; box-shadow: inset 0 2px 5px #000; display: flex; justify-content: space-between; align-items: center; } .main-spins-wrapper { flex: 1; text-align: center; } .spins-remaining { font-size: 3.5rem; color: #fff; text-align: center; font-weight: bold; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); line-height: 1; font-family: 'Cinzel', serif; } .spins-label { text-align: center; font-size: 0.65rem; color: #666; text-transform: uppercase; margin-top: 5px; letter-spacing: 1px; } /* Bonus Reserve Box */ .bonus-reserve-box { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); border: 1px solid var(--gold-light); border-radius: 6px; width: 50px; height: 50px; text-align: center; box-shadow: 0 2px 5px rgba(255, 215, 0, 0.2); display: none; flex-direction: column; justify-content: center; align-items: center; margin-left: 10px; cursor: pointer; position: relative; } /* Box tooltip popup */ .box-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.95); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 0.75rem; line-height: 1.4; width: 180px; text-align: center; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); pointer-events: none; animation: tooltipFadeIn 0.2s ease-out; } .box-tooltip.reserve { border: 1px solid var(--gold); } .box-tooltip.hold { border: 1px solid #22d3ee; } .box-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; } .box-tooltip.reserve::after { border-top-color: var(--gold); } .box-tooltip.hold::after { border-top-color: #22d3ee; } @keyframes tooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Mobile tooltip adjustments */ .box-tooltip.mobile { width: 200px; font-size: 0.7rem; padding: 8px 10px; bottom: calc(100% + 8px); left: auto; right: -10px; transform: none; animation: mobileTooltipFadeIn 0.2s ease-out; } .box-tooltip.mobile::after { left: auto; right: 15px; transform: none; } @keyframes mobileTooltipFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Briefcase Inventory */ .briefcase-inventory { display: none !important; } .briefcase-header { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 215, 0, 0.3); } .briefcase-icon { font-size: 1rem; } .briefcase-title { font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700; color: var(--gold-light); letter-spacing: 2px; } .briefcase-slots { display: flex; justify-content: center; gap: 10px; } .briefcase-slot { background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5)); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 6px; padding: 6px 8px; width: 70px; cursor: pointer; transition: all 0.2s ease; display: none; flex-direction: column; align-items: center; justify-content: center; } .briefcase-slot.has-items { display: flex; } .briefcase-slot:hover { background: linear-gradient(to bottom, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)); border-color: var(--gold); transform: translateY(-2px); } .briefcase-slot .slot-icon { font-size: 1.2rem; line-height: 1; height: 1.2rem; } .briefcase-slot .slot-count { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900; color: var(--gold); line-height: 1; height: 1.3rem; margin: 2px 0; } .briefcase-slot .slot-label { font-size: 0.55rem; color: rgba(255, 215, 0, 0.7); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; height: 0.55rem; } #briefcase-reserve.has-items { background: linear-gradient(to bottom, rgba(234, 179, 8, 0.2), rgba(161, 98, 7, 0.3)); border-color: #eab308; } #briefcase-hold.has-items { background: linear-gradient(to bottom, rgba(34, 211, 238, 0.2), rgba(8, 145, 178, 0.3)); border-color: #22d3ee; } #briefcase-scissors.has-items { background: linear-gradient(to bottom, rgba(244, 114, 182, 0.2), rgba(219, 39, 119, 0.3)); border-color: #f472b6; } #briefcase-reserve .slot-count { color: #fbbf24; } #briefcase-hold .slot-count { color: #22d3ee; } #briefcase-scissors .slot-count { color: #f472b6; } @media (max-width: 600px) { .briefcase-inventory { padding: 6px 8px; margin: 8px auto; max-width: 250px; } .briefcase-header { margin-bottom: 6px; padding-bottom: 4px; } .briefcase-title { font-size: 0.6rem; letter-spacing: 1px; } .briefcase-slots { gap: 6px; } .briefcase-slot { padding: 4px 6px; width: 58px; } .briefcase-slot .slot-icon { font-size: 1rem; height: 1rem; } .briefcase-slot .slot-count { font-size: 1.1rem; height: 1.1rem; } .briefcase-slot .slot-label { font-size: 0.5rem; height: 0.5rem; } } .bonus-reserve-count { font-size: 1.6rem; font-weight: 900; color: #2a1a00; font-family: 'Cinzel', serif; line-height: 1; } .hold-box { background: linear-gradient(to bottom, #22d3ee, #0891b2); border: 1px solid #67e8f9; border-radius: 6px; width: 50px; height: 50px; text-align: center; box-shadow: 0 2px 5px rgba(34, 211, 238, 0.3); display: none; flex-direction: column; justify-content: center; align-items: center; margin-left: 10px; position: relative; cursor: pointer; } .hold-count { font-size: 1.6rem; font-weight: 900; color: #083344; font-family: 'Cinzel', serif; line-height: 1; } .scissors-box { background: linear-gradient(to bottom, #f472b6, #db2777); border: 1px solid #f9a8d4; border-radius: 6px; width: 50px; height: 50px; text-align: center; box-shadow: 0 2px 5px rgba(244, 114, 182, 0.3); display: none; flex-direction: column; justify-content: center; align-items: center; margin-left: 10px; position: relative; cursor: pointer; } .scissors-icon { font-size: 1.1rem; line-height: 1; } .scissors-count { font-size: 1.1rem; font-weight: 900; color: #500724; font-family: 'Cinzel', serif; line-height: 1; } .mobile-scissors-box { display: none; background: linear-gradient(to bottom, #f472b6, #db2777); border: 1px solid #f9a8d4; border-radius: 4px; width: 28px; height: 28px; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(244, 114, 182, 0.3); margin-left: 4px; cursor: pointer; position: relative; } .mobile-scissors-box::after { content: '✂️'; position: absolute; bottom: -2px; right: -2px; font-size: 0.5rem; } .mobile-scissors-count { font-size: 0.9rem; font-weight: 900; color: #500724; font-family: 'Cinzel', serif; } .item-tooltip-content { text-align: center; max-width: 320px; padding: 24px; } .item-tooltip-icon { font-size: 3rem; margin-bottom: 8px; } .item-tooltip-name { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.3rem; margin: 0 0 8px 0; text-transform: uppercase; } .item-tooltip-count { color: #22d3ee; font-size: 1.1rem; font-weight: bold; margin: 0 0 12px 0; } .item-tooltip-desc { color: #ccc; font-size: 0.9rem; line-height: 1.5; margin: 0 0 12px 0; } .item-tooltip-usage { color: #888; font-size: 0.8rem; font-style: italic; margin: 0 0 16px 0; padding: 8px; background: rgba(0, 0, 0, 0.3); border-radius: 6px; border-left: 3px solid var(--gold); } .item-tooltip-buttons { display: flex; gap: 12px; justify-content: center; } .item-tooltip-use { background: linear-gradient(to bottom, #22c55e, #16a34a); color: white; border: none; padding: 10px 24px; border-radius: 6px; font-family: 'Cinzel', serif; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: transform 0.1s, box-shadow 0.1s; } .item-tooltip-use:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } .item-tooltip-close { background: linear-gradient(to bottom, #444, #333); color: #ccc; border: 1px solid #555; padding: 10px 24px; border-radius: 6px; font-family: 'Cinzel', serif; font-weight: bold; cursor: pointer; text-transform: uppercase; } .item-tooltip-close:hover { background: linear-gradient(to bottom, #555, #444); } .scissors-count-display { text-align: center; color: #f472b6; font-size: 1rem; margin-bottom: 15px; } .scissors-reels-grid { display: flex; justify-content: space-around; gap: 10px; width: 100%; max-height: 55vh; overflow-y: auto; } .scissors-reel-col { flex: 1; background: rgba(0,0,0,0.3); border-radius: 6px; padding: 6px; max-height: 100%; overflow-y: auto; } .scissors-reel-col h3 { color: var(--gold); text-align: center; margin-bottom: 6px; font-size: 0.85rem; } .scissors-card-item { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 4px 6px; margin-bottom: 3px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; font-size: 0.8rem; } .scissors-card-item:hover { background: rgba(244, 114, 182, 0.3); border-color: #f472b6; } .scissors-card-item.upgraded { border-color: rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.1); } .scissors-card-item.upgraded:hover { background: rgba(255, 215, 0, 0.25); border-color: #ffd700; } .scissors-card-text { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; } .scissors-card-text .card-name { font-weight: bold; margin-right: 4px; } .scissors-card-text .upgrade-tag { font-size: 0.55rem; padding: 1px 3px; } .scissors-card-item.selected { border-color: #ef4444; background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); } .scissors-card-item.marker-special { border-color: rgba(6, 182, 212, 0.5); background: rgba(6, 182, 212, 0.15); } .scissors-card-item.marker-special:hover { background: rgba(6, 182, 212, 0.3); border-color: #06b6d4; } .scissors-card-item.marker-disabled { opacity: 0.5; cursor: not-allowed; background: rgba(100, 100, 100, 0.2); } .scissors-card-item.marker-disabled:hover { background: rgba(100, 100, 100, 0.2); border-color: rgba(255,255,255,0.1); } .marker-effect-tag { font-size: 0.6rem; padding: 1px 4px; border-radius: 3px; background: rgba(6, 182, 212, 0.3); color: #06b6d4; margin-left: auto; } .scissors-card-item.marker-disabled .marker-effect-tag { background: rgba(34, 197, 94, 0.3); color: #22c55e; } .scissors-confirm-panel { background: rgba(0, 0, 0, 0.8); border: 2px solid #ef4444; border-radius: 10px; padding: 15px; margin-top: 15px; margin-bottom: 70px; text-align: center; } .scissors-confirm-panel p { color: #fff; font-size: 1rem; margin: 0 0 12px 0; } .scissors-confirm-card { font-weight: bold; margin: 0 4px; } .scissors-confirm-buttons { display: flex; gap: 10px; justify-content: center; } .scissors-confirm-yes { background: linear-gradient(to bottom, #ef4444, #b91c1c); color: white; border: none; padding: 10px 25px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem; } .scissors-confirm-yes:hover { background: linear-gradient(to bottom, #f87171, #ef4444); } .scissors-confirm-no { background: rgba(100, 116, 139, 0.5); color: #cbd5e1; border: 1px solid #64748b; padding: 10px 25px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem; } .scissors-confirm-no:hover { background: rgba(100, 116, 139, 0.7); } .scissors-cut-btn { background: linear-gradient(to bottom, #ef4444, #b91c1c); color: white; border: none; border-radius: 3px; padding: 2px 6px; font-size: 0.7rem; cursor: pointer; font-weight: bold; white-space: nowrap; } :where(html.layout-mobile) .scissors-reels-grid { gap: 5px; max-height: 50vh; } :where(html.layout-mobile) .scissors-reel-col { padding: 4px; } :where(html.layout-mobile) .scissors-reel-col h3 { font-size: 0.75rem; margin-bottom: 4px; } :where(html.layout-mobile) .scissors-card-item { padding: 3px 5px; margin-bottom: 2px; font-size: 0.7rem; } :where(html.layout-mobile) .scissors-cut-btn { padding: 2px 4px; font-size: 0.6rem; } .scissors-cut-btn:hover { background: linear-gradient(to bottom, #f87171, #dc2626); } /* Stats Bar */ .stats-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #000; border: 1px solid #333; box-shadow: inset 0 5px 10px #000; padding: 15px 25px; border-radius: 12px; margin-bottom: 25px; font-weight: bold; font-size: var(--font-lg); text-transform: uppercase; position: relative; } .credit-box { color: var(--gold); text-shadow: 0 0 8px var(--gold-dark); font-size: clamp(1.4rem, 4vw, 1.8rem); } .score-box { color: #60a5fa; text-shadow: 0 0 8px rgba(96, 165, 250, 0.5); } .last-win-box { color: var(--success); text-shadow: 0 0 8px rgba(34, 197, 94, 0.4); } /* Shark Debt Badge */ .shark-debt-badge { display: flex; align-items: center; gap: 6px; background: rgba(127, 29, 29, 0.7); border: 1px solid #dc2626; border-radius: 20px; padding: 4px 14px; cursor: pointer; font-size: clamp(0.8rem, 2vw, 0.95rem); font-weight: bold; color: #fca5a5; text-shadow: 0 0 6px rgba(220, 38, 38, 0.5); animation: debtBadgePulse 3s ease-in-out infinite; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .shark-debt-badge:hover { background: rgba(153, 27, 27, 0.9); box-shadow: 0 0 12px rgba(220, 38, 38, 0.5); } .shark-debt-badge.shark-debt-danger { background: rgba(127, 29, 29, 0.85); border-color: #ef4444; color: #fca5a5; animation: debtBadgeDanger 2s ease-in-out infinite; } .shark-debt-badge.shark-debt-menace { background: rgba(100, 0, 0, 0.9); border-color: #ff0000; color: #ff8080; animation: debtBadgeMenace 1.2s ease-in-out infinite; } .shark-debt-icon { font-size: 1.1em; } .shark-debt-label { font-size: 0.85em; opacity: 0.85; } .shark-debt-amount { color: #fca5a5; font-weight: 900; } .shark-debt-badge.shark-debt-menace .shark-debt-amount { color: #ff8080; } @keyframes debtBadgePulse { 0%, 100% { box-shadow: 0 0 0 rgba(220, 38, 38, 0); } 50% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.4); } } @keyframes debtBadgeDanger { 0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.6); } } @keyframes debtBadgeMenace { 0%, 100% { box-shadow: 0 0 6px rgba(255, 0, 0, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 22px rgba(255, 0, 0, 0.8); transform: scale(1.03); } } .shark-debt-badge.shark-debt-cleared { background: rgba(5, 46, 22, 0.9); border-color: #22c55e; color: #86efac; text-shadow: 0 0 8px rgba(34, 197, 94, 0.6); animation: debtBadgeCleared 1.4s ease-out forwards; } @keyframes debtBadgeCleared { 0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); } 30% { box-shadow: 0 0 24px rgba(34, 197, 94, 0.8); transform: scale(1.06); } 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); opacity: 0; } } /* Race Mode - No Tape Notice */ .race-no-tape-notice { position: absolute; top: 30px; left: 50%; transform: translateX(-50%) translateY(-50%); background: linear-gradient(135deg, #8B4513 0%, #654321 100%); border: 2px solid #D2691E; border-radius: 6px; padding: 2px 50px; display: none; align-items: center; justify-content: center; gap: 10px; z-index: 999999; font-family: var(--font-display); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); white-space: nowrap; min-width: 260px; height: 26px; } /* Force display in race mode on both body and reels-area */ body.race-mode .reels-container .race-no-tape-notice, body.race-mode .race-no-tape-notice, .race-mode .race-no-tape-notice { display: flex !important; } .race-notice-icon { font-size: 14px; animation: raceNoticeGallop 0.6s ease-in-out infinite; } @keyframes raceNoticeGallop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .race-notice-text { font-size: 11px; color: #FFD700; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } /* Race mode LED styling */ .race-mode .reel-led { opacity: 0.3; pointer-events: none; background: #333 !important; box-shadow: none !important; } /* Mobile adjustments for race notice */ @media (max-width: 600px) { .race-no-tape-notice { top: 26px; padding: 2px 40px; gap: 8px; border-radius: 5px; min-width: 220px; height: 24px; } .race-notice-icon { font-size: 12px; } .race-notice-text { font-size: 10px; } } /* Win Toast Overlay */ .win-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%); border: 3px solid var(--gold); border-radius: 16px; padding: 12px 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 100; opacity: 0; pointer-events: none; box-shadow: 0 0 30px rgba(218, 165, 32, 0.5), 0 0 60px rgba(218, 165, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: none; } .win-toast.show { animation: winToastPop 2s ease-out forwards; } .win-toast.big-win { border-color: #22c55e; box-shadow: 0 0 40px rgba(34, 197, 94, 0.6), 0 0 80px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .win-toast.jackpot { border-color: #a855f7; box-shadow: 0 0 50px rgba(168, 85, 247, 0.7), 0 0 100px rgba(168, 85, 247, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @keyframes winToastPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 25% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } .win-toast-label { font-family: 'Cinzel', serif; font-size: 0.9rem; color: #888; text-transform: uppercase; letter-spacing: 3px; } .win-toast-amount { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px rgba(218, 165, 32, 0.8); } .win-toast.big-win .win-toast-amount { color: #22c55e; text-shadow: 0 0 20px rgba(34, 197, 94, 0.8); } .win-toast.jackpot .win-toast-amount { color: #a855f7; text-shadow: 0 0 20px rgba(168, 85, 247, 0.8); } /* Hide static win display on mobile */ :where(html.layout-mobile) .last-win-box { display: none; } /* Reels Container - Embossed Panel Effect */ .reels-container { position: relative; display: flex; justify-content: center; gap: var(--space-sm); margin: auto 0; background: linear-gradient(180deg, #080808 0%, #0a0a0a 50%, #050505 100%); padding: var(--space-md) var(--space-lg); border-radius: clamp(8px, 1.5vw, 12px); border: 3px solid #1a1a1a; box-shadow: inset 0 8px 20px rgba(0, 0, 0, 1), inset 0 -2px 8px rgba(255, 255, 255, 0.03), inset 4px 0 10px rgba(0, 0, 0, 0.8), inset -4px 0 10px rgba(0, 0, 0, 0.8), 0 4px 0 #0d0d0d, 0 6px 0 #1a1a1a, 0 8px 15px rgba(0, 0, 0, 0.5); position: relative; overflow: visible; z-index: 2; flex-shrink: 0; } .reels-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 20; } .reels-container.grid-mode { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--space-xs); padding: var(--space-md); position: relative; } .reel-4-wrapper .card.reel { position: relative; } /* Royal Bonus Royale 4-reel mode */ .reels-container.royale-bonus-mode { gap: var(--space-xs); flex-wrap: nowrap; } .royale-bonus-mode .reel-wrapper { flex-shrink: 1; } .royale-bonus-mode .reel-4-wrapper { display: flex !important; } .royale-bonus-mode .card.reel { width: clamp(55px, 15vw, 85px); height: clamp(80px, 22vw, 125px); } .royale-bonus-reel { background: linear-gradient(135deg, #1a1a2e 0%, #2e2e4e 50%, #1a1a2e 100%) !important; border: 3px solid #ffd700 !important; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; max-width: 60px !important; max-height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .reel4-rank { font-size: 1.5rem; font-weight: 700; font-family: 'Cinzel', serif; text-align: center; color: #ffd700 !important; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } .royale-bonus-reel .reel4-rank { color: #ffd700 !important; } .card.royale-bonus-reel { color: #ffd700 !important; } .reel-4-wrapper { align-self: center; display: none; } body.royale-bonus-mode .reel-4-wrapper { display: flex !important; } .royale-bonus-mode .reel-4-wrapper .royale-bonus-reel { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; } .royale-bonus-reel.animated { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.3) !important; animation: royalePulse 2s ease-in-out infinite; } @keyframes royalePulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.3); } 50% { box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.6), inset 0 0 30px rgba(255, 215, 0, 0.5); } } /* Crown Board Display */ .crown-board-container { width: auto; max-width: 400px; margin: 0 auto 10px auto; background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(46, 46, 78, 0.95) 100%); border: 2px solid #ffd700; border-radius: 10px; padding: 8px 15px; display: none; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .crown-board-header { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: #ffd700; white-space: nowrap; } .crown-icon { font-size: 1.2rem; } .crown-gems { display: flex; gap: 5px; justify-content: center; align-items: center; } .crown-gem { font-size: 0.9rem; opacity: 0.3; transition: all 0.3s ease; } .crown-gem.filled { opacity: 1; animation: gemShine 2s ease-in-out infinite; } @keyframes gemShine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .crown-progress-text { font-size: 0.75rem; color: #aaa; white-space: nowrap; } /* Royal Bonus Royale Modal */ #royale-bonus-modal { background: radial-gradient(ellipse at center, rgba(26, 26, 46, 0.98) 0%, rgba(15, 15, 30, 0.98) 100%); } #royale-bonus-modal.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } .royale-bonus-content { text-align: center; padding: 20px; max-width: 350px; width: calc(100vw - 40px); box-sizing: border-box; } .royale-bonus-header { margin-bottom: 15px; } .royale-crown-icon { font-size: 3rem; animation: crownBounce 1s ease-in-out infinite; } @keyframes crownBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .royale-bonus-title { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--gold); text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.8); margin: 10px 0; line-height: 1.2; } .royale-deal-info { margin-bottom: 15px; } .royale-deal-number { font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2e2e4e 0%, #1a1a2e 100%); padding: 8px 16px; border-radius: 6px; border: 2px solid var(--gold); } .royale-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 15px auto; width: 100%; } .royale-cell { background: linear-gradient(135deg, #1a1a2e 0%, #2e2e4e 100%); border: 2px solid #444; border-radius: 8px; padding: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #888; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .royale-cell.highlighted { background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.15) 0%, rgba(var(--gold-rgb), 0.08) 100%); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.5); animation: highlightPulse 1s ease-in-out infinite; } @keyframes highlightPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .royale-value { font-size: inherit; white-space: nowrap; } .royale-deal-summary { margin: 15px 0; padding: 10px; background: rgba(var(--gold-rgb), 0.2); border: 2px solid var(--gold); border-radius: 8px; } .royale-deal-label { font-size: 0.8rem; color: #888; margin-right: 8px; } .royale-deal-total { font-size: 1.5rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); } .royale-bonus-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 15px; } .royale-take-btn { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.4); } .royale-take-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.6); } .royale-pass-btn { background: linear-gradient(135deg, #4a4a6a 0%, #2a2a4a 100%); color: #fff; border: 2px solid #666; padding: 12px 24px; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .royale-pass-btn:hover:not(:disabled) { background: linear-gradient(135deg, #5a5a7a 0%, #3a3a5a 100%); border-color: #888; } .royale-pass-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Royal Bonus Royale - Enhanced Animations */ /* Intro Splash Overlay */ .royale-intro-splash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .royale-intro-splash.active { opacity: 1; visibility: visible; } .royale-sparkle-container { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; } .royale-sparkle { position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, #fff 0%, var(--gold) 50%, transparent 100%); border-radius: 50%; animation: sparkleExplode 1.5s ease-out forwards; box-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold); } @keyframes sparkleExplode { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } } .royale-intro-crown { font-size: 6rem; animation: crownDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform: translateY(-200px); text-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 215, 0, 0.5); filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.6)); } @keyframes crownDrop { 0% { transform: translateY(-200px) scale(0.5); opacity: 0; } 60% { transform: translateY(10px) scale(1.1); opacity: 1; } 80% { transform: translateY(-5px) scale(1); } 100% { transform: translateY(0) scale(1); opacity: 1; } } .royale-intro-title { font-family: 'Cinzel', serif; font-size: 2.5rem; color: var(--gold); text-align: center; margin-top: 20px; animation: titlePulseGlow 1s ease-in-out infinite, titleFadeIn 0.5s ease-out 0.5s both; text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.8), 0 0 40px rgba(var(--gold-rgb), 0.5), 0 0 60px rgba(var(--gold-rgb), 0.3); line-height: 1.2; opacity: 0; } @keyframes titleFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes titlePulseGlow { 0%, 100% { text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.8), 0 0 40px rgba(var(--gold-rgb), 0.5), 0 0 60px rgba(var(--gold-rgb), 0.3); transform: scale(1); } 50% { text-shadow: 0 0 30px rgba(var(--gold-rgb), 1), 0 0 60px rgba(var(--gold-rgb), 0.8), 0 0 90px rgba(var(--gold-rgb), 0.5); transform: scale(1.02); } } /* Border Lights Effect */ .royale-bonus-content { position: relative; overflow: hidden; } .royale-border-lights { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: 15px; z-index: 0; } .royale-border-lights::before, .royale-border-lights::after { content: ''; position: absolute; background: linear-gradient(90deg, transparent 0%, var(--gold) 10%, #fff 20%, var(--gold) 30%, transparent 40%, transparent 60%, var(--gold) 70%, #fff 80%, var(--gold) 90%, transparent 100% ); background-size: 200% 100%; animation: chaseLights 2s linear infinite; } .royale-border-lights::before { top: 0; left: 0; right: 0; height: 3px; } .royale-border-lights::after { bottom: 0; left: 0; right: 0; height: 3px; animation-delay: -1s; } .royale-bonus-content::before, .royale-bonus-content::after { content: ''; position: absolute; background: linear-gradient(180deg, transparent 0%, var(--gold) 10%, #fff 20%, var(--gold) 30%, transparent 40%, transparent 60%, var(--gold) 70%, #fff 80%, var(--gold) 90%, transparent 100% ); background-size: 100% 200%; animation: chaseLightsVertical 2s linear infinite; z-index: 0; } .royale-bonus-content::before { top: 0; left: 0; bottom: 0; width: 3px; animation-delay: -0.5s; } .royale-bonus-content::after { top: 0; right: 0; bottom: 0; width: 3px; animation-delay: -1.5s; } @keyframes chaseLights { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes chaseLightsVertical { 0% { background-position: 0 200%; } 100% { background-position: 0 -200%; } } /* Cell Face-Down State */ .royale-cell.face-down { background: linear-gradient(135deg, #2e2e4e 0%, #1a1a2e 100%); border-color: var(--gold); cursor: default; transform-style: preserve-3d; perspective: 1000px; } .royale-cell.face-down .royale-value { display: none; } .royale-cell.face-down::before { content: '👑'; font-size: 1.5rem; display: block; } /* Cell Flip Animation */ .royale-cell.flipping { animation: cellFlip 0.4s ease-out forwards; } @keyframes cellFlip { 0% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(90deg) scale(1.1); } 100% { transform: rotateY(0deg) scale(1); } } .royale-cell.revealed { background: linear-gradient(135deg, #1a1a2e 0%, #2e2e4e 100%); border-color: #666; animation: cellRevealPop 0.3s ease-out; } @keyframes cellRevealPop { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } /* Enhanced Highlight Animation */ .royale-cell.highlighted { animation: highlightPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, highlightPulseGlow 1s ease-in-out 0.5s infinite; } @keyframes highlightPopIn { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(var(--gold-rgb), 0); } 50% { transform: scale(1.15); } 100% { transform: scale(1.08); box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.6), 0 0 40px rgba(var(--gold-rgb), 0.3); } } @keyframes highlightPulseGlow { 0%, 100% { transform: scale(1.08); box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.6), 0 0 40px rgba(var(--gold-rgb), 0.3); } 50% { transform: scale(1.12); box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.8), 0 0 60px rgba(var(--gold-rgb), 0.5); } } /* Button Enhancements */ .royale-take-btn { position: relative; animation: takeButtonGlow 1.5s ease-in-out infinite; z-index: 1; } @keyframes takeButtonGlow { 0%, 100% { box-shadow: 0 4px 15px rgba(var(--gold-rgb), 0.4), 0 0 20px rgba(var(--gold-rgb), 0.2); } 50% { box-shadow: 0 4px 25px rgba(var(--gold-rgb), 0.7), 0 0 40px rgba(var(--gold-rgb), 0.4); } } .royale-take-btn:disabled, .royale-pass-btn:disabled { opacity: 0.4; cursor: not-allowed; animation: none; } .royale-pass-btn { position: relative; z-index: 1; } /* Deal Summary Animation */ .royale-deal-summary { position: relative; z-index: 1; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .royale-deal-summary.visible { opacity: 1; transform: translateY(0); } /* Shuffle Animation */ .royale-grid.shuffling .royale-cell { animation: shuffleWiggle 0.3s ease-in-out; } @keyframes shuffleWiggle { 0% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-5px) rotate(-2deg); } 50% { transform: translateX(5px) rotate(2deg); } 75% { transform: translateX(-3px) rotate(-1deg); } 100% { transform: translateX(0) rotate(0deg); } } /* Celebration Particles */ .royale-celebration-particle { position: fixed; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 10001; animation: celebrationBurst 1s ease-out forwards; } @keyframes celebrationBurst { 0% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } } /* Content visibility control */ .royale-bonus-content.hidden { opacity: 0; visibility: hidden; } .royale-bonus-content.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Mobile adjustments for intro */ @media (max-width: 480px) { .royale-intro-crown { font-size: 4rem; } .royale-intro-title { font-size: 1.8rem; } } /* Prestige Crown Cosmetics - Deep Burgundy & Gold Regal Theme */ .cosmetic-spin-crown { background: repeating-linear-gradient( 45deg, rgba(255, 200, 50, 0.15) 0px, rgba(255, 200, 50, 0.15) 2px, transparent 2px, transparent 8px ), repeating-linear-gradient( -45deg, rgba(255, 200, 50, 0.1) 0px, rgba(255, 200, 50, 0.1) 2px, transparent 2px, transparent 8px ), linear-gradient(180deg, #d4af37 0%, #c5a028 20%, #b8960f 40%, #d4af37 60%, #e8c547 80%, #d4af37 100%) !important; background-size: 12px 12px, 12px 12px, 100% 100%; border: 3px solid #5c1a2a !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(92, 26, 42, 0.5) !important; animation: crownButtonPulse 3s ease-in-out infinite; position: relative; overflow: hidden; } .cosmetic-spin-crown::before { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(92, 26, 42, 0.6) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .cosmetic-spin-crown::after { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 70% ); animation: crownSheen 4s ease-in-out infinite; pointer-events: none; } @keyframes crownButtonPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(92, 26, 42, 0.5); } 50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 25px rgba(212, 175, 55, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(92, 26, 42, 0.5); } } @keyframes crownSheen { 0%, 100% { transform: translateX(-50%) translateY(-50%) rotate(45deg); } 50% { transform: translateX(50%) translateY(50%) rotate(45deg); } } .cosmetic-border-crown { background: linear-gradient(180deg, #5c1a2a 0%, #7a2238 15%, #5c1a2a 30%, #4a1525 50%, #5c1a2a 70%, #7a2238 85%, #5c1a2a 100%) !important; border: 3px solid #d4af37 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.1) !important; position: relative; } .cosmetic-border-crown .card.reel { animation: crownReelGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .cosmetic-border-crown .card.reel:nth-child(1) { animation-delay: 0s; } .cosmetic-border-crown .card.reel:nth-child(2) { animation-delay: 1s; } .cosmetic-border-crown .card.reel:nth-child(3) { animation-delay: 2s; } @keyframes crownReelGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.25); } } .bg-prestige-crown { background: linear-gradient(180deg, #1a0810 0%, #2a0e18 10%, #3d1422 25%, #4a1828 40%, #3d1422 60%, #2a0e18 80%, #1a0810 100%) !important; position: relative; } .bg-prestige-crown .crown-pattern-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, rgba(212, 175, 55, 0.15) 2px, transparent 2px), radial-gradient(circle, rgba(212, 175, 55, 0.1) 2px, transparent 2px); background-size: 24px 24px, 24px 24px; background-position: 0 0, 12px 12px; pointer-events: none; z-index: 1; border-radius: inherit; } .bg-prestige-crown .crown-vignette-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 15%, rgba(212, 175, 55, 0.2) 0%, transparent 45%), radial-gradient(ellipse at 70% 85%, rgba(212, 175, 55, 0.15) 0%, transparent 40%), linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, transparent 25%, transparent 75%, rgba(212, 175, 55, 0.1) 100%); pointer-events: none; z-index: 1; border-radius: inherit; } .bg-prestige-crown .vip-monitor, .bg-prestige-crown .mobile-stats-row, .bg-prestige-crown .ticker-container, .bg-prestige-crown .news-ticker, .bg-prestige-crown .reels-container, .bg-prestige-crown .game-header, .bg-prestige-crown .bet-controls, .bg-prestige-crown .action-buttons, .bg-prestige-crown .message-log { position: relative; z-index: 10; } /* Responsive adjustments for 4 reels on mobile - Royal Bonus */ @media (max-width: 480px) { .royale-bonus-mode .card.reel { width: clamp(45px, 18vw, 70px); height: clamp(65px, 26vw, 100px); } .royale-bonus-mode .reel-4-wrapper { display: flex !important; } .royale-bonus-mode .reel-4-wrapper .royale-bonus-reel, .royale-bonus-reel { width: 45px !important; height: 45px !important; min-width: 45px !important; min-height: 45px !important; max-width: 45px !important; max-height: 45px !important; } .reel4-rank { font-size: 1.2rem; } .crown-board-header { font-size: 0.7rem; } .crown-icon { font-size: 1rem; } .crown-gems { gap: 3px; } .crown-gem { font-size: 0.75rem; } .crown-progress-text { font-size: 0.65rem; } .royale-bonus-content { padding: 12px; width: calc(100vw - 24px); } .royale-bonus-title { font-size: 1.4rem; } .royale-grid { gap: 5px; } .royale-cell { font-size: 0.8rem; } } /* Reel Wrapper for LED positioning */ .reel-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); position: relative; z-index: 25; } /* LED Hold Buttons */ .reel-led { width: clamp(30px, 8vw, 45px); height: clamp(14px, 3vw, 20px); border-radius: clamp(7px, 1.5vw, 10px); border: 2px solid #8b7000; background: linear-gradient(180deg, #2a2000 0%, #3d2f00 50%, #2a2000 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; transition: all 0.2s ease; opacity: 1; position: relative; z-index: 30; } .reel-led:disabled { opacity: 1; cursor: not-allowed; } .reel-led:not(:disabled):hover { border-color: #ffd700; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.3); } .reel-led.active { background: linear-gradient(180deg, #b8860b 0%, #ffd700 50%, #b8860b 100%); border-color: #ffd700; box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 12px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4); animation: led-pulse 1.5s ease-in-out infinite; } .reel-led:disabled { opacity: 1; cursor: not-allowed; } @keyframes reel-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .reel-shake { animation: reel-shake 0.35s ease-in-out !important; } @keyframes led-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 12px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 215, 0, 1), 0 0 30px rgba(184, 134, 11, 0.6); } } @media (max-width: 480px) { .reel-led { width: 50px; height: 28px; border-radius: 14px; } } /* LED Cosmetic Variants */ .led-neon { border-color: #a855f7; background: linear-gradient(180deg, #2e1065 0%, #4c1d95 50%, #2e1065 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(168, 85, 247, 0.4); } .led-neon.active { background: linear-gradient(180deg, #7c3aed 0%, #a855f7 50%, #7c3aed 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(168, 85, 247, 0.8); } .led-gold { border-color: #d4af37; background: linear-gradient(180deg, #3d2a1a 0%, #5c4020 50%, #3d2a1a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(212, 175, 55, 0.3); } .led-gold.active { background: linear-gradient(180deg, #c9a227 0%, #ffd700 50%, #c9a227 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(212, 175, 55, 0.8); } .led-chrome { border-color: #9ca3af; background: linear-gradient(180deg, #374151 0%, #6b7280 50%, #374151 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(156, 163, 175, 0.3); } .led-chrome.active { background: linear-gradient(180deg, #9ca3af 0%, #e5e7eb 50%, #9ca3af 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 15px rgba(156, 163, 175, 0.8); } .led-fire { border-color: #fb923c; background: linear-gradient(180deg, #4a1a1a 0%, #7c2d12 50%, #4a1a1a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(251, 146, 60, 0.4); } .led-fire.active { background: linear-gradient(180deg, #ea580c 0%, #fb923c 50%, #ea580c 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(251, 146, 60, 0.8); animation: led-fire-pulse 0.8s ease-in-out infinite; } @keyframes led-fire-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(251, 146, 60, 0.8); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 25px rgba(239, 68, 68, 1); } } .led-ice { border-color: #7dd3fc; background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 50%, #0c4a6e 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(125, 211, 252, 0.3); } .led-ice.active { background: linear-gradient(180deg, #0ea5e9 0%, #7dd3fc 50%, #0ea5e9 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 15px rgba(125, 211, 252, 0.8); } .led-diamond { border-color: #c7d2fe; background: linear-gradient(180deg, #312e81 0%, #4338ca 50%, #312e81 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(199, 210, 254, 0.3); } .led-diamond.active { background: linear-gradient(180deg, #818cf8 0%, #c7d2fe 50%, #818cf8 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 15px rgba(199, 210, 254, 0.8); animation: led-diamond-sparkle 1.5s ease-in-out infinite; } @keyframes led-diamond-sparkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .led-velvet { border-color: #a855f7; background: linear-gradient(180deg, #4a1d6a 0%, #6b21a8 50%, #4a1d6a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(168, 85, 247, 0.3); } .led-velvet.active { background: linear-gradient(180deg, #9333ea 0%, #c084fc 50%, #9333ea 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(168, 85, 247, 0.7); } .led-midnight { border-color: #6366f1; background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(99, 102, 241, 0.3); } .led-midnight.active { background: linear-gradient(180deg, #4f46e5 0%, #818cf8 50%, #4f46e5 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(99, 102, 241, 0.8); } .led-emerald { border-color: #34d399 !important; background: linear-gradient(180deg, #064e3b 0%, #047857 50%, #064e3b 100%) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(52, 211, 153, 0.3) !important; } .led-emerald.active { background: linear-gradient(180deg, #10b981 0%, #34d399 50%, #10b981 100%) !important; box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(52, 211, 153, 0.8) !important; } /* Velvet Night LED */ .led-velvet_night { border-color: #4a2c82; background: linear-gradient(180deg, #1a0a2e 0%, #2d1560 50%, #1a0a2e 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(74, 44, 130, 0.4); } .led-velvet_night.active { background: linear-gradient(180deg, #4a2c82 0%, #6b3fa0 50%, #4a2c82 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(74, 44, 130, 0.8); } /* Cosmic Edge LED - Cyan/Blue Theme */ .led-cosmic_edge { border-color: #66d9ff; background: linear-gradient(180deg, #001a2e 0%, #003366 50%, #001a2e 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 191, 255, 0.4); } .led-cosmic_edge.active { background: linear-gradient(180deg, #00bfff 0%, #66d9ff 50%, #00bfff 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(0, 191, 255, 0.9); animation: led-cosmic-pulse 1.5s ease-in-out infinite; } @keyframes led-cosmic-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(0, 191, 255, 0.9); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 25px rgba(102, 217, 255, 1); } } /* Stellar Glow LED - Golden/Amber Theme */ .led-stellar_glow { border-color: #ffc966; background: linear-gradient(180deg, #1a0f00 0%, #3d2600 50%, #1a0f00 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 149, 0, 0.4); } .led-stellar_glow.active { background: linear-gradient(180deg, #ff9500 0%, #ffc966 50%, #ff9500 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 149, 0, 0.9); animation: led-stellar-pulse 1.5s ease-in-out infinite; } @keyframes led-stellar-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 149, 0, 0.9); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 201, 102, 1); } } /* Nebula Dreams LED - Pink/Magenta Theme */ .led-nebula_dreams { border-color: #ff69b4; background: linear-gradient(180deg, #1a0a15 0%, #3d1530 50%, #1a0a15 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 20, 147, 0.4); } .led-nebula_dreams.active { background: linear-gradient(180deg, #ff1493 0%, #ff69b4 50%, #ff1493 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 20, 147, 0.9); animation: led-nebula-pulse 2s ease-in-out infinite; } @keyframes led-nebula-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 20, 147, 0.9); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 105, 180, 1); } } /* Aurora Vault LED - Teal/Pink Theme */ .led-aurora_vault { border-color: #2dd4bf; background: linear-gradient(180deg, #050d1a 0%, #0d3d2a 40%, #2a1a30 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(45, 212, 191, 0.4); } .led-aurora_vault.active { background: linear-gradient(180deg, #0d9488 0%, #2dd4bf 50%, #831843 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(45, 212, 191, 0.9); animation: led-aurora-pulse 3s ease-in-out infinite; } @keyframes led-aurora-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(45, 212, 191, 0.9); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(131, 24, 67, 0.8); } } /* Chrome Royale LED - Silver/Gold Theme */ .led-chrome_royale { border-color: #ffd700; background: linear-gradient(180deg, #4a4a4a 0%, #6b6b6b 50%, #4a4a4a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.4); } .led-chrome_royale.active { background: linear-gradient(180deg, #c0c0c0 0%, #ffffff 50%, #c0c0c0 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 215, 0, 0.9); animation: led-chrome-royale-pulse 1.5s ease-in-out infinite; } @keyframes led-chrome-royale-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 215, 0, 0.9); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 223, 0, 1); } } /* Prestige Prisma LED - Rainbow only when held/pinned */ .led-prestige_prisma { border-color: #c0c0c0; background: linear-gradient(180deg, #3a3a3a 0%, #5a5a5a 50%, #3a3a3a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(192, 192, 192, 0.3); } .led-prestige_prisma.active { border-color: #ffffff; background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b); background-size: 200% 100%; box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.9); animation: led-prisma-active 2s linear infinite; } @keyframes led-prisma-active { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .led-royal { border-color: #ffd700; background: linear-gradient(180deg, #581c87 0%, #7c3aed 50%, #581c87 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.4); } .led-royal.active { background: linear-gradient(180deg, #a855f7 0%, #ffd700 50%, #a855f7 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 215, 0, 0.9); animation: led-royal-pulse 2s ease-in-out infinite; } @keyframes led-royal-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 215, 0, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(168, 85, 247, 0.9); } } .led-ruby { border-color: #DC143C; background: linear-gradient(180deg, #4a0a0a 0%, #8b0000 50%, #4a0a0a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(220, 20, 60, 0.4); } .led-ruby.active { background: linear-gradient(180deg, #b91c1c 0%, #ef4444 50%, #b91c1c 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 18px rgba(220, 20, 60, 0.9); animation: led-ruby-pulse 1.8s ease-in-out infinite; } @keyframes led-ruby-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(220, 20, 60, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(139, 0, 0, 1); } } /* Developer Mode LED - Wireframe/Blueprint aesthetic */ .led-developer { border: 2px dashed #00ff88 !important; border-radius: 4px !important; background: transparent !important; box-shadow: 0 0 8px rgba(0, 255, 136, 0.3), inset 0 0 10px rgba(0, 255, 136, 0.1) !important; position: relative; } .led-developer::before { content: 'LED'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 6px; font-family: 'Courier New', monospace; color: #00ff88; opacity: 0.7; letter-spacing: 1px; } .led-developer.active { background: rgba(0, 255, 136, 0.15) !important; box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), inset 0 0 15px rgba(0, 255, 136, 0.3) !important; animation: led-developer-pulse 1s ease-in-out infinite !important; } @keyframes led-developer-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), inset 0 0 15px rgba(0, 255, 136, 0.3); } 50% { box-shadow: 0 0 25px rgba(0, 255, 136, 0.9), inset 0 0 20px rgba(0, 255, 136, 0.5); } } .led-debtfree { border-color: #7dd3fc; background: linear-gradient(180deg, #0c3a5a 0%, #155e75 50%, #0c3a5a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(125, 211, 252, 0.4); position: relative; } .led-debtfree.active { background: linear-gradient(180deg, #22d3ee 0%, #a5f3fc 50%, #22d3ee 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 20px rgba(125, 211, 252, 0.9); animation: led-debtfree-sparkle 2s ease-in-out infinite; } .led-debtfree.active::before { content: '💎'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.9rem; filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.9)); animation: led-debtfree-diamond 2s ease-in-out infinite; z-index: 1; } @keyframes led-debtfree-diamond { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } } @keyframes led-debtfree-sparkle { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 15px rgba(125, 211, 252, 0.7); filter: brightness(1); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.6), 0 0 25px rgba(165, 243, 252, 1); filter: brightness(1.2); } } .led-shadowmaster { border-color: #8b5cf6; background: linear-gradient(180deg, #1a1030 0%, #2d1b4e 50%, #1a1030 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(139, 92, 246, 0.4); } .led-shadowmaster.active { background: linear-gradient(180deg, #7c3aed 0%, #a855f7 50%, #7c3aed 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(139, 92, 246, 0.9); animation: led-shadowmaster-pulse 2s ease-in-out infinite; } @keyframes led-shadowmaster-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(139, 92, 246, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(168, 85, 247, 1); } } .led-prestige_crown { border-color: #7a2238; background: linear-gradient(180deg, #4a1525 0%, #5c1a2a 50%, #4a1525 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(122, 34, 56, 0.4); } .led-prestige_crown.active { background: linear-gradient(180deg, #7a2238 0%, #9c2f4d 50%, #7a2238 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(122, 34, 56, 0.9); animation: led-prestige-crown-pulse 2s ease-in-out infinite; } @keyframes led-prestige-crown-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(122, 34, 56, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(156, 47, 77, 1); } } .led-celestial_dawn { border-color: #ffd700; background: linear-gradient(180deg, #3d1f00 0%, #5a2d00 50%, #3d1f00 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.4); } .led-celestial_dawn.active { background: linear-gradient(180deg, #ff9500 0%, #ffd700 50%, #ff9500 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 215, 0, 0.9); animation: led-celestial-pulse 2s ease-in-out infinite; } @keyframes led-celestial-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 149, 0, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 215, 0, 1); } } .led-ocean_depths { border-color: #00bfff; background: linear-gradient(180deg, #002040 0%, #003060 50%, #002040 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 191, 255, 0.4); } .led-ocean_depths.active { background: linear-gradient(180deg, #0099ff 0%, #00bfff 50%, #0099ff 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 20px rgba(0, 191, 255, 0.9); animation: led-ocean-pulse 2.5s ease-in-out infinite; } @keyframes led-ocean-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 15px rgba(0, 153, 255, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.5), 0 0 25px rgba(0, 191, 255, 1); } } .led-volcanic_forge { border-color: #ff4500; background: linear-gradient(180deg, #330a00 0%, #4a0f00 50%, #330a00 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 69, 0, 0.4); } .led-volcanic_forge.active { background: linear-gradient(180deg, #cc3300 0%, #ff4500 50%, #cc3300 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 69, 0, 0.9); animation: led-volcanic-pulse 1.5s ease-in-out infinite; } @keyframes led-volcanic-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(204, 51, 0, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 69, 0, 1); } } .led-neon_blue { border-color: #3b82f6; background: linear-gradient(180deg, #0a1a3a 0%, #102040 50%, #0a1a3a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(59, 130, 246, 0.4); } .led-neon_blue.active { background: linear-gradient(180deg, #2563eb 0%, #3b82f6 50%, #2563eb 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(59, 130, 246, 0.9); animation: led-neon-blue-pulse 1.5s ease-in-out infinite; } @keyframes led-neon-blue-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(59, 130, 246, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(59, 130, 246, 1); } } .led-neon_green { border-color: #22c55e; background: linear-gradient(180deg, #0a2a10 0%, #103a18 50%, #0a2a10 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(34, 197, 94, 0.4); } .led-neon_green.active { background: linear-gradient(180deg, #16a34a 0%, #22c55e 50%, #16a34a 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(34, 197, 94, 0.9); animation: led-neon-green-pulse 1.5s ease-in-out infinite; } @keyframes led-neon-green-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(34, 197, 94, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(34, 197, 94, 1); } } .led-neon_pink { border-color: #ec4899; background: linear-gradient(180deg, #2a0a1a 0%, #3a1028 50%, #2a0a1a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(236, 72, 153, 0.4); } .led-neon_pink.active { background: linear-gradient(180deg, #db2777 0%, #ec4899 50%, #db2777 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(236, 72, 153, 0.9); animation: led-neon-pink-pulse 1.5s ease-in-out infinite; } @keyframes led-neon-pink-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(236, 72, 153, 0.7); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(236, 72, 153, 1); } } .payline-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; } .payline-overlay svg { width: 100%; height: 100%; } .payline { stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: 0; filter: drop-shadow(0 0 4px currentColor); } .payline.active { opacity: 0.9; animation: payline-pulse 1.5s ease-in-out infinite; } @keyframes payline-pulse { 0%, 100% { opacity: 0.6; stroke-width: 4; } 50% { opacity: 1; stroke-width: 6; } } .payline-1 { stroke: #ff6b6b; } .payline-2 { stroke: #4ecdc4; } .payline-3 { stroke: #ffe66d; } .payline-4 { stroke: #95e1d3; } .payline-5 { stroke: #f38181; } .payline-6 { stroke: #aa96da; } .payline-7 { stroke: #fcbad3; } .payline-8 { stroke: #a8d8ea; } .payline-9 { stroke: #f9f871; } .payline-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; padding: 8px; background: rgba(0,0,0,0.8); border-radius: 8px; } .payline-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: #ccc; cursor: pointer; padding: 3px 6px; border-radius: 4px; transition: background 0.2s; } .payline-legend-item:hover { background: rgba(255,255,255,0.1); } .payline-legend-item.selected { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); } .payline-legend-item .line-color { width: 20px; height: 4px; border-radius: 2px; } .payline-show-all { border: 1px dashed rgba(255,255,255,0.3); } /* Card Styles */ .card { width: var(--card-width); height: var(--card-height); min-width: var(--card-width); min-height: var(--card-height); max-width: var(--card-width); max-height: var(--card-height); box-sizing: border-box; background-color: #e5e5e5; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bold; position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); border: 3px solid #999; overflow: hidden; margin: auto; transition: transform 0.1s; } .grid-mode .card { width: clamp(55px, 10vw, 75px); height: clamp(77px, 14vw, 105px); min-width: clamp(55px, 10vw, 75px); min-height: clamp(77px, 14vw, 105px); max-width: clamp(55px, 10vw, 75px); max-height: clamp(77px, 14vw, 105px); font-size: 0.8em; } .grid-mode .card-rank { font-size: clamp(1.2rem, 3vw, 1.5rem); } .grid-mode .card-suit { font-size: clamp(1.4rem, 3.5vw, 1.8rem); } .card.red { color: #b91c1c; } .card.black { color: #1e293b; } .card.purple { color: #e9d5ff; background: linear-gradient(135deg, #581c87 0%, #7c3aed 50%, #581c87 100%); border: 3px solid #a855f7; box-shadow: 0 0 20px rgba(147, 51, 234, 0.6), inset 0 0 15px rgba(168, 85, 247, 0.3); } .card.purple .card-rank, .card.purple .card-suit { text-shadow: 0 0 10px rgba(147, 51, 234, 0.8); } .card.joker { background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f3e8ff 10px, #f3e8ff 20px); color: #7e22ce; border-color: #a855f7; } .card.joker .card-rank { font-size: 1.1rem; letter-spacing: -1px; margin-bottom: 5px; } .card.joker .card-suit { font-size: 3rem; color: #a855f7; } .card-rank { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 4vw, 2.2rem); z-index: 2; line-height: 1; } .card-suit { font-size: clamp(2rem, 5vw, 2.8rem); z-index: 2; line-height: 1; } .card-face-down { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: clamp(2rem, 6vw, 3.5rem); color: rgba(255, 255, 255, 0.25); font-weight: 900; font-family: 'Cinzel', serif; letter-spacing: 2px; } .card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; border-radius: 6px; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0.3); font-size: 1.5rem; border: 4px solid rgba(0, 0, 0, 0.2); font-family: 'Cinzel', serif; } .card-back.reel1 { background: #991b1b; background-image: radial-gradient(#7f1d1d 15%, transparent 16%); background-size: 10px 10px; } .card-back.reel2 { background: #1e3a8a; background-image: radial-gradient(#172554 15%, transparent 16%); background-size: 10px 10px; } .card-back.reel3 { background: #166534; background-image: radial-gradient(#14532d 15%, transparent 16%); background-size: 10px 10px; } .card.winner { animation: winGlow 1.5s infinite; border-color: var(--gold) !important; } .card.upgrade-gilded { border: 2px solid #b8860b !important; background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%); background-size: 200% 200%; animation: goldShimmer 3s ease infinite; color: #4a3b00 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } .card.upgrade-gilded .card-rank, .card.upgrade-gilded .card-suit { color: #4a3b00 !important; z-index: 2; } .card.upgrade-gilded.red .card-rank, .card.upgrade-gilded.red .card-suit { color: #8b1a1a !important; text-shadow: 0px 1px 0px rgba(255, 215, 0, 0.6), 0 0 8px rgba(180, 60, 60, 0.4); } .card.upgrade-metal { border: 3px solid #5a6275 !important; background: radial-gradient(circle at 8px 8px, #4a5568 4px, transparent 4px), radial-gradient(circle at calc(100% - 8px) 8px, #4a5568 4px, transparent 4px), radial-gradient(circle at 8px calc(100% - 8px), #4a5568 4px, transparent 4px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #4a5568 4px, transparent 4px), linear-gradient(135deg, #6b7280 0%, #9ca3af 15%, #6b7280 30%, #d1d5db 45%, #6b7280 60%, #9ca3af 75%, #6b7280 100%); background-size: 100% 100%; animation: metalShine 4s ease infinite; color: #1f2937 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px -1px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 0 12px rgba(139, 157, 195, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2); } .card.upgrade-metal .card-rank, .card.upgrade-metal .card-suit { color: #1f2937 !important; z-index: 2; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); } .card.upgrade-metal.red .card-suit, .card.upgrade-metal.red .card-rank { color: #8b2942 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0 0 8px rgba(180, 60, 90, 0.4); } @keyframes metalShine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } .card.upgrade-moved { border: 2px solid #22d3d3 !important; background: linear-gradient(135deg, #0891b2 0%, #67e8f9 50%, #0891b2 100%); background-size: 200% 200%; animation: cyanShimmer 3s ease infinite; color: #083344 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(34, 211, 211, 0.5); } .card.upgrade-moved .card-rank, .card.upgrade-moved .card-suit { color: #083344 !important; z-index: 2; } .card.upgrade-moved.red .card-rank, .card.upgrade-moved.red .card-suit { color: #7f1d1d !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4), 0 0 8px rgba(180, 60, 90, 0.4); } .card.upgrade-transformed { border: 2px solid #a855f7 !important; background: linear-gradient(135deg, #7c3aed 0%, #e879f9 50%, #7c3aed 100%); background-size: 200% 200%; animation: purpleShimmer 3s ease infinite; color: #2e1065 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); } .card.upgrade-transformed .card-rank, .card.upgrade-transformed .card-suit { color: #2e1065 !important; z-index: 2; } .card.upgrade-transformed.red .card-rank, .card.upgrade-transformed.red .card-suit { color: #7f1d1d !important; text-shadow: 0px 1px 0px rgba(168, 85, 247, 0.4), 0 0 8px rgba(180, 60, 90, 0.4); } /* Transformed + Secondary Upgrade Combinations */ .card.upgrade-transformed.border-diamond { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), 0 0 25px rgba(185, 242, 255, 0.4), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-transformed.border-gilded { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-transformed.border-metal { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-transformed.border-cloned { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-transformed.border-moved { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-transformed.border-added { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-transformed.border-sticky { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-transformed.border-glass { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } .card.upgrade-added { border: 2px solid #22c55e !important; background: linear-gradient(135deg, #16a34a 0%, #86efac 50%, #16a34a 100%); background-size: 200% 200%; animation: greenShimmer 3s ease infinite; color: #052e16 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); } .card.upgrade-added .card-rank, .card.upgrade-added .card-suit { color: #052e16 !important; z-index: 2; } .card.upgrade-added.red .card-rank, .card.upgrade-added.red .card-suit { color: #7f1d1d !important; text-shadow: 0px 1px 0px rgba(34, 197, 94, 0.4), 0 0 8px rgba(180, 60, 90, 0.4); } .card.upgrade-cloned { border: 2px solid #f472b6 !important; background: linear-gradient(135deg, #db2777 0%, #fbcfe8 50%, #db2777 100%); background-size: 200% 200%; animation: pinkShimmer 3s ease infinite; color: #500724 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(244, 114, 182, 0.5); } .card.upgrade-cloned .card-rank, .card.upgrade-cloned .card-suit { color: #500724 !important; z-index: 2; } .card.upgrade-cloned.red .card-rank, .card.upgrade-cloned.red .card-suit { color: #991b1b !important; text-shadow: 0px 1px 0px rgba(244, 114, 182, 0.4), 0 0 8px rgba(220, 50, 80, 0.5); } /* Diamond Card - premium upgrade from gilded (cartoon blue diamond style) */ .card.upgrade-diamond { border: 3px solid #38bdf8 !important; background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 15%, #38bdf8 30%, #e0f7ff 50%, #38bdf8 70%, #7dd3fc 85%, #bae6fd 100%); background-size: 400% 400%; animation: diamondSparkle 2s ease infinite; color: #0c4a6e !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); box-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 40px rgba(56, 189, 248, 0.4); } .card.upgrade-diamond .card-rank, .card.upgrade-diamond .card-suit { color: #0369a1 !important; z-index: 2; } .card.upgrade-diamond.red .card-rank, .card.upgrade-diamond.red .card-suit { color: #b91c1c !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8), 0 0 10px rgba(220, 60, 80, 0.5); } @keyframes diamondSparkle { 0% { background-position: 0% 50%; filter: brightness(1); } 25% { filter: brightness(1.2); } 50% { background-position: 100% 50%; filter: brightness(1); } 75% { filter: brightness(1.1); } 100% { background-position: 0% 50%; filter: brightness(1); } } /* Diamond + Secondary Upgrade Combinations */ .card.upgrade-diamond.border-sticky { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-diamond.border-metal { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-diamond.border-glass { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } .card.upgrade-diamond.border-gilded { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-diamond.border-cloned { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-diamond.border-moved { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-diamond.border-transformed { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-diamond.border-added { box-shadow: 0 0 20px rgba(185, 242, 255, 0.8), 0 0 40px rgba(125, 211, 252, 0.4), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } /* Sticky Card - stays on reel */ .card.upgrade-sticky { border: 3px solid #ff6b35 !important; background: linear-gradient(135deg, #ea580c 0%, #fb923c 30%, #fdba74 50%, #fb923c 70%, #ea580c 100%); color: #431407 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(255, 107, 53, 0.6); } .card.upgrade-sticky .card-rank, .card.upgrade-sticky .card-suit { color: #431407 !important; z-index: 2; } .card.upgrade-sticky.red .card-rank, .card.upgrade-sticky.red .card-suit { color: #991b1b !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4), 0 0 8px rgba(220, 60, 80, 0.4); } .card.upgrade-sticky::before { content: '📌'; position: absolute; top: 2px; left: 2px; font-size: 22px; z-index: 100; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } /* Glass Card - fragile but powerful (more transparent) */ .card.upgrade-glass { border: 2px solid rgba(136, 216, 240, 0.6) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(224, 247, 255, 0.35) 20%, rgba(186, 230, 253, 0.3) 40%, rgba(255, 255, 255, 0.45) 60%, rgba(186, 230, 253, 0.35) 80%, rgba(255, 255, 255, 0.4) 100%); background-size: 200% 200%; animation: glassShimmer 4s ease infinite; color: #0369a1 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9), 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 12px rgba(136, 216, 240, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.3); backdrop-filter: blur(2px); } .card.upgrade-glass .card-rank, .card.upgrade-glass .card-suit { color: #0369a1 !important; z-index: 2; } .card.upgrade-glass.red .card-rank, .card.upgrade-glass.red .card-suit { color: #dc2626 !important; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8), 0 0 10px rgba(220, 60, 80, 0.5); } .card.upgrade-glass::after { content: ''; position: absolute; top: 5px; left: 5px; width: 15px; height: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), transparent); border-radius: 50%; transform: rotate(-30deg); } .card.marked-card { position: relative; } .marker-badge { position: absolute; top: 2px; left: 3px; font-size: 0.75rem; line-height: 1; z-index: 6; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.9)); animation: markerGlow 2s ease-in-out infinite; } @keyframes markerGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.6)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 105, 180, 1)); } } @keyframes glassShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Glass shatter particle effect */ .glass-shard { position: fixed; width: 15px; height: 15px; background: linear-gradient(135deg, #e0f7ff, #88d8f0); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); pointer-events: none; z-index: 10000; animation: shatterFall 1s ease-out forwards; } @keyframes shatterFall { 0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translateY(200px) rotate(720deg) scale(0.3); } } @keyframes pinkShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes cyanShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes purpleShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes greenShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Metal + Secondary Upgrade Combinations */ .card.upgrade-metal.border-diamond { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-metal.border-transformed { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-metal.border-gilded { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-metal.border-cloned { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-metal.border-moved { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-metal.border-added { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-metal.border-sticky { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-metal.border-glass { box-shadow: 0 0 15px rgba(156, 163, 175, 0.6), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Gilded + Secondary Upgrade Combinations */ .card.upgrade-gilded.border-diamond { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-gilded.border-transformed { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-gilded.border-metal { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-gilded.border-cloned { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-gilded.border-moved { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-gilded.border-added { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-gilded.border-sticky { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-gilded.border-glass { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Cloned + Secondary Upgrade Combinations */ .card.upgrade-cloned.border-diamond { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-cloned.border-transformed { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-cloned.border-gilded { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-cloned.border-metal { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-cloned.border-moved { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-cloned.border-added { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-cloned.border-sticky { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-cloned.border-glass { box-shadow: 0 0 15px rgba(244, 114, 182, 0.6), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Moved + Secondary Upgrade Combinations */ .card.upgrade-moved.border-diamond { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-moved.border-transformed { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-moved.border-gilded { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-moved.border-metal { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-moved.border-cloned { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-moved.border-added { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-moved.border-sticky { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-moved.border-glass { box-shadow: 0 0 15px rgba(34, 211, 211, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Added + Secondary Upgrade Combinations */ .card.upgrade-added.border-diamond { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-added.border-transformed { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-added.border-gilded { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-added.border-metal { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-added.border-cloned { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-added.border-moved { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-added.border-sticky { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } .card.upgrade-added.border-glass { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Sticky + Secondary Upgrade Combinations */ .card.upgrade-sticky.border-diamond { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #b9f2ff, inset 0 0 0 7px #7dd3fc !important; } .card.upgrade-sticky.border-transformed { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-sticky.border-gilded { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-sticky.border-metal { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-sticky.border-cloned { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-sticky.border-moved { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-sticky.border-added { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-sticky.border-glass { box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 7px rgba(200, 240, 255, 0.6) !important; } /* Glass + Secondary Upgrade Combinations */ .card.upgrade-glass.border-diamond { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #7dd3fc, inset 0 0 0 7px #0ea5e9 !important; } .card.upgrade-glass.border-transformed { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #a855f7, inset 0 0 0 7px #7c3aed !important; } .card.upgrade-glass.border-gilded { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #ffd700, inset 0 0 0 7px #b8860b !important; } .card.upgrade-glass.border-metal { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #9ca3af, inset 0 0 0 7px #4a5568 !important; } .card.upgrade-glass.border-cloned { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #f472b6, inset 0 0 0 7px #db2777 !important; } .card.upgrade-glass.border-moved { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #22d3d3, inset 0 0 0 7px #0891b2 !important; } .card.upgrade-glass.border-added { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #22c55e, inset 0 0 0 7px #15803d !important; } .card.upgrade-glass.border-sticky { box-shadow: 0 0 15px rgba(136, 216, 240, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5), inset 0 0 0 4px #ff6b35, inset 0 0 0 7px #d14a1e !important; } /* Secondary upgrade borders - subtle corner accent for cards with 2+ upgrades */ .card.border-gilded { box-shadow: inset 2px 2px 0 #ffd700, inset -2px -2px 0 #b8860b; } .card.border-metal { box-shadow: inset 2px 2px 0 #9ca3af, inset -2px -2px 0 #4a5568; } .card.border-moved { box-shadow: inset 2px 2px 0 #22d3d3, inset -2px -2px 0 #0891b2; } .card.border-transformed { box-shadow: inset 2px 2px 0 #a855f7, inset -2px -2px 0 #7c3aed; } .card.border-added { box-shadow: inset 2px 2px 0 #22c55e, inset -2px -2px 0 #15803d; } .card.border-cloned { box-shadow: inset 2px 2px 0 #f472b6, inset -2px -2px 0 #db2777; } .card.border-diamond { box-shadow: inset 2px 2px 0 #38bdf8, inset -2px -2px 0 #0ea5e9; } .card.border-sticky { box-shadow: inset 2px 2px 0 #ff6b35, inset -2px -2px 0 #d14a1e; } .card.border-glass { box-shadow: inset 2px 2px 0 rgba(136, 216, 240, 0.6), inset -2px -2px 0 rgba(56, 189, 248, 0.6); } /* Tertiary upgrade dot indicator - applied when card has 3+ upgrades */ .upgrade-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); z-index: 10; box-shadow: 0 0 6px currentColor; } .dot-gilded { background: linear-gradient(135deg, #ffd700, #b8860b); box-shadow: 0 0 6px #ffd700; } .dot-metal { background: linear-gradient(135deg, #9ca3af, #4a5568); box-shadow: 0 0 6px #9ca3af; } .dot-moved { background: linear-gradient(135deg, #22d3d3, #0891b2); box-shadow: 0 0 6px #22d3d3; } .dot-transformed { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 0 6px #a855f7; } .dot-added { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 0 6px #22c55e; } .dot-cloned { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 0 6px #f472b6; } .dot-diamond { background: linear-gradient(135deg, #e0f7ff, #7dd3fc); box-shadow: 0 0 8px #7dd3fc; } .dot-sticky { background: linear-gradient(135deg, #ff6b35, #d14a1e); box-shadow: 0 0 6px #ff6b35; } .dot-glass { background: linear-gradient(135deg, #88d8f0, #38bdf8); box-shadow: 0 0 6px #88d8f0; } .grid-mode .upgrade-dot { width: 8px; height: 8px; top: 2px; right: 2px; } .spinning .card-rank, .spinning .card-suit { animation: blurMove 0.1s infinite; color: transparent; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .spinning::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, #eee, #fff 20px, #ddd 40px); opacity: 0.9; filter: blur(5px); } /* Controls */ .control-area { margin-top: auto; padding: 0 var(--space-sm); display: flex; flex-direction: column; gap: var(--space-md); flex-shrink: 0; position: relative; z-index: 10; /* Always above decorative overlays like snowflakes */ } .sub-controls { display: flex; gap: var(--space-sm); width: 100%; } .bet-container { display: flex; justify-content: space-between; background: #111; padding: 5px; border-radius: 12px; border: 1px solid #333; position: relative; } .bet-slider { position: absolute; top: 5px; bottom: 5px; border-radius: clamp(6px, 1vw, 8px); background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; pointer-events: none; } .bet-btn { flex: 1; background: transparent; border: none; color: #888; font-weight: bold; padding: var(--space-sm); cursor: pointer; border-radius: clamp(6px, 1vw, 8px); transition: color 0.2s; font-family: 'Roboto Mono', monospace; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); position: relative; z-index: 1; } .bet-btn:hover { color: white; } .bet-btn.active { background: transparent !important; color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } /* Bet Button Cosmetic Themes */ body[data-spin-cosmetic="neon"] .bet-container { border-color: #a855f7; } body[data-spin-cosmetic="neon"] .bet-slider { background: linear-gradient(to bottom, #a855f7, #7c3aed); box-shadow: 0 0 15px rgba(168, 85, 247, 0.6); } body[data-spin-cosmetic="neon"] .bet-btn.active { color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } body[data-spin-cosmetic="gold"] .bet-container { border-color: #ffd700; } body[data-spin-cosmetic="gold"] .bet-slider { background: linear-gradient(to bottom, #ffd700, #b8860b); box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } body[data-spin-cosmetic="gold"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="chrome"] .bet-container { border-color: #a0a0a0; } body[data-spin-cosmetic="chrome"] .bet-slider { background: linear-gradient(to bottom, #e0e0e0, #a0a0a0); box-shadow: 0 0 10px rgba(200, 200, 200, 0.5); } body[data-spin-cosmetic="chrome"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="fire"] .bet-container { border-color: #ff4500; } body[data-spin-cosmetic="fire"] .bet-slider { background: linear-gradient(to bottom, #ff6b00, #cc3300); box-shadow: 0 0 15px rgba(255, 69, 0, 0.6); } body[data-spin-cosmetic="fire"] .bet-btn.active { color: #fff; text-shadow: 0 0 5px rgba(255, 100, 0, 0.8); } body[data-spin-cosmetic="ruby"] .bet-container { border-color: #DC143C; } body[data-spin-cosmetic="ruby"] .bet-slider { background: linear-gradient(to bottom, #ef4444, #b91c1c); box-shadow: 0 0 15px rgba(220, 20, 60, 0.6); } body[data-spin-cosmetic="ruby"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="ice"] .bet-container { border-color: #00bfff; } body[data-spin-cosmetic="ice"] .bet-slider { background: linear-gradient(to bottom, #87ceeb, #4a90c2); box-shadow: 0 0 15px rgba(135, 206, 235, 0.6); } body[data-spin-cosmetic="ice"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="diamond"] .bet-container { border-color: #b9f2ff; } body[data-spin-cosmetic="diamond"] .bet-slider { background: linear-gradient(to bottom, #e0ffff, #87ceeb); box-shadow: 0 0 15px rgba(185, 242, 255, 0.8); } body[data-spin-cosmetic="diamond"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="velvet"] .bet-container { border-color: #8b008b; } body[data-spin-cosmetic="velvet"] .bet-slider { background: linear-gradient(to bottom, #9932cc, #6b1b6b); box-shadow: 0 0 15px rgba(139, 0, 139, 0.6); } body[data-spin-cosmetic="velvet"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="midnight"] .bet-container { border-color: #483d8b; } body[data-spin-cosmetic="midnight"] .bet-slider { background: linear-gradient(to bottom, #4b0082, #2e1065); box-shadow: 0 0 15px rgba(75, 0, 130, 0.6); } body[data-spin-cosmetic="midnight"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="emerald"] .bet-container { border-color: #50c878; } body[data-spin-cosmetic="emerald"] .bet-slider { background: linear-gradient(to bottom, #50c878, #228b22); box-shadow: 0 0 15px rgba(80, 200, 120, 0.6); } body[data-spin-cosmetic="emerald"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="royal"] .bet-container { border-color: #a855f7; } body[data-spin-cosmetic="royal"] .bet-slider { background: linear-gradient(to bottom, #a855f7, #7c3aed); box-shadow: 0 0 15px rgba(168, 85, 247, 0.6), 0 0 25px rgba(255, 215, 0, 0.4); } body[data-spin-cosmetic="royal"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="christmas"] .bet-container { border-color: #228b22; } body[data-spin-cosmetic="christmas"] .bet-slider { background: linear-gradient(to bottom, #dc143c, #8b0000); box-shadow: 0 0 15px rgba(220, 20, 60, 0.6); } body[data-spin-cosmetic="christmas"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="shadowmaster"] .bet-container { border-color: #8b5cf6; } body[data-spin-cosmetic="shadowmaster"] .bet-slider { background: linear-gradient(to bottom, #8b5cf6, #5b21b6); box-shadow: 0 0 15px rgba(139, 92, 246, 0.7); } body[data-spin-cosmetic="shadowmaster"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="horserace"] .bet-container { border-color: #228b22; } body[data-spin-cosmetic="horserace"] .bet-slider { background: linear-gradient(to bottom, #228b22, #145214); box-shadow: 0 0 15px rgba(34, 139, 34, 0.6); } body[data-spin-cosmetic="horserace"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="debtfree"] .bet-container { border-color: #22d3ee; } body[data-spin-cosmetic="debtfree"] .bet-slider { background: linear-gradient(to bottom, #22d3ee, #0891b2); box-shadow: 0 0 15px rgba(34, 211, 238, 0.6); } body[data-spin-cosmetic="debtfree"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="chrome_royale"] .bet-container { border-color: #c0c0c0; } body[data-spin-cosmetic="chrome_royale"] .bet-slider { background: linear-gradient(to bottom, #e8e8e8, #a8a8a8); box-shadow: 0 0 12px rgba(192, 192, 192, 0.6); } body[data-spin-cosmetic="chrome_royale"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="velvet_night"] .bet-container { border-color: #6b21a8; } body[data-spin-cosmetic="velvet_night"] .bet-slider { background: linear-gradient(to bottom, #7c3aed, #4c1d95); box-shadow: 0 0 15px rgba(124, 58, 237, 0.6); } body[data-spin-cosmetic="velvet_night"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="aurora_vault"] .bet-container { border-color: #22d3ee; } body[data-spin-cosmetic="aurora_vault"] .bet-slider { background: linear-gradient(to bottom, #5eead4, #14b8a6); box-shadow: 0 0 15px rgba(94, 234, 212, 0.6); } body[data-spin-cosmetic="aurora_vault"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="stellar_glow"] .bet-container { border-color: #fcd34d; } body[data-spin-cosmetic="stellar_glow"] .bet-slider { background: linear-gradient(to bottom, #fcd34d, #d97706); box-shadow: 0 0 15px rgba(252, 211, 77, 0.7); } body[data-spin-cosmetic="stellar_glow"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="cosmic_edge"] .bet-container { border-color: #06b6d4; } body[data-spin-cosmetic="cosmic_edge"] .bet-slider { background: linear-gradient(to bottom, #22d3ee, #0891b2); box-shadow: 0 0 15px rgba(6, 182, 212, 0.6); } body[data-spin-cosmetic="cosmic_edge"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="nebula_dreams"] .bet-container { border-color: #ec4899; } body[data-spin-cosmetic="nebula_dreams"] .bet-slider { background: linear-gradient(to bottom, #f472b6, #db2777); box-shadow: 0 0 15px rgba(236, 72, 153, 0.6); } body[data-spin-cosmetic="nebula_dreams"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="prestige_prisma"] .bet-container { border-color: #a855f7; } body[data-spin-cosmetic="prestige_prisma"] .bet-slider { background: linear-gradient(90deg, #f472b6, #a855f7, #3b82f6, #22d3ee); background-size: 200% 100%; animation: prisma-bet-shift 3s linear infinite; box-shadow: 0 0 15px rgba(168, 85, 247, 0.6); } body[data-spin-cosmetic="prestige_prisma"] .bet-btn.active { color: #fff; } @keyframes prisma-bet-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } body[data-spin-cosmetic="prestige_crown"] .bet-container { border-color: #7a2238; } body[data-spin-cosmetic="prestige_crown"] .bet-slider { background: linear-gradient(to bottom, #9c2f4d, #5c1a2a); box-shadow: 0 0 15px rgba(122, 34, 56, 0.6); } body[data-spin-cosmetic="prestige_crown"] .bet-btn.active { color: #ffd700; } body[data-spin-cosmetic="celestial_dawn"] .bet-container { border-color: #ff9500; } body[data-spin-cosmetic="celestial_dawn"] .bet-slider { background: linear-gradient(to bottom, #ffd700, #ff9500); box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); } body[data-spin-cosmetic="celestial_dawn"] .bet-btn.active { color: #000; } body[data-spin-cosmetic="ocean_depths"] .bet-container { border-color: #0099ff; } body[data-spin-cosmetic="ocean_depths"] .bet-slider { background: linear-gradient(to bottom, #00bfff, #0066cc); box-shadow: 0 0 15px rgba(0, 191, 255, 0.6); } body[data-spin-cosmetic="ocean_depths"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="volcanic_forge"] .bet-container { border-color: #ff4500; } body[data-spin-cosmetic="volcanic_forge"] .bet-slider { background: linear-gradient(to bottom, #ff4500, #cc3300); box-shadow: 0 0 15px rgba(255, 69, 0, 0.7); } body[data-spin-cosmetic="volcanic_forge"] .bet-btn.active { color: #fff; } body[data-spin-cosmetic="developer"] .bet-container { border: 2px dashed #00ff88; } body[data-spin-cosmetic="developer"] .bet-btn { border: 1px dashed #00ff8855; background: transparent; color: #00ff88; font-family: 'Courier New', monospace; } body[data-spin-cosmetic="developer"] .bet-slider { background: rgba(0, 255, 136, 0.15); box-shadow: 0 0 15px rgba(0, 255, 136, 0.5); } body[data-spin-cosmetic="developer"] .bet-btn.active { border: 2px dashed #00ff88; color: #00ff88; font-family: 'Courier New', monospace; } body[data-spin-cosmetic="chaos"] .bet-container { border-color: #ff0040; } body[data-spin-cosmetic="chaos"] .bet-slider { background: linear-gradient(to bottom, #ff0040, #cc0033); box-shadow: 0 0 15px rgba(255, 0, 64, 0.6); } body[data-spin-cosmetic="chaos"] .bet-btn.active { color: #ff6680; text-shadow: 0 0 5px rgba(255, 0, 64, 0.8); } body[data-spin-cosmetic="neon_blue"] .bet-container { border-color: #00d4ff; } body[data-spin-cosmetic="neon_blue"] .bet-slider { background: linear-gradient(to bottom, #00d4ff, #0088ee); box-shadow: 0 0 15px rgba(0, 212, 255, 0.6); } body[data-spin-cosmetic="neon_blue"] .bet-btn.active { color: #66f0ff; text-shadow: 0 0 5px rgba(0, 212, 255, 0.8); } body[data-spin-cosmetic="neon_green"] .bet-container { border-color: #00ff66; } body[data-spin-cosmetic="neon_green"] .bet-slider { background: linear-gradient(to bottom, #00ff66, #00cc44); box-shadow: 0 0 15px rgba(0, 255, 102, 0.6); } body[data-spin-cosmetic="neon_green"] .bet-btn.active { color: #003318; text-shadow: 0 0 5px rgba(0, 255, 102, 0.3); } body[data-spin-cosmetic="neon_pink"] .bet-container { border-color: #ff33aa; } body[data-spin-cosmetic="neon_pink"] .bet-slider { background: linear-gradient(to bottom, #ff33aa, #ee0088); box-shadow: 0 0 15px rgba(255, 51, 170, 0.6); } body[data-spin-cosmetic="neon_pink"] .bet-btn.active { color: #ff77cc; text-shadow: 0 0 5px rgba(255, 51, 170, 0.8); } .bet-btn.locked { opacity: 0.4; cursor: not-allowed; background: rgba(100, 100, 100, 0.2); } .bet-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; background: rgba(100, 100, 100, 0.2); } .bet-label { font-size: var(--font-sm); display: block; margin-bottom: 2px; } .bet-mult { font-size: var(--font-xs); opacity: 0.7; } .duchess-bet-container { background: linear-gradient(135deg, #581c87 0%, #7c3aed 50%, #581c87 100%); padding: 15px; border-radius: 12px; border: 2px solid var(--gold); text-align: center; box-shadow: 0 0 20px rgba(139, 92, 246, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.2); } .duchess-bet-display { display: flex; flex-direction: column; align-items: center; gap: 5px; } .duchess-crown { font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold)); animation: duchessPulse 2s ease-in-out infinite; } .duchess-bet-text { font-size: 1.2rem; font-weight: bold; color: var(--gold); text-shadow: 0 0 10px var(--gold); font-family: 'Cinzel', serif; } .duchess-bet-amount { font-size: 1.5rem; font-weight: bold; color: white; background: rgba(0, 0, 0, 0.3); padding: 5px 20px; border-radius: 8px; border: 1px solid var(--gold); } @keyframes duchessPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } button { border: none; outline: none; font-family: 'Roboto Mono', monospace; } /* Action Button */ button#action-btn { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); color: #2a1a00; border: 2px solid var(--gold-light); padding: var(--space-lg) 0; width: 100%; font-size: var(--font-xl); font-weight: 900; cursor: pointer; border-radius: clamp(8px, 1.5vw, 12px); text-transform: uppercase; font-family: 'Cinzel', serif; box-shadow: 0 5px 0 #6d4c04, 0 10px 20px rgba(0, 0, 0, 0.5); transition: all 0.1s; position: relative; top: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5); text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3), 1px -1px 0 rgba(0, 0, 0, 0.3), -1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.3); } button#action-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #6d4c04, inset 0 5px 10px rgba(0, 0, 0, 0.5); } button#action-btn:disabled { filter: grayscale(1) brightness(0.5); cursor: not-allowed; transform: translateY(5px); box-shadow: none; } button#action-btn.stop-mode { background: linear-gradient(to bottom, #ef4444, #991b1b); color: white; border-color: #fca5a5; box-shadow: 0 5px 0 #7f1d1d; } button#action-btn.stop-mode:active { box-shadow: 0 0 0 #7f1d1d, inset 0 5px 10px rgba(0, 0, 0, 0.5); } /* XP Cosmetics - ensure they continue during stop mode */ .stop-mode.cosmetic-spin-prisma { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b) !important; background-size: 200% 100% !important; border: 3px solid #ffffff !important; -webkit-animation: prismaGradientSlide 4s linear infinite !important; animation: prismaGradientSlide 4s linear infinite !important; } .stop-mode.cosmetic-spin-stellar { background: linear-gradient(135deg, #1a0f00 0%, #ff9500 50%, #ffc966 100%) !important; border: 3px solid #ffc966 !important; animation: stellarPulse 2s ease-in-out infinite !important; } .stop-mode.cosmetic-spin-chrome-royale { background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 30%, #a0a0a0 50%, #ffffff 70%, #c0c0c0 100%) !important; border: 3px solid #ffd700 !important; } button#action-btn.bonus-mode { background: linear-gradient(to bottom, #fff, #94a3b8); color: #0f172a; border-color: #fff; animation: bonusPulse 1s infinite; box-shadow: 0 5px 0 #475569; } button#action-btn.pay-fee { background: linear-gradient(to bottom, #ef4444, #b91c1c); color: white; border-color: #fca5a5; animation: pulseRed 1.5s infinite; } button#action-btn.sneak-mode { background: linear-gradient(to bottom, #dc2626, #7f1d1d); color: white; border-color: #f87171; animation: sneakPulse 0.8s infinite; box-shadow: 0 5px 0 #450a0a, 0 0 20px rgba(220, 38, 38, 0.5); } @keyframes sneakPulse { 0%, 100% { transform: scale(1); box-shadow: 0 5px 0 #450a0a, 0 0 20px rgba(220, 38, 38, 0.5); } 50% { transform: scale(1.02); box-shadow: 0 5px 0 #450a0a, 0 0 30px rgba(220, 38, 38, 0.8); } } button#action-btn.collect-mode { background: linear-gradient(to bottom, #4ade80, #15803d); color: #fff; border-color: #86efac; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); animation: collectPulse 2s infinite; box-shadow: 0 5px 0 #14532d; } button#action-btn.using-reserve { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); color: #2a1a00; border-color: #fff; animation: bonusPulse 1s infinite; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } /* Auto-Spin Active State */ @keyframes autoSpinRing { 0%, 100% { box-shadow: 0 5px 0 #6d4c04, 0 0 0 0 rgba(255,215,0,0.8); } 50% { box-shadow: 0 5px 0 #6d4c04, 0 0 0 6px rgba(255,215,0,0); } } button#action-btn.auto-spin-active { background: linear-gradient(to bottom, #ffec6e, var(--gold)); color: #2a1a00; border-color: #fff; animation: autoSpinRing 1s ease-in-out infinite; box-shadow: 0 5px 0 #6d4c04, 0 0 20px rgba(255,215,0,0.4); } /* Quit/Cut Your Losses Button */ #quit-game-btn { display: none; background: linear-gradient(to bottom, #dc2626, #991b1b); color: white; border: 2px solid #f87171; padding: var(--space-md) 0; width: 100%; font-size: var(--font-lg); font-weight: 700; cursor: pointer; border-radius: clamp(8px, 1.5vw, 12px); text-transform: uppercase; margin-top: var(--space-sm); box-shadow: 0 4px 0 #7f1d1d, 0 0 15px rgba(220, 38, 38, 0.5); transition: all 0.2s ease; animation: quitGlow 2s ease-in-out infinite; } @keyframes quitGlow { 0%, 100% { box-shadow: 0 4px 0 #7f1d1d, 0 0 15px rgba(220, 38, 38, 0.5); } 50% { box-shadow: 0 4px 0 #7f1d1d, 0 0 25px rgba(220, 38, 38, 0.8); } } #quit-game-btn:hover { background: linear-gradient(to bottom, #ef4444, #b91c1c); transform: translateY(-1px); box-shadow: 0 5px 0 #7f1d1d, 0 0 30px rgba(220, 38, 38, 0.7); } #quit-game-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7f1d1d, 0 0 10px rgba(220, 38, 38, 0.4); } button#action-btn.pit-stop-pending { background: linear-gradient(to bottom, #228B22, #15803d); color: white; border-color: #32CD32; animation: pitStopPulse 0.5s infinite; box-shadow: 0 5px 0 #14532d, 0 0 25px rgba(50, 205, 50, 0.6); } @keyframes pitStopPulse { 0%, 100% { transform: scale(1); box-shadow: 0 5px 0 #14532d, 0 0 25px rgba(50, 205, 50, 0.6); } 50% { transform: scale(1.03); box-shadow: 0 5px 0 #14532d, 0 0 40px rgba(50, 205, 50, 0.9); } } /* Pay Fee Button */ #pay-fee-btn { background: linear-gradient(to bottom, var(--success), var(--success-dark)); border: 2px solid #86efac; color: white; padding: 15px 0; width: 100%; font-size: 1.2rem; font-weight: 900; cursor: pointer; border-radius: 12px; text-transform: uppercase; font-family: 'Cinzel', serif; box-shadow: 0 5px 0 #14532d, 0 10px 20px rgba(0, 0, 0, 0.5); margin-bottom: 10px; display: none; animation: collectPulse 2s infinite; } #pay-fee-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #14532d, inset 0 5px 10px rgba(0, 0, 0, 0.5); } #pay-fee-btn:disabled { filter: grayscale(1); cursor: not-allowed; box-shadow: none; transform: translateY(5px); animation: none; } /* Secondary Buttons */ button.secondary-btn { background: linear-gradient(to bottom, #3b82f6, #1e3a8a); color: white; border: 1px solid #60a5fa; padding: 12px; width: 100%; font-size: 0.9rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; box-shadow: 0 4px 0 #1e3a8a; } button.secondary-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e3a8a; } button#reels-btn { background: linear-gradient(to bottom, var(--purple), var(--purple-dark)); border-color: #d8b4fe; box-shadow: 0 4px 0 #581c87; } button#reels-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #581c87; } button#inventory-btn { background: linear-gradient(to bottom, #8b6914, #5c3d1e); border-color: #daa520; box-shadow: 0 4px 0 #3d2914; } button#inventory-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #3d2914; } button#inventory-btn.has-items { animation: none; } /* Inventory Modal */ .inventory-modal-content { max-width: 320px; } .inventory-modal-slots { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .inventory-modal-slot { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 2px solid #444; border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: all 0.2s ease; } .inventory-modal-slot:hover { border-color: var(--gold); transform: translateX(4px); } .inventory-modal-slot.empty { opacity: 0.5; border-color: #333; } .inventory-modal-slot.empty:hover { border-color: #555; transform: none; } .inv-slot-icon { font-size: 2rem; min-width: 50px; text-align: center; } .inv-slot-count { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 900; color: var(--gold); min-width: 40px; text-align: center; } .inventory-modal-slot.empty .inv-slot-count { color: #666; } .inv-slot-label { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: #fff; } .inv-slot-desc { font-size: 0.75rem; color: #888; margin-top: 2px; } /* Log Area */ .log-area { margin-top: 15px; background: #000; padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 0.8rem; min-height: 85px; max-height: 120px; flex: 0 1 auto; overflow-y: auto; border: 1px solid #333; box-shadow: inset 0 5px 15px #000; font-family: 'Roboto Mono', monospace; } .bonus-active .log-area { display: none; } .log-entry { margin-bottom: 6px; border-bottom: 1px solid #111; padding-bottom: 4px; color: #888; } .log-win { color: var(--success); font-weight: bold; text-shadow: 0 0 5px rgba(34, 197, 94, 0.3); } .log-bonus { color: #fff; font-weight: bold; text-shadow: 0 0 5px var(--gold); } .log-shop { color: var(--purple); font-weight: bold; } .log-alert { color: cyan; font-style: italic; } .log-danger { color: var(--danger); font-weight: bold; } /* v1.951 — Crest Crusade payout breakdown card in the game log */ .cc-breakdown { border: 1px solid rgba(244, 211, 94, 0.45); border-radius: 8px; background: linear-gradient(180deg, rgba(244, 211, 94, 0.10), rgba(244, 211, 94, 0.03)); padding: 8px 10px; margin: 4px 0; } .ccb-header { color: var(--gold); font-weight: bold; letter-spacing: 1px; text-align: center; margin-bottom: 6px; text-shadow: 0 0 6px rgba(244, 211, 94, 0.4); } .ccb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0; color: #ddd; } .ccb-name { text-align: left; min-width: 0; } .ccb-val { font-weight: bold; color: #fff; white-space: nowrap; flex-shrink: 0; } .ccb-base .ccb-val { color: var(--gold); } .ccb-combined { border-top: 1px dashed rgba(244, 211, 94, 0.35); margin-top: 4px; padding-top: 4px; color: #f4d35e; } .ccb-total { border-top: 1px solid rgba(244, 211, 94, 0.5); margin-top: 4px; padding-top: 5px; font-weight: bold; color: var(--gold); font-size: 1.05em; } .ccb-total .ccb-val { color: var(--gold); text-shadow: 0 0 6px rgba(244, 211, 94, 0.4); } .deck-counts { display: flex; justify-content: center; gap: 15px; font-size: 0.7rem; color: #555; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; } /* Google ad placements: desktop side rails and in-menu banner. */ .ad-rail { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); width: 160px; max-height: calc(100vh - 100px); z-index: 50; display: none; pointer-events: none; } .ad-rail.ad-rail-left { left: calc(50% - 660px); } .ad-rail.ad-rail-right { right: calc(50% - 660px); } .ad-rail ins.adsbygoogle { display: block; min-height: 600px; background: transparent; pointer-events: auto; } @media (min-width: 1280px) and (hover: hover) and (pointer: fine) { .ad-rail { display: block; } } body.is-native .ad-rail, body.is-native .menu-ad-wrap, body.ads-off .ad-rail, body.ads-off .menu-ad-wrap { display: none !important; } .menu-ad-wrap { width: 100%; max-width: 320px; margin: 12px auto 6px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; overflow: hidden; } .menu-ad-label { font-size: 9px; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 1px; font-family: 'Roboto Mono', monospace; line-height: 1; } .menu-ad-slot { width: 100%; height: 90px; text-align: center; overflow: hidden; } .menu-ad-slot ins.adsbygoogle { display: block; width: 100%; height: 90px; background: transparent; margin: 0 auto; } /* Modals */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.active { opacity: 1; pointer-events: all; } .modal-overlay.active.modal-cooldown > .modal-content, .modal-overlay.active.modal-cooldown > div { pointer-events: none; } #reels-modal.active { z-index: 250; } #magnetic-ring-modal.active, #magic-marker-modal.active, #scissors-modal.active, #item-tooltip-modal.active { z-index: 260; } /* Warning / intermediate modals shown OVER the casino lobby (machine-select-modal). All .modal-overlay default to z-index 200. Both coronation warning modals are declared BEFORE #machine-select-modal in index.html, so without these overrides the lobby wins the source-order tiebreak and renders ON TOP of the warning, causing the click to play a sound but show no visible warning. #pregame-modifiers-modal is included defensively (currently declared after the lobby in source order, but should never silently lose the stacking battle). v1.824 */ #coronation-warning-modal.active, #coronation-unlock-warning-modal.active, #pregame-modifiers-modal.active { z-index: 270; } .modal-content { background: linear-gradient(135deg, var(--royal-blue-dark), var(--royal-blue)); border: 4px solid var(--gold); padding: 20px; margin: 10px; margin-top: calc(10px + env(safe-area-inset-top, 0px)); border-radius: 15px; max-width: 500px; width: calc(90% - 20px); box-shadow: 0 0 50px rgba(197, 160, 89, 0.3); text-align: center; max-height: calc(90vh - 35px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: calc(90dvh - 35px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .modal-content.wide { max-width: 800px; } /* Magnetic Ring Modal */ .magnetic-ring-content { background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%); border: 3px solid #9333ea; max-width: 340px; text-align: center; padding: 25px; } .magic-marker-content { background: linear-gradient(135deg, #0a1a2e 0%, #1b2d4e 50%, #0a1a2e 100%); border: 3px solid #06b6d4; max-width: 400px; text-align: center; padding: 25px; } .marker-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; max-height: 300px; overflow-y: auto; } .marker-card-btn { background: rgba(0, 0, 0, 0.4); border: 2px solid #444; border-radius: 8px; padding: 10px 8px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-family: 'Cinzel', serif; } .marker-card-btn:hover { border-color: #06b6d4; background: rgba(6, 182, 212, 0.1); transform: scale(1.05); } .marker-card-btn .card-rank { font-size: 1.4rem; font-weight: bold; } .marker-card-btn .card-suit { font-size: 1.2rem; } .marker-card-btn .card-suit.red { color: #ef4444; } .marker-card-btn .card-suit.black { color: #e5e5e5; } .marker-card-btn .card-effect { font-size: 0.65rem; color: #888; font-family: 'Roboto Mono', monospace; } .marker-card-btn.ace-joker { border-color: #ffd700; background: rgba(255, 215, 0, 0.1); } .marker-card-btn.ace-joker:hover { border-color: #ffd700; background: rgba(255, 215, 0, 0.2); } .marker-card-btn .card-reel { font-size: 0.6rem; color: #666; font-family: 'Roboto Mono', monospace; } .marker-card-btn.already-marked { opacity: 0.5; border-color: #06b6d4; background: rgba(6, 182, 212, 0.2); cursor: not-allowed; } .marker-card-btn.already-marked:hover { transform: none; } .magnetic-particle { position: fixed; font-size: 2rem; pointer-events: none; z-index: 9999; animation: magneticPulse 1s ease-out forwards; filter: drop-shadow(0 0 10px #9333ea); } @keyframes magneticPulse { 0% { transform: scale(0.5); opacity: 1; } 50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; } 100% { transform: scale(0.3) rotate(360deg); opacity: 0; } } .marker-particle { position: fixed; font-size: 1.5rem; pointer-events: none; z-index: 9999; animation: markerSplash 0.8s ease-out forwards; filter: drop-shadow(0 0 8px #06b6d4); } @keyframes markerSplash { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.5) translateY(-50px) rotate(45deg); opacity: 0; } } .modal-subtitle { color: #aaa; font-size: 0.95rem; margin: 5px 0 0 0; } .suit-selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; } .suit-select-btn { background: rgba(0, 0, 0, 0.4); border: 2px solid #444; border-radius: 12px; padding: 20px 15px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; } .suit-select-btn:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.1); transform: scale(1.05); } .suit-select-btn .suit-icon { font-size: 2.5rem; } .suit-select-btn .suit-icon.red { color: #ef4444; } .suit-select-btn .suit-icon.black { color: #e5e5e5; } .suit-select-btn .suit-name { color: #ccc; font-size: 0.9rem; font-family: 'Cinzel', serif; } /* Reels Grid View */ .reel-view-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; } .reel-tab-btn { padding: 6px 16px; border: 1px solid #555; border-radius: 6px; background: rgba(0, 0, 0, 0.4); color: #aaa; font-family: 'Cinzel', serif; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .reel-tab-btn.active { background: rgba(212, 175, 55, 0.15); border-color: var(--gold); color: var(--gold); } .reel-tab-btn:hover { border-color: var(--gold); color: #ddd; } .reels-grid-view { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; text-align: left; margin-bottom: 20px; } .reel-totals-unified { background: rgba(0, 0, 0, 0.3); border: 1px solid #444; border-radius: 8px; padding: 10px; max-height: 60vh; overflow-y: auto; } .totals-header-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 6px 8px; border-bottom: 2px solid rgba(212, 175, 55, 0.4); margin-bottom: 4px; } .totals-header-label { color: #aaa; font-size: 0.8rem; text-transform: uppercase; } .totals-header-reel { color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.75rem; text-align: center; font-weight: bold; } .totals-remaining-row { border-bottom: 1px solid #555; padding-bottom: 6px; margin-bottom: 2px; } .totals-remaining-row .totals-header-label { font-size: 0.75rem; color: #888; } .totals-remaining-row .totals-header-reel { font-size: 0.8rem; font-family: 'Roboto Mono', monospace; color: #ccc; } .totals-section-label { color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.75rem; text-align: center; padding: 6px 0 4px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); margin-bottom: 2px; letter-spacing: 0.5px; } .totals-unified-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; align-items: center; padding: 3px 8px; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .totals-unified-row .totals-label { color: #ccc; } .totals-unified-row .totals-count { color: var(--gold); font-weight: bold; font-family: 'Roboto Mono', monospace; text-align: center; font-size: 0.8rem; } .totals-unified-row.zero-count .totals-label, .totals-unified-row.zero-count .totals-count { color: #555; } @media (max-width: 600px) { .totals-header-row { grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 2px; padding: 4px 4px; } .totals-header-reel { font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .totals-header-label { font-size: 0.7rem; } .totals-unified-row { grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 2px; font-size: 0.75rem; padding: 3px 4px; } .totals-unified-row .totals-label { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .totals-unified-row .totals-count { font-size: 0.7rem; padding: 0; } .reel-totals-unified { padding: 6px; } .totals-section-label { font-size: 0.65rem; padding: 4px 0 2px; } .totals-remaining-row .totals-header-label { font-size: 0.65rem; } .totals-remaining-row .totals-header-reel { font-size: 0.7rem; } } @media (max-width: 380px) { .totals-header-row, .totals-unified-row { grid-template-columns: 3fr 1fr 1fr 1fr; gap: 1px; padding: 2px 2px; } .totals-header-reel { font-size: 0.55rem; } .totals-header-label { font-size: 0.6rem; } .totals-unified-row .totals-label { font-size: 0.6rem; } .totals-unified-row .totals-count { font-size: 0.6rem; } .totals-section-label { font-size: 0.6rem; } .reel-totals-unified { padding: 4px; } .reel-tab-btn { padding: 5px 10px; font-size: 0.75rem; } } .reel-col { background: rgba(0, 0, 0, 0.3); border: 1px solid #444; border-radius: 8px; padding: 10px; max-height: 400px; overflow-y: auto; } .reel-col h3 { color: var(--gold); margin-top: 0; margin-bottom: 2px; font-size: 1rem; text-align: center; font-family: 'Cinzel', serif; } .reel-count { color: #888; font-size: 0.75rem; text-align: center; padding-bottom: 5px; border-bottom: 1px solid #555; margin-bottom: 5px; } .list-card { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-weight: bold; font-size: 0.9rem; transition: all 0.3s; } .list-card.red { color: #ff6666; } .list-card.black { color: #ccc; } .list-card.joker { color: #d8b4fe; } .list-card.played { opacity: 0.2; text-decoration: line-through; color: #555 !important; } .list-card.upgrade-gilded-list { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); border-left: 3px solid #ffd700; padding-left: 5px; } .list-card.played.upgrade-gilded-list { color: #b8860b !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-metal-list { color: #8b9dc3; text-shadow: 0 0 8px rgba(139, 157, 195, 0.6); border-left: 3px solid #8b9dc3; padding-left: 5px; } .list-card.played.upgrade-metal-list { color: #6b7280 !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-moved-list { color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, 0.6); border-left: 3px solid #22d3ee; padding-left: 5px; } .list-card.played.upgrade-moved-list { color: #0891b2 !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-transformed-list { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.6); border-left: 3px solid #a855f7; padding-left: 5px; } .list-card.played.upgrade-transformed-list { color: #7c3aed !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-added-list { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.6); border-left: 3px solid #22c55e; padding-left: 5px; } .list-card.played.upgrade-added-list { color: #16a34a !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-cloned-list { color: #f472b6; text-shadow: 0 0 8px rgba(244, 114, 182, 0.6); border-left: 3px solid #f472b6; padding-left: 5px; } .list-card.played.upgrade-cloned-list { color: #be185d !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-diamond-list { color: #b9f2ff; text-shadow: 0 0 10px rgba(185, 242, 255, 0.8); border-left: 3px solid #7dd3fc; padding-left: 5px; } .list-card.played.upgrade-diamond-list { color: #0c4a6e !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-sticky-list { color: #fb923c; text-shadow: 0 0 8px rgba(251, 146, 60, 0.6); border-left: 3px solid #ff6b35; padding-left: 5px; } .list-card.played.upgrade-sticky-list { color: #c2410c !important; text-shadow: none; border-left-color: #555; } .list-card.upgrade-glass-list { color: #88d8f0; text-shadow: 0 0 8px rgba(136, 216, 240, 0.6); border-left: 3px solid #38bdf8; padding-left: 5px; } .list-card.played.upgrade-glass-list { color: #0369a1 !important; text-shadow: none; border-left-color: #555; } /* Multi-upgrade list card combinations */ .list-card.upgrade-moved-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(255, 215, 0, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #ffd700) 1; } .list-card.upgrade-moved-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #f472b6) 1; } .list-card.upgrade-moved-list.upgrade-added-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #4ade80) 1; } .list-card.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(192, 132, 252, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #c084fc) 1; } .list-card.upgrade-moved-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(139, 157, 195, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #8b9dc3) 1; } .list-card.upgrade-gilded-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #f472b6) 1; } .list-card.upgrade-gilded-list.upgrade-added-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #4ade80) 1; } .list-card.upgrade-metal-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(139, 157, 195, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #8b9dc3, #f472b6) 1; } .list-card.upgrade-transformed-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(192, 132, 252, 0.15), rgba(255, 215, 0, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c084fc, #ffd700) 1; } .list-card.upgrade-transformed-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(192, 132, 252, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c084fc, #f472b6) 1; } .list-card.upgrade-transformed-list.upgrade-added-list { background: linear-gradient(90deg, rgba(192, 132, 252, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c084fc, #4ade80) 1; } .list-card.upgrade-transformed-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(192, 132, 252, 0.15), rgba(139, 157, 195, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c084fc, #8b9dc3) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(255, 215, 0, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #7dd3fc, #ffd700) 1; } .list-card.upgrade-diamond-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #7dd3fc, #f472b6) 1; } .list-card.upgrade-diamond-list.upgrade-added-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #7dd3fc, #4ade80) 1; } .list-card.upgrade-sticky-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(255, 215, 0, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #ffd700) 1; } .list-card.upgrade-sticky-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #f472b6) 1; } .list-card.upgrade-glass-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(255, 215, 0, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #ffd700) 1; } .list-card.upgrade-glass-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(244, 114, 182, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #f472b6) 1; } .list-card.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(192, 132, 252, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #c084fc) 1; } .list-card.upgrade-sticky-list.upgrade-added-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #4ade80) 1; } .list-card.upgrade-sticky-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(34, 211, 238, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #22d3ee) 1; } .list-card.upgrade-sticky-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(192, 192, 192, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #c0c0c0) 1; } .list-card.upgrade-sticky-list.upgrade-diamond-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(185, 242, 255, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #b9f2ff) 1; } .list-card.upgrade-sticky-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(251, 146, 60, 0.15), rgba(136, 216, 240, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #ff6b35, #38bdf8) 1; } .list-card.upgrade-glass-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(192, 132, 252, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #c084fc) 1; } .list-card.upgrade-glass-list.upgrade-added-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #4ade80) 1; } .list-card.upgrade-glass-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(34, 211, 238, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #22d3ee) 1; } .list-card.upgrade-glass-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.15), rgba(192, 192, 192, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #c0c0c0) 1; } .list-card.upgrade-diamond-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(192, 132, 252, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(34, 211, 238, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #22d3ee) 1; } .list-card.upgrade-diamond-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.15), rgba(192, 192, 192, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #c0c0c0) 1; } .list-card.upgrade-metal-list.upgrade-added-list { background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(74, 222, 128, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c0c0c0, #4ade80) 1; } .list-card.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(34, 211, 238, 0.15)); border-left: 3px solid; border-image: linear-gradient(180deg, #c0c0c0, #22d3ee) 1; } /* Triple upgrade combinations */ .list-card.upgrade-moved-list.upgrade-gilded-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.1), rgba(255, 215, 0, 0.1), rgba(244, 114, 182, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #ffd700, #f472b6) 1; } .list-card.upgrade-moved-list.upgrade-added-list.upgrade-cloned-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.1), rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #4ade80, #f472b6) 1; } /* Generated 82 triple upgrade combinations */ .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-diamond-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #b9f2ff) 1; } .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(255, 215, 0, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #ffd700) 1; } .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #38bdf8) 1; } .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #c0c0c0) 1; } .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-cloned-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(244, 114, 182, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #f472b6, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #ffd700) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #38bdf8) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #c0c0c0) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #22d3ee) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-diamond-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(185, 242, 255, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #b9f2ff, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-gilded-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ffd700, #38bdf8) 1; } .list-card.upgrade-added-list.upgrade-gilded-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ffd700, #c0c0c0) 1; } .list-card.upgrade-added-list.upgrade-gilded-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 215, 0, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ffd700, #22d3ee) 1; } .list-card.upgrade-added-list.upgrade-gilded-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 215, 0, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ffd700, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-gilded-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ffd700, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-glass-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #38bdf8, #c0c0c0) 1; } .list-card.upgrade-added-list.upgrade-glass-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #38bdf8, #22d3ee) 1; } .list-card.upgrade-added-list.upgrade-glass-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(136, 216, 240, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #38bdf8, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-glass-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #38bdf8, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #c0c0c0, #22d3ee) 1; } .list-card.upgrade-added-list.upgrade-metal-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #c0c0c0, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-metal-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(192, 192, 192, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #c0c0c0, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #22d3ee, #ff6b35) 1; } .list-card.upgrade-added-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #22d3ee, #c084fc) 1; } .list-card.upgrade-added-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #4ade80, #ff6b35, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-gilded-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #ffd700) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #38bdf8) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #c0c0c0) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #22d3ee) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #ff6b35) 1; } .list-card.upgrade-cloned-list.upgrade-diamond-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(185, 242, 255, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #b9f2ff, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-gilded-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #ffd700, #38bdf8) 1; } .list-card.upgrade-cloned-list.upgrade-gilded-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #ffd700, #c0c0c0) 1; } .list-card.upgrade-cloned-list.upgrade-gilded-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(255, 215, 0, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #ffd700, #ff6b35) 1; } .list-card.upgrade-cloned-list.upgrade-gilded-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #ffd700, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-glass-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #38bdf8, #c0c0c0) 1; } .list-card.upgrade-cloned-list.upgrade-glass-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #38bdf8, #22d3ee) 1; } .list-card.upgrade-cloned-list.upgrade-glass-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(136, 216, 240, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #38bdf8, #ff6b35) 1; } .list-card.upgrade-cloned-list.upgrade-glass-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #38bdf8, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #c0c0c0, #22d3ee) 1; } .list-card.upgrade-cloned-list.upgrade-metal-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #c0c0c0, #ff6b35) 1; } .list-card.upgrade-cloned-list.upgrade-metal-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(192, 192, 192, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #c0c0c0, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #22d3ee, #ff6b35) 1; } .list-card.upgrade-cloned-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #22d3ee, #c084fc) 1; } .list-card.upgrade-cloned-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #f472b6, #ff6b35, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list.upgrade-glass-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ffd700, #38bdf8) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ffd700, #c0c0c0) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ffd700, #22d3ee) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ffd700, #ff6b35) 1; } .list-card.upgrade-diamond-list.upgrade-gilded-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(255, 215, 0, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ffd700, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-glass-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #38bdf8, #c0c0c0) 1; } .list-card.upgrade-diamond-list.upgrade-glass-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #38bdf8, #22d3ee) 1; } .list-card.upgrade-diamond-list.upgrade-glass-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #38bdf8, #ff6b35) 1; } .list-card.upgrade-diamond-list.upgrade-glass-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #38bdf8, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #c0c0c0, #22d3ee) 1; } .list-card.upgrade-diamond-list.upgrade-metal-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #c0c0c0, #ff6b35) 1; } .list-card.upgrade-diamond-list.upgrade-metal-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(192, 192, 192, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #c0c0c0, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #22d3ee, #ff6b35) 1; } .list-card.upgrade-diamond-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #22d3ee, #c084fc) 1; } .list-card.upgrade-diamond-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(185, 242, 255, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #b9f2ff, #ff6b35, #c084fc) 1; } .list-card.upgrade-gilded-list.upgrade-glass-list.upgrade-metal-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #38bdf8, #c0c0c0) 1; } .list-card.upgrade-gilded-list.upgrade-glass-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #38bdf8, #22d3ee) 1; } .list-card.upgrade-gilded-list.upgrade-glass-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #38bdf8, #ff6b35) 1; } .list-card.upgrade-gilded-list.upgrade-glass-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(136, 216, 240, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #38bdf8, #c084fc) 1; } .list-card.upgrade-gilded-list.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #c0c0c0, #22d3ee) 1; } .list-card.upgrade-gilded-list.upgrade-metal-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #c0c0c0, #ff6b35) 1; } .list-card.upgrade-gilded-list.upgrade-metal-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #c0c0c0, #c084fc) 1; } .list-card.upgrade-gilded-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #22d3ee, #ff6b35) 1; } .list-card.upgrade-gilded-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #22d3ee, #c084fc) 1; } .list-card.upgrade-gilded-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #ffd700, #ff6b35, #c084fc) 1; } .list-card.upgrade-glass-list.upgrade-metal-list.upgrade-moved-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #c0c0c0, #22d3ee) 1; } .list-card.upgrade-glass-list.upgrade-metal-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #c0c0c0, #ff6b35) 1; } .list-card.upgrade-glass-list.upgrade-metal-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(192, 192, 192, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #c0c0c0, #c084fc) 1; } .list-card.upgrade-glass-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #22d3ee, #ff6b35) 1; } .list-card.upgrade-glass-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #22d3ee, #c084fc) 1; } .list-card.upgrade-glass-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(136, 216, 240, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #38bdf8, #ff6b35, #c084fc) 1; } .list-card.upgrade-metal-list.upgrade-moved-list.upgrade-sticky-list { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #c0c0c0, #22d3ee, #ff6b35) 1; } .list-card.upgrade-metal-list.upgrade-moved-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(34, 211, 238, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #c0c0c0, #22d3ee, #c084fc) 1; } .list-card.upgrade-metal-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #c0c0c0, #ff6b35, #c084fc) 1; } .list-card.upgrade-moved-list.upgrade-sticky-list.upgrade-transformed-list { background: linear-gradient(90deg, rgba(34, 211, 238, 0.1), rgba(251, 146, 60, 0.1), rgba(192, 132, 252, 0.1)); border-left: 3px solid; border-image: linear-gradient(180deg, #22d3ee, #ff6b35, #c084fc) 1; } /* Pay Table */ .paytable-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 20px; text-align: left; font-size: 0.9rem; } .pay-name { color: #ddd; padding: 5px; } .pay-val { color: var(--gold-light); font-weight: bold; text-align: right; padding: 5px; } .pay-header { color: var(--gold); font-weight: bold; text-transform: uppercase; border-bottom: 2px solid var(--gold); padding-bottom: 5px; } .pay-name.secret { color: #d8b4fe; text-shadow: 0 0 10px #a855f7; animation: winGlow 2s infinite; background: rgba(168, 85, 247, 0.1); } .pay-val.secret { color: #fff; text-shadow: 0 0 10px #a855f7; background: rgba(168, 85, 247, 0.1); } /* Close Button */ .close-btn { background: transparent; border: 2px solid #555; color: #aaa; padding: 10px 30px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: all 0.2s; } .close-btn:hover { border-color: white; color: white; background: rgba(255, 255, 255, 0.1); } .floating-back-btn { position: relative; margin-top: -22px; align-self: center; background: linear-gradient(to bottom, #334155, #1e293b); border: 2px solid var(--gold); color: var(--gold); padding: 12px 35px; border-radius: 25px; cursor: pointer; font-weight: bold; font-family: 'Roboto Mono', monospace; font-size: 0.9rem; transition: all 0.3s; z-index: 300; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(197, 160, 89, 0.3); text-transform: uppercase; letter-spacing: 1px; } .floating-back-btn:hover { background: linear-gradient(to bottom, #475569, #334155); border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 160, 89, 0.4); } .floating-back-btn:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } /* Purple variant for Level Progression modal */ .floating-back-btn-purple { border-color: #9966ff; color: #cc99ff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(153, 102, 255, 0.4); } .floating-back-btn-purple:hover { border-color: #cc99ff; color: #e0ccff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(153, 102, 255, 0.5); } /* Shop Exit Button */ #shop-exit-btn { background: linear-gradient(to bottom, var(--success), var(--success-dark)); border: 1px solid #86efac; color: white; box-shadow: 0 4px 0 #14532d; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); width: 100%; margin-top: 15px; padding: 15px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Cinzel', serif; } #shop-exit-btn:hover { background: linear-gradient(to bottom, #4ade80, #16a34a); border-color: white; transform: translateY(-2px); box-shadow: 0 6px 0 #14532d; } #shop-exit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #14532d; } #shop-exit-btn.danger-exit { background: linear-gradient(to bottom, #ef4444, #991b1b) !important; border-color: #fca5a5 !important; box-shadow: 0 4px 0 #7f1d1d !important; animation: pulseRed 1s infinite; } #shop-exit-btn.danger-exit:active { box-shadow: 0 2px 0 #7f1d1d !important; } /* Bonus Overlay */ #bonus-overlay { --bonus-theme-primary: #ffd700; --bonus-theme-glow: rgba(255, 215, 0, 0.3); --bonus-theme-secondary: #ff8c00; --bonus-theme-bg: rgba(30, 20, 0, 0.6); --bonus-theme-btntext: #1a1a1a; --bonus-theme-hue: 0deg; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.85) 40%, var(--bonus-theme-bg) 65%, var(--bonus-theme-glow) 85%, var(--bonus-theme-primary) 100%); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s; overflow: hidden; } #bonus-overlay.active { opacity: 1; pointer-events: all; } #bonus-overlay.active .bonus-crown-icon { animation: bonusCrownEntrance 0.6s ease-out 0.2s both; } #bonus-overlay.active .bonus-title { animation: bonusTitleEntrance 0.7s ease-out 0.4s both, bonusTitleGlow 2s ease-in-out 1.1s infinite; } #bonus-overlay.active .bonus-info-box { animation: bonusInfoEntrance 0.5s ease-out 0.8s both; } #bonus-overlay.active .bonus-start-btn { animation: bonusBtnEntrance 0.4s ease-out 1.1s both; } .bonus-sparkles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bonus-sparkle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--bonus-theme-primary); box-shadow: 0 0 6px var(--bonus-theme-primary), 0 0 12px var(--bonus-theme-glow); animation: bonusSparkleFloat linear infinite; opacity: 0; } .bonus-sparkle-alt { background: var(--bonus-theme-secondary); box-shadow: 0 0 6px var(--bonus-theme-secondary), 0 0 12px var(--bonus-theme-secondary); } @keyframes bonusSparkleFloat { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 15% { opacity: 1; } 85% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-100vh) scale(1.2); } } .bonus-floating-suits { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bonus-suit { position: absolute; font-size: 2.5rem; opacity: 0.15; color: var(--bonus-theme-primary); text-shadow: 0 0 20px var(--bonus-theme-glow); animation: bonusSuitFloat 6s ease-in-out infinite; } .bonus-suit-2, .bonus-suit-4 { color: var(--bonus-theme-secondary); text-shadow: 0 0 20px var(--bonus-theme-secondary); } .bonus-suit-1 { top: 10%; left: 8%; animation-delay: 0s; } .bonus-suit-2 { top: 15%; right: 8%; animation-delay: 1.5s; } .bonus-suit-3 { bottom: 15%; left: 10%; animation-delay: 3s; } .bonus-suit-4 { bottom: 10%; right: 10%; animation-delay: 4.5s; } @keyframes bonusSuitFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-15px) rotate(10deg); } 50% { transform: translateY(5px) rotate(-5deg); } 75% { transform: translateY(-10px) rotate(8deg); } } .bonus-crown-icon { font-size: 4rem; margin-bottom: 5px; filter: drop-shadow(0 0 15px var(--bonus-theme-glow)) hue-rotate(var(--bonus-theme-hue, 0deg)); z-index: 1; opacity: 0; } @keyframes bonusCrownEntrance { 0% { opacity: 0; transform: scale(0.3) translateY(30px); } 60% { opacity: 1; transform: scale(1.2) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .bonus-title { font-family: 'Cinzel', serif; font-size: 5rem; background: linear-gradient(135deg, #fff 0%, var(--bonus-theme-primary) 40%, var(--bonus-theme-secondary) 70%, #fff 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; text-align: center; line-height: 1.1; z-index: 1; opacity: 0; position: relative; } .bonus-title::after { content: ''; position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, var(--bonus-theme-glow) 0%, transparent 70%); z-index: -1; animation: bonusTitlePulse 2s ease-in-out infinite; pointer-events: none; } @keyframes bonusTitleEntrance { 0% { opacity: 0; transform: scale(0.3); filter: brightness(3); } 50% { opacity: 1; transform: scale(1.15); filter: brightness(2); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } } @keyframes bonusTitleGlow { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px var(--bonus-theme-glow)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 25px var(--bonus-theme-secondary)); } } @keyframes bonusTitlePulse { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); } } .bonus-info-box { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--bonus-theme-primary); padding: 20px 40px; border-radius: 12px; margin-bottom: 25px; text-align: center; z-index: 1; opacity: 0; box-shadow: 0 0 15px var(--bonus-theme-glow), inset 0 0 15px rgba(0, 0, 0, 0.3); animation: bonusInfoPulse 2.5s ease-in-out infinite; } @keyframes bonusInfoEntrance { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bonusInfoPulse { 0%, 100% { box-shadow: 0 0 15px var(--bonus-theme-glow), inset 0 0 15px rgba(0, 0, 0, 0.3); border-color: var(--bonus-theme-primary); } 50% { box-shadow: 0 0 30px var(--bonus-theme-glow), 0 0 60px var(--bonus-theme-glow), inset 0 0 15px rgba(0, 0, 0, 0.3); border-color: var(--bonus-theme-secondary); } } .bonus-info-box p { margin: 10px 0; font-size: 1.1rem; } .bonus-multiplier { font-size: 2.5rem; font-weight: 900; color: var(--bonus-theme-primary); font-family: 'Cinzel', serif; text-shadow: 0 0 20px var(--bonus-theme-glow); } .bonus-start-btn { background: linear-gradient(to bottom, var(--bonus-theme-primary), var(--bonus-theme-secondary)); color: var(--bonus-theme-btntext, #1a1a1a); border: 2px solid var(--bonus-theme-primary); padding: 20px 60px; font-size: 1.5rem; font-weight: 900; cursor: pointer; border-radius: 12px; text-transform: uppercase; font-family: 'Cinzel', serif; box-shadow: 0 5px 0 var(--bonus-theme-secondary), 0 10px 20px rgba(0,0,0,0.5); transition: all 0.1s; z-index: 1; opacity: 0; position: relative; overflow: hidden; } .bonus-start-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: bonusShimmer 2s ease-in-out 1.5s infinite; } @keyframes bonusShimmer { 0% { left: -100%; } 100% { left: 200%; } } @keyframes bonusBtnEntrance { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } .bonus-start-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #6d4c04; } /* Start Overlay */ #start-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #1a1a3a, #050505); z-index: 300; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s; } .start-logo { font-family: 'Cinzel', serif; font-size: 4rem; background: linear-gradient(to bottom, #fff, #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(255, 215, 0, 0.4); margin-bottom: 30px; text-align: center; line-height: 1.1; } .start-subtitle { color: #888; margin-bottom: 30px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 3px; } #start-btn { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); color: #2a1a00; border: 2px solid var(--gold-light); padding: 20px 80px; font-size: 1.5rem; font-weight: 900; cursor: pointer; border-radius: 12px; text-transform: uppercase; font-family: 'Cinzel', serif; box-shadow: 0 5px 0 #6d4c04, 0 10px 20px rgba(0, 0, 0, 0.5); animation: collectPulse 2s infinite; } #start-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #6d4c04; } /* Shop Modal */ .shop-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--gold-dark); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); gap: var(--space-xs); flex-wrap: wrap; } .shop-menu-btn { background: linear-gradient(to bottom, #3a3a3a, #252525); border: 1px solid #555; color: var(--gold); font-size: var(--font-sm); font-weight: bold; padding: var(--space-xs) var(--space-sm); border-radius: clamp(4px, 1vw, 6px); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .shop-menu-btn:hover { background: linear-gradient(to bottom, #4a4a4a, #353535); border-color: var(--gold); } .shop-title { font-family: 'Cinzel', serif; color: var(--gold); font-size: clamp(1.3rem, 4vw, 1.6rem); } .shop-balance { color: var(--success); font-weight: bold; font-size: var(--font-md); } .shop-fee-notice { color: var(--danger); font-size: var(--font-sm); text-align: center; margin-bottom: var(--space-sm); padding: var(--space-sm); background: rgba(239, 68, 68, 0.1); border: 1px dashed var(--danger); border-radius: 5px; } .shop-items-container { display: flex; flex-direction: column; gap: var(--space-xs); max-height: clamp(200px, 40vh, 350px); overflow-y: auto; padding-right: 5px; margin-bottom: var(--space-sm); } .shop-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.3); border: 1px solid #333; border-radius: clamp(6px, 1vw, 8px); padding: var(--space-xs) var(--space-sm); transition: all 0.2s; border-left: 4px solid #555; gap: var(--space-xs); } .shop-item:hover { background: rgba(255, 255, 255, 0.05); border-color: #555; } .shop-item.cat-deck { border-left-color: var(--danger); } .shop-item.cat-new { border-left-color: var(--success); } .shop-item.cat-move { border-left-color: var(--cyan); } .shop-item.cat-upgrade { border-left-color: #fbbf24; } .shop-item.cat-transform { border-left-color: #a855f7; } .shop-item.cat-rules { border-left-color: var(--blue); } .shop-item.cat-spins { border-left-color: var(--gold); } .shop-item.cat-metal { border-left-color: #8b9dc3; } .shop-item.cat-clone { border-left-color: #f472b6; } .shop-item.cat-diamond { border-left-color: #b9f2ff; } .shop-item.cat-sticky { border-left-color: #ff6b35; } .shop-item.cat-glass { border-left-color: #88d8f0; } .shop-item.mirage-veiled { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(88, 28, 135, 0.3) 100%); border-color: #7c3aed; position: relative; } .shop-item.mirage-veiled::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(139, 92, 246, 0.3) 100%); pointer-events: none; border-radius: 8px; } .veiled-text { color: #a78bfa; font-style: italic; } .mirage-veiled-btn { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(88, 28, 135, 0.4) 100%) !important; border-color: #7c3aed !important; color: #a78bfa !important; position: relative; overflow: hidden; cursor: not-allowed !important; opacity: 0.8; } .mirage-veiled-btn::after { content: '🔮 VEILED'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(88, 28, 135, 0.5) 100%); font-size: 0.8rem; font-style: italic; letter-spacing: 1px; color: #c4b5fd; border-radius: inherit; } .shop-item.cat-legendary { border-left-color: var(--purple); animation: legendaryPulse 1.5s infinite alternate; } .shop-info { text-align: left; flex: 1; min-width: 0; } .shop-info h4 { margin: 0 0 3px 0; font-size: var(--font-md); color: #eee; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; } .shop-info p { margin: 0; font-size: var(--font-sm); color: #888; } .shop-tag { font-size: clamp(0.55rem, 1.5vw, 0.7rem); padding: 2px 5px; border-radius: 3px; font-family: 'Roboto Mono', monospace; font-weight: 600; margin-right: 3px; text-transform: uppercase; flex-shrink: 0; } .cat-deck .shop-tag { background: var(--red-dark); color: #fca5a5; } .cat-move .shop-tag { background: var(--cyan); color: #0e4a5c; } .cat-upgrade .shop-tag { background: #fbbf24; color: #713f12; } .cat-transform .shop-tag { background: #a855f7; color: #3b0764; } .cat-rules .shop-tag { background: var(--blue); color: #fff; } .cat-spins .shop-tag { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); color: #2a1a00; } .cat-metal .shop-tag { background: linear-gradient(to bottom, #9ca3af, #6b7280); color: #1f2937; } .cat-clone .shop-tag { background: linear-gradient(to bottom, #f472b6, #db2777); color: #fff; } .cat-diamond .shop-tag { background: linear-gradient(to bottom, #e0f7ff, #7dd3fc); color: #0c4a6e; border: 1px solid #b9f2ff; } .cat-sticky .shop-tag { background: linear-gradient(to bottom, #fb923c, #ea580c); color: #fff; } .cat-glass .shop-tag { background: linear-gradient(to bottom, #bae6fd, #38bdf8); color: #0369a1; } .shop-item.cat-hold { border-left-color: #22d3ee; } .cat-hold .shop-tag { background: linear-gradient(to bottom, #67e8f9, #0891b2); color: #083344; } .shop-item.cat-scissors { border-left-color: #f472b6; } .cat-scissors .shop-tag { background: linear-gradient(to bottom, #f9a8d4, #db2777); color: #500724; } .shop-item.cat-magnetic { border-left-color: #a855f7; } .cat-magnetic .shop-tag { background: linear-gradient(to bottom, #c084fc, #9333ea); color: #1e1b4b; } .shop-item.cat-machine-exclusive { border-left-color: #e040fb; background: linear-gradient(135deg, rgba(224, 64, 251, 0.08), transparent); } .cat-machine-exclusive .shop-tag { background: linear-gradient(135deg, #7b1fa2, #4a148c); color: #f3e5f5; text-shadow: 0 0 4px rgba(224, 64, 251, 0.5); } .shop-item.cat-wax-seal { border-left-color: #c0c0c0; } .cat-wax-seal .shop-tag { background: linear-gradient(135deg, #8b1a2b, #6b1020); color: #f0d8c0; } .shop-item.cat-seal-silver { border-left-color: #b0b0b0; background: linear-gradient(135deg, rgba(192,192,192,0.08), transparent); } .cat-seal-silver .shop-tag { background: linear-gradient(135deg, #8b1a2b, #6b1020); color: #f0d8c0; } .shop-item.cat-seal-gold { border-left-color: #daa520; background: linear-gradient(135deg, rgba(255,215,0,0.08), transparent); } .cat-seal-gold .shop-tag { background: linear-gradient(135deg, #8b1a2b, #6b1020); color: #f0d8c0; } .shop-item.cat-seal-platinum { border-left-color: #b8a0f0; background: linear-gradient(135deg, rgba(180,160,255,0.1), transparent); } .cat-seal-platinum .shop-tag { background: linear-gradient(135deg, #8b1a2b, #6b1020); color: #f0d8c0; } .shop-seal-inline { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 16px; vertical-align: middle; } .shop-seal-inline .seal-crown { position: relative; width: 16px; height: 12px; clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 35% 30%, 50% 0%, 65% 30%, 80% 0%, 100% 40%, 100% 100%); display: flex; align-items: center; justify-content: center; } .shop-seal-inline .seal-gem { position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; } .shop-seal-inline.seal-silver .seal-crown { background: linear-gradient(135deg, #d0d0d0, #a0a0a0, #c8c8c8); box-shadow: 0 0 3px rgba(192, 192, 192, 0.5); } .shop-seal-inline.seal-silver .seal-gem { background: radial-gradient(circle, #fff, #c0c0c0); } .shop-seal-inline.seal-gold .seal-crown { background: linear-gradient(135deg, #ffd700, #daa520, #ffec8b); box-shadow: 0 0 4px rgba(255, 215, 0, 0.6); } .shop-seal-inline.seal-gold .seal-gem { background: radial-gradient(circle, #fffacd, #ffd700); } .shop-seal-inline.seal-platinum .seal-crown { background: linear-gradient(135deg, #e8e0ff, #b8b0f0, #d8d0ff, #a8a0e8); box-shadow: 0 0 6px rgba(180, 160, 255, 0.7), 0 0 12px rgba(200, 180, 255, 0.3); animation: platinum-shimmer 2s ease-in-out infinite; } .shop-seal-inline.seal-platinum .seal-gem { background: radial-gradient(circle, #fff, #d0c0ff); box-shadow: 0 0 2px rgba(200, 180, 255, 0.8); } .shop-item.cat-enchantment { border-left-color: #8b5cf6; } .cat-enchantment .shop-tag { background: linear-gradient(to bottom, #a78bfa, #6d28d9); color: #f5f3ff; } .shop-item.cat-marker { border-left-color: #06b6d4; } .cat-marker .shop-tag { background: linear-gradient(to bottom, #67e8f9, #0891b2); color: #083344; } .cat-new .shop-tag { background: #14532d; color: #4ade80; } .cat-legendary .shop-tag { background: #581c87; color: #fff; border: 1px solid #d8b4fe; text-shadow: 0 0 5px #a855f7; } .upgrade-tag { display: inline-block; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-family: 'Roboto Mono', monospace; font-weight: 600; margin-left: 2px; text-transform: uppercase; letter-spacing: 0.5px; } .shop-buy-btn { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); color: #2a1a00; border: 1px solid var(--gold-light); padding: var(--space-xs) var(--space-md); font-weight: bold; border-radius: clamp(4px, 1vw, 6px); cursor: pointer; font-family: 'Cinzel', serif; font-size: var(--font-sm); box-shadow: 0 3px 0 #6d4c04; transition: all 0.1s; flex-shrink: 0; white-space: nowrap; } .shop-buy-btn:active { transform: translateY(3px); box-shadow: none; } .shop-buy-btn:disabled { filter: grayscale(1) brightness(0.6); cursor: not-allowed; transform: translateY(3px); box-shadow: none; } .shop-buy-btn.inv-full { background: linear-gradient(to bottom, #4a4a4a, #2a2a2a); color: #888; border: 1px solid #555; box-shadow: 0 3px 0 #111; filter: none; transform: none; cursor: not-allowed; letter-spacing: 1px; } .shop-controls { display: flex; gap: var(--space-xs); flex-wrap: wrap; } #shop-reroll-btn { flex: 1; min-width: 0; background: linear-gradient(to bottom, #3b82f6, #1e40af); border: 1px solid #60a5fa; color: white; padding: var(--space-sm); font-weight: bold; border-radius: clamp(6px, 1vw, 8px); cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: var(--font-xs); box-shadow: 0 3px 0 #1e3a8a; } #shop-reroll-btn:active { transform: translateY(3px); box-shadow: none; } #shop-reroll-btn:disabled { filter: grayscale(1); cursor: not-allowed; } #shop-reroll-btn.koi-bonus { background: linear-gradient(to bottom, #06b6d4, #0891b2); border: 1px solid #67e8f9; box-shadow: 0 3px 0 #0e7490, 0 0 15px rgba(6, 182, 212, 0.5); animation: koiGlow 1.5s ease-in-out infinite; } @keyframes koiGlow { 0%, 100% { box-shadow: 0 3px 0 #0e7490, 0 0 10px rgba(6, 182, 212, 0.4); } 50% { box-shadow: 0 3px 0 #0e7490, 0 0 20px rgba(6, 182, 212, 0.7); } } #shop-view-reels-btn { flex: 1; min-width: 0; background: linear-gradient(to bottom, #8b5cf6, #5b21b6); border: 1px solid #a78bfa; color: white; padding: var(--space-sm); font-weight: bold; border-radius: clamp(6px, 1vw, 8px); cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: var(--font-xs); box-shadow: 0 3px 0 #4c1d95; } #shop-view-reels-btn:active { transform: translateY(3px); box-shadow: none; } #shop-loan-btn { flex: 1; min-width: 0; background: linear-gradient(to bottom, #ef4444, #991b1b); border: 1px solid #fca5a5; color: white; padding: var(--space-sm); font-weight: bold; border-radius: clamp(6px, 1vw, 8px); cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: var(--font-xs); box-shadow: 0 3px 0 #7f1d1d; display: none; } #shop-loan-btn:active { transform: translateY(3px); box-shadow: none; } #shop-debt-btn { flex: 1; min-width: 0; background: linear-gradient(to bottom, #22c55e, #15803d); border: 1px solid #86efac; color: white; padding: var(--space-sm); font-weight: bold; border-radius: clamp(6px, 1vw, 8px); cursor: pointer; font-family: 'Roboto Mono', monospace; font-size: var(--font-xs); box-shadow: 0 3px 0 #166534; display: none; } #shop-debt-btn:active { transform: translateY(3px); box-shadow: none; } #shop-debt-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Loan Modal */ .loan-shark-avatar { font-size: 4rem; margin-bottom: 10px; } .loan-quote { font-style: italic; color: #888; margin-bottom: 20px; font-size: 0.9rem; } .loan-offer { background: rgba(34, 197, 94, 0.1); border: 2px solid var(--success); border-radius: 10px; padding: 15px; margin-bottom: 15px; } .loan-offer-text { font-size: 1.5rem; font-weight: bold; color: var(--success); font-family: 'Cinzel', serif; } .loan-catch { background: rgba(239, 68, 68, 0.1); border: 1px dashed var(--danger); border-radius: 10px; padding: 15px; margin-bottom: 20px; } .loan-catch-text { font-size: 0.9rem; color: var(--danger); } .loan-buttons { display: flex; gap: 15px; justify-content: center; } .btn-take-loan { background: linear-gradient(to bottom, var(--success), var(--success-dark)); border: 2px solid #86efac; color: white; padding: 15px 30px; font-size: 1rem; font-weight: 900; cursor: pointer; border-radius: 10px; font-family: 'Cinzel', serif; box-shadow: 0 4px 0 #14532d; } .btn-take-loan:active { transform: translateY(4px); box-shadow: none; } .btn-refuse-loan { background: transparent; border: 2px solid #555; color: #aaa; padding: 15px 30px; font-size: 1rem; font-weight: bold; cursor: pointer; border-radius: 10px; font-family: 'Roboto Mono', monospace; } .btn-refuse-loan:hover { border-color: #888; color: #ccc; } /* Card Tooltip */ .card-tooltip { position: fixed; z-index: 10000; background: rgba(0, 0, 0, 0.95); border: 2px solid var(--gold); border-radius: 10px; padding: 12px 16px; max-width: 220px; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3); } .card-tooltip.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .card-tooltip .tooltip-title { font-family: 'Cinzel', serif; font-weight: bold; font-size: 1rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; } .card-tooltip .tooltip-desc { font-size: 0.85rem; color: #ccc; line-height: 1.4; } .card-tooltip.tooltip-gilded { border-color: #ffd700; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.5); } .card-tooltip.tooltip-gilded .tooltip-title { color: #ffd700; } .card-tooltip.tooltip-moved { border-color: #22d3d3; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 211, 211, 0.5); } .card-tooltip.tooltip-moved .tooltip-title { color: #22d3d3; } .card-tooltip.tooltip-transformed { border-color: #a855f7; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.5); } .card-tooltip.tooltip-transformed .tooltip-title { color: #a855f7; } .card-tooltip.tooltip-added { border-color: #22c55e; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.5); } .card-tooltip.tooltip-added .tooltip-title { color: #22c55e; } .card-tooltip.tooltip-metal { border-color: #8b9dc3; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 157, 195, 0.5); } .card-tooltip.tooltip-metal .tooltip-title { color: #8b9dc3; } .card-tooltip.tooltip-cloned { border-color: #f472b6; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(244, 114, 182, 0.5); } .card-tooltip.tooltip-cloned .tooltip-title { color: #f472b6; } .card-tooltip.tooltip-diamond { border-color: #7dd3fc; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 25px rgba(185, 242, 255, 0.6); } .card-tooltip.tooltip-diamond .tooltip-title { color: #b9f2ff; } .card-tooltip.tooltip-sticky { border-color: #ff6b35; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 107, 53, 0.5); } .card-tooltip.tooltip-sticky .tooltip-title { color: #fb923c; } .card-tooltip.tooltip-glass { border-color: #38bdf8; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(136, 216, 240, 0.5); } .card-tooltip.tooltip-glass .tooltip-title { color: #88d8f0; } .card-tooltip.tooltip-marked { border-color: #ff69b4; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 105, 180, 0.5); } .card-tooltip.tooltip-marked .tooltip-title { color: #ff69b4; } /* Multi-upgrade tooltip combinations */ .card-tooltip.tooltip-added.tooltip-moved { border-image: linear-gradient(135deg, #22c55e, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(34, 197, 94, 0.4), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-added.tooltip-gilded { border-image: linear-gradient(135deg, #22c55e, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(34, 197, 94, 0.4), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-transformed.tooltip-moved { border-image: linear-gradient(135deg, #a855f7, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.4), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-transformed.tooltip-gilded { border-image: linear-gradient(135deg, #a855f7, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.4), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-added.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #22c55e, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(34, 197, 94, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } /* Cloned tooltip combinations */ .card-tooltip.tooltip-cloned.tooltip-gilded { border-image: linear-gradient(135deg, #f472b6, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 114, 182, 0.4), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-cloned.tooltip-metal { border-image: linear-gradient(135deg, #f472b6, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 114, 182, 0.4), 0 0 25px rgba(139, 157, 195, 0.4); } .card-tooltip.tooltip-metal.tooltip-moved { border-image: linear-gradient(135deg, #8b9dc3, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(139, 157, 195, 0.4), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-cloned.tooltip-added { border-image: linear-gradient(135deg, #f472b6, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 114, 182, 0.4), 0 0 25px rgba(34, 197, 94, 0.4); } .card-tooltip.tooltip-cloned.tooltip-moved { border-image: linear-gradient(135deg, #f472b6, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 114, 182, 0.4), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-cloned.tooltip-transformed { border-image: linear-gradient(135deg, #f472b6, #a855f7) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 114, 182, 0.4), 0 0 25px rgba(168, 85, 247, 0.4); } .card-tooltip.tooltip-cloned.tooltip-gilded.tooltip-metal { border-image: linear-gradient(135deg, #f472b6, #ffd700, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(244, 114, 182, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(139, 157, 195, 0.3); } .card-tooltip.tooltip-cloned.tooltip-added.tooltip-gilded { border-image: linear-gradient(135deg, #f472b6, #22c55e, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(244, 114, 182, 0.3), 0 0 20px rgba(34, 197, 94, 0.3), 0 0 28px rgba(255, 215, 0, 0.3); } /* Diamond tooltip combinations */ .card-tooltip.tooltip-diamond.tooltip-gilded { border-image: linear-gradient(135deg, #7dd3fc, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-diamond.tooltip-metal { border-image: linear-gradient(135deg, #7dd3fc, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(139, 157, 195, 0.4); } .card-tooltip.tooltip-diamond.tooltip-cloned { border-image: linear-gradient(135deg, #7dd3fc, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(244, 114, 182, 0.4); } /* Sticky tooltip combinations */ .card-tooltip.tooltip-sticky.tooltip-gilded { border-image: linear-gradient(135deg, #ff6b35, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-sticky.tooltip-metal { border-image: linear-gradient(135deg, #ff6b35, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(139, 157, 195, 0.4); } .card-tooltip.tooltip-sticky.tooltip-cloned { border-image: linear-gradient(135deg, #ff6b35, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(244, 114, 182, 0.4); } .card-tooltip.tooltip-sticky.tooltip-added { border-image: linear-gradient(135deg, #ff6b35, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(34, 197, 94, 0.4); } /* Glass tooltip combinations */ .card-tooltip.tooltip-glass.tooltip-gilded { border-image: linear-gradient(135deg, #38bdf8, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(255, 215, 0, 0.4); } .card-tooltip.tooltip-glass.tooltip-metal { border-image: linear-gradient(135deg, #38bdf8, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(139, 157, 195, 0.4); } .card-tooltip.tooltip-glass.tooltip-cloned { border-image: linear-gradient(135deg, #38bdf8, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(244, 114, 182, 0.4); } .card-tooltip.tooltip-glass.tooltip-added { border-image: linear-gradient(135deg, #38bdf8, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(34, 197, 94, 0.4); } .card-tooltip.tooltip-glass.tooltip-sticky { border-image: linear-gradient(135deg, #38bdf8, #ff6b35) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(255, 107, 53, 0.4); } /* Sticky + moved/transformed combinations */ .card-tooltip.tooltip-sticky.tooltip-moved { border-image: linear-gradient(135deg, #ff6b35, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-sticky.tooltip-transformed { border-image: linear-gradient(135deg, #ff6b35, #a855f7) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 53, 0.5), 0 0 25px rgba(168, 85, 247, 0.4); } /* Diamond + additional combinations */ .card-tooltip.tooltip-diamond.tooltip-added { border-image: linear-gradient(135deg, #7dd3fc, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(34, 197, 94, 0.4); } .card-tooltip.tooltip-diamond.tooltip-moved { border-image: linear-gradient(135deg, #7dd3fc, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-diamond.tooltip-transformed { border-image: linear-gradient(135deg, #7dd3fc, #a855f7) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(168, 85, 247, 0.4); } .card-tooltip.tooltip-diamond.tooltip-sticky { border-image: linear-gradient(135deg, #7dd3fc, #ff6b35) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(125, 211, 252, 0.5), 0 0 25px rgba(255, 107, 53, 0.4); } .card-tooltip.tooltip-diamond.tooltip-glass { border-image: linear-gradient(135deg, #7dd3fc, #38bdf8) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(125, 211, 252, 0.6), 0 0 30px rgba(56, 189, 248, 0.4); } /* Glass + moved/transformed combinations */ .card-tooltip.tooltip-glass.tooltip-moved { border-image: linear-gradient(135deg, #38bdf8, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(34, 211, 211, 0.4); } .card-tooltip.tooltip-glass.tooltip-transformed { border-image: linear-gradient(135deg, #38bdf8, #a855f7) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.5), 0 0 25px rgba(168, 85, 247, 0.4); } .card-tooltip.tooltip-glass.tooltip-diamond { border-image: linear-gradient(135deg, #38bdf8, #7dd3fc) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.5), 0 0 30px rgba(125, 211, 252, 0.4); } /* 3-upgrade combinations with new upgrades */ .card-tooltip.tooltip-diamond.tooltip-gilded.tooltip-metal { border-image: linear-gradient(135deg, #7dd3fc, #ffd700, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(139, 157, 195, 0.3); } .card-tooltip.tooltip-diamond.tooltip-gilded.tooltip-cloned { border-image: linear-gradient(135deg, #7dd3fc, #ffd700, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(244, 114, 182, 0.3); } .card-tooltip.tooltip-diamond.tooltip-gilded.tooltip-added { border-image: linear-gradient(135deg, #7dd3fc, #ffd700, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 197, 94, 0.3); } .card-tooltip.tooltip-sticky.tooltip-gilded.tooltip-metal { border-image: linear-gradient(135deg, #ff6b35, #ffd700, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(139, 157, 195, 0.3); } .card-tooltip.tooltip-sticky.tooltip-gilded.tooltip-cloned { border-image: linear-gradient(135deg, #ff6b35, #ffd700, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(244, 114, 182, 0.3); } .card-tooltip.tooltip-sticky.tooltip-moved.tooltip-added { border-image: linear-gradient(135deg, #ff6b35, #22d3d3, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 107, 53, 0.3), 0 0 20px rgba(34, 211, 211, 0.3), 0 0 28px rgba(34, 197, 94, 0.3); } .card-tooltip.tooltip-glass.tooltip-gilded.tooltip-metal { border-image: linear-gradient(135deg, #38bdf8, #ffd700, #8b9dc3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(139, 157, 195, 0.3); } .card-tooltip.tooltip-glass.tooltip-gilded.tooltip-cloned { border-image: linear-gradient(135deg, #38bdf8, #ffd700, #f472b6) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(244, 114, 182, 0.3); } .card-tooltip.tooltip-glass.tooltip-moved.tooltip-added { border-image: linear-gradient(135deg, #38bdf8, #22d3d3, #22c55e) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(34, 211, 211, 0.3), 0 0 28px rgba(34, 197, 94, 0.3); } .card-tooltip.tooltip-glass.tooltip-sticky.tooltip-gilded { border-image: linear-gradient(135deg, #38bdf8, #ff6b35, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(255, 107, 53, 0.3), 0 0 28px rgba(255, 215, 0, 0.3); } .card-tooltip.tooltip-diamond.tooltip-sticky.tooltip-gilded { border-image: linear-gradient(135deg, #7dd3fc, #ff6b35, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(255, 107, 53, 0.3), 0 0 28px rgba(255, 215, 0, 0.3); } .card-tooltip.tooltip-diamond.tooltip-glass.tooltip-gilded { border-image: linear-gradient(135deg, #7dd3fc, #38bdf8, #ffd700) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(56, 189, 248, 0.3), 0 0 28px rgba(255, 215, 0, 0.3); } .card-tooltip.tooltip-cloned.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #f472b6, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(244, 114, 182, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-cloned.tooltip-metal.tooltip-moved { border-image: linear-gradient(135deg, #f472b6, #8b9dc3, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(244, 114, 182, 0.3), 0 0 20px rgba(139, 157, 195, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-sticky.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #ff6b35, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-glass.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #38bdf8, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-sticky.tooltip-metal.tooltip-moved { border-image: linear-gradient(135deg, #ff6b35, #8b9dc3, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 107, 53, 0.3), 0 0 20px rgba(139, 157, 195, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-glass.tooltip-metal.tooltip-moved { border-image: linear-gradient(135deg, #38bdf8, #8b9dc3, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.3), 0 0 20px rgba(139, 157, 195, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card-tooltip.tooltip-diamond.tooltip-gilded.tooltip-moved { border-image: linear-gradient(135deg, #7dd3fc, #ffd700, #22d3d3) 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(125, 211, 252, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), 0 0 28px rgba(34, 211, 211, 0.3); } .card.has-tooltip { cursor: pointer; } .list-card.has-tooltip { cursor: pointer; } /* Main Menu Styles */ .menu-btn { background: linear-gradient(to bottom, #334155, #1e293b); border: 1px solid #475569; color: #e2e8f0; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-family: 'Roboto Mono', monospace; font-weight: bold; transition: all 0.2s; } .menu-btn:hover { background: linear-gradient(to bottom, #475569, #334155); border-color: var(--gold); color: var(--gold); } .menu-content { text-align: center; padding: 20px; padding-top: 5px; padding-bottom: 30px; max-width: 320px; position: relative; } .menu-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 2rem; margin: 0 0 25px 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .menu-buttons { display: flex; flex-direction: column; gap: 12px; } .menu-option-btn { display: flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 15px 20px; border: 2px solid #334155; border-radius: 10px; background: linear-gradient(to bottom, #1e293b, #0f172a); color: #e2e8f0; font-family: 'Roboto Mono', monospace; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s; } .menu-option-btn:hover { border-color: var(--gold); background: linear-gradient(to bottom, #334155, #1e293b); transform: translateX(5px); } .menu-option-btn .menu-icon { font-size: 1.3rem; width: 30px; text-align: center; } .menu-option-btn.resume-btn:hover { border-color: var(--success); color: var(--success); } .menu-option-btn.sound-btn:hover { border-color: var(--blue); color: var(--blue); } .menu-option-btn.help-btn:hover { border-color: var(--purple); color: var(--purple); } .menu-option-btn.story-btn:hover { border-color: #f59e0b; color: #f59e0b; } /* Boss Reminder Modal */ .boss-reminder-content { background: linear-gradient(135deg, #0a0a1a 0%, #15152a 50%, #0a0a1a 100%); border: 3px solid #8844ff; max-width: 380px; text-align: center; box-shadow: 0 0 30px rgba(136, 68, 255, 0.3); padding: 25px; } .boss-reminder-header { margin-bottom: 12px; } .boss-reminder-portrait-container { position: relative; width: 140px; height: 140px; margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center; } .boss-reminder-portrait { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 40px rgba(136, 68, 255, 0.25); } .boss-reminder-portrait.outline-glow { border-radius: 0; border: none; box-shadow: none; background: transparent; width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)) drop-shadow(0 0 25px rgba(136, 68, 255, 0.5)); } .boss-reminder-icon { font-size: 2.8rem; display: block; filter: drop-shadow(0 0 12px rgba(136, 68, 255, 0.5)); } .boss-reminder-title { font-family: 'Cinzel', serif; font-size: 1rem; color: #aa88ff; text-transform: uppercase; letter-spacing: 2px; margin: 0; } .boss-reminder-floor { color: #64748b; font-size: 0.85rem; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 1px; } .boss-reminder-name { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #cc99ff; text-shadow: 0 0 15px rgba(136, 68, 255, 0.6); margin: 0 0 12px 0; letter-spacing: 1px; } .boss-reminder-ability-box { background: rgba(136, 68, 255, 0.1); border: 1px solid #8844ff; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .boss-reminder-ability-label { color: #aa88ff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 5px 0; } .boss-reminder-ability-label span { color: #cc99ff; font-weight: bold; } .boss-reminder-ability-desc { color: #cbd5e1; font-size: 0.85rem; margin: 0; line-height: 1.4; } .boss-reminder-stage { color: #f59e0b; font-size: 0.85rem; margin: 0 0 15px 0; font-weight: bold; } .btn-boss-reminder-continue { padding: 12px 35px; background: linear-gradient(180deg, #8844ff 0%, #6622cc 100%); border: 2px solid #aa88ff; border-radius: 8px; color: #fff; font-family: 'Roboto Mono', monospace; font-weight: bold; font-size: 1rem; cursor: pointer; transition: all 0.2s; } .btn-boss-reminder-continue:hover { filter: brightness(1.15); transform: translateY(-2px); } .menu-option-btn.reset-btn-menu:hover { border-color: var(--danger); color: var(--danger); } .menu-footer { margin-top: 20px; color: #64748b; font-size: 0.75rem; } /* Help Modal Styles */ .help-content { max-width: 450px; padding: 25px; } .help-title { color: var(--purple); font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 20px 0; text-shadow: 0 0 15px rgba(168, 85, 247, 0.5); } .help-page-container { min-height: 280px; position: relative; } .help-page { display: none; text-align: left; padding: 15px; background: rgba(0, 0, 0, 0.3); border-radius: 10px; border: 1px solid #334155; } .help-page.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .help-page h3 { color: var(--gold); font-family: 'Cinzel', serif; margin: 0 0 15px 0; font-size: 1.2rem; } .help-page p { color: #cbd5e1; font-size: 0.85rem; line-height: 1.6; margin: 0 0 10px 0; } .help-page p strong { color: var(--gold-light); } .help-nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 20px 0; } .help-nav-btn { background: linear-gradient(to bottom, #334155, #1e293b); border: 1px solid #475569; color: #e2e8f0; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-family: 'Roboto Mono', monospace; font-weight: bold; transition: all 0.2s; } .help-nav-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--purple); } .help-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .help-page-indicator { color: #94a3b8; font-size: 0.9rem; font-weight: bold; } /* Reset Confirm Modal */ .reset-confirm-content { text-align: center; padding: 30px; max-width: 320px; } .reset-title { color: var(--danger); font-family: 'Cinzel', serif; font-size: 1.5rem; margin: 0 0 15px 0; } .reset-warning { color: #94a3b8; font-size: 0.9rem; margin-bottom: 15px; } .reset-warning-list { text-align: left; color: #ff6666; font-size: 0.85rem; margin: 10px 20px; padding-left: 15px; } .reset-warning-list li { margin: 5px 0; } #full-reset-confirm-modal .reset-confirm-content { max-width: 380px; } .reset-confirm-btn:disabled { cursor: not-allowed; } .reset-buttons { display: flex; gap: 15px; justify-content: center; } .reset-cancel-btn { background: linear-gradient(to bottom, #334155, #1e293b); border: 1px solid #475569; color: #e2e8f0; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-family: 'Roboto Mono', monospace; font-weight: bold; } .reset-cancel-btn:hover { border-color: var(--gold); color: var(--gold); } .reset-confirm-btn { background: linear-gradient(to bottom, var(--danger), var(--red-dark)); border: 1px solid #fca5a5; color: #fff; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-family: 'Roboto Mono', monospace; font-weight: bold; } .reset-confirm-btn:hover { filter: brightness(1.1); } /* Trophy Cabinet Styles */ .trophy-content { max-width: 600px; max-height: calc(80vh - 15px - env(safe-area-inset-bottom, 0px)); max-height: calc(80dvh - 15px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .trophy-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 5px 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .trophy-subtitle { color: #94a3b8; margin: 0 0 20px 0; font-size: 0.9rem; } .trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 10px 0; } .trophy-item { background: linear-gradient(135deg, #1e293b, #0f172a); border: 2px solid #334155; border-radius: 10px; padding: 12px; text-align: center; transition: all 0.3s; } .trophy-item.locked { opacity: 0.5; filter: grayscale(80%); } .trophy-item.unlocked { animation: trophyGlow 2s ease-in-out infinite alternate; } .trophy-item.tier-bronze { border-color: #cd7f32; } .trophy-item.tier-silver { border-color: #c0c0c0; } .trophy-item.tier-gold { border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); } .trophy-item.tier-platinum { border-color: #e5e4e2; box-shadow: 0 0 15px rgba(229, 228, 226, 0.4); } .trophy-icon { font-size: 2.5rem; margin-bottom: 8px; } .trophy-name { color: var(--gold); font-weight: bold; font-size: 0.85rem; margin-bottom: 5px; } .trophy-desc { color: #94a3b8; font-size: 0.7rem; line-height: 1.3; margin-bottom: 8px; } .trophy-tier { font-size: 0.6rem; font-weight: bold; letter-spacing: 1px; } .trophy-item.tier-bronze .trophy-tier { color: #cd7f32; } .trophy-item.tier-silver .trophy-tier { color: #c0c0c0; } .trophy-item.tier-gold .trophy-tier { color: #ffd700; } .trophy-item.tier-platinum .trophy-tier { color: #e5e4e2; } /* Stats Menu Styles */ .stats-content { max-width: 550px; max-height: calc(80vh - 15px - env(safe-area-inset-bottom, 0px)); max-height: calc(80dvh - 15px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .stats-title { color: #60a5fa; font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 5px 0; text-shadow: 0 0 20px rgba(96, 165, 250, 0.5); } .stats-subtitle { color: #94a3b8; margin: 0 0 20px 0; font-size: 0.9rem; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 10px 0; } .stat-item { background: linear-gradient(135deg, #1e293b, #0f172a); border: 2px solid #334155; border-radius: 10px; padding: 15px; text-align: center; transition: all 0.3s; } .stat-item:hover { border-color: #60a5fa; transform: translateY(-2px); } .stat-item.highlight { border-color: #ffd700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); } .stat-icon { font-size: 2rem; margin-bottom: 8px; } .stat-value { color: #fff; font-weight: bold; font-size: 1.4rem; margin-bottom: 5px; font-family: 'Roboto Mono', monospace; } .stat-value.money { color: #22c55e; } .stat-value.negative { color: #ef4444; } .stat-value.gold { color: #ffd700; } .stat-label { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; } .stat-item.full-width { grid-column: span 2; } .stat-item.full-width .stat-value { font-size: 1.6rem; } .stats-divider { grid-column: span 2; height: 1px; background: linear-gradient(90deg, transparent, #334155, transparent); margin: 5px 0; } .stats-section-title { grid-column: span 2; color: #60a5fa; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; text-align: left; padding: 5px 0; margin-top: 5px; } @keyframes trophyGlow { 0% { transform: scale(1); } 100% { transform: scale(1.02); } } /* Trophy Banner */ .trophy-banner { position: fixed; top: 15px; top: calc(15px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%) translateY(-200px) scale(0.75); z-index: 20000; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 3px solid #ffd700; border-radius: 12px; padding: 0; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.8); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; min-width: 220px; } .trophy-banner.active { transform: translateX(-50%) translateY(0) scale(0.75); opacity: 1; } .trophy-banner-content { text-align: center; padding: 15px 20px; } .trophy-banner-header { color: #ffd700; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 8px; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .trophy-banner-icon { font-size: 2.25rem; margin-bottom: 8px; animation: bounceIn 0.6s ease-out; } .trophy-banner-name { color: #fff; font-weight: bold; font-size: 1rem; margin-bottom: 4px; } .trophy-banner-desc { color: #94a3b8; font-size: 0.75rem; margin-bottom: 8px; } .trophy-banner-tier { font-size: 0.65rem; font-weight: bold; letter-spacing: 2px; } @keyframes bounceIn { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .menu-option-btn.trophy-btn:hover { border-color: var(--gold); color: var(--gold); } .menu-option-btn.stats-btn:hover { border-color: #60a5fa; color: #60a5fa; } .menu-option-btn.settings-btn:hover { border-color: #a78bfa; color: #a78bfa; } .menu-option-btn.haptic-btn:hover { border-color: #f472b6; color: #f472b6; } .menu-option-btn.login-btn:hover { border-color: #34d399; color: #34d399; } .menu-option-btn.back-btn:hover { border-color: #94a3b8; color: #94a3b8; } .settings-divider { height: 1px; background: linear-gradient(90deg, transparent, #4a5568, transparent); margin: 8px 0; width: 100%; } .settings-legal-links { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; } .settings-legal-link { font-size: 0.7rem; color: #718096; text-decoration: none; font-family: 'Courier New', monospace; } .settings-legal-link:hover { color: #a0aec0; text-decoration: underline; } .settings-legal-sep { font-size: 0.7rem; color: #4a5568; } .settings-content { min-width: 280px; } .cloud-sync-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px; color: #22c55e; font-size: 0.85rem; margin: 5px 0; } .cloud-sync-status .sync-icon { font-size: 1.1rem; } .cloud-sync-status .sync-text { font-family: 'Roboto Mono', monospace; } .cloud-sync-buttons { display: flex; gap: 10px; width: 100%; margin: 5px 0; } .cloud-sync-buttons .cloud-btn { flex: 1; padding: 10px 8px; font-size: 0.75rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cloud-sync-buttons .upload-btn { background: linear-gradient(to bottom, #3b82f6, #1d4ed8); border-color: #60a5fa; } .cloud-sync-buttons .upload-btn:hover { background: linear-gradient(to bottom, #60a5fa, #3b82f6); border-color: #93c5fd; } .cloud-sync-buttons .download-btn { background: linear-gradient(to bottom, #22c55e, #15803d); border-color: #4ade80; } .cloud-sync-buttons .download-btn:hover { background: linear-gradient(to bottom, #4ade80, #22c55e); border-color: #86efac; } /* Customization Modal */ .customize-content { max-width: 450px; text-align: center; } .customize-subtitle { color: #94a3b8; font-size: 0.9rem; margin: 0 0 20px 0; } /* Royal Shoppe Tabs */ .royal-shop-tabs { display: flex; justify-content: center; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; } .royal-shop-tab { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: rgba(0, 0, 0, 0.4); border: 2px solid #4a5568; border-radius: clamp(6px, 1.5vw, 10px); color: #94a3b8; font-family: 'Cinzel', serif; font-size: var(--font-sm); cursor: pointer; transition: all 0.2s ease; } .royal-shop-tab:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 215, 0, 0.1); } .royal-shop-tab.active { border-color: var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05)); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } .royal-shop-tab .tab-icon { font-size: var(--font-md); } .royal-shop-tab .tab-label { text-transform: uppercase; letter-spacing: 1px; } .royal-shop-tab-content { animation: fadeIn 0.3s ease; } /* Randomize Button */ .randomize-container { display: flex; justify-content: center; margin-bottom: var(--space-md); } .randomize-btn { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 50%, #4c1d95 100%); border: 2px solid #a78bfa; border-radius: 25px; color: #fff; font-family: 'Cinzel', serif; font-size: var(--font-md); font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); text-transform: uppercase; letter-spacing: 1px; } .randomize-btn:hover { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 50%, #5b21b6 100%); border-color: #c4b5fd; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6); transform: translateY(-2px); } .randomize-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4); } .randomize-icon { font-size: 1.3em; animation: diceShake 2s ease-in-out infinite; } @keyframes diceShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } } .customize-sections { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); padding-bottom: 60px; } .customize-section { background: rgba(0, 0, 0, 0.3); border: 1px solid #4a5568; border-radius: clamp(6px, 1.5vw, 10px); padding: var(--space-sm); overflow: hidden; } .customize-section-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: var(--font-sm); margin: 0 0 var(--space-sm) 0; text-transform: uppercase; letter-spacing: 1px; } .customize-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; } .customize-options-wrapper { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-sm); } .owned-section, .for-sale-section { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; min-width: 0; } .shop-divider { height: 2px; width: 100%; background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%); flex-shrink: 0; } .shop-divider.hidden { display: none; } .cosmetic-option { width: clamp(50px, 15vw, 70px); height: clamp(50px, 15vw, 70px); border: 2px solid #4a5568; border-radius: clamp(5px, 1vw, 8px); background: rgba(0, 0, 0, 0.4); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.2s ease; position: relative; flex-shrink: 0; } .cosmetic-option:hover { border-color: var(--gold); transform: scale(1.05); } .cosmetic-option.selected { border-color: var(--gold); box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.1); } .cosmetic-option.equipped { border-color: #22c55e; box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.1); } /* Sound preview button in Royal Shoppe */ .sound-preview-btn { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(255, 215, 0, 0.8); color: #1a1a2e; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 10; padding: 0; } .sound-preview-btn:hover { background: #ffd700; transform: scale(1.1); box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } .sound-preview-btn:active { transform: scale(0.95); } .cosmetic-option.locked { cursor: pointer; } .cosmetic-option.locked:hover { transform: none; border-color: #4a5568; } .cosmetic-option .cosmetic-icon { font-size: clamp(1rem, 4vw, 1.5rem); margin-bottom: 2px; } .cosmetic-option .cosmetic-name { font-size: clamp(0.5rem, 1.5vw, 0.6rem); color: #94a3b8; text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cosmetic-option.selected .cosmetic-name { color: var(--gold); } .cosmetic-option .lock-icon { position: absolute; top: 50%; left: 50%; } .shop-currency-header { display: flex; justify-content: center; gap: var(--space-sm); margin: var(--space-xs) 0; flex-wrap: wrap; } .shop-coins-header { display: flex; justify-content: center; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); background: linear-gradient(135deg, #2a1f0a 0%, #1a1205 100%); border: 2px solid var(--gold); border-radius: 25px; width: fit-content; } .shop-coins-label { color: #94a3b8; font-size: var(--font-sm); } .shop-coins-value { color: var(--gold); font-weight: 700; font-size: var(--font-md); text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } .shop-crests-header { display: flex; justify-content: center; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); background: linear-gradient(135deg, #0a2a1f 0%, #051a12 100%); border: 2px solid #2ecc71; border-radius: 25px; width: fit-content; } .shop-crests-label { color: #94a3b8; font-size: var(--font-sm); } .shop-crests-value { color: #2ecc71; font-weight: 700; font-size: var(--font-md); text-shadow: 0 0 8px rgba(46, 204, 113, 0.5); } .cosmetic-option.purchasable { opacity: 1; cursor: pointer; } .cosmetic-option.purchasable:hover { transform: scale(1.05); border-color: var(--gold); } .cosmetic-option.locked:not(.purchasable) { cursor: not-allowed; } .cosmetic-price { font-size: clamp(0.5rem, 1.5vw, 0.65rem); font-weight: 700; padding: 1px 4px; border-radius: 6px; margin-top: 1px; } .cosmetic-price.can-afford { color: #22c55e; background: rgba(34, 197, 94, 0.2); } .cosmetic-price.cannot-afford { color: #ef4444; background: rgba(239, 68, 68, 0.2); } .cosmetic-exclusive-lock { position: absolute; top: 2px; right: 2px; font-size: clamp(0.5rem, 2vw, 0.6rem); font-weight: 700; color: #fff; background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(139, 92, 246, 0.9)); padding: 1px 4px; border-radius: 4px; border: 1px solid rgba(168, 85, 247, 0.7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 2; line-height: 1.2; } .cosmetic-option.exclusive-locked { cursor: pointer; border-color: rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, rgba(76, 29, 149, 0.3), rgba(30, 10, 62, 0.5)); } .cosmetic-option.exclusive-locked .cosmetic-preview { opacity: 0.7; } .cosmetic-option.exclusive-locked:hover { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); transform: scale(1.02); } .cosmetic-option.exclusive-locked:hover .cosmetic-preview { opacity: 1; } .unlock-requirement-modal { max-width: 320px; text-align: center; padding: 25px; } .unlock-req-icon { font-size: 3rem; margin-bottom: 10px; } .unlock-req-title { font-size: 1.3rem; color: var(--gold); margin-bottom: 8px; } .unlock-req-desc { font-size: 0.85rem; color: #aaa; margin-bottom: 15px; font-style: italic; } .unlock-req-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent); margin: 15px 0; } .unlock-req-how { font-size: 0.9rem; color: #ccc; margin-bottom: 8px; } .unlock-req-text { font-size: 1rem; color: rgba(168, 85, 247, 1); font-weight: 600; line-height: 1.4; } .btn-unlock-close { margin-top: 20px; padding: 12px 30px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(139, 92, 246, 0.8)); border: none; border-radius: 8px; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; } .btn-unlock-close:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); } .owned-tag { font-size: 0.55rem; font-weight: 700; color: #22c55e; background: rgba(34, 197, 94, 0.2); padding: 2px 6px; border-radius: 8px; margin-top: 2px; } .equipped-check { position: absolute; top: 4px; right: 4px; font-size: 0.9rem; color: #22c55e; font-weight: 700; text-shadow: 0 0 8px rgba(34, 197, 94, 0.8); } .cosmetic-preview { width: 40px; height: 40px; border-radius: 8px; margin-bottom: 4px; border: 2px solid rgba(255, 255, 255, 0.2); } .cosmetic-preview.locked-preview { opacity: 1; } .preview-spin-default { background: linear-gradient(180deg, #fef08a 0%, #d4af37 50%, #b8860b 100%); } .preview-spin-neon { background: linear-gradient(180deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%); box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); } .preview-spin-gold { background: linear-gradient(180deg, #fef08a 0%, #d4af37 30%, #b8860b 70%, #8b6914 100%); box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); } .preview-spin-fire { background: linear-gradient(180deg, #fef08a 0%, #fb923c 30%, #dc2626 70%, #991b1b 100%); box-shadow: 0 0 10px rgba(220, 38, 38, 0.5); } .preview-spin-ice { background: linear-gradient(180deg, #e0f2fe 0%, #7dd3fc 30%, #38bdf8 70%, #0284c7 100%); box-shadow: 0 0 8px rgba(56, 189, 248, 0.4); } .preview-spin-diamond { background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 20%, #c7d2fe 50%, #a5b4fc 80%, #818cf8 100%); box-shadow: 0 0 10px rgba(165, 180, 252, 0.5); } .preview-border-default { background: linear-gradient(145deg, #374151, #1f2937); border: 3px solid #6b7280; } .preview-border-chrome { background: linear-gradient(145deg, #9ca3af, #6b7280); border: 3px solid #d1d5db; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3); } .preview-border-royal { background: linear-gradient(145deg, #3d2a1a, #1a0f05); border: 3px solid var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); } .preview-border-cyber { background: linear-gradient(145deg, #0f172a, #020617); border: 3px solid #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); } .preview-border-wooden { background: linear-gradient(145deg, #78350f, #451a03); border: 4px solid #92400e; } .preview-bg-default { background: linear-gradient(160deg, #2a2a4e 0%, #1a1a2e 100%); } .preview-bg-velvet { background: linear-gradient(160deg, #7c3aed 0%, #4a1d6a 100%); } .preview-bg-ocean { background: linear-gradient(160deg, #0ea5e9 0%, #0c4a6e 100%); } .preview-bg-midnight { background: linear-gradient(160deg, #6366f1 0%, #1e1b4b 100%); } .preview-bg-emerald { background: linear-gradient(160deg, #10b981 0%, #064e3b 100%); } .customize-footer { margin-top: 15px; } /* Infinite Mode Offer Modal */ .infinite-offer-content { text-align: center; max-width: 400px; } .infinite-crown { font-size: 4rem; margin-bottom: 10px; animation: bounceIn 0.6s ease-out, pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .infinite-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.5rem; margin: 0 0 10px 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .infinite-subtitle { color: #94a3b8; font-size: 0.95rem; margin-bottom: 20px; } .infinite-offer-box { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid var(--red); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .infinite-challenge-text { color: #fff; font-size: 1rem; margin-bottom: 10px; } .infinite-warning { color: var(--danger); font-size: 0.9rem; font-weight: bold; } .infinite-buttons { display: flex; flex-direction: column; gap: 12px; } .btn-infinite-accept { background: linear-gradient(to bottom, var(--red), var(--red-dark)); color: white; border: 2px solid #ff6b6b; padding: 15px 30px; font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4); } .btn-infinite-accept:hover { transform: scale(1.05); box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6); } .btn-infinite-decline { background: transparent; color: var(--gold); border: 1px solid var(--gold-dark); padding: 12px 25px; font-family: 'Roboto Mono', monospace; font-size: 0.9rem; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .btn-infinite-decline:hover { background: rgba(255, 215, 0, 0.1); border-color: var(--gold); } /* Debt Settlement Modal */ .debt-settlement-content { text-align: center; max-width: 400px; } .debt-shark-icon { font-size: 4rem; margin-bottom: 10px; animation: pulse 2s infinite; } .debt-title { color: var(--danger); font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 10px 0; text-shadow: 0 0 20px rgba(239, 68, 68, 0.5); } .debt-subtitle { color: #94a3b8; font-size: 0.95rem; margin-bottom: 20px; font-style: italic; } .debt-amount-box { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid var(--danger); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .debt-amount-label { color: #888; font-size: 0.85rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .debt-amount-value { color: var(--danger); font-size: 2.5rem; font-family: 'Cinzel', serif; font-weight: bold; margin: 10px 0; text-shadow: 0 0 15px rgba(239, 68, 68, 0.5); } .debt-balance-info { color: var(--gold); font-size: 0.9rem; } .debt-settlement-buttons { display: flex; flex-direction: column; gap: 12px; } .btn-pay-full-debt { background: linear-gradient(to bottom, var(--success), var(--success-dark)); color: white; border: 2px solid #86efac; padding: 15px 30px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); } .btn-pay-full-debt:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 6px 25px rgba(34, 197, 94, 0.6); } .btn-pay-full-debt:disabled { background: linear-gradient(to bottom, #475569, #334155); border-color: #64748b; color: #94a3b8; cursor: not-allowed; box-shadow: none; } .btn-infinite-with-debt { background: linear-gradient(to bottom, var(--red), var(--red-dark)); color: white; border: 2px solid #ff6b6b; padding: 12px 25px; font-family: 'Roboto Mono', monospace; font-size: 0.9rem; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .btn-infinite-with-debt:hover { transform: scale(1.02); } .btn-shark-takeover { background: transparent; color: #888; border: 1px solid #444; padding: 10px 20px; font-family: 'Roboto Mono', monospace; font-size: 0.85rem; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .btn-shark-takeover:hover { color: var(--danger); border-color: var(--danger); } /* Shark Takeover Modal */ .shark-takeover-content { text-align: center; max-width: 400px; } .shark-icon { font-size: 5rem; margin-bottom: 10px; } .shark-title { color: var(--danger); font-family: 'Cinzel', serif; font-size: 2rem; margin: 0 0 10px 0; text-shadow: 0 0 20px rgba(239, 68, 68, 0.5); letter-spacing: 2px; } .shark-subtitle { color: #94a3b8; font-size: 1rem; margin-bottom: 20px; } .shark-takeover-message { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--danger); border-radius: 8px; padding: 20px; margin-bottom: 25px; } .shark-takeover-message p { color: #ccc; font-style: italic; margin: 8px 0; } .shark-final { color: var(--danger) !important; font-weight: bold; font-style: normal !important; } .btn-shark-restart { background: linear-gradient(to bottom, #475569, #334155); color: white; border: 2px solid #64748b; padding: 15px 40px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; } .btn-shark-restart:hover { background: linear-gradient(to bottom, #64748b, #475569); } /* Bank Takeover Modal */ .bank-takeover-content { text-align: center; max-width: 400px; } .bank-icon { font-size: 4rem; margin-bottom: 10px; filter: grayscale(50%); } .takeover-title { color: var(--danger); font-family: 'Cinzel', serif; font-size: 2rem; margin: 0 0 10px 0; text-shadow: 0 0 20px rgba(239, 68, 68, 0.5); letter-spacing: 3px; } .takeover-subtitle { color: #94a3b8; font-size: 1rem; margin-bottom: 20px; } .takeover-stats { background: rgba(0, 0, 0, 0.5); border: 1px solid #333; border-radius: 8px; padding: 15px; margin-bottom: 20px; } .takeover-stats p { margin: 8px 0; color: #888; font-size: 0.95rem; } .takeover-highlight { color: var(--gold); font-weight: bold; font-size: 1.1em; } .takeover-message { color: #666; font-style: italic; margin-bottom: 25px; } .btn-takeover-restart { background: linear-gradient(to bottom, #475569, #334155); color: white; border: 2px solid #64748b; padding: 15px 40px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; } .btn-takeover-restart:hover { background: linear-gradient(to bottom, #64748b, #475569); transform: scale(1.05); } /* Infinite Mode UI Elements */ .infinite-cycle-display { background: linear-gradient(135deg, var(--red-dark), #4a0000); border: 2px solid var(--red); border-radius: 8px; padding: 10px; margin-top: 10px; text-align: center; } .infinite-cycle-label { color: #ff6b6b; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; } .infinite-cycle-value { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: bold; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .vip-header.infinite-mode { color: var(--danger); animation: pulseRed 2s infinite; } /* Combined Boss Section Display */ .boss-section { border-radius: 8px; padding: 10px; margin-top: 10px; text-align: center; transition: all 0.3s ease; } .boss-section.boss-upcoming { background: linear-gradient(135deg, #1a0a2e, #2d1b4e); border: 2px solid var(--purple); } .boss-section.boss-active { background: linear-gradient(135deg, #2a0a0a, #4a1515); border: 2px solid #ff4444; animation: bossGlow 2s ease-in-out infinite; } @keyframes bossGlow { 0%, 100% { box-shadow: 0 0 10px rgba(255, 68, 68, 0.3); } 50% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.6); } } .boss-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .boss-section.boss-upcoming .boss-section-label { color: #a78bfa; } .boss-section.boss-active .boss-section-label { color: #ff6666; } .boss-section-name { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: bold; margin-bottom: 4px; } .boss-section.boss-upcoming .boss-section-name { color: var(--purple); text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); } .boss-section.boss-active .boss-section-name { color: #ff6666; text-shadow: 0 0 10px rgba(255, 68, 68, 0.5); } .boss-section-status { font-size: 0.75rem; color: #888; } .boss-section.boss-active .boss-section-status { color: #ffaaaa; } /* Reset Trophy Option */ .reset-trophy-option { margin: 15px 0; padding: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; } .trophy-reset-label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #94a3b8; font-size: 0.9rem; } .trophy-reset-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--danger); } .trophy-reset-label span { user-select: none; } /* Sneak Back In Confirmation Modal */ .sneak-confirm-content { max-width: 400px; text-align: center; } .sneak-icon { font-size: 4rem; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(100, 100, 100, 0.5)); } .sneak-title { color: #94a3b8; font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 10px 0; text-shadow: 0 0 10px rgba(148, 163, 184, 0.5); } .sneak-subtitle { color: #64748b; font-size: 0.95rem; margin-bottom: 20px; } .sneak-warning-box { background: rgba(0, 0, 0, 0.4); border: 1px solid #475569; border-radius: 10px; padding: 15px; margin-bottom: 25px; } .sneak-warning-text { color: #cbd5e1; font-size: 0.9rem; margin: 0 0 10px 0; } .sneak-risk-text { color: var(--gold); font-size: 0.85rem; margin: 0; font-style: italic; } .sneak-buttons { display: flex; gap: 15px; justify-content: center; } .btn-sneak-confirm { background: linear-gradient(to bottom, #475569, #334155); color: white; border: 2px solid #64748b; padding: 12px 30px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; } .btn-sneak-confirm:hover { background: linear-gradient(to bottom, #64748b, #475569); transform: scale(1.05); box-shadow: 0 0 15px rgba(100, 116, 139, 0.5); } .btn-sneak-cancel { background: linear-gradient(to bottom, var(--red-dark), #4a0000); color: white; border: 2px solid var(--red); padding: 12px 30px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; } .btn-sneak-cancel:hover { background: linear-gradient(to bottom, var(--red), var(--red-dark)); transform: scale(1.05); } /* Version Watermark */ .version-watermark { display: block; text-align: right; margin-top: 15px; font-size: 0.65rem; color: rgba(100, 116, 139, 0.6); font-family: 'Roboto Mono', monospace; letter-spacing: 0.5px; cursor: pointer; } /* Mobile Stats Row */ .mobile-stats-row { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; padding: 8px 12px; margin-top: 8px; border: 1px solid #444; border-radius: 6px; position: relative; } .mobile-vip-header { display: none; width: 100%; text-align: center; color: var(--red); font-family: 'Cinzel', serif; font-weight: 900; font-size: 0.85rem; letter-spacing: 1px; text-shadow: 0 0 8px var(--red-dark); padding-bottom: 6px; border-bottom: 1px dashed #333; margin-bottom: 4px; } .mobile-win-toast { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.9); border-radius: 6px; z-index: 10; opacity: 0; pointer-events: none; transition: none; } .mobile-win-toast.show { animation: mobileWinPop 2s ease-out forwards; } @keyframes mobileWinPop { 0% { opacity: 0; transform: scale(0.8); } 15% { opacity: 1; transform: scale(1.1); } 25% { transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } .mobile-win-label { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 2px; } .mobile-win-amount { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 12px rgba(218, 165, 32, 0.8); } .mobile-win-toast.big-win .mobile-win-amount { color: #22c55e; text-shadow: 0 0 12px rgba(34, 197, 94, 0.8); } .mobile-win-toast.jackpot .mobile-win-amount { color: #a855f7; text-shadow: 0 0 12px rgba(168, 85, 247, 0.8); } :where(html.layout-mobile) .mobile-win-toast { display: flex; } :where(html.layout-mobile) .win-toast { display: none !important; } .mobile-vip-header.infinite-mode { color: var(--orange); text-shadow: 0 0 10px var(--orange-dark); animation: mobileInfinitePulse 2s infinite; } @keyframes mobileInfinitePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .mobile-infinite-info { width: 100%; text-align: center; } .mobile-infinite-cycle { color: var(--orange); font-size: 0.8rem; font-weight: bold; text-shadow: 0 0 6px var(--orange-dark); } .mobile-boss-info { width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; gap: 6px; } .mobile-boss-label { color: #94a3b8; font-size: 0.8rem; } .mobile-boss-name { color: #a855f7; font-size: 0.85rem; font-weight: bold; text-shadow: 0 0 6px rgba(168, 85, 247, 0.5); } .mobile-floor-fee-row { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; } .mobile-stat-divider { color: #555; font-size: 0.9rem; } .mobile-stat-item { display: flex; align-items: center; gap: 5px; } .mobile-spins-row { width: 100%; justify-content: center; } .mobile-stat-label { color: #94a3b8; font-size: 0.8rem; } .mobile-stat-value { color: white; font-weight: bold; font-size: 0.95rem; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .mobile-stat-value.mobile-fee { color: var(--danger); } .mobile-reserve-box { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); border: 1px solid var(--gold-light); border-radius: 4px; width: 28px; height: 28px; display: none; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3); margin-left: 4px; cursor: pointer; position: relative; } .mobile-reserve-count { font-size: 0.9rem; font-weight: 900; } .mobile-hold-box { background: linear-gradient(to bottom, #22d3ee, #0891b2); border: 1px solid #67e8f9; border-radius: 4px; width: 28px; height: 28px; display: none; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(34, 211, 238, 0.3); margin-left: 4px; position: relative; cursor: pointer; } .mobile-hold-box::after { content: '✋'; position: absolute; bottom: -2px; right: -2px; font-size: 0.5rem; } .mobile-hold-count { font-size: 0.9rem; font-weight: 900; color: #083344; font-family: 'Cinzel', serif; line-height: 1; } /* Mobile Menu Button - inside game container */ .mobile-top-bar { display: none; position: absolute; top: 10px; left: 12px; right: 12px; justify-content: space-between; align-items: center; gap: 8px; z-index: 100; } .mobile-coins-display { background: linear-gradient(to bottom, #2a2a2a, #1a1a1a); border: 1px solid var(--gold); color: var(--gold); font-size: 0.75rem; font-family: 'Roboto Mono', monospace; font-weight: bold; padding: 6px 10px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .mobile-currency-group { display: flex; align-items: center; gap: 4px; background: linear-gradient(to bottom, #2a2a2a, #1a1a1a); border: 1px solid var(--gold); color: var(--gold); font-size: 0.7rem; font-family: 'Roboto Mono', monospace; font-weight: bold; padding: 5px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .mobile-currency-divider { opacity: 0.4; font-size: 0.65rem; } .mobile-currency-item { white-space: nowrap; } .mobile-menu-btn { background: linear-gradient(to bottom, #3a3a3a, #252525); border: 1px solid #555; color: var(--gold); font-size: 0.75rem; font-family: 'Roboto Mono', monospace; font-weight: bold; padding: 8px 12px; border-radius: 6px; cursor: pointer; z-index: 100; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1); text-transform: uppercase; letter-spacing: 1px; } .mobile-menu-btn:active { transform: scale(0.95); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* Mobile XP Display */ .mobile-xp-display { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1a0a2e 0%, #0d0518 100%); border: 2px solid #9966ff; border-radius: 12px; padding: 5px 10px; font-family: 'Roboto Mono', monospace; min-width: 120px; } .mobile-xp-label { color: #9966ff; font-size: 0.65rem; font-weight: 700; } .mobile-xp-badge { background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); color: white; font-weight: 900; font-size: 0.75rem; padding: 2px 6px; border-radius: 8px; min-width: 20px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px rgba(153, 102, 255, 0.5); } .mobile-xp-progress-track { flex: 1; height: 8px; background: rgba(0, 0, 0, 0.4); border-radius: 4px; overflow: hidden; min-width: 50px; border: 1px solid rgba(153, 102, 255, 0.3); } .mobile-xp-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #9966ff 0%, #cc99ff 100%); border-radius: 4px; transition: width 0.3s ease; } .mobile-xp-progress-bar.max-level { background: linear-gradient(90deg, #ffd700 0%, #ffed4a 100%); animation: mobileXpMaxPulse 1.5s ease-in-out infinite; } @keyframes mobileXpMaxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .mobile-prestige-btn { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%); color: #1a0a2e; border: none; padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; animation: prestigeGlow 2s ease-in-out infinite; box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5); } .mobile-prestige-btn:active { transform: scale(0.95); } /* Mobile Media Query */ :where(html.layout-mobile) .top-bar { display: none; } :where(html.layout-mobile) .mobile-top-bar { display: flex; } :where(html.layout-mobile) .mobile-menu-btn { display: flex; justify-content: center; align-items: center; gap: 4px; } :where(html.layout-mobile) body { padding: var(--space-sm) var(--container-padding); } :where(html.layout-mobile) .game-wrapper { padding: var(--space-xs) var(--space-sm); width: 100%; max-width: 100%; overflow-x: hidden; } :where(html.layout-mobile) .game-container { padding: var(--space-sm); padding-top: calc(var(--space-xl) + 35px); min-width: unset; width: 100%; max-width: 100%; margin: 0; } :where(html.layout-mobile) .game-container::before, :where(html.layout-mobile) .game-container::after, :where(html.layout-mobile) .corner-rivet { width: clamp(8px, 2vw, 12px); height: clamp(8px, 2vw, 12px); } :where(html.layout-mobile) .game-container::before { top: var(--space-sm); left: var(--space-sm); } :where(html.layout-mobile) .game-container::after { top: var(--space-sm); right: var(--space-sm); } :where(html.layout-mobile) .corner-rivet.bottom-left { bottom: var(--space-sm); left: var(--space-sm); } :where(html.layout-mobile) .corner-rivet.bottom-right { bottom: var(--space-sm); right: var(--space-sm); } :where(html.layout-mobile) .mobile-stats-row { display: flex; } :where(html.layout-mobile) .mobile-stats-row .crown-board-container { width: 100%; max-width: 100%; margin: 0; padding: 6px 0 0 0; background: none; border: none; border-top: 1px dashed rgba(255, 215, 0, 0.35); border-radius: 0; box-shadow: none; gap: 8px; justify-content: center; } :where(html.layout-mobile) .vip-monitor { display: none; } :where(html.layout-mobile) /* Hide mobile VIP stats during race mode - race bar replaces it */ body.race-mode .mobile-stats-row { display: none !important; } /* Boss Encounter Styles */ .boss-content { background: linear-gradient(135deg, #1a0a0a 0%, #2a1515 50%, #1a0a0a 100%); border: 3px solid #ff4444; max-width: 420px; text-align: center; box-shadow: 0 0 40px rgba(255, 68, 68, 0.4); } .boss-header { margin-bottom: 20px; } .boss-icon { font-size: 4rem; margin-bottom: 10px; filter: drop-shadow(0 0 15px rgba(255, 68, 68, 0.6)); animation: boss-pulse 1.5s ease-in-out infinite; } @keyframes boss-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .boss-portrait-container { position: relative; width: 180px; height: 180px; margin: 0 auto 15px auto; display: flex; align-items: center; justify-content: center; } .boss-portrait-img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid #ff4444; box-shadow: 0 0 25px rgba(255, 68, 68, 0.5), 0 0 50px rgba(136, 68, 255, 0.3); animation: boss-portrait-pulse 2s ease-in-out infinite; } @keyframes boss-portrait-pulse { 0%, 100% { box-shadow: 0 0 25px rgba(255, 68, 68, 0.5), 0 0 50px rgba(136, 68, 255, 0.3); } 50% { box-shadow: 0 0 35px rgba(255, 68, 68, 0.8), 0 0 70px rgba(136, 68, 255, 0.5); } } .boss-portrait-img.outline-glow { border-radius: 0; border: none; box-shadow: none; background: transparent; width: 200px; height: 200px; object-fit: contain; animation: boss-img-outline-glow 2s ease-in-out infinite; } @keyframes boss-img-outline-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.7)) drop-shadow(0 0 20px rgba(136, 68, 255, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(255, 68, 68, 1)) drop-shadow(0 0 35px rgba(136, 68, 255, 0.8)); } } .boss-name { font-family: 'Cinzel', serif; font-size: 1.8rem; color: #ff6666; text-shadow: 0 0 20px rgba(255, 68, 68, 0.8); margin: 0; letter-spacing: 2px; } .boss-returning { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; opacity: 0.9; } .boss-intro { font-style: italic; color: #ccc; font-size: 1rem; margin: 15px 0; padding: 0 10px; line-height: 1.5; } .boss-ability-box { background: rgba(255, 68, 68, 0.15); border: 2px solid #ff4444; border-radius: 10px; padding: 15px; margin: 20px 0; } .boss-ability-name { font-family: 'Cinzel', serif; font-size: 1.2rem; color: #ff8888; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .boss-ability-desc { color: #e0e0e0; font-size: 0.95rem; margin: 0; line-height: 1.4; } .boss-challenge { margin: 20px 0; color: #aaa; font-size: 1rem; } .boss-highlight { color: #ff6666; font-weight: bold; font-size: 1.3rem; } .btn-boss-fight { background: linear-gradient(to bottom, #cc3333, #991111); border: 2px solid #ff4444; color: white; padding: 15px 40px; font-size: 1.1rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4); } .btn-boss-fight:hover { background: linear-gradient(to bottom, #dd4444, #aa2222); box-shadow: 0 6px 20px rgba(255, 68, 68, 0.6); transform: translateY(-2px); } /* Boss Victory Modal */ .boss-victory-content { background: linear-gradient(135deg, #0a1a0a 0%, #153015 50%, #0a1a0a 100%); border: 3px solid var(--gold); max-width: 380px; text-align: center; box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); } .boss-victory-icon { font-size: 4rem; margin-bottom: 10px; animation: victory-bounce 0.6s ease-out; } @keyframes victory-bounce { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .boss-victory-title { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); margin: 0 0 10px 0; } .boss-victory-name, .victory-boss-name { color: #ff8888; font-size: 1.2rem; margin: 10px 0; } .victory-message { color: var(--success); font-size: 1rem; margin: 15px 0; font-style: italic; } .boss-victory-text { color: #aaa; font-size: 0.95rem; margin: 15px 0; } .boss-reward-box { background: rgba(255, 215, 0, 0.15); border: 2px solid var(--gold); border-radius: 8px; padding: 12px 20px; margin: 20px auto; display: inline-block; } .boss-reward-value { color: var(--gold); font-weight: bold; font-size: 1.3rem; } .btn-boss-continue { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); border: 2px solid var(--gold-light); color: #1a1a1a; padding: 12px 35px; font-size: 1rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; } .btn-boss-continue:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5); } /* Boss Rush Victory Modal */ #boss-rush-victory-modal.active { z-index: 9999 !important; display: flex !important; opacity: 1 !important; pointer-events: all !important; } .boss-rush-victory-content { background: linear-gradient(135deg, #1a0a1a 0%, #2d0a2d 50%, #1a0a1a 100%); border: 3px solid #9b59b6; max-width: 420px; text-align: center; box-shadow: 0 0 60px rgba(155, 89, 182, 0.5); position: relative; overflow: hidden; } .shadow-victory-icon { font-size: 5rem; animation: shadow-pulse 2s ease-in-out infinite; } @keyframes shadow-pulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.8)); } 50% { filter: drop-shadow(0 0 40px rgba(155, 89, 182, 1)); } } .shadow-title { color: #9b59b6 !important; text-shadow: 0 0 30px rgba(155, 89, 182, 0.8) !important; font-size: 2rem !important; } .victory-subtitle { color: #e8d5f0; font-size: 1.1rem; margin: 10px 0 20px 0; } .boss-rush-reward { background: rgba(155, 89, 182, 0.2); border: 2px solid #9b59b6; border-radius: 10px; padding: 15px 25px; margin: 20px auto; display: inline-block; } .reward-coins { color: var(--gold); font-weight: bold; font-size: 1.5rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .victory-lore { color: #a0a0a0; font-style: italic; font-size: 0.9rem; margin: 20px 15px; line-height: 1.5; } .shadow-btn { background: linear-gradient(to bottom, #9b59b6, #6c3483) !important; border: 2px solid #bb7dcc !important; color: #fff !important; } .shadow-btn:hover { box-shadow: 0 4px 20px rgba(155, 89, 182, 0.6) !important; } /* Level Up Modal */ .level-up-content { background: linear-gradient(135deg, #1a0a2e 0%, #2d1560 50%, #1a0a2e 100%); border: 3px solid #9966ff; max-width: 380px; text-align: center; box-shadow: 0 0 60px rgba(153, 102, 255, 0.5); position: relative; overflow: hidden; } .level-up-icon { font-size: 4rem; animation: levelUpPulse 0.8s ease-in-out infinite alternate; } @keyframes levelUpPulse { from { transform: scale(1); filter: drop-shadow(0 0 10px rgba(153, 102, 255, 0.8)); } to { transform: scale(1.15); filter: drop-shadow(0 0 25px rgba(153, 102, 255, 1)); } } .level-up-title { font-family: 'Cinzel', serif; font-size: 2rem; color: #cc99ff; text-shadow: 0 0 20px rgba(153, 102, 255, 0.8); margin: 10px 0; } .level-up-badge-container { margin: 15px 0; } .level-up-badge { display: inline-block; background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); color: white; font-weight: 900; font-size: 2.5rem; padding: 10px 25px; border-radius: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px rgba(153, 102, 255, 0.6); } .level-up-coins { color: var(--gold); font-weight: bold; font-size: 1.3rem; margin: 15px 0; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .level-up-rewards-list { margin: 15px 0; } .level-reward-item { background: rgba(153, 102, 255, 0.2); border: 1px solid rgba(153, 102, 255, 0.4); border-radius: 8px; padding: 8px 15px; margin: 8px 0; color: #e8d5f0; font-size: 0.95rem; } .btn-level-up-continue { background: linear-gradient(to bottom, #9966ff, #6633cc); border: 2px solid #cc99ff; color: #fff; padding: 12px 35px; font-size: 1rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; margin-top: 10px; } .btn-level-up-continue:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(153, 102, 255, 0.5); } /* Prestige Modal */ .session-stats-content { background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2d 50%, #0a0a1a 100%); border: 3px solid var(--gold); max-width: 420px; width: calc(90% - 20px); text-align: center; box-shadow: 0 0 60px rgba(197, 160, 89, 0.4); position: relative; } .session-stats-icon { font-size: 3rem; margin-bottom: 4px; animation: sessionIconPulse 2s ease-in-out infinite; } @keyframes sessionIconPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(197, 160, 89, 0.6)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(197, 160, 89, 1)); } } .session-stats-title { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--gold); text-shadow: 0 0 20px rgba(197, 160, 89, 0.6); margin: 6px 0 2px 0; letter-spacing: 0.05em; } .session-stats-subtitle { color: #bbb; font-size: 0.88rem; margin: 0 0 16px 0; } .session-stats-rows { background: rgba(197, 160, 89, 0.07); border: 1px solid rgba(197, 160, 89, 0.25); border-radius: 10px; padding: 12px 16px; margin: 0 0 18px 0; display: flex; flex-direction: column; gap: 8px; } .session-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(197, 160, 89, 0.12); } .session-stat-row:last-child { border-bottom: none; } .session-stat-label { color: #aaa; font-size: 0.88rem; text-align: left; } .session-stat-value { color: var(--gold); font-weight: bold; font-size: 0.95rem; font-family: 'Roboto Mono', monospace; text-align: right; } .session-stats-continue-btn { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); border: 2px solid var(--gold-light); color: #1a1a1a; padding: 14px 32px; font-size: 1rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; width: 100%; } .session-stats-continue-btn:hover { background: linear-gradient(to bottom, var(--gold-light), var(--gold)); box-shadow: 0 4px 20px rgba(197, 160, 89, 0.5); transform: translateY(-1px); } /* Prestige Shop Modal */ .pshop-content { background: linear-gradient(135deg, #0f0a1f 0%, #1e1040 50%, #0f0a1f 100%); border: 3px solid var(--purple); max-width: 480px; width: calc(100% - 40px); box-shadow: 0 0 60px rgba(168, 85, 247, 0.35); position: relative; overflow-y: auto; max-height: calc(100dvh - 120px); padding: 18px 16px 16px; box-sizing: border-box; } .pshop-header { text-align: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(168, 85, 247, 0.3); } .pshop-title { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--purple); text-shadow: 0 0 20px rgba(168, 85, 247, 0.6); margin: 0 0 4px 0; letter-spacing: 0.05em; } .pshop-subtitle { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0 0 10px 0; } .pshop-crests-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; } .pshop-crests-label { color: rgba(255,255,255,0.7); } .pshop-crests-value { color: #2ecc71; font-weight: 700; font-size: 1.05rem; } .pshop-items-list { display: flex; flex-direction: column; gap: 10px; } .pshop-item { background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s, background 0.2s; } .pshop-item:hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.13); } .pshop-item.maxed { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.3); } .pshop-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .pshop-item-name { font-family: 'Cinzel', serif; font-size: 0.95rem; color: var(--gold); font-weight: 700; } .pshop-stacks { font-size: 0.75rem; color: var(--purple); background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 4px; padding: 1px 6px; font-weight: 700; } .pshop-item-desc { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin: 0 0 4px 0; line-height: 1.4; } .pshop-item-effect { font-size: 0.78rem; color: #2ecc71; margin: 0 0 8px 0; font-style: italic; } .pshop-buy-btn { width: 100%; padding: 8px; background: linear-gradient(135deg, var(--purple-dark), var(--purple)); border: 2px solid var(--purple); border-radius: 8px; color: white; font-family: 'Roboto Mono', monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s; } .pshop-buy-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--purple), #c77dff); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4); } .pshop-buy-btn:disabled { background: rgba(60, 60, 80, 0.5); border-color: rgba(100, 100, 120, 0.4); color: rgba(255,255,255,0.35); cursor: not-allowed; } .pshop-item.maxed .pshop-buy-btn:disabled { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); color: #22c55e; } .prestige-content { background: linear-gradient(135deg, #1a1a0a 0%, #2d2d1a 50%, #1a1a0a 100%); border: 3px solid var(--gold); max-width: 420px; text-align: center; box-shadow: 0 0 60px rgba(255, 215, 0, 0.4); position: relative; overflow: hidden; } .prestige-icon { font-size: 4rem; animation: prestigeIconPulse 1.5s ease-in-out infinite; } @keyframes prestigeIconPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(102, 178, 255, 0.8)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 30px rgba(102, 178, 255, 1)); } } .prestige-title { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); margin: 10px 0; } .prestige-subtitle { color: #ccc; font-size: 1rem; margin: 5px 0 20px 0; } .prestige-preview { background: rgba(255, 215, 0, 0.1); border: 2px solid rgba(255, 215, 0, 0.3); border-radius: 10px; padding: 15px; margin: 15px 0; } .prestige-preview-item { display: flex; justify-content: space-between; margin: 8px 0; } .prestige-preview-label { color: #aaa; } .prestige-preview-value { color: var(--gold); font-weight: bold; } .prestige-rewards { margin: 20px 0; } .prestige-rewards-title { color: #ccc; font-size: 0.9rem; margin-bottom: 10px; } .prestige-reward-item { background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 6px; padding: 8px 12px; margin: 6px 0; color: #e8e8d8; font-size: 0.9rem; } .prestige-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; } .btn-prestige-cancel { background: rgba(100, 100, 100, 0.3); border: 2px solid #666; color: #aaa; padding: 12px 25px; font-size: 0.95rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; } .btn-prestige-cancel:hover { border-color: #888; color: #ccc; } .btn-prestige-confirm { background: linear-gradient(to bottom, var(--gold), var(--gold-dark)); border: 2px solid var(--gold-light); color: #1a1a1a; padding: 12px 25px; font-size: 0.95rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; } .btn-prestige-confirm:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5); } .btn-prestige-shop-link { display: block; width: calc(100% - 32px); margin: 8px 16px 4px; padding: 9px 12px; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.45); border-radius: 8px; color: var(--purple); font-family: 'Roboto Mono', monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s; } .btn-prestige-shop-link:hover { background: rgba(168, 85, 247, 0.22); border-color: var(--purple); transform: translateY(-1px); } /* Gauntlet Defeat Modal */ .gauntlet-defeat-content { background: linear-gradient(135deg, #1a0a0a 0%, #2d0a0a 50%, #1a0a0a 100%); border: 3px solid #dc3545; max-width: 420px; text-align: center; box-shadow: 0 0 60px rgba(220, 53, 69, 0.5); position: relative; overflow: hidden; } .defeat-icon { font-size: 5rem; animation: defeat-pulse 2s ease-in-out infinite; margin-bottom: 10px; } @keyframes defeat-pulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(220, 53, 69, 0.8)); } 50% { filter: drop-shadow(0 0 40px rgba(220, 53, 69, 1)); } } .defeat-title { color: #dc3545 !important; text-shadow: 0 0 30px rgba(220, 53, 69, 0.8) !important; font-size: 2rem !important; font-family: 'Cinzel', serif; margin: 0 0 15px 0; } .defeat-boss-name { color: #e8d5d5; font-size: 1.2rem; margin: 10px 0; font-weight: bold; } .defeat-quip { color: #a0a0a0; font-style: italic; font-size: 1rem; margin: 20px 15px; line-height: 1.5; } .btn-defeat-continue { background: linear-gradient(to bottom, #dc3545, #a02030) !important; border: 2px solid #ff6b7a !important; color: #fff !important; padding: 12px 30px; font-size: 1rem; font-family: 'Cinzel', serif; cursor: pointer; margin-top: 15px; border-radius: 5px; transition: all 0.2s ease; } .btn-defeat-continue:hover { box-shadow: 0 4px 20px rgba(220, 53, 69, 0.6) !important; transform: translateY(-2px); } /* Race Victory Modal */ .race-victory-content { background: linear-gradient(135deg, #1a0f00 0%, #3d2817 50%, #1a0f00 100%); border: 3px solid #FFD700; max-width: 420px; text-align: center; box-shadow: 0 0 60px rgba(255, 215, 0, 0.5); position: relative; overflow: hidden; } .race-victory-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, #fff 0px, #fff 10px, #000 10px, #000 20px); } .race-victory-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, #000 0px, #000 10px, #fff 10px, #fff 20px); } .race-victory-icon { font-size: 5rem; animation: race-trophy-glow 2s ease-in-out infinite; margin-bottom: 10px; } @keyframes race-trophy-glow { 0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); transform: scale(1); } 50% { filter: drop-shadow(0 0 40px rgba(255, 215, 0, 1)); transform: scale(1.1); } } .race-victory-title { color: #FFD700 !important; text-shadow: 0 0 30px rgba(255, 215, 0, 0.8) !important; font-size: 2.2rem !important; font-family: 'Cinzel', serif; margin: 0 0 10px 0; } .race-victory-subtitle { color: #DEB887; font-size: 1.1rem; margin: 5px 0 15px 0; } .race-trophy-display { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 20px 0; padding: 15px; background: rgba(139, 69, 19, 0.3); border-radius: 10px; border: 2px solid #8B4513; } .race-trophy { font-size: 2rem; animation: horse-gallop 0.5s ease-in-out infinite alternate; } .race-trophy:first-child { transform: scaleX(-1); } @keyframes horse-gallop { from { transform: translateY(0); } to { transform: translateY(-5px); } } .race-trophy:first-child { animation: horse-gallop-flip 0.5s ease-in-out infinite alternate; } @keyframes horse-gallop-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-5px); } } .race-trophy-text { color: #FFD700; font-size: 1rem; font-weight: bold; font-family: 'Cinzel', serif; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .race-victory-stats { color: #DEB887; font-size: 1rem; margin: 15px 0; } .race-victory-unlock { color: #90EE90; font-size: 0.95rem; margin: 15px 0; font-weight: bold; } .btn-race-continue { background: linear-gradient(to bottom, #CD853F, #8B4513) !important; border: 2px solid #FFD700 !important; color: #fff !important; padding: 12px 30px; font-size: 1rem; font-family: 'Cinzel', serif; cursor: pointer; margin-top: 15px; border-radius: 5px; transition: all 0.2s ease; } .btn-race-continue:hover { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6) !important; transform: translateY(-2px); } /* Floor Boss Introduction Modal */ .floor-boss-intro-content { background: linear-gradient(135deg, #0a0a1a 0%, #15152a 50%, #0a0a1a 100%); border: 3px solid #8844ff; max-width: 420px; text-align: center; box-shadow: 0 0 40px rgba(136, 68, 255, 0.4); } .floor-intro-header { margin-bottom: 15px; } .floor-intro-portrait-container { position: relative; width: 180px; height: 180px; margin: 0 auto 15px auto; display: flex; align-items: center; justify-content: center; } .floor-intro-portrait { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5), 0 0 50px rgba(136, 68, 255, 0.3); animation: boss-portrait-glow 2s ease-in-out infinite; } @keyframes boss-portrait-glow { 0%, 100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.5), 0 0 50px rgba(136, 68, 255, 0.3); } 50% { box-shadow: 0 0 35px rgba(212, 175, 55, 0.8), 0 0 70px rgba(136, 68, 255, 0.5); } } .floor-intro-portrait.outline-glow { border-radius: 0; border: none; box-shadow: none; background: transparent; width: 200px; height: 200px; object-fit: contain; animation: boss-portrait-outline-glow 2s ease-in-out infinite; } @keyframes boss-portrait-outline-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7)) drop-shadow(0 0 20px rgba(136, 68, 255, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(212, 175, 55, 1)) drop-shadow(0 0 35px rgba(136, 68, 255, 0.8)); } } .floor-intro-icon { font-size: 3.5rem; display: block; filter: drop-shadow(0 0 15px rgba(136, 68, 255, 0.6)); animation: boss-pulse 1.5s ease-in-out infinite; } .floor-intro-title { font-family: 'Cinzel', serif; font-size: 1.2rem; color: #aa88ff; text-transform: uppercase; letter-spacing: 3px; margin: 0; } .floor-intro-name { font-family: 'Cinzel', serif; font-size: 1.8rem; color: #cc99ff; text-shadow: 0 0 20px rgba(136, 68, 255, 0.8); margin: 5px 0 15px 0; letter-spacing: 2px; } .floor-intro-quote { font-style: italic; color: #aaa; font-size: 0.95rem; margin: 0 0 20px 0; padding: 0 15px; line-height: 1.4; } .floor-intro-ability-box { background: rgba(136, 68, 255, 0.15); border: 2px solid #8844ff; border-radius: 10px; padding: 15px; margin: 0 0 20px 0; } .floor-intro-ability-label { font-family: 'Cinzel', serif; font-size: 0.9rem; color: #aa88ff; font-weight: bold; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 1px; } .floor-intro-ability-label span { color: #cc99ff; font-size: 1rem; } .floor-intro-ability-desc { color: #e0e0e0; font-size: 0.95rem; margin: 0; line-height: 1.4; } .floor-intro-warning { background: rgba(255, 170, 0, 0.15); border: 2px solid var(--gold); border-radius: 8px; padding: 12px 15px; margin: 0 0 20px 0; } .floor-intro-warning-text { color: var(--gold); font-size: 0.95rem; margin: 0; } .floor-intro-warning-text strong { color: #ffdd44; } .btn-floor-intro-continue { background: linear-gradient(to bottom, #8844ff, #6622cc); border: 2px solid #aa66ff; color: white; padding: 15px 40px; font-size: 1.1rem; font-family: 'Cinzel', serif; font-weight: bold; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; box-shadow: 0 4px 15px rgba(136, 68, 255, 0.4); } .btn-floor-intro-continue:hover { background: linear-gradient(to bottom, #9955ff, #7733dd); box-shadow: 0 6px 20px rgba(136, 68, 255, 0.6); transform: translateY(-2px); } /* Boss Indicator in VIP Monitor */ .boss-indicator { display: none; background: linear-gradient(to right, rgba(255, 68, 68, 0.2), rgba(255, 68, 68, 0.1)); border: 1px solid #ff4444; border-radius: 8px; padding: 10px; margin-top: 15px; align-items: center; gap: 10px; } .boss-indicator-icon { font-size: 1.8rem; } .boss-indicator-info { flex: 1; text-align: left; } .boss-indicator-name { color: #ff6666; font-weight: bold; font-size: 0.9rem; } .boss-indicator-spins { color: #ffaaaa; font-size: 0.8rem; } /* Locked reel visual - Vega's Reel Lockdown */ .reel.boss-locked { position: relative; overflow: visible !important; } .reel.boss-locked::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 3px solid #ff4444; border-radius: 10px; z-index: 45; box-shadow: 0 0 12px rgba(255, 68, 68, 0.6), 0 0 20px rgba(255, 68, 68, 0.3); animation: lock-glow 1.5s ease-in-out infinite; } .boss-lock-badge { position: absolute; top: -8px; right: -8px; font-size: 1.2rem; z-index: 60; background: rgba(0, 0, 0, 0.7); border-radius: 50%; padding: 4px; filter: drop-shadow(0 0 6px rgba(255, 68, 68, 0.8)); animation: lock-shake 2s ease-in-out infinite; pointer-events: none; line-height: 1; } @keyframes lock-glow { 0%, 100% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.6), 0 0 20px rgba(255, 68, 68, 0.3); } 50% { box-shadow: 0 0 18px rgba(255, 68, 68, 0.8), 0 0 30px rgba(255, 68, 68, 0.5); } } @keyframes lock-shake { 0%, 90%, 100% { transform: rotate(0deg); } 92%, 96% { transform: rotate(-5deg); } 94%, 98% { transform: rotate(5deg); } } .reel.boss-locked.card, .reel.boss-locked .card { /* Cards remain fully visible since they're still in play */ } /* Player Hold visual (user-activated hold) - Tape strips on corners */ .card.player-held { position: relative; box-shadow: 0 0 15px rgba(34, 211, 238, 0.6), 0 0 25px rgba(34, 211, 238, 0.3), 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); animation: hold-glow 1.5s ease-in-out infinite; } /* Top-right tape strip */ .card.player-held::before { content: ''; position: absolute; top: -6px; right: -6px; width: 28px; height: 12px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.95) 0%, rgba(8, 145, 178, 0.9) 100%); border-radius: 2px; z-index: 55; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(34, 211, 238, 0.6); pointer-events: none; } /* Bottom-left tape strip */ .card.player-held::after { content: '' !important; position: absolute !important; bottom: -6px !important; left: -6px !important; top: auto !important; right: auto !important; width: 28px !important; height: 12px !important; background: linear-gradient(135deg, rgba(34, 211, 238, 0.95) 0%, rgba(8, 145, 178, 0.9) 100%) !important; border-radius: 2px !important; z-index: 55 !important; transform: rotate(45deg) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(34, 211, 238, 0.6) !important; pointer-events: none !important; } @keyframes hold-glow { 0%, 100% { box-shadow: 0 0 15px rgba(34, 211, 238, 0.6), 0 0 25px rgba(34, 211, 238, 0.3), 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.8), 0 0 35px rgba(34, 211, 238, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); } } /* Clickable reel indicator when holds available */ .card.can-hold { cursor: pointer; transition: transform 0.15s ease; } .card.can-hold:hover { transform: scale(1.03); box-shadow: 0 0 12px rgba(34, 211, 238, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5); } /* Hidden card visual for Madame Mirage */ .card.boss-hidden .rank-display, .card.boss-hidden .suit-display { visibility: hidden; } .card.boss-hidden::before { content: '?'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.8); } /* Boss Tooltip */ .clickable-boss { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; pointer-events: auto; position: relative; } .clickable-boss:hover { filter: brightness(1.2); } .clickable-boss:active { filter: brightness(0.9); } .boss-tooltip { display: none; position: fixed; z-index: 99999; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 2px solid var(--gold); border-radius: 10px; padding: 12px 16px; max-width: 280px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.2); } .boss-tooltip.visible { display: block; } .boss-tooltip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #333; } .boss-tooltip-icon { font-size: 1.5rem; } .boss-tooltip-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold); font-weight: bold; } .boss-tooltip-ability { display: flex; gap: 6px; margin-bottom: 6px; } .boss-tooltip-ability-label { color: #888; font-size: 0.8rem; } .boss-tooltip-ability-name { color: #ff6666; font-size: 0.8rem; font-weight: bold; } .boss-tooltip-desc { color: #ccc; font-size: 0.85rem; line-height: 1.4; } /* Leaderboard Styles */ .leaderboard-modal-content { max-width: 450px; width: 95%; } .leaderboard-title { font-family: 'Cinzel', serif; color: var(--gold); text-align: center; margin-bottom: 10px; font-size: 1.4rem; } .leaderboard-auth-status { text-align: center; margin-bottom: 15px; font-size: 0.9rem; padding: 8px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; } .leaderboard-auth-status a { text-decoration: none; transition: color 0.2s; } .leaderboard-auth-status a:hover { color: var(--gold) !important; } .leaderboard-tabs-wrapper { position: relative; margin-bottom: 15px; overflow: hidden; } .leaderboard-tabs { display: flex; gap: 8px; margin-bottom: 0; overflow-x: scroll; touch-action: pan-x; scrollbar-width: none; padding-bottom: 4px; } .leaderboard-tabs::-webkit-scrollbar { display: none; } .lb-scroll-indicator { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; background: linear-gradient(to right, transparent 0%, rgba(10, 20, 50, 0.88) 40%, rgba(10, 20, 50, 0.97) 100%); pointer-events: none; opacity: 0; transition: opacity 0.25s ease; font-size: 1.7rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 4px rgba(255, 215, 0, 0.6); animation: lbScrollPulse 1.6s ease-in-out infinite; } .lb-scroll-indicator-left { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; display: flex; align-items: center; justify-content: flex-start; padding-left: 10px; background: linear-gradient(to left, transparent 0%, rgba(10, 20, 50, 0.88) 40%, rgba(10, 20, 50, 0.97) 100%); pointer-events: none; opacity: 0; transition: opacity 0.25s ease; font-size: 1.7rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 4px rgba(255, 215, 0, 0.6); animation: lbScrollPulseLeft 1.6s ease-in-out infinite; } .lb-scroll-indicator.visible { opacity: 1; } .lb-scroll-indicator-left.visible { opacity: 1; } @keyframes lbScrollPulse { 0%, 100% { transform: translateX(0); filter: brightness(1); } 50% { transform: translateX(4px); filter: brightness(0.7); } } @keyframes lbScrollPulseLeft { 0%, 100% { transform: translateX(0); filter: brightness(1); } 50% { transform: translateX(-4px); filter: brightness(0.7); } } .lb-tab { padding: 8px 14px; flex-shrink: 0; white-space: nowrap; background: rgba(255, 255, 255, 0.1); border: 1px solid #444; border-radius: 20px; color: #aaa; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .lb-tab.active { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color: #000; border-color: var(--gold); font-weight: bold; } .lb-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.2); color: #fff; } .leaderboard-list { max-height: 350px; overflow-y: auto; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 10px; margin-bottom: 15px; } .lb-entry { display: flex; align-items: center; padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; margin-bottom: 6px; gap: 8px; flex-wrap: nowrap; } .lb-entry:nth-child(1) { background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.05) 100%); border: 1px solid rgba(255, 215, 0, 0.3); } .lb-entry:nth-child(2) { background: linear-gradient(90deg, rgba(192, 192, 192, 0.2) 0%, rgba(192, 192, 192, 0.05) 100%); border: 1px solid rgba(192, 192, 192, 0.3); } .lb-entry:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.2) 0%, rgba(205, 127, 50, 0.05) 100%); border: 1px solid rgba(205, 127, 50, 0.3); } .lb-entry.lb-player { background: linear-gradient(90deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.1) 100%); border: 1px solid var(--blue); } .lb-player-separator { text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; letter-spacing: 0.08em; padding: 6px 0 2px; margin: 4px 0 2px; border-top: 1px dashed rgba(255, 255, 255, 0.15); } .lb-rank { font-weight: bold; min-width: 35px; text-align: center; font-size: 1rem; } .lb-name { flex: 1; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-score { font-weight: bold; color: var(--gold); font-size: 0.9rem; text-align: right; } .lb-race-wins { font-size: 0.75rem; margin-left: 6px; color: #CD853F; background: rgba(139, 69, 19, 0.3); padding: 2px 5px; border-radius: 4px; border: 1px solid #8B4513; } .lb-prestige { margin-left: 4px; font-size: 0.75rem; letter-spacing: -2px; } .lb-crown-badge { margin-right: 4px; font-size: 0.85rem; animation: crown-glow 2s ease-in-out infinite; filter: drop-shadow(0 0 3px gold); } @keyframes crown-glow { 0%, 100% { filter: drop-shadow(0 0 3px gold) brightness(1); } 50% { filter: drop-shadow(0 0 6px gold) brightness(1.2); } } .lb-loading, .lb-error, .lb-empty { text-align: center; padding: 40px 20px; color: #888; font-size: 0.95rem; } .lb-error { color: var(--danger); } .leaderboard-player-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid var(--blue); border-radius: 10px; padding: 12px 16px; margin-bottom: 15px; text-align: center; } .lb-player-rank { font-size: 1.1rem; color: var(--blue); font-weight: bold; } .lb-player-rank span { color: var(--gold); } .lb-player-name { color: #aaa; font-size: 0.9rem; margin-top: 4px; } .leaderboard-actions { display: flex; gap: 10px; justify-content: center; } .btn-lb-submit { padding: 12px 24px; background: linear-gradient(180deg, var(--success) 0%, var(--success-dark) 100%); border: none; border-radius: 8px; color: white; font-weight: bold; font-size: 1rem; cursor: pointer; transition: all 0.2s; } .btn-lb-submit:hover { filter: brightness(1.15); transform: translateY(-2px); } .lb-tab-challenges { border-color: rgba(255, 160, 60, 0.5); } .lb-tab-challenges.active { background: linear-gradient(180deg, #ffa040 0%, #c05000 100%); border-color: #ffa040; } .lb-challenge-btn { margin-left: auto; padding: 3px 8px; font-size: 0.7rem; background: linear-gradient(135deg, #c05000 0%, #7b2500 100%); color: #fff; border: 1px solid rgba(255,140,50,0.6); border-radius: 5px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; flex-shrink: 0; } .lb-challenge-btn:hover { opacity: 0.85; } .lb-challenge-btn:disabled { opacity: 0.4; cursor: not-allowed; } .challenge-badge { display: inline-flex; align-items: center; justify-content: center; background: #e53935; color: #fff; font-size: 0.65rem; font-weight: bold; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; position: relative; top: -1px; } #btn-open-leaderboard { position: relative; } .challenge-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,140,50,0.25); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .challenge-card:hover { border-color: rgba(255,140,50,0.5); background: rgba(255,255,255,0.07); } .challenge-card.chal-win { border-color: rgba(100,255,100,0.4); background: rgba(0,80,0,0.15); } .challenge-card.chal-loss { border-color: rgba(255,80,80,0.4); background: rgba(80,0,0,0.15); } .challenge-card.chal-tie { border-color: rgba(200,200,60,0.4); background: rgba(60,60,0,0.15); } .challenge-card-header { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 8px; gap: 3px; } .challenge-vs { font-size: 0.85rem; font-weight: bold; color: var(--gold); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .challenge-vs-sep { margin: 0 4px; } .challenge-timer { font-size: 0.75rem; color: #ffa040; font-variant-numeric: tabular-nums; } .challenge-result-label { font-size: 0.8rem; font-weight: bold; } .challenge-scores { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .chal-score-mine, .chal-score-theirs { font-size: 0.8rem; font-weight: bold; min-width: 60px; } .chal-score-mine { color: #aef; text-align: left; } .chal-score-theirs { color: #faa; text-align: right; } .chal-progress-bar { flex: 1; height: 6px; background: rgba(255,80,80,0.4); border-radius: 3px; overflow: hidden; } .chal-progress-fill { height: 100%; background: linear-gradient(90deg, #4ef, #08f); border-radius: 3px; transition: width 0.4s ease; } .challenge-claim-btn { display: block; width: 100%; padding: 6px 12px; margin-top: 4px; background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%); color: #000; border: none; border-radius: 7px; font-size: 0.8rem; font-weight: bold; cursor: pointer; transition: opacity 0.15s; } .challenge-claim-btn:hover { opacity: 0.85; } .challenge-claim-btn:disabled { opacity: 0.4; cursor: not-allowed; } .challenge-claimed-tag { display: block; text-align: center; color: #6c6; font-size: 0.75rem; margin-top: 4px; } .lb-empty-msg { text-align: center; color: #888; padding: 20px; font-size: 0.85rem; } /* Challenge card header rows */ .chal-header-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: nowrap; } .chal-header-bottom { margin-bottom: 2px; } .chal-header-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex-shrink: 0; justify-content: flex-end; } /* Stakes badge */ .stakes-badge { font-size: 0.65rem; font-weight: bold; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; margin-left: 0; } .stakes-badge-low { background: rgba(60,180,60,0.2); color: #6f6; border: 1px solid rgba(60,200,60,0.4); } .stakes-badge-medium { background: rgba(220,130,20,0.2); color: #fa0; border: 1px solid rgba(220,130,20,0.4); } .stakes-badge-high { background: rgba(200,40,40,0.2); color: #f66; border: 1px solid rgba(200,40,40,0.4); } /* Expand toggle button */ .chal-expand-btn { background: none; border: none; color: #888; font-size: 0.7rem; cursor: pointer; padding: 2px 5px; border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .chal-expand-btn:hover { color: var(--gold); background: rgba(255,255,255,0.07); } /* Expandable detail panel */ .chal-detail-panel { overflow: hidden; max-height: 0; transition: max-height 0.28s ease, padding 0.2s ease; padding: 0; } .challenge-card.chal-expanded .chal-detail-panel { max-height: 160px; padding: 6px 0 2px; } .chal-detail-loading { font-size: 0.75rem; color: #888; text-align: center; padding: 4px 0; } .chal-skel-row { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%); background-size: 200% 100%; animation: skelShimmer 1.2s ease infinite; margin: 5px 0; } .chal-skel-row:nth-child(2) { width: 75%; } .chal-skel-row:nth-child(3) { width: 60%; } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .chal-stat-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: #bbb; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .chal-stat-row span:last-child { color: var(--gold); font-weight: bold; } .chal-stat-row:last-child { border-bottom: none; } /* Challenge card footer (claimed tag + pin button row) */ .chal-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .chal-card-footer .challenge-claim-btn { display: block; width: auto; flex: 1; margin-top: 0; } .chal-card-footer .challenge-claimed-tag { display: inline; flex: 1; text-align: left; } /* Pin button — small ghost style */ .chal-pin-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; flex-shrink: 0; } .chal-pin-btn:hover { color: var(--gold); border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.07); } .chal-pin-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Pinned indicator in card header */ .chal-pinned-indicator { font-size: 0.7rem; margin-right: 3px; opacity: 0.7; vertical-align: middle; } /* Stakes picker overlay */ #stakes-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.18s ease; } .stakes-picker-box { background: linear-gradient(160deg, #1a1224 0%, #120e1e 100%); border: 1px solid rgba(255,140,50,0.35); border-radius: 16px; padding: 22px 20px 18px; width: min(340px, 92vw); box-shadow: 0 8px 40px rgba(0,0,0,0.7); animation: bounceIn 0.22s ease; } .stakes-picker-title { font-size: 1.1rem; font-weight: bold; color: var(--gold); text-align: center; margin-bottom: 4px; } .stakes-picker-sub { font-size: 0.75rem; color: #999; text-align: center; margin-bottom: 14px; } .stakes-picker-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .stakes-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; text-align: left; width: 100%; } .stakes-opt:hover { transform: translateX(2px); background: rgba(255,255,255,0.08); } .stakes-opt-top { display: flex; align-items: center; gap: 8px; } .stakes-opt-bottom { display: flex; align-items: center; justify-content: space-between; } .stakes-opt-icon { font-size: 1.1rem; flex-shrink: 0; } .stakes-opt-name { font-size: 0.92rem; font-weight: bold; color: #fff; } .stakes-opt-time { font-size: 0.72rem; color: #88aaff; font-weight: 600; } .stakes-reward-pills { display: flex; gap: 4px; } .stakes-pill { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.01em; } .stakes-pill-win { background: rgba(60,200,60,0.18); color: #6e6; border: 1px solid rgba(60,200,60,0.35); } .stakes-pill-tie { background: rgba(180,180,180,0.12); color: #bbb; border: 1px solid rgba(180,180,180,0.25); } .stakes-pill-loss { background: rgba(220,50,50,0.18); color: #f88; border: 1px solid rgba(220,50,50,0.35); } .stakes-opt-low { border-color: rgba(60,200,60,0.3); } .stakes-opt-low:hover { border-color: rgba(60,220,60,0.6); background: rgba(40,160,40,0.1); } .stakes-opt-medium { border-color: rgba(220,130,20,0.3); } .stakes-opt-medium:hover { border-color: rgba(255,165,0,0.6); background: rgba(160,90,0,0.1); } .stakes-opt-high { border-color: rgba(200,40,40,0.3); } .stakes-opt-high:hover { border-color: rgba(255,60,60,0.6); background: rgba(150,0,0,0.1); } .stakes-opt-low.stakes-opt-selected { border-color: rgba(60,220,60,0.8) !important; background: rgba(40,160,40,0.15) !important; } .stakes-opt-medium.stakes-opt-selected { border-color: rgba(255,165,0,0.8) !important; background: rgba(160,90,0,0.15) !important; } .stakes-opt-high.stakes-opt-selected { border-color: rgba(255,60,60,0.8) !important; background: rgba(150,0,0,0.15) !important; } .stakes-cancel-btn { display: block; width: 100%; padding: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #aaa; font-size: 0.8rem; cursor: pointer; transition: background 0.15s; } .stakes-cancel-btn:hover { background: rgba(255,255,255,0.12); color: #fff; } .stakes-detail-panel { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px 8px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .stakes-detail-content { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .stakes-detail-row { display: flex; align-items: baseline; gap: 6px; font-size: 0.73rem; color: #ccc; } .stakes-detail-label { color: #fa0; font-weight: 600; flex-shrink: 0; min-width: 68px; } .stakes-detail-row-rewards { align-items: center; } .stakes-reward-grid { display: flex; gap: 6px; flex: 1; } .stakes-reward-cell { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 4px 6px; border-radius: 7px; font-size: 0.78rem; font-weight: 700; } .stakes-reward-cell-label { font-size: 0.6rem; font-weight: 500; opacity: 0.75; margin-bottom: 1px; } .stakes-reward-cell-win { background: rgba(60,200,60,0.15); color: #6e6; border: 1px solid rgba(60,200,60,0.3); } .stakes-reward-cell-tie { background: rgba(180,180,180,0.1); color: #bbb; border: 1px solid rgba(180,180,180,0.2); } .stakes-reward-cell-loss { background: rgba(220,50,50,0.15); color: #f88; border: 1px solid rgba(220,50,50,0.3); } .stakes-confirm-btn { padding: 9px 14px; border-radius: 8px; border: 1px solid #fa0; background: rgba(255,165,0,0.12); color: #ffc; font-size: 0.83rem; font-weight: bold; cursor: pointer; transition: background 0.15s, transform 0.1s; width: 100%; } .stakes-confirm-btn:hover { background: rgba(255,165,0,0.28); transform: translateY(-1px); } .chal-duration-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; background: rgba(100,150,255,0.15); border: 1px solid rgba(100,150,255,0.35); color: #8af; font-weight: 600; } .chal-objectives { background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.07); } .chal-obj-toggle { width: 100%; text-align: left; background: none; border: none; color: #bbb; font-size: 0.68rem; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; } .chal-obj-toggle:hover { color: #eee; } .chal-obj-comp-count { color: #888; margin-left: 3px; } .chal-obj-arrow { font-size: 0.6rem; margin-left: auto; transition: transform 0.2s; } .chal-objectives.chal-obj-open .chal-obj-arrow { transform: rotate(90deg); } .chal-obj-body { display: none; padding: 0 10px 8px; } .chal-objectives.chal-obj-open .chal-obj-body { display: block; } .chal-obj-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; margin-bottom: 5px; } .chal-obj-row-label { font-size: 0.66rem; color: #ccc; } .chal-obj-row-done .chal-obj-row-label { color: #6f9; font-weight: 600; } .chal-obj-bar-wrap { width: 60px; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; } .chal-obj-bar-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 3px; transition: width 0.3s; } .chal-obj-row-done .chal-obj-bar-fill { background: linear-gradient(90deg, #2e7d32, #4caf50); } .chal-obj-row-count { font-size: 0.62rem; color: #888; white-space: nowrap; } /* Wager/Bounty picker */ #wager-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.18s ease; } .wager-picker-box { width: min(360px, 94vw); } .wager-picker-body { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .wager-type-row, .wager-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wager-label { font-size: 0.78rem; color: #bbb; white-space: nowrap; } .wager-type-ctrl { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 4px 8px; flex: 1; } #wager-type-label { flex: 1; font-size: 0.78rem; color: #fff; text-align: center; font-family: 'Roboto Mono', monospace; line-height: 1.4; } .wager-type-meta { font-size: 0.7rem; color: #aaa; display: block; } .wager-amount-ctrl { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 4px 10px; } .wager-amt-btn { background: none; border: none; color: var(--gold); font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; font-family: 'Roboto Mono', monospace; } .wager-amt-btn:hover { color: #fff; } #wager-amt-val { font-size: 1rem; font-weight: bold; color: #fff; min-width: 20px; text-align: center; } .wager-payout-note { font-size: 0.72rem; color: #aaa; text-align: center; background: rgba(255,215,0,0.06); border-radius: 6px; padding: 6px 10px; line-height: 1.4; } .wager-picker-actions { display: flex; flex-direction: column; gap: 8px; } .wager-confirm-btn { width: 100%; padding: 10px; font-size: 0.9rem; background: linear-gradient(135deg, #7c3aed, #4f46e5); border: 1px solid rgba(168,85,247,0.4); border-radius: 8px; color: #fff; font-family: 'Roboto Mono', monospace; cursor: pointer; font-weight: bold; transition: opacity 0.15s; } .wager-confirm-btn:hover { opacity: 0.88; } .wager-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Wager badge on challenge card */ .chal-wager-badge { font-size: 0.7rem; background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 10px; padding: 1px 7px; color: #c084fc; white-space: nowrap; font-weight: bold; } .lb-subtabs { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; } .lb-subtab { padding: 5px 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; font-family: 'Roboto Mono', monospace; cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; } .lb-subtab.active { background: rgba(79, 195, 247, 0.18); border-color: rgba(79, 195, 247, 0.5); color: #4fc3f7; font-weight: bold; } .lb-subtab:hover:not(.active) { background: rgba(255, 255, 255, 0.14); color: #fff; } .weekly-lb-info { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: rgba(79, 195, 247, 0.1); border: 1px solid rgba(79, 195, 247, 0.25); border-radius: 8px; margin-bottom: 10px; font-size: 0.8rem; } .weekly-lb-week { color: #4fc3f7; font-weight: bold; } .weekly-lb-countdown { color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; } .lb-tier-badge { font-size: 0.72rem; font-weight: bold; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; } .lb-tier-gold { background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(184,134,11,0.2)); border: 1px solid rgba(255,215,0,0.5); color: var(--gold); } .lb-tier-silver { background: linear-gradient(135deg, rgba(192,192,192,0.25), rgba(128,128,128,0.2)); border: 1px solid rgba(192,192,192,0.5); color: #d0d0d0; } .lb-tier-bronze { background: linear-gradient(135deg, rgba(205,127,50,0.25), rgba(139,69,19,0.2)); border: 1px solid rgba(205,127,50,0.5); color: #cd7f32; } /* Weekly Tier Reward Banner */ .weekly-reward-banner { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a1a2e 0%, #0f1c3f 100%); border: 2px solid var(--gold); border-radius: 14px; padding: 14px 20px; z-index: 9999; max-width: 340px; width: 90%; text-align: center; box-shadow: 0 4px 30px rgba(255, 215, 0, 0.3); animation: tierBannerIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes tierBannerIn { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .weekly-reward-banner-title { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1rem; font-weight: bold; margin-bottom: 4px; } .weekly-reward-banner-msg { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin-bottom: 10px; } .weekly-reward-banner-crests { color: #ffe066; font-weight: bold; font-size: 0.9rem; margin-bottom: 10px; } .weekly-reward-banner-btn { padding: 8px 20px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); border: none; border-radius: 8px; color: #000; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: filter 0.2s; } .weekly-reward-banner-btn:hover { filter: brightness(1.15); } /* Incoming Duel Challenge Banner */ .challenge-duel-banner { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a1a2e 0%, #0f1c3f 100%); border: 2px solid var(--orange); border-radius: 14px; padding: 14px 20px; z-index: 9999; max-width: 340px; width: 90%; text-align: center; box-shadow: 0 4px 30px rgba(249, 115, 22, 0.35); animation: tierBannerIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .challenge-duel-banner-title { font-family: 'Cinzel', serif; color: var(--orange); font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; line-height: 1.4; } .challenge-duel-banner-row { display: flex; gap: 8px; justify-content: center; } .challenge-duel-banner-btn { padding: 7px 16px; background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%); border: none; border-radius: 8px; color: #fff; font-weight: bold; font-size: 0.82rem; cursor: pointer; transition: filter 0.2s; } .challenge-duel-banner-btn:hover { filter: brightness(1.15); } .challenge-duel-banner-dismiss { padding: 7px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: rgba(255,255,255,0.7); font-size: 0.8rem; cursor: pointer; transition: background 0.2s; } .challenge-duel-banner-dismiss:hover { background: rgba(255,255,255,0.15); } /* Lottery Modal */ .lottery-modal-content { max-width: 450px; text-align: center; } .exchange-modal-content { max-width: 480px; max-height: 85vh; overflow-y: auto; } .exchange-title { font-family: 'Cinzel', serif; color: var(--gold); text-align: center; margin-bottom: 4px; font-size: 1.4rem; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .exchange-subtitle { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; margin: 0 0 6px; } .exchange-timer { text-align: center; color: rgba(255, 215, 0, 0.7); font-size: 0.75rem; margin-bottom: 12px; letter-spacing: 1px; } .exchange-offers { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; } .exchange-offer-card { background: linear-gradient(135deg, rgba(15, 28, 63, 0.9), rgba(5, 10, 24, 0.9)); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 10px; transition: border-color 0.3s; } .exchange-offer-card:hover:not(.claimed):not(.insufficient):not(.at-capacity) { border-color: var(--gold); } .exchange-offer-card.rare { border-color: rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, rgba(30, 15, 60, 0.9), rgba(10, 5, 30, 0.9)); box-shadow: 0 0 15px rgba(168, 85, 247, 0.15); } .exchange-offer-card.rare:hover:not(.claimed) { border-color: #a855f7; box-shadow: 0 0 25px rgba(168, 85, 247, 0.3); } .exchange-offer-card.claimed { opacity: 0.5; border-color: rgba(34, 197, 94, 0.4); } .exchange-offer-card.insufficient:not(.claimed) { opacity: 0.6; } .exchange-offer-card.at-capacity:not(.claimed) { opacity: 0.65; border-color: rgba(239, 68, 68, 0.35); } .exchange-full-tag { font-size: 0.65rem; font-weight: 700; color: #ef4444; text-transform: uppercase; letter-spacing: 1px; } .exchange-give, .exchange-get { flex: 1; display: flex; flex-direction: column; gap: 2px; } .exchange-label { font-size: 0.65rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; } .exchange-item { font-size: 0.9rem; font-weight: 600; color: #fff; } .exchange-stock { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); } .exchange-arrow { font-size: 1.4rem; color: var(--gold); flex-shrink: 0; } .exchange-trade-btn { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #000; border: none; border-radius: 8px; padding: 8px 14px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s; } .exchange-trade-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .exchange-trade-btn:disabled { background: rgba(100, 100, 100, 0.4); color: rgba(255, 255, 255, 0.4); cursor: not-allowed; } .exchange-trade-btn.claimed-btn { background: rgba(34, 197, 94, 0.3); color: #22c55e; } @media (max-width: 480px) { .exchange-offer-card { flex-wrap: wrap; padding: 10px; gap: 6px; } .exchange-give, .exchange-get { flex: 1 1 35%; } .exchange-arrow { flex: 0 0 auto; } .exchange-trade-btn { width: 100%; margin-top: 4px; } } .lottery-title { font-family: 'Cinzel', serif; color: var(--gold); text-align: center; margin-bottom: 8px; font-size: 1.4rem; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .lottery-coin-balance { display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.35); border-radius: 20px; padding: 5px 16px; margin: 0 auto 12px; width: fit-content; } .lottery-coin-icon { font-size: 1rem; line-height: 1; } .lottery-coin-amount { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; } .lottery-claim-banner { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)); border: 2px solid var(--success); border-radius: 12px; padding: 15px; margin-bottom: 15px; animation: collectPulse 2s infinite; } .lottery-claim-text { color: var(--success); font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; } .lottery-claim-btn { padding: 12px 24px; background: linear-gradient(180deg, var(--success) 0%, var(--success-dark) 100%); border: 2px solid #86efac; border-radius: 10px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; } .lottery-claim-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); } .lottery-pool-section { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 15px; margin-bottom: 15px; } .lottery-countdown { color: var(--gold-light); font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; letter-spacing: 1px; } .lottery-pool-stats { display: flex; justify-content: space-around; gap: 10px; } .lottery-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lottery-stat-value { font-size: 1.4rem; font-weight: 700; color: #fff; } .lottery-stat-prize .lottery-stat-value { color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); font-size: 1.5rem; } .lottery-stat-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.5px; } .lottery-player-section { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 15px; margin-bottom: 15px; } .lottery-your-tickets { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 1rem; color: rgba(255, 255, 255, 0.8); } .lottery-ticket-count { font-size: 1.6rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } .lottery-coin-balance { font-size: 0.8rem; color: var(--gold); text-align: center; margin: 4px 0 8px; font-weight: 600; letter-spacing: 0.5px; } .lottery-error-msg { font-size: 0.78rem; color: #ff6b6b; text-align: center; margin: 4px 0 6px; padding: 5px 10px; background: rgba(255,107,107,0.12); border-radius: 6px; border: 1px solid rgba(255,107,107,0.3); } .lottery-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; } .lottery-daily-btn, .lottery-buy-btn { padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; border: 2px solid; } .lottery-daily-btn { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); border-color: var(--gold-light); color: #1a1a2e; } .lottery-daily-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } .lottery-daily-btn:disabled, .lottery-daily-btn.claimed { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.4); cursor: default; } .lottery-daily-reset { text-align: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.03em; margin-top: -6px; margin-bottom: 2px; font-variant-numeric: tabular-nums; } .lottery-buy-btn { background: linear-gradient(180deg, var(--purple) 0%, var(--purple-dark) 100%); border-color: #c084fc; color: #fff; } .lottery-buy-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); } .lottery-buy-btn:disabled, .lottery-buy-btn.maxed { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.4); cursor: default; } .lottery-extra-info { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } .lottery-login-prompt { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 12px; padding: 20px; margin-bottom: 15px; } .lottery-login-prompt p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 0.95rem; } .lottery-last-winner { background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 12px; margin-bottom: 15px; } .lottery-winner-label { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; font-weight: 700; } .lottery-winner-name { font-size: 1rem; color: #fff; font-weight: 600; margin-bottom: 4px; } .lottery-winner-prize { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } .lottery-prize-formula { font-size: 0.7rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 12px; font-style: italic; } .lottery-tabs { display: flex; gap: 6px; margin-bottom: 15px; } .lottery-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #888; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .lottery-tab .tab-icon { font-size: 1.1rem; } .lottery-tab.active { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(218, 165, 32, 0.1)); border-color: var(--gold); color: var(--gold); font-weight: 700; } .lottery-tab:not(.active):hover { background: rgba(255, 255, 255, 0.1); color: #ccc; } .lottery-tab-content { width: 100%; } .scratch-tab-section { text-align: center; } .scratch-tab-header { margin-bottom: 15px; } .scratch-tab-icon { font-size: 2.5rem; margin-bottom: 5px; } .scratch-tab-title { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; } .scratch-tab-desc { color: #aaa; font-size: 0.85rem; line-height: 1.4; } .scratch-tab-owned { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; margin: 12px 0; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .scratch-tab-owned-label { color: #aaa; font-size: 0.9rem; } .scratch-tab-owned-count { color: var(--gold); font-weight: 700; font-size: 1.1rem; } .scratch-tab-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 15px 0; } .scratch-tab-actions .scratch-ticket-use-btn { width: 100%; padding: 12px; font-size: 1rem; } .scratch-tab-actions .consumable-buy-btn { width: 100%; padding: 12px; font-size: 0.95rem; } .scratch-tab-legend { text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 12px 15px; margin-top: 15px; } .lottery-claim-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--danger); color: #fff; border-radius: 50%; font-size: 0.7rem; font-weight: 700; margin-left: 6px; animation: pulseRed 2s infinite; } .lottery-btn { position: relative; } /* Name Prompt Modal */ .name-prompt-content { max-width: 350px; text-align: center; } .name-prompt-content h2 { color: var(--gold); margin-bottom: 10px; } .name-prompt-content p { color: #aaa; font-size: 0.9rem; margin-bottom: 20px; } #player-name-input { width: 100%; padding: 14px 16px; background: rgba(0, 0, 0, 0.5); border: 2px solid #444; border-radius: 8px; color: white; font-size: 1.1rem; text-align: center; font-family: inherit; margin-bottom: 20px; box-sizing: border-box; } #player-name-input:focus { outline: none; border-color: var(--gold); } .name-prompt-actions { display: flex; gap: 10px; justify-content: center; } .btn-name-submit { padding: 12px 30px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); border: none; border-radius: 8px; color: #000; font-weight: bold; font-size: 1rem; cursor: pointer; transition: all 0.2s; } .btn-name-submit:hover { filter: brightness(1.15); transform: translateY(-2px); } .btn-name-cancel { padding: 12px 20px; background: rgba(255, 255, 255, 0.1); border: 1px solid #555; border-radius: 8px; color: #aaa; font-size: 1rem; cursor: pointer; transition: all 0.2s; } .btn-name-cancel:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } /* Story Intro Modal */ #story-intro-modal { z-index: 250; } .story-intro-content { max-width: 480px; padding: 30px 25px; background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f1c3f 100%); border: 3px solid var(--gold); position: relative; overflow: hidden; } .story-intro-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .story-page { display: none; animation: storyFadeIn 0.4s ease-out; } .story-page.active { display: block; } @keyframes storyFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .story-icon { font-size: 4rem; margin-bottom: 15px; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3)); animation: storyIconPulse 2s ease-in-out infinite; } @keyframes storyIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .story-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0 0 20px 0; letter-spacing: 3px; text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); } .story-text { color: #cbd5e1; font-size: 1rem; line-height: 1.7; text-align: left; } .story-text p { margin: 0 0 15px 0; } .story-text p:last-child { margin-bottom: 0; } .story-text strong { color: #fff; font-weight: bold; } .story-text em { color: #a78bfa; font-style: italic; } .story-highlight { background: linear-gradient(90deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.2), rgba(197, 160, 89, 0.1)); border-left: 3px solid var(--gold); padding: 10px 15px; margin: 15px 0 0 0 !important; font-style: italic; color: var(--gold-light); } .story-gold { color: var(--gold); font-weight: bold; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .story-danger { color: var(--danger); font-weight: bold; } .story-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(197, 160, 89, 0.3); } .story-nav-btn { padding: 12px 25px; background: linear-gradient(180deg, #334155 0%, #1e293b 100%); border: 2px solid #475569; border-radius: 8px; color: #e2e8f0; font-family: 'Roboto Mono', monospace; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; min-width: 90px; } .story-nav-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .story-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .story-nav-btn.story-next-btn { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); border-color: var(--gold-light); color: #000; } .story-nav-btn.story-next-btn:hover { filter: brightness(1.1); color: #000; } .story-nav-btn.story-begin-btn { background: linear-gradient(180deg, var(--success) 0%, var(--success-dark) 100%); border-color: #86efac; color: #fff; padding: 12px 30px; } .story-nav-btn.story-begin-btn:hover { filter: brightness(1.15); color: #fff; } .story-page-indicator { color: #64748b; font-size: 0.85rem; font-family: 'Roboto Mono', monospace; } .story-skip-btn { display: block; margin: 15px auto 0 auto; padding: 8px 20px; background: transparent; border: 1px dashed #475569; border-radius: 5px; color: #64748b; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; } .story-skip-btn:hover { border-color: #94a3b8; color: #94a3b8; } :where(html.layout-mobile) .story-intro-content { max-width: 95%; padding: 20px 18px; } :where(html.layout-mobile) .story-icon { font-size: 3rem; } :where(html.layout-mobile) .story-title { font-size: 1.4rem; letter-spacing: 2px; } :where(html.layout-mobile) .story-text { font-size: 0.9rem; line-height: 1.6; } :where(html.layout-mobile) .story-nav-btn { padding: 10px 18px; font-size: 0.8rem; min-width: 75px; } /* ===== COSMETIC STYLES ===== */ /* Spin Button Cosmetics */ .cosmetic-spin-neon { background: linear-gradient(180deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%) !important; box-shadow: 0 5px 0 #4c1d95, 0 0 20px rgba(168, 85, 247, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; color: #fff !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5); } .cosmetic-spin-neon:hover:not(:disabled) { box-shadow: 0 5px 0 #4c1d95, 0 0 30px rgba(168, 85, 247, 0.9), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important; } .cosmetic-spin-gold { background: linear-gradient(180deg, #fef08a 0%, #d4af37 30%, #b8860b 70%, #8b6914 100%) !important; box-shadow: 0 0 15px rgba(212, 175, 55, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important; color: #3d2600 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.2); } .cosmetic-spin-gold:hover:not(:disabled) { box-shadow: 0 0 25px rgba(212, 175, 55, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.5) !important; } .cosmetic-spin-fire { background: linear-gradient(180deg, #fef08a 0%, #fb923c 30%, #dc2626 70%, #991b1b 100%) !important; box-shadow: 0 0 20px rgba(220, 38, 38, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5); animation: firePulse 1.5s ease-in-out infinite; } @keyframes firePulse { 0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 30px rgba(251, 146, 60, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.4); } } /* Ruby Cosmetics - The Collector's Ledger Theme */ .cosmetic-spin-ruby { background: linear-gradient(180deg, #4a0000 0%, #8B0000 30%, #DC143C 70%, #8B0000 100%) !important; box-shadow: 0 0 20px rgba(139, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.2) !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(139, 0, 0, 0.5); animation: rubyPulse 2s ease-in-out infinite; border: 2px solid #DC143C !important; } @keyframes rubyPulse { 0%, 100% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 0 30px rgba(220, 20, 60, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.3); } } .cosmetic-border-ruby { border: 4px solid #DC143C !important; box-shadow: 0 0 15px rgba(139, 0, 0, 0.5), inset 0 0 10px rgba(139, 0, 0, 0.2) !important; } .cosmetic-bg-ruby { background: radial-gradient(circle at 30% 30%, rgba(220, 20, 60, 0.15) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(139, 0, 0, 0.15) 0%, transparent 40%), linear-gradient(180deg, #1a0000 0%, #2a0a0a 30%, #1a0000 70%, #0f0505 100%) !important; position: relative; animation: rubyAmbient 4s ease-in-out infinite; } @keyframes rubyAmbient { 0%, 100% { background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.05) 0%, transparent 70%), radial-gradient(circle at 30% 30%, rgba(220, 20, 60, 0.15) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(139, 0, 0, 0.15) 0%, transparent 40%), linear-gradient(180deg, #1a0000 0%, #2a0a0a 30%, #1a0000 70%, #0f0505 100%); } 50% { background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.15) 0%, transparent 70%), radial-gradient(circle at 30% 30%, rgba(220, 20, 60, 0.2) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(139, 0, 0, 0.2) 0%, transparent 40%), linear-gradient(180deg, #1a0000 0%, #2a0a0a 30%, #1a0000 70%, #0f0505 100%); } } .cosmetic-spin-ice { background: linear-gradient(180deg, #e0f2fe 0%, #7dd3fc 30%, #38bdf8 70%, #0284c7 100%) !important; box-shadow: 0 0 15px rgba(56, 189, 248, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5) !important; color: #0c3a5a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.1); } .cosmetic-spin-ice:hover:not(:disabled) { box-shadow: 0 0 25px rgba(56, 189, 248, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important; } .cosmetic-spin-diamond { background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 20%, #c7d2fe 50%, #a5b4fc 80%, #818cf8 100%) !important; box-shadow: 0 0 20px rgba(165, 180, 252, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.8) !important; color: #312e81 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.1); animation: diamondSparkleGlow 2s ease-in-out infinite; } @keyframes diamondSparkleGlow { 0%, 100% { box-shadow: 0 0 20px rgba(165, 180, 252, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.8); } 50% { box-shadow: 0 0 35px rgba(255, 255, 255, 0.9), inset 0 2px 5px rgba(255, 255, 255, 1); } } /* Reel Border Cosmetics */ .cosmetic-border-chrome { border: 4px solid #9ca3af !important; background: linear-gradient(145deg, #374151, #1f2937) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(156, 163, 175, 0.3) !important; } .cosmetic-border-royal { border: 4px solid var(--gold) !important; background: linear-gradient(145deg, #3d2a1a, #1a0f05) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.4) !important; } .cosmetic-border-cyber { border: 3px solid #22d3ee !important; background: linear-gradient(145deg, #0f172a, #020617) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 0 25px rgba(34, 211, 238, 0.4), inset 0 0 30px rgba(34, 211, 238, 0.1) !important; } .cosmetic-border-wooden { border: 6px solid #92400e !important; background: linear-gradient(145deg, #78350f, #451a03) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.5) !important; } /* Background Cosmetics */ .cosmetic-bg-velvet { background: repeating-linear-gradient( 135deg, transparent, transparent 6px, rgba(200, 120, 255, 0.06) 6px, rgba(200, 120, 255, 0.06) 7px ), repeating-linear-gradient( 45deg, transparent, transparent 6px, rgba(160, 80, 220, 0.05) 6px, rgba(160, 80, 220, 0.05) 7px ), linear-gradient(160deg, #7a3a9e 0%, #5a2080 40%, #3d1260 70%, #2a0b45 100%) !important; } .cosmetic-bg-midnight { background: radial-gradient(circle at 75% 20%, rgba(200, 200, 255, 0.15) 0%, transparent 25%), radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 50%), radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 40% 10%, rgba(255, 255, 255, 0.8) 50%, transparent 50%), radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), radial-gradient(1px 1px at 70% 25%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 85% 55%, rgba(255, 255, 255, 0.7) 50%, transparent 50%), radial-gradient(1px 1px at 15% 65%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1px 1px at 50% 75%, rgba(255, 255, 255, 0.4) 50%, transparent 50%), radial-gradient(1px 1px at 35% 90%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), linear-gradient(160deg, #2a2670 0%, #1a1555 40%, #100d3a 70%, #08051f 100%) !important; } .cosmetic-bg-emerald { background: linear-gradient(60deg, transparent 40%, rgba(80, 255, 160, 0.06) 40%, rgba(80, 255, 160, 0.06) 41%, transparent 41%), linear-gradient(120deg, transparent 45%, rgba(60, 220, 140, 0.05) 45%, rgba(60, 220, 140, 0.05) 46%, transparent 46%), linear-gradient(-60deg, transparent 50%, rgba(100, 255, 180, 0.04) 50%, rgba(100, 255, 180, 0.04) 51%, transparent 51%), linear-gradient(0deg, transparent 35%, rgba(50, 200, 120, 0.05) 35%, rgba(50, 200, 120, 0.05) 36%, transparent 36%), linear-gradient(160deg, #0d7a5a 0%, #0a6048 30%, #065540 55%, #033d2e 80%, #022a20 100%) !important; } /* Additional Spin Button Cosmetics */ .cosmetic-spin-chrome { background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 30%, #6b7280 70%, #4b5563 100%) !important; box-shadow: 0 0 15px rgba(156, 163, 175, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important; color: #1f2937 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.2); } .cosmetic-spin-chrome:hover:not(:disabled) { box-shadow: 0 0 25px rgba(156, 163, 175, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important; } .cosmetic-spin-velvet { background: linear-gradient(180deg, #c084fc 0%, #a855f7 30%, #7c3aed 70%, #5b21b6 100%) !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .cosmetic-spin-velvet:hover:not(:disabled) { box-shadow: 0 0 25px rgba(139, 92, 246, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important; } .cosmetic-spin-midnight { background: linear-gradient(180deg, #6366f1 0%, #4338ca 30%, #3730a3 70%, #1e1b4b 100%) !important; box-shadow: 0 0 15px rgba(99, 102, 241, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(99, 102, 241, 0.5); } .cosmetic-spin-midnight:hover:not(:disabled) { box-shadow: 0 0 25px rgba(99, 102, 241, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important; } .cosmetic-spin-emerald { background: linear-gradient(180deg, #6ee7b7 0%, #34d399 30%, #10b981 70%, #047857 100%) !important; box-shadow: 0 0 15px rgba(52, 211, 153, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.3) !important; color: #022c22 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.2); } .cosmetic-spin-emerald:hover:not(:disabled) { box-shadow: 0 0 25px rgba(52, 211, 153, 0.8), inset 0 2px 3px rgba(255, 255, 255, 0.4) !important; } /* Additional Reel Border Cosmetics */ .cosmetic-border-neon { border: 3px solid #a855f7 !important; background: linear-gradient(145deg, #2e1065, #1a0a3e) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.5) !important; } .cosmetic-border-gold { border: 4px solid var(--gold) !important; background: linear-gradient(145deg, #3d2a1a, #1a0f05) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.4) !important; } .cosmetic-border-fire { border: 3px solid #fb923c !important; background: linear-gradient(145deg, #4a1a1a, #2a0a0a) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 146, 60, 0.5) !important; animation: borderFirePulse 1.5s ease-in-out infinite; } @keyframes borderFirePulse { 0%, 100% { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 146, 60, 0.5); } 50% { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 35px rgba(220, 38, 38, 0.7); } } .cosmetic-border-ice { border: 3px solid #7dd3fc !important; background: linear-gradient(145deg, #0c4a6e, #082f49) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(125, 211, 252, 0.4) !important; } .cosmetic-border-diamond { border: 3px solid #c7d2fe !important; background: linear-gradient(145deg, #312e81, #1e1b4b) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(199, 210, 254, 0.5) !important; animation: borderDiamondSparkle 2s ease-in-out infinite; } @keyframes borderDiamondSparkle { 0%, 100% { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(199, 210, 254, 0.5); } 50% { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 255, 255, 0.7); } } .cosmetic-border-velvet { border: 4px solid #a855f7 !important; background: linear-gradient(145deg, #4a1d6a, #2e0a4a) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.3) !important; } .cosmetic-border-midnight { border: 3px solid #6366f1 !important; background: linear-gradient(145deg, #1e1b4b, #0f0a2e) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.3) !important; } .cosmetic-border-emerald { border: 4px solid #34d399 !important; background: linear-gradient(145deg, #064e3b, #022c22) !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(52, 211, 153, 0.3) !important; } /* Additional Background Cosmetics */ .cosmetic-bg-neon { background: radial-gradient(ellipse at 20% 50%, rgba(255, 0, 200, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(140, 0, 255, 0.2) 0%, transparent 45%), radial-gradient(ellipse at 50% 80%, rgba(255, 50, 255, 0.15) 0%, transparent 40%), repeating-linear-gradient( 0deg, transparent, transparent 30px, rgba(255, 0, 220, 0.08) 30px, rgba(255, 0, 220, 0.08) 31px ), repeating-linear-gradient( 90deg, transparent, transparent 30px, rgba(160, 0, 255, 0.06) 30px, rgba(160, 0, 255, 0.06) 31px ), linear-gradient(160deg, #8b2fc9 0%, #6a1fa8 30%, #4c1080 60%, #2e0858 100%) !important; } .cosmetic-bg-gold { background: repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(255, 215, 0, 0.08) 10px, rgba(255, 215, 0, 0.08) 11px ), repeating-linear-gradient( 45deg, transparent, transparent 15px, rgba(255, 200, 50, 0.06) 15px, rgba(255, 200, 50, 0.06) 16px ), radial-gradient(ellipse at 30% 20%, rgba(255, 220, 100, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(255, 200, 50, 0.12) 0%, transparent 40%), linear-gradient(160deg, #a86b10 0%, #8b5a0a 30%, #6d4508 55%, #4a2e05 80%, #2e1c03 100%) !important; } .cosmetic-bg-chrome { background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.04) 4px ), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.02) 100%), linear-gradient(160deg, #5a6270 0%, #48505e 25%, #374050 50%, #2a3240 75%, #1e2530 100%) !important; } .cosmetic-bg-fire { background: radial-gradient(ellipse at 25% 70%, rgba(255, 150, 0, 0.2) 0%, transparent 40%), radial-gradient(ellipse at 75% 40%, rgba(255, 100, 0, 0.18) 0%, transparent 35%), radial-gradient(ellipse at 50% 90%, rgba(255, 200, 50, 0.15) 0%, transparent 45%), radial-gradient(3px 3px at 20% 30%, rgba(255, 200, 50, 0.4) 50%, transparent 50%), radial-gradient(2px 2px at 60% 20%, rgba(255, 180, 30, 0.35) 50%, transparent 50%), radial-gradient(3px 3px at 80% 60%, rgba(255, 220, 80, 0.3) 50%, transparent 50%), radial-gradient(2px 2px at 40% 80%, rgba(255, 160, 20, 0.35) 50%, transparent 50%), linear-gradient(160deg, #b83020 0%, #9a2010 25%, #7a1510 50%, #5c0a08 75%, #3a0505 100%) !important; } .cosmetic-bg-ice { background: linear-gradient(60deg, transparent 30%, rgba(150, 220, 255, 0.06) 30%, rgba(150, 220, 255, 0.06) 31%, transparent 31%), linear-gradient(120deg, transparent 45%, rgba(180, 230, 255, 0.05) 45%, rgba(180, 230, 255, 0.05) 46%, transparent 46%), linear-gradient(-30deg, transparent 55%, rgba(120, 200, 255, 0.04) 55%, rgba(120, 200, 255, 0.04) 56%, transparent 56%), linear-gradient(90deg, transparent 25%, rgba(200, 240, 255, 0.05) 25%, rgba(200, 240, 255, 0.05) 26%, transparent 26%), radial-gradient(ellipse at 60% 30%, rgba(180, 230, 255, 0.12) 0%, transparent 40%), linear-gradient(160deg, #1a7aaa 0%, #14628e 30%, #0e4d72 55%, #083a58 80%, #04283e 100%) !important; } .cosmetic-bg-diamond { background: linear-gradient(45deg, transparent 40%, rgba(200, 200, 255, 0.08) 40%, rgba(200, 200, 255, 0.08) 42%, transparent 42%), linear-gradient(-45deg, transparent 35%, rgba(220, 220, 255, 0.06) 35%, rgba(220, 220, 255, 0.06) 37%, transparent 37%), linear-gradient(135deg, transparent 50%, rgba(180, 180, 255, 0.07) 50%, rgba(180, 180, 255, 0.07) 52%, transparent 52%), linear-gradient(-135deg, transparent 45%, rgba(240, 240, 255, 0.05) 45%, rgba(240, 240, 255, 0.05) 47%, transparent 47%), radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 40%), radial-gradient(ellipse at 30% 70%, rgba(200, 200, 255, 0.08) 0%, transparent 35%), linear-gradient(160deg, #4a45b0 0%, #3b3590 30%, #2c2870 55%, #1e1b50 80%, #100e30 100%) !important; } /* Preview classes for Royal Shoppe */ .preview-spin-chrome { background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%); } .preview-spin-velvet { background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%); } .preview-spin-midnight { background: linear-gradient(180deg, #6366f1 0%, #3730a3 100%); } .preview-spin-emerald { background: linear-gradient(180deg, #34d399 0%, #047857 100%); } .preview-border-neon { background: linear-gradient(180deg, #a855f7 0%, #2e1065 100%); border: 2px solid #a855f7; } .preview-border-gold { background: linear-gradient(180deg, #d4af37 0%, #3d2a1a 100%); border: 2px solid var(--gold); } .preview-border-fire { background: linear-gradient(180deg, #fb923c 0%, #4a1a1a 100%); border: 2px solid #fb923c; } .preview-border-ice { background: linear-gradient(180deg, #7dd3fc 0%, #0c4a6e 100%); border: 2px solid #7dd3fc; } .preview-border-diamond { background: linear-gradient(180deg, #c7d2fe 0%, #312e81 100%); border: 2px solid #c7d2fe; } .preview-border-velvet { background: linear-gradient(180deg, #a855f7 0%, #4a1d6a 100%); border: 2px solid #a855f7; } .preview-border-midnight { background: linear-gradient(180deg, #6366f1 0%, #1e1b4b 100%); border: 2px solid #6366f1; } .preview-border-emerald { background: linear-gradient(180deg, #34d399 0%, #064e3b 100%); border: 2px solid #34d399; } .preview-border-velvet_night { background: linear-gradient(180deg, #6b3fa0 0%, #2d1560 50%, #1a0a2e 100%); border: 2px solid #6b3fa0; box-shadow: 0 0 10px rgba(107, 63, 160, 0.5); } .preview-border-cosmic_edge { background: linear-gradient(180deg, #cc99ff 0%, #9966ff 50%, #1a0a2e 100%); border: 2px solid #cc99ff; box-shadow: 0 0 12px rgba(153, 102, 255, 0.6); } .preview-border-prestige_prisma { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6); border: 2px solid #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); -webkit-animation: prismaPreviewHue 3s linear infinite; animation: prismaPreviewHue 3s linear infinite; } @keyframes prismaPreviewHue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } .preview-bg-neon { background: linear-gradient(180deg, #a855f7 0%, #581c87 100%); } .preview-bg-gold { background: linear-gradient(180deg, #d4af37 0%, #78350f 100%); } .preview-bg-chrome { background: linear-gradient(180deg, #9ca3af 0%, #374151 100%); } .preview-bg-fire { background: linear-gradient(180deg, #ef4444 0%, #7f1d1d 100%); } .preview-bg-ice { background: linear-gradient(180deg, #38bdf8 0%, #0c4a6e 100%); } .preview-bg-diamond { background: linear-gradient(180deg, #a5b4fc 0%, #312e81 100%); } /* Track 2 Cosmetic Previews */ .preview-spin-celestial_dawn { background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%); box-shadow: 0 0 8px rgba(252, 211, 77, 0.5); } .preview-spin-ocean_depths { background: linear-gradient(180deg, #22d3ee 0%, #0891b2 50%, #164e63 100%); box-shadow: 0 0 8px rgba(34, 211, 238, 0.5); } .preview-spin-volcanic_forge { background: linear-gradient(180deg, #f97316 0%, #dc2626 50%, #7f1d1d 100%); box-shadow: 0 0 8px rgba(249, 115, 22, 0.5); } .preview-border-celestial_dawn { background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%); border: 2px solid #fcd34d; box-shadow: 0 0 10px rgba(252, 211, 77, 0.5); } .preview-border-ocean_depths { background: linear-gradient(180deg, #22d3ee 0%, #0e7490 100%); border: 2px solid #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); } .preview-border-volcanic_forge { background: linear-gradient(180deg, #f97316 0%, #991b1b 100%); border: 2px solid #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.5); } .preview-bg-celestial_dawn { background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%); } .preview-bg-ocean_depths { background: linear-gradient(180deg, #06b6d4 0%, #155e75 100%); } .preview-bg-volcanic_forge { background: linear-gradient(180deg, #ea580c 0%, #7f1d1d 100%); } /* Developer Mode Cosmetic Previews */ .preview-spin-developer { background: transparent; border: 2px dashed #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); position: relative; } .preview-spin-developer::after { content: '{ }'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Courier New', monospace; font-size: 14px; color: #00ff88; } .preview-border-developer { background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 255, 136, 0.1) 4px, rgba(0, 255, 136, 0.1) 5px), repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0, 255, 136, 0.1) 4px, rgba(0, 255, 136, 0.1) 5px); border: 2px dashed #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); } .preview-bg-developer { background: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0, 255, 136, 0.08) 8px, rgba(0, 255, 136, 0.08) 9px), repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0, 255, 136, 0.08) 8px, rgba(0, 255, 136, 0.08) 9px), linear-gradient(180deg, #0a0a12 0%, #0d1117 100%); border: 2px dashed #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); } /* Customize button styling in main menu */ .menu-option-btn.customize-btn:hover { border-color: #f472b6; color: #f472b6; } /* Royal Casino Exclusive Cosmetics (Champion Reward) */ .cosmetic-spin-royal { background: linear-gradient(180deg, #fff8dc 0%, #ffd700 15%, #d4af37 35%, #9a6b2a 55%, #6b21a8 80%, #4c1d95 100%) !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(212, 175, 55, 0.6), 0 0 90px rgba(147, 51, 234, 0.4), inset 0 2px 8px rgba(255, 255, 255, 0.8), inset 0 -2px 8px rgba(76, 29, 149, 0.5) !important; animation: royalCrownPulse 1.5s ease-in-out infinite, royalSparkle 3s linear infinite; border: 3px solid #ffd700 !important; color: #fff !important; text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8); position: relative; overflow: hidden; } .cosmetic-spin-royal::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70% ); animation: royalShineSwipe 2s ease-in-out infinite; pointer-events: none; } @keyframes royalShineSwipe { 0% { transform: translateX(-100%) rotate(45deg); } 50%, 100% { transform: translateX(100%) rotate(45deg); } } @keyframes royalCrownPulse { 0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(212, 175, 55, 0.6), 0 0 90px rgba(147, 51, 234, 0.4), inset 0 2px 8px rgba(255, 255, 255, 0.8); border-color: #ffd700; filter: brightness(1); } 25% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 215, 0, 0.7), 0 0 100px rgba(168, 85, 247, 0.5), inset 0 2px 8px rgba(255, 255, 255, 1); border-color: #fff8dc; filter: brightness(1.1); } 50% { box-shadow: 0 0 50px rgba(168, 85, 247, 0.9), 0 0 90px rgba(147, 51, 234, 0.6), 0 0 110px rgba(255, 215, 0, 0.4), inset 0 2px 8px rgba(255, 255, 255, 0.9); border-color: #c084fc; filter: brightness(1.05); } 75% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 215, 0, 0.7), 0 0 100px rgba(168, 85, 247, 0.5), inset 0 2px 8px rgba(255, 255, 255, 1); border-color: #fff8dc; filter: brightness(1.1); } } @keyframes royalSparkle { 0%, 100% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(10deg) brightness(1.05); } } .cosmetic-spin-royal:hover:not(:disabled) { box-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 100px rgba(255, 255, 255, 0.8), 0 0 120px rgba(147, 51, 234, 0.7), inset 0 2px 8px rgba(255, 255, 255, 1) !important; filter: brightness(1.15); } .cosmetic-border-royal-champion { border: 5px solid #ffd700 !important; background: linear-gradient(145deg, #581c87 0%, #4c1d95 30%, #2e1065 60%, #1a0a3e 100%) !important; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(168, 85, 247, 0.2), 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(212, 175, 55, 0.4), 0 0 100px rgba(147, 51, 234, 0.3) !important; animation: royalBorderGlow 2s ease-in-out infinite; position: relative; } .cosmetic-border-royal-champion::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; background: linear-gradient(45deg, #ffd700, #a855f7, #ffd700, #a855f7); background-size: 400% 400%; animation: royalBorderRotate 3s linear infinite; z-index: -1; filter: blur(8px); opacity: 0.6; } @keyframes royalBorderRotate { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes royalBorderGlow { 0%, 100% { border-color: #ffd700; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(212, 175, 55, 0.4); } 33% { border-color: #fff8dc; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 255, 255, 0.8), 0 0 90px rgba(255, 215, 0, 0.5); } 66% { border-color: #c084fc; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 50px rgba(168, 85, 247, 0.8), 0 0 100px rgba(147, 51, 234, 0.5); } } .cosmetic-bg-royal { background: radial-gradient(ellipse at 50% 10%, rgba(255, 215, 0, 0.25) 0%, transparent 40%), radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 25%), radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 25%), radial-gradient(ellipse at 30% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 35%), radial-gradient(ellipse at 70% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 35%), radial-gradient(ellipse at 50% 90%, rgba(147, 51, 234, 0.2) 0%, transparent 40%), linear-gradient(160deg, #581c87 0%, #4c1d95 20%, #2e1065 50%, #1a0a3e 80%, #0f051f 100%) !important; animation: royalBgShimmer 3s ease-in-out infinite; position: relative; } .cosmetic-bg-royal::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.03) 0%, transparent 30%), radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.03) 0%, transparent 30%); animation: royalBgStars 5s ease-in-out infinite alternate; pointer-events: none; } @keyframes royalBgStars { 0% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes royalBgShimmer { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.1) saturate(1.1); } } /* Royal Casino Preview Classes */ .preview-spin-royal { background: linear-gradient(180deg, #fff8dc 0%, #ffd700 20%, #d4af37 40%, #6b21a8 70%, #4c1d95 100%); box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 35px rgba(147, 51, 234, 0.5); border: 2px solid #ffd700; animation: royalPreviewPulse 1.5s ease-in-out infinite; position: relative; overflow: hidden; } .preview-spin-royal::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); animation: royalPreviewShine 1.5s ease-in-out infinite; } @keyframes royalPreviewShine { 0% { transform: translateX(-100%) rotate(45deg); } 50%, 100% { transform: translateX(100%) rotate(45deg); } } @keyframes royalPreviewPulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 35px rgba(147, 51, 234, 0.5); border-color: #ffd700; } 50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.9), 0 0 45px rgba(255, 215, 0, 0.6); border-color: #c084fc; } } .preview-border-royal { background: linear-gradient(180deg, #ffd700 0%, #4c1d95 50%, #2e1065 100%); border: 2px solid #ffd700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 25px rgba(147, 51, 234, 0.4); animation: royalPreviewBorderPulse 2s ease-in-out infinite; } @keyframes royalPreviewBorderPulse { 0%, 100% { border-color: #ffd700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); } 50% { border-color: #c084fc; box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); } } .preview-bg-royal { background: linear-gradient(180deg, #ffd700 0%, #581c87 30%, #2e1065 100%); box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.4); animation: royalPreviewBgPulse 3s ease-in-out infinite; } @keyframes royalPreviewBgPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } /* ========== CHRISTMAS SHOP THEME ========== */ .shop-christmas .modal-content { background: linear-gradient(180deg, #1a472a 0%, #0d2818 50%, #0a1f14 100%); border: 3px solid #c41e3a; box-shadow: 0 0 30px rgba(196, 30, 58, 0.4), 0 0 60px rgba(0, 100, 0, 0.3), inset 0 0 50px rgba(255, 215, 0, 0.05); position: relative; overflow: hidden; } .shop-christmas .modal-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, #c41e3a 0px, #c41e3a 20px, #fff 20px, #fff 40px, #228b22 40px, #228b22 60px); z-index: 10; } .shop-christmas .shop-header { border-bottom-color: #c41e3a; } .shop-christmas .shop-title { color: #ff6b6b; text-shadow: 0 0 10px rgba(255, 107, 107, 0.5); } .shop-christmas .shop-title::before { content: '🎄 '; } .shop-christmas .shop-title::after { content: ' 🎄'; } .christmas-banner { background: linear-gradient(90deg, #c41e3a, #8b0000, #c41e3a); color: #fff; text-align: center; padding: 8px 15px; font-size: 0.85rem; font-weight: bold; letter-spacing: 1px; border-radius: 5px; margin-bottom: 10px; animation: christmasPulse 2s ease-in-out infinite; box-shadow: 0 0 15px rgba(196, 30, 58, 0.5); } .christmas-banner::before { content: '🎅 '; } .christmas-banner::after { content: ' 🎁'; } @keyframes christmasPulse { 0%, 100% { box-shadow: 0 0 15px rgba(196, 30, 58, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 25px rgba(196, 30, 58, 0.8), 0 0 35px rgba(0, 128, 0, 0.4); transform: scale(1.02); } } .shop-christmas .shop-item { background: rgba(0, 50, 25, 0.5); border-color: #2d5a3d; } .shop-christmas .shop-item:hover { background: rgba(0, 80, 40, 0.6); border-color: #3d7a4d; } .shop-christmas .shop-fee-notice { background: rgba(139, 0, 0, 0.2); border-color: #c41e3a; } .shop-christmas #shop-exit-btn { background: linear-gradient(to bottom, #c41e3a, #8b0000); border-color: #ff6b6b; } .shop-christmas #shop-exit-btn:hover { background: linear-gradient(to bottom, #d42e4a, #9b1010); } .shop-christmas .shop-buy-btn { background: linear-gradient(to bottom, #228b22, #166016); border-color: #32cd32; } .shop-christmas .shop-buy-btn:hover { background: linear-gradient(to bottom, #32a532, #207020); } .shop-christmas #shop-reroll-btn, .shop-christmas #shop-view-reels-btn, .shop-christmas #shop-loan-btn { background: linear-gradient(to bottom, #2d5a3d, #1a3a28); border-color: #3d7a4d; } .shop-christmas #shop-reroll-btn:hover, .shop-christmas #shop-view-reels-btn:hover, .shop-christmas #shop-loan-btn:hover { background: linear-gradient(to bottom, #3d7a4d, #2d5a3d); } .shop-christmas .shop-items-container::-webkit-scrollbar-thumb { background: #c41e3a; } .shop-christmas .shop-items-container::-webkit-scrollbar-track { background: #0d2818; } .snowflakes-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 5; } .snowflake { position: absolute; top: -20px; color: #fff; font-size: 1rem; opacity: 0.8; animation: snowfall linear infinite; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } .snowflake:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 0.8rem; } .snowflake:nth-child(2) { left: 15%; animation-duration: 12s; animation-delay: 1s; font-size: 1.2rem; } .snowflake:nth-child(3) { left: 25%; animation-duration: 10s; animation-delay: 2s; font-size: 0.9rem; } .snowflake:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 0.5s; font-size: 1rem; } .snowflake:nth-child(5) { left: 45%; animation-duration: 9s; animation-delay: 3s; font-size: 1.1rem; } .snowflake:nth-child(6) { left: 55%; animation-duration: 11s; animation-delay: 1.5s; font-size: 0.85rem; } .snowflake:nth-child(7) { left: 65%; animation-duration: 13s; animation-delay: 2.5s; font-size: 1.15rem; } .snowflake:nth-child(8) { left: 75%; animation-duration: 10s; animation-delay: 0.8s; font-size: 0.95rem; } .snowflake:nth-child(9) { left: 85%; animation-duration: 15s; animation-delay: 4s; font-size: 1.05rem; } .snowflake:nth-child(10) { left: 95%; animation-duration: 8s; animation-delay: 1.2s; font-size: 0.9rem; } @keyframes snowfall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { transform: translateY(500px) rotate(360deg); opacity: 0; } } .christmas-lights { position: absolute; top: 8px; left: 0; right: 0; height: 30px; display: flex; justify-content: space-around; align-items: flex-start; z-index: 11; pointer-events: none; } .christmas-light { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: twinkle 1.5s ease-in-out infinite; } .christmas-light:nth-child(odd) { background: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; animation-delay: 0s; } .christmas-light:nth-child(even) { background: #00ff00; box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; animation-delay: 0.75s; } .christmas-light:nth-child(3n) { background: #ffd700; box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; animation-delay: 0.5s; } .christmas-light:nth-child(4n) { background: #00bfff; box-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff; animation-delay: 0.25s; } @keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } } /* Christmas Unlock Banner */ .christmas-unlock-banner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10000; opacity: 0; transform: scale(0.9); transition: all 0.5s ease; padding: 20px; } .christmas-unlock-banner.active { opacity: 1; transform: scale(1); } .christmas-unlock-content { background: linear-gradient(180deg, #1a472a 0%, #0d2818 100%); border: 4px solid #c41e3a; border-radius: 20px; padding: 40px; text-align: center; box-shadow: 0 0 50px rgba(196, 30, 58, 0.5), 0 0 100px rgba(0, 100, 0, 0.3); max-width: 400px; animation: christmasGlow 2s ease-in-out infinite; } @keyframes christmasGlow { 0%, 100% { box-shadow: 0 0 50px rgba(196, 30, 58, 0.5), 0 0 100px rgba(0, 100, 0, 0.3); } 50% { box-shadow: 0 0 70px rgba(196, 30, 58, 0.7), 0 0 120px rgba(0, 128, 0, 0.5); } } .christmas-unlock-icon { font-size: 5rem; margin-bottom: 20px; animation: bounce 1s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .christmas-unlock-title { font-family: 'Cinzel', serif; font-size: 1.8rem; color: #ff6b6b; text-shadow: 0 0 20px rgba(255, 107, 107, 0.5); margin-bottom: 10px; } .christmas-unlock-desc { color: #fff; font-size: 1rem; margin-bottom: 15px; } .christmas-unlock-items { color: #4ade80; font-weight: bold; font-size: 0.95rem; padding: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid #228b22; } .christmas-unlock-btn { margin-top: 25px; background: linear-gradient(to bottom, #c41e3a, #8b0000); color: #fff; border: 2px solid #ff6b6b; padding: 15px 50px; font-size: 1.2rem; font-weight: bold; font-family: 'Cinzel', serif; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 0 #5c0000, 0 10px 20px rgba(0, 0, 0, 0.5); } .christmas-unlock-btn:hover { background: linear-gradient(to bottom, #d42e4a, #9b1010); transform: translateY(-2px); } .christmas-unlock-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #5c0000; } /* Christmas Cosmetics */ .cosmetic-spin-christmas { background: repeating-linear-gradient( 45deg, #c41e3a, #c41e3a 8px, #fff 8px, #fff 16px ) !important; border: 3px solid #87ceeb !important; box-shadow: 0 0 20px rgba(135, 206, 235, 0.6), 0 0 30px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3) !important; animation: christmasSpinPulse 2s ease-in-out infinite !important; position: relative; color: #228B22 !important; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 255, 255, 0.8); } .cosmetic-spin-christmas::before { content: '❄'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; opacity: 0.15; pointer-events: none; } @keyframes christmasSpinPulse { 0%, 100% { box-shadow: 0 0 20px rgba(135, 206, 235, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); border-color: #87ceeb; } 50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 40px rgba(135, 206, 235, 0.6); border-color: #b0e0e6; } } .cosmetic-border-christmas { background: repeating-linear-gradient( 45deg, #c41e3a, #c41e3a 10px, #fff 10px, #fff 20px ) !important; border: 3px solid #228b22 !important; box-shadow: 0 0 25px rgba(196, 30, 58, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2) !important; } .cosmetic-bg-christmas { background: linear-gradient(180deg, #0a0e1a 0%, #0d1424 20%, #101a2e 40%, #0d1424 60%, #0a0e1a 100% ) !important; position: relative; overflow: hidden; } @keyframes starTwinkle { 0% { opacity: 0.6; } 100% { opacity: 1; } } /* Background stars for Christmas cosmetic */ .bg-stars-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } .bg-star { position: absolute; border-radius: 50%; animation: starTwinkle 4s ease-in-out infinite alternate; will-change: opacity; } /* Ensure key game elements stay above background stars */ .cosmetic-bg-christmas .stats-bar, .cosmetic-bg-christmas .message-display, .cosmetic-bg-christmas .control-area, .cosmetic-bg-christmas .log-area, .cosmetic-bg-christmas .bet-select-row, .cosmetic-bg-christmas .action-btn, .cosmetic-bg-christmas .vip-monitor, .cosmetic-bg-christmas .mobile-stats-row, .cosmetic-bg-christmas .ticker-container, .cosmetic-bg-christmas .news-ticker { position: relative; z-index: 10; } .cosmetic-bg-christmas #menu-btn, .cosmetic-bg-christmas .persistent-coins, .cosmetic-bg-christmas .mobile-top-bar { z-index: 10; } /* Background snowflakes for Christmas cosmetic */ .bg-snowflakes-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; } .bg-snowflake { position: absolute; top: -30px; color: #fff; animation: bgSnowfall linear infinite; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); will-change: transform, opacity; transform: translateZ(0); } /* Pause stars during spinning for performance (snowflakes keep moving) */ .spinning-active .bg-star { animation-play-state: paused !important; } @keyframes bgSnowfall { 0% { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; } 5% { opacity: 0.6; } 50% { transform: translateY(50vh) translateX(20px) rotate(180deg); } 95% { opacity: 0.4; } 100% { transform: translateY(100vh) translateX(-10px) rotate(360deg); opacity: 0; } } /* Snow pile at bottom */ .snow-pile { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0.6) 100% ); pointer-events: none; z-index: 1; } .snow-pile::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 15px; background: radial-gradient(ellipse 80px 25px at 10% 100%, rgba(255, 255, 255, 0.7) 0%, transparent 70%), radial-gradient(ellipse 120px 30px at 30% 100%, rgba(255, 255, 255, 0.6) 0%, transparent 70%), radial-gradient(ellipse 100px 28px at 55% 100%, rgba(255, 255, 255, 0.65) 0%, transparent 70%), radial-gradient(ellipse 90px 22px at 75% 100%, rgba(255, 255, 255, 0.55) 0%, transparent 70%), radial-gradient(ellipse 110px 26px at 95% 100%, rgba(255, 255, 255, 0.6) 0%, transparent 70%); } .snow-pile::after { content: ''; position: absolute; bottom: 8px; left: 0; right: 0; height: 8px; background: radial-gradient(ellipse 60px 15px at 20% 100%, rgba(255, 255, 255, 0.5) 0%, transparent 70%), radial-gradient(ellipse 70px 18px at 45% 100%, rgba(255, 255, 255, 0.45) 0%, transparent 70%), radial-gradient(ellipse 50px 12px at 70% 100%, rgba(255, 255, 255, 0.4) 0%, transparent 70%), radial-gradient(ellipse 80px 20px at 90% 100%, rgba(255, 255, 255, 0.5) 0%, transparent 70%); } /* LED Christmas variant */ .led-christmas { border-color: #87ceeb; background: linear-gradient(180deg, #1a2a3a 0%, #0d1a28 100%); } .led-christmas.active { background: repeating-linear-gradient(90deg, #c41e3a 0px, #c41e3a 8px, #fff 8px, #fff 16px); border-color: #87ceeb; box-shadow: 0 0 15px rgba(135, 206, 235, 0.8), 0 0 25px rgba(255, 255, 255, 0.5); } /* LED Derby/Horserace variant */ .led-horserace { border-color: #228B22; background: linear-gradient(180deg, #1a3d1a 0%, #2d5a27 50%, #1a3d1a 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(34, 139, 34, 0.4); } .led-horserace.active { background: linear-gradient(180deg, #228B22 0%, #32CD32 50%, #228B22 100%); border-color: #32CD32; box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(50, 205, 50, 0.8); animation: led-horserace-pulse 0.6s ease-in-out infinite; } @keyframes led-horserace-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(50, 205, 50, 0.8); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 25px rgba(34, 139, 34, 1), 0 0 35px rgba(255, 215, 0, 0.5); } } /* Preview variants for Royal Shoppe */ .preview-spin-christmas { background: repeating-linear-gradient(45deg, #c41e3a, #c41e3a 4px, #fff 4px, #fff 8px); border: 2px solid #87ceeb; box-shadow: 0 0 15px rgba(135, 206, 235, 0.6); } .preview-border-christmas { background: repeating-linear-gradient(45deg, #c41e3a, #c41e3a 5px, #fff 5px, #fff 10px); border: 2px solid #87ceeb; } .preview-bg-christmas { background: linear-gradient(180deg, #0a0e1a 0%, #0d1424 50%, #0a0e1a 100%); box-shadow: inset 0 0 20px rgba(135, 206, 235, 0.1); position: relative; } .preview-bg-christmas::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(1.5px 1.5px at 15% 15%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), radial-gradient(1px 1px at 35% 25%, rgba(255, 255, 255, 0.7) 50%, transparent 50%), radial-gradient(1px 1px at 55% 10%, rgba(200, 220, 255, 0.8) 50%, transparent 50%), radial-gradient(1px 1px at 75% 30%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 85% 15%, rgba(255, 255, 200, 0.9) 50%, transparent 50%), radial-gradient(1px 1px at 25% 50%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), radial-gradient(1px 1px at 50% 45%, rgba(200, 220, 255, 0.7) 50%, transparent 50%), radial-gradient(1px 1px at 70% 55%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1px 1px at 20% 75%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 45% 70%, rgba(255, 255, 200, 0.8) 50%, transparent 50%), radial-gradient(1px 1px at 65% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(1px 1px at 90% 65%, rgba(200, 220, 255, 0.7) 50%, transparent 50%); animation: starTwinkle 4s ease-in-out infinite alternate; } .preview-bg-christmas::after { content: '❄'; position: absolute; bottom: 2px; right: 4px; font-size: 0.7rem; opacity: 0.8; } /* Sound Pack Preview Styles */ .preview-sound-default { background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); position: relative; } .preview-sound-default::after { content: '🎵'; position: absolute; font-size: 1.2rem; } .preview-sound-retro { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); position: relative; } .preview-sound-retro::after { content: '👾'; position: absolute; font-size: 1.2rem; } .preview-sound-elegant { background: linear-gradient(135deg, #fef08a 0%, #ca8a04 100%); position: relative; } .preview-sound-elegant::after { content: '🎹'; position: absolute; font-size: 1.2rem; } .preview-sound-synthwave { background: linear-gradient(135deg, #ec4899 0%, #7c3aed 100%); position: relative; } .preview-sound-synthwave::after { content: '🌆'; position: absolute; font-size: 1.2rem; } .preview-sound-minimal { background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%); position: relative; } .preview-sound-minimal::after { content: '🔇'; position: absolute; font-size: 1.2rem; } .preview-sound-christmas { background: repeating-linear-gradient(45deg, #c41e3a, #c41e3a 4px, #fff 4px, #fff 8px); border: 2px solid #228b22; position: relative; } .preview-sound-christmas::after { content: '🔔'; position: absolute; font-size: 1.2rem; } /* Derby Champion Previews */ .preview-spin-horserace { background: repeating-linear-gradient(90deg, #8B4513 0px, #A0522D 2px, #8B4513 4px), linear-gradient(180deg, #CD853F 0%, #8B4513 40%, #654321 80%, #3d2817 100%); background-blend-mode: overlay; border: 2px solid #DEB887; box-shadow: 0 0 12px rgba(139, 69, 19, 0.6); position: relative; overflow: hidden; } .preview-spin-horserace::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, #fff 0px, #fff 4px, #8B4513 4px, #8B4513 8px); } .preview-spin-horserace::after { content: '🏇'; position: absolute; font-size: 1.4rem; animation: previewHorseRun 2s linear infinite; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); } @keyframes previewHorseRun { 0% { left: -20px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% + 20px); opacity: 0; } } .preview-border-horserace { background: repeating-linear-gradient(90deg, transparent 0px, transparent 6px, #8B0000 6px, #8B0000 8px), linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); border: 3px solid #c41e3a; box-shadow: 0 0 10px rgba(196, 30, 58, 0.4), inset 0 0 15px rgba(0,0,0,0.5); position: relative; overflow: hidden; } .preview-border-horserace::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 6px; background: linear-gradient(180deg, #d4d4d4 0%, #a0a0a0 50%, #808080 100%); border-bottom: 1px solid #666; } .preview-bg-horserace { background: repeating-linear-gradient(90deg, rgba(50, 160, 50, 0.5) 0px, rgba(50, 160, 50, 0.5) 8px, rgba(0, 60, 0, 0.6) 8px, rgba(0, 60, 0, 0.6) 16px), linear-gradient(180deg, #0a1f0a 0%, #1a3f1a 50%, #0a1f0a 100%); border: 2px solid #228B22; position: relative; } .preview-sound-horserace { background: linear-gradient(135deg, #CD853F 0%, #8B4513 50%, #654321 100%); border: 2px solid #DEB887; position: relative; } .preview-sound-horserace::after { content: '📯'; position: absolute; font-size: 1.2rem; } /* Ruby Previews (Debt Machine Unlock) */ .preview-spin-ruby { background: linear-gradient(180deg, #dc2626 0%, #991b1b 40%, #7f1d1d 80%, #450a0a 100%); border: 2px solid #ef4444; box-shadow: 0 0 15px rgba(220, 38, 38, 0.6), inset 0 0 10px rgba(0,0,0,0.3); position: relative; overflow: hidden; } .preview-spin-ruby::before { content: ''; position: absolute; top: 0; left: -50%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: previewRubyShine 2s ease-in-out infinite; } .preview-spin-ruby::after { content: '❤️'; position: absolute; font-size: 1.4rem; filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.8)); } @keyframes previewRubyShine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .preview-border-ruby { background: linear-gradient(180deg, #1a0505 0%, #2d0a0a 50%, #1a0505 100%); border: 3px solid #dc2626; box-shadow: 0 0 12px rgba(220, 38, 38, 0.5), inset 0 0 20px rgba(127, 29, 29, 0.3); position: relative; } .preview-border-ruby::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: inherit; } .preview-bg-ruby { background: radial-gradient(ellipse at center, rgba(220, 38, 38, 0.2) 0%, transparent 70%), linear-gradient(180deg, #1a0505 0%, #2d0a0a 30%, #450a0a 70%, #1a0505 100%); border: 2px solid #991b1b; position: relative; } /* Debt Free Previews (Debt Mode Victory) */ .preview-spin-debtfree { background: linear-gradient(180deg, #a5f3fc 0%, #22d3ee 30%, #06b6d4 60%, #0891b2 100%); border: 2px solid #67e8f9; box-shadow: 0 0 20px rgba(34, 211, 238, 0.6), inset 0 0 15px rgba(255,255,255,0.3); position: relative; overflow: hidden; } .preview-spin-debtfree::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.3), transparent); animation: previewDiamondSpin 4s linear infinite; } .preview-spin-debtfree::after { content: '💎'; position: absolute; font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 1)); animation: previewDiamondPulse 1.5s ease-in-out infinite; } @keyframes previewDiamondSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes previewDiamondPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .preview-border-debtfree { background: linear-gradient(180deg, #083344 0%, #0c4a6e 50%, #083344 100%); border: 3px solid #22d3ee; box-shadow: 0 0 15px rgba(34, 211, 238, 0.5), inset 0 0 20px rgba(6, 182, 212, 0.2); position: relative; } .preview-border-debtfree::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: radial-gradient(ellipse, rgba(165, 243, 252, 0.3) 0%, transparent 70%); } .preview-bg-debtfree { background: radial-gradient(ellipse at 30% 30%, rgba(165, 243, 252, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(34, 211, 238, 0.1) 0%, transparent 50%), linear-gradient(180deg, #042f2e 0%, #083344 30%, #0c4a6e 70%, #042f2e 100%); border: 2px solid #0891b2; position: relative; } .preview-sound-debtfree { background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #0891b2 100%); border: 2px solid #a5f3fc; position: relative; } .preview-sound-debtfree::after { content: '💎'; position: absolute; font-size: 1.2rem; } /* Chaos Previews (Chaos Deal Complete) */ .preview-spin-chaos { background: linear-gradient(135deg, #0a0015 0%, #1a0020 50%, #0a0015 100%); border: 2px solid #ff0040; box-shadow: 0 0 8px rgba(255, 0, 64, 0.5), inset 0 0 6px rgba(0, 255, 204, 0.1); position: relative; } .preview-spin-chaos::after { content: '🔀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; animation: chaosGlitch 0.8s steps(4) infinite; } .preview-border-chaos { background: linear-gradient(135deg, #1a0020 0%, #0a0015 50%, #1a0020 100%); border: 2px solid #ff0040; box-shadow: 0 0 8px rgba(255, 0, 64, 0.4); position: relative; } .preview-border-chaos::before { content: ''; position: absolute; inset: -1px; border: 1px solid transparent; border-image: linear-gradient(135deg, #ff0040, #00ffcc, #ff0040, #00ffcc) 1; animation: chaosShimmer 1.5s steps(6) infinite; pointer-events: none; } .preview-bg-chaos { background: radial-gradient(circle at 30% 30%, rgba(255, 0, 64, 0.25) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(0, 255, 204, 0.2) 0%, transparent 50%), linear-gradient(180deg, #100020 0%, #1a0030 50%, #100020 100%); border: 2px solid #ff0040; position: relative; } /* Shadowmaster Previews (Boss Rush Complete) */ .preview-spin-shadowmaster { background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 3px, #1a1030 3px, #1a1030 6px ), repeating-linear-gradient(-45deg, transparent 0px, transparent 3px, rgba(139, 92, 246, 0.2) 3px, rgba(139, 92, 246, 0.2) 6px ); background-blend-mode: overlay, normal; border: 2px solid #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 0 10px rgba(0,0,0,0.6); position: relative; overflow: hidden; } .preview-spin-shadowmaster::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(139, 92, 246, 0.2) 0%, transparent 40%, transparent 60%, rgba(139, 92, 246, 0.15) 100% ); } .preview-spin-shadowmaster::after { content: ''; display: none; } .preview-border-shadowmaster { background: repeating-linear-gradient(45deg, transparent 0px, transparent 3px, rgba(139, 92, 246, 0.1) 3px, rgba(139, 92, 246, 0.1) 6px), linear-gradient(180deg, #0a0510 0%, #1a1025 50%, #0a0510 100%); border: 3px solid #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(45, 27, 78, 0.5); position: relative; } .preview-border-shadowmaster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(139, 92, 246, 0.2) 0%, transparent 20%, transparent 80%, rgba(139, 92, 246, 0.2) 100%); } .preview-bg-shadowmaster { background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 4px, #1a1030 4px, #1a1030 8px ), repeating-linear-gradient(-45deg, transparent 0px, transparent 4px, rgba(139, 92, 246, 0.15) 4px, rgba(139, 92, 246, 0.15) 8px ); background-blend-mode: overlay, normal; border: 2px solid #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); position: relative; } .preview-sound-shadowmaster { background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 3px, #1a1030 3px, #1a1030 6px ), repeating-linear-gradient(-45deg, transparent 0px, transparent 3px, rgba(139, 92, 246, 0.2) 3px, rgba(139, 92, 246, 0.2) 6px ); background-blend-mode: overlay, normal; border: 2px solid #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); position: relative; } .preview-sound-shadowmaster::after { content: '🎭'; position: absolute; font-size: 1.2rem; filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.7)); } .preview-sound-imperial_pulse { background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.3) 0%, transparent 60%), linear-gradient(135deg, #1a1a2e 0%, #2d2a4a 30%, #4a3f6a 50%, #2d2a4a 70%, #1a1a2e 100%); border: 2px solid #d4af37; box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); position: relative; } .preview-sound-imperial_pulse::after { content: '👑'; position: absolute; font-size: 1.2rem; } .preview-sound-ethereal_tide { background: radial-gradient(ellipse at 30% 70%, rgba(34, 211, 238, 0.4) 0%, transparent 50%), linear-gradient(135deg, #0c4a6e 0%, #164e63 30%, #0891b2 50%, #164e63 70%, #0c4a6e 100%); border: 2px solid #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); position: relative; animation: tidalPulse 3s ease-in-out infinite; } .preview-sound-ethereal_tide::after { content: '🌊'; position: absolute; font-size: 1.2rem; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.6)); } @keyframes tidalPulse { 0%, 100% { box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); } 50% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.7); } } .preview-sound-chaos { background: linear-gradient(135deg, #0a0015 0%, #1a0020 50%, #0a0015 100%); border: 2px solid #ff0040; box-shadow: 0 0 10px rgba(255, 0, 64, 0.5), inset 0 0 8px rgba(0, 255, 204, 0.1); position: relative; animation: chaosPreviewPulse 1s steps(4) infinite; } .preview-sound-chaos::after { content: '🔀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; filter: drop-shadow(0 0 6px rgba(255, 0, 64, 0.8)); animation: chaosGlitch 0.8s steps(4) infinite; } @keyframes chaosPreviewPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 64, 0.5); } 50% { box-shadow: 0 0 18px rgba(255, 0, 64, 0.8), 0 0 8px rgba(0, 255, 204, 0.3); } } /* Purchase Confirmation Modal */ .purchase-confirm-content { max-width: 320px; text-align: center; padding: 2rem; } .confirm-title { font-family: var(--title-font); color: var(--gold-primary); font-size: 1.5rem; margin-bottom: 1.5rem; } .confirm-preview { width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .preview-companion { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(100, 50, 150, 0.3) 100%); border: 2px solid var(--gold-primary); border-radius: 50%; } .companion-confirm-icon { font-size: 48px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); } .companion-confirm-img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); } .confirm-item-name { font-size: 1.2rem; color: #fff; margin-bottom: 0.5rem; font-weight: bold; } .confirm-price { font-size: 1.1rem; color: var(--gold-primary); margin-bottom: 1.5rem; } .confirm-buttons { display: flex; gap: 1rem; justify-content: center; } .confirm-btn { padding: 0.9rem 2rem; border-radius: 10px; font-family: var(--title-font); font-size: 1.1rem; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .confirm-yes { background: linear-gradient(180deg, #ffd700 0%, #d4af37 50%, #b8860b 100%); color: #1a1a2e; border: 3px solid #fff5cc; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .confirm-yes:hover { transform: scale(1.08); box-shadow: 0 6px 25px rgba(212, 175, 55, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.2); background: linear-gradient(180deg, #ffe14d 0%, #d4af37 50%, #c9a227 100%); } .confirm-yes:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.2); } .confirm-no { background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 50%, #2a2a3a 100%); color: #ccc; border: 2px solid #666; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .confirm-no:hover { background: linear-gradient(180deg, #5a3a3a 0%, #4a2a2a 50%, #3a1a1a 100%); border-color: #aa5555; color: #ffaaaa; } .sound-preview-content { max-width: 340px; text-align: center; padding: 2rem; } .sound-preview-icon { font-size: 64px; margin-bottom: 1rem; filter: drop-shadow(0 4px 12px rgba(100, 200, 255, 0.5)); animation: soundIconPulse 2s ease-in-out infinite; } @keyframes soundIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .sound-preview-desc { font-size: 0.95rem; color: #aaa; margin-bottom: 1rem; font-style: italic; } .sound-preview-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .preview-btn { background: linear-gradient(180deg, #4a7dff 0%, #3366cc 50%, #2255aa 100%); color: #fff; border: 2px solid #88aaff; box-shadow: 0 4px 15px rgba(68, 136, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .preview-btn:hover { transform: scale(1.08); background: linear-gradient(180deg, #5a8dff 0%, #4477dd 50%, #3366bb 100%); box-shadow: 0 6px 20px rgba(68, 136, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .preview-btn:active { transform: scale(0.98); } .preview-btn.playing { animation: playingPulse 0.6s ease-in-out infinite; } @keyframes playingPulse { 0%, 100% { box-shadow: 0 0 10px rgba(68, 136, 255, 0.6); } 50% { box-shadow: 0 0 25px rgba(68, 200, 255, 0.9); } } /* Sound pack preview state */ .cosmetic-option.previewing { animation: previewPulse 0.5s ease-out; box-shadow: 0 0 20px rgba(100, 200, 255, 0.6); } .cosmetic-option.previewing::after { content: 'Click to buy'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: #88ccff; white-space: nowrap; } @keyframes previewPulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Mobile performance optimizations for Christmas cosmetics */ :where(html.layout-mobile) .cosmetic-spin-christmas { animation: none !important; box-shadow: 0 0 15px rgba(135, 206, 235, 0.4) !important; } :where(html.layout-mobile) .cosmetic-border-christmas { box-shadow: 0 0 15px rgba(196, 30, 58, 0.3) !important; } :where(html.layout-mobile) .bg-snowflake { text-shadow: none !important; } :where(html.layout-mobile) .bg-star { animation-duration: 6s !important; } /* Reduced motion support for accessibility and performance */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .bg-star, .bg-snowflake, .money-particle, .jackpot-particle, .glass-shard { animation: none !important; } .reel-led, .action-btn, .cosmetic-spin-christmas { animation: none !important; } } /* ======================================== SHADOWMASTER THEME - Nightmare Cosmetics ======================================== */ /* Shadowmaster Spin Button - Carbon Fiber/Kevlar Pattern */ .cosmetic-spin-shadowmaster { background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 4px, #1a1030 4px, #1a1030 8px ), repeating-linear-gradient(-45deg, transparent 0px, transparent 4px, rgba(139, 92, 246, 0.2) 4px, rgba(139, 92, 246, 0.2) 8px ) !important; background-blend-mode: overlay, normal; border: 3px solid #8b5cf6 !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), 0 0 30px rgba(139, 92, 246, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(139, 92, 246, 0.3) !important; color: #e0b0ff !important; text-shadow: 0 0 8px rgba(139, 92, 246, 0.8), 0 0 16px rgba(139, 92, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.9); animation: shadowmasterPulse 3s ease-in-out infinite !important; position: relative; overflow: hidden; } .cosmetic-spin-shadowmaster::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(139, 92, 246, 0.2) 0%, transparent 30%, transparent 70%, rgba(139, 92, 246, 0.15) 100% ); pointer-events: none; } .cosmetic-spin-shadowmaster::after { content: ''; display: none; } .cosmetic-spin-shadowmaster:hover:not(:disabled) { box-shadow: 0 0 25px rgba(139, 92, 246, 0.7), 0 0 50px rgba(139, 92, 246, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.7) !important; border-color: #a78bfa !important; } @keyframes shadowmasterPulse { 0%, 100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), 0 0 30px rgba(139, 92, 246, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.7); border-color: #8b5cf6; } 50% { box-shadow: 0 0 25px rgba(139, 92, 246, 0.7), 0 0 45px rgba(75, 0, 130, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.8); border-color: #a78bfa; } } /* Shadowmaster Reel Border - Carbon Fiber/Kevlar Pattern */ .cosmetic-border-shadowmaster { border: 4px solid #8b5cf6 !important; background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 6px, #1a1030 6px, #1a1030 12px ), repeating-linear-gradient(-45deg, transparent 0px, transparent 6px, rgba(139, 92, 246, 0.18) 6px, rgba(139, 92, 246, 0.18) 12px ) !important; background-blend-mode: overlay, normal; box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2), inset 0 0 15px rgba(0, 0, 0, 0.7) !important; position: relative; } .cosmetic-border-shadowmaster::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, transparent 20%, transparent 80%, rgba(139, 92, 246, 0.1) 100% ); pointer-events: none; border-radius: inherit; } /* Shadowmaster Background - Carbon Fiber/Kevlar Pattern (matching reel border) */ .cosmetic-bg-shadowmaster { background: repeating-linear-gradient(45deg, #0a0510 0px, #0a0510 6px, #1a1030 6px, #1a1030 12px ), repeating-linear-gradient(-45deg, #0f0818 0px, #0f0818 6px, #251545 6px, #251545 12px ), #0a0510 !important; background-blend-mode: overlay, normal, normal; position: relative; } .cosmetic-bg-shadowmaster::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(75, 0, 130, 0.12) 0%, transparent 45%); pointer-events: none; z-index: 0; } .cosmetic-bg-shadowmaster::after { display: none; } /* Boss Rush Active State - Additional Ambient Effects */ .boss-rush-active { position: relative; } .boss-rush-active .game-title { color: #e0b0ff !important; text-shadow: 0 0 20px rgba(139, 0, 255, 0.8), 0 0 40px rgba(139, 0, 255, 0.4) !important; } .boss-rush-active .credits-display { border-color: #8b00ff !important; box-shadow: 0 0 20px rgba(139, 0, 255, 0.4) !important; } .boss-rush-active .floor-display { color: #c084fc !important; } /* Hide default rivets when special themes are active */ .cosmetic-bg-shadowmaster.game-container::before, .cosmetic-bg-shadowmaster.game-container::after, .cosmetic-bg-shadowmaster .corner-rivet, .boss-rush-active.game-container::before, .boss-rush-active.game-container::after, .boss-rush-active .corner-rivet, .cosmetic-bg-horserace.game-container::before, .cosmetic-bg-horserace.game-container::after, .cosmetic-bg-horserace .corner-rivet { display: none !important; } /* Mobile optimizations for Shadowmaster */ :where(html.layout-mobile) .cosmetic-spin-shadowmaster { animation-duration: 4s !important; } :where(html.layout-mobile) .cosmetic-spin-shadowmaster::before { animation-duration: 12s; } :where(html.layout-mobile) .cosmetic-border-shadowmaster::before { animation-duration: 10s; } :where(html.layout-mobile) .cosmetic-bg-shadowmaster::before { animation-duration: 90s; } @media (prefers-reduced-motion: reduce) { .cosmetic-spin-shadowmaster, .cosmetic-spin-shadowmaster::before, .cosmetic-border-shadowmaster, .cosmetic-border-shadowmaster::before, .cosmetic-bg-shadowmaster::before, .cosmetic-bg-shadowmaster::after { animation: none !important; } } /* Race Intro Modal */ .race-intro-content { max-width: 420px; padding: 2rem; background: linear-gradient(135deg, #1a3a15 0%, #0f2a0a 50%, #0a1f0a 100%); border: 3px solid #228B22; box-shadow: 0 0 40px rgba(34, 139, 34, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.5); } .race-intro-banner { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 1rem; } .race-intro-horse { font-size: 2.5rem; animation: raceHorseBounce 0.6s ease-in-out infinite alternate; } .race-intro-horse.flip { transform: scaleX(-1); } @keyframes raceHorseBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } } .race-intro-horse.flip { animation: raceHorseBounceFlip 0.6s ease-in-out infinite alternate; } @keyframes raceHorseBounceFlip { 0% { transform: scaleX(-1) translateY(0); } 100% { transform: scaleX(-1) translateY(-5px); } } .race-intro-title { font-family: var(--title-font); font-size: 1.8rem; color: #FFD700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); letter-spacing: 3px; } .race-intro-tagline { text-align: center; margin-bottom: 1.5rem; } .race-intro-tagline p { font-style: italic; color: #aaa; font-size: 0.95rem; } .race-intro-rules { background: rgba(0, 0, 0, 0.4); border: 1px solid #228B22; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .race-intro-rules h3 { text-align: center; color: #FFD700; font-size: 1rem; margin-bottom: 1rem; letter-spacing: 2px; } .race-rule { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0.8rem; } .race-rule:last-child { margin-bottom: 0; } .race-rule-icon { font-size: 1.3rem; flex-shrink: 0; } .race-rule-text { font-size: 0.9rem; color: #ddd; line-height: 1.4; } .race-rule-text strong { color: #FFD700; } .race-intro-tip { background: linear-gradient(135deg, rgba(139, 69, 19, 0.3) 0%, rgba(139, 69, 19, 0.1) 100%); border: 1px solid #8B4513; border-radius: 8px; padding: 0.8rem; margin-bottom: 1.5rem; text-align: center; } .race-intro-tip p { font-size: 0.85rem; color: #DEB887; margin: 0; } .btn-race-start { width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: bold; color: #fff; background: linear-gradient(180deg, #228B22 0%, #1a6b1a 50%, #0f4a0f 100%); border: 2px solid #FFD700; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 0 20px rgba(34, 139, 34, 0.4), 0 4px 0 #0a2f0a; transition: all 0.2s ease; } .btn-race-start:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(34, 139, 34, 0.6), 0 6px 0 #0a2f0a; background: linear-gradient(180deg, #2a9f2a 0%, #1f7f1f 50%, #145014 100%); } .btn-race-start:active { transform: translateY(2px); box-shadow: 0 0 15px rgba(34, 139, 34, 0.4), 0 2px 0 #0a2f0a; } /* Debt Intro Modal */ .debt-intro-content { max-width: 420px; padding: 2rem; background: linear-gradient(135deg, #3a1a1a 0%, #2a0f0f 50%, #1a0a0a 100%); border: 3px solid #8B0000; box-shadow: 0 0 40px rgba(139, 0, 0, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.5); } .debt-intro-banner { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 1rem; } .debt-intro-icon { font-size: 2.5rem; filter: drop-shadow(0 0 10px rgba(139, 0, 0, 0.6)); animation: debtPulse 2s ease-in-out infinite; } @keyframes debtPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .debt-intro-title { font-size: 1.6rem; font-weight: bold; color: #DC143C; text-shadow: 0 0 20px rgba(220, 20, 60, 0.6), 0 0 40px rgba(139, 0, 0, 0.4); letter-spacing: 3px; margin: 0; } .debt-intro-tagline { text-align: center; margin-bottom: 1.5rem; padding: 0.5rem; border-top: 1px solid rgba(139, 0, 0, 0.3); border-bottom: 1px solid rgba(139, 0, 0, 0.3); } .debt-intro-tagline p { color: #CD5C5C; font-style: italic; font-size: 1rem; margin: 0; } .debt-intro-rules { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(139, 0, 0, 0.4); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; } .debt-intro-rules h3 { color: #FFD700; font-size: 1rem; text-align: center; margin: 0 0 1rem 0; letter-spacing: 2px; } .debt-rule { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0.75rem; } .debt-rule:last-child { margin-bottom: 0; } .debt-rule-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; } .debt-rule-text { font-size: 0.85rem; color: #DEB887; margin: 0; } .btn-debt-start { width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: bold; color: #fff; background: linear-gradient(180deg, #8B0000 0%, #6b0000 50%, #4a0000 100%); border: 2px solid #FFD700; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 0 20px rgba(139, 0, 0, 0.4), 0 4px 0 #2a0000; transition: all 0.2s ease; } .btn-debt-start:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(139, 0, 0, 0.6), 0 6px 0 #2a0000; background: linear-gradient(180deg, #a00000 0%, #7f0000 50%, #550000 100%); } .btn-debt-start:active { transform: translateY(2px); box-shadow: 0 0 15px rgba(139, 0, 0, 0.4), 0 2px 0 #2a0000; } /* Debt Collection Modal (Game Over) */ .debt-collection-content { max-width: 400px; padding: 2rem; background: linear-gradient(135deg, #1a0a0a 0%, #0f0505 50%, #050000 100%); border: 3px solid #4a0000; box-shadow: 0 0 60px rgba(100, 0, 0, 0.6), inset 0 0 80px rgba(0, 0, 0, 0.8); animation: collectionPulse 2s ease-in-out infinite; } @keyframes collectionPulse { 0%, 100% { box-shadow: 0 0 60px rgba(100, 0, 0, 0.6), inset 0 0 80px rgba(0, 0, 0, 0.8); } 50% { box-shadow: 0 0 80px rgba(139, 0, 0, 0.8), inset 0 0 80px rgba(0, 0, 0, 0.8); } } .collection-header { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 1rem; } .collection-icon { font-size: 2.5rem; animation: skullShake 0.5s ease-in-out infinite; } @keyframes skullShake { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } .collection-title { font-size: 1.8rem; font-weight: bold; color: #8B0000; text-shadow: 0 0 20px rgba(139, 0, 0, 0.8), 0 0 40px rgba(100, 0, 0, 0.6); letter-spacing: 4px; margin: 0; } .collection-quote { text-align: center; color: #CD5C5C; font-style: italic; font-size: 1.1rem; margin: 1rem 0 1.5rem; padding: 0.5rem; border-top: 1px solid rgba(139, 0, 0, 0.3); border-bottom: 1px solid rgba(139, 0, 0, 0.3); } .collection-stats { display: flex; flex-direction: column; gap: 0.75rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(139, 0, 0, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .collection-stat { display: flex; justify-content: space-between; align-items: center; } .collection-stat .stat-label { color: #888; font-size: 0.9rem; } .collection-stat .stat-value { font-weight: bold; font-size: 1.1rem; color: #FFD700; } .collection-stat .stat-value.debt-owed { color: #DC143C; } .collection-message { text-align: center; color: #8B0000; font-size: 0.9rem; margin: 1rem 0; } .btn-debt-defeat { width: 100%; padding: 1rem; font-size: 1rem; font-weight: bold; color: #888; background: linear-gradient(180deg, #2a1a1a 0%, #1a0f0f 50%, #0f0505 100%); border: 2px solid #4a0000; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s ease; } .btn-debt-defeat:hover { color: #aaa; border-color: #6a0000; background: linear-gradient(180deg, #3a2020 0%, #2a1515 50%, #1a0a0a 100%); } /* Horse Race Bar */ .race-bar-container { width: 100%; max-width: 100%; margin: 0 auto 15px; padding: 10px 15px; box-sizing: border-box; background: linear-gradient(135deg, #2d5a27 0%, #1a3a15 50%, #0f2a0a 100%); border: 2px solid #228B22; border-radius: 10px; box-shadow: 0 0 20px rgba(34, 139, 34, 0.3); } .race-bar-label { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; } .race-flag { font-size: 1.2rem; animation: flagWave 0.5s ease-in-out infinite alternate; } .race-title { font-size: 0.9rem; font-weight: bold; color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); letter-spacing: 2px; } .race-track { position: relative; height: 30px; background: linear-gradient(90deg, #8B4513 0%, #A0522D 50%, #8B4513 100%); border: 2px solid #654321; border-radius: 15px; overflow: hidden; } .race-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #228B22, #32CD32); border-radius: 13px 0 0 13px; transition: width 0.3s ease, background 0.3s ease; } .race-horse-icon { position: absolute; top: 50%; left: -15px; transform: translateY(-50%) scaleX(-1); font-size: 1.8rem; z-index: 2; transition: left 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .race-finish-line { position: absolute; right: 5px; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient( 0deg, #fff 0px, #fff 4px, #000 4px, #000 8px ); } .race-progress-text { text-align: center; margin-top: 8px; font-size: 0.85rem; color: #90EE90; font-weight: bold; } .race-shop-text { text-align: center; margin-top: 4px; font-size: 0.75rem; color: #a0aec0; font-weight: 500; letter-spacing: 0.5px; } @keyframes flagWave { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } /* Debt Bar Styles - Collector's Ledger */ .debt-bar-container { width: 100%; max-width: 500px; margin: 0 auto 15px; padding: 10px 15px; box-sizing: border-box; background: linear-gradient(135deg, #2a1a1a 0%, #1a0a0a 50%, #0f0505 100%); border: 2px solid #8B0000; border-radius: 10px; box-shadow: 0 0 20px rgba(139, 0, 0, 0.4); } .debt-bar-label { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; } .debt-icon { font-size: 1.2rem; animation: debtPulse 2s ease-in-out infinite; } .debt-title { font-size: 0.9rem; font-weight: bold; color: #DC143C; text-shadow: 0 0 10px rgba(220, 20, 60, 0.5); letter-spacing: 2px; } .debt-ledger { position: relative; height: 30px; background: linear-gradient(90deg, #2d1f1f 0%, #3d2a2a 50%, #2d1f1f 100%); border: 2px solid #4a3030; border-radius: 15px; overflow: hidden; } .debt-progress-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #8B0000, #DC143C); border-radius: 13px; transition: width 0.5s ease, background 0.5s ease; } .debt-skull-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 1.5rem; z-index: 2; transition: right 0.5s ease; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); } .debt-clear-line { position: absolute; left: 5px; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FFD700 100%); box-shadow: 0 0 10px rgba(255, 215, 0, 0.8); border-radius: 2px; } .debt-progress-text { text-align: center; margin-top: 8px; font-size: 0.85rem; color: #ff6b6b; font-weight: bold; } .debt-shop-text { text-align: center; margin-top: 4px; font-size: 0.75rem; color: #a0aec0; font-weight: 500; letter-spacing: 0.5px; } .debt-progress-text.cleared { color: #4ade80; animation: debtCleared 0.5s ease-out; } @keyframes debtCleared { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @media (max-width: 600px) { .debt-bar-container { max-width: 95%; padding: 8px 12px; } .debt-title { font-size: 0.75rem; } .debt-ledger { height: 25px; } .debt-skull-icon { font-size: 1.2rem; } } /* Horse Race Cosmetics - Dirt Track Theme */ .cosmetic-spin-horserace { background: repeating-linear-gradient( 90deg, #8B4513 0px, #A0522D 2px, #8B4513 4px ), linear-gradient(180deg, #CD853F 0%, #8B4513 30%, #654321 70%, #3d2817 100%) !important; background-blend-mode: overlay !important; border: 4px solid #DEB887 !important; box-shadow: 0 0 15px rgba(139, 69, 19, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important; position: relative; overflow: hidden; } .cosmetic-spin-horserace::before { content: '🏇'; position: absolute; font-size: 4rem; top: 50%; left: -60px; transform: translateY(-50%) scaleX(-1); animation: horseRun 3.5s ease-in-out infinite; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4)); } .cosmetic-spin-horserace::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 80%, rgba(139, 69, 19, 0.3) 0%, transparent 50%), radial-gradient(ellipse at 70% 20%, rgba(210, 180, 140, 0.2) 0%, transparent 40%); pointer-events: none; } @keyframes horseRun { 0% { left: -60px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% + 60px); opacity: 0; } } .cosmetic-border-horserace { border: 6px solid #c41e3a !important; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 18px, #8B0000 18px, #8B0000 22px ), linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important; box-shadow: 0 0 20px rgba(196, 30, 58, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.5), 0 -4px 0 #fff !important; position: relative; } .cosmetic-border-horserace::before { content: ''; position: absolute; top: -10px; left: -6px; right: -6px; height: 14px; background: linear-gradient(180deg, #d4d4d4 0%, #a0a0a0 50%, #808080 100%); border: 2px solid #666; border-radius: 3px 3px 0 0; box-shadow: 0 2px 4px rgba(0,0,0,0.5); } .cosmetic-border-horserace::after { content: "AND THEY'RE OFF!"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: bold; color: #333; letter-spacing: 2px; z-index: 1; } /* Force horserace background in race mode - overrides user selection */ body.race-mode .game-container { background: repeating-linear-gradient( 90deg, rgba(50, 160, 50, 0.25) 0px, rgba(50, 160, 50, 0.25) 50px, rgba(0, 60, 0, 0.35) 50px, rgba(0, 60, 0, 0.35) 100px ), linear-gradient(180deg, #0a1f0a 0%, #0f2f0f 30%, #1a3f1a 50%, #0f2f0f 70%, #0a1f0a 100% ) !important; position: relative; } .cosmetic-bg-horserace { background: repeating-linear-gradient( 90deg, rgba(50, 160, 50, 0.25) 0px, rgba(50, 160, 50, 0.25) 50px, rgba(0, 60, 0, 0.35) 50px, rgba(0, 60, 0, 0.35) 100px ), linear-gradient(180deg, #0a1f0a 0%, #0f2f0f 30%, #1a3f1a 50%, #0f2f0f 70%, #0a1f0a 100% ) !important; position: relative; } .cosmetic-bg-horserace::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(34, 139, 34, 0.2) 0%, transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 30%); pointer-events: none; } /* Shadowmaster Background - Dark Abyssal Theme */ .cosmetic-bg-shadowmaster { background: radial-gradient(ellipse at 50% 30%, rgba(75, 0, 130, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(45, 0, 80, 0.15) 0%, transparent 40%), radial-gradient(ellipse at 70% 80%, rgba(60, 0, 100, 0.15) 0%, transparent 40%), linear-gradient(180deg, #050208 0%, #0a0412 15%, #0f0820 35%, #12091a 50%, #0f0820 65%, #0a0412 85%, #050208 100% ) !important; position: relative; } .cosmetic-bg-shadowmaster::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 4px, rgba(139, 92, 246, 0.02) 4px, rgba(139, 92, 246, 0.02) 5px ); pointer-events: none; -webkit-animation: shadowmasterOverlayPulse 4s ease-in-out infinite; animation: shadowmasterOverlayPulse 4s ease-in-out infinite; } @-webkit-keyframes shadowmasterOverlayPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes shadowmasterOverlayPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } :where(html.layout-mobile) .race-bar-container { max-width: 95%; padding: 8px 12px; } :where(html.layout-mobile) .race-title { font-size: 0.75rem; } :where(html.layout-mobile) .race-track { height: 25px; } :where(html.layout-mobile) .race-horse-icon { font-size: 1.2rem; } /* Debt Free Cosmetics - Diamond Liberation Theme */ .cosmetic-spin-debtfree { background: linear-gradient(135deg, #1a1a2e 0%, #2d3a4f 50%, #1a1a2e 100%) !important; border: 4px solid #7dd3fc !important; box-shadow: 0 0 20px rgba(125, 211, 252, 0.5), inset 0 0 30px rgba(125, 211, 252, 0.1) !important; position: relative !important; overflow: visible !important; } button#action-btn.cosmetic-spin-debtfree::before, button#action-btn.cosmetic-spin-debtfree::after { content: '💎' !important; position: absolute !important; font-size: 1.4rem !important; top: 50% !important; transform: translateY(-50%) !important; animation: debtfreeGlow 2s ease-in-out infinite !important; filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.8)) !important; z-index: 10 !important; pointer-events: none !important; } button#action-btn.cosmetic-spin-debtfree::before { left: 15px !important; } button#action-btn.cosmetic-spin-debtfree::after { right: 15px !important; } @keyframes debtfreeGlow { 0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.8; } 50% { transform: translateY(-50%) scale(1.1); opacity: 1; } } .cosmetic-border-debtfree { border: 4px solid #7dd3fc !important; box-shadow: 0 0 15px rgba(125, 211, 252, 0.4), inset 0 0 10px rgba(125, 211, 252, 0.1) !important; position: relative; } .cosmetic-border-debtfree::before { content: ''; position: absolute; inset: -2px; border: 2px solid transparent; border-image: linear-gradient(135deg, #7dd3fc, #93c5fd, #60a5fa, #7dd3fc) 1; animation: crystalShimmer 3s linear infinite; pointer-events: none; } @keyframes crystalShimmer { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .cosmetic-bg-debtfree { background: radial-gradient(circle at 20% 30%, rgba(125, 211, 252, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(147, 197, 253, 0.15) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 50%), linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important; position: relative; animation: diamondPulse 4s ease-in-out infinite; } @keyframes diamondPulse { 0%, 100% { background: radial-gradient(circle at 20% 30%, rgba(125, 211, 252, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(147, 197, 253, 0.15) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 50%), linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); } 50% { background: radial-gradient(circle at 20% 30%, rgba(125, 211, 252, 0.25) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(147, 197, 253, 0.25) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.2) 0%, transparent 50%), linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); } } /* Chaos Deal Cosmetics - Glitch Static Theme */ .cosmetic-spin-chaos { background: linear-gradient(135deg, #0a0015 0%, #1a0020 50%, #0a0015 100%) !important; border: 4px solid #ff0040 !important; color: #ff6680 !important; text-shadow: 0 0 8px rgba(255, 0, 64, 0.8), 0 0 20px rgba(255, 0, 64, 0.4) !important; box-shadow: 0 0 20px rgba(255, 0, 64, 0.5), inset 0 0 30px rgba(0, 255, 204, 0.1) !important; position: relative !important; overflow: visible !important; } button#action-btn.cosmetic-spin-chaos::before, button#action-btn.cosmetic-spin-chaos::after { content: '🔀' !important; position: absolute !important; font-size: 1.4rem !important; top: 50% !important; transform: translateY(-50%) !important; animation: chaosGlitch 0.8s steps(4) infinite !important; filter: drop-shadow(0 0 10px rgba(255, 0, 64, 0.8)) !important; z-index: 10 !important; pointer-events: none !important; } button#action-btn.cosmetic-spin-chaos::before { left: 15px !important; } button#action-btn.cosmetic-spin-chaos::after { right: 15px !important; animation-delay: 0.4s !important; } @keyframes chaosGlitch { 0% { transform: translateY(-50%) translateX(0); opacity: 1; } 25% { transform: translateY(-50%) translateX(2px); opacity: 0.8; } 50% { transform: translateY(-50%) translateX(-1px); opacity: 1; } 75% { transform: translateY(-50%) translateX(1px); opacity: 0.9; } 100% { transform: translateY(-50%) translateX(0); opacity: 1; } } .cosmetic-border-chaos { border: 4px solid #ff0040 !important; box-shadow: 0 0 15px rgba(255, 0, 64, 0.4), inset 0 0 10px rgba(0, 255, 204, 0.1) !important; position: relative; } .cosmetic-border-chaos::before { content: ''; position: absolute; inset: -2px; border: 2px solid transparent; border-image: linear-gradient(135deg, #ff0040, #00ffcc, #ff0040, #00ffcc) 1; animation: chaosShimmer 1.5s steps(6) infinite; pointer-events: none; } @keyframes chaosShimmer { 0% { opacity: 0.4; filter: hue-rotate(0deg); } 50% { opacity: 1; filter: hue-rotate(180deg); } 100% { opacity: 0.4; filter: hue-rotate(360deg); } } .cosmetic-bg-chaos { background: radial-gradient(circle at 20% 15%, rgba(255, 0, 64, 0.25) 0%, transparent 35%), radial-gradient(circle at 80% 85%, rgba(0, 255, 204, 0.2) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(255, 0, 64, 0.1) 0%, transparent 45%), radial-gradient(circle at 60% 20%, rgba(0, 255, 204, 0.08) 0%, transparent 30%), linear-gradient(180deg, #100020 0%, #1a0030 30%, #0d0018 60%, #100020 100%) !important; position: relative; } .led-chaos { border-color: #ff0040; background: linear-gradient(180deg, #0a0015 0%, #1a0020 50%, #0a0015 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 0, 64, 0.4); } .led-chaos.active { background: linear-gradient(180deg, #cc0033 0%, #ff0040 50%, #cc0033 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 0, 64, 0.9); animation: led-chaos-pulse 1s steps(4) infinite; } @keyframes led-chaos-pulse { 0%, 100% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 0, 64, 0.7); } 25% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(0, 255, 204, 0.6); } 50% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 0, 64, 1); } 75% { box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.2), 0 0 18px rgba(0, 255, 204, 0.5); } } /* Debt Victory Modal */ .debt-victory-content { background: radial-gradient(ellipse at 50% 0%, rgba(125, 211, 252, 0.15) 0%, transparent 50%), linear-gradient(180deg, #0c1929 0%, #0f172a 30%, #1e293b 50%, #0f172a 70%, #0c1929 100%); border: 2px solid #7dd3fc; box-shadow: 0 0 60px rgba(125, 211, 252, 0.4), inset 0 0 40px rgba(125, 211, 252, 0.1); padding: 25px; text-align: center; max-width: 420px; position: relative; overflow-x: hidden; overflow-y: auto; max-height: 85vh; } .debt-victory-content::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.1), transparent); animation: debtVictoryShine 3s ease-in-out infinite; } @keyframes debtVictoryShine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .debt-victory-header { margin-bottom: 20px; } .collector-defeated { font-size: 4rem; filter: grayscale(1) opacity(0.6); margin-bottom: 10px; animation: collectorFade 2s ease-out forwards; } @keyframes collectorFade { 0% { filter: grayscale(0) opacity(1); transform: scale(1.2); } 100% { filter: grayscale(1) opacity(0.4); transform: scale(1); } } .debt-victory-content .victory-title { color: #7dd3fc; font-family: var(--title-font); font-size: 2rem; margin: 0 0 5px 0; text-shadow: 0 0 30px rgba(125, 211, 252, 0.8); letter-spacing: 3px; } .debt-victory-content .victory-subtitle { color: #94a3b8; font-size: 1rem; font-style: italic; margin: 0; } .debt-victory-narrative { background: rgba(0, 0, 0, 0.3); border-left: 3px solid #475569; padding: 15px; margin: 20px 0; text-align: left; border-radius: 0 8px 8px 0; } .narrative-text { color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; margin: 0 0 10px 0; font-style: italic; } .narrative-text:last-child { margin-bottom: 0; } .text-gold { color: #fbbf24; font-weight: bold; font-style: normal; } .debt-victory-stats { display: flex; justify-content: center; gap: 15px; margin: 20px 0; } .debt-stat { display: flex; flex-direction: column; align-items: center; background: rgba(125, 211, 252, 0.1); border: 1px solid rgba(125, 211, 252, 0.3); border-radius: 10px; padding: 12px 18px; min-width: 90px; } .debt-stat-icon { font-size: 1.5rem; margin-bottom: 5px; } .debt-stat-value { color: #7dd3fc; font-size: 1.3rem; font-weight: bold; } .debt-stat-label { color: #64748b; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; } .debt-victory-rewards { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 10px; padding: 15px; margin: 20px 0; } .reward-header { color: #22c55e; font-size: 0.8rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 12px; } .reward-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .reward-item:last-child { border-bottom: none; } .reward-icon { font-size: 1.2rem; } .reward-text { color: #cbd5e1; font-size: 0.85rem; text-align: left; } .btn-diamond { background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0ea5e9 100%); color: #0c1929; font-weight: bold; font-size: 1.1rem; padding: 12px 30px; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 20px rgba(125, 211, 252, 0.4); transition: all 0.3s ease; } .btn-diamond:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(125, 211, 252, 0.6); } .debt-victory-btn { margin-top: 10px; } .btn-icon { font-size: 1.2rem; } @media (max-width: 480px) { .debt-victory-content { padding: 20px 15px; max-width: 95%; max-height: 80vh; } .debt-victory-stats { gap: 8px; } .debt-stat { padding: 10px 12px; min-width: 70px; } .debt-stat-value { font-size: 1.1rem; } .collector-defeated { font-size: 3rem; } .debt-victory-content .victory-title { font-size: 1.6rem; } } /* Champion Victory Modal */ .champion-victory-content { background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.15) 0%, transparent 50%), linear-gradient(180deg, #1a0f05 0%, #2d1810 30%, #3d2a1a 50%, #2d1810 70%, #1a0f05 100%); border: 2px solid #ffd700; box-shadow: 0 0 60px rgba(255, 215, 0, 0.4), inset 0 0 40px rgba(255, 215, 0, 0.1); padding: 25px; text-align: center; max-width: 420px; position: relative; overflow: hidden; } .champion-victory-content::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent); animation: championVictoryShine 3s ease-in-out infinite; } @keyframes championVictoryShine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .champion-victory-header { margin-bottom: 20px; } .champion-crown { font-size: 4rem; margin-bottom: 10px; animation: crownBounceRotate 2s ease-in-out infinite; } @keyframes crownBounceRotate { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.1) rotate(-5deg); } 75% { transform: scale(1.1) rotate(5deg); } } .champion-victory-content .victory-title { color: #ffd700; font-family: var(--title-font); font-size: 2rem; margin: 0 0 5px 0; text-shadow: 0 0 30px rgba(255, 215, 0, 0.8); letter-spacing: 3px; } .champion-victory-content .victory-subtitle { color: #d4af37; font-size: 1rem; font-style: italic; margin: 0; } .champion-victory-narrative { background: rgba(0, 0, 0, 0.3); border-left: 3px solid #d4af37; padding: 15px; margin: 20px 0; text-align: left; border-radius: 0 8px 8px 0; } .champion-victory-stats { display: flex; justify-content: center; gap: 15px; margin: 20px 0; } .champion-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 10px; padding: 12px 18px; min-width: 90px; } .champion-stat-icon { font-size: 1.5rem; margin-bottom: 5px; } .champion-stat-value { color: #ffd700; font-size: 1.3rem; font-weight: bold; } .champion-stat-label { color: #b8860b; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; } .champion-victory-rewards { background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 10px; padding: 15px; margin: 20px 0; } .champion-victory-btn { margin-top: 10px; } @media (max-width: 480px) { .champion-victory-content { padding: 20px 15px; max-width: 95%; } .champion-victory-stats { gap: 8px; } .champion-stat { padding: 10px 12px; min-width: 70px; } .champion-stat-value { font-size: 1.1rem; } .champion-crown { font-size: 3rem; } .champion-victory-content .victory-title { font-size: 1.6rem; } } /* Machine Selection Screen */ .machine-select-content { max-width: 500px; width: calc(90% - 20px); padding: 15px; margin: 10px; margin-top: calc(10px + env(safe-area-inset-top, 0px)); max-height: calc(90vh - 35px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: calc(90dvh - 35px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; } /* Casino Lobby Styling */ .casino-lobby-content { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); border: 2px solid var(--gold); box-shadow: 0 0 40px rgba(255, 215, 0, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.5); } .lobby-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 5px; } .lobby-icon { font-size: 2rem; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); } .lobby-title { margin: 0; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .lobby-subtitle { color: #b0a080 !important; font-style: italic; font-size: 0.95rem !important; } .machine-select-subtitle { color: #888; margin: 0 0 20px 0; text-align: center; font-size: 0.9rem; } .machine-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; } .machine-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 2px solid #333; border-radius: 10px; padding: 12px 15px; position: relative; transition: all 0.3s ease; } .machine-card.unlocked { border-color: var(--gold); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); } .machine-card.unlocked:hover { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(255, 215, 0, 0.3); } .machine-card.active { border-color: var(--success); box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); background: linear-gradient(135deg, #1a2e1a 0%, #163e21 100%); } .machine-card.locked { opacity: 0.6; border-color: #444; } .machine-icon { font-size: 1.8rem; margin-bottom: 5px; text-align: center; } .machine-icon.locked-icon { filter: grayscale(100%); opacity: 0.5; } .machine-name { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 8px; } .machine-card.locked .machine-name { color: #666; } .machine-desc { font-size: 0.75rem; color: #aaa; text-align: center; margin-bottom: 8px; line-height: 1.3; } .machine-unlock-hint { color: #888; font-style: italic; } .machine-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .machine-reels, .machine-feature { font-size: 0.7rem; padding: 3px 8px; border-radius: 10px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); color: var(--gold-light); } .machine-active-badge { background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); color: white; text-align: center; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; } .machine-card.unlocked { transition: all 0.2s ease; } .machine-card.unlocked:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3); border-color: var(--gold); } .machine-card.unlocked:active { transform: translateY(-1px); } .machine-start-btn { background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); color: white; text-align: center; padding: 8px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; margin-top: 10px; transition: transform 0.2s, box-shadow 0.2s; } .machine-card.unlocked:hover .machine-start-btn { transform: scale(1.05); box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); } .machine-counter { text-align: center; color: #666; font-size: 0.8rem; padding: 10px; border-top: 1px solid #333; margin-top: 5px; } .machine-back-btn { width: 100%; margin-top: 10px; } @media (max-width: 600px) { .machine-select-content { padding: 15px; } .machine-card { padding: 15px; } .machine-icon { font-size: 2rem; } .machine-name { font-size: 1.1rem; } .machine-desc { font-size: 0.8rem; } } /* Animation Level Controls */ /* * REDUCED mode - A balanced middle ground: * - KEEPS: Card upgrade shimmers, LED pulses, win glows, boss portraits, button effects * - DISABLES: Spinning blur (most GPU intensive), seasonal particles, very fast loops */ /* Disable the spinning blur animation - this is the biggest battery drain (0.1s loop with blur filter) */ .animations-reduced .spinning .card-rank, .animations-reduced .spinning .card-suit { animation: none !important; filter: none !important; opacity: 0.3; } .animations-reduced .reel.spinning .card { opacity: 0.7; } /* Disable snowflakes and particle-heavy seasonal effects */ .animations-reduced .snowflake { display: none !important; } /* Slow down very fast animations (anything under 1s) to reduce CPU cycles */ .animations-reduced .race-bar-horse, .animations-reduced .race-horse-icon { animation-duration: 1.5s !important; } .animations-reduced .shadowmaster-bg::before, .animations-reduced .shadowmaster-bg::after { animation: none !important; } .animations-reduced [class*="pulse"], .animations-reduced [class*="glow"] { animation-duration: 4s !important; } .animations-reduced [class*="shimmer"], .animations-reduced [class*="sparkle"] { animation: none !important; } .animations-reduced .led-frame::before, .animations-reduced .led-frame::after { animation-duration: 6s !important; } .animations-reduced .enchant-icon { animation: none !important; } .animations-reduced .crown-seal-icon { animation: none !important; } .animations-reduced .marker-icon { animation: none !important; } .animations-reduced .bg-star { animation: none !important; } .animations-reduced .bg-snowflake { animation-duration: 20s !important; } .animations-reduced .easter-grass-blade { animation: none !important; } .animations-reduced .easter-decoration-egg { animation: none !important; } .animations-reduced .floating-easter-egg { animation-duration: 6s !important; } .animations-reduced .prisma-shooting-star { animation: none !important; } .animations-reduced .christmas-light { animation-duration: 4s !important; } .animations-reduced .chase-lights { animation: none !important; } .animations-reduced .spin-btn::before, .animations-reduced .spin-btn::after { animation: none !important; } .animations-reduced .win-toast { animation-duration: 0.3s !important; } .animations-reduced .gem-cell { animation: none !important; transition: none !important; } .animations-reduced .crown-board-cell { animation: none !important; } .animations-reduced .boss-display { animation: none !important; } .animations-off .prisma-stars-container, .animations-off .prisma-shooting-star { display: none !important; } .animations-off .floating-easter-egg, .animations-off .easter-grass-blade, .animations-off .easter-decoration-egg, .animations-off .bg-star, .animations-off .bg-snowflake, .animations-off .snowflake, .animations-off .christmas-light { animation: none !important; transition: none !important; } .animations-off .floating-easter-egg.static-egg { animation: none !important; opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); } .animations-off .bg-snowflake { opacity: 0.5 !important; } .animations-off .bg-star { opacity: 0.7 !important; } /* OFF mode - completely disable ALL animations for maximum battery savings */ .animations-off, .animations-off *, .animations-off::before, .animations-off::after, .animations-off *::before, .animations-off *::after { animation: none !important; animation-play-state: paused !important; animation-duration: 0s !important; animation-iteration-count: 0 !important; transition: none !important; transition-duration: 0s !important; } /* Remove all filter effects that cause GPU usage */ .animations-off .spinning .card-rank, .animations-off .spinning .card-suit { animation: none !important; filter: none !important; text-shadow: none !important; opacity: 0.3; } .animations-off .card { animation: none !important; filter: none !important; } .animations-off .reel.spinning { animation: none !important; } .animations-off .reel.spinning .card { opacity: 0.5; } /* Disable all box-shadow animations and glows */ .animations-off .spin-btn, .animations-off .led-frame, .animations-off .reel-frame, .animations-off .boss-display, .animations-off .trophy-item { box-shadow: none !important; } /* Disable all pseudo-element overlays */ .animations-off .spin-btn::before, .animations-off .spin-btn::after, .animations-off .reel-frame::before, .animations-off .reel-frame::after, .animations-off .game-background::before, .animations-off .game-background::after, .animations-off .led-frame::before, .animations-off .led-frame::after { display: none !important; } /* Disable snowflakes and particles */ .animations-off .snowflake, .animations-off .particle, .animations-off .star-field, .animations-off .christmas-lights { display: none !important; } /* Ensure keyframes don't run */ .animations-off [class*="pulse"], .animations-off [class*="glow"], .animations-off [class*="shimmer"], .animations-off [class*="sparkle"] { animation: none !important; } /* Force visibility for elements that depend on entrance animations */ .animations-off #bonus-overlay { transition: none !important; } .animations-off #bonus-overlay.active .bonus-crown-icon, .animations-off #bonus-overlay.active .bonus-title, .animations-off #bonus-overlay.active .bonus-info-box, .animations-off #bonus-overlay.active .bonus-start-btn { opacity: 1 !important; transform: none !important; filter: none !important; } .animations-off #bonus-overlay.active { opacity: 1 !important; } .animations-off .bonus-title::after { display: none !important; } .animations-off .bonus-start-btn::before { display: none !important; } .animations-off .royale-intro-crown { opacity: 1 !important; transform: none !important; } .animations-off .royale-intro-title { opacity: 1 !important; transform: none !important; } .animations-off .win-toast.show { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } .animations-off .mobile-win-toast.show { opacity: 1 !important; transform: scale(1) !important; } .animations-off .bonus-sparkles { display: none !important; } .animations-off .royale-bonus-content.visible { opacity: 1 !important; visibility: visible !important; } .animations-off .royale-intro-splash.active { opacity: 1 !important; visibility: visible !important; } .animations-off .royale-sparkle-container { display: none !important; } /* ===== COMPANION SYSTEM ===== */ #companion-container { position: fixed; z-index: 9999; display: none; flex-direction: column; align-items: center; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .companion-sprite { font-size: 64px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); transition: transform 0.2s ease; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .companion-sprite img { -webkit-touch-callout: none; pointer-events: none; user-select: none; -webkit-user-select: none; } /* Idle floating animation */ .companion-idle .companion-sprite { animation: companion-float 3s ease-in-out infinite; } @keyframes companion-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } /* Happy/celebrating animation */ .companion-happy .companion-sprite { animation: companion-celebrate 0.4s ease-in-out; } @keyframes companion-celebrate { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2) rotate(-10deg); } 50% { transform: scale(1.3) rotate(10deg); } 75% { transform: scale(1.2) rotate(-5deg); } 100% { transform: scale(1) rotate(0deg); } } /* Worried animation */ .companion-worried .companion-sprite { animation: companion-shake 0.3s ease-in-out infinite; } @keyframes companion-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* Sleeping animation */ .companion-sleeping .companion-sprite { animation: companion-sleep 2s ease-in-out infinite; opacity: 0.7; } @keyframes companion-sleep { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(2px) rotate(-8deg); } } .companion-sleeping::after { content: '💤'; position: absolute; top: -10px; right: -5px; font-size: 16px; animation: zzz-float 1.5s ease-in-out infinite; } @keyframes zzz-float { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-20px); } } /* Speech bubble */ .companion-speech { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); color: #333; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-family: 'Roboto Mono', monospace; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: none; margin-bottom: 8px; } .companion-speech::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(255, 255, 255, 0.95); } .companion-speech.active { opacity: 1; visibility: visible; } /* Heart particle when petting */ .companion-heart { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 20px; animation: heart-rise 1s ease-out forwards; pointer-events: none; } @keyframes heart-rise { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.5); } 50% { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.2); } 100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.8); } } /* Companion-specific themes */ #companion-container[data-companion="royal_drake"] .companion-sprite { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } #companion-container[data-companion="lucky_cat"] .companion-sprite { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } #companion-container[data-companion="shadow_wolf"] .companion-sprite { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } /* Companion hover effect */ #companion-container:hover .companion-sprite { transform: scale(1.1); } /* Rising Flame indicator — Golden Phoenix active boost */ #companion-container.rising-flame-active .companion-sprite { filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.9)) drop-shadow(0 0 22px rgba(255, 69, 0, 0.55)); animation: companion-float 3s ease-in-out infinite, risingFlameGlow 1.2s ease-in-out infinite alternate; } #companion-container.rising-flame-active::after { content: attr(data-rf-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: #ffaa33; background: rgba(0, 0, 0, 0.72); padding: 2px 6px; border-radius: 4px; white-space: nowrap; letter-spacing: 0.5px; text-shadow: 0 0 6px rgba(255, 140, 0, 0.9); pointer-events: none; } @keyframes risingFlameGlow { from { filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 69, 0, 0.4)); } to { filter: drop-shadow(0 0 16px rgba(255, 200, 0, 1.0)) drop-shadow(0 0 30px rgba(255, 100, 0, 0.8)); } } /* Mobile adjustments */ @media (max-width: 600px) { .companion-sprite { font-size: 40px; } .companion-speech { font-size: 10px; max-width: 150px; white-space: normal; } } /* Royal Shoppe companion section */ .companion-section-desc { font-size: 12px; color: #888; margin-bottom: 10px; text-align: center; } .companion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 15px; } .companion-card { background: rgba(30, 30, 50, 0.8); border: 2px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .companion-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2); } .companion-card.owned { border-color: var(--success); } .companion-card.active { border-color: var(--gold); background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); } .companion-card.locked { opacity: 0.6; cursor: not-allowed; } .companion-card.change-locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(30%); } .companion-card.change-locked:hover { transform: none; box-shadow: none; border-color: rgba(255, 215, 0, 0.3); } .companion-locked-notice { background: rgba(255, 100, 100, 0.15); border: 1px solid rgba(255, 100, 100, 0.4); border-radius: 8px; padding: 10px 15px; margin-bottom: 12px; text-align: center; font-size: 13px; color: #ff9999; } .companion-icon { font-size: 40px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; min-height: 50px; } .companion-icon-img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .companion-image { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); } .companion-name { font-size: 14px; font-weight: bold; color: var(--gold); margin-bottom: 4px; } .companion-bonus { font-size: 11px; color: #aaa; margin-bottom: 8px; } .companion-price { font-size: 12px; color: var(--gold); } .companion-status { font-size: 11px; color: var(--success); font-weight: bold; } /* Consumables Section */ .consumables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 15px; } .consumables-empty { text-align: center; padding: 30px 20px; color: var(--success); font-size: 1.1em; background: rgba(34, 197, 94, 0.1); border: 2px solid var(--success); border-radius: 12px; margin-top: 15px; } .consumable-card { background: rgba(30, 30, 50, 0.8); border: 2px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 15px; text-align: center; transition: all 0.3s ease; } .consumable-card.purchasable { border-color: var(--gold); cursor: pointer; } .consumable-card.purchasable:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); } .consumable-card.maxed { border-color: var(--success); background: rgba(34, 197, 94, 0.1); } .consumable-icon { font-size: 36px; margin-bottom: 8px; } .consumable-name { font-size: 14px; font-weight: bold; color: var(--gold); margin-bottom: 4px; } .consumable-desc { font-size: 11px; color: #aaa; margin-bottom: 8px; } .consumable-stock { font-size: 12px; color: #ccc; margin-bottom: 10px; } .consumable-buy-btn { background: linear-gradient(135deg, var(--gold), #b8860b); border: none; border-radius: 8px; padding: 8px 16px; color: #000; font-weight: bold; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .consumable-buy-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4); } .consumable-buy-btn.cannot-afford { background: #444; color: #888; cursor: not-allowed; } .consumable-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; } .consumable-maxed { font-size: 14px; font-weight: bold; color: var(--success); padding: 8px 0; } /* Disable companion animations in reduced/off mode */ .animations-reduced .companion-sprite { animation: none !important; } .animations-reduced .companion-sleeping::after { animation: none !important; opacity: 1; transform: translateY(-10px); } .animations-reduced .companion-heart { animation: none !important; opacity: 1; transform: translateX(-50%) translateY(-20px); } .animations-reduced .companion-speech { transition: none !important; } /* Full disable for animations-off */ .animations-off .companion-sprite { animation: none !important; transition: none !important; } .animations-off .companion-sleeping::after { display: none !important; } .animations-off .companion-heart { display: none !important; } .animations-off .companion-speech { transition: none !important; } .animations-off #companion-container:hover .companion-sprite { transform: none !important; } .animations-off .companion-card { transition: none !important; } .animations-off .companion-card:hover { transform: none !important; } /* Suit Rotation Animation for Croupier Twins */ .suit-rotation-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; border-radius: 12px; } .suit-rotation-overlay.active { opacity: 1; } .suit-rotation-content { display: flex; align-items: center; gap: 10px; animation: suitRotationBounce 0.3s ease-out; } .suit-rotation-old { font-size: 2.5rem; opacity: 0.4; text-decoration: line-through; } .suit-rotation-arrow { font-size: 1.5rem; } .suit-rotation-new { font-size: 3rem; text-shadow: 0 0 15px currentColor; animation: newSuitGlow 0.6s ease-in-out infinite; } @keyframes suitRotationBounce { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes newSuitGlow { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.15); filter: brightness(1.3); } } /* XP-Exclusive Cosmetics */ /* Spin Buttons */ .cosmetic-spin-chrome-royale { background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 30%, #a0a0a0 50%, #ffffff 70%, #c0c0c0 100%) !important; border: 3px solid #ffd700 !important; color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.6) !important; } .cosmetic-spin-stellar { background: linear-gradient(135deg, #1a0f00 0%, #ff9500 50%, #ffc966 100%) !important; border: 3px solid #ffc966 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 149, 0, 0.8) !important; box-shadow: 0 0 20px rgba(255, 149, 0, 0.6), 0 0 40px rgba(255, 201, 102, 0.3) !important; animation: stellarPulse 2s ease-in-out infinite !important; } @keyframes stellarPulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 149, 0, 0.6), 0 0 40px rgba(255, 201, 102, 0.3); } 50% { box-shadow: 0 0 30px rgba(255, 149, 0, 0.8), 0 0 60px rgba(255, 201, 102, 0.5); } } button#action-btn.cosmetic-spin-prisma, .cosmetic-spin-prisma { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b) !important; background-size: 200% 100% !important; border: 3px solid #ffffff !important; color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; box-shadow: 0 0 25px rgba(255, 255, 255, 0.5) !important; transition: transform 0.1s, box-shadow 0.1s !important; -webkit-animation: prismaGradientSlide 4s linear infinite !important; animation: prismaGradientSlide 4s linear infinite !important; } @-webkit-keyframes prismaGradientSlide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes prismaGradientSlide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Reel Borders - XP Exclusive */ /* Velvet Night - Full container styling */ .cosmetic-reel-velvet-night { border: 4px solid #8b5cf6 !important; background: linear-gradient(145deg, #1e1033, #2d1a4a) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(139, 92, 246, 0.5), 0 0 50px rgba(139, 92, 246, 0.25) !important; border-radius: 12px !important; } .cosmetic-reel-velvet-night .reel { border: 3px solid #7c3aed !important; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important; } /* Cosmic Edge - Full container styling */ .cosmetic-reel-cosmic { border: 4px solid #66d9ff !important; background: linear-gradient(145deg, #001a2e, #003366) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 191, 255, 0.7), 0 0 60px rgba(102, 217, 255, 0.4) !important; border-radius: 12px !important; -webkit-animation: cosmicBorderPulse 2s ease-in-out infinite !important; animation: cosmicBorderPulse 2s ease-in-out infinite !important; } .cosmetic-reel-cosmic .reel { border: 3px solid #00bfff !important; box-shadow: 0 0 15px rgba(0, 191, 255, 0.6) !important; } /* Prestige Prisma - Full container styling with rainbow effect */ .cosmetic-reel-prisma { border: 4px solid #ffffff !important; background: #1a1a2e !important; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(153, 102, 255, 0.3) !important; border-radius: 12px !important; position: relative !important; overflow: visible !important; } .cosmetic-reel-prisma::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b); background-size: 200% 100%; border-radius: 16px; border: 3px solid #ffffff; box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); z-index: -1; -webkit-animation: prismaContainerShift 3s linear infinite; animation: prismaContainerShift 3s linear infinite; } .cosmetic-reel-prisma .reel { border: 3px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important; } @-webkit-keyframes prismaContainerShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes prismaContainerShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @-webkit-keyframes cosmicBorderPulse { 0%, 100% { opacity: 1; -webkit-filter: brightness(1); filter: brightness(1); } 50% { opacity: 1; -webkit-filter: brightness(1.3); filter: brightness(1.3); } } @keyframes cosmicBorderPulse { 0%, 100% { opacity: 1; -webkit-filter: brightness(1); filter: brightness(1); } 50% { opacity: 1; -webkit-filter: brightness(1.3); filter: brightness(1.3); } } /* Additional XP-Exclusive Spin Buttons */ .cosmetic-spin-velvet-night { background: linear-gradient(135deg, #1e1033 0%, #8b5cf6 50%, #4c1d95 100%) !important; border: 3px solid #8b5cf6 !important; color: #ffffff !important; text-shadow: 0 0 8px rgba(139, 92, 246, 0.8) !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.2) !important; } .cosmetic-spin-aurora { background: linear-gradient(135deg, #050d1a 0%, #0d3d2a 40%, #1a4a3a 60%, #3d1a40 100%) !important; border: 3px solid #2dd4bf !important; color: #ffffff !important; text-shadow: 0 0 8px rgba(45, 212, 191, 0.8) !important; box-shadow: 0 0 20px rgba(74, 222, 128, 0.4), 0 0 40px rgba(13, 58, 74, 0.3) !important; animation: auroraBtnPulse 3s ease-in-out infinite !important; } @keyframes auroraBtnPulse { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(20deg); } } .cosmetic-spin-cosmic { background: linear-gradient(135deg, #001a2e 0%, #00bfff 50%, #66d9ff 100%) !important; border: 3px solid #66d9ff !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(0, 191, 255, 0.8) !important; box-shadow: 0 0 25px rgba(0, 191, 255, 0.6), 0 0 50px rgba(102, 217, 255, 0.3) !important; } .cosmetic-spin-nebula { background: linear-gradient(135deg, #1a0a15 0%, #ff1493 50%, #ff69b4 100%) !important; border: 3px solid #ff69b4 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 20, 147, 0.8) !important; box-shadow: 0 0 20px rgba(255, 20, 147, 0.5), 0 0 40px rgba(255, 105, 180, 0.4) !important; animation: nebulaBtnDrift 4s ease-in-out infinite !important; } @keyframes nebulaBtnDrift { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } /* Additional XP-Exclusive Reel Borders */ .cosmetic-reel-chrome-royale { border: 4px solid #ffd700 !important; background: linear-gradient(145deg, #c0c0c0, #e8e8e8) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(192, 192, 192, 0.3) !important; border-radius: 12px !important; } .cosmetic-reel-chrome-royale .reel { border: 3px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important; } .cosmetic-reel-aurora { border: 4px solid #2dd4bf !important; background: linear-gradient(145deg, #050d1a, #0d3d2a, #2a1a30) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(45, 212, 191, 0.5), 0 0 50px rgba(150, 50, 120, 0.3) !important; border-radius: 12px !important; } .cosmetic-reel-aurora .reel { border: 3px solid #2dd4bf !important; box-shadow: 0 0 12px rgba(45, 212, 191, 0.5) !important; } .cosmetic-reel-stellar { border: 4px solid #ffc966 !important; background: linear-gradient(145deg, #1a0f00, #3d2600) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 149, 0, 0.6), 0 0 50px rgba(255, 201, 102, 0.3) !important; border-radius: 12px !important; animation: stellarBorderPulse 2s ease-in-out infinite !important; } .cosmetic-reel-stellar .reel { border: 3px solid #ff9500 !important; box-shadow: 0 0 12px rgba(255, 149, 0, 0.5) !important; } @keyframes stellarBorderPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } .cosmetic-reel-nebula { border: 4px solid #ff69b4 !important; background: linear-gradient(145deg, #1a0a15, #3d1530) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 20, 147, 0.5), 0 0 50px rgba(255, 105, 180, 0.4) !important; border-radius: 12px !important; } .cosmetic-reel-nebula .reel { border: 3px solid #ff1493 !important; box-shadow: 0 0 12px rgba(255, 20, 147, 0.5) !important; } /* Additional XP-Exclusive Backgrounds */ .cosmetic-bg-chrome-royale { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 3px ), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0.03) 80%, rgba(255, 255, 255, 0.08) 100%), linear-gradient(135deg, #b0b0b0 0%, #d8d8d8 25%, #f0f0f0 50%, #d0d0d0 75%, #a0a0a0 100%) !important; } .cosmetic-bg-velvet-night { background: radial-gradient(ellipse at 70% 25%, rgba(100, 80, 180, 0.2) 0%, transparent 45%), radial-gradient(ellipse at 20% 60%, rgba(80, 60, 160, 0.15) 0%, transparent 40%), radial-gradient(ellipse at 50% 85%, rgba(60, 50, 140, 0.12) 0%, transparent 35%), radial-gradient(1px 1px at 15% 20%, rgba(200, 200, 255, 0.4) 50%, transparent 50%), radial-gradient(1px 1px at 60% 15%, rgba(200, 200, 255, 0.3) 50%, transparent 50%), radial-gradient(1px 1px at 85% 45%, rgba(200, 200, 255, 0.35) 50%, transparent 50%), linear-gradient(135deg, #1a1545 0%, #201a55 25%, #2a2068 40%, #1e1850 65%, #141040 85%, #0a0825 100%) !important; } .cosmetic-bg-stellar { background: radial-gradient(2px 2px at 15% 20%, rgba(255, 215, 0, 0.6) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 45% 10%, rgba(255, 220, 100, 0.5) 50%, transparent 50%), radial-gradient(2px 2px at 75% 35%, rgba(255, 200, 50, 0.55) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 30% 55%, rgba(255, 230, 120, 0.45) 50%, transparent 50%), radial-gradient(2px 2px at 85% 70%, rgba(255, 210, 80, 0.5) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 55% 85%, rgba(255, 200, 60, 0.4) 50%, transparent 50%), radial-gradient(ellipse at 50% 40%, rgba(255, 200, 50, 0.1) 0%, transparent 50%), linear-gradient(135deg, #2a1a05 0%, #3d2808 25%, #5a3c10 50%, #3d2808 75%, #2a1a05 100%) !important; animation: stellarBgPulse 4s ease-in-out infinite !important; } @keyframes stellarBgPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } .cosmetic-bg-cosmic { background: radial-gradient(1px 1px at 10% 15%, rgba(100, 200, 255, 0.5) 50%, transparent 50%), radial-gradient(1px 1px at 30% 40%, rgba(150, 220, 255, 0.4) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 55% 20%, rgba(100, 180, 255, 0.45) 50%, transparent 50%), radial-gradient(1px 1px at 75% 55%, rgba(120, 200, 255, 0.4) 50%, transparent 50%), radial-gradient(1px 1px at 90% 30%, rgba(80, 180, 255, 0.35) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 20% 75%, rgba(140, 210, 255, 0.4) 50%, transparent 50%), radial-gradient(ellipse at 40% 30%, rgba(0, 180, 255, 0.12) 0%, transparent 45%), radial-gradient(ellipse at 70% 70%, rgba(0, 150, 220, 0.1) 0%, transparent 40%), linear-gradient(135deg, #051a30 0%, #0a2e50 25%, #0f4070 50%, #0a2e50 75%, #051a30 100%) !important; animation: cosmicBgPulse 5s ease-in-out infinite !important; } @keyframes cosmicBgPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } /* Backgrounds */ .bg-aurora-vault { background: radial-gradient(ellipse at 30% 40%, rgba(0, 255, 120, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 60% 20%, rgba(100, 0, 255, 0.1) 0%, transparent 45%), radial-gradient(ellipse at 80% 60%, rgba(255, 50, 150, 0.08) 0%, transparent 40%), repeating-linear-gradient( 180deg, transparent, transparent 20px, rgba(100, 255, 180, 0.04) 20px, rgba(100, 255, 180, 0.04) 21px ), linear-gradient(135deg, #081a20 0%, #103828 20%, #1a5a3e 40%, #2a6850 55%, #3a2050 75%, #081a20 100%) !important; -webkit-animation: auroraPulse 8s ease-in-out infinite !important; animation: auroraPulse 8s ease-in-out infinite !important; } /* Prestige Prisma Background */ body.bg-prestige-prisma { background: radial-gradient(ellipse at 30% 20%, rgba(155, 89, 182, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(77, 150, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(107, 203, 119, 0.08) 0%, transparent 60%), linear-gradient(135deg, #0a0612 0%, #120a1e 25%, #0a0a18 50%, #0e0818 75%, #0a0612 100%) !important; } .bg-prestige-prisma { position: relative !important; background: #0a0a0a !important; overflow: hidden !important; } .bg-prestige-prisma .stats-bar, .bg-prestige-prisma .message-display, .bg-prestige-prisma .control-area, .bg-prestige-prisma .log-area, .bg-prestige-prisma .bet-select-row, .bg-prestige-prisma .action-btn, .bg-prestige-prisma .vip-monitor, .bg-prestige-prisma .mobile-stats-row, .bg-prestige-prisma .ticker-container, .bg-prestige-prisma .news-ticker, .bg-prestige-prisma .reels-container, .bg-prestige-prisma .game-header, .bg-prestige-prisma .betting-area, .bg-prestige-prisma .bottom-controls { position: relative; z-index: 2; } .bg-prestige-prisma .mobile-top-bar { z-index: 200; } .bg-prestige-prisma .top-bar { position: relative; z-index: 200; } @-webkit-keyframes prismaBgShift { 0% { background-position: 0% 0%, 0% 0%; } 100% { background-position: 200% 200%, 0% 0%; } } @keyframes prismaBgShift { 0% { background-position: 0% 0%, 0% 0%; } 100% { background-position: 200% 200%, 0% 0%; } } @keyframes auroraPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } .bg-nebula-dreams { background: radial-gradient(ellipse at 35% 45%, rgba(255, 50, 180, 0.15) 0%, transparent 45%), radial-gradient(ellipse at 70% 25%, rgba(200, 50, 255, 0.12) 0%, transparent 40%), radial-gradient(2px 2px at 20% 20%, rgba(255, 150, 220, 0.4) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 50% 60%, rgba(255, 100, 200, 0.35) 50%, transparent 50%), radial-gradient(2px 2px at 80% 40%, rgba(220, 100, 255, 0.3) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 35% 80%, rgba(255, 120, 200, 0.3) 50%, transparent 50%), linear-gradient(135deg, #1a0a20 0%, #30122a 25%, #5a2548 50%, #30122a 75%, #1a0a20 100%) !important; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200% !important; animation: nebulaDrift 10s ease-in-out infinite alternate !important; } @keyframes nebulaDrift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* XP Exclusive Cosmetic Previews */ .preview-spin-chrome_royale { background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 30%, #a0a0a0 50%, #c0c0c0 70%, #ffffff 100%); border: 2px solid #ffd700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.5); } .preview-spin-stellar_glow { background: linear-gradient(180deg, #cc99ff 0%, #9966ff 50%, #1a0a2e 100%); border: 2px solid #cc99ff; box-shadow: 0 0 15px rgba(153, 102, 255, 0.6); animation: previewStellarPulse 2s ease-in-out infinite; } @keyframes previewStellarPulse { 0%, 100% { box-shadow: 0 0 15px rgba(153, 102, 255, 0.6); } 50% { box-shadow: 0 0 25px rgba(204, 153, 255, 0.9); } } .preview-spin-prestige_prisma { background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 17%, #6bcb77 34%, #4d96ff 51%, #9b59b6 68%, #ff6b6b 85%, #ffd93d 100%); background-size: 300% 300%; border: 2px solid #ffffff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); animation: previewPrismaShift 3s ease-in-out infinite; } @keyframes previewPrismaShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .preview-spin-prestige_crown { background: repeating-linear-gradient(45deg, rgba(255, 200, 50, 0.15) 0px, rgba(255, 200, 50, 0.15) 1px, transparent 1px, transparent 4px), linear-gradient(180deg, #d4af37 0%, #b8960f 50%, #d4af37 100%) !important; border: 2px solid #5c1a2a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(212, 175, 55, 0.4) !important; } .preview-spin-velvet_night { background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 50%, #6d28d9 100%) !important; border: 2px solid #8b5cf6 !important; box-shadow: 0 0 10px rgba(139, 92, 246, 0.6) !important; } .preview-spin-aurora_vault { background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 40%, #831843 100%) !important; border: 2px solid #2dd4bf !important; box-shadow: 0 0 10px rgba(45, 212, 191, 0.6) !important; } .preview-spin-stellar_glow { background: linear-gradient(180deg, #ffe0a3 0%, #ffc966 50%, #ff9500 100%) !important; border: 2px solid #ffc966 !important; box-shadow: 0 0 12px rgba(255, 149, 0, 0.7) !important; } .preview-spin-cosmic_edge { background: linear-gradient(180deg, #99e6ff 0%, #66d9ff 50%, #00bfff 100%) !important; border: 2px solid #66d9ff !important; box-shadow: 0 0 12px rgba(0, 191, 255, 0.7) !important; } .preview-spin-nebula_dreams { background: linear-gradient(180deg, #ffb6c1 0%, #ff69b4 50%, #ff1493 100%) !important; border: 2px solid #ff69b4 !important; box-shadow: 0 0 10px rgba(255, 20, 147, 0.6) !important; } .preview-border-chrome_royale { background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 50%, #c0c0c0 100%) !important; border: 2px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; } .preview-border-velvet_night { background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 50%, #6d28d9 100%) !important; border: 2px solid #8b5cf6 !important; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5) !important; } .preview-border-cosmic_edge { background: linear-gradient(180deg, #e9d5ff 0%, #cc99ff 50%, #9966ff 100%) !important; border: 2px solid #cc99ff !important; box-shadow: 0 0 12px rgba(153, 102, 255, 0.6); animation: previewCosmicGlow 2s ease-in-out infinite; } @keyframes previewCosmicGlow { 0%, 100% { box-shadow: 0 0 12px rgba(153, 102, 255, 0.6); } 50% { box-shadow: 0 0 20px rgba(204, 153, 255, 0.9); } } .preview-border-aurora_vault { background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 40%, #831843 100%) !important; border: 2px solid #2dd4bf !important; box-shadow: 0 0 10px rgba(45, 212, 191, 0.5) !important; } .preview-border-stellar_glow { background: linear-gradient(180deg, #ffe0a3 0%, #ffc966 50%, #ff9500 100%) !important; border: 2px solid #ffc966 !important; box-shadow: 0 0 12px rgba(255, 149, 0, 0.6) !important; } .preview-border-cosmic_edge { background: linear-gradient(180deg, #99e6ff 0%, #66d9ff 50%, #00bfff 100%) !important; border: 2px solid #66d9ff !important; box-shadow: 0 0 12px rgba(0, 191, 255, 0.6) !important; } .preview-border-nebula_dreams { background: linear-gradient(180deg, #ffb6c1 0%, #ff69b4 50%, #ff1493 100%) !important; border: 2px solid #ff69b4 !important; box-shadow: 0 0 10px rgba(255, 20, 147, 0.6) !important; } .preview-border-prestige_prisma { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6) !important; border: 2px solid #ffffff !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; } .preview-bg-aurora_vault { background: linear-gradient(135deg, #0d3d2a 0%, #0d9488 33%, #2dd4bf 50%, #831843 100%) !important; border: 2px solid #2dd4bf !important; box-shadow: 0 0 10px rgba(45, 212, 191, 0.5) !important; } .preview-bg-nebula_dreams { background: linear-gradient(135deg, #ff1493 0%, #ff69b4 50%, #ffb6c1 100%) !important; border: 2px solid #ff69b4 !important; box-shadow: 0 0 10px rgba(255, 20, 147, 0.6) !important; animation: previewNebulaPulse 4s ease-in-out infinite; } @keyframes previewNebulaPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 20, 147, 0.5); } 50% { box-shadow: 0 0 18px rgba(255, 105, 180, 0.7); } } .preview-bg-chrome_royale { background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 30%, #e0e0e0 50%, #ffffff 70%, #c0c0c0 100%) !important; border: 2px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; } .preview-bg-velvet_night { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #6d28d9 100%) !important; border: 2px solid #8b5cf6 !important; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5) !important; } .preview-bg-stellar_glow { background: linear-gradient(135deg, #ff9500 0%, #ffc966 50%, #ffe0a3 100%) !important; border: 2px solid #ffc966 !important; box-shadow: 0 0 12px rgba(255, 149, 0, 0.6) !important; } .preview-bg-cosmic_edge { background: linear-gradient(135deg, #00bfff 0%, #66d9ff 50%, #99e6ff 100%) !important; border: 2px solid #66d9ff !important; box-shadow: 0 0 12px rgba(0, 191, 255, 0.6) !important; } .preview-bg-prestige_prisma { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6) !important; border: 2px solid #fff !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; -webkit-animation: prismaPreviewHue 3s linear infinite; animation: prismaPreviewHue 3s linear infinite; } .preview-border-prestige_crown { background: linear-gradient(180deg, #5c1a2a 0%, #7a2238 50%, #5c1a2a 100%) !important; border: 2px solid #d4af37 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 8px rgba(212, 175, 55, 0.3) !important; } .preview-bg-prestige_crown { background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 3px), linear-gradient(180deg, #1a0810 0%, #3d1422 50%, #1a0810 100%) !important; background-size: 15px 15px, 100% 100%; border: 2px solid #d4af37 !important; box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important; } /* XP Progression Tree Modal */ .xp-tree-content { background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a0a1a 100%); border: 3px solid #9966ff; max-width: 500px; width: 88%; max-height: calc(85vh - 15px - env(safe-area-inset-bottom, 0px)); /* dvh cap reserves room for the floating BACK pill (net ~23px + margins) so it can't be clipped under the iOS home indicator (vh = large viewport on iOS, which over-allocates height in standalone PWA). */ max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(153, 102, 255, 0.5); position: relative; overflow: hidden; border-radius: 12px; } .xp-tree-header { padding: 20px; text-align: center; border-bottom: 2px solid rgba(153, 102, 255, 0.3); flex-shrink: 0; } .xp-tree-title { color: #cc99ff; font-family: 'Cinzel', serif; font-size: 1.5rem; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(153, 102, 255, 0.5); } .xp-tree-current { display: flex; align-items: center; justify-content: center; gap: 10px; } .xp-tree-label { color: #888; font-size: 0.9rem; } .xp-tree-level { background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); color: white; font-weight: 900; font-size: 1.2rem; padding: 5px 15px; border-radius: 20px; box-shadow: 0 0 15px rgba(153, 102, 255, 0.6); } .xp-crown-board-section { background: linear-gradient(135deg, rgba(42, 10, 20, 0.95) 0%, rgba(107, 29, 52, 0.9) 100%); border: 2px solid #ffd700; border-radius: 10px; margin: 10px 15px; padding: 12px 15px; text-align: center; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); } .xp-crown-board-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; } .xp-crown-title { color: #ffd700; font-family: 'Cinzel', serif; font-size: 1rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .xp-crown-gems { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .xp-crown-gem { font-size: 1.2rem; transition: all 0.3s ease; } .xp-crown-gem.filled { text-shadow: 0 0 10px rgba(100, 200, 255, 0.8); } .xp-crown-gem.empty { opacity: 0.4; color: #666; } .xp-crown-progress { color: #ffd700; font-size: 0.9rem; margin-bottom: 5px; } .xp-crown-reward { color: #88ff88; font-size: 0.75rem; opacity: 0.9; } .xp-tree-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 15px 10px; scrollbar-width: thin; scrollbar-color: #9966ff #1a0a2e; } .xp-tree-scroll::-webkit-scrollbar { width: 8px; } .xp-tree-scroll::-webkit-scrollbar-track { background: #1a0a2e; } .xp-tree-scroll::-webkit-scrollbar-thumb { background: #9966ff; border-radius: 4px; } .xp-tree-container { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 20px; } .xp-tree-node { display: flex; align-items: center; gap: 12px; padding: 14px 15px; margin: 5px 0; background: rgba(30, 20, 50, 0.8); border: 2px solid #333; border-radius: 12px; width: calc(100% - 10px); max-width: 420px; transition: all 0.3s ease; position: relative; box-sizing: border-box; } .xp-tree-node::before { content: ''; position: absolute; left: 50%; top: -12px; width: 2px; height: 12px; background: linear-gradient(to bottom, #444, #666); } .xp-tree-node:first-child::before { display: none; } .xp-tree-node.completed { border-color: #4ade80; background: rgba(74, 222, 128, 0.15); } .xp-tree-node.current { border-color: #9966ff; background: rgba(153, 102, 255, 0.2); box-shadow: 0 0 20px rgba(153, 102, 255, 0.4); animation: currentNodePulse 2s ease-in-out infinite; } .xp-tree-node.locked { border-color: #444; opacity: 0.6; } @keyframes currentNodePulse { 0%, 100% { box-shadow: 0 0 20px rgba(153, 102, 255, 0.4); } 50% { box-shadow: 0 0 30px rgba(153, 102, 255, 0.6); } } .xp-tree-node.special { border-width: 3px; } .xp-tree-node.special.completed { border-color: #ffd700; background: rgba(255, 215, 0, 0.15); } .xp-tree-node.special.current { border-color: #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); } .xp-tree-node.special.locked { border-color: #665500; } .xp-node-level { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; font-weight: 900; font-size: 1rem; flex-shrink: 0; } .xp-tree-node.completed .xp-node-level { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); color: white; } .xp-tree-node.current .xp-node-level { background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); color: white; animation: levelBadgePulse 1.5s ease-in-out infinite; } .xp-tree-node.locked .xp-node-level { background: #333; color: #666; } .xp-tree-node.special .xp-node-level { border: 2px solid rgba(255, 215, 0, 0.5); } @keyframes levelBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .xp-node-content { flex: 1; min-width: 0; } .xp-node-rewards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .xp-node-reward { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #ddd; } .xp-tree-node.completed .xp-node-reward { background: rgba(74, 222, 128, 0.2); color: #a0f0a0; } .xp-tree-node.current .xp-node-reward, .xp-tree-node.locked .xp-node-reward { background: rgba(153, 102, 255, 0.2); color: #cc99ff; } .xp-node-reward.coins { color: #ffd700; } .xp-node-reward.cosmetic { color: #ff69b4; } .xp-node-reward.companion { color: #87ceeb; } .xp-node-reward.machine { color: #ff6b6b; } .xp-node-reward.consumables { color: #98fb98; } .xp-node-xp { font-size: 0.8rem; font-weight: 500; color: #888; margin-top: 4px; } .xp-tree-node.completed .xp-node-xp { color: #4ade80; } .xp-tree-footer { padding: 15px 20px; border-top: 2px solid rgba(153, 102, 255, 0.3); text-align: center; flex-shrink: 0; } .xp-tree-progress-info { color: #888; font-size: 0.85rem; margin-bottom: 12px; } .btn-xp-tree-prestige { background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ff8800 100%); border: 2px solid #fff; color: #1a0a00; padding: 12px 35px; border-radius: 8px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; margin-right: 15px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); animation: prestigeBtnPulse 2s ease-in-out infinite; } @keyframes prestigeBtnPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); } 50% { box-shadow: 0 4px 25px rgba(255, 215, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4); } } .btn-xp-tree-prestige:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-xp-tree-close { background: linear-gradient(135deg, #9966ff 0%, #6633cc 100%); border: none; color: white; padding: 10px 30px; border-radius: 8px; font-family: 'Cinzel', serif; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .btn-xp-tree-close:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(153, 102, 255, 0.5); } .xp-container { cursor: pointer; } .xp-container:hover { transform: scale(1.02); } .mobile-xp-display { cursor: pointer; } .mobile-xp-display:active { transform: scale(0.95); } /* Prestige Section at Bottom */ .xp-tree-prestige { margin-top: 20px; padding: 15px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%); border: 2px dashed #ffd700; border-radius: 12px; text-align: center; width: calc(100% - 10px); max-width: 420px; box-sizing: border-box; } .xp-tree-prestige-title { color: #ffd700; font-family: 'Cinzel', serif; font-size: 1rem; margin-bottom: 8px; } .xp-tree-prestige-desc { color: #999; font-size: 0.8rem; line-height: 1.4; } /* Tutorial Overlay System */ .tutorial-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 10000; display: none; pointer-events: all; } .tutorial-overlay.active { display: block; } .tutorial-highlight { position: fixed; border: 4px solid #ffd700; border-radius: 10px; box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.4), 0 0 40px 10px rgba(255, 215, 0, 0.7), 0 0 0 9999px rgba(0, 0, 0, 0.25); z-index: 10001; pointer-events: none; display: none; animation: tutorialPulse 1.5s ease-in-out infinite; background: transparent; box-sizing: border-box; } @keyframes tutorialPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.3), 0 0 30px 5px rgba(255, 215, 0, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.25); border-color: #ffd700; } 50% { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0.5), 0 0 60px 15px rgba(255, 215, 0, 0.8), 0 0 0 9999px rgba(0, 0, 0, 0.25); border-color: #ffec8b; } } .tutorial-popup { position: fixed; width: min(300px, calc(100vw - 30px)); max-width: calc(100vw - 30px); background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); border: 2px solid #ffd700; border-radius: 12px; padding: 15px 20px; z-index: 10002; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); box-sizing: border-box; } .tutorial-popup.center-popup { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .tutorial-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .tutorial-popup-title { color: #ffd700; font-family: 'Cinzel', serif; font-size: 1.1rem; margin: 0; } .tutorial-progress { color: #888; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; } .tutorial-popup-text { color: #ddd; font-size: 0.9rem; line-height: 1.5; margin: 0 0 15px 0; } .tutorial-popup-buttons { display: flex; gap: 10px; justify-content: flex-end; } .tutorial-btn { padding: 8px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: all 0.2s; border: none; } .tutorial-skip { background: transparent; border: 1px solid #666; color: #888; } .tutorial-skip:hover { border-color: #999; color: #aaa; } .tutorial-next { background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); color: #1a1a2e; } .tutorial-next:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } /* Guide Modal (combines Story, Rules, Tutorial, Items) */ .guide-content { max-width: 450px; max-height: calc(80vh - 15px - env(safe-area-inset-bottom, 0px)); max-height: calc(80dvh - 15px - env(safe-area-inset-bottom, 0px)); padding: 0; display: flex; flex-direction: column; } .guide-header { padding: 15px 20px; border-bottom: 2px solid rgba(153, 102, 255, 0.3); flex-shrink: 0; } .guide-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.5rem; margin: 0 0 15px 0; text-align: center; } .guide-tabs { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; } .guide-tab { padding: 8px 16px; background: rgba(30, 30, 50, 0.8); border: 1px solid #444; border-radius: 6px; color: #888; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; } .guide-tab:hover { border-color: #666; color: #aaa; } .guide-tab.active { background: linear-gradient(135deg, rgba(153, 102, 255, 0.3) 0%, rgba(102, 51, 204, 0.3) 100%); border-color: var(--purple); color: var(--purple); } .guide-body { flex: 1; overflow-y: auto; padding: 20px; } .guide-section { display: none; } .guide-section.active { display: block; animation: fadeIn 0.3s ease; } .guide-story-chapter { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 215, 0, 0.2); text-align: center; } .guide-story-chapter:last-child { border-bottom: none; margin-bottom: 0; } .guide-story-chapter .story-icon { font-size: 2.5rem; margin-bottom: 10px; } .guide-story-chapter .story-title { color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.2rem; margin: 0 0 12px 0; letter-spacing: 2px; } .guide-story-chapter .story-text { text-align: left; } .guide-story-chapter .story-text p { color: #ccc; font-size: 0.9rem; line-height: 1.6; margin: 0 0 8px 0; } .guide-story-chapter .story-highlight { color: var(--gold); font-style: italic; font-weight: bold; } .guide-story-chapter .story-gold { color: var(--gold); font-weight: bold; } .guide-story-chapter .story-danger { color: #ff6b6b; font-weight: bold; } .guide-section h3 { color: var(--purple); font-family: 'Cinzel', serif; margin: 0 0 10px 0; font-size: 1.1rem; } .guide-section p { color: #ccc; font-size: 0.9rem; line-height: 1.5; margin: 0 0 12px 0; } .guide-section strong { color: var(--gold); } .btn-start-tutorial { padding: 10px 20px; background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); border: none; border-radius: 8px; color: #1a1a2e; cursor: pointer; font-weight: bold; transition: all 0.2s; } .btn-start-tutorial:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } /* Machine Rules Cards */ .machine-rules-grid { display: grid; gap: 12px; margin-top: 15px; } .machine-rule-card { background: rgba(30, 30, 50, 0.6); border: 1px solid #444; border-radius: 8px; padding: 12px; } .machine-rule-card h4 { color: var(--gold); font-size: 0.95rem; margin: 0 0 5px 0; } .machine-rule-card p { color: #aaa; font-size: 0.8rem; margin: 0; line-height: 1.4; } /* Items Reference Grid */ .items-reference-grid { display: grid; gap: 10px; } .item-ref-card { display: flex; gap: 10px; background: rgba(30, 30, 50, 0.6); border: 1px solid #444; border-radius: 8px; padding: 10px; align-items: flex-start; } .item-ref-icon { font-size: 1.5rem; flex-shrink: 0; } .item-ref-content h4 { color: var(--gold); font-size: 0.9rem; margin: 0 0 3px 0; } .item-ref-content p { color: #aaa; font-size: 0.8rem; margin: 0; line-height: 1.3; } /* Track 2 Cosmetics - Celestial Dawn */ .cosmetic-spin-celestial { background: linear-gradient(135deg, #1a0a00 0%, #ff6b00 30%, #ffd700 50%, #ff9500 70%, #1a0a00 100%) !important; border: 3px solid #ffd700 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 107, 0, 0.6) !important; box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 149, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important; animation: celestialBtnGlow 3s ease-in-out infinite !important; } @keyframes celestialBtnGlow { 0%, 100% { filter: brightness(1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 149, 0, 0.4); } 50% { filter: brightness(1.2); box-shadow: 0 0 35px rgba(255, 215, 0, 0.8), 0 0 70px rgba(255, 149, 0, 0.6); } } .cosmetic-reel-celestial { border: 4px solid #ffd700 !important; background: linear-gradient(145deg, #1a0a00, #3d1f00, #5a2d00) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 107, 0, 0.3) !important; border-radius: 12px !important; } .cosmetic-reel-celestial .reel { border: 3px solid #ff9500 !important; box-shadow: 0 0 15px rgba(255, 149, 0, 0.5) !important; } .cosmetic-bg-celestial { background: linear-gradient(180deg, #0a0500 0%, #1a0f05 15%, #4a2000 35%, #ff6b00 55%, #ffd700 70%, #ff9500 85%, #3d1f00 100%) !important; animation: celestialBgPulse 6s ease-in-out infinite !important; } @keyframes celestialBgPulse { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.1); } } /* Track 2 Cosmetics - Ocean Depths */ .cosmetic-spin-ocean { background: linear-gradient(135deg, #001a33 0%, #003366 30%, #0066cc 50%, #0099ff 70%, #001a33 100%) !important; border: 3px solid #00bfff !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(0, 191, 255, 0.9), 0 0 20px rgba(0, 102, 204, 0.6) !important; box-shadow: 0 0 25px rgba(0, 191, 255, 0.6), 0 0 50px rgba(0, 102, 204, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important; animation: oceanBtnWave 4s ease-in-out infinite !important; } @keyframes oceanBtnWave { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-2px); filter: brightness(1.15); } } .cosmetic-reel-ocean { border: 4px solid #00bfff !important; background: linear-gradient(145deg, #001020, #002040, #003060) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 191, 255, 0.5), 0 0 60px rgba(0, 102, 204, 0.3) !important; border-radius: 12px !important; } .cosmetic-reel-ocean .reel { border: 3px solid #0099ff !important; box-shadow: 0 0 15px rgba(0, 153, 255, 0.5) !important; } .cosmetic-bg-ocean { background: linear-gradient(180deg, #051828 0%, #0a2540 20%, #103a60 40%, #1a5580 60%, #103a60 80%, #051828 100%) !important; animation: oceanBgFlow 8s ease-in-out infinite !important; } @keyframes oceanBgFlow { 0%, 100% { background-position: 0% 0%; filter: brightness(0.95); } 50% { background-position: 0% 10%; filter: brightness(1.1); } } /* Track 2 Cosmetics - Volcanic Forge */ .cosmetic-spin-volcanic { background: linear-gradient(135deg, #1a0500 0%, #660000 30%, #cc3300 50%, #ff6600 70%, #1a0500 100%) !important; border: 3px solid #ff4500 !important; color: #ffffff !important; text-shadow: 0 0 10px rgba(255, 69, 0, 0.9), 0 0 20px rgba(204, 51, 0, 0.6) !important; box-shadow: 0 0 25px rgba(255, 69, 0, 0.6), 0 0 50px rgba(204, 51, 0, 0.4), inset 0 2px 4px rgba(255, 200, 100, 0.3) !important; animation: volcanicBtnPulse 2s ease-in-out infinite !important; } @keyframes volcanicBtnPulse { 0%, 100% { filter: brightness(1); } 25% { filter: brightness(1.3); } 50% { filter: brightness(1); } 75% { filter: brightness(1.2); } } .cosmetic-reel-volcanic { border: 4px solid #ff4500 !important; background: linear-gradient(145deg, #1a0500, #330a00, #4a0f00) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 69, 0, 0.5), 0 0 60px rgba(204, 51, 0, 0.3) !important; border-radius: 12px !important; animation: volcanicBorderGlow 3s ease-in-out infinite !important; } @keyframes volcanicBorderGlow { 0%, 100% { border-color: #ff4500; } 50% { border-color: #ff6600; } } .cosmetic-reel-volcanic .reel { border: 3px solid #cc3300 !important; box-shadow: 0 0 15px rgba(204, 51, 0, 0.5) !important; } .cosmetic-bg-volcanic { background: radial-gradient(ellipse at 40% 80%, rgba(255, 200, 0, 0.15) 0%, transparent 40%), radial-gradient(ellipse at 70% 50%, rgba(255, 120, 0, 0.12) 0%, transparent 35%), linear-gradient(180deg, #1a0800 0%, #2e0e00 20%, #5a1a00 40%, #8b2000 55%, #cc3300 65%, #ff5500 75%, #5a1a00 90%, #1a0800 100%) !important; animation: volcanicBgPulse 4s ease-in-out infinite !important; } @keyframes volcanicBgPulse { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.15); } } /* Developer Mode Cosmetics - Secret Easter Egg */ .cosmetic-spin-developer { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important; border: 3px dashed #00ff88 !important; color: #00ff88 !important; text-shadow: none !important; box-shadow: 0 0 10px rgba(0, 255, 136, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5) !important; font-family: 'Courier New', monospace !important; position: relative; } .cosmetic-spin-developer::before { content: '[ ]'; position: absolute; top: 2px; left: 5px; font-size: 0.6rem; color: #00ff88; opacity: 0.5; } .cosmetic-border-developer { border: 3px dashed #00ff88 !important; background: repeating-linear-gradient( 0deg, transparent, transparent 20px, rgba(0, 255, 136, 0.03) 20px, rgba(0, 255, 136, 0.03) 21px ), repeating-linear-gradient( 90deg, transparent, transparent 20px, rgba(0, 255, 136, 0.03) 20px, rgba(0, 255, 136, 0.03) 21px ) !important; box-shadow: 0 0 15px rgba(0, 255, 136, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.3) !important; position: relative; } .cosmetic-border-developer::before { content: 'DEBUG'; position: absolute; top: -10px; left: 10px; font-size: 0.6rem; color: #00ff88; background: #1a1a1a; padding: 0 5px; font-family: 'Courier New', monospace; z-index: 10; } .cosmetic-bg-developer { background: repeating-linear-gradient( 0deg, transparent, transparent 40px, rgba(0, 255, 136, 0.05) 40px, rgba(0, 255, 136, 0.05) 41px ), repeating-linear-gradient( 90deg, transparent, transparent 40px, rgba(0, 255, 136, 0.05) 40px, rgba(0, 255, 136, 0.05) 41px ), linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important; position: relative; } .cosmetic-bg-developer::before { content: '// DEVELOPER MODE ACTIVE'; position: fixed; bottom: 10px; right: 10px; font-size: 0.7rem; color: #00ff88; font-family: 'Courier New', monospace; opacity: 0.4; pointer-events: none; z-index: 1000; } /* Developer Mode Unlock Modal */ .developer-unlock-content { max-width: 360px; text-align: center; padding: 2rem; background: linear-gradient(145deg, #0a0a0a, #1a1a1a); border: 3px dashed #00ff88; position: relative; overflow: hidden; } .developer-unlock-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.03) 2px, rgba(0, 255, 136, 0.03) 4px ); pointer-events: none; z-index: 0; animation: scanlines 0.1s linear infinite; } .developer-unlock-content > * { position: relative; z-index: 1; } @keyframes scanlines { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } .developer-unlock-glitch { margin-bottom: 1rem; } .glitch-text { font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: bold; color: #00ff88; position: relative; display: inline-block; animation: glitch 0.3s infinite; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-text::before { color: #ff0080; animation: glitch-1 0.2s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); } .glitch-text::after { color: #00ffff; animation: glitch-2 0.3s infinite; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); } @keyframes glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 2px); } } @keyframes glitch-1 { 0%, 100% { transform: translate(0); } 20% { transform: translate(2px, -1px); } 40% { transform: translate(-2px, 1px); } 60% { transform: translate(1px, 1px); } 80% { transform: translate(-1px, -2px); } } @keyframes glitch-2 { 0%, 100% { transform: translate(0); } 20% { transform: translate(-1px, 2px); } 40% { transform: translate(1px, -2px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(-2px, -1px); } } .developer-unlock-icon { font-size: 4rem; margin: 1rem 0; animation: iconPulse 1s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #00ff88); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #00ff88); } } .developer-unlock-title { font-family: 'Courier New', monospace; color: #00ff88; font-size: 1.3rem; margin-bottom: 0.5rem; text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } .developer-unlock-desc { color: #888; font-size: 0.9rem; margin-bottom: 1rem; } .developer-unlock-items { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .developer-unlock-items span { background: rgba(0, 255, 136, 0.1); border: 1px dashed #00ff88; padding: 0.5rem 0.8rem; border-radius: 4px; font-size: 0.85rem; color: #00ff88; font-family: 'Courier New', monospace; } .developer-btn { background: linear-gradient(135deg, #00ff88, #00cc6a); color: #0a0a0a; border: 2px dashed #00ff88; padding: 12px 32px; font-size: 1.1rem; font-weight: bold; font-family: 'Courier New', monospace; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3); transition: all 0.2s ease; } .developer-btn:hover { background: linear-gradient(135deg, #33ff99, #00ff88); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 255, 136, 0.5); } .developer-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(0, 255, 136, 0.3); } .developer-unlock-content.glitch-active { animation: modalGlitch 0.5s ease-out; } @keyframes modalGlitch { 0% { transform: translate(0) scale(0.9); opacity: 0; } 20% { transform: translate(-5px, 3px) scale(1); opacity: 1; } 40% { transform: translate(5px, -3px) scale(1); } 60% { transform: translate(-3px, -2px) scale(1); } 80% { transform: translate(3px, 2px) scale(1); } 100% { transform: translate(0) scale(1); } } /* Sloth Unlock Modal */ .sloth-unlock-content { max-width: 360px; text-align: center; padding: 2rem; background: linear-gradient(145deg, #2d1f3d, #1a1028); border: 3px solid #ff69b4; box-shadow: 0 0 30px rgba(255, 105, 180, 0.4); position: relative; overflow: hidden; } .sloth-unlock-content::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 105, 180, 0.1) 0%, transparent 50%); animation: slothGlow 3s ease-in-out infinite; pointer-events: none; } .sloth-unlock-content > * { position: relative; z-index: 1; } @keyframes slothGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } .sloth-unlock-hearts { font-size: 2rem; animation: heartsFloat 2s ease-in-out infinite; } @keyframes heartsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .sloth-unlock-icon { font-size: 5rem; margin: 1rem 0; animation: slothBounce 1.5s ease-in-out infinite; } @keyframes slothBounce { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(5deg); } } .sloth-unlock-title { font-size: 1.5rem; color: #ff69b4; text-shadow: 0 0 10px rgba(255, 105, 180, 0.5); margin: 0.5rem 0; } .sloth-unlock-desc { color: #ddd; margin: 1rem 0; font-size: 0.95rem; } .sloth-unlock-bonus { display: flex; justify-content: center; gap: 1rem; margin: 1rem 0; } .sloth-unlock-bonus span { background: rgba(255, 105, 180, 0.2); border: 1px solid rgba(255, 105, 180, 0.5); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; color: #ffb6c1; } .sloth-unlock-quip { font-style: italic; color: #ff69b4; font-size: 1.1rem; margin: 1rem 0; animation: quipPulse 2s ease-in-out infinite; } @keyframes quipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .sloth-unlock-content.celebrate { animation: slothCelebrate 0.5s ease-out; } .sloth-btn { background: linear-gradient(135deg, #ff69b4, #ff1493); color: white; border: 2px solid #ffb6c1; padding: 12px 32px; font-size: 1.1rem; font-weight: bold; border-radius: 25px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4); transition: all 0.2s ease; } .sloth-btn:hover { background: linear-gradient(135deg, #ff85c1, #ff69b4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 105, 180, 0.5); } .sloth-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3); } @keyframes slothCelebrate { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } @keyframes hintFade { 0% { opacity: 0.7; transform: translate(-50%, -50%) rotate(180deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(1.5); } } @keyframes iosHintFloat { 0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -100%) scale(1.3); } } /* Loot Box Modal */ .loot-box-content { max-width: 340px; text-align: center; padding: 2rem; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 3px solid var(--gold-primary); overflow: hidden; position: relative; } .loot-box-title { font-family: var(--title-font); color: var(--gold-primary); font-size: 1.8rem; margin: 0 0 0.5rem 0; text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); } .loot-box-subtitle { color: #aaa; font-size: 0.95rem; margin: 0 0 1rem 0; } .loot-box-emoji { font-size: 8rem; cursor: pointer; animation: emojiShake 0.5s ease-in-out infinite; transition: transform 0.3s ease; display: inline-block; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); } .loot-box-emoji:hover { transform: scale(1.1); } .loot-box-emoji:active { transform: scale(0.95); } .loot-box-emoji.opened { animation: emojiExplode 0.6s ease-out forwards; } @keyframes emojiShake { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes emojiExplode { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .loot-box-hint { color: #888; font-size: 0.9rem; margin: 1rem 0 0 0; transition: opacity 0.3s ease; } .loot-box-hint.hidden { opacity: 0; } .streamers-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } .streamer { position: absolute; top: -20px; width: 8px; height: 20px; border-radius: 4px; animation: streamerFall 2s ease-out forwards; } @keyframes streamerFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(400px) rotate(720deg); opacity: 0; } } /* Loot Reward Modal */ .loot-reward-content { max-width: 320px; text-align: center; padding: 2rem; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 3px solid var(--gold-primary); } .loot-reward-title { font-family: var(--title-font); color: var(--gold-primary); font-size: 1.6rem; margin: 0 0 1.5rem 0; text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); } .loot-box-rewards-list { display: flex; flex-direction: column; gap: 0.5rem; z-index: 1; margin-bottom: 1rem; } .loot-reward-item { display: flex; align-items: center; gap: 0.5rem; background: rgba(212, 175, 55, 0.15); padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid rgba(212, 175, 55, 0.3); animation: rewardPop 0.5s ease backwards; } .loot-reward-item:nth-child(1) { animation-delay: 0.1s; } .loot-reward-item:nth-child(2) { animation-delay: 0.25s; } .loot-reward-item:nth-child(3) { animation-delay: 0.4s; } @keyframes rewardPop { 0% { transform: scale(0) rotate(-10deg); opacity: 0; } 70% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } } .loot-reward-item.coins { background: rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.4); } .loot-reward-icon { font-size: 1.3rem; } .loot-reward-text { color: #fff; font-weight: bold; font-size: 0.95rem; } .loot-box-claim-btn { background: linear-gradient(180deg, #d4af37, #aa8a2e); color: #1a1a2e; border: none; padding: 0.75rem 2rem; border-radius: 8px; font-family: var(--title-font); font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; z-index: 1; } .loot-box-claim-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); } .loot-box-hint { color: #888; font-size: 0.85rem; margin: 1.5rem 0 0 0; } .loot-box.opened ~ .loot-box-hint, .loot-box-contents.revealed ~ .loot-box-hint { display: none; } /* Pre-Game Modifiers Modal */ .pregame-modifiers-content { max-width: 400px; padding: 1.5rem; background: linear-gradient(145deg, #1a1a2e, #16213e); border: 3px solid var(--gold-primary); } .modifier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; } .modifier-card { background: rgba(30, 30, 50, 0.9); border: 2px solid #444; border-radius: 10px; padding: 0.8rem; cursor: pointer; transition: all 0.2s ease; position: relative; text-align: center; } .modifier-card.disabled { opacity: 0.4; cursor: not-allowed; } .modifier-card.blocked { opacity: 0.35; cursor: not-allowed; border-color: #662222; background: rgba(60, 15, 15, 0.7); } .modifier-card.blocked .modifier-icon { filter: grayscale(0.8); } .modifier-card.blocked .modifier-name { color: #886666; text-decoration: line-through; } .modifier-card.blocked .modifier-count { background: #4a1a1a; color: #886666; border-color: #662222; } .modifier-desc.blocked-reason { color: #ff6b6b; font-style: italic; font-size: 0.65rem; } .modifier-card:not(.disabled):not(.blocked):hover { border-color: var(--gold-primary); transform: scale(1.02); } .modifier-card.selected { border-color: #4ade80; background: rgba(74, 222, 128, 0.15); box-shadow: 0 0 15px rgba(74, 222, 128, 0.3); } .modifier-icon { font-size: 1.8rem; margin-bottom: 0.3rem; } .modifier-name { font-family: var(--title-font); color: var(--gold-primary); font-size: 0.85rem; margin-bottom: 0.2rem; } .modifier-desc { color: #aaa; font-size: 0.7rem; line-height: 1.2; } .modifier-count { position: absolute; top: 5px; right: 5px; background: #1a472a; color: #4ade80; font-size: 0.75rem; font-weight: bold; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; display: flex; align-items: center; justify-content: center; border: 1px solid #4ade80; } .modifier-count.empty { background: #333; color: #666; border-color: #555; } .modifier-toggle { position: absolute; bottom: 5px; right: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #555; background: transparent; } .modifier-card.selected .modifier-toggle { background: #4ade80; border-color: #4ade80; } .chaos-deal-card { grid-column: 1 / -1; border-color: #661122; background: rgba(50, 5, 15, 0.9); } .chaos-deal-card:not(.locked):not(.disabled):hover { border-color: #ff0040 !important; } .chaos-deal-card.selected { border-color: #ff0040; background: rgba(255, 0, 64, 0.12); box-shadow: 0 0 20px rgba(255, 0, 64, 0.3); } .chaos-deal-card.selected .modifier-toggle { background: #ff0040; border-color: #ff0040; } .chaos-deal-card .modifier-name { color: #ff4060; } .modifier-chaos-label { font-family: var(--title-font); font-size: 0.6rem; color: #ff0040; background: rgba(255, 0, 64, 0.15); border: 1px solid rgba(255, 0, 64, 0.3); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 0.3rem; letter-spacing: 1px; } .chaos-deal-card.locked { opacity: 0.35; cursor: not-allowed; border-color: #333; background: rgba(30, 30, 50, 0.9); } .chaos-deal-card.locked .modifier-name { color: #886666; } .chaos-deal-card.locked .modifier-chaos-label { color: #666; background: rgba(100, 100, 100, 0.15); border-color: rgba(100, 100, 100, 0.3); } .chaos-badge { animation: chaosPulse 2s ease-in-out infinite; } @keyframes chaosPulse { 0%, 100% { filter: none; } 50% { filter: hue-rotate(180deg); } } .modifier-actions { display: flex; gap: 1rem; margin-top: 1rem; } .modifier-btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-family: var(--title-font); font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .modifier-btn.skip-btn { background: #333; color: #aaa; border: 2px solid #555; } .modifier-btn.skip-btn:hover { background: #444; color: #fff; } .modifier-btn.start-btn { background: linear-gradient(180deg, #4ade80, #22c55e); color: #fff; font-weight: bold; } .modifier-btn.start-btn:hover { transform: scale(1.03); box-shadow: 0 0 15px rgba(74, 222, 128, 0.4); } /* Active Modifiers Indicator - inside stats-bar (BANK area) */ .active-modifiers-bar { position: absolute; top: 4px; right: 8px; display: flex; gap: 3px; z-index: 100; cursor: pointer; } @media (max-width: 480px) { .active-modifiers-bar { top: 2px; right: 4px; gap: 2px; } } /* Active Modifiers Info Modal */ .active-modifiers-info-content { max-width: 360px; text-align: center; } .active-modifiers-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; text-align: left; } .active-modifier-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(30, 30, 50, 0.8); border: 1px solid var(--gold-primary); border-radius: 8px; } .active-modifier-item .modifier-icon { font-size: 1.5rem; } .active-modifier-item .modifier-info { flex: 1; } .active-modifier-item .modifier-name { font-weight: 700; color: var(--gold-primary); font-size: 0.9rem; } .active-modifier-item .modifier-desc { color: #aaa; font-size: 0.8rem; margin-top: 2px; } .active-modifiers-info-content .action-btn { background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark)); color: #000; font-weight: 700; padding: 0.75rem 2rem; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; margin-top: 1rem; text-transform: uppercase; letter-spacing: 1px; } /* Save Comparison Modal */ .save-comparison-content { max-width: 500px; text-align: center; } .save-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; } .save-column { background: rgba(20, 20, 40, 0.9); border-radius: 10px; padding: 0.75rem; border: 2px solid #444; } .save-column.local-save { border-color: var(--gold-primary); } .save-column.cloud-save { border-color: var(--gold-primary); } .save-column-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 1px; } .save-column.local-save .save-column-title { color: var(--gold-primary); } .save-column.cloud-save .save-column-title { color: var(--gold-primary); } .save-details { text-align: left; font-size: 0.75rem; } .save-detail-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .save-detail-row:last-child { border-bottom: none; } .save-detail-label { color: #888; } .save-detail-value { color: #fff; font-weight: 600; } .save-detail-value.better { color: #4ade80; } .save-detail-value.worse { color: #888; } .save-comparison-actions { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; align-items: center; margin-top: 1rem; padding: 0 1rem; } .save-action-btn { width: 100%; max-width: 280px; padding: 1rem 1.5rem; border: 2px solid transparent; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s ease; } .save-action-btn.local-btn { background: linear-gradient(135deg, #4a9eff, #2563eb); border-color: #60a5fa; color: #fff; box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3); } .save-action-btn.local-btn:active { transform: scale(0.98); } .save-action-btn.cloud-btn { background: linear-gradient(135deg, #ffd700, #b8860b); border-color: #fffacd; color: #000; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); } .save-action-btn.cloud-btn:active { transform: scale(0.98); } .save-action-btn.cancel-btn { background: linear-gradient(135deg, #555, #333); border-color: #777; color: #ccc; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .save-action-btn.cancel-btn:active { transform: scale(0.98); } #save-comparison-modal.active { z-index: 20000; } @media (max-width: 480px) { .save-comparison-grid { grid-template-columns: 1fr; } } .active-modifier-badge { background: rgba(20, 20, 40, 0.95); border: 1px solid var(--gold-primary); border-radius: 6px; padding: 2px 4px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1; color: var(--gold-primary); animation: modifierPulse 2s ease-in-out infinite; } @keyframes modifierPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Mobile adjustments */ @media (max-width: 400px) { .pregame-modifiers-content { max-width: 95%; padding: 1rem; } .modifier-grid { gap: 0.5rem; } .modifier-card { padding: 0.6rem; } .modifier-icon { font-size: 1.5rem; } .modifier-name { font-size: 0.75rem; } .modifier-desc { font-size: 0.65rem; } } /* Inventory Modal */ .inventory-content { max-width: 450px; max-height: calc(80vh - 15px - env(safe-area-inset-bottom, 0px)); max-height: calc(80dvh - 15px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .inventory-sections { display: flex; flex-direction: column; gap: 1.5rem; margin: 1rem 0; } .inventory-section { background: rgba(20, 20, 40, 0.5); border-radius: 10px; padding: 1rem; border: 1px solid rgba(255, 215, 0, 0.2); } .inventory-section-title { font-family: 'Cinzel', serif; color: var(--gold-primary); font-size: 1rem; margin: 0 0 0.25rem 0; text-align: center; } .inventory-section-desc { font-size: 0.75rem; color: #999; text-align: center; margin: 0 0 0.75rem 0; } .inventory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .inventory-item { background: rgba(30, 30, 50, 0.9); border: 2px solid #444; border-radius: 8px; padding: 0.6rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; overflow: hidden; min-width: 0; } .inventory-item.has-items { border-color: var(--gold-primary); background: rgba(40, 40, 60, 0.9); } .inventory-item.empty { opacity: 0.5; } .inventory-item-icon { font-size: 1.5rem; min-width: 28px; max-width: 28px; text-align: center; flex-shrink: 0; } .inventory-item-info { flex: 1; min-width: 0; } .inventory-item-name { font-family: 'Cinzel', serif; font-size: 0.75rem; color: #fff; word-wrap: break-word; line-height: 1.2; } .inventory-item-count { font-size: 0.85rem; color: var(--gold-primary); font-weight: bold; flex-shrink: 0; min-width: 20px; text-align: right; } .inventory-item-count.zero { color: #666; } @media (max-width: 400px) { .inventory-content { max-width: 95%; padding: 1rem; } .inventory-grid { grid-template-columns: 1fr; } .inventory-item-name { font-size: 0.7rem; } } /* Item Detail Modal */ .item-detail-content { max-width: 350px; text-align: center; padding: 2rem; } .item-detail-icon { font-size: 4rem; margin-bottom: 0.5rem; } .item-detail-name { font-family: 'Cinzel', serif; color: var(--gold-primary); font-size: 1.5rem; margin: 0 0 0.5rem 0; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); } .item-detail-count { color: #60a5fa; font-size: 1rem; margin: 0 0 1rem 0; font-weight: bold; } .item-detail-desc { color: #cbd5e1; font-size: 0.95rem; line-height: 1.5; margin: 0; text-align: left; } .item-detail-use-btn { display: block; width: 80%; margin: 14px auto 4px; padding: 10px 0; background: linear-gradient(135deg, #2d6a2d, #3a8a3a); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; transition: transform 0.1s; } .item-detail-use-btn:active { transform: scale(0.97); } .inventory-item { cursor: pointer; } .inventory-item:hover { transform: scale(1.02); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } /* Fix for mobile touch devices - prevent sticky hover states */ /* Uses .touch-device class added by JavaScript for reliable detection */ @media (hover: none), (pointer: coarse) { .menu-option-btn:hover { transform: none !important; border-color: #334155 !important; background: linear-gradient(to bottom, #1e293b, #0f172a) !important; } button:hover, [class*="btn"]:hover, .shop-item:hover, .cosmetic-option:hover, .machine-card:hover, .inventory-item:hover, .trophy-item:hover, .card:hover, .reel-card:hover, a:hover { transform: none !important; } } body.touch-device .menu-option-btn:hover { transform: none !important; border-color: #334155 !important; background: linear-gradient(to bottom, #1e293b, #0f172a) !important; } body.touch-device button:hover, body.touch-device [class*="btn"]:hover, body.touch-device .shop-item:hover, body.touch-device .cosmetic-option:hover, body.touch-device .machine-card:hover, body.touch-device .inventory-item:hover, body.touch-device .trophy-item:hover, body.touch-device .card:hover, body.touch-device .reel-card:hover, body.touch-device .scissors-card-item:hover, body.touch-device .marker-card-btn:hover, body.touch-device a:hover { transform: none !important; } /* Use active state for touch feedback */ body.touch-device button:active, body.touch-device [class*="btn"]:active, body.touch-device .menu-option-btn:active, body.touch-device .shop-item:active, body.touch-device .cosmetic-option:active, body.touch-device .machine-card:active { transform: scale(0.97) !important; opacity: 0.85 !important; } /* Preserve floating back button on touch devices */ @media (hover: none), (pointer: coarse) { .floating-back-btn:hover, .floating-back-btn:active { transform: none !important; } } body.touch-device .floating-back-btn:hover, body.touch-device .floating-back-btn:active { transform: none !important; opacity: 1 !important; } /* Android Install Prompt */ .android-install-prompt { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100001; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: android-slide-up 0.4s ease-out; } .android-install-prompt.active { display: block; } @keyframes android-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .android-install-content { position: relative; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border: 2px solid #4caf50; border-radius: 20px; padding: 24px 20px 20px; max-width: 400px; margin: 0 auto; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(76, 175, 80, 0.2); text-align: center; } .android-install-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #888; font-size: 28px; cursor: pointer; line-height: 1; padding: 4px; } .android-install-icon { font-size: 48px; margin-bottom: 12px; } .android-install-title { color: #fff; font-size: 20px; margin: 0 0 8px; font-family: var(--display-font); } .android-install-text { color: #aaa; font-size: 14px; margin: 0 0 20px; } .android-install-buttons { display: flex; flex-direction: column; gap: 12px; } .android-install-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%); color: #fff; border: none; border-radius: 12px; padding: 14px 24px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: var(--display-font); box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); transition: transform 0.2s, box-shadow 0.2s; } .android-install-btn:active { transform: scale(0.98); } .android-install-btn svg { stroke: currentColor; } .android-install-later { background: transparent; color: #888; border: 1px solid #444; border-radius: 12px; padding: 12px 24px; font-size: 14px; cursor: pointer; font-family: var(--display-font); transition: background 0.2s; } .android-install-later:active { background: rgba(255, 255, 255, 0.05); } /* iOS Install Prompt */ .ios-install-prompt { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100001; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: ios-slide-up 0.4s ease-out; } .ios-install-prompt.active { display: block; } @keyframes ios-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ios-install-content { position: relative; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border: 2px solid var(--gold); border-radius: 20px; padding: 24px 20px 20px; max-width: 400px; margin: 0 auto; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2); text-align: center; } .ios-install-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #64748b; font-size: 28px; cursor: pointer; line-height: 1; padding: 0; width: 32px; height: 32px; } .ios-install-close:hover { color: #fff; } .ios-install-icon { font-size: 48px; margin-bottom: 12px; } .ios-install-title { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--gold); margin: 0 0 8px; } .ios-install-text { color: #94a3b8; font-size: 0.9rem; margin: 0 0 16px; } .ios-install-steps { text-align: left; margin-bottom: 20px; } .ios-install-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(100, 116, 139, 0.3); } .ios-install-step:last-child { border-bottom: none; } .ios-step-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--gold); color: #000; font-weight: bold; border-radius: 50%; font-size: 0.9rem; flex-shrink: 0; } .ios-step-text { color: #cbd5e1; font-size: 0.9rem; } .ios-step-text strong { color: #fff; } .ios-share-icon { vertical-align: middle; margin-left: 4px; color: #60a5fa; } .ios-install-dismiss { background: linear-gradient(180deg, var(--gold-dark), #8b6914); color: #000; border: none; padding: 14px 40px; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; border-radius: 10px; cursor: pointer; width: 100%; text-transform: uppercase; transition: all 0.2s; } .ios-install-dismiss:hover { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); transform: scale(1.02); } /* Custom Game Dialog (replaces native alert/confirm) */ .game-dialog-content { max-width: 380px; width: 90%; padding: 25px; text-align: center; } .game-dialog-message { font-family: 'Courier New', monospace; font-size: var(--font-md); color: var(--gold-light); line-height: 1.5; margin-bottom: 20px; white-space: pre-line; } .game-dialog-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .game-dialog-btn { font-family: 'Courier New', monospace; font-weight: bold; font-size: var(--font-md); padding: 10px 24px; border: 2px solid var(--gold); border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; min-width: 100px; } .game-dialog-btn:hover { transform: scale(1.05); } .game-dialog-btn.btn-confirm { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #000; } .game-dialog-btn.btn-confirm:hover { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } .game-dialog-btn.btn-neutral { background: rgba(255, 255, 255, 0.1); color: #ccc; border: 1px solid rgba(255, 255, 255, 0.2); } .game-dialog-btn.btn-neutral:hover { background: rgba(255, 255, 255, 0.2); } .game-dialog-btn.btn-cancel { background: transparent; color: var(--gold); } .game-dialog-btn.btn-cancel:hover { background: rgba(255, 215, 0, 0.1); } #game-dialog-modal.active { z-index: 30000; } /* Desktop: Combined side panel for Bank/Win + VIP */ :where(html.layout-desktop) #desktop-side-panel { position: fixed; width: 280px; z-index: 100; display: flex; flex-direction: column; gap: 0; pointer-events: auto; box-sizing: border-box; overflow: hidden; } :where(html.layout-desktop) #desktop-side-panel .stats-bar { position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.88) !important; border: 1px solid var(--gold-dark) !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; padding: 16px 20px !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.08) !important; margin-bottom: 0 !important; font-size: 1rem !important; overflow: hidden; } :where(html.layout-desktop) #desktop-side-panel .stats-bar .credit-box { font-size: 1.4rem; } :where(html.layout-desktop) #desktop-side-panel .stats-bar .last-win-box { font-size: 1.1rem; } :where(html.layout-desktop) #desktop-side-panel .mobile-stats-row { display: flex !important; position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.88) !important; border: 1px solid var(--gold-dark) !important; border-top: 1px dashed rgba(255, 215, 0, 0.3) !important; border-radius: 0 0 10px 10px !important; padding: 14px 20px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.08) !important; flex-direction: column; gap: 8px; font-size: 0.9rem !important; margin-top: 0 !important; overflow: hidden; } :where(html.layout-desktop) #desktop-side-panel .mobile-stats-row .mobile-vip-header { display: block !important; font-size: 0.8rem; } :where(html.layout-desktop) #desktop-side-panel .mobile-stats-row .mobile-stat-label, :where(html.layout-desktop) #desktop-side-panel .mobile-stats-row .mobile-stat-value { font-size: 0.95rem; } :where(html.layout-desktop) #desktop-side-panel .mobile-stats-row .crown-board-container { width: 100%; max-width: 100%; margin: 0; padding: 6px 0 0 0; background: none; border: none; border-top: 1px dashed rgba(255, 215, 0, 0.35); border-radius: 0; box-shadow: none; gap: 8px; justify-content: center; } :where(html.layout-desktop) body.race-mode #desktop-side-panel .mobile-stats-row { display: flex !important; } :where(html.layout-desktop) #desktop-left-panel { position: fixed; width: 280px; z-index: 100; display: flex; flex-direction: column; gap: 0; pointer-events: auto; box-sizing: border-box; overflow: hidden; } :where(html.layout-desktop) #desktop-left-panel .log-area { position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.88) !important; border: 1px solid var(--gold-dark) !important; border-radius: 10px !important; padding: 14px 16px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.08) !important; margin-top: 0 !important; font-size: 0.85rem !important; max-height: 300px; min-height: 120px; overflow: hidden; overflow-y: auto; word-break: break-word; overflow-wrap: break-word; } @media (max-width: 1280px) { /* DESKTOP_LAYOUT_BREAKPOINT (capped at 1280) */ :where(html.layout-desktop) #desktop-side-panel { width: 220px; } :where(html.layout-desktop) #desktop-left-panel { width: 220px; } } /* ===== TRACK 3 NEON COSMETICS ===== */ /* --- NEON BLUE --- */ .cosmetic-spin-neon-blue { background: linear-gradient(180deg, #66f0ff 0%, #00d4ff 30%, #00aaff 70%, #0088ee 100%) !important; box-shadow: 0 0 25px rgba(0, 230, 255, 1), 0 0 50px rgba(0, 200, 255, 0.7), 0 0 80px rgba(0, 180, 255, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important; color: #001133 !important; text-shadow: 0 0 12px rgba(100, 240, 255, 1) !important; animation: neonBluePulse 1.5s ease-in-out infinite !important; } @keyframes neonBluePulse { 0%, 100% { box-shadow: 0 0 25px rgba(0, 230, 255, 1), 0 0 50px rgba(0, 200, 255, 0.7), 0 0 80px rgba(0, 180, 255, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7); } 50% { box-shadow: 0 0 40px rgba(0, 240, 255, 1), 0 0 70px rgba(0, 210, 255, 0.9), 0 0 100px rgba(0, 200, 255, 0.5), 0 0 130px rgba(0, 180, 255, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.7); } } .cosmetic-reel-neon-blue { border: 3px solid #33eeff !important; box-shadow: 0 0 20px rgba(0, 230, 255, 0.9), 0 0 40px rgba(0, 200, 255, 0.6), 0 0 60px rgba(0, 180, 255, 0.3), inset 0 0 20px rgba(0, 230, 255, 0.2) !important; animation: neonBlueFramePulse 2s ease-in-out infinite !important; } @keyframes neonBlueFramePulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 230, 255, 0.9), 0 0 40px rgba(0, 200, 255, 0.6), 0 0 60px rgba(0, 180, 255, 0.3), inset 0 0 20px rgba(0, 230, 255, 0.2); border-color: #33eeff; } 50% { box-shadow: 0 0 30px rgba(0, 240, 255, 1), 0 0 60px rgba(0, 220, 255, 0.8), 0 0 90px rgba(0, 200, 255, 0.4), inset 0 0 25px rgba(0, 240, 255, 0.3); border-color: #88f5ff; } } .cosmetic-bg-neon-blue { background: repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(0, 240, 255, 0.15) 50px, rgba(0, 240, 255, 0.15) 51px), repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(0, 240, 255, 0.15) 50px, rgba(0, 240, 255, 0.15) 51px), radial-gradient(ellipse at 20% 20%, rgba(0, 240, 255, 0.5) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(0, 200, 255, 0.45) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(0, 180, 255, 0.35) 0%, transparent 60%), linear-gradient(180deg, #003355 0%, #005588 20%, #0077bb 40%, #0099dd 55%, #0077bb 70%, #005588 85%, #003355 100%) !important; animation: neonBlueBgPulse 3s ease-in-out infinite !important; } @keyframes neonBlueBgPulse { 0%, 100% { filter: brightness(1.1); } 50% { filter: brightness(1.5); } } /* --- NEON GREEN --- */ .cosmetic-spin-neon-green { background: linear-gradient(180deg, #66ff99 0%, #00ff66 30%, #00ee55 70%, #00cc44 100%) !important; box-shadow: 0 0 25px rgba(0, 255, 100, 1), 0 0 50px rgba(0, 255, 80, 0.7), 0 0 80px rgba(0, 230, 60, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important; color: #001a00 !important; text-shadow: 0 0 12px rgba(100, 255, 150, 1) !important; animation: neonGreenPulse 1.5s ease-in-out infinite !important; } @keyframes neonGreenPulse { 0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 100, 1), 0 0 50px rgba(0, 255, 80, 0.7), 0 0 80px rgba(0, 230, 60, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7); } 50% { box-shadow: 0 0 40px rgba(0, 255, 120, 1), 0 0 70px rgba(0, 255, 100, 0.9), 0 0 100px rgba(0, 240, 80, 0.5), 0 0 130px rgba(0, 220, 60, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.7); } } .cosmetic-reel-neon-green { border: 3px solid #33ff88 !important; box-shadow: 0 0 20px rgba(0, 255, 100, 0.9), 0 0 40px rgba(0, 255, 80, 0.6), 0 0 60px rgba(0, 230, 60, 0.3), inset 0 0 20px rgba(0, 255, 100, 0.2) !important; animation: neonGreenFramePulse 2s ease-in-out infinite !important; } @keyframes neonGreenFramePulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 100, 0.9), 0 0 40px rgba(0, 255, 80, 0.6), 0 0 60px rgba(0, 230, 60, 0.3), inset 0 0 20px rgba(0, 255, 100, 0.2); border-color: #33ff88; } 50% { box-shadow: 0 0 30px rgba(0, 255, 120, 1), 0 0 60px rgba(0, 255, 100, 0.8), 0 0 90px rgba(0, 240, 80, 0.4), inset 0 0 25px rgba(0, 255, 120, 0.3); border-color: #88ffbb; } } .cosmetic-bg-neon-green { background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(0, 255, 120, 0.15) 40px, rgba(0, 255, 120, 0.15) 41px), repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(0, 255, 120, 0.15) 40px, rgba(0, 255, 120, 0.15) 41px), radial-gradient(ellipse at 30% 30%, rgba(0, 255, 120, 0.5) 0%, transparent 45%), radial-gradient(ellipse at 70% 70%, rgba(0, 240, 100, 0.45) 0%, transparent 45%), radial-gradient(ellipse at 50% 50%, rgba(0, 220, 80, 0.35) 0%, transparent 55%), linear-gradient(180deg, #004d1a 0%, #007a2e 20%, #00a843 40%, #00cc55 55%, #00a843 70%, #007a2e 85%, #004d1a 100%) !important; animation: neonGreenBgPulse 3s ease-in-out infinite !important; } @keyframes neonGreenBgPulse { 0%, 100% { filter: brightness(1.1); } 50% { filter: brightness(1.5); } } /* --- NEON PINK --- */ .cosmetic-spin-neon-pink { background: linear-gradient(180deg, #ff77cc 0%, #ff33aa 30%, #ff0099 70%, #ee0088 100%) !important; box-shadow: 0 0 25px rgba(255, 50, 170, 1), 0 0 50px rgba(255, 0, 150, 0.7), 0 0 80px rgba(255, 0, 130, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important; color: #fff !important; text-shadow: 0 0 12px rgba(255, 150, 220, 1) !important; animation: neonPinkPulse 1.5s ease-in-out infinite !important; } @keyframes neonPinkPulse { 0%, 100% { box-shadow: 0 0 25px rgba(255, 50, 170, 1), 0 0 50px rgba(255, 0, 150, 0.7), 0 0 80px rgba(255, 0, 130, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.7); } 50% { box-shadow: 0 0 40px rgba(255, 80, 190, 1), 0 0 70px rgba(255, 30, 170, 0.9), 0 0 100px rgba(255, 0, 150, 0.5), 0 0 130px rgba(255, 0, 130, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.7); } } .cosmetic-reel-neon-pink { border: 3px solid #ff55bb !important; box-shadow: 0 0 20px rgba(255, 50, 170, 0.9), 0 0 40px rgba(255, 0, 150, 0.6), 0 0 60px rgba(255, 0, 130, 0.3), inset 0 0 20px rgba(255, 50, 170, 0.2) !important; animation: neonPinkFramePulse 2s ease-in-out infinite !important; } @keyframes neonPinkFramePulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 50, 170, 0.9), 0 0 40px rgba(255, 0, 150, 0.6), 0 0 60px rgba(255, 0, 130, 0.3), inset 0 0 20px rgba(255, 50, 170, 0.2); border-color: #ff55bb; } 50% { box-shadow: 0 0 30px rgba(255, 80, 190, 1), 0 0 60px rgba(255, 30, 170, 0.8), 0 0 90px rgba(255, 0, 150, 0.4), inset 0 0 25px rgba(255, 80, 190, 0.3); border-color: #ff99dd; } } .cosmetic-bg-neon-pink { background: radial-gradient(circle at 20% 30%, rgba(255, 80, 190, 0.5) 0%, transparent 40%), radial-gradient(circle at 80% 60%, rgba(255, 30, 170, 0.45) 0%, transparent 40%), radial-gradient(circle at 50% 90%, rgba(255, 120, 210, 0.35) 0%, transparent 35%), radial-gradient(circle at 40% 60%, rgba(255, 0, 150, 0.3) 0%, transparent 35%), linear-gradient(180deg, #550033 0%, #880055 20%, #aa0066 40%, #cc0077 55%, #aa0066 70%, #880055 85%, #550033 100%) !important; animation: neonPinkBgPulse 3s ease-in-out infinite !important; } @keyframes neonPinkBgPulse { 0%, 100% { filter: brightness(1.1); } 50% { filter: brightness(1.5); } } /* Preview classes for Royal Shoppe - Neon Track 3 */ .preview-spin-neon_blue { background: linear-gradient(180deg, #66f0ff 0%, #00aaff 100%); box-shadow: 0 0 15px rgba(0, 230, 255, 0.9); } .preview-spin-neon_green { background: linear-gradient(180deg, #66ff99 0%, #00ee55 100%); box-shadow: 0 0 15px rgba(0, 255, 100, 0.9); } .preview-spin-neon_pink { background: linear-gradient(180deg, #ff77cc 0%, #ff0099 100%); box-shadow: 0 0 15px rgba(255, 50, 170, 0.9); } .preview-border-neon_blue { border-color: #33eeff; box-shadow: 0 0 12px rgba(0, 230, 255, 0.8); } .preview-border-neon_green { border-color: #33ff88; box-shadow: 0 0 12px rgba(0, 255, 100, 0.8); } .preview-border-neon_pink { border-color: #ff55bb; box-shadow: 0 0 12px rgba(255, 50, 170, 0.8); } .preview-bg-neon_blue { background: linear-gradient(180deg, #005588 0%, #0099dd 50%, #005588 100%); box-shadow: inset 0 0 20px rgba(0, 230, 255, 0.6); } .preview-bg-neon_green { background: linear-gradient(180deg, #007a2e 0%, #00cc55 50%, #007a2e 100%); box-shadow: inset 0 0 20px rgba(0, 255, 100, 0.6); } .preview-bg-neon_pink { background: linear-gradient(180deg, #880055 0%, #cc0077 50%, #880055 100%); box-shadow: inset 0 0 20px rgba(255, 50, 170, 0.6); } /* === REEL ENCHANTMENT VISUALS === */ /* --- Wrapper-level enchantment aura (covers the entire reel slot) --- */ .enchant-wrap-1, .enchant-wrap-2, .enchant-wrap-3 { position: relative; } .enchant-frame { position: absolute; inset: -6px; pointer-events: none; z-index: 20; border-radius: 14px; overflow: hidden; } /* Level 1 — Silver: subtle steady glow, thin border shimmer */ .enchant-frame-1 { border: 2px solid rgba(192, 192, 192, 0.5); box-shadow: 0 0 12px 3px rgba(192, 192, 192, 0.3), inset 0 0 10px rgba(192, 192, 192, 0.1); animation: wrapPulse1 3.5s ease-in-out infinite; } .enchant-frame-1 .enchant-border-glow { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(200,200,210,0.1) 0%, transparent 30%, transparent 70%, rgba(200,200,210,0.1) 100%); } @keyframes wrapPulse1 { 0%, 100% { box-shadow: 0 0 12px 3px rgba(192, 192, 192, 0.3), inset 0 0 10px rgba(192, 192, 192, 0.1); border-color: rgba(192,192,192,0.5); } 50% { box-shadow: 0 0 18px 5px rgba(210, 210, 220, 0.45), inset 0 0 14px rgba(200, 200, 210, 0.15); border-color: rgba(210,210,220,0.7); } } /* Level 2 — Gold: warm radiant glow, rotating light sweep */ .enchant-frame-2 { border: 2px solid rgba(255, 200, 0, 0.6); box-shadow: 0 0 16px 4px rgba(255, 200, 0, 0.4), 0 0 30px 8px rgba(255, 180, 0, 0.15), inset 0 0 12px rgba(255, 215, 0, 0.1); animation: wrapPulse2 2.5s ease-in-out infinite; } .enchant-frame-2 .enchant-border-glow { position: absolute; inset: -60%; width: 220%; height: 220%; background: conic-gradient(from 0deg, transparent 0%, rgba(255,215,0,0.12) 15%, transparent 30%, rgba(255,200,0,0.08) 50%, transparent 65%); animation: enchantRotate 5s linear infinite; } @keyframes wrapPulse2 { 0%, 100% { box-shadow: 0 0 16px 4px rgba(255, 200, 0, 0.4), 0 0 30px 8px rgba(255, 180, 0, 0.15), inset 0 0 12px rgba(255, 215, 0, 0.1); border-color: rgba(255,200,0,0.6); } 50% { box-shadow: 0 0 22px 6px rgba(255, 210, 30, 0.55), 0 0 40px 12px rgba(255, 190, 0, 0.2), inset 0 0 16px rgba(255, 220, 50, 0.15); border-color: rgba(255,220,50,0.8); } } /* Level 3 — Platinum/Arcane: dramatic purple aura, multi-layer glow, shimmer sweep */ .enchant-frame-3 { border: 2px solid rgba(180, 140, 255, 0.7); box-shadow: 0 0 20px 6px rgba(180, 140, 255, 0.5), 0 0 40px 12px rgba(200, 160, 255, 0.25), 0 0 60px 20px rgba(160, 120, 240, 0.1), inset 0 0 14px rgba(200, 180, 255, 0.15); animation: wrapPulse3 2s ease-in-out infinite; } .enchant-frame-3 .enchant-border-glow { position: absolute; inset: -60%; width: 220%; height: 220%; background: conic-gradient(from 0deg, transparent 0%, rgba(180,140,255,0.15) 10%, transparent 25%, rgba(200,160,255,0.1) 40%, transparent 55%, rgba(160,120,240,0.12) 70%, transparent 85%); animation: enchantRotate 3.5s linear infinite; } .enchant-frame-3::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), rgba(200,180,255,0.08), transparent); animation: enchantShimmer 2.5s ease-in-out infinite; z-index: 2; } .enchant-frame-3::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(180,140,255,0.12) 0%, transparent 20%, transparent 80%, rgba(180,140,255,0.12) 100%); } @keyframes wrapPulse3 { 0%, 100% { box-shadow: 0 0 20px 6px rgba(180, 140, 255, 0.5), 0 0 40px 12px rgba(200, 160, 255, 0.25), 0 0 60px 20px rgba(160, 120, 240, 0.1); border-color: rgba(180,140,255,0.7); } 50% { box-shadow: 0 0 28px 10px rgba(200, 160, 255, 0.65), 0 0 50px 16px rgba(220, 180, 255, 0.3), 0 0 70px 24px rgba(180, 140, 255, 0.15); border-color: rgba(200,170,255,0.9); } } @keyframes enchantRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes enchantShimmer { 0%, 100% { left: -120%; } 50% { left: 160%; } } /* Floating particles inside the enchant frame */ .enchant-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .enchant-particle { position: absolute; bottom: -4px; width: 3px; height: 3px; border-radius: 50%; opacity: 0; animation: particleFloat 3s ease-out infinite; } .enchant-frame-1 .enchant-particle { background: rgba(220, 220, 230, 0.7); } .enchant-frame-2 .enchant-particle { background: rgba(255, 220, 80, 0.8); } .enchant-frame-3 .enchant-particle { background: rgba(200, 170, 255, 0.85); width: 4px; height: 4px; } @keyframes particleFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 0.8; } 80% { opacity: 0.3; } 100% { transform: translateY(-120px) scale(0.3); opacity: 0; } } /* Card-level enchantment tint (subtle inner effect on the card itself) */ .enchanted-1 { box-shadow: inset 0 0 8px rgba(192, 192, 192, 0.2) !important; border-color: rgba(192, 192, 192, 0.5) !important; } .enchanted-2 { box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2) !important; border-color: rgba(255, 200, 0, 0.6) !important; } .enchanted-3 { box-shadow: inset 0 0 12px rgba(180, 140, 255, 0.25) !important; border-color: rgba(200, 170, 255, 0.7) !important; } /* === WAX SEAL BADGE ON CARDS (Crown Shape) === */ .seal-badge { position: absolute; bottom: 1px; right: 1px; z-index: 5; pointer-events: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .seal-badge .seal-crown { position: relative; width: 18px; height: 14px; clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 35% 30%, 50% 0%, 65% 30%, 80% 0%, 100% 40%, 100% 100%); display: flex; align-items: center; justify-content: center; } .seal-badge .seal-gem { position: absolute; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; } .seal-badge.seal-silver .seal-crown { background: linear-gradient(135deg, #d0d0d0, #a0a0a0, #c8c8c8); box-shadow: 0 0 4px rgba(192, 192, 192, 0.6); } .seal-badge.seal-silver .seal-gem { background: radial-gradient(circle, #fff, #c0c0c0); } .seal-badge.seal-gold .seal-crown { background: linear-gradient(135deg, #ffd700, #daa520, #ffec8b); box-shadow: 0 0 6px rgba(255, 215, 0, 0.7); } .seal-badge.seal-gold .seal-gem { background: radial-gradient(circle, #fffacd, #ffd700); } .seal-badge.seal-platinum .seal-crown { background: linear-gradient(135deg, #e8e0ff, #b8b0f0, #d8d0ff, #a8a0e8); box-shadow: 0 0 8px rgba(180, 160, 255, 0.8), 0 0 16px rgba(200, 180, 255, 0.4); animation: platinum-shimmer 2s ease-in-out infinite; } .seal-badge.seal-platinum .seal-gem { background: radial-gradient(circle, #fff, #d0c0ff); box-shadow: 0 0 3px rgba(200, 180, 255, 0.9); } @keyframes platinum-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .list-seal-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; vertical-align: middle; } .list-seal-badge .seal-crown { position: relative; width: 14px; height: 11px; clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 35% 30%, 50% 0%, 65% 30%, 80% 0%, 100% 40%, 100% 100%); display: flex; align-items: center; justify-content: center; } .list-seal-badge .seal-gem { position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; } .list-seal-badge.seal-silver .seal-crown { background: linear-gradient(135deg, #d0d0d0, #a0a0a0, #c8c8c8); } .list-seal-badge.seal-silver .seal-gem { background: radial-gradient(circle, #fff, #c0c0c0); } .list-seal-badge.seal-gold .seal-crown { background: linear-gradient(135deg, #ffd700, #daa520, #ffec8b); } .list-seal-badge.seal-gold .seal-gem { background: radial-gradient(circle, #fffacd, #ffd700); } .list-seal-badge.seal-platinum .seal-crown { background: linear-gradient(135deg, #e8e0ff, #b8b0f0, #d8d0ff); animation: platinum-shimmer 2s ease-in-out infinite; } .list-seal-badge.seal-platinum .seal-gem { background: radial-gradient(circle, #fff, #d0c0ff); } .list-marker-badge { font-size: 0.6rem; margin-left: 2px; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(255, 105, 180, 0.8)); animation: markerGlow 2s ease-in-out infinite; } .seal-tag { font-size: 0.7em; padding: 1px 3px; border-radius: 2px; margin-left: 2px; } .seal-tag.seal-silver { background: #c0c0c0; color: #333; } .seal-tag.seal-gold { background: #ffd700; color: #333; } .seal-tag.seal-platinum { background: #e0e0ff; color: #222; } .inline-seal-tag { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #8b1a2b, #6b1020); color: #f0d8c0; font-size: 0.65rem; font-weight: bold; padding: 2px 6px 2px 3px; border-radius: 3px; margin-right: 3px; vertical-align: middle; line-height: 1; border: 1px solid rgba(180, 50, 70, 0.5); } .inline-seal-tag .shop-seal-inline { width: 14px; height: 12px; } .inline-seal-tag .shop-seal-inline .seal-crown { width: 12px; height: 9px; } .inline-seal-tag .shop-seal-inline .seal-gem { width: 3px; height: 3px; } /* === ENCHANTMENT MODAL === */ .enchantment-content { max-width: 400px; text-align: center; } .enchantment-reels-grid { display: flex; gap: 15px; justify-content: center; margin: 20px 0; } .enchantment-reel-slot { flex: 1; max-width: 110px; padding: 15px 10px; border: 2px solid #555; border-radius: 10px; background: rgba(30, 30, 50, 0.8); cursor: pointer; transition: all 0.2s ease; position: relative; } .enchantment-reel-slot:hover { border-color: var(--gold); transform: scale(1.05); } .enchantment-reel-slot.enchant-active { border-color: #8b5cf6; background: rgba(80, 40, 120, 0.4); } .enchantment-reel-slot.enchant-level-1 { box-shadow: 0 0 10px rgba(192, 192, 192, 0.5); } .enchantment-reel-slot.enchant-level-2 { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .enchantment-reel-slot.enchant-level-3 { box-shadow: 0 0 15px rgba(200, 200, 255, 0.6); } .enchantment-reel-slot h3 { margin: 0 0 8px; font-size: 0.9rem; color: #aaa; } .enchantment-level-display { font-size: 2rem; font-weight: bold; color: var(--gold); font-family: 'Cinzel', serif; } .enchantment-pips { display: flex; gap: 4px; justify-content: center; margin-top: 6px; } .enchantment-pip { width: 8px; height: 8px; border-radius: 50%; background: #333; border: 1px solid #555; } .enchantment-pip.active { background: #8b5cf6; border-color: #a78bfa; box-shadow: 0 0 4px rgba(139, 92, 246, 0.6); } .enchantment-actions { display: flex; gap: 10px; justify-content: center; margin-top: 15px; } .enchantment-confirm-btn { padding: 10px 25px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; } .enchantment-confirm-btn:hover { background: linear-gradient(135deg, #a78bfa, #7c3aed); transform: scale(1.05); } .enchantment-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .enchantment-cancel-btn { padding: 10px 25px; background: rgba(100, 100, 100, 0.5); color: #ccc; border: 1px solid #666; border-radius: 8px; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; } .enchantment-cancel-btn:hover { background: rgba(150, 50, 50, 0.5); border-color: #a33; } /* === ENCHANT BUTTON === */ .enchant-btn { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; border: none; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; font-weight: bold; z-index: 10; white-space: nowrap; transition: all 0.2s; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); } .enchant-btn:hover { transform: translateX(-50%) scale(1.1); box-shadow: 0 3px 12px rgba(139, 92, 246, 0.6); } .enchant-btn.hidden { display: none; } /* === EASTER EVENT STYLES === */ /* Easter Cosmetics */ body[data-spin-cosmetic="easter"] .bet-container { border-color: #a8d8a8; } body[data-spin-cosmetic="easter"] .bet-slider { background: linear-gradient(90deg, #ffb7c5, #a8d8a8, #b5d4f1); } body[data-spin-cosmetic="easter"] .bet-btn.active { background: linear-gradient(135deg, #ffb7c5, #c8a2e0); border-color: #a8d8a8; } .preview-spin-easter { background: linear-gradient(135deg, #ffb7c5, #b5d4f1, #c8a2e0); border: 2px solid #a8d8a8; border-radius: 6px; box-shadow: 0 0 10px rgba(168, 216, 168, 0.4); position: relative; overflow: hidden; } .preview-spin-easter::before { content: '🥚'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; opacity: 0.7; } .preview-border-easter { background: linear-gradient(135deg, #e8f5e9, #fce4ec); border: 3px solid #a8d8a8; border-radius: 6px; box-shadow: 0 0 10px rgba(255, 183, 197, 0.3), 0 0 20px rgba(168, 216, 168, 0.2); } .preview-bg-easter { background: linear-gradient(180deg, #e8f5e9 0%, #fff3e0 50%, #fce4ec 100%); border-radius: 6px; position: relative; overflow: hidden; } .preview-bg-easter::before { content: '🧺'; position: absolute; bottom: 2px; right: 4px; font-size: 0.9rem; opacity: 0.6; } .preview-bg-easter::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(0deg, rgba(76, 175, 80, 0.3), transparent); border-radius: 0 0 6px 6px; } .preview-sound-easter { background: linear-gradient(135deg, #c8e6c9 0%, #f8bbd0 50%, #b3e5fc 100%); border: 2px solid #a8d8a8; border-radius: 6px; box-shadow: 0 0 10px rgba(168, 216, 168, 0.4); position: relative; animation: easterSoundPulse 2s ease-in-out infinite; } .preview-sound-easter::after { content: '🐣'; position: absolute; font-size: 1.2rem; filter: drop-shadow(0 0 4px rgba(168, 216, 168, 0.6)); } @keyframes easterSoundPulse { 0%, 100% { box-shadow: 0 0 10px rgba(168, 216, 168, 0.4); } 50% { box-shadow: 0 0 18px rgba(255, 183, 197, 0.6), 0 0 10px rgba(168, 216, 168, 0.5); } } .led-easter { border-color: #a8d8a8; background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 50%, #e8f5e9 100%); } .led-easter.active { background: linear-gradient(180deg, #81c784 0%, #a5d6a7 50%, #81c784 100%); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 15px rgba(129, 199, 132, 0.7); } .cosmetic-spin-easter { background: linear-gradient(135deg, #ffb7c5, #b5d4f1, #c8a2e0) !important; border: 3px solid #a8d8a8 !important; box-shadow: 0 0 15px rgba(168, 216, 168, 0.4), 0 0 25px rgba(255, 183, 197, 0.3) !important; animation: easterSpinPulse 2.5s ease-in-out infinite !important; position: relative; color: #4a2060 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); overflow: hidden; } .cosmetic-spin-easter::before { content: '🥚'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.4rem; opacity: 0.18; pointer-events: none; } .cosmetic-spin-easter:hover:not(:disabled) { box-shadow: 0 0 25px rgba(255, 183, 197, 0.6), 0 0 35px rgba(168, 216, 168, 0.5) !important; filter: brightness(1.1); } @keyframes easterSpinPulse { 0%, 100% { box-shadow: 0 0 15px rgba(168, 216, 168, 0.4), 0 0 25px rgba(255, 183, 197, 0.2); border-color: #a8d8a8; } 50% { box-shadow: 0 0 25px rgba(255, 183, 197, 0.6), 0 0 40px rgba(200, 162, 224, 0.4); border-color: #c8a2e0; } } .cosmetic-border-easter .card.reel { border: 2px solid #a8d8a8 !important; box-shadow: 0 0 10px rgba(255, 183, 197, 0.3), 0 0 20px rgba(168, 216, 168, 0.2); } .cosmetic-bg-easter { background: linear-gradient(180deg, #e8f5e9 0%, #fff3e0 50%, #fce4ec 100%) !important; } /* Easter Shop Decorations */ .shop-easter .modal-content { border: 2px solid rgba(200, 162, 224, 0.5); position: relative; overflow: hidden; background: linear-gradient(180deg, #b8d8f0 0%, #c4e0f4 8%, #d0e8f8 20%, #c8e0f2 40%, #a8d0e8 60%, #90c4a8 80%, #6db87a 92%, #4caf50 100%); padding-bottom: 70px !important; } .shop-easter .modal-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #e8a0bf, #c8a2e0, #a0c4e8, #a8d8a8, #f0d080, #e8a0bf); background-size: 300% 100%; animation: easterShimmer 6s linear infinite; } .shop-easter .modal-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, rgba(76, 175, 80, 0.3), transparent); pointer-events: none; z-index: 0; } @keyframes easterShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } .shop-easter .shop-header { background: rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(200, 162, 224, 0.3); } .shop-easter .shop-title { color: #5a3d7a; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); } .shop-easter .shop-item { border-color: rgba(200, 162, 224, 0.4) !important; background: rgba(255, 255, 255, 0.4) !important; color: #2d2d2d !important; } .shop-easter .shop-item *:not(.upgrade-tag):not(.buy-btn):not(.inline-seal-tag):not(.shop-seal-inline):not(.seal-crown):not(.seal-gem) { color: #2d2d2d !important; } .shop-easter .modal-content .shop-item .upgrade-tag, .shop-easter .modal-content .shop-item .upgrade-tag[style], .shop-easter .modal-content .shop-item span.upgrade-tag { color: #fff !important; background: rgba(80, 60, 120, 0.85) !important; border-color: rgba(120, 90, 170, 0.6) !important; text-shadow: 0 1px 1px rgba(0,0,0,0.3); font-weight: 700 !important; } .shop-easter .shop-item .buy-btn, .shop-easter .shop-item .buy-btn * { color: #fff !important; } .shop-easter .shop-item:hover { border-color: rgba(200, 162, 224, 0.6) !important; box-shadow: 0 0 12px rgba(200, 162, 224, 0.25) !important; background: rgba(255, 255, 255, 0.55) !important; } .shop-easter .shop-item .buy-btn { background: linear-gradient(to bottom, #c8a2e0, #9b72b8) !important; border-color: #d4b8e8 !important; box-shadow: 0 3px 0 #6a4d7a !important; } .shop-easter .shop-item .buy-btn:hover { background: linear-gradient(to bottom, #d4b8e8, #b088cc) !important; } .shop-easter .fee-due-bar { background: rgba(255, 255, 255, 0.35) !important; border-color: rgba(200, 162, 224, 0.4) !important; color: #3d2d4d !important; } .shop-easter .fee-due-bar * { color: #3d2d4d !important; } .shop-easter #shop-reroll-btn { background: linear-gradient(to bottom, #b088cc, #8b5fb0) !important; border-color: #c8a2e0 !important; box-shadow: 0 3px 0 #5a3d6e !important; } .shop-easter #shop-reroll-btn:hover { background: linear-gradient(to bottom, #c8a2e0, #9b72b8) !important; } .shop-easter #shop-exit-btn { background: linear-gradient(to bottom, #81c784, #4caf50) !important; border-color: #a8d8a8 !important; box-shadow: 0 4px 0 #2e7d32 !important; position: relative; z-index: 2; } .shop-easter #shop-exit-btn:hover { background: linear-gradient(to bottom, #a8d8a8, #66bb6a) !important; } .shop-easter .shop-balance { color: #1b5e20 !important; background: rgba(255, 255, 255, 0.55) !important; padding: 6px 14px !important; border-radius: 10px !important; border: 1px solid rgba(46, 125, 50, 0.3) !important; display: inline-block !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; font-weight: bold !important; } .easter-grass-container { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; overflow: hidden; pointer-events: none; z-index: 1; } .easter-grass-blade { position: absolute; bottom: 0; width: 8px; height: 28px; background: linear-gradient(to top, #2e7d32, #4caf50); border-radius: 0 50% 0 50%; transform-origin: bottom center; animation: grassSway 2s ease-in-out infinite alternate; } .easter-grass-blade:nth-child(odd) { animation-delay: -0.5s; height: 35px; } .easter-grass-blade:nth-child(3n) { background: linear-gradient(to top, #1b5e20, #388e3c); height: 40px; } .easter-grass-blade:nth-child(1) { left: 2%; } .easter-grass-blade:nth-child(2) { left: 5%; } .easter-grass-blade:nth-child(3) { left: 8%; } .easter-grass-blade:nth-child(4) { left: 12%; } .easter-grass-blade:nth-child(5) { left: 16%; } .easter-grass-blade:nth-child(6) { left: 20%; } .easter-grass-blade:nth-child(7) { left: 24%; } .easter-grass-blade:nth-child(8) { left: 28%; } .easter-grass-blade:nth-child(9) { left: 32%; } .easter-grass-blade:nth-child(10) { left: 36%; } .easter-grass-blade:nth-child(11) { left: 40%; } .easter-grass-blade:nth-child(12) { left: 44%; } .easter-grass-blade:nth-child(13) { left: 48%; } .easter-grass-blade:nth-child(14) { left: 52%; } .easter-grass-blade:nth-child(15) { left: 56%; } .easter-grass-blade:nth-child(16) { left: 60%; } .easter-grass-blade:nth-child(17) { left: 64%; } .easter-grass-blade:nth-child(18) { left: 68%; } .easter-grass-blade:nth-child(19) { left: 72%; } .easter-grass-blade:nth-child(20) { left: 76%; } .easter-grass-blade:nth-child(21) { left: 80%; } .easter-grass-blade:nth-child(22) { left: 84%; } .easter-grass-blade:nth-child(23) { left: 88%; } .easter-grass-blade:nth-child(24) { left: 90%; } .easter-grass-blade:nth-child(25) { left: 92%; } .easter-grass-blade:nth-child(26) { left: 94%; } .easter-grass-blade:nth-child(27) { left: 96%; } .easter-grass-blade:nth-child(28) { left: 97%; } .easter-grass-blade:nth-child(29) { left: 98%; } .easter-grass-blade:nth-child(30) { left: 99%; } @keyframes grassSway { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } .easter-eggs-decoration { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: space-around; pointer-events: none; z-index: 2; padding: 0 8px; } .easter-decoration-egg { font-size: 0.75rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); opacity: 0.85; transform: translateY(0); } .easter-decoration-egg:nth-child(odd) { transform: translateY(-4px); } .easter-decoration-egg:nth-child(3n) { transform: translateY(-8px); } .easter-decoration-egg:nth-child(4n) { transform: translateY(-2px); } /* Easter Egg Card Reskin */ .easter-egg-card { background: linear-gradient(135deg, #fff3e0, #fce4ec) !important; } .card.player-held.easter-egg-card { animation: hold-glow 1.5s ease-in-out infinite !important; } .card.player-held.easter-egg-card .easter-egg-display { opacity: 1 !important; visibility: visible !important; } .card.player-held.easter-egg-card .card-rank, .card.player-held.easter-egg-card .card-suit { animation: none !important; color: inherit !important; text-shadow: none !important; } .easter-egg-display { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px; } .easter-egg-svg { width: 70%; height: auto; max-height: 80%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); } .easter-egg-reel4 .easter-egg-svg { width: 50%; } /* Easter Bonus Active */ .easter-bonus-active .card { border-color: #a8d8a8 !important; } /* Floating Easter Egg */ .floating-easter-egg { position: absolute; width: 60px; height: 80px; cursor: pointer; z-index: 100; animation: eggFloat 3s ease-in-out infinite, eggGlow 2s ease-in-out infinite alternate; filter: drop-shadow(0 4px 8px rgba(179, 136, 255, 0.5)); transition: transform 0.3s, opacity 0.3s; user-select: none; -webkit-user-select: none; } .floating-easter-egg svg { width: 100%; height: 100%; } .floating-easter-egg:hover { transform: scale(1.3); } .floating-easter-egg.collected { animation: eggCollect 0.5s ease-out forwards; } @keyframes eggFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-15px) rotate(5deg); } } @keyframes eggGlow { 0% { filter: drop-shadow(0 4px 8px rgba(179, 136, 255, 0.3)); } 100% { filter: drop-shadow(0 4px 16px rgba(255, 158, 205, 0.6)); } } @keyframes eggCollect { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.8; } 100% { transform: scale(0) translateY(-50px); opacity: 0; } } /* Easter Egg Toast */ .quest-complete-toast { position: fixed; top: 18%; left: 50%; transform: translateX(-50%) translateY(-20px); background: linear-gradient(135deg, #7b4fa6, #a855f7); color: white; padding: 14px 22px; border-radius: 16px; font-weight: bold; font-size: 1rem; z-index: 11000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; box-shadow: 0 6px 20px rgba(123, 79, 166, 0.5); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 220px; text-align: center; } .quest-complete-toast.qct-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .qct-title { font-size: 0.85rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; } .qct-name { font-size: 1.1rem; font-weight: 800; } .qct-reward { font-size: 0.9rem; opacity: 0.9; background: rgba(255,255,255,0.15); border-radius: 8px; padding: 2px 8px; } .easter-egg-toast { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #a8d8a8, #81c784); color: white; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 1.1rem; z-index: 10000; animation: toastUp 1.5s ease-out forwards; pointer-events: none; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4); } @keyframes toastUp { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-60px); } } /* Easter HUD */ .easter-hud-egg { width: 18px; height: 24px; vertical-align: middle; margin-right: 2px; display: inline-block; } .easter-hud-inline { background: linear-gradient(135deg, rgba(179, 136, 255, 0.95), rgba(130, 177, 255, 0.95)); color: white; padding: 4px 10px; border-radius: 12px; font-weight: bold; font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 6px rgba(179, 136, 255, 0.3); transition: transform 0.2s; user-select: none; display: flex; align-items: center; gap: 2px; white-space: nowrap; } .easter-hud-inline:hover { transform: scale(1.05); } .mobile-easter-hud { font-size: 0.7rem; padding: 3px 8px; border-radius: 10px; } /* Easter Event Banner */ .easter-event-banner { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(135deg, #a8d8a8, #81c784); color: white; padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; z-index: 10000; transform: translateY(-100%); transition: transform 0.5s ease-out; box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3); } .easter-event-banner.active { transform: translateY(0); } .easter-event-banner-content { display: flex; align-items: center; gap: 12px; } .easter-event-banner-icon { font-size: 2rem; } .easter-event-banner-title { font-weight: bold; font-size: 1.1rem; } .easter-event-banner-desc { font-size: 0.85rem; opacity: 0.9; } .easter-event-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .easter-event-banner-btn { background: white; color: #388e3c; border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold; cursor: pointer; white-space: nowrap; transition: transform 0.2s; } .easter-event-banner-btn:hover { transform: scale(1.05); } .easter-event-banner-close { background: rgba(255,255,255,0.25); color: white; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .easter-event-banner-close:hover { background: rgba(255,255,255,0.4); } /* Easter Reward Banner */ .easter-reward-content { text-align: center; padding: 30px; max-width: 400px; } .easter-reward-icon { font-size: 4rem; margin-bottom: 15px; } .easter-reward-title { font-size: 1.5rem; font-weight: bold; color: #a8d8a8; margin-bottom: 10px; } .easter-reward-desc { color: var(--text-secondary); margin-bottom: 20px; line-height: 1.4; } .easter-reward-btn { background: linear-gradient(135deg, #a8d8a8, #81c784); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s; } .easter-reward-btn:hover { transform: scale(1.05); } /* Easter Challenges Modal */ .easter-challenges-content { max-width: 450px; padding: 25px; } .easter-challenges-title { text-align: center; font-size: 1.4rem; color: #a8d8a8; margin-bottom: 20px; } .easter-challenge-card { background: rgba(168, 216, 168, 0.1); border: 1px solid rgba(168, 216, 168, 0.3); border-radius: 12px; padding: 15px; margin-bottom: 15px; position: relative; } .easter-challenge-card.completed { border-color: #a8d8a8; background: rgba(168, 216, 168, 0.15); } .easter-challenge-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .easter-challenge-name { font-weight: bold; font-size: 1rem; } .easter-challenge-reward { font-size: 0.85rem; color: #a8d8a8; } .easter-challenge-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; } .easter-progress-bar { height: 24px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; position: relative; } .easter-progress-fill { height: 100%; background: linear-gradient(90deg, #a8d8a8, #81c784); border-radius: 12px; transition: width 0.5s ease; } .easter-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.8rem; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .easter-complete-badge { background: linear-gradient(135deg, #a8d8a8, #4caf50); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; text-align: center; margin-top: 6px; } .easter-close-btn { display: block; width: 100%; background: linear-gradient(135deg, #a8d8a8, #81c784); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: bold; font-size: 1rem; cursor: pointer; margin-top: 5px; transition: transform 0.2s; } .easter-close-btn:hover { transform: scale(1.02); } .easter-community-card { border-color: rgba(100, 180, 255, 0.4); background: rgba(100, 180, 255, 0.08); } .easter-community-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .easter-community-title { font-weight: bold; font-size: 1rem; color: #82cfff; } .easter-community-progress-label { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; } .easter-community-bar { height: 20px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; overflow: hidden; margin-bottom: 6px; } .easter-community-fill { height: 100%; background: linear-gradient(90deg, #4fc3f7, #0288d1); border-radius: 10px; transition: width 0.5s ease; } .easter-community-milestone-label { font-size: 0.8rem; color: var(--text-secondary); } .easter-community-tracker { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; opacity: 0.75; } .easter-claim-btn { background: linear-gradient(135deg, #ffd700, #ff9800); color: #1a1a1a; border: none; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; cursor: pointer; white-space: nowrap; transition: transform 0.15s; flex-shrink: 0; } .easter-claim-btn:hover { transform: scale(1.05); } .easter-nothing-to-claim { font-size: 0.8rem; color: #a8d8a8; flex-shrink: 0; } /* Easter Menu Button */ .easter-menu-btn { background: linear-gradient(135deg, rgba(168, 216, 168, 0.2), rgba(255, 183, 197, 0.2)) !important; border: 1px solid #a8d8a8 !important; } .easter-menu-btn:hover { background: linear-gradient(135deg, rgba(168, 216, 168, 0.3), rgba(255, 183, 197, 0.3)) !important; } /* Easter Shop Item Category */ .cat-easter-event { background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important; color: white !important; border-left-color: #9c27b0 !important; } .shop-easter .cat-easter-event .upgrade-tag { background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important; border-color: #ce93d8 !important; } /* === Animation Level Gating === */ .animations-off .snowflake, .animations-off .bg-snowflake, .animations-off .bg-star, .animations-off .christmas-light, .animations-off .easter-grass-blade, .animations-off .easter-decoration-egg, .animations-off .prisma-shooting-star, .animations-off #companion-container, .animations-off .companion-container, .animations-off .companion-heart, .animations-off [class*="markerGlow"], .animations-off [class*="crownBounce"], .animations-off [class*="glassShimmer"], .animations-off .enchant-rotate, .animations-off .enchant-shimmer, .animations-off .led-container *, .animations-off .chase-lights *, .animations-off .win-toast { animation: none !important; transition: none !important; } .animations-reduced .snowflake, .animations-reduced .bg-snowflake { animation-duration: 4s !important; } .animations-reduced .bg-star { animation-duration: 2s !important; } .animations-reduced .prisma-shooting-star { animation: none !important; } .animations-reduced #companion-container, .animations-reduced .companion-container { animation-duration: 2s !important; } .animations-reduced .christmas-light { animation-duration: 1s !important; } .animations-reduced .easter-grass-blade { animation-duration: 1.5s !important; } .animations-reduced .easter-decoration-egg { animation-duration: 2s !important; } .dc-modal-content { max-width: 450px; text-align: center; } .dc-modal-title { color: var(--gold); font-family: 'Cinzel', serif; margin-top: 0; margin-bottom: 15px; font-size: 1.3rem; } .dc-tier-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .dc-tier-1 { background: #22c55e; color: #fff; } .dc-tier-2 { background: #3b82f6; color: #fff; } .dc-tier-3 { background: #a855f7; color: #fff; } .dc-tier-4 { background: #f97316; color: #fff; } .dc-tier-5 { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #1a1a2e; } .dc-modal-body h3 { color: #fff; margin: 8px 0 4px; font-size: 1.1rem; } .dc-desc { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; margin: 0 0 12px; } .dc-progress-container { display: flex; align-items: center; gap: 10px; margin: 12px 0; } .dc-progress-bar { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; border: 1px solid rgba(255, 215, 0, 0.2); } .dc-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)); border-radius: 5px; transition: width 0.4s ease; } .dc-progress-text { font-size: 0.85rem; font-weight: 700; color: var(--gold); white-space: nowrap; } .dc-rewards-section { background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.15); border-radius: 10px; padding: 10px; margin: 12px 0; } .dc-rewards-section h4 { color: var(--gold); font-size: 0.8rem; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 1px; } .dc-reward-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); } .dc-claimed-msg { color: var(--success); font-size: 1rem; font-weight: 700; margin: 12px 0; } .dc-claim-btn { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%); color: #1a1a2e; border: none; padding: 10px 30px; border-radius: 12px; font-size: 1rem; font-weight: 800; cursor: pointer; text-transform: uppercase; margin: 12px 0; animation: dcClaimGlow 1.5s ease-in-out infinite; } @keyframes dcClaimGlow { 0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); } } .dc-claim-btn:hover { transform: scale(1.05); } .dc-timer { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; margin-top: 10px; } .dc-completion-toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid var(--gold); border-radius: 14px; padding: 10px 24px; z-index: 100001; font-size: 0.9rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.5); cursor: pointer; animation: dcToastIn 0.4s ease-out, dcToastGlow 1.5s ease-in-out infinite 0.4s; white-space: nowrap; } @keyframes dcToastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes dcToastGlow { 0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 4px 30px rgba(255, 215, 0, 0.6), 0 8px 40px rgba(0, 0, 0, 0.5); } } .dc-weekly-section { margin-top: 16px; padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.15); } .dc-weekly-title { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700; } .dc-weekly-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; } .dc-weekly-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; position: relative; } .dc-weekly-dot.completed { border-color: var(--gold); background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1)); color: var(--gold); box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .dc-weekly-dot.has-reward::after { content: '🎁'; position: absolute; top: -6px; right: -6px; font-size: 0.55rem; } .dc-weekly-dot.completed.has-reward::after { content: '✅'; } .dc-weekly-progress-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); text-align: center; } .daily-challenge-btn { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; border: 1px solid rgba(255, 215, 0, 0.3) !important; } .daily-challenge-btn:hover { border-color: var(--gold) !important; } /* ===================== IDLE / SPLASH SCREEN ===================== */ .idle-screen { position: absolute; inset: 0; z-index: 50; background: linear-gradient(160deg, #0a0a14 0%, #12102a 50%, #0a0a14 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; } .idle-cards { position: absolute; inset: 0; pointer-events: none; } .idle-card { position: absolute; font-size: 2.8rem; opacity: 0.08; animation: idleCardFloat 6s ease-in-out infinite; } .idle-card-1 { top: 10%; left: 8%; animation-delay: 0s; animation-duration: 7s; color: #c8a84b; } .idle-card-2 { top: 20%; right: 10%; animation-delay: 1.2s; animation-duration: 5.5s; color: #e05c7a; } .idle-card-3 { bottom: 25%; left: 12%; animation-delay: 2.4s; animation-duration: 6.5s; color: #e05c7a; } .idle-card-4 { bottom: 15%; right: 8%; animation-delay: 0.8s; animation-duration: 8s; color: #c8a84b; } .idle-card-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 3s; animation-duration: 9s; color: #c8a84b; font-size: 5rem; } @keyframes idleCardFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.07; } 50% { transform: translateY(-18px) rotate(5deg); opacity: 0.15; } } .idle-card-5 { animation-name: idleCardPulse; } @keyframes idleCardPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.05; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.12; } } .idle-logo { font-size: 3.5rem; margin-bottom: 0.4rem; animation: idleLogoBob 3s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(200, 168, 75, 0.6)); } @keyframes idleLogoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .idle-title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.12em; color: #c8a84b; text-shadow: 0 0 20px rgba(200, 168, 75, 0.5); margin-bottom: 1.8rem; text-align: center; } .idle-tap { font-family: 'Roboto Mono', monospace; font-size: 0.75rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; animation: idleTapBlink 2s ease-in-out infinite; } @keyframes idleTapBlink { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } } .scratch-ticket-shop-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(255, 215, 0, 0.1)); border: 2px solid rgba(168, 85, 247, 0.4); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .scratch-ticket-shop-icon { font-size: 2rem; flex-shrink: 0; } .scratch-ticket-shop-info { flex: 1; min-width: 0; } .scratch-ticket-shop-name { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold); font-size: 0.95rem; margin-bottom: 2px; } .scratch-ticket-shop-desc { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); line-height: 1.3; margin-bottom: 4px; } .scratch-ticket-shop-actions { display: flex; flex-direction: column; gap: 6px; align-items: center; flex-shrink: 0; } .scratch-ticket-use-btn { background: linear-gradient(135deg, var(--purple), #7c3aed); color: white; border: 1px solid rgba(168, 85, 247, 0.6); border-radius: 8px; padding: 6px 14px; font-size: 0.75rem; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .scratch-ticket-use-btn:active { transform: scale(0.95); } .scratch-cooldown-timer { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-weight: 600; white-space: nowrap; } .scratch-ticket-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 10, 24, 0.95); z-index: 100001; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow-y: auto; padding: 20px; box-sizing: border-box; } .scratch-ticket-overlay.active { opacity: 1; pointer-events: auto; } .scratch-ticket-container { background: linear-gradient(135deg, #1a1040 0%, #0f1c3f 50%, #1a1040 100%); border: 3px solid var(--gold); border-radius: 20px; padding: 20px; max-width: 380px; width: 100%; box-shadow: 0 0 60px rgba(255, 215, 0, 0.3), 0 0 120px rgba(168, 85, 247, 0.2); position: relative; } .scratch-ticket-header { text-align: center; margin-bottom: 16px; } .scratch-ticket-title { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); letter-spacing: 3px; margin-bottom: 6px; } .scratch-ticket-pops-left { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .scratch-ticket-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; } .scratch-bubble { aspect-ratio: 1; border-radius: 50%; cursor: pointer; position: relative; perspective: 400px; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .bubble-front, .bubble-back { position: absolute; inset: 0; border-radius: 50%; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; transition: transform 0.4s ease, opacity 0.4s ease; } .bubble-front { background: radial-gradient(circle at 35% 35%, rgba(168, 220, 255, 0.6), rgba(100, 150, 255, 0.3)); border: 2px solid rgba(168, 220, 255, 0.4); font-size: clamp(1rem, 4vw, 1.5rem); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(100, 150, 255, 0.3); z-index: 2; } .bubble-back { font-size: clamp(0.85rem, 3.5vw, 1.3rem); font-weight: 900; transform: scale(0); opacity: 0; z-index: 1; border: 2px solid rgba(255, 215, 0, 0.3); } .scratch-bubble.popped .bubble-front { transform: scale(1.3); opacity: 0; } .scratch-bubble.popped .bubble-back { transform: scale(1); opacity: 1; animation: bubbleReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes bubbleReveal { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .scratch-bubble.locked .bubble-front { background: radial-gradient(circle at 35% 35%, rgba(100, 100, 120, 0.4), rgba(60, 60, 80, 0.3)); border-color: rgba(100, 100, 120, 0.3); box-shadow: none; cursor: not-allowed; opacity: 0.5; } .scratch-bubble.revealed-locked .bubble-front { transform: scale(1.3); opacity: 0; } .scratch-bubble.revealed-locked .bubble-back { transform: scale(1); opacity: 0.4; } .symbol-heart { background: radial-gradient(circle, #2d1525, #1a0a15); color: #ff4060; } .symbol-diamond { background: radial-gradient(circle, #2d2515, #1a150a); color: #4dabff; } .symbol-spade { background: radial-gradient(circle, #1a1a2d, #0a0a1a); color: #e0e0e0; } .symbol-club { background: radial-gradient(circle, #152d1a, #0a1a0f); color: #50d070; } .symbol-face { background: radial-gradient(circle, #2d2515, #1a150a); color: var(--gold); } .symbol-wild { background: radial-gradient(circle, #2d1540, #1a0a25); color: #e040ff; text-shadow: 0 0 10px #e040ff; } .symbol-bust { background: radial-gradient(circle, #1c1c1c, #0e0e0e); color: #555555; } .scratch-bubble.popping::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--pop-ring-color, rgba(168, 220, 255, 0.8)); animation: bubbleRipple 0.45s ease-out forwards; pointer-events: none; } @keyframes bubbleRipple { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2); opacity: 0; } } .animations-off .scratch-bubble, .animations-off .scratch-bubble .bubble-front, .animations-off .scratch-bubble .bubble-back { transition: none !important; animation: none !important; } .bubble-pop-particle { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: rgba(168, 220, 255, 0.8); pointer-events: none; z-index: 100002; animation: bubblePopBurst 0.4s ease-out forwards; } @keyframes bubblePopBurst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } .scratch-ticket-legend { background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(255, 215, 0, 0.15); } .scratch-legend-title { font-size: 0.7rem; color: var(--gold); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; text-align: center; } .scratch-legend-item { font-size: 0.65rem; color: rgba(255, 255, 255, 0.6); padding: 2px 0; display: flex; align-items: center; gap: 8px; } .scratch-legend-prize { font-weight: 700; color: var(--gold); min-width: 82px; text-align: right; flex-shrink: 0; } .scratch-legend-odds { margin-left: auto; font-size: 0.6rem; color: rgba(255, 255, 255, 0.3); flex-shrink: 0; } .scratch-legend-cold-note { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.6rem; color: rgba(255, 255, 255, 0.3); font-style: italic; text-align: center; } .scratch-result-panel { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, transparent, rgba(5, 10, 24, 0.95) 20%, rgba(5, 10, 24, 0.98)); border-radius: 0 0 17px 17px; padding: 40px 20px 20px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .scratch-result-panel.visible { opacity: 1; transform: translateY(0); } .scratch-result-banner { margin-bottom: 16px; } .scratch-result-banner.win { animation: scratchWinPulse 1.5s ease-in-out infinite; } @keyframes scratchWinPulse { 0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } 50% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.9); } } .scratch-result-icon { font-size: 2.5rem; margin-bottom: 8px; } .scratch-result-title { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900; color: var(--gold); margin-bottom: 4px; } .scratch-result-prize { font-size: 1.5rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } .scratch-result-rewards { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .scratch-reward-line { font-size: 1rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .scratch-result-banner.grand { animation: scratchGrandPulse 1.2s ease-in-out infinite; } @keyframes scratchGrandPulse { 0%, 100% { text-shadow: 0 0 15px rgba(255, 64, 255, 0.6); filter: brightness(1); } 50% { text-shadow: 0 0 40px rgba(255, 64, 255, 1); filter: brightness(1.2); } } .scratch-result-subtitle { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); } .scratch-result-close { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #1a1040; border: none; border-radius: 10px; padding: 10px 30px; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; } .scratch-result-close:active { transform: scale(0.95); } @media (max-width: 400px) { .scratch-ticket-container { padding: 14px; } .scratch-ticket-grid { gap: 4px; } .scratch-ticket-title { font-size: 1.3rem; } } .royal-crests-display { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #1a3a2a, #0d2618); border: 1px solid #2ecc71; border-radius: 8px; padding: 3px 10px; font-size: 0.85rem; color: #2ecc71; font-weight: 700; white-space: nowrap; } .companion-rank { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 4px 0 2px; padding: 2px 8px; border-radius: 6px; display: inline-block; } .companion-rank.rank-1 { background: linear-gradient(135deg, #555, #333); color: #ccc; } .companion-rank.rank-2 { background: linear-gradient(135deg, #b8860b, #8b6508); color: #fff; } .companion-rank.rank-3 { background: linear-gradient(135deg, #e5e4e2, #b0b0b0); color: #1a1a2e; } .companion-xp-bar { width: 80%; height: 6px; background: #333; border-radius: 3px; margin: 4px auto 2px; overflow: hidden; } .companion-xp-fill { height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60); border-radius: 3px; transition: width 0.3s ease; } .companion-xp-text { font-size: 0.6rem; color: #aaa; margin-bottom: 2px; } .companion-rankup-btn { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; border: none; border-radius: 6px; padding: 4px 10px; font-size: 0.65rem; font-weight: 700; cursor: pointer; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; animation: pulse-glow 1.5s ease-in-out infinite; } .companion-rankup-btn:active { transform: scale(0.95); } .companion-rankup-btn.disabled { background: linear-gradient(135deg, #555, #444); color: #999; cursor: not-allowed; animation: none; opacity: 0.7; } .companion-crests-header { text-align: center; font-size: 0.9rem; color: #2ecc71; font-weight: 700; margin-bottom: 10px; padding: 6px 12px; background: linear-gradient(135deg, #1a3a2a, #0d2618); border: 1px solid #2ecc7144; border-radius: 8px; display: inline-block; } .rank-mult { color: #2ecc71; font-weight: 700; font-size: 0.75em; } .crest-float { color: #2ecc71 !important; font-weight: 700; } /* Companion Quests */ .companion-quests { margin-top: 10px; border-top: 1px solid rgba(255, 215, 0, 0.15); padding-top: 8px; } .companion-quests-title { font-size: 0.6rem; font-weight: 700; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; margin-bottom: 6px; opacity: 0.85; } .companion-quest-item { background: rgba(20, 20, 40, 0.6); border: 1px solid rgba(255, 215, 0, 0.15); border-radius: 8px; padding: 7px 9px; margin-bottom: 5px; transition: border-color 0.2s; } .companion-quest-item.cq-complete { border-color: rgba(46, 204, 113, 0.5); background: rgba(46, 204, 113, 0.05); } .companion-quest-item.cq-claimed { border-color: rgba(100, 100, 100, 0.3); opacity: 0.55; } .cq-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 3px; } .cq-name { font-size: 0.62rem; font-weight: 700; color: #e0c84a; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cq-reward { font-size: 0.58rem; font-weight: 700; color: #2ecc71; white-space: nowrap; padding: 1px 5px; background: rgba(46, 204, 113, 0.12); border-radius: 4px; } .cq-desc { font-size: 0.58rem; color: #aaa; margin-bottom: 5px; line-height: 1.3; } .cq-progress-bar { width: 100%; height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .cq-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f7c948, #e5a820); transition: width 0.4s ease; } .companion-quest-item.cq-complete .cq-progress-fill { background: linear-gradient(90deg, #2ecc71, #27ae60); } .cq-progress-text { font-size: 0.55rem; color: #888; text-align: right; margin-bottom: 4px; } .cq-claim-btn { width: 100%; padding: 4px 0; background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; border: none; border-radius: 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px; cursor: pointer; text-transform: uppercase; animation: pulse-glow 1.5s ease-in-out infinite; transition: transform 0.1s; } .cq-claim-btn:active { transform: scale(0.96); } .cq-claimed-label { width: 100%; text-align: center; font-size: 0.58rem; color: #666; font-style: italic; padding: 2px 0; } @media (max-width: 480px) { .companion-quest-item { padding: 6px 7px; } .cq-name { font-size: 0.58rem; } .cq-desc { font-size: 0.55rem; } } /* Compact variant for non-active cards in the grid */ .companion-card-compact { padding: 10px; } .companion-card-compact .companion-icon { font-size: 30px; min-height: 36px; margin-bottom: 5px; } .companion-card-compact .companion-icon-img { width: 36px; height: 36px; } .companion-card-compact .companion-name { font-size: 12px; } .companion-card-ability { font-size: 0.58rem; color: #8ab4d4; margin: 3px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 1.3; } .companion-card-compact .companion-rank, .companion-card-compact .companion-xp-bar, .companion-card-compact .companion-xp-text, .companion-card-compact .companion-status, .companion-card-compact .companion-price { font-size: 0.6rem; } /* ============================================= COMPANION HERO SECTION (Companion Tab) ============================================= */ .companion-hero { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(30, 20, 60, 0.7)); border: 2px solid var(--gold); border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); } .companion-hero-image { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0; } /* Apply idle float animation to hero image for any companion-float-* class */ .companion-hero-image[class*="companion-float-"] { animation: companion-float 3s ease-in-out infinite; } .companion-hero-emoji { font-size: 56px; line-height: 1; } .companion-hero-img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); } .companion-hero-info { flex: 1; min-width: 0; } .companion-hero-name { font-size: 1.1rem; font-weight: 800; color: var(--gold); margin-bottom: 4px; text-shadow: 0 0 12px rgba(255, 215, 0, 0.4); } .companion-hero-bonus { font-size: 0.75rem; color: #b0b0cc; margin-bottom: 6px; line-height: 1.3; } .companion-hero-rank { margin-bottom: 2px; } .companion-hero-deselect { margin-top: 8px; background: rgba(255, 255, 255, 0.08); color: #888; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 3px 10px; font-size: 0.65rem; cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s; } .companion-hero-deselect:hover { background: rgba(255, 80, 80, 0.15); border-color: rgba(255, 80, 80, 0.4); color: #ff9999; } .companion-hero-deselect:disabled { opacity: 0.4; cursor: not-allowed; } .companion-hero-quest { width: 100%; border-top: 1px solid rgba(255, 215, 0, 0.2); padding-top: 10px; margin-top: 4px; } .cq-all-done { text-align: center; font-size: 0.75rem; color: #2ecc71; padding: 6px 0; } /* ============================================= COMPANION QUEST POPUP (floating, tap-to-reveal) ============================================= */ .companion-quest-popup { position: fixed; z-index: 10001; width: 300px; background: rgba(12, 8, 28, 0.97); border: 2px solid var(--gold); border-radius: 14px; padding: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.2); transform-origin: bottom center; opacity: 0; transform: scale(0.85); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .companion-quest-popup.cqp-visible { opacity: 1; transform: scale(1); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .companion-quest-popup:not(.cqp-visible) { transition: opacity 0.15s ease-in, transform 0.15s ease-in; } .cqp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cqp-title { font-size: 1rem; font-weight: 700; color: var(--gold); flex: 1; } .cqp-close { background: none; border: none; color: #888; font-size: 0.85rem; cursor: pointer; padding: 2px 4px; line-height: 1; border-radius: 4px; transition: color 0.2s; } .cqp-close:hover { color: #fff; } .cqp-body { display: flex; flex-direction: column; gap: 4px; } /* Scoped font-size overrides for the mobile popup — larger than the companion tab */ .companion-quest-popup .cq-name { font-size: 0.85rem; white-space: normal; } .companion-quest-popup .cq-reward { font-size: 0.78rem; } .companion-quest-popup .cq-desc { font-size: 0.78rem; line-height: 1.4; } .companion-quest-popup .cq-progress-text { font-size: 0.72rem; } .companion-quest-popup .cq-claim-btn { font-size: 0.8rem; padding: 6px 0; } .companion-quest-popup .cq-claimed-label { font-size: 0.75rem; } /* Ensure popup overrides hold on small phones (≤480px) where the global companion tab media query would otherwise shrink .cq-name/.cq-desc */ @media (max-width: 480px) { .companion-quest-popup .cq-name { font-size: 0.85rem; } .companion-quest-popup .cq-desc { font-size: 0.78rem; } } /* ============================================= DESKTOP COMPANION QUEST PANEL (#companion-quest-panel) ============================================= */ #companion-quest-panel { display: none; } :where(html.layout-desktop) #companion-quest-panel { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.88); border: 1px solid var(--gold-dark); border-top: 1px dashed rgba(255, 215, 0, 0.2); border-radius: 0 0 10px 10px; padding: 12px 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.08); margin-top: -1px; overflow: hidden; } :where(html.layout-desktop) .cqp-panel-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } :where(html.layout-desktop) .cqp-panel-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 215, 0, 0.6); margin-left: auto; } :where(html.layout-desktop) #companion-quest-panel .cqp-title { font-size: 0.8rem; } :where(html.layout-desktop) #companion-quest-panel .cqp-icon { font-size: 22px; } :where(html.layout-desktop) #companion-quest-panel .cqp-icon-img { width: 22px; height: 22px; } :where(html.layout-desktop) #companion-quest-panel .cqp-body { gap: 3px; } :where(html.layout-desktop) #companion-quest-panel .companion-quest-item { padding: 6px 8px; } :where(html.layout-desktop) #companion-quest-panel .cq-name { font-size: 0.6rem; } :where(html.layout-desktop) #companion-quest-panel .cq-reward { font-size: 0.56rem; } :where(html.layout-desktop) #companion-quest-panel .cq-progress-text { font-size: 0.55rem; } :where(html.layout-desktop) #companion-quest-panel .cq-claim-btn { font-size: 0.6rem; padding: 3px 8px; } :where(html.layout-desktop) #companion-quest-panel .cq-all-done { font-size: 0.7rem; } /* ── Notification Settings Panel ─────────────────────────────── */ .notif-settings-content { max-width: 420px; width: 90%; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 16px; } .notif-settings-title { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; color: var(--gold, #ffd700); text-shadow: 0 0 12px rgba(255, 215, 0, 0.5); margin: 0 0 2px; } .notif-settings-subtitle { text-align: center; font-size: 0.8rem; opacity: 0.7; margin: 0; } .notif-master-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,0.06); border-radius: 10px; border: 1px solid rgba(255,215,0,0.2); } .notif-master-label { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; } .notif-types-list { display: flex; flex-direction: column; gap: 8px; transition: opacity 0.25s ease; } .notif-type-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,0.04); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); } .notif-type-emoji { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; } .notif-type-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .notif-type-name { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; } .notif-type-desc { font-size: 0.7rem; opacity: 0.6; } /* Toggle switch */ .notif-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .notif-toggle-switch input { opacity: 0; width: 0; height: 0; } .notif-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.15); border-radius: 24px; cursor: pointer; transition: background 0.25s; } .notif-toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.25s; } .notif-toggle-switch input:checked + .notif-toggle-slider { background: var(--gold, #ffd700); } .notif-toggle-switch input:checked + .notif-toggle-slider:before { transform: translateX(20px); } .notif-toggle-switch input:disabled + .notif-toggle-slider { opacity: 0.4; cursor: not-allowed; } /* ── Pit Player Picker ─────────────────────────────── */ .btn-pit-start-duel { padding: 9px 20px; font-size: 0.9rem; font-weight: 700; background: linear-gradient(135deg, #8b1a1a 0%, #c0392b 100%); color: #fff; border: 1px solid rgba(255, 80, 80, 0.5); border-radius: 8px; cursor: pointer; letter-spacing: 0.5px; transition: opacity 0.15s, transform 0.1s; } .btn-pit-start-duel:hover { opacity: 0.9; transform: scale(1.02); } .pit-player-picker { display: none; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 8px; } .pit-player-search { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); background: rgba(0, 0, 0, 0.4); color: #f0e6c8; font-size: 0.9rem; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .pit-player-search:focus { border-color: rgba(255, 215, 0, 0.7); } .pit-player-search::placeholder { color: rgba(240, 230, 200, 0.4); } .pit-player-list { max-height: 270px; overflow-y: auto; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .pit-player-row { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px 10px; gap: 8px; } .pit-player-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pit-player-name { font-size: 0.9rem; font-weight: 600; color: #f0e6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pit-player-stats { font-size: 0.72rem; color: rgba(240, 230, 200, 0.55); } .btn-pit-duel { flex-shrink: 0; padding: 4px 10px; font-size: 0.72rem; font-weight: 700; background: linear-gradient(135deg, #c05000 0%, #7b2500 100%); color: #fff; border: 1px solid rgba(255, 140, 50, 0.6); border-radius: 5px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .btn-pit-duel:hover { opacity: 0.85; } .btn-pit-duel:disabled { opacity: 0.4; cursor: not-allowed; } .pit-picker-msg { padding: 20px; text-align: center; color: rgba(240, 230, 200, 0.5); font-size: 0.85rem; } /* ===================== CREST CRUSADE STYLES ===================== */ .reels-container.crest-crusade-mode { background: radial-gradient(circle at center, rgba(255,215,0,0.12), rgba(20,10,0,0.4)); border-radius: 12px; } .cc-cell.crest-card { background: linear-gradient(135deg, #fff7c2, #ffd700 50%, #b8860b); color: #3a2200; border: 2px solid #ffd700; box-shadow: 0 0 18px rgba(255,215,0,0.7), inset 0 0 12px rgba(255,255,255,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,0.2); animation: crestCardPulse 1.6s ease-in-out infinite; } .cc-cell.crest-card .crest-icon { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1; } .cc-cell.crest-card .crest-mult { font-weight: 900; font-size: clamp(1rem, 3vw, 1.4rem); margin-top: 4px; color: #5a2a00; } .cc-cell.cc-spin-plus { background: linear-gradient(135deg, #c9a4ff, #7b2fbe); color: #fff; border: 2px solid #b388ff; box-shadow: 0 0 14px rgba(155, 89, 255, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; } .cc-cell.cc-spin-plus .cc-spin-plus-icon { font-size: clamp(1.4rem, 4vw, 2rem); } .cc-cell.cc-spin-plus .cc-spin-plus-text { font-weight: 900; font-size: clamp(0.9rem, 2.5vw, 1.2rem); margin-top: 2px; } .cc-cell.cc-held { outline: 2px solid rgba(255, 215, 0, 0.85); outline-offset: -2px; } @keyframes crestCardPulse { 0%, 100% { box-shadow: 0 0 18px rgba(255,215,0,0.7), inset 0 0 12px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 28px rgba(255,215,0,1.0), inset 0 0 18px rgba(255,255,255,0.5); } } /* ============================================================================ * Battery: hide-tab suppression + smarter motion defaults (v1.93) * When the browser tab is hidden we stop all infinite/decorative animations * via the .bg-hidden body class so a backgrounded tab doesn't drive paints * on the next compositor frame after un-throttling. We also extend the * .animations-reduced rules to cover a few more high-frequency decorations, * and respect OS-level prefers-reduced-motion as a sensible safety net. * ============================================================================ */ body.bg-hidden *, body.bg-hidden *::before, body.bg-hidden *::after { animation-play-state: paused !important; transition: none !important; } /* Extend reduced-animations: silence the most expensive infinite paints */ .animations-reduced .bg-snowflake, .animations-reduced .bg-star, .animations-reduced .star-field, .animations-reduced .particle, .animations-reduced .christmas-lights, .animations-reduced .easter-grass-blade { animation-duration: 6s !important; animation-iteration-count: 1 !important; } .animations-reduced [class*="shimmer"], .animations-reduced [class*="sparkle"], .animations-reduced [class*="glow"] { animation-iteration-count: 1 !important; animation-duration: 2s !important; } /* OS-level reduced-motion: cap durations and disable infinite decoration */ @media (prefers-reduced-motion: reduce) { .snowflake, .bg-snowflake, .bg-star, .star-field, .particle, .christmas-lights, .easter-grass-blade, [class*="shimmer"], [class*="sparkle"] { animation-iteration-count: 1 !important; animation-duration: 2s !important; } *, *::before, *::after { scroll-behavior: auto !important; } } /* ============================================================ iOS PWA full-screen overlay fix (v1.932) On iOS standalone PWAs, `height: 100%` (and `inset: 0`) on a position:fixed element can resolve against an initial containing block that is SHORTER than the real dynamic viewport — the bottom safe-area / home-indicator region gets excluded — leaving a strip of the game visible under full-screen overlays (e.g. the main menu). The body already compensates with 100dvh; these overlays must too. Later height lines win where supported: plain 100vh → JS-computed --vh fallback → 100dvh (modern iOS/Android/desktop). Keep this block at the END of styles.css so it wins the cascade over each overlay's base `height: 100%` rule. ============================================================ */ .loading-screen, .modal-overlay, #bonus-overlay, #start-overlay, .tutorial-overlay, .scratch-ticket-overlay, #stakes-picker-overlay, #wager-picker-overlay, .christmas-unlock-banner { height: 100vh; height: calc(var(--vh, 1vh) * 100); height: 100dvh; min-height: 100%; } /* ============================================================ iOS PWA notch/home-indicator content protection (v1.933) Now that the overlays above span the full 100dvh viewport (including the notch/status-bar and home-indicator regions), overlay CONTENT that sits directly in the fixed flex container can be clipped by the notch when it grows taller than the safe viewport. `.modal-content` is already safe-area-aware (margin-top + max-height at its base rule), so main-menu/.menu-content is covered. These rules protect the remaining containers that lack any safe-area awareness. Per the Jan 2026 rollback (fafa998c): pad/offset the CONTENT containers only — never the overlay background itself. ============================================================ */ body.pwa-standalone .scratch-ticket-container { margin-top: env(safe-area-inset-top, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); } body.pwa-standalone #start-overlay .start-logo { margin-top: env(safe-area-inset-top, 0px); } body.pwa-standalone #start-overlay #start-btn { margin-bottom: env(safe-area-inset-bottom, 0px); } body.pwa-standalone #bonus-overlay .bonus-crown-icon { margin-top: env(safe-area-inset-top, 0px); } body.pwa-standalone #bonus-overlay .bonus-start-btn { margin-bottom: env(safe-area-inset-bottom, 0px); } body.pwa-standalone .stakes-picker-box, body.pwa-standalone .wager-picker-box { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.pwa-standalone .christmas-unlock-content { margin-top: env(safe-area-inset-top, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* v1.935: keep floating back/close buttons above the iOS home indicator. Since v1.932 the modal overlays span the full 100dvh (under the home bar). On tall modals (e.g. Customization) the .floating-back-btn — the last flex child of the overlay — can land at the physical bottom edge. Give it bottom breathing room in standalone PWA mode only; env() falls back to 0 so browser tabs / desktop are unchanged. */ body.pwa-standalone .modal-overlay > .floating-back-btn { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); } /* v1.936: portrait-lock blocker for phones held in landscape. Android installed PWA is locked via manifest.json ("orientation": "portrait") and the native wrapper via Expo config; iOS ignores both, so this CSS blocker covers iOS Safari / standalone PWA. Scoped to PHONES only: landscape + short viewport (<= 500px) + coarse pointer. iPad landscape (768px+ tall) stays playable per the v1.926 layout fix, and desktop windows (fine pointer) are never affected. */ #rotate-lock-overlay { display: none; } @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { #rotate-lock-overlay { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; min-height: 100%; z-index: 100005; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at center, #141428 0%, #0d0d18 70%); color: var(--gold); text-align: center; padding: 20px calc(20px + env(safe-area-inset-right, 0px)) 20px calc(20px + env(safe-area-inset-left, 0px)); } #rotate-lock-overlay .rotate-lock-phone { font-size: 3rem; animation: rotate-lock-tilt 1.6s ease-in-out infinite; } #rotate-lock-overlay .rotate-lock-title { font-family: 'Roboto Mono', monospace; font-weight: bold; font-size: 1rem; letter-spacing: 2px; } #rotate-lock-overlay .rotate-lock-desc { color: #94a3b8; font-size: 0.85rem; max-width: 420px; } } @keyframes rotate-lock-tilt { 0%, 20% { transform: rotate(0deg); } 50%, 70% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }