@import url('./fonts/fonts.css');
:root{color-scheme:dark;--lime:#d0ff7b;--white:#f6ffe9}*{box-sizing:border-box}body{margin:0;background:#081e23;color:var(--white);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:5px}button{border:0}button:hover{filter:brightness(1.15)}.world{position:relative;min-height:850px;height:100svh;overflow:hidden;background:#09272c;isolation:isolate}.scene,.shade,.motes,.flash,.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene{object-fit:cover;object-position:65% 50%;z-index:-4;transition:filter 1.8s,transform 2s}.shade{background:linear-gradient(90deg,rgba(2,19,24,.88),rgba(2,19,24,.32) 39%,transparent 65%),linear-gradient(0deg,rgba(2,17,22,.96),transparent 30%,transparent 80%,rgba(2,19,24,.4));z-index:-3}.motes{z-index:-1;background-image:radial-gradient(circle at 32% 30%,#e0ffab 0 1px,transparent 3px),radial-gradient(circle at 80% 62%,#daffbb 0 2px,transparent 4px),radial-gradient(circle at 48% 70%,#b7fff0 0 1px,transparent 3px);background-size:301px 331px,509px 407px,409px 523px;opacity:.6;animation:drift 18s linear infinite}header{display:flex;justify-content:space-between;align-items:center;padding:34px 4.4%;position:relative;z-index:5}.brand{color:white;text-decoration:none;font:900 31px 'Outfit',sans-serif;display:flex;gap:12px;align-items:center;letter-spacing:-1px}.mark{font-size:42px;color:var(--lime)}.brand-small{max-width:65px;font:600 11px/1.4 'DM Sans',sans-serif;letter-spacing:2px;margin-left:4px}.glass{border:1px solid #ffffff38;background:#10292caa;backdrop-filter:blur(18px);border-radius:99px;padding:14px 20px;font-size:14px}.sound{display:flex;gap:10px;align-items:center}.intro{position:relative;margin:55px 0 0 8%;width:420px;z-index:2}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2.2px}.intro .eyebrow{color:var(--lime);display:flex;gap:10px;align-items:center}.eyebrow span{width:6px;height:6px;background:var(--lime);border-radius:50%}h1{font:800 clamp(68px,7.7vw,122px)/.92 'Outfit',sans-serif;letter-spacing:-5px;margin:23px 0}h1 em{color:var(--lime);font-style:normal}p{font-size:19px;line-height:1.65;color:#e0e8dc}.intro p{margin:25px 0 27px}.primary{background:var(--lime);color:#163124;border-radius:99px;font-weight:700;padding:19px 25px;display:inline-flex;gap:35px;align-items:center;box-shadow:0 6px 35px #b4ff6330}.small-note{font-size:12px;color:#b0c6c1;margin-top:16px}.bob-touch{position:absolute;left:55%;top:25%;width:32%;height:49%;background:transparent;border-radius:45%;z-index:1}.bob-touch span{position:absolute;right:-3%;top:10%;background:#f5ffe6;color:#243821;transform:rotate(7deg);padding:12px 18px;border-radius:20px 20px 20px 2px;font-weight:700;font-size:14px;box-shadow:0 5px 25px #001d2940}.bubble{position:absolute;z-index:9;top:22%;right:8%;max-width:340px;background:#f5ffe6;color:#1a3021;padding:23px 26px;border-radius:24px 24px 3px 24px;font-size:19px;line-height:1.45;box-shadow:0 10px 50px #0005;animation:pop .25s ease-out}.bubble[hidden]{display:none}footer{position:absolute;bottom:35px;left:4.4%;right:4.4%;display:flex;justify-content:space-between;align-items:end;gap:25px;z-index:5}.place{display:flex;gap:17px;align-items:center}.place-number{font:400 46px 'Outfit',sans-serif;color:#ffffff6b}.place .eyebrow{font-size:10px;letter-spacing:1.7px;color:#aec4bd;display:block;margin-bottom:8px}.place strong{font:500 20px 'Outfit',sans-serif}.explore{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.explore .glass{font-size:14px}.explore button span{font-size:22px;margin-right:8px;vertical-align:middle;color:var(--lime)}.danger{background:#331d2799;border:1px solid #e58da650;color:#ffb8c7;padding:17px 20px;border-radius:99px;font-size:13px}.flash{z-index:15;background:#d4ffaf;opacity:0}.travelling .flash{animation:flash 1.4s ease}.moon .scene{filter:hue-rotate(55deg) saturate(.85)}.candy .scene{filter:hue-rotate(245deg) saturate(1.4)}.silly .scene{animation:wiggle .5s ease-in-out 5}.collectibles{position:absolute;inset:0;z-index:7;pointer-events:none}.collectibles button{pointer-events:auto;position:absolute;left:var(--x);top:var(--y);width:57px;height:57px;border-radius:50%;background:#11282be0;border:1px solid #dcff86;color:#e6ff8f;font-size:39px;box-shadow:0 0 30px #caff8390;animation:float 3s ease-in-out infinite}.collectibles button:disabled{opacity:0;pointer-events:none}.quest{position:absolute;z-index:10;top:115px;left:50%;transform:translateX(-50%);background:#112b30;padding:12px 18px;border:1px solid #d0ff7b70;border-radius:50px;white-space:nowrap}.quest button{background:none;font-size:24px;margin-left:24px}.hunting .intro{opacity:.15;pointer-events:none}.hunting .bob-touch{display:none}dialog{border:1px solid #bfff7860;color:var(--white);background:radial-gradient(ellipse at top,#284435,#081d25 70%);border-radius:28px;text-align:center;width:min(550px,92vw);padding:40px 25px;box-shadow:0 0 160px #c4ff5b30}dialog::backdrop{background:#001018ce;backdrop-filter:blur(10px)}dialog h2{font:700 clamp(36px,5vw,52px)/1.1 'Outfit',sans-serif;letter-spacing:-1px;margin:12px 0 20px}dialog p{font-size:16px}dialog strong{display:block;color:var(--lime);line-height:1.6;margin:20px 0 28px}.close{position:absolute;right:14px;top:10px;background:transparent;font-size:29px}.secret-spiral{font-size:64px;color:var(--lime);margin-top:15px}.confetti{z-index:12;overflow:hidden}.confetti i{position:absolute;top:-50px;color:var(--lime);font-style:normal;font-size:35px;animation:fall 3s ease-in forwards}@keyframes drift{to{transform:translateY(-50px)}}@keyframes pop{from{transform:scale(.8);opacity:0}}@keyframes float{50%{transform:translateY(-12px) rotate(20deg)}}@keyframes flash{35%{opacity:.85}100%{opacity:0}}@keyframes wiggle{25%{transform:rotate(2deg) scale(1.05)}75%{transform:rotate(-2deg) scale(1.05)}}@keyframes fall{to{top:110%;transform:rotate(600deg)}}
@media(min-width:1700px){.scene{object-position:center 48%}}@media(max-width:1100px){footer{align-items:start}.explore{max-width:420px}.intro{margin-left:6%;margin-top:35px}.world{min-height:850px}.scene{object-position:60% center}}@media(max-width:700px){.world{min-height:900px;height:100svh}header{padding:21px 6%}.brand{font-size:25px;gap:7px}.mark{font-size:34px}.brand-small{font-size:9px}.sound{padding:11px 14px;font-size:12px}.scene{object-position:66% center}.shade{background:linear-gradient(90deg,#021318bf,transparent 85%),linear-gradient(0deg,#021318 2%,transparent 44%,#02131840)}.intro{margin:32px 0 0 7%;width:80%}.intro .eyebrow{font-size:10px;letter-spacing:1.7px}h1{font-size:78px;letter-spacing:-3px;margin:20px 0}.intro p{font-size:16px;margin:20px 0}.primary{padding:16px 22px;font-size:14px}.small-note{font-size:11px;max-width:210px;line-height:1.6}.bob-touch{left:52%;top:36%;height:32%;width:44%}.bob-touch span{right:0;top:10%;font-size:12px;padding:10px}.bubble{top:21%;right:6%;left:6%;max-width:unset;font-size:17px}footer{bottom:24px;left:7%;right:7%;display:block}.place{margin-bottom:20px}.place strong{font-size:20px}.place-number{font-size:36px}.explore{display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:8px}.explore .glass{font-size:12px;padding:12px 10px;line-height:1.5}.explore button span{display:block;margin:0;font-size:24px}.danger{grid-column:1/-1;padding:12px;font-size:12px}.quest{top:90px}.collectibles button{width:48px;height:48px;font-size:31px}.hunting .intro{opacity:.07}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:700px){.scene{top:260px;height:490px;object-position:68% center}.intro{margin-top:15px}h1{font-size:62px;line-height:.94}.intro p{margin:14px 0}.intro .primary{padding:13px 19px}.small-note{max-width:180px}.shade{background:linear-gradient(0deg,#021318 0%,transparent 34%,transparent 57%,#021318 78%)}.bob-touch{top:43%;left:46%;height:30%}.bubble{top:30%}}
/* Bob is an independent, touchable character in a layered playground. */
.world{min-height:800px}.scene{object-position:center;top:0;height:100%;transition:filter 1.6s,transform 2.6s}.intro{margin-top:45px;width:38%;pointer-events:none}.intro button{pointer-events:auto}h1{font-size:clamp(50px,6vw,95px);line-height:1;letter-spacing:-3px}.intro p{font-size:17px}.actor{position:absolute;width:min(38vw,490px);height:65%;left:52%;top:14%;z-index:3;touch-action:none;will-change:transform;transform:translate(var(--dx,0px),var(--dy,0px))}.bob-touch{position:relative;inset:auto;width:100%;height:100%;border-radius:0;touch-action:none;user-select:none;cursor:grab;display:block;animation:breathe 3.3s ease-in-out infinite;background:none}.bob-touch:active{cursor:grabbing}.bob-touch img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 22px 14px #00180b70)}.bob-touch span{top:23%;right:-3%;font-size:13px;transform:rotate(8deg);pointer-events:none}.moves{position:absolute;left:7%;top:57%;display:grid;grid-template-columns:repeat(2,130px);gap:10px;z-index:6}.moves button{background:#102d31de;border:1px solid #c6ff794d;border-radius:19px;padding:13px 15px;font-size:28px;color:var(--lime);backdrop-filter:blur(14px);transition:transform .2s}.moves button:hover{transform:translateY(-4px);background:#254238}.moves span{display:block;color:#f4ffe7;font-weight:600;font-size:14px;margin-top:4px}.bubble{top:15%;right:8%;z-index:12}.actor.bouncing .bob-touch{animation:bobJump .8s ease-in-out 2}.actor.dancing .bob-touch{animation:bobDance .52s ease-in-out infinite}.actor.tooting .bob-touch{animation:bobToot .2s ease-in-out 6}.actor.flushing .bob-touch{animation:bobFlush 2.1s ease-in-out}.actor.tickled .bob-touch{animation:bobTickle .15s ease-in-out 7}.actor.dragging .bob-touch{animation:none;transform:rotate(-9deg)}#effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}#portal-caption{position:absolute;z-index:21;left:10%;right:10%;top:46%;text-align:center;font:800 clamp(24px,5vw,64px) 'Outfit',sans-serif;pointer-events:none;color:white;text-shadow:0 0 30px #000;opacity:0}.travelling #portal-caption{opacity:1}.travelling .actor{animation:intoPortal 2.6s ease-in-out}.travelling .scene{transform:scale(1.8) rotate(8deg);filter:blur(6px)}.travelling .intro,.travelling .moves,.travelling footer,.travelling .bubble{opacity:0;pointer-events:none}.travelling .flash{animation:none}.travelling:after{content:'';position:absolute;inset:0;z-index:19;box-shadow:inset 0 0 160px 60px #130824;pointer-events:none}.hunting .actor{opacity:.5;pointer-events:none}.hunting .moves{visibility:hidden}.silly .scene{animation:none}.disco .scene{animation:discoColour 2s linear infinite}.disco .motes{opacity:1}.place .eyebrow{font-size:12px}.brand-small{font-size:12px;max-width:85px}.explore{max-width:650px}.small-note{font-size:13px}button:disabled{cursor:default;opacity:.5}.intro .eyebrow{font-size:12px}.reduced-label{font-size:14px}
@keyframes breathe{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes bobJump{0%,100%{transform:translateY(0) scale(1.07,.93)}45%{transform:translateY(-115px) rotate(-8deg) scale(.93,1.07)}80%{transform:translateY(0) scale(1.15,.85)}}@keyframes bobDance{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(12deg) translateY(-24px) scale(1.04,.96)}}@keyframes bobToot{50%{transform:translateY(-8px) rotate(5deg)}}@keyframes bobTickle{50%{transform:rotate(-5deg) scale(1.04,.96)}}@keyframes bobFlush{0%,100%{transform:scale(1) rotate(0)}60%{transform:scale(.04) rotate(1080deg);opacity:.1}80%{transform:scale(.04) rotate(1200deg);opacity:0}90%{transform:scale(1.1) rotate(1440deg);opacity:1}}@keyframes intoPortal{0%{transform:translate(var(--dx,0px),var(--dy,0px))}45%,65%{transform:translate(20vw,-5vh) scale(.02) rotate(600deg);opacity:0}100%{transform:translate(var(--dx,0px),var(--dy,0px));opacity:1}}@keyframes discoColour{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(75deg)}}
@media(max-width:1100px){.moves{top:52%}.actor{left:47%;width:48vw}.intro{width:45%}footer{bottom:24px}.explore{max-width:400px}.world{min-height:840px}}
@media(max-width:700px){.world{min-height:980px}.scene{top:0;height:100%;object-position:62% center}.shade{background:linear-gradient(0deg,#021318 0%,#02131822 43%,#02131844 75%,#0213189c)}header{padding:18px 6%}.brand-small{font-size:10px}.sound{font-size:14px}.intro{margin:7px 0 0 7%;width:88%}.intro .eyebrow{font-size:11px}h1{font-size:44px;letter-spacing:-1.5px;margin:15px 0 10px}.intro p{font-size:14px;margin:10px 0}.intro .primary{position:absolute;right:0;top:110px;font-size:13px;padding:12px 14px}.actor{left:18%;top:28%;width:70%;height:37%}.bob-touch{left:auto;top:auto;width:100%;height:100%}.bob-touch span{top:20%;right:-2%;font-size:12px}.moves{left:5%;right:5%;top:65%;grid-template-columns:repeat(4,1fr);gap:7px}.moves button{padding:10px 4px;font-size:25px;border-radius:14px}.moves span{font-size:12px;line-height:1.4;min-height:34px}.bubble{top:25%;left:6%;right:6%;font-size:16px;padding:17px 20px}footer{bottom:20px;left:6%;right:6%}.place{margin-bottom:12px}.place strong{font-size:18px}.place .eyebrow{font-size:10px}.explore{max-width:none}.explore .glass{font-size:13px;padding:9px}.explore button span{display:inline;font-size:20px}.danger{font-size:13px;padding:10px}.quest{top:270px}.collectibles button{left:clamp(8%,var(--x),82%)}#portal-caption{top:42%}.travelling .actor{animation:intoPortal 2.6s ease-in-out}}
@media(prefers-reduced-motion:reduce){.actor,.bob-touch,.scene{animation:none!important;transition:none!important}.travelling .scene{transform:none;filter:none}.travelling:after{box-shadow:none}}

/* Keep the introduction and action buttons in flow so text never collides. */
.world{height:auto;min-height:100svh}.moves{position:relative;top:auto;left:auto;right:auto;margin:28px 0 0 7%;width:max-content;max-width:86%}footer{position:relative;inset:auto;margin:150px 4.4% 35px}.intro .primary{position:static}.intro{margin-top:35px}.actor{height:580px;max-height:65%;top:150px}
@media(max-width:700px){.world{height:auto;min-height:100svh}.intro{margin-top:20px}.intro .primary{position:static;margin-top:6px}.actor{position:relative;top:auto;left:auto;width:80%;height:340px;max-height:none;margin:24px auto 0}.moves{position:relative;inset:auto;margin:24px 5% 0;width:90%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.moves button{min-height:90px;padding:12px 8px}.moves span{font-size:14px;min-height:0}.moves button:hover{transform:none}footer{position:relative;inset:auto;margin:32px 6% 24px}.friends-bob .friend-portal{top:160px;right:6%}.intro{padding-top:45px}.family-controls{min-height:44px}}

@media(max-width:700px){.friends-bob.friend-visiting .actor{position:relative;top:auto;left:20%;width:60%;height:340px;max-height:none;margin:24px 0 0}}