:root{--paper:#f6f0e5;--ink:#4d3a32;--red:#a43c35}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.9 "Microsoft YaHei","PingFang SC",sans-serif}header{max-width:1120px;margin:auto;padding:22px 25px;border-bottom:1px solid #d9cdbb;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#82746a}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b79963;outline-offset:5px}main{max-width:820px;margin:auto;text-align:center;padding:38px 20px 35px}.eyebrow{font-size:13px;letter-spacing:3px;color:var(--red);margin:0}h1,h2{font-family:"Songti SC","SimSun",serif;font-weight:400}h1{font-size:clamp(30px,5vw,46px);margin:12px 0;line-height:1.5}.instruction{color:#82746a;min-height:3.8em;margin:8px auto 0;max-width:520px}.cake-scene{width:min(100%,490px);margin:-12px auto -15px;position:relative;isolation:isolate}.cake-art{display:block;width:100%;height:auto;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 72% 73% at center,#000 52%,transparent 76%)}.candles{position:absolute;top:22%;left:50%;transform:translateX(-50%);display:flex;gap:8px}.candle{border:0;background:none;position:relative;width:72px;height:115px;padding:0;display:flex;align-items:flex-end;justify-content:center;-webkit-tap-highlight-color:transparent}.digit{font:bold 92px/1 Georgia,serif;color:#aa493d;-webkit-text-stroke:1px #f2d6b2;text-shadow:2px 3px 0 #773d31,0 5px 6px #5d352b22}.candle:after{content:"";position:absolute;top:16px;left:50%;width:2px;height:9px;background:#574538}.flame{position:absolute;left:calc(50% - 8px);top:-12px;width:16px;height:29px;border-radius:75% 25% 60% 40%;background:radial-gradient(ellipse at 50% 80%,#fffde3 10%,#ffd365 45%,#e79535 85%);box-shadow:0 0 20px 6px #efbb5e66;opacity:0;transform-origin:bottom;pointer-events:none}.lit .flame{opacity:1;animation:flicker 1.1s ease-in-out infinite alternate}.smoke{position:absolute;top:-18px;left:50%;width:12px;height:35px;border-radius:50%;background:#a99783;filter:blur(6px);opacity:0;pointer-events:none}.spent .smoke{animation:smoke 1.8s ease-out both}.candle:disabled{cursor:default}.actions{min-height:120px;position:relative;z-index:2}#count{font-size:14px;color:#82746a;margin:0 0 14px}.primary{border:0;background:var(--red);color:#fff7e9;border-radius:3px;padding:13px 25px;min-height:50px;font-size:16px;letter-spacing:1px}.primary:hover{background:#87342d}h2{font-size:28px;color:var(--red);margin:12px 0}#celebration p{color:#82746a}.letter-link{display:inline-block;margin:24px 0 0;border-bottom:1px solid #b8a38a;color:#82746a;font-size:14px}footer{text-align:center;border-top:1px solid #d9cdbb;padding:18px;font-size:13px;color:#82746a}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}.confetti-piece{position:absolute;top:-20px;width:7px;height:12px;animation:fall var(--duration) var(--delay) ease-in both}[hidden]{display:none!important}@keyframes flicker{from{transform:rotate(-5deg) scale(.95)}to{transform:rotate(7deg) scale(1.06)}}@keyframes smoke{0%{opacity:.45;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translate(12px,-55px) scale(2)}}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(600deg);opacity:0}}@media(max-width:540px){header{padding:16px;font-size:12px}main{padding-top:27px}.cake-scene{margin-top:0}.candle{width:55px;height:91px}.digit{font-size:72px}.candles{gap:3px;top:21%}.candle:after{top:12px}.flame{top:-15px}.instruction{font-size:15px}h2{font-size:25px}}@media(prefers-reduced-motion:reduce){.lit .flame{animation:none}.confetti-piece{display:none}.spent .smoke{display:none}}

/* Matched vector candle numerals: equal cap height, baseline and wax thickness. */
.candles{top:22%;gap:12px;align-items:flex-end}
.candle{width:72px;height:105px;display:block;overflow:visible}
.candle:after{display:none}.wax-digit{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #683b2a15)}
.flame{left:calc(50% - 7px);top:-14px;width:14px;height:26px;z-index:2;background:radial-gradient(ellipse at 50% 78%,#fffde9 0 20%,#ffdc7a 42%,#efa442 75%,#de7c35 100%)}
.tap-hint{position:absolute;left:50%;top:-65px;transform:translateX(-50%);white-space:nowrap;color:#a43c35;background:#fffaf0ed;border:1px solid #dbc4a5;border-radius:16px;padding:3px 9px;font-size:12px;line-height:1.5;pointer-events:none;animation:invite-tap 1.8s ease-in-out infinite}
.tap-hint span{display:block;font-size:16px;line-height:1.2}.candle:nth-child(2) .tap-hint{animation-delay:.25s}
.lit .tap-hint,.spent .tap-hint{display:none}.candle:not(.lit):not(.spent):hover .wax-digit{filter:drop-shadow(0 0 8px #d4995260)}
@keyframes invite-tap{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
@media(max-width:540px){.candles{top:21%;gap:10px}.candle{width:55px;height:80px}.flame{top:-15px;width:12px;height:23px;left:calc(50% - 6px)}.tap-hint{top:-62px;font-size:12px;padding:3px 7px}}
@media(prefers-reduced-motion:reduce){.tap-hint{animation:none}}

/* The hint is inside its candle button; clicks bubble to the same action. */
.tap-hint{pointer-events:auto;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center}