/* 4.3: original sea and cloud paintings, projected at the game's 75%-out view.
   Kept opaque until the actual texture/quiet-frame gate opens; no island loading pop-in. */
#gate,#gate[data-painted="true"]{z-index:1000;isolation:isolate;overflow:hidden;padding:20px;background:#386c7f;
 --loading-margin:32px;--loading-height:100vh;
 --loading-fit:min(calc(max(1px,100vw - var(--loading-margin)*2)/2160),calc(max(1px,var(--loading-height) - var(--loading-margin)*2)/1660));
 --sea-size:calc(var(--loading-fit)*1634.0429383145274);--cloud-width:calc(var(--loading-fit)*1545.4987396866466);--cloud-height:calc(var(--loading-fit)*890.4729066553921);
 --sea-x:calc(50vw - var(--loading-fit)*1086.6788013421734);--sea-y:calc(var(--loading-height)/2 - var(--loading-fit)*835.1327825129666);
 --cloud-x:calc(50vw - var(--loading-fit)*760.6751609395214);--cloud-y:calc(var(--loading-height)/2 - var(--loading-fit)*584.5929477590765);--cloud-alpha-a:.150206659807956;--cloud-alpha-b:0;}
@supports(height:100dvh){#gate{--loading-height:100dvh;}}
@media(max-width:699px){#gate{--loading-margin:16px;}}
#gate .loading-sea,#gate .loading-cloud{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;z-index:-2;}
#gate .loading-sea{background-image:url('../assets/packed/high/sea.webp');background-size:var(--sea-size) var(--sea-size);
 background-position:var(--sea-x) var(--sea-y);animation:loading-sea-drift 220s linear infinite;}
#gate .loading-cloud{z-index:-1;background-image:url('../assets/packed/high/veil.webp');background-size:var(--cloud-width) var(--cloud-height);}
#gate .cloud-bank-a{opacity:var(--cloud-alpha-a);background-position:var(--cloud-x) var(--cloud-y);animation:loading-cloud-a 120s linear infinite;}
#gate .cloud-bank-b{opacity:var(--cloud-alpha-b);background-position:calc(var(--cloud-x) - var(--cloud-width)*.5) calc(var(--cloud-y) - var(--cloud-height)*.5);animation:loading-cloud-b 190s linear infinite;}
#gate .loading-copy{text-align:center;width:100%;max-width:1500px;color:#fff3d4;pointer-events:none;}
#gate h1{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:clamp(16px,3.8vw,58px);line-height:1.25;letter-spacing:.012em;margin:0 0 19px;white-space:nowrap;
 text-shadow:0 2px 3px #163d4ad9,0 0 18px #163d4a80;}
#gate #gate-message{font-size:clamp(12px,1.35vw,19px);line-height:1.5;margin:0 auto;max-width:95%;min-height:1.5em;color:#f8efdb;text-shadow:0 1px 3px #123b48;}
#gate #setup-help{pointer-events:auto;width:min(610px,95%);margin:22px auto 0;border-top:1px solid #eddfb8aa;color:#fff0cf;text-shadow:0 1px 3px #123b48;}
#gate[data-status=error] #gate-message{color:#ffe4c5;font-weight:600;}
#gate[hidden] .loading-sea,#gate[hidden] .loading-cloud,#gate[data-loading=false] .loading-sea,#gate[data-loading=false] .loading-cloud{animation:none;}
@keyframes loading-sea-drift{to{background-position:calc(var(--sea-x) - var(--sea-size)) var(--sea-y);}}
@keyframes loading-cloud-a{to{background-position:calc(var(--cloud-x) - var(--cloud-width)) var(--cloud-y);}}
@keyframes loading-cloud-b{to{background-position:calc(var(--cloud-x) + var(--cloud-width)*.5) calc(var(--cloud-y) - var(--cloud-height)*.5);}}
@media(prefers-reduced-motion:reduce){#gate .loading-sea,#gate .loading-cloud{animation:none!important;}}
@media(max-width:400px){#gate{padding:12px;}#gate h1{font-size:clamp(14px,3.7vw,16px);letter-spacing:0;}}

#gate[data-still=true] .loading-sea,#gate[data-still=true] .loading-cloud{animation:none!important;}

/* A white, determinate bar below the actual loading status. No fake timed fill. */
#gate .loading-progress-row{width:min(420px,82vw);margin:22px auto 0;display:flex;align-items:center;gap:13px;}
#gate #gate-progress{flex:1;height:9px;border:1px solid #ffffffaa;border-radius:6px;background:#173f5038;overflow:hidden;}
#gate #gate-progress-fill{display:block;width:0%;height:100%;border-radius:5px;background:#fff;}
#gate #gate-percent{flex:0 0 3.5ch;min-width:3.5ch;color:#fff;font:700 15px/1.2 'Trebuchet MS',sans-serif;font-variant-numeric:tabular-nums;text-align:right;text-shadow:0 1px 3px #163d4a;}
#gate[data-status=error] #gate-progress{opacity:.55;}
/* 6.82: one quiet line naming optional art that could not load; the game still opens. */
#gate #gate-notice{width:min(560px,92%);margin:12px auto 0;font:400 clamp(12px,1.2vw,15px)/1.4 'Trebuchet MS',sans-serif;color:#ffe9c9;text-shadow:0 1px 3px #123b48;overflow-wrap:anywhere;}
#gate #gate-notice[hidden]{display:none;}
/* 6.84: the hosted error screen's Reload control is the one thing a visitor can do there, so it gets a full
   touch target. main.mjs fail() and the index.html fallback create it; a local copy never shows it. */
#gate #gate-reload684{min-height:44px;padding:10px 18px;font-size:15px;}

/* 6.19: text-only start prompt. Keep the native button and generous invisible
   hit target: native click/tap/Enter/Space still unlock audio exactly as in 6.18.
   Reserve the same space so verified loading completion never shifts the bar. */
#gate .loading-start-row{margin:23px auto 0;min-height:58px;display:flex;justify-content:center;align-items:center;}
#gate #gate-start{appearance:none;-webkit-appearance:none;pointer-events:auto;touch-action:manipulation;min-width:190px;min-height:52px;
 padding:13px 28px;border:0;border-radius:0;background:transparent;color:#fff3d4;
 font:400 clamp(16px,1.5vw,21px)/1.25 'Trebuchet MS',sans-serif;letter-spacing:0;
 text-shadow:0 1px 2px #163d4a;box-shadow:none;cursor:pointer;transform:none;text-decoration:none;
 transition:opacity .14s ease;}
#gate #gate-start[hidden]{display:none!important;}
/* 6.28: no underline on either prompt, including automatic/keyboard focus.
   A restrained text-only glow retains a focus cue without a frame or line. */
#gate #gate-start:focus-visible{outline:none;text-decoration:none;text-shadow:0 1px 2px #163d4a,0 0 7px #fff3d480;}
@media(hover:hover){#gate #gate-start:hover:not(:disabled){opacity:.85;}}
#gate #gate-start:active:not(:disabled){opacity:.7;}
/* Keep loading/error status untouched; suppress the redundant Ready label only. */
#gate[data-status="ready-to-start"] #gate-message{opacity:0;}
@media(prefers-reduced-motion:reduce){#gate #gate-start{transition:none;}}