body {
    font-family: 'Roboto', sans-serif;
    background-color: #0a192f;
    color: #ccd6f6;
}

.font-mono-display {
    font-family: 'Cutive Mono', monospace;
}

/* --- Stylistyka Gry --- */

.nes-container {
    border: 4px solid #64ffda;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

.nes-btn {
    background-color: #0a192f;
    border: 2px solid #64ffda;
    color: #64ffda;
    transition: all 0.3s ease;
    border-radius: 0.5rem; /* rounded-lg */
}

.nes-btn:hover, .nes-btn.active {
    background-color: rgba(100, 255, 218, 0.1);
    box-shadow: 0 0 10px #64ffda;
}

.nes-input {
    background-color: #1d2d44;
    border: 2px solid #8892b0;
    color: #ccd6f6;
}

.nes-input:focus {
    outline: none;
    border-color: #64ffda;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

.text-glow { text-shadow: 0 0 8px #64ffda; }
.feedback-correct { color: #64ffda; animation: fadeIn 0.5s; }
.feedback-incorrect { color: #ff79c6; animation: shake 0.5s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }

.avatar-animated { animation: float 3s ease-in-out infinite; }

.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(10, 25, 47, 0.8); backdrop-filter: blur(5px); animation: fadeIn 0.3s; }
.modal-content { background-color: #0a192f; margin: 10% auto; padding: 2rem; border: 2px solid #64ffda; width: 90%; max-width: 500px; border-radius: 8px; text-align: center; }
.modal-close { color: #8892b0; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transform: translateY(-1rem); }
.modal-close:hover, .modal-close:focus { color: #64ffda; }

.tab-content { display: none; }
.tab-content.active { display: grid; }

details > summary { cursor: pointer; padding: 1rem; background-color: #1d2d44; border: 1px solid #8892b0; border-radius: 4px; margin-bottom: 0.5rem; transition: background-color 0.3s; }
details > summary:hover { background-color: #2a405e; }
details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.explanation-content { padding: 1rem; border: 1px solid #8892b0; border-top: none; border-radius: 0 0 4px 4px; background-color: #112240; }
.explanation-content code { background-color: #0a192f; color: #64ffda; padding: 2px 6px; border-radius: 4px; }
.challenge-text { color: #ff79c6; text-shadow: 0 0 8px #ff79c6; }

#intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #0a192f; z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease-out; }
#game-container { opacity: 0; transition: opacity 0.5s ease-in; }
#skip-typing-btn { position: absolute; bottom: 10px; right: 10px; background: none; border: none; color: #8892b0; cursor: pointer; font-size: 24px; display: none; }

/* --- NOWE STYLE (HEADER, FOOTER, RODO) --- */

header {
    background-color: #0a192f99; /* ciemne tło z przezroczystością */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1d2d44; /* ciemna ramka */
}

footer {
    color: #8892b0; /* text-slate-400 */
    border-top: 1px solid #1d2d44;
}

.footer-link {
    color: #8892b0;
    transition: color 0.3s;
}
.footer-link:hover {
    color: #64ffda;
}
.footer-separator {
    color: #3e567e;
}

#rodo-banner-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(17, 34, 64, 0.9);
    backdrop-filter: blur(5px);
    border-top: 1px solid #3e567e;
    padding: 1rem;
    color: #ccd6f6;
}

.rodo-link {
    color: #64ffda;
    text-decoration: underline;
}
.rodo-link:hover {
    color: #a7f3d0;
}

.rodo-btn-accept {
    background-color: #0a192f;
    border: 2px solid #64ffda;
    color: #64ffda;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}
.rodo-btn-accept:hover {
    background-color: rgba(100, 255, 218, 0.1);
    box-shadow: 0 0 10px #64ffda;
}

.rodo-btn-reject {
    background-color: #1d2d44;
    border: 2px solid #8892b0;
    color: #8892b0;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}
.rodo-btn-reject:hover {
    background-color: #2a405e;
    border-color: #ccd6f6;
    color: #ccd6f6;
}

.rodo-checkbox {
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    border-color: #8892b0;
    background-color: #1d2d44;
    color: #64ffda;
}
.rodo-checkbox:checked {
    background-color: #64ffda;
}

/* --- Style dla podstron (regulamin, polityka) --- */
.legal-page-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #112240;
    border: 1px solid #3e567e;
    border-radius: 8px;
}
.legal-page-container h1 {
    color: #64ffda;
    font-size: 2.25rem; /* text-4xl */
    font-weight: bold;
    margin-bottom: 2rem;
}
.legal-page-container h2 {
    color: #ccd6f6;
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #3e567e;
    padding-bottom: 0.5rem;
}
.legal-page-container p, .legal-page-container ul {
    color: #a8b2d1;
    line-height: 1.75;
    margin-bottom: 1rem;
}
.legal-page-container ul {
    list-style-position: inside;
    padding-left: 1em;
    list-style-type: disc;
}
.legal-page-container a {
    color: #64ffda;
    text-decoration: underline;
}
.legal-page-container strong {
    color: #ccd6f6;
    font-weight: bold;
}