:root{--pink: #ff7fbf;--pink-dark: #ff4fa3;--purple: #b89cff;--purple-dark: #9a7cf2;--teal: #5fd9c4;--teal-dark: #2bb8a0;--gold: #ffd24d;--gold-dark: #f2a900;--green: #57c97a;--green-dark: #36a85c;--orange: #ffae5c;--red: #ff7a8a;--white: #ffffff;--text-dark: #6e3a6b;--text-soft: #9a6e96;--cream: #fff7fc;--radius-card: 26px;--radius-btn: 18px;--shadow-card: 0 10px 28px rgba(255,130,190,.28)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{font-family:Hiragino Maru Gothic ProN,"Rounded Mplus 1c",Quicksand,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;background:linear-gradient(165deg,#ffe3f1,#ffeef8 38%,#f0e9ff 72%,#e6f3ff);background-attachment:fixed;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;position:relative}body:before,body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}body:before{background:radial-gradient(10px 10px at 8% 14%,rgba(255,160,210,.35) 0%,transparent 60%),radial-gradient(7px 7px at 24% 42%,rgba(184,156,255,.3) 0%,transparent 60%),radial-gradient(14px 14px at 40% 10%,rgba(255,190,225,.3) 0%,transparent 60%),radial-gradient(6px 6px at 56% 30%,rgba(150,220,255,.3) 0%,transparent 60%),radial-gradient(11px 11px at 73% 56%,rgba(184,156,255,.28) 0%,transparent 60%),radial-gradient(7px 7px at 89% 20%,rgba(255,210,120,.3) 0%,transparent 60%),radial-gradient(8px 8px at 14% 70%,rgba(150,235,200,.28) 0%,transparent 60%),radial-gradient(13px 13px at 49% 80%,rgba(255,170,210,.28) 0%,transparent 60%),radial-gradient(7px 7px at 92% 84%,rgba(184,156,255,.26) 0%,transparent 60%),radial-gradient(9px 9px at 33% 90%,rgba(150,220,255,.26) 0%,transparent 60%);animation:floaty 6s ease-in-out infinite alternate}body:after{background:radial-gradient(6px 6px at 52% 54%,rgba(255,180,215,.3) 0%,transparent 60%),radial-gradient(8px 8px at 28% 64%,rgba(184,156,255,.26) 0%,transparent 60%),radial-gradient(10px 10px at 80% 74%,rgba(150,235,200,.26) 0%,transparent 60%),radial-gradient(7px 7px at 44% 34%,rgba(255,210,120,.26) 0%,transparent 60%),radial-gradient(9px 9px at 64% 16%,rgba(255,180,215,.28) 0%,transparent 60%),radial-gradient(11px 11px at 6% 86%,rgba(150,220,255,.24) 0%,transparent 60%);animation:floaty 7s ease-in-out infinite alternate-reverse}@keyframes floaty{0%{opacity:.6;transform:translateY(0)}to{opacity:.95;transform:translateY(-10px)}}.app-container{display:flex;flex-direction:column;min-height:100dvh;width:100%;max-width:480px;margin:0 auto;background:#fffbfdd1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid rgba(255,160,210,.25);border-right:1px solid rgba(255,160,210,.25);box-shadow:0 0 80px #ff82be38;position:relative;z-index:1}.game-header{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:linear-gradient(135deg,#ff9ecb,#c8a4ff);box-shadow:0 4px 18px #ff82be73;z-index:10;position:relative}.logo{font-size:1rem;font-weight:900;color:var(--white);cursor:pointer;letter-spacing:.03em;text-shadow:0 2px 6px rgba(220,90,160,.45);display:flex;align-items:center;gap:6px;transition:transform .12s;-webkit-user-select:none;user-select:none}.logo:active{transform:scale(.94)}.header-right{display:flex;align-items:center;gap:10px}.header-status{display:flex;align-items:center;gap:8px}.badge-lv{background:linear-gradient(135deg,#fff0a8,var(--gold));color:#8a5a00;font-weight:900;font-size:.82rem;padding:5px 12px;border-radius:9999px;box-shadow:0 3px 0 var(--gold-dark),0 0 12px #ffd24d80;letter-spacing:.03em}.exp-bar-container{width:68px;height:8px;background:#ffffff2e;border-radius:9999px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.exp-bar{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);box-shadow:0 0 8px #4ade8099;transition:width .45s cubic-bezier(.4,0,.2,1)}.mute-btn{background:#ffffff24;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:var(--white);font-size:1.05rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s;line-height:1}.mute-btn:hover{background:#ffffff3d}.mute-btn:active{transform:scale(.88)}.game-content{flex:1;padding:20px 14px;overflow-y:auto}.game-footer{padding:10px;text-align:center;font-size:.68rem;color:#9b6e9680;border-top:1px solid rgba(255,160,210,.18)}.screen-welcome{display:flex;flex-direction:column;gap:18px;align-items:center}.hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 4px}.hero-emoji{font-size:3.8rem;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,180,255,.65))}.hero h2{font-size:1.3rem;color:var(--pink-dark);font-weight:900;text-shadow:0 2px 0 #fff,0 3px 8px rgba(255,130,190,.35);text-align:center}.mode-cards{width:100%;display:flex;flex-direction:column;gap:14px}.mode-card{width:100%;border-radius:var(--radius-card);padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .15s}.mode-card:active{transform:scale(.985)}.mode-card:after{content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:#ffffff12}.mode-card.original{background:linear-gradient(135deg,#ff9ecb,#ff7ab8);border:1px solid rgba(255,255,255,.5)}.mode-card.review{background:linear-gradient(135deg,#ffb98a,#ff8fa3);border:1px solid rgba(255,255,255,.5)}.mode-card.grade{background:linear-gradient(135deg,#a78bfa,#7fd8e8);border:1px solid rgba(255,255,255,.5)}.mode-card-header{display:flex;align-items:center;gap:14px}.mode-icon{font-size:2.4rem;line-height:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.4));flex-shrink:0}.mode-card-header h3{font-size:1.2rem;font-weight:900;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1.2}.mode-card-sub{font-size:.75rem;color:#ffffffb8;margin-top:3px}.mode-card-desc{font-size:.82rem;color:#ffffffa6;text-align:center;padding:4px 0}.btn-mode-start{width:100%;padding:16px;border:none;border-radius:var(--radius-btn);font-size:1.05rem;font-weight:900;color:var(--text-dark);letter-spacing:.02em;cursor:pointer;transition:transform .08s,box-shadow .08s}.btn-mode-start:active{transform:translateY(5px)}.mode-card .btn-mode-start{color:var(--pink-dark)}.mode-card.original .btn-mode-start{background:linear-gradient(180deg,#fff,#ffe1f0);box-shadow:0 6px #e0529a}.mode-card.original .btn-mode-start:active{box-shadow:0 1px #e0529a}.mode-card.review .btn-mode-start{background:linear-gradient(180deg,#fff,#ffe7d6);box-shadow:0 6px #e07a5a;color:#d2603e}.mode-card.review .btn-mode-start:active{box-shadow:0 1px #e07a5a}.mode-card.grade .btn-mode-start{background:linear-gradient(180deg,#fff,#e4dcff);box-shadow:0 6px #8a6ee0;color:#6a4ec8}.mode-card.grade .btn-mode-start:active{box-shadow:0 1px #8a6ee0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fadeIn .15s ease}.modal-content{background:linear-gradient(180deg,#fffafd,#fff0f8);border:1px solid rgba(255,160,210,.4);border-radius:28px 28px 0 0;padding:8px 18px 40px;width:100%;max-width:480px;box-shadow:0 -24px 60px #ff82be59;display:flex;flex-direction:column;gap:12px;animation:slideUp .28s cubic-bezier(.34,1.56,.64,1)}.modal-handle{width:44px;height:4px;background:#ff8cc866;border-radius:9999px;margin:8px auto 6px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:1.15rem;font-weight:900;color:var(--pink-dark)}.modal-close{background:#ff8cc824;border:1px solid rgba(255,140,200,.3);border-radius:10px;font-size:1rem;color:var(--pink-dark);cursor:pointer;padding:6px 10px;transition:background .15s}.modal-close:hover{background:#ff8cc840}.grade-buttons{display:flex;flex-direction:column;gap:10px;width:100%}.grade-buttons button{width:100%;padding:16px;border:2px solid rgba(255,140,200,.3);border-radius:var(--radius-btn);font-size:1rem;font-weight:900;background:linear-gradient(180deg,#fff,#ffeef7);color:var(--pink-dark);box-shadow:0 4px #ff8cc866;cursor:pointer;transition:transform .08s,box-shadow .08s;letter-spacing:.02em}.grade-buttons button:hover{background:linear-gradient(180deg,#fff5fa,#ffe4f2)}.grade-buttons button:active{transform:translateY(3px);box-shadow:0 1px #ff8cc866}.btn-all-grade{background:linear-gradient(180deg,#fff6d6,#ffe9a8)!important;border-color:#ffd24d99!important;color:#c98a00!important;box-shadow:0 4px #ffc83c8c!important}.btn-all-grade:active{box-shadow:0 1px #ffc83c8c!important}.screen-quiz{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.quiz-progress-bar{width:100%;height:12px;background:#ffa0d238;border-radius:9999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ff9ecb,#b89cff);box-shadow:0 0 10px #ff8cc899;border-radius:9999px;transition:width .4s ease}.quiz-info{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:.85rem;font-weight:700}.question-count{color:var(--text-soft);font-weight:800}.combo-count{color:var(--pink-dark);font-weight:900;font-size:.95rem;text-shadow:0 1px 0 #fff,0 0 10px rgba(255,140,200,.5);animation:comboPop .3s cubic-bezier(.34,1.56,.64,1)}.question-box{background:#fff;border-radius:22px;padding:16px 18px;width:100%;text-align:center;box-shadow:0 8px 24px #ff82be40,0 0 0 2px #ffa0d259;display:flex;flex-direction:column;gap:6px}.question-text{font-size:1.15rem;font-weight:800;line-height:1.75;color:var(--text-dark)}.target-kana{background:linear-gradient(135deg,#fff0f7,#f3ecff);border-bottom:3px dashed var(--pink);color:var(--pink-dark);padding:1px 6px;font-weight:900;border-radius:6px}.yomi-text{font-size:.78rem;color:#7c3aed;font-weight:600}.canvas-outer{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.canvas-cells{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.canvas-actions-row{display:flex;gap:12px;width:100%;max-width:340px}.canvas-wrapper{position:relative;background:#fff;border:3px solid rgba(255,140,200,.6);border-radius:24px;box-shadow:0 0 24px #ff8cc84d,0 8px 24px #ff82be38;overflow:visible;touch-action:none}.guide-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.guide-v{position:absolute;left:50%;top:6%;bottom:6%;width:1px;border-left:1.5px dashed rgba(124,58,237,.12)}.guide-h{position:absolute;top:50%;left:6%;right:6%;height:1px;border-top:1.5px dashed rgba(124,58,237,.12)}.guide-char{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:170px;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none;padding-top:10px}.guide-char.hidden{color:transparent}.guide-char.hint{color:#00000012;animation:fadeIn .3s ease}.guide-char.reveal{color:#db277747;transition:color .4s ease}.canvas-wrapper canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;background:transparent;z-index:2;border-radius:21px}.canvas-actions{display:flex;gap:12px;width:100%;max-width:340px}.btn-clear,.btn-undo{flex:1;padding:12px;border:2px solid rgba(255,140,200,.35);border-radius:14px;font-weight:900;font-size:.88rem;background:#fff;color:var(--pink-dark);box-shadow:0 4px #ff8cc866;cursor:pointer;transition:transform .08s,box-shadow .08s;white-space:nowrap}.btn-clear:active:not(:disabled),.btn-undo:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #ff8cc866}.btn-clear:disabled,.btn-undo:disabled{opacity:.45;cursor:not-allowed}.btn-undo{background:#f3f0ff;border-color:#b89cff73;color:var(--purple-dark);box-shadow:0 4px #b89cff80}.btn-undo:active:not(:disabled){box-shadow:0 1px #b89cff80}.btn-check{flex:2;padding:12px;border:none;border-radius:14px;font-weight:900;font-size:.95rem;color:var(--white);background:linear-gradient(180deg,#ff9ecb 0%,var(--pink-dark) 100%);box-shadow:0 5px #d63b86;cursor:pointer;letter-spacing:.02em;transition:transform .08s,box-shadow .08s}.btn-check:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px #d63b86}.btn-check:disabled{background:#f0d8e6;color:#fff;box-shadow:0 5px #d9b8cc;opacity:.7;cursor:not-allowed}.quiz-feedback-area{margin-top:0;width:100%;min-height:130px;display:flex;justify-content:center;align-items:center}.hint-section{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.btn-hint{padding:10px 22px;border:2px dashed rgba(184,156,255,.6);border-radius:9999px;font-size:.88rem;font-weight:800;background:#f5f0ff;color:var(--purple-dark);cursor:pointer;transition:background .18s;white-space:nowrap}.btn-hint:hover{background:#ebe3ff}.btn-hint-inline{display:none}.hint-text{font-size:.9rem;font-weight:700;color:var(--purple-dark);background:#f3edff;border:2px solid rgba(184,156,255,.4);border-radius:16px;padding:12px 16px;text-align:center;width:100%;line-height:1.6}.feedback-result{display:flex;flex-direction:column;gap:12px;width:100%}.result-pass,.result-fail,.result-wrong{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px}.result-pass{background:linear-gradient(135deg,#e3fbec,#d2f7e0);border:2px solid rgba(87,201,122,.5);box-shadow:0 6px 18px #57c97a40}.result-fail{background:linear-gradient(135deg,#fff1e3,#ffe6d2);border:2px solid rgba(255,174,92,.5);box-shadow:0 6px 18px #ffae5c40}.result-wrong{background:linear-gradient(135deg,#ffe6ea,#ffd6de);border:2px solid rgba(255,122,138,.5);box-shadow:0 6px 18px #ff7a8a40}.result-wrong h3{font-weight:900;font-size:1.15rem;color:#e0556a}.result-wrong p{font-size:.84rem;font-weight:600;color:var(--text-soft);margin-top:3px}.result-icon{font-size:2.6rem;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}.result-pass h3{font-weight:900;font-size:1.15rem;color:var(--green-dark)}.result-fail h3{font-weight:900;font-size:1.15rem;color:#e58a3a}.result-pass p,.result-fail p{font-size:.84rem;font-weight:600;color:var(--text-soft);margin-top:3px}.gain-xp{color:#e09a00!important;font-weight:800}.btn-next{width:100%;padding:17px;border:none;border-radius:var(--radius-btn);font-size:1.05rem;font-weight:900;color:#fff;background:linear-gradient(180deg,#6ddf8c 0%,var(--green-dark) 100%);box-shadow:0 6px #2a8a4a;cursor:pointer;letter-spacing:.02em;transition:transform .08s,box-shadow .08s}.btn-next:active{transform:translateY(5px);box-shadow:0 1px #2a8a4a}.screen-result{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding-top:14px}.result-header{display:flex;flex-direction:column;align-items:center;gap:10px}.result-medal{font-size:5rem;animation:bounce 1.6s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,215,0,.6))}.result-header h2{font-size:1.6rem;font-weight:900;color:var(--pink-dark);text-shadow:0 2px 0 #fff,0 3px 10px rgba(255,130,190,.4)}.result-header p{font-size:.9rem;font-weight:600;color:var(--text-soft)}.result-stats{display:flex;gap:10px;width:100%}.stat-card{flex:1;background:#fff;border:2px solid rgba(255,160,210,.35);border-radius:20px;padding:14px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 16px #ff82be2e}.stat-label{font-size:.68rem;color:var(--text-soft);font-weight:800;letter-spacing:.05em}.stat-value{font-size:1.25rem;font-weight:900;color:var(--text-dark)}.text-green{color:var(--green-dark)}.text-purple{color:var(--purple-dark)}.levelup-announcement{background:linear-gradient(135deg,#fff6d6,#ffe9a8);border:2px solid rgba(255,210,77,.55);color:#c98a00;border-radius:16px;padding:14px 18px;font-weight:900;font-size:1rem;width:100%}.mistake-reminder{font-size:.86rem;font-weight:700;color:#e58a3a;background:#fff2e6;border-radius:16px;padding:12px 16px;border:2px solid rgba(255,174,92,.4);width:100%;line-height:1.6}.result-actions{display:flex;flex-direction:column;gap:12px;width:100%}.btn-primary{width:100%;padding:18px;border:none;border-radius:var(--radius-btn);font-size:1.1rem;font-weight:900;color:var(--white);background:linear-gradient(180deg,#ff9ecb 0%,var(--pink-dark) 100%);box-shadow:0 6px #d63b86,0 0 22px #ff82be4d;cursor:pointer;letter-spacing:.02em;transition:transform .08s,box-shadow .08s}.btn-primary:active{transform:translateY(5px);box-shadow:0 1px #d63b86}.btn-secondary{width:100%;padding:15px;border:2px solid rgba(255,140,200,.35);border-radius:var(--radius-btn);font-size:1rem;font-weight:900;background:#fff;color:var(--pink-dark);box-shadow:0 4px #ff8cc866;cursor:pointer;transition:transform .08s,box-shadow .08s}.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px #ff8cc866}.particle-container{position:fixed;pointer-events:none;z-index:999;top:0;right:0;bottom:0;left:0}.particle{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);animation:particleBurst .85s ease-out forwards}@keyframes particleBurst{0%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0);opacity:0}}.screen-shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{0%,to{transform:translate(0)}12%{transform:translate(-7px)}34%{transform:translate(7px)}54%{transform:translate(-5px)}72%{transform:translate(5px)}88%{transform:translate(-2px)}}.animated{animation-fill-mode:both}.animated.fade-in{animation:fadeIn .4s ease both}.animated.bounce-in{animation:bounceIn .35s ease both}.animated.pop-in{animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both}.animated.bounce{animation:bounce 1.5s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@keyframes popIn{0%{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-13px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-18px)}60%{transform:translateY(-8px)}}@keyframes slideUp{0%{transform:translateY(70px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes comboPop{0%{transform:scale(1.4)}to{transform:scale(1)}}@media (orientation: landscape) and (max-height: 540px){.app-container{max-width:100%}.game-header{padding:7px 16px}.game-content{padding:8px 16px}.screen-welcome{gap:8px}.hero{flex-direction:row;padding:0;gap:10px;justify-content:center}.hero-emoji{font-size:2rem;animation:none}.hero h2{font-size:.95rem}.mode-cards{flex-direction:row;gap:8px}.mode-card{flex:1;padding:10px 12px 12px;gap:6px}.mode-icon{font-size:1.8rem}.mode-card-header h3{font-size:.9rem}.mode-card-sub{font-size:.68rem}.mode-card-desc{display:none}.btn-mode-start{padding:10px;font-size:.85rem}.screen-quiz{display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"progress progress" "info     info" "question canvas" "question feedback";column-gap:14px;row-gap:5px;align-items:start}.quiz-progress-bar{grid-area:progress}.quiz-info{grid-area:info;font-size:.78rem}.question-box{grid-area:question;align-self:center;padding:12px 14px}.question-text{font-size:.95rem;line-height:1.6}.yomi-text{font-size:.72rem}.canvas-outer{grid-area:canvas;gap:8px}.quiz-feedback-area{grid-area:feedback;margin-top:0;min-height:0;align-items:flex-start;justify-content:flex-start}.canvas-wrapper{max-width:150px!important;max-height:150px!important}.canvas-actions-row{max-width:100%}.btn-clear,.btn-check{padding:9px 6px;font-size:.8rem}.btn-hint-inline{display:block;flex:1;padding:9px 6px;font-size:.8rem;border-radius:14px}.btn-hint-portrait{display:none}.hint-section{gap:6px}.hint-text{font-size:.8rem;padding:8px 12px}.result-pass,.result-fail{padding:10px 12px}.result-icon{font-size:1.8rem}.result-pass h3,.result-fail h3{font-size:.95rem}.result-pass p,.result-fail p{font-size:.76rem}.btn-next{padding:11px;font-size:.9rem}.modal-overlay{align-items:center}.modal-content{border-radius:20px;max-height:88dvh;overflow-y:auto;padding:6px 16px 16px}.grade-buttons{flex-direction:row;flex-wrap:wrap;gap:8px}.grade-buttons button{flex:1 1 calc(33% - 6px);padding:10px 6px;font-size:.85rem}.screen-result{padding-top:2px;gap:8px}.result-medal{font-size:3rem}.result-header h2{font-size:1.1rem}.result-header p{font-size:.78rem}.result-actions{flex-direction:row;gap:8px}.btn-primary,.btn-secondary{padding:13px 10px;font-size:.95rem}}@media (orientation: landscape) and (min-height: 541px) and (min-width: 700px){.app-container{max-width:100%;height:100dvh}.game-content{padding:10px 24px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:0}.screen-quiz{display:flex;flex-direction:column;align-items:center;gap:10px}.canvas-cells{width:100%;justify-content:center;align-items:center}.canvas-wrapper{flex:1 1 0!important;width:auto!important;height:auto!important;aspect-ratio:1 / 1;max-width:360px!important;max-height:min(46vh,360px)!important}.canvas-actions-row{max-width:860px}.btn-hint-inline{display:block;flex:1}.btn-hint-portrait{display:none}.question-box{padding:12px 24px}.question-text{font-size:1.12rem}.quiz-feedback-area{margin-top:0;min-height:0;align-items:center;justify-content:center}.game-header{padding:8px 24px}.game-footer{padding:5px}.mode-cards{flex-direction:row;gap:12px}.mode-card{flex:1}.modal-overlay{align-items:center}.modal-content{border-radius:22px;max-width:560px;max-height:88dvh;overflow-y:auto;padding:8px 22px 20px}.grade-buttons{flex-direction:row;flex-wrap:wrap;gap:10px}.grade-buttons button{flex:1 1 calc(50% - 5px)}}
