/*📁НАЧАЛО ФАЙЛА riverbank.css V9 - Стили для карты Испытания */
: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; /* Цвет подсветки завершенного действия */
    --time-control-bg: rgba(0, 0, 0, 0.7);
    --time-control-button-bg: #444;
    --time-control-button-hover-bg: #666;
    --time-control-button-active-bg: #888;
    --time-control-input-bg: #333;
    --time-control-text-color: #ddd;
    --time-control-border-color: #555;

    /* Карты мира */
    --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: black;       /* Текст маркера */
    --hero-label-bg: lightgreen;     /* Фон маркера */
    --hero-label-shadow: 1px 1px 1px black;
    --hero-label-font-size: 12px;
    --hero-label-border-radius: 4px;
    --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; /* Ширина лога на десктопе */

    /* Новые переменные для карты Испытания */
    --trial-icon-color: orange; /* Цвет иконки битвы */
    --trial-card-bg-color: rgba(40, 40, 40, 0.7); /* Фон карты Испытания */
}

/* --- Общие стили --- */
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 */
}
.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 { 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); }
#log-text div .log-time { color: #999; margin-right: 6px; font-size: 0.9em; display: inline-block; min-width: 55px; }
#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: center; align-items: center; padding: var(--info-padding); font-size: var(--info-font-size); line-height: var(--microlog-line-height); color: #bbb; }
#placeholder-card-1 .scout-stats-overlay { background-color: var(--stats-overlay-bg); padding: var(--info-padding); margin: 0 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; 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); display: none; margin-top: auto; }
#placeholder-card-1 .scout-stats-overlay .scout-name-display { font-weight: bold; text-align: center; margin-bottom: 5px; font-size: 1.05em; color: var(--text-color); overflow: hidden; word-wrap: break-word; hyphens: auto; }
#placeholder-card-1 .scout-stats-overlay .scout-detail { display: flex; justify-content: space-between; margin-bottom: 2px; }
#placeholder-card-1 .scout-stats-overlay .scout-detail span:first-child { opacity: 0.8; margin-right: 5px; white-space: nowrap; color: #ccc; }
#placeholder-card-1 .scout-stats-overlay .scout-detail span:last-child { font-weight: bold; text-align: right; font-style: normal; }
.status-on_mission { color: orange; } .status-resting { color: lightblue; } .status-missing { color: red; font-style: italic; font-weight: bold;} .status-exiled { color: gray; font-style: italic; } .status-in_trial { color: yellow; font-weight: bold; } .status-unknown { color: #aaa; font-style: italic;}
#placeholder-card-1 .scout-mission-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: none; z-index: 10; order: -1; }
#placeholder-card-1 .scout-mission-progress::-webkit-progress-value { background-color: var(--progress-bar-fill); border-radius: 3px; transition: width 0.3s linear; }
#placeholder-card-1 .scout-mission-progress::-moz-progress-bar { background-color: var(--progress-bar-fill); border-radius: 3px; transition: width 0.3s linear; }
#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); }
#placeholder-card-2.trial-active { background-color: var(--trial-card-bg-color) !important; background-image: none !important; }
#placeholder-card-2 .trial-icon { font-size: 4em; color: var(--trial-icon-color); text-align: center; margin: auto; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); display: none; content: '\2694'; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } }
#placeholder-card-2 .trial-icon.animate-pulse { animation: pulse 1.5s infinite ease-in-out; }
#placeholder-card-2 .trial-progress { width: calc(100% - var(--card-overlay-padding) * 2); margin: 0 var(--card-overlay-padding) var(--card-overlay-padding); height: 8px; appearance: none; border: none; border-radius: 4px; overflow: hidden; background-color: var(--progress-bar-bg); flex-shrink: 0; display: none; position: absolute; bottom: var(--card-overlay-padding); left: var(--card-overlay-padding); z-index: 11; }
#placeholder-card-2 .trial-progress::-webkit-progress-bar { background-color: var(--progress-bar-bg); border-radius: 4px; }
#placeholder-card-2 .trial-progress::-webkit-progress-value { background-color: var(--progress-bar-fill); border-radius: 4px; transition: width 0.3s linear; }
#placeholder-card-2 .trial-progress::-moz-progress-bar { background-color: var(--progress-bar-fill); border-radius: 4px; transition: width 0.3s linear; }
#placeholder-card-3 .scout-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; 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); display: block; margin-top: auto; }
#placeholder-card-3 .scout-stats-overlay .scout-name-display { font-weight: bold; text-align: center; margin-bottom: 5px; font-size: 1.05em; color: var(--text-color); overflow: hidden; word-wrap: break-word; hyphens: auto; }
#placeholder-card-3 .scout-stats-overlay .scout-detail { display: flex; justify-content: space-between; margin-bottom: 2px; }
#placeholder-card-3 .scout-stats-overlay .scout-detail span:first-child { opacity: 0.8; margin-right: 5px; white-space: nowrap; color: #ccc; }
#placeholder-card-3 .scout-stats-overlay .scout-detail span:last-child { font-weight: bold; text-align: right; font-style: normal; }
#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; }
#mini-map-regions-container .hero-location-label { position: absolute !important; display: block !important; visibility: hidden; opacity: 0; background-color: var(--hero-label-bg) !important; color: var(--hero-label-color) !important; padding: 4px 8px !important; border-radius: var(--hero-label-border-radius) !important; font-size: var(--hero-label-font-size) !important; font-weight: bold !important; white-space: nowrap !important; z-index: 150 !important; pointer-events: none !important; transform: translate(-50%, -50%) !important; transition: top 0.3s ease-out, left 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out !important; border: none !important; text-shadow: var(--hero-label-shadow); min-width: 10px; min-height: 10px; text-align: center; line-height: normal; }
#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) { .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) { .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, min