.game-main{background:#f3f8ff}.game-shell{padding-top:22px;padding-bottom:32px}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.back-link{display:flex;align-items:center;gap:5px;width:max-content;font-size:14px;min-height:26px}.game-heading h1{font-size:58px;margin:9px 0 12px;position:relative;display:inline-block;line-height:1}.game-heading p{font-size:16px;margin:0}.title-sparks{display:block;position:absolute;right:-32px;top:-3px;width:25px;height:35px}.title-sparks i{position:absolute;background:var(--yellow);height:7px;width:17px;border-radius:4px;transform:rotate(-35deg);right:0;top:10px}.title-sparks i:first-child{transform:rotate(-75deg);top:-6px;right:13px;width:14px}.title-sparks i:last-child{transform:rotate(10deg);top:28px;right:-2px;width:14px}.level-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:27px}.level-switch{display:flex;gap:8px}.level-button{background:transparent;border:1px solid #cfdded;min-width:117px;padding:10px 15px;border-radius:12px;font-weight:850;font-size:18px;color:var(--ink);text-align:left}.level-button span{display:block;font-size:11px;line-height:1.4;font-weight:650;margin-top:1px}.level-button.active{background:var(--violet);color:#fff;border-color:var(--violet)}.level-button:not(.active):hover{background:#e9e6fa}.level-row>p{font-size:13px;margin:0;text-align:right}.laboratory{position:relative;background:linear-gradient(180deg,#f3f8ff 0%,#e4effd 76%,#eaf2fd 100%);margin-top:10px;padding:14px 40px 18px;border-radius:0 0 16px 16px;overflow:hidden}.flask-row{display:flex;justify-content:center;gap:clamp(25px,6vw,95px);align-items:start;position:relative}.flask-slot{position:relative;width:190px;flex-shrink:1;text-align:center}.flask-button{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:0 0 8px;border:0;background:transparent;color:var(--ink);border-radius:12px;transition:transform .25s var(--ease)}.flask-button:disabled{cursor:default}.flask{width:178px;height:196px;max-width:100%;filter:drop-shadow(0 9px 9px #bfd2e536);transform-box:border-box;transition:none}.flask-number{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}.flask-name{font-size:17px;font-weight:850;color:var(--violet);line-height:1.4;margin-top:3px;min-height:24px}.flask-plus{position:absolute;top:117px;left:calc(50% - 17px);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-size:26px;line-height:1;color:var(--violet);background:#ffffffe6}.flask-button.filled .flask-plus{display:none}.flask-button.filled .flask-name{color:var(--ink)}.liquid-group{opacity:0;transform:translateY(30px);transform-box:fill-box;transform-origin:50% 100%;transition:opacity .2s,transform .2s var(--ease)}.flask-button.filled .liquid-group{opacity:1;transform:translateY(0)}.flask-liquid{fill:var(--liquid,#dde6f3);opacity:.88}.liquid-surface{fill:var(--liquid,#dde6f3);filter:brightness(1.13)}.liquid-shade{fill:var(--liquid,#dde6f3);filter:brightness(.94);opacity:.45}.empty-flask{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:44px;text-decoration:underline;text-underline-offset:3px;padding:5px;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap}.empty-flask:hover{color:var(--violet)}.mix-area{display:flex;justify-content:center;align-items:center;gap:55px;margin-top:22px;min-height:204px;padding-bottom:22px}.bowl-area{position:relative;flex:0 1 350px;min-width:0;align-self:center}.bowl{width:350px;height:auto}.bowl-placeholder{position:absolute;left:20%;right:20%;top:42%;font-size:14px;line-height:1.45;text-align:center;margin:0;color:var(--muted)}.result-liquid{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transition:opacity .2s;fill:var(--result-color,#d5ddee)}.laboratory.guessing .result-liquid,.laboratory.revealed .result-liquid{opacity:.94}.result-surface{filter:brightness(1.13)}.reveal-button{position:absolute;top:38%;left:calc(50% - 40px);width:80px;height:80px;border:0;border-radius:50%;background:var(--yellow);color:#302758;font-weight:900;font-size:60px;line-height:1;box-shadow:0 8px 15px #7e8b9e2b;transition:transform .25s var(--ease)}.answer{position:absolute;top:82%;left:-15%;right:-15%;text-align:center}.answer strong{display:block;font-size:28px;line-height:1.15;font-weight:900}.answer>span{font-size:15px;display:block;color:#435170;line-height:1.4;margin-top:4px}.mix-controls{width:240px;flex-shrink:0}.mix-controls p{font-size:14px;line-height:1.45;min-height:42px;margin-bottom:13px}.mix-controls .button{width:100%;min-height:49px;font-size:15px;padding:11px 15px}.reset-button{border:1px solid #bfcfe5;background:#f4f8ff;color:#3b4864;margin-top:9px}.reset-button:hover:not(:disabled){background:#e6eefa}.reset-button:disabled{background:#e9eef6;border-color:#d9e2ef;color:#8995aa;cursor:default}.game-steps{list-style:none;display:flex;justify-content:center;gap:40px;padding:19px 20px;margin:0;background:#fff;border-radius:16px;position:relative}.game-steps li{display:flex;gap:11px;align-items:center;font-size:13px;color:#45516a;line-height:1.5}.game-steps li>span{display:flex;justify-content:center;align-items:center;flex-shrink:0;font-weight:900;font-size:15px;background:#e6e1fb;color:#5b45c0;border-radius:50%;width:29px;height:29px}.game-steps b{display:contents}.result-sentence{font-size:20px;font-weight:800;text-align:center;margin:23px 0 0;color:var(--violet)}.lesson-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:60px 80px;border-top:1px solid #dbe5f2}.lesson-section h2{font-size:36px;line-height:1.2;margin-bottom:20px}.lesson-section p{font-size:16px;max-width:460px}.example-phrase{color:var(--violet);font-size:22px!important;font-weight:800}.lesson-details details{padding:17px 0;border-bottom:1px solid #d4dfed}.lesson-details details:first-child{padding-top:0}.lesson-details summary{cursor:pointer;font-size:16px;font-weight:800;line-height:1.4;list-style:none;display:flex;justify-content:space-between;gap:20px}.lesson-details summary:after{content:"+";color:var(--violet);font-size:24px;line-height:1}.lesson-details details[open] summary:after{content:"−"}.lesson-details details p{font-size:14px;margin:15px 0 0}.vocabulary-list{display:grid;gap:10px;margin-top:20px;font-size:14px}.vocabulary-list>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vocabulary-list i{width:19px;height:19px;border-radius:50%;background:var(--swatch);border:1px solid #d2dbe9;flex-shrink:0}.palette-dialog{border:0;border-radius:20px;background:#fff;color:var(--ink);padding:28px;width:min(630px,calc(100% - 28px));max-height:83svh;box-shadow:0 25px 90px #1d264c40}.palette-dialog::backdrop{background:#20284055;backdrop-filter:blur(5px)}.palette-header{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:20px}.palette-header h2{font-size:26px;margin-bottom:5px}.palette-header p{font-size:13px;margin:0}.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.palette-color{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:126px;background:#f5f8ff;border:2px solid transparent;border-radius:12px;color:var(--ink);padding:12px 5px}.palette-color:hover{background:#ede9ff}.palette-color[aria-pressed="true"]{border-color:var(--violet);background:#ede9ff}.palette-swatch{display:block;width:49px;height:49px;background:var(--swatch);border-radius:50%;border:1px solid #93a4b933;box-shadow:inset 0 4px 7px #ffffff44}.palette-color strong{font-size:14px;font-weight:850;line-height:1.3;margin-top:4px}.palette-color small{font-size:11px;color:#53617a;line-height:1.3}.game-shell:fullscreen{overflow:auto;width:100%;max-width:none;background:#f3f8ff;padding:24px max(24px,calc((100% - 1100px)/2));}.game-shell:fullscreen .laboratory{margin-top:25px}.game-shell:fullscreen .game-heading h1{font-size:64px}.game-shell:fullscreen .flask{width:220px;height:244px}.game-shell:fullscreen .flask-slot{width:230px}.game-shell:fullscreen .flask-plus{top:151px}
@media(max-width:900px){.level-row{flex-wrap:wrap;gap:12px}.level-row>p{text-align:left}.laboratory{padding-inline:20px}.flask-row{gap:35px}.mix-area{gap:30px}.game-steps{gap:20px}.lesson-section{gap:40px}}
@media(max-width:600px){.game-shell{padding-top:7px}.game-heading h1{font-size:43px}.game-heading p{font-size:14px;max-width:285px}.game-heading .icon-button{width:41px;height:41px;align-self:start;margin-top:37px}.level-row{margin-top:16px;gap:8px}.level-switch{width:100%;gap:6px}.level-button{min-width:0;flex:1;padding:8px 6px;text-align:center;font-size:17px}.level-button span{font-size:9px;white-space:normal}.level-row>p{font-size:12px}.laboratory{padding:10px 5px 18px;margin-top:5px}.flask-row{gap:3px}.flask-slot{width:33.333%}.flask{width:116px;height:132px}.flask-plus{top:73px;left:calc(50% - 12px);width:24px;height:24px;font-size:20px}.flask-number{font-size:10px}.flask-name{font-size:12px;min-height:34px;max-width:100px}.empty-flask{font-size:12px;padding:4px;min-height:44px}.mix-area{flex-direction:column;gap:21px;padding-bottom:4px;margin-top:26px}.bowl-area{flex:auto;width:270px;max-width:100%}.bowl{width:270px}.bowl-placeholder{font-size:12px;top:44%}.reveal-button{width:65px;height:65px;left:calc(50% - 32.5px);font-size:46px;top:37%}.answer{top:87%}.answer strong{font-size:25px}.answer>span{font-size:14px}.mix-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;width:100%;padding:0 12px}.mix-controls p{grid-column:1/-1;text-align:center;min-height:20px;font-size:12px;margin:8px 0 0}.mix-controls p br{display:none}.mix-controls .button{font-size:13px;padding:10px 8px;gap:7px;min-height:45px}.reset-button{margin:0}.mix-controls .button svg{width:18px;height:18px}.game-steps{display:grid;gap:12px;padding:18px 20px}.game-steps li{font-size:12px}.game-steps li>span{width:25px;height:25px;font-size:13px}.result-sentence{font-size:17px;padding-inline:15px}.lesson-section{grid-template-columns:1fr;gap:25px;padding-block:35px}.lesson-section h2{font-size:30px}.palette-dialog{padding:20px 16px}.palette-grid{grid-template-columns:repeat(3,1fr);gap:8px}.palette-color{min-height:110px;padding:9px 3px}.palette-color strong{font-size:12px}.palette-color small{font-size:10px}.palette-swatch{width:42px;height:42px}.palette-header h2{font-size:22px}.game-shell:fullscreen{padding:15px}.game-shell:fullscreen .flask{width:116px;height:132px}.game-shell:fullscreen .flask-slot{width:33.333%}.game-shell:fullscreen .flask-plus{top:73px}.game-shell:fullscreen .game-heading h1{font-size:43px}}

/* One bounded laboratory sequence; effects never intercept classroom controls. */
.laboratory{--ease-in-out:cubic-bezier(.77,0,.175,1)}
.pour-effects{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.flask-slot.is-pouring{z-index:5}.flask-button.is-pouring .flask-number,.flask-button.is-pouring .flask-name,.flask-slot.is-pouring .empty-flask{opacity:0}
.flask-button .flask-name,.flask-button .flask-number,.empty-flask{transition:opacity .16s var(--ease)}
.flask-slot.is-pouring .flask>ellipse:first-child{opacity:0}
.laboratory.mixing .bowl-placeholder{display:none}
.laboratory.mixing.has-paint .result-liquid{opacity:.94}
.game-page .primary:hover:not(:disabled){transform:none}
@media(hover:hover) and (pointer:fine){.flask-button:hover:not(:disabled){transform:translateY(-5px)}.reveal-button:hover{transform:scale(1.07)}.game-page .primary:hover:not(:disabled){transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.pour-effects{display:none}.flask-button:hover:not(:disabled),.reveal-button:hover,.game-page .primary:hover:not(:disabled){transform:none}}

/* Children can see which glass they can fill; paint colours remain hidden in the bowl. */
.flask-button{isolation:isolate;transition:transform 160ms var(--ease)}
.flask-button::before{content:"";position:absolute;z-index:-1;top:22%;left:8%;right:8%;height:52%;border-radius:50%;background:color-mix(in srgb,var(--violet) 14%,transparent);opacity:0;transition:opacity 160ms ease}
.flask-highlight{stroke:var(--violet);opacity:0;pointer-events:none}
.flask-glass{stroke:#829fc4;stroke-width:2.5}
.flask-button.filled::before{background:color-mix(in srgb,var(--liquid) 25%,transparent);opacity:1}
.flask-button.filled .flask-highlight{stroke:color-mix(in srgb,var(--liquid) 70%,var(--ink));opacity:.8}
.flask-plus{background:var(--yellow);color:var(--ink);font-weight:850;width:44px;height:44px;left:calc(50% - 22px);top:111px;font-size:32px}
.flask-button[aria-expanded=true]::before{opacity:1}.flask-button[aria-expanded=true] .flask-highlight{stroke:var(--violet);opacity:1}
.flask-button:active:not(:disabled){transform:scale(.97)}
.flask-button:focus-visible{outline:3px solid var(--violet-deep);outline-offset:4px;transform:none;transition:none}.flask-button:focus-visible .flask-highlight{opacity:1}
@media(hover:hover) and (pointer:fine){.flask-button:hover:not(:disabled)::before{opacity:1}.flask-button:hover:not(:disabled) .flask-highlight{stroke:var(--violet);opacity:1}.flask-button:hover:not(:disabled){transform:translateY(-5px)}.flask-button:hover:active:not(:disabled){transform:translateY(-2px) scale(.97)}}
@media(max-width:600px){.flask-plus{width:30px;height:30px;left:calc(50% - 15px);top:70px;font-size:24px}}
@media(prefers-reduced-motion:reduce){.flask-button,.flask-button::before{transition:none}.flask-button:hover:not(:disabled),.flask-button:active:not(:disabled){transform:none}}