/* ==== Seite: fruitmatch3 ==== */

/* Reset der globalen Karten-Komponente für den Spiel-Container */

body.page-fruitmatch3 .card-header {
 text-align: center; margin-bottom: 30px; 
}

body.page-fruitmatch3 .card-header h1 {
 font-family: 'Press Start 2P', monospace; font-size: 1.9em; letter-spacing: 2px; color: #ff4f8b; margin-bottom: 12px; text-shadow: 0 0 12px rgba(255, 79, 139, 0.6), 0 0 32px rgba(255, 79, 139, 0.3), 3px 3px 0 #111; 
}

body.page-fruitmatch3 .card-header h1 i {
 display: inline-block; transform: translateY(-8px); 
}

body.page-fruitmatch3 .card-header p {
 color: var(--c-muted); font-size: 1.1em; 
}

body.page-fruitmatch3 .game-container {
  display: flex; flex-direction: column; align-items: center; gap: 0; 
}

body.page-fruitmatch3 .game-board {
 display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 10px; background: #2c1810; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 500px; width: 100%; 
}

body.page-fruitmatch3 .fruit-cell {
 aspect-ratio: 1; background: var(--c-surface-2); border: 2px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2em; cursor: pointer; transition: all 0.3s; user-select: none; 
}

body.page-fruitmatch3 .fruit-apple {
 border-color: var(--c-danger); 
}

body.page-fruitmatch3 .fruit-orange {
 border-color: #f97316; 
}

body.page-fruitmatch3 .fruit-lemon {
 border-color: #eab308; 
}

body.page-fruitmatch3 .fruit-grape {
 border-color: #8b5cf6; 
}

body.page-fruitmatch3 .fruit-banana {
 border-color: #facc15; 
}

body.page-fruitmatch3 .fruit-cherry {
 border-color: #ec4899; 
}

body.page-fruitmatch3 .fruit-cell:hover:not(.matched) {
 transform: scale(1.1); background: var(--c-surface-2); 
}

body.page-fruitmatch3 .fruit-cell.selected {
 background: #ffd700; border-color: #ffed4e; transform: scale(1.15); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); 
}

body.page-fruitmatch3 .fruit-cell.matched {
 animation: matchPop 0.5s ease-out; 
}

body.page-fruitmatch3 .fruit-cell.hint {
 animation: hintPulse 1s ease-in-out infinite; 
}

body.page-fruitmatch3 .fruit-cell.falling {
 animation: fallDown 0.4s ease-out; 
}

@keyframes matchPop {
 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } 100% { transform: scale(0); opacity: 0; } 
}

@keyframes hintPulse {
 0%, 100% { background: #fef3c7; transform: scale(1); } 50% { background: #fde68a; transform: scale(1.1); } 
}

@keyframes fallDown {
 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } 
}

/* Score Board */

body.page-fruitmatch3 .score-board {
 display: flex; justify-content: space-around; margin-bottom: 20px; padding: 22px 20px; background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10); flex-wrap: wrap; gap: 10px; width: 100%; 
}

body.page-fruitmatch3 .score-item {
 text-align: center; 
}

body.page-fruitmatch3 .score-label {
 font-size: 13px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; 
}

body.page-fruitmatch3 .score-value {
 font-family: 'Press Start 2P', monospace; font-size: 1.4em; letter-spacing: 1px; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

body.page-fruitmatch3 .score-yellow {
 color: #ffe100; text-shadow: 0 0 10px rgba(255, 225, 0, 0.55); 
}

body.page-fruitmatch3 .score-cyan {
 color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); 
}

body.page-fruitmatch3 .score-magenta {
 color: #ff4fd8; text-shadow: 0 0 10px rgba(255, 79, 216, 0.55); 
}

body.page-fruitmatch3 .score-green {
 color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.55); 
}

body.page-fruitmatch3 .game-status {
 text-align: center; font-size: 1.15em; font-weight: 600; color: #3a3a4c; margin-bottom: 20px; padding: 16px 20px; background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%); border: 1px solid var(--c-border); border-radius: 14px; width: 100%; 
}

body.page-fruitmatch3 .controls {
 display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; 
}

/* Spielmodus-Umschalter (Endlos / Zeit) */
body.page-fruitmatch3 .mode-select {
 display: flex; align-items: center; background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 50px; padding: 3px; 
}
body.page-fruitmatch3 .mode-btn {
 background: transparent; border: none; padding: 6px 12px; border-radius: 50px; color: var(--c-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: inherit; 
}
body.page-fruitmatch3 .mode-btn.mode-btn--active {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; 
}

/* Booster-Buttons mit Zähler */
body.page-fruitmatch3 .booster-btn {
 position: relative; 
}
body.page-fruitmatch3 .booster-btn:disabled {
 opacity: 0.35; cursor: not-allowed; 
}
/* Bombe scharf gestellt – erneut klicken oder Escape entschärft */
body.page-fruitmatch3 .booster-btn.armed {
 border-color: var(--c-danger); color: var(--c-danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); animation: bombArmedPulse 1s ease-in-out infinite; 
}
@keyframes bombArmedPulse {
 50% { transform: scale(1.08); box-shadow: 0 0 18px rgba(239, 68, 68, 0.95); } 
}
body.page-fruitmatch3 .booster-count {
 position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 50px; background: #ff4f8b; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; 
}

/* Combo-Popup über dem Spielfeld */
body.page-fruitmatch3 .game-board {
 position: relative; 
}
body.page-fruitmatch3 .combo-popup {
 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; padding: 10px 18px; background: rgba(0, 0, 0, 0.75); color: #ffd700; border: 2px solid #ffd700; border-radius: 12px; font-family: 'Press Start 2P', monospace; font-size: 1.4em; white-space: nowrap; pointer-events: none; animation: comboPop 1s ease-out forwards; 
}
@keyframes comboPop {
 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -70%) scale(0.9); opacity: 0; }
}

/* 5 Combis hintereinander: grosses BOZA!!! in den vier BOZA-Farben */
body.page-fruitmatch3 .combo-popup.combo-boza {
 padding: 18px 30px; font-size: 2.8em; color: #FFE726; background: rgba(10, 10, 20, 0.88);
 border-width: 3px; border-radius: 16px; letter-spacing: 2px;
 text-shadow: 0 0 16px rgba(255, 231, 38, 0.9), 0 0 34px rgba(95, 187, 255, 0.6), 0 4px 0 rgba(255, 140, 84, 0.7);
 animation: comboBozaPop 1.5s ease-out forwards;
}
@keyframes comboBozaPop {
 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-6deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.35) rotate(2deg); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1.1) rotate(-1deg); } 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1.05); opacity: 0; }
}

/* Screen-Shake bei hohen Kombos */
body.page-fruitmatch3 .game-board.shaking {
 animation: boardShake 0.5s ease-out; 
}
@keyframes boardShake {
 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-0.5deg); } 40% { transform: translateX(6px) rotate(0.5deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 
}

/* Eingefrorene Felder (Eis) */
body.page-fruitmatch3 .fruit-cell--frozen {
 background: linear-gradient(135deg, #cfe8ff 0%, #a9c8f0 100%); border-color: #7fa8d9; box-shadow: inset 0 0 12px rgba(140, 190, 255, 0.6); 
}
body.dark-theme.page-fruitmatch3 .fruit-cell--frozen {
 background: linear-gradient(135deg, #1d3a5f 0%, #16304f 100%); border-color: #2f5d8f; box-shadow: inset 0 0 12px rgba(90, 150, 220, 0.5); 
}

body.page-fruitmatch3 .btn {
 padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; 
}

body.page-fruitmatch3 .btn:hover {
 transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); 
}

body.page-fruitmatch3 .btn:disabled {
 background: var(--c-surface-2); cursor: not-allowed; transform: none; box-shadow: none; 
}

body.page-fruitmatch3 #musicToggle {
 text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); 
}

body.page-fruitmatch3 .particles {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; 
}

body.page-fruitmatch3 .particle {
 position: absolute; font-size: 2em; animation: particleFloat 1s ease-out forwards; 
}

@keyframes particleFloat {
 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-100px) scale(0); opacity: 0; } 
}

body.page-fruitmatch3 .info-icon {
 font-size: 24px; 
}

body.page-fruitmatch3 .info-text {
 flex: 1; font-size: 14px; color: var(--c-accent); font-weight: 600; 
}

/* Back to Top Button */

@media (max-width: 768px) {
body.page-fruitmatch3 .card-header h1 {
 font-size: 1.4em; 
}
body.page-fruitmatch3 .game-board {
 max-width: 350px; 
}
body.page-fruitmatch3 .fruit-cell {
 font-size: 1.5em; 
}
body.page-fruitmatch3 .score-board {
 flex-direction: column; gap: 15px; 
}
body.page-fruitmatch3 .controls {
 flex-direction: column; 
}
/* Smaller buttons on mobile */
body.page-fruitmatch3 .controls {

                gap: 8px;
            
}
body.page-fruitmatch3 .btn {

                padding: 10px 18px;
                font-size: 14px;
                border-radius: 10px;
            
}
}

body.dark-theme.page-fruitmatch3 .card-header h1 {
 color: #ff4f8b; text-shadow: 0 0 12px rgba(255, 79, 139, 0.6), 0 0 32px rgba(255, 79, 139, 0.3), 3px 3px 0 #111; 
}

body.dark-theme.page-fruitmatch3 .card-header p {
 color: var(--c-muted); 
}

body.dark-theme.page-fruitmatch3 .game-board {
 background: #1a1a1a; 
}

body.dark-theme.page-fruitmatch3 .fruit-cell {
 background: var(--c-surface); border-color: var(--c-border); 
}

body.dark-theme.page-fruitmatch3 .fruit-cell:hover:not(.matched) {
 background: var(--c-surface-2); 
}

body.dark-theme.page-fruitmatch3 .fruit-cell.selected {
 background: #b8860b; border-color: #daa520; 
}

body.dark-theme.page-fruitmatch3 .score-board {
 background: none; border-color: var(--c-border); 
}

body.dark-theme.page-fruitmatch3 .score-label {
 color: var(--c-muted); 
}

body.dark-theme.page-fruitmatch3 .score-value {
 background: linear-gradient(135deg, #8b9cf7 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

body.dark-theme.page-fruitmatch3 .score-yellow {
 color: #ffe100; text-shadow: 0 0 10px rgba(255, 225, 0, 0.55); 
}

body.dark-theme.page-fruitmatch3 .score-cyan {
 color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); 
}

body.dark-theme.page-fruitmatch3 .score-magenta {
 color: #ff4fd8; text-shadow: 0 0 10px rgba(255, 79, 216, 0.55); 
}

body.dark-theme.page-fruitmatch3 .score-green {
 color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.55); 
}

body.dark-theme.page-fruitmatch3 .game-status {
 background: none; border-color: var(--c-border); box-shadow:  0 6px 20px rgba(102, 126, 234, 0.10); color: var(--c-text); 
}

body.dark-theme.page-fruitmatch3 .info-text {
 color: var(--c-accent); 
}

/* Hidden class for search filtering */