:root { color-scheme: light; --scene-ink: #254e3e; --character-light: 1; --scene-top: #78b9d8; --scene-bottom: #55934e; background-color: var(--scene-top); }
* { box-sizing: border-box; }
body { margin: 0; background-color: var(--scene-bottom); color: var(--scene-ink); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; }
/* Safari samples fixed edge backgrounds for its browser chrome. Keep these
   opaque, wider than a thin border (>10px), and above the transparent overlays. */
.scene-edge { position: fixed; left: 0; right: 0; height: 12px; z-index: 11; pointer-events: none; }
.scene-edge--top { top: 0; background-color: var(--scene-top); }
.scene-edge--bottom { bottom: 0; background-color: var(--scene-bottom); }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #607d42; outline-offset: 6px; }
@media (any-hover: hover) and (any-pointer: fine) {
  html, body, a, #weather-info { cursor: url('/assets/icons/heart-v1.svg') 16 27, auto; }
}
.heart-effects { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; contain: strict; }
.heart-particle { position: absolute; display: block; width: var(--heart-size); aspect-ratio: 1; background: url('/assets/icons/heart-v1.svg') center / contain no-repeat; pointer-events: none; animation: heart-burst var(--heart-life) ease-out both; }
.heart-particle--trail { animation-name: heart-trail; }
.heart-particle--still { animation: heart-fade 180ms ease-out both; }
@keyframes heart-trail {
  from { opacity: .85; transform: translate(-50%, -50%) rotate(var(--heart-tilt)) scale(1); }
  to { opacity: 0; transform: translate(calc(-50% + var(--heart-dx)), calc(-50% + var(--heart-dy))) rotate(var(--heart-spin)) scale(.15); }
}
@keyframes heart-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--heart-tilt)) scale(.35); }
  18% { opacity: .95; transform: translate(-50%, -50%) rotate(var(--heart-tilt)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-dx)), calc(-50% + var(--heart-dy))) rotate(var(--heart-spin)) scale(.45); }
}
@keyframes heart-fade {
  from { opacity: .8; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, -50%); }
}
/* Fill the web viewport; only readable controls avoid the device cutouts. */
.page { min-height: 100vh; min-height: 100dvh; }
.playground { position: relative; width: 100%; height: 100vh; height: 100dvh; }
#companions { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
/* Never expose default SVG dimensions or an uncropped atlas before its first frame. */
#companions:not([data-ready="true"]), #world:not([data-ready="true"]) { visibility: hidden; }
#world:not([data-ready="true"]) * { transition: none !important; }
.companion-sprite { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform; }
.sprite-facing { position: absolute; inset: 0; filter: brightness(calc(var(--character-light) + var(--warm-light,0) * .45)) sepia(calc(var(--warm-light,0) * .18)) saturate(calc(1 + var(--warm-light,0) * .16)); }
.meteor { position: absolute; inset: 0; z-index: 5; pointer-events: none; filter: drop-shadow(0 0 5px #fff4b8) drop-shadow(0 0 12px #ffd578b8); }
.play-toys { position:fixed; inset:0; z-index:8; pointer-events:none; filter:brightness(calc(var(--character-light) + var(--toy-warm,0) * .3)); }
.play-toy { position:absolute; left:0; top:0; }
.play-toy svg { width:100%; height:100%; overflow:visible; }
.play-rope-back { position:fixed; inset:0; z-index:0; pointer-events:none; filter:brightness(var(--character-light)); }
.play-rope-front { position:absolute; inset:0; }
.play-rope-back svg,.play-rope-front svg { width:100%; height:100%; }
.ambient-props { position:fixed; inset:0; z-index:7; pointer-events:none; filter:brightness(var(--character-light)); }
.ambient-item { position:absolute; left:0; top:0; }
.ambient-item svg { width:100%;height:100%;overflow:visible; }
.ambient-item .wings { transform-origin:20px 20px;transform:scaleX(var(--flutter,1)); }
.night-light { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse var(--lamp-width) var(--lamp-height) at var(--lamp-x) var(--lamp-y),#ffd29455 0%,#f7b96926 30%,#ed9a4310 52%,transparent 78%); mask-image:linear-gradient(transparent 12px,#000 50px,#000 calc(100% - 65px),transparent calc(100% - 12px)); }
.night-fire,.night-lantern { position:absolute; left:0; top:0; pointer-events:none; }
.night-lantern { z-index:1; filter:drop-shadow(0 0 12px #ffe0a344); }
.night-fire svg,.night-lantern svg,.held-log svg,.night-loose-log svg { width:100%; height:100%; display:block; }
.camp-wood { opacity:var(--wood,1); }
.camp-flames { transform-origin:60px 111px; transform:scaleY(calc(var(--flame,0) * var(--flicker,1))); opacity:var(--flame,0); filter:drop-shadow(0 0 5px #ffcd8688); }
.camp-embers { opacity:var(--flame,0); }
.camp-smoke { opacity:var(--smoke,0); }
.night-particles { position:absolute; inset:0; pointer-events:none; z-index:6; }
.night-firefly,.night-spark,.night-breath { position:absolute; left:0; top:0; display:block; border-radius:50%; }
.night-firefly { background:#fff7b7; box-shadow:0 0 4px 2px #eaff9680,0 0 14px 5px #daed7740; }
.night-spark { width:2px; height:3px; background:#ffd887; box-shadow:0 0 4px #ffb669; }
.night-breath { background:#eeecdc; filter:blur(1px); }
.night-particles i[hidden] { display:none; }
.held-log { position:absolute; }
.night-loose-log { position:absolute; left:0; top:0; z-index:7; }
.sprite-crop { position: absolute; overflow: hidden; }
.sprite-crop img { position: absolute; max-width: none; user-select: none; }
.sprite-eyes { position: absolute; inset: 0; }
.sprite-eyes i { position: absolute; display: block; overflow: hidden; border-radius: 50%; }
.sprite-eyes i[data-blink="true"] { background:var(--lid-color); }
.sprite-eyes i[data-blink="true"] b { opacity:0; }
.sprite-eyes i[data-blink="true"]::after { content:''; position:absolute; left:12%; right:12%; top:40%; height:18%; border-bottom:1.4px solid #443044; border-radius:50%; }
.sprite-eyes b { position: absolute; display: block; left: 17%; top: 14%; width: 66%; height: 72%; border-radius: 50%; background: #30202e; }
.sprite-eyes b::after { content: ''; position: absolute; left: 24%; top: 13%; width: 28%; height: 26%; border-radius: 50%; background: #fffdf8; }
.sprite-emotion { position: absolute; left: 70%; color: #da638b; font: 700 clamp(15px,2vw,23px) system-ui; text-shadow: 0 1px 2px #ffffffa0; }
.swim-ripple { position: absolute; height: 8px; border: 2px solid #b7e3e3aa; border-radius: 50%; border-top-color: transparent; filter: brightness(var(--character-light)); }
.gaze-umbrella { position: absolute; }
.gaze-umbrella svg { display: block; width: 100%; }
.family-props { position: absolute; z-index: 0; filter: brightness(var(--character-light)); }
.play-pond { position: absolute; width: var(--prop-width); height: var(--prop-height); transform: translate(-50%,-48%); }
.play-pond svg { width: 100%; height: 100%; display: block; }
.play-puddles { position: absolute; }
.play-puddles i { position: absolute; border-radius: 50%; background: #85b8bd9c; border: 2px solid #afd5d39c; box-shadow: inset 0 0 0 3px #deeee536; }
.play-snowman { position: absolute; transform: translate(-50%,-80%); }
.play-snowman svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.snowman-body { transform-origin: 50px 133px; }
.play-snowball { position: absolute; top: 0; left: 0; z-index: 3; border: 1px solid #95bbca; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #e4f4ff 60%, #bfdaeb); box-shadow: 0 1px 2px #32526930; filter: brightness(var(--character-light)); will-change: transform; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-note { position: fixed; bottom: 20px; left: 24px; right: 24px; text-align: center; font-size: 12px; color: var(--scene-ink); }
.weather-credit { position: fixed; z-index: 3; right: max(32px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 30px; font-size: 11px; color: #eef3e9; background: #162d2c80; }
.weather-credit a { color: inherit; text-decoration: none; opacity: .65; }
.weather-credit a:hover { opacity: 1; text-decoration: underline; }
#weather-info { position: relative; font-size: 13px; cursor: help; }
#weather-info[data-stale="true"]::after { content: ''; position: absolute; right: -5px; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #d3a34e; }
#world { --top: #78b9d8; --bottom: #c4e3d0; --field: #7db45d; --near: #55934e; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; isolation: isolate; }
.sky { position: absolute; inset: 0; background: linear-gradient(var(--top), var(--bottom) 51%); }
.horizon-glow { position: absolute; left: 0; right: 0; top: 31%; height: 24%; background: radial-gradient(ellipse at center, var(--bottom), transparent 70%); opacity: .8; }
.stars { position: absolute; inset: 0; opacity: var(--stars, 0); transition: opacity 2s; }
.stars i { position: absolute; border-radius: 50%; background: #fff4d8; box-shadow: 0 0 5px #eaf0ef80; animation: twinkle 5s ease-in-out infinite alternate; }
.sun, .moon { position: absolute; width: clamp(42px, 5vw, 76px); aspect-ratio: 1; transform: translate(-50%, -50%); transition: left 1s linear, top 1s linear, opacity 2s; }
.sun { border-radius: 50%; background: #ffdda380; box-shadow: 0 0 60px 24px #ffdea73d, 0 0 100px 50px #fddd9e20; }
.sun-disc { position: absolute; inset: 9%; border-radius: 50%; background: #ffedb2; box-shadow: 0 0 18px #ffedb288; }
.moon { width: clamp(32px, 4vw, 57px); filter: drop-shadow(0 0 12px #faf0d632); }
.moon svg { display: block; width: 100%; height: 100%; }
.clouds { position: absolute; inset: 0; }
.cloud { position: absolute; left: -30vw; width: calc(clamp(170px, 21vw, 370px) * var(--cloud-size)); animation: cloud-drift 150s linear infinite; transition: opacity 3s; }
.cloud svg { display: block; width: 100%; fill: var(--cloud); }
.landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.snow-cover { opacity: var(--snow-cover, 0); transition: opacity 3s; }
.field-details { position: absolute; inset: 0; filter: brightness(var(--detail-light)); }
.grass-tuft, .flower { position: absolute; width: 15px; height: 20px; transform: scale(var(--plant-size)); transform-origin: bottom center; animation: grass-sway var(--plant-speed, 5s) ease-in-out var(--plant-delay) infinite alternate; opacity: .55; }
.grass-tuft::before, .grass-tuft::after { content: ''; position: absolute; bottom: 0; width: 7px; height: 14px; border: solid var(--grass); border-width: 0 2px 0 0; border-radius: 0 100% 0 0; transform: rotate(-22deg); }
.grass-tuft::after { left: 8px; height: 10px; transform: scaleX(-1) rotate(-20deg); }
.flower { width: 12px; height: 19px; border-left: 2px solid #628548; opacity: .9; }
.flower::before { content: ''; position: absolute; left: -3px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #e0b654; box-shadow: -4px 0 0 1px var(--petal), 4px 0 0 1px var(--petal), 0 -4px 0 1px var(--petal), 0 4px 0 1px var(--petal); }
.flower::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 8px; height: 4px; border-radius: 100% 0; background: #4d853d; transform: rotate(-20deg); }
.wind-leaves { position: absolute; inset: 0; opacity: var(--wind-leaves, 0); }
.wind-leaves i { position: absolute; left: -20px; width: 8px; height: 4px; border-radius: 90% 0; background: var(--grass); animation: leaf-drift 12s linear infinite; }
.fog { position: absolute; left: -25%; width: 150%; height: 28%; opacity: var(--fog, 0); background: radial-gradient(ellipse, #dce5df88, #dce5df00 65%); animation: mist-drift 35s ease-in-out infinite alternate; }
.fog-back { top: 32%; }
.fog-front { top: 61%; animation-delay: -18s; }
.precipitation { position: absolute; inset: 0; width: 100%; height: 100%; }
.environment-paused *, .environment-paused *::before, .environment-paused *::after { animation-play-state: paused !important; transition: none !important; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes cloud-drift { from { transform: translateX(-20vw); } to { transform: translateX(150vw); } }
@keyframes grass-sway { from { transform: scale(var(--plant-size)) rotate(-5deg); } to { transform: scale(var(--plant-size)) rotate(9deg); } }
@keyframes leaf-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(110vw, -80px) rotate(430deg); } }
@keyframes mist-drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@media (max-width: 640px) {
  .weather-credit { right: max(22px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); gap: 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Warm, outlined leaves remain readable against the grass. */
.ambient-item[data-kind="leaves"] svg{filter:drop-shadow(0 1px 1px #fff5cf) drop-shadow(0 3px 2px #533a3538)}
.ambient-item[data-kind="leaves"]:nth-child(2) svg{filter:hue-rotate(-19deg) drop-shadow(0 1px 1px #fff5cf) drop-shadow(0 3px 2px #533a3538)}
.ambient-item[data-kind="acorn"] svg{filter:none}
/* Passing wildlife starts behind the pets, in the landscape. */
.ambient-props[data-depth="far"]{z-index:0}