@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#142332;background:#101c29;font-synthesis:none;--lime:#cbf36a;--muted:#64717d;--line:#dfe5e8;--ink:#142332;--paper:#f8fafb;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #527819;outline-offset:4px}a{color:inherit}button{touch-action:manipulation}.app-shell{max-width:1000px;margin:auto;padding:32px 36px 18px;padding-top:max(32px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.topbar{display:flex;justify-content:space-between;align-items:center;color:#f8fafb;margin-bottom:34px}.brand{font-size:1.3125rem;font-weight:800;letter-spacing:.16em;display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{display:inline-grid;place-items:center;color:var(--ink);background:var(--lime);width:35px;height:35px;border-radius:10px;font-size:2.0rem;line-height:1;letter-spacing:0}.game-label{font-size:0.75rem;letter-spacing:.16em;font-weight:700;color:#a9b5bf}.game{border-radius:25px;background:var(--paper);padding:28px;overflow:hidden}.status{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.question-number{font-size:1.875rem;font-weight:800;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.question-number small{color:var(--muted);font-size:1.0rem;letter-spacing:0;font-weight:500}.score{display:flex;align-items:center;gap:9px;font-size:0.875rem;color:#3f505e}.score strong{font-size:1.0rem;color:var(--ink)}.score-icon{color:#427c36;font-size:1.125rem}.progress{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;margin-bottom:32px}.progress span{height:5px;border-radius:5px;background:#e0e5e8}.progress .current{background:#182d40}.progress .right{background:#89b63e}.progress .wrong{background:#dc8272}.play-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:32px;align-items:start}.map-card{position:relative;border:1px solid var(--line);border-radius:18px;min-height:360px;background-color:#fff;background-image:radial-gradient(#ced8de 0.65px,transparent .65px);background-size:19px 19px;display:flex;align-items:center;justify-content:center;padding:50px 24px 38px;overflow:hidden}.map-meta{position:absolute;left:20px;top:19px;font-size:0.75rem;letter-spacing:.12em;color:#647481;font-weight:700}.north{position:absolute;right:20px;top:15px;display:flex;flex-direction:column;align-items:center;font-size:0.75rem;color:#647481;gap:1px}.north span{font-size:1.5rem;font-weight:400;line-height:1}.map-shape{width:100%;height:270px;overflow:visible;filter:drop-shadow(0 3px 1px #14233208)}.map-shape path{fill:#fff;fill-opacity:0;stroke:var(--ink);stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.map-note{position:absolute;left:20px;right:20px;bottom:12px;font-size:0.75rem;text-align:center;color:var(--muted);line-height:1.5}.phase{display:inline-flex;align-items:center;gap:7px;font-size:0.75rem;letter-spacing:.08em;font-weight:800;background:#e9efde;color:#426019;padding:7px 10px;border-radius:6px}.phase.text-phase{background:#e6edf5;color:#375571}h1{margin:15px 0 8px;font-size:1.875rem;line-height:1.2;letter-spacing:-.045em;font-weight:800}.instruction{margin:0 0 24px;font-size:1.0rem;color:var(--muted);line-height:1.6}.choices{display:grid;gap:9px}.choice{display:flex;align-items:center;gap:12px;text-align:left;min-height:53px;width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);padding:10px 14px;font-size:1.0rem;font-weight:650;transition:border-color .15s,background .15s,transform .15s}.choice:not(:disabled):hover{border-color:#91b44f;background:#f4f9e9;transform:translateX(2px)}.letter{width:27px;height:27px;border:1px solid #dce2e6;border-radius:7px;display:grid;place-items:center;font-size:0.75rem;font-weight:700;color:var(--muted);flex-shrink:0}.choice.selected-correct{border-color:#679a32;background:#f0f8e3}.choice.selected-wrong{border-color:#c7796b;background:#fff0ed}.choice.selected-correct .letter{background:#d3edaa;color:#315717;border-color:transparent}.choice.selected-wrong .letter{background:#f6cfc7;color:#7d302a;border-color:transparent}.choice:disabled:not(.selected-wrong):not(.selected-correct){opacity:.6}.text-label{display:block;font-weight:700;font-size:0.875rem;margin-bottom:9px}.answer-input{width:100%;min-height:56px;border:1.5px solid #becad2;border-radius:11px;padding:14px;background:white;color:var(--ink);font-size:1.0625rem;outline-offset:2px}.answer-input::placeholder{color:#89949d}.answer-input:disabled{opacity:1;color:#475966;background:#eef2f4}.answer-input.invalid{border-color:#bb594a}.input-hint{font-size:0.8125rem;color:var(--muted);margin:9px 0 20px;line-height:1.5}.primary{width:100%;border:0;border-radius:11px;background:var(--lime);color:#1c3013;min-height:53px;font-size:1.0rem;font-weight:800;padding:14px 18px;transition:background .15s,transform .15s}.primary:hover{background:#bae74f}.primary:active{transform:scale(.99)}.primary:disabled{background:#e5ebdf;color:#819078}.secondary{display:block;margin:14px auto 0;padding:7px 12px;border:0;background:none;color:#697781;font-size:0.875rem}.secondary:hover{color:var(--ink)}.feedback{margin-top:15px;padding:13px 15px;border-radius:11px;background:#eff7e4;line-height:1.5;font-size:0.875rem;border:1px solid #dce9c8}.feedback.wrong{background:#fff0ed;border-color:#f0d6cf}.feedback strong{display:block;font-size:1.0rem;margin-bottom:2px}.feedback + .primary{margin-top:12px}.stages{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:0.8125rem}.stages span{display:flex;align-items:center;gap:8px}.stages b{font-weight:700;color:#495b68}.stages i{width:19px;height:19px;display:inline-grid;place-items:center;background:#e8eedf;border-radius:5px;font-size:0.75rem;font-style:normal;color:#49672c}.stages span:last-child i{background:#e6edf5;color:#375571}.footer{color:#95a4b0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:0.75rem;margin-top:20px;padding:0 6px;line-height:1.6}.footer a{color:inherit;text-decoration:none}.footer a:hover{text-decoration:underline}.loading{color:white;min-height:400px;display:grid;place-content:center;text-align:center;justify-items:center}.results{padding:36px;max-width:740px;margin:auto;background:var(--paper);border-radius:24px}.result-top{text-align:center}.result-top .phase{margin-bottom:12px}.result-total{font-size:6.25rem;line-height:1.1;font-weight:800;letter-spacing:-.07em;margin-top:15px}.result-total span{font-size:1.875rem;color:var(--muted);font-weight:500;letter-spacing:-.04em}.result-top h1{font-size:1.875rem}.result-top p{color:var(--muted);line-height:1.7;font-size:1.0rem}.result-track{height:8px;border-radius:5px;background:#e2e8dd;margin:26px auto;width:180px;overflow:hidden}.result-track span{height:100%;display:block;background:#7fa735}.result-top .primary{max-width:330px;margin-bottom:28px}.review{border-top:1px solid var(--line);padding-top:18px}.review summary{cursor:pointer;font-size:1.0rem;font-weight:700;padding:5px 0 15px}.review-list{list-style:none;padding:0;margin:0}.review-item{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:13px 0}.review-number{font-size:0.75rem;color:var(--muted);width:22px;flex-shrink:0}.review-map{width:44px;height:38px;flex-shrink:0}.review-map path{fill:none;stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke}.review-copy{flex:1;min-width:0;font-size:0.9375rem;font-weight:700;overflow-wrap:anywhere}.review-copy small{display:block;font-size:0.8125rem;line-height:1.5;color:var(--muted);font-weight:500}.review-status{color:#4c7b25;font-size:1.25rem}.review-status.wrong{color:#b75b4b}.error-panel{padding:40px 20px;background:white;border-radius:20px;text-align:center}.error-panel .primary{max-width:280px}.transition-notice{margin:0 0 16px;padding:12px;border:1px solid #cbd8e5;background:#edf3f9;border-radius:10px;color:#3d5870;font-size:0.875rem;line-height:1.6}
@media(min-width:760px){.app-shell{padding-top:50px}.game{padding:30px 32px}.answer-panel{padding-top:3px}}
@media(max-width:700px){.app-shell{padding:18px 16px 15px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(15px,env(safe-area-inset-bottom))}.topbar{margin-bottom:20px}.brand{font-size:1.125rem;gap:9px}.brand-mark{width:31px;height:31px;font-size:1.8125rem}.game-label{font-size:0.75rem;letter-spacing:.12em}.game{padding:19px 18px;border-radius:20px}.status{margin-bottom:13px}.question-number{font-size:1.625rem}.progress{margin-bottom:20px;gap:3px}.progress span{height:4px}.play-grid{grid-template-columns:1fr;gap:22px}.map-card{min-height:245px;height:clamp(220px,34vh,320px);padding:32px 34px 25px;border-radius:13px}.map-shape{height:100%}.map-meta{left:15px;top:13px;font-size:0.75rem}.north{right:15px;top:10px;font-size:0.75rem}.north span{font-size:1.3125rem}.map-note{font-size:0.75rem;bottom:8px;left:10px;right:10px}.phase{font-size:0.75rem;padding:6px 8px}h1{font-size:1.6875rem;margin:11px 0 6px}.instruction{font-size:1.0rem;margin-bottom:16px}.choices{grid-template-columns:1fr 1fr;gap:8px}.choice{font-size:0.875rem;min-height:57px;gap:8px;padding:9px;overflow-wrap:anywhere}.letter{width:24px;height:24px;font-size:0.75rem;border-radius:6px}.stages{font-size:0.75rem;gap:12px;margin-top:21px;padding-top:14px}.stages i{width:16px;height:16px}.footer{font-size:0.75rem;margin-top:15px;padding:0 2px}.results{padding:25px 21px}.result-total{font-size:5.625rem}.result-top h1{font-size:1.6875rem}.result-top p{font-size:0.9375rem}.feedback{font-size:0.875rem}.feedback strong{font-size:0.9375rem}}
@media(max-width:340px){.app-shell{padding-inline:10px}.game{padding-inline:13px}.choice{font-size:0.8125rem}.game-label{display:none}.stages{gap:8px;font-size:0.75rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.topbar{flex-wrap:wrap;gap:12px}.choice{min-width:0}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:701px){.choices{grid-template-columns:1fr}}

.hint-area{margin:0 0 14px}.hint-panel{border:1px solid var(--line);border-radius:11px;background:#fff;padding:14px 12px 12px;margin-bottom:10px}.hint-mask{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:6px;min-height:32px}.hint-slot{width:26px;height:32px;display:grid;place-items:center;border-bottom:2px solid #c3cfd7;font-size:1.125rem;font-weight:800;color:var(--ink);line-height:1}.hint-slot.filled{border-bottom-color:#89b63e;background:#f4f9e9;border-radius:6px 6px 0 0}.hint-gap{width:14px;height:32px}.hint-punct{align-self:flex-end;color:var(--muted);font-weight:700;line-height:1.6}.hint-count{margin:12px 0 0;text-align:center;font-size:0.8125rem;color:var(--muted);line-height:1.5}.hint-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:0.9375rem;font-weight:700;padding:10px 14px;transition:border-color .15s,background .15s}.hint-button:not(:disabled):hover{border-color:#91b44f;background:#f4f9e9}.hint-button:disabled{opacity:.55;color:var(--muted)}.hint-icon{font-size:1.0625rem;line-height:1}
@media(max-width:700px){.hint-mask{gap:4px}.hint-slot{width:21px;height:29px;font-size:1.0rem}.hint-gap{width:10px;height:29px}.hint-panel{padding:12px 10px 10px}.hint-button{min-height:46px;font-size:0.875rem}}
@media(max-width:340px){.hint-mask{gap:3px}.hint-slot{width:18px;height:27px;font-size:0.9375rem}.hint-gap{width:8px;height:27px}}