/*📁НАЧАЛО ФАЙЛА riverbank.css*/
:root {
    /* Цвета */
    --background-color: black;
    --text-color: white;
    --secondary-color: #555;
    --deck-card-border-color: #888;
    --box-shadow-color: rgba(0, 0, 0, 0.7);
    --time-banner-bg-color: rgba(0, 0, 0, 0.7);
    --news-banner-bg-color: rgba(50, 50, 50, 0.8);
    --news-banner-text-color: lightgreen;
    --news-important-text-color: #ffdd77; /* Желтоватый для важных новостей */
    --game-log-bg-color: rgba(0, 0, 0, 0.75);
    --card-border-color: rgba(150, 150, 150, 0.6);
    --card-overlay-padding: 10px;
    --card-header-bg: rgba(0, 0, 0, 0.65);
    --progress-bar-bg: rgba(85, 85, 85, 0.8);
    --progress-bar-fill: #60a960;
    --stats-overlay-bg: rgba(0, 0, 0, 0.55);
    --microlog-overlay-bg: rgba(0, 0, 0, 0.7);
    --location-name-bg: rgba(0, 0, 0, 0.7);
    --card-border-radius: 8px;
    --final-stats-highlight-color: silver;

    /* Карты мира */
    --map-region-bg-color: rgba(255, 255, 0, 0.15);
    --map-region-border-color: rgba(255, 255, 0, 0.7);
    --active-region-highlight-bg: rgba(144, 238, 144, 0.7);
    --active-region-highlight-border: rgba(50, 205, 50, 0.9);
    --active-region-opacity: 1.0;
    --inactive-region-bg-color: rgba(128, 128, 128, 0.25);
    --inactive-region-border-color: rgba(128, 128, 128, 0.5);
    --inactive-region-opacity: 0.15;
    --hero-label-color: white; /* Переопределено ниже для теста */
    --hero-label-bg: rgba(0, 0, 0, 0.85); /* Переопределено ниже для теста */
    --hero-label-shadow: 1px 1px 1px black; /* Переопределено ниже для теста */
    --hero-label-font-size: 9px; /* Переопределено ниже для теста */
    --map-arrow-color: rgba(255, 255, 255, 0.8);
    --map-arrow-font-size: 12px;
    --map-arrow-font-weight: bold;
    --map-arrow-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);

    /* Маркер путешествия */
    --travel-marker-size: 8px;
    --travel-marker-color: red;
    --travel-marker-border-color: white;
    --travel-marker-shadow-color: rgba(255, 0, 0, 0.7);
    --travel-marker-transition-speed: 0.9s;
    --travel-marker-opacity-transition: opacity 0.3s ease;

    /* Карта погоды */
    --weather-icon-size: 35px;
    --weather-description-color: #e0e0e0;
    --weather-card-bg-default: rgba(100, 100, 100, 0.1);
    --weather-card-bg-clear: rgba(135, 206, 250, 0.2);
    --weather-card-bg-rain: rgba(70, 130, 180, 0.3);
    --weather-card-bg-fog: rgba(119, 136, 153, 0.4);
    --weather-card-bg-windy: rgba(211, 211, 211, 0.2);
    --weather-card-bg-sandstorm: rgba(210, 180, 140, 0.3);
    --weather-card-bg-strange_fog: rgba(221, 160, 221, 0.3);
    --weather-card-bg-meteor_shower: rgba(255, 100, 0, 0.2);
    --weather-card-bg-acid_rain: rgba(153, 204, 153, 0.3);
    --weather-card-bg-ice_rain: rgba(176, 224, 230, 0.3);
    --weather-card-bg-blizzard: rgba(240, 248, 255, 0.4);
    --weather-card-bg-tornado: rgba(105, 105, 105, 0.3);
    --weather-interaction-overlay-bg: rgba(0, 255, 0, 0.25);
    --weather-interaction-overlay-transition: opacity 0.3s ease;

    /* Карта предмета */
    --item-image-max-height: 60%;
    --item-description-color: #cccccc;
    --item-card-default-bg: url('../images/backgrounds/card_back.jpg');
    --card-flip-duration: 0.6s;

    /* Карты Нижнего Ряда */
    --terrain-card-bg-default: rgba(139, 69, 19, 0.15);

    /* Карта Замка */
    --castle-card-bg: rgba(70, 70, 80, 0.2);
    --supply-text-color: #ddd;
    --supply-high-color: #90ee90;
    --supply-medium-color: #ffd700;
    --supply-low-color: #ffa500;
    --supply-critical-color: #ff6347;
    --currency-color: #EEDC82;

    /* Микролог и Статы */
    --info-font-size: 0.8em;
    --info-color: var(--text-color);
    --info-font-style: normal;
    --info-font-weight: normal;
    --microlog-line-height: 1.3;
    --info-padding: 8px;

    /* Анимации */
    --animation-duration: 0.4s;
    --card-fly-away-duration: 0.7s;
    --scroll-duration: 15s; /* Установлено фиксированное значение для теста */

    /* Размеры и отступы */
    --main-padding: 10px;
    --card-gap: 10px;
    --content-gap: 12px;
    --log-header-height: 28px;
    --side-log-width: 240px;
}

/* Общие стили */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100vh;
    background-image: url('../images/backgrounds/riverbank_background.jpg');
    background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed;
    margin: 0; position: relative; overflow: hidden; box-sizing: border-box; display: flex;
}
.layout-container { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 1; padding: 0 var(--main-padding) var(--main-padding) var(--main-padding); box-sizing: border-box; }
.layout-header { flex-shrink: 0; position: relative; z-index: 30; padding: 5px 10px; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; width: calc(100% + 2 * var(--main-padding)); margin: 0 calc(-1 * var(--main-padding)); min-height: auto; }
#time-display { font-size: 12px; color: var(--text-color); display: block; background-color: var(--time-banner-bg-color); padding: 4px 8px; border-radius: 5px; text-shadow: 1px 1px 2px black; white-space: nowrap; flex-shrink: 0; }
#news-banner-wrapper { flex-shrink: 0; width: calc(100% + 2 * var(--main-padding)); margin: 8px calc(-1 * var(--main-padding)) 0 calc(-1 * var(--main-padding)); position: relative; z-index: 25; background-color: var(--news-banner-bg-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: block; }
#news-banner-container { width: 100%; max-width: 100%; overflow: hidden; color: var(--news-banner-text-color); padding: 5px 0; white-space: nowrap; display: block; box-sizing: border-box; visibility: visible; opacity: 1; }

/* --- НОВЫЕ УПРОЩЕННЫЕ СТИЛИ НОВОСТЕЙ --- */
@keyframes scrollText {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}
#news-banner {
    display: inline-block;
    transform: none;
    animation: none;
    white-space: normal;
    padding-left: 0;
    color: var(--news-banner-text-color);
    transition: color 0.3s ease;
}
#news-banner.scrolling-news-simple { /* Используем новый класс */
    /* transform: translateX(100%); НЕ НУЖЕН, задается в @keyframes */
    animation-name: scrollText;
    animation-duration: var(--scroll-duration, 15s); /* Используем переменную */
    animation-timing-function: linear;
    animation-iteration-count: 1; /* Один раз */
    animation-fill-mode: forwards; /* Остается слева */
    will-change: transform;
    white-space: nowrap;
    padding-left: 0;
}
#news-banner.news-important {
    color: var(--news-important-text-color);
    font-weight: bold;
}
/* --- КОНЕЦ НОВЫХ СТИЛЕЙ НОВОСТЕЙ --- */

/* Основная область контента */
#main-content-area { flex-grow: 1; display: flex; flex-direction: column; gap: var(--content-gap); margin-top: var(--content-gap); overflow: hidden; min-height: 0; }
#center-cards-row { flex-grow: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; gap: var(--card-gap); padding: var(--card-gap) 0; overflow-y: auto; overflow-x: hidden; min-height: 0; box-sizing: border-box; }

/* Общий стиль карт */
.center-card {
    position: relative; border: 1px solid var(--card-border-color); border-radius: var(--card-border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden; background-color: #222;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; flex-direction: column;
    transition: all var(--animation-duration) ease;
    min-width: 0; min-height: 0; box-sizing: border-box;
    flex-basis: calc(50% - var(--card-gap)); max-width: calc(50% - var(--card-gap));
    height: auto; aspect-ratio: 9 / 15; max-height: 40vh;
    width: auto; transform-style: preserve-3d; perspective: 1000px;
    visibility: visible; opacity: 1;
}
.card-overlay-content { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 2; box-sizing: border-box; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); }
.card-header { background-color: var(--card-header-bg); color: var(--text-color); font-weight: bold; padding: 4px var(--card-overlay-padding); text-align: center; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85em; margin: 0; z-index: 12; box-sizing: border-box; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }

/* Стили лога */
#game-log { flex-shrink: 0; height: 25vh; width: 100%; background-color: var(--game-log-bg-color); border-radius: var(--card-border-radius); box-shadow: 0 -2px 5px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; padding: 0; border: 1px solid var(--card-border-color); }
#game-log .card-header { flex-shrink: 0; height: var(--log-header-height); line-height: calc(var(--log-header-height) - 10px); box-sizing: border-box; padding: 5px; }
#log-text-wrapper { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px; scrollbar-width: thin; scrollbar-color: var(--secondary-color) transparent; }
#log-text-wrapper::-webkit-scrollbar { width: 5px; }
#log-text-wrapper::-webkit-scrollbar-track { background: transparent; }
#log-text-wrapper::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 2px; }
#log-text { display: flex; flex-direction: column; font-size: var(--info-font-size); color: var(--info-color); font-style: var(--info-font-style); font-weight: var(--info-font-weight); }
#log-text div { margin-bottom: 3px; opacity: 0.9; transition: opacity 0.5s ease; word-break: break-word; line-height: var(--microlog-line-height); }

/* --- Стили для Конкретных Карт --- */

/* Карта Замка */
#castle-card { background-color: var(--castle-card-bg); background-image: url('../images/cards/castle_bg.jpg'); }
#castle-card .castle-stats-overlay { background-color: var(--stats-overlay-bg); padding: var(--info-padding); margin: auto var(--card-overlay-padding) var(--card-overlay-padding) var(--card-overlay-padding); border-radius: 6px; font-size: var(--info-font-size); line-height: var(--microlog-line-height); flex-shrink: 0; color: var(--info-color); font-style: var(--info-font-style); font-weight: var(--info-font-weight); margin-top: auto; width: calc(100% - 2 * var(--card-overlay-padding)); box-sizing: border-box; z-index: 10; }
#castle-card .castle-stats-overlay div { margin-bottom: 3px; display: flex; justify-content: space-between; align-items: center; }
#castle-card .castle-stats-overlay .label { opacity: 0.8; margin-right: 5px; white-space: nowrap; color: var(--supply-text-color); }
#castle-card .castle-stats-overlay .value { font-weight: bold; text-align: right; font-style: normal; }
#castle-card .level-high .value { color: var(--supply-high-color); }
#castle-card .level-medium .value { color: var(--supply-medium-color); }
#castle-card .level-low .value { color: var(--supply-low-color); }
#castle-card .level-critical .value { color: var(--supply-critical-color); font-weight: bold; }
#castle-card .level-unknown .value { color: #aaa; font-style: italic; }

/* Карта Разведчика */
#placeholder-card-1.placeholder-style { background-image: none; background-color: #282828; }
#placeholder-card-1 .scout-info-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: var(--info-padding); font-size: var(--info-font-size); line-height: var(--microlog-line-height); color: var(--info-color); }
#placeholder-card-1 .scout-info-content.placeholder-content { justify-content: center; align-items: center; text-align: center; color: #bbb; }
#placeholder-card-1 .scout-detail { display: flex; justify-content: space-between; margin-bottom: 2px; }
#placeholder-card-1 .scout-detail span:first-child { opacity: 0.8; margin-right: 5px; }
#placeholder-card-1 .scout-detail span:last-child { font-weight: bold; text-align: right; }
#placeholder-card-1 .status-on_mission { color: orange; }
#placeholder-card-1 .status-resting { color: lightblue; }

/* Карты-заглушки */
#placeholder-card-2, #placeholder-card-3 { background-image: var(--item-card-default-bg); background-size: cover; }
#placeholder-card-2 .card-overlay-content, #placeholder-card-3 .card-overlay-content { background: none; background-color: rgba(51, 51, 51, 0.7); }
#placeholder-card-2 .placeholder-content, #placeholder-card-3 .placeholder-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; text-align: center; color: #bbb; font-size: var(--info-font-size); }

/* --- Карта Мира --- */
#mini-map-card { background-image: url('../images/map/world_map.jpg'); }
#mini-map-card .map-content-wrapper { flex-grow: 1; position: relative; overflow: hidden; }
#mini-map-card .map-content-wrapper #mini-map-regions-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; /* Чтобы не мешать метке героя */ }
#mini-map-card .map-direction-arrow { position: absolute; color: var(--map-arrow-color); font-size: var(--map-arrow-font-size); font-weight: var(--map-arrow-font-weight); text-shadow: var(--map-arrow-shadow); z-index: 20; pointer-events: none; }
.arrow-north { top: 3px; left: 50%; transform: translateX(-50%); } .arrow-west { left: 3px; top: 50%; transform: translateY(-50%); } .arrow-east { right: 3px; top: 50%; transform: translateY(-50%); } .arrow-south { bottom: 3px; left: 50%; transform: translateX(-50%); }
#mini-map-regions-container .map-region { position: absolute; box-sizing: border-box; cursor: default; transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; background-clip: padding-box; border-radius: 3px; pointer-events: none; z-index: 6; background-color: var(--inactive-region-bg-color); border: 1px solid var(--inactive-region-border-color); opacity: var(--inactive-region-opacity); }
/* Позиции регионов */
#mini-map-regions-container .map-region#region-wasteland { top: 12%; left: 15%; width: 20%; height: 18%; } #mini-map-regions-container .map-region#region-riverbank { top: 85%; left: 45%; width: 30%; height: 12%; } #mini-map-regions-container .map-region#region-big-castle { top: 65%; left: 8%; width: 18%; height: 22%; } #mini-map-regions-container .map-region#region-small-castle { top: 55%; left: 70%; width: 15%; height: 18%; } #mini-map-regions-container .map-region#region-nearby-town { top: 65%; left: 78%; width: 12%; height: 12%; } #mini-map-regions-container .map-region#region-forest-heart { top: 40%; left: 35%; width: 25%; height: 25%; } #mini-map-regions-container .map-region#region-mountain-pass { top: 8%; left: 40%; width: 20%; height: 10%; } #mini-map-regions-container .map-region#region-northern-ruins { top: 15%; left: 60%; width: 15%; height: 12%; } #mini-map-regions-container .map-region#region-swamp-edge { top: 75%; left: 60%; width: 20%; height: 15%; }
.map-region.active-region { background-color: var(--active-region-highlight-bg); border: 2px solid var(--active-region-highlight-border); opacity: var(--active-region-opacity); z-index: 10; }

/* --- ВРЕМЕННЫЕ ОТЛАДОЧНЫЕ СТИЛИ ДЛЯ МЕТКИ ГЕРОЯ --- */
/* Эти стили будут ПЕРЕОПРЕДЕЛЕНЫ инлайн-стилями из JS, но зададим их и здесь */
#mini-map-regions-container .hero-location-label {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: magenta !important; /* Яркий цвет для теста */
    color: black !important;
    padding: 3px 6px !important;
    border-radius: 50% !important; /* Круглая форма */
    font-size: 12px !important;    /* Крупнее */
    font-weight: bold !important;
    white-space: nowrap !important;
    z-index: 150 !important;       /* Максимальный z-index */
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important; /* Центрируем */
    transition: none !important;
    border: 2px solid lime !important; /* Ярко-зеленая рамка */
    /* Начальная позиция (будет переопределена JS) */
    top: 50%;
    left: 50%;
}
/* --- КОНЕЦ ОТЛАДОЧНЫХ СТИЛЕЙ МЕТКИ --- */

#mini-map-card .mini-map-location { padding: 5px var(--card-overlay-padding); text-align: center; flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85em; background-color: var(--location-name-bg); border-radius: 0 0 var(--card-border-radius) var(--card-border-radius); z-index: 12; box-sizing: border-box; width: 100%; position: relative; color: var(--info-color); }
#mini-map-location-name { font-weight: bold; } #map-location-label { color: #ccc; }
#mini-map-regions-container .travel-marker { position: absolute; width: var(--travel-marker-size); height: var(--travel-marker-size); background-color: var(--travel-marker-color); border: 1px solid var(--travel-marker-border-color); border-radius: 50%; z-index: 15; pointer-events: none; display: none; opacity: 0; visibility: hidden; box-shadow: 0 0 4px 1px var(--travel-marker-shadow-color); transform: translate(-50%, -50%); will-change: top, left, opacity; transition: top var(--travel-marker-transition-speed) linear, left var(--travel-marker-transition-speed) linear, var(--travel-marker-opacity-transition), visibility 0s linear 0.3s; }

/* Карта Героя (Низ) */
#hero-card .hero-stats-overlay { background-color: var(--stats-overlay-bg); padding: var(--info-padding); margin: auto var(--card-overlay-padding) var(--card-overlay-padding) var(--card-overlay-padding); border-radius: 6px; font-size: var(--info-font-size); line-height: var(--microlog-line-height); flex-shrink: 0; margin-top: auto; width: calc(100% - 2 * var(--card-overlay-padding)); box-sizing: border-box; z-index: 10; color: var(--info-color); font-style: var(--info-font-style); font-weight: var(--info-font-weight); }
#hero-card .hero-stats-overlay div { margin-bottom: 2px; display: flex; justify-content: space-between; }
#hero-card .hero-stats-overlay span:first-child { color: #ccc; margin-right: 5px; white-space: nowrap;}
.status-text { transition: color 0.3s ease; text-align: right; font-weight: bold; font-style: normal; }
.status-sleeping { font-style: italic; }
/* Стили статусов */
.status-default, .status-idle, .status-busy { color: #ccc; } .status-traveling { color: #aaa; } .status-sleeping { color: lightblue; } .status-fishing { color: #6495ED; } .status-hunting { color: #CD853F; } .status-restinghome { color: #90EE90; } .status-atfire { color: #FF8C00; } .status-gatheringwood { color: #8B4513; } .status-scouting { color: #BDB76B; } .status-crafting { color: #DEB887; } .status-repairing { color: #BC8F8F; } .status-sharpening { color: #A9A9A9; } .status-searchingwater { color: #ADD8E6; } .status-observing { color: #778899; } .status-practicing { color: #B0C4DE; } .status-meditating { color: #E6E6FA; } .status-journaling { color: #FAFAD2; } .status-cleaning { color: #F5F5DC; } .status-chasing { color: #DC143C; } .status-fighting { color: #FF4500; } .status-intimidating { color: #DAA520; } .status-looting { color: #B8860B; } .status-imprisoned { color: #808080; font-style: italic; }
.condition-text { transition: color 0.3s ease, font-weight 0.3s ease; text-align: right; font-style: normal; }
/* Стили состояния */
.condition-normal { color: #ccc; } .condition-tired { color: orange; } .condition-energized { color: lightgreen; font-weight: bold; } .condition-hungry, .condition-thirsty { color: #ffcc66; } .condition-cold { color: cyan; } .condition-injured { color: red; font-weight: bold; } .condition-sick { color: mediumpurple; } .condition-notorietyLow { color: #90EE90; } .condition-notorietyMedium { color: #FFD700; } .condition-notorietyHigh { color: #FFA500; } .condition-notorietyWanted { color: #FF0000; font-weight: bold;}
.health-text { transition: color 0.3s ease; font-weight: bold; text-align: right; font-style: normal; }
.health-high { color: lightgreen; } .health-medium { color: orange; } .health-low { color: red; }
.currency-value { color: var(--currency-color); font-weight: bold; }

/* Активная карта (Низ) */
#active-card { opacity: 0; transform: scale(0.95); transition: transform var(--animation-duration, 0.4s) ease-out, opacity var(--animation-duration, 0.4s) ease-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, visibility 0s linear var(--animation-duration, 0.4s); margin: 0; display: flex; visibility: hidden; pointer-events: none; transform-origin: center center; will-change: transform, opacity; position: relative; z-index: 15; background-size: cover; }
#active-card.card-visible { transform: scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
#active-card.card-hidden { transform: scale(0.95); opacity: 0; pointer-events: none; visibility: hidden; }
#active-card.animating-to-deck { transform: translate(var(--deck-target-x, -100px), var(--deck-target-y, -100px)) scale(var(--deck-target-scale, 0.1)) rotate(var(--deck-target-rotate, -5deg)); opacity: 0; visibility: visible; transition: transform var(--card-fly-away-duration, 0.7s) ease-in-out, opacity var(--card-fly-away-duration, 0.7s) ease-in-out; z-index: 101; }
#active-card.showing-final-stats-highlight { box-shadow: 0 0 12px 4px var(--final-stats-highlight-color), 0 5px 20px rgba(0, 0, 0, 0.6); border-color: var(--final-stats-highlight-color); }
#active-card .active-card-content { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; z-index: 2; box-sizing: border-box; background: none; }
#active-card .active-card-text { font-size: 1em; }
#active-card .active-card-progress { width: calc(100% - var(--card-overlay-padding) * 2); margin: 6px var(--card-overlay-padding); height: 6px; appearance: none; border: none; border-radius: 3px; overflow: hidden; background-color: var(--progress-bar-bg); flex-shrink: 0; display: block; }
#active-card .active-card-progress::-webkit-progress-bar { background-color: var(--progress-bar-bg); border-radius: 3px; } #active-card .active-card-progress::-webkit-progress-value { background-color: var(--progress-bar-fill); border-radius: 3px; transition: width 0.3s linear; } #active-card .active-card-progress::-moz-progress-bar { background-color: var(--progress-bar-fill); border-radius: 3px; transition: width 0.3s linear; }
#active-card .active-card-stats { font-size: var(--info-font-size); color: var(--info-color); font-style: var(--info-font-style); font-weight: var(--info-font-weight); text-align: left; margin: 0 var(--card-overlay-padding) 6px var(--card-overlay-padding); flex-shrink: 0; line-height: var(--microlog-line-height); padding: var(--info-padding); border: none; overflow: hidden; background-color: var(--stats-overlay-bg); border-radius: 6px; display: block; z-index: 10; }
#active-card .active-card-stats div { margin-bottom: 2px; }
#active-card.showing-final-stats-highlight .active-card-stats { font-weight: bold; font-size: 0.9em; background-color: rgba(0,0,0,0.65); text-align: center; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
#active-card.showing-final-stats-highlight .active-card-progress { display: none !important; }
#active-card .active-card-microlog-container { min-height: calc(var(--microlog-line-height) * 3 * var(--info-font-size) + 2 * var(--info-padding)); max-height: 28%; overflow-y: auto; background-color: var(--microlog-overlay-bg); border-radius: 6px; padding: var(--info-padding); margin: auto var(--card-overlay-padding) var(--card-overlay-padding) var(--card-overlay-padding); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--info-color); scrollbar-width: none; line-height: var(--microlog-line-height); flex-shrink: 0; display: block; margin-top: auto; z-index: 10; }
#active-card .active-card-microlog-container::-webkit-scrollbar { display: none; } #active-card .active-card-microlog { font-size: var(--info-font-size); font-style: var(--info-font-style); font-weight: var(--info-font-weight); }
#active-card.showing-final-stats-highlight .active-card-microlog-container { display: none !important; }

/* Карта Предмета (Низ) */
#item-result-card { transform-style: preserve-3d; perspective: 1000px; transition: transform var(--card-flip-duration) ease; position: relative; background-color: transparent; border: none; }
.item-card-front, .item-card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; border-radius: var(--card-border-radius); display: flex; flex-direction: column; box-sizing: border-box; transition: opacity var(--card-flip-duration) ease; border: 1px solid var(--card-border-color); }
.item-card-back { background-image: var(--item-card-default-bg); background-size: cover; background-position: center; z-index: 2; transform: rotateY(0deg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.item-card-front { display: flex; flex-direction: column; background-color: rgba(60, 60, 60, 0.8); transform: rotateY(180deg); z-index: 1; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, rgba(60,60,60,0.7) 0%, rgba(60,60,60,0.9) 100%), rgba(60, 60, 60, 0.8); }
#item-result-card.item-card-flipped .item-card-back { transform: rotateY(180deg); z-index: 1; } #item-result-card.item-card-flipped .item-card-front { transform: rotateY(0deg); z-index: 2; }
#item-result-card .item-card-front .card-header { z-index: 12; position: relative; flex-shrink: 0; }
#item-result-card .item-card-front .item-result-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--card-overlay-padding); overflow: hidden; position: relative; z-index: 10; min-height: 0; }
#item-result-card #item-result-image { display: block; object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: var(--item-image-max-height); margin-bottom: 5px; opacity: 1; }
#item-result-card #item-result-text { display: block; font-size: var(--info-font-size); color: var(--item-description-color); font-style: var(--info-font-style); font-weight: var(--info-font-weight); text-align: center; margin-top: auto; opacity: 1; z-index: 11; position: relative; background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 3px; }

/* Карта Местности (Низ) */
#terrain-card { background-color: var(--terrain-card-bg-default); }
#terrain-card .terrain-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: var(--card-overlay-padding); position: relative; z-index: 10; }
#terrain-card #terrain-type-text { font-size: 1em; font-weight: bold; color: var(--info-color); font-style: var(--info-font-style); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); text-align: center; position: relative; z-index: 11; background: rgba(0,0,0,0.4); padding: 3px 6px; border-radius: 3px; }

/* Карта Погоды (Низ) */
#weather-card { background-color: var(--weather-card-bg-default); transition: background-color 0.5s ease; position: relative; cursor: default; }
#weather-card .interaction-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--weather-interaction-overlay-bg); opacity: 0; border-radius: var(--card-border-radius); pointer-events: none; transition: var(--weather-interaction-overlay-transition); z-index: 3; }
#weather-card .interaction-overlay.active { opacity: 1; }
#weather-card.interactable { cursor: pointer; }
#weather-card .card-overlay-content { position: relative; z-index: 10; }
#weather-card .weather-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--card-overlay-padding); text-align: center; }
#weather-card #weather-icon { display: block; width: var(--weather-icon-size); height: var(--weather-icon-size); object-fit: contain; margin-bottom: 6px; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); max-width: 100%; max-height: 100%; }
#weather-card #weather-description { font-size: var(--info-font-size); color: var(--weather-description-color); font-style: var(--info-font-style); font-weight: 500; position: relative; z-index: 11; background: rgba(0,0,0,0.4); padding: 2px 4px; border-radius: 3px; margin-top: 4px; }

/* Медиа-запросы */
@media (min-width: 1025px) { /* Desktop */
    .layout-container { padding: var(--main-padding); }
    .layout-header { width: 100%; margin: 0; }
    #news-banner-wrapper { width: 100%; margin: 10px 0 0 0; }
    #main-content-area { flex-direction: row; align-items: stretch; }
    #center-cards-row { flex-grow: 1; flex-basis: auto; width: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: var(--content-gap); padding: 0; height: 100%; overflow: hidden; align-items: stretch; justify-items: stretch; }
    .center-card { width: 100%; height: 100%; max-width: none; max-height: none; flex-basis: auto; aspect-ratio: unset; }
    #game-log { flex-grow: 0; flex-shrink: 0; flex-basis: var(--side-log-width); height: 100%; width: auto; }
 }
 @media (min-width: 701px) and (max-width: 1024px) { /* Tablet */
    .layout-container { padding: var(--main-padding); }
    .layout-header { width: 100%; margin: 0; }
    #news-banner-wrapper { width: 100%; margin: 10px 0 0 0; }
    #main-content-area { flex-direction: column; }
    #center-cards-row { flex-grow: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(120px, 1fr)); gap: var(--content-gap); padding: 0; height: auto; overflow: hidden; align-items: stretch; justify-items: stretch; }
    .center-card { width: 100%; height: 100%; aspect-ratio: unset; max-width: none; max-height: none; flex-basis: auto; }
    #game-log { flex-grow: 0; flex-shrink: 0; height: 18vh; width: 100%; }
 }
@media (max-width: 700px) { /* Mobile */
    #main-content-area { flex-direction: column; }
    #center-cards-row { flex-grow: 1; height: auto; overflow-y: auto; }
    .center-card { max-height: 38vh; flex-basis: calc(50% - var(--card-gap)); }
    #game-log { height: 20vh; width: 100%; }
}
@media (max-width: 480px) { /* Narrow Mobile */
    .center-card { flex-basis: calc(95% - var(--card-gap)); max-width: calc(95% - var(--card-gap)); max-height: 35vh; }
    #game-log { height: 18vh; }
}

/* Колода карт (визуальная) */
#card-deck { width: 60px; height: 90px; position: fixed; top: 10px; left: 10px; z-index: 100; display: block; transform-style: preserve-3d; perspective: 500px; pointer-events: none; }
.deck-card { width: 100%; height: 100%; border: 1px solid var(--deck-card-border-color); border-radius: 4px; position: absolute; top: 0; left: 0; box-shadow: 1px 1px 3px var(--box-shadow-color); background-image: url('../images/backgrounds/card_back.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; transform-origin: center bottom; transition: transform 0.3s ease-in-out; backface-visibility: hidden; }
/*📁КОНЕЦ ФАЙЛА riverbank.css*/