/* Forest visual layer. Actual growth still comes exclusively from the existing model. */
:root { --green: #245340; --ink: #233c31; --paper:#f5f7ef; }
.hero { display:grid; grid-template-columns: .9fr 1.15fr; align-items:center; gap:44px; padding:30px 0 38px; min-height:520px; background:none; border:0; overflow:visible; }
.hero-copy { position:relative; z-index:1; padding:0; max-width:none; }
.hero h1 { font-size:clamp(42px,4.5vw,68px); line-height:1.13; letter-spacing:-.055em; font-weight:750; }
.hero h1 em { color:#2d6748; font-style:normal; }
.hero-description { color:#425d4d; font-size:18px; line-height:1.75; }
.hero .hero-art { position:relative; inset:auto; width:100%; height:auto; padding:0; margin:0; overflow:visible; }
.hero-art::before, .hero-art::after { display:none; }
#hero-forest { position:relative; inset:auto; width:100%; height:450px; overflow:hidden; border-radius:48% 48% 12px 12px; background:#cddfce; isolation:isolate; }
.forest-scene { width:100%; height:100%; object-fit:cover; display:block; }
#hero-forest .forest-scene { object-position:51% 50%; }
#hero-forest .hero-mascot { position:absolute; width:31%; max-height:54%; height:auto; object-fit:contain; left:14%; bottom:5%; filter:drop-shadow(0 9px 8px #203a3126); }
.hero .art-caption { position:static; color:#536357; margin:10px 0 0; padding:0; background:none; text-align:right; font-size:12px; }
.landscape-note { display:none; }
.forest-invitation { display:flex; align-items:center; gap:20px; background:#e9efdf; border:1px solid #d3dfc9; border-radius:16px; padding:18px 26px; margin:4px 0 44px; }
.forest-invitation img { width:64px; height:78px; object-fit:contain; flex:none; }
.forest-invitation-copy { flex:1; min-width:0; }
.forest-invitation p { margin:4px 0 0; color:#4d6652; font-size:14px; }
.forest-invitation strong { font-size:19px; font-weight:730; letter-spacing:-.025em; }
.forest-tour-trigger { min-height:44px; font-size:14px; white-space:normal; }
.return-home { grid-template-columns:minmax(0,1fr) minmax(250px,.9fr); gap:20px 40px; padding:26px 0; }
.return-art { grid-column:2; grid-row:1; position:relative; min-width:0; }
.return-art .return-tree { width:100%; height:280px; border-radius:18px; background:#e5ebdb; }
.return-art .return-mascot { position:absolute; bottom:4%; right:5%; width:19%; height:auto; max-height:120px; object-fit:contain; }
.return-art .return-tree svg { width:100%; height:100%; max-height:none; }
.return-home .weekly-goal { grid-column:1/-1; }
/* JS positions the explanation in the viewport, outside the recording button. */
.return-home .help-content { position:fixed; transform:none; text-align:left; max-height:240px; overflow:auto; }
.map-card-heading .forest-tour-trigger { margin-left:auto; color:#31573d; font-size:13px; padding:6px 0 6px 14px; text-align:right; }
.map-card-heading #map-level { margin-left:12px; }
.map-vegetation { pointer-events:none; }
.map-vegetation > g { transition:opacity .3s ease; }
/* Shared soil color is presentation only; hidden counts and stages stay protected. */
[data-tone="0"], [data-tone="hidden"] { --map-tone:#ead1a5; }
.region-area[data-tone="1"], .map-legend i[data-tone="1"] { --map-tone:#c8d9a5; }
.region-area[data-tone="2"], .map-legend i[data-tone="2"] { --map-tone:#9dc486; }
.region-area[data-tone="3"], .map-legend i[data-tone="3"] { --map-tone:#6ba579; }
.region-area[data-tone="4"], .map-legend i[data-tone="4"] { --map-tone:#38815d; }
.region-area.contribution-focus { animation:contribution-focus 1.4s ease-out; }
.map-label.contribution-focus { animation:contribution-label 1.4s ease-out; }
@keyframes contribution-focus { 0%,45% { stroke:#935b17; stroke-width:3; } 100% { stroke-width:.8; } }
@keyframes contribution-label { 0%,45% { box-shadow:0 0 0 7px #cb9b4850; } 100% { box-shadow:0 0 0 0 #cb9b4800; } }
#receipt-map { display:block; margin:10px 0; }
/* Tour uses its own map, clip IDs and state, never the live map's data. */
.forest-tour { width:min(1000px,calc(100% - 40px)); max-width:1000px; padding:26px; background:#fbfcf6; border:1px solid #d7dfce; border-radius:22px; }
.forest-tour .dialog-heading { margin:0 0 8px; align-items:flex-start; }
.forest-tour .dialog-heading h2 { margin:0; font-size:20px; }
.tour-example-label { margin:0 0 4px; color:#426332; font-size:12px; font-weight:750; letter-spacing:.02em; }
.tour-disclaimer { margin:0 0 16px; color:#516247; font-size:13px; line-height:1.6; }
.tour-body { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center; }
.tour-scene { position:relative; min-width:0; overflow:hidden; border-radius:16px; background:#e0edf0; }
.tour-place { position:absolute; z-index:1; left:14px; top:12px; margin:0; padding:7px 10px; border-radius:8px; background:#fbfcf6ed; font-size:12px; font-weight:700; }
#tour-map { height:340px; overflow:hidden; }
#tour-map svg { display:block; width:100%; height:100%; }
.tour-camera { transform-origin:0 0; transition:transform 850ms cubic-bezier(.22,1,.36,1); }
.tour-land { fill:#ead1a5; stroke:#fffdf3; stroke-width:1.4; transition:fill .6s ease; }
[data-tour-region] { transition:opacity .6s ease; }
[data-tour-region].tour-dimmed { opacity:.2; }
[data-tour-region][data-stage="1"] .tour-land { fill:#c8d9a5; }
[data-tour-region][data-stage="2"] .tour-land { fill:#9dc486; }
[data-tour-region][data-stage="3"] .tour-land { fill:#6ba579; }
[data-tour-region][data-stage="4"] .tour-land { fill:#38815d; }
.tour-islands { fill:#476257; font-size:12px; font-weight:700; }
.tour-plants { pointer-events:none; }
.tour-plants > g { animation:tour-sprout .65s ease-out both; }
@keyframes tour-sprout { from { opacity:0; } to { opacity:1; } }
#tour-landscape { height:128px; overflow:hidden; border-top:1px solid #abc4b2; }
#tour-landscape svg { width:100%; height:100%; object-fit:cover; }
.tour-stage-name { margin:0; padding:9px 14px; background:#edf1e3; color:#345439; font-size:12px; font-weight:700; text-align:center; }
.tour-story { min-width:0; }
.tour-companion { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.tour-companion img { width:68px; height:86px; object-fit:contain; }
.tour-companion span { color:#486141; font-size:13px; font-weight:650; }
.tour-story h3 { margin:0; font-size:30px; letter-spacing:-.045em; line-height:1.3; text-wrap:balance; }
.tour-story p { font-size:15px; color:#4d624e; line-height:1.8; }
.tour-actions { display:grid; grid-template-columns:1fr; gap:8px; margin:18px 0 0; }
.tour-actions button { min-height:44px; text-align:left; border:1px solid #b7c8a9; border-radius:9px; padding:10px 14px; background:#f0f5e8; font-weight:680; color:#315236; }
.tour-actions button:hover { background:#e2ecd5; }
.tour-footer { display:flex; align-items:center; gap:12px; justify-content:flex-end; margin:22px 0 0; }
.tour-progress { margin-right:auto; color:#52654c; font-size:13px; font-variant-numeric:tabular-nums; }
.tour-footer .button { min-height:44px; }
.tour-finish { display:flex; }
@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:24px; min-height:0; padding:16px 0 30px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(37px,8.5vw,54px); }
  .hero-description { font-size:16px; }
  #hero-forest { height:310px; border-radius:36% 36% 12px 12px; }
  .forest-invitation { gap:12px; padding:16px; flex-wrap:wrap; margin-bottom:32px; }
  .forest-invitation img { width:46px; height:58px; }
  .forest-invitation strong { font-size:17px; }
  .forest-invitation .forest-tour-trigger { width:100%; text-align:left; border-top:1px solid #cad9bd; padding-top:10px; }
  .return-home { grid-template-columns:minmax(0,1fr) minmax(110px,.8fr); gap:16px; }
  .return-art .return-tree { height:180px; }
  .return-art .return-mascot { width:25%; }
  .map-card-heading { flex-wrap:wrap; gap:0; }
  .map-card-heading .forest-tour-trigger { max-width:170px; font-size:12px; }
  .map-card-heading #map-level { display:none; }
  .forest-tour { width:calc(100% - 20px); padding:16px; border-radius:16px; max-height:calc(100dvh - 24px); }
  .tour-body { grid-template-columns:1fr; gap:14px; }
  #tour-map { height:230px; }
  #tour-landscape { height:68px; }
  .tour-companion { float:right; margin:0 0 6px 10px; }
  .tour-companion img { width:42px; height:54px; }
  .tour-companion span { display:none; }
  .tour-story h3 { font-size:23px; }
  .tour-story p { font-size:14px; margin:8px 0 0; }
  .tour-actions { gap:6px; margin-top:12px; }
  .tour-footer { margin-top:16px; gap:10px; flex-wrap:wrap; }
  .tour-footer .button { font-size:14px; padding:10px 14px; }
  .tour-disclaimer { font-size:12px; margin-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .tour-camera, .tour-land, [data-tour-region], .map-vegetation > g { transition:none; }
  .tour-plants > g, .region-area.contribution-focus, .map-label.contribution-focus { animation:none; }
}