| * { |
| 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 !important; |
| visibility: hidden !important; |
| } |
|
|
| |
| .game-controls:not(.hidden) { |
| display: flex !important; |
| visibility: visible !important; |
| opacity: 1 !important; |
| } |
|
|
| |
| .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); |
| } |
|
|
| |
| 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); |
| 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); |
| } |
|
|
| |
| #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); |
| 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 !important; |
| } |
| 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 { |
| 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 !important; |
| visibility: hidden !important; |
| } |
|
|
| |
| .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-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; |
| } |
|
|
| |
| @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; |
| } |
| } |
|
|
| |
| .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 !important; |
| } |
|
|
| |
| .cell.match-enlarge { |
| animation: none !important; |
| } |
|
|
| .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 !important; |
| } |
|
|
| .game-controls { |
| display: flex; |
| justify-content: center; |
| gap: 15px; |
| margin: 20px auto; |
| width: calc(8 * 97.2px + 7 * 2px + 4px); |
| 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 !important; |
| opacity: 1 !important; |
| display: inline-flex !important; |
| 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 !important; |
| } |
|
|
| .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); |
| } |
|
|
| |
| @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; |
| } |
| } |
|
|
|
|
