/* The illustrated map and the home cut-aways: animations and label styling shared by the public page (tokens.css) and the keeper's
   console (which has no tokens and keeps the fallbacks after each var()). */
.scene-wrap { border: 1px solid var(--line, #17302f); border-radius: var(--r-lg, 2px); background: var(--map-frame, #06100f); box-shadow: var(--sh-2, var(--glow)); overflow: hidden; }
svg.scene { display: block; width: 100%; height: auto; max-height: 78vh; font-family: var(--font, var(--mono)); }
.scene .place, .scene .turtle { cursor: pointer; outline: none; }
.scene .place:hover, .scene .place:focus-visible { filter: drop-shadow(0 0 8px var(--c-sun, #36D2CB)); }
.scene .label { font-size: 22px; font-weight: var(--w-bold, 400); fill: var(--map-label, #f2fffb); stroke: var(--map-label-stroke, #06100f); stroke-width: 4.5px; stroke-linejoin: round; paint-order: stroke; letter-spacing: .02em; pointer-events: none; }
.scene .tag { font-size: 19px; fill: var(--map-label, #ffffff); stroke: var(--map-label-stroke, #06100f); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; font-weight: 700; pointer-events: none; }
.scene .trail { stroke: #d9c79a; stroke-width: 6; stroke-dasharray: 2 11; stroke-linecap: round; opacity: .42; }
.scene .turtle { filter: drop-shadow(0 2px 3px var(--map-label-stroke, rgba(54,210,203,.65))); transition: transform 2s ease-in-out, opacity .6s; }
.scene .turtle.asleep { opacity: .72; }
.scene .turtle .zz { font-size: 22px; fill: #bff3ef; opacity: 0; font-weight: 700; }
.scene .turtle.asleep .zz { opacity: 1; animation: zfloat 3s ease-in-out infinite; }
.scene .turtle.walking .leg { animation: step .5s ease-in-out infinite alternate; }
.scene .turtle.walking .leg.l1, .scene .turtle.walking .leg.l2 { animation-delay: .25s; }
@keyframes step { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes zfloat { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-9px); opacity: 1; } }
.scene .bubble rect, .scene .bubble path, .scene .bubble circle { fill: #f4fffd; stroke: #36D2CB; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(54,210,203,.55)); }
.scene .bubble.thought rect, .scene .bubble.thought circle { fill: #e6f9f7; stroke-dasharray: 5 4; }
.scene .bubble text { font-size: 15px; fill: #0b1c1b; font-style: normal; }
.scene .bubble.thought text { font-style: italic; }
.scene .hud-text { font-size: 17px; font-weight: var(--w-bold, 400); fill: var(--map-label, #e8f7f6); stroke: var(--map-label-stroke, #06100f); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
.scene .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 5s ease-out infinite; }
.scene .ripple.r1 { animation-delay: 1.6s; } .scene .ripple.r2 { animation-delay: 3.2s; }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(6); opacity: 0; } }
.scene .minnow { animation: minnow 7s linear infinite; } .scene .m1 { animation-delay: -2s; } .scene .m2 { animation-delay: -4s; } .scene .m3 { animation-delay: -5.5s; }
@keyframes minnow { from { transform: translateX(-30px); } 50% { transform: translateX(46px); } to { transform: translateX(-30px); } }
.scene .flow { animation: flow 1.2s linear infinite; } @keyframes flow { to { stroke-dashoffset: -34; } }
.scene .fall { animation: fall .7s linear infinite; stroke-dasharray: 10 6; } .scene .fall.f2 { animation-duration: .9s; }
@keyframes fall { to { stroke-dashoffset: -32; } }
.scene .spray { animation: spray 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spray { 50% { transform: scale(1.4); opacity: .15; } }
.scene .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.2s ease-in-out infinite; }
.scene .sway.s1 { animation-delay: -1.4s; } .scene .sway.s2 { animation-delay: -2.8s; }
@keyframes sway { 50% { transform: rotate(3.5deg); } 0%,100% { transform: rotate(-3deg); } }
.scene .bee { animation: bee 6s linear infinite; } @keyframes bee { 25% { transform: translate(40px,-10px); } 50% { transform: translate(10px,14px); } 75% { transform: translate(-44px,-6px); } }
.scene .note-flutter { transform-box: fill-box; transform-origin: center; animation: flutter 3s ease-in-out infinite; }
@keyframes flutter { 50% { transform: rotate(8deg) translateY(-2px); } }
.scene .lamp, .scene .glow-warm { animation: lamp 4s ease-in-out infinite; } @keyframes lamp { 50% { opacity: .65; } }
.scene .sky .stars { transition: opacity 2s; } .scene .sky > g { transition: opacity 2s; }
.scene .cloud { fill: #f4fbfa; animation: drift 90s linear infinite alternate; }
.scene .cloud.c1 { animation-duration: 120s; } .scene .cloud.c2 { animation-duration: 75s; } .scene .cloud.c3 { animation-duration: 105s; }
.scene .clouds.dark .cloud { fill: #8aa0a6; }
@keyframes drift { to { transform: translateX(120px); } }
.scene .drop { animation: rain .8s linear infinite; } .scene .drop.d1 { animation-duration: .65s; } .scene .drop.d2 { animation-duration: .9s; animation-delay: -.3s; } .scene .drop.d3 { animation-duration: .75s; animation-delay: -.5s; }
@keyframes rain { from { transform: translate(0,-40px); } to { transform: translate(-14px, 60px); } }
.scene .bank { animation: mist 14s ease-in-out infinite alternate; } .scene .bank.b1 { animation-duration: 18s; } .scene .bank.b2 { animation-duration: 11s; } .scene .bank.b3 { animation-duration: 16s; }
@keyframes mist { from { transform: translateX(-40px); opacity: .5; } to { transform: translateX(40px); opacity: .95; } }
.scene .leaf { animation: leaf 14s linear infinite; } .scene .leaf.l1 { animation-duration: 18s; animation-delay: -4s; } .scene .leaf.l2 { animation-duration: 11s; animation-delay: -7s; } .scene .leaf.l3 { animation-duration: 16s; animation-delay: -2s; } .scene .leaf.l4 { animation-duration: 21s; animation-delay: -9s; }
@keyframes leaf { from { transform: translate(0,0) rotate(0); } to { transform: translate(-60px, 640px) rotate(360deg); } }
.scene .fly { animation: fly 3s ease-in-out infinite; } .scene .fly.f1 { animation-delay: -.7s; } .scene .fly.f2 { animation-delay: -1.5s; } .scene .fly.f3 { animation-delay: -2.2s; }
@keyframes fly { 0%,100% { opacity: .1; transform: translate(0,0); } 50% { opacity: 1; transform: translate(14px,-12px); } }
.scene .item { filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.detail .row { display: flex; gap: 10px; } .detail .k { min-width: 92px; color: var(--accent); flex: none; }
.detail h3 { color: #fff; font-size: 16px; text-transform: none; }
.homes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.home-card { border: 1px solid var(--line); border-radius: 2px; padding: 8px; background: #091110; }
.home-svg { width: 100%; height: auto; display: block; border-radius: 2px; }
.home-card .cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.home-card .turtle { filter: none; transition: none; }
.home-card .tag, .home-card .zz { display: none; }
.home-card .turtle.asleep .zz { display: block; }
@media (max-width: 700px) {
  main { padding: 10px; gap: 12px; }
  .scene .label { font-size: 30px; stroke-width: 6px; }
  .scene .tag { font-size: 26px; }
  .scene .hud-text { font-size: 24px; }
  .turtles { grid-template-columns: 1fr; }
  .detail .row { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .scene *, .home-svg * { animation: none !important; transition: none !important; } }

/* gentle idle life: breathing, and a slow blink (nothing flashes; both stop for reduced motion) */
.scene .turtle .body { animation: breathe 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 60%; }
.scene .turtle .eye { animation: blinkeye 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { transform: scale(1.035); } }
@keyframes blinkeye { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.home-card .turtle .body, .home-card .turtle .eye { animation: none; }