:root{
  --purple:#6424a8;
  --pink:#efb3ef;
  --pink2:#f7d0f7;
  --blue:#1756aa;
  --green:#10b132;
  --desk:#f7b553;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;font-family:Arial,Helvetica,sans-serif;color:#111;overflow-x:hidden}
.game-shell{width:min(1440px,100vw);min-height:100vh;margin:0 auto;border:3px solid #111;border-radius:30px;overflow:hidden;background:linear-gradient(#efb3ef,#f6cff7);position:relative}
.topbar{height:74px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;color:#4c188a;font-weight:700;font-size:20px;background:linear-gradient(90deg,#efb3ef,#efb3ef)}
.question-list{display:flex;gap:14px;align-items:center}.menu-icon{font-size:30px}.status{display:flex;gap:18px;align-items:center}.divider{opacity:.55}
.scene{position:relative;margin:0 22px;background:linear-gradient(#dff5ff 0%,#d9f1ff 60%,#f8b55b 60%,#f6b051 100%);height:855px;overflow:hidden;border:1px solid #d0b0d0}
.instruction{text-align:center;font-size:29px;font-weight:800;padding-top:22px;position:relative;z-index:6}
.title-row{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:20px;position:relative;z-index:6}.title-row h1{margin:0;font-size:72px;color:#2159a8;letter-spacing:1px;text-shadow:0 3px 0 #fff;font-weight:900}.star{color:#ffc20c;font-size:52px;text-shadow:0 2px 0 #d48b00}.red-underline{width:370px;height:10px;border-radius:50%;background:#e0291e;margin:8px auto 0;transform:rotate(-1deg);position:relative;z-index:6}
.window-decor{position:absolute;left:0;top:0;width:245px;height:500px;background:#d99645;border-right:10px solid #c17e29;z-index:1}.window-sky{position:absolute;left:18px;top:18px;width:175px;height:340px;border:14px solid #b86f24;background:linear-gradient(#9cddff,#dff8ff);box-shadow:inset 0 0 0 4px #e5b069}.cloud{font-size:86px;color:white;position:absolute;left:20px;top:38px;text-shadow:0 1px 0 #bde3f0}.window-grass{position:absolute;left:32px;top:215px;width:150px;height:125px;background:radial-gradient(circle at 25% 55%,#5aaa2e 0 33%,transparent 34%),radial-gradient(circle at 55% 60%,#67b43a 0 36%,transparent 37%),radial-gradient(circle at 82% 65%,#4d9d27 0 32%,transparent 33%)}.window-sill{position:absolute;left:0;top:355px;width:235px;height:32px;background:#e4a14e;border:4px solid #c47c28}.plant{position:absolute;left:28px;top:365px;font-size:110px;filter:saturate(1.2)}
.note{position:absolute;right:33px;top:40px;width:210px;height:122px;background:#fff8d6;border:2px solid #e1c366;box-shadow:0 8px 12px #7b6d4a55;transform:rotate(2deg);z-index:5;text-align:center;padding-top:24px;font-size:25px}.note b{display:block;color:#e43131}.note strong{display:block;color:#149b37;margin-top:8px}.pin{position:absolute;top:-7px;color:#54b126;font-size:24px;text-shadow:0 1px #456}.p1{left:15px}.p2{right:15px}.note-star{position:absolute;right:12px;bottom:15px;color:#ffbf00}
.school-decor{position:absolute;right:28px;top:245px;width:260px;height:190px;z-index:2}.school-roof{position:absolute;left:30px;top:20px;width:200px;height:70px;background:#a44b2e;clip-path:polygon(50% 0,100% 65%,85% 65%,85% 100%,15% 100%,15% 65%,0 65%)}.school-body{position:absolute;left:55px;top:65px;width:150px;height:110px;background:#f1b96f;border:3px solid #a54d30}.clock{position:absolute;left:58px;top:-20px;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid #a65b3b;text-align:center;line-height:28px;color:#447}.school-door{position:absolute;left:62px;bottom:0;width:34px;height:53px;background:#794532}.school-windows{position:absolute;left:12px;top:40px;color:#188fd0;font-size:34px;letter-spacing:28px;white-space:nowrap}
.content-row{position:absolute;left:275px;right:270px;top:215px;display:flex;align-items:center;justify-content:center;gap:55px;z-index:7}.picture-card{width:390px;height:350px;background:#fff;border-radius:28px;box-shadow:0 7px 12px #50709044;border:1px solid #ddd;display:flex;align-items:center;justify-content:center}.picture-icon{font-size:210px;line-height:1;filter:drop-shadow(0 5px 2px #0002);width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:18px}.picture-icon img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.question-area{width:420px;text-align:center}.prompt{font-size:34px;color:#2158a7;font-weight:900;line-height:1.08;margin-bottom:36px}.drop-zone{height:180px;border:4px dashed #2d69bc;border-radius:18px;background:#edf9ffcc;display:flex;align-items:center;justify-content:center;color:#2160ad;font-size:24px;font-weight:700;transition:.2s}.drop-zone.over{transform:scale(1.02);background:#fff}.drop-zone.filled{border-style:solid;background:#fff;color:#111;font-size:34px}.drop-zone.correct{border-color:#12a83a;background:#eaffef}.drop-zone.wrong{border-color:#d62b2b;background:#ffeaea}
.desk-strip{position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(#ffc775,#f3a840);border-top:4px solid #d19237;z-index:4}.pencil-cup{position:absolute;left:34px;bottom:54px;font-size:150px;transform:rotate(-5deg)}.books-decor{position:absolute;right:28px;bottom:28px;font-size:150px}.books-decor .apple{position:absolute;right:28px;top:-70px;font-size:90px}.choices{position:absolute;left:255px;right:250px;top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.choice{background:#fff;border:0;border-radius:16px;padding:26px 14px;font-size:28px;font-weight:800;box-shadow:0 5px 8px #855c2d55;cursor:grab;user-select:none;touch-action:none;min-height:95px}.choice:active{cursor:grabbing}.choice.selected{outline:5px solid #6b2bd0;transform:translateY(-2px)}
.controls{position:absolute;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;z-index:9;pointer-events:none}.controls button{pointer-events:auto;border:0;border-radius:13px;color:white;font-size:25px;font-weight:900;padding:16px 28px;box-shadow:0 4px 0 #0003;cursor:pointer}.listen-btn{background:#176bd3}.submit-btn{background:#12b52e}.submit-btn:disabled{filter:grayscale(.6);opacity:.6;cursor:not-allowed}
.pagination{height:110px;display:flex;align-items:center;justify-content:center;gap:28px;background:linear-gradient(#f5c3f5,#efb3ef);position:relative}.pagination:before{content:"";position:absolute;left:15%;right:15%;height:3px;background:#fff8}.page-dot{position:relative;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#111;font-size:18px;font-weight:800;z-index:2;cursor:pointer}.page-dot.active{background:#b641de;color:#fff;box-shadow:0 0 0 3px #9227c3}.page-dot.done{background:#dff7e5}
.feedback{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);background:#fff;border-radius:25px;padding:24px 44px;font-size:40px;font-weight:900;box-shadow:0 12px 30px #0005;opacity:0;pointer-events:none;transition:.2s;z-index:100}.feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.feedback.good{color:#0a9e2c}.feedback.bad{color:#d32727}
.finish-screen{position:fixed;inset:0;background:linear-gradient(#1caaf1,#76d7ff 55%,#69bf3a 56%,#55a72d);z-index:200;display:none;overflow:hidden}.finish-screen.show{display:block}.finish-screen canvas{position:absolute;inset:0;width:100%;height:100%}.finish-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(760px,90vw);z-index:3}.finish-stars{font-size:54px;color:#ffd51a}.finish-card h2{font-size:95px;line-height:.9;margin:0;color:white;text-shadow:5px 5px 0 #e34535,-3px -3px 0 #2472c5}.ribbon{display:inline-block;background:#ef3d3d;color:#fff;font-size:42px;font-weight:900;padding:12px 52px;margin:26px 0;border-radius:12px;box-shadow:0 7px 0 #b52020}.final-score{background:#fff;border-radius:18px;padding:20px 36px;font-size:31px;color:#164d9f;display:inline-block;box-shadow:0 8px 16px #0003}.final-score strong{font-size:46px}.finish-card button{display:block;margin:34px auto 0;border:0;border-radius:13px;background:#126bd5;color:#fff;padding:18px 35px;font-size:28px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #08469c}
@media(max-width:1000px){.title-row h1{font-size:48px}.instruction{font-size:22px}.content-row{left:180px;right:130px;gap:25px}.picture-card{width:300px;height:300px}.picture-icon{font-size:160px}.question-area{width:320px}.prompt{font-size:27px}.choices{left:180px;right:140px;gap:12px}.choice{font-size:22px}.school-decor,.note{transform:scale(.8);transform-origin:top right}.window-decor{transform:scale(.8);transform-origin:top left}.pagination{gap:12px}.page-dot{width:38px;height:38px}}