/* Bright, large and touch-friendly: everything is a big button, text is short.
   Sizes are in rem and the root size follows the screen, so the whole page scales; the layout has three modes (see the end of the file). */
:root{--ink:#1f3a52;--card:#fff;--green:#2fbf71;--green-d:#1f9a58;--orange:#ff9f1c;--orange-d:#d97f00;--line:#d5e6f2;--gold:#ffd23f;--radius:1.4rem;--vh:100vh}
@supports(height:100dvh){:root{--vh:100dvh}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(13px,min(1.45vw,2.2vh),22px)}
body{margin:0;height:var(--vh);overflow:hidden;color:var(--ink);background:linear-gradient(#a9deff,#e9f8ff 60%,#d6f3c9);font:600 1.0625rem/1.35 ui-rounded,"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:.25rem solid #1d6fd6;outline-offset:.2rem}

/* Landscape (computers, tablets, phones held sideways): the scene on the left as big as the screen allows,
   the foreman and the choices in one column on the right. --scene-w is the widest scene that leaves room for that column and fits the height. */
#app{--pad:1rem;--gap:1rem;--hud:3.4rem;--panel-w:24rem;--panel-max:34rem;
 --avail-h:calc(var(--vh) - var(--hud) - var(--gap) - var(--pad)*2);
 --scene-w:min(calc(100vw - var(--panel-w) - var(--gap) - var(--pad)*2),calc(var(--avail-h)*1.4286));
 --content-w:min(100%,calc(var(--scene-w) + var(--gap) + var(--panel-max)));
 height:var(--vh);padding:var(--pad);display:grid;grid-template-columns:var(--content-w);grid-template-rows:var(--hud) minmax(0,1fr);gap:var(--gap);justify-content:center}
.stage{display:grid;grid-template-columns:var(--scene-w) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"scene talk" "scene panel";gap:var(--gap);min-height:0}

.hud{display:flex;align-items:center;gap:.7rem;min-width:0}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.3rem;white-space:nowrap}
.logo span{font-size:1.75rem}
.steps{display:flex;gap:.4rem;flex:1;min-width:0;justify-content:center}
.dot{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:#fff;border:.19rem solid var(--line);font-style:normal;font-size:.88rem;font-weight:800;color:#7b96ab}
.dot.done{background:var(--green);border-color:var(--green-d);color:#fff}
.dot.now{border-color:var(--orange);color:var(--orange-d);transform:scale(1.18);box-shadow:0 0 0 .25rem #ffe3b0}
.coins{min-width:8.5rem;text-align:center;background:#fff;border:.19rem solid var(--gold);border-radius:999px;padding:.25rem .9rem;font-size:1.3rem;white-space:nowrap}
.coins b{font-size:1.5rem}
.coins small{margin-left:.4rem;color:#d6455d;font-size:1.05rem;font-weight:800}
.icon{width:3rem;height:3rem;border-radius:50%;border:.19rem solid var(--line);background:#fff;font-size:1.35rem;line-height:1;padding:0}
.icon:active{transform:scale(.94)}

.scene{grid-area:scene;align-self:center;position:relative;width:var(--scene-w);transition:width .35s ease;aspect-ratio:600/420;overflow:hidden;border-radius:1.6rem;border:.3rem solid #fff;box-shadow:0 .5rem 0 #9cc9e6,0 .9rem 1.8rem #3b6f9433;background:#7cc8ff;touch-action:manipulation}
.scene svg,#house{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene.bump{animation:bump .14s ease-out}
.world{position:absolute;inset:0}
#fx{position:absolute;inset:0;pointer-events:none}
#fx span{position:absolute;font-size:calc(var(--scene-w)*.043);animation:spark .8s ease-out forwards}
#fx span.fall{top:-30px;animation:fall 2.4s linear forwards;font-size:calc(var(--scene-w)*.05)}
#fx .banner{position:absolute;left:50%;top:10%;padding:.35rem 1.2rem;border-radius:999px;background:#fff;border:.25rem solid #ffc46b;font-size:calc(var(--scene-w)*.043);font-weight:900;white-space:nowrap;animation:banner 1.9s ease-out forwards}

.panel,.talk{background:var(--card);border-radius:var(--radius);border:.25rem solid #fff;box-shadow:0 .5rem 0 #9cc9e6;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;min-height:0;min-width:0;overflow:auto}
.talk{grid-area:talk;gap:.45rem;padding:.9rem 1.1rem}
.panel{grid-area:panel}
.panel.start,.panel.brief{justify-content:center}
.panel.start>.big,.panel.brief>.big{margin-top:.5rem}
.panel.brief{gap:.55rem}
.panel>.big{margin-top:auto;position:sticky;bottom:.4rem}
.panel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.4rem .7rem}
.stage-head{margin:0;font-size:1.6rem;line-height:1.1}
.stage-head small{display:block;margin-bottom:.15rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#6a8aa3;font-weight:800}
.mascot{display:flex;gap:.7rem;align-items:center}
.avatar{flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:#ffe27a;border:.19rem solid var(--gold);font-size:2.1rem;animation:bob 2.4s ease-in-out infinite}
.bubble{position:relative;flex:1;margin:0;padding:.65rem .95rem;background:#eaf6ff;border-radius:1rem;min-height:3.2rem;display:flex;align-items:center;font-size:1.15rem}
.bubble::before{content:"";position:absolute;left:-.5rem;top:50%;margin-top:-.5rem;border:.5rem solid transparent;border-left:0;border-right-color:#eaf6ff}
.label{margin:0;font-size:1.15rem;font-weight:800}
.tag{align-self:flex-start;padding:.25rem .7rem;border-radius:999px;font-size:.85rem;font-weight:800}
.tag.strong{background:#dff0ff;color:#1b5fa6}
.tag.pretty{background:#ffe6f2;color:#b3306c}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;flex:1 1 auto;min-height:10.5rem;max-height:21rem}
.card{position:relative;display:grid;grid-template-rows:3.6rem auto auto auto;align-content:center;gap:.35rem;justify-items:center;padding:.75rem .3rem;background:#fff;border:.19rem solid var(--line);border-bottom-width:.44rem;border-radius:1.1rem;text-align:center;transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-.12rem)}
.card:active{transform:translateY(.12rem)}
.card .ico{font-size:3.2rem;line-height:3.6rem}
.card b{font-size:1.15rem;line-height:1.15}
.card .cost{font-size:1.1rem;letter-spacing:-.12rem}
.card.on{border-color:var(--green);background:#eafaf1;transform:translateY(-.2rem)}
.card.off{opacity:.45;filter:grayscale(.8)}
.card.off::after{content:"🔒";position:absolute;top:.35rem;right:.5rem;font-size:1.1rem}

.fears{display:flex;gap:.2rem;justify-content:center;align-items:center;min-height:1.65rem}
.fear{font-style:normal;font-size:1.05rem;line-height:1;padding:.12rem .25rem;border-radius:.5rem;background:#eef2f6;filter:grayscale(.7);opacity:.7}
.fear.hit{background:#ffd9d9;box-shadow:0 0 0 .13rem #e5484d;filter:none;opacity:1;animation:pulse 1s ease-in-out infinite}
.fear.safe{background:#dcf5e5;filter:none;opacity:1}
.forecast{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem;font-weight:800;color:#6a8aa3}
.forecast>span:first-child{display:none}
.hz-chip{display:inline-flex;gap:.25rem;align-items:center;padding:.2rem .65rem;border-radius:999px;background:#fff0d9;border:.13rem solid #ffc46b;color:#7a4b00}
.hz-chip.now{background:#ffe3b0;border-color:var(--orange);animation:pulse .7s ease-in-out infinite}
.hz-chip.ok{background:#dcf5e5;border-color:var(--green);color:#1a6b3e}
.hz-chip.bad{background:#ffd9d9;border-color:#e5484d;color:#8b1d1d}
.hz-list{display:grid;gap:.55rem}
.hz{display:flex;gap:.75rem;align-items:center;padding:.5rem .8rem;border-radius:1rem;background:#fff0d9;border:.19rem solid #ffc46b}
.hz.finale{background:#e3ecf7;border-color:#7d9ec9}
.hz.finale small{color:#47607f}
.hz.now{background:#ffe3b0;border-color:var(--orange);animation:pulse .7s ease-in-out infinite}
.hz.ok{background:#dcf5e5;border-color:var(--green)}
.hz.bad{background:#ffd9d9;border-color:#e5484d}
.hz.wait{opacity:.65}
.hz-ico{font-size:2.4rem;line-height:1}
.hz b{display:block;font-size:1.2rem}
.hz small{color:#8a6a2a;font-weight:700;font-size:.95rem}
.hz .state{margin-left:auto;font-size:1.6rem}
.link{align-self:center;background:none;border:0;padding:.75rem 1rem;color:#6a8aa3;font-weight:800;text-decoration:underline}
.rows{display:grid;gap:.4rem}
.row{display:flex;gap:.5rem;align-items:center;padding:.3rem .6rem;border-radius:.75rem;background:#e6f9ee;font-size:.95rem;line-height:1.22}
.row.bad{background:#ffeede}
.row span{font-size:1.4rem;line-height:1}
.big{flex:none;width:100%;min-height:3.75rem;padding:.6rem 1.1rem;border:0;border-radius:1.1rem;font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:.01em}
.big.go{background:var(--green);box-shadow:0 .38rem 0 var(--green-d)}
.big.hammer{background:var(--orange);box-shadow:0 .38rem 0 var(--orange-d);min-height:5.25rem;font-size:1.75rem;animation:pulse 1s ease-in-out infinite}
.big.hammer span{display:inline-block;font-size:2.25rem;vertical-align:-.25rem}
.big:active:not(:disabled){transform:translateY(.3rem);box-shadow:none}
.big:disabled{background:#c5d3de;box-shadow:0 .38rem 0 #a3b4c2;color:#fff;cursor:not-allowed}

.swatches{display:flex;gap:.65rem;flex-wrap:wrap}
.swatch{width:3rem;height:3rem;border-radius:50%;background:var(--c);border:.25rem solid #fff;box-shadow:0 0 0 .19rem var(--line),0 .25rem 0 #0002;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 .25rem var(--ink),0 .25rem 0 #0002;transform:scale(1.12)}

.bricks{display:flex;gap:.4rem}
.bricks i{flex:1;height:1.65rem;border-radius:.4rem;background:#e3ecf3;border:.19rem solid #c7d6e2;transition:background .1s,transform .1s}
.bricks i.on{background:#e0654a;border-color:#b84430;transform:scale(1.05)}
.fact{background:#fff8dc;border:.19rem solid var(--gold);border-radius:1rem;padding:.7rem .95rem}
.fact b{font-size:1.2rem}
.fact p{margin:.25rem 0 0;font-size:1.15rem}

.title-card{position:relative;display:flex;gap:.9rem;align-items:center;padding:.6rem .9rem;border-radius:1.1rem;background:#e6f9ee}
.title-card.bad{background:#ffeede}
.title-card small{color:#6a8aa3;font-weight:800}
.title-card h2{margin:0;font-size:1.65rem;line-height:1.1}
.title-card .lead{margin:.2rem 0 0;font-size:1rem;line-height:1.25;font-weight:600}
.talk:empty{display:none}
.big-ico{font-size:3.2rem;line-height:1}
.new{position:absolute;top:-.55rem;right:.6rem;padding:.15rem .75rem;border-radius:999px;background:var(--gold);font-size:.95rem;font-weight:900;animation:pulse 1s ease-in-out infinite}
.stars{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.star{display:grid;justify-items:center;gap:.05rem;padding:.3rem .25rem;border-radius:.9rem;background:#f0f5f9;font-size:.9rem;text-align:center;color:#7b96ab;font-weight:800}
.star span{font-size:1.9rem;line-height:1;filter:grayscale(1);opacity:.5}
.star.on{background:#fff6cc;color:var(--ink)}
.star.on span{filter:none;opacity:1;animation:pop .5s ease-out}
.tip{margin:0;color:#6a8aa3;font-size:.95rem}
.panel.result{gap:.4rem}
.titles{display:grid;gap:.2rem;margin-top:0;padding-top:.35rem;border-top:.19rem dashed var(--line);font-size:.88rem}
.titles>div{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.titles span{display:grid;justify-items:center;font-size:1.55rem;line-height:1.1;text-align:center}
.titles small{font-size:max(.75rem,11px);font-weight:800;color:#6a8aa3}
.titles .nope{opacity:.4}

/* Computers and tablets held sideways have a tall panel: the choices become wide rows (icon, name and fears, price)
   instead of narrow columns. Phones keep the three columns. */
@media(min-aspect-ratio:111/100) and (min-height:521px){
 .cards{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(4.4rem,9rem);align-content:start;gap:.7rem;min-height:0;max-height:none}
 .card{grid-template-columns:4.4rem minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"ico name cost" "ico fears cost";justify-items:start;align-items:center;align-content:center;column-gap:1rem;row-gap:.3rem;padding:.6rem 1.2rem .6rem .8rem;border-bottom-width:.38rem;text-align:left}
 .card .ico{grid-area:ico;justify-self:center;font-size:3.2rem;line-height:1}
 .card b{grid-area:name;font-size:1.3rem}
 .card .fears{grid-area:fears;justify-content:flex-start;min-height:0}
 .card .fears:empty{display:none}
 .card .cost{grid-area:cost;font-size:1.35rem}
 .card:hover{transform:translateX(.15rem)}
 .card:active{transform:translateX(.05rem)}
 .card.on{transform:translateX(.3rem)}
 .card.off::after{top:.4rem;right:.7rem;font-size:1rem}
}

/* House animations */
.fg .part.ghost{opacity:.55;animation:ghost 1.1s ease-in-out infinite alternate}
.fg .part.pop{transform-box:fill-box;transform-origin:50% 100%;animation:pop .55s ease-out}
.fg .house,.fg .tilt{transform-origin:300px 330px}
.fg .top,.fg .roofx{transform-origin:300px 190px}
.fg .crane .swing{transform-origin:510px 132px;animation:swing 3s ease-in-out infinite alternate}
.fg .smoke{fill:#f4f6f8;opacity:0;transform-box:fill-box;transform-origin:center;animation:smoke 2.8s ease-out infinite}
.fg .smoke.s2{animation-delay:.9s}.fg .smoke.s3{animation-delay:1.8s}
.fg .wave{transform-origin:300px 62px;animation:wave 1.2s ease-in-out infinite alternate}
.fg .flicker{animation:flicker 1.4s ease-in-out infinite alternate}
.fg .jet{animation:jet .6s linear infinite}
.fg .tree{transform-origin:0 0;animation:sway 5s ease-in-out infinite alternate}
.bg .sun{transform-origin:80px 64px;animation:spin 40s linear infinite}
.bg .c1{animation:drift 26s ease-in-out infinite alternate}
.bg .c2{animation:drift 34s ease-in-out infinite alternate-reverse}

/* Weather of the trials */
.fg .tint{opacity:0;animation:tint .8s ease-out forwards}
.fg .rain line{stroke:#d3ecff;stroke-width:2;animation:rain .55s linear infinite}
.fg .rain.heavy line{stroke:#bcd6ee;stroke-width:2.5;animation:rainh .42s linear infinite}
.fg .clouds{animation:drift2 5s ease-in-out infinite alternate}
.fg .flash{fill:#fff;opacity:0;animation:flash 2.4s 1s infinite}
.fg .bolt{fill:#fff7b0;opacity:0}
.fg .bolt.b1{animation:bolt1 2.4s 1s infinite}
.fg .bolt.b2{animation:bolt2 2.4s 1s infinite}
.fg .gust{fill:none;stroke:#fff;stroke-opacity:.45;stroke-width:2;stroke-linecap:round;animation:gust .6s linear infinite}
.fg .leaf{transform-box:fill-box;transform-origin:center;animation:leaf 1.4s linear infinite}
.fg .crack{fill:none;stroke:#4a3320;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1s .3s ease-out forwards}
.fg .dust{fill:#cdb48a;opacity:0;transform-box:fill-box;transform-origin:center;animation:dust 1.4s ease-out infinite}
.fg .pebble{opacity:0;animation:pebble .9s var(--d,1.4s) ease-in forwards}
.fg .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame .35s ease-in-out infinite alternate}
.fg .flame.onfire{opacity:0;animation:flame .35s ease-in-out infinite alternate,appear .3s .9s forwards}
.fg .spark{fill:#ffb347;opacity:0;animation:emberup 1.4s ease-out infinite}
.fg .smokeb{fill:#3b3b3b;opacity:0;transform-box:fill-box;transform-origin:center;animation:smokeb 2.2s ease-out infinite}
.fg .water{transform:translateY(130px);animation:rise 1.4s ease-out forwards}
.fg .swell{animation:swell 2s linear infinite}
.fg .swell.w2{animation-duration:3s;animation-direction:reverse}
.fg .swell.w3{animation-duration:2.4s}
.fg .float{animation:float 2s ease-in-out infinite alternate}
.fg .flake{fill:#fff;animation:flake 3s linear infinite}
.fg .snowfloor{opacity:0;--o:.4;animation:fadein 3s ease-out forwards}
.fg .snowcap{opacity:0;animation:fadein 2s ease-out forwards}
.fg.hz-wind .tree{animation:bend .45s ease-in-out infinite alternate}
.fg.hz-quake .tree{animation:jitter .1s linear infinite alternate}
.fg.hz-wind .house{animation:shake .1s linear infinite alternate}
.fg.hz-quake .house{animation:quake .09s linear infinite alternate}
.scene.hz-quake .world{animation:quake .09s linear infinite alternate}
.scene.hz-wind .world{animation:gale .16s linear infinite alternate}

/* A part that breaks: .fail animates to its end pose (or falls apart into .chunk pieces), .dead stays there. */
.fg .sink{--end:translateY(14px) rotate(5deg)}
.fg .wash{--end:translate(46px,12px) rotate(-6deg)}
.fg .drop{--end:translateY(70px) rotate(-5deg)}
.fg .cave{--end:translateY(22px) scaleY(.78) rotate(1.5deg)}
.fg .tilt.fail.sink{animation:jolt 1.4s 1.3s ease-in-out forwards}
.fg .tilt.fail.wash{animation:go 1.5s 1.5s ease-in-out forwards}
.fg .top.fail.drop{animation:slump .9s 1.7s cubic-bezier(.4,0,.8,.6) forwards}
.fg .top.fail.drop.late{animation-delay:2.4s}
.fg .roofx.fail.cave{animation:go 1s 1.4s ease-in forwards}
.fg .dead.sink,.fg .dead.wash,.fg .dead.drop,.fg .dead.cave{transform:var(--end)}
.fg .body.crumble,.fg .roofx.fly{--base:1.3s}
.fg .body.burn{--base:1.9s}
.fg .fail .chunk{animation:topple .8s calc(var(--base,1.3s) + var(--t,0s)) cubic-bezier(.5,0,.9,.55) forwards}
.fg .roofx.fly .chunk{animation-duration:1.2s}
.fg .dead .chunk{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:var(--op,1)}
.fg .soot{fill:#1a1410;opacity:0}
.fg .fail .soot{animation:soot 1s .8s forwards}
.fg .roofx.fail .soot{animation-delay:1s}
.fg .dead .soot{opacity:.85}
.fg .rafters{fill:none;stroke:#6a4a2a;stroke-width:5;stroke-linecap:round}
.fg .roofx.burn.fail .rafters{animation:charr 1s 1.2s forwards}
.fg .roofx.burn.dead .rafters{stroke:#17100b}
.fg .roofx.burn.fail .burnable{animation:burnaway .8s 2s forwards}
.fg .roofx.burn.dead .burnable{opacity:0}
.fg .hole{opacity:0}
.fg .roofx.fail .hole{animation:fadein .5s 1.6s forwards}
.fg .roofx.dead .hole{opacity:1}
.fg .rubble{transform-origin:300px 304px}
.fg .rubble.fail{animation:heap .5s 1.95s ease-out both}
.fg .rubble.fail.burn{animation-delay:2.55s}
.fg .puff{fill:#e5d8c0;opacity:0;transform-box:fill-box;transform-origin:center;animation:puff 1.3s calc(1.9s + var(--t,0s)) ease-out forwards}
.fg .puffs.burn .puff{animation-delay:calc(2.5s + var(--t,0s))}
.fg .puff.ash{fill:#6b6b6b}
.fg .ember{fill:#ff8a2a;animation:ember .7s ease-in-out infinite alternate}
.fg .smolder circle{fill:#555;opacity:0;transform-box:fill-box;transform-origin:center;animation:smokeb 3.4s ease-out infinite}
.fg .cracks path{fill:none;stroke:#2a1a10;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160}
.fg .cracks .hl path{stroke:#fff;stroke-opacity:.4;stroke-width:1.4}
.fg .tilt.fail .cracks path{animation:draw .6s 1.2s ease-out forwards}
.fg .tilt.dead .cracks path{stroke-dashoffset:0}
.fg .fissure{fill:#2a1a10;transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
.fg .fissure.fail{animation:open .5s 1.2s ease-out forwards}
.fg .fissure.dead{transform:none}
.fg .stain{fill:#6b4a2b;opacity:.38}
.fg .mud ellipse{fill:#7a5a3a;opacity:.55}

@keyframes bump{50%{transform:scale(.985)}}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes pulse{50%{transform:scale(1.03)}}
@keyframes pop{0%{transform:scale(.88)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes spark{to{transform:translateY(-60px) scale(1.5);opacity:0}}
@keyframes fall{to{transform:translateY(520px) rotate(300deg)}}
@keyframes ghost{from{opacity:.4}to{opacity:.7}}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-20px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@keyframes tint{to{opacity:var(--o,.3)}}
@keyframes fadein{to{opacity:var(--o,1)}}
@keyframes rain{to{transform:translate(-40px,460px)}}
@keyframes rainh{to{transform:translate(130px,470px)}}
@keyframes gust{from{transform:translateX(-120px)}to{transform:translateX(700px)}}
@keyframes leaf{to{transform:translate(680px,80px) rotate(720deg)}}
@keyframes drift2{to{transform:translateX(-50px)}}
@keyframes flash{0%,100%{opacity:0}3%{opacity:.34}6%{opacity:0}40%{opacity:0}43%{opacity:.4}47%{opacity:.08}50%{opacity:.3}54%{opacity:0}}
@keyframes bolt1{0%,2%{opacity:0}3%,9%{opacity:1}12%,100%{opacity:0}}
@keyframes bolt2{0%,41%{opacity:0}42%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dust{0%{opacity:.7;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-40px) scale(2)}}
@keyframes pebble{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:1;transform:translateY(var(--dy)) rotate(200deg)}}
@keyframes flame{from{transform:scale(.9,.85)}to{transform:scale(1.08,1.15)}}
@keyframes appear{to{opacity:1}}
@keyframes emberup{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--x,10px),-130px)}}
@keyframes smokeb{0%{opacity:.5;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-140px) scale(2.2)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes swell{to{transform:translateX(-120px)}}
@keyframes float{from{transform:translate(0,-2px) rotate(-3deg)}to{transform:translate(-24px,3px) rotate(3deg)}}
@keyframes flake{to{transform:translate(40px,440px)}}
@keyframes sway{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
@keyframes bend{from{transform:rotate(2deg)}to{transform:rotate(10deg)}}
@keyframes jitter{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes go{to{transform:var(--end);opacity:var(--op,1)}}
@keyframes jolt{0%{transform:none}25%{transform:translateY(5px) rotate(1.2deg)}45%{transform:translateY(4px) rotate(.4deg)}72%{transform:translateY(11px) rotate(3.8deg)}100%{transform:var(--end)}}
@keyframes slump{0%{transform:none}70%{transform:translateY(76px) rotate(-6.5deg)}85%{transform:translateY(68px) rotate(-4.5deg)}100%{transform:var(--end)}}
@keyframes topple{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:var(--op,1)}}
@keyframes soot{to{opacity:.85}}
@keyframes charr{to{stroke:#17100b}}
@keyframes burnaway{to{opacity:0}}
@keyframes heap{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes puff{0%{opacity:0;transform:scale(.3)}25%{opacity:.85}100%{opacity:0;transform:translateY(-26px) scale(2.1)}}
@keyframes ember{from{opacity:.35}to{opacity:1}}
@keyframes open{to{transform:none}}
@keyframes quake{from{transform:translate(-4px,1px) rotate(-.5deg)}to{transform:translate(4px,-1px) rotate(.5deg)}}
@keyframes gale{from{transform:translateX(-1px)}to{transform:translateX(1px)}}
@keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes smoke{0%{opacity:.85;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(24px,-46px) scale(1.7)}}
@keyframes wave{from{transform:skewY(-5deg)}to{transform:skewY(5deg)}}
@keyframes flicker{from{opacity:.75}to{opacity:1}}
@keyframes jet{to{stroke-dashoffset:-24}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(40px)}}
@keyframes shake{from{transform:translateX(-2px)}to{transform:translateX(2px)}}

/* Phones held sideways are short: drop everything that is not needed to choose and build. */
@media(max-height:520px) and (min-aspect-ratio:11/10){
 #app{--pad:.5rem;--gap:.5rem;--hud:3.2rem;--panel-w:23rem}
 .logo,.stage-head small,.tag,.titles,.panel.start .stage-head,.panel.brief .stage-head{display:none}
 .steps{justify-content:flex-start}
 .dot{width:1.7rem;height:1.7rem;font-size:.85rem}
 .coins{min-width:0;padding:.1rem .7rem;font-size:1.1rem}
 .coins b{font-size:1.25rem}
 .icon{width:3rem;height:3rem;font-size:1.1rem}
 .panel,.talk{padding:.6rem;gap:.45rem}
 .avatar{width:2.4rem;height:2.4rem;font-size:1.4rem}
 .bubble{min-height:2.4rem;padding:.35rem .6rem;font-size:1rem}
 .stage-head{font-size:1.15rem}
 .cards{min-height:7.5rem;gap:.4rem}
 .card{grid-template-rows:2.4rem auto auto 1fr;padding:.4rem .2rem}
 .card .ico{font-size:2rem;line-height:2.4rem}
 .card b{font-size:.95rem}
 .big{min-height:3.2rem;font-size:1.15rem}
 .big.hammer{min-height:3.8rem;font-size:1.4rem}
 .hz{padding:.3rem .6rem}
 .hz-ico{font-size:1.8rem}
 .hz b{font-size:1rem}
 .title-card h2{font-size:1.3rem}
 .big-ico{font-size:2.6rem}
 .star span{font-size:1.5rem}
 .fact b,.fact p{font-size:1rem}
}
/* Portrait phones and tablets: the scene on top, then the foreman, then the choices (which scroll if they must). */
@media(max-aspect-ratio:11/10){
 html{font-size:clamp(13px,min(4.1vw,2.3vh),18px)}
 #app{--pad:.6rem;--gap:.6rem;--hud:3rem;--panel-w:0px;--reserve:25rem;
  --scene-w:min(calc(100vw - var(--pad)*2),calc(max(var(--avail-h) - var(--reserve),11rem)*1.4286));
  --content-w:100%}
 #app[data-phase=brief]{--reserve:29rem}
 #app[data-phase=result]{--reserve:33rem}
 .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"scene" "talk" "panel"}
 .scene{align-self:start;justify-self:center}
 .talk,.panel{width:100%;max-width:42rem;justify-self:center;padding:.7rem .8rem;gap:.55rem}
 .logo{display:none}
 .steps{justify-content:flex-start;gap:.3rem}
 .dot{width:1.7rem;height:1.7rem;font-size:.8rem}
 .coins{min-width:0;padding:.15rem .75rem;font-size:1.2rem}
 .coins b{font-size:1.35rem}
 .avatar{width:2.8rem;height:2.8rem;font-size:1.7rem}
 .bubble{min-height:2.8rem;padding:.45rem .75rem;font-size:1.05rem}
 .stage-head{font-size:1.25rem}
 .panel.brief .stage-head{display:none}
 .forecast{flex-wrap:nowrap;gap:.3rem;overflow:hidden}
 .hz-chip{padding:.15rem .5rem;font-size:.82rem}
 .cards{min-height:8.2rem;gap:.5rem}
 .card{grid-template-rows:2.8rem auto auto auto;gap:.25rem;padding:.5rem .2rem}
 .card .ico{font-size:2.4rem;line-height:2.8rem}
 .card b{font-size:1.05rem}
 .big{min-height:3.3rem;font-size:1.3rem}
 .big.hammer{min-height:4.4rem;font-size:1.5rem}
 .hz{padding:.35rem .65rem}
 .hz-ico{font-size:1.9rem}
 .hz b{font-size:1.05rem}
 .hz small{font-size:.85rem}
 .title-card{padding:.5rem .7rem}
 .big-ico{font-size:2.6rem}
 .title-card h2{font-size:1.4rem}
 .star span{font-size:1.6rem}
 .row{font-size:.9rem}
}
@media(max-aspect-ratio:11/10) and (max-width:480px){
 .title-card .lead{display:none}
}
@media(max-aspect-ratio:11/10) and (max-height:720px){
 .stage-head small,.hz small,.title-card .lead,.titles small{display:none}
 .cards{min-height:7.4rem}
 .big-ico{font-size:2.2rem}
 .star{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
 .decor,.avatar,.big.hammer,.new,.hz-chip,.hz.now,.fear,.fg .crane .swing,.fg .smoke,.fg .rain line,.fg .gust,.fg .leaf,.fg .flake,.fg .house,.fg .tree,.fg .clouds,.fg .flash,.fg .bolt,.fg .float,.fg .flame,.fg .spark,.fg .ember,.scene .world{animation:none!important}
 .fg .flash,.fg .bolt{display:none}
 .fg .part.ghost{animation:none}
}