/* assets/css/panel-scene.css — v4
 * Palette-driven scene panel. Every element fills via CSS custom properties
 * (--sky-top, --grass-near, --cloud-fill, etc). Phase + weather classes on
 * .panel-scene override the palette; individual artwork pieces never carry
 * per-phase rules. So a new phase or weather variant = a palette block, not
 * a search-and-replace.
 */

/* ════════════════════════════════════════════════════════════════════════
   1.  HEIGHT + LAYOUT (unchanged from v3)
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene{
  position:relative;
  height:var(--scene-h, 35svh);
  min-height:240px;overflow:visible;
  display:flex;flex-direction:column;justify-content:flex-end;flex-shrink:0;
  transition: height .22s cubic-bezier(.4,.0,.2,1);

  /* Default palette = DAY. Phase rules below override; weather rules tweak
     individual vars on top of the phase base. */
  --sky-top:        #6db5d8;
  --sky-mid:        #9cc3cf;
  --sky-bot:        #d8e3cd;
  --haze-color:     rgba(220,235,200,.20);
  --sun-fill:       #f8d860;
  --sun-glow:       rgba(248,216,96,.45);
  --moon-fill:      #ece6d5;
  --moon-shadow:    #3a4360;
  --cloud-fill:     #ffffff;
  --cloud-edge:     #c2cdd9;
  --hills-fill:     #b8d4cc;
  --silhouette:     #5e8d7a;
  --grass-near:     #7fa86a;
  --grass-far:      #466e4d;
  --ground-fill:    #d6cfb8;
  --ground-line:    #2f281f;
  --star-color:     #f4efe2;
  --ink:            #2a241c;
  --ink-soft:       #6a5f51;
  --rain-color:     rgba(120,140,168,.40);
  --rain-color-night: rgba(160,175,200,.28);
}
body.kb-up .panel-scene{
  height: calc(var(--scene-h, 35svh) * 0.8);
  min-height: 180px;
  /* Animate the shrink so the scene glides up WITH the keyboard instead of
     snapping. Safe because the kb-up class flips exactly once per show/hide
     (the rAF-coalesced threshold check only changes state on the crossing)
     and --scene-h is a fixed px snapshot, so the height target is constant —
     there's no per-tick re-animation to fight. Duration/curve tuned to track
     iOS's keyboard slide (~0.25-0.3s, ease-out) so the two move together. */
  transition: height .28s cubic-bezier(.22,.61,.36,1);
}
/* pause cloud drift while keyboard is up — scene is mostly hidden anyway */
body.kb-up .ps-cloud { animation-play-state: paused; }

/* ════════════════════════════════════════════════════════════════════════
   2.  PHASE PALETTES
   Each phase rewrites the variables. Everything else inherits.
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene.phase-dawn{
  --sky-top:        #4a567a;
  --sky-mid:        #c08a6b;
  --sky-bot:        #ecd9a8;
  --haze-color:     rgba(255,178,99,.28);
  --sun-fill:       #f2b266;
  --sun-glow:       rgba(242,178,102,.50);
  --cloud-fill:     #fde6d5;
  --cloud-edge:     #d8b89a;
  --hills-fill:     #6b6e8a;
  --silhouette:     #2a3245;
  --grass-near:     #7a8a55;
  --grass-far:      #4a5e3a;
  --ground-fill:    #d4c8a6;
  --ink:            #2a241c;
}

.panel-scene.phase-day{
  /* baseline values defined above */
}

.panel-scene.phase-dusk{
  --sky-top:        #3a3458;
  --sky-mid:        #c98a62;
  --sky-bot:        #e8c98f;
  --haze-color:     rgba(255,160,80,.36);
  --sun-fill:       #ef9a55;
  --sun-glow:       rgba(239,154,85,.50);
  --cloud-fill:     #f4cba0;
  --cloud-edge:     #a87355;
  --hills-fill:     #4a4366;
  --silhouette:     #2a2438;
  --grass-near:     #6b6a50;
  --grass-far:      #3a3a2c;
  --ground-fill:    #b8a78a;
  --ink:            #f4efe2;
  --ink-soft:       rgba(244,239,226,.78);
}

.panel-scene.phase-night{
  --sky-top:        #0f1320;
  --sky-mid:        #1d2335;
  --sky-bot:        #2a3346;
  --haze-color:     rgba(40,60,95,.30);
  --moon-fill:      #ece6d5;
  --moon-shadow:    #1d2335;
  --cloud-fill:     #525e7a;
  --cloud-edge:     #313c56;
  --hills-fill:     #2c3450;
  --silhouette:     #0e1220;
  --grass-near:     #2a3a40;
  --grass-far:      #1a242a;
  --ground-fill:    #2a3038;
  --ground-line:    #0e1220;
  --ink:            #f4efe2;
  --ink-soft:       rgba(244,239,226,.78);
}

/* ════════════════════════════════════════════════════════════════════════
   3.  WEATHER OVERRIDES
   These tweak palette vars on top of the phase. Cloud-fill darker on rain,
   sky desaturated on fog, etc. No need for per-phase weather rules.
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene.wx-cloudy{
  --cloud-fill: color-mix(in srgb, var(--cloud-fill), #d5d8e0 25%);
}
.panel-scene.wx-rain,
.panel-scene.wx-thunder{
  --cloud-fill: #6b7480;
  --cloud-edge: #3a414c;
  --haze-color: rgba(80,90,110,.20);
}
.panel-scene.phase-night.wx-rain,
.panel-scene.phase-night.wx-thunder{
  --cloud-fill: #3a4258;
}
.panel-scene.wx-snow{
  --cloud-fill: color-mix(in srgb, var(--cloud-fill), #d8dee5 35%);
  --grass-near: color-mix(in srgb, var(--grass-near), #ffffff 55%);
  --grass-far:  color-mix(in srgb, var(--grass-far),  #ffffff 30%);
}
.panel-scene.wx-fog{
  --haze-color: rgba(238,234,222,.55);
  --silhouette: color-mix(in srgb, var(--silhouette), var(--sky-mid) 60%);
  --hills-fill: color-mix(in srgb, var(--hills-fill), var(--sky-mid) 50%);
}
.panel-scene.phase-night.wx-fog{
  --haze-color: rgba(90,100,125,.50);
}

/* ════════════════════════════════════════════════════════════════════════
   4.  SKY GRADIENT + HAZE
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-sky{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-bot));
  transition:background 2s ease;
}
.wx-fog .panel-scene-sky{filter:saturate(.65) brightness(1.02)}

/* Atmospheric horizon glow — sits between sky and ground line. */
.panel-scene-haze{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg, transparent, var(--haze-color));
  pointer-events:none;
  transition:background 1.6s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   5.  STARS
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-stars{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity 1.5s ease;
}
.phase-night.wx-clear .panel-scene-stars,
.phase-night.wx-cloudy .panel-scene-stars{opacity:1}
.panel-scene-star{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--star-color);
  animation:ps-twinkle 3.4s ease-in-out infinite;
}
/* Stars stay in the upper 55% of the sky; spread left-to-right, varied sizes. */
.panel-scene-star:nth-child(1) {left: 5%;top:14%;animation-delay:0s}
.panel-scene-star:nth-child(2) {left:14%;top:32%;animation-delay:.6s;width:2px;height:2px}
.panel-scene-star:nth-child(3) {left:22%;top:10%;animation-delay:1.4s;width:2px;height:2px}
.panel-scene-star:nth-child(4) {left:30%;top:42%;animation-delay:2.1s}
.panel-scene-star:nth-child(5) {left:39%;top:18%;animation-delay:.3s;width:2px;height:2px}
.panel-scene-star:nth-child(6) {left:47%;top: 8%;animation-delay:1.8s}
.panel-scene-star:nth-child(7) {left:53%;top:36%;animation-delay:.9s;width:2px;height:2px}
.panel-scene-star:nth-child(8) {left:60%;top:22%;animation-delay:2.5s}
.panel-scene-star:nth-child(9) {left:67%;top:46%;animation-delay:.5s;width:2px;height:2px}
.panel-scene-star:nth-child(10){left:74%;top:12%;animation-delay:1.2s}
.panel-scene-star:nth-child(11){left:80%;top:30%;animation-delay:2.8s;width:2px;height:2px}
.panel-scene-star:nth-child(12){left:88%;top:16%;animation-delay:.8s}
.panel-scene-star:nth-child(13){left:93%;top:40%;animation-delay:1.6s;width:2px;height:2px}
.panel-scene-star:nth-child(14){left: 9%;top:50%;animation-delay:3.1s;width:2px;height:2px}
.panel-scene-star:nth-child(15){left:18%;top:22%;animation-delay:.2s}
.panel-scene-star:nth-child(16){left:35%;top:52%;animation-delay:2.3s;width:2px;height:2px}
.panel-scene-star:nth-child(17){left:55%;top:26%;animation-delay:1.0s;width:2px;height:2px}
.panel-scene-star:nth-child(18){left:64%;top:54%;animation-delay:3.5s}
.panel-scene-star:nth-child(19){left:77%;top:48%;animation-delay:.7s;width:2px;height:2px}
.panel-scene-star:nth-child(20){left:91%;top:24%;animation-delay:1.9s}
@keyframes ps-twinkle{0%,100%{opacity:.25}50%{opacity:1}}

/* ════════════════════════════════════════════════════════════════════════
   6.  SUN / MOON  (kept from v3; palette-driven now)
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-sun{
  position:absolute;width:42px;height:42px;border-radius:50%;
  background:var(--sun-fill);opacity:0;left:50%;top:35%;margin-left:-21px;
  box-shadow:0 0 22px 6px var(--sun-glow);
  filter:url(#drawn-bold);
  transition:left 2.4s ease,top 2.4s ease,background 2s ease,
             opacity 1.6s ease,box-shadow 2s ease,width .4s,height .4s;
}
.phase-night .panel-scene-sun{
  background:var(--moon-fill);width:32px;height:32px;margin-left:-16px;
  filter:none;
  box-shadow:inset -7px -4px 0 var(--moon-shadow), 0 0 18px 4px rgba(232,228,214,.25);
}
.panel-scene-sun.is-moon{
  background:transparent;box-shadow:0 0 18px 4px rgba(232,228,214,.28);
  width:42px;height:42px;margin-left:-21px;filter:none;
}
.panel-scene-sun.is-moon svg{display:block;width:100%;height:100%}
.wx-cloudy .panel-scene-sun{opacity:.45}
.wx-rain .panel-scene-sun,.wx-thunder .panel-scene-sun,.wx-snow .panel-scene-sun{opacity:.15}
.wx-fog .panel-scene-sun{opacity:.3;filter:blur(2px)}
.wx-goldenhour .panel-scene-sun{box-shadow:0 0 28px 12px rgba(255,178,99,.55)}

/* ════════════════════════════════════════════════════════════════════════
   7.  DISTANCE LAYER (hills + tree silhouette)
   Single SVG, two <use> instances. CSS color drives currentColor fill.
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-back{
  position:absolute;left:0;right:0;bottom:4px;top:0;
  /* Extend 4px below the bottom so tree roots reach into the ground line
     rather than floating above it. The ground SVG is on top so roots are
     naturally occluded — only the crown silhouette shows above. */
  width:100%;height:calc(100% + 4px);
  pointer-events:none;
}
.ps-hills{
  color:var(--hills-fill);
  fill:currentColor;
  opacity:0.85;
  transition:color 2s ease, opacity 1.6s ease;
  filter:url(#drawn-subtle);
}
.ps-trees{
  color:var(--silhouette);
  fill:currentColor;
  opacity:0.92;
  transition:color 2s ease, opacity 1.6s ease;
  filter:url(#drawn-subtle);
}
/* Fog dims silhouettes further; rain/snow soften them. */
.wx-fog .ps-hills{opacity:0.42}
.wx-fog .ps-trees{opacity:0.55}
.wx-rain .ps-trees,.wx-thunder .ps-trees,.wx-snow .ps-trees{opacity:0.78}

/* ════════════════════════════════════════════════════════════════════════
   8.  CLOUDS
   SVG <use> instances of 4 shapes. Position + animation on the parent
   container; weather classes toggle which instances are visible.
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-clouds{
  position:absolute;left:-10px;right:-10px;top:0;
  width:calc(100% + 20px);
  /* Constrain clouds to the upper sky; with preserveAspectRatio=xMidYMin
     meet on the SVG, they retain their authored proportions instead of
     stretching to giant blobs on tall panels. */
  height:60%;
  color:var(--cloud-fill);
  pointer-events:none;
  transition:color 1.8s ease;
}
.ps-cloud{
  fill:currentColor;
  /* No filter here. feDisplacementMap re-rasterizes per frame, and we have
     5 clouds × constant drift animation = GPU melt on lower-end devices.
     The hand-drawn vibe comes through from the path geometry alone. */
  transform-origin:center;
  transition:opacity 1.4s ease;
  animation:ps-cloud-drift 70s linear infinite;
}

/* Five cloud slots — each <use> attribute sets the symbol size and
   position via x/y/width/height in SVG user units (viewBox 0 0 320 100).
   Heights are kept ≤25 units so no cloud blob fills more than 25% of sky.
   Cloud-d is the storm cloud: hidden on clear/cloudy, positioned LOW (y:62)
   so it sits on the horizon when it appears — "storm sitting on the horizon". */
/* heights reduced ~20%; a/b pushed to top so they hug the upper sky */
.ps-cloud-a{x:24;  y:4;  width:46; height:14; animation-duration:78s}
.ps-cloud-b{x:188; y:2;  width:60; height:14; animation-duration:92s; animation-direction:reverse}
.ps-cloud-c{x:90;  y:2;  width:46; height:11; animation-duration:106s; opacity:0.85}
.ps-cloud-d{x:160; y:62; width:130; height:20; animation-duration:84s; opacity:0; animation-direction:reverse}
.ps-cloud-e{x:4;   y:32; width:56; height:16; animation-duration:96s; opacity:0}

/* Clear sky: just 2 small clouds high up. */
.wx-clear .ps-cloud-c,
.wx-clear .ps-cloud-d,
.wx-clear .ps-cloud-e{opacity:0}

/* Partly cloudy: 3 clouds, mix of heights. */
.wx-cloudy .ps-cloud-c{opacity:0.85}
.wx-cloudy .ps-cloud-e{opacity:0.6}

/* Rain / thunder: heavy lows visible, big and dark. */
.wx-rain .ps-cloud-c,
.wx-thunder .ps-cloud-c{opacity:0.9}
.wx-rain .ps-cloud-d,
.wx-thunder .ps-cloud-d{opacity:0.92}
.wx-rain .ps-cloud-e,
.wx-thunder .ps-cloud-e{opacity:0.75}

/* Snow: soft clouds + lots of them. */
.wx-snow .ps-cloud-c{opacity:0.7}
.wx-snow .ps-cloud-d{opacity:0.8}
.wx-snow .ps-cloud-e{opacity:0.55}

/* Fog hides clouds entirely; the fog layer takes over. */
.wx-fog .ps-cloud{opacity:0}

@keyframes ps-cloud-drift{
  from{transform:translateX(-12px)}
  50%{transform:translateX(20px)}
  to{transform:translateX(-12px)}
}

/* ════════════════════════════════════════════════════════════════════════
   9.  RAIN
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-rain{position:absolute;inset:0;display:none;pointer-events:none}
.wx-rain .panel-scene-rain,.wx-thunder .panel-scene-rain{
  display:block;
  background-image:repeating-linear-gradient(100deg, transparent 0 11px, var(--rain-color) 11px 12px);
  animation:ps-rain .55s linear infinite;
}
.phase-night.wx-rain .panel-scene-rain,
.phase-night.wx-thunder .panel-scene-rain{
  background-image:repeating-linear-gradient(100deg, transparent 0 11px, var(--rain-color-night) 11px 12px);
}
@keyframes ps-rain{from{background-position:0 0}to{background-position:-16px 26px}}

.panel-scene-splash{
  position:absolute;left:0;right:0;bottom:14px;height:6px;display:none;
  background-image:repeating-radial-gradient(circle at 10% 100%, rgba(170,190,215,.5) 0 1px, transparent 2px 26px);
  animation:ps-splash 1.1s ease-in-out infinite;
}
.wx-rain .panel-scene-splash,.wx-thunder .panel-scene-splash{display:block}
@keyframes ps-splash{0%,100%{opacity:.2}50%{opacity:.7}}

/* ════════════════════════════════════════════════════════════════════════
   10. SNOW
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-snow{position:absolute;inset:0;display:none;pointer-events:none}
.wx-snow .panel-scene-snow{display:block}
.panel-scene-snow::before,
.panel-scene-snow::after{
  content:'';position:absolute;inset:-20% 0 0 0;
  background-image:radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px);
  background-size:64px 64px;
}
.panel-scene-snow::before{animation:ps-snow 9s linear infinite}
.panel-scene-snow::after{background-size:44px 44px;opacity:.6;animation:ps-snow 13s linear infinite reverse}
.phase-night.wx-snow .panel-scene-snow::before,
.phase-night.wx-snow .panel-scene-snow::after{opacity:.5}
@keyframes ps-snow{from{background-position:0 -64px}to{background-position:18px 100%}}

/* ════════════════════════════════════════════════════════════════════════
   11. FOG
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-fog{position:absolute;inset:0;display:none;pointer-events:none}
.wx-fog .panel-scene-fog{display:block}
.panel-scene-fog::before,
.panel-scene-fog::after{
  content:'';position:absolute;left:-30%;right:-30%;
  height:34%;border-radius:50%;
  background:rgba(238,234,222,.55);
  filter:blur(8px);
}
.panel-scene-fog::before{top:30%;animation:ps-fog 26s ease-in-out infinite}
.panel-scene-fog::after{top:58%;background:rgba(238,234,222,.4);animation:ps-fog 34s ease-in-out infinite reverse}
.phase-night.wx-fog .panel-scene-fog::before{background:rgba(90,100,125,.45)}
.phase-night.wx-fog .panel-scene-fog::after{background:rgba(90,100,125,.3)}
@keyframes ps-fog{0%,100%{transform:translateX(-4%)}50%{transform:translateX(4%)}}

/* ════════════════════════════════════════════════════════════════════════
   12. THUNDER FLASH
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-flash{
  position:absolute;inset:0;background:rgba(255,250,225,.85);
  opacity:0;display:none;pointer-events:none;
}
.wx-thunder .panel-scene-flash{display:block;animation:ps-flash 7s linear infinite}
@keyframes ps-flash{0%,93%,100%{opacity:0}94%{opacity:.75}95%{opacity:.1}96.5%{opacity:.5}98%{opacity:0}}

/* ════════════════════════════════════════════════════════════════════════
   13. CONTENT ROW (clock, weather)
   Pulled DOWN to overlap the grass strip — the time/date sit ON the ground,
   not floating up against the tree line. (Tim, 2026-06-19.)
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-row{
  position:absolute; left:0; right:0; bottom:6px;
  z-index:6;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:0 20px;
}
.panel-scene-weather{display:flex;align-items:baseline;gap:8px;margin:5px 0 0;min-height:22px}
.panel-scene-wx-now{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:16px;font-weight:700;color:var(--ink-soft);
}
.panel-scene-wx-hilo{
  font-family:var(--note,'Kalam',cursive);
  font-size:12.5px;color:var(--ink-soft);opacity:.85;
}
.panel-scene-clock{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.panel-scene-time{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:clamp(30px,8vw,38px);font-weight:700;line-height:1;
  color:var(--ink);
}
.panel-scene-date{
  font-family:var(--note,'Kalam',cursive);
  font-size:16px;font-weight:600;color:var(--ink-soft);
  margin-top:2px;
}
/* Dusk + night ink is already light (set in palette). Add a soft shadow
   so the time/date stay legible over warm/dark gradients. */
.phase-night .panel-scene-time,
.phase-dusk  .panel-scene-time{
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.28);
}
.phase-night .panel-scene-date,
.phase-dusk  .panel-scene-date{
  font-weight:600;
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 0 5px rgba(0,0,0,.35);
}
.phase-night .panel-scene-wx-now,
.phase-dusk  .panel-scene-wx-now,
.phase-night .panel-scene-wx-hilo,
.phase-dusk  .panel-scene-wx-hilo{
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* ════════════════════════════════════════════════════════════════════════
   14. GROUND  (SVG grass strip)
   The SVG owns its colors via currentColor — set the grass tint here.
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-ground{
  /* Positioned absolute at the scene's bottom so the grass strip ALWAYS
     reaches the bottom edge — flex-flow rendering was leaving a tiny
     parchment gap between the grass and the panel's bottom. Absolute
     positioning kills that gap regardless of the flex layout above. */
  position:absolute;
  left:0; right:0; bottom:0;
  display:block;
  width:100%;
  height:42px;            /* up from 28px — taller patch of grass so Big Foot stands on visible ground */
  color:var(--grass-near);     /* currentColor for the grass pattern <use> */
  transition:color 2s ease;
  pointer-events:none;
}
.panel-scene-ground rect:first-of-type{
  /* Ground fill behind blades (the dirt strip). */
  fill:var(--ground-fill);
}
.panel-scene-ground rect:nth-of-type(2){
  /* Pattern fill — uses currentColor (set above). */
}
/* The back-row blades (opacity 0.55 in the symbol) mix with this color for
   the "farther" tint. Adjust if more depth is wanted: */
.panel-scene-ground line{
  stroke:var(--ground-line);
}

/* ════════════════════════════════════════════════════════════════════════
   15. CORNER BUTTONS  (sign-out, settings — unchanged behavior)
   ════════════════════════════════════════════════════════════════════════ */
.panel-scene-signout,
.panel-scene-settings{
  position:absolute;top:calc(10px + env(safe-area-inset-top));z-index:5;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,248,239,.55);
  border:1.4px solid var(--ground-line);
  border-radius:9px 11px 8px 12px;
  color:var(--ink);
  cursor:pointer;opacity:.55;
  transition:opacity .15s ease, transform .12s ease, color 1s ease, background 1s ease;
}
.panel-scene-signout{left:12px}
.panel-scene-settings{right:12px}
.panel-scene-signout svg{width:14px;height:18px}
.panel-scene-settings svg{width:16px;height:16px}
.panel-scene-signout:hover,.panel-scene-signout:focus,
.panel-scene-settings:hover,.panel-scene-settings:focus{opacity:1;outline:none}
.panel-scene-signout:active,
.panel-scene-settings:active{transform:scale(.94)}
.phase-night .panel-scene-signout,.phase-dusk .panel-scene-signout,
.phase-night .panel-scene-settings,.phase-dusk .panel-scene-settings{
  background:rgba(47,40,31,.45);
  border-color:rgba(244,239,226,.55);
}

/* ════════════════════════════════════════════════════════════════════════
   16. SETTINGS SHEET  (unchanged — kept for parity)
   ════════════════════════════════════════════════════════════════════════ */
.bf-settings-sheet{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:50;
  background:var(--accent-soft,#cfe6e1);
  border:2.2px solid var(--line,#2f281f);
  border-radius:14px 17px 13px 16px;
  box-shadow:5px 6px 0 rgba(47,40,31,.28);
  padding:22px 22px;
  width:min(360px, 90vw);
  display:flex;flex-direction:column;gap:14px;
  font-family:var(--note,'Kalam',cursive);
  color:var(--ink,#2a241c);
}
.bf-settings-sheet h2{font-family:var(--hand,'Patrick Hand',cursive);font-size:20px;margin:0;font-weight:700}
.bf-settings-row{display:flex;flex-direction:column;gap:6px}
.bf-settings-row label{font-size:14px;color:var(--ink-soft,#6a5f51)}
.bf-autolock-options{display:flex;flex-wrap:wrap;gap:6px}
.bf-autolock-options button{
  font-family:var(--note,'Kalam',cursive);font-size:13px;
  background:transparent;border:1.4px solid var(--line,#2f281f);
  border-radius:10px 12px 9px 13px;padding:7px 12px;cursor:pointer;color:var(--ink,#2a241c);
}
.bf-autolock-options button.sel{
  background:var(--accent,#2f8f86);color:#fbf8ef;border-color:var(--accent-ink,#1d6b63);
}
.bf-settings-close{
  position:absolute;top:8px;right:10px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:24px;line-height:1;color:var(--ink-soft,#6a5f51);
  cursor:pointer;border-radius:50%;
}
.bf-settings-close:hover{background:rgba(47,40,31,.08);color:var(--ink,#2a241c)}

.bf-signout-confirm{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:50;
  background:var(--card,#fbf8ef);
  border:1.8px solid var(--line,#2f281f);
  border-radius:14px 17px 13px 16px;
  box-shadow:4px 5px 0 rgba(47,40,31,.18);
  padding:20px 22px;width:min(320px, 86vw);
  display:flex;flex-direction:column;gap:14px;
  font-family:var(--note,'Kalam',cursive);color:var(--ink,#2a241c);text-align:center;
}
.bf-signout-confirm p{margin:0;font-size:16px;line-height:1.3}
.bf-signout-actions{display:flex;gap:10px;justify-content:center}
.bf-signout-actions button{
  font-family:var(--hand,'Patrick Hand',cursive);font-size:15.5px;
  padding:9px 18px;border-radius:11px 13px 10px 14px;cursor:pointer;
}
.bf-signout-actions .bf-yes{
  background:var(--accent,#2f8f86);color:#fbf8ef;
  border:2px solid var(--accent-deep,#256f68);
}
.bf-signout-actions .bf-no{
  background:transparent;color:var(--ink-soft,#6a5f51);
  border:1.6px dashed var(--line,#2f281f);
}
.bf-signout-scrim{position:fixed;inset:0;background:rgba(47,40,31,.4);z-index:49}

.sh-scrim{position:fixed;inset:0;z-index:60;background:rgba(47,40,31,.55)}
.sh-card{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:61;width:min(360px, 92vw);
  background:var(--card,#fbf8ef);
  border:1.8px solid var(--line,#2f281f);
  border-radius:16px 18px 14px 19px;
  box-shadow:5px 6px 0 rgba(47,40,31,.22);
  padding:24px 22px 22px;
  display:flex;flex-direction:column;gap:18px;text-align:center;
}
.sh-prompt{
  margin:0;font-family:var(--scrawl,'Caveat',cursive);
  font-weight:700;font-size:24px;line-height:1.18;color:var(--ink,#2a241c);
}
.sh-choices{display:flex;gap:10px}
.sh-choice{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:1.6px solid var(--line,#2f281f);
  border-radius:13px 15px 12px 16px;padding:14px 10px;cursor:pointer;
  color:var(--ink,#2a241c);font-family:var(--note,'Kalam',cursive);
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.sh-choice:hover{background:var(--card2,#f4eee0)}
.sh-choice:active{transform:scale(.97)}
.sh-choice .sh-day{font-family:var(--hand,'Patrick Hand',cursive);font-size:18px;letter-spacing:.02em}
.sh-choice .sh-date{font-size:12px;color:var(--ink-soft,#6a5f51)}
.sh-choice-strong{
  background:var(--accent,#2f8f86);color:#fbf8ef;
  border-color:var(--accent-ink,#1d6b63);
}
.sh-choice-strong:hover{background:var(--accent-ink,#1d6b63)}
.sh-choice-strong .sh-date{color:rgba(251,248,239,.85)}

/* ════════════════════════════════════════════════════════════════════════
   17. BIOME PALETTES
   Mirror the phase pattern: one block per biome overrides ground/silhouette
   vars. Sky vars are intentionally NOT overridden — phase still owns sky.
   ════════════════════════════════════════════════════════════════════════ */

/* forest = home biome. The base palette leaves the ground tan ("dirt"), which
   read as a tan top band + green grass band — Tim wanted one green forest floor.
   Override foliage + ground for the lit phases; night is left to the base dark
   palette so the scene still reads as night. */
.panel-scene.biome-forest.phase-day,
.panel-scene.biome-forest.phase-dawn,
.panel-scene.biome-forest.phase-dusk{
  --grass-near:  #6f9e4f;
  --grass-far:   #3f6a34;
  --hills-fill:  #5e8b76;
  --silhouette:  #2f5d3a;
  --ground-fill: #5c8a44;
}

.panel-scene.biome-valley{
  --grass-near:     #8aac5a;
  --grass-far:      #5a7a3a;
  --hills-fill:     #a8c87a;
  --silhouette:     #6a9a58;
}

.panel-scene.biome-coast{
  --grass-near:     #c8b878;
  --grass-far:      #a09050;
  --hills-fill:     #a8bccc;
  --silhouette:     #7898a8;
  --ground-fill:    #e0d4a0;
  --haze-color:     rgba(160,200,220,.28);
}

.panel-scene.biome-desert{
  --grass-near:     #c8a060;
  --grass-far:      #a07840;
  --hills-fill:     #c8a870;
  --silhouette:     #9a7848;
  --ground-fill:    #e8cca0;
  --haze-color:     rgba(240,200,120,.22);
}

.panel-scene.biome-mountains{
  --grass-near:     #788a70;
  --grass-far:      #4a5c48;
  --hills-fill:     #8898b0;
  --silhouette:     #4a5868;
  --ground-fill:    #c0c8c8;
  --haze-color:     rgba(160,180,210,.25);
}

/* ════════════════════════════════════════════════════════════════════════
   17. REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .panel-scene *{animation:none!important}
  .panel-scene-sky,.panel-scene-sun{transition:none!important}
}
.reduced-motion .panel-scene-cloud,.reduced-motion .panel-scene-star,
.reduced-motion .panel-scene-rain,.reduced-motion .panel-scene-splash,
.reduced-motion .panel-scene-snow::before,.reduced-motion .panel-scene-snow::after,
.reduced-motion .panel-scene-fog::before,.reduced-motion .panel-scene-fog::after,
.reduced-motion .panel-scene-flash,.reduced-motion .ps-cloud{animation:none!important}