@import url(https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap);
.romaji-app-container{background:#dff6fa;border:5px solid #e7fbfa;border-radius:30px;box-shadow:0 15px 35px rgba(0,0,0,.1);font-family:M PLUS Rounded\ 1c,Hiragino Maru Gothic ProN,sans-serif;margin:20px auto;max-width:975px;overflow:hidden;padding:15px;position:relative;text-align:center}.romaji-app-container .fullscreen-overlay{align-items:center;animation:popIn .5s cubic-bezier(.68,-.55,.27,1.55);background:rgba(255,235,59,.95);border-radius:25px;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:100}.romaji-app-container .fullscreen-overlay .overlay-content{animation:scaleUp .3s ease-out;color:#5d4037;text-align:center}.romaji-app-container .fullscreen-overlay .overlay-content .big-icon{display:block;filter:drop-shadow(0 5px 0 rgba(0,0,0,.1));font-size:8em;margin-bottom:20px}.romaji-app-container .fullscreen-overlay .overlay-content .big-text{color:#db6766;font-size:3em;font-weight:800;text-shadow:2px 2px 0 #fff}.romaji-app-container.feedback-correct{background:#c8e6c9}.romaji-app-container.complete-screen{background:#e7fbfa;padding:20px}.romaji-app-container.complete-screen.perfect-score h1{color:#f57f17}.romaji-app-container.complete-screen .confetti{animation:spin 3s linear infinite;font-size:5em;margin-bottom:20px}.romaji-app-container.complete-screen h1{color:#d81b60;font-size:2.5em;margin-bottom:30px}.romaji-app-container.complete-screen .stats{color:#5d4037;font-size:1.5em;margin-bottom:40px}.romaji-app-container.complete-screen .stats .highlight{color:#e7b44b;font-size:1.8em;font-weight:700}.romaji-app-container.complete-screen .stats .highlight-gold{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);color:#e7b44b;font-size:2em;font-weight:700;margin-bottom:10px;text-shadow:0 2px 0 rgba(0,0,0,.1)}.romaji-app-container.complete-screen .restart-btn{background:#e7b44b;border:none;border-radius:50px;box-shadow:0 5px 0 #0288d1;color:#fff;cursor:pointer;font-size:1.5em;font-weight:700;padding:15px 40px;transition:transform .1s}.romaji-app-container.complete-screen .restart-btn:active{box-shadow:none;transform:translateY(5px)}.romaji-app-container .game-header{align-items:center;display:flex;gap:15px;justify-content:space-between;margin-bottom:10px;padding-bottom:10px;position:relative}.romaji-app-container .game-header .back-btn{align-items:center;background:#fff!important;border:solid #db6766!important;border-radius:20px!important;border-width:3px 3px 6px!important;color:#db6766;cursor:pointer;display:flex;font-size:.9em;font-weight:800;gap:5px;padding:8px 15px!important;transition:all .1s}.romaji-app-container .game-header .back-btn:hover{background:#fff0f5;transform:translateY(-2px)}.romaji-app-container .game-header .back-btn:active{border-bottom-width:3px;transform:translateY(3px)}.romaji-app-container .game-header .streak-counter{background:#fff;border:solid #e7b44b;border-radius:20px;border-width:3px 3px 5px;color:#e7b44b;font-size:1.5em;font-weight:800;padding:5px 15px;text-shadow:2px 2px 0 #fff}.romaji-app-container .game-header .progress-bar-container{background:#eee;border:3px solid #fff;border-radius:10px;box-shadow:0 4px 0 rgba(0,0,0,.1);flex-grow:1;height:20px;overflow:hidden}.romaji-app-container .game-header .progress-bar-container .progress-fill{background:linear-gradient(90deg,#e7b44b,#db6766);background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:20px 20px;height:100%;position:relative;transition:width .3s ease-out}.romaji-app-container .game-area-wrapper{align-items:center;display:flex;gap:15px;justify-content:center;margin-bottom:10px}@media(max-width:500px){.romaji-app-container .game-area-wrapper{flex-direction:column;gap:5px}}.romaji-app-container .character-display{align-items:center;display:flex;flex:0 0 90px;flex-direction:column;justify-content:center;position:relative;z-index:5}.romaji-app-container .character-display:before{background:rgba(0,0,0,.1);border-radius:50%;bottom:0;content:"";display:none;height:15px;position:absolute;width:50px;z-index:-1}.romaji-app-container .character-display .character-avatar{animation:gentleFloat 3s ease-in-out infinite;font-size:60px}.romaji-app-container .character-display .character-avatar.jump{animation:bigJump .5s ease-out}.romaji-app-container .character-display img{animation:gentleFloat 3s ease-in-out infinite;border-radius:10px;max-height:90px;max-height:120px}.romaji-app-container .character-display img.jump{animation:bigJump .5s ease-out}.romaji-app-container .character-display .feedback-star{animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);background:#fff;border-radius:30px;box-shadow:0 3px 8px rgba(0,0,0,.15);color:#e7b44b;font-size:1.2em;font-weight:700;padding:8px 15px;position:absolute;right:10%;top:0;z-index:10}.romaji-app-container .game-card{backdrop-filter:blur(5px);background:hsla(0,0%,100%,.9);border:5px solid #fff;border-radius:35px;box-shadow:0 10px 25px rgba(0,0,0,.1);flex:1;min-width:0;padding:20px}.romaji-app-container .game-card .question-text{color:#5d4037;font-size:3em;font-weight:800;margin-bottom:5px;text-shadow:3px 3px 0 #fff,0 0 0 #5d4037}.romaji-app-container .game-card .romaji-hint{color:#b0bec5;font-family:monospace;font-size:2em;letter-spacing:3px;margin-bottom:10px}.romaji-app-container .game-card .romaji-input{background:#fafafa;border:4px solid #b0bec5;border-radius:15px;color:#5d4037;font-family:monospace;font-size:2.5em;letter-spacing:2px;max-width:400px;outline:none;padding:10px;text-align:center;transition:all .2s;width:100%;ime-mode:disabled;-webkit-text-security:none;text-security:none}.romaji-app-container .game-card .romaji-input.pseudo-input{background:#fff;min-height:50px}.romaji-app-container .game-card .romaji-input.pseudo-input .romaji-cursor{animation:blink 1s step-end infinite;background:transparent;color:#e7b44b;font-weight:300;margin-left:2px}.romaji-app-container .game-card .romaji-input:focus{background:#fff;border-color:#e7b44b;box-shadow:0 0 0 4px rgba(231,180,75,.2)}.romaji-app-container .game-card .romaji-input::-moz-placeholder{color:#ccc;font-family:M PLUS Rounded\ 1c;font-size:.5em;letter-spacing:0;transform:translateY(-2px)}.romaji-app-container .game-card .romaji-input::placeholder{color:#ccc;font-family:M PLUS Rounded\ 1c;font-size:.5em;letter-spacing:0;transform:translateY(-2px)}.romaji-app-container .mode-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.romaji-app-container .mode-tabs .tab-btn{background:#f5f5f5;border:2px solid #e0e0e0;border-radius:20px;color:#757575;cursor:pointer;font-size:1em;font-weight:700;padding:8px 16px;transition:all .2s}.romaji-app-container .mode-tabs .tab-btn:hover{background:#eee}.romaji-app-container .mode-tabs .tab-btn.active{background:#fff;border-color:#e7b44b;box-shadow:0 4px 10px rgba(231,180,75,.2);color:#e7b44b;transform:translateY(-2px)}.romaji-app-container *{box-sizing:border-box}.romaji-app-container button,.romaji-app-container input,.romaji-app-container select,.romaji-app-container textarea{font-family:inherit}.romaji-app-container .tracing-section{margin-bottom:20px}.romaji-app-container .tracing-section .instruction{color:#aaa;font-size:.9em;margin-bottom:5px}.romaji-app-container .tracing-container{height:150px;margin:0 auto;max-width:500px;position:relative;width:100%}.romaji-app-container .tracing-container .tracing-guide{align-items:center;color:#e0e0e0;display:flex;font-family:monospace;font-size:5em;height:100%;justify-content:center;left:0;letter-spacing:15px;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:1}.romaji-app-container .tracing-container .tracing-canvas{cursor:pointer;height:100%;left:0;position:absolute;top:0;touch-action:none;width:100%;z-index:2}.romaji-app-container .tracing-container .clear-btn{background:#eee;border:none;border-radius:5px;bottom:5px;color:#666;cursor:pointer;font-size:.8em;padding:5px 10px;position:absolute;right:5px;z-index:3}.romaji-app-container .tracing-container .clear-btn:hover{background:#ddd}.keyboard-section{background:#dff6fa;border:none;border-radius:25px;border-top:2px dashed hsla(0,0%,100%,.6);margin-top:15px;padding:15px 10px;text-align:center}.keyboard-guide{align-items:flex-start;display:inline-flex;flex-direction:column;gap:4px;text-align:left}.keyboard-row{display:flex;gap:4px;justify-content:flex-start}.keyboard-row:nth-child(2){margin-left:18px}.keyboard-row:nth-child(3){margin-left:36px}.keyboard-row.bottom-row{justify-content:center;margin-top:4px;width:100%}.key{align-items:center;background:#fff;border:solid #e0e0e0;border-radius:8px;border-width:2px 2px 4px;box-shadow:0 2px 3px rgba(0,0,0,.05);color:#5d4037;cursor:pointer;display:flex;font-size:1rem;font-weight:800;height:48px;justify-content:center;min-width:32px;padding:0 4px;transition:all .1s}.key:focus,.key:hover{outline:none!important;transform:none!important}.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space):focus,.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space):hover{background-color:#fff!important;border-color:#e0e0e0!important;color:#5d4037!important}.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).action:focus,.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).action:hover{background-color:#f0f0f0!important;border-color:#e0e0e0!important;color:#555!important}.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).decor:focus,.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).decor:hover{background-color:#fdfdfd!important;border-color:#eee!important;color:#bbb!important}.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).enter:focus,.key:not(.active):not(.active-static):not(.active-blink):not(.toggle-case):not(.toggle-hint):not(.space).enter:hover{background-color:#e3f2fd!important;border-color:#bbdefb!important;color:#333!important}.key.action:hover,.key.toggle-case:hover,.key.toggle-hint:hover{filter:brightness(.95);transform:translateY(-2px)!important}.key.decor{background:#fdfdfd;border-color:#eee;color:#bbb;font-weight:400}.key.action{background:#f0f0f0;color:#555;font-size:.85rem}.key.backspace{min-width:45px}.key.enter{background-color:#e3f2fd;border-color:#bbdefb;color:#333;font-size:.75rem;padding:0;position:relative;width:45px}.key.enter:before{border:2px solid #bbdefb;border-radius:8px 8px 0 8px;bottom:100%;height:52px;margin-bottom:-2px;right:-2px;width:63px;z-index:1}.key.enter:after,.key.enter:before{background-color:inherit;content:"";position:absolute}.key.enter:after{height:4px;right:0;top:-2px;width:41px;z-index:2}.key.enter.active,.key.enter.active-blink,.key.enter.active-static{background-color:#db6766;border-color:#db6766;color:#fff}.key.enter:before{border-color:#bbdefb}.key.enter.active-blink:before,.key.enter.active-static:before,.key.enter.active:before{border-color:#db6766}.key.shift{min-width:50px}.key.active{animation:keyPop .8s infinite alternate}.key.active,.key.active-blink,.key.active-static{background:#db6766;border-bottom-width:5px;border-color:#db6766;box-shadow:0 5px 15px hsla(1,62%,63%,.4);color:#fff;transform:translateY(-2px)}.key.active-blink{animation:keyBlink .6s infinite alternate}.key.space{border-color:#e7b44b;color:#e7b44b;width:200px}.key.space:focus,.key.space:hover{background-color:#fff!important;color:#e7b44b!important;filter:none!important;outline:none!important;transform:none!important}.key.pressed,.key:active{border-bottom-width:2px;box-shadow:inset 0 2px 4px rgba(0,0,0,.1);transform:translateY(3px)!important}@keyframes keyPop{0%{transform:translateY(0)}to{transform:translateY(-4px) scale(1.05)}}@keyframes keyBlink{0%{background:#db6766;border-color:#db6766}to{background:#ffb4b3;border-color:#ffb4b3;box-shadow:0 2px 5px hsla(1,62%,63%,.1)}}.stage-select-container{animation:popIn .5s cubic-bezier(.68,-.55,.27,1.55);background-color:#e7fbfa;border-radius:30px;padding:40px 20px}.stage-select-container .main-title{animation:bounce 2s ease-in-out infinite;color:#db6766;font-size:3.5em;letter-spacing:2px;margin-bottom:20px;text-shadow:4px 4px 0 #fff,7px 7px 0 rgba(0,0,0,.1)}.stage-select-container .sub-title{background:hsla(0,0%,100%,.8);border-radius:20px;color:#5d4037;display:inline-block;font-size:1.3em;font-weight:700;margin-bottom:40px;padding:5px 20px}.stage-select-container .stage-header{margin-bottom:1.5rem;position:relative}.stage-select-container .stage-header-flex{align-items:center;display:flex;gap:2rem;justify-content:center}.stage-select-container .mascot-left{animation:float 3s ease-in-out infinite}.stage-select-container .mascot-right{animation:float 3s ease-in-out 1.5s infinite}.stage-select-container .mascot-img{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));height:100px;-o-object-fit:contain;object-fit:contain;width:100px}.stage-select-container .mascot-fallback{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));font-size:4rem}.stage-select-container .stages-grid{display:grid;gap:2rem;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:600px;padding:10px;width:100%}.stage-select-container .stage-card-btn{align-items:center;background:#fff;border:none;border-radius:16px;display:flex;flex-direction:column;justify-content:center;outline:none;overflow:hidden;padding:2rem;position:relative;text-align:center;transition:all .3s ease;width:100%}.stage-select-container .stage-card-btn.unlocked{box-shadow:0 10px 20px rgba(0,0,0,.15),0 6px 6px rgba(0,0,0,.1);color:#fff;cursor:pointer;opacity:1}.stage-select-container .stage-card-btn.unlocked:hover{box-shadow:0 15px 30px rgba(0,0,0,.2),0 10px 10px rgba(0,0,0,.12);transform:translateY(-5px) scale(1.02)}.stage-select-container .stage-card-btn.locked{box-shadow:none;color:#9e9e9e;opacity:.7}.stage-select-container .stage-card-btn .stage-icon-text{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));font-size:4rem;margin-bottom:1rem}.stage-select-container .stage-card-btn .stage-card-title{font-size:1.8rem;font-weight:700;margin:0 0 .5rem}.stage-select-container .stage-card-btn .stage-card-desc{color:#fff;font-size:1.1rem;font-weight:700;margin:0;opacity:.9}.stage-select-container .stage-card-btn:first-child{background-color:#dff6f8;color:#0277bd}.stage-select-container .stage-card-btn:first-child .stage-icon{background:#4fc3f7;display:none}.stage-select-container .stage-card-btn:first-child .stage-info{text-align:center;width:100%}.stage-select-container .stage-card-btn:first-child h2{color:#fff;text-shadow:1px 1px 0 #4fc3f7,-1px -1px 0 #4fc3f7,1px -1px 0 #4fc3f7,-1px 1px 0 #4fc3f7,0 2px 4px rgba(0,0,0,.2)}.stage-select-container .stage-card-btn:nth-child(2){background-color:#f4f8d8;color:#558b2f}.stage-select-container .stage-card-btn:nth-child(2) .stage-icon{display:none}.stage-select-container .stage-card-btn:nth-child(2) .stage-info{text-align:center;width:100%}.stage-select-container .stage-card-btn:nth-child(2) h2{color:#fff;text-shadow:1px 1px 0 #aed581,-1px -1px 0 #aed581,1px -1px 0 #aed581,-1px 1px 0 #aed581,0 2px 4px rgba(0,0,0,.2)}.stage-select-container .stage-card-btn:nth-child(3){background-color:#fff3e0;color:#ff8f00}.stage-select-container .stage-card-btn:nth-child(3) .stage-icon{display:none}.stage-select-container .stage-card-btn:nth-child(3) .stage-info{text-align:center;width:100%}.stage-select-container .stage-card-btn:nth-child(3) h2{color:#fff;text-shadow:1px 1px 0 #ffd54f,-1px -1px 0 #ffd54f,1px -1px 0 #ffd54f,-1px 1px 0 #ffd54f,0 2px 4px rgba(0,0,0,.2)}.stage-select-container .stage-card-btn:nth-child(4){background-color:#fce4ec;color:#d84315}.stage-select-container .stage-card-btn:nth-child(4) .stage-icon{display:none}.stage-select-container .stage-card-btn:nth-child(4) .stage-info{text-align:center;width:100%}.stage-select-container .stage-card-btn:nth-child(4) h2{color:#fff;text-shadow:1px 1px 0 #ff8a65,-1px -1px 0 #ff8a65,1px -1px 0 #ff8a65,-1px 1px 0 #ff8a65,0 2px 4px rgba(0,0,0,.2)}.stage-select-container .stage-card-btn:first-child{transform:rotate(-2deg)}.stage-select-container .stage-card-btn:nth-child(2){transform:rotate(2deg) translateY(10px)}.stage-select-container .stage-card-btn:nth-child(3){transform:rotate(-1deg)}.stage-select-container .stage-card-btn:nth-child(4){transform:rotate(3deg) translateY(10px)}.stage-select-container .stage-card-btn:hover{box-shadow:0 15px 0 rgba(0,0,0,.1);transform:scale(1.1) rotate(0deg)!important;z-index:20}.stage-select-container .stage-card-btn:active{box-shadow:0 2px 0 #ccc;transform:translateY(2px)}.stage-select-container .stage-card-btn.locked{cursor:not-allowed;filter:grayscale(100%);opacity:.6;transform:scale(.95)}.stage-select-container .stage-card-btn.locked:hover{box-shadow:none;transform:scale(.95)}.stage-select-container .stage-card-btn.locked:hover:after{display:none}.stage-select-container .stage-card-btn .stage-icon{align-items:center;border:3px solid hsla(0,0%,100%,.5);border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.1);color:#fff;display:flex;flex-shrink:0;font-size:2em;font-weight:800;height:60px;justify-content:center;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);width:60px}.stage-select-container .stage-card-btn .stage-info h2{font-size:1.4em;font-weight:800;letter-spacing:1px;margin:0;text-transform:uppercase}.stage-select-container .stage-card-btn .stage-info p{color:#888;font-size:.95em;font-weight:700;margin:5px 0 0}.quiz-section{animation:popIn .5s ease-out;margin-top:30px}.quiz-section .instruction{color:#5d4037;font-size:1.5em;font-weight:800;margin-bottom:25px;text-shadow:2px 2px 0 #fff}.quiz-section .instruction:before{animation:bounce 2s infinite;content:"❓";display:inline-block;margin-right:10px}.quiz-section .quiz-grid{display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:0 auto;max-width:500px}.quiz-section .quiz-choice-btn{background:#fff;border:solid #9bcfce;border-radius:25px;border-width:4px 4px 8px;box-shadow:0 4px 10px rgba(0,0,0,.05);color:#5d4037;cursor:pointer;font-family:inherit;font-size:2em;outline:none;overflow:hidden;padding:25px 10px;position:relative;transition:all .1s cubic-bezier(.4,0,.2,1)}.quiz-section .quiz-choice-btn:first-child{border-color:#ff9800;color:#e65100}.quiz-section .quiz-choice-btn:nth-child(2){border-color:#4caf50;color:#1b5e20}.quiz-section .quiz-choice-btn:nth-child(3){border-color:#29b6f6;color:#01579b}.quiz-section .quiz-choice-btn:nth-child(4){border-color:#ef5350;color:#b71c1c}.quiz-section .quiz-choice-btn:hover{background:#fffde7;box-shadow:0 8px 15px rgba(0,0,0,.1);transform:translateY(-4px)}.quiz-section .quiz-choice-btn:active{border-bottom-width:4px;box-shadow:inset 0 2px 5px rgba(0,0,0,.1);transform:translateY(4px)}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes bigJump{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.1) translateY(-20px)}to{transform:scale(1) translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(0)}80%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.ime-warning-container{align-items:center;animation:slideUpFade .5s cubic-bezier(.175,.885,.32,1.275) forwards;bottom:0;display:flex;flex-direction:column;left:50%;pointer-events:none;position:fixed;transform:translateX(-50%);z-index:1000}.ime-warning-container .character-pop{height:auto;width:120px}.ime-warning-container .character-pop img{animation:floatWiggle 2s ease-in-out infinite;display:block;filter:drop-shadow(0 10px 10px rgba(0,0,0,.2));width:100%}.ime-warning-container .warning-speech-bubble{animation:popBubble .3s cubic-bezier(.175,.885,.32,1.275) .2s both;background:#fff;border:4px solid #db6766;border-radius:20px;box-shadow:0 5px 15px rgba(0,0,0,.1);color:#db6766;font-size:1.1em;font-weight:900;padding:15px 20px;position:relative;text-align:center;transform:translateY(-20px)}.ime-warning-container .warning-speech-bubble:after{border-color:#db6766 transparent transparent;border-style:solid;border-width:15px 15px 0;bottom:-15px;content:"";left:50%;position:absolute;transform:translateX(-50%)}.ime-warning-container .warning-speech-bubble:before{border-color:#fff transparent transparent;border-style:solid;border-width:10px 10px 0;bottom:-9px;content:"";left:50%;position:absolute;transform:translateX(-50%);z-index:1}@keyframes scaleUp{0%{transform:scale(.5)}to{transform:scale(1)}}@keyframes slideUpFade{0%{bottom:-100px;opacity:0}10%{opacity:1}to{bottom:20px;opacity:1}}@keyframes popBubble{0%{opacity:0;transform:translateY(-10px) scale(0)}to{opacity:1;transform:translateY(-20px) scale(1)}}@keyframes floatWiggle{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-5px) rotate(-3deg)}75%{transform:translateY(5px) rotate(3deg)}}@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-30deg)}60%{opacity:1;transform:scale(1.3) rotate(15deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes errorShake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}.feedback-typing .cheer-character-fallback,.feedback-typing .cheer-character-img,.feedback-typing .romaji-input{animation:errorShake .4s cubic-bezier(.36,.07,.19,.97) both}@media(max-width:768px){.stage-select-container{padding:20px 10px}.stage-select-container .stage-header-flex{gap:10px}.stage-select-container .main-title{font-size:1.25rem;line-height:1.3;text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(0,0,0,.1)}.stage-select-container .mascot-img{height:40px;width:40px}.stage-select-container .mascot-fallback{font-size:2rem}.stage-select-container .stages-grid{gap:10px;grid-template-columns:1fr;padding:5px}.stage-select-container .stage-card-btn{border-radius:12px;padding:15px}.stage-select-container .stage-card-btn.unlocked{box-shadow:0 5px 10px rgba(0,0,0,.15),0 3px 3px rgba(0,0,0,.1)}.stage-select-container .stage-icon-text{font-size:2.5rem;margin-bottom:.5rem}.stage-select-container .stage-card-title{font-size:1.4rem}.stage-select-container .stage-card-desc{font-size:1rem}.stage-select-container .grade-cards-container{padding:10px}.stage-select-container .grade-cards-container .grade-card-btn{flex-direction:column;gap:10px;padding:15px;text-align:center}.stage-select-container .grade-cards-container .grade-card-btn>div:first-child{font-size:2rem;height:60px;margin:0 auto 10px;width:60px}.stage-select-container .grade-cards-container .grade-card-btn .grade-sub-title{display:block!important;font-size:.95rem!important;white-space:normal}.stage-select-container .grade-cards-container .grade-card-btn h2{font-size:1.5rem!important}.stage-select-container .grade-cards-container .grade-card-btn p{font-size:.95rem!important}.romaji-app-container{padding:15px 10px}.romaji-app-container .header-stats{flex-direction:column!important;gap:15px!important}.romaji-app-container .header-stats .header-left,.romaji-app-container .header-stats .header-right{display:flex;justify-content:center!important;width:100%}.play-section{border-radius:20px;border-width:3px;padding:15px}.play-section .question-text{font-size:2.2em}.play-section .romaji-hint-visual{font-size:1.2em!important}.play-section .romaji-input{border-width:3px;font-size:1.5em;padding:8px}.play-section .romaji-input.pseudo-input{min-height:48px;padding:4px}.keyboard-section{margin-top:10px;overflow-x:auto;padding:5px 2px;-webkit-overflow-scrolling:touch}.keyboard-section::-webkit-scrollbar{display:none}.keyboard-guide{align-items:center;display:flex;flex-direction:column;min-width:320px;width:100%}.keyboard-row{gap:2px;justify-content:center;margin-bottom:2px;width:100%}.keyboard-row:nth-child(2){margin-left:0;padding-left:10px}.keyboard-row:nth-child(3){margin-left:0;padding-left:20px}.key{border-radius:6px;border-width:1px 1px 3px;font-size:1.1rem;height:42px;min-width:unset;padding:0 2px;width:clamp(28px,8vw,36px)}.key.decor,.key.enter{display:none!important}.key.space{width:100px}.key.action{font-size:.9rem;min-width:32px;padding:0 8px;width:auto}.key.backspace,.key.shift{min-width:48px}}.float-idle{animation:float-idle-anim 3s ease-in-out infinite}@keyframes float-idle-anim{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.jump-cheer{animation:jump-cheer-anim .5s cubic-bezier(.175,.885,.32,1.275) 2}@keyframes jump-cheer-anim{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}to{transform:translateY(0) scale(1)}}