/* =====================================================================
   The Tiny Water Cycle — a living miniature diorama
   ===================================================================== */
:root{
  --ink:#2c2117;
  --paper:#f6efe0;
  --card:#fffdf7;
  --accent:#3a8fb7;
  --accent-deep:#26617f;
  --leaf:#5b9a36;
  --sun:#f4a93a;
  --shadow:0 10px 30px rgba(28,42,22,.28);
  --radius:18px;
  --dock-bg:rgba(255,253,247,.86);
  --font-hand:'Caveat',cursive;
  --font-ui:'Fredoka',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 50% 0%, #2b3a4a 0%, #1a2530 55%, #11181f 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 30%, #2b4150, #121b22);
  transition:opacity .7s ease, visibility .7s;
}
body:not(.is-loading) .loader{opacity:0; visibility:hidden; pointer-events:none;}
.loader__inner{text-align:center; color:#dff3ff;}
.loader__drop{
  width:34px; height:46px; margin:0 auto 18px;
  background:linear-gradient(#bfeaff,#5cb6d6);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform:rotate(45deg);
  box-shadow:0 0 24px rgba(120,200,240,.6);
  animation:dropPulse 1.1s ease-in-out infinite;
}
@keyframes dropPulse{0%,100%{transform:rotate(45deg) scale(1);}50%{transform:rotate(45deg) scale(.78);}}
.loader__text{font-family:var(--font-hand); font-size:1.5rem; letter-spacing:.3px;}

/* ---------- Stage ---------- */
.stage{position:fixed; inset:0; display:grid; place-items:center; padding:clamp(8px,2vw,26px);}

.diorama{
  position:relative;
  width:min(96vw, calc((100dvh - 40px) * 1.6));
  aspect-ratio:16/10;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow), 0 2px 0 rgba(255,255,255,.15) inset;
}
.diorama__shadow{
  position:absolute; left:6%; right:6%; bottom:-4%; height:9%;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.45), transparent 70%);
  filter:blur(8px); z-index:-1;
}
/* The SVG itself is the zoom target (clipped by the fixed .diorama box), so a
   "lean in" never changes the box size — which keeps mobile layouts intact. */
.scene{
  display:block; width:100%; height:100%;
  transform-origin:center center;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

/* ---------- SVG ambient animations ---------- */
.sun{transform-box:fill-box; transform-origin:center;}
.sun__rays{transform-origin:center; animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#sunBody{animation:sunBreathe 6s ease-in-out infinite;}
@keyframes sunBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}

.cloud{transform-box:fill-box;}
.tree{transform-box:fill-box; transform-origin:bottom center; will-change:transform;}
.grass-tuft{transform-box:fill-box; transform-origin:bottom center;}
.reed{transform-box:fill-box; transform-origin:bottom center;}

.glint{animation:glint 3.5s ease-in-out infinite;}
@keyframes glint{0%,100%{opacity:0;}50%{opacity:.8;}}

.star{animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.25;}50%{opacity:1;}}

.firefly{filter:drop-shadow(0 0 6px #fff3a0);}

/* Labels drawn in the SVG */
.cutLabel{font-family:var(--font-hand); font-size:24px; fill:#ffe9c2; opacity:.85;}
.tapeLabel{font-family:var(--font-hand); font-size:26px; fill:#5a4326;}

/* ---------- Top bar ---------- */
.topbar{
  position:absolute; top:clamp(10px,2.4vw,26px); left:50%; transform:translateX(-50%);
  width:min(96vw, calc((100vh - 40px)*1.6));
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:0 8px; pointer-events:none; z-index:20;
}
.topbar__title{pointer-events:auto;}
.topbar__kicker{
  display:inline-block; font-family:var(--font-hand); font-size:1.35rem;
  color:#ffe9c2; background:rgba(20,30,40,.35); padding:1px 12px; border-radius:30px;
  transform:rotate(-2deg);
}
.topbar h1{
  margin:.1em 0 0; font-size:clamp(1.5rem,3.4vw,2.7rem); line-height:1;
  color:#fff; font-weight:700; letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.18), 0 0 20px rgba(120,200,240,.3);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-ui); font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; padding:.7em 1.2em; border-radius:30px;
  background:linear-gradient(180deg,#4aa3c9,#2e7596); color:#fff;
  box-shadow:0 6px 14px rgba(20,60,80,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.07);}
.btn:active{transform:translateY(0);}
.btn--soft{background:#eef3f0; color:var(--accent-deep); box-shadow:0 4px 10px rgba(0,0,0,.12);}
.btn--ghost{
  pointer-events:auto; background:rgba(255,253,247,.82); color:var(--accent-deep);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ---------- Control dock ---------- */
.dock{
  position:absolute; left:50%; bottom:clamp(8px,2vw,20px); transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:8px 12px; border-radius:40px;
  background:var(--dock-bg); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.6);
  z-index:25; max-width:96vw;
}
.dock__btn{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  border:none; background:transparent; cursor:pointer; color:var(--ink);
  font-family:var(--font-ui); font-weight:600; font-size:.7rem; padding:4px 8px; border-radius:14px;
  transition:background .15s, transform .15s;
}
.dock__btn:hover{background:rgba(58,143,183,.14); transform:translateY(-2px);}
.dock__btn[aria-pressed="true"]{background:rgba(58,143,183,.22);}
.dock__icon{font-size:1.3rem; line-height:1;}
.dock__lbl{opacity:.85;}
.dock__sep{width:1px; height:34px; background:rgba(0,0,0,.12);}
.dock__slider{display:flex; align-items:center; gap:6px; font-size:1.1rem;}
.dock__slider input[type=range]{
  -webkit-appearance:none; appearance:none; width:84px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#bfe3f0); outline:none;
}
.dock__slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.dock__slider input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:pointer;
}
.dock__time{display:flex; gap:4px; background:rgba(0,0,0,.06); border-radius:30px; padding:3px;}
.dock__time button{
  border:none; background:transparent; cursor:pointer; font-size:1.15rem;
  width:34px; height:30px; border-radius:24px; transition:background .15s, transform .15s;
}
.dock__time button:hover{transform:scale(1.12);}
.dock__time button.is-active{background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2);}

/* ---------- Legend ---------- */
.legend{
  position:absolute; left:50%; bottom:clamp(70px,9vw,96px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:18;
  pointer-events:none; max-width:96vw;
}
.legend__hint{
  font-family:var(--font-hand); font-size:1.2rem; color:#ffe9c2;
  background:rgba(20,30,40,.4); padding:1px 12px; border-radius:20px;
}
.legend__chips{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; pointer-events:auto;}
.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:none; font-family:var(--font-ui); font-weight:600; font-size:.82rem;
  padding:.42em .85em; border-radius:30px; color:#214;
  background:rgba(255,253,247,.9); box-shadow:0 4px 12px rgba(0,0,0,.22);
  transition:transform .15s, background .15s;
}
.chip:hover{transform:translateY(-2px);}
.chip.is-active{background:var(--sun); color:#3a2a08;}
.chip__num{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.72rem;
}
.chip.is-active .chip__num{background:#3a2a08; color:var(--sun);}

/* ---------- Hotspot pins (SVG-positioned via JS, rendered as HTML overlay) ---------- */
.pin-tip{
  position:absolute; z-index:30; pointer-events:none;
  background:#2c2117; color:#fff5e0; font-size:.8rem; font-weight:600;
  padding:.35em .7em; border-radius:8px; transform:translate(-50%,-130%);
  opacity:0; transition:opacity .15s; white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.pin-tip.show{opacity:1;}
.pin-tip::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#2c2117;
}

/* SVG hotspot styling */
.hot{cursor:pointer;}
.hot__halo{transform-box:fill-box; transform-origin:center; animation:halo 2.4s ease-out infinite;}
@keyframes halo{0%{transform:scale(.6); opacity:.8;}100%{transform:scale(2.2); opacity:0;}}
.hot__pin{transition:transform .2s;}
.hot:hover .hot__pin{transform:translateY(-3px);}
.hot__num{font-family:var(--font-ui); font-weight:700; font-size:18px; fill:#fff; text-anchor:middle;}
.hot.is-active .hot__disc{fill:var(--sun);}

/* ---------- Info panel ---------- */
.panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px, 92vw); z-index:40;
  background:linear-gradient(180deg,#fffdf7,#f4ecdb);
  box-shadow:-18px 0 50px rgba(0,0,0,.4);
  padding:clamp(20px,3vw,34px); padding-top:64px;
  transform:translateX(105%); transition:transform .55s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
.panel.is-open{transform:translateX(0);}
.panel__close{
  position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  border:none; background:#ece2cd; font-size:1.5rem; cursor:pointer; color:var(--ink);
  transition:background .15s, transform .15s;
}
.panel__close:hover{background:#ddd0b3; transform:rotate(90deg);}
.panel__tag{
  display:inline-block; font-family:var(--font-hand); font-size:1.2rem; color:#fff;
  background:var(--accent); padding:1px 14px; border-radius:20px; transform:rotate(-2deg);
}
.panel__title{font-size:clamp(1.8rem,3vw,2.4rem); margin:.25em 0 .1em; line-height:1.05;}
.panel__lead{font-size:1.02rem; line-height:1.55; color:#4a3f30;}
.panel__craft{
  margin:18px 0; padding:12px 14px; border-radius:14px;
  background:repeating-linear-gradient(45deg,#fff6e2,#fff6e2 10px,#f7edd5 10px,#f7edd5 20px);
  border:2px dashed #d8c49a; font-size:.92rem;
}
.panel__craft-h{display:block; font-weight:700; color:var(--accent-deep); margin-bottom:2px;}
.panel__facts{list-style:none; padding:0; margin:0 0 22px;}
.panel__facts li{
  position:relative; padding:9px 0 9px 30px; border-bottom:1px dashed #e3d8bf; line-height:1.4; font-size:.95rem;
}
.panel__facts li::before{content:"💧"; position:absolute; left:0; top:8px;}
.panel__nav{display:flex; gap:10px; justify-content:space-between; position:sticky; bottom:0;
  background:linear-gradient(transparent, #f4ecdb 30%); padding-top:12px;}

/* ---------- About modal ---------- */
.modal{
  position:fixed; inset:0; z-index:55; display:grid; place-items:center;
  background:rgba(10,16,22,.62); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.modal.is-open{opacity:1; visibility:visible;}
.modal__card{
  position:relative; width:min(560px,92vw); max-height:88vh; overflow:auto;
  background:var(--card); border-radius:22px; padding:clamp(24px,4vw,40px);
  box-shadow:var(--shadow); transform:translateY(16px) scale(.97); transition:transform .4s;
}
.modal.is-open .modal__card{transform:none;}
.modal__card h2{margin-top:0; font-size:1.8rem;}
.modal__card p{line-height:1.6; color:#4a3f30;}
.modal__tip{background:#eef6fa; border-left:4px solid var(--accent); padding:10px 14px; border-radius:8px;}
.modal__close{
  position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%;
  border:none; background:#ece2cd; font-size:1.5rem; cursor:pointer; transition:transform .15s;
}
.modal__close:hover{transform:rotate(90deg);}

/* ---------- Day/Night driven by body[data-time] ---------- */
body[data-time="night"] .topbar__kicker,
body[data-time="night"] .legend__hint{background:rgba(8,12,28,.55);}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ---- Shared small-screen tweaks (any orientation) ---- */
@media (max-width:760px){
  .dock__lbl{display:none;}
  .dock__btn{padding:4px 7px;}
  .dock__slider input[type=range]{width:62px;}
  .chip{font-size:.78rem; padding:.4em .75em;}
  .hot__num{font-size:22px;}
}

/* ---- PHONE PORTRAIT: stack everything into a tidy column ---- */
@media (max-width:760px) and (orientation:portrait){
  .stage{
    display:flex; flex-direction:column; align-items:stretch;
    justify-content:center; gap:clamp(8px,2.4vh,22px);
    padding:0; height:100dvh; overflow:hidden;
    background:radial-gradient(120% 60% at 50% 38%, rgba(120,170,200,.16), transparent 70%);
  }

  .topbar{
    position:static; order:1; transform:none; left:auto; top:auto;
    width:100%; padding:0 14px; align-items:center;
  }
  .topbar__kicker{font-size:1rem;}
  .topbar h1{font-size:1.45rem; text-shadow:0 2px 0 rgba(0,0,0,.18);}

  .diorama{
    order:2; width:100vw; max-width:100vw; aspect-ratio:16/10;
    border-radius:0; box-shadow:0 16px 34px rgba(0,0,0,.5);
  }
  .diorama__shadow{display:none;}

  /* while the bottom-sheet is up, lift the scene to the top so the zoomed
     stage stays visible above the sheet, and tuck the controls away */
  body.panel-open .stage{justify-content:flex-start; padding-top:6px;}
  body.panel-open .legend,
  body.panel-open .dock{opacity:0; pointer-events:none; transition:opacity .3s;}

  .legend{
    position:static; order:3; transform:none; left:auto; bottom:auto;
    width:100%; padding:0; gap:7px;
  }
  .legend__hint{font-size:1.05rem;}
  .legend__chips{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding:4px 14px 8px; width:100%;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .legend__chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;}

  .dock{
    position:static; order:4; transform:none; left:auto; bottom:auto;
    width:max-content; max-width:96vw; margin:0 auto;
    margin-bottom:max(8px, env(safe-area-inset-bottom));
    border-radius:26px; gap:8px; padding:7px 12px; flex-wrap:nowrap;
    overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dock::-webkit-scrollbar{display:none;}
  .dock > *{flex:0 0 auto;}

  /* the info panel becomes a bottom sheet so the scene stays visible above it */
  .panel{
    top:auto; bottom:0; left:0; right:0; width:100%; height:auto;
    max-height:64dvh; border-radius:24px 24px 0 0; padding-top:30px;
    transform:translateY(105%);
    box-shadow:0 -16px 44px rgba(0,0,0,.45);
  }
  .panel.is-open{transform:translateY(0);}
  .panel::before{
    content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:46px; height:5px; border-radius:5px; background:#cdbf9e;
  }
  .panel__close{top:10px; right:12px; width:34px; height:34px;}
  .panel__nav{padding-bottom:max(6px, env(safe-area-inset-bottom));}
}

/* ---- PHONE LANDSCAPE (short height): tighten the floating chrome ---- */
@media (orientation:landscape) and (max-height:540px){
  .stage{padding:4px;}
  .topbar{top:6px;}
  .topbar__kicker{display:none;}
  .topbar h1{font-size:1.2rem;}
  .legend{bottom:54px; gap:3px; width:96vw;}
  .legend__hint{display:none;}
  .legend__chips{
    flex-wrap:nowrap; overflow-x:auto; max-width:96vw; padding:2px 6px 4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .legend__chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto; font-size:.72rem; padding:.34em .6em;}
  .dock{bottom:6px; padding:4px 8px; gap:5px; max-width:98vw; flex-wrap:nowrap;
        overflow-x:auto; scrollbar-width:none;}
  .dock::-webkit-scrollbar{display:none;}
  .dock > *{flex:0 0 auto;}
  .dock__lbl{display:none;}
  .dock__icon{font-size:1.15rem;}
  .dock__sep{height:24px;}
  .dock__slider input[type=range]{width:46px;}
  .panel{width:min(360px,82vw); padding-top:54px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}