/* Нотки диджитал — тонкий слой поверх текущего стиля.
   Всё завязано на --accent (перекрашивается под игру автоматически).
   Отдельный файл: чтобы полностью откатить — удалить <link> в base.html. */
:root {
    --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 42%, transparent);
    --accent-ink-soft: color-mix(in srgb, var(--accent-text) 18%, transparent);
    --tm-holo: linear-gradient(115deg, #5AD7FF, #B58CFF, #FF8AD6, #FFD86B, #5AD7FF);
    --tm-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
}

/* 1 — искра в логотипе + утилита .tm-spark */
.tcgmark-brand::after {
    content: "\2726"; margin-left: .3em; font-size: .6em; color: var(--accent);
    filter: drop-shadow(0 0 4px var(--accent-glow)); line-height: 1;
}
.tm-spark { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }

/* 2 — кнопка-акцент: подъём + свечение; круглая стрелка ↗ */
.btn-accent { transition: transform .14s ease, box-shadow .14s ease; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.tm-cta { display: inline-flex; align-items: center; gap: .5em; }
.tm-arw {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-ink-soft); font-style: normal; line-height: 1; flex: 0 0 auto;
    transition: transform .16s ease;
}
.btn-accent:hover .tm-arw { transform: translate(2px, -2px); }

/* 3 — карточки-плитки: мягче углы, подъём и акцент-свечение на hover */
.card-tile { border-radius: 14px; transition: transform .16s ease, box-shadow .16s ease; }
.card-tile .card-img-top { border-top-left-radius: 13.5px; border-top-right-radius: 13.5px; }
.card-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20, 22, 28, .10), 0 0 0 1.5px var(--accent), 0 0 22px var(--accent-soft);
}

/* 4 — статистика: моноширинные цифры + акцентная полоса со свечением */
.tm-stat { font-family: var(--tm-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-stat::after {
    content: ""; display: block; width: 26px; height: 3px; margin: 7px auto 0;
    border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}

/* 5 — иконки-плитки в акцентной подложке */
.tm-tile {
    display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
    background: var(--accent-soft); border: 1px solid var(--accent-glow); font-size: 1.6rem;
}

/* 7 — меню: акценты в навигации (всё на --accent) */
.tcgmark-header { box-shadow: 0 3px 16px -9px var(--accent); }
.game-tab.active-pokemon, .game-tab.active-ygo,
.game-tab.active-mtg, .game-tab.active-onepiece { box-shadow: 0 0 16px -3px var(--accent); }
.tcgmark-subnav a { position: relative; }
.tcgmark-subnav a.active { border-bottom-color: transparent; }
.tcgmark-subnav a::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 2px; height: 2px;
    border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
    transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.tcgmark-subnav a:hover::after,
.tcgmark-subnav a.active::after { transform: scaleX(1); }

/* 8 — мобильная витрина продавца: каждый лот — карточка, атрибуты одной строкой */
@media (max-width: 767.98px) {
    .m-compact tr {
        position: relative; align-items: flex-start;
        border: 1px solid rgba(0, 0, 0, .10);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
        padding: 12px 14px 12px 62px;
        min-height: 80px;
    }
    /* Миниатюра — абсолютом в левом «жёлобе», весь контент строки — справа */
    .m-compact td.m-thumb { position: absolute; left: 12px; top: 12px; padding: 0; margin: 0; }
    /* Название — на всю ширину контентной области (жёлоб уже задан padding-left строки) */
    .m-compact td.m-head {
        flex: 0 0 100%; padding: 0 0 4px 0; margin: 0; border: 0 !important;
    }
    /* Атрибуты — значками в одну строку, без подписей */
    .m-compact td[data-label] {
        flex: 0 0 auto; width: auto; display: inline-flex; align-items: center;
        justify-content: flex-start; padding: 0; margin: 6px 12px 0 0; text-align: left;
    }
    .m-compact td[data-label]::before { content: none; }
    .m-compact td[data-label="Описание"] { display: none; }
    .m-compact td[data-label="Цена"] { font-weight: 600; }
    .m-compact td[data-label=""] { flex: 1 1 auto; justify-content: flex-end; margin: 6px 0 0; }
}

/* 6 — холо-кромка: Holo-лоты получают иридесцентный бейдж */
.tm-finish-is_holo {
    background: var(--tm-holo) !important; background-size: 200% 200%;
    color: #12141b !important; border-color: transparent !important;
    animation: tm-holo 6s linear infinite;
}
.tm-finish-is_holo i { color: #12141b !important; }
@keyframes tm-holo { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .tm-finish-is_holo { animation: none; } }

/* Reverse Holo — стилизованная «R» с фойл-переливом на тёмной плашке
   (иначе, чем full-holo: там радужная заливка всей плашки). */
.tm-finish-is_reverse_holo {
    background: #14161c !important; color: #fff !important; border-color: transparent !important;
}
.tm-finish-is_reverse_holo i { display: none; }
.tm-finish-is_reverse_holo::before {
    content: "R"; font-family: Georgia, "Times New Roman", serif;
    font-weight: 700; font-style: italic; font-size: 1.05em; line-height: 1; margin-right: .1em;
    background: linear-gradient(120deg, #a9ecff, #c9c2ff, #ffc8ec, #cbffe4, #a9ecff);
    background-size: 220% 220%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tm-holo 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tm-finish-is_reverse_holo::before { animation: none; } }

/* Редкости Holo/Reverse — глиф (★ / полу-звезда) с фойл-переливом.
   Плашка и подпись остаются читаемыми — переливается только значок. */
.tm-rar-holo .tm-rar-glyph, .tm-rar-reverse .tm-rar-glyph {
    background: linear-gradient(120deg, #5AD7FF, #B58CFF, #FF8AD6, #FFD86B, #5AD7FF);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
    animation: tm-holo 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tm-rar-holo .tm-rar-glyph, .tm-rar-reverse .tm-rar-glyph { animation: none; }
}