*{margin:0;padding:0;box-sizing:border-box}body{font-family:Zen Maru Gothic,sans-serif;background:linear-gradient(135deg,#ffe66d,#ff6b6b,#4ecdc4,#45b7d1);background-size:400% 400%;animation:gradientBG 15s ease infinite;min-height:100dvh;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:100%;max-width:480px;padding:20px}.screen{display:flex;flex-direction:column;align-items:center;gap:24px}.start-screen{text-align:center}.title{font-size:3rem;font-weight:900;color:#fff;text-shadow:4px 4px 0 #ff6b6b,8px 8px 0 rgba(0,0,0,.1);line-height:1.2;margin-bottom:40px}.mode-section{width:100%}.mode-label{font-size:1.5rem;font-weight:700;color:#fff;text-align:center;margin-bottom:16px;text-shadow:2px 2px 0 rgba(0,0,0,.1)}.dan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.dan-btn{font-family:Zen Maru Gothic,sans-serif;font-size:1.3rem;font-weight:700;padding:16px 0;border:none;border-radius:16px;color:#fff;cursor:pointer;box-shadow:0 4px #00000026;transition:transform .1s,box-shadow .1s}.dan-btn:active{transform:translateY(3px);box-shadow:0 1px #00000026}.start-btn{font-family:Zen Maru Gothic,sans-serif;font-size:2rem;font-weight:700;padding:20px;width:100%;border:none;border-radius:50px;background:#ff6b6b;color:#fff;cursor:pointer;box-shadow:0 6px #d35555,0 8px 20px #00000026;transition:transform .1s,box-shadow .1s}.start-btn:active{transform:translateY(4px);box-shadow:0 2px #d35555,0 4px 10px #00000026}.back-btn{font-family:Zen Maru Gothic,sans-serif;font-size:1rem;font-weight:700;padding:8px 24px;border:none;border-radius:50px;background:#fffc;color:#666;cursor:pointer;align-self:flex-start;box-shadow:0 2px #0000001a;transition:transform .1s,box-shadow .1s}.back-btn:active{transform:translateY(2px);box-shadow:none}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%}.progress{font-size:1.2rem;font-weight:700;color:#fff;background:#0003;padding:6px 16px;border-radius:50px}.game-screen{position:relative}.question-area{background:#fffffff2;border-radius:24px;padding:32px 24px;text-align:center;width:100%;box-shadow:0 4px 20px #0000001a}.question{font-size:3rem;font-weight:900;color:#333}.reading{font-size:1.5rem;font-weight:700;color:#999;margin-top:12px}.reading-answer{color:#ff6b6b}.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.choice-btn{font-family:Zen Maru Gothic,sans-serif;font-size:2.2rem;font-weight:900;padding:24px;border:none;border-radius:20px;color:#fff;cursor:pointer;transition:transform .1s,box-shadow .1s}.choice-btn:active:not(:disabled){transform:translateY(3px)}.choice-red{background:#ff6b6b;box-shadow:0 5px #d44}.choice-blue{background:#45b7d1;box-shadow:0 5px #2a96b0}.choice-yellow{background:#ffd93d;box-shadow:0 5px #e0b800;color:#7a6a00}.choice-green{background:#6bcb77;box-shadow:0 5px #4aa855}.choice-btn:disabled{opacity:.6;cursor:default}.correct-choice{opacity:1!important;outline:5px solid #2ecc71;outline-offset:2px}.wrong-choice{opacity:1!important;outline:5px solid #e74c3c;outline-offset:2px}.result-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;z-index:10}.result-mark{font-size:10rem;font-weight:900;line-height:1}.result-mark.correct{color:#2ecc71;text-shadow:0 0 40px rgba(46,204,113,.5)}.result-mark.incorrect{color:#e74c3c;text-shadow:0 0 40px rgba(231,76,60,.5)}.result-answer{font-size:1.8rem;font-weight:700;color:#fff}.next-btn{font-family:Zen Maru Gothic,sans-serif;font-size:1.5rem;font-weight:700;padding:16px 48px;border:none;border-radius:50px;background:#fff;color:#333;cursor:pointer;box-shadow:0 4px #ddd,0 6px 20px #0003;transition:transform .1s,box-shadow .1s}.next-btn:active{transform:translateY(3px);box-shadow:0 1px #ddd,0 2px 10px #0003}.collection-btn{font-family:Zen Maru Gothic,sans-serif;font-size:1.3rem;font-weight:700;padding:14px 32px;border:3px solid rgba(255,255,255,.8);border-radius:50px;background:#fff3;color:#fff;cursor:pointer;box-shadow:0 4px #0000001a;transition:transform .1s,box-shadow .1s}.collection-btn:active{transform:translateY(3px);box-shadow:none}.result-screen{text-align:center;gap:32px}.result-score{background:#fffffff2;border-radius:24px;padding:24px 32px;width:100%;box-shadow:0 4px 20px #0000001a}.result-score-label{font-size:2rem;font-weight:900;color:#333}.result-buttons{display:flex;flex-direction:column;gap:12px;width:100%}.result-back-btn{align-self:center;font-size:1.2rem;padding:12px 32px}.item-reward{display:flex;flex-direction:column;align-items:center;gap:8px;animation:rewardPop .5s ease}.reward-emoji{font-size:6rem;animation:rewardBounce 1s ease infinite}.reward-text{font-size:2rem;font-weight:900;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.2)}.reward-name{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.2)}@keyframes rewardPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes rewardBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.collection-screen{text-align:center}.collection-title{font-size:2.2rem;font-weight:900;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.15)}.collection-count{font-size:1.2rem;font-weight:700;color:#fff;background:#0003;padding:4px 16px;border-radius:50px}.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.item-card{background:#fffffff2;border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 8px #0000001a}.item-card.locked{background:#ffffff80}.item-emoji{font-size:1.8rem}.item-name{font-size:.75rem;font-weight:700;color:#333}.item-card.locked .item-name{color:#999}.collection-buttons{display:flex;gap:12px;align-items:center}.reset-btn{font-family:Zen Maru Gothic,sans-serif;font-size:1rem;font-weight:700;padding:8px 24px;border:none;border-radius:50px;background:#e74c3ccc;color:#fff;cursor:pointer;box-shadow:0 2px #0000001a;transition:transform .1s,box-shadow .1s}.reset-btn:active{transform:translateY(2px);box-shadow:none}@media(max-width:400px){.title{font-size:3rem}.question{font-size:2.4rem}.reading{font-size:1.2rem}.choice-btn{font-size:1.8rem;padding:18px}}