/* ============================================================
 * 24 Solar Tales v2 — style.css
 * Premium Morandi healing theme, glassmorphism, mobile-first.
 * Seasonal palette is injected at runtime via CSS custom properties
 * set on .app (see app.js -> rootStyle). Defaults below keep the
 * app presentable before JS runs. All transitions 600–900ms ease.
 * ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sky-top:#cfe3d4; --sky-bottom:#eef3ea;
  --ink:#4a5a4e; --plant:#a7c4a0; --accent:#bcd0a8;
  --soft:#d6e6d2; --light:#e6f0e2;
  --card:rgba(255,255,255,.55); --card-strong:rgba(255,255,255,.72);
  --card-border:rgba(120,120,110,.18);
  --shadow:0 10px 30px rgba(90,90,80,.14);
  --shadow-soft:0 6px 18px rgba(90,90,80,.10);
  --font: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
}

html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* App shell — centered phone column, seasonal gradient follows the term. */
.app{
  position:relative;
  height:100vh;height:100dvh;
  max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 60%,var(--soft) 100%);
  transition:background .8s ease;
  overflow:hidden;
}

/* ── Reusable glass card ───────────────────────── */
.glass{
  background:var(--card);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-soft);
  border-radius:22px;
}

/* ── Top bar: brand + language toggle ───────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 0;flex-shrink:0;
}
.brand{
  font-weight:700;font-size:.92rem;letter-spacing:.4px;color:var(--ink);
  opacity:.92;
}
.lang-toggle{
  padding:5px 13px;border-radius:20px;
  border:1px solid var(--card-border);background:rgba(255,255,255,.7);
  color:var(--accent);font-size:.74rem;font-weight:700;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:all .2s;user-select:none;letter-spacing:.4px;font-family:var(--font);
}
.lang-toggle:hover{border-color:var(--accent);box-shadow:var(--shadow-soft)}
.lang-toggle .sep{color:var(--ink);opacity:.45;margin:0 4px}
.lang-toggle .active{color:var(--ink);font-weight:800}
.lang-toggle .inactive{color:var(--ink);opacity:.55}

/* ── Persistent context strip ───────────────────────── */
.context-strip{
  text-align:center;padding:10px 22px 12px;flex-shrink:0;
  transition:color .8s ease;
}
.ctx-line{font-size:.82rem;font-weight:600;letter-spacing:.3px;color:var(--ink)}
.ctx-today{text-transform:uppercase;opacity:.65;font-size:.72rem;letter-spacing:1.5px}
.ctx-season{text-transform:uppercase;opacity:.78;font-size:.72rem;letter-spacing:1.5px}
.ctx-term{font-weight:800}
.ctx-dot{opacity:.5;margin:0 5px}
.ctx-concept{font-size:.78rem;line-height:1.5;opacity:.82;margin:6px auto 0;max-width:340px;font-weight:600;color:var(--ink)}

/* ── Pages container ───────────────────────── */
.pages{position:relative;flex:1;overflow:hidden}
.page{
  position:absolute;inset:0;overflow-y:auto;
  padding:8px 18px 96px;scrollbar-width:none;
  animation:fadeIn .5s ease both;
}
.page::-webkit-scrollbar{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── TODAY: planet block ───────────────────────── */
.planet-block{display:flex;flex-direction:column;align-items:center;text-align:center}
.planet-title{font-size:1.06rem;font-weight:800;margin-top:4px}
.planet-sub{font-size:.76rem;opacity:.82;margin-top:3px;font-weight:600;color:var(--ink)}

.planet-stage{
  position:relative;width:min(74vw,290px);aspect-ratio:1/1;margin:14px auto 4px;
}
.planet{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 50px rgba(80,80,70,.22), inset 0 0 40px rgba(255,255,255,.35);
  animation:planetBreathe 12s ease-in-out infinite;
}
.planet svg{display:block;width:100%;height:100%}
@keyframes planetBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.weather-layer{position:absolute;inset:-12% -8%;pointer-events:none;overflow:hidden;opacity:.62}
.particle{position:absolute;top:-12%;display:block;will-change:transform,opacity}

/* weather particles (low density + calm) */
.p-rain{width:1.6px;height:16px;border-radius:1px;
  background:linear-gradient(180deg,rgba(150,180,200,0),rgba(150,180,200,.6));animation:fall linear infinite;}
@keyframes fall{0%{transform:translateY(-20px);opacity:0}10%{opacity:.85}100%{transform:translateY(360px);opacity:.18}}
.p-snow{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 6px rgba(255,255,255,.55);animation:snowfall linear infinite;}
@keyframes snowfall{0%{transform:translateY(-20px) translateX(0);opacity:0}12%{opacity:.95}100%{transform:translateY(380px) translateX(26px);opacity:.28}}
.p-petal{width:9px;height:9px;border-radius:60% 0 60% 0;background:var(--plant);
  opacity:.8;animation:petaldrift ease-in-out infinite;}
@keyframes petaldrift{0%{transform:translateY(-20px) translateX(0) rotate(0);opacity:0}15%{opacity:.85}100%{transform:translateY(380px) translateX(-30px) rotate(220deg);opacity:.22}}
.p-dew{width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.85);animation:twinkle ease-in-out infinite;}
@keyframes twinkle{0%,100%{transform:scale(.5);opacity:.12}50%{transform:scale(1.2);opacity:.9}}
.p-fog{width:60%;height:34px;border-radius:50%;background:rgba(255,255,255,.38);
  filter:blur(8px);top:auto;bottom:8%;animation:fogdrift linear infinite;}
@keyframes fogdrift{0%{transform:translateX(-30%);opacity:0}40%{opacity:.65}100%{transform:translateX(40%);opacity:0}}
.p-frost{width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.75);animation:frostfade ease-in-out infinite;}
@keyframes frostfade{0%,100%{transform:scale(.4) rotate(0);opacity:.1}50%{transform:scale(1) rotate(180deg);opacity:.8}}
.p-sun{width:6px;height:6px;border-radius:50%;background:rgba(255,240,200,.92);
  box-shadow:0 0 12px rgba(255,230,170,.85);animation:sunfloat ease-in-out infinite;}
@keyframes sunfloat{0%{transform:translateY(0) scale(.6);opacity:.18}50%{transform:translateY(-18px) scale(1.1);opacity:.92}100%{transform:translateY(0) scale(.6);opacity:.18}}
.p-cloud{width:46px;height:22px;border-radius:50%;background:rgba(255,255,255,.66);
  filter:blur(2px);animation:clouddrift linear infinite;}
@keyframes clouddrift{0%{transform:translateX(-60px);opacity:0}30%{opacity:.8}100%{transform:translateX(120px);opacity:0}}

/* Annual progress ring over the planet */
.year-ring{position:absolute;right:-6px;bottom:-6px;width:84px;height:84px}
.year-ring svg{width:100%;height:100%;transform:rotate(0)}
.ring-bg{fill:none;stroke:rgba(120,120,110,.16);stroke-width:9}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset .8s ease;}
.year-ring .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.ring-label b{font-size:.82rem;font-weight:800;color:var(--ink)}
.ring-label span{font-size:.52rem;text-transform:uppercase;letter-spacing:1px;opacity:.55;margin-top:1px}

.btn-ghost{
  margin-top:14px;padding:12px 24px;border:1.5px solid var(--accent);
  border-radius:26px;background:var(--card-strong);color:var(--ink);opacity:.92;
  font-weight:700;font-size:.82rem;cursor:pointer;font-family:var(--font);
  transition:all .2s;min-height:46px;
}
.btn-ghost:hover{opacity:1;box-shadow:var(--shadow-soft);border-color:var(--plant)}

/* ── Daily CTA card ───────────────────────── */
.cta-card{
  margin:18px auto 0;max-width:380px;padding:22px 20px 24px;text-align:center;
  animation:fadeIn .6s ease both;
}
.cta-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;opacity:.7;font-weight:700}
.cta-text{font-size:1.32rem;font-weight:800;margin-top:12px;line-height:1.3}
.cta-text-zh{font-size:.92rem;opacity:.82;margin-top:5px;font-weight:600;color:var(--ink)}
.btn-primary{
  margin-top:18px;padding:13px 30px;border:none;border-radius:26px;width:100%;
  background:linear-gradient(135deg,var(--accent),var(--plant));color:#fff;
  font-weight:800;font-size:.98rem;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s,filter .2s;letter-spacing:.3px;font-family:var(--font);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-primary:disabled{cursor:default;opacity:.85;filter:none;transform:none}
.btn-cta.is-done{background:linear-gradient(135deg,#a9c9a3,#bcd0a8)}
.cta-busy{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.9rem;opacity:.8}
.breath-dot{width:13px;height:13px;border-radius:50%;background:var(--plant);
  box-shadow:0 0 0 0 rgba(167,196,160,.5);animation:breathPulse 1.4s ease-in-out infinite}
@keyframes breathPulse{0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(167,196,160,.5)}70%{transform:scale(1);box-shadow:0 0 0 12px rgba(167,196,160,0)}100%{transform:scale(.7);box-shadow:0 0 0 0 rgba(167,196,160,0)}}

/* ── WONDERS tab ───────────────────────── */
.sec-head{text-align:center;margin:6px 0 14px}
.sec-head h2{font-size:1.2rem;font-weight:800}
.sec-head p{font-size:.78rem;opacity:.8;margin-top:4px;font-weight:600;max-width:320px;margin-left:auto;margin-right:auto;color:var(--ink)}

.collection-progress{padding:14px 16px;margin-bottom:16px}
.cp-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600}
.cp-row b{font-size:1.04rem}
.cp-bar{height:6px;border-radius:3px;background:rgba(120,120,110,.18);overflow:hidden;margin-top:8px}
.cp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--plant));transition:width .6s ease}
.guardian-badge{margin-top:11px;text-align:center;font-weight:700;color:var(--ink);
  background:var(--card-strong);border:1px solid var(--card-border);border-radius:14px;padding:8px;font-size:.86rem}

.term-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.term-card{
  position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:12px 8px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.term-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.term-card.locked{opacity:.6;filter:grayscale(.35)}
.tc-emoji{font-size:1.7rem;line-height:1}
.tc-name{font-size:.74rem;font-weight:700;margin-top:5px}
.tc-sub{font-size:.62rem;opacity:.72;margin-top:2px;min-height:1.1em;font-weight:600;color:var(--ink)}
.tc-star{position:absolute;top:6px;right:8px;color:#e0a85c;font-size:.72rem}

/* Wonders detail (bottom sheet) */
.detail-overlay{position:fixed;inset:0;z-index:80;background:rgba(40,40,36,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center}
.detail-card{position:relative;background:linear-gradient(180deg,#fff,var(--soft));
  border-radius:22px 22px 0 0;width:100%;max-width:480px;max-height:86vh;overflow-y:auto;
  padding:22px 20px 28px;scrollbar-width:none;animation:slideUp .3s ease}
.detail-card::-webkit-scrollbar{display:none}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.detail-close{position:absolute;top:14px;right:16px;border:none;background:rgba(120,120,110,.12);
  width:30px;height:30px;border-radius:50%;font-size:1rem;color:var(--ink);cursor:pointer}
.detail-card h2{font-size:1.3rem;font-weight:800}
.detail-summary{font-size:.84rem;opacity:.82;line-height:1.55;margin:6px 0 16px;font-weight:500;color:var(--ink)}
.phenomena{display:flex;flex-direction:column;gap:12px}
.pheno-card{display:flex;gap:14px;align-items:center;background:var(--card);
  border:1px solid var(--card-border);border-radius:16px;padding:14px}
.pheno-card.locked{opacity:.75}
.pheno-emoji{font-size:2rem;flex-shrink:0;width:54px;text-align:center}
.pheno-kind{font-size:.66rem;letter-spacing:1px;text-transform:uppercase;opacity:.62;font-weight:700}
.pheno-name{font-size:1rem;font-weight:700;margin:1px 0 3px}
.pheno-desc{font-size:.78rem;line-height:1.5;opacity:.85;font-weight:500;color:var(--ink)}
.detail-locked-note{text-align:center;font-size:.78rem;opacity:.6;margin-top:14px}

/* ── YEAR tab ───────────────────────── */
.page-year{display:flex;flex-direction:column;gap:14px}
.year-hero{display:flex;align-items:center;gap:18px;padding:18px}
.year-ring-lg{position:relative;width:108px;height:108px;flex-shrink:0}
.year-ring-lg svg{width:100%;height:100%}
.year-ring-lg .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.year-ring-lg .ring-label b{font-size:1.15rem;font-weight:800;color:var(--ink)}
.year-ring-lg .ring-label span{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;opacity:.55;margin-top:1px}
.year-stats{display:flex;flex-direction:column;gap:10px;flex:1}
.ystat{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--card-border);padding-bottom:7px}
.ystat:last-child{border-bottom:none;padding-bottom:0}
.ystat b{font-size:1.1rem;font-weight:800;color:var(--ink)}
.ystat span{font-size:.74rem;opacity:.72;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.ystat-solar{justify-content:space-between;align-items:flex-start}
.ystat-meta{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ystat-label{font-size:.74rem;opacity:.72;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--ink)}
.ystat-hint{display:block;font-size:.66rem;line-height:1.35;opacity:.82;font-weight:600;
  text-transform:none;letter-spacing:0;margin-top:2px;color:var(--ink)}

.guardian-card{display:flex;align-items:center;gap:14px;padding:16px}
.guardian-medal{font-size:2.1rem;flex-shrink:0;width:54px;text-align:center;
  filter:grayscale(.6);opacity:.6;transition:all .4s}
.guardian-card.earned .guardian-medal{filter:none;opacity:1;
  animation:medalPop .6s ease}
.guardian-card.earned{background:linear-gradient(135deg,rgba(255,255,255,.8),var(--light))}
@keyframes medalPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.guardian-body h3{font-size:1rem;font-weight:800}
.guardian-body p{font-size:.78rem;opacity:.82;line-height:1.45;margin-top:3px;font-weight:600;color:var(--ink)}

.about-link{text-align:center;font-size:.8rem;font-weight:700;color:var(--ink);opacity:.8;
  background:none;border:none;cursor:pointer;font-family:var(--font);padding:6px}
.about-link:hover{opacity:1;text-decoration:underline}
.coming-soon{text-align:center;font-size:.76rem;opacity:.5;
  border:1px dashed var(--card-border);border-radius:12px;padding:10px}

/* ── Reward overlay ───────────────────────── */
.reward-overlay{position:fixed;inset:0;z-index:85;background:rgba(40,40,36,.4);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease both}
.reward-card{width:min(84vw,340px);padding:26px 22px;text-align:center;
  animation:rewardPop .4s ease both}
@keyframes rewardPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.reward-emoji-row{display:flex;justify-content:center;gap:14px;font-size:2.2rem;margin-bottom:10px}
.reward-card h3{font-size:1.1rem;font-weight:800}
.reward-sub{font-size:.82rem;opacity:.8;margin:8px 0 4px;font-weight:600;color:var(--ink)}
.streak-badge{
  display:inline-block;margin:6px 0 4px;padding:6px 14px;border-radius:16px;
  font-size:.84rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#e0a39a,#e0b079);
  box-shadow:0 6px 16px rgba(224,163,154,.4);animation:streakPop .6s ease both;
}
@keyframes streakPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ── Onboarding overlay ───────────────────────── */
.onboard-overlay{position:fixed;inset:0;z-index:95;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .35s ease both}
.onboard-card{position:relative;width:min(90vw,360px);text-align:center;
  background:var(--card-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--card-border);border-radius:26px;box-shadow:var(--shadow);
  padding:34px 26px 28px}
.onboard-skip{position:absolute;top:14px;right:16px;border:none;background:transparent;
  color:var(--ink);opacity:.6;font-size:.8rem;font-weight:700;cursor:pointer;font-family:var(--font)}
.onboard-skip:hover{opacity:.9}
.ob-art{display:flex;justify-content:center;margin-bottom:18px;animation:fadeIn .5s ease both}
.ob-art svg{display:block}
.ob-title{font-size:1.28rem;font-weight:800;line-height:1.25;padding:0 6px}
.ob-sub{font-size:.86rem;opacity:.82;line-height:1.5;margin:12px auto 0;max-width:300px;font-weight:600;color:var(--ink)}
.ob-dots{display:flex;justify-content:center;gap:8px;margin:20px 0 18px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(120,120,110,.3);transition:all .3s}
.ob-dot.on{background:var(--accent);width:22px;border-radius:5px}
.ob-btn{margin-top:4px}

/* ── Bottom tab bar ───────────────────────── */
.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.66);border-top:1px solid var(--card-border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:none;background:transparent;color:var(--ink);opacity:.55;
  font-size:.7rem;font-weight:700;cursor:pointer;padding:6px 0;border-radius:14px;
  transition:all .2s;font-family:var(--font)}
.tab .tab-ico{font-size:1.15rem;line-height:1}
.tab span{font-size:.66rem}
.tab.active{opacity:1;color:var(--ink);background:var(--card);box-shadow:var(--shadow-soft)}

/* ── Reduced motion: keep it calm & accessible ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .planet{animation:none}
  .particle{display:none}
  .page,.cta-card,.onboard-card,.reward-card,.detail-card,.ob-art{animation:none}
}

/* ── Help / hint text (P1 accessibility — must stay legible) ───────── */
.wonders-hint{
  text-align:center;font-size:.76rem;line-height:1.5;opacity:.82;
  margin:-6px auto 14px;color:var(--ink);font-weight:600;max-width:340px;
}
.cta-done-hint{
  text-align:center;font-size:.78rem;line-height:1.5;opacity:.82;
  margin-top:12px;color:var(--ink);font-weight:600;max-width:320px;
  margin-left:auto;margin-right:auto;
}

/* ── Accessibility: visible keyboard focus ring ────────────────────── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.btn-primary:focus-visible,
.btn-cta:focus-visible,
.btn-ghost:focus-visible,
.tab:focus-visible,
.lang-toggle:focus-visible,
.term-card:focus-visible,
.detail-close:focus-visible,
.onboard-skip:focus-visible,
.about-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ── Export feedback toast (pure frontend, no external resources) ──── */
.st-toast{
  position:fixed;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  background:rgba(40,40,36,.92);color:#fff;font-size:.82rem;font-weight:600;
  padding:11px 22px;border-radius:22px;box-shadow:var(--shadow);
  z-index:120;opacity:0;transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;font-family:var(--font);max-width:84vw;text-align:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.st-toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
 * v3 — Garden main view, side rail, compendium & challenges
 * ============================================================ */

/* ── Body: side rail + pages ───────────────────────── */
.body{display:flex;flex:1;min-height:0;overflow:hidden}
.siderail{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 6px;flex-shrink:0;width:62px;
  background:rgba(255,255,255,.30);
  border-right:1px solid var(--card-border);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.rail-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:transparent;color:var(--ink);opacity:.55;
  font-size:.6rem;font-weight:700;cursor:pointer;padding:10px 2px;border-radius:14px;
  transition:all .2s;font-family:var(--font);
}
.rail-btn .rail-ico{font-size:1.25rem;line-height:1}
.rail-btn.active{opacity:1;background:var(--card);box-shadow:var(--shadow-soft)}
.rail-btn:hover{opacity:.9}

/* pages keep their own scroll; drop the old bottom-tab spacing */
.page-garden,.page-compendium,.page-challenges{padding-bottom:26px}

/* ── GARDEN ───────────────────────── */
.garden-stage{
  position:relative;width:100%;aspect-ratio:4/3;margin:6px auto 0;
  border-radius:22px;overflow:hidden;
}
.garden-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.garden-overlay-top{
  position:absolute;top:10px;left:10px;right:10px;display:flex;
  justify-content:space-between;align-items:flex-start;pointer-events:none;
}
.weather-chip{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.62);
  border:1px solid var(--card-border);border-radius:16px;padding:5px 10px;
  font-size:.74rem;font-weight:700;color:var(--ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wc-type{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;opacity:.55;font-weight:700}
.diversity-chip{
  background:rgba(255,255,255,.62);border:1px solid var(--card-border);
  border-radius:16px;padding:5px 10px;font-size:.74rem;font-weight:800;color:var(--ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.garden-legend{
  position:absolute;bottom:8px;left:10px;right:10px;display:flex;gap:8px;
  justify-content:center;flex-wrap:wrap;pointer-events:none;
}
.lg{font-size:.58rem;font-weight:700;opacity:.7;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.5)}
.lg-common{color:#6f6f64}
.lg-rare{color:#5b8fb0}
.lg-precious{color:#b07d2e}
.lg-legendary{color:#b9962e}

.garden-actions{display:flex;gap:10px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.garden-actions .btn-ghost{margin-top:0}

/* ── Daily micro-interaction ───────────────────────── */
.micro-card{margin:16px auto 0;max-width:420px;padding:18px 18px 20px;text-align:center}
.micro-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;opacity:.7;font-weight:700}
.micro-task{font-size:1.02rem;font-weight:700;margin-top:10px;line-height:1.35;color:var(--ink)}
.micro-already{margin-top:10px;font-size:.78rem;opacity:.7;font-weight:600}
.micro-arena{
  position:relative;height:120px;margin:14px 0 6px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.12));
  border:1px solid var(--card-border);
}
.micro-particle{
  position:absolute;top:-8%;font-size:1.5rem;cursor:pointer;user-select:none;
  animation-name:microFall;animation-timing-function:linear;animation-fill-mode:forwards;
  filter:drop-shadow(0 2px 4px rgba(90,90,80,.25));
}
@keyframes microFall{
  0%{transform:translateY(-10%) scale(.8);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(460%) scale(1.05);opacity:.2}
}
.micro-stats{display:flex;justify-content:space-between;font-weight:800;font-size:.92rem;color:var(--ink);padding:0 4px}
.micro-time{color:var(--accent)}
.micro-done{font-size:1.2rem;font-weight:800;margin-top:8px}
.micro-done-hint{font-size:.78rem;opacity:.78;margin-top:8px;font-weight:600;line-height:1.5}

/* ── COMPENDIUM (horizontal scroll) ───────────────────────── */
.collection-progress{padding:14px 16px;margin-bottom:14px}
.cp-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600}
.cp-row b{font-size:1.04rem}
.cp-row-2{margin-top:6px;font-size:.7rem;opacity:.7}
.scroll-rail{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.scroll-rail::-webkit-scrollbar{height:6px}
.scroll-rail::-webkit-scrollbar-thumb{background:rgba(120,120,110,.3);border-radius:3px}
.scroll-term{
  flex:0 0 auto;width:104px;scroll-snap-align:start;
  background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  padding:12px 10px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.scroll-term:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.scroll-term.locked{opacity:.6;filter:grayscale(.35)}
.scroll-term.season-spring{border-top:3px solid #a7c4a0}
.scroll-term.season-summer{border-top:3px solid #e0a39a}
.scroll-term.season-autumn{border-top:3px solid #d6a55c}
.scroll-term.season-winter{border-top:3px solid #aebcc1}
.st-name{font-size:.74rem;font-weight:800;line-height:1.15}
.st-name-sub{font-size:.58rem;opacity:.6;margin-top:1px;font-weight:600}
.st-species{display:flex;justify-content:center;gap:6px;margin-top:9px}
.st-sp{
  width:16px;height:16px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(120,120,110,.25);background:rgba(255,255,255,.4);
  transition:transform .15s;
}
.st-sp:hover{transform:scale(1.15)}
.st-sp.r-rare{border-color:#9ec6da}
.st-sp.r-precious{border-color:#e0b079}
.st-sp.r-legendary{border-color:#e6c66b;box-shadow:0 0 8px rgba(230,198,107,.6)}
.st-sp.lv-none{opacity:.4}
.st-sp.lv-discover{background:rgba(167,196,160,.5)}
.st-sp.lv-learn{background:rgba(158,198,218,.7)}
.st-sp.lv-master{background:linear-gradient(135deg,#e0b079,#e6c66b)}
.scroll-hint{text-align:center;font-size:.74rem;opacity:.7;margin-top:6px;font-weight:600}

/* ── CHALLENGES ───────────────────────── */
.challenge-list{display:flex;flex-direction:column;gap:14px}
.challenge-card{padding:16px 16px 18px;animation:fadeIn .5s ease both}
.challenge-card.done{box-shadow:0 0 0 2px var(--accent) inset}
.ch-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ch-type{
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  padding:3px 9px;border-radius:10px;color:#fff;
}
.ct-observe{background:#9ec6da}
.ct-quiz{background:#a7c4a0}
.ct-interact{background:#d6a55c}
.ct-create{background:#e0a39a}
.ct-act{background:#b7c7cd}
.ch-index{font-size:.66rem;opacity:.6;font-weight:700}
.ch-done-badge{margin-left:auto;color:#e0a85c;font-size:1rem}
.ch-title{font-size:1rem;font-weight:800;line-height:1.25;margin-top:2px}
.ch-prompt{font-size:.8rem;line-height:1.5;opacity:.85;margin-top:4px;font-weight:500;color:var(--ink)}
.ch-body{margin-top:12px}
.ch-hint{font-size:.76rem;opacity:.78;margin-bottom:10px;font-weight:600}

.ch-file-label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--card-strong);border:1px solid var(--card-border);border-radius:14px;
  padding:9px 13px;font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:10px;
}
.ch-file{display:none}
.ch-feedback{
  margin-top:10px;font-size:.8rem;line-height:1.5;font-weight:600;color:var(--ink);
  background:rgba(167,196,160,.25);border-radius:12px;padding:9px 12px;
}

.quiz-opts{display:flex;flex-direction:column;gap:8px}
.quiz-opt{
  text-align:left;border:1px solid var(--card-border);background:var(--card);
  border-radius:14px;padding:11px 14px;font-size:.84rem;font-weight:600;color:var(--ink);
  cursor:pointer;font-family:var(--font);transition:all .15s;
}
.quiz-opt:hover{box-shadow:var(--shadow-soft)}
.quiz-opt.picked{font-weight:800}
.quiz-opt.correct{border-color:#a7c4a0;background:rgba(167,196,160,.4)}
.quiz-opt.wrong{border-color:#e0a39a;background:rgba(224,163,154,.32)}

.drag-slots{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.drag-slot{
  width:54px;height:54px;border-radius:14px;border:2px dashed rgba(120,120,110,.4);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;
  background:rgba(255,255,255,.35);transition:all .15s;
}
.drag-slot.filled{border-style:solid;border-color:var(--accent);background:rgba(167,196,160,.3)}
.drag-tokens{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.drag-token{
  width:50px;height:50px;border-radius:14px;border:1px solid var(--card-border);
  background:var(--card-strong);font-size:1.5rem;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .15s;
}
.drag-token:hover{transform:translateY(-2px)}
.drag-token.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(167,196,160,.5)}
.drag-token.used{opacity:.3;pointer-events:none}

.draw-tools{display:flex;gap:10px;margin-bottom:10px}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.8);cursor:pointer;transition:transform .15s}
.swatch.sel{border-color:var(--ink);transform:scale(1.12)}
.draw-canvas{
  width:100%;height:160px;border-radius:14px;border:1px solid var(--card-border);
  background:rgba(255,255,255,.5);touch-action:none;display:block;cursor:crosshair;
}
.act-check{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:12px}
.act-check input{width:18px;height:18px;accent-color:var(--accent)}

/* ── Compendium species detail extras ───────────────────────── */
.sp-rarity{
  display:inline-block;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  padding:3px 10px;border-radius:10px;margin-bottom:6px;color:#fff;
}
.sp-rarity.r-common{background:#9a9a8c}
.sp-rarity.r-rare{background:#9ec6da}
.sp-rarity.r-precious{background:#e0b079}
.sp-rarity.r-legendary{background:#e6c66b}
.sp-section{margin-top:14px}
.sp-section-title{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;opacity:.6;font-weight:800;margin-bottom:7px}
.sp-stages{display:flex;flex-wrap:wrap;gap:6px}
.sp-stage{font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:11px;background:rgba(255,255,255,.45);border:1px solid var(--card-border);opacity:.5}
.sp-stage.reached{opacity:1;background:rgba(167,196,160,.4);border-color:var(--accent)}
.sp-mastery{font-size:.82rem;line-height:1.5;opacity:.85;font-weight:500;color:var(--ink)}
.sp-status{display:flex;align-items:center;gap:10px;margin-top:14px}
.sp-status-pill{font-size:.74rem;font-weight:800;padding:4px 11px;border-radius:11px;background:rgba(255,255,255,.5);border:1px solid var(--card-border)}
.sp-status-pill.lv-none{opacity:.6}
.sp-status-pill.lv-discover{background:rgba(167,196,160,.4)}
.sp-status-pill.lv-learn{background:rgba(158,198,218,.5)}
.sp-status-pill.lv-master{background:linear-gradient(135deg,#e0b079,#e6c66b);color:#fff;border:none}
.sp-level{font-size:.76rem;font-weight:700;opacity:.8}
.sp-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.sp-level-inline{font-size:.8rem;font-weight:700;opacity:.8}
.btn-ghost.is-mastered{background:linear-gradient(135deg,#e0b079,#e6c66b);color:#fff;border:none}

/* ── Accessibility: focus ring for new controls ───────── */
.rail-btn:focus-visible,
.challenge-card:focus-visible,
.quiz-opt:focus-visible,
.drag-token:focus-visible,
.swatch:focus-visible,
.act-check:focus-visible,
.st-sp:focus-visible,
.scroll-term:focus-visible,
.ch-file-label:focus-visible,
.micro-particle:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* ── Reduced motion: keep it calm & accessible ───────── */
@media (prefers-reduced-motion: reduce){
  .micro-particle{display:none}
  .garden-canvas{animation:none}
  .challenge-card,.draggable,.drag-token,.swatch{transition:none}
  .page-garden,.page-compendium,.page-challenges{animation:none}
}

/* ===================== Phase-2: settings gear + settings overlay ===================== */
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.gear-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--card-border);
  background:rgba(255,255,255,.7);color:var(--ink);font-size:1rem;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.gear-btn:hover{ border-color:var(--accent); box-shadow:var(--shadow-soft); transform:rotate(25deg); }

.settings-overlay,.postcard-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(40,40,36,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .24s ease;
}
.settings-card,.postcard-card{
  position:relative;width:min(420px,92vw);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#fff,var(--soft));border-radius:24px;
  padding:26px 22px;box-shadow:var(--shadow-soft);
}
.settings-card h2,.postcard-card h2{ font-size:1.25rem;font-weight:800;margin-bottom:14px;color:var(--ink); }
.settings-row{ display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(120,120,110,.14); }
.settings-row:first-of-type{ border-top:none; }
.sr-label{ font-size:.9rem;font-weight:700;color:var(--ink);opacity:.85; }
.sr-actions{ display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
.import-btn{ display:inline-flex;align-items:center;cursor:pointer; }
.settings-about{ margin-top:16px;font-size:.8rem;line-height:1.55;opacity:.7;color:var(--ink); }

/* ===================== Phase-2: postcard / share ===================== */
.postcard-preview{
  width:100%;min-height:120px;display:flex;align-items:center;justify-content:center;
  margin:6px 0 14px;background:rgba(255,255,255,.5);border-radius:18px;padding:10px;
}
.postcard-preview canvas{ max-width:100%;height:auto;border-radius:18px;box-shadow:0 10px 30px rgba(90,90,80,.16); }
.share-size-row{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px; }

/* ===================== Phase-2: term page link ===================== */
.term-link{
  display:inline-block;margin-top:12px;text-align:center;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:.9rem;opacity:.85;
  border-bottom:1.5px solid var(--accent);padding-bottom:2px;
}
.term-link:hover{ opacity:1; }

/* small button variant (used in settings + share rows) */
.btn-sm{ padding:7px 12px;font-size:.78rem;border-radius:16px; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }