/* Hausibande · entrance. A blocky parallax world (sky, clouds, stepped mountains, floating islands, pasture, meadow)
   behind a two-column stage: big block title left, the password card with Rocky right. Phones stack, Rocky sits on the card. */
@font-face{font-family:'Baloo 2';src:url('/baloo2.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'Andika';src:url('/andika-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Andika';src:url('/andika-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
 --display:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;--body:'Andika','Avenir Next','Segoe UI',system-ui,sans-serif;
 --ink:#1d1640;--muted:#5b5478;--card:#fffdf7;--line:#eadfca;--accent:#ff7a1a;--accent-dark:#c95400;--grass:#62c33b;--gold:#ffd447;
 --sky-a:#47b8ff;--sky-b:#8fd6ff;--sky-c:#d6f3ff;--far:#9cc4ee;--mid:#6cb35f;--on-sky:#13235c;
 color-scheme:light;
}
body[data-time=morning]{--sky-a:#7fb6ff;--sky-b:#ffc7a8;--sky-c:#ffe9c7;--far:#c2b3e6;--mid:#7ab86a}
body[data-time=evening]{--sky-a:#4a3c9e;--sky-b:#c160b8;--sky-c:#ff9a62;--far:#8a6fb8;--mid:#5b8c55;--on-sky:#fff}
body[data-time=night]{--sky-a:#070d2e;--sky-b:#15205a;--sky-c:#2b2f78;--far:#3a3f7a;--mid:#2f5a3b;--on-sky:#fff}
*{box-sizing:border-box}
html{background:var(--sky-b)}
body{margin:0;min-height:100svh;font-family:var(--body);color:var(--ink);background:var(--sky-b);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px;border-radius:12px}

/* ---------- the world ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;cursor:crosshair;touch-action:manipulation}
.layer{position:absolute;inset:-4% -4%;will-change:transform;pointer-events:none}
.sky{inset:0;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 55%,var(--sky-c) 100%);transition:background 1s}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 1s}
body[data-time=night] .stars,body[data-time=evening] .stars{opacity:1}
body[data-time=evening] .stars{opacity:.35}
.star{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#fff;box-shadow:0 0 6px #fff;animation:twinkle var(--d) ease-in-out infinite;animation-delay:var(--delay)}
.sun,.moon{position:absolute;right:12%;top:10%;width:92px;height:92px}
.sun{background:#ffe066;box-shadow:0 0 0 14px #fff1a866,0 0 80px 30px #ffe06688;animation:spin-slow 60s linear infinite}
.moon{display:none;background:#f3f1e4;box-shadow:inset -18px 0 0 #d9d6c2,0 0 60px 10px #fffbe066}
.moon::after{content:"";position:absolute;left:22px;top:26px;width:14px;height:14px;background:#d9d6c2;box-shadow:30px 22px 0 -2px #d9d6c2}
body[data-time=night] .sun{display:none}body[data-time=night] .moon{display:block}
body[data-time=evening] .sun{top:44%;background:#ff9f45;box-shadow:0 0 90px 40px #ff8a3d88}
.cloud{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s)*130px);height:calc(var(--s)*34px);background:#fff;opacity:.95;box-shadow:0 8px 0 #ffffffa0;animation:cloud-move var(--d) linear infinite;animation-delay:var(--delay)}
.cloud::before{content:"";position:absolute;left:18%;top:-60%;width:46%;height:60%;background:#fff}
.cloud::after{content:"";position:absolute;left:52%;top:-32%;width:30%;height:32%;background:#fff}
body[data-time=night] .cloud{opacity:.18}
body[data-time=evening] .cloud{background:#ffd3c4}body[data-time=evening] .cloud::before,body[data-time=evening] .cloud::after{background:#ffd3c4}
.mountains{position:absolute;left:0;right:0;bottom:24%;height:46%;background:var(--far)}
.mountains.mid{bottom:22%;height:30%;background:linear-gradient(var(--mid) 0 14px,color-mix(in srgb,var(--mid) 75%,#000) 14px)}
.mountains.far::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff6 0 10px,transparent 10px)}
.bird{position:absolute;left:-60px;top:var(--y);width:34px;height:14px;animation:fly var(--d) linear infinite;animation-delay:var(--delay)}
.bird svg{width:100%;height:100%;animation:flap .5s ease-in-out infinite alternate}
.islands .isle{position:absolute;filter:drop-shadow(0 18px 18px #0e2a5a30)}
.isle svg{display:block;width:100%;height:auto}
.isle-a{left:57%;top:5%;width:170px;animation:bob 7s ease-in-out infinite}
.isle-b{right:3%;top:14%;width:120px;animation:bob 9s ease-in-out -3s infinite}
.isle-c{left:41%;top:43%;width:90px;animation:bob 8s ease-in-out -5s infinite}
.kids{position:absolute;left:28%;bottom:88%;display:flex;gap:10px}
.kid{width:34px;height:auto}
.kid .wave{transform-box:fill-box;transform-origin:50% 0;animation:wave 1.2s ease-in-out infinite}
.kid-i .wave{animation-delay:-.6s}
.tree{position:absolute;left:30%;bottom:86%;width:58px}
.chest-icon{position:absolute;left:38%;bottom:78%;font-size:30px;animation:bob 2.4s ease-in-out infinite}
.pasture .far-meadow{position:absolute;left:0;right:0;bottom:0;height:27%;background:linear-gradient(#7fd34f,#5cb83b)}
.fence{position:absolute;left:0;right:0;bottom:22%;height:46px;background:linear-gradient(transparent 10px,#b07a40 10px 18px,transparent 18px 28px,#b07a40 28px 36px,transparent 36px),repeating-linear-gradient(90deg,#8a5a2b 0 12px,transparent 12px 90px)}
.horses{position:absolute;left:0;right:0;bottom:23%;height:90px}
.horse{position:absolute;bottom:0;left:-180px;width:150px;animation:gallop-across 26s linear infinite}
.horse-b{width:118px;animation-duration:31s;animation-delay:-14s}
.horse svg{display:block;width:100%;height:auto;animation:horse-bob .42s ease-in-out infinite alternate}
.h-leg{transform-box:fill-box;transform-origin:50% 8%;animation:leg .42s ease-in-out infinite alternate}
.h-br,.h-fl{animation-delay:-.21s}
.h-tail{transform-box:fill-box;transform-origin:100% 0;animation:tail-swish .84s ease-in-out infinite alternate}
.meadow{inset:auto -4% -4% -4%;height:30%;pointer-events:auto;cursor:pointer}
.meadow{background:repeating-conic-gradient(#8b5a2b 0 25%,#7d4f25 0 50%) 0 0/28px 28px}
.grass-top{position:absolute;left:0;right:0;top:0;height:34px;background:repeating-linear-gradient(90deg,#62c33b 0 28px,#56b632 28px 56px);box-shadow:0 8px 0 #4a9c2b}
.grass-top::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:repeating-linear-gradient(90deg,transparent 0 14px,#62c33b 14px 28px,transparent 28px 42px,#56b632 42px 56px)}
.flower{position:absolute;left:var(--x);top:-28px;width:8px;height:22px;background:#3f9d34;transform-origin:50% 100%;animation:sway 3s ease-in-out infinite;animation-delay:var(--delay)}
.flower::before{content:"";position:absolute;left:-6px;top:-10px;width:20px;height:12px;background:var(--c);box-shadow:4px -6px 0 -2px var(--c)}
.blocks{position:absolute;inset:0}
.block{position:absolute;left:var(--x);top:var(--y);width:var(--b);height:var(--b);--p:calc(var(--b)/8);pointer-events:auto;cursor:pointer;border:0;padding:0;box-shadow:inset calc(var(--p)*-1) calc(var(--p)*-1) 0 #0003,inset var(--p) var(--p) 0 #fff3;transition:transform .12s;animation:block-in .5s cubic-bezier(.3,1.6,.5,1)}
.block:active{transform:scale(.92)}
.block::before{content:"";position:absolute;left:calc(var(--p)*2);top:calc(var(--p)*2);width:var(--p);height:var(--p);background:var(--ore,transparent);box-shadow:calc(var(--p)*3) calc(var(--p)*1) 0 var(--ore,transparent),calc(var(--p)*1) calc(var(--p)*3) 0 var(--ore,transparent),calc(var(--p)*4) calc(var(--p)*4) 0 var(--ore,transparent),calc(var(--p)*-1) calc(var(--p)*4) 0 var(--ore,transparent)}
.block::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(45deg,transparent 46%,#0008 46% 54%,transparent 54%),linear-gradient(-30deg,transparent 47%,#0007 47% 53%,transparent 53%)}
.block[data-hits="1"]::after{opacity:.5}.block[data-hits="2"]::after{opacity:1;background-size:60% 60%,100% 100%}
.b-grass{background:linear-gradient(#62c33b 0 30%,#8b5a2b 30%)}
.b-stone{background:#8c8c8c}
.b-wood{background:repeating-linear-gradient(90deg,#a87a43 0 25%,#8f6634 25% 50%)}
.b-gold{background:#8c8c8c;--ore:#ffd447}
.b-diamond{background:#8c8c8c;--ore:#5ff0e8;animation:block-in .5s cubic-bezier(.3,1.6,.5,1),shimmer 2.2s ease-in-out infinite .5s}
.ball{position:fixed;z-index:6;left:0;top:0;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4ff7a,#c8e41e 60%,#9bb613);box-shadow:0 4px 8px #0003;pointer-events:none;opacity:0}
.ball::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;border-left-color:#fff;border-right-color:#fff}
.ball.show{opacity:1}
.seasonal,.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:-40px;left:var(--x);font-size:var(--s);animation:fall var(--d) linear infinite;animation-delay:var(--delay)}
.firefly{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#fff59a;box-shadow:0 0 12px 4px #fff59a99;animation:firefly var(--d) ease-in-out infinite alternate;animation-delay:var(--delay)}
.chip{position:fixed;z-index:7;left:0;top:0;width:var(--sz);height:var(--sz);background:var(--c);animation:chip .8s cubic-bezier(.2,.7,.4,1) forwards}
.float-text{position:fixed;z-index:7;left:0;top:0;font-family:var(--display);font-weight:800;font-size:24px;color:#fff;text-shadow:0 3px 0 #0005;animation:float-up 1s ease-out forwards;white-space:nowrap}
.confetti{position:fixed;z-index:8;top:-20px;left:var(--x);width:14px;height:14px;background:var(--c);animation:confetti var(--d) cubic-bezier(.3,.6,.6,1) var(--delay) forwards}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px));pointer-events:none}
.brand,.toggles{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-sky);font-family:var(--display);font-weight:800;font-size:20px;line-height:1;letter-spacing:.04em}
.brand img{border-radius:12px;box-shadow:0 4px 0 #0002}
.brand small{display:block;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.02em;opacity:.85;margin-top:4px}
.toggles{display:flex;gap:8px}
.toggle{border:0;border-radius:999px;padding:8px 14px;min-height:44px;background:#ffffffcc;box-shadow:0 4px 0 #0002;font-family:var(--display);font-weight:700;font-size:15px;backdrop-filter:blur(6px)}
.toggle[aria-pressed=false]{opacity:.7}

/* ---------- stage ---------- */
.stage{position:relative;z-index:4;max-width:1240px;margin:0 auto;min-height:calc(100svh - 140px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,420px);gap:40px;align-items:center;padding:10px max(20px,env(safe-area-inset-right,0px)) 30px max(20px,env(safe-area-inset-left,0px));pointer-events:none}
.hero{align-self:start;padding-top:2vh;display:flex;flex-direction:column;gap:14px;min-width:0}
.title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(46px,8.6vw,118px);line-height:.9;letter-spacing:.01em;display:flex;flex-wrap:wrap;pointer-events:auto}
.title span{--c:#ff7a1a;display:inline-block;color:var(--c);text-shadow:0 2px 0 color-mix(in srgb,var(--c) 70%,#000),0 4px 0 color-mix(in srgb,var(--c) 62%,#000),0 6px 0 color-mix(in srgb,var(--c) 55%,#000),0 8px 0 color-mix(in srgb,var(--c) 48%,#000),0 14px 18px #0004;-webkit-text-stroke:2px #ffffff55;animation:letter-in .8s cubic-bezier(.3,1.7,.5,1) backwards,letter-bob 3.2s ease-in-out infinite;cursor:pointer;user-select:none}
.title span:nth-child(1){--c:#ff5a4e}.title span:nth-child(2){--c:#ff9f1c}.title span:nth-child(3){--c:#ffd02e}.title span:nth-child(4){--c:#6fd13f}.title span:nth-child(5){--c:#2fc6c6}
.title span:nth-child(6){--c:#3d8bff}.title span:nth-child(7){--c:#8a63ff}.title span:nth-child(8){--c:#ff6fae}.title span:nth-child(9){--c:#ff7a1a}.title span:nth-child(10){--c:#46c86d}
.title span.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
.tagline{margin:0;font-size:clamp(18px,2vw,22px);color:var(--on-sky);font-weight:700;text-shadow:0 2px 0 #ffffff55}
body[data-time=night] .tagline,body[data-time=evening] .tagline{text-shadow:0 2px 0 #0004}
.tagline b{font-family:var(--display);font-size:1.12em}
.play-hint{margin:0;max-width:520px;background:#ffffffd9;border-radius:18px;padding:10px 14px;font-size:15px;box-shadow:0 5px 0 #0001;pointer-events:auto}
.quest{display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto}
.quest span{background:#1d1640d9;color:#fff;border-radius:999px;padding:6px 12px;font-family:var(--display);font-weight:700;font-size:15px;box-shadow:0 4px 0 #0003}
.quest span.win{background:#18a957;animation:hop .6s}
.entry{position:relative;pointer-events:auto;align-self:end;margin-bottom:4vh}
.card{position:relative;background:var(--card);border-radius:30px;padding:30px 28px 24px;box-shadow:0 10px 0 #d9c7a3,0 24px 50px #1d164033;border:4px solid #fff}
.card.shake{animation:shake .5s}
.card-badge{position:absolute;right:20px;top:-26px;width:56px;height:56px;border-radius:18px;background:var(--gold);display:grid;place-items:center;font-size:28px;box-shadow:0 5px 0 #d9a90d;transform:rotate(8deg)}
.card h2{margin:0;font-family:var(--display);font-size:34px;line-height:1.05}
.intro{margin:8px 0 18px;color:var(--muted);font-size:16px}
label{display:block;font-weight:700;margin-bottom:8px}
.password-wrap{display:flex;border:3px solid var(--line);border-radius:18px;background:#fff;transition:border-color .2s,box-shadow .2s}
.password-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 5px #ff7a1a26}
input{flex:1;min-width:0;border:0;background:none;padding:14px 14px;font-size:20px;outline:none;border-radius:16px}
#show{border:0;background:#fff3e2;border-radius:12px;margin:5px;padding:0 12px;font-weight:700;font-size:14px;color:var(--accent-dark);min-height:44px}
#error{min-height:0;margin:10px 0 0;color:#c2185b;font-weight:700}
#error:empty{margin:0}
.enter{margin-top:16px;width:100%;min-height:64px;border:0;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;font-family:var(--display);font-weight:800;font-size:24px;box-shadow:0 7px 0 var(--accent-dark);transition:transform .08s,box-shadow .08s}
.enter:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--accent-dark)}
.enter:disabled{opacity:.75}
.enter.success{background:#18a957;box-shadow:0 7px 0 #0f7a3e}
.enter-icon{display:inline-block;transition:transform .3s}
.enter:hover .enter-icon{transform:translate(4px,-4px) rotate(10deg)}
.hint{margin:16px 0 0;font-size:14px;color:var(--muted)}
footer{position:relative;z-index:4;text-align:center;padding:0 20px calc(18px + env(safe-area-inset-bottom,0px));font-weight:700;color:#fff;text-shadow:0 2px 0 #0004;pointer-events:none}

/* ---------- Rocky ---------- */
.rocky-home{position:absolute;left:-250px;bottom:-6px;width:220px;z-index:3;pointer-events:none}
.rocky{position:relative;width:100%;pointer-events:auto;cursor:pointer;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform var(--run,0s) cubic-bezier(.45,.05,.4,1)}
.rocky-svg{display:block;width:100%;height:auto;overflow:visible;transform:scaleX(var(--face,1));transition:transform .2s}
.rocky .tail{transform-box:fill-box;transform-origin:0% 90%;animation:wag .45s ease-in-out infinite alternate}
.rocky.excited .tail{animation-duration:.16s}
.rocky .head{transform-box:fill-box;transform-origin:50% 90%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.rocky.tilt .head{transform:rotate(-14deg)}
.rocky .ear{transform-box:fill-box;transform-origin:50% 0;animation:ear 3.6s ease-in-out infinite}
.rocky .ear-r{animation-delay:-1.8s}
.rocky .eyes{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .15s}
.rocky .eye{transform-box:fill-box;transform-origin:50% 50%;animation:blink 5s infinite}
.rocky .tongue{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.2);transition:transform .25s}
.rocky.happy .tongue,.rocky.running .tongue{transform:scaleY(1);animation:pant .3s ease-in-out infinite alternate}
.rocky .ball-in-mouth{opacity:0;transition:opacity .15s}
.rocky.has-ball .ball-in-mouth{opacity:1}
.rocky.has-ball .tongue{opacity:0}
.rocky .shy-paws{transform:translateY(150px);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.rocky.shy .shy-paws{transform:none;opacity:1}
.rocky.peek .shy-paws{transform:translate(22px,10px) rotate(12deg)}
.rocky.running .rocky-svg{animation:run-bob .22s ease-in-out infinite alternate}
.rocky.running .paw{animation:paw-run .22s ease-in-out infinite alternate}
.rocky .paw{transform-box:fill-box;transform-origin:50% 0}
.rocky .paw-r{animation-delay:-.11s}
.rocky.jump .rocky-svg{animation:jump .7s cubic-bezier(.3,1.5,.5,1)}
.rocky.sad .head{transform:rotate(10deg) translateY(4px)}
.rocky.sad .ear{animation:none;transform:rotate(12deg)}
.bubble{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);background:#fff;border-radius:18px;padding:10px 14px;font-weight:700;font-size:15px;line-height:1.3;width:max-content;max-width:220px;box-shadow:0 6px 0 #0002;text-align:center;animation:bubble-in .4s cubic-bezier(.3,1.6,.5,1)}
.bubble::after{content:"";position:absolute;left:50%;top:100%;width:16px;height:16px;background:#fff;transform:translate(-50%,-8px) rotate(45deg)}
.bubble.again{animation:none}

/* ---------- animation library ---------- */
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes cloud-move{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
@keyframes fly{from{transform:translateX(0)}to{transform:translateX(120vw)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-150deg)}}
@keyframes gallop-across{0%{transform:translateX(0)}100%{transform:translateX(calc(100vw + 400px))}}
@keyframes horse-bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(2deg)}}
@keyframes leg{from{transform:rotate(-28deg)}to{transform:rotate(30deg)}}
@keyframes tail-swish{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes block-in{from{transform:scale(0) rotate(-20deg)}}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 8px #5ff0e8)}}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(18vw,115vh) rotate(540deg)}}
@keyframes firefly{0%{transform:translate(0,0);opacity:.2}100%{transform:translate(40px,-30px);opacity:1}}
@keyframes chip{0%{transform:translate(var(--sx),var(--sy)) rotate(0)}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:0}}
@keyframes float-up{0%{transform:translate(var(--sx),var(--sy)) scale(.6);opacity:0}20%{opacity:1;transform:translate(var(--sx),calc(var(--sy) - 20px)) scale(1.1)}100%{transform:translate(var(--sx),calc(var(--sy) - 90px)) scale(1);opacity:0}}
@keyframes confetti{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
@keyframes letter-in{from{transform:translateY(-120px) rotate(-30deg);opacity:0}}
@keyframes letter-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes hop{30%{transform:translateY(-34px) rotate(-8deg) scale(1.1)}60%{transform:translateY(0) scale(.95,1.05)}}
@keyframes shake{20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
@keyframes ear{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes pant{from{transform:scaleY(.85)}to{transform:scaleY(1.1)}}
@keyframes run-bob{from{transform:scaleX(var(--face,1)) translateY(0)}to{transform:scaleX(var(--face,1)) translateY(-10px)}}
@keyframes paw-run{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
@keyframes jump{30%{transform:scaleX(var(--face,1)) translateY(-60px) rotate(-6deg)}60%{transform:scaleX(var(--face,1)) translateY(0) scale(1.05,.92)}}
@keyframes bubble-in{from{transform:translate(-50%,10px) scale(.6);opacity:0}}
.title span:nth-child(1){animation-delay:.05s,0s}.title span:nth-child(2){animation-delay:.1s,-.3s}.title span:nth-child(3){animation-delay:.15s,-.6s}.title span:nth-child(4){animation-delay:.2s,-.9s}.title span:nth-child(5){animation-delay:.25s,-1.2s}
.title span:nth-child(6){animation-delay:.3s,-1.5s}.title span:nth-child(7){animation-delay:.35s,-1.8s}.title span:nth-child(8){animation-delay:.4s,-2.1s}.title span:nth-child(9){animation-delay:.45s,-2.4s}.title span:nth-child(10){animation-delay:.5s,-2.7s}

/* ---------- phones and tablets ---------- */
@media (max-width:900px){
 .stage{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;min-height:0}
 .hero{padding-top:0}
 .entry{margin:150px 0 0;max-width:480px;width:100%;justify-self:center}
 .rocky-home{left:50%;bottom:calc(100% - 26px);width:170px;margin-left:-85px;z-index:3}
 .card{padding-top:34px}
 .card-badge{display:none}
 .isle-a{left:auto;right:3%;top:36%;width:104px}.isle-b{display:none}.isle-c{display:none}
 .sun,.moon{width:64px;height:64px;right:8%;top:8%}
 .meadow{height:22%}.fence,.horses{bottom:16%}.mountains{bottom:18%}
}
@media (max-width:480px){
 .topbar{padding-left:16px;padding-right:16px}
 .brand{font-size:17px}.brand img{width:38px;height:38px}
 .toggle span{display:none}
 .stage{padding-left:16px;padding-right:16px}
 .title{font-size:clamp(40px,13vw,62px)}
 .play-hint{font-size:14px}
 .card{padding:32px 18px 20px;border-radius:26px}
 .card h2{font-size:28px}
 .enter{font-size:21px}
}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}