/*
 * Copyright (c) 2025 Власенко Олексій Віталійович
 */



html {
  scroll-behavior: smooth; /* делает переход к якорям плавным */
}
p {
  max-width: 60ch; /* ограничивает длину строки примерно 60 символами */
  line-height: 1.5; /* удобнее читать */
}

:root {
    /* Основные цвета */
    --bg-dark: #1F1133;
    --bg-primary: #301A4B; 
    --bg-light: #412E65; 

    --text-primary: #F4F4F4;
    --text-secondary: #cccccc; 

    --accent-primary: #FFD700; 
    --accent-light: #FFE066; 
    --accent-dark: #CCAA00; 

    --accent-secondary: #5BC0EB; 

  /* Базовые отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
    --border-radius-base: 10px;

    --transition: 0.3s;

      --border-radius-pill: 999px; /* на случай, если не было */
}

body {
    max-width: 1600px;
    margin: 0 auto ;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: var(--text-primary);

    background-image: url('images/magicpattern-starry-night-1757365786505.jpeg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;


    display: flex; /*Тут был grid... и он по чёрной магии ломал мобилки... я не знаю xD*/
    flex-direction: column;
    gap: var(--spacing-xl);
}


h1,h2,h3,h4,h5,h6 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.main-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Отступ между колонками */
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-sm);

}

main {
    grid-area: main;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);


}

main section:nth-child(odd), main form:nth-child(odd) {
    background-color: rgba(48, 26, 75, 0.7); 
    padding: var(--spacing-md);
}

main section:nth-child(even),  main form:nth-child(even) {
    background-color: rgba(65, 46, 92, 0.7);
        padding: var(--spacing-md);
}



/*
 * Стили для фиксированного nav-меню и прогресс-бара
 */
header {
    display: flex;
    flex-direction: column; /* <-- ИЗМЕНИЛИ С ROW НА COLUMN */
    align-items: center; /* Центрируем содержимое по горизонтали */
    padding: var(--spacing-lg);
    row-gap: var(--spacing-md);
    column-gap: var(--spacing-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background: linear-gradient(45deg, rgba(48, 26, 75, 0.6), rgba(31, 17, 51, 0.8));
    border-bottom-left-radius: var(--border-radius-base);
    border-bottom-right-radius: var(--border-radius-base);
}

/* Остальные стили для .logo, .header__sticky-bar и т.д. остаются без изменений. */

/* Логотип */
header .logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  align-self: flex-start;
}

.tabs {
    display: flex;
    gap: var(--spacing-sm);
    background-color: var(--bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--accent-dark);
    max-width: 300px;
    margin: 20px auto;
}

.tabs label {
    flex-grow: 1;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    color: var(--text-primary);
    background-color: transparent;
    border-radius: var(--border-radius-pill);
    transition: background-color var(--transition), color var(--transition);
}

.tabs input[type="radio"] {
    display: none;
}

.tabs input[type="radio"]:checked + label {
    background-color: var(--accent-primary);
    color: var(--bg-dark);
    font-weight: bold;
}

.tabs input[type="radio"]:hover + label {
    background-color: var(--bg-primary);
}

.progress-nav-menu {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
    position: fixed;
    top: 5%;  
  left: 50%; 
  transform: translate(-50%, -50%); 

  z-index: 1000;
  background-color: var(--bg-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-base);
}

/* Линия */
.progress-nav-line-container {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--bg-light);
  border-radius: var(--border-radius-pill);
  transform: translateY(-50%);
  z-index: 1;
}

.progress-nav-line {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: var(--border-radius-pill);
  transition: width 320ms cubic-bezier(.2,.9,.2,1);
  z-index: 2;
}

/* Список */
.progress-nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 3;
}

.progress-nav-item {
  flex: 1;
  text-align: center;
}

.progress-nav-link {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.progress-nav-link.active {
  color: var(--accent-primary);
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

/*
 * Стили для точек на прогресс-баре
 */

.progress-nav-link {
  position: relative;
}

/* Стиль для самой точки */
.progress-nav-link::after {
  content: '';
  position: absolute;
  /* Горизонтальное выравнивание по центру ссылки */
  left: 50%;
  /* Вертикальное смещение, чтобы точка оказалась на линии прогресса */
  top: 2rem; 
  transform: translateX(-50%);
  
  /* Внешний вид точки */
  width: 12px;
  height: 12px;
  background-color: var(--bg-light);
  border: 2px solid var(--bg-primary);
  border-radius: 50%;

  z-index: 4; 
  transition: background-color 0.3s ease;
}

/* Стиль для активной точки */
.progress-nav-link.active::after {
  background-color: var(--accent-primary);
}


/*
* Геройская секция (ну или HERO!)
*/


.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center; 
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-md); /*Никогда так снова не будем делать...*/

    
    background-image: url(images/hero.jpg);
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

.hero-content {

    display: flex;
    flex-direction: column; /* Располагаем элементы друг под другом */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center; /* Центрируем по горизонтали */
    text-align: center; /* Дополнительно центрируем текст внутри контента */
    padding: var(--spacing-sm);
    width: 50%;
    border-radius: var(--border-radius-base);
    background-color: rgba(43, 10, 83, 0.5); 
    background: radial-gradient(circle at center, rgba(43, 10, 83, 0.5)  0, rgba(43, 10, 83, 0.3)  100%);
}


.main-parameters-creation {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--border-radius-base);

}

.input-base {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    border: 1px solid var(--accent-dark);
    margin-bottom: var(--spacing-md); /*margin - зло!*/

    display: grid;
    gap: var(--spacing-md);
}

.input-base input,
.input-base select,
.input-base textarea {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-xs);
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease; /* Добавляем плавность переходов */
}

.input-base input:focus,
.input-base select:focus,
.input-base textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-light);
}
.next-button {
    background-color: var(--accent-secondary);
    color: var(--bg-dark);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;

    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    gap: var(--spacing-xs); 

}

/* Стили для иконок помощи, чтобы они лучше выравнивались */
.help-icon {
    margin-left: var(--spacing-sm); 
    color: var(--text-secondary); 
    font-size: var(--font-size-sm); 
    cursor: pointer;
}

/* Используем родительский контейнер для выравнивания кнопок и иконок */
.button-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.next-button:hover {
    background-color: #4AA9DC;
}

.next-button:active{
    background-color: var(--accent-dark);
}




/* * Основной контейнер для всех карточек способностей */
.characteristics-skills-abilities {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: var(--spacing-lg);

}

/* * Базовая стилизация для каждой карточки способностей */
.ability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(circle at center, var(--bg-primary), #1F1133);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    text-align: center;
    width: 10rem;
    height: 10rem;
    border-radius: 1.5rem;
    position: relative; /* нужно для выезжающего списка */
    overflow: visible;

    transition: box-shadow 0.3s ease;
}

.ability-card:hover {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

/* * Заголовок (Сила, Ловкость и т.д.) */
.ability-card__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
    margin-bottom: var(--spacing-xs);
}

/* * Контейнер для кнопок и значения */
.ability-card__score-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.ability-card__score-button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-secondary);
    color: var(--bg-dark);
    font-weight: bold;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
}

.ability-card__score-button:hover {
    background: var(--accent-light);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--accent-light);
}


.ability-card__score-score {
    font-size: 2.8rem;
    font-weight: bold;
    margin: var(--spacing-sm) 0;
    color: var(--accent-primary);
    text-shadow: 0 0 6px var(--accent-light);

    margin: 0;
    order: -1;
    flex-basis: 100%;
}

/* * Модификатор */
.ability-card__modifier {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
}

/* * Стили для списка навыков (спрятанный по умолчанию) */
.ability-card__skills-list {
    position: absolute;
    top: 0;
    left: 100%; /* появляется справа от карточки */
    width: 30ch;
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;

    transition: 
        opacity var(--transition) ease,
        transform var(--transition) ease,
        border-left var(--transition) ease;


}

/* при наведении на карточку — показываем список */
.ability-card:hover .ability-card__skills-list {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    border-left: none;
}

/* Стилизация элементов внутри списка */
.ability-card__skills-list-container {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: 0;
    margin: 0;
}

.ability-card__skill {
    display: grid;
    grid-template-columns: 15ch 2fr 1fr;
    justify-content: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--accent-dark);
    
}

.ability-card__skill:last-child {
    border-bottom: none;
}

.ability-card__custom-bonus-input {
    width: 5ch; /* Ширина в 4 символа */
    text-align: center;
}

.ability-card.ability-card--strength {
    border: 1px solid #B71C1C;
}

.ability-card.ability-card--dexterity {
    border: 1px solid #50a32f;
}

.ability-card.ability-card--constitution {
    border: 1px solid #BF360C;
}

.ability-card.ability-card--intelligence {
    border: 1px solid #2834b4;
}

.ability-card.ability-card--wisdom {
    border: 1px solid #FFD600;
}

.ability-card.ability-card--charisma {
    border: 1px solid #8725ff;
}

.ability-card.ability-card--strength:hover {
    box-shadow: 0 0 25px rgba(183, 28, 28, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

.ability-card.ability-card--dexterity:hover {
    box-shadow: 0 0 25px rgba(88, 180, 52, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

.ability-card.ability-card--constitution:hover {
    box-shadow: 0 0 25px rgba(191, 54, 12, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

.ability-card.ability-card--intelligence:hover {
    box-shadow: 0 0 25px rgba(38, 50, 180, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

.ability-card.ability-card--wisdom:hover {
    box-shadow: 0 0 25px rgba(255, 214, 0, 0.6), 0 0 40px rgba(0,0,0,0.9);
}

.ability-card.ability-card--charisma:hover {
    box-shadow: 0 0 25px rgba(74, 20, 140, 0.6), 0 0 40px rgba(0,0,0,0.9);
}


/*
* Roleplay Section
*/
.roleplay-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.roleplay-section__input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
}

.roleplay-section__background {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.roleplay-section__input {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-xs);
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease; 
    resize: vertical;
}





/*
*Мировозрение
*/

/* --- Стили для секций --- */
.roleplay-section__alignment {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: var(--accent-light) 1px solid;
    background-color: var(--bg-primary);

    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl); /* Вот так никода не буду больше делать... но на этом этапе проекта(11 дней... я не хочу делать прям долгий рефакторинг html) */
}

.section-alignment__start {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* --- Стили для мировоззрения --- */

.is-hidden {
    display: none !important;
}

/* --- Стили для кнопок --- */
.quiz-answers-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.quiz-answer-btn {
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-base);
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease-in-out;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--bg-light);
}

.quiz-answer-btn:hover {
    background-color: var(--bg-light);
}

/* --- Стили для мировоззрения --- */
.alignment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.alignment-cell {
    position: relative;
    cursor: pointer;
    text-align: center;
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius-base);
    transition: background-color 0.2s ease-in-out;
}

.alignment-cell:hover {
    background-color: var(--bg-light);
}

.alignment-label {
    display: block;
    cursor: pointer;
    padding: var(--spacing-xs);
    font-size: 0.9em;
}

.alignment-cell input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.alignment-cell input[type="radio"]:checked + .alignment-label {
    background-color: var(--accent-primary);
    color: var(--bg-dark);
    font-weight: bold;
}

/* Общие стили для карточки */
.info-card {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center;
    
    padding: var(--spacing-md);
    border-radius: var(--border-radius-base);
    background: linear-gradient(45deg, var(--bg-primary), var(--bg-light));
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 12px ;
    color: var(--text-color);
}

.alignment_button-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    justify-content: space-evenly;
}

/* Стили для большой иконки */
.icon-large {
    font-size: 80px !important; 
    color: var(--accent-primary); 
    margin-bottom: var(--spacing-sm); /* Опять же, дать по жопе можно) */
}

/* Стили для текста */
.card-text {
    font-size: var(--font-size-md);
    line-height: 1.4;
    color: var(--text-secondary);
}





/*
* Владения
*/

.proficiencies-container {
    padding: var(--spacing-md);
}

.proficiencies-container {
    border: var(--accent-primary) 1px solid;
    border-radius: var(--border-radius-base);
}

.proficiencies-list-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--spacing-md);
    
    list-style: none;

    position: relative;
    line-height: 2em;
}
.proficiencies-item {
    position: relative;
}

.proficiencies-list-container .proficiencies-item:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 2ch;
    background-color: var(--accent-secondary);
    position: absolute;
    left: 105%;
    
}

.proficiencies-list-container .proficiencies-item:nth-child(even) {
  color: var(--text-secondary);
}

.proficiencies-list-container .proficiencies-item:nth-child(odd) {
  color: var(--text-primary);
}


/*
* Снаряжение
*/

.equipment-selection-container, .equipment-list-container {
    padding: var(--spacing-md);
}

.selected-equipment-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.equipment-list-container {
    border: var(--accent-primary) 1px solid;
    border-radius: var(--border-radius-base);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.equipment-item__name {
    flex-basis: 100%;
}

.equipment-selection-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}


.equipment-delete-button {
  background: none;
  border: none;
  background-color:rgba(0, 0, 0, 0.0);
  color: var(--accent-secondary);
  transition: color 0.3s ease, transform 0.2s ease-in-out;

}

.equipment-delete-button:hover, .equipment-delete-button:active {
    color: var(--accent-primary);
    transform: scale(1.1);
}

.equipment-label{
    flex-basis: 100%;
}

.equipment-dropdown {
    flex-basis:50%;
}

.selected-equipment-list {
    display: grid;
    gap: var(--spacing-xl);
    width: 100%;
}

.selected-equipment-list li {
    position: relative;
}

.selected-equipment-list li::after {
    position: absolute;
    top: 105%;
    content: "";
    width: 100%;
    background-color: var(--accent-secondary);
    height: 1px;
    left: 0%;

}

.selected-equipment-list li .equipment-stats-list {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    list-style: none;
    flex-wrap: wrap;
}

.selected-equipment-list li .equipment-stats-list li:nth-child(even) {
  color: var(--text-secondary);
}

.tab-cell {
    width: 100%;
}


footer {
    background: linear-gradient(45deg, var(--bg-primary), var(--bg-dark));
    padding: var(--spacing-md) 0;
    text-align: center;
    color: var(--text-secondary);
    border-top: 2px solid var(--accent-primary); /* Зеркально хедеру */
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: var(--spacing-md);
}

.footer-social-media {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.footer-social-media a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.footer-social-media a:hover {
    color: var(--accent-light);
}

.footer-info {
    font-size: 0.8rem; /* Мелкий шрифт для некритичной информаци.... ну как не криточной) */
}

.footer-info p {
    margin: var(--spacing-xs) 0;
}

footer a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--accent-light);
}




/*
*   Особенности класса
*/

.class-details-container {
    padding: var(--spacing-md);
}

.class-details-container {
    border-top: var(--accent-dark) 1px solid;

}

.features__title--wrapper {

    padding: var(--spacing-md);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.features__title--wrapper::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--accent-light);
}



.show-button {
   max-height: 34px;
   max-width: 34px;
}

.features-intro {
    flex-basis: 100%;
}

.features-list-container {
    display: grid;
    gap: var(--spacing-lg);
}

.features-list-container > * {
    border: var(--accent-light) 1px solid;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-base);
    background: linear-gradient(45deg, var(--bg-light), var(--bg-primary));
    text-shadow: 0 1px 2px rgba(0,0,0,0.2)
    
}

.features-list-container > *:nth-child(even) {
    background: linear-gradient(-45deg, var(--bg-light), var(--bg-primary));
}

.features-list-container > *:hover, .features-list-container > *:active {
    animation: pulseShadow 2s infinite alternate;
    transform: translateY(-5px);
    transition:0.3s ease all;
}

@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
}

.hit-dice-icon-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    grid-area: icon;
    padding: 0px !important; /*Постараюсь поменьще important, не нравиться мне эта практика в рамках css */
}

.hit-dice-heart {
    position: absolute; /* Сердечко будет внутри контейнера */
    width: 100%;
    height: 100%;

}

.hit-dice {
    position: absolute; 
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрируем текст точно по центру */
    color: var(--text-primary); 
    font-weight: bold;
    font-size: 1rem;
    z-index: 10; /* Убедимся, что текст находится поверх SVG */
}

.hit-dice-info-wrapper {
    grid-area: info;
    padding: var(--spacing-sm);
    background: linear-gradient(-105deg , var(--bg-primary) 20%, var(--bg-dark) 100%);
    box-shadow: 2px 2px 12px  rgba(0, 0, 0, 0.5);
    border-radius: var(--border-radius-base);
}

.class-details__hit-dice--wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "title title" "icon info";
    gap: var(--spacing-md);

}

.class-details__hit-dice--title {
    grid-area: title;
}

.is-hidden {
    display: none !important;
    visibility: 0 !important;  /*Но тут important обезательно)*/
}

.green-glow {
    box-shadow: 0px 0px 12px 4px #B0F0B0;
}

@keyframes fadeInBounce {
  0% {
    opacity: 0;
    transform: scale(0.95); 
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1); 
  }
}


[data-tooltip] {
    position: relative;
    cursor: help; 
}
/* Стили для самой подсказки. Хотел переделать на js, но это уже превратиться в вечное полирование проекта... лучше учиться дальше ) */ 
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; /* Помещаем подсказку над элементом */
  left: 50%;
  transform: translateX(-50%);
  
  /* Размеры и внешний вид */
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  padding: 5px 10px;
  border-radius: 4px;

  width: 250px;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3em;

  /* Эффекты и анимация */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1000; /* вместо 10 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

    pointer-events: none; 
}

/* Показываем подсказку при наведении (и клике!!!)*/
[data-tooltip]:hover::before, [data-tooltip]:active::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  animation: fadeInBounce 0.2s ease-out forwards;
}

.help-icon {
  font-size: 0.8em;
  color: var(--accent-primary);
}
.race-detail-section {
    display: grid;
    gap: var(--spacing-lg);
}

.race-display__bonus-selection {
    border: var(--accent-light) 1px solid;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-base);
    background-color: var(--bg-primary);

}

.race-display__info--wrapper {
    background: linear-gradient(75deg, var(--bg-primary), var(--bg-dark));
    border-radius: var(--border-radius-base);
    box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.5);
    padding: var(--spacing-md);
}

.race-display__info--traits-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    list-style: circle;
}

.race-display__info--traits-list li {
    position: relative;
}

.race-display__info--traits-list li::after {
    content: "";
    width: 40%;
    background-color: var(--accent-secondary);
    opacity: 0.8;
    height: 1px;
    position: absolute;
    top: 100%;
    left: 0%;

}

.race-display__bonus-selection--bonuses-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
    gap: var(--spacing-xs);
}
.race-display__bonus-selection--title {
    position: relative;
}

.race-display__bonus-selection--title::after {
    content: "";
    width: 30%;
    height: 1px;
    position: absolute;
    top: 115%;
    left: 0%;
    background-color: var(--accent-light);
}

.race-display__bonus-selection--counter {
    flex-basis: 100%;
}

.race-display__checbox--wrapper{
    position: relative;
}

.race-display__checbox--wrapper:not(:last-child):after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 102%;    
    background-color: var(--accent-secondary);
}

/*
 * Стилизация для карусели вопросов
 */
.roleplay-section__carousel {
    position: relative;
    overflow: visible;
    min-height: 400px; /* Задаем минимальную высоту, чтобы избежать "прыжков"  Они так до конца и не пофикшенны тут)*/
    width: 100%;
    max-width: 95%;
    margin: 0 auto; /* Центрируем карусель по горизонтали */
    background: linear-gradient(-45deg, var(--bg-primary), var(--bg-dark));
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
}

.roleplay-section__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--spacing-md);
    opacity: 0;
    transform: translateX(100%);
    transition: transform var(--transition) ease-in-out, opacity var(--transition) ease-in-out;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.roleplay-section__slide.active {
    opacity: 1;
    transform: translateX(0);
}

.roleplay-section__slide.to-left {
    transform: translateX(-100%);
}

.roleplay-section__slide.to-right {
    transform: translateX(100%);
}

.roleplay-section__header-slide {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-xs);
    width: 100%;
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.roleplay-section__header-slide h3 {
    align-self: flex-start;
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin: 0;
}

.roleplay-section__slide textarea {
    background-color: var(--bg-dark);
    border: 1px solid var(--accent-dark);
    color: var(--text-primary);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    height: 100px;
    resize: none;
    flex-grow: 1; /* Позволяет textarea занимать все доступное пространство */
}

.roleplay-section ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    font-family:none ;
}   

.roleplay-section li {
    max-width: 30ch;
    line-height: 1.5rem;
    list-style: none;

    flex-grow: 2;
    flex-shrink: 1;

    background: linear-gradient(-105deg , var(--bg-light), var(--bg-primary));
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-base);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 6px; 
    transition: transform 0.2s ease;
}   


.roleplay-section li:hover, .roleplay-section li:active {
    animation: pulseShadow 2s forwards alternate;;
    transform: translateY(-5px);
}

/*
 * Стили для обертки кнопки и подсказки
 */
.generate-idea-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
    width: 100%;
}

/*
 * Стили для контейнера с текстом-подсказкой
 */
.idea-output {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-sm);
    font-size: 0.9em;
    font-style: italic;
    width: 100%;
    box-sizing: border-box;
    align-self: flex-start;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition) ease, transform var(--transition) ease;
}

/* Стили для показа подсказки */
.idea-output.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.idea-output:not(.is-hidden) {
    opacity: 1;
    transform: translateY(0);
}


/*
 * Стилизация для кнопок навигации
 */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-md);
}

.nav-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--accent-dark);
    border-radius: var(--border-radius-base);
    cursor: pointer;
    transition: background-color var(--transition), transform 0.2s ease-in-out;
}

.nav-btn:hover {
    background-color: var(--bg-primary);
    transform: translateY(-2px);
}

.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}



/*
 * Стилизация для секции Класса Брони
 */

.armor-class-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование содержимого по горизонтали */
    text-align: center;
    gap: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--accent-light);
}

.ac-shield-container {
    position: relative; /* Позволяет позиционировать значение КБ внутри контейнера */
    display: inline-block; /* Чтобы контейнер занимал только необходимое пространство */
    width: 150px;
    height: 150px;
}

.ac-shield-icon {
    width: 100%;
    height: 100%;
    color: var(--accent-primary);
}

.ac-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Точное центрирование по обеим осям */
    font-family: "Playfair Display", serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--accent-light);
}

.ac-info {
    font-size: 1rem;
    color: var(--text-secondary);
}

.equipped-armor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

#equipped-armor-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* Стили для доспехов в списке */
.equipped-armor-item {
    background-color: var(--bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-base);
    color: var(--text-primary);
}

.armor-class-section h3 {
    align-self: flex-start;
}


/*
 * Стилизация для секции выбора доспехов
 */

.armor-selection-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--accent-light);
}

.armor-selection-container {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
    align-items: center;
    justify-content: center;
}

#armor-select {
    flex-grow: 1; /* Чтобы поле занимало всю доступную ширину */
}

/*Писал эту секцию как мини-проетк. По этому она чуть с "набитым опытом"*/

/* 
* charsheet
*/

.character-sheet {
  --bg-dark: #1F1133;
  --bg-primary: #301A4B;
  --bg-light: #412E65;
  --text-primary: #F4F4F4;
  --text-secondary: #cccccc;
  --accent-primary: #FFD700;
  --accent-light: #FFE066;
  --accent-dark: #CCAA00;
  --accent-secondary: #5BC0EB;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --border-radius-base: 10px;
  --border-radius-pill: 999px;
  --transition: 0.3s;

  background-color: var(--bg-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


.character-sheet * {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  color: var(--text-primary);
}

/* Header */
.character-sheet .header-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  gap: var(--spacing-md);
}

.header-list__info--player-name input, .header-list__info--experience-points input {
    max-width: 15ch !important;
}

.character-sheet .header-list__info--wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--spacing-md);
}

.character-sheet .info-base label,
.character-sheet .profienciencies-languages label {
  display:block;
  font-size: large;
  font-weight: bold;
}

.character-sheet .info-base input {
  max-width: 5ch;
}

/* Layout wrapper */
.character-sheet .list-wrapper {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  max-width:1200px;
  margin:0 auto;
  grid-template-areas: "left-column middle-column right-column";
  padding: var(--spacing-md);
}

/* Left column */
.character-sheet .left-column {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "abilities inspiration"
    "abilities proficiencyBonus"
    "abilities savingThrows"
    "abilities characteristics"
    "passiveWisdom passiveWisdom"
    "profiencienciesLanguages profiencienciesLanguages";
  padding: var(--spacing-md);
  gap: var(--spacing-md);
}

.character-sheet .abilities { grid-area: abilities; 
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  justify-content: space-evenly;

}
.character-sheet .inspiration { grid-area: inspiration; }
.character-sheet .proficiency-bonus { grid-area: proficiencyBonus; }
.character-sheet .saving-throws { grid-area: savingThrows; }
.character-sheet .characteristics { grid-area: characteristics; }
.character-sheet .passive-wisdom { grid-area: passiveWisdom; }
.character-sheet .passive-wisdom > * { display: inline; }
.character-sheet .profienciencies-languages { grid-area: profiencienciesLanguages; }


.ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 6px; 
  opacity: 0.85;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-base);

  min-height: 150px;
}

.ability .modifier {
  border-radius: 50%;
  border: var(--accent-light) 1px solid;
  padding: var(--spacing-xs);
  width: 1.8em;
  height: 1.8em;
  text-align: center;
}

.character-sheet .inspiration input,
.character-sheet .proficiency-bonus input {
  max-width: 5ch;
}

.character-sheet .inspiration, .character-sheet .proficiency-bonus {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);

}

/* Middle column */
.character-sheet .middle-column {
  grid-area: middle-column;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "speed-initative-AC--wrapper speed-initative-AC--wrapper"
    "hp hp"
    "hitDice deathSaves"
    "attacks-spells attacks-spells"
    "equipment equipment";
  grid-template-rows: repeat(3, auto) repeat(2, 1fr);
  align-items: start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.character-sheet .speed-initative-AC--wrapper {
  grid-area: speed-initative-AC--wrapper;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-evenly;
  gap: var(--spacing-md);
}

.character-sheet .initiative , .character-sheet .speed {
  border-radius: var(--border-radius-base);
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);

}


.character-sheet .HP {
  grid-area: hp;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.character-sheet .hits, .character-sheet .temporary-hp, .character-sheet .curret-hp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-sheet .hit-dice-icon-wrapper {
  grid-area: hitDice;
  position: relative;
  width: 150px;
  height: 150px;
  padding: 0px;
}

.hit-dice-heart {
    position: absolute; /* Сердечко будет внутри контейнера */
    width: 100%;
    height: 100%;

}


.character-sheet .hit-dice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1rem;
  z-index: 10;
}

.character-sheet .death-saves { 
  grid-area: deathSaves;
  padding-top: var(--spacing-sm); /* Добавляем немного воздуха сверху */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.character-sheet .death-saves__successes,
.character-sheet .death-saves__failed {
  display: flex;
  justify-content: flex-end;
}

/* Attacks & Spells */
.character-sheet .attacks-spells {
  grid-area: attacks-spells;
  display:grid;
  gap: var(--spacing-xs);
  overflow:hidden;
}

.character-sheet .attacks-spells__header,
.character-sheet .attack-entry {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);
  gap:inherit;
  align-items:center;
}

.character-sheet .attacks-spells__header h3 {
  text-align:center;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.character-sheet .attacks-spells input {
  width:100%;
  box-sizing:border-box;
  max-height:1.5em;
}

/* Equipment */
.character-sheet .equipment-div { grid-area: equipment; }

/* Right column */
.character-sheet .right-column {
  grid-area: right-column;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-md);
}

/* Textareas */
.character-sheet textarea {
  width:100%;
  box-sizing: border-box;
  resize: none;
  height: 100%;
}

/* AC circle */
.character-sheet .AC {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.character-sheet .ac-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 0 10px var(--accent-light);
}

/* Lists */
.character-sheet ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.character-sheet li {
  margin-bottom: var(--spacing-xs);
}

/* Стиль карточек/блоков для секций */
.character-sheet .left-column > div,
.character-sheet .middle-column > div,
.character-sheet .right-column > div,
.character-sheet .header-list > div {
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
}

.character-sheet .equipment-div {
    height: 100%;
}

.character-sheet .equipment-div textarea {
    height: 95%;
    resize: none;
}

/* Поля ввода и текстовые области */
.character-sheet input,
.character-sheet textarea {
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-light);
    border-radius: 4px;
    padding: var(--spacing-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
    resize: none;
}

.character-sheet input:focus,
.character-sheet textarea:focus {
    outline: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(91, 192, 235, 0.4);
}

.character-sheet textarea {
    min-height: 120px;
}

/* Заголовки и метки */
.character-sheet h3, .character-sheet h4, .character-sheet h5 {
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.character-sheet label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
    display: block;
    font-weight: normal;
}

/* Небольшие улучшения для списков */
.character-sheet ul li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--bg-light);
}

.character-sheet ul li:last-child {
    border-bottom: none;
}

/* Скрываем стрелочки у полей с типом number */
.character-sheet input[type=number]::-webkit-inner-spin-button,
.character-sheet input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.character-sheet input[type=number] {
  -moz-appearance: textfield;
}

/* Стиль для чекбоксов (например, спасброски от смерти) */
.character-sheet input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--text-secondary);
    cursor: pointer;
    margin: 0 4px;
    position: relative;
    top: 4px;
    transition: all var(--transition);
}

.character-sheet input[type="checkbox"]:checked {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.character-sheet .death-saves__successes input[type="checkbox"]:checked {
    background-color: #28a745; /* Зеленый для успеха */
    border-color: #28a745;
}

.character-sheet .death-saves__failed input[type="checkbox"]:checked {
    background-color: #dc3545; /* Красный для провала */
    border-color: #dc3545;
}



/* ==========================================================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (до 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {


    [data-slide-id="0"] {
        display: none;
    }

    /* Уменьшаем отступы для экономии места */
    :root {
        --spacing-xs: 2px;
        --spacing-sm: 6px;
        --spacing-md: 16px;
        --spacing-lg: 24px;
        --spacing-xl: 48px;
    }


    /* Общие настройки */
    body {
        font-size: 14px;
        padding: var(--spacing-xs);
    }


    header {
        padding: var(--spacing-sm);
    }

    header .logo {
        font-size: 1.2rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .progress-nav-menu {
        display: none;
        padding: var(--spacing-sm);
    }

    .progress-nav-link {
        font-size: 0.7rem;
        padding: var(--spacing-xs);
    }

    .progress-nav-link::after {
        width: 8px;
        height: 8px;
        top: 1.5rem;
    }

    /* Hero секция */
    .hero-content {
        width: 95%;
        padding: var(--spacing-sm);
    }

    /* Карточки характеристик - уменьшаем размеры */
    .ability-card {
        width: 8rem;
        height: 8rem;
        padding: var(--spacing-sm);
    }

    .ability-card__title {
        font-size: 1.2rem;
    }

    .ability-card__score-score {
        font-size: 2.2rem;
    }

    .ability-card__score-button {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
    }

    /* Списки навыков - уменьшаем ширину */
    .ability-card__skills-list {
        width: 25ch;
    }

    .ability-card__custom-bonus-input {
        width: 4ch;
    }

    /* Формы - уменьшаем отступы */
    .input-base {
        padding: var(--spacing-sm);
    }

    .next-button {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Кнопки квиза */
    .quiz-answer-btn {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }

    /* Карусель */
    .roleplay-section__carousel {
        min-height: 300px;
        padding: var(--spacing-sm);
    }

    .roleplay-section__slide {
        padding: var(--spacing-sm);
    }

    .roleplay-section li {
        max-width: none;
        padding: var(--spacing-xs);
    }

    .alignment-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    /* Владения и снаряжение - уменьшаем отступы */
    .proficiencies-container,
    .equipment-list-container,
    .equipment-selection-container {
        padding: var(--spacing-sm);
    }

    /* Класс брони */
    .ac-shield-container {
        width: 100px;
        height: 100px;
    }

    .ac-value {
        font-size: 2.5rem;
    }

    /* Лист персонажа - уменьшаем отступы */
    .character-sheet .list-wrapper {
        padding: var(--spacing-sm);
    }

    .character-sheet .left-column > div,
    .character-sheet .middle-column > div,
    .character-sheet .right-column > div {
        padding: var(--spacing-sm);
    }

    .character-sheet .list-wrapper {
        display:grid;
        grid-template-columns: 1fr;
        max-width:1200px;
        margin:0 auto;
        grid-template-areas: "left-column" "middle-column" "right-column";
        padding: var(--spacing-md);
        gap: var(--spacing-xl);
    }

    .character-sheet .AC {
        width: 80px;
        height: 80px;
    }

    .character-sheet .ac-value {
        font-size: 2.5rem;
    }

    .character-sheet .hit-dice-icon-wrapper {
        width: 120px;
        height: 120px;
    }

    .header-list {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-container {
        padding: var(--spacing-sm);
    }
}

/* ==========================================================================
   ПЛАНШЕТЫ (481px - 768px)
   ========================================================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 15px;
        max-width: 100%;
    }

    .main-container {
        max-width: 700px;
    }

    /* Карточки характеристик */
    .ability-card {
        width: 9rem;
        height: 9rem;
    }

    .ability-card__skills-list {
        width: 28ch;
    }

    /* Класс брони */
    .ac-shield-container {
        width: 120px;
        height: 120px;
    }

    .ac-value {
        font-size: 3rem;
    }

    /* Лист персонажа */
    .character-sheet .list-wrapper {
        display:grid;
        grid-template-columns: 1fr; /* Одна колонка */
        grid-template-areas: 
            "left-column"
            "middle-column" 
            "right-column";
    }
    
    .progress-nav-menu {
        display: none;
    }
}

/* ==========================================================================
   ПЛАНШЕТЫ ЛАНДШАФТНЫЕ (769px - 1024px)
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        max-width: 100%;
    }

    .main-container {
        max-width: 900px;
    }

    .character-sheet .list-wrapper {
        display:grid;
        grid-template-columns: 1fr ; /* Одна колонка */
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 
            "left-column"
            "middle-column" 
            "right-column";
    }
}

/* ==========================================================================
   НЕБОЛЬШИЕ ДЕСКТОПЫ (1025px - 1200px)
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    body {
        max-width: 1150px;
    }

    .main-container {
        max-width: 1000px;
    }

    .character-sheet .list-wrapper {
        max-width: 1100px;
    }
}

/* ==========================================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 320px)
   ========================================================================== */
@media screen and (max-width: 320px) {
    :root {
        --spacing-xs: 2px;
        --spacing-sm: 4px;
        --spacing-md: 12px;
        --spacing-lg: 20px;
        --spacing-xl: 32px;
    }

    body {
        font-size: 13px;
        padding: 2px;
    }

    .main-container {
        padding: var(--spacing-xs);
    }

    header .logo {
        font-size: 1rem;
    }

    .progress-nav-link {
        font-size: 0.6rem;
        padding: 1px;
    }

    .ability-card {
        width: 7rem;
        height: 7rem;
    }

    .ability-card__title {
        font-size: 1rem;
    }

    .ability-card__score-score {
        font-size: 1.8rem;
    }

    .ac-value,
    .character-sheet .ac-value {
        font-size: 2rem;
    }

    .progress-nav-menu {
        display: none;
    }

    .character-sheet .list-wrapper {
        display:grid;
        grid-template-columns: 1fr; /* Одна колонка */
        grid-template-areas: 
            "left-column"
            "middle-column" 
            "right-column";
    }
}

/* ==========================================================================
   ГОРИЗОНТАЛЬНАЯ ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    :root {
        --spacing-xl: 32px;
        --spacing-lg: 20px;
    }

    .hero-section {
        padding: var(--spacing-md);
    }

    .roleplay-section__carousel {
        min-height: 250px;
    }

    .ability-card {
        height: 7rem;
    }
    .progress-nav-menu {
        display: none;
    }
}

/* ==========================================================================
   ПРИНТЕР
   ========================================================================== */
@media print {
    body {
        background-image: none !important;
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.4;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    * {
        background-image: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: black !important;
    }

    .character-sheet {
        background-color: white !important;
    }

    /* Разрывы страниц */
    .hero-section,
    .roleplay-section,
    .class-details-container {
        page-break-before: always;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   ВЫСОКОЕ РАЗРЕШЕНИЕ (RETINA)
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Улучшаем четкость текста */
    .ability-card__title,
    .ac-value,
    header .logo,
    .character-sheet .ac-value {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Тонкие границы для четкости */
    .ability-card,
    .input-base,
    .alignment-cell {
        border-width: 0.5px;
    }
}


/*Страшнючий костыль... никогда более не допущу себе такое.*/

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Запрет выхода контента за границы */
.main-container,
.character-sheet,
.hero-section {
    overflow-x: hidden;
}

.icon--github {
    background-image:url(/images/github-mark/github-mark-white.svg) ;
    background-position: left;
    background-size: contain;
    width: 20px;
    height: 20px; 
    display: inline-block; 
    transition: all ease-in-out 0.15s;
}


.icon--github:hover {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}


.social-icon {
    display: flex;
    align-items: center;
}