/* ΒΑΣΙΚΑ ΠΛΑΙΣΙΑ (Γυάλινο εφέ) */
.glass-panel {
    background-color: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.glass-panel-modal {
    background-color: rgb(30, 41, 59);
    border: 4px solid #facc15;
    border-radius: 1.5rem;
    box-shadow: 0 0 50px rgba(250, 204, 21, 0.4);
    width: 100%;
    max-width: 42rem;
    padding: 2.5rem;
}

/* ΚΟΥΜΠΙΑ ΠΟΝΤΩΝ ΣΤΟ ΤΑΜΠΛΟ */
.btn-points {
    background-color: rgba(51, 65, 85, 0.8);
    border: 2px solid #34d399;
    color: white;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-points:hover {
    background-color: #facc15;
    color: black;
    transform: scale(1.1);
}
.btn-points.btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    background-color: #1e293b;
    border-color: #475569;
}

/* ΚΙΤΡΙΝΟ ΚΟΥΜΠΙ ΥΠΟΒΟΛΗΣ / START */
.btn-yellow {
    background-color: #facc15;
    color: black;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-yellow:hover {
    background-color: #fde047;
    transform: scale(1.02);
}

/* ΧΡΩΜΑΤΙΣΤΑ ΚΟΥΜΠΙΑ (Πολλαπλής, Higher/Lower, Σωστό/Λάθος) */
.btn-blue { background-color: #3b82f6; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-blue:hover { background-color: #60a5fa; transform: translateY(-3px); }

.btn-red { background-color: #e11d48; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(225, 29, 72, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-red:hover { background-color: #fb7185; transform: translateY(-3px); }

.btn-green { background-color: #10b981; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-green:hover { background-color: #34d399; transform: translateY(-3px); }

/* ΠΕΔΙΑ ΚΕΙΜΕΝΟΥ (Inputs) */
.input-field {
    background-color: #334155;
    border: 2px solid #10b981;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 0.75rem;
    padding: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}
.input-field:focus {
    border-color: #facc15;
}

/* ΕΙΔΙΚΑ STYLES ΓΙΑ ΤΙΣ ΣΕΛΙΔΕΣ */
.page-section {
    display: none; /* Κρύβει τις σελίδες από προεπιλογή */
}
.page-section.active {
    display: flex; /* Εμφανίζει τη σελίδα που έχει την κλάση active */
}
/* BACKGROUND ΜΠΑΛΑ */
.bg-ball {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rem;
    opacity: 0.5; /* ΕΔΩ ΑΛΛΑΖΕΙΣ ΤΗΝ ΕΝΤΑΣΗ (π.χ. 0.4 ή 0.5) */
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

/* Για μεγάλες οθόνες (Υπολογιστές/Τηλεοράσεις) μεγαλώνει και η μπάλα */
@media (min-width: 768px) {
    .bg-ball {
        font-size: 50rem;
    }
}