/* Base Layout */
body {
    -webkit-tap-highlight-color: transparent;
}

/* Animations */
@keyframes steam {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-20px) scale(1.5);
        opacity: 0;
    }
}

.animate-steam {
    animation: steam 2s infinite;
}

/* Pizza Shapes (CSS Art) */
.pizza-shape {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #fcd34d;
    /* Crust/Cheese base */
    border: 8px solid #d97706;
    /* Crust edge */
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pizza-shape:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.pizza-shape:active {
    transform: scale(0.95);
}

/* Toppings (Pepperoni) */
.topping {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    opacity: 0.8;
}

/* Fraction Slices using Conic Gradients */

/* 1/2 Vertical */
.cut-half-vertical {
    background-image: linear-gradient(90deg, transparent 48%, #92400e 48%, #92400e 52%, transparent 52%);
}

/* 1/4 Cross */
.cut-quarter {
    background-image:
        linear-gradient(90deg, transparent 48%, #92400e 48%, #92400e 52%, transparent 52%),
        linear-gradient(0deg, transparent 48%, #92400e 48%, #92400e 52%, transparent 52%);
}

/* 1/3 (Unequal/Wrong for Half) */
.cut-thirds {
    background-image: conic-gradient(transparent 0deg, transparent 120deg, #92400e 120deg, #92400e 122deg, transparent 122deg, transparent 240deg, #92400e 240deg, #92400e 242deg, transparent 242deg);
}

/* Unequal "Half" (One small slice) */
.cut-unequal {
    background-image: linear-gradient(90deg, transparent 70%, #92400e 70%, #92400e 74%, transparent 74%);
}

/* Highlight Selected or Target */
.pizza-shape.highlight {
    background: #fef3c7;
    filter: brightness(1.1);
}

/* Cookie */
.cookie-item {
    font-size: 3.5rem;
    /* ~56px */
    cursor: grab;
    user-select: none;
    transition: transform 0.1s;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

.cookie-item:active {
    cursor: grabbing;
    transform: scale(1.2);
    z-index: 50;
}