:root{
    --sky1:#aee3f5; --sky2:#dff6ee;
    --water:#7cc4d9; --water2:#5fb0c9;
    --card:#fffdf7; --ink:#4a3a2c; --ink-soft:#8a7763;
    --accent:#f29e6d; --accent-dark:#e0824a;
    --green:#9ccf80; --green-dark:#7ab35e;
    --gold:#f7c948; --pink:#f4a9c0;
    --shadow:0 4px 14px rgba(74,58,44,.12);
    --radius:18px;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overscroll-behavior:none}
  body{
    font-family:-apple-system,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
    background:#f4ead8; color:var(--ink);
    display:flex;flex-direction:column;
    max-width:520px;margin:0 auto;
    touch-action:manipulation; user-select:none;-webkit-user-select:none;
    height:100dvh;
  }
  button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}

  /* ── Top bar ───────────────────────── */
  #topbar{
    display:flex;align-items:center;gap:6px;
    padding:calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
    background:linear-gradient(#fffdf7,#fdf6e9);
    box-shadow:0 2px 8px rgba(74,58,44,.08); z-index:30;
  }
  .res{
    display:flex;align-items:center;gap:4px;
    background:#fff;border-radius:999px;padding:4px 10px 4px 6px;
    box-shadow:inset 0 0 0 1.5px #eee2cd; font-weight:700;font-size:.85rem;
    flex:1;justify-content:center;min-width:0;
  }
  .res .ico{font-size:1rem}
  #dailyBtn,#muteBtn{
    position:relative;font-size:1.25rem;padding:4px 6px;border-radius:12px;
  }
  #dailyBtn.ready::after{
    content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;
    border-radius:50%;background:#ff5e7e;animation:pulse 1.2s infinite;
  }
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

  /* ── Art sprites (emoji fallback skin) ── */
  .sprite{vertical-align:middle;pointer-events:none;-webkit-user-drag:none}
  .portrait .sprite{max-width:80%;max-height:80%}
  .dam-base.art{background:none}
  .dam-tile{position:absolute;inset:0;border-radius:inherit;
    background-size:auto 100%;background-repeat:repeat-x}
  .dam-cap-l{position:absolute;left:-2px;bottom:0;height:110%;width:auto}
  .dam-cap-r{position:absolute;right:-2px;bottom:0;height:110%;width:auto}
  .dam-arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:130%;width:auto}

  /* ── Scene ─────────────────────────── */
  #scene{
    position:relative;height:42dvh;min-height:250px;overflow:hidden;flex-shrink:0;
    background:linear-gradient(var(--sky1) 0%,var(--sky2) 52%,var(--water) 52.5%,var(--water2) 100%);
  }
  .scene-layer{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none}
  .scene-sky{left:0;top:0;width:100%;height:56%;object-fit:cover;z-index:0}
  .scene-hills-back{left:0;top:21%;width:100%;height:auto;z-index:1}
  .scene-hills-front{left:0;top:36%;width:100%;height:auto;z-index:2}
  .scene-bank-left{left:-3%;top:35%;width:58%;height:auto;z-index:2}
  .scene-bank-right{right:-3%;top:38%;width:56%;height:auto;z-index:2}
  #scene.art-bg .hill{display:none}
  .sun{position:absolute;top:7%;right:8%;font-size:2rem;animation:sunGlow 5s ease-in-out infinite;
    filter:drop-shadow(0 0 14px rgba(255,206,84,.85))}
  @keyframes sunGlow{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.08) rotate(8deg)}}
  .cloud{position:absolute;font-size:1.6rem;opacity:.85;animation:drift linear infinite}
  @keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(560px)}}
  .hill{position:absolute;border-radius:50% 50% 0 0;background:#bfe0a3}
  .hill.h1{width:65%;height:24%;left:-12%;top:33%}
  .hill.h2{width:60%;height:20%;right:-15%;top:37%;background:#aed68f}
  .ripple{position:absolute;width:46px;height:8px;border:2px solid rgba(255,255,255,.45);
    border-radius:50%;animation:rip 4s ease-in-out infinite}
  @keyframes rip{0%,100%{transform:scaleX(1);opacity:.4}50%{transform:scaleX(1.35);opacity:.8}}

  .spot{
    position:absolute;display:flex;flex-direction:column;align-items:center;
    transform:translate(-50%,-50%);z-index:5;
  }
  .spot .glyphs{display:flex;align-items:flex-end;transition:transform .1s;
    animation:sway 4.5s ease-in-out infinite}
  .spot:active .glyphs{transform:scale(.88)}
  .spot .glyph{font-size:2.4rem;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
  .spot .mini{font-size:1.1rem;line-height:1.5;margin:0 -7px;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
  @keyframes sway{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
  .spot .badge{
    margin-top:2px;background:#fff;border-radius:999px;padding:2px 9px;
    font-size:.72rem;font-weight:800;box-shadow:var(--shadow);white-space:nowrap;
  }
  .spot .badge.full{background:var(--gold);animation:pulse 1s infinite}
  .spot .badge.idle{background:#e8e2d6;color:var(--ink-soft)}
  .spot .lvl{
    position:absolute;top:-7px;right:-12px;background:var(--green-dark);color:#fff;
    font-size:.62rem;font-weight:800;border-radius:999px;padding:2px 6px;
    box-shadow:var(--shadow);
  }
  #spotDam .glyph{font-size:2.9rem}
  .dam-base{
    position:absolute;left:50%;top:64%;transform:translateX(-50%);
    width:150px;height:34px;border-radius:14px 14px 6px 6px;z-index:4;
    background:repeating-linear-gradient(100deg,#b9824f 0 9px,#a06b3d 9px 18px);
    box-shadow:0 5px 10px rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.25);
    transition:width .4s ease, height .4s ease;
  }
  .dam-deco{position:absolute;top:-15px;transform:translateX(-50%);font-size:.9rem;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
  .dam-deco.crown{top:-27px;font-size:1.05rem;animation:sunGlow 4s ease-in-out infinite}
  .swimmer{position:absolute;font-size:1.45rem;z-index:6;transform:translate(-50%,-50%);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));animation:bob 2.6s ease-in-out infinite}
  @keyframes bob{0%,100%{margin-top:0}50%{margin-top:-6px}}
  /* posed beavers stand on the bank — a gentler bob so feet stay near the ground */
  .swimmer.onland{z-index:7;filter:drop-shadow(0 3px 2px rgba(0,0,0,.22));
    animation:landbob 3.2s ease-in-out infinite}
  @keyframes landbob{0%,100%{margin-top:0}50%{margin-top:-3px}}
  /* paper-doll rig: a body sprite plus slot-anchored accessory/tool layers.
     isolation:isolate makes the rig its own stacking context so a `.behind`
     layer (z-index:-1) paints behind the body — e.g. a hat's rear brim sits
     behind the head while its front sits in front, head sandwiched between. */
  .rig{position:relative;display:inline-block;line-height:0;isolation:isolate}
  .rig>.sprite{width:100%;display:block}
  .rig>.acc{position:absolute}
  .rig>.acc.behind{z-index:-1}
  .deco-item{position:absolute;font-size:1.5rem;transform:translate(-50%,-50%);z-index:3;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
  #leaf{
    position:absolute;font-size:2rem;z-index:20;transform:translate(-50%,-50%);
    animation:leafSpin 1.6s ease-in-out infinite;cursor:pointer;
    filter:drop-shadow(0 0 8px rgba(247,201,72,.9));
  }
  @keyframes leafSpin{0%,100%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
    50%{transform:translate(-50%,-50%) rotate(12deg) scale(1.18)}}
  .float-txt{
    position:absolute;font-weight:800;font-size:.95rem;z-index:25;pointer-events:none;
    transform:translate(-50%,-50%);animation:floatUp 1s ease-out forwards;
    text-shadow:0 1px 0 #fff;
  }
  @keyframes floatUp{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-46px}}

  /* ── Cute ambience & celebrations ──── */
  .flyer{position:absolute;font-size:.95rem;z-index:2;pointer-events:none;animation:flyBy linear infinite}
  @keyframes flyBy{0%{transform:translate(-60px,0)}50%{transform:translate(250px,-16px)}100%{transform:translate(560px,0)}}
  .tuft{position:absolute;font-size:.85rem;z-index:3;pointer-events:none;transform:translate(-50%,-50%);
    animation:sway 4s ease-in-out infinite}
  .butterfly{position:absolute;font-size:.95rem;z-index:7;pointer-events:none;animation:flutter 11s ease-in-out infinite}
  @keyframes flutter{0%,100%{transform:translate(0,0) rotate(-10deg)}25%{transform:translate(26px,-16px) rotate(8deg)}
    50%{transform:translate(-6px,-30px) rotate(-6deg)}75%{transform:translate(-28px,-10px) rotate(12deg)}}
  .glint{position:absolute;width:15px;height:3px;border-radius:99px;background:rgba(255,255,255,.85);
    z-index:3;pointer-events:none;animation:glint 3.4s ease-in-out infinite}
  @keyframes glint{0%,100%{opacity:0;transform:scaleX(.35)}50%{opacity:.9;transform:scaleX(1)}}
  .fishjump{position:absolute;font-size:1.15rem;z-index:6;pointer-events:none;
    animation:fishArc 1.7s ease-in-out forwards}
  @keyframes fishArc{0%{transform:translate(-50%,-50%) translateY(10px) rotate(-40deg);opacity:0}
    18%{opacity:1}50%{transform:translate(-50%,-50%) translateY(-26px) rotate(5deg)}
    82%{opacity:1}100%{transform:translate(-50%,-50%) translateY(12px) rotate(50deg);opacity:0}}
  .cute-emo{position:absolute;font-size:.95rem;z-index:24;pointer-events:none;
    transform:translate(-50%,-130%);animation:cuteFloat 1.8s ease-out forwards}
  @keyframes cuteFloat{0%{opacity:0;margin-top:0}18%{opacity:1}100%{opacity:0;margin-top:-32px}}
  .burst-p{position:absolute;font-size:.95rem;z-index:28;pointer-events:none;
    animation:burstFly .85s ease-out forwards}
  @keyframes burstFly{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}
    100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.25) rotate(var(--rot))}}
  .spot.pop .glyphs{animation:popIn .55s ease}
  @keyframes popIn{0%{transform:scale(1)}35%{transform:scale(1.4) rotate(-7deg)}
    70%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
  .deco-item.new{animation:dropIn .65s cubic-bezier(.34,1.56,.64,1)}
  @keyframes dropIn{0%{transform:translate(-50%,-170%) scale(.3);opacity:0}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
  .wx-pill{
    position:absolute;left:8px;top:8px;z-index:18;background:rgba(255,255,255,.88);
    border-radius:999px;padding:4px 10px;font-size:.66rem;font-weight:800;
    box-shadow:var(--shadow);color:var(--ink);pointer-events:none;
  }
  #scene.w-rain{filter:saturate(.85) brightness(.95)}
  .rainfall{
    position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.45;
    background:repeating-linear-gradient(75deg,transparent 0 14px,rgba(255,255,255,.5) 14px 15.5px);
    animation:rainMove .45s linear infinite;
  }
  @keyframes rainMove{from{background-position:0 0}to{background-position:-26px 64px}}
  .rainbow-arc{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-size:3.4rem;opacity:.85;z-index:2}
  #moment{
    position:absolute;font-size:1.8rem;z-index:20;transform:translate(-50%,-50%);cursor:pointer;
    animation:bob 1.4s ease-in-out infinite;
    filter:drop-shadow(0 0 9px rgba(244,169,192,.95));
  }
  .btn.alt{background:var(--pink);box-shadow:0 3px 0 #d989a3}
  .btn.alt:active{box-shadow:0 1px 0 #d989a3}
  #modal .btn + .btn{margin-top:8px}

  /* ── Panels ────────────────────────── */
  #panel{flex:1;overflow-y:auto;padding:12px 12px 8px;-webkit-overflow-scrolling:touch}
  .card{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:12px;margin-bottom:10px;
  }
  .card h3{font-size:.95rem;display:flex;align-items:center;gap:6px}
  .card .sub{font-size:.76rem;color:var(--ink-soft);margin-top:2px}
  .row{display:flex;align-items:center;gap:10px}
  .row .grow{flex:1;min-width:0}
  .btn{
    background:var(--accent);color:#fff;font-weight:800;font-size:.82rem;
    padding:9px 14px;border-radius:14px;box-shadow:0 3px 0 var(--accent-dark);
    transition:transform .08s;white-space:nowrap;
  }
  .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-dark)}
  .btn.green{background:var(--green);box-shadow:0 3px 0 var(--green-dark)}
  .btn.green:active{box-shadow:0 1px 0 var(--green-dark)}
  .btn.disabled{background:#d9d2c4;box-shadow:0 3px 0 #c4bba9;color:#fff;pointer-events:none}
  .btn.small{font-size:.74rem;padding:7px 11px}
  .cost{font-size:.74rem;font-weight:700;color:var(--ink-soft);margin-top:3px}
  .portrait{
    width:48px;height:48px;border-radius:50%;background:#ffe9d2;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:1.6rem;
    box-shadow:inset 0 0 0 2px #f7d9b8;position:relative;
  }
  .portrait .plvl{
    position:absolute;bottom:-4px;right:-4px;background:var(--gold);font-size:.6rem;
    font-weight:800;border-radius:999px;padding:1px 5px;box-shadow:var(--shadow);
  }
  .chips{display:flex;gap:5px;margin-top:7px}
  .chip{
    flex:1;text-align:center;font-size:.7rem;font-weight:800;padding:6px 2px;
    border-radius:10px;background:#f1ead9;color:var(--ink-soft);
  }
  .chip.on{background:var(--green);color:#fff}
  .bar{height:8px;border-radius:99px;background:#efe7d5;overflow:hidden;margin-top:6px}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-dark));
    border-radius:99px;transition:width .3s}
  .locked{opacity:.55}
  .tag{font-size:.64rem;font-weight:800;background:var(--pink);color:#fff;
    border-radius:999px;padding:2px 8px}
  .tag.gold{background:var(--gold);color:#7a5b00}

  /* ── Sticker album ─────────────────── */
  .stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sticker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
    background:#fdf6e9;border-radius:12px;padding:8px 4px;box-shadow:inset 0 0 0 2px #f1e6cf}
  .sticker.missing{opacity:.55;filter:grayscale(.4)}
  .s-emoji{font-size:1.5rem}
  .s-name{font-size:.66rem;font-weight:800}
  .s-hint{font-size:.6rem;color:var(--ink-soft)}

  /* ── Tabs ──────────────────────────── */
  #tabs{
    display:flex;background:#fffdf7;box-shadow:0 -2px 10px rgba(74,58,44,.1);
    padding-bottom:env(safe-area-inset-bottom, 0px);z-index:30;
  }
  .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:8px 0 6px;font-size:.62rem;font-weight:800;color:var(--ink-soft);
    position:relative;
  }
  .tab .tico{font-size:1.35rem;transition:transform .15s}
  .tab.on{color:var(--accent-dark)}
  .tab.on .tico{transform:translateY(-3px) scale(1.15)}
  .tab .dot{position:absolute;top:5px;right:24%;width:8px;height:8px;border-radius:50%;
    background:#ff5e7e;animation:pulse 1.2s infinite}

  /* ── Modal ─────────────────────────── */
  #modalWrap{
    position:fixed;inset:0;background:rgba(60,45,30,.45);z-index:50;
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  #modalWrap.show{opacity:1;pointer-events:auto}
  #modal{
    background:var(--card);border-radius:24px;padding:22px 18px;max-width:340px;width:100%;
    text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25);
    transform:scale(.9);transition:transform .2s;max-height:80dvh;overflow-y:auto;
  }
  #modalWrap.show #modal{transform:scale(1)}
  #modal .big{font-size:3rem;margin-bottom:6px}
  #modal h2{font-size:1.15rem;margin-bottom:6px}
  #modal p{font-size:.85rem;color:var(--ink-soft);line-height:1.45;margin-bottom:14px}
  #modal .btn{width:100%}
  .reward-line{display:flex;justify-content:center;gap:14px;font-weight:800;margin-bottom:14px}

  /* ── Rewarded ads (Otter Cinema) ───── */
  #adWrap{
    position:fixed;inset:0;background:rgba(35,26,18,.8);z-index:60;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  #adWrap.show{display:flex}
  #adBox{
    background:#221a12;border-radius:24px;max-width:340px;width:100%;overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.45);text-align:center;
  }
  #adScreen{
    position:relative;height:190px;overflow:hidden;
    background:linear-gradient(#79bcd8 0%,#cdeccf 70%,#9ccf80 70.5%,#7ab35e 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  }
  #adScreen.with-poster{background:#7cc4d9}
  #adScreen .ad-poster{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.88;filter:saturate(.96) brightness(1.03);
  }
  #adScreen.with-poster::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,253,247,.08),rgba(34,26,18,.16) 64%,rgba(34,26,18,.28));
  }
  #adScreen.with-poster .ad-star,
  #adScreen.with-poster .ad-line,
  #adScreen.with-poster .ad-sub{
    position:relative;z-index:1;background:rgba(255,253,247,.82);
    box-shadow:0 2px 9px rgba(74,58,44,.12);
  }
  #adScreen.with-poster .ad-star{border-radius:999px;padding:5px 9px 3px;line-height:1}
  #adScreen.with-poster .ad-line{border-radius:999px;padding:4px 13px;max-width:88%}
  #adScreen.with-poster .ad-sub{border-radius:12px;padding:3px 10px;max-width:86%}
  #adScreen .ad-star{font-size:3.1rem;animation:bob 1.5s ease-in-out infinite}
  #adScreen .ad-line{font-weight:800;color:#3c2f22;font-size:.92rem;padding:0 18px}
  #adScreen .ad-sub{font-size:.68rem;color:#5d4d3a;font-weight:700;padding:0 18px}
  .ad-tag{
    position:absolute;top:8px;left:8px;background:rgba(0,0,0,.45);color:#fff;
    font-size:.58rem;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:.06em;z-index:2;
  }
  #adBar{height:6px;background:#3a2f25}
  #adBar i{display:block;height:100%;width:0;background:var(--gold)}
  #adFoot{padding:12px 14px 14px}
  #adFoot .btn{width:100%}
  #adSkip{margin-top:9px;font-size:.72rem;font-weight:700;color:#a89a88;cursor:pointer}

  .empty-note{text-align:center;color:var(--ink-soft);font-size:.8rem;padding:18px 8px}
  h4.section{font-size:.78rem;color:var(--ink-soft);margin:4px 4px 8px;text-transform:uppercase;letter-spacing:.06em}