:root{color-scheme:dark;--gold:#dec18b;--white:#f2f1f6;--muted:#b1b5c6;--night:#0d1429}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#15203f 0,#0d1429 60%,#0c1425 100%);color:var(--white);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;min-height:100svh}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #fff;outline-offset:6px}.hidden{display:none!important}#stars,#fireworks{position:fixed;inset:0;pointer-events:none}#stars{overflow:hidden;z-index:0}.star{position:absolute;border-radius:50%;background:#eef2ff;box-shadow:0 0 6px #c1d0ff;animation:twinkle 5s infinite alternate}#fireworks{z-index:5;width:100%;height:100%}main{position:relative;z-index:1}.screen{min-height:100svh;max-width:740px;margin:auto;padding:42px 22px;text-align:center;animation:appear .8s ease both}.welcome{display:grid;place-items:center}.intro{width:100%;padding-bottom:3vh}.date{font-size:.78rem;letter-spacing:.18em;color:var(--muted)}.tiny-star{font-size:3rem;color:var(--gold);margin:32px 0 18px}h1{font-size:clamp(1.65rem,5.2vw,2.8rem);font-weight:600;letter-spacing:.04em;margin:0 0 12px;line-height:1.45}h2{font-size:clamp(1.65rem,4.7vw,2.1rem);font-weight:500;margin:18px 0 8px}.english{color:var(--gold);font-size:clamp(.8rem,2.7vw,1.15rem);letter-spacing:.38em;margin:0 0 40px}.gold{color:var(--gold);border:1px solid #9e947966;background:linear-gradient(180deg,#bda77922,#ffffff05);box-shadow:inset 0 0 22px #e7cb8b0b,0 0 26px #e6c3830a;border-radius:60px;transition:transform .2s,box-shadow .2s}.gold:hover{transform:translateY(-2px);box-shadow:0 0 35px #e6c38320}.primary{padding:19px 30px;min-width:230px;font-weight:600;letter-spacing:.15em}.small{font-size:.9rem;color:var(--muted);line-height:1.8}.dedication{margin-top:36px}.sub{font-size:1rem;color:var(--muted);line-height:1.7;margin:0}header{padding-top:10px}.gift-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 0;max-width:540px;margin:42px auto 26px;align-items:center}.gift{width:100%;height:110px;position:relative;background:transparent;border:0;padding:0;display:grid;place-items:center;transition:transform .25s}.gift:nth-child(1){grid-column:5/9}.gift:nth-child(2){grid-column:2/5}.gift:nth-child(3){grid-column:5/9}.gift:nth-child(4){grid-column:9/12}.gift:nth-child(5){grid-column:1/4}.gift:nth-child(6){grid-column:4/7}.gift:nth-child(7){grid-column:7/10}.gift:nth-child(8){grid-column:10/13}.gift-art{display:block;width:108px;height:108px;background-image:url('assets/gifts-reference.jpg');background-size:552.8px 1228.8px;background-position:-223px -258px;filter:drop-shadow(0 8px 12px #fa75a222);border-radius:15px}.gift:hover:not(:disabled){transform:translateY(-6px) rotate(-3deg)}.gift.open .gift-art{filter:grayscale(1);opacity:.28}.gift.open::after{content:'已开启';position:absolute;top:45%;left:0;right:0;color:var(--gold);font-size:.9rem;letter-spacing:.15em}.count{font-size:1rem;color:var(--muted);letter-spacing:.1em;margin:32px 0 22px}#box-note{margin-top:28px}dialog{width:min(90vw,530px);padding:0;border:1px solid #c9b89555;border-radius:25px;background:linear-gradient(145deg,#141c35f5,#101529fa);color:var(--white);box-shadow:0 25px 90px #0009;max-height:88svh}dialog::backdrop{background:#050915a8;backdrop-filter:blur(9px)}.modal-inner{padding:32px 26px}.close{position:absolute;right:15px;top:12px;background:transparent;border:0;color:#bbbfd1;font-size:2rem;width:40px;height:40px}#modal-content h3{color:var(--gold);font-size:1.4rem;font-weight:600;margin:0 28px 15px 0;line-height:1.6;text-align:left}#modal-content p{line-height:1.9}.fortune{font-size:1.55rem;text-align:left;min-height:100px;margin:22px 0}.modal-image{display:block;width:100%;max-height:49svh;object-fit:contain;background:#0b1020;border:1px solid #d5bc8377;border-radius:17px;margin:20px 0}.modal-caption{color:var(--gold);font-size:1.1rem;text-align:center}.modal-button{display:block;margin:20px auto 0;padding:12px 25px;border-radius:17px}.ghost-field{height:250px;position:relative;border-radius:20px;overflow:hidden;background:#080f2360;margin-top:20px}.ghost{position:absolute;left:35%;top:40%;font-size:4rem;background:transparent;border:0;transition:left .7s ease,top .7s ease;min-width:75px;min-height:75px;filter:drop-shadow(0 0 13px #f8dfa070)}.cake-scene{padding-top:clamp(30px,10svh,100px)}.cake{position:relative;width:min(85vw,410px);aspect-ratio:1;margin:40px auto 12px}.cake-art{position:absolute;inset:0;overflow:hidden;border-radius:10px;mask-image:linear-gradient(transparent,black 8%,black 94%,transparent)}.cake-art img{position:absolute;width:168.54%;max-width:none;height:auto;left:-34.63%;top:-158.54%}.candles{position:absolute;inset:0}.candle{position:absolute;width:12%;height:19%;left:32%;top:2%;background:transparent;border:0;border-radius:30px;touch-action:none}.candle:nth-child(2){left:44%}.candle:nth-child(3){left:56%}.candle:hover{box-shadow:0 0 20px #ffc97835}.candle.out{background:linear-gradient(#111a33,#10182f);height:13%;top:4%;pointer-events:none}.candle.out::after{content:'﹏';position:absolute;left:25%;top:5%;font-size:1.2rem;color:#bbc5db;animation:smoke 1.5s both}.birthday-message h1{color:var(--gold);font-size:clamp(1.8rem,5vw,2.6rem);margin-top:18px}.birthday-message p{color:#d4d5e0;line-height:1.9;font-size:1rem}.birthday-message{animation:appear 2.5s ease both}.quiet{display:block;border:0;background:none;color:var(--gold);margin:24px auto 0;padding:12px;text-decoration:underline;text-underline-offset:6px;font-size:.9rem}@keyframes appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes twinkle{from{opacity:.15}to{opacity:.8}}@keyframes smoke{to{opacity:0;transform:translateY(-30px)}}@media(max-width:420px){.screen{padding:32px 16px}.gift-grid{margin-top:32px;gap:18px 0}.gift{height:95px}.gift-art{transform:scale(.86)}.primary{padding:17px 22px}.modal-inner{padding:30px 22px}.cake-scene{padding-top:7svh}.cake{margin-top:34px}h1{letter-spacing:0}.date{letter-spacing:.12em}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
