/* Painted Landscape seed — #1070
   A zero-dependency scene layer that turns existing Haven surfaces into spatial places
   without moving semantic state into decorative graphics. */

:root {
  --landscape-hill:#a7af83;
  --landscape-hill-deep:#66704b;
  --landscape-water:#9fb8b3;
  --landscape-sky:#efe4cc;
  --landscape-path:#c9aa7b;
  --landscape-glow:#f2d7a0;
}

#screen-compass.active,
#screen-observation.active,
#screen-heart.active { position:relative; isolation:isolate; }

#screen-compass.active::before,
#screen-observation.active::before,
#screen-heart.active::before {
  content:""; position:fixed; inset:72px 0 0 228px; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 12%,rgba(242,215,160,.55),transparent 25%),
    radial-gradient(ellipse at 14% 88%,rgba(100,112,75,.18),transparent 32%),
    linear-gradient(180deg,rgba(239,228,204,.5),rgba(247,240,230,.34));
}

@media (max-width:1023px) {
  #screen-compass.active::before,
  #screen-observation.active::before,
  #screen-heart.active::before { inset:52px 0 64px; }
}

#screen-compass .work-today {
  position:relative; padding:clamp(18px,3vw,38px); border-radius:42px 42px 28px 28px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,252,244,.64) 0 31%,rgba(230,226,202,.56) 31% 63%,rgba(201,205,165,.42) 63% 100%);
  box-shadow:0 24px 70px rgba(74,66,48,.10);
}

#screen-compass .work-today::before {
  content:""; position:absolute; left:-10%; right:-10%; bottom:-6%; height:44%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 25% 100%,rgba(106,120,76,.24) 0 42%,transparent 43%),
    radial-gradient(ellipse at 76% 100%,rgba(133,145,96,.22) 0 38%,transparent 39%),
    linear-gradient(180deg,transparent,rgba(113,126,82,.12));
}

#screen-compass .work-today::after {
  content:""; position:absolute; left:50%; bottom:-13%; width:28%; height:62%; z-index:0; pointer-events:none;
  transform:translateX(-50%) rotate(2deg); border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,rgba(212,188,146,.12),rgba(185,153,107,.34)); filter:blur(.2px);
}

#screen-compass .work-today > * { position:relative; z-index:1; }
#screen-compass .work-question-card,
#screen-compass .today-next-card,
#screen-compass .today-tray { border-color:rgba(91,78,55,.12); box-shadow:0 12px 34px rgba(73,61,43,.08); }
#screen-compass .today-next-card {
  background:linear-gradient(100deg,rgba(253,249,241,.9),rgba(244,234,217,.82)),radial-gradient(circle at 86% 18%,rgba(166,177,122,.18),transparent 28%);
}

#screen-observation .observation-world {
  position:relative; max-width:1500px; margin:0 auto; border-radius:36px; overflow:hidden;
  min-height:calc(100dvh - 140px); box-shadow:0 28px 80px rgba(62,52,39,.14);
}
#screen-observation .observation-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#screen-observation .observation-scene::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(247,241,227,.93) 0 22%,rgba(247,241,227,.34) 42%,rgba(247,241,227,.18) 72%,rgba(247,241,227,.48)),linear-gradient(180deg,rgba(255,246,220,.14),rgba(68,74,48,.08));
}
#screen-observation .observation-scene img { width:100%; height:100%; object-fit:cover; transform:scale(1.015); }
#screen-observation .observation-rail,
#screen-observation .observation-stage { position:relative; z-index:1; }
#screen-observation .observation-sheet {
  background:linear-gradient(145deg,rgba(255,252,244,.86),rgba(246,237,220,.76));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(103,86,61,.15);
  box-shadow:0 18px 50px rgba(62,50,34,.10);
}
#screen-observation .observation-panel,
#screen-observation .rail-card { background:rgba(255,251,241,.74); border-color:rgba(103,86,61,.12); box-shadow:0 8px 25px rgba(64,52,37,.06); }
#screen-observation .observation-room-nav { position:relative; gap:6px; }
#screen-observation .observation-room-nav::before {
  content:""; position:absolute; left:2%; right:2%; bottom:4px; height:2px; border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(121,98,67,.22) 12% 88%,transparent); pointer-events:none;
}
#screen-observation .observation-room-nav button { position:relative; border-radius:999px; background:rgba(252,247,237,.72); border:1px solid rgba(111,93,68,.12); }
#screen-observation .observation-room-nav button.active { box-shadow:0 6px 18px rgba(81,70,48,.10); }
#screen-compass :focus-visible,
#screen-observation :focus-visible,
#screen-heart :focus-visible { outline:3px solid #344b32; outline-offset:4px; }

@media (max-width:760px) {
  #screen-compass .work-today { padding:14px 10px 22px; border-radius:26px 26px 18px 18px; }
  #screen-compass .work-today::after { width:44%; opacity:.55; }
  #screen-observation .observation-world { min-height:auto; border-radius:24px; box-shadow:none; }
  #screen-observation .observation-scene::after { background:linear-gradient(180deg,rgba(247,241,227,.72),rgba(247,241,227,.86)); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-observation .observation-scene img { transform:none; }
  #screen-compass *, #screen-observation *, #screen-heart * {
    scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;
  }
}