*{box-sizing:border-box}html{background:#101d31}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:20px 12px;background:radial-gradient(ellipse at 50% 8%,#33445c,#101d31 72%);color:#f8efd9;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.card{position:relative;isolation:isolate;width:min(100%,440px);padding:29px 23px 23px;text-align:center;background:linear-gradient(145deg,#1f3148,#142236);border:1px solid #9d7c41;border-radius:25px;box-shadow:0 18px 50px #0007;overflow:hidden}.eyebrow{font-size:.7rem;letter-spacing:.22em;color:#e6c480}.cookie{font-size:4.3rem;margin:18px auto 5px;filter:drop-shadow(0 7px 14px #0006)}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(1.75rem,7vw,2.25rem);margin:9px 0}.subtitle{color:#e5cda0;margin:0 0 22px}.names{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:21px}.name,.secondary{border:1px solid #9d7c41;background:transparent;color:#f8efd9;border-radius:999px;padding:10px 14px;cursor:pointer}.name.active{background:#ddbc76;color:#1a2739}.fortune{padding:21px 14px;background:#0e1b2eaa;border:1px solid #5d5038;border-radius:17px}.for{color:#e5c480;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}blockquote{margin:0;font:1.18rem/1.65 Georgia,serif}.cta{margin-top:22px;width:100%;border:0;border-radius:15px;padding:17px 12px;background:linear-gradient(100deg,#b88b3e,#f2d99c,#bd9145);color:#19263a;font-weight:800;font-size:1rem;cursor:pointer}.cta:focus-visible,.name:focus-visible,.secondary:focus-visible{outline:3px solid #fff;outline-offset:3px}.reveal{margin-top:22px;padding:18px;background:#f6ebd4;color:#18293b;border-radius:16px;text-align:left;line-height:1.65}.reveal h2{font-size:1.15rem;margin:0 0 12px}.reveal p{margin:0 0 15px}.reveal .secondary{color:#18293b;border-color:#9d7c41}.crack{position:absolute;inset:0;z-index:5;pointer-events:none;background:#e6edf530;backdrop-filter:blur(1px);animation:glass 2.8s ease-in forwards}.crack svg{width:100%;height:100%;filter:drop-shadow(1px 1px 1px #0009)}.crack path{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(1px 1px 2px #07101a)}.flash{position:absolute;left:48%;top:45%;font-size:3rem;color:white;animation:pop .45s ease-out forwards}footer{margin-top:20px;color:#b7ad99;font-size:.72rem}@keyframes glass{0%{opacity:0;transform:scale(1.02)}12%{opacity:1;transform:scale(1)}68%{opacity:1}100%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.crack{animation:none;opacity:0}.flash{animation:none}}
/* v10: overlay covers the entire visible viewport, including outside the card */
.crack{position:fixed;inset:0;width:100vw;height:100dvh;z-index:9999;overflow:hidden;background:radial-gradient(circle at 52% 44%,#dce9f328,#09182733);backdrop-filter:blur(1.2px);animation:glassFullscreen 3.3s ease-out forwards}
.crack svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(2px 2px 2px #0009)}
.crack path{stroke:#f9fcff;stroke-width:2.1;filter:drop-shadow(1px 2px 1px #061522)}
.shards{position:absolute;inset:0;background:repeating-conic-gradient(from 15deg at 52% 47%,transparent 0deg 15deg,#e5f6ff0b 16deg 19deg,transparent 20deg 33deg);mix-blend-mode:screen;animation:shardDrift 3.3s ease-out forwards}
@keyframes glassFullscreen{0%{opacity:0;transform:scale(1)}7%{opacity:1;transform:scale(1.015)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.008)}}
@keyframes shardDrift{0%,58%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.crack,.shards{animation:none;opacity:0}}