.lcbp-mood-wrap, .lcbp-mood-wrap * { box-sizing: border-box; }
.lcbp-mood-wrap {
max-width: 760px;
margin: 16px auto;
padding: 10px 12px;
text-align: center;
font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
background: none;
}
.lcbp-mood-title {
margin: 0 0 30px;
font-size: clamp(18px, 2.6vw, 22px);
font-weight: 400;
color: var(--dc-heading, #2b2b2b);
}
.lcbp-mood-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 0px 5px;
margin: 0 0 1px;
} .lcbp-mood-row-good { margin-bottom: 28px; }
.lcbp-mood-row-bad { margin-bottom: 1px; }
.lcbp-mood-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: none;
border: none;
padding: 2px 2px;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.lcbp-mood-btn.is-hot,
.lcbp-mood-btn.is-active,
.lcbp-mood-btn:focus-visible {
z-index: 10;
} .lcbp-mood-emoji-wrap {
display: inline-block;
transform-origin: 50% 100%;
position: relative;
z-index: 1;
will-change: transform;
}
.lcbp-mood-btn.is-hot .lcbp-mood-emoji-wrap {
z-index: 5;
} .lcbp-mood-btn:focus-visible .lcbp-mood-emoji-wrap {
transform: scale(2.6);
transition: transform .3s ease;
}
.lcbp-mood-btn.is-active .lcbp-mood-emoji-wrap {
transform: scale(1.7);
transition: transform .18s ease;
} .lcbp-mood-emoji {
display: inline-block;
font-size: 80px;
line-height: 1;
transform-origin: 50% 100%;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.lcbp-mood-emoji img {
width: 1em;
height: 1em;
display: block;
pointer-events: none;
-webkit-user-drag: none;
} .lcbp-mood-row-active .lcbp-mood-emoji,
.lcbp-mood-btn:focus-visible .lcbp-mood-emoji {
animation: none;
transform: none;
}
.lcbp-anim-pulse     { animation-name: lcbpMoodPulse; }
.lcbp-anim-heartbeat { animation-name: lcbpMoodHeartbeat; }
.lcbp-anim-nod       { animation-name: lcbpMoodNod; }
.lcbp-anim-twinkle   { animation-name: lcbpMoodTwinkle; }
.lcbp-anim-tilt      { animation-name: lcbpMoodTilt; }
.lcbp-anim-tremble   { animation-name: lcbpMoodTremble; }
.lcbp-anim-droop     { animation-name: lcbpMoodDroop; } @keyframes lcbpMoodPulse {
0%, 78%   { transform: scale(1); }
89%       { transform: scale(2.5); }
100%      { transform: scale(1); }
} @keyframes lcbpMoodHeartbeat {
0%, 68%   { transform: scale(1); }
73%       { transform: scale(1.28); }
77%       { transform: scale(1); }
81%       { transform: scale(1.28); }
85%       { transform: scale(1); }
100%      { transform: scale(1); }
} @keyframes lcbpMoodNod {
0%, 80%   { transform: rotate(0deg); }
86%       { transform: rotate(-9deg); }
92%       { transform: rotate(7deg); }
100%      { transform: rotate(0deg); }
} @keyframes lcbpMoodTwinkle {
0%, 82%   { transform: scale(1) rotate(0deg); }
88%       { transform: scale(1.4) rotate(12deg); }
94%       { transform: scale(1) rotate(-5deg); }
100%      { transform: scale(1) rotate(0deg); }
} @keyframes lcbpMoodTilt {
0%, 74%   { transform: rotate(0deg); }
80%       { transform: rotate(-13deg); }
86%       { transform: rotate(0deg); }
91%       { transform: rotate(13deg); }
96%       { transform: rotate(0deg); }
100%      { transform: rotate(0deg); }
} @keyframes lcbpMoodTremble {
0%, 78%   { transform: translateX(0) rotate(0deg); }
80.5%     { transform: translateX(-3px) rotate(-3deg); }
83%       { transform: translateX(3px) rotate(3deg); }
85.5%     { transform: translateX(-3px) rotate(-3deg); }
88%       { transform: translateX(3px) rotate(3deg); }
90.5%     { transform: translateX(-2px) rotate(-1.5deg); }
93%       { transform: translateX(0) rotate(0deg); }
100%      { transform: translateX(0) rotate(0deg); }
} @keyframes lcbpMoodDroop {
0%, 70%   { transform: translateY(0) rotate(0deg); }
84%       { transform: translateY(5px) rotate(-4deg); }
93%       { transform: translateY(1px) rotate(2deg); }
100%      { transform: translateY(0) rotate(0deg); }
} .lcbp-mood-label {
position: absolute;
bottom: 210%;
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #3a3a3a; color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 9px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 20;
} .lcbp-mood-good .lcbp-mood-label {
background: #7a4238;
}
.lcbp-mood-btn.is-hot .lcbp-mood-label,
.lcbp-mood-btn:focus-visible .lcbp-mood-label,
.lcbp-mood-btn.is-active .lcbp-mood-label {
opacity: 1;
transform: translateX(-50%) translateY(0);
} .lcbp-mood-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
.lcbp-mood-row { gap: 4px 4px; }
.lcbp-mood-emoji { font-size: 44px; }
}