.topbar{position:relative}
.wish-meter{width:232px;margin-left:-116px;padding:14px 20px 15px;border:1px solid #e2e7e3;border-radius:22px;background:#fff;box-shadow:0 5px 16px #26382d08;overflow:visible;text-align:center;pointer-events:none;bottom:calc(min(100cqw / 1.297,100cqh - 100px) + 8px)}
.wish-meter::before{content:"";position:absolute;bottom:-7px;left:62%;width:13px;height:13px;background:white;border-right:1px solid #e2e7e3;border-bottom:1px solid #e2e7e3;transform:rotate(45deg);border-bottom-right-radius:3px}
.wish-meter .bubble-title{display:block!important;font-size:17px;font-weight:650;letter-spacing:-.4px;line-height:1.3;color:#26352c}
.bubble-total{margin-top:7px;color:#879189;font-size:12px;line-height:1.4;white-space:nowrap}
.wish-meter strong{display:inline-block;margin:0 3px;font-size:24px;font-weight:750;color:#368bca;vertical-align:-2px;font-variant-numeric:tabular-nums}
.combo-note{position:absolute;left:0;right:0;top:-23px;font-size:11px;color:#408cc3;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;white-space:nowrap}.combo-note.is-visible{opacity:1;transform:translateY(0)}
.bubble-sparkles{position:absolute;right:-17px;top:-13px;color:#e3b75c;font-size:25px;opacity:0;pointer-events:none}.is-milestone .bubble-sparkles{animation:tiny-celebration .7s ease-out both}.is-milestone .bubble-title{color:#368bca}
@keyframes tiny-celebration{0%{opacity:0;transform:scale(.5) rotate(-10deg)}35%{opacity:1;transform:scale(1.15) rotate(8deg)}100%{opacity:0;transform:translateY(-13px) scale(1)}}
.wish-meter.is-milestone{border-color:#acd1ea}.wish-meter strong.pop{animation:count-pop .18s ease-out}@keyframes count-pop{40%{transform:translateY(-2px) scale(1.1)}}
@media(max-width:700px){.wish-meter{width:208px;margin-left:-104px;padding:10px 14px 11px;bottom:calc(min(100cqw / 1.297,100cqh - 100px) + 9px)}.person{width:min(100cqw,calc((100cqh - 100px)*1.297))}.wish-meter .bubble-title{font-size:15px}.bubble-total{font-size:11px;margin-top:4px}.wish-meter strong{font-size:22px}.combo-note{top:-19px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.combo-note{transition:none}.bubble-sparkles,.wish-meter strong.pop{animation:none}}
/* Local arcade feedback, isolated from the photograph and its arm animation. */
.combo-layer{position:absolute;inset:0;pointer-events:none;z-index:12;--combo-color:#359bdd}
.combo-layer[data-tier="1"]{--combo-color:#ef9e2f}.combo-layer[data-tier="2"]{--combo-color:#ee6b9d}.combo-layer[data-tier="3"]{--combo-color:#9773e5}
.combo-burst{position:absolute;left:8%;top:44%;text-align:center;opacity:0;transform:translateY(9px) rotate(-2deg);transition:opacity .18s,transform .18s;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 5px 12px #20352718)}
.combo-burst.is-visible{opacity:1;transform:translateY(0) rotate(-2deg)}
.combo-rank{display:block;font-size:16px;font-weight:850;color:var(--combo-color);background:white;padding:3px 10px;border-radius:15px;white-space:nowrap}
.combo-burst strong{display:flex;align-items:baseline;justify-content:center;gap:3px;color:var(--combo-color);line-height:1;font-weight:950;text-shadow:2px 2px white,-2px -2px white,2px -2px white,-2px 2px white}
.combo-burst b{font-size:66px;letter-spacing:-4px;font-variant-numeric:tabular-nums}.combo-burst small{font-size:18px}
.combo-fuse{height:4px;background:#e9edf0;width:75%;margin:8px auto;border-radius:9px;overflow:hidden}.combo-fuse i{display:block;height:100%;background:var(--combo-color);transform-origin:left}
.combo-particles{position:absolute;left:42%;top:64%;width:0;height:0}.combo-confetti{position:absolute;width:7px;height:11px;border-radius:2px;background:var(--color);animation:combo-scatter .75s cubic-bezier(.15,.65,.3,1) forwards}
@keyframes combo-scatter{0%{opacity:1;transform:translate(0,0) scale(.6)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.3)}}
@media(max-width:700px){.combo-burst{left:2%;top:39%}.combo-burst b{font-size:49px}.combo-rank{font-size:12px;padding:3px 6px}.combo-burst small{font-size:13px}.combo-particles{top:65%}}
@media(prefers-reduced-motion:reduce){.combo-burst{transition:none}.combo-confetti{display:none}}

.combo-sound{position:absolute;right:106px;padding:6px 10px;border:1px solid #cfe2ef;border-radius:20px;background:#f3faff;color:#287db2;font-size:11px;cursor:pointer}.combo-sound[aria-pressed="false"]{background:#fff;color:#858e88;border-color:#e4e8e5}.combo-sound:focus-visible{outline:2px solid #359bdd;outline-offset:3px}@media(max-width:700px){.combo-sound{right:93px;font-size:10px}}

/* Candy lettering: bright face, white rim, and a colored extrusion. */
.combo-burst{filter:drop-shadow(0 3px 0 white) drop-shadow(0 6px 0 color-mix(in srgb,var(--combo-color),#25104b 45%)) drop-shadow(0 9px 12px color-mix(in srgb,var(--combo-color) 35%,transparent))}
.combo-rank{font-size:19px;font-weight:950;background:var(--combo-color);color:white;border:3px solid white;border-radius:11px;padding:5px 12px;transform:rotate(-4deg);text-shadow:0 2px 0 #0003;box-shadow:0 3px 0 color-mix(in srgb,var(--combo-color),#25104b 35%);margin-bottom:8px}
.combo-burst strong{text-shadow:none;gap:5px}
.combo-burst b{font-size:76px;color:var(--combo-color);background:linear-gradient(180deg,#fff6a5 0%,var(--combo-color) 40%,var(--combo-color) 65%,color-mix(in srgb,var(--combo-color),#341158 30%) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px white;paint-order:stroke fill;letter-spacing:-3px}
.combo-burst small{color:var(--combo-color);-webkit-text-stroke:3px white;paint-order:stroke fill;font-weight:950;font-size:20px}
.combo-fuse{height:6px;border:2px solid white;background:#fff8;box-sizing:content-box;margin-top:9px}.combo-fuse i{background:linear-gradient(90deg,var(--combo-color),#ffe34d)}
@media(max-width:700px){.combo-rank{font-size:15px;border-width:2px;padding:4px 8px}.combo-burst b{font-size:57px;-webkit-text-stroke:1.5px white}.combo-burst small{font-size:15px}}

/* A compact speaking bubble; the animated combo remains the loud element. */
.wish-meter{width:216px;margin-left:-108px;padding:11px 15px;border-radius:17px;text-align:left;box-shadow:0 3px 10px #26382d05;border-color:#e9ece9;bottom:calc(min(100cqw / 1.297,100cqh - 100px) + 2px)}
.wish-meter::before{width:9px;height:9px;bottom:-5px;left:65%;border-color:#e9ece9;border-bottom-right-radius:2px}
.wish-meter .bubble-title{font-size:15px;font-weight:650;line-height:1.45;letter-spacing:-.3px;color:#26352c}
.bubble-total{margin-top:4px;font-size:11px;line-height:1.5;color:#919993}
.wish-meter strong{font-size:13px;font-weight:650;color:#515c55;vertical-align:0;margin:0 2px}
.wish-meter strong.pop{animation:quiet-count .22s ease-out}
@keyframes quiet-count{0%,50%{color:#1689e8;transform:translateY(-1px)}100%{color:#515c55;transform:none}}
.wish-meter.is-milestone{border-color:#e9ece9}.wish-meter.is-milestone .bubble-title{color:#26352c}.bubble-sparkles{display:none}
@media(max-width:700px){.wish-meter{width:202px;margin-left:-101px;padding:10px 13px}.wish-meter .bubble-title{font-size:14px}.wish-meter strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.wish-meter strong.pop{animation:none}}
/* Image-relative feedback stays below the face on all screens. */
.combo-layer{container-type:inline-size;clip-path:inset(50% -25% -25% -25%)}
.combo-burst,.combo-burst.is-visible{left:2%;top:58%;width:34%;transform-origin:center center}
.combo-rank{font-size:clamp(11px,3.2cqw,17px);padding:4px 5px;white-space:nowrap;margin-bottom:5px;border-width:2px}
.combo-burst b{font-size:clamp(30px,11cqw,59px);letter-spacing:-2px}
.combo-burst small{font-size:clamp(10px,3cqw,16px)}
.combo-particles{left:24%;top:78%}
.combo-fuse{margin-top:5px;height:4px}
/* Keep the larger combo in the open area to the left of the face. */
.combo-layer{clip-path:none}
.combo-burst,.combo-burst.is-visible{left:0;top:17%;width:36%;transform-origin:center center}
.combo-rank{font-size:clamp(12px,3.6cqw,19px);padding:5px 5px;margin-bottom:6px}
.combo-burst b{font-size:clamp(37px,13.5cqw,72px)}
.combo-burst small{font-size:clamp(11px,3.4cqw,18px)}
.combo-particles{left:18%;top:38%;clip-path:inset(-80px -70px -100px -90px)}
@media(max-width:700px){.combo-rank{font-size:clamp(11px,3.6cqw,16px)}.combo-burst b{font-size:clamp(32px,13.5cqw,60px)}}

/* Jewel tones, a fine champagne edge and restrained dimensional lighting. */
.combo-burst{filter:drop-shadow(0 7px 9px #152b2520)}
.combo-rank{background:linear-gradient(145deg,color-mix(in srgb,var(--combo-color),white 12%),var(--combo-color) 65%,color-mix(in srgb,var(--combo-color),black 16%));color:#fff8e9;border:1px solid #d7c59e;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff35,0 3px 0 color-mix(in srgb,var(--combo-color),black 30%);text-shadow:0 1px 2px #0003;font-weight:750;letter-spacing:.6px;transform:rotate(-2deg)}
.combo-burst b{background:linear-gradient(160deg,color-mix(in srgb,var(--combo-color),white 18%),var(--combo-color) 48%,color-mix(in srgb,var(--combo-color),black 20%));background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.65px #ffffffcc;filter:drop-shadow(0 2px 0 #ffffff) drop-shadow(0 3px 0 #18332d25);letter-spacing:-2px}
.combo-burst small{-webkit-text-stroke:0;color:var(--combo-color);font-weight:750;text-shadow:0 1px 0 white}
.combo-fuse{height:3px;border:0;background:#e6e9e7;box-shadow:none;border-radius:4px}.combo-fuse i{background:linear-gradient(90deg,var(--combo-color),#b69a64)}
.combo-confetti{width:4px;height:7px;border-radius:1px}

/* Luminous gem faces with crisp depth, without heavy outlines. */
.combo-rank{background:linear-gradient(140deg,color-mix(in srgb,var(--combo-color),white 24%),var(--combo-color) 58%,color-mix(in srgb,var(--combo-color),black 8%));border-color:#fff1d1;box-shadow:inset 0 1px 0 #ffffff70,0 3px 0 color-mix(in srgb,var(--combo-color),black 22%),0 6px 14px color-mix(in srgb,var(--combo-color) 16%,transparent);color:#fff;font-weight:850}
.combo-burst b{background:linear-gradient(165deg,color-mix(in srgb,var(--combo-color),white 40%) 4%,var(--combo-color) 44%,var(--combo-color) 73%,color-mix(in srgb,var(--combo-color),black 12%));background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:.75px #fff;filter:drop-shadow(0 1px 0 white) drop-shadow(0 3px 0 color-mix(in srgb,var(--combo-color),black 24%)) drop-shadow(0 5px 8px color-mix(in srgb,var(--combo-color) 20%,transparent));font-weight:950}
.combo-burst small{color:var(--combo-color);font-weight:850}.combo-fuse i{background:linear-gradient(90deg,var(--combo-color),#e9c780)}

/* Keep the cumulative nudge count red, including its click feedback. */
.wish-meter strong{color:#d63d45}
@keyframes quiet-count{0%,50%{color:#d63d45;transform:translateY(-1px)}100%{color:#d63d45;transform:none}}

.wish-meter{width:270px;margin-left:-135px;padding:14px 19px;border-radius:19px}
.wish-meter .bubble-title{font-size:17px;line-height:1.4}
.bubble-total{font-size:12px;margin-top:6px}
.wish-meter strong{font-size:17px;font-weight:750;color:#d63d45}
@media(max-width:700px){.wish-meter{width:244px;margin-left:-122px;padding:12px 16px}.wish-meter .bubble-title{font-size:16px}.wish-meter strong{font-size:16px}}

/* Grow into the reserved space; the face-side edge never exceeds its cap. */
.combo-burst,.combo-burst.is-visible{transform-origin:left top;transform:none}
.combo-rank{overflow:hidden;text-overflow:ellipsis}

/* A playful lean rises into the blank space, away from the hand. */
.combo-burst,.combo-burst.is-visible{transform-origin:left bottom}
.combo-rank{transform:rotate(-2deg)}

.wish-meter,.wish-meter.is-milestone{border-color:transparent;box-shadow:none;background:transparent}
.wish-meter::before{display:none}

/* Align the text itself with the portrait head, rather than the image midpoint. */
.wish-meter{left:calc(50% + min(4cqw,calc((100cqh - 100px)*.05188)));text-align:center}

.topbar .combo-sound{right:0}.wish-meter #wish-message{font-size:10px;text-align:center}

/* Clean combo numerals: no white outline or white shadow. */
.combo-burst b{-webkit-text-stroke:0;filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--combo-color),black 24%)) drop-shadow(0 5px 8px color-mix(in srgb,var(--combo-color) 20%,transparent))}
.combo-burst small{text-shadow:none}

/* Reserve ink bounds for the final digit when clipping the gradient to text. */
.combo-burst b{display:block;flex-shrink:0;letter-spacing:0;padding:.06em .09em;line-height:1.08;margin:-.06em 0;overflow:visible}
