:root {
    --primary-kids: #4CAF50;
    --secondary-kids: #FF9800;
    --text-color: #2c3e50;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --kb-key-bg: #fff;
    --kb-key-shadow: #b0b5bc;
}

/* ANIMATED GRADIENT BACKGROUNDS */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
    color: var(--text-color);
    margin: 0;
    text-align: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #e0c3fc, #8ec5fc);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    transition: color 0.3s;
}

body.dark-mode {
    --text-color: #e0e0e0;
    --glass-bg: rgba(20, 30, 48, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --kb-key-bg: #2c3e50;
    --kb-key-shadow: #1a252f;
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #141e30);
    background-size: 400% 400%;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* GLASSMORPHISM PANELS */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* 3D BUTTONS (Mobile Game Style) */
.btn-3d {
    font-family: inherit; font-weight: bold; font-size: 1rem;
    padding: 10px 20px; margin: 5px; border: none; border-radius: 12px;
    cursor: pointer; transition: all 0.1s;
    background: #e0e0e0; color: #333;
    box-shadow: 0 5px 0 #bdbcbc;
}
.btn-3d:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }

.btn-blue { background: #4dabf7; color: white; box-shadow: 0 5px 0 #3b8acf; }
.btn-green { background: #69db7c; color: white; box-shadow: 0 5px 0 #52a860; }
.btn-orange { background: #ffa94d; color: white; box-shadow: 0 5px 0 #d98a3e; }
.btn-red { background: #ff6b6b; color: white; box-shadow: 0 5px 0 #cc5555; }
.btn-purple { background: #b197fc; color: white; box-shadow: 0 5px 0 #8f79cc; }
.btn-dark { background: #343a40; color: white; box-shadow: 0 5px 0 #212529; }

/* HEADER & TYPOGRAPHY */
header { padding: 20px; margin: 10px auto; width: 95%; max-width: 1000px; }
#site-logo { max-height: 90px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.glow-text { text-shadow: 0 0 10px rgba(255,255,255,0.8); }
.dark-mode .glow-text { text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.gold-text { color: #ffd700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.hidden { display: none !important; }

/* LEVEL GRID */
#level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; max-width: 1000px; margin: 0 auto; }
.level-card {
    background: var(--glass-bg); border: 3px solid transparent;
    padding: 20px; border-radius: 15px; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 8px 15px rgba(0,0,0,0.05);
}
.level-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 25px rgba(0,0,0,0.1); }
.level-card.completed-card { border-color: #69db7c; box-shadow: 0 0 15px rgba(105, 219, 124, 0.4); }
.stars { font-size: 1.4rem; margin-top: 5px; color: #ffd700; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }

#avatar-locker { padding: 15px; margin: 10px auto; max-width: 400px; border: 2px solid gold; }

/* GAME SCREEN */
#display-area { width: 85%; max-width: 800px; margin: 20px auto; padding: 40px; position: relative; }

/* GAMIFICATION RACE TRACK */
#combo-meter { position: absolute; top: -15px; right: 20px; font-size: 1.4rem; font-weight: bold; color: #ff6b6b; transition: all 0.2s; background: var(--glass-bg); padding: 5px 15px; border-radius: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.combo-glow { text-shadow: 0 0 15px #ff6b6b; transform: scale(1.1); animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1.1); } 50% { transform: scale(1.15); } 100% { transform: scale(1.1); } }
.runner-fire { filter: drop-shadow(0 0 10px #ff9800); transform: scale(1.3) translateY(-5px) !important; }

#race-track { width: 100%; height: 60px; background: rgba(0,0,0,0.05); border-radius: 30px; margin-bottom: 30px; position: relative; box-shadow: inset 0 4px 8px rgba(0,0,0,0.1); display: flex; align-items: center; border: 2px solid rgba(255,255,255,0.3); }
#player-character { position: absolute; left: 0%; font-size: 40px; z-index: 2; transition: left 0.1s ease-out, transform 0.1s ease-out; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); }
#ghost-character { position: absolute; left: 0%; font-size: 40px; z-index: 1; opacity: 0.5; filter: grayscale(100%); }
#finish-line { position: absolute; right: 20px; font-size: 35px; }

#target-text { font-size: 2.2rem; letter-spacing: 4px; margin-bottom: 25px; color: var(--text-color); opacity: 0.6; font-weight: bold; }
#target-text span { white-space: pre-wrap; transition: color 0.1s; }
.correct { color: #3b8acf !important; opacity: 1 !important; text-shadow: 0 0 8px rgba(77, 171, 247, 0.4); }
.incorrect { color: #ff6b6b !important; opacity: 1 !important; text-decoration: underline; text-decoration-thickness: 4px; }

#typing-input { font-size: 1.8rem; padding: 15px; width: 80%; border: 3px solid rgba(0,0,0,0.1); border-radius: 15px; text-align: center; outline: none; transition: all 0.1s; background: rgba(255,255,255,0.5); color: var(--text-color); font-weight: bold; box-shadow: inset 0 4px 6px rgba(0,0,0,0.05); }
.dark-mode #typing-input { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.1); }
.input-error { animation: shake 0.3s ease-in-out; border-color: #ff6b6b !important; background-color: rgba(255, 107, 107, 0.1) !important; }

/* FLASHY VIRTUAL KEYBOARD */
#virtual-keyboard { margin: 20px auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px; width: fit-content; }
.row { display: flex; gap: 10px; }
.key { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 12px; font-weight: bold; font-size: 1.2rem; color: var(--text-color); background: var(--kb-key-bg); box-shadow: 0 6px 0 var(--kb-key-shadow); transition: all 0.1s; }
.space-bar { width: 350px; }
.home-key { border-bottom: 5px solid rgba(0,0,0,0.2); }
.dark-mode .home-key { border-bottom: 5px solid rgba(255,255,255,0.2); }

/* Finger Colors - Brighter for flashy feel */
.pinky-l, .pinky-r { background-color: #ffdeeb; }
.ring-l, .ring-r { background-color: #d0ebff; }
.middle-l, .middle-r { background-color: #d3f9d8; }
.index-l, .index-r { background-color: #fff3bf; }
.thumb { background-color: #eebefa; }
.dark-mode .pinky-l, .dark-mode .pinky-r { background-color: #a61e4d; }
.dark-mode .ring-l, .dark-mode .ring-r { background-color: #1864ab; }
.dark-mode .middle-l, .dark-mode .middle-r { background-color: #2b8a3e; }
.dark-mode .index-l, .dark-mode .index-r { background-color: #e67700; }
.dark-mode .thumb { background-color: #862e9c; }

/* Neon Active Key Glow */
.key.active-key { background-color: #ff6b6b !important; color: white !important; box-shadow: 0 0 20px #ff6b6b, 0 2px 0 #c92a2a !important; transform: translateY(4px); }

/* Ninja & Dyslexia Mode Modifiers */
body.ninja-mode .key { color: transparent; }
body.ninja-mode .active-key { color: white !important; text-shadow: 0 0 5px white; }
body.dyslexia-mode { font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px; }

/* CERTIFICATE SCREEN */
#result-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
.certificate-border { border: 10px solid #ffd700; padding: 40px; border-radius: 20px; width: 90%; max-width: 700px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
#cert-logo { max-height: 80px; margin-bottom: 10px; }
.stars-display { font-size: 3.5rem; letter-spacing: 15px; text-shadow: 0 0 15px gold; margin: 15px 0; }

.input-3d { font-size: 1.5rem; padding: 15px; text-align: center; border: 3px dashed #bdbcbc; border-radius: 15px; margin: 15px 0; width: 80%; max-width: 350px; background: rgba(255,255,255,0.5); font-weight: bold; }

#certificate-heatmap { margin: 20px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 600px; }
.heat-key { padding: 8px 18px; border-radius: 8px; font-weight: bold; border: 1px solid rgba(0,0,0,0.1); font-size: 1.2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.heat-perfect { background-color: #69db7c; color: #1b5e20; } 
.heat-okay { background-color: #ffd43b; color: #e65100; } 
.heat-bad { background-color: #ff6b6b; color: #b71c1c; } 

/* MODALS & FOOTER */
#privacy-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1000; background: rgba(0,0,0,0.6); }
.modal-content { padding: 30px; border-radius: 20px; max-width: 500px; text-align: left; position: relative; border: 1px solid var(--glass-border); }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 2rem; background: none; color: inherit; border: none; cursor: pointer; font-weight: bold; }

footer { padding: 20px; margin: 20px auto; width: 95%; max-width: 1000px; border-radius: 20px; }
.footer-link, .footer-btn { color: var(--text-color); font-weight: bold; text-decoration: none; margin: 0 15px; cursor: pointer; background: none; border: none; font-size: 1rem; }
.footer-link:hover, .footer-btn:hover { text-decoration: underline; }

/* PRINTING RULES (A4 Landscape Diploma) */
.print-only { display: none; }
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { background: white; margin: 0; padding: 0; color: black; }
    .no-print, header, footer { display: none !important; }
    #main-stage, .glass-panel { margin: 0; padding: 0; box-shadow: none; border: none; backdrop-filter: none; background: transparent; }
    #result-modal { display: flex !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: none; }
    .certificate-border { border: 15px double #D4AF37; padding: 40px; margin: 0; background: #fff; width: 100%; box-sizing: border-box; text-align: center; box-shadow: none; }
    .print-only { display: block !important; color: #D4AF37; font-size: 3rem; text-decoration: underline; margin: 15px 0; }
    #final-stats { font-size: 1.5rem; line-height: 1.8; color: black; }
    .heat-key { font-size: 1rem; border: 1px solid black; box-shadow: none; } 
}