@import url('/world_structure_depth.css');
.world .cloud,.world .sky-glow,.world .plants,.world .vehicle,.world .worker,.world .irrigation{will-change:transform,opacity}
.world .cloud{animation:farm-cloud-drift 11s ease-in-out infinite alternate}
.world .sky-glow{animation:farm-sun-breathe 5.5s ease-in-out infinite alternate}
.world.phase-GROW .plants,.world.phase-MATURE .plants,.world.phase-PRODUCING .plants{animation:farm-crop-sway 3.8s ease-in-out infinite alternate}
.world.phase-PLANT .plants{animation:farm-crop-settle 2.8s ease-in-out infinite alternate}
.world .worker:not(:empty){animation:farm-worker-bob 1.9s ease-in-out infinite alternate}
.world .vehicle:not(:empty){animation:farm-machine-work 3.4s ease-in-out infinite alternate}
.world .irrigation{animation:farm-water-shimmer 2.2s ease-in-out infinite alternate}
.world.RAINY .cloud{animation-duration:6.5s}
.world.RAINY .plants{animation-duration:2.7s}
.world.phase-HARVEST .plants,.world.phase-CUT .plants{animation:farm-harvest-settle 2.4s ease-in-out infinite alternate}

/* FarmVisibleConsequenceWorldState@2 — perceptible world-state consequences.
   The farm world itself must carry the decision signal before metrics/explanation do. */
.world{transition:filter .35s ease,background .35s ease}
.world::before,.world::after{pointer-events:none;position:absolute;inset:0;z-index:3;opacity:0;content:"";transition:opacity .35s ease}

/* Water pressure: visibly dry soil, fewer/shorter crops, weak irrigation and heat haze. */
.world[data-binding-constraints*="water"]{filter:saturate(.52) brightness(.82) contrast(1.05)}
.world[data-binding-constraints*="water"]::before{opacity:.52;inset:54% 0 0;background:repeating-linear-gradient(165deg,transparent 0 23px,#d7b47633 24px 27px,transparent 28px 43px),linear-gradient(#8b653422,#6f442733)}
.world[data-binding-constraints*="water"]::after{opacity:.22;inset:0!important;height:auto!important;background:linear-gradient(180deg,#f4c66b33,transparent 42%)}
.world[data-binding-constraints*="water"] .ground{filter:saturate(.38) brightness(.76) contrast(1.14)}
.world[data-binding-constraints*="water"] .plants{opacity:.58!important;transform:translateY(12px) scale(calc(var(--growth-scale,1) * .76)) rotate(-2deg)!important;transform-origin:bottom center;filter:saturate(.52) sepia(.18)}
.world[data-binding-constraints*="water"] .plants>*:nth-child(4n){opacity:.12!important}
.world[data-binding-constraints*="water"] .irrigation{opacity:.10!important;animation-duration:6.2s;box-shadow:none!important}

/* Labor pressure: activity visibly thins and the field advances sluggishly. */
.world[data-binding-constraints*="labor"] .worker{opacity:.16!important;animation-duration:6.4s;filter:grayscale(.7)}
.world[data-binding-constraints*="labor"] .plants{animation-duration:8.5s!important;filter:saturate(.72)}
.world[data-binding-constraints*="labor"] .vehicle{animation-duration:6.8s!important;opacity:.58}
.world[data-binding-constraints*="labor"]::after{opacity:.14;inset:0!important;height:auto!important;background:linear-gradient(90deg,transparent 0 54%,#111b1633 76%,#09120dbb 100%)}

/* Capital pressure: machinery/infrastructure retreat from the world, not just the ledger. */
.world[data-binding-constraints*="capital"] .vehicle{opacity:.06!important;filter:grayscale(1) brightness(.55)!important;transform:translateY(18px) scale(.76)!important}
.world[data-binding-constraints*="capital"] .irrigation{opacity:.16!important;box-shadow:none!important}
.world[data-binding-constraints*="capital"] .plants>*:nth-child(3n){opacity:.35}
.world[data-binding-constraints*="capital"]::after{opacity:.18;inset:0!important;height:auto!important;background:linear-gradient(135deg,transparent 0 48%,#1b1712aa 100%)}

/* Market pressure: harvest world loses vigor without pretending the crop biologically failed. */
.world[data-binding-constraints*="market"] .plants{filter:saturate(.42) brightness(.86)}
.world[data-binding-constraints*="market"] .phase-badge{box-shadow:0 0 0 3px #ef8b7899 inset}
.world[data-binding-constraints*="market"]::after{opacity:.16;inset:0!important;height:auto!important;background:linear-gradient(0deg,#5c241f55,transparent 42%)}

/* Infeasible scale: large visible fallow share and nearly absent operational activity. */
.world[data-scale-feasible="false"]{filter:saturate(.34) brightness(.68) contrast(1.08)}
.world[data-scale-feasible="false"]::before{opacity:.72;inset:56% 0 0;background:repeating-linear-gradient(172deg,#5b4830aa 0 30px,#3f3125cc 31px 55px,#72573766 56px 60px)}
.world[data-scale-feasible="false"]::after{opacity:.30;inset:0!important;height:auto!important;background:linear-gradient(90deg,#111a1499 0 34%,transparent 62%)}
.world[data-scale-feasible="false"] .plants{opacity:.20!important;transform:translateY(20px) scale(.58)!important}
.world[data-scale-feasible="false"] .plants>*:nth-child(even){opacity:.03!important}
.world[data-scale-feasible="false"] .vehicle,.world[data-scale-feasible="false"] .worker{opacity:.05!important}
.world[data-scale-feasible="false"] .irrigation{opacity:.04!important;box-shadow:none!important}
.world[data-scale-feasible="false"] .activity::after{content:" · ทำได้ไม่เต็มแผน";color:#efb29f}

/* Experience-first composition authority now lives in fullscreen_compare_v1.html.
   Motion/depth layers may alter world-state appearance, but must not resize the page,
   timeline, insight layer, or responsive composition. */

/* FarmIPhoneViewportSupport@1
   Modern iPhone Safari/PWA uses viewport-fit=cover and dynamic browser chrome.
   Keep the app inside safe areas, use the dynamic viewport, preserve touch targets,
   and stack the comparison in portrait instead of forcing a desktop-width cockpit. */
@supports (height:100dvh){
  html,body{min-height:100dvh}
  .app{min-height:100dvh}
}

@media (pointer:coarse){
  button,select,input,summary{touch-action:manipulation}
  button,select,input,.utility-button,.decision-drawer>summary{min-height:44px}
  input[type="range"]{min-height:32px}
}

@media (max-width:759px) and (orientation:portrait){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
  .app{
    width:100%;max-width:none;margin:0;
    min-height:100dvh;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    gap:8px;
  }
  .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand clock" "actions actions";gap:7px;min-height:0;padding:7px;border-radius:12px}
  .brand{grid-area:brand}.clock{grid-area:clock;padding:5px 8px}.top-actions{grid-area:actions;justify-content:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto}.season{width:100%}
  .comparison-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-height:0}
  .compare-axis{display:none}
  .world-panel{grid-template-rows:auto minmax(250px,42dvh) auto;min-height:0;border-radius:14px}
  .selector{grid-template-columns:auto minmax(0,1fr);align-items:end;padding:7px;gap:6px}
  .selector .select-field{grid-column:auto}.area-chip{min-width:0}.side-label{min-height:44px}
  .world{min-height:250px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:1fr;min-height:0;padding:8px;gap:8px}
  .transport{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 8px}
  .transport:before{grid-column:1/-1}.transport #play{grid-column:1/-1}.transport .speed,.transport .scrub,.transport .daycode{grid-column:1/-1}
  .timeline-main{min-width:0}.time-scale{margin-left:72px}.lane{grid-template-columns:64px minmax(0,1fr);gap:5px}.lane-name{font-size:.65rem}.track{height:32px}
  .insight-layer{grid-template-columns:1fr;gap:8px}.insight-card{min-width:0}
  .resource-grid{grid-template-columns:1fr 1fr}
  .decision-actions{display:grid;grid-template-columns:1fr;gap:6px}.decision-actions button{width:100%}
  .app-footer{padding-bottom:env(safe-area-inset-bottom);grid-template-columns:auto 1fr}.footer-right{display:none}.footer-center{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:430px) and (orientation:portrait){
  .brand-copy small{display:none}
  .brand-copy strong{font-size:.86rem}
  .clock small{font-size:.58rem}.clock strong{font-size:.82rem}
  .world-panel{grid-template-rows:auto minmax(230px,40dvh) auto}
  .selector{grid-template-columns:1fr 1fr}
  .side-label,.area-chip{grid-column:span 1}
  .select-field{grid-column:span 1}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:6px}.fact strong{font-size:.7rem}
  .resource-grid{grid-template-columns:1fr}
}

@media (max-width:390px) and (orientation:portrait){
  .topbar{grid-template-columns:1fr}.brand,.clock,.top-actions{grid-area:auto}.clock{text-align:left}
  .top-actions{grid-template-columns:1fr}.utility-button{width:100%}
  .selector{grid-template-columns:1fr}.side-label,.area-chip,.select-field{grid-column:1}
  .world-panel{grid-template-rows:auto minmax(220px,38dvh) auto}
}

@keyframes farm-cloud-drift{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(16px,2px,0)}}
@keyframes farm-sun-breathe{from{transform:scale(.97);opacity:.68}to{transform:scale(1.04);opacity:.84}}
@keyframes farm-crop-sway{from{translate:-1px 0;rotate:-.8deg}to{translate:1px -1px;rotate:.8deg}}
@keyframes farm-crop-settle{from{translate:0 1px}to{translate:0 -1px}}
@keyframes farm-worker-bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(2px,-3px,0)}}
@keyframes farm-machine-work{from{transform:translate3d(-3px,0,0)}to{transform:translate3d(5px,-1px,0)}}
@keyframes farm-water-shimmer{from{opacity:.58;transform:scaleX(.985)}to{opacity:1;transform:scaleX(1)}}
@keyframes farm-harvest-settle{from{translate:0 0;opacity:.7}to{translate:2px 1px;opacity:.58}}
@media(prefers-reduced-motion:reduce){.world .cloud,.world .sky-glow,.world .plants,.world .vehicle,.world .worker,.world .irrigation{animation:none!important;transition:none!important}}