.voyage{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:radial-gradient(ellipse at 40% 30%,#367e83,#173f50);color:#fff0ce;overflow:hidden;outline:none;box-shadow:none}
.voyage::backdrop{background:#173f50}
.voyage-map{position:absolute;width:100%;height:calc(100% - 145px);top:95px;left:0;object-fit:contain}
.voyage-heading{position:absolute;top:max(25px,env(safe-area-inset-top));left:0;right:0;text-align:center;z-index:1}
.voyage-heading small{letter-spacing:.25em;font-size:11px;color:#b6d3c6;font-weight:800}
.voyage-heading h1{font-family:Georgia,serif;font-size:clamp(25px,5vw,36px);margin:8px 0}
.voyage-status{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:0;right:0;margin-inline:auto;text-align:center;font-size:14px;color:#e5dfc2}
.destination-ring{stroke-dasharray:5 9}

/* The tenth island ends in a storm, then dawn on familiar shores. */
.storm-weather,.storm-dark,.storm-home{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}.storm-weather{z-index:2;background:#13273455}.storm-weather svg{width:100%;height:100%}.storm-dark{z-index:3;background:#14252d}.storm-home{z-index:4;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#729d94,#315f67 65%,#233f48)}.storm-home svg{width:min(80%,480px);height:auto;filter:drop-shadow(0 12px 20px #183e4966)}.storm-voyage .voyage-heading,.storm-voyage .voyage-status{z-index:5}.storm-voyage .voyage-status{max-width:420px;width:calc(100% - 40px);line-height:1.5;white-space:normal}.storm-voyage[data-storm-phase=storm] .storm-weather{opacity:1}.storm-voyage[data-storm-phase=lost] .storm-dark{opacity:1}.storm-voyage[data-storm-phase=home] .storm-home{opacity:1}.storm-voyage #voyage-ship{transition:opacity .8s}.storm-voyage[data-storm-phase=storm] .storm-weather svg{animation:storm-rain 1s linear infinite}@keyframes storm-rain{from{transform:translate(8px,-15px)}to{transform:translate(-8px,15px)}}@media(prefers-reduced-motion:reduce){.storm-voyage *{animation:none!important;transition:none!important}}

/* Overscan the weather and feather cloud banks to avoid hard SVG boundaries. */
.storm-weather{inset:-50px;overflow:hidden;background:linear-gradient(#13273488,#13273422)}.storm-weather::before{content:"";position:absolute;inset:-8% -15% 20%;background:radial-gradient(ellipse at 14% 25%,#172b35 0 12%,#172b35bb 24%,transparent 46%),radial-gradient(ellipse at 49% 9%,#172b35 0 18%,#20353dcc 34%,transparent 57%),radial-gradient(ellipse at 88% 29%,#172b35 0 15%,#213840bb 29%,transparent 49%);filter:blur(12px);pointer-events:none}.storm-weather svg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px)}

/* A tiled rain texture travels exactly one repeat per loop, without resetting visibly. */
.storm-weather svg{display:none}.storm-weather::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='128' viewBox='0 0 96 128'%3E%3Cg stroke='%239ebbbc' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M24 -16l-18 24M72 48l-18 24M24 112l-18 24'/%3E%3C/g%3E%3C/svg%3E");background-size:96px 128px;background-repeat:repeat}.storm-voyage[data-storm-phase=storm] .storm-weather::after{animation:storm-rain-flow .85s linear infinite}@keyframes storm-rain-flow{from{background-position:0 0}to{background-position:-96px 128px}}@media(prefers-reduced-motion:reduce){.storm-weather::after{animation:none!important}}

.storm-voyage:is([data-storm-phase=lost],[data-storm-phase=home]) #voyage-route,.storm-voyage:is([data-storm-phase=lost],[data-storm-phase=home]) .voyage-route-guide{visibility:hidden}

/* Keep the outgoing map concealed throughout the dawn reveal. */
.storm-voyage:is([data-storm-phase=lost],[data-storm-phase=home]) .voyage-map{visibility:hidden}.storm-voyage[data-storm-phase=home] .storm-dark{opacity:1}