/* Luna — A Little Big Adventure · splash page (single screen, mobile-first) */
@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunitosans.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --night: #081619;
  --honey: #ffcf7a;
  --honey-hi: #ffe2a6;
  --cream: #fff5d4;
  --ink-honey: #2e2414;
  --panel: rgba(8, 10, 12, .42);
  --stroke: rgba(255, 255, 255, .3);
  --f-logo: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif;
  --f-story: "Cormorant", "Iowan Old Style", Georgia, serif;
  --f-ui: "Nunito Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--night); }
body { font-family: var(--f-ui); color: var(--cream); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
p { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

/* ---------- Title screen ---------- */
.title-screen { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(.9rem, env(safe-area-inset-bottom)); }
.stage { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #2a2140; }
.stage-inner { --focus-x: 27%; position: absolute; top: 50%; left: var(--focus-x); height: 100%; aspect-ratio: 1672 / 941; min-width: 100%; transform: translate(calc(var(--focus-x) * -1), -50%); transition: translate 1.2s cubic-bezier(.2, .8, .2, 1); }
.stage-inner > picture, .stage-inner img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-inner img { object-fit: cover; animation: kenburns 38s ease-in-out infinite alternate; transform-origin: 30% 45%; }
.glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 214, 140, .9) 0%, rgba(255, 170, 70, .35) 30%, rgba(255, 150, 60, 0) 68%); animation: flicker 3.2s ease-in-out infinite; }
.glow-lantern-a { left: 21%; top: 18%; width: 11%; aspect-ratio: 1; }
.glow-lantern-b { left: 90.6%; top: 8.5%; width: 7%; aspect-ratio: 1; animation-delay: -1.1s; }
.glow-shrine { left: 92.3%; top: 43.5%; width: 12%; aspect-ratio: 1; animation-delay: -2.2s; }
.glow-sun { left: 78%; top: 18%; width: 18%; aspect-ratio: 1; opacity: .45; animation: breathe 7s ease-in-out infinite; background: radial-gradient(circle, rgba(255, 230, 170, .8), rgba(255, 170, 90, 0) 65%); }
.glow-village { left: 50%; top: 33%; width: 22%; aspect-ratio: 1.6; opacity: .35; animation-delay: -.6s; }
.title-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(120% 70% at 50% 40%, transparent 40%, rgba(5, 8, 12, .55) 100%),
  linear-gradient(180deg, rgba(10, 8, 25, .55) 0%, rgba(10, 8, 25, 0) 32%, rgba(5, 10, 12, 0) 55%, rgba(5, 12, 14, .82) 88%, var(--night) 100%); }
.motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px 3px rgba(255, 210, 110, .7); opacity: 0; animation: mote 9s ease-in-out infinite; }
.motes i:nth-child(1) { left: 8%; top: 62%; }
.motes i:nth-child(2) { left: 18%; top: 44%; animation-delay: -2s; animation-duration: 11s; }
.motes i:nth-child(3) { left: 27%; top: 70%; animation-delay: -4s; }
.motes i:nth-child(4) { left: 36%; top: 52%; animation-delay: -6s; animation-duration: 12s; }
.motes i:nth-child(5) { left: 46%; top: 66%; animation-delay: -1s; }
.motes i:nth-child(6) { left: 55%; top: 40%; animation-delay: -3.4s; animation-duration: 10s; }
.motes i:nth-child(7) { left: 63%; top: 58%; animation-delay: -5.2s; }
.motes i:nth-child(8) { left: 72%; top: 47%; animation-delay: -7s; animation-duration: 13s; }
.motes i:nth-child(9) { left: 80%; top: 64%; animation-delay: -2.6s; }
.motes i:nth-child(10) { left: 88%; top: 36%; animation-delay: -4.8s; }
.motes i:nth-child(11) { left: 94%; top: 56%; animation-delay: -.5s; animation-duration: 12s; }
.motes i:nth-child(12) { left: 13%; top: 30%; animation-delay: -8s; width: 3px; height: 3px; }
.motes i:nth-child(13) { left: 59%; top: 76%; animation-delay: -6.6s; width: 3px; height: 3px; }
.motes i:nth-child(14) { left: 40%; top: 28%; animation-delay: -3.8s; width: 3px; height: 3px; }

/* ---------- Logo ---------- */
.title-logo { text-align: center; margin-top: 7vh; margin-top: 7svh; }
.logo-kicker { font-weight: 800; font-size: .74rem; letter-spacing: .42em; text-transform: uppercase; color: var(--honey); margin: 0 0 .2rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 16px rgba(0, 0, 0, .8); animation: fade-up 1.2s .2s both; }
.logo { margin: 0; line-height: .9; font-weight: 700; }
.logo-word { display: inline-block; font-family: var(--f-logo); font-weight: 700; font-size: clamp(4.4rem, min(24vw, 20svh), 10rem); letter-spacing: .14em; margin-right: -.14em; text-transform: uppercase;
  background: linear-gradient(180deg, #fffbea 0%, #ffecb8 42%, #f2c26b 70%, #c98a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 50, 20, .55)) drop-shadow(0 0 26px rgba(255, 190, 100, .45)) drop-shadow(0 10px 30px rgba(10, 5, 25, .6));
  animation: logo-in 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.logo-tag { font-family: var(--f-story); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 4.6vw, 1.75rem); color: var(--cream); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 18px rgba(0, 0, 0, .85); margin: .5rem auto 0; max-width: 20em; animation: fade-up 1.2s .6s both; }

/* ---------- Bottom panel ---------- */
.bottom { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: .8rem; animation: fade-up 1.2s .9s both; }
.panel { background: var(--panel); border: 1px solid var(--stroke); border-radius: 24px; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.title-menu { width: 100%; padding: 1rem; display: grid; gap: .7rem; }
.game-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; width: 100%; min-height: 54px; padding: .8em 1.4em; border-radius: 12px; font-family: var(--f-ui); font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; border: 0; transition: transform .25s var(--ease-spring), box-shadow .25s, filter .2s; }
.game-btn:hover { transform: translateY(-2px); }
.game-btn:active { transform: translateY(1px) scale(.98); }
.game-btn-honey { color: var(--ink-honey); background: linear-gradient(180deg, var(--honey-hi), var(--honey) 55%, #f4b85a); box-shadow: 0 0 0 1px rgba(255, 240, 200, .6) inset, 0 10px 28px rgba(255, 180, 80, .32), 0 2px 0 #b9802f; }
.game-btn-honey:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255, 240, 200, .7) inset, 0 12px 36px rgba(255, 190, 90, .5), 0 2px 0 #b9802f; }
[data-appstore][aria-disabled="true"] { cursor: default; }
.btn-glyph { width: 18px; height: 18px; flex: none; }
.menu-foot { text-align: center; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.foot { text-align: center; font-size: .72rem; line-height: 1.5; color: rgba(255, 245, 212, .6); letter-spacing: .02em; }
.foot-part { display: block; }
.foot .dot { display: none; margin: 0 .5em; }
@media (min-width: 600px) { .foot-part { display: inline; } .foot .dot { display: inline; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; top: 1rem; z-index: 90; max-width: calc(100% - 2rem); transform: translate(-50%, calc(-100% - 2rem)); visibility: hidden; padding: .8rem 1.15rem; border-radius: 16px; background: rgba(8, 9, 12, .82); border: 1px solid rgba(255, 207, 122, .4); color: var(--cream); font-weight: 700; font-size: .95rem; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); transition: transform .45s var(--ease-spring), visibility 0s .45s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .45s var(--ease-spring), visibility 0s; }

/* ---------- Keyframes ---------- */
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.2%, -1%); } }
@keyframes flicker { 0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 55% { opacity: .7; } 70% { opacity: .95; transform: translate(-50%, -50%) scale(.97); } }
@keyframes breathe { 50% { opacity: .65; } }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 50% { transform: translate(18px, -40px); } 80% { opacity: .6; } 100% { opacity: 0; transform: translate(-10px, -80px); } }
@keyframes logo-in { from { opacity: 0; transform: translateY(18px) scale(.94); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Larger screens ---------- */
@media (min-width: 1000px) {
  .stage-inner { --focus-x: 50%; }
  .title-screen { padding: 2rem 2rem 1.1rem; }
  .title-logo { margin-top: 3vh; margin-top: 3svh; }
}

/* ---------- Short viewports (landscape phones) ---------- */
@media (max-height: 560px) {
  .title-screen { padding-top: .8rem; padding-bottom: .5rem; }
  .title-logo { margin-top: 0; }
  .logo-kicker { font-size: .62rem; }
  .logo-word { font-size: clamp(2.6rem, 16svh, 5rem); }
  .logo-tag { font-size: 1.05rem; margin-top: .2rem; }
  .bottom { gap: .4rem; }
  .title-menu { padding: .6rem; gap: .4rem; }
  .game-btn { min-height: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .motes i { opacity: .7; }
  .stage-inner { translate: none !important; }
}