/* pizza-tycoon/style.css */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    background-color: #f1f5f9; /* slate-100 */
    color: #1e293b; /* slate-800 */
    letter-spacing: -0.02em;
}

/* Pizza Visuals */
.pizza-board {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

.wood-board {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 320px;
    height: 320px;
    background: #a16207;
    border-radius: 50%;
    z-index: 0;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    border: 4px solid #713f12;
}

.wood-board::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.05) 10px,
        transparent 10px,
        transparent 20px
    );
}

.pizza-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start at 12 o'clock */
}

.crust {
    fill: #f59e0b;
    stroke: #d97706;
    stroke-width: 6;
}

.cheese {
    fill: #fcd34d;
}

.sauce {
    fill: #ef4444;
}

/* Topping pattern */
.pepperoni {
    fill: #b91c1c;
    stroke: #991b1b;
    stroke-width: 1;
}

.slice-indicator {
    fill: rgba(249, 115, 22, 0.3); /* Changed to an orange tint to match the new UI */
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 5, 5;
    /* transition removed to prevent SVG path morphing glitches during slider drag */
}

.cut-line {
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 5, 5;
    /* transition removed */
}

/* Animations */
@keyframes slideOut {
    0% { transform: rotate(-90deg) scale(1) translate(0, 0); opacity: 1; filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); }
    30% { transform: rotate(-90deg) scale(1.05) translate(-10px, 15px); opacity: 1; filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.3)); }
    100% { transform: rotate(-90deg) scale(0.8) translate(-120px, 50px) rotate(15deg); opacity: 0; filter: drop-shadow(5px 15px 10px rgba(0,0,0,0.5)); }
}

.slice-animating {
    animation: slideOut 1s forwards cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: 50% 50%;
}

@keyframes moneyFloat {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}

.money-popup {
    position: absolute;
    color: #16a34a;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 0px white;
    pointer-events: none;
    animation: moneyFloat 1s forwards ease-out;
    z-index: 50;
    top: 50%;
    left: 50%;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Range Slider Styling */
input[type=range] {
    -webkit-appearance: none; 
    background: transparent; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #f97316; /* orange-500 */
    cursor: pointer;
    margin-top: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 3px solid white;
    transition: transform 0.1s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #e2e8f0; /* slate-200 */
    border-radius: 4px;
    border: none;
}