/* Illustrated chemistry room and the central student defense scene. */
.classroom-scene{height:500px;background:#e8f1ed url('assets/lab/classroom.png') center 58%/cover no-repeat;isolation:isolate;border:1px solid #c6d6d9;box-shadow:inset 0 0 45px #7483a20a}
.classroom-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#edf4ff08 55%,#fffdf430)}
.classroom-scene .battle-board{z-index:6;top:18px;left:50%;transform:translateX(-50%);min-width:210px;max-width:330px;border:2px solid #e0eddd;border-radius:17px;background:#325963ed;box-shadow:0 4px 12px #22394c24;padding:12px 24px;gap:2px;backdrop-filter:blur(4px)}
.classroom-scene .battle-board b{font-family:var(--font);font-size:32px;max-width:280px;line-height:1.3}
.classroom-scene .battle-board small{font-size:10px;color:#d3e7e1}
.classroom-scene .battle-board span{font-family:var(--font);font-size:12px}
.classroom-scene .round-time{z-index:7;top:23px;right:22px;bottom:auto;background:#fffffff2;color:#567381;border:1px solid #c9dcd8;box-shadow:0 3px 12px #51678a15;padding:10px 15px}
.classroom-scene .round-time.urgent{background:#fff2e7;color:#b96753;border-color:#e1ab84}
.lab-protagonists{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;z-index:4;transition:opacity .08s}
.lab-protagonists .student-original{width:136px;height:270px;filter:drop-shadow(0 3px 1px #526b811c)}
.lab-protagonists .student-original.boy{height:282px}
.lab-protagonists.reacting{opacity:0}
.team-shadow{position:absolute;left:50%;bottom:12%;width:265px;height:20px;transform:translateX(-50%);border-radius:50%;background:#394d6921;filter:blur(4px);z-index:2}
.team-caption{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);z-index:5;background:#ffffffd9;border:1px solid #ccd8d4;padding:6px 15px;border-radius:30px;color:#456472;font-size:11px;font-weight:600;white-space:nowrap;backdrop-filter:blur(3px)}
.classroom-scene .enemy{bottom:18%;z-index:5;width:128px;transform:scale(var(--approach-scale,.7));transform-origin:center bottom;filter:drop-shadow(0 5px 1px #30516b20);transition:opacity .15s}
.classroom-scene .enemy .mascot-original{width:128px;height:135px;object-fit:contain}
.classroom-scene .enemy-label{background:#fffffff0;border-color:#cbdcdd;color:#345768;font-size:18px;padding:4px 10px;line-height:1.25;white-space:normal;max-width:160px;box-shadow:0 2px 5px #45648718}
.classroom-scene .enemy.urgent .enemy-label{background:#fff4e6;border-color:#d8a770}
.classroom-scene .enemy.collected{animation:collected-to-lab .7s ease forwards;opacity:0}
.classroom-scene .enemy.exploded{opacity:0}
.classroom-scene .mystery-orb{width:100px;height:120px;background:linear-gradient(150deg,#bfdee9,#8cb6d6);border-color:#6a98b4;box-shadow:0 5px 0 #7297b438}
.approach-lane{position:absolute;bottom:17%;height:23px;display:flex;align-items:center;justify-content:space-around;color:#719aaf73;z-index:1;border-bottom:2px dashed #729ab143;pointer-events:none;font-size:19px}
.lane-left{left:3%;width:34%}.lane-right{right:3%;width:34%}
.experiment-burst{position:absolute;left:50%;bottom:10%;width:505px;max-width:80%;transform:translateX(-50%);z-index:8;animation:experiment-pop .36s ease-out both;pointer-events:none}
.experiment-burst[hidden]{display:none}
.experiment-burst img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;filter:drop-shadow(0 7px 6px #ab6cd028)}
.experiment-burst strong{position:absolute;left:47%;top:32%;color:#a24771;font-size:40px;font-family:var(--round);transform:rotate(-8deg);text-shadow:0 2px white,2px 0 white,-2px 0 white,0 -2px white}
.experiment-hit{animation:room-jolt .32s ease-out}
.experiment-hit:before{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;animation:experiment-flash .5s ease-out both;background:#fffbd9;border-radius:inherit}
.classroom-home{background:#e7efef url('assets/lab/classroom.png') center 60%/cover no-repeat;border-color:#d0dadd}
.classroom-home .room-window,.classroom-home .room-shelf,.classroom-home .chalkboard,.classroom-home .lab-table{display:none}
.classroom-home .researchers{left:20px;bottom:62px}
.classroom-home .hero-mascots{bottom:100px;right:27px}
.classroom-home .hero-caption{bottom:15px;left:14px;background:#fffdf8e8;padding:10px 14px;border-radius:14px;box-shadow:0 2px 7px #455b7620;color:#536b79;right:14px;font-size:14px;line-height:1.6}
@keyframes experiment-pop{0%{opacity:0;transform:translateX(-50%) scale(.45)}65%{opacity:1;transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}
@keyframes room-jolt{0%,100%{transform:translateX(0)}22%{transform:translateX(-5px)}48%{transform:translateX(4px)}74%{transform:translateX(-2px)}}
@keyframes experiment-flash{0%{opacity:.55}100%{opacity:0}}
@keyframes collected-to-lab{0%{opacity:1}100%{opacity:0;translate:0 -55px;scale:.5}}
@media(max-width:1050px){.classroom-scene{height:445px}.lab-protagonists .student-original{width:120px;height:252px}.lab-protagonists .student-original.boy{height:260px}.classroom-home .researchers{left:11px}.classroom-home .hero-mascots{right:13px}}
@media(max-width:760px){
 .classroom-scene{height:355px;background-position:center 60%;border-radius:19px}
 .classroom-scene .battle-board{top:12px;padding:8px 16px;min-width:140px;max-width:215px;border-radius:13px}
 .classroom-scene .battle-board b{font-size:24px;max-width:180px}.classroom-scene .battle-board small{font-size:8px}.classroom-scene .battle-board span{font-size:10px}
 .classroom-scene .round-time{top:97px;right:9px;padding:5px 9px;font-size:9px}.classroom-scene .round-time span{font-size:14px}
 .lab-protagonists{bottom:13%;gap:3px}.lab-protagonists .student-original{width:80px;height:182px}.lab-protagonists .student-original.boy{height:187px}
 .team-shadow{width:150px;height:12px}.team-caption{font-size:9px;bottom:10px;padding:5px 11px}
 .classroom-scene .enemy{width:70px;bottom:17%}.classroom-scene .enemy .mascot-original{width:70px;height:79px}.classroom-scene .enemy-label{font-size:12px;padding:3px 6px;max-width:100px;border-radius:7px}
 .classroom-scene .mystery-orb{width:55px;height:69px;font-size:37px;border-width:2px}.approach-lane{font-size:12px;height:13px;width:25%}
 .experiment-burst{width:325px;max-width:96%;bottom:12%}.experiment-burst img{max-height:260px}.experiment-burst strong{font-size:28px}
 .classroom-home .researchers{left:14px;bottom:68px}.classroom-home .hero-mascots{bottom:96px;right:16px}.classroom-home .hero-caption{font-size:11px;padding:8px 11px;bottom:12px}.classroom-home .hero-caption small{font-size:9px}
}

@media(prefers-reduced-motion:reduce){.experiment-burst,.experiment-hit,.experiment-hit:before,.classroom-scene .enemy.collected{animation:none}.experiment-hit:before{display:none}}

/* Four corner portals remain visible, with the nearest deadline marked in red. */
.classroom-scene{height:auto;aspect-ratio:16/9;background-size:100% 100%;background-position:center}
.classroom-scene .enemy{bottom:auto;transform:translate(-50%,-50%) scale(var(--approach-scale,.7));transform-origin:center;transition:opacity .15s;filter:drop-shadow(0 5px 1px #30516b20)}
.enemy-visual{position:relative;width:128px;height:135px;display:grid;place-items:center}
.classroom-scene .enemy .mascot-original{height:128px;width:128px;aspect-ratio:auto}
.priority-target{z-index:6!important}
.priority-target .enemy-visual:after{content:'';position:absolute;left:-5%;top:-3%;width:110%;height:106%;border:4px solid #f13649;border-radius:50%;box-shadow:0 0 0 2px #fff7,0 0 15px #ff536c35;pointer-events:none}
.priority-target .enemy-label{border:2px solid #ed4158;color:#b92d44;background:#fff9fa}
.priority-badge{display:block;position:absolute;white-space:nowrap;left:50%;top:-22px;transform:translateX(-50%);font-size:12px;font-weight:700;padding:4px 8px;border-radius:20px;background:#ec3c51;color:white;box-shadow:0 2px 6px #78253920}
.target-link{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.target-link line{stroke:#f13649;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 1px 1px #fff8)}
.target-link circle{fill:#f13649;stroke:#fff8;stroke-width:2}
.target-link.resolved{opacity:0}
.lab-protagonists{bottom:26%;gap:9px}.lab-protagonists .student-original{width:122px;height:249px}.lab-protagonists .student-original.boy{height:257px}
.team-shadow{bottom:25%;width:240px}.team-caption{bottom:21%;background:#fffdf3d4}
.experiment-burst{bottom:23%;width:470px;max-width:73%}.experiment-burst img{max-height:350px}
.classroom-scene .battle-board{top:5%;padding:10px 22px}.classroom-scene .round-time{top:6%;right:12%}
.classroom-home{background-size:100% 100%;background-position:center}
@media(max-width:1050px){.classroom-scene{height:auto;aspect-ratio:16/9}.lab-protagonists .student-original{width:105px;height:213px}.lab-protagonists .student-original.boy{height:220px}.classroom-scene .enemy{width:110px}.enemy-visual{width:110px;height:115px}.classroom-scene .enemy .mascot-original{width:110px;height:110px}}
@media(max-width:760px){
 .classroom-scene{height:auto;aspect-ratio:4/3;background-size:100% 100%;background-position:center}
 .lab-protagonists{bottom:25%;gap:1px}.lab-protagonists .student-original{width:62px;height:129px}.lab-protagonists .student-original.boy{height:134px}
 .team-shadow{bottom:24%;width:125px;height:10px}.team-caption{bottom:18%;font-size:8px;padding:4px 8px}
 .classroom-scene .battle-board{top:7px;min-width:128px;max-width:165px;padding:6px 10px}.classroom-scene .battle-board b{font-size:21px}.classroom-scene .battle-board small{font-size:7px}.classroom-scene .battle-board span{font-size:8px}
 .classroom-scene .round-time{top:33%;right:7px;font-size:8px;padding:4px 6px}.classroom-scene .round-time span{font-size:12px}
 .classroom-scene .enemy{width:62px}.enemy-visual{width:62px;height:65px}.classroom-scene .enemy .mascot-original{width:62px;height:62px}
 .classroom-scene .enemy-label{font-size:10px;padding:2px 5px;max-width:86px}.priority-target .enemy-visual:after{border-width:3px}
 .priority-badge{font-size:8px;top:-17px;padding:3px 5px}.target-link line{stroke-width:2}.target-link circle{r:3px}
 .experiment-burst{bottom:22%;width:245px;max-width:87%}.experiment-burst img{max-height:183px}.experiment-burst strong{font-size:24px}
}

/* Larger original sprites and a warm, muted target palette. */
.classroom-scene{--enemy-size:184px;--target-color:#c78899;--target-ink:#a5627b;--target-soft:#fff2f6}
.classroom-scene .enemy{width:var(--enemy-size)}
.classroom-scene .enemy-visual{width:var(--enemy-size);height:calc(var(--enemy-size) + 6px)}
.classroom-scene .enemy .mascot-original{width:var(--enemy-size);height:var(--enemy-size)}
.classroom-scene .mystery-orb{width:calc(var(--enemy-size) * .8);height:var(--enemy-size)}
.classroom-scene .priority-target .enemy-visual:after{border:3px solid var(--target-color);box-shadow:0 0 0 2px #fff9,0 0 18px #d9a4b438}
.classroom-scene .priority-target .enemy-label,.classroom-scene .priority-target.urgent .enemy-label{border-color:var(--target-color);color:var(--target-ink);background:var(--target-soft)}
.classroom-scene .priority-badge{background:linear-gradient(135deg,#bc7b91,#b5748a);box-shadow:0 2px 7px #a56e8524}
.classroom-scene .target-link line{stroke:var(--target-color);stroke-width:2.5;opacity:.92}
.classroom-scene .target-link circle{fill:var(--target-color)}
.classroom-scene .enemy.collected{opacity:1;animation:element-pop-away .24s ease-in forwards}
.element-success-burst{position:absolute;pointer-events:none;z-index:7;transform:translate(-50%,-50%);animation:success-fade .72s ease-out both}
.scene-paused .element-success-burst,.scene-paused .element-success-burst *,.scene-paused .enemy.collected{animation-play-state:paused}
@keyframes element-pop-away{0%{opacity:1;scale:1}38%{opacity:1;scale:1.1}100%{opacity:0;scale:.15}}
@keyframes success-fade{0%,60%{opacity:1}100%{opacity:0}}
@media(max-width:1050px){.classroom-scene{--enemy-size:154px}}
@media(max-width:760px){.classroom-scene{--enemy-size:88px}.classroom-scene .target-link line{stroke-width:2}}
@media(prefers-reduced-motion:reduce){.element-success-burst,.element-success-burst *,.classroom-scene .enemy.collected{animation:none}.classroom-scene .enemy.collected{opacity:0}}

/* Chemistry-club start screen: original characters in an illustrated room. */
body[data-page="home"]{background:linear-gradient(165deg,#e8f6f8,#f6fbfa 48%,#f0f4fc);--purple:#397f91;--purple-dark:#255c70;--line:#d4e4e8}
body[data-page="home"] .topbar{border-color:#c8dfe6}
body[data-page="home"] .brand-icon{background:#dceff3;color:#34768e}
body[data-page="home"] .eyebrow{color:#3c7c90}
body[data-page="home"] .home-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:20px;padding:18px;border:1px solid #b9d3df;border-radius:26px;background:#28475a url('assets/lab/clean-lab.png') center/cover;box-shadow:0 12px 30px #284e6a16}
.classroom-home{height:456px;background:transparent;border:0;border-radius:18px;box-shadow:none;overflow:visible;isolation:isolate}
.home-lab-sign{position:absolute;top:10px;left:12px;color:white;display:flex;align-items:center;gap:12px;text-shadow:0 2px 6px #163a55}
.home-lab-sign>span{font-size:38px;color:#a9e8f3}.home-lab-sign small{display:block;font-size:11px;letter-spacing:.14em;color:#c7edf6;margin-bottom:4px}.home-lab-sign strong{font-size:21px;font-family:var(--round)}
.classroom-home .researchers{left:10px;bottom:66px;gap:0;transform:none}
.classroom-home .researchers .student-original{width:123px;height:280px}
.classroom-home .researchers .student-original img{transform:scaleX(-1)}
.classroom-home .hero-mascots{width:55%;height:310px;right:3px;bottom:66px;display:block}
.classroom-home .hero-mascots>div{width:138px;position:absolute;transform:none}
.classroom-home .hero-mascots>div:nth-child(1){left:0;top:8px}.classroom-home .hero-mascots>div:nth-child(2){right:0;top:0}.classroom-home .hero-mascots>div:nth-child(3){left:27%;bottom:0}
.classroom-home .hero-mascots .mascot-original{width:138px;height:138px;max-width:none;filter:drop-shadow(0 5px 3px #173c5540)}
.classroom-home .hero-mascots span{bottom:-6px;left:50%;transform:translateX(-50%);font-size:17px;color:#28556b;border:1px solid #bbdce3;min-width:36px;background:#f4fdff;box-shadow:0 3px 6px #2143551f}
.classroom-home .hero-caption{bottom:5px;left:0;right:0;background:#f0fbffed;border:1px solid #c6e9ed;color:#345d73;padding:11px 16px;border-radius:14px;font-size:15px}.classroom-home .hero-caption small{font-size:12px;color:#648194}
body[data-page="home"] .mission-panel{background:#f8fdfff2;border-color:#e2f2f5;border-radius:19px;padding:25px;box-shadow:0 5px 20px #132c4928;backdrop-filter:blur(10px)}
body[data-page="home"] .mission-panel .primary{background:linear-gradient(125deg,#397c96,#3f959e);border-color:#397c96;box-shadow:0 4px 0 #2c64774a}
body[data-page="home"] .mission-panel .secondary{color:#35657c;border-color:#bad8e2;background:#eef8fc}
body[data-page="home"] .difficulty .selected{background:#e2f1f5;border-color:#72a8bd;color:#25596c}
body[data-page="home"] .stage-card{background:#fcffff;border-color:#cbdfe5;box-shadow:0 3px 9px #2d617507}
body[data-page="home"] .stage-card.selected{background:#e1f1f6;border-color:#7caebf;box-shadow:0 3px 0 #b9d8e1}
body[data-page="home"] .stage-card.selected .stage-no{color:#367b91}
body[data-page="home"] .collection-pill{color:#366f84;background:#e1f2f6;border-color:#bfdce4}
.lab-protagonists[data-facing="left"] .student-original img{transform:scaleX(1)}
.lab-protagonists[data-facing="right"] .student-original img{transform:scaleX(-1)}
.success-illustration{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #846ea529);animation:illustrated-pop .68s cubic-bezier(.2,.75,.3,1) both;transform-origin:center}
@keyframes illustrated-pop{0%{opacity:0;transform:scale(.22) rotate(-12deg)}22%{opacity:1;transform:scale(1.07) rotate(3deg)}47%{opacity:1;transform:scale(1) rotate(-2deg)}70%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.18) rotate(5deg)}}
@media(max-width:1050px) and (min-width:761px){body[data-page="home"] .home-grid{grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr);padding:14px;gap:14px}.classroom-home .researchers .student-original{width:92px;height:226px}.classroom-home .hero-mascots>div,.classroom-home .hero-mascots .mascot-original{width:110px}.classroom-home .hero-mascots .mascot-original{height:110px}.classroom-home .hero-mascots{height:278px;width:53%}.home-lab-sign strong{font-size:18px}}
@media(max-width:760px){body[data-page="home"] .home-grid{grid-template-columns:minmax(0,1fr);padding:12px;gap:12px;background-position:38% top;background-size:auto 355px;background-repeat:no-repeat;background-color:#e6f2f7;border-radius:20px}.classroom-home{height:323px}.home-lab-sign{left:3px;top:2px;gap:8px}.home-lab-sign>span{font-size:27px}.home-lab-sign strong{font-size:17px}.home-lab-sign small{font-size:9px}.classroom-home .researchers{left:0;bottom:62px}.classroom-home .researchers .student-original{width:70px;height:179px}.classroom-home .hero-mascots{width:54%;height:204px;bottom:64px;right:0}.classroom-home .hero-mascots>div,.classroom-home .hero-mascots .mascot-original{width:83px}.classroom-home .hero-mascots .mascot-original{height:83px}.classroom-home .hero-mascots>div:nth-child(3){left:26%;bottom:0}.classroom-home .hero-mascots span{font-size:13px;bottom:-7px;min-width:28px;padding:3px 5px}.classroom-home .hero-caption{font-size:12px;padding:9px 10px;bottom:0;line-height:1.5}.classroom-home .hero-caption small{font-size:10px}body[data-page="home"] .mission-panel{padding:20px}.section-heading p:last-child{font-size:13px}}
@media(prefers-reduced-motion:reduce){.success-illustration{animation:none}}
.classroom-home .researchers{bottom:90px}
.classroom-home .hero-mascots{bottom:94px;height:282px;right:8px}
body[data-page="home"] nav button.active{background:#deeff4;color:#2f6e86}
@media(max-width:760px){.classroom-home .researchers{bottom:64px}.classroom-home .hero-mascots{bottom:78px;height:195px;right:6px}}
@media(max-width:360px){.classroom-home .researchers .student-original{width:60px;height:163px}.classroom-home .hero-mascots>div,.classroom-home .hero-mascots .mascot-original{width:72px}.classroom-home .hero-mascots .mascot-original{height:72px}}
@media(max-width:360px){.topbar{padding:0 12px;gap:6px}.brand{font-size:14px;gap:7px;white-space:nowrap}.brand-icon{width:27px;height:32px;font-size:21px}.brand small{font-size:6px}nav button{font-size:10px;padding:8px 7px;white-space:nowrap}.icon-btn{width:28px;height:28px;flex-shrink:0}.stage-card strong{font-size:11px;white-space:nowrap}}

/* A drawn chemistry frame surrounds the game, with a quiet center for controls. */
body,body[data-page="home"]{background:#f4f9fb url('assets/lab/chemistry-border.png') center top/100% 100vh fixed no-repeat}
.topbar{background:linear-gradient(90deg,#f6fbfc00,#f6fbfcd9 12%,#f6fbfcd9 88%,#f6fbfc00)}
main{background:linear-gradient(90deg,#f6fbfc00,#f6fbfcc7 4%,#f6fbfcc7 96%,#f6fbfc00);border-radius:22px}
footer{background:linear-gradient(90deg,#f6fbfc00,#f6fbfccf 9%,#f6fbfccf 91%,#f6fbfc00)}
body[data-page="home"] .home-grid{background-position:center;background-size:100% 100%}
@media(max-width:760px){body[data-page="home"] .home-grid{background-size:100% 355px;background-position:center top}main{background:#f7fcfbc2;border-radius:0}.topbar{background:#f7fcfbd9}}

/* Element symbols and Korean names stay together while approaching. */
.classroom-scene .enemy-label{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 10px;min-width:66px;max-width:184px}
.classroom-scene .enemy-symbol{font-size:17px;line-height:1.15}
.classroom-scene .enemy-name{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
@media(max-width:760px){.classroom-scene .enemy-label{padding:3px 6px;gap:1px;min-width:59px;max-width:112px}.classroom-scene .enemy-symbol{font-size:13px}.classroom-scene .enemy-name{font-size:12px}}