/* The final milestone is a small ruby keepsake, with room for both histories. */
.counting-card.badge{grid-column:span 2;position:relative;isolation:isolate;text-align:left;min-height:286px;padding:23px 25px 18px;border:1px solid #c9607880;border-radius:19px;background:radial-gradient(ellipse at 12% 8%,#85445b40,transparent 60%),linear-gradient(130deg,#381b2b,#201923 78%);box-shadow:inset 0 0 0 5px #f7a9b005,0 8px 22px #070b0d22;transition:border-color .25s,box-shadow .25s;overflow:visible}
.counting-card:before{content:"";position:absolute;inset:7px;border:1px solid #e491a322;border-radius:13px;z-index:-1;pointer-events:none}
.counting-card:hover{border-color:#f39daf;box-shadow:inset 0 0 0 5px #f7a9b009,0 9px 30px #0c081b44}
.counting-card.badge.earned{background:radial-gradient(ellipse at 10% 0,#b3546b44,transparent 65%),linear-gradient(135deg,#481b2e,#241623);border-color:#e28d9c}
.count-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.count-eyebrow{font-size:12px;font-weight:750;line-height:1.4;letter-spacing:.15em;color:#e5b2bd}
.count-card-mark{color:#f4c995;font-size:24px;line-height:1}
.countdown-art{display:flex;align-items:baseline;gap:3%;height:105px;margin:12px 0 6px;white-space:nowrap;pointer-events:none}
.countdown-art i{font:italic 76px/.98 Georgia,serif;letter-spacing:-.07em;color:#f7d4c4;text-shadow:0 2px 0 #612935,0 5px 18px #b93f5540}
.countdown-art i span{font-size:.35em;letter-spacing:.02em;margin-left:5px}
.countdown-art i:nth-child(2){font-size:64px;color:#eab4af}
.countdown-art i:nth-child(3){font-size:51px;color:#c48192}
.countdown-art i:nth-child(4){font-size:37px;opacity:.34;transform:translateY(-12px);filter:blur(.35px)}
.countdown-art i:nth-child(5){font-size:25px;opacity:.13;transform:translateY(-25px);filter:blur(.75px)}
.counting-card.badge .count-title{font:24px/1.2 Georgia,serif;color:#ffebdb;max-width:355px;letter-spacing:-.3px}
.count-card-foot{display:grid;grid-template-columns:3.6ch minmax(0,1fr) 3.6ch;align-items:center;gap:10px;min-height:48px;margin-top:15px;border-top:1px solid #eaa1af22;padding-top:11px}
.count-status{font-size:12px;line-height:1.45;text-align:center;color:#d2aeb8}
.count-total{display:block;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-weight:800;white-space:nowrap;line-height:1;letter-spacing:-.04em;min-width:0}
.count-red{font-size:clamp(24px,3vw,34px);text-align:right;color:#ff6f89;text-shadow:0 0 20px #ed385b33}
.count-gray{font-size:22px;color:#b4afb9;text-align:left}
.count-float{position:absolute;top:12px;right:24px;font-size:35px;font-weight:850;color:#ff567c;text-shadow:0 1px 8px #310515;pointer-events:none;z-index:3;animation:countFloat 2.1s ease-out both}
.counting-card.count-increased{animation:countGlow 2.1s ease-out both}
.count-modal.modal,body[data-theme=red] .count-modal.modal{width:min(550px,100%);padding:44px 36px 27px;border:1px solid #dc8398;background:radial-gradient(ellipse at 50% -15%,#9c53616b,transparent 63%),linear-gradient(145deg,#4b2437,#251a2a);box-shadow:0 30px 95px #030109a8,inset 0 0 0 6px #f5b8c405;overflow-x:hidden}
.count-modal .close-modal{position:sticky;display:block;float:right;margin:-29px -21px 0 0;top:0;right:0;z-index:10;width:36px;height:36px;background:#301823ed;border-color:#e4a2b78a;color:#ffe4e6;font-size:25px;line-height:1;box-shadow:0 2px 12px #10081055}
.count-modal-inner{clear:none}
.count-modal .count-eyebrow{display:block;padding:0 18px;max-width:100%;font-size:12px;letter-spacing:.13em}
.count-modal .countdown-art{justify-content:center;gap:4%;margin:24px 0 8px;height:96px}
.count-modal h2{font:32px/1.18 Georgia,serif;color:#ffeadb;max-width:420px;margin:10px auto 22px}
.count-confirm{width:100%;min-height:64px;padding:16px 18px;border:1px solid #f2b5bb;border-radius:13px;background:linear-gradient(145deg,#f6c8c7,#df93a7);font-size:16px;line-height:1.45;font-weight:750;color:#491c30;box-shadow:inset 0 1px #fff6,0 8px 20px #13081535;transition:box-shadow .2s,filter .2s}
.count-confirm:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 0 25px #ffb1c029}
.count-confirm:disabled{opacity:.65;cursor:wait}
.count-modal .count-reminder{margin:20px auto 0;max-width:390px;font:italic 15px/1.65 Georgia,serif;color:#ddbac3}
.count-error{font-size:14px!important;color:#ffd2d8!important;min-height:0;margin:8px 0 0}
.count-error:empty{display:none}
.count-message{position:relative;min-height:122px;display:grid;place-items:center;border:1px solid #c772882e;border-radius:18px;background:radial-gradient(ellipse,#be607c20,transparent 75%);animation:countMessageIn .45s ease both}
.count-message-emoji{font-size:clamp(42px,8vw,61px);letter-spacing:5px}
.count-message-spark{position:absolute;top:8px;right:24px;font-size:27px;font-weight:850;color:#ff7791;animation:countFloat 2.1s ease-out both}
.count-good-girl{font:34px/1.2 Georgia,serif;color:#ffe0d6;padding:12px}
.second-message .count-good-girl{animation:countMessageIn .5s ease both}
.count-ending-ornament{display:block;font:38px Georgia,serif;letter-spacing:10px;color:#edb3be;margin:25px 0 17px}
.count-ending h2{font-size:34px;margin-bottom:4px}
.count-options{--choice-width:min(148px,calc((100% - 80px)/2));position:relative;display:flex;justify-content:center;align-items:center;gap:28px;min-height:211px;margin:6px 0 0;padding:30px 0}
.count-choice{width:var(--choice-width);min-width:0;flex:none;height:94px;padding:10px 5px;border:1px solid #b7778d8c;border-radius:17px;background:linear-gradient(145deg,#543348,#362133);box-shadow:inset 0 1px #f8bbcd12,0 4px 12px #190d1933;transition:opacity .4s,box-shadow .3s,background .3s}
.count-choice strong{display:block;font-size:16px;line-height:1.3;color:#f9dbe0}
.count-choice>span{display:block;font-size:25px;margin-top:6px}
.count-choice.preselected{border:2px solid #efacb9;background:linear-gradient(145deg,#915168,#60344d);box-shadow:0 0 0 4px #e587a115,0 5px 20px #13061444}
.count-choice:hover:not(:disabled){border-color:#ffcede;box-shadow:0 0 0 4px #ffc6d322}
.count-choice.chosen{z-index:2;border-color:#f5b8c5;transform:scale(1.41421356237);animation:countChoiceBounce .65s cubic-bezier(.2,.7,.2,1) both;background:radial-gradient(ellipse at 50% 0,#a35573,#64354e 80%);box-shadow:0 10px 30px #16061650,inset 0 1px #ffe5ec44}
.count-choice.chosen .count-reaction{font-size:clamp(22px,5vw,31px);letter-spacing:-4px;margin:0;white-space:nowrap}
.count-choice.unchosen{opacity:0;pointer-events:none}
.count-choice.chosen.restored{animation:none}
.count-choice-status{font-size:14px!important;line-height:1.6;min-height:23px;color:#e4b7c7!important;margin:0 0 9px!important}
@keyframes countFloat{0%{opacity:0;transform:translateY(12px) scale(.88)}18%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(.97)}}
@keyframes countGlow{0%,100%{box-shadow:inset 0 0 0 5px #f7a9b005,0 8px 22px #070b0d22}35%{box-shadow:inset 0 0 0 5px #f7a9b019,0 0 38px #ef507d70;border-color:#ffc0cc}}
@keyframes countMessageIn{from{opacity:0;filter:blur(2px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes countChoiceBounce{0%{transform:scale(1)}64%{transform:scale(1.455)}84%{transform:scale(1.395)}100%{transform:scale(1.41421356237)}}
@media(max-width:760px){.counting-card.badge{padding:20px;min-height:270px}.counting-card.badge .count-title{font-size:24px}.countdown-art{height:87px}.countdown-art i{font-size:65px}.countdown-art i:nth-child(2){font-size:55px}.countdown-art i:nth-child(3){font-size:46px}.countdown-art i:nth-child(4){font-size:31px}.countdown-art i:nth-child(5){font-size:23px}.count-modal.modal,body[data-theme=red] .count-modal.modal{padding:43px 22px 24px}.count-modal .close-modal{margin-right:-9px}.count-modal h2{font-size:28px}.count-modal .countdown-art{gap:2%;height:82px}.count-options{gap:24px;min-height:197px}.count-choice strong{font-size:14px}.count-choice{height:88px}.count-modal .count-reminder{font-size:15px}.count-card-foot{gap:6px}.count-status{font-size:12px}.count-good-girl{font-size:30px}}
@media(max-width:380px){.counting-card.badge{padding:17px}.count-title{font-size:22px!important}.countdown-art{gap:1%}.count-red{font-size:25px}.count-gray{font-size:21px}.count-options{--choice-width:calc((100% - 54px)/2);gap:16px}.count-choice strong{font-size:13px}.count-choice.chosen .count-reaction{font-size:23px;letter-spacing:-6px}.count-modal h2{font-size:25px}.count-eyebrow{font-size:11px}.count-modal .count-eyebrow{font-size:11px}}
@media(prefers-reduced-motion:reduce){.count-float,.count-message-spark{animation:none;opacity:1;transform:none}.counting-card.count-increased{animation:none;border-color:#ffc0cc}.count-choice.chosen{animation:none;transform:scale(1.41421356237)}.count-message,.count-good-girl{animation:none}.countdown-art i{filter:none}}

.count-message-outgoing{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(42px,8vw,61px);animation:countMessageOut .45s ease both;pointer-events:none}
/* Fixed title lines and counter slots keep the keepsake tidy at 1–3 digits. */
.counting-card{container-type:inline-size}
.counting-card.badge .count-title{display:block;max-width:none;font-size:clamp(18px,5.4cqw,26px);line-height:1.28}
.count-title>span{display:block;white-space:nowrap}
.count-card-foot{grid-template-columns:5.4rem minmax(0,1fr) 6.4rem}
.count-total{display:flex;align-items:center;gap:5px;overflow:visible}
.count-red{justify-content:flex-end}
.count-symbol{font-size:.75em;letter-spacing:0;font-weight:400;flex:none}
.count-ending .close-modal{font-size:12.5px;width:18px;height:18px;margin-top:-25px;margin-right:-17px;overflow:visible}
.count-ending .close-modal:after{content:"";position:absolute;inset:-13px;border-radius:50%}
.count-ending .count-ending-ornament{margin-top:10px}
@media(max-width:480px){.count-card-foot{grid-template-columns:1fr 1fr;row-gap:10px}.count-status{grid-column:1/-1;grid-row:2}.count-red{grid-column:2;grid-row:1}.count-gray{grid-column:1;grid-row:1}.count-ending .close-modal{margin-right:-3px}.counting-card.badge .count-title{font-size:clamp(17px,5.4cqw,24px)!important}}
@keyframes countMessageOut{to{opacity:0;filter:blur(2px);transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.count-message-outgoing{display:none}}