/* The exact V0.1.3B canvas clarity policy is retained. Never blur the farm. */
#game canvas{image-rendering:auto;transform:none;filter:none;margin:0!important;position:relative;z-index:1}
#ui .crop-art{image-rendering:auto}

/* V0.1.3D. Painted Canon layers, NOT a procedural-hill or CSS-art backdrop.
   Explicit stacking: far -> mid -> haze -> farm -> edge foliage -> HUD. */
:root,body{background:#e8e4d2}
#app{isolation:isolate;background:#e8e4d2}
#app::before,#app::after{content:none;display:none}
#game{z-index:10}
#ui{z-index:30}
.atmosphere-plane{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.atmosphere-plane *{pointer-events:none!important;user-select:none;-webkit-user-drag:none}
.atmosphere-behind{z-index:0}
.atmosphere-front{z-index:20}
.atmosphere-layer{position:absolute;display:block;inset:0}
.atmosphere-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;image-rendering:auto;filter:none}

/* These are alpha safety masks only, not replacement art. They retain the
   approved leaves at the OUTER edges and bottom corners and clear the center.
   The HUD remains above them even where it occupies a corner. No realtime blur. */
.atmosphere-foreground_left{
 -webkit-mask-image:radial-gradient(ellipse 23% 32% at 0% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to right,#0009 0%,transparent 7%);
 mask-image:radial-gradient(ellipse 23% 32% at 0% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to right,#0009 0%,transparent 7%);
}
.atmosphere-foreground_right{
 -webkit-mask-image:radial-gradient(ellipse 23% 32% at 100% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to left,#0009 0%,transparent 7%);
 mask-image:radial-gradient(ellipse 23% 32% at 100% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to left,#0009 0%,transparent 7%);
}
@media(orientation:portrait){
 .atmosphere-foreground_left{
  -webkit-mask-image:radial-gradient(ellipse 28% 24% at 0% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to right,#0007 0%,transparent 5%);
  mask-image:radial-gradient(ellipse 28% 24% at 0% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to right,#0007 0%,transparent 5%);
 }
 .atmosphere-foreground_right{
  -webkit-mask-image:radial-gradient(ellipse 28% 24% at 100% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to left,#0007 0%,transparent 5%);
  mask-image:radial-gradient(ellipse 28% 24% at 100% 103%,#000 0%,#000b 35%,transparent 100%),linear-gradient(to left,#0007 0%,transparent 5%);
 }
}
/* Old engines without alpha masking use strict corner clipping, never a full
   unmasked foliage image over the field. */
@supports not ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
 .atmosphere-foreground_left{clip-path:polygon(0 78%,13% 92%,20% 100%,0 100%)}
 .atmosphere-foreground_right{clip-path:polygon(100% 78%,87% 92%,80% 100%,100% 100%)}
}

/* V0.1.3B's existing subtle contact grounding remains below the game canvas. */
.farm-grounding{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
 background-image:var(--farm-grounding);background-size:100% 100%;background-repeat:no-repeat;
 transform-origin:0 0;will-change:transform}

/* V0.1.4 R2: small independent clouds, a low-frequency haze plate. */
#app[data-living-motion] .atmosphere-background_haze img{will-change:transform}
#app[data-living-motion=reduced] .atmosphere-layer img{transform:none!important;will-change:auto}
.atmosphere-cloud-band{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:paint}
.atmosphere-cloud-wisp{position:absolute;width:43%;max-width:650px;height:auto;object-fit:contain;opacity:.55;will-change:transform}
.atmosphere-cloud-wisp.cloud-0{left:1%;top:12%}
.atmosphere-cloud-wisp.cloud-1{right:4%;top:18%;width:35%}
#app[data-living-motion=reduced] .atmosphere-cloud-wisp{display:none;will-change:auto}
@media(orientation:portrait){
 .atmosphere-cloud-wisp.cloud-0{left:-15%;top:15%;width:80%}
 .atmosphere-cloud-wisp.cloud-1{right:-13%;top:26%;width:70%}
}
/* Auto honours the OS; ON is an explicit, visible opt-in. */
.motion-settings{margin:20px 0 10px;padding:14px;border:1px solid #dddcc3;border-radius:14px;background:#f1efda}
.motion-settings label{display:block;font-weight:700;margin-bottom:8px}
.motion-settings select{width:100%;min-height:44px;border:1px solid #aab497;border-radius:8px;background:#fffbee;color:#315a43;font:inherit;padding:8px}
.motion-settings p{font-size:12px;line-height:1.5;margin:8px 0 0;color:#526744}
#motion-toggle{position:relative}
#motion-toggle[data-motion=reduced]{background:#efe0bc}
#motion-toggle[data-motion=reduced]::after{content:"";position:absolute;width:20px;height:2px;background:#9d6538;transform:rotate(-45deg)}
.chimney-smoke-plane{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;contain:paint}
.chimney-puff{position:absolute;left:0;top:0;width:80px;height:80px;transform-origin:50% 50%;pointer-events:none;user-select:none;will-change:transform,opacity;image-rendering:auto}
#app[data-living-motion=reduced] .chimney-smoke-plane{display:none}