:root{
  --pink:#efb7b0; --cream:#fff7f1; --red:#9f1f2d; --gold:#c99b5b; --ink:#5f3a32;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#120c0b;color:var(--ink)}
body{overflow:hidden}
.app{min-height:100dvh;position:relative}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.screen.active{display:flex}
.intro{background:url('assets/cereja.png') center/cover no-repeat;isolation:isolate}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,15,13,.25),rgba(37,15,13,.62));z-index:-1}
.intro-card{text-align:center;color:white;padding:24px;max-width:520px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.eyebrow{font-size:.92rem;letter-spacing:.08em;text-transform:uppercase}
.cherry-button{width:150px;height:150px;border:none;border-radius:50%;padding:0;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.15);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 12px 40px rgba(0,0,0,.25);animation:pulse 2s ease-in-out infinite}
.cherry-button img{width:100%;height:100%;object-fit:cover}
.intro h1{font-family:Georgia,serif;font-size:2.15rem;margin:.8rem 0 .2rem}
.intro p{font-size:1.05rem}
@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 0 10px rgba(255,255,255,.08),0 15px 45px rgba(0,0,0,.3)}}
.video-screen{background:#000}
video{width:100%;height:100%;object-fit:contain;background:#000}
.skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:white;padding:9px 14px;border-radius:999px;cursor:pointer}
.details{background:radial-gradient(circle at top,#fffaf4 0,#f8d8d1 55%,#e7a9a2 100%);padding:24px;overflow:auto}
.details-card{width:min(100%,480px);text-align:center;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:32px 22px;box-shadow:0 24px 70px rgba(93,41,34,.18)}
.mini-cherry{font-size:2rem}
.details h2{font-family:Georgia,serif;font-size:3rem;margin:.4rem 0 0;color:var(--red)}
.age{font-family:Georgia,serif;font-size:1.45rem;margin:.2rem 0 1.4rem;color:var(--gold)}
.info{line-height:1.7;margin-bottom:1.5rem}
.actions{display:grid;gap:10px}
.btn{display:block;border:none;text-decoration:none;background:var(--red);color:white;padding:14px 18px;border-radius:999px;font-weight:700;cursor:pointer;font-size:1rem}
.btn.secondary{background:#fff;color:var(--red);border:1px solid rgba(159,31,45,.25)}
.text-button{border:none;background:none;color:var(--ink);text-decoration:underline;cursor:pointer;padding:10px}
dialog{border:none;border-radius:24px;padding:0;max-width:420px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(25,10,8,.55);backdrop-filter:blur(4px)}
.dialog-card{padding:28px;position:relative;background:var(--cream)}
.close{position:absolute;right:12px;top:8px;border:none;background:none;font-size:2rem;cursor:pointer;color:var(--ink)}
@media (min-width:700px){.video-screen video{max-width:430px;box-shadow:0 0 80px rgba(255,182,174,.22)}}