/* ============================================================================ Арт-кнопки: индивидуальные дарк-фентези плашки (img/ui/buttons/btn-NN.png), текст — готический Cattedrale поверх. Заменяют .btn-primary на страницах. Пропорции арта сохраняются: высота задаётся --h, ширина = --ar * --h. ========================================================================== */ @font-face { font-family: 'Cattedrale'; src: url('../fonts/cattedrale-rus.ttf') format('truetype'); font-display: swap; } .abtn { --h: 58px; --ar: 4.5; position: relative; display: flex; align-items: center; justify-content: center; /* Жёсткая геометрия: ширина всегда пропорциональна арту, контент и флекс- контейнеры её не растягивают и не сжимают; в узком контейнере кнопка уменьшается целиком (aspect-ratio), а не плющится. */ width: calc(var(--h) * var(--ar)); height: auto; aspect-ratio: var(--ar); flex: 0 0 auto; align-self: center; max-width: 100%; margin-inline: auto; padding: 0 calc(var(--h) * var(--ar) * 0.13) 0.2em; box-sizing: border-box; min-width: 0; border: 0; background: transparent center / 100% 100% no-repeat; font-family: 'Cattedrale', var(--font-display), serif; font-weight: 400; font-size: calc(var(--h) * 0.30); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: #eddcae; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.8); text-decoration: none; cursor: pointer; user-select: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); transition: filter 0.2s ease, transform 0.12s ease; } .abtn:hover:not(:disabled) { color: #ffe9b0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) brightness(1.18) drop-shadow(0 0 10px rgba(242, 169, 59, 0.28)); } .abtn:active:not(:disabled) { transform: translateY(2px); } .abtn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.7); } /* Размерные варианты. */ .abtn--lg { --h: 68px; } .abtn--sm { --h: 44px; } /* Длинные надписи. */ .abtn--long { font-size: calc(var(--h) * 0.24); } .abtn--xlong { font-size: calc(var(--h) * 0.20); } /* --- Индивидуальные плашки (пропорции из нарезки) --------------------------- */ .abtn-1 { background-image: url('../img/ui/buttons/btn-01.png?v=2'); --ar: 4.29; padding-left: calc(var(--h) * var(--ar) * 0.26); padding-right: calc(var(--h) * var(--ar) * 0.16); } /* карты таро + чернильница */ .abtn-2 { background-image: url('../img/ui/buttons/btn-02.png?v=2'); --ar: 4.74; padding-left: calc(var(--h) * var(--ar) * 0.22); padding-right: calc(var(--h) * var(--ar) * 0.24); } /* сургучная печать + свиток */ .abtn-3 { background-image: url('../img/ui/buttons/btn-03.png?v=2'); --ar: 4.50; padding-left: calc(var(--h) * var(--ar) * 0.23); padding-right: calc(var(--h) * var(--ar) * 0.24); } /* стопка карт + колода в ремнях */ .abtn-4 { background-image: url('../img/ui/buttons/btn-04.png?v=2'); --ar: 4.29; padding-left: calc(var(--h) * var(--ar) * 0.22); } /* дорожный фонарь */ .abtn-5 { background-image: url('../img/ui/buttons/btn-05.png?v=2'); --ar: 5.46; padding-left: calc(var(--h) * var(--ar) * 0.23); padding-right: calc(var(--h) * var(--ar) * 0.23); } /* рунные сундучки */ .abtn-6 { background-image: url('../img/ui/buttons/btn-06.png?v=2'); --ar: 5.00; padding-left: calc(var(--h) * var(--ar) * 0.27); padding-right: calc(var(--h) * var(--ar) * 0.14); } /* сундук с золотом */ .abtn-7 { background-image: url('../img/ui/buttons/btn-07.png?v=2'); --ar: 4.26; padding-left: calc(var(--h) * var(--ar) * 0.24); padding-right: calc(var(--h) * var(--ar) * 0.24); } /* шестерни + мечи */ .abtn-8 { background-image: url('../img/ui/buttons/btn-08.png?v=2'); --ar: 3.73; padding-left: calc(var(--h) * var(--ar) * 0.26); padding-right: calc(var(--h) * var(--ar) * 0.28); } /* боевой рог + знамя */ .abtn-9 { background-image: url('../img/ui/buttons/btn-09.png?v=2'); --ar: 3.42; padding-left: calc(var(--h) * var(--ar) * 0.20); padding-right: calc(var(--h) * var(--ar) * 0.20); } /* черепа и свечи */ .abtn-10 { background-image: url('../img/ui/buttons/btn-10.png?v=2'); --ar: 4.49; } /* скважина + свечи */ .abtn-11 { background-image: url('../img/ui/buttons/btn-11.png?v=2'); --ar: 4.87; padding-left: calc(var(--h) * var(--ar) * 0.27); padding-right: calc(var(--h) * var(--ar) * 0.19); } /* перо и пергамент */ .abtn-12 { background-image: url('../img/ui/buttons/btn-12.png?v=2'); --ar: 4.60; padding-left: calc(var(--h) * var(--ar) * 0.25); padding-right: calc(var(--h) * var(--ar) * 0.16); } /* свиток с печатью */ .abtn-13 { background-image: url('../img/ui/buttons/btn-13.png?v=2'); --ar: 4.33; } /* цепи + замок */ .abtn-14 { background-image: url('../img/ui/buttons/btn-14.png?v=2'); --ar: 5.73; padding-left: calc(var(--h) * var(--ar) * 0.24); padding-right: calc(var(--h) * var(--ar) * 0.16); } /* костяной ключ */ .abtn-15 { background-image: url('../img/ui/buttons/btn-15.png?v=2'); --ar: 4.80; padding-left: calc(var(--h) * var(--ar) * 0.24); padding-right: calc(var(--h) * var(--ar) * 0.27); } /* рог + знамя */ .abtn-16 { background-image: url('../img/ui/buttons/btn-16.png?v=2'); --ar: 5.26; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.30); } /* зеркало + маска */ .abtn-17 { background-image: url('../img/ui/buttons/btn-17.png?v=2'); --ar: 5.16; padding-left: calc(var(--h) * var(--ar) * 0.27); padding-right: calc(var(--h) * var(--ar) * 0.16); } /* мешочек золота */ .abtn-18 { background-image: url('../img/ui/buttons/btn-18.png?v=2'); --ar: 4.63; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.26); } /* знамя с вороном */ .abtn-19 { background-image: url('../img/ui/buttons/btn-19.png?v=2'); --ar: 5.61; padding-left: calc(var(--h) * var(--ar) * 0.26); padding-right: calc(var(--h) * var(--ar) * 0.21); } /* монеты + лампа */ .abtn-20 { background-image: url('../img/ui/buttons/btn-20.png?v=2'); --ar: 5.36; padding-left: calc(var(--h) * var(--ar) * 0.13); padding-right: calc(var(--h) * var(--ar) * 0.27); } /* наковальня */ .abtn-21 { background-image: url('../img/ui/buttons/btn-21.png?v=2'); --ar: 4.95; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.28); } /* указатель + фонарь */ .abtn-22 { background-image: url('../img/ui/buttons/btn-22.png?v=2'); --ar: 5.64; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.30); } /* призрачная рука */ .abtn-23 { background-image: url('../img/ui/buttons/btn-23.png?v=2'); --ar: 5.16; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.25); } /* кубок с эликсиром */ .abtn-24 { background-image: url('../img/ui/buttons/btn-24.png?v=2'); --ar: 5.85; padding-left: calc(var(--h) * var(--ar) * 0.14); padding-right: calc(var(--h) * var(--ar) * 0.25); } /* костяные песочные часы */ .abtn-25 { background-image: url('../img/ui/buttons/btn-25.png?v=2'); --ar: 6.70; } /* стрела + свеча */ .abtn-26 { background-image: url('../img/ui/buttons/btn-26.png?v=2'); --ar: 6.04; padding-left: calc(var(--h) * var(--ar) * 0.18); padding-right: calc(var(--h) * var(--ar) * 0.18); } /* черепа + чёрные свечи */