/* =========================================
   games/crossword.css
   ========================================= */

/* AGRESYWNY RESET */
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; }

/* Ukrycie wszystkich pasków nawigacji i powiadomień dla pełnej immersji */
html body header.main-header.guest-nav-active,
html body .main-header,
html body .mobile-bottom-nav,
html body header,
html body .navbar,
html body .top-nav,
html body #header,
html body .notification-icon,
html body .bell-icon,
html body .badge,
html body #mobile-floating-bell, 
html body .floating-bell-wrapper { 
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#game-wrapper {
    --primary: #0284c7; --primary-light: #e0f2fe; --primary-dark: #0369a1;
    --bg-color: #f0f9ff; --text-main: #0f172a; --text-muted: #64748b;
    --cell-size: 40px;
    
    position: fixed; top: 0 !important; left: 0; right: 0; height: 100svh !important; z-index: 50;
    background: radial-gradient(circle at center, #ffffff 0%, var(--bg-color) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    overflow: hidden; color: var(--text-main); user-select: none;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ================== EKRANY MENU ================== */
.card-controls-bar { width: 100%; display: flex; justify-content: center; align-items: center; padding: 10px 20px; background: white; border-bottom: 2px dashed #bae6fd; box-sizing: border-box; border-radius: 16px 16px 0 0; position: relative; 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; margin: 0;}
.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: var(--primary); color: var(--primary); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); margin: 0; }
.btn-exit:hover { background: var(--primary); 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; }

.overlay-screen { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 15px; backdrop-filter: blur(8px); overflow-y: auto; }
.menu-card { background: white; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); display: flex; flex-direction: column; max-width: 800px; width: 100%; border: 4px solid white; outline: 3px solid var(--primary); outline-offset: -3px; max-height: 95vh; overflow: hidden; }
.card-content { display: flex; flex-direction: row; width: 100%; flex: 1; overflow-y: auto; }
.menu-left { padding: 30px 40px; flex: 1.2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.menu-right { padding: 30px 40px; flex: 0.8; background: #f8fafc; border-left: 2px dashed #cbd5e1; border-radius: 0 0 16px 0; transition: opacity 0.3s; }

.menu-left h1 { font-size: 2.2rem; margin:0 0 10px 0; color: var(--primary); font-weight: 900; line-height: 1.1; }
.menu-left p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 15px; line-height: 1.4; max-width: 350px; }

.mode-selector, .time-selector { display: flex; gap: 10px; margin-bottom: 20px; width: 100%; max-width: 350px; background: #f1f5f9; padding: 5px; border-radius: 12px; }
.time-selector { flex-direction: column; gap: 0; }
.time-selector p { margin: 0 0 8px 0; font-size: 0.85rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; }
.time-btns { display: flex; gap: 8px; justify-content: center;}

.mode-btn, .t-btn, .w-btn { flex: 1; padding: 10px 5px; font-size: 0.9rem; font-weight: bold; border-radius: 8px; border: none; background: transparent; cursor: pointer; color: var(--text-muted); transition: 0.2s; }
.t-btn, .w-btn { background: #f1f5f9; border: 2px solid #e2e8f0; }
.mode-btn.active, .t-btn.active, .w-btn.active { background: white; color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.t-btn.active, .w-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

.player-profile-wrapper, .group-input-wrapper { display: flex; align-items: center; background: #f8fafc; border: 3px solid #e2e8f0; border-radius: 50px; padding: 5px 15px; width: 100%; max-width: 300px; margin: 0 auto 20px auto; }
.group-naming-area { display: none; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-bottom: 20px; }
.avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; margin-right: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.name-input, .group-name-input { border: none; background: transparent; outline: none; font-size: 1.1rem; font-weight: bold; width: 100%; color: var(--text-main); }
.group-input-wrapper i { margin-right: 10px; font-style: normal; font-weight: 900; }

.btn-start { width: 100%; max-width: 250px; padding: 15px; font-size: 1.3rem; font-weight: 900; background: var(--primary); color: white; border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; transition: 0.2s; box-shadow: 0 8px 15px rgba(2, 132, 199, 0.4);}
.btn-start:hover { transform: translateY(-3px) scale(1.02); }

.hof-title { font-size: 1.2rem; margin-top:0; margin-bottom: 15px; font-weight: 900; text-align: center; }
.hof-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; max-height: 250px; scroll-behavior: smooth; width: 100%; box-sizing: border-box;}
.hof-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: white; border-radius: 8px; margin-bottom: 8px; font-size: 0.9rem; border: 2px solid #f1f5f9; transition: all 0.3s ease; }
.hof-item span:nth-child(2) { color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 8px; font-weight: bold; flex-shrink: 0; }
.hof-item.current-player-score { border-color: var(--primary); transform: scale(1.03); background: var(--primary-light); }
.hof-empty { text-align: center; color: #94a3b8; font-style: italic; padding: 10px; }
.instruction-list { padding-left: 20px; margin: 0; color: #475569; font-size: 0.95rem; line-height: 1.4; }
.instruction-list li { margin-bottom: 12px; }

#countdown-screen { flex-direction: column; padding: 20px; box-sizing: border-box; text-align: center; overflow: hidden; width: 100%; }
#count-name-info { font-family: 'Impact', sans-serif; text-align: center; font-size: clamp(1.2rem, 5vw, 2rem); color: white; margin-bottom: 20px; text-transform: uppercase; line-height: 1.2; word-break: break-word; max-width: 100%; }
#count-number { font-family: 'Impact', sans-serif; font-size: clamp(4rem, 25vw, 14rem); color: var(--primary); text-shadow: 6px 6px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1; max-width: 100%; word-break: break-word; }

/* ================== GRA WŁAŚCIWA (ZOPTYMALIZOWANY UKŁAD) ================== */
.game-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1600px; padding: 10px; flex: 1; overflow: hidden; box-sizing: border-box; }

/* UKŁAD: Siatka po lewej, Kontrolki i Klawiatura po prawej */
.crossword-layout { display: flex; flex-direction: row; gap: 15px; width: 100%; flex: 1; overflow: hidden; align-items: stretch; }

.cw-left-col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }

.cw-right-col { 
    width: 22vw; 
    min-width: 280px; 
    max-width: 350px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    transition: all 0.3s ease; 
    position: relative;
    flex-shrink: 0;
}
.cw-right-col.expanded { width: 40vw; max-width: 600px; }

/* Team Mode Layout Swapping (Desktop Only) */
@media (min-width: 769px) {
    .crossword-layout.team-a-turn { flex-direction: row-reverse; }
    .crossword-layout.team-b-turn { flex-direction: row; }
}

/* ZARZĄDZANIE PRZYCISKIEM WYJŚCIA - DESKTOP vs MOBILE */
.mobile-exit { display: none !important; }
.desktop-exit { display: flex; width: 100%; }

.btn-exit-game-text {
    background: #fee2e2; color: #dc2626; border: 2px solid #fca5a5; padding: 8px 16px; border-radius: 8px; font-weight: 900; font-size: 1rem; cursor: pointer; transition: all 0.3s ease-out; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; box-shadow: 0 3px 0 #fca5a5; justify-content: center; width: 100%;
}
/* Efekt specjalny hover tylko dla Desktopu */
.desktop-exit .btn-exit-game-text:hover {
    background: #ef4444; color: white; border-color: #dc2626; box-shadow: 0 3px 0 #b91c1c; transform: translateY(-2px);
    width: 100%; justify-content: center;
}
.btn-exit-game-text:active {
    transform: translateY(3px); box-shadow: none;
}

/* KONTROLKI NAD KLAWIATURĄ */
.side-controls-bar { max-height: 15px; width: 100%; display: flex; align-items: center; justify-content: center; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 10px 15px; box-sizing: border-box; flex-shrink: 0; border: 2px solid #cbd5e1; margin-bottom: 10px; gap: 10px;}
.stat-compact { font-size: 0.95rem; font-weight: 700; color: #64748b; white-space: nowrap; display: flex; align-items: center; gap: 5px;}
.stat-compact span { color: var(--primary); font-size: 1.2rem; font-weight: 900; }
.compact-vol { gap: 5px; display: flex; align-items: center;}

/* TEAM SCOREBOARD PIONOWY */
.team-scoreboard { display: flex; width: 100%; flex-direction: column; gap: 10px; flex-shrink: 0; margin-bottom: 10px; transition: all 0.5s ease;}
.team-panel { flex: 1; padding: 8px 15px; border-radius: 12px; font-weight: bold; background: white; border: 3px solid #cbd5e1; opacity: 0.6; transition: all 0.3s; display: flex; align-items: center; gap: 15px; justify-content: flex-start;}
.team-a { color: #0ea5e9; }
.team-b { color: #f43f5e; }
.team-panel.active { border-color: currentColor; opacity: 1; transform: scale(1.02); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.team-score { font-size: 2rem; line-height: 1; font-weight: 900; min-width: 50px; text-align: left;}
.team-name { font-size: 0.95rem; text-transform: uppercase; text-align: left; word-break: break-word; line-height: 1.1;}

/* KONTROLKI CZASU I WYNIKU POD KLAWIATURĄ */
.side-time-wrapper { background: white; border: 2px solid #cbd5e1; border-radius: 12px; padding: 10px 15px; margin-top: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); width: 100%; box-sizing: border-box; flex-shrink: 0; }
.slim-time-bar { width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; position: relative; transition: opacity 0.3s;}
.time-bar-fill { height: 100%; background: var(--primary); width: 100%; transition: width 1s linear, background-color 0.3s; }

/* ZWIĘKSZONY TEKST PODPOWIEDZI DLA TABLIC INTERAKTYWNYCH */
.clue-and-hint-wrapper { display: flex; gap: 10px; margin-bottom: 0px; align-items: stretch; flex-shrink: 0;}
.active-clue-display { flex: 1; background: white; border: 3px dashed #bae6fd; padding: 15px 20px 20px 20px; border-radius: 12px; font-size: clamp(1.1rem, 3vh, 1.6rem); font-weight: 900; text-align: center; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.active-clue-display:active { transform: scale(0.98); background: #e0f2fe; }
.active-clue-display::after { content: '↻ Zmień hasło (-5 pkt)'; position: absolute; bottom: 4px; right: 10px; font-size: 0.8rem; color: #64748b; font-weight: bold; }
.btn-hint { background: #fffbeb; border: 3px solid #fde047; color: #d97706; border-radius: 12px; cursor: pointer; font-weight: bold; font-size: clamp(0.9rem, 2vh, 1.1rem); padding: 5px 15px; min-width: 80px; transition: all 0.2s; box-shadow: 0 4px 0 #fde047; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;}
.btn-hint:active { transform: translateY(4px); box-shadow: none; }
.btn-hint:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #cbd5e1; border-color: #cbd5e1; color: #94a3b8; background: #f8fafc;}

/* SIATKA I TŁO (DRAG TO PAN) */
.grid-wrapper { 
    position: relative; flex: 1; display: flex; width: 100%; min-height: 0; 
    border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); 
    border: 2px solid #e2e8f0; 
    background-color: #f8fafc; background-size: cover; background-position: center; 
    transition: background-image 0.4s ease-in-out;
}
.grid-container { 
    flex: 1; width: 100%; height: 100%; position: relative; 
    overflow: auto; scrollbar-width: none; -ms-overflow-style: none; 
    cursor: grab; display: grid; place-items: center;
}
.grid-container::-webkit-scrollbar { display: none; }
.grid-container:active { cursor: grabbing; }

.grid-inner-wrapper { padding: 60px; margin: auto; }

.cw-grid { position: relative; display: grid; gap: 0; } 
.cw-cell { width: var(--cell-size); height: var(--cell-size); border: 1px solid #1e1f20; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; position: relative; cursor: pointer; color: var(--text-main); transition: background 0.2s; box-sizing: border-box; }
.cw-cell.empty { background: transparent; border: none; cursor: default; pointer-events: none;}
.cw-cell.active-word { background: var(--primary-light); }
.cw-cell.active-cell { background: #fef08a; border: 2px solid #eab308; z-index: 5; box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);}
.cw-cell.solved { background: #d1fae5; color: #047857; font-weight: 900; pointer-events: none; border-color: #34d399;}
.cw-number { position: absolute; top: 1px; left: 2px; font-size: 0.6rem; color: #64748b; font-weight: bold; }

/* Przerywane linie dla spacji międzywyrazowych */
.cw-cell.space-right { border-right: 4px dashed #64748b !important; }
.cw-cell.space-bottom { border-bottom: 4px dashed #64748b !important; }
.cw-cell.error-shake { animation: shakeError 0.4s ease-in-out; background: #fee2e2; color: #dc2626; border-color: #ef4444;}
@keyframes shakeError { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* PRZYCISK ZMIANY TŁA */
.btn-change-bg { position: absolute; bottom: 15px; right: 15px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); border: 2px solid #cbd5e1; color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); backdrop-filter: blur(4px); transition: all 0.2s; font-size: 1.2rem; padding: 0;}
.btn-change-bg:hover { transform: scale(1.1); background: white; border-color: var(--primary); }

/* WIRTUALNA KLAWIATURA NA PRAWO */
.virtual-keyboard {
    background: white; border: 2px solid #cbd5e1; border-radius: 12px; padding: 15px 8px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); width: 100%; position: relative;
}

.btn-toggle-kbd {
    position: absolute; top: -15px; left: -15px; width: 36px; height: 36px; border-radius: 50%; background: white; border: 2px solid var(--primary); color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.2s; z-index: 10; padding: 0;
}
.btn-toggle-kbd:hover { transform: scale(1.1); background: var(--primary); color: white; }

.floating-pts { font-size: 1.5rem; font-weight: 900; pointer-events: none; animation: floatUpPenalty 1s ease-out forwards; z-index: 9999; text-shadow: 2px 2px 0 #fff;}
.floating-pts.down { animation: floatDownPenalty 1s ease-out forwards; }
@keyframes floatUpPenalty { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(1.5); } }
@keyframes floatDownPenalty { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(30px) scale(1.5); } }

/* ANIMACJE PUNKTACJI NA ŻYWO */
@keyframes scorePopUp { 0% { transform: scale(1); } 50% { transform: scale(1.4); color: #059669; } 100% { transform: scale(1); } }
@keyframes scorePopDown { 0% { transform: scale(1); } 50% { transform: scale(1.4); color: #dc2626; } 100% { transform: scale(1); } }
.score-pop-up { animation: scorePopUp 0.4s ease-out; display: inline-block; }
.score-pop-down { animation: scorePopDown 0.4s ease-out; display: inline-block; }

/* SKALOWANIE KLAWISZY */
.keyboard-row { display: flex; justify-content: center; gap: 4px; }
.key-btn { flex: 1; height: clamp(35px, 6vh, 45px); min-width: 0; padding: 0; border-radius: 6px; border: 1px solid #cbd5e1; background: white; font-weight: bold; font-size: clamp(0.9rem, 1.5vw, 1.2rem); color: var(--text-main); cursor: pointer; box-shadow: 0 3px 0 #94a3b8; display: flex; align-items: center; justify-content: center; transition: all 0.1s;}
.key-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #94a3b8; background: #e2e8f0; }
.action-key { background: #f1f5f9; font-size: 1rem; flex: 1.5; border-color: #94a3b8; box-shadow: 0 3px 0 #64748b;}
.action-key[data-key="CHECK"] { background: var(--primary); color: white; border-color: var(--primary-dark); box-shadow: 0 3px 0 var(--primary-dark);}
.action-key[data-key="CHECK"]:active { transform: translateY(3px); box-shadow: 0 0 0 var(--primary-dark); background: var(--primary-dark); }
.extra-letters { display: none; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    #game-wrapper { top: 0 !important; bottom: 0 !important; height: 100svh !important; position: fixed !important; }
    .card-controls-bar { padding: 8px; min-height: 45px; }
    .vol-slider { width: 50px; }
    .control-btn { width: 30px; height: 30px; }
    .btn-exit { left: 10px !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-left { padding: 15px; }
    #game-wrapper .menu-right { padding: 15px; border-left: none; border-top: 2px dashed #cbd5e1; border-radius: 0 0 10px 10px;}
    
    .game-inner { padding: 5px; }
    
    .side-controls-bar { padding: 6px 10px; border-radius: 10px; margin-bottom: 5px; max-height: 18px; justify-content: space-between;}
    .side-time-wrapper { padding: 5px 10px; border-radius: 10px; margin-top: 5px; }
    .side-time-wrapper > div:first-child { margin-bottom: 4px !important; } /* Zmniejszenie przerwy nad paskiem */
    .slim-time-bar { height: 4px; } /* Cieńszy pasek czasu */
    .stat-compact { font-size: 0.75rem; }
    .stat-compact span { font-size: 0.9rem; }
    
    .team-scoreboard { margin-bottom: 8px; gap: 5px; flex-direction: column;}
    .team-panel { padding: 5px; border-width: 2px; border-radius: 8px; gap: 10px; justify-content: flex-start;}
    .team-score { font-size: 1.5rem; min-width: 30px;}
    .team-name { font-size: 0.85rem; }
    
    /* Mobilne przyciski wyjścia (w pasku volume) */
    .desktop-exit { display: none !important; }
    .mobile-exit { display: inline-flex !important; padding: 5px 8px; font-size: 0.5rem; box-shadow: 0 2px 0 #fca5a5; margin-left: 5px;max-height: 10px;}
    .mobile-exit svg { width: 14px; height: 14px; }
    
    /* Zmiana kolejności: Siatka na górę, potem podpowiedź */
    .crossword-layout { flex-direction: column; gap: 5px; }
    .cw-left-col { flex: 1; display: flex; flex-direction: column; }
    .grid-wrapper { order: 1; min-height: 40vh; border-radius: 10px; margin-bottom: 5px;}
    
    /* NOWY UKŁAD PODPOWIEDZI NA MOBILE (Przyciski jeden pod drugim) */
    .clue-and-hint-wrapper { 
        order: 2; margin-top: 5px; margin-bottom: 5px; 
        display: grid !important; 
        grid-template-columns: 1fr auto; 
        grid-template-rows: 1fr 1fr; 
        gap: 5px; 
    }
    .active-clue-display { 
        grid-row: 1 / span 2; grid-column: 1; 
        font-size: 0.9rem; padding: 8px 8px 14px 8px; 
        border-width: 2px; border-radius: 10px; min-height: 100%; margin-bottom: 0px; 
    }
    .active-clue-display::after { font-size: 0.6rem; bottom: 2px; right: 5px; }
    
    /* Przyciski w formie kwadratowych ikon (ikony zamiast tekstów) */
    .btn-hint { 
        grid-column: 2; 
        font-size: 1.2rem; /* Większa ikona, skoro to tylko emoji */
        padding: 0; 
        min-width: 40px; /* Kompaktowy, kwadratowy kształt */
        width: 40px;
        height: 100%; /* Rozciągnięte na pełną wysokość dostępnego slotu */
        border-width: 2px; border-radius: 8px; 
        display: flex; align-items: center; justify-content: center;
    }
    #btn-translate-clue { grid-row: 1; }
    #btn-hint { grid-row: 2; }
    
    .grid-inner-wrapper { padding: 20px; }
    
    .cw-right-col { width: 100%; min-width: 100%; max-width: 100%; justify-content: flex-end; }
    .cw-right-col.expanded { width: 100%; max-width: 100%; }
    .btn-toggle-kbd { display: none; }
    
    .virtual-keyboard { padding: 6px; border-radius: 10px; gap: 4px; }
    .key-btn { height: 40px; min-width: 24px; font-size: 1rem; border-radius: 6px; box-shadow: 0 2px 0 #94a3b8; }
    .action-key { font-size: 0.8rem; }
    #game-wrapper { --cell-size: 25px; }
}
/* ================== WYKREŚLANKA INTERAKTYWNA ================== */
#wordsearch-layout { display: none; flex-direction: column; width: 100%; height: 100%; align-items: center; overflow: hidden; padding: 8px; box-sizing: border-box; }
.ws-game-container { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1400px; align-items: center; height: 100%; min-height: 0; }

/* Kompaktowy panel ze słowami na górze */
.ws-word-panel { width: 100%; background: white; padding: 8px 15px 12px 15px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 2px solid #cbd5e1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; position: relative;}
.ws-words-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; overflow-y: auto; max-height: 90px; }
.ws-word-item { padding: 4px 10px; background: #f1f5f9; border-radius: 8px; font-weight: 800; color: var(--text-muted); transition: all 0.2s; font-size: 0.9rem; text-align: center; border: 2px solid transparent; word-break: break-word; }
.ws-word-item.ws-found-A { text-decoration: line-through; background: #bfdbfe; color: #1d4ed8; border-color: #60a5fa; opacity: 0.8; }
.ws-word-item.ws-found-B { text-decoration: line-through; background: #fecaca; color: #b91c1c; border-color: #f87171; opacity: 0.8; }
.ws-word-item.ws-found-Solo { text-decoration: line-through; background: #d1fae5; color: #059669; border-color: #34d399; opacity: 0.8; }

/* Kontener na siatki - auto scroll w razie skrajnej konieczności */
.ws-grids-container { display: flex; flex-direction: row; gap: 15px; width: 100%; justify-content: center; flex-wrap: wrap; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }
.ws-grid-wrapper { display: flex; flex-direction: column; gap: 6px; align-items: center; flex: 1; min-width: 280px; max-width: 650px; }
.ws-grid-header { display: flex; justify-content: space-between; width: 100%; align-items: center; background: white; padding: 6px 12px; border-radius: 12px; border: 2px solid #cbd5e1; box-sizing: border-box; flex-shrink: 0;}
.ws-team-score { font-size: 1.3rem; font-weight: 900; }
.ws-team-name { font-size: 1rem; font-weight: bold; text-transform: uppercase; color: var(--text-main); word-break: break-word; }

.ws-btn-hint { background: #fffbeb; border: 2px solid #fde047; color: #d97706; border-radius: 8px; font-weight: bold; cursor: pointer; padding: 4px 10px; transition: 0.2s; box-shadow: 0 3px 0 #fde047; font-size: 0.85rem;}
.ws-btn-hint:active { transform: translateY(3px); box-shadow: none; }

.ws-grid-container { background: white; padding: 8px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 2px solid #cbd5e1; user-select: none; touch-action: none; width: 100%; box-sizing: border-box; display: flex; justify-content: center; overflow: hidden; align-items: center; flex: 1;}
.ws-grid { display: grid; gap: 3px; }

/* KLUCZ: Wysokość i szerokość komórek uzależniona nie tylko od vW, ale i vH ekranu, gwarantując dopasowanie bez paska przewijania! */
.ws-cell { width: clamp(18px, min(3.5vw, 4.5vh), 42px); height: clamp(18px, min(3.5vw, 4.5vh), 42px); display: flex; align-items: center; justify-content: center; font-size: clamp(0.9rem, min(1.8vw, 2.5vh), 1.5rem); font-weight: 800; background: #f8fafc; border-radius: 6px; cursor: pointer; text-transform: uppercase; color: var(--text-main); transition: background 0.1s; }

.ws-grid-A .ws-cell.ws-selected { background: #bae6fd; color: #0284c7; box-shadow: inset 0 0 0 2px #38bdf8; }
.ws-grid-A .ws-cell.ws-found { background: #bfdbfe; color: #1d4ed8; border: 1px solid #60a5fa;}
.ws-grid-A .ws-grid-header { border-color: #38bdf8; }
.ws-grid-A .ws-team-score { color: #0284c7; }

.ws-grid-B .ws-cell.ws-selected { background: #fecdd3; color: #e11d48; box-shadow: inset 0 0 0 2px #fb7185; }
.ws-grid-B .ws-cell.ws-found { background: #fecaca; color: #b91c1c; border: 1px solid #f87171;}
.ws-grid-B .ws-grid-header { border-color: #fb7185; }
.ws-grid-B .ws-team-score { color: #e11d48; }

.ws-grid-Solo .ws-cell.ws-selected { background: #bae6fd; color: #0284c7; box-shadow: inset 0 0 0 2px #38bdf8; }
.ws-grid-Solo .ws-cell.ws-found { background: #a7f3d0; color: #047857; border: 1px solid #34d399;}
.ws-grid-Solo .ws-grid-header { border-color: #10b981; }
.ws-grid-Solo .ws-team-score { color: #10b981; }

.ws-cell.ws-hinted { box-shadow: inset 0 0 0 3px #fde047; background: #fef9c3; }

@media(max-width: 900px) {
    .ws-word-panel { padding: 8px; max-height: 140px; }
    .ws-word-item { padding: 4px 8px; font-size: 0.85rem; }
    .ws-btn-hint { font-size: 0.8rem; padding: 4px 8px; }
    .ws-grid-wrapper { min-width: 100%; }
}
/* ================== DRUKOWANIE KART PRACY (PRINT) ================== */
#print-container { display: none; }

@media print {
    /* 1. Ukrywamy zbędny interfejs gry, zostawiając strukturę DOM w spokoju */
    #game-wrapper > *:not(#print-container) { 
        display: none !important; 
    }

    /* 2. Zdejmujemy WSZYSTKIE blokady ekranowe narzucone przez grę i motyw (pozwala na druk wielostronicowy!) */
    html, body, #game-wrapper, #print-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 3. Wymuszamy pokazanie kontenera wydruku */
    #print-container {
        width: 100% !important;
        visibility: visible !important;
    }

    /* Dodatkowe zabezpieczenie ukrywające pływające nakładki menu */
    .overlay-screen, .floating-pts { 
        display: none !important; 
    }

/* Ograniczamy marginesy samej kartki A4, zyskując cenne centymetry */
    @page { margin: 1cm; }

    /* 4. Formatowanie zawartości */
    #print-container * { color: black !important; visibility: visible !important;}
    
    /* Przywracamy nagłówek i formatujemy go by zmieścił długie tytuły obok miejsca na imię */
    .print-header { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-bottom: 15px !important; border-bottom: 2px solid black !important; padding-bottom: 8px !important; }
    .print-header-left { display: flex !important; flex-direction: column !important; gap: 4px !important; max-width: 65% !important; }
    .print-header-right { font-size: 13px !important; white-space: nowrap !important; margin-bottom: 4px !important; }

/* KRZYŻÓWKA */
    /* Siatka bez zarysu zewnętrznego (komórki narysują go same), dodajemy 1px paddingu by zrekompensować przesunięcie */
    .print-cw-grid { display: grid !important; gap: 0 !important; margin: 0 auto 15px auto !important; width: fit-content !important; page-break-inside: avoid !important; border: none !important; padding: 1px 0 0 1px !important; }
    .print-cw-cell { position: relative !important; box-sizing: border-box !important; }
    
    /* Używamy negatywnych marginesów (-1px), aby idealnie nałożyć krawędzie na siebie i uniknąć podwójnych linii */
    .print-cw-cell:not(.empty) { 
        border: 1px solid black !important; 
        background: white !important; 
        margin-top: -1px !important; 
        margin-left: -1px !important;
    }
    .print-cw-cell.empty { background: transparent !important; border: none !important; }
    
    /* Lekko przesuwamy numerek, aby po przesunięciu marginesów nie nakładał się na obramowanie */
    .print-cw-num { position: absolute !important; top: 2px !important; left: 3px !important; font-size: 9px !important; font-weight: bold !important; display: block !important; }

    /* Separatory wyrazów (spacje) - podnosimy z-index, by nie zniknęły pod zachodzącymi na nie sąsiednimi komórkami */
    .print-cw-cell.space-right { border-right: 3px dashed #64748b !important; z-index: 2 !important; }
    .print-cw-cell.space-bottom { border-bottom: 3px dashed #64748b !important; z-index: 2 !important; }
/* Ekstremalnie kompaktowe hasła: mniejszy font, 3 kolumny, ściśnięte marginesy */
    .print-clues { margin-top: 10px !important; font-size: 11px !important; page-break-inside: avoid !important; }
    .print-clues h3 { font-size: 13px !important; text-align: left !important; margin: 0 0 8px 0 !important; border-bottom: 1px solid black !important; padding-bottom: 3px !important; }
    .print-clues ol { margin: 0 !important; padding-left: 15px !important; column-count: 3 !important; column-gap: 20px !important; display: block !important; }
    .print-clues li { margin-bottom: 4px !important; line-height: 1.15 !important; page-break-inside: avoid !important; display: list-item !important; }

    /* WYKREŚLANKA */
    /* Przywracamy siatkę i stosujemy ten sam trik z negatywnymi marginesami co w krzyżówce */
    .print-ws-grid { display: grid !important; gap: 0 !important; margin: 0 auto 30px auto !important; width: fit-content !important; border: none !important; padding: 1px 0 0 1px !important; page-break-inside: avoid !important;}
    
    .print-ws-cell { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        background: white !important; 
        font-family: monospace !important; 
        font-size: 16px !important; 
        font-weight: bold !important; 
        box-sizing: border-box !important; 
        border: 1px solid black !important;
        margin-top: -1px !important; 
        margin-left: -1px !important;
    }
    
    /* Kompaktowa lista słów na dole wykreślanki */
    .print-ws-words { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; max-width: 800px !important; margin: 0 auto !important; page-break-inside: avoid !important;}
    .print-ws-word { display: block !important; padding: 4px 12px !important; border: 1px solid #000 !important; border-radius: 15px !important; font-size: 13px !important; font-weight: bold !important; }
}