/* ===================================
   cake.css — 多层蛋糕 + 蜡烛 + 装饰
   奶油滴落、糖果碎、波浪边
   =================================== */

.cake-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.cake {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s var(--ease-bounce);
    transform: scale(0.88);
    transform-origin: bottom center;
}

.cake.bouncing {
    animation: cake-bounce 0.6s var(--ease-bounce);
}

@keyframes cake-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.08) translateY(-10px); }
    50%  { transform: scale(0.95) translateY(-3px); }
    70%  { transform: scale(1.03) translateY(-5px); }
    100% { transform: scale(1) translateY(0); }
}

/* ---- 每层蛋糕通用 ---- */
.cake-layer {
    position: relative;
    border-radius: 14px;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.08),
        inset 0 3px 0 rgba(255,255,255,0.35);
    overflow: hidden;
}

/* ==================== 奶油滴落效果 ==================== */
.cream-drip {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
    background:
        radial-gradient(ellipse 14px 18px at 8%  0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 16px 20px at 20% 0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 12px 15px at 33% 0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 18px 22px at 47% 0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 13px 16px at 60% 0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 15px 19px at 73% 0, #FFF8F0 80%, transparent 80%),
        radial-gradient(ellipse 14px 18px at 88% 0, #FFF8F0 80%, transparent 80%);
}

.cream-drip-yellow {
    background:
        radial-gradient(ellipse 15px 19px at 10% 0, #FFFDE8 80%, transparent 80%),
        radial-gradient(ellipse 13px 16px at 25% 0, #FFFDE8 80%, transparent 80%),
        radial-gradient(ellipse 17px 21px at 40% 0, #FFFDE8 80%, transparent 80%),
        radial-gradient(ellipse 14px 18px at 55% 0, #FFFDE8 80%, transparent 80%),
        radial-gradient(ellipse 16px 20px at 70% 0, #FFFDE8 80%, transparent 80%),
        radial-gradient(ellipse 13px 17px at 88% 0, #FFFDE8 80%, transparent 80%);
}

.cream-drip-mint {
    background:
        radial-gradient(ellipse 16px 20px at 7%  0, #F0FFF5 80%, transparent 80%),
        radial-gradient(ellipse 14px 18px at 22% 0, #F0FFF5 80%, transparent 80%),
        radial-gradient(ellipse 18px 22px at 38% 0, #F0FFF5 80%, transparent 80%),
        radial-gradient(ellipse 15px 19px at 53% 0, #F0FFF5 80%, transparent 80%),
        radial-gradient(ellipse 17px 21px at 68% 0, #F0FFF5 80%, transparent 80%),
        radial-gradient(ellipse 14px 18px at 85% 0, #F0FFF5 80%, transparent 80%);
}

/* ==================== 表面糖果碎 ==================== */
.candy-crumbs {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
}

.crumb {
    position: absolute; width: 6px; height: 6px;
    border-radius: 2px; transform: rotate(var(--rot, 15deg));
    opacity: 0.85; box-shadow: 0 0 2px rgba(255,255,255,0.5);
}

.crumb-lg { width: 9px; height: 9px; border-radius: 3px; }

.candy-crumbs .crumb:nth-child(1)  { --rot: 15deg; }
.candy-crumbs .crumb:nth-child(2)  { --rot: -20deg; }
.candy-crumbs .crumb:nth-child(3)  { --rot: 30deg; }
.candy-crumbs .crumb:nth-child(4)  { --rot: -10deg; }
.candy-crumbs .crumb:nth-child(5)  { --rot: 25deg; }
.candy-crumbs .crumb:nth-child(6)  { --rot: -35deg; }
.candy-crumbs .crumb:nth-child(7)  { --rot: 8deg; }

/* ==================== 顶层 ==================== */
.cake-top {
    width: 160px; height: 55px;
    background: linear-gradient(180deg, #FFE0E5 0%, #FFB7C5 100%);
    z-index: 3; display: flex; align-items: center; justify-content: center;
    overflow: visible;
}

/* ==================== 蜡烛 ==================== */
.candles {
    position: absolute; top: -55px; display: flex; gap: 20px; z-index: 5;
}

.candle {
    display: flex; flex-direction: column; align-items: center;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28'%3E%3Ctext y='24' font-size='22'%3E%F0%9F%94%A5%3C/text%3E%3C/svg%3E") 12 24, pointer;
    transition: transform 0.2s ease;
}

/* 默认熄灭 */
.flame { display: none; }
.flame.lit { display: block; }

.candle:hover { transform: scale(1.08); }

.candle-body {
    width: 14px; height: 45px; border-radius: 4px 4px 2px 2px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.candle-1 .candle-body { background: linear-gradient(180deg, #FFB7C5, #FF8E9E); }
.candle-2 .candle-body { background: linear-gradient(180deg, #FFEAA7, #FFD93D); }
.candle-3 .candle-body { background: linear-gradient(180deg, #C7CEEA, #A0B2D0); }

.wick { width: 2px; height: 6px; background: #333; border-radius: 1px; margin-top: -1px; }

.flame {
    position: relative; margin-bottom: -4px;
    animation: flicker 0.15s ease-in-out infinite alternate;
}

.flame-inner {
    width: 16px; height: 22px;
    background: radial-gradient(ellipse at bottom,
        #FFD700 0%, #FFA500 30%, #FF6348 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(0.5px);
    box-shadow:
        0 0 12px 6px rgba(255, 165, 0, 0.6),
        0 0 30px 14px rgba(255, 140, 0, 0.25),
        0 0 50px 22px rgba(255, 200, 0, 0.12);
}

.candle::after {
    content: ''; position: absolute; bottom: -2px; left: 50%;
    transform: translateX(-50%); width: 40px; height: 20px;
    background: radial-gradient(ellipse at center,
        rgba(255, 180, 50, 0.3) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}

@keyframes flicker {
    0%   { transform: scale(1, 1) rotate(-2deg); }
    25%  { transform: scale(1.05, 0.95) rotate(1deg); }
    50%  { transform: scale(0.95, 1.05) rotate(-1deg); }
    75%  { transform: scale(1.02, 0.98) rotate(2deg); }
    100% { transform: scale(1, 1) rotate(0deg); }
}

.flame.extinguished .flame-inner {
    animation: flame-out 0.5s ease-in forwards;
}

@keyframes flame-out {
    0%   { transform: scale(1); opacity: 1; filter: blur(0.5px); }
    50%  { transform: scale(0.5); opacity: 0.6; filter: blur(2px); }
    100% { transform: scale(0); opacity: 0; filter: blur(4px); }
}

.smoke {
    position: absolute; width: 8px; height: 8px;
    background: rgba(180, 180, 190, 0.6); border-radius: 50%;
    filter: blur(3px); pointer-events: none;
    animation: smoke-rise 1.5s ease-out forwards;
}

@keyframes smoke-rise {
    0%   { transform: translateY(0) scale(0.8); opacity: 0.8; }
    100% { transform: translateY(-60px) scale(2.5); opacity: 0; }
}

/* ==================== 中层 ==================== */
.cake-middle {
    width: 200px; height: 55px;
    background: linear-gradient(180deg, #FFF5DE 0%, #FFEAA7 100%);
    margin-top: -6px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}

.cream-waves {
    position: absolute; top: -9px; display: flex; gap: 6px; z-index: 2;
}

.cream-waves .wave {
    width: 18px; height: 14px; border-radius: 50%; background: #FFF8F0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), inset 0 -2px 4px rgba(0,0,0,0.04);
}

/* ==================== 底层 ==================== */
.cake-bottom {
    width: 240px; height: 55px;
    background: linear-gradient(180deg, #E8F8F0 0%, #B5EAD7 100%);
    margin-top: -6px; z-index: 1;
    display: flex; align-items: flex-end; justify-content: center;
}

.cake-plate {
    width: 280px; height: 14px;
    background: linear-gradient(180deg, #F8F8F8, #E0E0E0);
    border-radius: 0 0 140px 140px; margin-bottom: -6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 -2px 4px rgba(255,255,255,0.5);
}

/* ==================== 点击飞溅的糖屑 ==================== */
.sprinkles-container {
    position: absolute; pointer-events: none;
    top: 0; left: 0; width: 100%; height: 100%;
}

.sprinkle {
    position: absolute; width: 6px; height: 10px; border-radius: 2px;
    animation: sprinkle-fall 1.2s ease-out forwards;
}

@keyframes sprinkle-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--sprinkle-x), var(--sprinkle-y)) rotate(var(--sprinkle-r)); opacity: 0; }
}