*/
.info-block.character-core-stats.restructured-stats {
padding: 0; /* Убираем внутренние отступы у самого .info-block, они будут ниже */
background-color: transparent; /* Убираем стандартный фон блока */
border: none; /* Убираем стандартную рамку блока */
box-shadow: none; /* Убираем стандартную тень блока */
}
/* Стиль для заголовка "Основные Данные" */
.info-block.restructured-stats .block-title {
margin: 0 0 1rem 0; /* Отступ только снизу заголовка */
padding: 0.7rem 1.2rem; /* Внутренние отступы */
background-color: rgba(255, 255, 255, 0.03); /* Возвращаем фон как у шапок других блоков */
border: 1px solid var(--hp-border-primary); /* Рамка вокруг заголовка */
border-radius: var(--radius-lg); /* Скругление для заголовка */
text-align: left; /* Выравнивание текста влево (или center) */
/* Наследование остальных стилей .block-title остается (иконка, шрифт, цвет) */
border-bottom-left-radius: var(--radius-lg); /* Скругляем все углы */
border-bottom-right-radius: var(--radius-lg);
border-bottom: 1px solid var(--hp-border-primary); /* И нижнюю границу */
}
/* Контейнер для самих данных под заголовком */
.info-block.restructured-stats .core-stats-content {
padding: 1rem 1.2rem; /* Отступы внутри блока данных */
border: 1px solid var(--hp-border-primary); /* Рамка вокруг данных */
border-radius: var(--radius-lg); /* Скругление */
background-color: rgba(0,0,0, 0.1); /* Фон */
box-shadow: var(--shadow-sm); /* Тень */
}
/* Стиль для пар (Год, Здоровье, Статус) внутри .core-stats-content */
/* ВАРИАНТ 1: Использовать стандартный FLEX */
.info-block.restructured-stats .core-stats-content .info-pair {
display: flex;
justify-content: space-between; /* Расталкиваем метку и значение */
align-items: baseline; /* Выравниваем по базовой линии текста */
gap: 0.8rem; /* Промежуток между меткой и значением */
margin-bottom: 0.8rem; /* Отступ между парами */
font-size: 0.9rem; /* Наследуется? Можно задать явно */
flex-wrap: wrap; /* Разрешить перенос */
}
.info-block.restructured-stats .core-stats-content .info-pair .info-label {
/* Стандартные стили .info-label должны подойти */
flex-shrink: 0; /* Не сжимать метку */
}
.info-block.restructured-stats .core-stats-content .info-pair .info-value {
/* Стандартные стили .info-value должны подойти */
flex-grow: 1; /* Растягивать значение */
text-align: right; /* Выравнивание значения */
word-break: break-word; /* Перенос длинных слов/статусов */
}
/* Для обрезки текста Статуса с многоточием во flex-контейнере */
.info-block.restructured-stats .core-stats-content #character-status.info-value {
white-space: nowrap; /* Запрет переноса внутри значения статуса */
overflow: hidden; /* Скрыть то, что не влезает */
text-overflow: ellipsis; /* Показать многоточие */
max-width: 150px; /* Пример! Укажите максимальную ширину, чтобы обрезка работала */
/* Если нужно чтобы статус мог растягиваться, но обрезался, если не хватает места,
тогда max-width убираем и полагаемся на min-width: 0 у контейнера info-pair */
cursor: help; /* Показываем, что полный текст в title */
display: inline-block; /* Для корректной работы ellipsis */
vertical-align: baseline; /* Выравниваем */
}
.info-block.restructured-stats .core-stats-content #character-health.info-value {
/* Полоска здоровья может потребовать ширину 100%, если flex пытается её сузить */
width: 100%;
}
/* Общее правило для последней пары внутри */
.info-block.restructured-stats .core-stats-content .info-pair:last-child {
margin-bottom: 0; /* Убираем нижний отступ у последней пары */
}
/* === КОНЕЦ СТИЛЕЙ ДЛЯ НОВОЙ СТРУКТУРЫ === */
/* -- GENERAL Info Pair Styling (Эти стили продолжают действовать для ДРУГИХ блоков) -- */
.info-pair {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.75rem;
font-size: 0.9rem;
font-family: var(--font-ui);
gap: 1rem;
flex-wrap: wrap;
}
.info-pair:last-child { margin-bottom: 0; }
.info-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--hp-text-secondary);
flex-shrink: 0;
}
.info-icon-emoji {
opacity: 0.8;
font-size: 1.1em;
line-height: 1;
display: inline-block;
width: 1.2em;
text-align: center;
}
.info-value {
color: var(--hp-text-primary);
font-weight: 500;
text-align: right;
word-break: break-word;
flex-grow: 1;
}
/* Text Truncation Styles */
.info-value.truncate-with-tooltip {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: help;
vertical-align: baseline;
}
/* Other values needing truncation - JS adds class and title attribute */
#character-wand.info-value,
#character-profession.info-value {
/* Add .truncate-with-tooltip via JS if needed */
}
/* Value lists */
.info-value.skills-list {
font-style: normal; font-size: 0.85rem; color: var(--hp-text-muted); cursor: help;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
border-bottom: 1px dotted var(--hp-text-muted); padding-bottom: 1px;
display: block;
text-align: left; /* Списки выравниваются влево */
}
.list-like-pair .info-value { text-align: left; font-weight: 400; }
/* Currency */
.info-pair .currency-value-wrapper { display: flex; align-items: baseline; gap: 0.2rem; justify-content: flex-end;}
.info-value.balance-value { font-weight: 600; color: var(--hp-accent-gold); }
.currency-label { color: var(--hp-accent-gold); opacity: 0.8; font-size: 0.8em; font-weight: 400;}
.info-value.token-value { color: var(--hp-accent-magic); font-weight: 600; }
/* Health Bar */
#character-health { /* Контейнер полоски здоровья */
height: 12px;
background-color: var(--hp-bg-input);
border-radius: var(--radius-full);
overflow: hidden;
border: 1px solid var(--hp-border-primary);
position: relative;
display: block; /* Может быть полезно для предсказуемости */
}
.health-bar-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width var(--transition-smooth), background-color var(--transition-smooth);
position: absolute; top: 0; left: 0;
background-size: 200% auto;
animation: gradient-shift 3s linear infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.health-bar-fill.health-good { background-image: linear-gradient(90deg, var(--hp-accent-green), #86efac, var(--hp-accent-green)); }
.health-bar-fill.health-medium { background-image: linear-gradient(90deg, var(--hp-accent-orange), #fde047, var(--hp-accent-orange)); }
.health-bar-fill.health-low { background-image: linear-gradient(90deg, var(--hp-accent-red), #ffa39e, var(--hp-accent-red)); }
/* Health text */
.health-bar-text { display: none; }
#character-health[title] { cursor: help; }
/* Character Status bubble (Общий стиль, переопределяется если нужно выше) */
#character-status.info-value {
background-color: rgba(255, 255, 255, 0.04);
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
border: 1px solid var(--hp-border-primary);
line-height: 1.3;
}
/* Faculty colors */
#character-house { text-transform: capitalize; }
.hp-house-gryffindor { color: var(--hp-gryffindor); text-shadow: 0 0 8px var(--hp-gryffindor); }
.hp-house-slytherin { color: var(--hp-slytherin); text-shadow: 0 0 8px var(--hp-slytherin); }
.hp-house-hufflepuff { color: var(--hp-hufflepuff); text-shadow: 0 0 8px var(--hp-hufflepuff); }
.hp-house-ravenclaw { color: var(--hp-ravenclaw); text-shadow: 0 0 8px var(--hp-ravenclaw); }
/* Sidebar faculty themes */
#character-sidebar.gryffindor-theme #character-avatar-area { border-color: var(--hp-gryffindor-accent); box-shadow: 0 0 15px var(--hp-gryffindor), var(--shadow-inset); }
#character-sidebar.slytherin-theme #character-avatar-area { border-color: var(--hp-slytherin-accent); box-shadow: 0 0 15px var(--hp-slytherin), var(--shadow-inset); }
#character-sidebar.hufflepuff-theme #character-avatar-area { border-color: var(--hp-hufflepuff-accent); box-shadow: 0 0 15px var(--hp-hufflepuff), var(--shadow-inset); }
#character-sidebar.ravenclaw-theme #character-avatar-area { border-color: var(--hp-ravenclaw-accent); box-shadow: 0 0 15px var(--hp-ravenclaw), var(--shadow-inset); }
#character-sidebar:not(.gryffindor-theme):not(.slytherin-theme):not(.hufflepuff-theme):not(.ravenclaw-theme) #character-avatar-area {
border-color: var(--hp-border-gold);
box-shadow: 0 0 15px rgba(220, 180, 100, 0.3), var(--shadow-inset); /* Default gold glow */
}
/* Skill Points Block */
.skill-points-available-display {
justify-content: center; /* Center the points available */
margin-bottom: 0.5rem;
}
.skill-points-available-display .info-label { color: var(--hp-text-primary); }
.skill-points-available-display .info-value { color: var(--hp-accent-blue); font-size: 1.2em; font-weight: 600;}
#character-skill-points .help-text {
font-size: 0.75rem; color: var(--hp-text-muted);
text-align: center; padding: 0; margin: 0; font-style: italic;
}
/* Player Tokens Block */
#character-tokens { /* The value span */
color: var(--hp-accent-magic); /* Use magic purple */
font-weight: 600;
font-size: 1.1em;
}
.info-value.token-value.error-flash { animation: flash-red 0.5s 3 ease-in-out; }
@keyframes flash-red { 0%, 100% { color: var(--hp-accent-magic); transform: scale(1); } 50% { color: var(--hp-accent-red); transform: scale(1.15); } }
/* --- Chat Area (Center - Redesigned) --- */
#chat-log.hp-chat-log {
position: relative; /* For pseudo elements */
padding: 1rem; /* Adjusted padding */
overflow-y: auto; /* Explicitly enable scrolling */
scrollbar-gutter: stable both-edges; /* Ensure space */
}
/* Fade effect at top/bottom */
#chat-log.hp-chat-log::before {
content: ''; position: sticky; /* Changed to sticky for better scroll interaction */ top: 0; left: 0; right: 0; height: 30px;
background: linear-gradient(to bottom, var(--hp-msg-ai-bg) 10%, transparent 40%); /* More pronounced fade */
pointer-events: none; z-index: var(--z-content) + 1; /* Ensure it's above chat items */
display: block; /* Needed for sticky */
width: 100%; /* Ensure it covers full width */
/* Ensure it covers padding area too if needed */
margin-left: calc(var(--container-padding) * -1);
padding-left: var(--container-padding);
margin-right: calc(var(--container-padding) * -1);
padding-right: var(--container-padding);
}
#chat-log.hp-chat-log::after {
content: ''; position: sticky; /* Changed to sticky */ bottom: 0; left: 0; right: 0; height: 30px;
background: linear-gradient(to top, var(--hp-msg-ai-bg) 10%, transparent 40%); /* More pronounced fade */
pointer-events: none; z-index: var(--z-content) + 1; /* Ensure it's above chat items */
display: block; /* Needed for sticky */
width: 100%; /* Ensure it covers full width */
margin-left: calc(var(--container-padding) * -1);
padding-left: var(--container-padding);
margin-right: calc(var(--container-padding) * -1);
padding-right: var(--container-padding);
}
.message {
margin-bottom: 1.5rem; /* Space between messages */
display: flex; align-items: flex-start; gap: 1rem;
max-width: 90%; /* Slightly narrower */
position: relative;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
/* Styling for hidden command messages */
.message[data-is-command="true"] {
display: none !important; /* Ensure they are fully hidden */
}
/* Subtle fade-in for new messages (applied by JS maybe?) */
.message.new-message { animation: fade-in-up 0.6s var(--transition-smooth); }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.message-avatar {
width: 40px; height: 40px; /* Smaller avatars */
border-radius: var(--radius-full);
overflow: hidden; flex-shrink: 0;
margin-top: 2px; /* Align top */
border: 2px solid var(--hp-border-primary);
box-shadow: var(--shadow-sm);
background-color: var(--hp-bg-deep);
transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.message-avatar:hover {
transform: scale(1.1);
box-shadow: 0 0 10px var(--hp-accent-blue); /* Glow on hover */
}
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-content {
padding: 0.8rem 1.2rem;
padding-bottom: 1.8rem; /* Space for timestamp */
border-radius: var(--radius-lg);
flex-grow: 1;
position: relative;
border: 1px solid transparent; /* Base border */
box-shadow: var(--shadow-md);
transition: background-color var(--transition-med);
min-width: 0; /* Flexbox fix */
}
.character-name {
font-weight: 600; font-size: 0.85rem;
margin-bottom: 0.4rem;
font-family: var(--font-ui);
text-transform: none; /* Remove uppercase */
letter-spacing: 0.3px;
}
/* --- НОВЫЙ ДИЗАЙН СООБЩЕНИЙ (КНИГА И РЕПЛИКИ) --- */
.message {
margin-bottom: 2rem; /* Увеличим отступ между сообщениями */
display: flex;
align-items: flex-start;
gap: 1rem;
max-width: 95%; /* Чуть шире для книжного вида */
position: relative;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.message[data-is-command="true"] {
display: none !important;
}
.message.new-message {
animation: fade-in-up 0.6s var(--transition-smooth);
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
margin-top: 5px;
border: 2px solid var(--hp-border-primary);
box-shadow: var(--shadow-sm);
background-color: var(--hp-bg-deep);
transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.message-avatar:hover {
transform: scale(1.1);
box-shadow: 0 0 10px var(--hp-accent-blue);
}
.message-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-content {
padding: 1.5rem 2rem; /* Больше отступы, как поля у страницы */
border-radius: var(--radius-md); /* Менее скругленные, более "книжные" углы */
flex-grow: 1;
position: relative;
border: 1px solid #4a4238; /* Темная рамка, как у старой кожи */
box-shadow: var(--shadow-md), inset 0 0 15px rgba(0,0,0,0.4);
transition: background-color var(--transition-med);
min-width: 0;
}
.character-name {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.8rem; /* Больше отступ после имени */
font-family: var(--font-accent); /* Используем акцентный рукописный шрифт */
font-size: 1.5rem;
letter-spacing: 0.5px;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* ОБЩИЕ СТИЛИ ДЛЯ ТЕКСТА СООБЩЕНИЯ */
.message-text {
font-family: var(--font-primary-text); /* Georgia - идеально для книг */
font-size: 1.05rem; /* Чуть крупнее для читаемости */
line-height: 1.8; /* Больше межстрочный интервал */
word-wrap: break-word;
white-space: pre-wrap;
-webkit-font-smoothing: antialiased; /* Сглаживание для serif шрифтов */
-moz-osx-font-smoothing: grayscale;
}
/* --- СТИЛИ ДЛЯ ОТВЕТА ИИ (ЭФФЕКТ КНИГИ) --- */
.ai-message .message-content {
background-color: var(--hp-bg-parchment);
background-image: var(--bg-noise-url); /* Накладываем текстуру шума */
}
.ai-message .character-name {
color: var(--hp-accent-gold);
text-align: center;
}
.ai-message .message-text {
color: var(--hp-text-primary);
text-align: justify; /* САМОЕ ВАЖНОЕ: выравнивание по ширине */
hyphens: auto; /* Автоматические переносы для лучшего вида */
}
/* Магия для создания двух колонок на больших экранах */
@media (min-width: 768px) {
.ai-message .message-text {
column-count: 2;
column-gap: 2.5rem; /* Расстояние между колонками */
column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая линия-разделитель */
}
}
/* Буквица (увеличенная первая буква абзаца) */
.ai-message .message-text::first-letter {
font-family: var(--font-title); /* Merriweather для красоты */
font-size: 4em;
font-weight: 600;
color: var(--hp-accent-gold);
float: left;
line-height: 0.8;
padding: 5px 8px 0 3px;
margin-right: 5px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
/* --- СТИЛИ ДЛЯ ОТВЕТА ИГРОКА (ЭФФЕКТ ЗАПИСИ) --- */
.user-message {
margin-left: auto;
flex-direction: row-reverse;
}
.user-message .message-content {
background-color: var(--hp-msg-user-bg);
border-color: var(--hp-border-accent);
border-left: 4px solid var(--hp-accent-blue); /* Акцентная линия слева */
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.user-message .character-name {
text-align: right;
color: var(--hp-accent-blue);
border-bottom-color: rgba(108, 180, 255, 0.2);
font-weight: 500; /* <-- ИЗМЕНЕНИЕ */
}
.user-message .message-text {
color: var(--hp-text-secondary); /* Чуть более приглушенный текст */
font-style: italic; /* Курсив для ощущения прямой речи или мысли */
text-align: left; /* Обычное выравнивание */
}
.timestamp {
font-size: 0.7rem;
font-family: var(--font-ui);
color: var(--hp-text-muted);
position: absolute;
bottom: 0.5rem;
right: 1.2rem;
opacity: 0.8;
}
.user-message .timestamp {
left: 1.2rem;
right: auto;
}
/* СИСТЕМНЫЕ СООБЩЕНИЯ (Оставляем как есть, но чуть причешем) */
.system-message {
width: 100%;
max-width: 80%;
margin: 1rem auto;
padding: 0.7rem 1rem;
border-radius: var(--radius-md);
background-color: var(--hp-msg-sys-bg);
border: 1px dashed var(--hp-border-primary);
text-align: center;
color: var(--hp-text-secondary);
font-style: italic;
font-size: 0.85rem;
box-shadow: none;
opacity: 0.9;
}
.system-message p {
margin: 0;
}
/* ИНДИКАТОР ЗАГРУЗКИ (Оставляем как есть) */
.message.thinking { max-width: 100%; justify-content: center; }
.message.thinking .message-content { background: transparent; border: none; box-shadow: none; padding: 0; }
.message.thinking .message-text { text-align: center; }
.message.thinking i {
font-style: normal; color: var(--hp-accent-magic); font-size: 0.9rem;
display: inline-block; letter-spacing: 1px;
animation: pulse-fade 1.8s infinite ease-in-out;
}
@keyframes pulse-fade {
0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}
/* Enhanced formatted text colors */
.message-text strong { color: var(--hp-text-primary); } /* Slightly bolder */
.message-text em { color: var(--hp-text-secondary); } /* Slightly less muted */
.message-text .color-tag { display: inline; font-weight: 600; /* Ensure color tag text is visible */ }
.timestamp {
font-size: 0.7rem;
font-family: var(--font-ui);
color: var(--hp-text-muted);
position: absolute; bottom: 0.5rem; right: 1rem;
opacity: 0.8;
}
/* User Messages */
.user-message { margin-left: auto; flex-direction: row-reverse; }
.user-message .message-content {
background-color: var(--hp-msg-user-bg);
border-color: var(--hp-border-accent);
border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}
.user-message .character-name { text-align: right; color: var(--hp-accent-blue); }
.user-message .message-avatar { border-color: var(--hp-accent-blue); }
/* AI Messages */
.ai-message .message-content {
background-color: var(--hp-msg-ai-bg);
border-color: var(--hp-border-primary);
border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.ai-message .character-name { color: var(--hp-accent-gold); }
.ai-message .message-avatar { border-color: var(--hp-border-gold); }
/* System Messages */
.system-message {
flex-direction: column; /* Center content vertically */
align-items: center;
width: 100%; max-width: 80%; margin: 1rem auto; gap: 0; /* Center in chat */
padding: 0.7rem 1rem; border-radius: var(--radius-md);
background-color: var(--hp-msg-sys-bg); border: 1px dashed var(--hp-border-primary);
text-align: center; color: var(--hp-text-secondary); font-style: italic;
font-size: 0.85rem; box-shadow: none; opacity: 0.9;
}
.system-message p { margin: 0; }
/* Thinking Indicator */
.message.thinking { max-width: 100%; justify-content: center;}
.message.thinking .message-content { background: transparent; border: none; box-shadow: none; padding: 0; }
.message.thinking .message-text { text-align: center; }
/* Simple text fade/pulse animation */
.message.thinking i {
font-style: normal; color: var(--hp-accent-magic); font-size: 0.9rem;
display: inline-block; letter-spacing: 1px;
animation: pulse-fade 1.8s infinite ease-in-out;
}
@keyframes pulse-fade {
0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}
/* --- Utility Sidebar (Right - Redesigned) --- */
#utility-sidebar .sidebar-content {
padding-top: 1rem; /* Reduce top padding */
display: flex; flex-direction: column; gap: 2rem;
}
.sidebar-title-right {
font-family: var(--font-title);
font-size: 1.5rem; font-weight: 600; color: var(--hp-text-primary);
text-align: center; border-bottom: 1px solid var(--hp-border-primary);
padding-bottom: 0.8rem; margin: 0; margin-bottom: 1rem; /* Reset */
}
.utility-widget-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.8rem;
}
.utility-widget {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.4rem;
padding: 1rem 0.5rem; /* Generous padding */
min-height: 110px; /* Slightly taller */
border-radius: var(--radius-lg);
background-color: rgba(255, 255, 255, 0.02); /* Very subtle base */
border: 1px solid var(--hp-border-primary);
text-align: center;
color: var(--hp-text-secondary);
cursor: pointer;
transition: all var(--transition-med);
position: relative; overflow: hidden;
box-shadow: none; /* Base shadow */
}
.utility-widget:hover:not(:disabled) {
background-color: var(--hp-bg-hover);
border-color: var(--hp-border-secondary);
transform: translateY(-3px) scale(1.02);
color: var(--hp-text-primary);
box-shadow: var(--shadow-md);
}
/* Subtle gradient border effect on hover */
.utility-widget::before {
content: ''; position: absolute; inset: -1px; z-index: -1;
border-radius: inherit;
background: conic-gradient(from 90deg at 50% 50%, var(--hp-accent-blue), var(--hp-accent-magic), var(--hp-accent-gold), var(--hp-accent-blue));
opacity: 0;
transition: opacity var(--transition-med);
}
.utility-widget:hover:not(:disabled)::before { opacity: 0.3; }
.utility-widget:active:not(:disabled) { transform: translateY(0px) scale(1); box-shadow: none; }
.utility-widget:disabled {
opacity: 0.4; cursor: not-allowed; transform: none;
background-color: transparent; border-color: var(--hp-border-primary);
box-shadow: none;
filter: grayscale(60%); /* Dim disabled icons */
}
.utility-widget:disabled::before { display: none; }
.widget-icon-emoji {
font-size: 2rem; /* Adjusted icon size */
line-height: 1; filter: grayscale(10%);
transition: transform 0.4s var(--transition-bounce), filter var(--transition-med);
}
.utility-widget:hover:not(:disabled) .widget-icon-emoji {
transform: scale(1.15); /* Simple scale, removed rotate for icons */
filter: grayscale(0%);
}
.widget-label {
font-size: 0.75rem; /* Smaller label */
font-weight: 500;
display: block;
line-height: 1.2;
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.widget-status {
font-size: 0.7rem; font-style: italic;
opacity: 0.7; margin-top: 3px; display: block;
color: var(--hp-text-muted);
}
.widget-status:empty { display: none; }
/* House Points Display (Cleaned) */
.utility-block.house-points-display {
border: 1px solid var(--hp-border-primary);
border-radius: var(--radius-lg);
padding: 0; background: var(--hp-bg-content); /* Slightly different background */
box-shadow: var(--shadow-inset);
}
.utility-block-title { /* Cup title */
font-size: 1.2rem; /* Moderate size */
color: var(--hp-accent-gold); font-family: var(--font-ui); font-weight: 600;
padding: 0.8rem 1.2rem;
border-bottom: 1px solid var(--hp-border-primary);
display: flex; align-items: center; gap: 0.6rem; margin: 0; /* Override */
}
.utility-block-title .info-icon-emoji { font-size: 1.3em; opacity: 0.9; }
#house-points-list {
list-style: none; padding: 0.5rem 1.2rem 1rem 1.2rem; margin: 0;
display: flex; flex-direction: column; gap: 0.6rem; /* Use gap for spacing */
}
#house-points-list li {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.4rem 0; font-size: 0.95rem; border: none; /* Remove border */
transition: background-color var(--transition-fast); border-radius: var(--radius-sm);
}
#house-points-list li:hover { background-color: var(--hp-bg-hover); padding-left: 0.5rem; padding-right: 0.5rem; } /* Subtle indent on hover */
.hp-house-label {
font-weight: 500; font-family: var(--font-ui);
display: inline-flex; align-items: center; gap: 0.5rem;
flex-basis: 60%; /* Ensure enough space */
}
/* Banner is applied dynamically using ::before with background color */
.hp-house-label::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
.hp-house-gryffindor::before { background-color: var(--hp-gryffindor); }
.hp-house-slytherin::before { background-color: var(--hp-slytherin); }
.hp-house-hufflepuff::before { background-color: var(--hp-hufflepuff); }
.hp-house-ravenclaw::before { background-color: var(--hp-ravenclaw); }
/* Label color matching house */
.hp-house-gryffindor { color: #ff8a80; } /* Softer red text */
.hp-house-slytherin { color: #98e0a0; } /* Softer green text */
.hp-house-hufflepuff { color: #ffd54f; } /* Softer yellow text */
.hp-house-ravenclaw { color: #82b1ff; } /* Softer blue text */
.hp-house-points { font-weight: 600; color: var(--hp-text-primary); font-size: 1em; }
/* --- Overlays & Modals General --- */
.status-overlay, .modal-overlay {
position: fixed; inset: 0; z-index: var(--z-overlay);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
background-color: rgba(12, 14, 16, 0.8); /* Darker backdrop */
backdrop-filter: blur(6px) saturate(120%);
opacity: 0; visibility: hidden;
transition: opacity var(--transition-med), visibility 0s var(--transition-med);
/* Add subtle hover effect to body when modals are NOT open - could be done on body*/
}
/* Added class to control blur only when modals are open, doesn't affect body bg or ::before mist */
/* body.hp-theme.modal-or-overlay-open .game-main-content { filter: blur(3px); } */ /* Alternative effect */
/* body.hp-theme.modal-or-overlay-open #game-header,
body.hp-theme.modal-or-overlay-open #input-area { filter: blur(2px); } */
.status-overlay.visible, .modal-overlay.visible,
.status-overlay[style*="display: flex"], .modal-overlay[style*="display: flex"] /* JS compat */
{
opacity: 1; visibility: visible;
transition: opacity var(--transition-med) ease-in-out, visibility 0s 0s;
}
.overlay-content, .modal-content {
background-color: var(--hp-bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--hp-border-primary);
box-shadow: var(--shadow-lg);
max-width: 94%; max-height: 90vh;
display: flex; flex-direction: column;
opacity: 0; transform: scale(0.95) translateY(10px);
transition: transform var(--transition-med) ease-out, opacity var(--transition-med) ease-out;
overflow: hidden; /* Contain borders/content */
}
.status-overlay.visible .overlay-content, .modal-overlay.visible .modal-content,
.status-overlay[style*="display: flex"] .overlay-content, .modal-overlay[style*="display: flex"] .modal-content /* JS Compat */
{
opacity: 1; transform: scale(1) translateY(0);
}
/* Modal/Overlay Specifics */
.overlay-content { /* For Loading, Error */
padding: 2.5rem 3rem; text-align: center;
max-width: 550px;
position: relative; /* For corner elements */
}
/* Futuristic corners - Keep as is, maybe style colors? */
.overlay-content::before, .overlay-content::after {
content: ''; position: absolute; width: 20px; height: 20px; opacity: 0.5;
border-style: solid; border-color: var(--hp-accent-blue);
}
.overlay-content::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-top-left-radius: var(--radius-md); }
.overlay-content::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--radius-md); }
/* Spinner */
@keyframes spin { 100% { transform: rotate(360deg); } }
.spinner {
width: 48px; height: 48px; margin: 0 auto 1.5rem auto;
border: 4px solid var(--hp-border-secondary);
border-top-color: var(--hp-accent-blue);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;
}
#loading-message { font-size: 1.1rem; color: var(--hp-text-secondary); }
/* Error Overlay */
#error-overlay .overlay-title { color: var(--hp-accent-red); font-size: 1.6rem; margin-bottom: 1rem;}
#error-message.error-message { color: var(--hp-text-secondary); margin-bottom: 2rem; font-size: 1rem; }
.error-actions { display: flex; justify-content: center; gap: 1rem; }
/* Buttons handled by .btn */
/* Creation Form Overlay */
.creation-form-container { max-width: 500px; width: 100%; }
.hp-creation-form { padding: 2rem 2.5rem; }
.hp-creation-form h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.hp-creation-form > p { /* Initial intro text */
font-size: 0.95rem; color: var(--hp-text-secondary);
margin-bottom: 1.8rem; line-height: 1.7; text-align: center;
}
.hp-creation-form .form-group { margin-bottom: 1.3rem; }
.hp-creation-form label {
display: block; margin-bottom: 0.6rem; color: var(--hp-text-secondary);
font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.hp-creation-form input[type="text"], .hp-creation-form select {
width: 100%; padding: 0.7rem 1rem; background-color: var(--hp-bg-input);
border: 1px solid var(--hp-border-primary); border-radius: var(--radius-md); color: var(--hp-text-primary);
font-size: 1rem; box-shadow: var(--shadow-inset);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
/* Ensure input specific scrollbar is minimal */
scrollbar-width: thin; scrollbar-color: var(--hp-scroll-thumb) var(--hp-scroll-track);
}
.hp-creation-form input[type="text"]:focus, .hp-creation-form select:focus {
outline: none; border-color: var(--hp-border-accent); box-shadow: var(--shadow-focus), var(--shadow-inset);
}
/* Custom Select Arrow */
.hp-creation-form select {
appearance: none; -webkit-appearance: none;
padding-right: 2.5rem; /* Space for arrow */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0aec0'%3E%3Cpath fill-rule='evenodd' d='M8 11.5a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 8 11.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 16px;
cursor: pointer;
}
.hp-creation-form .help-text { /* Hat text */
font-size: 0.85rem; text-align: center; color: var(--hp-text-muted); margin-top: 1.5rem;
padding: 0.8rem; background: rgba(0,0,0,0.1); border-radius: var(--radius-md);
border: 1px dashed var(--hp-border-secondary);
}
.hp-creation-form button[type="submit"] { /* Button styled by .btn */
display: block; width: 100%; margin-top: 2rem;
}
/* Modals (Wider ones) */
.hp-modal .modal-content { max-width: 800px; width: 100%;}
.hp-modal .modal-content.wide-modal { max-width: 1000px; }
.hp-modal .modal-header {
display: flex; align-items: center; gap: 1rem;
padding: 1rem 1.5rem; /* Base padding */
/* Removed padding-right for close button */
border-bottom: 1px solid var(--hp-border-primary);
flex-shrink: 0;
background: var(--hp-bg-secondary); /* Slightly different header */
border-top-left-radius: inherit; border-top-right-radius: inherit;
position: relative; /* For absolute close button */
}
.hp-modal h2 { margin: 0; flex-grow: 1; font-size: 1.4rem; line-height: 1.3; word-break: break-word;}
.modal-title-icon { font-size: 1.3em; line-height: 1; opacity: 0.9; flex-shrink: 0;}
/* ============ MODAL CLOSE BUTTON IMPROVEMENT ============= */
.hp-modal .modal-close-btn {
position: absolute;
top: 8px; /* Slightly more padding from top/right */
right: 8px;
width: 32px; /* Slightly smaller hit area */
height: 32px;
border-radius: var(--radius-full);
font-size: 1.8rem;
line-height: 32px; /* Match height for centering */
text-align: center;
color: var(--hp-text-secondary); /* Softer initial color */
background: rgba(255, 255, 255, 0.05); /* Subtle background */
border: 1px solid var(--hp-border-primary);
cursor: pointer; z-index: 15;
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); /* Simpler transition */
box-shadow: var(--shadow-sm);
opacity: 0.8; /* Subtle transparency */
}
.hp-modal .modal-close-btn:hover {
background-color: rgba(var(--hp-accent-red-rgb, 240), 112, 105, 0.2); /* Use defined color with transparency */
color: var(--hp-accent-red); /* Direct red */
transform: scale(1.1); /* Subtle pulse scale */
border-color: var(--hp-accent-red);
box-shadow: var(--shadow-md);
opacity: 1;
}
.hp-modal .modal-close-btn:active {
transform: scale(0.95);
background-color: rgba(var(--hp-accent-red-rgb, 240), 112, 105, 0.3);
}
/* Symbol appearance can be controlled in JS or HTML. Assuming standard 'x'. */
/* If using a different symbol or SVG, adjust line-height/padding */
.hp-modal .modal-close-btn .close-icon {
display: block; line-height: 1; /* Ensure symbol/icon centers vertically */
}
.hp-modal .modal-body {
padding: 1.5rem; overflow: hidden; /* Control scroll on child */
flex-grow: 1; position: relative;
display: flex; flex-direction: column;
/* Default modal body is NOT directly scrollable unless added below */
}
/* Scrollable Modal Body Content */
.hp-modal .modal-body.scrollable-area {
overflow-y: auto;
overflow-x: hidden;
padding-right: calc(1.5rem + 8px); /* Ensure padding accounts for scrollbar */
}
/* Tabs - Should ideally *not* be within a separate scrollable area */
.hp-modal .modal-tabs {
display: flex; flex-wrap: wrap;
/* Adjusted margin to fit standard modal body padding */
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
padding: 0 1rem; /* Inner padding for buttons */
border-bottom: 1px solid var(--hp-border-primary);
background: var(--hp-bg-secondary); /* Match header */
position: sticky; top: 0; /* Sticky tabs */
z-index: var(--z-sticky); /* Ensure tabs stay on top of body content */
backdrop-filter: blur(2px);
/* Added small shadow for sticky appearance */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hp-modal .tab-button {
padding: 0.9rem 1.2rem;
font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem;
color: var(--hp-text-secondary); border-bottom: 3px solid transparent;
margin-bottom: -1px; /* Align border */
transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
position: relative;
background: transparent; /* Ensure background is initially clear */
}
.hp-modal .tab-button:hover {
color: var(--hp-text-primary); background-color: var(--hp-bg-hover);
}
.hp-modal .tab-button.active {
color: var(--hp-accent-blue); border-bottom-color: var(--hp-accent-blue);
background-color: transparent; /* Keep active tab background clear */
font-weight: 600;
}
.hp-modal .tab-content { display: none; flex-grow: 1; overflow: hidden; /* Let child scroll */ padding-top: 0.5rem;} /* Added small padding */
.hp-modal .tab-content.active { display: block; animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Ensure scrollable content areas WITHIN tabs use the class */
.hp-modal .tab-content .scrollable-area { max-height: calc(80vh - 200px); /* Example: Limit height if needed */}
/* Headings within tab content */
.hp-modal .tab-content h4 {
font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
color: var(--hp-text-secondary); margin-top: 1rem; margin-bottom: 0.8rem;
text-transform: uppercase; letter-spacing: 1px;
padding-bottom: 0.4rem; border-bottom: 1px solid var(--hp-border-secondary);
}
/* Lists inside Modals */
.hp-modal .modal-styled-list {
list-style: none; margin: 0 0 1.5rem 0; padding: 0;
border: 1px solid var(--hp-border-modal); border-radius: var(--radius-md);
background-color: rgba(0,0,0,0.1); overflow: hidden;
/* Added max-height and overflow for potential scroll in lists not in tab scrollable area */
/* Consider applying .scrollable-area to these lists directly IF the tab-content isn't scrollable */
/* max-height: 300px; */ /* Example height - actual value depends on modal layout */
/* overflow-y: auto; */
/* scrollbar-gutter: stable both-edges; */
}
/* Specific lists within tabs/modal bodies that ARE the scrollable content */
.hp-modal .tab-content .scrollable-list-container { /* Assuming a container div or ul inside tab */
max-height: calc(100% - 60px); /* Adjust calculation based on h4 height etc. */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
.hp-modal .modal-styled-list li {
display: flex; align-items: center; gap: 0.8rem;
padding: 0.8rem 1rem; border-bottom: 1px solid var(--hp-border-modal);
transition: background-color var(--transition-fast), transform var(--transition-fast), border-left-color var(--transition-fast);
font-size: 0.95rem; position: relative;
border-left: 4px solid transparent;
}
.hp-modal .modal-styled-list li:last-child { border-bottom: none; }
.hp-modal .modal-styled-list li.selectable { cursor: pointer; }
.hp-modal .modal-styled-list li.selectable:hover {
background-color: var(--hp-bg-hover);
border-left-color: var(--hp-accent-blue);
transform: translateX(3px);
}
.hp-modal .modal-styled-list li.selected {
background-color: var(--hp-bg-selected);
border-left-color: var(--hp-accent-gold);
font-weight: 500;
transform: translateX(0);
}
.hp-modal .placeholder-text {
color: var(--hp-text-muted); font-style: italic; text-align: center;
padding: 2rem 1rem; border: none !important; background: transparent !important;
font-size: 0.9rem; border-left: none !important; /* Override any inherited list item styles */
display: block !important; /* Ensure placeholder takes full line */
width: 100% !important;
}
/* Styling for item names etc inside lists */
.item-display-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.inventory-item-qty { /* Sidebar qty */
font-size: 0.8rem; color: var(--hp-text-muted); margin-left: auto;
padding: 0.1rem 0.4rem; background: var(--hp-bg-input);
border-radius: var(--radius-sm); border: 1px solid var(--hp-border-primary);
flex-shrink: 0; /* Don't shrink */
}
/* Adjust flex alignment for lists like schedule, results etc. */
.hp-modal .modal-styled-list.list-schedule li,
.hp-modal .modal-styled-list.list-exams li,
.hp-modal .modal-styled-list.grades-display li,
.hp-modal .modal-styled-list.pets-card-list li {
align-items: center; /* Revert baseline to center for items with varied heights */
}
/* Example status spans in schedule */
.exam-status.upcoming { color: var(--hp-accent-blue); font-weight: 500;}
.exam-status.passed { color: var(--hp-accent-green); }
.exam-status.failed, .exam-status.missed { color: var(--hp-accent-red); }
/* Item actions container (generic) */
.modal-item-actions {
margin-top: 1.5rem; padding: 1rem; background-color: rgba(0, 0, 0, 0.2);
border-radius: var(--radius-md); border: 1px solid var(--hp-border-secondary);
display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center;
box-shadow: var(--shadow-inset);
justify-content: center; /* Center action buttons by default */
}
.modal-item-actions .btn { margin: 0; /* Remove button margins inside actions */}
/* Tooltip Styling (Basic) */
/* --- ДОБАВЬТЕ В КОНЕЦ ФАЙЛА hp-game.css (ВЗАМЕН СТАРОГО) --- */
/* --- Global JavaScript Tooltip --- */
.global-tooltip {
position: fixed; /* Uses fixed positioning to follow the cursor anywhere */
z-index: 9999; /* Always on top */
background-color: var(--hp-bg-deep);
color: var(--hp-text-primary);
padding: 0.6rem 1rem;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-family: var(--font-ui);
white-space: pre-wrap; /* Allows line breaks from data-tooltip (\n) */
border: 1px solid var(--hp-border-primary);
box-shadow: var(--shadow-lg);
max-width: 300px;
/* Hidden by default */
opacity: 0;
visibility: hidden;
pointer-events: none; /* Doesn't interfere with mouse events below it */
transition: opacity 0.15s ease-out; /* Faster transition */
will-change: transform, opacity; /* Performance optimization */
/* We remove the transform from the transition to prevent lag */
/* Position is set directly via JS */
}
.global-tooltip.visible {
opacity: 1;
visibility: visible;
}
/* --- Specific Modal Styles --- */
/* Spells & Skills Modals - ensure lists can scroll if needed */
#spells-list-modal.modal-styled-list {
/* max-height: calc(100vh - 300px); Adjust as needed */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
#spells-list-modal li::before { content: '✨'; font-size: 1em; margin-right: 0.2rem; opacity: 0.8;}
#skills-list-modal.modal-styled-list {
/* max-height: calc(100vh - 350px); Adjust */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
#skills-list-modal li { justify-content: space-between; }
.skill-item .skill-name-value { display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; }
.skill-add-btn { /* '+' button */
background: var(--hp-accent-blue); color: var(--hp-bg-deep);
width: 28px; height: 28px; font-size: 1.5rem; line-height: 26px; text-align: center;
border-radius: var(--radius-full); font-weight: 600;
flex-shrink: 0; margin-left: 1rem; box-shadow: var(--shadow-sm);
transition: background-color var(--transition-fast), transform var(--transition-fast);
display: inline-flex; /* Use flex to center symbol better if needed */
align-items: center; justify-content: center;
}
.skill-add-btn:hover:not(:disabled) { background-color: var(--hp-text-link-hover); transform: scale(1.1); }
.skill-add-btn:disabled { background-color: var(--hp-text-muted); opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
#skills-modal .skill-points-info {
margin-bottom: 1rem; padding: 0.6rem; text-align: center;
font-weight: 500; color: var(--hp-text-secondary);
background: rgba(0,0,0,0.1); border-radius: var(--radius-md);
border: 1px dashed var(--hp-border-secondary); font-size: 0.9rem;
}
#skills-modal .accent-value { color: var(--hp-accent-blue); font-size: 1.1em; font-weight: 600; }
#skill-distribution-message { /* For messages within skills modal */ margin-top: 1rem; }
/* Inventory Modal - Tab content needs to be scrollable */
#inventory-modal .tab-content.scrollable-area {
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
/* Lists inside Inventory Tabs */
#inventory-list-modal.modal-styled-list,
#potions-list-modal.modal-styled-list,
#ingredients-list-modal.modal-styled-list {
/* Removed max-height/overflow here - relies on parent tab-content being scrollable */
border: none; background: none; margin-bottom: 0; padding-bottom: 0;
}
#inventory-list-modal li.item-readable::after {
content: "📖"; /* Simple read icon */
margin-left: 8px; font-size: 0.9em; opacity: 0.7;
color: var(--hp-accent-blue); cursor: pointer;
flex-shrink: 0; /* Don't let icon be squished */
pointer-events: all; /* Ensure click works */
line-height: 1;
}
#inventory-list-modal li.item-readable:hover::after { opacity: 1; }
#inventory-list-modal li::before { /* Icon prefix for items */
content: ''; font-size: 1em; margin-right: 0.5rem; opacity: 0.8; /* Increased gap slightly */
flex-shrink: 0; /* Don't shrink icon space */
width: 1.2em; /* Give consistent space */
text-align: center;
line-height: 1; /* Ensure vertical alignment */
}
/* Assigning icons based on type via data attribute (set by JS) - Keep as is */
/* General item actions container adjustment */
#inventory-actions {
display: none; /* Initially hidden */
justify-content: flex-start; /* Align left within the actions area */
margin-top: 1rem; /* Adjusted spacing below lists */
margin-bottom: 0; /* No bottom margin if it's at the bottom of the tab content */
}
/* Potion Brewing Modal - Body is scrollable */
.potion-brewing-details.scrollable-area {
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
.brewing-interface { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; flex-grow: 1;}
/* Ingredient Selection Area - this itself is a scrollable region */
.ingredient-selection-area {
border-right: 1px solid var(--hp-border-primary); padding-right: 1.5rem;
/* Added max-height and overflow for its own scrollability */
max-height: 45vh; /* Limit height to make it scrollable */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
.ingredient-check-list li {
padding: 0.5rem 0.2rem;
border-bottom: 1px solid var(--hp-border-secondary); /* Keep the border */
display: flex; align-items: center;
/* Ensure li padding works with scrollbar */
padding-right: 8px; /* Add padding for scrollbar if needed */
}
.ingredient-check-list li:last-child { border-bottom: none; } /* Remove border for last item */
.ingredient-check-list input[type="checkbox"] { transform: scale(1.1); margin-right: 0.8rem; cursor: pointer; accent-color: var(--hp-accent-gold); flex-shrink: 0; } /* Keep icon small */
.ingredient-check-list label { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex-grow: 1;}
.ingredient-check-list .ingredient-icon { margin-right: 0.5rem; opacity: 0.8;} /* Keep icon spacing */
.ingredient-check-list .ingredient-name { flex-grow: 1; margin: 0 0.5rem; word-break: break-word; overflow-wrap: break-word; } /* Allow ingredient names to wrap */
.ingredient-check-list .ingredient-qty { font-size: 0.85em; color: var(--hp-text-muted); flex-shrink: 0; } /* Keep qty small */
.cauldron-area {
display: flex; flex-direction: column; text-align: center; padding: 1.5rem;
background-color: rgba(0,0,0,0.2); border-radius: var(--radius-lg); border: 1px solid var(--hp-border-secondary);
}
.cauldron-animation { margin-bottom: 1.5rem; position: relative; min-height: 80px; }
.cauldron-icon { font-size: 4rem; color: var(--hp-accent-gold); display: inline-block; animation: cauldron-bob 3s ease-in-out infinite; }
@keyframes cauldron-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* Bubble animation - Ensure positioned correctly relative to cauldron icon area */
.bubble {
position: absolute; background-color: var(--hp-accent-magic); width: 8px; height: 8px;
border-radius: 50%; bottom: 30px; opacity: 0; animation: bubble-up 1.5s infinite ease-out;
}
.bubble.b1 { left: calc(50% - 20px); animation-delay: 0s; } /* Adjust positions relative to center */
.bubble.b2 { left: 50%; animation-delay: 0.3s; }
.bubble.b3 { left: calc(50% + 20px); animation-delay: 0.7s; }
@keyframes bubble-up {
0% { transform: translateY(0); opacity: 0.8; }
90% { opacity: 0.8; }
100% { transform: translateY(-50px) scale(1.2); opacity: 0; } /* Add slight scale */
}
/* Steam animation - Ensure positioned correctly relative to cauldron icon area */
.steam {
position: absolute; background-color: rgba(160, 174, 192, 0.3); width: 4px; height: 15px;
border-radius: 2px; top: 0; opacity: 0; animation: steam-rise 2s infinite linear;
}
.steam.s1 { left: calc(50% - 10px); animation-delay: 0s; }
.steam.s2 { left: 50%; animation-delay: 0.5s; }
.steam.s3 { left: calc(50% + 10px); animation-delay: 1s; }
@keyframes steam-rise {
0% { transform: translateY(0) scaleX(1); opacity: 0.6; }
100% { transform: translateY(-30px) scaleX(1.5); opacity: 0; } /* Slightly shorter rise */
}
.cauldron-area h4 { margin-bottom: 0.5rem; font-size: 1rem; }
.cauldron-area h5 { margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--hp-text-secondary); }
.ingredients-added-list {
min-height: 60px; max-height: 120px; overflow-y: auto;
background: var(--hp-bg-input); border: 1px solid var(--hp-border-primary);
padding: 0.5rem 0.8rem; text-align: left; font-size: 0.9rem;
color: var(--hp-text-secondary); border-radius: var(--radius-md); margin: 0.5rem 0 1.5rem 0;
scrollbar-gutter: stable both-edges; /* Scrollbar space */
}
.ingredients-added-list li::before { content: "• "; opacity: 0.8; margin-right: 4px; }
.brewing-actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.8rem; }
/* Item Content Modal - Body needs scroll */
.item-content-details { /* Assumes this is the direct parent of the scrollable content */
flex-grow: 1; display: flex; flex-direction: column; overflow: hidden;
}
#item-content-display.prose-styles {
font-family: var(--font-primary-text); line-height: 1.8; color: var(--hp-text-primary);
background-color: var(--hp-bg-content); border: 1px solid var(--hp-border-modal);
border-radius: var(--radius-md); padding: 1.5rem 2rem; /* More padding */
font-size: 1rem;
flex-grow: 1; /* Use flex to grow */
max-height: 65vh; /* Limit height to make it scroll */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
word-wrap: break-word; overflow-wrap: break-word; /* Ensure text wraps */
}
#item-content-message { margin-top: 1rem; }
/* --- Pets Modal (Redesigned) --- */
.pets-details { /* Assuming modal-body */ flex-direction: column; overflow: hidden; display: flex;}
.pets-details .pets-header-info {
display: flex; justify-content: space-around; gap: 1rem; flex-wrap: wrap;
padding: 0.8rem 1rem; background: rgba(0,0,0,0.15); border-radius: var(--radius-md);
border: 1px solid var(--hp-border-secondary); margin-bottom: 1.5rem; font-size: 0.9rem;
flex-shrink: 0; /* Don't shrink header info */
}
#pets-list-modal.modal-styled-list { /* This list needs to be scrollable */
display: grid; gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Slightly wider cards */
border: none; background: none; margin: 0; padding: 0.5rem; /* Padding for focus outlines */
flex-grow: 1; /* Allow the list itself to take vertical space */
overflow-y: auto; /* Make the list content scrollable */
scrollbar-gutter: stable both-edges;
padding-right: calc(0.5rem + 8px); /* Add space for scrollbar + right padding */
}
#pets-list-modal li.pet-card-container {
display: contents; /* Make LI behave like its content for grid layout */
outline: none; /* Remove default list item outline */
}
/* Focus state for the container (for keyboard nav) */
#pets-list-modal li.pet-card-container:focus-within .pet-card {
box-shadow: var(--shadow-focus), var(--shadow-lg);
border-color: var(--hp-accent-blue);
}
.pet-card {
display: flex; flex-direction: row; /* Changed to row for wider cards */
gap: 1rem; padding: 1rem; /* Slightly less padding */
border: 1px solid var(--hp-border-primary);
border-radius: var(--radius-lg);
background: var(--hp-bg-secondary); /* Match sidebar background */
box-shadow: var(--shadow-md);
transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
cursor: pointer; position: relative; overflow: hidden;
}
#pets-list-modal li.selected .pet-card { /* Selection style */
border-color: var(--hp-accent-gold);
box-shadow: 0 0 15px var(--hp-accent-gold-hover);
transform: scale(1.02);
}
#pets-list-modal li:hover .pet-card { /* Hover style */
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--hp-border-secondary);
}
/* Cage effect: overlay bars if pet is NOT carried */
.pet-card.stored::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background-image: var(--cage-bars);
opacity: 0.6;
pointer-events: none;
z-index: 5; /* Above card content, below action overlay */
}
.pet-card-header { /* Now holds avatar, name, status icons */
display: flex; flex-direction: column; /* Stack these elements vertically */
align-items: center;
gap: 0.6rem;
flex-shrink: 0; /* Don't let this column shrink */
width: 80px; /* Fixed width for the left column */
text-align: center;
position: relative;
z-index: 10; /* Ensure above cage effect */
}
.pet-card-avatar { /* Container for the emoji icon (or image) */
width: 50px; /* Adjust size */
height: 50px;
font-size: 2.5rem;
display: flex; align-items: center; justify-content: center;
background-color: rgba(0,0,0,0.2);
border-radius: var(--radius-md);
filter: drop-shadow(var(--shadow-sm));
transition: transform 0.4s var(--transition-smooth);
position: relative; /* For inner animation/content positioning */
overflow: hidden; /* Hide parts of icon if scale causes it */
}
/* Optional: add pseudo-element for a background glow or pulse effect */
.pet-card-avatar::before {
content: ''; position: absolute; inset: -5px; border-radius: inherit;
background: radial-gradient(circle at center, rgba(180,150,255,0.3) 0%, transparent 50%);
opacity: 0; transition: opacity 0.6s ease-in-out; z-index: -1;
}
.pet-card:hover .pet-card-avatar::before { opacity: 1; animation: avatar-pulse 1.5s infinite alternate ease-in-out; }
/* Avatar Image/Emoji Styling - Applies directly if you replace emoji span with img */
.pet-card-avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s var(--transition-smooth);
}
/* Basic Pet Emoji Icon inside the avatar div */
.pet-card-avatar > span:first-child {
/* If this is the emoji span directly, style it */
font-size: 2.5rem; line-height: 1;
/* Animation class will be applied here or to the parent avatar div */
}
.pet-card:hover .pet-card-avatar { transform: scale(1.1); }
/* Basic CSS animations for pet icons/avatars - these can be applied via JS */
@keyframes pet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pet-spin { 100% { transform: rotate(360deg); } } /* Slow spin */
@keyframes avatar-pulse {
0%, 100% { box-shadow: 0 0 8px var(--hp-accent-magic), inset 0 0 5px var(--hp-accent-magic); }
50% { box-shadow: 0 0 15px var(--hp-accent-magic), inset 0 0 8px var(--hp-accent-magic); }
}
/* Apply animations if JS adds the classes */
.pet-card-avatar.animate-float { animation: pet-float 4s ease-in-out infinite; }
.pet-card-avatar.animate-spin { animation: pet-spin 10s linear infinite; }
.pet-card-identity { /* Combined Name and Status Icons */
display: flex; flex-direction: column; align-items: center; margin-top: 0.5rem;
}
.pet-card-name { font-family: var(--font-accent); font-size: 1.3rem; font-weight: normal; color: var(--hp-text-primary); margin-bottom: 0.2rem; text-align: center; word-break: break-word;}
.pet-card-status-icons { font-size: 0.85rem; color: var(--hp-text-secondary); opacity: 0.8;}
.pet-card-status-icons span { margin-right: 0.5rem; cursor: help; }
.pet-card-status-icons span:last-child { margin-right: 0; }
.pet-stats-grid {
display: grid; grid-template-columns: repeat(1, 1fr); /* Stack stats vertically in card view */
gap: 0.4rem; font-size: 0.85rem; font-family: var(--font-ui);
flex-grow: 1; /* Allow stats area to grow */
align-items: center;
padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.05); /* Separator line */
position: relative; z-index: 10; /* Ensure above cage effect */
}
.pet-stat { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.pet-stat .stat-icon { width: 1.2em; text-align: center; opacity: 0.7; font-size: 1.1em; flex-shrink: 0;}
.pet-stat .stat-label { color: var(--hp-text-secondary); font-weight: 500; flex-shrink: 0; margin-right: auto;} /* Push value right */
.pet-stat .stat-value { color: var(--hp-text-primary); font-weight: 600; flex-shrink: 0;}
.stat-value.mood-value.good { color: var(--hp-mood-good); }
.stat-value.mood-value.ok { color: var(--hp-mood-ok); }
.stat-value.mood-value.bad { color: var(--hp-mood-bad); }
/* Pet Actions Area */
#pet-actions-context-area {
margin-top: 1.5rem; /* Space above action panel */
padding: 1rem; /* Added padding around the actions area */
border-radius: var(--radius-lg); /* Rounded corners */
background-color: rgba(0,0,0,0.1); /* Subtle background for the whole area */
border: 1px solid var(--hp-border-primary);
box-shadow: var(--shadow-inset);
flex-shrink: 0; /* Don't let action area shrink */
}
.pet-action-panel { /* Main action container */
padding: 1rem;
background-color: rgba(0, 0, 0, 0.2); /* Slightly darker background than context area */
border-radius: var(--radius-lg);
border: 1px solid var(--hp-border-modal); /* Using modal border color */
margin-top: 0; /* No margin-top if inside context area */
box-shadow: var(--shadow-md);
display: flex; /* Keep display flex */
flex-direction: column; /* Stack inner elements */
gap: 0.8rem; /* Space between action rows/sections */
}
.pet-action-panel h4 { /* Title (Selected Pet Name) */
font-family: var(--font-ui); font-size: 1rem; text-align: center;
color: var(--hp-accent-gold); margin: 0 0 1rem 0;
padding-bottom: 0.5rem; border-bottom: 1px solid var(--hp-border-secondary);
}
/* Main action buttons grid */
.pet-action-buttons-main {
display: grid; grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
gap: 0.5rem;
/* margin-bottom: 1rem; Removed if subpanels or message follow */
margin-bottom: 0.8rem; /* Space below main buttons */
}
.pet-action-buttons-main .btn { /* Styling for icon-only buttons */
height: 45px; padding: 0; font-size: 1.5rem; line-height: 1;
/* Inherits .btn styles */
background-color: rgba(255,255,255,0.05); /* Base subtle bg */
border-color: rgba(255,255,255,0.1);
}
.pet-action-buttons-main .btn:hover:not(:disabled) { background-color: var(--hp-bg-hover); color: var(--hp-text-primary); }
.pet-action-buttons-main .btn:active:not(:disabled) { background-color: rgba(255,255,255,0.1); }
/* Separate disabled state styling if needed beyond opacity */
.pet-action-subpanels { display: flex; flex-direction: column; gap: 0.8rem; }
.pet-subpanel {
display: none; /* Hidden by default */
align-items: center; gap: 0.8rem; padding: 0.8rem 1rem;
background-color: rgba(0, 0, 0, 0.3); border-radius: var(--radius-md);
border: 1px solid var(--hp-border-secondary);
/* Ensure visibility is flex when JS sets display */
}
/* Input styles within subpanels */
.pet-subpanel label { font-size: 0.9rem; color: var(--hp-text-secondary); width: 80px; text-align: right; flex-shrink: 0;}
.pet-subpanel select, .pet-subpanel input[type="text"] {
flex-grow: 1; padding: 0.5rem 0.8rem; font-size: 0.95rem; /* Inherit main form styles */
background-color: var(--hp-bg-input); border: 1px solid var(--hp-border-primary);
border-radius: var(--radius-md); color: var(--hp-text-primary);
box-shadow: var(--shadow-inset);
scrollbar-width: thin; scrollbar-color: var(--hp-scroll-thumb) var(--hp-scroll-track); /* Scrollbar for select/input if options are long */
}
.pet-subpanel select:focus, .pet-subpanel input[type="text"]:focus { outline: none; border-color: var(--hp-border-accent); box-shadow: var(--shadow-focus), var(--shadow-inset); }
.pet-subpanel select { /* Custom arrow */
appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0aec0'%3E%3Cpath fill-rule='evenodd' d='M8 11.5a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 8 11.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 14px;
cursor: pointer;
}
.pet-subpanel .btn-confirm {
flex-shrink: 0; /* Small confirm button */
padding: 0.5rem 1rem; font-size: 0.85rem; /* Adjusted padding/font size */
font-weight: 500; text-transform: uppercase;
}
/* Messages inside modals */
.modal-message {
padding: 0.7rem 1rem; margin-top: 1rem; border-radius: var(--radius-md);
font-size: 0.9rem; text-align: center; font-weight: 500;
display: none; border: 1px solid transparent;
word-wrap: break-word; overflow-wrap: break-word; /* Ensure message text wraps */
}
/* Use feedback colors */
.modal-message.info { background-color: rgba(var(--hp-accent-blue-rgb), 0.1); border-color: rgba(var(--hp-accent-blue-rgb), 0.3); color: var(--hp-text-link); }
.modal-message.success { background-color: rgba(86, 211, 100, 0.1); border-color: rgba(86, 211, 100, 0.3); color: var(--hp-accent-green); }
.modal-message.error { background-color: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.3); color: var(--hp-accent-red); }
.modal-message.brewing-result { margin-top: 1.5rem; } /* Add spacing specific to brewing result */
/* Modal Help Text */
.modal-help-text {
font-size: 0.8rem; color: var(--hp-text-muted); margin-top: 1.5rem;
padding-top: 1rem; border-top: 1px dashed var(--hp-border-secondary);
line-height: 1.5; text-align: center; font-style: italic;
}
.modal-help-text strong { color: var(--hp-accent-gold); font-style: normal; }
/* Adjusted help text margin below pet action container */
#pet-actions-context-area + .modal-help-text { margin-top: 1rem; border-top: none; padding-top: 0;} /* Reduce space after action area */
/* --- Buttons (Unified Styles) --- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.6rem 1.2rem; /* Base padding */
font-size: 0.9rem; font-family: var(--font-ui); font-weight: 600;
border-radius: var(--radius-md); border: 1px solid transparent;
cursor: pointer; line-height: 1.4; text-align: center;
text-transform: uppercase; letter-spacing: 0.8px;
transition: all var(--transition-med); user-select: none;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
position: relative; /* For potential overlays/pseudo elements */
}
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-sm); } /* Visible focus */
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(60%); }
.btn .btn-icon-emoji { font-size: 1.1em; line-height: 1; }
.btn .visually-hidden { /* Already defined, just ensure it works */ }
/* Primary Button (Gold Accent) */
.btn-primary {
background: linear-gradient(to bottom, var(--hp-accent-gold), #c89e53);
color: #2a1d0a; /* Dark contrast */
border-color: rgba(106, 74, 20, 0.5);
text-shadow: 0 1px 1px rgba(255, 230, 170, 0.1);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(to bottom, var(--hp-accent-gold-hover), var(--hp-accent-gold));
transform: translateY(-2px); box-shadow: var(--shadow-md);
border-color: rgba(106, 74, 20, 0.8);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Secondary Button (Standard UI) */
.btn-secondary {
background-color: var(--hp-bg-secondary);
color: var(--hp-text-secondary); border-color: var(--hp-border-primary);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--hp-bg-content); border-color: var(--hp-border-secondary);
color: var(--hp-text-primary); box-shadow: var(--shadow-md);
}
/* Danger Button */
.btn-danger {
background: linear-gradient(to bottom, var(--hp-accent-red), #d15b54);
color: #fff; border-color: #a13934;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.btn-danger:hover:not(:disabled) {
background: linear-gradient(to bottom, #ff8a84, #e66b64);
transform: translateY(-2px); box-shadow: var(--shadow-md);
}
/* Button Sizes */
.btn-small { padding: 0.4rem 0.8rem; font-size: 0.8rem; gap: 0.4rem;}
.btn-large { padding: 0.9rem 1.8rem; font-size: 1rem; letter-spacing: 1px;}
/* --- Visually Hidden & Spinner Container --- */
.visually-hidden {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.spinner-container { /* Generic loading inside content areas */
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 2rem 1rem; color: var(--hp-text-muted); min-height: 100px; /* Adjusted min-height */
}
.spinner-container .spinner { width: 36px; height: 36px; margin-bottom: 1rem; }
.spinner-container p { font-size: 0.9rem; font-style: italic; }
/* ########################################## */
/* ######## MOBILE RESPONSIVENESS ########### */
/* ########################################## */
@media (max-width: 1200px) { /* Tablet landscape / Small Desktops */
:root {
--sidebar-width: 260px;
--utility-sidebar-width: 240px;
--container-padding: 1.2rem;
}
.hp-modal .modal-content { max-width: 700px; }
.hp-modal .modal-content.wide-modal { max-width: 900px; }
/* #pets-list-modal { grid-template-columns: 1fr; } Removed - keep row layout if space permits */
/* .pet-card { flex-direction: row; align-items: center; } Retain row layout */
.header-info-cluster { display: none; } /* Hide center info cluster */
}
@media (max-width: 768px) { /* Tablets portrait / Large Phones */
:root {
--header-height: 56px;
--container-padding: 1rem;
font-size: 15px; /* Adjust base font size slightly */
}
#game-header .header-info-cluster { display: none; }
#game-header .controls { /* Show mobile toggles if they existed */ }
#game-main-content {
grid-template-columns: 1fr; /* Single column */
padding: var(--container-padding);
padding-top: 0.5rem;
gap: 1rem;
/* Ensure main content area can scroll */
/* max-height: calc(100vh - var(--header-height) - var(--min-footer-height) - 0.5rem); Handled by flex grow + overflow hidden on body container */
overflow-y: visible; /* Allow the whole section to determine height */
display: block; /* Stack content vertically normally */
}
/* Inner elements will scroll individually where defined */
/* Configure Sidebars for mobile (slide-in) */
#character-sidebar, #utility-sidebar {
position: fixed; top: 0; left: -100%; /* Start off-screen */
width: 85%; max-width: 320px; /* Mobile width */
height: 100%; max-height: 100vh;
z-index: var(--z-sidebar);
transition: transform 0.35s var(--transition-smooth);
border-radius: 0; border: none;
border-right: 1px solid var(--hp-border-primary);
box-shadow: var(--shadow-lg);
overflow-y: auto; /* Allow sidebar itself to scroll */
padding: 0; /* Remove main padding */
/* Ensure the actual content area inside IS scrollable */
}
#utility-sidebar { left: auto; right: -100%; border-right: none; border-left: 1px solid var(--hp-border-primary);}
/* Sidebar Content (Mobile) - MUST be scrollable element */
#character-sidebar .sidebar-content,
#utility-sidebar .sidebar-content {
padding: var(--container-padding); /* Consistent padding */
overflow-y: auto; /* Ensure scrolling on this internal element */
overflow-x: hidden;
padding-right: calc(var(--container-padding) + 8px); /* Account for scrollbar + padding */
height: 100%; /* Ensure it takes up height for scrolling */
max-height: none; /* Remove constraint from desktop */
/* The mask effect needs to be applied here if desired on mobile sidebars */
/* mask-image: linear-gradient... */
/* -webkit-mask-image: linear-gradient... */
}
#character-sidebar.mobile-visible { transform: translateX(0); /* Full visibility */ }
#utility-sidebar.mobile-visible { transform: translateX(0); /* Full visibility */}
/* Overlay for when sidebar is open */
body.hp-theme.sidebar-open::after { /* Changed from ::before to ensure higher stacking */
content: ''; position: fixed; inset: 0;
background-color: rgba(var(--hp-bg-deep-rgb, 13), 17, 23, 0.7);
backdrop-filter: blur(4px); z-index: calc(var(--z-sidebar) - 1);
opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s;
pointer-events: auto; /* Can capture clicks to close */
}
:root { --hp-bg-deep-rgb: 13, 17, 23; } /* Define RGB */
body.hp-theme:not(.sidebar-open)::after {
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s;
pointer-events: none; /* Important to allow interaction when sidebar is NOT open */
}
/* Adjustments for smaller screens */
#chat-area {
max-height: none;
min-height: 40vh; /* Ensure decent chat height */
height: 100%; /* Ensure chat takes available height if main is flex column */
flex-grow: 1; /* Allow chat to grow */
margin-top: 1rem; /* Space below other top content if main is not grid/flex */
}
/* Remove chat log masks on small screen or make them less prominent */
#chat-log.hp-chat-log::before, #chat-log.hp-chat-log::after {
/* height: 20px; More subtle */
background: linear-gradient(to bottom, var(--hp-msg-ai-bg) 5%, transparent 30%);
/* margin: 0; padding: 0; Remove margin/padding hacks for positioning */
}
#chat-log.hp-chat-log::after {
background: linear-gradient(to top, var(--hp-msg-ai-bg) 5%, transparent 30%);
}
#input-area { min-height: auto; }
#player-input { font-size: 1rem; padding: 0.6rem 0.8rem; min-height: 44px; }
#send-button { height: 44px; width: 44px; font-size: 1.4rem; }
.hp-modal .modal-content { max-width: 95%; width: 95%; }
.brewing-interface { grid-template-columns: 1fr; }
.ingredient-selection-area { border-right: none; padding-right: 0; max-height: 30vh; } /* Stack brewing interface */
.pet-card { flex-direction: column; align-items: center;} /* Back to stacked layout for cards */
.pet-card-header { width: auto; /* Reset width */ flex-direction: row; gap: 1rem; align-items: flex-start; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.8rem;} /* Header in card goes back to row for compact */
.pet-card-avatar { width: 40px; height: 40px; font-size: 2rem; } /* Smaller avatar in card */
.pet-card-identity { align-items: flex-start; /* Align left */ margin-top: 0; }
.pet-card-name { font-size: 1.2rem; text-align: left;}
.pet-stats-grid { grid-template-columns: repeat(2, 1fr); /* Back to 2 columns for stats on smaller screens */ padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 0.8rem; margin-top: 0.8rem; gap: 0.4rem 0.8rem; } /* Stats grid */
#game-title { font-size: 1.3rem; }
/* Display mobile toggle buttons in header (if HTML structure is added) */
.mobile-toggle-button {
display: inline-flex; /* Show mobile buttons */
/* Inherit .btn styles or define specific ones */
width: 38px; height: 38px; padding: 0; font-size: 1.3rem;
/* Add styles similar to exit button */
background: none; border: none;
color: var(--hp-text-secondary);
transition: color 0.2s ease;
}
.mobile-toggle-button:hover { color: var(--hp-text-primary); }
}
@media (max-width: 480px) { /* Small Phones */
:root { font-size: 14px; }
#game-main-content { padding: 0.8rem; gap: 0.8rem; }
#input-area { padding: 0.5rem 0.8rem; }
.message { gap: 0.6rem; }
.message-avatar { width: 32px; height: 32px; border-width: 1px;}
.message-content { padding: 0.6rem 0.9rem; padding-bottom: 1.5rem; }
#character-avatar-area { width: 80px; height: 80px; border-width: 2px; }
#character-name.sidebar-char-name { font-size: 1.3rem; }
.hp-modal .modal-body { padding: 1rem; }
.hp-modal .modal-header { padding: 0.8rem 1rem; /* Adjust header padding */ padding-right: 2.5rem;} /* Space for smaller close btn */
.hp-modal h2 { font-size: 1.2rem; }
.hp-modal .modal-close-btn { width: 30px; height: 30px; line-height: 30px; font-size: 1.6rem; top: 6px; right: 6px;} /* Smaller close button */
.pet-card-header { flex-direction: column; align-items: center; text-align: center;} /* Stack avatar/name in smaller cards */
.pet-stats-grid { grid-template-columns: 1fr; } /* Stack stats again if horizontal space is too limited */
}
/* --- Weather Effects --- */
#weather-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--z-sticky); /* Выше контента, но ниже модальных окон */
overflow: hidden;
transition: opacity 0.8s ease-in-out;
opacity: 0;
}
#weather-overlay.active {
opacity: 1;
}
/* Rain Effect */
#weather-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--z-sticky); /* Выше контента, но ниже модальных окон */
overflow: hidden;
transition: opacity 0.8s ease-in-out;
opacity: 0;
background: transparent; /* Фон по умолчанию прозрачный */
}
#weather-overlay.active {
opacity: 1;
}
/* --- НОВЫЙ ЭФФЕКТ КАПЕЛЬ ДОЖДЯ --- */
@keyframes rain-fall-animation {
0% { transform: translateY(-100px); }
100% { transform: translateY(100vh); }
}
#weather-overlay.rain .raindrop {
position: absolute;
bottom: 100%;
width: 2px; /* Толщина капли */
height: 80px; /* Длина капли */
pointer-events: none;
background: linear-gradient(to bottom, rgba(174,194,224,0), rgba(174,194,224,0.4)); /* Полупрозрачный градиент */
animation: rain-fall-animation linear infinite;
}
/* --- КОНЕЦ НОВОГО ЭФФЕКТА --- */
/* Snow Effect */
#weather-overlay.snow .snowflake {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
opacity: 0;
animation: snow-fall 10s linear infinite;
}
@keyframes snow-fall {
0% {
transform: translateY(-10vh) translateX(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(110vh) translateX(10vw);
opacity: 0;
}
}
/* --- Header Controls Adjustments --- */
#game-header .controls {
display: flex;
align-items: center;
gap: 0.5rem; /* Добавляем промежуток между кнопками */
}
#restart-game-btn,
#exit-game-btn {
width: 38px;
height: 38px;
padding: 0;
font-size: 1.3rem; /* Размер иконки */
border-radius: var(--radius-md);
line-height: 1;
}
/* Специфичный стиль для кнопки рестарта, чтобы она отличалась */
#restart-game-btn {
color: var(--hp-text-secondary);
background-color: transparent;
border: none;
transition: color var(--transition-med), background-color var(--transition-med), box-shadow var(--transition-med), transform var(--transition-fast);
}
#restart-game-btn:hover {
background-color: rgba(var(--hp-accent-blue-rgb, 108), 180, 255, 0.15);
color: var(--hp-accent-blue);
box-shadow: 0 0 8px rgba(var(--hp-accent-blue-rgb, 108), 180, 255, 0.4);
transform: rotate(-90deg); /* Эффект вращения при наведении */
}
/* Стили для кнопки выхода немного переопределим для консистентности */
#exit-game-btn {
background: transparent;
border: none;
transition: color var(--transition-med), background-color var(--transition-med), box-shadow var(--transition-med);
color: var(--hp-text-secondary);
}
#exit-game-btn:hover {
background-color: rgba(var(--hp-accent-red-rgb, 240), 112, 105, 0.15);
color: var(--hp-accent-red);
box-shadow: 0 0 8px rgba(var(--hp-accent-red-rgb, 240), 112, 105, 0.4);
}
/* --- Hidden/Obscured Text Styling --- */
.obscured-text {
text-decoration: line-through;
color: var(--hp-text-muted);
cursor: help;
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.obscured-text:hover {
color: var(--hp-text-secondary);
text-decoration-color: var(--hp-accent-red);
}
#inventory-list-modal li.equipped {
background-color: rgba(104, 211, 145, 0.1); /* Легкий зеленый фон */
border-left-color: var(--hp-accent-green); /* Зеленая полоска слева */
font-weight: 500;
}
/* Добавляем иконку "надето" к предмету */
#inventory-list-modal li.equipped::after {
content: '👕'; /* Эмодзи рубашки как индикатор */
font-size: 1.1em;
margin-left: auto; /* Прижимаем иконку к правому краю */
padding-left: 10px;
opacity: 0.9;
}
/* --- hp-game.css --- */
/* ДОБАВЬТЕ В КОНЕЦ ФАЙЛА */
/* --- Стили для слотов экипировки --- */
/* --- Стили для слотов экипировки (ИСПРАВЛЕННАЯ ВЕРСИЯ) --- */
.equipment-slots .equip-slot-grid {
display: grid;
/* ИЗМЕНЕНИЕ: Говорим колонкам, что они могут сжиматься, а не растягиваться под контент */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px; /* Немного уменьшим зазор */
}
.equip-slot {
display: flex;
align-items: center;
background-color: var(--hp-bg-input);
border: 1px solid var(--hp-border-primary);
border-radius: var(--radius-md);
padding: 6px 10px;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
overflow: hidden; /* ДОБАВЛЕНО: Это важно, чтобы обрезка текста сработала корректно */
}
.equip-slot .slot-icon {
font-size: 1.4em;
margin-right: 8px; /* Немного уменьшим отступ */
opacity: 0.5;
flex-shrink: 0; /* ДОБАВЛЕНО: Запрещаем иконке сжиматься */
}
.equip-slot .slot-item-name {
font-size: 0.85em;
white-space: nowrap; /* Запрещаем перенос текста */
overflow: hidden; /* Скрываем все, что не помещается */
text-overflow: ellipsis; /* Добавляем многоточие (...) */
min-width: 0; /* Позволяет элементу сжиматься */
}
.equip-slot.empty .slot-item-name {
color: var(--hp-text-muted);
font-style: italic;
}
.equip-slot.filled {
border-color: var(--hp-accent-gold);
cursor: pointer;
}
.equip-slot.filled:hover {
background-color: rgba(230, 195, 111, 0.1);
border-color: var(--hp-accent-gold-hover);
}
.equip-slot.filled .slot-icon {
opacity: 1;
}
.equip-slot.filled .slot-item-name {
color: var(--hp-accent-gold);
font-weight: 500;
}
.equip-slot.empty .slot-item-name {
color: var(--hp-text-muted);
font-style: italic;
}
.equip-slot.filled {
border-color: var(--hp-accent-gold);
cursor: pointer;
}
.equip-slot.filled:hover {
background-color: rgba(230, 195, 111, 0.1);
border-color: var(--hp-accent-gold-hover);
}
.equip-slot.filled .slot-icon {
opacity: 1;
}
.equip-slot.filled .slot-item-name {
color: var(--hp-accent-gold);
font-weight: 500;
}
/* --- ЗАМЕНИТЕ СТАРЫЕ СТИЛИ ЗАКЛИНАНИЙ В hp-game.css НА ЭТИ --- */
/* --- Spells Modal List Item Redesign v3 (Compact List) --- */
#spells-list-modal.modal-styled-list {
display: flex;
flex-direction: column;
gap: 0.5rem; /* Tighter spacing between items */
border: 1px solid var(--hp-border-modal);
border-radius: var(--radius-md);
background-color: rgba(0,0,0,0.1);
padding: 0.5rem;
}
#spells-list-modal li.spell-list-item-v3 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem; /* Space between main sections */
padding: 0.8rem 1rem;
background-color: var(--hp-bg-content);
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
#spells-list-modal li.spell-list-item-v3:hover {
background-color: var(--hp-bg-hover);
border-color: var(--hp-border-secondary);
}
.spell-info-v3 {
flex: 1 1 30%; /* Grow, shrink, base size */
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 150px;
}
.spell-info-v3 .spell-icon {
font-size: 1.3em;
color: var(--hp-accent-gold);
}
.spell-info-v3 .spell-name {
font-weight: 500;
color: var(--hp-text-primary);
}
.spell-progress-v3 {
flex: 1 1 40%;
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 120px;
}
.spell-progress-bar-container-v3 {
flex-grow: 1;
height: 8px;
background-color: var(--hp-bg-input);
border-radius: var(--radius-full);
overflow: hidden;
}
.spell-progress-bar-fill-v3 {
height: 100%;
background: linear-gradient(90deg, var(--hp-accent-blue), var(--hp-accent-magic));
border-radius: var(--radius-full);
transition: width var(--transition-smooth);
}
.spell-progress-text {
font-size: 0.8rem;
font-weight: 600;
color: var(--hp-text-secondary);
min-width: 60px; /* Reserve space for text like "100/100" */
}
.spell-stats-v3 {
flex: 1 1 30%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.25rem;
font-size: 0.85rem;
}
.spell-stat-v3 {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
white-space: nowrap;
}
.spell-stat-v3.accuracy {
color: var(--hp-accent-green);
}
.spell-stat-v3.risk {
color: var(--hp-accent-red);
}
/* --- ДОБАВЬТЕ В КОНЕЦ ФАЙЛА hp-game.css (И УДАЛИТЕ СТАРЫЕ СТИЛИ [data-tooltip]) --- */
/* --- Global JavaScript Tooltip --- */
.global-tooltip {
position: fixed; /* Важнейшее свойство! Позиционируется относительно окна браузера */
z-index: 9999; /* Всегда поверх всего */
background-color: var(--hp-bg-deep);
color: var(--hp-text-primary);
padding: 0.6rem 1rem;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-family: var(--font-ui);
white-space: pre-wrap; /* Позволяет переносить строки из data-tooltip (\n) */
border: 1px solid var(--hp-border-primary);
box-shadow: var(--shadow-lg);
max-width: 300px;
/* Скрыта по умолчанию */
opacity: 0;
visibility: hidden;
pointer-events: none; /* Не мешает кликать по элементам под ней */
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
will-change: transform, opacity; /* Оптимизация для браузера */
}
.global-tooltip.visible {
opacity: 1;
visibility: visible;
}
/* Стили для стрелочки (необязательно, но красиво) */
.global-tooltip::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
/* Позиция стрелки будет меняться JS */
}
.global-tooltip.arrow-bottom::after {
top: 100%;
border-top-color: var(--hp-bg-deep);
}
.global-tooltip.arrow-top::after {
bottom: 100%;
border-bottom-color: var(--hp-bg-deep);
}
/* --- ДОБАВЬТЕ В КОНЕЦ ФАЙЛА hp-game.css --- */
/* --- Стили для иконки чтения в инвентаре --- */
#inventory-list-modal .read-icon {
cursor: pointer;
margin-left: auto; /* Прижимает иконку к правому краю */
padding: 0 5px;
font-size: 1.2em;
transition: transform 0.2s ease;
}
#inventory-list-modal .read-icon:hover {
transform: scale(1.2);
}
.header-info-block.header-datetime {
visibility: hidden; /* Скрыто, но занимает место */
}
/* --- ДОБАВЬТЕ В КОНЕЦ ФАЙЛА hp-game.css --- */
/* --- Стили для нового интерфейса Зельеварения (v2) --- */
.brewing-interface-v2 {
display: grid;
grid-template-columns: 350px 1fr;
gap: 1.5rem;
height: 100%;
overflow: hidden;
}
.brewing-resources-panel {
border-right: 1px solid var(--hp-border-primary);
padding-right: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cauldron-selection-list li {
cursor: pointer;
}
.cauldron-selection-list li.selected {
background-color: var(--hp-bg-selected);
border-left-color: var(--hp-accent-gold);
}
.cauldron-capacity {
margin-left: auto;
font-size: 0.8em;
color: var(--hp-text-muted);
background: var(--hp-bg-input);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.brewing-process-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
}
.cauldron-area-v2 {
margin-bottom: 1rem;
}
.brewing-controls {
display: flex;
justify-content: space-around;
width: 100%;
background: rgba(0,0,0,0.1);
padding: 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--hp-border-secondary);
margin-bottom: 1.5rem;
}
.control-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.control-group label {
font-size: 0.8rem;
text-transform: uppercase;
color: var(--hp-text-secondary);
}
.timer-display, .stirs-display {
font-size: 2rem;
font-weight: 600;
font-family: var(--font-mono);
color: var(--hp-accent-gold);
}
.brewing-actions-v2 {
display: flex;
gap: 1rem;
width: 100%;
justify-content: center;
margin-top: auto; /* Прижимает кнопки к низу */
}
#inventory-list-modal li {
gap: 12px; /* Увеличим зазор для изображения */
}
.inventory-item-image {
width: 42px;
height: 42px;
flex-shrink: 0;
background-color: var(--hp-bg-input);
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--hp-border-primary);
display: flex;
align-items: center;
justify-content: center;
}
.inventory-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.9;
}
#inventory-list-modal li:hover .inventory-item-image img {
transform: scale(1.15);
opacity: 1;
}
.inventory-item-details {
display: flex;
align-items: center;
flex-grow: 1;
min-width: 0; /* Важно для корректного переноса текста */
}
.inventory-item-details .item-display-name {
flex-grow: 1;
}
/* --- Стили для изображений питомцев --- */
.pet-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--transition-smooth);
}
/* Главный контейнер макета */
/* --- СУПЕР-ФИНАЛЬНЫЙ ДИЗАЙН v2 для Личного Дела (со скроллом статуса) --- */
/* Главный контейнер макета теперь использует Grid для идеального выравнивания */
.char-info-layout {
display: grid;
grid-template-columns: 240px 1fr; /* Фиксированная колонка для портрета, остальное для данных */
gap: 24px;
align-items: stretch; /* Заставляет обе колонки растягиваться на одну высоту */
}
/* --- Левая и Правая колонки теперь ведут себя как flex-контейнеры для внутреннего контента --- */
.portrait-column,
.details-column {
background-color: rgba(0,0,0,0.1);
border: 1px solid var(--hp-border-modal);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column; /* Весь контент внутри колонок будет идти сверху вниз */
}
/* --- Левая колонка (портрет и описание) --- */
.character-portrait-wrapper {
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid var(--hp-border-secondary);
background-color: var(--hp-bg-deep);
box-shadow: var(--shadow-md);
margin-bottom: 16px;
flex-shrink: 0;
}
.character-portrait-wrapper img {
width: 100%;
height: auto;
display: block;
}
.appearance-text {
font-size: 0.9em;
color: var(--hp-text-secondary);
font-style: normal;
text-align: left;
line-height: 1.6;
flex-grow: 1;
overflow-y: auto;
max-height: 250px;
padding-right: 8px;
margin-right: -8px;
}
/* --- Правая колонка (данные) --- */
.details-column {
padding: 16px 20px;
}
.details-column h4 {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hp-text-secondary);
margin: 0 0 1rem 0;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--hp-border-secondary);
flex-shrink: 0;
}
.details-list-modal {
border: none;
background: none;
padding: 0;
flex-grow: 1;
}
.details-list-modal > li {
display: grid;
grid-template-columns: 130px 1fr;
align-items: baseline; /* было baseline, меняем на stretch для выравнивания */
gap: 16px;
padding: 0.8rem 0;
border-bottom: 1px solid var(--hp-border-modal);
}
.details-list-modal > li:last-child {
border-bottom: none;
}
.details-list-modal .detail-label {
text-align: right;
color: var(--hp-text-secondary);
font-weight: 400;
white-space: nowrap;
padding-top: 2px; /* Небольшой отступ сверху для лучшего выравнивания с текстом */
}
.details-list-modal .detail-value {
font-weight: 500;
color: var(--hp-text-primary);
word-break: break-word; /* Позволяет переносить длинные слова, если нужно */
}
/* *** НАЧАЛО ИЗМЕНЕНИЙ: Стили для скролла в ячейке статуса *** */
#info-status.detail-value {
max-height: 100px; /* Ограничиваем максимальную высоту блока статуса */
overflow-y: auto; /* Добавляем вертикальный скролл, если текст не помещается */
padding-right: 8px; /* Добавляем место для скроллбара */
align-self: start; /* Выравниваем сам блок по верху ячейки грида */
}
/* *** КОНЕЦ ИЗМЕНЕНИЙ *** */
#info-genetics-list {
padding-top: 4px;
}
#info-genetics-list li {
display: block;
border: none;
padding: 4px 0;
font-weight: 500;
}
#info-genetics-list .positive-trait { color: var(--hp-accent-green); }
#info-genetics-list .negative-trait { color: var(--hp-accent-orange); }
#info-genetics-list .positive-trait::before {
content: '+';
margin-right: 8px;
font-weight: 700;
}
#info-genetics-list .negative-trait::before {
content: '−';
margin-right: 8px;
font-weight: 700;
}
/* --- Адаптивность для маленьких экранов --- */
@media (max-width: 768px) {
.char-info-layout {
grid-template-columns: 1fr; /* Одна колонка на мобильных */
}
.portrait-column {
align-items: center;
}
.character-portrait-wrapper {
max-width: 250px;
}
.appearance-text {
text-align: center;
max-height: none;
overflow-y: visible;
}
/* Убираем скролл статуса на мобильных, пусть текст просто расширяется */
#info-status.detail-value {
max-height: none;
overflow-y: visible;
}
}
/* --- Исправление для скролла в Книге Заклинаний --- */
/* Контейнер, в котором находится список заклинаний */
.modal-body.spells-details {
/* Это важно: говорим контейнеру, чтобы он занимал все доступное
вертикальное пространство в модальном окне. */
flex-grow: 1;
display: flex; /* Используем flexbox для управления вложенными элементами */
flex-direction: column; /* Элементы внутри будут идти сверху вниз */
overflow: hidden; /* Скрываем все, что может "вылезти" за пределы */
}
/* Сам список заклинаний (
) */
#spells-list-modal {
/* Говорим списку, чтобы он растягивался и занимал все доступное место,
оставленное после заголовков и текста помощи. */
flex-grow: 1;
overflow-y: auto; /* ВОЛШЕБНОЕ СВОЙСТВО: включает вертикальный скролл, если контент не помещается */
padding-right: 10px; /* Добавляем небольшой отступ справа, чтобы текст не прилипал к скроллбару */
}
/* Текст помощи внизу */
.spells-details .modal-help-text {
flex-shrink: 0; /* Запрещаем тексту помощи сжиматься */
margin-top: auto; /* Прижимает текст помощи к низу контейнера */
padding-top: 1rem; /* Добавляем отступ сверху для красоты */
}
/* --- СУПЕР-ФИНАЛЬНЫЙ ДИЗАЙН для Личного Дела (с выравниванием высоты) --- */
/* Главный контейнер макета теперь использует Grid для идеального выравнивания */
.char-info-layout {
display: grid;
grid-template-columns: 240px 1fr; /* Фиксированная колонка для портрета, остальное для данных */
gap: 24px;
align-items: stretch; /* Заставляет обе колонки растягиваться на одну высоту */
}
/* --- Левая и Правая колонки теперь ведут себя как flex-контейнеры для внутреннего контента --- */
.portrait-column,
.details-column {
background-color: rgba(0,0,0,0.1);
border: 1px solid var(--hp-border-modal);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column; /* Весь контент внутри колонок будет идти сверху вниз */
}
/* --- Левая колонка (портрет и описание) --- */
.character-portrait-wrapper {
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid var(--hp-border-secondary);
background-color: var(--hp-bg-deep);
box-shadow: var(--shadow-md);
margin-bottom: 16px;
flex-shrink: 0; /* Портрет не должен сжиматься */
}
.character-portrait-wrapper img {
width: 100%;
height: auto;
display: block;
}
/* Описание внешности теперь имеет ограничение по высоте и свою прокрутку */
.appearance-text {
font-size: 0.9em;
color: var(--hp-text-secondary);
font-style: normal;
text-align: left;
line-height: 1.6;
flex-grow: 1; /* Позволяет блоку растянуться, если есть место */
overflow-y: auto; /* Добавляет скролл, если текст не помещается */
max-height: 250px; /* Максимальная высота блока с описанием */
padding-right: 8px; /* Место для скроллбара */
margin-right: -8px; /* Компенсация, чтобы текст не смещался */
}
/* --- Правая колонка (данные) --- */
.details-column {
padding: 16px 20px;
}
.details-column h4 {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hp-text-secondary);
margin: 0 0 1rem 0;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--hp-border-secondary);
flex-shrink: 0; /* Заголовок не должен сжиматься */
}
.details-list-modal {
border: none;
background: none;
padding: 0;
flex-grow: 1; /* Список займет все оставшееся место в колонке */
}
.details-list-modal > li {
display: grid;
grid-template-columns: 130px 1fr;
align-items: baseline;
gap: 16px;
padding: 0.8rem 0;
border-bottom: 1px solid var(--hp-border-modal);
}
.details-list-modal > li:last-child {
border-bottom: none;
}
.details-list-modal .detail-label {
text-align: right;
color: var(--hp-text-secondary);
font-weight: 400;
white-space: nowrap;
}
.details-list-modal .detail-value {
font-weight: 500;
color: var(--hp-text-primary);
}
#info-genetics-list {
padding-top: 4px;
}
#info-genetics-list li {
display: block;
border: none;
padding: 4px 0;
font-weight: 500;
}
#info-genetics-list .positive-trait { color: var(--hp-accent-green); }
#info-genetics-list .negative-trait { color: var(--hp-accent-orange); }
#info-genetics-list .positive-trait::before {
content: '+';
margin-right: 8px;
font-weight: 700;
}
#info-genetics-list .negative-trait::before {
content: '−';
margin-right: 8px;
font-weight: 700;
}
/* --- Адаптивность для маленьких экранов --- */
@media (max-width: 768px) {
.char-info-layout {
grid-template-columns: 1fr; /* Одна колонка на мобильных */
}
.portrait-column {
align-items: center; /* Центрируем портрет и текст */
}
.character-portrait-wrapper {
max-width: 250px;
}
.appearance-text {
text-align: center;
max-height: none; /* Убираем ограничение по высоте на мобильных */
overflow-y: visible; /* Убираем скролл */
}
}
/* --- Стили для Мастерской Волшебной Палочки --- */
.wand-workshop-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
height: 100%;
}
.wand-display-panel, .wand-components-panel {
display: flex;
flex-direction: column;
gap: 1rem;
}
.wand-base-description {
padding: 1rem;
background-color: rgba(0,0,0,0.15);
border: 1px solid var(--hp-border-modal);
border-radius: var(--radius-md);
font-style: italic;
color: var(--hp-text-secondary);
text-align: center;
}
.wand-slots-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
.wand-slot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 1rem;
background-color: var(--hp-bg-input);
border: 1px solid var(--hp-border-primary);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.wand-slot:hover, .wand-slot.active {
background-color: var(--hp-bg-hover);
border-color: var(--hp-accent-blue);
}
.wand-slot-label {
font-weight: 500;
color: var(--hp-text-secondary);
}
.wand-slot-value {
font-weight: 600;
color: var(--hp-accent-gold);
}
.wand-slot-value.empty {
color: var(--hp-text-muted);
font-style: italic;
}
#wand-components-list {
flex-grow: 1;
overflow-y: auto;
}
#wand-action-buttons {
margin-top: auto; /* Прижимает кнопку к низу */
}
/* --- Hidden/Obscured Text Styling --- */
.obscured-text {
text-decoration: line-through;
color: var(--hp-text-muted);
cursor: help;
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.obscured-text:hover {
color: var(--hp-text-secondary);
text-decoration-color: var(--hp-accent-red);
}
/* --- Стили для статусов отношений в "Личном Деле" --- */
#char-info-relationships-list .rel-status {
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: 0.85em;
border: 1px solid transparent;
}
#char-info-relationships-list .rel-ally {
color: var(--hp-accent-green);
background-color: rgba(104, 211, 145, 0.1);
border-color: rgba(104, 211, 145, 0.3);
}
#char-info-relationships-list .rel-friend {
color: var(--hp-accent-blue);
background-color: rgba(108, 180, 255, 0.1);
border-color: rgba(108, 180, 255, 0.3);
}
#char-info-relationships-list .rel-acquaintance {
color: var(--hp-text-primary);
}
#char-info-relationships-list .rel-neutral {
color: var(--hp-text-secondary);
}
#char-info-relationships-list .rel-dislike {
color: var(--hp-accent-orange);
background-color: rgba(246, 173, 85, 0.1);
border-color: rgba(246, 173, 85, 0.3);
}
#char-info-relationships-list .rel-enemy {
color: var(--hp-accent-red);
background-color: rgba(240, 112, 105, 0.1);
border-color: rgba(240, 112, 105, 0.3);
}