.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:1.5rem;background:#10281e8c;animation:fade-in .2s ease-out both}.dialog{width:min(34rem,100%);padding:2.2rem 2rem 2rem;border-radius:var(--radius-lg);background:#fff;text-align:center;box-shadow:var(--shadow-md);animation:pop-in .3s ease-out both}.dialog-title{font-size:1.9rem;font-weight:900;margin-bottom:.6rem}.dialog-message{font-size:1.2rem;color:var(--text-soft);margin-bottom:1.8rem}.dialog-actions{display:flex;gap:1.2rem;justify-content:center}.dialog-actions .btn{flex:1;padding-left:1em;padding-right:1em}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.operator-panel{width:min(46rem,100%);max-height:100%;overflow-y:auto;padding:1.1rem 1.8rem;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:.6rem;animation:pop-in .3s ease-out both}.operator-title{font-size:1.5rem;font-weight:900}.operator-section{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding-top:.6rem;border-top:2px solid var(--line)}.operator-section h3{font-size:1.2rem;font-weight:900}.operator-desc{font-size:1rem;color:var(--text-soft)}.operator-options{display:flex;gap:.5rem}.operator-option{min-width:5rem;min-height:3.2rem;border:0;border-radius:var(--radius-sm);background:var(--white);box-shadow:inset 0 0 0 2px var(--line);font-size:1.15rem;font-weight:800;cursor:pointer}.operator-option.is-active{background:var(--green-dark);color:var(--white);box-shadow:none}.operator-status{font-size:1.15rem;font-weight:800}.operator-status.is-ready{color:var(--green-dark)}.operator-status.is-incomplete{color:var(--learn)}.operator-warning{display:flex;align-items:center;gap:.4em;padding:.4em .8em;border-radius:var(--radius-sm);background:var(--learn-light);color:var(--learn);font-size:1.05rem;font-weight:800}.operator-version{font-size:.9rem;color:var(--text-soft)}.operator-close{align-self:center;min-width:12rem}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-2rem;width:var(--size);height:var(--size);background:var(--color);will-change:transform;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite}.confetti-piece.shape-leaf{border-radius:0 100%}.confetti-piece.shape-dot{border-radius:50%;width:calc(var(--size) * .7);height:calc(var(--size) * .7)}.confetti-piece.shape-strip{width:calc(var(--size) * .45);height:calc(var(--size) * 1.2);border-radius:3px}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0)}to{transform:translate3d(var(--drift),110vh,0) rotate(540deg)}}.earth-mascot{display:block;overflow:visible}.earth-mascot.is-bobbing{animation:gentle-float 4.5s ease-in-out infinite}.earth-sprout{transform-origin:256px 112px;animation:sprout-sway 4s ease-in-out infinite}.earth-eyes{transform-origin:256px 292px;animation:blink 5s infinite}@keyframes sprout-sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes blink{0%,95%,to{transform:scaleY(1)}97.5%{transform:scaleY(.1)}}.narration-player{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:1rem;min-height:5.2rem;padding:.55rem 1.2rem calc(.55rem + var(--safe-bottom));background:var(--white);box-shadow:0 -2px 0 var(--line)}.narration-subtitle{flex:1;min-width:0;display:flex;align-items:center;gap:.7rem}.narration-subtitle-icon{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--green-light);color:var(--green-dark)}.narration-subtitle-icon .btn-icon{width:1.5rem;height:1.5rem}.narration-subtitle.is-speaking .narration-subtitle-icon{background:var(--green-dark);color:var(--white);animation:speaking 1.6s ease-in-out infinite}.narration-subtitle.is-error .narration-subtitle-icon{background:var(--learn-light);color:var(--learn)}@keyframes speaking{0%,to{box-shadow:0 0 #146b5059}50%{box-shadow:0 0 0 .45rem #146b5000}}.narration-subtitle-text{font-size:1.35rem;font-weight:700;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;animation:rise-in .3s ease-out both}.narration-subtitle.is-hint .narration-subtitle-text{color:var(--text-soft)}.narration-subtitle.is-error .narration-subtitle-text{font-size:1.15rem;color:var(--learn)}.audio-controls{flex:none;display:flex;gap:.55rem}.audio-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;width:5.4rem;min-height:4.1rem;padding:.35rem .3rem;border:0;border-radius:var(--radius-md);background:var(--white);color:var(--text);box-shadow:inset 0 0 0 2px var(--line),0 3px #143c2814;font-size:1rem;font-weight:800;line-height:1.15;cursor:pointer;transition:transform .12s ease}.audio-button .btn-icon{width:1.55rem;height:1.55rem}.audio-button:active:not(:disabled){transform:translateY(2px)}.audio-button:disabled{opacity:.4;cursor:default}.audio-button.is-primary{background:var(--green-dark);color:var(--white);box-shadow:0 4px 0 var(--green-deep)}.audio-button.is-rate{width:6.4rem}.audio-button.is-wide{flex-direction:row;gap:.5rem;width:auto;padding:.4rem 1.4rem;font-size:1.2rem;background:var(--green-dark);color:var(--white);box-shadow:0 4px 0 var(--green-deep)}.result-screen{background:radial-gradient(circle at 50% 20%,#ffffff 0%,var(--green-light) 70%)}.result-card{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:1.6rem;margin:1.2rem 2rem;padding:1.4rem 2.2rem;border-radius:1.8rem;background:var(--white);box-shadow:var(--shadow-md),0 0 0 4px var(--result-line);animation:pop-in .45s ease-out both}.result-card.is-good{--result-color: var(--green-dark);--result-line: var(--green-soft)}.result-card.is-learn{--result-color: var(--learn);--result-line: #f6d7b0}.result-visual{display:flex;flex-direction:column;align-items:center;gap:.8rem}.result-badge{display:inline-flex;align-items:center;gap:.35em;padding:.35em 1.1em;border-radius:999px;background:var(--result-color);color:var(--white);font-size:1.8rem;font-weight:900}.result-badge .btn-icon{width:1.2em;height:1.2em}.result-mascot{width:min(100%,13rem);height:auto}.result-game{font-size:1rem;text-align:center;white-space:normal}.result-body{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0}.result-heading{font-size:var(--fs-title);font-weight:900;line-height:1.2;letter-spacing:-.03em;color:var(--result-color)}.result-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;padding:.6rem 1.3rem;border-radius:var(--radius-md);background:var(--green-light)}.result-score-label{font-size:var(--fs-small);font-weight:800;color:var(--text-soft)}.result-score-value{font-size:3rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}.result-score-value small{font-size:.5em}.result-score-detail{flex-basis:100%;font-size:var(--fs-small);font-weight:700;color:var(--text-soft)}.result-message{font-size:var(--fs-body);font-weight:700;line-height:1.5}.result-gift{display:flex;align-items:center;gap:.45em;font-size:var(--fs-body);font-weight:800;line-height:1.45;color:var(--green-deep)}.result-gift-line{display:block}.result-gift-icon{flex:none;width:1.4em;height:1.4em;color:var(--green-dark)}.result-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.2rem}.result-countdown{font-size:var(--fs-small);font-weight:700;color:var(--text-soft)}.rotate-notice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;background:var(--green-light);color:var(--green-dark)}.rotate-icon{width:max(6rem,14vmin);height:max(6rem,14vmin);animation:rotate-hint 2.4s ease-in-out infinite}.rotate-title{font-size:max(2rem,5vmin);font-weight:900}.rotate-desc{font-size:max(1.2rem,3vmin);color:var(--text-soft);font-weight:700}@keyframes rotate-hint{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}.update-toast{position:fixed;left:50%;bottom:calc(1rem + var(--safe-bottom));z-index:40;display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem .6rem 1.4rem;border-radius:999px;background:#fff;box-shadow:var(--shadow-md),inset 0 0 0 2px var(--green-soft);transform:translate(-50%);animation:toast-in .3s ease-out both;max-width:calc(100% - 2rem)}.update-toast.is-above-bar{bottom:calc(6rem + var(--safe-bottom))}@media(max-height:680px){.update-toast.is-above-bar{bottom:calc(5.2rem + var(--safe-bottom))}}.update-toast.is-info{padding:.9rem 1.6rem;color:var(--green-dark)}.update-toast .btn{font-size:1rem;min-height:3rem}.update-text{font-weight:800;font-size:1.05rem}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,1rem)}to{opacity:1;transform:translate(-50%)}}.ox-buttons{display:flex;justify-content:center;gap:2.5rem}.ox-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:min(19rem,36vw);height:min(13rem,30vh);border:0;border-radius:var(--radius-lg);color:var(--white);cursor:pointer;transition:transform .12s ease;animation:rise-in .4s .1s ease-out both}.ox-button:active{transform:translateY(5px)}.ox-button.is-o{background:var(--o-blue);box-shadow:0 7px 0 var(--o-blue-deep)}.ox-button.is-x{background:var(--x-red);box-shadow:0 7px 0 var(--x-red-deep)}.ox-button .ox-symbol{width:48%;height:auto}.ox-button-label{font-size:1.6rem;font-weight:900}.ox-badge{display:inline-flex;align-items:center;gap:.3em;padding:.1em .7em .1em .3em;border-radius:var(--radius-sm);color:var(--white);font-weight:900}.ox-badge.is-o{background:var(--o-blue)}.ox-badge.is-x{background:var(--x-red)}.ox-badge-symbol{width:1.5em;height:1.5em}.game-icon{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center;gap:6%}.game-icon .item{width:27%;height:auto}.game-icon-ox{background:#eef4fb}.game-icon-ox-badge{display:grid;place-items:center;width:32%;aspect-ratio:1;border-radius:50%;color:var(--white)}.game-icon-ox-badge .ox-symbol{width:62%;height:auto}.game-icon-ox-badge.is-o{background:var(--o-blue)}.game-icon-ox-badge.is-x{background:var(--x-red)}.game-icon-recycling{background:var(--green-light)}.game-icon-recycling .item-b{width:22%}.game-icon-lifestyle{background:var(--accent-light)}.brand{display:inline-flex;align-items:center;gap:.35em;font-weight:900;color:var(--green-dark);letter-spacing:.08em;line-height:1}.brand-leaf{width:1.35em;height:1.35em}.brand-md{font-size:1.35rem}.brand-sm{font-size:1rem}:root{--green: #168b62;--green-dark: #146b50;--green-deep: #0f5540;--green-light: #e7f7eb;--green-soft: #cbebd6;--bg: #f7fcf8;--text: #20382d;--text-soft: #3f5a4d;--accent: #f5c84c;--accent-light: #fff4d1;--accent-deep: #8a6400;--white: #ffffff;--line: #d3e5d9;--o-blue: #2563b8;--o-blue-deep: #1b4a8a;--x-red: #c0392b;--x-red-deep: #8e2a20;--learn: #b45309;--learn-light: #fff1e0;--fs-small: 1.1rem;--fs-body: 1.4rem;--fs-button: 1.45rem;--fs-question: 1.7rem;--fs-title: 2.1rem;--touch-min: 3.4rem;--radius-sm: .7rem;--radius-md: 1.1rem;--radius-lg: 1.6rem;--shadow-sm: 0 2px 0 rgba(20, 60, 40, .1), 0 4px 12px rgba(20, 60, 40, .07);--shadow-md: 0 4px 0 rgba(20, 60, 40, .12), 0 12px 28px rgba(20, 60, 40, .1);--font: system-ui, -apple-system, "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}html{font-size:clamp(16px,min(1.56vw,2.5vh),30px)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overscroll-behavior:none}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:var(--fs-body);background:var(--bg);color:var(--text);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}button{font:inherit;color:inherit;touch-action:manipulation}h1,h2,h3,p,ol,ul,dl,dd{margin:0}ol,ul{padding:0;list-style:none}.app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;animation:screen-in .4s ease-out both}@keyframes screen-in{0%{opacity:0}to{opacity:1}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:var(--touch-min);padding:.5em 1.3em;border:0;border-radius:var(--radius-md);font-size:var(--fs-button);font-weight:800;line-height:1.25;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .2s ease;white-space:nowrap}.btn:active{transform:translateY(3px)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--green-dark);color:var(--white);box-shadow:0 5px 0 var(--green-deep)}.btn-primary:active{box-shadow:0 2px 0 var(--green-deep)}.btn-secondary{background:var(--white);color:var(--green-deep);box-shadow:inset 0 0 0 3px var(--green-dark),0 5px 0 var(--green-soft)}.btn-secondary:active{box-shadow:inset 0 0 0 3px var(--green-dark),0 2px 0 var(--green-soft)}.btn-quiet{background:var(--white);color:var(--text);box-shadow:inset 0 0 0 2px var(--line),0 3px #143c2814;font-size:var(--fs-small);padding:.4em 1em}.btn-large{min-height:4.2rem;font-size:1.6rem;padding:.5em 1.8em}.btn-icon{width:1.3em;height:1.3em;flex:none}.topbar{display:flex;align-items:center;gap:1rem;min-height:4.4rem;padding:calc(.6rem + var(--safe-top)) 1.4rem .6rem;background:#fffffff2;box-shadow:0 2px 0 var(--line);flex:none;position:relative;z-index:5}.topbar-title{flex:1;font-size:1.6rem;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-side{display:flex;align-items:center;gap:.7rem;flex:none}.chip{display:inline-flex;align-items:center;gap:.35em;padding:.3em .85em;border-radius:999px;background:var(--green-light);color:var(--green-deep);font-weight:800;font-size:var(--fs-small);white-space:nowrap}.chip-strong{background:var(--green-dark);color:var(--white)}.chip-icon{width:1.15em;height:1.15em}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}:focus-visible{outline:4px solid #1b4a8a;outline-offset:3px}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(forced-colors:active){.btn,.answer-button,.ox-button,.game-card{border:2px solid ButtonText}}.welcome-screen{background:linear-gradient(180deg,#e8f6ee 0%,#f4fbf6 55%,var(--bg) 100%)}.welcome-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.welcome-hills{position:absolute;left:0;bottom:0;width:100%;height:24%}.welcome-top{position:relative;z-index:1;display:flex;align-items:center;gap:1.5rem;padding:calc(1rem + var(--safe-top)) 2rem 0;min-height:4.4rem}.welcome-brand{flex:none;padding:.4rem .6rem;margin:-.4rem -.6rem;border-radius:var(--radius-sm);touch-action:none}.welcome-farewell{display:flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-sm);color:var(--green-deep);font-size:1.15rem;font-weight:800;line-height:1.35;animation:rise-in .4s ease-out both}.welcome-main{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:2rem;padding:0 3.5rem 0 2.5rem}.welcome-visual{display:grid;justify-items:center}.welcome-mascot{width:min(100%,21rem,50vh);height:auto}.welcome-copy{display:flex;flex-direction:column;align-items:stretch}.welcome-title{font-size:2.9rem;font-weight:900;line-height:1.2;letter-spacing:-.04em;color:var(--green-deep)}.welcome-title-line{display:block}.welcome-tagline{margin-top:.5rem;font-size:1.7rem;font-weight:800;color:var(--text)}.welcome-actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;max-width:30rem}.welcome-start{min-height:5rem;font-size:1.75rem;justify-content:flex-start;padding-left:1.4em}.welcome-start .btn-icon{width:1.5em;height:1.5em}.welcome-start.is-silent{min-height:4.2rem;font-size:1.5rem}.welcome-note{margin-top:.9rem;font-size:var(--fs-small);font-weight:700;color:var(--text-soft)}.welcome-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 2rem calc(.9rem + var(--safe-bottom));font-size:1rem;font-weight:700;color:var(--green-deep)}.offline-status{flex:none;display:inline-flex;align-items:center;gap:.35em;padding:.35em .9em;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line);font-size:1rem;font-weight:800;color:var(--text-soft)}.offline-status.is-ready{background:var(--green-dark);color:var(--white);box-shadow:none}.offline-status.is-incomplete{background:var(--learn-light);color:var(--learn);box-shadow:none}.select-screen{background:linear-gradient(180deg,#eef8f1 0%,var(--bg) 100%)}.game-card-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;padding:1.2rem 2rem}.game-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-height:0;padding:1rem 1rem 1.1rem;border:0;border-radius:var(--radius-lg);background:var(--white);box-shadow:0 6px 0 var(--green-soft),0 14px 28px #143c2814;text-align:left;cursor:pointer;animation:rise-in .45s ease-out both;transition:transform .12s ease}.game-card:active{transform:translateY(4px)}.game-card .game-icon{flex:none;margin-bottom:.2rem}.game-card-title{font-size:1.75rem;font-weight:900;line-height:1.2;letter-spacing:-.03em}.game-card-desc{font-size:1.25rem;font-weight:600;line-height:1.4;color:var(--text-soft)}.game-card-meta{display:flex;flex-wrap:wrap;gap:.4rem}.game-card-meta .chip{font-size:1rem}.game-card-start{align-self:stretch;margin-top:auto}.intro-screen{background:linear-gradient(180deg,#eef8f1 0%,var(--bg) 100%)}.intro-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:1.8rem;align-items:center;padding:1rem 2.2rem}.intro-visual{display:flex;flex-direction:column;gap:.9rem;animation:rise-in .4s ease-out both}.intro-visual .game-icon{box-shadow:var(--shadow-sm)}.intro-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.intro-fact{padding:.6rem .4rem;border-radius:var(--radius-sm);background:var(--white);box-shadow:inset 0 0 0 2px var(--line);text-align:center}.intro-fact dt{font-size:1rem;font-weight:800;color:var(--text-soft)}.intro-fact dd{font-size:1.2rem;font-weight:900;line-height:1.3}.intro-howto{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem 1.8rem;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md)}.intro-howto-title{font-size:1.5rem;font-weight:900;color:var(--green-dark)}.intro-steps{display:flex;flex-direction:column;gap:.7rem}.intro-step{display:flex;align-items:flex-start;gap:.8rem;font-size:1.35rem;font-weight:700;line-height:1.45;animation:rise-in .4s ease-out both}.intro-step-num{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;margin-top:.1rem;border-radius:50%;background:var(--green-dark);color:var(--white);font-size:1.1rem;font-weight:900}.intro-start{align-self:flex-end;min-width:14rem}.error-screen{align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem}.error-icon{width:5rem;height:5rem;color:var(--learn)}.error-title{font-size:var(--fs-title);font-weight:900}.error-desc{font-size:var(--fs-body);color:var(--text-soft)}.error-actions{display:flex;gap:1rem;margin-top:1rem}.game-screen{background:linear-gradient(180deg,#eef8f1 0%,var(--bg) 100%)}.game-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:1rem 2rem}.progress-chip{font-size:1.2rem}.question-card{position:relative;padding:1.3rem 1.8rem 1.4rem;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);animation:rise-in .4s ease-out both}.question-label{display:inline-block;margin-bottom:.4rem;padding:.15em .8em;border-radius:999px;background:var(--green-dark);color:var(--white);font-size:var(--fs-small);font-weight:800}.question-text{font-size:var(--fs-question);font-weight:800;line-height:1.45;letter-spacing:-.02em}.question-card.is-compact .question-text{font-size:1.55rem}.answer-list{display:flex;flex-direction:column;gap:.85rem}.answer-button{display:flex;align-items:center;gap:1rem;width:100%;min-height:4.4rem;padding:.6rem 1.2rem;border:0;border-radius:var(--radius-md);background:var(--white);color:var(--text);box-shadow:inset 0 0 0 3px var(--green-soft),0 5px 0 var(--green-soft);text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;animation:rise-in .4s ease-out both}.answer-button:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px var(--green-dark),0 2px 0 var(--green-soft)}.answer-number{flex:none;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--green-dark);color:var(--white);font-size:1.45rem;font-weight:900}.answer-label{font-size:var(--fs-button);font-weight:800;line-height:1.3}.feedback-panel{display:flex;flex-direction:column;gap:.6rem;padding:1.2rem 1.6rem 1.3rem;border-radius:var(--radius-lg);background:var(--white);box-shadow:0 0 0 3px var(--fb-line),var(--shadow-md);animation:pop-in .35s ease-out both}.feedback-panel.is-good{--fb-color: var(--green-dark);--fb-bg: var(--green-light);--fb-line: var(--green-soft)}.feedback-panel.is-learn{--fb-color: var(--learn);--fb-bg: var(--learn-light);--fb-line: #f6d7b0}.feedback-head{display:flex;align-items:center;gap:.7rem}.feedback-mark{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--fb-color);color:var(--white)}.feedback-mark .btn-icon{width:1.8rem;height:1.8rem}.feedback-title{font-size:1.65rem;font-weight:900;line-height:1.3;color:var(--fb-color)}.feedback-answer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;font-size:var(--fs-body);font-weight:800}.feedback-answer-label{padding:.1em .7em;border-radius:var(--radius-sm);background:var(--fb-bg);color:var(--fb-color);font-size:var(--fs-small);font-weight:900}.feedback-explain{font-size:var(--fs-body);font-weight:600;line-height:1.5}.feedback-extra{font-size:1.25rem;font-weight:700;color:var(--text-soft)}.feedback-next{align-self:flex-end;margin-top:.2rem}.choice-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:1.6rem;align-items:center;padding:1rem 2rem}.media-card{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.2rem;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-md);animation:rise-in .4s ease-out both}.media-card img{width:min(100%,13rem,32vh);aspect-ratio:1}.media-caption{font-size:1.6rem;font-weight:900;text-align:center;line-height:1.3;letter-spacing:-.02em}.media-tag{font-size:var(--fs-small)}.choice-main{display:flex;flex-direction:column;gap:1rem;min-width:0}.choice-question{font-size:var(--fs-question);font-weight:800;line-height:1.4;letter-spacing:-.02em}.game-body,.choice-main,.result-body,.intro-howto{overflow-y:auto;overscroll-behavior:contain}.game-body{justify-content:safe center}.choice-main{max-height:100%}@media(max-height:680px){.topbar{min-height:3.6rem;padding-top:calc(.35rem + var(--safe-top));padding-bottom:.35rem}.topbar-title{font-size:1.4rem}.narration-player{min-height:4.4rem;padding-top:.4rem;padding-bottom:calc(.4rem + var(--safe-bottom))}.audio-button{min-height:3.6rem;padding:.25rem .3rem}.narration-subtitle-text{font-size:1.25rem}.game-body{gap:.75rem;padding:.6rem 1.6rem}.question-card{padding:.8rem 1.4rem .9rem}.question-label{margin-bottom:.2rem}.question-text,.choice-question{font-size:1.55rem}.ox-button{height:min(11rem,30vh)}.feedback-panel{gap:.4rem;padding:.8rem 1.3rem .9rem}.feedback-mark{width:2.5rem;height:2.5rem}.feedback-title{font-size:1.45rem}.feedback-answer,.feedback-explain{font-size:1.3rem}.feedback-next{min-height:3.6rem;font-size:1.4rem;margin-top:0}.choice-layout{gap:1.2rem;padding:.6rem 1.6rem}.choice-main{gap:.7rem}.media-card{gap:.4rem;padding:.8rem}.media-card img{width:min(100%,10rem,30vh)}.media-caption{font-size:1.4rem}.answer-list{gap:.6rem}.answer-button{min-height:3.8rem;padding:.45rem 1rem}.game-card-grid{gap:1rem;padding:.8rem 1.6rem}.game-card{gap:.35rem;padding:.8rem .8rem .9rem}.game-card .game-icon{aspect-ratio:16 / 8}.game-card-title{font-size:1.55rem}.game-card-desc{font-size:1.15rem}.intro-body{padding:.6rem 1.6rem}.intro-howto{gap:.6rem;padding:1rem 1.4rem}.intro-step{font-size:1.25rem}.result-card{margin:.8rem 1.6rem;padding:1rem 1.6rem}.result-body{gap:.5rem}.result-mascot{width:min(100%,10rem)}.result-score-value{font-size:2.5rem}.welcome-actions{margin-top:1.2rem}.welcome-start{min-height:4.2rem}}