/* ═══════════════════════════════════════════════════════════════════════════
   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; }
}