body{background:linear-gradient(to bottom,#eef6ff,#fff);background-image:url(/bg.jpg);background-repeat:repeat;background-position:bottom;background-size:contain;background-attachment:fixed}.fill-container{max-width:700px;margin:40px auto;padding:30px;border-radius:16px;background:linear-gradient(to bottom right,#fdfdff,#eef4ff);box-shadow:0 8px 20px #0000001a;font-family:Segoe UI,sans-serif;transition:.4s ease}.fill-container.correct{animation:correctFlash .5s ease}.fill-container.wrong{animation:wrongFlash .5s ease}@keyframes correctFlash{0%{background-color:#d7ffdf}to{background-color:transparent}}@keyframes wrongFlash{0%{background-color:#ffe0e0}to{background-color:transparent}}.logo-rosma{display:block;max-width:120px;margin:0 auto 12px}.fill-container h2{text-align:center;font-size:22px;color:#334;margin-bottom:24px}.question-row{background-color:#fff;padding:20px;border-radius:14px;box-shadow:0 6px 16px #00000014;margin-bottom:20px;transition:.3s}.hint{font-size:15px;font-weight:500;color:#555;margin-bottom:12px}.input-row{display:flex;gap:6px;justify-content:center}.cell{width:40px;height:48px;border:2px solid #ccd;border-radius:8px;text-align:center;font-size:22px;font-weight:700;text-transform:uppercase;background-color:#f7faff;box-shadow:inset 0 -2px 4px #0000000d;transition:all .3s ease}.cell:focus{border-color:#8af;outline:none}.cell.correct{background-color:#caffd0!important;border-color:#50b96b;color:#265f2b}.cell.wrong{background-color:#ffd6d6!important;border-color:#d66;color:#8c1f1f}.check-button{display:block;margin:30px auto 0;padding:12px 24px;background:#9bf;border:none;border-radius:10px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 4px 10px #0000001a;transition:.3s}.check-button:hover{background:#79d}.scoreboard{margin-top:30px;text-align:center;font-size:18px;background:#e0f2ff;padding:10px 20px;border-radius:20px;display:inline-block;box-shadow:inset 0 0 0 2px #a0cfff;color:#369;font-weight:600;margin-left:auto;margin-right:auto}.hint-correct{color:#2e7d32;font-weight:700;transition:.3s}.hint-wrong{color:#c62828;font-weight:700;transition:.3s}.popup{background:#f3f8ff;border:2px solid #c9e4ff;border-radius:16px;padding:24px 32px;max-width:500px;margin:40px auto;box-shadow:0 8px 24px #0000001a;text-align:center;animation:popUpFade .8s ease-out;position:relative}.popup h3{font-size:20px;font-weight:700;color:#1e3a5f;margin-bottom:12px}.popup p{color:#333;text-align:center;font-size:18px;background:#e0f2ff;padding:10px 20px;border-radius:20px;display:inline-block;box-shadow:inset 0 0 0 2px #a0cfff;color:#369;font-weight:600;margin-left:auto;margin-right:auto;margin-top:0}@keyframes popUpFade{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.audio-toggle{position:fixed;bottom:20px;right:20px;background:#fff;border:2px solid #cce0ff;border-radius:50%;width:48px;height:48px;font-size:24px;cursor:pointer;box-shadow:0 6px 14px #00000026;transition:.3s;z-index:1000}.audio-toggle:hover{background:#eef6ff}@media (max-width: 480px){.fill-container,.question-row{padding:16px}.input-row{gap:4px;flex-wrap:wrap;justify-content:center}.cell{width:32px;height:40px;font-size:18px}.check-button{width:100%;font-size:15px;padding:10px}.scoreboard{font-size:16px;padding:8px 12px}}
