/* ========== ROOT VARIABLES ========== */ :root { /* Background — deep plum, warm candy night */ --color-bg: #120a14; /* Primary — candy pink (interactive chrome, CTAs, active states) */ --color-primary: #EBADFF; --color-primary-light: #F8DEFF; --color-primary-dark: #2A0031; --color-primary-darker: #1a001f; /* Accent */ --color-accent: #EBADFF; --color-accent-dark: #2A0031; /* Win */ --color-win-gold: #FFDAFE; --color-win-gold-light: #FFF0FC; /* Text */ --color-text: #ffffff; --color-text-muted: #e0c8d8; --color-text-dim: #b09aae; /* Overlay */ --color-overlay-dark: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(0, 0, 0, 0.3); /* Glass — warm pink-tinted borders */ --color-glass-border: rgba(255, 120, 180, 0.12); --color-glass-border-hover: rgba(255, 120, 180, 0.25); --color-glass-highlight: rgba(255, 200, 230, 0.2); --color-gold-subtle: rgba(235, 173, 255, 0.05); --color-gold-glow: rgba(235, 173, 255, 0.3); /* Gold glow */ --color-gold-glow-strong: rgba(235, 173, 255, 0.35); } /* ========== BODY ========== */ body { margin: 0; padding: 0; overflow: hidden; background-color: #120a14; font-family: var(--sui-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; } /* ========== GAME HEADER ========== */ #game-header { position: fixed; top: 0.4vw; left: var(--safe-left, 0px); z-index: 1000; pointer-events: none; display: none !important; /* hide top-left game name + (already-removed) clock area, per request */ flex-direction: row; align-items: center; gap: 0; background: transparent; border-radius: 6px; padding: 0.2vw 0.6vw; border: none; } /* Portrait: pin header to the viewport's true top-left (left: 0) instead of going through --safe-left. On tablets like iPad (985×1173) safe-left can compute to ~160px which pushes the brand text well off the corner — producer wanted it visibly at the screen corner. */ @media (orientation: portrait) { #game-header { left: 0 !important; transform: none !important; } } /* Ultrawide: hide the brand text when viewport has L/R letterbox bars (resizer toggles `.viewport-has-letterbox` on when viewportAspect > bg's native aspect). Producer spec: "如果是超宽屏幕左右有黑边, 那 game name 就不显示" — cleaner than trying to pixel-perfect-anchor the text to the bg edge. */ html.viewport-has-letterbox #game-header { display: none !important; } #game-title { font-family: var(--sui-font); /* 60% of the previous size (was clamp(7px, 0.8vw, 11px)) per producer feedback — clock removed, brand text now lives here. */ font-size: clamp(4px, 0.48vw, 7px); font-weight: 700; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; padding-right: 0.5vw; } #app-container { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ========== CANDY MODAL (Paytable) ========== */ .candy-modal-overlay { position: fixed; inset: 0; background: rgba(80, 30, 60, 0.4); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease-out; } .candy-modal { background: linear-gradient(160deg, #8a4570 0%, #7a3d65 50%, #6a3558 100%); border-radius: 16px; border: 1.5px solid rgba(255, 105, 180, 0.35); box-shadow: 0 0 0 1px rgba(235, 173, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(235, 173, 255, 0.12); position: relative; overflow: hidden; } .candy-modal-header { padding: 18px 24px; border-bottom: 1px solid rgba(255, 105, 180, 0.2); background: linear-gradient(180deg, rgba(255, 105, 180, 0.12) 0%, rgba(255, 105, 180, 0.03) 100%); } .candy-modal-header h2 { margin: 0; font-size: clamp(18px, 3vw, 26px); font-weight: 700; color: #FFDAFE; letter-spacing: 0.12em; text-shadow: 0 1px 8px rgba(235, 173, 255, 0.4); text-align: center; text-transform: uppercase; } .candy-close-btn { background: rgba(255, 105, 180, 0.15); border: 1.5px solid rgba(255, 105, 180, 0.45); color: rgba(255, 255, 255, 0.85); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.15s ease; } .candy-close-btn:hover { background: rgba(255, 105, 180, 0.3); transform: scale(1.1); } #paytable-content { padding: 20px 24px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; color: rgba(255, 220, 240, 0.85); } #paytable-content::-webkit-scrollbar { width: 6px; } #paytable-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 10px; } #paytable-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FFDAFE 0%, #ff69b4 100%); border-radius: 10px; } /* ========== MODAL ANIMATIONS ========== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popupIn { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .modal-popup { animation: popupIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .modal-fade { animation: fadeIn 0.2s ease-out forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes popupOut { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(0.95) translateY(10px); opacity: 0; } } .modal-fade-out { animation: fadeOut 0.2s ease-in forwards; } .modal-popup-out { animation: popupOut 0.2s ease-in forwards; } /* ========== FOCUS INDICATORS (keyboard accessibility) ========== */ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .candy-close-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========== SERVER LOADING SPINNER ========== */ #server-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 15000; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: fadeIn 0.2s ease-out; } .server-loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.15); border-top-color: rgba(255, 255, 255, 0.8); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== SPLASH OVERLAY ========== */ .splash-start-btn { font-family: var(--sui-font); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: #ffffff; background: radial-gradient(circle at 35% 30%, #e8508a 0%, #c0286a 45%, #8a1050 100%); border: 3px solid rgba(255, 180, 210, 0.7); border-radius: 9999px; padding: clamp(14px, 2vh, 20px) clamp(48px, 6vw, 80px); min-height: 48px; min-width: clamp(160px, 30vw, 240px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); cursor: pointer; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 0 24px rgba(235, 173, 255,0.6), 0 4px 12px rgba(0,0,0,0.5); transition: all 0.2s; position: relative; overflow: hidden; animation: splash-btn-pulse 2s ease-in-out infinite; } @keyframes splash-btn-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(200, 40, 100, 0.55), 0 4px 16px rgba(0,0,0,0.4), inset 0 3px 8px rgba(255, 220, 240, 0.25); } 50% { box-shadow: 0 0 44px rgba(200, 40, 100, 0.8), 0 4px 20px rgba(0,0,0,0.5), inset 0 3px 8px rgba(255, 220, 240, 0.35); } } .splash-start-btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%); animation: splash-btn-shimmer 3s ease-in-out infinite; } @keyframes splash-btn-shimmer { 0% { left: -75%; } 40%, 100% { left: 125%; } } .splash-start-btn:hover { transform: scale(1.06); background: radial-gradient(circle at 35% 30%, #ff6aaa 0%, #d4306e 45%, #a01858 100%); box-shadow: 0 0 56px rgba(200, 40, 100, 0.9), 0 6px 20px rgba(0,0,0,0.5), inset 0 3px 8px rgba(255, 220, 240, 0.3); } .splash-start-btn:active { transform: scale(0.96); } .splash-dont-show { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--sui-font); font-size: clamp(12px, 1.5vw, 15px); font-weight: 800; white-space: nowrap; color: rgba(255,255,255,0.85); user-select: none; letter-spacing: 0.5px; min-height: 32px; } .splash-checkbox { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid rgba(255, 105, 180, 0.6); border-radius: 5px; background: rgba(0, 0, 0, 0.2); cursor: pointer; margin: 0; vertical-align: middle; position: relative; } .splash-checkbox:checked { background: #ff69b4; border-color: #ff69b4; } .splash-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } /* ========== PAYTABLE STYLES ========== */ .paytable-container { width: 100%; padding: 0 20px; } .paytable-section { margin-bottom: 40px; } .paytable-section-title { font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px 0; width: 100%; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .paytable-grid { display: grid; justify-items: center; } .paytable-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color 0.3s ease, box-shadow 0.3s ease; max-width: 200px; width: 100%; } .paytable-card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .paytable-symbol-img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; object-fit: contain; } /* Skeleton shimmer placeholder for ALL images inside paytable / popup modals — covers the brief window between modal open and PNG load (cascade illustrations, buy-bonus card, payout-symbol icons) so the user never sees a blank area waiting for bytes. The shimmer keeps running underneath the loaded image but is naturally hidden once the opaque PNG covers the element. Producer: 'paytable 里很多图片显示载入需要有占位符号否则载入时间长咋办'. */ @keyframes paytable-img-shimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } #paytable-content img, #game-rules-content img, .candy-modal-content img { background-color: rgba(235, 173, 255, 0.06); background-image: linear-gradient( 110deg, rgba(235, 173, 255, 0.04) 30%, rgba(235, 173, 255, 0.18) 50%, rgba(235, 173, 255, 0.04) 70% ); background-size: 200% 100%; background-repeat: no-repeat; animation: paytable-img-shimmer 1.5s ease-in-out infinite; border-radius: 6px; /* min-height ensures the placeholder is visible even before the img has its natural dimensions (since width/height attrs aren't on the img tags). 40px is the minimum readable shimmer area. */ min-height: 40px; } /* Once the image bytes arrive, an inline