@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#fce4ec,#e8eaf6,#fff3e0,#e0f7fa) 0 0/400% 400%;justify-content:center;align-items:center;min-height:100dvh;padding:16px;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;animation:15s infinite bgShift;display:flex}@keyframes bgShift{0%{background-position:0%}25%{background-position:50% 0}50%{background-position:100%}75%{background-position:50% 100%}to{background-position:0%}}.app{width:100%;max-width:520px}.game-card{background:#fff;border-radius:28px;padding:32px 28px;position:relative;overflow:hidden;box-shadow:0 4px 6px -2px #00000008,0 12px 40px -8px #00000014}.game-card:before{content:"";background:linear-gradient(90deg,#f472b6,#818cf8,#34d399,#fbbf24,#f472b6) 0 0/200% 100%;height:4px;animation:3s linear infinite rainbowBar;position:absolute;top:0;left:0;right:0}@keyframes rainbowBar{0%{background-position:0 0}to{background-position:200% 0}}.top-bar{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.q-num{color:#94a3b8;letter-spacing:1px;text-transform:uppercase;background:#f1f5f9;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}.q-level{text-transform:uppercase;letter-spacing:1px;border-radius:20px;padding:5px 14px;font-size:10px;font-weight:700}.q-level[data-level=Easy]{color:#065f46;background:#d1fae5}.q-level[data-level=Medium]{color:#92400e;background:#fef3c7}.q-level[data-level=Hard]{color:#991b1b;background:#fee2e2}.q-score{color:#6366f1;background:#eef2ff;border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700}.progress-bar{background:#f1f5f9;border-radius:6px;height:6px;margin-bottom:24px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#f472b6,#818cf8);border-radius:6px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.clue-section{margin-bottom:20px}.clue-label{text-transform:uppercase;letter-spacing:2px;color:#94a3b8;margin-bottom:8px;font-size:11px;font-weight:600}.clue-text{color:#1e293b;background:#f8fafc;border:2px solid #f1f5f9;border-radius:16px;padding:20px 24px;font-size:20px;font-weight:500;line-height:1.6;position:relative}.clue-text:before{content:"\"";color:#cbd5e1;opacity:.5;font-family:Georgia,serif;font-size:52px;line-height:0;position:absolute;top:28px;left:8px}.clue-text:after{content:"\"";color:#cbd5e1;opacity:.5;font-family:Georgia,serif;font-size:52px;line-height:0;position:absolute;bottom:10px;right:8px}.feedback{text-align:center;border-radius:12px;margin-top:12px;padding:10px;font-size:14px;font-weight:700;animation:.3s cubic-bezier(.34,1.56,.64,1) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.correct-fb{color:#065f46;background:#d1fae5;border:2px solid #a7f3d0}.wrong-fb{color:#991b1b;background:#fee2e2;border:2px solid #fecaca}.letter-input-wrap{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.letter-box{text-align:center;color:#1e293b;text-transform:uppercase;caret-color:#818cf8;background:#fff;border:2px solid #e2e8f0;border-radius:10px;outline:none;width:44px;height:52px;font-family:Outfit,sans-serif;font-size:24px;font-weight:700;transition:all .2s}.letter-box:focus{border-color:#818cf8;transform:translateY(-2px);box-shadow:0 0 0 3px #818cf826}.letter-box:disabled{color:#94a3b8;background:#f8fafc;border-color:#f1f5f9}.hint-section{margin-bottom:0}.hint-title{text-transform:uppercase;letter-spacing:2px;color:#94a3b8;margin-bottom:10px;font-size:11px;font-weight:600}.hint-row{flex-wrap:wrap;gap:6px;display:flex}.hint-btn{color:#64748b;cursor:pointer;text-align:center;letter-spacing:.3px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;flex:1;min-width:100px;padding:10px 8px;font-family:Outfit,sans-serif;font-size:11px;font-weight:600;transition:all .2s}.hint-btn:hover:not(:disabled){color:#6366f1;background:#eef2ff;border-color:#818cf8;transform:translateY(-1px)}.hint-btn:disabled{color:#065f46;cursor:default;background:#d1fae5;border-color:#a7f3d0;animation:.3s hintReveal}@keyframes hintReveal{0%{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.action-row{justify-content:center;gap:10px;margin-top:16px;display:flex}.btn-next,.btn-skip{cursor:pointer;border:none;border-radius:16px;padding:12px 32px;font-family:Outfit,sans-serif;font-size:14px;font-weight:700;transition:all .25s}.btn-next{color:#fff;background:linear-gradient(135deg,#34d399,#38bdf8);flex:1;box-shadow:0 4px 12px #34d3994d}.btn-next:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #34d39966}.btn-skip{color:#94a3b8;background:#f1f5f9;border:2px solid #e2e8f0}.btn-skip:hover{color:#64748b;background:#f8fafc;border-color:#94a3b8}.result-card{text-align:center;background:#fff;border-radius:28px;padding:36px 28px;animation:.5s fadeUp;box-shadow:0 12px 40px -8px #0000001a}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.result-card h1{background:linear-gradient(135deg,#f472b6,#818cf8,#34d399);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:4px;font-size:34px;font-weight:800}.result-score{color:#1e293b;margin:8px 0;font-size:72px;font-weight:800;line-height:1}.result-sub{color:#94a3b8;margin-bottom:24px;font-size:15px}.result-details{flex-direction:column;gap:4px;max-height:320px;margin-bottom:24px;padding-right:4px;display:flex;overflow-y:auto}.result-details::-webkit-scrollbar{width:4px}.result-details::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}.result-row{border-radius:12px;align-items:center;gap:12px;padding:8px 14px;font-size:13px;display:flex}.row-correct{background:#d1fae5}.row-wrong{background:#fee2e2}.result-icon{width:20px;font-size:15px;font-weight:700}.row-correct .result-icon{color:#059669}.row-wrong .result-icon{color:#dc2626}.result-q{color:#94a3b8;min-width:30px;font-weight:600}.result-ans{color:#1e293b;letter-spacing:1px;font-weight:700}.btn-restart{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f472b6,#818cf8);border:none;border-radius:16px;padding:14px 44px;font-family:Outfit,sans-serif;font-size:15px;font-weight:700;transition:all .25s;box-shadow:0 4px 12px #818cf84d}.btn-restart:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #818cf866}@keyframes shakeAnim{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake .letter-box{animation:.4s shakeAnim;background:#fef2f2!important;border-color:#f87171!important}