/* ============================================================
   Декоративные уголки для панелей (AAA action/rpg стиль).

   Использование — добавить базовый класс + класс стиля на любой DIV:
       <div class="dw-corners dw-corners--ornate"> ... </div>

   Стили:
       dw-corners--line    тонкие линии, минимализм
       dw-corners--ornate  вензель/филигрань
       dw-corners--frame   тяжёлая металлическая рамка со скосом
       dw-corners--thorn   шипы, дарк-фэнтези

   Модификаторы:
       dw-corners--sm / --lg   размер уголка (по умолчанию 28px)
       dw-corners--outset      уголки выступают наружу за край блока
                               (не работает внутри overflow:hidden родителя)
       dw-corners--dim         приглушённые (opacity .55)

   Тонкая настройка через переменные на самом элементе:
       --corner-size: 36px; --corner-opacity: .7; --corner-inset: -4px;

   Уголки рисуются на ::before поверх контента (pointer-events: none),
   ::after остаётся свободным. Элементу с position:static выставится
   position:relative — если у блока уже есть absolute/fixed, конфликта нет,
   класс это не перезапишет (там relative и не нужен).
   ============================================================ */

.dw-corners {
    position: relative;
}

.dw-corners::before {
    content: '';
    position: absolute;
    inset: var(--corner-inset, 0);
    pointer-events: none;
    z-index: 2;
    opacity: var(--corner-opacity, .9);
    background-repeat: no-repeat;
    background-size: var(--corner-size, 28px) var(--corner-size, 28px);
    background-position: left top, right top, left bottom, right bottom;
}

.dw-corners--line::before {
    background-image:
        url('../img/corners/corner-line-tl.svg'),
        url('../img/corners/corner-line-tr.svg'),
        url('../img/corners/corner-line-bl.svg'),
        url('../img/corners/corner-line-br.svg');
}

.dw-corners--ornate::before {
    background-image:
        url('../img/corners/corner-ornate-tl.svg'),
        url('../img/corners/corner-ornate-tr.svg'),
        url('../img/corners/corner-ornate-bl.svg'),
        url('../img/corners/corner-ornate-br.svg');
}

.dw-corners--frame::before {
    background-image:
        url('../img/corners/corner-frame-tl.svg'),
        url('../img/corners/corner-frame-tr.svg'),
        url('../img/corners/corner-frame-bl.svg'),
        url('../img/corners/corner-frame-br.svg');
}

.dw-corners--thorn::before {
    background-image:
        url('../img/corners/corner-thorn-tl.svg'),
        url('../img/corners/corner-thorn-tr.svg'),
        url('../img/corners/corner-thorn-bl.svg'),
        url('../img/corners/corner-thorn-br.svg');
}

.dw-corners--sm  { --corner-size: 18px; }
.dw-corners--lg  { --corner-size: 42px; }

.dw-corners--outset { --corner-inset: -6px; }

.dw-corners--dim { --corner-opacity: .55; }

/* лёгкое «свечение» уголков при наведении — для кликабельных панелей */
.dw-corners--glow::before {
    transition: filter .25s ease, opacity .25s ease;
}
.dw-corners--glow:hover::before {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(212, 175, 110, .55));
}