/* ═══════════════════════════════════════════════════════════════════════════
   HAJDUK THEME — НАЧАЛНАТА „Зора над Балкана"  (Phase 4 production port)
   ───────────────────────────────────────────────────────────────────────────
   Visual SOT: prototype/hajduk-zora.html (owner-approved mockup).
   The home crown: сцената (зора над Балкана) • тескерето на войводата •
   дърворезбените плочки • съгледвачите/картата • лясърътъ + музиката + времето
   във въртележка • пряпорците около огъня • дъската с хаберите + гобленътъ •
   табелите • знамената на статуса • зовътъ отъ навеса • летописътъ • свитъкътъ.

   SCOPING — read hajduk-shared.css's contract first. Every selector here is
   NESTED under `.haj-scope.haj-zora` (the home view wraps in
   <div class="haj-scope haj-zora">). Native CSS nesting keeps the generic
   class names (.tab, .rail, .board2, .plaque, .act-row, .iz-row …) from leaking
   into — or being clobbered by — the 40 other app stylesheets.
   Shared-and-identical bits (tokens, fonts, base/reset, .icon-btn ковани
   копчета, .section-head/.section-title/.shev-line, силяхлък .bottom-nav/.nav-*)
   live in hajduk-shared.css and are NOT redeclared here.

   Page-only tokens (--scroll-p / --scroll-p2 progress vars, --ink) are declared
   as DIRECT properties of the scope root below (never wrapped in a bare `& {}` —
   that fails to apply custom properties in Chrome). Per-note --ken redefinitions
   stay inside their own .hb2-* rules, unchanged from the mockup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* @keyframes are global — kept at top level with the original name. */
@keyframes ember-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 0.85; }
    60%  { opacity: 0.35; }
    100% { transform: translate(18px, -280px); opacity: 0; }
}

.haj-scope.haj-zora {
    /* page-root tokens (mockup had these in :root) — direct properties */
    --ink: #3a2a18;
    --scroll-p: 0;    /* прогрес на слизането, сетва се от JS */
    --scroll-p2: 0;   /* p², за плавно набиране на жарта */
    position: relative;  /* котва за document-залепената .scene */

    /* ═══════════════════════════════════════════════════════════
       СЦЕНАТА — „Зора над Балкана", рисувана на canvas при зареждане.
       Хиляди мазки: гора по гребените, мъгла, въздушна перспектива.
       ═══════════════════════════════════════════════════════════ */
    /* Сцената е ЗАЛЕПЕНА за документа (owner 2026-07-05): една висока картина
       отъ небето горе до почвата долу, скролва се 1:1 съ съдържанието —
       никакъвъ параллаксъ, никакво плъзгане на фона спрямо елементите. */
    .scene {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .scene canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        display: block;
    }
    /* винетката е рамка на ЕКРАНА — остава fixed, не пътува с документа */
    .scene #vignetteLayer {
        position: fixed;
        top: 0; left: 0;
    }
    /* PWA (инсталиранъ на цѣлъ екранъ) няма адресна лента → window.innerHeight е
       по-голѣмъ → хоризонтътъ (дѣлъ отъ H) слиза и върхътъ съ кръста се притиска.
       Вдигаме СВѢТСКИТѢ пластове (не винетката) нагоре, за да върнемъ вида отъ
       браузъра. Стойността е за донастройка на телефонъ. */
    @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
        .scene canvas:not(#vignetteLayer) { top: -48px; }
    }

    /* Искри от огъня — единствената амбиентна анимация, едва доловима.
       Колкото по-надолу слизаш, толкова по-силни стават. */
    .ember-field {
        position: fixed; bottom: 0; left: 18%; width: 46%; height: 320px;
        z-index: 0; pointer-events: none;
        opacity: calc(0.3 + 0.7 * var(--scroll-p2));
    }

    /* жарта поема светлината от зората, колкото по-надолу слизаш */
    .hearth-glow {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 55vh;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 70% 60% at 44% 100%,
            rgba(230,110,45,0.30), rgba(180,80,30,0.10) 55%, rgba(180,80,30,0) 100%);
        opacity: var(--scroll-p2);
    }
    .ember {
        position: absolute;
        bottom: 0;
        width: 3px; height: 3px;
        border-radius: 50%;
        background: var(--haj-ember-hi);
        opacity: 0;
        animation: ember-rise 7s linear infinite;
    }
    .ember:nth-child(1) { left: 12%; animation-delay: 0s;   }
    .ember:nth-child(2) { left: 38%; animation-delay: 2.3s; width: 2px; height: 2px; }
    .ember:nth-child(3) { left: 60%; animation-delay: 4.1s; }
    .ember:nth-child(4) { left: 80%; animation-delay: 1.2s; width: 2px; height: 2px; }
    .ember:nth-child(5) { left: 25%; animation-delay: 5.5s; }

    /* ═══════════════════════════════════════════════════════════
       ОСНОВНА КОЛОНА
       ═══════════════════════════════════════════════════════════ */
    .ui {
        position: relative;
        z-index: 1;
        max-width: 430px;
        margin: 0 auto;
        padding: 14px 16px 108px;
    }

    /* ═══ ХЕДЪР ═══ */
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 2px 10px;
    }
    .logo {
        font-family: var(--font-display);
        font-size: 34px;
        letter-spacing: 0.04em;
        color: var(--haj-bone);
        line-height: 1;
        text-shadow: 0 2px 14px rgba(0,0,0,0.6), 0 0 26px rgba(240,180,90,0.22);
    }
    .logo .tvrd { color: var(--haj-brass); }
    /* месечината-буква „с" — слязла от небето в думата */
    .logo .moon-s {
        display: inline-block;
        width: 0.57em;
        height: 0.57em;
        margin: 0 -0.05em 0 0.02em;
        vertical-align: baseline;
        transform: rotate(-8deg) translateY(0.02em);
        filter: drop-shadow(0 0 5px rgba(230,226,203,0.45)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    }
    .logo-sub {
        display: block;
        font-family: var(--font-hand);
        font-size: 14px;
        color: var(--haj-smoke);
        letter-spacing: 0.02em;
        margin-top: 2px;
        /* defensive resets vs navesa-header.css .logo-sub (games neon look) */
        text-transform: none;
        animation: none;
        text-shadow: none;
    }
    .header-btns { display: flex; gap: 10px; }

    /* прозорец към небето: зората диша тук, преди тескерето */
    .sky-window { height: 34px; }

    /* ═══ ПРОФИЛНА КАРТА — „тескере на войводата" ═══ */
    .teskere {
        position: relative;
        background:
            linear-gradient(170deg, rgba(51,87,60,0.4), rgba(27,42,30,0) 42%),
            repeating-linear-gradient(45deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 4px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px),
            var(--haj-moss);
        border: 1px solid rgba(207,166,45,0.5);
        border-radius: 10px;
        padding: 20px 18px 16px;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(240,205,130,0.14);
    }
    .teskere::before {
        content: '';
        position: absolute;
        inset: 5px;
        border: 1px solid rgba(207,166,45,0.28);
        border-radius: 7px;
        pointer-events: none;
    }
    .gaitan-knot {
        position: absolute;
        bottom: 1px; left: 14px;
        width: 46px; height: 12px;
        opacity: 0.7;
    }
    /* гайтанени къдрици — само в два ъгъла, лека асиметрия */
    .gaitan-curl {
        position: absolute;
        width: 32px; height: 32px;
        pointer-events: none;
        opacity: 0.85;
    }
    .gaitan-curl.tl { top: 9px; left: 9px; }
    .gaitan-curl.br { bottom: 9px; right: 9px; transform: rotate(180deg); }
    .seal-mark {
        position: absolute;
        top: 24px; right: 2px;
        width: 174px; height: 182px;
        opacity: 0.18;
        transform: rotate(-5deg);
        pointer-events: none;
    }
    .streak-tag {
        position: absolute;
        top: 14px; right: 14px;
        display: flex; align-items: center; gap: 5px;
        padding: 4px 10px;
        background: rgba(226,102,42,0.13);
        border: 1px solid rgba(226,102,42,0.5);
        border-radius: 4px;
        color: var(--haj-ember-hi);
        font-size: 12.5px;
        font-weight: 700;
        box-shadow: inset 0 0 9px rgba(226,102,42,0.18);
    }
    .profile-row { display: flex; align-items: center; gap: 16px; }
    .avatar-wrap { position: relative; flex-shrink: 0; }
    .avatar {
        width: 76px; height: 76px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 32% 28%, rgba(233,199,84,0.14), transparent 58%),
            linear-gradient(160deg, #31281e, #191309);
        border: 2px solid var(--haj-brass-dim);
        box-shadow: inset 0 0 0 3px var(--haj-night), inset 0 0 0 4px rgba(207,166,45,0.4), 0 4px 12px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display);
        font-size: 34px;
        color: var(--haj-brass);
    }
    .level-seal {
        position: absolute;
        bottom: -7px; left: 50%;
        transform: translateX(-50%);
        width: 32px; height: 32px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, var(--haj-brass) 55%, #7d671f);
        border: 1px solid #5e4d18;
        box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 0 0 2.5px rgba(77,63,16,0.4), inset 0 1px 1px rgba(255,240,190,0.5);
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display);
        font-size: 15px;
        color: #241c07;
    }
    .profile-info h1 {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0.06em;
        color: var(--haj-bone);
        line-height: 1.05;
    }
    .profile-level {
        font-size: 13px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--haj-brass);
        margin-top: 3px;
        /* defensive resets vs styles/inline-styles/accessibility-fixes .profile-level
           (mint pill w/ border+shadow; accessibility-fixes sets bg !important) */
        background: none !important;
        border: none !important;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        display: block; /* block so the title (рангъ) stacks BELOW, per mockup — inline-flex leaked from inline-styles.css put them on one line */
    }
    .profile-title {
        display: inline-block;
        margin-top: 6px;
        font-size: 13.5px;
        font-style: italic;
        color: var(--haj-smoke);
        border-bottom: 1px solid rgba(168,179,154,0.4);
        padding-bottom: 2px;
    }

    /* паласка — XP като патрондаш */
    .palaska { margin-top: 18px; }
    .palaska-head {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 7px;
    }
    .palaska-label {
        font-size: 11.5px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--haj-smoke);
    }
    .palaska-value { font-size: 13.5px; color: var(--haj-brass); font-weight: 700; }
    .palaska-belt {
        position: relative;
        display: flex; justify-content: space-between;
        padding: 9px 12px 7px 20px;
        background:
            repeating-linear-gradient(180deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px),
            linear-gradient(180deg, var(--haj-leather-hi), var(--haj-leather));
        border: 1px solid rgba(0,0,0,0.55);
        border-radius: 5px;
        box-shadow: inset 0 1px 0 rgba(240,229,204,0.08), inset 0 -1px 0 rgba(0,0,0,0.4);
    }
    /* месингова тока на колана */
    .palaska-belt::before {
        content: '';
        position: absolute;
        left: 5px; top: 50%;
        transform: translateY(-50%);
        width: 8px; height: 32px;
        border-radius: 2px;
        background: linear-gradient(180deg, #e9c754, #b98f24 55%, #8d711d);
        box-shadow: inset 0 0 0 2px rgba(38,28,17,0.75), 0 1px 3px rgba(0,0,0,0.45);
    }
    .cartridge {
        width: 21px; height: 26px;
        border-radius: 3px 3px 5px 5px;
        background: rgba(14,21,15,0.55);
        box-shadow: inset 0 0 0 1px rgba(240,229,204,0.08);
        position: relative;
    }
    .cartridge.full {
        background: linear-gradient(180deg, #e9c754 0%, var(--haj-brass) 45%, #8d711d 100%);
        box-shadow: inset 0 1px 0 rgba(255,240,190,0.5), 0 1px 3px rgba(0,0,0,0.4);
    }
    .cartridge.full::after {
        content: '';
        position: absolute;
        top: -4px; left: 50%;
        transform: translateX(-50%);
        width: 8px; height: 5px;
        border-radius: 4px 4px 0 0;
        background: #a57c52;
    }
    .cartridge.loading {
        background: linear-gradient(180deg, rgba(226,102,42,0.55), rgba(147,72,20,0.35));
        box-shadow: inset 0 0 0 1px rgba(226,102,42,0.4);
    }
    /* нарисувани патрони в паласката */
    .palaska-belt svg.patron { display: block; width: 21px; height: 30px; }
    .palaska-belt svg.patron.loading { filter: hue-rotate(-28deg) saturate(1.6) brightness(0.95); }

    /* наниз жълтици на гайтан (вариант Ж) */
    .niz-head { margin-top: 14px; }
    .niz { position: relative; display: flex; justify-content: space-between; padding: 4px 2px 2px; }
    .niz::before {
        content: '';
        position: absolute;
        left: 2px; right: 2px; top: 50%;
        height: 2.2px;
        transform: translateY(1px);
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(110,36,31,0.9), #93312b 18%, #a84139 50%, #93312b 82%, rgba(110,36,31,0.9));
        box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    }
    .niz svg { position: relative; display: block; width: 26px; height: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); }
    .niz svg.loading { filter: hue-rotate(-28deg) saturate(1.5) drop-shadow(0 2px 2px rgba(0,0,0,0.45)); }

    .member-footer {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 15px;
        padding-top: 12px;
        border-top: 1px solid rgba(207,166,45,0.18);
        font-size: 12.5px;
        color: var(--haj-smoke);
    }
    .member-footer i { margin-right: 5px; color: var(--haj-brass-dim); }
    .rank-stamp {
        padding: 3px 10px;
        border: 1px solid var(--haj-blood);
        border-radius: 3px;
        color: #d07a6e;
        font-weight: 700;
        letter-spacing: 0.08em;
        transform: rotate(-2deg);
        background: rgba(147,49,43,0.1);
        box-shadow: inset 0 0 0 1px rgba(147,49,43,0.3);
    }

    /* ═══ СТАТИСТИКИ — дърворезбени плочки ═══ */
    .stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
    }
    .plaque {
        background:
            radial-gradient(circle 2.5px at 9px 9px, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            radial-gradient(circle 2.5px at calc(100% - 9px) 9px, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            repeating-linear-gradient(92deg, rgba(0,0,0,0.13) 0 2px, transparent 2px 6px),
            repeating-linear-gradient(88deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 9px),
            linear-gradient(175deg, #312415, var(--haj-walnut));
        border: 1px solid rgba(0,0,0,0.6);
        border-radius: 7px;
        box-shadow: inset 0 0 0 1px rgba(207,166,45,0.16), inset 0 1px 0 rgba(240,220,170,0.06), 0 8px 18px rgba(0,0,0,0.35);
        padding: 13px 8px 11px;
        text-align: center;
        position: relative;
    }
    .plaque::before {
        content: '';
        position: absolute;
        top: 4px; left: 10px; right: 10px;
        height: 5px;
        background: rgba(207,166,45,0.3);
        clip-path: polygon(0 100%, 4% 0, 8% 100%, 12% 0, 16% 100%, 20% 0, 24% 100%, 28% 0, 32% 100%, 36% 0, 40% 100%, 44% 0, 48% 100%, 52% 0, 56% 100%, 60% 0, 64% 100%, 68% 0, 72% 100%, 76% 0, 80% 100%, 84% 0, 88% 100%, 92% 0, 96% 100%, 100% 0);
    }
    .plaque i {
        font-size: 21px; color: var(--haj-brass-dim); display: block; margin: 6px 0 4px;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.9), 0 1px 0 rgba(240,220,170,0.1);
    }
    .plaque-value {
        font-family: var(--font-display);
        font-size: 27px;
        color: var(--haj-bone);
        line-height: 1.1;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.75), 0 1px 0 rgba(240,220,170,0.08);
    }
    .plaque-label {
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--haj-smoke);
        margin-top: 3px;
    }

    /* ═══ ПЛЪТНИ ИКОНКИ — „излят месинг": светъл връх, тъмна основа, лек релеф ═══ */
    .plaque i {
        background: linear-gradient(172deg, #f7e491 4%, #e9c754 30%, #cfa62d 58%, #7a5f16 96%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 1.5px 1px rgba(0,0,0,0.65)) drop-shadow(0 -0.5px 0 rgba(255,240,190,0.28));
    }

    /* ═══ СЪГЛЕДВАЧИ — локациите като военна карта ═══ */
    .map-card {
        position: relative;
        margin-top: 14px;
        background: linear-gradient(170deg, #17261d, #122016);
        border: 1px solid rgba(207,166,45,0.32);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 12px 28px rgba(0,0,0,0.4);
    }
    .map-contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
    .map-inner { position: relative; padding: 16px 16px 13px; }
    .map-top { display: flex; align-items: center; gap: 13px; }
    .map-pin-ring {
        flex-shrink: 0;
        width: 46px; height: 46px;
        border-radius: 50%;
        border: 1px solid var(--haj-brass-dim);
        background: radial-gradient(circle at 40% 35%, rgba(207,166,45,0.24), rgba(14,21,15,0.4));
        box-shadow: inset 0 0 0 2px rgba(14,21,15,0.8), inset 0 0 0 3px rgba(233,199,84,0.22), 0 3px 8px rgba(0,0,0,0.35);
        display: flex; align-items: center; justify-content: center;
        color: var(--haj-brass);
        font-size: 21px;
    }
    .map-text { flex: 1; }
    .map-text h3 {
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 400;
        letter-spacing: 0.05em;
        color: var(--haj-bone);
    }
    .map-text p { font-size: 13px; color: var(--haj-smoke); margin-top: 2px; }
    .map-open {
        padding: 8px 16px;
        background: linear-gradient(180deg, rgba(207,166,45,0.22), rgba(207,166,45,0.07));
        border: 1px solid var(--haj-brass-dim);
        border-radius: 4px;
        color: var(--haj-brass);
        font-family: var(--font-body);
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(240,229,204,0.16), inset 0 -1px 0 rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.3);
    }
    .map-activity {
        position: relative;
        margin-top: 13px;
        padding: 9px 2px 2px;
        border-top: 1px solid rgba(207,166,45,0.2);
        font-size: 13px;
        font-style: italic;
        color: rgba(168,179,154,0.8);
        text-align: center;
    }

    /* ═══ ВЪРТЕЛЕЖКА ЕФИР/КАРТА ═══ */
    .carousel {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 14px -16px 0;
        padding: 0 16px;
    }
    .carousel::-webkit-scrollbar { display: none; }
    .slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
    .carousel .map-card {
        margin-top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ═══ РАДИО ЛЯСЪРА ═══ */
    .wg-radio {
        position: relative;
        border-radius: 11px;
        padding: 15px 15px 14px;
        overflow: hidden;
        background: linear-gradient(168deg, #10231a, #0a1810 60%, #071009);
        border: 1px solid rgba(207,166,45,0.4);
        box-shadow:
            inset 0 0 0 3px rgba(7,14,9,0.9),
            inset 0 0 0 4px rgba(207,166,45,0.28),
            0 10px 24px rgba(0,0,0,0.45);
    }
    .wg-radio .gaitan-curl { z-index: 1; }
    /* рисуваната стена — зора над Балкана */
    .wr-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        border-radius: 10px;
    }
    /* искрите жарава над всичко */
    .wr-sparks {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        pointer-events: none;
    }
    .wr-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 13px;
    }
    /* жарава-медальонът „Л" */
    .wr-icon {
        flex-shrink: 0;
        width: 68px; height: 68px;
        border-radius: 50%;
        display: block;
        box-shadow:
            0 0 0 2px rgba(7,14,9,0.9),
            0 0 0 3.5px var(--haj-brass-dim),
            0 0 18px rgba(255,201,126,0.35),
            0 4px 8px rgba(0,0,0,0.5);
    }
    .wr-text { flex: 1; min-width: 0; }
    .wr-text h3 {
        font-family: var(--font-display);
        font-size: 21px;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: var(--haj-bone);
        line-height: 1.05;
    }
    .wr-live {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 5px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: var(--haj-ember-hi);
    }
    .wr-live .ember-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ffc97e, var(--haj-ember) 65%);
        box-shadow: 0 0 8px rgba(226,102,42,0.8);
    }
    .wr-live .lst { font-weight: 400; letter-spacing: 0.02em; color: rgba(186,196,170,0.95); text-transform: none; }
    /* месинговото копче ▶ */
    .wr-play {
        position: relative;
        flex-shrink: 0;
        width: 52px; height: 52px;
        border-radius: 50%;
        border: none;
        background:
            radial-gradient(circle at 68% 74%, rgba(255,235,170,0.18), transparent 42%),
            radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 38%, #b98f24 62%, #8a6a1a 88%, #6b5313);
        box-shadow:
            inset 0 1px 1px rgba(255,246,210,0.85),
            inset 0 -2px 3px rgba(60,40,8,0.55),
            inset 0 0 0 1px rgba(92,71,15,0.55),
            0 3px 8px rgba(0,0,0,0.55);
        color: #3a2508;
        font-size: 22px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .wr-play::before {
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(60,40,8,0.4), inset 0 1px 0 rgba(255,246,210,0.55);
    }
    .wr-play:active { transform: translateY(1px); }
    .wr-play i { text-shadow: 0 1px 0 rgba(255,240,190,0.55); margin-left: 2px; }
    .wg-radio.playing .wr-play i { margin-left: 0; }
    .wg-radio.playing .wr-play {
        box-shadow:
            inset 0 1px 1px rgba(255,246,210,0.85),
            inset 0 -2px 3px rgba(60,40,8,0.55),
            inset 0 0 0 1px rgba(92,71,15,0.55),
            0 0 14px rgba(255,201,126,0.45),
            0 3px 8px rgba(0,0,0,0.55);
    }
    /* шевичен ред — жив еквалайзер, когато радиото свири */
    .wr-shev {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 18px;
        margin: 9px 0 6px;
    }
    /* сега върви */
    .wr-now {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: baseline;
        gap: 9px;
    }
    .wr-now-label {
        flex-shrink: 0;
        font-size: 14px;
        font-style: italic;
        color: rgba(196,204,178,0.95);
    }
    .wr-song {
        font-family: var(--font-hand);
        font-size: 20px;
        color: #ffc97e;
        text-shadow: 0 1px 3px rgba(0,0,0,0.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* поздрав за ефира */
    .wr-greet {
        position: relative;
        z-index: 1;
        margin-top: 11px;
        padding-top: 10px;
        border-top: 1px solid rgba(207,166,45,0.18);
    }
    .wr-greet-head {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .wr-greet-label {
        font-size: 14px;
        font-style: italic;
        color: rgba(196,204,178,0.95);
    }
    /* печатите се местят винаги заедно при тесен екран */
    .wr-dj-pair { display: flex; gap: 8px; }
    /* печатите на водещите */
    .wr-dj {
        font-family: var(--font-display);
        font-size: 13.5px;
        letter-spacing: 0.09em;
        padding: 4px 13px 3px;
        border-radius: 12px;
        background: none;
        border: 1px solid rgba(207,166,45,0.35);
        color: rgba(190,199,172,0.95);
        cursor: pointer;
    }
    .wr-dj.active {
        background: radial-gradient(circle at 36% 30%, #b8473d, #93312b 60%, #6e2420);
        border-color: #a5821f;
        color: #f6ddce;
        box-shadow: inset 0 1px 2px rgba(255,180,150,0.35), inset 0 -1px 3px rgba(60,10,5,0.5), 0 1px 3px rgba(0,0,0,0.4);
        text-shadow: 0 -1px 1px rgba(60,10,5,0.7);
    }
    .wr-greet-row {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 8px;
    }
    /* листчето за поздрава */
    .wr-input {
        flex: 1;
        min-width: 0;
        height: 40px;
        padding: 4px 12px 2px;
        border: none;
        border-radius: 5px 7px 6px 5px;
        background:
            repeating-linear-gradient(180deg, transparent 0 24px, rgba(120,90,40,0.14) 24px 25px),
            linear-gradient(174deg, rgba(255,246,220,0.5), rgba(214,190,140,0.28) 70%),
            var(--haj-parchment);
        font-family: var(--font-hand);
        font-size: 18px;
        color: #38301d;
        box-shadow: inset 0 1px 3px rgba(90,60,20,0.35), 0 2px 4px rgba(0,0,0,0.35);
    }
    .wr-input::placeholder { color: #6f5f3c; }
    .wr-input:focus { outline: 2px solid rgba(207,166,45,0.5); }
    /* рогът — прати по глашатая */
    .wr-horn {
        position: relative;
        flex-shrink: 0;
        width: 44px; height: 44px;
        border-radius: 50%;
        border: none;
        background:
            radial-gradient(circle at 68% 74%, rgba(255,235,170,0.18), transparent 42%),
            radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 38%, #b98f24 62%, #8a6a1a 88%, #6b5313);
        box-shadow:
            inset 0 1px 1px rgba(255,246,210,0.85),
            inset 0 -2px 3px rgba(60,40,8,0.55),
            inset 0 0 0 1px rgba(92,71,15,0.55),
            0 3px 7px rgba(0,0,0,0.5);
        color: #3a2508;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .wr-horn::before {
        content: '';
        position: absolute;
        inset: 3.5px;
        border-radius: 50%;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(60,40,8,0.4), inset 0 1px 0 rgba(255,246,210,0.55);
    }
    .wr-horn:active { transform: translateY(1px); }
    .wr-horn svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(255,240,190,0.5)); }
    /* потвърждението */
    .wr-sent {
        display: none;
        margin-top: 9px;
        font-family: var(--font-hand);
        font-size: 17.5px;
        color: var(--haj-ember-hi);
        text-shadow: 0 1px 3px rgba(0,0,0,0.6);
        text-align: center;
    }
    .wg-radio.sent .wr-sent { display: block; }
    .wg-radio.sent .wr-greet-row, .wg-radio.sent .wr-greet-head { display: none; }

    /* ═══ ОБЩА РАМКА ЗА ШИРОКИТЕ ПАНЕЛИ ВЪВ ВЪРТЕЛЕЖКАТА ═══ */
    .wg-panel {
        position: relative;
        height: 100%;
        border-radius: 11px;
        padding: 15px 15px 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        background:
            radial-gradient(120% 90% at 20% 12%, rgba(255,201,126,0.07), transparent 55%),
            repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 4px),
            linear-gradient(168deg, #10231a, #0a1810 60%, #071009);
        border: 1px solid rgba(207,166,45,0.4);
        box-shadow:
            inset 0 0 0 3px rgba(7,14,9,0.9),
            inset 0 0 0 4px rgba(207,166,45,0.28),
            0 10px 24px rgba(0,0,0,0.45);
    }
    .wg-panel h3 {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: var(--haj-bone);
        line-height: 1.05;
    }

    /* ═══ МУЗИКА — дайрето от раклата ═══ */
    .wm-top { display: flex; align-items: center; gap: 13px; }
    .wm-daire { flex-shrink: 0; width: 66px; height: 66px; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); }
    .wm-daire svg { width: 100%; height: 100%; display: block; }
    .wm-text { flex: 1; min-width: 0; }
    .wm-track {
        font-family: var(--font-hand);
        font-size: 19px;
        color: #ffc97e;
        margin-top: 3px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.6);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wm-sub { font-size: 13px; font-style: italic; color: rgba(196,204,178,0.9); margin-top: 1px; }
    /* прогресът — гайтан с мънисто */
    .wm-progress { display: flex; align-items: center; gap: 9px; }
    .wm-time { font-family: var(--font-hand); font-size: 14.5px; color: rgba(196,204,178,0.95); }
    .wm-cord { position: relative; flex: 1; height: 18px; }
    .wm-cord svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .wm-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
    .wm-btn {
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(207,166,45,0.4);
        background: radial-gradient(circle at 35% 30%, rgba(207,166,45,0.22), rgba(14,21,15,0.4));
        color: var(--haj-brass);
        font-size: 15px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: inset 0 0 0 2px rgba(7,14,9,0.7), 0 2px 4px rgba(0,0,0,0.4);
    }
    .wm-btn:active { transform: translateY(1px); }
    .wm-play {
        width: 46px; height: 46px;
        border-radius: 50%;
        border: none;
        background:
            radial-gradient(circle at 68% 74%, rgba(255,235,170,0.18), transparent 42%),
            radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 38%, #b98f24 62%, #8a6a1a 88%, #6b5313);
        box-shadow:
            inset 0 1px 1px rgba(255,246,210,0.85),
            inset 0 -2px 3px rgba(60,40,8,0.55),
            inset 0 0 0 1px rgba(92,71,15,0.55),
            0 3px 8px rgba(0,0,0,0.55);
        color: #3a2508;
        font-size: 19px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .wm-play:active { transform: translateY(1px); }
    .wm-genre { display: flex; align-items: center; gap: 8px; justify-content: center; }
    .wm-genre-label { font-size: 13.5px; font-style: italic; color: rgba(196,204,178,0.95); }
    .wm-genre-btn {
        font-family: var(--font-display);
        font-size: 13px;
        letter-spacing: 0.07em;
        padding: 4px 12px 3px;
        border-radius: 4px;
        border: 1px solid rgba(207,166,45,0.4);
        background: linear-gradient(180deg, #3d2c1a, #2a1d10);
        color: var(--haj-bone);
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,220,160,0.14), 0 2px 4px rgba(0,0,0,0.4);
    }
    .wm-genre-btn i { font-size: 11px; color: var(--haj-brass); }

    /* ═══ ВРЕМЕ — прозорче към небето ═══ */
    .ww-top { display: flex; gap: 14px; align-items: stretch; }
    .ww-window {
        position: relative;
        flex-shrink: 0;
        width: 118px; height: 96px;
        padding: 7px;
        border-radius: 4px;
        background: linear-gradient(180deg, #5f4826, #46341c 60%, #392a15);
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.28), inset 0 -2px 3px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.5);
    }
    .ww-window canvas { display: block; width: 104px; height: 82px; border-radius: 2px; }
    /* кръстчето на прозореца */
    .ww-window::before {
        content: '';
        position: absolute;
        left: 7px; right: 7px; top: 50%;
        height: 3px; margin-top: -1.5px;
        background: linear-gradient(180deg, #5a4325, #3a2b16);
        box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .ww-window::after {
        content: '';
        position: absolute;
        top: 7px; bottom: 7px; left: 50%;
        width: 3px; margin-left: -1.5px;
        background: linear-gradient(90deg, #5a4325, #3a2b16);
        box-shadow: 1px 0 2px rgba(0,0,0,0.5);
    }
    .ww-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .ww-temp {
        font-family: var(--font-display);
        font-size: 38px;
        line-height: 1;
        color: var(--haj-bone);
        margin-top: 4px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    .ww-feels { font-size: 13px; font-style: italic; color: rgba(196,204,178,0.95); margin-top: 2px; }
    .ww-sunset {
        font-family: var(--font-hand);
        font-size: 15.5px;
        color: #ffc97e;
        margin-top: auto;
        text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }
    .ww-grid { display: flex; gap: 7px; }
    .ww-cell {
        flex: 1;
        text-align: center;
        padding: 7px 2px 6px;
        border-radius: 5px;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 7px),
            linear-gradient(180deg, #2b2013, #1d1509);
        border: 1px solid rgba(207,166,45,0.22);
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.12), 0 2px 4px rgba(0,0,0,0.35);
    }
    .ww-cell i { font-size: 15px; color: var(--haj-brass); }
    .ww-cell-label { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(196,204,178,0.85); margin-top: 3px; }
    .ww-cell-value { display: block; font-size: 13.5px; font-weight: 700; color: var(--haj-bone); margin-top: 1px; }
    .ww-smoke { display: flex; align-items: center; gap: 10px; }
    .ww-smoke-label { flex-shrink: 0; font-size: 13px; font-style: italic; color: rgba(196,204,178,0.95); }
    .ww-smoke-bar {
        position: relative;
        flex: 1;
        height: 7px;
        border-radius: 4px;
        background: linear-gradient(90deg, #3f6b3a, #93803a 45%, #b06a2a 70%, #93312b);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), 0 1px 0 rgba(240,205,130,0.12);
    }
    .ww-smoke-mark {
        position: absolute;
        top: 50%; left: 26%;
        width: 9px; height: 9px;
        transform: translate(-50%,-50%) rotate(45deg);
        background: var(--haj-bone);
        border: 1px solid #6d5817;
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    /* въртележка — гайтан с мъниста: активният слайд е месингово мънисто, другият възел */
    .carousel-dots { display: flex; justify-content: center; margin-top: 10px; }
    .gaitan-row { position: relative; width: 210px; height: 26px; }
    .gaitan-row .cord { position: absolute; inset: 0; width: 100%; height: 100%; }
    .dot {
        position: absolute; top: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }
    .dot svg { width: 20px; height: 20px; display: block; }
    .dot .on { display: none; }
    .dot.active .on { display: block; filter: drop-shadow(0 0 5px rgba(246,226,155,0.5)); }
    .dot.active .off { display: none; }
    .carousel-hint {
        text-align: center;
        font-family: var(--font-hand);
        font-size: 15.5px;
        color: rgba(168,179,154,0.9);
        margin-top: 7px;
        text-shadow: 0 1px 3px rgba(10,12,8,0.7);
    }

    /* ═══ СЕКЦИЯ „ОКОЛО ОГЪНЯ" — лични пряпорци ═══
       Правило: до двама — големи (.unit-l); от трима — среден размер (.unit-m), по три на ред */
    .rail {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 10px;
    }
    .rail .unit { text-align: center; }
    .unit-l { width: calc(50% - 5px); max-width: 176px; }
    .unit-m { width: calc(33.33% - 7px); max-width: 120px; }
    .rail-hint { text-align: center; font-size: 10.5px; font-style: italic; color: rgba(168,179,154,0.65); margin-top: 14px; }

    .ban-obj { position: relative; }
    .ban-rod {
        position: relative;
        height: 9px;
        margin: 0 -6px;
        border-radius: 4.5px;
        background: linear-gradient(180deg, #6b5028, #4a3720 55%, #392a15);
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.35), 0 2px 3px rgba(0,0,0,0.5);
        z-index: 2;
    }
    .ban-rod::before, .ban-rod::after {
        content: '';
        position: absolute;
        top: -2.5px;
        width: 13px; height: 13px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #7a5c2e, #453218 65%, #33250f);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(240,205,130,0.25);
    }
    .ban-rod::before { left: -7px; }
    .ban-rod::after { right: -7px; }
    .ban-loop {
        position: absolute;
        top: -2px;
        width: 12px; height: 19px;
        background: linear-gradient(90deg, #6e2822, #93312b 50%, #6e2822);
        border-radius: 2px;
        box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4);
        z-index: 1;
    }
    .ban-wrap {
        margin: -4px 4px 0;
        filter: drop-shadow(0 12px 16px rgba(0,0,0,0.55));
    }
    .ban-cloth {
        position: relative;
        padding: 16px 13px 46px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 24px), 0 100%);
        background:
            linear-gradient(90deg, rgba(0,0,0,0.18), transparent 16% 30%, rgba(0,0,0,0.09) 45% 55%, transparent 70% 84%, rgba(0,0,0,0.20)),
            radial-gradient(120% 60% at 50% -10%, rgba(240,229,204,0.05), transparent 60%),
            linear-gradient(178deg, #263b2c, #1d2f22 55%, #17261b);
    }
    /* тъкан върху всичко — платното е едно цяло */
    .ban-weave {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 3;
        background:
            repeating-linear-gradient(0deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px);
    }
    .kenar {
        position: absolute;
        top: 4px; bottom: 4px;
        width: 5px;
        background: repeating-linear-gradient(180deg,
            #7e2b24 0 7px, #5f221d 7px 9px,
            #a5821f 9px 12px, #5f221d 12px 14px);
        opacity: 0.85;
        border-radius: 2px;
    }
    .kenar.L { left: 5px; }
    .kenar.R { right: 5px; }
    /* апликираният дух — цял, с подгънат светъл ръб */
    .ban-art {
        position: relative;
        height: 138px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .ban-art img {
        max-width: 92%;
        max-height: 100%;
        object-fit: contain;
        filter:
            drop-shadow(0 0 0.7px rgba(240,229,204,0.95))
            drop-shadow(0 0 1.2px rgba(240,229,204,0.45))
            drop-shadow(0 4px 7px rgba(0,0,0,0.5));
    }
    .ban-shev { display: block; width: 74%; height: 9px; margin: 9px auto 0; }
    /* ушита лента с името */
    .ban-strip {
        position: relative;
        margin: 8px auto 0;
        width: 80%;
        padding: 3px 10px 2px;
        clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
        background: linear-gradient(180deg, #efe0bd, #dcc99c 65%, #c4ae7e);
        font-family: var(--font-display);
        font-size: 15.5px;
        letter-spacing: 0.07em;
        color: #33230b;
        text-shadow: 0 1px 0 rgba(255,246,220,0.6);
    }
    .ban-time {
        margin-top: 6px;
        font-family: var(--font-hand);
        font-size: 16px;
        color: #d9b34a;
        text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    }
    /* пискюли на върховете на опашката */
    .tas {
        position: absolute;
        bottom: -14px;
        width: 9px; height: 15px;
        border-radius: 3px 3px 5px 5px;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px),
            linear-gradient(180deg, #a5821f, #93312b 45%, #6e2822);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    .tas::before {
        content: '';
        position: absolute;
        top: -3px; left: 50%;
        transform: translateX(-50%);
        width: 5px; height: 5px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, #8d711d 75%);
    }
    .tas.L { left: 6px; }
    .tas.R { right: 6px; }

    /* среден размер — от трима нагоре */
    .unit-m .ban-rod { height: 7px; margin: 0 -4px; }
    .unit-m .ban-rod::before, .unit-m .ban-rod::after { width: 10px; height: 10px; top: -1.5px; }
    .unit-m .ban-rod::before { left: -5px; }
    .unit-m .ban-rod::after { right: -5px; }
    .unit-m .ban-loop { width: 9px; height: 15px; }
    .unit-m .ban-wrap { margin: -3px 3px 0; filter: drop-shadow(0 9px 12px rgba(0,0,0,0.55)); }
    .unit-m .ban-cloth {
        padding: 10px 8px 32px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
    }
    .unit-m .kenar { width: 4px; top: 3px; bottom: 3px; }
    .unit-m .kenar.L { left: 3.5px; }
    .unit-m .kenar.R { right: 3.5px; }
    .unit-m .ban-art { height: 92px; }
    .unit-m .ban-shev { height: 7px; margin: 6px auto 0; }
    .unit-m .ban-strip { font-size: 12.5px; width: 88%; padding: 2px 7px 1px; margin-top: 6px; }
    .unit-m .ban-time { font-size: 13px; margin-top: 4px; }
    .unit-m .tas { width: 7px; height: 12px; bottom: -11px; }
    .unit-m .tas.L { left: 4px; }
    .unit-m .tas.R { right: 4px; }

    /* ═══ ПЛАНОВЕ ЗА ДНЕС — дъската с хаберите + гобленът ═══ */
    .hab-init {
        flex-shrink: 0;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display);
        font-size: 18px;
        color: var(--haj-brass);
        background: linear-gradient(160deg, #31281e, #191309);
        border: 1px solid #8d711d;
        box-shadow: inset 0 0 0 2px rgba(14,10,4,0.85), 0 2px 4px rgba(0,0,0,0.35);
    }
    .hab-name {
        font-family: var(--font-hand);
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #2c1f10;
    }
    .hab-empty-title {
        font-family: var(--font-hand);
        font-size: 25px;
        font-weight: 700;
        color: var(--haj-bone);
        transform: rotate(-1.2deg);
    }
    .hab-empty-sub {
        margin-top: 3px;
        font-size: 14px;
        font-style: italic;
        color: var(--haj-smoke);
    }
    /* ═══════════ ВАРИАНТ Б — БОГАТАТА ДЪСКА ═══════════ */
    .board2 {
        position: relative;
        padding: 11px;
        border-radius: 7px;
        background:
            radial-gradient(circle 2.5px at 13px 13px, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            radial-gradient(circle 2.5px at calc(100% - 13px) 13px, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            radial-gradient(circle 2.5px at 13px calc(100% - 13px), #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            radial-gradient(circle 2.5px at calc(100% - 13px) calc(100% - 13px), #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 9px),
            repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 7px),
            linear-gradient(172deg, #3a2a16, #241a0e);
        border: 1px solid rgba(0,0,0,0.7);
        box-shadow: 0 10px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(240,220,170,0.08);
    }
    .board2-in {
        position: relative;
        padding: 20px 12px 16px;
        border-radius: 3px;
        background:
            repeating-linear-gradient(45deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 4px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
            linear-gradient(174deg, #22331f, #17240f);
        box-shadow: inset 0 0 26px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.6);
    }
    /* шевица по горния вътрешен ръб на сукното */
    .board2-in::before {
        content: '';
        position: absolute;
        top: 7px; left: 12px; right: 12px;
        height: 6px;
        opacity: 0.45;
        background:
            repeating-linear-gradient(45deg, #93312b 0 2px, transparent 2px 8px),
            repeating-linear-gradient(-45deg, #93803a 0 2px, transparent 2px 8px);
    }

    /* ── бележка основа ── */
    .hb2 {
        --ken: #93803a;
        position: relative;
        margin: 14px auto 0;
        max-width: 356px;
        padding: 12px 14px 12px 30px;
        background:
            radial-gradient(circle 60px at 85% 20%, rgba(90,74,52,0.10), transparent),
            radial-gradient(circle 40px at 12% 85%, rgba(90,74,52,0.08), transparent),
            linear-gradient(174deg, #ecdfc0, #ddcba2);
        color: var(--ink);
        border: 1px solid rgba(90,70,40,0.55);
        border-radius: 2px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.5), inset 0 0 24px rgba(120,95,55,0.15);
    }
    .hb2:first-child { margin-top: 6px; }
    .hb2::before {
        content: '';
        position: absolute;
        top: -5px; left: 50%;
        transform: translateX(-50%);
        width: 11px; height: 11px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f2dc7d, #cfa62d 55%, #6a5514);
        box-shadow: 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(0,0,0,0.3);
        z-index: 2;
    }
    /* кенарът — везана ивица в цвета на статуса */
    .hb2 .ken {
        position: absolute;
        left: 8px; top: 6px; bottom: 6px;
        width: 8px;
        opacity: 0.55;
        border-left: 1px solid var(--ken);
        border-right: 1px solid var(--ken);
        background:
            repeating-linear-gradient(45deg, var(--ken) 0 2px, transparent 2px 7px),
            repeating-linear-gradient(-45deg, var(--ken) 0 2px, transparent 2px 7px);
    }
    .hb2-head { display: flex; align-items: center; gap: 11px; }
    .hb2-status {
        display: flex; align-items: center; gap: 6px;
        margin-top: 3px;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .hb2-status i { font-size: 14px; }
    .hb2-date {
        position: absolute;
        font-family: var(--font-hand);
        font-size: 13.5px;
        color: rgba(44,31,16,0.55);
        transform: rotate(-2deg);
    }
    .hb2-date.tr { top: 7px; right: 12px; }
    .hb2-date.bl { bottom: 5px; left: 30px; }
    .hb2-date.br { bottom: 5px; right: 12px; }

    /* ── НА ПЪТ: конникът препуска към навеса ── */
    .hb2-coming { --ken: #b3562a; }
    .hb2-coming .hb2-status { color: #8c4116; }
    .hb2-scene { margin-top: 4px; }
    .hb2-scene svg { display: block; width: 100%; height: 60px; }

    /* ── ПЛАНИРАНО: билет с восъчен печат-час ── */
    .hb2-later {
        --ken: #cfa62d;
        padding-right: 86px;
        -webkit-mask-image: radial-gradient(circle 4px at 6px 50%, transparent 4px, #000 4.5px), linear-gradient(#000, #000);
        -webkit-mask-size: 12px 20px, calc(100% - 12px) 100%;
        -webkit-mask-repeat: repeat-y, no-repeat;
        -webkit-mask-position: left center, right center;
        mask-image: radial-gradient(circle 4px at 6px 50%, transparent 4px, #000 4.5px), linear-gradient(#000, #000);
        mask-size: 12px 20px, calc(100% - 12px) 100%;
        mask-repeat: repeat-y, no-repeat;
        mask-position: left center, right center;
    }
    .hb2-later .hb2-status { color: #6e4a12; }
    .hb2-seal {
        position: absolute;
        right: 12px; top: 13px;
        width: 56px; height: 56px;
        display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 36% 30%, #b0463c, #93312b 52%, #5e1d18 95%);
        border-radius: 46% 54% 50% 50% / 55% 45% 58% 42%;
        box-shadow: inset 0 0 0 3px rgba(94,29,24,0.55), inset 2px 3px 4px rgba(255,160,140,0.25), 0 3px 6px rgba(0,0,0,0.4);
        transform: rotate(-8deg);
    }
    .hb2-seal b {
        font-family: var(--font-display);
        font-size: 15px;
        letter-spacing: 0.04em;
        color: rgba(240,220,200,0.95);
        text-shadow: 0 -1px 1px rgba(60,10,8,0.9), 0 1px 1px rgba(255,180,160,0.3);
    }
    .hb2-seal-cap {
        position: absolute;
        right: 14px; top: 71px;
        font-family: var(--font-hand);
        font-size: 14px;
        color: rgba(58,42,24,0.7);
        transform: rotate(-3deg);
    }
    .hb2-count {
        margin: 10px 2px 0;
        display: inline-block;
        padding: 6px 12px 5px;
        border: 1.5px solid rgba(147,49,43,0.55);
        border-radius: 4px;
        transform: rotate(-0.8deg);
        background: rgba(147,49,43,0.05);
    }
    .hb2-count-label { font-size: 10px; letter-spacing: 0.22em; font-weight: 700; color: rgba(147,49,43,0.75); }
    .hb2-count-time { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.08em; color: var(--haj-blood); line-height: 1.05; }
    .hb2-weather {
        display: inline-flex; align-items: center; gap: 5px;
        margin-left: 9px;
        padding: 5px 9px;
        border: 1px solid rgba(90,70,40,0.45);
        border-radius: 5px;
        background: rgba(90,70,40,0.07);
        color: #6e4a12;
        vertical-align: bottom;
    }
    .hb2-weather i { font-size: 17px; }
    .hb2-weather span { font-size: 12.5px; font-weight: 700; }

    /* ── ЧУДЯ СЕ: жълтицата на ези-тура ── */
    .hb2-maybe {
        --ken: #7c6a44;
        padding-right: 66px;
        padding-bottom: 24px;
        transform: rotate(1.4deg);
        background:
            radial-gradient(ellipse 26px 16px at 78% 84%, rgba(58,42,24,0.14), transparent 70%),
            radial-gradient(circle 60px at 85% 20%, rgba(90,74,52,0.10), transparent),
            linear-gradient(177deg, #e7d8b6, #d8c69e);
    }
    .hb2-maybe .hb2-status { color: #6b5c33; }
    .hb2-coin {
        position: absolute;
        right: 16px; top: 50%;
        width: 38px; height: 38px;
        transform: translateY(-58%) rotate(14deg);
        filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35));
    }
    .hb2-coin svg { display: block; width: 100%; height: 100%; }
    .hb2-qmark {
        position: absolute;
        right: 24px; bottom: -8px;
        font-family: var(--font-hand);
        font-size: 44px;
        font-weight: 700;
        color: rgba(58,42,24,0.16);
        transform: rotate(10deg);
        pointer-events: none;
    }
    .hb2-msg {
        margin: 8px 2px 0;
        padding-top: 6px;
        border-top: 1px solid rgba(90,70,40,0.3);
        font-family: var(--font-hand);
        font-size: 17px;
        color: #4a3620;
        transform: rotate(-0.6deg);
    }

    /* ── НЕ ИДВАМ: траурна лента през ъгъла ── */
    .hb2-no { --ken: #93312b; padding-bottom: 24px; filter: saturate(0.82) brightness(0.97); }
    .hb2-no .hb2-status { color: #7c2b24; }
    .hb2-no .strike { position: relative; }
    .hb2-no .strike::after {
        content: '';
        position: absolute;
        left: -3px; right: -3px; top: 52%;
        height: 2px;
        background: rgba(147,49,43,0.75);
        transform: rotate(-2deg);
        border-radius: 1px;
    }
    .hb2-bandwrap {
        position: absolute; inset: 0;
        overflow: hidden;
        border-radius: 2px;
        pointer-events: none;
    }
    .hb2-band {
        position: absolute;
        top: 13px; right: -36px;
        transform: rotate(26deg);
        padding: 4px 42px;
        background: linear-gradient(180deg, #332018, #20130d);
        color: #d8a79a;
        font-size: 10px;
        letter-spacing: 0.28em;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0,0,0,0.45);
    }

    /* ── ДРУГАДЕ: мини военна карта ── */
    .hb2-else { --ken: #33573c; padding-right: 106px; padding-bottom: 24px; }
    .hb2-else .hb2-status { color: #55603c; }
    .hb2-map {
        position: absolute;
        right: 10px; top: 8px; bottom: 8px;
        width: 92px;
        border: 1px solid rgba(90,70,40,0.45);
        border-radius: 2px;
        background: rgba(90,70,40,0.06);
        overflow: hidden;
    }
    .hb2-map svg { display: block; width: 100%; height: 100%; }

    /* ═══ ГОБЛЕНЪТ — кръстат бод върху платно ═══ */
    .goblen-wrap {
        position: relative;
        margin: 4px 6px 14px;
        transform: rotate(-0.5deg);
        filter: drop-shadow(0 7px 12px rgba(0,0,0,0.55));
    }
    .goblen-wrap::before, .goblen-wrap::after {
        content: '';
        position: absolute;
        top: -4px;
        width: 11px; height: 11px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f2dc7d, #cfa62d 55%, #6a5514);
        box-shadow: 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(0,0,0,0.3);
        z-index: 2;
    }
    .goblen-wrap::before { left: 12px; }
    .goblen-wrap::after { right: 12px; }
    .goblen-wrap canvas { display: block; width: 100%; border-radius: 2px; }

    /* гобленът като самостоятелен елемент — виси на летва */
    .goblen-solo { margin: 8px 2px 0; }
    .goblen-rod {
        position: relative;
        height: 8px;
        margin: 0 5px;
        border-radius: 4px;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 7px),
            linear-gradient(180deg, #4a3724, #2a1d0e);
        box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(240,220,170,0.12);
        z-index: 2;
    }
    .goblen-rod::before, .goblen-rod::after {
        content: '';
        position: absolute;
        top: -1.5px;
        width: 11px; height: 11px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, #cfa62d 55%, #7a5f16);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    .goblen-rod::before { left: -5px; }
    .goblen-rod::after { right: -5px; }
    .goblen-cloth { position: relative; }
    .goblen-cloth canvas {
        display: block;
        width: 100%;
        margin-top: -2px;
        border-radius: 0 0 2px 2px;
        filter: drop-shadow(0 9px 13px rgba(0,0,0,0.5));
    }
    .goblen-text {
        position: absolute;
        left: 0; right: 0;
        bottom: 10%;
        text-align: center;
        pointer-events: none;
    }
    .goblen-text .hab-empty-sub { margin-top: 1px; font-size: 13px; }

    /* ── празната богата дъска ── */
    .hb2-empty { text-align: center; padding: 20px 0 12px; }

    .goblen-cap {
        margin: 18px 4px 6px;
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: var(--haj-smoke);
        transform: rotate(-1deg);
    }

    /* ═══ ТАБОВЕ — механски табели на греда ═══ */
    .tabs-rail {
        height: 9px;
        margin-top: 26px;
        border-radius: 4px;
        background:
            radial-gradient(circle 2px at 12px 50%, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            radial-gradient(circle 2px at calc(100% - 12px) 50%, #d9b23e 0 45%, #6a5514 55% 70%, transparent 75%),
            repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 7px),
            linear-gradient(180deg, #3d2c17, #241a0e);
        border: 1px solid rgba(0,0,0,0.6);
        box-shadow: 0 2px 4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(240,220,170,0.1);
    }
    .tabs-row { display: flex; gap: 16px; padding: 0 10px; }
    .tab {
        position: relative;
        flex: 1;
        margin-top: 13px;
        padding: 12px 6px 11px;
        border: 1px solid rgba(0,0,0,0.6);
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--haj-smoke);
        background:
            repeating-linear-gradient(91deg, rgba(0,0,0,0.13) 0 2px, transparent 2px 6px),
            repeating-linear-gradient(88deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 9px),
            linear-gradient(175deg, #312415, #221910);
        box-shadow: inset 0 0 0 1px rgba(207,166,45,0.14), inset 0 1px 0 rgba(240,220,170,0.06), 0 6px 12px rgba(0,0,0,0.4);
        transform-origin: 50% -13px;
    }
    .tab i { margin-right: 6px; font-size: 15px; }
    .tab svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
    /* ремъчетата към гредата */
    .tab::before, .tab::after {
        content: '';
        position: absolute;
        top: -13px;
        width: 7px; height: 15px;
        border-radius: 2px;
        background: linear-gradient(90deg, #3a2b18, #241a0e);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 1px 0 0 rgba(240,229,204,0.07);
    }
    .tab::before { left: 17%; }
    .tab::after { right: 17%; }
    .tab.tilt-r { transform: rotate(1.3deg); }
    .tab.dim { filter: brightness(0.78) saturate(0.85); }
    .tab.active {
        color: var(--haj-brass);
        box-shadow: inset 0 0 0 1px rgba(207,166,45,0.45), inset 0 0 14px rgba(226,102,42,0.10), inset 0 1px 0 rgba(240,220,170,0.1), 0 6px 12px rgba(0,0,0,0.4);
    }
    .tab.active i, .tab.active svg { color: var(--haj-ember-hi); }

    /* ═══ СТАТУС — знамената на четата ═══ */
    .status-btns { display: flex; flex-direction: column; gap: 14px; margin: 15px 0 0 7px; }
    .flag-unit { position: relative; }
    .flag-pole {
        position: absolute;
        left: -7px; top: -8px; bottom: -8px;
        width: 7px;
        border-radius: 3px;
        background: linear-gradient(90deg, #4a3a24, #2a1e10 70%);
        box-shadow: 1px 0 2px rgba(0,0,0,0.5), inset 1px 0 0 rgba(240,220,170,0.15);
        z-index: 1;
    }
    .flag-pole::before {
        /* месингов връх — пика */
        content: '';
        position: absolute;
        top: -11px; left: 50%;
        transform: translateX(-50%);
        width: 11px; height: 13px;
        background: radial-gradient(circle at 35% 28%, #e9c754, #cfa62d 55%, #7a5f16);
        clip-path: polygon(50% 0, 100% 62%, 78% 100%, 22% 100%, 0 62%);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    .flag-btn {
        display: block;
        width: 100%;
        padding: 2px;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--font-body);
        clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%);
        background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65));
        filter: drop-shadow(0 5px 9px rgba(0,0,0,0.4));
    }
    .flag-cloth {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 14px 32px 14px 15px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
        background:
            repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 4px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
            linear-gradient(172deg, #253524, #1a2718);
        color: var(--haj-bone);
    }
    .flag-medal {
        position: relative;
        flex-shrink: 0;
        width: 38px; height: 38px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 17px;
        background:
            radial-gradient(circle at 34% 28%, rgba(240,205,130,0.18), transparent 55%),
            linear-gradient(160deg, #1d2b20, #131f16);
        border: 1px solid var(--haj-brass-dim);
        box-shadow: inset 0 0 0 2.5px rgba(14,21,15,0.9), inset 0 0 0 3.5px rgba(207,166,45,0.35), 0 3px 6px rgba(0,0,0,0.45);
        color: var(--haj-brass);
    }
    .flag-medal::before {
        /* лентичка към кола */
        content: '';
        position: absolute;
        top: 6px; left: -12px;
        width: 12px; height: 7px;
        background: linear-gradient(180deg, #a84139, #6e241f);
        box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .flag-medal svg { width: 22px; height: 24px; display: block; }
    .flag-medal svg.konnik { width: 25px; height: 25px; }
    .flag-text { font-size: 17px; font-weight: 700; letter-spacing: 0.03em; flex: 1; }
    .flag-note {
        font-family: var(--font-hand);
        font-size: 15.5px;
        font-weight: 500;
        color: #f5e9c8;
        text-shadow: 0 1px 2px rgba(60,10,8,0.5);
        transform: rotate(-3deg);
        margin-right: 2px;
    }
    /* На път съм — жарава */
    .fl-coming .flag-cloth {
        background:
            repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 4px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
            linear-gradient(172deg, #33261a, #241a12);
    }
    .fl-coming .flag-medal { color: var(--haj-ember-hi); }
    /* активното знаме — старият трибагреник */
    .flag-unit.active .flag-btn { background: linear-gradient(160deg, #e9c754, #cfa62d 40%, #8d711d); }
    .flag-unit.active .flag-cloth {
        background:
            radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(20,16,8,0.30)),
            repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 4px),
            repeating-linear-gradient(-45deg, rgba(60,45,20,0.05) 0 1px, transparent 1px 4px),
            linear-gradient(180deg,
                #e3d5b4 0%, #ddcda9 32%,
                #31543a 32%, #29482f 66%,
                #94382e 66%, #822b23 100%);
    }
    .flag-unit.active .flag-text { color: #f0e5cc; text-shadow: 0 1px 2px rgba(10,20,10,0.55); }
    .flag-unit.active .flag-pole { background: linear-gradient(90deg, #5c4930, #332513 70%); }
    .flag-unit.active .flag-medal { border-color: var(--haj-brass); }

    /* малките — нашивки с ширит */
    .status-btns-sm { display: flex; gap: 10px; margin: 16px 0 0 7px; }
    .status-btn-sm {
        flex: 1;
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 10px 4px;
        font-family: var(--font-body);
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0.6);
        outline: 1px solid rgba(207,166,45,0.22);
        outline-offset: -4px;
        border-radius: 3px;
        background:
            repeating-linear-gradient(45deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 4px),
            linear-gradient(175deg, #202f1e, #172315);
        box-shadow: 0 3px 6px rgba(0,0,0,0.35);
    }
    .btn-maybe    { color: var(--haj-smoke); }
    .btn-notcoming{ color: #d07a6e; }
    .btn-elsewhere{ color: var(--haj-brass); }
    /* „Промени статуса" — вторично действие, изниква само при вече зададенъ статусъ */
    .status-change {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        margin: 16px auto 2px; padding: 8px 20px;
        font-family: var(--font-hand); font-size: 17px;
        color: var(--haj-brass);
        background: linear-gradient(175deg, rgba(38,28,17,0.6), rgba(23,17,10,0.6));
        border: 1px solid rgba(207,166,45,0.35);
        border-radius: 20px;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(240,229,204,0.06), 0 2px 5px rgba(0,0,0,0.35);
        -webkit-tap-highlight-color: transparent;
    }
    .status-change i { font-size: 15px; }
    .status-change:active { transform: translateY(1px); color: var(--haj-ember-hi); }
    /* „Ти си на Навеса" — заглавие над единствения бутонъ за напускане */
    .status-here-note {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin: 15px 0 2px;
        font-family: var(--font-display); font-size: 18px; color: var(--haj-bone);
    }
    .status-here-note i { color: var(--haj-ember-hi); font-size: 18px; }
    /* компактна карта „текущъ статусъ" — вмѣсто пикера при зададенъ планъ */
    .status-set {
        display: flex; align-items: center; gap: 14px;
        margin: 15px 7px 0; padding: 13px 16px;
        border-radius: 8px;
        border: 1px solid rgba(207,166,45,0.3);
        background:
            linear-gradient(170deg, rgba(51,87,60,0.4), rgba(27,42,30,0) 55%),
            repeating-linear-gradient(45deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 5px),
            var(--haj-moss);
        box-shadow: inset 0 1px 0 rgba(240,229,204,0.05), 0 5px 12px rgba(0,0,0,0.3);
    }
    .status-set-medal {
        flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 34% 28%, #2b3b2b, #16231a 70%);
        border: 1px solid rgba(207,166,45,0.4);
        box-shadow: inset 0 1px 2px rgba(240,229,204,0.1), 0 2px 4px rgba(0,0,0,0.4);
    }
    .status-set-medal i {
        font-size: 23px;
        background: linear-gradient(172deg, #f7e491, #e9c754 40%, #cfa62d 65%, #7a5f16);
        -webkit-background-clip: text; background-clip: text; color: transparent;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    }
    .status-set-body { flex: 1; min-width: 0; }
    .status-set-cap { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--haj-smoke); }
    .status-set-label { font-family: var(--font-display); font-size: 20px; color: var(--haj-bone); line-height: 1.15; margin-top: 1px; }
    .status-set-sub { font-family: var(--font-hand); font-size: 16px; color: var(--haj-brass); margin-top: 2px; }

    /* ═══ ЗОВ ОТ НАВЕСА — лавицата с пушката и предметите ═══ */
    .zn-wrap { position: relative; margin-top: 62px; }
    /* кремъклийката над гредата — рисувана на части: орех, стомана, месинг */
    .zn-pushka {
        position: absolute;
        top: -40px;
        left: 50%;
        width: 250px; height: 37px;
        transform: translateX(-53%);
        pointer-events: none;
        z-index: 1;
        filter: drop-shadow(0 3px 4px rgba(0,0,0,0.55));
    }
    /* предметите на лавицата */
    .zn-obj { position: absolute; pointer-events: none; }
    .zn-rog     { top: -23px; left: 2px;  width: 44px; height: 24px; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
    .zn-patroni { top: -18px; left: 50px; width: 36px; height: 19px; z-index: 4; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
    .zn-snimka  { top: -49px; right: 8px; width: 48px; height: 51px; z-index: 4; transform: rotate(3.5deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }
    .zn-kitka   { top: -37px; left: calc(24% - 9px); width: 20px; height: 17px; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
    /* кожените гайки, които я държат за гредата */
    .zn-strap {
        position: absolute;
        top: -26px;
        width: 10px; height: 30px;
        border-radius: 5px;
        background: linear-gradient(90deg, #1c1208, #3d2c18 45%, #17100a);
        box-shadow:
            inset 0 1px 0 rgba(240,205,130,0.22),
            inset -1px 0 1px rgba(0,0,0,0.6),
            0 1px 3px rgba(0,0,0,0.6);
        z-index: 3;
    }
    .zn-beam {
        position: relative;
        height: 15px;
        margin: 0 2px;
        border-radius: 3px;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,0.09) 0 2px, transparent 2px 30px),
            linear-gradient(180deg, #5f4826, #46341c 60%, #392a15);
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.28), 0 3px 5px rgba(0,0,0,0.45);
        z-index: 2;
    }
    .zn-beam .spare-nail {
        position: absolute;
        right: 11%;
        top: 50%;
        transform: translateY(-50%);
        width: 11px; height: 11px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, var(--haj-brass) 55%, #6d5817);
        border: 1px solid #4d3f10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.45);
    }
    .zn-add {
        display: block;
        margin: 7px 3% 0 auto;
        font-family: var(--font-hand);
        font-size: 15px;
        color: var(--haj-smoke);
        background: none;
        border: none;
        cursor: pointer;
        text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }
    .zn-add b { color: var(--haj-brass); font-size: 17px; }
    .zn-note {
        position: relative;
        width: 88%;
        margin-top: 10px;
        filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5));
    }
    .zn-note.n1 { margin-left: 2%; transform: rotate(-0.9deg); }
    .zn-note.n2 { margin-left: 10%; transform: rotate(0.7deg); margin-top: 16px; }
    .zn-note::before {
        content: '';
        position: absolute;
        top: -7px; left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, var(--haj-brass) 55%, #6d5817);
        border: 1px solid #4d3f10;
        box-shadow: 0 3px 5px rgba(0,0,0,0.45);
    }
    .zn-paper {
        background:
            repeating-linear-gradient(180deg, transparent 0 24px, rgba(120,90,40,0.13) 24px 25px),
            linear-gradient(174deg, rgba(255,246,220,0.5), rgba(214,190,140,0.25) 60%, rgba(190,160,110,0.3)),
            var(--haj-parchment);
        color: #2f2718;
        padding: 13px 15px 11px;
        clip-path: polygon(0% 5%, 3% 1%, 9% 3%, 15% 0%, 22% 2%, 29% 1%, 36% 3%, 44% 1%, 51% 2%, 59% 0%, 66% 2%, 73% 1%, 80% 3%, 87% 1%, 94% 2%, 98% 0%, 100% 7%, 99% 17%, 100% 29%, 99% 43%, 100% 56%, 99% 69%, 100% 81%, 99% 92%, 97% 99%, 90% 97%, 82% 100%, 74% 98%, 66% 100%, 57% 98%, 49% 100%, 41% 98%, 33% 100%, 25% 98%, 17% 100%, 9% 98%, 3% 100%, 1% 92%, 2% 81%, 0% 69%, 1% 56%, 0% 44%, 1% 32%, 0% 19%, 1% 10%);
    }
    .zn-note.n2 .zn-paper {
        background:
            radial-gradient(circle 22px at 84% 76%, transparent 14px, rgba(140,100,55,0.16) 15px 17px, transparent 18px),
            repeating-linear-gradient(180deg, transparent 0 24px, rgba(120,90,40,0.13) 24px 25px),
            linear-gradient(174deg, rgba(255,246,220,0.5), rgba(214,190,140,0.25) 60%, rgba(190,160,110,0.3)),
            var(--haj-parchment);
    }
    .zn-item {
        font-family: var(--font-hand);
        font-size: 21px;
        line-height: 1.1;
        color: #38301d;
    }
    .zn-meta {
        font-size: 11.5px;
        font-style: italic;
        color: #7a6a45;
        margin-top: 3px;
    }
    .zn-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        margin-top: 8px;
    }
    .zn-claim {
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 0.03em;
        color: #241c07;
        padding: 5px 13px 4px;
        border: none;
        border-radius: 4px;
        background: linear-gradient(180deg, #e9c754, #b98f24 60%, #8d711d);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,240,190,0.6), inset 0 -1px 0 rgba(0,0,0,0.25);
        cursor: pointer;
    }
    .zn-claim:active { transform: translateY(1px); }
    .zn-claimed {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-hand);
        font-size: 16px;
        color: var(--haj-blood);
    }
    .zn-seal {
        position: relative;
        width: 32px; height: 32px;
        border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
        background: radial-gradient(circle at 36% 30%, #b8473d, #93312b 55%, #6e2420 85%);
        box-shadow:
            inset 0 2px 3px rgba(255,180,150,0.35),
            inset 0 -2px 4px rgba(60,10,5,0.5),
            0 2px 4px rgba(0,0,0,0.4);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .zn-seal::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1.2px rgba(255,190,160,0.4), inset 0 1px 2px rgba(60,10,5,0.6);
    }
    .zn-seal span {
        font-family: var(--font-display);
        font-size: 15px;
        color: #f3d8c8;
        text-shadow: 0 -1px 1px rgba(60,10,5,0.8);
    }
    .zn-streak {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 18px;
        font-family: var(--font-hand);
        font-size: 17px;
        color: var(--haj-ember-hi);
        text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    }
    .zn-streak i {
        font-size: 16px;
        color: var(--haj-ember);
        filter: drop-shadow(0 0 6px rgba(226,102,42,0.6));
    }

    /* ═══ ДНЕВЕН ЗОВ — пергаментова бележка с накъсан ръб ═══ */
    .zov {
        position: relative;
        margin-top: 28px;
        transform: rotate(-0.7deg);
        filter: drop-shadow(0 12px 18px rgba(0,0,0,0.5));
    }
    .zov-paper {
        position: relative;
        background:
            radial-gradient(circle 26px at 86% 14%, transparent 17px, rgba(140,100,55,0.16) 18px 20px, transparent 21px),
            repeating-linear-gradient(180deg, transparent 0 25px, rgba(120,90,40,0.13) 25px 26px),
            linear-gradient(174deg, rgba(255,246,220,0.5), rgba(214,190,140,0.25) 60%, rgba(190,160,110,0.3)),
            var(--haj-parchment);
        color: #2f2718;
        padding: 18px 18px 15px;
        clip-path: polygon(0% 5%, 3% 1%, 9% 3%, 15% 0%, 22% 2%, 29% 1%, 36% 3%, 44% 1%, 51% 2%, 59% 0%, 66% 2%, 73% 1%, 80% 3%, 87% 1%, 94% 2%, 98% 0%, 100% 7%, 99% 17%, 100% 29%, 99% 43%, 100% 56%, 99% 69%, 100% 81%, 99% 92%, 97% 99%, 90% 97%, 82% 100%, 74% 98%, 66% 100%, 57% 98%, 49% 100%, 41% 98%, 33% 100%, 25% 98%, 17% 100%, 9% 98%, 3% 100%, 1% 92%, 2% 81%, 0% 69%, 1% 56%, 0% 44%, 1% 32%, 0% 19%, 1% 10%);
    }
    .zov::before {
        content: '';
        position: absolute;
        top: -8px; left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: 15px; height: 15px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, var(--haj-brass) 55%, #6d5817);
        border: 1px solid #4d3f10;
        box-shadow: 0 3px 5px rgba(0,0,0,0.45);
    }
    /* лъвът на дружината — воден знак върху пергамента */
    .zov-lion {
        position: absolute;
        right: 6px; bottom: -8px;
        height: 94%;
        aspect-ratio: 373.5 / 424.5;
        opacity: 0.14;
        transform: rotate(-3deg);
        filter: sepia(1) saturate(0.5) brightness(0.55) contrast(1.1);
        pointer-events: none;
    }
    .zov-head, .zov-text { position: relative; }
    .zov-head { display: flex; justify-content: space-between; align-items: baseline; }
    .zov-head h3 {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.24em;
        color: var(--haj-blood);
    }
    .zov-xp { font-size: 13px; font-weight: 700; color: #6d5817; }
    .zov-text {
        font-family: var(--font-hand);
        font-size: 22px;
        color: #38301d;
        margin-top: 5px;
        line-height: 1.15;
    }

    /* ═══ АКТИВНОСТ — летописът на дружината ═══ */
    .act-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
    .nashivka {
        font-family: var(--font-body);
        font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
        padding: 5px 12px;
        border-radius: 4px;
        cursor: pointer;
        color: rgba(196,204,178,0.95);
        background: linear-gradient(180deg, #1d2b1f, #141f16);
        border: 1px solid rgba(168,179,154,0.3);
        box-shadow: inset 0 0 0 2px rgba(7,14,9,0.5), inset 0 0 0 3px rgba(168,179,154,0.12), 0 2px 4px rgba(0,0,0,0.35);
    }
    .nashivka.active {
        color: #f6ddce;
        background: radial-gradient(circle at 36% 30%, #b8473d, #93312b 60%, #6e2420);
        border-color: #a5821f;
        box-shadow: inset 0 1px 2px rgba(255,180,150,0.35), inset 0 -1px 3px rgba(60,10,5,0.5), 0 1px 3px rgba(0,0,0,0.4);
    }
    .act-user { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
    .act-user-label { font-size: 13.5px; font-style: italic; color: rgba(196,204,178,0.95); }
    .act-user-btn {
        font-family: var(--font-display);
        font-size: 13px;
        letter-spacing: 0.07em;
        padding: 4px 12px 3px;
        border-radius: 4px;
        border: 1px solid rgba(207,166,45,0.4);
        background: linear-gradient(180deg, #3d2c1a, #2a1d10);
        color: var(--haj-bone);
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,220,160,0.14), 0 2px 4px rgba(0,0,0,0.4);
    }
    .act-user-btn i { font-size: 11px; color: var(--haj-brass); }

    /* дневният рапорт — служебен документ */
    .raport {
        position: relative;
        margin-top: 16px;
        padding: 16px 16px 14px;
        border-radius: 4px;
        overflow: hidden;
        background:
            radial-gradient(140% 90% at 50% 0%, rgba(255,246,220,0.55), rgba(214,190,140,0.25) 70%),
            repeating-linear-gradient(180deg, transparent 0 26px, rgba(120,90,40,0.12) 26px 27px),
            var(--haj-parchment);
        box-shadow: inset 0 0 0 1px rgba(120,90,40,0.35), inset 0 0 22px rgba(120,90,40,0.25), 0 6px 14px rgba(0,0,0,0.4);
        color: #38301d;
    }
    .raport::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(120,90,40,0.4); pointer-events: none; }
    .raport-lion {
        position: absolute; right: -14px; bottom: -22px;
        width: 150px; height: 158px;
        opacity: 0.12;
        filter: sepia(0.4) brightness(0.55);
        transform: rotate(-4deg);
        pointer-events: none;
    }
    .raport-no { position: absolute; top: 9px; right: 13px; font-family: var(--font-hand); font-size: 14px; color: #7a5c30; }
    .raport-title {
        font-family: 'Ruslan Display', var(--font-display);
        font-size: 19px; font-weight: 400;
        letter-spacing: 0.09em;
        text-align: center;
        color: #4a3216;
        text-shadow: 0 1px 0 rgba(255,246,220,0.6);
    }
    .raport-date {
        width: max-content;
        margin: 8px auto 0;
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: #5d4322;
        padding: 1px 14px;
        border: 1px solid rgba(120,90,40,0.45);
        border-radius: 12px;
        background: rgba(255,246,220,0.4);
    }
    .raport-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
    .raport-cell {
        display: flex; align-items: center; gap: 9px;
        padding: 8px 9px;
        background: rgba(255,246,220,0.45);
        border: 1px solid rgba(120,90,40,0.3);
        border-radius: 4px;
    }
    .raport-ico {
        flex-shrink: 0;
        width: 26px; height: 26px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px;
        color: #3a2508;
        background: radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 45%, #a5821f 80%, #7c5f18);
        box-shadow: inset 0 1px 1px rgba(255,246,210,0.8), inset 0 -1px 2px rgba(60,40,8,0.5), 0 1px 2px rgba(0,0,0,0.3);
    }
    .raport-cell-label { display: block; font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #7a5c30; }
    .raport-cell-value { display: block; font-size: 14.5px; font-weight: 700; color: #38301d; margin-top: 1px; line-height: 1.15; }

    /* летописните редове */
    .act-sect { margin-top: 18px; }
    .act-sect-head { display: flex; align-items: center; gap: 10px; }
    .act-now-dot {
        flex-shrink: 0;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ffc97e, var(--haj-ember) 65%);
        box-shadow: 0 0 8px rgba(226,102,42,0.8);
    }
    .act-sect-title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--haj-bone); }
    .act-sect-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(147,128,58,0.5), rgba(147,128,58,0.05)); }
    .act-badge {
        flex-shrink: 0;
        width: 19px; height: 19px;
        transform: rotate(45deg);
        background: linear-gradient(135deg, #dcb84a, #93803a);
        box-shadow: inset 0 0 0 1px rgba(60,40,8,0.4), 0 1px 3px rgba(0,0,0,0.4);
        display: flex; align-items: center; justify-content: center;
    }
    .act-badge b { transform: rotate(-45deg); font-size: 11px; color: #241a05; }
    .act-row { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid rgba(147,128,58,0.16); }
    .act-sect .act-row:last-of-type { border-bottom: none; }
    .act-seal {
        flex-shrink: 0;
        width: 34px; height: 34px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display);
        font-size: 15px;
        color: rgba(240,229,204,0.95);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        box-shadow: inset 0 2px 3px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.45);
    }
    .seal-arrival { background: radial-gradient(circle at 36% 30%, #e9c754, #b98f24 60%, #6d5817); color: #2f2405; text-shadow: 0 1px 1px rgba(255,240,190,0.4); }
    .seal-departure { background: radial-gradient(circle at 36% 30%, #b8473d, #93312b 60%, #5e1f1a); }
    .seal-status { background: radial-gradient(circle at 36% 30%, #6d8fa3, #4e6b7d 60%, #32485a); }
    .seal-login { background: radial-gradient(circle at 36% 30%, #5c8a54, #3f6b3a 60%, #27492a); }
    .act-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
    .act-text { font-size: 14.5px; color: var(--haj-bone); }
    .act-meta { flex-shrink: 0; text-align: right; }
    .act-time { display: block; font-family: var(--font-hand); font-size: 17px; color: #ffc97e; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
    .act-ago { display: block; font-size: 11px; font-style: italic; color: rgba(168,179,154,0.85); margin-top: 2px; }
    .act-more {
        display: block;
        margin: 12px auto 0;
        font-family: var(--font-hand);
        font-size: 15.5px;
        padding: 6px 18px;
        border-radius: 4px;
        border: 1px solid rgba(207,166,45,0.35);
        background: linear-gradient(180deg, #1d2b1f, #141f16);
        color: var(--haj-brass);
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.12), 0 2px 4px rgba(0,0,0,0.35);
    }

    /* ═══ ИЗВЕСТИЯ — свитъкът на глашатая ═══ */
    .iz-overlay { position: fixed; inset: 0; z-index: 39; display: none; }
    .iz-overlay.open { display: block; }
    .iz-panel {
        position: absolute;
        top: 64px; right: 16px;
        width: min(344px, calc(100% - 32px));
        z-index: 40;
        display: none;
        padding: 14px 0 16px;
        background:
            radial-gradient(140% 80% at 50% 0%, rgba(255,246,220,0.5), rgba(214,190,140,0.22) 70%),
            repeating-linear-gradient(180deg, transparent 0 26px, rgba(120,90,40,0.1) 26px 27px),
            var(--haj-parchment);
        border-radius: 3px;
        box-shadow: inset 0 0 0 1px rgba(120,90,40,0.35), inset 0 0 26px rgba(120,90,40,0.22), 0 14px 30px rgba(0,0,0,0.55);
        color: #38301d;
    }
    .iz-panel.open { display: block; }
    /* валовете на свитъка */
    .iz-panel::before, .iz-panel::after {
        content: '';
        position: absolute;
        left: -6px; right: -6px;
        height: 13px;
        border-radius: 7px;
        background: linear-gradient(180deg, #8a6a3c, #5d4322 45%, #3a2a15);
        box-shadow: inset 0 1px 0 rgba(240,205,130,0.4), 0 3px 6px rgba(0,0,0,0.5);
    }
    .iz-panel::before { top: -7px; }
    .iz-panel::after { bottom: -7px; }
    .iz-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 16px 0; }
    .iz-title { font-family: 'Ruslan Display', var(--font-display); font-size: 18px; letter-spacing: 0.07em; color: #4a3216; }
    .iz-readall { font-family: var(--font-hand); font-size: 15.5px; color: #8a5a20; background: none; border: none; cursor: pointer; }
    .iz-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 4px; }
    .iz-chips::-webkit-scrollbar { display: none; }
    .iz-chip {
        flex-shrink: 0;
        font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
        padding: 4px 10px;
        border-radius: 11px;
        border: 1px solid rgba(120,90,40,0.45);
        background: rgba(255,246,220,0.4);
        color: #6b4e26;
        cursor: pointer;
    }
    .iz-chip.active {
        background: radial-gradient(circle at 36% 30%, #b8473d, #93312b 60%, #6e2420);
        border-color: #a5821f;
        color: #f6ddce;
    }
    .iz-list { max-height: 46vh; overflow-y: auto; margin-top: 6px; }
    .iz-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 18px; border-bottom: 1px solid rgba(120,90,40,0.25); }
    .iz-row:last-child { border-bottom: none; }
    .iz-row.unread { background: rgba(255,246,220,0.55); }
    .iz-row.unread::before {
        content: '';
        position: absolute;
        left: 7px; top: 50%;
        width: 6px; height: 6px;
        margin-top: -3px;
        transform: rotate(45deg);
        background: var(--haj-ember);
        box-shadow: 0 0 6px rgba(226,102,42,0.7);
    }
    .iz-row.read { opacity: 0.72; }
    .iz-seal {
        flex-shrink: 0;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
        color: rgba(240,229,204,0.95);
        box-shadow: inset 0 2px 3px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.4);
    }
    .seal-urgent { background: radial-gradient(circle at 36% 30%, #c94f37, #a33214 60%, #641d0c); }
    .seal-game { background: radial-gradient(circle at 36% 30%, #e9c754, #b98f24 60%, #6d5817); color: #2f2405; }
    .seal-chat { background: radial-gradient(circle at 36% 30%, #6d8fa3, #4e6b7d 60%, #32485a); }
    .seal-weather { background: radial-gradient(circle at 36% 30%, #7d8a96, #5a6672 60%, #39434d); }
    .seal-inv { background: radial-gradient(circle at 36% 30%, #8a6a3c, #5d4322 60%, #33230f); }
    .iz-body { flex: 1; min-width: 0; }
    .iz-text { font-size: 13.5px; font-weight: 600; color: #38301d; line-height: 1.3; }
    .iz-row.unread .iz-text { font-weight: 700; }
    .iz-time { font-size: 11px; font-style: italic; color: #7a5c30; margin-top: 2px; }
    .iz-check {
        flex-shrink: 0;
        width: 26px; height: 26px;
        border-radius: 50%;
        border: 1px solid rgba(120,90,40,0.5);
        background: radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 45%, #a5821f);
        color: #3a2508;
        font-size: 12px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: inset 0 1px 1px rgba(255,246,210,0.8), 0 1px 3px rgba(0,0,0,0.35);
    }
    .iz-row.read .iz-check { display: none; }

    /* reduced motion: kill the ember drift and hide them (scene JS also checks this) */
    @media (prefers-reduced-motion: reduce) {
        .ember { animation: none; opacity: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       ФЛИПОВЕ — плочките се обръщат към детайли; пряпорците към мъдростта.
       Портирано от prototype/hajduk-flip-elements.html (одобрено 2026-07-05).
       ВАЖНО: никакъв filter върху preserve-3d слоя — сплесква 3D-то и чупи
       backface-visibility (сянката на пряпореца стои на .ban-obj, не на inner-а).
       ═══════════════════════════════════════════════════════════════════ */

    /* — плочки — */
    .pl-flip { perspective: 1000px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .pl-inner {
        position: relative;
        width: 100%;
        min-height: 124px;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
    }
    .pl-flip.flipped .pl-inner { transform: rotateY(180deg); }
    .pl-flip:active .pl-inner { filter: brightness(1.06); }
    .pl-inner .plaque,
    .pl-inner .plaque-back {
        position: absolute;
        inset: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .pl-inner .plaque { display: flex; flex-direction: column; justify-content: center; }
    .plaque-turn {
        position: absolute; bottom: 5px; left: 0; right: 0;
        font-family: var(--font-hand); font-size: 12px; color: rgba(207,166,45,0.55);
    }
    .plaque-back {
        transform: rotateY(180deg);
        border: 1px solid rgba(0,0,0,0.6);
        border-radius: 7px;
        padding: 9px 7px;
        text-align: center;
        overflow: hidden;
        display: flex; flex-direction: column; justify-content: center;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 7px),
            linear-gradient(180deg, #1c140b, #120c06);
        box-shadow: inset 0 0 0 1px rgba(207,166,45,0.12), inset 0 2px 10px rgba(0,0,0,0.6), 0 8px 18px rgba(0,0,0,0.35);
    }
    .pb-title {
        font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em;
        color: var(--haj-brass); margin-bottom: 6px; text-transform: uppercase;
    }
    .pb-rows { display: flex; flex-direction: column; gap: 5px; }
    .pb-row {
        display: flex; align-items: center; gap: 6px;
        padding: 3px 6px;
        border-radius: 3px; border: 1px solid rgba(90,66,30,0.35);
        box-shadow: 0 1px 2px rgba(0,0,0,0.4);
        background:
            repeating-linear-gradient(180deg, transparent 0 11px, rgba(120,90,40,0.12) 11px 12px),
            linear-gradient(174deg, rgba(255,246,220,0.5), rgba(214,190,140,0.32) 70%),
            var(--haj-parchment);
    }
    .pb-lab { font-size: 9.5px; color: #7a5f36; letter-spacing: 0.02em; }
    .pb-val { margin-left: auto; font-family: var(--font-body); font-weight: 700; font-size: 11.5px; color: var(--ink); white-space: nowrap; }
    .pb-val.green { color: #3f6b2c; }
    .pb-badge {
        text-align: center; font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.05em;
        color: #7a2c1c; padding: 2px 0;
        border-radius: 3px; border: 1px solid rgba(90,66,30,0.4);
        background: linear-gradient(180deg, #efe0bd, #dcc99c 70%);
    }

    /* — пряпорци — */
    .ban-obj { cursor: pointer; filter: drop-shadow(0 12px 15px rgba(0,0,0,0.5)); }
    .ban-flip { margin: -4px 4px 0; perspective: 1100px; }
    .ban-flip-inner {
        position: relative;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
    }
    .ban-obj.flipped .ban-flip-inner { transform: rotateY(180deg); }
    .ban-cloth { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .ban-cloth.back {
        position: absolute; inset: 0;
        transform: rotateY(180deg);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 20px 15px 40px;
        background:
            radial-gradient(120% 60% at 50% -10%, rgba(240,229,204,0.06), transparent 60%),
            linear-gradient(178deg, #223526, #18271c 55%, #122016);
    }
    .ban-cloth.back .ban-shev { width: 66%; height: 9px; margin: 7px auto 9px; }
    .bb-name {
        font-family: var(--font-display); font-size: 19px; letter-spacing: 0.04em; color: var(--haj-brass);
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    .bb-fortune {
        font-family: var(--font-hand); font-size: 18px; line-height: 1.3; color: var(--haj-bone);
        text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    }
    .bb-source { margin-top: 9px; font-style: italic; font-size: 11.5px; color: var(--haj-smoke); }
    /* среден размер (3+ души) — стягаме гърба да е четимо */
    .unit-m .ban-cloth.back { padding: 12px 9px 28px; }
    .unit-m .bb-name { font-size: 15px; }
    .unit-m .bb-fortune { font-size: 13px; line-height: 1.26; }
    .unit-m .bb-source { font-size: 9.5px; margin-top: 6px; }

    @media (prefers-reduced-motion: reduce) {
        .pl-inner, .ban-flip-inner { transition: none; }
    }
}