body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100vw;height:100vh}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100vh;height:100svh;overflow:hidden;position:fixed}#root{width:100%;height:100%}.app{width:100vw;height:100svh;min-height:100svh;display:flex;justify-content:center;align-items:center;background:url(/images/background/nnct.jpg) center center / cover no-repeat fixed;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;overflow:hidden}.start-screen{text-align:center;color:#fff;animation:fadeIn .5s ease-in}.select-card{width:90vw;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:stretch;gap:1rem;background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 40px #0000004d;overflow:hidden}.select-title-top{font-weight:700;font-size:1.4rem;color:#333;text-align:left}.back-row{display:flex;justify-content:center;margin-top:.5rem}.start-card{width:90svw;max-width:500px;max-height:90svh;display:flex;flex-direction:column;align-items:center;gap:1rem;background:#fff;border-radius:20px;padding:2.5rem 2rem;margin:0 auto;box-shadow:0 10px 40px #0000004d;overflow-y:auto}.start-logo{width:50vw;max-width:340px;height:auto;margin-bottom:1.5rem;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}.mode-chooser{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:1rem 0 .5rem;width:100%}.mode-title{font-size:1.2rem;font-weight:700;color:#333;margin:0}.mode-button-group{display:flex;flex-direction:row;gap:1rem;width:100%;justify-content:center}.mode-button{padding:.6rem 1.2rem;font-weight:700;border-radius:12px;border:2px solid #667eea;background:#fff;color:#667eea;cursor:pointer;flex:1;max-width:200px}.mode-button.large{padding:.9rem 1.8rem;font-size:1.1rem}.mode-button.active{background:#667eea;color:#fff}.select-page{width:100%}.select-header{display:flex;align-items:center;gap:1rem;margin:.5rem 0}.back-button{padding:.4rem .8rem;border:1px solid #ccc;background:#fff;border-radius:8px;cursor:pointer}.select-title{font-weight:700;color:#333}.option-strip{display:inline-flex;justify-content:flex-start;gap:2rem;overflow-x:auto;overflow-y:hidden;padding:.5rem 1rem;width:100%;white-space:nowrap;-webkit-overflow-scrolling:touch;margin:auto}@media (min-aspect-ratio: 1){.option-strip{display:inline-flex;justify-content:flex-start;gap:2rem;overflow-x:auto;overflow-y:hidden;padding:.5rem 1rem;width:100%;white-space:nowrap;-webkit-overflow-scrolling:touch;margin:auto}.option-button img{width:20vw;max-width:600px;min-width:200px}}@media (max-aspect-ratio: 1){.option-strip{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:1rem;overflow-x:hidden;overflow-y:auto;padding:.5rem;max-height:60vh;max-width:100%;width:100%;white-space:normal}.option-button{width:100%;max-width:300px;margin:0 auto}.option-button img{height:auto;width:100%;object-fit:contain}}.option-button{background:transparent;border:none;padding:0;cursor:pointer;flex:0 0 auto}.title{font-size:4.2rem;margin-bottom:.5rem;color:#333}.subtitle{font-size:1.5rem;margin-bottom:.5rem;color:#333;font-weight:700}.description{font-size:1.4rem;margin-bottom:2rem;color:#555}.start-button{padding:1.5rem 3rem;font-size:1.5rem;font-weight:700;color:#667eea;background:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.start-button:active{transform:translateY(0)}.game-screen{width:100%;max-width:100%;height:100svh;max-height:100svh;display:flex;flex-direction:column;justify-content:space-around;align-items:center;background:transparent;border-radius:0;padding:1rem;box-shadow:none;animation:fadeIn .5s ease-in;position:relative;overflow:visible}.explosion-gif-over-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,75%);height:auto;pointer-events:none;z-index:11}.progress-image{width:50vw;max-width:450px;height:auto;margin-bottom:1rem;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.2))}.progress-image-explanation{position:fixed;top:1rem;left:50%;transform:translate(-50%);z-index:100;pointer-events:none}.timer{font-size:1.8rem;font-weight:700;color:#333;padding:1rem 2rem;background:#f0f0f0;border-radius:15px;transition:all .3s ease}.timer[data-time="5"],.timer[data-time="4"],.timer[data-time="3"],.timer[data-time="2"],.timer[data-time="1"]{background:#f44;color:#fff;animation:pulse .5s infinite}.kanji-container{flex:1;display:flex;justify-content:center;align-items:center;width:100%;min-height:0}.kanji{font-size:8rem;font-weight:700;color:#333;transition:transform .5s ease;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.question-image{max-width:90%;max-height:40vh;object-fit:contain;transition:transform .1s ease;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.1))}.result-image{max-width:300px;max-height:200px;object-fit:contain;margin-bottom:1rem;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3))}.answer-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:500px}.answer-input{padding:1.5rem;font-size:1.5rem;border:3px solid #667eea;border-radius:10px;text-align:center;outline:none;transition:all .3s ease}.answer-input:focus{border-color:#764ba2;box-shadow:0 0 0 3px #764ba233}.submit-button{padding:1rem 2rem;font-size:1.3rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease}.submit-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.submit-button:active{transform:translateY(0)}.explosion{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:15rem;animation:explode 1.5s ease-out;pointer-events:none;z-index:10}.game-screen.exploding,.volume-toggle-button.exploding,.hint-bar.exploding{animation:shake .5s ease-in-out}.explanation-screen{width:90%;max-width:800px;max-height:90svh;background:#ffffffe6;border-radius:20px;padding:2rem 2rem 6rem;box-shadow:0 10px 40px #0000004d;animation:fadeIn .5s ease-in;display:flex;flex-direction:column;align-items:center;gap:2rem;position:relative;overflow:hidden;margin-top:5svh}.genre-badge{position:fixed;left:0;top:50%;transform:translateY(-50%);max-width:80px;height:auto;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.2));z-index:10;width:15vw}.mobile-layout .genre-badge{top:33.33vh}.genre-badge-playing{animation:slideInFromLeft .8s ease-out}.mobile-layout .genre-badge-playing{animation:slideInFromLeftMobile .8s ease-out}.option-badge{position:fixed;right:0;top:50%;transform:translateY(-50%);max-width:80px;height:auto;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.2));z-index:10;width:15vw}.mobile-layout .option-badge{top:33.33vh}.option-badge-playing{animation:slideInFromRight .8s ease-out}.mobile-layout .option-badge-playing{animation:slideInFromRightMobile .8s ease-out}.genre-badge-static{animation:none}.result-badge{font-size:clamp(1rem,3vw,2rem);font-weight:700;padding:1rem 2rem;border-radius:15px;box-shadow:0 4px 15px #0003;animation:bounceIn .6s ease-out}.result-badge.correct{background:linear-gradient(135deg,#4caf50,#81c784);color:#fff}.result-badge.incorrect{background:linear-gradient(135deg,#f44336,#e57373);color:#fff}.explanation-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;overflow-y:auto;height:calc(80svh - 250px);flex:1;position:relative;padding-bottom:2rem}.explanation-image{width:80%;max-height:clamp(100px,15svh,300px);object-fit:contain;border-radius:10px;box-shadow:0 4px 15px #0000001a}.explanation-info{width:100%;display:flex;flex-direction:column;gap:1rem}.genre-label{display:inline-block;color:#fff;font-weight:700;padding:.6rem 1.2rem;border-radius:20px;align-self:center;font-size:clamp(1rem,3vw,1.5rem);margin-bottom:2rem}.term-display{font-size:2rem;font-weight:700;color:#333;text-align:center;padding:1rem;background:#f5f5f5;border-radius:10px}.term-main{color:#667eea}.reading-display{font-size:1.5rem;color:#666;text-align:center;padding:.5rem}.reading-text{font-weight:700;color:#764ba2}.alt-reading{display:inline-block}.view-questions-button{padding:1rem 2rem;font-size:clamp(1rem,5vw,1.5rem);font-weight:700;color:#667eea;background:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;margin-bottom:1em}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{width:min(900px,92vw);max-height:85vh;background:#fff;border-radius:16px;box-shadow:0 10px 40px #0000004d;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #eee}.modal-title{font-weight:700;color:#333}.modal-close{background:transparent;border:none;font-size:2rem;cursor:pointer}.modal-body{overflow-y:auto;padding:1rem 1.25rem}.modal-item{display:grid;grid-template-columns:clamp(100px,calc(30vw + 100px),400px) auto;grid-template-rows:auto auto auto;gap:.75rem 1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid #f0f0f0;padding:2rem 0}.modal-item-image{width:clamp(100px,calc(30vw + 100px),400px);max-height:10svh;object-fit:contain}.modal-item-reading{color:#333;margin-bottom:.25rem;font-size:clamp(1rem,calc(1vw + 1rem),1.5rem);font-weight:700}.modal-item-genre{margin-bottom:.25rem;grid-column:1 / 3;grid-row:1}.modal-item-explanation{grid-column:1 / 3;grid-row:3;white-space:pre-line;color:#444;background:#f9f9f9;border-left:4px solid #667eea;padding:.75rem;border-radius:8px;font-size:clamp(.5rem,calc(2vw + .5rem),1.3em)}@media (max-width: 700px){.modal-item{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:.75rem}.modal-item-genre{grid-column:1;grid-row:1}.modal-item-image{grid-column:1;grid-row:2;width:100%;max-width:400px;margin:0 auto}.modal-item-reading{grid-column:1;grid-row:3;text-align:center}.modal-item-explanation{grid-column:1;grid-row:4}}.explanation-text{font-size:clamp(1rem,3vw,1.5rem);line-height:1.8;color:#444;padding:1em;background:#f9f9f9;border-radius:10px;border-left:4px solid #667eea;white-space:pre-line}.next-button{padding:1rem 2.5rem;font-size:clamp(1rem,3vw,1.3rem);font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:10;min-width:9em}.next-button:hover{transform:translate(-50%) translateY(-2px);box-shadow:0 6px 20px #667eea80}.next-button:active{transform:translate(-50%) translateY(0)}.result-screen{width:90%;max-width:800px;max-height:90vh;text-align:center;color:#fff;animation:fadeIn .5s ease-in;background:#ffffffe6;border-radius:20px;padding:2rem;box-shadow:0 10px 40px #0000004d;margin:0 auto;overflow-y:auto}.result-title{font-size:3rem;margin-bottom:2rem;font-weight:700}.result-title.game-clear{color:#ffeb3b;text-shadow:3px 3px 6px rgba(0,0,0,.8)}.result-title.game-over{color:#f44336;text-shadow:3px 3px 6px rgba(0,0,0,.8)}.last-question-result{background:#fff3;padding:2rem;border-radius:15px;margin-bottom:2rem}.last-kanji{font-size:2rem;margin-bottom:1rem}.correct-answer{font-size:1.5rem;color:#ffeb3b}.score-display{margin:2rem 0;padding:2rem;background:#ffffff26;border-radius:20px}.result-list{max-height:50vh;overflow-y:auto;background:#ffffff26;border-radius:12px;padding:1rem;margin:1rem 0 2rem}.result-list-item{color:#333;font-weight:700;padding:.25rem 0}.score-text{font-size:1.5rem;margin-bottom:1rem;opacity:.9;color:#333;font-weight:700}.score-number{font-size:4rem;font-weight:700;color:#ffeb3b;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.retry-button{padding:1rem 2rem;font-size:clamp(1rem,5vw,1.5rem);font-weight:700;color:#667eea;background:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.retry-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.retry-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes slideInFromLeft{0%{transform:translate(-100%) translateY(-50%);opacity:0}to{transform:translate(0) translateY(-50%);opacity:1}}@keyframes slideInFromLeftMobile{0%{transform:translate(-100%) translateY(-50%);opacity:0}to{transform:translate(0) translateY(-50%);opacity:1}}@keyframes slideInFromRight{0%{transform:translate(100%) translateY(-50%);opacity:0}to{transform:translate(0) translateY(-50%);opacity:1}}@keyframes slideInFromRightMobile{0%{transform:translate(100%) translateY(-50%);opacity:0}to{transform:translate(0) translateY(-50%);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes explode{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}@keyframes incorrectShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-30px)}20%,40%,60%,80%{transform:translate(30px)}}.answer-input.shake{animation:shake .5s ease-in-out;border-color:#f44}.incorrect-overlay{position:fixed;inset:0;background:#ff000080;z-index:9999;pointer-events:none}.incorrect-shaking{animation:incorrectShake 8s ease-in-out}.mobile-settings{margin:1rem 0;display:flex;justify-content:center}.time-limit-settings{margin:1rem 0;text-align:center}.settings-title{font-size:1.2rem;font-weight:700;color:#333;margin-bottom:.5rem}.time-button-group{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:center}.time-button{padding:.8rem 1rem;border:2px solid #ddd;border-radius:8px;background:#fff;color:#333;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-align:center;line-height:1.2;min-width:80px}.time-button:hover{background:#f0f0f0;border-color:#4caf50;transform:translateY(-2px)}.time-button.active{background:#4caf50;color:#fff;border-color:#4caf50;box-shadow:0 4px 8px #4caf504d}.time-button.active:hover{background:#45a049;border-color:#45a049}.toggle-switch{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch input{display:none}.toggle-slider{width:50px;height:24px;background:#ccc;border-radius:12px;position:relative;transition:background .3s}.toggle-slider:before{content:"";position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .3s}.toggle-switch input:checked+.toggle-slider{background:#4caf50}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-label{font-size:.9rem;color:#333;font-weight:500}.mobile-layout{height:auto!important;max-height:66.67vh!important;overflow-y:auto;position:fixed;top:0;left:0;right:0;z-index:1;display:flex;flex-direction:column;justify-content:center}.mobile-playing{justify-content:flex-start!important}.mobile-mode{height:100%!important;max-height:100%!important;padding:.5rem!important;display:flex;flex-direction:column;justify-content:flex-start!important;align-items:center}.mobile-layout .game-screen.mobile-mode{justify-content:flex-start!important;align-items:center;margin-top:10svh!important;height:50svh!important;max-height:50svh!important}.level-display-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:url(/images/background/nnct.jpg) center/cover;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;z-index:1000}.level-display-content{background:#ffffffe6;padding:clamp(2rem,8vw,4rem);border-radius:20px;text-align:center;animation:levelDisplayFadeIn .5s ease-in-out}.level-text{font-size:clamp(2rem,8vw,4rem);font-weight:700;color:#333;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:levelDisplayPulse 1s ease-in-out infinite alternate}.swap-revival-bar{background:linear-gradient(135deg,gold,#ffeb3b);color:#333;padding:1rem 2rem;border-radius:10px;font-size:clamp(1.2rem,4vw,2rem);font-weight:700;box-shadow:0 4px 15px #0000004d;animation:swapRevivalSlide 3s ease-in-out}@keyframes swapRevivalSlide{0%{transform:translate(-120%);opacity:0}15%{transform:translate(0);opacity:1}85%{transform:translate(0);opacity:1}to{transform:translate(120%);opacity:0}}@keyframes levelDisplayFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes levelDisplayPulse{0%{transform:scale(1)}to{transform:scale(1.1)}}.mobile-mode .question-image{max-height:30vh!important}.mobile-mode .kanji{font-size:2.5rem!important}.mobile-mode .progress-image{width:60vw!important;max-width:300px!important;margin:.25rem 0!important}.mobile-layout .explanation-screen{width:95%;max-width:none;height:80vh;padding:1rem 1rem 5rem}.mobile-layout .explanation-content{max-height:calc(80vh - 200px)}.mobile-layout .next-button{padding:.8rem 2rem;font-size:1.1rem;bottom:1rem}.mobile-mode .timer{font-size:1rem!important;padding:.4rem .8rem!important;margin:.25rem 0!important}.mobile-mode .answer-form{margin-top:auto!important;padding:.25rem!important}.mobile-mode .answer-input{font-size:1rem!important;padding:.8rem!important}.custom-keyboard{position:fixed;bottom:0;left:0;right:0;background:#f0f0f0;border-top:1px solid #ddd;padding:.5rem;z-index:2;max-height:33.33vh;overflow-y:auto;-webkit-touch-action:manipulation;touch-action:manipulation;pointer-events:auto}.keyboard-grid{display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(6,minmax(0,1fr));width:100%;gap:4px}.keyboard-key{flex:1;min-width:30px;height:35px;border:1px solid #ccc;background:#fff;border-radius:4px;font-size:13px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;z-index:10;-webkit-touch-action:manipulation;touch-action:manipulation;pointer-events:auto}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:scale(.95)}.keyboard-key:focus{outline:none;background:#e0e0e0}@media (hover: none) and (pointer: coarse){.keyboard-key:hover{background:#fff}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:url(/images/background/nnct.jpg) center/cover;display:flex;justify-content:center;align-items:center;z-index:9999}.loading-content{background:#ffffffe6;padding:3rem;border-radius:20px;text-align:center;min-width:300px}.loading-text{font-size:2rem;font-weight:700;color:#333;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.loading-progress{display:flex;flex-direction:column;align-items:center;gap:1rem}.progress-bar{width:100%;height:20px;background:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:10px;transition:width .3s ease;box-shadow:0 2px 4px #0003}.progress-text{font-size:1.2rem;font-weight:700;color:#333}.loading-note{font-size:.75rem;color:#666;margin-top:1rem;line-height:1.5;max-width:280px;margin-left:auto;margin-right:auto}.cache-clear-button{margin-top:1.5rem;padding:.8rem 1.5rem;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff6b6b,#ee5a52);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #ff6b6b4d}.cache-clear-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #ff6b6b66}.cache-clear-button:active{transform:translateY(0)}.keyboard-key.wide-key{font-size:11px;font-weight:700}.wide-delete{background:#ff6b6b;color:#fff}.wide-submit{background:#7ed957;color:#fff}.keyboard-key.empty-key{background:transparent;border:none;cursor:default}.keyboard-key.empty-key:hover{background:transparent}@media (max-width: 768px){.app{min-height:100svh}.game-screen{height:100svh;max-height:100svh;padding:.5rem;justify-content:space-between}.title{font-size:2.5rem}.kanji{font-size:4rem}.progress-image{width:80vw;max-width:300px;margin:.5rem 0}.timer{font-size:1.1rem;padding:.5rem 1rem;margin:.5rem 0}.question-image{max-height:35svh}.answer-form{margin-top:auto;padding:.5rem}.answer-input{font-size:1.1rem;padding:1rem}.submit-button{padding:.8rem 1.5rem;font-size:1.1rem}.explosion{font-size:6rem}.result-badge{font-size:1.6rem}.term-display{font-size:clamp(1rem,calc(2vw + 1rem),2rem)}.reading-display{font-size:1.1rem}.genre-badge,.option-badge{width:13vw}}@media (max-height: 600px){.game-screen{height:100svh;padding:.25rem}.question-image{max-height:30svh}.kanji{font-size:3rem}.progress-image{width:80vw;max-width:250px}.timer{font-size:1rem;padding:.4rem .8rem}.answer-form{gap:.5rem}.answer-input{font-size:1rem;padding:.8rem}.submit-button{padding:.6rem 1.2rem;font-size:1rem}}.rules-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;padding:.8rem 2rem;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease;margin-bottom:1rem}.rules-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.rules-button:active{transform:translateY(0)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:#fff;border-radius:20px;padding:2rem;max-width:1000px;width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease}.modal-title{font-size:clamp(1rem,calc(2vw + .75rem),2rem);font-weight:700;color:#333;text-align:center;border-bottom:3px solid #667eea;padding-bottom:.5rem}.modal-body{color:#333;line-height:1.8}.modal-text{font-size:1.1rem;margin-bottom:1.5rem;text-align:center;color:#555}.modal-subtitle{font-size:1.3rem;font-weight:700;color:#667eea;margin-top:1.5rem;margin-bottom:.8rem;border-left:4px solid #667eea;padding-left:.8rem}.modal-list{list-style:none;padding-left:0;margin-bottom:1.5rem}.modal-list li{padding:.5rem 0 .5rem 1.5rem;position:relative;font-size:1rem;color:#555}.modal-list li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.2rem}.modal-list li strong{color:#333}.modal-close-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;padding:.8rem 2rem;font-size:1.1rem;font-weight:700;cursor:pointer;width:100%;margin-top:1.5rem;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease}.modal-close-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.modal-close-button:active{transform:translateY(0)}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.section-divider{width:100%;border-top:.5px solid #999;margin:.5rem 0 0}.tool-section-title{font-size:1.2rem;font-weight:700;color:#333;text-align:center}.stats-button-wrapper{width:100%;margin-top:0}.stats-button{width:100%;padding:1rem 1.5rem;font-size:1.1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#4caf50,#81c784);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #4caf504d}.stats-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #4caf5066}.stats-button:active{transform:translateY(0)}.stats-hint{font-size:.85rem;color:#666;margin-top:.5rem;text-align:center}.stats-list{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}.stats-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-radius:8px;transition:all .2s ease;cursor:pointer}.stats-item:hover{transform:translate(5px);box-shadow:0 4px 12px #0000004d}.stats-genre,.stats-count{font-size:1.1rem;font-weight:700;color:#fff}.stats-total{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff8e1;border:2px solid #ffd54f;border-radius:12px;margin-top:1rem;box-shadow:0 4px 12px #ffd54f40}.stats-total-label{font-size:1.2rem;font-weight:700;color:#7c6f00}.stats-total-count{font-size:1.6rem;font-weight:900;color:#5d4037}.bottom-buttons{display:flex;gap:1rem;width:100%;margin-top:1rem}.bottom-button-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem}.bottom-button{width:100%;padding:1rem 1.5rem;font-size:1.1rem;font-weight:700;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #0003}.bottom-button.data-button{background:linear-gradient(135deg,#4caf50,#81c784)}.bottom-button.data-button:disabled{background:linear-gradient(135deg,#9e9e9e,#bdbdbd);cursor:not-allowed;opacity:.6}.bottom-button.submit-button-purple{background:linear-gradient(135deg,#9c27b0,#ba68c8)}.bottom-button.submit-button-purple:hover{transform:translateY(-2px);box-shadow:0 6px 15px #9c27b066}.bottom-button.submit-button-purple:active{transform:translateY(0)}.bottom-button-note{font-size:.75rem;color:#666;text-align:center}.credit-text{font-size:.75rem;color:#888;text-align:center;margin-top:0;padding:0 .5rem}.preview-card-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10001;animation:fadeIn .2s ease}.preview-card{width:90%;max-width:700px;aspect-ratio:4/3;perspective:1000px;cursor:pointer}.preview-card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.preview-card.flipped .preview-card-inner{transform:rotateY(180deg)}.preview-card-front,.preview-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:20px;background:#fff;box-shadow:0 10px 40px #0000004d;display:flex;flex-direction:column;overflow:hidden}.preview-card-back{transform:rotateY(180deg)}.preview-card-header{padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.preview-card-genre{font-size:1.2rem;font-weight:700;color:#fff}.preview-card-hint{font-size:.9rem;color:#fff;font-style:italic}.preview-card-image-container{flex:1;display:flex;justify-content:center;align-items:center;padding:1.5rem;background:#fff}.preview-card-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}.preview-card-answer-container{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.preview-answer-section,.preview-explanation-section{display:flex;flex-direction:column;gap:.8rem}.preview-answer-label,.preview-explanation-label{font-size:.9rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.05em}.preview-answer-text{font-size:1.8rem;font-weight:700;color:#333;line-height:1.5}.preview-answer-text .term-before,.preview-answer-text .term-after{font-size:1.2rem;color:#888}.preview-answer-text .term-main{color:#1976d2}.preview-explanation-text{font-size:1rem;color:#555;line-height:1.6;background:#f9f9f9;padding:1rem;border-radius:10px;border-left:4px solid #4CAF50}@media (max-width: 768px){.preview-card{width:95%;max-height:80vh}.preview-card-header{padding:.8rem 1rem}.preview-card-genre{font-size:1rem}.preview-card-hint{font-size:.8rem}.preview-answer-text{font-size:1.5rem}.preview-card-image-container,.preview-card-answer-container{padding:1rem}}.sound-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.sound-confirm-modal{background:#fff;border-radius:20px;padding:3rem 2rem 2rem;max-width:500px;width:90%;text-align:center;box-shadow:0 10px 40px #0000004d}.sound-confirm-title{font-size:clamp(1.5rem,5vw,2rem);color:#333;margin-bottom:2rem;font-weight:700}.sound-confirm-buttons{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.sound-confirm-button{padding:1.2rem 2rem;font-size:clamp(1rem,4vw,1.2rem);font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;color:#fff}.sound-confirm-button.sound-on{background:linear-gradient(135deg,#667eea,#764ba2)}.sound-confirm-button.sound-on:hover{transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.sound-confirm-button.sound-on:active{transform:translateY(0)}.sound-confirm-button.sound-off{background:linear-gradient(135deg,#8e9eab,#6b7c93)}.sound-confirm-button.sound-off:hover{transform:translateY(-2px);box-shadow:0 5px 20px #6b7c9366}.sound-confirm-button.sound-off:active{transform:translateY(0)}.sound-confirm-note{font-size:.85rem;color:#666;line-height:1.5;margin-top:.5rem}.volume-toggle-button{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;z-index:1000;padding:0}.volume-toggle-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #0006}.volume-toggle-button:active{transform:scale(.95)}.volume-toggle-button img{width:70%;height:70%;object-fit:contain}.debug-info{position:fixed;top:20px;left:20px;background:#000c;color:#0f0;padding:.5rem 1rem;border-radius:5px;font-family:Courier New,monospace;font-size:1rem;font-weight:700;z-index:200;box-shadow:0 2px 10px #00000080}.hint-bar{position:fixed;top:15vh;right:0;background:linear-gradient(135deg,#ff9800,#ffb74d);color:#fff;padding:clamp(1rem,4vw,1.3rem);border-radius:10px 0 0 10px;box-shadow:0 4px 15px #0000004d;font-size:clamp(1rem,4vw,1.3rem);font-weight:700;z-index:100;animation:slideInFromRight .5s ease-out;display:flex;gap:.5rem;align-items:center}.hint-label{opacity:.9}.hint-text{letter-spacing:.1em}@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#ff00004d;pointer-events:none;z-index:5;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}.timeup-buttons{display:flex;gap:1rem;width:100%;max-width:600px;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:10;padding:0 20px}.timeup-button{flex:1;padding:1rem;font-size:clamp(1rem,3vw,1.2rem);font-weight:700;color:#fff;border:none;border-radius:15px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000004d;display:flex;flex-direction:column;align-items:center;gap:.3rem}.timeup-button.swap-button{background:linear-gradient(135deg,#ff9800,#ffb74d)}.timeup-button.retry-button{background:linear-gradient(135deg,#2196f3,#64b5f6)}.timeup-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0006}.timeup-button:active:not(:disabled){transform:translateY(0)}.timeup-button:disabled{background:linear-gradient(135deg,#9e9e9e,#bdbdbd);cursor:not-allowed;opacity:.5}.button-count{font-size:.85rem;font-weight:400;opacity:.9}