:root {
    --bg-color: #0b2e13; 
    --board-bg: #144d29; 
    --orange-normal: #f39c12;
    --orange-active: #e74c3c;
    --gray-answered: #7f8c8d;
    --wrong-red: #c0392b;
    --correct-green: #2ecc71;
    --card-bg: #f5deb3;
}
body, html { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: white; height: 100vh; overflow: hidden; }

/* LOGIN SCREEN */
#login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #0b2e13, #144d29); }
.login-box { background: white; padding: 40px; border-radius: 10px; text-align: center; color: black; box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 350px; max-width: 90%; }
.login-box input { padding: 10px; width: 100%; margin: 10px 0; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
.login-box button { padding: 10px 30px; background-color: var(--orange-normal); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; font-weight: bold; transition: 0.2s;}
.login-box button:hover { background-color: var(--orange-active); }

.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: white !important; color: #333 !important; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; border: 1px solid #ccc !important; width: 100%; box-sizing: border-box; margin-top: 10px; }
.google-btn:hover { background: #f1f1f1 !important; }
.google-btn img { width: 24px; height: 24px; }

/* HEADER */
#exam-screen, #selection-screen { display: none; flex-direction: column; height: 100vh; }
.header { display: flex; justify-content: space-between; align-items: center; padding: 5px 20px; background-color: #08210d; border-bottom: 2px solid #000; position: relative; z-index: 10;}
.header-left { display: flex; align-items: center; gap: 20px;}
.logo { height: 60px; width: auto; object-fit: contain; }

.title-container { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; width: max-content;}
.title-container h2 { margin: 0; font-size: 20px; color: white; }
.timer-display { font-size: 24px; font-weight: bold; color: #f1c40f; margin-top: 5px; display: flex; justify-content: center; align-items: center; gap: 10px; }

.header-right { display: flex; align-items: center;}
.exam-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0b2e13; padding: 5px 10px; border: 1px dashed var(--orange-normal); border-radius: 5px; }
.exam-controls-title { font-weight: bold; color: #f1c40f; font-size: 16px; margin-bottom: 5px; text-transform: uppercase;}
.small-btn { padding: 6px 10px; font-size: 12px; background: #d35400; color: white; border: none; border-radius: 3px; cursor: pointer; font-weight: bold; transition: 0.2s;}
.small-btn:hover { background: #e67e22; }

.user-info { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #0b2e13; padding: 8px 15px; border: 1px dashed white; border-radius: 5px; min-width: 180px;}
#displayStudentName, #selectScreenName { font-size: 16px; font-weight: 900; color: #f1c40f; margin-bottom: 5px; text-align: center; text-transform: uppercase;}
.user-info .student-id { font-size: 14px; margin-bottom: 8px; text-align: center;}
.submit-btn { background-color: #2980b9; color: white; padding: 5px 20px; border: none; border-radius: 3px; cursor: pointer; font-weight: bold; transition: 0.2s; width: 100%;}
.submit-btn:hover { background-color: #3498db; }

/* SELECTION GRID */
.exam-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; width: 100%; max-width: 800px; margin-top: 20px; }
.exam-item { background: #2c3e50; border: 2px solid #34495e; border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; color: white; font-weight: bold; transition: 0.2s; position: relative;}
.exam-item:hover { background: var(--orange-normal); transform: scale(1.05); }
.exam-item.completed { background: #27ae60; border-color: #2ecc71; }
.exam-item.completed::after { content: '✔️'; position: absolute; top: -10px; right: -10px; background: white; border-radius: 50%; padding: 2px; font-size: 14px; color: green; box-shadow: 0 2px 4px rgba(0,0,0,0.5);}
.locked { background: #7f8c8d !important; border-color: #95a5a6 !important; color: #ccc !important; cursor: not-allowed; }
.locked:hover { transform: none !important; }

/* MAIN CONTENT & WOODEN BOARD */
.main-container { flex-grow: 1; padding: 20px; display: flex; flex-direction: column; align-items: center; overflow-y: auto;}
.wooden-board { width: 90%; max-width: 1000px; min-height: 100%; background-color: var(--board-bg); border: 15px solid #8b5a2b; border-radius: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; position: relative; }

/* NAVIGATION SLIDER */
.nav-bar { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; }
.nav-arrow { padding: 8px 15px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.5); background-color: #d35400;}
#nav-window { width: 445px; overflow: hidden; }
#nav-buttons-container { display: flex; gap: 5px; transition: transform 0.4s ease-in-out; }
.nav-btn { width: 40px; height: 35px; flex-shrink: 0; padding: 0; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.5); background-color: var(--orange-normal); transition: 0.2s;}
.nav-btn.active { background-color: var(--orange-active); transform: scale(1.1); z-index: 1; }
.nav-btn.answered { background-color: var(--gray-answered); }
.nav-btn.wrong { background-color: var(--wrong-red); }
.nav-btn.correct { background-color: var(--correct-green); }

/* QUESTION AREA */
.question-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.media-container img { max-height: 150px; margin-bottom: 10px; border-radius: 8px;}
.custom-audio-btn { width: 60px; height: 60px; font-size: 30px; background-color: #2980b9; color: white; border: 2px solid #fff; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.4); margin-bottom: 15px; transition: 0.2s;}
.custom-audio-btn:hover { background-color: #3498db; transform: scale(1.05);}

/* QUESTION TYPES */
.order-slots { display: flex; gap: 10px; min-height: 120px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center;}
.slot { width: 100px; height: 140px; border: 2px dashed #aaa; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #aaa; cursor: pointer; }
.words-pool { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.word-card { width: 100px; height: 140px; background-color: var(--card-bg); color: black; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-top: 10px solid #d2b48c; transition: transform 0.1s;}
.word-card:active { transform: scale(0.95); }

.fill-text { font-size: 28px; line-height: 2; font-family: monospace; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.char-input { width: 30px; height: 40px; font-size: 24px; text-align: center; border: none; border-bottom: 3px solid white; background: transparent; color: white; margin: 0 2px; text-transform: lowercase; font-family: monospace;}
.char-input:focus { outline: none; border-bottom-color: var(--orange-normal); background: rgba(255,255,255,0.1); }
.char-input[readonly] { cursor: default; }
.space-char { display: inline-block; width: 15px; }

.options-container { display: flex; flex-direction: column; gap: 15px; width: 60%; margin-top: 20px;}
.option-btn { padding: 15px; background-color: var(--card-bg); color: black; border: 2px solid transparent; border-radius: 8px; font-size: 18px; cursor: pointer; font-weight: bold; text-align: left; transition: 0.2s;}
.option-btn.selected { background-color: var(--orange-normal); color: white; }
.option-btn.correct-ans { background-color: var(--correct-green); color: white; border-color: #27ae60; }
.option-btn.wrong-ans { background-color: var(--wrong-red); color: white; border-color: #922b21; }

.board-footer { display: flex; justify-content: center; margin-top: 20px; }
.answer-btn { padding: 12px 40px; background: linear-gradient(to bottom, #f1c40f, #f39c12); color: white; font-size: 20px; font-weight: bold; border: 2px solid #e67e22; border-radius: 8px; cursor: pointer; text-shadow: 1px 1px 2px #000; box-shadow: 0 4px 6px rgba(0,0,0,0.4); transition: 0.2s; }
.answer-btn:hover { background: linear-gradient(to bottom, #f39c12, #e67e22); transform: scale(1.05);}
.correct-text-display { color: var(--correct-green); font-size: 22px; font-weight: bold; margin-top: 20px; background: rgba(0,0,0,0.4); padding: 10px 20px; border-radius: 8px; border: 1px dashed var(--correct-green);}