/* Capas pintadas independientes. El tablero permanece fijo. */
.weather{--cloud-alpha:.28;--cloud-tone:.7;--wave-alpha:.65;--wave-time:6.8s;--wave-rise:-10px;--mist-alpha:0;--beam-alpha:.12;position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:paint}
.weather i{display:block;position:absolute;background-repeat:no-repeat;background-size:100% 100%;background-position:center;pointer-events:none}
.weather--field{z-index:-1}
.weather-sky{position:absolute;inset:0 0 47%;overflow:hidden;mask-image:linear-gradient(#000 72%,transparent);clip-path:polygon(0 0,100% 0,100% 49%,94% 53%,87% 61%,79% 63%,76% 56%,73% 60%,70% 65%,48% 65%,44% 61%,41% 55%,38% 59%,36% 65%,25% 65%,23% 58%,21% 59%,18% 65%,16% 63%,14% 53%,10% 51%,9.7% 51%,9.7% 25%,7% 25%,7% 45%,4% 43%,2% 47%,0 48%)}
.weather-cloud{background-image:url('./assets/ambientes/capas/nubes-v1.webp');filter:brightness(var(--cloud-tone)) saturate(.65)}
.cloud-far{left:-23%;top:-37%;width:130%;height:110%;opacity:var(--cloud-alpha);animation:weather-cloud-far 64s ease-in-out infinite alternate}
.cloud-near{left:-13%;top:-24%;width:146%;height:120%;opacity:calc(var(--cloud-alpha)*.8);animation:weather-cloud-near 43s ease-in-out infinite alternate;animation-delay:-18s}
.weather-water{position:absolute;inset:33% 0 44%;overflow:hidden;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.weather-foam{background-image:url('./assets/ambientes/capas/espuma-v1.webp');opacity:var(--wave-alpha);animation:weather-surf var(--wave-time) ease-in-out infinite}
.foam-far{left:9%;top:-13%;width:80%;height:75%;--surf-x:12px;--surf-scale:1.06;animation-delay:-3.3s;opacity:calc(var(--wave-alpha)*.65)}
.foam-near{left:-6%;top:25%;width:115%;height:95%;--surf-x:-22px;--surf-scale:1.04;animation-delay:-1s}
.foam-side{left:-17%;top:8%;width:45%;height:110%;--surf-x:16px;--surf-scale:1.12;animation-delay:-5s}
.weather-glints{left:15%;right:6%;top:5%;bottom:3%;background:repeating-linear-gradient(176deg,transparent 0 16px,#dfdfbc29 17px 18px,transparent 19px 31px);mask-image:radial-gradient(ellipse,#0008,transparent 70%);animation:weather-glimmer 8s ease-in-out infinite;opacity:.4}
.weather-fog{position:absolute;inset:26% 0 43%;overflow:hidden;opacity:var(--mist-alpha);mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.weather-mist{background-image:url('./assets/ambientes/capas/bruma-v1.webp')}
.mist-far{left:-24%;top:-35%;width:132%;height:140%;opacity:.7;animation:weather-mist-far 33s ease-in-out infinite alternate;animation-delay:-12s}
.mist-near{left:-7%;top:5%;width:125%;height:125%;opacity:.65;animation:weather-mist-near 24s ease-in-out infinite alternate}
.weather-beacon{position:absolute;inset:0;opacity:var(--beam-alpha)}
.weather-beam{left:8.1%;top:5%;width:92%;height:24%;transform-origin:0 50%;clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(90deg,#ffe7a5bb,#ffe1a333 40%,#ffe1a300);mix-blend-mode:screen;animation:weather-beacon 19s ease-in-out infinite alternate}
.weather-lantern{left:7.3%;top:14.8%;width:1.8%;height:4.8%;border-radius:50%;background:radial-gradient(ellipse,#fff6c9ba,#ffc86c4a 35%,transparent 72%);animation:weather-lantern 7s ease-in-out infinite}
.weather-reflection{left:37%;top:35%;width:24%;height:19%;opacity:0;background:repeating-linear-gradient(176deg,transparent 0 7px,#fbd28866 8px 9px,transparent 11px 17px);clip-path:polygon(35% 0,61% 0,100% 100%,0 100%);mask-image:linear-gradient(transparent,#000a,transparent);animation:weather-reflection 8s ease-in-out infinite}
.weather[data-weather="puerto-sereno"]{--cloud-alpha:.36;--cloud-tone:1.12;--wave-alpha:.22;--wave-time:10s;--wave-rise:-4px;--beam-alpha:0}
.weather[data-weather="puerto-sereno"] .weather-glints{opacity:.7}
.weather[data-weather="paso-brumoso"]{--cloud-alpha:.22;--cloud-tone:.7;--wave-alpha:.24;--wave-time:9s;--wave-rise:-5px;--mist-alpha:.75;--beam-alpha:.25}
.weather[data-weather="faro-encendido"]{--cloud-alpha:.24;--cloud-tone:.44;--wave-alpha:.5;--wave-time:8s;--wave-rise:-7px;--mist-alpha:.16;--beam-alpha:.85}
.weather[data-weather="faro-encendido"] .weather-reflection{opacity:.5}
.weather[data-weather="faro-encendido"] .weather-lantern{scale:1.4}
.weather[data-weather="puerto-sereno"] .weather-fog,.weather[data-weather="dique-expuesto"] .weather-fog{display:none}
.weather--continuation{z-index:1}
.weather--continuation .weather-sky{bottom:auto;height:calc(var(--field-top) + var(--field-height)*.25);clip-path:none}
.weather--continuation .weather-water{top:auto;bottom:-4%;height:calc(var(--field-bottom) + var(--field-height)*.18);mask-image:linear-gradient(transparent,#000 25%)}
.weather--continuation .foam-far{top:0;height:60%;width:95%;left:-6%}
.weather--continuation .foam-near{top:24%;height:95%;width:112%;left:-4%;animation-delay:-4s}
.weather--continuation .foam-side{display:none}
.weather--continuation .weather-fog,.weather--continuation .weather-beacon,.weather--continuation .weather-reflection{display:none}
.weather--continuation .cloud-far{top:-10%;height:150%}
.weather--continuation .cloud-near{top:0;height:170%}
.weather--continuation .weather-glints{top:28%}
.menu-screen:has(>.menu-atmosphere){position:relative;isolation:isolate;background:#102832}
.menu-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.menu-scene{position:absolute;left:0;top:0;height:100%;width:auto;min-width:100%;aspect-ratio:1672 / 941;isolation:isolate}
.menu-paint{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.menu-atmosphere::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10283375,#102833ee 48%,#0d2532f5)}
.home-screen .menu-atmosphere::after{background:linear-gradient(90deg,#10283308,#102833a6 43%,#0d2532eb 80%)}
.ending-screen .menu-atmosphere::after{background:linear-gradient(90deg,#0e2934e8,#0e2934a6)}
.weather--menu .weather-water{bottom:42%}
.weather--menu::after{content:'';position:absolute;left:0;right:0;bottom:-2%;height:23%;background:url('./assets/ambientes/capas/espuma-v1.webp') center/100% 100% no-repeat;opacity:calc(var(--wave-alpha)*.65);animation:weather-surf var(--wave-time) ease-in-out infinite;--surf-x:16px;--surf-scale:1.04}
/* La imagen extendida ya no necesita desplazarse para simular movimiento. */
#game .environment-sky svg,#game .environment-sea svg{animation:none;transform:none;width:100%;height:100%;margin:0}
.weather~.sea-motion,.field>.sea-motion,.field>.lighthouse-glow{display:none}
#game[data-theme="faro-encendido"] .landscape,#game[data-theme="faro-encendido"] .environment-sky,#game[data-theme="faro-encendido"] .environment-sea{filter:brightness(.94) saturate(.9)}
@keyframes weather-cloud-far{from{transform:translateX(-3%)}to{transform:translateX(18%)}}
@keyframes weather-cloud-near{from{transform:translateX(12%)}to{transform:translateX(-9%)}}
@keyframes weather-surf{0%,100%{transform:translate(0,2px) scaleX(1);opacity:calc(var(--wave-alpha)*.4)}45%{transform:translate(var(--surf-x),var(--wave-rise)) scaleX(var(--surf-scale));opacity:var(--wave-alpha)}}
@keyframes weather-glimmer{0%,100%{transform:translateX(-9px);opacity:.25}50%{transform:translateX(12px);opacity:.6}}
@keyframes weather-mist-far{from{transform:translateX(-3%)}to{transform:translateX(17%)}}
@keyframes weather-mist-near{from{transform:translateX(2%)}to{transform:translateX(-20%)}}
@keyframes weather-beacon{0%{transform:rotate(-12deg) scaleY(.3);opacity:.25}40%{opacity:.85}100%{transform:rotate(13deg) scaleY(1);opacity:.4}}
@keyframes weather-lantern{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes weather-reflection{0%,100%{transform:translateX(-5px) scaleX(.84)}50%{transform:translateX(6px) scaleX(1.08)}}
#game[data-paused=true] .weather *,#game[data-paused=true] .weather::after,body:has(dialog[open]) .weather *,body:has(dialog[open]) .weather::after{animation-play-state:paused}
#game[data-reduced=true] .weather *,#game[data-reduced=true] .weather::after{animation:none}
#game[data-reduced=true] .weather-foam,#game[data-reduced=true] .weather-glints{opacity:calc(var(--wave-alpha)*.4)}
#game[data-reduced=true] .weather-beam{transform:rotate(-5deg);opacity:.4}
@media(prefers-reduced-motion:reduce){#game:not([data-reduced=false]) .weather *,#game:not([data-reduced=false]) .weather::after{animation:none}}
@media(max-width:700px){.home-screen .menu-atmosphere::after{background:linear-gradient(#1028337a,#0d2532e8 48%,#0d2532f5)}.menu-atmosphere::after{background:#102833e0}.ending-screen .menu-atmosphere::after{background:linear-gradient(#0e2934d0,#0e2934eb)}.weather--continuation .cloud-far{width:195%;left:-55%;opacity:calc(var(--cloud-alpha)*.65)}.weather--continuation .cloud-near{width:210%;left:-50%;opacity:calc(var(--cloud-alpha)*.6)}}