/* No-Spend Town demo. Sized in container units of #stage (1cqw = 1% of its width; the stage is 100cqw × 125cqw). */
#stage{container-type:inline-size;--gold:#F2C14E;--soft:#E7F4EC;--oops:#EEE9F7;--oops-ink:#6F5FA0;background:var(--bg);font-variant-numeric:tabular-nums}
#stage *{box-sizing:border-box}
#stage button{font-family:inherit;-webkit-tap-highlight-color:transparent}
#stage :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ——— HUD: the week and the streak ——— */
.hud{position:absolute;left:0;right:0;top:0;height:11cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:0 3cqw;background:var(--panel);border-bottom:1.5px solid var(--line);z-index:4;transition:opacity .5s,transform .6s}
.days{list-style:none;margin:0;padding:0;display:flex;gap:1.3cqw}
.days li{width:max(23px,6.8cqw);height:max(23px,6.8cqw);border-radius:50%;display:grid;place-items:center;font:700 max(11px,3.2cqw)/1 var(--display);color:var(--mid);background:var(--bg);border:1.5px solid var(--line);transition:background .3s,color .3s,border-color .3s,transform .3s}
.days li span{transform:translateY(.12em)}
.days li.now{border:2px solid var(--accent);color:var(--ink);transform:scale(1.12);background:#fff}
.days li.win{background:var(--accent);border-color:var(--accent);color:#fff}
.days li.oops{background:var(--oops);border-color:#CFC4EA;color:var(--oops-ink)}
.days li.now.win,.days li.now.oops{border-color:var(--ink)}
.days li.pop{animation:dayPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes dayPop{40%{transform:scale(1.35)}}
.streak{display:flex;align-items:center;gap:1cqw;padding:.8cqw 2.4cqw .8cqw 1.6cqw;border-radius:99px;background:#FFF1DC;border:1.5px solid #F5D3A6;white-space:nowrap;transition:background .3s,border-color .3s}
.streak .flame{width:max(14px,4.4cqw);height:max(17px,5.4cqw);display:block}
.streak-ico{display:block}
.streak-n{font:700 max(16px,5cqw)/1 var(--display);color:#C4621B;transform:translateY(.1em)}
.streak-l{font:600 max(10px,2.7cqw)/1 Inter,system-ui,sans-serif;color:var(--mid)}
.streak.zero{background:var(--soft);border-color:#BFE0CC}.streak.zero .streak-n{color:var(--accent)}
.streak.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.16)}}

/* ——— The town ——— */
.scene-wrap{position:absolute;left:0;top:11cqw;width:100cqw;height:60cqw;transform-origin:0 0;z-index:1}
.scene{position:relative;width:100%;height:100%;overflow:visible}
.town-svg{display:block;width:100%;height:100%}
.plot{fill:#E3C595;transition:fill .5s}.lot.built .plot{fill:#EFE3C8}
.lot.built .plot-in,.lot.built .stake{display:none}
.bld{transform-box:fill-box;transform-origin:50% 100%}
.ghost{opacity:.55;pointer-events:none}
.ghost *{fill:none!important;stroke:var(--accent)!important;stroke-width:1.6!important;stroke-dasharray:3.5 3}
.ghost .smoke,.ghost .drop{display:none}
.ghost.ready{opacity:1;animation:ghost 1s ease-in-out infinite}
.ghost.ready *{fill:rgba(47,158,107,.14)!important;stroke-dasharray:none}
@keyframes ghost{50%{opacity:.55}}
.smoke circle{fill:#fff;stroke:#3A2E12;stroke-width:1.2;opacity:0;animation:smoke 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.smoke circle:nth-child(2){animation-delay:-.8s}.smoke circle:nth-child(3){animation-delay:-1.6s}
@keyframes smoke{0%{opacity:0;transform:translate(0,6px) scale(.6)}30%{opacity:.95}100%{opacity:0;transform:translate(4px,-10px) scale(1.3)}}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3.2s ease-in-out infinite}.sway.s2{animation-delay:-1.4s}
@keyframes sway{50%{transform:rotate(3deg)}}
.jet{stroke-dasharray:6 5;animation:jet .6s linear infinite}.jet.j2{animation-delay:-.3s}
@keyframes jet{to{stroke-dashoffset:-11}}
.drop{transform-box:fill-box;transform-origin:center;animation:drop 1.2s ease-in-out infinite}
@keyframes drop{50%{transform:translateY(-3px)}}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 1.4s ease-in-out infinite}
@keyframes flag{50%{transform:scaleX(.82) skewY(4deg)}}
.cloud>g{animation:drift 16s ease-in-out infinite alternate}.cloud.c2>g{animation-duration:21s;animation-delay:-6s}.cloud.c3>g{animation-duration:13s;animation-delay:-3s}
@keyframes drift{to{transform:translateX(26px)}}
.cloud path{transition:fill .8s}
.cloudy .cloud path{fill:#DCE2EA}
.sun{transition:transform 3s cubic-bezier(.4,0,.3,1),opacity .8s}.cloudy .sun{opacity:.55}
.walker{opacity:0;transition:opacity .8s;animation:walkA var(--dur) linear var(--delay) infinite}
.walker.on{opacity:1}
.w1,.w3,.w4{animation-name:walkB;animation-direction:reverse}
@keyframes walkA{from{transform:translate(-24px,173px)}to{transform:translate(424px,173px)}}
@keyframes walkB{from{transform:translate(-24px,166px)}to{transform:translate(424px,166px)}}
.wb{animation:bob .36s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-1.6px)}}
.win{fill:#CFE9F4;transition:fill 1.2s}
/* Day/night and the sunset */
.dusk{opacity:0;transition:opacity .22s}
.night .dusk{opacity:.5}
.stars{opacity:0;transition:opacity 1.6s 1.2s}
.glow-tint{opacity:0;mix-blend-mode:multiply;transition:opacity 2.6s;pointer-events:none}
.sunset .dusk{opacity:1;transition:opacity 2.6s}
.sunset .stars{opacity:1}
.sunset .glow-tint{opacity:.2}
.sunset .sun{transform:translate(-30px,74px)}
.sunset .win{fill:#FFD66B}
.sunset .hill-far{fill:#E7B9A6;transition:fill 2.6s}

/* The bank: a wooden sign with a piggy bank on top */
.bank{position:absolute;left:3%;top:7%;z-index:2}
.board{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:33cqw;padding:1.4cqw 3cqw 1.2cqw;border-radius:2.4cqw;background:linear-gradient(#D69A5C,#C4844A);border:2px solid var(--ink);box-shadow:inset 0 -.9cqw 0 rgba(0,0,0,.08),0 .8cqw 0 rgba(58,46,18,.18);color:#FFF7E6}
.board::before,.board::after{content:"";position:absolute;top:100%;width:max(5px,1.5cqw);height:9cqw;background:#9A6A43;border:2px solid var(--ink);border-top:0;z-index:-1}
.board::before{left:16%}.board::after{right:16%}
.board-t{font:600 max(10px,2.7cqw)/1.1 Inter,system-ui,sans-serif;opacity:.92}
.board-v{font:600 max(12px,3.4cqw)/1.15 var(--display)}
.board-v b{font-weight:700;font-size:max(15px,4.8cqw);color:#fff;text-shadow:0 .25cqw 0 rgba(58,46,18,.35)}
.bank.glint .board{animation:glint .3s}
@keyframes glint{40%{filter:brightness(1.15)}}
.pig-wrap{position:absolute;right:-6.5cqw;top:-6cqw;width:max(40px,12.5cqw);transform-origin:50% 100%}
.pig{display:block;width:100%;overflow:visible}
.pig-wrap.bump{animation:pig .26s ease-out}
@keyframes pig{40%{transform:scale(1.16,.9) translateY(4%)}}

/* Tags on lots: the next goal, and buildings ready to place */
.tags{position:absolute;inset:0;z-index:3;pointer-events:none}
.tag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:auto}
.goal{display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding:.9cqw 2cqw 1.1cqw;border-radius:2.4cqw;background:rgba(255,255,255,.94);border:1.5px solid var(--line);box-shadow:0 .6cqw 0 rgba(58,46,18,.08);pointer-events:none}
.goal-t{font:700 max(10px,2.7cqw)/1 var(--display);color:var(--ink);transform:translateY(.1em)}
.goal-bar{display:block;width:100%;min-width:14cqw;height:max(4px,1.1cqw);border-radius:9px;background:rgba(58,46,18,.1);overflow:hidden}
.goal-bar i{display:block;height:100%;background:var(--accent);border-radius:9px;transform-origin:0 50%;transition:transform .25s}
.build{font:700 max(12px,3.3cqw)/1 var(--display);padding:1.6cqw 3cqw 1.3cqw;border-radius:99px;border:2px solid var(--ink);background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 .8cqw 0 rgba(58,46,18,.25);animation:callout 1s ease-in-out infinite;min-height:28px}
.build:hover{filter:brightness(1.06)}
@keyframes callout{50%{transform:translate(-50%,-112%)}}
.note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;display:flex;flex-direction:column;align-items:center;padding:2cqw 5cqw;border-radius:4cqw;background:#fff;border:2px solid var(--ink);box-shadow:0 1cqw 0 rgba(58,46,18,.15);z-index:3;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1);text-align:center}
.note.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.note b{font:700 max(17px,5.4cqw)/1.1 var(--display);color:var(--accent)}
.note span{font:600 max(12px,3.4cqw)/1.3 Inter,system-ui,sans-serif;color:var(--mid)}

/* Town value strip */
.value{position:absolute;left:0;right:0;top:71cqw;height:8cqw;display:flex;align-items:center;justify-content:center;gap:1.6cqw;background:#F3E9D2;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);font:600 max(12px,3.4cqw)/1 Inter,system-ui,sans-serif;color:var(--ink);z-index:2;transition:opacity .5s}
.value b{font:700 max(15px,4.6cqw)/1 var(--display);color:var(--accent);margin-left:.6cqw}
.value small{font:600 max(11px,3cqw)/1 Inter,system-ui,sans-serif;color:var(--mid)}

/* Tray of today's temptations */
.tray{position:absolute;left:0;right:0;top:79cqw;bottom:0;display:flex;flex-direction:column;gap:2cqw;padding:2.6cqw 3.4cqw 3cqw;background:var(--bg);z-index:2;transition:opacity .5s,transform .6s}
.tray-h{display:flex;align-items:baseline;justify-content:space-between}
.tray-t{margin:0;font:700 max(16px,4.8cqw)/1 var(--display);color:var(--ink)}
.tray-day{font:700 max(11px,3cqw)/1 Inter,system-ui,sans-serif;color:var(--accent);background:var(--soft);padding:1cqw 2.4cqw;border-radius:99px}
.cards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;min-height:0}
.card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;padding:1.4cqw 1cqw;border-radius:3.6cqw;background:var(--panel);border:2px solid var(--ink);box-shadow:0 1.1cqw 0 rgba(58,46,18,.16);cursor:pointer;color:var(--ink);transition:transform .15s,box-shadow .15s,background .3s,border-color .3s;min-height:0}
.card:hover{transform:translateY(-.5cqw)}
.card:active,.card.press{transform:translateY(.8cqw);box-shadow:0 .3cqw 0 rgba(58,46,18,.16)}
.card .ico{width:max(32px,10cqw);height:max(32px,10cqw);display:block;transition:transform .3s,opacity .3s}
.card-n{font:600 max(11px,3cqw)/1.1 Inter,system-ui,sans-serif;color:var(--mid);text-align:center}
.card-p{font:700 max(15px,4.8cqw)/1 var(--display);transform:translateY(.08em)}
.card-s{display:none;font:700 max(11px,3cqw)/1.1 Inter,system-ui,sans-serif;color:var(--accent)}
.card-k{position:absolute;top:1.2cqw;left:1.8cqw;font:700 max(9px,2.3cqw)/1 Inter,system-ui,sans-serif;color:var(--mid);opacity:0}
@media (hover:hover) and (pointer:fine){.card-k{opacity:.6}}
.auto .card-k{display:none}
.card.done{background:var(--soft);border-color:var(--accent);box-shadow:0 .4cqw 0 rgba(47,158,107,.25);cursor:default;transform:none}
.card.done .ico{opacity:.45;transform:scale(.86)}
.card.done .card-n{display:none}.card.done .card-s{display:block}
.card.done .card-p{color:var(--accent)}
.card.done .card-k{display:none}
.tray-f{display:flex;align-items:center;gap:2.4cqw;min-height:9.5cqw}
.tray-hint{flex:1;margin:0;font:600 max(11px,3cqw)/1.25 Inter,system-ui,sans-serif;color:var(--mid)}
#stage .next{flex:none;font-size:max(14px,4cqw);padding:2cqw 3.6cqw 1.7cqw;border-radius:3cqw;border:2px solid var(--ink);box-shadow:0 .8cqw 0 rgba(58,46,18,.2);transition:opacity .2s,transform .15s,box-shadow .15s;min-height:40px}
#stage .next:disabled{opacity:.35;cursor:default;box-shadow:none}
#stage .next:not(:disabled):active,#stage .next.press{transform:translateY(.6cqw);box-shadow:0 .2cqw 0 rgba(58,46,18,.2)}
#stage .next.nudge{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{50%{transform:scale(1.05)}}

/* The oops moment */
.cards.oops{display:flex}
.oops-card{flex:1;display:flex;align-items:center;gap:3cqw;padding:2cqw 3.4cqw;border-radius:3.6cqw;background:var(--oops);border:2px solid var(--ink);box-shadow:0 1.1cqw 0 rgba(58,46,18,.14);transition:background .4s}
.oops-card .ico{flex:none;width:max(40px,13cqw);height:max(40px,13cqw)}
.oops-txt{flex:1;display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.oops-txt b{font:700 max(15px,4.6cqw)/1.1 var(--display);color:var(--ink)}
.oops-txt span{font:500 max(11px,3.1cqw)/1.3 Inter,system-ui,sans-serif;color:var(--mid)}
#stage .log{flex:none;font-size:max(14px,4cqw);padding:2cqw 3.6cqw 1.7cqw;border-radius:3cqw;border:2px solid var(--ink);background:var(--oops-ink);color:#fff;box-shadow:0 .8cqw 0 rgba(58,46,18,.2);min-height:40px}
#stage .log.press,#stage .log:active{transform:translateY(.6cqw);box-shadow:none}
.oops-card.logged{background:var(--soft)}
.oops-card.logged .oops-txt b{color:var(--accent)}

/* Flying things */
.coin{position:absolute;width:max(19px,6.2cqw);height:max(19px,6.2cqw);border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF2B8,#F2C14E 55%,#D99A2B);box-shadow:inset 0 0 0 1.5px #B9862C,0 1px 0 rgba(0,0,0,.18);z-index:15;pointer-events:none;display:grid;place-items:center}
.coin::after{content:"$";font:700 max(12px,3.9cqw)/1 var(--display);color:#9A6312;transform:translateY(.1em)}
.fly{position:absolute;width:max(32px,10cqw);height:max(32px,10cqw);z-index:14;pointer-events:none}
.fly .ico{width:100%;height:100%;display:block}
.plus{position:absolute;z-index:16;pointer-events:none;font:700 max(17px,5.6cqw)/1 var(--display);color:var(--accent);white-space:nowrap;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.dust{position:absolute;width:max(9px,3cqw);height:max(9px,3cqw);border-radius:50%;background:#F4E8CF;border:1.5px solid #CDB58A;z-index:3;pointer-events:none}
.spark{position:absolute;width:max(9px,2.8cqw);height:max(9px,2.8cqw);background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);z-index:3;pointer-events:none}
.built-lab{position:absolute;z-index:4;pointer-events:none;white-space:nowrap;font:700 max(13px,3.8cqw)/1 var(--display);color:#fff;background:var(--accent);border:2px solid var(--ink);border-radius:99px;padding:1.3cqw 2.8cqw 1cqw;transform:translate(-50%,-100%)}
.pointer{position:absolute;width:max(30px,9cqw);z-index:30;opacity:0;pointer-events:none;transform:translate(-32%,-6%);transition:left .36s cubic-bezier(.4,0,.2,1),top .36s cubic-bezier(.4,0,.2,1),opacity .25s;filter:drop-shadow(0 1cqw 1cqw rgba(58,46,18,.25))}
.pointer svg{display:block;width:100%;transition:transform .1s}
.pointer.tap svg{transform:scale(.84)}
.ripple{position:absolute;width:max(40px,13cqw);height:max(40px,13cqw);border-radius:50%;border:3px solid var(--accent);z-index:29;pointer-events:none}

/* Intro */
.intro{position:absolute;left:0;right:0;top:57cqw;bottom:0;z-index:8;display:flex;align-items:stretch;padding:0 3.4cqw 3.4cqw;background:linear-gradient(to bottom,transparent,var(--bg) 5cqw)}
.intro-card{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.8cqw;padding:4cqw 5cqw;border-radius:4.4cqw;background:var(--panel);border:2px solid var(--ink);box-shadow:0 1.2cqw 0 rgba(58,46,18,.16)}
.intro .kicker{margin:0;font:700 max(10px,2.7cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.intro h2{margin:0;font:700 max(20px,6.4cqw)/1.02 var(--display);color:var(--ink)}
.intro p{margin:0;font:500 max(12px,3.4cqw)/1.35 Inter,system-ui,sans-serif;color:var(--mid)}
#stage .start{margin-top:1cqw;font-size:max(15px,4.4cqw);border:2px solid var(--ink);box-shadow:0 .9cqw 0 rgba(58,46,18,.22)}

/* The end: sunset pan, then the weekly summary and the call to action */
.ending .scene-wrap{z-index:5}
.ending .hud{opacity:0;transform:translateY(-100%);transition-delay:.3s}
.ending .value{opacity:0;transition-delay:.3s}
.ending .tray{opacity:0;transform:translateY(30%);transition-delay:.3s}
.ending .tags{display:none}
#stage.ending{background:var(--bg)}
.ended .scene-wrap{border-radius:4.6cqw;overflow:hidden;box-shadow:0 0 0 2.4px var(--ink),0 1.6cqw 0 2.4px rgba(58,46,18,.16);transition:border-radius .5s}
.summary{position:absolute;left:4cqw;right:4cqw;top:51.6cqw;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.7cqw;padding:2.2cqw 4cqw 2.4cqw;border-radius:4.4cqw;background:var(--panel);border:2px solid var(--ink);box-shadow:0 1.2cqw 0 rgba(58,46,18,.16);text-align:center}
.summary p{margin:0}
.sum-k{font:700 max(10px,2.6cqw)/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sum-l{font:600 max(13px,3.8cqw)/1.1 var(--display);color:var(--mid)}
.sum-v{font:700 max(36px,12cqw)/.9 var(--display);color:var(--accent);letter-spacing:-.01em;transform:translateY(.06em)}
.sum-l2{font:600 max(11px,2.9cqw)/1.2 Inter,system-ui,sans-serif;color:var(--mid)}
.sum-chips{display:flex;gap:2cqw;margin-top:.6cqw}
.sum-chips em{font-style:normal}
.sum-chips span{display:flex;align-items:center;gap:1cqw;padding:.8cqw 2.4cqw .8cqw 1.4cqw;border-radius:99px;background:var(--bg);border:1.5px solid var(--line);font:600 max(11px,3cqw)/1 Inter,system-ui,sans-serif;color:var(--mid);white-space:nowrap}
.sum-chips b{font:700 max(14px,4.2cqw)/1 var(--display);color:var(--ink)}
.sum-chips svg{width:max(16px,5cqw);height:max(16px,5cqw);display:block}
.sum-chips .badge{width:max(20px,6cqw);height:max(16px,4.8cqw)}
.sum-y{margin-top:.4cqw!important;padding:1.2cqw 3.4cqw .9cqw;border-radius:99px;background:#FFF0C2;font:600 max(14px,4.2cqw)/1.1 var(--display);color:var(--ink)}
.sum-y b{color:#B87210}
#stage #cta{inset:auto 0 0 0;z-index:7;flex-flow:row wrap;align-content:center;gap:1cqw 2.4cqw;padding:1cqw 4cqw 3cqw;background:transparent}
#stage #cta h2{flex-basis:100%;font-size:max(21px,6.6cqw)}
#stage #cta p{flex-basis:100%;font-size:max(11.5px,3.2cqw);line-height:1.3;margin-bottom:.6cqw}
#stage #cta .btn{font-size:max(14px,4cqw);padding:2.2cqw 4.4cqw 1.9cqw;border:2px solid var(--ink)}
#stage #cta .btn.ghost{border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){.walker{transform:translate(120px,173px)}.w1{transform:translate(260px,166px)}.w2{transform:translate(330px,173px)}.w3{transform:translate(60px,166px)}.w4{transform:translate(180px,166px)}.w5{transform:translate(380px,173px)}}