/* AGRESYWNY RESET I UKRYCIE ZBĘDNYCH ELEMENTÓW GLOBALNYCH */
body, html { margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
footer, .site-footer, #main-footer, .footer { display: none !important; }

/* =========================================================================
   GŁÓWNY KONTENER GRY
   ========================================================================= */
#game-wrapper {
    --dirt-color: #3b200b;
    --text-dark: #0f172a; --primary: #3b82f6; --secondary: #f59e0b;
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 50;
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    overflow: hidden; color: var(--text-dark); user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================================================================
   ZINTEGROWANY PASEK KONTROLNY
   ========================================================================= */
.card-controls-bar {
    width: 100%; display: flex; justify-content: center !important; align-items: center;
    padding: 10px 20px; background: #f8fafc; border-bottom: 2px dashed #e2e8f0;
    box-sizing: border-box; border-radius: 16px 16px 0 0;
    position: relative !important; min-height: 56px;
}

.control-btn {
    background: white; border: 2px solid var(--primary); color: var(--primary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s; width: 36px; height: 36px;
}
.control-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }
.control-btn.muted { color: #94a3b8; border-color: #cbd5e1; background: #f1f5f9; }

.btn-exit { 
    border-color: #ef4444; color: #ef4444; position: absolute !important; left: 15px !important; 
    top: 50%; transform: translateY(-50%); margin: 0;
}
.btn-exit:hover { background: #ef4444; color: white; transform: translateY(-50%) scale(1.1); }

.volume-group { display: flex; align-items: center; gap: 10px; }
.vol-slider { width: 80px; accent-color: var(--primary); cursor: pointer; }

/* =========================================================================
   OVERLAYE I KARTY MENU
   ========================================================================= */
#game-wrapper .overlay-screen { 
    position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); 
    display: flex; align-items: center; justify-content: center; 
    z-index: 100; padding: 15px; backdrop-filter: blur(10px); 
}

#game-wrapper .menu-card { 
    background: white; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); 
    display: flex; flex-direction: column; max-width: 800px; width: 100%; 
    border: 4px solid white; outline: 3px solid var(--primary); outline-offset: -3px; 
}

#game-wrapper .card-content { display: flex; flex-direction: row; width: 100%; flex: 1; }
#game-wrapper .menu-left { padding: 30px 40px; flex: 1.2; display: flex; flex-direction: column; align-items: center; text-align: center; }
#game-wrapper .menu-right { padding: 30px 40px; flex: 0.8; background: #f8fafc; border-left: 2px dashed #cbd5e1; border-radius: 0 0 16px 0; }

#game-wrapper .menu-left h1 { font-size: 2.5rem; margin:0 0 10px 0; color: var(--primary); text-shadow: 2px 2px 0px #bfdbfe; line-height: 1.1;}
#game-wrapper .menu-left p { font-size: 0.95rem; color: #475569; margin-bottom: 20px; line-height: 1.4; max-width: 350px; }

#game-wrapper .time-selector { margin-bottom: 20px; width: 100%; max-width: 300px;}
#game-wrapper .time-selector p { margin: 0 0 8px 0; font-size: 0.85rem; font-weight: bold; color: #64748b; text-transform: uppercase;}
#game-wrapper .time-btns { display: flex; gap: 8px; justify-content: center;}
#game-wrapper .t-btn { flex: 1; padding: 10px 0; font-size: 1.1rem; font-weight: bold; border-radius: 10px; background: #f1f5f9; color: #64748b; border: 2px solid #e2e8f0; cursor: pointer; transition: 0.2s;}
#game-wrapper .t-btn.active { background: var(--primary); color: white; border-color: var(--primary); transform: scale(1.05); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);}

#game-wrapper .player-profile-wrapper { display: flex; align-items: center; background: #f8fafc; border: 3px solid #e2e8f0; border-radius: 50px; padding: 5px 15px 5px 5px; width: 100%; max-width: 300px; margin: 0 auto 20px auto; transition: 0.3s; }
#game-wrapper .player-profile-wrapper.is-locked { background: #f1f5f9; border-color: #cbd5e1; }
#game-wrapper .avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; flex-shrink: 0; margin-right: 12px; }
#game-wrapper .name-input { border: none; background: transparent; outline: none; font-size: 1.1rem; font-weight: bold; color: var(--text-dark); width: 100%; }

#game-wrapper .btn-start { width: 100%; max-width: 250px; padding: 15px 30px; font-size: 1.3rem; font-weight: 900; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 8px 15px rgba(16, 185, 129, 0.4); text-transform: uppercase; transition: 0.2s;}
#game-wrapper .btn-start:hover { transform: translateY(-3px) scale(1.02); }

/* Hall of fame */
#game-wrapper .hof-title { font-size: 1.4rem; margin-top:0; margin-bottom: 15px; font-weight: 900; text-align: center; color: var(--secondary);}
#game-wrapper .hof-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; max-height: 250px; padding-right: 5px; scroll-behavior: smooth; }
#game-wrapper .hof-item { display: flex; justify-content: space-between; padding: 10px 12px; background: white; border-radius: 12px; margin-bottom: 8px; font-weight: bold; font-size: 0.95rem; border: 2px solid #f1f5f9; transition: all 0.3s ease; }
#game-wrapper .hof-item span:nth-child(2) { color: var(--primary); background: #eff6ff; padding: 2px 8px; border-radius: 8px; }
#game-wrapper .hof-item.rank-0 { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; transform: scale(1.02); margin-bottom: 10px;}
#game-wrapper .hof-item.current-player-score { border-color: var(--primary); background: #f0fdf4; transform: scale(1.03); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); z-index: 10; position: relative; }
#game-wrapper .hof-empty { text-align: center; color: #94a3b8; font-style: italic; padding: 10px; }

/* =========================================================================
   ODLICZANIE I ANIMACJE VS SCREEN (W PEŁNI RESPONSYWNE)
   ========================================================================= */
#game-wrapper #countdown-screen { flex-direction: column; background: rgba(240, 248, 255, 0.95); padding: 20px; box-sizing: border-box; text-align: center;}
#game-wrapper #count-name-info { font-family: 'Impact', 'Arial Black', sans-serif; text-align: center; font-size: clamp(1.5rem, 5vw, 2.5rem); color: #64748b; margin-bottom: 10px; text-transform: uppercase; line-height: 1.2; text-shadow: 2px 2px 0px #fff; max-width: 100%;}
#game-wrapper #count-number { font-family: 'Impact', 'Arial Black', sans-serif; font-size: clamp(4rem, 25vw, 12rem); color: var(--primary); text-shadow: 5px 5px 0px #bfdbfe; margin: 0; line-height: 1; text-align: center; }
@keyframes popScale { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.vs-title { font-size: clamp(1.2rem, 4vw, 1.8rem); color: #64748b; margin-bottom: 15px; text-shadow: 2px 2px 0px #fff; text-align: center;}
.vs-teams-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 20px); margin-bottom: 20px; width: 100%; padding: 10px; box-sizing: border-box; }
.team-anim { font-size: clamp(1.2rem, 5vw, 2.2rem); font-weight: 900; text-transform: uppercase; padding: 10px 20px; border-radius: 20px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); white-space: normal; text-align: center; line-height: 1.2; word-wrap: break-word; letter-spacing: 1px; max-width: 100%; box-sizing: border-box;}
.team-a-slide { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4); animation: slideInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.team-b-slide { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); box-shadow: 0 10px 25px rgba(244, 63, 94, 0.4); animation: slideInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.vs-badge { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900; color: #f59e0b; text-shadow: 3px 3px 0px #fff, -1px -1px 0 #fff; font-style: italic; animation: popVs 0.5s ease-out 0.6s both, pulseVs 1.5s infinite 1.1s; flex-shrink: 0;}

@keyframes slideInLeft { 0% { transform: translateX(-100vw) scale(0.5) rotate(-10deg); opacity: 0; } 100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; } }
@keyframes slideInRight { 0% { transform: translateX(100vw) scale(0.5) rotate(10deg); opacity: 0; } 100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; } }
@keyframes popVs { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 80% { transform: scale(1.3) rotate(15deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes pulseVs { 0% { transform: scale(1); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)); } 100% { transform: scale(1); } }
/* =========================================================================
   GAME LAYOUT HUD
   ========================================================================= */
#game-wrapper .game-inner { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    width: 100%; max-width: 1200px; padding: 15px 10px; 
    max-height: 100%; box-sizing: border-box; flex: 1;
}

#game-wrapper .game-header { 
    width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: stretch; 
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); 
    margin-bottom: 25px; box-sizing: border-box; z-index: 20;
}
.game-header-top { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 25px 10px 25px; }

#game-wrapper .stat-box { font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; gap: 10px; color: #64748b;}
#game-wrapper .stat-box span { color: var(--primary); font-size: 1.8rem; }

#game-wrapper #combo-display { color: #ef4444; font-size: 1.2rem; background: #fee2e2; padding: 4px 10px; border-radius: 12px; opacity: 0; transform: scale(0.8); transition: 0.2s; }
#game-wrapper #combo-display.visible { opacity: 1; display: inline-block; animation: ultraFastPulse 0.12s infinite alternate ease-in-out, microVibration 0.1s infinite; }

@keyframes ultraFastPulse { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
@keyframes microVibration {
    0% { transform: translate(1px, 0.5px); } 25% { transform: translate(-0.5px, -1px); }
    50% { transform: translate(-1px, 0.5px); } 75% { transform: translate(1px, -0.5px); }
    100% { transform: translate(0, 0); }
}

#game-wrapper .time-bar-container { width: calc(100% - 50px); height: 8px; background: #e2e8f0; border-radius: 4px; margin: 0 auto 15px auto; overflow: hidden; }
#game-wrapper .time-bar-fill { height: 100%; background: #10b981; width: 100%; transition: width 1s linear, background-color 0.3s; }

/* =========================================================================
   GAME BOARDS WRAPPER (SOLO & SPLIT SCREEN)
   ========================================================================= */
.game-boards-wrapper { display: flex; width: 100%; height: 100%; justify-content: center; gap: 20px; flex: 1; overflow: hidden; }
.player-zone { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; max-width: 800px; width: 100%;}
.team-header { display: none; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; text-shadow: 1px 1px 0 #fff; }

#game-wrapper .target-container { 
    background: white; padding: 15px 30px; border-radius: 20px; 
    border: 4px solid var(--primary); text-align: center; 
    margin-bottom: 30px; width: 100%; word-wrap: break-word; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 10; position: relative; box-sizing: border-box; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 120px; 
}
#game-wrapper .target-label { font-size: 0.85rem; color: #64748b; text-transform: uppercase; font-weight: 900; margin-bottom: 5px; letter-spacing: 1px; flex-shrink: 0;}
#game-wrapper .target-word { font-size: 1.6rem; font-weight: 900; margin: 0; color: #0f172a; line-height: 1.3;}

/* =========================================================================
   PLANSZA: KRETY, DZIURY I MASKA
   ========================================================================= */
#game-wrapper .game-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 30px; width: 100%; box-sizing: border-box; }

#game-wrapper .hole-wrapper { 
    position: relative; width: 100%; height: 160px; display: flex; flex-direction: column; justify-content: flex-end; 
    z-index: 1; transition: z-index 0s linear 0.25s; touch-action: none; 
}

#game-wrapper .hole-wrapper.active-wrapper { z-index: 100; transition: z-index 0s linear 0s; }

#game-wrapper .hole { 
    position: relative; background: radial-gradient(ellipse at 50% 40%, #050201 30%, #1e0e05 60%, #3e1f0e 95%);
    border-radius: 50%; height: 60px; width: 100%; z-index: 2; border: 2px solid #5a3217;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(255,255,255,0.05), 0 5px 0px #31180a, 0 10px 0px #1c0e05, 0 15px 15px rgba(0,0,0,0.5); 
    box-sizing: border-box;
}

#game-wrapper .mole-mask { 
    position: absolute; bottom: 35px; left: 5%; width: 90%; height: 350px; overflow: hidden; z-index: 1; pointer-events: none; 
}

#game-wrapper .mole { 
    position: absolute; bottom: 0; left: 0; width: 100%; min-height: 110px;
    background-color: white; border-radius: 15px 15px 0 0; border: 4px solid var(--primary); 
    border-bottom: none; display: flex; align-items: center; justify-content: center; 
    text-align: center; padding: 25px 10px 10px 10px; font-weight: 900; font-size: 1.05rem; 
    cursor: pointer; transform: translateY(calc(100% + 80px)); 
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    pointer-events: none; word-wrap: break-word; color: #1e293b; line-height: 1.15; touch-action: none; 
}

#game-wrapper .mole.up { transform: translateY(0); pointer-events: auto; box-shadow: 0 -10px 20px rgba(0,0,0,0.3);}
#game-wrapper .mole.hit-correct { background-color: #10b981; color: white; border-color: #059669; }
#game-wrapper .mole.hit-wrong { background-color: #ef4444; color: white; border-color: #dc2626; }

#game-wrapper .mole::before {
    content: ''; position: absolute; top: -65px; left: 50%; transform: translateX(-50%); width: 85px; height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M20,100 Q20,30 60,30 Q100,30 100,100' fill='%235c4033'/%3E%3Cellipse cx='60' cy='70' rx='30' ry='25' fill='%23d2a679'/%3E%3Cellipse cx='60' cy='62' rx='10' ry='7' fill='%23ff7da1'/%3E%3Cellipse cx='57' cy='60' rx='3' ry='2' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='42' cy='45' r='5' fill='%23111'/%3E%3Ccircle cx='78' cy='45' r='5' fill='%23111'/%3E%3Ccircle cx='40' cy='43' r='1.5' fill='%23fff'/%3E%3Ccircle cx='76' cy='43' r='1.5' fill='%23fff'/%3E%3Crect x='53' y='72' width='6' height='8' rx='2' fill='%23fff'/%3E%3Crect x='61' y='72' width='6' height='8' rx='2' fill='%23fff'/%3E%3Cpath d='M25,60 L5,55 M25,65 L5,65 M25,70 L5,75 M95,60 L115,55 M95,65 L115,65 M95,70 L115,75' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M15,40 Q15,5 60,5 Q105,5 105,40 Z' fill='%23ffcc00'/%3E%3Cellipse cx='60' cy='38' rx='55' ry='12' fill='%23e6b800'/%3E%3Crect x='50' y='15' width='20' height='15' rx='3' fill='%23333'/%3E%3Ccircle cx='60' cy='22' r='6' fill='%23ccffff'/%3E%3Ccircle cx='60' cy='22' r='12' fill='%23ccffff' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain; z-index: -1; 
}
#game-wrapper .mole::after {
    content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 90px; height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cellipse cx='25' cy='25' rx='20' ry='12' fill='%23c19262'/%3E%3Cellipse cx='25' cy='22' rx='18' ry='10' fill='%23d2a679'/%3E%3Cpath d='M10,18 L5,2 L14,14 M18,16 L18,0 L22,14 M28,16 L32,0 L30,14 M36,18 L45,2 L38,14' fill='%23f2f2f2' stroke='%23999' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='95' cy='25' rx='20' ry='12' fill='%23c19262'/%3E%3Cellipse cx='95' cy='22' rx='18' ry='10' fill='%23d2a679'/%3E%3Cpath d='M84,18 L75,2 L82,14 M92,16 L88,0 L90,14 M102,16 L102,0 L98,14 M110,18 L115,2 L106,14' fill='%23f2f2f2' stroke='%23999' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 10; pointer-events: none;
}
/* =========================================================================
   ANIMACJA UDERZONEGO KRETA (Wydłużona dla lepszego efektu)
   ========================================================================= */
#game-wrapper .mole.hit-correct::before,
#game-wrapper .mole.hit-wrong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M20,100 Q20,30 60,30 Q100,30 100,100' fill='%235c4033'/%3E%3Cellipse cx='60' cy='70' rx='30' ry='25' fill='%23d2a679'/%3E%3Cellipse cx='60' cy='62' rx='10' ry='7' fill='%23ff7da1'/%3E%3Cellipse cx='57' cy='60' rx='3' ry='2' fill='%23fff' opacity='0.6'/%3E%3Cpath d='M25,60 L5,55 M25,65 L5,65 M25,70 L5,75 M95,60 L115,55 M95,65 L115,65 M95,70 L115,75' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M37 40 L47 50 M47 40 L37 50' stroke='%23111' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M73 40 L83 50 M83 40 L73 50' stroke='%23111' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M50 72 Q60 80 70 72' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M54 73 C54 90, 66 90, 66 73 Z' fill='%23ff4d4d'/%3E%3Cline x1='60' y1='74' x2='60' y2='84' stroke='%23cc0000' stroke-width='1'/%3E%3Cpath d='M45 10 L50 20 L45 30 L40 20 Z M75 10 L80 20 L75 30 L70 20 Z' fill='%23ffdd00'/%3E%3C/svg%3E");
    /* Spowolniono z 0.2s na 0.4s */
    animation: bonk 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bonk {
    0% { transform: translateX(-50%) scaleY(1); }
    30% { transform: translateX(-50%) scaleY(0.8) translateY(15px); } /* Mocniejsze spłaszczenie */
    70% { transform: translateX(-50%) scaleY(0.85) translateY(10px); } /* Przytrzymanie zgniecenia */
    100% { transform: translateX(-50%) scaleY(1) translateY(0); }
}
/* =========================================================================
   🖥️ RESPONSIVE DESKTOP (Wszystko od 769px w górę - pełna konsolidacja)
   ========================================================================= */
@media (min-width: 769px) {
    /* Rozszerzenie przestrzeni roboczej */
    #game-wrapper .game-inner { max-width: 1600px; }
    .game-boards-wrapper { overflow: visible; }
    
    /* Zapobieganie ściskaniu nagłówków */
    #game-wrapper .game-header, #game-wrapper .target-container, #game-wrapper .team-header { flex-shrink: 0; }

    /* Układ elastyczny pod nory kreta */
    #game-wrapper .player-zone { display: flex; flex-direction: column; }
    #game-wrapper .game-board { flex-grow: 1; height: 100%; align-content: space-evenly; align-items: end; }

    /* --- TEAM MODE (SZTYWNE 50% I PERFEKCYJNA LINIA ŚRODKA) --- */
    .game-boards-wrapper.team-mode { gap: 0; position: relative; }
    
    /* Linia rysowana absolutnie na środku - nie zależy od paddingów */
    .game-boards-wrapper.team-mode::after {
        content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
        border-left: 2px dashed rgba(0,0,0,0.1); transform: translateX(-50%); pointer-events: none; z-index: 0;
    }
    
    .game-boards-wrapper.team-mode .player-zone {
        flex: 0 0 50%; max-width: 50%; box-sizing: border-box; padding: 0 15px; border-right: none; 
    }
    .game-boards-wrapper.team-mode .game-board { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .game-boards-wrapper.team-mode .hole-wrapper { transform: scale(0.9); margin: 0; }
    
    /* Zabezpieczone, sztywne pudełko pytania (Team Mode) */
    .game-boards-wrapper.team-mode .target-container { 
        height: 110px; min-height: 110px; max-height: 110px; padding: 10px 20px; 
        box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; 
        overflow: hidden; flex-shrink: 0; margin-bottom: 15px;
    }
    .game-boards-wrapper.team-mode .target-label { font-size: 0.75rem; margin-bottom: 5px; flex-shrink: 0; }
    
    /* Inteligentne obcinanie długiego tekstu (Team Mode) */
    .game-boards-wrapper.team-mode .target-word { 
        font-size: 1.1rem; line-height: 1.25; margin: 0; width: 100%; 
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
    }
}

/* =========================================================================
   📏 GLOBALNA KOMPRESJA DLA NIŻSZYCH EKRANÓW LAPTOPÓW (1366x768 / 1280x800)
   ========================================================================= */
@media (min-width: 769px) and (max-height: 850px) {
    /* Mniejsze nagłówki */
    #game-wrapper .game-header { margin-bottom: 10px; }
    .game-header-top { padding: 5px 20px; }

    /* Wspólna kompresja dla kontenera z pytaniem (Solo & Team) */
    #game-wrapper .target-container {
        height: 85px; min-height: 85px; max-height: 85px; padding: 5px 15px; margin-bottom: 5px;
    }
    #game-wrapper .target-label { margin-bottom: 2px; }
    #game-wrapper .target-word { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Globalne pomniejszenie nor */
    #game-wrapper .game-board { gap: 0px 20px; align-content: start; }
    #game-wrapper .hole-wrapper { transform: scale(0.8); margin: -15px 0; }
}

/* Hardcore kompresja dla ultra-niskich ekranów */
@media (min-width: 769px) and (max-height: 700px) {
    #game-wrapper .target-container { height: 75px; min-height: 75px; max-height: 75px; }
    .game-boards-wrapper.team-mode .hole-wrapper { transform: scale(0.7); margin: -20px; }
}

/* =========================================================================
   🖥️ WIELKIE MONITORY (FHD / 4K)
   ========================================================================= */
@media (min-width: 1400px) and (min-height: 900px) {
    #game-wrapper .target-container { height: 140px; min-height: 140px; padding: 20px; }
    #game-wrapper .target-word { font-size: 1.5rem; }
    
    .game-boards-wrapper.team-mode .hole-wrapper { transform: scale(1.05); margin: 10px; }
    .game-boards-wrapper.team-mode .game-board { gap: 20px 30px; }
}

/* =========================================================================
   📱 MOBILE OVERRIDES 
   ========================================================================= */
@media (max-width: 768px) {
    #game-wrapper { top: 0 !important; bottom: 75px !important; height: auto !important; }
    
    .card-controls-bar { padding: 8px 15px; min-height: 50px; }
    .vol-slider { width: 60px; }
    .control-btn { width: 32px; height: 32px; padding: 5px; }
    .btn-exit { left: 10px !important; }
    
    #game-wrapper .overlay-screen { padding: 10px; align-items: flex-start; overflow-y: auto; }
    #game-wrapper #countdown-screen { align-items: center !important; }
    #game-wrapper .menu-card { margin: auto; border-radius: 12px; max-height: none; width: 100%; border-width: 2px; }
    #game-wrapper .card-content { flex-direction: column; margin: 0; width: 100%; overflow: visible; }
    #game-wrapper .menu-right { border-left: none; border-top: 2px dashed #cbd5e1; padding: 15px; border-radius: 0 0 16px 16px;}
    #game-wrapper .menu-left { padding: 20px 15px;}
    #game-wrapper .menu-left h1 { font-size: 1.6rem; margin-bottom: 5px; }
    #game-wrapper .btn-start { font-size: 1.1rem; padding: 10px 20px; } 

    #game-wrapper .game-inner { padding: 10px 5px 5px 5px; justify-content: space-evenly; }
    #game-wrapper .game-header { margin-bottom: 10px; border-radius: 15px; max-width: 100%;}
    .game-header-top { padding: 10px 15px 5px 15px; }
    
    #game-wrapper .time-bar-container { width: calc(100% - 30px); margin: 0 auto 10px auto; }
    #game-wrapper .stat-box { font-size: 1.1rem; }
    #game-wrapper .stat-box span { font-size: 1.3rem; }
    #game-wrapper #combo-display { font-size: 0.9rem; padding: 2px 6px; }

    #game-wrapper .target-container { padding: 10px 15px; margin-bottom: 15px; border-width: 3px; border-radius: 15px; min-height: 100px;}
    #game-wrapper .target-word { font-size: 1.2rem; line-height: 1.2; }

    #game-wrapper .game-board { grid-template-columns: repeat(2, 1fr); gap: 15px 20px; }
    #game-wrapper .hole-wrapper { height: 135px; } 
    #game-wrapper .hole { height: 45px; border-width: 1px; box-shadow: inset 0 8px 15px rgba(0,0,0,0.9), 0 4px 0px #31180a, 0 8px 0px #1c0e05, 0 10px 10px rgba(0,0,0,0.5); }
    #game-wrapper .mole-mask { bottom: 25px; height: 300px; left: 2%; width: 96%; pointer-events: none; }
    #game-wrapper .mole { min-height: 90px; padding: 22px 5px 5px 5px; font-size: 0.85rem; border-width: 3px; border-radius: 12px 12px 0 0; transform: translateY(calc(100% + 65px)); }
    #game-wrapper .mole.up { transform: translateY(0); }
    #game-wrapper .mole::before { top: -50px; width: 65px; height: 55px; }
    #game-wrapper .mole::after { top: -12px; width: 75px; height: 25px; }
    
    #game-wrapper #count-number { font-size: 8rem; }
    #game-wrapper #count-name-info { font-size: 1.5rem; }
    #final-score { font-size: 3rem !important; margin-bottom: 10px !important; }

    /* Mobile Team Mode Alignment */
    .game-boards-wrapper.team-mode { flex-direction: column; gap: 5px; }
    .game-boards-wrapper.team-mode .player-zone { border-bottom: 4px dashed rgba(0,0,0,0.1); padding-bottom: 10px; }
    .game-boards-wrapper.team-mode .player-zone:last-child { border-bottom: none; }
    .game-boards-wrapper.team-mode .game-board { grid-template-columns: repeat(3, 1fr); gap: 0px; margin-top: 5px; }
    .game-boards-wrapper.team-mode .hole-wrapper { transform: scale(0.65); margin: -15px; }
    .game-boards-wrapper.team-mode .target-container { padding: 5px 10px; margin-bottom: 10px; min-height: 70px; height: auto;}
    .game-boards-wrapper.team-mode .target-word { font-size: 1rem; }
    .game-boards-wrapper.team-mode .team-header { font-size: 1.1rem; margin-bottom: 0; }
    .game-boards-wrapper.team-mode .mole { font-size: 1rem !important; }
    
    /* Mobile animacje odliczania drużyn (Pionowe wjeżdżanie) */
    .vs-teams-container { flex-direction: column; gap: 15px; }
    .team-anim { font-size: 1.8rem; padding: 10px 20px; white-space: normal; text-align: center; }
    .vs-badge { font-size: 2.5rem; }
    @keyframes slideInLeft { 0% { transform: translateY(-100vh) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
    @keyframes slideInRight { 0% { transform: translateY(100vh) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
}

@media (max-width: 360px) {
    #game-wrapper .target-word { font-size: 1rem; }
    #game-wrapper .game-board { gap: 10px 10px; }
    #game-wrapper .hole-wrapper { height: 120px; }
    #game-wrapper .hole { height: 35px; box-shadow: inset 0 6px 10px rgba(0,0,0,0.9), 0 3px 0px #31180a, 0 6px 0px #1c0e05, 0 8px 8px rgba(0,0,0,0.5); }
    #game-wrapper .mole-mask { bottom: 20px; height: 250px; pointer-events: none; }
    #game-wrapper .mole { min-height: 80px; padding: 18px 3px 3px 3px; font-size: 0.75rem; border-width: 2px; transform: translateY(calc(100% + 55px)); }
    #game-wrapper .mole.up { transform: translateY(0); }
    #game-wrapper .mole::before { top: -45px; width: 55px; height: 45px; }
    #game-wrapper .mole::after { top: -10px; width: 65px; height: 22px; }
}

/* =========================================================================
   ANIMACJE FEEDBACKU I EFEKTY DODATKOWE
   ========================================================================= */
#game-wrapper .pow-text { 
    position: absolute; font-size: 3.5rem; font-weight: 900; pointer-events: none; z-index: 1000; 
    text-transform: uppercase; font-style: italic; white-space: nowrap;
    animation: powAnim 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}
@media (max-width: 768px) { #game-wrapper .pow-text { font-size: 2.2rem; } }

@keyframes powAnim { 
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.2) rotate(-20deg); } 
    20% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(10deg); } 
    80% { opacity: 1; transform: translate(-50%, -20px) scale(1.2) rotate(5deg); } 
    100% { opacity: 0; transform: translate(-50%, -60px) scale(1.8) rotate(0deg); } 
}

#game-wrapper .floating-pts { position: absolute; font-size: 2.5rem; font-weight: 900; pointer-events: none; animation: floatUp 0.8s ease-out forwards; z-index: 999; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff; }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(1.5); } }

/* --- JUMPSCARE --- */
#broken-screen-overlay {
    position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: none; background-color: rgba(0,0,0,0.1); mix-blend-mode: multiply; opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='3' fill='black' opacity='0.9'/%3E%3Cpath d='M50 50 L42 45 L38 30 L25 25 L15 10 L5 12 L-5 -5' stroke='black' stroke-width='1.5' fill='none' opacity='0.9'/%3E%3Cpath d='M50 50 L60 42 L65 48 L75 35 L85 40 L95 20 L105 15' stroke='black' stroke-width='2' fill='none' opacity='0.8'/%3E%3Cpath d='M50 50 L45 60 L30 65 L25 80 L10 85 L0 105' stroke='black' stroke-width='1.8' fill='none' opacity='0.85'/%3E%3Cpath d='M50 50 L58 58 L55 75 L68 85 L75 105' stroke='black' stroke-width='1.2' fill='none' opacity='0.9'/%3E%3Cpath d='M50 50 L35 52 L25 45 L10 50 L-5 45' stroke='black' stroke-width='1' fill='none' opacity='0.7'/%3E%3Cpath d='M50 50 L65 55 L80 50 L95 60 L105 55' stroke='black' stroke-width='1.4' fill='none' opacity='0.75'/%3E%3Cpath d='M42 45 L35 52 L38 60 M60 42 L70 45 L75 35 M45 60 L50 70 L55 75 M30 65 L20 60 L10 50 M85 40 L90 50 L85 60 M25 25 L15 30 L5 25 M65 85 L60 95 L50 90' stroke='black' stroke-width='0.6' fill='none' opacity='0.6'/%3E%3C/svg%3E");
    background-size: cover; background-position: center;
}
.shatter-anim { display: block !important; animation: shatterEffect 0.6s cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes shatterEffect {
    0% { opacity: 1; transform: scale(1.1) translate(10px, 10px); }
    15% { opacity: 1; transform: scale(1) translate(-5px, -5px); }
    30% { opacity: 0.8; transform: translate(3px, 3px); }
    100% { opacity: 0; transform: translate(0, 0); }
}
/* =========================================================================
   ✨ KOREKTY WIZUALNE: CZYTELNOŚĆ, KRETY I ODCHUDZENIE INTERFEJSU
   ========================================================================= */

/* 1. Znaczne odchudzenie paska kontrolnego (Zyskujemy cenne miejsce w pionie!) */
.card-controls-bar {
    padding: 5px 15px !important; 
    min-height: 40px !important;
}
.control-btn {
    width: 30px !important; 
    height: 30px !important; 
    padding: 5px !important;
}
.control-btn svg {
    width: 18px; height: 18px;
}
#game-wrapper .game-header {
    margin-bottom: 12px !important;
}
.game-header-top {
    padding: 6px 20px 4px 20px !important;
}

/* Odchudzenie paska czasu */
#game-wrapper .time-bar-container {
    height: 5px !important; 
    margin: 0 auto 8px auto !important;
}

/* 2. Zwiększenie czytelności nazw drużyn na ekranie VS (Oddech między literami) */
.team-anim {
    letter-spacing: 2.5px !important; 
    padding: 10px 30px !important;
}

/* 3. Przesunięcie kretów lekko w dół w stanie wysuniętym, by nie zasłaniały pytań */
#game-wrapper .mole.up {
    transform: translateY(14px) !important; /* Kret zatrzymuje się 14px niżej */
}

/* Na telefonach przesuwamy nieco mniej, bo krecik jest mniejszy */
@media (max-width: 768px) {
    #game-wrapper .mole.up {
        transform: translateY(8px) !important; 
    }
}

/* Odzyskane z paska miejsce oddajemy jako bezpieczny odstęp pod pudełkiem z pytaniem */
@media (min-width: 769px) and (max-height: 850px) {
    #game-wrapper .target-container {
        margin-bottom: 15px !important; /* Wcześniej było ciasne 5px */
    }
}
/* =========================================================================
   🎯 KOREKTA POZYCJI TEKSTU NA KRETACH
   ========================================================================= */

#game-wrapper .mole {
    align-items: flex-start !important; /* Wyłącza centrowanie w pionie - przyciąga tekst do góry */
    padding-top: 35px !important; /* Odpowiedni bezpieczny dystans od łapek kreta na komputerach */
}

/* Wersja dla telefonów - łapki są mniejsze, więc margines też musi być mniejszy */
@media (max-width: 768px) {
    #game-wrapper .mole {
        padding-top: 25px !important; 
    }
}
/* =========================================================================
   🚀 POWIĘKSZENIE KAFELKÓW I NOR (MAKSYMALNE WYKORZYSTANIE PRZESTRZENI)
   ========================================================================= */

@media (min-width: 769px) {
    /* 1. Wydłużamy białą tabliczkę, żeby pomieściła więcej linijek tekstu */
    #game-wrapper .mole {
        min-height: 135px !important; /* Wcześniej było 110px */
        padding-top: 40px !important; /* Zapewnia odstęp tekstu od łapek kreta */
    }

    /* 2. Wydłużamy maskę (niewidzialną ramkę), żeby dłuższy kret bezpiecznie się w niej chował */
    #game-wrapper .mole-mask {
        height: 400px !important;
    }
    
    /* 3. Zmniejszamy poziome odstępy między dziurami w siatce, oddając tę szerokość kafelkom */
    .game-boards-wrapper.team-mode .game-board {
        gap: 15px 8px !important; /* Bardziej zbite dziury = szersze kafelki */
    }

    /* 4. Powiększamy ogólną skalę w trybie drużynowym na domyślnym desktopie */
    .game-boards-wrapper.team-mode .hole-wrapper {
        transform: scale(0.98) !important; /* Było 0.90 */
    }
}

/* Laptopy 1280x800 i 1366x768 */
@media (min-width: 769px) and (max-height: 850px) {
    #game-wrapper .hole-wrapper {
        transform: scale(0.90) !important; /* Było 0.80 - kafelki rosną o ponad 10%! */
        margin: -5px 0 !important; /* Mniejszy margines ujemny, by zapobiec najechaniu na dolny pasek */
    }
}

/* Duże ekrany (Full HD / 4K) */
@media (min-width: 1400px) and (min-height: 900px) {
    #game-wrapper .mole {
        min-height: 150px !important; /* Na wielkich ekranach tabliczka staje się ogromna */
        padding-top: 45px !important;
    }
    .game-boards-wrapper.team-mode .hole-wrapper {
        transform: scale(1.15) !important; /* Utrzymujemy duże powiększenie całej grafiki */
    }
}
/* =========================================================================
   🔧 POPRAWKA NAKŁADANIA SIĘ DZIUR NA EKRANACH FULL HD
   ========================================================================= */

@media (min-width: 1400px) and (min-height: 900px) {
    /* 1. Zwiększamy odstępy poziome, by nory miały fizyczną przerwę między sobą */
    .game-boards-wrapper.team-mode .game-board {
        gap: 20px 25px !important; 
    }
    
    /* 2. Zdejmujemy zgubne sztuczne powiększenie (scale). 
       Przy width: 100% na ekranie Full HD nory i tak będą ogromne, 
       ale teraz grzecznie zostaną w swoich kolumnach. */
    .game-boards-wrapper.team-mode .hole-wrapper {
        transform: scale(1) !important; 
        margin: 0 !important;
    }
    
    /* 3. Podbijamy lekko wysokość białego kafelka z tekstem w ramach rekompensaty */
    #game-wrapper .mole {
        min-height: 160px !important;
        padding-top: 50px !important;
    }
}
/* =========================================================================
   📏 POPRAWKA OVERLAPU: ODDECH DLA KRETÓW (ROZDZIELCZOŚĆ 1280x800)
   ========================================================================= */

@media (min-width: 769px) and (max-height: 850px) {
    /* 1. Ekstremalne odchudzenie górnego paska kontrolnego z audio */
    .card-controls-bar {
        min-height: 38px !important;
        padding: 4px 15px !important;
    }
    #game-wrapper .game-header {
        margin-bottom: 5px !important;
    }

    /* 2. Duży bufor powietrza między pytaniem a kretami */
    #game-wrapper .target-container {
        margin-bottom: 25px !important; /* Fizycznie odpycha górny rząd kretów w dół */
    }

    /* 3. Zepchnięcie siatki z norami w kierunku niewykorzystanego miejsca na dole */
    #game-wrapper .game-board {
        align-content: space-evenly !important; /* Równomiernie rozkłada rzędy kretów w pionie */
    }

    /* 4. Likwidacja ujemnych marginesów, które ciągnęły nory do góry */
    .game-boards-wrapper.team-mode .hole-wrapper,
    #game-wrapper .hole-wrapper {
        margin: 5px 0 !important; 
    }
}
/* =========================================================================
   BLOKADA OBROTU (TYLKO W TRAKCIE GRY ZESPOŁOWEJ)
   ========================================================================= */
#ios-rotate-warning {
    display: none; 
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.98); color: white;
    z-index: 999999; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media screen and (orientation: portrait) and (max-width: 768px) {
    body.team-mode-active.game-playing #ios-rotate-warning { 
        display: flex !important; 
    }
}

/* =========================================================================
   EKSTREMALNA OPTYMALIZACJA MIEJSCA DLA TELEFONÓW W POZIOMIE (LANDSCAPE)
   ========================================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    #game-wrapper {
        top: 0 !important; 
    }

    /* 1. Odchudzenie głównego panelu górnego */
    .card-controls-bar {
        min-height: 28px !important;
        padding: 2px 10px !important;
    }
    .control-btn {
        width: 24px !important; height: 24px !important; padding: 2px !important;
    }
    .control-btn svg {
        width: 14px; height: 14px;
    }
    .game-header-top {
        padding: 2px 15px !important;
    }
    #game-wrapper .game-header {
        margin-bottom: 2px !important;
    }
    #game-wrapper .time-bar-container {
        height: 3px !important;
        margin-bottom: 2px !important;
    }
    #game-wrapper .stat-box { font-size: 0.8rem !important; }
    #game-wrapper .stat-box span { font-size: 1rem !important; }
    
    /* 2. Kompresja stref (Zespołowy) */
    .game-boards-wrapper.team-mode { gap: 2px !important; }
    .game-boards-wrapper.team-mode .team-header { 
        font-size: 0.8rem !important; 
        margin-bottom: 2px !important; 
    }
    
    /* 3. Kompresja pojemnika na słowo - Wzmocniona ochrona przed kretami */
    #game-wrapper .target-container {
        min-height: 35px !important;
        height: 35px !important;
        padding: 2px 5px !important;
        margin-bottom: 12px !important; /* Zwiększony odstęp od kretów */
        border-width: 2px !important;
        flex-direction: row !important; 
        gap: 5px !important;
        z-index: 999 !important; /* Pytanie absolutnie ZAWSZE NAD kretami */
    }
    #game-wrapper .target-label { display: none !important; } 
    #game-wrapper .target-word { 
        font-size: 1.1rem !important; 
        line-height: 1 !important; 
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 4. Nory - Mniejsze, obniżone i zabezpieczone */
    .game-boards-wrapper.team-mode .game-board {
        gap: 0 !important;
        margin-top: 5px !important; /* Spycha całą planszę w dół */
    }
    .game-boards-wrapper.team-mode .hole-wrapper {
        transform: scale(0.54) !important; /* Kreciki są jeszcze mniejsze */
        margin: -8px -10px !important; /* Zmniejszyliśmy ujemny margines, co opuści wszystkie nory w stronę dolnej krawędzi ekranu */
    }
    
    /* Powstrzymuje kreta przed wyskoczeniem do samego końca */
    #game-wrapper .mole.up {
        transform: translateY(22px) !important; 
    }
    
    /* 5. Mniejsze teksty na kretach, żeby zrekompensować skalowanie */
    #game-wrapper .mole {
        font-size: 1.4rem !important; /* Lekko podbite, żeby po nałożeniu scale(0.54) tekst wciąż był duży i wyraźny */
    }

    /* 6. Naprawa rozlanego napisu GO! i ekranu końca gry */
    #game-wrapper #count-number {
        font-size: clamp(3.5rem, 15vw, 8rem) !important;
    }
    #end-screen .menu-card { 
        max-height: 98vh !important; 
        width: 90vw !important; 
    }
    #end-screen .card-content { 
        padding: 10px 20px !important; 
        flex-direction: row !important; 
        gap: 20px;
    }
    #end-title { font-size: 1.5rem !important; margin-bottom: 5px !important; }
    #final-score { font-size: 3rem !important; margin: 0 !important; flex: 1; }
    #end-screen .btn-start { width: auto !important; padding: 10px 20px !important; font-size: 1rem !important; }
    #solo-stats { display: none !important; } 
}
/* =========================================================================
   LATAJĄCY KASK (EFEKT UDERZENIA)
   ========================================================================= */
.flying-hat {
    position: absolute;
    width: 80px; 
    height: 50px;
    /* To jest wycięty oryginalny kask z latarką w formacie SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M15,40 Q15,5 60,5 Q105,5 105,40 Z' fill='%23ffcc00'/%3E%3Cellipse cx='60' cy='38' rx='55' ry='12' fill='%23e6b800'/%3E%3Crect x='50' y='15' width='20' height='15' rx='3' fill='%23333'/%3E%3Ccircle cx='60' cy='22' r='6' fill='%23ccffff'/%3E%3Ccircle cx='60' cy='22' r='12' fill='%23ccffff' opacity='0.4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2000;
    /* Wystrzelenie w górę z płynnym spowolnieniem grawitacyjnym */
 animation: hatFly 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes hatFly {
    0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dirX, 50px)), -250px) rotate(var(--rot, 180deg)); opacity: 0; }
}

@media (max-width: 768px) {
    .flying-hat { width: 60px; height: 35px; } /* Mniejszy kask dla telefonów */
}