/* V4 – coherent, restrained motion across all app views. No scrolling/parallax JS, no continuous layout thrash. */
:root{--v4-surface:#0d1b24;--v4-gold:#d8ac68;--v4-ease:cubic-bezier(.22,1,.36,1);--v4-soft-shadow:0 20px 48px -25px #000c}
html{scroll-behavior:smooth}body{background-image:radial-gradient(ellipse 70% 42% at 75% -18%,rgba(182,129,60,.09),transparent),radial-gradient(ellipse 40% 50% at 0 50%,rgba(53,103,126,.10),transparent)}
.app-main{min-width:0}.page{position:relative;isolation:isolate}.page:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(114deg,transparent 25%,rgba(212,157,77,.025) 48%,transparent 71%);background-size:200% 100%;animation:v4-ambient 38s linear infinite}
.card,.mv2-item,.world-player-row,.warehouse-summary-card,.research-card{transform:translateZ(0);transition:border-color .3s ease,background-color .3s ease,box-shadow .32s ease,transform .32s var(--v4-ease)}
.card.hoverable:hover,.mv2-item:hover,.world-player-row:hover,.warehouse-summary-card:hover,.research-card:hover{transform:translateY(-3px);border-color:rgba(215,170,103,.55);box-shadow:var(--v4-soft-shadow)}
/* Easing-based entrance for all major components, not permanent per-element blinking. */
body.ui-ready .page > .card:not(.hidden),body.ui-ready .page > section:not(.hidden),body.ui-ready .page > article:not(.hidden),body.ui-ready .page-head,body.ui-ready #portalView:not(.hidden),body.ui-ready .worldmap-stage{animation:v4-rise .66s var(--v4-ease) both}
body.ui-ready .page > :nth-child(2){animation-delay:.07s!important}body.ui-ready .page > :nth-child(3){animation-delay:.12s!important}body.ui-ready .page > :nth-child(4){animation-delay:.17s!important}
body.ui-ready .portal-section:not(.hidden),body.ui-ready .colony-section:not(.hidden),body.ui-ready [data-section-panel]:not(.hidden){animation:v4-rise .38s var(--v4-ease) both}
.portal-two-col>.card:nth-child(2),.portal-two-col>article:nth-child(2){animation-delay:.09s!important}
.side-nav{background-image:radial-gradient(circle at 55% 0,rgba(200,147,70,.09),transparent 40%)}.side-brand{position:relative;overflow:hidden}.side-brand:after{content:"";position:absolute;bottom:0;left:8px;right:8px;height:1px;background:linear-gradient(90deg,transparent,var(--v4-gold),transparent);opacity:.42}
.nav-link,.dk-topnav a,.mobile-bottom-nav a{transition:background-color .22s,border-color .22s,color .22s,transform .22s var(--v4-ease)}.nav-link:hover,.dk-topnav a:hover{transform:translateX(3px)}.dk-topnav a:after{content:"";display:block;position:absolute;bottom:3px;left:10px;right:10px;height:2px;transform:scaleX(0);transform-origin:center;background:linear-gradient(90deg,transparent,var(--v4-gold),transparent);transition:transform .32s var(--v4-ease)}.dk-topnav a{position:relative}.dk-topnav a.active:after,.dk-topnav a:hover:after{transform:scaleX(1)}
button,.btn,a.btn{transition:background-color .2s,border-color .2s,box-shadow .24s,transform .24s var(--v4-ease),color .2s}button:hover:not(:disabled),.btn:hover:not(:disabled){box-shadow:0 6px 18px #0005}button:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}.btn.primary,.primary,button.primary{position:relative;overflow:hidden}.btn.primary:after,.primary:after,button.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff4 48%,transparent 75%);transform:translateX(-160%);transition:transform .75s var(--v4-ease);pointer-events:none}.btn.primary:hover:after,.primary:hover:after,button.primary:hover:after{transform:translateX(160%)}
input,select,textarea{transition:border-color .22s,box-shadow .22s,background-color .22s}input:hover,select:hover,textarea:hover{border-color:#60717b}input:focus,select:focus,textarea:focus{border-color:var(--v4-gold)!important;box-shadow:0 0 0 3px rgba(216,172,104,.12)!important;outline:none}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #e5c78e!important;outline-offset:3px}
.progress>span,.mv2-full-progress>span,.coverage-bar>i{transition:width .66s var(--v4-ease)!important;background-size:200% 100%}.skeleton{background:linear-gradient(108deg,#1a2831 8%,#35424c 22%,#192830 36%);background-size:280% 100%;animation:v4-skeleton 1.75s ease-in-out infinite}
/* Dynamic content: MutationObserver adds v4-enter for truly new rows, with a small capped stagger. */
.v4-enter:not(.hidden){animation:v4-rise .48s var(--v4-ease) both;animation-delay:var(--v4-delay,0ms)}
.mv2-item .icon,.item-card .icon,.research-card .icon{transition:transform .3s var(--v4-ease)}.mv2-item:hover .icon,.item-card:hover .icon,.research-card:hover .icon{transform:scale(1.08) rotate(-2deg)}
.modal:not(.hidden),dialog[open],.mobile-more-sheet:not(.hidden) .mobile-sheet-card{animation:v4-dialog .3s var(--v4-ease) both}.toast{animation:v4-toast .28s var(--v4-ease) both}.page-leaving .app-main{animation:v4-out .13s ease-in both}
.mv2-hero,#portalHero,.dk-home-hero{position:relative;overflow:hidden}.mv2-hero:before,#portalHero:before{pointer-events:none}
@keyframes v4-rise{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes v4-dialog{from{opacity:.3;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v4-toast{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:translateX(0)}}
@keyframes v4-out{to{opacity:.4;transform:translateY(4px)}}
@keyframes v4-ambient{from{background-position:150% 0}to{background-position:-150% 0}}
@keyframes v4-skeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:900px){.nav-link:hover,.dk-topnav a:hover{transform:none}.v4-enter:not(.hidden){animation-duration:.3s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.page:before{display:none}}
.v4-verified{border:1px solid #997540!important;border-radius:13px;padding:16px;background:linear-gradient(135deg,#22231c,#13232b)}.v4-recipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:7px;margin-top:12px;max-height:620px;overflow:auto}.v4-recipe-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid #384751;background:#10202a;border-radius:9px;text-decoration:none;transition:background-color .2s,transform .2s}.v4-recipe-row:hover{background:#1c3542;transform:translateY(-2px)}.v4-recipe-row strong,.v4-recipe-row small{display:block;overflow-wrap:anywhere}.v4-recipe-row small{color:var(--muted);font-size:11px}.v4-recipe-row .badge{flex-shrink:0}.v4-checking{display:inline-block;animation:v4-rotate 1.8s linear infinite}@keyframes v4-rotate{to{transform:rotate(360deg)}}
body.ui-ready{animation:v4-body .34s ease-out both}
@keyframes v4-body{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.ui-ready{animation:none!important}}

/* 0.4.17: performance-first layout. Large pages must not repaint their full height
   or keep hundreds of card layers / weather particles animating indefinitely. */
body.ui-ready,body.page-leaving{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
.page:before{display:none!important;animation:none!important}
body.ui-ready .page > .card:not(.hidden),body.ui-ready .page > section:not(.hidden),body.ui-ready .page > article:not(.hidden),body.ui-ready .page-head,body.ui-ready #portalView:not(.hidden),body.ui-ready .worldmap-stage,
body.ui-ready .portal-section:not(.hidden),body.ui-ready .colony-section:not(.hidden),body.ui-ready [data-section-panel]:not(.hidden),.v4-enter:not(.hidden){animation:none!important;animation-delay:0ms!important;opacity:1!important;transform:none!important}
.card,.mv2-item,.world-player-row,.warehouse-summary-card,.research-card{transform:none!important;will-change:auto!important}
.card.hoverable:hover,.mv2-item:hover,.world-player-row:hover,.warehouse-summary-card:hover,.research-card:hover{transform:none!important}
.reference-cloud,.reference-cloud.c1,.reference-cloud.c2,.reference-cloud.c3,
.weather-rain,.weather-snow,.weather-fog,.weather-lightning,.reference-scene[data-weather] .reference-cloud{animation:none!important;will-change:auto!important}
/* Keep sky color and weather status, but don't rasterize full-screen animated rain/fog.
   The static texture is only visible inside the hero, not over the entire page. */
/* Cloud translate is animated only inside #heroTop; no global translate lock. */
.reference-scene:not(#heroTop) .weather-fog{filter:none!important}
#portalHero:before,.skeleton,.skeleton:after{animation:none!important;will-change:auto!important}
/* Three stationary clouds retain the sky composition without frame-by-frame GPU work. */
.reference-scene .reference-cloud.c1{left:15%!important}
.reference-scene .reference-cloud.c2{left:48%!important}
.reference-scene .reference-cloud.c3{left:77%!important}


/* 0.4.18: ONLY the landing Hero is animated. No animation on body or .page.
   Cloud movement uses an independent composited translate; rain/snow move a small
   texture layer with transform instead of re-painting background-position. */
#heroTop.reference-scene{overflow:hidden;contain:paint}
#heroTop .reference-sky-motion,#heroTop .reference-weather{overflow:hidden;pointer-events:none}
#heroTop .reference-cloud.c1,#heroTop .reference-cloud.c2,#heroTop .reference-cloud.c3{
  animation-name:beta3CloudDrift!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-play-state:paused!important;
  animation-direction:var(--cloud-direction,normal)!important;
  will-change:auto!important;
}
#heroTop .reference-cloud.c1{left:-24%!important;animation-duration:var(--cloud-duration-back,150s)!important;animation-delay:-63s!important}
#heroTop .reference-cloud.c2{left:-38%!important;animation-duration:var(--cloud-duration-mid,205s)!important;animation-delay:-117s!important}
#heroTop .reference-cloud.c3{left:-30%!important;animation-duration:var(--cloud-duration-front,118s)!important;animation-delay:-51s!important}
#heroTop.hero-motion-active .reference-cloud{animation-play-state:running!important;will-change:translate!important}

/* Paint only within #heroTop and only for the actual weather type. */
#heroTop .weather-rain,#heroTop .weather-snow{
  inset:0!important;overflow:hidden;background:none!important;animation:none!important;
  filter:none!important;mix-blend-mode:normal!important;will-change:auto!important;
}
#heroTop:not([data-weather="rain"]):not([data-weather="thunder"]) .weather-rain,
#heroTop:not([data-weather="snow"]) .weather-snow,
#heroTop:not([data-fog="1"]):not([data-weather="fog"]) .weather-fog{display:none!important}
#heroTop .weather-rain::before{
  content:"";position:absolute;inset:-150px -22px;
  background-image:repeating-linear-gradient(108deg,transparent 0 10px,rgba(225,239,248,.50) 11px 12px,transparent 13px 27px),
                   repeating-linear-gradient(110deg,transparent 0 19px,rgba(177,211,231,.32) 20px 21px,transparent 22px 45px)!important;
  background-size:40px 64px,64px 128px;
  opacity:.84!important;animation:none!important;filter:none!important;
  transform:translate3d(0,-64px,0);will-change:auto!important;
}
#heroTop .weather-rain::after{mix-blend-mode:normal!important}
@keyframes heroOnlyRainFlow{from{transform:translate3d(0,-64px,0)}to{transform:translate3d(0,64px,0)}}
#heroTop.hero-motion-active:is([data-weather="rain"],[data-weather="thunder"]) .weather-rain::before{
  animation:heroOnlyRainFlow 1.35s linear infinite!important;will-change:transform!important
}
#heroTop .weather-snow::before{
  content:"";position:absolute;inset:-190px -20px;
  background-image:radial-gradient(circle,#fffd 0 2px,transparent 2.6px),
                   radial-gradient(circle,#e9f3f6bf 0 1.5px,transparent 2px),
                   radial-gradient(circle,#fff8 0 1px,transparent 1.7px)!important;
  background-size:72px 88px,112px 176px,48px 44px;
  animation:none!important;transform:translate3d(0,-88px,0);will-change:auto!important
}
@keyframes heroOnlySnowFlow{from{transform:translate3d(0,-88px,0)}to{transform:translate3d(0,88px,0)}}
#heroTop.hero-motion-active[data-weather="snow"] .weather-snow::before{
  animation:heroOnlySnowFlow 7s linear infinite!important;will-change:transform!important
}
#heroTop .weather-fog{filter:blur(18px) saturate(.82)!important;animation:none!important;will-change:auto!important;transform:translateZ(0);mix-blend-mode:screen}
#heroTop.hero-motion-active:is([data-fog="1"],[data-weather="fog"]) .weather-fog.fog-a{
  animation:heroFogA 44s ease-in-out infinite alternate!important;will-change:transform!important
}
#heroTop.hero-motion-active:is([data-fog="1"],[data-weather="fog"]) .weather-fog.fog-b{
  animation:heroFogB 58s ease-in-out infinite alternate-reverse!important;will-change:transform!important
}
#heroTop .weather-lightning.flash{animation:none!important}
#heroTop.hero-motion-active[data-weather="thunder"] .weather-lightning.flash{
  animation:heroLightning .72s ease-out both!important
}
@media(prefers-reduced-motion:reduce){
  #heroTop .reference-cloud.c1{left:15%!important}
  #heroTop .reference-cloud.c2{left:48%!important}
  #heroTop .reference-cloud.c3{left:77%!important}
  #heroTop .reference-cloud,#heroTop .reference-cloud.c1,#heroTop .reference-cloud.c2,#heroTop .reference-cloud.c3,
  #heroTop .weather-rain::before,#heroTop .weather-snow::before,#heroTop .weather-fog,
  #heroTop .weather-lightning.flash{animation:none!important;will-change:auto!important}
}