.loading-splash{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#17604e;color:#31513d;overflow:hidden;transition:opacity .35s ease;isolation:isolate}
.loading-splash::before,.loading-splash::after{content:none}
.demo-end-screen{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:#17604e;box-shadow:none;overflow:hidden}
.demo-end-screen[open]{display:block}
.demo-end-screen::backdrop{background:#17604e}
.demo-store-link{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:min(88vw,390px);min-height:60px;padding:16px 22px;border:2px solid #d7b15e;border-radius:18px;background:#fff2d2;color:#244c3c;box-shadow:0 4px 0 #967746,0 6px 20px #173e3b55;font:900 19px/1.3 'Nunito',system-ui,sans-serif;text-decoration:none;text-align:center}
.demo-store-link:focus-visible{outline:3px solid #fff5ce;outline-offset:5px}
.demo-store-link:active{transform:translate(-50%,2px);box-shadow:0 2px 0 #967746}
/* Fill the vertical frame; crop spare side scenery instead of letterboxing.
   On desktop retain a portrait art column rather than cropping its title. */
.splash-scene{position:absolute;inset:0;margin:auto;width:min(100%,calc(100dvh * .5625));height:100%;object-fit:cover;object-position:center;pointer-events:none}
.loading-details{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);display:grid;justify-items:center;gap:5px;width:min(88vw,390px);max-height:35dvh;overflow-y:auto;padding:12px 16px;border:1px solid #e7ba59;border-radius:16px;background:#fff2d2ed;box-shadow:0 3px 12px #31513d33}
.app-version{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.4px;opacity:.8;margin:8px 0 0;text-align:center}
.loading-details progress{appearance:none;width:100%;height:12px;border:2px solid #a6ae8266;border-radius:10px;overflow:hidden;background:#14352f}
.loading-details progress::-webkit-progress-bar{background:#14352f}.loading-details progress::-webkit-progress-value{background:linear-gradient(90deg,#b5bd78,#ead18b);border-radius:8px;transition:width .2s ease}.loading-details progress::-moz-progress-bar{background:#d6c785}
#loading-status{margin:0;min-height:22px;font-size:14px;font-weight:800;letter-spacing:.3px;text-align:center}.loading-splash.leaving{opacity:0;pointer-events:none}
#loading-retry{border:2px solid #b4b983;border-radius:12px;background:#efdfad;padding:12px 24px;color:#345345;font:inherit;font-weight:900;min-height:44px}
.pause-dialog .pause-logo{display:block;width:min(100%,290px);height:auto;max-height:28dvh;object-fit:contain;margin:0 auto 8px}.pause-dialog{max-height:90dvh;overflow-y:auto}.pause-dialog h2{margin:6px 0}.pause-dialog>p{margin:6px 0 16px}
@media(prefers-reduced-motion:reduce){.splash-logo{animation:none}.loading-splash{transition:none}}
.loading-progress-wrap{position:relative;width:100%;height:12px;overflow:hidden;border-radius:10px}
.loading-progress-wrap progress{display:block;margin:0}
.loading-progress-wrap progress:indeterminate::-webkit-progress-value{background:transparent;transition:none}
.loading-progress-wrap progress:indeterminate::-moz-progress-bar{background:transparent}
.loading-activity{display:none;position:absolute;inset:2px auto 2px 2px;width:16%;border-radius:8px;background:#b5bd78;pointer-events:none}
.loading-progress-wrap:has(progress:indeterminate) .loading-activity{display:block;animation:loading-activity 1.2s ease-in-out infinite alternate}
#loading-phase{font-size:12px;line-height:1.3;font-weight:900;margin:0;text-align:center;color:#31513d}
@keyframes loading-activity{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.loading-progress-wrap:has(progress:indeterminate) .loading-activity{animation:none}}

/* Approved C artwork. Rarity colors and warning/success colors stay semantic. */
:root{--brand-cream:#fff2d2;--brand-paper:#f6e6bd;--brand-gold:#e7ba59;--brand-wood:#b58150;--brand-ink:#31513d;--brand-forest:#315b45;--brand-teal:#17604e;--brand-leaf:#87a95f;--brand-sea:#238a9d;--brand-deep-sea:#16556f;--cream:var(--brand-cream);--navy:var(--brand-ink)}
body{background:var(--brand-teal);color:var(--brand-ink)}
.game-shell .hud{background:var(--brand-forest);border-bottom-color:var(--brand-gold)}
.hud .coin-counter{background:#264b38;border-color:#91a773}
.hud .island-counter strong{color:var(--brand-cream)}
.game-shell .bottom-hud{background:linear-gradient(#93ad69,#719254);border-top-color:var(--brand-gold)}
.game-button,.round-button,.chest-side-tab,.recruitment-side-tab,.daily-side-tab{background-color:var(--brand-paper);color:var(--brand-ink)}
.game-button.primary-action,.purchase:not(:disabled){background-color:var(--brand-leaf);color:#203c2b;text-shadow:none}
dialog.sheet,dialog.pause-dialog,dialog.options-dialog,dialog.gear-upgrade-dialog,dialog.character-screen{background-color:var(--brand-cream);color:var(--brand-ink)}
.sheet-heading{background-color:var(--brand-paper);border-bottom-color:#dfcc9f}
.sheet-heading h1{color:var(--brand-ink)}
.close-button{background-color:var(--brand-wood)}
.upgrade,.order-row,.attribute-card{background-color:var(--brand-cream)}
.chest-experience .sheet-heading{background:linear-gradient(135deg,var(--brand-forest),var(--brand-teal));border-bottom-color:var(--brand-gold)}
.chest-experience .sheet-heading h1{color:var(--brand-cream)}
.crop-bubble,.crop-bubble::after{background-color:var(--brand-paper)}
.loading-details .app-version{margin:0;color:var(--brand-ink)}
/* Keep menu scrolling, but never turn a two-finger gesture into page zoom. */
html:has(#game-shell),body:has(#game-shell){touch-action:pan-x pan-y}
#sheet[data-mode="upgrades"]{touch-action:pan-y}
#sheet[data-mode="upgrades"]::backdrop{touch-action:none}
@media(max-height:500px){.loading-details{bottom:8px;gap:3px;padding:8px 12px;max-height:45dvh}#loading-status{font-size:12px}}

/* Event travel shares Set Sail's sea chart, ship and destination heading. */
.event-travel-loading #loading-splash,#loading-splash.copper-canyon-loading{background:radial-gradient(ellipse at 40% 30%,#367e83,#173f50)!important}
.event-travel-loading #loading-splash>.splash-scene,.event-travel-loading #loading-splash>.canyon-loading-heading,#loading-splash.copper-canyon-loading>.splash-scene,#loading-splash.copper-canyon-loading>.canyon-loading-heading{visibility:hidden}
#loading-splash.event-travel::after{display:none}
.event-travel-scene{position:absolute;inset:0;overflow:hidden;color:#fff0ce}
.event-travel-scene .voyage-heading{top:max(35px,env(safe-area-inset-top));z-index:2}
.event-travel-map{position:absolute;inset:70px 0 100px;width:100%;height:calc(100% - 170px)}
.event-travel-ship{offset-path:path('M175 585C100 450 490 430 425 300');offset-rotate:0deg;offset-distance:0%;animation:event-sailing 3.1s ease-in-out forwards}
@keyframes event-sailing{to{offset-distance:100%}}
.event-travel-loading #loading-splash .loading-details,#loading-splash.copper-canyon-loading .loading-details{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:5%;right:5%;width:90%;max-width:none;transform:none;background:none;border:0;box-shadow:none;padding:0;text-align:center;color:#fff0ce;border-radius:0}
.event-travel-loading #loading-splash .loading-progress-wrap,.event-travel-loading #loading-splash #loading-status,.event-travel-loading #loading-splash .app-version,#loading-splash.copper-canyon-loading .loading-progress-wrap,#loading-splash.copper-canyon-loading #loading-status,#loading-splash.copper-canyon-loading .app-version{display:none}
.event-travel-loading #loading-splash #loading-phase,#loading-splash.copper-canyon-loading #loading-phase{font-size:15px;color:#d9e4cd;text-shadow:none}
@media(prefers-reduced-motion:reduce){.event-travel-ship{animation:none;offset-distance:100%}}

#loading-splash.event-travel:has(#loading-progress[hidden]) #loading-status{display:block;color:#fff0ce}
#loading-splash.event-travel .loading-details>a{color:#fff0ce}