*{box-sizing:border-box;margin:0;padding:0}:root{--gold:#f59e0b;--gold-light:#fef3c7;--gold-dark:#b45309;--cream-bg:#fffbeb;--white:#fff;--text-dark:#333;--correct-green:#27ae60;--wrong-red:#e74c3c}html,body{width:100%;color:var(--text-dark);background:radial-gradient(125% 125% at 50% -10%,#f59e0b 0%,#b45309 55%,#7c2d12 100%) fixed;font-family:Nunito,sans-serif;overflow-x:hidden}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.container{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:1rem;display:flex}.start-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2rem;animation:.6s ease-in fadeIn;display:flex}.start-screen.hidden{display:none}.spark-header{flex-direction:column;align-items:center;gap:1rem;display:flex}.spark-svg{filter:drop-shadow(0 10px 18px #00000038);width:auto;height:160px}#startScreen .spark-svg{height:160px;animation:2.6s ease-in-out infinite charFloat}#endScreen .spark-svg{height:178px}@keyframes charFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes sparkBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}h1{color:#fff;text-shadow:0 2px 14px #00000038;font-family:"Baloo 2",sans-serif;font-size:clamp(2rem,8vw,3rem);font-weight:800}.subtitle{color:#ffffffeb;font-size:clamp(1rem,4vw,1.25rem);font-weight:600}.difficulty-section{flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:400px;display:flex}.difficulty-label{color:#fff;font-family:"Baloo 2",sans-serif;font-size:1.25rem;font-weight:700}.difficulty-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;display:flex}.difficulty-btn{border:3px solid var(--gold);background-color:var(--white);color:#92400e;cursor:pointer;touch-action:manipulation;border-radius:12px;min-width:100px;padding:.75rem 1.5rem;font-family:"Baloo 2",sans-serif;font-size:1rem;font-weight:700;transition:all .3s}.difficulty-btn:hover{background-color:var(--gold-light);transform:scale(1.05)}.difficulty-btn:focus{outline:3px solid var(--gold-dark);outline-offset:2px}.difficulty-btn.selected{background-color:var(--gold);color:var(--white);box-shadow:0 4px 8px #f59e0b66}.solve-btn{background-color:var(--gold);color:var(--white);cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:16px;min-width:200px;min-height:48px;padding:1rem 2rem;font-family:"Baloo 2",sans-serif;font-size:1.25rem;font-weight:800;transition:all .3s;box-shadow:0 4px 12px #f59e0b4d}.solve-btn:hover{background-color:var(--gold-dark);transform:translateY(-2px);box-shadow:0 6px 16px #f59e0b66}.solve-btn:active{transform:translateY(0)}.solve-btn:focus{outline:3px solid var(--gold-dark);outline-offset:2px}.game-screen{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:600px;animation:.6s ease-in fadeIn;display:flex}.game-screen.hidden{display:none}.game-header{justify-content:space-between;align-items:center;gap:1rem;width:100%;display:flex}.score-display{color:#fff;text-shadow:0 1px 6px #0003;font-family:"Baloo 2",sans-serif;font-size:1.5rem;font-weight:700}.progress-display{color:#fffffff2;text-shadow:0 1px 6px #0003;font-family:"Baloo 2",sans-serif;font-size:1.25rem;font-weight:700}.puzzle-container{background-color:var(--white);border-radius:16px;flex-direction:column;gap:2rem;width:100%;padding:2rem 1.5rem;display:flex;box-shadow:0 4px 12px #0000001a}.pattern-display{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;min-height:80px;display:flex}.pattern-item{border-radius:8px;justify-content:center;align-items:center;width:60px;height:60px;animation:.5s ease-out slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.pattern-item svg{width:100%;height:100%}.unknown-slot{border:3px dashed var(--gold);width:60px;height:60px;color:var(--gold);border-radius:8px;justify-content:center;align-items:center;font-size:2rem;animation:1.5s ease-in-out infinite pulseGlow;display:flex;position:relative}@keyframes pulseGlow{0%,to{box-shadow:0 0 8px #f59e0b4d}50%{box-shadow:0 0 16px #f59e0b99}}.answers-grid{grid-template-columns:1fr 1fr;gap:1rem;width:100%;display:grid}@media (width<=480px){.answers-grid{grid-template-columns:1fr}}.answer-card{background-color:var(--gold-light);border:3px solid var(--gold);cursor:pointer;touch-action:manipulation;border-radius:12px;justify-content:center;align-items:center;min-height:100px;padding:1.5rem;transition:all .3s;display:flex}.answer-card:hover{transform:scale(1.08);box-shadow:0 6px 16px #f59e0b66}.answer-card:focus{outline:3px solid var(--gold-dark);outline-offset:2px}.answer-card svg{width:70px;height:70px}.answer-card.correct{background-color:var(--correct-green);border-color:var(--correct-green);animation:.6s ease-out correctPulse}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.answer-card.wrong{background-color:var(--wrong-red);border-color:var(--wrong-red);animation:.5s ease-out wrongShake}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.hint-message{color:var(--text-dark);text-align:center;min-height:24px;font-size:1rem;font-weight:600;animation:.4s ease-out slideInFade}@keyframes slideInFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.next-btn{background-color:var(--gold);color:var(--white);cursor:pointer;border:none;border-radius:12px;min-width:150px;min-height:48px;padding:.75rem 1.5rem;font-family:"Baloo 2",sans-serif;font-size:1rem;font-weight:700;transition:all .3s}.next-btn:hover{background-color:var(--gold-dark);transform:translateY(-2px)}.next-btn:focus{outline:3px solid var(--gold-dark);outline-offset:2px}.next-btn.hidden{display:none}.end-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2rem;animation:.6s ease-in fadeIn;display:flex}.end-screen.hidden{display:none}.final-score{color:var(--gold-dark);text-shadow:2px 2px 4px #0000001a;font-family:"Baloo 2",sans-serif;font-size:clamp(2.5rem,10vw,4rem);font-weight:800}.score-text{color:#ffffffeb;font-size:1.25rem;font-weight:600}.stars-display{justify-content:center;gap:1rem;font-size:3rem;display:flex}.star{opacity:.3;transition:all .4s}.star.earned{opacity:1;animation:.6s cubic-bezier(.68,-.55,.265,1.55) starGrow}@keyframes starGrow{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.new-game-btn{background-color:var(--gold);color:var(--white);cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:16px;min-width:200px;min-height:48px;padding:1rem 2rem;font-family:"Baloo 2",sans-serif;font-size:1.25rem;font-weight:800;transition:all .3s;box-shadow:0 4px 12px #f59e0b4d}.new-game-btn:hover{background-color:var(--gold-dark);transform:translateY(-2px);box-shadow:0 6px 16px #f59e0b66}.new-game-btn:focus{outline:3px solid var(--gold-dark);outline-offset:2px}.sparkle{pointer-events:none;animation:.8s ease-out forwards sparkleFloat;position:fixed}@keyframes sparkleFloat{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--tx), var(--ty)) scale(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=600px){.container{padding:.5rem}.puzzle-container{gap:1.5rem;padding:1.5rem 1rem}.pattern-item,.unknown-slot{width:50px;height:50px}.answer-card{min-height:80px}.answer-card svg{width:60px;height:60px}}a:focus-visible,button:focus-visible,[role=button]:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;border-radius:4px;outline:3px solid #ff6b35}a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}.skip-link{color:#fff;z-index:9999;background:#2d2d44;border-radius:0 0 8px 8px;padding:.8rem 1.5rem;font-weight:700;text-decoration:none;transition:top .3s;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{top:0}
