*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#10233d}
body{display:grid;place-items:center;overflow:hidden;font-family:Arial,sans-serif;color:#fff}
[hidden]{display:none!important}
#game{position:relative;width:100vw;height:100vh;overflow:hidden;isolation:isolate}
@supports(height:100dvh){#game{height:100dvh}}
@media(orientation:portrait){#game{height:56.25vw}}
.landing-art{position:absolute;inset:0;width:100%;height:100%;display:block}
#landing-art{object-fit:cover;object-position:center 10%}
.action-area{position:absolute;left:68.75%;top:83.2%;width:26.2%;height:15.5%;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}
#next{border:0;padding:0;background:none;width:100%;height:100%;cursor:pointer;animation:next-enter 420ms cubic-bezier(.16,1,.3,1) both;transition:filter 180ms,transform 180ms}
#next img{display:block;width:100%;height:100%;object-fit:contain}
#next:hover{filter:brightness(1.06);transform:translateY(-2px)}
#next:active{transform:scale(.97)}
button:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:12px}
#loader{width:100%;max-height:100%;padding:3% 5%;border:1px solid #8ad9ff;border-radius:12px;background:linear-gradient(135deg,#10356af2,#142950f2);box-shadow:0 3px 12px #061c4d66;overflow:auto;font-size:clamp(9px,1.05vw,18px)}
.loading-heading{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:#ffe27e}
progress{display:block;width:100%;height:clamp(6px,1.1vw,16px);margin:3% 0;appearance:none;border:0;border-radius:20px;overflow:hidden;background:#071a36}
progress::-webkit-progress-bar{background:#071a36;border-radius:20px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#14c8f4,#8af5ff);border-radius:20px;transition:width 180ms linear}
progress::-moz-progress-bar{background:linear-gradient(90deg,#14c8f4,#8af5ff);border-radius:20px}
#load-status{margin:0;font-size:.8em;line-height:1.2;overflow-wrap:anywhere}
#load-retry{margin-top:4px;border:0;border-radius:6px;padding:4px 10px;background:#ffd34c;color:#10234d;font:inherit;font-weight:700;cursor:pointer}
@keyframes next-enter{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.screen{position:absolute;inset:0}
.art-button{position:absolute;padding:0;border:0;background:none;cursor:pointer;transition:transform 180ms,filter 180ms}
.art-button img{display:block;width:100%;height:auto}
.art-button:hover{filter:brightness(1.06);transform:translateY(-2px)}
.art-button:active{transform:scale(.97)}
#mixing-demo,#mixing-play{overflow:hidden;border-radius:12px}
#mixing-demo img,#mixing-play img{position:absolute;width:105.685%;height:168.75%;max-width:none;left:-2.895%;top:-32.76%}
#mixing-demo{left:18.7%;top:87.4%;width:19%;height:8.3%}
#mixing-play{left:57.7%;top:85.7%;width:25.3%;height:11%}
#demo{background:#10233d}
.demo-frame{position:absolute;inset:1% 1% 14%;display:grid;place-items:center}
#demo-slide{width:100%;height:100%;object-fit:contain;min-height:0}
.demo-controls{position:absolute;left:12%;right:12%;bottom:2%;height:10%;display:flex;align-items:center;justify-content:space-between;gap:3%;font-size:clamp(12px,2vw,30px)}
.demo-controls button{border:2px solid #eaaa27;border-radius:12px;background:linear-gradient(#ffe58b,#ffc53d);color:#092254;padding:0 5%;height:100%;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #91611e}
.demo-controls button:disabled{opacity:.45;cursor:default}
#demo-counter{white-space:nowrap;font-weight:700}
#flow-status{position:absolute;z-index:5;left:10%;right:10%;top:3%;margin:0;padding:1%;border-radius:8px;background:#10233df2;text-align:center;font-size:clamp(10px,1.5vw,22px)}
#game{container-type:inline-size}
.game-button{position:absolute;display:block;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:10px;transition:filter 160ms,transform 160ms}
.game-button img{display:block;width:100%;height:auto}
.game-button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.game-button:active{transform:scale(.97)}
.game-button:disabled{opacity:.4;cursor:default}
.text-button{border:2px solid #df9b26;border-radius:10px;background:linear-gradient(#ffe895,#ffbf37);color:#092354;padding:.5em 1.5em;font:700 clamp(10px,1.6cqw,30px) Arial;cursor:pointer}
.bottom-button{left:37%;bottom:4%;width:26%}
.lesson-name{position:absolute;left:8%;top:19%;width:39%;height:15%;display:grid;place-items:center;text-align:center;margin:0;padding:2%;background:url('../solvent-master-game-assets/page-3-b/question-panel.webp') center/100% 100% no-repeat;color:#05245a;font-size:2.5cqw}
#lesson-video{position:absolute;left:64%;top:8%;width:20.5%;height:84%;object-fit:contain;background:#091527;border-radius:3%}
.lesson-next{position:absolute;left:12%;bottom:5%;width:28%}
.mode-badge{position:absolute;left:2%;top:2%;padding:.5% 1.5%;background:#ffd65b;border:2px solid #a97222;border-radius:12px;color:#142443;font-size:1.8cqw;font-weight:900}
.round-count{position:absolute;right:6%;top:2%;padding:.5% 1%;background:#e7fbff;color:#092852;border:2px solid #0da7f6;border-radius:12px;font-size:1.8cqw;font-weight:800}
.round-timer{position:absolute;right:5%;top:1%;width:min(30%,48vh);aspect-ratio:593/110;color:#29201b;font-weight:900;font-variant-numeric:tabular-nums;container-type:inline-size}
.round-timer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.timer-track{position:absolute;left:17.4%;top:38%;width:48%;height:36%;overflow:hidden;border-radius:1cqw}
#timer-fill{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(#ffbf37,#ff9d16);border-radius:1cqw}
#timer-value{position:absolute;left:68%;top:27%;width:26%;height:55%;display:grid;place-items:center;font-size:7.5cqw;line-height:1}
.rack{position:absolute;top:11%;height:39%;width:30%}
.rack-0{left:4.5%}.rack-1{left:36%}.rack-2{left:67%}
.rack-label{position:absolute;top:0;width:100%;height:18%;object-fit:fill}
.rack-beakers{position:absolute;inset:22% 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:5% 1%}
.shelf-beaker,.flying-beaker{position:relative;border:0;padding:0;background:none;min-width:0;cursor:pointer;isolation:isolate}
.shelf-art-frame{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;aspect-ratio:1010/1060;overflow:hidden;pointer-events:none}
.shelf-art{position:absolute;left:-18.3168%;top:-4.2453%;width:136.0396%;height:108.0189%}
.shelf-art>img{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.shelf-beaker:disabled{cursor:default}.shelf-beaker.used{opacity:.25}
.shelf-beaker.used .small-liquid{height:0!important}
.shelf-beaker:not(:disabled):hover{filter:drop-shadow(0 0 5px var(--solvent))}
.small-liquid{position:absolute;left:19%;right:18%;bottom:9%;max-height:71%;border-radius:0 0 20% 20%;background:var(--solvent);opacity:.8}
.beaker-value{position:absolute;z-index:2;left:31%;right:30%;top:49%;height:26%;display:grid;place-items:center;color:#08234e;font-size:clamp(8px,1.45cqw,30px);font-weight:800;text-align:center;line-height:1;background:transparent}
.main-vessel{position:absolute;left:39.5%;top:50.5%;width:18.5%;height:32%;isolation:isolate}
.vessel-glass{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.main-liquid{--surface:0%;--impact:0px;position:absolute;left:18%;right:17%;bottom:10%;height:70%;border-radius:0 0 15% 15%;overflow:hidden;z-index:3;pointer-events:none;mix-blend-mode:multiply}
.solvent-layer{position:absolute;left:0;right:0;background:var(--liquid-color);background-image:linear-gradient(90deg,#062d4838,transparent 25%,#ffffff55 48%,transparent 75%,#062d4840);opacity:.82;box-shadow:inset 0 1px 2px #ffffff88}
.solvent-layer:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffffffa0 0 1px,transparent 2px) 0 0/17px 29px;opacity:.28;animation:solvent-bubbles 2s linear infinite}
.main-liquid:before{content:'';position:absolute;z-index:4;bottom:var(--surface);left:0;right:0;height:6%;border:1px solid #efffffcc;background:var(--surface-color);border-radius:50%;opacity:0;transform:translateY(calc(50% + var(--impact)));box-shadow:inset 0 2px 3px #ffffffaa;animation:liquid-wave 1.4s ease-in-out infinite alternate}
.main-liquid.has-liquid:before{opacity:.9}
.main-liquid:after{content:'';position:absolute;z-index:5;left:24%;width:52%;height:7%;bottom:var(--surface);border:2px solid #edffff;border-radius:50%;opacity:0;transform:translateY(50%) scale(.3);pointer-events:none}
.main-liquid.receiving:after{animation:solvent-ripple 350ms ease-out infinite}
@keyframes solvent-ripple{0%{opacity:.85;transform:translateY(50%) scale(.25)}100%{opacity:0;transform:translateY(50%) scale(1.7)}}
@keyframes solvent-bubbles{to{background-position:4px -29px}}
@keyframes liquid-wave{from{transform:translateY(calc(50% + var(--impact))) scaleX(1)}to{transform:translateY(calc(50% + var(--impact) + 1px)) scaleX(.98)}}
.mixture-total{position:absolute;left:24%;top:57%;width:15%;height:12%;display:grid;place-items:center;background:url('../solvent-master-game-assets/page-3-c/percentage-panel.webp') center/100% 100% no-repeat;color:#092852;font-size:2.8cqw;font-weight:900}
.round-name{position:absolute;left:22%;top:83%;width:56%;height:14%;margin:0;display:grid;place-items:center;text-align:center;background:url('../solvent-master-game-assets/page-3-c/question-panel.webp') center/100% 100% no-repeat;font-size:2.9cqw;color:#08204d;padding:1% 3%}
.pour-undo{left:68%;top:59%;width:5.5%}.mix-submit{left:63%;top:70%;width:16%}
.flying-beaker{position:absolute;z-index:20;transform-origin:75% 50%;pointer-events:none}
.pour-stream{position:absolute;z-index:19;border-radius:35% 35% 20% 20%;transform:translateX(-50%);transform-origin:top;background:linear-gradient(90deg,var(--liquid-color),#eaffffb0 48%,var(--liquid-color));box-shadow:0 0 3px #fff5;pointer-events:none;overflow:hidden}
.pour-stream:before{content:'';position:absolute;inset:-100% 15% 0;background:repeating-linear-gradient(0deg,transparent 0 11px,#ffffff99 13px,transparent 17px);animation:solvent-flow 240ms linear infinite}
@keyframes solvent-flow{to{transform:translateY(17px)}}
.shelf-fluid{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;clip-path:polygon(evenodd,19% 20%,82% 20%,82% 91%,19% 91%,19% 20%,29% 47%,29% 77%,71% 77%,71% 47%,29% 47%,19% 20%)}
.shelf-beaker.used .shelf-fluid{visibility:hidden}
.small-liquid{background-image:linear-gradient(90deg,#062d4838,transparent 25%,#ffffff55 48%,transparent 75%,#062d4840);box-shadow:inset 0 1px 2px #ffffff88;opacity:.82}
.small-liquid:before{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;border:1px solid #efffffcc;border-radius:50%;background:var(--solvent);box-shadow:inset 0 1px 2px #ffffffaa;animation:shelf-meniscus 1.4s ease-in-out infinite alternate}
.small-liquid:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffffffa0 0 .6px,transparent 1.3px) 0 0/8px 14px;opacity:.28;animation:shelf-bubbles 2s linear infinite}
@keyframes shelf-meniscus{to{transform:translateY(1px) scaleX(.98)}}
@keyframes shelf-bubbles{to{background-position:2px -14px}}
#feedback{position:absolute;inset:0;z-index:4;display:block}

.mastered-title{position:absolute;left:27%;top:0;width:46%;height:24%;object-fit:contain}.mastered-subtitle{position:absolute;left:33%;top:22%;width:34%}
.mastered-copy{position:absolute;left:20%;top:43%;width:60%;margin:0;text-align:center;font-size:4.8cqw;font-weight:900;color:white;-webkit-text-stroke:1px #062454;text-shadow:0 0 6px #00f2ff}
.challenge-heading{position:absolute;left:50%;top:4%;width:min(60%,110vh);aspect-ratio:2153/467;overflow:hidden;transform:translateX(-50%);animation:challenge-pulse 2.4s ease-in-out infinite}
.challenge-title{position:absolute;left:-.325%;top:-36.83%;width:100.325%;height:155.89%;max-width:none}
.challenge-summary{position:absolute;left:50%;transform:translateX(-50%);top:20%;width:min(37%,58vh);aspect-ratio:1915/821;container-type:inline-size}.challenge-summary img{display:block;width:100%;height:auto}.challenge-summary strong{position:absolute;left:41%;right:7%;top:26%;bottom:17%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:7.6cqw;color:#071c50;line-height:1.12;white-space:nowrap}
.challenge-copy{position:absolute;left:18%;top:44%;width:64%;text-align:center;color:white;font-weight:900;font-size:4.2cqw;margin:0;text-shadow:0 0 4px cyan,0 2px 2px #05214f}
.challenge-star{position:absolute;left:50%;top:67%;width:min(10%,14vh);height:auto;transform:translateX(-50%);animation:challenge-star-spin 8s linear infinite;transform-origin:center}
#challenge .bottom-button{left:50%;transform:translateX(-50%);width:min(26%,52vh)}
#challenge .bottom-button:hover{transform:translateX(-50%) translateY(-2px)}
#challenge .bottom-button:active{transform:translateX(-50%) scale(.97)}
@keyframes challenge-pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
@keyframes challenge-star-spin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
.results-title{position:absolute;left:57%;top:16%;width:27%}
#result-rows{position:absolute;left:48%;top:33%;width:45%;height:42%;display:grid;grid-template-rows:repeat(5,1fr)}
.result-row{display:flex;align-items:center;gap:2%;color:#08224f;border-bottom:1px solid #e3c87b;font-size:1.65cqw;font-weight:700;min-height:0}
.result-mark{width:11%;height:100%;object-fit:contain}.result-row>span{flex:1;min-width:0;line-height:1.15}.result-row .game-button{position:relative;width:32%;flex-shrink:0}
.results-next{left:63%;bottom:4%;width:19%}
.outcome-title{position:absolute;left:28%;top:0;width:45%;height:24%;object-fit:contain}.outcome-message{position:absolute;top:25%;left:20%;width:60%;margin:0;text-align:center;font-size:3.1cqw;font-weight:900;color:white;text-shadow:0 0 5px cyan,0 2px #071e4d}
.streak-count{position:absolute;top:36%;left:38%;width:25%;padding:1%;background:white;border:2px solid #102e62;border-radius:12px;color:#062657;font-size:3cqw;text-align:center;font-weight:900}
.streak-beakers{position:absolute;left:18%;right:18%;top:48%;height:25%;display:flex;justify-content:space-between}
.streak-beaker{width:25%;position:relative}.streak-beaker img{width:100%;height:85%;object-fit:contain}.streak-beaker.earned{filter:drop-shadow(0 0 12px #00eaff)}.streak-beaker.earned:before{content:'';position:absolute;inset:10% 10% 20%;background:#00eaff66;border-radius:20%;z-index:-1}
.streak-beaker b{display:block;margin:auto;text-align:center;background:white;border:1px solid #2a99ff;border-radius:8px;color:#102c54;width:40%;font-size:2.2cqw}
.completion-star{position:absolute;left:43%;top:34%;width:14%;height:22%;object-fit:contain}
.completion-beaker{display:none;position:absolute;left:22%;top:52%;width:16%;height:28%;object-fit:fill}
.completed .completion-beaker{display:block}
.streak-beaker{z-index:1}.streak-beaker img{height:100%}
.streak-pole{position:absolute;top:40%;width:20%;height:35%;object-fit:fill}.pole-one{left:22%}.pole-two{left:59%}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

#expression-frame{position:absolute;left:17%;top:23%;width:66%;height:57%;object-fit:contain;z-index:4;pointer-events:none}
#feedback{display:block;background:none;backdrop-filter:none}
.feedback-card{position:absolute;inset:0;width:100%}
.feedback-bubble{position:absolute;left:7.3%;top:36%;width:31.5%;height:25%;overflow:hidden}
.feedback-bubble #feedback-art{position:absolute;left:-2.32%;top:-10.12%;width:104.91%;height:122.05%;max-width:none}
#feedback.wrong .feedback-bubble{left:4.6%;top:30.2%;width:34.3%;height:31.4%}
#feedback.wrong #feedback-art{inset:0;width:100%;height:100%;object-fit:contain}
#feedback-next{left:64.4%;top:70.8%;width:19.3%}
#feedback.retry #feedback-next{left:62.4%;top:69%;width:23.3%}
.showing-feedback #pour-undo,.showing-feedback #mix-submit,.showing-feedback #mixture-total{visibility:hidden}
.showing-feedback .shelf-beaker{visibility:hidden}
.showing-feedback .beaker-value{visibility:hidden}

#round:not(.challenge-round) .mode-badge{left:1.3%;top:.8%;width:19.8%;height:9.3%;padding:0;border:0;border-radius:0;color:transparent;background:url('../solvent-master-game-assets/page-3-c/practice-mode-button.webp') center/contain no-repeat}
#round:not(.challenge-round) .round-count{right:5.5%;top:2.3%;width:15.5%;height:8%;padding:0;border:0;border-radius:0;display:grid;place-items:center;background:url('../solvent-master-game-assets/page-3-c/practice-panel.webp') center/100% 100% no-repeat}

/* Perfect-round celebration: liquid, then dance, then connection and activation. */
.perfect-streak .outcome-title{animation:perfect-title-pulse 2s ease-in-out infinite;transform-origin:center}
.perfect-streak .streak-beaker:before{content:none}
.perfect-streak .streak-beaker{filter:none;height:100%}
.perfect-streak .streak-beaker.locked{filter:grayscale(1) brightness(.65);opacity:.48}
.streak-body{position:relative;width:100%;height:100%;transform-origin:50% 95%;isolation:isolate}
.perfect-streak .streak-glass{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2}
.perfect-streak .streak-face{position:absolute;left:23%;top:27%;width:54%;height:49%;object-fit:contain;z-index:4}
.streak-water{position:absolute;left:18%;right:17%;bottom:10%;height:70%;overflow:hidden;border-radius:0 0 25% 25%;z-index:3;mix-blend-mode:multiply}
.streak-water>span{position:absolute;bottom:0;width:100%;background:linear-gradient(90deg,#00a6d5,#54eaff 45%,#09bddd);box-shadow:inset 0 3px 2px #d9ffff}
.streak-water>span:before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff9 1px,transparent 2px) 0 0/15px 22px;animation:shelf-bubbles 2s linear infinite}
.streak-link{position:absolute;top:49%;height:8%;width:26%;border:1px solid #ddeefc88;border-radius:999px;background:linear-gradient(#c5d4df66,#66738488,#dceaf466);overflow:hidden}
.streak-link.link-1{left:20%}.streak-link.link-2{left:57%}
.streak-link>span{display:block;height:100%;width:100%;transform:scaleX(var(--progress));transform-origin:left;background:linear-gradient(#00a9e9,#d9ffff 45%,#00e7ff 65%,#0080d4);box-shadow:0 0 12px cyan}
.streak-sparks{display:none;position:absolute;inset:-24% -15%;color:#fff6a0;font-size:4cqw;text-shadow:0 0 12px #00eaff;z-index:5;pointer-events:none}
.streak-sparks i{position:absolute;right:0;top:48%;font-style:normal}
.celebrating .streak-sparks{display:block;animation:streak-sparkle .55s ease-in-out infinite alternate}
.perfect-streak .streak-beaker.next-ready .streak-body{animation:streak-ready 1.35s ease-in-out infinite}
.perfect-streak .streak-beaker b{position:absolute;top:100%;left:30%;font-size:2cqw}
@keyframes perfect-title-pulse{50%{transform:scale(1.055);filter:drop-shadow(0 0 13px #00efff) brightness(1.15)}}
@keyframes streak-ready{50%{transform:translateY(-5%) scale(1.055);filter:drop-shadow(0 0 15px #00efff) brightness(1.25)}}
@keyframes streak-sparkle{from{opacity:.35;transform:scale(.85) rotate(-8deg)}to{opacity:1;transform:scale(1.12) rotate(8deg)}}

#feedback-dimmer{position:absolute;inset:0;z-index:3;background:#04132e99;opacity:0;pointer-events:none}
.showing-feedback #feedback-dimmer{opacity:1}
.showing-feedback #main-vessel{z-index:4;transform-origin:50% 95%}
#feedback{z-index:5}

/* Balanced spacing for the first/second perfect-round summary. */
.perfect-streak .outcome-title{left:27%;top:2%;width:46%;height:22%}
.perfect-streak .outcome-message{left:15%;top:26%;width:70%;font-size:min(2.7cqw,5.2vh);line-height:1.2;letter-spacing:.01em;text-shadow:0 2px 3px #052343,0 0 6px #00cfe8}
.perfect-streak .streak-count{box-sizing:border-box;left:38%;top:35%;width:24%;height:10%;padding:0;display:grid;place-items:center;font-size:min(2.8cqw,5.4vh);line-height:1;border:1px solid #75cfff;border-radius:clamp(8px,1.2cqw,18px);background:linear-gradient(#fff,#e9f8ff);box-shadow:0 3px 0 #082b5d88,0 0 12px #63dbff33}
.perfect-streak .streak-beakers{top:51%;height:23%;left:18%;right:18%}
.perfect-streak .streak-link{top:49%;height:7%;width:22%}
.perfect-streak .streak-link.link-1{left:22%}
.perfect-streak .streak-link.link-2{left:59%}

.mastered-face{position:absolute;left:81%;top:51%;width:12%;height:20%;object-fit:contain;z-index:2;pointer-events:none}
.mastered-beaker-glow{position:absolute;left:77.5%;top:45%;width:20%;height:34%;border-radius:40%;pointer-events:none;box-shadow:0 0 24px #00eaff55;animation:mastery-glow 2.2s ease-in-out infinite}
.mastered-message-glow{position:absolute;left:25%;top:45%;width:50%;height:26%;pointer-events:none;background:radial-gradient(ellipse,#00ecff15,transparent 70%);animation:mastery-glow 2.8s ease-in-out infinite}
.mastered-sparkles{position:absolute;left:77%;top:47%;width:21%;height:28%;font-size:3cqw;color:#fff4a0;text-shadow:0 0 12px cyan;pointer-events:none;animation:streak-sparkle 1.2s ease-in-out infinite alternate}
.mastered-sparkles i{position:absolute;right:0;bottom:0;font-style:normal}
.mastery-ready .mastered-title{animation:perfect-title-pulse 2.4s ease-in-out infinite}
.mastery-ready .mastered-subtitle{animation:mastery-badge-float 2.6s ease-in-out infinite}
@keyframes mastery-glow{50%{opacity:.4;filter:brightness(1.4)}}
@keyframes mastery-badge-float{50%{transform:translateY(-5%) rotate(-2deg);filter:drop-shadow(0 0 9px #ffe77c88)}}

.completion-face,.completion-rays,.completion-message-focus,.completion-rocket-focus{display:none;pointer-events:none}
.completed .completion-face{display:block;position:absolute;left:25%;top:59%;width:10%;height:14%;object-fit:contain;z-index:3}
.completed .completion-beaker{z-index:2;transform-origin:50% 95%}
.completed .completion-star{z-index:2;top:38%;height:19%}
.completed .completion-rays{display:block;position:absolute;left:0;right:0;margin:auto;top:34%;width:min(18%,27vh);height:auto;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#fff6a077,transparent 68%);z-index:1}
.completion-rays span{position:absolute;left:46%;top:8%;width:8%;height:84%;transform:rotate(calc(var(--ray)*30deg));background:linear-gradient(#ffe79d99,transparent 44%,transparent 56%,#ffe79d55);clip-path:polygon(0 0,100% 0,57% 46%,100% 100%,0 100%,43% 54%);animation:victory-ray-beam 18s linear infinite}
.completed .completion-message-focus{display:block;position:absolute;left:29%;top:25%;width:42%;height:10%;border-radius:50%;box-shadow:0 0 22px #00eaff33;animation:mastery-glow 2.5s ease-in-out infinite}
.victory-ready .outcome-title{animation:perfect-title-pulse 2.4s ease-in-out infinite}
.victory-ready .completion-star{animation:victory-star-float 2.7s ease-in-out infinite}
.victory-ready .completion-beaker,.victory-ready .completion-face{animation:victory-beaker-bob 2.1s ease-in-out infinite}
@keyframes victory-rays-turn{to{transform:rotate(360deg)}}
@keyframes victory-star-float{50%{transform:translateY(-6%) scale(1.06);filter:drop-shadow(0 0 16px #ffdc55)}}
@keyframes victory-beaker-bob{20%{transform:translateY(-8px) rotate(-2deg)}40%{transform:translateY(0)}60%{transform:translateY(-5px) rotate(2deg)}80%,100%{transform:translateY(0)}}
.completed .outcome-title{top:2%;height:22%}

.timer-urgent #timer-fill{background:linear-gradient(#ff6b50,#ed1919);box-shadow:0 0 8px #ff2b20}
.timer-urgent .timer-track{animation:timer-tension .65s ease-in-out infinite}
.timer-urgent #timer-value{color:#b5140a;animation:timer-digits-tension .65s ease-in-out infinite}
@keyframes timer-tension{50%{filter:brightness(1.55);box-shadow:0 0 8px #ff2b20}}
@keyframes timer-digits-tension{50%{transform:scale(1.06);text-shadow:0 0 5px #ff503988}}

@keyframes victory-ray-beam{from{transform:rotate(calc(var(--ray)*30deg))}to{transform:rotate(calc(var(--ray)*30deg + 360deg))}}

.results-beaker-face{position:absolute;left:13%;top:55%;width:14%;height:19%;object-fit:contain;pointer-events:none}

.completion-water{display:none;pointer-events:none}
.completed .completion-water{display:block;position:absolute;left:22%;top:52%;width:16%;height:28%;z-index:3;mix-blend-mode:multiply}
.completion-water>span{position:absolute;left:18%;right:17%;bottom:10%;height:70%;border-radius:0 0 22% 22%;background:linear-gradient(90deg,#00a6d5cc,#54eaffcc 45%,#09bddddd);box-shadow:inset 0 3px 2px #e4ffff}
.completion-water>span:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#fff9 1px,transparent 2px) 0 0/15px 22px;animation:shelf-bubbles 2s linear infinite}
.completed .completion-face{z-index:4}
.victory-ready .completion-water{animation:victory-beaker-bob 2.1s ease-in-out infinite}

.completed #outcome-next{left:38%;bottom:1.5%;width:24%;height:13%}
.completed #outcome-button{width:100%;height:100%;object-fit:contain}

.mixing-beaker-face{position:absolute;left:26%;top:54%;width:14%;height:18%;object-fit:contain;pointer-events:none}

.lesson-beaker-face{position:absolute;left:20%;top:53%;width:13%;height:18%;object-fit:contain;pointer-events:none}

.streak-beaker .broken-beaker-face{position:absolute;left:23%;top:27%;width:54%;height:49%;object-fit:contain;pointer-events:none}

#rotate-prompt{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:radial-gradient(circle at 50% 35%,#245b86,#091d39 75%);color:white;font-family:Arial,sans-serif}
#rotate-prompt h1{font-size:clamp(24px,7vw,36px);margin:18px 0 10px;color:#ffe074}
#rotate-prompt p{max-width:300px;font-size:18px;line-height:1.5;margin:0}
.rotate-phone{font-size:90px;color:#72efff;line-height:1}

#fullscreen-toggle{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:1001;width:36px;height:36px;border:1px solid #a9eaff99;border-radius:50%;background:#082849cc;color:white;font-size:24px;line-height:1;cursor:pointer}
#fullscreen-help{position:fixed;inset:0;z-index:1002;display:grid;place-items:center;background:#041329dd;padding:20px}
#fullscreen-help>div{max-width:480px;max-height:90vh;overflow:auto;padding:24px;border:1px solid #75dfff;border-radius:18px;background:#14375b;color:white;line-height:1.5}
#fullscreen-help h2{margin-top:0;color:#ffe17a}
#fullscreen-help-close{padding:10px 18px;border:0;border-radius:9px;background:#ffd252;color:#102345;font-size:16px;font-weight:bold}

/* Reminder in the upper dark area of the lesson phone frame. */
#lesson-pro-tip{position:absolute;left:64.5%;top:8.7%;width:19.5%;height:9%;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:.2em;padding:.35% .5%;border:1px solid #ffd65a;border-radius:6px;background:#493607;color:#fff3bd;text-align:center;font-size:1cqw;line-height:1.2;box-shadow:0 0 10px #ffc83d33}
#lesson-pro-tip strong{color:#ffdc59}