в Гримуаре) -- без сброса UA-стилей кнопки пустой слот показывался
белым/серым прямоугольником вместо точка в точку совпадения с референсом. */
background: none; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; font-family: inherit; cursor: default;
}
/* Фаза 57.3 (фикс по фидбеку): плюсик в пустом слоте колоды, как на макете (image-2.jpg). */
.grimoire-deck-slot .misc-icon { width: 22px; height: 22px; stroke-width: 2.2; }
/* Фаза 80: слот колоды теперь визуально зеркалит боевую карточку -- арт заполняет весь слот
(position: absolute + object-fit: cover), overflow:hidden обрезает арт по скруглённым углам
рамки редкости. Прежний flex-центрированный layout (арт 58% высоты + название под ним)
заменён на абсолютный стек (см. .grimoire-deck-slot-art/-scrim/-bottom ниже). */
.grimoire-deck-slot-filled {
position: relative; border-style: solid; border-width: 1.5px; border-color: var(--rarity-color, var(--lc-line));
background: linear-gradient(165deg, var(--rarity-soft, rgba(157,180,201,.14)), rgba(0,0,0,.3)); padding: 0;
overflow: hidden; display: block;
}
.grimoire-deck-slot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* Скрим-градиент снизу для читаемости названия/звёзд, наложенных поверх арта -- тот же приём,
что и в боевой руке карт (.card-scrim в open_front/index.php). */
.grimoire-deck-slot-scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(4,8,14,.92) 0%, rgba(4,8,14,.48) 55%, transparent 100%);
}
/* Мана/уровень -- те же ромбы-бейджи, что и в сетке карт (.lane-clash-card-tile .card-mana-badge/
.card-tile-level-diamond), но со своим смещением -- у слота колоды нет внутреннего padding. */
.grimoire-deck-slot-filled .card-mana-badge {
position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 6px; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ff8fd6, #9a4fe0); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.grimoire-deck-slot-filled .card-mana-badge span { display: block; transform: rotate(-45deg); font-size: 9px; font-weight: 900; color: #fff; }
.grimoire-deck-slot-filled .card-tile-level-diamond {
position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 6px; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ffe29a, #d9862f); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.grimoire-deck-slot-filled .card-tile-level-diamond span { display: block; transform: rotate(-45deg); font-size: 9px; font-weight: 900; color: #3a2205; }
/* Название + звёзды -- нижний оверлей поверх арта (звёзды под названием, как в списке карт). */
.grimoire-deck-slot-bottom { position: absolute; left: 4px; right: 4px; bottom: 5px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.grimoire-deck-slot-filled .card-tile-stars { display: flex; align-items: center; justify-content: center; gap: 1.5px; }
.grimoire-deck-slot-filled .card-tile-star { width: 8px; height: 8px; color: var(--lc-gold); }
.grimoire-deck-slot-filled .card-tile-star:not(.filled) { color: rgba(255, 207, 107, .3); }
/* Фаза 57.1 (багфикс): экран Стычки отрядов рендерится внутри overlayWrapper() -- ВНЕ скоупа
.arena-equipment.equip-content/.shop-screen, где определены --rarity-common/rare/epic/legendary.
Эти токены поэтому были неразрешимы здесь, и --rarity-color всегда падал на нейтральный
фолбэк -- рамки карточек и слотов колоды не различались по редкости (все выглядели одинаково),
в отличие от концепта. Правильный, уже глобально определённый (:root, строка ~6860) токен для
этого экрана -- --lc-rarity-* (см. .lane-clash-deck-slot/.lane-clash-collection-card выше). */
.grimoire-deck-slot-filled.rarity-common { --rarity-color: var(--lc-rarity-common); --rarity-soft: rgba(154,160,171,.22); }
.grimoire-deck-slot-filled.rarity-rare { --rarity-color: var(--lc-rarity-rare); --rarity-soft: rgba(111,182,255,.22); }
.grimoire-deck-slot-filled.rarity-epic { --rarity-color: var(--lc-rarity-epic); --rarity-soft: rgba(195,123,255,.26); }
.grimoire-deck-slot-filled.rarity-legendary { --rarity-color: var(--lc-rarity-legendary); --rarity-soft: rgba(255,207,107,.26); }
/* Фаза 57 (ревизия): бейдж маны на слоте колоды убран по концепту -- вместо него компактное
название карты, зажатое в 1 строку. Фаза 57.2: слот стал шире (сетка 4 колонки вместо flex
56px) -- шрифт увеличен пропорционально. */
/* Фаза 57.4 (фикс по фидбеку): было white-space: nowrap + ellipsis -- длинные названия обрезались
("прилив ма...", "кот - пот..."), хотя место под 2-ю строку в слоте есть. Перенос на 2 строки вместо
обрезки в 1. */
.grimoire-deck-slot-name {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; padding: 0;
font-size: 8.5px; font-weight: 800; line-height: 1.15; max-height: 2.3em;
color: #f2f8ff; text-align: center; overflow: hidden; word-break: break-word;
text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
/* Фаза 57: равноширокий сегментированный контроль (вместо прокручиваемых пилл-кнопок фиксированной
ширины) по концепту -- все три вкладки занимают полную ширину панели поровну. */
.grimoire-filter-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.grimoire-filter-btn {
flex: 1; padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; text-align: center;
background: var(--lc-panel-deep); border: 1px solid var(--lc-line); color: var(--lc-muted);
}
.grimoire-filter-btn.active { background: linear-gradient(180deg, var(--lc-violet), var(--lc-violet-2)); border-color: var(--lc-violet); color: #fff; }
/* Фаза 57: плотная сетка 4-в-ряд на мобильном (было 2), desktop-переопределение ниже делает её
ещё плотнее (так чтобы desktop никогда не был реже mobile). */
.lane-clash-grimoire-grid.grimoire-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* min-width: 0 -- та же причина, что и у .grimoire-deck-slot выше: без этого grid-колонки
растягиваются неравномерно по min-content содержимого карточки (короткое название, не переносящееся
на 2 строки, требует больше места, чем длинное, которое переносится) -- на мобильных вьюпортах это
выталкивало 4-ю (последнюю) карточку в ряду за правый край экрана. */
.lane-clash-card-tile {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 5px 8px; border-radius: 14px;
border: 1.5px solid var(--rarity-color, var(--lc-line)); cursor: pointer; min-width: 0;
background: linear-gradient(165deg, var(--rarity-soft, rgba(157,180,201,.14)) 0%, var(--lc-panel-deep) 78%);
box-shadow: 0 0 0 1px var(--rarity-soft, transparent) inset, 0 10px 22px rgba(0,0,0,.3);
}
/* Фаза 57.1 (тот же багфикс, см. .grimoire-deck-slot-filled.rarity-* выше): --lc-rarity-*
вместо неразрешимого в этом скоупе --rarity-*. */
.lane-clash-card-tile.rarity-common { --rarity-color: var(--lc-rarity-common); --rarity-soft: rgba(154,160,171,.22); }
.lane-clash-card-tile.rarity-rare { --rarity-color: var(--lc-rarity-rare); --rarity-soft: rgba(111,182,255,.22); }
.lane-clash-card-tile.rarity-epic { --rarity-color: var(--lc-rarity-epic); --rarity-soft: rgba(195,123,255,.26); }
.lane-clash-card-tile.rarity-legendary { --rarity-color: var(--lc-rarity-legendary); --rarity-soft: rgba(255,207,107,.26); }
/* Фаза 57 (ревизия по концепту): кольцо в колоде отмечается зелёным контуром-рамкой вокруг
карточки (как у обеих карт в макете), вторым сигналом служит галочка справа. */
.lane-clash-card-tile.in-deck { box-shadow: 0 0 0 2px var(--workshop-green, #7ee5ad), 0 10px 22px rgba(0,0,0,.3); }
/* Фаза 57 (ревизия): бейдж маны -- ромб (повёрнутый квадрат) по концепту -- внутренний
контрвращает текст обратно, чтобы цифра оставалась горизонтальной.
Фаза 73.1 (фикс по фидбеку): розово-фиолетовый градиент вместо чисто фиолетового --
чтобы визуально отличаться от янтарного ромба уровня справа (.card-tile-level-diamond ниже). */
.lane-clash-card-tile .card-mana-badge {
position: absolute; top: -2px; left: -2px; width: 22px; height: 22px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ff8fd6, #9a4fe0); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.lane-clash-card-tile .card-mana-badge span { display: block; transform: rotate(-45deg); font-size: 10px; font-weight: 900; color: #fff; }
/* Фаза 73.1 (фикс по фидбеку): настоящий уровень карты (card.level, прокачивается
резонансом) в правом верхнем углу -- тот же ромб, что и у маны слева (Fixed вместо круглого
бейджа Фазы 73, который ошибочно показывал star_level -- дублирование с баннером звёзд
ниже), янтарно-золотой градиент. Заменяет прежнюю галочку «в колоде» -- индикатор
нахождения в колоде остался зелёным кольцом рамки тайла (.lane-clash-card-tile.in-deck ниже),
поэтому здесь конфликта нет. */
.lane-clash-card-tile .card-tile-level-diamond {
position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 6px; z-index: 2;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ffe29a, #d9862f); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.lane-clash-card-tile .card-tile-level-diamond span { display: block; transform: rotate(-45deg); font-size: 10px; font-weight: 900; color: #3a2205; }
.lane-clash-card-tile .card-icon-wrap { width: 52px; height: 52px; margin-top: 3px; border-radius: 10px; overflow: hidden; }
.lane-clash-card-tile .card-icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.lane-clash-card-tile .card-tile-name {
font-size: 10px; font-weight: 800; color: var(--lc-ink); text-align: center; line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-pack: center; overflow: hidden; width: 100%; min-height: 24px;
}
.lane-clash-card-tile .card-tile-type { font-size: 9px; font-weight: 700; color: var(--lc-muted); text-transform: uppercase; letter-spacing: .03em; }
.lane-clash-card-tile .card-tile-level { font-size: 10px; font-weight: 700; color: var(--lc-gold); }
/* Фаза 73.1 (фикс по фидбеку): восстановлен ряд звёзд (был убран в Фазе 73 вместе с баннером/
прогресс-баром выше) -- компактный размер для тайла (крупный 20px-вариант остаётся
только в модалке через .card-detail-stars-block ниже). */
.lane-clash-card-tile .card-tile-stars { display: flex; align-items: center; justify-content: center; gap: 1.5px; margin: 1px 0; }
.lane-clash-card-tile .card-tile-star { width: 8.5px; height: 8.5px; color: var(--lc-gold); }
.lane-clash-card-tile .card-tile-star:not(.filled) { color: rgba(255, 207, 107, .3); }
/* Фаза 57.2 (фикс по фидбеку): по макету кнопка -- не отдельная пилюля с отступом от краёв карты, а
сплошная нижняя полоса впритык к краям карты. Отрицательные отступы (-5px боковые, -8px
низу) точно гасят внутренний padding .lane-clash-card-tile (9px 5px 8px), радиус снизу 12.5px
повторяет радиус карты (14px) за вычетом толщины рамки 1.5px, чтобы шов смотрелся бесшовным. */
.lane-clash-card-tile .card-tile-upgrade-btn {
display: block; width: calc(100% + 10px); margin: 5px -5px -8px; padding: 5px 8px; border-radius: 0 0 12.5px 12.5px; font-size: 8px; font-weight: 800;
letter-spacing: .03em; color: #1a0f2b; background: linear-gradient(180deg, #ffcf6b, #ff9f43);
animation: grimoire-pulse 1.4s ease-in-out infinite; border: 0;
}
/* Фаза 57 (ревизия): галочка «в колоде» -- зелёный кружок по концепту (вместо золотого), чтобы
визуально отличаться от разноцветного бейджа маны. */
.lane-clash-card-tile .card-tile-in-deck-badge {
position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #0e2417; background: var(--workshop-green, #7ee5ad); border: 2px solid rgba(255,255,255,.55);
box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.lane-clash-card-tile .card-tile-in-deck-badge .misc-icon { width: 10px; height: 10px; stroke-width: 3; }
/* Модальные окна слот-машины/сундука -- фиксированный overlay поверх всего overlay-panel Коллекции. */
.lane-clash-modal-overlay {
position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
background: rgba(6, 3, 12, .72); backdrop-filter: blur(3px);
}
.lane-clash-modal {
width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; padding: 18px 18px 22px; border-radius: 22px 22px 0 0;
background: linear-gradient(165deg, var(--lc-panel), var(--lc-panel-deep)); border: 1px solid var(--lc-line); border-bottom: none;
box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
@media (min-width: 640px) {
.lane-clash-modal-overlay { align-items: center; }
.lane-clash-modal { border-radius: 22px; border-bottom: 1px solid var(--lc-line); }
}
.lane-clash-modal-head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.modal-close-btn { font-size: 12px; font-weight: 700; color: var(--lc-muted); background: transparent; padding: 6px 8px; }
/* Фаза 71.5: шапка модалки карты -- заголовок «Характеристики» по центру + круглый красный
крестик справа, зафиксированные над прокручиваемой .card-detail-modal-body (сама «шапка»
не скроллится вместе с контентом -- требование пользователя, чтобы крестик всегда оставался на
месте при скролле). .lane-clash-modal уже имеет padding и max-height/overflow-y -- переносим скролл
только на .card-detail-modal (модалка деталей карты), другие использования .lane-clash-modal (слот-машина/сундук)
не затронуты. */
.lane-clash-modal.card-detail-modal { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 88vh; }
.card-detail-modal-head {
position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
padding: 14px 44px 10px; border-bottom: 1px solid var(--lc-line);
}
.card-detail-modal-heading { margin: 0; font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; color: var(--lc-ink); }
.card-detail-close-btn {
position: absolute; top: 10px; right: 14px; width: 26px; height: 26px; border-radius: 50%; padding: 0;
display: flex; align-items: center; justify-content: center; color: #fff;
background: linear-gradient(180deg, #ff6b6b, #d43f3f); border: 2px solid rgba(255,255,255,.45);
box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.card-detail-close-btn svg { width: 13px; height: 13px; }
.card-detail-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 22px; }
.slot-machine-token-row { display: flex; justify-content: center; margin-bottom: 8px; }
.slot-machine-title { margin: 0 0 14px; text-align: center; font-family: 'Cinzel', serif; font-size: 18px; color: var(--lc-ink); }
.slot-machine-reels {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; border-radius: 16px;
background: var(--lc-panel-deep); border: 1px solid rgba(255,207,107,.3); margin-bottom: 14px;
}
.slot-reel-cell {
aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px;
background: rgba(0,0,0,.35); border: 1px solid var(--lc-line);
}
.slot-reel-cell img { width: 100%; height: 100%; object-fit: contain; }
.slot-machine-reels.spinning .slot-reel-cell { animation: slot-reel-spin .5s linear infinite; }
@keyframes slot-reel-spin { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: .5; } 100% { transform: translateY(0); opacity: 1; } }
.slot-machine-result {
text-align: center; padding: 10px; border-radius: 12px; margin-bottom: 12px; font-size: 13px; color: var(--lc-ink);
background: rgba(255,207,107,.12); border: 1px solid rgba(255,207,107,.3);
}
.slot-machine-result.rarity-common { border-color: var(--rarity-common); }
.slot-machine-result.rarity-rare { border-color: var(--rarity-rare); }
.slot-machine-result.rarity-epic { border-color: var(--rarity-epic); }
.slot-machine-result.rarity-legendary { border-color: var(--rarity-legendary); }
.slot-machine-spin-btn {
width: 100%; min-height: 52px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #1a0f2b;
background: linear-gradient(180deg, var(--lc-gold), #d9862f); box-shadow: 0 6px 0 #b5701f, 0 10px 20px rgba(217,134,47,.3);
}
.slot-machine-spin-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b5701f, 0 4px 10px rgba(217,134,47,.25); }
.slot-machine-spin-btn:disabled { opacity: .45; box-shadow: none; }
.chest-modal-title { margin: 0 0 10px; text-align: center; font-family: 'Cinzel', serif; font-size: 18px; color: var(--lc-gold); }
.chest-art { display: flex; justify-content: center; margin-bottom: 12px; }
.chest-art .misc-icon { width: 84px; height: 84px; color: var(--lc-gold); }
.chest-countdown { text-align: center; font-size: 13px; font-weight: 700; color: var(--lc-muted); margin-bottom: 14px; }
.chest-rewards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.chest-reward-tile {
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; text-align: center;
background: var(--lc-panel-deep); border: 1.5px solid var(--rarity-color, var(--lc-line)); font-size: 9px; font-weight: 700; color: var(--lc-ink);
}
.chest-reward-tile.rarity-common { --rarity-color: var(--rarity-common); }
.chest-reward-tile.rarity-rare { --rarity-color: var(--rarity-rare); }
.chest-reward-tile.rarity-epic { --rarity-color: var(--rarity-epic); }
.chest-reward-tile.rarity-legendary { --rarity-color: var(--rarity-legendary); }
.chest-reward-tile img { width: 32px; height: 32px; object-fit: contain; }
.chest-reward-tile.chest-reward-tokens { border-color: rgba(255,207,107,.4); }
.chest-reward-tokens-amount { font-size: 13px; font-weight: 900; color: var(--lc-gold); }
.chest-claim-btn {
width: 100%; min-height: 52px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #12331f;
background: linear-gradient(180deg, #7ee5ad, #3fae6f); box-shadow: 0 6px 0 #2c7d51, 0 10px 20px rgba(63,174,111,.3);
}
.chest-claim-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2c7d51, 0 4px 10px rgba(63,174,111,.25); }
/* Фаза 71.3: модалка деталей карты в сетке Коллекции (характеристики/механика/бафы + кнопка «в колоду»). */
.card-detail-modal { text-align: center; }
.card-detail-art-wrap {
width: 128px; height: 128px; margin: 0 auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
background: var(--lc-panel-deep); border: 2px solid var(--rarity-color, var(--lc-line));
}
.card-detail-art-wrap.rarity-common { --rarity-color: var(--rarity-common); }
.card-detail-art-wrap.rarity-rare { --rarity-color: var(--rarity-rare); }
.card-detail-art-wrap.rarity-epic { --rarity-color: var(--rarity-epic); }
.card-detail-art-wrap.rarity-legendary { --rarity-color: var(--rarity-legendary); }
.card-detail-art-wrap img { width: 100%; height: 100%; object-fit: contain; }
.card-detail-title { margin: 0 0 8px; font-family: 'Cinzel', serif; font-size: 18px; color: var(--lc-ink); }
.card-detail-meta-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.card-detail-rarity-pill {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px;
color: var(--lc-ink); background: rgba(255,255,255,.08); border: 1.5px solid var(--rarity-color, var(--lc-line));
}
.card-detail-rarity-pill.rarity-common { --rarity-color: var(--rarity-common); }
.card-detail-rarity-pill.rarity-rare { --rarity-color: var(--rarity-rare); }
.card-detail-rarity-pill.rarity-epic { --rarity-color: var(--rarity-epic); }
.card-detail-rarity-pill.rarity-legendary { --rarity-color: var(--rarity-legendary); }
/* Фаза 71.5: бейдж стоимости маны с явной подписью «Мана: N» вместо голой цифры (была непонятна
игроку вне контекста ромба-бейджа плитки). */
.card-detail-mana-pill {
font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px;
color: var(--lc-ink); background: rgba(167,112,255,.16); border: 1.5px solid var(--lc-violet);
}
/* Фаза 71.5: блок звёзд/дублей в модалке -- раньше звёзды тут рендерились без скопированного
родителя .lane-clash-card-tile, поэтому огромные чёрно-белые SVG -- даём такой же размер/цвет, как
в компактной плитке, лишь чуть крупнее. */
.card-detail-stars-block { margin: 8px 0 10px; }
.card-detail-stars-block .card-tile-stars { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 0 4px; }
.card-detail-stars-block .card-tile-star { width: 20px; height: 20px; color: var(--lc-gold); }
.card-detail-stars-block .card-tile-star:not(.filled) { color: rgba(255, 207, 107, .3); }
.card-detail-stars-block .card-tile-dupes-frac { font-size: 12px; font-weight: 800; color: var(--lc-ink); margin: 0 0 4px; }
.card-detail-stars-block .card-tile-maxed { font-size: 10px; font-weight: 700; color: var(--lc-gold); margin: 0 0 4px; }
.card-detail-stars-block .card-rarity-fill-wrap { max-width: 160px; margin: 0 auto; }
/* Фаза 71.5: кнопка «УЛУЧШИТЬ» вне .lane-clash-card-tile не получает базовый визуал (он скопирован
селектором .lane-clash-card-tile .card-tile-upgrade-btn) -- даём собственный полноценный вариант
(как у .card-detail-deck-btn) вместо узкой полоски-обрезки плитки. */
.card-detail-stars-block .card-tile-upgrade-btn {
display: block; width: 100%; margin: 6px 0 0; padding: 10px 8px; border-radius: 12px; font-size: 12px; font-weight: 800;
letter-spacing: .03em; color: #1a0f2b; background: linear-gradient(180deg, #ffcf6b, #ff9f43);
animation: grimoire-pulse 1.4s ease-in-out infinite; border: 0;
}
.card-detail-role-line { margin: 10px 0 0; font-size: 12px; color: var(--lc-ink); text-align: left; }
.card-detail-role-line b { color: var(--lc-gold); font-weight: 700; }
.card-detail-role-desc b { color: var(--lc-ink); font-weight: 700; }
.card-detail-mechanic-heading { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--lc-muted); margin-bottom: 4px; }
.card-detail-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.card-detail-stat {
display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 10px; text-align: center;
background: var(--lc-panel-deep); border: 1px solid var(--lc-line);
}
.card-detail-stat-label { font-size: 10px; font-weight: 700; color: var(--lc-muted); text-transform: uppercase; letter-spacing: .03em; }
.card-detail-stat-value { font-size: 15px; font-weight: 800; color: var(--lc-ink); }
.card-detail-role-desc { margin: 4px 0 0; font-size: 12px; color: var(--lc-muted); text-align: left; }
.card-detail-mechanic {
margin: 12px 0; padding: 10px 12px; border-radius: 12px; text-align: left;
background: rgba(255,207,107,.1); border: 1.5px solid var(--rarity-color, var(--lc-gold));
}
.card-detail-mechanic.rarity-common { --rarity-color: var(--rarity-common); }
.card-detail-mechanic.rarity-rare { --rarity-color: var(--rarity-rare); }
.card-detail-mechanic.rarity-epic { --rarity-color: var(--rarity-epic); }
.card-detail-mechanic.rarity-legendary { --rarity-color: var(--rarity-legendary); }
.card-detail-mechanic-label { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; color: var(--lc-gold); margin-bottom: 4px; }
.card-detail-mechanic-desc { margin: 0; font-size: 12.5px; color: var(--lc-ink); line-height: 1.4; }
.card-detail-deck-btn {
width: 100%; min-height: 52px; margin-top: 6px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #1a0f2b;
background: linear-gradient(180deg, var(--lc-gold), #d9862f); box-shadow: 0 6px 0 #b5701f, 0 10px 20px rgba(217,134,47,.3);
}
.card-detail-deck-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b5701f, 0 4px 10px rgba(217,134,47,.25); }
.card-detail-deck-btn.in-deck {
color: #12331f; background: linear-gradient(180deg, #7ee5ad, #3fae6f); box-shadow: 0 6px 0 #2c7d51, 0 10px 20px rgba(63,174,111,.3);
}
.card-detail-deck-btn.in-deck:active { box-shadow: 0 2px 0 #2c7d51, 0 4px 10px rgba(63,174,111,.25); }
/* Фаза 57: desktop денст мобильного (6 вместо 4-в-ряд) -- раньше тут было repeat(3),
что было реже нового мобильного базового значения 4 -- исправлено. Строка слотов колоды
теперь flex (см. .grimoire-deck-slots выше) и уже показывает все 8 слотов на любой ширине, отдельное
переопределение больше не нужно. */
@media (min-width: 640px) {
.lane-clash-grimoire-grid.grimoire-grid { grid-template-columns: repeat(6, 1fr); }
}
/* ==========================================================================================
Фаза 47: «Кристальный гримуар» -- карточная система питомцев (замена ручной экипировки по
слотам). Переиспользует существующие токены .arena-equipment.equip-content (--workshop-*,
--rarity-*[-soft], --eq-cut) для визуальной консистентности с остальным экраном/городом --
никаких новых цветовых систем не вводится, только структурные классы для грид-а карт,
прогресс-баров дублей, диамонда уровня и панелей прокачки/реформации поверх того же
fantasy-forge оформления (Cinzel заголовки, parchment/gold текст, brass рамки).
========================================================================================== */
.arena-equipment.equip-content.grimoire-screen .grimoire-active-summary {
margin-top: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.arena-equipment.equip-content .grimoire-active-summary h2 { margin: 0; font-family: 'Cinzel', 'Georgia', serif; font-size: 15px; color: var(--workshop-parchment); }
.arena-equipment.equip-content .grimoire-active-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.arena-equipment.equip-content .grimoire-active-stats span { font-size: 10.5px; font-weight: 700; color: var(--workshop-muted); background: rgba(0,0,0,.24); border-radius: 999px; padding: 3px 9px; }
.arena-equipment.equip-content .grimoire-active-stats span b { color: var(--workshop-gold); margin-left: 3px; }
.arena-equipment.equip-content .card-rarity-tag {
display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rarity-color, var(--workshop-line));
color: var(--rarity-color, var(--workshop-muted)); background: var(--rarity-soft, rgba(0,0,0,.24));
}
.arena-equipment.equip-content .card-rarity-tag.rarity-common { --rarity-color: var(--rarity-common); --rarity-soft: var(--rarity-common-soft); }
.arena-equipment.equip-content .card-rarity-tag.rarity-rare { --rarity-color: var(--rarity-rare); --rarity-soft: var(--rarity-rare-soft); }
.arena-equipment.equip-content .card-rarity-tag.rarity-epic { --rarity-color: var(--rarity-epic); --rarity-soft: var(--rarity-epic-soft); }
.arena-equipment.equip-content .card-rarity-tag.rarity-legendary { --rarity-color: var(--rarity-legendary); --rarity-soft: var(--rarity-legendary-soft); }
/* Фаза 47 (доп. правка 2): тег раскраски (variant_key) рядом с тегом редкости -- нейтральный (не
зависит от --rarity-color), так как раскраска и редкость -- ортогональные атрибуты карты. */
.arena-equipment.equip-content .card-variant-tag {
display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: .02em;
padding: 2px 8px; border-radius: 999px; border: 1px solid var(--workshop-line); color: var(--workshop-muted);
background: rgba(0,0,0,.22);
}
.arena-equipment.equip-content .grimoire-card > .card-variant-tag { align-self: center; margin-bottom: 6px; margin-top: -2px; }
.arena-equipment.equip-content .life-spark-panel,
.arena-equipment.equip-content .grimoire-reform-panel {
border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; background: var(--workshop-card); border: 1px solid var(--workshop-line);
}
.arena-equipment.equip-content .life-spark-panel .panel-title h2,
.arena-equipment.equip-content .grimoire-reform-panel .panel-title h2 {
display: flex; align-items: center; gap: 6px; margin: 0; font-family: 'Cinzel', 'Georgia', serif; font-size: 13px; color: var(--workshop-gold);
}
.arena-equipment.equip-content .life-spark-panel .panel-title h2 svg { width: 14px; height: 14px; }
.arena-equipment.equip-content .life-spark-panel .panel-title { display: flex; align-items: center; justify-content: space-between; }
.arena-equipment.equip-content .life-spark-panel .count { font-size: 12px; font-weight: 800; color: var(--workshop-parchment); }
.arena-equipment.equip-content .life-spark-panel .arena-note,
.arena-equipment.equip-content .grimoire-reform-panel .arena-note { margin: 6px 0 0; font-size: 11px; color: var(--workshop-muted); line-height: 1.4; }
.arena-equipment.equip-content .grimoire-reform-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.arena-equipment.equip-content .grimoire-reform-btn,
.arena-equipment.equip-content .grimoire-btn {
font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 12px; color: #2a140a; cursor: pointer; min-height: 0;
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
border: 1px solid var(--workshop-gold-2); border-radius: 999px; padding: 10px 14px; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.arena-equipment.equip-content .grimoire-btn.small { padding: 7px 11px; font-size: 10.5px; }
.arena-equipment.equip-content .grimoire-btn.ghost { background: var(--workshop-card-2); color: var(--workshop-parchment); border-color: var(--workshop-line); box-shadow: none; }
.arena-equipment.equip-content .grimoire-btn:disabled,
.arena-equipment.equip-content .grimoire-reform-btn:disabled { opacity: .4; cursor: not-allowed; }
.arena-equipment.equip-content .grimoire-btn.primary { background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-amber-2)); }
/* Грид карт -- 2 колонки на мобиле (совпадает с прежней slots-grid раскладкой), 3+ на десктопе
через тот же брейкпоинт, что и остальные сетки экрана (см. media query ниже). */
.arena-equipment.equip-content .grimoire-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.arena-equipment.equip-content .grimoire-card {
position: relative; display: flex; flex-direction: column; padding: 12px 10px 12px; border-radius: 18px;
border: 1.5px solid var(--rarity-color, var(--workshop-line));
background: linear-gradient(165deg, var(--rarity-soft, rgba(157,180,201,.14)) 0%, var(--workshop-card) 78%);
box-shadow: 0 0 0 1px var(--rarity-soft, transparent) inset, 0 10px 22px rgba(0,0,0,.3);
}
.arena-equipment.equip-content .grimoire-card.rarity-common { --rarity-color: var(--rarity-common); --rarity-soft: var(--rarity-common-soft); }
.arena-equipment.equip-content .grimoire-card.rarity-rare { --rarity-color: var(--rarity-rare); --rarity-soft: var(--rarity-rare-soft); }
.arena-equipment.equip-content .grimoire-card.rarity-epic { --rarity-color: var(--rarity-epic); --rarity-soft: var(--rarity-epic-soft); }
.arena-equipment.equip-content .grimoire-card.rarity-legendary { --rarity-color: var(--rarity-legendary); --rarity-soft: var(--rarity-legendary-soft); }
.arena-equipment.equip-content .grimoire-card.equipped { border-color: #7ee5ad; box-shadow: 0 0 0 2px rgba(126,229,173,.35), 0 0 18px rgba(126,229,173,.4), 0 10px 22px rgba(0,0,0,.3); }
.arena-equipment.equip-content .grimoire-card-art { width: 74px; height: 74px; margin: 0 auto 6px; position: relative; }
.arena-equipment.equip-content .grimoire-card-art .pet-layers { position: relative; width: 100%; height: 100%; }
.arena-equipment.equip-content .grimoire-card-art .pet-layer { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.arena-equipment.equip-content .grimoire-card > .card-rarity-tag { align-self: center; margin-bottom: 6px; }
.arena-equipment.equip-content .grimoire-card-active-pill {
position: absolute; top: 8px; right: 8px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: #163422; background: #7ee5ad; border-radius: 999px; padding: 2px 7px;
}
.arena-equipment.equip-content .grimoire-card-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.arena-equipment.equip-content .grimoire-card-name { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--workshop-text); line-height: 1.25; }
.arena-equipment.equip-content .level-diamond {
display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 2px 0;
transform: rotate(45deg); border-radius: 7px; font-size: 11px; font-weight: 800; color: #2a140a;
background: linear-gradient(135deg, var(--rarity-color, var(--workshop-gold)), var(--workshop-gold-2));
box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.arena-equipment.equip-content .level-diamond > * { transform: rotate(-45deg); }
.arena-equipment.equip-content .card-rarity-fill-wrap { width: 100%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.32); overflow: hidden; margin-top: 2px; }
.arena-equipment.equip-content .card-rarity-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.arena-equipment.equip-content .card-rarity-fill.rarity-common { background: #8a99a8; }
.arena-equipment.equip-content .card-rarity-fill.rarity-rare { background: linear-gradient(90deg, #3d7fa8, #8ef7ff); }
.arena-equipment.equip-content .card-rarity-fill.rarity-epic { background: linear-gradient(90deg, #8a4fc9, #ff9bf0); }
.arena-equipment.equip-content .card-rarity-fill.rarity-legendary { background: linear-gradient(90deg, #d9a13a, #ffe29a); }
.arena-equipment.equip-content .grimoire-card-dupes { font-size: 9px; color: var(--workshop-muted); }
.arena-equipment.equip-content .grimoire-card-maxed { margin: 2px 0 0; font-size: 9.5px; font-weight: 800; color: var(--workshop-gold); text-transform: uppercase; letter-spacing: .03em; }
.arena-equipment.equip-content .upgrade-hint { margin: 2px 0 0; font-size: 9.5px; font-weight: 800; color: #7ee5ad; animation: grimoire-pulse 1.4s ease-in-out infinite; }
.arena-equipment.equip-content .grimoire-card-reform-ready { margin: 2px 0 0; font-size: 9px; font-weight: 700; color: var(--workshop-amber); }
.arena-equipment.equip-content .grimoire-card.ready-upgrade { animation: grimoire-card-pulse 1.6s ease-in-out infinite; }
@keyframes grimoire-card-pulse {
0%, 100% { box-shadow: 0 0 0 1px var(--rarity-soft, transparent) inset, 0 10px 22px rgba(0,0,0,.3); }
50% { box-shadow: 0 0 0 2px var(--rarity-color, transparent), 0 0 16px var(--rarity-soft, transparent), 0 10px 22px rgba(0,0,0,.3); }
}
@keyframes grimoire-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.arena-equipment.equip-content .grimoire-card.shake-deny { animation: grimoire-shake .4s ease; }
@keyframes grimoire-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.arena-equipment.equip-content .grimoire-card-actions { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; }
.arena-equipment.equip-content .grimoire-card-actions .grimoire-btn { width: 100%; }
.arena-equipment.equip-content .upgrade-card-panel,
.arena-equipment.equip-content .reform-picker-panel {
border-radius: 18px; padding: 13px 14px; margin-bottom: 14px; background: var(--workshop-card); border: 1px solid var(--workshop-gold-2);
box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.arena-equipment.equip-content .upgrade-card-panel .panel-title,
.arena-equipment.equip-content .reform-picker-panel .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.arena-equipment.equip-content .upgrade-card-panel h2,
.arena-equipment.equip-content .reform-picker-panel h2 { margin: 0; font-family: 'Cinzel', 'Georgia', serif; font-size: 13px; color: var(--workshop-parchment); }
.arena-equipment.equip-content .upgrade-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.arena-equipment.equip-content .upgrade-card-actions .grimoire-btn { flex: 1; }
.arena-equipment.equip-content .reform-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.arena-equipment.equip-content .reform-pick-tile {
display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 14px; cursor: pointer;
background: var(--workshop-card-2); border: 1.5px solid var(--workshop-line); color: var(--workshop-text); font-size: 9.5px; font-weight: 700; min-height: 0;
}
.arena-equipment.equip-content .reform-pick-tile.picked { border-color: var(--workshop-gold); background: linear-gradient(165deg, rgba(255,207,107,.22), var(--workshop-card-2)); box-shadow: 0 0 0 1px var(--workshop-gold) inset; }
.arena-equipment.equip-content .reform-pick-tile .level-diamond { width: 24px; height: 24px; font-size: 9px; }
@media (min-width: 720px) {
.arena-equipment.equip-content .grimoire-grid { grid-template-columns: repeat(4, 1fr); }
.arena-equipment.equip-content .reform-pick-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Фаза 51: полноэкранный режим боя «Стычки отрядов» -- render() подставляет отдельный упрощённый
.app-shell.lane-clash-fullscreen (без сайдбара/HUD/нижнего меню/чата/оверлеев) на всё время
активного боя (state.laneClash.screen === 'battle'). Здесь просто убираем стандартные отступы
.location-content (16px, рассчитан под обычный шелл с HUD) и растягиваем frame-wrap на весь
вьюпорт без вычитания высоты HUD (92px) и нижнего меню (112px) -- их в этом шелле физически нет. */
.app-shell.lane-clash-fullscreen { height: 100vh; min-height: 100vh; }
.location-content.lane-clash-fullscreen-content { padding: 0; height: 100vh; display: flex; flex-direction: column; }
.location-content.lane-clash-fullscreen-content .lane-clash-battle-frame-wrap { height: 100vh; flex: 1; }
/* Фаза 51: .lane-clash-screen задаёт padding:20px 16px 26px для всех экранов Стычки отрядов
(выбор режима/результат) -- в полноэкранном шелле боя этот паддинг оставлял видимый серый
зазор сверху/по бокам вокруг frame-wrap. Обнуляем его строго внутри fullscreen-контейнера и
растягиваем .lane-clash-screen/.lane-clash-battle на всю высоту, чтобы frame-wrap занимал
весь экран без полей. */
.location-content.lane-clash-fullscreen-content .lane-clash-screen { padding: 0; height: 100vh; display: flex; flex-direction: column; }
.location-content.lane-clash-fullscreen-content .lane-clash-battle { height: 100vh; display: flex; flex-direction: column; flex: 1; }
/* Фаза 51 (баг с зумом): touch-action:manipulation на самой обёртке -- убирает встроенный
задержанный-тап-жест браузера в зоне топбара боя (сам iframe ниже уже имеет touch-action:none
внутри собственного документа) -- дополнительная страховка к динамическому
из render(). */
.lane-clash-battle-frame-wrap { touch-action: manipulation; }
/* Фаза 52 (часть A): Резонанс + найм Хранителя -- append-only блок, добавлен строго в конец файла,
ни один существующий блок style.css не тронут. Панель резонанса (.resonance-panel) переиспользует
тот же контейнер-скин, что .upgrade-card-panel/.reform-picker-panel (см. блок выше в файле), плюс
новые правила для сетки хранителей (.keeper-roster-grid/.keeper-roster-tile) и заглушки макс.
уровня (.resonance-action-maxed). См. docs/reports/ отчёт Фазы 52 (часть A) для контекста. */
.arena-equipment.equip-content .resonance-panel {
border-radius: 18px; padding: 13px 14px; margin-bottom: 14px; background: var(--workshop-card); border: 1px solid var(--workshop-gold-2);
box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.arena-equipment.equip-content .resonance-panel .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.arena-equipment.equip-content .resonance-panel h2 { margin: 0; font-family: 'Cinzel', 'Georgia', serif; font-size: 13px; color: var(--workshop-parchment); }
.arena-equipment.equip-content .resonance-panel .card-rarity-fill-wrap { margin: 8px 0 10px; height: 7px; }
.arena-equipment.equip-content .resonance-panel > .grimoire-btn { width: 100%; margin-top: 4px; }
.arena-equipment.equip-content .keeper-roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 2px; }
.arena-equipment.equip-content .keeper-roster-tile {
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; cursor: pointer;
background: var(--workshop-card-2); border: 1.5px solid var(--workshop-line); color: var(--workshop-text); font-size: 9.5px; font-weight: 700; text-align: center; min-height: 0;
}
.arena-equipment.equip-content .keeper-roster-tile:hover { border-color: var(--workshop-gold); }
.arena-equipment.equip-content .keeper-roster-tile:disabled { opacity: .45; cursor: not-allowed; }
.arena-equipment.equip-content .keeper-roster-tile .keeper-name { font-family: 'Cinzel', 'Georgia', serif; font-size: 10px; color: var(--workshop-parchment); }
.arena-equipment.equip-content .keeper-roster-tile .keeper-reduction { color: var(--workshop-gold); font-size: 9px; }
.arena-equipment.equip-content .keeper-roster-tile .keeper-cost { display: flex; align-items: center; gap: 3px; font-size: 9px; opacity: .85; }
.arena-equipment.equip-content .resonance-action-maxed { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.arena-equipment.equip-content .resonance-maxed-note { margin: 0; color: var(--workshop-gold); font-size: 10.5px; }
@media (min-width: 720px) {
.arena-equipment.equip-content .keeper-roster-grid { grid-template-columns: repeat(3, 1fr); }
}
.arena-equipment.equip-content .keeper-roster-tile .keeper-portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--workshop-line); }
/* Фаза 52 (часть C): «Зал Реликвария» -- сетка 5x5 слотов под осколки/капсулы резонанса, очередь
переполнения, кнопка расчистки следующей ячейки, модалка предраскрытия капсулы. Append-only блок --
не редактирует существующие правила выше. Цвета грейдов (grade-1..grade-7) -- собственная шкала,
отдельная от --rarity-color/--rarity-soft, так как модель Зала принципиально не хранит rarity
(структурный фикс v3-бага №4 из брифа reliquary_v3_real_integration_brief.md).
Тайлы «Кристального гримуара» */
.equip-sub-tabs { display: flex; gap: 8px; margin: 10px 0 4px; }
.equip-sub-tabs .arena-tab-btn { flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--workshop-line, rgba(255,255,255,.12)); background: var(--surface-2, #242b38); color: var(--muted, #9da7b8); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.equip-sub-tabs .arena-tab-btn.active { background: var(--workshop-gold, #ffcf6b); color: #201405; border-color: transparent; }
.reliquary-hall-screen .reliquary-hall-grid { display: grid; gap: 8px; margin: 12px 0; }
.reliquary-slot { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; border: 1.5px solid var(--workshop-line, rgba(255,255,255,.12)); background: var(--surface-2, #242b38); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; touch-action: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.reliquary-slot.locked { cursor: not-allowed; opacity: .5; color: var(--muted, #9da7b8); }
.reliquary-slot.empty { border-style: dashed; }
.reliquary-slot.dragging { transform: scale(0.92); box-shadow: 0 0 0 2px var(--workshop-gold, #ffcf6b) inset; }
.reliquary-slot.drop-hint { border-color: var(--accent, #7ee5ad); box-shadow: 0 0 12px rgba(126,229,173,.45); }
.reliquary-grade-badge { font-family: 'Russo One', 'Exo 2', sans-serif; font-size: 15px; letter-spacing: .02em; }
.reliquary-slot.shard { color: #fff; }
.reliquary-slot.shard.grade-1 { background: linear-gradient(155deg, #4b5568, #2c3340); }
.reliquary-slot.shard.grade-2 { background: linear-gradient(155deg, #4a7a63, #24422f); }
.reliquary-slot.shard.grade-3 { background: linear-gradient(155deg, #3f7fa0, #1f4152); }
.reliquary-slot.shard.grade-4 { background: linear-gradient(155deg, #6a5bc4, #352b73); }
.reliquary-slot.shard.grade-5 { background: linear-gradient(155deg, #b9679a, #5c2f52); }
.reliquary-slot.shard.grade-6 { background: linear-gradient(155deg, #d8974a, #7a4c1c); }
.reliquary-slot.shard.grade-7 { background: linear-gradient(155deg, #e0c355, #8a6c15); color: #241a04; }
.reliquary-slot.capsule { flex-direction: column; gap: 3px; color: #fff; background: linear-gradient(160deg, #2c2438, #17131f); border-color: rgba(255,255,255,.16); }
.reliquary-slot.capsule.ready { box-shadow: 0 0 14px rgba(255,207,107,.55); border-color: var(--workshop-gold, #ffcf6b); }
.reliquary-capsule-status { font-size: 9.5px; letter-spacing: .03em; color: var(--muted, #9da7b8); }
.reliquary-capsule-status.ready { color: var(--workshop-gold, #ffcf6b); font-weight: 700; }
.reliquary-queue-row { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, #242b38); border: 1px solid var(--workshop-line, rgba(255,255,255,.1)); }
.reliquary-queue-label { display: block; font-size: 11px; color: var(--muted, #9da7b8); margin-bottom: 6px; }
.reliquary-queue-items { display: flex; flex-wrap: wrap; gap: 6px; }
/* Фикс 53.10 (баг 2, append-only): ограничиваем очередь капсул/осколков ровно 7 в одну строку (JS-лимит
RELIQUARY_QUEUE_VISIBLE_LIMIT уже равен 7, остальные уходят в надпись-счётчик), раньше капсулы
переносились на flex-wrap в 2 строки при узкой ширине контейнера (баг 2 из багрепорта, image-2.jpg) --
жёсткая сетка ровно из 7 колонок всегда даёт 1 строку независимо от ширины элемента. */
.reliquary-queue-items { display: grid; grid-template-columns: repeat(7, 1fr); flex-wrap: unset; gap: 4px; }
.reliquary-queue-item { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); }
.reliquary-queue-item .misc-icon { width: 12px; height: 12px; }
.reliquary-unlock-btn { width: 100%; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.reliquary-capsule-modal-overlay { position: fixed; inset: 0; background: rgba(6,8,12,.72); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.reliquary-capsule-modal { max-width: 340px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.reliquary-capsule-chances { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.reliquary-chance-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; background: var(--surface-2, #242b38); font-size: 12.5px; }
.reliquary-chance-row b { color: var(--workshop-gold, #ffcf6b); }
@media (min-width: 720px) {
.reliquary-hall-screen .reliquary-hall-grid { max-width: 460px; margin-inline: auto; }
}
/* Фаза 52 (часть D): вкладка «Экспедиции» карт питомца (append-only, отдельный блок в конце
файла — не трогает предыдущие блоки Зала Реликвария (часть C) выше). */
.reliquary-expedition-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.reliquary-expedition-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2, #242b38); border: 1px solid var(--workshop-line, rgba(255,255,255,.1)); }
.reliquary-expedition-icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--muted, #9da7b8); }
.reliquary-expedition-icon img { width: 30px; height: 30px; object-fit: contain; }
.reliquary-expedition-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reliquary-expedition-name { font-weight: 700; font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reliquary-expedition-meta { font-size: 11.5px; color: var(--muted, #9da7b8); }
.reliquary-expedition-action { flex: 0 0 auto; min-width: 84px; padding: 9px 14px; border-radius: 10px; border: none; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; cursor: pointer; background: var(--accent, #7ee5ad); color: #10241a; text-align: center; }
.reliquary-expedition-action.is-running { background: rgba(255,255,255,.08); color: var(--muted, #9da7b8); cursor: default; font-family: 'Russo One', 'Exo 2', sans-serif; letter-spacing: .03em; }
.reliquary-expedition-action.is-ready { background: var(--workshop-gold, #ffcf6b); color: #241a04; box-shadow: 0 0 12px rgba(255,207,107,.45); }
/* Фикс 53.10 (баг 3, append-only): кнопка «Отправить» остальных маршрутов теперь получает реальный
disabled, когда в том же блоке (питомец/заклинания) уже есть активная экспедиция
(см. masterCraftExpeditionsView() -> hasRunningInBlock, app.js) -- раньше визуально оставалась
активной/кликабельной на вид, ничего не подсказывая, что заблокирована (баг 3 из
багрепорта, image-3.jpg). :not(.is-running) исключает уже выполняемую экспедицию
(у неё свой стиль выше). */
.reliquary-expedition-action:disabled:not(.is-running) {
background: rgba(255,255,255,.08); color: var(--muted, #9da7b8); opacity: .55; box-shadow: none; cursor: not-allowed;
}
.master-craft-expedition-block .reliquary-expedition-action:disabled:not(.is-running) {
background: var(--workshop-card-2); color: var(--workshop-muted); border-color: var(--workshop-line); box-shadow: none; opacity: .6; cursor: not-allowed;
}
.reliquary-expedition-action:disabled { opacity: .85; }
@media (min-width: 720px) {
.reliquary-expedition-screen .reliquary-expedition-list { max-width: 460px; margin-inline: auto; }
}
/* Фикс 53.10 (баг 4, append-only): кольцо-индикатор вскрытия капсулы в едином зале реликвария
(data-relic-hall-capsule-ring, см. relicHallSlotTile() в app.js) -- зеркалит прототип 'Реликварий
осколков v3' (image-5.jpg из багрепорта): оранжевое кольцо вокруг капсулы, заполняется
по часовой по мере вскрытия (--capsule-ring-pct от 0 до 100, тикается в JS каждую секунду
без релоада, см. startRelicHallCapsuleTicking()). Кольцо -- круг с вырезанным через mask
центром (донат), поэтому не перекрывает иконку/бейдж в центре тайла. .reliquary-slot
уже position: relative в исходном блоке выше, поэтому здесь только позиционирование самого кольца. */
.reliquary-capsule-ring {
--capsule-ring-pct: 0;
position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 50%;
background: conic-gradient(var(--workshop-amber, #f0a24e) calc(var(--capsule-ring-pct) * 1%), transparent 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
transition: background .2s linear;
}
/* Бейдж грейда на обрабатываемой капсуле получает зелёную обводку -- точно как на кадре image-5.jpg
(отличает вскрывающуюся капсулу от закрытых/готовых соседей в сетке). */
.reliquary-grade-badge.processing {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 3px;
border-radius: 50%; border: 1.5px solid var(--accent, #7ee5ad); background: rgba(16,20,28,.55);
}
.master-craft-hall-block .reliquary-capsule-ring { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
/* Фаза 52 (часть C, фикс): иконка предмета в ячейке Зала Реликвария (append-only, отдельный
блок в конце файла — не трогает исходный блок Зала Реликвария выше). Осколок/капсула теперь
показывают фоновую иконку предмета, поверх которой лежит бейдж грейда (см. .reliquary-grade-badge
в исходном блоке) — сам бейдж не меняется, просто добавляется иконка под ним. */
.reliquary-slot-icon { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; pointer-events: none; z-index: 0; }
.reliquary-slot.shard, .reliquary-slot.capsule { overflow: hidden; }
.reliquary-slot .reliquary-grade-badge { position: relative; z-index: 1; }
.reliquary-slot.capsule .reliquary-capsule-status { position: relative; z-index: 1; }
/* Фаза 52 (часть C, addendum «Пункт 3»): интро-панель Хранителя Реликвария + «Дар Хранителя» +
тулбар массовых действий (append-only, отдельный блок в конце файла — не трогает исходные
блоки Зала Реликвария выше). */
.reliquary-keeper-hero { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 10px 0; border-radius: 14px; background: var(--surface-2, #242b38); border: 1px solid var(--workshop-line, rgba(255,255,255,.1)); }
.reliquary-keeper-portrait { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--workshop-gold, #ffcf6b); }
.reliquary-keeper-portrait img { width: 100%; height: 100%; object-fit: cover; }
.reliquary-keeper-info { flex: 1 1 auto; min-width: 0; }
.reliquary-keeper-name { display: block; font-weight: 700; font-size: 12.5px; color: var(--workshop-gold, #ffcf6b); letter-spacing: .01em; margin-bottom: 3px; }
.reliquary-keeper-quote { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted, #9da7b8); font-style: italic; }
.reliquary-daily-gift { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 10px 0; border-radius: 14px; background: var(--surface-2, #242b38); border: 1px solid rgba(255,207,107,.35); }
.reliquary-daily-gift.is-claimed { border-color: var(--workshop-line, rgba(255,255,255,.1)); opacity: .82; }
.reliquary-daily-gift-icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.reliquary-daily-gift-icon img { width: 30px; height: 30px; object-fit: contain; }
.reliquary-daily-gift-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reliquary-daily-gift-title { font-weight: 700; font-size: 12.5px; color: #fff; }
.reliquary-daily-gift-sub { font-size: 11px; color: var(--muted, #9da7b8); }
.reliquary-daily-gift-btn { flex: 0 0 auto; min-width: 74px; padding: 8px 12px; font-size: 12px; }
.reliquary-daily-gift-btn:disabled { opacity: .7; }
.reliquary-hall-toolbar { display: flex; gap: 8px; margin: 8px 0 12px; }
.reliquary-toolbar-btn { flex: 1 1 0; padding: 9px 10px; font-size: 12px; }
.reliquary-toolbar-btn:disabled { opacity: .55; }
@media (min-width: 720px) {
.reliquary-hall-screen .reliquary-keeper-hero, .reliquary-hall-screen .reliquary-daily-gift, .reliquary-hall-screen .reliquary-hall-toolbar { max-width: 460px; margin-inline: auto; }
}
/* Фаза 52 (часть E): резонанс/найм Хранителя для карт-заклинаний Гримуара Стычки отрядов --
append-only, ни один существующий блок style.css не тронут. Панель резонанса переиспользует
класс .resonance-panel/.keeper-roster-grid/.keeper-roster-tile, но без обёртки .arena-equipment.equip-content
(лэйаут Гримуара Стычки отрядов -- отдельный, не через equipmentView()), поэтому здесь -- свой,
более узкий набор правил под .lane-clash-grimoire-screen. */
.lane-clash-card-tile .card-tile-hint { font-size: 8.5px; color: var(--lc-muted); text-align: center; line-height: 1.15; margin-top: 2px; }
.lane-clash-card-tile .card-tile-maxed { margin: 2px 0 0; font-size: 9px; font-weight: 800; color: var(--lc-gold); text-transform: uppercase; letter-spacing: .03em; }
/* Фаза 73.1 (фикс по фидбеку): дробь X/Y дублей и стрелка-готовность -- восстановлены для
компактной плитки (были только в модалке через .card-detail-stars-block). */
.lane-clash-card-tile .card-tile-dupes-frac { font-size: 9.5px; font-weight: 800; color: var(--lc-ink); margin: 0; line-height: 1.1; }
.lane-clash-card-tile .card-tile-ready-arrow { color: #ffb545; font-size: 7.5px; vertical-align: 1px; animation: grimoire-pulse 1.4s ease-in-out infinite; }
.lane-clash-card-tile .card-rarity-fill-wrap { width: 100%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.32); overflow: hidden; margin-top: 2px; }
.lane-clash-card-tile .card-rarity-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rarity-color, var(--lc-gold)), var(--lc-gold)); }
.lane-clash-card-tile.ready-upgrade { animation: grimoire-card-pulse 1.6s ease-in-out infinite; }
.lane-clash-grimoire-screen .resonance-panel {
margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--lc-line); background: var(--lc-panel-deep);
}
.lane-clash-grimoire-screen .resonance-panel .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lane-clash-grimoire-screen .resonance-panel h2 { margin: 0; font-size: 13px; color: var(--lc-ink); }
.lane-clash-grimoire-screen .resonance-panel .card-rarity-fill-wrap { margin: 8px 0 10px; height: 7px; }
.lane-clash-grimoire-screen .resonance-panel > .grimoire-btn { width: 100%; margin-top: 4px; }
.lane-clash-grimoire-screen .keeper-roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 2px; }
.lane-clash-grimoire-screen .keeper-roster-tile {
display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px;
border: 1px solid var(--lc-line); background: var(--lc-panel); color: inherit;
}
.lane-clash-grimoire-screen .keeper-roster-tile:hover { border-color: var(--lc-gold); }
.lane-clash-grimoire-screen .keeper-roster-tile:disabled { opacity: .45; cursor: not-allowed; }
.lane-clash-grimoire-screen .keeper-roster-tile .keeper-name { font-size: 10px; color: var(--lc-ink); }
.lane-clash-grimoire-screen .keeper-roster-tile .keeper-reduction { color: var(--lc-gold); font-size: 9px; }
.lane-clash-grimoire-screen .keeper-roster-tile .keeper-cost { display: flex; align-items: center; gap: 3px; font-size: 9px; opacity: .85; }
.lane-clash-grimoire-screen .keeper-roster-tile .keeper-portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--lc-line); }
/* Фаза 52 (правка темы «Стычки отрядов»): пользователь сообщил, что весь SPA-слой Стычки
отрядов (не только новый Зал Гримуара/Экспедиции Части E-F, а вообще все экраны -- выбор
режима, сборка колоды, коллекция карт, результат боя) визуально выбивается фиолетово-синей
палитрой `--lc-*` на фоне тёплой коричнево-янтарной темы остальной игры (Реликварий/
Мастерская/т.д.). Правка №1 (только Гримуар/Экспедиции) была отменена и расширена этим
append-only блоком по прямому уточнению пользователя в этой сессии: перекрашиваем ВЕСЬ
`.lane-clash-screen`/`.lane-clash-grimoire-screen` целиком, переопределяя сами переменные
`--lc-*` на тёплые эквиваленты (см. `--workshop-*` в шапке файла) вместо переписывания
каждого правила по отдельности -- ничего выше не редактируется, значения переменных внутри
исходного `:root` (строки ~6856-6860) остаются как есть для любого другого потребителя.
Редкости карт (`--lc-rarity-*`) НЕ трогаем -- это функциональная маркировка, не тема экрана.
Собственный инлайн-CSS движков боя (concept-b/c-pro-v2 внутри iframe) не переопределяется --
вне зоны действия этого блока (iframe -- отдельный документ). */
.lane-clash-screen,
.lane-clash-grimoire-screen {
--lc-bg: #1b130c;
--lc-panel: var(--workshop-card, rgba(37, 26, 21, .86));
--lc-panel-deep: var(--workshop-card-2, rgba(20, 14, 11, .7));
--lc-line: var(--workshop-line, rgba(214, 150, 90, .22));
--lc-ink: var(--workshop-text, #f3e6d8);
--lc-muted: var(--workshop-muted, #b9a08d);
--lc-violet: var(--workshop-gold, #ffcf6b);
--lc-violet-2: var(--workshop-amber-2, #d9862f);
--lc-gold: var(--workshop-gold, #ffcf6b);
}
/* Тумблер «Питомец / Стычка отрядов» (`.collection-subtabs`, общий компонент) уже читает
`--lc-violet`/`--lc-violet-2` -- но лежит СНАРУЖИ `.lane-clash-grimoire-screen` (сосед в общей
панели overlayWrapper()), поэтому переопределение выше до него не доходит по каскаду. Скоупим
через `:has()` строго на состояние "открыта вкладка Стычка отрядов" (кнопка с этим
data-атрибутом получает .active только в этом состоянии) -- панель питомца не затрагивается. */
.collection-subtabs:has(.collection-subtab-btn.active[data-collection-subtab="lane_clash"]) {
--lc-violet: var(--workshop-gold, #ffcf6b);
--lc-violet-2: var(--workshop-amber-2, #d9862f);
}
.collection-subtabs:has(.collection-subtab-btn.active[data-collection-subtab="lane_clash"]) .collection-subtab-btn.active {
color: #201405;
box-shadow: 0 6px 14px rgba(217, 134, 47, .35);
}
/* Активная под-вкладка "Карты"/"Зал Гримуара"/"Экспедиции" рендерится тем же общим классом
`.arena-tab-btn`, что и питомец -- но у общей арена-темы (`.arena-equipment-tabs.tabs
.arena-tab-btn.active`, циан) на одну вложенную группу классов больше и она перебивает тёплое
правило `.equip-sub-tabs .arena-tab-btn.active` по специфичности CSS, даже в контексте Стычки
отрядов. Скоупим по data-lane-clash-subtab (используется только в разметке Стычки отрядов,
never на вкладках питомца, см. laneClashSubTabsHtml() в app.js) с специфичностью выше исходной
циановой арена-темы, чтобы гарантированно победить её именно здесь, не трогая вкладки питомца. */
.equip-sub-tabs:has([data-lane-clash-subtab]) .arena-tab-btn.active {
background: var(--workshop-gold, #ffcf6b);
color: #201405;
border-color: transparent;
}
.equip-sub-tabs:has([data-lane-clash-subtab]) .arena-tab-btn:not(.active) {
background: var(--surface-2, #242b38);
color: var(--muted, #9da7b8);
border-color: var(--workshop-line, rgba(255,255,255,.12));
}
/* Фаза 52 (доп. фикс темы): модалка капсулы Реликвария/Гримуара (append-only). Класс
.reliquary-capsule-modal уникален для этой модалки и используется ОБА раза -- и для
капсул питомца (Часть C), и для капсул карт-заклинаний (Часть F/Гримуар) -- поэтому один
этот блок правит обе версии сразу. Раньше модалка наследовала общий .panel.arena-panel
(серо-синий градиент + голубая рамка arena-line), никак не связанный с тёплой темой
Реликвария/Гримуара -- теперь у неё тёплый тёмно-коричневый фон с янтарной рамкой, как в
прототипе qa/13_desktop_capsule_preopen_modal.png. */
.reliquary-capsule-modal {
background: radial-gradient(120% 140% at 50% -10%, rgba(255, 154, 61, .16), transparent 55%),
linear-gradient(165deg, var(--workshop-surface-2, #2e1f18), var(--workshop-bg-2, #241713));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
clip-path: none;
box-shadow: inset 0 1px rgba(255, 207, 107, .1), 0 12px 28px rgba(0, 0, 0, .45);
}
.reliquary-capsule-modal .panel-title h2 {
color: var(--workshop-gold, #ffcf6b);
}
.reliquary-capsule-modal .panel-title .icon-button {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-parchment, #e8d9b8);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.reliquary-capsule-modal .arena-note {
color: var(--workshop-muted, #b9a08d);
}
.reliquary-capsule-modal .reliquary-chance-row {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
color: var(--workshop-parchment, #e8d9b8);
}
.reliquary-capsule-modal .reliquary-chance-row b {
color: var(--workshop-gold, #ffcf6b);
}
.reliquary-capsule-modal .grimoire-btn.ghost {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-parchment, #e8d9b8);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
box-shadow: none;
}
.reliquary-capsule-modal .grimoire-btn.ghost:not(:disabled):hover {
border-color: var(--workshop-gold, #ffcf6b);
color: var(--workshop-gold, #ffcf6b);
}
/* Фаза 53 (append-only): экран «Мастерская» переиспользует .grimoire-grid/.reliquary-hall-grid
вне их старых обёрток (.arena-equipment.equip-content / .lane-clash-grimoire-grid /
.reliquary-hall-screen / .reliquary-expedition-screen), поэтому их правила display:grid не
попадают под старые селекторы. Скоупим те же значения на новые классы-обёртки Мастерской,
ничего в исходных правилах не меняя. */
/* Фаза 85 (п.1, фикс по фидбеку): по требованию пользователя вернули компактную ГОРИЗОНТАЛЬНО-
СКРОЛЛИРУЕМУЮ ленту (как старый .ws-equip-grid) ВМЕСТО CSS-грида Фазы 84 (2 моб./4 десктоп) --
тот грид делал плитки слишком большими. Визуальное наполнение самой плитки (арт на всю плитку,
скрим, бейджи, нижний оверлей -- см. .master-craft-tile ниже) остаётся без изменений, меняется
только контейнер и фиксированная ширина плитки. */
.master-craft-cards-grid.grimoire-grid {
display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; margin-bottom: 16px;
padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.master-craft-cards-grid.grimoire-grid::-webkit-scrollbar { display: none; }
/* Фаза 84 (п.2): полностью новая плитка карты Мастерской -- арт на всю плитку (как боевая карта
в Коллекции/Стычке отрядов), а не иконка+текст старого .ws-equip-card. Копирует композицию
.grimoire-deck-slot-filled (слот колоды): изображение object-fit:cover абсолютно на всю плитку,
тёмный скрим снизу для читаемости, мана/уровень -- ромбы в верхних углах, название + статус/
прогрессбар -- нижний оверлей поверх скрима. .master-craft-source-badge (кот/искра, левый верхний
угол) поверх арта -- т.к. плитка теперь сама position:relative, отдельная обёртка не нужна.
Фаза 85 (п.1): ширина стала фиксированной (компактная плитка ленты) вместо width:100% (ячейка
грида) -- см. комментарий выше про возврат к горизонтальному скроллу. */
.master-craft-tile {
position: relative; display: block; flex: 0 0 112px; width: 112px; aspect-ratio: 3/4; border-radius: 14px; padding: 0;
overflow: hidden; cursor: pointer; text-align: left; min-width: 0;
border: 1.5px solid var(--rarity-color, var(--lc-line, rgba(214,150,90,.3)));
background: linear-gradient(165deg, var(--rarity-soft, rgba(157,180,201,.14)) 0%, rgba(10,7,5,.55) 78%);
box-shadow: 0 0 0 1px var(--rarity-soft, transparent) inset, 0 10px 22px rgba(0,0,0,.3);
}
@media (max-width: 479px) {
.master-craft-tile { flex-basis: 98px; width: 98px; }
}
.master-craft-tile.master-craft-tile--active { box-shadow: 0 0 0 2px var(--workshop-gold, #ffcf6b), 0 10px 22px rgba(0,0,0,.3); }
.master-craft-tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.master-craft-tile-scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(4,8,14,.94) 0%, rgba(4,8,14,.55) 55%, transparent 100%);
}
.master-craft-tile .master-craft-source-badge { top: 4px; left: 4px; width: 20px; height: 20px; z-index: 3; }
/* Ромбы маны/уровня -- та же геометрия, что и .lane-clash-card-tile/.grimoire-deck-slot-filled
(см. style.css выше), но правый верхний угол зарезервирован под уровень, левый -- под источник
(кот/искра), поэтому мана (только у заклинаний) смещена чуть правее источника, а не в самый угол. */
.master-craft-tile .card-mana-badge {
position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 6px; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ff8fd6, #9a4fe0); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.master-craft-tile .card-mana-badge span { display: block; transform: rotate(-45deg); font-size: 9px; font-weight: 900; color: #fff; }
.master-craft-tile .card-tile-level-diamond {
position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 6px; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 35% 30%, #ffe29a, #d9862f); border: 2px solid rgba(255,255,255,.5);
transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.master-craft-tile .card-tile-level-diamond span { display: block; transform: rotate(-45deg); font-size: 9px; font-weight: 900; color: #3a2205; }
.master-craft-tile-bottom { position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.master-craft-tile-name {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;
font-size: 10px; font-weight: 800; line-height: 1.15; max-height: 2.3em;
color: #f2f8ff; text-align: center; overflow: hidden; word-break: break-word;
text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.master-craft-tile-status {
display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%;
font-size: 8.5px; font-weight: 700; color: var(--workshop-muted, #b8a9a0); text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.master-craft-tile-status .ws-equip-mini-icon { width: 10px; height: 10px; flex-shrink: 0; }
.master-craft-tile-status .ws-icon.is-ready, .master-craft-tile-status svg.is-ready { color: var(--workshop-green, #7ee5ad); }
.master-craft-tile.ws-equip-card--ready .master-craft-tile-status { color: var(--workshop-green, #7ee5ad); }
.master-craft-tile.ws-equip-card--max .master-craft-tile-status { color: var(--workshop-gold, #ffcf6b); }
.master-craft-tile .ws-equip-heatbar { display: block; width: 100%; height: 4px; border-radius: 999px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 1px; }
.master-craft-tile .ws-equip-heatbar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--workshop-gold, #ffcf6b), var(--workshop-amber, #ff9f43)); }
.master-craft-tile .ws-equip-heatbar-fill--keeper { background: linear-gradient(90deg, #7ee5ad, #3fb87a); }
/* --rarity-color/--rarity-soft задаются инлайн-стилем из workshopRarityColor()/workshopRaritySoft() (тот
же источник, что и у старого .ws-equip-card) -- отдельные .rarity-* классы не нужны, т.к.
инлайн всегда их перекрывает; класс rarity-${rarity} на кнопке оставлен только для
семантики/отладки (как у .lane-clash-card-tile.rarity-*). */
.master-craft-hall-block .reliquary-hall-grid { display: grid; gap: 8px; margin: 12px 0; }
.master-craft-hall-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) {
.master-craft-hall-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.master-craft-hall-block { min-width: 0; }
/* Фаза 53.4 (Задача 3): объединённый Зал -- один блок вместо двух колонок, поэтому на десктопе
отключаем 2-колоночную сетку выше (оставляла бы пустой второй трек) и расширяем внутреннюю
сетку осколков до большего числа колонок на широких экранах, чтобы объединённая сетка не
выглядела узкой колонкой посреди пустого места. */
.master-craft-hall-columns.single-column { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
@media (min-width: 720px) {
.master-craft-hall-columns.single-column { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
.master-craft-hall-unlock-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
@media (min-width: 480px) {
.master-craft-hall-unlock-row { flex-direction: row; }
.master-craft-hall-unlock-row .reliquary-unlock-btn, .master-craft-hall-unlock-row .arena-note { flex: 1 1 0; }
}
.reliquary-hall-toolbar { flex-wrap: wrap; }
.master-craft-expedition-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) {
.master-craft-expedition-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.master-craft-expedition-block { min-width: 0; }
.master-craft-expedition-block .reliquary-expedition-card { min-width: 0; }
.master-craft-expedition-block .reliquary-expedition-info { min-width: 0; }
.master-craft-card-wrap { position: relative; }
.master-craft-source-badge { position: absolute; top: 6px; left: 6px; z-index: 2; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--workshop-card-2, rgba(20, 14, 11, .7)); border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22)); color: var(--workshop-gold, #ffcf6b); pointer-events: none; }
.master-craft-source-badge .misc-icon { width: 13px; height: 13px; }
/* Компактные карточки резонанса в новой Мастерской переиспользуют .ws-equip-icon (см. .ws-root .ws-equip-icon
в блоке старой закалки выше), но карты питомца рендерятся через petArtHtml() -- составной .pet-layers
(position:relative без явного размера), а не одиночный ![]()
-- без этого правила слои были невидимы
(0x0), т.к. ни одно существующее правило .pet-layers не скоуплено на .ws-equip-icon. */
.ws-root .ws-equip-icon .pet-layers { position: relative; width: 100%; height: 100%; }
.ws-root .ws-equip-icon .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Заголовок выбранной карты в верхней панели резонанса (эталон -- .ws-active-summary из workshopHeroScreen()) --
.master-craft-selected-icon переиспользует тот же .icon-frame-wrap, что и старый эквип-тайминг, но карты
питомца рендерятся через составной .pet-layers, которому, как и выше, нужен явный размер. */
.ws-root .master-craft-selected-icon { width: 64px; height: 64px; }
.ws-root .master-craft-selected-icon .pet-layers { position: relative; width: 100%; height: 100%; }
.ws-root .master-craft-selected-icon .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Активные под-вкладки «Мастерской» (Карты/Зал/Экспедиции) используют тот же .arena-tab-btn, что
и общая арена-тема (циан) -- по той же причине специфичности, что описано выше для
Стычки отрядов, скоупим тёплую тему по data-workshop-subtab. */
.equip-sub-tabs:has([data-workshop-subtab]) .arena-tab-btn.active {
background: var(--workshop-gold, #ffcf6b);
color: #201405;
border-color: transparent;
}
.equip-sub-tabs:has([data-workshop-subtab]) .arena-tab-btn:not(.active) {
background: var(--surface-2, #242b38);
color: var(--muted, #9da7b8);
border-color: var(--workshop-line, rgba(255,255,255,.12));
}
/* Переключатель Основной питомец/Компаньон в Мастерской (petTabs в masterCraftCardsView()) использует
те же .pet-tabs-wrap/.pet-tabs/.pet-tab, что и equipmentView(), но вне .arena-equipment.equip-content --
дублируем те же значения на .master-craft-screen. */
.master-craft-screen .pet-tabs-wrap { position: relative; margin: 0 -2px 12px; }
.master-craft-screen .pet-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 2px 4px; scrollbar-width: none; }
.master-craft-screen .pet-tabs::-webkit-scrollbar { display: none; }
.master-craft-screen .pet-tab {
flex: 0 0 auto; display: flex; align-items: center; gap: 6px; border: 1px solid var(--workshop-line);
color: var(--workshop-muted); background: var(--workshop-card-2); padding: 8px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; font-family: 'Manrope', 'Inter', sans-serif; cursor: pointer; white-space: nowrap; min-height: 0;
}
.master-craft-screen .pet-tab svg { width: 14px; height: 14px; flex: 0 0 auto; }
.master-craft-screen .pet-tab.active { color: #2a140a; background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-amber-2)); border-color: var(--workshop-gold-2); font-weight: 800; }
/* Фаза 53.1 (Фикс A, баг из прод-теста): кнопка «Резонировать»/«Автослияние»/«Открыть всё»/«Забрать»
и панель резонанса теряли все стили в новой «Мастерской», т.к. .grimoire-btn/.resonance-panel/
.keeper-roster-* были заскоуплены только под .arena-equipment.equip-content (питомец) и
.lane-clash-grimoire-screen (заклинания) -- ни один из этих классов не встречается в разметке
.ws-root.master-craft-screen. Дублируем те же правила (append-only, исходные блоки не трогаем)
под .master-craft-screen, тёплая (workshop) палитра общая для обеих колонок Мастерской. */
.master-craft-screen .grimoire-reform-btn,
.master-craft-screen .grimoire-btn {
font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 12px; color: #2a140a; cursor: pointer; min-height: 0;
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
border: 1px solid var(--workshop-gold-2); border-radius: 999px; padding: 10px 14px; box-shadow: 0 4px 10px rgba(0,0,0,.3);
display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; line-height: 1.3;
}
.master-craft-screen .grimoire-btn.small { padding: 7px 11px; font-size: 10.5px; }
.master-craft-screen .grimoire-btn.ghost { background: var(--workshop-card-2); color: var(--workshop-parchment); border-color: var(--workshop-line); box-shadow: none; }
.master-craft-screen .grimoire-btn:disabled,
.master-craft-screen .grimoire-reform-btn:disabled { opacity: .4; cursor: not-allowed; }
.master-craft-screen .grimoire-btn.primary { background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-amber-2)); }
.master-craft-screen .resonance-panel {
border-radius: 18px; padding: 13px 14px; margin-bottom: 14px; background: var(--workshop-card); border: 1px solid var(--workshop-gold-2);
box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.heat-session {
margin-top: 10px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.heat-session .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff9a3d;
box-shadow: 0 0 6px #ff9a3d;
}
.master-craft-screen .resonance-panel .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.master-craft-screen .resonance-panel h2 { margin: 0; font-family: 'Cinzel', 'Georgia', serif; font-size: 13px; color: var(--workshop-parchment); }
.master-craft-screen .resonance-panel .card-rarity-fill-wrap { margin: 4px 0 4px; height: 14px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 170, 90, .22);}
.master-craft-screen .resonance-panel > .grimoire-btn { width: 100%; margin-top: 14px; }
.master-craft-screen .keeper-roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 2px; }
.master-craft-screen .keeper-roster-tile {
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; cursor: pointer;
background: var(--workshop-card-2); border: 1.5px solid var(--workshop-line); color: var(--workshop-text); font-size: 9.5px; font-weight: 700; text-align: center; min-height: 0;
}
.master-craft-screen .keeper-roster-tile:hover { border-color: var(--workshop-gold); }
.master-craft-screen .keeper-roster-tile:disabled { opacity: .45; cursor: not-allowed; }
/* Панель заголовка выбранной карты (master-craft-selected-head/.ws-active-summary) -- в отличие от
старого workshopHeroScreen(), где .ws-hero-card рисовал фон-картинку предмета за спиной, здесь
отдельная непрозрачная карточка нужна явно (эталон -- панель "Железный меч" со скриншота
старой закалки), иначе иконка+название висят прямо на городском фоне экрана без рамки. */
.master-craft-screen .master-craft-selected-head.ws-hero-card {
min-height: 0; background: var(--workshop-card); border: 1px solid var(--workshop-line); border-radius: 18px;
box-shadow: 0 14px 28px rgba(0,0,0,.3); margin-bottom: 12px;
}
.master-craft-screen .master-craft-selected-head .ws-active-summary { padding: 13px; margin: 0; }
.master-craft-screen .master-craft-selected-head .badge {
display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--workshop-gold); background: var(--workshop-card-2); border: 1px solid var(--workshop-line);
border-radius: 999px; padding: 3px 9px; margin-bottom: 4px;
}
.master-craft-screen .master-craft-selected-head h2 { color: var(--workshop-text); }
.master-craft-screen .resonance-panel--empty { background: var(--workshop-card-2); border: 1px dashed var(--workshop-line); box-shadow: none; }
/* Фаза 53.4 (Задача 2а, фикс регрессии): объединённая карточка резонанса выглядела
нестилизованной (image-2.jpg). Причина: в Фазе 53.1 выше CSS писался под СТАРУЮ
разметку, где заголовок выбранной карты рисовался отдельным блоком .master-craft-selected-head >
.ws-active-summary СНАРУЖИ панели резонанса. В Фазе 53.3 разметка была переписана --
заголовок теперь рисуется masterCraftResonanceHeadHtml() ПРЯМО ВНУТРИ .resonance-panel через НОВЫЕ
классы (.master-craft-resonance-head/-badges/-row/-label/-percent/-divider, см. app.js), но
соответствующий CSS так и не был добавлен -- старый блок выше ссылается на классы,
которых больше нет в DOM, поэтому ни одно правило из него не применяется. Ниже -- новый
append-only блок под ФАКТИЧЕСКИ используемые классы (старый блок выше не удаляется/не
меняется, он просто больше никогда не совпадает с разметкой). Эталон -- image-3.jpg: портрет
слева, название/редкость/уровень/статы справа от портрета, строка «РЕЗОНАНС» слева +
процент справа на одной строке. */
.master-craft-resonance-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.master-craft-resonance-head h2 {
margin: 0 0 4px; font-family: 'Cinzel', 'Georgia', serif; font-size: 15px; color: var(--workshop-parchment, #f1e4c8); line-height: 1.25;
}
.master-craft-resonance-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.master-craft-resonance-badges .badge {
display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--workshop-gold, #ffcf6b); background: var(--workshop-card-2, #241a10); border: 1px solid var(--workshop-line, rgba(214,150,90,.22));
border-radius: 999px; padding: 3px 9px;
}
.master-craft-resonance-divider { height: 1px; margin: 10px 0; background: var(--workshop-line, rgba(214,150,90,.18)); border: none; }
.master-craft-resonance-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0px; }
.master-craft-resonance-label {
font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--workshop-parchment, #f1e4c8);
}
.master-craft-resonance-percent { font-size: 14px; font-weight: 800; color: var(--workshop-gold, #ffcf6b); }
.master-craft-hire-btn { width: 100%; }
/* masterCraftStatsRowHtml() -- строка статов под заголовком объединённой карточки -- фактические классы
из app.js: .master-craft-stat-row/.master-craft-stat-pill (единственное число "stat", не "stats") -- тоже
без собственного CSS до этой правки. */
.master-craft-stat-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.master-craft-stat-pill {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; font-size: 9.5px; font-weight: 700;
letter-spacing: .03em; text-transform: uppercase; color: var(--workshop-muted, #b8a684);
background: var(--workshop-card-2, #241a10); border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
}
.master-craft-stat-pill b { font-size: 11px; color: var(--workshop-parchment, #f1e4c8); text-transform: none; letter-spacing: 0; }
/* Фаза 53.4 (Задача 2б, фикс регрессии): тумблер «Питомцы / Заклинания» (фильтр сетки
карт в masterCraftCardsView(), классы .master-craft-pill-toggle.master-craft-cards-type-toggle,
data-master-craft-cards-type) рендерился обычным текстом без pill-оформления (image-2.jpg).
Причина: существующий pill-CSS скоуплен только под два других конкретных класса -- верхний
.master-pill-tabs (табы Карты/Зал/Экспедиции) и .master-craft-cards-subtabs (Карты/Реформация) --
ни один из них не совпадает с классами тумблера Питомцы/Заклинания, поэтому он оставался
совершенно без стилей. Тот же pill-паттерн, что и у .master-craft-cards-subtabs выше. */
.master-craft-cards-type-toggle {
background: var(--workshop-card-2); border: 1px solid var(--workshop-line); border-radius: 999px;
padding: 4px; margin: 4px 0 12px; display: flex; gap: 2px;
}
.master-craft-cards-type-toggle button {
flex: 1; padding: 9px 10px; border-radius: 999px; border: none; background: transparent;
color: var(--workshop-muted); font-family: 'Manrope', 'Inter', sans-serif; font-size: 12px;
font-weight: 700; cursor: pointer; transition: background .15s, color .15s;
}
.master-craft-cards-type-toggle button.active {
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
color: #2a140a; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
/* Фаза 53.4 (Задача 2в, фикс регрессии): модалка «Нанять Хранителя» (keeperHireModalHtml(),
классы .modal-overlay.keeper-hire-modal-overlay > .panel.arena-panel.keeper-hire-modal) встраивалась в
конец страницы под карточками вместо оверлея (image-6.jpg), с огромным изображением,
вылезающим за экран. Причина: общий класс .modal-overlay, используемый в разметке, НИГДЕ не
определён в CSS -- стилизованы только конкретные варианты (.lane-clash-modal-overlay,
.reliquary-capsule-modal-overlay), а .keeper-hire-modal-overlay своего правила тоже не имел -- без
position:fixed оверлей рендерился как обычный блоковый элемент в потоке документа. Тот же
паттерн, что и у рабочей модалки капсул (.reliquary-capsule-modal-overlay/.reliquary-capsule-modal). */
.keeper-hire-modal-overlay { position: fixed; inset: 0; background: rgba(6,8,12,.72); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.keeper-hire-modal { max-width: 360px; width: 100%; max-height: 82vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.keeper-hire-subtitle { margin: 0; }
.keeper-hire-list { display: flex; flex-direction: column; gap: 8px; }
.keeper-hire-row {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
background: var(--workshop-card-2, #241a10); border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
}
.keeper-hire-avatar {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--workshop-card, #1c130c);
border: 1.5px solid var(--workshop-gold-2, #c98a3d);
}
.keeper-hire-avatar img { width: 100%; height: 100%; object-fit: cover; }
.keeper-hire-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.keeper-hire-info b { font-size: 12.5px; color: var(--workshop-parchment, #f1e4c8); }
.keeper-hire-info small { font-size: 10.5px; color: var(--workshop-muted, #b8a684); }
.keeper-hire-price-btn {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--workshop-gold-2, #c98a3d);
background: linear-gradient(180deg, var(--workshop-gold, #ffcf6b), var(--workshop-amber-2, #e08a2e)); color: #241a04; font-weight: 800; font-size: 11.5px; cursor: pointer;
}
@media (max-width: 420px) {
.keeper-hire-avatar { width: 36px; height: 36px; }
}
/* Фаза 87: модалка распределения резонанса (statAllocModalHtml()) -- тот же паттерн
modal-overlay/panel arena-panel, что и у .keeper-hire-modal выше (position:fixed обязателен,
иначе оверлей рендерится в потоке документа, см. комментарий к Fixed выше). z-index чуть
выше keeper-hire-modal-overlay, т.к. открывается поверх неё (оба одновременно не открыты по state,
но порядок в DOM держим строгим). */
.stat-alloc-modal-overlay { position: fixed; inset: 0; background: rgba(6,8,12,.72); display: flex; align-items: center; justify-content: center; z-index: 61; padding: 16px; }
.stat-alloc-modal { max-width: 380px; width: 100%; max-height: 86vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.stat-alloc-subtitle { margin: 0; }
.stat-alloc-list { display: flex; flex-direction: column; gap: 8px; }
.stat-alloc-row {
display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px;
padding: 9px 10px; border-radius: 12px; background: var(--workshop-card-2, #241a10);
border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
}
.stat-alloc-label { grid-column: 1; grid-row: 1; align-self: center; font-size: 12.5px; color: var(--workshop-parchment, #f1e4c8); font-weight: 700; }
.stat-alloc-controls { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.stat-alloc-btn {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--workshop-gold-2, #c98a3d);
background: var(--workshop-card, #1c130c); color: var(--workshop-gold, #ffcf6b); font-size: 15px; font-weight: 800;
line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.stat-alloc-btn:disabled { opacity: .35; cursor: not-allowed; }
.stat-alloc-value { min-width: 40px; text-align: center; font-size: 13px; font-weight: 800; color: var(--workshop-parchment, #f1e4c8); }
/* Фаза 96 (баг 6): кнопка MAX -- один клик отдаёт всю ось этому стату, остальные обнуляются. */
.stat-alloc-max-btn {
flex: 0 0 auto; height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--workshop-gold-2, #c98a3d);
background: var(--workshop-card, #1c130c); color: var(--workshop-gold, #ffcf6b); font-size: 10.5px; font-weight: 800;
letter-spacing: .03em; cursor: pointer; line-height: 1;
}
.stat-alloc-max-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Фаза 97 (багфикс, п.3 брифа): зеркальная кнопка MIN слева от Р-кнопки -- обнуляет ось одним кликом. */
.stat-alloc-min-btn {
flex: 0 0 auto; height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--workshop-gold-2, #c98a3d);
background: var(--workshop-card, #1c130c); color: var(--workshop-gold, #ffcf6b); font-size: 10.5px; font-weight: 800;
letter-spacing: .03em; cursor: pointer; line-height: 1;
}
.stat-alloc-min-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Фаза 96 (баг 6): реальный перетаскиваемый слайдер вместо статичного прогресс-бара -- заменяет
.stat-alloc-bar-wrap/.stat-alloc-bar. Нативный range со стилизованным треком/ползунком, чтобы
визуально не отличаться от прежнего золотого прогресс-бара. */
.stat-alloc-slider {
grid-column: 1 / span 2; grid-row: 2; width: 100%; height: 18px; margin: 0; padding: 0;
-webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
/* Фаза 97 (багфикс, п.3 брифа): --stat-fill пробрасывается инлайно на самом input (см. app.js
statAllocModalHtml()) и обновляется на лету при драге ('input'-событие) -- как CSS custom
property она наследуется псевдоэлементами трека ниже без перестройки DOM. */
--stat-fill: 0%;
}
/* Раньше трек был однотонным -- видна была только точка-ползунок, без заливки слева
от него. Теперь двухцветный linear-gradient с жёсткими стопами на --stat-fill рисует "залитую"
часть трека золотым, как у прежнего статичного прогресс-бара. */
.stat-alloc-slider::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px;
background: linear-gradient(to right,
var(--workshop-gold, #ffcf6b) 0%, var(--workshop-gold, #ffcf6b) var(--stat-fill, 0%),
rgba(255,255,255,.08) var(--stat-fill, 0%), rgba(255,255,255,.08) 100%);
}
.stat-alloc-slider::-moz-range-track {
height: 6px; border-radius: 999px; background: rgba(255,255,255,.08);
}
.stat-alloc-slider::-moz-range-progress {
height: 6px; border-radius: 999px 0 0 999px; background: var(--workshop-gold, #ffcf6b);
}
.stat-alloc-slider::-webkit-slider-thumb {
-webkit-appearance: none; margin-top: -6px; width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(90deg, var(--workshop-amber-2, #e08a2e), var(--workshop-gold, #ffcf6b));
border: 2px solid var(--workshop-card, #1c130c); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.stat-alloc-slider::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--workshop-card, #1c130c);
background: linear-gradient(90deg, var(--workshop-amber-2, #e08a2e), var(--workshop-gold, #ffcf6b));
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.stat-alloc-sum-row { display: flex; align-items: center; gap: 8px; }
.stat-alloc-sum {
flex: 1 1 auto; text-align: center; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 10px;
background: var(--workshop-card-2, #241a10); border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
}
.stat-alloc-sum.ok { color: #7be08a; border-color: rgba(123,224,138,.4); }
.stat-alloc-sum.warn { color: #ffb85c; border-color: rgba(255,184,92,.4); }
/* Фаза 96 (баг 6): кнопка полного сброса всех осей в 0 рядом со счётчиком суммы. */
.stat-alloc-reset-btn {
flex: 0 0 auto; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
background: var(--workshop-card-2, #241a10); color: var(--workshop-muted, #b9a08d); font-size: 12px; font-weight: 700; cursor: pointer;
}
.stat-alloc-reset-btn:disabled { opacity: .4; cursor: not-allowed; }
.stat-alloc-confirm-btn { width: 100%; }
.stat-alloc-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) {
.stat-alloc-row { grid-template-columns: 72px 1fr; }
.stat-alloc-label { font-size: 11.5px; }
/* Фаза 97 (багфикс, п.3 брифа): с пятью кнопками (MIN/−/значение/+/MAX) ряд перестает
на узких экранах -- сужаем зазоры и gap, чтобы всё поместилось в одну строку. */
.stat-alloc-controls { gap: 4px; }
.stat-alloc-btn { width: 22px; height: 22px; font-size: 13px; }
.stat-alloc-min-btn, .stat-alloc-max-btn { padding: 0 5px; font-size: 9.5px; height: 22px; }
.stat-alloc-value { min-width: 30px; font-size: 12px; }
}
/* Фаза 87.1: .stat-alloc-modal наследовал общий .panel.arena-panel (серо-синий градиент + голубая
рамка arena-line из арены боя), никак не связанный с тёплой темой Мастерской/Реликвария, где живёт
найм Хранителя -- тот же паттерн переопределения, что и .reliquary-capsule-modal/.keeper-collect-modal
выше по файлу. Плюс стили превью-строки "было -> станет" (statAllocPreviewRowHtml()). */
.stat-alloc-modal {
background: radial-gradient(120% 140% at 50% -10%, rgba(255, 154, 61, .16), transparent 55%),
linear-gradient(165deg, var(--workshop-surface-2, #2e1f18), var(--workshop-bg-2, #241713));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
clip-path: none;
box-shadow: inset 0 1px rgba(255, 207, 107, .1), 0 12px 28px rgba(0, 0, 0, .45);
}
.stat-alloc-modal .panel-title h2 {
color: var(--workshop-gold, #ffcf6b);
}
.stat-alloc-modal .panel-title .icon-button {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-parchment, #e8d9b8);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-modal .arena-note {
color: var(--workshop-muted, #b9a08d);
}
.stat-alloc-modal .stat-alloc-row { background: transparent; }
.stat-alloc-modal .stat-alloc-label { color: var(--workshop-parchment, #e8d9b8); }
.stat-alloc-modal .stat-alloc-value { color: var(--workshop-gold, #ffcf6b); }
.stat-alloc-modal .stat-alloc-btn {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-parchment, #e8d9b8);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-modal .stat-alloc-max-btn {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-gold, #ffcf6b);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-modal .stat-alloc-min-btn {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-gold, #ffcf6b);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
/* Фаза 97 (багфикс, п.3 брифа): раньше этот переопределялил трек однотонным цветом, затирая градиент
заливки из базового правила выше -- теперь тот же двухцветный градиент на --stat-fill,
только с цветом незаполненной части под тёмную тему модалки Мастерской. */
.stat-alloc-modal .stat-alloc-slider::-webkit-slider-runnable-track {
background: linear-gradient(to right,
var(--workshop-gold, #ffcf6b) 0%, var(--workshop-gold, #ffcf6b) var(--stat-fill, 0%),
var(--workshop-card, rgba(20, 14, 11, .5)) var(--stat-fill, 0%), var(--workshop-card, rgba(20, 14, 11, .5)) 100%);
}
.stat-alloc-modal .stat-alloc-slider::-moz-range-track { background: var(--workshop-card, rgba(20, 14, 11, .5)); }
.stat-alloc-modal .stat-alloc-slider::-moz-range-progress { background: var(--workshop-gold, #ffcf6b); }
.stat-alloc-modal .stat-alloc-sum {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-modal .stat-alloc-reset-btn {
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-muted, #b9a08d);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-preview-row {
display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 10px; border-radius: 10px; margin-bottom: 2px;
background: var(--workshop-card-2, rgba(20, 14, 11, .7)); border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.stat-alloc-preview-pill { color: var(--workshop-muted, #b9a08d); }
.stat-alloc-preview-pill b { color: var(--workshop-parchment, #e8d9b8); font-weight: 700; }
.stat-alloc-preview-pill.changed b { color: var(--workshop-gold, #ffcf6b); }
.stat-alloc-preview-arrow { color: var(--workshop-amber-2, #e08a2e); font-weight: 700; }
/* Фаза 53.1 (Фикс B, баг из прод-теста): вкладка «Экспедиции» расходилась с концептом (image-4):
.master-craft-expedition-block рендерился без фона/границы (только min-width:0), из-за чего
городской фон экрана просвечивал сквозь промежутки между карточками; кнопка «Отправить»
была зелёной (.reliquary-expedition-action использует var(--accent) глобально -- оставляем как
есть для любых других вхождений этого компонента, перекрашиваем только в скоупе Мастерской).
Инфо-блок внизу списка -- новый элемент .master-craft-expedition-info (добавлен в app.js). */
.master-craft-expedition-block {
background: var(--workshop-card); border: 1px solid var(--workshop-line); border-radius: 18px;
padding: 14px; box-shadow: 0 14px 28px rgba(0,0,0,.3);
}
.master-craft-expedition-block .panel-title.section-label { margin-bottom: 4px; }
.master-craft-expedition-block .panel-title.section-label h2 { color: var(--workshop-parchment); font-family: 'Cinzel', 'Georgia', serif; font-size: 14px; margin: 0; display: flex; align-items: center; gap: 6px; }
.master-craft-expedition-block .reliquary-expedition-card { background: var(--workshop-card-2); border-color: var(--workshop-line); }
.master-craft-expedition-block .reliquary-expedition-icon { background: rgba(255,255,255,.05); color: var(--workshop-gold); }
.master-craft-expedition-block .reliquary-expedition-name {
color: var(--workshop-text); white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; display: block;
}
.master-craft-expedition-block .reliquary-expedition-card { align-items: flex-start; }
.master-craft-expedition-block .reliquary-expedition-action { margin-top: 2px; }
.master-craft-expedition-block .reliquary-expedition-meta { color: var(--workshop-muted); }
.master-craft-expedition-block .reliquary-expedition-action {
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
color: #2a140a; border: 1px solid var(--workshop-gold-2); font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.master-craft-expedition-block .reliquary-expedition-action.is-running { background: var(--workshop-card-2); color: var(--workshop-muted); border-color: var(--workshop-line); box-shadow: none; }
.master-craft-expedition-block .reliquary-expedition-action.is-ready { background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-amber-2)); color: #241a04; box-shadow: 0 0 12px rgba(255,207,107,.45); }
.master-craft-expedition-info {
margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--workshop-card-2);
border: 1px solid var(--workshop-line); color: var(--workshop-muted); font-size: 11.5px; line-height: 1.5;
}
/* Фаза 53.1 (Фикс C): в концепте Зала (image-6) «Автослияние» -- золотая пилюля, «Открыть всё» --
фиолетовая; базовый .grimoire-btn.ghost из Фикса A даёт общий нейтральный вид --
здесь только enabled-состояние получает цвет, disabled остаётся серым (opacity .4 из Фикса A). */
.master-craft-screen [data-reliquary-auto-merge]:not(:disabled),
.master-craft-screen [data-grimoire-hall-auto-merge]:not(:disabled) {
background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-amber-2)); color: #241a04;
border-color: var(--workshop-gold-2); box-shadow: 0 4px 12px rgba(255, 200, 90, .25);
}
.master-craft-screen [data-reliquary-open-all]:not(:disabled),
.master-craft-screen [data-grimoire-hall-open-all]:not(:disabled) {
background: linear-gradient(180deg, #8a7bdc, #6a58c4); color: #fff;
border-color: #a396e8; box-shadow: 0 4px 12px rgba(120, 100, 220, .3);
}
/* Фаза 53.2 (Задача 2): pill-концепт главных вкладок Мастерской (Карты/Зал/Экспедиции), эталон --
image-3 (концепт). Раньше .equip-sub-tabs:has([data-workshop-subtab]) красил КАЖДУЮ кнопку как
отдельный прямоугольник (активная -- плоская жёлтая заливка на всю высоту, неактивные -- тёмные
прямоугольники с рамкой) -- эталон требует единый закруглённый тёмный трек-контейнер, внутри
которого только активная вкладка выделена отдельной скруглённой капсулой с оранжево-золотым
градиентом (тот же, что у .grimoire-btn/.reliquary-expedition-action из Фазы 53.1), а неактивные
-- просто текст без фона/рамки. Обёртка .master-pill-tabs выше по специфичности, чем старые
правила (три уровня вложенности вместо :has()), поэтому append-only без переписывания. */
.master-pill-tabs {
background: var(--workshop-card-2); border: 1px solid var(--workshop-line); border-radius: 999px;
padding: 4px; margin: 10px 0 4px;
}
.master-pill-tabs .equip-sub-tabs { display: flex; gap: 2px; margin: 0; padding: 0; }
.master-pill-tabs .equip-sub-tabs .arena-tab-btn {
flex: 1; padding: 9px 8px; border-radius: 999px; border: none; background: transparent;
color: var(--workshop-muted); font-family: 'Manrope', 'Inter', sans-serif; font-size: 12.5px;
font-weight: 700; cursor: pointer; transition: background .15s, color .15s; clip-path: none;
}
.master-pill-tabs .equip-sub-tabs .arena-tab-btn.active {
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
color: #2a140a; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
/* Тот же pill-паттерн для переключателя «Карты / Реформация» (нижняя пилюля на image-3),
Задача 2 (Фаза 53.2) -- новый локальный под-таб внутри вкладки Карт (см.
.master-craft-cards-subtabs в masterCraftCardsView()), переключает видимость сетки карт vs.
панели Реформации без запроса новых данных (обе секции уже строятся из имеющегося petData). */
.master-craft-cards-subtabs {
background: var(--workshop-card-2); border: 1px solid var(--workshop-line); border-radius: 999px;
padding: 4px; margin: 4px 0 14px; display: flex; gap: 2px;
}
.master-craft-cards-subtabs button {
flex: 1; padding: 10px 10px; border-radius: 999px; border: none; background: transparent;
color: var(--workshop-muted); font-family: 'Manrope', 'Inter', sans-serif; font-size: 12.5px;
font-weight: 700; cursor: pointer; transition: background .15s, color .15s;
}
.master-craft-cards-subtabs button.active {
background: linear-gradient(120deg, var(--workshop-ember), #ffb85c 45%, var(--workshop-gold));
color: #2a140a; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
/* Фаза 53.3: усиление визуального фидбека драга осколков Реликвария/Гримуара (Задача 5, эталон
image-6.jpg) -- источник перетаскивания приподнимается (scale up) и получает синее свечение рамки,
вместо прежнего малозаметного scale-down. Валидные цели уже подсвечивались зелёным (.drop-hint) --
усиливаем и их для чёткого контраста. Append-only, не переписывает правила выше. */
.reliquary-slot.dragging {
transform: scale(1.12) translateY(-4px);
box-shadow: 0 0 0 2px var(--accent-blue, #6cb6ff) inset, 0 0 16px 4px rgba(108,182,255,.65), 0 10px 18px rgba(0,0,0,.45);
border-color: var(--accent-blue, #6cb6ff);
z-index: 5;
}
.reliquary-slot.drop-hint {
box-shadow: 0 0 0 2px var(--accent, #7ee5ad) inset, 0 0 16px 4px rgba(126,229,173,.55);
transform: scale(1.04);
}
.reliquary-shard-hint-label {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
padding: 3px 9px;
border-radius: 999px;
background: var(--surface-2, #242b38);
border: 1px solid var(--workshop-gold, #ffcf6b);
color: var(--workshop-gold, #ffcf6b);
pointer-events: none;
z-index: 6;
}
.reliquary-slot.dragging .reliquary-shard-hint-label {
background: rgba(108,182,255,.18);
border-color: var(--accent-blue, #6cb6ff);
color: var(--accent-blue, #6cb6ff);
}
.reliquary-slot.drop-hint .reliquary-shard-hint-label {
background: rgba(126,229,173,.18);
border-color: var(--accent, #7ee5ad);
color: var(--accent, #7ee5ad);
}
/* Фаза 53.3: фикс -- полоса заполнения резонанса в объединённой карточке Мастерской
(.master-craft-screen .resonance-panel) была невидима, т.к. цвет .card-rarity-fill.rarity-*
был определён только для контекста .arena-equipment.equip-content (Экипировка), а трек
.card-rarity-fill-wrap в Мастерской получал пустой прозрачный фон заливки. Добавляем те же
цвета для универсального базового класса, чтобы полоса резонанса (эталон image-4.jpg/image-8.jpg)
отображалась во всех местах использования компонента. Append-only. */
.card-rarity-fill-wrap { width: 100%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.32); overflow: hidden; }
.card-rarity-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; background: #8a99a8; }
.card-rarity-fill.rarity-common { background: #8a99a8; }
.card-rarity-fill.rarity-rare { background: linear-gradient(90deg, #3d7fa8, #8ef7ff); }
.card-rarity-fill.rarity-epic { background: linear-gradient(90deg, #8a4fc9, #ff9bf0); }
.card-rarity-fill.rarity-legendary { background: linear-gradient(90deg, #d9a13a, #ffe29a); }
.card-rarity-fill.rarity-legendary { background: linear-gradient(90deg, #d8974a, #ffe6a1); }
/* Фаза 53.3 (доп.): стили плавающего клона осколка + «призрака» в исходной ячейке (эталон
image.jpg из инкубатора -- элемент увеличивается и следует за указателем поверх сетки, исходная
ячейка остаётся полупрозрачной). Append-only. */
.reliquary-slot.shard-ghost {
opacity: .38;
filter: grayscale(.15);
}
/* Фаза 53.3 (доп., фикс): исходная ячейка во время перетаскивания уже получает класс .dragging
от существующего render()-цикла (isDragSource) -- добавляем ей низкую непрозрачность
как у «призрака» (эталон image.jpg), пока настоящий плавающий клон находится поверх
в document.body. Сочетается с ранее добавленным свечением/подъёмом выше в этом файле --
просто добавляем opacity через append-only правило с тем же селектором. */
.reliquary-slot.dragging {
opacity: .4;
}
.shard-floating-clone {
pointer-events: none;
z-index: 999;
will-change: transform;
box-shadow: 0 0 0 2px var(--accent-blue, #6cb6ff) inset, 0 0 22px 8px rgba(108,182,255,.7), 0 14px 26px rgba(0,0,0,.5);
border-color: var(--accent-blue, #6cb6ff);
}
/* Фаза 53.4 (Задача 1, фикс регрессии): клон теперь создаётся из ![]()
(см. attachShardFloatingDrag()), а не из всей кнопки-ячейки -- переопределяем правило выше
(без border/фоновой плашки) более специфичным селектором .reliquary-slot-icon.shard-floating-clone,
чтобы плавающий клон был ЧИСТЫМ изображением осколка/капсулы без рамки и свечения ячейки, тот же
размер что и в исходной ячейке (inline left/top/width/height ставит сам JS). Append-only --
исходное правило .shard-floating-clone выше не удаляется/не меняется. */
.reliquary-slot-icon.shard-floating-clone {
position: fixed;
box-shadow: 0 6px 16px rgba(0,0,0,.45);
border: none;
border-radius: 0;
background: none;
filter: drop-shadow(0 0 10px rgba(108,182,255,.55));
}
/* Фаза 53.6 (Задача 3): описание эффекта спелл-карты внутри объединённой карточки резонанса
(masterCraftResonanceHeadHtml()/spellEffectDescriptionHtml()) -- заменяет ряд боевых
pill-статов (.master-craft-stat-row) для card_type='spell'. Append-only, новый блок. */
.master-craft-spell-effect {
margin-top: 10px;
padding: 10px 14px;
border-radius: 12px;
background: rgba(124, 92, 255, .12);
border: 1px solid rgba(124, 92, 255, .32);
}
.master-craft-spell-effect-label {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #c9a6ff;
margin-bottom: 4px;
}
.master-craft-spell-effect-text {
margin: 0;
font-size: .86rem;
line-height: 1.4;
color: var(--text-secondary, #cfd3e0);
}
.master-craft-spell-effect-text b {
color: #fff;
font-weight: 700;
}
/* Фаза 53.6 (задача 4): голубая живая полоса прогресса обработки карты Хранителем в
горизонтальном списке карт Мастерской -- заменяет статичную оранжевую полосу резонанса
(эталон image-5.jpg: голубой цвет + тикающий процент вместо застывшего "23:46"). */
.ws-root .ws-equip-heatbar--keeper { background: rgba(88, 179, 255, .16) !important; }
.ws-root .ws-equip-heatbar-fill--keeper { background: linear-gradient(90deg, #4fb3ff, #7fd4ff) !important; }
/* Фаза 53.6 (задача 5): полноэкранная панель резонанса карты, пока над ней работает Хранитель --
аватар хранителя + живой обратный отсчёт + кнопка "Забрать" задизейблена до готовности
(эталон image-7.jpg), взамен прежнего варианта без аватара/живого таймера/disabled-состояния. */
.master-craft-resonance-panel .master-craft-keeper-working {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .08);
}
.master-craft-keeper-working-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex: 0 0 auto;
background: rgba(0, 0, 0, .35);
display: flex;
align-items: center;
justify-content: center;
}
.master-craft-keeper-working-avatar img { width: 100%; height: 100%; object-fit: cover; }
.master-craft-keeper-working-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.master-craft-keeper-working-title { font-size: .88rem; color: var(--text-secondary, #cfd3e0); }
.master-craft-keeper-working-title b { color: #fff; }
.master-craft-keeper-working-countdown { font-size: 1.05rem; font-weight: 700; color: #7fd4ff; font-variant-numeric: tabular-nums; }
.master-craft-keeper-working-countdown.is-ready { color: #7bffa0; }
/* Фаза 53.6 (п.9): заголовок блока «Очередь капсул» в стиле «ОЧЕРЕДЬ · +N ЕЩЁ» с разделительной
линией справа (см. image-8.jpg/image-9.jpg из брифа) -- append-only, .reliquary-queue-label и
.reliquary-queue-row из предыдущих фаз выше не трогаются, только новые правила для нового
.reliquary-queue-head wrapper. */
.reliquary-queue-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.reliquary-queue-head .reliquary-queue-label { display: inline-block; margin-bottom: 0; letter-spacing: .06em; font-weight: 700; white-space: nowrap; }
.reliquary-queue-rule { flex: 1 1 auto; height: 1px; background: var(--workshop-line, rgba(255,255,255,.14)); }
/* Фаза 53.7 (доп.): сетка объединённого Зала расширена с 5x5 до 7x7 (49 слотов) -- append-only,
скоуп только на .master-craft-hall-block .reliquary-hall-grid, не трогает старый 5x5 вид
мёртвых reliquaryHallView()/grimoireHallView() (те используют .reliquary-hall-screen). При 7
колонках тайлы становятся заметно мельче, чем при 5 -- уменьшаем внутренний gap и размер
бейджа грейда/статуса капсулы, чтобы цифры и подписи не обрезались на узких экранах. */
.master-craft-hall-block .reliquary-hall-grid { gap: 5px; }
.master-craft-hall-block .reliquary-grade-badge { font-size: 12px; }
.master-craft-hall-block .reliquary-capsule-status { font-size: 9px; }
.master-craft-hall-block .reliquary-shard-hint-label { font-size: 9px; }
@media (max-width: 479px) {
.master-craft-hall-block .reliquary-hall-grid { gap: 4px; }
.master-craft-hall-block .reliquary-grade-badge { font-size: 10.5px; }
.master-craft-hall-block .reliquary-capsule-status { font-size: 8px; }
.master-craft-hall-block .reliquary-slot { border-radius: 8px; }
}
/* Фаза 53.9 (баг 3, append-only): модалка результата сбора карты у Хранителя-послушника --
показывается поверх экрана «Карты» после collectCardKeeper()/collectLaneClashKeeper() вместо
старого простого showToast (эталон image-5.jpg из багрепорта). Та же тёплая тема Мастерской,
что и у .reliquary-capsule-modal/.keeper-hire-modal выше по файлу -- переиспользуем те же
переменные --workshop-*, но с собственным набором классов (append-only, не трогает старые). */
.keeper-collect-modal-overlay { position: fixed; inset: 0; background: rgba(6,8,12,.72); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.keeper-collect-modal {
max-width: 320px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
text-align: center;
padding: 28px 20px 20px;
background: radial-gradient(120% 140% at 50% -10%, rgba(255, 154, 61, .16), transparent 55%),
linear-gradient(165deg, var(--workshop-surface-2, #2e1f18), var(--workshop-bg-2, #241713));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
border-radius: 16px;
box-shadow: inset 0 1px rgba(255, 207, 107, .1), 0 12px 28px rgba(0, 0, 0, .45);
}
.keeper-collect-modal-close {
position: absolute;
top: 10px;
right: 10px;
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
color: var(--workshop-parchment, #e8d9b8);
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
}
.keeper-collect-modal-icon {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 14px;
background: var(--workshop-card-2, rgba(20, 14, 11, .7));
border: 1px solid var(--workshop-line, rgba(214, 150, 90, .22));
padding: 8px;
}
.keeper-collect-modal-icon img, .keeper-collect-modal-icon .item-icon { width: 100%; height: 100%; object-fit: contain; }
.keeper-collect-modal-title { margin: 4px 0 0; font-size: 18px; color: var(--workshop-gold, #ffcf6b); }
.keeper-collect-modal-levels { display: flex; align-items: center; gap: 10px; font-family: 'Russo One', 'Exo 2', sans-serif; font-size: 20px; color: var(--workshop-parchment, #e8d9b8); }
.keeper-collect-modal-arrow { color: var(--workshop-gold, #ffcf6b); font-size: 16px; }
.keeper-collect-modal-subtitle { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--workshop-muted, #b9a08d); }
.keeper-collect-modal-btn { width: 100%; margin-top: 4px; }
/* Фаза 87: блок прироста резонансных очков в модалке результата найма (keeperCollectResultModalHtml()). */
.keeper-collect-gain-list {
display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 8px 10px; border-radius: 10px;
background: var(--workshop-card-2, #241a10); border: 1px solid var(--workshop-line, rgba(214,150,90,.18));
}
.keeper-collect-gain-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--workshop-parchment, #e8d9b8); }
.keeper-collect-gain-value { color: #7be08a; font-weight: 800; }
/* Фаза 53.9 (баг 5, append-only): квадратные тайлы очереди Реликвария с настоящим спрайтом
осколка/капсулы (image-8.jpg из багрепорта) -- переиспользуют .reliquary-grade-badge, но со
своим меньшим тайлом (не полноразмерный .reliquary-slot, т.к. очередь не кликабельна/не
drag-таргет). Старые .reliquary-queue-item/.reliquary-queue-items выше по файлу не трогаются --
.reliquary-queue-items остаётся общим flex-контейнером для новых .reliquary-queue-tile. */
.reliquary-queue-tile {
position: relative;
width: 52px;
height: 52px;
border-radius: 10px;
border: 1.5px solid var(--workshop-line, rgba(255,255,255,.12));
background: var(--surface-2, #242b38);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 auto;
}
.reliquary-queue-tile.shard.grade-1 { background: linear-gradient(155deg, #4b5568, #2c3340); }
.reliquary-queue-tile.shard.grade-2 { background: linear-gradient(155deg, #4a7a63, #24422f); }
.reliquary-queue-tile.shard.grade-3 { background: linear-gradient(155deg, #3f7fa0, #1f4152); }
.reliquary-queue-tile.shard.grade-4 { background: linear-gradient(155deg, #6a5bc4, #352b73); }
.reliquary-queue-tile.shard.grade-5 { background: linear-gradient(155deg, #b9679a, #5c2f52); }
.reliquary-queue-tile.shard.grade-6 { background: linear-gradient(155deg, #d8974a, #7a4c1c); }
.reliquary-queue-tile.shard.grade-7 { background: linear-gradient(155deg, #e0c355, #8a6c15); }
.reliquary-queue-tile.capsule { background: linear-gradient(160deg, #2c2438, #17131f); border-color: rgba(255,255,255,.16); }
.reliquary-queue-tile-icon { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; z-index: 0; }
.reliquary-queue-tile-badge { position: relative; z-index: 1; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
/* Фикс 53.10 (баг 2, append-only): .reliquary-queue-tile выше был фиксирован 52З52px под flex --
в новой сетке из 7 колонок (.reliquary-queue-items выше) тайл должен тянуться под свою
ячейку сетки, оставаясь квадратным (aspect-ratio), а не переполнять её. */
.reliquary-queue-tile { width: auto; height: auto; min-width: 0; aspect-ratio: 1 / 1; }
.reliquary-queue-tile-badge { font-size: 10px; }
/* Фаза 54 (append-only): экран ожидания соперника «Ищем соперника» для живой очереди Lane Clash
(лейн-баттлер PvP) -- разметка/анимация 1:1 повторяют прототип «Арена — концепт А (неонит)»
(экран s-queue, .queue-card/.radar/.radar-sweep/.radar-core/.dots), но на игровых токенах
--lc-* (Lane Clash append-блок выше, строка ~6850) вместо стандалонных --cyan/--violet
прототипа -- --lc-violet как акцент вместо --cyan, чтобы вписаться в существующую палитру
Стычки отрядов. Используется в laneClashQueueView(). Проверено: имена keyframes spin/blink
свободны (не конфликтуют с другими анимациями файла). */
.lane-clash-queue-card {
position: relative; margin-top: 10px; padding: 34px 18px 30px; text-align: center;
background: linear-gradient(150deg, var(--lc-panel), var(--lc-panel-deep));
border: 1px solid var(--lc-line); border-radius: 16px; color: var(--lc-ink);
}
.lane-clash-radar {
position: relative; width: 150px; height: 150px; margin: 6px auto 20px; border-radius: 50%;
background: radial-gradient(circle, rgba(167, 112, 255, .12), transparent 70%);
border: 1px solid var(--lc-line);
}
.lane-clash-radar::before, .lane-clash-radar::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--lc-line); }
.lane-clash-radar::before { inset: 20px; }
.lane-clash-radar::after { inset: 45px; }
.lane-clash-radar-sweep {
position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, rgba(167, 112, 255, .55), transparent 35%);
animation: lane-clash-radar-spin 2.2s linear infinite;
}
.lane-clash-radar-core {
position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%;
border-radius: 50%; background: var(--lc-violet); box-shadow: 0 0 16px var(--lc-violet);
}
@keyframes lane-clash-radar-spin { to { transform: rotate(360deg); } }
.lane-clash-queue-card h1 { font-size: 22px; margin: 0 0 8px; color: var(--lc-ink); }
.lane-clash-queue-card p { color: var(--lc-muted); font-size: 13px; margin: 0 0 18px; }
.lane-clash-queue-dots span {
display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%;
background: var(--lc-violet); animation: lane-clash-queue-blink 1.2s infinite ease-in-out;
}
.lane-clash-queue-dots span:nth-child(2) { animation-delay: .2s; }
.lane-clash-queue-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes lane-clash-queue-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* Фаза 54: XP и кубки лиги -- замена убранного янтаря в наградах результата боя Lane Clash. */
.lane-clash-reward-pill.lane-clash-reward-xp { color: var(--lc-ink); }
.lane-clash-reward-pill.lane-clash-reward-trophy { display: inline-flex; align-items: center; gap: 5px; color: var(--lc-gold); border-color: rgba(255, 207, 107, .4); }
.lane-clash-reward-trophy-icon { width: 15px; height: 15px; object-fit: contain; }
/* ===== Фаза 78/78.1/78.3: модалка "Настройки" (звук + визуальные эффекты) =====
Фаза 78.3 (правки по фидбеку пользователя после продакшн-теста):
1) .settings-sheet больше НЕ центрируется через top:50% (общее поведение .overlay-panel--sheet,
см. правило чуть выше) -- на части устройств вертикальное центрирование поднимало верх модалки
(заголовок "Настройки" + крестик) выше границы HUD, а .game-hud (z-index:9) рисуется НАД
оверлеями (.overlay-panel z-index:8) и перекрывал заголовок. Теперь .settings-sheet якорится
ПОД HUD через var(--hud-height) -- та же техника, что у обычных .overlay-panel:not(.overlay-panel--sheet)
(см. правило выше), поэтому заголовок физически не может оказаться под HUD ни на одном устройстве.
2) Уменьшены паддинги/гэпы/шрифты -- модалка компактнее.
3) Явный font-family: 'Manrope', 'Inter', sans-serif (тот же стек, что у .game-hud/арены/мастерской).
4) Палитра сменена с тёмно-синей темы турнирного лидерборда на янтарно-коричневую "Кузницы Эмбера"
(--workshop-* переменные, см. :root) -- по образцу .amber-shop-card/.amber-shop-frame
(модалка покупки Янтаря), как и просил пользователь.
Фаза 79.2 (багфикс по фидбеку): якорение "top: hud-height + 8px" (Фаза 78.3) прижимало
модалку прямо под HUD -- визуально верно (не заходит под шапку), но некрасиво на высоких
экранах, где под модалкой остаётся много пустого места. Вместо фиксированного отступа сверху
центрируем модалку по СЕРЕДИНЕ свободного пространства под HUD: top ставится на середину
отрезка [низ HUD .. низ экрана], transform возвращает обычное центрирование по обеим осям.
Верхний край модалки при этом гарантированно не уходит выше HUD ни при какой высоте модалки,
т.к. max-height модалки (ниже) всегда меньше высоты свободного пространства -- при максимальной
допустимой высоте модалки её верх останавливается на +14px ниже HUD, а не выше. */
.overlay-panel--sheet.settings-sheet {
top: calc(var(--hud-height, 92px) + (100dvh - var(--hud-height, 92px)) / 2); bottom: auto; left: 50%;
transform: translate(-50%, -50%);
width: min(88vw, 380px);
max-height: calc(100dvh - var(--hud-height, 92px) - 28px);
border-radius: 18px;
border: 2px solid #4a3018;
background: linear-gradient(165deg, #241611, #140b08 60%);
box-shadow: 0 0 0 1px rgba(255,207,107,.22), 0 0 32px rgba(255,122,51,.22), 0 20px 44px rgba(0,0,0,.6);
font-family: 'Manrope', 'Inter', sans-serif;
}
.settings-sheet .overlay-header {
border-radius: 18px 18px 0 0; padding: 12px 14px 9px;
background: transparent; border-bottom: 1px solid rgba(214,150,90,.28);
}
.settings-sheet .overlay-header h2 {
font-size: 15px; letter-spacing: .04em; color: var(--workshop-parchment, #e8d9b8);
text-shadow: 0 0 10px rgba(255,122,51,.4);
}
.settings-sheet .overlay-header .icon-button {
color: var(--workshop-gold, #ffcf6b); background: linear-gradient(165deg,#4a3018,#241611);
border: 1px solid var(--workshop-gold, #ffcf6b);
}
.settings-sheet .overlay-body { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
@media (max-width:559.98px) {
.overlay-panel--sheet.settings-sheet {
width: 90vw; max-height: calc(100dvh - var(--hud-height, 92px) - 20px);
top: calc(var(--hud-height, 92px) + (100dvh - var(--hud-height, 92px)) / 2);
}
}
.settings-sections { display: flex; flex-direction: column; gap: 9px; }
.settings-section {
padding: 10px 10px 3px; border-radius: 13px; border: 1px solid rgba(214,150,90,.22);
background: linear-gradient(160deg, #2c1c12, #150c07);
}
.settings-section-title {
margin: 0 0 3px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--workshop-ember-2, #ff9a3d);
}
.settings-list { display: flex; flex-direction: column; gap: 1px; }
.settings-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 1px; border-bottom: 1px solid rgba(214,150,90,.14);
}
.settings-row:last-child { border-bottom: none; }
.settings-row > span { font-size: 13px; font-weight: 600; color: var(--workshop-text, #f3e6d8); min-width: 0; }
.settings-hint { margin: 8px 3px 0; font-size: 11px; color: var(--workshop-muted, #b9a08d); line-height: 1.35; }
.toggle-switch {
position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
background: #1c120c; border: 1px solid rgba(214,150,90,.3); cursor: pointer;
transition: background-color .18s ease, border-color .18s ease; padding: 0;
}
.toggle-switch.is-on { background: linear-gradient(180deg, var(--workshop-gold, #ffcf6b), var(--workshop-amber-2, #d9862f)); border-color: var(--workshop-gold, #ffcf6b); }
.toggle-switch-knob {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: var(--workshop-muted, #b9a08d); transition: transform .18s ease, background-color .18s ease;
}
.toggle-switch.is-on .toggle-switch-knob { transform: translateX(18px); background: #2a1608; }
/* Фаза 81: экран "Достижения" питомца (переключатель в Питомце). Палитра — глобальные
workshop-переменные из :root (см. верх файла). Локальные rarity-переменные объявлены
на .ach-list, поскольку глобальные --rarity-* определены только внутри
.arena-equipment.equip-content и не видны здесь. */
.ach-summary { background: var(--workshop-card); border: 1px solid var(--workshop-line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.ach-summary-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--workshop-parchment); margin-bottom: 8px; }
.ach-summary-stars { display: inline-flex; align-items: center; gap: 5px; color: var(--workshop-gold); }
.ach-summary-stars svg { width: 15px; height: 15px; }
.ach-summary-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(0,0,0,.45); overflow: hidden; }
.ach-summary-bar i { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--workshop-ember), var(--workshop-gold)); transition: width .3s ease; }
.ach-list { --rarity-rare: #49aaf1; --rarity-epic: #b26bff; --rarity-legendary: #ffcf6b; display: flex; flex-direction: column; gap: 10px; }
/* Фаза 82 (баг 3): весь экран достижений явно на Manrope/Inter -- наследуется потомками (заголовки,
описания, кнопка), без трогания глобального :root шрифта или других экранов (Cinzel/Nunito/PSP2P). */
.ach-screen { font-family: 'Manrope', 'Inter', sans-serif; }
/* Фаза 82 (баг 4): базовый .ach-card без layout-свойств -- конкретный режим (grid для активных,
flex для --maxed) задаётся ниже отдельными правилами. */
.ach-card { background: var(--workshop-card); border: 1px solid var(--workshop-line); border-radius: 16px; padding: 12px 13px; }
.ach-card.is-ready { border-color: var(--workshop-gold); box-shadow: 0 0 0 1px rgba(255,207,107,.25), 0 10px 20px rgba(0,0,0,.3); }
.ach-card--maxed { display: flex; align-items: center; gap: 12px; padding: 10px 13px; opacity: .85; }
/* Фаза 82 (баг 4): активная (незабранная) карточка -- CSS Grid, чтобы прогресс-бар тянулся на всю
ширину карточки (под иконкой и кнопкой включительно), а кнопка занимает отдельную колонку,
растянутуюся только на высоту строк заголовка+описания (без строки бара) -- это и центрирует
её вертикально между названием и описанием без дополнительной JS-логики. */
.ach-card:not(.ach-card--maxed) {
display: grid;
grid-template-columns: 42px 1fr auto;
grid-template-areas: "icon head btn" "icon desc btn" "bar bar bar";
column-gap: 12px;
row-gap: 4px;
}
.ach-card:not(.ach-card--maxed) .ach-icon { grid-area: icon; align-self: start; }
.ach-card:not(.ach-card--maxed) .ach-card-head { grid-area: head; margin-bottom: 0; }
.ach-card:not(.ach-card--maxed) .ach-card-desc { grid-area: desc; margin-bottom: 0; }
.ach-card:not(.ach-card--maxed) .ach-progress { grid-area: bar; margin-top: 4px; }
.ach-card:not(.ach-card--maxed) .ach-claim-btn { grid-area: btn; }
.ach-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--workshop-card-2); border: 1px solid var(--workshop-line); color: var(--workshop-gold); overflow: hidden; }
.ach-icon svg { width: 22px; height: 22px; }
.ach-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ach-icon--rare { color: var(--rarity-rare); border-color: var(--rarity-rare); }
.ach-icon--epic { color: var(--rarity-epic); border-color: var(--rarity-epic); }
.ach-icon--legendary { color: var(--rarity-legendary); border-color: var(--rarity-legendary); }
.ach-card-body { flex: 1; min-width: 0; }
/* Фаза 82 (баг 2): звёзды теперь выравниваются по верху с заголовком (а не по центру всего блока заголовка,
что раньше смещало звёзды вниз при 2-строчном заголовке). */
.ach-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.ach-card-head strong { font-size: 14px; color: var(--workshop-text); }
.ach-tier-stars { display: inline-flex; gap: 2px; flex-shrink: 0; margin-top: 1px; }
.ach-tier-star { width: 13px; height: 13px; color: rgba(233,217,184,.28); }
.ach-tier-star svg { width: 100%; height: 100%; }
.ach-tier-star.filled { color: var(--workshop-gold); }
.ach-card-desc { margin: 0 0 8px; font-size: 12.5px; color: var(--workshop-muted); line-height: 1.4; }
.ach-maxed-label { margin: 0; font-size: 12.5px; color: var(--workshop-green); font-weight: 700; }
.ach-progress { position: relative; height: 20px; border-radius: 999px; background: rgba(0,0,0,.45); overflow: hidden; display: flex; align-items: center; }
.ach-progress i { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--workshop-ember), var(--workshop-gold)); transition: width .3s ease; }
.ach-progress-label { position: relative; z-index: 1; margin: 0 auto; font-size: 11px; font-weight: 700; color: var(--workshop-text); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ach-progress-reward { position: relative; z-index: 1; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--workshop-parchment); background: rgba(0,0,0,.5); border-radius: 999px; padding: 2px 7px 2px 5px; margin-right: 2px; white-space: nowrap; }
.ach-reward-badge { display: inline-flex; align-items: center; gap: 3px; }
.ach-reward-badge svg, .ach-reward-badge img { width: 12px; height: 12px; }
/* Фаза 82 (баг 4): align-self:center теперь центрирует кнопку внутри её grid-области "btn",
которая охватывает только строки заголовка+описания (без строки прогресс-бара). */
.ach-claim-btn { flex-shrink: 0; align-self: center; background: linear-gradient(180deg, var(--workshop-gold), var(--workshop-gold-2)); color: #2a1608; font-size: 12.5px; font-weight: 800; border-radius: 10px; padding: 9px 13px; min-height: 38px; }
.ach-claim-btn:disabled { opacity: .6; }
/* ======================================================================================
Фаза 99: город с улучшаемыми зданиями (карта city_map_base.webp + слой спрайтов).
Append-only: ничего из прежних .hub-map-* правил не переопределяется, кроме явных
.city-* классов, которые добавляются рядом с ними в разметке (см. cityMapView()).
Тень здания — отдельный клон спрайта ПОД зданием, смещённый вверх-влево ("за" домом),
поэтому здание никогда не выглядит парящим; смещение и плотность крутятся тремя
переменными ниже без перегенерации арта.
====================================================================================== */
.city-map { position: relative; }
.city-map-viewport { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.city-map-viewport:active { cursor: grabbing; }
.city-map-world { position: absolute; top: 0; left: 0; height: auto; will-change: transform; }
.city-map-img { display: block; width: 100%; height: auto; image-rendering: auto; user-select: none; -webkit-user-drag: none; }
.city-buildings-layer { position: absolute; inset: 0; }
.city-building {
--city-shadow-dx: -9%;
--city-shadow-dy: -7%;
--city-shadow-alpha: 0.45;
--city-shadow-blur: 6px;
position: absolute;
left: var(--cb-left);
top: var(--cb-top);
width: var(--cb-width);
transform: translate(-50%, -100%);
}
.city-building-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
filter: brightness(0) blur(var(--city-shadow-blur));
opacity: var(--city-shadow-alpha);
transform: translate(var(--city-shadow-dx), var(--city-shadow-dy)) scaleY(0.42) skewX(26deg);
transform-origin: bottom center;
pointer-events: none;
user-select: none;
}
.city-building-hit {
position: relative;
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.city-building-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; transition: transform 160ms ease, filter 160ms ease; }
.city-building-hit:hover .city-building-img,
.city-building.is-active .city-building-img { transform: translateY(-2%) scale(1.02); filter: drop-shadow(0 0 10px rgba(255, 214, 138, 0.55)); }
.city-building.is-ruined .city-building-img { filter: saturate(0.7) brightness(0.92); }
.city-building.is-ruined .city-building-shadow { opacity: calc(var(--city-shadow-alpha) * 0.6); }
.city-building-caption {
position: absolute;
left: 50%;
bottom: 100%;
margin-bottom: 0.35em;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 160ms ease;
}
.city-cap-lvl {
padding: 1px 9px;
border-radius: 999px;
font-size: clamp(8px, 0.95vw, 11px);
font-weight: 800;
color: #2b1a06;
background: linear-gradient(180deg, #ffdf8f, #eda93a);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.city-cap-name {
font-size: clamp(9px, 1.15vw, 13px);
font-weight: 800;
letter-spacing: 0.02em;
color: #fdf1d8;
text-shadow: 0 1px 2px rgba(28, 16, 6, 0.95), 0 0 6px rgba(20, 12, 4, 0.75);
}
.city-building.is-active .city-building-caption,
.city-building-hit:hover ~ .city-building-caption { opacity: 1; }
.city-timer, .city-yield {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: clamp(9px, 1.1vw, 13px);
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
.city-timer {
top: -1.9em;
color: #ffe9bd;
background: linear-gradient(180deg, rgba(58, 34, 14, 0.96), rgba(34, 19, 7, 0.96));
border: 1px solid rgba(232, 182, 108, 0.65);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 226, 170, 0.28);
}
.city-yield {
top: -2em;
border: 0;
cursor: pointer;
color: #2a1a06;
background: linear-gradient(180deg, #ffdf8f, #f2b23f);
border: 1px solid rgba(120, 74, 16, 0.85);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
animation: cityYieldPulse 2.4s ease-in-out infinite;
}
@keyframes cityYieldPulse { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .city-yield { animation: none; } }
/* --- HUD ресурсов и строителей --- */
.city-hud {
position: absolute;
z-index: 6;
top: 8px;
left: 8px;
right: 8px;
display: flex;
gap: 6px;
align-items: stretch;
flex-wrap: wrap;
}
.city-hud-cell, .city-hud-builders {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
color: #ffeecb;
background: linear-gradient(180deg, rgba(52, 32, 14, 0.92), rgba(30, 18, 7, 0.94));
border: 1px solid rgba(214, 165, 96, 0.55);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 226, 170, 0.22);
backdrop-filter: blur(3px);
}
.city-hud-builders { cursor: pointer; margin-left: auto; }
.city-hud-value small { font-weight: 600; opacity: 0.7; }
/* --- мини-меню здания --- */
.city-menu {
position: absolute;
z-index: 8;
min-width: 168px;
padding: 10px 12px 12px;
border-radius: 16px;
opacity: 0;
visibility: hidden;
transform: translateY(6px) scale(0.98);
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
color: #fff2d8;
background: linear-gradient(180deg, rgba(64, 40, 18, 0.97), rgba(34, 20, 8, 0.98));
border: 1px solid rgba(226, 176, 104, 0.7);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 228, 176, 0.25);
}
.city-menu.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.city-menu-level {
display: inline-block;
padding: 2px 10px;
margin-bottom: 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
color: #2b1a06;
background: linear-gradient(180deg, #ffdf8f, #eda93a);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.city-menu-title { font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.city-menu-actions { display: flex; gap: 8px; }
.city-menu-btn {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 7px 4px 6px;
border-radius: 12px;
cursor: pointer;
font-size: 15px;
color: #f6fbff;
background: linear-gradient(180deg, #4d8fd8, #2c5fa6);
border: 1px solid rgba(163, 208, 255, 0.55);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.city-menu-btn small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; }
.city-menu-btn--primary { background: linear-gradient(180deg, #6fc45c, #3d8a34); border-color: rgba(186, 240, 168, 0.6); }
.city-menu-btn.is-disabled, .city-menu-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }
.city-menu-note { margin-top: 8px; font-size: 10.5px; line-height: 1.35; opacity: 0.85; }
/* --- модалка требований / подробностей / строителей --- */
.city-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(10, 6, 2, 0.62);
backdrop-filter: blur(4px);
animation: cityModalIn 160ms ease;
}
@keyframes cityModalIn { from { opacity: 0; } to { opacity: 1; } }
.city-modal-card {
width: min(360px, 100%);
padding: 16px 16px 14px;
border-radius: 20px;
color: #fff3da;
background:
linear-gradient(180deg, rgba(84, 53, 24, 0.98), rgba(44, 26, 10, 0.99));
border: 2px solid rgba(226, 176, 104, 0.8);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 231, 182, 0.3);
}
.city-modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.city-modal-head h3 { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: 0.01em; }
.city-modal-head span { font-size: 12px; font-weight: 800; color: #ffd88f; }
.city-modal-subtitle { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; opacity: 0.72; margin-bottom: 7px; }
.city-req-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.city-req {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 12px;
font-size: 12.5px;
font-weight: 700;
background: rgba(24, 14, 5, 0.55);
border: 1px solid rgba(214, 165, 96, 0.3);
}
.city-req-name { flex: 1 1 auto; }
.city-req-value { font-variant-numeric: tabular-nums; opacity: 0.92; }
.city-req-mark { font-size: 14px; font-weight: 900; }
.city-req.is-ok .city-req-mark { color: #7ddc63; }
.city-req.is-bad .city-req-mark { color: #ff8b7a; }
.city-req.is-bad { border-color: rgba(255, 139, 122, 0.35); }
.city-req-goto {
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
font-size: 11px;
font-weight: 800;
color: #f6fbff;
background: linear-gradient(180deg, #4d8fd8, #2c5fa6);
border: 1px solid rgba(163, 208, 255, 0.55);
}
.city-modal-time { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; font-size: 12px; font-weight: 800; color: #ffd88f; }
.city-modal-cta {
width: 100%;
padding: 12px;
border-radius: 14px;
cursor: pointer;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.02em;
color: #10240c;
background: linear-gradient(180deg, #8ce06f, #47993a);
border: 1px solid rgba(196, 245, 176, 0.7);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.city-modal-cta.is-disabled, .city-modal-cta:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.55); }
.city-modal-close {
width: 100%;
margin-top: 8px;
padding: 9px;
border-radius: 12px;
cursor: pointer;
font-size: 12px;
font-weight: 800;
color: #ffe6bd;
background: rgba(24, 14, 5, 0.6);
border: 1px solid rgba(214, 165, 96, 0.45);
}
.city-modal-note { margin: 0 0 10px; font-size: 12px; line-height: 1.45; opacity: 0.88; }
.city-detail-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; }
.city-detail-list li { padding: 6px 10px; border-radius: 10px; background: rgba(24, 14, 5, 0.5); border: 1px solid rgba(214, 165, 96, 0.28); }
/* --- круглые кнопки действий под зданием --- */
.city-building.is-active { z-index: 9; }
.city-actions {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -18%);
display: flex;
align-items: flex-start;
gap: clamp(6px, 0.9vw, 12px);
z-index: 10;
animation: cityActionsIn 150ms ease-out;
}
@keyframes cityActionsIn { from { opacity: 0; transform: translate(-50%, -4%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -18%) scale(1); } }
.city-act {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.city-act-ico {
display: flex;
align-items: center;
justify-content: center;
width: clamp(30px, 3.2vw, 46px);
height: clamp(30px, 3.2vw, 46px);
border-radius: 50%;
font-size: clamp(14px, 1.6vw, 21px);
line-height: 1;
color: #f4fbff;
background: radial-gradient(120% 120% at 30% 22%, #79c0f5 0%, #3d84d6 45%, #23528f 100%);
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 6px 14px rgba(6, 22, 44, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.45);
transition: transform 120ms ease, filter 120ms ease;
}
.city-act--primary .city-act-ico {
background: radial-gradient(120% 120% at 30% 22%, #9ff0a8 0%, #47b45e 45%, #23763c 100%);
}
.city-act:hover .city-act-ico { transform: translateY(-2px) scale(1.05); }
.city-act:active .city-act-ico { transform: translateY(1px) scale(0.97); }
.city-act.is-disabled .city-act-ico { filter: grayscale(0.85) brightness(0.8); }
.city-act.is-disabled { cursor: default; }
.city-act-label {
font-size: clamp(8px, 0.95vw, 11px);
font-weight: 800;
color: #fff6e2;
text-shadow: 0 1px 2px rgba(24, 14, 4, 0.95), 0 0 5px rgba(18, 10, 2, 0.8);
white-space: nowrap;
}
.city-act-note {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 190%);
padding: 2px 9px;
border-radius: 999px;
font-size: clamp(8px, 0.95vw, 11px);
font-weight: 700;
color: #ffe0b8;
background: rgba(38, 22, 8, 0.92);
border: 1px solid rgba(226, 176, 104, 0.55);
white-space: nowrap;
pointer-events: none;
}
/* =============================================================================================
Фаза 99 (интеграция): ускорение стройки за янтарь, «Собрать всё» в HUD и подменю
гильдейского двора. Стили дописаны отдельным блоком, чтобы не трогать базовую вёрстку карты.
============================================================================================= */
.city-act.city-act--amber > .city-act-ico {
background: radial-gradient(circle at 32% 28%, #ffd98a 0%, #f2a93b 46%, #b96a12 100%);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.city-hud-collect {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 0;
border-radius: 999px;
font: 600 12px/1 var(--font-ui, inherit);
color: #0f2415;
background: linear-gradient(180deg, #9ff08a 0%, #4fbf58 58%, #2c8b3d 100%);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.city-hud-collect:disabled { opacity: 0.55; cursor: default; }
.city-guild-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 4px 0 12px;
}
.city-guild-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px;
border: 1px solid rgba(255, 226, 160, 0.22);
border-radius: 14px;
font: 600 11px/1.2 var(--font-ui, inherit);
color: #f6ecd3;
text-align: center;
background: linear-gradient(180deg, rgba(58, 44, 30, 0.92) 0%, rgba(34, 25, 17, 0.94) 100%);
cursor: pointer;
}
.city-guild-item svg { width: 22px; height: 22px; }
.city-guild-item:active { transform: translateY(1px); }
/* =============================================================================================
Город: нарисованный UI-кит (9-slice). Модалки на деревянной раме с пергаментом, название
здания — утопленным блоком внутри пергамента, кнопки — на прямоугольных плашках.
Блок дописан в конец файла и переопределяет прежние «плоские» стили.
============================================================================================= */
:root { --city-ui: url("../img/ui"); }
/* --- кнопки действий под зданием: плашки с текстом, без кружков --- */
.city-actions { flex-wrap: wrap; justify-content: center; width: min(78vw, 320px); gap: 7px; }
.city-act {
flex: 1 1 0;
min-width: 0;
height: 44px;
padding: 0 12px;
border: 0;
background: none;
border-image: url("../img/ui/r_wood.png") 34 fill / 11px stretch;
align-items: center;
justify-content: center;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
transition: transform 110ms ease, filter 110ms ease;
}
.city-act .city-act-ico { display: none; }
.city-act .city-act-label {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.01em;
color: #ffeecd;
text-shadow: 0 2px 0 rgba(24, 12, 2, 0.75);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.city-act:hover { transform: translateY(-1px); }
.city-act:active { transform: translateY(1px); }
.city-act--primary {
flex: 0 0 100%;
width: 100%;
order: -1;
height: 50px;
border-image: url("../img/ui/r_green.png") 34 fill / 11px stretch;
}
.city-act--primary .city-act-label { font-size: 14.5px; color: #f2fff0; }
.city-act--wide { flex: 0 0 100%; width: 100%; }
.city-actions--single .city-act--primary {
border-image: url("../img/ui/r_gold.png") 34 fill / 11px stretch;
}
.city-actions--single .city-act--primary .city-act-label { color: #3a2404; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6); }
.city-act.is-disabled { border-image: url("../img/ui/r_stone.png") 34 fill / 11px stretch; }
.city-act.is-disabled .city-act-label { color: #efe6d6; }
/* --- модалка на деревянной раме с пергаментом --- */
.city-modal-card {
position: relative;
width: min(360px, 100%);
padding: 14px 42px 42px;
border-radius: 0;
border: 0;
border-image: url("../img/ui/modal.png") 168 fill / 48px stretch;
background: none;
box-shadow: none;
color: #3f2708;
filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6));
}
.city-modal-head {
display: inline-block;
width: auto;
max-width: calc(100% - 52px);
margin: 8px 0 10px;
padding: 8px 14px 9px;
border-radius: 10px;
text-align: left;
background: linear-gradient(180deg, rgba(120, 86, 40, 0.16), rgba(120, 86, 40, 0.05));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(146, 106, 48, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.city-modal-head h3 {
margin: 0;
font-family: 'PT Serif', Georgia, serif;
font-size: 19px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.05;
color: #3f2708;
text-shadow: 0 1px 0 rgba(255, 250, 232, 0.7);
}
.city-modal-head span {
--display: block;
margin-top: 6px;
gap:5px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a6a33;
}
.city-modal-subtitle {
text-align: center;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a7635;
opacity: 1;
margin: 10px 0 6px;
}
.city-modal-note { color: #4a3418; opacity: 1; font-size: 12.5px; }
.city-modal-time { color: #7a5a2a; }
/* строки требований — на пергаменте, с пунктирным разделителем */
.city-req-list { gap: 0; }
.city-req {
padding: 7px 2px;
border: 0;
border-radius: 0;
border-bottom: 1px dashed rgba(150, 110, 55, 0.45);
background: none;
color: #3f2708;
font-size: 13px;
}
.city-req:last-child { border-bottom: 0; }
.city-req.is-bad { border-color: rgba(150, 110, 55, 0.45); }
.city-req-value { color: #55391a; }
.city-req.is-ok .city-req-mark { color: #2f8a3a; }
.city-req.is-bad .city-req-mark { color: #b8412c; }
.city-detail-list li {
padding: 7px 2px;
border: 0;
border-radius: 0;
border-bottom: 1px dashed rgba(150, 110, 55, 0.45);
background: none;
color: #3f2708;
}
.city-detail-list li:last-child { border-bottom: 0; }
/* кнопки внутри модалки */
.city-req-goto, .city-modal-cta, .city-modal-close {
border: 0;
background: none;
border-radius: 0;
box-shadow: none;
}
.city-req-goto {
flex: 0 0 auto;
height: 32px;
padding: 0 14px;
color: #ffeecd;
font-size: 11.5px;
font-weight: 900;
text-shadow: 0 2px 0 rgba(24, 12, 2, 0.7);
border-image: url("../img/ui/r_blue.png") 34 fill / 11px stretch;
}
.city-modal-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
padding: 0 14px;
margin-top: 8px;
color: #f2fff0;
font-size: 15px;
font-weight: 900;
text-shadow: 0 2px 0 rgba(6, 32, 10, 0.6);
border-image: url("../img/ui/r_green.png") 34 fill / 11px stretch;
}
.city-modal-cta.is-disabled, .city-modal-cta:disabled {
opacity: 1;
filter: none;
color: #efe6d6;
text-shadow: 0 2px 0 rgba(30, 30, 30, 0.5);
border-image: url("../img/ui/r_stone.png") 34 fill / 11px stretch;
}
/* круглый крестик в правом верхнем углу, на пергаменте под угловым узором */
.city-modal-close {
position: absolute;
right: -1px;
top: -1px;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
font-size: 0;
cursor: pointer;
background: url("../img/ui/close.png") center / 100% 100% no-repeat;
transition: transform 110ms ease;
}
.city-modal-close:hover { transform: scale(1.06); }
.city-modal-close:active { transform: scale(0.96); }
/* --- иконки кита в модалках и HUD + ограничение высоты модалки со скроллом --- */
.city-ico { width: 20px; height: 20px; display: block; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(40, 24, 4, 0.35)); }
.city-req-icon { display: flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 22px; }
.city-hud-icon .city-ico, .city-hud-cell .city-ico { width: 18px; height: 18px; }
.city-yield .city-ico { width: 17px; height: 17px; }
.city-modal-time .city-ico { width: 18px; height: 18px; }
.city-modal-cta .city-ico { display: inline-block; width: 19px; height: 19px; margin-left: 7px; vertical-align: -3px; }
.city-modal-card {
display: flex;
flex-direction: column;
max-height: calc(100dvh - 24px);
}
.city-modal-card > * { flex: 0 0 auto; }
.city-modal-card > .city-req-list,
.city-modal-card > .city-detail-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(150, 110, 55, 0.55) transparent;
/* мягкое затухание у краёв — подсказка, что список прокручивается */
mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.city-modal-card > .city-req-list::-webkit-scrollbar,
.city-modal-card > .city-detail-list::-webkit-scrollbar { width: 5px; }
.city-modal-card > .city-req-list::-webkit-scrollbar-thumb,
.city-modal-card > .city-detail-list::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(150, 110, 55, 0.55); }
.city-modal { padding: 12px; align-items: center; }
/* --- верхняя кромка карты: горы, лес и туман под хедером --- */
.city-map-viewport { --city-top-band: 128px; }
.city-map-band {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--city-top-band);
z-index: 4;
pointer-events: none;
background:
linear-gradient(180deg, rgba(8, 12, 10, 0.5) 0%, rgba(8, 12, 10, 0.16) 44%, rgba(8, 12, 10, 0) 78%);
}
@media (max-width: 430px) { .city-map-viewport { --city-top-band: 112px; } }
/* подложка вокруг карты, когда она без апскейла уже/ниже экрана */
.city-map-viewport { background: #10180f; }
/* --- подписи зданий: имя снизу всегда, уровень+имя сверху только при выборе --- */
/* убираем «подпрыгивание» спрайта при наведении и выборе — остаётся только мягкое свечение */
.city-building-hit:hover .city-building-img,
.city-building.is-active .city-building-img {
transform: none;
filter: drop-shadow(0 0 10px rgba(255, 214, 138, 0.55));
}
.city-building-label {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 2px);
max-width: 160%;
padding: 1px 8px 2px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(28, 18, 8, 0.62), rgba(14, 9, 4, 0.72));
box-shadow: inset 0 1px 0 rgba(255, 226, 168, 0.18), 0 2px 5px rgba(0, 0, 0, 0.35);
font-size: clamp(9px, 1.1vw, 12.5px);
font-weight: 800;
letter-spacing: 0.01em;
color: #f7e7c6;
text-shadow: 0 1px 2px rgba(20, 12, 4, 0.95);
white-space: nowrap;
pointer-events: none;
opacity: 1;
transition: opacity 140ms ease;
}
.city-building.is-active .city-building-label,
.city-building-hit:hover ~ .city-building-label { opacity: 0; }
.city-building.is-building .city-building-label { opacity: 0; }
/* --- компактные кнопки действий на карте (были слишком крупные на телефоне) --- */
.city-actions { width: min(48vw, 236px); gap: 5px; }
.city-act { height: 34px; padding: 0 9px; filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.42)); }
.city-act .city-act-label { font-size: 11.5px; }
.city-act--primary { height: 38px; }
.city-act--primary .city-act-label { font-size: 12.5px; }
.city-act-note { font-size: 10px; }
/* ============================================================================
Фаза 82: хедер города, вариант 9 (портрет + сетка капсул + ряд навигации).
Append-only: базовые правила .game-hud выше не меняются, всё новое живёт в
скоупе .game-hud.hud9 и перекрывает только то, что нужно.
========================================================================== */
.game-hud.hud9 { gap: 7px; }
.game-hud.hud9 .hud9-top { display: flex; align-items: center; gap: 8px; }
.game-hud.hud9 .hud9-ava {
position: relative; flex: 0 0 auto; width: 50px; height: 50px; padding: 0; border: 0;
background: none; cursor: pointer;
}
.game-hud.hud9 .hud9-ava > .hud9-ico { width: 50px; height: 50px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.game-hud.hud9 .hud9-ava > b {
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
min-width: 26px; padding: 1px 6px; border-radius: 999px;
background: linear-gradient(180deg, #f7e2ae, #d9ab55); border: 1.5px solid #6b4718;
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 900; font-size: 11px; color: #3a2205;
box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.game-hud.hud9 .hud9-grid {
flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 8px;
}
.game-hud.hud9 .hud9-slot {
position: relative; height: 22px; width: 100%; padding: 0 6px 0 20px; border: 0;
display: flex; align-items: center; justify-content: flex-end; gap: 3px; border-radius: 999px;
background: linear-gradient(180deg, rgba(38,24,10,.95), rgba(20,12,5,.97));
box-shadow: inset 0 1px 0 rgba(255,224,168,.22), inset 0 0 0 1px rgba(116,80,36,.9), 0 2px 6px rgba(0,0,0,.5);
cursor: default;
}
.game-hud.hud9 button.hud9-slot { cursor: pointer; }
.game-hud.hud9 button.hud9-slot:active { transform: translateY(1px); }
.game-hud.hud9 .hud9-slot > .hud9-ico {
position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
width: 25px; height: 25px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.game-hud.hud9 .hud9-val {
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 11.5px; line-height: 1;
color: #fff4d8; text-shadow: 0 1px 2px rgba(20,10,2,.9); white-space: nowrap;
}
.game-hud.hud9 .hud9-ch { font-size: 10px; font-weight: 900; color: #c8ab7c; }
.game-hud.hud9 .hud9-chev { transition: transform .2s ease; }
.game-hud.hud9.trophies-open .hud9-chev { transform: rotate(180deg); }
/* раскрывающийся список трофеев по режимам */
.game-hud.hud9 .hud9-troph { position: relative; min-width: 0; }
.game-hud.hud9 .hud9-troph-pop {
position: absolute; top: calc(100% + 7px); right: 0; z-index: 12; width: max-content; min-width: 100%;
display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; border-radius: 12px;
background: linear-gradient(180deg, rgba(46,30,12,.98), rgba(22,14,5,.99));
box-shadow: inset 0 1px 0 rgba(255,224,168,.22), inset 0 0 0 1px rgba(116,80,36,.95), 0 8px 18px rgba(0,0,0,.55);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .16s ease, transform .18s ease, visibility .18s;
}
.game-hud.hud9.trophies-open .hud9-troph-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.game-hud.hud9 .hud9-troph-row { display: flex; align-items: center; gap: 7px; }
.game-hud.hud9 .hud9-troph-row > .hud9-ico { width: 22px; height: 22px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.game-hud.hud9 .hud9-troph-name { flex: 1 1 auto; font-size: 11px; font-weight: 700; color: #e6d3b2; white-space: nowrap; }
/* ряд навигации: бургер, плашка локации, три квадратные кнопки */
.game-hud.hud9 .navrow { height: 34px; gap: 6px; }
.game-hud.hud9 .left-nav { gap: 6px; }
.game-hud.hud9 .burger-btn {
width: 34px; height: 34px; border-radius: 11px; border: 0;
background: linear-gradient(180deg, #6b4a23, #2f1e0b);
box-shadow: inset 0 1px 0 rgba(255,224,168,.3), inset 0 0 0 1px rgba(120,84,38,.95), 0 3px 7px rgba(0,0,0,.5);
}
.game-hud.hud9 .burger-btn span, .game-hud.hud9 .burger-btn::before, .game-hud.hud9 .burger-btn::after {
width: 16px; height: 2.5px; background: #ffe1a8;
}
.game-hud.hud9 .burger-btn::before { transform: translateY(-5.5px); }
.game-hud.hud9 .burger-btn::after { transform: translateY(5.5px); }
.game-hud.hud9 .location-chip {
height: 34px; border-radius: 11px; border: 0; padding: 0 10px 0 4px; gap: 7px;
background: linear-gradient(180deg, rgba(52,34,14,.95), rgba(26,16,6,.97));
box-shadow: inset 0 1px 0 rgba(255,224,168,.24), inset 0 0 0 1px rgba(116,80,36,.9), 0 3px 7px rgba(0,0,0,.5);
}
.game-hud.hud9 .location-chip .dot {
width: 26px; height: 26px; border-radius: 8px;
background: linear-gradient(180deg, #f3c268, #c8862a); color: #3d2406;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.5);
font-family: 'PT Serif', Georgia, serif; font-weight: 700; font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.game-hud.hud9 .location-chip .name { font-family: 'PT Serif', Georgia, serif; font-size: 12.5px; color: #fff1d2; }
.game-hud.hud9 .location-chip .sub { font-size: 9.5px; color: #c7b18b; }
.game-hud.hud9 .medallions { display: flex; gap: 5px; flex: 0 0 auto; }
.game-hud.hud9 .medallion {
width: 34px; height: 34px; border-radius: 11px; border: 0; padding: 0;
background: linear-gradient(180deg, #6b4a23, #2f1e0b);
box-shadow: inset 0 1px 0 rgba(255,224,168,.3), inset 0 0 0 1px rgba(120,84,38,.95), 0 3px 7px rgba(0,0,0,.5);
display: flex; align-items: center; justify-content: center;
}
.game-hud.hud9 .medallion:active { transform: translateY(1px); }
.game-hud.hud9 .medallion .hud9-ico { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
@media (max-width: 380px) {
.game-hud.hud9 .hud9-grid { gap: 7px 6px; }
.game-hud.hud9 .hud9-val { font-size: 10.5px; }
.game-hud.hud9 .location-chip .sub { display: none; }
}
/* ============================================================================
Фаза 100: экономика города — бейдж «склад здания заполнен» (добыча встала).
============================================================================ */
.city-yield.is-full {
border-color: rgba(255, 214, 132, 0.95);
box-shadow: 0 0 0 2px rgba(255, 176, 66, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(180deg, rgba(255, 199, 108, 0.28), rgba(255, 140, 46, 0.22));
}
.city-yield.is-full span { color: #ffe9bd; }
/* ============================================================================================
Фаза 101 — рабочие, ускорители, премиальные уведомления, читаемые модалки.
Блок только добавляет правила (файл правится строго append-only).
============================================================================================ */
/* --- всплывающие уведомления: карточка в стиле хедера, СВЕРХУ под хедером --- */
.toast.toast--card {
top: calc(var(--city-top-band, 128px) + 10px);
bottom: auto;
left: 50%;
right: auto;
transform: translate(-50%, -14px);
display: flex;
align-items: center;
gap: 10px;
width: max-content;
max-width: min(340px, calc(100vw - 28px));
padding: 11px 16px 12px;
border: 0;
border-radius: 0;
border-image: url("../img/ui/r_wood.png") 34 fill / 12px stretch;
background: none;
color: #fff3d8;
font-size: 14px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.01em;
text-align: left;
text-shadow: 0 2px 0 rgba(28, 14, 2, 0.72);
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
z-index: 60;
}
.toast.toast--card.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.toast--card .toast-ico {
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(255, 232, 176, 0.34), rgba(60, 34, 8, 0.5));
box-shadow: inset 0 0 0 1px rgba(255, 226, 160, 0.4);
}
.toast.toast--card .toast-ico img { width: 22px; height: 22px; object-fit: contain; display: block; }
.toast.toast--card .toast-text { display: block; }
.toast.toast--card.is-warn, .toast.toast--card.is-error {
border-image: url("../img/ui/r_red.png") 34 fill / 12px stretch;
color: #fff0e8;
}
/* --- строки «подробнее»: иконка + название слева, значение справа, крупный шрифт --- */
.city-info-list { gap: 0; font-size: 15px; }
.city-info-list .city-info-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 2px;
font-weight: 700;
}
.city-info-ico { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; }
.city-info-ico .city-ico { width: 24px; height: 24px; }
.city-info-label { flex: 1 1 auto; font-size: 15px; color: #4a3418; }
.city-info-value {
flex: 0 0 auto;
font-size: 16.5px;
font-weight: 900;
color: #35200a;
text-shadow: 0 1px 0 rgba(255, 250, 232, 0.65);
}
/* --- блок рабочих --- */
.city-workers { margin-top: 4px; }
.city-workers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.city-workers-title {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a7635;
}
.city-workers-slots { display: flex; gap: 8px; }
.city-worker-slot {
position: relative;
flex: 1 1 0;
aspect-ratio: 1 / 1;
max-width: 74px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(180deg, rgba(120, 86, 40, 0.2), rgba(120, 86, 40, 0.08));
box-shadow: inset 0 0 0 1px rgba(146, 106, 48, 0.45), inset 0 2px 5px rgba(60, 36, 8, 0.18);
}
.city-worker-slot.is-filled {
background: radial-gradient(circle at 50% 30%, rgba(255, 236, 186, 0.5), rgba(150, 108, 48, 0.2));
}
.city-worker-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.city-workers-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.city-worker-btn {
flex: 0 0 auto;
width: 46px;
height: 40px;
border: 0;
padding: 0;
color: #fff3d8;
font-size: 22px;
font-weight: 900;
line-height: 1;
cursor: pointer;
background: none;
border-image: url("../img/ui/r_green.png") 34 fill / 11px stretch;
text-shadow: 0 2px 0 rgba(6, 32, 10, 0.6);
}
.city-worker-btn.is-disabled, .city-worker-btn:disabled {
color: #efe6d6;
border-image: url("../img/ui/r_stone.png") 34 fill / 11px stretch;
}
.city-workers-free { flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 800; color: #5a3f1c; }
.city-workers-note { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #6b4d22; }
/* --- ускорители стройки --- */
.city-boosts { display: flex; gap: 8px; }
.city-boost {
position: relative;
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 9px 4px 8px;
border: 0;
cursor: pointer;
background: none;
border-image: url("../img/ui/r_blue.png") 34 fill / 11px stretch;
color: #ffeecd;
text-shadow: 0 2px 0 rgba(12, 24, 46, 0.6);
}
.city-boost.is-buy { border-image: url("../img/ui/r_gold.png") 34 fill / 11px stretch; color: #3a2404; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6); }
.city-boost-ico { position: relative; display: flex; align-items: center; justify-content: center; }
.city-boost-ico .city-ico { width: 28px; height: 28px; }
.city-boost-qty {
position: absolute;
right: -8px;
bottom: -5px;
min-width: 18px;
padding: 0 4px;
border-radius: 9px;
background: #2c1a06;
box-shadow: inset 0 0 0 1px rgba(255, 226, 160, 0.55);
color: #ffe9b8;
font-size: 11px;
font-weight: 900;
font-style: normal;
line-height: 18px;
text-align: center;
text-shadow: none;
}
.city-boost-label { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 900; }
.city-boost-label .city-ico { width: 15px; height: 15px; }
/* --- модалка улучшения: крупнее текст (пункт 6) --- */
.city-req { font-size: 15px; padding: 9px 2px; }
.city-req-name { font-size: 15px; }
.city-req-value { font-size: 15.5px; font-weight: 900; }
.city-req-icon { width: 24px; flex: 0 0 24px; }
.city-req-icon .city-ico { width: 24px; height: 24px; }
.city-modal-note { font-size: 13.5px; }
.city-modal-time { font-size: 15px; font-weight: 900; }
/* --- таймер стройки на карте: растровая иконка вместо эмодзи, читаемо на мобильных --- */
.city-building .city-timer {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 5px;
line-height: 1;
white-space: nowrap;
}
.city-building .city-timer .city-ico { width: 19px; height: 19px; flex: 0 0 19px; }
.city-building .city-timer b { font-size: 12.5px; font-weight: 900; letter-spacing: 0.01em; }
@media (max-width: 430px) {
.city-building .city-timer .city-ico { width: 17px; height: 17px; flex: 0 0 17px; }
.city-building .city-timer b { font-size: 11.5px; }
.city-info-label { font-size: 14px; }
.city-info-value { font-size: 15.5px; }
}
/* =============================================================================================
Фаза 101.1 — выбранные варианты из прототипа-концепта 2 (p101b):
1) уведомления «концепт 2» (тёмная капсула, медальон, капс-заголовок + крупное значение,
полоска обратного отсчёта); 2) индикатор уровня «руны-пипсы» вместо «Ур. N»;
3) ускорители стройки — вариант Б: одна строка-вставка «Ускорить» + три капсулы-чипа.
Блок дописан в конец файла и переопределяет прежние правила Фазы 101.
============================================================================================= */
/* --- 1. уведомления: концепт 2 --- */
.toast.toast--card.toast--c2 {
gap: 11px;
align-items: center;
max-width: min(348px, calc(100vw - 24px));
padding: 10px 15px 11px 10px;
overflow: hidden;
border-image: none;
border-radius: 15px;
background: linear-gradient(180deg, #6b4a1f 0%, #4a3013 46%, #38230d 100%);
box-shadow:
inset 0 1px 0 rgba(255, 226, 160, 0.42),
inset 0 0 0 1px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(216, 169, 73, 0.55),
0 14px 26px rgba(0, 0, 0, 0.5);
}
.toast.toast--card.toast--c2 .toast-med {
flex: 0 0 40px;
width: 40px;
height: 40px;
background: radial-gradient(circle at 50% 32%, #6a4a1c, #2b1a07 78%);
box-shadow: inset 0 0 0 2px rgba(216, 169, 73, 0.85), inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.toast.toast--card.toast--c2 .toast-med img { width: 25px; height: 25px; }
.toast.toast--card.toast--c2 .toast-body { flex: 1 1 auto; min-width: 0; }
.toast.toast--card.toast--c2 .toast-kicker {
display: block;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #d9b779;
}
.toast.toast--card.toast--c2 .toast-value {
display: block;
margin-top: 3px;
font-size: 16px;
font-weight: 900;
line-height: 1.15;
color: #ffdc8a;
text-shadow: 0 2px 0 rgba(24, 12, 2, 0.85);
}
.toast.toast--card.toast--c2 .toast-note {
display: block;
margin-top: 3px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
color: #f0dcb4;
text-shadow: 0 1px 0 rgba(24, 12, 2, 0.7);
}
.toast.toast--card.toast--c2 .toast-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: rgba(0, 0, 0, 0.4);
}
.toast.toast--card.toast--c2 .toast-bar i {
display: block;
height: 100%;
background: linear-gradient(90deg, #ffe0a0, #d8a949);
box-shadow: 0 0 8px rgba(255, 214, 128, 0.7);
animation: toastCountdown 2800ms linear forwards;
}
@keyframes toastCountdown { from { width: 100%; } to { width: 0%; } }
.toast.toast--card.toast--c2.is-warn, .toast.toast--card.toast--c2.is-error {
border-image: none;
background: linear-gradient(180deg, #7d2b1c 0%, #57190f 48%, #3d0f08 100%);
box-shadow:
inset 0 1px 0 rgba(255, 190, 160, 0.35),
inset 0 0 0 1px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(214, 96, 64, 0.6),
0 14px 26px rgba(0, 0, 0, 0.5);
}
.toast.toast--card.toast--c2.is-warn .toast-kicker,
.toast.toast--card.toast--c2.is-error .toast-kicker { color: #f2b39c; }
.toast.toast--card.toast--c2.is-warn .toast-value,
.toast.toast--card.toast--c2.is-error .toast-value { color: #ffd0b4; }
.toast.toast--card.toast--c2.is-warn .toast-med,
.toast.toast--card.toast--c2.is-error .toast-med {
background: radial-gradient(circle at 50% 32%, #7a3020, #2a0d05 78%);
box-shadow: inset 0 0 0 2px rgba(226, 124, 92, 0.9), inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.toast.toast--card.toast--c2.is-warn .toast-bar i,
.toast.toast--card.toast--c2.is-error .toast-bar i {
background: linear-gradient(90deg, #ffb59a, #d1543a);
box-shadow: 0 0 8px rgba(224, 110, 80, 0.6);
}
@media (max-width: 430px) {
.toast.toast--card.toast--c2 { padding: 9px 13px 10px 9px; }
.toast.toast--card.toast--c2 .toast-med { flex-basis: 36px; width: 36px; height: 36px; }
.toast.toast--card.toast--c2 .toast-med img { width: 22px; height: 22px; }
.toast.toast--card.toast--c2 .toast-value { font-size: 15px; }
}
/* --- 2. индикатор уровня: руны-пипсы --- */
.city-modal-head.city-modal-head--pips {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px 10px;
}
.city-modal-head--pips h3 { flex: 1 1 auto; min-width: 0; }
.city-modal-head--pips > span:not(.city-lvl-pips) { margin-top: 0; }
.city-lvl-pips {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
margin-top: 0;
}
.city-lvl-pips em {
font-style: normal;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.01em;
text-transform: none;
color: #3b2409;
text-shadow: 0 1px 0 rgba(255, 250, 232, 0.65);
white-space: nowrap;
}
.city-lvl-pips u { display: flex; gap: 3px; text-decoration: none; }
.city-lvl-pips i {
width: 9px;
height: 9px;
transform: rotate(45deg);
border-radius: 2px;
background: rgba(90, 62, 24, 0.22);
box-shadow: inset 0 0 0 1px rgba(120, 86, 40, 0.4);
}
.city-lvl-pips i.on {
background: linear-gradient(160deg, #ffe9ad, #d8a949 55%, #8a621f);
box-shadow: 0 0 5px rgba(230, 180, 90, 0.6), inset 0 0 0 1px rgba(120, 86, 40, 0.4);
}
/* --- 3. ускорители: вариант Б (строка «Ускорить» + три капсулы-чипа) --- */
.city-boosts2 {
margin: 10px 0 2px;
padding: 9px 10px 10px;
border-radius: 13px;
background: linear-gradient(180deg, rgba(92, 64, 26, 0.2), rgba(92, 64, 26, 0.07));
box-shadow: inset 0 0 0 1px rgba(146, 106, 48, 0.35), inset 0 3px 6px rgba(70, 44, 14, 0.16);
}
.city-boosts2-cap {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 8px;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a6a33;
}
.city-boosts2-cap .city-ico, .city-boosts2-cap img { width: 18px; height: 18px; }
.city-boosts2-chips { display: flex; gap: 7px; }
.city-chip {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 6px;
border: 0;
border-radius: 20px;
cursor: pointer;
font-size: 12.5px;
font-weight: 900;
color: #fff6de;
text-shadow: 0 1px 0 rgba(12, 34, 52, 0.55);
background: linear-gradient(180deg, #4f83c4, #2c5891 65%, #1e3f6c);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 236, 180, 0.28), 0 2px 0 rgba(16, 32, 54, 0.5);
}
.city-chip .city-ico, .city-chip img { width: 17px; height: 17px; flex: 0 0 auto; }
.city-chip span { white-space: nowrap; }
.city-chip i {
font-style: normal;
font-size: 10.5px;
font-weight: 900;
opacity: 0.92;
display: inline-flex;
align-items: center;
gap: 2px;
}
.city-chip i .city-ico, .city-chip i img { width: 13px; height: 13px; }
.city-chip:active { transform: translateY(1px); }
.city-chip.is-buy {
color: #3a2404;
text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6);
background: linear-gradient(180deg, #ffdf95, #e2ab45 65%, #b6801f);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(120, 86, 40, 0.35), 0 2px 0 rgba(110, 74, 16, 0.5);
}
@media (max-width: 430px) {
.city-chip { font-size: 11.5px; padding: 8px 4px; gap: 4px; }
.city-chip .city-ico, .city-chip img { width: 15px; height: 15px; }
}
/* =============================================================================================
Фаза 101.2 — остальные детали варианта 5 концепта 2: шапка без плашки (название + капс-кикер
слева, руны-пипсы справа), описание-«записка» с золотой линейкой, декоративный разделитель
с ромбами («Характеристики» / «Требования»). Дописано в конец, переопределяет Фазу 101.1.
============================================================================================= */
.city-modal-head.city-modal-head--pips {
display: flex;
width: auto;
max-width: none;
align-items: center;
gap: 11px;
margin: 0 0px 13px 0;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.city-modal-head--pips .city-modal-head-t { flex: 1 1 auto; min-width: 0; }
.city-modal-head--pips .city-modal-head-t h3 {
margin: 0;
font-family: 'PT Serif', Georgia, serif;
font-size: 20px;
font-weight: 700;
line-height: 1.16;
letter-spacing: 0.01em;
color: #3b2409;
text-shadow: 0 1px 0 rgba(255, 250, 232, 0.75);
}
.city-modal-head--pips .city-modal-head-sub {
display: block;
margin-top: 5px;
font-size: 9.5px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a6a33;
}
.city-modal-head--pips > span:not(.city-lvl-pips):not(.city-modal-head-t) {
flex: 0 0 auto;
margin-top: 0;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a6a33;
}
/* описание — вклеенная «записка» с золотой линейкой слева */
.city-modal-card .city-note {
position: relative;
margin: 0 0 14px;
padding: 10px 13px 10px 17px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(120, 86, 40, 0.13), rgba(120, 86, 40, 0.05));
box-shadow: inset 0 0 0 1px rgba(146, 106, 48, 0.28), inset 0 2px 4px rgba(90, 60, 20, 0.08);
}
.city-modal-card .city-note::before {
content: "";
position: absolute;
left: 6px;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #ffe9ad, #d8a949 55%, #8a621f);
}
.city-modal-card .city-note p {
margin: 0;
font-family: 'PT Serif', Georgia, serif;
font-size: 13.5px;
font-style: italic;
font-weight: 400;
line-height: 1.45;
color: #5c4118;
}
/* декоративный разделитель с ромбами */
.city-modal-card .city-div { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.city-modal-card .city-div i {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(150, 110, 55, 0.55), transparent);
}
.city-modal-card .city-div b {
flex: 0 0 auto;
font-size: 9.5px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8a6a33;
}
.city-modal-card .city-div s {
flex: 0 0 auto;
width: 7px;
height: 7px;
transform: rotate(45deg);
text-decoration: none;
background: linear-gradient(160deg, #ffe9ad, #8a621f);
box-shadow: 0 0 0 1px rgba(120, 86, 40, 0.5);
}
@media (max-width: 430px) {
.city-modal-head--pips .city-modal-head-t h3 { font-size: 18.5px; }
.city-modal-card .city-note p { font-size: 13px; }
}
/* Фаза 101.2 — фикс: старое правило «.city-modal-head span» (капс, трекинг, цвет) ловило новый
контейнер названия .city-modal-head-t и переносилось на h3. Сбрасываем наследование. */
.city-modal-head--pips .city-modal-head-t {
display: block;
margin-top: 0;
font-size: inherit;
font-weight: inherit;
letter-spacing: normal;
text-transform: none;
color: inherit;
}
.city-modal-head--pips .city-modal-head-t h3 { text-transform: none; }
.city-modal-head.city-modal-head--pips { margin-top: 2px; }
/* Фаза 101.2 — фикс отступа: без плашки шапка уезжала под верхнюю кромку рамки модалки. */
.city-modal-card .city-modal-head.city-modal-head--pips { margin-top: 20px; }
@media (max-width: 430px) {
.city-modal-card .city-modal-head.city-modal-head--pips { margin-top: 20px; }
}
/* =============================================================================================
Фаза 101.3 — шрифт Rubik (подключён в index.php), крупное значение + приглушённый «/ предел»
в характеристиках и требованиях, разделители «ТРЕБУЕТСЯ» и «УСКОРИТЕЛИ» вместо подписей.
Append-only, переопределяет Фазы 101.1–101.2.
============================================================================================= */
/* Rubik для интерфейсного текста городских модалок и уведомлений (заголовки и «записка»
остаются на PT Serif). */
.city-modal-card,
.city-modal-card .city-info-row,
.city-modal-card .city-req,
.city-lvl-pips,
.city-boosts2,
.city-chip,
.city-modal-card .city-div b,
.city-modal-head--pips .city-modal-head-sub,
.toast.toast--card.toast--c2 {
font-family: 'Rubik', system-ui, -apple-system, sans-serif;
}
.city-modal-head--pips .city-modal-head-t h3,
.city-modal-card .city-note p {
font-family: 'PT Serif', Georgia, serif;
}
/* значения: число крупно, «/ предел» мельче и приглушённым цветом */
.city-modal-card .city-info-value,
.city-modal-card .city-req-value {
font-size: 18px;
font-weight: 900;
letter-spacing: 0.005em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #3b2409;
}
.city-modal-card .city-info-value em,
.city-modal-card .city-req-value em {
margin-left: 1px;
font-size: 13.5px;
font-style: normal;
font-weight: 800;
color: #9a7538;
}
.city-modal-card .city-req.is-bad .city-req-value { color: #8c3521; }
.city-modal-card .city-req.is-bad .city-req-value em { color: #b4795d; }
@media (max-width: 430px) {
.city-modal-card .city-info-value,
.city-modal-card .city-req-value { font-size: 16.5px; }
.city-modal-card .city-info-value em,
.city-modal-card .city-req-value em { font-size: 12.5px; }
}
/* блок ускорителей теперь под разделителем — прежняя подпись внутри не нужна */
.city-boosts2 { margin-top: 2px; padding-top: 10px; }
.city-boosts2-cap { display: none; }
/* =====================================================================================
Фаза 102: «Лапа Фортуны» (рулетка сокровищ), сцена вскрытия сундука и новая модалка
пополнения янтаря (вариант D утверждённого прототипа p103).
Все новые классы под префиксом tsr- (treasure) -- в прототипе они назывались .card/.reel/
.drops/.rows/.srow/.hero-*, что пересекается с существующими правилами этого файла,
поэтому при переносе имена изменены. Блок только дополняет файл (append-only).
===================================================================================== */
.tsr-overlay {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px 12px;
background: radial-gradient(circle at 50% 44%, rgba(255, 170, 60, .18), transparent 58%), rgba(8, 6, 5, .84);
backdrop-filter: blur(3px);
}
.tsr-modal, .tsr-shop {
position: relative; width: min(380px, 100%); max-height: min(90vh, 720px); overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.tsr-bal {
display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; flex: 0 0 auto;
background: linear-gradient(180deg, rgba(38, 24, 10, .95), rgba(20, 12, 5, .97));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .24), inset 0 0 0 1px rgba(116, 80, 36, .9);
}
.tsr-bal img { width: 19px; height: 19px; }
.tsr-bal b { font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 900; font-size: 13px; color: #fff4d8; }
.tsr-empty { margin: 18px 4px; text-align: center; font-size: 12.5px; color: #c0a689; }
/* ---------- разделитель ---------- */
.tsr-div { display: flex; align-items: center; gap: 8px; margin: 13px 0 9px; }
.tsr-div i {
width: 6px; height: 6px; flex: 0 0 auto; transform: rotate(45deg);
background: linear-gradient(180deg, #ffe2a4, #c8862a); box-shadow: 0 0 6px rgba(255, 190, 80, .55);
}
.tsr-div s {
flex: 1 1 auto; height: 1px; text-decoration: none;
background: linear-gradient(90deg, rgba(146, 104, 50, 0), rgba(196, 146, 66, .75), rgba(146, 104, 50, 0));
}
.tsr-div b {
flex: 0 0 auto; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
color: #e2c495; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* ---------- кнопки ---------- */
.tsr-cta {
position: relative; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 15px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden;
background: linear-gradient(180deg, #ffe7b0 0%, #f0bd55 42%, #cf8f26 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1.5px rgba(122, 78, 20, .95),
0 6px 0 #6d4512, 0 12px 22px rgba(0, 0, 0, .45);
transition: transform .1s, box-shadow .1s;
}
.tsr-cta::after {
content: ''; position: absolute; top: -70%; left: -40%; width: 45%; height: 240%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
transform: rotate(18deg); animation: tsrCtaShine 3.4s ease-in-out infinite;
}
@keyframes tsrCtaShine { 0%, 70% { left: -45%; } 100% { left: 115%; } }
.tsr-cta:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1.5px rgba(122, 78, 20, .95), 0 2px 0 #6d4512, 0 6px 14px rgba(0, 0, 0, .45); }
.tsr-cta[disabled] { filter: saturate(.55) brightness(.8); pointer-events: none; }
.tsr-cta-t { font-family: 'PT Serif', Georgia, serif; font-weight: 700; font-size: 16px; color: #3a2204; text-shadow: 0 1px 0 rgba(255, 252, 238, .6); }
.tsr-cta-price { display: flex; align-items: center; gap: 4px; font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 900; font-size: 12px; color: #4a2c06; }
.tsr-cta-price img { width: 15px; height: 15px; }
.tsr-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 800; font-size: 14px; transition: transform .1s; }
.tsr-btn:active { transform: translateY(2px); }
.tsr-btn--wood {
color: #ffe8bd; background: linear-gradient(180deg, #6b4a23, #2f1e0b);
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .3), inset 0 0 0 1px rgba(120, 84, 38, .95), 0 4px 0 #1c1105, 0 8px 16px rgba(0, 0, 0, .4);
}
.tsr-btn--gold {
color: #3a2204; text-shadow: 0 1px 0 rgba(255, 252, 238, .55);
background: linear-gradient(180deg, #ffe7b0, #d99f34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1px rgba(122, 78, 20, .9), 0 4px 0 #6d4512, 0 8px 16px rgba(0, 0, 0, .4);
}
.tsr-btn--sm { min-height: 34px; font-size: 12.5px; border-radius: 11px; }
.tsr-btn.is-spent { opacity: .4; pointer-events: none; }
/* переключатель «Быстро» */
.tsr-switch { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 12px; color: #c0a689; font-weight: 700; cursor: pointer; }
.tsr-switch input { display: none; }
.tsr-switch i {
width: 40px; height: 22px; border-radius: 999px; position: relative; display: block;
background: linear-gradient(180deg, rgba(24, 15, 6, .95), rgba(40, 26, 11, .95));
box-shadow: inset 0 0 0 1px rgba(116, 80, 36, .9), inset 0 2px 5px rgba(0, 0, 0, .6);
transition: background .2s;
}
.tsr-switch i::after {
content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(180deg, #f6dda8, #bb8a34);
box-shadow: 0 1px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
transition: transform .2s cubic-bezier(.3, 1.4, .4, 1);
}
.tsr-switch input:checked + i { background: linear-gradient(180deg, #7a5a1f, #4a3411); }
.tsr-switch input:checked + i::after { transform: translateX(18px); }
/* ---------- лента рулетки ---------- */
.tsr-case-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.tsr-case-title { font-family: 'PT Serif', Georgia, serif; font-weight: 700; font-size: 18px; color: #ffeec9; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.tsr-case-timer {
display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; border-radius: 999px;
font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; color: #ffe3ac;
background: linear-gradient(180deg, rgba(38, 24, 10, .95), rgba(20, 12, 5, .97));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .24), inset 0 0 0 1px rgba(116, 80, 36, .9);
}
.tsr-case-timer img { width: 16px; height: 16px; }
.tsr-case-timer.is-free { padding: 4px 10px; color: #3a2204; background: linear-gradient(180deg, #ffe2a4, #d39c33); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.tsr-reel {
position: relative; height: 250px; border-radius: 16px; overflow: hidden;
background: linear-gradient(180deg, #120c06, #1d1409 50%, #120c06);
box-shadow: inset 0 0 0 1.5px rgba(146, 104, 50, .85), inset 0 6px 18px rgba(0, 0, 0, .8);
}
.tsr-reel-mask {
position: absolute; inset: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.tsr-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.tsr-reel.is-spin .tsr-strip { filter: blur(1.6px); }
.tsr-item {
position: relative; height: 82px; display: flex; align-items: center; gap: 11px; padding: 0 13px 0 11px; overflow: hidden;
border-bottom: 1px solid rgba(146, 104, 50, .18);
}
.tsr-item::before {
content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 62%; opacity: .75; pointer-events: none;
background: linear-gradient(270deg, rgba(255, 255, 255, .06), transparent 82%);
}
.tsr-ico {
position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px;
background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .3) 74%);
box-shadow: inset 0 0 0 1px var(--rc, #9aa6b8), inset 0 1px 0 rgba(255, 232, 186, .16);
}
.tsr-item img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.tsr-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tsr-name { font-family: 'PT Serif', Georgia, serif; font-size: 14px; color: #f6e5c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsr-rar { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--rc, #9aa6b8); }
.tsr-note { font-size: 10px; color: #a3865c; }
.tsr-side { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tsr-qty { font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 17px; color: #fff4dd; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.tsr-pips { display: flex; gap: 3px; }
.tsr-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.tsr-pips i.on { background: var(--rc, #9aa6b8); box-shadow: 0 0 7px var(--rc, #9aa6b8); }
.tsr-edge {
position: absolute; right: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px 0 0 3px; opacity: .85;
background: linear-gradient(180deg, transparent, var(--rc, #9aa6b8), transparent);
}
.tsr-slot {
position: absolute; left: 8px; right: 8px; top: 50%; height: 82px; margin-top: -41px; border-radius: 12px; pointer-events: none;
box-shadow: inset 0 0 0 1.5px rgba(255, 214, 138, .5), 0 0 0 1px rgba(0, 0, 0, .5);
background: linear-gradient(90deg, rgba(255, 200, 110, .1), rgba(255, 200, 110, .02) 45%, rgba(255, 200, 110, .1));
}
.tsr-tick { position: absolute; left: 50%; margin-left: -9px; width: 18px; height: 11px; pointer-events: none; }
.tsr-tick::after {
content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #ffe2a4, #cf9530);
clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
.tsr-tick--t { top: calc(50% - 52px); }
.tsr-tick--b { top: calc(50% + 41px); transform: rotate(180deg); }
.tsr-glow {
position: absolute; left: 8px; right: 8px; top: 50%; height: 82px; margin-top: -41px; border-radius: 12px;
pointer-events: none; opacity: 0; background: radial-gradient(closest-side, var(--rc, #ffb23d), transparent 76%);
}
.tsr-glow.is-win { animation: tsrReelWin 1.5s ease-out both; }
@keyframes tsrReelWin { 0% { opacity: 0; transform: scale(.9); } 22% { opacity: .75; transform: scale(1.04); } 100% { opacity: .22; transform: scale(1); } }
.tsr-case-row { display: flex; align-items: center; gap: 11px; margin: 13px 0 4px; }
.tsr-case-row .tsr-cta { flex: 1 1 auto; }
/* ---------- таблица дропа ---------- */
.tsr-drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tsr-drop {
position: relative; padding: 8px 5px 9px; border-radius: 12px; text-align: center;
background: linear-gradient(180deg, rgba(58, 38, 16, .8), rgba(26, 16, 7, .92));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .16), inset 0 0 0 1px rgba(116, 80, 36, .65);
}
.tsr-drop img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.tsr-drop-n { display: block; margin-top: 3px; font-family: 'PT Serif', Georgia, serif; font-size: 11px; color: #f0dfc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsr-drop-r { display: block; font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 10px; font-weight: 800; color: var(--rc, #9aa6b8); }
.tsr-drop-p { position: absolute; right: 4px; top: 4px; font-size: 9px; font-weight: 800; color: #a98d63; }
.tsr-drop::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: var(--rc, #9aa6b8); opacity: .85; }
/* ---------- инвентарь сундуков ---------- */
.tsr-chests { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tsr-chest-tile {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 8px 9px; border-radius: 14px; text-align: center;
background: linear-gradient(180deg, rgba(58, 38, 16, .78), rgba(26, 16, 7, .92));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .14), inset 0 0 0 1px rgba(116, 80, 36, .65);
}
.tsr-chest-tile.is-have { box-shadow: inset 0 1px 0 rgba(255, 224, 168, .2), 0 0 0 1px var(--rc, #9aa6b8), 0 0 16px rgba(255, 186, 80, .18); }
.tsr-chest-tile img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .55)); }
.tsr-ct-qty {
position: absolute; right: 7px; top: 7px; min-width: 22px; padding: 1px 6px; border-radius: 999px;
font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 11px; font-weight: 900; color: #3a2204;
background: linear-gradient(180deg, #ffe9b6, #d9a13a); box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.tsr-ct-name { font-family: 'PT Serif', Georgia, serif; font-size: 12.5px; font-weight: 700; color: #ffeec9; }
.tsr-ct-sub { font-size: 9.5px; line-height: 1.25; color: #b79a6d; min-height: 24px; }
.tsr-ct-btn {
margin-top: 5px; width: 100%; min-height: 32px; border: 0; border-radius: 10px; cursor: pointer;
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 12.5px; color: #43290a;
background: linear-gradient(180deg, #ffe7b0, #cf8f26); box-shadow: 0 3px 0 #6d4512, inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tsr-ct-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d4512, inset 0 1px 0 rgba(255, 255, 255, .5); }
.tsr-ct-btn[disabled] { filter: saturate(.25) brightness(.72); pointer-events: none; }
/* ---------- сцена вскрытия сундука ---------- */
.tsr-stage {
position: relative; height: 330px; border-radius: 22px; overflow: hidden; touch-action: manipulation;
background:
radial-gradient(70% 50% at 50% 38%, rgba(255, 186, 74, .16), rgba(255, 186, 74, 0) 70%),
linear-gradient(180deg, #2a1c0d 0%, #170f07 58%, #100a05 100%);
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .16), inset 0 0 0 1px rgba(116, 80, 36, .75), 0 14px 34px rgba(0, 0, 0, .5);
}
.tsr-sky {
position: absolute; inset: -20%; opacity: .5;
background:
radial-gradient(1.5px 1.5px at 20% 22%, #ffe9bd, transparent 100%),
radial-gradient(1.5px 1.5px at 72% 15%, #ffe0a5, transparent 100%),
radial-gradient(1.2px 1.2px at 38% 8%, #fff2d6, transparent 100%),
radial-gradient(1.4px 1.4px at 86% 32%, #ffd992, transparent 100%),
radial-gradient(1.2px 1.2px at 12% 48%, #ffeec6, transparent 100%);
animation: tsrTwinkle 4.5s ease-in-out infinite;
}
@keyframes tsrTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
.tsr-rays {
position: absolute; left: 50%; top: 52%; width: 460px; height: 460px; margin: -230px 0 0 -230px; opacity: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 205, 120, .17) 0deg 5deg, rgba(255, 205, 120, 0) 5deg 16deg);
-webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .35) 52%, transparent 74%);
mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .35) 52%, transparent 74%);
transition: opacity .5s ease; animation: tsrSpin 26s linear infinite;
}
@keyframes tsrSpin { to { transform: rotate(360deg); } }
.tsr-stage.is-charging .tsr-rays { opacity: .55; }
.tsr-stage.is-open .tsr-rays { opacity: .9; }
.tsr-halo {
position: absolute; left: 50%; top: 56%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; opacity: .35;
background: radial-gradient(circle, rgba(255, 196, 92, .5) 0%, rgba(255, 170, 60, .18) 42%, rgba(255, 170, 60, 0) 70%);
animation: tsrBreath 3.2s ease-in-out infinite;
}
@keyframes tsrBreath { 0%, 100% { transform: scale(.94); opacity: .3; } 50% { transform: scale(1.06); opacity: .5; } }
.tsr-stage.is-charging .tsr-halo { animation-duration: .5s; opacity: .85; }
.tsr-runering { position: absolute; left: 50%; top: 68%; width: 216px; height: 76px; margin-left: -108px; animation: tsrRing 18s linear infinite; }
.tsr-runering i {
position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px;
background: linear-gradient(180deg, #ffe6b0, #d79734); box-shadow: 0 0 9px rgba(255, 196, 92, .85);
}
.tsr-runering i:nth-child(1) { transform: rotate(0deg) translateX(104px) scaleY(.36); }
.tsr-runering i:nth-child(2) { transform: rotate(60deg) translateX(104px) scaleY(.36); }
.tsr-runering i:nth-child(3) { transform: rotate(120deg) translateX(104px) scaleY(.36); }
.tsr-runering i:nth-child(4) { transform: rotate(180deg) translateX(104px) scaleY(.36); }
.tsr-runering i:nth-child(5) { transform: rotate(240deg) translateX(104px) scaleY(.36); }
.tsr-runering i:nth-child(6) { transform: rotate(300deg) translateX(104px) scaleY(.36); }
@keyframes tsrRing { to { transform: rotate(360deg); } }
.tsr-stage.is-charging .tsr-runering { animation-duration: 1.6s; }
.tsr-stage.is-cards .tsr-runering { opacity: .25; }
.tsr-plate {
position: absolute; left: 50%; bottom: 40px; width: 190px; height: 34px; margin-left: -95px; border-radius: 50%; filter: blur(1px);
background: radial-gradient(closest-side, rgba(255, 190, 90, .42), rgba(255, 170, 60, 0) 72%);
}
.tsr-fx { position: absolute; inset: 0; pointer-events: none; }
.tsr-chest {
position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -108px 0 0 -100px;
transform-origin: 50% 90%; animation: tsrFloat 3.4s ease-in-out infinite;
}
@keyframes tsrFloat { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
.tsr-cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
.tsr-cimg--open { opacity: 0; transform: scale(.94); transition: opacity .14s ease, transform .5s cubic-bezier(.16, 1.5, .4, 1); }
.tsr-cshadow {
position: absolute; left: 50%; bottom: -14px; width: 150px; height: 22px; margin-left: -75px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent 72%);
}
.tsr-stage.is-charging .tsr-chest { animation: tsrShake .12s linear infinite; }
@keyframes tsrShake {
0% { transform: translate(-2px, 0) rotate(-1.4deg); }
25% { transform: translate(2px, -1px) rotate(1.4deg); }
50% { transform: translate(-2px, 1px) rotate(-1deg); }
75% { transform: translate(2px, 0) rotate(1deg); }
100% { transform: translate(-2px, 0) rotate(-1.4deg); }
}
.tsr-stage.is-open .tsr-chest { animation: tsrPop .6s cubic-bezier(.2, 1.6, .35, 1) both; }
@keyframes tsrPop { 0% { transform: scale(.9) translateY(6px); } 55% { transform: scale(1.1) translateY(-10px); } 100% { transform: scale(1) translateY(0); } }
.tsr-stage.is-open .tsr-cimg--closed { opacity: 0; }
.tsr-stage.is-open .tsr-cimg--open { opacity: 1; transform: scale(1); }
.tsr-stage.is-cards .tsr-chest {
transform: scale(.52) translateY(96px); opacity: .22; animation: none;
transition: transform .6s cubic-bezier(.3, .9, .2, 1), opacity .6s;
}
.tsr-beam {
position: absolute; left: 50%; bottom: 96px; width: 120px; margin-left: -60px; height: 0; opacity: 0; filter: blur(3px);
background: linear-gradient(180deg, rgba(255, 235, 180, 0) 0%, rgba(255, 216, 130, .55) 45%, rgba(255, 196, 92, .85) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.tsr-stage.is-open .tsr-beam { animation: tsrBeam .9s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes tsrBeam { 0% { height: 0; opacity: 0; } 35% { height: 230px; opacity: 1; } 100% { height: 210px; opacity: .55; } }
.tsr-stage.is-cards .tsr-beam { opacity: .35; }
.tsr-flash {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
background: radial-gradient(circle at 50% 56%, #fff 0%, rgba(255, 236, 190, .85) 26%, rgba(255, 210, 130, 0) 64%);
}
.tsr-flash.is-fire { animation: tsrFlash .58s ease-out both; }
@keyframes tsrFlash { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.tsr-spark {
position: absolute; left: 50%; top: 56%; width: var(--s, 7px); height: var(--s, 7px); border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fff6df, var(--c, #ffc55e) 55%, rgba(255, 150, 40, 0) 100%);
box-shadow: 0 0 10px var(--c, #ffc55e);
animation: tsrSparkFly var(--d, 1s) cubic-bezier(.12, .8, .3, 1) var(--dl, 0s) both;
}
@keyframes tsrSparkFly {
0% { transform: translate(0, 0) scale(.4); opacity: 0; }
12% { opacity: 1; }
100% { transform: translate(var(--x, 0), var(--y, -120px)) scale(var(--sc, 1.1)); opacity: 0; }
}
.tsr-shard {
position: absolute; left: 50%; top: 56%; width: 4px; height: 12px; border-radius: 2px;
background: linear-gradient(180deg, #fff3d4, var(--c, #ffb93f));
animation: tsrShardFly var(--d, 1.1s) cubic-bezier(.1, .75, .3, 1) var(--dl, 0s) both;
}
@keyframes tsrShardFly {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translate(var(--x, 0), var(--y, -150px)) rotate(var(--r, 320deg)); opacity: 0; }
}
/* ---------- карты из сундука ---------- */
.tsr-cards {
position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px;
padding-bottom: 34px; pointer-events: none;
}
.tsr-stage.is-cards .tsr-cards { pointer-events: auto; }
.tsr-card { position: relative; width: 96px; height: 138px; flex: 0 0 auto; perspective: 900px; opacity: 0; transform-origin: 50% 100%; }
.tsr-card.is-out { animation: tsrCardOut .66s cubic-bezier(.16, 1.3, .3, 1) both; animation-delay: var(--dl, 0s); }
@keyframes tsrCardOut {
0% { opacity: 0; transform: translateY(74px) scale(.35) rotate(var(--rot0, 0deg)); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}
.tsr-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .58s cubic-bezier(.3, 1.05, .3, 1); }
.tsr-card.is-flip .tsr-card-in { transform: rotateY(180deg); }
.tsr-cards .tsr-card:not(.is-flip) { cursor: pointer; }
.tsr-cards .tsr-card:not(.is-flip) .tsr-card-in { animation: tsrCardWait 2.4s ease-in-out infinite; }
@keyframes tsrCardWait { 0%, 100% { transform: translateY(0) rotateY(0deg); } 50% { transform: translateY(-5px) rotateY(-6deg); } }
.tsr-cards .tsr-card:not(.is-flip)::after {
content: ''; position: absolute; left: 50%; bottom: -16px; width: 26px; height: 5px; transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(ellipse, rgba(255, 208, 106, .5), transparent 70%);
animation: tsrTapPulse 1.5s ease-in-out infinite;
}
@keyframes tsrTapPulse { 0%, 100% { opacity: .6; transform: translateX(-50%) translateY(0); } 50% { opacity: 1; transform: translateX(-50%) translateY(-3px); } }
.tsr-card.is-flip { opacity: 1; animation: tsrCardLand .34s cubic-bezier(.2, 1.5, .3, 1) forwards; }
@keyframes tsrCardLand { 0% { opacity: 1; transform: translateY(-6px) scale(1.06); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.tsr-card-face, .tsr-card-back {
position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tsr-card-back {
display: grid; place-items: center;
border-image: url("../img/ui/r_wood.png") 34 fill / 11px stretch;
box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}
.tsr-card-back::before { content: ''; position: absolute; inset: 7px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(220, 168, 84, .55); }
.tsr-card-back img { width: 40px; height: 40px; opacity: .92; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.tsr-card-back::after {
content: ''; position: absolute; top: -60%; left: -40%; width: 60%; height: 220%; transform: rotate(18deg);
background: linear-gradient(90deg, rgba(255, 245, 220, 0), rgba(255, 245, 220, .35), rgba(255, 245, 220, 0));
animation: tsrCardShine 2.6s ease-in-out infinite;
}
@keyframes tsrCardShine { 0%, 65% { left: -50%; } 100% { left: 110%; } }
.tsr-card-face {
transform: rotateY(180deg); display: flex; flex-direction: column;
background: linear-gradient(180deg, #f3e4c4, #d9c29a);
box-shadow: inset 0 0 0 1.5px rgba(120, 82, 34, .9), 0 10px 22px rgba(0, 0, 0, .5);
}
.tsr-card-art { position: relative; flex: 1 1 auto; overflow: hidden; }
.tsr-card-art::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(70% 60% at 50% 38%, var(--aura, rgba(255, 190, 90, .55)), rgba(0, 0, 0, 0) 72%), linear-gradient(180deg, #2a1d0e, #120c06);
}
.tsr-card-art img {
position: absolute; left: 50%; top: 50%; width: 94%; height: 94%; transform: translate(-50%, -50%);
object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}
.tsr-card-tier { position: absolute; left: 5px; top: 5px; display: flex; gap: 2px; }
.tsr-card-tier i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.tsr-card-tier i.on { background: var(--rc, #ffb23d); box-shadow: 0 0 6px var(--rc, #ffb23d); }
.tsr-card-kind {
position: absolute; right: 4px; top: 4px; padding: 2px 5px; border-radius: 5px;
font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #1a1008;
background: rgba(255, 224, 168, .88);
}
.tsr-card-plate {
flex: 0 0 auto; padding: 5px 6px 6px; text-align: center;
background: linear-gradient(180deg, rgba(60, 40, 18, .95), rgba(32, 21, 9, .98));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .3);
}
.tsr-card-name { display: block; font-family: 'PT Serif', Georgia, serif; font-weight: 700; font-size: 11.5px; line-height: 1.1; color: #ffeec9; }
.tsr-card-rar { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--rc, #ffb23d); }
.tsr-card-glow {
position: absolute; inset: -14px; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .4s;
background: radial-gradient(closest-side, var(--rc, #ffb23d), rgba(0, 0, 0, 0) 70%);
}
.tsr-card.is-flip .tsr-card-glow { opacity: .42; }
.tsr-card.is-legend.is-flip .tsr-card-glow { opacity: .65; animation: tsrLegendPulse 1.6s ease-in-out infinite; }
@keyframes tsrLegendPulse { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
.tsr-card-new {
position: absolute; left: 50%; top: -9px; transform: translateX(-50%) scale(0); z-index: 3;
padding: 2px 8px; border-radius: 999px; font-size: 8.5px; font-weight: 900; letter-spacing: .1em; white-space: nowrap;
color: #3d2406; background: linear-gradient(180deg, #fff0c4, #e0a93c);
box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.tsr-card-new--dup { color: #10222f; background: linear-gradient(180deg, #d4efff, #6fb6ff); }
.tsr-card.is-flip .tsr-card-new { animation: tsrNewPop .4s cubic-bezier(.2, 1.7, .3, 1) .28s both; }
@keyframes tsrNewPop { to { transform: translateX(-50%) scale(1); } }
/* ---------- подвал и результат сцены ---------- */
.tsr-chest-foot { margin-top: 14px; text-align: center; transition: opacity .3s; }
.tsr-chest-foot.is-hide { display: none; }
.tsr-locks { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.tsr-pip { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 224, 168, .18); box-shadow: inset 0 0 0 1px rgba(146, 104, 50, .8); transition: background .3s, box-shadow .3s; }
.tsr-pip.is-on { background: linear-gradient(180deg, #ffe2a4, #cf9530); box-shadow: 0 0 8px rgba(255, 190, 80, .8); }
.tsr-chest-hint { font-size: 11.5px; color: #c0a689; }
.tsr-result { margin-top: 12px; min-height: 44px; display: none; }
.tsr-result.is-on { display: block; animation: tsrFadeIn .3s ease both; }
@keyframes tsrFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tsr-result-row { display: flex; gap: 9px; }
.tsr-result-row .tsr-btn { flex: 1 1 0; }
.tsr-count { flex: 0 0 auto; align-self: center; font-size: 11.5px; color: #c9a877; }
.tsr-count b { font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 16px; font-weight: 800; color: #ffe0a3; }
.tsr-count em { font-style: normal; margin: 0 4px 0 1px; font-size: 12px; color: #8f7245; }
/* ---------- кнопка рулетки на карте города ---------- */
.city-fortune-btn {
position: absolute; right: 12px; top: calc(var(--hud-height, 96px) + 12px); z-index: 44;
width: 62px; padding: 0; border: 0; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 2px;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}
.city-fortune-btn img { width: 62px; height: 62px; object-fit: contain; animation: tsrFortuneBob 3.2s ease-in-out infinite; }
@keyframes tsrFortuneBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
.city-fortune-btn b {
padding: 2px 8px; border-radius: 999px; font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 9.5px; font-weight: 900;
letter-spacing: .06em; text-transform: uppercase; color: #3a2204; white-space: nowrap;
background: linear-gradient(180deg, #ffe9b6, #d9a13a); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.city-fortune-btn:active img { transform: translateY(2px) scale(.96); }
.city-fortune-btn.has-free b { color: #10240f; background: linear-gradient(180deg, #ccf7cf, #62b071); }
/* ---------- модалка янтаря: вариант D (герой-набор + тонкие строки) ---------- */
.tsr-shop { padding-bottom: 14px; }
.tsr-hero {
position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 12px 12px 13px; margin-bottom: 9px;
border-image: url("../img/ui/r_wood.png") 34 fill / 13px stretch;
box-shadow: 0 0 0 1px rgba(255, 206, 110, .45), 0 0 18px rgba(255, 186, 80, .25);
}
.tsr-hero-ray {
position: absolute; inset: -60% -20%; pointer-events: none;
background: repeating-conic-gradient(from 0deg at 18% 50%, rgba(255, 196, 92, .16) 0deg 4deg, rgba(255, 196, 92, 0) 4deg 14deg);
animation: tsrSpin 30s linear infinite;
}
.tsr-hero > img {
position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain;
filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .6)); animation: tsrHeroBob 2.8s ease-in-out infinite;
}
@keyframes tsrHeroBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } }
.tsr-hero-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tsr-hero-flag {
align-self: flex-start; margin-bottom: 1px; padding: 1px 8px; border-radius: 7px;
font-size: 8.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: #35110a;
background: linear-gradient(180deg, #ffd0a0, #e0642c);
}
.tsr-hero-amt {
display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; white-space: nowrap;
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.05; color: #fff3d8;
text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.tsr-hero-amt em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #86d191; white-space: nowrap; }
.tsr-hero-sub { font-size: 10px; color: #c1a375; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsr-hero-buy {
position: relative; z-index: 1; flex: 0 0 auto; min-width: 82px; border: 0; cursor: pointer; padding: 9px 10px; border-radius: 11px;
display: flex; align-items: center; justify-content: center; gap: 3px;
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: #43290a;
background: linear-gradient(180deg, #ffe7b0, #cf8f26); box-shadow: 0 4px 0 #6d4512, inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tsr-hero-buy svg { width: 13px; height: 13px; }
.tsr-hero-buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #6d4512, inset 0 1px 0 rgba(255, 255, 255, .5); }
.tsr-hero-buy[disabled], .tsr-srow[disabled] { filter: saturate(.4) brightness(.8); pointer-events: none; }
.tsr-rows { display: flex; flex-direction: column; gap: 6px; }
.tsr-srow {
display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 9px; padding: 6px 9px;
border: 0; cursor: pointer; text-align: left;
border-image: url("../img/ui/r_wood.png") 34 fill / 11px stretch;
}
.tsr-srow:active { transform: translateY(1px); filter: brightness(1.06); }
.tsr-srow img { width: 36px; height: 36px; object-fit: contain; }
.tsr-srow-amt { font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 17px; color: #ffeec9; }
.tsr-srow-bonus { font-style: normal; font-size: 11px; font-weight: 800; color: #86d191; }
.tsr-srow-bonus--none { color: #7d6640; }
.tsr-srow-price {
min-width: 74px; text-align: center; padding: 5px 10px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; gap: 3px;
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 800; font-size: 12.5px; color: #43290a;
background: linear-gradient(180deg, #ffe7b0, #cf8f26); box-shadow: 0 3px 0 #6d4512;
}
.tsr-srow-price svg { width: 12px; height: 12px; }
.tsr-repeat {
display: flex; align-items: center; gap: 8px; margin: 0 0 9px; padding: 6px 9px; border-radius: 11px;
background: linear-gradient(180deg, rgba(58, 38, 16, .8), rgba(26, 16, 7, .92));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .16), inset 0 0 0 1px rgba(116, 80, 36, .65); cursor: pointer;
}
.tsr-repeat img { width: 26px; height: 26px; }
.tsr-repeat-t { flex: 1 1 auto; font-size: 11px; color: #c1a375; }
.tsr-repeat-t b { color: #ffeec9; font-weight: 800; }
.tsr-safe { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-size: 11px; color: #a3865c; }
.tsr-safe-i { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #ffe4a8, #b47f2a); box-shadow: 0 0 8px rgba(255, 196, 96, .5); }
.tsr-shop-status { margin: 16px 4px; text-align: center; font-size: 12.5px; color: #c0a689; }
@media (max-width: 400px) {
.tsr-stage { height: 306px; }
.tsr-card { width: 90px; height: 130px; }
.tsr-reel { height: 232px; }
.tsr-chests { gap: 8px; }
.city-fortune-btn, .city-fortune-btn img { width: 56px; }
.city-fortune-btn img { height: 56px; }
}
/* контейнеры экранов рулетки / сундука */
.tsr-case { position: relative; }
.tsr-stage-hold { position: relative; }
.tsr-cta--slim { min-height: 44px; border-radius: 13px; }
.tsr-cta--slim .tsr-cta-t { font-size: 15px; }
/* иконка-картинка внутри бейджа кнопки «Лапа Фортуны» в Коллекции */
.lane-clash-predict-btn .misc-icon-badge img { width: 20px; height: 20px; object-fit: contain; display: block; }
/* Фаза 102 (правка по итогам QA): собственная тёмная панель вместо пергаментной
.city-modal-card -- утверждённый концепт p103 построен на тёмном фоне, светлый пергамент
убивал контраст подписей (#c0a689 по светлому) и обрезал сетку призов по ширине. */
.tsr-modal {
padding: 15px 14px 16px; border-radius: 22px; color: #fff3da;
background:
radial-gradient(120% 80% at 50% 0%, rgba(255, 176, 66, .12), rgba(255, 176, 66, 0) 62%),
linear-gradient(180deg, #2b1c0e 0%, #1a1108 58%, #120c06 100%);
box-shadow:
inset 0 1px 0 rgba(255, 231, 182, .22), inset 0 0 0 2px rgba(146, 104, 50, .95),
0 0 0 1px rgba(255, 206, 110, .28), 0 26px 60px rgba(0, 0, 0, .68);
}
.tsr-close {
position: absolute; right: 8px; top: 8px; z-index: 6; width: 34px; height: 34px; padding: 0;
border: 0; background: none; cursor: pointer;
}
.tsr-close img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }
.tsr-close:active { transform: scale(.94); }
.tsr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 38px; margin-bottom: 12px; }
.tsr-head-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tsr-head-t h3 {
margin: 0; font-family: 'PT Serif', Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.1;
color: #ffeec9; text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.tsr-head-sub { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #b1936a; }
.tsr-case-title { font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #b1936a; }
/* Фаза 102 (правки по итогам визуального QA):
1) border-image r_wood на тонких строках магазина и на герой-плашке при растяжении давал светлую
«рамку» по краю (текстура рассчитана на высокие блоки) -- заменено на тот же тёмный градиент
с золотым внутренним кантом, что у остальных плиток раздела;
2) бейдж типа карты переехал в низ арта и получил nowrap -- в две строки он наезжал на пипсы
редкости и на бейдж «Новое»;
3) плашка имени карты получила фиксированную высоту -- иначе двухстрочные имена ломали ряд;
4) лучи и луч света в сцене сундука приглушены, светлое пятно перебивало арт. */
.tsr-hero {
border-image: none; border-radius: 16px;
background:
radial-gradient(120% 90% at 22% 0%, rgba(255, 196, 92, .18), rgba(255, 196, 92, 0) 62%),
linear-gradient(180deg, rgba(74, 48, 20, .95), rgba(30, 19, 8, .98));
box-shadow: inset 0 1px 0 rgba(255, 231, 182, .26), inset 0 0 0 1.5px rgba(214, 160, 74, .85),
0 0 18px rgba(255, 186, 80, .22), 0 10px 22px rgba(0, 0, 0, .45);
}
.tsr-srow {
border-image: none; border-radius: 13px; padding: 8px 10px;
background: linear-gradient(180deg, rgba(58, 38, 16, .92), rgba(24, 15, 7, .96));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .18), inset 0 0 0 1px rgba(146, 104, 50, .85);
}
.tsr-card-back { border-image: none; border-radius: 12px; background: linear-gradient(180deg, #5c3d1b, #2a1a09); box-shadow: inset 0 0 0 1.5px rgba(214, 160, 74, .8), 0 8px 18px rgba(0, 0, 0, .5); }
.tsr-hero-sub { font-size: 10.5px; color: #c9ab7c; }
.tsr-repeat-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsr-card-kind {
top: auto; right: 4px; bottom: 4px; white-space: nowrap; max-width: calc(100% - 8px);
overflow: hidden; text-overflow: ellipsis; font-size: 7.5px; padding: 2px 4px;
}
.tsr-card-plate { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.tsr-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tsr-stage.is-charging .tsr-rays { opacity: .4; }
.tsr-stage.is-open .tsr-rays { opacity: .6; }
.tsr-stage.is-cards .tsr-rays { opacity: .34; }
.tsr-stage.is-cards .tsr-beam { opacity: .16; }
/* ===================== Фаза 102.1 — доработки по замечаниям =====================
Блок только ДОПОЛНЯЕТ ранее написанные правила (ничего не удаляется), поэтому все
изменения оформлены как перекрытия с конца файла.
п.1 Нарисованный кит модалок. Новые модалки («Лапа Фортуны», сундук, покупка янтаря)
переводятся на ту же деревянную раму с пергаментом, что и модалки взаимодействия
со зданиями (.city-modal-card → border-image modal.png + close.png в углу).
Поскольку пергамент светлый, все заголовки и подписи, ранее рассчитанные на тёмную
панель, здесь перекрашиваются в тёмно-коричневый; внутренние панели (лента, сетка
призов, сцена сундука, строки магазина) остаются тёмными — они читаются как врезки.
п.5 Максимальная высота всех модалок — 75dvh со скроллом внутри тела. */
.tsr-modal, .tsr-shop {
width: min(360px, 100%);
padding: 14px 40px 40px;
border-radius: 0;
border: 0;
border-image: url("../img/ui/modal.png") 168 fill / 48px stretch;
background: none;
box-shadow: none;
color: #3f2708;
filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .6));
display: flex;
flex-direction: column;
max-height: 75dvh;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
.tsr-modal::-webkit-scrollbar { width: 0; height: 0; }
.city-modal-card { max-height: 75dvh; }
/* Крестик и шапка скроллятся вместе с содержимым — рама border-image остаётся на месте. */
.tsr-modal > * { flex: 0 0 auto; }
/* Крестик — круглый, как в модалках зданий. */
.tsr-close {
right: -1px; top: -1px; width: 42px; height: 42px;
background: url("../img/ui/close.png") center / 100% 100% no-repeat;
transition: transform 110ms ease;
}
.tsr-close img { display: none; }
.tsr-close:active { transform: scale(.96); }
/* Текст по пергаменту. */
.tsr-head { padding-right: 40px; }
.tsr-head-t h3 { color: #3f2708; text-shadow: 0 1px 0 rgba(255, 244, 214, .5); }
.tsr-head-sub, .tsr-case-title { color: #7a5524; }
.tsr-empty, .tsr-shop-status, .tsr-chest-hint { color: #6b4a1c; }
.tsr-switch { color: #5c3f16; }
.tsr-safe { color: #6b4a1c; }
.tsr-div b { color: #5c3f16; }
.tsr-div s { background: linear-gradient(90deg, rgba(120, 82, 34, 0), rgba(120, 82, 34, .5), rgba(120, 82, 34, 0)); }
.tsr-div i { background: #8a6027; }
/* Узкая рама → компактнее карты и плитки, иначе ряд из трёх карт не влезает в 276px. */
.tsr-cards { gap: 5px; }
.tsr-card { width: 86px; height: 124px; }
@media (max-width: 400px) { .tsr-card { width: 82px; height: 118px; } }
/* п.3 Кратные прокрутки ×2/×5 под основной кнопкой. */
.tsr-multi-row { display: flex; gap: 8px; margin: 8px 0 2px; }
.tsr-mbtn {
flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px 6px; border: 0; border-radius: 12px; cursor: pointer; color: #ffeec9;
background: linear-gradient(180deg, rgba(74, 48, 20, .96), rgba(30, 19, 8, .98));
box-shadow: inset 0 1px 0 rgba(255, 231, 182, .22), inset 0 0 0 1.5px rgba(146, 104, 50, .9), 0 6px 14px rgba(0, 0, 0, .35);
transition: transform 110ms ease, filter 110ms ease;
}
.tsr-mbtn b { font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 14px; font-weight: 900; color: #ffdc8a; }
.tsr-mbtn em {
display: inline-flex; align-items: center; gap: 3px; font-style: normal;
font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 12px; font-weight: 800; color: #f2dcb0;
}
.tsr-mbtn em img { width: 15px; height: 15px; }
.tsr-mbtn:active { transform: scale(.97); }
.tsr-mbtn:disabled { filter: grayscale(.5) brightness(.8); cursor: default; }
/* Итог серии ×2/×5. */
.tsr-won {
margin: 10px 0 2px; padding: 9px 10px 10px; border-radius: 14px;
background: linear-gradient(180deg, rgba(44, 29, 12, .96), rgba(22, 14, 6, .98));
box-shadow: inset 0 1px 0 rgba(255, 224, 168, .18), inset 0 0 0 1px rgba(146, 104, 50, .85);
}
.tsr-won-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tsr-won-head b { font-size: 11.5px; font-weight: 800; color: #ffdc8a; }
.tsr-won-x { border: 0; background: none; padding: 0; font-size: 11px; font-weight: 700; color: #b1936a; cursor: pointer; }
.tsr-won-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tsr-won-i {
position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px;
background: linear-gradient(180deg, rgba(62, 40, 17, .95), rgba(26, 16, 7, .98));
box-shadow: inset 0 0 0 1px var(--rc, #9aa6b8), 0 0 10px rgba(255, 186, 80, .12);
}
.tsr-won-i img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.tsr-won-i em {
position: absolute; right: -2px; bottom: -3px; padding: 1px 4px; border-radius: 6px; font-style: normal;
font-family: 'Exo 2', 'Manrope', sans-serif; font-size: 9.5px; font-weight: 900; color: #1a1008;
background: linear-gradient(180deg, #ffe4a8, #e0ad4c);
}
/* п.4 Сундук вскрывается только по клику: подсказка + пульсация кликабельного сундука. */
.tsr-chest.is-tap { cursor: pointer; }
.tsr-chest.is-tap::after {
content: ''; position: absolute; left: 50%; top: 52%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 206, 110, .3), rgba(255, 206, 110, 0) 70%);
animation: tsrTapPulse 1.7s ease-in-out infinite;
}
@keyframes tsrTapPulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.08); } }
.tsr-chest-tap {
margin-top: 5px; font-size: 11.5px; font-weight: 800; color: #7a5524;
animation: tsrTapHint 1.9s ease-in-out infinite;
}
.tsr-chest-tap.is-hide { display: none; }
@keyframes tsrTapHint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* п.4 Анимация переворота вернулась: idle-покачивание переехало на отдельную обёртку,
раньше keyframes tsrCardWait на .tsr-card-in перебивал transition rotateY(180deg)
и карта «прыгала» в открытое состояние без анимации. */
.tsr-card-idle { position: absolute; inset: 0; transform-style: preserve-3d; }
.tsr-cards .tsr-card:not(.is-flip) .tsr-card-idle { animation: tsrCardWait 2.4s ease-in-out infinite; }
.tsr-cards .tsr-card:not(.is-flip) .tsr-card-in { animation: none; }
/* п.4 Арт занимает карточку целиком (были чёрные поля слева/справа и снизу из-за 94%/contain),
слои питомца растягиваются так же. */
.tsr-card-art img, .tsr-card-art .pet-layers {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none;
object-fit: cover; border-radius: 0;
}
.tsr-card-art .pet-layers { display: block; }
.tsr-card-art .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* п.4 Бейдж «Питомец/Заклинание» — по центру снизу арта. */
.tsr-card-kind {
left: 50%; right: auto; bottom: 4px; top: auto; transform: translateX(-50%);
max-width: calc(100% - 10px); text-align: center;
}
/* Фаза 102.1 (правка по итогам визуального QA рамы): верхняя кромка modal.png занимает ~40px,
поэтому шапка модалки уезжала под угловой узор, а заголовок ломался в две строки под крестиком.
Увеличен верхний отступ, уменьшен кегль заголовка, подпись уведена в одну строку. */
.tsr-modal, .tsr-shop { padding: 40px 34px 34px; }
.tsr-head { align-items: flex-start; padding-right: 30px; margin-bottom: 10px; }
.tsr-head-t h3 { font-size: 17px; }
.tsr-head-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; letter-spacing: .1em; }
.tsr-bal { padding: 3px 9px 3px 5px; }
.tsr-bal img { width: 17px; height: 17px; }
.tsr-bal b { font-size: 12px; }
/* Нижняя кромка рамы перекрывала последнюю строку контента при скролле. */
.tsr-modal > *:last-child { margin-bottom: 6px; }
/* Фаза 102.1 (правки по итогам QA на 390px внутри узкой рамы modal.png):
1) длинные имена карт («Искра Пробуждения») обрезались по ширине — разрешён перенос по слогам;
2) строка результата («0/3 вскрыто» + кнопки) не влезала в 276px и уезжала под раму;
3) в герой-плашке магазина «+11% янтаря» наезжал на кнопку покупки — бонус вынесен на строку ниже;
4) подсказка «Нажмите на сундук» упиралась в нижнюю кромку рамы. */
.tsr-card-name { font-size: 10.5px; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
.tsr-card-rar { font-size: 8px; letter-spacing: .06em; }
.tsr-result-row { gap: 6px; }
.tsr-count { font-size: 10px; white-space: nowrap; }
.tsr-result-row .tsr-btn { padding-left: 10px; padding-right: 10px; font-size: 11.5px; white-space: nowrap; }
.tsr-hero { padding-right: 10px; }
.tsr-hero-amt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.05; }
.tsr-hero-amt em { font-size: 9.5px; white-space: nowrap; }
.tsr-hero-buy { flex: 0 0 auto; }
.tsr-chest-foot { margin-bottom: 6px; }
/* Фаза 102.1: счётчик «N/3 вскрыто» на 390px залезал под кнопки — выносим его
отдельной строкой над кнопками и центрируем. */
.tsr-result-row { flex-wrap: wrap; justify-content: center; }
.tsr-result-row .tsr-count { flex: 0 0 100%; text-align: center; margin: 0 0 4px; }
/* Фаза 102.2 (правки по репортам: призы вылезали за раму, контент скроллился поверх модалки,
×2/×5 отличались от основной кнопки, перенос «Быстро»/таймера).
1) Скролл теперь во внутреннем контейнере .tsr-scroll: шапка и крестик остаются на месте,
а рама modal.png больше не перекрывается содержимым (у .tsr-modal overflow: hidden).
2) Сетка призов получает minmax(0, 1fr) + min-width: 0 — без этого содержимое карточек
растягивало колонки и правая колонка уезжала за padding-box.
3) ×2/×5 используют .tsr-cta (тот же градиент, рельеф и блик), строка — на всю ширину.
4) Верхняя строка: «Прокруток» + баланс янтаря + тумблер «Быстро»; таймер — в шапке. */
.tsr-modal { overflow: hidden; }
.tsr-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: none;
}
.tsr-scroll::-webkit-scrollbar { width: 0; height: 0; }
.tsr-scroll > *:last-child { margin-bottom: 6px; }
.tsr-drops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsr-drop { min-width: 0; overflow: hidden; }
.tsr-drop b, .tsr-drop em, .tsr-drop span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tsr-drop b { font-size: 10.5px; line-height: 1.2; }
.tsr-multi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 2px; }
.tsr-multi-row .tsr-cta { width: 100%; min-width: 0; }
.tsr-cta--multi { min-height: 40px; }
.tsr-cta--multi .tsr-cta-t { font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 900; font-size: 15px; }
.tsr-cta--multi .tsr-cta-price { font-size: 11.5px; }
.tsr-case-head { flex-wrap: nowrap; gap: 8px; }
.tsr-case-head .tsr-case-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsr-case-bal {
display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
padding: 3px 9px 3px 5px; border-radius: 999px;
background: linear-gradient(180deg, rgba(58, 34, 4, .92), rgba(32, 18, 3, .95));
box-shadow: inset 0 0 0 1.5px rgba(214, 160, 74, .85);
font-family: 'Exo 2', 'Manrope', sans-serif; font-weight: 900; font-size: 12px; color: #ffdc8a;
}
.tsr-case-bal img { width: 16px; height: 16px; }
.tsr-case-head .tsr-switch { margin-left: auto; }
.tsr-head .tsr-case-timer { flex: 0 0 auto; white-space: nowrap; }
/* Фаза 102.2: внутренности модалки можно было сдвинуть по горизонтали (жест/широкий ребёнок
давал горизонтальный скролл у .tsr-scroll). Запрещаем ось X полностью: скролл только
вертикальный, жест по X не перехватывается, дети не шире контейнера. */
.tsr-modal, .tsr-scroll { overflow-x: hidden; max-width: 100%; }
.tsr-scroll { touch-action: pan-y; overscroll-behavior-x: none; overscroll-behavior-y: contain; }
.tsr-scroll > * { max-width: 100%; }
.tsr-case, .tsr-stage-hold, .tsr-shop-list { min-width: 0; max-width: 100%; }
.tsr-case > *, .tsr-stage-hold > * { min-width: 0; max-width: 100%; }
.tsr-reel, .tsr-reel-mask, .tsr-strip { max-width: 100%; overflow-x: hidden; }
.tsr-won-grid, .tsr-chests, .tsr-cards { max-width: 100%; }
/* Фаза 102.2: внутренние блоки со сценами/лентой тоже не должны панорамироваться по X.
touch-action: pan-y запрещает горизонтальный жест, не обрезая при этом свечения и
вылетающие карты (overflow там остаётся видимым). */
.tsr-case, .tsr-stage, .tsr-stage-hold, .tsr-reel, .tsr-drops, .tsr-won-grid, .tsr-shop-list { touch-action: pan-y; }
/* Фаза 102.2 (регрессия предыдущего правила): `overflow-x: hidden` при `overflow-y: visible`
по спецификации превращает вторую ось в `auto`, поэтому маска и сама лента призов стали
вертикально прокручиваемыми — игрок мог отскроллить ленту и увидеть весь строп из 42 позиций
вместо трёх стартовых. Возвращаем маске сплошной hidden, а ленте — visible (её сдвигает
только transform), и запрещаем любой скролл-жест внутри окна рулетки. */
.tsr-reel, .tsr-reel-mask { overflow: hidden; }
.tsr-strip { overflow: visible; }
.tsr-reel, .tsr-reel-mask, .tsr-strip { touch-action: none; overscroll-behavior: none; }
/* `overflow: hidden` всё ещё оставляет элемент программно прокручиваемым (scrollTop можно
выставить из JS или сместить фокусом), поэтому маске ленты ставим `clip` — она перестаёт
быть скролл-контейнером вообще. */
.tsr-reel-mask { overflow: clip; }
/* Фаза 102.2: арт сундуков в PNG занимает ~52% ширины и ~58% высоты канвы (замерено по альфе
с порогом 40), а иконки ресурсов — 92–99%. При одинаковом боксе с object-fit: contain сундуки
выглядели почти вдвое мельче ресурсов. Компенсируем масштабом по data-kind="chest": бокс и
сетка не меняются, увеличивается только сама картинка. Для ленты и плиток призов запас по
месту есть, поэтому 1.7×/1.6× не задевает соседние элементы. */
.tsr-item[data-kind="chest"] img { transform: scale(1.7); transform-origin: center; }
.tsr-drop[data-kind="chest"] img { transform: scale(1.6); transform-origin: center; }
.tsr-won-i[data-kind="chest"] img { transform: scale(1.55); transform-origin: center; }
.tsr-item .tsr-ico, .tsr-drop, .tsr-won-i { overflow: hidden; }
/* Правка: у плиток «Выпало за N прокруток» бейдж количества лежит на нижней кромке, поэтому
overflow: hidden срезал цифры. Возвращаем видимый overflow, а масштаб сундука уменьшаем до
значения, при котором картинка остаётся внутри плитки. */
.tsr-won-i { overflow: visible; }
.tsr-won-i[data-kind="chest"] img { transform: scale(1.4); }
/* Правка: пилюля количества в «Выпало за N прокруток» была прижата за пределы плитки
(right: -2px; bottom: -3px) и обрезалась кромкой блока. Убираем свес — пилюля лежит внутри
плитки по центру низа, а сама картинка чуть приподнята, чтобы пилюля её не накрывала. */
.tsr-won-i em {
right: auto; left: 50%; bottom: 2px; transform: translateX(-50%);
max-width: calc(100% - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.tsr-won-i img { margin-bottom: 7px; }
/* Правка: на плитках «В этой рулетке» сундук при 1.6 подходил под бейдж вероятности в углу.
Слегка уменьшаем масштаб — читаемость сохраняется, наложения нет. */
.tsr-drop[data-kind="chest"] img { transform: scale(1.45); }
/* По правке: отступ справа у шапки модалки не нужен — обнуляем padding-right
(перекрывает 30px из блока .tsr-head выше, правило append-only). */
.tsr-head { padding-right: 0; }
/* ---------- Фаза 102.3: снят второй хедер .city-hud ----------
Ресурсные ячейки дублировали основной хедер (.game-hud.hud9) и убраны из разметки. Две рабочие
кнопки — «Собрать всё» и строители — живут теперь в плавающей группе .city-actions слева,
симметрично кнопке «Лапы Фортуны» справа. Правила только добавляются (файл append-only). */
.city-actions {
position: absolute;
z-index: 44;
left: 12px;
top: calc(var(--hud-height, 96px) + 12px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
pointer-events: none;
}
.city-actions > * { pointer-events: auto; }
.city-actions .city-hud-collect,
.city-actions .city-hud-builders { position: static; margin: 0; }
.city-actions .city-hud-builders {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
color: #ffeecb;
background: linear-gradient(180deg, rgba(52, 32, 14, 0.92), rgba(30, 18, 7, 0.94));
border: 1px solid rgba(214, 165, 96, 0.55);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 226, 170, 0.22);
cursor: pointer;
}
@media (max-width: 420px) {
.city-actions { left: 10px; gap: 6px; }
}
/* Фаза 102.3: названия призов в ленте — на Exo 2 вместо PT Serif (по правке дизайна).
Файл append-only, поэтому строка 10526 не редактируется, а перекрывается здесь. */
.tsr-name { font-family: 'Exo 2', 'Manrope', sans-serif; }
/* ---------- Фаза 102.3 (исправление): коллизия имени .city-actions ----------
Группа кнопок «Собрать всё» / строители была по ошибке названа .city-actions — этим же классом
уже размечен ряд кнопок действий над зданием («Улучшить», «Подробнее», «Перейти»), поэтому
правила выше сломали ему раскладку. Группа в разметке переименована в .city-hud-tools, а здесь
восстанавливаются исходные значения .city-actions (файл append-only, строки выше не правим). */
.city-actions {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -18%);
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
width: min(48vw, 236px);
gap: 5px;
z-index: 10;
pointer-events: auto;
animation: cityActionsIn 150ms ease-out;
}
.city-hud-tools {
position: absolute;
z-index: 44;
left: 12px;
top: calc(var(--hud-height, 96px) + 12px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
pointer-events: none;
}
.city-hud-tools > * { pointer-events: auto; }
.city-hud-tools .city-hud-collect,
.city-hud-tools .city-hud-builders { position: static; margin: 0; }
.city-hud-tools .city-hud-builders {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
color: #ffeecb;
background: linear-gradient(180deg, rgba(52, 32, 14, 0.92), rgba(30, 18, 7, 0.94));
border: 1px solid rgba(214, 165, 96, 0.55);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 226, 170, 0.22);
cursor: pointer;
}
@media (max-width: 420px) {
.city-hud-tools { left: 10px; gap: 6px; }
}
/* ==========================================================================
Фаза 117: ЛИСТ КАРТЫ -- стили перенесены ОДИН В ОДИН из утверждённого
прототипа proto_col1 (col1). Ничего не придумано заново: значения градиентов,
теней, радиусов, размеров и цветов скопированы из прототипа, изменены только
имена классов -- добавлен префикс cs- , чтобы generic-имена прототипа
(.sheet/.tabs/.tb/.hero/.stat/.block/.btn/.rail/.note...) не столкнулись с
уже существующими правилами репозитория. Блок только ДОПИСАН в конец файла.
========================================================================== */
.cs-sheet{
position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
background:
radial-gradient(80% 45% at 50% 0%, rgba(126,74,30,.4), rgba(10,7,5,0) 62%),
linear-gradient(180deg, #16100b 0%, #0a0705 62%);
font-family:'Exo 2',sans-serif
}
.cs-top{flex:none;display:flex;align-items:center;gap:10px;padding:13px 14px 4px}
.cs-ico{
width:38px;height:38px;flex:none;border:0;border-radius:13px;cursor:pointer;display:grid;place-items:center;
background:linear-gradient(180deg, rgba(48,33,22,.9), rgba(22,15,10,.95));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.22);color:#e8c98c;font-size:17px
}
.cs-top .cs-who{flex:1;min-width:0;text-align:center}
.cs-kick{display:block;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#b0894f}
.cs-top .cs-who b{display:block;font-family:'PT Serif',serif;font-size:18px;color:#ffe6ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-gold{color:#ffd98a}
.cs-hero{flex:none;display:flex;align-items:center;gap:13px;padding:6px 16px 10px}
.cs-hero .cs-frame{
position:relative;width:104px;flex:none;aspect-ratio:1/1.12;border-radius:16px;overflow:hidden;
box-shadow:inset 0 0 0 2px rgba(255,205,120,.5), 0 12px 26px rgba(0,0,0,.6)
}
.cs-hero .cs-frame img{width:100%;height:100%;object-fit:cover;display:block}
.cs-hero .cs-frame:after{content:'';position:absolute;inset:0;box-shadow:inset 0 -26px 30px -16px rgba(8,5,3,.9)}
.cs-hero .cs-side{flex:1;min-width:0}
.cs-hero .cs-stars{display:flex;gap:3px;margin-bottom:6px}
.cs-hero .cs-stars span{width:14px;height:14px;display:block;background:#4a3a24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.cs-hero .cs-stars span.on{background:linear-gradient(180deg,#fff0bd,#e5a93f);filter:drop-shadow(0 0 6px rgba(255,190,90,.5))}
.cs-hero .cs-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.cs-pill{padding:4px 9px;border-radius:9px;font-size:10px;font-weight:800;letter-spacing:.05em}
.cs-pill.rar{color:#dcb6ff;background:rgba(170,110,255,.14);box-shadow:inset 0 0 0 1px rgba(190,140,255,.3)}
.cs-pill.mana{color:#a8d6ff;background:rgba(90,168,232,.14);box-shadow:inset 0 0 0 1px rgba(120,190,255,.3)}
.cs-pill.role{color:#e9cb94;background:rgba(255,214,140,.1);box-shadow:inset 0 0 0 1px rgba(255,216,150,.22)}
.cs-power{
display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:800;color:#ffe3a8;
background:linear-gradient(180deg, rgba(48,33,20,.95), rgba(20,13,9,.97));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.26)
}
.cs-power img{width:16px;height:16px}
.cs-tabs{
flex:none;display:flex;gap:4px;margin:0 14px 10px;padding:4px;border-radius:14px;
background:linear-gradient(180deg, rgba(30,21,14,.92), rgba(14,9,6,.95));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.12)
}
.cs-tb{
flex:1;height:38px;border:0;border-radius:11px;cursor:pointer;position:relative;
font-family:'Exo 2',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#9d8259;background:transparent
}
.cs-tb.is-on{
color:#ffe3a8;background:linear-gradient(180deg, rgba(58,40,25,.96), rgba(28,19,12,.98));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.28), 0 4px 12px rgba(0,0,0,.4)
}
.cs-tb .cs-bell{position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:#ff8a4c;box-shadow:0 0 8px rgba(255,120,60,.9)}
.cs-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px 34px}
.cs-body::-webkit-scrollbar{width:0}
.cs-foot{
flex:none;padding:10px 14px calc(12px + env(safe-area-inset-bottom));
background:linear-gradient(180deg, rgba(10,7,5,0), rgba(9,6,4,.96) 40%)
}
.cs-btn{
border:0;cursor:pointer;height:50px;padding:0 18px;border-radius:15px;width:100%;
font-family:'Exo 2',sans-serif;font-size:14.5px;font-weight:800;color:#3c2407;
background:linear-gradient(180deg,#ffeec2 0%,#f6cd80 42%,#dfa84c 100%);
box-shadow:0 4px 0 #7d4e12, 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
display:flex;align-items:center;justify-content:center;gap:8px
}
.cs-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #7d4e12}
.cs-btn[disabled]{filter:grayscale(.55) brightness(.7);box-shadow:0 4px 0 #3d2a12;cursor:default}
.cs-btn.ghost{
background:linear-gradient(180deg, rgba(58,40,26,.95), rgba(26,18,12,.96));color:#e9cb94;height:44px;font-size:13px;
box-shadow:inset 0 0 0 1px rgba(255,216,150,.24), 0 8px 18px rgba(0,0,0,.4)
}
.cs-btn.ghost:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px rgba(255,216,150,.24)}
.cs-btn.danger{background:linear-gradient(180deg,#f0c0a6,#d98d6a 45%,#b4643f);box-shadow:0 4px 0 #6a3318,0 10px 22px rgba(0,0,0,.4)}
.cs-stat{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,216,150,.07)}
.cs-stat:last-child{border-bottom:0}
.cs-stat .nm{flex:none;width:86px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a98f66}
.cs-stat .cs-rail{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.cs-stat .cs-rail i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#f0b860,#ffe3a0)}
.cs-stat .vl{flex:none;min-width:58px;text-align:right;font-size:13px;font-weight:800;color:#ffe3a8}
.cs-block{
margin:12px 0 0;padding:12px 13px;border-radius:15px;
background:linear-gradient(180deg, rgba(44,30,19,.9), rgba(18,12,8,.94));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.14)
}
.cs-block h4{margin:0 0 6px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#c69b64}
.cs-block p{margin:0;font-size:12.5px;line-height:1.55;color:#ddc9a6}
.cs-block b.sp{color:#ffd98a;display:block;font-family:'PT Serif',serif;font-size:14px;margin-bottom:3px}
.cs-starway{padding:12px 0 2px}
.cs-starrow{display:flex;justify-content:center;gap:9px;margin-bottom:12px}
.cs-sw{position:relative;width:46px;text-align:center}
.cs-sw .pt{
width:38px;height:38px;margin:0 auto 5px;border-radius:12px;display:grid;place-items:center;
background:linear-gradient(180deg, rgba(40,27,17,.95), rgba(17,11,8,.97));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.16)
}
.cs-sw .pt span{width:19px;height:19px;display:block;background:#4a3a24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.cs-sw.done .pt span{background:linear-gradient(180deg,#fff0bd,#e5a93f)}
.cs-sw.done .pt{box-shadow:inset 0 0 0 1.5px rgba(255,205,120,.45)}
.cs-sw.next .pt{box-shadow:inset 0 0 0 2px #ffd98a, 0 0 18px rgba(255,180,80,.3)}
.cs-sw.next .pt span{background:linear-gradient(180deg,#6b5636,#4a3a24)}
.cs-sw .cap{display:block;font-size:8.5px;font-weight:800;line-height:1.25;color:#8d7551;letter-spacing:.02em}
.cs-sw.done .cap{color:#c8a978}
.cs-sw.next .cap{color:#ffd98a}
.cs-sw:after{content:'';position:absolute;top:19px;right:-9px;width:9px;height:2px;background:rgba(255,216,150,.16)}
.cs-sw:last-child:after{display:none}
.cs-sw.done:after{background:rgba(255,205,120,.45)}
.cs-delta{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,216,150,.07)}
.cs-delta:last-of-type{border-bottom:0}
.cs-delta .nm{flex:1;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a98f66}
.cs-delta .a{font-size:13px;font-weight:800;color:#e9d3aa}
.cs-delta .ar{color:#7d6746;font-size:12px}
.cs-delta .b{font-size:13px;font-weight:800;color:#95e08d}
.cs-invest{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.cs-inv{
padding:11px 11px 12px;border-radius:15px;
background:linear-gradient(180deg, rgba(46,31,20,.92), rgba(18,12,8,.95));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.15)
}
.cs-inv .hd{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.cs-inv .hd img{width:19px;height:19px}
.cs-inv .hd b{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c69b64}
.cs-inv .big{font-size:15px;font-weight:800;color:#ffe3a8;margin-bottom:6px}
.cs-inv .big em{font-style:normal;font-size:11px;color:#8d7551}
.cs-inv .bar{height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:9px}
.cs-inv .bar i{display:block;height:100%;border-radius:4px}
.cs-inv .bar i.dup{background:linear-gradient(90deg,#ffd98a,#e5a93f)}
.cs-inv .bar i.frg{background:linear-gradient(90deg,#c98bff,#8f4fe0)}
.cs-inv .cs-btn{height:38px;font-size:12px;border-radius:12px}
.cs-inv.full{grid-column:1 / -1}
.cs-note{margin:9px 1px 0;font-size:10.5px;line-height:1.5;color:#8d7551}
.cs-note b{color:#c8a978}
/* ==========================================================================
Фаза 117: вкладка «НАВЫКИ» листа карты -- 1:1 порт утверждённого прототипа
proto_sk1 (медальоны навыков, полоса резонанса, лист навыка с развилкой).
Правила переноса те же, что и для блока «ЛИСТ КАРТЫ» выше: классы прототипа
получают префикс cs-sk-, значения (радиусы, тени, размеры шрифтов, градиенты)
НЕ пересчитываются и НЕ «улучшаются» -- копируются как есть. Общие элементы
(cs-btn, cs-note, cs-block) уже перенесены выше и повторно здесь не описаны.
========================================================================== */
.cs-sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 10px}
.cs-sk-sl{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;background:none;border:0;padding:0;transition:transform .16s ease}
.cs-sk-sl:active{transform:scale(.95)}
.cs-sk-fr{position:relative;width:66px;height:66px;border-radius:19px;overflow:hidden;background:linear-gradient(180deg, rgba(40,27,18,.9), rgba(16,11,7,.95));box-shadow:inset 0 0 0 1.5px rgba(255,214,140,.30), 0 8px 18px rgba(0,0,0,.55)}
.cs-sk-fr img{width:100%;height:100%;display:block;object-fit:contain}
.cs-sk-sl.is-on .cs-sk-fr{box-shadow:inset 0 0 0 2px #ffd98a, 0 0 0 4px rgba(255,199,110,.16), 0 10px 22px rgba(0,0,0,.6)}
.cs-sk-sl.locked .cs-sk-fr img{filter:grayscale(.85) brightness(.55)}
.cs-sk-lv{padding:2px 8px;border-radius:8px;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#ffe3a8;background:linear-gradient(180deg, rgba(48,32,21,.96), rgba(20,13,9,.98));box-shadow:inset 0 0 0 1px rgba(255,216,150,.24);white-space:nowrap}
.cs-sk-pad{position:absolute;right:5px;bottom:5px;font-size:15px;filter:drop-shadow(0 1px 2px #000)}
.cs-sk-dot{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff3cf, #e0a23c);box-shadow:0 0 0 2px rgba(20,13,9,.95), 0 0 12px rgba(255,190,90,.8);display:grid;place-items:center;font-size:10px;font-weight:900;color:#4a2c08}
.cs-reso{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;padding:0 0 9px}
.cs-reso::-webkit-scrollbar{display:none}
.cs-reso-lbl{flex:none;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#b09060;padding-right:2px}
.cs-rs{flex:none;display:flex;align-items:center;gap:5px;padding:5px 9px 5px 5px;border-radius:11px;background:linear-gradient(180deg, rgba(38,26,17,.9), rgba(16,11,7,.94));box-shadow:inset 0 0 0 1px rgba(255,216,150,.14);white-space:nowrap}
.cs-rs b{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9d8259}
.cs-rs i{font-style:normal;font-size:10px;font-weight:800;color:#7d6746}
.cs-rs.dim b{display:none}
.cs-rs.lit b{color:#ffe3a8}
.cs-rs.lit i{color:#95e08d}
.cs-rs.lit{box-shadow:inset 0 0 0 1.5px rgba(255,205,120,.5), 0 0 16px rgba(255,170,70,.18)}
.cs-shhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.cs-shhead h3{font-family:'PT Serif',serif;margin:0;font-size:18px;color:#ffe6ae;line-height:1.15;flex:1}
.cs-kind{flex:none;padding:4px 8px;border-radius:8px;font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f3c98a;background:rgba(255,190,90,.12);box-shadow:inset 0 0 0 1px rgba(255,200,110,.28);margin-top:2px}
.cs-kind.psv{color:#b9c8e8;background:rgba(150,180,255,.12);box-shadow:inset 0 0 0 1px rgba(150,180,255,.26)}
.cs-eff{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:#efdfc4}
.cs-nxt{margin:0 0 11px;font-size:11.5px;line-height:1.5;color:#a98f66}
.cs-nxt b{color:#ffd98a;font-weight:800}
.cs-paths{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.cs-pth{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:9px;background:rgba(255,214,140,.07);box-shadow:inset 0 0 0 1px rgba(255,216,150,.16)}
.cs-pth span{font-size:10.5px;font-weight:700;color:#e9d3aa}
.cs-pth.empty{background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cs-pth.empty span{color:#7d6746}
.cs-forkwrap{margin:0 0 11px}
.cs-forkttl{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cs-forkttl b{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd08a}
.cs-forkttl i{font-style:normal;font-size:10px;color:#9d8259;margin-left:auto}
.cs-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-opt{position:relative;padding:10px 10px 11px;border-radius:15px;cursor:pointer;text-align:left;border:0;background:linear-gradient(180deg, rgba(52,36,23,.92), rgba(22,15,10,.95));box-shadow:inset 0 0 0 1px rgba(255,216,150,.16);transition:transform .14s ease}
.cs-opt:active{transform:scale(.98)}
.cs-opt.is-on{box-shadow:inset 0 0 0 2px #ffd98a, 0 0 18px rgba(255,180,80,.22)}
.cs-opt .tag{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.cs-opt .tag span{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#c69b64}
.cs-opt h4{margin:0 0 4px;font-family:'PT Serif',serif;font-size:13.5px;color:#ffe6ae;line-height:1.2}
.cs-opt p{margin:0;font-size:11px;line-height:1.45;color:#cdb794}
.cs-row2{display:flex;gap:8px;align-items:center;margin-top:8px}
.cs-row2 .cs-btn{flex:1}
/* В прототипе несобранный чип резонанса сжимался до ИКОНКИ стихии и счёта, поэтому подпись
скрывалась. В репозитории иконок стихий пока нет (только 42 иконки навыков), и без подписи
чип «1/3» не сообщает, о какой стихии речь -- возвращаем подпись, оставляя тусклый цвет
прототипа. Когда появятся иконки стихий, это правило снимается. */
.cs-reso .cs-rs.dim b{display:inline}
/* =====================================================================================
Фаза 103 (Кузница) -- вкладка «КОВКА» листа карты. Стили перенесены ОДИН В ОДИН из
утверждённого прототипа proto_fg1 («Клейма и Жар»): значения цветов, радиусов, теней и
размеров не пересчитывались, только селекторы получили префикс .cs-fg, чтобы жить внутри
листа карты рядом с уже портированными .cs-* блоками прототипа col1/sk1.
===================================================================================== */
.cs-fg{display:block}
.cs-fg-steps{display:flex;gap:5px;margin:0 0 12px}
.cs-fg-step{flex:1 1 0;padding:6px 3px 5px;border-radius:9px;text-align:center;font-size:9.5px;font-weight:900;
letter-spacing:.05em;text-transform:uppercase;color:#8c7557;background:rgba(0,0,0,.4);
box-shadow:inset 0 0 0 1px rgba(214,160,74,.24)}
.cs-fg-step.is-on{color:#3a2204;background:linear-gradient(180deg,#ffe9b6,#d9a13a);box-shadow:0 3px 10px rgba(255,180,70,.25)}
.cs-fg-step.is-done{color:#8fd79a;box-shadow:inset 0 0 0 1px rgba(127,224,138,.4)}
.cs-fg-box{margin:0 0 12px;padding:11px 12px 12px;border-radius:14px;
background:linear-gradient(180deg, rgba(38,24,12,.86), rgba(18,11,6,.92));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.3)}
.cs-fg-box h4{margin:0 0 7px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
font-family:'PT Serif',Georgia,serif;font-size:14px;font-weight:700;color:#fff3d8}
.cs-fg-box h4 small{font-family:'Exo 2',sans-serif;font-size:9.5px;font-weight:900;letter-spacing:.08em;
text-transform:uppercase;color:#a98a5e}
.cs-fg-box p{margin:0}
.cs-fg-tag{margin:0 0 9px;font-size:10.5px;font-weight:700;line-height:1.5;color:#b59a78}
.cs-fg-tag b{color:#ffdc8a}
.cs-fg-hint{margin:9px 0 0;padding:8px 10px;border-radius:10px;font-size:10.5px;line-height:1.5;color:#b59a78;
background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(214,160,74,.26)}
.cs-fg-hint b{color:#ffdc8a}
.cs-fg-warn{margin:9px 0 0;padding:8px 10px;border-radius:10px;font-size:10.5px;line-height:1.45;color:#ffc9b3;
background:rgba(120,40,20,.32);box-shadow:inset 0 0 0 1px rgba(255,120,90,.45)}
/* ---- Заготовка и гнёзда ---- */
.cs-fg-blank{position:relative;display:block;margin:2px auto 12px;width:238px;height:268px}
.cs-fg-blank .metal{position:absolute;inset:0;border-radius:18px 18px 46% 46%/18px 18px 30% 30%;
background:linear-gradient(160deg,#4a4038 0%,#2b2420 42%,#1a1512 100%);
box-shadow:inset 0 0 0 1.6px rgba(214,160,74,.55), inset 0 22px 44px rgba(255,190,110,.07),
0 14px 30px rgba(0,0,0,.6)}
.cs-fg-blank .metal::after{content:"";position:absolute;inset:7px;border-radius:14px 14px 44% 44%/14px 14px 28% 28%;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.22);
background:repeating-linear-gradient(118deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,0) 2px 9px)}
.cs-fg-blank .heatglow{position:absolute;inset:-6px;border-radius:22px 22px 48% 48%/22px 22px 32% 32%;pointer-events:none;
background:radial-gradient(60% 46% at 50% 84%, rgba(255,120,30,.55), transparent 72%);
opacity:0;transition:opacity .25s}
.cs-fg-blank.is-hot .heatglow{opacity:1}
.cs-fg-sk{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border:0;padding:0;cursor:pointer;
border-radius:50%;background:transparent}
.cs-fg-sk .ring{position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 50% 34%, rgba(255,200,110,.16), rgba(0,0,0,.62));
box-shadow:inset 0 0 0 1.6px rgba(214,160,74,.6), 0 5px 12px rgba(0,0,0,.55);
transition:box-shadow .16s, transform .12s}
.cs-fg-sk.core{width:66px;height:66px;margin:-33px 0 0 -33px}
.cs-fg-sk.core .ring{box-shadow:inset 0 0 0 2px rgba(255,214,130,.85), 0 0 0 4px rgba(255,170,60,.12), 0 6px 14px rgba(0,0,0,.6)}
.cs-fg-sk .glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:23px;line-height:1;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.cs-fg-sk .glyph img{width:40px;height:40px;object-fit:contain}
.cs-fg-sk.core .glyph img{width:50px;height:50px}
.cs-fg-sk .tag{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);white-space:nowrap;
font-size:8.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#a98a5e}
.cs-fg-sk.is-pick .ring{box-shadow:inset 0 0 0 2px #ffd98a, 0 0 0 5px rgba(255,190,80,.22), 0 6px 14px rgba(0,0,0,.6)}
.cs-fg-sk.is-full .ring{background:radial-gradient(circle at 50% 32%, rgba(255,205,120,.4), rgba(52,28,10,.9))}
.cs-fg-sk:active{transform:scale(.94)}
.cs-fg-sk .mult{position:absolute;right:-3px;top:-3px;padding:1px 5px;border-radius:7px;font-size:8.5px;font-weight:900;
color:#3a2204;background:linear-gradient(180deg,#ffe9b6,#d9a13a);box-shadow:0 2px 5px rgba(0,0,0,.5)}
/* ---- Лоток клейм ---- */
.cs-fg-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cs-fg-st{position:relative;padding:8px 6px 7px;border:0;cursor:pointer;border-radius:12px;text-align:center;
background:linear-gradient(180deg, rgba(48,30,14,.92), rgba(24,15,7,.96));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.4);transition:box-shadow .16s, transform .1s}
.cs-fg-st.is-on{box-shadow:inset 0 0 0 1.8px #ffd98a, 0 0 16px rgba(255,180,70,.28);transform:translateY(-2px)}
.cs-fg-st:disabled{opacity:.42;filter:grayscale(.6);cursor:default}
.cs-fg-st .g{display:block;font-size:21px;line-height:1.1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.cs-fg-st .g img{width:38px;height:38px;object-fit:contain}
.cs-fg-st .n{display:block;margin-top:3px;font-size:10px;font-weight:900;color:#ffeaba;line-height:1.15}
.cs-fg-st .v{display:block;margin-top:2px;font-size:9px;font-weight:800;line-height:1.3;color:#8fd79a}
.cs-fg-st .v s{display:block;text-decoration:none;color:#ff9c80}
.cs-fg-st .v s.free{color:#c37bff}
.cs-fg-st .q{position:absolute;right:4px;top:4px;min-width:16px;padding:0 4px;border-radius:6px;
font-size:9px;font-weight:900;color:#3a2204;background:linear-gradient(180deg,#ffe9b6,#d9a13a)}
.cs-fg-st.rareish{box-shadow:inset 0 0 0 1.2px rgba(195,123,255,.6)}
.cs-fg-st.rareish.is-on{box-shadow:inset 0 0 0 1.8px #d8a5ff, 0 0 16px rgba(180,110,255,.3)}
/* ---- Развилка закалки ---- */
.cs-fg-forks{display:grid;gap:7px}
.cs-fg-fk{position:relative;display:flex;gap:9px;align-items:center;padding:9px 11px;border:0;cursor:pointer;text-align:left;
border-radius:13px;background:linear-gradient(180deg, rgba(44,28,13,.92), rgba(22,14,6,.96));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.38);transition:box-shadow .16s}
.cs-fg-fk.is-on{box-shadow:inset 0 0 0 1.8px #ffd98a, 0 0 18px rgba(255,180,70,.24)}
.cs-fg-fk:disabled{opacity:.45;cursor:default}
.cs-fg-fk .fi{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;
background:radial-gradient(circle at 50% 35%, rgba(255,200,110,.3), rgba(0,0,0,.6));
box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.5)}
.cs-fg-fk .fi img{width:30px;height:30px;object-fit:contain}
.cs-fg-fk .ft{min-width:0}
.cs-fg-fk .ft b{display:block;font-family:'PT Serif',Georgia,serif;font-size:13.5px;color:#fff3d8}
.cs-fg-fk .ft span{display:block;margin-top:2px;font-size:10px;font-weight:700;line-height:1.35;color:#b59a78}
.cs-fg-fk .ft span em{font-style:normal;color:#8fd79a}
.cs-fg-fk .ft span i{font-style:normal;color:#ff9c80}
/* ---- Жар ---- */
.cs-fg-heat{position:relative;display:block;height:42px;margin:4px 0 9px;padding:12px 18px;
border-image:url("../img/ui/gauge_track2.png") 18 112 18 112 fill stretch}
.cs-fg-heat .rail{position:absolute;left:18px;right:18px;top:11px;bottom:11px;border-radius:5px;overflow:hidden;
background:linear-gradient(180deg,#120c07,#241708)}
.cs-fg-heat .rail u{position:absolute;top:0;bottom:0;text-decoration:none}
.cs-fg-heat .zone{background:radial-gradient(60% 120% at 50% 50%, rgba(255,214,130,.5), rgba(255,160,50,.16) 70%, transparent)}
.cs-fg-heat .burn{right:0;background:linear-gradient(90deg, rgba(255,90,40,0), rgba(255,70,30,.42))}
.cs-fg-heat .fill{left:0;width:0;
background:linear-gradient(90deg,#6b2d0c 0%,#c2531a 42%,#ffb347 78%,#fff2cf 100%);
box-shadow:0 0 14px rgba(255,150,50,.6)}
.cs-fg-heat .mk{position:absolute;top:-9px;width:12px;height:52px;margin-left:-6px;pointer-events:none;
background:url("../img/ui/gauge_marker.png") center/contain no-repeat;
filter:drop-shadow(0 0 7px rgba(255,190,90,.8))}
.cs-fg-scale{display:flex;justify-content:space-between;margin:-2px 2px 10px;
font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8c7557}
.cs-fg-hold{position:relative;width:100%;height:56px;border:0;cursor:pointer;border-radius:15px;
font-family:'Exo 2',sans-serif;font-size:14px;font-weight:900;letter-spacing:.04em;color:#3a2204;
background:linear-gradient(180deg,#ffe9b6 0%,#f0bf62 48%,#d09333 100%);
box-shadow:0 6px 0 #7d4e12, 0 12px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
touch-action:none;user-select:none}
.cs-fg-hold.is-down{transform:translateY(4px);box-shadow:0 2px 0 #7d4e12, inset 0 1px 0 rgba(255,255,255,.6)}
.cs-fg-hold:disabled{opacity:.45;filter:grayscale(.5);cursor:default;transform:none}
.cs-fg-grade{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0 0;min-height:20px;
font-size:12px;font-weight:900;color:#ffdc8a}
.cs-fg-grade s{text-decoration:none;color:#ff9c80}
/* ---- Итоговые статы ---- */
.cs-fg-srow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;margin-bottom:5px;
background:rgba(0,0,0,.38);box-shadow:inset 0 0 0 1px rgba(214,160,74,.28)}
.cs-fg-srow i{flex:0 0 58px;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.09em;
text-transform:uppercase;color:#a98a5e}
.cs-fg-srow .bar{position:relative;flex:1 1 auto;height:8px;border-radius:4px;overflow:hidden;background:rgba(0,0,0,.6)}
.cs-fg-srow .bar u{position:absolute;left:0;top:0;bottom:0;text-decoration:none;
background:linear-gradient(90deg,#d9a13a,#ffe9b6);transition:width .3s}
.cs-fg-srow .bar u.dn{background:linear-gradient(90deg,#8c3a20,#ff9c80)}
.cs-fg-srow b{flex:0 0 78px;text-align:right;font-size:13px;font-weight:900;color:#fff1cd}
.cs-fg-srow b.dn{color:#ff9c80}
.cs-fg-srow b em{font-style:normal;font-size:10.5px;color:#8fd79a}
.cs-fg-srow b em.dn{color:#ff9c80}
.cs-fg-row{display:flex;gap:7px;margin-top:9px}
.cs-fg-row .cs-btn{flex:1 1 0;min-width:0}
/* QA-проверка на 390px: дельта «+14%» упиралась в само значение стата, а маркер жара тонул в
заливке -- разводим их и добавляем маркеру тёмную подложку. Правки только добавляющие. */
.cs-fg-srow b em{margin-left:5px}
.cs-fg-srow b{flex-basis:88px}
.cs-fg-heat .mk{z-index:2;filter:drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(255,190,90,.9))}
/* ==========================================================================================
Фаза 103 (Кузница, часть 3): городской экран Кузницы -- порт прототипа ws10 (разделы
«Формы», «Пыль», «Витрина») плюс наковальня из ws9 (удары молотом). Раздел «Клейма» из
прототипа в игру не берётся, этапы гравировки и закалки -- тоже: в «Формах» остаются
только удары молотом и кнопка сбора готовой карты.
Префикс .cs-kz-* -- блок дописан в конец файла, ни одно правило выше не изменено.
========================================================================================== */
.cs-kz-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 11px;padding-bottom:2px}
.cs-kz-tabs::-webkit-scrollbar{display:none}
.cs-kz-tabs button{flex:0 0 auto;white-space:nowrap;padding:9px 13px 8px;border:0;cursor:pointer;border-radius:12px;
font-family:inherit;font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#a98a5e;
background:linear-gradient(180deg,rgba(42,26,12,.9),rgba(20,12,5,.95));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.cs-kz-tabs button.is-on{color:#fff1cd;box-shadow:inset 0 0 0 1.7px rgba(255,214,130,.9),0 0 14px rgba(255,180,70,.16)}
.cs-kz-tag{font-size:10.5px;line-height:1.5;color:#a98a5e;margin:0 0 10px}
.cs-kz-tag b{color:#e7cfa2}
/* лента карт с фрагментами */
.cs-kz-strip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;margin-bottom:10px}
.cs-kz-strip::-webkit-scrollbar{display:none}
.cs-kz-card{position:relative;flex:0 0 74px;border-radius:12px;padding:5px;cursor:pointer;border:0;
background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.62));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.cs-kz-card.is-on{box-shadow:inset 0 0 0 1.7px rgba(255,214,130,.95),0 0 15px rgba(255,180,70,.2)}
.cs-kz-card img{width:100%;height:74px;object-fit:cover;border-radius:9px;display:block;margin-bottom:4px}
.cs-kz-card span{display:block;font-size:9px;font-weight:900;color:#e7cfa2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-kz-card em{display:block;font-style:normal;font-size:8.5px;font-weight:900;text-align:center;color:#a98a5e}
.cs-kz-card i.rdy{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
font-style:normal;font-size:10px;color:#20340f;background:linear-gradient(180deg,#b6f0a0,#6fc45a)}
/* форма на 10 гнёзд */
.cs-kz-mould{position:relative;padding:12px 12px 13px;border-radius:15px;margin-bottom:10px;overflow:hidden;
background:radial-gradient(72% 60% at 50% 34%,rgba(255,150,50,.16),rgba(10,6,3,.93) 74%);
box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.38)}
.cs-kz-mh{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.cs-kz-mh .pic{position:relative;width:70px;height:96px;flex:0 0 70px;border-radius:11px;overflow:hidden;
box-shadow:0 0 0 1.5px rgba(214,160,74,.65),0 8px 18px rgba(0,0,0,.6)}
.cs-kz-mh .pic img{width:100%;height:100%;object-fit:cover;display:block}
.cs-kz-mh .pic.dim img{filter:grayscale(.8) brightness(.5)}
.cs-kz-mh .mh{flex:1 1 auto;min-width:0}
.cs-kz-mh h4{margin:0 0 3px;font-family:'PT Serif',Georgia,serif;font-size:16px;color:#fff1cd}
.cs-kz-mh p{margin:0;font-size:10.5px;line-height:1.4;color:#ab9375}
.cs-kz-chip{display:inline-block;padding:2px 8px;border-radius:7px;font-size:8.5px;font-weight:900;letter-spacing:.08em;
text-transform:uppercase;margin-bottom:4px}
.cs-kz-chip.common,.cs-kz-chip.uncommon{color:#dfe9f5;background:rgba(90,120,150,.4);box-shadow:inset 0 0 0 1px rgba(150,190,230,.5)}
.cs-kz-chip.rare{color:#cfe8ff;background:rgba(40,90,160,.45);box-shadow:inset 0 0 0 1px rgba(110,180,255,.6)}
.cs-kz-chip.epic{color:#eed4ff;background:rgba(95,45,150,.45);box-shadow:inset 0 0 0 1px rgba(195,123,255,.6)}
.cs-kz-chip.legendary{color:#ffe6b8;background:rgba(150,90,20,.45);box-shadow:inset 0 0 0 1px rgba(255,190,90,.7)}
.cs-kz-sockets{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:9px}
.cs-kz-so{position:relative;aspect-ratio:1/1;border-radius:50%;
background:radial-gradient(circle at 50% 38%,rgba(48,30,14,.95),rgba(12,7,3,.98));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.28)}
.cs-kz-so.f{background:radial-gradient(circle at 45% 35%,#fff0cd,#e6a63c 62%,#b9761f);box-shadow:0 0 10px rgba(255,180,70,.55)}
.cs-kz-so.d{background:radial-gradient(circle at 45% 35%,#eaf3ff,#8fb4d8 62%,#5e7f9f);box-shadow:0 0 9px rgba(160,200,240,.45)}
.cs-kz-so.hot{animation:csKzSo 1.4s ease-in-out infinite}
@keyframes csKzSo{0%,100%{box-shadow:inset 0 0 0 1.4px rgba(255,214,130,.7)}50%{box-shadow:inset 0 0 0 1.4px rgba(255,240,200,1),0 0 12px rgba(255,190,80,.5)}}
.cs-kz-legend{display:flex;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.cs-kz-legend span{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;color:#a98a5e}
.cs-kz-legend i{width:11px;height:11px;border-radius:50%;display:block}
.cs-kz-legend i.f{background:linear-gradient(180deg,#fff0cd,#e6a63c)}
.cs-kz-legend i.d{background:linear-gradient(180deg,#eaf3ff,#8fb4d8)}
.cs-kz-mrow{display:flex;gap:7px;align-items:center}
.cs-kz-mrow button{flex:1 1 0}
/* горн: заготовка ждёт ударов */
.cs-kz-hearth{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;margin-bottom:9px;
background:linear-gradient(180deg,rgba(48,28,12,.95),rgba(20,12,5,.97));box-shadow:inset 0 0 0 1.5px rgba(255,214,130,.6),0 0 18px rgba(255,170,60,.12)}
.cs-kz-hearth .hp{position:relative;width:54px;height:74px;flex:0 0 54px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1.3px rgba(214,160,74,.6)}
.cs-kz-hearth .hp img{width:100%;height:100%;object-fit:cover}
.cs-kz-hearth .hb{flex:1 1 auto;min-width:0}
.cs-kz-hearth h6{margin:0 0 3px;font-size:12.5px;font-weight:900;color:#fff1cd}
.cs-kz-hearth p{margin:0 0 6px;font-size:10.5px;color:#ab9375}
.cs-kz-empty{display:grid;place-items:center;padding:18px 12px;border-radius:13px;margin-bottom:9px;text-align:center;
background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.22)}
.cs-kz-empty span{font-size:11px;color:#a98a5e;line-height:1.45}
/* пыль и витрина: строки-карточки */
.cs-kz-dustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.cs-kz-dcell{padding:7px 3px 6px;border-radius:12px;text-align:center;
background:linear-gradient(180deg,rgba(42,26,12,.92),rgba(20,12,5,.96));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.32)}
.cs-kz-dcell img{width:26px;height:26px;display:block;margin:0 auto 2px}
.cs-kz-dcell b{display:block;font-size:14px;font-weight:900;color:#fff1cd;line-height:1.1}
.cs-kz-dcell u{display:block;text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#a98a5e}
.cs-kz-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;margin-bottom:8px;
background:linear-gradient(180deg,rgba(42,26,12,.9),rgba(20,12,5,.95));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.cs-kz-row>img{width:30px;height:30px;display:block;flex:0 0 30px}
.cs-kz-row .rb{flex:1 1 auto;min-width:0}
.cs-kz-row h6{margin:0 0 3px;font-size:12.5px;font-weight:900;color:#fff1cd}
.cs-kz-row p{margin:0;font-size:10.5px;color:#ab9375}
.cs-kz-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9px;font-size:11px;font-weight:900;
color:#fff1cd;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(214,160,74,.35);white-space:nowrap}
.cs-kz-pill img{width:15px;height:15px;display:block}
.cs-kz-pill.lack{color:#ffb4a0;box-shadow:inset 0 0 0 1px rgba(255,120,90,.55)}
.cs-kz-timer{font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#d9bd8c}
.cs-kz-wide{display:flex;align-items:center;justify-content:center;gap:7px;width:100%}
.cs-kz-wide img{width:17px;height:17px;display:block}
/* наковальня (порт ws9): оверлей серии ударов */
.cs-kz-ov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(5,3,1,.9);backdrop-filter:blur(3px)}
.cs-kz-pan{position:relative;width:min(358px,94%);max-height:94vh;overflow-y:auto;padding:14px 14px 15px;border-radius:20px;
background:linear-gradient(180deg,rgba(26,16,7,.99),rgba(14,8,3,.99));
box-shadow:inset 0 0 0 1.6px rgba(214,160,74,.6),0 24px 54px rgba(0,0,0,.82)}
.cs-kz-pan h3{margin:0 0 2px;font-family:'PT Serif',Georgia,serif;font-size:18px;color:#fff3d8;text-align:center}
.cs-kz-pan .sub{display:block;font-size:10px;color:#c2a577;text-align:center;margin-bottom:9px}
.cs-kz-stage{position:relative;height:178px;margin-bottom:8px}
.cs-kz-stage .anvil{position:absolute;left:46%;bottom:0;width:172px;margin-left:-86px;display:block;filter:drop-shadow(0 12px 20px rgba(0,0,0,.7))}
.cs-kz-stage .blank{position:absolute;left:40%;bottom:104px;width:40px;height:26px;margin-left:-20px;border-radius:5px;
background:radial-gradient(circle at 50% 40%,#fff6d8,#ff9b28 58%,#b23a06);box-shadow:0 0 22px rgba(255,150,40,.75)}
.cs-kz-stage .blank.cool{background:radial-gradient(circle at 50% 40%,#b9c3cc,#66727d 60%,#39424a);box-shadow:none}
.cs-kz-stage .hammer{position:absolute;right:6px;bottom:44px;width:88px;transform-origin:22% 88%;transform:rotate(-16deg);
filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.cs-kz-stage.is-swing .hammer{animation:csKzSwing .26s cubic-bezier(.3,.9,.4,1)}
@keyframes csKzSwing{0%{transform:rotate(-16deg)}45%{transform:rotate(26deg) translate(-26px,34px)}100%{transform:rotate(-16deg)}}
.cs-kz-stage.is-hit .anvil{animation:csKzShake .22s ease}
@keyframes csKzShake{0%,100%{transform:none}40%{transform:translateY(4px) scale(1.012)}}
.cs-kz-stage .flash{position:absolute;left:40%;bottom:112px;width:10px;height:10px;margin-left:-5px;border-radius:50%;opacity:0;
background:#fff;box-shadow:0 0 34px 20px rgba(255,205,120,.9)}
.cs-kz-stage.is-hit .flash{animation:csKzFl .3s ease-out}
@keyframes csKzFl{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(3)}}
.cs-kz-stage .verdict{position:absolute;left:0;right:0;top:18px;text-align:center;opacity:0;
font-family:'PT Serif',Georgia,serif;font-size:22px;color:#ffe9b6;text-shadow:0 0 16px rgba(255,170,50,.9),0 2px 8px rgba(0,0,0,.9)}
.cs-kz-stage.is-hit .verdict{animation:csKzVd .6s ease-out}
@keyframes csKzVd{0%{opacity:0;transform:translateY(6px) scale(.85)}22%{opacity:1}100%{opacity:0;transform:translateY(-28px) scale(1.1)}}
.cs-kz-heatbar{position:relative;height:8px;border-radius:5px;background:rgba(0,0,0,.55);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(214,160,74,.32)}
.cs-kz-heatbar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:width .18s;
background:linear-gradient(90deg,#8b3a08,#ff9b28,#ffe6a6)}
.cs-kz-note{display:flex;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
color:#a98a5e;margin:5px 0 9px}
.cs-kz-timing{position:relative;height:54px;margin-bottom:10px;border-radius:12px;cursor:pointer;
background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.72));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.35)}
.cs-kz-timing .rail{position:absolute;inset:1px;overflow:hidden;border-radius:11px}
.cs-kz-timing .zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(120,230,150,.3),rgba(60,160,90,.22));
box-shadow:inset 0 0 0 1px rgba(150,240,180,.55)}
.cs-kz-timing .core{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(255,240,200,.85),rgba(255,180,70,.6))}
.cs-kz-timing .mk{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;border-radius:3px;z-index:3;
background:linear-gradient(180deg,#fff,#ffe6a6);box-shadow:0 0 12px rgba(255,214,130,.95),0 0 4px rgba(0,0,0,.9)}
.cs-kz-pips{display:flex;gap:5px;justify-content:center;margin-bottom:9px}
.cs-kz-pips i{width:26px;height:6px;border-radius:4px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(214,160,74,.35)}
.cs-kz-pips i.p1{background:linear-gradient(90deg,#8a97a4,#c3cdd6)}
.cs-kz-pips i.p2{background:linear-gradient(90deg,#3f7fd0,#9fd0ff)}
.cs-kz-pips i.p3{background:linear-gradient(90deg,#8d45d8,#dfb4ff)}
.cs-kz-pips i.p4{background:linear-gradient(90deg,#e09a22,#ffe9b6);box-shadow:0 0 10px rgba(255,190,90,.6)}
.cs-kz-qline{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:10px}
.cs-kz-qline b{font-size:26px;font-weight:900;color:#fff1cd;line-height:1}
.cs-kz-qline span{font-size:10.5px;font-weight:800;color:#ab9375}
.cs-kz-frow{display:flex;gap:7px}
.cs-kz-frow button{flex:1 1 0}
.cs-kz-err{margin:0 0 9px;font-size:10.5px;font-weight:800;color:#ffb4a0;text-align:center}
/* Фаза 103 (Кузница, часть 3): арт карты в форме -- слои питомца вместо одной картинки.
Каталог карт хранит ПАПКУ слоёв (assets/pets/<вид>/layers/<тир>), поэтому вместо ![]()
здесь
стоит .pet-layers из petArtHtml(); эти правила лишь задают ему бокс и обрезку. */
.cs-kz-card .art { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: rgba(12, 10, 20, .55); }
.cs-kz-card .art .pet-layers { position: absolute; inset: 0; }
.cs-kz-card .art .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-kz-mh .pic .pet-layers, .cs-kz-hearth .hp .pet-layers { position: absolute; inset: 0; }
.cs-kz-mh .pic .pet-layer, .cs-kz-hearth .hp .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-kz-mh .pic, .cs-kz-hearth .hp { position: relative; overflow: hidden; }
.cs-kz-row .rimg { position: relative; display: block; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; overflow: hidden; background: rgba(12, 10, 20, .5); }
.cs-kz-row .rimg .pet-layers { position: absolute; inset: 0; }
.cs-kz-row .rimg .pet-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Фаза 103 (Кузница, часть 3): кнопки разделов кузницы -- копия .btn из прототипа ws10.
В боевом style.css нет глобального золотого стиля кнопок (каждый экран красит свои), поэтому
переносим вид кнопки прототипа 1:1 и вешаем на кнопки внутри блоков .cs-kz-*. */
.cs-kz-mrow button, .cs-kz-frow button, .cs-kz-row button {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 0 14px; height: 40px; border: 0; cursor: pointer; border-radius: 12px;
font-size: 13px; font-weight: 900; color: #3a2204;
background: linear-gradient(180deg, #ffe9b6 0%, #f0bf62 48%, #d09333 100%);
box-shadow: 0 5px 0 #7d4e12, 0 10px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
transition: transform .1s, box-shadow .1s;
}
.cs-kz-row button { height: 34px; padding: 0 12px; font-size: 12px; border-radius: 11px; flex: 0 0 auto;
box-shadow: 0 3px 0 #7d4e12, inset 0 1px 0 rgba(255, 255, 255, .5); }
.cs-kz-mrow button:active, .cs-kz-frow button:active, .cs-kz-row button:active {
transform: translateY(3px); box-shadow: 0 2px 0 #7d4e12, inset 0 1px 0 rgba(255, 255, 255, .6); }
.cs-kz-mrow button.ghost, .cs-kz-frow button.ghost, .cs-kz-row button.ghost {
color: #ffdda0; background: linear-gradient(180deg, rgba(58, 36, 16, .95), rgba(30, 18, 8, .98));
box-shadow: 0 4px 0 rgba(0, 0, 0, .5), inset 0 0 0 1.4px rgba(214, 160, 74, .6); }
.cs-kz-mrow button:disabled, .cs-kz-frow button:disabled, .cs-kz-row button:disabled {
opacity: .5; filter: grayscale(.5); cursor: default; transform: none; }
.cs-kz-mrow button img, .cs-kz-frow button img, .cs-kz-row button img { width: 18px; height: 18px; object-fit: contain; }
/* Кнопка обновления ассортимента -- широкая, во всю карточку витрины. */
.panel > button.ghost:has(.cs-kz-wide) {
display: flex; width: 100%; height: 44px; margin-top: 4px; border: 0; cursor: pointer; border-radius: 13px;
font-size: 13.5px; font-weight: 900; color: #ffdda0;
background: linear-gradient(180deg, rgba(58, 36, 16, .95), rgba(30, 18, 8, .98));
box-shadow: 0 4px 0 rgba(0, 0, 0, .5), inset 0 0 0 1.4px rgba(214, 160, 74, .6);
}
.panel > button.ghost:has(.cs-kz-wide):disabled { opacity: .5; filter: grayscale(.5); cursor: default; }
/* ==========================================================================================
Фаза 103 (Кузница, часть 5): разделы кузницы должны выглядеть ровно как прототип ws10/ws9.
Раньше новые панели наследовали игровые .panel/.screen-head и получались «в стиле игры», а не
прототипа. Ниже -- перенос обёрточных стилей base.css прототипа под префиксом .cs-kz-:
деревянные рамки r_wood.png, золотые вкладки во всю ширину, серифные заголовки, сигил локации.
Правила идут последними в файле, поэтому корректно переопределяют ранний блок .cs-kz-tabs.
========================================================================================== */
.cs-kz-wrap { position: relative; margin: 0 -4px; padding: 10px 12px 14px; border-radius: 18px;
font-family: 'Exo 2', 'Manrope', system-ui, sans-serif; color: #f6e5c6;
background: radial-gradient(120% 70% at 50% 0%, rgba(255, 170, 60, .16), transparent 60%),
linear-gradient(180deg, rgba(8, 5, 3, .9), rgba(8, 5, 3, .96) 45%, rgba(8, 5, 3, .99)); }
/* лента разделов: равные доли, активная -- золотая плашка (как .tab/.tab.is-on в прототипе) */
.cs-kz-tabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; overflow: visible; }
.cs-kz-tabs button { flex: 1 1 0; padding: 9px 4px 8px; border: 0; cursor: pointer; color: #d8c0a0; border-radius: 12px;
font-family: 'Exo 2', sans-serif; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
background: linear-gradient(180deg, rgba(48, 30, 14, .9), rgba(26, 16, 8, .95));
box-shadow: inset 0 0 0 1.2px rgba(214, 160, 74, .35); }
.cs-kz-tabs button.is-on { color: #3a2204; background: linear-gradient(180deg, #ffe9b6, #d9a13a);
box-shadow: 0 4px 14px rgba(255, 180, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
/* шапка локации: сигил кузницы + серифный заголовок */
.cs-kz-loc { display: flex; align-items: center; gap: 10px; margin: 4px 2px 12px; }
.cs-kz-loc .sigil { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, rgba(255, 200, 110, .35), rgba(0, 0, 0, .6));
box-shadow: inset 0 0 0 1.5px rgba(214, 160, 74, .85), 0 6px 14px rgba(0, 0, 0, .5); }
.cs-kz-loc .sigil img { width: 28px; height: 28px; object-fit: contain; }
.cs-kz-loc h1 { margin: 0; font-family: 'PT Serif', Georgia, serif; font-size: 21px; line-height: 1.1; color: #fff3d8;
text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.cs-kz-loc span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c99a4e; }
.cs-kz-loc .cs-kz-ref { margin-left: auto; width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
border: 0; cursor: pointer; border-radius: 12px; font-size: 18px; color: #ffdda0;
background: linear-gradient(180deg, rgba(58, 36, 16, .95), rgba(30, 18, 8, .98));
box-shadow: inset 0 0 0 1.4px rgba(214, 160, 74, .6); }
/* деревянная панель прототипа */
.cs-kz-panel { position: relative; padding: 14px 13px 15px; margin-bottom: 13px;
border-image: url("../img/ui/r_wood.png") 34 fill / 14px stretch;
box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(214, 160, 74, .55); }
.cs-kz-pt { display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
font-family: 'PT Serif', Georgia, serif; font-size: 15px; color: #ffeaba; }
.cs-kz-pt small { margin-left: auto; font-family: 'Exo 2', sans-serif; font-size: 10px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; color: #bb8d47; }
.cs-kz-hr { height: 1px; margin: 11px 0; background: linear-gradient(90deg, transparent, rgba(214, 160, 74, .5), transparent); }
.cs-kz-wrap .cs-kz-tag { margin: 0 0 11px; font-size: 11.5px; line-height: 1.5; color: #bda486; }
.cs-kz-wrap .cs-kz-tag b { color: #ffdc8a; }
.cs-kz-note-empty { padding: 26px 12px; text-align: center; font-size: 11.5px; color: #a98a5e; }
/* витрина: кнопка обновления во всю ширину панели, как .btn.ghost.wide в прототипе */
.cs-kz-reroll { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 44px;
border: 0; cursor: pointer; border-radius: 13px; font-family: 'Exo 2', sans-serif; font-size: 13.5px; font-weight: 900;
color: #ffdda0; background: linear-gradient(180deg, rgba(58, 36, 16, .95), rgba(30, 18, 8, .98));
box-shadow: 0 4px 0 rgba(0, 0, 0, .5), inset 0 0 0 1.4px rgba(214, 160, 74, .6); }
.cs-kz-reroll img { width: 18px; height: 18px; object-fit: contain; }
.cs-kz-reroll:disabled { opacity: .5; filter: grayscale(.5); cursor: default; }
/* Уточнение: в самом ws10 лента вкладок переопределена инлайном -- прокрутка по горизонтали,
вкладки по содержимому (.tabs{overflow-x:auto} / .tab{flex:0 0 auto;white-space:nowrap;
padding:9px 13px 8px}). Повторяем ровно это, иначе «Снаряжение» ломается на две строки. */
.cs-kz-tabs { overflow-x: auto; scrollbar-width: none; }
.cs-kz-tabs::-webkit-scrollbar { display: none; }
.cs-kz-tabs button { flex: 0 0 auto; white-space: nowrap; padding: 9px 13px 8px; }
/* Фаза 103 часть 6: бегунок проковки был упрощён (плоская зелёная зона + белая палочка).
Ниже -- точная копия .timing из прототипа ws9: рамка-жёлоб gauge_track2.png с растяжкой по
краям, радиальная зелёная зона с тонкой осевой линией, ядро с тёплым свечением, стеклянный
блик сверху и маркер-спрайт gauge_marker.png. Правила идут после раннего блока и его
переопределяют (файл только дописывается). */
.cs-kz-timing { position: relative; height: 54px; margin-bottom: 10px; box-sizing: border-box; border-radius: 0;
border: 6px solid transparent; border-left-width: 28px; border-right-width: 28px;
border-image: url("../img/ui/gauge_track2.png") 18 112 18 112 fill stretch;
background: none; box-shadow: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.cs-kz-timing .rail { position: absolute; inset: auto; left: -4px; right: -4px; top: 1px; bottom: 1px;
overflow: hidden; border-radius: 10px; }
.cs-kz-timing .zone { position: absolute; top: 0; bottom: 0; pointer-events: none; border-radius: 0; box-shadow: none;
background: radial-gradient(56% 78% at 50% 50%, rgba(150, 255, 180, .5) 0%, rgba(96, 226, 142, .3) 40%, rgba(70, 190, 120, .1) 70%, rgba(70, 190, 120, 0) 100%); }
.cs-kz-timing .zone:before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; margin-top: -.5px;
background: linear-gradient(90deg, rgba(200, 255, 215, 0), rgba(214, 255, 226, .5), rgba(200, 255, 215, 0)); }
.cs-kz-timing .core { position: absolute; top: 0; bottom: 0; pointer-events: none; border-radius: 0;
background: radial-gradient(44% 86% at 50% 50%, rgba(255, 252, 236, .95) 0%, rgba(255, 214, 126, .5) 40%, rgba(255, 168, 56, .16) 72%, rgba(255, 160, 40, 0) 100%); }
.cs-kz-timing .core:after { content: ''; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 1.5px; margin-left: -.75px;
background: linear-gradient(180deg, rgba(255, 248, 224, 0), rgba(255, 246, 218, .9), rgba(255, 248, 224, 0)); }
.cs-kz-timing .glass { position: absolute; left: 0; right: 0; top: 0; height: 42%; pointer-events: none; z-index: 4;
background: linear-gradient(180deg, rgba(255, 242, 210, .10), rgba(255, 242, 210, 0)); }
.cs-kz-timing .mk { position: absolute; top: -13px; bottom: -13px; width: 26px; margin-left: -13px; z-index: 6;
pointer-events: none; border-radius: 0; box-shadow: none;
background: url("../img/ui/gauge_marker.png") center/100% 100% no-repeat;
filter: drop-shadow(0 0 7px rgba(255, 206, 120, .85)) drop-shadow(0 0 16px rgba(255, 160, 50, .4)); }
/* ============================================================================
Фаза 104: раздел «Коллекция» -- побуквенный порт утверждённого прототипа col1
(/home/user/workspace/proto_col1/index.html, блоки «шапка», «колода», «фильтры»,
«сетка карт»). Значения скопированы из прототипа без изменений; заново ничего не
придумано. Префикс .cs-col- отделяет порт от старой сетки .grimoire-* , которую
он замещает. Лист карты (.cs-sheet и далее) портирован ранее и не дублируется.
========================================================================== */
.cs-col-screen { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* ---- шапка ---- */
.cs-col-hdr { flex: none; padding: 13px 14px 9px; display: flex; align-items: center; gap: 10px; }
.cs-col-hdr .ttl { flex: 1; min-width: 0; }
.cs-col-hdr .ttl b { display: block; font-family: 'PT Serif', serif; font-size: 19px; color: #ffe6ae; line-height: 1.1; }
.cs-col-hdr .cs-kick { display: block; }
.cs-col-purse { display: flex; gap: 6px; }
.cs-col-coin { display: flex; align-items: center; gap: 4px; padding: 6px 9px 6px 6px; border-radius: 11px;
font-size: 11px; font-weight: 800; color: #ffe3a8;
background: linear-gradient(180deg, rgba(46, 31, 20, .94), rgba(20, 13, 9, .96));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .2); }
.cs-col-coin img { width: 17px; height: 17px; display: block; }
/* ---- колода ---- */
.cs-col-deckbar { flex: none; margin: 0 12px 9px; padding: 9px 10px; border-radius: 16px;
background: linear-gradient(180deg, rgba(40, 27, 18, .9), rgba(17, 11, 8, .94));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .15); }
.cs-col-deckbar .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cs-col-deckbar .row b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c69b64; flex: 1; }
.cs-col-deckbar .row i { font-style: normal; font-size: 11px; font-weight: 800; color: #ffd98a; }
.cs-col-dslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 372px; margin: 0 auto; }
.cs-col-ds { position: relative; aspect-ratio: 1/1.1; border-radius: 12px; overflow: hidden; cursor: pointer;
padding: 0; border: 0; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .13); }
.cs-col-ds img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-col-ds.empty:after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: #6a5638; }
.cs-col-ds .mn { position: absolute; left: 4px; top: 4px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 6px;
font-size: 10px; font-weight: 900; color: #0b1830; display: grid; place-items: center;
background: linear-gradient(180deg, #bfe4ff, #5aa8e8); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
/* ---- фильтры ---- */
.cs-col-filters { flex: none; display: flex; gap: 6px; padding: 0 12px 9px; overflow-x: auto; scrollbar-width: none; }
.cs-col-filters::-webkit-scrollbar { display: none; }
.cs-col-fc { flex: none; padding: 7px 12px; border: 0; border-radius: 11px; cursor: pointer;
font-family: 'Exo 2', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #9d8259;
background: linear-gradient(180deg, rgba(36, 25, 16, .9), rgba(16, 11, 7, .93));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .11); white-space: nowrap; }
.cs-col-fc.is-on { color: #ffe3a8; box-shadow: inset 0 0 0 1.5px rgba(255, 205, 120, .45); }
.cs-col-fc em { font-style: normal; color: #f0a86a; margin-left: 5px; }
/* ---- сетка карт ---- */
.cs-col-grid { min-height: 0; padding: 2px 12px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; }
.cs-col-grid::-webkit-scrollbar { width: 0; }
.cs-col-tile { position: relative; padding: 6px 6px 8px; border-radius: 15px; cursor: pointer;
background: linear-gradient(180deg, rgba(48, 33, 21, .92), rgba(18, 12, 8, .95));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .14), 0 8px 18px rgba(0, 0, 0, .45);
transition: transform .13s ease; }
.cs-col-tile:active { transform: scale(.97); }
.cs-col-tile .art { position: relative; border-radius: 11px; overflow: hidden; aspect-ratio: 1/1.08; background: #140d09; }
.cs-col-tile .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-col-tile .art:after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 -22px 26px -14px rgba(8, 5, 3, .95); }
.cs-col-tile .nm { margin: 6px 1px 4px; font-size: 10.5px; font-weight: 800; line-height: 1.2; color: #f0dfc0;
text-align: center; min-height: 25px; display: flex; align-items: center; justify-content: center; }
.cs-col-tile .sr { display: flex; justify-content: center; gap: 2px; margin-bottom: 4px; }
.cs-col-tile .sr span { width: 9px; height: 9px; display: block; background: #4a3a24;
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cs-col-tile .sr span.on { background: linear-gradient(180deg, #ffe9ae, #e5a93f); }
.cs-col-tile .bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.cs-col-tile .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c98bff, #8f4fe0); }
.cs-col-tile .frac { margin: 4px 0 0; text-align: center; font-size: 9.5px; font-weight: 800; color: #a98f66; }
.cs-col-tile .mn { position: absolute; left: 9px; top: 9px; z-index: 2; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 7px;
display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #0b1830;
background: linear-gradient(180deg, #cfeaff, #5aa8e8); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cs-col-tile .lv { position: absolute; right: 9px; top: 9px; z-index: 2; width: 22px; height: 22px; transform: rotate(45deg); border-radius: 6px;
display: grid; place-items: center; background: linear-gradient(180deg, #ffe6ae, #dba24a); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cs-col-tile .lv b { transform: rotate(-45deg); font-size: 10px; font-weight: 900; color: #4a2c08; }
.cs-col-tile.rr:before, .cs-col-tile.re:before, .cs-col-tile.rl:before { content: ''; position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; }
.cs-col-tile.rr:before { box-shadow: inset 0 0 0 1.5px rgba(120, 190, 255, .5), 0 0 16px rgba(80, 160, 255, .14); }
.cs-col-tile.re:before { box-shadow: inset 0 0 0 1.5px rgba(196, 140, 255, .55), 0 0 18px rgba(150, 80, 255, .16); }
.cs-col-tile.rl:before { box-shadow: inset 0 0 0 1.5px rgba(255, 197, 110, .65), 0 0 22px rgba(255, 170, 60, .2); }
.cs-col-tile.indeck .art:before { content: 'В КОЛОДЕ'; position: absolute; left: 5px; bottom: 5px; z-index: 2; padding: 2px 6px; border-radius: 6px;
font-size: 7.5px; font-weight: 900; letter-spacing: .1em; color: #22160a;
background: linear-gradient(180deg, #ffdc95, #e0a446); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cs-col-tile.ready { animation: cs-col-rdy 2.4s ease-in-out infinite; }
@keyframes cs-col-rdy {
0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .14), 0 8px 18px rgba(0, 0, 0, .45); }
50% { box-shadow: inset 0 0 0 1.5px rgba(255, 220, 150, .6), 0 0 22px rgba(255, 180, 70, .28), 0 8px 18px rgba(0, 0, 0, .45); }
}
.cs-col-tile .up { margin: 6px -1px -2px; height: 24px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 4px;
border: 0; width: 100%; font-family: 'Exo 2', sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; color: #3c2407;
background: linear-gradient(180deg, #fff0c6 0%, #f7cf84 45%, #e0aa50 100%);
box-shadow: 0 2px 0 #8a5614, inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 14px rgba(255, 185, 80, .3); }
.cs-col-tile .up img { width: 12px; height: 12px; display: block; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .4)); }
.cs-col-tile .up.ph { visibility: hidden; }
.cs-col-tile .up.fk { background: linear-gradient(180deg, #e8d5ff 0%, #c49bf3 45%, #9a63dd 100%);
box-shadow: 0 2px 0 #4c2478, inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(160, 90, 240, .35); color: #2b1148; }
/* ==========================================================================================
Фаза 126: «Рюкзак» — порт утверждённого прототипа proto_bag2 (горизонтальные строки, один
слот в строке). Разметку и значения см. в прототипе; шапка, кошелёк и лента фильтров
переиспользуют уже портированные правила Коллекции (.cs-col-hdr/.cs-col-purse/.cs-col-coin/
.cs-col-filters/.cs-col-fc) и её анимацию готовности (cs-col-rdy) — новых стилей не вводим.
========================================================================================== */
.cs-bag-screen { position: relative; display: flex; flex-direction: column; min-height: 0; }
.cs-bag-cap { flex: none; margin: 0 12px 9px; padding: 9px 11px; border-radius: 16px;
background: linear-gradient(180deg, rgba(40, 27, 18, .9), rgba(17, 11, 8, .94));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .15); }
.cs-bag-cap .row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cs-bag-cap .row b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c69b64; flex: 1; }
.cs-bag-cap .row i { font-style: normal; font-size: 11px; font-weight: 800; color: #ffd98a; }
.cs-bag-cap .track { height: 7px; border-radius: 5px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.cs-bag-cap .track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ffd98a, #e09a42); box-shadow: 0 0 10px rgba(255, 180, 80, .45); }
.cs-bag-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 18px; scrollbar-width: none; }
.cs-bag-body::-webkit-scrollbar { width: 0; }
.cs-bag-sec { padding: 0 12px; margin-bottom: 16px; }
.cs-bag-sec[hidden] { display: none; }
.cs-bag-sechd { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 8px; }
.cs-bag-sechd b { font-family: 'PT Serif', serif; font-size: 14px; color: #ffe6ae; }
.cs-bag-sechd i { font-style: normal; font-size: 10px; font-weight: 600; color: #9d8259; line-height: 1.35; }
.cs-bag-rows { display: flex; flex-direction: column; gap: 8px; }
.cs-bag-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 15px;
background: linear-gradient(180deg, rgba(48, 33, 21, .92), rgba(18, 12, 8, .95));
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .14), 0 8px 18px rgba(0, 0, 0, .45);
transition: transform .13s ease; }
.cs-bag-row:active { transform: scale(.99); }
.cs-bag-row.rr { box-shadow: inset 0 0 0 1.5px rgba(120, 190, 255, .42), 0 8px 18px rgba(0, 0, 0, .45); }
.cs-bag-row.re { box-shadow: inset 0 0 0 1.5px rgba(196, 140, 255, .46), 0 8px 18px rgba(0, 0, 0, .45); }
.cs-bag-row.rl { box-shadow: inset 0 0 0 1.5px rgba(255, 197, 110, .55), 0 0 20px rgba(255, 170, 60, .16), 0 8px 18px rgba(0, 0, 0, .45); }
.cs-bag-row.ready { animation: cs-col-rdy 2.4s ease-in-out infinite; }
.cs-bag-row .ico { position: relative; flex: none; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center;
background: radial-gradient(62% 62% at 50% 40%, rgba(255, 214, 150, .12), rgba(0, 0, 0, 0) 72%), rgba(0, 0, 0, .35);
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .12); }
.cs-bag-row .ico img { width: 44px; height: 44px; display: block; object-fit: contain; }
.cs-bag-row .ico.card { width: 46px; height: 56px; border-radius: 11px; overflow: visible; background: #140d09; }
.cs-bag-row .ico.card img { width: 46px; height: 56px; border-radius: 11px; object-fit: cover; }
.cs-bag-row .ico .cs-bag-cnt { position: absolute; right: -5px; top: -5px; z-index: 2; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 8px;
display: grid; place-items: center; font-size: 10.5px; font-weight: 900; color: #3c2407;
background: linear-gradient(180deg, #ffe6ae, #dba24a); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cs-bag-row .body { flex: 1; min-width: 0; }
.cs-bag-row .body b { display: block; font-family: 'PT Serif', serif; font-size: 13.5px; color: #ffe6ae; line-height: 1.2; }
.cs-bag-row .body p { margin: 2px 0 0; font-size: 10.5px; font-weight: 600; color: #b5a17e; line-height: 1.3; }
.cs-bag-row .meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.cs-bag-row .meta .rar { font-size: 8.5px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: #9d8259; }
.cs-bag-row .meta .dur { display: flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; color: #c69b64; }
.cs-bag-row .meta .dur img { width: 12px; height: 12px; display: block; }
.cs-bag-row .meta .bar { flex: 1; min-width: 52px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.cs-bag-row .meta .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c98bff, #8f4fe0); }
.cs-bag-row .meta .bar.gold i { background: linear-gradient(90deg, #ffd98a, #e09a42); }
.cs-bag-row .meta .bar.hot i { background: linear-gradient(90deg, #ffb37a, #e2683f); }
.cs-bag-row .meta .frac { flex: none; font-size: 9.5px; font-weight: 800; color: #a98f66; }
.cs-bag-row .sr { display: inline-flex; gap: 2px; margin-top: 3px; }
.cs-bag-row .sr span { width: 9px; height: 9px; display: block; background: #4a3a24;
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cs-bag-row .sr span.on { background: linear-gradient(180deg, #ffe9ae, #e5a93f); }
.cs-bag-row .act { flex: none; border: 0; cursor: pointer; min-width: 86px; height: 32px; padding: 0 12px; border-radius: 11px;
display: flex; align-items: center; justify-content: center; gap: 4px;
font-family: 'Exo 2', sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .1em; color: #3c2407;
background: linear-gradient(180deg, #fff0c6 0%, #f7cf84 45%, #e0aa50 100%);
box-shadow: 0 2px 0 #8a5614, inset 0 1px 0 rgba(255, 255, 255, .55); }
.cs-bag-row .act img { width: 13px; height: 13px; display: block; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .4)); }
.cs-bag-row .act:active { transform: translateY(2px); box-shadow: 0 0 0 #8a5614; }
.cs-bag-row .act[disabled] { opacity: .55; cursor: default; }
.cs-bag-row .act.ghost { flex-direction: column; gap: 0; color: #9d8259; background: rgba(0, 0, 0, .3);
box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .12); cursor: default; min-width: 64px; }
.cs-bag-row .act.ghost span { font-size: 13px; font-weight: 900; color: #e9cb94; line-height: 1.05; }
.cs-bag-row .qty { flex: none; min-width: 74px; text-align: right; }
.cs-bag-row .qty b { display: block; font-family: 'PT Serif', serif; font-size: 17px; color: #ffe6ae; line-height: 1.1; }
.cs-bag-row .qty span { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8d7550; }
/* =============================================================================
Фаза 127: время суток на карте города и компактные игровые часы.
Дописано в конец файла — правки style.css только append-only.
============================================================================= */
/* Подложка меняется сменой src, поэтому переход смягчаем прозрачностью. */
.city-map-img { transition: opacity 600ms ease; }
/* Спрайты зданий нарисованы при дневном свете. Чтобы они не выглядели вклеенными
из дневного кадра, тонируем их под текущую фазу тем же сдвигом, который получила
подложка: утро — холоднее и светлее, закат — теплее и контрастнее, ночь — синее
и заметно темнее. Значения подобраны по разнице кадров карты. */
.city-map-world .city-building-img { transition: filter 600ms ease; }
.city-map-world[data-tod="morning"] .city-building-img {
filter: brightness(0.97) saturate(0.92) hue-rotate(-6deg) contrast(0.98);
}
.city-map-world[data-tod="sunset"] .city-building-img {
filter: brightness(0.94) saturate(1.12) sepia(0.16) hue-rotate(-12deg);
}
.city-map-world[data-tod="night"] .city-building-img {
filter: brightness(0.58) saturate(0.72) hue-rotate(18deg) contrast(1.06);
}
/* Тень тоже живёт по фазе: её dx/dy/alpha задаёт JS инлайном на .city-map-world. */
.city-map-world .city-building-shadow { transition: opacity 600ms ease, transform 600ms ease; }
/* Отражённые по горизонтали здания (сейчас — шахта золота). Тень отражается вместе
со спрайтом, поэтому зеркалим весь блок, а подписи возвращаем обратно. */
.city-building.is-flipped .city-building-img,
.city-building.is-flipped .city-building-shadow { transform: scaleX(-1); }
.city-building.is-flipped .city-building-shadow {
transform: scaleX(-1) translate(var(--city-shadow-dx), var(--city-shadow-dy)) scaleY(0.42) skewX(26deg);
}
/* --- компактные игровые часы под хедером ------------------------------------ */
.city-clock {
position: absolute;
top: calc(var(--hud-height, 56px) + 8px);
left: 50%;
transform: translateX(-50%);
z-index: 6;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(28, 24, 18, .82), rgba(16, 14, 11, .88));
border: 1px solid rgba(255, 216, 150, .22);
box-shadow: 0 6px 16px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 216, 150, .08);
backdrop-filter: blur(6px);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
.city-clock-icon { font-size: 13px; line-height: 1; }
.city-clock-time {
font-family: 'PT Serif', serif;
font-size: 14px;
font-weight: 700;
color: #ffe6ae;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.city-clock-phase {
font-size: 9px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: #a08a63;
line-height: 1;
}
/* Ободок часов подсказывает фазу, не перетягивая внимание с карты. */
.city-clock[data-phase="morning"] { border-color: rgba(190, 214, 235, .34); }
.city-clock[data-phase="day"] { border-color: rgba(255, 216, 150, .30); }
.city-clock[data-phase="sunset"] { border-color: rgba(240, 168, 96, .38); }
.city-clock[data-phase="night"] { border-color: rgba(140, 170, 220, .34); }
.city-clock[data-phase="night"] .city-clock-time { color: #dce8ff; }
/* =============================================================================
Фаза 128: хижина алхимика. Стили перенесены из одобренного прототипа proto_alc3
как есть — каждый селектор лишь ограничен контейнером .alc-root, чтобы общие
имена прототипа (.btn, .hdr, .coin, .card) не задевали остальную игру, а имена
анимаций получили префикс alc-. Правки дизайна не вносились.
Дописано в конец файла — правки style.css только append-only.
============================================================================= */
.alc-root * {box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.alc-root {height:100%}
.alc-root {font-family:'Exo 2',system-ui,sans-serif;color:#f3e6cf;
background:
radial-gradient(90% 60% at 50% -10%, rgba(120,72,30,.34), rgba(10,7,5,0) 60%),
radial-gradient(70% 50% at 50% 104%, rgba(86,48,22,.3), rgba(10,7,5,0) 58%),
#0b0806;
overflow:hidden}
.alc-root:before {content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
background-image:
repeating-linear-gradient(115deg, rgba(255,214,150,.022) 0 2px, rgba(0,0,0,0) 2px 7px),
repeating-linear-gradient(-35deg, rgba(0,0,0,.14) 0 3px, rgba(0,0,0,0) 3px 9px)}
.alc-root .screen {position:relative;z-index:1;height:100%;display:flex;flex-direction:column}
.alc-root .kick {font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#b0894f}
.alc-root .gold {color:#ffd98a}
.alc-root .pos {color:#95e08d}
.alc-root .hl {box-shadow:inset 0 0 0 1px rgba(255,216,150,.16)}
.alc-root .btn {border:0;cursor:pointer;height:50px;padding:0 18px;border-radius:15px;width:100%;
font-family:'Exo 2',sans-serif;font-size:14.5px;font-weight:800;color:#3c2407;
background:linear-gradient(180deg,#ffeec2 0%,#f6cd80 42%,#dfa84c 100%);
box-shadow:0 4px 0 #7d4e12, 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
display:flex;align-items:center;justify-content:center;gap:8px}
.alc-root .btn:active {transform:translateY(2px);box-shadow:0 2px 0 #7d4e12}
.alc-root .btn[disabled] {filter:grayscale(.55) brightness(.7);box-shadow:0 4px 0 #3d2a12;cursor:default}
.alc-root .btn img {width:19px;height:19px;display:block}
.alc-root .btn.ghost {background:linear-gradient(180deg, rgba(58,40,26,.95), rgba(26,18,12,.96));color:#e9cb94;height:44px;font-size:13px;
box-shadow:inset 0 0 0 1px rgba(255,216,150,.24), 0 8px 18px rgba(0,0,0,.4)}
.alc-root .btn.ghost:active {transform:translateY(1px);box-shadow:inset 0 0 0 1px rgba(255,216,150,.24)}
.alc-root .btn.danger {background:linear-gradient(180deg,#f0c0a6,#d98d6a 45%,#b4643f);box-shadow:0 4px 0 #6a3318,0 10px 22px rgba(0,0,0,.4)}
.alc-root .hdr {flex:none;padding:13px 14px 9px;display:flex;align-items:center;gap:10px}
.alc-root .hdr .ttl {flex:1;min-width:0}
.alc-root .hdr .ttl b {display:block;font-family:'PT Serif',serif;font-size:19px;color:#ffe6ae;line-height:1.1}
.alc-root .purse {display:flex;gap:6px}
.alc-root .coin {display:flex;align-items:center;gap:4px;padding:6px 9px 6px 6px;border-radius:11px;font-size:11px;font-weight:800;color:#ffe3a8;
background:linear-gradient(180deg, rgba(46,31,20,.94), rgba(20,13,9,.96));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.2)}
.alc-root .coin img {width:17px;height:17px;display:block}
.alc-root .deckbar {flex:none;margin:0 12px 9px;padding:9px 10px;border-radius:16px;
background:linear-gradient(180deg, rgba(40,27,18,.9), rgba(17,11,8,.94));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.15)}
.alc-root .deckbar .row {display:flex;align-items:center;gap:8px;margin-bottom:8px}
.alc-root .deckbar .row b {font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c69b64;flex:1}
.alc-root .deckbar .row i {font-style:normal;font-size:11px;font-weight:800;color:#ffd98a}
.alc-root .dslots {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-width:372px;margin:0 auto}
.alc-root .ds {position:relative;aspect-ratio:1/1.1;border-radius:12px;overflow:hidden;cursor:pointer;
background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,216,150,.13)}
.alc-root .ds img {width:100%;height:100%;object-fit:cover;display:block}
.alc-root .ds.empty:after {content:'+';position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:#6a5638}
.alc-root .ds .mn {position:absolute;left:4px;top:4px;min-width:17px;height:17px;padding:0 3px;border-radius:6px;
font-size:10px;font-weight:900;color:#0b1830;display:grid;place-items:center;
background:linear-gradient(180deg,#bfe4ff,#5aa8e8);box-shadow:0 2px 5px rgba(0,0,0,.5)}
.alc-root .filters {flex:none;display:flex;gap:6px;padding:0 12px 9px;overflow-x:auto;scrollbar-width:none}
.alc-root .filters::-webkit-scrollbar {display:none}
.alc-root .fc {flex:none;padding:7px 12px;border:0;border-radius:11px;cursor:pointer;
font-family:'Exo 2',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;color:#9d8259;
background:linear-gradient(180deg, rgba(36,25,16,.9), rgba(16,11,7,.93));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.11);white-space:nowrap}
.alc-root .fc.is-on {color:#ffe3a8;box-shadow:inset 0 0 0 1.5px rgba(255,205,120,.45)}
.alc-root .fc em {font-style:normal;color:#f0a86a;margin-left:5px}
.alc-root .grid {flex:1;min-height:0;overflow-y:auto;padding:2px 12px 16px;
display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-content:start}
.alc-root .grid::-webkit-scrollbar {width:0}
.alc-root .tile {position:relative;padding:6px 6px 8px;border-radius:15px;cursor:pointer;
background:linear-gradient(180deg, rgba(48,33,21,.92), rgba(18,12,8,.95));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.14), 0 8px 18px rgba(0,0,0,.45);
transition:transform .13s ease}
.alc-root .tile:active {transform:scale(.97)}
.alc-root .tile .art {position:relative;border-radius:11px;overflow:hidden;aspect-ratio:1/1.08;background:#140d09}
.alc-root .tile .art img {width:100%;height:100%;object-fit:cover;display:block}
.alc-root .tile .art:after {content:'';position:absolute;inset:0;box-shadow:inset 0 -22px 26px -14px rgba(8,5,3,.95)}
.alc-root .tile .nm {margin:6px 1px 4px;font-size:10.5px;font-weight:800;line-height:1.2;color:#f0dfc0;
text-align:center;min-height:25px;display:flex;align-items:center;justify-content:center}
.alc-root .tile .sr {display:flex;justify-content:center;gap:2px;margin-bottom:4px}
.alc-root .tile .sr span {width:9px;height:9px;display:block;background:#4a3a24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.alc-root .tile .sr span.on {background:linear-gradient(180deg,#ffe9ae,#e5a93f)}
.alc-root .tile .bar {height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.alc-root .tile .bar i {display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c98bff,#8f4fe0)}
.alc-root .tile .frac {margin:4px 0 0;text-align:center;font-size:9.5px;font-weight:800;color:#a98f66}
.alc-root .tile .mn {position:absolute;left:9px;top:9px;z-index:2;min-width:20px;height:20px;padding:0 4px;border-radius:7px;
display:grid;place-items:center;font-size:11px;font-weight:900;color:#0b1830;
background:linear-gradient(180deg,#cfeaff,#5aa8e8);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.alc-root .tile .lv {position:absolute;right:9px;top:9px;z-index:2;width:22px;height:22px;transform:rotate(45deg);border-radius:6px;
display:grid;place-items:center;background:linear-gradient(180deg,#ffe6ae,#dba24a);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.alc-root .tile .lv b {transform:rotate(-45deg);font-size:10px;font-weight:900;color:#4a2c08}
.alc-root .tile.rr:before, .alc-root .tile.re:before, .alc-root .tile.rl:before {content:'';position:absolute;inset:-1px;border-radius:16px;pointer-events:none}
.alc-root .tile.rr:before {box-shadow:inset 0 0 0 1.5px rgba(120,190,255,.5), 0 0 16px rgba(80,160,255,.14)}
.alc-root .tile.re:before {box-shadow:inset 0 0 0 1.5px rgba(196,140,255,.55), 0 0 18px rgba(150,80,255,.16)}
.alc-root .tile.rl:before {box-shadow:inset 0 0 0 1.5px rgba(255,197,110,.65), 0 0 22px rgba(255,170,60,.2)}
.alc-root .tile.indeck .art:before {content:'В КОЛОДЕ';position:absolute;left:5px;bottom:5px;z-index:2;padding:2px 6px;border-radius:6px;
font-size:7.5px;font-weight:900;letter-spacing:.1em;color:#22160a;background:linear-gradient(180deg,#ffdc95,#e0a446);
box-shadow:0 2px 6px rgba(0,0,0,.5)}
.alc-root .tile.ready {animation:alc-rdy 2.4s ease-in-out infinite}
@keyframes alc-rdy{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,216,150,.14), 0 8px 18px rgba(0,0,0,.45)}
50%{box-shadow:inset 0 0 0 1.5px rgba(255,220,150,.6), 0 0 22px rgba(255,180,70,.28), 0 8px 18px rgba(0,0,0,.45)}}
.alc-root .tile .up {margin:6px -1px -2px;height:24px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:4px;
font-size:9.5px;font-weight:900;letter-spacing:.1em;color:#3c2407;
background:linear-gradient(180deg,#fff0c6 0%,#f7cf84 45%,#e0aa50 100%);
box-shadow:0 2px 0 #8a5614, inset 0 1px 0 rgba(255,255,255,.55), 0 0 14px rgba(255,185,80,.3)}
.alc-root .tile .up img {width:12px;height:12px;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.alc-root .tile .up.ph {visibility:hidden}
.alc-root .tile .up.fk {background:linear-gradient(180deg,#e8d5ff 0%,#c49bf3 45%,#9a63dd 100%);box-shadow:0 2px 0 #4c2478, inset 0 1px 0 rgba(255,255,255,.5), 0 0 14px rgba(160,90,240,.35);color:#2b1148}
.alc-root .bg-cap {flex:none;margin:0 12px 9px;padding:9px 11px;border-radius:16px;
background:linear-gradient(180deg, rgba(40,27,18,.9), rgba(17,11,8,.94));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.15)}
.alc-root .bg-cap .row {display:flex;align-items:center;gap:8px;margin-bottom:7px}
.alc-root .bg-cap .row b {font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c69b64;flex:1}
.alc-root .bg-cap .row i {font-style:normal;font-size:11px;font-weight:800;color:#ffd98a}
.alc-root .bg-cap .track {height:7px;border-radius:5px;background:rgba(0,0,0,.45);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.alc-root .bg-cap .track i {display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#ffd98a,#e09a42);box-shadow:0 0 10px rgba(255,180,80,.45)}
.alc-root .bg-body {flex:1;min-height:0;overflow-y:auto;padding:2px 0 18px;scrollbar-width:none}
.alc-root .bg-body::-webkit-scrollbar {width:0}
.alc-root .bg-sec {padding:0 12px;margin-bottom:16px}
.alc-root .bg-sec[hidden] {display:none}
.alc-root .bg-sechd {display:flex;flex-direction:column;gap:2px;margin:0 2px 8px}
.alc-root .bg-sechd b {font-family:'PT Serif',serif;font-size:14px;color:#ffe6ae}
.alc-root .bg-sechd i {font-style:normal;font-size:10px;font-weight:600;color:#9d8259;line-height:1.35}
.alc-root .bg-rows {display:flex;flex-direction:column;gap:8px}
.alc-root .bg-row {position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:15px;
background:linear-gradient(180deg, rgba(48,33,21,.92), rgba(18,12,8,.95));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.14), 0 8px 18px rgba(0,0,0,.45);
transition:transform .13s ease}
.alc-root .bg-row:active {transform:scale(.99)}
.alc-root .bg-row.rr {box-shadow:inset 0 0 0 1.5px rgba(120,190,255,.42), 0 8px 18px rgba(0,0,0,.45)}
.alc-root .bg-row.re {box-shadow:inset 0 0 0 1.5px rgba(196,140,255,.46), 0 8px 18px rgba(0,0,0,.45)}
.alc-root .bg-row.rl {box-shadow:inset 0 0 0 1.5px rgba(255,197,110,.55), 0 0 20px rgba(255,170,60,.16), 0 8px 18px rgba(0,0,0,.45)}
.alc-root .bg-row.ready {animation:alc-rdy 2.4s ease-in-out infinite}
.alc-root .bg-row .ico {position:relative;flex:none;width:54px;height:54px;border-radius:13px;display:grid;place-items:center;
background:radial-gradient(62% 62% at 50% 40%, rgba(255,214,150,.12), rgba(0,0,0,0) 72%), rgba(0,0,0,.35);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.12)}
.alc-root .bg-row .ico img {width:44px;height:44px;display:block;object-fit:contain}
.alc-root .bg-row .ico.card {width:46px;height:56px;border-radius:11px;overflow:visible;background:#140d09}
.alc-root .bg-row .ico.card img {width:46px;height:56px;border-radius:11px;object-fit:cover}
.alc-root .bg-row .ico .bg-cnt {position:absolute;right:-5px;top:-5px;z-index:2;min-width:21px;height:21px;padding:0 5px;border-radius:8px;
display:grid;place-items:center;font-size:10.5px;font-weight:900;color:#3c2407;
background:linear-gradient(180deg,#ffe6ae,#dba24a);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.alc-root .bg-row .body {flex:1;min-width:0}
.alc-root .bg-row .body b {display:block;font-family:'PT Serif',serif;font-size:13.5px;color:#ffe6ae;line-height:1.2}
.alc-root .bg-row .body p {margin:2px 0 0;font-size:10.5px;font-weight:600;color:#b5a17e;line-height:1.3}
.alc-root .bg-row .meta {display:flex;align-items:center;gap:7px;margin-top:5px}
.alc-root .bg-row .meta .rar {font-size:8.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#9d8259}
.alc-root .bg-row .meta .dur {display:flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;color:#c69b64}
.alc-root .bg-row .meta .dur img {width:12px;height:12px;display:block}
.alc-root .bg-row .meta .bar {flex:1;min-width:52px;height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.alc-root .bg-row .meta .bar i {display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c98bff,#8f4fe0)}
.alc-root .bg-row .meta .bar.gold i {background:linear-gradient(90deg,#ffd98a,#e09a42)}
.alc-root .bg-row .meta .bar.hot i {background:linear-gradient(90deg,#ffb37a,#e2683f)}
.alc-root .bg-row .meta .frac {flex:none;font-size:9.5px;font-weight:800;color:#a98f66}
.alc-root .bg-row .sr {display:inline-flex;gap:2px;margin-top:3px}
.alc-root .bg-row .sr span {width:9px;height:9px;display:block;background:#4a3a24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.alc-root .bg-row .sr span.on {background:linear-gradient(180deg,#ffe9ae,#e5a93f)}
.alc-root .bg-row .act {flex:none;border:0;cursor:pointer;min-width:86px;height:32px;padding:0 12px;border-radius:11px;
display:flex;align-items:center;justify-content:center;gap:4px;
font-family:'Exo 2',sans-serif;font-size:10px;font-weight:900;letter-spacing:.1em;color:#3c2407;
background:linear-gradient(180deg,#fff0c6 0%,#f7cf84 45%,#e0aa50 100%);
box-shadow:0 2px 0 #8a5614, inset 0 1px 0 rgba(255,255,255,.55)}
.alc-root .bg-row .act img {width:13px;height:13px;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.alc-root .bg-row .act:active {transform:translateY(2px);box-shadow:0 0 0 #8a5614}
.alc-root .bg-row .act.ghost {flex-direction:column;gap:0;color:#9d8259;background:rgba(0,0,0,.3);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.12);cursor:default;min-width:64px}
.alc-root .bg-row .act.ghost span {font-size:13px;font-weight:900;color:#e9cb94;line-height:1.05}
.alc-root .bg-row .qty {flex:none;min-width:74px;text-align:right}
.alc-root .bg-row .qty b {display:block;font-family:'PT Serif',serif;font-size:17px;color:#ffe6ae;line-height:1.1}
.alc-root .bg-row .qty span {font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8d7550}
.alc-root .al-stage {position:relative;flex:none;margin:0 12px 0;height:224px;border-radius:20px;overflow:hidden;
background:
radial-gradient(74% 56% at 50% 82%, rgba(255,150,50,.20), rgba(0,0,0,0) 70%),
radial-gradient(90% 70% at 50% 8%, rgba(120,72,30,.26), rgba(0,0,0,0) 72%),
linear-gradient(180deg, rgba(38,25,16,.94), rgba(14,9,6,.96));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.16), 0 12px 26px rgba(0,0,0,.5)}
.alc-root .al-stage:before {content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(118deg, rgba(255,214,150,.03) 0 2px, rgba(0,0,0,0) 2px 8px)}
.alc-root .al-lvl {position:absolute;left:11px;top:11px;z-index:4;display:flex;align-items:center;gap:5px;
padding:5px 9px;border-radius:10px;font-size:9.5px;font-weight:900;letter-spacing:.09em;
text-transform:uppercase;color:#e9cb94;background:rgba(0,0,0,.42);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.18)}
.alc-root .al-lvl img {width:13px;height:13px;display:block}
.alc-root .al-hint {position:absolute;right:11px;top:11px;z-index:4;padding:5px 9px;border-radius:10px;
font-size:9.5px;font-weight:800;color:#b5a17e;background:rgba(0,0,0,.42);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.12)}
.alc-root .al-pot {position:absolute;left:50%;top:22px;width:186px;height:186px;transform:translateX(-50%);z-index:2}
.alc-root .al-pot img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;transition:opacity .45s ease;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.alc-root .al-pot img.on {opacity:1}
.alc-root .al-pot.shake {animation:alc-al-shake .34s ease-in-out}
@keyframes alc-al-shake{0%,100%{transform:translateX(-50%)}
25%{transform:translateX(calc(-50% - 3px)) rotate(-.7deg)}
75%{transform:translateX(calc(-50% + 3px)) rotate(.7deg)}}
.alc-root .al-glow {position:absolute;left:50%;top:126px;width:250px;height:110px;transform:translateX(-50%);z-index:1;
border-radius:50%;opacity:.5;filter:blur(16px);transition:opacity .5s ease, background .5s ease;
background:radial-gradient(50% 50% at 50% 50%, rgba(255,150,50,.55), rgba(0,0,0,0) 70%);
animation:alc-al-breathe 3.1s ease-in-out infinite}
@keyframes alc-al-breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.09)}}
.alc-root .al-stage.s3 .al-glow {background:radial-gradient(50% 50% at 50% 50%, rgba(214,140,255,.6), rgba(0,0,0,0) 70%);opacity:.75}
.alc-root .al-stage.s0 .al-glow {opacity:.12}
.alc-root .al-steam {position:absolute;left:50%;top:4px;width:160px;height:120px;transform:translateX(-50%);z-index:3;pointer-events:none;opacity:0;transition:opacity .6s ease}
.alc-root .al-stage.s1 .al-steam, .alc-root .al-stage.s2 .al-steam, .alc-root .al-stage.s3 .al-steam {opacity:1}
.alc-root .al-steam i {position:absolute;bottom:0;width:40px;height:40px;border-radius:50%;background:rgba(255,230,190,.10);
filter:blur(7px);animation:alc-al-rise 3.4s linear infinite}
.alc-root .al-steam i:nth-child(1) {left:14px;animation-delay:0s}
.alc-root .al-steam i:nth-child(2) {left:56px;width:52px;animation-delay:.9s}
.alc-root .al-steam i:nth-child(3) {left:104px;animation-delay:1.8s}
@keyframes alc-al-rise{0%{transform:translateY(16px) scale(.6);opacity:0}
25%{opacity:.8}
100%{transform:translateY(-78px) scale(1.5);opacity:0}}
.alc-root .al-sparks {position:absolute;left:50%;top:18px;width:210px;height:190px;transform:translateX(-50%);z-index:3;pointer-events:none;opacity:0;transition:opacity .5s ease}
.alc-root .al-stage.s3 .al-sparks {opacity:1}
.alc-root .al-sparks i {position:absolute;bottom:34px;width:4px;height:4px;border-radius:50%;background:#ffe6ae;
box-shadow:0 0 7px rgba(255,200,120,.95);animation:alc-al-spark 2.6s ease-in-out infinite}
.alc-root .al-sparks i:nth-child(1) {left:36px;animation-delay:.1s}
.alc-root .al-sparks i:nth-child(2) {left:74px;animation-delay:.7s}
.alc-root .al-sparks i:nth-child(3) {left:112px;animation-delay:1.2s}
.alc-root .al-sparks i:nth-child(4) {left:150px;animation-delay:1.7s}
.alc-root .al-sparks i:nth-child(5) {left:94px;animation-delay:2.2s}
@keyframes alc-al-spark{0%{transform:translateY(0) scale(.5);opacity:0}
30%{opacity:1}
100%{transform:translateY(-104px) scale(1.15);opacity:0}}
.alc-root .al-slots {position:relative;z-index:6;margin:-34px 12px 0;padding-bottom:22px;display:flex;justify-content:center;gap:12px}
.alc-root .al-slot {position:relative;width:62px;height:62px;border-radius:17px;cursor:pointer;
display:grid;place-items:center;transition:transform .14s ease, box-shadow .2s ease;
background:radial-gradient(64% 64% at 50% 38%, rgba(255,214,150,.10), rgba(0,0,0,0) 74%), rgba(10,7,5,.72);
box-shadow:inset 0 0 0 1.5px rgba(255,216,150,.20), 0 6px 14px rgba(0,0,0,.5)}
.alc-root .al-slot:active {transform:scale(.96)}
.alc-root .al-slot.full {box-shadow:inset 0 0 0 1.5px rgba(255,216,150,.44), 0 0 18px rgba(255,170,60,.18), 0 6px 14px rgba(0,0,0,.5)}
.alc-root .al-slot.full.rr {box-shadow:inset 0 0 0 1.5px rgba(120,190,255,.5), 0 0 18px rgba(90,160,255,.16), 0 6px 14px rgba(0,0,0,.5)}
.alc-root .al-slot.full.re {box-shadow:inset 0 0 0 1.5px rgba(196,140,255,.52), 0 0 18px rgba(160,90,255,.18), 0 6px 14px rgba(0,0,0,.5)}
.alc-root .al-slot.locked {opacity:.5;cursor:default}
.alc-root .al-slot img {width:46px;height:46px;display:block;object-fit:contain;animation:alc-al-drop .3s ease}
@keyframes alc-al-drop{0%{transform:translateY(-14px) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.alc-root .al-slot .ph {font-size:22px;font-weight:300;color:rgba(255,216,150,.34);line-height:1}
.alc-root .al-slot .lk {width:15px;height:15px;opacity:.6}
.alc-root .al-slot .x {position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;
font-size:11px;font-weight:900;color:#3c2407;background:linear-gradient(180deg,#ffe6ae,#dba24a);
box-shadow:0 2px 6px rgba(0,0,0,.5)}
.alc-root .al-slot .cap {position:absolute;left:-8px;right:-8px;bottom:-16px;text-align:center;font-size:8px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:#9d8259;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alc-root .al-ess {flex:none;margin:0 12px 11px;padding:10px 11px;border-radius:16px;
background:linear-gradient(180deg, rgba(40,27,18,.9), rgba(17,11,8,.94));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.15)}
.alc-root .al-ess .hd {display:flex;align-items:center;gap:8px;margin-bottom:9px}
.alc-root .al-ess .hd b {flex:1;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c69b64}
.alc-root .al-ess .hd i {font-style:normal;font-size:10px;font-weight:800;color:#8d7550}
.alc-root .al-ess .grid {display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.alc-root .al-e {display:flex;align-items:center;gap:7px}
.alc-root .al-e span {flex:none;width:44px;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#9d8259}
.alc-root .al-e .track {flex:1;height:6px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.alc-root .al-e .track i {display:block;height:100%;width:0;border-radius:4px;transition:width .35s cubic-bezier(.3,1.2,.4,1)}
.alc-root .al-e.hot .track i {background:linear-gradient(90deg,#ffb37a,#e2683f);box-shadow:0 0 8px rgba(226,104,63,.5)}
.alc-root .al-e.cold .track i {background:linear-gradient(90deg,#a9dcff,#4f93e0);box-shadow:0 0 8px rgba(79,147,224,.5)}
.alc-root .al-e.zeal .track i {background:linear-gradient(90deg,#c98bff,#8f4fe0);box-shadow:0 0 8px rgba(143,79,224,.5)}
.alc-root .al-e.calm .track i {background:linear-gradient(90deg,#b6e8a6,#5aa757);box-shadow:0 0 8px rgba(90,167,87,.5)}
.alc-root .al-e b {flex:none;min-width:14px;text-align:right;font-size:11px;font-weight:900;color:#e9cb94}
.alc-root .al-e.top span, .alc-root .al-e.top b {color:#ffd98a}
.alc-root .al-go {flex:none;margin:0 12px 6px}
.alc-root .al-note {flex:none;margin:0 14px 16px;font-size:10px;font-weight:600;color:#8d7550;line-height:1.4;text-align:center}
.alc-root .al-fire {position:fixed;inset:0;z-index:40;display:none;align-items:flex-end;
background:radial-gradient(70% 50% at 50% 70%, rgba(120,50,16,.36), rgba(0,0,0,.82) 70%);
backdrop-filter:blur(3px)}
.alc-root .al-fire.on {display:flex;animation:alc-al-fade .22s ease}
@keyframes alc-al-fade{from{opacity:0}to{opacity:1}}
.alc-root .al-fire .sheet {width:100%;padding:16px 14px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
background:linear-gradient(180deg, rgba(46,31,20,.98), rgba(16,11,7,.99));
box-shadow:inset 0 1px 0 rgba(255,216,150,.2), 0 -14px 34px rgba(0,0,0,.6);
animation:alc-al-up .26s cubic-bezier(.2,1.1,.3,1)}
@keyframes alc-al-up{from{transform:translateY(18px)}to{transform:none}}
.alc-root .al-fire .ttl {text-align:center;margin-bottom:12px}
.alc-root .al-fire .ttl b {display:block;font-family:'PT Serif',serif;font-size:17px;color:#ffe6ae}
.alc-root .al-fire .ttl p {margin:3px 0 0;font-size:10.5px;font-weight:600;color:#b5a17e}
.alc-root .al-phases {display:flex;justify-content:center;gap:6px;margin-bottom:13px}
.alc-root .al-phases div {min-width:74px;padding:5px 8px;border-radius:10px;text-align:center;font-size:9px;font-weight:900;
letter-spacing:.08em;text-transform:uppercase;color:#7d6746;background:rgba(0,0,0,.34);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.1);transition:color .2s ease, box-shadow .2s ease}
.alc-root .al-phases div.now {color:#ffd98a;box-shadow:inset 0 0 0 1.5px rgba(255,216,150,.4)}
.alc-root .al-phases div.done {color:#95e08d;box-shadow:inset 0 0 0 1px rgba(149,224,141,.34)}
.alc-root .al-bar {position:relative;height:56px;border-radius:15px;overflow:hidden;margin-bottom:11px;
background:linear-gradient(90deg, #2a4f7a 0%, #35617f 22%, #4a6a3c 42%, #6d6428 58%, #8a4a1e 78%, #a33314 100%);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.18), inset 0 3px 10px rgba(0,0,0,.5)}
.alc-root .al-bar .ticks {position:absolute;inset:0;background:repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 5%)}
.alc-root .al-bar .win {position:absolute;top:0;bottom:0;border-radius:8px;
background:linear-gradient(180deg, rgba(255,240,200,.30), rgba(255,210,130,.14));
box-shadow:inset 0 0 0 1.5px rgba(255,235,180,.75), 0 0 20px rgba(255,200,120,.4);
transition:left .3s ease, width .3s ease}
.alc-root .al-bar .win.sweet {position:absolute;top:8px;bottom:8px;border-radius:6px;background:rgba(255,255,255,.22);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.5)}
.alc-root .al-bar .mk {position:absolute;top:-3px;bottom:-3px;width:5px;margin-left:-2.5px;border-radius:3px;
background:linear-gradient(180deg,#fff8e6,#ffd98a);box-shadow:0 0 12px rgba(255,220,150,.95), 0 0 3px #fff}
.alc-root .al-bar .lbl {position:absolute;bottom:4px;font-size:8px;font-weight:900;letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.5)}
.alc-root .al-bar .lbl.l {left:8px}
.alc-root .al-bar .lbl.r {right:8px}
.alc-root .al-bar.flash:after {content:'';position:absolute;inset:0;background:rgba(255,255,255,.55);animation:alc-al-flash .3s ease forwards}
@keyframes alc-al-flash{to{opacity:0}}
.alc-root .al-scores {display:flex;gap:6px;margin-bottom:12px}
.alc-root .al-scores div {flex:1;padding:7px 4px;border-radius:11px;text-align:center;background:rgba(0,0,0,.32);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.1)}
.alc-root .al-scores div span {display:block;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7d6746}
.alc-root .al-scores div b {display:block;margin-top:2px;font-size:14px;font-weight:900;color:#4a3a24}
.alc-root .al-scores div.has b {color:#ffe6ae}
.alc-root .al-res {position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;
background:radial-gradient(60% 45% at 50% 42%, rgba(150,96,30,.34), rgba(0,0,0,.86) 70%);
backdrop-filter:blur(4px)}
.alc-root .al-res.on {display:flex;animation:alc-al-fade .22s ease}
.alc-root .al-res .card {position:relative;width:100%;max-width:330px;padding:18px 16px 16px;border-radius:22px;text-align:center;
background:linear-gradient(180deg, rgba(52,35,22,.98), rgba(17,11,7,.99));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.24), 0 18px 40px rgba(0,0,0,.6);
animation:alc-al-pop .34s cubic-bezier(.2,1.3,.35,1)}
@keyframes alc-al-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.alc-root .al-res .rays {position:absolute;left:50%;top:14px;width:250px;height:250px;transform:translateX(-50%);pointer-events:none;
background:repeating-conic-gradient(from 0deg, rgba(255,214,150,.16) 0 4deg, rgba(0,0,0,0) 4deg 26deg);
-webkit-mask-image:radial-gradient(closest-side, rgba(0,0,0,.9) 22%, rgba(0,0,0,0) 76%);
mask-image:radial-gradient(closest-side, rgba(0,0,0,.9) 22%, rgba(0,0,0,0) 76%);
animation:alc-al-spin 26s linear infinite;opacity:.55}
@keyframes alc-al-spin{to{transform:translateX(-50%) rotate(360deg)}}
.alc-root .al-res .vial {position:relative;width:104px;height:104px;margin:2px auto 10px;border-radius:26px;display:grid;place-items:center;
background:radial-gradient(60% 60% at 50% 38%, rgba(255,214,150,.18), rgba(0,0,0,0) 72%), rgba(0,0,0,.4);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.2)}
.alc-root .al-res .vial img {width:84px;height:84px;object-fit:contain;animation:alc-al-float 3.4s ease-in-out infinite}
@keyframes alc-al-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.alc-root .al-res .q {display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:10px;margin-bottom:8px;
font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffd98a;
background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,216,150,.26)}
.alc-root .al-res h3 {margin:0;font-family:'PT Serif',serif;font-size:19px;color:#ffe6ae;line-height:1.2}
.alc-root .al-res .desc {margin:5px 0 12px;font-size:11px;font-weight:600;color:#b5a17e;line-height:1.4}
.alc-root .al-res .stats {display:flex;gap:7px;margin-bottom:13px}
.alc-root .al-res .stats div {flex:1;padding:8px 5px;border-radius:12px;background:rgba(0,0,0,.32);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.12)}
.alc-root .al-res .stats span {display:block;font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#7d6746}
.alc-root .al-res .stats b {display:block;margin-top:3px;font-size:13px;font-weight:900;color:#ffe6ae}
.alc-root .al-res .stats b.pos {color:#95e08d}
.alc-root .al-res .dbl {margin:0 0 12px;padding:8px 10px;border-radius:12px;font-size:10.5px;font-weight:800;color:#95e08d;
background:rgba(70,120,60,.16);box-shadow:inset 0 0 0 1px rgba(149,224,141,.3)}
.alc-root .al-res .acts {display:flex;gap:8px}
.alc-root .al-res .acts .btn {height:46px;font-size:12.5px}
.alc-root .al-res .acts .btn.ghost {height:46px;font-size:12.5px}
.alc-root .al-body {flex:1;min-height:0;overflow-y:auto;padding:2px 0 18px;scrollbar-width:none}
.alc-root .al-body::-webkit-scrollbar {width:0}
.alc-root .al-pane[hidden] {display:none}
.alc-root .al-tags {display:flex;align-items:center;gap:4px;margin-top:5px}
.alc-root .al-tag {padding:2px 6px;border-radius:6px;font-size:8.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.alc-root .al-tag.hot {color:#f0a678}
.alc-root .al-tag.cold {color:#8fc6f5}
.alc-root .al-tag.zeal {color:#c39bf0}
.alc-root .al-tag.calm {color:#9dd18f}
.alc-root .al-locked {filter:grayscale(.5);opacity:.72}
.alc-root button.bg-row {text-align:left;font-family:'Exo 2',sans-serif;border:0;width:100%;cursor:pointer}
.alc-root .al-up {margin:0 12px 18px;padding:11px 12px;border-radius:16px;
background:linear-gradient(180deg, rgba(40,27,18,.9), rgba(17,11,8,.94));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.15)}
.alc-root .al-up .hd {display:flex;align-items:center;gap:8px;margin-bottom:8px}
.alc-root .al-up .hd b {flex:1;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c69b64}
.alc-root .al-up .hd i {font-style:normal;font-size:10px;font-weight:800;color:#ffd98a}
.alc-root .al-up ul {margin:0;padding:0 0 0 14px;list-style:none}
.alc-root .al-up li {position:relative;font-size:10.5px;font-weight:600;color:#b5a17e;line-height:1.55}
.alc-root .al-up li:before {content:'';position:absolute;left:-12px;top:6px;width:5px;height:5px;border-radius:50%;background:#dba24a}
.alc-root .vx {position:fixed;inset:0;z-index:40;display:none;flex-direction:column;
background:
radial-gradient(64% 44% at 50% 46%, rgba(140,70,20,.34), rgba(0,0,0,0) 68%),
radial-gradient(90% 60% at 50% 104%, rgba(90,40,14,.3), rgba(0,0,0,0) 62%),
#0a0705;
touch-action:none;user-select:none}
.alc-root .vx.on {display:flex;animation:alc-vx-in .26s ease}
@keyframes alc-vx-in{from{opacity:0}to{opacity:1}}
.alc-root .vx:before {content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(115deg, rgba(255,214,150,.022) 0 2px, rgba(0,0,0,0) 2px 7px)}
.alc-root .vx-top {position:relative;flex:none;padding:16px 16px 0;text-align:center}
.alc-root .vx-top .st {display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:10px;margin-bottom:7px;
font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#c69b64;
background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,216,150,.16)}
.alc-root .vx-top b {display:block;font-family:'PT Serif',serif;font-size:21px;color:#ffe6ae;line-height:1.15}
.alc-root .vx-top p {margin:4px 0 0;font-size:11px;font-weight:600;color:#b5a17e;line-height:1.35;min-height:30px}
.alc-root .vx-time {flex:none;height:5px;margin:10px 18px 0;border-radius:4px;background:rgba(0,0,0,.5);overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.alc-root .vx-time i {display:block;height:100%;width:100%;border-radius:4px;
background:linear-gradient(90deg,#ffd98a,#e09a42);box-shadow:0 0 10px rgba(255,180,80,.45)}
.alc-root .vx-arena {position:relative;flex:1;min-height:0;display:grid;place-items:center}
.alc-root .vx-canvas {position:relative;display:block;touch-action:none;cursor:grab}
.alc-root .vx-canvas:active {cursor:grabbing}
.alc-root .vx-tip {position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
padding:6px 12px;border-radius:11px;font-size:10px;font-weight:800;letter-spacing:.06em;color:#e9cb94;
background:rgba(0,0,0,.52);box-shadow:inset 0 0 0 1px rgba(255,216,150,.16);
white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none}
.alc-root .vx-tip.on {opacity:1}
.alc-root .vx-heat {position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;text-align:center}
.alc-root .vx-heat .tube {position:relative;height:186px;border-radius:13px;overflow:hidden;
background:linear-gradient(180deg, rgba(26,17,11,.92), rgba(14,9,6,.92));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.18), inset 0 2px 8px rgba(0,0,0,.5)}
.alc-root .vx-heat .fill {position:absolute;left:0;right:0;bottom:0;height:0;border-radius:0 0 13px 13px;
background:linear-gradient(180deg,#ffb37a,#e2683f);transition:height .12s linear}
.alc-root .vx-heat .zone {position:absolute;left:0;right:0;border-top:1px dashed rgba(255,225,160,.55);
border-bottom:1px dashed rgba(255,225,160,.55);
background:linear-gradient(180deg, rgba(255,214,140,.20), rgba(255,180,90,.12))}
.alc-root .vx-heat .mark {position:absolute;left:-4px;right:-4px;height:2px;background:#fff8e6;
box-shadow:0 0 8px rgba(255,220,150,.9);transition:bottom .12s linear}
.alc-root .vx-heat span {display:block;margin-top:6px;font-size:8px;font-weight:900;letter-spacing:.1em;
text-transform:uppercase;color:#8d7550}
.alc-root .vx-heat.over .fill {background:linear-gradient(180deg,#ff8f6a,#c9331a)}
.alc-root .vx-heat.over .tube {box-shadow:inset 0 0 0 1.5px rgba(255,120,80,.6), inset 0 2px 8px rgba(0,0,0,.5);
animation:alc-vx-alarm .5s ease-in-out infinite}
@keyframes alc-vx-alarm{0%,100%{opacity:1}50%{opacity:.68}}
.alc-root .vx-ess {position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.alc-root .vx-e {width:34px;text-align:center}
.alc-root .vx-e .tube {position:relative;height:40px;border-radius:9px;overflow:hidden;background:rgba(0,0,0,.45);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.14)}
.alc-root .vx-e .fill {position:absolute;left:0;right:0;bottom:0;height:0;transition:height .3s cubic-bezier(.3,1.2,.4,1)}
.alc-root .vx-e.hot .fill {background:linear-gradient(180deg,#ffb37a,#e2683f)}
.alc-root .vx-e.cold .fill {background:linear-gradient(180deg,#a9dcff,#4f93e0)}
.alc-root .vx-e.zeal .fill {background:linear-gradient(180deg,#c98bff,#8f4fe0)}
.alc-root .vx-e.calm .fill {background:linear-gradient(180deg,#b6e8a6,#5aa757)}
.alc-root .vx-e span {display:block;margin-top:3px;font-size:8px;font-weight:900;letter-spacing:.06em;
text-transform:uppercase;color:#8d7550}
.alc-root .vx-e.pulse .tube {animation:alc-vx-pulse .5s ease}
@keyframes alc-vx-pulse{0%{box-shadow:inset 0 0 0 1px rgba(255,216,150,.14)}
40%{box-shadow:inset 0 0 0 2px rgba(255,235,180,.85), 0 0 16px rgba(255,200,120,.5)}
100%{box-shadow:inset 0 0 0 1px rgba(255,216,150,.14)}}
.alc-root .vx-bot {flex:none;padding:0 14px calc(16px + env(safe-area-inset-bottom))}
.alc-root .vx-steps {display:flex;gap:6px;margin-bottom:10px}
.alc-root .vx-steps div {flex:1;padding:8px 4px;border-radius:12px;text-align:center;background:rgba(0,0,0,.34);
box-shadow:inset 0 0 0 1px rgba(255,216,150,.1);transition:box-shadow .25s ease}
.alc-root .vx-steps div span {display:block;font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#7d6746}
.alc-root .vx-steps div b {display:block;margin-top:3px;font-size:14px;font-weight:900;color:#4a3a24}
.alc-root .vx-steps div.now {box-shadow:inset 0 0 0 1.5px rgba(255,216,150,.42)}
.alc-root .vx-steps div.now span {color:#ffd98a}
.alc-root .vx-steps div.has b {color:#ffe6ae}
.alc-root .vx-steps div.good b {color:#95e08d}
.alc-root .vx-note {margin:0;text-align:center;font-size:9.5px;font-weight:700;color:#7d6746;letter-spacing:.04em}
.alc-root .vx-pop {position:absolute;z-index:5;pointer-events:none;font-family:'PT Serif',serif;font-size:15px;font-weight:700;
color:#ffe6ae;text-shadow:0 2px 8px rgba(0,0,0,.8);animation:alc-vx-fly .85s ease-out forwards}
.alc-root .vx-pop.miss {color:#e8927a}
@keyframes alc-vx-fly{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}
25%{transform:translate(-50%,-64%) scale(1.06);opacity:1}
100%{transform:translate(-50%,-116%) scale(1);opacity:0}}
.alc-root .cu-xp {margin:9px 0 2px;height:9px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;position:relative;
box-shadow:inset 0 1px 3px rgba(0,0,0,.65)}
.alc-root .cu-xp i {display:block;height:100%;border-radius:6px;width:0;
background:linear-gradient(90deg,#c98bff,#ffd98a 70%,#fff3cf);
box-shadow:0 0 12px rgba(255,200,130,.45);transition:width .7s cubic-bezier(.2,.9,.25,1)}
.alc-root .cu-xp.gain i {animation:alc-cu-shine .9s ease}
@keyframes alc-cu-shine{0%,100%{filter:none}45%{filter:brightness(1.5)}}
.alc-root .cu-meta {display:flex;justify-content:space-between;align-items:baseline;margin:0 0 9px}
.alc-root .cu-meta span {font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7d6746}
.alc-root .cu-meta b {font-family:'PT Serif',serif;font-size:13px;color:#ffe6ae}
.alc-root .cu-act {display:flex;gap:8px;align-items:stretch;margin-top:11px}
.alc-root .cu-act .btn {flex:1;height:46px;font-size:12px}
.alc-root .cu-act .btn[disabled] {opacity:.42;filter:saturate(.35);pointer-events:none}
.alc-root .cu-note {margin:9px 0 0;font-size:9.5px;font-weight:700;line-height:1.5;color:#7d6746}
.alc-root .cu-next {margin:0 0 6px;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#c69b64}
.alc-root .cu-max {margin:10px 0 0;padding:10px;border-radius:12px;text-align:center;
background:rgba(255,216,150,.07);box-shadow:inset 0 0 0 1px rgba(255,216,150,.2);
font-size:11px;font-weight:800;color:#ffe6ae}
.alc-root .cu-have {display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.alc-root .cu-have span {padding:4px 8px;border-radius:8px;font-size:9px;font-weight:800;color:#95e08d;
background:rgba(90,167,87,.13);box-shadow:inset 0 0 0 1px rgba(149,224,141,.24)}
.alc-root .cz {position:relative;margin:0 12px 13px;padding:0 0 11px;border-radius:22px;overflow:hidden;
background:linear-gradient(180deg, rgba(44,30,19,.96), rgba(18,12,8,.98));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.20), 0 16px 34px rgba(0,0,0,.5)}
.alc-root .cz:before {content:'';position:absolute;inset:0;pointer-events:none;border-radius:22px;
background:linear-gradient(180deg, rgba(255,216,150,.07), rgba(0,0,0,0) 34%)}
.alc-root .cz .al-stage {margin:0;height:182px;border-radius:22px 22px 16px 16px;
box-shadow:inset 0 -18px 32px rgba(0,0,0,.45)}
.alc-root .cz .al-slots {margin:-30px 0 0;padding-bottom:0;gap:11px;z-index:7}
.alc-root .cz .al-slot {width:58px;height:58px;border-radius:16px}
.alc-root .cz .al-slot .cap {bottom:-15px;font-size:7.6px}
.alc-root .cz-foot {display:flex;align-items:center;gap:10px;margin:26px 12px 0}
.alc-root .cz-xp {flex:1;min-width:0}
.alc-root .cz-l {display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.alc-root .cz-l span {font-size:8.6px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8d7450;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alc-root .cz-l b {font-family:'PT Serif',serif;font-size:12.5px;color:#ffe6ae;white-space:nowrap}
.alc-root .cz-xp .cu-xp {margin:0;height:8px}
.alc-root .cz-hint {display:block;margin-top:5px;font-size:8.6px;font-weight:800;font-style:normal;
letter-spacing:.06em;text-transform:uppercase;color:#7d6746}
.alc-root .cz-up {flex:none;border:0;cursor:pointer;min-width:104px;height:46px;padding:0 13px;border-radius:13px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
font-family:'Exo 2',sans-serif;color:#3c2407;
background:linear-gradient(180deg,#fff0c6 0%,#f7cf84 45%,#e0aa50 100%);
box-shadow:0 2px 0 #8a5614, inset 0 1px 0 rgba(255,255,255,.55);
transition:filter .2s ease}
.alc-root .cz-up .t {font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#3c2407}
.alc-root .cz-up .c {display:flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;
letter-spacing:.03em;color:#5d3a0d}
.alc-root .cz-up .c:before {content:'';width:11px;height:11px;flex:none;
background:url('assets/ico/gold.png') center/contain no-repeat}
.alc-root .cz-up:active {transform:translateY(2px);box-shadow:0 0 0 #8a5614}
.alc-root .cz-up.ready {animation:alc-cz-pulse 2s ease-in-out infinite}
@keyframes alc-cz-pulse{0%,100%{filter:none}50%{filter:brightness(1.07) drop-shadow(0 0 10px rgba(255,190,110,.5))}}
.alc-root .cz-up[disabled] {cursor:default;filter:grayscale(.5) brightness(.62);animation:none}
.alc-root .cz-up[disabled]:active {transform:none;box-shadow:0 2px 0 #8a5614, inset 0 1px 0 rgba(255,255,255,.55)}
.alc-root .cz-up.wait:not(.poor) .c:before {display:none}
.alc-root .cz-up[disabled] {cursor:not-allowed;
background:linear-gradient(180deg, rgba(126,104,74,.5), rgba(74,58,38,.6));
box-shadow:0 2px 0 rgba(58,40,20,.7), inset 0 1px 0 rgba(255,255,255,.1);
animation:none}
.alc-root .cz-up[disabled] .t {color:#a08a63}
.alc-root .cz-up[disabled] .c {color:#8d7450;font-size:9px}
.alc-root .cz-up.poor .c {color:#7a3d18}
.alc-root .cz-up.shake {animation:alc-cz-shake .42s ease}
@keyframes alc-cz-shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}
60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.alc-root .cz-hint.warn {color:#ff9e6e}
.alc-root .cz-more {display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% - 24px);
margin:11px 12px 0;padding:9px 11px;border:0;border-radius:12px;cursor:pointer;
background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,216,150,.12);
font-size:8.8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#c69b64}
.alc-root .cz-more .chev {width:8px;height:8px;border-right:1.6px solid #c69b64;border-bottom:1.6px solid #c69b64;
transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
.alc-root .cz-more.on {color:#ffe6ae}
.alc-root .cz-more.on .chev {border-color:#ffe6ae;transform:rotate(-135deg) translateY(-2px)}
.alc-root .cz-drop {margin:0 12px;max-height:0;overflow:hidden;opacity:0;
transition:max-height .32s cubic-bezier(.2,.9,.25,1), opacity .24s ease, margin-top .32s ease}
.alc-root .cz-drop.on {max-height:320px;opacity:1;margin-top:9px}
.alc-root .cz-drop ul {margin:0;padding:0;list-style:none}
.alc-root .cz-drop li {position:relative;padding:7px 9px 7px 24px;margin-bottom:5px;border-radius:10px;
font-size:11px;font-weight:700;line-height:1.4;color:#e9cb94;
background:rgba(0,0,0,.26);box-shadow:inset 0 0 0 1px rgba(255,216,150,.1)}
.alc-root .cz-drop li:before {content:'';position:absolute;left:9px;top:12px;width:7px;height:7px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #fff6dd, #e8a544);box-shadow:0 0 7px rgba(255,190,110,.65)}
.alc-root .cz-note {margin:8px 0 0;font-size:9.4px;font-weight:700;line-height:1.5;color:#7d6746}
.alc-root .rxp {margin:12px 0 2px;padding:11px 12px 9px;border-radius:13px;text-align:left;
background:rgba(0,0,0,.32);box-shadow:inset 0 0 0 1px rgba(255,216,150,.13)}
.alc-root .rxp-hd {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.alc-root .rxp-hd span {font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8d7450}
.alc-root .rxp-hd b {font-family:'PT Serif',serif;font-size:14px;color:#ffd98a}
.alc-root .rxp-bar {height:7px;border-radius:5px;background:rgba(0,0,0,.55);overflow:hidden}
.alc-root .rxp-bar i {display:block;height:100%;width:0;border-radius:5px;
background:linear-gradient(90deg,#c98bff,#ffd98a 72%,#fff3cf);
box-shadow:0 0 10px rgba(255,200,130,.5);transition:width 1s cubic-bezier(.2,.9,.25,1)}
.alc-root .rxp p {margin:7px 0 0;font-size:9.5px;font-weight:700;color:#8d7450}
.alc-root .rxp .rdy {color:#95e08d}
.alc-root .cu-modal {position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:22px;
background:rgba(6,4,3,.82);backdrop-filter:blur(3px)}
.alc-root .cu-modal.on {display:grid;animation:alc-vx-in .25s ease}
.alc-root .cu-modal .card {position:relative;width:100%;max-width:330px;padding:24px 20px 20px;border-radius:22px;text-align:center;
background:linear-gradient(180deg, rgba(58,40,24,.98), rgba(28,18,12,.99));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.28), 0 26px 60px rgba(0,0,0,.7);
animation:alc-cu-pop .45s cubic-bezier(.2,1.3,.35,1)}
@keyframes alc-cu-pop{from{transform:scale(.82) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.alc-root .cu-modal .halo {position:absolute;left:50%;top:26px;width:230px;height:230px;transform:translateX(-50%);
pointer-events:none;border-radius:50%;
background:radial-gradient(circle, rgba(255,214,140,.30), rgba(201,139,255,.12) 45%, rgba(0,0,0,0) 70%);
animation:alc-cu-halo 2.6s ease-in-out infinite}
@keyframes alc-cu-halo{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}50%{transform:translateX(-50%) scale(1.12);opacity:1}}
.alc-root .cu-modal .crest {position:relative;width:96px;height:96px;margin:0 auto 12px;border-radius:24px;display:grid;place-items:center;
background:linear-gradient(180deg, rgba(255,214,140,.2), rgba(120,70,30,.28));
box-shadow:inset 0 0 0 1px rgba(255,216,150,.35), 0 12px 26px rgba(0,0,0,.5)}
.alc-root .cu-modal .crest img {width:56px;height:56px;image-rendering:auto;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));animation:alc-cu-rise 2.2s ease-in-out infinite}
@keyframes alc-cu-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.alc-root .cu-modal .kick {display:inline-block;padding:4px 10px;border-radius:9px;margin-bottom:8px;
font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ffe6ae;
background:rgba(255,216,150,.12);box-shadow:inset 0 0 0 1px rgba(255,216,150,.28)}
.alc-root .cu-modal h3 {margin:0 0 4px;font-family:'PT Serif',serif;font-size:24px;color:#ffe6ae}
.alc-root .cu-modal .sub {margin:0 0 14px;font-size:11.5px;font-weight:600;color:#b5a17e}
.alc-root .cu-modal ul {margin:0 0 16px;padding:0;list-style:none;text-align:left}
.alc-root .cu-modal li {position:relative;padding:8px 10px 8px 30px;margin-bottom:6px;border-radius:11px;
font-size:11.5px;font-weight:700;line-height:1.4;color:#e9cb94;
background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,216,150,.12)}
.alc-root .cu-modal li:before {content:'';position:absolute;left:11px;top:13px;width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #fff6dd, #e8a544);box-shadow:0 0 8px rgba(255,190,110,.7)}
.alc-root .cu-modal .btn {width:100%;height:48px}
/* =============================================================================
Фаза 128.2: тонировка построек по времени суток и модалка выбора времени.
Дописано в конец файла — правки style.css только append-only.
============================================================================= */
/* Прежние фильтры на .city-building-img ночь почти не синили: hue-rotate уводил
коричневое дерево в ещё более тёплую сторону, а saturate/brightness лишь притемняли.
На карте выходил холодный фон с тёплыми домами — ровно то, что было видно на скриншоте.
Теперь работают два слоя: сам спрайт гасится по яркости и насыщенности, а поверх него
по маске этого же спрайта ложится цвет фазы в режиме multiply. Маска берётся из
--cb-sprite, которую JS проставляет инлайном вместе с координатами. */
.city-map-world[data-tod="morning"] .city-building-img,
.city-map-world[data-tod="sunset"] .city-building-img,
.city-map-world[data-tod="night"] .city-building-img { filter: none; }
.city-building-tint {
position: absolute; inset: 0; pointer-events: none;
background: var(--cb-tint, transparent);
opacity: var(--cb-tint-alpha, 0);
/* Режим color, а не multiply: multiply просто затемняет и оставляет дерево коричневым
(проверено на стенде — постройки выходили бурыми на синей карте). color подменяет
тон и насыщенность, сохраняя светлоту, поэтому объём и детали спрайта не пропадают. */
mix-blend-mode: color;
transition: opacity 600ms ease, background-color 600ms ease;
-webkit-mask-image: var(--cb-sprite); mask-image: var(--cb-sprite);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.city-building-hit { position: relative; }
/* День — родной вид спрайта, без тона. Остальные фазы: яркость и насыщенность на самом
спрайте + цвет фазы поверх. Значения подобраны по кадрам карты, ночь сверена с
референсом v_tod_built (постройки уходят в синий, но детали ещё читаются). */
.city-map-world[data-tod="morning"] .city-building-img { filter: brightness(0.95) saturate(0.90); }
.city-map-world[data-tod="morning"] .city-building-tint { --cb-tint: #96a8d6; --cb-tint-alpha: 0.26; }
.city-map-world[data-tod="sunset"] .city-building-img { filter: brightness(0.93) saturate(1.05); }
.city-map-world[data-tod="sunset"] .city-building-tint { --cb-tint: #e29656; --cb-tint-alpha: 0.42; }
.city-map-world[data-tod="night"] .city-building-img { filter: brightness(0.60) saturate(0.95); }
.city-map-world[data-tod="night"] .city-building-tint { --cb-tint: #4f74c8; --cb-tint-alpha: 0.55; }
/* Плашка часов стала кнопкой: сохраняем прежний вид, добавляем отклик на нажатие. */
.city-clock { border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; font: inherit; }
.city-clock:active { transform: translateX(-50%) scale(0.96); }
.city-clock.is-forced .city-clock-phase { color: #ffd98a; }
.city-clock.is-forced::after {
content: ''; position: absolute; top: 5px; right: 7px; width: 5px; height: 5px;
border-radius: 50%; background: #ffd98a; box-shadow: 0 0 6px rgba(255, 217, 138, .8);
}
/* Список фаз в модалке — те же плитки, что у выбора в мини-меню зданий. */
.city-tod-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.city-tod-item {
display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
border-radius: 14px; cursor: pointer; text-align: left;
border: 1px solid rgba(120, 94, 58, .55);
background: linear-gradient(180deg, rgba(58, 44, 29, .92), rgba(38, 28, 18, .94));
box-shadow: inset 0 1px 0 rgba(255, 226, 168, .10), 0 2px 6px rgba(0, 0, 0, .35);
transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.city-tod-item:active { transform: scale(0.985); }
.city-tod-item.is-active {
border-color: rgba(233, 188, 106, .95);
box-shadow: inset 0 1px 0 rgba(255, 234, 186, .18), 0 0 0 1px rgba(233, 188, 106, .35), 0 3px 10px rgba(0, 0, 0, .40);
}
.city-tod-ico {
flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px;
border-radius: 11px; border: 1px solid rgba(120, 94, 58, .6);
background: radial-gradient(120% 120% at 30% 20%, rgba(96, 74, 46, .95), rgba(44, 32, 20, .95));
}
.city-tod-text { flex: 1 1 auto; min-width: 0; display: block; }
.city-tod-text b { display: block; font-family: 'PT Serif', serif; font-size: 15px; color: #ffe6ae; line-height: 1.15; }
.city-tod-text i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: #a28a62; }
.city-tod-mark {
flex: none; width: 18px; height: 18px; border-radius: 50%;
border: 1px solid rgba(120, 94, 58, .8); background: rgba(24, 17, 11, .8);
}
.city-tod-item.is-active .city-tod-mark {
border-color: rgba(233, 188, 106, .95);
background: radial-gradient(circle at 50% 40%, #ffe9b8, #c79a48 62%, #8a6526 100%);
box-shadow: 0 0 8px rgba(233, 188, 106, .55);
}
/* Разрушенные и выбранные постройки имеют собственные filter (выцветание и золотое свечение),
а специфичность у них такая же, как у фазовых правил выше — то есть фазовый фильтр их
затирал. Дописываем комбинации явно, чтобы состояние и время суток складывались. */
.city-map-world[data-tod="morning"] .city-building.is-ruined .city-building-img { filter: brightness(0.87) saturate(0.63); }
.city-map-world[data-tod="sunset"] .city-building.is-ruined .city-building-img { filter: brightness(0.86) saturate(0.74); }
.city-map-world[data-tod="night"] .city-building.is-ruined .city-building-img { filter: brightness(0.55) saturate(0.66); }
.city-map-world[data-tod="morning"] .city-building.is-active .city-building-img,
.city-map-world[data-tod="morning"] .city-building-hit:hover .city-building-img {
filter: brightness(0.95) saturate(0.90) drop-shadow(0 0 10px rgba(255, 214, 138, 0.55));
}
.city-map-world[data-tod="sunset"] .city-building.is-active .city-building-img,
.city-map-world[data-tod="sunset"] .city-building-hit:hover .city-building-img {
filter: brightness(0.93) saturate(1.05) drop-shadow(0 0 10px rgba(255, 214, 138, 0.55));
}
.city-map-world[data-tod="night"] .city-building.is-active .city-building-img,
.city-map-world[data-tod="night"] .city-building-hit:hover .city-building-img {
filter: brightness(0.60) saturate(0.95) drop-shadow(0 0 12px rgba(255, 214, 138, 0.62));
}
/* Выбранное здание не должно тонуть в ночном тоне — приглушаем накладку. */
.city-map-world[data-tod="night"] .city-building.is-active .city-building-tint { --cb-tint-alpha: 0.38; }
/* Правка: первая версия плиток выбора времени была сделана в тёмной гамме, а модалки города
с фазы UI-кита стоят на светлом пергаменте (border-image modal.png, текст #3f2708).
Тёмные плитки на нём выглядели вставкой из другого макета. Переопределяем под пергамент —
как строки .city-req и .city-detail-list, только кликабельные. */
.city-tod-list { gap: 6px; margin-top: 8px; }
.city-tod-item {
padding: 8px 10px;
border: 1px solid rgba(150, 110, 55, 0.42);
border-radius: 12px;
color: #3f2708;
background: linear-gradient(180deg, rgba(255, 246, 224, 0.55), rgba(238, 219, 180, 0.38));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.city-tod-item.is-active {
border-color: rgba(176, 128, 48, 0.95);
background: linear-gradient(180deg, rgba(255, 238, 197, 0.95), rgba(240, 212, 156, 0.8));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(176, 128, 48, 0.35);
}
.city-tod-ico {
width: 34px; height: 34px; font-size: 18px; border-radius: 9px;
border: 1px solid rgba(150, 110, 55, 0.45);
background: linear-gradient(180deg, rgba(255, 250, 235, 0.85), rgba(233, 211, 170, 0.6));
}
.city-tod-text b { font-size: 14.5px; color: #3f2708; text-shadow: 0 1px 0 rgba(255, 250, 232, 0.6); }
.city-tod-text i { color: #8a6a33; font-size: 11px; }
.city-tod-mark {
width: 16px; height: 16px;
border: 1px solid rgba(150, 110, 55, 0.7);
background: rgba(255, 250, 236, 0.75);
}
.city-tod-item.is-active .city-tod-mark {
border-color: rgba(176, 128, 48, 0.95);
background: radial-gradient(circle at 50% 38%, #fff3d2, #d8a94f 60%, #9a7028 100%);
box-shadow: 0 0 6px rgba(176, 128, 48, 0.5);
}
/* =====================================================================================
Фаза 128.3: круглый выбор времени суток.
Кольцо и янтарный бегунок — арт (assets/img/ui/clock), код только возит камень по
дорожке и поворачивает его по касательной. Заголовок и крестик берутся от общей
модалки города (.city-modal-card / .city-modal-head / .city-modal-close).
===================================================================================== */
.city-tod-card { text-align: center; }
.city-dial {
position: relative; width: min(236px, 62vw); margin: 10px auto 2px;
aspect-ratio: 1 / 1; touch-action: none; user-select: none; cursor: grab;
container-type: inline-size;
}
.city-dial.is-dragging { cursor: grabbing; }
.city-dial-ring {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; -webkit-user-drag: none;
}
/* Камень «лежит» на дорожке: к сдвигу в центр добавлен поворот по углу времени. */
.city-dial-knob {
position: absolute; z-index: 3; width: 25%; height: auto;
transform: translate(-50%, -50%) rotate(var(--dial-angle, 0deg));
transform-origin: 50% 50%;
pointer-events: none; -webkit-user-drag: none;
filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
transition: filter 0.15s ease;
}
.city-dial.is-dragging .city-dial-knob {
filter: drop-shadow(0 0 17px rgba(255, 190, 80, 0.95)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.city-dial-num {
position: absolute; z-index: 2; pointer-events: none;
transform: translate(-50%, -50%);
font-family: 'PT Serif', Georgia, serif; font-size: 9.2cqw; font-weight: 700; line-height: 1;
color: #ffefc4;
text-shadow: 0 0 4px rgba(40, 22, 4, 0.95), 0 2px 3px rgba(40, 22, 4, 0.95), 0 0 10px rgba(255, 208, 120, 0.4);
}
.city-dial-num.is-n0 { left: 50%; top: 9.6%; }
.city-dial-num.is-n6 { left: 90.4%; top: 50%; }
.city-dial-num.is-n12 { left: 50%; top: 90.4%; }
.city-dial-num.is-n18 { left: 9.6%; top: 50%; }
.city-dial-center {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: grid; justify-items: center; gap: 1px; width: 62%; pointer-events: none;
}
.city-dial-time {
font-family: 'PT Serif', Georgia, serif; font-size: clamp(26px, 8.4vw, 34px);
font-weight: 700; line-height: 1;
background: linear-gradient(180deg, #fff3cd, #e6bb66 55%, #bb8b3c);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 1px rgba(90, 60, 18, 0.35));
}
.city-dial-phase {
font-style: normal; font-family: 'PT Serif', Georgia, serif;
font-size: 13px; font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em;
text-transform: uppercase; color: #a67c35;
text-shadow: 0 1px 0 rgba(255, 251, 238, 0.6);
}
.city-dial-rule {
width: 82%; height: 9px; margin-top: 5px; opacity: 0.85;
background:
linear-gradient(90deg, transparent, #c79a48 18%, #c79a48 82%, transparent) center / 100% 1px no-repeat,
radial-gradient(circle at 50% 50%, #c79a48 3px, transparent 3.4px) center / 100% 100% no-repeat;
}
.city-tod-sub {
margin: 8px 2px; font-family: 'PT Serif', Georgia, serif;
font-size: 14px; line-height: 1.3; color: #5c421d;
}
.city-tod-sub span { font-size: 13px; color: #7d5f2e; }
.city-tod-row { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-bottom: 10px; }
.city-tod-sep {
flex: 0 0 auto; width: 9px; height: 9px; margin-top: 22px; opacity: 0.75;
background: radial-gradient(circle at 50% 50%, #c79a48 2.6px, transparent 3px) center / 100% 100% no-repeat;
}
.city-tod-chip {
display: grid; justify-items: center; gap: 5px; flex: 1 1 0; min-width: 0;
padding: 0; border: 0; background: none; cursor: pointer;
font-family: 'PT Serif', Georgia, serif; font-size: 11.5px; font-weight: 700; color: #6b4f22;
}
.city-tod-chip img {
display: block; width: 100%; max-width: 52px; height: auto;
filter: saturate(0.7) brightness(0.93);
transition: transform 0.14s ease, filter 0.14s ease;
}
.city-tod-chip:active img { transform: scale(0.94); }
.city-tod-chip.is-active img { filter: none; transform: scale(1.07); }
.city-tod-chip.is-active { color: #3f2708; }
.city-tod-auto {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
padding: 8px 15px; border-radius: 999px;
font-size: 12px; font-weight: 800; color: #5a4118;
border: 1px solid rgba(150, 110, 55, 0.55);
background: linear-gradient(180deg, rgba(255, 246, 224, 0.85), rgba(233, 211, 168, 0.7));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.city-tod-dot { width: 8px; height: 8px; border-radius: 50%; background: #bfa367; }
.city-tod-auto.is-on { color: #2f6a35; border-color: rgba(84, 138, 74, 0.65); }
.city-tod-auto.is-on .city-tod-dot { background: #4f9a46; box-shadow: 0 0 8px rgba(79, 154, 70, 0.75); }
@media (max-width: 380px) {
.city-dial { width: min(216px, 60vw); }
.city-tod-chip img { max-width: 46px; }
.city-tod-chip { font-size: 11px; }
}
/* Шапка и крестик — как у остальных модалок города (слева, inline-блок), центруем
только содержимое часов. */
.city-tod-card { text-align: left; }
.city-tod-card .city-dial { margin-left: auto; margin-right: auto; }
.city-tod-sub { text-align: center; }
.city-tod-auto { display: flex; margin: 0 auto; }
/* Доводка после прогона в браузере: цифры уводим на дорожку (снаружи они налезали
на золотой обод), кнопка авто-режима — по содержимому, а не во всю карточку. */
.city-dial-num.is-n0 { top: 13.2%; }
.city-dial-num.is-n12 { top: 86.8%; }
.city-dial-num.is-n6 { left: 86.8%; }
.city-dial-num.is-n18 { left: 13.2%; }
.city-dial-num { font-size: 8.2cqw; }
.city-tod-auto { width: fit-content; max-width: 100%; white-space: nowrap; }
/* Доводка часов по замечаниям: шапка как в «Лапе Фортуны» (без плашки-подложки),
подпись — серифом с золотыми усиками, как в эмалевом концепте, и нижний отступ,
чтобы кнопка авто-режима не выходила за золотую раму. */
.city-tod-card { padding-bottom: 52px; }
.city-tod-card .city-modal-head {
display: block; width: auto; max-width: calc(100% - 52px);
margin: 6px 0 4px; padding: 0;
background: none; box-shadow: none; border-radius: 0;
}
.city-tod-card .city-modal-head h3 { font-size: 21px; }
.city-tod-card .city-modal-head span {
display: block; margin-top: 2px;
font-size: 10px; font-weight: 900; letter-spacing: 0.14em; color: #7a5524;
text-shadow: 0 1px 0 rgba(255, 250, 232, 0.6);
}
/* Усики с ромбом над подписью — тот же приём, что у .tsr-div в рулетке. */
.city-tod-div { display: flex; align-items: center; gap: 9px; margin: 12px 4px 7px; }
.city-tod-div s {
flex: 1 1 auto; height: 1px; text-decoration: none;
background: linear-gradient(90deg, rgba(120, 82, 34, 0), rgba(150, 108, 48, 0.62), rgba(120, 82, 34, 0));
}
.city-tod-div i {
flex: 0 0 auto; width: 6px; height: 6px; transform: rotate(45deg);
background: linear-gradient(180deg, #e3bd77, #8a6027);
box-shadow: 0 1px 0 rgba(255, 250, 232, 0.55);
}
.city-tod-sub {
margin: 0 2px 10px; text-align: center;
font-family: 'PT Serif', Georgia, serif; font-size: 16px; font-weight: 700;
line-height: 1.25; color: #4a3212; text-shadow: 0 1px 0 rgba(255, 250, 232, 0.65);
}
.city-tod-sub span {
display: block; margin-top: 1px;
font-size: 14px; font-weight: 400; font-style: normal; color: #7a5524;
}
/* Заголовок без плашки садился на деревянный верх рамы — опускаем содержимое ниже,
как в «Лапе Фортуны». */
.city-tod-card { padding-top: 34px; }
.city-tod-card .city-modal-head { margin-top: 0; }
/* Плашка часов была индикатором и не принимала клики (pointer-events: none из блока
.city-clock выше). Теперь это кнопка открытия выбора времени суток — клики
возвращаем, содержимое оставляем прозрачным для попаданий. */
.city-clock { pointer-events: auto; }
.city-clock > * { pointer-events: none; }
/* =====================================================================================
Фаза 128.5: правки по замечаниям на живой сборке.
===================================================================================== */
/* Плитки выбора времени — квадратные картинки с круглым медальоном внутри, поэтому
притемнение ложилось на весь квадрат. Обрезаем по кругу: гаснет сам медальон. */
.city-tod-chip img {
border-radius: 50%;
clip-path: circle(49% at 50% 50%);
box-shadow: 0 2px 6px rgba(40, 24, 4, 0.28);
}
.city-tod-chip img { filter: saturate(0.55) brightness(0.82); }
.city-tod-chip.is-active img {
filter: saturate(1.08) brightness(1.06);
transform: scale(1.1);
box-shadow: 0 0 0 2px rgba(226, 176, 104, 0.9), 0 3px 10px rgba(40, 24, 4, 0.38);
}
/* Подписи локаций: ближе к зданию и без «таблетки» — притемнение, плавно исчезающее
к левому и правому краю, без скруглений. */
.city-building-label {
transform: translate(-50%, -2px);
padding: 1px 12px 2px;
border-radius: 0;
box-shadow: none;
background: linear-gradient(90deg,
rgba(12, 8, 3, 0) 0%, rgba(12, 8, 3, 0.55) 24%,
rgba(12, 8, 3, 0.55) 76%, rgba(12, 8, 3, 0) 100%);
}
/* «Собрать всё» — компактная золотая плашка вместо широкой зелёной кнопки со стрелкой. */
.city-hud-collect {
padding: 5px 13px 6px;
border-radius: 10px 4px 10px 4px;
font: 800 11.5px/1 var(--font-ui, inherit);
letter-spacing: 0.04em;
text-transform: uppercase;
color: #3a2408;
background: linear-gradient(180deg, #ffe7b0 0%, #f0bd55 46%, #cf8f26 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1.5px rgba(122, 78, 20, 0.9),
0 3px 0 #6d4512, 0 6px 14px rgba(0, 0, 0, 0.38);
text-shadow: 0 1px 0 rgba(255, 246, 219, 0.6);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.city-hud-collect:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1.5px rgba(122, 78, 20, 0.9),
0 1px 0 #6d4512, 0 3px 8px rgba(0, 0, 0, 0.35);
}
/* Плашка часов осталась без иконки — сужаем отступы под «12:45 ЗАКАТ».
backdrop-filter убран: размытие под плашкой заметно грузило прокрутку карты. */
.city-clock { gap: 6px; padding: 4px 12px 5px; backdrop-filter: none; }
/* Тон построек днём не нужен, а 17 слоёв с mix-blend-mode всё равно участвовали в
композитинге и подъедали кадры — на дневной фазе слой просто выключаем. */
.city-map-world[data-tod="day"] .city-building-tint { display: none; }
/* Фаза 128.6: на невысоких экранах карточка часов упиралась в лимит max-height: 75dvh,
и нижние кнопки вылезали за золотую раму. Размер циферблата теперь ограничен и по
высоте окна, а на низких экранах вся вертикальная «вода» поджимается. */
.city-dial { width: min(236px, 62vw, 40dvh); }
@media (max-height: 720px) {
.city-tod-card { padding-top: 26px; padding-bottom: 40px; }
.city-tod-card .city-modal-head h3 { font-size: 19px; }
.city-dial { width: min(200px, 54vw, 34dvh); margin-top: 6px; }
.city-dial-time { font-size: clamp(22px, 7vw, 28px); }
.city-dial-phase { font-size: 11px; }
.city-tod-div { margin: 8px 4px 4px; }
.city-tod-sub { margin-bottom: 7px; font-size: 15px; }
.city-tod-sub span { font-size: 13px; }
.city-tod-row { margin-bottom: 7px; }
.city-tod-chip img { max-width: 44px; }
.city-tod-auto { padding: 7px 13px; }
}
@media (max-height: 620px) {
.city-tod-card { padding-top: 22px; padding-bottom: 34px; }
.city-dial { width: min(172px, 46vw, 30dvh); }
.city-tod-sub { font-size: 14px; }
.city-tod-sub span { font-size: 12px; }
.city-tod-chip img { max-width: 38px; }
.city-tod-chip { font-size: 10.5px; }
}
/* ==========================================================================================
Фаза 129: Мастерская «Кольцо Мастера» — стили перенесены из прототипа proto_ws7 как есть
и скоуплены по `.mring-root`; id прототипа стали классами `.mr-*`, имена keyframes — `mr-*`.
Блок append-only: ни одно правило выше не переопределяется.
========================================================================================== */
.mring-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mring-root .hud{position:sticky;top:0;z-index:30;display:flex;gap:6px;align-items:center;padding:7px 8px;margin:0 -4px 10px;
border-image:url("../img/ui/r_wood.png") 34 fill / 13px stretch;
box-shadow:0 8px 22px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(214,160,74,.6)}
.mring-root .hud-cell{display:flex;align-items:center;gap:5px;flex:1 1 0;min-width:0;padding:4px 7px;border-radius:11px;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.6));
box-shadow:inset 0 0 0 1px rgba(214,160,74,.4)}
.mring-root .hud-cell img{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.mring-root .hud-cell b{font-size:13px;font-weight:900;color:var(--gold-2);text-shadow:0 1px 2px rgba(0,0,0,.8);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .loc-head{display:flex;align-items:center;gap:10px;margin:4px 2px 12px}
.mring-root .loc-head .sigil{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;
background:radial-gradient(circle at 50% 35%, rgba(255,200,110,.35), rgba(0,0,0,.6));
box-shadow:inset 0 0 0 1.5px var(--frame), 0 6px 14px rgba(0,0,0,.5)}
.mring-root .loc-head .sigil img{width:28px;height:28px;object-fit:contain}
.mring-root .loc-head h1{margin:0;font-family:'PT Serif',Georgia,serif;font-size:21px;line-height:1.1;color:#fff3d8;
text-shadow:0 2px 6px rgba(0,0,0,.8)}
.mring-root .loc-head span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#c99a4e}
.mring-root .tabs{display:flex;gap:6px;margin:0 0 14px}
.mring-root .tab{flex:1 1 0;padding:9px 4px 8px;border:0;cursor:pointer;color:#d8c0a0;border-radius:12px;
font-family:'Exo 2',sans-serif;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
background:linear-gradient(180deg, rgba(48,30,14,.9), rgba(26,16,8,.95));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.35)}
.mring-root .tab.is-on{color:#3a2204;background:linear-gradient(180deg,#ffe9b6,#d9a13a);
box-shadow:0 4px 14px rgba(255,180,70,.3), inset 0 1px 0 rgba(255,255,255,.55)}
.mring-root .screen{display:none}
.mring-root .screen.is-on{display:block;animation:mr-fadeUp .26s ease-out}
@keyframes mr-fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.mring-root .panel{position:relative;padding:14px 13px 15px;margin-bottom:13px;
border-image:url("../img/ui/r_wood.png") 34 fill / 14px stretch;
box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(214,160,74,.55)}
.mring-root .panel-t{display:flex;align-items:center;gap:7px;margin:0 0 10px;
font-family:'PT Serif',Georgia,serif;font-size:15px;color:#ffeaba}
.mring-root .panel-t small{margin-left:auto;font-family:'Exo 2',sans-serif;font-size:10px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;color:#bb8d47}
.mring-root .hr{height:1px;margin:11px 0;background:linear-gradient(90deg,transparent,rgba(214,160,74,.5),transparent)}
.mring-root .tagline{margin:0 0 11px;font-size:11.5px;line-height:1.5;color:#bda486}
.mring-root .tagline b{color:#ffdc8a}
.mring-root .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 16px;height:44px;
border:0;cursor:pointer;border-radius:13px;font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:900;
color:#3a2204;background:linear-gradient(180deg,#ffe9b6 0%,#f0bf62 48%,#d09333 100%);
box-shadow:0 5px 0 #7d4e12, 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
transition:transform .1s, box-shadow .1s}
.mring-root .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #7d4e12, 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6)}
.mring-root .btn.wide{width:100%}
.mring-root .btn.ghost{color:#ffdda0;background:linear-gradient(180deg, rgba(58,36,16,.95), rgba(30,18,8,.98));
box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 0 0 1.4px rgba(214,160,74,.6)}
.mring-root .btn.danger{color:#ffe6dc;background:linear-gradient(180deg,#d97148,#a1391f);
box-shadow:0 5px 0 #5c1c0c, 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35)}
.mring-root .btn:disabled{opacity:.5;filter:grayscale(.5);cursor:default;transform:none}
.mring-root .btn img{width:18px;height:18px;object-fit:contain}
.mring-root .btn.mini{padding:0 12px;height:34px;font-size:12px;border-radius:11px;box-shadow:0 3px 0 #7d4e12, inset 0 1px 0 rgba(255,255,255,.5)}
.mring-root .btn-note{display:block;margin-top:5px;text-align:center;font-size:10.5px;font-weight:700;color:#b79a75}
.mring-root .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mring-root .stat{padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(214,160,74,.32)}
.mring-root .stat i{display:block;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.1em;color:#a98a5e;text-transform:uppercase}
.mring-root .stat b{font-size:14px;font-weight:900;color:#fff1cd}
.mring-root .stat b em{font-style:normal;font-size:11px;color:var(--ok)}
.mring-root .pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:8px;font-size:11px;font-weight:900;
color:#ffeaba;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(214,160,74,.4)}
.mring-root .pill img{width:13px;height:13px;object-fit:contain}
.mring-root .cost{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9px;font-size:12px;font-weight:900;
color:#ffeaba;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(214,160,74,.45)}
.mring-root .cost img{width:15px;height:15px;object-fit:contain}
.mring-root .cost.is-lack{color:#ffb3a0;box-shadow:inset 0 0 0 1px rgba(255,120,90,.6)}
.mring-root .mr-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:60;opacity:0;pointer-events:none;
display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;font-size:12.5px;font-weight:800;color:#fff3d8;
background:linear-gradient(180deg, rgba(48,30,14,.98), rgba(24,14,6,.99));
box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 0 0 1.3px rgba(214,160,74,.7);
transition:opacity .2s, transform .2s}
.mring-root .mr-toast.show{opacity:1;transform:translate(-50%,0)}
.mring-root .mr-toast img{width:18px;height:18px;object-fit:contain}
.mring-root .ov{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:16px;
background:rgba(6,3,1,.72);backdrop-filter:blur(3px)}
.mring-root .ov.is-on{display:grid}
.mring-root .modal{position:relative;width:min(360px,100%);padding:30px 26px 24px;
border-image:url("../img/ui/modal.png") 168 fill / 44px stretch;
animation:mr-mIn .26s cubic-bezier(.2,1.3,.3,1)}
.mring-root .modal::before{content:"";position:absolute;inset:16px;border-radius:15px;
background:linear-gradient(180deg, rgba(30,18,8,.95), rgba(13,8,3,.98));
box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.6)}
.mring-root .modal > *{position:relative;z-index:1}
.mring-root .modal > h3{margin:14px 0 4px;text-align:center;font-family:'PT Serif',Georgia,serif;font-size:19px;color:#fff3d8}
.mring-root .modal .sub{margin:0 0 14px;text-align:center;font-size:11.5px;color:#b59a78}
.mring-root .modal .btn.wide{margin-bottom:10px}
@keyframes mr-mIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.mring-root .mclose{position:absolute;right:-1px;top:-1px;width:42px;height:42px;border:0;cursor:pointer;z-index:2;
background:url("../img/ui/close.png") center/contain no-repeat}
.mring-root .reveal{display:grid;place-items:center;gap:8px;margin:6px 0 14px}
.mring-root .reveal .glow{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle,rgba(255,190,80,.35),transparent 68%)}
.mring-root .reveal .glow img{width:92px;height:92px;object-fit:contain;animation:mr-bob 2.6s ease-in-out infinite}
@keyframes mr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mring-root .reveal b{font-family:'PT Serif',Georgia,serif;font-size:17px;color:#ffe9b6}
.mring-root .reveal span{font-size:11.5px;color:#bda486;text-align:center}
.mring-root .rays{position:absolute;inset:-30%;pointer-events:none;border-radius:50%;
background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,196,92,.14) 0deg 4deg, rgba(255,196,92,0) 4deg 15deg);
animation:mr-spin 26s linear infinite}
@keyframes mr-spin{to{transform:rotate(360deg)}}
.mring-root .pill{white-space:nowrap}
.mring-root .lright{max-width:104px}
.mring-root .tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.mring-root .tabs::-webkit-scrollbar{display:none}
.mring-root .tabs .tab{flex:0 0 auto;padding:9px 13px 8px;white-space:nowrap}
.mring-root .sky{position:relative;height:356px;margin:0 -4px 11px;border-radius:16px;overflow:hidden;
background:radial-gradient(70% 58% at 50% 48%, rgba(255,170,60,.17), rgba(8,5,2,.93) 72%);
box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.36)}
.mring-root .sky .dust{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;opacity:.45;
background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,196,92,.10) 0deg 3deg, rgba(255,196,92,0) 3deg 17deg);
animation:mr-spin 46s linear infinite}
.mring-root .sky .ringline{position:absolute;left:50%;top:50%;width:250px;height:250px;border-radius:50%;
transform:translate(-50%,-50%);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(214,160,74,.16)}
.mring-root .heroCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:126px;border-radius:13px;
overflow:hidden;box-shadow:0 0 0 1.8px rgba(255,214,130,.9), 0 0 32px rgba(255,170,60,.26), 0 10px 22px rgba(0,0,0,.65)}
.mring-root .heroCard img{width:100%;height:100%;object-fit:cover;display:block}
.mring-root .heroCard .lv{position:absolute;left:0;right:0;bottom:0;padding:13px 3px 4px;text-align:center;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.92))}
.mring-root .heroCard .lv b{display:block;font-size:15px;font-weight:900;color:#ffe9b6;line-height:1.1}
.mring-root .heroCard .lv i{display:block;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.09em;
text-transform:uppercase;color:#c99a4e}
.mring-root .star{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:grid;place-items:center;
font-size:10px;font-weight:900;color:#6e5b3c;
background:radial-gradient(circle at 50% 40%, rgba(60,40,18,.95), rgba(16,10,4,.98));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.32);transition:box-shadow .25s, color .25s, background .25s}
.mring-root .star.is-lit{color:#3a2204;background:radial-gradient(circle at 50% 35%,#fff6d8,#f0bf62 62%,#cf9028);
box-shadow:0 0 15px rgba(255,190,90,.75), inset 0 1px 0 rgba(255,255,255,.7)}
.mring-root .star.is-next{color:#ffdc8a;animation:mr-pulseStar 1.5s ease-in-out infinite}
@keyframes mr-pulseStar{0%,100%{box-shadow:inset 0 0 0 1.6px rgba(255,214,130,.85), 0 0 9px rgba(255,180,70,.22)}
50%{box-shadow:inset 0 0 0 1.6px rgba(255,236,190,1), 0 0 21px rgba(255,190,80,.6)}}
.mring-root .star.flash{animation:mr-starFlash .6s ease-out}
@keyframes mr-starFlash{0%{transform:scale(.55)}45%{transform:scale(1.55)}100%{transform:scale(1)}}
.mring-root .star.crack{animation:mr-starCrack .5s ease-out}
@keyframes mr-starCrack{0%,100%{transform:translate(0,0)}22%{transform:translate(-3px,1px)}58%{transform:translate(3px,-1px)}82%{transform:translate(-2px,0)}}
.mring-root .beam{position:absolute;height:2px;transform-origin:0 50%;border-radius:2px;pointer-events:none;
background:linear-gradient(90deg, rgba(255,210,120,.8), rgba(255,170,60,.22));box-shadow:0 0 8px rgba(255,180,70,.45)}
.mring-root .skyTop{position:absolute;left:11px;right:11px;top:10px;display:flex;align-items:center;gap:7px;z-index:3}
.mring-root .skyTop span{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#c99a4e;white-space:nowrap}
.mring-root .skyTop .rb{flex:1 1 0;height:6px;border-radius:4px;background:rgba(0,0,0,.6);overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .skyTop .rb i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#d08b2a,#ffe6a6);
box-shadow:0 0 9px rgba(255,190,90,.5)}
.mring-root .forge{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;margin-bottom:10px;
background:linear-gradient(180deg, rgba(44,27,12,.94), rgba(22,13,6,.97));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.4)}
.mring-root .gauge{position:relative;width:62px;height:62px;flex:0 0 62px;border-radius:50%;display:grid;place-items:center;
background:conic-gradient(#ffd782 calc(var(--p)*1%), rgba(0,0,0,.55) 0);
box-shadow:0 0 0 1.2px rgba(214,160,74,.5), 0 0 18px rgba(255,170,60,.15)}
.mring-root .gauge::after{content:"";position:absolute;inset:6px;border-radius:50%;
background:radial-gradient(circle at 50% 35%, rgba(46,28,12,.98), rgba(12,7,3,.99))}
.mring-root .gauge b{position:relative;z-index:1;font-size:15px;font-weight:900;color:#fff1cd}
.mring-root .gauge b em{font-style:normal;font-size:9px;color:#c99a4e}
.mring-root .fbody{flex:1 1 auto;min-width:0}
.mring-root .fbody h5{margin:0 0 3px;font-family:'PT Serif',Georgia,serif;font-size:14px;color:#fff1cd}
.mring-root .fbody p{margin:0 0 6px;font-size:10.5px;line-height:1.45;color:#b59a78}
.mring-root .costrow{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.mring-root .heat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;font-size:10.5px;font-weight:900;
color:#ffd4a0;background:rgba(120,50,20,.45);box-shadow:inset 0 0 0 1px rgba(255,130,70,.5)}
.mring-root .tokrow{display:flex;gap:7px;margin-top:9px}
.mring-root .tokrow .btn{flex:1 1 0}
.mring-root .sk{position:relative;padding:11px 11px 12px;border-radius:13px;margin-bottom:9px;
background:linear-gradient(180deg, rgba(42,26,12,.92), rgba(20,12,5,.96));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.32)}
.mring-root .sk.is-lock{filter:saturate(.4);opacity:.75}
.mring-root .sk-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mring-root .sk-h .gl{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;font-size:19px;
background:radial-gradient(circle at 50% 35%, rgba(255,200,110,.3), rgba(0,0,0,.65));
box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.5)}
.mring-root .sk-h .tt{flex:1 1 auto;min-width:0}
.mring-root .sk-h h5{margin:0 0 2px;font-family:'PT Serif',Georgia,serif;font-size:14px;color:#fff1cd}
.mring-root .sk-h p{margin:0;font-size:10.5px;color:#ab9375}
.mring-root .sk-lv{display:flex;gap:3px}
.mring-root .sk-lv i{width:9px;height:9px;border-radius:3px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(214,160,74,.4)}
.mring-root .sk-lv i.on{background:linear-gradient(180deg,#ffe9b6,#d9a13a);box-shadow:0 0 8px rgba(255,190,90,.6)}
.mring-root .sk-num{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;margin-bottom:8px;
background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(214,160,74,.28)}
.mring-root .sk-num u{text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#a98a5e}
.mring-root .sk-num b{font-size:14px;font-weight:900;color:#fff1cd;margin-left:auto}
.mring-root .sk-num b em{font-style:normal;font-size:11px;color:var(--ok);margin-left:4px}
.mring-root .mast{position:relative;height:10px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;margin:0 0 4px;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .mast i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#6f4bc0,#d3b0ff);
box-shadow:0 0 9px rgba(170,120,255,.5)}
.mring-root .mast u{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;font-size:8px;font-weight:900;color:#fff}
.mring-root .branch{display:flex;gap:7px;margin-top:8px}
.mring-root .br{flex:1 1 0;padding:8px 9px;border-radius:11px;cursor:pointer;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.6));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.mring-root .br.is-pick{background:linear-gradient(160deg, rgba(120,70,190,.42), rgba(30,18,8,.6));
box-shadow:inset 0 0 0 1.6px rgba(200,140,255,.85), 0 0 14px rgba(170,110,255,.18)}
.mring-root .br.is-off{opacity:.42}
.mring-root .br b{display:block;font-size:11.5px;font-weight:900;color:#fff1cd;margin-bottom:2px}
.mring-root .br span{display:block;font-size:10px;line-height:1.35;color:#ab9375}
.mring-root .echo{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;margin-bottom:8px;
background:linear-gradient(90deg, rgba(60,30,90,.45), rgba(20,12,6,.6));box-shadow:inset 0 0 0 1.1px rgba(190,130,255,.35)}
.mring-root .echo img{width:22px;height:22px;object-fit:contain}
.mring-root .echo b{font-size:13px;color:#e5c7ff}
.mring-root .echo span{display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:#b59ccf}
.mring-root .lockline{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:#c08f55;margin-top:6px}
.mring-root .ord{position:relative;padding:10px 11px 11px;border-radius:13px;margin-bottom:8px;overflow:hidden;
background:linear-gradient(180deg, rgba(44,27,12,.92), rgba(21,13,6,.96));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.32)}
.mring-root .ord.is-done{box-shadow:inset 0 0 0 1.5px rgba(127,224,138,.6)}
.mring-root .ord-h{display:flex;align-items:flex-start;gap:9px;margin-bottom:7px}
.mring-root .ord-h .oi{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;font-size:17px;overflow:hidden;
background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.4)}
/* Фаза 129.9 (баг «огромная картинка награды перекрывает карточку наряда»): у .oi не было
ограничения размера самого ![]()
-- icon_path нарядов иногда указывает на полноразмерный
арт (кубок и т.п.), а display:grid;place-items:center лишь центрирует, но не масштабирует и
не режет содержимое без overflow:hidden (добавлено выше) + явного размера img ниже. */
.mring-root .ord-h .oi img{width:22px;height:22px;object-fit:contain}
.mring-root .ord-h .ob{flex:1 1 auto;min-width:0}
.mring-root .ord-h h5{margin:0 0 2px;font-size:12.5px;font-weight:900;color:#fff1cd}
.mring-root .ord-h p{margin:0;font-size:10.5px;line-height:1.4;color:#ab9375}
.mring-root .ord .pr{position:relative;height:10px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;margin-bottom:7px;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .ord .pr i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#d08b2a,#ffe6a6)}
.mring-root .ord .pr u{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;font-size:8px;font-weight:900;color:#2b1a05}
.mring-root .ord-f{display:flex;align-items:center;gap:7px}
.mring-root .ord-f .rw{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900;color:#ffeaba}
.mring-root .ord-f .rw img{width:15px;height:15px;object-fit:contain}
.mring-root .slotempty{display:grid;place-items:center;gap:7px;padding:16px 12px;border-radius:13px;margin-bottom:8px;
background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.22)}
.mring-root .slotempty span{font-size:11px;color:#a98a5e}
.mring-root .draft{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
.mring-root .draft::-webkit-scrollbar{display:none}
.mring-root .dcard{flex:0 0 46%;padding:10px;border-radius:12px;cursor:pointer;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.62));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.32)}
.mring-root .dcard b{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:900;color:#fff1cd;margin-bottom:3px;line-height:1.25}
.mring-root .dcard b>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mring-root .dcard b img{width:16px;height:16px;flex:0 0 auto;object-fit:contain}
.mring-root .dcard span{display:block;font-size:10px;line-height:1.35;color:#ab9375;margin-bottom:6px;white-space:normal}
.mring-root .dcard .rw{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:900;color:#ffeaba}
.mring-root .dcard .rw img{width:14px;height:14px;object-fit:contain}
.mring-root .fuse{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 6px 9px;margin:0 -2px 10px;
border-radius:14px;overflow:hidden;
background:radial-gradient(74% 66% at 50% 46%, rgba(120,90,255,.2), rgba(10,6,3,.92) 74%);
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.34)}
.mring-root .fcard{position:relative;width:76px;height:104px;border-radius:11px;overflow:hidden;
box-shadow:0 0 0 1.5px rgba(214,160,74,.6), 0 8px 16px rgba(0,0,0,.6)}
.mring-root .fcard.is-pick{box-shadow:0 0 0 2px rgba(200,140,255,.95), 0 0 20px rgba(170,110,255,.35), 0 8px 16px rgba(0,0,0,.6)}
.mring-root .fcard img{width:100%;height:100%;object-fit:cover;display:block}
.mring-root .fcard .nm{position:absolute;left:0;right:0;bottom:0;padding:11px 3px 3px;text-align:center;font-size:9px;font-weight:900;
color:#ffeec4;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))}
.mring-root .fcard .st{position:absolute;left:0;right:0;top:0;padding:2px 4px;font-size:8.5px;font-weight:900;text-align:center;
color:#ffd9a2;background:linear-gradient(180deg,rgba(0,0,0,.82),transparent)}
.mring-root .arrow{font-size:18px;font-weight:900;color:#c9a35e}
.mring-root .trait{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;margin-bottom:7px;cursor:pointer;
background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.6));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.mring-root .trait.is-pick{background:linear-gradient(90deg, rgba(120,70,190,.42), rgba(30,18,8,.55));
box-shadow:inset 0 0 0 1.6px rgba(200,140,255,.85), 0 0 16px rgba(170,110,255,.2)}
.mring-root .trait .mark{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:grid;place-items:center;font-size:13px;
background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.45)}
.mring-root .trait.is-pick .mark{color:#2b1a05;background:linear-gradient(180deg,#e8c7ff,#a865e0)}
.mring-root .trait .tb{flex:1 1 auto;min-width:0}
.mring-root .trait h5{margin:0 0 1px;font-size:12.5px;font-weight:900;color:#fff1cd}
.mring-root .trait p{margin:0;font-size:10.5px;color:#ae9678}
.mring-root .trait .src{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#9b7fc9}
.mring-root .keepbox{display:flex;align-items:center;gap:9px;padding:10px;border-radius:12px;margin:2px 0 8px;cursor:pointer;
background:linear-gradient(90deg, rgba(60,30,90,.45), rgba(20,12,6,.6));box-shadow:inset 0 0 0 1.1px rgba(190,130,255,.35)}
.mring-root .keepbox.is-on{box-shadow:inset 0 0 0 1.6px rgba(200,140,255,.9), 0 0 16px rgba(170,110,255,.2)}
.mring-root .keepbox .mark{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;font-size:12px;
background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.45)}
.mring-root .keepbox.is-on .mark{color:#2b1a05;background:linear-gradient(180deg,#e8c7ff,#a865e0)}
.mring-root .keepbox b{font-size:12.5px;color:#fff1cd}
.mring-root .keepbox p{margin:1px 0 0;font-size:10.5px;color:#b59ccf}
.mring-root .frag{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;margin-bottom:8px;
background:linear-gradient(180deg, rgba(44,27,12,.9), rgba(21,13,6,.95));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.mring-root .frag .pic{position:relative;width:48px;height:64px;flex:0 0 48px;border-radius:9px;overflow:hidden;
box-shadow:0 0 0 1.3px rgba(214,160,74,.55)}
.mring-root .frag .pic img{width:100%;height:100%;object-fit:cover}
.mring-root .frag .fb{flex:1 1 auto;min-width:0}
.mring-root .frag .fb h5{margin:0 0 3px;font-size:12.5px;font-weight:900;color:#fff1cd}
.mring-root .shbar{position:relative;height:11px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;margin-bottom:4px;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .shbar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#8a5bd0,#e0b6ff)}
.mring-root .shbar i.dust{background:linear-gradient(90deg,rgba(190,160,110,.75),rgba(240,220,170,.8))}
.mring-root .shbar u{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;font-size:8px;font-weight:900;color:#fff}
.mring-root .chip{display:inline-block;padding:2px 8px;border-radius:7px;font-size:8.5px;font-weight:900;letter-spacing:.08em;
text-transform:uppercase;margin-bottom:3px}
.mring-root .chip.c{color:#dfe9f5;background:rgba(90,120,150,.4);box-shadow:inset 0 0 0 1px rgba(150,190,230,.5)}
.mring-root .chip.r{color:#cfe8ff;background:rgba(40,90,160,.45);box-shadow:inset 0 0 0 1px rgba(110,180,255,.6)}
.mring-root .chip.e{color:#eed4ff;background:rgba(95,45,150,.45);box-shadow:inset 0 0 0 1px rgba(195,123,255,.6)}
.mring-root .chip.l{color:#ffe6b8;background:rgba(150,90,20,.45);box-shadow:inset 0 0 0 1px rgba(255,190,90,.7)}
.mring-root .offer{display:flex;gap:10px;align-items:center;padding:10px;border-radius:13px;margin-bottom:8px;
background:linear-gradient(180deg, rgba(44,27,12,.92), rgba(21,13,6,.96));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.32)}
.mring-root .offer .pic{position:relative;width:58px;height:78px;flex:0 0 58px;border-radius:10px;overflow:hidden;
box-shadow:0 0 0 1.4px rgba(214,160,74,.6)}
.mring-root .offer .pic img{width:100%;height:100%;object-fit:cover}
.mring-root .ob2{flex:1 1 auto;min-width:0}
.mring-root .ob2 h5{margin:0 0 3px;font-family:'PT Serif',Georgia,serif;font-size:13px;color:#fff1cd}
.mring-root .ob2 p{margin:0 0 5px;font-size:10.5px;color:#ab9375}
.mring-root .lim{font-size:9.5px;font-weight:800;color:#c08f55}
.mring-root .line{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;margin-bottom:9px;overflow:hidden;
background:linear-gradient(180deg, rgba(42,26,12,.92), rgba(22,13,6,.96));box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.35)}
.mring-root .line.is-run{box-shadow:inset 0 0 0 1.5px rgba(255,214,130,.7), 0 0 18px rgba(255,170,60,.13)}
.mring-root .wslot{position:relative;width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.7));box-shadow:inset 0 0 0 1.3px rgba(214,160,74,.45)}
.mring-root .wslot img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.mring-root .wslot.is-empty::after{content:"+";font-size:21px;font-weight:900;color:rgba(214,160,74,.5)}
.mring-root .lbody{flex:1 1 auto;min-width:0}
.mring-root .lbody h5{margin:0 0 2px;font-family:'PT Serif',Georgia,serif;font-size:13.5px;color:#fff1cd}
.mring-root .lbody p{margin:0 0 6px;font-size:10.5px;color:#b59a78}
.mring-root .track{position:relative;height:9px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#d08b2a,#ffe6a6);
box-shadow:0 0 10px rgba(255,190,90,.5)}
.mring-root .lright{display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:96px}
.mring-root .lright .tm{font-size:12px;font-weight:900;color:#ffdc8a}
.mring-root .pool{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.mring-root .wk{position:relative;border-radius:13px;padding:5px 3px 4px;text-align:center;cursor:pointer;
background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.3)}
.mring-root .wk.is-sel{box-shadow:inset 0 0 0 1.6px rgba(255,214,130,.95), 0 0 15px rgba(255,180,70,.24)}
.mring-root .wk.is-busy{opacity:.38;filter:grayscale(.7)}
.mring-root .wk img{width:100%;height:44px;object-fit:contain}
.mring-root .wk span{display:block;font-size:8.5px;font-weight:900;color:#c9ab84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .skyStats{position:absolute;left:10px;right:10px;bottom:9px;z-index:3;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.mring-root .skyStats .s{padding:5px 2px 4px;border-radius:9px;text-align:center;
background:linear-gradient(180deg,rgba(38,24,10,.86),rgba(14,9,4,.92));
box-shadow:inset 0 0 0 1px rgba(214,160,74,.3)}
.mring-root .skyStats .s i{display:block;font-style:normal;font-size:7.6px;font-weight:900;letter-spacing:.1em;
text-transform:uppercase;color:#a8834a;margin-bottom:1px}
.mring-root .skyStats .s b{display:block;font-size:12.5px;font-weight:900;color:#ffe9b6;line-height:1}
.mring-root .keeper{margin-top:11px;padding:11px 12px 12px;border-radius:13px;
background:linear-gradient(180deg,rgba(44,27,12,.94),rgba(22,13,6,.97));
box-shadow:inset 0 0 0 1.3px rgba(255,200,110,.5), 0 0 22px rgba(255,170,60,.12)}
.mring-root .keeper .kh{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mring-root .keeper .kh img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 44px;
box-shadow:0 0 0 1.2px rgba(214,160,74,.5)}
.mring-root .keeper .kh b{display:block;font-size:13.5px;font-weight:900;color:#ffe9b6;line-height:1.15}
.mring-root .keeper .kh span{display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:#c2a172}
.mring-root .kbar{position:relative;height:16px;border-radius:9px;margin-bottom:9px;overflow:hidden;
background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(214,160,74,.32)}
.mring-root .kbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#d08b2a,#ffe6a6);
box-shadow:0 0 10px rgba(255,190,90,.5);transition:width .5s linear}
.mring-root .kbar u{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;
font-size:9.5px;font-weight:900;color:#2a1a06;text-shadow:0 1px 0 rgba(255,240,200,.45)}
.mring-root .ladder{display:grid;gap:8px}
.mring-root .lad{padding:10px 11px;border-radius:12px;background:linear-gradient(180deg,rgba(40,25,11,.9),rgba(20,12,5,.95));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.3)}
.mring-root .lad.is-ready{box-shadow:inset 0 0 0 1.4px rgba(255,205,115,.72), 0 0 18px rgba(255,170,60,.14)}
.mring-root .lad-t{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:8px;
font-size:12.5px;font-weight:900;letter-spacing:.01em}
.mring-root .lad-t em{font-style:normal;opacity:.5;font-size:11px}
.mring-root .r-c{color:#cbb894}
.mring-root .r-r{color:#7fc4ff}
.mring-root .r-e{color:#c79bff}
.mring-root .r-l{color:#ffc061}
.mring-root .lad .btn{width:100%}
.mring-root .lad .btn:disabled{opacity:.5}
.mring-root .fway{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:11px}
.mring-root .fway .pil{padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:900;
background:linear-gradient(180deg,rgba(48,30,13,.95),rgba(24,15,6,.97));
box-shadow:inset 0 0 0 1.2px rgba(214,160,74,.42)}
.mring-root .fway .ar{color:#c99a4e;font-weight:900}
.mring-root .pickhead{display:flex;align-items:baseline;gap:8px;margin:0 2px 8px}
.mring-root .pickhead b{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#c99a4e}
.mring-root .pickhead u{margin-left:auto;text-decoration:none;font-size:11px;font-weight:900;color:#e7c98c}
.mring-root .pickrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mring-root .pk{position:relative;padding:6px 4px 7px;border-radius:12px;cursor:pointer;text-align:center;
background:linear-gradient(180deg,rgba(40,25,11,.9),rgba(20,12,5,.95));
box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.26);transition:transform .12s, box-shadow .12s}
.mring-root .pk img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;display:block;margin-bottom:5px}
.mring-root .pk b{display:block;font-size:9.6px;font-weight:900;color:#f0dcb4;line-height:1.1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .pk span{display:block;margin-top:2px;font-size:8.6px;font-weight:900;letter-spacing:.06em;
text-transform:uppercase;color:#8fd6a0}
.mring-root .pk .lv{position:absolute;left:8px;top:8px;padding:1px 5px;border-radius:6px;font-size:8.4px;font-weight:900;
color:#2a1a06;background:linear-gradient(180deg,#ffe6a6,#d59b34)}
.mring-root .pk.is-pick{transform:translateY(-2px);box-shadow:inset 0 0 0 1.7px rgba(255,214,130,.95), 0 0 16px rgba(255,180,70,.34)}
.mring-root .pk.is-off{opacity:.42;cursor:default}
.mring-root .lnk{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:11px;font-weight:900;color:#e0b972}
.mring-root .payrow{display:flex;align-items:center;gap:9px;margin-top:8px}
.mring-root .payrow .btn{flex:0 0 auto}
.mring-root .payhint{font-size:10px;font-weight:800;color:#9c7b47}
.mring-root .btn.mini.wide{width:100%;margin-top:8px}
.mring-root .rail{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mring-root .rail::-webkit-scrollbar{display:none}
.mring-root .rail > *{flex:0 0 96px;scroll-snap-align:start}
.mring-root .pickRail > *{flex:0 0 104px}
.mring-root .seg{display:flex;gap:6px;margin-bottom:8px}
.mring-root .seg.thin{gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mring-root .seg.thin::-webkit-scrollbar{display:none}
.mring-root .sg{flex:1 0 auto;padding:7px 12px;border:0;cursor:pointer;border-radius:999px;font:inherit;
font-size:11px;font-weight:900;color:#c2a172;white-space:nowrap;
background:linear-gradient(180deg,rgba(40,25,11,.9),rgba(20,12,5,.95));
box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.26)}
.mring-root .seg.thin .sg{flex:0 0 auto;padding:6px 11px;font-size:10.4px}
.mring-root .sg.is-on{color:#2a1a06;background:linear-gradient(180deg,#ffe6a6,#d59b34);
box-shadow:0 2px 8px rgba(255,180,70,.28)}
.mring-root .mc{position:relative;padding:5px 5px 6px;border-radius:12px;cursor:pointer;text-align:center;
background:linear-gradient(180deg,rgba(40,25,11,.9),rgba(20,12,5,.95));
box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.26);transition:transform .14s, box-shadow .14s}
.mring-root .mc img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;display:block}
.mring-root .mc .nm{display:block;margin-top:4px;font-size:9.4px;font-weight:900;color:#f0dcb4;line-height:1.1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .mc .rr{display:block;margin-top:2px;font-size:8.2px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.mring-root .mc .lvp{position:absolute;left:7px;top:7px;padding:1px 5px;border-radius:6px;font-size:8.2px;font-weight:900;
color:#2a1a06;background:linear-gradient(180deg,#ffe6a6,#d59b34)}
.mring-root .mc .mbar{position:relative;height:6px;margin-top:5px;border-radius:4px;overflow:hidden;
background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(214,160,74,.25)}
.mring-root .mc .mbar i{display:block;height:100%;background:linear-gradient(90deg,#d08b2a,#ffe6a6)}
.mring-root .mc .mbar.is-full i{background:linear-gradient(90deg,#63d38a,#c8ffd8)}
.mring-root .mc .stt{display:block;margin-top:4px;font-size:8px;font-weight:900;letter-spacing:.05em;
text-transform:uppercase;color:#8fd6a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .mc .stt.wait{color:#ffce7a}
.mring-root .mc .stt.work{color:#7fc4ff}
.mring-root .mc.is-sel{transform:translateY(-3px);box-shadow:inset 0 0 0 1.8px rgba(255,214,130,.95), 0 0 16px rgba(255,180,70,.32)}
.mring-root .mc.is-busy::after{content:'';position:absolute;inset:5px 5px auto;aspect-ratio:3/4;border-radius:9px;
background:radial-gradient(circle at 50% 42%, rgba(120,190,255,.32), rgba(8,14,26,.72));
box-shadow:inset 0 0 0 1.4px rgba(140,200,255,.6)}
.mring-root .mc .work-ic{position:absolute;right:8px;top:8px;z-index:3;width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;font-size:11px;
background:linear-gradient(180deg,#8ec7ff,#3d78c4);box-shadow:0 2px 7px rgba(0,0,0,.5)}
.mring-root .railEmpty{flex:1 1 100%;padding:16px 10px;text-align:center;font-size:11px;font-weight:800;color:#9c7b47}
.mring-root .kp{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;margin-bottom:8px;
background:linear-gradient(180deg,rgba(40,25,11,.9),rgba(20,12,5,.95));
box-shadow:inset 0 0 0 1.1px rgba(214,160,74,.28)}
.mring-root .kp.is-free{box-shadow:inset 0 0 0 1.3px rgba(140,225,160,.5)}
.mring-root .kp > img{width:46px;height:46px;flex:0 0 46px;border-radius:10px;object-fit:cover;
box-shadow:0 0 0 1.2px rgba(214,160,74,.45)}
.mring-root .kp .kb{min-width:0;flex:1}
.mring-root .kp .kb h5{margin:0;font-size:12.6px;font-weight:900;color:#ffe9b6;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .kp .kb p{margin:2px 0 0;font-size:10px;line-height:1.3;color:#c2a172;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .kp .xpb{position:relative;height:5px;margin-top:5px;border-radius:3px;overflow:hidden;
background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(214,160,74,.22)}
.mring-root .kp .xpb i{display:block;height:100%;background:linear-gradient(90deg,#8a6adf,#d3b8ff)}
.mring-root .kp .kact{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
.mring-root .kp .btn.mini{padding:6px 10px;font-size:10.4px}
.mring-root .kovList{max-height:44dvh;overflow-y:auto;margin-bottom:10px;text-align:left}
.mring-root .kovList .kp{cursor:pointer}
.mring-root .kovList .kp.is-off{opacity:.45;cursor:default}
.mring-root .fx{position:fixed;inset:0;z-index:70;display:none;
background:radial-gradient(circle at 50% 44%, rgba(46,25,6,.97), rgba(3,2,0,.995));
backdrop-filter:blur(3px)}
.mring-root .fx.is-on{display:block}
.mring-root .fxStage{position:absolute;inset:0;display:grid;place-items:center}
.mring-root .fxCore{position:relative;width:250px;height:250px;display:grid;place-items:center}
.mring-root .fxRing{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(from 0deg, rgba(255,198,104,0) 0deg, rgba(255,226,156,.75) 120deg, rgba(255,198,104,0) 240deg);
mask:radial-gradient(circle, transparent 60%, #000 63%, #000 84%, transparent 87%);
-webkit-mask:radial-gradient(circle, transparent 60%, #000 63%, #000 84%, transparent 87%);
animation:mr-fxspin 1.9s linear infinite}
.mring-root .fxRing2{position:absolute;inset:26px;border-radius:50%;
box-shadow:inset 0 0 0 1.5px rgba(255,206,122,.45), 0 0 34px rgba(255,170,60,.22);
animation:mr-fxpulse 1.5s ease-in-out infinite}
@keyframes mr-fxspin{to{transform:rotate(360deg)}}
@keyframes mr-fxpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.mring-root .fxCards{position:absolute;inset:0}
.mring-root .fxCards img{position:absolute;left:50%;top:50%;width:78px;aspect-ratio:3/4;object-fit:cover;
border-radius:11px;box-shadow:0 10px 26px rgba(0,0,0,.65), 0 0 0 1.6px rgba(255,208,124,.75);
animation:mr-fxdraw 1.55s cubic-bezier(.5,.02,.3,1) var(--d) forwards}
@keyframes mr-fxdraw{
0% {transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot));opacity:1}
62% {transform:translate(-50%,-50%) translate(calc(var(--dx)*.22),calc(var(--dy)*.22)) scale(.86) rotate(0deg);opacity:1}
100%{transform:translate(-50%,-50%) scale(.16) rotate(10deg);opacity:0}
}
.mring-root .fxBurst{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;opacity:0;
background:radial-gradient(circle, #fffaf0 0%, #ffd98c 34%, #ff9f3a 56%, rgba(255,140,40,0) 74%)}
.mring-root .fx.is-win .fxBurst{animation:mr-fxwin 1.05s cubic-bezier(.18,.72,.26,1) 1.5s forwards}
@keyframes mr-fxwin{0%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(13)}100%{opacity:0;transform:scale(21)}}
.mring-root .fx.is-fail .fxRing{animation:mr-fxspin 1.9s linear infinite, mr-fxdim .8s ease 1.5s forwards}
.mring-root .fx.is-fail .fxRing2{animation:mr-fxpulse 1.5s ease-in-out infinite, mr-fxdim .8s ease 1.5s forwards}
@keyframes mr-fxdim{to{opacity:.22;filter:grayscale(1) brightness(.6)}}
.mring-root .fx.is-fail .fxCore{animation:mr-fxshake .55s ease 1.5s}
@keyframes mr-fxshake{0%,100%{transform:translateX(0)}18%{transform:translateX(-10px)}42%{transform:translateX(8px)}68%{transform:translateX(-5px)}88%{transform:translateX(3px)}}
.mring-root .fxCap{position:fixed;left:0;right:0;bottom:15%;text-align:center;padding:0 22px}
.mring-root .fxTitle{display:block;font-size:20px;font-weight:900;color:#ffe9b6;letter-spacing:.01em;
text-shadow:0 2px 12px rgba(0,0,0,.75)}
.mring-root .fxSub{display:block;margin-top:5px;font-size:11.8px;font-weight:800;color:#c2a172}
.mring-root .fx.is-win .fxTitle{color:#ffe08a;text-shadow:0 0 22px rgba(255,190,80,.55)}
.mring-root .fx.is-fail .fxTitle{color:#e8907e}
.mring-root .tabs{overflow-x:auto;scrollbar-width:none}
.mring-root .tabs::-webkit-scrollbar{display:none}
.mring-root .tabs .tab{flex:0 0 auto;padding-left:13px;padding-right:13px;font-size:11.4px}
.mring-root [hidden]{display:none !important}
.mring-root .igrow{display:flex;gap:8px;align-items:stretch}
.mring-root .igrow .btn{flex:1 1 0;min-width:0;margin:0;padding-left:10px;padding-right:10px;
font-size:12.4px;white-space:nowrap}
.mring-root .igrow .btn img{width:15px;height:15px}
.mring-root .mc .mbar{position:relative;height:7px;margin:5px 1px 0;border-radius:999px;overflow:hidden;
background:rgba(8,5,2,.78);box-shadow:inset 0 0 0 1px rgba(214,160,74,.45)}
.mring-root .mc .mbar i{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,#c9861f,#ffd98c)}
.mring-root .mc .mbar.is-full i{background:linear-gradient(90deg,#4fb877,#b6f5cd)}
.mring-root .rail{align-items:stretch}
.mring-root .rail > *{flex:0 0 100px;display:flex;flex-direction:column}
.mring-root .pickRail > *{flex:0 0 104px}
.mring-root .mc img{width:100%;height:118px;aspect-ratio:auto;object-fit:cover;
border-radius:9px;display:block;flex:0 0 118px}
.mring-root .pickRail .mc img{height:124px;flex:0 0 124px}
.mring-root .mc .stt{margin-top:auto;padding-top:4px}
.mring-root .kbar{height:18px}
.mring-root .kbar i{background:linear-gradient(90deg,#8a5410,#d79a34)}
.mring-root .kbar u{color:#fff3d6;font-size:10px;letter-spacing:.02em;
text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6)}
.mring-root .kp .kact.wide{flex:0 0 108px;align-items:stretch;gap:3px}
.mring-root .kp .kact.wide .btn{width:100%;padding:7px 8px;font-size:11px}
.mring-root .xpnote{display:flex;align-items:center;justify-content:center;gap:3px;
font-size:8.8px;font-weight:900;color:#c2a172;white-space:nowrap}
.mring-root .xpnote img{width:11px;height:11px;object-fit:contain}
.mring-root .xpbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
line-height:1.05;padding:6px 8px 5px}
.mring-root .xpbtn b{font-size:11px;font-weight:900}
.mring-root .xpbtn .xpnote{font-size:8.6px;font-weight:900;color:#4b3410;opacity:.92}
.mring-root .xpbtn:disabled .xpnote{color:#7a6238}
.mring-root .rail > *{flex:0 0 100px !important;width:100px;max-width:100px;min-width:100px;box-sizing:border-box}
.mring-root .pickRail > *{flex:0 0 104px !important;width:104px;max-width:104px;min-width:104px}
.mring-root .rail .railEmpty{flex:1 1 100% !important;width:auto;max-width:none;min-width:0}
.mring-root .mc .nm, .mring-root .mc .rr, .mring-root .mc .stt{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mring-root .mc .stt.max{color:#ffd489;letter-spacing:.09em}
.mring-root .mc .mbar.is-work{box-shadow:inset 0 0 0 1px rgba(130,195,255,.55)}
.mring-root .mc .mbar.is-work i{background:linear-gradient(90deg,#3f7fc4,#a8d8ff)}
.mring-root .mc.is-busy::after{content:none}
.mring-root .mc .work-ic{background:linear-gradient(180deg,#8ec7ff,#3d78c4)}
.mring-root .mc .mbar.is-full i{background:linear-gradient(90deg,#c9861f,#ffd98c)}
/* ------------------------------------------------------------------------------------------
Фаза 129.1: посадка «Кольца Мастера» в экран проекта.
Прототип жил в рамке ровно 390px, поэтому ряд фильтров (.seg с flex:1 0 auto + nowrap) и
отрицательные поля (.sky/.hud с margin:0 -4px) растягивали контейнер шире вьюпорта: блоки
уезжали вправо, а текст кнопок и карта в центре кольца оказывались за краем экрана.
Здесь ширина жёстко привязывается к экрану, ряды фильтров скроллятся, поля обнуляются.
------------------------------------------------------------------------------------------ */
.mring-root { width: 100%; max-width: 100%; overflow-x: hidden; }
.mring-root > * { max-width: 100%; }
.mring-root .sky,
.mring-root .hud,
.mring-root .panel,
.mring-root .mr-upgrade,
.mring-root .keeper { margin-left: 0; margin-right: 0; }
.mring-root .seg { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.mring-root .seg::-webkit-scrollbar { display: none; }
.mring-root .sky { height: 348px; }
.mring-root .heroCard { z-index: 4; }
.mring-root .heroCard img { background: rgba(20, 12, 5, 0.9); }
/* Модалка выбора хранителя: кит города (.city-modal + .city-modal-card, рамка modal.png),
поэтому текст тёмный по светлой рамке, а не светлый по тёмной плашке прототипа. */
.mring-root .mr-modal .mr-picklist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; max-height: 46dvh; overflow-y: auto; }
.mring-root .mr-modal .mr-pick-keeper {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
border: 0; border-radius: 12px; text-align: left;
background: linear-gradient(180deg, rgba(120, 86, 40, 0.16), rgba(120, 86, 40, 0.06));
box-shadow: inset 0 0 0 1.2px rgba(160, 118, 58, 0.45);
}
.mring-root .mr-modal .mr-pick-keeper img {
width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; object-fit: cover;
box-shadow: inset 0 0 0 1.2px rgba(160, 118, 58, 0.5);
}
.mring-root .mr-modal .mr-pick-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mring-root .mr-modal .mr-pick-body b { font-size: 13.5px; font-weight: 900; color: #3f2708; }
.mring-root .mr-modal .mr-pick-body i { font-style: normal; font-size: 11px; font-weight: 800; color: #8a6a33; }
.mring-root .mr-modal .mr-pick-body em { font-style: normal; font-size: 11px; font-weight: 700; color: #6d5427; }
.mring-root .mr-modal .mr-pick-keeper.is-off { opacity: 0.55; filter: grayscale(0.5); }
/* Отдельная кнопка «Назначить» на карточке хранителя (Фаза 129.9: раньше вся карточка была
кнопкой без явного CTA -- по просьбе пользователя вернули отдельную кнопку, как в прототипе
proto_ws7, чтобы было очевидно, куда нажимать). */
.mring-root .mr-modal .mr-pick-assign-btn {
flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 214, 130, 0.55);
background: linear-gradient(180deg, #ffd77a, #e79a2c); color: #3a2205; font-size: 12.5px;
font-weight: 900; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
.mring-root .mr-modal .mr-pick-assign-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.5); box-shadow: none; }
.mring-root .mr-modal .city-modal-note { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #6d5427; }
/* Модалка «Карта улучшена» (Сбор завершённой работы хранителя, Fase 129.9). */
.mring-root .mr-modal .mr-collect-trophy { display: flex; justify-content: center; margin: 4px 0 10px; }
.mring-root .mr-modal .mr-collect-trophy img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.mring-root .mr-modal .mr-collect-cardline { margin: 0 0 6px; text-align: center; font-size: 13.5px; font-weight: 900; color: #3f2708; }
/* Страховка на случай, если экран Мастерской окажется flex-элементом: без min-width:0 такой
элемент растягивается по max-content самой широкой строки (ряд фильтров, карусель карт). */
.ws-root.mring-root { min-width: 0; }
.mring-root .rail, .mring-root .seg, .mring-root .ladder, .mring-root .draft { width: 100%; }
/* ------------------------------------------------------------------------------------------
Фаза 129.5: ширина экрана Мастерской — настоящая причина.
`.ws-root { display: grid }` без явных колонок создаёт одну колонку auto, а такая колонка
растёт до max-content своего содержимого. Панели Мастерской содержат горизонтальные ленты
(карусель карт, ряды фильтров, лента купели) шириной под тысячу пикселей, поэтому колонка
раздувалась до ~996px, и весь экран уезжал за правый край: замер на стенде показывал
grid-template-columns: 996px при окне 390px. Прошлые попытки (min-width родителей, contain,
overflow) лечили следствие и потому ничего не меняли.
Колонка становится minmax(0, 1fr) — то есть ровно по ширине экрана, — а детям разрешено
сжиматься, чтобы ленты прокручивались внутри своей ширины, а не растягивали сетку.
Правило адресовано только Мастерской (.mring-root); сетка других экранов .ws-root не тронута.
------------------------------------------------------------------------------------------ */
.mring-root { grid-template-columns: minmax(0, 1fr); }
.mring-root > * { min-width: 0; }
.mring-root .panel { min-width: 0; }
/* Фаза 129.6 (баг 3): карточки предложений (.dcard) растягивались по высоте — тексты нарядов
фазы 129 длиннее прототипных ("Продержи всех хранителей занятыми 4 часа" против "зажги 5 звёзд,
не потратив жетон"), а .dcard b/span были обычным block без ограничения строк, поэтому перенос
текста раздувал карточку. Заголовок (b>span) остаётся в 2 строки, но описание (Фаза 129.9,
по жалобе пользователя: обрезка мешала понять, что за наряд берёшь) больше не клампится —
карточка растёт по высоте свободно, ряд .draft всё равно листается горизонтально. */