/* wwwroot/miniapp/styles.css */
/* =======================================================================
   Мини-апп • Глобальные стили (структурировано по зонам)
   Оглавление (ZONES):
   0) Переменные/База/Лэйаут
   1) Общие элементы UI: Карточки/Модалки/Кнопки/Чипсы/Инпуты
   2) Бумажные панели: Hero/Banner/Paper
   3) Навигация (Dock + иконочные кнопки)
   4) Экраны: Бой / Лабиринт / Инвентарь
   5) Биржа (стакан/график/действия/мои заявки)
   6) Рецепты (дерево, лист)
   7) Профиль (аватар, гриды, бонусы, подарки)  ← читабельность по умолчанию
   8) NFT (карточки, грид)
   9) Магазин и виджеты (dock-fly, shop widgets)
  10) Утилиты/A11y/Фон/Интро
  11) «Вопрос дня» / «Что нового?» / Каланча
  12) Персональные задания / Trivia FAB / Pending FAB
  13) Палатка (баннер, сетка строений) + WinFX
  14) Сезонное/События: Тыквенная сетка + FAB
  15) Home (заголовок, балансы, кошелёк)
  16) Профиль — компактные твики, слоты, адаптив
  17) Медиа-запросы и Reduced Motion
   ======================================================================= */


/* ======================================================================= */
/* === ZONE 0: Переменные / База / Лэйаут ================================ */
/* ======================================================================= */
:root{
    --bg:#fff; --muted:#666; --border:#ddd; --accent:#0b84ff; --ok:#0a8f4d; --bad:#c62828;
    --chip:#fff; --chip-b:#ddd; --chip-active:#0b84ff; --card:#fff;

    --fs:1; --fs-battle:1;

    /* док-панель */
    --rail-h:clamp(10px,2.2vh,22px);
    --rail-inset:clamp(8px,3vw,16px);
    --dock-btn:clamp(62px,10.9vmin,99px);
    --dock-gap:max(10px,2.5vw);
    --dock-pad:max(8px,env(safe-area-inset-bottom,0px));
    --dock-h:calc(var(--rail-h) + var(--dock-btn) + var(--dock-pad) + 8px);

    --icon-scale:.74;
    --fade-bottom: calc(var(--dock-h) + 10px);

    /* бумажная палитра */
    --field-bg:#EFE3C4; --field-b:#C7A469; --field-focus:#E0B65A;
    --field-text:#1B140B; --field-ph:#8B744B;

    /* соответствия */
    --paper: var(--field-bg);
    --text:  var(--field-text);

    /* ширина контента */
    --content-w-mobile: 480px;
    --content-w-desktop: 700px;
    --content-w: var(--content-w-mobile);

    --hero-pad: clamp(18px,4.3vmin,48px);
}

*{ box-sizing:border-box }
[hidden]{ display:none !important; }
img, video{ -webkit-user-drag:none; }
#md-body, .desc, .intro, .stats, .item-name, .item-name-rec, .nft-name, .section-title, .hero-title{
    overflow-wrap:anywhere; word-break:break-word;
}

html,body{ height:100%; overflow:hidden; }
body{
    position:relative; z-index:0; margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
    background:#fafafa; color:#111;
    font-size:calc(16px * var(--fs)); line-height:1.25;
    -webkit-tap-highlight-color: transparent;
}

/* основной скролл-контейнер */
.wrap{
    position:fixed; top:0; left:0; right:0; bottom:var(--dock-h);
    z-index:2;
    padding:max(8px, env(safe-area-inset-top,0px)) 16px 16px;

    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;

    scrollbar-width:none;
    -ms-overflow-style:none;
}
.wrap::-webkit-scrollbar{ width:0; height:0; display:none; }

/* утилитарные лэйауты */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;min-width:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.mini{font-size:0.9em}
.btns{display:flex;gap:10px;flex-wrap:wrap}


/* ======================================================================= */
/* === ZONE 1: Общие элементы UI (карточки/модалки/кнопки/чипсы/инпуты) == */
/* ======================================================================= */
/* карточки и модалка */
.card{border:1px solid var(--field-b);border-radius:12px;padding:12px;background:var(--field-bg);transition:filter .12s ease}
.card:hover{filter:brightness(1.02)}
.modal{position:fixed;inset:0;background:transparent;display:none;align-items:center;justify-content:center;padding:16px;z-index:9}
.modal.show{display:flex}
.sheet{max-width:760px;width:100%;max-height:85vh;overflow:auto;background:var(--field-bg);border-radius:14px;border:1px solid var(--field-b);padding:14px}

/* кнопки */
button{
    padding:9px 12px; font-size:1em; cursor:pointer; border-radius:12px;
    color:var(--field-text); background:var(--field-bg); border:0.75px solid var(--field-b);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.06);
    transition:transform .06s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
button.primary{ background:#F3E8CA; border-color:var(--field-focus); }
button:active{ transform:translateY(1px); }
button[disabled]{ opacity:.55; cursor:not-allowed; }
button:focus-visible{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }

/* chips/pills/badges */
.chip{padding:8px 12px;border:1px solid var(--field-b);border-radius:999px;background:var(--field-bg);color:var(--field-text);cursor:pointer}
.chip.active{border-color:var(--field-focus);background:#F3E8CA}
.pill{padding:2px 8px;border-radius:6px;font-size:0.9em;border:1px solid var(--field-b);background:var(--field-bg);color:var(--field-text)}
.pill.ok{background:#e7f8ef;color:#0a8f4d;border-color:#bfe7cf}
.pill.warn{background:#fff2d8;color:#ad6a00;border-color:#f0d8b8}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--field-b);font-size:0.9em;background:var(--field-bg);color:#1B140B}

/* поля ввода */
.search{align-items:center;margin:8px 0 12px}
.search-3{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.search input{padding:10px;border-radius:12px;min-width:160px;font-size:1em}
.kbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kbar input{width:110px;padding:6px;border-radius:10px}
input[type="text"],input[type="search"],input[type="number"],input[type="email"],select,textarea{
    -webkit-appearance:none;appearance:none;background:var(--field-bg);color:var(--field-text);
    border:1px solid var(--field-b);border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.06);
    max-width:100%;
}
input::placeholder,textarea::placeholder{color:var(--field-ph);opacity:.9}
input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--field-focus);
    box-shadow:0 0 0 2px rgba(224,182,90,.22), inset 0 1px 0 rgba(255,255,255,.4);
    background:#F3E8CA;
}

/* внутри бумажных панелей текст — чёрный */
.paper .inner{ color:#000; }
.paper .muted, .paper .desc, .paper .intro, .paper .stats { color:#000; opacity:1; }

/* центрирование больших блоков */
.paper, .hero, .banner{
    inline-size:min(100%, var(--content-w));
    margin-inline:auto;
}


/* ======================================================================= */
/* === ZONE 2: Бумажные панели — Hero / Banner / Paper =================== */
/* ======================================================================= */
/* HERO */
.hero{
    position:relative;
    margin: clamp(4px, 6vh, 96px) auto 0; /* аккуратно выше, TMA safe-area */
}
.hero-frame9{
    inline-size:100%;
    border: clamp(6px, 1.2vmin, 12px) solid transparent;
    border-image-source:url("./UI/Images/verticalframe.png");
    border-image-slice:140 fill;
    border-image-repeat:stretch;
    background:transparent;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));
    padding: clamp(10px, 2.8vmin, 20px);
    box-sizing:border-box;
}

/* контент отступает вниз от мини-панели (чтобы ничего не наезжало) */
.hero-inner{
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;
    padding-top: clamp(46px, 7vmin, 64px); /* отступ под мини-кнопки */
}

.hero-title .line{display:block}
.hero-title .name{
    display:inline-block;
    max-width:min(86vw, 560px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-weight:900; font-size: clamp(20px, 4.6vmin, 28px);
}
.hero-title .rank{ opacity:.9; font-size: clamp(14px, 3.6vmin, 18px); }
.hero-title .bal{ font-weight:700; }

/* Рюкзак — чуть крупнее */
#bagSlots{ font-size:1.1em; font-weight:700; }

/* Banner */
.banner{
    box-sizing:border-box; margin:4px auto 10px;
    aspect-ratio:1024/253;
    background:url("./UI/Images/topbanner.png") no-repeat center/100% 100%;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
    position:relative;
}
.banner .t{
    position:absolute;inset:clamp(6px,2.3vmin,18px) clamp(10px,3.2vmin,30px);
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-family:inherit; font-weight:800; letter-spacing:.2px;
    line-height:1.08; text-shadow:none;

    /* баланс переносов и адаптивный размер */
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: clamp(18px, 5.2vw, 38px);
}

/* Бумажные панели */
.paper{
    --pad:clamp(10px,2.8vmin,22px);
    margin:8px auto;
    box-sizing:border-box;
    border-style:solid;
    border-width:clamp(18px,2.6vmin,34px);
    border-image-source:url("./UI/Images/listframe.png");
    border-image-slice:86 fill;
    border-image-repeat:stretch;
    background:transparent;
}
.paper.empty{border-image-source:url("./UI/Images/listemptyframe.png")}
.paper .inner{padding:var(--pad)}

/* инвентарь: рамка компактнее */
#view-inventory .paper{ --pad: clamp(4px,1.6vmin,12px); border-width: clamp(14px,2.2vmin,28px); }
#view-inventory .grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
#view-inventory .card{ padding:8px; }


/* ======================================================================= */
/* === ZONE 3: Навигация (Dock) и иконочные кнопки ======================= */
/* ======================================================================= */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:3;display:block;pointer-events:none}
.dock-rail{position:absolute;top:0;left:var(--rail-inset);right:var(--rail-inset);height:var(--rail-h);background-image:url("./UI/Images/rail2.png");background-repeat:no-repeat;background-position:center;background-size:100% 100%;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.08));pointer-events:none;z-index:1}
.dock-buttons{
    position:relative;display:flex;align-items:flex-end;justify-content:space-evenly;
    gap:var(--dock-gap);padding:calc(var(--rail-h) + 4px) 12px calc(var(--dock-pad) + 6px);
    z-index:2; pointer-events:auto;
}
.dock-btn{
    position:relative;width:var(--dock-btn);height:var(--dock-btn);padding:0;border:none;background:transparent;outline:none;transform:translateZ(0);
    pointer-events:auto;cursor:pointer
}
.dock-btn .frame{position:absolute;inset:0;background:url("./UI/Images/frame2.png") no-repeat center/100% 100%}
.dock-btn .icon{position:absolute;top:50%;left:50%;width:calc(var(--dock-btn) * var(--icon-scale));height:calc(var(--dock-btn) * var(--icon-scale));transform:translate(-50%,-50%);object-fit:contain;image-rendering:auto;pointer-events:none;filter:sepia(.18) saturate(.95) brightness(.95) contrast(.98)}
.dock-btn.active .icon{filter:sepia(.18) saturate(1.05) brightness(1) contrast(1.02)}
.dock-btn:active .frame{transform:translateY(1px)}
.dock-btn.active .frame{filter:drop-shadow(0 3px 0 rgba(0,0,0,.22))}
.dock-btn:focus-visible{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }

/* иконочные кнопки */
.btn-icon{
    width:clamp(28px,4.6vmin,38px);
    height:clamp(28px,4.6vmin,38px);
    border:0;
    background:transparent no-repeat center/100% 100%;
    cursor:pointer;
    border-radius:0 !important;
    -webkit-mask:none !important;
    mask:none !important;
}
.btn-icon.ok{background-image:url("./UI/Images/okbtn.png")}
.btn-icon.close{background-image:url("./UI/Images/closebtn.png")}


/* ======================================================================= */
/* === ZONE 4: Экраны — Бой / Лабиринт / Инвентарь ======================= */
/* ======================================================================= */
/* БОЙ */
#view-battle{ font-size:calc(1em * var(--fs-battle)); }
.monster{
    display:grid;
    grid-template-columns:104px 1fr;
    grid-template-areas:
        "ava head"
        "desc desc";
    column-gap:12px; row-gap:8px; align-items:flex-start;
}
.monster-avatar{ grid-area: ava; position:relative; width:104px; height:104px; background:url("./UI/Images/monsterframe.png") no-repeat center/100% 100%; }
.monster-avatar, .monster-avatar>img{ border-radius:0; }
.monster-avatar>img{ position:absolute; inset:12px; max-width:calc(100% - 24px); max-height:calc(100% - 24px); width:auto; height:auto; object-fit:cover; display:block }
.monster-head{ grid-area: head; display:flex; flex-direction:column; gap:4px; }
.monster-title{ font-weight:800; }
.monster-desc{ grid-area: desc; }

/* textarea «Твой ход» */
#b-text{
    display:block; width:100%; max-width:100%; box-sizing:border-box;
    border:clamp(12px,2.1vmin,18px) solid transparent;
    border-image:url("./UI/Images/listframe.png") 86 fill;
    border-image-repeat:stretch;
    background:rgba(239,227,196,.95);
    padding:clamp(12px,2.6vmin,22px);
    min-height:max(96px,22vh);
    border-radius:0;
}

/* ЛАБИРИНТ */
#maze-root{ --mz-tile:56px; --mz-gap:0px; --mz-btn:52px; }
#view-maze .paper{ --pad: clamp(3px,1.2vmin,10px); border-width: clamp(14px,2vmin,28px); inline-size: min(100%, 96vw); }
#view-maze .paper .inner{ padding-top: clamp(2px,0.6vmin,6px); }
.maze-head{ margin:-6px 0 2px; text-align:center; }
.maze-grid{
    display:grid;
    grid-template-columns:repeat(3, var(--mz-tile));
    grid-template-rows:repeat(3, var(--mz-tile));
    gap:var(--mz-gap);
    justify-content:center;
    margin:2px 0 6px;
}
.mz-tile{
    position:relative;
    width:var(--mz-tile); height:var(--mz-tile);
    background:#1b1b1b; background-size:100% 100%;
    border-radius:0; border:1px solid var(--field-b); overflow:hidden;
}
.mz-tile.mz-black{ background:#111; }
.mz-you{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-size:calc(var(--mz-tile) * .4); filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.mz-emoji{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:calc(var(--mz-tile) * .36); filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); pointer-events:none; }

.maze-controls{display:flex;flex-direction:column;align-items:center;gap:calc(var(--mz-btn)*.12)}
.maze-controls .mz-row{display:flex;gap:calc(var(--mz-btn)*.12)}
.maze-controls .mz-btn{
    min-width:var(--mz-btn);
    height:var(--mz-btn);
    padding:0;
    border-radius:12px;
    font-size:calc(var(--mz-btn)*.36);
}
.maze-controls .mz-btn[disabled]{opacity:.5;cursor:not-allowed}
.maze-controls .mz-btn.can{ background:#F3E8CA; border-color:var(--field-focus); }
.maze-pay{display:flex;flex-direction:column;align-items:center}
#view-maze .ads-box{ margin-top:8px; display:grid; gap:6px; justify-items:center; }
#view-maze .ads-box .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
#view-maze .ads-box .counter{ font-weight:800; }
#view-maze .maze-done { position: relative; filter: grayscale(0.75) opacity(0.85); pointer-events: none; }
#view-maze .maze-done::after{ content: "Забег завершён"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* ИНВЕНТАРЬ */
.inv-summary{
    border:clamp(12px,2vmin,18px) solid transparent;
    border-image:url("./UI/Images/listemptyframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    padding:8px 12px;
    margin-bottom:10px;
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:8px;
    min-height:40px;
}
.inv-summary .inv-s-text{ text-align:center; font-weight:800; letter-spacing:.2px; }
.inv-summary .s-actions{ justify-self:end; white-space:nowrap; }
.inv-summary .s-actions button{ padding:6px 10px; border-radius:10px; }

.section-head{ margin:4px 6px 8px; text-align:center; }
.section-head .section-title{ font-weight:800; }

.item-list{display:flex;flex-direction:column;gap:8px}
.item{
    padding:10px;
    border:1px solid #e1cfa7;
    border-radius:12px;
    background:#FAF4E3;
    transition:filter .12s ease;
}
.item:hover{ filter:brightness(1.01); }

.rdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.rdot.c1{background:#98c379}.rdot.c2{background:#61afef}.rdot.c3{background:#e5c07b}.rdot.c4{background:#c678dd}.rdot.c5{background:#e06c75}

.item-head{
    display:grid;
    grid-template-columns: 10px minmax(0,1fr) auto auto;
    align-items:center;
    gap:4px;
}
.item-name{
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-weight:800; font-size:.95em;
}
.rank-chip{
    display:inline-block; margin-right:6px;
    padding:2px 6px; border-radius:8px;
    font-size:.85em; background:#f1e3c3; border:1px solid #d8c199;
}
.price-badge,.qty-badge{
    display:inline-flex; align-items:center; justify-content:center;
    height:26px; padding:0 6px;
    font-weight:800; font-variant-numeric:tabular-nums;
    border:1px solid var(--field-b); border-radius:999px; background:#f4ead0;
}
.price-badge{ width:calc(5ch + 12px); min-width:calc(5ch + 12px); justify-self:end; }
.qty-badge{   width:calc(3ch + 10px); min-width:calc(3ch + 10px); justify-self:end; }

.item-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.item-actions button{ padding:4px 8px; font-size:.88em; border-radius:10px; }


/* ======================================================================= */
/* === ZONE 5: Биржа (стакан/график/действия/мои заявки) ================= */
/* ======================================================================= */
.ex{ display:grid; grid-template-rows:auto auto auto auto; gap:10px; }
.ex-head .ex-title{ font-weight:800; margin-bottom:2px; }
.ex-head #ob-best{ margin-top:2px; }

.ex-book{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ex-col{ border:1px solid var(--field-b); border-radius:10px; padding:8px; background:var(--field-bg); }
.ex-subtitle{ font-size:.9em; opacity:.8; margin-bottom:4px; }
.ex-level{ display:flex; align-items:center; justify-content:space-between; padding:2px 0; font-variant-numeric:tabular-nums; }

.ex-chart{ height:auto; display:flex; justify-content:center; }
/* подписи шкалы графика */
.ex-chart svg .tick{
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    fill: #000; opacity: .8;
}
.ex-chart svg .tick.last{ font-weight: 800; }
.ex-chart svg .grid{ stroke: currentColor; opacity: .22; stroke-dasharray: 2 4; }

/* НОВЫЕ действия: две строки, каждая — qty | price | button */
.ex-actions{ display:block; }
.ex-rows{ display:grid; gap:8px; }
.ex-row{
    display:grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    gap:8px;
    align-items:end;
}
.ex-row input{ width:100%; }
@media (max-width:420px){
    .ex-row{ grid-template-columns: 1fr 1fr; }
    .ex-row button{ grid-column: 1 / -1; }
}

/* мои заявки (список) */
.ex-my{ max-height:58vh; overflow:auto; border:1px solid var(--field-b); border-radius:10px; background:var(--field-bg); padding:6px; }
.ex-my-sec{ padding:4px 2px; }
.ex-my-sec .row{ padding:6px 0; border-bottom:1px dashed #d8c199; }
.ex-my-sec .row:last-child{ border-bottom:0; }
@media (max-width: 520px){ .ex-book{ gap:8px; } }
@media (max-width: 380px){ .ex-book{ grid-template-columns:1fr; } }


/* ======================================================================= */
/* === ZONE 6: Рецепты =================================================== */
/* ======================================================================= */
.tree{ list-style:none; padding:0; margin:8px 0; display:grid; gap:8px; }
.lvl{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:8px; padding:8px 10px; border:1px solid var(--field-b);
    border-radius:10px; background:var(--field-bg);
}
.kv{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.item-name-rec{ font-weight:800; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge.ok{ background:#e7f8ef; color:#0a8f4d; border-color:#bfe7cf; }
.badge.miss{ background:#fff2d8; color:#ad6a00; border-color:#f0d8b8; }
.right{ display:flex; align-items:center; gap:8px; }
.leaf-go{ padding:6px 10px; border-radius:10px; border:1px solid var(--field-b); background:#F3E8CA; }
@media (max-width:420px){
    .lvl{ grid-template-columns:1fr; }
    .right{ justify-content:flex-start; }
}

/* ======================================================================= */
/* === ZONE 7: Профиль (читабельный, лёгкий, без «рамки в рамке») ======= */
/* ======================================================================= */

/* мини-кнопки вокруг баннера (как было) */
.profile-btn,.shop-btn,.admin-btn,.release-btn{
    position:absolute; border:4px solid transparent;
    border-image:url("./UI/Images/profileframe.png") 86 fill; border-image-repeat:stretch;
    background:transparent; width:56px; height:56px; padding:0; display:grid; place-items:center; cursor:pointer;
}
.profile-btn{ top:10px; right:10px; } .shop-btn{ top:76px; right:10px; }
.admin-btn{ top:10px; left:10px; z-index:2; } .release-btn{ top:10px; left:10px; z-index:3; }
.release-btn + .admin-btn{ top:74px; }
.profile-btn img.profile-ico,.shop-btn img,.admin-btn img,.release-btn img.profile-ico{
    width:30px; height:auto; object-fit:contain; display:block; filter:sepia(.18) saturate(.95) brightness(.97) contrast(.98);
}
.profile-btn:active,.shop-btn:active,.admin-btn:active,.release-btn:active{ transform:translateY(1px); }

/* общий «лист» профиля */
.profile-wrap{
    display:flex; flex-direction:column; gap:12px;
    background: color-mix(in srgb, var(--field-bg) 94%, transparent);
    border:1px solid var(--field-b); border-radius:14px;
    padding: clamp(10px, 2.6vmin, 16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.12);
    color: var(--field-text);
}

/* секции внутри «листа» — тонкий рэйл */
.profile-sec{
    border:1px solid color-mix(in srgb, var(--field-b) 72%, transparent);
    border-radius:12px;
    padding: clamp(8px, 2vmin, 12px);
    background: transparent;
}

/* шапка: слоты | аватар | слот */
.profile-head{ display:grid; grid-template-columns:80px 1fr 80px; gap:10px; align-items:center; }
.profile-slot{
    width:80px; height:80px; border-radius:12px;
    border:1px solid var(--field-b); background:var(--field-bg);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.profile-slot-pic img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.profile-avatar{
    height:110px; border-radius:14px; border:1px solid var(--field-b); background:var(--field-bg);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.profile-avatar img{ width:110px; height:110px; object-fit:cover; border-radius:12px; display:block; }

/* строки данных */
.profile-data{ display:flex; flex-direction:column; gap:8px; }
.p-row{ display:grid; grid-template-columns:110px 1fr auto; gap:8px; align-items:center; }
.p-row .label{ color:var(--field-text); font-weight:800; font-size:.94em; opacity:.95; }
.p-row .val{
    white-space:pre-wrap; background: var(--field-bg); color: var(--field-text);
    border:1px solid var(--field-b); border-radius:10px; padding:8px 10px;
}
.p-row .val input,.p-row .val textarea,.p-row .val select{ width:100%; border:0; outline:0; background:transparent; color:inherit; font:inherit; }
.p-row .val textarea{ min-height:72px; resize:vertical; }
.p-row .edit{ border:1px solid var(--field-b); background:var(--field-bg); padding:6px 10px; border-radius:10px; cursor:pointer; }
.p-row .edit:hover{ filter:brightness(1.05); }

/* бонусы */
.bonus-list{ display:flex; gap:6px; flex-wrap:wrap; }
.bonus-pill{
    padding:6px 10px; border-radius:999px; background:var(--field-bg); color:var(--field-text);
    border:1px solid var(--field-b); font-weight:800; font-size:.92em; white-space:nowrap;
}

/* подарки — тонкий рэйл и лёгкие карточки */
.gift-rail-wrap{
    border:1px solid color-mix(in srgb, var(--field-b) 72%, transparent);
    border-radius:12px; padding:8px; background:transparent;
}

/* ЛЕНТА: свайп/drag, без видимого скроллбара; pan-x для мобилок */
.gift-rail{
    display:grid; grid-auto-flow:column; grid-auto-columns:136px;
    gap:10px; padding:2px 4px;
    overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    touch-action: pan-x;             /* <— важно для мобильных */
    cursor:grab; scrollbar-width:none;
}
.gift-rail:active{ cursor:grabbing; }
.gift-rail::-webkit-scrollbar{ height:0; width:0; display:none; }

/* карточки подарков */
.gift-slot{
    inline-size:136px; aspect-ratio:1/1;
    border:1px solid var(--field-b); border-radius:10px; overflow:hidden;
    background:var(--field-bg); display:grid; place-items:center;
    scroll-snap-align:start; cursor:pointer;
}
.gift-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.gift-slot:focus-visible{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }

/* модалка подарка «в один экран» */
.gift-sheet .nft-card .imgwrap{ aspect-ratio:1/1; max-inline-size:min(72vw, 360px); margin-inline:auto; }
.gift-sheet .mini{ line-height:1.25; }

/* мобильная сетка профиля */
@media (max-width: 480px){
    .p-row{ grid-template-columns: 1fr; }
    .p-row .edit{ justify-self:end; }
}

/* ======================================================================= */
/* === ZONE 8: NFT ======================================================= */
/* ======================================================================= */
@media (max-width: 520px){ .nft-grid{ grid-template-columns:1fr; } }

.nft-wrap{ display:grid; gap:12px; }
.nft-sec{
    border:clamp(12px,2vmin,18px) solid transparent;
    border-image:url("./UI/Images/listemptyframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    padding:10px;
}
.nft-head{
    width:100%; text-align:left; font-weight:800;
    border:1px solid var(--field-b); background:var(--field-bg);
    border-radius:12px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center;
}
.nft-head .arrow{ opacity:.8; }

.nft-grid{ margin-top:8px; display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }

.nft-card{ border:0; background:transparent; border-radius:0; overflow:visible; }
.nft-card .imgwrap{
    position:relative; width:100%; aspect-ratio: 1 / 1;
    background:transparent; -webkit-transform:translateZ(0); transform:translateZ(0);
}
.nft-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.nft-card.clickable{ cursor:pointer; }
.nft-card.clickable:hover{ filter:brightness(1.02); }
.nft-card.clickable:active{ transform:translateY(1px); }
.nft-card.clickable:focus-within{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }
.nft-card .badge{
    position:absolute; left:8px; top:8px; padding:2px 8px; border-radius:999px; font-size:.85em;
    background:#f0ead6; border:1px solid #d8c199;
}
.nft-card .badge.eph{ right:8px; left:auto; background:#fff6db; border-color:#e8cf90; }
.nft-card .badge.ok{ background:#e7f8ef; border-color:#bfe7cf; }
.nft-card .badge.cd{ background:#fff2d8; border-color:#f0d8b8; }
.nft-name{ font-weight:800; padding:8px 10px 2px; }
.nft-bonus{ padding:0 10px 10px; color:#000; opacity:.9; }


/* ======================================================================= */
/* === ZONE 9: Магазин и dock-fly ======================================== */
/* ======================================================================= */
.dock-fly{
    position:fixed; left:0; right:0; bottom:calc(var(--dock-h) + 8px);
    z-index:4; display:grid; justify-items:center;
    pointer-events:none;
    transform:translateY(12px); opacity:0;
    transition:transform .24s ease, opacity .24s ease;
    will-change: transform, opacity;
}
.dock-fly.show{ transform:none; opacity:1; pointer-events:auto; }

/* карточка fly-меню: перенос строк при дефиците ширины */
.dock-fly-card{
    border:14px solid transparent;
    border-image:url("./UI/Images/slideframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    padding:10px;

    display:flex;
    flex-wrap:wrap;               /* ← разрешаем переносы */
    justify-content:center;       /* ← центрируем ряды */
    align-items:stretch;
    gap:10px;

    max-width:min(92vw, 720px);
    will-change: transform, opacity;
    transform:translateY(8px) scale(.98);
    transition:transform .24s ease;
}
.dock-fly.show .dock-fly-card{ transform:translateY(0) scale(1); }

/* кнопки: адаптивная ширина → 2 колонки на узких экранах */
.dock-fly-btn{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px;
    background:var(--field-bg); border:1px solid var(--field-b);
    font-weight:800; cursor:pointer;

    flex: 1 1 42%;
    min-width: 140px;
    max-width: 320px;
}
.dock-fly-btn .icon{
    width:22px; height:22px; object-fit:contain;
    filter:sepia(.18) saturate(.95) brightness(.95) contrast(.98);
}
.dock-fly-btn:active{ transform:translateY(1px); }
.dock-fly-btn:focus-visible{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }

/* совсем узкие окна — прячем подпись, оставляем иконку */
@media (max-width:340px){
    .dock-fly-btn span{ display:none; }
}

/* shop widgets */
.shop-header .title { display:flex; gap:8px; align-items:center; font-size:1.1rem; }
.shop-header .kbar { flex-wrap:wrap; gap:8px; }
.tab { padding:6px 10px; border-radius:10px; border:1px solid var(--border); background:var(--chip); }
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.shop-content { margin-top:10px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.kpi { padding:10px; border:1px dashed #d8c199; border-radius:10px; background:var(--field-bg); }
.kpi .label { font-size:.85rem; color:var(--muted); }
.kpi .value { font-weight:800; margin-top:4px; }
.toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.row-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--card); margin-bottom:8px; }
.row-card .ttl { font-weight:800; }

/* ======================================================================= */
/* === ZONE 10: Утилиты / A11y / Фон / Интро ============================= */
/* ======================================================================= */
/* моноширинный шрифт для чисел */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Вейл блокировки */
.busy-veil{
    position:fixed; inset:0; z-index:7; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.35);
}
.busy-veil .box{
    border:14px solid transparent;
    border-image:url("./UI/Images/listemptyframe.png") 86 fill;
    border-image-repeat:stretch;
    padding:14px 18px; background:transparent; color:var(--field-text); border-radius:8px;
    font-weight:800; text-align:center; min-width:220px;
    background-clip: padding-box;
}

/* фиксы строки поиска рецептов */
#view-recipes .search input{ min-width:0; }
@media (max-width:420px){
    #view-recipes .search-3{ grid-template-columns:minmax(0,0.72fr) auto auto; gap:6px; }
}

/* видео-фон на весь экран */
#bg{
    position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
#bgv{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

/* адаптив ширины макета */
@media (min-width: 1024px){
    :root{ --content-w: var(--content-w-desktop); }
}

/* Общие фильтры (Биржа/Рецепты) */
.filters{ display:grid; gap:10px; margin:6px 0 2px; }
.filters .row-cat{ display:grid; grid-template-columns:1fr; }
.filters .row-rank{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.filters .row-price{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.filters .row-flags{ display:flex; align-items:center; gap:12px; }
.filters .f{ display:flex; flex-direction:column; gap:6px; }
.filters .f .l{ font-size:.95em; opacity:.9; }
.filters select.big{ min-height:44px; padding:12px; font-size:1.06em; border-radius:12px; }
.filters input.big{  min-height:44px; padding:12px; font-size:1.06em; border-radius:12px; }
.filters .flag{ display:flex; align-items:center; gap:10px; font-size:1.02em; }
.filters .flag input{ inline-size:22px; block-size:22px; }
@media (max-width: 420px){
    .filters .row-rank, .filters .row-price{ grid-template-columns:1fr; }
}

/* a11y helpers */
.sr-only{
    position:absolute !important; width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important; overflow:hidden !important;
    clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.kbd{ display:inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#f2e6c8; border:1px solid #d8c199; border-radius:8px; padding:2px 6px; }

/* Интро */
body.booting .wrap,
body.booting #dock,
body.booting #dock-fly,
body.booting #dock-fly-inv { visibility: hidden; pointer-events: none; }

#intro{
    position: fixed; inset: 0; z-index: 10;
    display: grid; place-items: center;
    background: transparent; pointer-events: auto;
    opacity: 1;
}
#intro .iv, #intro #introv{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
#intro .intro-text{
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 18%;
    width: min(92vw, 820px);
    text-align: center; padding: 0 10px;
    pointer-events: none;
}
#intro .intro-line{
    font-weight: 800;
    font-size: clamp(18px, 5.2vmin, 40px);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
#intro .intro-line.big{
    font-size: clamp(28px, 8.6vmin, 68px);
    letter-spacing: .2px;
}
#intro .shimmer{
    background: linear-gradient(90deg, #d6b15a 0%, #ffffff 30%, #d6b15a 60%, #b98a2a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: text-shimmer 4s linear infinite;
}
@keyframes text-shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
#intro.fade-out{ animation: intro-fade .6s ease forwards; }
@keyframes intro-fade { to { opacity: 0; visibility: hidden; } }


/* ======================================================================= */
/* === ZONE 11: Вопрос дня / «Что нового?» / Каланча ===================== */
/* ======================================================================= */
/* Вопрос дня */
.riddle-sheet .sheet { max-width: 760px; }
.riddle-box { display: grid; gap: 10px; }
.r-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.r-title { font-weight:800; }
.r-loader { display:grid; justify-items:center; gap:8px; padding:10px; }
.r-spinner{ width:22px; height:22px; border:2px solid #0002; border-top-color:#000a; border-radius:50%; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(1turn); } }
.r-q{
    border:1px solid var(--field-b); background:var(--field-bg); border-radius:10px; padding:10px;
    white-space:pre-wrap; line-height:1.38; hyphens:auto; text-wrap:balance;
}
.rid-timer{ border:1px solid var(--field-b); background:#f4ead0; padding:4px 8px; border-radius:999px; font-variant-numeric: tabular-nums; font-weight:800; }
.rid-opts{ display:grid; gap:6px; margin-top:4px; }
.rid-opts input[type="radio"]{ inline-size:18px; block-size:18px; }
.rid-opt{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--field-b); border-radius:10px; background:var(--field-bg); }
.rid-opt .idx{ font-weight:800; min-width:2.2ch; }
.rid-opts-readonly .rid-opt{ opacity:.95; }
.rid-opt.ok{ background:#e7f8ef; border-color:#bfe7cf; }
.rid-opt.bad{ background:#fff2d8; border-color:#f0d8b8; }
.rid-opt.chosen{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }
.r-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.rid-result{ display:grid; gap:6px; margin-top:6px; }
.rid-result .verdict{ font-weight:800; }
.rid-result .reward{ font-weight:800; }

/* «Что нового?» */
.release-bar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.release-pill{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:var(--field-bg); border:1px solid var(--field-b); font-size:12px; }
.release-pill.muted{ opacity:.6; cursor:not-allowed; }
.release-date-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.release-box{ border:1px solid var(--field-b); background:var(--field-bg); border-radius:12px; padding:10px; max-height:44vh; overflow:auto; white-space:pre-wrap; line-height:1.35; }
.rel-sheet { display:grid; gap:10px; }
.rel-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rel-chips { display:flex; gap:8px; flex-wrap:wrap; }
.rel-date { display:flex; align-items:center; gap:8px; }
.rel-date select { padding:6px 8px; border-radius:8px; border:1px solid var(--field-b); background:var(--field-bg); color:var(--field-text); }
.rel-scroll { border:1px solid var(--field-b); border-radius:12px; background:var(--field-bg); padding:10px; max-height:48vh; overflow:auto; }
.rel-title { font-weight:800; font-size:18px; margin:0 0 6px 0; }
.rel-sec { margin:8px 0 10px; }
.rel-h2 { margin-bottom:4px; font-size:15px; }
.rel-list { margin:0; padding:0 0 0 0; display:grid; gap:4px; }
.rel-list li { list-style:none; padding-left:18px; position:relative; line-height:1.3; }
.rel-list li::before { content:"—"; position:absolute; left:2px; top:0; opacity:.7; }
.rel-ol { margin:0 0 0 18px; padding:0; display:grid; gap:4px; }

/* Каланча */
.kal-head{ display:grid; gap:8px; }
.kal-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.kal-kbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kal-admin-panel{ display:flex; align-items:center; gap:10px; border:1px dashed #d8c199; border-radius:10px; padding:8px; background:var(--field-bg); }
.kal-pager{ display:flex; align-items:center; gap:8px; }
.kal-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
.kal-badge{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--field-b); background:var(--field-bg); font-size:.92em; }
.kal-mode-open{ background:#e7f8ef; border-color:#bfe7cf; }
.kal-mode-closed{ background:#fff2d8; border-color:#f0d8b8; }
.kal-q{ font-weight:800; margin:6px 0 10px; }
.kal-bars{ display:grid; gap:6px; margin:8px 0; }
.kal-bar{ position:relative; border:1px solid var(--field-b); border-radius:10px; background:#f9f0d6; overflow:hidden; }
.kal-bar-fill{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, rgba(224,182,90,.25), rgba(224,182,90,.05)); }
.kal-bar-row{ position:relative; display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 10px; min-height:36px; }
.kal-bar-name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; }
.kal-bar-val{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.kal-stats{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.kal-vote{ border:1px dashed #d8c199; border-radius:10px; padding:10px; margin-top:10px; }
.kal-opts{ display:grid; gap:6px; margin-bottom:6px; }
.kal-opt{ display:flex; align-items:center; gap:8px; }
.kal-hint.mini{ opacity:.85; }
.kal-empty{ text-align:center; opacity:.85; padding:14px 0; }
.kal-form .kal-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.kal-form .kal-row.inline{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kal-ans-list{ display:grid; gap:6px; }
.kal-ans-row{ display:grid; grid-template-columns:1fr auto; gap:6px; }
.kal-pay{ display:flex; gap:8px; flex-wrap:wrap; }
.kal-admin-actions{ display:flex; gap:8px; margin-top:10px; }


/* ======================================================================= */
/* === ZONE 12: Персональные задания / FAB-ы ============================ */
/* ======================================================================= */
.pt-head{ display:grid; gap:8px; }
.pt-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
#pt-list{ display:grid; gap:10px; }
.pt-card{ padding:10px; border:1px solid #e1cfa7; border-radius:12px; background:#FAF4E3; }
.pt-title{ font-weight:800; margin-bottom:4px; }
.pt-desc{ white-space:pre-wrap; }
.pt-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.pt-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pt-attach{ border:1px dashed #d8c199; border-radius:10px; padding:8px; }
.pt-attach .pt-drop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pt-attach input[type="file"]{ display:none; }
.pt-attach .thumbs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pt-attach .thumbs img{ width:56px; height:56px; object-fit:cover; border:1px solid var(--field-b); border-radius:8px; }
.pt-admin{ display:grid; gap:12px; }
.pt-admin .pt-form-row{ display:grid; gap:6px; }
.pt-admin .pt-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pt-admin .pt-kbar{ display:flex; gap:8px; flex-wrap:wrap; }
.flag{ display:flex; align-items:center; gap:10px; }

#view-tasks .paper{ inline-size:min(100%, 96vw); }
#view-tasks .paper .inner{ padding: clamp(8px, 2.4vmin, 16px); }
.pt-card{ overflow-wrap:anywhere; word-break:break-word; }
.pt-attach .pt-drop{ min-width:0; }

/* Trivia FAB + Pending FAB (левая плашка) */
.trivia-fab{
    position:fixed; left:10px; top:50%; transform:translateY(-50%);
    z-index:5; display:none; pointer-events:auto;
}
.trivia-fab.show{ display:block; }
.trivia-fab .btn{
    display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px;
    background: var(--paper); color: var(--text); border:1px solid var(--field-b);
    box-shadow:0 2px 8px rgba(0,0,0,.25); font-weight:800; cursor:pointer;
}
.trivia-fab .btn:active{ transform:translateY(1px); }
.trivia-fab .badge{ font-size:18px; line-height:1; }
.trivia-fab .tm{ font-variant-numeric:tabular-nums; min-width:48px; text-align:right; }
@media (max-width:420px){ .trivia-fab .tm{ min-width:40px; } }
#trivia-hfab{ position: fixed; left: 10px; top: calc(50% + 60px); transform: translateY(-50%); z-index: 5; }
#trivia-hfab .btn .txt{ font-weight:800; }

/* «Незавершённые» */
.pend-fab{ position:fixed; left:8px; top:50%; transform:translateY(-50%); z-index:5; display:none; }
.pend-fab .btn{
    display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:14px;
    background:var(--field-bg); border:1px solid var(--field-b); font-weight:800; cursor:pointer;
}
.pend-fab .btn:active{ transform:translateY(1px); }
.pend-fab .badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 6px;
    border-radius:999px; border:1px solid var(--field-b); background:#f4ead0;
    font-variant-numeric: tabular-nums;
}
/* скрыть бейдж на pend-fab и ужать кнопку */
.pend-fab .badge{ display:none !important; }
.pend-fab .btn{ gap:0; padding:8px 10px; }
body.modal-open .trivia-fab, body.modal-open .pend-fab, body.modal-open .kal-fab { display: none !important; }


/* ======================================================================= */
/* === ZONE 13: Палатка (Build/Tent) + WinFX ============================= */
/* ======================================================================= */
.build-banner { position:relative; aspect-ratio: 16/7; border-radius:16px; overflow:hidden; margin:8px 8px 10px; }
.build-banner .bg { width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(1.05); }
.build-banner .overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 38%, rgba(0,0,0,.45)); }
.build-banner .title { position:absolute; left:14px; bottom:34px; font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.build-banner .sub   { position:absolute; left:14px; bottom:12px; font-size:13px; color:#fff; opacity:.9; }

.build-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:0 8px 10px; }
@media (min-width:520px){ .build-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

.build-card { position:relative; border-radius:14px; overflow:hidden; background:rgba(239,227,196,.9);
    border:1px solid #00000022; box-shadow:0 8px 18px rgba(0,0,0,.08); cursor:pointer; transition:transform .12s ease; }
.build-card:hover{ transform:translateY(-1px); }
.build-card .pic{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#e8d9b6; }
.build-card .ttl{ padding:8px 10px 10px; font-weight:800; }
.build-card .badge{ position:absolute; right:8px; top:8px; font-size:11px; font-weight:700; padding:4px 6px; border-radius:10px; background:#00000066; color:#fff; }
.build-card.locked::after{
    content:"Скоро"; position:absolute; inset:auto 8px 8px 8px; height:28px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, #000000a0, #0000007a); color:#fff; font-weight:800; border-radius:10px;
}

.build-panel{ margin:6px 8px 12px; border:14px solid transparent;
    border-image-source:url("./UI/Images/frame.png"); border-image-slice:86 fill; border-image-repeat:stretch; }
.panel-head{ display:flex; align-items:center; gap:8px; margin:-2px -2px 6px; }
.panel-head .btn-icon{ width:32px; height:32px; min-width:32px; }
.panel-title{ font-weight:900; font-size:18px; }
.panel-body{ display:block; }

/* Эффект выигрыша (Гоблинская удача / сундук) */
.winfx { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10; pointer-events:none; }
.winfx .burst { position:absolute; width:min(86vw, 420px); height:min(86vw, 420px); border-radius:50%; background:radial-gradient(circle, #fff8 0%, #fff0 60%); animation:burst 680ms ease-out forwards; }
@keyframes burst { from{ transform:scale(.5); opacity:0 } 60%{ opacity:1 } to{ transform:scale(1.04); opacity:0 } }
.winfx .confetti { position:absolute; inset:0; overflow:hidden; }
/* дефолт переменная, чтобы не ругались линтеры/валидаторы */
.winfx .confetti i { --x: 0vw; position:absolute; width:10px; height:16px; background:currentColor; opacity:.95; border-radius:2px; animation:fall 1200ms linear forwards; }
@keyframes fall { from{ transform:translate(var(--x), -20vh) rotate(0) } to{ transform:translate(var(--x), 60vh) rotate(520deg); opacity:0; } }
.winfx .prize { position:relative; padding:16px 18px; font-weight:900; font-size:16px; background:rgba(239,227,196,.98);
    border:1px solid #0003; border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.25); }
.winfx.hide { animation: fadeOut .14s linear forwards; }
@keyframes fadeOut { to { opacity:0; } }
/* === Store (плитки разделов) === */
.store-card.locked::after{
    content:"Скоро";
    position:absolute; inset:auto 8px 8px 8px; height:28px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, #000000a0, #0000007a); color:#fff; font-weight:800; border-radius:10px;
}

/* === Gift shop === */
.gift-buy{
    display:grid; gap:10px;
}
.gift-buy .row{ display:grid; gap:6px; }
.gift-buy .row.inline{ grid-template-columns:1fr 1fr; gap:10px; }
.gift-buy .price{ font-weight:900; }

/* === Auction House === */
.auc-wrap{ display:grid; gap:10px; }
.auc-card{
    display:grid; gap:8px; align-items:center; justify-items:center;
    border:1px solid var(--field-b); border-radius:12px; padding:10px; background:var(--field-bg);
}
.auc-pic{
    position:relative; width:min(86vw, 420px); aspect-ratio:1/1; background:transparent;
    border:14px solid transparent; border-image:url("./UI/Images/slideframe.png") 86 fill; border-image-repeat:stretch;
    overflow:hidden;
}
.auc-pic img{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:cover; display:block; }
.auc-stats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.auc-stat{ padding:4px 8px; border:1px solid var(--field-b); background:#f4ead0; border-radius:999px; font-variant-numeric:tabular-nums; font-weight:800; }
.auc-admin{ border:1px dashed #d8c199; border-radius:10px; padding:10px; display:grid; gap:8px; background:var(--field-bg); }
.auc-admin .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auc-admin .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.auc-winner{
    font-weight:800; font-size:18px; letter-spacing:.2px;
    background: linear-gradient(90deg, #d6b15a 0%, #ffffff 30%, #d6b15a 60%, #b98a2a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    background-size: 200% 100%; animation: text-shimmer 4s linear infinite;
}

/* ======================================================================= */
/* === ZONE 14: Сезонное/События — Тыквы/Квадраты судьбы ================= */
/* ======================================================================= */
.pump-grid{
    --N: 10;
    display:grid;
    grid-template-columns: repeat(var(--N), minmax(0, 1fr));
    gap:6px;
}
.pump-grid .cell{
    aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:700;
}
.pump-fab{
    position: fixed;
    right: 12px; bottom: calc(var(--dock-h) + 12px);
    z-index: 5;
    width: 56px; height: 56px; padding: 0;
    border-radius: 999px;
    font-size: 28px; line-height: 1;
    background: var(--field-bg); color: var(--field-text);
    border: 1px solid var(--field-b);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.pump-fab:active{ transform: translateY(1px); }

/* Легенда и состояния клеток (читабельные фоны) */
.pump-legend{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.pump-legend .lg{ display:flex; align-items:center; gap:6px; font-size:.95em; }

.pump-grid .cell{
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(0,0,0,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.25);
    border-radius:12px;
    transition: filter .12s ease;
}
.pump-grid .cell:hover{ filter: brightness(1.03); }
.pump-grid .cell:focus-visible{ outline:2px solid rgba(224,182,90,.55); outline-offset:2px; }

.pump-grid .cell.st-unknown{ background: linear-gradient(#f4eefd,#ddd3f4); color:#1b140b; }
.pump-grid .cell.st-open   { background: linear-gradient(#f5f0e3,#e7dcc1); }
.pump-grid .cell.st-pump   { background: linear-gradient(#ffe9b3,#ffd27a); }

/* === Squares Event (универсальная сетка) === */
#ev-grid { display:grid; justify-content:center; }
.ev-wrap{
    background:#efe8d8; border-radius:12px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
    padding:8px;
}
.ev-grid{
    display:grid; gap:0; user-select:none; touch-action:manipulation;
}
.ev-tile{
    appearance:none; border:0; background:transparent;
    padding:0; margin:0; width:100%; aspect-ratio:1/1;
}
.ev-tile .cell{
    width:100%; height:100%;
    border:1px solid rgba(0,0,0,.12);
    background:linear-gradient(#f8f3e7,#efe4cf);
    display:grid;               /* центрирование содержимого */
    place-items:center;
}
.ev-tile.me .cell{ box-shadow: inset 0 0 0 3px #6aa84f; }   /* моя клетка */
.ev-tile.busy .cell{ background:linear-gradient(#e4f7e2,#c8f1c3); } /* занята кем-то */
.ev-tile.is-green { outline: 2px solid #2ecc71; box-shadow: 0 0 0 2px #2ecc71 inset; }

/* Счётчик людей — РОВНО ПО ЦЕНТРУ клетки, круг, масштаб через --ev-badge */
.ev-grid .ev-tile{ position:relative; }
.ev-grid .ev-tile .cnt{
    position:absolute; left:50%; top:50%;
    transform: translate(-50%, -50%);
    width: var(--ev-badge, 24px);
    height: var(--ev-badge, 24px);
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;

    border:1px solid var(--field-b);
    background:#f4ead0;
    font-weight:900;
    font-variant-numeric: tabular-nums;
    line-height:1;
    font-size: calc(var(--ev-badge, 24px) * .52);
    padding:0; /* идеальный круг без овала */
}

/* ======================================================================= */
/* === ZONE 15: Home (заголовок/кошелёк/балансы) ======================== */
/* ======================================================================= */
.wallet{
    display:grid;
    justify-items:center;
    gap:8px;
}
.wallet-table{
    display:grid;
    grid-template-columns: minmax(80px, 1fr) max-content;
    grid-auto-rows: minmax(22px, auto);
    gap:6px 10px;
    width: min(86vw, 280px);
    max-width: 280px;
    margin: 2px auto 0;
    padding-inline: 6px;
    background: transparent;
    border: 0;
}
.w-row{ display:contents; }
.w-name{ text-align:left; font-weight:800; letter-spacing:.1px; opacity:.95; padding-left: 4px; }
.w-name.big{ font-size:1.06em; }
.w-amount{
    text-align:right; font-weight:900; font-variant-numeric:tabular-nums;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    padding-right: 4px;
}

/* КНОПКИ: в одну строку сверху + более тонкая рамка */
.kbar.kbar-wallet{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
    width:100%; margin: 2px 0 6px;
}
.kbar.kbar-wallet > button{
    padding:8px 10px; border-radius:10px; border: 0.75px solid var(--field-b);
    font-size:calc(14px * var(--fs,1)); line-height:1.2; white-space:nowrap;
}
@media (min-width:560px){
    .kbar.kbar-wallet{ flex-wrap:nowrap; }
    .kbar.kbar-wallet > button{ min-width: unset; }
}

/* мини-иконки вверху рамки */
.mini-bar{ position:absolute; left:50%; top:8px; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.mini-btn9{
    inline-size:40px; block-size:40px; padding:0; display:grid; place-items:center;
    border:6px solid transparent; border-radius:0;
    border-image:url("./UI/Images/profileframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    font-size:18px; line-height:1;
}
.mini-btn9:active{ transform:translateY(1px); }

/* баланс и поповер */
.bal-wrap{ position:relative; display:grid; justify-items:center; }
.bal-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 10px;
    border:10px solid transparent;
    border-image:url("./UI/Images/listemptyframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    border-radius:0;
    font-weight:900;
}
.bal-btn .label{ font-weight:900; letter-spacing:.2px; }
.bal-btn .amount{
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-variant-numeric: tabular-nums;
}
.bal-pop{
    position:absolute; left:50%; transform:translateX(-50%);
    top: calc(100% + 6px);
    display:grid; gap:4px; padding:8px 10px; z-index:3;
    border:8px solid transparent;
    border-image:url("./UI/Images/listemptyframe.png") 86 fill;
    border-image-repeat:stretch;
    background:transparent;
    min-width:220px;
}
.bal-pop .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bal-pop .label{ font-weight:800; }
.bal-pop .amount{
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-variant-numeric: tabular-nums; font-weight:900;
}

/* мини-кнопка «🎬» */
.ad-mini{
    position:absolute; right:10px; bottom:10px; z-index:2;
    width:46px; height:46px; padding:0; line-height:1; font-size:22px;
    border-radius:999px;
    background:var(--field-bg); color:var(--field-text);
    border:0.75px solid var(--field-b);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.ad-mini:active{ transform:translateY(1px); }

/* Бумажная framed-кнопка рекламы (slice-9, без циферок на самой кнопке) */
.ad-mini.ad-mini-framed{
    position:absolute; right:10px; bottom:10px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;

    width:auto; height:auto; padding:6px 8px; border-radius:12px;

    border:10px solid transparent;
    border-image-source:url("./UI/Images/listemptyframe.png");
    border-image-slice:86 fill;
    border-image-repeat:stretch;
    background:transparent;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    max-width:46vw;
}

/* счётчик на кнопке больше не показываем */
.ad-mini .ad-counter{ display:none !important; }


/* ======================================================================= */
/* === ZONE 16: Профиль — слоты/компактность/адаптив ==================== */
/* ======================================================================= */
.avatar-row{
    display:grid;
    grid-template-columns: 72px 1fr 72px;
    align-items:center;
    gap: 10px;
    margin-bottom: 6px;
}
.slot-box{
    display:grid; grid-template-rows:auto 1fr; gap:4px;
    inline-size:72px; block-size:92px;
    border: 10px solid transparent;
    border-image: url("./UI/Images/listemptyframe.png") 86 fill;
    background: transparent;
    text-align:center;
}
.slot-cap{ font-size: 12px; line-height: 1; }
.slot-pic{ display:grid; place-items:center; font-weight: 900; opacity:.8; }

/* адаптив размеров ячеек/подарков */
@media (max-width: 480px){
    .avatar-row{ grid-template-columns: 1fr 1.2fr 1fr; }
    .slot-box{ inline-size:64px; block-size:86px; }
    .gift-rail--slots{ grid-auto-columns:112px; }
}


/* ======================================================================= */
/* === ZONE 17: Медиа-запросы и Reduced Motion ========================== */
/* ======================================================================= */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* лёгкие утолщения рамок спец-кнопок */
.dock-fly-btn,
.p-row .edit,
.leaf-go,
.pend-fab .btn,
.trivia-fab .btn { border-width:0.75px; }

/* компактнее рамка для home-paper */
#view-home .paper{
    border-width: clamp(12px, 1.8vmin, 20px);
}
/* ==== PROFILE: широкая «подложка» без внешней фоторамки ==== */
#view-profile .paper{
    /* убираем внешнюю картинку-рамку */
    border: 1px solid var(--field-b);
    border-radius: 16px;
    border-image: none;
    background: var(--field-bg);
    /* ширина — как у баннера (у нас они обе используют --content-w) */
    inline-size: min(100%, var(--content-w));
}
#view-profile .paper .inner{ padding: clamp(12px, 2.8vmin, 20px); }

/* Звезда без белого кружка, чуть крупнее и впритык к углу */
.profile-gifts .gift-star{
    position:absolute; top:4px; right:6px;
    width:auto; height:auto; padding:0;
    background:transparent; border:0; box-shadow:none;
    font-size:18px; line-height:1; cursor:pointer;
    text-shadow: 0 1px 0 #0002, 0 0 2px #fff6;
}
.profile-gifts .gift-star.on{ color:#c98c15; text-shadow: 0 0 3px #ffd78a; }

/* Палатка Звездочёта — сетка поменьше, переносы в строках */
.zt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.riddle-box .row{ flex-wrap: wrap; }
.card .mini{ line-height:1.25; overflow-wrap:anywhere; }