/* style.css - FULL VERSION with Enhanced Responsiveness */

/* --- Base & Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; font-size: 100%; /* Use percentage for better scaling */ }
body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    line-height: 1.6; /* Adjusted for readability */
    direction: rtl;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(10px, 3vw, 20px) clamp(5px, 2vw, 15px); /* Responsive padding */
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
    transition: background-color 0.5s ease, background-image 0.5s ease;
}
.container {
    width: 100%;
    max-width: 900px; /* Slightly increased max-width */
    background-color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    border-radius: 16px; /* More rounded */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Header & Footer --- */
.main-header { background: linear-gradient(135deg, #007bff, #0056b3); color: #ffffff; padding: clamp(20px, 4vw, 30px) clamp(15px, 3vw, 25px); text-align: center; }
.main-header h1 { margin-bottom: 0.3em; font-size: clamp(1.8em, 5vw, 2.2em); font-weight: 700; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }
.main-header .subtitle { font-size: clamp(0.9em, 2.5vw, 1.1em); color: #e9ecef; font-weight: 400; }
.main-footer { background-color: #e9ecef; color: #6c757d; padding: clamp(10px, 2vw, 15px); text-align: center; font-size: clamp(0.8em, 2vw, 0.9em); margin-top: auto; border-top: 1px solid #dee2e6; }

/* --- Cards & Sections (General) --- */
section { padding: clamp(25px, 5vw, 40px) clamp(20px, 4vw, 35px); border-bottom: 1px solid #f1f3f5; }
section:last-of-type { border-bottom: none; }
.card { background-color: #ffffff; text-align: center; }
.card h2 { color: #007bff; margin-bottom: 1em; font-weight: 700; text-align: center; font-size: clamp(1.5em, 4vw, 1.8em); padding-bottom: 0.5em; }
.welcome-message { font-size: clamp(1em, 3vw, 1.2em); color: #495057; margin-bottom: 1em; }
.info-text { color: #6c757d; font-size: clamp(0.9em, 2.5vw, 1em); margin-bottom: 1.2em; line-height: 1.7; }
.username-highlight { color: #0056b3; font-weight: 700; }

/* --- Forms (General) --- */
form { max-width: 450px; margin: 0 auto; text-align: right; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #495057; font-size: clamp(0.9em, 2.5vw, 1em); }
.form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ced4da; border-radius: 8px; font-size: clamp(0.9em, 2.5vw, 1em); transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: 'Cairo', sans-serif; background-color: #f8f9fa; }
.form-group input[type="text"]:focus, .form-group input[type="password"]:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); background-color: #fff; }

/* --- Buttons (General) --- */
.btn { display: inline-block; padding: clamp(0.7em, 2vw, 0.8em) clamp(1.5em, 4vw, 2em); border: none; border-radius: 8px; cursor: pointer; font-size: clamp(0.9em, 2.5vw, 1.05em); font-weight: 600; text-align: center; text-decoration: none; transition: all 0.2s ease; margin: 0.5em 0.25em; font-family: 'Cairo', sans-serif; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); user-select: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
.btn:active { transform: translateY(0px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.btn-block { display: block; width: 100%; }
.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #c82333; }
.btn-outline { background-color: transparent; color: #007bff; border: 2px solid #007bff; box-shadow: none; }
.btn-outline:hover { background-color: #007bff; color: white; }
.btn-large { padding: clamp(0.8em, 2.5vw, 1em) clamp(2em, 5vw, 3em); font-size: clamp(1em, 3vw, 1.15em); }
.btn-back { margin-top: 1em; }
.btn-delete-student { background-color: #ff6b6b; color: white; font-size: 0.8em; padding: 0.3em 0.6em; border-radius: 4px; margin-right: 0.5em; box-shadow: none; }
.btn-delete-student:hover { background-color: #ee5253; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* --- Admin Dashboard --- */
.admin-section { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid #f1f3f5; text-align: right; }
.admin-section:first-of-type { margin-top: 1em; padding-top: 1em; border-top: none; }
.admin-section h3 { color: #495057; margin-bottom: 1em; font-size: clamp(1.2em, 3.5vw, 1.4em); font-weight: 600; }
.styled-list { list-style: none; padding: 0; max-height: 250px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 8px; margin-top: 0.5em; background-color: #fff; }
.styled-list li { padding: 0.8em 1.2em; border-bottom: 1px solid #f1f3f5; color: #495057; font-size: clamp(0.9em, 2.5vw, 1em); transition: background-color 0.2s ease; display: flex; justify-content: space-between; align-items: center; }
.styled-list li:last-child { border-bottom: none; }
.styled-list li:hover { background-color: #e9ecef; }
.student-details { flex-grow: 1; }

/* --- Student Dashboard --- */
.card-highlight { background-color: #e7f3ff; padding: clamp(15px, 3vw, 20px); border-radius: 8px; margin: 1.5em auto; max-width: 350px; border: 1px solid #cce5ff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); text-align: center; }
.card-highlight p { margin: 0.3em 0; color: #343a40; font-size: clamp(1em, 2.8vw, 1.1em); }
.card-highlight strong { font-size: clamp(1.2em, 3.5vw, 1.4em); color: #0056b3; display: block; margin-top: 0.3em; font-weight: 700; }

/* --- Game Area --- */
#game-area { text-align: center; background-color: #ffffff; padding-bottom: 1.5em; display: flex; flex-direction: column; }
.game-header { margin-bottom: 1.2em; padding: clamp(15px, 3vw, 20px) clamp(10px, 2vw, 15px); background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; position: relative; }
.game-title { margin-bottom: 1em; font-size: clamp(1.3em, 4vw, 1.5em); color: #343a40; font-weight: 700; }
.game-stats { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; margin-bottom: 1.2em; font-size: clamp(1em, 2.8vw, 1.1em); color: #495057; padding: 1em 0; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
.stat-item { display: flex; flex-direction: column; align-items: center; margin: 0.3em 0.6em; }
.stat-item span { font-size: clamp(0.8em, 2.2vw, 0.9em); color: #6c757d; margin-bottom: 0.2em; }
.stat-item strong { color: #007bff; font-size: clamp(1.1em, 3vw, 1.3em); font-weight: 700; }
.word-info { margin-bottom: 1.2em; }
.word-info p { margin-bottom: 0.6em; font-size: clamp(1em, 2.8vw, 1.1em); color: #495057; }
.target-word-display-container { display: inline-block; padding: 0.3em 0; line-height: 1.5; }
.target-word-letter { display: inline-block; padding: clamp(3px, 1vw, 5px) clamp(5px, 1.5vw, 8px); margin: 0 0.1em; font-size: clamp(1.2em, 3.5vw, 1.5em); color: #6c757d; letter-spacing: 1px; font-weight: 600; background-color: #e9ecef; border-radius: 6px; border: 1px solid #dee2e6; font-family: 'Cairo', monospace; transition: all 0.3s ease; min-width: clamp(25px, 6vw, 30px); text-align: center; }
.target-word-letter.collected { background-color: #28a745; color: white; border-color: #1e7e34; transform: scale(1.05); }
.target-word-letter.current-target { box-shadow: 0 0 8px 3px rgba(0, 123, 255, 0.5); border-color: #007bff; }
.required-letter-display { font-size: clamp(1.8em, 5vw, 2.2em); color: #dc3545; font-weight: 700; display: inline-block; padding: 0.1em 0.5em; background-color: #f8d7da; border-radius: 6px; border: 1px solid #f5c6cb; margin: 0 0.3em; min-width: clamp(40px, 10vw, 50px); line-height: 1.4; }
.canvas-container { max-width: 480px; width: 95%; margin: 0 auto 1.2em auto; padding: clamp(5px, 1.5vw, 10px); background-color: #e9ecef; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
#gameCanvas { border: none; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 6px; transition: background-color 0.3s ease; }
.game-feedback { min-height: 2em; font-weight: 600; font-size: clamp(1em, 2.8vw, 1.1em); margin-bottom: 1em; padding: 0.6em; text-align: right; }
.game-feedback ul { list-style: disc; list-style-position: inside; padding-right: 1.2em; text-align: right; margin-top: 0.6em; font-size: clamp(0.8em, 2.2vw, 0.9em); }
.game-feedback ul li { margin-bottom: 0.3em; color: #5a6268; }
.btn-pause { position: absolute; top: clamp(10px, 2vw, 15px); left: clamp(10px, 2vw, 15px); padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2vw, 12px); font-size: clamp(0.8em, 2vw, 0.9em); z-index: 10; background-color: #ffc107; color: #343a40; border: 1px solid #ffc107; display: flex; align-items: center; justify-content: center; }
.btn-pause svg { margin-left: 0.3em; width: 1em; height: 1em; fill: currentColor; }
.btn-pause:hover { background-color: #e0a800; border-color: #d39e00; }
.btn-pause.paused { background-color: #28a745; color: white; border-color: #28a745; }
.btn-pause.paused:hover { background-color: #218838; border-color: #1e7e34; }
.pause-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(52, 58, 64, 0.7); display: flex; justify-content: center; align-items: center; z-index: 50; border-radius: 6px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pause-overlay p { color: #ffffff; font-size: clamp(1.5em, 4vw, 2em); font-weight: bold; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }

/* --- Messages (General) --- */
.message, .error-message { padding: 0.8em 1.2em; margin: 1.2em auto 0 auto; max-width: 90%; border-radius: 8px; font-weight: 600; text-align: center; border-width: 1px; border-style: solid; display: block; font-size: clamp(0.9em, 2.5vw, 1em); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.message { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
#admin-message.message { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
#admin-message.error-message { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.error-message { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* --- Touch Controls --- */
.touch-controls-container { display: none; width: 100%; max-width: 220px; margin: 1.5em auto 0.6em auto; user-select: none; opacity: 0.9; }
.touch-row { display: flex; justify-content: center; align-items: center; margin-bottom: 0.6em; }
.touch-spacer { width: clamp(60px, 15vw, 76px); }
.touch-button { background-color: rgba(108, 117, 125, 0.9); color: #ffffff; border: none; border-radius: 50%; width: clamp(50px, 12vw, 60px); height: clamp(50px, 12vw, 60px); font-size: clamp(1.5em, 4vw, 1.8em); font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; margin: 0 0.5em; transition: all 0.1s ease; padding: 0; user-select: none; box-shadow: 0 3px 6px rgba(0,0,0,0.2); }
.touch-button svg { width: clamp(24px, 6vw, 30px); height: clamp(24px, 6vw, 30px); fill: currentColor; }
.touch-button:active { background-color: rgba(80, 87, 93, 0.95); transform: scale(0.93); }


/* --- Body style when login is active for background --- */
body.login-active-bg {
    background: linear-gradient(135deg, #480560, #6a1b9a, #8e24aa, #ab47bc, #ba68c8, #ce93d8);
    background-size: 300% 300%;
    animation: loginBackgroundAnimation 25s ease infinite alternate;
    align-items: center;
    padding: 0; /* Remove body padding for full BG */
}
@keyframes loginBackgroundAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body.login-active-bg .container {
    padding: 0;
    max-width: 100%; /* Allow it to be full width */
    min-height: 100vh; /* Ensure it takes full height */
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    justify-content: center; /* Center the login form container */
    align-items: center;
}
body.login-active-bg .main-header,
body.login-active-bg #admin-dashboard,
body.login-active-bg #student-dashboard,
body.login-active-bg #game-area,
body.login-active-bg .main-footer {
    display: none !important;
}

/* --- Modern Login Section Styling --- */
#login-section.modern-login {
    padding: clamp(15px, 5vw, 20px); /* Add some padding around the card on smaller screens */
    border: none;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    max-width: 450px; /* Max width of the card itself */
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto; /* Center the section */
}
.login-form-container {
    background-color: #ffffff;
    padding: clamp(30px, 6vw, 45px) clamp(25px, 5vw, 40px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    width: 100%;
    text-align: center;
}

.login-logo-img {
    display: block;
    width: clamp(90px, 20vw, 120px);
    max-width: 80%;
    height: auto;
    margin: 0 auto clamp(10px, 3vw, 15px) auto;
    object-fit: contain;
}

.login-tagline {
    font-size: clamp(1em, 3vw, 1.15em);
    color: #5a4f6d;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: clamp(15px, 3.5vw, 20px);
    line-height: 1.5;
}

#login-section.modern-login h2 {
    color: #3a2e4f;
    font-size: clamp(1.8em, 5vw, 2.2em);
    font-weight: 700;
    margin-bottom: clamp(8px, 2vw, 10px);
}
.modern-info-text {
    font-size: clamp(0.9em, 2.5vw, 1em);
    color: #6c5f7d;
    margin-bottom: clamp(25px, 5vw, 30px);
    line-height: 1.6;
}
#login-section.modern-login .form-group { margin-bottom: clamp(18px, 4vw, 22px); text-align: right; }
#login-section.modern-login .form-group label { display: none; }
.modern-input-group { position: relative; }
.modern-input-group .input-icon { position: absolute; top: 50%; right: clamp(15px, 3.5vw, 20px); transform: translateY(-50%); color: #b39ddb; pointer-events: none; }
#login-section.modern-login .form-group input[type="text"],
#login-section.modern-login .form-group input[type="password"] {
    background-color: #fdfaff;
    border: 1px solid #e1d4f0;
    border-radius: 30px;
    padding: clamp(12px, 3vw, 15px) clamp(45px, 10vw, 55px) clamp(12px, 3vw, 15px) clamp(20px, 4vw, 25px);
    font-size: clamp(0.9em, 2.5vw, 1em);
    color: #4a3f61;
    box-shadow: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
#login-section.modern-login .form-group input[type="text"]::placeholder,
#login-section.modern-login .form-group input[type="password"]::placeholder { color: #a998c7; font-weight: 400; }
#login-section.modern-login .form-group input[type="text"]:focus,
#login-section.modern-login .form-group input[type="password"]:focus {
    border-color: #8e44ad;
    background-color: #fff;
    box-shadow: 0 0 0 3.5px rgba(142, 68, 173, 0.2);
}
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(20px, 4.5vw, 25px); font-size: clamp(0.85em, 2.2vw, 0.9em); color: #5f5178; }
.remember-me { display: flex; align-items: center; }
.remember-me input[type="checkbox"] { margin-left: 0.5em; width: clamp(15px, 3vw, 17px); height: clamp(15px, 3vw, 17px); accent-color: #8e44ad; cursor: pointer; }
.remember-me label { font-weight: 500; color: #5f5178; cursor: pointer; }
.forgot-password-link { color: #8e44ad; text-decoration: none; font-weight: 600; }
.forgot-password-link:hover { text-decoration: underline; }
.modern-login-btn {
    background: linear-gradient(100deg, #8e44ad, #c33764, #dd2476);
    color: white;
    font-size: clamp(1em, 2.8vw, 1.1em);
    font-weight: 600;
    padding: clamp(12px, 3vw, 15px) clamp(25px, 5vw, 30px);
    border-radius: 30px;
    border: none;
    box-shadow: 0 5px 20px rgba(150, 70, 180, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
    background-size: 200% auto;
}
.modern-login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(150, 70, 180, 0.4);
    background-position: right center;
}
.modern-login-btn:active { transform: translateY(0px); box-shadow: 0 3px 15px rgba(150, 70, 180, 0.25); }
#login-section.modern-login .error-message { background-color: #ffeaef; color: #d81b60; border: 1px solid #f8bbd0; margin-top: clamp(15px, 3vw, 20px); padding: clamp(10px, 2.5vw, 13px); border-radius: 10px; }
.create-account-prompt { margin-top: clamp(25px, 5vw, 30px); font-size: clamp(0.9em, 2.5vw, 0.95em); color: #5f5178; }
.create-account-prompt a { color: #8e44ad; font-weight: 700; text-decoration: none; }
.create-account-prompt a:hover { text-decoration: underline; }


/* --- Responsiveness Media Queries (More specific overrides if needed) --- */
@media (max-width: 768px) {
    /* body.login-active-bg styles are generally good, container adjustments too */
    #login-section.modern-login {
        padding: 20px 15px; /* Ensure padding is applied for the section itself on smaller screens */
    }
    .login-form-container {
        padding: 30px 25px; /* Padding inside the white card */
    }
     .touch-controls-container { display: block; }
}
@media (max-width: 480px) {
    .form-options { flex-direction: column; align-items: flex-start; gap: 10px; }
}