:root{--ink:#30323a;--muted:#70727b;--line:#eadfe4;--paper:#fffdfb;--aqua:#cef4f8;--aqua-strong:#55b9c7;--rose:#fed3d9;--rose-strong:#d66d86;--amber:#fdf0d7;--amber-strong:#d5a642;--green:#c5ebd5;--green-strong:#4da875;--violet:#d1cceb;--violet-strong:#8177bd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(145deg,#fff8f7 0%,#f7fcfc 48%,#fffaf0 100%);color:var(--ink);font-family:"Source Sans 3",sans-serif;margin:0;min-height:100vh}button,input,select{font:inherit}button,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
.topbar{align-items:center;background:rgba(255,253,251,.94);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:12px clamp(18px,4vw,52px);position:relative;z-index:20}.brand{align-items:center;color:inherit;display:flex;gap:11px;text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font:900 21px/1 Nunito,sans-serif}.brand small{color:var(--muted);font-size:11px;margin-top:3px}.back-link{background:var(--amber);border:1px solid #eadbbd;border-radius:999px;color:var(--ink);font:900 13px Nunito,sans-serif;padding:9px 15px;text-decoration:none}
main{padding:42px clamp(14px,4vw,52px) 58px}.hero{margin:0 auto 25px;max-width:1050px;text-align:center}.eyebrow,.modal-kicker,.panel-kicker{color:#8a6924;font:900 12px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase}.hero h1{font:900 clamp(34px,5vw,61px)/1.05 Nunito,sans-serif;letter-spacing:-.035em;margin:8px 0 13px}.hero h1 em{color:var(--rose-strong);font-style:normal}.hero>p{color:var(--muted);font-size:clamp(16px,2vw,20px);margin:0 auto;max-width:760px}.hero-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}.hero-pills span{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:999px;font:800 13px Nunito,sans-serif;padding:7px 12px}
.game-shell{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:25px;box-shadow:0 24px 65px rgba(66,52,60,.12);margin:0 auto;max-width:1120px;overflow:hidden;position:relative}.toolbar{align-items:center;background:rgba(255,255,255,.97);display:flex;gap:18px;justify-content:space-between;padding:13px 17px}.stats{display:flex;flex-wrap:wrap;gap:8px}.stats span{background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--muted);font:900 9px Nunito,sans-serif;letter-spacing:.08em;min-width:72px;padding:7px 10px}.stats strong{color:var(--ink);display:block;font-size:17px;letter-spacing:0;margin-top:1px}.tools{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.tools button{background:#fff;border:1px solid var(--line);border-radius:11px;color:var(--ink);font:900 12px Nunito,sans-serif;padding:9px 11px}.tools button:hover{background:var(--aqua);border-color:#acdce2}.round-progress{background:#f1ecee;height:5px}.round-progress span{background:linear-gradient(90deg,var(--aqua-strong),var(--violet-strong),var(--rose-strong));display:block;height:100%;transition:width .35s ease;width:0}
.play-area{background:linear-gradient(145deg,rgba(206,244,248,.34),rgba(255,255,255,.9),rgba(253,240,215,.46));display:grid;gap:20px;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);min-height:590px;padding:22px}.puzzle-card,.question-card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:21px;box-shadow:0 12px 28px rgba(62,57,62,.07);padding:17px}.panel-heading{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:13px}.panel-heading h2{font:900 22px/1.15 Nunito,sans-serif;margin:3px 0 0}.scene-badge{background:var(--amber);border-radius:999px;color:#785b1d;font:800 12px Nunito,sans-serif;padding:7px 10px}.puzzle-frame{aspect-ratio:1;background-color:#e7f2f3;background-position:center;background-size:cover;border:5px solid #fff;border-radius:18px;box-shadow:0 12px 30px rgba(42,51,57,.2);margin:auto;max-height:500px;max-width:500px;overflow:hidden;position:relative;width:100%}.puzzle-covers{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);inset:0;position:absolute}.puzzle-piece{align-items:center;background:linear-gradient(145deg,#444753,#2f323b);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.58);display:flex;font:900 clamp(18px,3vw,29px) Nunito,sans-serif;justify-content:center;position:relative;transition:opacity .52s ease,transform .52s ease}.puzzle-piece::after{background:radial-gradient(circle at 35% 28%,rgba(206,244,248,.23),transparent 42%);content:"";inset:0;position:absolute}.puzzle-piece.revealed{opacity:0;pointer-events:none;transform:scale(.55) rotate(8deg)}.bonus-burst{background:linear-gradient(135deg,#fff3bd,#fed3d9);border:2px solid #fff;border-radius:999px;box-shadow:0 10px 28px rgba(65,51,38,.22);color:#78521d;font:900 15px Nunito,sans-serif;left:50%;opacity:0;padding:10px 17px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.7);z-index:4}.bonus-burst.show{animation:bonusPop 1s ease}@keyframes bonusPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.question-card{align-self:center;padding:clamp(22px,3vw,34px)}.question-card h2{font:900 clamp(24px,3vw,34px)/1.12 Nunito,sans-serif;margin:7px 0 18px}.operation{align-items:center;background:linear-gradient(135deg,var(--aqua),#fff,var(--amber));border:2px solid #fff;border-radius:19px;box-shadow:0 8px 20px rgba(71,119,126,.13);display:flex;font:900 clamp(35px,5vw,53px)/1 Nunito,sans-serif;justify-content:center;min-height:112px;padding:20px;text-align:center}.choices{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:18px}.choice{background:#fff;border:2px solid var(--line);border-radius:15px;color:var(--ink);font:900 22px Nunito,sans-serif;min-height:58px;padding:10px;transition:.17s ease}.choice:hover:not(:disabled){border-color:var(--aqua-strong);transform:translateY(-2px)}.choice.correct{background:#e3f6e9;border-color:var(--green-strong);color:#21613e}.choice.wrong{animation:shake .34s ease;background:#fff0f2;border-color:var(--rose-strong);color:#8f3048}.choice:disabled{cursor:default}.feedback{border-radius:13px;color:var(--muted);font-weight:700;line-height:1.35;margin:15px 0 0;min-height:48px;padding:9px 11px}.feedback.good{background:#e8f7ed;color:#286744}.feedback.hint{background:#fff4dc;color:#775817}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.layer{align-items:center;background:rgba(255,250,248,.98);display:none;inset:0;justify-content:center;overflow-y:auto;padding:22px;position:absolute;z-index:30}.layer.show{display:flex}.modal{background:#fffaf8;border:1px solid #fff;border-radius:25px;box-shadow:0 28px 80px rgba(26,27,32,.28);max-width:710px;padding:29px;text-align:center;width:100%}.modal h2{font:900 clamp(27px,4vw,38px)/1.12 Nunito,sans-serif;margin:6px 0 8px}.modal>p{color:var(--muted);font-size:16px;line-height:1.45;margin:0 auto 17px;max-width:570px}.choice-set{border:0;margin:13px 0 0;padding:0;text-align:left}.choice-set legend,.scene-select>span{color:var(--muted);font:900 12px Nunito,sans-serif;letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase}.segmented{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.segmented label{cursor:pointer;position:relative}.segmented input{height:1px;opacity:0;position:absolute;width:1px}.segmented label>span{align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 11px;text-align:center;transition:.18s ease}.segmented b{font:900 15px Nunito,sans-serif}.segmented small{color:var(--muted);font-size:12px;line-height:1.2;margin-top:2px}.segmented input:checked+span{background:linear-gradient(135deg,var(--aqua),#fff,var(--amber));border-color:#93cdd5;box-shadow:0 5px 14px rgba(64,150,162,.13)}.segmented input:focus-visible+span{outline:4px solid rgba(85,185,199,.3)}.scene-select{display:block;margin-top:15px;text-align:left}.scene-select>span{display:block}.scene-select select{background:#fff;border:1px solid var(--line);border-radius:13px;color:var(--ink);font-weight:700;padding:11px 12px;width:100%}.primary-action,.secondary-action{border:0;border-radius:13px;font:900 15px Nunito,sans-serif;padding:12px 19px}.primary-action{background:linear-gradient(135deg,#bfeaf0,#f6e7c9);color:#24484d}.setup-modal>.primary-action{margin-top:17px;width:100%}.secondary-action{background:#fff;border:1px solid var(--line);color:var(--ink)}.finish-preview{background-position:center;background-size:cover;border:5px solid #fff;border-radius:18px;box-shadow:0 10px 28px rgba(42,51,57,.2);height:190px;margin:0 auto 14px;max-width:360px}.final-stats{display:flex;gap:8px;justify-content:center;margin:17px 0}.final-stats span{background:#fff;border:1px solid var(--line);border-radius:13px;min-width:96px;padding:9px 13px}.final-stats b{display:block;font:900 21px Nunito,sans-serif}.final-stats small{color:var(--muted)}.finish-actions{display:flex;gap:9px;justify-content:center}
.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}main>.teacher-guide{max-width:1120px}footer{border-top:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;font-size:13px;gap:14px 22px;justify-content:center;padding:17px}footer a{color:inherit;text-decoration:none}
.game-shell:fullscreen,.game-shell:-webkit-full-screen{background:#fffdfb;border:0;border-radius:0;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:none;overflow:hidden}.game-shell:fullscreen .toolbar,.game-shell:fullscreen .round-progress,.game-shell:-webkit-full-screen .toolbar,.game-shell:-webkit-full-screen .round-progress{flex:0 0 auto}.game-shell:fullscreen .play-area,.game-shell:-webkit-full-screen .play-area{align-items:center;flex:1 1 auto;min-height:0;overflow:auto}.game-shell:fullscreen .puzzle-frame,.game-shell:-webkit-full-screen .puzzle-frame{max-height:min(67vh,620px);max-width:min(67vh,620px)}
@media(max-width:820px){main{padding:28px 10px 40px}.play-area{grid-template-columns:1fr}.puzzle-frame{max-height:440px;max-width:440px}.toolbar{align-items:stretch;flex-direction:column}.tools,.stats{justify-content:center}.stats span{flex:1;max-width:112px}.game-shell:fullscreen .play-area,.game-shell:-webkit-full-screen .play-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);padding:12px}.game-shell:fullscreen .puzzle-frame,.game-shell:-webkit-full-screen .puzzle-frame{max-height:min(60vh,500px);max-width:min(60vh,500px)}}
@media(max-width:620px){.brand small{display:none}.back-link{font-size:12px;padding:8px 11px}.hero h1{font-size:35px}.game-shell{border-radius:19px}.stats{display:grid;grid-template-columns:repeat(4,1fr)}.stats span{min-width:0;padding:7px 6px}.stats strong{font-size:15px}.tools button{flex:1;padding:8px 5px}.play-area{gap:12px;min-height:0;padding:12px}.puzzle-card,.question-card{padding:12px}.puzzle-frame{max-height:none}.operation{min-height:88px}.segmented{gap:6px}.segmented label>span{min-height:61px;padding:8px 6px}.segmented b{font-size:13px}.segmented small{font-size:10px}.modal{padding:22px 15px}.final-stats span{min-width:0;padding:8px}.finish-actions{flex-direction:column}.game-shell:fullscreen .toolbar,.game-shell:-webkit-full-screen .toolbar{padding:7px}.game-shell:fullscreen .play-area,.game-shell:-webkit-full-screen .play-area{display:flex;flex-direction:column;overflow:auto}.game-shell:fullscreen .puzzle-card,.game-shell:-webkit-full-screen .puzzle-card{width:100%}.game-shell:fullscreen .puzzle-frame,.game-shell:-webkit-full-screen .puzzle-frame{max-height:none;max-width:min(52vh,100%)}.game-shell:fullscreen .question-card,.game-shell:-webkit-full-screen .question-card{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (min-width:621px) and (max-width:820px) and (orientation:portrait){.game-shell:fullscreen .play-area,.game-shell:-webkit-full-screen .play-area{display:flex;flex-direction:column;overflow:auto}.game-shell:fullscreen .puzzle-card,.game-shell:-webkit-full-screen .puzzle-card,.game-shell:fullscreen .question-card,.game-shell:-webkit-full-screen .question-card{width:100%}.game-shell:fullscreen .puzzle-frame,.game-shell:-webkit-full-screen .puzzle-frame{max-height:none;max-width:min(48vh,440px)}}