/* Общие стили */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f7fc; color: #333; display: flex; justify-content: center; align-items: center; } /* Контейнер для контента */ .container { max-width: 600px; width: 100%; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); font-size: 16px; } /* Заголовки */ .title { font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 20px; color: #e26f22; } .section { margin-bottom: 20px; } .section h2 { font-size: 20px; margin-bottom: 10px; color: #e26f22; } .section p { margin: 5px 0; } .section span { font-weight: bold; } /* Кнопка */ .button { display: block; background-color: #e26f22; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 16px; margin-top: 20px; text-align: center; width: 100%; } /* Профиль */ .profile-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .profile-img { width: 100px; height: 100px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .progress-circle { display: flex; flex-direction: column; align-items: center; } .circle-container { position: relative; width: 100px; height: 100px; margin-bottom: 10px; } .circle { stroke-width: 10; fill: transparent; transform-origin: center; transform: rotate(-90deg); } .background-ring { stroke: #ddd; } .progress-ring { stroke: #e26f22; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1s; } .circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; } /* Прогресс-бары */ .progress-bar { background-color: #ddd; border-radius: 10px; height: 10px; width: 100%; margin-bottom: 10px; overflow: hidden; width: 0; } .progress-hp, .progress-stamina { height: 100%; border-radius: 10px; transition: width 0.5s ease; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 14px; color: white; } .progress-hp { background-color: #e26f22; } .progress-stamina { background-color: #4ba100; } /* Статистика игрока */ .fire-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; background-color: #f9f9f9; padding: 10px; margin-top: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .fire-stats .stat { text-align: center; } .fire-stats .stat span { font-weight: bold; } /* Предприятия */ .enterprise { padding: 15px; background-color: #f9f9f9; border-radius: 10px; margin-top: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .enterprise strong { display: block; margin-bottom: 5px; } .progress-bar-inner { background-color: #e26f22; height: 10px; border-radius: 5px; transition: width 0.5s ease; } /* Анимация прогресс-бара от 100 до значений персонажа */ .progress-bar-inner.hp { width: 100%; } .progress-bar-inner.stamina { width: 100%; }