/* ═══════════════════════════════════════════════════════════════════════════
   HAJDUK THEME „Зора над Балкана" — РАНИЦАТА (page styles)
   ───────────────────────────────────────────────────────────────────────────
   Production port of the owner-approved mockup.
   Visual SOT: prototype/hajduk-ranitsa.html  (markup here stays 1:1 with it)
   Мястото: зимникътъ на дружината — кантаръ · тайникъ · плоча съ тебеширъ ·
            сандъкъ съ прегради · дамги · шишъ съ разписки · товарниятъ етикетъ.

   SCOPING CONTRACT:
     The mockup uses bare generic class names (.wall, .cell, .tab, .slip, .sec,
     .chest, .slate, .spike, .overlay …) that WOULD collide with the 40 other
     stylesheets this app loads. The раница view is wrapped in <div class="haj-scope">,
     so EVERY rule below is nested under `.haj-scope` (native CSS nesting prepends
     `.haj-scope ` to each nested selector, e.g. `.wall {}` → `.haj-scope .wall`).
     Nothing leaks out; nothing collides.

   NO AMPERSANDS: nested selectors are written as plain nested rules — never a
   bare-ampersand nesting block. A bare-ampersand block does NOT reliably apply
   custom properties / background to the parent (this left --wool-* undefined and
   cells transparent in an earlier phase). Page tokens + base surface below are
   DIRECT declarations of `.haj-scope`, exactly like hajduk-profil.css.

   WHAT IS NOT HERE (already in css/hajduk-shared.css — do NOT duplicate):
     · the --haj-x / --ink / --font-x token block (KEPT here: page-only --earth,
       --burlap, --clay, --chalk, --chalk-dim, --chalk-oc, --slate tokens)
     · the universal reset (* margin/padding/box-sizing) + html/body rules
     · .icon-btn base + parts (::before, :active, i, .badge)   ← page-only size
       modifiers .add-row .icon-btn / .et-stepper .icon-btn / .et-close ARE kept
     · the whole силяхлък bottom nav (.bottom-nav/.nav-*)
     · the reduced-motion `animation:none` block (shared kills animation; the
       раница mockup's reduced-motion kills a .etiket *transition* — kept below,
       not redundant)

   COLLISION DEFENSE (see block at end of .haj-scope): hajduk-profil.css also
   defines `.haj-scope .cell` (чергата heat-cell) and loads on the same page.
   ═══════════════════════════════════════════════════════════════════════════ */

.haj-scope {

    /* ── page-only tokens: пръсть, зебло, глина, тебеширъ. Ported verbatim from
       the mockup :root. (--haj-x / --ink / --font-x live in hajduk-shared.css — not
       repeated here.) These are DIRECT declarations of .haj-scope, never a
       bare-ampersand nesting block. ── */
    --earth:      #241a12;
    --earth-hi:   #33261a;
    --burlap:     #a98d5f;
    --clay:       #a05a38;
    --chalk:      #e8e2d2;
    --chalk-dim:  rgba(232, 226, 210, 0.62);
    --chalk-oc:   #d9b96e;
    --slate:      #262b28;

    /* base surface — the mockup set these on html/body; the зимникъ base colour +
       page min-height land on the scope root itself. */
    background: #1d150e;
    min-height: 100vh;

    /* ═══ ПРЪСТЕНАТА СТЕНА — фонътъ на зимника ═══ */
    .wall {
        position: fixed; inset: 0; z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 130% 44% at 62% 0%, rgba(255, 205, 120, 0.06), transparent 65%),
            linear-gradient(103deg, transparent 30%, rgba(0, 0, 0, 0.16) 46%, transparent 60%),
            linear-gradient(180deg, #2b1f14, #241a12 45%, #1c140d);
    }
    /* пластове пръсть — легнали, не диагонални като сукното */
    .wall::before {
        content: '';
        position: absolute; inset: 0;
        background:
            repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 6px),
            repeating-linear-gradient(181deg, rgba(255, 235, 190, 0.024) 0 1px, transparent 1px 9px);
    }
    .wall::after {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse 110% 85% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.52) 100%);
    }

    /* ═══════════════════════════════════════════════════════════
       СЦЕНАТА — рисуваниятъ зимникъ (Canvas 2D)
       ═══════════════════════════════════════════════════════════ */
    .scene-band {
        position: relative;
        z-index: 1;
        height: 332px;
    }
    .scene-band canvas {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        display: block;
    }
    #flameC { pointer-events: none; }

    .scene-head {
        position: absolute;
        top: 0; left: 0; right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 16px 0;
        max-width: 430px;
        margin: 0 auto;
    }
    .hdr-back-label {
        font-family: var(--font-hand);
        font-size: 18px;
        color: rgba(220, 208, 178, 0.85);
        letter-spacing: 0.02em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }

    .scene-title {
        position: absolute;
        left: 0; right: 0;
        bottom: 16px;
        z-index: 3;
        max-width: 430px;
        margin: 0 auto;
        padding: 0 18px;
        pointer-events: none;
    }
    .scene-title h1 {
        font-family: 'Ruslan Display', var(--font-display);
        font-weight: 400;
        font-size: 31px;
        letter-spacing: 0.13em;
        background: linear-gradient(178deg, #f2d783 12%, #cfa62d 46%, #8d711d 82%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
    }
    .st-sub {
        margin-top: 1px;
        font-family: var(--font-hand);
        font-size: 19px;
        color: rgba(222, 206, 170, 0.88);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    }

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

    /* заглавие на раздѣлъ — врязано въ стената */
    .sec {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin: 24px 2px 12px;
    }
    .sec-t {
        font-family: var(--font-display);
        font-size: 15.5px;
        letter-spacing: 0.22em;
        background: linear-gradient(178deg, #f2d783 12%, #cfa62d 46%, #8d711d 82%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        white-space: nowrap;
    }
    .sec-a {
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: rgba(200, 186, 155, 0.72);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sec::after {
        content: '';
        flex: 1;
        min-width: 24px;
        height: 2px;
        align-self: center;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18));
        box-shadow: 0 1px 0 rgba(240, 220, 170, 0.07);
        border-radius: 1px;
    }

    /* ═══════════════════════════════════════════════════════════
       КАНТАРЪТЪ — безменъ: тежестьта показва товара
       ═══════════════════════════════════════════════════════════ */
    .kantar {
        position: relative;
        padding: 2px 4px 0;
    }
    .kantar svg { display: block; width: 100%; height: auto; }
    .kantar-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 0 4px;
        margin-top: -4px;
    }
    .kantar-note {
        font-family: var(--font-hand);
        font-size: 16px;
        color: rgba(200, 186, 155, 0.72);
    }
    .kantar-val {
        font-family: var(--font-hand);
        font-size: 20px;
        color: var(--haj-brass);
    }
    .kantar-val b { font-size: 24px; font-weight: 700; }

    /* ═══════════════════════════════════════════════════════════
       ТАЙНИКЪТЪ — кожениятъ капакъ съ гайки за сечивата
       ═══════════════════════════════════════════════════════════ */
    .tainik {
        position: relative;
        border-radius: 9px;
        padding: 13px 10px 11px;
        background:
            repeating-linear-gradient(94deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px),
            radial-gradient(120% 90% at 50% -20%, rgba(240, 205, 130, 0.08), transparent 60%),
            linear-gradient(180deg, #362815, #261c11);
        border: 1px solid rgba(0, 0, 0, 0.65);
        box-shadow:
            inset 0 1px 0 rgba(240, 220, 170, 0.10),
            inset 0 0 0 1px rgba(61, 47, 29, 0.6),
            0 8px 18px rgba(0, 0, 0, 0.42);
    }
    /* шевътъ по края на капака */
    .tainik::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 6px;
        pointer-events: none;
        background:
            repeating-linear-gradient(90deg, rgba(207, 166, 45, 0.34) 0 5px, transparent 5px 10px) top / 100% 1px no-repeat,
            repeating-linear-gradient(90deg, rgba(207, 166, 45, 0.34) 0 5px, transparent 5px 10px) bottom / 100% 1px no-repeat,
            repeating-linear-gradient(0deg, rgba(207, 166, 45, 0.34) 0 5px, transparent 5px 10px) left / 1px 100% no-repeat,
            repeating-linear-gradient(0deg, rgba(207, 166, 45, 0.34) 0 5px, transparent 5px 10px) right / 1px 100% no-repeat;
        opacity: 0.55;
    }
    .tk-row {
        display: flex;
        gap: 5px;
        justify-content: space-between;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tk-row::-webkit-scrollbar { display: none; }
    .tk-loop {
        position: relative;
        flex: 1;
        min-width: 56px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 9px 2px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-family: inherit;
    }
    /* двете кожени гайки, презъ които е промушено сечивото */
    .tk-loop::before, .tk-loop::after {
        content: '';
        position: absolute;
        top: 13px;
        width: 8px; height: 30px;
        border-radius: 3px;
        background: linear-gradient(90deg, #4a3820, #2c2110 55%, #1f1608);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.55),
            inset 1px 0 0 rgba(240, 229, 204, 0.10),
            0 1px 2px rgba(0, 0, 0, 0.5);
        z-index: 2;
    }
    .tk-loop::before { left: 6px; }
    .tk-loop::after { right: 6px; }
    .tk-obj {
        position: relative;
        z-index: 1;
        width: 46px; height: 46px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #33230a;
        background:
            radial-gradient(circle at 32% 26%, #f0d98e, #cfa62d 52%, #96771c 88%);
        box-shadow:
            inset 0 1px 1px rgba(255, 246, 210, 0.8),
            inset 0 -2px 3px rgba(60, 40, 8, 0.5),
            inset 0 0 0 1px rgba(92, 71, 15, 0.55),
            0 3px 6px rgba(0, 0, 0, 0.5);
    }
    .tk-loop:active .tk-obj { transform: translateY(1px); }
    .tk-name {
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(222, 206, 170, 0.9);
    }
    .tk-stat {
        margin-top: -4px;
        font-family: var(--font-hand);
        font-size: 14.5px;
        line-height: 1;
        color: var(--haj-ember-hi);
    }

    /* ═══════════════════════════════════════════════════════════
       ПЛОЧАТА СЪ ТЕБЕШИРЪ — „трѣбва ни" (дюкянска дъсчица)
       ═══════════════════════════════════════════════════════════ */
    .slate-hang {
        position: relative;
        padding-top: 20px;
    }
    /* гвоздеятъ и кожената примка */
    .slate-hang::before {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        width: 9px; height: 9px;
        margin-left: -4.5px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e9c754, #8d711d 75%);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.65);
        z-index: 2;
    }
    .slate-hang::after {
        content: '';
        position: absolute;
        top: 3px; left: 50%;
        width: 30px; height: 22px;
        margin-left: -15px;
        border: 4px solid #4a3820;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -1px 0 rgba(240, 229, 204, 0.08), inset 0 1px 0 rgba(0, 0, 0, 0.5);
    }
    .slate {
        position: relative;
        border-radius: 6px;
        padding: 7px;
        transform: rotate(0.4deg);
        background:
            repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 7px),
            linear-gradient(175deg, #4c3a20, #332513 45%, #281d10);
        box-shadow:
            inset 0 1px 0 rgba(240, 220, 170, 0.12),
            inset 0 0 0 1px rgba(0, 0, 0, 0.55),
            0 10px 22px rgba(0, 0, 0, 0.5);
    }
    .slate-face {
        position: relative;
        border-radius: 3px;
        padding: 14px 15px 13px;
        overflow: hidden;
        background:
            radial-gradient(130% 100% at 28% 12%, rgba(255, 255, 255, 0.045), transparent 55%),
            linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.022) 52%, transparent 66%),
            linear-gradient(180deg, #292e2b, #222724);
        background-color: var(--slate);
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.55),
            inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    }
    /* полуизтрито старо писмо — животъ на дъската */
    .slate-ghost {
        position: absolute;
        right: 16px; top: 13px;
        font-family: var(--font-hand);
        font-size: 18px;
        color: rgba(232, 226, 210, 0.065);
        transform: rotate(-2deg);
        pointer-events: none;
        white-space: nowrap;
    }
    .slate-title {
        font-family: var(--font-hand);
        font-weight: 700;
        font-size: 23px;
        letter-spacing: 0.06em;
        color: var(--chalk);
        text-shadow: 0 0 2px rgba(232, 226, 210, 0.35);
        display: inline-block;
    }
    .slate-title::after {
        content: '';
        display: block;
        height: 2px;
        margin-top: 1px;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(232, 226, 210, 0.75), rgba(232, 226, 210, 0.2));
        transform: rotate(-0.6deg);
    }
    .chalk-line {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 11px;
    }
    .chalk-line:nth-child(odd) .chalk-what { transform: rotate(-0.5deg); }
    .chalk-what {
        flex: 1;
        font-family: var(--font-hand);
        font-size: 19.5px;
        line-height: 1.15;
        color: var(--chalk);
        text-shadow: 0 0 2px rgba(232, 226, 210, 0.28);
    }
    .chalk-what small {
        font-size: 15px;
        color: var(--chalk-dim);
    }
    .chalk-claim {
        flex: none;
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: var(--chalk);
        background: none;
        border: 1.5px solid rgba(232, 226, 210, 0.7);
        border-radius: 3px;
        padding: 1px 10px 2px;
        transform: rotate(-1.2deg);
        cursor: pointer;
        text-shadow: 0 0 2px rgba(232, 226, 210, 0.3);
    }
    .chalk-claim:active { background: rgba(232, 226, 210, 0.08); }
    .chalk-claimed {
        flex: none;
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: var(--chalk-oc);
        text-shadow: 0 0 2px rgba(217, 185, 110, 0.35);
        transform: rotate(-0.8deg);
    }
    .chalk-in {
        flex: 1;
        border: none;
        outline: none;
        background: none;
        border-bottom: 1.5px solid rgba(232, 226, 210, 0.45);
        font-family: var(--font-hand);
        font-size: 19.5px;
        color: var(--chalk);
        caret-color: var(--chalk);
        padding: 0 2px 2px;
    }
    .chalk-in::placeholder { color: rgba(232, 226, 210, 0.35); }
    .slate-empty {
        font-family: var(--font-hand);
        font-size: 20px;
        color: var(--chalk-dim);
        text-align: center;
        padding: 10px 0 6px;
    }
    /* тебеширчето на перваза */
    .slate-ledge {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 7px 10px 2px;
    }
    .chalk-piece {
        width: 26px; height: 8px;
        border-radius: 2px;
        transform: rotate(-14deg);
        background: linear-gradient(180deg, #f4efe0, #cfc9b8);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 -2px 2px rgba(0, 0, 0, 0.14);
    }
    .slate-add {
        border: none;
        background: none;
        font-family: var(--font-hand);
        font-size: 16.5px;
        color: rgba(200, 186, 155, 0.8);
        cursor: pointer;
        padding: 2px 0;
    }
    .slate-add:active { color: var(--haj-bone); }

    /* ═══ ТАБОВЕ — механски табели на греда ═══ */
    .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: 12px; padding: 0 8px; }
    .tab {
        position: relative;
        flex: 1;
        margin-top: 13px;
        padding: 10px 4px 9px;
        border: 1px solid rgba(0,0,0,0.6);
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--haj-smoke);
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        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 { font-size: 17px; }
    .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 { color: var(--haj-ember-hi); }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* ═══════════════════════════════════════════════════════════
       ДАМГИТЕ — жигосани клейма на летва (категориите)
       ═══════════════════════════════════════════════════════════ */
    .damgi {
        display: flex;
        gap: 4px;
        margin-top: 16px;
        padding: 7px 8px 6px;
        border-radius: 7px;
        overflow-x: auto;
        scrollbar-width: none;
        background:
            repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 8px),
            linear-gradient(175deg, #3b2b17, #2a1e10);
        border: 1px solid rgba(0, 0, 0, 0.6);
        box-shadow: inset 0 1px 0 rgba(240, 220, 170, 0.09), 0 4px 9px rgba(0, 0, 0, 0.35);
    }
    .damgi::-webkit-scrollbar { display: none; }
    .damga {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 52px;
        padding: 6px 7px 5px;
        border: none;
        border-radius: 5px;
        background: none;
        cursor: pointer;
        color: rgba(140, 116, 82, 0.9);
        font-family: var(--font-body);
    }
    .damga i { font-size: 19px; filter: drop-shadow(0 1px 0 rgba(240, 220, 170, 0.08)); }
    .damga span {
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
    /* пряснотo жигосване */
    .damga.active {
        color: #2a1a08;
        background:
            radial-gradient(80% 70% at 50% 34%, rgba(0, 0, 0, 0.30), transparent 75%),
            linear-gradient(175deg, #2f2110, #241808);
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.75),
            inset 0 0 0 1px rgba(0, 0, 0, 0.5),
            inset 0 -1px 0 rgba(240, 220, 170, 0.07);
    }
    .damga.active i,
    .damga.active span {
        color: var(--haj-ember-hi);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }
    .damga.active i { filter: drop-shadow(0 0 4px rgba(226, 102, 42, 0.45)); }

    /* ═══════════════════════════════════════════════════════════
       САНДЪКЪТЪ СЪ ПРЕГРАДИ — инвентарътъ
       ═══════════════════════════════════════════════════════════ */
    .chest {
        position: relative;
        margin-top: 14px;
        border-radius: 10px;
        padding: 15px 11px 13px;
        background:
            repeating-linear-gradient(2deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 9px),
            repeating-linear-gradient(88deg, rgba(255, 235, 190, 0.025) 0 1px, transparent 1px 7px),
            linear-gradient(175deg, #40301b, #2c2011 55%, #221809);
        border: 1px solid rgba(0, 0, 0, 0.7);
        box-shadow:
            inset 0 1px 0 rgba(240, 220, 170, 0.12),
            inset 0 0 0 1px rgba(74, 56, 32, 0.55),
            0 14px 30px rgba(0, 0, 0, 0.5);
    }
    /* кованиятъ обковъ — двете железни ленти */
    .chest::before, .chest::after {
        content: '';
        position: absolute;
        left: -3px; right: -3px;
        height: 12px;
        border-radius: 3px;
        background:
            radial-gradient(circle 2.5px at 14px 50%, #7d8076 0 40%, #2b2d28 55% 72%, transparent 78%),
            radial-gradient(circle 2.5px at calc(50% - 60px) 50%, #7d8076 0 40%, #2b2d28 55% 72%, transparent 78%),
            radial-gradient(circle 2.5px at calc(50% + 60px) 50%, #7d8076 0 40%, #2b2d28 55% 72%, transparent 78%),
            radial-gradient(circle 2.5px at calc(100% - 14px) 50%, #7d8076 0 40%, #2b2d28 55% 72%, transparent 78%),
            linear-gradient(180deg, #4b4d45, #33352f 45%, #212320);
        box-shadow:
            inset 0 1px 0 rgba(220, 224, 210, 0.22),
            inset 0 -2px 3px rgba(0, 0, 0, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.5);
        z-index: 2;
    }
    .chest::before { top: 8px; }
    .chest::after { bottom: 8px; }
    /* отворената ключалка (катинарътъ виси на халката) */
    .chest-hasp {
        position: absolute;
        top: -7px; left: 50%;
        width: 34px; height: 30px;
        margin-left: -17px;
        z-index: 3;
        pointer-events: none;
    }
    .chest-hasp .plate {
        position: absolute;
        top: 0; left: 5px;
        width: 24px; height: 17px;
        border-radius: 3px 3px 8px 8px;
        background: linear-gradient(175deg, #565951, #33352f 60%, #24261f);
        box-shadow: inset 0 1px 0 rgba(220, 224, 210, 0.25), 0 2px 3px rgba(0, 0, 0, 0.55);
    }
    .chest-hasp .ring {
        position: absolute;
        top: 12px; left: 10px;
        width: 14px; height: 16px;
        border: 3.5px solid #8f7a2b;
        border-radius: 7px;
        background: none;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 190, 0.4);
        transform: rotate(8deg);
    }
    .chest-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 9px 7px;
        margin-top: 8px;
        border-radius: 6px;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.14) 20%),
            linear-gradient(175deg, #2c2011, #241a0c);
        box-shadow:
            inset 0 2px 8px rgba(0, 0, 0, 0.6),
            inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    }
    .cell {
        position: relative;
        aspect-ratio: 1 / 1.06;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 5px 4px 6px;
        font-family: inherit;
        /* дъното на отдѣлението — по-светло дърво */
        background:
            repeating-linear-gradient(1deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 8px),
            linear-gradient(178deg, rgba(74, 61, 42, 0.5), transparent 55%),
            linear-gradient(178deg, #443623, #382b1b);
        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.5),
            inset 0 0 0 1px rgba(0, 0, 0, 0.45),
            0 0 0 2px #241a0c,
            0 0 0 3px rgba(90, 70, 42, 0.4);
    }
    .cell:active { filter: brightness(1.08); }
    .cell-emoji {
        position: relative;
        font-size: 31px;
        line-height: 1.1;
        filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
    }
    /* прочута / безценна стока — топълъ ореолъ отъ свѣщьта */
    .cell.r-hi .cell-emoji::before {
        content: '';
        position: absolute;
        inset: -9px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 196, 110, 0.30), transparent 68%);
        z-index: -1;
    }
    .cell-label {
        max-width: 100%;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.15;
        color: var(--ink);
        text-align: center;
        padding: 2px 5px;
        border-radius: 1px;
        background: linear-gradient(178deg, #efe3c6, #ddcda6);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        transform: rotate(-1deg);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cell-label b { font-weight: 800; }
    .cell-init {
        position: absolute;
        right: 5px; bottom: 2px;
        font-family: var(--font-hand);
        font-size: 13px;
        color: rgba(240, 229, 204, 0.45);
    }
    .cell.empty {
        cursor: default;
        background:
            radial-gradient(60% 40% at 50% 78%, rgba(0, 0, 0, 0.22), transparent 75%),
            repeating-linear-gradient(1deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 8px),
            linear-gradient(178deg, #3a2e1e, #2e2313);
        box-shadow:
            inset 0 2px 6px rgba(0, 0, 0, 0.55),
            inset 0 0 0 1px rgba(0, 0, 0, 0.45),
            0 0 0 2px #241a0c,
            0 0 0 3px rgba(90, 70, 42, 0.3);
    }
    .cell.empty::after {
        content: '';
        position: absolute;
        left: 22%; bottom: 18%;
        width: 5px; height: 3px;
        border-radius: 50%;
        background: rgba(240, 229, 204, 0.10);
        box-shadow: 14px 4px 0 -1px rgba(240, 229, 204, 0.07), 26px -2px 0 -1px rgba(240, 229, 204, 0.05);
    }
    .chest-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 26px 10px;
        font-family: var(--font-hand);
        font-size: 20px;
        color: rgba(200, 186, 155, 0.75);
    }

    /* редътъ подъ сандъка — добави */
    .add-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 13px;
    }
    /* page-only size modifier over the shared .icon-btn base */
    .add-row .icon-btn { width: 36px; height: 36px; font-size: 15px; }
    .add-label {
        font-family: var(--font-hand);
        font-size: 18px;
        color: rgba(200, 186, 155, 0.85);
        cursor: pointer;
    }

    /* ═══════════════════════════════════════════════════════════
       РАЗПИСКАТА — листче за новъ товаръ
       ═══════════════════════════════════════════════════════════ */
    .razpiska {
        display: none;
        position: relative;
        margin-top: 14px;
        padding: 15px 16px 14px;
        border-radius: 2px;
        transform: rotate(-0.5deg);
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(255, 246, 220, 0.5), rgba(214, 190, 140, 0.22) 70%),
            var(--haj-parchment);
        box-shadow:
            inset 0 0 0 1px rgba(120, 90, 40, 0.35),
            inset 0 0 20px rgba(120, 90, 40, 0.2),
            0 6px 14px rgba(0, 0, 0, 0.45);
        color: var(--ink);
    }
    .razpiska.open { display: block; }
    .rz-title {
        font-family: var(--font-display);
        font-size: 14px;
        letter-spacing: 0.2em;
        color: #4a3216;
        margin-bottom: 8px;
    }
    .rz-row { display: flex; gap: 12px; align-items: baseline; margin-top: 9px; }
    .rz-field { flex: 1; }
    .rz-lab {
        font-family: var(--font-body);
        font-style: italic;
        font-size: 12.5px;
        color: #7a5c30;
    }
    .rz-in {
        width: 100%;
        border: none;
        border-bottom: 1.5px solid rgba(58, 42, 24, 0.55);
        background: none;
        font-family: var(--font-hand);
        font-size: 21px;
        color: var(--ink);
        padding: 0 2px 1px;
        outline: none;
    }
    .rz-in:focus { border-bottom-color: var(--haj-ember); }
    select.rz-in {
        font-size: 17px;
        font-family: var(--font-body);
        appearance: none;
        -webkit-appearance: none;
        border-radius: 0;
        cursor: pointer;
    }
    .rz-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        margin-top: 15px;
    }
    .rz-cancel {
        border: none; background: none;
        font-family: var(--font-hand);
        font-size: 17px;
        color: #7a5c30;
        cursor: pointer;
    }
    .rz-submit {
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 800;
        font-size: 12.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #2a1c0a;
        padding: 9px 18px;
        border-radius: 6px;
        background: linear-gradient(180deg, #e9c754, #cfa62d 55%, #8d711d);
        box-shadow:
            inset 0 1px 0 rgba(255, 240, 190, 0.7),
            inset 0 -1px 0 rgba(0, 0, 0, 0.35),
            0 3px 6px rgba(0, 0, 0, 0.35);
    }
    .rz-submit:active { transform: translateY(1px); }

    /* ═══════════════════════════════════════════════════════════
       ШИШЪТЪ СЪ РАЗПИСКИ — историята
       ═══════════════════════════════════════════════════════════ */
    .spike {
        position: relative;
        margin-top: 16px;
        padding-left: 34px;
    }
    /* прътътъ */
    .spike::before {
        content: '';
        position: absolute;
        left: 13px; top: 6px; bottom: 6px;
        width: 4px;
        border-radius: 2px;
        background: linear-gradient(90deg, #6d5a22, #cfa62d 45%, #8d711d);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 2px 0 5px rgba(0, 0, 0, 0.4);
    }
    /* главичката на шиша */
    .spike::after {
        content: '';
        position: absolute;
        left: 6.5px; top: -3px;
        width: 17px; height: 10px;
        border-radius: 5px;
        background: linear-gradient(180deg, #e9c754, #96771c);
        box-shadow: inset 0 1px 0 rgba(255, 240, 190, 0.6), 0 2px 3px rgba(0, 0, 0, 0.5);
    }
    .slip {
        position: relative;
        margin: 0 0 9px -26px;
        padding: 9px 13px 8px 36px;
        border-radius: 2px;
        background:
            radial-gradient(110% 90% at 50% 0%, rgba(255, 246, 220, 0.5), rgba(214, 190, 140, 0.18) 75%),
            var(--haj-parchment);
        box-shadow:
            inset 0 0 0 1px rgba(120, 90, 40, 0.3),
            inset 0 0 14px rgba(120, 90, 40, 0.16),
            0 3px 7px rgba(0, 0, 0, 0.4);
        color: var(--ink);
    }
    .slip:nth-child(odd) { transform: rotate(-0.6deg); }
    .slip:nth-child(even) { transform: rotate(0.5deg); }
    /* дупката отъ шиша */
    .slip::before {
        content: '';
        position: absolute;
        left: 21px; top: 14px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, #1d150e 0 42%, rgba(120, 90, 40, 0.55) 52% 70%, transparent 76%);
    }
    .slip-t {
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.3;
    }
    .slip-t b { font-weight: 800; }
    .slip-m {
        margin-top: 1px;
        font-family: var(--font-hand);
        font-size: 15px;
        color: #7a5c30;
    }
    /* изхарчено — обгорено ъгълче, кафяво мастило */
    .slip.burn { color: #57330f; }
    .slip.burn .slip-t { font-style: italic; }
    .slip.burn::after {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 44px; height: 30px;
        border-radius: 0 2px 0 60%;
        background:
            radial-gradient(120% 120% at 100% 0%, #150c05 20%, #4a2a10 48%, rgba(160, 90, 40, 0.45) 66%, transparent 78%);
        pointer-events: none;
    }
    .spike-note {
        margin: 4px 0 0 8px;
        font-family: var(--font-hand);
        font-size: 16px;
        color: rgba(200, 186, 155, 0.62);
    }

    /* ═══════════════════════════════════════════════════════════
       ТОВАРНИЯТЪ ЕТИКЕТЪ — модалъ на предметъ
       ═══════════════════════════════════════════════════════════ */
    .overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 22px;
        background: rgba(10, 7, 4, 0.66);
    }
    .overlay.open { display: flex; }
    .etiket {
        position: relative;
        width: min(340px, 92vw);
        padding: 20px 20px 17px;
        clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
        background:
            radial-gradient(130% 90% at 50% 0%, rgba(255, 248, 226, 0.55), rgba(206, 180, 130, 0.25) 75%),
            linear-gradient(178deg, #e6d8b4, #d9c69c);
        box-shadow:
            inset 0 0 0 1px rgba(120, 90, 40, 0.4),
            inset 0 0 26px rgba(120, 90, 40, 0.22);
        color: var(--ink);
        transform: translateY(-10px) rotate(-1.6deg);
        transition: transform 0.22s ease-out;
    }
    .overlay.open .etiket { transform: translateY(0) rotate(-0.6deg); }
    /* капсътъ и канапътъ */
    .et-grommet {
        position: absolute;
        top: 13px; left: 15px;
        width: 17px; height: 17px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, #0d0a06 0 30%, #e9c754 42% 58%, #96771c 74% 86%, transparent 92%);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .et-twine {
        position: absolute;
        top: -26px; left: -14px;
        width: 60px; height: 52px;
        pointer-events: none;
        overflow: visible;
    }
    /* page-only size/position modifier over the shared .icon-btn base */
    .et-close {
        position: absolute;
        top: 9px; right: 9px;
        width: 32px; height: 32px;
        font-size: 14px;
    }
    .et-emoji {
        text-align: center;
        font-size: 47px;
        margin-top: 4px;
        filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
    }
    .et-name {
        text-align: center;
        font-family: var(--font-display);
        font-size: 24px;
        letter-spacing: 0.04em;
        color: #433012;
        margin-top: 4px;
    }
    .et-rar {
        text-align: center;
        font-family: var(--font-body);
        font-style: italic;
        font-size: 13px;
        color: #8a6427;
        margin-top: 1px;
    }
    .et-by {
        text-align: center;
        font-family: var(--font-hand);
        font-size: 17.5px;
        color: #7a5c30;
        margin-top: 7px;
    }
    .et-stepper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 17px;
        margin-top: 12px;
    }
    /* page-only size modifier over the shared .icon-btn base */
    .et-stepper .icon-btn { width: 34px; height: 34px; font-size: 14px; }
    .et-qty {
        min-width: 86px;
        text-align: center;
        font-family: var(--font-display);
        font-size: 29px;
        color: #433012;
    }
    .et-qty small {
        font-size: 16px;
        font-family: var(--font-body);
        font-style: italic;
        color: #7a5c30;
    }
    .et-actions {
        display: flex;
        gap: 9px;
        margin-top: 16px;
    }
    .et-btn {
        flex: 1;
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 800;
        font-size: 11.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 11px 6px;
        border-radius: 6px;
        color: var(--haj-bone);
        box-shadow:
            inset 0 1px 0 rgba(255, 230, 190, 0.18),
            inset 0 0 0 1px rgba(0, 0, 0, 0.4),
            0 3px 6px rgba(0, 0, 0, 0.3);
    }
    .et-btn:active { transform: translateY(1px); }
    .et-btn.use { background: linear-gradient(175deg, #8a4a22, #6e3315); }
    .et-btn.out { background: linear-gradient(175deg, #7c2d25, #5e211c); }

    /* ═══════════════════════════════════════════════════════════
       COLLISION DEFENSE
       ─────────────────────────────────────────────────────────
       css/hajduk-profil.css also defines `.haj-scope .cell` (the чергата heat-
       cell) and loads on the same page — both surfaces live under .haj-scope, so
       its rule matches раница's inventory slots too. Profil's `.cell` sets
       `flex: 1; height: 13px`, neither of which раница's grid `.cell` overrides
       (раница relies on `aspect-ratio`). Left unchecked it flattens every slot to
       13px. Re-assert раница's box model with a higher-specificity rule (under
       .chest-grid → 0,3,0 beats profil's 0,2,0) so it wins regardless of the
       <link> order in index.html. Only `flex`/`height` need neutralising; раница's
       own `.cell` base already sets background/border/box-shadow/border-radius and
       wins those by source order (this file links after hajduk-profil.css).
       (No other bare-name collision found: `.overlay/.slate/.chest/.slip/.spike/
       .sec/.damga/.kantar/.tainik/.razpiska/.add-row/.et-*` are undefined in every
       other stylesheet; `.tab/.tabs-row/.tab-pane/.ui/.hdr-back-label` overlap
       hajduk-profil.css but with value-identical or source-order-safe declarations.)
       ═══════════════════════════════════════════════════════════ */
    .chest-grid .cell { flex: none; height: auto; }
}

/* ── page @media (kept from the mockup). Written at top level with an explicit
   `.haj-scope` prefix — same pattern hajduk-shared.css uses for its reduced-motion
   block. The reduced-motion rule kills a *transition* (shared only kills
   animation), so it is not redundant. ────────────────────────────────────────*/
@media (max-width: 370px) {
    .haj-scope .tk-loop { min-width: 58px; }
    .haj-scope .cell-emoji { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .haj-scope .etiket { transition: none; }
}