:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%, #132c46 0%, #081829 42%, #020710 100%);
    color: #f7fbff;
    font-family: Arial, Helvetica, sans-serif;
}
#universe { position: fixed; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.prayer-card {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(90vw, 40rem);
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    background: rgba(5, 17, 31, 0.42);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.12);
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    backdrop-filter: blur(8px);
    transform: translate(-50%, -50%);
    transition: top .8s ease, width .8s ease, padding .8s ease,
        border-radius .8s ease, background .8s ease, transform .8s ease;
}
.eyebrow {
    margin: 0 0 0.55rem;
    color: #9acbec;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.prayer-card h1 { margin: 0; font-size: clamp(2rem, 7vw, 4.25rem); font-weight: 500; line-height: 1.04; }
.message { margin: 1rem 0 0; color: #d8edfb; font-size: clamp(1rem, 2.6vw, 1.3rem); }
.hint { margin: 1.4rem 0 0; color: rgba(220, 241, 255, 0.62); font-size: 0.78rem; }
.privacy-note {
    position: fixed; z-index: 2; right: 1rem; bottom: .85rem; margin: 0;
    color: rgba(220, 241, 255, .48); font-size: .72rem; letter-spacing: .04em;
    pointer-events: none;
}
.demo-note {
    display: none; position: fixed; z-index: 2; top: .85rem; left: 50%;
    margin: 0; padding: .42rem .72rem; border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px; background: rgba(5,17,31,.5); color: rgba(220,241,255,.7);
    font-size: .7rem; letter-spacing: .03em; transform: translateX(-50%);
    pointer-events: none; backdrop-filter: blur(8px);
}
body.is-demo .demo-note { display: block; }
.status-message {
    position: fixed; z-index: 3; left: 50%; bottom: 2.6rem;
    max-width: min(88vw, 30rem); margin: 0; padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
    background: rgba(5, 17, 31, .72); color: #e8f7ff; font-size: .82rem;
    text-align: center; opacity: 0; transform: translate(-50%, .5rem);
    transition: opacity .35s ease, transform .35s ease; pointer-events: none;
    backdrop-filter: blur(8px);
}
.status-message.is-visible { opacity: 1; transform: translate(-50%, 0); }
body.has-prayer #universe { cursor: default; }
body.has-prayer .prayer-card {
    top: max(1rem, env(safe-area-inset-top));
    width: min(92vw, 32rem);
    padding: .85rem 1.25rem .9rem;
    border-radius: 1.1rem;
    background: rgba(5, 17, 31, .3);
    transform: translate(-50%, 0);
}
body.has-prayer .prayer-card h1 { font-size: clamp(1.25rem, 4vw, 1.7rem); }
body.has-prayer .prayer-card .eyebrow {
    margin-bottom: .28rem;
    font-size: .65rem;
    letter-spacing: .14em;
}
body.has-prayer .prayer-card .message {
    margin-top: .38rem;
    font-size: clamp(.82rem, 2.2vw, .95rem);
}
body.has-prayer .prayer-card .hint {
    margin-top: .4rem;
    font-size: .7rem;
}
body.is-demo.has-prayer .prayer-card {
    top: max(3.4rem, calc(env(safe-area-inset-top) + 2.4rem));
}
@media (prefers-reduced-motion: reduce) {
    #universe { cursor: default; }
    .prayer-card { transition: none; }
}