/* Deli | ACI Rising Star — approved-illustration fidelity update. Source artwork is preserved unchanged. */
:root{--approved-ratio:768/342}
.site-wrap{padding:14px 10px}
.app-shell{max-width:1190px;border:0;border-radius:20px;box-shadow:0 18px 48px #7613232a;background:#fff8f8;position:relative;overflow:hidden}
.topbar{position:absolute;z-index:30;top:0;right:0;width:100%;height:0;padding:0;border:0;background:none;pointer-events:none}
.topbar .brand{display:none}
.top-controls{position:absolute;top:12px;right:16px;pointer-events:auto}
.top-controls .small-round{width:42px;height:42px;display:grid;place-items:center;border:2px solid #fff7ee;box-shadow:0 2px 0 #b40628;background:linear-gradient(#ff303b,#d00026);font-size:23px}
.top-controls .small-round.muted{background:#fcfcfc;color:#bd1435;box-shadow:0 2px 0 #ecb4bc}
.top-controls .timer-pill{position:absolute;right:110px;top:0;height:42px;display:flex;align-items:center;white-space:nowrap;font-size:20px;border:2px solid #f49ba6;box-shadow:0 2px 3px #b52b4329;background:#fff4f7}
.screen,.screen.active{min-height:0}
.sky-scene,.school-scene,.world-scene,.quiz-scene,.result-screen{min-height:0;position:relative;overflow:hidden;aspect-ratio:var(--approved-ratio);background-position:center;background-repeat:no-repeat;background-size:100% 100%}
.sky-scene{background-image:url('/assets/approved-welcome.webp')}
.school-scene{background-image:url('/assets/approved-register.webp');aspect-ratio:768/385;background-position:center top;background-size:100% auto;overflow:visible}
.world-scene{background-image:url('/assets/approved-worlds.webp')}
.quiz-scene{background-image:url('/assets/approved-quiz.webp')}
.quiz-scene:has(.mascot-scene.success){background-image:url('/assets/approved-quiz-correct.webp')}
.quiz-scene:has(.mascot-scene.fail){background-image:url('/assets/approved-quiz-wrong.webp')}
.result-screen{background-image:url('/assets/approved-results.webp')}
/* Exact approved welcome illustration: live interaction overlays the artwork, not a competing recreation. */
.sky-scene .floating-star,.sky-scene .sky-cloud{display:none}
.welcome-grid{min-height:0;display:block;position:absolute;inset:0;padding:0}
.welcome-grid .hero-art{position:absolute;left:3%;top:7%;width:37%;height:84%;border:0;cursor:pointer}
.welcome-grid .hero-art img,.welcome-grid .hero-art .click-me{display:none}
.welcome-grid .hero-art.celebrate{animation:pop .48s ease-out}
.welcome-content{padding:0;position:absolute;inset:0;pointer-events:none}
.welcome-content>*:not(#goRegister){display:none!important}
#goRegister{pointer-events:auto;position:absolute;left:40.5%;top:79%;width:27.5%;height:12%;border:0;background:transparent;box-shadow:none;font-size:0;color:transparent;padding:0;border-radius:30px}
#goRegister:hover,#beginAssessment:hover,#registerBtn:hover{background:#ffffff1a;outline:2px solid #fff8}
/* Registration screen: original character illustration, original panel and editable free-text inputs. */
.register-layout{display:block;min-height:0;padding:0;position:absolute;inset:0;width:100%;max-width:none;margin:0}
.register-side{display:none}
.form-panel{position:absolute;inset:0;background:none;border:none;border-radius:0;box-shadow:none;padding:0;max-width:none}
.form-panel .eyebrow,.form-panel h2,.form-panel p,.form-panel>label:not(.consent){display:none!important}
.form-panel input:not([type=checkbox]){position:absolute;left:36%;width:32%;height:8.1%;min-height:0;padding:0 5px;background:#fffafa;color:#432333;border:0;border-radius:0;font-size:clamp(11px,1.65vw,18px);box-shadow:none;z-index:2}
.form-panel input:not([type=checkbox]):focus{outline:2px solid #d51439;outline-offset:2px}
#fullName{top:40.5%}
#grade{top:49.9%}
#schoolName{top:59.3%}
.form-panel .consent{position:absolute;top:89%;left:11%;width:78%;font-size:clamp(9px,1.1vw,12px);line-height:1.2;background:#fffdfded;border:1px solid #ffe1d7;border-radius:12px;padding:6px 9px;margin:0;z-index:2;align-items:center}
.form-panel .consent small{display:none}
.form-panel .consent input{height:15px;width:15px;margin:0}
.form-panel .form-error{position:absolute;bottom:-17px;left:16%;width:68%;font-size:12px;margin:0;z-index:3}
#registerBtn{position:absolute;top:71.1%;left:35.9%;width:29.3%;height:9.1%;padding:0;border:0;box-shadow:none;border-radius:99px;background:transparent;color:transparent;font-size:0;z-index:3}
/* Exact four-world map rather than generic feature cards. */
.world-scene{padding:0;text-align:initial}
.world-scene .section-heading,.world-scene .world-grid,.world-scene .center-note{display:none}
#beginAssessment{position:absolute;left:37.6%;top:82.8%;width:28.8%;height:10.9%;border:0;background:transparent;color:transparent;font-size:0;box-shadow:none;padding:0}
/* Quiz uses the exact stationery scene with the moving detective notebook and school props. */
.quiz-scene{padding:0}
.quiz-scene .quiz-head{position:absolute;top:2.5%;left:63%;width:22%;z-index:5;display:block}
.quiz-scene .quiz-progress{width:100%;background:#fff9fb;font-size:clamp(10px,1.3vw,15px);color:#48222e;padding:4px 7px;border-radius:8px}
.quiz-scene .progress-track{height:6px;margin-top:3px}
.quiz-scene .quiz-status{display:none}
.quiz-layout{display:block;position:absolute;inset:0;min-height:0;margin:0}
.mascot-scene{position:absolute;left:1%;top:14%;width:28%;height:80%;margin:0;text-align:center;z-index:1;pointer-events:none}
.mascot-scene img,.mascot-scene .mascot-caption{display:none}
.mascot-scene .lightbulb{left:10%;top:-3%;font-size:clamp(16px,2.7vw,32px);opacity:.86;animation:float 3s infinite}
.mascot-scene .floating-questions{top:2%;left:40%;right:auto;font-size:clamp(14px,2.4vw,27px);opacity:.9}
.quiz-panel{position:absolute;left:30%;top:17%;width:63%;height:76%;border:1.5px solid #f0c9c9;border-radius:26px;box-shadow:0 7px 15px #9b4e5a1c;background:#fff9f9f7;padding:2.5% 3%;z-index:2;display:flex;flex-direction:column;justify-content:center}
.quiz-panel .category-pill{font-size:clamp(10px,1.1vw,14px);padding:4px 13px;align-self:flex-start}
.quiz-panel h2{font-size:clamp(13px,1.62vw,21px);line-height:1.26;min-height:0;margin:10px 0 12px;font-weight:900;flex-shrink:0}
.option-grid{grid-template-columns:1fr 1fr;gap:7px 10px}
.option{min-height:0;padding:8px 11px;font-size:clamp(10px,1.15vw,15px);border-radius:99px}
.option .bullet{margin-right:7px}
.feedback{min-height:25px;line-height:1.25;padding:6px 0 0;font-size:clamp(9px,1.1vw,12px);max-height:44px;overflow:auto}
.quiz-actions{margin-top:auto;gap:15px;padding:4px 5% 1px}
.quiz-actions .primary,.quiz-actions .secondary{font-size:clamp(10px,1.1vw,14px);padding:7px 16px}
.quiz-bottom{display:none}
/* Original results composition with live scores over the static example figures. */
.result-screen{padding:0;text-align:initial}
.result-screen .trophy,.result-screen h2,.result-screen>p:not(.finish-status){display:none}
.stat-grid{position:absolute;left:18%;top:48%;width:64%;height:28%;margin:0;gap:0;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-grid>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 2px 2%;background:#fff8fa;border:0;border-right:1px solid #f4cdcf;border-radius:0;box-shadow:none;gap:1px}
.stat-grid>div:last-child{border:0}
.stat-grid span{display:block;font-size:clamp(14px,2.3vw,27px);line-height:1}
.stat-grid b{font-size:clamp(15px,2.5vw,32px);line-height:1.05}
.stat-grid small{font-size:clamp(9px,1.12vw,13px)}
.finish-status{position:absolute;left:17%;right:17%;top:81%;margin:0;text-align:center;color:#8b1a34;font-size:clamp(9px,.9vw,12px)}
#revealButton{position:absolute;top:82%;left:33%;width:34%;height:11%;padding:0 7px;border-radius:25px;font-size:clamp(9px,1.3vw,15px)}
/* Match the approved design's footnote treatment and preserve small clickable credit. */
.footer{font-size:10px;padding:10px 16px;background:#fff6f7}
.footer a b{font-size:11px;color:#9c0923}
/* Keep the personalized six-world reward and D1-backed results unchanged. */
@media(max-width:760px){
 .site-wrap{padding:3px}
 .app-shell{border-radius:13px}
 .top-controls{top:4px;right:4px;gap:3px}
 .top-controls .small-round{height:23px;width:23px;font-size:12px;box-shadow:none}
 .top-controls .timer-pill{height:23px;right:53px;padding:0 5px;font-size:11px;box-shadow:none}
 .school-scene{aspect-ratio:768/415}
 .form-panel input:not([type=checkbox]){font-size:9px;top:auto; height:8%}
 #fullName{top:37.6%}
 #grade{top:46.3%}
 #schoolName{top:55.1%}
 #registerBtn{top:66%}
 .form-panel .consent{top:82%;width:92%;left:4%;font-size:9px;padding:3px 4px}
 .quiz-panel{left:27%;width:69%;top:16%;height:80%;padding:1.8% 2%;border-radius:10px}
 .quiz-panel .category-pill{font-size:8px;padding:2px 5px}
 .quiz-panel h2{font-size:9px;margin:2px 0 3px}
 .option-grid{gap:2px}
 .option{font-size:8px;padding:2px 3px;border-radius:9px}
 .option .bullet{margin-right:2px}
 .feedback{font-size:7px;min-height:10px;padding:1px}
 .quiz-actions{gap:2px;margin-top:1px;padding:0}
 .quiz-actions .primary,.quiz-actions .secondary{font-size:8px;padding:3px 5px;box-shadow:none;border-width:1px}
 .quiz-scene .quiz-head{top:2%;left:59%;width:22%}
 .quiz-scene .quiz-progress{font-size:8px;padding:2px}
 .quiz-scene .progress-track{height:3px;margin-top:0}
 .mascot-scene .lightbulb,.mascot-scene .floating-questions{display:none}
 .stat-grid b{font-size:13px}.stat-grid small{font-size:8px}
 .footer{font-size:8px}
}

/* Phone fallback: preserve the approved mascots but never shrink assessment controls to unreadable size. */
@media(max-width:600px){
 .site-wrap{padding:0}.app-shell{border-radius:0;box-shadow:none}
 .sky-scene{aspect-ratio:auto;min-height:530px;background-size:100% auto;background-position:center top;background-color:#fff0ed}
 #goRegister{left:12%;top:61%;width:76%;height:54px;background:linear-gradient(#ff3348,#d20c2f);box-shadow:0 4px 0 #980729;color:white;font-size:16px;border:2px solid #c71b34}
 .school-scene{aspect-ratio:auto;min-height:610px;background-size:100% auto;background-color:#fff5f1}
 .form-panel input:not([type=checkbox]){left:8%;width:84%;height:46px;border:2px solid #efbbc3;border-radius:24px;background:#fff;font-size:16px;padding:0 15px}
 #fullName{top:205px} #grade{top:266px} #schoolName{top:327px}
 .form-panel .consent{top:400px;left:6%;width:88%;font-size:12px;line-height:1.35;padding:10px;border-radius:13px}
 .form-panel .consent input{height:18px;width:18px}
 #registerBtn{top:501px;left:9%;width:82%;height:50px;background:linear-gradient(#ff3144,#c70027);box-shadow:0 4px 0 #9d1430;color:#fff;font-size:15px;border:2px solid #bd0726}
 .form-panel .form-error{bottom:0;left:5%;width:90%;text-align:center}
 .world-scene{aspect-ratio:auto;min-height:435px;background-size:100% auto;background-color:#edfff4}
 #beginAssessment{top:260px;left:11%;width:78%;height:55px;background:linear-gradient(#ff3448,#d40b27);box-shadow:0 4px 0 #a01630;color:white;font-size:16px;border:2px solid #aa0924}
 .quiz-scene,.quiz-scene:has(.mascot-scene.success),.quiz-scene:has(.mascot-scene.fail){aspect-ratio:auto;min-height:680px;background:linear-gradient(#d7f3ff,#fff3ec);}
 .quiz-scene:before{content:'';position:absolute;top:14px;left:15px;width:185px;height:220px;background:url('/assets/approved-quiz-mascot.webp') center/contain no-repeat;animation:bob 3.8s ease-in-out infinite}
 .quiz-scene .quiz-head{top:142px;left:auto;right:4%;width:49%}
 .quiz-scene .quiz-progress{font-size:12px;padding:5px 8px}
 .quiz-scene .progress-track{height:6px;margin-top:3px}
 .mascot-scene{display:none}
 .quiz-panel{top:250px;left:4%;width:92%;height:auto;min-height:392px;padding:17px;border-radius:25px;box-shadow:0 7px 23px #ce68753d;justify-content:flex-start}
 .quiz-panel .category-pill{font-size:12px;padding:6px 10px}
 .quiz-panel h2{font-size:18px;line-height:1.35;margin:13px 0}
 .option-grid{gap:10px;grid-template-columns:1fr 1fr}
 .option{min-height:55px;font-size:13px;padding:11px 8px;border-radius:15px}
 .option .bullet{margin-right:4px}
 .feedback{font-size:12px;min-height:40px;max-height:85px;padding-top:8px}
 .quiz-actions{gap:8px;margin-top:8px;padding:0}
 .quiz-actions .primary,.quiz-actions .secondary{font-size:13px;padding:10px 10px;box-shadow:0 3px 0 #cda6af}
 .result-screen{aspect-ratio:auto;min-height:600px;background:linear-gradient(#fff0f1,#fff7ed);padding:0}
 .result-screen:before{content:'';position:absolute;top:0;left:0;right:0;height:215px;background:url('/assets/approved-results-top.webp') center top/100% auto no-repeat}
 .stat-grid{top:235px;left:4%;width:92%;height:110px;gap:6px}
 .stat-grid>div{border:1.5px solid #f4c0c9;border-radius:14px;background:#fff;box-shadow:0 4px 12px #d6577022}
 .stat-grid span{font-size:22px}
 .stat-grid b{font-size:20px}
 .stat-grid small{font-size:10px}
 .finish-status{top:360px;left:7%;right:7%;font-size:13px;line-height:1.5}
 #revealButton{top:440px;left:12%;width:76%;height:54px;font-size:16px}
 .footer{font-size:9px}
}