*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;background:#d4d8da;font-family:Georgia,'Times New Roman',serif;}
  #wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:linear-gradient(#bfc9d1 0%,#cbd1d6 55%,#d4d8da 100%);}
  #stage{
    position:relative;width:480px;height:640px;flex:none;
    transform-origin:center center;
    touch-action:none;user-select:none;
  }
  #bg{position:absolute;inset:0;z-index:1;}
  .furn{position:absolute;inset:0;pointer-events:none;}
  .furn svg{display:block;}

  /* ----- sprites ----- */
  .sprite{position:absolute;transform:translate(-50%,-88%);will-change:left,top;}
  .sprite svg{display:block;overflow:visible;}
  .plant{cursor:grab;transform:translate(-50%,-88%) scale(.9);}
  .plant:active{cursor:grabbing;}
  .plant.dragging{filter:drop-shadow(0 9px 7px rgba(0,0,0,.35));}
  .plant .grow{transform-origin:50% 100%;transition:transform .8s cubic-bezier(.34,1.56,.64,1);}
  .plant .foliage{transform-origin:50% 100%;animation:sway 5.5s ease-in-out infinite;}
  @keyframes sway{0%,100%{transform:rotate(-1.3deg);}50%{transform:rotate(1.3deg);}}
  .plant.wiggle .foliage{animation:wig .55s ease-in-out;}
  @keyframes wig{0%{transform:rotate(0)}25%{transform:rotate(7deg)}55%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
  .critter{cursor:pointer;}
  .critter .body{transform-origin:50% 100%;}
  .walking .body{animation:bob .42s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
  .meditating .body{animation:breathe 3.4s ease-in-out infinite;}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045,1.06)}}
  .hop .body{animation:hop .6s ease;}
  @keyframes hop{0%{transform:translateY(0)}30%{transform:translateY(-13px) rotate(-6deg)}55%{transform:translateY(0)}72%{transform:translateY(-6px) rotate(5deg)}100%{transform:translateY(0)}}
  .flip svg{transform:scaleX(-1);}

  .heart{position:absolute;font-size:16px;pointer-events:none;z-index:999;animation:floatup 1.4s ease-out forwards;}
  .zzz{position:absolute;font-size:14px;color:#f1e9da;pointer-events:none;z-index:999;animation:floatup 2.6s ease-out forwards;font-style:italic;
    background:rgba(24,22,26,.85);padding:4px 11px;border-radius:13px;white-space:nowrap;
    box-shadow:0 2px 9px rgba(0,0,0,.35);line-height:1.2;}
  .zzz.sym{background:none;box-shadow:none;padding:0;font-size:17px;}
  @keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-44px) scale(1.15)}}

  /* bloom effect */
  .bloom{position:absolute;pointer-events:none;z-index:998;transform:translate(-50%,-100%);}
  .bloom .bl{transform-origin:50% 100%;animation:blpop 3.8s ease-out forwards;}
  @keyframes blpop{
    0%{transform:scale(0) rotate(-8deg);opacity:0}
    10%{transform:scale(1.15) rotate(3deg);opacity:1}
    18%{transform:scale(1);}
    70%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(.92) translateY(4px)}
  }
  .petal{position:absolute;pointer-events:none;z-index:999;animation:fall 2.8s ease-in forwards;}
  @keyframes fall{
    0%{opacity:0;transform:translate(0,0) rotate(0)}
    12%{opacity:1}
    100%{opacity:0;transform:translate(var(--dx),58px) rotate(var(--rot))}
  }
  .seed{position:absolute;pointer-events:none;z-index:999;animation:drift 3.2s ease-out forwards;}
  @keyframes drift{
    0%{opacity:0;transform:translate(0,0)}
    14%{opacity:.95}
    100%{opacity:0;transform:translate(var(--dx),-70px)}
  }

  /* ----- UI ----- */
  #skyA,#skyB,#dtskyA,#dtskyB,#dtstars{position:absolute;inset:0;pointer-events:none;}
  #skyB,#dtskyB,#dtstars{opacity:0;}
  .star{position:absolute;border-radius:50%;background:#fff;animation:twinkle 3.2s ease-in-out infinite;}
  .nighty #hint{color:rgba(238,230,212,.75);}
  .portalobj{animation:portalglow 2.8s ease-in-out infinite;}
  @keyframes portalglow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,240,200,.35))}50%{filter:drop-shadow(0 0 11px rgba(255,240,200,.75))}}
  .dreambub{animation:bubbob 3s ease-in-out infinite;}
  @keyframes bubbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  #hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:1500;
    color:rgba(70,55,50,.8);font-size:clamp(12.5px,1.8vh,16px);font-style:italic;pointer-events:none;transition:opacity 1.5s;}
  .togglebtn{position:absolute;top:14px;z-index:7000;width:38px;height:38px;border-radius:50%;
    border:none;cursor:pointer;background:rgba(35,40,45,.5);color:#ece5d4;font-size:16px;
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
  .togglebtn.off{opacity:.45;}
  .togglebtn.off::after{content:'';position:absolute;width:22px;height:2px;background:#ece5d4;
    transform:rotate(-45deg);border-radius:1px;}
  #soundbtn{right:14px;}
  #musicbtn{right:60px;}
  @keyframes twinkle{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
  /* fallen leaves */
  .leafbit{pointer-events:none;}
  .leafbit .lf{animation:leaffall .95s ease-out;}
  @keyframes leaffall{
    0%{transform:translate(7px,-34px) rotate(50deg);opacity:0}
    14%{opacity:1}
    50%{transform:translate(-5px,-15px) rotate(-22deg)}
    100%{transform:translate(0,0) rotate(0)}
  }
  .leafbit.eaten svg{animation:eatleaf .5s ease forwards;}
  @keyframes eatleaf{to{opacity:0;transform:scale(.15)}}

  /* ===== DOWNTOWN MONCTON ===== */
  #dt{position:absolute;inset:0;z-index:3000;display:none;overflow:hidden;
    background:linear-gradient(#1d2a44 0%,#3a4a6b 30%,#7a6a86 55%,#c98a6a 72%,#e8b08a 82%);}
  #dt.on{display:block;animation:dtfade .8s ease;}
  @keyframes dtfade{from{opacity:0}to{opacity:1}}
  #dtscale{position:absolute;left:0;bottom:0;width:2740px;height:640px;transform-origin:0 100%;}
  #dtfar{position:absolute;bottom:118px;left:0;height:200px;width:3100px;opacity:.55;pointer-events:none;}
  #dtworld{position:absolute;top:0;left:0;width:2740px;height:640px;will-change:transform;cursor:grab;}
  #dtworld:active{cursor:grabbing;}
  .gliding{transition:transform .6s cubic-bezier(.22,1,.36,1);}
  .bldg{position:absolute;bottom:118px;}
  .bldg svg{display:block;overflow:visible;}
  .hotspot{cursor:pointer;}
  .hotspot:hover .glowable{filter:brightness(1.12);}
  #dtroad{position:absolute;bottom:0;left:-600px;right:-600px;height:80px;background:linear-gradient(#3c3f45,#2e3137);}
  #dtwalk{position:absolute;bottom:80px;left:-600px;right:-600px;height:38px;
    background:repeating-linear-gradient(90deg,#9b948b 0 70px,#8d867d 70px 72px);box-shadow:inset 0 4px 6px rgba(255,225,190,.25);}
  #dtdim{position:absolute;left:-2400px;right:-2400px;top:-200px;bottom:-200px;z-index:3400;
    background:#0c0a10;opacity:0;pointer-events:none;transition:opacity .55s ease;}
  #dtdim.on{opacity:.93;}
  #dt.entering #dtlabel,#dt.entering #dthint{opacity:0 !important;transition:opacity .4s;}
  #dtlabel{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:3400;pointer-events:none;
    text-align:center;color:#ffe9c9;font-size:13px;letter-spacing:.28em;text-transform:uppercase;
    background:rgba(24,22,26,.45);padding:8px 20px 9px;border-radius:16px;backdrop-filter:blur(2px);}
  #dttitle{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;
    font-size:clamp(15px,2.2vh,22px);letter-spacing:.2em;color:#f0ece2;margin-bottom:5px;
    text-shadow:0 1px 4px rgba(10,15,25,.7);}
  #dthint{position:absolute;bottom:30px;left:0;right:0;text-align:center;z-index:3400;pointer-events:none;
    color:rgba(255,240,220,.85);font-size:13.5px;font-style:italic;text-shadow:0 1px 3px rgba(10,15,25,.7);transition:opacity 1.5s;}
  @keyframes cardup{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
  .gull{position:absolute;color:rgba(255,245,230,.7);font-size:11px;pointer-events:none;animation:gull 26s linear infinite;}
  @keyframes gull{from{transform:translateX(-40px)}to{transform:translateX(calc(100vw + 80px))}}
  .borewave{position:absolute;pointer-events:none;}

  /* ===== INTERIORS ===== */
  #interior{position:absolute;inset:0;z-index:5000;display:none;overflow:hidden;background:#0c0a10;}
  #interior.on{display:block;animation:intin .9s cubic-bezier(.22,1,.36,1);}
  @keyframes intin{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
  #introot{position:absolute;left:50%;top:50%;width:480px;height:640px;margin:-320px 0 0 -240px;
    transform:translateY(var(--SHIFT,0px)) scale(var(--S,1));}
  #intcard,#balccard{position:absolute;z-index:5600;display:none;margin:0 auto;
    background:rgba(24,22,26,.93);color:#f1e9da;border-radius:14px;padding:17px 19px 15px;
    box-shadow:0 12px 36px rgba(0,0,0,.55);border:1px solid rgba(255,210,160,.22);
    backdrop-filter:blur(4px);}
  #interior.on #intcard{display:block;animation:cardup .7s .3s cubic-bezier(.32,1.3,.6,1) backwards;}
  #balccard{display:block;z-index:1500;}   /* balcony layer: covered by downtown/interiors */
  #intcard h3,#balccard h3{font-size:17.5px;letter-spacing:.04em;color:#ffd9a8;margin-bottom:6px;font-weight:normal;}
  #intcard p,#balccard p{font-size:14.5px;line-height:1.55;color:#e7ddca;}
  #intcard .addr,#balccard .addr{margin-top:8px;font-size:12.5px;font-style:italic;color:#a89a82;letter-spacing:.05em;}
  #binfo,#iinfo{position:absolute;bottom:14px;right:14px;width:44px;height:44px;border-radius:50%;
    border:none;cursor:pointer;background:rgba(24,22,26,.85);color:#ffd9a8;
    font-family:Georgia,serif;font-size:20px;font-style:italic;
    box-shadow:0 0 0 2px rgba(255,210,160,.4),0 4px 12px rgba(0,0,0,.4);
    display:none;align-items:center;justify-content:center;
    animation:infopulse 2.6s ease-in-out infinite;}
  #binfo{z-index:1500;}
  #iinfo{z-index:5650;}
  @keyframes infopulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  #fader{position:absolute;inset:0;z-index:8000;background:#0c0a10;opacity:0;pointer-events:none;
    transition:opacity .48s ease;}
  #fader.on{opacity:1;pointer-events:auto;}
  #intback,#balcback{position:absolute;top:10px;left:10px;z-index:5500;border:none;cursor:pointer;
    background:linear-gradient(#fdf3dd,#ecd9b4);color:#3a2c1a;font-family:Georgia,serif;font-size:14px;
    padding:10px 18px;border-radius:22px;letter-spacing:.04em;font-weight:bold;
    box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 2px rgba(255,220,160,.5);}
  #intback:hover,#balcback:hover{filter:brightness(1.05);}
  #balcback{z-index:1600;}   /* balcony only: sits under the downtown/interior layers */
  #intlabel{position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:5400;pointer-events:none;
    color:#ffe9c9;font-size:13px;letter-spacing:.26em;text-transform:uppercase;
    background:rgba(24,22,26,.55);padding:7px 18px;border-radius:15px;backdrop-filter:blur(2px);}
  .iprop{position:absolute;transform:translate(-50%,-92%);}
  .iprop svg{display:block;overflow:visible;}
  .tapable{cursor:pointer;}
  .floaty{animation:orbfloat 4.6s ease-in-out infinite;}
  @keyframes orbfloat{0%,100%{transform:translate(-50%,-92%) translateY(0)}50%{transform:translate(-50%,-92%) translateY(-13px)}}
  .rain{position:absolute;width:1.5px;height:15px;pointer-events:none;
    background:linear-gradient(rgba(170,205,255,0),rgba(170,205,255,.6));animation:raindrop linear infinite;}
  @keyframes raindrop{from{transform:translateY(0)}to{transform:translateY(640px)}}
  .blink{animation:blinky 4.2s infinite;}
  @keyframes blinky{0%,90%,100%{opacity:1}93%,96%{opacity:.05}}
  .ghosty{animation:ghostdrift 9.5s ease-in-out forwards;}
  @keyframes ghostdrift{
    0%{opacity:0;transform:translate(-50%,-92%) translateX(0)}
    10%{opacity:.8}
    50%{transform:translate(-50%,-92%) translateX(130px) translateY(-14px)}
    88%{opacity:.6}
    100%{opacity:0;transform:translate(-50%,-92%) translateX(250px)}
  }
  .bob1{animation:bobby .85s ease-in-out infinite alternate;transform-origin:50% 100%;}
  .bob2{animation:bobby 1.25s ease-in-out infinite alternate;transform-origin:50% 100%;}
  .bob3{animation:bobby 1.6s ease-in-out infinite alternate;transform-origin:50% 100%;}
  @keyframes bobby{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2.5deg)}}
  .swayy{animation:swayy 2.6s ease-in-out infinite;transform-origin:50% 100%;}
  @keyframes swayy{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
  .discospin{animation:discospin 7s linear infinite;transform-origin:50% 50%;}
  @keyframes discospin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .heatw{position:absolute;width:36px;height:13px;pointer-events:none;opacity:0;
    border-top:2px solid rgba(255,170,110,.4);border-radius:50%;
    animation:heatrise 3.4s ease-out infinite;}
  @keyframes heatrise{0%{opacity:0;transform:translateY(0) scaleX(.7)}22%{opacity:.85}100%{opacity:0;transform:translateY(-92px) scaleX(1.3)}}
  @media (prefers-reduced-motion:reduce){
    .plant .foliage,.walking .body,.meditating .body,.gull{animation:none;}
  }
  #intro{position:absolute;inset:0;z-index:9000;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:linear-gradient(#0c1226 0%,#1d2a44 45%,#3a4a6b 72%,#7a6a86 100%);}
  #intro .ittl{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;
    font-size:clamp(26px,7vw,54px);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;z-index:3;
    background:linear-gradient(110deg,#e8e4da 40%,#fffdf2 50%,#e8e4da 60%);background-size:240% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:introttl 2.4s cubic-bezier(.22,1,.36,1) both,isheen 6s linear 2.8s infinite;}
  @keyframes isheen{from{background-position:120% 0}to{background-position:-120% 0}}
  @keyframes introttl{from{letter-spacing:.85em;text-indent:.85em;opacity:0}to{letter-spacing:.32em;text-indent:.32em;opacity:1}}
  #intro .isub{color:#caa87c;font-size:clamp(10px,2.6vw,13px);letter-spacing:.3em;text-transform:uppercase;
    z-index:3;opacity:0;animation:introsub 1.4s ease 1s forwards;}
  @keyframes introsub{to{opacity:.9}}
  #intro .icap{color:rgba(240,235,220,.75);font-style:italic;font-size:clamp(12px,3.2vw,15px);z-index:3;
    min-height:1.4em;text-align:center;padding:0 20px;}
  #intro .ipct{color:#e8cfae;font-size:clamp(11px,2.8vw,13px);letter-spacing:.18em;text-transform:uppercase;z-index:3;}
  #intro .ienter{display:none;position:relative;border:none;cursor:pointer;font-family:Georgia,serif;
    font-size:clamp(17px,4.6vw,21px);font-style:italic;font-weight:bold;color:#3a2c1a;
    background:linear-gradient(#fff8e4,#f0d8a8);padding:16px 40px;border-radius:32px;z-index:4;
    animation:ctapulse 2.2s ease-in-out infinite;}
  #intro .ienter::after{content:'';position:absolute;inset:-7px;border-radius:40px;
    border:2px solid rgba(255,224,170,.7);animation:ringout 2.2s ease-out infinite;pointer-events:none;}
  @keyframes ctapulse{
    0%,100%{transform:scale(1);box-shadow:0 0 0 2px rgba(255,224,170,.55),0 0 16px 2px rgba(255,214,120,.3),0 6px 24px rgba(0,0,0,.5);}
    50%{transform:scale(1.07);box-shadow:0 0 0 3px rgba(255,232,185,.95),0 0 38px 12px rgba(255,214,120,.55),0 8px 30px rgba(0,0,0,.5);}}
  @keyframes ringout{from{transform:scale(1);opacity:.85}to{transform:scale(1.55);opacity:0}}
  #introsky{position:absolute;inset:0;pointer-events:none;z-index:1;}
  #introskyline{position:absolute;left:0;right:0;bottom:86px;height:130px;width:100%;z-index:2;pointer-events:none;}
  #introriver{position:absolute;left:0;right:0;bottom:0;height:86px;z-index:2;
    background:linear-gradient(#8a5a36,#4a2c16);}
  #introwave{position:absolute;bottom:58px;left:0;z-index:3;transition:left .5s ease;pointer-events:none;}
  @media (max-width:700px){
    #intlabel,#dtlabel{top:62px;font-size:10px;letter-spacing:.16em;padding:6px 13px;}
    #dttitle{font-size:14px;letter-spacing:.14em;margin-bottom:3px;}
    #binfo,#iinfo{display:flex;}
    #balccard.mob{display:none;}
    #balccard.mob.open{display:block;animation:cardup .45s cubic-bezier(.32,1.3,.6,1);}
    #interior.on #intcard.mob{display:none;animation:none;}
    #interior.on #intcard.mob.open{display:block;animation:cardup .45s cubic-bezier(.32,1.3,.6,1);}
    #intcard,#balccard{bottom:72px !important;max-height:52vh;overflow-y:auto;}
  }

/* ===== mobile gesture hardening =====
   manipulation removes double-tap-zoom & tap-delay quirks everywhere;
   none on the pannable scenes stops scroll-gesture hijacking of swipes */
*{touch-action:manipulation;}
#dt,#stage{touch-action:none;}