/* ============================================================================
* Carerio Cookie Game Banner — Cinematic Neo-retro HD-2D (v3 large-scale)
*
* Layered architecture (z-stack from back to front):
* .ccg-banner
* ::before film grain (svg turbulence)
* ::after top rim light hairline
* .ccg-bg-blobs drifting color blobs
* .ccg-bg-clouds slow-drifting pixel clouds (parallax)
* .ccg-bg-bokeh large foreground bokeh circles
* .ccg-deco-stars 8 twinkling stars
* .ccg-floor plate / shelf line under cookie
* .ccg-mascot.is-rabbit left mascot
* .ccg-mascot.is-bottle right mascot
* .ccg-stage
* .ccg-aura radial bloom
* .ccg-chip-orbit bobbing satellite chips (5)
* .ccg-shockwave expanding ring on bite
* .ccg-cookie hero SVG (3D side band + 8 chips + 3 bite cutouts)
* .ccg-progress bottom: HP-bar gauge w/ counter
* .ccg-confetti completion burst
* .ccg-popup "PERFECT!" overlay
* .ccg-score-layer +33 floating score text
* .ccg-copy
* .ccg-vignette darkened corners (cinematic frame)
* ========================================================================== */
:root {
--ccg-cream-50: #fffaf0;
--ccg-cream-100: #fff2dc;
--ccg-peach: #ffd3a5;
--ccg-coral: #ff9c7d;
--ccg-mint: #a8e6cf;
--ccg-mint-deep: #4ea677;
--ccg-lavender: #c8b6ff;
--ccg-sky: #b8e0ff;
--ccg-sky-deep: #5a8fb8;
--ccg-pink: #ffb3c1;
--ccg-rose-deep: #ff6b8a;
--ccg-amber: #f4a300;
--ccg-amber-deep: #d97706;
--ccg-gold: #ffd585;
--ccg-chocolate: #4a2410;
--ccg-chocolate-deep: #2a1408;
--ccg-stroke: #1a0c04;
--ccg-stroke-soft: #5a3b1e;
--ccg-text: #1a0f08;
--ccg-text-soft: #6b5742;
--ccg-glow-warm: rgba(255, 156, 125, 0.55);
--ccg-glow-amber: rgba(244, 163, 0, 0.45);
--ccg-glow-mint: rgba(78, 166, 119, 0.4);
--ccg-shadow-soft: 0 1px 2px rgba(42, 24, 16, 0.06),
0 4px 8px rgba(42, 24, 16, 0.08),
0 16px 32px rgba(42, 24, 16, 0.14),
0 32px 64px rgba(42, 24, 16, 0.10);
--ccg-radius: 30px;
--ccg-radius-pill: 999px;
--ccg-z: 999998;
--ccg-font: "Hiragino Sans", "Yu Gothic UI", "Inter", "Segoe UI", system-ui, sans-serif;
--ccg-spring: cubic-bezier(.68, -.55, .27, 1.55);
--ccg-out: cubic-bezier(.16, 1, .3, 1);
}
#ccg-root {
position: fixed;
inset: auto 0 0 0;
z-index: var(--ccg-z);
pointer-events: none;
font-family: var(--ccg-font);
color: var(--ccg-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#ccg-root[hidden] { display: none !important; }
#ccg-root.ccg-on { pointer-events: auto; }
#ccg-manage-link {
position: fixed;
bottom: 8px; left: 8px;
z-index: 999990;
font-size: 11px;
color: rgba(50, 30, 10, 0.55);
text-decoration: underline;
background: rgba(255, 255, 255, 0.85);
padding: 4px 10px;
border-radius: var(--ccg-radius-pill);
line-height: 1.4;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ============================================================================
* Banner card
* ========================================================================== */
.ccg-banner {
position: fixed;
left: 50%;
bottom: clamp(8px, 2vw, 28px);
transform: translateX(-50%) translateY(180%);
width: min(900px, calc(100vw - 16px));
background:
linear-gradient(135deg,
rgba(255, 250, 240, 0.94) 0%,
rgba(255, 232, 200, 0.84) 50%,
rgba(255, 211, 165, 0.76) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.65);
border-radius: var(--ccg-radius);
box-shadow:
var(--ccg-shadow-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(255, 200, 150, 0.45);
padding: 26px 30px 28px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 18px 28px;
align-items: center;
transition: transform 760ms var(--ccg-spring), opacity 360ms ease;
overflow: hidden;
isolation: isolate;
backdrop-filter: blur(20px) saturate(1.25);
-webkit-backdrop-filter: blur(20px) saturate(1.25);
}
.ccg-banner.ccg-show { transform: translateX(-50%) translateY(0); }
.ccg-banner.ccg-bye {
transform: translateX(-50%) translateY(200%);
opacity: 0;
transition: transform 460ms cubic-bezier(.55, 0, .68, .53), opacity 320ms ease;
}
.ccg-banner.ccg-screenshake { animation: ccg-screenshake 360ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ccg-screenshake {
0%, 100% { transform: translateX(-50%) translateY(0); }
18% { transform: translateX(calc(-50% - 6px)) translateY(2px); }
36% { transform: translateX(calc(-50% + 5px)) translateY(-2px); }
54% { transform: translateX(calc(-50% - 3px)) translateY(1px); }
72% { transform: translateX(calc(-50% + 2px)) translateY(0); }
}
.ccg-banner::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.20;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.ccg-banner::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 6%, rgba(255,255,255,.95) 50%, transparent 94%);
z-index: 9;
}
/* ===== background blobs (cut to 2 for cleaner composition) ===== */
.ccg-bg-blobs {
position: absolute;
inset: -20%;
z-index: 0;
pointer-events: none;
filter: blur(60px);
opacity: 0.55;
}
.ccg-bg-blobs span {
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
animation: ccg-blob 16s ease-in-out infinite;
}
.ccg-bg-blobs span:nth-child(1) {
background: radial-gradient(circle, var(--ccg-peach), transparent 70%);
top: -10%; left: -8%;
}
.ccg-bg-blobs span:nth-child(2) {
background: radial-gradient(circle, var(--ccg-amber), transparent 70%);
bottom: -25%; right: -8%;
animation-delay: -8s;
width: 420px; height: 420px;
}
.ccg-bg-blobs span:nth-child(3),
.ccg-bg-blobs span:nth-child(4) { display: none; }
@keyframes ccg-blob {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.12); }
66% { transform: translate(-30px, 30px) scale(0.94); }
}
/* ===== clouds removed for cleaner composition ===== */
.ccg-bg-clouds { display: none; }
/* ===== bokeh foreground ===== */
.ccg-bg-bokeh {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
}
.ccg-bg-bokeh span {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 220, 160, .6), rgba(255, 220, 160, 0) 65%);
filter: blur(6px);
animation: ccg-bokeh-drift 24s ease-in-out infinite;
}
.ccg-bg-bokeh span:nth-child(1) { width: 80px; height: 80px; top: 20%; left: -10%; animation-delay: 0s; }
.ccg-bg-bokeh span:nth-child(2) { width: 60px; height: 60px; top: 70%; right: -8%; animation-delay: -10s; background: radial-gradient(circle, rgba(255, 156, 125, .5), transparent 65%); }
.ccg-bg-bokeh span:nth-child(3) { width: 40px; height: 40px; top: 45%; left: 60%; animation-delay: -16s; background: radial-gradient(circle, rgba(168, 230, 207, .55), transparent 65%); }
@keyframes ccg-bokeh-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(60px, -20px); }
}
/* ===== twinkling stars ===== */
.ccg-deco-stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.ccg-deco-stars span {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, #fff 0%, #fff 18%, transparent 22%),
conic-gradient(from 0deg, transparent 0deg 30deg, var(--ccg-glow-amber) 90deg, transparent 150deg);
filter: drop-shadow(0 0 6px rgba(255, 230, 150, 0.95))
drop-shadow(0 0 12px var(--ccg-glow-warm));
animation: ccg-twinkle 3s ease-in-out infinite;
opacity: 0;
}
.ccg-deco-stars span::before,
.ccg-deco-stars span::after {
content: "";
position: absolute;
inset: -6px;
background:
linear-gradient(0deg, transparent 47%, rgba(255,255,255,.95) 49.5%, rgba(255,255,255,.95) 50.5%, transparent 53%),
linear-gradient(90deg, transparent 47%, rgba(255,255,255,.95) 49.5%, rgba(255,255,255,.95) 50.5%, transparent 53%);
}
.ccg-deco-stars span::after { transform: rotate(45deg); opacity: .55; }
.ccg-deco-stars span:nth-child(1) { top: 14%; left: 38%; animation-delay: 0s; transform: scale(.7); }
.ccg-deco-stars span:nth-child(2) { top: 70%; left: 30%; animation-delay: -1.0s; transform: scale(.5); }
.ccg-deco-stars span:nth-child(3) { top: 22%; right: 16%; animation-delay: -1.7s; transform: scale(.6); }
.ccg-deco-stars span:nth-child(4) { top: 48%; right: 6%; animation-delay: -1.9s; transform: scale(.55); }
.ccg-deco-stars span:nth-child(5),
.ccg-deco-stars span:nth-child(6),
.ccg-deco-stars span:nth-child(7),
.ccg-deco-stars span:nth-child(8) { display: none; }
@keyframes ccg-twinkle {
0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
40% { opacity: 0.95; transform: scale(1) rotate(40deg); }
65% { opacity: 1; transform: scale(1.2) rotate(80deg); }
80% { opacity: 0.4; transform: scale(.85) rotate(120deg); }
}
/* ===== floor / plate line ===== */
.ccg-floor {
position: absolute;
bottom: 14%;
left: 8%;
width: 224px;
height: 14px;
z-index: 3;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 0%, rgba(42, 24, 16, 0.18) 0%, transparent 70%);
filter: blur(2px);
}
/* ===== vignette / cinematic frame ===== */
.ccg-vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 8;
background:
radial-gradient(ellipse at center, transparent 50%, rgba(42, 24, 16, 0.20) 110%);
mix-blend-mode: multiply;
}
/* ============================================================================
* Mascots
* ========================================================================== */
.ccg-mascot {
position: absolute;
z-index: 5;
pointer-events: none;
width: 80px;
height: 100px;
filter: drop-shadow(0 4px 6px rgba(42, 24, 16, 0.18));
}
.ccg-mascot.is-rabbit { left: 4px; bottom: 6px; width: 84px; height: 96px; }
.ccg-mascot.is-bottle { right: 6px; bottom: 6px; }
.ccg-mascot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ccg-mascot.is-rabbit { animation: ccg-mascot-bob-l 3.4s ease-in-out infinite; }
.ccg-mascot.is-bottle { animation: ccg-mascot-bob-r 3.0s ease-in-out infinite; }
@keyframes ccg-mascot-bob-l {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes ccg-mascot-bob-r {
0%, 100% { transform: translateY(0) rotate(2deg); }
50% { transform: translateY(-4px) rotate(-2deg); }
}
.ccg-mascot.ccg-cheer { animation: ccg-mascot-cheer 760ms var(--ccg-spring) both; }
@keyframes ccg-mascot-cheer {
0% { transform: translateY(0) rotate(0); }
25% { transform: translateY(-22px) rotate(-15deg) scale(1.12); }
55% { transform: translateY(-8px) rotate(10deg) scale(1.06); }
80% { transform: translateY(-2px) rotate(-3deg) scale(1.02); }
100% { transform: translateY(0) rotate(0); }
}
.ccg-mascot .ccg-eye {
transform-origin: center;
animation: ccg-blink 5s steps(1, end) infinite;
}
@keyframes ccg-blink {
0%, 92%, 96%, 100% { transform: scaleY(1); }
93%, 95% { transform: scaleY(0.05); }
}
.ccg-mascot.is-rabbit .ccg-eye { animation-delay: -1.4s; }
/* ============================================================================
* Cookie stage — hero
* ========================================================================== */
.ccg-stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
display: grid;
place-items: center;
z-index: 4;
perspective: 900px;
}
.ccg-aura {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%,
var(--ccg-glow-warm) 0%,
var(--ccg-glow-amber) 22%,
rgba(244, 163, 0, 0.18) 48%,
transparent 72%);
filter: blur(16px);
animation: ccg-pulse 3.6s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes ccg-pulse {
0%, 100% { opacity: 0.68; transform: scale(.88); }
50% { opacity: 1; transform: scale(1.12); }
}
.ccg-cookie {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
background: transparent;
border: 0;
padding: 0;
transition: transform 200ms var(--ccg-out);
animation: ccg-breathe 4s ease-in-out infinite;
z-index: 2;
transform-style: preserve-3d;
will-change: transform;
}
@keyframes ccg-breathe {
0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
50% { transform: translateY(-3px) rotate(1deg) scale(1.02); }
}
.ccg-cookie:hover {
transform: translateY(-6px) rotate(-4deg) scale(1.06);
animation-play-state: paused;
}
.ccg-cookie:active {
transform: translateY(2px) rotate(-2deg) scale(0.96);
animation-play-state: paused;
}
.ccg-cookie:focus-visible {
outline: 4px dashed var(--ccg-amber);
outline-offset: 10px;
border-radius: 50%;
}
.ccg-cookie svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ccg-cookie .ccg-bite {
opacity: 0;
transform-origin: center;
transform: scale(0) rotate(-30deg);
transition: opacity 280ms var(--ccg-out),
transform 420ms var(--ccg-spring);
}
.ccg-cookie[data-bites="1"] .ccg-bite-1,
.ccg-cookie[data-bites="2"] .ccg-bite-1,
.ccg-cookie[data-bites="2"] .ccg-bite-2,
.ccg-cookie[data-bites="3"] .ccg-bite-1,
.ccg-cookie[data-bites="3"] .ccg-bite-2,
.ccg-cookie[data-bites="3"] .ccg-bite-3 {
opacity: 1;
transform: scale(1) rotate(0);
}
.ccg-cookie.ccg-shake { animation: ccg-shake 480ms cubic-bezier(.36, .07, .19, .97) both; }
.ccg-cookie.ccg-flash { animation: ccg-flash 420ms ease-out both, ccg-shake 480ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes ccg-shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
12% { transform: translate(-6px, 2px) rotate(-5deg); }
25% { transform: translate(6px, -2px) rotate(5deg); }
40% { transform: translate(-5px, 3px) rotate(-3deg); }
55% { transform: translate(4px, -2px) rotate(3deg); }
72% { transform: translate(-2px, 1px) rotate(-1deg); }
88% { transform: translate(1px, 0) rotate(0); }
}
@keyframes ccg-flash {
0% { filter: brightness(1) saturate(1); }
20% { filter: brightness(1.7) saturate(1.5); }
100% { filter: brightness(1) saturate(1); }
}
.ccg-cookie.ccg-celebrate { animation: ccg-celebrate 1100ms var(--ccg-spring) both; }
@keyframes ccg-celebrate {
0% { transform: scale(1) rotate(0); }
20% { transform: scale(1.22) rotate(-15deg); }
40% { transform: scale(1.10) rotate(360deg); }
60% { transform: scale(1.16) rotate(355deg); }
80% { transform: scale(1.08) rotate(360deg); }
100% { transform: scale(0.94) rotate(360deg); }
}
/* ===== orbit chips ===== */
.ccg-chip-orbit {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.ccg-chip-orbit span {
position: absolute;
width: 14px; height: 14px;
border-radius: 30% 60% 50% 40% / 50% 40% 60% 50%;
box-shadow:
inset -2px -2px 0 rgba(0, 0, 0, 0.25),
inset 2px 2px 0 rgba(255, 255, 255, 0.35),
0 4px 8px rgba(42, 24, 16, 0.3);
animation: ccg-orbit 4.6s ease-in-out infinite;
}
.ccg-chip-orbit span:nth-child(1) {
top: 2%; left: 8%;
background: radial-gradient(circle at 35% 30%, #6c3f1d, var(--ccg-chocolate-deep));
}
.ccg-chip-orbit span:nth-child(2) {
top: 6%; right: 4%;
background: radial-gradient(circle at 35% 30%, #ffd6e0, var(--ccg-rose-deep));
width: 12px; height: 12px;
border-radius: 50%;
animation-delay: -1.2s;
}
.ccg-chip-orbit span:nth-child(3) {
bottom: 14%; left: 2%;
background: radial-gradient(circle at 35% 30%, #dff6e6, var(--ccg-mint-deep));
width: 11px; height: 11px;
border-radius: 3px;
transform: rotate(45deg);
animation-delay: -2.4s;
}
.ccg-chip-orbit span:nth-child(4) {
bottom: 4%; right: 12%;
background: radial-gradient(circle at 35% 30%, #c8e3f7, var(--ccg-sky-deep));
border-radius: 50%;
animation-delay: -3.4s;
}
.ccg-chip-orbit span:nth-child(5) {
top: 50%; right: -4%;
background: radial-gradient(circle at 35% 30%, #ffe6b8, var(--ccg-amber-deep));
width: 9px; height: 9px;
border-radius: 50%;
animation-delay: -1.8s;
}
@keyframes ccg-orbit {
0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.85; }
50% { transform: translate(0, -10px) rotate(180deg); opacity: 1; }
}
/* ===== shockwave on bite ===== */
.ccg-shockwave {
position: absolute;
left: 50%; top: 50%;
width: 40%;
aspect-ratio: 1 / 1;
border: 3px solid rgba(244, 163, 0, 0.7);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.4);
pointer-events: none;
z-index: 4;
animation: ccg-shockwave 580ms ease-out forwards;
}
@keyframes ccg-shockwave {
0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-width: 4px; }
100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
}
/* ===== particles ===== */
.ccg-particle {
position: absolute;
left: 50%; top: 50%;
width: 11px; height: 11px;
background: var(--ccg-chocolate);
border-radius: 30% 60% 50% 40% / 50% 40% 60% 50%;
box-shadow:
inset -1px -1px 0 rgba(0, 0, 0, 0.3),
0 2px 4px rgba(42, 24, 16, 0.4);
pointer-events: none;
z-index: 5;
--tx: 0px; --ty: 0px; --r: 0deg; --s: 1;
animation: ccg-burst 880ms cubic-bezier(.22, .61, .36, 1) forwards;
}
.ccg-particle.is-pink { background: radial-gradient(circle at 35% 30%, #ffd6e0, var(--ccg-rose-deep)); }
.ccg-particle.is-mint { background: radial-gradient(circle at 35% 30%, #dff6e6, var(--ccg-mint-deep)); }
.ccg-particle.is-sky { background: radial-gradient(circle at 35% 30%, #d4ecff, var(--ccg-sky-deep)); }
.ccg-particle.is-amber { background: radial-gradient(circle at 35% 30%, #ffe6b8, var(--ccg-amber-deep)); }
.ccg-particle.is-cream { background: var(--ccg-cream-50); border: 1.5px solid var(--ccg-stroke); }
.ccg-particle.is-spark {
background: transparent;
width: 16px; height: 16px;
background-image:
linear-gradient(0deg, transparent 47%, #fff 49.5%, #fff 50.5%, transparent 53%),
linear-gradient(90deg, transparent 47%, #fff 49.5%, #fff 50.5%, transparent 53%),
linear-gradient(45deg, transparent 47%, rgba(255,255,255,.7) 49.5%, rgba(255,255,255,.7) 50.5%, transparent 53%),
linear-gradient(-45deg, transparent 47%, rgba(255,255,255,.7) 49.5%, rgba(255,255,255,.7) 50.5%, transparent 53%);
filter: drop-shadow(0 0 6px var(--ccg-amber)) drop-shadow(0 0 10px var(--ccg-glow-warm));
box-shadow: none;
}
.ccg-particle.is-back { z-index: 0; opacity: 0.6; filter: blur(2px); }
.ccg-particle.is-front { z-index: 7; }
.ccg-particle.is-pixel {
width: 10px;
height: 10px;
border-radius: 1.5px;
background: var(--ccg-amber);
box-shadow:
inset -2px -2px 0 rgba(0, 0, 0, 0.35),
inset 2px 2px 0 rgba(255, 255, 255, 0.35),
0 0 8px var(--ccg-glow-amber);
image-rendering: pixelated;
}
.ccg-particle.is-pixel.is-mint { background: var(--ccg-mint-deep); }
.ccg-particle.is-pixel.is-pink { background: var(--ccg-rose-deep); }
.ccg-particle.is-pixel.is-sky { background: var(--ccg-sky-deep); }
.ccg-particle.is-pixel.is-cream { background: var(--ccg-cream-50); }
@keyframes ccg-burst {
0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.4); opacity: 1; }
20% { transform: translate(calc(-50% + var(--tx) * 0.3), calc(-50% + var(--ty) * 0.3)) rotate(calc(var(--r) * 0.3)) scale(var(--s, 1)); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(0.7); opacity: 0; }
}
/* ===== score popups (+33 / PERFECT!) ===== */
.ccg-score-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 7;
}
.ccg-score-pop {
position: absolute;
left: 50%; top: 30%;
transform: translate(-50%, 0);
font-family: var(--ccg-font);
font-weight: 900;
font-size: 22px;
color: var(--ccg-amber);
text-shadow:
0 0 8px rgba(255, 220, 100, 0.9),
2px 2px 0 var(--ccg-stroke),
-2px -2px 0 var(--ccg-stroke),
2px -2px 0 var(--ccg-stroke),
-2px 2px 0 var(--ccg-stroke);
letter-spacing: 0.05em;
--tx: 0;
animation: ccg-score-pop 1100ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.ccg-score-pop.is-mint { color: #b6f0a3; text-shadow: 0 0 8px rgba(140, 220, 110, 0.9), 2px 2px 0 var(--ccg-stroke), -2px -2px 0 var(--ccg-stroke), 2px -2px 0 var(--ccg-stroke), -2px 2px 0 var(--ccg-stroke); }
@keyframes ccg-score-pop {
0% { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
20% { transform: translate(calc(-50% + var(--tx)), -8px) scale(1.2); opacity: 1; }
65% { transform: translate(calc(-50% + var(--tx)), -32px) scale(1); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), -64px) scale(0.85); opacity: 0; }
}
/* ===== "PERFECT!" overlay ===== */
.ccg-popup {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: 9;
pointer-events: none;
font-family: var(--ccg-font);
font-weight: 900;
font-size: clamp(28px, 5vw, 44px);
color: #fff;
text-shadow:
3px 3px 0 var(--ccg-stroke),
-3px -3px 0 var(--ccg-stroke),
3px -3px 0 var(--ccg-stroke),
-3px 3px 0 var(--ccg-stroke),
0 0 20px var(--ccg-amber),
0 0 40px var(--ccg-glow-warm);
letter-spacing: 0.08em;
background: linear-gradient(180deg, #fff 0%, var(--ccg-amber) 50%, var(--ccg-amber-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: ccg-popup 1300ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.ccg-popup::before, .ccg-popup::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 220, 100, 0.5) 0%, transparent 60%);
transform: translate(-50%, -50%);
z-index: -1;
animation: ccg-popup-glow 1300ms ease-out forwards;
}
.ccg-popup::after {
background:
conic-gradient(from 0deg, transparent 0deg 18deg, rgba(255, 220, 100, 0.5) 22deg, transparent 26deg,
transparent 44deg, rgba(255, 220, 100, 0.5) 48deg, transparent 52deg,
transparent 70deg, rgba(255, 220, 100, 0.5) 74deg, transparent 78deg,
transparent 96deg, rgba(255, 220, 100, 0.5) 100deg, transparent 104deg,
transparent 122deg, rgba(255, 220, 100, 0.5) 126deg, transparent 130deg,
transparent 148deg, rgba(255, 220, 100, 0.5) 152deg, transparent 156deg,
transparent 174deg, rgba(255, 220, 100, 0.5) 178deg, transparent 182deg,
transparent 200deg, rgba(255, 220, 100, 0.5) 204deg, transparent 208deg,
transparent 226deg, rgba(255, 220, 100, 0.5) 230deg, transparent 234deg,
transparent 252deg, rgba(255, 220, 100, 0.5) 256deg, transparent 260deg,
transparent 278deg, rgba(255, 220, 100, 0.5) 282deg, transparent 286deg,
transparent 304deg, rgba(255, 220, 100, 0.5) 308deg, transparent 312deg,
transparent 330deg, rgba(255, 220, 100, 0.5) 334deg, transparent 338deg,
transparent 356deg);
width: 280px; height: 280px;
animation: ccg-popup-rays 1300ms linear forwards;
filter: blur(0.5px);
background-size: cover;
}
@keyframes ccg-popup {
0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
25% { transform: translate(-50%, -50%) scale(1.15) rotate(8deg); opacity: 1; }
40% { transform: translate(-50%, -50%) scale(0.95) rotate(-3deg); opacity: 1; }
55% { transform: translate(-50%, -50%) scale(1.05) rotate(0); opacity: 1; }
80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.2) rotate(0); opacity: 0; }
}
@keyframes ccg-popup-glow {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
30% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes ccg-popup-rays {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
30% { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(45deg); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(180deg); }
}
/* ===== HP-bar gauge progress ===== */
.ccg-progress {
position: absolute;
bottom: -18%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
background: linear-gradient(180deg, var(--ccg-stroke) 0%, var(--ccg-chocolate-deep) 100%);
border: 2px solid rgba(255, 230, 184, 0.4);
border-radius: var(--ccg-radius-pill);
box-shadow:
0 4px 0 rgba(0, 0, 0, 0.3),
0 8px 16px rgba(42, 24, 16, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
z-index: 6;
}
.ccg-progress-num {
font-family: var(--ccg-font);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--ccg-amber);
text-shadow: 0 0 8px var(--ccg-glow-amber), 0 1px 0 rgba(0, 0, 0, 0.5);
min-width: 40px;
text-align: center;
transition: transform 380ms var(--ccg-spring);
}
.ccg-progress-num.is-bumped { transform: scale(1.5); }
.ccg-progress-num.is-done {
color: #b6f0a3;
text-shadow: 0 0 12px rgba(140, 220, 110, 0.9), 0 1px 0 rgba(0, 0, 0, 0.5);
}
/* segmented HP-bar (replaces pip dots) */
.ccg-progress-bar {
display: flex;
gap: 3px;
padding: 3px;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ccg-progress-bar i {
display: block;
width: 18px; height: 14px;
border-radius: 2px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.18) 100%);
transition: background .35s, box-shadow .35s, transform .4s var(--ccg-spring);
}
.ccg-progress-bar i.is-on {
background:
linear-gradient(180deg, #fff7d4 0%, var(--ccg-amber) 50%, var(--ccg-amber-deep) 100%);
box-shadow:
0 0 10px var(--ccg-amber),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transform: scaleY(1.05);
}
.ccg-progress-bar.is-full i.is-on {
background:
linear-gradient(180deg, #e8ffd0 0%, #82c050 50%, #4a8030 100%);
box-shadow:
0 0 12px rgba(140, 220, 110, 0.85),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* ===== confetti ===== */
.ccg-confetti {
position: absolute;
inset: -20%;
pointer-events: none;
z-index: 6;
}
.ccg-conf-piece {
position: absolute;
left: 50%; top: 50%;
width: 10px; height: 16px;
background: var(--ccg-amber);
border-radius: 2px;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
--tx: 0; --ty: 0; --r: 0deg;
animation: ccg-confetti 1500ms cubic-bezier(.16, .79, .31, 1) forwards;
}
.ccg-conf-piece.is-back { z-index: 0; opacity: 0.5; filter: blur(2.5px); }
.ccg-conf-piece.is-front { z-index: 8; }
.ccg-conf-piece.is-circle { border-radius: 50%; width: 8px; height: 8px; }
.ccg-conf-piece.is-strip { width: 4px; height: 18px; }
.ccg-conf-piece.is-star {
background: transparent;
width: 14px; height: 14px;
background-image:
linear-gradient(0deg, transparent 47%, #fff 49.5%, #fff 50.5%, transparent 53%),
linear-gradient(90deg, transparent 47%, #fff 49.5%, #fff 50.5%, transparent 53%);
filter: drop-shadow(0 0 4px var(--ccg-amber));
box-shadow: none;
border-radius: 0;
}
.ccg-conf-piece.is-pixel {
width: 10px; height: 10px;
border-radius: 0;
box-shadow:
inset -2px -2px 0 rgba(0, 0, 0, 0.32),
inset 2px 2px 0 rgba(255, 255, 255, 0.30);
image-rendering: pixelated;
}
@keyframes ccg-confetti {
0% { transform: translate(-50%, -50%) rotate(0deg) scale(.4); opacity: 1; }
15% { opacity: 1; transform: translate(calc(-50% + var(--tx) * .2), calc(-50% + var(--ty) * .2)) rotate(calc(var(--r) * .2)) scale(1); }
85% { opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(0.8); opacity: 0; }
}
/* ============================================================================
* Copy column
* ========================================================================== */
.ccg-copy {
position: relative;
z-index: 4;
min-width: 0;
padding-right: 90px; /* room for bottle mascot */
}
.ccg-copy h2 {
margin: 0 0 8px;
font-size: clamp(19px, 2.7vw, 24px);
font-weight: 900;
letter-spacing: 0.01em;
color: var(--ccg-text);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 4px rgba(42, 24, 16, 0.08);
display: flex;
align-items: center;
gap: 10px;
line-height: 1.35;
}
.ccg-copy h2 .ccg-h-icon {
width: 28px; height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, #fff 0 8%, var(--ccg-amber) 9% 55%, var(--ccg-amber-deep) 100%);
border: 2px solid var(--ccg-stroke);
box-shadow:
0 3px 0 var(--ccg-stroke),
0 6px 10px rgba(244, 163, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
position: relative;
}
.ccg-copy h2 .ccg-h-icon::before,
.ccg-copy h2 .ccg-h-icon::after {
content: "";
position: absolute;
background: var(--ccg-chocolate-deep);
border-radius: 50%;
}
.ccg-copy h2 .ccg-h-icon::before { width: 5px; height: 5px; top: 28%; left: 28%; }
.ccg-copy h2 .ccg-h-icon::after { width: 4px; height: 4px; bottom: 28%; right: 30%; }
.ccg-copy .ccg-tag {
display: inline-block;
padding: 2px 10px;
margin-bottom: 6px;
background: linear-gradient(180deg, var(--ccg-rose-deep), #d83c5e);
color: #fff;
border-radius: var(--ccg-radius-pill);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-transform: uppercase;
}
.ccg-copy p {
margin: 0 0 12px;
font-size: 13.5px;
line-height: 1.7;
color: var(--ccg-text-soft);
letter-spacing: 0.005em;
}
.ccg-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: linear-gradient(180deg, var(--ccg-stroke) 0%, var(--ccg-chocolate-deep) 100%);
color: #fff;
border: 1.5px solid rgba(255, 230, 184, 0.45);
border-radius: var(--ccg-radius-pill);
font-size: 12px;
font-weight: 700;
margin-bottom: 14px;
min-height: 26px;
box-shadow:
0 4px 0 rgba(0, 0, 0, 0.2),
0 6px 12px rgba(42, 24, 16, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: background 380ms ease;
}
.ccg-status::before {
content: "";
width: 8px; height: 8px;
background: radial-gradient(circle, var(--ccg-amber), var(--ccg-amber-deep));
border-radius: 50%;
box-shadow: 0 0 8px var(--ccg-amber);
animation: ccg-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ccg-pulse-dot {
0%, 100% { opacity: .55; transform: scale(.8); }
50% { opacity: 1; transform: scale(1.25); }
}
.ccg-status.ccg-status-done {
background: linear-gradient(180deg, #4a8030 0%, #2f5a1e 100%);
box-shadow:
0 4px 0 rgba(0, 0, 0, 0.2),
0 6px 14px rgba(70, 130, 50, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ccg-status.ccg-status-done::before {
background: radial-gradient(circle, #fff, #b6f0a3);
box-shadow: 0 0 10px #b6f0a3;
animation: none;
}
.ccg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* ===== Buttons ===== */
.ccg-btn {
appearance: none;
border: 0;
background: linear-gradient(180deg, #fff 0%, #fff5e0 100%);
color: var(--ccg-text);
padding: 10px 18px;
border-radius: var(--ccg-radius-pill);
font-weight: 800;
font-size: 12.5px;
cursor: pointer;
box-shadow:
0 0 0 2px var(--ccg-stroke),
0 4px 0 var(--ccg-stroke),
0 8px 14px -2px rgba(42, 24, 16, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: transform 140ms var(--ccg-out), box-shadow 140ms var(--ccg-out);
line-height: 1.2;
letter-spacing: 0.02em;
font-family: inherit;
position: relative;
overflow: hidden;
}
.ccg-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
transform: translateX(-100%);
pointer-events: none;
}
.ccg-btn:hover::after { animation: ccg-shimmer 720ms ease-out; }
@keyframes ccg-shimmer {
to { transform: translateX(100%); }
}
.ccg-btn:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px var(--ccg-stroke),
0 6px 0 var(--ccg-stroke),
0 12px 20px -2px rgba(42, 24, 16, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ccg-btn:active {
transform: translateY(3px);
box-shadow:
0 0 0 2px var(--ccg-stroke),
0 1px 0 var(--ccg-stroke),
0 2px 4px rgba(42, 24, 16, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ccg-btn-link {
background: none;
color: var(--ccg-text-soft);
text-decoration: underline;
padding: 6px 8px;
font-weight: 700;
font-size: 12px;
cursor: pointer;
box-shadow: none;
font-family: inherit;
border: 0;
}
.ccg-btn-link:hover { color: var(--ccg-amber-deep); transform: none; box-shadow: none; }
.ccg-btn-link:active { transform: none; box-shadow: none; }
.ccg-btn-link::after { display: none; }
.ccg-btn-primary {
background:
linear-gradient(180deg, #ffba6b 0%, var(--ccg-amber) 45%, var(--ccg-amber-deep) 100%);
color: #fff;
text-shadow: 0 1px 0 var(--ccg-amber-deep), 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow:
0 0 0 2px var(--ccg-stroke),
0 4px 0 var(--ccg-stroke),
0 0 18px var(--ccg-glow-amber),
0 8px 16px -2px rgba(244, 163, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ccg-btn-primary:hover { filter: brightness(1.06); }
@media (max-width: 740px) {
.ccg-banner {
grid-template-columns: 140px 1fr;
padding: 16px 16px 18px;
gap: 12px 14px;
}
.ccg-copy { padding-right: 0; }
.ccg-copy h2 { font-size: 16px !important; }
.ccg-copy p { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.ccg-mascot.is-rabbit, .ccg-mascot.is-bottle { display: none; }
.ccg-tap-hint { font-size: 11px; padding: 6px 12px; }
.ccg-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
.ccg-actions { gap: 6px; }
.ccg-status { font-size: 11px; padding: 5px 12px; margin-bottom: 8px; }
}
@media (max-width: 380px) {
.ccg-banner {
grid-template-columns: 110px 1fr;
padding: 14px 12px 16px;
gap: 10px;
}
.ccg-copy h2 { font-size: 14.5px !important; gap: 6px; }
.ccg-copy h2 .ccg-h-icon { width: 22px; height: 22px; }
.ccg-copy p { font-size: 11.5px; margin-bottom: 6px; }
.ccg-tag { font-size: 9.5px; padding: 2px 8px; margin-bottom: 4px; }
.ccg-btn { padding: 7px 12px; font-size: 11.5px; }
.ccg-btn-link { font-size: 11px; padding: 4px 6px; }
.ccg-tap-hint { font-size: 10px; padding: 5px 10px; gap: 4px; }
.ccg-tap-hint .ccg-tap-icon { font-size: 13px; }
.ccg-progress { padding: 4px 10px; gap: 6px; bottom: -22%; }
.ccg-progress-bar i { width: 14px; height: 11px; }
.ccg-progress-num { font-size: 12px; min-width: 32px; }
}
/* ============================================================================
* Settings modal
* ========================================================================== */
.ccg-modal-bg {
position: fixed; inset: 0;
background: rgba(20, 12, 6, 0.6);
z-index: 999999;
display: grid; place-items: center;
padding: 16px;
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
animation: ccg-fade 280ms var(--ccg-out);
}
@keyframes ccg-fade { from { opacity: 0; } to { opacity: 1; } }
.ccg-modal {
background: linear-gradient(180deg,
rgba(255, 250, 240, 0.96) 0%,
rgba(255, 232, 200, 0.92) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.6);
border-radius: var(--ccg-radius);
box-shadow: var(--ccg-shadow-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
width: min(580px, 100%);
padding: 28px 30px 22px;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
animation: ccg-modal-in 480ms var(--ccg-spring);
}
@keyframes ccg-modal-in {
0% { transform: translateY(20px) scale(0.94); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ccg-modal::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.12;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.ccg-modal h3 {
margin: 0 0 18px;
font-size: 20px; font-weight: 900;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
display: flex; align-items: center; gap: 12px;
position: relative;
line-height: 1.3;
}
.ccg-modal h3 .ccg-h-icon {
width: 28px; height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, #fff 0 8%, var(--ccg-amber) 9% 55%, var(--ccg-amber-deep) 100%);
border: 2px solid var(--ccg-stroke);
box-shadow:
0 3px 0 var(--ccg-stroke),
0 6px 10px rgba(244, 163, 0, 0.35);
position: relative;
}
.ccg-modal h3 .ccg-h-icon::before,
.ccg-modal h3 .ccg-h-icon::after {
content: "";
position: absolute;
background: var(--ccg-chocolate-deep);
border-radius: 50%;
}
.ccg-modal h3 .ccg-h-icon::before { width: 5px; height: 5px; top: 28%; left: 28%; }
.ccg-modal h3 .ccg-h-icon::after { width: 4px; height: 4px; bottom: 28%; right: 30%; }
.ccg-cat {
display: flex; gap: 16px; align-items: flex-start;
padding: 14px 0;
border-top: 1.5px solid rgba(42, 24, 16, 0.12);
position: relative;
}
.ccg-cat:first-of-type { border-top: 0; }
.ccg-cat-text { flex: 1; }
.ccg-cat-text strong { display: block; font-size: 14.5px; margin-bottom: 4px; font-weight: 800; }
.ccg-cat-text small { color: var(--ccg-text-soft); font-size: 12px; line-height: 1.6; display: block; }
.ccg-toggle {
position: relative;
width: 56px; height: 30px;
flex: 0 0 auto;
margin-top: 2px;
}
.ccg-toggle input {
opacity: 0; width: 100%; height: 100%;
position: absolute; margin: 0; cursor: pointer;
}
.ccg-toggle-slider {
position: absolute; inset: 0;
background: linear-gradient(180deg, #d3c2a8, #a89178);
border: 2px solid var(--ccg-stroke);
border-radius: var(--ccg-radius-pill);
transition: background 280ms;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}
.ccg-toggle-slider::before {
content: "";
position: absolute;
width: 20px; height: 20px;
background: linear-gradient(180deg, #fff, #fff5e0);
border: 2px solid var(--ccg-stroke);
border-radius: 50%;
top: 50%; left: 2px;
transform: translateY(-50%);
transition: left 280ms var(--ccg-spring), background .25s;
box-shadow:
0 2px 0 rgba(42, 24, 16, 0.3),
0 4px 8px rgba(42, 24, 16, 0.15);
}
.ccg-toggle input:checked + .ccg-toggle-slider {
background: linear-gradient(180deg, #82c050, #4a8030);
}
.ccg-toggle input:checked + .ccg-toggle-slider::before { left: 28px; }
.ccg-toggle input:disabled + .ccg-toggle-slider {
background: linear-gradient(180deg, var(--ccg-stroke), var(--ccg-chocolate-deep));
cursor: not-allowed;
opacity: .65;
}
.ccg-toggle input:focus-visible + .ccg-toggle-slider {
outline: 3px solid var(--ccg-amber);
outline-offset: 3px;
}
.ccg-modal-actions {
display: flex; justify-content: flex-end; gap: 10px;
margin-top: 20px; flex-wrap: wrap; position: relative;
}
.ccg-noscript {
background: #fff5d6;
color: var(--ccg-text-soft);
padding: 8px 12px; text-align: center; font-size: 12px;
border-top: 1.5px solid var(--ccg-stroke);
}
/* ============================================================================
* Tap affordance — pulse rings, TAP ME! bubble, mascot speech bubble
* ========================================================================== */
/* concentric pulse rings around the cookie (idle attention-getter) */
.ccg-pulse-ring {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.ccg-pulse-ring span {
position: absolute;
left: 50%; top: 50%;
width: 80%; height: 80%;
transform: translate(-50%, -50%) scale(0.6);
border-radius: 50%;
border: 3px solid var(--ccg-amber);
opacity: 0;
animation: ccg-ring 2.4s ease-out infinite;
}
.ccg-pulse-ring span:nth-child(1) { animation-delay: 0s; }
.ccg-pulse-ring span:nth-child(2) { animation-delay: -0.8s; border-color: var(--ccg-coral); }
.ccg-pulse-ring span:nth-child(3) { animation-delay: -1.6s; border-color: var(--ccg-gold); }
@keyframes ccg-ring {
0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0; border-width: 4px; }
20% { opacity: 0.9; }
100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; border-width: 1px; }
}
.ccg-cookie.ccg-tapped + .ccg-pulse-ring,
.ccg-stage.ccg-engaged .ccg-pulse-ring { display: none; }
/* "TAP ME!" pixel-game style speech bubble above the cookie */
.ccg-tap-hint {
position: absolute;
top: -14%;
left: 50%;
transform: translateX(-50%);
z-index: 7;
pointer-events: none;
background: linear-gradient(180deg, var(--ccg-amber) 0%, var(--ccg-accent) 100%);
color: #fff;
border: 0;
padding: 8px 18px;
border-radius: 8px;
font-weight: 900;
font-size: 13px;
letter-spacing: 0.10em;
text-shadow:
2px 2px 0 var(--ccg-stroke),
-1px -1px 0 var(--ccg-stroke),
2px -1px 0 var(--ccg-stroke),
-1px 2px 0 var(--ccg-stroke),
0 2px 4px rgba(0, 0, 0, 0.4);
box-shadow:
0 0 0 3px var(--ccg-stroke),
0 5px 0 var(--ccg-stroke),
0 0 18px var(--ccg-glow-amber),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -2px 0 rgba(0, 0, 0, 0.18);
white-space: nowrap;
animation: ccg-tap-hint-bob 1.0s ease-in-out infinite;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
image-rendering: pixelated;
}
/* clean triangle tail with stroke shadow */
.ccg-tap-hint::after {
content: "";
position: absolute;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid var(--ccg-accent);
filter: drop-shadow(0 3px 0 var(--ccg-stroke));
}
.ccg-tap-hint::before { display: none; }
.ccg-tap-hint .ccg-tap-icon {
display: inline-block;
font-size: 16px;
animation: ccg-tap-poke 1.0s ease-in-out infinite;
transform-origin: 50% 80%;
filter: drop-shadow(1px 1px 0 var(--ccg-stroke));
}
@keyframes ccg-tap-hint-bob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-6px); }
}
@keyframes ccg-tap-poke {
0%, 100% { transform: translateY(0) rotate(-8deg); }
50% { transform: translateY(3px) rotate(2deg); }
}
.ccg-stage.ccg-engaged .ccg-tap-hint { display: none; }
/* Mascot speech bubble */
.ccg-mascot-bubble {
position: absolute;
top: -28px;
right: 100%;
margin-right: 8px;
background: linear-gradient(180deg, #fff 0%, #fff5dc 100%);
color: var(--ccg-text);
border: 0;
padding: 6px 12px;
border-radius: 14px;
font-weight: 800;
font-size: 11.5px;
letter-spacing: 0.02em;
line-height: 1.35;
box-shadow:
0 0 0 2px var(--ccg-stroke),
0 3px 0 var(--ccg-stroke);
white-space: nowrap;
animation: ccg-bubble-pop 800ms var(--ccg-spring) both;
z-index: 6;
}
.ccg-mascot.is-rabbit .ccg-mascot-bubble {
right: auto;
left: 100%;
margin-right: 0;
margin-left: 8px;
}
.ccg-mascot-bubble::after {
content: "";
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid var(--ccg-stroke);
}
.ccg-mascot.is-rabbit .ccg-mascot-bubble::after {
right: auto;
left: -10px;
border-left: 0;
border-right: 10px solid var(--ccg-stroke);
}
@keyframes ccg-bubble-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.ccg-stage.ccg-engaged ~ .ccg-mascot .ccg-mascot-bubble { display: none; }
/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ccg-banner, .ccg-cookie, .ccg-cookie.ccg-shake, .ccg-cookie.ccg-flash, .ccg-cookie.ccg-celebrate,
.ccg-chip-orbit span, .ccg-particle, .ccg-bite, .ccg-deco-stars span, .ccg-aura,
.ccg-status::before, .ccg-conf-piece, .ccg-bg-blobs span, .ccg-bg-clouds span,
.ccg-bg-bokeh span, .ccg-mascot, .ccg-mascot.ccg-cheer, .ccg-eye, .ccg-modal,
.ccg-shockwave, .ccg-popup, .ccg-popup::before, .ccg-popup::after, .ccg-score-pop,
.ccg-banner.ccg-screenshake, .ccg-pulse-ring span, .ccg-tap-hint, .ccg-tap-icon,
.ccg-mascot-bubble {
animation: none !important;
transition: opacity 1ms !important;
}
.ccg-banner { transform: translateX(-50%) translateY(0) !important; }
}