/* _h.css 2026-03-12 */
:root {
--bg-color: #ffffff;
--text-color: #222222;
--secondary-text: #555555;
--accent: #0044CC;      
--answer-color: #A00000; 
--btn-show: #600042;
--btn-correct: #28a745;
--btn-wrong: #dc3545;
--btn-skip: #6c757d;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
--secondary-text: #aaaaaa;
--accent: #82b1ff;
--answer-color: #ff6b6b;
}
}
html, body { min-height: 100%; margin: 0; }
body { 
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: var(--bg-color); 
color: var(--text-color); 
display: flex; flex-direction: column; align-items: center;
padding: 10px 20px 20px 20px; box-sizing: border-box;
}
.top-link { font-size: 0.9rem; margin-bottom: 20px; }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#quiz-area { max-width: 600px; width: 100%; text-align: center; flex-grow: 1; }
h1 { font-size: 1.6rem; margin-bottom: 1.5rem; margin-top: 0; }
.question-text { font-size: 1.35rem; line-height: 1.5; margin-bottom: 1rem; min-height: 50px; }
.options-list { 
text-align: left; display: block; margin: 0 auto 1.5rem auto; 
max-width: fit-content; font-size: 1.1rem; line-height: 1.6; color: var(--secondary-text);
}
.option-item { margin-bottom: 4px; }
.answer-text { 
color: var(--answer-color); font-size: 1.5rem; font-weight: bold; 
margin-bottom: 2rem; min-height: 35px; 
}
.controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.row { display: flex; gap: 8px; }
button { padding: 16px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn-show { background: var(--btn-show); color: white; width: 100%; }
.btn-correct { background: var(--btn-correct); color: white; flex: 1; }
.btn-wrong { background: var(--btn-wrong); color: white; flex: 1; }
.btn-skip { background: var(--btn-skip); color: white; flex: 1; }
.hidden { display: none; }
.keyboard-help {
display: none; font-size: 0.8rem; color: var(--secondary-text);
margin-bottom: 15px; padding: 10px; border: 1px dashed rgba(128,128,128,0.4); border-radius: 6px;
}
@media (min-width: 768px) { .keyboard-help { display: block; } }
footer {
width: 100%; margin-top: auto; padding: 20px 0; font-size: 0.75rem; 
color: var(--secondary-text); text-align: center; line-height: 1.7; border-top: 1px solid rgba(128,128,128,0.2);
}
#score-summary { font-size: 0.95rem; color: var(--secondary-text); margin-top: 10px; }
.score-bold { font-weight: bold; color: var(--text-color); }