:root {
  --sky: #bfefff;
  --sky-deep: #62c7ee;
  --purple: #30155f;
  --purple-soft: #5d2f92;
  --pink: #ff4fa3;
  --pink-soft: #ffb7dd;
  --white: #fffdfb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--sky); color: var(--purple); font-family: Arial, Helvetica, sans-serif; }
body { overflow: hidden; }
.app-shell { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
.app-shell::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 70% 18%, rgba(255,255,255,.76), transparent 24%), linear-gradient(180deg, #d8f8ff 0%, #b7edfb 42%, #88dcf7 100%); }
.app-shell::after { content: ''; position: fixed; width: 74vmin; height: 74vmin; border: 42px solid rgba(255, 79, 163, .32); border-right-color: rgba(93, 47, 146, .42); border-bottom-color: rgba(93, 47, 146, .26); border-radius: 50%; right: -23vmin; bottom: -17vmin; filter: blur(.5px); }
.start-card, .fallback { position: relative; z-index: 2; width: min(92vw, 455px); padding: 23px 22px 26px; border: 1px solid rgba(255,255,255,.86); border-radius: 34px; background: rgba(255,253,251,.78); box-shadow: 0 26px 70px rgba(48,21,95,.22); backdrop-filter: blur(18px); text-align: center; overflow: hidden; }
.start-card::before, .fallback::before { content: ''; position: absolute; inset: 12px; border-radius: 26px; border: 1px solid rgba(255,79,163,.18); pointer-events: none; }
.brand-lockup { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple-soft)); color: white; font-size: 13px; font-weight: 900; letter-spacing: -.04em; }
.brand-text { display: flex; align-items: baseline; gap: 5px; color: var(--purple); }
.brand-text strong { font-size: 18px; letter-spacing: .08em; }
.brand-text em { font-family: Georgia, 'Times New Roman', serif; color: var(--pink); font-size: 18px; }
.cover-mini { position: relative; z-index: 1; width: min(45vw, 150px); aspect-ratio: 905 / 1280; margin: 0 auto 14px; border-radius: 18px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 16px 42px rgba(48,21,95,.24); background: white; }
.cover-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-glow { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.62) 46%, transparent 68%); transform: translateX(-115%); animation: cardSweep 2.8s ease-in-out infinite; }
.eyebrow { position: relative; z-index: 1; margin: 0 0 10px; color: var(--pink); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 900; }
h1 { position: relative; z-index: 1; margin: 0 auto; max-width: 330px; font-size: clamp(33px, 9vw, 54px); line-height: .95; font-weight: 950; letter-spacing: -.06em; color: var(--purple); }
.intro { position: relative; z-index: 1; margin: 15px auto 0; font-size: 17px; line-height: 1.38; max-width: 330px; color: #3e2471; }
.helper { position: relative; z-index: 1; margin: 16px auto 22px; color: rgba(48,21,95,.72); font-size: 13px; line-height: 1.42; max-width: 360px; }
button { position: relative; z-index: 1; appearance: none; border: 0; border-radius: 999px; padding: 16px 26px; min-width: 196px; background: linear-gradient(135deg, var(--pink), var(--purple-soft)); color: white; font-size: 18px; font-weight: 900; box-shadow: 0 14px 34px rgba(93,47,146,.32); }
button span { position: relative; z-index: 1; }
button::after { content: ''; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 56%); pointer-events: none; }
button:disabled { opacity: .72; }
.status { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10; width: min(92vw, 520px); margin: 0; padding: 13px 16px; border-radius: 999px; background: rgba(48, 21, 95, .82); border: 1px solid rgba(255,255,255,.42); color: #fff; text-align: center; font-size: 15px; line-height: 1.25; backdrop-filter: blur(16px); box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.status[data-mode='found'] { background: rgba(29, 132, 104, .84); }
.status[data-mode='lost'], .status[data-mode='fallback'] { background: rgba(93, 47, 146, .86); }
.ar-mount { position: fixed; inset: 0; z-index: 1; }
.fallback { max-height: calc(100dvh - 36px); overflow: auto; }
.fallback h2 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 30px; letter-spacing: -.04em; color: var(--purple); }
.fallback p { position: relative; z-index: 1; margin: 0 0 18px; color: rgba(48,21,95,.72); line-height: 1.45; }
.cover-preview { position: relative; width: min(72vw, 320px); aspect-ratio: 905 / 1280; margin: 0 auto; overflow: hidden; border-radius: 22px; box-shadow: 0 20px 60px rgba(48,21,95,.24); background: #ddd; }
.cover-preview img, .cover-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-overlay-video { mix-blend-mode: normal; }
.css-shimmer { position: absolute; top: -10%; bottom: -10%; width: 18%; left: -35%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); animation: sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { to { left: 112%; } }
@keyframes cardSweep { 0%, 28% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
@keyframes pulse { 0%,100% { opacity: .62; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cover-overlay-video, .css-shimmer, .cover-glow { animation: none; } }

/* Compact mobile treatment: the page now auto-starts AR, so this is a brief branded holding state rather than a required extra interaction. */
.is-starting-ar .start-card { transform: scale(.96); opacity: .92; }
.is-starting-ar .intro { margin-top: 10px; }
.is-starting-ar button { pointer-events: none; }
@media (max-height: 760px), (max-width: 380px) {
  .app-shell { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  .start-card, .fallback { width: min(94vw, 430px); padding: 16px 16px 18px; border-radius: 26px; max-height: calc(100dvh - 20px); overflow: auto; }
  .start-card::before, .fallback::before { inset: 8px; border-radius: 20px; }
  .brand-lockup { margin-bottom: 8px; }
  .brand-mark { width: 34px; height: 34px; font-size: 11px; }
  .brand-text strong { font-size: 15px; }
  .brand-text em { font-size: 15px; }
  .cover-mini { width: min(34vw, 108px); margin-bottom: 9px; border-radius: 14px; }
  .eyebrow { margin-bottom: 7px; font-size: 10px; }
  h1 { max-width: 300px; font-size: clamp(27px, 8vw, 38px); line-height: .96; }
  .intro { margin-top: 9px; font-size: 15px; line-height: 1.3; }
  .helper { margin: 10px auto 13px; font-size: 12px; line-height: 1.32; }
  button { min-width: 160px; padding: 13px 20px; font-size: 16px; }
  .status { bottom: max(12px, env(safe-area-inset-bottom)); width: min(94vw, 500px); font-size: 13px; padding: 10px 12px; border-radius: 18px; }
}