:root { color-scheme: light; --ink:#153c47; --muted:#58717a; --paper:#fffaf0; --teal:#168b89; --teal-dark:#0c5d62; --coral:#f06e4f; --coral-dark:#aa3f2c; --gold:#f7bd3b; --sky:#94d9e9; --blue:#3d81bd; font-family:"Avenir Next","Trebuchet MS",system-ui,sans-serif; font-synthesis:none; }
*{box-sizing:border-box} [hidden]{display:none!important} html,body{width:100%;height:100%;min-width:980px;min-height:650px;overflow:hidden} body{margin:0;color:var(--ink);background:#85cfe1} button{color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} button:disabled{cursor:default;opacity:.35} :focus-visible{outline:4px solid #083d65;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lesson{height:100%;padding:14px}.city{position:relative;height:100%;min-height:620px;overflow:hidden;isolation:isolate;border:1px solid #75b9c9;border-radius:25px;background:#9dddec url("art/block-city-backdrop-01.webp") center/cover no-repeat;box-shadow:0 9px 0 #66adbd,0 22px 50px rgba(12,62,72,.24)}.city::after{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(90deg,rgba(19,69,80,.18),transparent 35%,transparent 78%,rgba(19,69,80,.08))}
.site-hud{position:absolute;z-index:10;left:20px;right:20px;top:18px;height:67px;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:18px}.mission-chip,.challenge-meter,.scoreboard{border:1px solid rgba(18,58,66,.2);background:rgba(255,250,240,.94);box-shadow:0 5px 0 rgba(21,75,78,.16);backdrop-filter:blur(9px)}.mission-chip{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:10px 16px;border-radius:14px}.mission-chip span,.challenge-meter span,.scoreboard span,.blueprint>span,.readout span,.target-banner span{color:var(--muted);font-size:10px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase}.mission-chip strong{margin-top:3px;font-size:16px}.challenge-meter{justify-self:center;width:min(350px,100%);display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:9px 15px;border-radius:14px}.challenge-meter span b{color:var(--ink);font-size:15px}.challenge-meter strong{font-size:12px}.challenge-meter>i{grid-column:1/-1;height:7px;overflow:hidden;border-radius:99px;background:#d8e4df}.challenge-meter>i b{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--coral));transition:width 220ms ease-out}.scoreboard{height:67px;display:flex;align-items:stretch;padding:7px;border-radius:14px}.scoreboard>div{min-width:68px;display:grid;place-content:center;padding:0 11px;text-align:center}.scoreboard>div+div{border-left:1px solid #d5ddd8}.scoreboard strong{display:block;margin-top:2px;font-size:21px;line-height:1}.scoreboard strong i{color:#e29513;font-size:15px;font-style:normal}
.foreman-panel{position:absolute;z-index:3;left:22px;top:102px;bottom:23px;width:220px;padding:15px;border:1px solid rgba(17,69,76,.22);border-radius:20px;background:linear-gradient(180deg,rgba(255,250,240,.93),rgba(221,244,236,.92));box-shadow:0 7px 0 rgba(20,73,75,.18),0 18px 35px rgba(19,59,68,.16)}.mascot-wrap{height:250px;display:flex;align-items:flex-end;justify-content:center;transition:transform 180ms ease-out}.mascot-wrap img{width:188px;max-height:246px;object-fit:contain;filter:drop-shadow(0 8px 4px rgba(27,62,66,.24))}.speech{position:relative;margin:-3px 2px 17px;padding:13px 14px;border:2px solid #9abbb4;border-radius:16px;background:white;font-size:13px;font-weight:850;line-height:1.3}.speech::before{position:absolute;left:35px;top:-10px;width:16px;height:16px;content:"";transform:rotate(45deg);border-left:2px solid #9abbb4;border-top:2px solid #9abbb4;background:white}.blueprint{position:absolute;left:15px;right:15px;bottom:16px;padding:13px;border:2px dashed #5c9d9d;border-radius:14px;background:#dff4ee}.blueprint-row{display:flex;align-items:center;gap:9px;margin-top:7px}.blueprint-row b{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:white;background:var(--teal)}.blueprint-row strong{font-size:13px}.stamp-track{display:flex;gap:6px;margin-top:12px}.stamp-track i{height:7px;flex:1;border-radius:99px;background:#b5d4ca}.stamp-track i.is-filled{background:var(--coral);box-shadow:0 0 0 2px rgba(240,110,79,.13)}
.build-card{position:absolute;z-index:3;left:260px;right:23px;top:102px;bottom:23px;display:grid;grid-template-rows:auto auto minmax(210px,1fr) auto auto auto;align-content:start;padding:18px 26px 20px;overflow:hidden;border:1px solid #ddd2bf;border-radius:21px;background:rgba(255,250,240,.965);box-shadow:0 8px 0 rgba(26,79,75,.19),0 22px 43px rgba(22,59,61,.17)}.mission-copy{text-align:center}.mission-copy span{color:var(--coral-dark);font-size:10px;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}.mission-copy h1{margin:4px 0 3px;font-size:clamp(25px,2.65vw,38px);line-height:1;letter-spacing:-.04em}.mission-copy p{margin:0;color:var(--muted);font-size:13px}.target-banner{position:absolute;right:25px;top:18px;min-width:95px;padding:7px 12px;border:2px solid #dd9d25;border-radius:12px;background:#fff1b9;text-align:center;transform:rotate(1deg);box-shadow:0 4px 0 rgba(133,85,7,.16)}.target-banner strong{display:block;margin-top:1px;font-size:24px;line-height:1}.tower-yard{min-height:0;display:flex;align-items:stretch;gap:10px;margin-top:10px;padding:7px 5px 0;transition:opacity 180ms ease-out,filter 180ms ease-out}.tower-yard.is-predicting{opacity:.5;filter:saturate(.75)}.column{flex:1 1 0;min-width:0;display:grid;grid-template-rows:34px 1fr 44px;border:2px solid #b8c8c3;border-radius:15px 15px 10px 10px;background:linear-gradient(#f9fcf8,#edf3ec);overflow:hidden;transition:opacity 160ms ease-out,transform 160ms ease-out}.column.is-locked{display:none}.column-controls{z-index:2;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;border-bottom:1px solid #cbd6d2;background:#fff}.column-controls button{height:100%;border:0;background:#e4f1ed;font-size:20px;font-weight:1000}.column-controls button:hover{background:#cae8dd}.column-controls button:active{background:var(--gold);transform:scale(.9)}.column-controls b{text-align:center;font-size:19px}.block-stack{min-height:112px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:3px;padding:7px 8px 4px;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(70,119,120,.055) 22px 23px)}.block{width:min(85px,82%);height:17px;flex:0 0 17px;border:2px solid #0b5a61;border-radius:4px;background:linear-gradient(180deg,#5fc6bd,#20a09a);box-shadow:inset 0 3px rgba(255,255,255,.35),0 2px 0 #0a6568;animation:block-pop 190ms cubic-bezier(.2,.9,.3,1.3) both}.column[data-place="ones"] .block{width:29px;background:linear-gradient(#ffc95b,#efa61b);border-color:#8f5c05;box-shadow:inset 0 3px rgba(255,255,255,.42),0 2px 0 #9d670c}.column[data-place="hundreds"] .block{background:linear-gradient(#f48f73,#e65f42);border-color:#8d3525;box-shadow:inset 0 3px rgba(255,255,255,.35),0 2px 0 #963a27}.column[data-place="thousands"] .block{background:linear-gradient(#82a9df,#467dbe);border-color:#244f81;box-shadow:inset 0 3px rgba(255,255,255,.35),0 2px 0 #285689}.place-sign{display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:2px solid #8da7a1;background:#dbeae3}.place-sign strong{font-size:12px}.place-sign span{color:var(--muted);font-size:10px;font-weight:800}
.readout{justify-self:center;min-width:330px;padding:7px 25px;border:2px solid #204f59;border-radius:14px;background:white;box-shadow:0 4px 0 #c8d4cf;text-align:center}.readout strong{display:inline-block;margin:0 12px;font-size:31px;line-height:1}.readout small{color:var(--teal-dark);font-size:12px;font-weight:900}.feedback{min-height:26px;display:grid;place-items:center;color:var(--teal-dark);font-size:13px;font-weight:900;text-align:center}.feedback.is-error{color:var(--coral-dark)}.action-area{min-height:66px;display:flex;align-items:center;justify-content:center;gap:10px}.choice-grid{width:min(580px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice,.primary{min-height:54px;border:2px solid #b4c6c0;border-radius:13px;background:white;box-shadow:0 5px 0 #d2ddd7;font-weight:1000;transition:transform 130ms ease-out,box-shadow 130ms ease-out}.choice{font-size:22px}.choice:hover,.primary:hover{transform:translateY(-2px)}.choice:active,.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #c4d3ce}.primary{min-width:210px;padding:0 23px;border-color:var(--teal-dark);color:white;background:var(--teal);box-shadow:0 6px 0 var(--teal-dark);font-size:15px}.primary.coral{border-color:var(--coral-dark);background:var(--coral);box-shadow:0 6px 0 var(--coral-dark)}.explain-grid .choice{padding:6px 10px;font-size:13px}.city.is-missing .build-card{animation:miss 300ms ease-out}.city.is-celebrating .confetti i{animation:confetti 720ms ease-out both}.city.is-celebrating .mascot-wrap{transform:translateY(-8px) rotate(-3deg) scale(1.05)}
.merge-beam{position:absolute;z-index:20;left:calc(260px + 72%);top:42%;width:180px;height:95px;opacity:0;pointer-events:none}.merge-beam i{position:absolute;width:20px;height:20px;border:2px solid #8f5c05;border-radius:5px;background:var(--gold)}.merge-beam b{position:absolute;left:-80px;top:45px;width:220px;padding:9px;border-radius:99px;color:white;background:var(--teal-dark);text-align:center;font-size:14px}.city.is-merging .merge-beam{animation:beam-show 750ms ease-out both}.merge-beam i:nth-child(1){left:0;top:0}.merge-beam i:nth-child(2){left:25px;top:0}.merge-beam i:nth-child(3){left:50px;top:0}.merge-beam i:nth-child(4){left:75px;top:0}.merge-beam i:nth-child(5){left:100px;top:0}.merge-beam i:nth-child(6){left:0;top:25px}.merge-beam i:nth-child(7){left:25px;top:25px}.merge-beam i:nth-child(8){left:50px;top:25px}.merge-beam i:nth-child(9){left:75px;top:25px}.merge-beam i:nth-child(10){left:100px;top:25px}.city.is-merging .merge-beam i{animation:merge-block 650ms ease-in both}.confetti{position:absolute;z-index:22;left:56%;top:48%;pointer-events:none}.confetti i{position:absolute;width:12px;height:17px;opacity:0;border-radius:3px;background:var(--gold)}.confetti i:nth-child(2n){background:var(--coral)}.confetti i:nth-child(3n){background:var(--teal)}.confetti i:nth-child(1){--x:-110px;--y:-100px}.confetti i:nth-child(2){--x:-55px;--y:-130px}.confetti i:nth-child(3){--x:15px;--y:-125px}.confetti i:nth-child(4){--x:95px;--y:-95px}.confetti i:nth-child(5){--x:125px;--y:0}.confetti i:nth-child(6){--x:65px;--y:80px}.confetti i:nth-child(7){--x:-30px;--y:95px}.confetti i:nth-child(8){--x:-125px;--y:30px}.toast{position:absolute;z-index:30;left:58%;bottom:35px;max-width:65%;padding:10px 18px;opacity:0;transform:translate(-50%,12px);border-radius:99px;color:white;background:var(--ink);font-size:13px;font-weight:900;transition:opacity 150ms ease-out,transform 150ms ease-out;pointer-events:none}.toast.is-showing{opacity:1;transform:translate(-50%,0)}
.builder-flourish{position:absolute;z-index:21;right:2%;top:17%;width:185px;opacity:0;transform:translateY(20px) rotate(5deg) scale(.7);pointer-events:none;filter:drop-shadow(0 8px 5px rgba(23,59,62,.2))}.city.is-celebrating .builder-flourish{animation:flourish-pop 720ms ease-out both}
@keyframes block-pop{from{opacity:0;transform:translateY(-10px) scale(.7)}}@keyframes miss{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}@keyframes confetti{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(240deg) scale(1)}}@keyframes flourish-pop{0%{opacity:0;transform:translateY(20px) rotate(5deg) scale(.7)}28%,72%{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}100%{opacity:0;transform:translateY(-18px) rotate(2deg) scale(1.04)}}@keyframes beam-show{0%{opacity:0;transform:scale(.7)}20%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translate(-130px,-15px) scale(.65)}}@keyframes merge-block{to{transform:translate(-120px,-10px) scale(.18);opacity:0}}
@media(max-height:740px){.site-hud{top:12px}.foreman-panel,.build-card{top:90px;bottom:17px}.mascot-wrap{height:190px}.mascot-wrap img{max-height:190px}.build-card{padding-top:14px}.block-stack{min-height:92px}.block{height:14px;flex-basis:14px}.action-area{min-height:56px}.choice,.primary{min-height:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}