/* Plik: eggs.css (Twoja nowa wersja) */

/* kontener jaja — kształt jajka */
.egg {
    width: 160px;
    height: 210px;
    position: relative;
    border-radius: 50% 50% 44% 44% / 60% 60% 40% 40%; /* kształt jajka */
    display: inline-block;
    /* obwódka "skorupki" delikatna */
    box-shadow: 0 0 0 8px rgba(255, 245, 235, 0.95) inset;
    
    /* WAŻNE: Dodajemy overflow: hidden, aby obcinać wodę */
    overflow: hidden;
}

/* biała część (albumen) — wewnętrzne wcięcie */
.egg .white {
    position: absolute;
    inset: 14px; /* margines od skorupki */
    border-radius: inherit;
    background: #fffdf8; /* lekko kremowy biały */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* żółtko: bazowy kształt - okrąg */
.yolk {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: block;
    position: relative;
    box-shadow: none;
    transition: all 0.2s ease-out; /* Dodałem płynne przejście */
}

/* warianty żółtka */
/* miękko - płynne, bardziej nasycone środko + "plamka" płynnej struktury */
.yolk.soft {
    background: radial-gradient(circle at 50% 45%, #ffb238 0%, #ff971a 65%);
    box-shadow: 0 0 0 10px rgba(255, 180, 56, 0.15);
}
.yolk.soft::after {
    content: "";
    position: absolute;
    left: 52%;
    top: 18%;
    width: 32px;
    height: 22px;
    background: #ffb238;
    border-radius: 50% 50% 60% 60% / 50% 50% 70% 70%;
    transform: translate(-50%, -50%) rotate(-15deg);
    opacity: 0.95;
}

/* półtwardo - żółtko częściowo ścięte: średnio nasycone, lekka obwódka */
.yolk.medium {
    background: radial-gradient(circle at 50% 50%, #ffbf3b 0%, #f7a21c 80%);
    width: 78px;
    height: 78px;
    box-shadow: 0 0 0 8px rgba(247, 162, 28, 0.12);
}
.yolk.medium::after {
    content: "";
    position: absolute;
    left: 36%;
    top: 25%;
    width: 18px;
    height: 12px;
    background: rgba(255, 230, 150, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
}

/* twardo - całkowicie ścięte, równomierny kolor */
.yolk.hard {
    background: linear-gradient(#ffd44d, #ffcf2a);
    width: 72px;
    height: 72px;
    box-shadow: 0 0 0 6px rgba(255, 210, 80, 0.08);
}

/* responsywność (zostawiamy, przyda się!) */
@media (max-width:520px) {
    .egg {
        width: 120px;
        height: 160px;
    }
    .yolk {
        transform: scale(0.85);
    }
}