/* ===== Home screen overhaul: logo, backdrop readability, moon cursor, loading logo ===== */

/* --- crescent moon cursor (menus/UI only; gameplay uses body.playing { cursor: none } + pointer lock) --- */
html, body { cursor: url(../img/ui/cursor-moon.svg) 6 6, auto; cursor: image-set(url(../img/ui/cursor-moon.svg) 1x, url(../img/ui/cursor-moon@2x.svg) 2x) 6 6, auto; }
body:not(.playing) *:not(.chub-c) { cursor: url(../img/ui/cursor-moon.svg) 6 6, auto !important; cursor: image-set(url(../img/ui/cursor-moon.svg) 1x, url(../img/ui/cursor-moon@2x.svg) 2x) 6 6, auto !important; }
body:not(.playing) :is(button, a[href], [role="button"], [tabindex]:not([tabindex="-1"]), summary, select, label[for], input[type="range"], input[type="checkbox"], .menu-item, .btn, .chip, .opt, .sh-card, .pn-card):not(:disabled):not(.chub-c) {
  cursor: url(../img/ui/cursor-moon-hover.svg) 6 6, pointer !important; cursor: image-set(url(../img/ui/cursor-moon-hover.svg) 1x, url(../img/ui/cursor-moon-hover@2x.svg) 2x) 6 6, pointer !important; }
body.playing { cursor: none; }

/* --- title logo --- */
#title .mark { display: none; }
#title .logo { margin: 14px 0 -4px -40px; filter: drop-shadow(0 0 38px rgba(255, 226, 168, .16)) drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
#title .logo-img { display: block; width: clamp(170px, 33vh, 290px); height: auto; aspect-ratio: 1; user-select: none; -webkit-user-drag: none; }
#title .logo-txt { font: 700 clamp(46px, 11vh, 110px)/1 var(--f-disp); letter-spacing: .06em; color: #fff; }
#title.active .logo-img { animation: logoIn 1.1s var(--spring, cubic-bezier(.2, .9, .2, 1.1)) .05s backwards, logoFloat 9s ease-in-out 1.2s infinite; }
@keyframes logoIn { from { opacity: 0; transform: scale(.92) translateY(10px); filter: blur(10px); } }
@keyframes logoFloat { 50% { transform: translateY(-5px); } }
@media (max-height: 640px) { #title .logo { margin: 0 0 -8px -30px; } #title .logo-img { width: clamp(130px, 30vh, 200px); } }

/* --- readability over the animated backdrop: left scrim + soft vignette + bottom fade --- */
#title::before { background:
  radial-gradient(ellipse 130% 120% at 62% 46%, transparent 52%, rgba(2, 3, 9, .62) 100%),
  linear-gradient(90deg, rgba(3, 4, 11, .82) 0, rgba(3, 4, 11, .5) 30%, rgba(3, 4, 11, 0) 58%),
  linear-gradient(0deg, rgba(3, 4, 11, .72) 0, transparent 22%),
  linear-gradient(180deg, rgba(3, 4, 11, .45) 0, transparent 16%); }

/* --- version tag (title) --- */
.title-ver { position: absolute; right: calc(28px + var(--safe-r, 0px)); bottom: calc(22px + var(--safe-b, 0px)); font: 600 10px/1 var(--f-hud); letter-spacing: .24em; color: rgba(255, 244, 220, .5); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; }
#title.active ~ .build-tag, body:has(#title.active) .build-tag { display: none; }

/* --- loading screen logo --- */
.ld-top { align-items: flex-start; }
.ld-logo { display: block; margin: -14px 0 0 -18px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .7)); }
.ld-logo img { display: block; width: clamp(92px, 15vh, 150px); height: auto; aspect-ratio: 1; }

@media (prefers-reduced-motion: reduce) { #title.active .logo-img { animation: none; } }
#title .prompts { color: #cfc8b8; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }