$P@D$3RV£R
Fix tile flickering by stabilizing rendering logic and removing inconsistent visibility toggles
f7e450a | * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: white; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .hidden { | |
| display: none ; | |
| visibility: hidden ; | |
| } | |
| /* Ensure game-controls stays visible when not hidden */ | |
| .game-controls:not(.hidden) { | |
| display: flex ; | |
| visibility: visible ; | |
| opacity: 1 ; | |
| } | |
| /* Home Page Styles */ | |
| .home-page { | |
| width: 100%; | |
| max-width: 600px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 80vh; | |
| } | |
| .home-content { | |
| text-align: center; | |
| width: 100%; | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| .home-title { | |
| font-size: 4em; | |
| color: #333; | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .home-subtitle { | |
| font-size: 1.5em; | |
| color: #666; | |
| margin-bottom: 40px; | |
| } | |
| .home-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| margin: 40px 0; | |
| padding: 30px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| border-radius: 15px; | |
| } | |
| .stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .stat-label { | |
| font-size: 0.9em; | |
| color: #666; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .stat-value { | |
| font-size: 2.5em; | |
| color: #ff6b9d; | |
| font-weight: bold; | |
| } | |
| .home-buttons { | |
| margin: 40px 0; | |
| } | |
| .btn-large { | |
| padding: 18px 50px; | |
| font-size: 1.3em; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| } | |
| .home-instructions { | |
| margin-top: 50px; | |
| padding: 30px; | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| text-align: left; | |
| } | |
| .home-instructions h3 { | |
| color: #333; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| font-size: 1.5em; | |
| } | |
| .home-instructions ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .home-instructions li { | |
| padding: 10px 0; | |
| padding-left: 30px; | |
| position: relative; | |
| color: #555; | |
| font-size: 1.1em; | |
| } | |
| .home-instructions li:before { | |
| content: "✓"; | |
| position: absolute; | |
| left: 0; | |
| color: #ff6b9d; | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| } | |
| .theme-selector { | |
| margin-top: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .theme-selector label { | |
| font-size: 1em; | |
| color: #666; | |
| font-weight: 600; | |
| } | |
| .theme-select { | |
| padding: 8px 15px; | |
| border: 2px solid #ff6b9d; | |
| border-radius: 8px; | |
| background: white; | |
| color: #333; | |
| font-size: 1em; | |
| font-weight: 500; | |
| cursor: pointer; | |
| outline: none; | |
| transition: all 0.2s ease; | |
| } | |
| .theme-select:hover { | |
| background: #fff5f8; | |
| border-color: #ff8fab; | |
| } | |
| .theme-select:focus { | |
| border-color: #ff6b9d; | |
| box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2); | |
| } | |
| /* Dark theme */ | |
| body.dark-theme { | |
| background: #1a1a2e; | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .home-title { | |
| background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| body.dark-theme .home-subtitle { | |
| color: #b0b0b0; | |
| } | |
| body.dark-theme .home-stats { | |
| background: linear-gradient(135deg, #16213e 0%, #0f3460 100%); | |
| border: 1px solid rgba(255, 107, 157, 0.3); | |
| } | |
| body.dark-theme .stat-label { | |
| color: #b0b0b0; | |
| } | |
| body.dark-theme .stat-value { | |
| color: #ff6b9d; | |
| } | |
| body.dark-theme .home-instructions { | |
| background: #16213e; | |
| border: 1px solid rgba(255, 107, 157, 0.2); | |
| } | |
| body.dark-theme .home-instructions h3 { | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .home-instructions li { | |
| color: #b0b0b0; | |
| } | |
| body.dark-theme .home-instructions li:before { | |
| color: #ff6b9d; | |
| } | |
| body.dark-theme .theme-select { | |
| background: #16213e; | |
| color: #e0e0e0; | |
| border-color: #ff6b9d; | |
| } | |
| body.dark-theme .theme-select:hover { | |
| background: #1a2742; | |
| } | |
| body.dark-theme .game-header { | |
| background: #16213e; | |
| border-color: #ff6b9d; | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .game-header h1 { | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .score-panel { | |
| background: linear-gradient(135deg, #0f3460 0%, #16213e 100%); | |
| } | |
| body.dark-theme .score-item .label { | |
| color: #b0b0b0; | |
| } | |
| body.dark-theme .score-item .value { | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .game-board { | |
| background: #0f3460; | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| body.dark-theme .game-controls .btn { | |
| background: #16213e; | |
| color: #e0e0e0; | |
| border-color: #ff6b9d; | |
| } | |
| body.dark-theme .game-controls .btn:hover { | |
| background: #1a2742; | |
| border-color: #ff8fab; | |
| } | |
| body.dark-theme .game-over-content { | |
| background: #16213e; | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .game-over-content h2 { | |
| color: #e0e0e0; | |
| } | |
| body.dark-theme .game-over-content p { | |
| color: #b0b0b0; | |
| } | |
| body.dark-theme .level-complete-content { | |
| background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%); | |
| } | |
| .game-header { | |
| text-align: center; | |
| margin: 0 auto 20px; | |
| background: white; | |
| border: 3px solid #D4AF37; | |
| border-radius: 15px; | |
| padding: 10px; | |
| transform-style: preserve-3d; | |
| transform: translateZ(10px) rotateX(2deg); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), | |
| 0 4px 8px rgba(0, 0, 0, 0.15), | |
| inset 0 2px 0 rgba(255, 255, 255, 0.5), | |
| inset 0 -2px 4px rgba(212, 175, 55, 0.3), | |
| 0 0 0 1px rgba(212, 175, 55, 0.5); | |
| position: relative; | |
| overflow: hidden; | |
| width: calc(8 * 97.2px + 7 * 2px + 4px); /* Match grid width: 8 cells + 7 gaps + padding */ | |
| max-width: 100%; | |
| perspective: 1200px; | |
| perspective-origin: center top; | |
| display: block; | |
| } | |
| .game-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .game-header > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .game-header h1 { | |
| color: #333; | |
| font-size: 1.25em; | |
| margin: 0; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .music-toggle-btn { | |
| background: rgba(102, 126, 234, 0.1); | |
| border: 2px solid rgba(102, 126, 234, 0.3); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| font-size: 1.2em; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| padding: 0; | |
| outline: none; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .music-toggle-btn:hover { | |
| background: rgba(102, 126, 234, 0.2); | |
| border-color: rgba(102, 126, 234, 0.5); | |
| transform: scale(1.1); | |
| } | |
| .music-toggle-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* Volume slider styles */ | |
| #music-volume, | |
| #sfx-volume { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: rgba(102, 126, 234, 0.2); | |
| border-radius: 5px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| #music-volume::-webkit-slider-thumb, | |
| #sfx-volume::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| background: #667eea; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| #music-volume::-webkit-slider-thumb:hover, | |
| #sfx-volume::-webkit-slider-thumb:hover { | |
| background: #764ba2; | |
| transform: scale(1.2); | |
| } | |
| #music-volume::-moz-range-thumb, | |
| #sfx-volume::-moz-range-thumb { | |
| width: 12px; | |
| height: 12px; | |
| background: #667eea; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.2s ease; | |
| } | |
| #music-volume::-moz-range-thumb:hover, | |
| #sfx-volume::-moz-range-thumb:hover { | |
| background: #764ba2; | |
| transform: scale(1.2); | |
| } | |
| .score-panel { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 5px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| padding: 7.5px; | |
| border-radius: 15px; | |
| margin-bottom: 5px; | |
| } | |
| .score-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .score-item .label { | |
| font-size: 0.7em; | |
| color: #666; | |
| margin-bottom: 2.5px; | |
| font-weight: 600; | |
| } | |
| .score-item .value { | |
| font-size: 1.2em; | |
| color: #333; | |
| font-weight: bold; | |
| } | |
| .score-item .moves-info { | |
| font-size: 0.9em; | |
| color: #999; | |
| margin-left: 3px; | |
| font-weight: normal; | |
| } | |
| .game-board { | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| grid-template-rows: repeat(7, 1fr); | |
| gap: 2px; | |
| background: white; | |
| padding: 2px; | |
| border-radius: 10px; | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| margin: 20px auto; | |
| perspective: 1000px; | |
| perspective-origin: center center; | |
| width: calc(8 * 97.2px + 7 * 2px + 4px); /* 8 cells + 7 gaps + padding */ | |
| max-width: 100%; | |
| } | |
| .game-board.is-dragging { | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), | |
| 0 0 30px rgba(100, 150, 255, 0.3); | |
| } | |
| .cell { | |
| width: 97.2px; | |
| height: 97.2px; | |
| border-radius: 12.96px; | |
| cursor: pointer; | |
| transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), | |
| box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), | |
| opacity 0.3s ease; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .cell.empty-cell { | |
| display: none ; | |
| } | |
| font-size: 3.24em; | |
| padding: 0; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transform: translateZ(0); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 2px 4px rgba(0, 0, 0, 0.2), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.3), | |
| inset 0 -2px 4px rgba(0, 0, 0, 0.2); | |
| will-change: transform; | |
| } | |
| .cell:hover { | |
| transform: scale(1.1) translateY(0) translateZ(10px) rotateX(5deg) rotateY(5deg); | |
| z-index: 10; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| inset 0 2px 0 rgba(255, 255, 255, 0.4), | |
| inset 0 -3px 6px rgba(0, 0, 0, 0.3); | |
| animation: none; | |
| } | |
| .cell.selected { | |
| transform: scale(1.25) translateZ(20px) rotateX(8deg) rotateY(8deg); | |
| box-shadow: 0 0 0 6px rgba(255, 255, 255, 1), | |
| 0 0 20px rgba(100, 150, 255, 0.8), | |
| 0 0 40px rgba(100, 150, 255, 0.6), | |
| 0 12px 24px rgba(0, 0, 0, 0.5), | |
| inset 0 3px 0 rgba(255, 255, 255, 0.5), | |
| inset 0 -4px 8px rgba(0, 0, 0, 0.4); | |
| z-index: 30; | |
| animation: dragPulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; | |
| border: 3px solid rgba(100, 150, 255, 1); | |
| transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), | |
| box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .cell.drag-target { | |
| transform: scale(1.2) translateZ(15px) rotateX(-4deg) rotateY(-4deg); | |
| box-shadow: 0 0 0 6px rgba(0, 255, 100, 1), | |
| 0 0 25px rgba(0, 255, 100, 0.9), | |
| 0 0 50px rgba(0, 255, 100, 0.7), | |
| 0 10px 20px rgba(0, 0, 0, 0.5), | |
| inset 0 2px 0 rgba(255, 255, 255, 0.4), | |
| inset 0 -3px 6px rgba(0, 0, 0, 0.3); | |
| z-index: 25; | |
| animation: targetPulse 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; | |
| border: 3px solid rgba(0, 255, 100, 1); | |
| background-blend-mode: overlay; | |
| transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), | |
| box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .cell.dragging { | |
| opacity: 0.9; | |
| z-index: 35; | |
| transition: opacity 0.2s ease; | |
| } | |
| .cell { | |
| user-select: none; | |
| -webkit-user-select: none; | |
| cursor: grab; | |
| } | |
| .cell:active { | |
| cursor: grabbing; | |
| } | |
| @keyframes dragPulse { | |
| 0%, 100% { | |
| transform: scale(1.25) translateZ(20px) rotateX(8deg) rotateY(8deg); | |
| box-shadow: 0 0 0 6px rgba(255, 255, 255, 1), | |
| 0 0 20px rgba(100, 150, 255, 0.8), | |
| 0 0 40px rgba(100, 150, 255, 0.6), | |
| 0 12px 24px rgba(0, 0, 0, 0.5), | |
| inset 0 3px 0 rgba(255, 255, 255, 0.5), | |
| inset 0 -4px 8px rgba(0, 0, 0, 0.4); | |
| } | |
| 50% { | |
| transform: scale(1.28) translateZ(22px) rotateX(9deg) rotateY(9deg); | |
| box-shadow: 0 0 0 7px rgba(255, 255, 255, 1), | |
| 0 0 25px rgba(100, 150, 255, 0.9), | |
| 0 0 50px rgba(100, 150, 255, 0.7), | |
| 0 13px 26px rgba(0, 0, 0, 0.5), | |
| inset 0 3.5px 0 rgba(255, 255, 255, 0.55), | |
| inset 0 -4.5px 9px rgba(0, 0, 0, 0.45); | |
| } | |
| } | |
| @keyframes targetPulse { | |
| 0%, 100% { | |
| transform: scale(1.2) translateZ(15px) rotateX(-4deg) rotateY(-4deg); | |
| box-shadow: 0 0 0 6px rgba(0, 255, 100, 1), | |
| 0 0 25px rgba(0, 255, 100, 0.9), | |
| 0 0 50px rgba(0, 255, 100, 0.7), | |
| 0 10px 20px rgba(0, 0, 0, 0.5), | |
| inset 0 2px 0 rgba(255, 255, 255, 0.4), | |
| inset 0 -3px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| 50% { | |
| transform: scale(1.23) translateZ(17px) rotateX(-5deg) rotateY(-5deg); | |
| box-shadow: 0 0 0 7px rgba(0, 255, 100, 1), | |
| 0 0 30px rgba(0, 255, 100, 0.95), | |
| 0 0 60px rgba(0, 255, 100, 0.8), | |
| 0 11px 22px rgba(0, 0, 0, 0.5), | |
| inset 0 2.5px 0 rgba(255, 255, 255, 0.45), | |
| inset 0 -3.5px 7px rgba(0, 0, 0, 0.35); | |
| } | |
| } | |
| /* Drag connection line */ | |
| .drag-connection { | |
| position: absolute; | |
| pointer-events: none; | |
| z-index: 20; | |
| stroke: rgba(100, 150, 255, 0.8); | |
| stroke-width: 4; | |
| fill: none; | |
| stroke-dasharray: 5, 5; | |
| animation: dashMove 0.5s linear infinite; | |
| } | |
| @keyframes dashMove { | |
| 0% { | |
| stroke-dashoffset: 0; | |
| } | |
| 100% { | |
| stroke-dashoffset: 10; | |
| } | |
| } | |
| .cell.match-enlarge { | |
| animation: none; | |
| z-index: 15; | |
| } | |
| .cell.matched { | |
| animation: none; | |
| z-index: 20; | |
| pointer-events: none; | |
| position: relative; | |
| overflow: visible; | |
| opacity: 0; | |
| display: none ; | |
| visibility: hidden ; | |
| } | |
| /* Particle styles - dynamically created */ | |
| .explosion-particle { | |
| position: absolute; | |
| font-size: 8px; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 21; | |
| pointer-events: none; | |
| filter: drop-shadow(0 0 3px rgba(255, 215, 0, 1)) | |
| drop-shadow(0 0 6px rgba(255, 165, 0, 0.9)) | |
| drop-shadow(0 0 9px rgba(255, 100, 0, 0.7)); | |
| text-shadow: 0 0 5px rgba(255, 255, 255, 1), | |
| 0 0 9px rgba(255, 215, 0, 1), | |
| 0 0 13px rgba(255, 165, 0, 0.9); | |
| animation: particleExplode 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| --particle-x1: 0px; | |
| --particle-y1: 0px; | |
| --particle-x2: 0px; | |
| --particle-y2: 0px; | |
| --particle-x3: 0px; | |
| --particle-y3: 0px; | |
| --particle-rotate: 0deg; | |
| --particle-scale: 1; | |
| } | |
| @keyframes particleExplode { | |
| 0% { | |
| transform: translate(-50%, -50%) scale(0) rotate(0deg); | |
| opacity: 1; | |
| filter: brightness(1); | |
| } | |
| 15% { | |
| opacity: 1; | |
| transform: translate(-50%, -50%) translate(var(--particle-x1), var(--particle-y1)) scale(1.3) rotate(calc(var(--particle-rotate) * 0.25)); | |
| filter: brightness(2); | |
| } | |
| 40% { | |
| opacity: 1; | |
| transform: translate(-50%, -50%) translate(var(--particle-x2), var(--particle-y2)) scale(1.5) rotate(calc(var(--particle-rotate) * 0.6)); | |
| filter: brightness(3); | |
| } | |
| 70% { | |
| opacity: 0.8; | |
| transform: translate(-50%, -50%) translate(var(--particle-x3), var(--particle-y3)) scale(calc(var(--particle-scale) * 1.7)) rotate(calc(var(--particle-rotate) * 0.9)); | |
| filter: brightness(2); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(-50%, -50%) translate(var(--particle-x3), var(--particle-y3)) scale(calc(var(--particle-scale) * 1.8)) rotate(var(--particle-rotate)); | |
| filter: brightness(0); | |
| } | |
| } | |
| .cell.falling { | |
| animation: none; | |
| } | |
| @keyframes enlargeMatch { | |
| 0% { | |
| transform: scale(1) translateZ(0) rotateX(0deg) rotateY(0deg); | |
| } | |
| 50% { | |
| transform: scale(1.25) translateZ(10px) rotateX(6deg) rotateY(6deg); | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), | |
| 0 6px 12px rgba(0, 0, 0, 0.4), | |
| inset 0 2px 0 rgba(255, 255, 255, 0.4); | |
| } | |
| 100% { | |
| transform: scale(1) translateZ(0) rotateX(0deg) rotateY(0deg); | |
| } | |
| } | |
| @keyframes matchAnimation { | |
| 0% { | |
| transform: scale(1) rotate(0deg) translateZ(0) rotateX(0deg) rotateY(0deg); | |
| opacity: 1; | |
| filter: brightness(1) saturate(1); | |
| } | |
| 20% { | |
| transform: scale(1.3) rotate(60deg) translateZ(15px) rotateX(20deg) rotateY(20deg); | |
| opacity: 1; | |
| filter: brightness(2.5) saturate(2); | |
| box-shadow: 0 0 25px rgba(255, 255, 255, 1), | |
| 0 0 40px rgba(255, 215, 0, 1), | |
| 0 0 55px rgba(255, 165, 0, 0.9), | |
| 0 8px 16px rgba(0, 0, 0, 0.4); | |
| } | |
| 40% { | |
| transform: scale(1.4) rotate(120deg) translateZ(20px) rotateX(30deg) rotateY(30deg); | |
| opacity: 0.9; | |
| filter: brightness(3) saturate(2.2); | |
| box-shadow: 0 0 30px rgba(255, 255, 255, 0.95), | |
| 0 0 50px rgba(255, 215, 0, 0.95), | |
| 0 0 70px rgba(255, 165, 0, 0.85), | |
| 0 9px 18px rgba(0, 0, 0, 0.45); | |
| } | |
| 60% { | |
| transform: scale(1.2) rotate(180deg) translateZ(15px) rotateX(40deg) rotateY(40deg); | |
| opacity: 0.7; | |
| filter: brightness(2) saturate(1.5); | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), | |
| 0 0 35px rgba(255, 215, 0, 0.8), | |
| 0 0 50px rgba(255, 165, 0, 0.7), | |
| 0 7px 14px rgba(0, 0, 0, 0.4); | |
| } | |
| 80% { | |
| transform: scale(0.8) rotate(240deg) translateZ(8px) rotateX(50deg) rotateY(50deg); | |
| opacity: 0.4; | |
| filter: brightness(1.5) saturate(1); | |
| box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), | |
| 0 0 25px rgba(255, 215, 0, 0.6), | |
| 0 0 35px rgba(255, 165, 0, 0.5), | |
| 0 5px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| 100% { | |
| transform: scale(0.3) rotate(300deg) translateZ(0) rotateX(60deg) rotateY(60deg); | |
| opacity: 0; | |
| filter: brightness(0.5) saturate(0.5); | |
| box-shadow: 0 0 0 rgba(255, 255, 255, 0); | |
| } | |
| } | |
| @keyframes fallAnimation { | |
| 0% { | |
| transform: translateY(-100%) translateZ(0) rotateX(0deg); | |
| } | |
| 100% { | |
| transform: translateY(0) translateZ(0) rotateX(0deg); | |
| } | |
| } | |
| /* Gem colors with slow idle animations */ | |
| .gem-0 { | |
| background: white; | |
| animation: gemFloat 4s ease-in-out infinite; | |
| animation-delay: 0s; | |
| } | |
| .gem-1 { | |
| background: white; | |
| animation: none; | |
| } | |
| .gem-2 { | |
| background: white; | |
| animation: none; | |
| } | |
| .gem-3 { | |
| background: white; | |
| animation: none; | |
| } | |
| .gem-4 { | |
| background: white; | |
| animation: none; | |
| } | |
| .gem-5 { | |
| background: white; | |
| animation: none; | |
| } | |
| /* Slow floating animation for gems with 3D rotation */ | |
| @keyframes gemFloat { | |
| 0%, 100% { | |
| transform: translateY(0) scale(1) translateZ(0) rotateX(0deg) rotateY(0deg); | |
| opacity: 1; | |
| } | |
| 25% { | |
| transform: translateY(-2px) scale(1.01) translateZ(2px) rotateX(2deg) rotateY(-2deg); | |
| opacity: 0.98; | |
| } | |
| 50% { | |
| transform: translateY(-3px) scale(1.02) translateZ(3px) rotateX(0deg) rotateY(0deg); | |
| opacity: 0.95; | |
| } | |
| 75% { | |
| transform: translateY(-2px) scale(1.01) translateZ(2px) rotateX(-2deg) rotateY(2deg); | |
| opacity: 0.98; | |
| } | |
| } | |
| /* Pause gemFloat animation when cell is in certain states */ | |
| .cell.selected.gem-0, | |
| .cell.selected.gem-1, | |
| .cell.selected.gem-2, | |
| .cell.selected.gem-3, | |
| .cell.selected.gem-4, | |
| .cell.selected.gem-5, | |
| .cell.dragging.gem-0, | |
| .cell.dragging.gem-1, | |
| .cell.dragging.gem-2, | |
| .cell.dragging.gem-3, | |
| .cell.dragging.gem-4, | |
| .cell.dragging.gem-5, | |
| .cell.drag-target.gem-0, | |
| .cell.drag-target.gem-1, | |
| .cell.drag-target.gem-2, | |
| .cell.drag-target.gem-3, | |
| .cell.drag-target.gem-4, | |
| .cell.drag-target.gem-5, | |
| .cell.matched.gem-0, | |
| .cell.matched.gem-1, | |
| .cell.matched.gem-2, | |
| .cell.matched.gem-3, | |
| .cell.matched.gem-4, | |
| .cell.matched.gem-5 { | |
| animation: none ; | |
| } | |
| /* Match enlarge animation - paused */ | |
| .cell.match-enlarge { | |
| animation: none ; | |
| } | |
| .cell.match-enlarge.gem-0, | |
| .cell.match-enlarge.gem-1, | |
| .cell.match-enlarge.gem-2, | |
| .cell.match-enlarge.gem-3, | |
| .cell.match-enlarge.gem-4, | |
| .cell.match-enlarge.gem-5 { | |
| animation: none ; | |
| } | |
| .game-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin: 20px auto; | |
| width: calc(8 * 97.2px + 7 * 2px + 4px); /* Match grid width: 8 cells + 7 gaps + padding */ | |
| max-width: 100%; | |
| position: relative; | |
| z-index: 100; | |
| visibility: visible; | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .game-controls .btn { | |
| background: white; | |
| color: #333; | |
| border: 2px solid #D4AF37; | |
| border-radius: 8px; | |
| font-weight: 500; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| transition: background-color 0.2s ease, | |
| box-shadow 0.2s ease, | |
| transform 0.15s ease; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| pointer-events: auto; | |
| position: relative; | |
| outline: none; | |
| visibility: visible ; | |
| opacity: 1 ; | |
| display: inline-flex ; | |
| z-index: 101; | |
| } | |
| .game-controls .btn:hover { | |
| background: #f9f9f9; | |
| box-shadow: 0 3px 6px rgba(212, 175, 55, 0.4); | |
| transform: translateY(-1px); | |
| } | |
| .game-controls .btn:active { | |
| background: #f0f0f0; | |
| box-shadow: 0 1px 2px rgba(212, 175, 55, 0.3); | |
| transform: translateY(0); | |
| } | |
| .game-controls .btn:focus { | |
| outline: 2px solid rgba(212, 175, 55, 0.5); | |
| outline-offset: 2px; | |
| } | |
| .btn { | |
| padding: 12px 30px; | |
| font-size: 1em; | |
| border: none; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: background-color 0.2s ease, | |
| box-shadow 0.2s ease, | |
| transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| -webkit-tap-highlight-color: transparent; | |
| pointer-events: auto; | |
| position: relative; | |
| outline: none; | |
| touch-action: manipulation; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.1s ease, box-shadow 0.1s ease; | |
| } | |
| .btn:focus { | |
| outline: 2px solid rgba(102, 126, 234, 0.5); | |
| outline-offset: 2px; | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| transform: none ; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| color: white; | |
| } | |
| .game-over { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 20px; | |
| z-index: 1000; | |
| } | |
| .game-over.hidden { | |
| display: none; | |
| } | |
| .game-over-content { | |
| background: white; | |
| padding: 40px; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .game-over-content h2 { | |
| color: #333; | |
| margin-bottom: 20px; | |
| font-size: 2.5em; | |
| } | |
| .game-over-content p { | |
| color: #666; | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| } | |
| #final-score { | |
| color: #667eea; | |
| font-weight: bold; | |
| font-size: 1.5em; | |
| } | |
| .game-over-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| margin-top: 30px; | |
| } | |
| .game-over-buttons .btn { | |
| width: 100%; | |
| padding: 15px; | |
| font-size: 1.1em; | |
| transition: background-color 0.2s ease, | |
| box-shadow 0.2s ease, | |
| transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .level-complete { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 20px; | |
| z-index: 1000; | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| .level-complete.hidden { | |
| display: none; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .level-complete-content { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 50px; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); | |
| color: white; | |
| max-width: 400px; | |
| width: 90%; | |
| animation: slideUp 0.4s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .level-complete-content h2 { | |
| color: white; | |
| margin-bottom: 20px; | |
| font-size: 2.5em; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .level-complete-content p { | |
| color: rgba(255, 255, 255, 0.95); | |
| font-size: 1.3em; | |
| margin-bottom: 15px; | |
| font-weight: 500; | |
| } | |
| .level-complete-content span { | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| color: #ffe66d; | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .level-complete-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| margin-top: 30px; | |
| } | |
| .level-complete-buttons .btn { | |
| width: 100%; | |
| padding: 15px; | |
| font-size: 1.1em; | |
| transition: background-color 0.2s ease, | |
| box-shadow 0.2s ease, | |
| transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .level-complete-buttons .btn-primary { | |
| background: white; | |
| color: #667eea; | |
| } | |
| .level-complete-buttons .btn-primary:hover { | |
| background: #f0f0f0; | |
| transform: translateY(-2px); | |
| } | |
| .level-complete-buttons .btn-secondary { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .level-complete-buttons .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 600px) { | |
| .cell { | |
| width: 40px; | |
| height: 40px; | |
| font-size: 1.5em; | |
| } | |
| .game-header h1 { | |
| font-size: 2em; | |
| } | |
| .score-panel { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| } | |
| .score-item .value { | |
| font-size: 1.5em; | |
| } | |
| .score-item .label { | |
| font-size: 0.8em; | |
| } | |
| } | |