/* The original cover images are kept intact. The frame has their exact aspect
   ratio, so native controls remain on the illustrated buttons at every size. */
:root{--cover-ratio:1672/941;--cover-start-x:35.8%;--cover-start-y:74%;--cover-start-w:28.4%;--cover-start-h:10.5%;--cover-menu-y:87.4%;--cover-menu-w:8.9%;--cover-menu-h:7.3%;--cover-map-x:34.7%;--cover-achievement-x:44.9%;--cover-settings-x:55.2%;--cover-backdrop:url('./art/cover/homepage-desktop-clean-menu.webp')}
#loading,#welcome{position:absolute;inset:0;padding:0;background:#bad6d9;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
/* Extend the same art behind the intact frame; the overscan keeps blur edges
   outside the viewport, and this decorative layer never receives input. */
#loading::before,#welcome::before{content:'';position:absolute;inset:-48px;z-index:0;background-image:var(--cover-backdrop);background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(28px) saturate(.94);transform:scale(1.04);pointer-events:none}
#loading{z-index:30;transition:opacity .6s}
#welcome{z-index:8;pointer-events:none}
.cover-frame{position:relative;z-index:1;width:min(100vw,calc(100svh * 1672 / 941));aspect-ratio:var(--cover-ratio);isolation:isolate}
.cover-art,.cover-art img{display:block;width:100%;height:100%}.cover-art{position:absolute;inset:0;z-index:-1}.cover-art img{object-fit:contain}
/* Feather only the edge that meets the extended background. Native controls
   sit outside this mask and the original title/menu remain crisp. */
.cover-art{--cover-edge-mask:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent);-webkit-mask-image:var(--cover-edge-mask);mask-image:var(--cover-edge-mask)}
@media (orientation:landscape) and (max-aspect-ratio:1672/941),(orientation:portrait) and (max-aspect-ratio:941/1672){.cover-art{--cover-edge-mask:linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 18px),transparent)}}
#welcome .welcome-bottom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#welcome #start,#welcome .welcome-home-choice,.cover-hotspot{position:absolute;pointer-events:auto;display:block;padding:0;margin:0;min-width:0;min-height:44px;border:0;box-shadow:none;border-radius:999px;background:transparent;color:transparent;font-size:0;line-height:1;transform:none}
#welcome #start{left:var(--cover-start-x);top:var(--cover-start-y);width:var(--cover-start-w);height:var(--cover-start-h)}
#welcome .welcome-home-choice,.cover-hotspot{top:var(--cover-menu-y);width:var(--cover-menu-w);height:var(--cover-menu-h)}
#welcome .welcome-home-choice{left:var(--cover-map-x)}#coverSettings{left:var(--cover-settings-x)}
#welcome #start:focus-visible,#welcome .welcome-home-choice:focus-visible,.cover-hotspot:focus-visible{outline:3px solid #fffadb;outline-offset:2px;box-shadow:0 0 0 7px #b78e4544}
#welcome #start:hover:not(:disabled),#welcome .welcome-home-choice:hover:not(:disabled),.cover-hotspot:hover:not(:disabled){background:#fff9d921;box-shadow:0 0 22px #fff4c33b}
#welcome #start:disabled,#welcome .welcome-home-choice:disabled,.cover-hotspot:disabled{cursor:wait;opacity:1}
.cover-unavailable{position:absolute;left:var(--cover-achievement-x);top:var(--cover-menu-y);width:var(--cover-menu-w);height:var(--cover-menu-h);border-radius:999px;background:#d9e5de75;backdrop-filter:saturate(.2);pointer-events:none}
.cover-loading-status{position:absolute;left:var(--cover-start-x);top:var(--cover-start-y);width:var(--cover-start-w);height:var(--cover-start-h);min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:6px 12px;background:#fff0c9;border:2px solid #ffe4a5;box-shadow:0 0 0 3px #fff8dd77;border-radius:999px;color:#956931;font-size:clamp(12px,1.7vw,22px);line-height:1.25}
.cover-loading-status p{font:inherit;letter-spacing:.02em;margin:0!important}.cover-loading-status progress{display:block;width:62%;height:4px;border:0;border-radius:4px;overflow:hidden;accent-color:#c59e54;background:#e7d5ad}.cover-loading-status progress::-webkit-progress-bar{background:#e7d5ad}.cover-loading-status progress::-webkit-progress-value{background:#ba9c55}
.cover-loading-help{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(320px,calc(100vw - 32px));padding:6px 10px;background:#fffbeedb;border:1px solid #fff4d9;border-radius:12px;font-size:12px;line-height:1.5;color:#597668}
.cover-retry{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;min-height:44px;padding:8px 17px;border:1px solid #eed196;border-radius:999px;background:#fff4d6;color:#775d30;font:inherit;font-size:14px;cursor:pointer;box-shadow:0 3px 12px #5e756327}
.cover-retry-fallback{position:static;transform:none;margin:12px auto}
#game[data-mode=loading] #top,#game[data-mode=welcome] #top{visibility:hidden}
#game[data-error] .cover-loading-status{height:auto;min-height:var(--cover-start-h);padding:12px;border-radius:18px;font-size:14px}
#game[data-error] .cover-loading-status progress{display:none}
@media(orientation:portrait){:root{--cover-ratio:941/1672;--cover-start-x:24.5%;--cover-start-y:82.75%;--cover-start-w:52.3%;--cover-start-h:6.65%;--cover-menu-y:91.65%;--cover-menu-w:20%;--cover-menu-h:5%;--cover-map-x:16.25%;--cover-achievement-x:39.55%;--cover-settings-x:63.3%;--cover-backdrop:url('./art/cover/homepage-portrait-clean-menu.webp')}.cover-frame{width:min(100vw,calc(100svh * 941 / 1672));aspect-ratio:var(--cover-ratio)}.cover-loading-status{font-size:clamp(12px,3.6vw,20px);gap:3px}#game[data-error] .cover-loading-status{font-size:12px}}
/* The menu-free artwork contains the complete cloud scene. */
#welcome .cover-sound{position:absolute;z-index:3;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));pointer-events:auto;min-width:110px;min-height:44px;padding:10px 16px;border:1px solid #fff9ddbb;border-radius:99px;background:#fff9e9da;color:#476b64;box-shadow:0 3px 15px #315d7020;backdrop-filter:blur(12px);font:inherit;font-size:15px;line-height:1.4;touch-action:manipulation}
#welcome .cover-sound:focus-visible{outline:3px solid #fff;outline-offset:3px}
#welcome .cover-sound[aria-pressed=true]{background:#e2eee9df}
@media(orientation:portrait){#welcome .cover-sound{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));font-size:14px}}
@media(prefers-reduced-motion:reduce){#loading{transition:none}}